diff --git a/.claude/instructions.md b/.claude/instructions.md
new file mode 100644
index 00000000000..39573f6c449
--- /dev/null
+++ b/.claude/instructions.md
@@ -0,0 +1,46 @@
+# React
+
+**Scope**: All code EXCEPT `/compiler/` (compiler has its own instructions).
+
+## Project Structure
+
+| Directory | Purpose |
+|-----------|---------|
+| `/packages/` | Publishable packages (react, react-dom, scheduler, etc.) |
+| `/scripts/` | Build, test, and development scripts |
+| `/fixtures/` | Test applications for manual testing |
+| `/compiler/` | React Compiler (separate sub-project) |
+
+## Key Packages
+
+| Package | Purpose |
+|---------|---------|
+| `react` | Core React library |
+| `react-dom` | DOM renderer |
+| `react-reconciler` | Core reconciliation algorithm |
+| `scheduler` | Cooperative scheduling |
+| `react-server-dom-*` | Server Components |
+| `react-devtools-*` | Developer Tools |
+| `react-refresh` | Fast Refresh runtime |
+
+## Requirements
+
+- **Node**: Must be installed. Stop and prompt user if missing.
+- **Package Manager**: Use `yarn` only.
+
+## Verification
+
+**IMPORTANT**: Use `/verify` to validate all changes before committing.
+
+## Commands
+
+| Command  | Purpose              |
+|----------|----------------------|
+| `/fix`   | Lint and format code |
+| `/test`  | Run tests            |
+| `/flow`  | Type check with Flow |
+| `/flags` | Check feature flags  |
+
+## Building
+
+Builds are handled by CI. Do not run locally unless instructed.
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000000..f12f21abf44
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,44 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "if [[ \"$PWD\" != */compiler* ]]; then cat .claude/instructions.md 2>/dev/null || true; fi"
+          }
+        ]
+      }
+    ]
+  },
+  "permissions": {
+    "allow": [
+      "Skill(extract-errors)",
+      "Skill(feature-flags)",
+      "Skill(fix)",
+      "Skill(flags)",
+      "Skill(flow)",
+      "Skill(test)",
+      "Skill(verify)",
+      "Bash(yarn test:*)",
+      "Bash(yarn test-www:*)",
+      "Bash(yarn test-classic:*)",
+      "Bash(yarn test-stable:*)",
+      "Bash(yarn linc:*)",
+      "Bash(yarn lint:*)",
+      "Bash(yarn flow:*)",
+      "Bash(yarn prettier:*)",
+      "Bash(yarn build:*)",
+      "Bash(yarn extract-errors:*)",
+      "Bash(yarn flags:*)"
+    ],
+    "deny": [
+      "Bash(yarn download-build:*)",
+      "Bash(yarn download-build-for-head:*)",
+      "Bash(npm:*)",
+      "Bash(pnpm:*)",
+      "Bash(bun:*)",
+      "Bash(npx:*)"
+    ]
+  }
+}
diff --git a/.claude/skills/extract-errors/SKILL.md b/.claude/skills/extract-errors/SKILL.md
new file mode 100644
index 00000000000..08bb1830eb4
--- /dev/null
+++ b/.claude/skills/extract-errors/SKILL.md
@@ -0,0 +1,12 @@
+---
+name: extract-errors
+description: Use when adding new error messages to React, or seeing "unknown error code" warnings.
+---
+
+# Extract Error Codes
+
+## Instructions
+
+1. Run `yarn extract-errors`
+2. Report if any new errors need codes assigned
+3. Check if error codes are up to date
diff --git a/.claude/skills/feature-flags/SKILL.md b/.claude/skills/feature-flags/SKILL.md
new file mode 100644
index 00000000000..8e3281a1af2
--- /dev/null
+++ b/.claude/skills/feature-flags/SKILL.md
@@ -0,0 +1,79 @@
+---
+name: feature-flags
+description: Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
+---
+
+# React Feature Flags
+
+## Flag Files
+
+| File | Purpose |
+|------|---------|
+| `packages/shared/ReactFeatureFlags.js` | Default flags (canary), `__EXPERIMENTAL__` overrides |
+| `packages/shared/forks/ReactFeatureFlags.www.js` | www channel, `__VARIANT__` overrides |
+| `packages/shared/forks/ReactFeatureFlags.native-fb.js` | React Native, `__VARIANT__` overrides |
+| `packages/shared/forks/ReactFeatureFlags.test-renderer.js` | Test renderer |
+
+## Gating Tests
+
+### `@gate` pragma (test-level)
+
+Use when the feature is completely unavailable without the flag:
+
+```javascript
+// @gate enableViewTransition
+it('supports view transitions', () => {
+  // This test only runs when enableViewTransition is true
+  // and is SKIPPED (not failed) when false
+});
+```
+
+### `gate()` inline (assertion-level)
+
+Use when the feature exists but behavior differs based on flag:
+
+```javascript
+it('renders component', async () => {
+  await act(() => root.render(<App />));
+
+  if (gate(flags => flags.enableNewBehavior)) {
+    expect(container.textContent).toBe('new output');
+  } else {
+    expect(container.textContent).toBe('legacy output');
+  }
+});
+```
+
+## Adding a New Flag
+
+1. Add to `ReactFeatureFlags.js` with default value
+2. Add to each fork file (`*.www.js`, `*.native-fb.js`, etc.)
+3. If it should vary in www/RN, set to `__VARIANT__` in the fork file
+4. Gate tests with `@gate flagName` or inline `gate()`
+
+## Checking Flag States
+
+Use `/flags` to view states across channels. See the `flags` skill for full command options.
+
+## `__VARIANT__` Flags (GKs)
+
+Flags set to `__VARIANT__` simulate gatekeepers - tested twice (true and false):
+
+```bash
+/test www <pattern>              # __VARIANT__ = true
+/test www variant false <pattern> # __VARIANT__ = false
+```
+
+## Debugging Channel-Specific Failures
+
+1. Run `/flags --diff <channel1> <channel2>` to compare values
+2. Check `@gate` conditions - test may be gated to specific channels
+3. Run `/test <channel> <pattern>` to isolate the failure
+4. Verify flag exists in all fork files if newly added
+
+## Common Mistakes
+
+- **Forgetting both variants** - Always test `www` AND `www variant false` for `__VARIANT__` flags
+- **Using @gate for behavior differences** - Use inline `gate()` if both paths should run
+- **Missing fork files** - New flags must be added to ALL fork files, not just the main one
+- **Wrong gate syntax** - It's `gate(flags => flags.name)`, not `gate('name')`
diff --git a/.claude/skills/fix/SKILL.md b/.claude/skills/fix/SKILL.md
new file mode 100644
index 00000000000..9335409af1d
--- /dev/null
+++ b/.claude/skills/fix/SKILL.md
@@ -0,0 +1,17 @@
+---
+name: fix
+description: Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.
+---
+
+# Fix Lint and Formatting
+
+## Instructions
+
+1. Run `yarn prettier` to fix formatting
+2. Run `yarn linc` to check for remaining lint issues
+3. Report any remaining manual fixes needed
+
+## Common Mistakes
+
+- **Running prettier on wrong files** - `yarn prettier` only formats changed files
+- **Ignoring linc errors** - These will fail CI, fix them before committing
diff --git a/.claude/skills/flags/SKILL.md b/.claude/skills/flags/SKILL.md
new file mode 100644
index 00000000000..a9ddc331ea9
--- /dev/null
+++ b/.claude/skills/flags/SKILL.md
@@ -0,0 +1,39 @@
+---
+name: flags
+description: Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.
+---
+
+# Feature Flags
+
+Arguments:
+- $ARGUMENTS: Optional flags
+
+## Options
+
+| Option | Purpose |
+|--------|---------|
+| (none) | Show all flags across all channels |
+| `--diff <ch1> <ch2>` | Compare flags between channels |
+| `--cleanup` | Show flags grouped by cleanup status |
+| `--csv` | Output in CSV format |
+
+## Channels
+
+- `www`, `www-modern` - Meta internal
+- `canary`, `next`, `experimental` - OSS channels
+- `rn`, `rn-fb`, `rn-next` - React Native
+
+## Legend
+
+✅ enabled, ❌ disabled, 🧪 `__VARIANT__`, 📊 profiling-only
+
+## Instructions
+
+1. Run `yarn flags $ARGUMENTS`
+2. Explain the output to the user
+3. For --diff, highlight meaningful differences
+
+## Common Mistakes
+
+- **Forgetting `__VARIANT__` flags** - These are tested both ways in www; check both variants
+- **Comparing wrong channels** - Use `--diff` to see exact differences
diff --git a/.claude/skills/flow/SKILL.md b/.claude/skills/flow/SKILL.md
new file mode 100644
index 00000000000..5ef34a20129
--- /dev/null
+++ b/.claude/skills/flow/SKILL.md
@@ -0,0 +1,30 @@
+---
+name: flow
+description: Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
+---
+
+# Flow Type Checking
+
+Arguments:
+- $ARGUMENTS: Renderer to check (default: dom-node)
+
+## Renderers
+
+| Renderer | When to Use |
+|----------|-------------|
+| `dom-node` | Default, recommended for most changes |
+| `dom-browser` | Browser-specific DOM code |
+| `native` | React Native |
+| `fabric` | React Native Fabric |
+
+## Instructions
+
+1. Run `yarn flow $ARGUMENTS` (use `dom-node` if no argument)
+2. Report type errors with file locations
+3. For comprehensive checking (slow), use `yarn flow-ci`
+
+## Common Mistakes
+
+- **Running without a renderer** - Always specify or use default `dom-node`
+- **Ignoring suppressions** - Check if `$FlowFixMe` comments are masking real issues
+- **Missing type imports** - Ensure types are imported from the correct package
diff --git a/.claude/skills/test/SKILL.md b/.claude/skills/test/SKILL.md
new file mode 100644
index 00000000000..e150ad7e549
--- /dev/null
+++ b/.claude/skills/test/SKILL.md
@@ -0,0 +1,46 @@
+---
+name: test
+description: Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.
+---
+
+Run tests for the React codebase.
+
+Arguments:
+- $ARGUMENTS: Channel, flags, and test pattern
+
+Usage Examples:
+- `/test ReactFiberHooks` - Run with source channel (default)
+- `/test experimental ReactFiberHooks` - Run with experimental channel
+- `/test www ReactFiberHooks` - Run with www-modern channel
+- `/test www variant false ReactFiberHooks` - Test __VARIANT__=false
+- `/test stable ReactFiberHooks` - Run with stable channel
+- `/test classic ReactFiberHooks` - Run with www-classic channel
+- `/test watch ReactFiberHooks` - Run in watch mode (TDD)
+
+Release Channels:
+- `(default)` - Source/canary channel, uses ReactFeatureFlags.js defaults
+- `experimental` - Source/experimental channel with __EXPERIMENTAL__ flags = true
+- `www` - www-modern channel with __VARIANT__ flags = true
+- `www variant false` - www channel with __VARIANT__ flags = false
+- `stable` - What ships to npm
+- `classic` - Legacy www-classic (rarely needed)
+
+Instructions:
+1. Parse channel from arguments (default: source)
+2. Map to yarn command:
+   - (default) → `yarn test --silent --no-watchman <pattern>`
+   - experimental → `yarn test -r=experimental --silent --no-watchman <pattern>`
+   - stable → `yarn test-stable --silent --no-watchman <pattern>`
+   - classic → `yarn test-classic --silent --no-watchman <pattern>`
+   - www → `yarn test-www --silent --no-watchman <pattern>`
+   - www variant false → `yarn test-www --variant=false --silent --no-watchman <pattern>`
+3. Report test results and any failures
+
+Hard Rules:
+1. **Use --silent to see failures** - This limits the test output to only failures.
+2. **Use --no-watchman** - This is a common failure in sandboxing.
+
+Common Mistakes:
+- **Running without a pattern** - Runs ALL tests, very slow. Always specify a pattern.
+- **Forgetting both www variants** - Test `www` AND `www variant false` for `__VARIANT__` flags.
+- **Test skipped unexpectedly** - Check for `@gate` pragma; see `feature-flags` skill.
diff --git a/.claude/skills/verify/SKILL.md b/.claude/skills/verify/SKILL.md
new file mode 100644
index 00000000000..daed015e28e
--- /dev/null
+++ b/.claude/skills/verify/SKILL.md
@@ -0,0 +1,24 @@
+---
+name: verify
+description: Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
+---
+
+# Verification
+
+Run all verification steps.
+
+Arguments:
+- $ARGUMENTS: Test pattern for the test step
+
+## Instructions
+
+Run these first in sequence:
+1. Run `yarn prettier` - format code (stop if fails)
+2. Run `yarn linc` - lint changed files (stop if fails)
+
+Then run these with subagents in parallel:
+1. Use `/flow` to type check (stop if fails)
+2. Use `/test` to test changes in source (stop if fails)
+3. Use `/test www` to test changes in www (stop if fails)
+
+If all pass, show success summary. On failure, stop immediately and report the issue with suggested fixes.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
new file mode 100644
index 00000000000..2164efec0c8
--- /dev/null
+++ b/.codesandbox/ci.json
@@ -0,0 +1,13 @@
+{
+  "packages": ["packages/react", "packages/react-dom", "packages/react-server-dom-webpack", "packages/scheduler"],
+  "buildCommand": "download-build-in-codesandbox-ci",
+  "node": "20",
+  "publishDirectory": {
+    "react": "build/oss-experimental/react",
+    "react-dom": "build/oss-experimental/react-dom",
+    "react-server-dom-webpack": "build/oss-experimental/react-server-dom-webpack",
+    "scheduler": "build/oss-experimental/scheduler"
+  },
+  "sandboxes": ["new"],
+  "silent": true
+}
diff --git a/.editorconfig b/.editorconfig
index 7734a2a8143..48d2b3d27e8 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,4 @@
-# http://editorconfig.org
+# https://editorconfig.org
 root = true
 
 [*]
@@ -6,12 +6,11 @@ charset = utf-8
 end_of_line = lf
 indent_size = 2
 indent_style = space
+insert_final_newline = true
 max_line_length = 80
-trim_trailing_whitespace = true
 
 [*.md]
 max_line_length = 0
-trim_trailing_whitespace = false
 
 [COMMIT_EDITMSG]
 max_line_length = 0
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000000..fd9cc6bdca2
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,33 @@
+# Third party
+**/node_modules
+
+# Not written by hand
+packages/react-art/npm/lib
+
+# Build products
+build/
+coverage/
+fixtures/
+scripts/bench/benchmarks/**/*.js
+
+# React repository clone
+scripts/bench/remote-repo/
+
+# Compiler uses its own lint setup
+compiler/
+
+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-extensions/src/ErrorTesterCompiled.js
+packages/react-devtools-fusebox/dist
+packages/react-devtools-inline/dist
+packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
+packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
+packages/react-devtools-shell/dist
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static
+
+# Imported third-party Flow types
+flow-typed/
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000000..952149f30ca
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,658 @@
+'use strict';
+
+const {
+  es5Paths,
+  esNextPaths,
+} = require('./scripts/shared/pathsByLanguageVersion');
+
+const restrictedGlobals = require('confusing-browser-globals');
+
+const OFF = 0;
+const WARNING = 1;
+const ERROR = 2;
+
+module.exports = {
+  extends: ['prettier', 'plugin:jest/recommended'],
+
+  // Stop ESLint from looking for a configuration file in parent folders
+  root: true,
+
+  reportUnusedDisableDirectives: true,
+
+  plugins: [
+    'babel',
+    'ft-flow',
+    'jest',
+    'es',
+    'no-for-of-loops',
+    'no-function-declare-after-return',
+    'react',
+    'react-internal',
+  ],
+
+  parser: 'hermes-eslint',
+  parserOptions: {
+    ecmaVersion: 9,
+    sourceType: 'script',
+  },
+
+  // We're stricter than the default config, mostly. We'll override a few rules
+  // and then enable some React specific ones.
+  rules: {
+    'ft-flow/array-style-complex-type': [OFF, 'verbose'],
+    'ft-flow/array-style-simple-type': [OFF, 'verbose'], // TODO should be WARNING
+    'ft-flow/boolean-style': ERROR,
+    'ft-flow/no-dupe-keys': ERROR,
+    'ft-flow/no-primitive-constructor-types': ERROR,
+    'ft-flow/no-types-missing-file-annotation': OFF, // TODO should be ERROR
+    'ft-flow/no-unused-expressions': ERROR,
+    // 'ft-flow/no-weak-types': WARNING,
+    // 'ft-flow/require-valid-file-annotation': ERROR,
+    'es/no-optional-chaining': ERROR,
+    'no-cond-assign': OFF,
+    'no-constant-condition': OFF,
+    'no-control-regex': OFF,
+    'no-debugger': ERROR,
+    'no-dupe-args': ERROR,
+    'no-dupe-keys': ERROR,
+    'no-duplicate-case': WARNING,
+    'no-empty-character-class': WARNING,
+    'no-empty': OFF,
+    'no-ex-assign': WARNING,
+    'no-extra-boolean-cast': WARNING,
+    'no-func-assign': ERROR,
+    'no-invalid-regexp': WARNING,
+    'no-irregular-whitespace': WARNING,
+    'no-negated-in-lhs': ERROR,
+    'no-obj-calls': ERROR,
+    'no-regex-spaces': WARNING,
+    'no-sparse-arrays': ERROR,
+    'no-unreachable': ERROR,
+    'use-isnan': ERROR,
+    'valid-jsdoc': OFF,
+    'block-scoped-var': OFF,
+    complexity: OFF,
+    'default-case': OFF,
+    'guard-for-in': OFF,
+    'no-alert': OFF,
+    'no-caller': ERROR,
+    'no-case-declarations': OFF,
+    'no-div-regex': OFF,
+    'no-else-return': OFF,
+    'no-empty-pattern': WARNING,
+    'no-eq-null': OFF,
+    'no-eval': ERROR,
+    'no-extend-native': WARNING,
+    'no-extra-bind': WARNING,
+    'no-fallthrough': WARNING,
+    'no-implicit-coercion': OFF,
+    'no-implied-eval': ERROR,
+    'no-invalid-this': OFF,
+    'no-iterator': OFF,
+    'no-labels': [ERROR, {allowLoop: true, allowSwitch: true}],
+    'no-lone-blocks': WARNING,
+    'no-loop-func': OFF,
+    'no-magic-numbers': OFF,
+    'no-multi-str': ERROR,
+    'no-native-reassign': [ERROR, {exceptions: ['Map', 'Set']}],
+    'no-new-func': ERROR,
+    'no-new': WARNING,
+    'no-new-wrappers': WARNING,
+    'no-octal-escape': WARNING,
+    'no-octal': WARNING,
+    'no-param-reassign': OFF,
+    'no-process-env': OFF,
+    'no-proto': ERROR,
+    'no-redeclare': OFF, // TODO should be WARNING?
+    'no-return-assign': OFF,
+    'no-script-url': ERROR,
+    'no-self-compare': WARNING,
+    'no-sequences': WARNING,
+    'no-throw-literal': ERROR,
+    'no-useless-call': WARNING,
+    'no-void': OFF,
+    'no-warning-comments': OFF,
+    'no-with': OFF,
+    radix: WARNING,
+    'vars-on-top': OFF,
+    yoda: OFF,
+    'init-declarations': OFF,
+    'no-catch-shadow': ERROR,
+    'no-delete-var': ERROR,
+    'no-label-var': WARNING,
+    'no-shadow-restricted-names': WARNING,
+    'no-undef-init': OFF,
+    'no-undef': ERROR,
+    'no-undefined': OFF,
+    'callback-return': OFF,
+    'global-require': OFF,
+    'handle-callback-err': OFF,
+    'no-mixed-requires': OFF,
+    'no-new-require': OFF,
+    'no-path-concat': OFF,
+    'no-process-exit': OFF,
+    'no-restricted-modules': OFF,
+    'no-sync': OFF,
+    camelcase: [OFF, {properties: 'always'}],
+    'consistent-this': [OFF, 'self'],
+    'func-names': OFF,
+    'func-style': [OFF, 'declaration'],
+    'id-length': OFF,
+    'id-match': OFF,
+    'max-depth': OFF,
+    'max-nested-callbacks': OFF,
+    'max-params': OFF,
+    'max-statements': OFF,
+    'new-cap': OFF,
+    'newline-after-var': OFF,
+    'no-array-constructor': ERROR,
+    'no-continue': OFF,
+    'no-inline-comments': OFF,
+    'no-lonely-if': OFF,
+    'no-negated-condition': OFF,
+    'no-nested-ternary': OFF,
+    'no-new-object': WARNING,
+    'no-plusplus': OFF,
+    'no-ternary': OFF,
+    'no-underscore-dangle': OFF,
+    'no-unneeded-ternary': WARNING,
+    'one-var': [WARNING, {initialized: 'never'}],
+    'operator-assignment': [WARNING, 'always'],
+    'require-jsdoc': OFF,
+    'sort-vars': OFF,
+    'spaced-comment': [
+      OFF,
+      'always',
+      {exceptions: ['jshint', 'jslint', 'eslint', 'global']},
+    ],
+    'constructor-super': ERROR,
+    'no-class-assign': WARNING,
+    'no-const-assign': ERROR,
+    'no-dupe-class-members': ERROR,
+    'no-this-before-super': ERROR,
+    'object-shorthand': OFF,
+    'prefer-const': OFF,
+    'prefer-spread': OFF,
+    'prefer-reflect': OFF,
+    'prefer-template': OFF,
+    'require-yield': OFF,
+    'babel/generator-star-spacing': OFF,
+    'babel/new-cap': OFF,
+    'babel/array-bracket-spacing': OFF,
+    'babel/object-curly-spacing': OFF,
+    'babel/object-shorthand': OFF,
+    'babel/arrow-parens': OFF,
+    'babel/no-await-in-loop': OFF,
+    'babel/flow-object-type': OFF,
+    'react/display-name': OFF,
+    'react/forbid-prop-types': OFF,
+    'react/jsx-closing-bracket-location': OFF,
+    'react/jsx-curly-spacing': OFF,
+    'react/jsx-equals-spacing': WARNING,
+    'react/jsx-filename-extension': OFF,
+    'react/jsx-first-prop-new-line': OFF,
+    'react/jsx-handler-names': OFF,
+    'react/jsx-indent': OFF,
+    'react/jsx-indent-props': OFF,
+    'react/jsx-key': OFF,
+    'react/jsx-max-props-per-line': OFF,
+    'react/jsx-no-bind': OFF,
+    'react/jsx-no-duplicate-props': ERROR,
+    'react/jsx-no-literals': OFF,
+    'react/jsx-no-target-blank': OFF,
+    'react/jsx-pascal-case': OFF,
+    'react/jsx-sort-props': OFF,
+    'react/jsx-uses-vars': ERROR,
+    'react/no-comment-textnodes': OFF,
+    'react/no-danger': OFF,
+    'react/no-deprecated': OFF,
+    'react/no-did-mount-set-state': OFF,
+    'react/no-did-update-set-state': OFF,
+    'react/no-direct-mutation-state': OFF,
+    'react/no-multi-comp': OFF,
+    'react/no-render-return-value': OFF,
+    'react/no-set-state': OFF,
+    'react/no-string-refs': OFF,
+    'react/no-unknown-property': OFF,
+    'react/prefer-es6-class': OFF,
+    'react/prefer-stateless-function': OFF,
+    'react/prop-types': OFF,
+    'react/require-extension': OFF,
+    'react/require-optimization': OFF,
+    'react/require-render-return': OFF,
+    'react/sort-comp': OFF,
+    'react/sort-prop-types': OFF,
+
+    'accessor-pairs': OFF,
+    'brace-style': [ERROR, '1tbs'],
+    'consistent-return': OFF,
+    'dot-location': [ERROR, 'property'],
+    // 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,
+    'jsx-quotes': [ERROR, 'prefer-double'],
+    'keyword-spacing': [ERROR, {after: true, before: true}],
+    'no-bitwise': OFF,
+    'no-console': OFF,
+    'no-inner-declarations': [ERROR, 'functions'],
+    'no-multi-spaces': ERROR,
+    'no-restricted-globals': [ERROR].concat(restrictedGlobals),
+    'no-restricted-syntax': [
+      ERROR,
+      'WithStatement',
+      {
+        selector: 'MemberExpression[property.name=/^(?:substring|substr)$/]',
+        message: 'Prefer string.slice() over .substring() and .substr().',
+      },
+    ],
+    'no-shadow': ERROR,
+    'no-unused-vars': [ERROR, {args: 'none', ignoreRestSiblings: true}],
+    'no-use-before-define': OFF,
+    'no-useless-concat': OFF,
+    quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
+    'space-before-blocks': ERROR,
+    'space-before-function-paren': OFF,
+    'valid-typeof': [ERROR, {requireStringLiterals: true}],
+    // Flow fails with non-string literal keys
+    'no-useless-computed-key': OFF,
+
+    // We apply these settings to files that should run on Node.
+    // They can't use JSX or ES6 modules, and must be in strict mode.
+    // They can, however, use other ES6 features.
+    // (Note these rules are overridden later for source files.)
+    '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'],
+    'react/jsx-no-undef': ERROR,
+    // We don't care to do this
+    'react/jsx-sort-prop-types': OFF,
+    'react/jsx-space-before-closing': ERROR,
+    'react/jsx-uses-react': ERROR,
+    'react/no-is-mounted': OFF,
+    // This isn't useful in our test code
+    '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},
+    ],
+
+    // 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).
+    'no-for-of-loops/no-for-of-loops': ERROR,
+
+    // Prevent function declarations after return statements
+    'no-function-declare-after-return/no-function-declare-after-return': ERROR,
+
+    // CUSTOM RULES
+    // the second argument of warning/invariant should be a literal string
+    'react-internal/no-primitive-constructors': ERROR,
+    'react-internal/safe-string-coercion': [
+      ERROR,
+      {isProductionUserAppCode: true},
+    ],
+    'react-internal/warning-args': ERROR,
+    'react-internal/no-production-logging': ERROR,
+  },
+
+  overrides: [
+    {
+      // By default, anything error message that appears the packages directory
+      // must have a corresponding error code. The exceptions are defined
+      // in the next override entry.
+      files: ['packages/**/*.js'],
+      rules: {
+        'react-internal/prod-error-codes': ERROR,
+      },
+    },
+    {
+      // These are files where it's OK to have unminified error messages. These
+      // are environments where bundle size isn't a concern, like tests
+      // or Node.
+      files: [
+        'packages/react-dom/src/test-utils/**/*.js',
+        'packages/react-devtools-shared/**/*.js',
+        'packages/react-noop-renderer/**/*.js',
+        'packages/react-refresh/**/*.js',
+        'packages/react-server-dom-esm/**/*.js',
+        'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-server-dom-turbopack/**/*.js',
+        'packages/react-server-dom-parcel/**/*.js',
+        'packages/react-server-dom-fb/**/*.js',
+        'packages/react-server-dom-unbundled/**/*.js',
+        'packages/react-test-renderer/**/*.js',
+        'packages/react-debug-tools/**/*.js',
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-timeline/**/*.js',
+        'packages/react-native-renderer/**/*.js',
+        'packages/eslint-plugin-react-hooks/**/*.js',
+        'packages/jest-react/**/*.js',
+        'packages/internal-test-utils/**/*.js',
+        'packages/**/__tests__/*.js',
+        'packages/**/npm/*.js',
+      ],
+      rules: {
+        'react-internal/prod-error-codes': OFF,
+      },
+    },
+    {
+      // We apply these settings to files that we ship through npm.
+      // They must be ES5.
+      files: es5Paths,
+      parser: 'espree',
+      parserOptions: {
+        ecmaVersion: 5,
+        sourceType: 'script',
+      },
+      rules: {
+        'no-var': OFF,
+        strict: ERROR,
+      },
+    },
+    {
+      // We apply these settings to the source files that get compiled.
+      // They can use all features including JSX (but shouldn't use `var`).
+      files: esNextPaths,
+      parser: 'hermes-eslint',
+      parserOptions: {
+        ecmaVersion: 8,
+        sourceType: 'module',
+      },
+      rules: {
+        'no-var': ERROR,
+        'prefer-const': ERROR,
+        strict: OFF,
+      },
+    },
+    {
+      files: ['**/__tests__/*.js'],
+      rules: {
+        // https://github.com/jest-community/eslint-plugin-jest
+        // Meh, who cares.
+        'jest/consistent-test-it': OFF,
+        // Meh, we have a lot of these, who cares.
+        'jest/no-alias-methods': OFF,
+        // We do conditions based on feature flags.
+        'jest/no-conditional-expect': OFF,
+        // We have our own assertion helpers.
+        'jest/expect-expect': OFF,
+        // Lame rule that fires in itRender helpers or in render methods.
+        'jest/no-standalone-expect': OFF,
+      },
+    },
+    {
+      // Rules specific to test setup helper files.
+      files: [
+        '**/setupTests.js',
+        '**/setupEnv.js',
+        '**/jest/TestFlags.js',
+        '**/dom-event-testing-library/testHelpers.js',
+        '**/utils/ReactDOMServerIntegrationTestUtils.js',
+        '**/babel/transform-react-version-pragma.js',
+        '**/babel/transform-test-gate-pragma.js',
+      ],
+      rules: {
+        // Some helpers intentionally focus tests.
+        'jest/no-focused-tests': OFF,
+        // Test fn helpers don't use static text names.
+        'jest/valid-title': OFF,
+        // We have our own assertion helpers.
+        'jest/expect-expect': OFF,
+        // Some helpers intentionally disable tests.
+        'jest/no-disabled-tests': OFF,
+        // Helpers export text function helpers.
+        'jest/no-export': OFF,
+        // The examples in comments trigger false errors.
+        'jest/no-commented-out-tests': OFF,
+      },
+    },
+    {
+      files: ['**/jest/TestFlags.js'],
+      rules: {
+        // The examples in comments trigger false errors.
+        'jest/no-commented-out-tests': OFF,
+      },
+    },
+    {
+      files: [
+        '**/__tests__/**/*.js',
+        'scripts/**/*.js',
+        'packages/*/npm/**/*.js',
+        'packages/dom-event-testing-library/**/*.js',
+        'packages/react-devtools*/**/*.js',
+        'dangerfile.js',
+        'fixtures',
+        'packages/react-dom/src/test-utils/*.js',
+      ],
+      rules: {
+        'es/no-optional-chaining': OFF,
+        'react-internal/no-production-logging': OFF,
+        'react-internal/warning-args': OFF,
+        'react-internal/safe-string-coercion': [
+          ERROR,
+          {isProductionUserAppCode: false},
+        ],
+      },
+    },
+    {
+      files: ['scripts/eslint-rules/*.js'],
+      plugins: ['eslint-plugin'],
+      rules: {
+        'eslint-plugin/prefer-object-rule': ERROR,
+        'eslint-plugin/require-meta-fixable': [
+          ERROR,
+          {catchNoFixerButFixableProperty: true},
+        ],
+        'eslint-plugin/require-meta-has-suggestions': ERROR,
+      },
+    },
+    {
+      files: ['packages/react-native-renderer/**/*.js'],
+      globals: {
+        nativeFabricUIManager: 'readonly',
+        RN$enableMicrotasksInReact: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-server-dom-webpack/**/*.js'],
+      globals: {
+        __webpack_chunk_load__: 'readonly',
+        __webpack_get_script_filename__: 'readonly',
+        __webpack_require__: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-server-dom-turbopack/**/*.js'],
+      globals: {
+        __turbopack_load_by_url__: 'readonly',
+        __turbopack_require__: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-server-dom-parcel/**/*.js'],
+      globals: {
+        parcelRequire: 'readonly',
+      },
+    },
+    {
+      files: ['packages/scheduler/**/*.js'],
+      globals: {
+        TaskController: 'readonly',
+      },
+    },
+    {
+      files: [
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-shared/src/devtools/views/**/*.js',
+        'packages/react-devtools-shared/src/hook.js',
+        'packages/react-devtools-shared/src/backend/console.js',
+        'packages/react-devtools-shared/src/backend/fiber/renderer.js',
+        'packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js',
+        'packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js',
+      ],
+      globals: {
+        __IS_CHROME__: 'readonly',
+        __IS_FIREFOX__: 'readonly',
+        __IS_EDGE__: 'readonly',
+        __IS_NATIVE__: 'readonly',
+        __IS_INTERNAL_MCP_BUILD__: 'readonly',
+        __IS_INTERNAL_VERSION__: 'readonly',
+        chrome: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-devtools-shared/**/*.js'],
+      globals: {
+        __IS_INTERNAL_VERSION__: 'readonly',
+      },
+    },
+    {
+      files: ['packages/react-devtools-*/**/*.js'],
+      excludedFiles: '**/__tests__/**/*.js',
+      plugins: ['eslint-plugin-react-hooks-published'],
+      rules: {
+        'react-hooks-published/rules-of-hooks': ERROR,
+      },
+    },
+    {
+      files: ['packages/eslint-plugin-react-hooks/src/**/*'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint', 'eslint-plugin'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': OFF,
+        '@typescript-eslint/no-non-null-assertion': OFF,
+        '@typescript-eslint/array-type': [ERROR, {default: 'generic'}],
+
+        'es/no-optional-chaining': OFF,
+
+        'eslint-plugin/prefer-object-rule': ERROR,
+        'eslint-plugin/require-meta-fixable': [
+          ERROR,
+          {catchNoFixerButFixableProperty: true},
+        ],
+        'eslint-plugin/require-meta-has-suggestions': ERROR,
+      },
+    },
+  ],
+
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+    jest: true,
+  },
+
+  globals: {
+    $Flow$ModuleRef: 'readonly',
+    $FlowFixMe: 'readonly',
+    $Keys: 'readonly',
+    $NonMaybeType: 'readonly',
+    $ReadOnly: 'readonly',
+    $ReadOnlyArray: 'readonly',
+    $ArrayBufferView: 'readonly',
+    $Shape: 'readonly',
+    CallSite: 'readonly',
+    ConsoleTask: 'readonly', // TOOD: Figure out what the official name of this will be.
+    ReturnType: 'readonly',
+    AnimationFrameID: 'readonly',
+    WeakRef: 'readonly',
+    // For Flow type annotation. Only `BigInt` is valid at runtime.
+    bigint: 'readonly',
+    BigInt: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    CacheType: 'readonly',
+    Class: 'readonly',
+    ClientRect: 'readonly',
+    CopyInspectedElementPath: 'readonly',
+    DOMHighResTimeStamp: 'readonly',
+    EventListener: 'readonly',
+    Iterable: 'readonly',
+    AsyncIterable: 'readonly',
+    $AsyncIterable: 'readonly',
+    $AsyncIterator: 'readonly',
+    Iterator: 'readonly',
+    AsyncIterator: 'readonly',
+    IntervalID: 'readonly',
+    IteratorResult: 'readonly',
+    JSONValue: 'readonly',
+    JSResourceReference: 'readonly',
+    mixin$Animatable: 'readonly',
+    MouseEventHandler: 'readonly',
+    NavigateEvent: 'readonly',
+    Partial: 'readonly',
+    PerformanceMeasureOptions: 'readonly',
+    PropagationPhases: 'readonly',
+    PropertyDescriptor: 'readonly',
+    PropertyDescriptorMap: 'readonly',
+    Proxy$traps: 'readonly',
+    React$Component: 'readonly',
+    React$Config: 'readonly',
+    React$Context: 'readonly',
+    React$Element: 'readonly',
+    React$ElementConfig: 'readonly',
+    React$ElementProps: 'readonly',
+    React$ElementRef: 'readonly',
+    React$ElementType: 'readonly',
+    React$Key: 'readonly',
+    React$Node: 'readonly',
+    React$Portal: 'readonly',
+    React$Ref: 'readonly',
+    React$RefSetter: 'readonly',
+    ReadableStreamController: 'readonly',
+    ReadableStreamReader: 'readonly',
+    RequestInfo: 'readonly',
+    RequestOptions: 'readonly',
+    StoreAsGlobal: 'readonly',
+    symbol: 'readonly',
+    SyntheticEvent: 'readonly',
+    SyntheticMouseEvent: 'readonly',
+    SyntheticPointerEvent: 'readonly',
+    Thenable: 'readonly',
+    TimeoutID: 'readonly',
+    WheelEventHandler: 'readonly',
+    FinalizationRegistry: 'readonly',
+    Exclude: 'readonly',
+    Omit: 'readonly',
+    Keyframe: 'readonly',
+    PropertyIndexedKeyframes: 'readonly',
+    KeyframeAnimationOptions: 'readonly',
+    GetAnimationsOptions: 'readonly',
+    ScrollTimeline: 'readonly',
+    EventListenerOptionsOrUseCapture: 'readonly',
+    FocusOptions: 'readonly',
+    OptionalEffectTiming: 'readonly',
+
+    __REACT_ROOT_PATH_TEST__: 'readonly',
+    spyOnDev: 'readonly',
+    spyOnDevAndProd: 'readonly',
+    spyOnProd: 'readonly',
+    __DEV__: 'readonly',
+    __EXPERIMENTAL__: 'readonly',
+    __EXTENSION__: 'readonly',
+    __PROFILE__: 'readonly',
+    __TEST__: 'readonly',
+    __VARIANT__: 'readonly',
+    __unmockReact: 'readonly',
+    gate: 'readonly',
+    trustedTypes: 'readonly',
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+    globalThis: 'readonly',
+    navigation: 'readonly',
+  },
+};
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 00000000000..2c19b248459
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,2 @@
+c998bb1ed4b3285398c9c7797135d3f060243c6a
+fd2b3e13d330a4559f5aa21462e1cb2cbbcf144b
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000000..e561f9d2615
--- /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/compiler_bug_report.yml b/.github/ISSUE_TEMPLATE/compiler_bug_report.yml
new file mode 100644
index 00000000000..a2c0e3d7aa3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/compiler_bug_report.yml
@@ -0,0 +1,64 @@
+name: "⚛️ ✨ Compiler bug report"
+description: "Report a problem with React Compiler. Please provide enough information that we can reproduce the problem."
+title: "[Compiler Bug]: "
+labels: ["Component: Optimizing Compiler", "Type: Bug", "Status: Unconfirmed"]
+body:
+- type: checkboxes
+  attributes:
+    label: What kind of issue is this?
+    description: |
+      Please indicate if this issue affects the following tools provided by React Compiler.
+    options:
+      - label: React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
+      - label: babel-plugin-react-compiler (build issue installing or using the Babel plugin)
+      - label: eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
+      - label: react-compiler-healthcheck (build issue installing or using the healthcheck script)
+- type: input
+  attributes:
+    label: Link to repro
+    description: |
+      Please provide a repro by either sharing a [Playground link](https://playground.react.dev), or a public GitHub repo so the React team can reproduce the error being reported. Please do not share localhost links!
+    placeholder: |
+      e.g. public GitHub repo, or Playground link
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Repro steps
+    description: |
+      What were you doing when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
+
+      Issues filed without repro steps will be closed.
+    placeholder: |
+      Example bug report:
+      1. Log in with username/password
+      2. Click "Messages" on the left menu
+      3. Open any message in the list
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: How often does this bug happen?
+    description: |
+      Following the repro steps above, how easily are you able to reproduce this bug?
+    options:
+      - Every time
+      - Often
+      - Sometimes
+      - Only once
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: What version of React are you using?
+    description: |
+      Please provide your React version in the app where this issue occurred.
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: What version of React Compiler are you using?
+    description: |
+      Please provide the exact React Compiler version in the app where this issue occurred.
+  validations:
+    required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000000..2b1404175e6
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+    - name: 📃 Documentation Issue
+      url: https://github.com/reactjs/react.dev/issues/new/choose
+      about: This issue tracker is not for documentation issues. Please file documentation issues here.
+    - name: 🤔 Questions and Help
+      url: https://reactjs.org/community/support.html
+      about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
new file mode 100644
index 00000000000..f9020976468
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -0,0 +1,81 @@
+name: "⚛️ 🛠 DevTools bug report"
+description: "Report a problem with React DevTools. Please provide enough information that we can reproduce the problem."
+title: "[DevTools Bug]: "
+labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]
+body:
+- type: input
+  attributes:
+    label: Website or app
+    description: |
+      Which website or app were you using when the bug happened?
+
+      This should be a public URL, GitHub repo, or Code Sandbox app so the React team can reproduce the error being reported. (Please no localhost URLs.)
+    placeholder: |
+      e.g. website URL, public GitHub repo, or Code Sandbox app
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Repro steps
+    description: |
+      What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
+
+      Issues filed without repro steps will be closed.
+    placeholder: |
+      Example bug report:
+      1. Log in with username/password
+      2. Click "Messages" on the left menu
+      3. Open any message in the list
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: How often does this bug happen?
+    description: |
+      Following the repro steps above, how easily are you able to reproduce this bug?
+    options:
+      - Every time
+      - Often
+      - Sometimes
+      - Only once
+  validations:
+    required: true
+- type: input
+  id: automated_package
+  attributes:
+    label: DevTools package (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_version
+  attributes:
+    label: DevTools version (automated)
+    description: |
+      Please do not edit this field.
+- type: input
+  id: automated_error_message
+  attributes:
+    label: Error message (automated)
+    description: |
+      Please do not edit this field.
+- type: textarea
+  id: automated_call_stack
+  attributes:
+    label: Error call stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_component_stack
+  attributes:
+    label: Error component stack (automated)
+    description: |
+      Please do not edit this field.
+    render: text
+- type: textarea
+  id: automated_github_query_string
+  attributes:
+    label: GitHub query string (automated)
+    description: |
+      Please do not edit this field.
+    render: text
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000000..23fbc65ab57
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,33 @@
+<!--
+  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 `main`.
+  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 test --debug --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/) type checks (`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?
+-->
+
+## How did you test this change?
+
+<!--
+  Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface.
+  How exactly did you verify that your PR solves the issue you wanted to solve?
+  If you leave this empty, your PR will very likely be closed.
+-->
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000000..11800ad7575
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directories:
+      - "/fixtures/*"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 0
+    ignore:
+      - dependency-name: "*"
diff --git a/.github/workflows/compiler_discord_notify.yml b/.github/workflows/compiler_discord_notify.yml
new file mode 100644
index 00000000000..5a57cf6a32c
--- /dev/null
+++ b/.github/workflows/compiler_discord_notify.yml
@@ -0,0 +1,49 @@
+name: (Compiler) Discord Notify
+
+on:
+  pull_request_target:
+    types: [opened, ready_for_review]
+    paths:
+      - compiler/**
+      - .github/workflows/compiler_**.yml
+
+permissions: {}
+
+jobs:
+  check_access:
+    if: ${{ github.event.pull_request.draft == false }}
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  notify:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.COMPILER_DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}
diff --git a/.github/workflows/compiler_playground.yml b/.github/workflows/compiler_playground.yml
new file mode 100644
index 00000000000..a19e87e25e7
--- /dev/null
+++ b/.github/workflows/compiler_playground.yml
@@ -0,0 +1,69 @@
+name: (Compiler) Playground
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths:
+      - compiler/**
+      - .github/workflows/compiler_playground.yml
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+defaults:
+  run:
+    working-directory: compiler/apps/playground
+
+jobs:
+  playground:
+    name: Test playground
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/**/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-and-playground-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/**/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        working-directory: compiler
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - run: npx playwright install --with-deps chromium
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+      - run: CI=true yarn test
+      - run: ls -R test-results
+        if: '!cancelled()'
+      - name: Archive test results
+        if: '!cancelled()'
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: compiler/apps/playground/test-results
+          if-no-files-found: ignore
diff --git a/.github/workflows/compiler_prereleases.yml b/.github/workflows/compiler_prereleases.yml
new file mode 100644
index 00000000000..76cd3310b1a
--- /dev/null
+++ b/.github/workflows/compiler_prereleases.yml
@@ -0,0 +1,70 @@
+name: (Compiler) Publish Prereleases
+
+on:
+  workflow_call:
+    inputs:
+      commit_sha:
+        required: true
+        default: ''
+        type: string
+      release_channel:
+        required: true
+        type: string
+      dist_tag:
+        required: true
+        type: string
+      version_name:
+        required: true
+        type: string
+      tag_version:
+        required: false
+        type: string
+      dry_run:
+        required: false
+        type: boolean
+    secrets:
+      NPM_TOKEN:
+        required: true
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+defaults:
+  run:
+    working-directory: compiler
+
+jobs:
+  publish_prerelease:
+    name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - if: inputs.dry_run == true
+        name: Publish packages to npm (dry run)
+        run: |
+          cp ./scripts/release/ci-npmrc ~/.npmrc
+          scripts/release/publish.js --frfr --debug --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }}
+      - if: inputs.dry_run != true
+        name: Publish packages to npm
+        run: |
+          cp ./scripts/release/ci-npmrc ~/.npmrc
+          scripts/release/publish.js --frfr --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }}
diff --git a/.github/workflows/compiler_prereleases_manual.yml b/.github/workflows/compiler_prereleases_manual.yml
new file mode 100644
index 00000000000..c4a7a16aca3
--- /dev/null
+++ b/.github/workflows/compiler_prereleases_manual.yml
@@ -0,0 +1,41 @@
+name: (Compiler) Publish Prereleases Manual
+
+on:
+  workflow_dispatch:
+    inputs:
+      prerelease_commit_sha:
+        required: false
+      release_channel:
+        required: true
+        type: string
+      dist_tag:
+        required: true
+        type: string
+      version_name:
+        required: true
+        type: string
+      tag_version:
+        required: false
+        type: string
+      dry_run:
+        required: false
+        type: boolean
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
+    with:
+      commit_sha: ${{ inputs.prerelease_commit_sha || github.sha }}
+      release_channel: ${{ inputs.release_channel }}
+      dist_tag: ${{ inputs.dist_tag }}
+      version_name: ${{ inputs.version_name }}
+      tag_version: ${{ inputs.tag_version }}
+      dry_run: ${{ inputs.dry_run }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/compiler_prereleases_nightly.yml b/.github/workflows/compiler_prereleases_nightly.yml
new file mode 100644
index 00000000000..ca2b5589def
--- /dev/null
+++ b/.github/workflows/compiler_prereleases_nightly.yml
@@ -0,0 +1,24 @@
+name: (Compiler) Publish Prereleases Nightly
+
+on:
+  schedule:
+    # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
+    - cron: 10 16 * * 1,2,3,4,5
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/compiler_prereleases.yml@main
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: experimental
+      dist_tag: experimental
+      version_name: '0.0.0'
+      dry_run: false
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/compiler_typescript.yml b/.github/workflows/compiler_typescript.yml
new file mode 100644
index 00000000000..6a3b52e21ae
--- /dev/null
+++ b/.github/workflows/compiler_typescript.yml
@@ -0,0 +1,108 @@
+name: (Compiler) TypeScript
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths:
+      - compiler/**
+      - .github/workflows/compiler_typescript.yml
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+defaults:
+  run:
+    working-directory: compiler
+
+jobs:
+  discover_yarn_workspaces:
+    name: Discover yarn workspaces
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - uses: actions/checkout@v4
+      - id: set-matrix
+        run: echo "matrix=$(find packages -mindepth 1 -maxdepth 1 -type d | sed 's!packages/!!g' | tr '\n' ',' | sed s/.$// | jq -Rsc '. / "," - [""]')" >> $GITHUB_OUTPUT
+
+  # Hardcoded to improve parallelism
+  lint:
+    name: Lint babel-plugin-react-compiler
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn workspace babel-plugin-react-compiler lint
+
+  # Hardcoded to improve parallelism
+  jest:
+    name: Jest babel-plugin-react-compiler
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn workspace babel-plugin-react-compiler jest
+
+  test:
+    name: Test ${{ matrix.workspace_name }}
+    needs: discover_yarn_workspaces
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        workspace_name: ${{ fromJSON(needs.discover_yarn_workspaces.outputs.matrix) }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: xvfb-run -a yarn workspace ${{ matrix.workspace_name }} test
+        if: runner.os == 'Linux' && matrix.workspace_name == 'react-forgive'
+      - run: yarn workspace ${{ matrix.workspace_name }} test
+        if: matrix.workspace_name != 'react-forgive'
diff --git a/.github/workflows/devtools_discord_notify.yml b/.github/workflows/devtools_discord_notify.yml
new file mode 100644
index 00000000000..bb498f00371
--- /dev/null
+++ b/.github/workflows/devtools_discord_notify.yml
@@ -0,0 +1,49 @@
+name: (DevTools) Discord Notify
+
+on:
+  pull_request_target:
+    types: [opened, ready_for_review]
+    paths:
+      - packages/react-devtools**
+      - .github/workflows/devtools_**.yml
+
+permissions: {}
+
+jobs:
+  check_access:
+    if: ${{ github.event.pull_request.draft == false }}
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  notify:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DEVTOOLS_DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}
diff --git a/.github/workflows/devtools_regression_tests.yml b/.github/workflows/devtools_regression_tests.yml
new file mode 100644
index 00000000000..9fe0c55e0bd
--- /dev/null
+++ b/.github/workflows/devtools_regression_tests.yml
@@ -0,0 +1,205 @@
+name: (DevTools) Regression Tests
+
+on:
+  schedule:
+    - cron: 0 0 * * *
+  workflow_dispatch:
+    inputs:
+      commit_sha:
+        required: false
+        type: string
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  download_build:
+    name: Download base build
+    runs-on: ubuntu-latest
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Download react-devtools artifacts for base revision
+        run: |
+          git fetch origin main
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=${{ inputs.commit_sha || '$(git rev-parse origin/main)' }}
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive build
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: build
+          if-no-files-found: error
+
+  build_devtools_and_process_artifacts:
+    name: Build DevTools and process artifacts
+    needs: download_build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: build
+      - run: ./scripts/ci/pack_and_store_devtools_artifacts.sh
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive devtools build
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools
+          path: build/devtools
+          if-no-files-found: error
+      # Simplifies getting the extension for local testing
+      - name: Archive chrome extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-chrome-extension
+          path: build/devtools/chrome-extension.zip
+          if-no-files-found: error
+      - name: Archive firefox extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-firefox-extension
+          path: build/devtools/firefox-extension.zip
+          if-no-files-found: error
+
+  run_devtools_tests_for_versions:
+    name: Run DevTools tests for versions
+    needs: build_devtools_and_process_artifacts
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        version:
+          - "16.0"
+          - "16.5" # schedule package
+          - "16.8" # hooks
+          - "17.0"
+          - "18.0"
+          - "18.2" # compiler polyfill
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore all archived build artifacts
+        uses: actions/download-artifact@v4
+      - name: Display structure of build
+        run: ls -R build
+      - run: ./scripts/ci/download_devtools_regression_build.js ${{ matrix.version }} --replaceBuild
+      - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion ${{ matrix.version }} --ci
+
+  run_devtools_e2e_tests_for_versions:
+    name: Run DevTools e2e tests for versions
+    needs: build_devtools_and_process_artifacts
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        version:
+          - "16.0"
+          - "16.5" # schedule package
+          - "16.8" # hooks
+          - "17.0"
+          - "18.0"
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore all archived build artifacts
+        uses: actions/download-artifact@v4
+      - name: Display structure of build
+        run: ls -R build
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - run: npx playwright install --with-deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+      - run: npx playwright install-deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit == 'true'
+      - run: ./scripts/ci/download_devtools_regression_build.js ${{ matrix.version }}
+      - run: ls -R build-regression
+      - run: ./scripts/ci/run_devtools_e2e_tests.js ${{ matrix.version }}
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Cleanup build regression folder
+        run: rm -r ./build-regression
+      - uses: actions/upload-artifact@v4
+        with:
+          name: screenshots
+          path: ./tmp/playwright-artifacts
+          if-no-files-found: warn
diff --git a/.github/workflows/runtime_build_and_test.yml b/.github/workflows/runtime_build_and_test.yml
new file mode 100644
index 00000000000..3eec5f90bee
--- /dev/null
+++ b/.github/workflows/runtime_build_and_test.yml
@@ -0,0 +1,933 @@
+name: (Runtime) Build and Test
+
+on:
+  push:
+    branches: [main]
+    tags:
+      # To get CI for backport releases.
+      # This will duplicate CI for releases from main which is acceptable
+      - "v*"
+  pull_request:
+    paths-ignore:
+      - compiler/**
+  workflow_dispatch:
+    inputs:
+      commit_sha:
+        required: false
+        type: string
+        default: ''
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  # ----- NODE_MODULES CACHE -----
+  # Centralize the node_modules cache so it is saved once and each subsequent job only needs to
+  # restore the cache. Prevents race conditions where multiple workflows try to write to the cache.
+  runtime_node_modules_cache:
+    name: Cache Runtime node_modules
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - name: Check cache hit
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          lookup-only: true
+      - uses: actions/setup-node@v4
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Warm with old cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Save cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+  runtime_compiler_node_modules_cache:
+    name: Cache Runtime, Compiler node_modules
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - name: Check cache hit
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          lookup-only: true
+      - uses: actions/setup-node@v4
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Warm with old cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Save cache
+        if: steps.node_modules.outputs.cache-hit != 'true'
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+
+  # ----- FLOW -----
+  discover_flow_inline_configs:
+    name: Discover flow inline configs
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.result }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/github-script@v7
+        id: set-matrix
+        with:
+          script: |
+            const inlinedHostConfigs = require('./scripts/shared/inlinedHostConfigs.js');
+            return inlinedHostConfigs.map(config => config.shortName);
+
+  flow:
+    name: Flow check ${{ matrix.flow_inline_config_shortname }}
+    needs: [discover_flow_inline_configs, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        flow_inline_config_shortname: ${{ fromJSON(needs.discover_flow_inline_configs.outputs.matrix) }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: node ./scripts/tasks/flow-ci ${{ matrix.flow_inline_config_shortname }}
+
+  # ----- FIZZ -----
+  check_generated_fizz_runtime:
+    name: Confirm generated inline Fizz runtime is up to date
+    needs: [runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: |
+          yarn generate-inline-fizz-runtime
+          git diff --exit-code || (echo "There was a change to the Fizz runtime. Run \`yarn generate-inline-fizz-runtime\` and check in the result." && false)
+
+  # ----- FEATURE FLAGS -----
+  flags:
+    name: Check flags
+    needs: [runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn flags
+
+  # ----- TESTS -----
+  test:
+    name: yarn test ${{ matrix.params }} (Shard ${{ matrix.shard }})
+    needs: [runtime_compiler_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        params:
+          - "-r=stable --env=development"
+          - "-r=stable --env=production"
+          - "-r=experimental --env=development"
+          - "-r=experimental --env=production"
+          - "-r=www-classic --env=development --variant=false"
+          - "-r=www-classic --env=production --variant=false"
+          - "-r=www-classic --env=development --variant=true"
+          - "-r=www-classic --env=production --variant=true"
+          - "-r=www-modern --env=development --variant=false"
+          - "-r=www-modern --env=production --variant=false"
+          - "-r=www-modern --env=development --variant=true"
+          - "-r=www-modern --env=production --variant=true"
+          - "-r=xplat --env=development --variant=false"
+          - "-r=xplat --env=development --variant=true"
+          - "-r=xplat --env=production --variant=false"
+          - "-r=xplat --env=production --variant=true"
+          # TODO: Test more persistent configurations?
+          - "-r=stable --env=development --persistent"
+          - "-r=experimental --env=development --persistent"
+        shard:
+          - 1/5
+          - 2/5
+          - 3/5
+          - 4/5
+          - 5/5
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: node --version
+      - run: yarn test ${{ matrix.params }} --ci --shard=${{ matrix.shard }}
+
+  # Hardcoded to improve parallelism
+  test-linter:
+    name: Test eslint-plugin-react-hooks
+    needs: [runtime_compiler_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path:  |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+      - name: Install runtime dependencies
+        run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Install compiler dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: compiler
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: ./scripts/react-compiler/build-compiler.sh && ./scripts/react-compiler/link-compiler.sh
+      - run: yarn workspace eslint-plugin-react-hooks test
+
+  # ----- BUILD -----
+  build_and_lint:
+    name: yarn build and lint
+    needs: [runtime_compiler_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        # yml is dumb. update the --total arg to yarn build if you change the number of workers
+        worker_id: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
+        release_channel: [stable, experimental]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: 11.0.22
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn build --index=${{ matrix.worker_id }} --total=25 --r=${{ matrix.release_channel }} --ci
+        env:
+          CI: github
+          RELEASE_CHANNEL: ${{ matrix.release_channel }}
+          NODE_INDEX: ${{ matrix.worker_id }}
+      - name: Lint build
+        run: yarn lint-build
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive build
+        uses: actions/upload-artifact@v4
+        with:
+          name: _build_${{ matrix.worker_id }}_${{ matrix.release_channel }}
+          path: build
+          if-no-files-found: error
+
+  test_build:
+    name: yarn test-build
+    needs: [build_and_lint, runtime_compiler_node_modules_cache]
+    strategy:
+      fail-fast: false
+      matrix:
+        test_params: [
+          # Intentionally passing these as strings instead of creating a
+          # separate parameter per CLI argument, since it's easier to
+          # control/see which combinations we want to run.
+          -r=stable --env=development,
+          -r=stable --env=production,
+          -r=experimental --env=development,
+          -r=experimental --env=production,
+
+          # TODO: Update test config to support www build tests
+          # - "-r=www-classic --env=development --variant=false"
+          # - "-r=www-classic --env=production --variant=false"
+          # - "-r=www-classic --env=development --variant=true"
+          # - "-r=www-classic --env=production --variant=true"
+          # - "-r=www-modern --env=development --variant=false"
+          # - "-r=www-modern --env=production --variant=false"
+          # - "-r=www-modern --env=development --variant=true"
+          # - "-r=www-modern --env=production --variant=true"
+
+          # TODO: Update test config to support xplat build tests
+          # - "-r=xplat --env=development --variant=false"
+          # - "-r=xplat --env=development --variant=true"
+          # - "-r=xplat --env=production --variant=false"
+          # - "-r=xplat --env=production --variant=true"
+
+          # TODO: Test more persistent configurations?
+        ]
+        shard:
+          - 1/10
+          - 2/10
+          - 3/10
+          - 4/10
+          - 5/10
+          - 6/10
+          - 7/10
+          - 8/10
+          - 9/10
+          - 10/10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: node --version
+      - run: yarn test --build ${{ matrix.test_params }} --shard=${{ matrix.shard }} --ci
+
+  test_build_devtools:
+    name: yarn test-build (devtools)
+    needs: [build_and_lint, runtime_node_modules_cache]
+    strategy:
+      fail-fast: false
+      matrix:
+        shard:
+          - 1/5
+          - 2/5
+          - 3/5
+          - 4/5
+          - 5/5
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: node --version
+      - run: yarn test --build --project=devtools -r=experimental --shard=${{ matrix.shard }} --ci
+
+  process_artifacts_combined:
+    name: Process artifacts combined
+    needs: [build_and_lint, runtime_node_modules_cache]
+    permissions:
+      # https://github.com/actions/attest-build-provenance
+      id-token: write
+      attestations: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: echo ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
+      - name: Scrape warning messages
+        run: |
+          mkdir -p ./build/__test_utils__
+          node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js
+        # Compress build directory into a single tarball for easy download
+      - run: tar -zcvf ./build.tgz ./build
+        # TODO: Migrate scripts to use `build` directory instead of `build2`
+      - run: cp ./build.tgz ./build2.tgz
+      - name: Archive build artifacts
+        id: upload_artifacts_combined
+        uses: actions/upload-artifact@v4
+        with:
+          name: artifacts_combined
+          path: |
+            ./build.tgz
+            ./build2.tgz
+          if-no-files-found: error
+      - uses: actions/attest-build-provenance@v2
+        # We don't verify builds generated from pull requests not originating from facebook/react.
+        # However, if the PR lands, the run on `main` will generate the attestation which can then
+        # be used to download a build via scripts/release/download-experimental-build.js.
+        #
+        # Note that this means that scripts/release/download-experimental-build.js must be run with
+        # --no-verify when downloading a build from a fork.
+        if: github.event_name == 'push' && github.ref_name == 'main' || github.event.pull_request.head.repo.full_name == github.repository
+        with:
+          subject-name: artifacts_combined.zip
+          subject-digest: sha256:${{ steps.upload_artifacts_combined.outputs.artifact-digest }}
+
+  check_error_codes:
+    name: Search build artifacts for unminified errors
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - name: Search build artifacts for unminified errors
+        run: |
+          yarn extract-errors
+          git diff --exit-code || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
+
+  check_release_dependencies:
+    name: Check release dependencies
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - run: yarn check-release-dependencies
+
+  RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
+    name: Check fixtures DOM (stable)
+    needs: build_and_lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4 # note: this does not reuse centralized cache since it has unique cache key
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: fixtures_dom-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'fixtures/dom/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn --cwd fixtures/dom install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - name: Run DOM fixture tests
+        run: |
+          yarn predev
+          yarn test
+        working-directory: fixtures/dom
+        env:
+          RELEASE_CHANNEL: stable
+
+  # ----- FLIGHT -----
+  run_fixtures_flight_tests:
+    name: Run fixtures Flight tests
+    needs: build_and_lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      # Fixture copies some built packages from the workroot after install.
+      # That means dependencies of the built packages are not installed.
+      # We need to install dependencies of the workroot to fulfill all dependency constraints
+      - name: Restore cached node_modules
+        uses: actions/cache@v4 # note: this does not reuse centralized cache since it has unique cache key
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: fixtures_flight-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'fixtures/flight/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd fixtures/flight install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - name: Playwright install deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+        working-directory: fixtures/flight
+        run: npx playwright install --with-deps chromium
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Display structure of build
+        run: ls -R build
+      - name: Run tests
+        working-directory: fixtures/flight
+        run: yarn test
+        env:
+          # Otherwise the webserver is a blackbox
+          DEBUG: pw:webserver
+      - name: Archive Flight fixture artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: flight-playwright-report
+          path: fixtures/flight/playwright-report
+          if-no-files-found: warn
+      - name: Archive Flight fixture artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: flight-test-results
+          path: fixtures/flight/test-results
+          if-no-files-found: ignore
+
+  # ----- DEVTOOLS -----
+  build_devtools_and_process_artifacts:
+    name: Build DevTools and process artifacts
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chrome, firefox, edge]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - run: ./scripts/ci/pack_and_store_devtools_artifacts.sh ${{ matrix.browser }}
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Display structure of build
+        run: ls -R build
+      # Simplifies getting the extension for local testing
+      - name: Archive ${{ matrix.browser }} extension
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-${{ matrix.browser }}-extension
+          path: build/devtools/${{ matrix.browser }}-extension.zip
+          if-no-files-found: error
+      - name: Archive ${{ matrix.browser }} metadata
+        uses: actions/upload-artifact@v4
+        with:
+          name: react-devtools-${{ matrix.browser }}-metadata
+          path: build/devtools/webpack-stats.*.json
+
+  merge_devtools_artifacts:
+    name: Merge DevTools artifacts
+    needs: build_devtools_and_process_artifacts
+    runs-on: ubuntu-latest
+    steps:
+      - name: Merge artifacts
+        uses: actions/upload-artifact/merge@v4
+        with:
+          name: react-devtools
+          pattern: react-devtools-*
+
+  run_devtools_e2e_tests:
+    name: Run DevTools e2e tests
+    needs: [build_and_lint, runtime_node_modules_cache]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Restore archived build
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - name: Playwright install deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
+      - run: ./scripts/ci/run_devtools_e2e_tests.js
+        env:
+          RELEASE_CHANNEL: experimental
+      - name: Archive Playwright report
+        uses: actions/upload-artifact@v4
+        with:
+          name: devtools-playwright-artifacts
+          path: tmp/playwright-artifacts
+          if-no-files-found: warn
+
+  # ----- SIZEBOT -----
+  sizebot:
+    if: ${{ github.event_name == 'pull_request' && github.ref_name != 'main' && github.event.pull_request.base.ref == 'main' }}
+    name: Run sizebot
+    needs: [build_and_lint]
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4 # note: this does not reuse centralized cache since it has unique cache key
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Download artifacts for base revision
+        # The build could have been generated from a fork, so we must download the build without
+        # any verification. This is safe since we only use this for sizebot calculation and the
+        # unverified artifact is not used. Additionally this workflow runs in the pull_request
+        # trigger so only restricted permissions are available.
+        run: |
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=$(git rev-parse ${{ github.event.pull_request.base.sha }}) ${{ (github.event.pull_request.head.repo.full_name != github.repository && '--noVerify') || ''}}
+          mv ./build ./base-build
+      - name: Delete extraneous files
+        # TODO: The `download-experimental-build` script copies the npm
+        # packages into the `node_modules` directory. This is a historical
+        # quirk of how the release script works. Let's pretend they
+        # don't exist.
+        run: rm -rf ./base-build/node_modules
+      - name: Display structure of base-build from origin/main
+        run: ls -R base-build
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - name: Restore archived build for PR
+        uses: actions/download-artifact@v4
+        with:
+          pattern: _build_*
+          path: build
+          merge-multiple: true
+      - name: Scrape warning messages
+        run: |
+          mkdir -p ./build/__test_utils__
+          node ./scripts/print-warnings/print-warnings.js > build/__test_utils__/ReactAllWarnings.js
+      - name: Display structure of build for PR
+        run: ls -R build
+      - run: echo ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }} >> build/COMMIT_SHA
+      - run: node ./scripts/tasks/danger
+      - name: Archive sizebot results
+        uses: actions/upload-artifact@v4
+        with:
+          name: sizebot-message
+          path: sizebot-message.md
+          if-no-files-found: ignore
diff --git a/.github/workflows/runtime_commit_artifacts.yml b/.github/workflows/runtime_commit_artifacts.yml
new file mode 100644
index 00000000000..1b98673cd4d
--- /dev/null
+++ b/.github/workflows/runtime_commit_artifacts.yml
@@ -0,0 +1,474 @@
+name: (Runtime) Commit Artifacts for Meta WWW and fbsource V2
+
+on:
+  workflow_run:
+    workflows: ["(Runtime) Build and Test"]
+    types: [completed]
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      commit_sha:
+        required: false
+        type: string
+      force:
+        description: 'Force a commit to the builds/... branches'
+        required: true
+        default: false
+        type: boolean
+      dry_run:
+        description: Perform a dry run (run everything except push)
+        required: true
+        default: false
+        type: boolean
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  download_artifacts:
+    runs-on: ubuntu-latest
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    steps:
+      - uses: actions/checkout@v4
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Download artifacts for base revision
+        run: |
+          GH_TOKEN=${{ github.token }} scripts/release/download-experimental-build.js --commit=${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}
+      - name: Display structure of build
+        run: ls -R build
+      - name: Archive build
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: build/
+          if-no-files-found: error
+
+
+  process_artifacts:
+    runs-on: ubuntu-latest
+    needs: [download_artifacts]
+    outputs:
+      www_branch_count: ${{ steps.check_branches.outputs.www_branch_count }}
+      fbsource_branch_count: ${{ steps.check_branches.outputs.fbsource_branch_count }}
+      last_version_classic: ${{ steps.get_last_version_www.outputs.last_version_classic }}
+      last_version_modern: ${{ steps.get_last_version_www.outputs.last_version_modern }}
+      last_version_rn: ${{ steps.get_last_version_rn.outputs.last_version_rn }}
+      current_version_classic: ${{ steps.get_current_version.outputs.current_version_classic }}
+      current_version_modern: ${{ steps.get_current_version.outputs.current_version_modern }}
+      current_version_rn: ${{ steps.get_current_version.outputs.current_version_rn }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-www
+      - name: "Get last version string for www"
+        id: get_last_version_www
+        run: |
+          # Empty checks only needed for backwards compatibility,can remove later.
+          VERSION_CLASSIC=$( [ -f ./compiled/facebook-www/VERSION_CLASSIC ] && cat ./compiled/facebook-www/VERSION_CLASSIC || echo '' )
+          VERSION_MODERN=$( [ -f ./compiled/facebook-www/VERSION_MODERN ] && cat ./compiled/facebook-www/VERSION_MODERN || echo '' )
+          echo "Last classic version is $VERSION_CLASSIC"
+          echo "Last modern version is $VERSION_MODERN"
+          echo "last_version_classic=$VERSION_CLASSIC" >> "$GITHUB_OUTPUT"
+          echo "last_version_modern=$VERSION_MODERN" >> "$GITHUB_OUTPUT"
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-fbsource
+      - name: "Get last version string for rn"
+        id: get_last_version_rn
+        run: |
+          # Empty checks only needed for backwards compatibility,can remove later.
+          VERSION_NATIVE_FB=$( [ -f ./compiled-rn/VERSION_NATIVE_FB ] && cat ./compiled-rn/VERSION_NATIVE_FB || echo '' )
+          echo "Last rn version is $VERSION_NATIVE_FB"
+          echo "last_version_rn=$VERSION_NATIVE_FB" >> "$GITHUB_OUTPUT"
+      - uses: actions/checkout@v4
+      - name: "Check branches"
+        id: check_branches
+        run: |
+          echo "www_branch_count=$(git ls-remote --heads origin "refs/heads/meta-www" | wc -l)" >> "$GITHUB_OUTPUT"
+          echo "fbsource_branch_count=$(git ls-remote --heads origin "refs/heads/meta-fbsource" | wc -l)" >> "$GITHUB_OUTPUT"
+      - name: Restore downloaded build
+        uses: actions/download-artifact@v4
+        with:
+          name: build
+          path: build
+      - name: Display structure of build
+        run: ls -R build
+      - name: Strip @license from eslint plugin and react-refresh
+        run: |
+          sed -i -e 's/ @license React*//' \
+            build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+            build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
+      - name: Insert @headers into eslint plugin and react-refresh
+        run: |
+          sed -i -e 's/ LICENSE file in the root directory of this source tree./ LICENSE file in the root directory of this source tree.\n *\n * @noformat\n * @nolint\n * @lightSyntaxTransform\n * @preventMunge\n * @oncall react_core/' \
+            build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+            build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
+      - name: Move relevant files for React in www into compiled
+        run: |
+          # Move the facebook-www folder into compiled
+          mkdir ./compiled
+          mv build/facebook-www ./compiled
+
+          # Move ReactAllWarnings.js to facebook-www
+          mkdir ./compiled/facebook-www/__test_utils__
+          mv build/__test_utils__/ReactAllWarnings.js ./compiled/facebook-www/__test_utils__/ReactAllWarnings.js
+
+          # Copy eslint-plugin-react-hooks
+          mkdir ./compiled/eslint-plugin-react-hooks
+          cp build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+            ./compiled/eslint-plugin-react-hooks/index.js
+
+          # Move unstable_server-external-runtime.js into facebook-www
+          mv build/oss-experimental/react-dom/unstable_server-external-runtime.js \
+            ./compiled/facebook-www/unstable_server-external-runtime.js
+
+          # Move react-refresh-babel.development.js into babel-plugin-react-refresh
+          mkdir ./compiled/babel-plugin-react-refresh
+          mv build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js \
+            ./compiled/babel-plugin-react-refresh/index.js
+
+          ls -R ./compiled
+      - name: Move relevant files for React in fbsource into compiled-rn
+        run: |
+          BASE_FOLDER='compiled-rn/facebook-fbsource/xplat/js'
+          mkdir -p ${BASE_FOLDER}/react-native-github/Libraries/Renderer/
+          mkdir -p ${BASE_FOLDER}/RKJSModules/vendor/react/{scheduler,react,react-dom,react-is,react-test-renderer}/
+
+          # Move React Native renderer
+          mv build/react-native/implementations/ $BASE_FOLDER/react-native-github/Libraries/Renderer/
+          mv build/react-native/shims/ $BASE_FOLDER/react-native-github/Libraries/Renderer/
+          mv build/facebook-react-native/scheduler/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/scheduler/
+          mv build/facebook-react-native/react/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react/
+          mv build/facebook-react-native/react-dom/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-dom/
+          mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/
+          mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/
+
+          # Delete the OSS renderers, these are sync'd to RN separately.
+          RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
+          rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
+          
+          # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future.
+          SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/
+          rm $SHIM_FOLDER/ReactNative.js
+
+          # Copy eslint-plugin-react-hooks
+          # NOTE: This is different from www, here we include the full package
+          #       including package.json to include dependencies in fbsource.
+          mkdir "$BASE_FOLDER/tools"
+          cp -r build/oss-experimental/eslint-plugin-react-hooks "$BASE_FOLDER/tools"
+
+          # Move React Native version file
+          mv build/facebook-react-native/VERSION_NATIVE_FB ./compiled-rn/VERSION_NATIVE_FB
+
+          ls -R ./compiled-rn
+      - name: Add REVISION files
+        run: |
+          echo ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} >> ./compiled/facebook-www/REVISION
+          cp ./compiled/facebook-www/REVISION ./compiled/facebook-www/REVISION_TRANSFORMS
+          echo ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} >> ./compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
+      - name: "Get current version string"
+        id: get_current_version
+        run: |
+          VERSION_CLASSIC=$(cat ./compiled/facebook-www/VERSION_CLASSIC)
+          VERSION_MODERN=$(cat ./compiled/facebook-www/VERSION_MODERN)
+          VERSION_NATIVE_FB=$(cat ./compiled-rn/VERSION_NATIVE_FB)
+          echo "Current classic version is $VERSION_CLASSIC"
+          echo "Current modern version is $VERSION_MODERN"
+          echo "Current rn version is $VERSION_NATIVE_FB"
+          echo "current_version_classic=$VERSION_CLASSIC" >> "$GITHUB_OUTPUT"
+          echo "current_version_modern=$VERSION_MODERN" >> "$GITHUB_OUTPUT"
+          echo "current_version_rn=$VERSION_NATIVE_FB" >> "$GITHUB_OUTPUT"
+      - uses: actions/upload-artifact@v4
+        with:
+          name: compiled
+          path: compiled/
+          if-no-files-found: error
+      - uses: actions/upload-artifact@v4
+        with:
+          name: compiled-rn
+          path: compiled-rn/
+          if-no-files-found: error
+
+  commit_www_artifacts:
+    needs: [download_artifacts, process_artifacts]
+    if: inputs.force == true || (github.ref == 'refs/heads/main' && needs.process_artifacts.outputs.www_branch_count == '0')
+    runs-on: ubuntu-latest
+    permissions:
+      # Used to push a commit to builds/facebook-www
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-www
+      - name: Ensure clean directory
+        run: rm -rf compiled
+      - uses: actions/download-artifact@v4
+        with:
+          name: compiled
+          path: compiled/
+      - name: Revert version changes
+        if: needs.process_artifacts.outputs.last_version_classic != '' && needs.process_artifacts.outputs.last_version_modern != ''
+        env:
+          CURRENT_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.current_version_classic }}
+          CURRENT_VERSION_MODERN: ${{ needs.process_artifacts.outputs.current_version_modern }}
+          LAST_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.last_version_classic }}
+          LAST_VERSION_MODERN: ${{ needs.process_artifacts.outputs.last_version_modern }}
+        run: |
+          echo "Reverting $CURRENT_VERSION_CLASSIC to $LAST_VERSION_CLASSIC"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled || echo "No files found with $CURRENT_VERSION_CLASSIC"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled | xargs -r sed -i -e "s/$CURRENT_VERSION_CLASSIC/$LAST_VERSION_CLASSIC/g"
+          grep -rl "$CURRENT_VERSION_CLASSIC" ./compiled || echo "Classic version reverted"
+          echo "===================="
+          echo "Reverting $CURRENT_VERSION_MODERN to $LAST_VERSION_MODERN"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled || echo "No files found with $CURRENT_VERSION_MODERN"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled | xargs -r sed -i -e "s/$CURRENT_VERSION_MODERN/$LAST_VERSION_MODERN/g"
+          grep -rl "$CURRENT_VERSION_MODERN" ./compiled || echo "Modern version reverted"
+      - name: Check for changes
+        if: inputs.force != true
+        id: check_should_commit
+        run: |
+          echo "Full git status"
+          git add .
+          git status
+          echo "===================="
+          if git status --porcelain | grep -qv '/REVISION'; then
+            echo "Changes detected"
+            echo "===== Changes ====="
+            git --no-pager diff -U0 | grep '^[+-]' | head -n 50
+            echo "==================="
+            echo "should_commit=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "No Changes detected"
+            echo "should_commit=false" >> "$GITHUB_OUTPUT"
+          fi
+      - name: Re-apply version changes
+        if: inputs.force == true || (steps.check_should_commit.outputs.should_commit == 'true' && needs.process_artifacts.outputs.last_version_classic != '' && needs.process_artifacts.outputs.last_version_modern != '')
+        env:
+          CURRENT_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.current_version_classic }}
+          CURRENT_VERSION_MODERN: ${{ needs.process_artifacts.outputs.current_version_modern }}
+          LAST_VERSION_CLASSIC: ${{ needs.process_artifacts.outputs.last_version_classic }}
+          LAST_VERSION_MODERN: ${{ needs.process_artifacts.outputs.last_version_modern }}
+        run: |
+          echo "Re-applying $LAST_VERSION_CLASSIC to $CURRENT_VERSION_CLASSIC"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled || echo "No files found with $LAST_VERSION_CLASSIC"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled | xargs -r sed -i -e "s/$LAST_VERSION_CLASSIC/$CURRENT_VERSION_CLASSIC/g"
+          grep -rl "$LAST_VERSION_CLASSIC" ./compiled || echo "Classic version re-applied"
+          echo "===================="
+          echo "Re-applying $LAST_VERSION_MODERN to $CURRENT_VERSION_MODERN"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled || echo "No files found with $LAST_VERSION_MODERN"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled | xargs -r sed -i -e "s/$LAST_VERSION_MODERN/$CURRENT_VERSION_MODERN/g"
+          grep -rl "$LAST_VERSION_MODERN" ./compiled || echo "Classic version re-applied"
+      - name: Will commit these changes
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git add .
+          git status
+      - name: Check commit message
+        if: inputs.dry_run
+        run: |
+          git fetch origin --quiet
+          git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:"%B"
+      - name: Commit changes to branch
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git config --global user.email "${{ format('{0}@users.noreply.github.com', github.triggering_actor) }}"
+          git config --global user.name "${{ github.triggering_actor }}"
+
+          git fetch origin --quiet
+          git commit -m "$(git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:'%B%n%nDiffTrain build for [${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}](https://github.com/facebook/react/commit/${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha}})')" || echo "No changes to commit"
+      - name: Push changes to branch
+        if: inputs.dry_run == false && (inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true')
+        run: git push
+
+  commit_fbsource_artifacts:
+    needs: [download_artifacts, process_artifacts]
+    permissions:
+      # Used to push a commit to builds/facebook-fbsource
+      contents: write
+    if: inputs.force == true || (github.ref == 'refs/heads/main' && needs.process_artifacts.outputs.fbsource_branch_count == '0')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: builds/facebook-fbsource
+      - name: Ensure clean directory
+        run: rm -rf compiled-rn
+      - uses: actions/download-artifact@v4
+        with:
+          name: compiled-rn
+          path: compiled-rn/
+      - name: Revert version changes
+        if: needs.process_artifacts.outputs.last_version_rn != ''
+        env:
+          CURRENT_VERSION: ${{ needs.process_artifacts.outputs.current_version_rn }}
+          LAST_VERSION: ${{ needs.process_artifacts.outputs.last_version_rn }}
+        run: |
+          echo "Reverting $CURRENT_VERSION to $LAST_VERSION"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn || echo "No files found with $CURRENT_VERSION"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn | xargs -r sed -i -e "s/$CURRENT_VERSION/$LAST_VERSION/g"
+          grep -rl "$CURRENT_VERSION" ./compiled-rn || echo "Version reverted"
+      - name: Check for changes
+        if: inputs.force != 'true'
+        id: check_should_commit
+        run: |
+          echo "Full git status"
+          git add .
+          git --no-pager diff -U0 --cached | grep '^[+-]' | head -n 100
+          echo "===================="
+          # Ignore REVISION or lines removing @generated headers.
+          if git diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" > /dev/null; then
+            echo "Changes detected"
+            echo "===== Changes ====="
+            git --no-pager diff --cached ':(exclude)*REVISION' ':(exclude)*/eslint-plugin-react-hooks/package.json' | grep -vE "^(@@|diff|index|\-\-\-|\+\+\+|\- \* @generated SignedSource)" | grep "^[+-]" | head -n 50
+            echo "==================="
+            echo "should_commit=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "No Changes detected"
+            echo "should_commit=false" >> "$GITHUB_OUTPUT"
+          fi
+      - name: Re-apply version changes
+        if: inputs.force == true || (steps.check_should_commit.outputs.should_commit == 'true' && needs.process_artifacts.outputs.last_version_rn != '')
+        env:
+          CURRENT_VERSION: ${{ needs.process_artifacts.outputs.current_version_rn }}
+          LAST_VERSION: ${{ needs.process_artifacts.outputs.last_version_rn }}
+        run: |
+          echo "Re-applying $LAST_VERSION to $CURRENT_VERSION"
+          grep -rl "$LAST_VERSION" ./compiled-rn || echo "No files found with $LAST_VERSION"
+          grep -rl "$LAST_VERSION" ./compiled-rn | xargs -r sed -i -e "s/$LAST_VERSION/$CURRENT_VERSION/g"
+          grep -rl "$LAST_VERSION" ./compiled-rn || echo "Version re-applied"
+      - name: Add files for signing
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          echo ":"
+          git add .
+      - name: Signing files
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            // TODO: Move this to a script file.
+            // We currently can't call scripts from the repo because
+            // at this point in the workflow, we're on the compiled
+            // artifact branch (so the scripts don't exist).
+            // We can fix this with a composite action in the main repo.
+            // This script is duplicated above.
+            const fs = require('fs');
+            const crypto = require('crypto');
+            const {execSync} = require('child_process');
+
+            // TODO: when we move this to a script, we can use this from npm.
+            // Copy of signedsource since we can't install deps on this branch.
+            const GENERATED = '@' + 'generated';
+            const NEWTOKEN = '<<SignedSource::*O*zOeWoEQle#+L!plEphiEmie@IsG>>';
+            const PATTERN = new RegExp(`${GENERATED} (?:SignedSource<<([a-f0-9]{32})>>)`);
+
+            const TokenNotFoundError = new Error(
+              `SignedSource.signFile(...): Cannot sign file without token: ${NEWTOKEN}`
+            );
+
+            function hash(data, encoding) {
+              const md5sum = crypto.createHash('md5');
+              md5sum.update(data, encoding);
+              return md5sum.digest('hex');
+            }
+
+            const SignedSource = {
+              getSigningToken() {
+                return `${GENERATED} ${NEWTOKEN}`;
+              },
+              isSigned(data) {
+                return PATTERN.exec(data) != null;
+              },
+              signFile(data) {
+                if (!data.includes(NEWTOKEN)) {
+                  if (SignedSource.isSigned(data)) {
+                    // Signing a file that was previously signed.
+                   data = data.replace(PATTERN, SignedSource.getSigningToken());
+                  } else {
+                    throw TokenNotFoundError;
+                  }
+                }
+                return data.replace(NEWTOKEN, `SignedSource<<${hash(data, 'utf8')}>>`);
+              },
+            };
+
+            const directory = './compiled-rn';
+            console.log('Signing files in directory:', directory);
+            try {
+              const result = execSync(`git status --porcelain ${directory}`, {encoding: 'utf8'});
+              console.log(result);
+
+              // Parse the git status output to get file paths!
+              const files = result.split('\n').filter(file => file.endsWith('.js'));
+
+              if (files.length === 0) {
+                throw new Error(
+                  'git status returned no files to sign. this job should not have run.'
+                );
+              } else {
+                files.forEach(line => {
+                  let file = null;
+                  if (line.startsWith('D ')) {
+                    return;
+                  } else if (line.startsWith('R ')) {
+                    file = line.slice(line.indexOf('->') + 3);
+                  } else {
+                    file = line.slice(3).trim();
+                  }
+                  if (file) {
+                    console.log('  Signing file:', file);
+                    const originalContents = fs.readFileSync(file, 'utf8');
+                    const signedContents = SignedSource.signFile(
+                      originalContents
+                        // Need to add the header in, since it's not inserted at build time.
+                        .replace(' */\n', ` * ${SignedSource.getSigningToken()}\n */\n`)
+                    );
+
+                    fs.writeFileSync(file, signedContents, 'utf8');
+                  }
+                });
+              }
+            } catch (e) {
+              process.exitCode = 1;
+              console.error('Error signing files:', e);
+            }
+      - name: Will commit these changes
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git add .
+          git status
+      - name: Check commit message
+        if: inputs.dry_run
+        run: |
+          git fetch origin --quiet
+          git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:"%B"
+      - name: Commit changes to branch
+        if: inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true'
+        run: |
+          git config --global user.email "${{ format('{0}@users.noreply.github.com', github.triggering_actor) }}"
+          git config --global user.name "${{ github.triggering_actor }}"
+
+          git fetch origin --quiet
+          git commit -m "$(git show ${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }} --no-patch --pretty=format:'%B%n%nDiffTrain build for [${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha }}](https://github.com/facebook/react/commit/${{ inputs.commit_sha || github.event.workflow_run.head_sha || github.sha}})')" || echo "No changes to commit"
+      - name: Push changes to branch
+        if: inputs.dry_run == false && (inputs.force == true || steps.check_should_commit.outputs.should_commit == 'true')
+        run: git push
diff --git a/.github/workflows/runtime_discord_notify.yml b/.github/workflows/runtime_discord_notify.yml
new file mode 100644
index 00000000000..ae9930adf11
--- /dev/null
+++ b/.github/workflows/runtime_discord_notify.yml
@@ -0,0 +1,51 @@
+name: (Runtime) Discord Notify
+
+on:
+  pull_request_target:
+    types: [opened, ready_for_review]
+    paths-ignore:
+      - packages/react-devtools**
+      - compiler/**
+      - .github/workflows/compiler_**.yml
+      - .github/workflows/devtools**.yml
+
+permissions: {}
+
+jobs:
+  check_access:
+    if: ${{ github.event.pull_request.draft == false }}
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  notify:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}
diff --git a/.github/workflows/runtime_eslint_plugin_e2e.yml b/.github/workflows/runtime_eslint_plugin_e2e.yml
new file mode 100644
index 00000000000..92921646c1b
--- /dev/null
+++ b/.github/workflows/runtime_eslint_plugin_e2e.yml
@@ -0,0 +1,65 @@
+name: (Runtime) ESLint Plugin E2E
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    paths-ignore:
+      - compiler/**
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  # ----- TESTS -----
+  test:
+    name: ESLint v${{ matrix.eslint_major }}
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        eslint_major:
+          - "6"
+          - "7"
+          - "8"
+          - "9"
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-and-compiler-eslint_e2e-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'compiler/yarn.lock', 'fixtures/eslint-v*/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd compiler install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Install fixture dependencies
+        working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
+        run: yarn --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - name: Build plugin
+        working-directory: fixtures/eslint-v${{ matrix.eslint_major }}
+        run: node build.mjs
+      - name: Run lint test
+        working-directory: ./fixtures/eslint-v${{ matrix.eslint_major }}
+        run: yarn lint
diff --git a/.github/workflows/runtime_fuzz_tests.yml b/.github/workflows/runtime_fuzz_tests.yml
new file mode 100644
index 00000000000..a88ce523a62
--- /dev/null
+++ b/.github/workflows/runtime_fuzz_tests.yml
@@ -0,0 +1,33 @@
+name: (Runtime) Fuzz tests
+
+on:
+  schedule:
+    - cron: 0 * * * *
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  test_fuzz:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4.1.0
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        cache: 'yarn'
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: "1"
+      shell: bash
+    - name: Run fuzz tests
+      run: |-
+        FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
+        FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
diff --git a/.github/workflows/runtime_prereleases.yml b/.github/workflows/runtime_prereleases.yml
new file mode 100644
index 00000000000..6559b144997
--- /dev/null
+++ b/.github/workflows/runtime_prereleases.yml
@@ -0,0 +1,110 @@
+name: (Runtime) Publish Prereleases
+
+on:
+  workflow_call:
+    inputs:
+      commit_sha:
+        required: true
+        default: ''
+        type: string
+      release_channel:
+        required: true
+        type: string
+      dist_tag:
+        required: true
+        type: string
+      enableFailureNotification:
+        description: 'Whether to notify the team on Discord when the release fails. Useful if this workflow is called from an automation.'
+        required: false
+        type: boolean
+      only_packages:
+        description: Packages to publish (space separated)
+        type: string
+      skip_packages:
+        description: Packages to NOT publish (space separated)
+        type: string
+      dry:
+        required: true
+        description: Dry run instead of publish?
+        type: boolean
+        default: true
+    secrets:
+      DISCORD_WEBHOOK_URL:
+        description: 'Discord webhook URL to notify on failure. Only required if enableFailureNotification is true.'
+        required: false
+      GH_TOKEN:
+        required: true
+      NPM_TOKEN:
+        required: true
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  publish_prerelease:
+    name: Publish prelease (${{ inputs.release_channel }}) ${{ inputs.commit_sha }} @${{ inputs.dist_tag }}
+    runs-on: ubuntu-latest
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: cp ./scripts/release/ci-npmrc ~/.npmrc
+      - run: |
+          GH_TOKEN=${{ secrets.GH_TOKEN }} scripts/release/prepare-release-from-ci.js --skipTests -r ${{ inputs.release_channel }} --commit=${{ inputs.commit_sha }}
+      - name: Check prepared files
+        run: ls -R build/node_modules
+      - if: '${{ inputs.only_packages }}'
+        name: 'Publish ${{ inputs.only_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.dist_tag }} \
+            --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - if: '${{ inputs.skip_packages }}'
+        name: 'Publish all packages EXCEPT ${{ inputs.skip_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.dist_tag }} \
+            --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - if: '${{ !inputs.skip_packages && !inputs.only_packages }}'
+        name: 'Publish all packages'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.dist_tag }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - name: Notify Discord on failure
+        if: failure() && inputs.enableFailureNotification == true
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: "GitHub Actions"
+          embed-title: '[Runtime] Publish of ${{ inputs.release_channel }}@${{ inputs.dist_tag}} release failed'
+          embed-url: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}/attempts/${{ github.run_attempt }}
diff --git a/.github/workflows/runtime_prereleases_manual.yml b/.github/workflows/runtime_prereleases_manual.yml
new file mode 100644
index 00000000000..407d931e907
--- /dev/null
+++ b/.github/workflows/runtime_prereleases_manual.yml
@@ -0,0 +1,102 @@
+name: (Runtime) Publish Prereleases Manual
+
+on:
+  workflow_dispatch:
+    inputs:
+      prerelease_commit_sha:
+        required: true
+      only_packages:
+        description: Packages to publish (space separated)
+        type: string
+      skip_packages:
+        description: Packages to NOT publish (space separated)
+        type: string
+      dry:
+        required: true
+        description: Dry run instead of publish?
+        type: boolean
+        default: true
+      experimental_only:
+        type: boolean
+        description: Only publish to the experimental tag
+        default: false
+      force_notify:
+        description: Force a Discord notification?
+        type: boolean
+        default: false
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  notify:
+    if: ${{ inputs.force_notify || inputs.dry == false || inputs.dry == 'false' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.sender.login }}
+          embed-author-url: ${{ github.event.sender.html_url }}
+          embed-author-icon-url: ${{ github.event.sender.avatar_url }}
+          embed-title: "⚠️ Publishing ${{ inputs.experimental_only && 'EXPERIMENTAL' || 'CANARY & EXPERIMENTAL' }} release ${{ (inputs.dry && ' (dry run)') || '' }}"
+          embed-description: |
+            ```json
+            ${{ toJson(inputs) }}
+            ```
+          embed-url: https://github.com/facebook/react/actions/runs/${{ github.run_id }}
+
+  publish_prerelease_canary:
+    if: ${{ !inputs.experimental_only }}
+    name: Publish to Canary channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    with:
+      commit_sha: ${{ inputs.prerelease_commit_sha }}
+      release_channel: stable
+      # The tags to use when publishing canaries. The main one we should
+      # always include is "canary" but we can use multiple (e.g. alpha,
+      # beta, rc). To declare multiple, use a comma-separated string, like
+      # this:
+      #   dist_tag: "canary,alpha,beta,rc"
+      #
+      # TODO: We currently tag canaries with "next" in addition to "canary"
+      # because this used to be called the "next" channel and some
+      # downstream consumers might still expect that tag. We can remove this
+      # after some time has elapsed and the change has been communicated.
+      dist_tag: canary,next
+      only_packages: ${{ inputs.only_packages }}
+      skip_packages: ${{ inputs.skip_packages }}
+      dry: ${{ inputs.dry }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    # NOTE: Intentionally running these jobs sequentially because npm
+    # will sometimes fail if you try to concurrently publish two
+    # different versions of the same package, even if they use different
+    # dist tags.
+    needs: publish_prerelease_canary
+    # Ensures the job runs even if canary is skipped
+    if: always()
+    with:
+      commit_sha: ${{ inputs.prerelease_commit_sha }}
+      release_channel: experimental
+      dist_tag: experimental
+      only_packages: ${{ inputs.only_packages }}
+      skip_packages: ${{ inputs.skip_packages }}
+      dry: ${{ inputs.dry }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/runtime_prereleases_nightly.yml b/.github/workflows/runtime_prereleases_nightly.yml
new file mode 100644
index 00000000000..f13a92e46f4
--- /dev/null
+++ b/.github/workflows/runtime_prereleases_nightly.yml
@@ -0,0 +1,51 @@
+name: (Runtime) Publish Prereleases Nightly
+
+on:
+  schedule:
+    # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
+    - cron: 10 16 * * 1,2,3,4,5
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  publish_prerelease_canary:
+    name: Publish to Canary channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: stable
+      dist_tag: canary,next
+      enableFailureNotification: true
+      dry: false
+    secrets:
+      DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish_prerelease_experimental:
+    name: Publish to Experimental channel
+    uses: facebook/react/.github/workflows/runtime_prereleases.yml@main
+    permissions:
+      # We use github.token to download the build artifact from a previous runtime_build_and_test.yml run
+      actions: read
+    # NOTE: Intentionally running these jobs sequentially because npm
+    # will sometimes fail if you try to concurrently publish two
+    # different versions of the same package, even if they use different
+    # dist tags.
+    needs: publish_prerelease_canary
+    with:
+      commit_sha: ${{ github.sha }}
+      release_channel: experimental
+      dist_tag: experimental
+      enableFailureNotification: true
+      dry: false
+    secrets:
+      DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/runtime_releases_from_npm_manual.yml b/.github/workflows/runtime_releases_from_npm_manual.yml
new file mode 100644
index 00000000000..f164e9f0806
--- /dev/null
+++ b/.github/workflows/runtime_releases_from_npm_manual.yml
@@ -0,0 +1,128 @@
+name: (Runtime) Publish Releases from NPM Manual
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_to_promote:
+        required: true
+        description: Current npm version (non-experimental) to promote
+        type: string
+      version_to_publish:
+        required: true
+        description: Version to publish for the specified packages
+        type: string
+      only_packages:
+        description: Packages to publish (space separated)
+        type: string
+      skip_packages:
+        description: Packages to NOT publish (space separated)
+        type: string
+      tags:
+        description: NPM tags (space separated)
+        type: string
+        default: untagged
+      dry:
+        required: true
+        description: Dry run instead of publish?
+        type: boolean
+        default: true
+      force_notify:
+        description: Force a Discord notification?
+        type: boolean
+        default: false
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  notify:
+    if: ${{ inputs.force_notify || inputs.dry == false || inputs.dry == 'false' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@86dc739f3f165f16dadc5666051c367efa1692f4
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.sender.login }}
+          embed-author-url: ${{ github.event.sender.html_url }}
+          embed-author-icon-url: ${{ github.event.sender.avatar_url }}
+          embed-title: "⚠️ Publishing release from NPM${{ (inputs.dry && ' (dry run)') || '' }}"
+          embed-description: |
+            ```json
+            ${{ toJson(inputs) }}
+            ```
+          embed-url: https://github.com/facebook/react/actions/runs/${{ github.run_id }}
+
+  publish:
+    name: Publish releases
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: runtime-release-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock', 'scripts/release/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn --cwd scripts/release install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: cp ./scripts/release/ci-npmrc ~/.npmrc
+      - if: '${{ inputs.only_packages }}'
+        name: 'Prepare ${{ inputs.only_packages }} from NPM'
+        run: |
+          scripts/release/prepare-release-from-npm.js \
+            --ci \
+            --skipTests \
+            --version=${{ inputs.version_to_promote }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --onlyPackages=${{ inputs.only_packages }}
+      - if: '${{ inputs.skip_packages }}'
+        name: 'Prepare all packages EXCEPT ${{ inputs.skip_packages }} from NPM'
+        run: |
+          scripts/release/prepare-release-from-npm.js \
+            --ci \
+            --skipTests \
+            --version=${{ inputs.version_to_promote }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --skipPackages=${{ inputs.skip_packages }}
+      - name: Check prepared files
+        run: ls -R build/node_modules
+      - if: '${{ inputs.only_packages }}'
+        name: 'Publish ${{ inputs.only_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.tags }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - if: '${{ inputs.skip_packages }}'
+        name: 'Publish all packages EXCEPT ${{ inputs.skip_packages }}'
+        run: |
+          scripts/release/publish.js \
+            --ci \
+            --tags=${{ inputs.tags }} \
+            --publishVersion=${{ inputs.version_to_publish }} \
+            --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}}
+            ${{ inputs.dry && '--dry' || '' }}
+      - name: Archive released package for debugging
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: |
+            ./build/node_modules
diff --git a/.github/workflows/shared_check_maintainer.yml b/.github/workflows/shared_check_maintainer.yml
new file mode 100644
index 00000000000..f6eb9b9a6d1
--- /dev/null
+++ b/.github/workflows/shared_check_maintainer.yml
@@ -0,0 +1,58 @@
+name: (Shared) Check maintainer
+
+on:
+  workflow_call:
+    inputs:
+      actor:
+        required: true
+        type: string
+    outputs:
+      is_core_team:
+        value: ${{ jobs.check_maintainer.outputs.is_core_team }}
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  check_maintainer:
+    runs-on: ubuntu-latest
+    permissions:
+      # We fetch the contents of the MAINTAINERS file
+      contents: read
+    outputs:
+      is_core_team: ${{ steps.check_if_actor_is_maintainer.outputs.result }}
+    steps:
+      - name: Check if actor is maintainer
+        id: check_if_actor_is_maintainer
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const actor = '${{ inputs.actor }}';
+            const res = await github.rest.repos.getContent({
+              owner: 'facebook',
+              repo: 'react',
+              path: 'MAINTAINERS',
+              ref: 'main',
+              headers: { Accept: 'application/vnd.github+json' }
+            });
+            if (res.status !== 200) {
+              console.error(res);
+              throw new Error('Unable to fetch MAINTAINERS file');
+            }
+            content = Buffer.from(res.data.content, 'base64').toString();
+            if (content == null || typeof content !== 'string') {
+              throw new Error('Unable to retrieve MAINTAINERS file');
+            }
+
+            const maintainers = new Set(content.split('\n'));
+            if (maintainers.has(actor)) {
+              console.log(`🟢 ${actor} is a maintainer`);
+              return true;
+            }
+            console.log(`🔴 ${actor} is NOT a maintainer`);
+            return null;
diff --git a/.github/workflows/shared_cleanup_merged_branch_caches.yml b/.github/workflows/shared_cleanup_merged_branch_caches.yml
new file mode 100644
index 00000000000..ed80a505e42
--- /dev/null
+++ b/.github/workflows/shared_cleanup_merged_branch_caches.yml
@@ -0,0 +1,41 @@
+# https://github.com/actions/cache/blob/main/tips-and-workarounds.md#force-deletion-of-caches-overriding-default-cache-eviction-policy
+
+name: (Shared) Cleanup Merged Branch Caches
+on:
+  pull_request:
+    types:
+      - closed
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        required: true
+        type: string
+
+permissions: {}
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    permissions:
+      # `actions:write` permission is required to delete caches
+      #   See also: https://docs.github.com/en/rest/actions/cache?apiVersion=2022-11-28#delete-a-github-actions-cache-for-a-repository-using-a-cache-id
+      actions: write
+      contents: read
+    steps:
+      - name: Cleanup
+        run: |
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh cache list --ref $BRANCH --limit 100 --json id --jq '.[].id')
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          for cacheKey in $cacheKeysForPR
+          do
+              gh cache delete $cacheKey
+              echo "Deleting $cacheKey"
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          BRANCH: refs/pull/${{ inputs.pr_number || github.event.pull_request.number }}/merge
diff --git a/.github/workflows/shared_cleanup_stale_branch_caches.yml b/.github/workflows/shared_cleanup_stale_branch_caches.yml
new file mode 100644
index 00000000000..f6c532b485a
--- /dev/null
+++ b/.github/workflows/shared_cleanup_stale_branch_caches.yml
@@ -0,0 +1,36 @@
+# https://github.com/actions/cache/blob/main/tips-and-workarounds.md#force-deletion-of-caches-overriding-default-cache-eviction-policy
+
+name: (Shared) Cleanup Stale Branch Caches
+on:
+  schedule:
+    # Every 6 hours
+    - cron: 0 */6 * * *
+  workflow_dispatch:
+
+permissions: {}
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    permissions:
+      # `actions:write` permission is required to delete caches
+      #   See also: https://docs.github.com/en/rest/actions/cache?apiVersion=2022-11-28#delete-a-github-actions-cache-for-a-repository-using-a-cache-id
+      actions: write
+      contents: read
+    steps:
+      - name: Cleanup
+        run: |
+          echo "Fetching list of cache keys"
+          cacheKeysForPR=$(gh cache list --limit 100 --json id,ref --jq '.[] | select(.ref != "refs/heads/main") | .id')
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          for cacheKey in $cacheKeysForPR
+          do
+              gh cache delete $cacheKey
+              echo "Deleting $cacheKey"
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
diff --git a/.github/workflows/shared_close_direct_sync_branch_prs.yml b/.github/workflows/shared_close_direct_sync_branch_prs.yml
new file mode 100644
index 00000000000..caa4da880b5
--- /dev/null
+++ b/.github/workflows/shared_close_direct_sync_branch_prs.yml
@@ -0,0 +1,43 @@
+name: (Shared) Close Direct Sync Branch PRs
+
+on:
+  pull_request:
+    branches:
+      - 'builds/facebook-**'
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  close_pr:
+    runs-on: ubuntu-latest
+    permissions:
+      # Used to create a review and close PRs
+      pull-requests: write
+      contents: write
+    steps:
+      - name: Close PR
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const owner = context.repo.owner;
+            const repo = context.repo.repo;
+            const pullNumber = ${{ github.event.number }};
+
+            await github.rest.pulls.createReview({
+              owner,
+              repo,
+              pull_number: pullNumber,
+              body: 'Do not land changes to `${{ github.event.pull_request.base.ref }}`. Please re-open your PR targeting `main` instead.',
+              event: 'REQUEST_CHANGES'
+            });
+            await github.rest.pulls.update({
+              owner,
+              repo,
+              pull_number: pullNumber,
+              state: 'closed'
+            });
diff --git a/.github/workflows/shared_label_core_team_prs.yml b/.github/workflows/shared_label_core_team_prs.yml
new file mode 100644
index 00000000000..cc10e87dcc2
--- /dev/null
+++ b/.github/workflows/shared_label_core_team_prs.yml
@@ -0,0 +1,55 @@
+name: (Shared) Label Core Team PRs
+
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions: {}
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  check_access:
+    runs-on: ubuntu-latest
+    outputs:
+      is_member_or_collaborator: ${{ steps.check_is_member_or_collaborator.outputs.is_member_or_collaborator }}
+    steps:
+      - run: echo ${{ github.event.pull_request.author_association }}
+      - name: Check is member or collaborator
+        id: check_is_member_or_collaborator
+        if: ${{ github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'COLLABORATOR' }}
+        run: echo "is_member_or_collaborator=true" >> "$GITHUB_OUTPUT"
+
+  check_maintainer:
+    if: ${{ needs.check_access.outputs.is_member_or_collaborator == 'true' || needs.check_access.outputs.is_member_or_collaborator == true }}
+    needs: [check_access]
+    uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
+    with:
+      actor: ${{ github.event.pull_request.user.login }}
+
+  label:
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    runs-on: ubuntu-latest
+    needs: check_maintainer
+    permissions:
+      # Used to add labels on issues
+      issues: write
+      # Used to add labels on PRs
+      pull-requests: write
+    steps:
+      - name: Label PR as React Core Team
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: ${{ github.event.number }},
+              labels: ['React Core Team']
+            });
diff --git a/.github/workflows/shared_lint.yml b/.github/workflows/shared_lint.yml
new file mode 100644
index 00000000000..3c359cff228
--- /dev/null
+++ b/.github/workflows/shared_lint.yml
@@ -0,0 +1,110 @@
+name: (Shared) Lint
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+  # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+  SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+  prettier:
+    name: Run prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: yarn prettier-check
+
+  eslint:
+    name: Run eslint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: node ./scripts/tasks/eslint
+
+  check_license:
+    name: Check license
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: ./scripts/ci/check_license.sh
+
+  test_print_warnings:
+    name: Test print warnings
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+          cache-dependency-path: yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: shared-lint-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Ensure clean build directory
+        run: rm -rf build
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules.outputs.cache-hit != 'true'
+      - run: ./scripts/ci/test_print_warnings.sh
diff --git a/.github/workflows/shared_stale.yml b/.github/workflows/shared_stale.yml
new file mode 100644
index 00000000000..c24895edc5d
--- /dev/null
+++ b/.github/workflows/shared_stale.yml
@@ -0,0 +1,55 @@
+# Configuration for stale action workflow - https://github.com/actions/stale
+name: (Shared) Manage stale issues and PRs
+on:
+  schedule:
+    # Run hourly
+    - cron: '0 * * * *'
+  workflow_dispatch:
+
+permissions:
+  # https://github.com/actions/stale/tree/v9/?tab=readme-ov-file#recommended-permissions
+  issues: write
+  pull-requests: write
+
+env:
+  TZ: /usr/share/zoneinfo/America/Los_Angeles
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          # --- Issues & PRs ---
+          # Number of days of inactivity before an issue or PR becomes stale
+          days-before-stale: 90
+          # Number of days of inactivity before a stale issue or PR is closed
+          days-before-close: 7
+          # API calls per run
+          operations-per-run: 100
+
+          # --- Issues ---
+          stale-issue-label: "Resolution: Stale"
+          # Comment to post when marking an issue as stale
+          stale-issue-message: >
+            This issue has been automatically marked as stale.
+            **If this issue is still affecting you, please leave any comment** (for example, "bump"), and we'll keep it open.
+            We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
+          # Comment to post when closing a stale issue
+          close-issue-message: >
+            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!
+          # Issues with these labels will never be considered stale
+          exempt-issue-labels: "Partner,React Core Team,Resolution: Backlog,Type: Bug,Type: Discussion,Type: Needs Investigation,Type: Regression,Type: Feature Request,Type: Enhancement"
+
+          # --- PRs ---
+          stale-pr-label: "Resolution: Stale"
+          # Comment to post when marking a pull request as stale
+          stale-pr-message: >
+            This pull request has been automatically marked as stale.
+            **If this pull request is still relevant, please leave any comment** (for example, "bump"), and we'll keep it open.
+            We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.
+          # Comment to post when closing a stale pull request
+          close-pr-message: >
+            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!
+          # PRs with these labels will never be considered stale
+          exempt-pr-labels: "Partner,React Core Team,Resolution: Backlog,Type: Bug,Type: Discussion,Type: Needs Investigation,Type: Regression,Type: Feature Request,Type: Enhancement"
diff --git a/.gitignore b/.gitignore
index a036ec3a6be..438d125b47a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,21 +1,43 @@
 .DS_STORE
 node_modules
+scripts/flow/*/.flowconfig
+.flowconfig
 *~
 *.pyc
-static
 .grunt
 _SpecRunner.html
 __benchmarks__
 build/
+remote-repo/
+coverage/
 .module-cache
-*.gem
-docs/code
-docs/_site
-docs/.sass-cache
-docs/css/react.css
-docs/js/*
-docs/downloads
-examples/shared/*.js
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
 test/the-files-to-test.generated.js
 *.log*
 chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo
+/tmp
+/.worktrees
+.claude/*.local.*
+
+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-extensions/.tempUserDataDir
+packages/react-devtools-fusebox/dist
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-timeline/dist
+
diff --git a/.jshintrc b/.jshintrc
deleted file mode 100644
index 27c028d0999..00000000000
--- a/.jshintrc
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "node": true,
-
-  "boss": true,
-  "curly": true,
-  "devel": true,
-  "eqnull": true,
-  "expr": true,
-  "funcscope": true,
-  "globalstrict": true,
-  "loopfunc": true,
-  "newcap": false,
-  "noempty": true,
-  "nonstandard": true,
-  "onecase": true,
-  "sub": true,
-  "regexdash": true,
-  "trailing": true,
-  "undef": true,
-  "unused": "vars"
-}
diff --git a/.mailmap b/.mailmap
index 4d3c4e90796..e661c3707d5 100644
--- a/.mailmap
+++ b/.mailmap
@@ -1,44 +1,118 @@
+Adam Timberlake <adam.timberlake@gmail.com>
+Alex Mykyta <dancingwithcows@gmail.com>
+Alex Pien <alexpien@gmail.com>
+Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
+Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
+Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
+Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
+Andreas Svensson <andreas@syranide.com>
+Andres Suarez <zertosh@gmail.com>
+Andrew Kulakov <avk@8xx8.ru>
+Andrew Sokolov <asokolov@atlassian.com>
+Anto Aravinth <anto.aravinth.cse@gmail.com>
+Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
+Ben Halpern <bendhalpern@gmail.com>
 Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
+Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
 Bill Fisher <fisherwebdev@gmail.com>
+Blaine Kasten <blainekasten@gmail.com>
+Brandon Tilley <brandon@brandontilley.com>
+Changsoon Bok <winmain@gmail.com>
 Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
+Christian Oliff <christianoliff@yahoo.com>
 Christoph Pojer <christoph.pojer@gmail.com>
 Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
 Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
+Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
 Dan Schafer <dschafer@fb.com>
 Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
 Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
+Daniel Hejl <daniel.hejl@hotmail.com>
 Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
+Dave Galbraith <dave@jut.io>
+Dennis Johnson <songawee@gmail.com>
+Dmitry Blues <dmitri.blyus@gmail.com>
+Dongsheng Liu <bellanchor@gmail.com>
+Erik Harper <eharper@mixpo.com>
 Evan Coonrod <evan@paloalto.com>
 Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
 Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
 François-Xavier Bois <fxbois@gmail.com>
+Fyodor Ivanishchev <cbrwizard@gmail.com>
+Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
 Geert Pasteels <geert.pasteels@gmail.com>
 George A Sisco III <george.sisco@gmail.com>
+Georgii Dolzhykov <thorn.mailbox@gmail.com>
 Harry Hull <harry.hull1@gmail.com>
 Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
+Hyeock Kwon <doublus@gmail.com>
+Ian Obermiller <ian@obermillers.com> <iano@fb.com>
+Ilia Pavlenkov <dortonway@gmail.com>
+Ilyá Belsky <gelias.gbelsky@gmail.com>
 Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
 Irae Carvalho <irae@irae.pro.br>
+Ivan Vergiliev <ivan.vergiliev@gmail.com>
+JJ Weber <jj.weber@gmail.com>
+Jae Hun Ro <jhr24@duke.edu>
 Jaime Mingo <j.mingov@3boll.com>
 James Brantly <james@jbrantly.com>
+Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
 Jan Kassens <jan@kassens.net> <jkassens@fb.com>
 Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
+Jason Quense <monastic.panic@gmail.com>
 Jason Trill <jason@jasontrill.com>
+Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
 Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
 Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
+Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
 Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
+Jim Sproch <jsproch@fb.com>
+Jim Sproch <jsproch@fb.com> <jsfb@github>
+Jim Sproch <jsproch@fb.com> <none@no-reply.com>
+Jinwoo Oh <arkist@gmail.com>
+Jinxiu Lee <lee.jinxiu@gmail.com>
+Jiyeon Seo <zzzeons@gmail.com>
+Jon Chester <jonchester@fb.com>
+Jon Madison <jon@tfftech.com>
 Jonathan Hsu <jhiswin@gmail.com>
+Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
 Jordan Walke <jordojw@gmail.com>
 Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
+Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
 Josh Duck <josh@fb.com> <github@joshduck.com>
+Juan Serrano <germ13@users.noreply.github.com>
 Jun Wu <quark@lihdd.net>
+Justin Robison <jrobison151@gmail.com>
 Keito Uchiyama <projects@keito.me> <keito@fb.com>
+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>
 Martin Andert <mandert@gmail.com>
 Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
+Matsunoki <himkt@klis.tsukuba.ac.jp>
+Matt Brookes <matt@brookes.net>
+Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
+Matt Zabriskie <mzabriskie@gmail.com>
+Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
+Matthew Looi <looi.matthew@gmail.com>
+Mattijs Kneppers <mattijs@arttech.nl>
+Max Heiber <max.heiber@gmail.com>
+Max Stoiber <contact@mstoiber.com>
 Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
+Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
+Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
+Minwe LUO <minwe@yunshipei.com>
+Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
+Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
+Neri Marschik <marschik_neri@cyberagent.co.jp>
 Nick Gavalas <njg57@cornell.edu>
 Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
+Patrick Stapleton <github@gdi2290.com>
 Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
 Paul Shen <paul@mnml0.com> <paulshen@fb.com>
 Pete Hunt <floydophone@gmail.com>
@@ -48,15 +122,47 @@ Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
 Petri Lievonen <plievone@cc.hut.fi>
 Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
 Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
+Pouja Nikray <poujanik@gmail.com>
+Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
 Ray <ray@tomo.im>
 Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
 Richard Livesey <Livesey7@hotmail.co.uk>
+Rick Hanlon <rickhanlonii@gmail.com>
+Rick Hanlon <rickhanlonii@gmail.com> <rickhanlonii@fb.com>
+Rob Arnold <robarnold@cs.cmu.edu>
+Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
+Robin Frischmann <robin@rofrischmann.de>
 Sander Spies <sandermail@gmail.com>
+Scott Feeney <scott@oceanbase.org> <smf@fb.com>
 Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
+Sergey Rubanov <chi187@gmail.com>
+Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
+Soichiro Kawamura <mail@w-st.com>
+Sophie Alpert <git@sophiebits.com> <balpert@fb.com>
+Sophie Alpert <git@sophiebits.com> <ben@benalpert.com>
+Sophie Alpert <git@sophiebits.com> <sophiebits@fb.com>
+Sophie Alpert <git@sophiebits.com> <spicyjalapeno@gmail.com>
+Sota Ohara <ohrst.18@gmail.com>
+Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
+Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
+Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
+Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
+Seth Webster <sethwebster@gmail.com> <sethwebster@fb.com>
 Stoyan Stefanov <ssttoo@ymail.com>
+Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
 Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
 Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
+Tomoya Suzuki <tmysz.dev@gmail.com>
+Vasiliy Loginevskiy <Yeti.or@gmail.com>
+Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
 Vjeux <vjeuxx@gmail.com>
 Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
 Volkan Unsal <spocksplanet@gmail.com>
+Wander Wang <wander.wang@ismole.com>
+Xavier Morel <xmo-odoo@users.noreply.github.com>
+YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
+Yutaka Nakajima <nakazye@gmail.com>
 Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
+iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
+元彦 <yuanyan@users.noreply.github.com>
+张敏 <cookfront@gmail.com>
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000000..5f53e875de6
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v20.19.0
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..7e09af76a3a
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,41 @@
+# react runtime
+build
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/edge/build
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
+packages/react-devtools-fusebox/dist
+packages/react-devtools-inline/dist
+packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
+packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
+packages/react-devtools-shell/dist
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static
+
+# react compiler
+compiler/**/dist
+compiler/**/__tests__/fixtures/**/*.expect.md
+compiler/**/.next
+
+# contains invalid graphql`...` which results in a promise rejection error from `yarn prettier-all`.
+compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
+
+compiler/crates
+compiler/target
+compiler/apps/playground/public
+
+compiler/**/LICENSE
+compiler/*.md*
+compiler/*.json
+compiler/*.css
+compiler/*.webmanifest
+compiler/*.map
+compiler/*.sh
+compiler/*.txt
+compiler/*.ico
+compiler/*.svg
+compiler/*.lock
+compiler/*.toml
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 00000000000..aa54cbae1f9
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,34 @@
+'use strict';
+
+const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
+
+module.exports = {
+  bracketSpacing: false,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+  printWidth: 80,
+  parser: 'flow',
+  arrowParens: 'avoid',
+  overrides: [
+    {
+      files: ['*.code-workspace'],
+      options: {
+        parser: 'json-stringify',
+      },
+    },
+    {
+      files: esNextPaths,
+      options: {
+        trailingComma: 'all',
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      options: {
+        trailingComma: 'all',
+        parser: 'typescript',
+      },
+    },
+  ],
+};
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index cf0ded38147..00000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,60 +0,0 @@
----
-language: node_js
-node_js:
-- '0.10'
-cache:
-  directories:
-  - node_modules
-script:
-- |
-    grunt $TEST_TYPE
-after_script:
-- |
-    if [ "$TEST_TYPE" = test ] && [ "$SERVER" ]; then
-      grunt build
-      curl \
-        -F "react=@build/react.js" \
-        -F "react.min=@build/react.min.js" \
-        -F "transformer=@build/JSXTransformer.js" \
-        -F "react-with-addons=@build/react-with-addons.js" \
-        -F "react-with-addons.min=@build/react-with-addons.min.js" \
-        -F "npm-react=@build/react.tgz" \
-        -F "npm-react-tools=@build/react-tools.tgz" \
-        -F "commit=$TRAVIS_COMMIT" \
-        -F "date=`git log --format='%ct' -1`" \
-        -F "pull_request=$TRAVIS_PULL_REQUEST" \
-        -F "token=$SECRET_TOKEN" \
-        -F "branch=$TRAVIS_BRANCH" \
-        $SERVER
-    fi
-env:
-  matrix:
-  - TEST_TYPE=test
-  - TEST_TYPE=lint
-  - TEST_TYPE=test:webdriver:saucelabs:modern
-  global:
-  # SERVER
-  - secure: qPvsJ46XzGrdIuPA70b55xQNGF8jcK7N1LN5CCQYYocXLa+fBrl+fTE77QvehOPhqwJXcj6kOxI+sY0KrVwV7gmq2XY2HZGWUSCxTN0SZlNIzqPA80Y7G/yOjA4PUt8LKgP+8tptyhTAY56qf+hgW8BoLiKOdztYF2p+3zXOLuA=
-  # SECRET_TOKEN
-  - secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
-matrix:
-  fast_finish: true
-  allow_failures:
-    - env: TEST_TYPE=lint
-    - env: TEST_TYPE=test:coverage
-    - env: TEST_TYPE=perf:full
-    - env: TEST_TYPE=test:webdriver:saucelabs:modern
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie11
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie10
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie9
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie8
-    - env: TEST_TYPE=test:webdriver:saucelabs:ios
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=safari
-notifications:
-  irc:
-    use_notice: true
-    skip_join: true
-    on_success: change
-    on_failure: change
-    channels:
-    - chat.freenode.net#reactjs
diff --git a/.watchmanconfig b/.watchmanconfig
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/AUTHORS b/AUTHORS
deleted file mode 100644
index 78fd51845c7..00000000000
--- a/AUTHORS
+++ /dev/null
@@ -1,178 +0,0 @@
-Adam Krebs <amk528@cs.nyu.edu>
-Adam Solove <asolove@gmail.com>
-Alan deLevie <adelevie@gmail.com>
-Alex Zelenskiy <azelenskiy@fb.com>
-Alexander Solovyov <alexander@solovyov.net>
-Andreas Svensson <andreas@syranide.com>
-Andrew Davey <andrew@equin.co.uk>
-Andrew Zich <azich@fb.com>
-Andrey Popp <8mayday@gmail.com>
-Anthony van der Hoorn <anthony.vanderhoorn@gmail.com>
-Ayman Osman <aymano.osman@gmail.com>
-Ben Alpert <spicyjalapeno@gmail.com>
-Ben Newman <bn@cs.stanford.edu>
-Ben Ripkens <bripkens.dev@gmail.com>
-Bill Fisher <fisherwebdev@gmail.com>
-Bob Eagan <bob@synapsestudios.com>
-Bojan Mihelac <bmihelac@mihelac.org>
-Brandon Bloom <brandon@brandonbloom.name>
-Brian Cooke <bri@bricooke.com>
-Brian Kim <briankimpossible@gmail.com>
-Brian Reavis <brian@thirdroute.com>
-Brian Rue <brian@rollbar.com>
-Cam Spiers <camspiers@gmail.com>
-Cassus Adam Banko <banko.adam@gmail.com>
-Cat Chen <catchen@fb.com>
-Cheng Lou <chenglou92@gmail.com>
-Christian Roman <chroman16@gmail.com>
-Christoph Pojer <christoph.pojer@gmail.com>
-Christopher Monsanto <chris@monsan.to>
-Clay Allsopp <clay.allsopp@gmail.com>
-Connor McSheffrey <c@conr.me>
-Dan Schafer <dschafer@fb.com>
-Daniel Gasienica <daniel@gasienica.ch>
-Daniel Lo Nigro <daniel@dan.cx>
-Daniel Miladinov <dmiladinov@wingspan.com>
-Daniel Schonfeld <daniel@schonfeld.org>
-Danny Ben-David <dannybd@fb.com>
-Daryl Lau <daryl@weak.io>
-David Hellsing <david@aino.se>
-David Hu <davidhu91@gmail.com>
-Devon Blandin <dblandin@gmail.com>
-Dmitry Mazuro <dmitry.mazuro@icloud.com>
-Dustin Getz <dgetz@wingspan.com>
-Enguerran <engcolson@gmail.com>
-Eric Clemmons <eric@smarterspam.com>
-Eric Florenzano <floguy@gmail.com>
-Eric Schoffstall <contra@wearefractal.com>
-Evan Coonrod <evan@paloalto.com>
-Fabio M. Costa <fabiomcosta@gmail.com>
-Felipe Oliveira Carvalho <felipekde@gmail.com>
-Felix Kling <felix.kling@gmx.net>
-Fernando Correia <fernando@servicero.com>
-François-Xavier Bois <fxbois@gmail.com>
-Fred Zhao <fredz@fb.com>
-G Scott Olson <gscottolson@gmail.com>
-Geert Pasteels <geert.pasteels@gmail.com>
-Geert-Jan Brits <gbrits@gmail.com>
-George A Sisco III <george.sisco@gmail.com>
-Gilbert <gilbertbgarza@gmail.com>
-Greg Hurrell <glh@fb.com>
-Greg Roodt <groodt@gmail.com>
-Guangqiang Dong <gqdong@fb.com>
-Guido Bouman <m@guido.vc>
-Harry Hull <harry.hull1@gmail.com>
-Harshad Sabne <harshadsabne@users.noreply.github.com>
-Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
-Hugo Jobling <me@thisishugo.com>
-Ian Obermiller <iano@fb.com>
-Ingvar Stepanyan <me@rreverser.com>
-Irae Carvalho <irae@irae.pro.br>
-Isaac Salier-Hellendag <isaac@fb.com>
-Ivan Kozik <ivan@ludios.org>
-Jaime Mingo <j.mingov@3boll.com>
-Jakub Malinowski <jakubmal@gmail.com>
-James Brantly <james@jbrantly.com>
-James Ide <ide@fb.com>
-Jamie Wong <jamie.lf.wong@gmail.com>
-Jamison Dance <jergason@gmail.com>
-Jan Kassens <jan@kassens.net>
-Jared Forsyth <jared@jaredforsyth.com>
-Jason Bonta <jbonta@gmail.com>
-Jason Trill <jason@jasontrill.com>
-Jean Lauliac <lauliacj@gmail.com>
-Jeff Barczewski <jeff.barczewski@gmail.com>
-Jeff Carpenter <gcarpenterv@gmail.com>
-Jeff Morrison <jeff@anafx.com>
-Jeff Welch <whatthejeff@gmail.com>
-Jeffrey Lin <lin.jeffrey@gmail.com>
-Jignesh Kakadiya <jigneshhk1992@gmail.com>
-Jing Chen <jingc@fb.com>
-Johannes Baiter <johannes.baiter@gmail.com>
-John Watson <jwatson@fb.com>
-Jon Beebe <jon.beebe@daveramsey.com>
-Jonas Enlund <jonas.enlund@gmail.com>
-Jonas Gebhardt <jonas@instagram.com>
-Jonathan Hsu <jhiswin@gmail.com>
-Jordan Walke <jordojw@gmail.com>
-Josh Bassett <josh.bassett@gmail.com>
-Josh Duck <josh@fb.com>
-Josh Yudaken <yud@instagram.com>
-Joshua Ma <me@joshma.com>
-Julen Ruiz Aizpuru <julenx@gmail.com>
-Jun Wu <quark@lihdd.net>
-Juraj Dudak <jdudak@fb.com>
-Justin Jaffray <justinjaffray@khanacademy.org>
-Karl Mikkelsen <karl@kingkarl.com>
-Keito Uchiyama <projects@keito.me>
-Kit Randel <kit@nocturne.net.nz>
-Kunal Mehta <k.mehta@berkeley.edu>
-Kyle Mathews <mathews.kyle@gmail.com>
-Laurence Rowe <l@lrowe.co.uk>
-Levi McCallum <levi@levimccallum.com>
-Lily <qvang.j@gmail.com>
-Logan Allen <loganfynne@gmail.com>
-Luigy Leon <luichi.19@gmail.com>
-Marcin Kwiatkowski <marcin.kwiatkowski@hotmail.com>
-Marcin Szczepanski <marcins@gmail.com>
-Mariano Desanze <protronm@gmail.com>
-Mark Richardson <echo@fb.com>
-Marshall Roch <mroch@fb.com>
-Martin Andert <mandert@gmail.com>
-Martin Konicek <mkonicek@fb.com>
-Mathieu M-Gosselin <mathieumg@gmail.com>
-Matt Harrison <mt.harrison86@gmail.com>
-Matthew Dapena-Tretter <m@tthewwithanm.com>
-Matti Nelimarkka <matti.nelimarkka@hiit.fi>
-Michal Srb <xixixao@seznam.cz>
-Mouad Debbar <mdebbar@fb.com>
-Nadeesha Cabral <nadeesha.cabral@gmail.com>
-Nate Hunzaker <nate.hunzaker@gmail.com>
-Nicholas Bergson-Shilcock <me@nicholasbs.net>
-Nick Gavalas <njg57@cornell.edu>
-Nick Thompson <ncthom91@gmail.com>
-Niklas Boström <nbostrom@gmail.com>
-Owen Coutts <owenc@fb.com>
-Pascal Hartig <passy@twitter.com>
-Paul O’Shannessy <paul@oshannessy.com>
-Paul Seiffert <paul.seiffert@gmail.com>
-Paul Shen <paul@mnml0.com>
-Pete Hunt <floydophone@gmail.com>
-Peter Cottle <pcottle@fb.com>
-Petri Lievonen <plievone@cc.hut.fi>
-Pieter Vanderwerff <me@pieter.io>
-Rajiv Tirumalareddy <rajivtreddy@gmail.com>
-Randall Randall <randall@randallsquared.com>
-Ray <ray@tomo.im>
-Richard D. Worth <rdworth@gmail.com>
-Richard Feldman <richard.t.feldman@gmail.com>
-Richard Livesey <Livesey7@hotmail.co.uk>
-Ryan Seddon <seddon.ryan@gmail.com>
-Sahat Yalkabov <sakhat@gmail.com>
-Sander Spies <sandermail@gmail.com>
-Sean Kinsey <oyvind@fb.com>
-Sebastian Markbåge <sebastian@calyptus.eu>
-Shaun Trennery <shaun.trennery@gmail.com>
-Simon Højberg <r.hackr@gmail.com>
-Stefan Dombrowski <sdo451@gmail.com>
-Stephen Murphy <smurphy3@apple.com>
-Stoyan Stefanov <ssttoo@ymail.com>
-Sundeep Malladi <sundeep.malladi@gmail.com>
-Sven Helmberger <fforw@gmx.de>
-Thomas Aylott <oblivious@subtlegradient.com>
-Thomas Boyt <thomas.boyt@venmo.com>
-Thomas Shaddox <thomas@heyzap.com>
-Thomas Shafer <thomasjshafer@gmail.com>
-Timothy Yung <yungsters@gmail.com>
-Tom Haggie <thaggie@gmail.com>
-Tom Occhino <tomocchino@gmail.com>
-Ville Immonen <ville.immonen@iki.fi>
-Vjeux <vjeuxx@gmail.com>
-Volkan Unsal <spocksplanet@gmail.com>
-Wayne Larsen <wayne@larsen.st>
-Wincent Colaiuta <win@wincent.com>
-Yuriy Dybskiy <yuriy@dybskiy.com>
-Yuval Dekel <thedekel@fb.com>
-Zach Bruggeman <mail@bruggie.com>
-davidxi <davidgraycn@gmail.com>
-imagentleman <imagentlemail@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49795d8eb51..5953fafc278 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,2406 @@
+## 19.2.1 (Dec 3, 2025)
+
+### React Server Components
+
+- Bring React Server Component fixes to Server Actions (@sebmarkbage [#35277](https://github.com/facebook/react/pull/35277))
+
+## 19.2.0 (October 1st, 2025)
+
+Below is a list of all new features, APIs, and bug fixes.
+
+Read the [React 19.2 release post](https://react.dev/blog/2025/10/01/react-19-2) for more information.
+
+### New React Features
+
+- [`<Activity>`](https://react.dev/reference/react/Activity): A new API to hide and restore the UI and internal state of its children.
+- [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) is a React Hook that lets you extract non-reactive logic into an [Effect Event](https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event).
+- [`cacheSignal`](https://react.dev/reference/react/cacheSignal) (for RSCs) lets your know when the `cache()` lifetime is over.
+- [React Performance tracks](https://react.dev/reference/dev-tools/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools
+
+### New React DOM Features
+
+- Added resume APIs for partial pre-rendering with Web Streams:
+  - [`resume`](https://react.dev/reference/react-dom/server/resume): to resume a prerender to a stream.
+  - [`resumeAndPrerender`](https://react.dev/reference/react-dom/static/resumeAndPrerender): to resume a prerender to HTML.
+- Added resume APIs for partial pre-rendering with Node Streams:
+  - [`resumeToPipeableStream`](https://react.dev/reference/react-dom/server/resumeToPipeableStream): to resume a prerender to a stream.
+  - [`resumeAndPrerenderToNodeStream`](https://react.dev/reference/react-dom/static/resumeAndPrerenderToNodeStream): to resume a prerender to HTML.
+- Updated [`prerender`](https://react.dev/reference/react-dom/static/prerender) APIs to return a `postponed` state that can be passed to the `resume` APIs.
+
+### Notable changes
+
+- React DOM now batches suspense boundary reveals, matching the behavior of client side rendering. This change is especially noticeable when animating the reveal of Suspense boundaries e.g. with the upcoming `<ViewTransition>` Component. React will batch as much reveals as possible before the first paint while trying to hit popular first-contentful paint metrics.
+- Add Node Web Streams (`prerender`, `renderToReadableStream`) to server-side-rendering APIs for Node.js
+- Use underscore instead of `:` IDs generated by useId
+
+### All Changes
+
+#### React
+
+- `<Activity />` was developed over many years, starting before `ClassComponent.setState` (@acdlite @sebmarkbage and many others)
+- Stringify context as "SomeContext" instead of "SomeContext.Provider" (@kassens [#33507](https://github.com/facebook/react/pull/33507))
+- Include stack of cause of React instrumentation errors with `%o` placeholder (@eps1lon [#34198](https://github.com/facebook/react/pull/34198))
+- Fix infinite `useDeferredValue` loop in popstate event (@acdlite [#32821](https://github.com/facebook/react/pull/32821))
+- Fix a bug when an initial value was passed to `useDeferredValue` (@acdlite [#34376](https://github.com/facebook/react/pull/34376))
+- Fix a crash when submitting forms with Client Actions (@sebmarkbage [#33055](https://github.com/facebook/react/pull/33055))
+- Hide/unhide the content of dehydrated suspense boundaries if they resuspend (@sebmarkbage [#32900](https://github.com/facebook/react/pull/32900))
+- Avoid stack overflow on wide trees during Hot Reload (@sophiebits [#34145](https://github.com/facebook/react/pull/34145))
+- Improve Owner and Component stacks in various places (@sebmarkbage, @eps1lon: [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723))
+- Add `cacheSignal` (@sebmarkbage [#33557](https://github.com/facebook/react/pull/33557))
+
+#### React DOM
+
+- Block on Suspensey Fonts during reveal of server-side-rendered content (@sebmarkbage [#33342](https://github.com/facebook/react/pull/33342))
+- Use underscore instead of `:` for IDs generated by `useId` (@sebmarkbage, @eps1lon: [#32001](https://github.com/facebook/react/pull/32001), [https://github.com/facebook/react/pull/33342](https://github.com/facebook/react/pull/33342)[#33099](https://github.com/facebook/react/pull/33099), [#33422](https://github.com/facebook/react/pull/33422))
+- Stop warning when ARIA 1.3 attributes are used (@Abdul-Omira [#34264](https://github.com/facebook/react/pull/34264))
+- Allow `nonce` to be used on hoistable styles (@Andarist [#32461](https://github.com/facebook/react/pull/32461))
+- Warn for using a React owned node as a Container if it also has text content (@sebmarkbage [#32774](https://github.com/facebook/react/pull/32774))
+- s/HTML/text for for error messages if text hydration mismatches (@rickhanlonii [#32763](https://github.com/facebook/react/pull/32763))
+- Fix a bug with `React.use` inside `React.lazy`\-ed Component (@hi-ogawa [#33941](https://github.com/facebook/react/pull/33941))
+- Enable the `progressiveChunkSize` option for server-side-rendering APIs (@sebmarkbage [#33027](https://github.com/facebook/react/pull/33027))
+- Fix a bug with deeply nested Suspense inside Suspense fallback when server-side-rendering (@gnoff [#33467](https://github.com/facebook/react/pull/33467))
+- Avoid hanging when suspending after aborting while rendering (@gnoff [#34192](https://github.com/facebook/react/pull/34192))
+- Add Node Web Streams to server-side-rendering APIs for Node.js (@sebmarkbage [#33475](https://github.com/facebook/react/pull/33475))
+
+#### React Server Components
+
+- Preload `<img>` and `<link>` using hints before they're rendered (@sebmarkbage [#34604](https://github.com/facebook/react/pull/34604))
+- Log error if production elements are rendered during development (@eps1lon [#34189](https://github.com/facebook/react/pull/34189))
+- Fix a bug when returning a Temporary reference (e.g. a Client Reference) from Server Functions (@sebmarkbage [#34084](https://github.com/facebook/react/pull/34084), @denk0403 [#33761](https://github.com/facebook/react/pull/33761))
+- Pass line/column to `filterStackFrame` (@eps1lon [#33707](https://github.com/facebook/react/pull/33707))
+- Support Async Modules in Turbopack Server References (@lubieowoce [#34531](https://github.com/facebook/react/pull/34531))
+- Add support for .mjs file extension in Webpack (@jennyscript [#33028](https://github.com/facebook/react/pull/33028))
+- Fix a wrong missing key warning (@unstubbable [#34350](https://github.com/facebook/react/pull/34350))
+- Make console log resolve in predictable order (@sebmarkbage [#33665](https://github.com/facebook/react/pull/33665))
+
+#### React Reconciler
+
+- [createContainer](https://github.com/facebook/react/blob/v19.2.0/packages/react-reconciler/src/ReactFiberReconciler.js#L255-L261) and [createHydrationContainer](https://github.com/facebook/react/blob/v19.2.0/packages/react-reconciler/src/ReactFiberReconciler.js#L305-L312) had their parameter order adjusted after `on*` handlers to account for upcoming experimental APIs
+
+## 19.1.2 (Dec 3, 2025)
+
+### React Server Components
+
+- Bring React Server Component fixes to Server Actions (@sebmarkbage [#35277](https://github.com/facebook/react/pull/35277))
+
+## 19.1.1 (July 28, 2025)
+
+### React
+* Fixed Owner Stacks to work with ES2015 function.name semantics ([#33680](https://github.com/facebook/react/pull/33680) by @hoxyq)
+
+## 19.1.0 (March 28, 2025)
+
+### Owner Stack
+
+An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to enhance error overlays or other development tools. Owner Stacks are only available in development builds. Component Stacks in production are unchanged.
+
+* An Owner Stack is a development-only stack trace that helps identify which components are responsible for rendering a particular component. An Owner Stack is distinct from a Component Stacks, which shows the hierarchy of components leading to an error.
+* The [captureOwnerStack API](https://react.dev/reference/react/captureOwnerStack) is only available in development mode and returns a Owner Stack, if available. The API can be used to enhance error overlays or log component relationships when debugging. [#29923](https://github.com/facebook/react/pull/29923), [#32353](https://github.com/facebook/react/pull/32353), [#30306](https://github.com/facebook/react/pull/30306),
+[#32538](https://github.com/facebook/react/pull/32538), [#32529](https://github.com/facebook/react/pull/32529), [#32538](https://github.com/facebook/react/pull/32538)
+
+### React
+* Enhanced support for Suspense boundaries to be used anywhere, including the client, server, and during hydration. [#32069](https://github.com/facebook/react/pull/32069), [#32163](https://github.com/facebook/react/pull/32163), [#32224](https://github.com/facebook/react/pull/32224), [#32252](https://github.com/facebook/react/pull/32252)
+* Reduced unnecessary client rendering through improved hydration scheduling [#31751](https://github.com/facebook/react/pull/31751)
+* Increased priority of client rendered Suspense boundaries [#31776](https://github.com/facebook/react/pull/31776)
+* Fixed frozen fallback states by rendering unfinished Suspense boundaries on the client. [#31620](https://github.com/facebook/react/pull/31620)
+* Reduced garbage collection pressure by improving Suspense boundary retries. [#31667](https://github.com/facebook/react/pull/31667)
+* Fixed erroneous “Waiting for Paint” log when the passive effect phase was not delayed [#31526](https://github.com/facebook/react/pull/31526)
+* Fixed a regression causing key warnings for flattened positional children in development mode. [#32117](https://github.com/facebook/react/pull/32117)
+* Updated `useId` to use valid CSS selectors, changing format from `:r123:` to `«r123»`. [#32001](https://github.com/facebook/react/pull/32001)
+* Added a dev-only warning for null/undefined created in useEffect, useInsertionEffect, and useLayoutEffect. [#32355](https://github.com/facebook/react/pull/32355)
+* Fixed a bug where dev-only methods were exported in production builds. React.act is no longer available in production builds. [#32200](https://github.com/facebook/react/pull/32200)
+* Improved consistency across prod and dev to improve compatibility with Google Closure Compiler and bindings [#31808](https://github.com/facebook/react/pull/31808)
+* Improve passive effect scheduling for consistent task yielding. [#31785](https://github.com/facebook/react/pull/31785)
+* Fixed asserts in React Native when passChildrenWhenCloningPersistedNodes is enabled for OffscreenComponent rendering. [#32528](https://github.com/facebook/react/pull/32528)
+* Fixed component name resolution for Portal [#32640](https://github.com/facebook/react/pull/32640)
+* Added support for beforetoggle and toggle events on the dialog element. [#32479](https://github.com/facebook/react/pull/32479)
+
+### React DOM
+* Fixed double warning when the `href` attribute is an empty string [#31783](https://github.com/facebook/react/pull/31783)
+ * Fixed an edge case where `getHoistableRoot()` didn’t work properly when the container was a Document [#32321](https://github.com/facebook/react/pull/32321)
+* Removed support for using HTML comments (e.g. `<!-- -->`) as a DOM container. [#32250](https://github.com/facebook/react/pull/32250)
+* Added support for `<script>` and `<template>` tags to be nested within `<select>` tags. [#31837](https://github.com/facebook/react/pull/31837)
+* Fixed responsive images to be preloaded as HTML instead of headers [#32445](https://github.com/facebook/react/pull/32445)
+
+### use-sync-external-store
+* Added `exports` field to `package.json` for `use-sync-external-store` to support various entrypoints. [#25231](https://github.com/facebook/react/pull/25231)
+
+### React Server Components
+* Added `unstable_prerender`, a new experimental API for prerendering React Server Components on the server [#31724](https://github.com/facebook/react/pull/31724)
+* Fixed an issue where streams would hang when receiving new chunks after a global error [#31840](https://github.com/facebook/react/pull/31840), [#31851](https://github.com/facebook/react/pull/31851)
+* Fixed an issue where pending chunks were counted twice. [#31833](https://github.com/facebook/react/pull/31833)
+* Added support for streaming in edge environments [#31852](https://github.com/facebook/react/pull/31852)
+* Added support for sending custom error names from a server so that they are available in the client for console replaying. [#32116](https://github.com/facebook/react/pull/32116)
+* Updated the server component wire format to remove IDs for hints and console.log because they have no return value [#31671](https://github.com/facebook/react/pull/31671)
+* Exposed `registerServerReference` in client builds to handle server references in different environments. [#32534](https://github.com/facebook/react/pull/32534)
+* Added react-server-dom-parcel package which integrates Server Components with the [Parcel bundler](https://parceljs.org/) [#31725](https://github.com/facebook/react/pull/31725), [#32132](https://github.com/facebook/react/pull/32132), [#31799](https://github.com/facebook/react/pull/31799), [#32294](https://github.com/facebook/react/pull/32294), [#31741](https://github.com/facebook/react/pull/31741)
+
+## 19.0.1 (Dec 3, 2025)
+
+### React Server Components
+
+- Bring React Server Component fixes to Server Actions (@sebmarkbage [#35277](https://github.com/facebook/react/pull/35277))
+
+## 19.0.0 (December 5, 2024)
+
+Below is a list of all new features, APIs, deprecations, and breaking changes. Read [React 19 release post](https://react.dev/blog/2024/04/25/react-19) and [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) for more information.
+
+> Note: To help make the upgrade to React 19 easier, we’ve published a react@18.3 release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. We recommend upgrading to React 18.3.1 first to help identify any issues before upgrading to React 19.
+
+### New Features
+
+#### React
+
+* Actions: `startTransition` can now accept async functions. Functions passed to `startTransition` are called “Actions”. A given Transition can include one or more Actions which update state in the background and update the UI with one commit. In addition to updating state, Actions can now perform side effects including async requests, and the Action will wait for the work to finish before finishing the Transition. This feature allows Transitions to include side effects like `fetch()` in the pending state, and provides support for error handling, and optimistic updates.  
+* `useActionState`: is a new hook to order Actions inside of a Transition with access to the state of the action, and the pending state. It accepts a reducer that can call Actions, and the initial state used for first render. It also accepts an optional string that is used if the action is passed to a form `action` prop to support progressive enhancement in forms.  
+* `useOptimistic`: is a new hook to update state while a Transition is in progress. It returns the state, and a set function that can be called inside a transition to “optimistically” update the state to expected final value immediately while the Transition completes in the background. When the transition finishes, the state is updated to the new value.  
+* `use`: is a new API that allows reading resources in render. In React 19, `use` accepts a promise or Context. If provided a promise, `use` will suspend until a value is resolved. `use` can only be used in render but can be called conditionally.  
+* `ref` as a prop: Refs can now be used as props, removing the need for `forwardRef`.  
+* **Suspense sibling pre-warming**: When a component suspends, React will immediately commit the fallback of the nearest Suspense boundary, without waiting for the entire sibling tree to render. After the fallback commits, React will schedule another render for the suspended siblings to “pre-warm” lazy requests.
+
+#### React DOM Client
+
+* `<form> action` prop: Form Actions allow you to manage forms automatically and integrate with `useFormStatus`. When a `<form> action` succeeds, React will automatically reset the form for uncontrolled components. The form can be reset manually with the new `requestFormReset` API.  
+* `<button> and <input> formAction` prop: Actions can be passed to the `formAction` prop to configure form submission behavior. This allows using different Actions depending on the input.  
+* `useFormStatus`: is a new hook that provides the status of the parent `<form> action`, as if the form was a Context provider. The hook returns the values: `pending`, `data`, `method`, and `action`.  
+* Support for Document Metadata: We’ve added support for rendering document metadata tags in components natively. React will automatically hoist them into the `<head>` section of the document.  
+* Support for Stylesheets: React 19 will ensure stylesheets are inserted into the `<head>` on the client before revealing the content of a Suspense boundary that depends on that stylesheet.  
+* Support for async scripts: Async scripts can be rendered anywhere in the component tree and React will handle ordering and deduplication.  
+* Support for preloading resources: React 19 ships with `preinit`, `preload`, `prefetchDNS`, and `preconnect` APIs to optimize initial page loads by moving discovery of additional resources like fonts out of stylesheet loading. They can also be used to prefetch resources used by an anticipated navigation.
+
+#### React DOM Server
+
+* Added `prerender` and `prerenderToNodeStream` APIs for static site generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. Unlike `renderToString`, they wait for data to load for HTML generation.
+
+#### React Server Components
+
+* RSC features such as directives, server components, and server functions are now stable. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a react-server export condition for use in frameworks that support the Full-stack React Architecture. The underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. See [docs](https://19.react.dev/reference/rsc/server-components) for how to support React Server Components.
+
+### Deprecations
+
+* Deprecated: `element.ref` access: React 19 supports ref as a prop, so we’re deprecating `element.ref` in favor of `element.props.ref`. Accessing will result in a warning.  
+* `react-test-renderer`: In React 19, react-test-renderer logs a deprecation warning and has switched to concurrent rendering for web usage. We recommend migrating your tests to  [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro)
+
+### Breaking Changes
+
+React 19 brings in a number of breaking changes, including the removals of long-deprecated APIs. We recommend first upgrading to `18.3.1`, where we've added additional deprecation warnings. Check out the [upgrade guide](https://19.react.dev/blog/2024/04/25/react-19-upgrade-guide) for more details and guidance on codemodding.
+
+### React
+
+* New JSX Transform is now required: We introduced [a new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we’re adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform.  
+* Errors in render are not re-thrown: Errors that are not caught by an Error Boundary are now reported to window.reportError. Errors that are caught by an Error Boundary are reported to console.error. We’ve introduced `onUncaughtError` and `onCaughtError` methods to `createRoot` and `hydrateRoot` to customize this error handling.  
+* Removed: `propTypes`: Using `propTypes` will now be silently ignored. If required, we recommend migrating to TypeScript or another type-checking solution.  
+* Removed: `defaultProps` for functions: ES6 default parameters can be used in place. Class components continue to support `defaultProps` since there is no ES6 alternative.  
+* Removed: `contextTypes` and `getChildContext`: Legacy Context for class components has been removed in favor of the `contextType` API.  
+* Removed: string refs: Any usage of string refs need to be migrated to ref callbacks.   
+* Removed: Module pattern factories: A rarely used pattern that can be migrated to regular functions.  
+* Removed: `React.createFactory`: Now that JSX is broadly supported, all `createFactory` usage can be migrated to JSX components.  
+* Removed: `react-test-renderer/shallow`: This has been a re-export of [react-shallow-renderer](https://github.com/enzymejs/react-shallow-renderer) since React 18\. If needed, you can continue to use the third-party package directly. We recommend using [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) instead.
+
+#### React DOM
+
+* Removed: `react-dom/test-utils`: We’ve moved `act` from `react-dom/test-utils` to react. All other utilities have been removed.   
+* Removed: `ReactDOM`.`render`, `ReactDOM`.`hydrate`: These have been removed in favor of the concurrent equivalents: `ReactDOM`.`createRoot` and `ReactDOM.hydrateRoot`.  
+* Removed: `unmountComponentAtNode`: Removed in favor of `root.unmount()`.  
+* Removed: `ReactDOM`.`findDOMNode`: You can replace `ReactDOM`.`findDOMNode` with DOM Refs.
+
+### Notable Changes
+
+#### React
+
+* `<Context>` as a provider: You can now render `<Context>` as a provider instead of `<Context.Provider>`.  
+* Cleanup functions for refs: When the component unmounts, React will call the cleanup function returned from the ref callback.  
+* `useDeferredValue` initial value argument: When provided, `useDeferredValue` will return the initial value for the initial render of a component, then schedule a re-render in the background with the `deferredValue` returned.  
+* Support for Custom Elements: React 19 now passes all tests on [Custom Elements Everywhere](https://custom-elements-everywhere.com/).  
+* StrictMode changes: `useMemo` and `useCallback` will now reuse the memoized results from the first render, during the second render. Additionally, StrictMode will now double-invoke ref callback functions on initial mount.  
+* UMD builds removed: To load React 19 with a script tag, we recommend using an ESM-based CDN such as [esm.sh](http://esm.sh).
+
+#### React DOM
+
+* Diffs for hydration errors: In the case of a mismatch, React 19 logs a single error with a diff of the mismatched content.  
+* Compatibility with third-party scripts and extensions: React will now force a client re-render to fix up any mismatched content caused by elements inserted by third-party JS. 
+
+### TypeScript Changes
+
+The most common changes can be codemodded with `npx types-react-codemod@latest preset-19 ./path-to-your-react-ts-files`.
+
+* Removed deprecated TypeScript types:   
+  * `ReactChild` (replacement: `React.ReactElement | number | string)`  
+  * `ReactFragment` (replacement: `Iterable<React.ReactNode>`)  
+  * `ReactNodeArray` (replacement: `ReadonlyArray<React.ReactNode>`)  
+  * `ReactText` (replacement: `number | string`)  
+  * `VoidFunctionComponent` (replacement: `FunctionComponent`)  
+  * `VFC` (replacement: `FC`)  
+  * Moved to `prop-types`: `Requireable`, `ValidationMap`, `Validator`, `WeakValidationMap`  
+  * Moved to `create-react-class`: `ClassicComponentClass`, `ClassicComponent`, `ClassicElement`, `ComponentSpec`, `Mixin`, `ReactChildren`, `ReactHTML`, `ReactSVG`, `SFCFactory`  
+* Disallow implicit return in refs: refs can now accept cleanup functions. When you return something else, we can’t tell if you intentionally returned something not meant to clean up or returned the wrong value. Implicit returns of anything but functions will now error.   
+* Require initial argument to `useRef`: The initial argument is now required to match `useState`, `createContext` etc  
+* Refs are mutable by default: Ref objects returned from `useRef()` are now always mutable instead of sometimes being immutable. This feature was too confusing for users and conflicted with legit cases where refs were managed by React and manually written to.  
+* Strict `ReactElement` typing: The props of React elements now default to `unknown` instead of `any` if the element is typed as `ReactElement`  
+* JSX namespace in TypeScript: The global `JSX` namespace is removed to improve interoperability with other libraries using JSX. Instead, the JSX namespace is available from the React package: `import { JSX } from 'react'`  
+* Better `useReducer` typings: Most `useReducer` usage should not require explicit type arguments.  
+  For example,  
+  ```diff
+  -useReducer<React.Reducer<State, Action>>(reducer)
+  +useReducer(reducer)
+  ```
+  or
+  ```diff
+  -useReducer<React.Reducer<State, Action>>(reducer)
+  +useReducer<State, Action>(reducer)
+  ```
+
+### All Changes
+
+#### React
+
+* Add support for async Actions ([\#26621](https://github.com/facebook/react/pull/26621), [\#26726](https://github.com/facebook/react/pull/26726), [\#28078](https://github.com/facebook/react/pull/28078), [\#28097](https://github.com/facebook/react/pull/28097), [\#29226](https://github.com/facebook/react/pull/29226), [\#29618](https://github.com/facebook/react/pull/29618), [\#29670](https://github.com/facebook/react/pull/29670), [\#26716](https://github.com/facebook/react/pull/26716) by [@acdlite](https://github.com/acdlite) and [@sebmarkbage](https://github.com/sebmarkbage))  
+* Add `useActionState()` hook to update state based on the result of a Form Action ([\#27270](https://github.com/facebook/react/pull/27270), [\#27278](https://github.com/facebook/react/pull/27278), [\#27309](https://github.com/facebook/react/pull/27309), [\#27302](https://github.com/facebook/react/pull/27302), [\#27307](https://github.com/facebook/react/pull/27307), [\#27366](https://github.com/facebook/react/pull/27366), [\#27370](https://github.com/facebook/react/pull/27370), [\#27321](https://github.com/facebook/react/pull/27321), [\#27374](https://github.com/facebook/react/pull/27374), [\#27372](https://github.com/facebook/react/pull/27372), [\#27397](https://github.com/facebook/react/pull/27397), [\#27399](https://github.com/facebook/react/pull/27399), [\#27460](https://github.com/facebook/react/pull/27460), [\#28557](https://github.com/facebook/react/pull/28557), [\#27570](https://github.com/facebook/react/pull/27570), [\#27571](https://github.com/facebook/react/pull/27571), [\#28631](https://github.com/facebook/react/pull/28631), [\#28788](https://github.com/facebook/react/pull/28788), [\#29694](https://github.com/facebook/react/pull/29694), [\#29695](https://github.com/facebook/react/pull/29695), [\#29694](https://github.com/facebook/react/pull/29694), [\#29665](https://github.com/facebook/react/pull/29665), [\#28232](https://github.com/facebook/react/pull/28232), [\#28319](https://github.com/facebook/react/pull/28319) by [@acdlite](https://github.com/acdlite), [@eps1lon](https://github.com/eps1lon), and [@rickhanlonii](https://github.com/rickhanlonii))  
+* Add `use()` API to read resources in render ([\#25084](https://github.com/facebook/react/pull/25084), [\#25202](https://github.com/facebook/react/pull/25202), [\#25207](https://github.com/facebook/react/pull/25207), [\#25214](https://github.com/facebook/react/pull/25214), [\#25226](https://github.com/facebook/react/pull/25226), [\#25247](https://github.com/facebook/react/pull/25247), [\#25539](https://github.com/facebook/react/pull/25539), [\#25538](https://github.com/facebook/react/pull/25538), [\#25537](https://github.com/facebook/react/pull/25537), [\#25543](https://github.com/facebook/react/pull/25543), [\#25561](https://github.com/facebook/react/pull/25561), [\#25620](https://github.com/facebook/react/pull/25620), [\#25615](https://github.com/facebook/react/pull/25615), [\#25922](https://github.com/facebook/react/pull/25922), [\#25641](https://github.com/facebook/react/pull/25641), [\#25634](https://github.com/facebook/react/pull/25634), [\#26232](https://github.com/facebook/react/pull/26232), [\#26536](https://github.com/facebook/react/pull/26535), [\#26739](https://github.com/facebook/react/pull/26739), [\#28233](https://github.com/facebook/react/pull/28233) by [@acdlite](https://github.com/acdlite), [@MofeiZ](https://github.com/mofeiZ), [@sebmarkbage](https://github.com/sebmarkbage), [@sophiebits](https://github.com/sophiebits), [@eps1lon](https://github.com/eps1lon), and [@hansottowirtz](https://github.com/hansottowirtz))  
+* Add `useOptimistic()` hook to display mutated state optimistically during an async mutation ([\#26740](https://github.com/facebook/react/pull/26740), [\#26772](https://github.com/facebook/react/pull/26772), [\#27277](https://github.com/facebook/react/pull/27277), [\#27453](https://github.com/facebook/react/pull/27453), [\#27454](https://github.com/facebook/react/pull/27454), [\#27936](https://github.com/facebook/react/pull/27936) by [@acdlite](https://github.com/acdlite))  
+* Added an `initialValue` argument to `useDeferredValue()` hook ([\#27500](https://github.com/facebook/react/pull/27500), [\#27509](https://github.com/facebook/react/pull/27509), [\#27512](https://github.com/facebook/react/pull/27512), [\#27888](https://github.com/facebook/react/pull/27888), [\#27550](https://github.com/facebook/react/pull/27550) by [@acdlite](https://github.com/acdlite))  
+* Support refs as props, warn on `element.ref` access ([\#28348](https://github.com/facebook/react/pull/28348), [\#28464](https://github.com/facebook/react/pull/28464), [\#28731](https://github.com/facebook/react/pull/28731) by [@acdlite](https://github.com/acdlite))  
+* Support Custom Elements ([\#22184](https://github.com/facebook/react/pull/22184), [\#26524](https://github.com/facebook/react/pull/26524), [\#26523](https://github.com/facebook/react/pull/26523), [\#27511](https://github.com/facebook/react/pull/27511), [\#24541](https://github.com/facebook/react/pull/24541) by [@josepharhar](https://github.com/josepharhar), [@sebmarkbage](https://github.com/sebmarkbage), [@gnoff](https://github.com/gnoff) and [@eps1lon](https://github.com/eps1lon))  
+* Add ref cleanup function ([\#25686](https://github.com/facebook/react/pull/25686), [\#28883](https://github.com/facebook/react/pull/28883), [\#28910](https://github.com/facebook/react/pull/28910)  by [@sammy-SC](https://github.com/sammy-SC), [@jackpope](https://github.com/jackpope), and [@kassens](https://github.com/kassens))  
+* Sibling pre-rendering replaced by sibling pre-warming ([\#26380](https://github.com/facebook/react/pull/26380), [\#26549](https://github.com/facebook/react/pull/26549), [\#30761](https://github.com/facebook/react/pull/30761), [\#30800](https://github.com/facebook/react/pull/30800), [\#30762](https://github.com/facebook/react/pull/30762), [\#30879](https://github.com/facebook/react/pull/30879), [\#30934](https://github.com/facebook/react/pull/30934), [\#30952](https://github.com/facebook/react/pull/30952), [\#31056](https://github.com/facebook/react/pull/31056), [\#31452](https://github.com/facebook/react/pull/31452) by [@sammy-SC](https://github.com/sammy-SC), [@acdlite](https://github.com/acdlite), [@gnoff](https://github.com/gnoff), [@jackpope](https://github.com/jackpope), [@rickhanlonii](https://github.com/rickhanlonii))  
+* Don’t rethrow errors at the root ([\#28627](https://github.com/facebook/react/pull/28627), [\#28641](https://github.com/facebook/react/pull/28641) by [@sebmarkbage](https://github.com/sebmarkbage))  
+* Batch sync discrete, continuous, and default lanes ([\#25700](https://github.com/facebook/react/pull/25700) by [@tyao1](https://github.com/tyao1))  
+* Switch `<Context>` to mean `<Context.Provider>` ([\#28226](https://github.com/facebook/react/pull/28226) by [@gaearon](https://github.com/gaearon))  
+* Changes to *StrictMode*  
+  * Handle `info`, `group`, and `groupCollapsed` in *StrictMode* logging ([\#25172](https://github.com/facebook/react/pull/25172) by [@timneutkens](https://github.com/timneutkens))  
+  * Refs are now attached/detached/attached in *StrictMode* ([\#25049](https://github.com/facebook/react/pull/25049) by [@sammy-SC](https://github.com/sammy-SC))  
+  * Fix `useSyncExternalStore()` hydration in *StrictMode* ([\#26791](https://github.com/facebook/react/pull/26791) by [@sophiebits](https://github.com/sophiebits))  
+  * Always trigger `componentWillUnmount()` in *StrictMode* ([\#26842](https://github.com/facebook/react/pull/26842) by [@tyao1](https://github.com/tyao1))  
+  * Restore double invoking `useState()` and `useReducer()` initializer functions in *StrictMode* ([\#28248](https://github.com/facebook/react/pull/28248) by [@eps1lon](https://github.com/eps1lon))  
+  * Reuse memoized result from first pass ([\#25583](https://github.com/facebook/react/pull/25583) by [@acdlite](https://github.com/acdlite))  
+  * Fix `useId()` in *StrictMode* ([\#25713](https://github.com/facebook/react/pull/25713) by [@gnoff](https://github.com/gnoff))  
+  * Add component name to *StrictMode* error messages ([\#25718](https://github.com/facebook/react/pull/25718) by [@sammy-SC](https://github.com/sammy-SC))  
+* Add support for rendering BigInt ([\#24580](https://github.com/facebook/react/pull/24580) by [@eps1lon](https://github.com/eps1lon))  
+* `act()` no longer checks `shouldYield` which can be inaccurate in test environments ([\#26317](https://github.com/facebook/react/pull/26317) by [@acdlite](https://github.com/acdlite))  
+* Warn when keys are spread with props ([\#25697](https://github.com/facebook/react/pull/25697), [\#26080](https://github.com/facebook/react/pull/26080) by [@sebmarkbage](https://github.com/sebmarkbage) and [@kassens](https://github.com/kassens))  
+* Generate sourcemaps for production build artifacts ([\#26446](https://github.com/facebook/react/pull/26446) by [@markerikson](https://github.com/markerikson))  
+* Improve stack diffing algorithm ([\#27132](https://github.com/facebook/react/pull/27132) by [@KarimP](https://github.com/KarimP))  
+* Suspense throttling lowered from 500ms to 300ms ([\#26803](https://github.com/facebook/react/pull/26803) by [@acdlite](https://github.com/acdlite))  
+* Lazily propagate context changes ([\#20890](https://github.com/facebook/react/pull/20890) by [@acdlite](https://github.com/acdlite) and [@gnoff](https://github.com/gnoff))  
+* Immediately rerender pinged fiber ([\#25074](https://github.com/facebook/react/pull/25074) by [@acdlite](https://github.com/acdlite))  
+* Move update scheduling to microtask ([\#26512](https://github.com/facebook/react/pull/26512) by [@acdlite](https://github.com/acdlite))  
+* Consistently apply throttled retries ([\#26611](https://github.com/facebook/react/pull/26611), [\#26802](https://github.com/facebook/react/pull/26802) by [@acdlite](https://github.com/acdlite))  
+* Suspend Thenable/Lazy if it's used in React.Children ([\#28284](https://github.com/facebook/react/pull/28284) by [@sebmarkbage](https://github.com/sebmarkbage))  
+* Detect infinite update loops caused by render phase updates ([\#26625](https://github.com/facebook/react/pull/26625) by [@acdlite](https://github.com/acdlite))  
+* Update conditional hooks warning ([\#29626](https://github.com/facebook/react/pull/29626) by [@sophiebits](https://github.com/sophiebits))  
+* Update error URLs to go to new docs ([\#27240](https://github.com/facebook/react/pull/27240) by [@rickhanlonii](https://github.com/rickhanlonii))  
+* Rename the `react.element` symbol to `react.transitional.element` ([\#28813](https://github.com/facebook/react/pull/28813) by [@sebmarkbage](https://github.com/sebmarkbage))  
+* Fix crash when suspending in shell during `useSyncExternalStore()` re-render ([\#27199](https://github.com/facebook/react/pull/27199) by [@acdlite](https://github.com/acdlite))  
+* Fix incorrect “detected multiple renderers" error in tests ([\#22797](https://github.com/facebook/react/pull/22797) by [@eps1lon](https://github.com/eps1lon))  
+* Fix bug where effect cleanup may be called twice after bailout ([\#26561](https://github.com/facebook/react/pull/26561) by [@acdlite](https://github.com/acdlite))  
+* Fix suspending in shell during discrete update ([\#25495](https://github.com/facebook/react/pull/25495) by [@acdlite](https://github.com/acdlite))  
+* Fix memory leak after repeated setState bailouts ([\#25309](https://github.com/facebook/react/pull/25309) by [@acdlite](https://github.com/acdlite))  
+* Fix `useSyncExternalStore()` dropped update when state is dispatched in render phase ([\#25578](https://github.com/facebook/react/pull/25578) by [@pandaiolo](https://github.com/pandaiolo))  
+* Fix logging when rendering a lazy fragment ([\#30372](https://github.com/facebook/react/pull/30372) by [@tom-sherman](https://github.com/tom-sherman))  
+* Remove string refs ([\#25383](https://github.com/facebook/react/pull/25383), [\#28322](https://github.com/facebook/react/pull/28322) by [@eps1lon](https://github.com/eps1lon) and [@acdlite](https://github.com/acdlite))  
+* Remove Legacy Context (\#30319 by [@kassens](https://github.com/kassens))  
+* Remove `RefreshRuntime.findAffectedHostInstances` ([\#30538](https://github.com/facebook/react/pull/30538) by [@gaearon](https://github.com/gaearon))  
+* Remove client caching from `cache()` API ([\#27977](https://github.com/facebook/react/pull/27977), [\#28250](https://github.com/facebook/react/pull/28250) by [@acdlite](https://github.com/acdlite) and [@gnoff](https://github.com/gnoff))  
+* Remove `propTypes` ([\#28324](https://github.com/facebook/react/pull/28324), [\#28326](https://github.com/facebook/react/pull/28326) by [@gaearon](https://github.com/gaearon))  
+* Remove `defaultProps` support, except for classes ([\#28733](https://github.com/facebook/react/pull/28733) by [@acdlite](https://github.com/acdlite))  
+* Remove UMD builds ([\#28735](https://github.com/facebook/react/pull/28735) by [@gnoff](https://github.com/gnoff))  
+* Remove delay for non-transition updates ([\#26597](https://github.com/facebook/react/pull/26597) by [@acdlite](https://github.com/acdlite))  
+* Remove `createFactory` ([\#27798](https://github.com/facebook/react/pull/27798) by [@kassens](https://github.com/kassens))
+
+#### React DOM
+
+* Adds Form Actions to handle form submission ([\#26379](https://github.com/facebook/react/pull/26379), [\#26674](https://github.com/facebook/react/pull/26674), [\#26689](https://github.com/facebook/react/pull/26689), [\#26708](https://github.com/facebook/react/pull/26708), [\#26714](https://github.com/facebook/react/pull/26714),  [\#26735](https://github.com/facebook/react/pull/26735), [\#26846](https://github.com/facebook/react/pull/26846), [\#27358](https://github.com/facebook/react/pull/27358),  [\#28056](https://github.com/facebook/react/pull/28056) by [@sebmarkbage](https://github.com/sebmarkbage), [@acdlite](https://github.com/acdlite), and [@jupapios](https://github.com/jupapios))  
+* Add `useFormStatus()` hook to provide status information of the last form submission ([\#26719](https://github.com/facebook/react/pull/26719), [\#26722](https://github.com/facebook/react/pull/26722), [\#26788](https://github.com/facebook/react/pull/26788),  [\#29019](https://github.com/facebook/react/pull/29019), [\#28728](https://github.com/facebook/react/pull/28728), [\#28413](https://github.com/facebook/react/pull/28413) by [@acdlite](https://github.com/acdlite) and [@eps1lon](https://github.com/eps1lon))  
+* Support for Document Metadata. Adds `preinit`, `preinitModule`, `preconnect`, `prefetchDNS`, `preload`, and `preloadModule` APIs.  
+  * [\#25060](https://github.com/facebook/react/pull/25060), [\#25243](https://github.com/facebook/react/pull/25243), [\#25388](https://github.com/facebook/react/pull/25388), [\#25432](https://github.com/facebook/react/pull/25432), [\#25436](https://github.com/facebook/react/pull/25436), [\#25426](https://github.com/facebook/react/pull/25426), [\#25500](https://github.com/facebook/react/pull/25500), [\#25480](https://github.com/facebook/react/pull/25480), [\#25508](https://github.com/facebook/react/pull/25508), [\#25515](https://github.com/facebook/react/pull/25515), [\#25514](https://github.com/facebook/react/pull/25514), [\#25532](https://github.com/facebook/react/pull/25532), [\#25536](https://github.com/facebook/react/pull/25536), [\#25534](https://github.com/facebook/react/pull/25534), [\#25546](https://github.com/facebook/react/pull/25546), [\#25559](https://github.com/facebook/react/pull/25559), [\#25569](https://github.com/facebook/react/pull/25569), [\#25599](https://github.com/facebook/react/pull/25599), [\#25689](https://github.com/facebook/react/pull/25689), [\#26106](https://github.com/facebook/react/pull/26106), [\#26152](https://github.com/facebook/react/pull/26152), [\#26239](https://github.com/facebook/react/pull/26239), [\#26237](https://github.com/facebook/react/pull/26237), [\#26280](https://github.com/facebook/react/pull/26280), [\#26154](https://github.com/facebook/react/pull/26154), [\#26256](https://github.com/facebook/react/pull/26256), [\#26353](https://github.com/facebook/react/pull/26353), [\#26427](https://github.com/facebook/react/pull/26427), [\#26450](https://github.com/facebook/react/pull/26450), [\#26502](https://github.com/facebook/react/pull/26502),  [\#26514](https://github.com/facebook/react/pull/26514), [\#26531](https://github.com/facebook/react/pull/26531), [\#26532](https://github.com/facebook/react/pull/26532), [\#26557](https://github.com/facebook/react/pull/26557), [\#26871](https://github.com/facebook/react/pull/26871), [\#26881](https://github.com/facebook/react/pull/26881), [\#26877](https://github.com/facebook/react/pull/26877), [\#26873](https://github.com/facebook/react/pull/26873), [\#26880](https://github.com/facebook/react/pull/26880), [\#26942](https://github.com/facebook/react/pull/26942), [\#26938](https://github.com/facebook/react/pull/26938), [\#26940](https://github.com/facebook/react/pull/26940), [\#26939](https://github.com/facebook/react/pull/26939), [\#27030](https://github.com/facebook/react/pull/27030), [\#27201](https://github.com/facebook/react/pull/27201), [\#27212](https://github.com/facebook/react/pull/27212), [\#27217](https://github.com/facebook/react/pull/27217), [\#27218](https://github.com/facebook/react/pull/27218), [\#27220](https://github.com/facebook/react/pull/27220), [\#27224](https://github.com/facebook/react/pull/27224), [\#27223](https://github.com/facebook/react/pull/27223), [\#27269](https://github.com/facebook/react/pull/27269), [\#27260](https://github.com/facebook/react/pull/27260), [\#27347](https://github.com/facebook/react/pull/27347), [\#27346](https://github.com/facebook/react/pull/27346), [\#27361](https://github.com/facebook/react/pull/27361), [\#27400](https://github.com/facebook/react/pull/27400), [\#27541](https://github.com/facebook/react/pull/27541), [\#27610](https://github.com/facebook/react/pull/27610), [\#28110](https://github.com/facebook/react/pull/28110), [\#29693](https://github.com/facebook/react/pull/29693), [\#29732](https://github.com/facebook/react/pull/29732), [\#29811](https://github.com/facebook/react/pull/29811), [\#27586](https://github.com/facebook/react/pull/27586), [\#28069](https://github.com/facebook/react/pull/28069) by [@gnoff](https://github.com/gnoff), [@sebmarkbage](https://github.com/sebmarkbage), [@acdlite](https://github.com/acdlite), [@kassens](https://github.com/kassens), [@sokra](https://github.com/sokra), [@sweetliquid](https://github.com/sweetliquid)  
+* Add `fetchPriority` to `<img>` and `<link>` ([\#25927](https://github.com/facebook/react/pull/25927) by [@styfle](https://github.com/styfle))  
+* Add support for SVG `transformOrigin` prop ([\#26130](https://github.com/facebook/react/pull/26130) by [@arav-ind](https://github.com/arav-ind))  
+* Add support for `onScrollEnd` event ([\#26789](https://github.com/facebook/react/pull/26789) by [@devongovett](https://github.com/devongovett))  
+* Allow `<hr>` as child of `<select>` ([\#27632](https://github.com/facebook/react/pull/27632) by [@SouSingh](https://github.com/SouSingh))  
+* Add support for Popover API ([\#27981](https://github.com/facebook/react/pull/27981) by [@eps1lon](https://github.com/eps1lon))  
+* Add support for `inert` ([\#24730](https://github.com/facebook/react/pull/24730) by [@eps1lon](https://github.com/eps1lon))  
+* Add support for `imageSizes` and `imageSrcSet` ([\#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon))  
+* Synchronously flush transitions in popstate events ([\#26025](https://github.com/facebook/react/pull/26025), [\#27559](https://github.com/facebook/react/pull/27559), [\#27505](https://github.com/facebook/react/pull/27505), [\#30759](https://github.com/facebook/react/pull/30759) by [@tyao1](https://github.com/tyao1) and [@acdlite](https://github.com/acdlite))  
+* `flushSync` exhausts queue even if something throws ([\#26366](https://github.com/facebook/react/pull/26366) by [@acdlite](https://github.com/acdlite))  
+* Throw error if `react` and `react-dom` versions don’t match ([\#29236](https://github.com/facebook/react/pull/29236) by [@acdlite](https://github.com/acdlite))  
+* Ensure `srcset` and `src` are assigned last on `<img>` instances ([\#30340](https://github.com/facebook/react/pull/30340) by [@gnoff](https://github.com/gnoff))  
+* Javascript URLs are replaced with functions that throw errors ([\#26507](https://github.com/facebook/react/pull/26507), [\#29808](https://github.com/facebook/react/pull/29808) by [@sebmarkbage](https://github.com/sebmarkbage) and [@kassens](https://github.com/kassens))  
+* Treat toggle and beforetoggle as discrete events ([\#29176](https://github.com/facebook/react/pull/29176) by [@eps1lon](https://github.com/eps1lon))  
+* Filter out empty `src` and `href` attributes (unless for `<a href=”” />`) ([\#18513](https://github.com/facebook/react/pull/18513), [\#28124](https://github.com/facebook/react/pull/28124) by [@bvaughn](https://github.com/bvaughn) and [@eps1lon](https://github.com/eps1lon))  
+* Fix unitless `scale` style property ([\#25601](https://github.com/facebook/react/pull/25601) by [@JonnyBurger](https://github.com/JonnyBurger))  
+* Fix `onChange` error message for controlled `<select>` ([\#27740](https://github.com/facebook/react/pull/27740) by [@Biki-das](https://github.com/Biki-das))  
+* Fix focus restore in child windows after element reorder ([\#30951](https://github.com/facebook/react/pull/30951) by [@ling1726](https://github.com/ling1726))  
+* Remove `render`, `hydrate`, `findDOMNode`, `unmountComponentAtNode`, `unstable_createEventHandle`, `unstable_renderSubtreeIntoContainer`, and `unstable_runWithPriority`. Move `createRoot` and `hydrateRoot` to `react-dom/client`. ([\#28271](https://github.com/facebook/react/pull/28271) by [@gnoff](https://github.com/gnoff))  
+* Remove `test-utils` ([\#28541](https://github.com/facebook/react/pull/28541) by [@eps1lon](https://github.com/eps1lon))  
+* Remove `unstable_flushControlled` ([\#26397](https://github.com/facebook/react/pull/26397) by [@kassens](https://github.com/kassens))  
+* Remove legacy mode ([\#28468](https://github.com/facebook/react/pull/28468) by [@gnoff](https://github.com/gnoff))  
+* Remove `renderToStaticNodeStream()` ([\#28873](https://github.com/facebook/react/pull/28873) by @gnoff)  
+* Remove `unstable_renderSubtreeIntoContainer` ([\#29771](https://github.com/facebook/react/pull/29771) by [@kassens](https://github.com/kassens))
+
+#### React DOM Server
+
+* Stable release of React Server Components ([Many, many PRs](https://github.com/facebook/react/pulls?q=is%3Apr+is%3Aclosed+%5BFlight%5D+in%3Atitle+created%3A%3C2024-12-01+) by [@sebmarkbage](https://github.com/sebmarkbage), [@acdlite](https://github.com/acdlite), [@gnoff](https://github.com/gnoff), [@sammy-SC](https://github.com/sammy-SC), [@gaearon](https://github.com/gaearon), [@sophiebits](https://github.com/sophiebits), [@unstubbable](https://github.com/unstubbable), [@lubieowoce](https://github.com/lubieowoce))
+* Support Server Actions ([\#26124](https://github.com/facebook/react/pull/26124), [\#26632](https://github.com/facebook/react/pull/26632), [\#27459](https://github.com/facebook/react/pull/27459) by [@sebmarkbage](https://github.com/sebmarkbage) and [@acdlite](https://github.com/acdlite))  
+* Changes to SSR  
+  * Add external runtime which bootstraps hydration on the client for binary transparency ([\#25437](https://github.com/facebook/react/pull/25437), [\#26169](https://github.com/facebook/react/pull/26169), [\#25499](https://github.com/facebook/react/pull/25499) by [@MofeiZ](https://github.com/mofeiZ) and [@acdlite](https://github.com/acdlite))  
+  * Support subresource integrity for `bootstrapScripts` and `bootstrapModules` ([\#25104](https://github.com/facebook/react/pull/25104) by [@gnoff](https://github.com/gnoff))  
+  * Fix null bytes written at text chunk boundaries ([\#26228](https://github.com/facebook/react/pull/26228) by [@sophiebits](https://github.com/sophiebits))  
+  * Fix logic around attribute serialization ([\#26526](https://github.com/facebook/react/pull/26526) by [@gnoff](https://github.com/gnoff))  
+  * Fix precomputed chunk cleared on Node 18 ([\#25645](https://github.com/facebook/react/pull/25645) by [@feedthejim](https://github.com/feedthejim))  
+  * Optimize end tag chunks ([\#27522](https://github.com/facebook/react/pull/27522) by [@yujunjung](https://github.com/yujunjung))  
+  * Gracefully handle suspending in DOM configs ([\#26768](https://github.com/facebook/react/pull/26768) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Check for nullish values on ReactCustomFormAction ([\#26770](https://github.com/facebook/react/pull/26770) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Preload `bootstrapModules`, `bootstrapScripts`, and update priority queue ([\#26754](https://github.com/facebook/react/pull/26754), [\#26753](https://github.com/facebook/react/pull/26753), [\#27190](https://github.com/facebook/react/pull/27190), [\#27189](https://github.com/facebook/react/pull/27189) by [@gnoff](https://github.com/gnoff))  
+  * Client render the nearest child or parent suspense boundary if replay errors or is aborted ([\#27386](https://github.com/facebook/react/pull/27386) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Don't bail out of flushing if we still have pending root tasks ([\#27385](https://github.com/facebook/react/pull/27385) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Ensure Resumable State is Serializable ([\#27388](https://github.com/facebook/react/pull/27388) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Remove extra render pass when reverting to client render ([\#26445](https://github.com/facebook/react/pull/26445) by [@acdlite](https://github.com/acdlite))  
+  * Fix unwinding context during selective hydration ([\#25876](https://github.com/facebook/react/pull/25876) by [@tyao1](https://github.com/tyao1))  
+  * Stop flowing and then abort if a stream is cancelled ([\#27405](https://github.com/facebook/react/pull/27405) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Pass cancellation reason to abort ([\#27536](https://github.com/facebook/react/pull/27536) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Add `onHeaders` entrypoint option ([\#27641](https://github.com/facebook/react/pull/27641), [\#27712](https://github.com/facebook/react/pull/27712) by [@gnoff](https://github.com/gnoff))  
+  * Escape `<style>` and `<script>` textContent to enable rendering inner content without dangerouslySetInnerHTML ([\#28870](https://github.com/facebook/react/pull/28870), [\#28871](https://github.com/facebook/react/pull/28871) by [@gnoff](https://github.com/gnoff))  
+  * Fallback to client replaying actions for Blob serialization ([\#28987](https://github.com/facebook/react/pull/28987) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Render Suspense fallback if boundary contains new stylesheet during sync update ([\#28965](https://github.com/facebook/react/pull/28965) by [@gnoff](https://github.com/gnoff))  
+  * Fix header length tracking (\#30327 by [@gnoff](https://github.com/gnoff))  
+  * Use `srcset` to trigger load event on mount (\#30351 by [@gnoff](https://github.com/gnoff))  
+  * Don't perform work when closing stream (\#30497 by [@gnoff](https://github.com/gnoff))  
+  * Allow aborting during render (\#30488, [\#30730](https://github.com/facebook/react/pull/30730) by [@gnoff](https://github.com/gnoff))  
+  * Start initial work immediately (\#31079 by [@gnoff](https://github.com/gnoff))  
+  * A transition flowing into a dehydrated boundary no longer suspends when showing fallback ([\#27230](https://github.com/facebook/react/pull/27230) by [@acdlite](https://github.com/acdlite))  
+  * Fix selective hydration triggers false update loop error ([\#27439](https://github.com/facebook/react/pull/27439) by [@acdlite](https://github.com/acdlite))  
+  * Warn for Child Iterator of all types but allow Generator Components ([\#28853](https://github.com/facebook/react/pull/28853) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Include regular stack trace in serialized errors ([\#28684](https://github.com/facebook/react/pull/28684), [\#28738](https://github.com/facebook/react/pull/28738) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Aborting early no longer infinitely suspends ([\#24751](https://github.com/facebook/react/pull/24751) by [@sebmarkbage](https://github.com/sebmarkbage))  
+  * Fix hydration warning suppression in text comparisons ([\#24784](https://github.com/facebook/react/pull/24784) by [@gnoff](https://github.com/gnoff))  
+  * Changes to error handling in SSR
+    * Add diffs to hydration warnings ([\#28502](https://github.com/facebook/react/pull/28502), [\#28512](https://github.com/facebook/react/pull/28512) by [@sebmarkbage](https://github.com/sebmarkbage))  
+    * Make Error creation lazy ([\#24728](https://github.com/facebook/react/pull/24728) by [@sebmarkbage](https://github.com/sebmarkbage))  
+    * Remove recoverable error when a sync update flows into a dehydrated boundary ([\#25692](https://github.com/facebook/react/pull/25692) by [@sebmarkbage](https://github.com/sebmarkbage))  
+    * Don't "fix up" mismatched text content with suppressedHydrationWarning ([\#26391](https://github.com/facebook/react/pull/26391) by [@sebmarkbage](https://github.com/sebmarkbage))  
+    * Fix component stacks in errors ([\#27456](https://github.com/facebook/react/pull/27456) by [@sebmarkbage](https://github.com/sebmarkbage))  
+    * Add component stacks to `onError` ([\#27761](https://github.com/facebook/react/pull/27761), [\#27850](https://github.com/facebook/react/pull/27850) by [@gnoff](https://github.com/gnoff) and [@sebmarkbage](https://github.com/sebmarkbage))  
+    * Throw hydration mismatch errors once ([\#28502](https://github.com/facebook/react/pull/28502) by [@sebmarkbage](https://github.com/sebmarkbage))  
+* Add Bun streaming server renderer ([\#25597](https://github.com/facebook/react/pull/25597) by [@colinhacks](https://github.com/colinhacks))  
+* Add nonce support to bootstrap scripts ([\#26738](https://github.com/facebook/react/pull/26738) by [@danieltott](https://github.com/danieltott))  
+* Add `crossorigin` support to bootstrap scripts ([\#26844](https://github.com/facebook/react/pull/26844) by [@HenriqueLimas](https://github.com/HenriqueLimas))  
+* Support `nonce` and `fetchpriority` in preload links ([\#26826](https://github.com/facebook/react/pull/26826) by [@liuyenwei](https://github.com/liuyenwei))  
+* Add `referrerPolicy` to `ReactDOM.preload()` ([\#27096](https://github.com/facebook/react/pull/27096) by [@styfle](https://github.com/styfle))  
+* Add server condition for `react/jsx-dev-runtime` ([\#28921](https://github.com/facebook/react/pull/28921) by [@himself65](https://github.com/himself65))   
+* Export version ([\#29596](https://github.com/facebook/react/pull/29596) by [@unstubbable](https://github.com/unstubbable))  
+* Rename the secret export of Client and Server internals ([\#28786](https://github.com/facebook/react/pull/28786), [\#28789](https://github.com/facebook/react/pull/28789) by [@sebmarkbage](https://github.com/sebmarkbage))  
+* Remove layout effect warning on server ([\#26395](https://github.com/facebook/react/pull/26395) by [@rickhanlonii](https://github.com/rickhanlonii))  
+* Remove `errorInfo.digest` from `onRecoverableError` ([\#28222](https://github.com/facebook/react/pull/28222) by [@gnoff](https://github.com/gnoff))
+
+#### ReactTestRenderer
+
+* Add deprecation error to `react-test-renderer` on web ([\#27903](https://github.com/facebook/react/pull/27903), [\#28904](https://github.com/facebook/react/pull/28904) by [@jackpope](https://github.com/jackpope) and [@acdlite](https://github.com/acdlite))  
+* Render with ConcurrentRoot on web ([\#28498](https://github.com/facebook/react/pull/28498) by [@jackpope](https://github.com/jackpope))  
+* Remove `react-test-renderer/shallow` export ([\#25475](https://github.com/facebook/react/pull/25475), [\#28497](https://github.com/facebook/react/pull/28497) by [@sebmarkbage](https://github.com/sebmarkbage) and [@jackpope](https://github.com/jackpope))
+
+#### React Reconciler
+
+* Enable suspending commits without blocking render ([\#26398](https://github.com/facebook/react/pull/26398), [\#26427](https://github.com/facebook/react/pull/26427) by [@acdlite](https://github.com/acdlite))  
+* Remove `prepareUpdate` ([\#26583](https://github.com/facebook/react/pull/26583), [\#27409](http://github.com/facebook/react/pull/27409) by [@sebmarkbage](https://github.com/sebmarkbage) and [@sophiebits](https://github.com/sophiebits))
+
+#### React-Is
+
+* Enable tree shaking ([\#27701](https://github.com/facebook/react/pull/27701) by [@markerikson](https://github.com/markerikson))  
+* Remove `isConcurrentMode` and `isAsyncMode` methods ([\#28224](https://github.com/facebook/react/pull/28224) by @gaearon)
+
+#### useSyncExternalStore
+
+* Remove React internals access ([\#29868](https://github.com/facebook/react/pull/29868) by [@phryneas](https://github.com/phryneas))  
+* Fix stale selectors keeping previous store references ([\#25969](https://github.com/facebook/react/pull/25968) by [@jellevoost](https://github.com/jellevoost))
+
+## 18.3.1 (April 26, 2024)
+
+- Export `act` from `react` [f1338f](https://github.com/facebook/react/commit/f1338f8080abd1386454a10bbf93d67bfe37ce85)
+
+## 18.3.0 (April 25, 2024)
+
+This release is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19.
+
+Read the [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) for more info.
+
+### React
+
+- Allow writing to `this.refs` to support string ref codemod [909071](https://github.com/facebook/react/commit/9090712fd3ca4e1099e1f92e67933c2cb4f32552)
+- Warn for deprecated `findDOMNode` outside StrictMode [c3b283](https://github.com/facebook/react/commit/c3b283964108b0e8dbcf1f9eb2e7e67815e39dfb)
+- Warn for deprecated `test-utils` methods [d4ea75](https://github.com/facebook/react/commit/d4ea75dc4258095593b6ac764289f42bddeb835c)
+- Warn for deprecated Legacy Context outside StrictMode [415ee0](https://github.com/facebook/react/commit/415ee0e6ea0fe3e288e65868df2e3241143d5f7f)
+- Warn for deprecated string refs outside StrictMode [#25383](https://github.com/facebook/react/pull/25383)
+- Warn for deprecated `defaultProps` for function components [#25699](https://github.com/facebook/react/pull/25699)
+- Warn when spreading `key` [#25697](https://github.com/facebook/react/pull/25697)
+- Warn when using `act` from `test-utils` [d4ea75](https://github.com/facebook/react/commit/d4ea75dc4258095593b6ac764289f42bddeb835c)
+
+### React DOM
+- Warn for deprecated `unmountComponentAtNode` [8a015b](https://github.com/facebook/react/commit/8a015b68cc060079878e426610e64e86fb328f8d)
+- Warn for deprecated `renderToStaticNodeStream` [#28874](https://github.com/facebook/react/pull/28874)
+
+## 18.2.0 (June 14, 2022)
+
+### React DOM
+
+* Provide a component stack as a second argument to `onRecoverableError`. ([@gnoff](https://github.com/gnoff) in [#24591](https://github.com/facebook/react/pull/24591))
+* Fix hydrating into `document` causing a blank page on mismatch. ([@gnoff](https://github.com/gnoff) in [#24523](https://github.com/facebook/react/pull/24523))
+* Fix false positive hydration errors with Suspense. ([@gnoff](https://github.com/gnoff) in [#24480](https://github.com/facebook/react/pull/24480) and  [@acdlite](https://github.com/acdlite) in [#24532](https://github.com/facebook/react/pull/24532))
+* Fix ignored `setState` in Safari when adding an iframe. ([@gaearon](https://github.com/gaearon) in [#24459](https://github.com/facebook/react/pull/24459))
+
+### React DOM Server
+
+* Pass information about server errors to the client. ([@salazarm](https://github.com/salazarm) and [@gnoff](https://github.com/gnoff) in [#24551](https://github.com/facebook/react/pull/24551) and [#24591](https://github.com/facebook/react/pull/24591))
+* Allow to provide a reason when aborting the HTML stream. ([@gnoff](https://github.com/gnoff) in [#24680](https://github.com/facebook/react/pull/24680))
+* Eliminate extraneous text separators in the HTML where possible. ([@gnoff](https://github.com/gnoff) in [#24630](https://github.com/facebook/react/pull/24630))
+* Disallow complex children inside `<title>` elements to match the browser constraints. ([@gnoff](https://github.com/gnoff) in [#24679](https://github.com/facebook/react/pull/24679))
+* Fix buffering in some worker environments by explicitly setting `highWaterMark` to `0`. ([@jplhomer](https://github.com/jplhomer) in [#24641](https://github.com/facebook/react/pull/24641))
+
+### Server Components (Experimental)
+
+* Add support for `useId()` inside Server Components. ([@gnoff](https://github.com/gnoff) in [#24172](https://github.com/facebook/react/pull/24172))
+
+## 18.1.0 (April 26, 2022)
+
+### React DOM
+
+* Fix the false positive warning about `react-dom/client` when using UMD bundle. ([@alireza-molaee](https://github.com/alireza-molaee) in [#24274](https://github.com/facebook/react/pull/24274))
+* Fix `suppressHydrationWarning` to work in production too. ([@gaearon](https://github.com/gaearon) in [#24271](https://github.com/facebook/react/pull/24271))
+* Fix `componentWillUnmount` firing twice inside of Suspense. ([@acdlite](https://github.com/acdlite) in [#24308](https://github.com/facebook/react/pull/24308))
+* Fix some transition updates being ignored. ([@acdlite](https://github.com/acdlite) in [#24353](https://github.com/facebook/react/pull/24353))
+* Fix `useDeferredValue` causing an infinite loop when passed an unmemoized value. ([@acdlite](https://github.com/acdlite) in [#24247](https://github.com/facebook/react/pull/24247))
+* Fix throttling of revealing Suspense fallbacks. ([@sunderls](https://github.com/sunderls) in [#24253](https://github.com/facebook/react/pull/24253))
+* Fix an inconsistency in whether the props object is the same between renders. ([@Andarist](https://github.com/Andarist) and [@acdlite](https://github.com/acdlite) in [#24421](https://github.com/facebook/react/pull/24421))
+* Fix a missing warning about a `setState` loop in `useEffect`. ([@gaearon](https://github.com/gaearon) in [#24298](https://github.com/facebook/react/pull/24298))
+* Fix a spurious hydration error. ([@gnoff](https://github.com/gnoff) in [#24404](https://github.com/facebook/react/pull/24404))
+* Warn when calling `setState` in `useInsertionEffect`. ([@gaearon](https://github.com/gaearon) in [#24295](https://github.com/facebook/react/pull/24295))
+* Ensure the reason for hydration errors is always displayed. ([@gaearon](https://github.com/gaearon) in [#24276](https://github.com/facebook/react/pull/24276))
+
+### React DOM Server
+
+* Fix escaping for the `bootstrapScriptContent` contents. ([@gnoff](https://github.com/gnoff) in [#24385](https://github.com/facebook/react/pull/24385))
+* Significantly improve performance of `renderToPipeableStream`. ([@gnoff](https://github.com/gnoff) in [#24291](https://github.com/facebook/react/pull/24291))
+
+### ESLint Plugin: React Hooks
+
+* Fix false positive errors with a large number of branches. ([@scyron6](https://github.com/scyron6) in [#24287](https://github.com/facebook/react/pull/24287))
+* Don't consider a known dependency stable when the variable is reassigned. ([@afzalsayed96](https://github.com/afzalsayed96) in [#24343](https://github.com/facebook/react/pull/24343))
+
+### Use Subscription
+
+* Replace the implementation with the `use-sync-external-store` shim. ([@gaearon](https://github.com/gaearon) in [#24289](https://github.com/facebook/react/pull/24289))
+
+## 18.0.0 (March 29, 2022)
+
+Below is a list of all new features, APIs, deprecations, and breaking changes.
+Read [React 18 release post](https://reactjs.org/blog/2022/03/29/react-v18.html) and [React 18 upgrade guide](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) for more information.
+
+### New Features
+
+### React
+
+* `useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.
+* `startTransition` and `useTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).
+* `useDeferredValue` lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input.
+* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for `useEffect` when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.
+* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.
+
+### React DOM Client
+
+These new APIs are now exported from `react-dom/client`:
+
+* `createRoot`: New method to create a root to `render` or `unmount`. Use it instead of `ReactDOM.render`. New features in React 18 don't work without it.
+* `hydrateRoot`: New method to hydrate a server rendered application. Use it instead of `ReactDOM.hydrate` in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.
+
+Both `createRoot` and `hydrateRoot` accept a new option called `onRecoverableError` in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError), or `console.error` in the older browsers.
+
+### React DOM Server
+
+These new APIs are now exported from `react-dom/server` and have full support for streaming Suspense on the server:
+
+* `renderToPipeableStream`: for streaming in Node environments.
+* `renderToReadableStream`: for modern edge runtime environments, such as Deno and Cloudflare workers.
+
+The existing `renderToString` method keeps working but is discouraged.
+
+## Deprecations
+
+* `react-dom`: `ReactDOM.render` has been deprecated. Using it will warn and run your app in React 17 mode.
+* `react-dom`: `ReactDOM.hydrate` has been deprecated. Using it will warn and run your app in React 17 mode.
+* `react-dom`: `ReactDOM.unmountComponentAtNode` has been deprecated.
+* `react-dom`: `ReactDOM.renderSubtreeIntoContainer` has been deprecated.
+* `react-dom/server`: `ReactDOMServer.renderToNodeStream` has been deprecated.
+
+## Breaking Changes
+
+### React
+
+* **Automatic batching:** This release introduces a performance improvement that changes to the way React batches updates to do more batching automatically. See [Automatic batching for fewer renders in React 18](https://github.com/reactwg/react-18/discussions/21) for more info. In the rare case that you need to opt out, wrap the state update in `flushSync`.
+* **Stricter Strict Mode**: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.
+* **Consistent useEffect timing**: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.
+* **Stricter hydration errors**: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest `<Suspense>` boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.
+* **Suspense trees are always consistent:** If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.
+* **Layout Effects with Suspense**: When a tree re-suspends and reverts to a fallback, React will now clean up layout effects, and then re-create them when the content inside the boundary is shown again. This fixes an issue which prevented component libraries from correctly measuring layout when used with Suspense.
+* **New JS Environment Requirements**: React now depends on modern browsers features including `Promise`, `Symbol`, and `Object.assign`. If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
+
+### Scheduler (Experimental)
+
+* Remove unstable `scheduler/tracing` API
+
+## Notable Changes
+
+### React
+
+* **Components can now render `undefined`:** React no longer throws if you return `undefined` from a component. This makes the allowed component return values consistent with values that are allowed in the middle of a component tree. We suggest to use a linter to prevent mistakes like forgetting a `return` statement before JSX.
+* **In tests, `act` warnings are now opt-in:** If you're running end-to-end tests, the `act` warnings are unnecessary. We've introduced an [opt-in](https://github.com/reactwg/react-18/discussions/102) mechanism so you can enable them only for unit tests where they are useful and beneficial.
+* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/facebook/react/pull/22114) this warning.
+* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/facebook/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely.
+* **Improved memory usage:** React now cleans up more internal fields on unmount, making the impact from unfixed memory leaks that may exist in your application code less severe.
+
+### React DOM Server
+
+* **`renderToString`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary and then retry rendering the same content on the client. It is still recommended that you switch to a streaming API like `renderToPipeableStream` or `renderToReadableStream` instead.
+* **`renderToStaticMarkup`:** Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest `<Suspense>` boundary and retry rendering on the client.
+
+## All Changes
+
+## React
+
+* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr))
+* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/facebook/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii))
+* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/facebook/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii))
+* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan))
+* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/facebook/react/pull/19523) , [#21418](https://github.com/facebook/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan))
+* Assume Symbols are always available. ([#23348](https://github.com/facebook/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Remove `object-assign` polyfill. ([#23351](https://github.com/facebook/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/facebook/react/pull/20953) by [@acdlite](https://github.com/acdlite))
+* Allow components to render undefined. ([#21869](https://github.com/facebook/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii))
+* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/facebook/react/pull/21150) by [@acdlite](https://github.com/acdlite))
+* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/facebook/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii))
+* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/facebook/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Don't patch console during first render. ([#22308](https://github.com/facebook/react/pull/22308) by [@lunaruan](https://github.com/lunaruan))
+* Improve memory usage. ([#21039](https://github.com/facebook/react/pull/21039) by [@bgirard](https://github.com/bgirard))
+* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064) by [@justingrant](https://github.com/justingrant))
+* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834) by [@gaearon](https://github.com/gaearon))
+* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/facebook/react/pull/23095) by [@gaearon](https://github.com/gaearon))
+* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona))
+* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/facebook/react/pull/23111) by [@gaearon](https://github.com/gaearon))
+* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/facebook/react/pull/20617) by [@dimaqq](https://github.com/dimaqq))
+* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB))
+* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/facebook/react/pull/23316) by [@gnoff](https://github.com/gnoff))
+* Fix a warning when a selector returns `NaN`.  ([#23333](https://github.com/facebook/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI))
+* Fix the generated license header. ([#23004](https://github.com/facebook/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron))
+* Add `package.json` as one of the entry points. ([#22954](https://github.com/facebook/react/pull/22954) by [@Jack](https://github.com/Jack-Works))
+* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/facebook/react/pull/23267) by [@acdlite](https://github.com/acdlite))
+* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/facebook/react/pull/23319) by [@acdlite](https://github.com/acdlite))
+
+### React DOM
+
+* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/facebook/react/pull/10239), [#11225](https://github.com/facebook/react/pull/11225), [#12117](https://github.com/facebook/react/pull/12117), [#13732](https://github.com/facebook/react/pull/13732), [#15502](https://github.com/facebook/react/pull/15502), [#15532](https://github.com/facebook/react/pull/15532), [#17035](https://github.com/facebook/react/pull/17035), [#17165](https://github.com/facebook/react/pull/17165), [#20669](https://github.com/facebook/react/pull/20669), [#20748](https://github.com/facebook/react/pull/20748), [#20888](https://github.com/facebook/react/pull/20888), [#21072](https://github.com/facebook/react/pull/21072), [#21417](https://github.com/facebook/react/pull/21417), [#21652](https://github.com/facebook/react/pull/21652), [#21687](https://github.com/facebook/react/pull/21687), [#23207](https://github.com/facebook/react/pull/23207), [#23385](https://github.com/facebook/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add selective hydration. ([#14717](https://github.com/facebook/react/pull/14717), [#14884](https://github.com/facebook/react/pull/14884), [#16725](https://github.com/facebook/react/pull/16725), [#16880](https://github.com/facebook/react/pull/16880), [#17004](https://github.com/facebook/react/pull/17004), [#22416](https://github.com/facebook/react/pull/22416), [#22629](https://github.com/facebook/react/pull/22629), [#22448](https://github.com/facebook/react/pull/22448), [#22856](https://github.com/facebook/react/pull/22856), [#23176](https://github.com/facebook/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage))
+* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/facebook/react/pull/22142) by [@mahyareb](https://github.com/mahyareb))
+* Add `onResize` event to video elements. ([#21973](https://github.com/facebook/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw))
+* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon))
+* Allow non-string `<option>` children if `value` is provided.  ([#21431](https://github.com/facebook/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/facebook/react/pull/21100) by [@gaearon](https://github.com/gaearon))
+* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/facebook/react/pull/23355) by [@acdlite](https://github.com/acdlite))
+
+### React DOM Server
+
+* Add the new streaming renderer. ([#14144](https://github.com/facebook/react/pull/14144), [#20970](https://github.com/facebook/react/pull/20970), [#21056](https://github.com/facebook/react/pull/21056), [#21255](https://github.com/facebook/react/pull/21255), [#21200](https://github.com/facebook/react/pull/21200), [#21257](https://github.com/facebook/react/pull/21257), [#21276](https://github.com/facebook/react/pull/21276), [#22443](https://github.com/facebook/react/pull/22443), [#22450](https://github.com/facebook/react/pull/22450), [#23247](https://github.com/facebook/react/pull/23247), [#24025](https://github.com/facebook/react/pull/24025), [#24030](https://github.com/facebook/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/facebook/react/pull/23171) by [@frandiox](https://github.com/frandiox))
+* Revert to client render on text mismatch. ([#23354](https://github.com/facebook/react/pull/23354) by [@acdlite](https://github.com/acdlite))
+* Deprecate `renderToNodeStream`. ([#23359](https://github.com/facebook/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage))
+* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/facebook/react/pull/24043) by [@eps1lon](https://github.com/eps1lon))
+* Fix a bug in the new server renderer. ([#22617](https://github.com/facebook/react/pull/22617) by [@shuding](https://github.com/shuding))
+* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/facebook/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage))
+
+### React DOM Test Utils
+
+* Throw when `act` is used in production. ([#21686](https://github.com/facebook/react/pull/21686) by [@acdlite](https://github.com/acdlite))
+* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/facebook/react/pull/22561) by [@acdlite](https://github.com/acdlite))
+* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/facebook/react/pull/22607) by [@acdlite](https://github.com/acdlite))
+* Make `act` batch updates. ([#21797](https://github.com/facebook/react/pull/21797) by [@acdlite](https://github.com/acdlite))
+* Remove warning for dangling passive effects. ([#22609](https://github.com/facebook/react/pull/22609) by [@acdlite](https://github.com/acdlite))
+
+### React Refresh
+
+* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/facebook/react/pull/22740) by [@anc95](https://github.com/anc95))
+* Add `exports` field to `package.json`. ([#23087](https://github.com/facebook/react/pull/23087) by [@otakustay](https://github.com/otakustay))
+
+### Server Components (Experimental)
+
+* Add Server Context support. ([#23244](https://github.com/facebook/react/pull/23244) by [@salazarm](https://github.com/salazarm))
+* Add `lazy` support. ([#24068](https://github.com/facebook/react/pull/24068) by [@gnoff](https://github.com/gnoff))
+* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly))
+* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea))
+* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi))
+
+### Scheduler (Experimental)
+
+* Remove unstable `scheduler/tracing` API ([#20037](https://github.com/facebook/react/pull/20037) by [@bvaughn](https://github.com/bvaughn))
+
+## 17.0.2 (March 22, 2021)
+
+### React DOM
+
+* Remove an unused dependency to address the [`SharedArrayBuffer` cross-origin isolation warning](https://developer.chrome.com/blog/enabling-shared-array-buffer/). ([@koba04](https://github.com/koba04) and [@bvaughn](https://github.com/bvaughn) in [#20831](https://github.com/facebook/react/pull/20831), [#20832](https://github.com/facebook/react/pull/20832), and [#20840](https://github.com/facebook/react/pull/20840))
+
+## 17.0.1 (October 22, 2020)
+
+### React DOM
+
+* Fix a crash in IE11. ([@gaearon](https://github.com/gaearon) in [#20071](https://github.com/facebook/react/pull/20071))
+
+## 17.0.0 (October 20, 2020)
+
+Today, we are releasing React 17!
+
+**[Learn more about React 17 and how to update to it on the official React blog.](https://reactjs.org/blog/2020/10/20/react-v17.html)**
+
+### React
+
+* Add `react/jsx-runtime` and `react/jsx-dev-runtime` for the [new JSX transform](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154). ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299))
+* Build component stacks from native error frames. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18561](https://github.com/facebook/react/pull/18561))
+* Allow to specify `displayName` on context for improved stacks. ([@eps1lon](https://github.com/eps1lon) in [#18224](https://github.com/facebook/react/pull/18224))
+* Prevent `'use strict'` from leaking in the UMD bundles. ([@koba04](https://github.com/koba04) in [#19614](https://github.com/facebook/react/pull/19614))
+* Stop using `fb.me` for redirects. ([@cylim](https://github.com/cylim) in [#19598](https://github.com/facebook/react/pull/19598))
+
+### React DOM
+
+* Delegate events to roots instead of `document`. ([@trueadm](https://github.com/trueadm) in [#18195](https://github.com/facebook/react/pull/18195) and [others](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Atrueadm+modern+event+is%3Amerged))
+* Clean up all effects before running any next effects. ([@bvaughn](https://github.com/bvaughn) in [#17947](https://github.com/facebook/react/pull/17947))
+* Run `useEffect` cleanup functions asynchronously. ([@bvaughn](https://github.com/bvaughn) in [#17925](https://github.com/facebook/react/pull/17925))
+* Use browser `focusin` and `focusout` for `onFocus` and `onBlur`. ([@trueadm](https://github.com/trueadm) in [#19186](https://github.com/facebook/react/pull/19186))
+* Make all `Capture` events use the browser capture phase. ([@trueadm](https://github.com/trueadm) in [#19221](https://github.com/facebook/react/pull/19221))
+* Don't emulate bubbling of the `onScroll` event. ([@gaearon](https://github.com/gaearon) in [#19464](https://github.com/facebook/react/pull/19464))
+* Throw if `forwardRef` or `memo` component returns `undefined`. ([@gaearon](https://github.com/gaearon) in [#19550](https://github.com/facebook/react/pull/19550))
+* Remove event pooling. ([@trueadm](https://github.com/trueadm) in [#18969](https://github.com/facebook/react/pull/18969))
+* Stop exposing internals that won’t be needed by React Native Web. ([@necolas](https://github.com/necolas) in [#18483](https://github.com/facebook/react/pull/18483))
+* Attach all known event listeners when the root mounts. ([@gaearon](https://github.com/gaearon) in [#19659](https://github.com/facebook/react/pull/19659))
+* Disable `console` in the second render pass of DEV mode double render. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18547](https://github.com/facebook/react/pull/18547))
+* Deprecate the undocumented and misleading `ReactTestUtils.SimulateNative` API. ([@gaearon](https://github.com/gaearon) in [#13407](https://github.com/facebook/react/pull/13407))
+* Rename private field names used in the internals. ([@gaearon](https://github.com/gaearon) in [#18377](https://github.com/facebook/react/pull/18377))
+* Don't call User Timing API in development. ([@gaearon](https://github.com/gaearon) in [#18417](https://github.com/facebook/react/pull/18417))
+* Disable console during the repeated render in Strict Mode. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18547](https://github.com/facebook/react/pull/18547))
+* In Strict Mode, double-render components without Hooks too. ([@eps1lon](https://github.com/eps1lon) in [#18430](https://github.com/facebook/react/pull/18430))
+* Allow calling `ReactDOM.flushSync` during lifecycle methods (but warn). ([@sebmarkbage](https://github.com/sebmarkbage) in [#18759](https://github.com/facebook/react/pull/18759))
+* Add the `code` property to the keyboard event objects. ([@bl00mber](https://github.com/bl00mber) in [#18287](https://github.com/facebook/react/pull/18287))
+* Add the `disableRemotePlayback` property for `video` elements. ([@tombrowndev](https://github.com/tombrowndev) in [#18619](https://github.com/facebook/react/pull/18619))
+* Add the `enterKeyHint` property for `input` elements. ([@eps1lon](https://github.com/eps1lon) in [#18634](https://github.com/facebook/react/pull/18634))
+* Warn when no `value` is provided to `<Context.Provider>`. ([@charlie1404](https://github.com/charlie1404) in [#19054](https://github.com/facebook/react/pull/19054))
+* Warn when `memo` or `forwardRef` components return `undefined`. ([@bvaughn](https://github.com/bvaughn) in [#19550](https://github.com/facebook/react/pull/19550))
+* Improve the error message for invalid updates. ([@JoviDeCroock](https://github.com/JoviDeCroock) in [#18316](https://github.com/facebook/react/pull/18316))
+* Exclude forwardRef and memo from stack frames. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18559](https://github.com/facebook/react/pull/18559))
+* Improve the error message when switching between controlled and uncontrolled inputs. ([@vcarl](https://github.com/vcarl) in [#17070](https://github.com/facebook/react/pull/17070))
+* Keep `onTouchStart`, `onTouchMove`, and `onWheel` passive. ([@gaearon](https://github.com/gaearon) in [#19654](https://github.com/facebook/react/pull/19654))
+* Fix `setState` hanging in development inside a closed iframe. ([@gaearon](https://github.com/gaearon) in [#19220](https://github.com/facebook/react/pull/19220))
+* Fix rendering bailout for lazy components with `defaultProps`. ([@jddxf](https://github.com/jddxf) in [#18539](https://github.com/facebook/react/pull/18539))
+* Fix a false positive warning when `dangerouslySetInnerHTML` is `undefined`. ([@eps1lon](https://github.com/eps1lon) in [#18676](https://github.com/facebook/react/pull/18676))
+* Fix Test Utils with non-standard `require` implementation. ([@just-boris](https://github.com/just-boris) in [#18632](https://github.com/facebook/react/pull/18632))
+* Fix `onBeforeInput` reporting an incorrect `event.type`. ([@eps1lon](https://github.com/eps1lon) in [#19561](https://github.com/facebook/react/pull/19561))
+* Fix `event.relatedTarget` reported as `undefined` in Firefox. ([@claytercek](https://github.com/claytercek) in [#19607](https://github.com/facebook/react/pull/19607))
+* Fix "unspecified error" in IE11. ([@hemakshis](https://github.com/hemakshis) in [#19664](https://github.com/facebook/react/pull/19664))
+* Fix rendering into a shadow root. ([@Jack-Works](https://github.com/Jack-Works) in [#15894](https://github.com/facebook/react/pull/15894))
+* Fix `movementX/Y` polyfill with capture events. ([@gaearon](https://github.com/gaearon) in [#19672](https://github.com/facebook/react/pull/19672))
+* Use delegation for `onSubmit` and `onReset` events. ([@gaearon](https://github.com/gaearon) in [#19333](https://github.com/facebook/react/pull/19333))
+* Improve memory usage. ([@trueadm](https://github.com/trueadm) in [#18970](https://github.com/facebook/react/pull/18970))
+
+### React DOM Server
+
+* Make `useCallback` behavior consistent with `useMemo` for the server renderer. ([@alexmckenley](https://github.com/alexmckenley) in [#18783](https://github.com/facebook/react/pull/18783))
+* Fix state leaking when a function component throws. ([@pmaccart](https://github.com/pmaccart) in [#19212](https://github.com/facebook/react/pull/19212))
+
+### React Test Renderer
+
+* Improve `findByType` error message. ([@henryqdineen](https://github.com/henryqdineen) in [#17439](https://github.com/facebook/react/pull/17439))
+
+### Concurrent Mode (Experimental)
+
+* Revamp the priority batching heuristics. ([@acdlite](https://github.com/acdlite) in [#18796](https://github.com/facebook/react/pull/18796))
+* Add the `unstable_` prefix before the experimental APIs. ([@acdlite](https://github.com/acdlite) in [#18825](https://github.com/facebook/react/pull/18825))
+* Remove `unstable_discreteUpdates` and `unstable_flushDiscreteUpdates`. ([@trueadm](https://github.com/trueadm) in [#18825](https://github.com/facebook/react/pull/18825))
+* Remove the `timeoutMs` argument. ([@acdlite](https://github.com/acdlite) in [#19703](https://github.com/facebook/react/pull/19703))
+* Disable `<div hidden />` prerendering in favor of a different future API. ([@acdlite](https://github.com/acdlite) in [#18917](https://github.com/facebook/react/pull/18917))
+* Add `unstable_expectedLoadTime` to Suspense for CPU-bound trees. ([@acdlite](https://github.com/acdlite) in [#19936](https://github.com/facebook/react/pull/19936))
+* Add an experimental `unstable_useOpaqueIdentifier` Hook. ([@lunaruan](https://github.com/lunaruan) in [#17322](https://github.com/facebook/react/pull/17322))
+* Add an experimental `unstable_startTransition` API. ([@rickhanlonii](https://github.com/rickhanlonii) in [#19696](https://github.com/facebook/react/pull/19696))
+* Using `act` in the test renderer no longer flushes Suspense fallbacks. ([@acdlite](https://github.com/acdlite) in [#18596](https://github.com/facebook/react/pull/18596))
+* Use global render timeout for CPU Suspense. ([@sebmarkbage](https://github.com/sebmarkbage) in [#19643](https://github.com/facebook/react/pull/19643))
+* Clear the existing root content before mounting. ([@bvaughn](https://github.com/bvaughn) in [#18730](https://github.com/facebook/react/pull/18730))
+* Fix a bug with error boundaries. ([@acdlite](https://github.com/acdlite) in [#18265](https://github.com/facebook/react/pull/18265))
+* Fix a bug causing dropped updates in a suspended tree. ([@acdlite](https://github.com/acdlite) in [#18384](https://github.com/facebook/react/pull/18384) and [#18457](https://github.com/facebook/react/pull/18457))
+* Fix a bug causing dropped render phase updates. ([@acdlite](https://github.com/acdlite) in [#18537](https://github.com/facebook/react/pull/18537))
+* Fix a bug in SuspenseList. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18412](https://github.com/facebook/react/pull/18412))
+* Fix a bug causing Suspense fallback to show too early. ([@acdlite](https://github.com/acdlite) in [#18411](https://github.com/facebook/react/pull/18411))
+* Fix a bug with class components inside SuspenseList. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18448](https://github.com/facebook/react/pull/18448))
+* Fix a bug with inputs that may cause updates to be dropped. ([@jddxf](https://github.com/jddxf) in [#18515](https://github.com/facebook/react/pull/18515) and [@acdlite](https://github.com/acdlite) in [#18535](https://github.com/facebook/react/pull/18535))
+* Fix a bug causing Suspense fallback to get stuck.  ([@acdlite](https://github.com/acdlite) in [#18663](https://github.com/facebook/react/pull/18663))
+* Don't cut off the tail of a SuspenseList if hydrating. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18854](https://github.com/facebook/react/pull/18854))
+* Fix a bug in `useMutableSource` that may happen when `getSnapshot` changes. ([@bvaughn](https://github.com/bvaughn) in [#18297](https://github.com/facebook/react/pull/18297))
+* Fix a tearing bug in `useMutableSource`. ([@bvaughn](https://github.com/bvaughn) in [#18912](https://github.com/facebook/react/pull/18912))
+* Warn if calling setState outside of render but before commit. ([@sebmarkbage](https://github.com/sebmarkbage) in [#18838](https://github.com/facebook/react/pull/18838))
+
+## 16.14.0 (October 14, 2020)
+
+### React
+
+* Add support for the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299))
+
+## 16.13.1 (March 19, 2020)
+
+### React DOM
+
+* Fix bug in legacy mode Suspense where effect clean-up functions are not fired. This only affects users who use Suspense for data fetching in legacy mode, which is not technically supported. ([@acdlite](https://github.com/acdlite) in [#18238](https://github.com/facebook/react/pull/18238))
+* Revert warning for cross-component updates that happen inside class render lifecycles (`componentWillReceiveProps`, `shouldComponentUpdate`, and so on). ([@gaearon](https://github.com/gaearon) in [#18330](https://github.com/facebook/react/pull/18330))
+
+## 16.13.0 (February 26, 2020)
+
+### React
+
+* Warn when a string ref is used in a manner that's not amenable to a future codemod ([@lunaruan](https://github.com/lunaruan) in [#17864](https://github.com/facebook/react/pull/17864))
+* Deprecate `React.createFactory()` ([@trueadm](https://github.com/trueadm) in [#17878](https://github.com/facebook/react/pull/17878))
+
+### React DOM
+
+* Warn when changes in `style` may cause an unexpected collision ([@sophiebits](https://github.com/sophiebits) in [#14181](https://github.com/facebook/react/pull/14181), [#18002](https://github.com/facebook/react/pull/18002))
+* Warn when a function component is updated during another component's render phase ([@acdlite](https://github.com/acdlite) in [#17099](https://github.com/facebook/react/pull/17099))
+* Deprecate `unstable_createPortal` ([@trueadm](https://github.com/trueadm) in [#17880](https://github.com/facebook/react/pull/17880))
+* Fix `onMouseEnter` being fired on disabled buttons ([@AlfredoGJ](https://github.com/AlfredoGJ) in [#17675](https://github.com/facebook/react/pull/17675))
+* Call `shouldComponentUpdate` twice when developing in `StrictMode` ([@bvaughn](https://github.com/bvaughn) in [#17942](https://github.com/facebook/react/pull/17942))
+* Add `version` property to ReactDOM ([@ealush](https://github.com/ealush) in [#15780](https://github.com/facebook/react/pull/15780))
+* Don't call `toString()` of `dangerouslySetInnerHTML` ([@sebmarkbage](https://github.com/sebmarkbage) in [#17773](https://github.com/facebook/react/pull/17773))
+* Show component stacks in more warnings ([@gaearon](https://github.com/gaearon) in [#17922](https://github.com/facebook/react/pull/17922), [#17586](https://github.com/facebook/react/pull/17586))
+
+### Concurrent Mode (Experimental)
+
+* Warn for problematic usages of `ReactDOM.createRoot()` ([@trueadm](https://github.com/trueadm) in [#17937](https://github.com/facebook/react/pull/17937))
+* Remove `ReactDOM.createRoot()` callback params and added warnings on usage ([@bvaughn](https://github.com/bvaughn) in [#17916](https://github.com/facebook/react/pull/17916))
+* Don't group Idle/Offscreen work with other work ([@sebmarkbage](https://github.com/sebmarkbage) in [#17456](https://github.com/facebook/react/pull/17456))
+* Adjust `SuspenseList` CPU bound heuristic ([@sebmarkbage](https://github.com/sebmarkbage) in [#17455](https://github.com/facebook/react/pull/17455))
+* Add missing event plugin priorities ([@trueadm](https://github.com/trueadm) in [#17914](https://github.com/facebook/react/pull/17914))
+* Fix `isPending` only being true when transitioning from inside an input event ([@acdlite](https://github.com/acdlite) in [#17382](https://github.com/facebook/react/pull/17382))
+* Fix `React.memo` components dropping updates when interrupted by a higher priority update ([@acdlite]((https://github.com/acdlite)) in [#18091](https://github.com/facebook/react/pull/18091))
+* Don't warn when suspending at the wrong priority ([@gaearon](https://github.com/gaearon) in [#17971](https://github.com/facebook/react/pull/17971))
+* Fix a bug with rebasing updates ([@acdlite](https://github.com/acdlite) and [@sebmarkbage](https://github.com/sebmarkbage) in [#17560](https://github.com/facebook/react/pull/17560), [#17510](https://github.com/facebook/react/pull/17510), [#17483](https://github.com/facebook/react/pull/17483), [#17480](https://github.com/facebook/react/pull/17480))
+
+## 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
+
+* Fix an incorrect bailout in `useReducer()`. ([@acdlite](https://github.com/acdlite) in [#15124](https://github.com/facebook/react/pull/15124))
+* Fix iframe warnings in Safari DevTools. ([@renanvalentin](https://github.com/renanvalentin) in [#15099](https://github.com/facebook/react/pull/15099))
+* Warn if `contextType` is set to `Context.Consumer` instead of `Context`. ([@aweary](https://github.com/aweary) in [#14831](https://github.com/facebook/react/pull/14831))
+* Warn if `contextType` is set to invalid values. ([@gaearon](https://github.com/gaearon) in [#15142](https://github.com/facebook/react/pull/15142))
+
+## 16.8.5 (March 22, 2019)
+
+### React DOM
+
+* Don't set the first option as selected in select tag with `size` attribute. ([@kulek1](https://github.com/kulek1) in [#14242](https://github.com/facebook/react/pull/14242))
+* Improve the `useEffect(async () => ...)` warning message. ([@gaearon](https://github.com/gaearon) in [#15118](https://github.com/facebook/react/pull/15118))
+* Improve the error message sometimes caused by duplicate React. ([@jaredpalmer](https://github.com/jaredpalmer) in [#15139](https://github.com/facebook/react/pull/15139))
+
+### React DOM Server
+
+* Improve the `useLayoutEffect` warning message when server rendering. ([@gaearon](https://github.com/gaearon) in [#15158](https://github.com/facebook/react/pull/15158))
+
+### React Shallow Renderer
+
+* Fix `setState` in shallow renderer to work with Hooks. ([@gaearon](https://github.com/gaearon) in [#15120](https://github.com/facebook/react/pull/15120))
+* Fix shallow renderer to support `React.memo`. ([@aweary](https://github.com/aweary) in [#14816](https://github.com/facebook/react/pull/14816))
+* Fix shallow renderer to support Hooks inside `forwardRef`. ([@eps1lon](https://github.com/eps1lon) in [#15100](https://github.com/facebook/react/pull/15100))
+
+## 16.8.4 (March 5, 2019)
+
+### React DOM and other renderers
+
+- Fix a bug where DevTools caused a runtime error when inspecting a component that used a `useContext` hook. ([@bvaughn](https://github.com/bvaughn) in [#14940](https://github.com/facebook/react/pull/14940))
+
+## 16.8.3 (February 21, 2019)
+
+### React DOM
+
+* Fix a bug that caused inputs to behave incorrectly in UMD builds. ([@gaearon](https://github.com/gaearon) in [#14914](https://github.com/facebook/react/pull/14914))
+* Fix a bug that caused render phase updates to be discarded. ([@gaearon](https://github.com/gaearon) in [#14852](https://github.com/facebook/react/pull/14852))
+
+### React DOM Server
+* Unwind the context stack when a stream is destroyed without completing, to prevent incorrect values during a subsequent render. ([@overlookmotel](https://github.com/overlookmotel) in [#14706](https://github.com/facebook/react/pull/14706/))
+
+### ESLint Plugin for React Hooks
+
+* Add a new recommended `exhaustive-deps` rule. ([@gaearon](https://github.com/gaearon) in [#14636](https://github.com/facebook/react/pull/14636))
+
+## 16.8.2 (February 14, 2019)
+
+### React DOM
+
+* Fix `ReactDOM.render` being ignored inside `useEffect`. ([@gaearon](https://github.com/gaearon) in [#14799](https://github.com/facebook/react/pull/14799))
+* Fix a crash when unmounting empty portals. ([@gaearon](https://github.com/gaearon) in [#14820](https://github.com/facebook/react/pull/14820))
+* Fix `useImperativeHandle` to work correctly when no deps are specified. ([@gaearon](https://github.com/gaearon) in [#14801](https://github.com/facebook/react/pull/14801))
+* Fix `crossOrigin` attribute to work in SVG `image` elements. ([@aweary](https://github.com/aweary) in [#14832](https://github.com/facebook/react/pull/14832))
+* Fix a false positive warning when using Suspense with Hooks. ([@gaearon](https://github.com/gaearon) in [#14821](https://github.com/facebook/react/pull/14821))
+
+### React Test Utils and React Test Renderer
+
+* Include component stack into the `act()` warning. ([@threepointone](https://github.com/threepointone) in [#14855](https://github.com/facebook/react/pull/14855))
+
+## 16.8.1 (February 6, 2019)
+
+### React DOM and React Test Renderer
+
+* Fix a crash when used together with an older version of React. ([@bvaughn](https://github.com/bvaughn) in [#14770](https://github.com/facebook/react/pull/14770))
+
+### React Test Utils
+
+* Fix a crash in Node environment. ([@threepointone](https://github.com/threepointone) in [#14768](https://github.com/facebook/react/pull/14768))
+
+## 16.8.0 (February 6, 2019)
+
+### React
+
+* Add [Hooks](https://reactjs.org/docs/hooks-intro.html) — a way to use state and other React features without writing a class. ([@acdlite](https://github.com/acdlite) et al. in [#13968](https://github.com/facebook/react/pull/13968))
+* Improve the `useReducer` Hook lazy initialization API. ([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723))
+
+### React DOM
+
+* Bail out of rendering on identical values for `useState` and `useReducer` Hooks. ([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569))
+* Use `Object.is` algorithm for comparing `useState` and `useReducer` values. ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752))
+* Don’t compare the first argument passed to `useEffect`/`useMemo`/`useCallback` Hooks. ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594))
+* Support synchronous thenables passed to `React.lazy()`. ([@gaearon](https://github.com/gaearon) in [#14626](https://github.com/facebook/react/pull/14626))
+* Render components with Hooks twice in Strict Mode (DEV-only) to match class behavior. ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654))
+* Warn about mismatching Hook order in development. ([@threepointone](https://github.com/threepointone) in [#14585](https://github.com/facebook/react/pull/14585) and [@acdlite](https://github.com/acdlite) in [#14591](https://github.com/facebook/react/pull/14591))
+* Effect clean-up functions must return either `undefined` or a function. All other values, including `null`, are not allowed. [@acdlite](https://github.com/acdlite) in [#14119](https://github.com/facebook/react/pull/14119)
+
+### React Test Renderer and Test Utils
+
+* Support Hooks in the shallow renderer. ([@trueadm](https://github.com/trueadm) in [#14567](https://github.com/facebook/react/pull/14567))
+* Fix wrong state in `shouldComponentUpdate` in the presence of `getDerivedStateFromProps` for Shallow Renderer. ([@chenesan](https://github.com/chenesan) in [#14613](https://github.com/facebook/react/pull/14613))
+* Add `ReactTestRenderer.act()` and `ReactTestUtils.act()` for batching updates so that tests more closely match real behavior. ([@threepointone](https://github.com/threepointone) in [#14744](https://github.com/facebook/react/pull/14744))
+
+
+### ESLint Plugin: React Hooks
+
+* Initial [release](https://www.npmjs.com/package/eslint-plugin-react-hooks). ([@calebmer](https://github.com/calebmer) in [#13968](https://github.com/facebook/react/pull/13968))
+* Fix reporting after encountering a loop. ([@calebmer](https://github.com/calebmer) and [@Yurickh](https://github.com/Yurickh) in [#14661](https://github.com/facebook/react/pull/14661))
+* Don't consider throwing to be a rule violation. ([@sophiebits](https://github.com/sophiebits) in [#14040](https://github.com/facebook/react/pull/14040))
+
+## 16.7.0 (December 19, 2018)
+
+### React DOM
+
+* Fix performance of `React.lazy` for large numbers of lazily-loaded components. ([@acdlite](http://github.com/acdlite) in [#14429](https://github.com/facebook/react/pull/14429))
+* Clear fields on unmount to avoid memory leaks. ([@trueadm](http://github.com/trueadm) in [#14276](https://github.com/facebook/react/pull/14276))
+* Fix bug with SSR and context when mixing `react-dom/server@16.6` and `react@<16.6`. ([@gaearon](http://github.com/gaearon) in [#14291](https://github.com/facebook/react/pull/14291))
+* Fix a performance regression in profiling mode. ([@bvaughn](http://github.com/bvaughn) in [#14383](https://github.com/facebook/react/pull/14383))
+
+### Scheduler (Experimental)
+
+* Post to MessageChannel instead of window. ([@acdlite](http://github.com/acdlite) in [#14234](https://github.com/facebook/react/pull/14234))
+* Reduce serialization overhead. ([@developit](http://github.com/developit) in [#14249](https://github.com/facebook/react/pull/14249))
+* Fix fallback to `setTimeout` in testing environments. ([@bvaughn](http://github.com/bvaughn) in [#14358](https://github.com/facebook/react/pull/14358))
+* Add methods for debugging. ([@mrkev](http://github.com/mrkev) in [#14053](https://github.com/facebook/react/pull/14053))
+
+
+## 16.6.3 (November 12, 2018)
+
+### React DOM
+
+* Fix bugs in `Suspense` and `lazy`. ([@acdlite](https://github.com/acdlite) in [#14133](https://github.com/facebook/react/pull/14133), [#14157](https://github.com/facebook/react/pull/14157), and [#14164](https://github.com/facebook/react/pull/14164))
+* Fix highlighting of `React.memo` updates in React DevTools. ([@bvaughn](https://github.com/bvaughn) in [#14141](https://github.com/facebook/react/pull/14141))
+* Fix interaction of Suspense with the React Profiler. ([@bvaughn](https://github.com/bvaughn) in [#14065](https://github.com/facebook/react/pull/14065))
+* Fix a false positive warning when using Suspense. ([@acdlite](https://github.com/acdlite) in [#14158](https://github.com/facebook/react/pull/14158))
+
+### React DOM Server
+
+* Fix incorrect sharing of context state between `renderToNodeStream()` calls. ([@sebmarkbage](https://github.com/sebmarkbage) in [#14182](https://github.com/facebook/react/pull/14182))
+* Add a warning about incorrect usage of the context API. ([@trueadm](https://github.com/trueadm) in [#14033](https://github.com/facebook/react/pull/14033))
+
+## 16.6.2 (November 12, 2018)
+
+This release was published in a broken state and should be skipped.
+
+## 16.6.1 (November 6, 2018)
+
+### React DOM
+
+* Fallback should not remount every time a promise resolves. ([@acdlite](https://github.com/acdlite) in [#14083](https://github.com/facebook/react/pull/14083))
+* Fix bug where Suspense keeps showing fallback even after everything finishes loading. ([@acdlite](https://github.com/acdlite) in [#14083](https://github.com/facebook/react/pull/14083))
+* Fix a crash when Suspense finishes loading in IE11. ([@sophiebits](https://github.com/sophiebits) in [#14126](https://github.com/facebook/react/pull/14126))
+* Fix unresolved default props in lifecycle methods of a lazy component. ([@gaearon](https://github.com/gaearon) in [#14112](https://github.com/facebook/react/pull/14112))
+* Fix bug when recovering from an error thrown during complete phase. ([@gaearon](https://github.com/gaearon) in [#14104](https://github.com/facebook/react/pull/14104))
+
+### Scheduler (Experimental)
+
+* Switch from deadline object to `shouldYield` API. ([@acdlite](https://github.com/acdlite) in [#14025](https://github.com/facebook/react/pull/14025))
+
+
+## 16.6.0 (October 23, 2018)
+
+### React
+
+* Add `React.memo()` as an alternative to `PureComponent` for functions. ([@acdlite](https://github.com/acdlite) in [#13748](https://github.com/facebook/react/pull/13748))
+* Add `React.lazy()` for code splitting components. ([@acdlite](https://github.com/acdlite) in [#13885](https://github.com/facebook/react/pull/13885))
+* `React.StrictMode` now warns about legacy context API. ([@bvaughn](https://github.com/bvaughn) in [#13760](https://github.com/facebook/react/pull/13760))
+* `React.StrictMode` now warns about `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#13841](https://github.com/facebook/react/pull/13841))
+* Rename `unstable_AsyncMode` to `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) in [#13732](https://github.com/facebook/react/pull/13732))
+* Rename `unstable_Placeholder` to `Suspense`, and `delayMs` to `maxDuration`. ([@gaearon](https://github.com/gaearon) in [#13799](https://github.com/facebook/react/pull/13799) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13922](https://github.com/facebook/react/pull/13922))
+
+### React DOM
+
+* Add `contextType` as a more ergonomic way to subscribe to context from a class. ([@bvaughn](https://github.com/bvaughn) in [#13728](https://github.com/facebook/react/pull/13728))
+* Add `getDerivedStateFromError` lifecycle method for catching errors in a future asynchronous server-side renderer. ([@bvaughn](https://github.com/bvaughn) in [#13746](https://github.com/facebook/react/pull/13746))
+* Warn when `<Context>` is used instead of `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) in [#13829](https://github.com/facebook/react/pull/13829))
+* Fix gray overlay on iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) in [#13778](https://github.com/facebook/react/pull/13778))
+* Fix a bug caused by overwriting `window.event` in development. ([@sergei-startsev](https://github.com/sergei-startsev) in [#13697](https://github.com/facebook/react/pull/13697))
+
+### React DOM Server
+
+* Add support for `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) in [#13855](https://github.com/facebook/react/pull/13855))
+* Add support for `contextType`. ([@alexmckenley](https://github.com/alexmckenley) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13889](https://github.com/facebook/react/pull/13889))
+
+### Scheduler (Experimental)
+
+* Rename the package to `scheduler`. ([@gaearon](https://github.com/gaearon) in [#13683](https://github.com/facebook/react/pull/13683))
+* Support priority levels, continuations, and wrapped callbacks. ([@acdlite](https://github.com/acdlite) in [#13720](https://github.com/facebook/react/pull/13720) and [#13842](https://github.com/facebook/react/pull/13842))
+* Improve the fallback mechanism in non-DOM environments. ([@acdlite](https://github.com/acdlite) in [#13740](https://github.com/facebook/react/pull/13740))
+* Schedule `requestAnimationFrame` earlier. ([@acdlite](https://github.com/acdlite) in [#13785](https://github.com/facebook/react/pull/13785))
+* Fix the DOM detection to be more thorough. ([@trueadm](https://github.com/trueadm) in [#13731](https://github.com/facebook/react/pull/13731))
+* Fix bugs with interaction tracing. ([@bvaughn](https://github.com/bvaughn) in [#13590](https://github.com/facebook/react/pull/13590))
+* Add the `envify` transform to the package. ([@mridgway](https://github.com/mridgway) in [#13766](https://github.com/facebook/react/pull/13766))
+
+## 16.5.2 (September 18, 2018)
+
+### React DOM
+
+* Fixed a recent `<iframe>` regression ([@JSteunou](https://github.com/JSteunou) in [#13650](https://github.com/facebook/react/pull/13650))
+* Fix `updateWrapper` so that `<textarea>`s no longer re-render when data is unchanged ([@joelbarbosa](https://github.com/joelbarbosa) in [#13643](https://github.com/facebook/react/pull/13643))
+
+### Schedule (Experimental)
+
+* Renaming "tracking" API to "tracing" ([@bvaughn](https://github.com/bvaughn) in [#13641](https://github.com/facebook/react/pull/13641))
+* Add UMD production+profiling entry points ([@bvaughn](https://github.com/bvaughn) in [#13642](https://github.com/facebook/react/pull/13642))
+* Refactored `schedule` to remove some React-isms and improve performance for when deferred updates time out ([@acdlite](https://github.com/acdlite) in [#13582](https://github.com/facebook/react/pull/13582))
+
+## 16.5.1 (September 13, 2018)
+
+### React
+
+* Improve the warning when `React.forwardRef` receives an unexpected number of arguments. ([@andresroberto](https://github.com/andresroberto) in [#13636](https://github.com/facebook/react/issues/13636))
+
+### React DOM
+
+* Fix a regression in unstable exports used by React Native Web. ([@aweary](https://github.com/aweary) in [#13598](https://github.com/facebook/react/issues/13598))
+* Fix a crash when component defines a method called `isReactComponent`. ([@gaearon](https://github.com/gaearon) in [#13608](https://github.com/facebook/react/issues/13608))
+* Fix a crash in development mode in IE9 when printing a warning. ([@link-alex](https://github.com/link-alex) in [#13620](https://github.com/facebook/react/issues/13620))
+* Provide a better error message when running `react-dom/profiling` with `schedule/tracking`. ([@bvaughn](https://github.com/bvaughn) in [#13605](https://github.com/facebook/react/issues/13605))
+* If a `ForwardRef` component defines a `displayName`, use it in warnings. ([@probablyup](https://github.com/probablyup) in [#13615](https://github.com/facebook/react/issues/13615))
+
+### Schedule (Experimental)
+
+* Add a separate profiling entry point at `schedule/tracking-profiling`. ([@bvaughn](https://github.com/bvaughn) in [#13605](https://github.com/facebook/react/issues/13605))
+
+## 16.5.0 (September 5, 2018)
+
+### React
+
+* Add a warning if `React.forwardRef` render function doesn't take exactly two arguments ([@bvaughn](https://github.com/bvaughn) in [#13168](https://github.com/facebook/react/issues/13168))
+* Improve the error message when passing an element to `createElement` by mistake ([@DCtheTall](https://github.com/DCtheTall) in [#13131](https://github.com/facebook/react/issues/13131))
+* Don't call profiler `onRender` until after mutations ([@bvaughn](https://github.com/bvaughn) in [#13572](https://github.com/facebook/react/issues/13572))
+
+### React DOM
+
+* Add support for React DevTools Profiler ([@bvaughn](https://github.com/bvaughn) in [#13058](https://github.com/facebook/react/issues/13058))
+* Add `react-dom/profiling` entry point alias for profiling in production ([@bvaughn](https://github.com/bvaughn) in [#13570](https://github.com/facebook/react/issues/13570))
+* Add `onAuxClick` event for browsers that support it ([@jquense](https://github.com/jquense) in [#11571](https://github.com/facebook/react/issues/11571))
+* Add `movementX` and `movementY` fields to mouse events ([@jasonwilliams](https://github.com/jasonwilliams) in [#9018](https://github.com/facebook/react/issues/9018))
+* Add `tangentialPressure` and `twist` fields to pointer events ([@motiz88](https://github.com/motiz88) in [#13374](https://github.com/facebook/react/issues/13374))
+* Minimally support iframes (nested browsing contexts) in selection event handling ([@acusti](https://github.com/acusti) in [#12037](https://github.com/facebook/react/issues/12037))
+* Support passing booleans to the `focusable` SVG attribute ([@gaearon](https://github.com/gaearon) in [#13339](https://github.com/facebook/react/issues/13339))
+* Ignore `<noscript>` on the client when hydrating ([@Ephem](https://github.com/Ephem) in [#13537](https://github.com/facebook/react/issues/13537))
+* Fix `gridArea` to be treated as a unitless CSS property ([@mgol](https://github.com/mgol) in [#13550](https://github.com/facebook/react/issues/13550))
+* Fix incorrect data in `compositionend` event when typing Korean on IE11 ([@crux153](https://github.com/crux153) in [#12563](https://github.com/facebook/react/issues/12563))
+* Fix a crash when using dynamic `children` in the `<option>` tag ([@Slowyn](https://github.com/Slowyn) in [#13261](https://github.com/facebook/react/issues/13261), [@gaearon](https://github.com/gaearon) in [#13465](https://github.com/facebook/react/pull/13465))
+* Fix the `checked` attribute not getting initially set on the `input` ([@dilidili](https://github.com/dilidili) in [#13114](https://github.com/facebook/react/issues/13114))
+* Fix hydration of `dangerouslySetInnerHTML` when `__html` is not a string ([@gaearon](https://github.com/gaearon) in [#13353](https://github.com/facebook/react/issues/13353))
+* Fix a warning about missing controlled `onChange` to fire on falsy values too ([@nicolevy](https://github.com/nicolevy) in [#12628](https://github.com/facebook/react/issues/12628))
+* Fix `submit` and `reset` buttons getting an empty label ([@ellsclytn](https://github.com/ellsclytn) in [#12780](https://github.com/facebook/react/issues/12780))
+* Fix the `onSelect` event not being triggered after drag and drop ([@gaearon](https://github.com/gaearon) in [#13422](https://github.com/facebook/react/issues/13422))
+* Fix the `onClick` event not working inside a portal on iOS ([@aweary](https://github.com/aweary) in [#11927](https://github.com/facebook/react/issues/11927))
+* Fix a performance issue when thousands of roots are re-rendered ([@gaearon](https://github.com/gaearon) in [#13335](https://github.com/facebook/react/issues/13335))
+* Fix a performance regression that also caused `onChange` to not fire in some cases ([@gaearon](https://github.com/gaearon) in [#13423](https://github.com/facebook/react/issues/13423))
+* Handle errors in more edge cases gracefully ([@gaearon](https://github.com/gaearon) in [#13237](https://github.com/facebook/react/issues/13237) and [@acdlite](https://github.com/acdlite) in [#13269](https://github.com/facebook/react/issues/13269))
+* Don't use proxies for synthetic events in development ([@gaearon](https://github.com/gaearon) in [#12171](https://github.com/facebook/react/issues/12171))
+* Warn when `"false"` or `"true"` is the value of a boolean DOM prop ([@motiz88](https://github.com/motiz88) in [#13372](https://github.com/facebook/react/issues/13372))
+* Warn when `this.state` is initialized to `props` ([@veekas](https://github.com/veekas) in [#11658](https://github.com/facebook/react/issues/11658))
+* Don't compare `style` on hydration in IE due to noisy false positives ([@mgol](https://github.com/mgol) in [#13534](https://github.com/facebook/react/issues/13534))
+* Include `StrictMode` in the component stack ([@gaearon](https://github.com/gaearon) in [#13240](https://github.com/facebook/react/issues/13240))
+* Don't overwrite `window.event` in IE ([@ConradIrwin](https://github.com/ConradIrwin) in [#11696](https://github.com/facebook/react/issues/11696))
+* Improve component stack for the `folder/index.js` naming convention ([@gaearon](https://github.com/gaearon) in [#12059](https://github.com/facebook/react/issues/12059))
+* Improve a warning when using `getDerivedStateFromProps` without initialized state ([@flxwu](https://github.com/flxwu) in [#13317](https://github.com/facebook/react/issues/13317))
+* Improve a warning about invalid textarea usage ([@raunofreiberg](https://github.com/raunofreiberg) in [#13361](https://github.com/facebook/react/issues/13361))
+* Treat invalid Symbol and function values more consistently ([@raunofreiberg](https://github.com/raunofreiberg) in [#13362](https://github.com/facebook/react/issues/13362) and [#13389](https://github.com/facebook/react/issues/13389))
+* Allow Electron `<webview>` tag without warnings ([@philipp-spiess](https://github.com/philipp-spiess) in [#13301](https://github.com/facebook/react/issues/13301))
+* Don't show the uncaught error addendum if `e.preventDefault()` was called ([@gaearon](https://github.com/gaearon) in [#13384](https://github.com/facebook/react/issues/13384))
+* Warn about rendering Generators ([@gaearon](https://github.com/gaearon) in [#13312](https://github.com/facebook/react/issues/13312))
+* Remove irrelevant suggestion of a legacy method from a warning ([@zx6658](https://github.com/zx6658) in [#13169](https://github.com/facebook/react/issues/13169))
+* Remove `unstable_deferredUpdates` in favor of `unstable_scheduleWork` from `schedule` ([@gaearon](https://github.com/gaearon) in [#13488](https://github.com/facebook/react/issues/13488))
+* Fix unstable asynchronous mode from doing unnecessary work when an update takes too long ([@acdlite](https://github.com/acdlite) in [#13503](https://github.com/facebook/react/issues/13503))
+
+### React DOM Server
+
+* Fix crash with nullish children when using `dangerouslySetInnerHtml` in a selected `<option>` ([@mridgway](https://github.com/mridgway) in [#13078](https://github.com/facebook/react/issues/13078))
+* Fix crash when `setTimeout` is missing ([@dustinsoftware](https://github.com/dustinsoftware) in [#13088](https://github.com/facebook/react/issues/13088))
+
+### React Test Renderer and Test Utils
+
+* Fix `this` in a functional component for shallow renderer to be `undefined` ([@koba04](https://github.com/koba04) in [#13144](https://github.com/facebook/react/issues/13144))
+* Deprecate a Jest-specific `ReactTestUtils.mockComponent()` helper ([@bvaughn](https://github.com/bvaughn) in [#13193](https://github.com/facebook/react/issues/13193))
+* Warn about `ReactDOM.createPortal` usage within the test renderer ([@bvaughn](https://github.com/bvaughn) in [#12895](https://github.com/facebook/react/issues/12895))
+* Improve a confusing error message ([@gaearon](https://github.com/gaearon) in [#13351](https://github.com/facebook/react/issues/13351))
+
+### React ART
+
+* Add support for DevTools ([@yunchancho](https://github.com/yunchancho) in [#13173](https://github.com/facebook/react/issues/13173))
+
+### Schedule (Experimental)
+
+* New package for cooperatively scheduling work in a browser environment. It's used by React internally, but its public API is not finalized yet. ([@flarnie](https://github.com/flarnie) in [#12624](https://github.com/facebook/react/pull/12624))
+
+## 16.4.2 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+* Fix a crash in the server renderer when an attribute is called `hasOwnProperty`. This fix is only available in `react-dom@16.4.2`. ([@gaearon](https://github.com/gaearon) in [#13303](https://github.com/facebook/react/pull/13303))
+
+## 16.4.1 (June 13, 2018)
+
+### React
+
+* You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn](https://github.com/bvaughn) in [#12911](https://github.com/facebook/react/pull/12911))
+
+### React DOM
+
+* Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd](https://github.com/spirosikmd) in [#12135](https://github.com/facebook/react/pull/12135))
+* Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang](https://github.com/ThaddeusJiang) in [#12996](https://github.com/facebook/react/pull/12996))
+* Fix a range input not updating in some cases. ([@Illu](https://github.com/Illu) in [#12939](https://github.com/facebook/react/pull/12939))
+* Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker](https://github.com/nhunzaker) in [#12925](https://github.com/facebook/react/pull/12925))
+* Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker](https://github.com/nhunzaker) in [#12976](https://github.com/facebook/react/pull/12976))
+* Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12966](https://github.com/facebook/react/pull/12966))
+
+### React DOM Server
+
+* Fix an incorrect value being provided by new context API. ([@ericsoderberghp](https://github.com/ericsoderberghp) in [#12985](https://github.com/facebook/react/pull/12985), [@gaearon](https://github.com/gaearon) in [#13019](https://github.com/facebook/react/pull/13019))
+
+### React Test Renderer
+
+* Allow multiple root children in test renderer traversal API. ([@gaearon](https://github.com/gaearon) in [#13017](https://github.com/facebook/react/pull/13017))
+* Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz](https://github.com/fatfisz) in [#13030](https://github.com/facebook/react/pull/13030))
+
+## 16.4.0 (May 23, 2018)
+
+### React
+
+* Add a new [experimental](https://github.com/reactjs/rfcs/pull/51) `React.unstable_Profiler` component for measuring performance. ([@bvaughn](https://github.com/bvaughn) in [#12745](https://github.com/facebook/react/pull/12745))
+
+### React DOM
+
+* Add support for the Pointer Events specification. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12507](https://github.com/facebook/react/pull/12507))
+* Properly call `getDerivedStateFromProps()` regardless of the reason for re-rendering. ([@acdlite](https://github.com/acdlite) in [#12600](https://github.com/facebook/react/pull/12600) and [#12802](https://github.com/facebook/react/pull/12802))
+* Fix a bug that prevented context propagation in some cases. ([@gaearon](https://github.com/gaearon) in [#12708](https://github.com/facebook/react/pull/12708))
+* Fix re-rendering of components using `forwardRef()` on a deeper `setState()`. ([@gaearon](https://github.com/gaearon) in [#12690](https://github.com/facebook/react/pull/12690))
+* Fix some attributes incorrectly getting removed from custom element nodes. ([@airamrguez](https://github.com/airamrguez) in [#12702](https://github.com/facebook/react/pull/12702))
+* Fix context providers to not bail out on children if there's a legacy context provider above. ([@gaearon](https://github.com/gaearon) in [#12586](https://github.com/facebook/react/pull/12586))
+* Add the ability to specify `propTypes` on a context provider component. ([@nicolevy](https://github.com/nicolevy) in [#12658](https://github.com/facebook/react/pull/12658))
+* Fix a false positive warning when using `react-lifecycles-compat` in `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
+* Warn when the `forwardRef()` render function has `propTypes` or `defaultProps`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
+* Improve how `forwardRef()` and context consumers are displayed in the component stack. ([@sophiebits](https://github.com/sophiebits) in [#12777](https://github.com/facebook/react/pull/12777))
+* Change internal event names. This can break third-party packages that rely on React internals in unsupported ways. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12629](https://github.com/facebook/react/pull/12629))
+
+### React Test Renderer
+
+* Fix the `getDerivedStateFromProps()` support to match the new React DOM behavior. ([@koba04](https://github.com/koba04) in [#12676](https://github.com/facebook/react/pull/12676))
+* Fix a `testInstance.parent` crash when the parent is a fragment or another special node. ([@gaearon](https://github.com/gaearon) in [#12813](https://github.com/facebook/react/pull/12813))
+* `forwardRef()` components are now discoverable by the test renderer traversal methods. ([@gaearon](https://github.com/gaearon) in [#12725](https://github.com/facebook/react/pull/12725))
+* Shallow renderer now ignores `setState()` updaters that return `null` or `undefined`. ([@koba04](https://github.com/koba04) in [#12756](https://github.com/facebook/react/pull/12756))
+
+### React ART
+
+* Fix reading context provided from the tree managed by React DOM. ([@acdlite](https://github.com/acdlite) in [#12779](https://github.com/facebook/react/pull/12779))
+
+### React Call Return (Experimental)
+
+* This experiment was deleted because it was affecting the bundle size and the API wasn't good enough. It's likely to come back in the future in some other form. ([@gaearon](https://github.com/gaearon) in [#12820](https://github.com/facebook/react/pull/12820))
+
+### React Reconciler (Experimental)
+
+* The [new host config shape](https://github.com/facebook/react/blob/c601f7a64640290af85c9f0e33c78480656b46bc/packages/react-noop-renderer/src/createReactNoop.js#L82-L285) is flat and doesn't use nested objects. ([@gaearon](https://github.com/gaearon) in [#12792](https://github.com/facebook/react/pull/12792))
+
+## 16.3.3 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+## 16.3.2 (April 16, 2018)
+
+### React
+
+* Improve the error message when passing `null` or `undefined` to `React.cloneElement`. ([@nicolevy](https://github.com/nicolevy) in [#12534](https://github.com/facebook/react/pull/12534))
+
+### React DOM
+
+* Fix an IE crash in development when using `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12546](https://github.com/facebook/react/pull/12546))
+* Fix labels in User Timing measurements for new component types. ([@bvaughn](https://github.com/bvaughn) in [#12609](https://github.com/facebook/react/pull/12609))
+* Improve the warning about wrong component type casing. ([@nicolevy](https://github.com/nicolevy) in [#12533](https://github.com/facebook/react/pull/12533))
+* Improve general performance in development mode. ([@gaearon](https://github.com/gaearon) in [#12537](https://github.com/facebook/react/pull/12537))
+* Improve performance of the experimental `unstable_observedBits` API with nesting. ([@gaearon](https://github.com/gaearon) in [#12543](https://github.com/facebook/react/pull/12543))
+
+### React Test Renderer
+
+* Add a UMD build. ([@bvaughn](https://github.com/bvaughn) in [#12594](https://github.com/facebook/react/pull/12594))
+
+## 16.3.1 (April 3, 2018)
+
+### React
+
+* Fix a false positive warning in IE11 when using `Fragment`. ([@heikkilamarko](https://github.com/heikkilamarko) in [#12504](https://github.com/facebook/react/pull/12504))
+* Prefix a private API. ([@Andarist](https://github.com/Andarist) in [#12501](https://github.com/facebook/react/pull/12501))
+* Improve the warning when calling `setState()` in constructor. ([@gaearon](https://github.com/gaearon) in [#12532](https://github.com/facebook/react/pull/12532))
+
+### React DOM
+
+* Fix `getDerivedStateFromProps()` not getting applied in some cases. ([@acdlite](https://github.com/acdlite) in [#12528](https://github.com/facebook/react/pull/12528))
+* Fix a performance regression in development mode. ([@gaearon](https://github.com/gaearon) in [#12510](https://github.com/facebook/react/pull/12510))
+* Fix error handling bugs in development mode. ([@gaearon](https://github.com/gaearon) and [@acdlite](https://github.com/acdlite) in [#12508](https://github.com/facebook/react/pull/12508))
+* Improve user timing API messages for profiling. ([@flarnie](https://github.com/flarnie) in [#12384](https://github.com/facebook/react/pull/12384))
+
+### Create Subscription
+
+* Set the package version to be in sync with React releases. ([@bvaughn](https://github.com/bvaughn) in [#12526](https://github.com/facebook/react/pull/12526))
+* Add a peer dependency on React 16.3+. ([@NMinhNguyen](https://github.com/NMinhNguyen) in [#12496](https://github.com/facebook/react/pull/12496))
+
+## 16.3.0 (March 29, 2018)
+
+### React
+
+* Add a new officially supported context API. ([@acdlite](https://github.com/acdlite) in [#11818](https://github.com/facebook/react/pull/11818))
+* Add a new `React.createRef()` API as an ergonomic alternative to callback refs. ([@trueadm](https://github.com/trueadm) in [#12162](https://github.com/facebook/react/pull/12162))
+* Add a new `React.forwardRef()` API to let components forward their refs to a child. ([@bvaughn](https://github.com/bvaughn) in [#12346](https://github.com/facebook/react/pull/12346))
+* Fix a false positive warning in IE11 when using `React.Fragment`. ([@XaveScor](https://github.com/XaveScor) in [#11823](https://github.com/facebook/react/pull/11823))
+* Replace `React.unstable_AsyncComponent` with `React.unstable_AsyncMode`. ([@acdlite](https://github.com/acdlite) in [#12117](https://github.com/facebook/react/pull/12117))
+* Improve the error message when calling `setState()` on an unmounted component. ([@sophiebits](https://github.com/sophiebits) in [#12347](https://github.com/facebook/react/pull/12347))
+
+### React DOM
+
+* Add a new `getDerivedStateFromProps()` lifecycle and `UNSAFE_` aliases for the legacy lifecycles. ([@bvaughn](https://github.com/bvaughn) in [#12028](https://github.com/facebook/react/pull/12028))
+* Add a new `getSnapshotBeforeUpdate()` lifecycle. ([@bvaughn](https://github.com/bvaughn) in [#12404](https://github.com/facebook/react/pull/12404))
+* Add a new `<React.StrictMode>` wrapper to help prepare apps for async rendering. ([@bvaughn](https://github.com/bvaughn) in [#12083](https://github.com/facebook/react/pull/12083))
+* Add support for `onLoad` and `onError` events on the `<link>` tag. ([@roderickhsiao](https://github.com/roderickhsiao) in [#11825](https://github.com/facebook/react/pull/11825))
+* Add support for `noModule` boolean attribute on the `<script>` tag. ([@aweary](https://github.com/aweary) in [#11900](https://github.com/facebook/react/pull/11900))
+* Fix minor DOM input bugs in IE and Safari. ([@nhunzaker](https://github.com/nhunzaker) in [#11534](https://github.com/facebook/react/pull/11534))
+* Correctly detect Ctrl + Enter in `onKeyPress` in more browsers. ([@nstraub](https://github.com/nstraub) in [#10514](https://github.com/facebook/react/pull/10514))
+* Fix containing elements getting focused on SSR markup mismatch. ([@koba04](https://github.com/koba04) in [#11737](https://github.com/facebook/react/pull/11737))
+* Fix `value` and `defaultValue` to ignore Symbol values. ([@nhunzaker](https://github.com/nhunzaker) in [#11741](https://github.com/facebook/react/pull/11741))
+* Fix refs to class components not getting cleaned up when the attribute is removed. ([@bvaughn](https://github.com/bvaughn) in [#12178](https://github.com/facebook/react/pull/12178))
+* Fix an IE/Edge issue when rendering inputs into a different window. ([@M-ZubairAhmed](https://github.com/M-ZubairAhmed) in [#11870](https://github.com/facebook/react/pull/11870))
+* Throw with a meaningful message if the component runs after jsdom has been destroyed. ([@gaearon](https://github.com/gaearon) in [#11677](https://github.com/facebook/react/pull/11677))
+* Don't crash if there is a global variable called `opera` with a `null` value. [@alisherdavronov](https://github.com/alisherdavronov) in [#11854](https://github.com/facebook/react/pull/11854))
+* Don't check for old versions of Opera. ([@skiritsis](https://github.com/skiritsis) in [#11921](https://github.com/facebook/react/pull/11921))
+* Deduplicate warning messages about `<option selected>`. ([@watadarkstar](https://github.com/watadarkstar) in [#11821](https://github.com/facebook/react/pull/11821))
+* Deduplicate warning messages about invalid callback. ([@yenshih](https://github.com/yenshih) in [#11833](https://github.com/facebook/react/pull/11833))
+* Deprecate `ReactDOM.unstable_createPortal()` in favor of `ReactDOM.createPortal()`. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#11747](https://github.com/facebook/react/pull/11747))
+* Don't emit User Timing entries for context types. ([@abhaynikam](https://github.com/abhaynikam) in [#12250](https://github.com/facebook/react/pull/12250))
+* Improve the error message when context consumer child isn't a function. ([@raunofreiberg](https://github.com/raunofreiberg) in [#12267](https://github.com/facebook/react/pull/12267))
+* Improve the error message when adding a ref to a functional component. ([@skiritsis](https://github.com/skiritsis) in [#11782](https://github.com/facebook/react/pull/11782))
+
+### React DOM Server
+
+* Prevent an infinite loop when attempting to render portals with SSR. ([@gaearon](https://github.com/gaearon) in [#11709](https://github.com/facebook/react/pull/11709))
+* Warn if a class doesn't extend `React.Component`. ([@wyze](https://github.com/wyze) in [#11993](https://github.com/facebook/react/pull/11993))
+* 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
+
+* 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))
+* Shallow renderer should filter legacy context according to `contextTypes`. ([@koba04](https://github.com/koba04) in [#11922](https://github.com/facebook/react/pull/11922))
+* Add an unstable API for testing asynchronous rendering. ([@acdlite](https://github.com/acdlite) in [#12478](https://github.com/facebook/react/pull/12478))
+
+### React Is (New)
+
+* First release of the [new package](https://github.com/facebook/react/tree/main/packages/react-is) that libraries can use to detect different React node types. ([@bvaughn](https://github.com/bvaughn) in [#12199](https://github.com/facebook/react/pull/12199))
+* Add `ReactIs.isValidElementType()` to help higher-order components validate their inputs. ([@jamesreggio](https://github.com/jamesreggio) in [#12483](https://github.com/facebook/react/pull/12483))
+
+### React Lifecycles Compat (New)
+
+* First release of the [new package](https://github.com/reactjs/react-lifecycles-compat) to help library developers target multiple versions of React. ([@bvaughn](https://github.com/bvaughn) in [#12105](https://github.com/facebook/react/pull/12105))
+
+### Create Subscription (New)
+
+* First release of the [new package](https://github.com/facebook/react/tree/main/packages/create-subscription) to subscribe to external data sources safely for async rendering. ([@bvaughn](https://github.com/bvaughn) in [#12325](https://github.com/facebook/react/pull/12325))
+
+### React Reconciler (Experimental)
+
+* Expose `react-reconciler/persistent` for building renderers that use persistent data structures. ([@gaearon](https://github.com/gaearon) in [#12156](https://github.com/facebook/react/pull/12156))
+* Pass host context to `finalizeInitialChildren()`. ([@jquense](https://github.com/jquense) in [#11970](https://github.com/facebook/react/pull/11970))
+* Remove `useSyncScheduling` from the host config. ([@acdlite](https://github.com/acdlite) in [#11771](https://github.com/facebook/react/pull/11771))
+
+### React Call Return (Experimental)
+
+* Fix a crash on updates. ([@rmhartog](https://github.com/rmhartog) in [#11955](https://github.com/facebook/react/pull/11955))
+
+## 16.2.1 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+## 16.2.0 (November 28, 2017)
+
+### React
+
+* Add `Fragment` as named export to React. ([@clemmy](https://github.com/clemmy) in [#10783](https://github.com/facebook/react/pull/10783))
+* Support experimental Call/Return types in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11422](https://github.com/facebook/react/pull/11422))
+
+### React DOM
+
+* Fix radio buttons not getting checked when using multiple lists of radios. ([@landvibe](https://github.com/landvibe) in [#11227](https://github.com/facebook/react/pull/11227))
+* Fix radio buttons not receiving the `onChange` event in some cases. ([@jquense](https://github.com/jquense) in [#11028](https://github.com/facebook/react/pull/11028))
+
+### React Test Renderer
+
+* Fix `setState()` callback firing too early when called from `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) in [#11507](https://github.com/facebook/react/pull/11507))
+
+### React Reconciler
+
+* Expose `react-reconciler/reflection` with utilities useful to custom renderers. ([@rivenhk](https://github.com/rivenhk) in [#11683](https://github.com/facebook/react/pull/11683))
+
+### Internal Changes
+
+* Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)!
+
+## 16.1.2 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+## 16.1.1 (November 13, 2017)
+
+### React
+
+* Improve the warning about undefined component type. ([@selbekk](https://github.com/selbekk) in [#11505](https://github.com/facebook/react/pull/11505))
+
+### React DOM
+
+* Support string values for the `capture` attribute. ([@maxschmeling](https://github.com/maxschmeling) in [#11424](https://github.com/facebook/react/pull/11424))
+
+### React DOM Server
+
+* Don't freeze the `ReactDOMServer` public API. ([@travi](https://github.com/travi) in [#11531](https://github.com/facebook/react/pull/11531))
+* Don't emit `autoFocus={false}` attribute on the server. ([@gaearon](https://github.com/gaearon) in [#11543](https://github.com/facebook/react/pull/11543))
+
+### React Reconciler
+
+* Change the hydration API for better Flow typing. ([@sebmarkbage](https://github.com/sebmarkbage) in [#11493](https://github.com/facebook/react/pull/11493))
+
+## 16.1.0 (November 9, 2017)
+
+### Discontinuing Bower Releases
+
+Starting with 16.1.0, we will no longer be publishing new releases on Bower. You can continue using Bower for old releases, or point your Bower configs to the [React UMD builds hosted on unpkg](https://reactjs.org/docs/installation.html#using-a-cdn) that mirror npm releases and will continue to be updated.
+
+### All Packages
+
+* Fix an accidental extra global variable in the UMD builds. ([@gaearon](https://github.com/gaearon) in [#10935](https://github.com/facebook/react/pull/10935))
+
+### React
+
+* Add support for portals in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11378](https://github.com/facebook/react/pull/11378))
+* Warn when a class has a `render` method but doesn't extend a known base class. ([@sw-yx](https://github.com/sw-yx) in [#11168](https://github.com/facebook/react/pull/11168))
+* Improve the warning when accidentally returning an object from constructor. ([@deanbrophy](https://github.com/deanbrophy) in [#11395](https://github.com/facebook/react/pull/11395))
+
+### React DOM
+
+* Allow `on` as a custom attribute for AMP. ([@nuc](https://github.com/nuc) in [#11153](https://github.com/facebook/react/pull/11153))
+* Fix `onMouseEnter` and `onMouseLeave` firing on wrong elements. ([@gaearon](https://github.com/gaearon) in [#11164](https://github.com/facebook/react/pull/11164))
+* Fix `null` showing up in a warning instead of the component stack. ([@gaearon](https://github.com/gaearon) in [#10915](https://github.com/facebook/react/pull/10915))
+* Fix IE11 crash in development mode. ([@leidegre](https://github.com/leidegre) in [#10921](https://github.com/facebook/react/pull/10921))
+* Fix `tabIndex` not getting applied to SVG elements. ([@gaearon](https://github.com/gaearon) in [#11034](https://github.com/facebook/react/pull/11034))
+* Fix SVG children not getting cleaned up on `dangerouslySetInnerHTML` in IE. ([@OriR](https://github.com/OriR) in [#11108](https://github.com/facebook/react/pull/11108))
+* Fix false positive text mismatch warning caused by newline normalization. ([@gaearon](https://github.com/gaearon) in [#11119](https://github.com/facebook/react/pull/11119))
+* Fix `form.reset()` to respect `defaultValue` on uncontrolled `<select>`. ([@aweary](https://github.com/aweary) in [#11057](https://github.com/facebook/react/pull/11057))
+* Fix `<textarea>` placeholder not rendering on IE11. ([@gaearon](https://github.com/gaearon) in [#11177](https://github.com/facebook/react/pull/11177))
+* Fix a crash rendering into shadow root. ([@gaearon](https://github.com/gaearon) in [#11037](https://github.com/facebook/react/pull/11037))
+* Fix false positive warning about hydrating mixed case SVG tags. ([@gaearon](https://github.com/gaearon) in [#11174](https://github.com/facebook/react/pull/11174))
+* Suppress the new unknown tag warning for `<dialog>` element. ([@gaearon](https://github.com/gaearon) in [#11035](https://github.com/facebook/react/pull/11035))
+* Warn when defining a non-existent `componentDidReceiveProps` method. ([@iamtommcc](https://github.com/iamtommcc) in [#11479](https://github.com/facebook/react/pull/11479))
+* Warn about function child no more than once. ([@andreysaleba](https://github.com/andreysaleba) in [#11120](https://github.com/facebook/react/pull/11120))
+* Warn about nested updates no more than once. ([@anushreesubramani](https://github.com/anushreesubramani) in [#11113](https://github.com/facebook/react/pull/11113))
+* Deduplicate other warnings about updates. ([@anushreesubramani](https://github.com/anushreesubramani) in [#11216](https://github.com/facebook/react/pull/11216))
+* Include component stack into the warning about `contentEditable` and `children`. ([@Ethan-Arrowood](https://github.com/Ethan-Arrowood) in [#11208](https://github.com/facebook/react/pull/11208))
+* Improve the warning about booleans passed to event handlers. ([@NicBonetto](https://github.com/NicBonetto) in [#11308](https://github.com/facebook/react/pull/11308))
+* Improve the warning when a multiple `select` gets null `value`. ([@Hendeca](https://github.com/Hendeca) in [#11141](https://github.com/facebook/react/pull/11141))
+* Move link in the warning message to avoid redirect. ([@marciovicente](https://github.com/marciovicente) in [#11400](https://github.com/facebook/react/pull/11400))
+* Add a way to suppress the React DevTools installation prompt. ([@gaearon](https://github.com/gaearon) in [#11448](https://github.com/facebook/react/pull/11448))
+* Remove unused code. ([@gaearon](https://github.com/gaearon) in [#10802](https://github.com/facebook/react/pull/10802), [#10803](https://github.com/facebook/react/pull/10803))
+
+### React DOM Server
+
+* Add a new `suppressHydrationWarning` attribute for intentional client/server text mismatches. ([@sebmarkbage](https://github.com/sebmarkbage) in [#11126](https://github.com/facebook/react/pull/11126))
+* Fix markup generation when components return strings. ([@gaearon](https://github.com/gaearon) in [#11109](https://github.com/facebook/react/pull/11109))
+* Fix obscure error message when passing an invalid style value. ([@iamdustan](https://github.com/iamdustan) in [#11173](https://github.com/facebook/react/pull/11173))
+* Include the `autoFocus` attribute into SSR markup. ([@gaearon](https://github.com/gaearon) in [#11192](https://github.com/facebook/react/pull/11192))
+* Include the component stack into more warnings. ([@gaearon](https://github.com/gaearon) in [#11284](https://github.com/facebook/react/pull/11284))
+
+### React Test Renderer and Test Utils
+
+* Fix multiple `setState()` calls in `componentWillMount()` in shallow renderer. ([@Hypnosphi](https://github.com/Hypnosphi) in [#11167](https://github.com/facebook/react/pull/11167))
+* Fix shallow renderer to ignore `shouldComponentUpdate()` after `forceUpdate()`. ([@d4rky-pl](https://github.com/d4rky-pl) in [#11239](https://github.com/facebook/react/pull/11239) and [#11439](https://github.com/facebook/react/pull/11439))
+* Handle `forceUpdate()` and `React.PureComponent` correctly. ([@koba04](https://github.com/koba04) in [#11440](https://github.com/facebook/react/pull/11440))
+* Add back support for running in production mode. ([@gaearon](https://github.com/gaearon) in [#11112](https://github.com/facebook/react/pull/11112))
+* Add a missing `package.json` dependency. ([@gaearon](https://github.com/gaearon) in [#11340](https://github.com/facebook/react/pull/11340))
+
+### React ART
+
+* Add a missing `package.json` dependency. ([@gaearon](https://github.com/gaearon) in [#11341](https://github.com/facebook/react/pull/11341))
+* Expose `react-art/Circle`, `react-art/Rectangle`, and `react-art/Wedge`. ([@gaearon](https://github.com/gaearon) in [#11343](https://github.com/facebook/react/pull/11343))
+
+### React Reconciler (Experimental)
+
+* First release of the [new experimental package](https://github.com/facebook/react/blob/main/packages/react-reconciler/README.md) for creating custom renderers. ([@iamdustan](https://github.com/iamdustan) in [#10758](https://github.com/facebook/react/pull/10758))
+* Add support for React DevTools. ([@gaearon](https://github.com/gaearon) in [#11463](https://github.com/facebook/react/pull/11463))
+
+### React Call Return (Experimental)
+
+* First release of the [new experimental package](https://github.com/facebook/react/tree/main/packages/react-call-return) for parent-child communication. ([@gaearon](https://github.com/gaearon) in [#11364](https://github.com/facebook/react/pull/11364))
+
+## 16.0.1 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+## 16.0.0 (September 26, 2017)
+
+### New JS Environment Requirements
+
+ * React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), as well as [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). If you support older browsers and devices which may not yet provide these natively (e.g. <IE11), [you may want to include a polyfill](https://gist.github.com/gaearon/9a4d54653ae9c50af6c54b4e0e56b583).
+
+### New Features
+* Components can now return arrays and strings from `render`. (Docs coming soon!)
+* Improved error handling with introduction of "error boundaries". [Error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
+* First-class support for declaratively rendering a subtree into another DOM node with `ReactDOM.createPortal()`. (Docs coming soon!)
+* Streaming mode for server side rendering is enabled with `ReactDOMServer.renderToNodeStream()` and `ReactDOMServer.renderToStaticNodeStream()`. ([@aickin](https://github.com/aickin) in [#10425](https://github.com/facebook/react/pull/10425), [#10044](https://github.com/facebook/react/pull/10044), [#10039](https://github.com/facebook/react/pull/10039), [#10024](https://github.com/facebook/react/pull/10024), [#9264](https://github.com/facebook/react/pull/9264), and others.)
+* [React DOM now allows passing non-standard attributes](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
+
+### Breaking Changes
+- There are several changes to the behavior of scheduling and lifecycle methods:
+  * `ReactDOM.render()` and `ReactDOM.unstable_renderIntoContainer()` now return `null` if called from inside a lifecycle method.
+    * To work around this, you can either use [the new portal API](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs](https://github.com/facebook/react/issues/10309#issuecomment-318434635).
+  * Minor changes to `setState` behavior:
+    * Calling `setState` with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.
+    * Calling `setState` directly in render always causes an update. This was not previously the case. Regardless, you should not be calling `setState` from render.
+    * `setState` callback (second argument) now fires immediately after `componentDidMount` / `componentDidUpdate` instead of after all components have rendered.
+  * When replacing `<A />` with `<B />`,  `B.componentWillMount` now always happens before  `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases.
+  * Previously, changing the `ref` to a component would always detach the ref before that component's render is called. Now, we change the `ref` later, when applying the changes to the DOM.
+  * It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987)
+  * `componentDidUpdate` lifecycle no longer receives `prevContext` param. ([@bvaughn](https://github.com/bvaughn) in [#8631](https://github.com/facebook/react/pull/8631))
+  * Non-unique keys may now cause children to be duplicated and/or omitted. Using non-unique keys is not (and has never been) supported, but previously it was a hard error.
+  * Shallow renderer no longer calls `componentDidUpdate()` because DOM refs are not available. This also makes it consistent with `componentDidMount()` (which does not get called in previous versions either).
+  * Shallow renderer does not implement `unstable_batchedUpdates()` anymore.
+  * `ReactDOM.unstable_batchedUpdates` now only takes one extra argument after the callback.
+- The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
+  - `react/dist/react.js` → `react/umd/react.development.js`
+  - `react/dist/react.min.js` → `react/umd/react.production.min.js`
+  - `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js`
+  - `react-dom/dist/react-dom.min.js` → `react-dom/umd/react-dom.production.min.js`
+* The server renderer has been completely rewritten, with some improvements:
+  * Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. It also doesn't use comments for empty components and data-reactid attributes on each node anymore.
+  * Hydrating a server rendered container now has an explicit API. Use `ReactDOM.hydrate` instead of `ReactDOM.render` if you're reviving server rendered HTML. Keep using `ReactDOM.render` if you're just doing client-side rendering.
+* When "unknown" props are passed to DOM components, for valid values, React will now render them in the DOM. [See this post for more details.](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html) ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
+* Errors in the render and lifecycle methods now unmount the component tree by default. To prevent this, add [error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) to the appropriate places in the UI.
+
+### Removed Deprecations
+
+- There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
+- The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as create-react-class, `React.PropTypes` as prop-types, `React.DOM` as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
+
+## 15.7.0 (October 14, 2020)
+
+### React
+
+* Backport support for the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) to 15.x. ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299) and [@gaearon](https://github.com/gaearon) in [#20024](https://github.com/facebook/react/pull/20024))
+
+## 15.6.2 (September 25, 2017)
+
+### All Packages
+* Switch from BSD + Patents to MIT license
+
+### React DOM
+
+* Fix a bug where modifying `document.documentMode` would trigger IE detection in other browsers, breaking change events. ([@aweary](https://github.com/aweary) in [#10032](https://github.com/facebook/react/pull/10032))
+* CSS Columns are treated as unitless numbers. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/10115))
+* Fix bug in QtWebKit when wrapping synthetic events in proxies. ([@walrusfruitcake](https://github.com/walrusfruitcake) in [#10115](https://github.com/facebook/react/pull/10011))
+* Prevent event handlers from receiving extra argument in development. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/8363))
+* Fix cases where `onChange` would not fire with `defaultChecked` on radio inputs. ([@jquense](https://github.com/jquense) in [#10156](https://github.com/facebook/react/pull/10156))
+* Add support for `controlList` attribute to allowed DOM properties ([@nhunzaker](https://github.com/nhunzaker) in [#9940](https://github.com/facebook/react/pull/9940))
+* Fix a bug where creating an element with a ref in a constructor did not throw an error in development. ([@iansu](https://github.com/iansu) in [#10025](https://github.com/facebook/react/pull/10025))
+
+## 15.6.1 (June 14, 2017)
+
+### React DOM
+
+* Fix a crash on iOS Safari. ([@jquense](https://github.com/jquense) in [#9960](https://github.com/facebook/react/pull/9960))
+* Don't add `px` to custom CSS property values. ([@TrySound](https://github.com/TrySound) in [#9966](https://github.com/facebook/react/pull/9966))
+
+## 15.6.0 (June 13, 2017)
+
+### React
+
+* Downgrade deprecation warnings to use `console.warn` instead of `console.error`. ([@flarnie](https://github.com/flarnie) in [#9753](https://github.com/facebook/react/pull/9753))
+* Add a deprecation warning for `React.createClass`. Points users to `create-react-class` instead. ([@flarnie](https://github.com/flarnie) in [#9771](https://github.com/facebook/react/pull/9771))
+* Add deprecation warnings and separate module for `React.DOM` factory helpers. ([@nhunzaker](https://github.com/nhunzaker) in [#8356](https://github.com/facebook/react/pull/8356))
+* Warn for deprecation of `React.createMixin` helper, which was never used. ([@aweary](https://github.com/aweary) in [#8853](https://github.com/facebook/react/pull/8853))
+
+### React DOM
+
+* Add support for CSS variables in `style` attribute. ([@aweary](https://github.com/aweary) in [#9302](https://github.com/facebook/react/pull/9302))
+* Add support for CSS Grid style properties. ([@ericsakmar](https://github.com/ericsakmar) in [#9185](https://github.com/facebook/react/pull/9185))
+* Fix bug where inputs mutated value on type conversion. ([@nhunzaker](https://github.com/mhunzaker) in [#9806](https://github.com/facebook/react/pull/9806))
+* Fix issues with `onChange` not firing properly for some inputs. ([@jquense](https://github.com/jquense) in [#8575](https://github.com/facebook/react/pull/8575))
+* Fix bug where controlled number input mistakenly allowed period. ([@nhunzaker](https://github.com/nhunzaker) in [#9584](https://github.com/facebook/react/pull/9584))
+* Fix bug where performance entries were being cleared. ([@chrisui](https://github.com/chrisui) in [#9451](https://github.com/facebook/react/pull/9451))
+
+### React Addons
+
+* Fix AMD support for addons depending on `react`. ([@flarnie](https://github.com/flarnie) in [#9919](https://github.com/facebook/react/issues/9919))
+* Fix `isMounted()` to return `true` in `componentWillUnmount`. ([@mridgway](https://github.com/mridgway) in [#9638](https://github.com/facebook/react/issues/9638))
+* Fix `react-addons-update` to not depend on native `Object.assign`. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
+* Remove broken Google Closure Compiler annotation from `create-react-class`. ([@gaearon](https://github.com/gaearon) in [#9933](https://github.com/facebook/react/pull/9933))
+* Remove unnecessary dependency from `react-linked-input`. ([@gaearon](https://github.com/gaearon) in [#9766](https://github.com/facebook/react/pull/9766))
+* Point `react-addons-(css-)transition-group` to the new package. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
+
+## 15.5.4 (April 11, 2017)
+
+### React Addons
+* **Critical Bugfix:** Update the version of `prop-types` to fix critical bug.  ([@gaearon](https://github.com/gaearon) in [545c87f](https://github.com/facebook/react/commit/545c87fdc348f82eb0c3830bef715ed180785390))
+* Fix `react-addons-create-fragment` package to include `loose-envify` transform for Browserify users. ([@mridgway](https://github.com/mridgway) in [#9642](https://github.com/facebook/react/pull/9642))
+
+### React Test Renderer
+* Fix compatibility with Enzyme by exposing `batchedUpdates` on shallow renderer. ([@gaearon](https://github.com/gaearon) in [9382](https://github.com/facebook/react/commit/69933e25c37cf5453a9ef132177241203ee8d2fd))
+
+## 15.5.3 (April 7, 2017)
+
+**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
+
+### React Addons
+* Fix `react-addons-create-fragment` package to export correct thing. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
+* Fix `create-react-class` package to include `loose-envify` transform for Browserify users. ([@mridgway](https://github.com/mridgway) in [#9642](https://github.com/facebook/react/pull/9642))
+
+## 15.5.2 (April 7, 2017)
+
+**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
+
+### React Addons
+* Fix the production single-file builds to not include the development code. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
+* Apply better minification to production single-file builds. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
+* Add missing and remove unnecessary dependencies to packages. ([@gaearon](https://github.com/gaearon) in [#9385](https://github.com/facebook/react/pull/9383))
+
+## 15.5.1 (April 7, 2017)
+
+**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
+
+### React
+* Fix erroneous PropTypes access warning. ([@acdlite](https://github.com/acdlite) in ([ec97ebb](https://github.com/facebook/react/commit/ec97ebbe7f15b58ae2f1323df39d06f119873344))
+
+## 15.5.0 (April 7, 2017)
+
+**Note: this release has a critical issue and was deprecated. Please update to 15.5.4 or higher.**
+
+### React
+* <s>Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [#d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e))</s>
+* Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [#043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28))
+* Fixed an issue when using `ReactDOM` together with `ReactDOMServer`. ([@wacii](https://github.com/wacii) in [#9005](https://github.com/facebook/react/pull/9005))
+* Fixed issue with Closure Compiler. ([@anmonteiro](https://github.com/anmonteiro) in [#8895](https://github.com/facebook/react/pull/8895))
+* Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882))
+* Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495))
+
+### React DOM
+* Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359))
+* Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn))
+
+### React Test Renderer
+* Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512))
+* Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn))
+
+### React Addons
+* Last release for addons; they will no longer be actively maintained.
+* Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a))
+* Updated to remove references to `React.createClass` and `React.PropTypes` ([@acdlite](https://github.com/acdlite) in [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175))
+* `react-addons-test-utils` is deprecated. Use `react-dom/test-utils` and `react-test-renderer/shallow` instead. ([@bvaughn](https://github.com/bvaughn))
+
+## 15.4.2 (January 6, 2017)
+
+### React
+* Fixed build issues with the Brunch bundler. ([@gaearon](https://github.com/gaearon) in [#8686](https://github.com/facebook/react/pull/8686))
+* Improved error messages for invalid element types. ([@sophiebits](https://github.com/sophiebits) in [#8612](https://github.com/facebook/react/pull/8612))
+* Removed a warning about `getInitialState` when `this.state` is set. ([@bvaughn](https://github.com/bvaughn) in [#8594](https://github.com/facebook/react/pull/8594))
+* Removed some dead code. ([@diegomura](https://github.com/diegomura) in [#8050](https://github.com/facebook/react/pull/8050), [@dfrownfelter](https://github.com/dfrownfelter) in [#8597](https://github.com/facebook/react/pull/8597))
+
+### React DOM
+* Fixed a decimal point issue on uncontrolled number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7750](https://github.com/facebook/react/pull/7750))
+* Fixed rendering of textarea placeholder in IE11. ([@aweary](https://github.com/aweary) in [#8020](https://github.com/facebook/react/pull/8020))
+* Worked around a script engine bug in IE9. ([@eoin](https://github.com/eoin) in [#8018](https://github.com/facebook/react/pull/8018))
+
+### React Addons
+* Fixed build issues in RequireJS and SystemJS environments. ([@gaearon](https://github.com/gaearon) in [#8686](https://github.com/facebook/react/pull/8686))
+* Added missing package dependencies. ([@kweiberth](https://github.com/kweiberth) in [#8467](https://github.com/facebook/react/pull/8467))
+
+## 15.4.1 (November 22, 2016)
+
+### React
+* Restructure variable assignment to work around a Rollup bug ([@gaearon](https://github.com/gaearon) in [#8384](https://github.com/facebook/react/pull/8384))
+
+### React DOM
+* Fixed event handling on disabled button elements ([@sophiebits](https://github.com/sophiebits) in [#8387](https://github.com/facebook/react/pull/8387))
+* Fixed compatibility of browser build with AMD environments ([@zpao](https://github.com/zpao) in [#8374](https://github.com/facebook/react/pull/8374))
+
+## 15.4.0 (November 16, 2016)
+
+### React
+* React package and browser build no longer "secretly" includes React DOM. ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))
+* Required PropTypes now fail with specific messages for null and undefined. ([@chenglou](https://github.com/chenglou) in [#7291](https://github.com/facebook/react/pull/7291))
+* Improved development performance by freezing children instead of copying. ([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455))
+
+### React DOM
+* Fixed occasional test failures when React DOM is used together with shallow renderer. ([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097))
+* Added a warning for invalid `aria-` attributes. ([@jessebeach](https://github.com/jessebeach) in [#7744](https://github.com/facebook/react/pull/7744))
+* Added a warning for using `autofocus` rather than `autoFocus`. ([@hkal](https://github.com/hkal) in [#7694](https://github.com/facebook/react/pull/7694))
+* Removed an unnecessary warning about polyfilling `String.prototype.split`. ([@nhunzaker](https://github.com/nhunzaker) in [#7629](https://github.com/facebook/react/pull/7629))
+* Clarified the warning about not calling PropTypes manually. ([@jedwards1211](https://github.com/jedwards1211) in [#7777](https://github.com/facebook/react/pull/7777))
+* The unstable `batchedUpdates` API now passes the wrapped function's return value through. ([@bgnorlov](https://github.com/bgnorlov) in [#7444](https://github.com/facebook/react/pull/7444))
+* Fixed a bug with updating text in IE 8. ([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832))
+
+### React Perf
+* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline. ([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549))
+
+### React Test Utils
+* If you call `Simulate.click()` on a `<input disabled onClick={foo} />` then `foo` will get called whereas it didn't before. ([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642))
+
+### React Test Renderer
+* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file. ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))
+* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing. ([@Aweary](https://github.com/Aweary) in [#7649](https://github.com/facebook/react/pull/7649), [#8261](https://github.com/facebook/react/pull/8261))
+
+
+## 15.3.2 (September 19, 2016)
+
+### React
+- Remove plain object warning from React.createElement & React.cloneElement. ([@spudly](https://github.com/spudly) in [#7724](https://github.com/facebook/react/pull/7724))
+
+### React DOM
+- Add `playsInline` to supported HTML attributes. ([@reaperhulk](https://github.com/reaperhulk) in [#7519](https://github.com/facebook/react/pull/7519))
+- Add `as` to supported HTML attributes. ([@kevinslin](https://github.com/kevinslin) in [#7582](https://github.com/facebook/react/pull/7582))
+- Improve DOM nesting validation warning about whitespace. ([@sophiebits](https://github.com/sophiebits) in [#7515](https://github.com/facebook/react/pull/7515))
+- Avoid "Member not found" exception in IE10 when calling `preventDefault()` in Synthetic Events. ([@g-palmer](https://github.com/g-palmer) in [#7411](https://github.com/facebook/react/pull/7411))
+- Fix memory leak in `onSelect` implementation. ([@AgtLucas](https://github.com/AgtLucas) in [#7533](https://github.com/facebook/react/pull/7533))
+- Improve robustness of `document.documentMode` checks to handle Google Tag Manager. ([@SchleyB](https://github.com/SchleyB) in [#7594](https://github.com/facebook/react/pull/7594))
+- Add more cases to controlled inputs warning. ([@marcin-mazurek](https://github.com/marcin-mazurek) in [#7544](https://github.com/facebook/react/pull/7544))
+- Handle case of popup blockers overriding `document.createEvent`. ([@Andarist](https://github.com/Andarist) in [#7621](https://github.com/facebook/react/pull/7621))
+- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@zpao](https://github.com/zpao) in [#7618](https://github.com/facebook/react/pull/7618))
+- Improve handling of Japanese IME on Internet Explorer. ([@msmania](https://github.com/msmania) in [#7107](https://github.com/facebook/react/pull/7107))
+
+### React Test Renderer
+- Support error boundaries. ([@millermedeiros](https://github.com/millermedeiros) in [#7558](https://github.com/facebook/react/pull/7558), [#7569](https://github.com/facebook/react/pull/7569), [#7619](https://github.com/facebook/react/pull/7619))
+- Skip null ref warning. ([@Aweary](https://github.com/Aweary) in [#7658](https://github.com/facebook/react/pull/7658))
+
+### React Perf Add-on
+- Ensure lifecycle timers are stopped on errors. ([@gaearon](https://github.com/gaearon) in [#7548](https://github.com/facebook/react/pull/7548))
+
+
+## 15.3.1 (August 19, 2016)
+
+### React
+
+- Improve performance of development builds in various ways. ([@gaearon](https://github.com/gaearon) in [#7461](https://github.com/facebook/react/pull/7461), [#7463](https://github.com/facebook/react/pull/7463), [#7483](https://github.com/facebook/react/pull/7483), [#7488](https://github.com/facebook/react/pull/7488), [#7491](https://github.com/facebook/react/pull/7491), [#7510](https://github.com/facebook/react/pull/7510))
+- Cleanup internal hooks to improve performance of development builds. ([@gaearon](https://github.com/gaearon) in [#7464](https://github.com/facebook/react/pull/7464), [#7472](https://github.com/facebook/react/pull/7472), [#7481](https://github.com/facebook/react/pull/7481), [#7496](https://github.com/facebook/react/pull/7496))
+- Upgrade fbjs to pick up another performance improvement from [@gaearon](https://github.com/gaearon) for development builds. ([@zpao](https://github.com/zpao) in [#7532](https://github.com/facebook/react/pull/7532))
+- Improve startup time of React in Node. ([@zertosh](https://github.com/zertosh) in [#7493](https://github.com/facebook/react/pull/7493))
+- Improve error message of `React.Children.only`. ([@sophiebits](https://github.com/sophiebits) in [#7514](https://github.com/facebook/react/pull/7514))
+
+### React DOM
+- Avoid `<input>` validation warning from browsers when changing `type`. ([@nhunzaker](https://github.com/nhunzaker) in [#7333](https://github.com/facebook/react/pull/7333))
+- Avoid "Member not found" exception in IE10 when calling `stopPropagation()` in Synthetic Events. ([@nhunzaker](https://github.com/nhunzaker) in [#7343](https://github.com/facebook/react/pull/7343))
+- Fix issue resulting in inability to update some `<input>` elements in mobile browsers. ([@keyanzhang](https://github.com/keyanzhang) in [#7397](https://github.com/facebook/react/pull/7397))
+- Fix memory leak in server rendering. ([@keyanzhang](https://github.com/keyanzhang) in [#7410](https://github.com/facebook/react/pull/7410))
+- Fix issue resulting in `<input type="range">` values not updating when changing `min` or `max`. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7486](https://github.com/facebook/react/pull/7486))
+- Add new warning for rare case of attempting to unmount a container owned by a different copy of React. ([@ventuno](https://github.com/ventuno) in [#7456](https://github.com/facebook/react/pull/7456))
+
+### React Test Renderer
+- Fix ReactTestInstance::toJSON() with empty top-level components. ([@Morhaus](https://github.com/Morhaus) in [#7523](https://github.com/facebook/react/pull/7523))
+
+### React Native Renderer
+- Change `trackedTouchCount` invariant into a console.error for better reliability. ([@yungsters](https://github.com/yungsters) in [#7400](https://github.com/facebook/react/pull/7400))
+
+
+## 15.3.0 (July 29, 2016)
+
+### React
+- Add `React.PureComponent` - a new base class to extend, replacing `react-addons-pure-render-mixin` now that mixins don't work with ES2015 classes. ([@sophiebits](https://github.com/sophiebits) in [#7195](https://github.com/facebook/react/pull/7195))
+- Add new warning when modifying `this.props.children`. ([@jimfb](https://github.com/jimfb) in [#7001](https://github.com/facebook/react/pull/7001))
+- Fixed issue with ref resolution order. ([@gaearon](https://github.com/gaearon) in [#7101](https://github.com/facebook/react/pull/7101))
+- Warn when mixin is undefined. ([@swaroopsm](https://github.com/swaroopsm) in [#6158](https://github.com/facebook/react/pull/6158))
+- Downgrade "unexpected batch number" invariant to a warning. ([@sophiebits](https://github.com/sophiebits) in [#7133](https://github.com/facebook/react/pull/7133))
+- Validate arguments to `oneOf` and `oneOfType` PropTypes sooner. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6316](https://github.com/facebook/react/pull/6316))
+- Warn when calling PropTypes directly. ([@Aweary](https://github.com/Aweary) in [#7132](https://github.com/facebook/react/pull/7132), [#7194](https://github.com/facebook/react/pull/7194))
+- Improve warning when using Maps as children. ([@keyanzhang](https://github.com/keyanzhang) in [#7260](https://github.com/facebook/react/pull/7260))
+- Add additional type information to the `PropTypes.element` warning. ([@alexzherdev](https://github.com/alexzherdev) in [#7319](https://github.com/facebook/react/pull/7319))
+- Improve component identification in no-op `setState` warning. ([@keyanzhang](https://github.com/keyanzhang) in [#7326](https://github.com/facebook/react/pull/7326))
+
+### React DOM
+- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
+- Add `xmlns`, `xmlnsXlink` to supported SVG attributes. ([@salzhrani](https://github.com/salzhrani) in [#6471](https://github.com/facebook/react/pull/6471))
+- Add `referrerPolicy` to supported HTML attributes. ([@Aweary](https://github.com/Aweary) in [#7274](https://github.com/facebook/react/pull/7274))
+- Fix issue resulting in `<input type="range">` initial value being rounded. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7251](https://github.com/facebook/react/pull/7251))
+
+### React Test Renderer
+- Initial public release of package allowing more focused testing. Install with `npm install react-test-renderer`. ([@sophiebits](https://github.com/sophiebits) in [#6944](https://github.com/facebook/react/pull/6944), [#7258](https://github.com/facebook/react/pull/7258), [@iamdustan](https://github.com/iamdustan) in [#7362](https://github.com/facebook/react/pull/7362))
+
+### React Perf Add-on
+- Fix issue resulting in excessive warnings when encountering an internal measurement error. ([@sassanh](https://github.com/sassanh) in [#7299](https://github.com/facebook/react/pull/7299))
+
+### React TestUtils Add-on
+- Implement `type` property on for events created via `TestUtils.Simulate.*`. ([@yaycmyk](https://github.com/yaycmyk) in [#6154](https://github.com/facebook/react/pull/6154))
+- Fix crash when running TestUtils with the production build of React. ([@gaearon](https://github.com/gaearon) in [#7246](https://github.com/facebook/react/pull/7246))
+
+
+## 15.2.1 (July 8, 2016)
+
+### React
+- Fix errant warning about missing React element. ([@gaearon](https://github.com/gaearon) in [#7193](https://github.com/facebook/react/pull/7193))
+- Better removal of dev-only code, leading to a small reduction in the minified production bundle size. ([@gaearon](https://github.com/gaearon) in [#7188](https://github.com/facebook/react/pull/7188), [#7189](https://github.com/facebook/react/pull/7189))
+
+### React DOM
+- Add stack trace to null input value warning. ([@jimfb](https://github.com/jimfb) in [#7040](https://github.com/facebook/react/pull/7040))
+- Fix webcomponents example. ([@jalexanderfox](https://github.com/jalexanderfox) in [#7057](https://github.com/facebook/react/pull/7057))
+- Fix `unstable_renderSubtreeIntoContainer` so that context properly updates when linked to state. ([@gaearon](https://github.com/gaearon) in [#7125](https://github.com/facebook/react/pull/7125))
+- Improve invariant wording for void elements. ([@starkch](https://github.com/starkch) in [#7066](https://github.com/facebook/react/pull/7066))
+- Ensure no errors are thrown due to event handlers in server rendering. ([@rricard](https://github.com/rricard) in [#7127](https://github.com/facebook/react/pull/7127))
+- Fix regression resulting in `value`-less submit and reset inputs removing the browser-default text. ([@zpao](https://github.com/zpao) in [#7197](https://github.com/facebook/react/pull/7197))
+- Fix regression resulting in empty `name` attribute being added to inputs when not provided. ([@okonet](https://github.com/okonet) in [#7199](https://github.com/facebook/react/pull/7199))
+- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
+
+### React Perf Add-on
+- Make `ReactPerf.start()` work properly during lifecycle methods. ([@gaearon](https://github.com/gaearon) in [#7208](https://github.com/facebook/react/pull/7208)).
+
+### React CSSTransitionGroup Add-on
+- Fix issue resulting in spurious unknown property warnings. ([@batusai513](https://github.com/batusai513) in [#7165](https://github.com/facebook/react/pull/7165))
+
+### React Native Renderer
+- Improve error handling in cross-platform touch event handling. ([@yungsters](https://github.com/yungsters) in [#7143](https://github.com/facebook/react/pull/7143))
+
+
+## 15.2.0 (July 1, 2016)
+
+### React
+- Add error codes to production invariants, with links to the view the full error text. ([@keyanzhang](https://github.com/keyanzhang) in [#6948](https://github.com/facebook/react/pull/6948))
+- Include component stack information in PropType validation warnings. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6398](https://github.com/facebook/react/pull/6398), [@sophiebits](https://github.com/sophiebits) in [#6771](https://github.com/facebook/react/pull/6771))
+- Include component stack information in key warnings. ([@keyanzhang](https://github.com/keyanzhang) in [#6799](https://github.com/facebook/react/pull/6799))
+- Stop validating props at mount time, only validate at element creation. ([@keyanzhang](https://github.com/keyanzhang) in [#6824](https://github.com/facebook/react/pull/6824))
+- New invariant providing actionable error in missing instance case. ([@yungsters](https://github.com/yungsters) in [#6990](https://github.com/facebook/react/pull/6990))
+- Add `React.PropTypes.symbol` to support ES2015 Symbols as props. ([@puradox](https://github.com/puradox) in [#6377](https://github.com/facebook/react/pull/6377))
+- Fix incorrect coercion of ref or key that are undefined in development ([@gaearon](https://github.com/gaearon) in [#6880](https://github.com/facebook/react/pull/6880))
+- Fix a false positive when passing other element’s props to cloneElement ([@ericmatthys](https://github.com/ericmatthys) in [#6268](https://github.com/facebook/react/pull/6268))
+- Warn if you attempt to define `childContextTypes` on a functional component ([@Aweary](https://github.com/Aweary) in [#6933](https://github.com/facebook/react/pull/6933))
+
+### React DOM
+- Add warning for unknown properties on DOM elements. ([@jimfb](https://github.com/jimfb) in [#6800](https://github.com/facebook/react/pull/6800), [@gm758](https://github.com/gm758) in [#7152](https://github.com/facebook/react/pull/7152))
+- Properly remove attributes from custom elements. ([@grassator](https://github.com/grassator) in [#6748](https://github.com/facebook/react/pull/6748))
+- Fix invalid unicode escape in attribute name regular expression. ([@nbjahan](https://github.com/nbjahan) in [#6772](https://github.com/facebook/react/pull/6772))
+- Add `onLoad` handling to `<link>` element. ([@roderickhsiao](https://github.com/roderickhsiao) in [#6815](https://github.com/facebook/react/pull/6815))
+- Add `onError` handling to `<source>` element. ([@wadahiro](https://github.com/wadahiro) in [#6941](https://github.com/facebook/react/pull/6941))
+- Handle `value` and `defaultValue` more accurately in the DOM. ([@jimfb](https://github.com/jimfb) in [#6406](https://github.com/facebook/react/pull/6406))
+- Fix events issue in environments with mutated `Object.prototype`. ([@Weizenlol](https://github.com/Weizenlol) in [#6886](https://github.com/facebook/react/pull/6886))
+- Fix issue where `is="null"` ended up in the DOM in Firefox. ([@darobin](https://github.com/darobin) in [#6896](https://github.com/facebook/react/pull/6896))
+- Improved performance of text escaping by using [escape-html](https://github.com/component/escape-html). ([@aickin](https://github.com/aickin) in [#6862](https://github.com/facebook/react/pull/6862))
+- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@joshhunt](https://github.com/joshhunt) in [#6982](https://github.com/facebook/react/pull/6982))
+- Fix issue with `<textarea>` placeholders. ([@jimfb](https://github.com/jimfb) in [#7002](https://github.com/facebook/react/pull/7002))
+- Fix controlled vs uncontrolled detection of `<input type="radio"/>`. ([@jimfb](https://github.com/jimfb) in [#7003](https://github.com/facebook/react/pull/7003))
+- Improve performance of updating text content. ([@trueadm](https://github.com/trueadm) in [#7005](https://github.com/facebook/react/pull/7005))
+- Ensure controlled `<select>` components behave the same on initial render as they do on updates. ([@yiminghe](https://github.com/yiminghe) in [#5362](https://github.com/facebook/react/pull/5362))
+
+### React Perf Add-on
+- Add `isRunning()` API. ([@nfcampos](https://github.com/nfcampos) in [#6763](https://github.com/facebook/react/pull/6763))
+- Improve accuracy of lifecycle hook timing. ([@gaearon](https://github.com/gaearon) in [#6858](https://github.com/facebook/react/pull/6858))
+- Fix internal errors when using ReactPerf with portal components. ([@gaearon](https://github.com/gaearon) in [#6860](https://github.com/facebook/react/pull/6860))
+- Fix performance regression. ([@sophiebits](https://github.com/sophiebits) in [#6770](https://github.com/facebook/react/pull/6770))
+- Add warning that ReactPerf is not enabled in production. ([@sashashakun](https://github.com/sashashakun) in [#6884](https://github.com/facebook/react/pull/6884))
+
+### React CSSTransitionGroup Add-on
+- Fix timing issue with `null` node. ([@keyanzhang](https://github.com/keyanzhang) in [#6958](https://github.com/facebook/react/pull/6958))
+
+### React Native Renderer
+- Dependencies on React Native modules use CommonJS requires instead of providesModule. ([@davidaurelio](https://github.com/davidaurelio) in [#6715](https://github.com/facebook/react/pull/6715))
+
+
+## 15.1.0 (May 20, 2016)
+
+### React
+- Ensure we're using the latest `object-assign`, which has protection against a non-spec-compliant native `Object.assign`. ([@zpao](https://github.com/zpao) in [#6681](https://github.com/facebook/react/pull/6681))
+- Add a new warning to communicate that `props` objects passed to `createElement` must be plain objects. ([@richardscarrott](https://github.com/richardscarrott) in [#6134](https://github.com/facebook/react/pull/6134))
+- Fix a batching bug resulting in some lifecycle methods incorrectly being called multiple times. ([@sophiebits](https://github.com/sophiebits) in [#6650](https://github.com/facebook/react/pull/6650))
+
+### React DOM
+- Fix regression in custom elements support. ([@jscissr](https://github.com/jscissr) in [#6570](https://github.com/facebook/react/pull/6570))
+- Stop incorrectly warning about using `onScroll` event handler with server rendering. ([@Aweary](https://github.com/Aweary) in [#6678](https://github.com/facebook/react/pull/6678))
+- Fix grammar in the controlled input warning. ([@jakeboone02](https://github.com/jakeboone02) in [#6657](https://github.com/facebook/react/pull/6657))
+- Fix issue preventing `<object>` nodes from being able to read `<param>` nodes in IE. ([@syranide](https://github.com/syranide) in [#6691](https://github.com/facebook/react/pull/6691))
+- Fix issue resulting in crash when using experimental error boundaries with server rendering. ([@jimfb](https://github.com/jimfb) in [#6694](https://github.com/facebook/react/pull/6694))
+- Add additional information to the controlled input warning. ([@borisyankov](https://github.com/borisyankov) in [#6341](https://github.com/facebook/react/pull/6341))
+
+### React Perf Add-on
+- Completely rewritten to collect data more accurately and to be easier to maintain. ([@gaearon](https://github.com/gaearon) in [#6647](https://github.com/facebook/react/pull/6647), [#6046](https://github.com/facebook/react/pull/6046))
+
+### React Native Renderer
+- Remove some special cases for platform specific branching. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6660](https://github.com/facebook/react/pull/6660))
+- Remove use of `merge` utility. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6634](https://github.com/facebook/react/pull/6634))
+- Renamed some modules to better indicate usage ([@javache](https://github.com/javache) in [#6643](https://github.com/facebook/react/pull/6643))
+
+
+## 15.0.2 (April 29, 2016)
+
+### React
+- Removed extraneous files from npm package. ([@gaearon](https://github.com/gaearon) in [#6388](https://github.com/facebook/react/pull/6388))
+- Ensure `componentWillUnmount` is only called once. ([@jimfb](https://github.com/jimfb) in [#6613](https://github.com/facebook/react/pull/6613))
+
+### ReactDOM
+- Fixed bug resulting in disabled buttons responding to mouse events in IE. ([@nhunzaker](https://github.com/nhunzaker) in [#6215](https://github.com/facebook/react/pull/6215))
+- Ensure `<option>`s are correctly selected when inside `<optgroup>`. ([@trevorsmith](https://github.com/trevorsmith) in [#6442](https://github.com/facebook/react/pull/6442))
+- Restore support for rendering into a shadow root. ([@Wildhoney](https://github.com/Wildhoney) in [#6462](https://github.com/facebook/react/pull/6462))
+- Ensure nested `<body>` elements are caught when warning for invalid markup. ([@keyanzhang](https://github.com/keyanzhang) in [#6469](https://github.com/facebook/react/pull/6469))
+- Improve warning when encountering multiple elements with the same key. ([@hkal](https://github.com/hkal) in [#6500](https://github.com/facebook/react/pull/6500))
+
+### React TestUtils Add-on
+- Ensure that functional components do not have an owner. ([@gaearon](https://github.com/gaearon) in [#6362](https://github.com/facebook/react/pull/6362))
+- Handle invalid arguments to `scryRenderedDOMComponentsWithClass` better. ([@ipeters90](https://github.com/ipeters90) in [#6529](https://github.com/facebook/react/pull/6529))
+
+### React Perf Add-on
+- Ignore DOM operations that occur outside the batch operation. ([@gaearon](https://github.com/gaearon) in [#6516](https://github.com/facebook/react/pull/6516))
+
+### React Native Renderer
+- These files are now shipped inside the React npm package. They have no impact on React core or ReactDOM.
+
+
+## 15.0.1 (April 8, 2016)
+
+### React
+- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated. ([@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444))
+
+### ReactDOM
+- Fixed issue resulting in loss of cursor position in controlled inputs. ([@sophiebits](https://github.com/sophiebits) in [#6449](https://github.com/facebook/react/pull/6449))
+
+
+## 15.0.0 (April 7, 2016)
+
+### Major changes
+
+- **Initial render now uses `document.createElement` instead of generating HTML.** Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. ([@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205))
+- **`data-reactid` is no longer on every node.** As a result of using `document.createElement`, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the `data-reactid` attribute). Root nodes will have a `data-reactroot` attribute and server generated markup will still contain `data-reactid`. ([@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205))
+- **No more extra `<span>`s.** ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. ([@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753))
+- **Rendering `null` now uses comment nodes.** Previously `null` would render to `<noscript>` elements. We now use comment nodes. This may cause issues if making use of `:nth-child` CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ([@sophiebits](https://github.com/sophiebits) in [#5451](https://github.com/facebook/react/pull/5451))
+- **Functional components can now return `null`.** We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldn’t reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function. ([@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884))
+- **Improved SVG support.** All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657). ([@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243))
+
+### Breaking changes
+
+- **No more extra `<span>`s.**
+- **`React.cloneElement()` now resolves `defaultProps`.** We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. We’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. ([@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997))
+- **`ReactPerf.getLastMeasurements()` is opaque.** This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon. ([@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286))
+
+#### Removed deprecations
+
+These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
+
+- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`. ([@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832))
+- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`. ([@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016))
+- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`. ([@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570))
+- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds. ([@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285))
+- Passing `children` to void elements like `<input>` was deprecated, and now throws an error. ([@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372))
+- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now. ([@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495))
+
+### New deprecations, introduced with a warning
+
+Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
+
+- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input). ([@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127))
+- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled. ([@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048))
+- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`. ([@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287))
+
+### New helpful warnings
+
+- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead. ([@sophiebits](https://github.com/sophiebits) in [#5083](https://github.com/facebook/react/pull/5083))
+- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{width: '300'}}`. Unitless *number* values like `width: 300` are unchanged. ([@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140))
+- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. ([@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947))
+- Elements will now warn when attempting to read `ref` and `key` from the props. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744))
+- React will now warn if you pass a different `props` object to `super()` in the constructor. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346))
+- React will now warn if you call `setState()` inside `getChildContext()`. ([@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121))
+- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`. ([@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361))
+- React DOM now warns about `NaN` values in `style`. ([@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811))
+- React DOM now warns if you specify both `value` and `defaultValue` for an input. ([@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823))
+- React DOM now warns if an input switches between being controlled and uncontrolled. ([@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864))
+- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React. ([@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296))
+- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`. ([@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310))
+- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering. ([@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358))
+- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390))
+
+### Notable bug fixes
+
+- Fixed multiple small memory leaks. ([@sophiebits](https://github.com/sophiebits) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309))
+- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. ([@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051))
+- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes. ([@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787))
+- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`. ([@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892))
+- React DOM now supports the `cite` and `profile` HTML attributes. ([@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032))
+- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties. ([@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and  [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779))
+- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties. ([@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270))
+- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements. ([@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187),  [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781))
+- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. ([@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510))
+- React DOM does not mistakenly coerce `children` to strings for Web Components. ([@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093))
+- React DOM now correctly normalizes SVG `<use>` events. ([@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720))
+- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing. ([@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028))
+- React DOM does not throw in Windows 8 apps. ([@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063))
+- React DOM does not throw when asynchronously unmounting a child with a `ref`. ([@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095))
+- React DOM no longer forces synchronous layout because of scroll position tracking. ([@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271))
+- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
+- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
+
+### Other improvements
+
+- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
+- Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))
+- Shallow renderer now returns the rendered output from `render()`. ([@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411))
+- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments. ([@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959))
+- React DOM now allows `data-` attributes with names that start with numbers. ([@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216))
+- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://draftjs.org/) that intentionally manage `contentEditable` children with React. ([@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112))
+- React improves the performance for `createClass()` on complex specs. ([@sophiebits](https://github.com/sophiebits) in [#5550](https://github.com/facebook/react/pull/5550))
+
+## 0.14.10 (October 14, 2020)
+
+### React
+
+* Backport support for the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) to 0.14.x. ([@lunaruan](https://github.com/lunaruan) in [#18299](https://github.com/facebook/react/pull/18299) and [@gaearon](https://github.com/gaearon) in [#20024](https://github.com/facebook/react/pull/20024))
+
+## 0.14.8 (March 29, 2016)
+
+### React
+- Fixed memory leak when rendering on the server
+
+## 0.14.7 (January 28, 2016)
+
+### React
+- Fixed bug with `<option>` tags when using `dangerouslySetInnerHTML`
+- Fixed memory leak in synthetic event system
+
+### React TestUtils Add-on
+- Fixed bug with calling `setState` in `componentWillMount` when using shallow rendering
+
+
+## 0.14.6 (January 6, 2016)
+
+### React
+- Updated `fbjs` dependency to pick up change affecting handling of undefined document.
+
+
+## 0.14.5 (December 29, 2015)
+
+### React
+- More minor internal changes for better compatibility with React Native
+
+
+## 0.14.4 (December 29, 2015)
+
+### React
+- Minor internal changes for better compatibility with React Native
+
+### React DOM
+- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
+- Fixed bug with controlled `<select>` elements not handling updates properly
+
+### React Perf Add-on
+- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
+
+
+## 0.14.3 (November 18, 2015)
+
+### React DOM
+- Added support for `nonce` attribute for `<script>` and `<style>` elements
+- Added support for `reversed` attribute for `<ol>` elements
+
+### React TestUtils Add-on
+- Fixed bug with shallow rendering and function refs
+
+### React CSSTransitionGroup Add-on
+- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
+
+### React on Bower
+- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
+
+
+## 0.14.2 (November 2, 2015)
+
+### React DOM
+- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
+- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
+- Added support for `integrity` attribute
+- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior
+- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
+
+
+## 0.14.1 (October 28, 2015)
+
+### React DOM
+- Fixed bug where events wouldn't fire in old browsers when using React in development mode
+- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
+- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
+- Added support for `color` attribute
+- Ensured legacy `.props` access on DOM nodes is updated on re-renders
+
+### React TestUtils Add-on
+- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
+
+### React CSSTransitionGroup Add-on
+- Fix bug preventing `0` to be used as a timeout value
+
+### React on Bower
+- Added `react-dom.js` to `main` to improve compatibility with tooling
+
+
+## 0.14.0 (October 7, 2015)
+
+### Major changes
+
+- Split the main `react` package into two: `react` and `react-dom`.  This paves the way to writing components that can be shared between the web version of React and React Native.  This means you will need to include both files and some functions have been moved from `React` to `ReactDOM`.
+- Addons have been moved to separate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
+- Stateless functional components - React components were previously created using React.createClass or using ES6 classes.  This release adds a [new syntax](https://reactjs.org/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://reactjs.org/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
+- Refs to DOM components as the DOM node itself. Previously the only useful thing you can do with a DOM component is call `getDOMNode()` to get the underlying DOM node. Starting with this release, a ref to a DOM component _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
+
+
+### Breaking changes
+
+- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
+- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
+- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://reactjs.org/docs/react-api.html#cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
+- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://reactjs.org/docs/create-fragment.html) helper to migrate, which now returns an array.
+- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
+- Web components (custom elements) now use native property names.  Eg: `class` instead of `className`.
+
+### Deprecations
+
+- `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in the common case, `findDOMNode` is now unnecessary since a ref to the DOM component is now the actual DOM node.
+- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
+- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
+- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
+- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](https://reactjs.org/docs/react-api.html#cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
+- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
+
+### Notable enhancements
+
+- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
+- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
+- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](https://babeljs.io/docs/usage/polyfill/).
+- When possible, React DOM now generates XHTML-compatible markup.
+- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
+- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
+- The `image` SVG tag is now supported by React DOM.
+- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
+- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
+- Many small performance improvements have been made.
+- Many warnings show more context than before.
+- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
+- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
+
+### New helpful warnings
+
+- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
+- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
+- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
+
+### Notable bug fixes
+
+- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
+- SVG elements are created with the correct namespace in more cases.
+- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
+- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
+- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
+- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
+- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
+- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
+
+
+### React Tools / Babel
+
+#### Breaking Changes
+
+- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](https://babeljs.io), which has built-in support for React and JSX.
+
+#### New Features
+
+- Babel 5.8.24 introduces **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.  This should only be enabled in production, since it disables some development warnings/checks.
+- Babel 5.8.24 introduces **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.  This should only be enabled in production, since it disables some development warnings/checks.
+
+
+## 0.13.3 (May 8, 2015)
+
+### React Core
+
+#### New Features
+
+* Added `clipPath` element and attribute for SVG
+* Improved warnings for deprecated methods in plain JS classes
+
+#### Bug Fixes
+
+* Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
+* Fixed extraneous context warning with non-pure `getChildContext`
+* Ensure `replaceState(obj)` retains prototype of `obj`
+
+### React with Add-ons
+
+### Bug Fixes
+
+* Test Utils: Ensure that shallow rendering works when components define `contextTypes`
+
+
+## 0.13.2 (April 18, 2015)
+
+### React Core
+
+#### New Features
+
+* Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
+* Added support for more DOM properties:
+  * `scoped` - for `<style>` elements
+  * `high`, `low`, `optimum` - for `<meter>` elements
+  * `unselectable` - IE-specific property to prevent user selection
+
+#### Bug Fixes
+
+* Fixed a case where re-rendering after rendering null didn't properly pass context
+* Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
+* Update `uglify` dependency to prevent a bug in IE8
+* Improved warnings
+
+### React with Add-Ons
+
+#### Bug Fixes
+
+* Immutability Helpers: Ensure it supports `hasOwnProperty` as an object key
+
+### React Tools
+
+* Improve documentation for new options
+
+
+## 0.13.1 (March 16, 2015)
+
+### React Core
+
+#### Bug Fixes
+
+* Don't throw when rendering empty `<select>` elements
+* Ensure updating `style` works when transitioning from `null`
+
+### React with Add-Ons
+
+#### Bug Fixes
+
+* TestUtils: Don't warn about `getDOMNode` for ES6 classes
+* TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
+* Perf: Stop double-counting DOM components
+
+### React Tools
+
+#### Bug Fixes
+
+* Fix option parsing for `--non-strict-es6module`
+
+
+## 0.13.0 (March 10, 2015)
+
+### React Core
+
+#### Breaking Changes
+
+* Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
+* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
+* Static methods (defined in `statics`) are no longer autobound to the component class
+* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
+* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
+* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
+* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
+
+#### New Features
+
+* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
+* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
+* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://reactjs.org/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
+* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
+* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
+* Support for iterators and immutable-js sequences as children.
+
+#### Deprecations
+
+* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`).
+* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`).
+
+### React with Add-Ons
+
+#### New Features
+
+* [`React.addons.createFragment` was added](https://reactjs.org/docs/create-fragment.html) for adding keys to entire sets of children.
+
+#### Deprecations
+
+* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
+* Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead – make sure to merge `style` and `className` manually if desired.
+
+### React Tools
+
+#### Breaking Changes
+
+* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
+
+#### New Features
+
+* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
+  * `es5` is the default.
+  * `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
+* The transform for the call spread operator has also been enabled.
+
+### JSXTransformer
+
+#### Breaking Changes
+
+* The return value of `transform` now contains `sourceMap` as a JS object already, not an instance of `SourceMapGenerator`.
+
+### JSX
+
+#### Breaking Changes
+* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code.
+
+
+## 0.12.2 (December 18, 2014)
+
+### React Core
+
+* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
+* Added `strokeOpacity` to the list of unitless CSS properties
+* Removed trailing commas (allows npm module to be bundled and used in IE8)
+* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
+
+### React Tools
+
+* JSX-related transforms now always use double quotes for props and `displayName`
+
+
+## 0.12.1 (November 18, 2014)
+
+### React Tools
+
+* Types transform updated with latest support
+* jstransform version updated with improved ES6 transforms
+* Explicit Esprima dependency removed in favor of using Esprima information exported by jstransform
+
+
+## 0.12.0 (October 28, 2014)
+
+### React Core
+
+#### Breaking Changes
+
+* `key` and `ref` moved off props object, now accessible on the element directly
+* React is now BSD licensed with accompanying Patents grant
+* Default prop resolution has moved to Element creation time instead of mount time, making them effectively static
+* `React.__internals` is removed - it was exposed for DevTools which no longer needs access
+* Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX.
+
+#### New Features
+
+* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
+* Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
+
+#### Deprecations
+
+* `React.renderComponent` --> `React.render`
+* `React.renderComponentToString` --> `React.renderToString`
+* `React.renderComponentToStaticMarkup` --> `React.renderToStaticMarkup`
+* `React.isValidComponent` --> `React.isValidElement`
+* `React.PropTypes.component` --> `React.PropTypes.element`
+* `React.PropTypes.renderable` --> `React.PropTypes.node`
+* **DEPRECATED** `React.isValidClass`
+* **DEPRECATED** `instance.transferPropsTo`
+* **DEPRECATED** Returning `false` from event handlers to preventDefault
+* **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory`
+* **DEPRECATED** use of `key={null}` to assign implicit keys
+
+#### Bug Fixes
+
+* Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components
+* Correctly treat `event.getModifierState` as case sensitive
+* Improved normalization of `event.charCode`
+* Better error stacks when involving autobound methods
+* Removed DevTools message when the DevTools are installed
+* Correctly detect required language features across browsers
+* Fixed support for some HTML attributes:
+  * `list` updates correctly now
+  * `scrollLeft`, `scrollTop` removed, these should not be specified as props
+* Improved error messages
+
+### React With Addons
+
+#### New Features
+
+* `React.addons.batchedUpdates` added to API for hooking into update cycle
+
+#### Breaking Changes
+
+* `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly.
+
+#### Bug Fixes
+
+* Fixed some issues with CSS Transitions
+
+### JSX
+
+#### Breaking Changes
+
+* Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components
+* JSX no longer transforms to simple function calls
+
+#### New Features
+
+* `@jsx React.DOM` no longer required
+* spread (`{...}`) operator introduced to allow easier use of props
+
+#### Bug Fixes
+
+* JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)
+
+
+## 0.11.2 (September 16, 2014)
+
+### React Core
+
+#### New Features
+
+* Added support for `<dialog>` element and associated `open` attribute
+* Added support for `<picture>` element and associated `media` and `sizes` attributes
+* Added `React.createElement` API in preparation for React v0.12
+  * `React.createDescriptor` has been deprecated as a result
+
+### JSX
+
+* `<picture>` is now parsed into `React.DOM.picture`
+
+### React Tools
+
+* Update `esprima` and `jstransform` for correctness fixes
+* The `jsx` executable now exposes a `--strip-types` flag which can be used to remove TypeScript-like type annotations
+  * This option is also exposed to `require('react-tools').transform` as `stripTypes`
+
 ## 0.11.1 (July 24, 2014)
 
 ### React Core
@@ -73,7 +2476,7 @@
 
 #### New Features
 * Added warnings to help migrate towards descriptors
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
+* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](https://reactjs.org/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
 * Added support for more attributes:
   * `srcSet` for `<img>` to specify images at different pixel ratios
   * `textAnchor` for SVG
@@ -85,7 +2488,7 @@
 
 ### Addons
 
-* `update` function to deal with immutable data. [Read the docs](http://facebook.github.io/react/docs/update.html)
+* `update` function to deal with immutable data. [Read the docs](https://reactjs.org/docs/update.html)
 
 ### react-tools
 * Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
@@ -247,7 +2650,7 @@
 
 ### React with Addons (New!)
 
-* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](http://facebook.github.io/react/docs/addons.html).
+* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](https://reactjs.org/docs/addons.html).
 
 ### JSX
 
@@ -280,10 +2683,10 @@
 * Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
 * Support for more DOM elements and attributes (e.g., `<canvas>`)
 * Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
+* `prop` improvements: validation and default values. [Read our blog post for details...](https://reactjs.org/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
+* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://reactjs.org/docs/multiple-components.html)
+* Removed `React.autoBind`. [Read our blog post for details...](https://reactjs.org/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://reactjs.org/docs/forms.html)
 * We've implemented an improved synthetic event system that conforms to the W3C spec.
 * Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as it's second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
 
@@ -315,14 +2718,14 @@
 
 * Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
 * Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
-* Freeze our esprima dependency.
+* Freeze our Esprima dependency.
 
 
 ## 0.3.2 (May 31, 2013)
 
 ### JSX
 
-* Improved compatability with other coding styles (specifically, multiple assignments with a single `var`).
+* Improved compatibility with other coding styles (specifically, multiple assignments with a single `var`).
 
 ### react-tools
 
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000000..81f9b421723
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,8 @@
+# React
+
+React is a JavaScript library for building user interfaces.
+
+## Monorepo Overview
+
+- **React**: All files outside `/compiler/`
+- **React Compiler**: `/compiler/` directory (has its own instructions)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000000..08b500a2218
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,80 @@
+# Code of Conduct
+
+## 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.
+
+This Code of Conduct also applies outside the project spaces when there is a
+reasonable belief that an individual's behavior may have a negative impact on
+the project or its community.
+
+## 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/CONTRIBUTING.md b/CONTRIBUTING.md
index 2286a521aaa..589af800fdc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,70 +1,5 @@
 # Contributing to React
 
-React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on facebook.com. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
+Want to contribute to React? There are a few things you need to know.  
 
-## Our Development Process
-
-Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
-
-### `master` is unsafe
-
-We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
-
-### Pull Requests
-
-The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
-
-*Before* submitting a pull request, please make sure the following is done…
-
-1. Fork the repo and create your branch from `master`.
-2. If you've added code that should be tested, add tests!
-3. If you've changed APIs, update the documentation.
-4. Ensure the test suite passes (`grunt test`).
-5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
-6. If you haven't already, complete the CLA.
-
-### Contributor License Agreement ("CLA")
-
-In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
-
-Complete your CLA here: <https://code.facebook.com/cla>
-
-## Bugs
-
-### Where to Find Known Issues
-
-We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
-
-### Reporting New Issues
-
-The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.
-
-### Security Bugs
-
-Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues and go through the process outlined on that page.
-
-## How to Get in Touch
-
-* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
-* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
-
-## Style Guide
-
-### Code
-
-* Use semicolons;
-* Commas last,
-* 2 spaces for indentation (no tabs)
-* Prefer `'` over `"`
-* `"use strict";`
-* 80 character line length
-* "Attractive"
-* Do not use the optional parameters of `setTimeout` and `setInterval`
-
-### Documentation
-
-* Do not wrap lines at 80 characters
-
-## License
-
-By contributing to React, you agree that your contributions will be licensed under the [Apache License Version 2.0 (APLv2)](LICENSE).
+We wrote a **[contribution guide](https://reactjs.org/docs/how-to-contribute.html)** to help you get started.
diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644
index 80ee672caca..00000000000
--- a/Gruntfile.js
+++ /dev/null
@@ -1,256 +0,0 @@
-'use strict';
-
-var exec = require('child_process').exec;
-var jsxTask = require('./grunt/tasks/jsx');
-var browserifyTask = require('./grunt/tasks/browserify');
-var populistTask = require('./grunt/tasks/populist');
-var webdriverPhantomJSTask = require('./grunt/tasks/webdriver-phantomjs');
-var webdriverJasmineTasks = require('./grunt/tasks/webdriver-jasmine');
-var sauceTunnelTask = require('./grunt/tasks/sauce-tunnel');
-var npmTask = require('./grunt/tasks/npm');
-var releaseTasks = require('./grunt/tasks/release');
-var npmReactTasks = require('./grunt/tasks/npm-react');
-var npmReactToolsTasks = require('./grunt/tasks/npm-react-tools');
-var versionCheckTask = require('./grunt/tasks/version-check');
-var gemReactSourceTasks = require('./grunt/tasks/gem-react-source');
-
-module.exports = function(grunt) {
-
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
-    copy: require('./grunt/config/copy'),
-    jsx: require('./grunt/config/jsx'),
-    browserify: require('./grunt/config/browserify'),
-    populist: require('./grunt/config/populist')(grunt),
-    connect: require('./grunt/config/server')(grunt),
-    "webdriver-jasmine": require('./grunt/config/webdriver-jasmine'),
-    "webdriver-perf": require('./grunt/config/webdriver-perf'),
-    npm: require('./grunt/config/npm'),
-    clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js', '.module-cache'],
-    jshint: require('./grunt/config/jshint'),
-    compare_size: require('./grunt/config/compare_size')
-  });
-
-  grunt.config.set('compress', require('./grunt/config/compress'));
-
-  Object.keys(grunt.file.readJSON('package.json').devDependencies)
-    .filter(function(npmTaskName) { return npmTaskName.indexOf('grunt-') === 0; })
-    .filter(function(npmTaskName) { return npmTaskName != 'grunt-cli'; })
-    .forEach(function(npmTaskName) { grunt.loadNpmTasks(npmTaskName); });
-
-  // Alias 'jshint' to 'lint' to better match the workflow we know
-  grunt.registerTask('lint', ['jshint']);
-
-  grunt.registerTask('download-previous-version', require('./grunt/tasks/download-previous-version.js'));
-
-  grunt.registerTask('delete-build-modules', function() {
-    if (grunt.file.exists('build/modules')) {
-      grunt.file.delete('build/modules');
-    }
-  });
-
-  // Register jsx:normal and :release tasks.
-  grunt.registerMultiTask('jsx', jsxTask);
-
-  // Our own browserify-based tasks to build a single JS file build
-  grunt.registerMultiTask('browserify', browserifyTask);
-
-  grunt.registerMultiTask('populist', populistTask);
-
-  grunt.registerTask('sauce-tunnel', sauceTunnelTask);
-
-  grunt.registerMultiTask('webdriver-jasmine', webdriverJasmineTasks);
-
-  grunt.registerMultiTask('webdriver-perf', require('./grunt/tasks/webdriver-perf'));
-
-  grunt.registerMultiTask('npm', npmTask);
-
-  grunt.registerTask('npm-react:release', npmReactTasks.buildRelease);
-  grunt.registerTask('npm-react:pack', npmReactTasks.packRelease);
-  grunt.registerTask('npm-react-tools:release', npmReactToolsTasks.buildRelease);
-  grunt.registerTask('npm-react-tools:pack', npmReactToolsTasks.packRelease);
-  grunt.registerTask('gem-react-source:release', gemReactSourceTasks.buildRelease);
-  grunt.registerTask('gem-react-source:pack', gemReactSourceTasks.packRelease);
-
-  grunt.registerTask('version-check', versionCheckTask);
-
-  grunt.registerTask('build:basic', ['jsx:normal', 'version-check', 'browserify:basic']);
-  grunt.registerTask('build:addons', ['jsx:normal', 'browserify:addons']);
-  grunt.registerTask('build:transformer', ['jsx:normal', 'browserify:transformer']);
-  grunt.registerTask('build:min', ['jsx:normal', 'version-check', 'browserify:min']);
-  grunt.registerTask('build:addons-min', ['jsx:normal', 'browserify:addonsMin']);
-  grunt.registerTask('build:withCodeCoverageLogging', [
-    'jsx:normal',
-    'version-check',
-    'browserify:withCodeCoverageLogging'
-  ]);
-  grunt.registerTask('build:perf', [
-    'jsx:normal',
-    'version-check',
-    'browserify:transformer',
-    'browserify:basic',
-    'browserify:min',
-    'download-previous-version'
-  ]);
-  grunt.registerTask('build:test', [
-    'delete-build-modules',
-    'jsx:test',
-    'version-check',
-    'populist:test'
-  ]);
-  grunt.registerTask('build:npm-react', ['version-check', 'jsx:normal', 'npm-react:release']);
-  grunt.registerTask('build:gem-react-source', ['build', 'gem-react-source:release'])
-
-  grunt.registerTask('webdriver-phantomjs', webdriverPhantomJSTask);
-
-  grunt.registerTask('coverage:parse', require('./grunt/tasks/coverage-parse'));
-
-  grunt.registerTask('test:webdriver:phantomjs', [
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-jasmine:local'
-  ]);
-
-  grunt.registerTask('perf:webdriver:phantomjs', [
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-perf:local'
-  ]);
-
-  grunt.registerTask('test:full', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-jasmine:local',
-
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_android',
-    'webdriver-jasmine:saucelabs_firefox',
-    'webdriver-jasmine:saucelabs_chrome'
-  ]);
-
-  grunt.registerTask('perf:full', [
-    'build:perf',
-
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-perf:local',
-
-    'sauce-tunnel',
-    'webdriver-perf:saucelabs_firefox',
-    'webdriver-perf:saucelabs_chrome',
-    'webdriver-perf:saucelabs_ie11',
-    'webdriver-perf:saucelabs_ie8',
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_' + (process.env.BROWSER_NAME || 'ie8')
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs:modern', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_android',
-    'webdriver-jasmine:saucelabs_firefox',
-    'webdriver-jasmine:saucelabs_chrome',
-    'webdriver-jasmine:saucelabs_ie11'
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs:ie', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_ie8',
-    'webdriver-jasmine:saucelabs_ie9',
-    'webdriver-jasmine:saucelabs_ie10',
-    'webdriver-jasmine:saucelabs_ie11'
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs:ios', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_ios6_1',
-    'webdriver-jasmine:saucelabs_ios5_1',
-    'webdriver-jasmine:saucelabs_ios4'
-  ]);
-
-  grunt.registerTask('test:coverage', [
-    'build:test',
-    'build:withCodeCoverageLogging',
-    'test:webdriver:phantomjs',
-    'coverage:parse'
-  ]);
-  grunt.registerTask('fasttest', function() {
-    if (grunt.option('debug')) {
-      grunt.task.run('build:test', 'connect:server:keepalive');
-    } else {
-      grunt.task.run('build:test', 'test:webdriver:phantomjs');
-    }
-  });
-  grunt.registerTask('test', function() {
-    if (grunt.option('debug')) {
-      grunt.task.run('build:test', 'build:basic', 'connect:server:keepalive');
-    } else {
-      grunt.task.run('build:test', 'build:basic', 'test:webdriver:phantomjs');
-    }
-  });
-  grunt.registerTask('perf', ['build:perf', 'perf:webdriver:phantomjs']);
-  grunt.registerTask('npm:test', ['build', 'npm:pack']);
-
-  // Optimized build task that does all of our builds. The subtasks will be run
-  // in order so we can take advantage of that and only run jsx:normal once.
-  grunt.registerTask('build', [
-    'delete-build-modules',
-    'jsx:normal',
-    'version-check',
-    'browserify:basic',
-    'browserify:transformer',
-    'browserify:addons',
-    'browserify:min',
-    'browserify:addonsMin',
-    'npm-react:release',
-    'npm-react:pack',
-    'npm-react-tools:release',
-    'npm-react-tools:pack',
-    'copy:react_docs',
-    'compare_size'
-  ]);
-
-  // Automate the release!
-  grunt.registerTask('release:setup', releaseTasks.setup);
-  grunt.registerTask('release:bower', releaseTasks.bower);
-  grunt.registerTask('release:docs', releaseTasks.docs);
-  grunt.registerTask('release:msg', releaseTasks.msg);
-  grunt.registerTask('release:starter', releaseTasks.starter);
-
-  grunt.registerTask('release', [
-    'release:setup',
-    'clean',
-    'build',
-    'gem-react-source:release',
-    'gem-react-source:pack',
-    'release:bower',
-    'release:starter',
-    'compress',
-    'release:docs',
-    'release:msg'
-  ]);
-
-  // The default task - build - to keep setup easy
-  grunt.registerTask('default', ['build']);
-};
diff --git a/LICENSE b/LICENSE
index 261eeb9e9f8..b93be90515c 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,201 +1,21 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+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/MAINTAINERS b/MAINTAINERS
new file mode 100644
index 00000000000..e48736bc1ca
--- /dev/null
+++ b/MAINTAINERS
@@ -0,0 +1,23 @@
+acdlite
+eps1lon
+EugeneChoi4
+gaearon
+gnoff
+unstubbable
+hoxyq
+jackpope
+jbonta
+jbrown215
+josephsavona
+kassens
+mattcarrollcode
+mofeiZ
+mvitousek
+pieterv
+poteto
+rickhanlonii
+sebmarkbage
+sethwebster
+sophiebits
+elicwhite
+yuzhi
diff --git a/README.md b/README.md
index 169423f2ca0..88f8e827b02 100644
--- a/README.md
+++ b/README.md
@@ -1,98 +1,78 @@
-# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=master)](https://travis-ci.org/facebook/react)
+# [React](https://react.dev/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![(Runtime) Build and Test](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml/badge.svg)](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml) [![(Compiler) TypeScript](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml/badge.svg?branch=main)](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
 React is a JavaScript library for building user interfaces.
 
-* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
-* **Virtual DOM:** React uses a *virtual DOM* diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.
-* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
+* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
+* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
+* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using [Node](https://nodejs.org/en) and power mobile apps using [React Native](https://reactnative.dev/).
 
-[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
+[Learn how to use React in your project](https://react.dev/learn).
 
-## Examples
-
-We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
+## Installation
 
-```js
-/** @jsx React.DOM */
-var HelloMessage = React.createClass({
-  render: function() {
-    return <div>Hello {this.props.name}</div>;
-  }
-});
+React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
 
-React.renderComponent(
-  <HelloMessage name="John" />,
-  document.getElementById('container')
-);
-```
+* Use [Quick Start](https://react.dev/learn) to get a taste of React.
+* [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project) to use as little or as much React as you need.
+* [Create a New React App](https://react.dev/learn/start-a-new-react-project) if you're looking for a powerful JavaScript toolchain.
 
-This example will render "Hello John" into a container on the page.
+## Documentation
 
-You'll notice that we used an HTML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
+You can find the React documentation [on the website](https://react.dev/).
 
-## Installation
+Check out the [Getting Started](https://react.dev/learn) page for a quick overview.
 
-The fastest way to get started is to serve JavaScript from the CDN (also available on [CDNJS](http://cdnjs.com/#react)):
+The documentation is divided into several sections:
 
-```html
-<!-- The core React library -->
-<script src="http://fb.me/react-0.11.1.js"></script>
-<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
-```
+* [Quick Start](https://react.dev/learn)
+* [Tutorial](https://react.dev/learn/tutorial-tic-tac-toe)
+* [Thinking in React](https://react.dev/learn/thinking-in-react)
+* [Installation](https://react.dev/learn/installation)
+* [Describing the UI](https://react.dev/learn/describing-the-ui)
+* [Adding Interactivity](https://react.dev/learn/adding-interactivity)
+* [Managing State](https://react.dev/learn/managing-state)
+* [Advanced Guides](https://react.dev/learn/escape-hatches)
+* [API Reference](https://react.dev/reference/react)
+* [Where to Get Support](https://react.dev/community)
+* [Contributing Guide](https://legacy.reactjs.org/docs/how-to-contribute.html)
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.11.1.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
+You can improve it by sending pull requests to [this repository](https://github.com/reactjs/react.dev).
 
-If you'd like to use [bower](http://bower.io), it's as easy as:
+## Examples
 
-```sh
-bower install --save react
-```
+We have several examples [on the website](https://react.dev/). Here is the first one to get you started:
 
-## Contribute
+```jsx
+import { createRoot } from 'react-dom/client';
 
-The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too. :) Any feedback you have about using React would be greatly appreciated.
+function HelloMessage({ name }) {
+  return <div>Hello {name}</div>;
+}
 
-### Building Your Copy of React
+const root = createRoot(document.getElementById('container'));
+root.render(<HelloMessage name="Taylor" />);
+```
 
-The process to build `react.js` is built entirely on top of node.js, using many libraries you may already be familiar with.
+This example will render "Hello Taylor" into a container on the page.
 
-#### Prerequisites
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://react.dev/learn#writing-markup-with-jsx). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML.
 
-* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested).
-* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
-* You are familiar with `git`.
+## Contributing
 
-#### Build
+The main purpose of this repository is to continue evolving React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
 
-Once you have the repository cloned, building a copy of `react.js` is really easy.
+### [Code of Conduct](https://code.fb.com/codeofconduct)
 
-```sh
-# grunt-cli is needed by grunt; you might have this installed already
-npm install -g grunt-cli
-npm install
-grunt build
-```
+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.
 
-At this point, you should now have a `build/` directory populated with everything you need to use React. The examples should all work.
+### [Contributing Guide](https://legacy.reactjs.org/docs/how-to-contribute.html)
 
-### Grunt
+Read our [contributing guide](https://legacy.reactjs.org/docs/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
 
-We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete listing. The important ones to know:
+### [Good First Issues](https://github.com/facebook/react/labels/good%20first%20issue)
 
-```sh
-# Build and run tests with PhantomJS
-grunt test
-# Build and run tests in your browser
-grunt test --debug
-# For speed, you can use fasttest and add --filter to only run one test
-grunt fasttest --filter=ReactIdentity
-# Lint the code with JSHint
-grunt lint
-# Wipe out build directory
-grunt clean
-```
+To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs that have a relatively limited scope. This is a great place to get started.
 
-### More…
+### License
 
-There's only so much we can cram in here. To read more about the community and guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).
+React is [MIT licensed](./LICENSE).
diff --git a/ReactVersions.js b/ReactVersions.js
new file mode 100644
index 00000000000..dd8c78afb13
--- /dev/null
+++ b/ReactVersions.js
@@ -0,0 +1,64 @@
+'use strict';
+
+// This module is the single source of truth for versioning packages that we
+// publish to npm.
+//
+// Packages will not be published unless they are added here.
+//
+// The @latest channel uses the version as-is, e.g.:
+//
+//   19.3.0
+//
+// The @canary channel appends additional information, with the scheme
+// <version>-<label>-<commit_sha>, e.g.:
+//
+//   19.3.0-canary-a1c2d3e4
+//
+// The @experimental channel doesn't include a version, only a date and a sha, e.g.:
+//
+//   0.0.0-experimental-241c4467e-20200129
+
+const ReactVersion = '19.3.0';
+
+// The label used by the @canary channel. Represents the upcoming release's
+// stability. Most of the time, this will be "canary", but we may temporarily
+// choose to change it to "alpha", "beta", "rc", etc.
+//
+// It only affects the label used in the version string. To customize the
+// npm dist tags used during publish, refer to .github/workflows/runtime_prereleases_*.yml.
+const canaryChannelLabel = 'canary';
+
+// If the canaryChannelLabel is "rc", the build pipeline will use this to build
+// an RC version of the packages.
+const rcNumber = 0;
+
+const stablePackages = {
+  'eslint-plugin-react-hooks': '7.1.0',
+  'jest-react': '0.18.0',
+  react: ReactVersion,
+  'react-art': ReactVersion,
+  'react-dom': ReactVersion,
+  'react-server-dom-webpack': ReactVersion,
+  'react-server-dom-turbopack': ReactVersion,
+  'react-server-dom-parcel': ReactVersion,
+  'react-is': ReactVersion,
+  'react-reconciler': '0.34.0',
+  'react-refresh': '0.19.0',
+  'react-test-renderer': ReactVersion,
+  'use-subscription': '1.13.0',
+  'use-sync-external-store': '1.7.0',
+  scheduler: '0.28.0',
+};
+
+// These packages do not exist in the @canary or @latest channel, only
+// @experimental. We don't use semver, just the commit sha, so this is just a
+// list of package names instead of a map.
+const experimentalPackages = ['react-markup'];
+
+module.exports = {
+  ReactVersion,
+  canaryChannelLabel,
+  rcNumber,
+  stablePackages,
+  experimentalPackages,
+};
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 00000000000..655dfeaec0e
--- /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-react-compiler.js b/babel.config-react-compiler.js
new file mode 100644
index 00000000000..11fb8c292e3
--- /dev/null
+++ b/babel.config-react-compiler.js
@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * HACK: @poteto React Compiler inlines Zod in its build artifact. Zod spreads values passed to .map
+ * which causes issues in @babel/plugin-transform-spread in loose mode, as it will result in
+ * {undefined: undefined} which fails to parse.
+ *
+ * [@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}] also causes issues with
+ * the built version of the compiler. The minimal set of plugins needed for this file is reexported
+ * from babel.config-ts.
+ *
+ * I will remove this hack later when we move eslint-plugin-react-hooks into the compiler directory.
+ **/
+
+const baseConfig = require('./babel.config-ts');
+
+module.exports = {
+  plugins: baseConfig.plugins,
+};
diff --git a/babel.config-ts.js b/babel.config-ts.js
new file mode 100644
index 00000000000..02ffb447b37
--- /dev/null
+++ b/babel.config-ts.js
@@ -0,0 +1,18 @@
+/**
+ * This file is purely being used for local jest runs, and doesn't participate in the build process.
+ */
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    ['@babel/plugin-transform-class-properties', {loose: true}],
+    ['@babel/plugin-transform-private-methods', {loose: true}],
+    '@babel/plugin-transform-classes',
+  ],
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000000..f8a28b20cc8
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,26 @@
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-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/bin/jsx b/bin/jsx
deleted file mode 100755
index 45009e435e2..00000000000
--- a/bin/jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-#!/usr/bin/env node
-// -*- mode: js -*-
-"use strict";
-
-var transform = require('../main').transform;
-
-require('commoner').version(
-  require('../package.json').version
-).resolve(function(id) {
-  return this.readModuleP(id);
-}).option(
-  '--harmony',
-  'Turns on JS transformations such as ES6 Classes etc.'
-).option(
-  '--source-map-inline',
-  'Embed inline sourcemap in transformed source'
-).process(function(id, source) {
-  // This is where JSX, ES6, etc. desugaring happens.
-  var options = {
-    harmony: this.options.harmony,
-    sourceMap: this.options.sourceMapInline
-  };
-  return transform(source, options);
-});
diff --git a/bin/jsx-internal b/bin/jsx-internal
deleted file mode 100755
index 430e596cf1b..00000000000
--- a/bin/jsx-internal
+++ /dev/null
@@ -1,58 +0,0 @@
-#!/usr/bin/env node
-// -*- mode: js -*-
-"use strict";
-
-var getAllVisitors = require('../vendor/fbtransform/visitors').getAllVisitors;
-var transform = require('jstransform').transform;
-var propagate = require("../vendor/constants").propagate;
-
-require("commoner").version(
-  require("../package.json").version
-).resolve(function(id) {
-  var context = this;
-
-  // Note that the result of context.getProvidedP() is cached for the
-  // duration of the build, so it is both consistent and cheap to
-  // evaluate multiple times.
-  return context.getProvidedP().then(function(idToPath) {
-    // If a module declares its own identifier using @providesModule
-    // then that identifier will be a key in the idToPath object.
-    if (idToPath.hasOwnProperty(id)) {
-      return context.readFileP(idToPath[id]);
-    }
-
-    // Otherwise assume the identifier maps directly to a path in the
-    // filesystem.
-    return context.readModuleP(id);
-  });
-
-}).process(function(id, source) {
-  var context = this;
-  var constants = context.config.constants || {};
-
-  // This is where JSX, ES6, etc. desugaring happens.
-  source = transform(getAllVisitors(), source).code;
-
-  // Constant propagation means removing any obviously dead code after
-  // replacing constant expressions with literal (boolean) values.
-  source = propagate(constants, source);
-
-  if (context.config.mocking) {
-    // Make sure there is exactly one newline at the end of the module.
-    source = source.replace(/\s+$/m, "\n");
-
-    return context.getProvidedP().then(function(idToPath) {
-      if (id !== "mock-modules" &&
-          id !== "mocks" &&
-          id !== "test/all" &&
-          idToPath.hasOwnProperty("mock-modules")) {
-        return source + '\nrequire("mock-modules").register(' +
-          JSON.stringify(id) + ', module);\n';
-      }
-
-      return source;
-    });
-  }
-
-  return source;
-});
diff --git a/compiler/.claude/settings.json b/compiler/.claude/settings.json
new file mode 100644
index 00000000000..6f27a36ce3d
--- /dev/null
+++ b/compiler/.claude/settings.json
@@ -0,0 +1,18 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn snap:*)",
+      "Bash(yarn snap:build)",
+      "Bash(node scripts/enable-feature-flag.js:*)"
+    ],
+    "deny": [
+      "Skill(extract-errors)",
+      "Skill(feature-flags)",
+      "Skill(fix)",
+      "Skill(flags)",
+      "Skill(flow)",
+      "Skill(test)",
+      "Skill(verify)"
+    ]
+  }
+}
diff --git a/compiler/.eslintrc.js b/compiler/.eslintrc.js
new file mode 100644
index 00000000000..2f68f5c3103
--- /dev/null
+++ b/compiler/.eslintrc.js
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Our philosophy for linting is that lints should be very high-signal:
+ * - Error, don't warn. If it's worth mentioning it's worth fixing.
+ * - Enable rules that consistently identify real problems. If we frequently would have to
+ *   disable the rule due to false positives, it isn't high-signal.
+ * - Enable rules that help improve consistent style (to avoid code review about style rather
+ *   than substance).
+ */
+module.exports = {
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  rules: {
+    /*
+     * We prefer using const where variables are not reassigned, but occassional mistakes
+     * aren't a major issue
+     */
+    "prefer-const": "off",
+
+    // Not valuable enough to enable
+    "no-useless-escape": "off",
+
+    /*
+     * There are valid use cases for loops with constant conditions where the body contains the
+     * break
+     */
+    "no-constant-condition": "off",
+
+    // eslint only knows about builtin control flow (eg throw, return, break) and not custom ones
+    // like invariant.
+    "no-fallthrough": "off",
+
+    /*
+     * Low-value: this fires even for declarations that capture references which wouldn't be as
+     * obvious if the declaration was lifted to the parent root
+     */
+    "no-inner-declarations": "off",
+
+    "multiline-comment-style": ["error", "starred-block"],
+
+    /**
+     * We sometimes need to check for control characters in regexes for things like preserving input
+     * strings
+     */
+    "no-control-regex": "off",
+
+    "@typescript-eslint/no-empty-function": "off",
+
+    /*
+     * Explicitly casting to/through any is sometimes required, often for error messages to
+     * assertExhaustive()
+     */
+    "@typescript-eslint/no-explicit-any": "off",
+
+    /*
+     * We use non-null assertions carefully. Ideally, there would be a TS option to codegen
+     * a non-null check at the assertion site.
+     */
+    "@typescript-eslint/no-non-null-assertion": "off",
+
+    // Being explicit provides value in cases where inference may later change
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "error",
+
+    /*
+     * Unused variables are frequently a bug. Prefix unused variables with an _ to fix, but note
+     * that eslint won't warn you that an underscore prefixed variable is used and that the prefix
+     * should be dropped.
+     */
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+
+    // Consider enabling for consistency. Ideally violations could be auto-fixed.
+    "@typescript-eslint/consistent-generic-constructors": [
+      "off",
+      "constructor",
+    ],
+    "@typescript-eslint/array-type": ["error", { default: "generic" }],
+    "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/no-var-requires": "off",
+  },
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  root: true,
+  ignorePatterns: ["**/__tests__/**/*", "**/*.d.ts", "**/dist/**/*"],
+  env: {
+    node: true,
+  },
+  /*
+   * If rules need to be disabled then the rule is insufficiently high signal
+   * and should be diasbled altogether or customized (in either case via a standalone PR)
+   */
+  noInlineConfig: true,
+  reportUnusedDisableDirectives: true,
+};
diff --git a/compiler/.gitignore b/compiler/.gitignore
new file mode 100644
index 00000000000..70622d250d0
--- /dev/null
+++ b/compiler/.gitignore
@@ -0,0 +1,16 @@
+.DS_Store
+.spr.yml
+
+node_modules
+.watchmanconfig
+.watchman-cookie-*
+dist
+.vscode
+!packages/playground/.vscode
+testfilter.txt
+.claude/settings.local.json
+
+# forgive
+*.vsix
+.vscode-test
+
diff --git a/compiler/CHANGELOG.md b/compiler/CHANGELOG.md
new file mode 100644
index 00000000000..32e21efba0c
--- /dev/null
+++ b/compiler/CHANGELOG.md
@@ -0,0 +1,65 @@
+## 19.1.0-rc.2 (May 14, 2025)
+
+## babel-plugin-react-compiler
+
+* Fix for string attribute values with emoji [#33096](https://github.com/facebook/react/pull/33096) by [@josephsavona](https://github.com/josephsavona)
+
+## 19.1.0-rc.1 (April 21, 2025)
+
+## eslint-plugin-react-hooks
+* Temporarily disable ref access in render validation [#32839](https://github.com/facebook/react/pull/32839) by [@poteto](https://github.com/poteto)
+* Fix type error with recommended config [#32666](https://github.com/facebook/react/pull/32666) by [@niklasholm](https://github.com/niklasholm)
+* Merge rule from eslint-plugin-react-compiler into `react-hooks` plugin [#32416](https://github.com/facebook/react/pull/32416) by [@michaelfaith](https://github.com/michaelfaith)
+* Add dev dependencies for typescript migration [#32279](https://github.com/facebook/react/pull/32279) by [@michaelfaith](https://github.com/michaelfaith)
+* Support v9 context api [#32045](https://github.com/facebook/react/pull/32045) by [@michaelfaith](https://github.com/michaelfaith)
+* Support eslint 8+ flat plugin syntax out of the box for eslint-plugin-react-compiler [#32120](https://github.com/facebook/react/pull/32120) by [@orta](https://github.com/orta)
+
+## babel-plugin-react-compiler
+* Support satisfies operator [#32742](https://github.com/facebook/react/pull/32742) by [@rodrigofariow](https://github.com/rodrigofariow)
+* Fix inferEffectDependencies lint false positives [#32769](https://github.com/facebook/react/pull/32769) by [@mofeiZ](https://github.com/mofeiZ)
+* Fix hoisting of let declarations [#32724](https://github.com/facebook/react/pull/32724) by [@mofeiZ](https://github.com/mofeiZ)
+* Avoid failing builds when import specifiers conflict or shadow vars [#32663](https://github.com/facebook/react/pull/32663) by [@mofeiZ](https://github.com/mofeiZ)
+* Optimize components declared with arrow function and implicit return and `compilationMode: 'infer'` [#31792](https://github.com/facebook/react/pull/31792) by [@dimaMachina](https://github.com/dimaMachina)
+* Validate static components [#32683](https://github.com/facebook/react/pull/32683) by [@josephsavona](https://github.com/josephsavona)
+* Hoist dependencies from functions more conservatively [#32616](https://github.com/facebook/react/pull/32616) by [@mofeiZ](https://github.com/mofeiZ)
+* Implement NumericLiteral as ObjectPropertyKey [#31791](https://github.com/facebook/react/pull/31791) by [@dimaMachina](https://github.com/dimaMachina)
+* Avoid bailouts when inserting gating [#32598](https://github.com/facebook/react/pull/32598) by [@mofeiZ](https://github.com/mofeiZ)
+* Stop bailing out early for hoisted gated functions [#32597](https://github.com/facebook/react/pull/32597) by [@mofeiZ](https://github.com/mofeiZ)
+* Add shape for Array.from [#32522](https://github.com/facebook/react/pull/32522) by [@mofeiZ](https://github.com/mofeiZ)
+* Patch array and argument spread mutability [#32521](https://github.com/facebook/react/pull/32521) by [@mofeiZ](https://github.com/mofeiZ)
+* Make CompilerError compatible with reflection [#32539](https://github.com/facebook/react/pull/32539) by [@poteto](https://github.com/poteto)
+* Add simple walltime measurement [#32331](https://github.com/facebook/react/pull/32331) by [@poteto](https://github.com/poteto)
+* Improve error messages for unhandled terminal and instruction kinds [#32324](https://github.com/facebook/react/pull/32324) by [@inottn](https://github.com/inottn)
+* Handle TSInstantiationExpression in lowerExpression [#32302](https://github.com/facebook/react/pull/32302) by [@inottn](https://github.com/inottn)
+* Fix invalid Array.map type [#32095](https://github.com/facebook/react/pull/32095) by [@mofeiZ](https://github.com/mofeiZ)
+* Patch for JSX escape sequences in @babel/generator [#32131](https://github.com/facebook/react/pull/32131) by [@mofeiZ](https://github.com/mofeiZ)
+* `JSXText` emits incorrect with bracket [#32138](https://github.com/facebook/react/pull/32138) by [@himself65](https://github.com/himself65)
+* Validation against calling impure functions [#31960](https://github.com/facebook/react/pull/31960) by [@josephsavona](https://github.com/josephsavona)
+* Always target node [#32091](https://github.com/facebook/react/pull/32091) by [@poteto](https://github.com/poteto)
+* Patch compilationMode:infer object method edge case [#32055](https://github.com/facebook/react/pull/32055) by [@mofeiZ](https://github.com/mofeiZ)
+* Generate ts defs [#31994](https://github.com/facebook/react/pull/31994) by [@poteto](https://github.com/poteto)
+* Relax react peer dep requirement [#31915](https://github.com/facebook/react/pull/31915) by [@poteto](https://github.com/poteto)
+* Allow type cast expressions with refs [#31871](https://github.com/facebook/react/pull/31871) by [@josephsavona](https://github.com/josephsavona)
+* Add shape for global Object.keys [#31583](https://github.com/facebook/react/pull/31583) by [@mofeiZ](https://github.com/mofeiZ)
+* Optimize method calls w props receiver [#31775](https://github.com/facebook/react/pull/31775) by [@josephsavona](https://github.com/josephsavona)
+* Fix dropped ref with spread props in InlineJsxTransform [#31726](https://github.com/facebook/react/pull/31726) by [@jackpope](https://github.com/jackpope)
+* Support for non-declatation for in/of iterators [#31710](https://github.com/facebook/react/pull/31710) by [@mvitousek](https://github.com/mvitousek)
+* Support for context variable loop iterators [#31709](https://github.com/facebook/react/pull/31709) by [@mvitousek](https://github.com/mvitousek)
+* Replace deprecated dependency in `eslint-plugin-react-compiler` [#31629](https://github.com/facebook/react/pull/31629) by [@rakleed](https://github.com/rakleed)
+* Support enableRefAsProp in jsx transform [#31558](https://github.com/facebook/react/pull/31558) by [@jackpope](https://github.com/jackpope)
+* Fix: ref.current now correctly reactive [#31521](https://github.com/facebook/react/pull/31521) by [@mofeiZ](https://github.com/mofeiZ)
+* Outline JSX with non-jsx children [#31442](https://github.com/facebook/react/pull/31442) by [@gsathya](https://github.com/gsathya)
+* Outline jsx with duplicate attributes [#31441](https://github.com/facebook/react/pull/31441) by [@gsathya](https://github.com/gsathya)
+* Store original and new prop names [#31440](https://github.com/facebook/react/pull/31440) by [@gsathya](https://github.com/gsathya)
+* Stabilize compiler output: sort deps and decls by name [#31362](https://github.com/facebook/react/pull/31362) by [@mofeiZ](https://github.com/mofeiZ)
+* Bugfix for hoistable deps for nested functions [#31345](https://github.com/facebook/react/pull/31345) by [@mofeiZ](https://github.com/mofeiZ)
+* Remove compiler runtime-compat fixture library [#31430](https://github.com/facebook/react/pull/31430) by [@poteto](https://github.com/poteto)
+* Wrap inline jsx transform codegen in conditional [#31267](https://github.com/facebook/react/pull/31267) by [@jackpope](https://github.com/jackpope)
+* Check if local identifier is a hook when resolving globals [#31384](https://github.com/facebook/react/pull/31384) by [@poteto](https://github.com/poteto)
+* Handle member expr as computed property [#31344](https://github.com/facebook/react/pull/31344) by [@gsathya](https://github.com/gsathya)
+* Fix to ref access check to ban ref?.current [#31360](https://github.com/facebook/react/pull/31360) by [@mvitousek](https://github.com/mvitousek)
+* InlineJSXTransform transforms jsx inside function expressions [#31282](https://github.com/facebook/react/pull/31282) by [@josephsavona](https://github.com/josephsavona)
+
+## Other
+* Add shebang to banner [#32225](https://github.com/facebook/react/pull/32225) by [@Jeremy-Hibiki](https://github.com/Jeremy-Hibiki)
+* remove terser from react-compiler-runtime build [#31326](https://github.com/facebook/react/pull/31326) by [@henryqdineen](https://github.com/henryqdineen)
diff --git a/compiler/CLAUDE.md b/compiler/CLAUDE.md
new file mode 100644
index 00000000000..8de9c88fcf7
--- /dev/null
+++ b/compiler/CLAUDE.md
@@ -0,0 +1,223 @@
+# React Compiler Knowledge Base
+
+This document contains knowledge about the React Compiler gathered during development sessions. It serves as a reference for understanding the codebase architecture and key concepts.
+
+## Project Structure
+
+When modifying the compiler, you MUST read the documentation about that pass in `compiler/packages/babel-plugin-react-compiler/docs/passes/` to learn more about the role of that pass within the compiler.
+
+- `packages/babel-plugin-react-compiler/` - Main compiler package
+  - `src/HIR/` - High-level Intermediate Representation types and utilities
+  - `src/Inference/` - Effect inference passes (aliasing, mutation, etc.)
+  - `src/Validation/` - Validation passes that check for errors
+  - `src/Entrypoint/Pipeline.ts` - Main compilation pipeline with pass ordering
+  - `src/__tests__/fixtures/compiler/` - Test fixtures
+    - `error.todo-*.js` - Unsupported feature, correctly throws Todo error (graceful bailout)
+    - `error.bug-*.js` - Known bug, throws wrong error type or incorrect behavior
+    - `*.expect.md` - Expected output for each fixture
+
+## Running Tests
+
+```bash
+# Run all tests
+yarn snap
+
+# Run tests matching a pattern
+# Example: yarn snap -p 'error.*'
+yarn snap -p <pattern>
+
+# Run a single fixture in debug mode. Use the path relative to the __tests__/fixtures/compiler directory
+# For each step of compilation, outputs the step name and state of the compiled program
+# Example: yarn snap -p simple.js -d
+yarn snap -p <file-basename> -d
+
+# Update fixture outputs (also works with -p)
+yarn snap -u
+```
+
+## Version Control
+
+This repository uses Sapling (`sl`) for version control. Sapling is similar to Mercurial: there is not staging area, but new/deleted files must be explicitlyu added/removed.
+
+```bash
+# Check status
+sl status
+
+# Add new files, remove deleted files
+sl addremove
+
+# Commit all changes
+sl commit -m "Your commit message"
+
+# Commit with multi-line message using heredoc
+sl commit -m "$(cat <<'EOF'
+Summary line
+
+Detailed description here
+EOF
+)"
+```
+
+## Key Concepts
+
+### HIR (High-level Intermediate Representation)
+
+The compiler converts source code to HIR for analysis. Key types in `src/HIR/HIR.ts`:
+
+- **HIRFunction** - A function being compiled
+  - `body.blocks` - Map of BasicBlocks
+  - `context` - Captured variables from outer scope
+  - `params` - Function parameters
+  - `returns` - The function's return place
+  - `aliasingEffects` - Effects that describe the function's behavior when called
+
+- **Instruction** - A single operation
+  - `lvalue` - The place being assigned to
+  - `value` - The instruction kind (CallExpression, FunctionExpression, LoadLocal, etc.)
+  - `effects` - Array of AliasingEffects for this instruction
+
+- **Terminal** - Block terminators (return, branch, etc.)
+  - `effects` - Array of AliasingEffects
+
+- **Place** - A reference to a value
+  - `identifier.id` - Unique IdentifierId
+
+- **Phi nodes** - Join points for values from different control flow paths
+  - Located at `block.phis`
+  - `phi.place` - The result place
+  - `phi.operands` - Map of predecessor block to source place
+
+### AliasingEffects System
+
+Effects describe data flow and operations. Defined in `src/Inference/AliasingEffects.ts`:
+
+**Data Flow Effects:**
+- `Impure` - Marks a place as containing an impure value (e.g., Date.now() result, ref.current)
+- `Capture a -> b` - Value from `a` is captured into `b` (mutable capture)
+- `Alias a -> b` - `b` aliases `a`
+- `ImmutableCapture a -> b` - Immutable capture (like Capture but read-only)
+- `Assign a -> b` - Direct assignment
+- `MaybeAlias a -> b` - Possible aliasing
+- `CreateFrom a -> b` - Created from source
+
+**Mutation Effects:**
+- `Mutate value` - Value is mutated
+- `MutateTransitive value` - Value and transitive captures are mutated
+- `MutateConditionally value` - May mutate
+- `MutateTransitiveConditionally value` - May mutate transitively
+
+**Other Effects:**
+- `Render place` - Place is used in render context (JSX props, component return)
+- `Freeze place` - Place is frozen (made immutable)
+- `Create place` - New value created
+- `CreateFunction` - Function expression created, includes `captures` array
+- `Apply` - Function application with receiver, function, args, and result
+
+### Hook Aliasing Signatures
+
+Located in `src/HIR/Globals.ts`, hooks can define custom aliasing signatures to control how data flows through them.
+
+**Structure:**
+```typescript
+aliasing: {
+  receiver: '@receiver',    // The hook function itself
+  params: ['@param0'],      // Named positional parameters
+  rest: '@rest',            // Rest parameters (or null)
+  returns: '@returns',      // Return value
+  temporaries: [],          // Temporary values during execution
+  effects: [                // Array of effects to apply when hook is called
+    {kind: 'Freeze', value: '@param0', reason: ValueReason.HookCaptured},
+    {kind: 'Assign', from: '@param0', into: '@returns'},
+  ],
+}
+```
+
+**Common patterns:**
+
+1. **RenderHookAliasing** (useState, useContext, useMemo, useCallback):
+   - Freezes arguments (`Freeze @rest`)
+   - Marks arguments as render-time (`Render @rest`)
+   - Creates frozen return value
+   - Aliases arguments to return
+
+2. **EffectHookAliasing** (useEffect, useLayoutEffect, useInsertionEffect):
+   - Freezes function and deps
+   - Creates internal effect object
+   - Captures function and deps into effect
+   - Returns undefined
+
+3. **Event handler hooks** (useEffectEvent):
+   - Freezes callback (`Freeze @fn`)
+   - Aliases input to return (`Assign @fn -> @returns`)
+   - NO Render effect (callback not called during render)
+
+**Example: useEffectEvent**
+```typescript
+const UseEffectEventHook = addHook(
+  DEFAULT_SHAPES,
+  {
+    positionalParams: [Effect.Freeze],  // Takes one positional param
+    restParam: null,
+    returnType: {kind: 'Function', ...},
+    calleeEffect: Effect.Read,
+    hookKind: 'useEffectEvent',
+    returnValueKind: ValueKind.Frozen,
+    aliasing: {
+      receiver: '@receiver',
+      params: ['@fn'],              // Name for the callback parameter
+      rest: null,
+      returns: '@returns',
+      temporaries: [],
+      effects: [
+        {kind: 'Freeze', value: '@fn', reason: ValueReason.HookCaptured},
+        {kind: 'Assign', from: '@fn', into: '@returns'},
+        // Note: NO Render effect - callback is not called during render
+      ],
+    },
+  },
+  BuiltInUseEffectEventId,
+);
+
+// Add as both names for compatibility
+['useEffectEvent', UseEffectEventHook],
+['experimental_useEffectEvent', UseEffectEventHook],
+```
+
+**Key insight:** If a hook is missing an `aliasing` config, it falls back to `DefaultNonmutatingHook` which includes a `Render` effect on all arguments. This can cause false positives for hooks like `useEffectEvent` whose callbacks are not called during render.
+
+## Feature Flags
+
+Feature flags are configured in `src/HIR/Environment.ts`, for example `enableJsxOutlining`. Test fixtures can override the active feature flags used for that fixture via a comment pragma on the first line of the fixture input, for example:
+
+```javascript
+// enableJsxOutlining @enableChangeVariableCodegen:false
+
+...code...
+```
+
+Would enable the `enableJsxOutlining` feature and disable the `enableChangeVariableCodegen` feature.
+
+## Debugging Tips
+
+1. Run `yarn snap -p <fixture>` to see full HIR output with effects
+2. Look for `@aliasingEffects=` on FunctionExpressions
+3. Look for `Impure`, `Render`, `Capture` effects on instructions
+4. Check the pass ordering in Pipeline.ts to understand when effects are populated vs validated
+
+## Error Handling for Unsupported Features
+
+When the compiler encounters an unsupported but known pattern, use `CompilerError.throwTodo()` instead of `CompilerError.invariant()`. Todo errors cause graceful bailouts in production; Invariant errors are hard failures indicating unexpected/invalid states.
+
+```typescript
+// Unsupported but expected pattern - graceful bailout
+CompilerError.throwTodo({
+  reason: `Support [description of unsupported feature]`,
+  loc: terminal.loc,
+});
+
+// Invariant is for truly unexpected/invalid states - hard failure
+CompilerError.invariant(false, {
+  reason: `Unexpected [thing]`,
+  loc: terminal.loc,
+});
+```
diff --git a/compiler/README.md b/compiler/README.md
new file mode 100644
index 00000000000..53c0c22a0dc
--- /dev/null
+++ b/compiler/README.md
@@ -0,0 +1,7 @@
+# React Compiler
+
+React Compiler is a compiler that optimizes React applications, ensuring that only the minimal parts of components and hooks will re-render when state changes. The compiler also validates that components and hooks follow the Rules of React.
+
+More information about the design and architecture of the compiler are covered in the [Design Goals](./docs/DESIGN_GOALS.md).
+
+More information about developing the compiler itself is covered in the [Development Guide](./docs/DEVELOPMENT_GUIDE.md).
\ No newline at end of file
diff --git a/compiler/apps/playground/.eslintrc.json b/compiler/apps/playground/.eslintrc.json
new file mode 100644
index 00000000000..bffb357a712
--- /dev/null
+++ b/compiler/apps/playground/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/compiler/apps/playground/.gitignore b/compiler/apps/playground/.gitignore
new file mode 100644
index 00000000000..38f7fe0b21e
--- /dev/null
+++ b/compiler/apps/playground/.gitignore
@@ -0,0 +1,46 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/test-results
+
+# next.js
+/.next/
+/out/
+/next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# external fonts
+public/fonts/Optimistic_Display_W_Lt.woff2
+public/fonts/Optimistic_Display_W_Md.woff2
+public/fonts/Optimistic_Display_W_Bd.woff2
+
+# vscode
+.vscode/*
+!.vscode/extensions.json
diff --git a/compiler/apps/playground/.vscode/extensions.json b/compiler/apps/playground/.vscode/extensions.json
new file mode 100644
index 00000000000..7223b9d9125
--- /dev/null
+++ b/compiler/apps/playground/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss", "heybourn.headwind"]
+}
diff --git a/compiler/apps/playground/README.md b/compiler/apps/playground/README.md
new file mode 100644
index 00000000000..7b6d5f729ad
--- /dev/null
+++ b/compiler/apps/playground/README.md
@@ -0,0 +1,42 @@
+# React Compiler Playground
+
+An interactive playground to demonstrate, test, and have fun with React Compiler.
+
+## Setup
+
+```sh
+# Build React Compiler from source and install Playground dependencies.
+$ yarn
+
+# Or similarly
+$ npm install
+```
+
+## Development
+
+```sh
+# Start the local development server with
+$ yarn dev
+
+# Or
+$ npm run dev
+
+# Rerun the following (in a separate terminal window) when React Compiler
+# is changed locally to keep Playground in sync.
+$ yarn
+```
+
+## Testing
+```sh
+# Install playwright browser binaries
+$ npx playwright install --with-deps
+# Run tests
+$ yarn test
+```
+## Deployment
+
+This project has been deployed using Vercel. Vercel does the exact same thing as we would
+locally, by running `yarn` at the install step in the Playground directory to build
+React Compiler from source and [symlink](https://classic.yarnpkg.com/en/docs/cli/link) it as its dependency.
+This means that Playground is automatically deployed on every push and pull requests will reflect
+the behaviors of React Compiler of that commit.
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/01-user-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/01-user-output.txt
new file mode 100644
index 00000000000..1600f351073
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/01-user-output.txt
@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/02-default-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/02-default-output.txt
new file mode 100644
index 00000000000..1d59a120f98
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/02-default-output.txt
@@ -0,0 +1,12 @@
+import { c as _c } from "react/compiler-runtime";
+export default function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello World</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt
new file mode 100644
index 00000000000..ab7b3ce58cf
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt
@@ -0,0 +1,12 @@
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"all"
+function nonReactFn() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
\ No newline at end of file
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt
new file mode 100644
index 00000000000..563a566a069
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt
@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+function nonReactFn() {
+  return {};
+}
\ No newline at end of file
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/default-config.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/default-config.txt
new file mode 100644
index 00000000000..a012d051ec0
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/default-config.txt
@@ -0,0 +1,5 @@
+import type { PluginOptions } from 
+'babel-plugin-react-compiler/dist';
+({
+  //compilationMode: "all"
+} satisfies PluginOptions);
\ No newline at end of file
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/disableMemoizationForDebugging-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/disableMemoizationForDebugging-output.txt
new file mode 100644
index 00000000000..c0a2769bb3f
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/disableMemoizationForDebugging-output.txt
@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x || true) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-beats-module-scope-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-beats-module-scope-output.txt
new file mode 100644
index 00000000000..5bcfcb75edd
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/function-scope-beats-module-scope-output.txt
@@ -0,0 +1,14 @@
+function TestComponent(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt
new file mode 100644
index 00000000000..638a2bcd228
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-memo-output.txt
@@ -0,0 +1,15 @@
+"use memo";
+import { c as _c } from "react/compiler-runtime";
+export default function TestComponent(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt
new file mode 100644
index 00000000000..ebd2d2b0467
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/module-scope-use-no-memo-output.txt
@@ -0,0 +1,4 @@
+"use no memo";
+export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-flow-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-flow-output.txt
new file mode 100644
index 00000000000..c0907856bab
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-flow-output.txt
@@ -0,0 +1,14 @@
+import { c as _c } from "react/compiler-runtime";
+function useFoo(propVal) {
+  const $ = _c(2);
+  const t0 = (propVal.baz: number);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <div>{t0}</div>;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
\ No newline at end of file
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt
new file mode 100644
index 00000000000..c936c5ae2ed
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt
@@ -0,0 +1,20 @@
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0 as number;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{x}</div>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
\ No newline at end of file
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/todo-function-scope-does-not-beat-module-scope-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/todo-function-scope-does-not-beat-module-scope-output.txt
new file mode 100644
index 00000000000..325e6972e15
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/todo-function-scope-does-not-beat-module-scope-output.txt
@@ -0,0 +1,5 @@
+"use no memo";
+function TestComponent({ x }) {
+  "use memo";
+  return <Button>{x}</Button>;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-memo-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-memo-output.txt
new file mode 100644
index 00000000000..de6dd526800
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-memo-output.txt
@@ -0,0 +1,29 @@
+import { c as _c } from "react/compiler-runtime";
+function TestComponent(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+const TestComponent2 = (t0) => {
+  "use memo";
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = <Button>{x}</Button>;
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+};
diff --git a/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-no-memo-output.txt b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-no-memo-output.txt
new file mode 100644
index 00000000000..02c13676221
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/use-no-memo-output.txt
@@ -0,0 +1,8 @@
+const TestComponent = function () {
+  "use no memo";
+  return <Button>{x}</Button>;
+};
+const TestComponent2 = ({ x }) => {
+  "use no memo";
+  return <Button>{x}</Button>;
+};
diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts
new file mode 100644
index 00000000000..8ad9f122aab
--- /dev/null
+++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts
@@ -0,0 +1,374 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {encodeStore, type Store} from '../../lib/stores';
+import {defaultConfig} from '../../lib/defaultStore';
+import {format} from 'prettier';
+
+function isMonacoLoaded(): boolean {
+  return (
+    typeof window['MonacoEnvironment'] !== 'undefined' &&
+    window['__MONACO_LOADED__'] === true
+  );
+}
+
+function formatPrint(data: Array<string>): Promise<string> {
+  return format(data.join(''), {parser: 'babel'});
+}
+
+async function expandConfigs(page: Page): Promise<void> {
+  const expandButton = page.locator('[title="Expand config editor"]');
+  await expandButton.click();
+  await page.waitForSelector('.monaco-editor-config', {state: 'visible'});
+}
+
+const TEST_SOURCE = `export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}`;
+
+const TEST_CASE_INPUTS = [
+  {
+    name: 'module-scope-use-memo',
+    input: `
+'use memo';
+export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}`,
+  },
+  {
+    name: 'module-scope-use-no-memo',
+    input: `
+'use no memo';
+export default function TestComponent({ x }) {
+  return <Button>{x}</Button>;
+}`,
+  },
+  {
+    name: 'use-memo',
+    input: `
+function TestComponent({ x }) {
+  'use memo';
+  return <Button>{x}</Button>;
+}
+const TestComponent2 = ({ x }) => {
+  'use memo';
+  return <Button>{x}</Button>;
+};`,
+  },
+  {
+    name: 'use-no-memo',
+    input: `
+const TestComponent = function() {
+  'use no memo';
+  return <Button>{x}</Button>;
+};
+const TestComponent2 = ({ x }) => {
+  'use no memo';
+  return <Button>{x}</Button>;
+};`,
+  },
+  {
+    name: 'todo-function-scope-does-not-beat-module-scope',
+    input: `
+'use no memo';
+function TestComponent({ x }) {
+  'use memo';
+  return <Button>{x}</Button>;
+}`,
+  },
+  {
+    name: 'parse-typescript',
+    input: `
+function Foo() {
+  const x = foo() as number;
+  return <div>{x}</div>;
+}
+`,
+    noFormat: true,
+  },
+  {
+    name: 'parse-flow',
+    input: `
+// @flow
+function useFoo(propVal: {+baz: number}) {
+  return <div>{(propVal.baz as number)}</div>;
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'compilationMode-infer',
+    input: `// @compilationMode:"infer"
+function nonReactFn() {
+  return {};
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'compilationMode-all',
+    input: `// @compilationMode:"all"
+function nonReactFn() {
+  return {};
+}
+    `,
+    noFormat: true,
+  },
+];
+
+test('editor should open successfully', async ({page}) => {
+  await page.goto(`/`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/00-fresh-page.png',
+  });
+});
+
+test('editor should compile from hash successfully', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+
+  // User input from hash compiles
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/01-compiles-from-hash.png',
+  });
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = await formatPrint(text);
+
+  expect(output).not.toEqual('');
+  expect(output).toMatchSnapshot('01-user-output.txt');
+});
+
+test('reset button works', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+
+  // Reset button works
+  page.on('dialog', dialog => dialog.accept());
+  await page.getByRole('button', {name: 'Reset'}).click();
+  await expandConfigs(page);
+
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/02-reset-button-works.png',
+  });
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = await formatPrint(text);
+
+  const configText =
+    (await page.locator('.monaco-editor-config').allInnerTexts()) ?? [];
+  const configOutput = configText.join('');
+
+  expect(output).not.toEqual('');
+  expect(output).toMatchSnapshot('02-default-output.txt');
+  expect(configOutput).not.toEqual('');
+  expect(configOutput).toMatchSnapshot('default-config.txt');
+});
+
+test('defaults load when only source is in Store', async ({page}) => {
+  // Test for backwards compatibility
+  const partial = {
+    source: TEST_SOURCE,
+  };
+  const hash = encodeStore(partial as Store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/03-missing-defaults.png',
+  });
+
+  // Config editor has default config
+  const configText =
+    (await page.locator('.monaco-editor-config').allInnerTexts()) ?? [];
+  const configOutput = configText.join('');
+
+  expect(configOutput).not.toEqual('');
+  expect(configOutput).toMatchSnapshot('default-config.txt');
+
+  const checkbox = page.locator('label.show-internals');
+  await expect(checkbox).not.toBeChecked();
+  const ssaTab = page.locator('text=SSA');
+  await expect(ssaTab).not.toBeVisible();
+});
+
+test('show internals button toggles correctly', async ({page}) => {
+  await page.goto(`/`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+
+  // show internals should be off
+  const checkbox = page.locator('label.show-internals');
+  await checkbox.click();
+
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/04-show-internals-on.png',
+  });
+
+  await expect(checkbox).toBeChecked();
+
+  const ssaTab = page.locator('text=SSA');
+  await expect(ssaTab).toBeVisible();
+});
+
+test('error is displayed when config has syntax error', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: `compilationMode: `,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/05-config-syntax-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  // Remove hidden chars
+  expect(output.replace(/\s+/g, ' ')).toContain('Invalid override format');
+});
+
+test('error is displayed when config has validation error', async ({page}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: `import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+({
+  compilationMode: "123"
+} satisfies PluginOptions);`,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/06-config-validation-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  expect(output.replace(/\s+/g, ' ')).toContain('Unexpected compilationMode');
+});
+
+test('disableMemoizationForDebugging flag works as expected', async ({
+  page,
+}) => {
+  const store: Store = {
+    source: TEST_SOURCE,
+    config: `import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+({
+  environment: {
+    disableMemoizationForDebugging: true
+  }
+} satisfies PluginOptions);`,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/07-config-disableMemoizationForDebugging-flag.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = await formatPrint(text);
+
+  expect(output).not.toEqual('');
+  expect(output).toMatchSnapshot('disableMemoizationForDebugging-output.txt');
+});
+
+test('error is displayed when source has syntax error', async ({page}) => {
+  const syntaxErrorSource = `function TestComponent(props) {
+  const oops = props.
+  return (
+    <>{oops}</>
+  );
+}`;
+  const store: Store = {
+    source: syntaxErrorSource,
+    config: defaultConfig,
+    showInternals: false,
+  };
+  const hash = encodeStore(store);
+  await page.goto(`/#${hash}`);
+  await page.waitForFunction(isMonacoLoaded);
+  await expandConfigs(page);
+  await page.screenshot({
+    fullPage: true,
+    path: 'test-results/08-source-syntax-error.png',
+  });
+
+  const text =
+    (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+  const output = text.join('');
+
+  expect(output.replace(/\s+/g, ' ')).toContain(
+    'Expected identifier to be defined before being used',
+  );
+});
+
+TEST_CASE_INPUTS.forEach((t, idx) =>
+  test(`playground compiles: ${t.name}`, async ({page}) => {
+    const store: Store = {
+      source: t.input,
+      config: defaultConfig,
+      showInternals: false,
+    };
+    const hash = encodeStore(store);
+    await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+    await page.waitForFunction(isMonacoLoaded);
+    await page.screenshot({
+      fullPage: true,
+      path: `test-results/08-0${idx}-${t.name}.png`,
+    });
+
+    const text =
+      (await page.locator('.monaco-editor-output').allInnerTexts()) ?? [];
+    let output: string;
+    if (t.noFormat) {
+      output = text.join('');
+    } else {
+      output = await formatPrint(text);
+    }
+
+    expect(output).not.toEqual('');
+    expect(output).toMatchSnapshot(`${t.name}-output.txt`);
+  }),
+);
diff --git a/compiler/apps/playground/app/layout.tsx b/compiler/apps/playground/app/layout.tsx
new file mode 100644
index 00000000000..9a6daac239f
--- /dev/null
+++ b/compiler/apps/playground/app/layout.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '../styles/globals.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  'use no memo';
+  return (
+    <html lang="en">
+      <head>
+        <title>
+          {process.env.NODE_ENV === 'development'
+            ? '[DEV] React Compiler Playground'
+            : 'React Compiler Playground'}
+        </title>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"></meta>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link
+          rel="preload"
+          href="/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="/fonts/Optimistic_Display_W_Lt.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </head>
+      <body className="font-sans h-screen overflow-y-hidden">{children}</body>
+    </html>
+  );
+}
diff --git a/compiler/apps/playground/app/page.tsx b/compiler/apps/playground/app/page.tsx
new file mode 100644
index 00000000000..d5214af422e
--- /dev/null
+++ b/compiler/apps/playground/app/page.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use client';
+
+import {SnackbarProvider} from 'notistack';
+import {Editor, Header, StoreProvider} from '../components';
+import MessageSnackbar from '../components/Message';
+
+export default function Page(): JSX.Element {
+  return (
+    <StoreProvider>
+      <SnackbarProvider
+        preventDuplicate
+        maxSnack={10}
+        Components={{message: MessageSnackbar}}>
+        <Header />
+        <Editor />
+      </SnackbarProvider>
+    </StoreProvider>
+  );
+}
diff --git a/compiler/apps/playground/colors.js b/compiler/apps/playground/colors.js
new file mode 100644
index 00000000000..bd5f1426f5e
--- /dev/null
+++ b/compiler/apps/playground/colors.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Sync from <https://github.com/reactjs/reactjs.org/blob/main/beta/colors.js>.
+ */
+
+module.exports = {
+  // Text colors
+  primary: '#23272F', // gray-90
+  'primary-dark': '#F6F7F9', // gray-5
+  secondary: '#404756', // gray-70
+  'secondary-dark': '#EBECF0', // gray-10
+  link: '#087EA4', // blue-50
+  'link-dark': '#149ECA', // blue-40
+  syntax: '#EBECF0', // gray-10
+  wash: '#FFFFFF',
+  'wash-dark': '#23272F', // gray-90
+  card: '#F6F7F9', // gray-05
+  'card-dark': '#343A46', // gray-80
+  highlight: '#E6F7FF', // blue-10
+  'highlight-dark': 'rgba(88,175,223,.1)',
+  border: '#EBECF0', // gray-10
+  'border-dark': '#343A46', // gray-80
+  'secondary-button': '#EBECF0', // gray-10
+  'secondary-button-dark': '#404756', // gray-70
+
+  // Gray
+  'gray-95': '#16181D',
+  'gray-90': '#23272F',
+  'gray-80': '#343A46',
+  'gray-70': '#404756',
+  'gray-60': '#4E5769',
+  'gray-50': '#5E687E', // unused
+  'gray-40': '#78839B',
+  'gray-30': '#99A1B3',
+  'gray-20': '#BCC1CD',
+  'gray-10': '#EBECF0',
+  'gray-5': '#F6F7F9',
+
+  // Blue
+  'blue-60': '#045975',
+  'blue-50': '#087EA4',
+  'blue-40': '#149ECA', // Brand Blue
+  'blue-30': '#58C4DC', // unused
+  'blue-20': '#ABE2ED',
+  'blue-10': '#E6F7FF', // todo: doesn't match illustrations
+  'blue-5': '#E6F6FA',
+
+  // Yellow
+  'yellow-60': '#B65700',
+  'yellow-50': '#C76A15',
+  'yellow-40': '#DB7D27', // unused
+  'yellow-30': '#FABD62', // unused
+  'yellow-20': '#FCDEB0', // unused
+  'yellow-10': '#FDE7C7',
+  'yellow-5': '#FEF5E7',
+
+  // Purple
+  'purple-60': '#2B3491', // unused
+  'purple-50': '#575FB7',
+  'purple-40': '#6B75DB',
+  'purple-30': '#8891EC',
+  'purple-20': '#C3C8F5', // unused
+  'purple-10': '#E7E9FB',
+  'purple-5': '#F3F4FD',
+
+  // Green
+  'green-60': '#2B6E62',
+  'green-50': '#388F7F',
+  'green-40': '#44AC99',
+  'green-30': '#7FCCBF',
+  'green-20': '#ABDED5',
+  'green-10': '#E5F5F2',
+  'green-5': '#F4FBF9',
+
+  // RED
+  'red-60': '#712D28',
+  'red-50': '#A6423A', // unused
+  'red-40': '#C1554D',
+  'red-30': '#D07D77',
+  'red-20': '#E5B7B3', // unused
+  'red-10': '#F2DBD9', // unused
+  'red-5': '#FAF1F0',
+
+  // MISC
+  'code-block': '#99a1b30f', // gray-30 @ 6%
+  'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.
+  github: {
+    highlight: '#fffbdd',
+  },
+};
diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx
new file mode 100644
index 00000000000..a239bb13465
--- /dev/null
+++ b/compiler/apps/playground/components/AccordionWindow.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Resizable} from 're-resizable';
+import React, {
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+} from 'react';
+import {EXPAND_ACCORDION_TRANSITION} from '../lib/transitionTypes';
+
+type TabsRecord = Map<string, React.ReactNode>;
+
+export default function AccordionWindow(props: {
+  defaultTab: string | null;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  changedPasses: Set<string>;
+}): React.ReactElement {
+  return (
+    <div className="flex-1 min-w-[550px] sm:min-w-0">
+      <div className="flex flex-row h-full">
+        {Array.from(props.tabs.keys()).map(name => {
+          return (
+            <AccordionWindowItem
+              name={name}
+              key={name}
+              tabs={props.tabs}
+              tabsOpen={props.tabsOpen}
+              setTabsOpen={props.setTabsOpen}
+              hasChanged={props.changedPasses.has(name)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function AccordionWindowItem({
+  name,
+  tabs,
+  tabsOpen,
+  setTabsOpen,
+  hasChanged,
+}: {
+  name: string;
+  tabs: TabsRecord;
+  tabsOpen: Set<string>;
+  setTabsOpen: (newTab: Set<string>) => void;
+  hasChanged: boolean;
+  isFailure: boolean;
+}): React.ReactElement {
+  const id = useId();
+  const isShow = tabsOpen.has(name);
+
+  const transitionName = `accordion-window-item-${id}`;
+
+  const toggleTabs = (): void => {
+    startTransition(() => {
+      addTransitionType(EXPAND_ACCORDION_TRANSITION);
+      const nextState = new Set(tabsOpen);
+      if (nextState.has(name)) {
+        nextState.delete(name);
+      } else {
+        nextState.add(name);
+      }
+      setTabsOpen(nextState);
+    });
+  };
+
+  // Replace spaces with non-breaking spaces
+  const displayName = name.replace(/ /g, '\u00A0');
+
+  return (
+    <div key={name} className="flex flex-row">
+      {isShow ? (
+        <ViewTransition
+          name={transitionName}
+          update={{
+            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
+            default: 'none',
+          }}>
+          <Resizable className="border-r" minWidth={550} enable={{right: true}}>
+            <h2
+              title="Minimize tab"
+              aria-label="Minimize tab"
+              onClick={toggleTabs}
+              className={`p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 ${
+                hasChanged ? 'font-bold' : 'font-light'
+              } text-secondary hover:text-link`}>
+              - {displayName}
+            </h2>
+            {tabs.get(name) ?? <div>No output for {name}</div>}
+          </Resizable>
+        </ViewTransition>
+      ) : (
+        <ViewTransition
+          name={transitionName}
+          update={{
+            [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion',
+            default: 'none',
+          }}>
+          <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
+            <button
+              title={`Expand compiler tab: ${name}`}
+              aria-label={`Expand compiler tab: ${name}`}
+              style={{transform: 'rotate(90deg) translate(-50%)'}}
+              onClick={toggleTabs}
+              className={`flex-grow-0 w-5 transition-colors duration-150 ease-in ${
+                hasChanged ? 'font-bold' : 'font-light'
+              } text-secondary hover:text-link`}>
+              {displayName}
+            </button>
+          </div>
+        </ViewTransition>
+      )}
+    </div>
+  );
+}
diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
new file mode 100644
index 00000000000..e78ff35666b
--- /dev/null
+++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import type {editor} from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import React, {
+  useState,
+  useRef,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+} from 'react';
+import {Resizable} from 're-resizable';
+import {useStore, useStoreDispatch} from '../StoreContext';
+import {monacoConfigOptions} from './monacoOptions';
+import {IconChevron} from '../Icons/IconChevron';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
+
+// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
+import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
+
+loader.config({monaco});
+
+export default function ConfigEditor({
+  formattedAppliedConfig,
+}: {
+  formattedAppliedConfig: string;
+}): React.ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // TODO: Add back <Activity> after upgrading next.js
+  return (
+    <>
+      <div
+        style={{
+          display: isExpanded ? 'block' : 'none',
+        }}>
+        {/* <Activity mode={isExpanded ? 'visible' : 'hidden'}> */}
+        <ExpandedEditor
+          onToggle={() => {
+            startTransition(() => {
+              addTransitionType(CONFIG_PANEL_TRANSITION);
+              setIsExpanded(false);
+            });
+          }}
+          formattedAppliedConfig={formattedAppliedConfig}
+        />
+      </div>
+      <div
+        style={{
+          display: !isExpanded ? 'block' : 'none',
+        }}>
+        {/* </Activity>
+        <Activity mode={isExpanded ? 'hidden' : 'visible'}></Activity> */}
+        <CollapsedEditor
+          onToggle={() => {
+            startTransition(() => {
+              addTransitionType(CONFIG_PANEL_TRANSITION);
+              setIsExpanded(true);
+            });
+          }}
+        />
+      </div>
+      {/* </Activity> */}
+    </>
+  );
+}
+
+function ExpandedEditor({
+  onToggle,
+  formattedAppliedConfig,
+}: {
+  onToggle: (expanded: boolean) => void;
+  formattedAppliedConfig: string;
+}): React.ReactElement {
+  const store = useStore();
+  const dispatchStore = useStoreDispatch();
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleChange: (value: string | undefined) => void = (
+    value: string | undefined,
+  ) => {
+    if (value === undefined) return;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      dispatchStore({
+        type: 'updateConfig',
+        payload: {
+          config: value,
+        },
+      });
+    }, 500); // 500ms debounce delay
+  };
+
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
+    // Add the babel-plugin-react-compiler type definitions to Monaco
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      //@ts-expect-error - compilerTypeDefs is a string
+      compilerTypeDefs,
+      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
+    );
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.Latest,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      noEmit: true,
+      strict: false,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      jsx: monaco.languages.typescript.JsxEmit.React,
+    });
+  };
+
+  return (
+    <ViewTransition
+      update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
+      {/* enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}
+      exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}> */}
+      <Resizable
+        minWidth={300}
+        maxWidth={600}
+        defaultSize={{width: 350}}
+        enable={{right: true, bottom: false}}>
+        <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
+          <div
+            className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"
+            title="Minimize config editor"
+            onClick={onToggle}
+            style={{
+              top: '50%',
+              marginTop: '-32px',
+              right: '-32px',
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}>
+            <IconChevron displayDirection="left" className="text-blue-50" />
+          </div>
+
+          <div className="flex-1 flex flex-col m-2 mb-2">
+            <div className="pb-2">
+              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
+                Config Overrides
+              </h2>
+            </div>
+            <div className="flex-1 border border-gray-300">
+              <MonacoEditor
+                path={'config.ts'}
+                language={'typescript'}
+                value={store.config}
+                onMount={handleMount}
+                onChange={handleChange}
+                loading={''}
+                className="monaco-editor-config"
+                options={monacoConfigOptions}
+              />
+            </div>
+          </div>
+          <div className="flex-1 flex flex-col m-2">
+            <div className="pb-2">
+              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
+                Applied Configs
+              </h2>
+            </div>
+            <div className="flex-1 border border-gray-300">
+              <MonacoEditor
+                path={'applied-config.js'}
+                language={'javascript'}
+                value={formattedAppliedConfig}
+                loading={''}
+                className="monaco-editor-applied-config"
+                options={{
+                  ...monacoConfigOptions,
+                  readOnly: true,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </Resizable>
+    </ViewTransition>
+  );
+}
+
+function CollapsedEditor({
+  onToggle,
+}: {
+  onToggle: () => void;
+}): React.ReactElement {
+  return (
+    <div
+      className="w-4 !h-[calc(100vh_-_3.5rem)]"
+      style={{position: 'relative'}}>
+      <div
+        className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"
+        title="Expand config editor"
+        onClick={onToggle}
+        style={{
+          top: '50%',
+          marginTop: '-32px',
+          left: '-8px',
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        }}>
+        <IconChevron displayDirection="right" className="text-blue-50" />
+      </div>
+    </div>
+  );
+}
diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
new file mode 100644
index 00000000000..5b39b91654e
--- /dev/null
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+} from 'babel-plugin-react-compiler';
+import {useDeferredValue, useMemo, useState} from 'react';
+import {useStore} from '../StoreContext';
+import ConfigEditor from './ConfigEditor';
+import Input from './Input';
+import {CompilerOutput, default as Output} from './Output';
+import {compile} from '../../lib/compilation';
+import prettyFormat from 'pretty-format';
+
+export default function Editor(): JSX.Element {
+  const store = useStore();
+  const deferredStore = useDeferredValue(store);
+  const [compilerOutput, language, appliedOptions] = useMemo(
+    () => compile(deferredStore.source, 'compiler', deferredStore.config),
+    [deferredStore.source, deferredStore.config],
+  );
+  const [linterOutput] = useMemo(
+    () => compile(deferredStore.source, 'linter', deferredStore.config),
+    [deferredStore.source, deferredStore.config],
+  );
+  const [formattedAppliedConfig, setFormattedAppliedConfig] = useState('');
+
+  let mergedOutput: CompilerOutput;
+  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  if (compilerOutput.kind === 'ok') {
+    errors = linterOutput.kind === 'ok' ? [] : linterOutput.error.details;
+    mergedOutput = {
+      ...compilerOutput,
+      errors,
+    };
+  } else {
+    mergedOutput = compilerOutput;
+    errors = compilerOutput.error.details;
+  }
+
+  if (appliedOptions) {
+    const formatted = prettyFormat(appliedOptions, {
+      printFunctionName: false,
+      printBasicPrototype: false,
+    });
+    if (formatted !== formattedAppliedConfig) {
+      setFormattedAppliedConfig(formatted);
+    }
+  }
+
+  return (
+    <>
+      <div className="relative flex top-14">
+        <div className="flex-shrink-0">
+          <ConfigEditor formattedAppliedConfig={formattedAppliedConfig} />
+        </div>
+        <div className="flex flex-1 min-w-0">
+          <Input language={language} errors={errors} />
+          <Output store={deferredStore} compilerOutput={mergedOutput} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/compiler/apps/playground/components/Editor/Input.tsx b/compiler/apps/playground/components/Editor/Input.tsx
new file mode 100644
index 00000000000..8c37b12975b
--- /dev/null
+++ b/compiler/apps/playground/components/Editor/Input.tsx
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import {
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+} from 'babel-plugin-react-compiler';
+import invariant from 'invariant';
+import type {editor} from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import {
+  useEffect,
+  useState,
+  unstable_ViewTransition as ViewTransition,
+} from 'react';
+import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
+import {useStore, useStoreDispatch} from '../StoreContext';
+import TabbedWindow from '../TabbedWindow';
+import {monacoOptions} from './monacoOptions';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
+
+// @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
+import React$Types from '../../node_modules/@types/react/index.d.ts';
+
+loader.config({monaco});
+
+type Props = {
+  errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  language: 'flow' | 'typescript';
+};
+
+export default function Input({errors, language}: Props): JSX.Element {
+  const [monaco, setMonaco] = useState<Monaco | null>(null);
+  const store = useStore();
+  const dispatchStore = useStoreDispatch();
+
+  // Set tab width to 2 spaces for the selected input file.
+  useEffect(() => {
+    if (!monaco) return;
+    const uri = monaco.Uri.parse(`file:///index.js`);
+    const model = monaco.editor.getModel(uri);
+    invariant(model, 'Model must exist for the selected input file.');
+    renderReactCompilerMarkers({
+      monaco,
+      model,
+      details: errors,
+      source: store.source,
+    });
+  }, [monaco, errors, store.source]);
+
+  useEffect(() => {
+    /**
+     * Ignore "can only be used in TypeScript files." errors, since
+     * we want to support syntax highlighting for Flow (*.js) files
+     * and Flow is not a built-in language.
+     */
+    if (!monaco) return;
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      diagnosticCodesToIgnore: [
+        8002,
+        8003,
+        8004,
+        8005,
+        8006,
+        8008,
+        8009,
+        8010,
+        8011,
+        8012,
+        8013,
+        ...(language === 'flow'
+          ? [7028 /* unused label */, 6133 /* var declared but not read */]
+          : []),
+      ],
+      noSemanticValidation: true,
+      // Monaco can't validate Flow component syntax
+      noSyntaxValidation: language === 'flow',
+    });
+  }, [monaco, language]);
+
+  const handleChange: (value: string | undefined) => void = async value => {
+    if (!value) return;
+
+    dispatchStore({
+      type: 'updateSource',
+      payload: {
+        source: value,
+      },
+    });
+  };
+
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
+    if (typeof window !== 'undefined') {
+      window['__MONACO_LOADED__'] = true;
+    }
+    setMonaco(monaco);
+
+    const tscOptions = {
+      allowNonTsExtensions: true,
+      target: monaco.languages.typescript.ScriptTarget.ES2015,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      jsx: monaco.languages.typescript.JsxEmit.Preserve,
+      typeRoots: ['node_modules/@types'],
+      allowSyntheticDefaultImports: true,
+    };
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
+      tscOptions,
+    );
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      ...tscOptions,
+      checkJs: true,
+      allowJs: true,
+    });
+
+    // Add React type declarations to Monaco
+    const reactLib = [
+      React$Types,
+      'file:///node_modules/@types/react/index.d.ts',
+    ] as [any, string];
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(...reactLib);
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(...reactLib);
+
+    /**
+     * Remeasure the font in case the custom font is loaded only after
+     * Monaco Editor is mounted.
+     * N.B. that this applies also to the output editor as it seems
+     * Monaco Editor instances share the same font config.
+     */
+    document.fonts.ready.then(() => {
+      monaco.editor.remeasureFonts();
+    });
+  };
+
+  const editorContent = (
+    <MonacoEditor
+      path={'index.js'}
+      /**
+       * .js and .jsx files are specified to be TS so that Monaco can actually
+       * check their syntax using its TS language service. They are still JS files
+       * due to their extensions, so TS language features don't work.
+       */
+      language={'javascript'}
+      value={store.source}
+      onMount={handleMount}
+      onChange={handleChange}
+      className="monaco-editor-input"
+      options={monacoOptions}
+      loading={''}
+    />
+  );
+
+  const tabs = new Map([['Input', editorContent]]);
+  const [activeTab, setActiveTab] = useState('Input');
+
+  return (
+    <ViewTransition
+      update={{
+        [CONFIG_PANEL_TRANSITION]: 'container',
+        default: 'none',
+      }}>
+      <div className="flex-1 min-w-[550px] sm:min-w-0">
+        <div className="flex flex-col h-full !h-[calc(100vh_-_3.5rem)] border-r border-gray-200">
+          <TabbedWindow
+            tabs={tabs}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+          />
+        </div>
+      </div>
+    </ViewTransition>
+  );
+}
diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
new file mode 100644
index 00000000000..573ded92fc9
--- /dev/null
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -0,0 +1,422 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CodeIcon,
+  DocumentAddIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/outline';
+import MonacoEditor, {DiffEditor} from '@monaco-editor/react';
+import {
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+  type CompilerError,
+} from 'babel-plugin-react-compiler';
+import parserBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettier from 'prettier/standalone';
+import {type Store} from '../../lib/stores';
+import {
+  memo,
+  ReactNode,
+  use,
+  useState,
+  Suspense,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+} from 'react';
+import AccordionWindow from '../AccordionWindow';
+import TabbedWindow from '../TabbedWindow';
+import {monacoOptions} from './monacoOptions';
+import {BabelFileResult} from '@babel/core';
+import {
+  CONFIG_PANEL_TRANSITION,
+  TOGGLE_INTERNALS_TRANSITION,
+  EXPAND_ACCORDION_TRANSITION,
+} from '../../lib/transitionTypes';
+import {LRUCache} from 'lru-cache';
+
+const MemoizedOutput = memo(Output);
+
+export default MemoizedOutput;
+
+export const BASIC_OUTPUT_TAB_NAMES = ['Output', 'SourceMap'];
+
+const tabifyCache = new LRUCache<Store, Promise<Map<string, ReactNode>>>({
+  max: 5,
+});
+
+export type PrintedCompilerPipelineValue =
+  | {
+      kind: 'hir';
+      name: string;
+      fnName: string | null;
+      value: string;
+    }
+  | {kind: 'reactive'; name: string; fnName: string | null; value: string}
+  | {kind: 'debug'; name: string; fnName: string | null; value: string};
+
+export type CompilerTransformOutput = {
+  code: string;
+  sourceMaps: BabelFileResult['map'];
+  language: 'flow' | 'typescript';
+};
+export type CompilerOutput =
+  | {
+      kind: 'ok';
+      transformOutput: CompilerTransformOutput;
+      results: Map<string, Array<PrintedCompilerPipelineValue>>;
+      errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
+    }
+  | {
+      kind: 'err';
+      results: Map<string, Array<PrintedCompilerPipelineValue>>;
+      error: CompilerError;
+    };
+
+type Props = {
+  store: Store;
+  compilerOutput: CompilerOutput;
+};
+
+async function tabify(
+  source: string,
+  compilerOutput: CompilerOutput,
+  showInternals: boolean,
+): Promise<Map<string, ReactNode>> {
+  const tabs = new Map<string, React.ReactNode>();
+  const reorderedTabs = new Map<string, React.ReactNode>();
+  const concattedResults = new Map<string, string>();
+  // Concat all top level function declaration results into a single tab for each pass
+  for (const [passName, results] of compilerOutput.results) {
+    if (!showInternals && !BASIC_OUTPUT_TAB_NAMES.includes(passName)) {
+      continue;
+    }
+    for (const result of results) {
+      switch (result.kind) {
+        case 'hir': {
+          const prev = concattedResults.get(result.name);
+          const next = result.value;
+          const identName = `function ${result.fnName}`;
+          if (prev != null) {
+            concattedResults.set(passName, `${prev}\n\n${identName}\n${next}`);
+          } else {
+            concattedResults.set(passName, `${identName}\n${next}`);
+          }
+          break;
+        }
+        case 'reactive': {
+          const prev = concattedResults.get(passName);
+          const next = result.value;
+          if (prev != null) {
+            concattedResults.set(passName, `${prev}\n\n${next}`);
+          } else {
+            concattedResults.set(passName, next);
+          }
+          break;
+        }
+        case 'debug': {
+          concattedResults.set(passName, result.value);
+          break;
+        }
+        default: {
+          const _: never = result;
+          throw new Error('Unexpected result kind');
+        }
+      }
+    }
+  }
+  let lastPassOutput: string | null = null;
+  let nonDiffPasses = ['HIR', 'BuildReactiveFunction', 'EnvironmentConfig'];
+  for (const [passName, text] of concattedResults) {
+    tabs.set(
+      passName,
+      <TextTabContent
+        output={text}
+        diff={lastPassOutput}
+        showInfoPanel={!nonDiffPasses.includes(passName)}></TextTabContent>,
+    );
+    lastPassOutput = text;
+  }
+  // Ensure that JS and the JS source map come first
+  if (compilerOutput.kind === 'ok') {
+    const {transformOutput} = compilerOutput;
+    const sourceMapUrl = getSourceMapUrl(
+      transformOutput.code,
+      JSON.stringify(transformOutput.sourceMaps),
+    );
+    const code = await prettier.format(transformOutput.code, {
+      semi: true,
+      parser: transformOutput.language === 'flow' ? 'babel-flow' : 'babel-ts',
+      plugins: [parserBabel, prettierPluginEstree],
+    });
+
+    let output: string;
+    let language: string;
+    if (compilerOutput.errors.length === 0) {
+      output = code;
+      language = 'javascript';
+    } else {
+      language = 'markdown';
+      output = `
+# Summary
+
+React Compiler compiled this function successfully, but there are lint errors that indicate potential issues with the original code.
+
+## ${compilerOutput.errors.length} Lint Errors
+
+${compilerOutput.errors.map(e => e.printErrorMessage(source, {eslint: false})).join('\n\n')}
+
+## Output
+
+\`\`\`js
+${code}
+\`\`\`
+`.trim();
+    }
+
+    reorderedTabs.set(
+      'Output',
+      <TextTabContent
+        output={output}
+        language={language}
+        diff={null}
+        showInfoPanel={false}></TextTabContent>,
+    );
+    if (sourceMapUrl) {
+      reorderedTabs.set(
+        'SourceMap',
+        <>
+          <iframe
+            src={sourceMapUrl}
+            className="w-full h-monaco_small sm:h-monaco"
+            title="Generated Code"
+          />
+        </>,
+      );
+    }
+  } else if (compilerOutput.kind === 'err') {
+    const errors = compilerOutput.error.printErrorMessage(source, {
+      eslint: false,
+    });
+    reorderedTabs.set(
+      'Output',
+      <TextTabContent
+        output={errors}
+        language="markdown"
+        diff={null}
+        showInfoPanel={false}></TextTabContent>,
+    );
+  }
+  tabs.forEach((tab, name) => {
+    reorderedTabs.set(name, tab);
+  });
+  return reorderedTabs;
+}
+
+function tabifyCached(
+  store: Store,
+  compilerOutput: CompilerOutput,
+): Promise<Map<string, ReactNode>> {
+  const cached = tabifyCache.get(store);
+  if (cached) return cached;
+  const result = tabify(store.source, compilerOutput, store.showInternals);
+  tabifyCache.set(store, result);
+  return result;
+}
+
+function Fallback(): JSX.Element {
+  return (
+    <div className="w-full h-monaco_small sm:h-monaco flex items-center justify-center">
+      Loading...
+    </div>
+  );
+}
+
+function utf16ToUTF8(s: string): string {
+  return unescape(encodeURIComponent(s));
+}
+
+function getSourceMapUrl(code: string, map: string): string | null {
+  code = utf16ToUTF8(code);
+  map = utf16ToUTF8(map);
+  return `https://evanw.github.io/source-map-visualization/#${btoa(
+    `${code.length}\0${code}${map.length}\0${map}`,
+  )}`;
+}
+
+function Output({store, compilerOutput}: Props): JSX.Element {
+  return (
+    <Suspense fallback={<Fallback />}>
+      <OutputContent store={store} compilerOutput={compilerOutput} />
+    </Suspense>
+  );
+}
+
+function OutputContent({store, compilerOutput}: Props): JSX.Element {
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(
+    () => new Set(['Output']),
+  );
+  const [activeTab, setActiveTab] = useState<string>('Output');
+
+  /*
+   * Update the active tab back to the output or errors tab when the compilation state
+   * changes between success/failure.
+   */
+  const [previousOutputKind, setPreviousOutputKind] = useState(
+    compilerOutput.kind,
+  );
+  const isFailure = compilerOutput.kind !== 'ok';
+
+  if (compilerOutput.kind !== previousOutputKind) {
+    setPreviousOutputKind(compilerOutput.kind);
+    if (isFailure) {
+      startTransition(() => {
+        addTransitionType(EXPAND_ACCORDION_TRANSITION);
+        setTabsOpen(prev => new Set(prev).add('Output'));
+        setActiveTab('Output');
+      });
+    }
+  }
+
+  const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
+  let lastResult: string = '';
+  for (const [passName, results] of compilerOutput.results) {
+    for (const result of results) {
+      let currResult = '';
+      if (result.kind === 'hir' || result.kind === 'reactive') {
+        currResult += `function ${result.fnName}\n\n${result.value}`;
+      }
+      if (currResult !== lastResult) {
+        changedPasses.add(passName);
+      }
+      lastResult = currResult;
+    }
+  }
+  const tabs = use(tabifyCached(store, compilerOutput));
+
+  if (!store.showInternals) {
+    return (
+      <ViewTransition
+        update={{
+          [CONFIG_PANEL_TRANSITION]: 'container',
+          [TOGGLE_INTERNALS_TRANSITION]: '',
+          default: 'none',
+        }}>
+        <TabbedWindow
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </ViewTransition>
+    );
+  }
+
+  return (
+    <ViewTransition
+      update={{
+        [CONFIG_PANEL_TRANSITION]: 'accordion-container',
+        [TOGGLE_INTERNALS_TRANSITION]: '',
+        default: 'none',
+      }}>
+      <AccordionWindow
+        defaultTab={store.showInternals ? 'HIR' : 'Output'}
+        setTabsOpen={setTabsOpen}
+        tabsOpen={tabsOpen}
+        tabs={tabs}
+        changedPasses={changedPasses}
+      />
+    </ViewTransition>
+  );
+}
+
+function TextTabContent({
+  output,
+  diff,
+  showInfoPanel,
+  language,
+}: {
+  output: string;
+  diff: string | null;
+  showInfoPanel: boolean;
+  language: string;
+}): JSX.Element {
+  const [diffMode, setDiffMode] = useState(false);
+  return (
+    /**
+     * Restrict MonacoEditor's height, since the config autoLayout:true
+     * will grow the editor to fit within parent element
+     */
+    <div className="w-full h-monaco_small sm:h-monaco">
+      {showInfoPanel ? (
+        <div className="flex items-center gap-1 bg-amber-50 p-2">
+          {diff != null && output !== diff ? (
+            <button
+              className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+              onClick={() => setDiffMode(diffMode => !diffMode)}>
+              {!diffMode ? (
+                <>
+                  <DocumentAddIcon className="w-5 h-5" /> Show Diff
+                </>
+              ) : (
+                <>
+                  <CodeIcon className="w-5 h-5" /> Show Output
+                </>
+              )}
+            </button>
+          ) : (
+            <>
+              <span className="flex items-center gap-1">
+                <InformationCircleIcon className="w-5 h-5" /> No changes from
+                previous pass
+              </span>
+            </>
+          )}
+        </div>
+      ) : null}
+      {diff != null && diffMode ? (
+        <DiffEditor
+          original={diff}
+          modified={output}
+          loading={''}
+          options={{
+            ...monacoOptions,
+            scrollbar: {
+              vertical: 'hidden',
+            },
+            dimension: {
+              width: 0,
+              height: 0,
+            },
+            readOnly: true,
+            lineNumbers: 'off',
+            glyphMargin: false,
+            // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
+            overviewRulerLanes: 0,
+          }}
+        />
+      ) : (
+        <MonacoEditor
+          language={language ?? 'javascript'}
+          value={output}
+          loading={''}
+          className="monaco-editor-output"
+          options={{
+            ...monacoOptions,
+            readOnly: true,
+            lineNumbers: 'off',
+            glyphMargin: false,
+            // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
+            lineDecorationsWidth: 0,
+            lineNumbersMinChars: 0,
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/compiler/apps/playground/components/Editor/index.tsx b/compiler/apps/playground/components/Editor/index.tsx
new file mode 100644
index 00000000000..6fe7234d29c
--- /dev/null
+++ b/compiler/apps/playground/components/Editor/index.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import dynamic from 'next/dynamic';
+
+/**
+ * monaco-editor is currently not compatible with ssr
+ * https://github.com/vercel/next.js/issues/31692
+ */
+const Editor = dynamic(() => import('./EditorImpl'), {
+  ssr: false,
+});
+
+export default Editor;
diff --git a/compiler/apps/playground/components/Editor/monacoOptions.ts b/compiler/apps/playground/components/Editor/monacoOptions.ts
new file mode 100644
index 00000000000..d52c8bbedfa
--- /dev/null
+++ b/compiler/apps/playground/components/Editor/monacoOptions.ts
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {EditorProps} from '@monaco-editor/react';
+
+export const monacoOptions: Partial<EditorProps['options']> = {
+  fontSize: 14,
+  padding: {top: 8},
+  scrollbar: {
+    verticalScrollbarSize: 10,
+    alwaysConsumeMouseWheel: false,
+  },
+  minimap: {
+    enabled: false,
+  },
+  formatOnPaste: true,
+  formatOnType: true,
+  fontFamily: '"Source Code Pro", monospace',
+  glyphMargin: true,
+
+  autoClosingBrackets: 'languageDefined',
+  autoClosingDelete: 'always',
+  autoClosingOvertype: 'always',
+
+  automaticLayout: true,
+  wordWrap: 'on',
+  wrappingIndent: 'same',
+
+  tabSize: 2,
+};
+
+export const monacoConfigOptions: Partial<EditorProps['options']> = {
+  ...monacoOptions,
+  lineNumbers: 'off',
+  renderLineHighlight: 'none',
+  overviewRulerBorder: false,
+  overviewRulerLanes: 0,
+  fontSize: 12,
+  scrollBeyondLastLine: false,
+  glyphMargin: false,
+};
diff --git a/compiler/apps/playground/components/Header.tsx b/compiler/apps/playground/components/Header.tsx
new file mode 100644
index 00000000000..421cefd5db0
--- /dev/null
+++ b/compiler/apps/playground/components/Header.tsx
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {RefreshIcon, ShareIcon} from '@heroicons/react/outline';
+import {CheckIcon} from '@heroicons/react/solid';
+import clsx from 'clsx';
+import Link from 'next/link';
+import {useSnackbar} from 'notistack';
+import {
+  useState,
+  startTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
+import {defaultStore} from '../lib/defaultStore';
+import {IconGitHub} from './Icons/IconGitHub';
+import Logo from './Logo';
+import {useStore, useStoreDispatch} from './StoreContext';
+import {TOGGLE_INTERNALS_TRANSITION} from '../lib/transitionTypes';
+
+export default function Header(): JSX.Element {
+  const [showCheck, setShowCheck] = useState(false);
+  const store = useStore();
+  const dispatchStore = useStoreDispatch();
+  const {enqueueSnackbar, closeSnackbar} = useSnackbar();
+
+  const handleReset: () => void = () => {
+    if (confirm('Are you sure you want to reset the playground?')) {
+      /**
+       * Close open snackbars if any. This is necessary because when displaying
+       * outputs (Preview or not), we only close previous snackbars if we received
+       * new messages, which is needed in order to display "Bad URL" or success
+       * messages when loading Playground for the first time. Otherwise, messages
+       * such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
+       */
+      closeSnackbar();
+      dispatchStore({type: 'setStore', payload: {store: defaultStore}});
+    }
+  };
+
+  const handleShare: () => void = () => {
+    navigator.clipboard.writeText(location.href).then(() => {
+      enqueueSnackbar('URL copied to clipboard');
+      setShowCheck(true);
+      // Show the check mark icon briefly after URL is copied
+      setTimeout(() => setShowCheck(false), 1000);
+    });
+  };
+
+  return (
+    <div className="fixed z-10 flex items-center justify-between w-screen px-5 py-3 bg-white border-b border-gray-200 h-14">
+      <div className="flex items-center flex-none h-full gap-2 text-lg">
+        <Logo
+          className={clsx(
+            'w-8 h-8 text-link',
+            process.env.NODE_ENV === 'development' && 'text-yellow-600',
+          )}
+        />
+        <p className="hidden select-none sm:block">React Compiler Playground</p>
+      </div>
+      <div className="flex items-center text-[15px] gap-4">
+        <div className="flex items-center gap-2">
+          <label className="show-internals relative inline-block w-[34px] h-5">
+            <input
+              type="checkbox"
+              checked={store.showInternals}
+              onChange={() =>
+                startTransition(() => {
+                  addTransitionType(TOGGLE_INTERNALS_TRANSITION);
+                  dispatchStore({type: 'toggleInternals'});
+                })
+              }
+              className="absolute opacity-0 cursor-pointer h-full w-full m-0"
+            />
+            <span
+              className={clsx(
+                'absolute inset-0 rounded-full cursor-pointer transition-all duration-250',
+                "before:content-[''] before:absolute before:w-4 before:h-4 before:left-0.5 before:bottom-0.5",
+                'before:bg-white before:rounded-full before:transition-transform before:duration-250',
+                'focus-within:shadow-[0_0_1px_#2196F3]',
+                store.showInternals
+                  ? 'bg-link before:translate-x-3.5'
+                  : 'bg-gray-300',
+              )}></span>
+          </label>
+          <span className="text-secondary">Show Internals</span>
+        </div>
+        <button
+          title="Reset Playground"
+          aria-label="Reset Playground"
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+          onClick={handleReset}>
+          <RefreshIcon className="w-5 h-5" />
+          <p className="hidden sm:block">Reset</p>
+        </button>
+        <button
+          title="Copy sharable URL"
+          aria-label="Copy sharable URL"
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
+          onClick={handleShare}
+          disabled={showCheck}>
+          {!showCheck ? (
+            <ShareIcon className="w-5 h-5" />
+          ) : (
+            <CheckIcon className="w-5 h-5 fill-blue-50" />
+          )}
+          <p className="hidden sm:block">Share</p>
+        </button>
+        <Link
+          href="https://github.com/facebook/react"
+          target="_blank"
+          rel="noreferrer noopener"
+          aria-label="Open on GitHub"
+          className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link">
+          <IconGitHub />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/compiler/apps/playground/components/Icons/IconChevron.tsx b/compiler/apps/playground/components/Icons/IconChevron.tsx
new file mode 100644
index 00000000000..1e9dfb69188
--- /dev/null
+++ b/compiler/apps/playground/components/Icons/IconChevron.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {memo} from 'react';
+
+export const IconChevron = memo<
+  JSX.IntrinsicElements['svg'] & {
+    /**
+     * The direction the arrow should point.
+     */
+    displayDirection: 'right' | 'left';
+  }
+>(function IconChevron({className, displayDirection, ...props}) {
+  const rotationClass =
+    displayDirection === 'left' ? 'rotate-90' : '-rotate-90';
+  const classes = className ? `${rotationClass} ${className}` : rotationClass;
+
+  return (
+    <svg
+      className={classes}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+        <path
+          fill="currentColor"
+          fillRule="nonzero"
+          d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+          transform="translate(356.5 164.5)"
+        />
+        <polygon points="446 418 466 418 466 398 446 398" />
+      </g>
+    </svg>
+  );
+});
diff --git a/compiler/apps/playground/components/Icons/IconGitHub.tsx b/compiler/apps/playground/components/Icons/IconGitHub.tsx
new file mode 100644
index 00000000000..cf3e0584aa3
--- /dev/null
+++ b/compiler/apps/playground/components/Icons/IconGitHub.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {memo} from 'react';
+
+export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
+  function IconGitHub(props) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.5em"
+        height="1.5em"
+        viewBox="0 -2 24 24"
+        fill="currentColor"
+        {...props}>
+        <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
+      </svg>
+    );
+  },
+);
diff --git a/compiler/apps/playground/components/Logo.tsx b/compiler/apps/playground/components/Logo.tsx
new file mode 100644
index 00000000000..bac1573239b
--- /dev/null
+++ b/compiler/apps/playground/components/Logo.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// https://github.com/reactjs/reactjs.org/blob/main/beta/src/components/Logo.tsx
+
+export default function Logo(props: JSX.IntrinsicElements['svg']): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 410 369"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M204.995 224.552C226.56 224.552 244.042 207.07 244.042 185.506C244.042 163.941 226.56 146.459 204.995 146.459C183.43 146.459 165.948 163.941 165.948 185.506C165.948 207.07 183.43 224.552 204.995 224.552Z"
+        fill="currentColor"
+      />
+      <path
+        d="M409.99 184.505C409.99 153.707 381.437 126.667 335.996 108.925C343.342 60.6535 334.19 22.3878 307.492 6.98883C283.649 -6.77511 250.631 -0.0395641 214.512 25.9753C211.316 28.2692 208.143 30.7097 204.97 33.2477C201.822 30.7097 198.65 28.2692 195.477 25.9753C159.359 -0.0395641 126.34 -6.79951 102.497 6.98883C75.8237 22.3878 66.6721 60.6291 74.0422 108.852C28.5529 126.618 0 153.682 0 184.505C0 215.303 28.5528 242.342 73.9934 260.084C66.6477 308.356 75.7993 346.621 102.497 362.02C110.575 366.682 119.727 369 129.684 369C149.085 369 171.61 360.215 195.477 343.034C198.674 340.74 201.847 338.3 205.019 335.762C208.167 338.3 211.34 340.74 214.512 343.034C238.38 360.239 260.905 369 280.306 369C290.263 369 299.415 366.682 307.492 362.02C331.335 348.256 342 316.287 337.534 271.993C337.143 268.089 336.631 264.135 335.996 260.109C381.461 242.367 409.99 215.327 409.99 184.505ZM225.934 41.8136C246.238 27.1955 265.127 19.5814 280.306 19.5814C286.871 19.5814 292.728 20.9968 297.731 23.8765C315.204 33.9798 322.672 62.9475 317.327 102.433C299.756 97.0401 280.306 92.9158 259.392 90.2802C246.872 73.8074 233.597 58.9453 220.003 46.2551C221.98 44.7421 223.957 43.229 225.934 41.8136ZM112.259 23.8765C117.262 20.9968 123.119 19.5814 129.684 19.5814C144.863 19.5814 163.752 27.1711 184.056 41.8136C186.033 43.229 188.01 44.7176 189.986 46.2551C176.393 58.9453 163.142 73.783 150.622 90.2558C129.732 92.8914 110.258 97.0401 92.687 102.409C87.3424 62.9475 94.7857 33.9798 112.259 23.8765ZM19.5233 184.505C19.5233 164.322 40.9014 143.359 77.776 128.253C81.9003 146.141 88.0502 165.054 96.1768 184.456C88.0014 203.881 81.8515 222.819 77.7272 240.732C40.9014 225.626 19.5233 204.687 19.5233 184.505ZM184.056 327.196C154.966 348.134 128.805 354.675 112.259 345.133C94.7857 335.029 87.3181 306.062 92.6626 266.576C110.234 271.969 129.684 276.093 150.598 278.729C163.117 295.202 176.393 310.064 189.986 322.754C188.01 324.292 186.033 325.78 184.056 327.196ZM204.995 310.04C180.591 287.685 157.138 257.815 137.347 223.551C132.051 214.4 121.344 191.396 117 182.489C113.535 190.786 110.112 198.398 107.427 206.5C109.623 210.575 118.092 229.213 120.434 233.288C125.071 241.317 129.928 249.127 134.931 256.692C120.898 254.227 107.915 251.055 96.1035 247.321C102.815 217.011 116.213 182.064 137.347 145.458C142.545 136.453 153.838 116.346 159.5 108C150.568 109.147 143.395 108.767 135 110.5C132.56 114.453 122.777 131.645 120.434 135.721C115.749 143.823 111.454 151.925 107.427 159.978C102.546 146.581 98.8124 133.744 96.1524 121.64C125.755 112.293 162.727 106.411 204.995 106.411C215.562 106.411 237.63 106.197 247.49 106.905C242.048 99.7544 237.38 93.2819 231.694 86.888C227.082 86.7416 209.705 86.888 204.995 86.888C195.672 86.888 186.545 87.2053 177.589 87.7422C186.472 77.1752 195.672 67.5111 204.995 58.9697C229.375 81.3239 252.851 111.195 272.643 145.458C277.841 154.463 289.073 175.426 293.49 184.505C296.98 176.207 300.281 168.64 302.99 160.489C300.793 156.389 291.898 139.747 289.555 135.696C284.918 127.667 280.062 119.858 275.059 112.317C289.092 114.782 302.075 117.954 313.886 121.688C307.175 151.998 293.777 186.945 272.643 223.551C267.445 232.556 252.651 253.178 246.99 261.524C255.922 260.377 265.595 258.663 273.99 256.93C276.43 252.976 287.212 237.364 289.555 233.288C294.216 225.235 298.512 217.182 302.489 209.153C307.224 222.185 310.982 234.997 313.715 247.394C284.138 256.741 247.214 262.598 204.995 262.598C194.428 262.598 169.859 261.208 160 260.5C165.442 267.65 171.304 275.095 176.99 281.489C181.602 281.635 200.285 282.121 204.995 282.121C214.317 282.121 223.444 281.804 232.401 281.267C223.493 291.834 214.317 301.498 204.995 310.04ZM297.731 345.133C281.185 354.699 254.999 348.159 225.934 327.196C223.957 325.78 221.98 324.292 220.003 322.754C233.597 310.064 246.848 295.226 259.367 278.753C280.233 276.118 299.659 271.993 317.205 266.625C317.547 269.089 317.888 271.554 318.132 273.97C321.72 309.649 314.277 335.566 297.731 345.133ZM332.262 240.756C328.065 222.599 321.842 203.686 313.813 184.578C321.988 165.152 328.138 146.215 332.262 128.302C369.088 143.408 390.466 164.322 390.466 184.505C390.466 204.687 369.113 225.626 332.262 240.756Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/compiler/apps/playground/components/Message.tsx b/compiler/apps/playground/components/Message.tsx
new file mode 100644
index 00000000000..79041b3228e
--- /dev/null
+++ b/compiler/apps/playground/components/Message.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BanIcon,
+  ExclamationIcon,
+  InformationCircleIcon,
+  XIcon,
+} from '@heroicons/react/solid';
+import {CustomContentProps, SnackbarContent, useSnackbar} from 'notistack';
+import {forwardRef} from 'react';
+import {MessageLevel, MessageSource} from '../lib/stores';
+
+// https://notistack.com/examples/advanced/custom-component#custom-variant-(typescript)
+declare module 'notistack' {
+  interface VariantOverrides {
+    message: {
+      title: string;
+      level: MessageLevel;
+      codeframe: string | undefined;
+    };
+  }
+}
+
+interface MessageProps extends CustomContentProps {
+  title: string;
+  level: MessageLevel;
+  source: MessageSource;
+  codeframe: string | undefined;
+}
+
+const Message = forwardRef<HTMLDivElement, MessageProps>(
+  ({id, title, level, source, codeframe}, ref) => {
+    const {closeSnackbar} = useSnackbar();
+    const isDismissible = source !== MessageSource.Playground;
+
+    return (
+      <SnackbarContent
+        ref={ref}
+        className="flex items-start justify-between gap-3 px-4 py-3 text-sm bg-white border rounded-md shadow w-toast">
+        <div className="flex gap-3 w-toast-body">
+          {level === MessageLevel.Warning ? (
+            <div className="flex items-center justify-center flex-none rounded-md w-7 h-7 bg-amber-100">
+              <ExclamationIcon className="w-5 h-5 text-amber-600" />
+            </div>
+          ) : level === MessageLevel.Error ? (
+            <div className="flex items-center justify-center flex-none bg-red-100 rounded-md w-7 h-7">
+              <BanIcon className="w-5 h-5 text-red-600" />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center flex-none rounded-md bg-sky-100 w-7 h-7">
+              <InformationCircleIcon className="w-5 h-5 text-sky-600" />
+            </div>
+          )}
+          <div className="flex flex-col justify-center gap-1 w-toast-title">
+            <p className="w-full">{title}</p>
+            {codeframe ? (
+              <pre className="overflow-x-auto break-words whitespace-pre-wrap">
+                <code className="text-xs">{codeframe}</code>
+              </pre>
+            ) : null}
+          </div>
+        </div>
+        {isDismissible ? (
+          <button
+            className="flex items-center justify-center flex-none transition-colors duration-150 ease-in rounded-md justify-self-end group w-7 h-7 hover:bg-gray-200"
+            onClick={() => closeSnackbar(id)}>
+            <XIcon className="w-5 h-5 fill-gray-500 group-hover:fill-gray-800" />
+          </button>
+        ) : null}
+      </SnackbarContent>
+    );
+  },
+);
+
+Message.displayName = 'MessageComponent';
+
+export default Message;
diff --git a/compiler/apps/playground/components/StoreContext.tsx b/compiler/apps/playground/components/StoreContext.tsx
new file mode 100644
index 00000000000..3f55678edf1
--- /dev/null
+++ b/compiler/apps/playground/components/StoreContext.tsx
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {Dispatch, ReactNode} from 'react';
+import {useState, useEffect, useReducer} from 'react';
+import createContext from '../lib/createContext';
+import {emptyStore, defaultStore} from '../lib/defaultStore';
+import {
+  saveStore,
+  initStoreFromUrlOrLocalStorage,
+  type Store,
+} from '../lib/stores';
+
+const StoreContext = createContext<Store>();
+
+/**
+ * Hook to access the store.
+ */
+export const useStore = StoreContext.useContext;
+
+const StoreDispatchContext = createContext<Dispatch<ReducerAction>>();
+
+/**
+ * Hook to access the store dispatch function.
+ */
+export const useStoreDispatch = StoreDispatchContext.useContext;
+
+/**
+ * Make Store and dispatch function available to all sub-components in children.
+ */
+export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
+  const [store, dispatch] = useReducer(storeReducer, emptyStore);
+  const [isPageReady, setIsPageReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    let mountStore: Store;
+    try {
+      mountStore = initStoreFromUrlOrLocalStorage();
+    } catch (e) {
+      console.error('Failed to initialize store from URL or local storage', e);
+      mountStore = defaultStore;
+    }
+    dispatch({type: 'setStore', payload: {store: mountStore}});
+    setIsPageReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (store !== emptyStore) {
+      saveStore(store);
+    }
+  }, [store]);
+
+  return (
+    <StoreContext.Provider value={store}>
+      <StoreDispatchContext.Provider value={dispatch}>
+        {isPageReady ? children : null}
+      </StoreDispatchContext.Provider>
+    </StoreContext.Provider>
+  );
+}
+
+type ReducerAction =
+  | {
+      type: 'setStore';
+      payload: {
+        store: Store;
+      };
+    }
+  | {
+      type: 'updateSource';
+      payload: {
+        source: string;
+      };
+    }
+  | {
+      type: 'updateConfig';
+      payload: {
+        config: string;
+      };
+    }
+  | {
+      type: 'toggleInternals';
+    };
+
+function storeReducer(store: Store, action: ReducerAction): Store {
+  switch (action.type) {
+    case 'setStore': {
+      const newStore = action.payload.store;
+      return newStore;
+    }
+    case 'updateSource': {
+      const source = action.payload.source;
+      const newStore = {
+        ...store,
+        source,
+      };
+      return newStore;
+    }
+    case 'updateConfig': {
+      const config = action.payload.config;
+      const newStore = {
+        ...store,
+        config,
+      };
+      return newStore;
+    }
+    case 'toggleInternals': {
+      const newStore = {
+        ...store,
+        showInternals: !store.showInternals,
+      };
+      return newStore;
+    }
+  }
+}
diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx
new file mode 100644
index 00000000000..30b7caa127f
--- /dev/null
+++ b/compiler/apps/playground/components/TabbedWindow.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, {
+  startTransition,
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
+import clsx from 'clsx';
+import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
+
+export default function TabbedWindow({
+  tabs,
+  activeTab,
+  onTabChange,
+}: {
+  tabs: Map<string, React.ReactNode>;
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}): React.ReactElement {
+  const id = useId();
+  const transitionName = `tab-highlight-${id}`;
+
+  const handleTabChange = (tab: string): void => {
+    startTransition(() => {
+      addTransitionType(TOGGLE_TAB_TRANSITION);
+      onTabChange(tab);
+    });
+  };
+
+  return (
+    <div className="flex-1 min-w-[550px] sm:min-w-0">
+      <div className="flex flex-col h-full max-w-full">
+        <div className="flex p-2 flex-shrink-0">
+          {Array.from(tabs.keys()).map(tab => {
+            const isActive = activeTab === tab;
+            return (
+              <button
+                key={tab}
+                onClick={() => handleTabChange(tab)}
+                className={clsx(
+                  'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
+                  isActive ? 'text-link' : 'hover:bg-primary/5',
+                )}>
+                {isActive && (
+                  <ViewTransition
+                    name={transitionName}
+                    enter={{default: 'none'}}
+                    exit={{default: 'none'}}
+                    share={{
+                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
+                      default: 'none',
+                    }}
+                    update={{default: 'none'}}>
+                    <div className="absolute inset-0 bg-highlight rounded-full" />
+                  </ViewTransition>
+                )}
+                <ViewTransition
+                  enter={{default: 'none'}}
+                  exit={{default: 'none'}}
+                  update={{
+                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
+                    default: 'none',
+                  }}>
+                  <span className="relative z-1">{tab}</span>
+                </ViewTransition>
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex-1 overflow-hidden w-full h-full">
+          {tabs.get(activeTab)}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/compiler/apps/playground/components/index.ts b/compiler/apps/playground/components/index.ts
new file mode 100644
index 00000000000..7fbef4c139d
--- /dev/null
+++ b/compiler/apps/playground/components/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as Editor} from './Editor';
+export {default as Header} from './Header';
+export {StoreProvider} from './StoreContext';
diff --git a/compiler/apps/playground/hooks/index.ts b/compiler/apps/playground/hooks/index.ts
new file mode 100644
index 00000000000..99ef8f9936b
--- /dev/null
+++ b/compiler/apps/playground/hooks/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as useMountEffect} from './useMountEffect';
diff --git a/compiler/apps/playground/hooks/useMountEffect.ts b/compiler/apps/playground/hooks/useMountEffect.ts
new file mode 100644
index 00000000000..86621fe8561
--- /dev/null
+++ b/compiler/apps/playground/hooks/useMountEffect.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {EffectCallback} from 'react';
+import {useEffect} from 'react';
+
+export default function useMountEffect(effect: EffectCallback) {
+  return useEffect(effect, []);
+}
diff --git a/compiler/apps/playground/lib/compilation.ts b/compiler/apps/playground/lib/compilation.ts
new file mode 100644
index 00000000000..f668c05dde2
--- /dev/null
+++ b/compiler/apps/playground/lib/compilation.ts
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {parse as babelParse, ParseResult} from '@babel/parser';
+import * as HermesParser from 'hermes-parser';
+import * as t from '@babel/types';
+import BabelPluginReactCompiler, {
+  CompilerError,
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+  Effect,
+  ErrorCategory,
+  parseConfigPragmaForTests,
+  ValueKind,
+  type Hook,
+  PluginOptions,
+  CompilerPipelineValue,
+  parsePluginOptions,
+  printReactiveFunctionWithOutlined,
+  printFunctionWithOutlined,
+  type LoggerEvent,
+} from 'babel-plugin-react-compiler';
+import {transformFromAstSync} from '@babel/core';
+import type {
+  CompilerOutput,
+  CompilerTransformOutput,
+  PrintedCompilerPipelineValue,
+} from '../components/Editor/Output';
+
+function parseInput(
+  input: string,
+  language: 'flow' | 'typescript',
+): ParseResult<t.File> {
+  // Extract the first line to quickly check for custom test directives
+  if (language === 'flow') {
+    return HermesParser.parse(input, {
+      babel: true,
+      flow: 'all',
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    });
+  } else {
+    return babelParse(input, {
+      plugins: ['typescript', 'jsx'],
+      sourceType: 'module',
+    }) as ParseResult<t.File>;
+  }
+}
+
+function invokeCompiler(
+  source: string,
+  language: 'flow' | 'typescript',
+  options: PluginOptions,
+): CompilerTransformOutput {
+  const ast = parseInput(source, language);
+  let result = transformFromAstSync(ast, source, {
+    filename: '_playgroundFile.js',
+    highlightCode: false,
+    retainLines: true,
+    plugins: [[BabelPluginReactCompiler, options]],
+    ast: true,
+    sourceType: 'module',
+    configFile: false,
+    sourceMaps: true,
+    babelrc: false,
+  });
+  if (result?.ast == null || result?.code == null || result?.map == null) {
+    throw new Error('Expected successful compilation');
+  }
+  return {
+    code: result.code,
+    sourceMaps: result.map,
+    language,
+  };
+}
+
+const COMMON_HOOKS: Array<[string, Hook]> = [
+  [
+    'useFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'usePaginationFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'useRefetchableFragment',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'useLazyLoadQuery',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+  [
+    'usePreloadedQuery',
+    {
+      valueKind: ValueKind.Frozen,
+      effectKind: Effect.Freeze,
+      noAlias: true,
+      transitiveMixedData: true,
+    },
+  ],
+];
+
+function parseOptions(
+  source: string,
+  mode: 'compiler' | 'linter',
+  configOverrides: string,
+): PluginOptions {
+  // Extract the first line to quickly check for custom test directives
+  const pragma = source.substring(0, source.indexOf('\n'));
+
+  const parsedPragmaOptions = parseConfigPragmaForTests(pragma, {
+    compilationMode: 'infer',
+    environment:
+      mode === 'linter'
+        ? {
+            // enabled in compiler
+            validateRefAccessDuringRender: false,
+            // enabled in linter
+            validateNoSetStateInRender: true,
+            validateNoSetStateInEffects: true,
+            validateNoJSXInTryStatements: true,
+            validateNoImpureFunctionsInRender: true,
+            validateStaticComponents: true,
+            validateNoFreezingKnownMutableFunctions: true,
+            validateNoVoidUseMemo: true,
+          }
+        : {
+            /* use defaults for compiler mode */
+          },
+  });
+
+  // Parse config overrides from config editor
+  let configOverrideOptions: any = {};
+  const configMatch = configOverrides.match(/^\s*import.*?\n\n\((.*)\)/s);
+  if (configOverrides.trim()) {
+    if (configMatch && configMatch[1]) {
+      const configString = configMatch[1].replace(/satisfies.*$/, '').trim();
+      configOverrideOptions = new Function(`return (${configString})`)();
+    } else {
+      throw new Error('Invalid override format');
+    }
+  }
+
+  const opts: PluginOptions = parsePluginOptions({
+    ...parsedPragmaOptions,
+    ...configOverrideOptions,
+    environment: {
+      ...parsedPragmaOptions.environment,
+      ...configOverrideOptions.environment,
+      customHooks: new Map([...COMMON_HOOKS]),
+    },
+  });
+
+  return opts;
+}
+
+export function compile(
+  source: string,
+  mode: 'compiler' | 'linter',
+  configOverrides: string,
+): [CompilerOutput, 'flow' | 'typescript', PluginOptions | null] {
+  const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
+  const error = new CompilerError();
+  const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
+  const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
+    const entry = results.get(result.name);
+    if (Array.isArray(entry)) {
+      entry.push(result);
+    } else {
+      results.set(result.name, [result]);
+    }
+  };
+  let language: 'flow' | 'typescript';
+  if (source.match(/\@flow/)) {
+    language = 'flow';
+  } else {
+    language = 'typescript';
+  }
+  let transformOutput;
+
+  let baseOpts: PluginOptions | null = null;
+  try {
+    baseOpts = parseOptions(source, mode, configOverrides);
+  } catch (err) {
+    error.details.push(
+      new CompilerErrorDetail({
+        category: ErrorCategory.Config,
+        reason: `Unexpected failure when transforming configs! \n${err}`,
+        loc: null,
+        suggestions: null,
+      }),
+    );
+  }
+  if (baseOpts) {
+    try {
+      const logIR = (result: CompilerPipelineValue): void => {
+        switch (result.kind) {
+          case 'ast': {
+            break;
+          }
+          case 'hir': {
+            upsert({
+              kind: 'hir',
+              fnName: result.value.id,
+              name: result.name,
+              value: printFunctionWithOutlined(result.value),
+            });
+            break;
+          }
+          case 'reactive': {
+            upsert({
+              kind: 'reactive',
+              fnName: result.value.id,
+              name: result.name,
+              value: printReactiveFunctionWithOutlined(result.value),
+            });
+            break;
+          }
+          case 'debug': {
+            upsert({
+              kind: 'debug',
+              fnName: null,
+              name: result.name,
+              value: result.value,
+            });
+            break;
+          }
+          default: {
+            const _: never = result;
+            throw new Error(`Unhandled result ${result}`);
+          }
+        }
+      };
+      // Add logger options to the parsed options
+      const opts = {
+        ...baseOpts,
+        logger: {
+          debugLogIRs: logIR,
+          logEvent: (_filename: string | null, event: LoggerEvent): void => {
+            if (event.kind === 'CompileError') {
+              otherErrors.push(event.detail);
+            }
+          },
+        },
+      };
+      transformOutput = invokeCompiler(source, language, opts);
+    } catch (err) {
+      /**
+       * error might be an invariant violation or other runtime error
+       * (i.e. object shape that is not CompilerError)
+       */
+      if (err instanceof CompilerError && err.details.length > 0) {
+        error.merge(err);
+      } else {
+        /**
+         * Handle unexpected failures by logging (to get a stack trace)
+         * and reporting
+         */
+        error.details.push(
+          new CompilerErrorDetail({
+            category: ErrorCategory.Invariant,
+            reason: `Unexpected failure when transforming input! \n${err}`,
+            loc: null,
+            suggestions: null,
+          }),
+        );
+      }
+    }
+  }
+  // Only include logger errors if there weren't other errors
+  if (!error.hasErrors() && otherErrors.length !== 0) {
+    otherErrors.forEach(e => error.details.push(e));
+  }
+  if (error.hasErrors() || !transformOutput) {
+    return [{kind: 'err', results, error}, language, baseOpts];
+  }
+  return [
+    {kind: 'ok', results, transformOutput, errors: error.details},
+    language,
+    baseOpts,
+  ];
+}
diff --git a/compiler/apps/playground/lib/createContext.ts b/compiler/apps/playground/lib/createContext.ts
new file mode 100644
index 00000000000..e1a455fe4b1
--- /dev/null
+++ b/compiler/apps/playground/lib/createContext.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 from 'react';
+
+/**
+ * Replacement to React.createContext.
+ *
+ * Does not take any default value and avoids non-null assertions when using
+ * the value of the context, like the following scenario.
+ *
+ * ```ts
+ * const StoreDispatchContext = useContext<Dispatch<ReducerAction>>(null);
+ * const dispatchStore = useContext(StoreDispatchContext);
+ * ...
+ * dipatchStore!({ ... });
+ * ```
+ *
+ * Instead, it throws an error when `useContext` is not called within a
+ * Provider with a value.
+ */
+export default function createContext<T>(): {
+  useContext: () => NonNullable<T>;
+  Provider: React.Provider<T | null>;
+} {
+  const context = React.createContext<T | null>(null);
+
+  function useContext(): NonNullable<T> {
+    const c = React.useContext(context);
+    if (!c)
+      throw new Error('useContext must be within a Provider with a value');
+    return c;
+  }
+
+  return {useContext, Provider: context.Provider};
+}
diff --git a/compiler/apps/playground/lib/defaultStore.ts b/compiler/apps/playground/lib/defaultStore.ts
new file mode 100644
index 00000000000..2baada0b817
--- /dev/null
+++ b/compiler/apps/playground/lib/defaultStore.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {Store} from './stores';
+
+const index = `\
+export default function MyApp() {
+  return <div>Hello World</div>;
+}
+`;
+
+export const defaultConfig = `\
+import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
+
+({
+  //compilationMode: "all"
+} satisfies PluginOptions);`;
+
+export const defaultStore: Store = {
+  source: index,
+  config: defaultConfig,
+  showInternals: false,
+};
+
+export const emptyStore: Store = {
+  source: '',
+  config: '',
+  showInternals: false,
+};
diff --git a/compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts b/compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts
new file mode 100644
index 00000000000..cece2fa7c6d
--- /dev/null
+++ b/compiler/apps/playground/lib/reactCompilerMonacoDiagnostics.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Monaco} from '@monaco-editor/react';
+import {
+  CompilerDiagnostic,
+  CompilerErrorDetail,
+  ErrorSeverity,
+} from 'babel-plugin-react-compiler';
+import {MarkerSeverity, type editor} from 'monaco-editor';
+
+function mapReactCompilerSeverityToMonaco(
+  level: ErrorSeverity,
+  monaco: Monaco,
+): MarkerSeverity {
+  switch (level) {
+    case ErrorSeverity.Todo:
+      return monaco.MarkerSeverity.Warning;
+    default:
+      return monaco.MarkerSeverity.Error;
+  }
+}
+
+function mapReactCompilerDiagnosticToMonacoMarker(
+  detail: CompilerErrorDetail | CompilerDiagnostic,
+  monaco: Monaco,
+  source: string,
+): editor.IMarkerData | null {
+  const loc = detail.primaryLocation();
+  if (loc == null || typeof loc === 'symbol') {
+    return null;
+  }
+  const severity = mapReactCompilerSeverityToMonaco(detail.severity, monaco);
+  let message = detail.printErrorMessage(source, {eslint: true});
+  return {
+    severity,
+    message,
+    startLineNumber: loc.start.line,
+    startColumn: loc.start.column + 1,
+    endLineNumber: loc.end.line,
+    endColumn: loc.end.column + 1,
+  };
+}
+
+type ReactCompilerMarkerConfig = {
+  monaco: Monaco;
+  model: editor.ITextModel;
+  details: Array<CompilerErrorDetail | CompilerDiagnostic>;
+  source: string;
+};
+let decorations: Array<string> = [];
+export function renderReactCompilerMarkers({
+  monaco,
+  model,
+  details,
+  source,
+}: ReactCompilerMarkerConfig): void {
+  const markers: Array<editor.IMarkerData> = [];
+  for (const detail of details) {
+    const marker = mapReactCompilerDiagnosticToMonacoMarker(
+      detail,
+      monaco,
+      source,
+    );
+    if (marker == null) {
+      continue;
+    }
+    markers.push(marker);
+  }
+  if (markers.length > 0) {
+    monaco.editor.setModelMarkers(model, 'owner', markers);
+    const newDecorations = markers.map(marker => {
+      return {
+        range: new monaco.Range(
+          marker.startLineNumber,
+          marker.startColumn,
+          marker.endLineNumber,
+          marker.endColumn,
+        ),
+        options: {
+          isWholeLine: true,
+          glyphMarginClassName: 'bg-red-300',
+        },
+      };
+    });
+    decorations = model.deltaDecorations(decorations, newDecorations);
+  } else {
+    monaco.editor.setModelMarkers(model, 'owner', []);
+    decorations = model.deltaDecorations(
+      model.getAllDecorations().map(d => d.id),
+      [],
+    );
+  }
+}
diff --git a/compiler/apps/playground/lib/stores/index.ts b/compiler/apps/playground/lib/stores/index.ts
new file mode 100644
index 00000000000..efa299501a2
--- /dev/null
+++ b/compiler/apps/playground/lib/stores/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './messages';
+export * from './store';
diff --git a/compiler/apps/playground/lib/stores/messages.ts b/compiler/apps/playground/lib/stores/messages.ts
new file mode 100644
index 00000000000..9e2b73cc831
--- /dev/null
+++ b/compiler/apps/playground/lib/stores/messages.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export enum MessageSource {
+  Babel,
+  Forget,
+  Playground,
+}
+
+export enum MessageLevel {
+  Info,
+  Warning,
+  Error,
+}
+
+export interface Message {
+  title: string;
+  level: MessageLevel;
+  source: MessageSource; // Can be used to further style messages differently.
+  codeframe: string | undefined;
+}
+
+export function createMessage(
+  message: string,
+  level: MessageLevel,
+  source: MessageSource,
+): Message {
+  const [title, ...body] = message.split('\n');
+  const codeframe = body.length > 0 ? body.join('\n') : undefined;
+
+  return {
+    source,
+    level,
+    title,
+    codeframe,
+  };
+}
diff --git a/compiler/apps/playground/lib/stores/store.ts b/compiler/apps/playground/lib/stores/store.ts
new file mode 100644
index 00000000000..6655efa2740
--- /dev/null
+++ b/compiler/apps/playground/lib/stores/store.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import invariant from 'invariant';
+import {
+  compressToEncodedURIComponent,
+  decompressFromEncodedURIComponent,
+} from 'lz-string';
+import {defaultStore, defaultConfig} from '../defaultStore';
+
+/**
+ * Global Store for Playground
+ */
+export interface Store {
+  source: string;
+  config: string;
+  showInternals: boolean;
+}
+export function encodeStore(store: Store): string {
+  return compressToEncodedURIComponent(JSON.stringify(store));
+}
+export function decodeStore(hash: string): any {
+  return JSON.parse(decompressFromEncodedURIComponent(hash));
+}
+
+/**
+ * Serialize, encode, and save @param store to localStorage and update URL.
+ */
+export function saveStore(store: Store): void {
+  const hash = encodeStore(store);
+  localStorage.setItem('playgroundStore', hash);
+  history.replaceState({}, '', `#${hash}`);
+}
+
+/**
+ * Check if @param raw is a valid Store by if
+ * - it has a `source` property and is a string
+ */
+function isValidStore(raw: unknown): raw is Store {
+  return (
+    raw != null &&
+    typeof raw == 'object' &&
+    'source' in raw &&
+    typeof raw['source'] === 'string'
+  );
+}
+
+/**
+ * Deserialize, decode, and initialize @param store from URL and then
+ * localStorage. Throw an error if Store is malformed.
+ */
+export function initStoreFromUrlOrLocalStorage(): Store {
+  const encodedSourceFromUrl = location.hash.slice(1);
+  const encodedSourceFromLocal = localStorage.getItem('playgroundStore');
+  const encodedSource = encodedSourceFromUrl || encodedSourceFromLocal;
+
+  /**
+   * No data in the URL and no data in the localStorage to fallback to.
+   * Initialize with the default store.
+   */
+  if (!encodedSource) return defaultStore;
+
+  const raw: any = decodeStore(encodedSource);
+
+  invariant(isValidStore(raw), 'Invalid Store');
+
+  // Make sure all properties are populated
+  return {
+    source: raw.source,
+    config: 'config' in raw && raw['config'] ? raw.config : defaultConfig,
+    showInternals: 'showInternals' in raw ? raw.showInternals : false,
+  };
+}
diff --git a/compiler/apps/playground/lib/transitionTypes.ts b/compiler/apps/playground/lib/transitionTypes.ts
new file mode 100644
index 00000000000..0cd9596508c
--- /dev/null
+++ b/compiler/apps/playground/lib/transitionTypes.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const CONFIG_PANEL_TRANSITION = 'config-panel';
+export const TOGGLE_TAB_TRANSITION = 'toggle-tab';
+export const TOGGLE_INTERNALS_TRANSITION = 'toggle-internals';
+export const EXPAND_ACCORDION_TRANSITION = 'open-accordion';
diff --git a/compiler/apps/playground/lib/types.d.ts b/compiler/apps/playground/lib/types.d.ts
new file mode 100644
index 00000000000..40771d183c0
--- /dev/null
+++ b/compiler/apps/playground/lib/types.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// v0.17.1
+declare module "hermes-parser" {
+  type HermesParserOptions = {
+    allowReturnOutsideFunction?: boolean;
+    babel?: boolean;
+    flow?: "all" | "detect";
+    enableExperimentalComponentSyntax?: boolean;
+    sourceFilename?: string;
+    sourceType?: "module" | "script" | "unambiguous";
+    tokens?: boolean;
+  };
+  export function parse(code: string, options: Partial<HermesParserOptions>);
+}
diff --git a/compiler/apps/playground/next.config.js b/compiler/apps/playground/next.config.js
new file mode 100644
index 00000000000..f34f958ec6d
--- /dev/null
+++ b/compiler/apps/playground/next.config.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const path = require('path');
+
+const nextConfig = {
+  experimental: {
+    reactCompiler: true,
+    viewTransition: true,
+  },
+  reactStrictMode: true,
+  webpack: (config, options) => {
+    // Load *.d.ts files as strings using https://webpack.js.org/guides/asset-modules/#source-assets.
+    config.module.rules.push({
+      test: /\.d\.ts/,
+      type: 'asset/source',
+    });
+
+    // Monaco Editor
+    if (!options.isServer) {
+      config.plugins.push(
+        new MonacoWebpackPlugin({
+          languages: ['typescript', 'javascript'],
+          filename: 'static/[name].worker.js',
+        })
+      );
+    }
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'react-compiler-runtime': path.resolve(
+        __dirname,
+        '../../packages/react-compiler-runtime'
+      ),
+    };
+    config.resolve.fallback = {
+      fs: false,
+      path: false,
+      os: false,
+    };
+
+    return config;
+  },
+
+  transpilePackages: ['monaco-editor'],
+};
+
+module.exports = nextConfig;
diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json
new file mode 100644
index 00000000000..217153e6a21
--- /dev/null
+++ b/compiler/apps/playground/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "playground",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "cd ../.. && concurrently --kill-others -n compiler,runtime,playground \"yarn workspace babel-plugin-react-compiler run watch\" \"yarn workspace react-compiler-runtime run watch\" \"wait-on packages/babel-plugin-react-compiler/dist/index.js && cd apps/playground && NODE_ENV=development next dev\"",
+    "build:compiler": "cd ../.. && concurrently -n compiler,runtime \"yarn workspace babel-plugin-react-compiler run build --dts\" \"yarn workspace react-compiler-runtime run build\"",
+    "build": "yarn build:compiler && next build",
+    "postbuild": "node ./scripts/downloadFonts.js",
+    "preinstall": "cd ../.. && yarn install --frozen-lockfile",
+    "postinstall": "./scripts/link-compiler.sh",
+    "vercel-build": "yarn build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "playwright test --workers=4"
+  },
+  "dependencies": {
+    "@babel/core": "^7.18.9",
+    "@babel/generator": "^7.18.9",
+    "@babel/parser": "^7.18.9",
+    "@babel/plugin-syntax-typescript": "^7.18.9",
+    "@babel/plugin-transform-block-scoping": "^7.18.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.9",
+    "@babel/preset-react": "^7.18.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/traverse": "^7.18.9",
+    "@babel/types": "7.26.3",
+    "@heroicons/react": "^1.0.6",
+    "@monaco-editor/react": "^4.8.0-rc.2",
+    "@playwright/test": "^1.56.1",
+    "@use-gesture/react": "^10.2.22",
+    "hermes-eslint": "^0.25.0",
+    "hermes-parser": "^0.25.0",
+    "invariant": "^2.2.4",
+    "lru-cache": "^11.2.2",
+    "lz-string": "^1.5.0",
+    "monaco-editor": "^0.52.0",
+    "next": "15.5.9",
+    "notistack": "^3.0.0-alpha.7",
+    "prettier": "^3.3.3",
+    "pretty-format": "^29.3.1",
+    "re-resizable": "^6.9.16",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "18.11.9",
+    "@types/react": "19.2",
+    "@types/react-dom": "19.2",
+    "autoprefixer": "^10.4.13",
+    "clsx": "^1.2.1",
+    "concurrently": "^7.4.0",
+    "eslint": "^8.28.0",
+    "eslint-config-next": "15.5.2",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.2.4",
+    "wait-on": "^7.2.0"
+  },
+  "resolutions": {
+    "@types/react": "19.2",
+    "@types/react-dom": "19.2"
+  }
+}
diff --git a/compiler/apps/playground/playwright.config.js b/compiler/apps/playground/playwright.config.js
new file mode 100644
index 00000000000..10de19457ff
--- /dev/null
+++ b/compiler/apps/playground/playwright.config.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig, devices} from '@playwright/test';
+import path from 'path';
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000;
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`;
+
+// Reference: https://playwright.dev/docs/test-configuration
+export default defineConfig({
+  // Timeout per test
+  timeout: 30 * 1000,
+  // Run all tests in parallel.
+  fullyParallel: true,
+  // Test directory
+  testDir: path.join(__dirname, '__tests__/e2e'),
+  // If a test fails, retry it additional 2 times
+  retries: 3,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: 'test-results/',
+  // Note: we only use text snapshots, so its safe to omit the host environment name
+  snapshotPathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}',
+
+  // Run your local dev server before starting the tests:
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  webServer: {
+    command: 'yarn dev',
+    url: baseURL,
+    timeout: 300 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  reporter: process.env.CI ? 'github' : 'list',
+
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
+    // Retry a test if its failing with enabled tracing. This allows you to analyze the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: 'retry-with-trace',
+
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    // contextOptions: {
+    //   ignoreHTTPSErrors: true,
+    // },
+    viewport: {width: 1920, height: 1080},
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: {width: 1920, height: 1080},
+      },
+    },
+    // {
+    //   name: 'Desktop Firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+    // {
+    //   name: 'Desktop Safari',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+    // Test against mobile viewports.
+    // {
+    //   name: "Mobile Chrome",
+    //   use: {
+    //     ...devices["Pixel 5"],
+    //   },
+    // },
+    // {
+    //   name: "Mobile Safari",
+    //   use: devices["iPhone 12"],
+    // },
+  ],
+});
diff --git a/compiler/apps/playground/postcss.config.js b/compiler/apps/playground/postcss.config.js
new file mode 100644
index 00000000000..291cea3cd5e
--- /dev/null
+++ b/compiler/apps/playground/postcss.config.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/compiler/apps/playground/public/favicon.ico b/compiler/apps/playground/public/favicon.ico
new file mode 100644
index 00000000000..9bcfdcd7b22
Binary files /dev/null and b/compiler/apps/playground/public/favicon.ico differ
diff --git a/compiler/apps/playground/public/fonts/Source-Code-Pro-Regular.woff2 b/compiler/apps/playground/public/fonts/Source-Code-Pro-Regular.woff2
new file mode 100644
index 00000000000..655cd9e8145
Binary files /dev/null and b/compiler/apps/playground/public/fonts/Source-Code-Pro-Regular.woff2 differ
diff --git a/compiler/apps/playground/public/graphvizlib.wasm b/compiler/apps/playground/public/graphvizlib.wasm
new file mode 100644
index 00000000000..c6fbf7ab228
Binary files /dev/null and b/compiler/apps/playground/public/graphvizlib.wasm differ
diff --git a/compiler/apps/playground/public/icon-180x180.png b/compiler/apps/playground/public/icon-180x180.png
new file mode 100644
index 00000000000..621d01ef011
Binary files /dev/null and b/compiler/apps/playground/public/icon-180x180.png differ
diff --git a/compiler/apps/playground/public/site.webmanifest b/compiler/apps/playground/public/site.webmanifest
new file mode 100644
index 00000000000..c52a6bb24c4
--- /dev/null
+++ b/compiler/apps/playground/public/site.webmanifest
@@ -0,0 +1,16 @@
+{
+  "name": "React Compiler Playground",
+  "short_name": "React REPL",
+  "display": "standalone",
+  "start_url": "/",
+  "theme_color": "#fff",
+  "background_color": "#000000",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "/icon-180x180.png",
+      "type": "image/png",
+      "sizes": "180x180"
+    }
+  ]
+}
diff --git a/compiler/apps/playground/public/vercel.svg b/compiler/apps/playground/public/vercel.svg
new file mode 100644
index 00000000000..fbf0e25a651
--- /dev/null
+++ b/compiler/apps/playground/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file
diff --git a/compiler/apps/playground/scripts/downloadFonts.js b/compiler/apps/playground/scripts/downloadFonts.js
new file mode 100644
index 00000000000..1e72bcf948e
--- /dev/null
+++ b/compiler/apps/playground/scripts/downloadFonts.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {execSync} = require('child_process');
+
+// So that we don't need to check them into the repo.
+// See https://github.com/reactjs/reactjs.org/blob/main/beta/scripts/downloadFonts.js.
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2'
+);
diff --git a/compiler/apps/playground/scripts/link-compiler.sh b/compiler/apps/playground/scripts/link-compiler.sh
new file mode 100755
index 00000000000..96188f7b451
--- /dev/null
+++ b/compiler/apps/playground/scripts/link-compiler.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+HERE=$(pwd)
+
+cd ../../packages/react-compiler-runtime && yarn --silent link && cd "$HERE"
+cd ../../packages/babel-plugin-react-compiler && yarn --silent link && cd "$HERE"
+
+yarn --silent link babel-plugin-react-compiler
+yarn --silent link react-compiler-runtime
diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css
new file mode 100644
index 00000000000..ead5d83a65d
--- /dev/null
+++ b/compiler/apps/playground/styles/globals.css
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("/fonts/Source-Code-Pro-Regular.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Optimistic Display";
+    src: url("/fonts/Optimistic_Display_W_Lt.woff2") format("woff2");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Optimistic Display";
+    src: url("/fonts/Optimistic_Display_W_Md.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Optimistic Display";
+    src: url("/fonts/Optimistic_Display_W_Bd.woff2") format("woff2");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@layer utilities {
+  /* Chrome, Safari, Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE, Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+::view-transition-old(.slide-in) {
+  animation-name: slideOutLeft;
+}
+::view-transition-new(.slide-in) {
+  animation-name: slideInLeft;
+}
+::view-transition-group(.slide-in) {
+  z-index: 1;
+}
+::view-transition-old(.slide-out) {
+  animation-name: slideOutLeft;
+}
+::view-transition-new(.slide-out) {
+  animation-name: slideInLeft;
+}
+::view-transition-group(.slide-out) {
+  z-index: 1;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+::view-transition-old(.container),
+::view-transition-new(.container) {
+  height: 100%;
+}
+
+::view-transition-old(.accordion-container),
+::view-transition-new(.accordion-container) {
+  height: 100%;
+  object-fit: none;
+  object-position: left;
+}
+
+::view-transition-old(.tab-highlight),
+::view-transition-new(.tab-highlight) {
+  height: 100%;
+}
+::view-transition-group(.tab-text) {
+	z-index: 1;
+}
+
+::view-transition-old(.expand-accordion),
+::view-transition-new(.expand-accordion) {
+  width: auto;
+}
+::view-transition-group(.expand-accordion) {
+  overflow: clip;
+}
+
+/**
+ * For some reason, the original Monaco editor is still visible to the
+ * left of the DiffEditor. This is a workaround for better visual clarity.
+ */
+.monaco-diff-editor .editor.original{
+  visibility: hidden !important;
+}
diff --git a/compiler/apps/playground/tailwind.config.js b/compiler/apps/playground/tailwind.config.js
new file mode 100644
index 00000000000..2138d1cc70e
--- /dev/null
+++ b/compiler/apps/playground/tailwind.config.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('./colors');
+
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './lib/forgetMonacoDiagnostics.ts',
+  ],
+  theme: {
+    extend: {
+      colors,
+      width: {
+        toast: 'min(900px, 100vw - 40px)',
+        'toast-body': 'calc(100% - 60px)',
+        'toast-title': 'calc(100% - 40px)',
+      },
+      height: {
+        content: 'calc(100vh - 45px)',
+        monaco: 'calc(100vh - 93px)',
+        monaco_small: 'calc(100vh - 129px)',
+      },
+      fontFamily: {
+        sans: [
+          'Optimistic Display',
+          '-apple-system',
+          ...defaultTheme.fontFamily.sans,
+        ],
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/compiler/apps/playground/tsconfig.json b/compiler/apps/playground/tsconfig.json
new file mode 100644
index 00000000000..1ead55cc96e
--- /dev/null
+++ b/compiler/apps/playground/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "types": [
+      "react/experimental"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "../../../**"
+  ]
+}
diff --git a/compiler/apps/playground/vercel.json b/compiler/apps/playground/vercel.json
new file mode 100644
index 00000000000..37ad9dbbaa3
--- /dev/null
+++ b/compiler/apps/playground/vercel.json
@@ -0,0 +1,13 @@
+{
+ "headers": [
+    {
+      "source": "/fonts/(.*).woff2",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
+}
diff --git a/compiler/apps/playground/yarn.lock b/compiler/apps/playground/yarn.lock
new file mode 100644
index 00000000000..be63ac56b61
--- /dev/null
+++ b/compiler/apps/playground/yarn.lock
@@ -0,0 +1,4582 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@babel/code-frame@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
+  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+  dependencies:
+    "@babel/highlight" "^7.24.7"
+    picocolors "^1.0.0"
+
+"@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.25.2":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
+  integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==
+
+"@babel/core@^7.18.9":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
+  integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.0"
+    "@babel/helper-compilation-targets" "^7.25.2"
+    "@babel/helper-module-transforms" "^7.25.2"
+    "@babel/helpers" "^7.25.0"
+    "@babel/parser" "^7.25.0"
+    "@babel/template" "^7.25.0"
+    "@babel/traverse" "^7.25.2"
+    "@babel/types" "^7.25.2"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@^7.18.9", "@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
+  integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
+  dependencies:
+    "@babel/types" "^7.25.6"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
+"@babel/generator@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7"
+  integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang==
+  dependencies:
+    "@babel/parser" "^7.26.10"
+    "@babel/types" "^7.26.10"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-annotate-as-pure@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
+  integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==
+  dependencies:
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-compilation-targets@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz#e1d9410a90974a3a5a66e84ff55ef62e3c02d06c"
+  integrity sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==
+  dependencies:
+    "@babel/compat-data" "^7.25.2"
+    "@babel/helper-validator-option" "^7.24.8"
+    browserslist "^4.23.1"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.25.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71"
+  integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.26.9"
+    semver "^6.3.1"
+
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-imports@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
+  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.24.8", "@babel/helper-module-transforms@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz#ee713c29768100f2776edf04d4eb23b8d27a66e6"
+  integrity sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-simple-access" "^7.24.7"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/traverse" "^7.25.2"
+
+"@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
+  integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
+
+"@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
+
+"@babel/helper-replace-supers@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
+
+"@babel/helper-simple-access@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz#bcade8da3aec8ed16b9c4953b74e506b51b5edb3"
+  integrity sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-option@^7.24.7", "@babel/helper-validator-option@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
+  integrity sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helpers@^7.25.0":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.6.tgz#57ee60141829ba2e102f30711ffe3afab357cc60"
+  integrity sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==
+  dependencies:
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.6"
+
+"@babel/highlight@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
+  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/parser@^7.18.9", "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+  dependencies:
+    "@babel/types" "^7.25.6"
+
+"@babel/parser@^7.26.10", "@babel/parser@^7.26.9":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749"
+  integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==
+  dependencies:
+    "@babel/types" "^7.26.10"
+
+"@babel/plugin-syntax-jsx@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz#39a1fa4a7e3d3d7f34e2acc6be585b718d30e02d"
+  integrity sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
+"@babel/plugin-syntax-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-typescript@^7.18.9":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.4.tgz#04db9ce5a9043d9c635e75ae7969a2cd50ca97ff"
+  integrity sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.8"
+
+"@babel/plugin-syntax-typescript@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-block-scoping@^7.18.9":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz#23a6ed92e6b006d26b1869b1c91d1b917c2ea2ac"
+  integrity sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.8"
+
+"@babel/plugin-transform-modules-commonjs@^7.18.9":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz#ab6421e564b717cb475d6fff70ae7f103536ea3c"
+  integrity sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-simple-access" "^7.24.7"
+
+"@babel/plugin-transform-modules-commonjs@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-display-name@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.7.tgz#9caff79836803bc666bcfe210aeb6626230c293b"
+  integrity sha512-H/Snz9PFxKsS1JLI4dJLtnJgCJRoo0AUm3chP6NYr+9En1JMKloheEiLIhlp5MDVznWo+H3AAC1Mc8lmUEpsgg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
+"@babel/plugin-transform-react-jsx-development@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.24.7.tgz#eaee12f15a93f6496d852509a850085e6361470b"
+  integrity sha512-QG9EnzoGn+Qar7rxuW+ZOsbWOt56FvvI93xInqsZDC5fsekx1AlIO4KIJ5M+D0p0SqSH156EpmZyXq630B8OlQ==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.24.7"
+
+"@babel/plugin-transform-react-jsx@^7.24.7":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz#e37e8ebfa77e9f0b16ba07fadcb6adb47412227a"
+  integrity sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.7"
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/plugin-syntax-jsx" "^7.24.7"
+    "@babel/types" "^7.25.2"
+
+"@babel/plugin-transform-react-pure-annotations@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.7.tgz#bdd9d140d1c318b4f28b29a00fb94f97ecab1595"
+  integrity sha512-PLgBVk3fzbmEjBJ/u8kFzOqS9tUeDjiaWud/rRym/yjCo/M9cASPlnrd2ZmmZpQT40fOOrvR8jh+n8jikrOhNA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.7"
+
+"@babel/plugin-transform-typescript@^7.25.9":
+  version "7.26.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.8.tgz#2e9caa870aa102f50d7125240d9dbf91334b0950"
+  integrity sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-syntax-typescript" "^7.25.9"
+
+"@babel/preset-react@^7.18.9":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.24.7.tgz#480aeb389b2a798880bf1f889199e3641cbb22dc"
+  integrity sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-validator-option" "^7.24.7"
+    "@babel/plugin-transform-react-display-name" "^7.24.7"
+    "@babel/plugin-transform-react-jsx" "^7.24.7"
+    "@babel/plugin-transform-react-jsx-development" "^7.24.7"
+    "@babel/plugin-transform-react-pure-annotations" "^7.24.7"
+
+"@babel/preset-typescript@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
+  integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-typescript" "^7.25.9"
+
+"@babel/runtime@^7.21.0":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
+"@babel/template@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2"
+  integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/parser" "^7.26.9"
+    "@babel/types" "^7.26.9"
+
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
+  integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.6"
+    "@babel/parser" "^7.25.6"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380"
+  integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.10"
+    "@babel/parser" "^7.26.10"
+    "@babel/template" "^7.26.9"
+    "@babel/types" "^7.26.10"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@7.26.3", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@babel/types@^7.25.9", "@babel/types@^7.26.10", "@babel/types@^7.26.9":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259"
+  integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@emnapi/runtime@^1.4.4":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.5.0.tgz#9aebfcb9b17195dce3ab53c86787a6b7d058db73"
+  integrity sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==
+  dependencies:
+    tslib "^2.4.0"
+
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.1.tgz#a547badfc719eb3e5f4b556325e542fbe9d7a18f"
+  integrity sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
+
+"@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
+  integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
+
+"@hapi/topo@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.1.0.tgz#dc448e332c6c6e37a4dc02fd84ba8d44b9afb012"
+  integrity sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
+"@heroicons/react@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
+"@img/sharp-darwin-arm64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz#4850c8ace3c1dc13607fa07d43377b1f9aa774da"
+  integrity sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.2.0"
+
+"@img/sharp-darwin-x64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz#edf93fb01479604f14ad6a64a716e2ef2bb23100"
+  integrity sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.2.0"
+
+"@img/sharp-libvips-darwin-arm64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz#e20e9041031acde1de19da121dc5162c7d2cf251"
+  integrity sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==
+
+"@img/sharp-libvips-darwin-x64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz#918ca81c5446f31114834cb908425a7532393185"
+  integrity sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==
+
+"@img/sharp-libvips-linux-arm64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz#1a5beafc857b43f378c3030427aa981ee3edbc54"
+  integrity sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==
+
+"@img/sharp-libvips-linux-arm@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz#bff51182d5238ca35c5fe9e9f594a18ad6a5480d"
+  integrity sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==
+
+"@img/sharp-libvips-linux-ppc64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz#10c53ccf6f2d47d71fb3fa282697072c8fe9e40e"
+  integrity sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==
+
+"@img/sharp-libvips-linux-s390x@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz#392fd7557ddc5c901f1bed7ab3c567c08833ef3b"
+  integrity sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==
+
+"@img/sharp-libvips-linux-x64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz#9315cf90a2fdcdc0e29ea7663cbd8b0f15254400"
+  integrity sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz#705e03e67d477f6f842f37eb7f66285b1150dc06"
+  integrity sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==
+
+"@img/sharp-libvips-linuxmusl-x64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz#ec905071cc538df64848d5900e0d386d77c55f13"
+  integrity sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==
+
+"@img/sharp-linux-arm64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz#476f8f13ce192555391ae9d4bc658637a6acf3e5"
+  integrity sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.2.0"
+
+"@img/sharp-linux-arm@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz#9898cd68ea3e3806b94fe25736d5d7ecb5eac121"
+  integrity sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.2.0"
+
+"@img/sharp-linux-ppc64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz#6a7cd4c608011333a0ddde6d96e03ac042dd9079"
+  integrity sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-ppc64" "1.2.0"
+
+"@img/sharp-linux-s390x@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz#48e27ab969efe97d270e39297654c0e0c9b42919"
+  integrity sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.2.0"
+
+"@img/sharp-linux-x64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz#5aa77ad4aa447ddf6d642e2a2c5599eb1292dfaa"
+  integrity sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.2.0"
+
+"@img/sharp-linuxmusl-arm64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz#62053a9d77c7d4632c677619325b741254689dd7"
+  integrity sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.0"
+
+"@img/sharp-linuxmusl-x64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz#5107c7709c7e0a44fe5abef59829f1de86fa0a3a"
+  integrity sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.0"
+
+"@img/sharp-wasm32@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz#c1dcabb834ec2f71308a810b399bb6e6e3b79619"
+  integrity sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==
+  dependencies:
+    "@emnapi/runtime" "^1.4.4"
+
+"@img/sharp-win32-arm64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz#3e8654e368bb349d45799a0d7aeb29db2298628e"
+  integrity sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==
+
+"@img/sharp-win32-ia32@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz#9d4c105e8d5074a351a81a0b6d056e0af913bf76"
+  integrity sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==
+
+"@img/sharp-win32-x64@0.34.3":
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz#d20c89bd41b1dd3d76d8575714aaaa3c43204b6a"
+  integrity sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@monaco-editor/loader@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz#c99177d87765abf10de31a0086084e714acfbc0f"
+  integrity sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.8.0-rc.2":
+  version "4.8.0-rc.2"
+  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.8.0-rc.2.tgz#e9acf652e23e9f640671a69875f496dde7f098aa"
+  integrity sha512-RzFHKBCnRA4RnozaG/EPhKsbkhX5wcApSa5MElR/AD2ojxhMY+QP+G8aJpxALCnIwKs6L0dec5MJ0nAjMUEqnA==
+  dependencies:
+    "@monaco-editor/loader" "^1.6.1"
+
+"@next/env@15.5.9":
+  version "15.5.9"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.5.9.tgz#53c2c34dc17cd87b61f70c6cc211e303123b2ab8"
+  integrity sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==
+
+"@next/eslint-plugin-next@15.5.2":
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.2.tgz#6fa6b78687dbbb6f5726acd81bcdfd87dc26b6f3"
+  integrity sha512-lkLrRVxcftuOsJNhWatf1P2hNVfh98k/omQHrCEPPriUypR6RcS13IvLdIrEvkm9AH2Nu2YpR5vLqBuy6twH3Q==
+  dependencies:
+    fast-glob "3.3.1"
+
+"@next/swc-darwin-arm64@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz#f0c9ccfec2cd87cbd4b241ce4c779a7017aed958"
+  integrity sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==
+
+"@next/swc-darwin-x64@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz#18009e9fcffc5c0687cc9db24182ddeac56280d9"
+  integrity sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==
+
+"@next/swc-linux-arm64-gnu@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz#fe7c7e08264cf522d4e524299f6d3e63d68d579a"
+  integrity sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==
+
+"@next/swc-linux-arm64-musl@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz#94228fe293475ec34a5a54284e1056876f43a3cf"
+  integrity sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==
+
+"@next/swc-linux-x64-gnu@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz#078c71201dfe7fcfb8fa6dc92aae6c94bc011cdc"
+  integrity sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==
+
+"@next/swc-linux-x64-musl@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz#72947f5357f9226292353e0bb775643da3c7a182"
+  integrity sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==
+
+"@next/swc-win32-arm64-msvc@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz#397b912cd51c6a80e32b9c0507ecd82514353941"
+  integrity sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==
+
+"@next/swc-win32-x64-msvc@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz#e02b543d9dc6c1631d4ac239cb1177245dfedfe4"
+  integrity sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@nolyfill/is-core-module@1.0.39":
+  version "1.0.39"
+  resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
+  integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@playwright/test@^1.56.1":
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f"
+  integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==
+  dependencies:
+    playwright "1.56.1"
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@rushstack/eslint-patch@^1.10.3":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
+  integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
+
+"@sideway/address@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"
+  integrity sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
+"@sideway/formula@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
+  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
+
+"@sideway/pinpoint@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
+  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
+
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
+
+"@swc/helpers@0.5.15":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/node@18.11.9":
+  version "18.11.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
+  integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
+
+"@types/react-dom@19.2":
+  version "19.2.2"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332"
+  integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==
+
+"@types/react@19.2":
+  version "19.2.2"
+  resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36"
+  integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==
+  dependencies:
+    csstype "^3.0.2"
+
+"@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.10.0.tgz#9c8218ed62f9a322df10ded7c34990f014df44f2"
+  integrity sha512-phuB3hoP7FFKbRXxjl+DRlQDuJqhpOnm5MmtROXyWi3uS/Xg2ZXqiQfcG2BJHiN4QKyzdOJi3NEn/qTnjUlkmQ==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.10.0"
+    "@typescript-eslint/type-utils" "8.10.0"
+    "@typescript-eslint/utils" "8.10.0"
+    "@typescript-eslint/visitor-keys" "8.10.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.10.0.tgz#3cbe7206f5e42835878a74a76da533549f977662"
+  integrity sha512-E24l90SxuJhytWJ0pTQydFT46Nk0Z+bsLKo/L8rtQSL93rQ6byd1V/QbDpHUTdLPOMsBCcYXZweADNCfOCmOAg==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.10.0"
+    "@typescript-eslint/types" "8.10.0"
+    "@typescript-eslint/typescript-estree" "8.10.0"
+    "@typescript-eslint/visitor-keys" "8.10.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@8.10.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.10.0.tgz#606ffe18314d7b5c2f118f2f02aaa2958107a19c"
+  integrity sha512-AgCaEjhfql9MDKjMUxWvH7HjLeBqMCBfIaBbzzIcBbQPZE7CPh1m6FF+L75NUMJFMLYhCywJXIDEMa3//1A0dw==
+  dependencies:
+    "@typescript-eslint/types" "8.10.0"
+    "@typescript-eslint/visitor-keys" "8.10.0"
+
+"@typescript-eslint/type-utils@8.10.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.10.0.tgz#99f1d2e21f8c74703e7d9c4a67a87271eaf57597"
+  integrity sha512-PCpUOpyQSpxBn230yIcK+LeCQaXuxrgCm2Zk1S+PTIRJsEfU6nJ0TtwyH8pIwPK/vJoA+7TZtzyAJSGBz+s/dg==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "8.10.0"
+    "@typescript-eslint/utils" "8.10.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/types@8.10.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.10.0.tgz#eb29c4bc2ed23489348c297469c76d28c38fb618"
+  integrity sha512-k/E48uzsfJCRRbGLapdZgrX52csmWJ2rcowwPvOZ8lwPUv3xW6CcFeJAXgx4uJm+Ge4+a4tFOkdYvSpxhRhg1w==
+
+"@typescript-eslint/typescript-estree@8.10.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.10.0.tgz#36cc66e06c5f44d6781f95cb03b132e985273a33"
+  integrity sha512-3OE0nlcOHaMvQ8Xu5gAfME3/tWVDpb/HxtpUZ1WeOAksZ/h/gwrBzCklaGzwZT97/lBbbxJ16dMA98JMEngW4w==
+  dependencies:
+    "@typescript-eslint/types" "8.10.0"
+    "@typescript-eslint/visitor-keys" "8.10.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/utils@8.10.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.10.0.tgz#d78d1ce3ea3d2a88a2593ebfb1c98490131d00bf"
+  integrity sha512-Oq4uZ7JFr9d1ZunE/QKy5egcDRXT/FrS2z/nlxzPua2VHFtmMvFNDvpq1m/hq0ra+T52aUezfcjGRIB7vNJF9w==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.10.0"
+    "@typescript-eslint/types" "8.10.0"
+    "@typescript-eslint/typescript-estree" "8.10.0"
+
+"@typescript-eslint/visitor-keys@8.10.0":
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.10.0.tgz#7ce4c0c3b82140415c9cd9babe09e0000b4e9979"
+  integrity sha512-k8nekgqwr7FadWk548Lfph6V3r9OVqjzAIVskE7orMZR23cGJjAOVazsZSJW+ElyjfTM4wx/1g88Mi70DDtG9A==
+  dependencies:
+    "@typescript-eslint/types" "8.10.0"
+    eslint-visitor-keys "^3.4.3"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
+"@use-gesture/core@10.3.1":
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.3.1.tgz#976c9421e905f0079d49822cfd5c2e56b808fc56"
+  integrity sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==
+
+"@use-gesture/react@^10.2.22":
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.3.1.tgz#17a743a894d9bd9a0d1980c618f37f0164469867"
+  integrity sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==
+  dependencies:
+    "@use-gesture/core" "10.3.1"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.9.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@~5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+  dependencies:
+    deep-equal "^2.0.5"
+
+array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-includes@^3.1.6, array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
+array.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+autoprefixer@^10.4.13:
+  version "10.4.20"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
+  dependencies:
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.1"
+    postcss-value-parser "^4.2.0"
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axe-core@^4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.0.tgz#d9e56ab0147278272739a000880196cdfe113b59"
+  integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==
+
+axios@^1.6.1:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+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@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+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"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.23.1, browserslist@^4.23.3:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
+  integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
+  dependencies:
+    caniuse-lite "^1.0.30001663"
+    electron-to-chromium "^1.5.28"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.0"
+
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.4.tgz#238de935d2a2a692928c538c7ccfa91067fd062a"
+  integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    get-intrinsic "^1.3.0"
+
+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-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001663:
+  version "1.0.30001715"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001715.tgz"
+  integrity sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw==
+
+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:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^3.5.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
+clsx@^1.1.0, clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
+combined-stream@^1.0.8:
+  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@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+concurrently@^7.4.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.6.0.tgz#531a6f5f30cf616f355a4afb8f8fcb2bba65a49a"
+  integrity sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==
+  dependencies:
+    chalk "^4.1.0"
+    date-fns "^2.29.1"
+    lodash "^4.17.21"
+    rxjs "^7.0.0"
+    shell-quote "^1.7.3"
+    spawn-command "^0.0.2-1"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+date-fns@^2.29.1:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
+deep-equal@^2.0.5:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
+  integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    call-bind "^1.0.5"
+    es-get-iterator "^1.1.3"
+    get-intrinsic "^1.2.2"
+    is-arguments "^1.1.1"
+    is-array-buffer "^3.0.2"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    isarray "^2.0.5"
+    object-is "^1.1.5"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.5.1"
+    side-channel "^1.0.4"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.13"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+detect-libc@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.4.tgz#f04715b8ba815e53b4d8109655b6508a6865a7e8"
+  integrity sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+doctrine@^2.1.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"
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+electron-to-chromium@^1.5.28:
+  version "1.5.29"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.29.tgz#aa592a3caa95d07cc26a66563accf99fa573a1ee"
+  integrity sha512-PF8n2AlIhCKXQ+gTpiJi0VhcHDb69kYX4MtCiivctc2QD3XuNZ/XIOlbGzt7WAjjEev0TtaH6Cu3arZExm5DOw==
+
+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==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+enhanced-resolve@^5.15.0:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.24.0.tgz#c44732d2beb0acc1ed60df840869e3106e7af328"
+  integrity sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.3.0"
+    get-proto "^1.0.1"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.2.1"
+    is-set "^2.0.3"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.1"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.4"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    stop-iteration-iterator "^1.1.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.19"
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-get-iterator@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    is-arguments "^1.1.1"
+    is-map "^2.0.2"
+    is-set "^2.0.2"
+    is-string "^1.0.7"
+    isarray "^2.0.5"
+    stop-iteration-iterator "^1.0.0"
+
+es-iterator-helpers@^1.0.19:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
+  integrity sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.7"
+    iterator.prototype "^1.1.2"
+    safe-array-concat "^1.1.2"
+
+es-iterator-helpers@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz#d1dd0f58129054c0ad922e6a9a1e65eef435fe75"
+  integrity sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.6"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    iterator.prototype "^1.1.4"
+    safe-array-concat "^1.1.3"
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
+escalade@^3.1.1, escalade@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+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 sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@15.5.2:
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-15.5.2.tgz#9629ed1deaa131e8e80cbae20acf631c8595ca3e"
+  integrity sha512-3hPZghsLupMxxZ2ggjIIrat/bPniM2yRpsVPVM40rp8ZMzKWOJp2CGWn7+EzoV2ddkUr5fxNfHpF+wU1hGt/3g==
+  dependencies:
+    "@next/eslint-plugin-next" "15.5.2"
+    "@rushstack/eslint-patch" "^1.10.3"
+    "@typescript-eslint/eslint-plugin" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.31.0"
+    eslint-plugin-jsx-a11y "^6.10.0"
+    eslint-plugin-react "^7.37.0"
+    eslint-plugin-react-hooks "^5.0.0"
+
+eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.3.tgz#bb8e388f6afc0f940ce5d2c5fd4a3d147f038d9e"
+  integrity sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==
+  dependencies:
+    "@nolyfill/is-core-module" "1.0.39"
+    debug "^4.3.5"
+    enhanced-resolve "^5.15.0"
+    eslint-module-utils "^2.8.1"
+    fast-glob "^3.3.2"
+    get-tsconfig "^4.7.5"
+    is-bun-module "^1.0.2"
+    is-glob "^4.0.3"
+
+eslint-module-utils@^2.12.0, eslint-module-utils@^2.8.1:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@^2.31.0:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
+  dependencies:
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
+    tsconfig-paths "^3.15.0"
+
+eslint-plugin-jsx-a11y@^6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.0.tgz#36fb9dead91cafd085ddbe3829602fb10ef28339"
+  integrity sha512-ySOHvXX8eSN6zz8Bywacm7CvGNhUtdjvqfQDVe6020TUK34Cywkw7m0KsCCk1Qtm9G1FayfTN1/7mMYnYO2Bhg==
+  dependencies:
+    aria-query "~5.1.3"
+    array-includes "^3.1.8"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    es-iterator-helpers "^1.0.19"
+    hasown "^2.0.2"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.0"
+
+eslint-plugin-react-hooks@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz#72e2eefbac4b694f5324154619fee44f5f60f101"
+  integrity sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==
+
+eslint-plugin-react@^7.37.0:
+  version "7.37.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz#2975511472bdda1b272b34d779335c9b0e877065"
+  integrity sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==
+  dependencies:
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.3"
+    array.prototype.tosorted "^1.1.4"
+    doctrine "^2.1.0"
+    es-iterator-helpers "^1.2.1"
+    estraverse "^5.3.0"
+    hasown "^2.0.2"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.9"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.1"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.12"
+    string.prototype.repeat "^1.0.0"
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@^8.28.0:
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esquery@^1.4.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-glob@^3.3.0, fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
+  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
+
+flatted@^3.2.9:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
+
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+for-each@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
+  integrity sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==
+  dependencies:
+    is-callable "^1.2.7"
+
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.5:
+  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-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
+get-tsconfig@^4.7.5:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.8.1.tgz#8995eb391ae6e1638d251118c7b56de7eb425471"
+  integrity sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==
+  dependencies:
+    resolve-pkg-maps "^1.0.0"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^7.1.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.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@^13.19.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalthis@^1.0.3, globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+goober@^2.0.33:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1, has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+hermes-eslint@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.25.0.tgz#beec5f0d9e9e9bdef9e4a420a79038ca7fe84143"
+  integrity sha512-D9rdrqt7dudZHI5AJKS+1vXBbxxR6Wj9J1JI7eYowYCbXUIvHclsWFy8gSuRmug2V6HSYpsiyPwP3kQs/Q/Y8w==
+  dependencies:
+    esrecurse "^4.3.0"
+    hermes-estree "0.25.0"
+    hermes-parser "0.25.0"
+
+hermes-estree@0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.0.tgz#fd926ebf3d0d3441a934f19ef3d3d3d4145b1d71"
+  integrity sha512-xjILoUIyOpLoOHqj8UJs/HNYQ279IfLKTTv9nmXKNT2+QKT/TQF9AyQFrRMo+3xwZoO7k4azocYpCzA1cSvBDg==
+
+hermes-parser@0.25.0, hermes-parser@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.0.tgz#634934533a956e392ae0988421e4b0315e30351e"
+  integrity sha512-CeAdhgMfbZcrYh+HHKVKsj7VNhOTr0jiLFlcVVoRORbZ/Nr4J90WjEq2CZoahgH15/DYY/VBhuLqpIzJqfdBEQ==
+  dependencies:
+    hermes-estree "0.25.0"
+
+ignore@^5.2.0, ignore@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+internal-slot@^1.0.4, internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
+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"
+
+is-arguments@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+
+is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.2.tgz#7067f47709809a393c71ff5bb3e135d8a9215d9e"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-bun-module@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-bun-module/-/is-bun-module-1.2.1.tgz#495e706f42e29f086fd5fe1ac3c51f106062b9fc"
+  integrity sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==
+  dependencies:
+    semver "^7.6.3"
+
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.13.0, is-core-module@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
+  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
+is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.1, is-date-object@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
+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-function@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-map@^2.0.2, is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-set@^2.0.2, is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
+
+is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-weakref@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.1.tgz#eea430182be8d64174bd96bffbc46f21bf3f9293"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-weakset@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
+  integrity sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+iterator.prototype@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+  dependencies:
+    define-properties "^1.2.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.4"
+    set-function-name "^2.0.1"
+
+iterator.prototype@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.5.tgz#12c959a29de32de0aa3bbbb801f4d777066dae39"
+  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    get-proto "^1.0.0"
+    has-symbols "^1.1.0"
+    set-function-name "^2.0.2"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+
+joi@^17.11.0:
+  version "17.13.3"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.13.3.tgz#0f5cc1169c999b30d344366d384b12d92558bcec"
+  integrity sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==
+  dependencies:
+    "@hapi/hoek" "^9.3.0"
+    "@hapi/topo" "^5.1.0"
+    "@sideway/address" "^4.1.5"
+    "@sideway/formula" "^3.0.1"
+    "@sideway/pinpoint" "^2.0.0"
+
+"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-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+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-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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+language-subtag-registry@^0.3.20:
+  version "0.3.23"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
+  integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
+  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+loader-utils@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+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"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+lru-cache@^11.2.2:
+  version "11.2.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-11.2.2.tgz#40fd37edffcfae4b2940379c0722dc6eeaa75f24"
+  integrity sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==
+
+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"
+
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4, micromatch@^4.0.5:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+monaco-editor-webpack-plugin@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
+  integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==
+  dependencies:
+    loader-utils "^2.0.2"
+
+monaco-editor@^0.52.0:
+  version "0.52.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.52.0.tgz#d47c02b191eae208d68878d679b3ee7456031be7"
+  integrity sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==
+
+ms@^2.1.1, ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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"
+
+nanoid@^3.3.6, nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next@15.5.9:
+  version "15.5.9"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.5.9.tgz#1b80d05865cc27e710fb4dcfc6fd9e726ed12ad4"
+  integrity sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==
+  dependencies:
+    "@next/env" "15.5.9"
+    "@swc/helpers" "0.5.15"
+    caniuse-lite "^1.0.30001579"
+    postcss "8.4.31"
+    styled-jsx "5.1.6"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "15.5.7"
+    "@next/swc-darwin-x64" "15.5.7"
+    "@next/swc-linux-arm64-gnu" "15.5.7"
+    "@next/swc-linux-arm64-musl" "15.5.7"
+    "@next/swc-linux-x64-gnu" "15.5.7"
+    "@next/swc-linux-x64-musl" "15.5.7"
+    "@next/swc-win32-arm64-msvc" "15.5.7"
+    "@next/swc-win32-x64-msvc" "15.5.7"
+    sharp "^0.34.3"
+
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
+normalize-path@^3.0.0, 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-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+notistack@^3.0.0-alpha.7:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
+  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
+  dependencies:
+    clsx "^1.1.0"
+    goober "^2.0.33"
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+object-inspect@^1.13.3, object-inspect@^1.13.4:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
+object-is@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
+  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.4, object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.9.tgz#e4770a6a1444afb61bd39f984018b5bede25f8b3"
+  integrity sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.1.1"
+
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.values@^1.1.6, object.values@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+object.values@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+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"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+playwright-core@1.56.1:
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d"
+  integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==
+
+playwright@1.56.1:
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf"
+  integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==
+  dependencies:
+    playwright-core "1.56.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-nested@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.23, postcss@^8.4.31:
+  version "8.4.47"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
+  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.0"
+    source-map-js "^1.2.1"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
+pretty-format@^29.3.1:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+punycode@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+re-resizable@^6.9.16:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee"
+  integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==
+
+react-dom@19.2.3:
+  version "19.2.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.3.tgz#f0b61d7e5c4a86773889fcc1853af3ed5f215b17"
+  integrity sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==
+  dependencies:
+    scheduler "^0.27.0"
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^18.0.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react@19.2.3:
+  version "19.2.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.2.3.tgz#d83e5e8e7a258cf6b4fe28640515f99b87cd19b8"
+  integrity sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+reflect.getprototypeof@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
+  integrity sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.1"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  dependencies:
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
+
+regexp.prototype.flags@^1.5.3, regexp.prototype.flags@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.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 sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+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-pkg-maps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
+  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
+
+resolve@^1.1.7, resolve@^1.22.2, resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rxjs@^7.0.0, rxjs@^7.8.1:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
+safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
+scheduler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
+  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
+
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.6.0, semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+semver@^7.7.2:
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
+  integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
+
+set-function-length@^1.2.1, set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1, set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
+sharp@^0.34.3:
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.34.3.tgz#10a03bcd15fb72f16355461af0b9245ccb8a5da3"
+  integrity sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.4"
+    semver "^7.7.2"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.34.3"
+    "@img/sharp-darwin-x64" "0.34.3"
+    "@img/sharp-libvips-darwin-arm64" "1.2.0"
+    "@img/sharp-libvips-darwin-x64" "1.2.0"
+    "@img/sharp-libvips-linux-arm" "1.2.0"
+    "@img/sharp-libvips-linux-arm64" "1.2.0"
+    "@img/sharp-libvips-linux-ppc64" "1.2.0"
+    "@img/sharp-libvips-linux-s390x" "1.2.0"
+    "@img/sharp-libvips-linux-x64" "1.2.0"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.0"
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.0"
+    "@img/sharp-linux-arm" "0.34.3"
+    "@img/sharp-linux-arm64" "0.34.3"
+    "@img/sharp-linux-ppc64" "0.34.3"
+    "@img/sharp-linux-s390x" "0.34.3"
+    "@img/sharp-linux-x64" "0.34.3"
+    "@img/sharp-linuxmusl-arm64" "0.34.3"
+    "@img/sharp-linuxmusl-x64" "0.34.3"
+    "@img/sharp-wasm32" "0.34.3"
+    "@img/sharp-win32-arm64" "0.34.3"
+    "@img/sharp-win32-ia32" "0.34.3"
+    "@img/sharp-win32-x64" "0.34.3"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+spawn-command@^0.0.2-1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
+
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
+stop-iteration-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+  dependencies:
+    internal-slot "^1.0.4"
+
+stop-iteration-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
+  integrity sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==
+  dependencies:
+    es-errors "^1.3.0"
+    internal-slot "^1.1.0"
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.includes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.0.tgz#8986d57aee66d5460c144620a6d873778ad7289f"
+  integrity sha512-E34CkBgyeqNDcrbU76cDjL5JLcVrtSdYq0MEh/B10r17pRP4ciHLwTgnuLV8Ay6cgEMLkcBkFCKyFZ43YldYzg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.matchall@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"
+  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    regexp.prototype.flags "^1.5.3"
+    set-function-name "^2.0.2"
+    side-channel "^1.1.0"
+
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.6.tgz#83b90c077e6c6a80f7f5e8781d0f311b2fe41499"
+  integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
+  dependencies:
+    client-only "0.0.1"
+
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+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"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+tailwindcss@^3.2.4:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.13.tgz#3d11e5510660f99df4f1bfb2d78434666cb8f831"
+  integrity sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+ts-api-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^2.1.0, tslib@^2.4.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
+
+tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
+update-browserslist-db@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
+  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+wait-on@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-7.2.0.tgz#d76b20ed3fc1e2bebc051fae5c1ff93be7892928"
+  integrity sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==
+  dependencies:
+    axios "^1.6.1"
+    joi "^17.11.0"
+    lodash "^4.17.21"
+    minimist "^1.2.8"
+    rxjs "^7.8.1"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.4.tgz#592796260602fc3514a1b5ee7fa29319b72380c3"
+  integrity sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==
+  dependencies:
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.15"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.1, which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
+which-typed-array@^1.1.16, which-typed-array@^1.1.19:
+  version "1.1.19"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.19.tgz#df03842e870b6b88e117524a4b364b6fc689f956"
+  integrity sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    for-each "^0.3.5"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yaml@^2.3.4:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
+  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/compiler/docs/DESIGN_GOALS.md b/compiler/docs/DESIGN_GOALS.md
new file mode 100644
index 00000000000..76d19e25c08
--- /dev/null
+++ b/compiler/docs/DESIGN_GOALS.md
@@ -0,0 +1,55 @@
+# React Compiler — Goals, Design Principles, and Architecture
+
+This document describes the goals, design principles, and high-level architecture of React Compiler. See the code for specifics of the data structures and compiler passes.
+
+## Goals
+
+The idea of React Compiler is to allow developers to use React's familiar declarative, component-based programming model, while ensuring that apps are fast by default. Concretely we seek to achieve the following goals:
+
+* Bound the amount of re-rendering that happens on updates to ensure that apps have predictably fast performance by default.
+* Keep startup time neutral with pre-React Compiler performance. Notably, this means holding code size increases and memoization overhead low enough to not impact startup.
+* Retain React's familiar declarative, component-oriented programming model. Ie, the solution should not fundamentally change how developers think about writing React, and should generally _remove_ concepts (the need to use React.memo(), useMemo(), and useCallback()) rather than introduce new concepts.
+* "Just work" on idiomatic React code that follows React's rules (pure render functions, the rules of hooks, etc).
+* Support typical debugging and profiling tools and workflows.
+* Be predictable and understandable enough by React developers — i.e. developers should be able to quickly develop a rough intuition of how React Compiler works.
+* Not require explicit annotations (types or otherwise) for typical product code. We may provide features that allow developers to opt-in to using type information to enable additional optimizations, but the compiler should work well without type information or other annotations.
+
+## Non-Goals
+
+The following are explicitly *not* goals for React Compiler:
+
+* Provide perfectly optimal re-rendering with zero unnecessary recomputation. This is a non-goal for several reasons:
+  * The runtime overhead of the extra tracking involved can outweight the cost of recomputation in many cases.
+  * In cases with conditional dependencies it may not be possible to avoid recomputing some/all instructions.
+  * The amount of code may regress startup times, which would conflict with our goal of neutral startup performance.
+* Support code that violates React's rules. React's rules exist to help developers build robust, scalable applications and form a contract that allows us to continue improving React without breaking applications. React Compiler depends on these rules to safely transform code, and violations of rules will therefore break React Compiler's optimizations.
+* Support legacy React features. Notably we will not support class components due to their inherent mutable state being shared across multiple methods with complex lifetimes and data flow.
+* Support 100% of the JavaScript language. In particular, we will not support rarely used features and/or features which are known to be unsafe or which cannot be modeled soundly. For example, nested classes that capture values from their closure are difficult to model accurately because of mutability, and `eval()` is unsafe. We aim to support the vast majority of JavaScript code (and the TypeScript and Flow dialects)
+
+## Design Principles
+
+Many aspects of the design follow naturally from the above goals:
+
+* The compiler output must be high-level code that retains not just the semantics of the input but also is expressed using similar constructs to the input. For example, rather than convert logical expressions (`a ?? b`) into an `if` statement, we retain the high-level form of the logical expression. Rather than convert all looping constructs to a single form, we retain the original form of the loop. This follows from our goals:
+  * High-level code is more compact, and helps reduce the impact of compilation on application size.
+  * High-level constructs that match what the developer wrote are easier to debug.
+* From the above, it then follows that the compiler's internal representation must also be high-level enough to be able to output the original high-level constructs. The internal representation is what we call a High-level Intermediate Representation (HIR) — a name borrowed from Rust Compiler. However, React Compiler's HIR is perhaps even more suited to this name, as it retains high-level information (distinguishing if vs logical vs ternary, or for vs while vs for..of) but also represents code as a control-flow graph with no nesting.
+
+## Architecture
+
+React Compiler has two primary public interfaces: a Babel plugin for transforming code, and an ESLint plugin for reporting violations of the Rules of React. Internally, both use the same core compiler logic.
+
+The core of the compiler is largely decoupled from Babel, using its own intermediate representations. The high-level flow is as follows:
+
+- **Babel Plugin**: Determines which functions in a file should be compiled, based on the plugin options and any local opt-in/opt-out directives. For each component or hook to be compiled, the plugin calls the compiler, passing in the original function and getting back a new AST node which will replace the original.
+- **Lowering** (BuildHIR): The first step of the compiler is to convert the Babel AST into React Compiler's primary intermediate representation, HIR (High-level Intermediate Representation). This phase is primarily based on the AST itself, but currently leans on Babel to resolve identifiers. The HIR preserves the precise order-of-evaluation semantics of JavaScript, resolves break/continue to their jump points, etc. The resulting HIR forms a control-flow graph of basic blocks, each of which contains zero or more consecutive instructions followed by a terminal. The basic blocks are stored in reverse postorder, such that forward iteration of the blocks allows predecessors to be visited before successors _unless_ there is a "back edge" (ie a loop).
+- **SSA Conversion** (EnterSSA): The HIR is converted to HIR form, such that all Identifiers in the HIR are updated to an SSA-based identifier.
+- Validation: We run various validation passes to check that the input is valid React, ie that it does not break the rules. This includes looking for conditional hook calls, unconditional setState calls, etc.
+- **Optimization**: Various passes such as dead code elimination and constant propagation can generally improve performance and reduce the amount of instructions to be optimized later.
+- **Type Inference** (InferTypes): We run a conservative type inference pass to identify certain key types of data that may appear in the program that are relevant for further analysis, such as which values are hooks, primitives, etc. 
+- **Inferring Reactive Scopes**: Several passes are involved in determining groups of values that are created/mutated together and the set of instructions involved in creating/mutating those values. We call these groups "reactive scopes", and each can have one or more declarations (or occasionally a reassignment).
+- **Constructing/Optimizing Reactive Scopes**: Once the compiler determines the set of reactive scopes, it then transforms the program to make these scopes explicit in the HIR. The code is later converted to a ReactiveFunction, which is a hybrid of the HIR and an AST. Scopes are further pruned and transformed. For example, the compiler cannot make hook calls conditional, so any reactive scopes that contain a hook call must be pruned. If two consecutive scopes will always invalidate together, we attempt to merge them to reduce overhead, etc.
+- **Codegen**: Finally, the ReactiveFunction hybrid HIR/AST is converted back to a raw Babel AST node, and returned to the Babel plugin.
+- **Babel Plugin**: The Babel plugin replaces the original node with the new version.
+
+The ESLint plugin works similarly. For now, it effectively invokes the Babel plugin on the code and reports back a subset of the errors. The compiler can report a variety of errors, including that the code is simply invalid JavaScript, but the ESLint plugin filters to only show the React-specific errors.
diff --git a/compiler/docs/DEVELOPMENT_GUIDE.md b/compiler/docs/DEVELOPMENT_GUIDE.md
new file mode 100644
index 00000000000..af3973fada8
--- /dev/null
+++ b/compiler/docs/DEVELOPMENT_GUIDE.md
@@ -0,0 +1,25 @@
+# React Compiler Development Guide
+
+Note: for general notes about contributing, see the [CONTRIBUTING.md](../../CONTRIBUTING.md).
+
+## Compiler Development
+
+For general compiler development we recommend the following workflow:
+
+```sh
+# Install dependencies
+yarn
+
+# build the custom test runner
+yarn snap:build
+
+# Run the primary tests in watch mode
+yarn snap --watch
+```
+
+`snap` is our custom test runner, which creates "golden" test files that have the expected output for each input fixture, as well as the results of executing a specific input (or sequence of inputs) in both the uncompiled and compiler versions of the input. 
+
+When contributing changes, we prefer to:
+* Add one or more fixtures that demonstrate the current compiled output for a particular combination of input and configuration. Send this as a first PR.
+* Then, make changes to the compiler that achieve the desired output for those examples. Commit both the output changes and the corresponding compiler changes in a second PR.
+
diff --git a/compiler/fixtures/.gitkeep b/compiler/fixtures/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/compiler/package.json b/compiler/package.json
new file mode 100644
index 00000000000..4492b702108
--- /dev/null
+++ b/compiler/package.json
@@ -0,0 +1,52 @@
+{
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git"
+  },
+  "scripts": {
+    "copyright": "node scripts/copyright.js",
+    "hash": "scripts/hash.sh",
+    "start": "yarn workspace playground run start",
+    "next": "yarn workspace playground run dev",
+    "build": "yarn workspaces run build",
+    "dev": "cd apps/playground && yarn dev",
+    "test": "yarn workspaces run test",
+    "snap": "yarn workspace babel-plugin-react-compiler run snap",
+    "snap:build": "yarn workspace snap run build",
+    "npm:publish": "node scripts/release/publish",
+    "eslint-docs": "yarn workspace babel-plugin-react-compiler build && node scripts/build-eslint-docs.js"
+  },
+  "dependencies": {
+    "fs-extra": "^4.0.2",
+    "react-is": "0.0.0-experimental-4beb1fd8-20241118"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.26.0",
+    "@tsconfig/strictest": "^2.0.5",
+    "concurrently": "^7.4.0",
+    "esbuild": "^0.25.0",
+    "folder-hash": "^4.0.4",
+    "npm-dts": "^1.3.13",
+    "object-assign": "^4.1.1",
+    "ora": "5.4.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-hermes-parser": "^0.26.0",
+    "prompt-promise": "^1.0.3",
+    "rimraf": "^6.0.1",
+    "to-fast-properties": "^2.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.4.3",
+    "wait-on": "^7.2.0",
+    "yargs": "^17.7.2"
+  },
+  "resolutions": {
+    "@babel/types": "7.26.3"
+  },
+  "packageManager": "yarn@1.22.22"
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/README.md b/compiler/packages/babel-plugin-react-compiler/README.md
new file mode 100644
index 00000000000..37282975f2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/README.md
@@ -0,0 +1,5 @@
+# babel-plugin-react-compiler
+
+React Compiler is a compiler that optimizes React applications, ensuring that only the minimal parts of components and hooks will re-render when state changes. The compiler also validates that components and hooks follow the Rules of React.
+
+This package contains the React Compiler Babel plugin use in projects that make use of Babel. You can find instructions for using this plugin here: https://react.dev/learn/react-compiler
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md
new file mode 100644
index 00000000000..b5b3d8f46e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md
@@ -0,0 +1,157 @@
+# lower (BuildHIR)
+
+## File
+`src/HIR/BuildHIR.ts`
+
+## Purpose
+Converts a Babel AST function node into a High-level Intermediate Representation (HIR), which represents code as a control-flow graph (CFG) with basic blocks, instructions, and terminals. This is the first major transformation pass in the React Compiler pipeline, enabling precise expression-level memoization analysis.
+
+## Input Invariants
+- Input must be a valid Babel `NodePath<t.Function>` (FunctionDeclaration, FunctionExpression, or ArrowFunctionExpression)
+- The function must be a component or hook (determined by the environment)
+- Babel scope analysis must be available for binding resolution
+- An `Environment` instance must be provided with compiler configuration
+- Optional `bindings` map for nested function lowering (recursive calls)
+- Optional `capturedRefs` map for context variables captured from outer scope
+
+## Output Guarantees
+- Returns `Result<HIRFunction, CompilerError>` - either a successfully lowered function or compilation errors
+- The HIR function contains:
+  - A complete CFG with basic blocks (`body.blocks: Map<BlockId, BasicBlock>`)
+  - Each block has an array of instructions and exactly one terminal
+  - All control flow is explicit (if/else, loops, switch, logical operators, ternary)
+  - Parameters are converted to `Place` or `SpreadPattern`
+  - Context captures are tracked in `context` array
+  - Function metadata (id, async, generator, directives)
+- All identifiers get unique `IdentifierId` values
+- Instructions have placeholder instruction IDs (set to 0, assigned later)
+- Effects are null (populated by later inference passes)
+
+## Algorithm
+The lowering algorithm uses a recursive descent pattern with a `HIRBuilder` helper class:
+
+1. **Initialization**: Create an `HIRBuilder` with environment and optional bindings. Process captured context variables.
+
+2. **Parameter Processing**: For each function parameter:
+   - Simple identifiers: resolve binding and create Place
+   - Patterns (object/array): create temporary Place, then emit destructuring assignments
+   - Rest elements: wrap in SpreadPattern
+   - Unsupported: emit Todo error
+
+3. **Body Processing**:
+   - Arrow function expressions: lower body expression to temporary, emit implicit return
+   - Block statements: recursively lower each statement
+
+4. **Statement Lowering** (`lowerStatement`): Handle each statement type:
+   - **Control flow**: Create separate basic blocks for branches, loops connect back to conditional blocks
+   - **Variable declarations**: Create `DeclareLocal`/`DeclareContext` or `StoreLocal`/`StoreContext` instructions
+   - **Expressions**: Lower to temporary and discard result
+   - **Hoisting**: Detect forward references and emit `DeclareContext` for hoisted identifiers
+
+5. **Expression Lowering** (`lowerExpression`): Convert expressions to `InstructionValue`:
+   - **Identifiers**: Create `LoadLocal`, `LoadContext`, or `LoadGlobal` based on binding
+   - **Literals**: Create `Primitive` values
+   - **Operators**: Create `BinaryExpression`, `UnaryExpression` etc.
+   - **Calls**: Distinguish `CallExpression` vs `MethodCall` (member expression callee)
+   - **Control flow expressions**: Create separate value blocks for branches (ternary, logical, optional chaining)
+   - **JSX**: Lower to `JsxExpression` with lowered tag, props, and children
+
+6. **Block Management**: The builder maintains:
+   - A current work-in-progress block accumulating instructions
+   - Completed blocks map
+   - Scope stack for break/continue resolution
+   - Exception handler stack for try/catch
+
+7. **Termination**: Add implicit void return at end if no explicit return
+
+## Key Data Structures
+
+### HIRBuilder (from HIRBuilder.ts)
+- `#current: WipBlock` - Work-in-progress block being populated
+- `#completed: Map<BlockId, BasicBlock>` - Finished blocks
+- `#scopes: Array<Scope>` - Stack for break/continue target resolution (LoopScope, LabelScope, SwitchScope)
+- `#exceptionHandlerStack: Array<BlockId>` - Stack of catch handlers for try/catch
+- `#bindings: Bindings` - Map of variable names to their identifiers
+- `#context: Map<t.Identifier, SourceLocation>` - Captured context variables
+- Methods: `push()`, `reserve()`, `enter()`, `terminate()`, `terminateWithContinuation()`
+
+### Core HIR Types
+- **BasicBlock**: Contains `instructions: Array<Instruction>`, `terminal: Terminal`, `preds: Set<BlockId>`, `phis: Set<Phi>`, `kind: BlockKind`
+- **Instruction**: Contains `id`, `lvalue` (Place), `value` (InstructionValue), `effects` (null initially), `loc`
+- **Terminal**: Block terminator - `if`, `branch`, `goto`, `return`, `throw`, `for`, `while`, `switch`, `ternary`, `logical`, etc.
+- **Place**: Reference to a value - `{kind: 'Identifier', identifier, effect, reactive, loc}`
+- **InstructionValue**: The operation - `LoadLocal`, `StoreLocal`, `CallExpression`, `BinaryExpression`, `FunctionExpression`, etc.
+
+### Block Kinds
+- `block` - Regular sequential block
+- `loop` - Loop header/test block
+- `value` - Block that produces a value (ternary/logical branches)
+- `sequence` - Sequence expression block
+- `catch` - Exception handler block
+
+## Edge Cases
+
+1. **Hoisting**: Forward references to `let`/`const`/`function` declarations emit `DeclareContext` before the reference, enabling correct temporal dead zone handling
+
+2. **Context Variables**: Variables captured by nested functions use `LoadContext`/`StoreContext` instead of `LoadLocal`/`StoreLocal`
+
+3. **For-of/For-in Loops**: Synthesize iterator instructions (`GetIterator`, `IteratorNext`, `NextPropertyOf`)
+
+4. **Optional Chaining**: Creates nested `OptionalTerminal` structures with short-circuit branches
+
+5. **Logical Expressions**: Create branching structures where left side stores to temporary, right side only evaluated if needed
+
+6. **Try/Catch**: Adds `MaybeThrowTerminal` after each instruction in try block, modeling potential control flow to handler
+
+7. **JSX in fbt**: Tracks `fbtDepth` counter to handle whitespace differently in fbt/fbs tags
+
+8. **Unsupported Syntax**: `var` declarations, `with` statements, inline `class` declarations, `eval` - emit appropriate errors
+
+## TODOs
+- `returnTypeAnnotation: null, // TODO: extract the actual return type node if present`
+- `TODO(gsn): In the future, we could only pass in the context identifiers that are actually used by this function and its nested functions`
+- Multiple `// TODO remove type cast` in destructuring pattern handling
+- `// TODO: should JSX namespaced names be handled here as well?`
+
+## Example
+Input JavaScript:
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+```
+
+Output HIR (simplified):
+```
+foo(<unknown> x$0, <unknown> y$1): <unknown> $12
+bb0 (block):
+  [1] <unknown> $6 = LoadLocal <unknown> x$0
+  [2] If (<unknown> $6) then:bb2 else:bb1 fallthrough=bb1
+
+bb2 (block):
+  predecessor blocks: bb0
+  [3] <unknown> $2 = LoadGlobal(module) foo
+  [4] <unknown> $3 = false
+  [5] <unknown> $4 = LoadLocal <unknown> y$1
+  [6] <unknown> $5 = Call <unknown> $2(<unknown> $3, <unknown> $4)
+  [7] Return Explicit <unknown> $5
+
+bb1 (block):
+  predecessor blocks: bb0
+  [8] <unknown> $7 = LoadLocal <unknown> y$1
+  [9] <unknown> $8 = 10
+  [10] <unknown> $9 = Binary <unknown> $7 * <unknown> $8
+  [11] <unknown> $10 = Array [<unknown> $9]
+  [12] Return Explicit <unknown> $10
+```
+
+Key observations:
+- The function has 3 basic blocks: entry (bb0), consequent (bb2), alternate/fallthrough (bb1)
+- The if statement creates an `IfTerminal` at the end of bb0
+- Each branch ends with its own `ReturnTerminal`
+- All values are stored in temporaries (`$N`) or named identifiers (`x$0`, `y$1`)
+- Instructions have sequential IDs within blocks
+- Types and effects are `<unknown>` at this stage (populated by later passes)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md
new file mode 100644
index 00000000000..d5e03b60d76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md
@@ -0,0 +1,182 @@
+# enterSSA
+
+## File
+`src/SSA/EnterSSA.ts`
+
+## Purpose
+Converts the HIR from a non-SSA form (where variables can be reassigned) into Static Single Assignment (SSA) form, where each variable is defined exactly once and phi nodes are inserted at control flow join points to merge values from different paths.
+
+## Input Invariants
+- The HIR must have blocks in reverse postorder (predecessors visited before successors, except for back-edges)
+- Block predecessor information (`block.preds`) must be populated correctly
+- The function's `context` array must be empty for the root function (outer function declarations)
+- Identifiers may be reused across multiple definitions/assignments (non-SSA form)
+
+## Output Guarantees
+- Each identifier has a unique `IdentifierId` - no identifier is defined more than once
+- All operand references use the SSA-renamed identifiers
+- Phi nodes are inserted at join points where values from different control flow paths converge
+- Function parameters are SSA-renamed
+- Nested functions (FunctionExpression, ObjectMethod) are recursively converted to SSA form
+- Context variables (captured from outer scopes) are handled specially and not redefined
+
+## Algorithm
+The pass uses the Braun et al. algorithm ("Simple and Efficient Construction of Static Single Assignment Form") with adaptations for handling loops and nested functions.
+
+### Key Steps:
+1. **Block Traversal**: Iterate through blocks in order (assumed reverse postorder from previous passes)
+2. **Definition Tracking**: Maintain a per-block `defs` map from original identifiers to their SSA-renamed versions
+3. **Renaming**:
+   - When a value is **defined** (lvalue), create a new SSA identifier with fresh `IdentifierId`
+   - When a value is **used** (operand), look up the current SSA identifier via `getIdAt`
+4. **Phi Node Insertion**: When looking up an identifier at a block with multiple predecessors:
+   - If all predecessors have been visited, create a phi node collecting values from each predecessor
+   - If some predecessors are unvisited (back-edge/loop), create an "incomplete phi" that will be fixed later
+5. **Incomplete Phi Resolution**: When all predecessors of a block are finally visited, fix any incomplete phi nodes by populating their operands
+6. **Nested Function Handling**: Recursively apply SSA transformation to nested functions, temporarily adding a fake predecessor edge to enable identifier lookup from the enclosing scope
+
+### Phi Node Placement Logic (`getIdAt`):
+- If the identifier is defined locally in the current block, return it
+- If at entry block with no predecessors and not found, mark as unknown (global)
+- If some predecessors are unvisited (loop), create incomplete phi
+- If exactly one predecessor, recursively look up in that predecessor
+- If multiple predecessors, create phi node with operands from all predecessors
+
+## Key Data Structures
+- **SSABuilder**: Main class managing the transformation
+  - `#states: Map<BasicBlock, State>` - Per-block state (defs map and incomplete phis)
+  - `unsealedPreds: Map<BasicBlock, number>` - Count of unvisited predecessors per block
+  - `#unknown: Set<Identifier>` - Identifiers assumed to be globals
+  - `#context: Set<Identifier>` - Context variables that should not be redefined
+- **State**: Per-block state containing:
+  - `defs: Map<Identifier, Identifier>` - Maps original identifiers to SSA-renamed versions
+  - `incompletePhis: Array<IncompletePhi>` - Phi nodes waiting for predecessor values
+- **IncompletePhi**: Tracks a phi node created before all predecessors were visited
+  - `oldPlace: Place` - Original place being phi'd
+  - `newPlace: Place` - SSA-renamed phi result place
+- **Phi**: The actual phi node in the HIR
+  - `place: Place` - The result of the phi
+  - `operands: Map<BlockId, Place>` - Maps predecessor block to the place providing the value
+
+## Edge Cases
+- **Loops (back-edges)**: When a variable is used in a loop header before the loop body assigns it, an incomplete phi is created and later fixed when the loop body block is visited
+- **Globals**: If an identifier is used but never defined (reaching the entry block without a definition), it's assumed to be a global and not renamed
+- **Context variables**: Variables captured from an outer function scope are tracked specially and not redefined when reassigned
+- **Nested functions**: Function expressions and object methods are processed recursively with a temporary predecessor edge linking them to the enclosing block
+
+## TODOs
+- `[hoisting] EnterSSA: Expected identifier to be defined before being used` - Handles cases where hoisting causes an identifier to be used before definition (throws a Todo error for graceful bailout)
+
+## Example
+
+### Input (simple reassignment with control flow):
+```javascript
+function foo() {
+  let y = 2;
+  if (y > 1) {
+    y = 1;
+  } else {
+    y = 2;
+  }
+  let x = y;
+}
+```
+
+### Before SSA (HIR):
+```
+bb0 (block):
+  [1] $0 = 2
+  [2] $2 = StoreLocal Let y$1 = $0
+  [3] $7 = LoadLocal y$1
+  [4] $8 = 1
+  [5] $9 = Binary $7 > $8
+  [6] If ($9) then:bb2 else:bb3 fallthrough=bb1
+
+bb2 (block):
+  predecessor blocks: bb0
+  [7] $3 = 1
+  [8] $4 = StoreLocal Reassign y$1 = $3  // Same y$1 reassigned
+  [9] Goto bb1
+
+bb3 (block):
+  predecessor blocks: bb0
+  [10] $5 = 2
+  [11] $6 = StoreLocal Reassign y$1 = $5  // Same y$1 reassigned
+  [12] Goto bb1
+
+bb1 (block):
+  predecessor blocks: bb2 bb3
+  [13] $10 = LoadLocal y$1                // Which y$1?
+  [14] $12 = StoreLocal Let x$11 = $10
+```
+
+### After SSA:
+```
+bb0 (block):
+  [1] $15 = 2
+  [2] $17 = StoreLocal Let y$16 = $15    // y$16: initial definition
+  [3] $18 = LoadLocal y$16
+  [4] $19 = 1
+  [5] $20 = Binary $18 > $19
+  [6] If ($20) then:bb2 else:bb3 fallthrough=bb1
+
+bb2 (block):
+  predecessor blocks: bb0
+  [7] $21 = 1
+  [8] $23 = StoreLocal Reassign y$22 = $21  // y$22: new SSA name
+  [9] Goto bb1
+
+bb3 (block):
+  predecessor blocks: bb0
+  [10] $24 = 2
+  [11] $26 = StoreLocal Reassign y$25 = $24  // y$25: new SSA name
+  [12] Goto bb1
+
+bb1 (block):
+  predecessor blocks: bb2 bb3
+  y$27: phi(bb2: y$22, bb3: y$25)           // PHI NODE: merges y$22 and y$25
+  [13] $28 = LoadLocal y$27                  // Uses phi result
+  [14] $30 = StoreLocal Let x$29 = $28
+```
+
+### Loop Example (while loop with back-edge):
+```javascript
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x = x + 1;
+  }
+  return x;
+}
+```
+
+### After SSA:
+```
+bb0 (block):
+  [1] $13 = 1
+  [2] $15 = StoreLocal Let x$14 = $13    // x$14: initial definition
+  [3] While test=bb1 loop=bb3 fallthrough=bb2
+
+bb1 (loop):
+  predecessor blocks: bb0 bb3
+  x$16: phi(bb0: x$14, bb3: x$23)        // PHI merges initial and loop-updated values
+  [4] $17 = LoadLocal x$16
+  [5] $18 = 10
+  [6] $19 = Binary $17 < $18
+  [7] Branch ($19) then:bb3 else:bb2
+
+bb3 (block):
+  predecessor blocks: bb1
+  [8] $20 = LoadLocal x$16               // Uses phi result
+  [9] $21 = 1
+  [10] $22 = Binary $20 + $21
+  [11] $24 = StoreLocal Reassign x$23 = $22  // x$23: new SSA name in loop body
+  [12] Goto(Continue) bb1
+
+bb2 (block):
+  predecessor blocks: bb1
+  [13] $25 = LoadLocal x$16              // Uses phi result
+  [14] Return Explicit $25
+```
+
+The phi node at `bb1` (the loop header) is initially created as an "incomplete phi" when first visited because `bb3` (the loop body) hasn't been visited yet. Once `bb3` is processed and its terminal is handled, the incomplete phi is fixed by calling `fixIncompletePhis` to populate the operand from `bb3`.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md
new file mode 100644
index 00000000000..fe774253ade
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md
@@ -0,0 +1,90 @@
+# eliminateRedundantPhi
+
+## File
+`src/SSA/EliminateRedundantPhi.ts`
+
+## Purpose
+Eliminates phi nodes whose operands are trivially the same, replacing all usages of the phi's output identifier with the single source identifier. This simplifies the HIR by removing unnecessary join points that do not actually merge distinct values.
+
+## Input Invariants
+- The function must be in SSA form (i.e., `enterSSA` has already run)
+- Blocks are in reverse postorder (guaranteed by the HIR structure)
+- Phi nodes exist at the start of blocks where control flow merges
+
+## Output Guarantees
+- All redundant phi nodes are removed from the HIR
+- All references to eliminated phi identifiers are rewritten to the source identifier
+- Non-redundant phi nodes (those merging two or more distinct values) are preserved
+- Nested function expressions (FunctionExpression, ObjectMethod) also have their redundant phis eliminated and contexts rewritten
+
+## Algorithm
+A phi node is considered redundant when:
+1. **All operands are the same identifier**: e.g., `x2 = phi(x1, x1, x1)` - the phi is replaced with `x1`
+2. **All operands are either the same identifier OR the phi's output**: e.g., `x2 = phi(x1, x2, x1, x2)` - this handles loop back-edges where the phi references itself
+
+The algorithm works as follows:
+1. Visit blocks in reverse postorder, building a rewrite table (`Map<Identifier, Identifier>`)
+2. For each phi node in a block:
+   - First rewrite operands using any existing rewrites (to handle cascading eliminations)
+   - Check if all operands (excluding self-references) point to the same identifier
+   - If so, add a mapping from the phi's output to that identifier and delete the phi
+3. After processing phis, rewrite all instruction lvalues, operands, and terminal operands
+4. For nested functions, recursively call `eliminateRedundantPhi` with shared rewrites
+5. If the CFG has back-edges (loops) and new rewrites were added, repeat the entire process
+
+The loop termination condition `rewrites.size > size && hasBackEdge` ensures:
+- Without loops: completes in a single pass (reverse postorder guarantees forward propagation)
+- With loops: repeats until no new rewrites are found (fixpoint)
+
+## Key Data Structures
+- **`Phi`** (from `src/HIR/HIR.ts`): Represents a phi node with:
+  - `place: Place` - the output identifier
+  - `operands: Map<BlockId, Place>` - maps predecessor block IDs to source places
+- **`rewrites: Map<Identifier, Identifier>`**: Maps eliminated phi outputs to their replacement identifier
+- **`visited: Set<BlockId>`**: Tracks visited blocks to detect back-edges (loops)
+
+## Edge Cases
+- **Loop back-edges**: When a block has a predecessor that hasn't been visited yet (in reverse postorder), that predecessor is a back-edge. The algorithm handles self-referential phis like `x2 = phi(x1, x2)` by ignoring operands equal to the phi's output.
+- **Cascading eliminations**: When one phi's output is used in another phi's operands, the algorithm rewrites operands before checking redundancy, enabling transitive elimination in a single pass (for non-loop cases).
+- **Nested functions**: FunctionExpression and ObjectMethod values contain nested HIR that may have their own phis. The algorithm recursively processes these with a shared rewrite table, ensuring context captures are also rewritten.
+- **Empty phi check**: The algorithm includes an invariant check that phi operands are never empty (which would be invalid HIR).
+
+## TODOs
+(None found in the source code)
+
+## Example
+
+Consider this fixture from `rewrite-phis-in-lambda-capture-context.js`:
+
+```javascript
+function Component() {
+  const x = 4;
+  const get4 = () => {
+    while (bar()) {
+      if (baz) { bar(); }
+    }
+    return () => x;
+  };
+  return get4;
+}
+```
+
+**After SSA pass**, the inner function has redundant phis due to the loop:
+
+```
+bb2 (loop):
+  predecessor blocks: bb1 bb5
+  x$29: phi(bb1: x$21, bb5: x$30)  // Loop header phi
+  ...
+bb5 (block):
+  predecessor blocks: bb6 bb4
+  x$30: phi(bb6: x$29, bb4: x$29)  // Redundant: both operands are x$29
+  ...
+```
+
+**After EliminateRedundantPhi**:
+- `x$30 = phi(x$29, x$29)` is eliminated because both operands are `x$29`
+- `x$29 = phi(x$21, x$30)` becomes `x$29 = phi(x$21, x$29)` after rewriting, which is also redundant (one operand is the phi itself, the other is `x$21`)
+- Both phis are eliminated, and all uses of `x$29` and `x$30` are rewritten to `x$21`
+
+The result: the context capture `@context[x$29]` becomes `@context[x$21]`, correctly propagating that `x` is never modified inside the loop.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md
new file mode 100644
index 00000000000..36e57abe03a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md
@@ -0,0 +1,110 @@
+# constantPropagation
+
+## File
+`src/Optimization/ConstantPropagation.ts`
+
+## Purpose
+Applies Sparse Conditional Constant Propagation (SCCP) to fold compile-time evaluable expressions to constant values, propagate those constants through the program, and eliminate unreachable branches when conditionals have known constant values.
+
+## Input Invariants
+- HIR must be in SSA form (runs after `enterSSA`)
+- Redundant phi nodes should be eliminated (runs after `eliminateRedundantPhi`)
+- Consistent identifiers must be ensured (`assertConsistentIdentifiers`)
+- Terminal successors must exist (`assertTerminalSuccessorsExist`)
+
+## Output Guarantees
+- Instructions with compile-time evaluable operands are replaced with `Primitive` constants
+- `ComputedLoad`/`ComputedStore` with constant string/number properties are converted to `PropertyLoad`/`PropertyStore`
+- `LoadLocal` and `StoreLocal` propagate known constant values
+- `IfTerminal` with constant boolean test values are replaced with `goto` terminals
+- Unreachable blocks are removed and the CFG is minimized
+- Phi nodes with unreachable predecessor operands are pruned
+- Nested functions (`FunctionExpression`, `ObjectMethod`) are recursively processed
+
+## Algorithm
+The pass uses Sparse Conditional Constant Propagation (SCCP) with fixpoint iteration:
+
+1. **Data Structure**: A `Constants` map (`Map<IdentifierId, Constant>`) tracks known constant values (either `Primitive` or `LoadGlobal`)
+
+2. **Single Pass per Iteration**: Visits all blocks in order:
+   - Evaluates phi nodes - if all operands have the same constant value, the phi result is constant
+   - Evaluates instructions - replaces evaluable expressions with constants
+   - Evaluates terminals - if an `IfTerminal` test is a constant, replaces it with a `goto`
+
+3. **Fixpoint Loop**: If any terminals changed (branch elimination):
+   - Recomputes block ordering (`reversePostorderBlocks`)
+   - Removes unreachable code (`removeUnreachableForUpdates`, `removeDeadDoWhileStatements`, `removeUnnecessaryTryCatch`)
+   - Renumbers instructions (`markInstructionIds`)
+   - Updates predecessors (`markPredecessors`)
+   - Prunes phi operands from unreachable predecessors
+   - Eliminates newly-redundant phis (`eliminateRedundantPhi`)
+   - Merges consecutive blocks (`mergeConsecutiveBlocks`)
+   - Repeats until no more changes
+
+4. **Instruction Evaluation**: Handles various instruction types:
+   - **Primitives/LoadGlobal**: Directly constant
+   - **BinaryExpression**: Folds arithmetic (`+`, `-`, `*`, `/`, `%`, `**`), bitwise (`|`, `&`, `^`, `<<`, `>>`, `>>>`), and comparison (`<`, `<=`, `>`, `>=`, `==`, `===`, `!=`, `!==`) operators
+   - **UnaryExpression**: Folds `!` (boolean negation) and `-` (numeric negation)
+   - **PostfixUpdate/PrefixUpdate**: Folds `++`/`--` on constant numbers
+   - **PropertyLoad**: Folds `.length` on constant strings
+   - **TemplateLiteral**: Folds template strings with constant interpolations
+   - **ComputedLoad/ComputedStore**: Converts to property access when property is constant string/number
+
+## Key Data Structures
+- `Constant = Primitive | LoadGlobal` - The lattice values (no top/bottom, absence means unknown)
+- `Constants = Map<IdentifierId, Constant>` - Maps identifier IDs to their known constant values
+- Uses HIR types: `Instruction`, `Phi`, `Place`, `Primitive`, `LoadGlobal`, `InstructionValue`
+
+## Edge Cases
+- **Last instruction of sequence blocks**: Skipped to preserve evaluation order
+- **Phi nodes with back-edges**: Single-pass analysis means loop back-edges won't have constant values propagated
+- **Template literals with Symbol**: Not folded (would throw at runtime)
+- **Template literals with objects/arrays**: Not folded (custom toString behavior)
+- **Division results**: Computed at compile time (may produce `NaN`, `Infinity`, etc.)
+- **LoadGlobal in phis**: Only propagated if all operands reference the same global name
+- **Nested functions**: Constants from outer scope are propagated into nested function expressions
+
+## TODOs
+- `// TODO: handle more cases` - The default case in `evaluateInstruction` has room for additional instruction types
+
+## Example
+
+**Input:**
+```javascript
+function Component() {
+  let a = 1;
+
+  let b;
+  if (a === 1) {
+    b = true;
+  } else {
+    b = false;
+  }
+
+  let c;
+  if (b) {
+    c = 'hello';
+  } else {
+    c = null;
+  }
+
+  return c;
+}
+```
+
+**After ConstantPropagation:**
+- `a === 1` evaluates to `true`
+- The `if (a === 1)` branch is eliminated, only consequent remains
+- `b` is known to be `true`
+- `if (b)` branch is eliminated, only consequent remains
+- `c` is known to be `'hello'`
+- All intermediate blocks are merged
+
+**Output:**
+```javascript
+function Component() {
+  return "hello";
+}
+```
+
+The pass performs iterative simplification: first iteration determines `a === 1` is `true` and eliminates that branch. The CFG is updated, phi for `b` is pruned to single operand making `b = true`. Second iteration uses `b = true` to eliminate the next branch. This continues until no more branches can be eliminated.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md
new file mode 100644
index 00000000000..d1bbb5b742f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md
@@ -0,0 +1,109 @@
+# deadCodeElimination
+
+## File
+`src/Optimization/DeadCodeElimination.ts`
+
+## Purpose
+Eliminates instructions whose values are unused, reducing generated code size. The pass performs mark-and-sweep analysis to identify and remove dead code while preserving side effects and program semantics.
+
+## Input Invariants
+- Must run after `InferMutationAliasingEffects` because "dead" code may still affect effect inference
+- HIR is in SSA form with phi nodes
+- Unreachable blocks are already pruned during HIR construction
+
+## Output Guarantees
+- All instructions with unused lvalues (that are safe to prune) are removed
+- Unused phi nodes are deleted
+- Unused context variables are removed from `fn.context`
+- Destructuring patterns are rewritten to remove unused bindings
+- `StoreLocal` instructions with unused initializers are converted to `DeclareLocal`
+
+## Algorithm
+Two-phase mark-and-sweep with fixed-point iteration for loops:
+
+**Phase 1: Mark (findReferencedIdentifiers)**
+1. Detect if function has back-edges (loops)
+2. Iterate blocks in reverse postorder (successors before predecessors) to visit usages before declarations
+3. For each block:
+   - Mark all terminal operands as referenced
+   - Process instructions in reverse order:
+     - If lvalue is used OR instruction is not pruneable, mark the lvalue and all operands as referenced
+     - Special case for `StoreLocal`: only mark initializer if the SSA lvalue is actually read
+   - Mark phi operands if the phi result is used
+4. If loops exist and new identifiers were marked, repeat until fixed point
+
+**Phase 2: Sweep**
+1. Remove unused phi nodes from each block
+2. Remove instructions with unused lvalues using `retainWhere`
+3. Rewrite retained instructions:
+   - **Array destructuring**: Replace unused elements with holes, truncate trailing holes
+   - **Object destructuring**: Remove unused properties (only if rest element is unused or absent)
+   - **StoreLocal**: Convert to `DeclareLocal` if initializer value is never read
+4. Remove unused context variables
+
+## Key Data Structures
+- **State class**: Tracks referenced identifiers
+  - `identifiers: Set<IdentifierId>` - SSA-specific usages
+  - `named: Set<string>` - Named variable usages (any version)
+  - `isIdOrNameUsed()` - Checks if identifier or any version of named variable is used
+  - `isIdUsed()` - Checks if specific SSA id is used
+- **hasBackEdge/findBlocksWithBackEdges**: Detect loops requiring fixed-point iteration
+
+## Edge Cases
+- **Preserved even if unused:**
+  - `debugger` statements (to not break debugging workflows)
+  - Call expressions and method calls (may have side effects)
+  - Await expressions
+  - Store operations (ComputedStore, PropertyStore, StoreGlobal)
+  - Delete operations (ComputedDelete, PropertyDelete)
+  - Iterator operations (GetIterator, IteratorNext, NextPropertyOf)
+  - Context operations (LoadContext, DeclareContext, StoreContext)
+  - Memoization markers (StartMemoize, FinishMemoize)
+
+- **SSR mode special case:**
+  - In SSR mode, unused `useState`, `useReducer`, and `useRef` hooks can be removed
+
+- **Object destructuring with rest:**
+  - Cannot remove unused properties if rest element is used (would change rest's value)
+
+- **Block value instructions:**
+  - Last instruction of value blocks (not 'block' kind) is never pruned as it's the block's value
+
+## TODOs
+- "TODO: we could be more precise and make this conditional on whether any arguments are actually modified" (for mutating instructions)
+
+## Example
+
+**Input:**
+```javascript
+function Component(props) {
+  const _ = 42;
+  return props.value;
+}
+```
+
+**After DeadCodeElimination:**
+The `const _ = 42` assignment is removed since `_` is never used:
+```javascript
+function Component(props) {
+  return props.value;
+}
+```
+
+**Array destructuring example:**
+
+Input:
+```javascript
+function foo(props) {
+  const [x, unused, y] = props.a;
+  return x + y;
+}
+```
+
+Output (middle element becomes a hole):
+```javascript
+function foo(props) {
+  const [x, , y] = props.a;
+  return x + y;
+}
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md
new file mode 100644
index 00000000000..eca37e88431
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md
@@ -0,0 +1,127 @@
+# inferTypes
+
+## File
+`src/TypeInference/InferTypes.ts`
+
+## Purpose
+Infers types for all identifiers in the HIR by generating type equations and solving them using unification. This pass annotates identifiers with concrete types (Primitive, Object, Function) based on the operations performed on them and the types of globals/hooks they interact with.
+
+## Input Invariants
+- The HIR must be in SSA form (the pass runs after `enterSSA` and `eliminateRedundantPhi`)
+- Constant propagation has already run
+- Global declarations and hook shapes are available via the Environment
+
+## Output Guarantees
+- All identifier types are resolved from type variables (`Type`) to concrete types where possible
+- Phi nodes have their operand types unified to produce a single result type
+- Function return types are inferred from the unified types of all return statements
+- Property accesses on known objects/hooks resolve to the declared property types
+- Component props parameters are typed as `TObject<BuiltInProps>`
+- Component ref parameters are typed as `TObject<BuiltInUseRefId>`
+
+## Algorithm
+The pass uses a classic constraint-based type inference approach with three phases:
+
+1. **Constraint Generation (`generate`)**: Traverses all instructions and generates type equations:
+   - Primitives, literals, unary/binary operations -> `Primitive` type
+   - Hook/function calls -> Function type with fresh return type variable
+   - Property loads -> `Property` type that defers to object shape lookup
+   - Destructuring -> Property types for each extracted element
+   - Phi nodes -> `Phi` type with all operand types as candidates
+   - JSX -> `Object<BuiltInJsx>`
+   - Arrays -> `Object<BuiltInArray>`
+   - Objects -> `Object<BuiltInObject>`
+
+2. **Unification (`Unifier.unify`)**: Solves constraints by unifying type equations:
+   - Type variables are bound to concrete types via substitution
+   - Property types are resolved by looking up the object's shape
+   - Phi types are resolved by finding a common type among operands (or falling back to `Phi` if incompatible)
+   - Function types are unified by unifying their return types
+   - Occurs check prevents infinite types (cycles in type references)
+
+3. **Application (`apply`)**: Applies the computed substitutions to all identifiers in the HIR, replacing type variables with their resolved types.
+
+## Key Data Structures
+- **TypeVar** (`kind: 'Type'`): A type variable with a unique TypeId, used for unknowns
+- **Unifier**: Maintains a substitution map from TypeId to Type, with methods for unification and cycle detection
+- **TypeEquation**: A pair of types that should be equal, used as constraints
+- **PhiType** (`kind: 'Phi'`): Represents the join of multiple types from control flow merge points
+- **PropType** (`kind: 'Property'`): Deferred property lookup that resolves based on object shape
+- **FunctionType** (`kind: 'Function'`): Callable type with optional shapeId and return type
+- **ObjectType** (`kind: 'Object'`): Object with optional shapeId for shape lookup
+
+## Edge Cases
+
+### Phi Type Resolution
+When phi operands have incompatible types, the pass attempts to find a union:
+- `Union(Primitive | MixedReadonly) = MixedReadonly`
+- `Union(Array | MixedReadonly) = Array`
+- If no union is possible, the type remains as `Phi`
+
+### Ref-like Name Inference
+When `enableTreatRefLikeIdentifiersAsRefs` is enabled, property access on variables matching the pattern `/^(?:[a-zA-Z$_][a-zA-Z$_0-9]*)Ref$|^ref$/` with property name `current` infers:
+- Object type as `TObject<BuiltInUseRefId>`
+- Property type as `TObject<BuiltInRefValue>`
+
+### Cycle Detection
+The `occursCheck` method prevents infinite types by detecting when a type variable appears in its own substitution. When a cycle is detected, `tryResolveType` removes the cyclic reference from Phi operands.
+
+### Context Variables
+- `DeclareContext` and `LoadContext` generate no type equations (intentionally untyped)
+- `StoreContext` with `Const` kind does propagate the rvalue type to enable ref inference through context variables
+
+### Event Handler Inference
+When `enableInferEventHandlers` is enabled, JSX props starting with "on" (e.g., `onClick`) on built-in DOM elements (excluding web components with hyphens) are inferred as `Function<BuiltInEventHandlerId>`.
+
+## TODOs
+1. **Hook vs Function type ambiguity**:
+   > "TODO: callee could be a hook or a function, so this type equation isn't correct. We should change Hook to a subtype of Function or change unifier logic."
+
+2. **PropertyStore rvalue inference**:
+   > "TODO: consider using the rvalue type here" - Currently uses a dummy type for PropertyStore to avoid inferring rvalue types from lvalue assignments.
+
+## Example
+
+**Input (infer-phi-primitive.js):**
+```javascript
+function foo(a, b) {
+  let x;
+  if (a) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  let y = x;
+  return y;
+}
+```
+
+**Before InferTypes (SSA form):**
+```
+<unknown> x$26: phi(bb2: <unknown> x$21, bb3: <unknown> x$24)
+[10] <unknown> $27 = LoadLocal <unknown> x$26
+[11] <unknown> $29 = StoreLocal Let <unknown> y$28 = <unknown> $27
+```
+
+**After InferTypes:**
+```
+<unknown> x$26:TPrimitive: phi(bb2: <unknown> x$21:TPrimitive, bb3: <unknown> x$24:TPrimitive)
+[10] <unknown> $27:TPrimitive = LoadLocal <unknown> x$26:TPrimitive
+[11] <unknown> $29:TPrimitive = StoreLocal Let <unknown> y$28:TPrimitive = <unknown> $27:TPrimitive
+```
+
+The pass infers that:
+- Literals `1` and `2` are `TPrimitive`
+- The phi of two primitives is `TPrimitive`
+- Variables `x` and `y` are `TPrimitive`
+- The function return type is `TPrimitive`
+
+**Hook type inference example (useState):**
+```javascript
+const [x, setX] = useState(initialValue);
+```
+
+After InferTypes:
+- `useState` -> `TFunction<BuiltInUseState>:TObject<BuiltInUseState>`
+- Return value `$27` -> `TObject<BuiltInUseState>`
+- Destructured `setX` -> `TFunction<BuiltInSetState>:TPrimitive`
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md
new file mode 100644
index 00000000000..b86881163bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md
@@ -0,0 +1,84 @@
+# analyseFunctions
+
+## File
+`src/Inference/AnalyseFunctions.ts`
+
+## Purpose
+Recursively analyzes all nested function expressions and object methods in a function to infer their aliasing effect signatures, which describe how the function affects its captured variables when invoked.
+
+## Input Invariants
+- The HIR has been through SSA conversion and type inference
+- FunctionExpression and ObjectMethod instructions have an empty `aliasingEffects` array (`@aliasingEffects=[]`)
+- Context variables (captured variables from outer scope) exist on `fn.context` but do not have their effect populated
+
+## Output Guarantees
+- Every FunctionExpression and ObjectMethod has its `aliasingEffects` array populated with the effects the function performs when called (mutations, captures, aliasing to return value, etc.)
+- Each context variable's `effect` property is set to either `Effect.Capture` (if the variable is captured or mutated by the inner function) or `Effect.Read` (if only read)
+- Context variable mutable ranges are reset to `{start: 0, end: 0}` and scopes are set to `null` to prepare for the outer function's subsequent `inferMutationAliasingRanges` pass
+
+## Algorithm
+1. **Recursive traversal**: Iterates through all blocks and instructions looking for `FunctionExpression` or `ObjectMethod` instructions
+2. **Depth-first processing**: For each function expression found, calls `lowerWithMutationAliasing()` which:
+   - Recursively calls `analyseFunctions()` on the inner function (handles nested functions)
+   - Runs `inferMutationAliasingEffects()` on the inner function to determine effects
+   - Runs `deadCodeElimination()` to clean up
+   - Runs `inferMutationAliasingRanges()` to compute mutable ranges and extract externally-visible effects
+   - Runs `rewriteInstructionKindsBasedOnReassignment()` and `inferReactiveScopeVariables()`
+   - Stores the computed effects in `fn.aliasingEffects`
+3. **Context variable effect classification**: Scans the computed effects to determine which context variables are captured/mutated vs only read:
+   - Effects like `Capture`, `Alias`, `Assign`, `MaybeAlias`, `CreateFrom` mark the source as captured
+   - Mutation effects (`Mutate`, `MutateTransitive`, etc.) mark the target as captured
+   - Sets `operand.effect = Effect.Capture` or `Effect.Read` accordingly
+4. **Range reset**: Resets mutable ranges and scopes on context variables to prepare for outer function analysis
+
+## Key Data Structures
+- **HIRFunction.aliasingEffects**: Array of `AliasingEffect` storing the externally-visible behavior of a function when called
+- **Place.effect**: Effect enum value (`Capture` or `Read`) describing how a context variable is used
+- **AliasingEffect**: Union type describing data flow (Capture, Alias, Assign, etc.) and mutations (Mutate, MutateTransitive, etc.)
+- **FunctionExpression/ObjectMethod.loweredFunc.func**: The inner HIRFunction to analyze
+
+## Edge Cases
+- **Nested functions**: Handled via recursive call to `analyseFunctions()` before processing the current function - innermost functions are analyzed first
+- **ObjectMethod**: Treated identically to FunctionExpression
+- **Apply effects invariant**: The pass asserts that no `Apply` effects remain in the function's signature - these should have been resolved to more precise effects by `inferMutationAliasingRanges()`
+- **Conditional mutations**: Effects like `MutateTransitiveConditionally` are tracked - a function that conditionally mutates a captured variable will have that effect in its signature
+- **Immutable captures**: `ImmutableCapture`, `Freeze`, `Create`, `Impure`, `Render` effects do not contribute to marking context variables as `Capture`
+
+## TODOs
+- No TODO comments in the pass itself
+
+## Example
+Consider a function that captures and conditionally mutates a variable:
+
+```javascript
+function useHook(a, b) {
+  let z = {a};
+  let y = b;
+  let x = function () {
+    if (y) {
+      maybeMutate(z);  // Unknown function, may mutate z
+    }
+  };
+  return x;
+}
+```
+
+**Before AnalyseFunctions:**
+```
+Function @context[y$28, z$25] @aliasingEffects=[]
+```
+
+**After AnalyseFunctions:**
+```
+Function @context[read y$28, capture z$25] @aliasingEffects=[
+  MutateTransitiveConditionally z$25,
+  Create $14 = primitive
+]
+```
+
+The pass infers:
+- `y` is only read (used in the condition)
+- `z` is captured into the function and conditionally mutated transitively (because `maybeMutate()` is unknown)
+- The inner function's signature includes `MutateTransitiveConditionally z$25` to indicate this potential mutation
+
+This signature is then used by `InferMutationAliasingEffects` on the outer function to understand that creating this function captures `z`, and calling the function may mutate `z`.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md
new file mode 100644
index 00000000000..a8b488008e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md
@@ -0,0 +1,144 @@
+# inferMutationAliasingEffects
+
+## File
+`src/Inference/InferMutationAliasingEffects.ts`
+
+## Purpose
+Infers the mutation and aliasing effects for all instructions and terminals in the HIR, making the effects of built-in instructions/functions as well as user-defined functions explicit. These effects form the basis for subsequent analysis to determine the mutable range of each value in the program and for validation against invalid code patterns like mutating frozen values.
+
+## Input Invariants
+- HIR must be in SSA form (run after SSA pass)
+- Types must be inferred (run after InferTypes pass)
+- Functions must be analyzed (run after AnalyseFunctions pass) - this provides `aliasingEffects` on FunctionExpressions
+- Each instruction must have an lvalue (destination place)
+
+## Output Guarantees
+- Every instruction has an `effects` array (or null if no effects) containing `AliasingEffect` objects
+- Terminals that affect data flow (return, try/catch) have their `effects` populated
+- Each instruction's lvalue is guaranteed to be defined in the inference state after visiting
+- Effects describe: creation of values, data flow (Assign, Alias, Capture), mutations (Mutate, MutateTransitive), freezing, and errors (MutateFrozen, MutateGlobal, Impure)
+
+## Algorithm
+The pass uses abstract interpretation with the following key phases:
+
+1. **Initialization**:
+   - Create initial `InferenceState` mapping identifiers to abstract values
+   - Initialize context variables as `ValueKind.Context`
+   - Initialize parameters as `ValueKind.Frozen` (for top-level components/hooks) or `ValueKind.Mutable` (for function expressions)
+
+2. **Two-Phase Effect Processing**:
+   - **Phase 1 - Signature Computation**: For each instruction, compute a "candidate signature" based purely on instruction semantics and types (cached per instruction via `computeSignatureForInstruction`)
+   - **Phase 2 - Effect Application**: Apply the signature to the current abstract state via `applySignature`, which refines effects based on the actual runtime kinds of values
+
+3. **Fixed-Point Iteration**:
+   - Process blocks in a worklist, queuing successors after each block
+   - Merge states at control flow join points using lattice operations
+   - Iterate until no changes occur (max 100 iterations as safety limit)
+   - Phi nodes are handled by unioning the abstract values from all predecessors
+
+4. **Effect Refinement** (in `applyEffect`):
+   - `MutateConditionally` effects are dropped if value is not mutable
+   - `Capture` effects are downgraded to `ImmutableCapture` if source is frozen
+   - `Mutate` on frozen values becomes `MutateFrozen` error
+   - `Assign` from primitives/globals creates new values rather than aliasing
+
+## Key Data Structures
+
+### InferenceState
+Maintains two maps:
+- `#values: Map<InstructionValue, AbstractValue>` - Maps allocation sites to their abstract kind
+- `#variables: Map<IdentifierId, Set<InstructionValue>>` - Maps identifiers to the set of values they may point to (set to handle phi joins)
+
+### AbstractValue
+```typescript
+type AbstractValue = {
+  kind: ValueKind;
+  reason: ReadonlySet<ValueReason>;
+};
+```
+
+### ValueKind (lattice)
+```
+MaybeFrozen    <- top (unknown if frozen or mutable)
+    |
+  Frozen       <- immutable, cannot be mutated
+  Mutable      <- can be mutated locally
+  Context      <- mutable box (context variables)
+    |
+  Global       <- global value
+  Primitive    <- copy-on-write semantics
+```
+
+The `mergeValueKinds` function implements the lattice join:
+- `Frozen | Mutable -> MaybeFrozen`
+- `Context | Mutable -> Context`
+- `Context | Frozen -> MaybeFrozen`
+
+### AliasingEffect Types
+Key effect kinds handled:
+- **Create**: Creates a new value at a place
+- **Assign**: Direct assignment (pointer copy)
+- **Alias**: Mutation of destination implies mutation of source
+- **Capture**: Information flow (MutateTransitive propagates through)
+- **MaybeAlias**: Possible aliasing for unknown function returns
+- **Mutate/MutateTransitive**: Direct/transitive mutation
+- **MutateConditionally/MutateTransitiveConditionally**: Conditional versions
+- **Freeze**: Marks value as immutable
+- **Apply**: Function call with complex data flow
+
+## Edge Cases
+
+1. **Spread Destructuring from Props**: The `findNonMutatedDestructureSpreads` pre-pass identifies spread patterns from frozen values that are never mutated, allowing them to be treated as frozen.
+
+2. **Hoisted Context Declarations**: Special handling for variables declared with hoisting (`HoistedConst`, `HoistedFunction`, `HoistedLet`) to detect access before declaration.
+
+3. **Try-Catch Aliasing**: When a `maybe-throw` terminal is reached, call return values are aliased into the catch binding since exceptions can throw return values.
+
+4. **Function Expressions**: Functions are considered mutable only if they have mutable captures or tracked side effects (MutateFrozen, MutateGlobal, Impure).
+
+5. **Iterator Mutation**: Non-builtin iterators may alias their collection and mutation of the iterator is conditional.
+
+6. **Array.push and Similar**: Uses legacy signature system with `Store` effect on receiver and `Capture` of arguments.
+
+## TODOs
+- `// TODO: using InstructionValue as a bit of a hack, but it's pragmatic` - context variable initialization
+- `// TODO: call applyEffect() instead` - try-catch aliasing
+- `// TODO: make sure we're also validating against global mutations somewhere` - global mutation validation for effects/event handlers
+- `// TODO; include "render" here?` - whether to track Render effects in function hasTrackedSideEffects
+- `// TODO: consider using persistent data structures to make clone cheaper` - performance optimization for state cloning
+- `// TODO check this` and `// TODO: what kind here???` - DeclareLocal value kinds
+
+## Example
+
+For the code:
+```javascript
+const arr = [];
+arr.push({});
+arr.push(x, y);
+```
+
+After `InferMutationAliasingEffects`, the effects are:
+
+```
+[10] $39 = Array []
+    Create $39 = mutable           // Array literal creates mutable value
+
+[11] $41 = StoreLocal arr$40 = $39
+    Assign arr$40 = $39            // arr points to the array value
+    Assign $41 = $39
+
+[15] $45 = MethodCall $42.push($44)
+    Apply $45 = $42.$43($44)       // Records the call
+    Mutate $42                      // push mutates the array
+    Capture $42 <- $44             // {} is captured into array
+    Create $45 = primitive         // push returns number (length)
+
+[20] $50 = MethodCall $46.push($48, $49)
+    Apply $50 = $46.$47($48, $49)
+    Mutate $46                      // push mutates the array
+    Capture $46 <- $48             // x captured into array
+    Capture $46 <- $49             // y captured into array
+    Create $50 = primitive
+```
+
+The key insight is that `Mutate` effects extend the mutable range of the array, and `Capture` effects record data flow so that if the array is later frozen (e.g., returned from a component), the captured values are also considered frozen for validation purposes.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md
new file mode 100644
index 00000000000..769f386abe8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md
@@ -0,0 +1,149 @@
+# inferMutationAliasingRanges
+
+## File
+`src/Inference/InferMutationAliasingRanges.ts`
+
+## Purpose
+This pass builds an abstract model of the heap and interprets the effects of the given function to determine: (1) the mutable ranges of all identifiers, (2) the externally-visible effects of the function (mutations of params/context-vars, aliasing relationships), and (3) the legacy `Effect` annotation for each Place.
+
+## Input Invariants
+- InferMutationAliasingEffects must have already run, populating `instr.effects` on each instruction with aliasing/mutation effects
+- SSA form must be established (identifiers are in SSA)
+- Type inference has been run (InferTypes)
+- Functions have been analyzed (AnalyseFunctions)
+- Dead code elimination has been performed
+
+## Output Guarantees
+- Every identifier has a populated `mutableRange` (start:end instruction IDs)
+- Every Place has a legacy `Effect` annotation (Read, Capture, Store, Freeze, etc.)
+- The function's `aliasingEffects` array is populated with externally-visible effects (mutations of params/context-vars, aliasing between params/context-vars/return)
+- Validation errors are collected for invalid effects like `MutateFrozen` or `MutateGlobal`
+
+## Algorithm
+The pass operates in three main phases:
+
+**Part 1: Build Data Flow Graph and Infer Mutable Ranges**
+1. Creates an `AliasingState` which maintains a `Node` for each identifier
+2. Iterates through all blocks and instructions, processing effects in program order
+3. For each effect:
+   - `Create`/`CreateFunction`: Creates a new node in the graph
+   - `CreateFrom`/`Assign`/`Alias`: Adds alias edges between nodes (with ordering index)
+   - `MaybeAlias`: Adds conditional alias edges
+   - `Capture`: Adds capture edges (for transitive mutations)
+   - `Mutate*`: Queues mutations for later processing
+   - `Render`: Queues render effects for later processing
+4. Phi node operands are connected once their predecessor blocks have been visited
+5. After the graph is built, mutations are processed:
+   - Mutations propagate both forward (via edges) and backward (via aliases/captures)
+   - Each mutation extends the `mutableRange.end` of affected identifiers
+   - Transitive mutations also traverse capture edges backward
+   - `MaybeAlias` edges downgrade mutations to `Conditional`
+6. Render effects are processed to mark values as rendered
+
+**Part 2: Populate Legacy Per-Place Effects**
+- Sets legacy effects on lvalues and operands based on instruction effects and mutable ranges
+- Fixes up mutable range start values for identifiers that are mutated after creation
+
+**Part 3: Infer Externally-Visible Function Effects**
+- Creates a `Create` effect for the return value
+- Simulates transitive mutations of each param/context-var/return to detect capture relationships
+- Produces `Alias`/`Capture` effects showing data flow between params/context-vars/return
+
+## Key Data Structures
+
+### `AliasingState`
+The main state class maintaining the data flow graph:
+- `nodes: Map<Identifier, Node>` - Maps identifiers to their graph nodes
+
+### `Node`
+Represents an identifier in the data flow graph:
+```typescript
+type Node = {
+  id: Identifier;
+  createdFrom: Map<Identifier, number>;   // CreateFrom edges (source -> index)
+  captures: Map<Identifier, number>;       // Capture edges (source -> index)
+  aliases: Map<Identifier, number>;        // Alias/Assign edges (source -> index)
+  maybeAliases: Map<Identifier, number>;   // MaybeAlias edges (source -> index)
+  edges: Array<{index, node, kind}>;       // Forward edges to other nodes
+  transitive: {kind: MutationKind; loc} | null;  // Transitive mutation info
+  local: {kind: MutationKind; loc} | null;       // Local mutation info
+  lastMutated: number;                     // Index of last mutation affecting this node
+  mutationReason: MutationReason | null;   // Reason for mutation
+  value: {kind: 'Object'} | {kind: 'Phi'} | {kind: 'Function'; function: HIRFunction};
+  render: Place | null;                    // Render context if used in JSX
+};
+```
+
+### `MutationKind`
+Enum describing mutation certainty:
+```typescript
+enum MutationKind {
+  None = 0,
+  Conditional = 1,  // May mutate (e.g., via MaybeAlias or MutateConditionally)
+  Definite = 2,     // Definitely mutates
+}
+```
+
+## Edge Cases
+
+### Phi Nodes
+- Phi nodes are created as special `{kind: 'Phi'}` nodes
+- Phi operands from predecessor blocks are processed with pending edges until the predecessor is visited
+- When traversing "forwards" through edges and encountering a phi, backward traversal is stopped (prevents mutation from one phi input affecting other inputs)
+
+### Transitive vs Local Mutations
+- Local mutations (`Mutate`) only affect alias/assign edges backward
+- Transitive mutations (`MutateTransitive`) also affect capture edges backward
+- Both affect all forward edges
+
+### MaybeAlias
+- Mutations through MaybeAlias edges are downgraded to `Conditional`
+- This prevents false positive errors when we cannot be certain about aliasing
+
+### Function Values
+- Functions are tracked specially as `{kind: 'Function'}` nodes
+- When a function is mutated (transitively), errors from the function body are propagated
+- This handles cases where mutating a captured value in a function affects render safety
+
+### Render Effect Propagation
+- Render effects traverse backward through alias/capture/createFrom edges
+- Functions that have not been mutated are skipped during render traversal (except for JSX-returning functions)
+- Ref types (`isUseRefType`) stop render traversal
+
+## TODOs
+1. Assign effects should have an invariant that the node is not initialized yet. Currently `InferFunctionExpressionAliasingEffectSignatures` infers Assign effects that should be Alias, causing reinitialization.
+
+2. Phi place effects are not properly set today.
+
+3. Phi mutable range start calculation is imprecise - currently just sets it to the instruction before the block rather than computing the exact start.
+
+## Example
+
+Consider the following code:
+```javascript
+function foo() {
+  let a = {};   // Create a (instruction 1)
+  let b = {};   // Create b (instruction 3)
+  a = b;        // Assign a <- b (instruction 8)
+  mutate(a, b); // MutateTransitiveConditionally a, b (instruction 16)
+  return a;
+}
+```
+
+The pass builds a graph:
+1. Creates node for `{}` at instruction 1 (initially assigned to `a`)
+2. Creates node for `{}` at instruction 3 (initially assigned to `b`)
+3. At instruction 8, creates alias edge: `b -> a` with index 8
+4. At instruction 16, mutations are queued for `a` and `b`
+
+When processing the mutation of `a` at instruction 16:
+- Extends `a`'s mutableRange.end to 17
+- Traverses backward through alias edge to `b`, extends `b`'s mutableRange.end to 17
+- Since `a = b`, both objects must be considered mutable until instruction 17
+
+The output shows identifiers with range annotations like `$25[3:17]` meaning:
+- `$25` is the identifier
+- `3` is the instruction where it was created
+- `17` is the instruction after which it is no longer mutated
+
+For aliased values, the ranges are unified - all values that could be affected by a mutation have their ranges extended to include that mutation point.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md
new file mode 100644
index 00000000000..c0b8b974e21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md
@@ -0,0 +1,169 @@
+# inferReactivePlaces
+
+## File
+`src/Inference/InferReactivePlaces.ts`
+
+## Purpose
+Determines which `Place`s (identifiers and temporaries) in the HIR are **reactive** - meaning they may *semantically* change over the course of the component or hook's lifetime. This information is critical for memoization: reactive places form the dependencies that, when changed, should invalidate cached values.
+
+A place is reactive if it derives from any source of reactivity:
+1. **Props** - Component parameters may change between renders
+2. **Hooks** - Hooks can access state or context which can change
+3. **`use` operator** - Can access context which may change
+4. **Mutation with reactive operands** - Values mutated in instructions that have reactive operands become reactive themselves
+5. **Conditional assignment based on reactive control flow** - Values assigned in branches controlled by reactive conditions become reactive
+
+## Input Invariants
+- HIR is in SSA form with phi nodes at join points
+- `inferMutationAliasingEffects` and `inferMutationAliasingRanges` have run, establishing:
+  - Effect annotations on operands (Effect.Capture, Effect.Store, Effect.Mutate, etc.)
+  - Mutable ranges on identifiers
+  - Aliasing relationships captured by `findDisjointMutableValues`
+- All operands have known effects (asserts on `Effect.Unknown`)
+
+## Output Guarantees
+- Every reactive Place has `place.reactive = true`
+- Reactivity is transitively complete (derived from reactive → reactive)
+- All identifiers in a mutable alias group share reactivity
+- Reactivity is propagated to operands used within nested function expressions
+
+## Algorithm
+The algorithm uses **fixpoint iteration** to propagate reactivity forward through the control-flow graph:
+
+### Initialization
+1. Create a `ReactivityMap` backed by disjoint sets of mutably-aliased identifiers
+2. Mark all function parameters as reactive (props are reactive by definition)
+3. Create a `ControlDominators` helper to identify blocks controlled by reactive conditions
+
+### Fixpoint Loop
+Iterate until no changes occur:
+
+For each block:
+1. **Phi Nodes**: Mark phi nodes reactive if:
+   - Any operand is reactive, OR
+   - Any predecessor block is controlled by a reactive condition (control-flow dependency)
+
+2. **Instructions**: For each instruction:
+   - Track stable identifier sources (for hooks like `useRef`, `useState` dispatch)
+   - Check if any operand is reactive
+   - Hook calls and `use` operator are sources of reactivity
+   - If instruction has reactive input:
+     - Mark lvalues reactive (unless they are known-stable like `setState` functions)
+   - If instruction has reactive input OR is in reactive-controlled block:
+     - Mark mutable operands (Capture, Store, Mutate effects) as reactive
+
+3. **Terminals**: Check terminal operands for reactivity
+
+### Post-processing
+Propagate reactivity to inner functions (nested `FunctionExpression` and `ObjectMethod`).
+
+## Key Data Structures
+
+### ReactivityMap
+```typescript
+class ReactivityMap {
+  hasChanges: boolean = false;           // Tracks if fixpoint changed
+  reactive: Set<IdentifierId> = new Set(); // Set of reactive identifiers
+  aliasedIdentifiers: DisjointSet<Identifier>; // Mutable alias groups
+}
+```
+- Uses disjoint sets so that when one identifier in an alias group becomes reactive, they all are effectively reactive
+- `isReactive(place)` checks and marks `place.reactive = true` as a side effect
+- `snapshot()` resets change tracking and returns whether changes occurred
+
+### StableSidemap
+```typescript
+class StableSidemap {
+  map: Map<IdentifierId, {isStable: boolean}> = new Map();
+}
+```
+Tracks sources of stability (e.g., `useState()[1]` dispatch function). Forward data-flow analysis that:
+- Records hook calls that return stable types
+- Propagates stability through PropertyLoad and Destructure from stable containers
+- Propagates through LoadLocal and StoreLocal
+
+### ControlDominators
+Uses post-dominator frontier analysis to determine which blocks are controlled by reactive branch conditions.
+
+## Edge Cases
+
+### Backward Reactivity Propagation via Mutable Aliasing
+```javascript
+const x = [];
+const z = [x];
+x.push(props.input);
+return <div>{z}</div>;
+```
+Here `z` aliases `x` which is later mutated with reactive data. The disjoint set ensures `z` becomes reactive even though the mutation happens after its creation.
+
+### Stable Types Are Not Reactive
+```javascript
+const [state, setState] = useState();
+// setState is stable - not marked reactive despite coming from reactive hook
+```
+The `StableSidemap` tracks these and skips marking them reactive.
+
+### Ternary with Stable Values Still Reactive
+```javascript
+props.cond ? setState1 : setState2
+```
+Even though both branches are stable types, the result depends on reactive control flow, so it cannot be marked non-reactive just based on type.
+
+### Phi Nodes with Reactive Predecessors
+When a phi's predecessor block is controlled by a reactive condition, the phi becomes reactive even if its operands are all non-reactive constants.
+
+## TODOs
+No explicit TODO comments are present in the source file. However, comments note:
+
+- **ComputedLoads not handled for stability**: Only PropertyLoad propagates stability from containers, not ComputedLoad. The comment notes this is safe because stable containers have differently-typed elements, but ComputedLoad handling could be added.
+
+## Example
+
+### Fixture: `reactive-dependency-fixpoint.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x = 0;
+  let y = 0;
+  while (x === 0) {
+    x = y;
+    y = props.value;
+  }
+  return [x];
+}
+```
+
+**Before InferReactivePlaces:**
+```
+bb1 (loop):
+  store x$26:TPhi:TPhi: phi(bb0: read x$21:TPrimitive, bb3: read x$32:TPhi)
+  store y$30:TPhi:TPhi: phi(bb0: read y$24:TPrimitive, bb3: read y$37)
+  ...
+bb3 (block):
+  [12] mutate? $35 = LoadLocal read props$19
+  [13] mutate? $36 = PropertyLoad read $35.value
+  [14] mutate? $38 = StoreLocal Reassign mutate? y$37 = read $36
+```
+
+**After InferReactivePlaces:**
+```
+bb1 (loop):
+  store x$26:TPhi{reactive}:TPhi: phi(bb0: read x$21:TPrimitive, bb3: read x$32:TPhi{reactive})
+  store y$30:TPhi{reactive}:TPhi: phi(bb0: read y$24:TPrimitive, bb3: read y$37{reactive})
+  [6] mutate? $27:TPhi{reactive} = LoadLocal read x$26:TPhi{reactive}
+  ...
+bb3 (block):
+  [12] mutate? $35{reactive} = LoadLocal read props$19{reactive}
+  [13] mutate? $36{reactive} = PropertyLoad read $35{reactive}.value
+  [14] mutate? $38{reactive} = StoreLocal Reassign mutate? y$37{reactive} = read $36{reactive}
+```
+
+**Key observations:**
+- `props$19` is marked `{reactive}` as a function parameter
+- The reactivity propagates through the loop:
+  - First iteration: `y$37` becomes reactive from `props.value`
+  - Second iteration: `x$32` becomes reactive from `y$30` (which is reactive via the phi from `y$37`)
+  - The phi nodes `x$26` and `y$30` become reactive because their bb3 operands are reactive
+- The fixpoint algorithm handles this backward propagation through the loop correctly
+- The final output `$40` is reactive, so the array `[x]` will be memoized with `x` as a dependency
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md
new file mode 100644
index 00000000000..e8a480b115f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md
@@ -0,0 +1,176 @@
+# inferReactiveScopeVariables
+
+## File
+`src/ReactiveScopes/InferReactiveScopeVariables.ts`
+
+## Purpose
+This is the **1st of 4 passes** that determine how to break a React function into discrete reactive scopes (independently memoizable units of code). Its specific responsibilities are:
+
+1. **Identify operands that mutate together** - Variables that are mutated in the same instruction must be placed in the same reactive scope
+2. **Assign a unique ReactiveScope to each group** - Each disjoint set of co-mutating identifiers gets assigned a unique ScopeId
+3. **Compute the mutable range** - The scope's range is computed as the union of all member identifiers' mutable ranges
+
+The pass does NOT determine which instructions compute each scope, only which variables belong together.
+
+## Input Invariants
+- `InferMutationAliasingEffects` has run - Effects describe mutations, captures, and aliasing
+- `InferMutationAliasingRanges` has run - Each identifier has a valid `mutableRange` property
+- `InferReactivePlaces` has run - Places are marked as reactive or not
+- `RewriteInstructionKindsBasedOnReassignment` has run - Let/Const properly determined
+- All instructions have been numbered with valid `InstructionId` values
+- Phi nodes are properly constructed at block join points
+
+## Output Guarantees
+- Each identifier that is part of a mutable group has its `identifier.scope` property set to a `ReactiveScope` object
+- All identifiers in the same scope share the same `ReactiveScope` reference
+- The scope's `range` is the union (min start, max end) of all member mutable ranges
+- The scope's `range` is validated to be within [1, maxInstruction+1]
+- Identifiers that only have single-instruction lifetimes (read once) may not be assigned to a scope unless they allocate
+
+## Algorithm
+
+### Phase 1: Find Disjoint Mutable Values (`findDisjointMutableValues`)
+
+Uses a Union-Find (Disjoint Set) data structure to group identifiers that mutate together:
+
+1. **Handle Phi Nodes**: For each phi in each block:
+   - If the phi's result is mutated after creation (mutableRange.end > first instruction in block), union the phi with all its operands
+   - This ensures values that flow through control flow and are later mutated are grouped together
+
+2. **Handle Instructions**: For each instruction:
+   - Collect mutable operands based on instruction type:
+     - If lvalue has extended mutable range OR instruction may allocate, include lvalue
+     - For StoreLocal/StoreContext: Include lvalue if it has extended mutable range, include value if mutable
+     - For Destructure: Include each pattern operand with extended range, include source if mutable
+     - For MethodCall: Include all mutable operands plus the computed property (to keep method resolution in same scope)
+     - For other instructions: Include all mutable operands
+   - Exclude global variables (mutableRange.start === 0) since they cannot be recreated
+   - Union all collected operands together
+
+### Phase 2: Assign Scopes
+
+1. Iterate over all identifiers in the disjoint set using `forEach(item, groupIdentifier)`
+2. For each unique group, create a new ReactiveScope:
+   - Generate a unique ScopeId from the environment
+   - Initialize range from the first member's mutableRange
+   - Set up empty dependencies, declarations, reassignments sets
+3. For subsequent members of the same group:
+   - Expand the scope's range to encompass the member's mutableRange
+   - Merge source locations
+4. Assign the scope to each identifier: `identifier.scope = scope`
+5. Update each identifier's mutableRange to match the scope's range
+
+**Validation**: After scope assignment, validate that all scopes have valid ranges within [1, maxInstruction+1].
+
+## Key Data Structures
+
+### DisjointSet<Identifier>
+A Union-Find data structure optimized for grouping items into disjoint sets:
+
+```typescript
+class DisjointSet<T> {
+  #entries: Map<T, T>;  // Maps each item to its parent (root points to self)
+
+  union(items: Array<T>): void;     // Merge items into one set
+  find(item: T): T | null;          // Find the root of item's set (with path compression)
+  forEach(fn: (item, group) => void): void;  // Iterate all items with their group root
+}
+```
+
+Path compression is used during `find()` to flatten the tree structure, improving subsequent lookup performance.
+
+### ReactiveScope
+```typescript
+type ReactiveScope = {
+  id: ScopeId;
+  range: MutableRange;              // [start, end) instruction range
+  dependencies: Set<ReactiveScopeDependency>;  // Inputs (populated later)
+  declarations: Map<IdentifierId, ReactiveScopeDeclaration>;  // Outputs (populated later)
+  reassignments: Set<Identifier>;   // Reassigned variables (populated later)
+  earlyReturnValue: {...} | null;   // For scopes with early returns
+  merged: Set<ScopeId>;             // IDs of scopes merged into this one
+  loc: SourceLocation;
+};
+```
+
+## Edge Cases
+
+### Global Variables
+Excluded from scopes (mutableRange.start === 0) since they cannot be recreated during memoization.
+
+### Phi Nodes After Mutation
+When a phi's result is mutated after the join point, all phi operands must be in the same scope to ensure the mutation can be recomputed correctly.
+
+### MethodCall Property Resolution
+The computed property load for a method call is explicitly added to the same scope as the call itself.
+
+### Allocating Instructions
+Instructions that allocate (Array, Object, JSX, etc.) add their lvalue to the scope even if the lvalue has a single-instruction range.
+
+### Single-Instruction Ranges
+Values with range `[n, n+1)` (used exactly once) are only included if they allocate, otherwise they're just read.
+
+### enableForest Config
+When enabled, phi operands are unconditionally unioned with the phi result (even without mutation after the phi).
+
+## TODOs
+1. `// TODO: improve handling of module-scoped variables and globals` - The current approach excludes globals entirely, but a more nuanced handling could be beneficial.
+
+2. Known issue with aliasing and mutable lifetimes (from header comments):
+```javascript
+let x = {};
+let y = [];
+x.y = y; // RHS is not considered mutable here bc not further mutation
+mutate(x); // bc y is aliased here, it should still be considered mutable above
+```
+This suggests the pass may miss some co-mutation relationships when aliasing is involved.
+
+## Example
+
+### Fixture: `reactive-scope-grouping.js`
+
+**Input:**
+```javascript
+function foo() {
+  let x = {};
+  let y = [];
+  let z = {};
+  y.push(z);  // y and z co-mutate (z captured into y)
+  x.y = y;    // x and y co-mutate (y captured into x)
+  return x;
+}
+```
+
+**After InferReactiveScopeVariables:**
+```
+[1] mutate? $19_@0[1:14] = Object { }     // x's initial object, scope @0
+[2] store $21_@0[1:14] = StoreLocal x     // x in scope @0
+[3] mutate? $22_@1[3:11] = Array []       // y's array, scope @1
+[4] store $24_@1[3:11] = StoreLocal y     // y in scope @1
+[5] mutate? $25_@2 = Object { }           // z's object, scope @2
+[10] MethodCall y.push(z)                 // Mutates y, captures z
+[13] PropertyStore x.y = y                // Mutates x, captures y
+```
+
+The `y.push(z)` joins y and z into scope @1, and `x.y = y` joins x and y into scope @0. Because y is now in @0, and z was captured into y, ultimately x, y, and z all end up in the same scope @0.
+
+**Compiled Output:**
+```javascript
+function foo() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    const y = [];
+    const z = {};
+    y.push(z);
+    x.y = y;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+```
+
+All three objects (x, y, z) are created within the same memoization block because they co-mutate and could potentially alias each other.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md
new file mode 100644
index 00000000000..556a80783ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md
@@ -0,0 +1,151 @@
+# rewriteInstructionKindsBasedOnReassignment
+
+## File
+`src/SSA/RewriteInstructionKindsBasedOnReassignment.ts`
+
+## Purpose
+Rewrites the `InstructionKind` of variable declaration and assignment instructions to correctly reflect whether variables should be declared as `const` or `let` in the final output. It determines this based on whether a variable is subsequently reassigned after its initial declaration.
+
+The key insight is that this pass runs **after dead code elimination (DCE)**, so a variable that was originally declared with `let` in the source (because it was reassigned) may be converted to `const` if the reassignment was removed by DCE. However, variables originally declared as `const` cannot become `let`.
+
+## Input Invariants
+- SSA form: Each identifier has a unique `IdentifierId` and `DeclarationId`
+- Dead code elimination has run: Unused assignments have been removed
+- Mutation/aliasing inference complete: Runs after `InferMutationAliasingRanges` and `InferReactivePlaces` in the main pipeline
+- All instruction kinds are initially set (typically `Let` for variables that may be reassigned)
+
+## Output Guarantees
+- **First declaration gets `Const` or `Let`**: The first `StoreLocal` for a named variable is marked as:
+  - `InstructionKind.Const` if the variable is never reassigned after
+  - `InstructionKind.Let` if the variable has subsequent reassignments
+- **Reassignments marked as `Reassign`**: Any subsequent `StoreLocal` to the same `DeclarationId` is marked as `InstructionKind.Reassign`
+- **Destructure consistency**: All places in a destructuring pattern must have consistent kinds (all Const or all Reassign)
+- **Update operations trigger Let**: `PrefixUpdate` and `PostfixUpdate` operations (like `++x` or `x--`) mark the original declaration as `Let`
+
+## Algorithm
+
+1. **Initialize declarations map**: Create a `Map<DeclarationId, LValue | LValuePattern>` to track declared variables.
+
+2. **Seed with parameters and context**: Add all named function parameters and captured context variables to the map with kind `Let` (since they're already "declared" outside the function body).
+
+3. **Process blocks in order**: Iterate through all blocks and instructions:
+
+   - **DeclareLocal**: Record the declaration in the map (invariant: must not already exist)
+
+   - **StoreLocal**:
+     - If not in map: This is the first store, add to map with `kind = Const`
+     - If already in map: This is a reassignment. Update original declaration to `Let`, set current instruction to `Reassign`
+
+   - **Destructure**:
+     - For each operand in the pattern, check if it's already declared
+     - All operands must be consistent (all new declarations OR all reassignments)
+     - Set pattern kind to `Const` for new declarations, `Reassign` for existing ones
+
+   - **PrefixUpdate / PostfixUpdate**: Look up the declaration and mark it as `Let` (these always imply reassignment)
+
+## Key Data Structures
+
+```typescript
+// Main tracking structure
+const declarations = new Map<DeclarationId, LValue | LValuePattern>();
+
+// InstructionKind enum (from HIR.ts)
+enum InstructionKind {
+  Const = 'Const',      // const declaration
+  Let = 'Let',          // let declaration
+  Reassign = 'Reassign', // reassignment to existing binding
+  Catch = 'Catch',      // catch clause binding
+  HoistedLet = 'HoistedLet',     // hoisted let
+  HoistedConst = 'HoistedConst', // hoisted const
+  HoistedFunction = 'HoistedFunction', // hoisted function
+  Function = 'Function', // function declaration
+}
+```
+
+## Edge Cases
+
+### DCE Removes Reassignment
+A `let x = 0; x = 1;` where `x = 1` is unused becomes `const x = 0;` after DCE.
+
+### Destructuring with Mixed Operands
+The invariant checks ensure all operands in a destructure pattern are either all new declarations or all reassignments. Mixed cases cause a compiler error.
+
+### Value Blocks with DCE
+There's a TODO for handling reassignment in value blocks where the original declaration was removed by DCE.
+
+### Parameters and Context Variables
+These are pre-seeded as `Let` in the declarations map since they're conceptually "declared" at function entry.
+
+### Update Expressions
+`++x` and `x--` always mark the variable as `Let`, even if used inline.
+
+## TODOs
+```typescript
+CompilerError.invariant(block.kind !== 'value', {
+  reason: `TODO: Handle reassignment in a value block where the original
+           declaration was removed by dead code elimination (DCE)`,
+  ...
+});
+```
+
+This indicates an edge case where a destructuring reassignment occurs in a value block but the original declaration was eliminated by DCE. This is currently an invariant violation rather than handled gracefully.
+
+## Example
+
+### Fixture: `reassignment.js`
+
+**Input Source:**
+```javascript
+function Component(props) {
+  let x = [];
+  x.push(props.p0);
+  let y = x;
+
+  x = [];
+  let _ = <Component x={x} />;
+
+  y.push(props.p1);
+
+  return <Component x={x} y={y} />;
+}
+```
+
+**Before Pass (InferReactivePlaces output):**
+```
+[2] StoreLocal Let x$32 = $31      // x is initially marked Let
+[9] StoreLocal Let y$40 = $39      // y is initially marked Let
+[11] StoreLocal Reassign x$43 = $42  // reassignment already marked
+```
+
+**After Pass:**
+```
+[2] StoreLocal Let x$32 = $31      // x stays Let (has reassignment at line 11)
+[9] StoreLocal Const y$40 = $39    // y becomes Const (never reassigned)
+[11] StoreLocal Reassign x$43 = $42  // stays Reassign
+```
+
+**Final Generated Code:**
+```javascript
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1) {
+    let x = [];              // let because reassigned
+    x.push(props.p0);
+    const y = x;             // const because never reassigned
+    // ... x = t1; (reassignment)
+    y.push(props.p1);
+    t0 = <Component x={x} y={y} />;
+    // ...
+  }
+  return t0;
+}
+```
+
+The pass correctly identified that `x` needs `let` (since it's reassigned on line 6 of the source) while `y` can use `const` (it's never reassigned after initialization).
+
+## Where This Pass is Called
+
+1. **Main Pipeline** (`src/Entrypoint/Pipeline.ts:322`): Called after `InferReactivePlaces` and before `InferReactiveScopeVariables`.
+
+2. **AnalyseFunctions** (`src/Inference/AnalyseFunctions.ts:58`): Called when lowering inner function expressions as part of the function analysis phase.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md
new file mode 100644
index 00000000000..8fef182c087
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md
@@ -0,0 +1,131 @@
+# alignMethodCallScopes
+
+## File
+`src/ReactiveScopes/AlignMethodCallScopes.ts`
+
+## Purpose
+Ensures that `MethodCall` instructions and their associated `PropertyLoad` instructions (which load the method being called) have consistent scope assignments. The pass enforces one of two invariants:
+1. Both the MethodCall lvalue and the property have the **same** reactive scope
+2. **Neither** has a reactive scope
+
+This alignment is critical because the PropertyLoad and MethodCall are semantically a single operation (`receiver.method(args)`) and must be memoized together as a unit. If they had different scopes, the generated code would incorrectly try to memoize the property load separately from the method call, which could break correctness.
+
+## Input Invariants
+- The function has been converted to HIR form
+- `inferReactiveScopeVariables` has already run, assigning initial reactive scopes to identifiers based on mutation analysis
+- Each instruction's lvalue has an `identifier.scope` that is either a `ReactiveScope` or `null`
+- For `MethodCall` instructions, the `value.property` field contains a `Place` referencing the loaded method
+
+## Output Guarantees
+After this pass runs:
+- For every `MethodCall` instruction in the function:
+  - If the lvalue has a scope AND the property has a scope, they point to the **same merged scope**
+  - If only the lvalue has a scope, the property's scope is set to match the lvalue's scope
+  - If only the property has a scope, the property's scope is set to `null` (so neither has a scope)
+- Merged scopes have their `range` extended to cover the union of the original scopes' ranges
+- Nested functions (FunctionExpression, ObjectMethod) are recursively processed
+
+## Algorithm
+
+### Phase 1: Collect Scope Relationships
+```
+For each instruction in all blocks:
+  If instruction is a MethodCall:
+    lvalueScope = instruction.lvalue.identifier.scope
+    propertyScope = instruction.value.property.identifier.scope
+
+    If both have scopes:
+      Record that these scopes should be merged (using DisjointSet.union)
+    Else if only lvalue has scope:
+      Record that property should be assigned to lvalueScope
+    Else if only property has scope:
+      Record that property should be assigned to null (no scope)
+
+  If instruction is FunctionExpression or ObjectMethod:
+    Recursively process the nested function
+```
+
+### Phase 2: Merge Scopes
+```
+For each merged scope group:
+  Pick a "root" scope
+  Extend root's range to cover all merged scopes:
+    root.range.start = min(all scope start points)
+    root.range.end = max(all scope end points)
+```
+
+### Phase 3: Apply Changes
+```
+For each instruction:
+  If lvalue was recorded for remapping:
+    Set identifier.scope to the mapped value
+  Else if identifier has a scope that was merged:
+    Set identifier.scope to the merged root scope
+```
+
+## Key Data Structures
+
+1. **`scopeMapping: Map<IdentifierId, ReactiveScope | null>`**
+   - Maps property identifier IDs to their new scope assignment
+   - Value of `null` means the scope should be removed
+
+2. **`mergedScopes: DisjointSet<ReactiveScope>`**
+   - Union-find data structure tracking scopes that need to be merged
+   - Used when both MethodCall and property have different scopes
+
+3. **`ReactiveScope`** (from HIR)
+   - Contains `range: { start: InstructionId, end: InstructionId }`
+   - The range defines which instructions are part of the scope
+
+## Edge Cases
+
+### Both Have the Same Scope Already
+No action needed (implicit in the logic).
+
+### Nested Functions
+The pass recursively processes `FunctionExpression` and `ObjectMethod` instructions to handle closures.
+
+### Multiple MethodCalls Sharing Scopes
+The DisjointSet handles transitive merging - if A merges with B, and B merges with C, all three end up in the same scope.
+
+### Property Without Scope, MethodCall Without Scope
+No action needed (both already aligned at `null`).
+
+## TODOs
+There are no explicit TODO comments in the source code.
+
+## Example
+
+### Fixture: `alias-capture-in-method-receiver.js`
+
+**Source code:**
+```javascript
+function Component() {
+  let a = someObj();
+  let x = [];
+  x.push(a);
+  return [x, a];
+}
+```
+
+**Before AlignMethodCallScopes:**
+```
+[7] store $24_@1[4:10]:TFunction = PropertyLoad capture $23_@1.push
+[9] mutate? $26:TPrimitive = MethodCall store $23_@1.read $24_@1(capture $25)
+```
+- PropertyLoad result `$24_@1` has scope `@1`
+- MethodCall result `$26` has no scope (`null`)
+
+**After AlignMethodCallScopes:**
+```
+[7] store $24[4:10]:TFunction = PropertyLoad capture $23_@1.push
+[9] mutate? $26:TPrimitive = MethodCall store $23_@1.read $24(capture $25)
+```
+- PropertyLoad result `$24` now has **no scope** (the `_@1` suffix removed)
+- MethodCall result `$26` still has no scope
+
+**Why this matters:**
+Without this alignment, later passes might try to memoize the `.push` property load separately from the actual `push()` call. This would be incorrect because:
+1. Reading a method from an object and calling it are semantically one operation
+2. The property load's value (the bound method) is only valid immediately when called on the same receiver
+3. Separate memoization could lead to stale method references or incorrect this-binding
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md
new file mode 100644
index 00000000000..ebb78ba16cb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md
@@ -0,0 +1,128 @@
+# alignObjectMethodScopes
+
+## File
+`src/ReactiveScopes/AlignObjectMethodScopes.ts`
+
+## Purpose
+Ensures that object method values and their enclosing object expressions share the same reactive scope. This is critical for code generation because JavaScript requires object method definitions to be inlined within their containing object literals. If the object method and object expression were in different reactive scopes (which map to different memoization blocks), the generated code would be invalid since you cannot reference an object method defined in one block from an object literal in a different block.
+
+From the file's documentation:
+> "To produce a well-formed JS program in Codegen, object methods and object expressions must be in the same ReactiveBlock as object method definitions must be inlined."
+
+## Input Invariants
+- Reactive scopes have been inferred: This pass runs after `InferReactiveScopeVariables`
+- ObjectMethod and ObjectExpression have non-null scopes: The pass asserts this with an invariant check
+- Scopes are disjoint across functions: The pass assumes that scopes do not overlap between parent and nested functions
+
+## Output Guarantees
+- ObjectMethod and ObjectExpression share the same scope: Any ObjectMethod used as a property in an ObjectExpression will have its scope merged with the ObjectExpression's scope
+- Merged scope covers both ranges: The resulting merged scope's range is expanded to cover the minimum start and maximum end of all merged scopes
+- All identifiers are repointed: All identifiers whose scopes were merged are updated to point to the canonical root scope
+- Inner functions are also processed: The pass recursively handles nested ObjectMethod and FunctionExpression values
+
+## Algorithm
+
+### Phase 1: Find Scopes to Merge (`findScopesToMerge`)
+1. Iterate through all blocks and instructions in the function
+2. Track all ObjectMethod declarations in a set by their lvalue identifier
+3. When encountering an ObjectExpression, check each operand:
+   - If an operand's identifier was previously recorded as an ObjectMethod declaration
+   - Get the scope of both the ObjectMethod operand and the ObjectExpression lvalue
+   - Assert both scopes are non-null
+   - Union these two scopes together in a DisjointSet data structure
+
+### Phase 2: Merge and Repoint Scopes (`alignObjectMethodScopes`)
+1. Recursively process inner functions first (ObjectMethod and FunctionExpression values)
+2. Canonicalize the DisjointSet to get a mapping from each scope to its root
+3. **Step 1 - Merge ranges**: For each scope that maps to a different root:
+   - Expand the root's range to encompass both the original range and the merged scope's range
+   - `root.range.start = min(scope.range.start, root.range.start)`
+   - `root.range.end = max(scope.range.end, root.range.end)`
+4. **Step 2 - Repoint identifiers**: For each instruction's lvalue:
+   - If the identifier has a scope that was merged
+   - Update the identifier's scope reference to point to the canonical root
+
+## Key Data Structures
+
+1. **DisjointSet<ReactiveScope>** - A union-find data structure that tracks which scopes should be merged together. Uses path compression for efficient `find()` operations.
+
+2. **Set<Identifier>** - Tracks which identifiers are ObjectMethod declarations, used to identify when an ObjectExpression operand is an object method.
+
+3. **ReactiveScope** - Contains:
+   - `id: ScopeId` - Unique identifier
+   - `range: MutableRange` - Start and end instruction IDs
+   - `dependencies` - Inputs to the scope
+   - `declarations` - Values produced by the scope
+
+4. **MutableRange** - Has `start` and `end` InstructionId fields that define the scope's extent.
+
+## Edge Cases
+
+### Nested Object Methods
+When an object method itself contains another object with methods, the pass recursively processes inner functions first before handling the outer function's scopes.
+
+### Multiple Object Methods in Same Object
+If an object has multiple method properties, all their scopes will be merged with the object's scope through the DisjointSet.
+
+### Object Methods in Conditional Expressions
+Object methods inside ternary expressions still need scope alignment to ensure the method and its containing object are in the same reactive block.
+
+### Method Call After Object Creation
+The pass works in conjunction with `AlignMethodCallScopes` (which runs immediately before) to ensure that method calls on objects with object methods are also properly scoped.
+
+## TODOs
+None explicitly marked in the source file.
+
+## Example
+
+### Fixture: `object-method-shorthand.js`
+
+**Input:**
+```javascript
+function Component() {
+  let obj = {
+    method() {
+      return 1;
+    },
+  };
+  return obj.method();
+}
+```
+
+**Before AlignObjectMethodScopes:**
+```
+InferReactiveScopeVariables:
+  [1] mutate? $12_@0:TObjectMethod = ObjectMethod ...    // scope @0
+  [2] mutate? $14_@1[2:7]:TObject = Object { method: ... } // scope @1 (range 2:7)
+```
+The ObjectMethod `$12` is in scope `@0` while the ObjectExpression `$14` is in scope `@1` with range `[2:7]`.
+
+**After AlignObjectMethodScopes:**
+```
+AlignObjectMethodScopes:
+  [1] mutate? $12_@0[1:7]:TObjectMethod = ObjectMethod ... // scope @0, range now 1:7
+  [2] mutate? $14_@0[1:7]:TObject = Object { method: ... } // also scope @0, range 1:7
+```
+Both identifiers are in the same scope `@0`, and the scope's range has been expanded to `[1:7]` to cover both instructions.
+
+**Final Generated Code:**
+```javascript
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const obj = {
+      method() {
+        return 1;
+      },
+    };
+    t0 = obj.method();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+```
+
+The object literal with its method and the subsequent method call are all inside the same memoization block, producing valid JavaScript where the method definition is inlined within the object literal.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md
new file mode 100644
index 00000000000..1230ecbaa83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md
@@ -0,0 +1,177 @@
+# alignReactiveScopesToBlockScopesHIR
+
+## File
+`src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts`
+
+## Purpose
+This is the **2nd of 4 passes** that determine how to break a function into discrete reactive scopes (independently memoizable units of code). The pass aligns reactive scope boundaries to control flow (block scope) boundaries.
+
+The problem it solves: Prior inference passes assign reactive scopes to operands based on mutation ranges at arbitrary instruction points in the control-flow graph. However, to generate memoization blocks around instructions, scopes must be aligned to block-scope boundaries -- you cannot memoize half of a loop or half of an if-block.
+
+**Example from the source code comments:**
+```javascript
+function foo(cond, a) {
+                    // original scope end
+                         // expanded scope end
+   const x = [];    |    |
+   if (cond) {      |    |
+     ...            |    |
+     x.push(a);     <--- original scope ended here
+     ...                 |
+   }                     <--- scope must extend to here
+}
+```
+
+## Input Invariants
+- `InferReactiveScopeVariables` has run: Each identifier has been assigned a `ReactiveScope` with a `range` (start/end instruction IDs) based on mutation analysis
+- The HIR is in SSA form: Blocks have unique IDs, instructions have unique IDs, and control flow is represented with basic blocks
+- Each block has a terminal with possible successors and fallthroughs
+- Each scope has a mutable range `{start: InstructionId, end: InstructionId}` indicating when the scope is active
+
+## Output Guarantees
+- **Scopes end at valid block boundaries**: A reactive scope may only end at the same block scope level as it began. The scope's `range.end` is updated to the first instruction of the fallthrough block after any control flow structure that the scope overlaps
+- **Scopes start at valid block boundaries**: For labeled breaks (gotos to a label), scopes that extend beyond the goto have their `range.start` extended back to include the label
+- **Value blocks (ternary, logical, optional) are handled specially**: Scopes inside value blocks are extended to align with the outer block scope's instruction range
+
+## Algorithm
+
+The pass performs a single forward traversal over all blocks:
+
+### 1. Tracking Active Scopes
+- Maintains `activeScopes: Set<ReactiveScope>` - scopes whose range overlaps the current block
+- Maintains `activeBlockFallthroughRanges: Array<{range, fallthrough}>` - stack of pending block-fallthrough ranges
+
+### 2. Per-Block Processing
+For each block:
+- Prune `activeScopes` to only those that extend past the current block's start
+- If this block is a fallthrough target, pop the range from the stack and extend all active scopes' start to the range start
+
+### 3. Recording Places
+For each instruction lvalue and operand:
+- If the place has a scope, add it to `activeScopes`
+- If inside a value block, extend the scope's range to match the value block's outer range
+
+### 4. Handling Block Fallthroughs
+When a terminal has a fallthrough (not a simple branch):
+- Extend all active scopes whose `range.end > terminal.id` to at least the first instruction of the fallthrough block
+- Push the fallthrough range onto the stack for future scopes
+
+### 5. Handling Labeled Breaks (Goto)
+When encountering a goto to a label (not the natural fallthrough):
+- Find the corresponding fallthrough range on the stack
+- Extend all active scopes to span from the label start to its fallthrough end
+
+### 6. Value Block Handling
+For ternary, logical, and optional terminals:
+- Create `ValueBlockNode` to track the outer block's instruction range
+- Scopes inside value blocks inherit this range, ensuring they align to the outer block scope
+
+## Key Data Structures
+
+```typescript
+type ValueBlockNode = {
+  kind: 'node';
+  id: InstructionId;
+  valueRange: MutableRange;  // Range of outer block scope
+  children: Array<ValueBlockNode | ReactiveScopeNode>;
+};
+
+type ReactiveScopeNode = {
+  kind: 'scope';
+  id: InstructionId;
+  scope: ReactiveScope;
+};
+
+// Tracked during traversal:
+activeBlockFallthroughRanges: Array<{
+  range: InstructionRange;
+  fallthrough: BlockId;
+}>;
+activeScopes: Set<ReactiveScope>;
+valueBlockNodes: Map<BlockId, ValueBlockNode>;
+```
+
+## Edge Cases
+
+### Labeled Breaks
+When a `goto` jumps to a label (not the natural fallthrough), scopes must be extended to include the entire labeled block range, preventing the break from jumping out of the scope.
+
+### Value Blocks (Ternary/Logical/Optional)
+These create nested "value" contexts. Scopes inside must be aligned to the outer block scope's boundaries, not the value block's boundaries.
+
+### Nested Control Flow
+Deeply nested if-statements require the scope to be extended through all levels back to the outermost block where the scope started.
+
+### do-while and try/catch
+The terminal's successor might be a block (not value block), which is handled specially.
+
+## TODOs
+1. `// TODO: consider pruning activeScopes per instruction` - Currently, `activeScopes` is only pruned at block start points. Some scopes may no longer be active by the time a goto is encountered.
+
+2. `// TODO: add a variant of eachTerminalSuccessor() that visits _all_ successors, not just those that are direct successors for normal control-flow ordering.` - The current implementation uses `mapTerminalSuccessors` which may not visit all successors in all cases.
+
+## Example
+
+### Fixture: `extend-scopes-if.js`
+
+**Input:**
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    if (b) {
+      if (c) {
+        x.push(0);  // Mutation of x ends here (instruction 12-13)
+      }
+    }
+  }
+  if (x.length) {  // instruction 16
+    return x;
+  }
+  return null;
+}
+```
+
+**Before AlignReactiveScopesToBlockScopesHIR:**
+```
+x$23_@0[1:13]  // Scope range 1-13
+```
+The scope for `x` ends at instruction 13 (inside the innermost if block).
+
+**After AlignReactiveScopesToBlockScopesHIR:**
+```
+x$23_@0[1:16]  // Scope range extended to 1-16
+```
+The scope is extended to instruction 16 (the first instruction after all the nested if-blocks), aligning to the block scope boundary.
+
+**Generated Code:**
+```javascript
+function foo(a, b, c) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      if (b) {
+        if (c) {
+          x.push(0);
+        }
+      }
+    }
+    // Scope ends here, after ALL the if-blocks
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  // Code outside the scope
+  if (x.length) {
+    return x;
+  }
+  return null;
+}
+```
+
+The memoization block correctly wraps the entire nested if-structure, not just part of it.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md
new file mode 100644
index 00000000000..e7b008df8f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md
@@ -0,0 +1,134 @@
+# mergeOverlappingReactiveScopesHIR
+
+## File
+`src/HIR/MergeOverlappingReactiveScopesHIR.ts`
+
+## Purpose
+This pass ensures that reactive scope ranges form valid, non-overlapping blocks in the output JavaScript program. It merges reactive scopes that would otherwise be inconsistent with each other due to:
+
+1. **Overlapping ranges**: Scopes whose instruction ranges partially overlap (not disjoint and not nested) must be merged because the compiler cannot produce valid `if-else` memo blocks for overlapping scopes.
+
+2. **Cross-scope mutations**: When an instruction within one scope mutates a value belonging to a different (outer) scope, those scopes must be merged to maintain correctness.
+
+The pass guarantees that after execution, any two reactive scopes are either:
+- Entirely disjoint (no common instructions)
+- Properly nested (one scope is completely contained within the other)
+
+## Input Invariants
+- Reactive scope variables have been inferred (`InferReactiveScopeVariables` pass has run)
+- Scopes have been aligned to block scopes (`AlignReactiveScopesToBlockScopesHIR` pass has run)
+- Each `Place` may have an associated `ReactiveScope` with a `range` (start/end instruction IDs)
+- Scopes may still have overlapping ranges or contain instructions that mutate outer scopes
+
+## Output Guarantees
+- **No overlapping scopes**: All reactive scopes either are disjoint or properly nested
+- **Consistent mutation boundaries**: Instructions only mutate their "active" scope (the innermost containing scope)
+- **Merged scope ranges**: Merged scopes have their ranges extended to cover the union of all constituent scopes
+- **Updated references**: All `Place` references have their `identifier.scope` updated to point to the merged scope
+
+## Algorithm
+
+### Phase 1: Collect Scope Information (`collectScopeInfo`)
+- Iterates through all instructions and terminals in the function
+- Records for each `Place`:
+  - The scope it belongs to (`placeScopes` map)
+  - When scopes start and end (`scopeStarts` and `scopeEnds` arrays, sorted in descending order by ID)
+- Only records scopes with non-empty ranges (`range.start !== range.end`)
+
+### Phase 2: Detect Overlapping Scopes (`getOverlappingReactiveScopes`)
+Uses a stack-based traversal to track "active" scopes at each instruction:
+
+1. **For each instruction/terminal**:
+   - **Handle scope endings**: Pop completed scopes from the active stack. If a scope ends while other scopes that started later are still active (detected by finding the scope is not at the top of the stack), those scopes overlap and must be merged via `DisjointSet.union()`.
+
+   - **Handle scope starts**: Push new scopes onto the active stack (sorted by end time descending so earlier-ending scopes are at the top). Merge any scopes that have identical start/end ranges.
+
+   - **Handle mutations**: For each operand/lvalue, if it:
+     - Has an associated scope
+     - Is mutable at the current instruction
+     - The scope is active but not at the top of the stack (i.e., an outer scope)
+
+     Then merge all scopes from the mutated outer scope to the top of the stack.
+
+2. **Special case**: Primitive operands in `FunctionExpression` and `ObjectMethod` are skipped.
+
+### Phase 3: Merge Scopes and Rewrite References
+1. For each scope in the disjoint set, compute the merged range as the union (min start, max end)
+2. Update all `Place.identifier.scope` references to point to the merged "group" scope
+
+## Key Data Structures
+
+### ScopeInfo
+```typescript
+type ScopeInfo = {
+  scopeStarts: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
+  scopeEnds: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
+  placeScopes: Map<Place, ReactiveScope>;
+};
+```
+
+### TraversalState
+```typescript
+type TraversalState = {
+  joined: DisjointSet<ReactiveScope>;  // Union-find for merged scopes
+  activeScopes: Array<ReactiveScope>;   // Stack of currently active scopes
+};
+```
+
+### DisjointSet<ReactiveScope>
+A union-find data structure that tracks which scopes should be merged into the same group.
+
+## Edge Cases
+
+### Identical Scope Ranges
+When multiple scopes have the exact same start and end, they are automatically merged since they would produce the same reactive block.
+
+### Empty Scopes
+Scopes where `range.start === range.end` are skipped entirely.
+
+### Primitive Captures in Functions
+When a `FunctionExpression` or `ObjectMethod` captures a primitive operand, it's excluded from scope merging analysis.
+
+### JSX Single-Instruction Scopes
+The comment in the code notes this isn't perfect - mutating scopes may get merged with JSX single-instruction scopes.
+
+### Non-Mutating Captures
+The pass records both mutating and non-mutating scopes to handle cases where still-mutating values are aliased by inner scopes.
+
+## TODOs
+From the comments in the source file, the design constraints arise from the current compiler output design:
+- **Instruction ordering is preserved**: If reordering were allowed, disjoint ranges could be produced by reordering mutating instructions
+- **One if-else block per scope**: The current design doesn't allow composing a reactive scope from disconnected instruction ranges
+
+## Example
+
+### Fixture: `overlapping-scopes-interleaved.js`
+
+**Input Code:**
+```javascript
+function foo(a, b) {
+  let x = [];
+  let y = [];
+  x.push(a);
+  y.push(b);
+}
+```
+
+**Before MergeOverlappingReactiveScopesHIR:**
+```
+[1] $20_@0[1:9] = Array []        // x belongs to scope @0, range [1:9]
+[2] x$21_@0[1:9] = StoreLocal...
+[3] $23_@1[3:13] = Array []       // y belongs to scope @1, range [3:13]
+[4] y$24_@1[3:13] = StoreLocal...
+```
+Scopes @0 [1:9] and @1 [3:13] overlap: @0 starts at 1, @1 starts at 3, @0 ends at 9, @1 ends at 13. This is invalid.
+
+**After MergeOverlappingReactiveScopesHIR:**
+```
+[1] $20_@0[1:13] = Array []       // Merged scope @0, range [1:13]
+[2] x$21_@0[1:13] = StoreLocal...
+[3] $23_@0[1:13] = Array []       // Now also scope @0
+[4] y$24_@0[1:13] = StoreLocal...
+```
+
+Both `x` and `y` now belong to the same merged scope @0 with range [1:13], producing a single `if-else` memo block in the output.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md
new file mode 100644
index 00000000000..a9c31dd1ec6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md
@@ -0,0 +1,161 @@
+# buildReactiveScopeTerminalsHIR
+
+## File
+`src/HIR/BuildReactiveScopeTerminalsHIR.ts`
+
+## Purpose
+This pass transforms the HIR by inserting `ReactiveScopeTerminal` nodes to explicitly demarcate the boundaries of reactive scopes within the control flow graph. It converts the implicit scope ranges (stored on identifiers as `identifier.scope.range`) into explicit control flow structure by:
+
+1. Inserting a `scope` terminal at the **start** of each reactive scope
+2. Inserting a `goto` terminal at the **end** of each reactive scope
+3. Creating fallthrough blocks to properly connect the scopes to the rest of the CFG
+
+This transformation makes scope boundaries first-class elements in the CFG, which is essential for later passes that generate the memoization code (the `if ($[n] !== dep)` checks).
+
+## Input Invariants
+- **Properly nested scopes and blocks**: The pass assumes `assertValidBlockNesting` has passed, meaning all program blocks and reactive scopes form a proper tree hierarchy
+- **Aligned scope ranges**: Reactive scope ranges have been correctly aligned and merged by previous passes
+- **Valid instruction IDs**: All instructions have sequential IDs that define the scope boundaries
+- **Scopes attached to identifiers**: Reactive scopes are found by traversing all `Place` operands and collecting unique non-empty scopes
+
+## Output Guarantees
+- **Explicit scope terminals**: Each reactive scope is represented in the CFG as a `ReactiveScopeTerminal` with:
+  - `block` - The BlockId containing the scope's instructions
+  - `fallthrough` - The BlockId that executes after the scope
+- **Proper block structure**: Original blocks are split at scope boundaries
+- **Restored HIR invariants**: The pass restores RPO ordering, predecessor sets, instruction IDs, and scope/identifier ranges
+- **Updated phi nodes**: Phi operands are repointed when their source blocks are split
+
+## Algorithm
+
+### Step 1: Collect Scope Rewrites
+```
+for each reactive scope (in range pre-order):
+  push StartScope rewrite at scope.range.start
+  push EndScope rewrite at scope.range.end
+```
+The `recursivelyTraverseItems` helper traverses scopes in pre-order (outer scopes before inner scopes).
+
+### Step 2: Apply Rewrites by Splitting Blocks
+```
+reverse queuedRewrites (to pop in ascending instruction order)
+for each block:
+  for each instruction (or terminal):
+    while there are rewrites <= current instruction ID:
+      split block at current index
+      insert scope terminal (for start) or goto terminal (for end)
+  emit final block segment with original terminal
+```
+
+### Step 3: Repoint Phi Nodes
+When a block is split, its final segment gets a new BlockId. Phi operands that referenced the original block are updated to reference the new final block.
+
+### Step 4: Restore HIR Invariants
+- Recompute RPO (reverse post-order) block traversal
+- Recalculate predecessor sets
+- Renumber instruction IDs
+- Fix scope and identifier ranges to match new instruction IDs
+
+## Key Data Structures
+
+### TerminalRewriteInfo
+```typescript
+type TerminalRewriteInfo =
+  | {
+      kind: 'StartScope';
+      blockId: BlockId;        // New block for scope content
+      fallthroughId: BlockId;  // Block after scope ends
+      instrId: InstructionId;  // Where to insert
+      scope: ReactiveScope;    // The scope being created
+    }
+  | {
+      kind: 'EndScope';
+      instrId: InstructionId;  // Where to insert
+      fallthroughId: BlockId;  // Same as corresponding StartScope
+    };
+```
+
+### RewriteContext
+```typescript
+type RewriteContext = {
+  source: BasicBlock;        // Original block being split
+  instrSliceIdx: number;     // Current slice start index
+  nextPreds: Set<BlockId>;   // Predecessors for next emitted block
+  nextBlockId: BlockId;      // BlockId for next emitted block
+  rewrites: Array<BasicBlock>; // Accumulated split blocks
+};
+```
+
+### ScopeTraversalContext
+```typescript
+type ScopeTraversalContext = {
+  fallthroughs: Map<ScopeId, BlockId>; // Cache: scope -> its fallthrough block
+  rewrites: Array<TerminalRewriteInfo>;
+  env: Environment;
+};
+```
+
+## Edge Cases
+
+### Multiple Rewrites at Same Instruction ID
+The while loop in Step 2 handles multiple scope start/ends at the same instruction ID.
+
+### Nested Scopes
+The pre-order traversal ensures outer scopes are processed before inner scopes, creating proper nesting in the CFG.
+
+### Empty Blocks After Split
+When a scope boundary falls at the start of a block, the split may create a block with no instructions (only a terminal).
+
+### Control Flow Within Scopes
+The pass preserves existing control flow (if/else, loops) within scopes; it only adds scope entry/exit points.
+
+### Early Returns
+When a return occurs within a scope, the scope terminal still has a fallthrough block, but that block may contain `Unreachable` terminal.
+
+## TODOs
+Line 283-284:
+```typescript
+// TODO make consistent instruction IDs instead of reusing
+```
+
+## Example
+
+### Fixture: `reactive-scopes-if.js`
+
+**Before BuildReactiveScopeTerminalsHIR:**
+```
+bb0 (block):
+  [1] $29_@0[1:22] = Array []           // x with scope @0 range [1:22]
+  [2] StoreLocal x$30_@0 = $29_@0
+  [3] $32 = LoadLocal a$26
+  [4] If ($32) then:bb2 else:bb3 fallthrough=bb1
+bb2:
+  [5] $33_@1[5:11] = Array []           // y with scope @1 range [5:11]
+  ...
+```
+
+**After BuildReactiveScopeTerminalsHIR:**
+```
+bb0 (block):
+  [1] Scope @0 [1:28] block=bb9 fallthrough=bb10   // <-- scope terminal inserted
+bb9:
+  [2] $29_@0 = Array []
+  [3] StoreLocal x$30_@0 = $29_@0
+  [4] $32 = LoadLocal a$26
+  [5] If ($32) then:bb2 else:bb3 fallthrough=bb1
+bb2:
+  [6] Scope @1 [6:14] block=bb11 fallthrough=bb12  // <-- nested scope terminal
+bb11:
+  [7] $33_@1 = Array []
+  ...
+  [13] Goto bb12                                    // <-- scope end goto
+bb12:
+  ...
+bb1:
+  [27] Goto bb10                                    // <-- scope @0 end goto
+bb10:
+  [28] $50 = LoadLocal x$30_@0
+  [29] Return $50
+```
+
+The key transformation is that scope boundaries become explicit control flow: a `Scope` terminal enters the scope content block, and a `Goto` terminal exits to the fallthrough block. This structure is later used to generate the memoization checks.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md
new file mode 100644
index 00000000000..e9a216323cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md
@@ -0,0 +1,158 @@
+# flattenReactiveLoopsHIR
+
+## File
+`src/ReactiveScopes/FlattenReactiveLoopsHIR.ts`
+
+## Purpose
+This pass **prunes reactive scopes that are nested inside loops** (for, for-in, for-of, while, do-while). The compiler does not yet support memoization within loops because:
+
+1. Loop iterations would require reconciliation across runs (similar to how `key` is used in JSX for lists)
+2. There is no way to identify values across iterations
+3. The current approach is to memoize *around* the loop rather than *within* it
+
+When a reactive scope is found inside a loop body, the pass converts its terminal from `scope` to `pruned-scope`. A `pruned-scope` terminal is later treated specially during codegen - its instructions are emitted inline without any memoization guards.
+
+## Input Invariants
+- The HIR has been through `buildReactiveScopeTerminalsHIR`, which creates `scope` terminal nodes for reactive scopes
+- The HIR is in valid block form with proper terminal kinds
+- The block ordering respects control flow (blocks are iterated in order, with loop fallthroughs appearing after loop bodies)
+
+## Output Guarantees
+- All `scope` terminals that appear inside any loop body are converted to `pruned-scope` terminals
+- Scopes outside of loops remain unchanged as `scope` terminals
+- The structure of blocks is preserved; only the terminal kind is mutated
+- The `pruned-scope` terminal retains all the same fields as `scope` (block, fallthrough, scope, id, loc)
+
+## Algorithm
+
+The algorithm uses a **linear scan with a stack-based loop tracking** approach:
+
+```
+1. Initialize an empty array `activeLoops` to track which loop(s) we are currently inside
+2. For each block in the function body (in order):
+   a. Remove the current block ID from activeLoops (if present)
+      - This happens when we reach a loop's fallthrough block, exiting the loop
+   b. Examine the block's terminal:
+      - If it's a loop terminal (do-while, for, for-in, for-of, while):
+        Push the loop's fallthrough block ID onto activeLoops
+      - If it's a scope terminal AND activeLoops is non-empty:
+        Convert the terminal to pruned-scope (keeping all other fields)
+      - All other terminal kinds are ignored
+```
+
+Key insight: The algorithm tracks when we "enter" a loop by pushing the fallthrough ID when encountering a loop terminal, and "exits" the loop when that fallthrough block is visited.
+
+## Key Data Structures
+
+### activeLoops: Array<BlockId>
+A stack of block IDs representing loop fallthroughs. When non-empty, we are inside one or more nested loops.
+
+### PrunedScopeTerminal
+```typescript
+export type PrunedScopeTerminal = {
+  kind: 'pruned-scope';
+  fallthrough: BlockId;
+  block: BlockId;
+  scope: ReactiveScope;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+```
+
+### retainWhere
+Utility from utils.ts - an in-place array filter that removes elements not matching the predicate.
+
+## Edge Cases
+
+### Nested Loops
+The algorithm handles nested loops correctly because `activeLoops` is an array that can contain multiple fallthrough IDs. A scope deep inside multiple nested loops will still be pruned.
+
+### Scope Spanning the Loop
+If a scope terminal appears before the loop terminal but its body contains the loop, it is NOT pruned because the scope terminal itself is not inside the loop.
+
+### Multiple Loops in Sequence
+When exiting one loop (reaching its fallthrough) and entering another, `activeLoops` correctly clears the first loop before potentially adding the second.
+
+### Control Flow That Exits Loops (break/return)
+The algorithm relies on block ordering and fallthrough IDs. Early exits via break/return don't affect the tracking since we track by fallthrough block ID.
+
+## TODOs
+No explicit TODOs in this file. However, the docstring mentions future improvements:
+> "Eventually we may integrate more deeply into the runtime so that we can do a single level of reconciliation"
+
+This suggests a potential future feature to support memoization within loops via runtime integration.
+
+## Example
+
+### Fixture: `repro-memoize-for-of-collection-when-loop-body-returns.js`
+
+**Input:**
+```javascript
+function useHook(nodeID, condition) {
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  for (const key of Object.keys(node?.fields ?? {})) {
+    if (condition) {
+      return new Class(node.fields?.[field]);  // <-- Scope @4 is here
+    }
+  }
+  return new Class();  // <-- Scope @5 is here (outside loop)
+}
+```
+
+**Before FlattenReactiveLoopsHIR:**
+```
+[45] Scope scope @3 [45:72] ... block=bb35 fallthrough=bb36
+bb35:
+  [46] ForOf init=bb6 test=bb7 loop=bb8 fallthrough=bb5
+  ...
+  [66] Scope scope @4 [66:69] ... block=bb37 fallthrough=bb38  <-- Inside loop
+  ...
+  [73] Scope scope @5 [73:76] ... block=bb39 fallthrough=bb40  <-- Outside loop
+```
+
+**After FlattenReactiveLoopsHIR:**
+```
+[45] Scope scope @3 [45:72] ... block=bb35 fallthrough=bb36    <-- Unchanged
+...
+[66] <pruned> Scope scope @4 [66:69] ... block=bb37 fallthrough=bb38  <-- PRUNED!
+...
+[73] Scope scope @5 [73:76] ... block=bb39 fallthrough=bb40    <-- Unchanged
+```
+
+**Final Codegen Result:**
+```javascript
+function useHook(nodeID, condition) {
+  const $ = _c(7);
+  // ... memoized Object.keys call (scope @2)
+
+  let t1;
+  if ($[2] !== condition || $[3] !== node || $[4] !== t0) {
+    // Scope @3 wraps the loop
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: for (const key of t0) {
+      if (condition) {
+        t1 = new Class(node.fields?.[field]);  // Scope @4 was PRUNED - no memoization
+        break bb0;
+      }
+    }
+    $[2] = condition;
+    $[3] = node;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  // ...
+
+  // Scope @5 - memoized (sentinel check)
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = new Class();
+    $[6] = t2;
+  }
+  return t2;
+}
+```
+
+The `new Class(...)` inside the loop has no memoization guards because scope @4 was pruned. The `new Class()` outside the loop retains its memoization via scope @5.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md
new file mode 100644
index 00000000000..ff34df45211
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md
@@ -0,0 +1,143 @@
+# flattenScopesWithHooksOrUseHIR
+
+## File
+`src/ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts`
+
+## Purpose
+This pass removes (flattens) reactive scopes that transitively contain hook calls or `use()` operator calls. The key insight is that:
+
+1. **Hooks cannot be called conditionally** - wrapping them in a memoized scope would make them conditionally called based on whether the cache is valid
+2. **The `use()` operator** - while it can be called conditionally in source code, React requires it to be called consistently if the component needs the returned value. Memoizing a scope containing `use()` would also make it conditionally called.
+
+By running reactive scope inference first (agnostic of hooks), the compiler knows which values "construct together" in the same scope. The pass then removes ALL memoization for scopes containing hook/use calls to ensure they are always executed unconditionally.
+
+## Input Invariants
+- HIR must have reactive scope terminals already built (pass runs after `BuildReactiveScopeTerminalsHIR`)
+- Blocks are visited in order (the pass iterates through `fn.body.blocks`)
+- Scope terminals have a `block` (body of the scope) and `fallthrough` (block after the scope)
+- Type inference has run so that `getHookKind()` and `isUseOperator()` can identify hooks and use() calls
+
+## Output Guarantees
+- All scopes that transitively contained a hook or `use()` call are either:
+  - Converted to `LabelTerminal` - if the scope body is trivial (just the hook call and a goto)
+  - Converted to `PrunedScopeTerminal` - if the scope body contains other instructions besides the hook call
+- The `PrunedScopeTerminal` still tracks the original scope information for downstream passes but will not generate memoization code
+- The control flow structure is preserved (same blocks, same fallthroughs)
+
+## Algorithm
+
+### Phase 1: Identify Scopes Containing Hook/Use Calls
+1. Maintain a stack `activeScopes` of currently "open" reactive scopes
+2. Iterate through all blocks in order
+3. When entering a block:
+   - Remove any scopes from `activeScopes` whose fallthrough equals the current block (those scopes have ended)
+4. For each instruction in the block:
+   - If it's a `CallExpression` or `MethodCall` and the callee is a hook or use operator:
+     - Add all currently active scopes to the `prune` list
+     - Clear `activeScopes` (these scopes are now marked for pruning)
+5. If the block's terminal is a `scope`:
+   - Push it onto `activeScopes`
+
+### Phase 2: Prune Identified Scopes
+For each block ID in `prune`:
+1. Get the scope terminal
+2. Check if the scope body is trivial (single instruction + goto to fallthrough):
+   - If trivial: Convert to `LabelTerminal` (will be removed by `PruneUnusedLabels`)
+   - If non-trivial: Convert to `PrunedScopeTerminal` (preserves scope info but skips memoization)
+
+## Key Data Structures
+
+```typescript
+// Stack tracking currently open scopes
+activeScopes: Array<{block: BlockId; fallthrough: BlockId}>
+
+// List of block IDs whose scope terminals should be pruned
+prune: Array<BlockId>
+
+// Terminal types used
+LabelTerminal: {kind: 'label', block, fallthrough, id, loc}
+PrunedScopeTerminal: {kind: 'pruned-scope', block, fallthrough, scope, id, loc}
+ReactiveScopeTerminal: {kind: 'scope', block, fallthrough, scope, id, loc}
+```
+
+## Edge Cases
+
+### Nested Scopes
+When a hook is found in an inner scope, ALL enclosing scopes are also pruned (the hook call would become conditional if any outer scope were memoized).
+
+### Method Call Hooks
+Handles both `CallExpression` (e.g., `useHook(...)`) and `MethodCall` (e.g., `obj.useHook(...)`).
+
+### Trivial Hook-Only Scopes
+If a scope exists just for a hook call (single instruction + goto), it's converted to a `LabelTerminal` which is a simpler structure that gets cleaned up by later passes.
+
+### Multiple Hooks in Sequence
+Once the first hook is encountered, all active scopes are pruned and cleared, so subsequent hooks in outer scopes still work correctly.
+
+## TODOs
+None explicitly marked in the source file.
+
+## Example
+
+### Fixture: `nested-scopes-hook-call.js`
+
+**Input:**
+```javascript
+function component(props) {
+  let x = [];
+  let y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
+```
+
+**Before FlattenScopesWithHooksOrUseHIR:**
+```
+bb0:
+  [1] Scope @0 [1:22] block=bb6 fallthrough=bb7    // Outer scope for x
+bb6:
+  [2] $22 = Array []         // x = []
+  [3] StoreLocal x = $22
+  [4] Scope @1 [4:17] block=bb8 fallthrough=bb9   // Inner scope for y
+bb8:
+  [5] $25 = Array []         // y = []
+  [6] StoreLocal y = $25
+  ...
+  [10] $33 = Call useHook(...)  // <-- Hook call here!
+  [11] MethodCall y.push($33)
+```
+
+**After FlattenScopesWithHooksOrUseHIR:**
+```
+bb0:
+  [1] <pruned> Scope @0 [1:22] block=bb6 fallthrough=bb7   // PRUNED
+bb6:
+  [2] $22 = Array []
+  [3] StoreLocal x = $22
+  [4] <pruned> Scope @1 [4:17] block=bb8 fallthrough=bb9  // PRUNED
+bb8:
+  [5] $25 = Array []
+  [6] StoreLocal y = $25
+  ...
+  [12] Label block=bb10 fallthrough=bb11   // Hook call converted to label
+bb10:
+  [13] $33 = Call useHook(...)
+  [14] Goto bb11
+...
+```
+
+**Final Output (no memoization):**
+```javascript
+function component(props) {
+  const x = [];
+  const y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
+```
+
+Notice that:
+1. Both scope @0 and scope @1 are marked as `<pruned>` because the hook call is inside scope @1, which is inside scope @0
+2. The final output has no memoization wrappers - just the raw code
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md
new file mode 100644
index 00000000000..88f9016f12e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md
@@ -0,0 +1,158 @@
+# propagateScopeDependenciesHIR
+
+## File
+`src/HIR/PropagateScopeDependenciesHIR.ts`
+
+## Purpose
+The `propagateScopeDependenciesHIR` pass is responsible for computing and assigning the **dependencies** for each reactive scope in the compiled function. Dependencies are the external values that a scope reads, which determine when the scope needs to re-execute. This is a critical step for memoization correctness - the compiler must track exactly which values a scope depends on so it can generate proper cache invalidation checks.
+
+The pass also populates:
+- `scope.dependencies` - The set of `ReactiveScopeDependency` objects the scope reads
+- `scope.declarations` - Values declared within the scope that are used outside it
+
+## Input Invariants
+- Reactive scopes must be established (pass runs after `BuildReactiveScopeTerminalsHIR`)
+- The function must be in SSA form
+- `InferMutationAliasingRanges` must have run to establish when values are being mutated
+- `InferReactivePlaces` marks which identifiers are reactive
+- Scope ranges have been aligned and normalized by earlier passes
+
+## Output Guarantees
+After this pass completes:
+
+1. Each `ReactiveScope.dependencies` contains the minimal set of dependencies that:
+   - Were declared before the scope started
+   - Are read within the scope
+   - Are not ref values (which are always mutable)
+   - Are not object methods (which get codegen'd back into object literals)
+
+2. Each `ReactiveScope.declarations` contains identifiers that:
+   - Are assigned within the scope
+   - Are used outside the scope (need to be exposed as scope outputs)
+
+3. Property load chains are resolved to their root identifiers with paths (e.g., `props.user.name` becomes `{identifier: props, path: ["user", "name"]}`)
+
+4. Optional chains are handled correctly, distinguishing between `a?.b` and `a.b` access types
+
+## Algorithm
+
+### Phase 1: Build Sidemaps
+
+1. **findTemporariesUsedOutsideDeclaringScope**: Identifies temporaries that are used outside the scope where they were declared (cannot be hoisted/reordered safely)
+
+2. **collectTemporariesSidemap**: Creates a mapping from temporary IdentifierIds to their source `ReactiveScopeDependency`. For example:
+   ```
+   $0 = LoadLocal 'a'
+   $1 = PropertyLoad $0.'b'
+   ```
+   Maps `$1.id` to `{identifier: a, path: [{property: 'b', optional: false}]}`
+
+3. **collectOptionalChainSidemap**: Traverses optional chain blocks to map temporaries within optional chains to their full optional dependency path
+
+4. **collectHoistablePropertyLoads**: Uses CFG analysis to determine which property loads can be safely hoisted
+
+### Phase 2: Collect Dependencies
+
+The `collectDependencies` function traverses the HIR, maintaining a stack of active scopes:
+
+1. **Scope Entry/Exit**: When entering a scope terminal, push a new dependency array. When exiting, propagate collected dependencies to parent scopes if valid.
+
+2. **Instruction Processing**: For each instruction:
+   - Declare the lvalue with its instruction id and current scope
+   - Visit operands to record them as potential dependencies
+   - Handle special cases like `StoreLocal` (tracks reassignments), `Destructure`, `PropertyLoad`, etc.
+
+3. **Dependency Validation** (`#checkValidDependency`):
+   - Skip ref values (`isRefValueType`)
+   - Skip object methods (`isObjectMethodType`)
+   - Only include if declared before scope start
+
+### Phase 3: Derive Minimal Dependencies
+
+For each scope, use `ReactiveScopeDependencyTreeHIR` to:
+1. Build a tree from hoistable property loads
+2. Add all collected dependencies to the tree
+3. Truncate dependencies at their maximal safe-to-evaluate subpath
+4. Derive the minimal set (removing redundant nested dependencies)
+
+## Key Data Structures
+
+### ReactiveScopeDependency
+```typescript
+type ReactiveScopeDependency = {
+  identifier: Identifier;        // Root identifier
+  reactive: boolean;             // Whether the value is reactive
+  path: DependencyPathEntry[];   // Chain of property accesses
+}
+```
+
+### DependencyPathEntry
+```typescript
+type DependencyPathEntry = {
+  property: PropertyLiteral;  // Property name
+  optional: boolean;          // Is this `?.` access?
+}
+```
+
+### DependencyCollectionContext
+Maintains:
+- `#declarations`: Map of DeclarationId to {id, scope} recording where each value was declared
+- `#reassignments`: Map of Identifier to latest assignment info
+- `#scopes`: Stack of currently active ReactiveScopes
+- `#dependencies`: Stack of dependency arrays (one per active scope)
+- `#temporaries`: Sidemap for resolving property loads
+
+### ReactiveScopeDependencyTreeHIR
+A tree structure for efficient dependency deduplication that stores hoistable objects, tracks access types, and computes minimal dependencies.
+
+## Edge Cases
+
+### Values Used Outside Declaring Scope
+If a temporary is used outside its declaring scope, it cannot be tracked in the sidemap because reordering the read would be invalid.
+
+### Ref.current Access
+Accessing `ref.current` is treated specially - the dependency is truncated to just `ref`.
+
+### Optional Chains
+Optional chains like `a?.b?.c` produce different dependency paths than `a.b.c`. The pass distinguishes them and may merge optional loads into unconditional ones when control flow proves the object is non-null.
+
+### Inner Functions
+Dependencies from inner functions are collected recursively but with special handling for context variables.
+
+### Phi Nodes
+When a value comes from multiple control flow paths, optional chain dependencies from phi operands are also visited.
+
+## TODOs
+1. Line 374-375: `// TODO(mofeiZ): understand optional chaining` - More documentation needed for optional chain handling
+
+## Example
+
+### Fixture: `reactive-control-dependency-if.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x;
+  if (props.cond) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  return [x];
+}
+```
+
+**Before PropagateScopeDependenciesHIR:**
+```
+Scope scope @0 [12:15] dependencies=[] declarations=[] reassignments=[] block=bb9
+```
+
+**After PropagateScopeDependenciesHIR:**
+```
+Scope scope @0 [12:15] dependencies=[x$24:TPrimitive] declarations=[$26_@0] reassignments=[] block=bb9
+```
+
+The pass identified that:
+- The scope at `[x]` depends on `x$24` (the phi node result from the if/else branches)
+- Even though `x` is assigned to constants (1 or 2), its value depends on the reactive control flow condition `props.cond`
+- The scope declares `$26_@0` (the array output)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md
new file mode 100644
index 00000000000..d686b4061d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md
@@ -0,0 +1,180 @@
+# buildReactiveFunction
+
+## File
+`src/ReactiveScopes/BuildReactiveFunction.ts`
+
+## Purpose
+The `buildReactiveFunction` pass converts the compiler's HIR (High-level Intermediate Representation) from a **Control Flow Graph (CFG)** representation to a **tree-based ReactiveFunction** representation that is closer to an AST. This is a critical transformation in the React Compiler pipeline that:
+
+1. **Restores control flow constructs** - Reconstructs `if`, `while`, `for`, `switch`, and other control flow statements from the CFG's basic blocks and terminals
+2. **Eliminates phi nodes** - Replaces SSA phi nodes with compound value expressions (ternaries, logical expressions, sequence expressions)
+3. **Handles labeled break/continue** - Tracks control flow targets to emit explicit labeled `break` and `continue` statements when needed
+4. **Preserves reactive scope information** - Scope terminals are converted to `ReactiveScopeBlock` nodes in the tree
+
+## Input Invariants
+- HIR is in SSA form (variables have been renamed with unique identifiers)
+- Basic blocks are connected (valid predecessor/successor relationships)
+- Each block ends with a valid terminal
+- Phi nodes exist at merge points for values from different control flow paths
+- Reactive scopes have been constructed (`scope` terminals exist)
+- Scope dependencies are computed (`PropagateScopeDependenciesHIR` has run)
+
+## Output Guarantees
+- **Tree structure** - The output is a `ReactiveFunction` with a `body: ReactiveBlock` containing a tree of `ReactiveStatement` nodes
+- **No CFG structure** - Basic blocks are eliminated; control flow is represented through nested reactive terminals
+- **No phi nodes** - Value merges are represented as `ConditionalExpression`, `LogicalExpression`, or `SequenceExpression` values
+- **Labels emitted for all control flow** - Every terminal that can be a break/continue target has a label; unnecessary labels are removed by subsequent `PruneUnusedLabels` pass
+- **Each block emitted exactly once** - A block cannot be generated twice
+- **Scope blocks preserved** - `scope` terminals become `ReactiveScopeBlock` nodes
+
+## Algorithm
+
+### Core Classes
+
+1. **`Driver`** - Traverses blocks and emits ReactiveBlock arrays
+2. **`Context`** - Tracks state:
+   - `emitted: Set<BlockId>` - Which blocks have been generated
+   - `#scheduled: Set<BlockId>` - Blocks that will be emitted by parent constructs
+   - `#controlFlowStack: Array<ControlFlowTarget>` - Stack of active break/continue targets
+   - `scopeFallthroughs: Set<BlockId>` - Fallthroughs for scope blocks
+
+### Traversal Strategy
+
+1. Start at the entry block and call `traverseBlock(entryBlock)`
+2. For each block:
+   - Emit all instructions as `ReactiveInstructionStatement`
+   - Process the terminal based on its kind
+
+### Terminal Processing
+
+**Simple Terminals:**
+- `return`, `throw` - Emit directly as `ReactiveTerminal`
+- `unreachable` - No-op
+
+**Control Flow Terminals:**
+- `if` - Schedule fallthrough, recursively traverse consequent/alternate, emit `ReactiveIfTerminal`
+- `while`, `do-while`, `for`, `for-of`, `for-in` - Use `scheduleLoop()` which tracks continue targets
+- `switch` - Process cases in reverse order
+- `label` - Schedule fallthrough, traverse inner block
+
+**Value Terminals (expressions that produce values):**
+- `ternary`, `logical`, `optional`, `sequence` - Produce `ReactiveValue` compound expressions
+
+**Break/Continue:**
+- `goto` with `GotoVariant.Break` - Determine if break is implicit, unlabeled, or labeled
+- `goto` with `GotoVariant.Continue` - Determine continue type
+
+**Scope Terminals:**
+- `scope`, `pruned-scope` - Schedule fallthrough, traverse inner block, emit as `ReactiveScopeBlock`
+
+## Key Data Structures
+
+### ReactiveFunction
+```typescript
+type ReactiveFunction = {
+  loc: SourceLocation;
+  id: ValidIdentifierName | null;
+  params: Array<Place | SpreadPattern>;
+  generator: boolean;
+  async: boolean;
+  body: ReactiveBlock;
+  env: Environment;
+  directives: Array<string>;
+};
+```
+
+### ReactiveBlock
+```typescript
+type ReactiveBlock = Array<ReactiveStatement>;
+```
+
+### ReactiveStatement
+```typescript
+type ReactiveStatement =
+  | ReactiveInstructionStatement   // {kind: 'instruction', instruction}
+  | ReactiveTerminalStatement      // {kind: 'terminal', terminal, label}
+  | ReactiveScopeBlock             // {kind: 'scope', scope, instructions}
+  | PrunedReactiveScopeBlock;      // {kind: 'pruned-scope', ...}
+```
+
+### ReactiveValue (for compound expressions)
+```typescript
+type ReactiveValue =
+  | InstructionValue               // Regular instruction values
+  | ReactiveLogicalValue           // a && b, a || b, a ?? b
+  | ReactiveSequenceValue          // (a, b, c)
+  | ReactiveTernaryValue           // a ? b : c
+  | ReactiveOptionalCallValue;     // a?.b()
+```
+
+### ControlFlowTarget
+```typescript
+type ControlFlowTarget =
+  | {type: 'if'; block: BlockId; id: number}
+  | {type: 'switch'; block: BlockId; id: number}
+  | {type: 'case'; block: BlockId; id: number}
+  | {type: 'loop'; block: BlockId; continueBlock: BlockId; ...};
+```
+
+## Edge Cases
+
+### Nested Control Flow
+The scheduling mechanism handles arbitrarily nested control flow by pushing/popping from the control flow stack.
+
+### Value Blocks with Complex Expressions
+`SequenceExpression` handles cases where value blocks contain multiple instructions.
+
+### Scope Fallthroughs
+Breaks to scope fallthroughs are treated as implicit (no explicit break needed).
+
+### Catch Handlers
+Scheduled specially via `scheduleCatchHandler()` to prevent re-emission.
+
+### Unreachable Blocks
+The `reachable()` check prevents emitting unreachable blocks.
+
+## TODOs
+The code contains several `CompilerError.throwTodo()` calls for unsupported patterns:
+1. Optional chaining test blocks must end in `branch`
+2. Logical expression test blocks must end in `branch`
+3. Support for value blocks within try/catch statements
+4. Support for labeled statements combined with value blocks
+
+## Example
+
+### Fixture: `ternary-expression.js`
+
+**Input:**
+```javascript
+function ternary(props) {
+  const a = props.a && props.b ? props.c || props.d : (props.e ?? props.f);
+  const b = props.a ? (props.b && props.c ? props.d : props.e) : props.f;
+  return a ? b : null;
+}
+```
+
+**HIR (CFG with many basic blocks):**
+The HIR contains 33 basic blocks with `Ternary`, `Logical`, `Branch`, and `Goto` terminals, plus phi nodes at merge points.
+
+**ReactiveFunction Output (Tree):**
+```
+function ternary(props$62{reactive}) {
+  [1] $84 = Ternary
+    Sequence
+        [2] $66 = Logical
+          Sequence [...]
+          && Sequence [...]
+    ?
+      Sequence [...]  // props.c || props.d
+    :
+      Sequence [...]  // props.e ?? props.f
+  [40] StoreLocal a$99 = $98
+  ...
+  [82] return $145
+}
+```
+
+The transformation eliminates:
+- 33 basic blocks reduced to a single tree
+- Phi nodes replaced with nested `Ternary` and `Logical` value expressions
+- CFG edges replaced with tree nesting
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md
new file mode 100644
index 00000000000..c7524ae5474
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md
@@ -0,0 +1,145 @@
+# pruneUnusedLabels
+
+## File
+`src/ReactiveScopes/PruneUnusedLabels.ts`
+
+## Purpose
+The `pruneUnusedLabels` pass optimizes control flow by:
+
+1. **Flattening labeled terminals** where the label is not reachable via a `break` or `continue` statement
+2. **Marking labels as implicit** for terminals where the label exists but is never targeted
+
+This pass removes unnecessary labeled blocks that were introduced during compilation but serve no control flow purpose in the final output. JavaScript labeled statements are only needed when there is a corresponding `break label` or `continue label` that targets them.
+
+## Input Invariants
+- The input is a `ReactiveFunction` (after conversion from HIR)
+- All `break` and `continue` terminals have:
+  - A `target` (BlockId) indicating which label they jump to
+  - A `targetKind` that is one of: `'implicit'`, `'labeled'`, or `'unlabeled'`
+- Each `ReactiveTerminalStatement` has an optional `label` field containing `id` and `implicit`
+- The pass runs after `assertWellFormedBreakTargets` which validates break/continue targets
+
+## Output Guarantees
+- Labeled terminals where the label is unreachable are flattened into their parent block
+- When flattening, trailing unlabeled `break` statements (that would just fall through) are removed
+- Labels that exist but are never targeted have their `implicit` flag set to `true`
+- Control flow semantics are preserved - only structurally unnecessary labels are removed
+
+## Algorithm
+
+The pass uses a two-phase approach with a single traversal:
+
+**Phase 1: Collect reachable labels**
+```typescript
+if ((terminal.kind === 'break' || terminal.kind === 'continue') &&
+    terminal.targetKind === 'labeled') {
+  state.add(terminal.target);  // Mark this label as reachable
+}
+```
+
+**Phase 2: Transform terminals**
+```typescript
+const isReachableLabel = stmt.label !== null && state.has(stmt.label.id);
+
+if (stmt.terminal.kind === 'label' && !isReachableLabel) {
+  // Flatten: extract block contents, removing trailing unlabeled break
+  const block = [...stmt.terminal.block];
+  const last = block.at(-1);
+  if (last?.kind === 'terminal' && last.terminal.kind === 'break' &&
+      last.terminal.target === null) {
+    block.pop();  // Remove trailing break
+  }
+  return {kind: 'replace-many', value: block};
+} else {
+  if (!isReachableLabel && stmt.label != null) {
+    stmt.label.implicit = true;  // Mark as implicit
+  }
+  return {kind: 'keep'};
+}
+```
+
+## Edge Cases
+
+### Trailing Break Removal
+When flattening a labeled block, if the last statement is an unlabeled break (`target === null`), it is removed since it would just fall through anyway.
+
+### Implicit vs Labeled Breaks
+Only breaks with `targetKind === 'labeled'` count toward label reachability. Implicit breaks (fallthrough) and unlabeled breaks don't make a label "used".
+
+### Continue Statements
+Both `break` and `continue` with labeled targets mark the label as reachable.
+
+### Non-Label Terminals with Labels
+Other terminal types (like `if`, `while`, `for`) can also have labels. If unreachable, these labels are marked implicit but the terminal is not flattened.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `unconditional-break-label.js`
+
+**Input:**
+```javascript
+function foo(a) {
+  let x = 0;
+  bar: {
+    x = 1;
+    break bar;
+  }
+  return a + x;
+}
+```
+
+**Output (after full compilation):**
+```javascript
+function foo(a) {
+  return a + 1;
+}
+```
+
+The labeled block `bar: { ... }` is removed because after the pass runs, constant propagation and dead code elimination further simplify the code.
+
+### Fixture: `conditional-break-labeled.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const a = [];
+  a.push(props.a);
+  label: {
+    if (props.b) {
+      break label;
+    }
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+```
+
+**Output:**
+```javascript
+function Component(props) {
+  const $ = _c(5);
+  let a;
+  if ($[0] !== props.a || $[1] !== props.b ||
+      $[2] !== props.c || $[3] !== props.d) {
+    a = [];
+    a.push(props.a);
+    bb0: {
+      if (props.b) {
+        break bb0;
+      }
+      a.push(props.c);
+    }
+    a.push(props.d);
+    // ... cache updates
+  } else {
+    a = $[4];
+  }
+  return a;
+}
+```
+
+The labeled block `bb0: { ... }` is preserved because the `break bb0` inside the conditional targets this label.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md
new file mode 100644
index 00000000000..ec2c10ea670
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md
@@ -0,0 +1,130 @@
+# pruneNonEscapingScopes
+
+## File
+`src/ReactiveScopes/PruneNonEscapingScopes.ts`
+
+## Purpose
+This pass prunes (removes) reactive scopes whose outputs do not "escape" the component and therefore do not need to be memoized. A value "escapes" in two ways:
+
+1. **Returned from the function** - The value is directly returned or transitively aliased by a return value
+2. **Passed to a hook** - Any value passed as an argument to a hook may be stored by React internally (e.g., the closure passed to `useEffect`)
+
+The key insight is that values which never escape the component boundary can be safely recreated on each render without affecting the behavior of consumers.
+
+## Input Invariants
+- The input is a `ReactiveFunction` after scope blocks have been identified
+- Reactive scopes have been assigned to instructions
+- The pass runs after `BuildReactiveFunction` and `PruneUnusedLabels`, before `PruneNonReactiveDependencies`
+
+## Output Guarantees
+- **Scopes with non-escaping outputs are removed** - Their instructions are inlined back into the parent scope/function body
+- **Scopes with escaping outputs are retained** - Values that escape via return or hook arguments remain memoized
+- **Transitive dependencies of escaping scopes are preserved** - If an escaping scope depends on a non-escaping value, that value's scope is also retained to prevent unnecessary invalidation
+- **`FinishMemoize` instructions are marked `pruned=true`** - When a scope is pruned, the associated memoization instructions are flagged
+
+## Algorithm
+
+### Phase 1: Build the Dependency Graph
+Using `CollectDependenciesVisitor`, build:
+- **Identifier nodes** - Each node tracks memoization level, dependencies, scopes, and whether ultimately memoized
+- **Scope nodes** - Each scope tracks its dependencies
+- **Escaping values** - Identifiers that escape via return or hook arguments
+
+### Phase 2: Classify Memoization Levels
+Each instruction value is classified:
+- `Memoized`: Arrays, objects, function calls, `new` expressions - always potentially aliasing
+- `Conditional`: Conditional/logical expressions, property loads - memoized only if dependencies are memoized
+- `Unmemoized`: JSX elements (when `memoizeJsxElements` is false), DeclareLocal
+- `Never`: Primitives, LoadGlobal, binary/unary expressions - can be cheaply compared
+
+### Phase 3: Compute Memoized Identifiers
+`computeMemoizedIdentifiers()` performs a graph traversal starting from escaping values:
+- For each escaping value, recursively visit its dependencies
+- Mark values and their scopes based on memoization level
+- When marking a scope, force-memoize all its dependencies
+
+### Phase 4: Prune Scopes
+`PruneScopesTransform` visits each scope block:
+- If any scope output is in the memoized set, keep the scope
+- If no outputs are memoized, replace the scope block with its inlined instructions
+
+## Edge Cases
+
+### Interleaved Mutations
+```javascript
+const a = [props.a];  // independently memoizable, non-escaping
+const b = [];
+const c = {};
+c.a = a;              // c captures a, but c doesn't escape
+b.push(props.b);      // b escapes via return
+return b;
+```
+Here `a` does not directly escape, but it is a dependency of the scope containing `b`. The algorithm correctly identifies that `a`'s scope must be preserved.
+
+### Hook Arguments Escape
+Values passed to hooks are treated as escaping because hooks may store references internally.
+
+### JSX Special Handling
+JSX elements are marked as `Unmemoized` by default because React.memo() can handle dynamic memoization.
+
+### noAlias Functions
+If a function signature indicates `noAlias === true`, its arguments are not treated as escaping.
+
+### Reassignments
+When a scope reassigns a variable, the scope is added as a dependency of that variable.
+
+## TODOs
+None explicitly in the source file.
+
+## Example
+
+### Fixture: `escape-analysis-non-escaping-interleaved-allocating-dependency.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const a = [props.a];
+
+  const b = [];
+  const c = {};
+  c.a = a;
+  b.push(props.b);
+
+  return b;
+}
+```
+
+**Output:**
+```javascript
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = [props.a];
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const a = t0;  // a is memoized even though it doesn't escape directly
+
+  let b;
+  if ($[2] !== a || $[3] !== props.b) {
+    b = [];
+    const c = {};      // c is NOT memoized - it doesn't escape
+    c.a = a;
+    b.push(props.b);
+    $[2] = a;
+    $[3] = props.b;
+    $[4] = b;
+  } else {
+    b = $[4];
+  }
+  return b;
+}
+```
+
+Key observations:
+- `a` is memoized because it's a dependency of the scope containing `b`
+- `c` is not separately memoized because it doesn't escape
+- `b` is memoized because it's returned
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md
new file mode 100644
index 00000000000..c0b524918a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md
@@ -0,0 +1,138 @@
+# pruneNonReactiveDependencies
+
+## File
+`src/ReactiveScopes/PruneNonReactiveDependencies.ts`
+
+## Purpose
+This pass removes dependencies from reactive scopes that are guaranteed to be **non-reactive** (i.e., their values cannot change between renders). This optimization reduces unnecessary memoization invalidations by ensuring scopes only depend on values that can actually change.
+
+The pass complements `PropagateScopeDependencies`, which infers dependencies without considering reactivity. This subsequent pruning step filters out dependencies that are semantically constant.
+
+## Input Invariants
+- The function has been converted to a ReactiveFunction structure
+- `InferReactivePlaces` has annotated places with `{reactive: true}` where values can change
+- Each `ReactiveScopeBlock` has a `scope.dependencies` set populated by `PropagateScopeDependenciesHIR`
+- Type inference has run, so identifiers have type information for `isStableType` checks
+
+## Output Guarantees
+- **Non-reactive dependencies removed**: All dependencies in `scope.dependencies` are reactive after this pass
+- **Scope outputs marked reactive if needed**: If a scope has any reactive dependencies remaining, all its outputs are marked reactive
+- **Stable types remain non-reactive through property loads**: When loading properties from stable types (like `useReducer` dispatch functions), the result is not added to the reactive set
+
+## Algorithm
+
+### Phase 1: Collect Reactive Identifiers
+The `collectReactiveIdentifiers` helper builds the initial set of reactive identifiers by:
+1. Visiting all places in the ReactiveFunction
+2. Adding any place marked `{reactive: true}` to the set
+3. For pruned scopes, adding declarations that are not primitives and not stable ref types
+
+### Phase 2: Propagate Reactivity and Prune Dependencies
+The main `Visitor` class traverses the ReactiveFunction and:
+
+1. **For Instructions** - Propagates reactivity through data flow:
+   - `LoadLocal`: If source is reactive, mark the lvalue as reactive
+   - `StoreLocal`: If source value is reactive, mark both the local variable and lvalue as reactive
+   - `Destructure`: If source is reactive, mark all pattern operands as reactive (except stable types)
+   - `PropertyLoad`: If object is reactive AND result is not a stable type, mark result as reactive
+   - `ComputedLoad`: If object OR property is reactive, mark result as reactive
+
+2. **For Scopes** - Prunes non-reactive dependencies and propagates outputs:
+   - Delete each dependency from `scope.dependencies` if its identifier is not in the reactive set
+   - If any dependencies remain after pruning, mark all scope outputs as reactive
+
+### Key Insight: Stable Types
+The pass leverages `isStableType` to prevent reactivity from flowing through certain React-provided stable values:
+
+```typescript
+function isStableType(id: Identifier): boolean {
+  return (
+    isSetStateType(id) ||       // useState setter
+    isSetActionStateType(id) || // useActionState setter
+    isDispatcherType(id) ||     // useReducer dispatcher
+    isUseRefType(id) ||         // useRef result
+    isStartTransitionType(id) ||// useTransition startTransition
+    isSetOptimisticType(id)     // useOptimistic setter
+  );
+}
+```
+
+## Edge Cases
+
+### Unmemoized Values Spanning Hook Calls
+A value created before a hook call and mutated after cannot be memoized. However, if it's non-reactive, it still should not appear as a dependency of downstream scopes.
+
+### Stable Types from Reactive Containers
+When `useReducer` returns `[state, dispatch]`, `state` is reactive but `dispatch` is stable. The pass correctly handles this.
+
+### Pruned Scopes with Reactive Content
+The `CollectReactiveIdentifiers` pass also examines pruned scopes and adds their non-primitive, non-stable-ref declarations to the reactive set.
+
+### Transitive Reactivity Through Scopes
+When a scope retains at least one reactive dependency, ALL its outputs become reactive.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `unmemoized-nonreactive-dependency-is-pruned-as-dependency.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const x = [];
+  useNoAlias();
+  mutate(x);
+
+  return <div>{x}</div>;
+}
+```
+
+**Before PruneNonReactiveDependencies:**
+```
+scope @2 dependencies=[x$15_@0:TObject<BuiltInArray>] declarations=[$23_@2]
+```
+
+**After PruneNonReactiveDependencies:**
+```
+scope @2 dependencies=[] declarations=[$23_@2]
+```
+
+The dependency on `x` is removed because `x` is created locally and therefore non-reactive.
+
+### Fixture: `useReducer-returned-dispatcher-is-non-reactive.js`
+
+**Input:**
+```javascript
+function f() {
+  const [state, dispatch] = useReducer();
+
+  const onClick = () => {
+    dispatch();
+  };
+
+  return <div onClick={onClick} />;
+}
+```
+
+**Generated Code:**
+```javascript
+function f() {
+  const $ = _c(1);
+  const [, dispatch] = useReducer();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onClick = () => {
+      dispatch();
+    };
+    t0 = <div onClick={onClick} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+```
+
+The `onClick` function only captures `dispatch`, which is a stable type. Therefore, `onClick` is non-reactive, and the JSX element can be memoized with zero dependencies.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md
new file mode 100644
index 00000000000..03ac3362ff3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md
@@ -0,0 +1,111 @@
+# pruneUnusedScopes
+
+## File
+`src/ReactiveScopes/PruneUnusedScopes.ts`
+
+## Purpose
+This pass converts reactive scopes that have no meaningful outputs into "pruned scopes". A pruned scope is no longer memoized - its instructions are executed unconditionally on every render. This optimization removes unnecessary memoization overhead for scopes that don't produce values that need to be cached.
+
+## Input Invariants
+- The input is a `ReactiveFunction` that has already been transformed into reactive scope form
+- Scopes have been created and have `declarations`, `reassignments`, and potentially `earlyReturnValue` populated
+- The pass is called after:
+  - `pruneUnusedLabels` - cleans up unnecessary labels
+  - `pruneNonEscapingScopes` - removes scopes whose outputs don't escape
+  - `pruneNonReactiveDependencies` - removes non-reactive dependencies from scopes
+- Scopes may already be marked as pruned by earlier passes
+
+## Output Guarantees
+Scopes that meet ALL of the following criteria are converted to `pruned-scope`:
+- No return statement within the scope
+- No reassignments (`scope.reassignments.size === 0`)
+- Either no declarations (`scope.declarations.size === 0`), OR all declarations "bubbled up" from inner scopes
+
+Pruned scopes:
+- Keep their original scope metadata (for debugging/tracking)
+- Keep their instructions intact
+- Will be executed unconditionally during codegen (no memoization check)
+
+## Algorithm
+
+The pass uses the visitor pattern with `ReactiveFunctionTransform`:
+
+1. **State Tracking**: A `State` object tracks whether a return statement was encountered:
+   ```typescript
+   type State = {
+     hasReturnStatement: boolean;
+   };
+   ```
+
+2. **Terminal Visitor** (`visitTerminal`): Checks if any terminal is a `return` statement
+
+3. **Scope Transform** (`transformScope`): For each scope:
+   - Creates a fresh state for this scope
+   - Recursively visits the scope's contents
+   - Checks pruning criteria:
+     - `!scopeState.hasReturnStatement` - no early return
+     - `scope.reassignments.size === 0` - no reassignments
+     - `scope.declarations.size === 0` OR `!hasOwnDeclaration(scopeBlock)` - no outputs
+
+4. **hasOwnDeclaration Helper**: Determines if a scope has "own" declarations vs declarations propagated from nested scopes
+
+## Edge Cases
+
+### Return Statements
+Scopes containing return statements are preserved because early returns need memoization to avoid re-executing the return check on every render.
+
+### Bubbled-Up Declarations
+When nested scopes are flattened or merged, their declarations may be propagated to parent scopes. The `hasOwnDeclaration` check ensures that parent scopes with only inherited declarations can still be pruned.
+
+### Reassignments
+Scopes with reassignments are kept because the reassignment represents a side effect that needs to be tracked for memoization.
+
+### Already-Pruned Scopes
+The pass operates on `ReactiveScopeBlock` (kind: 'scope'), not `PrunedReactiveScopeBlock`. Scopes already pruned by earlier passes are not revisited.
+
+### Interaction with Subsequent Passes
+The `MergeReactiveScopesThatInvalidateTogether` pass explicitly handles pruned scopes - it does not merge across them.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `prune-scopes-whose-deps-invalidate-array.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+What happens:
+- The scope for `x` cannot be memoized because `useHook()` is called inside it
+- `FlattenScopesWithHooksOrUseHIR` marks scope @0 as `pruned-scope`
+- `PruneUnusedScopes` doesn't change it further since it's already pruned
+
+**Output (no memoization for x):**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+### Key Insight
+
+The `pruneUnusedScopes` pass is part of a multi-pass pruning strategy:
+1. `FlattenScopesWithHooksOrUseHIR` - Prunes scopes that contain hook/use calls
+2. `pruneNonEscapingScopes` - Prunes scopes whose outputs don't escape
+3. `pruneNonReactiveDependencies` - Removes non-reactive dependencies
+4. **`pruneUnusedScopes`** - Prunes scopes with no remaining outputs
+
+This pass acts as a cleanup for scopes that became "empty" after previous pruning passes removed their outputs.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md
new file mode 100644
index 00000000000..4ed964116bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md
@@ -0,0 +1,213 @@
+# mergeReactiveScopesThatInvalidateTogether
+
+## File
+`src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts`
+
+## Purpose
+This pass is an optimization that reduces memoization overhead in the compiled output by merging reactive scopes that will always invalidate together. The pass operates on the ReactiveFunction representation and works in two main scenarios:
+
+1. **Consecutive Scopes**: When two scopes appear sequentially in the same reactive block with identical dependencies (or where the output of the first scope is the sole input to the second), they are merged into a single scope. This reduces the number of memo cache slots used and eliminates redundant dependency comparisons.
+
+2. **Nested Scopes**: When an inner scope has the same dependencies as its parent scope, the inner scope is flattened into the parent. Since PropagateScopeDependencies propagates dependencies upward, nested scopes can only have equal or fewer dependencies than their parents, never more. When they're equal, the inner scope always invalidates with the parent, making it safe and beneficial to flatten.
+
+## Input Invariants
+- The ReactiveFunction has already undergone scope dependency propagation (via `PropagateScopeDependencies`)
+- The function has been pruned of unused scopes (via `pruneNonReactiveDependencies` and `pruneUnusedScopes`)
+- Scopes have valid `dependencies`, `declarations`, `range`, and `reassignments` fields
+- The ReactiveFunction is in a valid structural state with properly formed blocks and instructions
+
+## Output Guarantees
+- **Fewer scopes**: Consecutive and nested scopes with identical dependencies are merged
+- **Valid scope ranges**: Merged scopes have their `range.end` updated to cover all merged instructions
+- **Updated declarations**: Scope declarations are updated to remove any that are no longer used after the merged scope
+- **Merged scope tracking**: The `scope.merged` set tracks which scope IDs were merged into each surviving scope
+- **Preserved semantics**: Only safe-to-memoize intermediate instructions are absorbed into merged scopes
+
+## Algorithm
+
+The pass operates in multiple phases:
+
+### Phase 1: Find Last Usage
+A visitor (`FindLastUsageVisitor`) collects the last usage instruction ID for each declaration:
+
+```typescript
+class FindLastUsageVisitor extends ReactiveFunctionVisitor<void> {
+  lastUsage: Map<DeclarationId, InstructionId> = new Map();
+
+  override visitPlace(id: InstructionId, place: Place, _state: void): void {
+    const previousUsage = this.lastUsage.get(place.identifier.declarationId);
+    const lastUsage =
+      previousUsage !== undefined
+        ? makeInstructionId(Math.max(previousUsage, id))
+        : id;
+    this.lastUsage.set(place.identifier.declarationId, lastUsage);
+  }
+}
+```
+
+### Phase 2: Transform (Nested Scope Flattening)
+The `transformScope` method flattens nested scopes with identical dependencies:
+
+```typescript
+override transformScope(
+  scopeBlock: ReactiveScopeBlock,
+  state: ReactiveScopeDependencies | null,
+): Transformed<ReactiveStatement> {
+  this.visitScope(scopeBlock, scopeBlock.scope.dependencies);
+  if (
+    state !== null &&
+    areEqualDependencies(state, scopeBlock.scope.dependencies)
+  ) {
+    return {kind: 'replace-many', value: scopeBlock.instructions};
+  } else {
+    return {kind: 'keep'};
+  }
+}
+```
+
+### Phase 3: Visit Block (Consecutive Scope Merging)
+Within `visitBlock`, the pass:
+1. First traverses nested blocks recursively
+2. Iterates through instructions, tracking merge candidates
+3. Determines if consecutive scopes can merge based on:
+   - Identical dependencies, OR
+   - Output of first scope is input to second scope (with always-invalidating types)
+4. Collects intermediate lvalues and ensures they're only used by the next scope
+5. Merges eligible scopes by combining instructions and updating range/declarations
+
+### Key Merging Conditions (`canMergeScopes`):
+```typescript
+function canMergeScopes(
+  current: ReactiveScopeBlock,
+  next: ReactiveScopeBlock,
+  temporaries: Map<DeclarationId, DeclarationId>,
+): boolean {
+  // Don't merge scopes with reassignments
+  if (current.scope.reassignments.size !== 0 || next.scope.reassignments.size !== 0) {
+    return false;
+  }
+  // Merge scopes whose dependencies are identical
+  if (areEqualDependencies(current.scope.dependencies, next.scope.dependencies)) {
+    return true;
+  }
+  // Merge scopes where outputs of previous are inputs of next
+  // (with always-invalidating type check)
+  // ...
+}
+```
+
+### Always-Invalidating Types:
+```typescript
+export function isAlwaysInvalidatingType(type: Type): boolean {
+  switch (type.kind) {
+    case 'Object': {
+      switch (type.shapeId) {
+        case BuiltInArrayId:
+        case BuiltInObjectId:
+        case BuiltInFunctionId:
+        case BuiltInJsxId: {
+          return true;
+        }
+      }
+      break;
+    }
+    case 'Function': {
+      return true;
+    }
+  }
+  return false;
+}
+```
+
+## Edge Cases
+
+### Terminals
+The pass does not merge across terminals (control flow boundaries).
+
+### Pruned Scopes
+Merging stops at pruned scopes.
+
+### Reassignments
+Scopes containing reassignments cannot be merged (side-effect ordering concerns).
+
+### Intermediate Reassignments
+Non-const StoreLocal instructions between scopes prevent merging.
+
+### Safe Intermediate Instructions
+Only certain instruction types are allowed between merged scopes: `BinaryExpression`, `ComputedLoad`, `JSXText`, `LoadGlobal`, `LoadLocal`, `Primitive`, `PropertyLoad`, `TemplateLiteral`, `UnaryExpression`, and const `StoreLocal`.
+
+### Lvalue Usage
+Intermediate values must be last-used at or before the next scope to allow merging.
+
+### Non-Invalidating Outputs
+If a scope's output may not change when inputs change (e.g., `foo(x) { return x < 10 }` returns same boolean for different x values), that scope cannot be a merge candidate for subsequent scopes.
+
+## TODOs
+```typescript
+/*
+ * TODO LeaveSSA: use IdentifierId for more precise tracking
+ * Using DeclarationId is necessary for compatible output but produces suboptimal results
+ * in cases where a scope defines a variable, but that version is never read and always
+ * overwritten later.
+ * see reassignment-separate-scopes.js for example
+ */
+lastUsage: Map<DeclarationId, InstructionId> = new Map();
+```
+
+## Example
+
+### Fixture: `merge-consecutive-scopes-deps-subset-of-decls.js`
+
+**Input:**
+```javascript
+import {useState} from 'react';
+
+function Component() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>Decrement</button>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+```
+
+**After MergeReactiveScopesThatInvalidateTogether** (from `yarn snap -p merge-consecutive-scopes-deps-subset-of-decls.js -d`):
+```
+scope @1 [7:24] dependencies=[count$32:TPrimitive] declarations=[$51_@5] reassignments=[] {
+  [8] $35_@1 = Function @context[setCount$33, count$32]  // decrement callback
+  [10] $41 = JSXText "Decrement"
+  [12] $42_@2 = JSX <button onClick={$35_@1}>{$41}</button>
+  [15] $43_@3 = Function @context[setCount$33, count$32]  // increment callback
+  [17] $49 = JSXText "Increment"
+  [19] $50_@4 = JSX <button onClick={$43_@3}>{$49}</button>
+  [22] $51_@5 = JSX <div>{$42_@2}{$50_@4}</div>
+}
+```
+
+All scopes are merged because they share `count` as a dependency. Without merging, this would have separate scopes for each callback and button element.
+
+**Generated Code:**
+```javascript
+function Component() {
+  const $ = _c(2);
+  const [count, setCount] = useState(0);
+  let t0;
+  if ($[0] !== count) {
+    t0 = (
+      <div>
+        <button onClick={() => setCount(count - 1)}>Decrement</button>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+    );
+    $[0] = count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+```
+
+The merged version uses only 2 cache slots instead of potentially 6-8.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md
new file mode 100644
index 00000000000..38bbc0de313
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md
@@ -0,0 +1,143 @@
+# pruneAlwaysInvalidatingScopes
+
+## File
+`src/ReactiveScopes/PruneAlwaysInvalidatingScopes.ts`
+
+## Purpose
+This pass identifies and prunes reactive scopes whose dependencies will *always* invalidate on every render, making memoization pointless. Specifically, it tracks values that are guaranteed to be new allocations (arrays, objects, JSX, new expressions) and checks if those values are used outside of any memoization scope. When a downstream scope depends on such an unmemoized always-invalidating value, the scope is pruned because it would re-execute on every render anyway.
+
+The optimization avoids wasted comparisons in the generated code. Without this pass, the compiler would emit dependency checks for scopes that will never cache-hit, adding runtime overhead with no benefit. By converting these scopes to `pruned-scope` nodes, the codegen emits the instructions inline without memoization guards.
+
+## Input Invariants
+- The pass expects a `ReactiveFunction` with scopes already formed
+- Scopes should have their `dependencies` populated with the identifiers they depend on
+- The pass runs after `MergeReactiveScopesThatInvalidateTogether`
+- Hook calls have already caused scope flattening via `FlattenScopesWithHooksOrUseHIR`
+
+## Output Guarantees
+- Scopes that depend on unmemoized always-invalidating values are converted to `pruned-scope` nodes
+- The `unmemoizedValues` set correctly propagates through `StoreLocal`/`LoadLocal` instructions
+- All declarations and reassignments within pruned scopes that are themselves always-invalidating are added to `unmemoizedValues`, enabling cascading pruning of downstream scopes
+
+## Algorithm
+
+The pass uses a `ReactiveFunctionTransform` visitor with two key methods:
+
+### 1. `transformInstruction` - Tracks always-invalidating values:
+
+```typescript
+switch (value.kind) {
+  case 'ArrayExpression':
+  case 'ObjectExpression':
+  case 'JsxExpression':
+  case 'JsxFragment':
+  case 'NewExpression': {
+    if (lvalue !== null) {
+      this.alwaysInvalidatingValues.add(lvalue.identifier);
+      if (!withinScope) {
+        this.unmemoizedValues.add(lvalue.identifier);  // Key: only if outside a scope
+      }
+    }
+    break;
+  }
+  // Also propagates through StoreLocal and LoadLocal
+}
+```
+
+### 2. `transformScope` - Prunes scopes with unmemoized dependencies:
+
+```typescript
+for (const dep of scopeBlock.scope.dependencies) {
+  if (this.unmemoizedValues.has(dep.identifier)) {
+    // Propagate unmemoized status to scope outputs
+    for (const [_, decl] of scopeBlock.scope.declarations) {
+      if (this.alwaysInvalidatingValues.has(decl.identifier)) {
+        this.unmemoizedValues.add(decl.identifier);
+      }
+    }
+    return {
+      kind: 'replace',
+      value: {
+        kind: 'pruned-scope',
+        scope: scopeBlock.scope,
+        instructions: scopeBlock.instructions,
+      },
+    };
+  }
+}
+```
+
+## Edge Cases
+
+### Function Calls Not Considered Always-Invalidating
+The pass optimistically assumes function calls may return primitives, so `makeArray()` doesn't trigger pruning even though it might return a new array.
+
+### Conditional Allocations
+Code like `x = cond ? [] : 42` doesn't trigger pruning because the value might be a primitive.
+
+### Propagation Through Locals
+The pass correctly tracks values through `StoreLocal` and `LoadLocal` to handle variable reassignments and loads.
+
+### Cascading Pruning
+When a scope is pruned, its always-invalidating outputs become unmemoized, potentially causing downstream scopes to be pruned as well.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `prune-scopes-whose-deps-invalidate-array.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+**After PruneAlwaysInvalidatingScopes** (from `yarn snap -p prune-scopes-whose-deps-invalidate-array.js -d`):
+```
+<pruned> scope @0 [1:14] dependencies=[] declarations=[x$21_@0] reassignments=[] {
+  [2] $20_@0 = Array []
+  [3] StoreLocal Const x$21_@0 = $20_@0
+  [4] $23 = LoadGlobal import { useHook }
+  [6] $24_@1 = Call $23()       // Hook flattens scope
+  [7] break bb9 (implicit)
+  [8] $25_@0 = LoadLocal x$21_@0
+  [9] $26 = PropertyLoad $25_@0.push
+  [10] $27 = LoadLocal props$19
+  [11] $28 = PropertyLoad $27.value
+  [12] $29 = MethodCall $25_@0.$26($28)
+}
+[14] $30 = LoadLocal x$21_@0
+<pruned> scope @2 [15:23] dependencies=[x$21_@0:TObject<BuiltInArray>] declarations=[$35_@3] {
+  [16] $31_@2 = Array [$30]
+  [18] StoreLocal Const y$32 = $31_@2
+  [19] $34 = LoadLocal y$32
+  [21] $35_@3 = Array [$34]
+}
+[23] return $35_@3
+```
+
+Key observations:
+- Scope @0 is pruned because the hook call (`useHook()`) flattens it (hook rules prevent memoization around hooks)
+- `x` is an `ArrayExpression` created in the pruned scope @0, making it unmemoized
+- Scope @2 depends on `x$21_@0` which is unmemoized and always-invalidating (it's an array)
+- Therefore, scope @2 is also pruned - cascading pruning
+
+**Generated Code:**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+The output matches the input because all memoization was pruned - the code runs unconditionally on every render.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md
new file mode 100644
index 00000000000..7fd578eea77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md
@@ -0,0 +1,183 @@
+# propagateEarlyReturns
+
+## File
+`src/ReactiveScopes/PropagateEarlyReturns.ts`
+
+## Purpose
+The `propagateEarlyReturns` pass ensures that reactive scopes (memoization blocks) correctly honor the control flow behavior of the original code, particularly when a function returns early from within a reactive scope. Without this transformation, if a component returned early on the previous render and the inputs have not changed, the cached memoization block would be skipped entirely, but the early return would not occur, causing incorrect behavior.
+
+The pass solves this by transforming `return` statements inside reactive scopes into assignments to a temporary variable followed by a labeled `break`. After the reactive scope completes, generated code checks whether the early return sentinel value was replaced with an actual return value; if so, the function returns that value.
+
+## Input Invariants
+1. **ReactiveFunction structure**: The input must be a `ReactiveFunction` with scopes already inferred (reactive scope blocks are already established)
+2. **Scope earlyReturnValue not set**: The pass expects `scopeBlock.scope.earlyReturnValue === null` for scopes it processes
+3. **Return statements within reactive scopes**: The pass specifically targets `return` terminal statements that appear within a `withinReactiveScope` context
+
+## Output Guarantees
+1. **Labeled scope blocks**: Top-level reactive scopes containing early returns are wrapped in a labeled block (e.g., `bb14: { ... }`)
+2. **Sentinel initialization**: At the start of each such scope, a temporary variable is initialized to `Symbol.for("react.early_return_sentinel")`
+3. **Return-to-break transformation**: All `return` statements inside the scope are replaced with:
+   - An assignment of the return value to the early return temporary
+   - A `break` to the scope's label
+4. **Early return declaration**: The temporary variable is registered as a declaration of the scope so it gets memoized
+5. **Post-scope check**: During codegen, an if-statement is added after the scope to check if the temporary differs from the sentinel and return it if so
+
+## Algorithm
+
+The pass uses a visitor pattern with a `ReactiveFunctionTransform` that tracks two pieces of state:
+
+```typescript
+type State = {
+  withinReactiveScope: boolean;  // Are we inside a reactive scope?
+  earlyReturnValue: ReactiveScope['earlyReturnValue'];  // Bubble up early return info
+};
+```
+
+### Key Steps:
+
+1. **visitScope** - When entering a reactive scope:
+   - Create an inner state with `withinReactiveScope: true`
+   - Traverse the scope's contents
+   - If any early returns were found (`earlyReturnValue !== null`):
+     - If this is the **outermost** scope (parent's `withinReactiveScope` is false):
+       - Store the early return info on the scope
+       - Add the temporary as a scope declaration
+       - Prepend sentinel initialization instructions
+       - Wrap the original instructions in a labeled block
+     - Otherwise, propagate the early return info to the parent scope
+
+2. **transformTerminal** - When encountering a `return` inside a reactive scope:
+   - Create or reuse an early return value identifier
+   - Replace the return with:
+     ```typescript
+     [
+       {kind: 'instruction', /* StoreLocal: reassign earlyReturnValue = returnValue */},
+       {kind: 'terminal', /* break to earlyReturnValue.label */}
+     ]
+     ```
+
+### Sentinel Initialization Code (synthesized at scope start):
+```typescript
+// Load Symbol.for and call it with the sentinel string
+let t0 = Symbol.for("react.early_return_sentinel");
+```
+
+## Edge Cases
+
+### Nested Reactive Scopes
+When early returns occur in nested scopes, only the **outermost** scope gets the labeled block wrapper. Inner scopes bubble their early return information up via `parentState.earlyReturnValue`.
+
+### Multiple Early Returns in Same Scope
+All returns share the same temporary variable and label. The first return found creates the identifier, subsequent returns reuse it.
+
+### Partial Early Returns
+When only some control flow paths return early (e.g., one branch returns, the other falls through), the sentinel check after the scope allows normal execution to continue if no early return occurred.
+
+### Already Processed Scopes
+If `scopeBlock.scope.earlyReturnValue !== null` on entry, the pass exits early without modification.
+
+### Returns Outside Reactive Scopes
+The pass only transforms returns where `state.withinReactiveScope === true`. Returns outside scopes are left unchanged.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `early-return-within-reactive-scope.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    return x;
+  } else {
+    return makeArray(props.b);
+  }
+}
+```
+
+**After PropagateEarlyReturns** (from `yarn snap -p early-return-within-reactive-scope.js -d`):
+```
+scope @0 [...] earlyReturn={id: #t34$34, label: 14} {
+  [0] $36 = LoadGlobal(global) Symbol
+  [0] $37 = PropertyLoad $36.for
+  [0] $38 = "react.early_return_sentinel"
+  [0] $35 = MethodCall $36.$37($38)
+  [0] StoreLocal Let #t34$34{reactive} = $35    // Initialize sentinel
+  bb14: {
+    [2] $19_@0 = Array []
+    [3] StoreLocal Const x$20_@0 = $19_@0
+    [4] $22{reactive} = LoadLocal props$18
+    [5] $23{reactive} = PropertyLoad $22.cond
+    [6] if ($23) {
+      [7] $24_@0 = LoadLocal x$20_@0
+      [8] $25 = PropertyLoad $24_@0.push
+      [9] $26 = LoadLocal props$18
+      [10] $27 = PropertyLoad $26.a
+      [11] $28 = MethodCall $24_@0.$25($27)
+      [12] $29 = LoadLocal x$20_@0
+      [0] StoreLocal Reassign #t34$34 = $29     // was: return x
+      [0] break bb14 (labeled)
+    } else {
+      [14] $30 = LoadGlobal import { makeArray }
+      [15] $31 = LoadLocal props$18
+      [16] $32 = PropertyLoad $31.b
+      scope @1 [...] {
+        [18] $33_@1 = Call $30($32)
+      }
+      [0] StoreLocal Reassign #t34$34 = $33_@1  // was: return makeArray(props.b)
+      [0] break bb14 (labeled)
+    }
+  }
+}
+```
+
+Key observations:
+- Scope @0 now has `earlyReturn={id: #t34$34, label: 14}`
+- Sentinel initialization code is prepended to the scope
+- The scope body is wrapped in `bb14: { ... }`
+- Both `return x` and `return makeArray(props.b)` are transformed to `StoreLocal Reassign + break bb14`
+
+**Generated Code:**
+```javascript
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[4] !== props.b) {
+          t1 = makeArray(props.b);
+          $[4] = props.b;
+          $[5] = t1;
+        } else {
+          t1 = $[5];
+        }
+        t0 = t1;
+        break bb0;
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+```
+
+This transformation ensures that when inputs don't change, the cached return value is used and returned, preserving referential equality and correct early return behavior.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md
new file mode 100644
index 00000000000..a08c2bf154e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md
@@ -0,0 +1,203 @@
+# promoteUsedTemporaries
+
+## File
+`src/ReactiveScopes/PromoteUsedTemporaries.ts`
+
+## Purpose
+This pass promotes temporary variables (identifiers with no name) to named variables when they need to be referenced across scope boundaries or in code generation. Temporaries are intermediate values that the compiler creates during lowering; they are typically inlined at their use sites during codegen. However, some temporaries must be emitted as separate declarations - this pass identifies and names them.
+
+The pass ensures that:
+1. Scope dependencies and declarations have proper names for codegen
+2. Variables referenced across reactive scope boundaries are named
+3. JSX tag identifiers get special naming (`T0`, `T1`, etc.)
+4. Temporaries with interposing side-effects are promoted to preserve ordering
+
+## Input Invariants
+- The ReactiveFunction has undergone scope construction and dependency propagation
+- Identifiers may have `name === null` (temporaries) or be named
+- Scopes have `dependencies`, `declarations`, and `reassignments` populated
+- Pruned scopes are properly marked with `kind: 'pruned-scope'`
+
+## Output Guarantees
+- All scope dependencies have non-null names
+- All scope declarations have non-null names
+- JSX tag temporaries use uppercase naming (`T0`, `T1`, ...)
+- Regular temporaries use lowercase naming (`#t{id}`)
+- All instances of a promoted identifier share the same name (via DeclarationId tracking)
+- Temporaries with interposing mutating instructions are promoted to preserve source ordering
+
+## Algorithm
+
+The pass operates in four phases using visitor classes:
+
+### Phase 1: CollectPromotableTemporaries
+Collects information about which temporaries may need promotion:
+
+```typescript
+class CollectPromotableTemporaries {
+  // Tracks pruned scope declarations and whether they're used outside their scope
+  pruned: Map<DeclarationId, {activeScopes: Array<ScopeId>; usedOutsideScope: boolean}>
+
+  // Tracks identifiers used as JSX tags (need uppercase names)
+  tags: Set<DeclarationId>
+}
+```
+
+- When visiting a `JsxExpression`, adds the tag identifier to `tags`
+- When visiting a `PrunedScope`, records its declarations
+- Tracks when pruned declarations are used in different scopes
+
+### Phase 2: PromoteTemporaries
+Promotes temporaries that appear in positions requiring names:
+
+```typescript
+override visitScope(scopeBlock: ReactiveScopeBlock, state: State): void {
+  // Promote all dependencies without names
+  for (const dep of scopeBlock.scope.dependencies) {
+    if (identifier.name == null) {
+      promoteIdentifier(identifier, state);
+    }
+  }
+  // Promote all declarations without names
+  for (const [, declaration] of scopeBlock.scope.declarations) {
+    if (declaration.identifier.name == null) {
+      promoteIdentifier(declaration.identifier, state);
+    }
+  }
+}
+```
+
+Also promotes:
+- Function parameters without names
+- Pruned scope declarations used outside their scope
+
+### Phase 3: PromoteInterposedTemporaries
+Handles ordering-sensitive promotion:
+
+```typescript
+class PromoteInterposedTemporaries {
+  // Instructions that emit as statements can interpose between temp defs and uses
+  // If such an instruction occurs, mark pending temporaries as needing promotion
+
+  override visitInstruction(instruction: ReactiveInstruction, state: InterState): void {
+    // For instructions that become statements (calls, stores, etc.):
+    if (willBeStatement && !constStore) {
+      // Mark all pending temporaries as needing promotion
+      for (const [key, [ident, _]] of state.entries()) {
+        state.set(key, [ident, true]);  // Mark as needing promotion
+      }
+    }
+  }
+}
+```
+
+This preserves source ordering when side-effects occur between a temporary's definition and use.
+
+### Phase 4: PromoteAllInstancesOfPromotedTemporaries
+Ensures all instances of a promoted identifier share the same name:
+
+```typescript
+class PromoteAllInstancesOfPromotedTemporaries {
+  override visitPlace(_id: InstructionId, place: Place, state: State): void {
+    if (place.identifier.name === null &&
+        state.promoted.has(place.identifier.declarationId)) {
+      promoteIdentifier(place.identifier, state);
+    }
+  }
+}
+```
+
+### Naming Convention
+```typescript
+function promoteIdentifier(identifier: Identifier, state: State): void {
+  if (state.tags.has(identifier.declarationId)) {
+    promoteTemporaryJsxTag(identifier);  // Uses #T{id} for JSX tags
+  } else {
+    promoteTemporary(identifier);  // Uses #t{id} for regular temps
+  }
+  state.promoted.add(identifier.declarationId);
+}
+```
+
+## Edge Cases
+
+### JSX Tag Temporaries
+JSX tags require uppercase names to be valid JSX syntax. The pass tracks which temporaries are used as JSX tags and uses `T0`, `T1`, etc. instead of `t0`, `t1`.
+
+### Pruned Scope Declarations
+Declarations in pruned scopes are only promoted if they're actually used outside the pruned scope, avoiding unnecessary variable declarations.
+
+### Const vs Let Temporaries
+The pass tracks const identifiers specially - they don't need promotion for ordering purposes since they can't be mutated by interposing instructions.
+
+### Global Loads
+Values loaded from globals (and their property loads) are treated as const-like for promotion purposes.
+
+### Method Call Properties
+The property identifier in a method call is treated as const-like to avoid unnecessary promotion.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `simple.js`
+
+**Input:**
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+```
+
+**Before PromoteUsedTemporaries:**
+```
+scope @0 [...] dependencies=[y$14] declarations=[$19_@0]
+scope @1 [...] dependencies=[$22] declarations=[$23_@1]
+```
+
+**After PromoteUsedTemporaries:**
+```
+scope @0 [...] dependencies=[y$14] declarations=[#t5$19_@0]
+scope @1 [...] dependencies=[#t9$22] declarations=[#t10$23_@1]
+```
+
+Key observations:
+- `$19_@0` is promoted to `#t5$19_@0` because it's a scope declaration
+- `$22` is promoted to `#t9$22` because it's a scope dependency
+- `$23_@1` is promoted to `#t10$23_@1` because it's a scope declaration
+- The `#t` prefix indicates this is a promoted temporary (later renamed by `renameVariables`)
+
+**Generated Code:**
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function foo(x, y) {
+  const $ = _c(4);
+  if (x) {
+    let t0;
+    if ($[0] !== y) {
+      t0 = foo(false, y);
+      $[0] = y;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+  const t0 = y * 10;
+  let t1;
+  if ($[2] !== t0) {
+    t1 = [t0];
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+```
+
+The promoted temporaries (`#t5`, `#t9`, `#t10`) become the named variables (`t0`, `t1`) in the output after `renameVariables` runs.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md
new file mode 100644
index 00000000000..d643618d5a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md
@@ -0,0 +1,200 @@
+# renameVariables
+
+## File
+`src/ReactiveScopes/RenameVariables.ts`
+
+## Purpose
+This pass ensures that every named variable in the function has a unique name that doesn't conflict with other variables in the same block scope or with global identifiers. After scope construction and temporary promotion, variables from different source scopes may end up in the same reactive block - this pass resolves any naming conflicts.
+
+The pass also converts the `#t{id}` promoted temporary names into clean output names like `t0`, `t1`, etc.
+
+## Input Invariants
+- The ReactiveFunction has been through `promoteUsedTemporaries`
+- Variables may have names that conflict with:
+  - Other variables in the same or ancestor block scope
+  - Global identifiers referenced by the function
+  - Promoted temporaries with `#t{id}` or `#T{id}` naming
+- The function parameters have names (either from source or promoted)
+
+## Output Guarantees
+- Every named variable has a unique name within its scope
+- No variable shadows a global identifier referenced by the function
+- Promoted temporaries are renamed to `t0`, `t1`, ... (for regular temps)
+- Promoted JSX temporaries are renamed to `T0`, `T1`, ... (for JSX tags)
+- Conflicting source names get disambiguated with `$` suffix (e.g., `foo$0`, `foo$1`)
+- Returns a `Set<string>` of all unique variable names in the function
+
+## Algorithm
+
+### Phase 1: Collect Referenced Globals
+Uses `collectReferencedGlobals(fn)` to build a set of all global identifiers referenced by the function. Variable names must not conflict with these.
+
+### Phase 2: Rename with Scope Stack
+The `Scopes` class maintains:
+
+```typescript
+class Scopes {
+  #seen: Map<DeclarationId, IdentifierName> = new Map();  // Canonical name for each declaration
+  #stack: Array<Map<string, DeclarationId>> = [new Map()];  // Block scope stack
+  #globals: Set<string>;  // Global names to avoid
+  names: Set<ValidIdentifierName> = new Set();  // All assigned names
+}
+```
+
+### Renaming Logic
+```typescript
+visit(identifier: Identifier): void {
+  // Skip unnamed identifiers
+  if (originalName === null) return;
+
+  // If we've already named this declaration, reuse that name
+  const mappedName = this.#seen.get(identifier.declarationId);
+  if (mappedName !== undefined) {
+    identifier.name = mappedName;
+    return;
+  }
+
+  // Find a unique name
+  let name = originalName.value;
+  let id = 0;
+
+  // Promoted temporaries start with t0/T0
+  if (isPromotedTemporary(originalName.value)) {
+    name = `t${id++}`;
+  } else if (isPromotedJsxTemporary(originalName.value)) {
+    name = `T${id++}`;
+  }
+
+  // Increment until we find a unique name
+  while (this.#lookup(name) !== null || this.#globals.has(name)) {
+    if (isPromotedTemporary(...)) {
+      name = `t${id++}`;
+    } else if (isPromotedJsxTemporary(...)) {
+      name = `T${id++}`;
+    } else {
+      name = `${originalName.value}$${id++}`;  // foo$0, foo$1, etc.
+    }
+  }
+
+  identifier.name = makeIdentifierName(name);
+  this.#seen.set(identifier.declarationId, identifier.name);
+}
+```
+
+### Scope Management
+```typescript
+enter(fn: () => void): void {
+  this.#stack.push(new Map());
+  fn();
+  this.#stack.pop();
+}
+
+#lookup(name: string): DeclarationId | null {
+  // Search from innermost to outermost scope
+  for (let i = this.#stack.length - 1; i >= 0; i--) {
+    const entry = this.#stack[i].get(name);
+    if (entry !== undefined) return entry;
+  }
+  return null;
+}
+```
+
+### Visitor Pattern
+```typescript
+class Visitor extends ReactiveFunctionVisitor<Scopes> {
+  override visitBlock(block: ReactiveBlock, state: Scopes): void {
+    state.enter(() => {
+      this.traverseBlock(block, state);
+    });
+  }
+
+  override visitScope(scope: ReactiveScopeBlock, state: Scopes): void {
+    // Visit scope declarations first
+    for (const [_, declaration] of scope.scope.declarations) {
+      state.visit(declaration.identifier);
+    }
+    this.traverseScope(scope, state);
+  }
+
+  override visitPlace(id: InstructionId, place: Place, state: Scopes): void {
+    state.visit(place.identifier);
+  }
+}
+```
+
+## Edge Cases
+
+### Shadowed Variables
+When the compiler merges scopes that had shadowing in the source:
+```javascript
+function foo() {
+  const x = 1;
+  {
+    const x = 2;  // Shadowed in source
+  }
+}
+```
+If both `x` declarations end up in the same compiled scope, they become `x` and `x$0`.
+
+### Global Name Conflicts
+If a local variable would conflict with a referenced global:
+```javascript
+function foo() {
+  const Math = 1;  // Conflicts with global Math if used
+}
+```
+The local gets renamed to `Math$0` if `Math` global is referenced.
+
+### Nested Functions
+The pass recursively processes nested function expressions, entering a new scope for each function body.
+
+### Pruned Scopes
+Pruned scopes don't create a new block scope in the output - the pass traverses their instructions without entering a new scope level.
+
+### DeclarationId Consistency
+The pass uses `DeclarationId` to track which identifiers refer to the same variable, ensuring all references get the same renamed name.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `simple.js`
+
+**Before RenameVariables:**
+```
+scope @0 [...] declarations=[#t5$19_@0]
+scope @1 [...] dependencies=[#t9$22] declarations=[#t10$23_@1]
+```
+
+**After RenameVariables:**
+```
+scope @0 [...] declarations=[t0$19_@0]
+scope @1 [...] dependencies=[t0$22] declarations=[t1$23_@1]
+```
+
+Key observations:
+- `#t5$19_@0` becomes `t0$19_@0` (first temporary in scope)
+- `#t9$22` becomes `t0$22` (first temporary in a different block scope)
+- `#t10$23_@1` becomes `t1$23_@1` (second temporary in that block)
+- The `#t` prefix is removed and sequential numbering is applied
+
+**Generated Code:**
+```javascript
+export default function foo(x, y) {
+  const $ = _c(4);
+  if (x) {
+    let t0;  // Was #t5
+    if ($[0] !== y) {
+      t0 = foo(false, y);
+      // ...
+    }
+    return t0;
+  }
+  const t0 = y * 10;  // Was #t9, reuses t0 since different block scope
+  let t1;  // Was #t10
+  // ...
+}
+```
+
+The pass produces clean, readable output with minimal variable names while avoiding conflicts.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md
new file mode 100644
index 00000000000..a2132990ff9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md
@@ -0,0 +1,289 @@
+# codegenReactiveFunction
+
+## File
+`src/ReactiveScopes/CodegenReactiveFunction.ts`
+
+## Purpose
+This is the final pass that converts the ReactiveFunction representation back into a Babel AST. It generates the memoization code that makes React components and hooks efficient by:
+1. Creating the `useMemoCache` call to allocate cache slots
+2. Generating dependency comparisons to check if values have changed
+3. Emitting conditional blocks that skip computation when cached values are valid
+4. Storing computed values in the cache
+5. Loading cached values when dependencies haven't changed
+
+## Input Invariants
+- The ReactiveFunction has been through all prior passes
+- All identifiers that need names have been promoted and renamed
+- Reactive scopes have finalized `dependencies`, `declarations`, and `reassignments`
+- Early returns have been transformed with sentinel values (via `propagateEarlyReturns`)
+- Pruned scopes are marked with `kind: 'pruned-scope'`
+- Unique identifiers set is available to avoid naming conflicts
+
+## Output Guarantees
+- Returns a `CodegenFunction` with Babel AST `body`
+- All reactive scopes become if-else blocks checking dependencies
+- The `$` cache array is properly sized with `useMemoCache(n)`
+- Each dependency and output gets its own cache slot
+- Pruned scopes emit their instructions inline without memoization
+- Early returns use the sentinel pattern with post-scope checks
+- Statistics are collected: `memoSlotsUsed`, `memoBlocks`, `memoValues`, etc.
+
+## Algorithm
+
+### Entry Point: codegenFunction
+```typescript
+export function codegenFunction(fn: ReactiveFunction): Result<CodegenFunction, CompilerError> {
+  const cx = new Context(...);
+
+  // Optional: Fast Refresh source hash tracking
+  if (enableResetCacheOnSourceFileChanges) {
+    fastRefreshState = { cacheIndex: cx.nextCacheIndex, hash: sha256(source) };
+  }
+
+  const compiled = codegenReactiveFunction(cx, fn);
+
+  // Prepend useMemoCache call if any cache slots used
+  if (cacheCount !== 0) {
+    body.unshift(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          t.identifier('$'),
+          t.callExpression(t.identifier('useMemoCache'), [t.numericLiteral(cacheCount)])
+        )
+      ])
+    );
+  }
+
+  return compiled;
+}
+```
+
+### Context Class
+Tracks state during codegen:
+```typescript
+class Context {
+  #nextCacheIndex: number = 0;  // Allocates cache slots
+  #declarations: Set<DeclarationId> = new Set();  // Tracks declared variables
+  temp: Temporaries;  // Maps identifiers to their expressions
+  errors: CompilerError;
+
+  get nextCacheIndex(): number {
+    return this.#nextCacheIndex++;  // Returns and increments
+  }
+}
+```
+
+### codegenReactiveScope
+The core of memoization code generation:
+
+```typescript
+function codegenReactiveScope(cx: Context, statements: Array<t.Statement>,
+                              scope: ReactiveScope, block: ReactiveBlock): void {
+  const changeExpressions: Array<t.Expression> = [];
+  const cacheStoreStatements: Array<t.Statement> = [];
+  const cacheLoadStatements: Array<t.Statement> = [];
+
+  // 1. Generate dependency checks
+  for (const dep of scope.dependencies) {
+    const index = cx.nextCacheIndex;
+    changeExpressions.push(
+      t.binaryExpression('!==',
+        t.memberExpression(t.identifier('$'), t.numericLiteral(index), true),
+        codegenDependency(cx, dep)
+      )
+    );
+    cacheStoreStatements.push(
+      t.assignmentExpression('=', $[index], dep)
+    );
+  }
+
+  // 2. Generate output cache slots
+  for (const {identifier} of scope.declarations) {
+    const index = cx.nextCacheIndex;
+    // Declare variable if not already declared
+    if (!cx.hasDeclared(identifier)) {
+      statements.push(t.variableDeclaration('let', [t.variableDeclarator(name, null)]));
+    }
+    cacheLoads.push({name, index, value: name});
+  }
+
+  // 3. Build test condition
+  let testCondition = changeExpressions.reduce((acc, expr) =>
+    t.logicalExpression('||', acc, expr)
+  );
+
+  // 4. If no dependencies, use sentinel check
+  if (testCondition === null) {
+    testCondition = t.binaryExpression('===',
+      $[firstOutputIndex],
+      t.callExpression(Symbol.for, ['react.memo_cache_sentinel'])
+    );
+  }
+
+  // 5. Generate the memoization if-else
+  statements.push(
+    t.ifStatement(
+      testCondition,
+      computationBlock,  // Compute + store in cache
+      cacheLoadBlock     // Load from cache
+    )
+  );
+}
+```
+
+### Generated Structure
+For a scope with dependencies `[a, b]` and output `result`:
+
+```javascript
+let result;
+if ($[0] !== a || $[1] !== b) {
+  // Computation block
+  result = compute(a, b);
+
+  // Store dependencies
+  $[0] = a;
+  $[1] = b;
+
+  // Store output
+  $[2] = result;
+} else {
+  // Load from cache
+  result = $[2];
+}
+```
+
+### Early Return Handling
+When a scope has an early return (from `propagateEarlyReturns`):
+
+```typescript
+// Before scope: initialize sentinel
+t0 = Symbol.for("react.early_return_sentinel");
+
+// Scope generates labeled block
+bb0: {
+  // ... computation ...
+  if (cond) {
+    t0 = returnValue;
+    break bb0;
+  }
+}
+
+// After scope: check for early return
+if (t0 !== Symbol.for("react.early_return_sentinel")) {
+  return t0;
+}
+```
+
+### Pruned Scopes
+Pruned scopes emit their instructions inline without memoization:
+```typescript
+case 'pruned-scope': {
+  const scopeBlock = codegenBlockNoReset(cx, item.instructions);
+  statements.push(...scopeBlock.body);  // Inline, no memoization
+  break;
+}
+```
+
+## Edge Cases
+
+### Zero Dependencies
+Scopes with no dependencies use a sentinel value check instead:
+```javascript
+if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  // First render only
+}
+```
+
+### Fast Refresh / HMR
+When `enableResetCacheOnSourceFileChanges` is enabled, the generated code includes a source hash check that resets the cache when the source changes:
+```javascript
+if ($[0] !== "source_hash_abc123") {
+  for (let $i = 0; $i < cacheCount; $i++) {
+    $[$i] = Symbol.for("react.memo_cache_sentinel");
+  }
+  $[0] = "source_hash_abc123";
+}
+```
+
+### Change Detection for Debugging
+When `enableChangeDetectionForDebugging` is configured, additional code is generated to detect when cached values unexpectedly change.
+
+### Labeled Breaks
+Control flow with labeled breaks (for early returns or loop exits) uses `codegenLabel` to generate consistent label names:
+```typescript
+function codegenLabel(id: BlockId): string {
+  return `bb${id}`;  // e.g., "bb0", "bb1"
+}
+```
+
+### Nested Functions
+Function expressions and object methods are recursively processed with their own contexts.
+
+### FBT/Internationalization
+Special handling for FBT operands ensures they're memoized in the same scope for correct internationalization behavior.
+
+## Statistics Collected
+```typescript
+type CodegenFunction = {
+  memoSlotsUsed: number;     // Total cache slots allocated
+  memoBlocks: number;        // Number of reactive scopes
+  memoValues: number;        // Total memoized values
+  prunedMemoBlocks: number;  // Scopes that were pruned
+  prunedMemoValues: number;  // Values in pruned scopes
+  hasInferredEffect: boolean;
+  hasFireRewrite: boolean;
+};
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `simple.js`
+
+**Input:**
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+```
+
+**Generated Code:**
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function foo(x, y) {
+  const $ = _c(4);  // Allocate 4 cache slots
+  if (x) {
+    let t0;
+    if ($[0] !== y) {           // Check dependency
+      t0 = foo(false, y);       // Compute
+      $[0] = y;                 // Store dependency
+      $[1] = t0;                // Store output
+    } else {
+      t0 = $[1];                // Load from cache
+    }
+    return t0;
+  }
+  const t0 = y * 10;
+  let t1;
+  if ($[2] !== t0) {            // Check dependency
+    t1 = [t0];                  // Compute
+    $[2] = t0;                  // Store dependency
+    $[3] = t1;                  // Store output
+  } else {
+    t1 = $[3];                  // Load from cache
+  }
+  return t1;
+}
+```
+
+Key observations:
+- `_c(4)` allocates 4 cache slots total
+- First scope uses slots 0-1: slot 0 for `y` dependency, slot 1 for `t0` output
+- Second scope uses slots 2-3: slot 2 for `t0` (the computed `y * 10`), slot 3 for `t1` (the array)
+- Each scope has an if-else structure: compute/store vs load
+- The memoization ensures referential equality of the returned array when `y` hasn't changed
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md
new file mode 100644
index 00000000000..26ee425ceea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md
@@ -0,0 +1,203 @@
+# transformFire
+
+## File
+`src/Transform/TransformFire.ts`
+
+## Purpose
+This pass transforms `fire(fn())` calls inside `useEffect` lambdas into calls to a `useFire` hook that provides stable function references. The `fire()` function is a React API that allows effect callbacks to call functions with their current values while maintaining stable effect dependencies.
+
+Without this transform, if an effect depends on a function that changes every render, the effect would re-run on every render. The `useFire` hook provides a stable wrapper that always calls the latest version of the function.
+
+## Input Invariants
+- The `enableFire` feature flag must be enabled
+- `fire()` calls must only appear inside `useEffect` lambdas
+- Each `fire()` call must have exactly one argument (a function call expression)
+- The function being fired must be consistent across all `fire()` calls in the same effect
+
+## Output Guarantees
+- All `fire(fn(...args))` calls are replaced with direct calls `fired_fn(...args)`
+- A `useFire(fn)` hook call is inserted before the `useEffect`
+- The fired function is stored in a temporary and captured by the effect
+- The original function `fn` is removed from the effect's captured context
+
+## Algorithm
+
+### Phase 1: Find Fire Calls
+```typescript
+function replaceFireFunctions(fn: HIRFunction, context: Context): void {
+  // For each useEffect call instruction:
+  //   1. Find all fire() calls in the effect lambda
+  //   2. Validate they have proper arguments
+  //   3. Track which functions are being fired
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      if (isUseEffectCall(instr)) {
+        const lambda = getEffectLambda(instr);
+        findAndReplaceFireCalls(lambda, fireFunctions);
+      }
+    }
+  }
+}
+```
+
+### Phase 2: Insert useFire Hooks
+For each function being fired, insert a `useFire` call:
+```typescript
+// Before:
+useEffect(() => {
+  fire(foo(props));
+}, [foo, props]);
+
+// After:
+const t0 = useFire(foo);
+useEffect(() => {
+  t0(props);
+}, [t0, props]);
+```
+
+### Phase 3: Replace Fire Calls
+Transform `fire(fn(...args))` to `firedFn(...args)`:
+```typescript
+// The fire() wrapper is removed
+// The inner function call uses the useFire'd version
+fire(foo(x, y))  →  t0(x, y)  // where t0 = useFire(foo)
+```
+
+### Phase 4: Validate No Remaining Fire Uses
+```typescript
+function ensureNoMoreFireUses(fn: HIRFunction, context: Context): void {
+  // Ensure all fire() uses have been transformed
+  // Report errors for any remaining fire() calls
+}
+```
+
+## Edge Cases
+
+### Fire Outside Effect
+`fire()` calls outside `useEffect` lambdas cause a validation error:
+```javascript
+// ERROR: fire() can only be used inside useEffect
+function Component() {
+  fire(callback());
+}
+```
+
+### Mixed Fire and Non-Fire Calls
+All calls to the same function must either all use `fire()` or none:
+```javascript
+// ERROR: Cannot mix fire() and non-fire calls
+useEffect(() => {
+  fire(foo(x));
+  foo(y);  // Error: foo is used with and without fire()
+});
+```
+
+### Multiple Arguments to Fire
+`fire()` accepts exactly one argument (the function call):
+```javascript
+// ERROR: fire() takes exactly one argument
+fire(foo, bar)  // Invalid
+fire()          // Invalid
+```
+
+### Nested Effects
+Fire calls in nested effects are validated separately:
+```javascript
+useEffect(() => {
+  useEffect(() => {  // Error: nested effects not allowed
+    fire(foo());
+  });
+});
+```
+
+### Deep Scope Handling
+The pass handles fire calls within deeply nested scopes inside effects:
+```javascript
+useEffect(() => {
+  if (cond) {
+    while (x) {
+      fire(foo(x));  // Still transformed correctly
+    }
+  }
+});
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `transform-fire/basic.js`
+
+**Input:**
+```javascript
+// @enableFire
+function Component(props) {
+  const foo = (props_0) => {
+    console.log(props_0);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+  return null;
+}
+```
+
+**After TransformFire:**
+```
+bb0 (block):
+  [1] $25 = Function @context[] ...  // foo definition
+  [2] StoreLocal Const foo$32 = $25
+  [3] $45 = LoadGlobal import { useFire } from 'react/compiler-runtime'
+  [4] $46 = LoadLocal foo$32
+  [5] $47 = Call $45($46)  // useFire(foo)
+  [6] StoreLocal Const #t44$44 = $47
+  [7] $34 = LoadGlobal(global) useEffect
+  [8] $35 = Function @context[#t44$44, props$24] ...
+      <<anonymous>>():
+        [1] $37 = LoadLocal #t44$44  // Load the fired function
+        [2] $38 = LoadLocal props$24
+        [3] $39 = Call $37($38)      // Call it directly (no fire wrapper)
+        [4] Return Void
+  [9] Call $34($35)  // useEffect(lambda)
+  [10] Return null
+```
+
+**Generated Code:**
+```javascript
+import { useFire as _useFire } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (props_0) => {
+      console.log(props_0);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const foo = t0;
+  const t1 = _useFire(foo);
+  let t2;
+  if ($[1] !== props || $[2] !== t1) {
+    t2 = () => {
+      t1(props);
+    };
+    $[1] = props;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t2);
+  return null;
+}
+```
+
+Key observations:
+- `useFire` is imported from `react/compiler-runtime`
+- `fire(foo(props))` becomes `t1(props)` where `t1 = _useFire(foo)`
+- The effect now depends on `t1` (stable) and `props` (reactive)
+- The original `foo` function is memoized and passed to `useFire`
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md
new file mode 100644
index 00000000000..e91bd3ec8e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md
@@ -0,0 +1,174 @@
+# lowerContextAccess
+
+## File
+`src/Optimization/LowerContextAccess.ts`
+
+## Purpose
+This pass optimizes `useContext` calls by generating selector functions that extract only the needed properties from the context. Instead of subscribing to the entire context object, components can subscribe to specific slices, enabling more granular re-rendering.
+
+When a component destructures specific properties from a context, this pass transforms the `useContext` call to use a selector-based API that only triggers re-renders when the selected properties change.
+
+## Input Invariants
+- The `lowerContextAccess` configuration must be set with:
+  - `source`: The module to import the lowered context hook from
+  - `importSpecifierName`: The name of the hook function
+- The function must use `useContext` with destructuring patterns
+- Only object destructuring patterns with identifier values are supported
+
+## Output Guarantees
+- `useContext(Ctx)` calls with destructuring are replaced with selector calls
+- A selector function is generated that extracts the needed properties
+- The return type is changed from object to array for positional access
+- Unused original `useContext` calls are removed by dead code elimination
+
+## Algorithm
+
+### Phase 1: Collect Context Access Patterns
+```typescript
+function lowerContextAccess(fn: HIRFunction, config: ExternalFunction): void {
+  const contextAccess: Map<IdentifierId, CallExpression> = new Map();
+  const contextKeys: Map<IdentifierId, Array<string>> = new Map();
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      // Find useContext calls
+      if (isUseContextCall(instr)) {
+        contextAccess.set(instr.lvalue.identifier.id, instr.value);
+      }
+
+      // Find destructuring patterns that access context results
+      if (isDestructure(instr) && contextAccess.has(instr.value.value.id)) {
+        const keys = extractPropertyKeys(instr.value.pattern);
+        contextKeys.set(instr.value.value.id, keys);
+      }
+    }
+  }
+}
+```
+
+### Phase 2: Generate Selector Functions
+For each context access with known keys:
+```typescript
+// Original:
+const {foo, bar} = useContext(MyContext);
+
+// Selector function generated:
+(ctx) => [ctx.foo, ctx.bar]
+```
+
+### Phase 3: Transform Context Calls
+```typescript
+// Before:
+$0 = useContext(MyContext)
+{foo, bar} = $0
+
+// After:
+$0 = useContext_withSelector(MyContext, (ctx) => [ctx.foo, ctx.bar])
+[foo, bar] = $0
+```
+
+### Phase 4: Update Destructuring
+Change object destructuring to array destructuring to match selector return:
+```typescript
+// Before: { foo: foo$15, bar: bar$16 } = $14
+// After:  [ foo$15, bar$16 ] = $14
+```
+
+## Edge Cases
+
+### Dynamic Property Access
+If context properties are accessed dynamically (not through destructuring), the optimization is skipped:
+```javascript
+const ctx = useContext(MyContext);
+const x = ctx[dynamicKey];  // Cannot optimize
+```
+
+### Spread in Destructuring
+Spread patterns prevent optimization:
+```javascript
+const {foo, ...rest} = useContext(MyContext);  // Cannot optimize
+```
+
+### Non-Identifier Values
+Only simple identifier destructuring is supported:
+```javascript
+const {foo: bar} = useContext(MyContext);  // Supported (rename)
+const {foo = defaultVal} = useContext(MyContext);  // Not supported
+```
+
+### Multiple Context Accesses
+Each `useContext` call is transformed independently:
+```javascript
+const {a} = useContext(CtxA);  // Transformed
+const {b} = useContext(CtxB);  // Transformed separately
+```
+
+### Hook Guards
+When `enableEmitHookGuards` is enabled, the selector function includes proper hook guard annotations.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `lower-context-selector-simple.js`
+
+**Input:**
+```javascript
+// @lowerContextAccess
+function App() {
+  const {foo, bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+```
+
+**After OptimizePropsMethodCalls (where lowering happens):**
+```
+bb0 (block):
+  [1] $12 = LoadGlobal(global) useContext  // Original (now unused)
+  [2] $13 = LoadGlobal(global) MyContext
+  [3] $22 = LoadGlobal import { useContext_withSelector } from 'react-compiler-runtime'
+  [4] $36 = Function @context[]
+      <<anonymous>>(#t23$30):
+        [1] $31 = LoadLocal #t23$30
+        [2] $32 = PropertyLoad $31.foo
+        [3] $33 = LoadLocal #t23$30
+        [4] $34 = PropertyLoad $33.bar
+        [5] $35 = Array [$32, $34]  // Return [foo, bar]
+        [6] Return $35
+  [5] $14 = Call $22($13, $36)  // useContext_withSelector(MyContext, selector)
+  [6] $17 = Destructure Const { foo: foo$15, bar: bar$16 } = $14
+  ...
+```
+
+**Generated Code:**
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useContext_withSelector } from "react-compiler-runtime";
+function App() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (ctx) => [ctx.foo, ctx.bar];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const { foo, bar } = useContext_withSelector(MyContext, t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <Bar foo={foo} bar={bar} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+```
+
+Key observations:
+- `useContext` is replaced with `useContext_withSelector`
+- A selector function `(ctx) => [ctx.foo, ctx.bar]` is generated
+- The selector function is memoized (first cache slot)
+- Only `foo` and `bar` properties are extracted, enabling granular subscriptions
+- The selector return type changes from object to array
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md
new file mode 100644
index 00000000000..942076af170
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md
@@ -0,0 +1,132 @@
+# optimizePropsMethodCalls
+
+## File
+`src/Optimization/OptimizePropsMethodCalls.ts`
+
+## Purpose
+This pass converts method calls on the props object to regular function calls. Method calls like `props.onClick()` are transformed to `const t0 = props.onClick; t0()`. This normalization enables better analysis and optimization by the compiler.
+
+The transformation is important because method calls have different semantics than regular calls - the receiver (`props`) would normally be passed as `this` to the method. For React props, methods are typically just callback functions where `this` binding doesn't matter, so converting them to regular calls is safe and enables better memoization.
+
+## Input Invariants
+- The function has been through type inference
+- Props parameters are typed as `TObject<BuiltInProps>`
+
+## Output Guarantees
+- All `MethodCall` instructions where the receiver has props type are converted to `CallExpression`
+- The method property becomes the callee of the call
+- Arguments are preserved exactly
+
+## Algorithm
+
+```typescript
+export function optimizePropsMethodCalls(fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    for (let i = 0; i < block.instructions.length; i++) {
+      const instr = block.instructions[i]!;
+
+      if (
+        instr.value.kind === 'MethodCall' &&
+        isPropsType(instr.value.receiver.identifier)
+      ) {
+        // Transform: props.onClick(arg)
+        // To: const t0 = props.onClick; t0(arg)
+        instr.value = {
+          kind: 'CallExpression',
+          callee: instr.value.property,  // The method becomes the callee
+          args: instr.value.args,
+          loc: instr.value.loc,
+        };
+      }
+    }
+  }
+}
+
+function isPropsType(identifier: Identifier): boolean {
+  return (
+    identifier.type.kind === 'Object' &&
+    identifier.type.shapeId === BuiltInPropsId
+  );
+}
+```
+
+## Edge Cases
+
+### Non-Props Method Calls
+Method calls on non-props objects are left unchanged:
+```javascript
+// Unchanged - array.map is not on props
+array.map(x => x * 2)
+
+// Unchanged - obj is not props
+obj.method()
+```
+
+### Props Type Detection
+The pass uses type information to identify props:
+```javascript
+function Component(props) {
+  // props has type TObject<BuiltInProps>
+  props.onClick();  // Transformed
+}
+
+function Regular(obj) {
+  // obj has unknown type
+  obj.onClick();  // Not transformed
+}
+```
+
+### Nested Props Access
+Only direct method calls on props are transformed:
+```javascript
+props.onClick();       // Transformed
+props.nested.onClick(); // Not transformed (receiver is props.nested, not props)
+```
+
+### Arrow Function Callbacks
+Works with any method on props:
+```javascript
+props.onChange(value);   // Transformed
+props.onSubmit(data);    // Transformed
+props.validate(input);   // Transformed
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: Using props method
+
+**Input:**
+```javascript
+function Component(props) {
+  return <button onClick={() => props.onClick()} />;
+}
+```
+
+**Before OptimizePropsMethodCalls:**
+```
+[1] $5 = Function @context[props$1] ...
+    <<anonymous>>():
+      [1] $2 = LoadLocal props$1
+      [2] $3 = PropertyLoad $2.onClick
+      [3] $4 = MethodCall $2.$3()  // Method call on props
+      [4] Return Void
+```
+
+**After OptimizePropsMethodCalls:**
+```
+[1] $5 = Function @context[props$1] ...
+    <<anonymous>>():
+      [1] $2 = LoadLocal props$1
+      [2] $3 = PropertyLoad $2.onClick
+      [3] $4 = Call $3()  // Now a regular call
+      [4] Return Void
+```
+
+Key observations:
+- `MethodCall $2.$3()` becomes `Call $3()`
+- The property load (`$3 = PropertyLoad $2.onClick`) is preserved
+- The receiver (`$2`) is no longer part of the call
+- This enables the compiler to analyze `onClick` as a regular function
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md
new file mode 100644
index 00000000000..34ba5b431f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md
@@ -0,0 +1,187 @@
+# optimizeForSSR
+
+## File
+`src/Optimization/OptimizeForSSR.ts`
+
+## Purpose
+This pass applies Server-Side Rendering (SSR) specific optimizations. During SSR, React renders components to HTML strings without mounting them in the DOM. This means:
+
+1. **Effects don't run** - `useEffect` and `useLayoutEffect` are no-ops
+2. **Event handlers aren't needed** - There's no DOM to attach handlers to
+3. **State is never updated** - Components render once with initial state
+4. **Refs aren't attached** - There's no DOM to ref
+
+The pass leverages these SSR characteristics to inline and simplify code, removing unnecessary runtime overhead.
+
+## Input Invariants
+- The function has been through type inference
+- Hook types are properly identified (useState, useReducer, useEffect, etc.)
+- Function types for callbacks are properly inferred
+
+## Output Guarantees
+- `useState(initialValue)` is inlined to just `[initialValue, noop]`
+- `useReducer(reducer, initialArg, init?)` is inlined to `[init ? init(initialArg) : initialArg, noop]`
+- `useEffect` and `useLayoutEffect` calls are removed entirely
+- Event handler functions (functions that call setState) are replaced with empty functions
+- Ref-typed values are removed from JSX props
+
+## Algorithm
+
+### Phase 1: Identify Inlinable State
+```typescript
+const inlinedState = new Map<IdentifierId, InstructionValue>();
+
+for (const instr of block.instructions) {
+  if (isUseStateCall(instr)) {
+    // Store the initial value for inlining
+    inlinedState.set(instr.lvalue.id, {
+      kind: 'ArrayExpression',
+      elements: [initialValue, noopFunction],
+    });
+  }
+
+  if (isUseReducerCall(instr)) {
+    // Compute initial state and store for inlining
+    const initialState = init ? callInit(initialArg) : initialArg;
+    inlinedState.set(instr.lvalue.id, {
+      kind: 'ArrayExpression',
+      elements: [initialState, noopFunction],
+    });
+  }
+}
+```
+
+### Phase 2: Inline State Hooks
+Replace useState/useReducer with their computed initial values:
+```typescript
+// Before:
+$0 = useState(0)
+[state, setState] = $0
+
+// After (inlined):
+$0 = [0, () => {}]
+[state, setState] = $0
+```
+
+### Phase 3: Remove Effects
+```typescript
+if (isUseEffectCall(instr) || isUseLayoutEffectCall(instr)) {
+  // Remove the instruction entirely
+  block.instructions.splice(i, 1);
+}
+```
+
+### Phase 4: Identify and Neuter Event Handlers
+```typescript
+// Functions that capture and call setState are event handlers
+if (capturesSetState(functionExpr)) {
+  // Replace with empty function
+  instr.value = {
+    kind: 'FunctionExpression',
+    params: originalParams,
+    body: emptyBody,
+  };
+}
+```
+
+### Phase 5: Remove Ref Props
+```typescript
+if (isJSX(instr) && hasRefProp(instr)) {
+  // Remove ref={...} from JSX props
+  removeRefProp(instr.value);
+}
+```
+
+## Edge Cases
+
+### useState with Function Initializer
+When `useState` receives a function initializer, it must be called:
+```javascript
+// useState(() => expensive())
+// SSR: Call the initializer to get the value
+const [state] = [expensiveComputation(), noop];
+```
+
+### useReducer with Init Function
+The optional `init` function is called with `initialArg`:
+```javascript
+// useReducer(reducer, arg, init)
+// SSR: [init(arg), noop]
+```
+
+### Nested State Setters
+Functions that transitively call setState are also event handlers:
+```javascript
+function outer() {
+  function inner() {
+    setState(x);  // inner is event handler
+  }
+  inner();  // outer is also event handler
+}
+```
+
+### Conditional Event Handlers
+Event handler detection is conservative - if a function might call setState, it's treated as an event handler.
+
+### Refs in Nested Objects
+Only direct `ref` props on JSX are removed:
+```javascript
+<div ref={myRef} />           // ref removed
+<div config={{ref: myRef}} /> // ref NOT removed (nested)
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `ssr/optimize-ssr.js`
+
+**Input:**
+```javascript
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = (e) => {
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+```
+
+**After SSR Optimization:**
+```javascript
+function Component() {
+  const $ = _c(1);
+  // useState inlined to [initialValue, noop]
+  const [state] = [0, () => {}];
+
+  // useRef returns object with current: null
+  const ref = { current: null };
+
+  // Event handler replaced with noop (it calls setState)
+  const onChange = () => {};
+
+  // useEffect removed entirely (no-op on SSR)
+
+  // ref prop removed from JSX
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <input value={state} onChange={onChange} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+```
+
+Key observations:
+- `useState(0)` becomes `[0, () => {}]` - no hook call
+- `useEffect(...)` is removed entirely
+- `onChange` is replaced with empty function since it called `setState`
+- `ref={ref}` prop is removed from JSX
+- SSR output is simpler and has less runtime overhead
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md
new file mode 100644
index 00000000000..4131d38aef1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md
@@ -0,0 +1,224 @@
+# outlineJSX
+
+## File
+`src/Optimization/OutlineJsx.ts`
+
+## Purpose
+This pass outlines nested JSX elements into separate component functions. When a callback function contains JSX, this pass can extract that JSX into a new component, which enables:
+
+1. **Better code splitting** - Outlined components can be lazily loaded
+2. **Memoization at component boundaries** - React's reconciliation can skip unchanged subtrees
+3. **Reduced closure captures** - Outlined components receive props explicitly
+
+The pass specifically targets JSX within callbacks (like `.map()` callbacks) rather than top-level component returns.
+
+## Input Invariants
+- The `enableJsxOutlining` feature flag must be enabled
+- The function must be a React component or hook
+- JSX must appear within a nested function expression (callback)
+
+## Output Guarantees
+- Nested functions containing only JSX returns are extracted as separate components
+- The original callback is replaced with a call to the outlined component
+- Captured variables become explicit props to the outlined component
+- The outlined component is registered with the environment for emission
+
+## Algorithm
+
+### Phase 1: Identify Outlinable JSX
+```typescript
+function outlineJsxImpl(fn: HIRFunction, outlinedFns: Array<HIRFunction>): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      if (instr.value.kind === 'FunctionExpression') {
+        const innerFn = instr.value.loweredFunc.func;
+
+        // Check if function only returns JSX
+        if (canOutline(innerFn)) {
+          const outlined = createOutlinedComponent(innerFn);
+          outlinedFns.push(outlined);
+          replaceWithComponentCall(instr, outlined);
+        }
+      }
+    }
+  }
+}
+```
+
+### Phase 2: Check Outlinability
+```typescript
+function canOutline(fn: HIRFunction): boolean {
+  // Must have exactly one block with only JSX-related instructions
+  // Must end with returning JSX
+  // Must not have complex control flow
+
+  return (
+    fn.body.blocks.size === 1 &&
+    returnsJSX(fn) &&
+    !hasComplexControlFlow(fn)
+  );
+}
+```
+
+### Phase 3: Create Outlined Component
+```typescript
+function createOutlinedComponent(fn: HIRFunction): HIRFunction {
+  // Convert captured context to props
+  const props = fn.context.map(capture => ({
+    name: capture.identifier.name,
+    type: capture.identifier.type,
+  }));
+
+  // Create new component function
+  return {
+    ...fn,
+    params: [{kind: 'Identifier', name: 'props', ...}],
+    context: [],  // No captures - all via props
+  };
+}
+```
+
+### Phase 4: Replace Original Callback
+```typescript
+function replaceWithComponentCall(instr: Instruction, outlined: HIRFunction): void {
+  // Original: items.map(item => <Stringify item={item} />)
+  // Becomes: items.map(item => <OutlinedComponent item={item} />)
+
+  instr.value = {
+    kind: 'JSX',
+    tag: {kind: 'LoadGlobal', name: outlined.id},
+    props: capturedVariablesToProps(instr.value.context),
+  };
+}
+```
+
+### Phase 5: Register Outlined Functions
+```typescript
+export function outlineJSX(fn: HIRFunction): void {
+  const outlinedFns: Array<HIRFunction> = [];
+  outlineJsxImpl(fn, outlinedFns);
+
+  for (const outlinedFn of outlinedFns) {
+    fn.env.outlineFunction(outlinedFn, 'Component');
+  }
+}
+```
+
+## Edge Cases
+
+### Context Captures
+Variables captured by the callback become props:
+```javascript
+// Before:
+items.map(item => <Card key={item.id} user={currentUser} item={item} />)
+
+// After (outlined):
+function OutlinedCard(props) {
+  return <Card key={props.item.id} user={props.currentUser} item={props.item} />;
+}
+items.map(item => <OutlinedCard currentUser={currentUser} item={item} />)
+```
+
+### Complex Control Flow
+Callbacks with conditionals or loops are not outlined:
+```javascript
+// Not outlined - has conditional
+items.map(item => item.show ? <Card item={item} /> : null)
+```
+
+### Multiple JSX Returns
+Only single-JSX-return callbacks are outlined:
+```javascript
+// Not outlined - multiple potential returns
+items.map(item => {
+  if (item.type === 'a') return <TypeA item={item} />;
+  return <TypeB item={item} />;
+})
+```
+
+### Top-Level JSX
+Only JSX in nested callbacks is outlined, not component return values:
+```javascript
+function Component() {
+  return <div />;  // Not outlined - this is the component's return
+}
+```
+
+### Recursive Outlining
+The pass recursively processes outlined components to outline their nested JSX.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `outlined-helper.js`
+
+**Input:**
+```javascript
+// @enableFunctionOutlining
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <Stringify key={item.id} item={item.name} />
+      ))}
+    </div>
+  );
+}
+```
+
+**After OutlineJSX:**
+```
+// Outlined component:
+function _outlined_Component$1(props) {
+  return <Stringify key={props.item.id} item={props.item.name} />;
+}
+
+// Original component modified:
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <_outlined_Component$1 item={item} />
+      ))}
+    </div>
+  );
+}
+```
+
+**Generated Code:**
+```javascript
+function _outlined_Component$1(props) {
+  const $ = _c(2);
+  const item = props.item;
+  let t0;
+  if ($[0] !== item.id || $[1] !== item.name) {
+    t0 = <Stringify key={item.id} item={item.name} />;
+    $[0] = item.id;
+    $[1] = item.name;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map((item) => <_outlined_Component$1 item={item} />);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return <div>{t0}</div>;
+}
+```
+
+Key observations:
+- The map callback JSX is extracted into `_outlined_Component$1`
+- The `item` variable becomes a prop instead of a closure capture
+- The outlined component gets its own memoization cache
+- This enables React to skip re-rendering unchanged list items
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md
new file mode 100644
index 00000000000..6853c4625cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md
@@ -0,0 +1,169 @@
+# outlineFunctions
+
+## File
+`src/Optimization/OutlineFunctions.ts`
+
+## Purpose
+This pass outlines pure function expressions that have no captured context into top-level helper functions. By moving these functions outside the component, they become truly static and can be shared across renders without any memoization overhead.
+
+A function with no captured context is completely self-contained - it only uses its parameters and globals. Such functions don't need to be recreated on each render and can be hoisted to module scope.
+
+## Input Invariants
+- The `enableFunctionOutlining` feature flag must be enabled
+- Functions must have `context.length === 0` (no captured variables)
+- Functions must be anonymous (no `id` property)
+- Functions must not be FBT macro operands (tracked by `fbtOperands` parameter)
+
+## Output Guarantees
+- Pure function expressions are replaced with `LoadGlobal` of the outlined function
+- Outlined functions are registered with the environment for emission
+- The original instruction is transformed to load the global
+
+## Algorithm
+
+```typescript
+export function outlineFunctions(
+  fn: HIRFunction,
+  fbtOperands: Set<IdentifierId>,
+): void {
+  for (const [, block] of fn.body.blocks) {
+    for (let i = 0; i < block.instructions.length; i++) {
+      const instr = block.instructions[i]!;
+
+      if (
+        instr.value.kind === 'FunctionExpression' &&
+        instr.value.loweredFunc.func.context.length === 0 &&
+        instr.value.loweredFunc.func.id === null &&
+        !fbtOperands.has(instr.lvalue.identifier.id)
+      ) {
+        // Outline this function
+        const outlinedId = fn.env.outlineFunction(
+          instr.value.loweredFunc.func,
+          'helper',
+        );
+
+        // Replace with LoadGlobal
+        instr.value = {
+          kind: 'LoadGlobal',
+          binding: {
+            kind: 'ModuleLocal',
+            name: outlinedId,
+          },
+          loc: instr.value.loc,
+        };
+      }
+    }
+  }
+}
+```
+
+## Edge Cases
+
+### Functions with Context
+Functions that capture variables are not outlined:
+```javascript
+function Component(props) {
+  const x = props.value;
+  const fn = () => x * 2;  // Captures x, not outlined
+}
+```
+
+### Named Functions
+Functions with explicit names are not outlined:
+```javascript
+const foo = function namedFn() { ... };  // Has id, not outlined
+```
+
+### FBT Operands
+Functions used as FBT operands cannot be outlined due to translation requirements:
+```javascript
+<fbt>
+  Hello <fbt:param name="user">{() => getName()}</fbt:param>
+</fbt>
+// The function cannot be outlined - FBT needs it inline
+```
+
+### Arrow Functions vs Function Expressions
+Both arrow functions and function expressions are candidates:
+```javascript
+const a = () => 1;           // Outlined if no context
+const b = function() {};     // Outlined if no context
+```
+
+### Recursive Functions
+Self-referencing functions cannot be outlined (they would have themselves in context):
+```javascript
+const fib = (n) => n <= 1 ? n : fib(n-1) + fib(n-2);  // References self
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `outlined-helper.js`
+
+**Input:**
+```javascript
+// @enableFunctionOutlining
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <Stringify key={item.id} item={item.name} />
+      ))}
+    </div>
+  );
+}
+```
+
+**Analysis:**
+The map callback `item => <Stringify .../>` has one captured variable: nothing from the component (only uses `item` parameter). However, it receives `item` as a parameter, not from context.
+
+If we have a truly pure helper:
+```javascript
+// @enableFunctionOutlining
+function Component(props) {
+  const double = (x) => x * 2;  // No context, pure
+  return <div>{double(props.value)}</div>;
+}
+```
+
+**After OutlineFunctions:**
+```
+// Outlined to module scope:
+function _outlined_double$1(x) {
+  return x * 2;
+}
+
+// In component:
+[1] $1 = LoadGlobal _outlined_double$1  // Instead of FunctionExpression
+[2] StoreLocal Const double = $1
+```
+
+**Generated Code:**
+```javascript
+function _outlined_double$1(x) {
+  return x * 2;
+}
+
+function Component(props) {
+  const $ = _c(2);
+  const double = _outlined_double$1;  // Just a reference, no recreation
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = <div>{double(props.value)}</div>;
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+```
+
+Key observations:
+- The pure function is hoisted to module scope
+- The component just references the outlined function
+- No memoization needed for the function itself
+- Reduces runtime overhead by avoiding function recreation
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md
new file mode 100644
index 00000000000..2d9aec60660
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md
@@ -0,0 +1,231 @@
+# memoizeFbtAndMacroOperandsInSameScope
+
+## File
+`src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts`
+
+## Purpose
+This pass ensures that FBT (Facebook Translation) expressions and their operands are memoized within the same reactive scope. FBT is Facebook's internationalization system that requires special handling to ensure translations work correctly.
+
+The key insight is that FBT operands must be computed and frozen together with the FBT call itself. If operands were memoized in separate scopes, the translation system could receive stale operand values when only some inputs change.
+
+## Input Invariants
+- The function has been through type inference
+- FBT calls (`fbt`, `fbt.c`, `fbt:param`, etc.) are properly identified
+- Custom macros are configured in `fn.env.config.customMacros`
+- Reactive scope variables have been inferred
+
+## Output Guarantees
+- All operands of FBT calls are assigned to the same reactive scope as the FBT call
+- The `fbtOperands` set is returned for use by other passes (e.g., `outlineFunctions`)
+- Operand scope assignments use either transitive or shallow inlining based on macro definition
+
+## Algorithm
+
+### Phase 1: Collect Macro Kinds
+```typescript
+const macroKinds = new Map<Macro, MacroDefinition>([
+  ...Array.from(FBT_TAGS.entries()),  // Built-in fbt tags
+  ...(fn.env.config.customMacros ?? []).map(([name, def]) => [name, def]),
+]);
+```
+
+### Phase 2: Populate Macro Tags
+```typescript
+function populateMacroTags(
+  fn: HIRFunction,
+  macroKinds: Map<Macro, MacroDefinition>,
+): Map<IdentifierId, MacroDefinition> {
+  const macroTags = new Map();
+
+  for (const instr of allInstructions(fn)) {
+    if (isLoadGlobal(instr) || isPropertyLoad(instr)) {
+      const name = getName(instr);
+      if (macroKinds.has(name)) {
+        macroTags.set(instr.lvalue.id, macroKinds.get(name));
+      }
+    }
+  }
+
+  return macroTags;
+}
+```
+
+### Phase 3: Merge Macro Arguments
+```typescript
+function mergeMacroArguments(
+  fn: HIRFunction,
+  macroTags: Map<IdentifierId, MacroDefinition>,
+  macroKinds: Map<Macro, MacroDefinition>,
+): Set<IdentifierId> {
+  const macroValues = new Set<IdentifierId>();
+
+  for (const instr of allInstructions(fn)) {
+    if (isCall(instr) || isMethodCall(instr) || isJSX(instr)) {
+      const callee = getCallee(instr);
+      const macroDef = macroTags.get(callee.id);
+
+      if (macroDef !== undefined) {
+        // Mark all operands to be in same scope
+        for (const operand of getOperands(instr)) {
+          macroValues.add(operand.id);
+
+          // Merge scope to match macro call scope
+          if (macroDef.inlineLevel === InlineLevel.Transitive) {
+            mergeScopesTransitively(operand, instr.lvalue);
+          } else {
+            mergeScopes(operand, instr.lvalue);
+          }
+        }
+      }
+    }
+  }
+
+  return macroValues;
+}
+```
+
+### InlineLevel Types
+```typescript
+enum InlineLevel {
+  Shallow,     // Only merge direct operands
+  Transitive,  // Merge operands and their dependencies
+}
+```
+
+## Edge Cases
+
+### Nested FBT Params
+FBT params can be nested, and all levels must be in the same scope:
+```javascript
+<fbt>
+  Hello <fbt:param name="user">
+    <fbt:param name="firstName">{user.firstName}</fbt:param>
+  </fbt:param>
+</fbt>
+```
+
+### FBT with Complex Expressions
+Complex expressions as operands have their entire dependency chain merged:
+```javascript
+<fbt>
+  Count: <fbt:param name="count">{items.length * multiplier}</fbt:param>
+</fbt>
+// Both items.length and multiplier expressions are merged into fbt scope
+```
+
+### Custom Macros
+User-defined macros can specify their inlining behavior:
+```typescript
+customMacros: [
+  ['myMacro', { inlineLevel: InlineLevel.Transitive }],
+]
+```
+
+### Method Calls on FBT
+`fbt.param()`, `fbt.plural()`, etc. are handled as method calls:
+```javascript
+fbt(
+  fbt.param('count', items.length),  // MethodCall on fbt
+  'description'
+)
+```
+
+### JSX vs Call Syntax
+Both JSX and call syntax for FBT are handled:
+```javascript
+// JSX syntax
+<fbt desc="greeting">Hello</fbt>
+
+// Call syntax
+fbt('Hello', 'greeting')
+```
+
+## Built-in FBT Tags
+The pass recognizes these FBT constructs:
+- `fbt` / `fbt.c` - Main translation functions
+- `fbt:param` - Parameter substitution
+- `fbt:plural` - Plural handling
+- `fbt:enum` - Enumeration values
+- `fbt:name` - Name parameters
+- `fbt:pronoun` - Pronoun handling
+- `fbs` - Simple string translation
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `fbt/fbt-call.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const text = fbt(
+    `${fbt.param('count', props.count)} items`,
+    'Number of items'
+  );
+  return <div>{text}</div>;
+}
+```
+
+**Before MemoizeFbtAndMacroOperandsInSameScope:**
+```
+[1] $18 = LoadGlobal import fbt from 'fbt'
+[2] $19 = LoadGlobal import fbt from 'fbt'
+[3] $20_@0[3:8] = PropertyLoad $19.param
+[4] $21 = "(key) count"
+[5] $22 = LoadLocal props$17
+[6] $23 = PropertyLoad $22.count
+[7] $24_@0[3:8] = MethodCall $19.$20_@0($21, $23)  // fbt.param call
+[8] $25 = `${$24_@0} items`
+[9] $26 = "(description) Number of items"
+[10] $27_@1 = Call $18($25, $26)  // fbt call
+```
+
+**After MemoizeFbtAndMacroOperandsInSameScope:**
+```
+[1] $18_@1[1:11] = LoadGlobal import fbt from 'fbt'  // Merged to @1
+[2] $19 = LoadGlobal import fbt from 'fbt'
+[3] $20_@0[3:8] = PropertyLoad $19.param
+[4] $21 = "(key) count"
+[5] $22 = LoadLocal props$17
+[6] $23 = PropertyLoad $22.count
+[7] $24_@1[1:11] = MethodCall $19.$20_@0($21, $23)  // Merged to @1
+[8] $25_@1[1:11] = `${$24_@1} items`                // Merged to @1
+[9] $26_@1[1:11] = "(description) Number of items" // Merged to @1
+[10] $27_@1[1:11] = Call $18_@1($25_@1, $26_@1)     // Main fbt scope @1
+```
+
+**Generated Code:**
+```javascript
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.count) {
+    // All fbt operands computed in same memoization block
+    t0 = fbt(
+      `${fbt.param("count", props.count)} items`,
+      "Number of items"
+    );
+    $[0] = props.count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const text = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{text}</div>;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+```
+
+Key observations:
+- All FBT-related operations are in the same memoization scope `@1`
+- `fbt.param`, template literal, and `fbt` call are memoized together
+- This ensures the translation system receives consistent operand values
+- The entire translation is recomputed when any operand (`props.count`) changes
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md
new file mode 100644
index 00000000000..abf519c69b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md
@@ -0,0 +1,192 @@
+# validateContextVariableLValues
+
+## File
+`src/Validation/ValidateContextVariableLValues.ts`
+
+## Purpose
+This validation pass ensures that all load/store references to a given named identifier are consistent with the "kind" of that variable (normal local variable or context variable). Context variables are variables that are captured by closures and require special handling for correct closure semantics.
+
+The pass prevents mixing context variable operations (`DeclareContext`, `StoreContext`, `LoadContext`) with local variable operations (`DeclareLocal`, `StoreLocal`, `LoadLocal`, `Destructure`) on the same identifier.
+
+## Input Invariants
+- The function has been lowered to HIR
+- All instructions have been categorized by kind
+- Nested function expressions have been lowered
+
+## Validation Rules
+
+### Rule 1: Consistent Variable Kind
+All references to the same identifier must use consistent load/store operations:
+- Context variables must only use `DeclareContext`, `StoreContext`, `LoadContext`
+- Local variables must only use `DeclareLocal`, `StoreLocal`, `LoadLocal`
+
+**Error (Invariant violation):**
+```
+Expected all references to a variable to be consistently local or context references
+Identifier [place] is referenced as a [kind] variable, but was previously referenced as a [prev.kind] variable
+```
+
+### Rule 2: No Destructuring of Context Variables
+Context variables cannot be destructured using the `Destructure` instruction.
+
+**Error (Todo):**
+```
+Support destructuring of context variables
+```
+
+### Rule 3: Unhandled Instruction Variants
+If an instruction has lvalues that the pass does not handle, it throws a Todo error.
+
+**Error (Todo):**
+```
+ValidateContextVariableLValues: unhandled instruction variant
+Handle '[kind]' lvalues
+```
+
+## Algorithm
+
+### Phase 1: Initialize Tracking
+```typescript
+const identifierKinds: Map<IdentifierId, {place: Place, kind: 'local' | 'context' | 'destructure'}> = new Map();
+```
+
+### Phase 2: Visit All Instructions
+The pass iterates through all blocks and instructions, categorizing each based on its kind:
+
+```typescript
+for (const [, block] of fn.body.blocks) {
+  for (const instr of block.instructions) {
+    switch (value.kind) {
+      case 'DeclareContext':
+      case 'StoreContext':
+        visit(identifierKinds, value.lvalue.place, 'context');
+        break;
+      case 'LoadContext':
+        visit(identifierKinds, value.place, 'context');
+        break;
+      case 'StoreLocal':
+      case 'DeclareLocal':
+        visit(identifierKinds, value.lvalue.place, 'local');
+        break;
+      case 'LoadLocal':
+        visit(identifierKinds, value.place, 'local');
+        break;
+      case 'PostfixUpdate':
+      case 'PrefixUpdate':
+        visit(identifierKinds, value.lvalue, 'local');
+        break;
+      case 'Destructure':
+        for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
+          visit(identifierKinds, lvalue, 'destructure');
+        }
+        break;
+      case 'ObjectMethod':
+      case 'FunctionExpression':
+        // Recursively validate nested functions
+        validateContextVariableLValuesImpl(value.loweredFunc.func, identifierKinds);
+        break;
+    }
+  }
+}
+```
+
+### Phase 3: Check Consistency
+For each place visited, the `visit` function checks if the identifier was previously seen with a different kind:
+
+```typescript
+function visit(identifiers, place, kind) {
+  const prev = identifiers.get(place.identifier.id);
+  if (prev !== undefined) {
+    const wasContext = prev.kind === 'context';
+    const isContext = kind === 'context';
+    if (wasContext !== isContext) {
+      // Check for destructuring of context variable
+      if (prev.kind === 'destructure' || kind === 'destructure') {
+        CompilerError.throwTodo({
+          reason: `Support destructuring of context variables`,
+          ...
+        });
+      }
+      // Invariant violation: inconsistent variable kinds
+      CompilerError.invariant(false, {
+        reason: 'Expected all references to be consistently local or context references',
+        ...
+      });
+    }
+  }
+  identifiers.set(place.identifier.id, {place, kind});
+}
+```
+
+## Edge Cases
+
+### Nested Function Expressions
+The validation recursively processes nested function expressions and object methods, sharing the same `identifierKinds` map. This ensures that a variable captured by a nested function is consistently treated as a context variable throughout the entire function hierarchy.
+
+### Destructuring Patterns
+Each operand in a destructure pattern is visited individually, marked as 'destructure' kind. If the same identifier was previously used as a context variable, a Todo error is thrown since destructuring of context variables is not yet supported.
+
+### Update Expressions
+Both `PostfixUpdate` (e.g., `x++`) and `PrefixUpdate` (e.g., `++x`) are treated as local variable operations.
+
+## TODOs
+
+1. **Destructuring of context variables** - Currently not supported:
+   ```typescript
+   CompilerError.throwTodo({
+     reason: `Support destructuring of context variables`,
+     ...
+   });
+   ```
+
+2. **Unhandled instruction variants** - Some instruction types with lvalues may not be handled:
+   ```typescript
+   CompilerError.throwTodo({
+     reason: 'ValidateContextVariableLValues: unhandled instruction variant',
+     description: `Handle '${value.kind}' lvalues`,
+     ...
+   });
+   ```
+
+## Example
+
+### Fixture: `error.todo-for-of-loop-with-context-variable-iterator.js`
+
+**Input:**
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const data = useHook();
+  const items = [];
+  // NOTE: `item` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  for (let item of props.data) {
+    item = item ?? {}; // reassignment to force a context variable
+    items.push(
+      <div key={item.id} onClick={() => data.set(item)}>
+        {item.id}
+      </div>
+    );
+  }
+  return <div>{items}</div>;
+}
+```
+
+**Error:**
+```
+Todo: Support non-trivial for..of inits
+
+error.todo-for-of-loop-with-context-variable-iterator.ts:8:2
+   6 |   // NOTE: `item` is a context variable because it's reassigned and also referenced
+   7 |   // within a closure, the `onClick` handler of each item
+>  8 |   for (let item of props.data) {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  9 |     item = item ?? {}; // reassignment to force a context variable
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+...
+> 15 |   }
+     | ^^^^ Support non-trivial for..of inits
+```
+
+Note: This particular error comes from an earlier pass (lowering), but demonstrates the kind of context variable scenarios that this validation is designed to catch.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md
new file mode 100644
index 00000000000..b1863d97338
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md
@@ -0,0 +1,299 @@
+# validateUseMemo
+
+## File
+`src/Validation/ValidateUseMemo.ts`
+
+## Purpose
+This validation pass ensures that `useMemo()` callbacks follow React's requirements. The pass checks for several common mistakes that developers make when using `useMemo()`:
+
+1. Callbacks should not accept parameters (useMemo callbacks are called with no arguments)
+2. Callbacks should not be async or generator functions (must return a value synchronously)
+3. Callbacks should not reassign variables declared outside the callback (must be pure)
+4. Callbacks should return a value (useMemo is for computing values, not side effects)
+5. The result of useMemo should be used (not discarded)
+
+## Input Invariants
+- The function has been lowered to HIR
+- `useMemo` is either imported directly or accessed via `React.useMemo`
+- Function expressions have been lowered with their parameters and async/generator flags preserved
+
+## Validation Rules
+
+### Rule 1: No Parameters
+useMemo callbacks must not accept parameters.
+
+**Error:**
+```
+Error: useMemo() callbacks may not accept parameters
+
+useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.
+```
+
+### Rule 2: No Async or Generator Functions
+useMemo callbacks must synchronously return a value.
+
+**Error:**
+```
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+```
+
+### Rule 3: No Reassigning Outer Variables
+useMemo callbacks cannot reassign variables declared outside the callback.
+
+**Error:**
+```
+Error: useMemo() callbacks may not reassign variables declared outside of the callback
+
+useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
+```
+
+### Rule 4: Must Return a Value (when `validateNoVoidUseMemo` is enabled)
+useMemo callbacks should return a value.
+
+**Error:**
+```
+Error: useMemo() callbacks must return a value
+
+This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects.
+```
+
+### Rule 5: Result Must Be Used (when `validateNoVoidUseMemo` is enabled)
+The result of useMemo should be used somewhere.
+
+**Error:**
+```
+Error: useMemo() result is unused
+
+This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects.
+```
+
+## Algorithm
+
+### Phase 1: Track useMemo References
+```typescript
+const useMemos = new Set<IdentifierId>();
+const react = new Set<IdentifierId>();
+const functions = new Map<IdentifierId, FunctionExpression>();
+const unusedUseMemos = new Map<IdentifierId, SourceLocation>();
+```
+
+The pass tracks:
+- Direct `useMemo` imports via `LoadGlobal`
+- `React` imports to detect `React.useMemo` pattern
+- Function expressions that might be useMemo callbacks
+- Unused useMemo results
+
+### Phase 2: Identify useMemo Calls
+```typescript
+for (const instr of block.instructions) {
+  switch (value.kind) {
+    case 'LoadGlobal':
+      if (value.binding.name === 'useMemo') {
+        useMemos.add(lvalue.identifier.id);
+      } else if (value.binding.name === 'React') {
+        react.add(lvalue.identifier.id);
+      }
+      break;
+    case 'PropertyLoad':
+      if (react.has(value.object.identifier.id) && value.property === 'useMemo') {
+        useMemos.add(lvalue.identifier.id);
+      }
+      break;
+    case 'CallExpression':
+    case 'MethodCall':
+      // Check if callee is useMemo
+      const callee = value.kind === 'CallExpression' ? value.callee : value.property;
+      if (useMemos.has(callee.identifier.id) && value.args.length > 0) {
+        // Validate the callback
+      }
+      break;
+  }
+}
+```
+
+### Phase 3: Validate Callback
+For each useMemo call, the pass retrieves the callback function expression and validates:
+
+```typescript
+const body = functions.get(arg.identifier.id);
+
+// Check for parameters
+if (body.loweredFunc.func.params.length > 0) {
+  errors.push("useMemo() callbacks may not accept parameters");
+}
+
+// Check for async/generator
+if (body.loweredFunc.func.async || body.loweredFunc.func.generator) {
+  errors.push("useMemo() callbacks may not be async or generator functions");
+}
+
+// Check for context variable reassignment
+validateNoContextVariableAssignment(body.loweredFunc.func, errors);
+
+// Check for return value (if config enabled)
+if (fn.env.config.validateNoVoidUseMemo) {
+  if (!hasNonVoidReturn(body.loweredFunc.func)) {
+    errors.push("useMemo() callbacks must return a value");
+  }
+}
+```
+
+### Phase 4: Validate No Context Variable Assignment
+```typescript
+function validateNoContextVariableAssignment(fn: HIRFunction, errors: CompilerError) {
+  const context = new Set(fn.context.map(place => place.identifier.id));
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      if (value.kind === 'StoreContext') {
+        if (context.has(value.lvalue.place.identifier.id)) {
+          errors.push("Cannot reassign variable");
+        }
+      }
+    }
+  }
+}
+```
+
+### Phase 5: Check for Unused Results
+```typescript
+// Track which useMemo results are referenced
+for (const operand of eachInstructionValueOperand(value)) {
+  unusedUseMemos.delete(operand.identifier.id);
+}
+
+// At the end, report any unused useMemos
+for (const loc of unusedUseMemos.values()) {
+  errors.push("useMemo() result is unused");
+}
+```
+
+### Return Value Helper
+```typescript
+function hasNonVoidReturn(func: HIRFunction): boolean {
+  for (const [, block] of func.body.blocks) {
+    if (block.terminal.kind === 'return') {
+      if (block.terminal.returnVariant === 'Explicit' ||
+          block.terminal.returnVariant === 'Implicit') {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+```
+
+## Edge Cases
+
+### React.useMemo vs useMemo
+The pass handles both import styles:
+```javascript
+import {useMemo} from 'react';
+useMemo(() => x, [x]);
+
+import React from 'react';
+React.useMemo(() => x, [x]);
+```
+
+### Immediately Used Results
+Results that are used immediately don't trigger the "unused" warning:
+```javascript
+const x = useMemo(() => compute(), [dep]);
+return x; // x is used
+```
+
+### Void Return Detection
+The pass checks for explicit and implicit returns. A function with only `return;` statements (void returns) will trigger the "must return a value" error.
+
+### VoidUseMemo Errors as Logged Errors
+The void useMemo errors (no return value, unused result) are logged via `fn.env.logErrors()` rather than thrown immediately. This allows them to be treated differently (e.g., as warnings) based on configuration.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-useMemo-callback-args.js`
+
+**Input:**
+```javascript
+function component(a, b) {
+  let x = useMemo(c => a, []);
+  return x;
+}
+```
+
+**Error:**
+```
+Error: useMemo() callbacks may not accept parameters
+
+useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.
+
+error.invalid-useMemo-callback-args.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(c => a, []);
+    |                   ^ Callbacks with parameters are not supported
+  3 |   return x;
+  4 | }
+```
+
+### Fixture: `error.invalid-useMemo-async-callback.js`
+
+**Input:**
+```javascript
+function component(a, b) {
+  let x = useMemo(async () => {
+    await a;
+  }, []);
+  return x;
+}
+```
+
+**Error:**
+```
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+
+error.invalid-useMemo-async-callback.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(async () => {
+    |                   ^^^^^^^^^^^^^
+> 3 |     await a;
+    | ^^^^^^^^^^^^
+> 4 |   }, []);
+    | ^^^^ Async and generator functions are not supported
+```
+
+### Fixture: `error.invalid-reassign-variable-in-usememo.js`
+
+**Input:**
+```javascript
+function Component() {
+  let x;
+  const y = useMemo(() => {
+    let z;
+    x = [];
+    z = true;
+    return z;
+  }, []);
+  return [x, y];
+}
+```
+
+**Error:**
+```
+Error: useMemo() callbacks may not reassign variables declared outside of the callback
+
+useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
+
+error.invalid-reassign-variable-in-usememo.ts:5:4
+  3 |   const y = useMemo(() => {
+  4 |     let z;
+> 5 |     x = [];
+    |     ^ Cannot reassign variable
+  6 |     z = true;
+  7 |     return z;
+  8 |   }, []);
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md
new file mode 100644
index 00000000000..0ed04666982
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md
@@ -0,0 +1,330 @@
+# validateHooksUsage
+
+## File
+`src/Validation/ValidateHooksUsage.ts`
+
+## Purpose
+This validation pass ensures that the function honors the [Rules of Hooks](https://react.dev/warnings/invalid-hook-call-warning). Specifically, it validates that:
+
+1. Hooks may only be called unconditionally (not in if statements, loops, etc.)
+2. Hooks cannot be used as first-class values (passed around, stored in variables, etc.)
+3. Hooks must be the same function on every render (no dynamic hooks)
+4. Hooks must be called at the top level, not within nested function expressions
+
+## Input Invariants
+- The function has been lowered to HIR
+- Global bindings have been resolved and typed
+- Nested function expressions have been lowered
+
+## Value Kinds Lattice
+
+The pass uses abstract interpretation with a lattice of value kinds:
+
+```typescript
+enum Kind {
+  Error,        // Hook already used in an invalid way (stop reporting)
+  KnownHook,    // Definitely a hook (from LoadGlobal with hook type)
+  PotentialHook, // Might be a hook (hook-like name but not from global)
+  Global,       // A global value that is not a hook
+  Local,        // A local variable
+}
+```
+
+The `joinKinds` function merges kinds, with earlier kinds taking precedence:
+- `Error` > `KnownHook` > `PotentialHook` > `Global` > `Local`
+
+## Validation Rules
+
+### Rule 1: No Conditional Hook Calls
+Hooks must always be called in a consistent order.
+
+**Error:**
+```
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+```
+
+### Rule 2: No Hooks as First-Class Values
+Known hooks may not be referenced as normal values (only called).
+
+**Error:**
+```
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+```
+
+### Rule 3: No Dynamic Hooks
+Potential hooks (hook-like names from local scope) may change between renders.
+
+**Error:**
+```
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+```
+
+### Rule 4: No Hooks in Nested Functions
+Hooks must be called at the top level of a component or custom hook.
+
+**Error:**
+```
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call [hookKind] within a function expression
+```
+
+## Algorithm
+
+### Phase 1: Compute Unconditional Blocks
+```typescript
+const unconditionalBlocks = computeUnconditionalBlocks(fn);
+```
+Determines which blocks are guaranteed to execute on every render (not inside conditionals).
+
+### Phase 2: Initialize Tracking
+```typescript
+const valueKinds = new Map<IdentifierId, Kind>();
+
+// Initialize parameters
+for (const param of fn.params) {
+  const place = param.kind === 'Identifier' ? param : param.place;
+  const kind = getKindForPlace(place); // PotentialHook if hook-like name
+  setKind(place, kind);
+}
+```
+
+### Phase 3: Track Value Kinds Through Instructions
+
+For each instruction, the pass tracks how hook-ness flows through values:
+
+```typescript
+case 'LoadGlobal':
+  // Globals are the source of KnownHook
+  if (getHookKind(fn.env, instr.lvalue.identifier) != null) {
+    setKind(instr.lvalue, Kind.KnownHook);
+  } else {
+    setKind(instr.lvalue, Kind.Global);
+  }
+  break;
+
+case 'PropertyLoad':
+  // Hook-like property of Global -> KnownHook
+  // Hook-like property of Local -> PotentialHook
+  // Property of KnownHook -> KnownHook (if hook-like name)
+  const objectKind = getKindForPlace(value.object);
+  const isHookProperty = isHookName(value.property);
+  // Determine kind based on object kind and property name
+  break;
+
+case 'CallExpression':
+  const calleeKind = getKindForPlace(value.callee);
+  const isHookCallee = calleeKind === Kind.KnownHook || calleeKind === Kind.PotentialHook;
+
+  if (isHookCallee && !unconditionalBlocks.has(block.id)) {
+    recordConditionalHookError(value.callee);
+  } else if (calleeKind === Kind.PotentialHook) {
+    recordDynamicHookUsageError(value.callee);
+  }
+  break;
+```
+
+### Phase 4: Check for Invalid Hook References
+
+When a `KnownHook` is used as an operand (not as a callee), it's an error:
+
+```typescript
+function visitPlace(place: Place): void {
+  const kind = valueKinds.get(place.identifier.id);
+  if (kind === Kind.KnownHook) {
+    recordInvalidHookUsageError(place);
+  }
+}
+```
+
+### Phase 5: Validate Nested Function Expressions
+
+Recursively check that nested functions don't call hooks:
+
+```typescript
+function visitFunctionExpression(errors: CompilerError, fn: HIRFunction) {
+  for (const instr of allInstructions(fn)) {
+    if (isCall(instr)) {
+      const callee = getCallee(instr);
+      const hookKind = getHookKind(fn.env, callee.identifier);
+      if (hookKind != null) {
+        errors.push({
+          reason: 'Hooks must be called at the top level...',
+          description: `Cannot call ${hookKind} within a function expression`,
+        });
+      }
+    }
+    // Recursively check nested functions
+    if (isFunctionExpression(instr)) {
+      visitFunctionExpression(errors, instr.value.loweredFunc.func);
+    }
+  }
+}
+```
+
+### Phi Node Handling
+
+For phi nodes (control flow join points), the pass joins the kinds of all operands:
+
+```typescript
+for (const phi of block.phis) {
+  let kind = isHookName(phi.place.identifier.name) ? Kind.PotentialHook : Kind.Local;
+  for (const [, operand] of phi.operands) {
+    const operandKind = valueKinds.get(operand.identifier.id);
+    if (operandKind !== undefined) {
+      kind = joinKinds(kind, operandKind);
+    }
+  }
+  valueKinds.set(phi.place.identifier.id, kind);
+}
+```
+
+## Edge Cases
+
+### Optional Calls
+Optional calls like `useHook?.()` are treated as conditional:
+```javascript
+const result = useHook?.(); // Error: conditional hook call
+```
+
+### Property Access on Hooks
+Hook-like properties of known hooks are also known hooks:
+```javascript
+const useFoo = useHook.useFoo; // useFoo is KnownHook
+useFoo(); // Must be called unconditionally
+```
+
+### Destructuring from Global
+Destructuring hook-like names from a global creates known hooks:
+```javascript
+const {useState} = React; // useState is KnownHook
+```
+
+### Hook-Like Names from Local Variables
+Hook-like names from local variables are potential hooks:
+```javascript
+const obj = createObject();
+const useFoo = obj.useFoo; // PotentialHook
+useFoo(); // Error: dynamic hook
+```
+
+### Error Deduplication
+The pass deduplicates errors by source location, and once an error is recorded for a place, it's marked as `Kind.Error` to prevent further errors for the same place.
+
+## TODOs
+
+1. **Fixpoint iteration for loops** - The pass currently skips phi operands whose value is unknown (which can occur in loops). A follow-up could expand this to fixpoint iteration:
+   ```typescript
+   // NOTE: we currently skip operands whose value is unknown
+   // (which can only occur for functions with loops), we may
+   // cause us to miss invalid code in some cases. We should
+   // expand this to a fixpoint iteration in a follow-up.
+   ```
+
+## Example
+
+### Fixture: `rules-of-hooks/error.invalid-hook-if-consequent.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = useHook();
+  }
+  return x;
+}
+```
+
+**Error:**
+```
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-if-consequent.ts:4:8
+  2 |   let x = null;
+  3 |   if (props.cond) {
+> 4 |     x = useHook();
+    |         ^^^^^^^ Hooks must always be called in a consistent order...
+  5 |   }
+  6 |   return x;
+```
+
+### Fixture: `rules-of-hooks/error.invalid-hook-as-prop.js`
+
+**Input:**
+```javascript
+function Component({useFoo}) {
+  useFoo();
+}
+```
+
+**Error:**
+```
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+
+error.invalid-hook-as-prop.ts:2:2
+  1 | function Component({useFoo}) {
+> 2 |   useFoo();
+    |   ^^^^^^ Hooks must be the same function on every render...
+  3 | }
+```
+
+### Fixture: `rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.js`
+
+**Input:**
+```javascript
+function Component() {
+  'use memo';
+  const f = () => {
+    const x = {
+      outer() {
+        const g = () => {
+          const y = {
+            inner() {
+              return useFoo();
+            },
+          };
+          return y;
+        };
+      },
+    };
+    return x;
+  };
+}
+```
+
+**Error:**
+```
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid-hook-in-nested-function-expression-object-expression.ts:10:21
+   8 |           const y = {
+   9 |             inner() {
+> 10 |               return useFoo();
+     |                      ^^^^^^ Hooks must be called at the top level...
+  11 |             },
+  12 |           };
+```
+
+### Fixture: `rules-of-hooks/error.invalid-hook-optionalcall.js`
+
+**Input:**
+```javascript
+function Component() {
+  const {result} = useConditionalHook?.() ?? {};
+  return result;
+}
+```
+
+**Error:**
+```
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-optionalcall.ts:2:19
+  1 | function Component() {
+> 2 |   const {result} = useConditionalHook?.() ?? {};
+    |                    ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order...
+  3 |   return result;
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md
new file mode 100644
index 00000000000..70038be14e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md
@@ -0,0 +1,233 @@
+# validateNoCapitalizedCalls
+
+## File
+`src/Validation/ValidateNoCapitalizedCalls.ts`
+
+## Purpose
+This validation pass ensures that capitalized functions are not called directly in a component. In React, capitalized functions are conventionally reserved for components, which should be invoked via JSX syntax rather than direct function calls.
+
+Direct calls to capitalized functions can cause issues because:
+1. Components may contain hooks, and calling them directly violates the Rules of Hooks
+2. The React runtime expects components to be rendered via JSX for proper reconciliation
+3. Direct calls bypass React's rendering lifecycle and state management
+
+This validation is opt-in and controlled by the `validateNoCapitalizedCalls` configuration option.
+
+## Input Invariants
+- The function has been lowered to HIR
+- Global bindings have been resolved
+- The `validateNoCapitalizedCalls` configuration option is enabled (via pragma or config)
+
+## Validation Rules
+
+### Rule 1: No Direct Calls to Capitalized Globals
+Capitalized global functions (not in the allowlist) cannot be called directly.
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+[FunctionName] may be a component.
+```
+
+### Rule 2: No Direct Method Calls to Capitalized Properties
+Capitalized methods on objects cannot be called directly.
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+[MethodName] may be a component.
+```
+
+## Algorithm
+
+### Phase 1: Build Allowlist
+```typescript
+const ALLOW_LIST = new Set([
+  ...DEFAULT_GLOBALS.keys(),           // Built-in globals (Array, Object, etc.)
+  ...(envConfig.validateNoCapitalizedCalls ?? []),  // User-configured allowlist
+]);
+
+const hookPattern = envConfig.hookPattern != null
+  ? new RegExp(envConfig.hookPattern)
+  : null;
+
+const isAllowed = (name: string): boolean => {
+  return ALLOW_LIST.has(name) ||
+         (hookPattern != null && hookPattern.test(name));
+};
+```
+
+### Phase 2: Track Capitalized Globals and Properties
+```typescript
+const capitalLoadGlobals = new Map<IdentifierId, string>();
+const capitalizedProperties = new Map<IdentifierId, string>();
+```
+
+### Phase 3: Scan Instructions
+```typescript
+for (const instr of block.instructions) {
+  switch (value.kind) {
+    case 'LoadGlobal':
+      // Track capitalized globals (excluding CONSTANTS)
+      if (
+        value.binding.name !== '' &&
+        /^[A-Z]/.test(value.binding.name) &&
+        !(value.binding.name.toUpperCase() === value.binding.name) &&
+        !isAllowed(value.binding.name)
+      ) {
+        capitalLoadGlobals.set(lvalue.identifier.id, value.binding.name);
+      }
+      break;
+
+    case 'CallExpression':
+      // Check if calling a tracked capitalized global
+      const calleeName = capitalLoadGlobals.get(value.callee.identifier.id);
+      if (calleeName != null) {
+        CompilerError.throwInvalidReact({
+          reason: 'Capitalized functions are reserved for components...',
+          description: `${calleeName} may be a component`,
+          ...
+        });
+      }
+      break;
+
+    case 'PropertyLoad':
+      // Track capitalized properties
+      if (typeof value.property === 'string' && /^[A-Z]/.test(value.property)) {
+        capitalizedProperties.set(lvalue.identifier.id, value.property);
+      }
+      break;
+
+    case 'MethodCall':
+      // Check if calling a tracked capitalized property
+      const propertyName = capitalizedProperties.get(value.property.identifier.id);
+      if (propertyName != null) {
+        errors.push({
+          reason: 'Capitalized functions are reserved for components...',
+          description: `${propertyName} may be a component`,
+          ...
+        });
+      }
+      break;
+  }
+}
+```
+
+## Edge Cases
+
+### ALL_CAPS Constants
+Functions with names that are entirely uppercase (like `CONSTANTS`) are not flagged:
+```javascript
+const x = MY_CONSTANT(); // Not an error - all caps indicates a constant, not a component
+const y = MyComponent(); // Error - PascalCase indicates a component
+```
+
+### Built-in Globals
+The default globals from `DEFAULT_GLOBALS` are automatically allowlisted:
+```javascript
+const arr = Array(5);    // OK - Array is a built-in
+const obj = Object.create(null);  // OK - Object is a built-in
+```
+
+### User-Configured Allowlist
+Users can allowlist specific functions via configuration:
+```typescript
+validateNoCapitalizedCalls: ['MyUtility', 'SomeFactory']
+```
+
+### Hook Patterns
+Functions matching the configured hook pattern are allowed even if capitalized:
+```typescript
+// With hookPattern: 'React\\$use.*'
+const x = React$useState(); // Allowed if it matches the hook pattern
+```
+
+### Method Calls vs Function Calls
+Both direct function calls and method calls on objects are checked:
+```javascript
+MyComponent();           // Error - direct call
+someObject.MyComponent(); // Error - method call
+```
+
+### Chained Property Access
+Only the immediate property being called is checked:
+```javascript
+a.b.MyComponent(); // Only checks if MyComponent is capitalized
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.capitalized-function-call.js`
+
+**Input:**
+```javascript
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = SomeFunc();
+
+  return x;
+}
+```
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+SomeFunc may be a component.
+
+error.capitalized-function-call.ts:3:12
+  1 | // @validateNoCapitalizedCalls
+  2 | function Component() {
+> 3 |   const x = SomeFunc();
+    |             ^^^^^^^^^^ Capitalized functions are reserved for components...
+  4 |
+  5 |   return x;
+  6 | }
+```
+
+### Fixture: `error.capitalized-method-call.js`
+
+**Input:**
+```javascript
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = someGlobal.SomeFunc();
+
+  return x;
+}
+```
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+SomeFunc may be a component.
+
+error.capitalized-method-call.ts:3:12
+  1 | // @validateNoCapitalizedCalls
+  2 | function Component() {
+> 3 |   const x = someGlobal.SomeFunc();
+    |             ^^^^^^^^^^^^^^^^^^^^^ Capitalized functions are reserved for components...
+  4 |
+  5 |   return x;
+  6 | }
+```
+
+### Fixture: `capitalized-function-allowlist.js` (No Error)
+
+**Input:**
+```javascript
+// @validateNoCapitalizedCalls:["SomeFunc"]
+function Component() {
+  const x = SomeFunc();
+  return x;
+}
+```
+
+**Output:**
+Compiles successfully because `SomeFunc` is in the allowlist.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md
new file mode 100644
index 00000000000..3c6b16d2fb9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md
@@ -0,0 +1,321 @@
+# validateLocalsNotReassignedAfterRender
+
+## File
+`src/Validation/ValidateLocalsNotReassignedAfterRender.ts`
+
+## Purpose
+This validation pass prevents a category of bugs where a closure captures a binding from one render but does not update when the binding is reassigned in a later render.
+
+When the React Compiler memoizes a function, that function captures bindings at the time of creation. If the function is reused across renders (because its dependencies haven't changed), any reassignments to captured variables will affect the wrong binding version. This can cause inconsistent behavior that's difficult to debug.
+
+The pass detects when:
+1. A local variable is reassigned within a function expression
+2. That function expression escapes (e.g., passed to useEffect, used as event handler)
+3. The reassignment would occur after render completes (in effects or async callbacks)
+
+## Input Invariants
+- The function has been lowered to HIR
+- Effects have been inferred for all operands (`operand.effect !== Effect.Unknown`)
+- Function signatures have been analyzed for `noAlias` properties
+
+## Validation Rules
+
+### Rule 1: No Reassignment After Render
+Variables cannot be reassigned in functions that escape to be called after render.
+
+**Error:**
+```
+Error: Cannot reassign variable after render completes
+
+Reassigning `[variable]` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+```
+
+### Rule 2: No Reassignment in Async Functions
+Variables cannot be reassigned within async functions (async functions always execute after render).
+
+**Error:**
+```
+Error: Cannot reassign variable in async function
+
+Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead.
+```
+
+## Algorithm
+
+### Phase 1: Track Context Variables
+Context variables are variables declared in the outer component/hook that are captured by inner functions:
+
+```typescript
+const contextVariables = new Set<IdentifierId>();
+
+// For DeclareContext in the main function, add to tracking
+case 'DeclareContext':
+  if (!isFunctionExpression) {
+    contextVariables.add(value.lvalue.place.identifier.id);
+  }
+  break;
+```
+
+### Phase 2: Detect Reassigning Functions
+The pass tracks which functions contain reassignments to context variables:
+
+```typescript
+const reassigningFunctions = new Map<IdentifierId, Place>();
+
+case 'FunctionExpression':
+case 'ObjectMethod':
+  // Recursively check if the function reassigns context variables
+  let reassignment = getContextReassignment(
+    value.loweredFunc.func,
+    contextVariables,
+    true,  // isFunctionExpression
+    isAsync || value.loweredFunc.func.async
+  );
+
+  // Also check if any captured functions reassign
+  if (reassignment === null) {
+    for (const operand of eachInstructionValueOperand(value)) {
+      const fromOperand = reassigningFunctions.get(operand.identifier.id);
+      if (fromOperand !== undefined) {
+        reassignment = fromOperand;
+        break;
+      }
+    }
+  }
+
+  if (reassignment !== null) {
+    // If async, error immediately
+    if (isAsync || value.loweredFunc.func.async) {
+      throw new CompilerError("Cannot reassign variable in async function");
+    }
+    // Otherwise, track this function as reassigning
+    reassigningFunctions.set(lvalue.identifier.id, reassignment);
+  }
+  break;
+```
+
+### Phase 3: Detect Reassignment in Function Expression
+Within a function expression, a `StoreContext` to a context variable is a reassignment:
+
+```typescript
+case 'StoreContext':
+  if (isFunctionExpression) {
+    if (contextVariables.has(value.lvalue.place.identifier.id)) {
+      return value.lvalue.place;  // Found a reassignment
+    }
+  } else {
+    // In main function, just track the context variable
+    contextVariables.add(value.lvalue.place.identifier.id);
+  }
+  break;
+```
+
+### Phase 4: Propagate Reassignment Through Data Flow
+Reassigning functions flow through local/context stores:
+
+```typescript
+case 'StoreLocal':
+case 'StoreContext':
+  const reassignment = reassigningFunctions.get(value.value.identifier.id);
+  if (reassignment !== undefined) {
+    reassigningFunctions.set(value.lvalue.place.identifier.id, reassignment);
+    reassigningFunctions.set(lvalue.identifier.id, reassignment);
+  }
+  break;
+
+case 'LoadLocal':
+  const reassignment = reassigningFunctions.get(value.place.identifier.id);
+  if (reassignment !== undefined) {
+    reassigningFunctions.set(lvalue.identifier.id, reassignment);
+  }
+  break;
+```
+
+### Phase 5: Check Escape Points
+When a reassigning function is used as an operand with `Effect.Freeze`, it means the function escapes (e.g., passed to a hook, used as a prop):
+
+```typescript
+for (const operand of operands) {
+  const reassignment = reassigningFunctions.get(operand.identifier.id);
+  if (reassignment !== undefined) {
+    if (operand.effect === Effect.Freeze) {
+      // Function escapes - this is an error
+      return reassignment;
+    } else {
+      // Function doesn't escape yet, propagate to lvalues
+      for (const lval of eachInstructionLValue(instr)) {
+        reassigningFunctions.set(lval.identifier.id, reassignment);
+      }
+    }
+  }
+}
+```
+
+### Phase 6: Check Terminal Operands
+Reassigning functions used in terminal operands (like return) also escape:
+
+```typescript
+for (const operand of eachTerminalOperand(block.terminal)) {
+  const reassignment = reassigningFunctions.get(operand.identifier.id);
+  if (reassignment !== undefined) {
+    return reassignment;
+  }
+}
+```
+
+### NoAlias Optimization
+For function calls with `noAlias` signatures, only the callee needs to be checked (not all arguments):
+
+```typescript
+if (value.kind === 'CallExpression') {
+  const signature = getFunctionCallSignature(fn.env, value.callee.identifier.type);
+  if (signature?.noAlias) {
+    operands = [value.callee];  // Only check the callee
+  }
+}
+```
+
+## Edge Cases
+
+### Nested Async Functions
+Async functions are always detected as problematic, regardless of nesting level:
+```javascript
+function Component() {
+  let x = 0;
+  const f = async () => {
+    const g = () => {
+      x = 1;  // Error: in async context
+    };
+  };
+}
+```
+
+### Function Composition
+If a reassigning function is captured by another function, that outer function is also marked as reassigning:
+```javascript
+function Component() {
+  let x = 0;
+  const reassign = () => { x = 1; };
+  const wrapper = () => { reassign(); };
+  useEffect(wrapper);  // Error: wrapper contains reassign
+}
+```
+
+### NoAlias Functions
+Functions with `noAlias` signatures don't let their arguments escape, so passing a reassigning function to them is safe:
+```javascript
+function Component() {
+  let x = 0;
+  const f = () => { x = 1; };
+  console.log(f);  // OK: console.log has noAlias, f doesn't escape
+}
+```
+
+### Direct Effect Usage
+The most common case is passing a reassigning function to useEffect:
+```javascript
+function Component() {
+  let local;
+  const reassign = () => { local = 'new value'; };
+  useEffect(() => { reassign(); }, []);  // Error
+}
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-reassign-local-variable-in-effect.js`
+
+**Input:**
+```javascript
+import {useEffect} from 'react';
+
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onMount = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
+  return 'ok';
+}
+```
+
+**Error:**
+```
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-effect.ts:7:4
+   5 |
+   6 |   const reassignLocal = newValue => {
+>  7 |     local = newValue;
+     |     ^^^^^ Cannot reassign `local` after render completes
+   8 |   };
+   9 |
+  10 |   const onMount = newValue => {
+```
+
+### Fixture: `error.invalid-reassign-local-variable-in-async-callback.js`
+
+**Input:**
+```javascript
+function Component() {
+  let value = null;
+  const reassign = async () => {
+    await foo().then(result => {
+      // Reassigning a local variable in an async function is *always* mutating
+      // after render, so this should error regardless of where this ends up
+      // getting called
+      value = result;
+    });
+  };
+
+  const onClick = async () => {
+    await reassign();
+  };
+  return <div onClick={onClick}>Click</div>;
+}
+```
+
+**Error:**
+```
+Error: Cannot reassign variable in async function
+
+Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-async-callback.ts:8:6
+   6 |       // after render, so this should error regardless of where this ends up
+   7 |       // getting called
+>  8 |       value = result;
+     |       ^^^^^ Cannot reassign `value`
+   9 |     });
+  10 |   };
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md
new file mode 100644
index 00000000000..81009cb17fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md
@@ -0,0 +1,133 @@
+# validateNoSetStateInRender
+
+## File
+`src/Validation/ValidateNoSetStateInRender.ts`
+
+## Purpose
+Validates that a component does not unconditionally call `setState` during render, which would cause an infinite update loop. This pass is conservative and may miss some cases (false negatives) but avoids false positives.
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Must run before reactive scope inference
+- Uses `computeUnconditionalBlocks` to determine which blocks always execute
+
+## Validation Rules
+This pass detects two types of violations:
+
+1. **Unconditional setState in render**: Calling `setState` (or a function that transitively calls setState) in a block that always executes during render.
+
+2. **setState inside useMemo**: Calling `setState` inside a `useMemo` callback, which can cause infinite loops when the memo's dependencies change.
+
+### Error Messages
+
+**For unconditional setState in render:**
+```
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state
+```
+
+**For setState in useMemo:**
+```
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render.
+```
+
+## Algorithm
+1. Compute the set of unconditional blocks using post-dominator analysis
+2. Initialize a set `unconditionalSetStateFunctions` to track functions that unconditionally call setState
+3. Traverse all blocks and instructions:
+   - **LoadLocal/StoreLocal**: Propagate setState tracking through variable assignments and loads
+   - **FunctionExpression/ObjectMethod**: Recursively check if the function unconditionally calls setState. If so, add the function's lvalue to the tracking set
+   - **StartMemoize/FinishMemoize**: Track when inside a manual memoization block (useMemo/useCallback)
+   - **CallExpression**: Check if the callee is a setState function or tracked setter:
+     - If inside a memoize block, emit a useMemo-specific error
+     - If in an unconditional block, emit a render-time setState error
+
+### Key Helper: `computeUnconditionalBlocks`
+Uses post-dominator tree analysis to find blocks that always execute when the function runs. The analysis ignores throw statements since hooks only need consistent ordering for normal execution paths.
+
+## Edge Cases
+
+### Conditional setState is allowed
+```javascript
+// This is valid - setState is conditional
+if (someCondition) {
+  setState(newValue);
+}
+```
+
+### Transitive detection through functions
+```javascript
+// Detected - setTrue unconditionally calls setState
+const setTrue = () => setState(true);
+setTrue(); // Error here
+```
+
+### False negative: setState in data structures
+```javascript
+// NOT detected - setState stored in array then extracted
+const [state, setState] = useState(false);
+const x = [setState];
+const y = x.pop();
+y(); // No error, but will cause infinite loop
+```
+
+### Feature flag: enableUseKeyedState
+When enabled, the error message suggests using `useKeyedState(initialState, key)` as an alternative pattern for resetting state when dependencies change.
+
+## TODOs
+None in source code.
+
+## Example
+
+### Fixture: `error.invalid-unconditional-set-state-in-render.js`
+
+**Input:**
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+  const aliased = setX;
+
+  setX(1);
+  aliased(2);
+
+  return x;
+}
+```
+
+**Error:**
+```
+Found 2 errors:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-in-render.ts:6:2
+  4 |   const aliased = setX;
+  5 |
+> 6 |   setX(1);
+    |   ^^^^ Found setState() in render
+  7 |   aliased(2);
+  8 |
+  9 |   return x;
+
+Error: Cannot call setState during render
+
+...
+
+error.invalid-unconditional-set-state-in-render.ts:7:2
+   5 |
+   6 |   setX(1);
+>  7 |   aliased(2);
+     |   ^^^^^^^ Found setState() in render
+```
+
+**Why it fails:** Both `setX(1)` and `aliased(2)` are unconditionally called during render. The pass tracks that `aliased` is assigned from `setX`, so calling `aliased()` is also detected as a setState call.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md
new file mode 100644
index 00000000000..467a1a21480
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md
@@ -0,0 +1,141 @@
+# validateNoDerivedComputationsInEffects
+
+## File
+`src/Validation/ValidateNoDerivedComputationsInEffects.ts`
+
+## Purpose
+Validates that `useEffect` is not used for derived computations that could and should be performed during render. This catches a common anti-pattern where developers use effects to synchronize derived state, which causes unnecessary re-renders and complexity.
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Effect hooks must be identified (`isUseEffectHookType`)
+- setState functions must be identified (`isSetStateType`)
+
+## Validation Rules
+The pass detects when an effect:
+1. Has a dependency array (2nd argument)
+2. The effect function only captures the dependencies and setState functions
+3. The effect calls setState with a value derived solely from the dependencies
+4. The effect has no control flow (loops with back edges)
+
+When detected, it produces:
+```
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+```
+
+## Algorithm
+1. **Collection Phase**: Traverse all instructions to collect:
+   - `candidateDependencies`: Map of ArrayExpression identifiers (potential deps arrays)
+   - `functions`: Map of FunctionExpression identifiers (potential effect callbacks)
+   - `locals`: Map of LoadLocal sources for identifier resolution
+
+2. **Detection Phase**: When a `useEffect` call is found with 2 arguments:
+   - Look up the effect function and dependencies array
+   - Verify all dependency array elements are identifiers
+   - Call `validateEffect()` on the effect function
+
+3. **Effect Validation** (`validateEffect`):
+   - Check that the effect only captures dependencies or setState functions
+   - Check that all dependencies are actually used in the effect
+   - Skip if any block has a back edge (loop)
+   - Track data flow through instructions:
+     - `LoadLocal`: Propagate dependency tracking
+     - `PropertyLoad`, `BinaryExpression`, `TemplateLiteral`, `CallExpression`, `MethodCall`: Aggregate dependencies from operands
+   - When `setState` is called with a single argument that depends on ALL effect dependencies, record the location
+   - If any dependency is used in a terminal operand (control flow), abort validation
+   - Push errors for all recorded setState locations
+
+### Value Tracking
+The pass maintains a `values` map from `IdentifierId` to `Array<IdentifierId>` tracking which effect dependencies each value derives from. When setState is called, if the argument derives from all dependencies, it's flagged as a derived computation.
+
+## Edge Cases
+
+### Allowed: Effects with side effects
+```javascript
+// Valid - effect captures external values, not just deps
+useEffect(() => {
+  logToServer(firstName);
+  setFullName(firstName);
+}, [firstName]);
+```
+
+### Allowed: Effects with loops
+```javascript
+// Valid - has control flow, not a simple derivation
+useEffect(() => {
+  let result = '';
+  for (const item of items) {
+    result += item;
+  }
+  setResult(result);
+}, [items]);
+```
+
+### Allowed: Effects with conditional setState
+```javascript
+// Valid - setState is conditional on control flow
+useEffect(() => {
+  if (condition) {
+    setFullName(firstName + lastName);
+  }
+}, [firstName, lastName]);
+```
+
+### Not detected: Subset of dependencies
+```javascript
+// Not flagged - only uses firstName, not lastName
+useEffect(() => {
+  setResult(firstName);
+}, [firstName, lastName]);
+```
+
+## TODOs
+None in source code.
+
+## Example
+
+### Fixture: `error.invalid-derived-computation-in-effect.js`
+
+**Input:**
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function BadExample() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+
+  // Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+
+error.invalid-derived-computation-in-effect.ts:11:4
+   9 |   const [fullName, setFullName] = useState('');
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect.
+  12 |   }, [firstName, lastName]);
+  13 |
+  14 |   return <div>{fullName}</div>;
+```
+
+**Why it fails:** The effect computes `fullName` purely from `firstName` and `lastName` (the dependencies) and then sets state. This is a derived computation that should be calculated during render:
+
+```javascript
+// Correct approach
+const fullName = firstName + ' ' + lastName;
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md
new file mode 100644
index 00000000000..2772aeb238b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md
@@ -0,0 +1,150 @@
+# validateNoSetStateInEffects
+
+## File
+`src/Validation/ValidateNoSetStateInEffects.ts`
+
+## Purpose
+Validates against calling `setState` synchronously in the body of an effect (`useEffect`, `useLayoutEffect`, `useInsertionEffect`), while allowing `setState` in callbacks scheduled by the effect. Synchronous setState in effects triggers cascading re-renders which hurts performance.
+
+See: https://react.dev/learn/you-might-not-need-an-effect
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Effect hooks must be identified (`isUseEffectHookType`, `isUseLayoutEffectHookType`, `isUseInsertionEffectHookType`)
+- setState functions must be identified (`isSetStateType`)
+- Only runs when `outputMode === 'lint'`
+
+## Validation Rules
+This pass detects synchronous setState calls within effect bodies:
+
+**Standard error message:**
+```
+Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended.
+```
+
+**Verbose error message** (when `enableVerboseNoSetStateInEffect` is enabled):
+Provides more detailed guidance about specific anti-patterns like non-local derived data, derived event patterns, and force update patterns.
+
+## Algorithm
+1. **Main function traversal**: Build a map `setStateFunctions` tracking which identifiers are setState functions
+2. For each instruction:
+   - **LoadLocal/StoreLocal**: Propagate setState tracking through variable assignments
+   - **FunctionExpression**: Check if the function synchronously calls setState by recursively calling `getSetStateCall()`. If so, track the function as a setState-calling function
+   - **useEffectEvent call**: If the argument is a function that calls setState, track the return value as a setState function
+   - **useEffect/useLayoutEffect/useInsertionEffect call**: Check if the callback argument is tracked as calling setState. If so, emit an error
+
+3. **`getSetStateCall()` helper**: Recursively analyzes a function to find synchronous setState calls:
+   - Tracks ref-derived values when `enableAllowSetStateFromRefsInEffects` is enabled
+   - Propagates setState tracking through local variables
+   - Returns the Place of the setState call if found, null otherwise
+
+### Ref-derived setState exception
+When `enableAllowSetStateFromRefsInEffects` is enabled, the pass allows setState calls where:
+- The value being set is derived from a ref (`useRef` or `ref.current`)
+- The block containing setState is controlled by a ref-dependent condition
+
+This allows patterns like storing initial layout measurements from refs in state.
+
+## Edge Cases
+
+### Allowed: setState in callbacks
+```javascript
+// Valid - setState in event callback, not synchronous
+useEffect(() => {
+  const handler = () => {
+    setState(newValue);
+  };
+  window.addEventListener('resize', handler);
+  return () => window.removeEventListener('resize', handler);
+}, []);
+```
+
+### Transitive detection
+```javascript
+// Detected - transitive through function calls
+const f = () => setState(value);
+const g = () => f();
+useEffect(() => {
+  g(); // Error: calls setState transitively
+});
+```
+
+### useEffectEvent tracking
+```javascript
+// Detected - useEffectEvent that calls setState is tracked
+const handler = useEffectEvent(() => {
+  setState(value);
+});
+useEffect(() => {
+  handler(); // Error: handler calls setState
+});
+```
+
+### Allowed: Ref-derived state (with flag)
+```javascript
+// Valid when enableAllowSetStateFromRefsInEffects is true
+const ref = useRef(null);
+useEffect(() => {
+  const width = ref.current.offsetWidth;
+  setWidth(width); // Allowed - derived from ref
+}, []);
+```
+
+## TODOs
+From the source code:
+```typescript
+/*
+ * TODO: once we support multiple locations per error, we should link to the
+ * original Place in the case that setStateFunction.has(callee)
+ */
+```
+
+## Example
+
+### Fixture: `invalid-setState-in-useEffect-transitive.js`
+
+**Input:**
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState(s => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
+```
+
+**Error:**
+```
+Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended.
+
+invalid-setState-in-useEffect-transitive.ts:13:4
+  11 |   };
+  12 |   useEffect(() => {
+> 13 |     g();
+     |     ^ Avoid calling setState() directly within an effect
+  14 |   });
+```
+
+**Why it fails:** Even though `setState` is not called directly in the effect, the pass traces through `g()` -> `f()` -> `setState()` and detects that the effect synchronously triggers a state update.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md
new file mode 100644
index 00000000000..f23c343dfbf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md
@@ -0,0 +1,167 @@
+# validateNoJSXInTryStatement
+
+## File
+`src/Validation/ValidateNoJSXInTryStatement.ts`
+
+## Purpose
+Validates that JSX is not created within a try block. Developers may incorrectly assume that wrapping JSX in try/catch will catch rendering errors, but React does not immediately render components when JSX is created - JSX is just a description of UI that will be rendered later. Error boundaries should be used instead.
+
+See: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Blocks are traversed in order
+- Only runs when `outputMode === 'lint'`
+
+## Validation Rules
+The pass errors when `JsxExpression` or `JsxFragment` instructions are found within a try block.
+
+**Error message:**
+```
+Error: Avoid constructing JSX within try/catch
+
+React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary.
+```
+
+### Important distinction
+- JSX in a **try block**: Error
+- JSX in a **catch block** (not nested in outer try): Allowed
+- JSX in a **catch block** (nested in outer try): Error
+
+## Algorithm
+1. Maintain a stack `activeTryBlocks` of currently active try statement handler block IDs
+2. For each block:
+   - Remove the current block from `activeTryBlocks` if it matches a handler (we've exited the try scope)
+   - If `activeTryBlocks` is not empty (we're inside a try block):
+     - Check each instruction for `JsxExpression` or `JsxFragment`
+     - If found, push an error
+   - If the block's terminal is a `try` terminal, push its handler block ID to `activeTryBlocks`
+
+### Block tracking with `retainWhere`
+The `retainWhere` utility is used to remove the current block from `activeTryBlocks` at the start of each block. When we reach a catch handler block, it gets removed from the active list, allowing JSX in catch blocks (unless there's an outer try).
+
+## Edge Cases
+
+### Allowed: JSX in catch (no outer try)
+```javascript
+// Valid - catch block is not inside a try
+function Component() {
+  try {
+    doSomething();
+  } catch {
+    return <ErrorMessage />; // OK
+  }
+}
+```
+
+### Error: JSX in catch with outer try
+```javascript
+// Error - catch is inside outer try
+function Component() {
+  try {
+    try {
+      doSomething();
+    } catch {
+      return <ErrorMessage />; // Error!
+    }
+  } catch {
+    return null;
+  }
+}
+```
+
+### Error: JSX assigned in try
+```javascript
+// Error - JSX creation is in try block
+function Component() {
+  let el;
+  try {
+    el = <div />; // Error here
+  } catch {
+    return null;
+  }
+  return el;
+}
+```
+
+### Finally blocks
+The validation currently has TODOs for handling try/catch/finally properly. Files like `error.todo-invalid-jsx-in-try-with-finally.js` indicate these are known unsupported cases.
+
+## TODOs
+Based on fixture naming patterns:
+- `error.todo-invalid-jsx-in-try-with-finally.js` - Try blocks with finally clauses
+- `error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js` - Nested try/catch in try with finally
+
+## Example
+
+### Fixture: `invalid-jsx-in-try-with-catch.js`
+
+**Input:**
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}
+```
+
+**Error:**
+```
+Error: Avoid constructing JSX within try/catch
+
+React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary.
+
+invalid-jsx-in-try-with-catch.ts:5:9
+  3 |   let el;
+  4 |   try {
+> 5 |     el = <div />;
+    |          ^^^^^^^ Avoid constructing JSX within try/catch
+  6 |   } catch {
+  7 |     return null;
+  8 |   }
+```
+
+**Why it fails:** The `<div />` JSX element is created inside a try block. If the developer expects this to catch errors from rendering the div, they will be surprised - the try/catch will only catch errors from creating the JSX object (which is rare), not from React actually rendering it later. The correct approach is to use an error boundary component to catch rendering errors.
+
+### Fixture: `invalid-jsx-in-catch-in-outer-try-with-catch.js`
+
+**Input:**
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}
+```
+
+**Error:**
+```
+Error: Avoid constructing JSX within try/catch
+
+...
+
+invalid-jsx-in-catch-in-outer-try-with-catch.ts:11:11
+   9 |       value = identity(props.foo);
+  10 |     } catch {
+> 11 |       el = <div value={value} />;
+     |            ^^^^^^^^^^^^^^^^^^^^^ Avoid constructing JSX within try/catch
+```
+
+**Why it fails:** Even though the JSX is in a catch block, that catch block is itself inside an outer try block. The outer try's catch won't catch rendering errors from the JSX any more than the inner try would.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md
new file mode 100644
index 00000000000..af4216313ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md
@@ -0,0 +1,180 @@
+# validateNoImpureValuesInRender
+
+## File
+`src/Validation/ValidateNoImpureValuesInRender.ts`
+
+## Purpose
+This validation pass ensures that impure values (values derived from non-deterministic function calls) are not used in render output. Impure values can produce unstable results that update unpredictably when the component re-renders, violating React's requirement that components be pure and idempotent.
+
+The pass tracks values produced by impure functions (like `Date.now()`, `Math.random()`, `performance.now()`) and errors if those values flow into JSX props, component return values, or other render-time contexts.
+
+## Input Invariants
+- The function has been through effect inference
+- Aliasing effects have been computed on instructions
+- `Impure` effects mark values from non-deterministic sources
+- `Render` effects mark values used in render context
+
+## Validation Rules
+The pass produces errors when:
+
+1. **Impure value in render context**: A value marked with an `Impure` effect flows into a position marked with a `Render` effect
+2. **Impure function returns in render**: A function that returns an impure value is called during render
+
+Error messages produced:
+- Category: `ImpureValues`
+- Reason: "Cannot access impure value during render"
+- Description: "Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render."
+
+The error points to two locations:
+1. Where the impure value is used in render (e.g., as a JSX prop)
+2. Where the impure value originates (e.g., the `Date.now()` call)
+
+## Algorithm
+
+### Phase 1: Infer Impure Values
+The pass iterates over all instructions to build a map of which identifiers contain impure values:
+
+```typescript
+function inferImpureValues(
+  fn: HIRFunction,
+  impure: Map<IdentifierId, ImpureEffect>,
+  impureFunctions: Map<IdentifierId, ImpuritySignature>,
+  cache: FunctionCache,
+): ImpuritySignature
+```
+
+The algorithm uses a fixed-point iteration that propagates impurity through data flow:
+
+1. **Process phi nodes**: If any operand of a phi is impure, the phi result is impure
+2. **Process effects**: For each instruction's effects:
+   - `Impure` effect: Mark the destination identifier as impure
+   - `Alias/Assign/Capture/CreateFrom/ImmutableCapture`: Propagate impurity from source to destination
+   - `CreateFunction`: Recursively analyze function expressions
+   - `Apply`: When calling a function with an impurity signature, propagate impurity to call results
+
+3. **Control flow sensitivity**: The pass also considers control-flow dominators to detect impure values that flow through conditional branches
+
+### Phase 2: Validate Render Effects
+After impurity inference converges, the pass validates all `Render` effects:
+
+```typescript
+function validateRenderEffect(effect: RenderEffect): void {
+  const impureEffect = impure.get(effect.place.identifier.id);
+  if (impureEffect != null) {
+    // Emit error
+  }
+}
+```
+
+### Special Cases
+- Values stored in refs (`isUseRefType`) are allowed to be impure since refs are not rendered
+- JSX elements are excluded from impurity propagation (`isJsxType`)
+
+## Edge Cases
+
+### Impure Values Through Helper Functions
+If a helper function returns an impure value and is called during render, both the call site and the original impure source are reported:
+
+```javascript
+function Component() {
+  const now = () => Date.now();  // Source of impurity
+  const render = () => {
+    return <div>{now()}</div>;   // Error: impure value in render
+  };
+  return <div>{render()}</div>;  // Error: impure value in render
+}
+```
+
+### Indirect Impurity Through Mutation
+When an impure value is captured into another value through mutation, the destination becomes impure:
+
+```javascript
+function Component() {
+  const obj = {};
+  obj.time = Date.now();  // obj becomes impure
+  return <Foo obj={obj} />;  // Error
+}
+```
+
+### Phi Node Propagation
+Impurity propagates through control flow merges:
+
+```javascript
+function Component({cond}) {
+  let x;
+  if (cond) {
+    x = Date.now();  // Impure path
+  } else {
+    x = 0;           // Pure path
+  }
+  return <Foo x={x} />;  // Error: x may be impure
+}
+```
+
+## TODOs
+From the source file:
+
+```typescript
+/**
+ * TODO: consider propagating impurity for assignments/mutations that
+ * are controlled by an impure value.
+ *
+ * Example: This should error since we know the semantics of array.push,
+ * it's a definite Mutate and definite Capture, not maybemutate+maybecapture:
+ *
+ * let x = [];
+ * if (Date.now() < START_DATE) {
+ *   x.push(1);
+ * }
+ * return <Foo x={x} />
+ */
+```
+
+## Example
+
+### Fixture: `error.invalid-impure-functions-in-render.js`
+
+**Input:**
+```javascript
+// @validateNoImpureFunctionsInRender
+
+function Component() {
+  const date = Date.now();
+  const now = performance.now();
+  const rand = Math.random();
+  return <Foo date={date} now={now} rand={rand} />;
+}
+```
+
+**Error:**
+```
+Found 3 errors:
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably
+when the component happens to re-render.
+(https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:20
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                     ^^^^ Cannot access impure value during render
+  8 | }
+
+error.invalid-impure-functions-in-render.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   const date = Date.now();
+    |                ^^^^^^^^^^ `Date.now` is an impure function.
+  5 |   const now = performance.now();
+
+Error: Cannot access impure value during render
+...
+```
+
+Key observations:
+- Each impure function call (`Date.now`, `performance.now`, `Math.random`) produces a separate error
+- The error shows both the usage location (in JSX) and the source location (the impure call)
+- The pass is enabled via the `@validateNoImpureFunctionsInRender` pragma
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md
new file mode 100644
index 00000000000..680f096937f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md
@@ -0,0 +1,268 @@
+# validateNoRefAccessInRender
+
+## File
+`src/Validation/ValidateNoRefAccessInRender.ts`
+
+## Purpose
+This validation pass ensures that React refs are not mutated during render. Refs are mutable containers for values that are not needed for rendering. Accessing or mutating `ref.current` during render can cause components to not update as expected because React does not track ref mutations.
+
+The pass validates both direct ref mutations at the component level and ref mutations inside functions that are called during render.
+
+## Input Invariants
+- The function has been through type inference
+- Ref types are properly identified (`useRef` return values)
+- Function expressions have been lowered
+
+## Validation Rules
+The pass produces errors for:
+
+1. **Direct ref mutation in render**: Assigning to `ref.current` at the top level of a component
+2. **Ref mutation in render helper**: Mutating a ref inside a function that is called during render
+3. **Duplicate ref initialization**: Initializing a ref more than once within null-guard blocks
+
+**Exception - Null-guard initialization pattern**: The pass allows a single initialization of `ref.current` inside an `if (ref.current == null)` block. This is a common pattern for lazy initialization:
+
+```javascript
+// ALLOWED - null-guard initialization
+if (ref.current == null) {
+  ref.current = expensiveComputation();
+}
+```
+
+Error messages produced:
+- Category: `Refs`
+- Reason: "Cannot access refs during render"
+- Messages:
+  - "Cannot update ref during render"
+  - "Ref is initialized more than once during render"
+  - "Ref was first initialized here" (for duplicate initialization)
+
+## Algorithm
+
+### Phase 1: Initialize Ref Tracking
+Track refs from function parameters and context (captured variables):
+
+```typescript
+for (const param of fn.params) {
+  if (isUseRefType(place.identifier)) {
+    refs.set(place.identifier.id, {kind: 'Ref', refId: makeRefId()});
+  }
+}
+```
+
+### Phase 2: Single Forward Pass
+Process all blocks in order, tracking:
+- `refs`: Map of identifier IDs to ref information
+- `nullables`: Set of identifiers known to be null/undefined
+- `guards`: Map of comparison results (e.g., `ref.current == null`)
+- `safeBlocks`: Map of blocks where null-guard allows initialization
+- `refMutatingFunctions`: Map of function identifiers that mutate refs
+
+### Phase 3: Process Instructions
+For each instruction, handle:
+
+```typescript
+switch (value.kind) {
+  case 'PropertyLoad': {
+    // Track ref.current access
+    if (objRef?.kind === 'Ref' && value.property === 'current') {
+      refs.set(lvalue.identifier.id, {kind: 'RefValue', refId: objRef.refId});
+    }
+    break;
+  }
+  case 'PropertyStore': {
+    // Check for ref mutation
+    if (isRef && isCurrentProperty && !isNullGuardInit) {
+      if (isTopLevel) {
+        errors.pushDiagnostic(makeRefMutationError(instr.loc));
+      }
+      return mutation;
+    }
+    break;
+  }
+  case 'FunctionExpression': {
+    // Recursively validate with isTopLevel=false
+    const mutation = validateFunction(..., false, errors);
+    if (mutation != null) {
+      refMutatingFunctions.set(lvalue.identifier.id, mutation);
+    }
+    break;
+  }
+  case 'CallExpression': {
+    // Check if calling a ref-mutating function
+    if (refMutatingFunctions.has(callee.identifier.id) && isTopLevel) {
+      errors.pushDiagnostic(makeRefMutationError(mutationInfo.loc));
+    }
+    break;
+  }
+}
+```
+
+### Phase 4: Guard Detection and Propagation
+When encountering an `if` terminal with a null-guard condition:
+
+```typescript
+if (block.terminal.kind === 'if') {
+  const guard = guards.get(block.terminal.test.identifier.id);
+  if (guard != null) {
+    // For equality checks (==, ===), consequent is safe
+    // For inequality checks (!=, !==), alternate is safe
+    const safeBlock = guard.isEquality
+      ? block.terminal.consequent
+      : block.terminal.alternate;
+    // Propagate safety through control flow
+  }
+}
+```
+
+## Edge Cases
+
+### Null-Guard Initialization Pattern (Allowed)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  if (ref.current == null) {
+    ref.current = computeValue();  // OK - first initialization
+  }
+  return <div />;
+}
+```
+
+### Duplicate Initialization (Error)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  if (ref.current == null) {
+    ref.current = value1;  // First init - tracked
+  }
+  if (ref.current == null) {
+    ref.current = value2;  // Error: duplicate initialization
+  }
+}
+```
+
+### Negated Null Check
+The pass correctly handles negated null checks:
+```javascript
+if (ref.current !== null) {
+  // NOT safe for initialization
+} else {
+  // Safe for initialization (ref.current is null here)
+}
+```
+
+### Ref Mutation in Called Function
+```javascript
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    ref.current = item;  // Mutation tracked in function
+    return <Item item={item} />;
+  };
+  // Error: calling function that mutates ref during render
+  return <List>{props.items.map(renderItem)}</List>;
+}
+```
+
+### Ref Mutation in Event Handler (Allowed)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  const onClick = () => {
+    ref.current = value;  // OK - not called during render
+  };
+  return <button onClick={onClick} />;  // onClick is passed, not called
+}
+```
+
+### Arbitrary Comparison Values (Error)
+Only `null` or `undefined` comparisons are recognized as null guards:
+```javascript
+const DEFAULT_VALUE = 1;
+if (ref.current == DEFAULT_VALUE) {
+  ref.current = 1;  // Error: not a null guard
+}
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-disallow-mutating-ref-in-render.js`
+
+**Input:**
+```javascript
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+  ref.current = false;
+
+  return <button ref={ref} />;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be
+accessed outside of render, such as in event handlers or effects. Accessing a
+ref value (the `current` property) during render can cause your component not
+to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-disallow-mutating-ref-in-render.ts:4:2
+  2 | function Component() {
+  3 |   const ref = useRef(null);
+> 4 |   ref.current = false;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |
+  6 |   return <button ref={ref} />;
+  7 | }
+```
+
+### Fixture: `error.invalid-ref-in-callback-invoked-during-render.js`
+
+**Input:**
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    const current = ref.current;
+    return <Foo item={item} current={current} />;
+  };
+  return <Items>{props.items.map(item => renderItem(item))}</Items>;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot access ref value during render
+
+React refs are values that are not needed for rendering...
+
+error.invalid-ref-in-callback-invoked-during-render.ts:6:37
+  4 |   const renderItem = item => {
+  5 |     const current = ref.current;
+> 6 |     return <Foo item={item} current={current} />;
+    |                                      ^^^^^^^ Ref value is used during render
+  7 |   };
+  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+
+error.invalid-ref-in-callback-invoked-during-render.ts:5:20
+  3 |   const ref = useRef(null);
+  4 |   const renderItem = item => {
+> 5 |     const current = ref.current;
+    |                     ^^^^^^^^^^^ Ref is initially accessed
+```
+
+Key observations:
+- Direct mutation at render level is an immediate error
+- Functions that mutate refs are tracked; errors occur when those functions are called at render level
+- The null-guard pattern allows a single initialization
+- The pass distinguishes between refs (`useRef` return type) and ref values (`.current` property)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md
new file mode 100644
index 00000000000..32f69e39ee3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md
@@ -0,0 +1,285 @@
+# validateNoFreezingKnownMutableFunctions
+
+## File
+`src/Validation/ValidateNoFreezingKnownMutableFunctions.ts`
+
+## Purpose
+This validation pass ensures that functions with known mutations (functions that mutate captured local variables) are not passed where a frozen value is expected. Frozen contexts include JSX props, hook arguments, and return values from hooks.
+
+The key insight is that a function which mutates captured variables is effectively a mutable value itself. Unlike a mutable array (which a receiver can choose not to mutate), there is no way for the receiver of a function to prevent the mutation from happening when the function is called. Therefore, passing such functions to props or hooks violates React's expectation that rendered values are immutable.
+
+## Input Invariants
+- The function has been through aliasing effect inference
+- `aliasingEffects` on FunctionExpression values have been computed
+- `Mutate` and `MutateTransitive` effects identify definite mutations to captured variables
+
+## Validation Rules
+The pass produces errors when:
+
+1. **Mutable function passed as JSX prop**: A function that mutates a captured variable is passed as a prop to a JSX element
+2. **Mutable function passed to hook**: A function that mutates a captured variable is passed as an argument to a hook
+3. **Mutable function returned from hook**: A function that mutates a captured variable is returned from a hook
+
+**Exception - Ref mutations**: Functions that mutate refs (`isRefOrRefLikeMutableType`) are allowed, since refs are mutable by design and not tracked for rendering purposes.
+
+Error messages produced:
+- Category: `Immutability`
+- Reason: "Cannot modify local variables after render completes"
+- Description: "This argument is a function which may reassign or mutate [variable] after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead"
+- Messages:
+  - "This function may (indirectly) reassign or modify [variable] after render"
+  - "This modifies [variable]"
+
+## Algorithm
+
+### Phase 1: Track Context Mutation Effects
+The pass maintains a map from identifier IDs to their associated mutation effects:
+
+```typescript
+const contextMutationEffects: Map<
+  IdentifierId,
+  Extract<AliasingEffect, {kind: 'Mutate'} | {kind: 'MutateTransitive'}>
+> = new Map();
+```
+
+### Phase 2: Single Forward Pass
+Process all blocks in order, handling specific instruction types:
+
+```typescript
+for (const block of fn.body.blocks.values()) {
+  for (const instr of block.instructions) {
+    switch (value.kind) {
+      case 'LoadLocal': {
+        // Propagate mutation effect from source to loaded value
+        const effect = contextMutationEffects.get(value.place.identifier.id);
+        if (effect != null) {
+          contextMutationEffects.set(lvalue.identifier.id, effect);
+        }
+        break;
+      }
+      case 'StoreLocal': {
+        // Propagate mutation effect to both lvalue and stored variable
+        const effect = contextMutationEffects.get(value.value.identifier.id);
+        if (effect != null) {
+          contextMutationEffects.set(lvalue.identifier.id, effect);
+          contextMutationEffects.set(value.lvalue.place.identifier.id, effect);
+        }
+        break;
+      }
+      case 'FunctionExpression': {
+        // Check function's aliasing effects for context mutations
+        if (value.loweredFunc.func.aliasingEffects != null) {
+          const context = new Set(
+            value.loweredFunc.func.context.map(p => p.identifier.id)
+          );
+          for (const effect of value.loweredFunc.func.aliasingEffects) {
+            if (effect.kind === 'Mutate' || effect.kind === 'MutateTransitive') {
+              // Mark function as mutable if it mutates a context variable
+              if (context.has(effect.value.identifier.id) &&
+                  !isRefOrRefLikeMutableType(effect.value.identifier.type)) {
+                contextMutationEffects.set(lvalue.identifier.id, effect);
+              }
+            }
+          }
+        }
+        break;
+      }
+      default: {
+        // Check all operands for freeze effect violations
+        for (const operand of eachInstructionValueOperand(value)) {
+          visitOperand(operand);  // Check if mutable function is being frozen
+        }
+      }
+    }
+  }
+}
+```
+
+### Phase 3: Validate Freeze Effects
+When an operand has a `Freeze` effect, check if it's a known mutable function:
+
+```typescript
+function visitOperand(operand: Place): void {
+  if (operand.effect === Effect.Freeze) {
+    const effect = contextMutationEffects.get(operand.identifier.id);
+    if (effect != null) {
+      // Emit error with both usage location and mutation location
+      errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          category: ErrorCategory.Immutability,
+          reason: 'Cannot modify local variables after render completes',
+          description: `This argument is a function which may reassign or mutate ${variable} after render...`,
+        })
+        .withDetails({loc: operand.loc, message: 'This function may...'})
+        .withDetails({loc: effect.value.loc, message: 'This modifies...'})
+      );
+    }
+  }
+}
+```
+
+## Edge Cases
+
+### Function Passed as JSX Prop (Error)
+```javascript
+function Component() {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('key', 'value');  // Mutates captured variable
+  };
+  return <Foo fn={fn} />;  // Error: fn is frozen but mutates cache
+}
+```
+
+### Function Passed to Hook (Error)
+```javascript
+function useFoo() {
+  const cache = new Map();
+  useHook(() => {
+    cache.set('key', 'value');  // Error: function mutates cache
+  });
+}
+```
+
+### Function Returned from Hook (Error)
+```javascript
+function useFoo() {
+  useHook();  // For hook inference
+  const cache = new Map();
+  return () => {
+    cache.set('key', 'value');  // Error: returned function mutates cache
+  };
+}
+```
+
+### Ref Mutation (Allowed)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  const fn = () => {
+    ref.current = value;  // OK: refs are mutable by design
+  };
+  return <Foo fn={fn} />;  // Allowed
+}
+```
+
+### Conditional Mutations
+The pass only errors on definite mutations (`Mutate`, `MutateTransitive`), not conditional mutations (`MutateConditionally`, `MutateTransitiveConditionally`). However, if a function already has a known mutation effect, conditional mutations will propagate that effect:
+
+```javascript
+function Component(cond) {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('a', 1);  // Definite mutation
+  };
+  const fn2 = fn;  // fn2 inherits mutation effect
+  return <Foo fn={fn2} />;  // Error
+}
+```
+
+### Nested Function Expressions
+Mutation effects propagate through assignments:
+
+```javascript
+function Component() {
+  const cache = new Map();
+  const inner = () => cache.set('key', 'value');
+  const outer = inner;  // outer inherits mutation effect
+  return <Foo fn={outer} />;  // Error
+}
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-pass-mutable-function-as-prop.js`
+
+**Input:**
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+function Component() {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('key', 'value');
+  };
+  return <Foo fn={fn} />;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-pass-mutable-function-as-prop.ts:7:18
+  5 |     cache.set('key', 'value');
+  6 |   };
+> 7 |   return <Foo fn={fn} />;
+    |                   ^^ This function may (indirectly) reassign or modify `cache` after render
+  8 | }
+  9 |
+
+error.invalid-pass-mutable-function-as-prop.ts:5:4
+  3 |   const cache = new Map();
+  4 |   const fn = () => {
+> 5 |     cache.set('key', 'value');
+    |     ^^^^^ This modifies `cache`
+  6 |   };
+  7 |   return <Foo fn={fn} />;
+  8 | }
+```
+
+### Fixture: `error.invalid-hook-function-argument-mutates-local-variable.js`
+
+**Input:**
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+
+function useFoo() {
+  const cache = new Map();
+  useHook(() => {
+    cache.set('key', 'value');
+  });
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-hook-function-argument-mutates-local-variable.ts:5:10
+  3 | function useFoo() {
+  4 |   const cache = new Map();
+> 5 |   useHook(() => {
+    |           ^^^^^^^
+> 6 |     cache.set('key', 'value');
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 7 |   });
+    | ^^^^ This function may (indirectly) reassign or modify `cache` after render
+  8 | }
+  9 |
+
+error.invalid-hook-function-argument-mutates-local-variable.ts:6:4
+  4 |   const cache = new Map();
+  5 |   useHook(() => {
+> 6 |     cache.set('key', 'value');
+    |     ^^^^^ This modifies `cache`
+  7 |   });
+  8 | }
+  9 |
+```
+
+Key observations:
+- The pass detects functions that mutate captured local variables (not refs)
+- Errors show both where the function is used (frozen) and where the mutation occurs
+- The validation prevents inconsistent re-render behavior by catching mutations that happen after render
+- The suggestion to "use state instead" guides users toward the correct React pattern
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md
new file mode 100644
index 00000000000..15e3c7af2db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md
@@ -0,0 +1,376 @@
+# validateExhaustiveDependencies
+
+## File
+`src/Validation/ValidateExhaustiveDependencies.ts`
+
+## Purpose
+This validation pass ensures that manual memoization (useMemo, useCallback) and effect hooks (useEffect, useLayoutEffect) have correct dependency arrays. The pass compares developer-specified dependencies against the actual values referenced within the memoized function or effect callback to detect:
+
+1. **Missing dependencies**: Values used in the function that are not listed in the dependency array, causing the memoized value or effect to update less frequently than expected
+2. **Extra dependencies**: Values listed in the dependency array that are not actually used, causing unnecessary re-computation or effect re-runs
+3. **Overly precise dependencies**: Dependencies that access deeper property paths than what is actually used (e.g., `x.y.z` when only `x.y` is accessed)
+
+The goal is to ensure that auto-memoization by the compiler will not substantially change program behavior.
+
+## Input Invariants
+- The function has been through `StartMemoize` and `FinishMemoize` instruction insertion
+- Manual dependency arrays have been parsed and associated with memoization blocks
+- Reactive identifiers have been computed
+- Optional chaining paths have been analyzed
+
+## Validation Rules
+The pass produces errors for:
+
+1. **Missing dependency in useMemo/useCallback**: A reactive value is used but not listed in deps
+2. **Extra dependency in useMemo/useCallback**: A value is listed but not used
+3. **Missing dependency in useEffect**: A value used in the effect callback is not in the deps array
+4. **Extra dependency in useEffect**: A value in deps is not used in the callback
+5. **Overly precise dependency**: The manual dep accesses a deeper path than what's actually used
+6. **Global as dependency**: Module-level values should not be listed as dependencies
+7. **useEffectEvent in dependency array**: Functions from useEffectEvent must not be in deps
+
+**Exception - Optional dependencies**: Non-reactive values of stable types (refs, setState) or primitive types are optional and don't need to be listed.
+
+Error messages produced:
+- Categories: `MemoDependencies` or `EffectExhaustiveDependencies`
+- Reasons:
+  - "Found missing memoization dependencies"
+  - "Found extra memoization dependencies"
+  - "Found missing/extra memoization dependencies"
+  - "Found missing effect dependencies"
+  - "Found extra effect dependencies"
+  - "Found missing/extra effect dependencies"
+- Messages:
+  - "Missing dependency `{dep}`"
+  - "Unnecessary dependency `{dep}`"
+  - "Overly precise dependency `{manual}`, use `{inferred}` instead"
+  - "Functions returned from `useEffectEvent` must not be included in the dependency array"
+  - "Values declared outside of a component/hook should not be listed as dependencies"
+
+## Algorithm
+
+### Phase 1: Collect Reactive Identifiers
+Scan all instructions to identify which identifiers are reactive:
+
+```typescript
+function collectReactiveIdentifiersHIR(fn: HIRFunction): Set<IdentifierId> {
+  const reactive = new Set<IdentifierId>();
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      for (const lvalue of eachInstructionLValue(instr)) {
+        if (lvalue.reactive) {
+          reactive.add(lvalue.identifier.id);
+        }
+      }
+      // ... also check operands
+    }
+  }
+  return reactive;
+}
+```
+
+### Phase 2: Find Optional Places
+Identify places that are within optional chaining expressions:
+
+```typescript
+function findOptionalPlaces(fn: HIRFunction): Map<IdentifierId, boolean> {
+  // Walks through optional terminals to track which identifiers
+  // are accessed via optional chaining (?.property)
+}
+```
+
+### Phase 3: Collect Dependencies
+The core algorithm processes each block, tracking:
+- `temporaries`: Map of identifier IDs to their dependency information
+- `locals`: Set of identifiers declared within the current scope
+- `dependencies`: Set of inferred dependencies
+
+```typescript
+function collectDependencies(
+  fn: HIRFunction,
+  temporaries: Map<IdentifierId, Temporary>,
+  callbacks: {
+    onStartMemoize: (...) => void;
+    onFinishMemoize: (...) => void;
+    onEffect: (...) => void;
+  },
+  isFunctionExpression: boolean,
+): Temporary {
+  for (const block of fn.body.blocks.values()) {
+    // Process phi nodes - merge dependencies from control flow
+    for (const phi of block.phis) {
+      // Aggregate dependencies from all operands
+    }
+
+    for (const instr of block.instructions) {
+      switch (value.kind) {
+        case 'LoadLocal':
+        case 'LoadContext':
+          // Track dependency path through the temporary
+          break;
+        case 'PropertyLoad':
+          // Extend dependency path: x -> x.y
+          break;
+        case 'FunctionExpression':
+          // Recursively collect dependencies from nested function
+          break;
+        case 'StartMemoize':
+          // Begin tracking dependencies for this memo block
+          break;
+        case 'FinishMemoize':
+          // Validate collected dependencies against manual deps
+          break;
+        case 'CallExpression':
+        case 'MethodCall':
+          // Check for effect hooks and validate their deps
+          break;
+      }
+    }
+  }
+}
+```
+
+### Phase 4: Validate Dependencies
+Compare inferred dependencies against manual dependencies:
+
+```typescript
+function validateDependencies(
+  inferred: Array<InferredDependency>,
+  manualDependencies: Array<ManualMemoDependency>,
+  reactive: Set<IdentifierId>,
+  ...
+): CompilerDiagnostic | null {
+  // Sort and deduplicate inferred dependencies
+  // For each inferred dep, check if there's a matching manual dep
+  // For each manual dep, check if it corresponds to an inferred dep
+  // Report missing and extra dependencies
+}
+```
+
+### Dependency Matching Rules
+- If `x.y.z` is inferred, `x`, `x.y`, or `x.y.z` are valid manual deps
+- Optional chaining is handled: `x?.y` inferred can match `x.y` manual (ignoring optionals)
+- Stable types (refs, setState) that are non-reactive are optional
+- Global values should not be in dependency arrays
+- useEffectEvent return values should not be in dependency arrays
+
+## Edge Cases
+
+### Overly Precise Dependency (Error)
+```javascript
+const a = useMemo(() => {
+  return x?.y.z?.a;
+}, [x?.y.z?.a.b]);  // Error: should be [x?.y.z?.a]
+```
+
+### Unnecessary Dependencies (Error)
+```javascript
+const f = useMemo(() => {
+  return [];
+}, [x, y.z, GLOBAL]);  // Error: all deps are unnecessary
+```
+
+### Reactive Stable Type (Error)
+```javascript
+const ref1 = useRef(null);
+const ref2 = useRef(null);
+const ref = z ? ref1 : ref2;  // ref is reactive (depends on z)
+const cb = useMemo(() => {
+  return () => ref.current;
+}, []);  // Error: missing dep 'ref' (reactive even though stable type)
+```
+
+### useEffectEvent in Dependencies (Error)
+```javascript
+const effectEvent = useEffectEvent(() => log(x));
+useEffect(() => {
+  effectEvent();
+}, [effectEvent]);  // Error: useEffectEvent returns should not be in deps
+```
+
+### Effect with Missing and Extra Dependencies (Error)
+```javascript
+useEffect(() => {
+  log(x, z);
+}, [x, y]);  // Error: missing z, extra y
+```
+
+### Valid Dependency Specifications
+```javascript
+// All valid - deps cover or exceed what's used
+const b = useMemo(() => x.y.z?.a, [x.y.z.a]);  // OK
+const d = useMemo(() => x?.y?.[(console.log(y), z?.b)], [x?.y, y, z?.b]);  // OK
+const e = useMemo(() => { e.push(x); return e; }, [x]);  // OK
+```
+
+## Configuration
+The validation can be configured via compiler options:
+
+```typescript
+// For useMemo/useCallback
+validateExhaustiveMemoizationDependencies: boolean
+
+// For useEffect and similar
+validateExhaustiveEffectDependencies: 'off' | 'all' | 'missing-only' | 'extra-only'
+```
+
+The `missing-only` and `extra-only` modes allow validating only one category of errors.
+
+## TODOs
+From the source file:
+
+```typescript
+/**
+ * TODO: Invalid, Complex Deps
+ *
+ * Handle cases where the user deps were not simple identifiers + property chains.
+ * We try to detect this in ValidateUseMemo but we miss some cases. The problem
+ * is that invalid forms can be value blocks or function calls that don't get
+ * removed by DCE, leaving a structure like:
+ *
+ * StartMemoize
+ * t0 = <value to memoize>
+ * ...non-DCE'd code for manual deps...
+ * FinishMemoize decl=t0
+ */
+```
+
+## Example
+
+### Fixture: `error.invalid-exhaustive-deps.js`
+
+**Input:**
+```javascript
+// @validateExhaustiveMemoizationDependencies @validateRefAccessDuringRender:false
+import {useMemo} from 'react';
+
+function Component({x, y, z}) {
+  const a = useMemo(() => {
+    return x?.y.z?.a;
+    // error: too precise
+  }, [x?.y.z?.a.b]);
+  const f = useMemo(() => {
+    return [];
+    // error: unnecessary
+  }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref = z ? ref1 : ref2;
+  const cb = useMemo(() => {
+    return () => ref.current;
+    // error: ref is a stable type but reactive
+  }, []);
+  return <Stringify results={[a, f, cb]} />;
+}
+```
+
+**Error:**
+```
+Found 4 errors:
+
+Error: Found missing/extra memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI. Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-exhaustive-deps.ts:7:11
+  5 | function Component({x, y, z}) {
+  6 |   const a = useMemo(() => {
+> 7 |     return x?.y.z?.a;
+    |            ^^^^^^^^^ Missing dependency `x?.y.z?.a`
+  8 |     // error: too precise
+  9 |   }, [x?.y.z?.a.b]);
+
+error.invalid-exhaustive-deps.ts:9:6
+> 9 |   }, [x?.y.z?.a.b]);
+    |       ^^^^^^^^^^^ Overly precise dependency `x?.y.z?.a.b`, use `x?.y.z?.a` instead
+
+Inferred dependencies: `[x?.y.z?.a]`
+
+Error: Found extra memoization dependencies
+...
+error.invalid-exhaustive-deps.ts:31:6
+> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+     |       ^ Unnecessary dependency `x`
+...
+     |                        ^^^^^^^^^^^^^ Unnecessary dependency `UNUSED_GLOBAL`. Values declared outside of a component/hook should not be listed as dependencies as the component will not re-render if they change
+
+Inferred dependencies: `[]`
+
+Error: Found missing memoization dependencies
+...
+error.invalid-exhaustive-deps.ts:37:13
+> 37 |       return ref.current;
+     |              ^^^ Missing dependency `ref`. Refs, setState functions, and other "stable" values generally do not need to be added as dependencies, but this variable may change over time to point to different values
+
+Inferred dependencies: `[ref]`
+```
+
+### Fixture: `error.invalid-exhaustive-effect-deps.js`
+
+**Input:**
+```javascript
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // error: missing dep - x
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // error: extra dep - y
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: missing dep - z; extra dep - y
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+}
+```
+
+**Error:**
+```
+Found 4 errors:
+
+Error: Found missing effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should.
+
+error.invalid-exhaustive-effect-deps.ts:7:8
+> 7 |     log(x);
+    |         ^ Missing dependency `x`
+
+Inferred dependencies: `[x]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps.ts:13:9
+> 13 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+
+Inferred dependencies: `[x]`
+
+Error: Found missing/extra effect dependencies
+...
+error.invalid-exhaustive-effect-deps.ts:17:11
+> 17 |     log(x, z);
+     |            ^ Missing dependency `z`
+
+error.invalid-exhaustive-effect-deps.ts:18:9
+> 18 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+
+Inferred dependencies: `[x, z]`
+```
+
+Key observations:
+- The pass validates both useMemo/useCallback and useEffect dependency arrays
+- Dependencies are inferred by analyzing actual value usage within the function
+- Optional chaining paths are tracked and included in dependency paths
+- Reactive stable types (like conditionally assigned refs) must still be listed
+- Globals and useEffectEvent returns should not be in dependency arrays
+- The validation provides fix suggestions showing the inferred correct dependencies
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md
new file mode 100644
index 00000000000..81d78a39111
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md
@@ -0,0 +1,93 @@
+# validateMemoizedEffectDependencies
+
+## File
+`src/Validation/ValidateMemoizedEffectDependencies.ts`
+
+## Purpose
+Validates that all known effect dependencies (for `useEffect`, `useLayoutEffect`, and `useInsertionEffect`) are properly memoized. This prevents a common bug where unmemoized effect dependencies can cause infinite re-render loops or other unexpected behavior.
+
+## Input Invariants
+- Operates on ReactiveFunction (post-reactive scope inference)
+- Reactive scopes have been assigned to values that need memoization
+- Must run after scope inference but before codegen
+
+## Validation Rules
+This pass checks two conditions:
+
+1. **Unmemoized dependencies with assigned scopes**: Disallows effect dependencies that should be memoized (have a reactive scope assigned) but where that reactive scope does not exist in the output. This catches cases where a reactive scope was pruned, such as when it spans a hook call.
+
+2. **Mutable dependencies at effect call site**: Disallows effect dependencies whose mutable range encompasses the effect call. This catches values that the compiler knows may be mutated after the effect is set up.
+
+When either condition is violated, the pass produces:
+```
+Compilation Skipped: React Compiler has skipped optimizing this component because
+the effect dependencies could not be memoized. Unmemoized effect dependencies can
+trigger an infinite loop or other unexpected behavior
+```
+
+## Algorithm
+1. Traverse the reactive function using a visitor pattern
+2. Track all scopes that exist in the AST by adding them to a `Set<ScopeId>` during `visitScope`
+3. Only record a scope if its dependencies are also memoized (transitive memoization check)
+4. When visiting an instruction that is an effect hook call (`useEffect`, `useLayoutEffect`, `useInsertionEffect`) with at least 2 arguments (function + deps array):
+   - Check if the dependency array is mutable at the call site using `isMutable()`
+   - Check if the dependency array's scope exists using `isUnmemoized()`
+   - If either check fails, push an error
+
+### Key Helper Functions
+
+**isEffectHook(identifier)**: Returns true if the identifier is `useEffect`, `useLayoutEffect`, or `useInsertionEffect`.
+
+**isUnmemoized(operand, scopes)**: Returns true if the operand has a scope assigned (`operand.scope != null`) but that scope doesn't exist in the set of valid scopes.
+
+## Edge Cases
+- Only validates effects with 2+ arguments (ignores effects without dependency arrays)
+- Transitive memoization: A scope is only considered valid if all its dependencies are also memoized
+- Merged scopes are tracked together with their primary scope
+
+## TODOs
+From the source code:
+```typescript
+// TODO: isMutable is not safe to call here as it relies on identifier mutableRange
+// which is no longer valid at this point in the pipeline
+```
+
+## Example
+
+### Fixture: `error.invalid-useEffect-dep-not-memoized.js`
+
+**Input:**
+```javascript
+// @validateMemoizedEffectDependencies
+import {useEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because
+the effect dependencies could not be memoized. Unmemoized effect dependencies can
+trigger an infinite loop or other unexpected behavior
+
+error.invalid-useEffect-dep-not-memoized.ts:6:2
+   4 | function Component(props) {
+   5 |   const data = {};
+>  6 |   useEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^
+>  7 |     console.log(props.value);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   }, [data]);
+     | ^^^^^^^^^^^^^
+```
+
+**Why it fails:** The `data` object is mutated after the `useEffect` call, which extends its mutable range past the effect. This means `data` cannot be safely memoized as an effect dependency because it might change after the effect is set up.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md
new file mode 100644
index 00000000000..fa78c2b9f2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md
@@ -0,0 +1,152 @@
+# validatePreservedManualMemoization
+
+## File
+`src/Validation/ValidatePreservedManualMemoization.ts`
+
+## Purpose
+Validates that all explicit manual memoization (`useMemo`/`useCallback`) from the original source code is accurately preserved in the compiled output. This ensures that values the developer intended to be memoized remain memoized after compilation.
+
+## Input Invariants
+- Operates on ReactiveFunction (post-reactive scope inference)
+- Manual memoization markers (`StartMemoize`/`FinishMemoize`) are present from earlier passes
+- Scopes have been assigned and merged as appropriate
+
+## Validation Rules
+This pass validates three conditions:
+
+### 1. Dependencies not mutated later
+Validates that dependencies of manual memoization are not mutated after the memoization call:
+```
+Existing memoization could not be preserved. This dependency may be modified later
+```
+
+### 2. Inferred dependencies match source
+Validates that the compiler's inferred dependencies match the manually specified dependencies:
+```
+Existing memoization could not be preserved. The inferred dependencies did not match
+the manually specified dependencies, which could cause the value to change more or
+less frequently than expected. The inferred dependency was `X`, but the source
+dependencies were [Y, Z].
+```
+
+### 3. Output value is memoized
+Validates that the memoized value actually ends up in a reactive scope:
+```
+Existing memoization could not be preserved. This value was memoized in source but
+not in compilation output
+```
+
+## Algorithm
+
+### State Management
+The visitor tracks:
+- `scopes: Set<ScopeId>` - All completed reactive scopes
+- `prunedScopes: Set<ScopeId>` - Scopes that were pruned
+- `temporaries: Map<IdentifierId, ManualMemoDependency>` - Temporary variable mappings
+- `manualMemoState: ManualMemoBlockState | null` - Current manual memoization context
+
+### ManualMemoBlockState
+```typescript
+type ManualMemoBlockState = {
+  reassignments: Map<DeclarationId, Set<Identifier>>;  // Track inlined useMemo reassignments
+  loc: SourceLocation;                                   // Source location for errors
+  decls: Set<DeclarationId>;                             // Declarations within the memo block
+  depsFromSource: Array<ManualMemoDependency> | null;   // Original deps from source
+  manualMemoId: number;                                  // Unique ID for this memoization
+};
+```
+
+### Processing Flow
+
+1. **On `StartMemoize` instruction:**
+   - Validate that dependencies' scopes have completed (not mutated later)
+   - Initialize `manualMemoState` with source dependencies
+   - Push error if any dependency's scope hasn't completed yet
+
+2. **During memo block (between Start/Finish):**
+   - Track all declarations made within the block
+   - Track reassignments for inlined useMemo handling
+   - Record property loads and temporaries
+
+3. **On scope completion:**
+   - Validate each scope dependency against source dependencies using `compareDeps()`
+   - An inferred dependency matches if:
+     - Root identifiers are the same (same named variable)
+     - Paths are identical, OR
+     - Inferred path is more specific (not involving `.current` refs)
+
+4. **On `FinishMemoize` instruction:**
+   - Validate that the memoized value is in a completed scope
+   - Handle inlined useMemo with reassignment tracking
+   - Push error if value is unmemoized
+
+### Dependency Comparison Results
+```typescript
+enum CompareDependencyResult {
+  Ok = 0,                    // Dependencies match
+  RootDifference = 1,        // Different root variables
+  PathDifference = 2,        // Different property paths
+  Subpath = 3,               // Inferred is less specific
+  RefAccessDifference = 4,   // ref.current access differs
+}
+```
+
+## Edge Cases
+
+### Inlined useMemo Handling
+When useMemo is inlined, it produces `let` declarations followed by reassignments. The pass tracks these reassignments to ensure all code paths produce memoized values.
+
+### Ref Access
+Special handling for `.current` property access on refs. Since `ref_prev === ref_new` does not imply `ref_prev.current === ref_new.current`, the pass is strict about ref access differences.
+
+### More Specific Dependencies
+If the compiler infers a more specific dependency (e.g., `obj.prop.value` instead of `obj`), this is acceptable as long as it doesn't involve ref access.
+
+## TODOs
+None found in the source.
+
+## Example
+
+### Fixture: `error.preserve-use-memo-ref-missing-reactive.ts`
+
+**Input:**
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo({cond}) {
+  const ref1 = useRef<undefined | (() => undefined)>();
+  const ref2 = useRef<undefined | (() => undefined)>();
+  const ref = cond ? ref1 : ref2;
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual
+memoization could not be preserved. The inferred dependencies did not match the
+manually specified dependencies, which could cause the value to change more or
+less frequently than expected. The inferred dependency was `ref`, but the source
+dependencies were []. Inferred dependency not present in source.
+
+error.preserve-use-memo-ref-missing-reactive.ts:9:21
+>  9 |   return useCallback(() => {
+     |                      ^^^^^^^
+> 10 |     if (ref != null) {
+> 11 |       ref.current();
+> 12 |     }
+> 13 |   }, []);
+     | ^^^^ Could not preserve existing manual memoization
+```
+
+**Why it fails:** The callback uses `ref` which is conditionally assigned based on `cond`. The compiler infers `ref` as a dependency, but the source specifies an empty dependency array `[]`. This mismatch means the memoization cannot be preserved as-is.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md
new file mode 100644
index 00000000000..5f0db16794a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md
@@ -0,0 +1,153 @@
+# validateStaticComponents
+
+## File
+`src/Validation/ValidateStaticComponents.ts`
+
+## Purpose
+Validates that components used in JSX are not created dynamically during render. Components created during render will have their state reset on every re-render because React sees them as new component types each time. This is a common React anti-pattern that causes bugs and poor performance.
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive transformation)
+- All instructions and phi nodes are present
+- JSX expressions have been lowered to `JsxExpression` instruction values
+
+## Validation Rules
+When a JSX element uses a component that was dynamically created during render, the pass produces:
+```
+Cannot create components during render. Components created during render will reset
+their state each time they are created. Declare components outside of render
+```
+
+The error includes two locations:
+1. Where the component is used in JSX
+2. Where the component was originally created
+
+### What constitutes "dynamically created"?
+The following instruction kinds mark a value as dynamically created:
+- `FunctionExpression` - An inline function definition
+- `NewExpression` - A `new` constructor call
+- `MethodCall` - A method call that returns a value
+- `CallExpression` - A function call that returns a value
+
+## Algorithm
+
+1. Create a `Map<IdentifierId, SourceLocation>` called `knownDynamicComponents` to track identifiers whose values are dynamically created
+
+2. Iterate through all blocks in evaluation order
+
+3. For each block, first process phi nodes:
+   - If any phi operand is in `knownDynamicComponents`, add the phi result to the map
+   - This propagates dynamic-ness through control flow joins
+
+4. For each instruction in the block:
+   - **FunctionExpression, NewExpression, MethodCall, CallExpression**: Add the lvalue to `knownDynamicComponents` with its source location
+   - **LoadLocal**: If the loaded value is dynamic, mark the lvalue as dynamic
+   - **StoreLocal**: If the stored value is dynamic, mark both the lvalue and the store target as dynamic
+   - **JsxExpression**: If the JSX tag is an identifier that is in `knownDynamicComponents`, push a diagnostic error
+
+5. Return the collected errors
+
+### Data Flow Tracking
+The pass tracks how dynamic values flow through the program:
+- Through variable assignments (`StoreLocal`, `LoadLocal`)
+- Through phi nodes (conditional assignments)
+- Into JSX component positions
+
+## Edge Cases
+
+### Conditionally Assigned Components
+```javascript
+function Example({cond}) {
+  let Component;
+  if (cond) {
+    Component = createComponent();  // Dynamic!
+  } else {
+    Component = OtherComponent;     // Static
+  }
+  return <Component />;  // Error: Component may be dynamic
+}
+```
+The phi node joins the conditional paths, and since one path is dynamic, the result is considered dynamic.
+
+### Component Returned from Hooks/Functions
+```javascript
+function Example() {
+  const Component = useCreateComponent();  // CallExpression - dynamic
+  return <Component />;  // Error
+}
+```
+
+### Factory Functions
+```javascript
+function Example() {
+  const Component = createComponent();  // CallExpression - dynamic
+  return <Component />;  // Error
+}
+```
+
+### Safe Patterns (No Error)
+```javascript
+// Component defined outside render
+const MyComponent = () => <div />;
+
+function Example() {
+  return <MyComponent />;  // OK - not created during render
+}
+```
+
+## TODOs
+None found in the source.
+
+## Example
+
+### Fixture: `static-components/invalid-dynamically-construct-component-in-render.js`
+
+**Input:**
+```javascript
+// @validateStaticComponents
+function Example(props) {
+  const Component = createComponent();
+  return <Component />;
+}
+```
+
+**Error (from logs):**
+```json
+{
+  "kind": "CompileError",
+  "detail": {
+    "options": {
+      "category": "StaticComponents",
+      "reason": "Cannot create components during render",
+      "description": "Components created during render will reset their state each time they are created. Declare components outside of render",
+      "details": [
+        {
+          "kind": "error",
+          "loc": { "start": { "line": 4, "column": 10 } },
+          "message": "This component is created during render"
+        },
+        {
+          "kind": "error",
+          "loc": { "start": { "line": 3, "column": 20 } },
+          "message": "The component is created during render here"
+        }
+      ]
+    }
+  }
+}
+```
+
+**Why it fails:** The `createComponent()` call creates a new component type on every render. When this component is used in JSX, React will see a different component type each time, causing the component to unmount and remount (losing all state) on every render.
+
+### Fixture: `static-components/invalid-dynamically-constructed-component-function.js`
+
+**Input:**
+```javascript
+// @validateStaticComponents
+function Example(props) {
+  const Component = () => <div />;
+  return <Component />;
+}
+```
+
+**Why it fails:** Even though this looks like a simple component definition, it creates a new function (and thus a new component type) on every render. The fix is to move the component definition outside of `Example`.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md
new file mode 100644
index 00000000000..b10017d8711
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md
@@ -0,0 +1,199 @@
+# validateSourceLocations
+
+## File
+`src/Validation/ValidateSourceLocations.ts`
+
+## Purpose
+**IMPORTANT: This validation is intended for unit tests only, not production use.**
+
+Validates that important source locations from the original code are preserved in the generated AST. This ensures that code coverage instrumentation tools (like Istanbul) can properly map back to the original source code for accurate coverage reports.
+
+## Input Invariants
+- Operates on the original Babel AST (`NodePath<FunctionDeclaration | ArrowFunctionExpression | FunctionExpression>`)
+- Operates on the generated CodegenFunction output
+- Must run after code generation
+
+## Validation Rules
+The pass checks that "important" source locations (as defined by Istanbul's instrumentation requirements) are preserved in the generated output.
+
+### Two types of errors:
+
+1. **Missing location:**
+```
+Important source location missing in generated code. Source location for [NodeType]
+is missing in the generated output. This can cause coverage instrumentation to fail
+to track this code properly, resulting in inaccurate coverage reports.
+```
+
+2. **Wrong node type:**
+```
+Important source location has wrong node type in generated code. Source location for
+[ExpectedType] exists in the generated output but with wrong node type(s): [ActualTypes].
+This can cause coverage instrumentation to fail to track this code properly.
+```
+
+### Important Node Types
+The following node types are considered important for coverage tracking:
+```typescript
+const IMPORTANT_INSTRUMENTED_TYPES = new Set([
+  'ArrowFunctionExpression',
+  'AssignmentPattern',
+  'ObjectMethod',
+  'ExpressionStatement',
+  'BreakStatement',
+  'ContinueStatement',
+  'ReturnStatement',
+  'ThrowStatement',
+  'TryStatement',
+  'VariableDeclarator',
+  'IfStatement',
+  'ForStatement',
+  'ForInStatement',
+  'ForOfStatement',
+  'WhileStatement',
+  'DoWhileStatement',
+  'SwitchStatement',
+  'SwitchCase',
+  'WithStatement',
+  'FunctionDeclaration',
+  'FunctionExpression',
+  'LabeledStatement',
+  'ConditionalExpression',
+  'LogicalExpression',
+  'VariableDeclaration',
+  'Identifier',
+]);
+```
+
+### Strict Node Types
+For these types, both the location AND node type must match:
+- `VariableDeclaration`
+- `VariableDeclarator`
+- `Identifier`
+
+## Algorithm
+
+### Step 1: Collect Important Original Locations
+Traverse the original AST and collect locations from nodes whose types are in `IMPORTANT_INSTRUMENTED_TYPES`:
+- Skip nodes that are manual memoization calls (`useMemo`/`useCallback`) since the compiler intentionally removes these
+- Build a map from location key to `{loc, nodeTypes}`
+
+### Step 2: Collect Generated Locations
+Recursively traverse the generated AST (main function body + outlined functions) and collect all locations with their node types.
+
+### Step 3: Validate Preservation
+For each important original location:
+- If the location is completely missing in generated output, report an error
+- For strict node types, verify the specific node type is present
+- Handle cases where a generated location has a different node type
+
+### Location Key Format
+Locations are compared using a string key:
+```typescript
+function locationKey(loc: SourceLocation): string {
+  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`;
+}
+```
+
+## Edge Cases
+
+### Manual Memoization Removal
+The compiler intentionally removes `useMemo` and `useCallback` calls (replacing them with compiler-generated memoization). These are detected and exempted from validation:
+```typescript
+function isManualMemoization(node: Node): boolean {
+  // Checks for useMemo/useCallback or React.useMemo/React.useCallback
+}
+```
+
+### Outlined Functions
+The validation also checks locations in outlined functions (functions extracted by the compiler for optimization purposes).
+
+### Multiple Node Types at Same Location
+Multiple node types can share the same location (e.g., a `VariableDeclarator` and its `Identifier` child). The pass tracks all node types for each location.
+
+## TODOs
+From the file documentation:
+> There's one big gotcha with this validation: it only works if the "important" original nodes are not optimized away by the compiler.
+>
+> When that scenario happens, we should just update the fixture to not include a node that has no corresponding node in the generated AST due to being completely removed during compilation.
+
+## Example
+
+### Fixture: `error.todo-missing-source-locations.js`
+
+**Input:**
+```javascript
+// @validateSourceLocations
+import {useEffect, useCallback} from 'react';
+
+function Component({prop1, prop2}) {
+  const x = prop1 + prop2;
+  const y = x * 2;
+  const arr = [x, y];
+  const obj = {x, y};
+  let destA, destB;
+  if (y > 5) {
+    [destA, destB] = arr;
+  }
+
+  const [a, b] = arr;
+  const {x: c, y: d} = obj;
+  let sound;
+
+  if (y > 10) {
+    sound = 'woof';
+  } else {
+    sound = 'meow';
+  }
+
+  useEffect(() => {
+    if (a > 10) {
+      console.log(a);
+      console.log(sound);
+      console.log(destA, destB);
+    }
+  }, [a, sound, destA, destB]);
+
+  const foo = useCallback(() => {
+    return a + b;
+  }, [a, b]);
+
+  function bar() {
+    return (c + d) * 2;
+  }
+
+  console.log('Hello, world!');
+
+  return [y, foo, bar];
+}
+```
+
+**Error (partial):**
+```
+Found 25 errors:
+
+Todo: Important source location missing in generated code
+Source location for Identifier is missing in the generated output...
+
+error.todo-missing-source-locations.ts:4:9
+> 4 | function Component({prop1, prop2}) {
+    |          ^^^^^^^^^
+
+Todo: Important source location missing in generated code
+Source location for VariableDeclaration is missing in the generated output...
+
+error.todo-missing-source-locations.ts:9:2
+>  9 |   let destA, destB;
+     |   ^^^^^^^^^^^^^^^^^
+
+Todo: Important source location missing in generated code
+Source location for ExpressionStatement is missing in the generated output...
+
+error.todo-missing-source-locations.ts:11:4
+> 11 |     [destA, destB] = arr;
+     |     ^^^^^^^^^^^^^^^^^^^^^
+```
+
+**Why it fails:** The compiler transforms the code significantly, and many original source locations are not preserved in the output. This causes coverage tools to lose track of which lines were executed.
+
+**Note:** This fixture is prefixed with `error.todo-` indicating this is a known limitation that needs to be addressed.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/README.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/README.md
new file mode 100644
index 00000000000..cafee2287ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/README.md
@@ -0,0 +1,305 @@
+# React Compiler Passes Documentation
+
+This directory contains detailed documentation for each pass in the React Compiler pipeline. The compiler transforms React components and hooks to add automatic memoization.
+
+## High-Level Architecture
+
+```
+                    ┌─────────────────────────────────────────────────────────────┐
+                    │                     COMPILATION PIPELINE                      │
+                    └─────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 1: HIR CONSTRUCTION                                                          │
+│  ┌─────────┐                                                                        │
+│  │  Babel  │──▶ lower ──▶ enterSSA ──▶ eliminateRedundantPhi                        │
+│  │   AST   │              │                                                         │
+│  └─────────┘              ▼                                                         │
+│                     ┌──────────┐                                                    │
+│                     │   HIR    │  (Control Flow Graph in SSA Form)                  │
+│                     └──────────┘                                                    │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 2: OPTIMIZATION                                                              │
+│                                                                                     │
+│  constantPropagation ──▶ deadCodeElimination ──▶ instructionReordering              │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 3: TYPE & EFFECT INFERENCE                                                   │
+│                                                                                     │
+│  inferTypes ──▶ analyseFunctions ──▶ inferMutationAliasingEffects                   │
+│                                              │                                      │
+│                                              ▼                                      │
+│                         inferMutationAliasingRanges ──▶ inferReactivePlaces         │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 4: REACTIVE SCOPE CONSTRUCTION                                               │
+│                                                                                     │
+│  inferReactiveScopeVariables ──▶ alignMethodCallScopes ──▶ alignObjectMethodScopes  │
+│              │                                                                      │
+│              ▼                                                                      │
+│  alignReactiveScopesToBlockScopesHIR ──▶ mergeOverlappingReactiveScopesHIR          │
+│              │                                                                      │
+│              ▼                                                                      │
+│  buildReactiveScopeTerminalsHIR ──▶ flattenReactiveLoopsHIR                         │
+│              │                                                                      │
+│              ▼                                                                      │
+│  flattenScopesWithHooksOrUseHIR ──▶ propagateScopeDependenciesHIR                   │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 5: HIR → REACTIVE FUNCTION                                                   │
+│                                                                                     │
+│                           buildReactiveFunction                                     │
+│                                    │                                                │
+│                                    ▼                                                │
+│                         ┌───────────────────┐                                       │
+│                         │ ReactiveFunction  │  (Tree Structure)                     │
+│                         └───────────────────┘                                       │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 6: REACTIVE FUNCTION OPTIMIZATION                                            │
+│                                                                                     │
+│  pruneUnusedLabels ──▶ pruneNonEscapingScopes ──▶ pruneNonReactiveDependencies      │
+│              │                                                                      │
+│              ▼                                                                      │
+│  pruneUnusedScopes ──▶ mergeReactiveScopesThatInvalidateTogether                    │
+│              │                                                                      │
+│              ▼                                                                      │
+│  pruneAlwaysInvalidatingScopes ──▶ propagateEarlyReturns ──▶ promoteUsedTemporaries │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 7: CODE GENERATION                                                           │
+│                                                                                     │
+│  renameVariables ──▶ codegenReactiveFunction                                        │
+│                              │                                                      │
+│                              ▼                                                      │
+│                      ┌─────────────┐                                                │
+│                      │  Babel AST  │  (With Memoization)                            │
+│                      └─────────────┘                                                │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+## Pass Categories
+
+### HIR Construction & SSA (1-3)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 1 | [lower](01-lower.md) | `HIR/BuildHIR.ts` | Convert Babel AST to HIR control-flow graph |
+| 2 | [enterSSA](02-enterSSA.md) | `SSA/EnterSSA.ts` | Convert to Static Single Assignment form |
+| 3 | [eliminateRedundantPhi](03-eliminateRedundantPhi.md) | `SSA/EliminateRedundantPhi.ts` | Remove unnecessary phi nodes |
+
+### Optimization (4-5)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 4 | [constantPropagation](04-constantPropagation.md) | `Optimization/ConstantPropagation.ts` | Sparse conditional constant propagation |
+| 5 | [deadCodeElimination](05-deadCodeElimination.md) | `Optimization/DeadCodeElimination.ts` | Remove unreferenced instructions |
+
+### Type Inference (6)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 6 | [inferTypes](06-inferTypes.md) | `TypeInference/InferTypes.ts` | Constraint-based type unification |
+
+### Mutation/Aliasing Inference (7-10)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 7 | [analyseFunctions](07-analyseFunctions.md) | `Inference/AnalyseFunctions.ts` | Analyze nested function effects |
+| 8 | [inferMutationAliasingEffects](08-inferMutationAliasingEffects.md) | `Inference/InferMutationAliasingEffects.ts` | Infer mutation/aliasing via abstract interpretation |
+| 9 | [inferMutationAliasingRanges](09-inferMutationAliasingRanges.md) | `Inference/InferMutationAliasingRanges.ts` | Compute mutable ranges from effects |
+| 10 | [inferReactivePlaces](10-inferReactivePlaces.md) | `Inference/InferReactivePlaces.ts` | Mark reactive places (props, hooks, derived) |
+
+### Reactive Scope Variables (11-12)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 11 | [inferReactiveScopeVariables](11-inferReactiveScopeVariables.md) | `ReactiveScopes/InferReactiveScopeVariables.ts` | Group co-mutating variables into scopes |
+| 12 | [rewriteInstructionKindsBasedOnReassignment](12-rewriteInstructionKindsBasedOnReassignment.md) | `SSA/RewriteInstructionKindsBasedOnReassignment.ts` | Convert SSA loads to context loads for reassigned vars |
+
+### Scope Alignment (13-15)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 13 | [alignMethodCallScopes](13-alignMethodCallScopes.md) | `ReactiveScopes/AlignMethodCallScopes.ts` | Align method call scopes with receivers |
+| 14 | [alignObjectMethodScopes](14-alignObjectMethodScopes.md) | `ReactiveScopes/AlignObjectMethodScopes.ts` | Align object method scopes |
+| 15 | [alignReactiveScopesToBlockScopesHIR](15-alignReactiveScopesToBlockScopesHIR.md) | `ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts` | Align to control-flow block boundaries |
+
+### Scope Construction (16-18)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 16 | [mergeOverlappingReactiveScopesHIR](16-mergeOverlappingReactiveScopesHIR.md) | `HIR/MergeOverlappingReactiveScopesHIR.ts` | Merge overlapping scopes |
+| 17 | [buildReactiveScopeTerminalsHIR](17-buildReactiveScopeTerminalsHIR.md) | `HIR/BuildReactiveScopeTerminalsHIR.ts` | Insert scope terminals into CFG |
+| 18 | [flattenReactiveLoopsHIR](18-flattenReactiveLoopsHIR.md) | `ReactiveScopes/FlattenReactiveLoopsHIR.ts` | Prune scopes inside loops |
+
+### Scope Flattening & Dependencies (19-20)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 19 | [flattenScopesWithHooksOrUseHIR](19-flattenScopesWithHooksOrUseHIR.md) | `ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts` | Prune scopes containing hooks |
+| 20 | [propagateScopeDependenciesHIR](20-propagateScopeDependenciesHIR.md) | `HIR/PropagateScopeDependenciesHIR.ts` | Derive minimal scope dependencies |
+
+### HIR → Reactive Conversion (21)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 21 | [buildReactiveFunction](21-buildReactiveFunction.md) | `ReactiveScopes/BuildReactiveFunction.ts` | Convert CFG to tree structure |
+
+### Reactive Function Pruning (22-25)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 22 | [pruneUnusedLabels](22-pruneUnusedLabels.md) | `ReactiveScopes/PruneUnusedLabels.ts` | Remove unused labels |
+| 23 | [pruneNonEscapingScopes](23-pruneNonEscapingScopes.md) | `ReactiveScopes/PruneNonEscapingScopes.ts` | Remove non-escaping scopes |
+| 24 | [pruneNonReactiveDependencies](24-pruneNonReactiveDependencies.md) | `ReactiveScopes/PruneNonReactiveDependencies.ts` | Remove non-reactive dependencies |
+| 25 | [pruneUnusedScopes](25-pruneUnusedScopes.md) | `ReactiveScopes/PruneUnusedScopes.ts` | Remove empty scopes |
+
+### Scope Optimization (26-28)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 26 | [mergeReactiveScopesThatInvalidateTogether](26-mergeReactiveScopesThatInvalidateTogether.md) | `ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts` | Merge co-invalidating scopes |
+| 27 | [pruneAlwaysInvalidatingScopes](27-pruneAlwaysInvalidatingScopes.md) | `ReactiveScopes/PruneAlwaysInvalidatingScopes.ts` | Prune always-invalidating scopes |
+| 28 | [propagateEarlyReturns](28-propagateEarlyReturns.md) | `ReactiveScopes/PropagateEarlyReturns.ts` | Handle early returns in scopes |
+
+### Codegen Preparation (29-31)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 29 | [promoteUsedTemporaries](29-promoteUsedTemporaries.md) | `ReactiveScopes/PromoteUsedTemporaries.ts` | Promote temps to named vars |
+| 30 | [renameVariables](30-renameVariables.md) | `ReactiveScopes/RenameVariables.ts` | Ensure unique variable names |
+| 31 | [codegenReactiveFunction](31-codegenReactiveFunction.md) | `ReactiveScopes/CodegenReactiveFunction.ts` | Generate final Babel AST |
+
+### Transformations (32-38)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 32 | [transformFire](32-transformFire.md) | `Transform/TransformFire.ts` | Transform `fire()` calls in effects |
+| 33 | [lowerContextAccess](33-lowerContextAccess.md) | `Optimization/LowerContextAccess.ts` | Optimize context access with selectors |
+| 34 | [optimizePropsMethodCalls](34-optimizePropsMethodCalls.md) | `Optimization/OptimizePropsMethodCalls.ts` | Normalize props method calls |
+| 35 | [optimizeForSSR](35-optimizeForSSR.md) | `Optimization/OptimizeForSSR.ts` | SSR-specific optimizations |
+| 36 | [outlineJSX](36-outlineJSX.md) | `Optimization/OutlineJsx.ts` | Outline JSX to components |
+| 37 | [outlineFunctions](37-outlineFunctions.md) | `Optimization/OutlineFunctions.ts` | Outline pure functions |
+| 38 | [memoizeFbtAndMacroOperandsInSameScope](38-memoizeFbtAndMacroOperandsInSameScope.md) | `ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts` | Keep FBT operands together |
+
+### Validation (39-55)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 39 | [validateContextVariableLValues](39-validateContextVariableLValues.md) | `Validation/ValidateContextVariableLValues.ts` | Variable reference consistency |
+| 40 | [validateUseMemo](40-validateUseMemo.md) | `Validation/ValidateUseMemo.ts` | useMemo callback requirements |
+| 41 | [validateHooksUsage](41-validateHooksUsage.md) | `Validation/ValidateHooksUsage.ts` | Rules of Hooks |
+| 42 | [validateNoCapitalizedCalls](42-validateNoCapitalizedCalls.md) | `Validation/ValidateNoCapitalizedCalls.ts` | Component vs function calls |
+| 43 | [validateLocalsNotReassignedAfterRender](43-validateLocalsNotReassignedAfterRender.md) | `Validation/ValidateLocalsNotReassignedAfterRender.ts` | Variable mutation safety |
+| 44 | [validateNoSetStateInRender](44-validateNoSetStateInRender.md) | `Validation/ValidateNoSetStateInRender.ts` | No setState during render |
+| 45 | [validateNoDerivedComputationsInEffects](45-validateNoDerivedComputationsInEffects.md) | `Validation/ValidateNoDerivedComputationsInEffects.ts` | Effect optimization hints |
+| 46 | [validateNoSetStateInEffects](46-validateNoSetStateInEffects.md) | `Validation/ValidateNoSetStateInEffects.ts` | Effect performance |
+| 47 | [validateNoJSXInTryStatement](47-validateNoJSXInTryStatement.md) | `Validation/ValidateNoJSXInTryStatement.ts` | Error boundary usage |
+| 48 | [validateNoImpureValuesInRender](48-validateNoImpureValuesInRender.md) | `Validation/ValidateNoImpureValuesInRender.ts` | Impure value isolation |
+| 49 | [validateNoRefAccessInRender](49-validateNoRefAccessInRender.md) | `Validation/ValidateNoRefAccessInRender.ts` | Ref access constraints |
+| 50 | [validateNoFreezingKnownMutableFunctions](50-validateNoFreezingKnownMutableFunctions.md) | `Validation/ValidateNoFreezingKnownMutableFunctions.ts` | Mutable function isolation |
+| 51 | [validateExhaustiveDependencies](51-validateExhaustiveDependencies.md) | `Validation/ValidateExhaustiveDependencies.ts` | Dependency array completeness |
+| 52 | [validateMemoizedEffectDependencies](52-validateMemoizedEffectDependencies.md) | `Validation/ValidateMemoizedEffectDependencies.ts` | Effect scope memoization |
+| 53 | [validatePreservedManualMemoization](53-validatePreservedManualMemoization.md) | `Validation/ValidatePreservedManualMemoization.ts` | Manual memo preservation |
+| 54 | [validateStaticComponents](54-validateStaticComponents.md) | `Validation/ValidateStaticComponents.ts` | Component identity stability |
+| 55 | [validateSourceLocations](55-validateSourceLocations.md) | `Validation/ValidateSourceLocations.ts` | Source location preservation |
+
+## Key Data Structures
+
+### HIR (High-level Intermediate Representation)
+
+The compiler converts source code to HIR for analysis. Key types:
+
+- **HIRFunction**: A function being compiled
+  - `body.blocks`: Map of BasicBlocks (control flow graph)
+  - `context`: Captured variables from outer scope
+  - `params`: Function parameters
+  - `returns`: The function's return place
+
+- **BasicBlock**: A sequence of instructions with a terminal
+  - `instructions`: Array of Instructions
+  - `terminal`: Control flow (return, branch, etc.)
+  - `phis`: Phi nodes for SSA
+
+- **Instruction**: A single operation
+  - `lvalue`: The place being assigned to
+  - `value`: The instruction kind (CallExpression, FunctionExpression, etc.)
+  - `effects`: Array of AliasingEffects
+
+- **Place**: A reference to a value
+  - `identifier.id`: Unique IdentifierId
+  - `effect`: How the place is used (read, mutate, etc.)
+
+### ReactiveFunction
+
+After HIR is analyzed, it's converted to ReactiveFunction:
+
+- Tree structure instead of CFG
+- Contains ReactiveScopes that define memoization boundaries
+- Each scope has dependencies and declarations
+
+### AliasingEffects
+
+Effects describe data flow and operations:
+
+- **Capture/Alias**: Value relationships
+- **Mutate/MutateTransitive**: Mutation tracking
+- **Freeze**: Immutability marking
+- **Render**: JSX usage context
+- **Create/CreateFunction**: Value creation
+
+## Feature Flags
+
+Many passes are controlled by feature flags in `Environment.ts`:
+
+| Flag | Enables Pass |
+|------|--------------|
+| `enableFire` | transformFire |
+| `lowerContextAccess` | lowerContextAccess |
+| `enableJsxOutlining` | outlineJSX |
+| `enableFunctionOutlining` | outlineFunctions |
+| `validateNoSetStateInRender` | validateNoSetStateInRender |
+| `enableUseMemoCacheInterop` | Preserves manual memoization |
+
+## Running Tests
+
+```bash
+# Run all tests
+yarn snap
+
+# Run specific fixture
+yarn snap -p <fixture-name>
+
+# Run with debug output (shows all passes)
+yarn snap -p <fixture-name> -d
+
+# Update expected outputs
+yarn snap -u
+```
+
+## Further Reading
+
+- [MUTABILITY_ALIASING_MODEL.md](../../src/Inference/MUTABILITY_ALIASING_MODEL.md): Detailed aliasing model docs
+- [Pipeline.ts](../../src/Entrypoint/Pipeline.ts): Pass ordering and orchestration
+- [HIR.ts](../../src/HIR/HIR.ts): Core data structure definitions
diff --git a/compiler/packages/babel-plugin-react-compiler/jest.config.js b/compiler/packages/babel-plugin-react-compiler/jest.config.js
new file mode 100644
index 00000000000..4702289acb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/jest.config.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  projects: ['<rootDir>/scripts/jest/*.config.js'],
+};
+
+module.exports = config;
diff --git a/compiler/packages/babel-plugin-react-compiler/package.json b/compiler/packages/babel-plugin-react-compiler/package.json
new file mode 100644
index 00000000000..7647bcab1ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "babel-plugin-react-compiler",
+  "version": "0.0.0-experimental-334f00b-20240725",
+  "description": "Babel plugin for React Compiler.",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "!*.tsbuildinfo"
+  ],
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "test": "./scripts/link-react-compiler-runtime.sh && yarn snap:ci",
+    "jest": "yarn build && ts-node node_modules/.bin/jest",
+    "snap": "yarn workspace snap run snap",
+    "snap:build": "yarn workspace snap run build",
+    "snap:ci": "yarn snap:build && yarn snap",
+    "ts:analyze-trace": "scripts/ts-analyze-trace.sh",
+    "lint": "yarn eslint src",
+    "watch": "yarn build --dts --watch"
+  },
+  "dependencies": {
+    "@babel/types": "^7.26.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/generator": "7.2.0",
+    "@babel/parser": "^7.2.0",
+    "@babel/plugin-syntax-typescript": "^7.18.6",
+    "@babel/plugin-transform-block-scoping": "^7.18.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/traverse": "^7.2.0",
+    "@testing-library/react": "^13.4.0",
+    "@tsconfig/node18-strictest": "^1.0.0",
+    "@types/glob": "^8.1.0",
+    "@types/invariant": "^2.2.35",
+    "@types/jest": "^29.0.3",
+    "@types/node": "^18.7.18",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "babel-jest": "^29.0.3",
+    "babel-plugin-fbt": "^1.0.0",
+    "babel-plugin-fbt-runtime": "^1.0.0",
+    "eslint": "^8.57.1",
+    "invariant": "^2.2.4",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "pretty-format": "^24",
+    "react": "0.0.0-experimental-4beb1fd8-20241118",
+    "react-dom": "0.0.0-experimental-4beb1fd8-20241118",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.2",
+    "zod": "^3.25.0 || ^4.0.0",
+    "zod-validation-error": "^3.5.0 || ^4.0.0"
+  },
+  "resolutions": {
+    "./**/@babel/parser": "7.7.4",
+    "./**/@babel/plugin-syntax-flow": "7.7.4",
+    "./**/@babel/types": "7.7.4",
+    "@babel/core": "7.2.0",
+    "@babel/generator": "7.2.0",
+    "@babel/traverse": "7.7.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/babel-plugin-react-compiler"
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/babel-plugin-annotate-react-code.ts b/compiler/packages/babel-plugin-react-compiler/scripts/babel-plugin-annotate-react-code.ts
new file mode 100644
index 00000000000..4970e39f2e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/babel-plugin-annotate-react-code.ts
@@ -0,0 +1,293 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {NodePath} from '@babel/core';
+import * as t from '@babel/types';
+
+export default function AnnotateReactCodeBabelPlugin(
+  _babel: typeof BabelCore,
+): BabelCore.PluginObj {
+  return {
+    name: 'annotate-react-code',
+    visitor: {
+      Program(prog): void {
+        annotate(prog);
+      },
+    },
+  };
+}
+
+function annotate(program: NodePath<t.Program>): void {
+  function traverseFn(fn: BabelFn): void {
+    if (!shouldVisit(fn)) {
+      return;
+    }
+
+    fn.skip();
+
+    const body = fn.node.body;
+    if (t.isBlockStatement(body)) {
+      body.body.unshift(buildTypeOfReactForget());
+    }
+  }
+
+  program.traverse({
+    FunctionDeclaration: traverseFn,
+    FunctionExpression: traverseFn,
+    ArrowFunctionExpression: traverseFn,
+  });
+}
+
+function shouldVisit(fn: BabelFn): boolean {
+  return (
+    // Component declarations are known components
+    (fn.isFunctionDeclaration() && isComponentDeclaration(fn.node)) ||
+    // Otherwise check if this is a component or hook-like function
+    isComponentOrHookLike(fn)
+  );
+}
+
+function buildTypeOfReactForget(): t.Statement {
+  // typeof globalThis[Symbol.for("react_forget")]
+  return t.expressionStatement(
+    t.unaryExpression(
+      'typeof',
+      t.memberExpression(
+        t.identifier('globalThis'),
+        t.callExpression(
+          t.memberExpression(
+            t.identifier('Symbol'),
+            t.identifier('for'),
+            false,
+            false,
+          ),
+          [t.stringLiteral('react_forget')],
+        ),
+        true,
+        false,
+      ),
+      true,
+    ),
+  );
+}
+
+/**
+ * COPIED FROM babel-plugin-react-compiler/src/Entrypoint/BabelUtils.ts
+ */
+type ComponentDeclaration = t.FunctionDeclaration & {
+  __componentDeclaration: boolean;
+};
+
+type BabelFn =
+  | NodePath<t.FunctionDeclaration>
+  | NodePath<t.FunctionExpression>
+  | NodePath<t.ArrowFunctionExpression>;
+
+export function isComponentDeclaration(
+  node: t.FunctionDeclaration,
+): node is ComponentDeclaration {
+  return Object.prototype.hasOwnProperty.call(node, '__componentDeclaration');
+}
+
+/*
+ * Adapted from the ESLint rule at
+ * https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L90-L103
+ */
+function isComponentOrHookLike(
+  node: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+): boolean {
+  const functionName = getFunctionName(node);
+  // Check if the name is component or hook like:
+  if (functionName !== null && isComponentName(functionName)) {
+    return (
+      // As an added check we also look for hook invocations or JSX
+      callsHooksOrCreatesJsx(node) &&
+      /*
+       * and avoid helper functions that take more than one argument
+       * helpers are _usually_ named with lowercase, but some code may
+       * violate this rule
+       */
+      node.get('params').length <= 1
+    );
+  } else if (functionName !== null && isHook(functionName)) {
+    // Hooks have hook invocations or JSX, but can take any # of arguments
+    return callsHooksOrCreatesJsx(node);
+  }
+
+  /*
+   * Otherwise for function or arrow function expressions, check if they
+   * appear as the argument to React.forwardRef() or React.memo():
+   */
+  if (node.isFunctionExpression() || node.isArrowFunctionExpression()) {
+    if (isForwardRefCallback(node) || isMemoCallback(node)) {
+      // As an added check we also look for hook invocations or JSX
+      return callsHooksOrCreatesJsx(node);
+    } else {
+      return false;
+    }
+  }
+  return false;
+}
+
+function isHookName(s: string): boolean {
+  return /^use[A-Z0-9]/.test(s);
+}
+
+/*
+ * We consider hooks to be a hook name identifier or a member expression
+ * containing a hook name.
+ */
+
+function isHook(path: NodePath<t.Expression | t.PrivateName>): boolean {
+  if (path.isIdentifier()) {
+    return isHookName(path.node.name);
+  } else if (
+    path.isMemberExpression() &&
+    !path.node.computed &&
+    isHook(path.get('property'))
+  ) {
+    const obj = path.get('object').node;
+    const isPascalCaseNameSpace = /^[A-Z].*/;
+    return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name);
+  } else {
+    return false;
+  }
+}
+
+/*
+ * Checks if the node is a React component name. React component names must
+ * always start with an uppercase letter.
+ */
+
+function isComponentName(path: NodePath<t.Expression>): boolean {
+  return path.isIdentifier() && /^[A-Z]/.test(path.node.name);
+}
+/*
+ * Checks if the node is a callback argument of forwardRef. This render function
+ * should follow the rules of hooks.
+ */
+
+function isForwardRefCallback(path: NodePath<t.Expression>): boolean {
+  return !!(
+    path.parentPath.isCallExpression() &&
+    path.parentPath.get('callee').isExpression() &&
+    isReactAPI(path.parentPath.get('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(path: NodePath<t.Expression>): boolean {
+  return (
+    path.parentPath.isCallExpression() &&
+    path.parentPath.get('callee').isExpression() &&
+    isReactAPI(path.parentPath.get('callee'), 'memo')
+  );
+}
+
+function isReactAPI(
+  path: NodePath<t.Expression | t.PrivateName | t.V8IntrinsicIdentifier>,
+  functionName: string,
+): boolean {
+  const node = path.node;
+  return (
+    (node.type === 'Identifier' && node.name === functionName) ||
+    (node.type === 'MemberExpression' &&
+      node.object.type === 'Identifier' &&
+      node.object.name === 'React' &&
+      node.property.type === 'Identifier' &&
+      node.property.name === functionName)
+  );
+}
+
+function callsHooksOrCreatesJsx(node: NodePath<t.Node>): boolean {
+  let invokesHooks = false;
+  let createsJsx = false;
+  node.traverse({
+    JSX() {
+      createsJsx = true;
+    },
+    CallExpression(call) {
+      const callee = call.get('callee');
+      if (callee.isExpression() && isHook(callee)) {
+        invokesHooks = true;
+      }
+    },
+  });
+
+  return invokesHooks || createsJsx;
+}
+
+/*
+ * Gets the static name of a function AST node. For function declarations it is
+ * easy. For anonymous function expressions it is much harder. If you search for
+ * `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
+ * where JS gives anonymous function expressions names. We roughly detect the
+ * same AST nodes with some exceptions to better fit our use case.
+ */
+
+function getFunctionName(
+  path: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+): NodePath<t.Expression> | null {
+  if (path.isFunctionDeclaration()) {
+    const id = path.get('id');
+    if (id.isIdentifier()) {
+      return id;
+    }
+    return null;
+  }
+  let id: NodePath<t.LVal | t.Expression | t.PrivateName> | null = null;
+  const parent = path.parentPath;
+  if (parent.isVariableDeclarator() && parent.get('init').node === path.node) {
+    // const useHook = () => {};
+    id = parent.get('id');
+  } else if (
+    parent.isAssignmentExpression() &&
+    parent.get('right').node === path.node &&
+    parent.get('operator') === '='
+  ) {
+    // useHook = () => {};
+    id = parent.get('left');
+  } else if (
+    parent.isProperty() &&
+    parent.get('value').node === path.node &&
+    !parent.get('computed') &&
+    parent.get('key').isLVal()
+  ) {
+    /*
+     * {useHook: () => {}}
+     * {useHook() {}}
+     */
+    id = parent.get('key');
+  } else if (
+    parent.isAssignmentPattern() &&
+    parent.get('right').node === path.node &&
+    !parent.get('computed')
+  ) {
+    /*
+     * const {useHook = () => {}} = {};
+     * ({useHook = () => {}} = {});
+     *
+     * Kinda clowny, but we'd said we'd follow spec convention for
+     * `IsAnonymousFunctionDefinition()` usage.
+     */
+    id = parent.get('left');
+  }
+  if (id !== null && (id.isIdentifier() || id.isMemberExpression())) {
+    return id;
+  } else {
+    return null;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/build-react-hooks-fixures.js b/compiler/packages/babel-plugin-react-compiler/scripts/build-react-hooks-fixures.js
new file mode 100644
index 00000000000..6189b1640e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/build-react-hooks-fixures.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {tests} = require('./eslint-plugin-react-hooks-test-cases');
+const {
+  runBabelPluginReactCompiler,
+} = require('../dist/Babel/RunReactCompilerBabelPlugin');
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+const prettierConfigPath = require.resolve('../.prettierrc');
+const process = require('process');
+const {createHash} = require('crypto');
+const {create} = require('domain');
+
+const FIXTURES_DIR = path.join(
+  process.cwd(),
+  'src',
+  '__tests__',
+  'fixtures',
+  'compiler',
+  'rules-of-hooks'
+);
+
+const PRETTIER_OPTIONS = prettier.resolveConfig.sync(FIXTURES_DIR, {
+  config: prettierConfigPath,
+});
+
+const fixtures = [];
+for (const test of tests.valid) {
+  fixtures.push({code: test.code, valid: true});
+}
+for (const test of tests.invalid) {
+  fixtures.push({code: test.code, valid: false});
+}
+
+for (const fixture of fixtures) {
+  let error = null;
+  let passes = true;
+  try {
+    // Does the fixture pass with hooks validation disabled? if not skip it
+    runBabelPluginReactCompiler(
+      fixture.code,
+      'rules-of-hooks.js',
+      'typescript',
+      {
+        environment: {
+          validateHooksUsage: false,
+        },
+      }
+    );
+    // Does the fixture pass with hooks validation enabled?
+    try {
+      runBabelPluginReactCompiler(
+        fixture.code,
+        'rules-of-hooks.js',
+        'typescript',
+        {
+          environment: {
+            validateHooksUsage: true,
+          },
+        }
+      );
+    } catch (e) {
+      passes = false;
+    }
+  } catch (e) {
+    error = e;
+  }
+  let code = fixture.code;
+  let prefix = '';
+  if (error !== null) {
+    prefix = `todo.bail.`;
+    code = `// @skip\n// Unsupported input\n${code}`;
+  } else if (fixture.valid === false) {
+    if (passes) {
+      prefix = `todo.error.invalid-`;
+      code = `// @skip\n// Passed but should have failed\n${code}`;
+    } else {
+      prefix = `error.invalid-`;
+      code = `// Expected to fail\n${code}`;
+    }
+  } else if (!passes) {
+    // oops, error when it should have passed
+    prefix = `todo.`;
+    code = `// @skip\n// Failed but should have passed\n${code}`;
+  }
+  const formatted = prettier.format(code, PRETTIER_OPTIONS);
+  const hmac = createHash('sha256');
+  hmac.update(formatted, 'utf8');
+  let name = `${prefix}rules-of-hooks-${hmac
+    .digest('hex')
+    .substring(0, 12)}.js`;
+  const fixturePath = path.join(FIXTURES_DIR, name);
+  fs.writeFileSync(fixturePath, formatted, 'utf8');
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/eslint-plugin-react-hooks-test-cases.js b/compiler/packages/babel-plugin-react-compiler/scripts/eslint-plugin-react-hooks-test-cases.js
new file mode 100644
index 00000000000..132f6888363
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/eslint-plugin-react-hooks-test-cases.js
@@ -0,0 +1,985 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// NOTE: Extracted from https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ */
+function normalizeIndent(strings) {
+  const codeLines = strings[0].split('\n');
+  const leftPadding = codeLines[1].match(/\s+/)[0];
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+module.exports.tests = {
+  valid: [
+    {
+      code: normalizeIndent`
+        // Valid because components can use hooks.
+        function ComponentWithHook() {
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because components can use hooks.
+        function createComponentWithHook() {
+          return function ComponentWithHook() {
+            useHook();
+          };
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can use hooks.
+        function useHookWithHook() {
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can use hooks.
+        function createHook() {
+          return function useHookWithHook() {
+            useHook();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because components can call functions.
+        function ComponentWithNormalFunction() {
+          doSomething();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions can call functions.
+        function normalFunctionWithNormalFunction() {
+          doSomething();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions can call functions.
+        function normalFunctionWithConditionalFunction() {
+          if (cond) {
+            doSomething();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions can call functions.
+        function functionThatStartsWithUseButIsntAHook() {
+          if (cond) {
+            userFetch();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid although unconditional return doesn't make sense and would fail other rules.
+        // We could make it invalid but it doesn't matter.
+        function useUnreachable() {
+          return;
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() { useState(); }
+        const whatever = function useHook() { useState(); };
+        const useHook1 = () => { useState(); };
+        let useHook2 = () => useState();
+        useHook2 = () => { useState(); };
+        ({useHook: () => { useState(); }});
+        ({useHook() { useState(); }});
+        const {useHook3 = () => { useState(); }} = {};
+        ({useHook = () => { useState(); }} = {});
+        Namespace.useHook = () => { useState(); };
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          useHook1();
+          useHook2();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function createHook() {
+          return function useHook() {
+            useHook1();
+            useHook2();
+          };
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          useState() && a;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          return useHook1() + useHook2();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          return useHook1(useHook2());
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can be used in anonymous function arguments to
+        // forwardRef.
+        const FancyButton = forwardRef(function (props, ref) {
+          useHook();
+          return <button {...props} ref={ref} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can be used in anonymous function arguments to
+        // React.memo.
+        const MemoizedFunction = React.memo(props => {
+          useHook();
+          return <button {...props} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can be used in anonymous function arguments to
+        // memo.
+        const MemoizedFunction = memo(function (props) {
+          useHook();
+          return <button {...props} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because classes can call functions.
+        // We don't consider these to be hooks.
+        class C {
+          m() {
+            this.useHook();
+            super.useHook();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid -- this is a regression test.
+        jest.useFakeTimers();
+        beforeEach(() => {
+          jest.useRealTimers();
+        })
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because they're not matching use[A-Z].
+        fooState();
+        _use();
+        _useState();
+        use_hook();
+        // also valid because it's not matching the PascalCase namespace
+        jest.useFakeTimer()
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Regression test for some internal code.
+        // This shows how the "callback rule" is more relaxed,
+        // and doesn't kick in unless we're confident we're in
+        // a component or a hook.
+        function makeListener(instance) {
+          each(pixelsWithInferredEvents, pixel => {
+            if (useExtendedSelector(pixel.id) && extendedButton) {
+              foo();
+            }
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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)
+          }
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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)
+          }
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Regression test for incorrectly flagged valid code.
+        function RegressionTest() {
+          const foo = cond ? a : b;
+          useState();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because exceptions abort rendering
+        function RegressionTest() {
+          if (page == null) {
+            throw new Error('oh no!');
+          }
+          useState();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the loop doesn't change the order of hooks calls.
+        function RegressionTest() {
+          const res = [];
+          const additionalCond = true;
+          for (let i = 0; i !== 10 && additionalCond; ++i ) {
+            res.push(i);
+          }
+          React.useLayoutEffect(() => {});
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Is valid but hard to compute by brute-forcing
+        function MyComponent() {
+          // 40 conditions
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+
+          // 10 hooks
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the neither the conditions before or after the hook affect the hook call
+        // Failed prior to implementing BigInt because pathsFromStartToEnd and allPathsFromStartToEnd were too big and had rounding errors
+        const useSomeHook = () => {};
+
+        const SomeName = () => {
+          const filler = FILLER ?? FILLER ?? FILLER;
+          const filler2 = FILLER ?? FILLER ?? FILLER;
+          const filler3 = FILLER ?? FILLER ?? FILLER;
+          const filler4 = FILLER ?? FILLER ?? FILLER;
+          const filler5 = FILLER ?? FILLER ?? FILLER;
+          const filler6 = FILLER ?? FILLER ?? FILLER;
+          const filler7 = FILLER ?? FILLER ?? FILLER;
+          const filler8 = FILLER ?? FILLER ?? FILLER;
+
+          useSomeHook();
+
+          if (anyConditionCanEvenBeFalse) {
+            return null;
+          }
+
+          return (
+            <React.Fragment>
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+            </React.Fragment>
+          );
+        };
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the neither the condition nor the loop affect the hook call.
+        function App(props) {
+          const someObject = {propA: true};
+          for (const propName in someObject) {
+            if (propName === true) {
+            } else {
+            }
+          }
+          const [myState, setMyState] = useState(null);
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithConditionalHook() {
+          if (cond) {
+            useConditionalHook();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        Hook.useState();
+        Hook._useState();
+        Hook.use42();
+        Hook.useHook();
+        Hook.use_hook();
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        class C {
+          m() {
+            This.useHook();
+            Super.useHook();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // This is a false positive (it's valid) that unfortunately
+        // we cannot avoid. Prefer to rename it to not start with "use"
+        class Foo extends Component {
+          render() {
+            if (cond) {
+              FooStore.useFeatureFlag();
+            }
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithConditionalHook() {
+          if (cond) {
+            Namespace.useConditionalHook();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function createComponent() {
+          return function ComponentWithConditionalHook() {
+            if (cond) {
+              useConditionalHook();
+            }
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookWithConditionalHook() {
+          if (cond) {
+            useConditionalHook();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function createHook() {
+          return function useHookWithConditionalHook() {
+            if (cond) {
+              useConditionalHook();
+            }
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithTernaryHook() {
+          cond ? useTernaryHook() : null;
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function ComponentWithHookInsideCallback() {
+          useEffect(() => {
+            useHookInsideCallback();
+          });
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function createComponent() {
+          return function ComponentWithHookInsideCallback() {
+            useEffect(() => {
+              useHookInsideCallback();
+            });
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function ComponentWithHookInsideCallback() {
+          function handleClick() {
+            useState();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function createComponent() {
+          return function ComponentWithHookInsideCallback() {
+            function handleClick() {
+              useState();
+            }
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithHookInsideLoop() {
+          while (cond) {
+            useHookInsideLoop();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function renderItem() {
+          useState();
+        }
+
+        function List(props) {
+          return props.items.map(renderItem);
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Currently invalid because it violates the convention and removes the "taint"
+        // from a hook. We *could* make it valid to avoid some false positives but let's
+        // ensure that we don't break the "renderItem" and "normalFunctionWithConditionalHook"
+        // cases which must remain invalid.
+        function normalFunctionWithHook() {
+          useHookInsideNormalFunction();
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // These are neither functions nor hooks.
+        function _normalFunctionWithHook() {
+          useHookInsideNormalFunction();
+        }
+        function _useNotAHook() {
+          useHookInsideNormalFunction();
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function normalFunctionWithConditionalHook() {
+          if (cond) {
+            useHookInsideNormalFunction();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookInLoops() {
+          while (a) {
+            useHook1();
+            if (b) return;
+            useHook2();
+          }
+          while (c) {
+            useHook3();
+            if (d) return;
+            useHook4();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookInLoops() {
+          while (a) {
+            useHook1();
+            if (b) continue;
+            useHook2();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useLabeledBlock() {
+          label: {
+            if (a) break label;
+            useHook();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Currently invalid.
+        // These are variations capturing the current heuristic--
+        // we only allow hooks in PascalCase or useFoo functions.
+        // We *could* make some of these valid. But before doing it,
+        // consider specific cases documented above that contain reasoning.
+        function a() { useState(); }
+        const whatever = function b() { useState(); };
+        const c = () => { useState(); };
+        let d = () => useState();
+        e = () => { useState(); };
+        ({f: () => { useState(); }});
+        ({g() { useState(); }});
+        const {j = () => { useState(); }} = {};
+        ({k = () => { useState(); }} = {});
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          if (a) return;
+          useState();
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          if (a) return;
+          if (b) {
+            console.log('true');
+          } else {
+            console.log('false');
+          }
+          useState();
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          if (b) {
+            console.log('true');
+          } else {
+            console.log('false');
+          }
+          if (a) return;
+          useState();
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          a && useHook1();
+          b && useHook2();
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          try {
+            f();
+            useState();
+          } catch {}
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        // 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: [],
+    },
+    {
+      code: normalizeIndent`
+        class ClassComponentWithFeatureFlag extends React.Component {
+          render() {
+            if (foo) {
+              useFeatureFlag();
+            }
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        class ClassComponentWithHook extends React.Component {
+          render() {
+            React.useState();
+          }
+        }
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        (class {useHook = () => { useState(); }});
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        (class {useHook() { useState(); }});
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        (class {h = () => { useState(); }});
+      `,
+      errors: [],
+    },
+    {
+      code: normalizeIndent`
+        (class {i() { useState(); }});
+      `,
+      errors: [],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/e2e-classic.config.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/e2e-classic.config.js
new file mode 100644
index 00000000000..9cb07c47809
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/e2e-classic.config.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const makeE2EConfig = require('../jest/makeE2EConfig');
+
+module.exports = makeE2EConfig('e2e no forget', false);
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/e2e-forget.config.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/e2e-forget.config.js
new file mode 100644
index 00000000000..133266dd696
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/e2e-forget.config.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const makeE2EConfig = require('../jest/makeE2EConfig');
+
+module.exports = makeE2EConfig('e2e with forget', true);
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/main.config.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/main.config.js
new file mode 100644
index 00000000000..75b4e8105e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/main.config.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  displayName: 'main',
+  preset: 'ts-jest',
+  rootDir: '../../src',
+  testPathIgnorePatterns: ['e2e', 'TestDriver', 'test-utils', 'fixtures'],
+  globals: {
+    __DEV__: true,
+  },
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeE2EConfig.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeE2EConfig.js
new file mode 100644
index 00000000000..66b1ba2ea13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeE2EConfig.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = function makeE2EConfig(displayName, useForget) {
+  return {
+    displayName,
+    testEnvironment: 'jsdom',
+    rootDir: '../../src',
+    testMatch: ['**/*.e2e.(js|tsx)'],
+    modulePathIgnorePatterns: [
+      // ignore snapshots from the opposite forget configuration
+      useForget ? '.*\\.no-forget\\.snap$' : '.*\\.with-forget\\.snap$',
+      // ignore snapshots from the main project
+      '.*\\.ts\\.snap$',
+    ],
+    globals: {
+      __FORGET__: useForget,
+    },
+    snapshotResolver: useForget
+      ? '<rootDir>/../scripts/jest/snapshot-resolver-with-forget.js'
+      : '<rootDir>/../scripts/jest/snapshot-resolver-no-forget.js',
+
+    transform: {
+      '\\.[tj]sx?$': useForget
+        ? '<rootDir>/../scripts/jest/transform-with-forget'
+        : '<rootDir>/../scripts/jest/transform-no-forget',
+    },
+    transformIgnorePatterns: ['/node_modules/'],
+  };
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeSnapshotResolver.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeSnapshotResolver.js
new file mode 100644
index 00000000000..48ac6f21f15
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeSnapshotResolver.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = function makeSnapshotResolver(useForget) {
+  const modeExtension = useForget ? '.with-forget' : '.no-forget';
+  return {
+    resolveSnapshotPath: (testPath, snapshotExtension) =>
+      testPath + modeExtension + snapshotExtension,
+
+    resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+      snapshotFilePath.slice(
+        0,
+        -modeExtension.length - snapshotExtension.length
+      ),
+
+    testPathForConsistencyCheck: 'some/__tests__/example.test.js',
+  };
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeTransform.ts b/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeTransform.ts
new file mode 100644
index 00000000000..5684005e33d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/makeTransform.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import babelJest from 'babel-jest';
+import {
+  validateEnvironmentConfig,
+  EnvironmentConfig,
+} from 'babel-plugin-react-compiler';
+import {execSync} from 'child_process';
+
+import type {NodePath, Visitor} from '@babel/traverse';
+import type {CallExpression} from '@babel/types';
+import BabelPluginReactCompiler from 'babel-plugin-react-compiler';
+
+/**
+ * -- IMPORTANT --
+ * When making changes to any babel plugins defined this file
+ * (e.g. `ReactForgetFunctionTransform`), make sure to bump e2eTransformerCacheKey
+ * as our script files are currently not used for babel cache breaking!!
+ */
+const e2eTransformerCacheKey = 1;
+const forgetOptions: EnvironmentConfig = validateEnvironmentConfig({
+  enableAssumeHooksFollowRulesOfReact: true,
+});
+const debugMode = process.env['DEBUG_FORGET_COMPILER'] != null;
+
+const compilerCacheKey = execSync(
+  'yarn --silent --cwd ../.. hash packages/babel-plugin-react-compiler/dist',
+)
+  .toString()
+  .trim();
+
+if (debugMode) {
+  console.log('cachebreaker', compilerCacheKey);
+}
+
+module.exports = (useForget: boolean) => {
+  function createTransformer() {
+    return babelJest.createTransformer({
+      passPerPreset: true,
+      presets: [
+        '@babel/preset-typescript',
+        {
+          plugins: [
+            useForget
+              ? [
+                  BabelPluginReactCompiler,
+                  {
+                    environment: forgetOptions,
+                    /*
+                     * Jest hashes the babel config as a cache breaker.
+                     * (see https://github.com/jestjs/jest/blob/v29.6.2/packages/babel-jest/src/index.ts#L84)
+                     */
+                    compilerCacheKey,
+                    transformOptionsCacheKey: forgetOptions,
+                    e2eTransformerCacheKey,
+                  },
+                ]
+              : '@babel/plugin-syntax-jsx',
+          ],
+        },
+        '@babel/preset-react',
+        {
+          plugins: [
+            [
+              function BabelPluginRewriteRequirePath(): {visitor: Visitor} {
+                return {
+                  visitor: {
+                    CallExpression(path: NodePath<CallExpression>): void {
+                      const {callee} = path.node;
+                      if (
+                        callee.type === 'Identifier' &&
+                        callee.name === 'require'
+                      ) {
+                        const arg = path.node.arguments[0];
+                        if (arg.type === 'StringLiteral') {
+                          /*
+                           * The compiler adds requires of "React", which is expected to be a wrapper
+                           * around the "react" package. For tests, we just rewrite the require.
+                           */
+                          if (arg.value === 'React') {
+                            arg.value = 'react';
+                          }
+                        }
+                      }
+                    },
+                  },
+                };
+              },
+            ],
+            '@babel/plugin-transform-modules-commonjs',
+          ],
+        },
+      ],
+      targets: {
+        esmodules: true,
+      },
+    } as any);
+    /*
+     * typecast needed as DefinitelyTyped does not have updated Babel configs types yet
+     * (missing passPerPreset and targets).
+     */
+  }
+
+  return {
+    createTransformer,
+  };
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/snapshot-resolver-no-forget.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/snapshot-resolver-no-forget.js
new file mode 100644
index 00000000000..66a9216a7c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/snapshot-resolver-no-forget.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const makeSnapshotResolver = require('./makeSnapshotResolver');
+
+module.exports = makeSnapshotResolver(false);
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/snapshot-resolver-with-forget.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/snapshot-resolver-with-forget.js
new file mode 100644
index 00000000000..d18d9d97526
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/snapshot-resolver-with-forget.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const makeSnapshotResolver = require('./makeSnapshotResolver');
+
+module.exports = makeSnapshotResolver(true);
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/transform-no-forget.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/transform-no-forget.js
new file mode 100644
index 00000000000..3bb00905a6b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/transform-no-forget.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = require('./makeTransform')(false);
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/jest/transform-with-forget.js b/compiler/packages/babel-plugin-react-compiler/scripts/jest/transform-with-forget.js
new file mode 100644
index 00000000000..5859e7a9c2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/jest/transform-with-forget.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = require('./makeTransform')(true);
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/link-react-compiler-runtime.sh b/compiler/packages/babel-plugin-react-compiler/scripts/link-react-compiler-runtime.sh
new file mode 100755
index 00000000000..4d1bcf1ec35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/link-react-compiler-runtime.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+yarn --silent workspace react-compiler-runtime link
+yarn --silent workspace babel-plugin-react-compiler link react-compiler-runtime
diff --git a/compiler/packages/babel-plugin-react-compiler/scripts/ts-analyze-trace.sh b/compiler/packages/babel-plugin-react-compiler/scripts/ts-analyze-trace.sh
new file mode 100755
index 00000000000..0c7a13ecd0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/scripts/ts-analyze-trace.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+#
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+#
+
+# Generates a TypeScript performance trace in a tmp folder, then runs the analyze-trace npm module
+# to identify any hotspots that might cause slow compilation
+# See https://github.com/microsoft/typescript-analyze-trace for CLI args
+
+set -eo pipefail
+
+tmp_dir=$(mktemp -d -t forget-XXXXXXXXXX)
+./node_modules/typescript/bin/tsc -p ./tsconfig.json --generateTrace $tmp_dir --incremental false && npx @typescript/analyze-trace $tmp_dir "$@"
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts b/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts
new file mode 100644
index 00000000000..ed74f466495
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {compileProgram, Logger, parsePluginOptions} from '../Entrypoint';
+import {
+  injectReanimatedFlag,
+  pipelineUsesReanimatedPlugin,
+} from '../Entrypoint/Reanimated';
+import validateNoUntransformedReferences from '../Entrypoint/ValidateNoUntransformedReferences';
+import {CompilerError} from '..';
+
+const ENABLE_REACT_COMPILER_TIMINGS =
+  process.env['ENABLE_REACT_COMPILER_TIMINGS'] === '1';
+
+/*
+ * The React Forget Babel Plugin
+ * @param {*} _babel
+ * @returns
+ */
+export default function BabelPluginReactCompiler(
+  _babel: typeof BabelCore,
+): BabelCore.PluginObj {
+  return {
+    name: 'react-forget',
+    visitor: {
+      /*
+       * Note: Babel does some "smart" merging of visitors across plugins, so even if A is inserted
+       * prior to B, if A does not have a Program visitor and B does, B will run first. We always
+       * want Forget to run true to source as possible.
+       */
+      Program: {
+        enter(prog, pass): void {
+          try {
+            const filename = pass.filename ?? 'unknown';
+            if (ENABLE_REACT_COMPILER_TIMINGS === true) {
+              performance.mark(`${filename}:start`, {
+                detail: 'BabelPlugin:Program:start',
+              });
+            }
+            let opts = parsePluginOptions(pass.opts);
+            const isDev =
+              (typeof __DEV__ !== 'undefined' && __DEV__ === true) ||
+              process.env['NODE_ENV'] === 'development';
+            if (
+              opts.enableReanimatedCheck === true &&
+              pipelineUsesReanimatedPlugin(pass.file.opts.plugins)
+            ) {
+              opts = injectReanimatedFlag(opts);
+            }
+            if (
+              opts.environment.enableResetCacheOnSourceFileChanges !== false &&
+              isDev
+            ) {
+              opts = {
+                ...opts,
+                environment: {
+                  ...opts.environment,
+                  enableResetCacheOnSourceFileChanges: true,
+                },
+              };
+            }
+            const result = compileProgram(prog, {
+              opts,
+              filename: pass.filename ?? null,
+              comments: pass.file.ast.comments ?? [],
+              code: pass.file.code,
+            });
+            validateNoUntransformedReferences(
+              prog,
+              pass.filename ?? null,
+              opts.logger,
+              opts.environment,
+              result,
+            );
+            if (ENABLE_REACT_COMPILER_TIMINGS === true) {
+              performance.mark(`${filename}:end`, {
+                detail: 'BabelPlugin:Program:end',
+              });
+            }
+          } catch (e) {
+            if (e instanceof CompilerError) {
+              throw e.withPrintedMessage(pass.file.code, {eslint: false});
+            }
+            throw e;
+          }
+        },
+        exit(_, pass): void {
+          if (ENABLE_REACT_COMPILER_TIMINGS === true) {
+            const filename = pass.filename ?? 'unknown';
+            const measurement = performance.measure(filename, {
+              start: `${filename}:start`,
+              end: `${filename}:end`,
+              detail: 'BabelPlugin:Program',
+            });
+            if ('logger' in pass.opts && pass.opts.logger != null) {
+              const logger: Logger = pass.opts.logger as Logger;
+              logger.logEvent(filename, {
+                kind: 'Timing',
+                measurement,
+              });
+            }
+          }
+        },
+      },
+    },
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Babel/RunReactCompilerBabelPlugin.ts b/compiler/packages/babel-plugin-react-compiler/src/Babel/RunReactCompilerBabelPlugin.ts
new file mode 100644
index 00000000000..d7960f7e612
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Babel/RunReactCompilerBabelPlugin.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {transformFromAstSync} from '@babel/core';
+import * as BabelParser from '@babel/parser';
+import invariant from 'invariant';
+import type {PluginOptions} from '../Entrypoint';
+import BabelPluginReactCompiler from './BabelPlugin';
+
+export const DEFAULT_PLUGINS = ['babel-plugin-fbt', 'babel-plugin-fbt-runtime'];
+export function runBabelPluginReactCompiler(
+  text: string,
+  file: string,
+  language: 'flow' | 'typescript',
+  options: PluginOptions | null,
+  includeAst: boolean = false,
+): BabelCore.BabelFileResult {
+  const ast = BabelParser.parse(text, {
+    sourceFilename: file,
+    plugins: [language, 'jsx'],
+    sourceType: 'module',
+  });
+  const result = transformFromAstSync(ast, text, {
+    ast: includeAst,
+    filename: file,
+    highlightCode: false,
+    retainLines: true,
+    plugins: [
+      [BabelPluginReactCompiler, options],
+      'babel-plugin-fbt',
+      'babel-plugin-fbt-runtime',
+    ],
+    sourceType: 'module',
+    configFile: false,
+    babelrc: false,
+  });
+  invariant(
+    result?.code != null,
+    `Expected BabelPluginReactForget to codegen successfully, got: ${result}`,
+  );
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts
new file mode 100644
index 00000000000..1c9281eb072
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts
@@ -0,0 +1,1101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {codeFrameColumns} from '@babel/code-frame';
+import {type SourceLocation} from './HIR';
+import {Err, Ok, Result} from './Utils/Result';
+import {assertExhaustive} from './Utils/utils';
+import invariant from 'invariant';
+
+// Number of context lines to display above the source of an error
+const CODEFRAME_LINES_ABOVE = 2;
+// Number of context lines to display below the source of an error
+const CODEFRAME_LINES_BELOW = 3;
+/*
+ * Max number of lines for the _source_ of an error, before we abbreviate
+ * the display of the source portion
+ */
+const CODEFRAME_MAX_LINES = 10;
+/*
+ * When the error source exceeds the above threshold, how many lines of
+ * the source should be displayed? We show:
+ * - CODEFRAME_LINES_ABOVE context lines
+ * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error
+ * - '...' ellipsis
+ * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error
+ * - CODEFRAME_LINES_BELOW context lines
+ *
+ * This value must be at least 2 or else we'll cut off important parts of the error message
+ */
+const CODEFRAME_ABBREVIATED_SOURCE_LINES = 5;
+
+export enum ErrorSeverity {
+  /**
+   * An actionable error that the developer can fix. For example, product code errors should be
+   * reported as such.
+   */
+  Error = 'Error',
+  /**
+   * An error that the developer may not necessarily be able to fix. For example, syntax not
+   * supported by the compiler does not indicate any fault in the product code.
+   */
+  Warning = 'Warning',
+  /**
+   * Not an error. These will not be surfaced in ESLint, but may be surfaced in other ways
+   * (eg Forgive) where informational hints can be shown.
+   */
+  Hint = 'Hint',
+  /**
+   * These errors will not be reported anywhere. Useful for work in progress validations.
+   */
+  Off = 'Off',
+}
+
+export type CompilerDiagnosticOptions = {
+  category: ErrorCategory;
+  reason: string;
+  description: string | null;
+  details: Array<CompilerDiagnosticDetail>;
+  suggestions?: Array<CompilerSuggestion> | null | undefined;
+};
+
+export type CompilerDiagnosticDetail =
+  /**
+   * A/the source of the error
+   */
+  | {
+      kind: 'error';
+      loc: SourceLocation | null;
+      message: string | null;
+    }
+  | {
+      kind: 'hint';
+      message: string;
+    };
+
+export enum CompilerSuggestionOperation {
+  InsertBefore,
+  InsertAfter,
+  Remove,
+  Replace,
+}
+export type CompilerSuggestion =
+  | {
+      op:
+        | CompilerSuggestionOperation.InsertAfter
+        | CompilerSuggestionOperation.InsertBefore
+        | CompilerSuggestionOperation.Replace;
+      range: [number, number];
+      description: string;
+      text: string;
+    }
+  | {
+      op: CompilerSuggestionOperation.Remove;
+      range: [number, number];
+      description: string;
+    };
+
+/**
+ * @deprecated use {@link CompilerDiagnosticOptions} instead
+ */
+export type CompilerErrorDetailOptions = {
+  category: ErrorCategory;
+  reason: string;
+  description?: string | null | undefined;
+  loc: SourceLocation | null;
+  suggestions?: Array<CompilerSuggestion> | null | undefined;
+};
+
+export type PrintErrorMessageOptions = {
+  /**
+   * ESLint uses 1-indexed columns and prints one error at a time
+   * So it doesn't require the "Found # error(s)" text
+   */
+  eslint: boolean;
+};
+
+export class CompilerDiagnostic {
+  options: CompilerDiagnosticOptions;
+
+  constructor(options: CompilerDiagnosticOptions) {
+    this.options = options;
+  }
+
+  static create(
+    options: Omit<CompilerDiagnosticOptions, 'details'>,
+  ): CompilerDiagnostic {
+    return new CompilerDiagnostic({...options, details: []});
+  }
+
+  get reason(): CompilerDiagnosticOptions['reason'] {
+    return this.options.reason;
+  }
+  get description(): CompilerDiagnosticOptions['description'] {
+    return this.options.description;
+  }
+  get severity(): ErrorSeverity {
+    return getRuleForCategory(this.category).severity;
+  }
+  get suggestions(): CompilerDiagnosticOptions['suggestions'] {
+    return this.options.suggestions;
+  }
+  get category(): ErrorCategory {
+    return this.options.category;
+  }
+
+  withDetails(...details: Array<CompilerDiagnosticDetail>): CompilerDiagnostic {
+    this.options.details.push(...details);
+    return this;
+  }
+
+  primaryLocation(): SourceLocation | null {
+    const firstErrorDetail = this.options.details.filter(
+      d => d.kind === 'error',
+    )[0];
+    return firstErrorDetail != null && firstErrorDetail.kind === 'error'
+      ? firstErrorDetail.loc
+      : null;
+  }
+
+  printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
+    const buffer = [printErrorSummary(this.category, this.reason)];
+    if (this.description != null) {
+      buffer.push('\n\n', `${this.description}.`);
+    }
+    for (const detail of this.options.details) {
+      switch (detail.kind) {
+        case 'error': {
+          const loc = detail.loc;
+          if (loc == null || typeof loc === 'symbol') {
+            continue;
+          }
+          let codeFrame: string;
+          try {
+            codeFrame = printCodeFrame(source, loc, detail.message ?? '');
+          } catch (e) {
+            codeFrame = detail.message ?? '';
+          }
+          buffer.push('\n\n');
+          if (loc.filename != null) {
+            const line = loc.start.line;
+            const column = options.eslint
+              ? loc.start.column + 1
+              : loc.start.column;
+            buffer.push(`${loc.filename}:${line}:${column}\n`);
+          }
+          buffer.push(codeFrame);
+          break;
+        }
+        case 'hint': {
+          buffer.push('\n\n');
+          buffer.push(detail.message);
+          break;
+        }
+        default: {
+          assertExhaustive(
+            detail,
+            `Unexpected detail kind ${(detail as any).kind}`,
+          );
+        }
+      }
+    }
+    return buffer.join('');
+  }
+
+  toString(): string {
+    const buffer = [printErrorSummary(this.category, this.reason)];
+    if (this.description != null) {
+      buffer.push(`. ${this.description}.`);
+    }
+    const loc = this.primaryLocation();
+    if (loc != null && typeof loc !== 'symbol') {
+      buffer.push(` (${loc.start.line}:${loc.start.column})`);
+    }
+    return buffer.join('');
+  }
+}
+
+/**
+ * Each bailout or invariant in HIR lowering creates an {@link CompilerErrorDetail}, which is then
+ * aggregated into a single {@link CompilerError} later.
+ *
+ * @deprecated use {@link CompilerDiagnostic} instead
+ */
+export class CompilerErrorDetail {
+  options: CompilerErrorDetailOptions;
+
+  constructor(options: CompilerErrorDetailOptions) {
+    this.options = options;
+  }
+
+  get reason(): CompilerErrorDetailOptions['reason'] {
+    return this.options.reason;
+  }
+  get description(): CompilerErrorDetailOptions['description'] {
+    return this.options.description;
+  }
+  get severity(): ErrorSeverity {
+    return getRuleForCategory(this.category).severity;
+  }
+  get loc(): CompilerErrorDetailOptions['loc'] {
+    return this.options.loc;
+  }
+  get suggestions(): CompilerErrorDetailOptions['suggestions'] {
+    return this.options.suggestions;
+  }
+  get category(): ErrorCategory {
+    return this.options.category;
+  }
+
+  primaryLocation(): SourceLocation | null {
+    return this.loc;
+  }
+
+  printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
+    const buffer = [printErrorSummary(this.category, this.reason)];
+    if (this.description != null) {
+      buffer.push(`\n\n${this.description}.`);
+    }
+    const loc = this.loc;
+    if (loc != null && typeof loc !== 'symbol') {
+      let codeFrame: string;
+      try {
+        codeFrame = printCodeFrame(source, loc, this.reason);
+      } catch (e) {
+        codeFrame = '';
+      }
+      buffer.push(`\n\n`);
+      if (loc.filename != null) {
+        const line = loc.start.line;
+        const column = options.eslint ? loc.start.column + 1 : loc.start.column;
+        buffer.push(`${loc.filename}:${line}:${column}\n`);
+      }
+      buffer.push(codeFrame);
+      buffer.push('\n\n');
+    }
+    return buffer.join('');
+  }
+
+  toString(): string {
+    const buffer = [printErrorSummary(this.category, this.reason)];
+    if (this.description != null) {
+      buffer.push(`. ${this.description}.`);
+    }
+    const loc = this.loc;
+    if (loc != null && typeof loc !== 'symbol') {
+      buffer.push(` (${loc.start.line}:${loc.start.column})`);
+    }
+    return buffer.join('');
+  }
+}
+
+/**
+ * An aggregate of {@link CompilerDiagnostic}. This allows us to aggregate all issues found by the
+ * compiler into a single error before we throw. Where possible, prefer to push diagnostics into
+ * the error aggregate instead of throwing immediately.
+ */
+export class CompilerError extends Error {
+  details: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
+  disabledDetails: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
+  printedMessage: string | null = null;
+
+  static invariant(
+    condition: unknown,
+    options: {
+      reason: CompilerDiagnosticOptions['reason'];
+      description?: CompilerDiagnosticOptions['description'];
+      message?: string | null;
+      loc: SourceLocation;
+    },
+  ): asserts condition {
+    if (!condition) {
+      const errors = new CompilerError();
+      errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          reason: options.reason,
+          description: options.description ?? null,
+          category: ErrorCategory.Invariant,
+        }).withDetails({
+          kind: 'error',
+          loc: options.loc,
+          message: options.message ?? options.reason,
+        }),
+      );
+      throw errors;
+    }
+  }
+
+  static throwDiagnostic(options: CompilerDiagnosticOptions): never {
+    const errors = new CompilerError();
+    errors.pushDiagnostic(new CompilerDiagnostic(options));
+    throw errors;
+  }
+
+  static throwTodo(
+    options: Omit<CompilerErrorDetailOptions, 'category'>,
+  ): never {
+    const errors = new CompilerError();
+    errors.pushErrorDetail(
+      new CompilerErrorDetail({
+        ...options,
+        category: ErrorCategory.Todo,
+      }),
+    );
+    throw errors;
+  }
+
+  static throwInvalidJS(
+    options: Omit<CompilerErrorDetailOptions, 'category'>,
+  ): never {
+    const errors = new CompilerError();
+    errors.pushErrorDetail(
+      new CompilerErrorDetail({
+        ...options,
+        category: ErrorCategory.Syntax,
+      }),
+    );
+    throw errors;
+  }
+
+  static throwInvalidReact(options: CompilerErrorDetailOptions): never {
+    const errors = new CompilerError();
+    errors.pushErrorDetail(new CompilerErrorDetail(options));
+    throw errors;
+  }
+
+  static throwInvalidConfig(
+    options: Omit<CompilerErrorDetailOptions, 'category'>,
+  ): never {
+    const errors = new CompilerError();
+    errors.pushErrorDetail(
+      new CompilerErrorDetail({
+        ...options,
+        category: ErrorCategory.Config,
+      }),
+    );
+    throw errors;
+  }
+
+  static throw(options: CompilerErrorDetailOptions): never {
+    const errors = new CompilerError();
+    errors.pushErrorDetail(new CompilerErrorDetail(options));
+    throw errors;
+  }
+
+  constructor(...args: Array<any>) {
+    super(...args);
+    this.name = 'ReactCompilerError';
+    this.details = [];
+    this.disabledDetails = [];
+  }
+
+  override get message(): string {
+    return this.printedMessage ?? this.toString();
+  }
+
+  override set message(_message: string) {}
+
+  override toString(): string {
+    if (this.printedMessage) {
+      return this.printedMessage;
+    }
+    if (Array.isArray(this.details)) {
+      return this.details.map(detail => detail.toString()).join('\n\n');
+    }
+    return this.name;
+  }
+
+  withPrintedMessage(
+    source: string,
+    options: PrintErrorMessageOptions,
+  ): CompilerError {
+    this.printedMessage = this.printErrorMessage(source, options);
+    return this;
+  }
+
+  printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
+    if (options.eslint && this.details.length === 1) {
+      return this.details[0].printErrorMessage(source, options);
+    }
+    return (
+      `Found ${this.details.length} error${this.details.length === 1 ? '' : 's'}:\n\n` +
+      this.details
+        .map(detail => detail.printErrorMessage(source, options).trim())
+        .join('\n\n')
+    );
+  }
+
+  merge(other: CompilerError): void {
+    this.details.push(...other.details);
+    this.disabledDetails.push(...other.disabledDetails);
+  }
+
+  pushDiagnostic(diagnostic: CompilerDiagnostic): void {
+    if (diagnostic.severity === ErrorSeverity.Off) {
+      this.disabledDetails.push(diagnostic);
+    } else {
+      this.details.push(diagnostic);
+    }
+  }
+
+  /**
+   * @deprecated use {@link pushDiagnostic} instead
+   */
+  push(options: CompilerErrorDetailOptions): CompilerErrorDetail {
+    const detail = new CompilerErrorDetail({
+      category: options.category,
+      reason: options.reason,
+      description: options.description ?? null,
+      suggestions: options.suggestions,
+      loc: typeof options.loc === 'symbol' ? null : options.loc,
+    });
+    return this.pushErrorDetail(detail);
+  }
+
+  /**
+   * @deprecated use {@link pushDiagnostic} instead
+   */
+  pushErrorDetail(detail: CompilerErrorDetail): CompilerErrorDetail {
+    if (detail.severity === ErrorSeverity.Off) {
+      this.disabledDetails.push(detail);
+    } else {
+      this.details.push(detail);
+    }
+    return detail;
+  }
+
+  hasAnyErrors(): boolean {
+    return this.details.length > 0;
+  }
+
+  asResult(): Result<void, CompilerError> {
+    return this.hasAnyErrors() ? Err(this) : Ok(undefined);
+  }
+
+  /**
+   * Returns true if any of the error details are of severity Error.
+   */
+  hasErrors(): boolean {
+    for (const detail of this.details) {
+      if (detail.severity === ErrorSeverity.Error) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Returns true if there are no Errors and there is at least one Warning.
+   */
+  hasWarning(): boolean {
+    let res = false;
+    for (const detail of this.details) {
+      if (detail.severity === ErrorSeverity.Error) {
+        return false;
+      }
+      if (detail.severity === ErrorSeverity.Warning) {
+        res = true;
+      }
+    }
+    return res;
+  }
+
+  hasHints(): boolean {
+    let res = false;
+    for (const detail of this.details) {
+      if (detail.severity === ErrorSeverity.Error) {
+        return false;
+      }
+      if (detail.severity === ErrorSeverity.Warning) {
+        return false;
+      }
+      if (detail.severity === ErrorSeverity.Hint) {
+        res = true;
+      }
+    }
+    return res;
+  }
+}
+
+function printCodeFrame(
+  source: string,
+  loc: t.SourceLocation,
+  message: string,
+): string {
+  const printed = codeFrameColumns(
+    source,
+    {
+      start: {
+        line: loc.start.line,
+        column: loc.start.column + 1,
+      },
+      end: {
+        line: loc.end.line,
+        column: loc.end.column + 1,
+      },
+    },
+    {
+      message,
+      linesAbove: CODEFRAME_LINES_ABOVE,
+      linesBelow: CODEFRAME_LINES_BELOW,
+    },
+  );
+  const lines = printed.split(/\r?\n/);
+  if (loc.end.line - loc.start.line < CODEFRAME_MAX_LINES) {
+    return printed;
+  }
+  const pipeIndex = lines[0].indexOf('|');
+  return [
+    ...lines.slice(
+      0,
+      CODEFRAME_LINES_ABOVE + CODEFRAME_ABBREVIATED_SOURCE_LINES,
+    ),
+    ' '.repeat(pipeIndex) + '…',
+    ...lines.slice(
+      -(CODEFRAME_LINES_BELOW + CODEFRAME_ABBREVIATED_SOURCE_LINES),
+    ),
+  ].join('\n');
+}
+
+function printErrorSummary(category: ErrorCategory, message: string): string {
+  let heading: string;
+  switch (category) {
+    case ErrorCategory.AutomaticEffectDependencies:
+    case ErrorCategory.CapitalizedCalls:
+    case ErrorCategory.Config:
+    case ErrorCategory.EffectDerivationsOfState:
+    case ErrorCategory.EffectSetState:
+    case ErrorCategory.ErrorBoundaries:
+    case ErrorCategory.Factories:
+    case ErrorCategory.FBT:
+    case ErrorCategory.Fire:
+    case ErrorCategory.Gating:
+    case ErrorCategory.Globals:
+    case ErrorCategory.Hooks:
+    case ErrorCategory.Immutability:
+    case ErrorCategory.Purity:
+    case ErrorCategory.Refs:
+    case ErrorCategory.RenderSetState:
+    case ErrorCategory.StaticComponents:
+    case ErrorCategory.Suppression:
+    case ErrorCategory.Syntax:
+    case ErrorCategory.UseMemo:
+    case ErrorCategory.VoidUseMemo:
+    case ErrorCategory.MemoDependencies:
+    case ErrorCategory.EffectExhaustiveDependencies: {
+      heading = 'Error';
+      break;
+    }
+    case ErrorCategory.EffectDependencies:
+    case ErrorCategory.IncompatibleLibrary:
+    case ErrorCategory.PreserveManualMemo:
+    case ErrorCategory.UnsupportedSyntax: {
+      heading = 'Compilation Skipped';
+      break;
+    }
+    case ErrorCategory.Invariant: {
+      heading = 'Invariant';
+      break;
+    }
+    case ErrorCategory.Todo: {
+      heading = 'Todo';
+      break;
+    }
+    default: {
+      assertExhaustive(category, `Unhandled category '${category}'`);
+    }
+  }
+  return `${heading}: ${message}`;
+}
+
+/**
+ * See getRuleForCategory() for how these map to ESLint rules
+ */
+export enum ErrorCategory {
+  /**
+   * Checking for valid hooks usage (non conditional, non-first class, non reactive, etc)
+   */
+  Hooks = 'Hooks',
+  /**
+   * Checking for no capitalized calls (not definitively an error, hence separating)
+   */
+  CapitalizedCalls = 'CapitalizedCalls',
+  /**
+   * Checking for static components
+   */
+  StaticComponents = 'StaticComponents',
+  /**
+   * Checking for valid usage of manual memoization
+   */
+  UseMemo = 'UseMemo',
+  /**
+   * Checking that useMemos always return a value
+   */
+  VoidUseMemo = 'VoidUseMemo',
+  /**
+   * Checking for higher order functions acting as factories for components/hooks
+   */
+  Factories = 'Factories',
+  /**
+   * Checks that manual memoization is preserved
+   */
+  PreserveManualMemo = 'PreserveManualMemo',
+  /**
+   * Checks for exhaustive useMemo/useCallback dependencies without extraneous values
+   */
+  MemoDependencies = 'MemoDependencies',
+  /**
+   * Checks for known incompatible libraries
+   */
+  IncompatibleLibrary = 'IncompatibleLibrary',
+  /**
+   * Checking for no mutations of props, hook arguments, hook return values
+   */
+  Immutability = 'Immutability',
+  /**
+   * Checking for assignments to globals
+   */
+  Globals = 'Globals',
+  /**
+   * Checking for valid usage of refs, ie no access during render
+   */
+  Refs = 'Refs',
+  /**
+   * Checks for memoized effect deps
+   */
+  EffectDependencies = 'EffectDependencies',
+  /**
+   * Checks for exhaustive and extraneous effect dependencies
+   */
+  EffectExhaustiveDependencies = 'EffectExhaustiveDependencies',
+  /**
+   * Checks for no setState in effect bodies
+   */
+  EffectSetState = 'EffectSetState',
+  EffectDerivationsOfState = 'EffectDerivationsOfState',
+  /**
+   * Validates against try/catch in place of error boundaries
+   */
+  ErrorBoundaries = 'ErrorBoundaries',
+  /**
+   * Checking for pure functions
+   */
+  Purity = 'Purity',
+  /**
+   * Validates against setState in render
+   */
+  RenderSetState = 'RenderSetState',
+  /**
+   * Internal invariants
+   */
+  Invariant = 'Invariant',
+  /**
+   * Todos
+   */
+  Todo = 'Todo',
+  /**
+   * Syntax errors
+   */
+  Syntax = 'Syntax',
+  /**
+   * Checks for use of unsupported syntax
+   */
+  UnsupportedSyntax = 'UnsupportedSyntax',
+  /**
+   * Config errors
+   */
+  Config = 'Config',
+  /**
+   * Gating error
+   */
+  Gating = 'Gating',
+  /**
+   * Suppressions
+   */
+  Suppression = 'Suppression',
+  /**
+   * Issues with auto deps
+   */
+  AutomaticEffectDependencies = 'AutomaticEffectDependencies',
+  /**
+   * Issues with `fire`
+   */
+  Fire = 'Fire',
+  /**
+   * fbt-specific issues
+   */
+  FBT = 'FBT',
+}
+
+export enum LintRulePreset {
+  /**
+   * Rules that are stable and included in the `recommended` preset.
+   */
+  Recommended = 'recommended',
+  /**
+   * Rules that are more experimental and only included in the `recommended-latest` preset.
+   */
+  RecommendedLatest = 'recommended-latest',
+  /**
+   * Rules that are disabled.
+   */
+  Off = 'off',
+}
+
+export type LintRule = {
+  // Stores the category the rule corresponds to, used to filter errors when reporting
+  category: ErrorCategory;
+
+  // Stores the severity of the error, which is used to map to lint levels such as error/warning.
+  severity: ErrorSeverity;
+
+  /**
+   * The "name" of the rule as it will be used by developers to enable/disable, eg
+   * "eslint-disable-nest line <name>"
+   */
+  name: string;
+
+  /**
+   * A description of the rule that appears somewhere in ESLint. This does not affect
+   * how error messages are formatted
+   */
+  description: string;
+
+  /**
+   * Configures the preset in which the rule is enabled. If 'off', the rule will not be included in
+   * any preset.
+   *
+   * NOTE: not all validations are enabled by default! Setting this flag only affects
+   * whether a given rule is part of the recommended set. The corresponding validation
+   * also should be enabled by default if you want the error to actually show up!
+   */
+  preset: LintRulePreset;
+};
+
+const RULE_NAME_PATTERN = /^[a-z]+(-[a-z]+)*$/;
+
+export function getRuleForCategory(category: ErrorCategory): LintRule {
+  const rule = getRuleForCategoryImpl(category);
+  invariant(
+    RULE_NAME_PATTERN.test(rule.name),
+    `Invalid rule name, got '${rule.name}' but rules must match ${RULE_NAME_PATTERN.toString()}`,
+  );
+  return rule;
+}
+
+function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
+  switch (category) {
+    case ErrorCategory.AutomaticEffectDependencies: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'automatic-effect-dependencies',
+        description:
+          'Verifies that automatic effect dependencies are compiled if opted-in',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.CapitalizedCalls: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'capitalized-calls',
+        description:
+          'Validates against calling capitalized functions/methods instead of using JSX',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.Config: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'config',
+        description: 'Validates the compiler configuration options',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.EffectDependencies: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'memoized-effect-dependencies',
+        description: 'Validates that effect dependencies are memoized',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.EffectExhaustiveDependencies: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'exhaustive-effect-dependencies',
+        description:
+          'Validates that effect dependencies are exhaustive and without extraneous values',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.EffectDerivationsOfState: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'no-deriving-state-in-effects',
+        description:
+          'Validates against deriving values from state in an effect',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.EffectSetState: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'set-state-in-effect',
+        description:
+          'Validates against calling setState synchronously in an effect. ' +
+          'This can indicate non-local derived data, a derived event pattern, or ' +
+          'improper external data synchronization.',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.ErrorBoundaries: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'error-boundaries',
+        description:
+          'Validates usage of error boundaries instead of try/catch for errors in child components',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Factories: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'component-hook-factories',
+        description:
+          'Validates against higher order functions defining nested components or hooks. ' +
+          'Components and hooks should be defined at the module level',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.FBT: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'fbt',
+        description: 'Validates usage of fbt',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.Fire: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'fire',
+        description: 'Validates usage of `fire`',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.Gating: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'gating',
+        description:
+          'Validates configuration of [gating mode](https://react.dev/reference/react-compiler/gating)',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Globals: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'globals',
+        description:
+          'Validates against assignment/mutation of globals during render, part of ensuring that ' +
+          '[side effects must render outside of render](https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Hooks: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'hooks',
+        description: 'Validates the rules of hooks',
+        /**
+         * TODO: the "Hooks" rule largely reimplements the "rules-of-hooks" non-compiler rule.
+         * We need to dedeupe these (moving the remaining bits into the compiler) and then enable
+         * this rule.
+         */
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.Immutability: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'immutability',
+        description:
+          'Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Invariant: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'invariant',
+        description: 'Internal invariants',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.PreserveManualMemo: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'preserve-manual-memoization',
+        description:
+          'Validates that existing manual memoized is preserved by the compiler. ' +
+          'React Compiler will only compile components and hooks if its inference ' +
+          '[matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Purity: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'purity',
+        description:
+          'Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Refs: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'refs',
+        description:
+          'Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.RenderSetState: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'set-state-in-render',
+        description:
+          'Validates against setting state during render, which can trigger additional renders and potential infinite render loops',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.StaticComponents: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'static-components',
+        description:
+          'Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.Suppression: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'rule-suppression',
+        description: 'Validates against suppression of other rules',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.Syntax: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'syntax',
+        description: 'Validates against invalid syntax',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.Todo: {
+      return {
+        category,
+        severity: ErrorSeverity.Hint,
+        name: 'todo',
+        description: 'Unimplemented features',
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.UnsupportedSyntax: {
+      return {
+        category,
+        severity: ErrorSeverity.Warning,
+        name: 'unsupported-syntax',
+        description:
+          'Validates against syntax that we do not plan to support in React Compiler',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.UseMemo: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'use-memo',
+        description:
+          'Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    case ErrorCategory.VoidUseMemo: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'void-use-memo',
+        description:
+          'Validates that useMemos always return a value and that the result of the useMemo is used by the component/hook. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
+        preset: LintRulePreset.RecommendedLatest,
+      };
+    }
+    case ErrorCategory.MemoDependencies: {
+      return {
+        category,
+        severity: ErrorSeverity.Error,
+        name: 'memo-dependencies',
+        description:
+          'Validates that useMemo() and useCallback() specify comprehensive dependencies without extraneous values. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
+        /**
+         * TODO: the "MemoDependencies" rule largely reimplements the "exhaustive-deps" non-compiler rule,
+         * allowing the compiler to ensure it does not regress change behavior due to different dependencies.
+         * We previously relied on the source having ESLint suppressions for any exhaustive-deps violations,
+         * but it's more reliable to verify it within the compiler.
+         *
+         * Long-term we should de-duplicate these implementations.
+         */
+        preset: LintRulePreset.Off,
+      };
+    }
+    case ErrorCategory.IncompatibleLibrary: {
+      return {
+        category,
+        severity: ErrorSeverity.Warning,
+        name: 'incompatible-library',
+        description:
+          'Validates against usage of libraries which are incompatible with memoization (manual or automatic)',
+        preset: LintRulePreset.Recommended,
+      };
+    }
+    default: {
+      assertExhaustive(category, `Unsupported category ${category}`);
+    }
+  }
+}
+
+export const LintRules: Array<LintRule> = Object.keys(ErrorCategory).map(
+  category => getRuleForCategory(category as any),
+);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Gating.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Gating.ts
new file mode 100644
index 00000000000..4a641b00db5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Gating.ts
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/core';
+import * as t from '@babel/types';
+import {CompilerError} from '../CompilerError';
+import {GeneratedSource} from '../HIR';
+import {ProgramContext} from './Imports';
+import {ExternalFunction} from '..';
+
+/**
+ * Gating rewrite for function declarations which are referenced before their
+ * declaration site.
+ *
+ * ```js
+ * // original
+ * export default React.memo(Foo);
+ * function Foo() { ... }
+ *
+ * // React compiler optimized + gated
+ * import {gating} from 'myGating';
+ * export default React.memo(Foo);
+ * const gating_result = gating();  <- inserted
+ * function Foo_optimized() {}      <- inserted
+ * function Foo_unoptimized() {}    <- renamed from Foo
+ * function Foo() {                 <- inserted function, which can be hoisted by JS engines
+ *   if (gating_result) return Foo_optimized();
+ *   else return Foo_unoptimized();
+ * }
+ * ```
+ */
+function insertAdditionalFunctionDeclaration(
+  fnPath: NodePath<t.FunctionDeclaration>,
+  compiled: t.FunctionDeclaration,
+  programContext: ProgramContext,
+  gatingFunctionIdentifierName: string,
+): void {
+  const originalFnName = fnPath.node.id;
+  const originalFnParams = fnPath.node.params;
+  const compiledParams = fnPath.node.params;
+  /**
+   * Note that other than `export default function() {}`, all other function
+   * declarations must have a binding identifier. Since default exports cannot
+   * be referenced, it's safe to assume that all function declarations passed
+   * here will have an identifier.
+   * https://tc39.es/ecma262/multipage/ecmascript-language-functions-and-classes.html#sec-function-definitions
+   */
+  CompilerError.invariant(originalFnName != null && compiled.id != null, {
+    reason:
+      'Expected function declarations that are referenced elsewhere to have a named identifier',
+    loc: fnPath.node.loc ?? GeneratedSource,
+  });
+  CompilerError.invariant(originalFnParams.length === compiledParams.length, {
+    reason:
+      'Expected React Compiler optimized function declarations to have the same number of parameters as source',
+    loc: fnPath.node.loc ?? GeneratedSource,
+  });
+
+  const gatingCondition = t.identifier(
+    programContext.newUid(`${gatingFunctionIdentifierName}_result`),
+  );
+  const unoptimizedFnName = t.identifier(
+    programContext.newUid(`${originalFnName.name}_unoptimized`),
+  );
+  const optimizedFnName = t.identifier(
+    programContext.newUid(`${originalFnName.name}_optimized`),
+  );
+  /**
+   * Step 1: rename existing functions
+   */
+  compiled.id.name = optimizedFnName.name;
+  fnPath.get('id').replaceInline(unoptimizedFnName);
+
+  /**
+   * Step 2: insert new function declaration
+   */
+  const newParams: Array<t.Identifier | t.RestElement> = [];
+  const genNewArgs: Array<() => t.Identifier | t.SpreadElement> = [];
+  for (let i = 0; i < originalFnParams.length; i++) {
+    const argName = `arg${i}`;
+    if (originalFnParams[i].type === 'RestElement') {
+      newParams.push(t.restElement(t.identifier(argName)));
+      genNewArgs.push(() => t.spreadElement(t.identifier(argName)));
+    } else {
+      newParams.push(t.identifier(argName));
+      genNewArgs.push(() => t.identifier(argName));
+    }
+  }
+  // insertAfter called in reverse order of how nodes should appear in program
+  fnPath.insertAfter(
+    t.functionDeclaration(
+      originalFnName,
+      newParams,
+      t.blockStatement([
+        t.ifStatement(
+          gatingCondition,
+          t.returnStatement(
+            t.callExpression(
+              compiled.id,
+              genNewArgs.map(fn => fn()),
+            ),
+          ),
+          t.returnStatement(
+            t.callExpression(
+              unoptimizedFnName,
+              genNewArgs.map(fn => fn()),
+            ),
+          ),
+        ),
+      ]),
+    ),
+  );
+  fnPath.insertBefore(
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        gatingCondition,
+        t.callExpression(t.identifier(gatingFunctionIdentifierName), []),
+      ),
+    ]),
+  );
+  fnPath.insertBefore(compiled);
+}
+export function insertGatedFunctionDeclaration(
+  fnPath: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  compiled:
+    | t.FunctionDeclaration
+    | t.ArrowFunctionExpression
+    | t.FunctionExpression,
+  programContext: ProgramContext,
+  gating: ExternalFunction,
+  referencedBeforeDeclaration: boolean,
+): void {
+  const gatingImportedName = programContext.addImportSpecifier(gating).name;
+  if (referencedBeforeDeclaration && fnPath.isFunctionDeclaration()) {
+    CompilerError.invariant(compiled.type === 'FunctionDeclaration', {
+      reason: 'Expected compiled node type to match input type',
+      description: `Got ${compiled.type} but expected FunctionDeclaration`,
+      loc: fnPath.node.loc ?? GeneratedSource,
+    });
+    insertAdditionalFunctionDeclaration(
+      fnPath,
+      compiled,
+      programContext,
+      gatingImportedName,
+    );
+  } else {
+    const gatingExpression = t.conditionalExpression(
+      t.callExpression(t.identifier(gatingImportedName), []),
+      buildFunctionExpression(compiled),
+      buildFunctionExpression(fnPath.node),
+    );
+
+    /*
+     * Convert function declarations to named variables *unless* this is an
+     * `export default function ...` since `export default const ...` is
+     * not supported. For that case we fall through to replacing w the raw
+     * conditional expression
+     */
+    if (
+      fnPath.parentPath.node.type !== 'ExportDefaultDeclaration' &&
+      fnPath.node.type === 'FunctionDeclaration' &&
+      fnPath.node.id != null
+    ) {
+      fnPath.replaceWith(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(fnPath.node.id, gatingExpression),
+        ]),
+      );
+    } else if (
+      fnPath.parentPath.node.type === 'ExportDefaultDeclaration' &&
+      fnPath.node.type !== 'ArrowFunctionExpression' &&
+      fnPath.node.id != null
+    ) {
+      fnPath.insertAfter(
+        t.exportDefaultDeclaration(t.identifier(fnPath.node.id.name)),
+      );
+      fnPath.parentPath.replaceWith(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            t.identifier(fnPath.node.id.name),
+            gatingExpression,
+          ),
+        ]),
+      );
+    } else {
+      fnPath.replaceWith(gatingExpression);
+    }
+  }
+}
+
+function buildFunctionExpression(
+  node:
+    | t.FunctionDeclaration
+    | t.ArrowFunctionExpression
+    | t.FunctionExpression,
+): t.ArrowFunctionExpression | t.FunctionExpression {
+  if (
+    node.type === 'ArrowFunctionExpression' ||
+    node.type === 'FunctionExpression'
+  ) {
+    return node;
+  } else {
+    const fn: t.FunctionExpression = {
+      type: 'FunctionExpression',
+      async: node.async,
+      generator: node.generator,
+      loc: node.loc ?? null,
+      id: node.id ?? null,
+      params: node.params,
+      body: node.body,
+    };
+    return fn;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts
new file mode 100644
index 00000000000..df78607fc19
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts
@@ -0,0 +1,336 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/core';
+import * as t from '@babel/types';
+import {Scope as BabelScope} from '@babel/traverse';
+
+import {CompilerError, ErrorCategory} from '../CompilerError';
+import {
+  EnvironmentConfig,
+  GeneratedSource,
+  NonLocalImportSpecifier,
+} from '../HIR';
+import {getOrInsertWith} from '../Utils/utils';
+import {ExternalFunction, isHookName} from '../HIR/Environment';
+import {Err, Ok, Result} from '../Utils/Result';
+import {LoggerEvent, ParsedPluginOptions} from './Options';
+import {BabelFn, getReactCompilerRuntimeModule} from './Program';
+import {SuppressionRange} from './Suppression';
+
+export function validateRestrictedImports(
+  path: NodePath<t.Program>,
+  {validateBlocklistedImports}: EnvironmentConfig,
+): CompilerError | null {
+  if (
+    validateBlocklistedImports == null ||
+    validateBlocklistedImports.length === 0
+  ) {
+    return null;
+  }
+  const error = new CompilerError();
+  const restrictedImports = new Set(validateBlocklistedImports);
+  path.traverse({
+    ImportDeclaration(importDeclPath) {
+      if (restrictedImports.has(importDeclPath.node.source.value)) {
+        error.push({
+          category: ErrorCategory.Todo,
+          reason: 'Bailing out due to blocklisted import',
+          description: `Import from module ${importDeclPath.node.source.value}`,
+          loc: importDeclPath.node.loc ?? null,
+        });
+      }
+    },
+  });
+  if (error.hasAnyErrors()) {
+    return error;
+  } else {
+    return null;
+  }
+}
+
+type ProgramContextOptions = {
+  program: NodePath<t.Program>;
+  suppressions: Array<SuppressionRange>;
+  opts: ParsedPluginOptions;
+  filename: string | null;
+  code: string | null;
+  hasModuleScopeOptOut: boolean;
+};
+export class ProgramContext {
+  /**
+   * Program and environment context
+   */
+  scope: BabelScope;
+  opts: ParsedPluginOptions;
+  filename: string | null;
+  code: string | null;
+  reactRuntimeModule: string;
+  suppressions: Array<SuppressionRange>;
+  hasModuleScopeOptOut: boolean;
+
+  /*
+   * This is a hack to work around what seems to be a Babel bug. Babel doesn't
+   * consistently respect the `skip()` function to avoid revisiting a node within
+   * a pass, so we use this set to track nodes that we have compiled.
+   */
+  alreadyCompiled: WeakSet<object> | Set<object> = new (WeakSet ?? Set)();
+  // known generated or referenced identifiers in the program
+  knownReferencedNames: Set<string> = new Set();
+  // generated imports
+  imports: Map<string, Map<string, NonLocalImportSpecifier>> = new Map();
+
+  /**
+   * Metadata from compilation
+   */
+  retryErrors: Array<{fn: BabelFn; error: CompilerError}> = [];
+  inferredEffectLocations: Set<t.SourceLocation> = new Set();
+
+  constructor({
+    program,
+    suppressions,
+    opts,
+    filename,
+    code,
+    hasModuleScopeOptOut,
+  }: ProgramContextOptions) {
+    this.scope = program.scope;
+    this.opts = opts;
+    this.filename = filename;
+    this.code = code;
+    this.reactRuntimeModule = getReactCompilerRuntimeModule(opts.target);
+    this.suppressions = suppressions;
+    this.hasModuleScopeOptOut = hasModuleScopeOptOut;
+  }
+
+  isHookName(name: string): boolean {
+    if (this.opts.environment.hookPattern == null) {
+      return isHookName(name);
+    } else {
+      const match = new RegExp(this.opts.environment.hookPattern).exec(name);
+      return (
+        match != null && typeof match[1] === 'string' && isHookName(match[1])
+      );
+    }
+  }
+
+  hasReference(name: string): boolean {
+    return (
+      this.knownReferencedNames.has(name) ||
+      this.scope.hasBinding(name) ||
+      this.scope.hasGlobal(name) ||
+      this.scope.hasReference(name)
+    );
+  }
+
+  newUid(name: string): string {
+    /**
+     * Don't call babel's generateUid for known hook imports, as
+     * InferTypes might eventually type `HookKind` based on callee naming
+     * convention and `_useFoo` is not named as a hook.
+     *
+     * Local uid generation is susceptible to check-before-use bugs since we're
+     * checking for naming conflicts / references long before we actually insert
+     * the import. (see similar logic in HIRBuilder:resolveBinding)
+     */
+    let uid;
+    if (this.isHookName(name)) {
+      uid = name;
+      let i = 0;
+      while (this.hasReference(uid)) {
+        this.knownReferencedNames.add(uid);
+        uid = `${name}_${i++}`;
+      }
+    } else if (!this.hasReference(name)) {
+      uid = name;
+    } else {
+      uid = this.scope.generateUid(name);
+    }
+    this.knownReferencedNames.add(uid);
+    return uid;
+  }
+
+  addMemoCacheImport(): NonLocalImportSpecifier {
+    return this.addImportSpecifier(
+      {
+        source: this.reactRuntimeModule,
+        importSpecifierName: 'c',
+      },
+      '_c',
+    );
+  }
+
+  /**
+   *
+   * @param externalFunction
+   * @param nameHint if defined, will be used as the name of the import specifier
+   * @returns
+   */
+  addImportSpecifier(
+    {source: module, importSpecifierName: specifier}: ExternalFunction,
+    nameHint?: string,
+  ): NonLocalImportSpecifier {
+    const maybeBinding = this.imports.get(module)?.get(specifier);
+    if (maybeBinding != null) {
+      return {...maybeBinding};
+    }
+
+    const binding: NonLocalImportSpecifier = {
+      kind: 'ImportSpecifier',
+      name: this.newUid(nameHint ?? specifier),
+      module,
+      imported: specifier,
+    };
+    getOrInsertWith(this.imports, module, () => new Map()).set(specifier, {
+      ...binding,
+    });
+    return binding;
+  }
+
+  addNewReference(name: string): void {
+    this.knownReferencedNames.add(name);
+  }
+
+  assertGlobalBinding(
+    name: string,
+    localScope?: BabelScope,
+  ): Result<void, CompilerError> {
+    const scope = localScope ?? this.scope;
+    if (!scope.hasReference(name) && !scope.hasBinding(name)) {
+      return Ok(undefined);
+    }
+    const error = new CompilerError();
+    error.push({
+      category: ErrorCategory.Todo,
+      reason: 'Encountered conflicting global in generated program',
+      description: `Conflict from local binding ${name}`,
+      loc: scope.getBinding(name)?.path.node.loc ?? null,
+      suggestions: null,
+    });
+    return Err(error);
+  }
+
+  logEvent(event: LoggerEvent): void {
+    if (this.opts.logger != null) {
+      this.opts.logger.logEvent(this.filename, event);
+    }
+  }
+}
+
+function getExistingImports(
+  program: NodePath<t.Program>,
+): Map<string, NodePath<t.ImportDeclaration>> {
+  const existingImports = new Map<string, NodePath<t.ImportDeclaration>>();
+  program.traverse({
+    ImportDeclaration(path) {
+      if (isNonNamespacedImport(path)) {
+        existingImports.set(path.node.source.value, path);
+      }
+    },
+  });
+  return existingImports;
+}
+
+export function addImportsToProgram(
+  path: NodePath<t.Program>,
+  programContext: ProgramContext,
+): void {
+  const existingImports = getExistingImports(path);
+  const stmts: Array<t.ImportDeclaration | t.VariableDeclaration> = [];
+  const sortedModules = [...programContext.imports.entries()].sort(([a], [b]) =>
+    a.localeCompare(b),
+  );
+  for (const [moduleName, importsMap] of sortedModules) {
+    for (const [specifierName, loweredImport] of importsMap) {
+      /**
+       * Assert that the import identifier hasn't already be declared in the program.
+       * Note: we use getBinding here since `Scope.hasBinding` pessimistically returns true
+       * for all allocated uids (from `Scope.getUid`)
+       */
+      CompilerError.invariant(
+        path.scope.getBinding(loweredImport.name) == null,
+        {
+          reason:
+            'Encountered conflicting import specifiers in generated program',
+          description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name})`,
+          loc: GeneratedSource,
+        },
+      );
+      CompilerError.invariant(
+        loweredImport.module === moduleName &&
+          loweredImport.imported === specifierName,
+        {
+          reason:
+            'Found inconsistent import specifier. This is an internal bug.',
+          description: `Expected import ${moduleName}:${specifierName} but found ${loweredImport.module}:${loweredImport.imported}`,
+          loc: GeneratedSource,
+        },
+      );
+    }
+    const sortedImport: Array<NonLocalImportSpecifier> = [
+      ...importsMap.values(),
+    ].sort(({imported: a}, {imported: b}) => a.localeCompare(b));
+    const importSpecifiers = sortedImport.map(specifier => {
+      return t.importSpecifier(
+        t.identifier(specifier.name),
+        t.identifier(specifier.imported),
+      );
+    });
+
+    /**
+     * If an existing import of this module exists (ie `import { ... } from
+     * '<moduleName>'`), inject new imported specifiers into the list of
+     * destructured variables.
+     */
+    const maybeExistingImports = existingImports.get(moduleName);
+    if (maybeExistingImports != null) {
+      maybeExistingImports.pushContainer('specifiers', importSpecifiers);
+    } else {
+      if (path.node.sourceType === 'module') {
+        stmts.push(
+          t.importDeclaration(importSpecifiers, t.stringLiteral(moduleName)),
+        );
+      } else {
+        stmts.push(
+          t.variableDeclaration('const', [
+            t.variableDeclarator(
+              t.objectPattern(
+                sortedImport.map(specifier => {
+                  return t.objectProperty(
+                    t.identifier(specifier.imported),
+                    t.identifier(specifier.name),
+                  );
+                }),
+              ),
+              t.callExpression(t.identifier('require'), [
+                t.stringLiteral(moduleName),
+              ]),
+            ),
+          ]),
+        );
+      }
+    }
+  }
+  path.unshiftContainer('body', stmts);
+}
+
+/*
+ * Matches `import { ... } from <moduleName>;`
+ * but not `import * as React from <moduleName>;`
+ *         `import type { Foo } from <moduleName>;`
+ */
+function isNonNamespacedImport(
+  importDeclPath: NodePath<t.ImportDeclaration>,
+): boolean {
+  return (
+    importDeclPath
+      .get('specifiers')
+      .every(specifier => specifier.isImportSpecifier()) &&
+    importDeclPath.node.importKind !== 'type' &&
+    importDeclPath.node.importKind !== 'typeof'
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
new file mode 100644
index 00000000000..b758d7b024d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
@@ -0,0 +1,430 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {z} from 'zod/v4';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  CompilerErrorDetail,
+  CompilerErrorDetailOptions,
+} from '../CompilerError';
+import {
+  EnvironmentConfig,
+  ExternalFunction,
+  parseEnvironmentConfig,
+  tryParseExternalFunction,
+} from '../HIR/Environment';
+import {hasOwnProperty} from '../Utils/utils';
+import {fromZodError} from 'zod-validation-error/v4';
+import {CompilerPipelineValue} from './Pipeline';
+
+const PanicThresholdOptionsSchema = z.enum([
+  /*
+   * Any errors will panic the compiler by throwing an exception, which will
+   * bubble up to the nearest exception handler above the Forget transform.
+   * If Forget is invoked through `BabelPluginReactCompiler`, this will at the least
+   * skip Forget compilation for the rest of current file.
+   */
+  'all_errors',
+  /*
+   * Panic by throwing an exception only on critical or unrecognized errors.
+   * For all other errors, skip the erroring function without inserting
+   * a Forget-compiled version (i.e. same behavior as noEmit).
+   */
+  'critical_errors',
+  // Never panic by throwing an exception.
+  'none',
+]);
+
+export type PanicThresholdOptions = z.infer<typeof PanicThresholdOptionsSchema>;
+const DynamicGatingOptionsSchema = z.object({
+  source: z.string(),
+});
+export type DynamicGatingOptions = z.infer<typeof DynamicGatingOptionsSchema>;
+const CustomOptOutDirectiveSchema = z
+  .nullable(z.array(z.string()))
+  .default(null);
+type CustomOptOutDirective = z.infer<typeof CustomOptOutDirectiveSchema>;
+
+export type PluginOptions = Partial<{
+  environment: Partial<EnvironmentConfig>;
+
+  logger: Logger | null;
+
+  /*
+   * Specifying a `gating` config, makes Forget compile and emit a separate
+   * version of the function gated by importing the `gating.importSpecifierName` from the
+   * specified `gating.source`.
+   *
+   * For example:
+   *   gating: {
+   *     source: 'ReactForgetFeatureFlag',
+   *     importSpecifierName: 'isForgetEnabled_Pokes',
+   *   }
+   *
+   * produces:
+   *   import {isForgetEnabled_Pokes} from 'ReactForgetFeatureFlag';
+   *
+   *   Foo_forget()   {}
+   *
+   *   Foo_uncompiled() {}
+   *
+   *   var Foo = isForgetEnabled_Pokes() ? Foo_forget : Foo_uncompiled;
+   */
+  gating: ExternalFunction | null;
+
+  /**
+   * If specified, this enables dynamic gating which matches `use memo if(...)`
+   * directives.
+   *
+   * Example usage:
+   * ```js
+   * // @dynamicGating:{"source":"myModule"}
+   * export function MyComponent() {
+   *   'use memo if(isEnabled)';
+   *    return <div>...</div>;
+   * }
+   * ```
+   * This will emit:
+   * ```js
+   * import {isEnabled} from 'myModule';
+   * export const MyComponent = isEnabled()
+   *   ? <optimized version>
+   *   : <original version>;
+   * ```
+   */
+  dynamicGating: DynamicGatingOptions | null;
+
+  panicThreshold: PanicThresholdOptions;
+
+  /**
+   * @deprecated
+   *
+   * When enabled, Forget will continue statically analyzing and linting code, but skip over codegen
+   * passes.
+   *
+   * NOTE: ignored if `outputMode` is specified
+   *
+   * Defaults to false
+   */
+  noEmit: boolean;
+
+  /**
+   * If specified, overrides `noEmit` and controls the output mode of the compiler.
+   *
+   * Defaults to null
+   */
+  outputMode: CompilerOutputMode | null;
+
+  /*
+   * Determines the strategy for determining which functions to compile. Note that regardless of
+   * which mode is enabled, a component can be opted out by adding the string literal
+   * `"use no forget"` at the top of the function body, eg.:
+   *
+   * ```
+   * function ComponentYouWantToSkipCompilation(props) {
+   *    "use no forget";
+   *    ...
+   * }
+   * ```
+   */
+  compilationMode: CompilationMode;
+
+  /**
+   * By default React Compiler will skip compilation of code that suppresses the default
+   * React ESLint rules, since this is a strong indication that the code may be breaking React rules
+   * in some way.
+   *
+   * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the
+   * provided rules will skip compilation. To disable this feature (never bailout of compilation
+   * even if the default ESLint is suppressed), pass an empty array.
+   */
+  eslintSuppressionRules: Array<string> | null | undefined;
+
+  /**
+   * Whether to report "suppression" errors for Flow suppressions. If false, suppression errors
+   * are only emitted for ESLint suppressions
+   */
+  flowSuppressions: boolean;
+
+  /*
+   * Ignore 'use no forget' annotations. Helpful during testing but should not be used in production.
+   */
+  ignoreUseNoForget: boolean;
+
+  /**
+   * Unstable / do not use
+   */
+  customOptOutDirectives: CustomOptOutDirective;
+
+  sources: Array<string> | ((filename: string) => boolean) | null;
+
+  /**
+   * The compiler has customized support for react-native-reanimated, intended as a temporary workaround.
+   * Set this flag (on by default) to automatically check for this library and activate the support.
+   */
+  enableReanimatedCheck: boolean;
+
+  /**
+   * The minimum major version of React that the compiler should emit code for. If the target is 19
+   * or higher, the compiler emits direct imports of React runtime APIs needed by the compiler. On
+   * versions prior to 19, an extra runtime package react-compiler-runtime is necessary to provide
+   * a userspace approximation of runtime APIs.
+   */
+  target: CompilerReactTarget;
+}>;
+
+export type ParsedPluginOptions = Required<
+  Omit<PluginOptions, 'environment'>
+> & {environment: EnvironmentConfig};
+
+const CompilerReactTargetSchema = z.union([
+  z.literal('17'),
+  z.literal('18'),
+  z.literal('19'),
+  /**
+   * Used exclusively for Meta apps which are guaranteed to have compatible
+   * react runtime and compiler versions. Note that only the FB-internal bundles
+   * re-export useMemoCache (see
+   * https://github.com/facebook/react/blob/5b0ef217ef32333a8e56f39be04327c89efa346f/packages/react/index.fb.js#L68-L70),
+   * so this option is invalid / creates runtime errors for open-source users.
+   */
+  z.object({
+    kind: z.literal('donotuse_meta_internal'),
+    runtimeModule: z.string().default('react'),
+  }),
+]);
+export type CompilerReactTarget = z.infer<typeof CompilerReactTargetSchema>;
+
+const CompilationModeSchema = z.enum([
+  /*
+   * Compiles functions annotated with "use forget" or component/hook-like functions.
+   * This latter includes:
+   * * Components declared with component syntax.
+   * * Functions which can be inferred to be a component or hook:
+   *   - Be named like a hook or component. This logic matches the ESLint rule.
+   *   - *and* create JSX and/or call a hook. This is an additional check to help prevent
+   *     false positives, since compilation has a greater impact than linting.
+   * This is the default mode
+   */
+  'infer',
+  // Compile only components using Flow component syntax and hooks using hook syntax.
+  'syntax',
+  // Compile only functions which are explicitly annotated with "use forget"
+  'annotation',
+  // Compile all top-level functions
+  'all',
+]);
+
+export type CompilationMode = z.infer<typeof CompilationModeSchema>;
+
+const CompilerOutputModeSchema = z.enum([
+  // Build optimized for SSR, with client features removed
+  'ssr',
+  // Build optimized for the client, with auto memoization
+  'client',
+  // Build optimized for the client without auto memo
+  'client-no-memo',
+  // Lint mode, the output is unused but validations should run
+  'lint',
+]);
+
+export type CompilerOutputMode = z.infer<typeof CompilerOutputModeSchema>;
+
+/**
+ * Represents 'events' that may occur during compilation. Events are only
+ * recorded when a logger is set (through the config).
+ * These are the different types of events:
+ * CompileError:
+ *   Forget skipped compilation of a function / file due to a known todo,
+ *   invalid input, or compiler invariant being broken.
+ * CompileSuccess:
+ *   Forget successfully compiled a function.
+ * PipelineError:
+ *   Unexpected errors that occurred during compilation (e.g. failures in
+ *   babel or other unhandled exceptions).
+ */
+export type LoggerEvent =
+  | CompileSuccessEvent
+  | CompileErrorEvent
+  | CompileDiagnosticEvent
+  | CompileSkipEvent
+  | PipelineErrorEvent
+  | TimingEvent
+  | AutoDepsDecorationsEvent
+  | AutoDepsEligibleEvent;
+
+export type CompileErrorEvent = {
+  kind: 'CompileError';
+  fnLoc: t.SourceLocation | null;
+  detail: CompilerErrorDetail | CompilerDiagnostic;
+};
+export type CompileDiagnosticEvent = {
+  kind: 'CompileDiagnostic';
+  fnLoc: t.SourceLocation | null;
+  detail: Omit<Omit<CompilerErrorDetailOptions, 'severity'>, 'suggestions'>;
+};
+export type CompileSuccessEvent = {
+  kind: 'CompileSuccess';
+  fnLoc: t.SourceLocation | null;
+  fnName: string | null;
+  memoSlots: number;
+  memoBlocks: number;
+  memoValues: number;
+  prunedMemoBlocks: number;
+  prunedMemoValues: number;
+};
+export type CompileSkipEvent = {
+  kind: 'CompileSkip';
+  fnLoc: t.SourceLocation | null;
+  reason: string;
+  loc: t.SourceLocation | null;
+};
+export type PipelineErrorEvent = {
+  kind: 'PipelineError';
+  fnLoc: t.SourceLocation | null;
+  data: string;
+};
+export type TimingEvent = {
+  kind: 'Timing';
+  measurement: PerformanceMeasure;
+};
+export type AutoDepsDecorationsEvent = {
+  kind: 'AutoDepsDecorations';
+  fnLoc: t.SourceLocation;
+  decorations: Array<t.SourceLocation>;
+};
+export type AutoDepsEligibleEvent = {
+  kind: 'AutoDepsEligible';
+  fnLoc: t.SourceLocation;
+  depArrayLoc: t.SourceLocation;
+};
+
+export type Logger = {
+  logEvent: (filename: string | null, event: LoggerEvent) => void;
+  debugLogIRs?: (value: CompilerPipelineValue) => void;
+};
+
+export const defaultOptions: ParsedPluginOptions = {
+  compilationMode: 'infer',
+  panicThreshold: 'none',
+  environment: parseEnvironmentConfig({}).unwrap(),
+  logger: null,
+  gating: null,
+  noEmit: false,
+  outputMode: null,
+  dynamicGating: null,
+  eslintSuppressionRules: null,
+  flowSuppressions: true,
+  ignoreUseNoForget: false,
+  sources: filename => {
+    return filename.indexOf('node_modules') === -1;
+  },
+  enableReanimatedCheck: true,
+  customOptOutDirectives: null,
+  target: '19',
+};
+
+export function parsePluginOptions(obj: unknown): ParsedPluginOptions {
+  if (obj == null || typeof obj !== 'object') {
+    return defaultOptions;
+  }
+  const parsedOptions = Object.create(null);
+  for (let [key, value] of Object.entries(obj)) {
+    if (typeof value === 'string') {
+      // normalize string configs to be case insensitive
+      value = value.toLowerCase();
+    }
+    if (isCompilerFlag(key)) {
+      switch (key) {
+        case 'environment': {
+          const environmentResult = parseEnvironmentConfig(value);
+          if (environmentResult.isErr()) {
+            CompilerError.throwInvalidConfig({
+              reason:
+                'Error in validating environment config. This is an advanced setting and not meant to be used directly',
+              description: environmentResult.unwrapErr().toString(),
+              suggestions: null,
+              loc: null,
+            });
+          }
+          parsedOptions[key] = environmentResult.unwrap();
+          break;
+        }
+        case 'target': {
+          parsedOptions[key] = parseTargetConfig(value);
+          break;
+        }
+        case 'gating': {
+          if (value == null) {
+            parsedOptions[key] = null;
+          } else {
+            parsedOptions[key] = tryParseExternalFunction(value);
+          }
+          break;
+        }
+        case 'dynamicGating': {
+          if (value == null) {
+            parsedOptions[key] = null;
+          } else {
+            const result = DynamicGatingOptionsSchema.safeParse(value);
+            if (result.success) {
+              parsedOptions[key] = result.data;
+            } else {
+              CompilerError.throwInvalidConfig({
+                reason:
+                  'Could not parse dynamic gating. Update React Compiler config to fix the error',
+                description: `${fromZodError(result.error)}`,
+                loc: null,
+                suggestions: null,
+              });
+            }
+          }
+          break;
+        }
+        case 'customOptOutDirectives': {
+          const result = CustomOptOutDirectiveSchema.safeParse(value);
+          if (result.success) {
+            parsedOptions[key] = result.data;
+          } else {
+            CompilerError.throwInvalidConfig({
+              reason:
+                'Could not parse custom opt out directives. Update React Compiler config to fix the error',
+              description: `${fromZodError(result.error)}`,
+              loc: null,
+              suggestions: null,
+            });
+          }
+          break;
+        }
+        default: {
+          parsedOptions[key] = value;
+        }
+      }
+    }
+  }
+  return {...defaultOptions, ...parsedOptions};
+}
+
+export function parseTargetConfig(value: unknown): CompilerReactTarget {
+  const parsed = CompilerReactTargetSchema.safeParse(value);
+  if (parsed.success) {
+    return parsed.data;
+  } else {
+    CompilerError.throwInvalidConfig({
+      reason: 'Not a valid target',
+      description: `${fromZodError(parsed.error)}`,
+      suggestions: null,
+      loc: null,
+    });
+  }
+}
+
+function isCompilerFlag(s: string): s is keyof PluginOptions {
+  return hasOwnProperty(defaultOptions, s);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
new file mode 100644
index 00000000000..30d66522715
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
@@ -0,0 +1,622 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import prettyFormat from 'pretty-format';
+import {CompilerOutputMode, Logger, ProgramContext} from '.';
+import {
+  HIRFunction,
+  ReactiveFunction,
+  assertConsistentIdentifiers,
+  assertTerminalPredsExist,
+  assertTerminalSuccessorsExist,
+  assertValidBlockNesting,
+  assertValidMutableRanges,
+  buildReactiveScopeTerminalsHIR,
+  lower,
+  mergeConsecutiveBlocks,
+  mergeOverlappingReactiveScopesHIR,
+  pruneUnusedLabelsHIR,
+} from '../HIR';
+import {
+  Environment,
+  EnvironmentConfig,
+  ReactFunctionType,
+} from '../HIR/Environment';
+import {findContextIdentifiers} from '../HIR/FindContextIdentifiers';
+import {
+  analyseFunctions,
+  dropManualMemoization,
+  inferReactivePlaces,
+  inlineImmediatelyInvokedFunctionExpressions,
+  inferEffectDependencies,
+} from '../Inference';
+import {
+  constantPropagation,
+  deadCodeElimination,
+  pruneMaybeThrows,
+  inlineJsxTransform,
+} from '../Optimization';
+import {instructionReordering} from '../Optimization/InstructionReordering';
+import {
+  CodegenFunction,
+  alignObjectMethodScopes,
+  assertScopeInstructionsWithinScopes,
+  assertWellFormedBreakTargets,
+  buildReactiveFunction,
+  codegenFunction,
+  extractScopeDeclarationsFromDestructuring,
+  inferReactiveScopeVariables,
+  memoizeFbtAndMacroOperandsInSameScope,
+  mergeReactiveScopesThatInvalidateTogether,
+  promoteUsedTemporaries,
+  propagateEarlyReturns,
+  pruneHoistedContexts,
+  pruneNonEscapingScopes,
+  pruneNonReactiveDependencies,
+  pruneUnusedLValues,
+  pruneUnusedLabels,
+  pruneUnusedScopes,
+  renameVariables,
+} from '../ReactiveScopes';
+import {alignMethodCallScopes} from '../ReactiveScopes/AlignMethodCallScopes';
+import {alignReactiveScopesToBlockScopesHIR} from '../ReactiveScopes/AlignReactiveScopesToBlockScopesHIR';
+import {flattenReactiveLoopsHIR} from '../ReactiveScopes/FlattenReactiveLoopsHIR';
+import {flattenScopesWithHooksOrUseHIR} from '../ReactiveScopes/FlattenScopesWithHooksOrUseHIR';
+import {pruneAlwaysInvalidatingScopes} from '../ReactiveScopes/PruneAlwaysInvalidatingScopes';
+import pruneInitializationDependencies from '../ReactiveScopes/PruneInitializationDependencies';
+import {stabilizeBlockIds} from '../ReactiveScopes/StabilizeBlockIds';
+import {
+  eliminateRedundantPhi,
+  enterSSA,
+  rewriteInstructionKindsBasedOnReassignment,
+} from '../SSA';
+import {inferTypes} from '../TypeInference';
+import {
+  validateContextVariableLValues,
+  validateHooksUsage,
+  validateMemoizedEffectDependencies,
+  validateNoCapitalizedCalls,
+  validateNoRefAccessInRender,
+  validateNoSetStateInRender,
+  validatePreservedManualMemoization,
+  validateUseMemo,
+} from '../Validation';
+import {validateLocalsNotReassignedAfterRender} from '../Validation/ValidateLocalsNotReassignedAfterRender';
+import {outlineFunctions} from '../Optimization/OutlineFunctions';
+import {lowerContextAccess} from '../Optimization/LowerContextAccess';
+import {validateNoSetStateInEffects} from '../Validation/ValidateNoSetStateInEffects';
+import {validateNoJSXInTryStatement} from '../Validation/ValidateNoJSXInTryStatement';
+import {propagateScopeDependenciesHIR} from '../HIR/PropagateScopeDependenciesHIR';
+import {outlineJSX} from '../Optimization/OutlineJsx';
+import {optimizePropsMethodCalls} from '../Optimization/OptimizePropsMethodCalls';
+import {transformFire} from '../Transform';
+import {validateNoImpureFunctionsInRender} from '../Validation/ValidateNoImpureFunctionsInRender';
+import {validateStaticComponents} from '../Validation/ValidateStaticComponents';
+import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoFreezingKnownMutableFunctions';
+import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
+import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRanges';
+import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects';
+import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp';
+import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
+import {optimizeForSSR} from '../Optimization/OptimizeForSSR';
+import {validateExhaustiveDependencies} from '../Validation/ValidateExhaustiveDependencies';
+import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
+
+export type CompilerPipelineValue =
+  | {kind: 'ast'; name: string; value: CodegenFunction}
+  | {kind: 'hir'; name: string; value: HIRFunction}
+  | {kind: 'reactive'; name: string; value: ReactiveFunction}
+  | {kind: 'debug'; name: string; value: string};
+
+function run(
+  func: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  config: EnvironmentConfig,
+  fnType: ReactFunctionType,
+  mode: CompilerOutputMode,
+  programContext: ProgramContext,
+  logger: Logger | null,
+  filename: string | null,
+  code: string | null,
+): CodegenFunction {
+  const contextIdentifiers = findContextIdentifiers(func);
+  const env = new Environment(
+    func.scope,
+    fnType,
+    mode,
+    config,
+    contextIdentifiers,
+    func,
+    logger,
+    filename,
+    code,
+    programContext,
+  );
+  env.logger?.debugLogIRs?.({
+    kind: 'debug',
+    name: 'EnvironmentConfig',
+    value: prettyFormat(env.config),
+  });
+  return runWithEnvironment(func, env);
+}
+
+/*
+ * Note: this is split from run() to make `config` out of scope, so that all
+ * access to feature flags has to be through the Environment for consistency.
+ */
+function runWithEnvironment(
+  func: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  env: Environment,
+): CodegenFunction {
+  const log = (value: CompilerPipelineValue): void => {
+    env.logger?.debugLogIRs?.(value);
+  };
+  const hir = lower(func, env).unwrap();
+  log({kind: 'hir', name: 'HIR', value: hir});
+
+  pruneMaybeThrows(hir);
+  log({kind: 'hir', name: 'PruneMaybeThrows', value: hir});
+
+  validateContextVariableLValues(hir);
+  validateUseMemo(hir).unwrap();
+
+  if (
+    env.enableDropManualMemoization &&
+    !env.config.enablePreserveExistingManualUseMemo &&
+    !env.config.disableMemoizationForDebugging &&
+    !env.config.enableChangeDetectionForDebugging
+  ) {
+    dropManualMemoization(hir).unwrap();
+    log({kind: 'hir', name: 'DropManualMemoization', value: hir});
+  }
+
+  inlineImmediatelyInvokedFunctionExpressions(hir);
+  log({
+    kind: 'hir',
+    name: 'InlineImmediatelyInvokedFunctionExpressions',
+    value: hir,
+  });
+
+  mergeConsecutiveBlocks(hir);
+  log({kind: 'hir', name: 'MergeConsecutiveBlocks', value: hir});
+
+  assertConsistentIdentifiers(hir);
+  assertTerminalSuccessorsExist(hir);
+
+  enterSSA(hir);
+  log({kind: 'hir', name: 'SSA', value: hir});
+
+  eliminateRedundantPhi(hir);
+  log({kind: 'hir', name: 'EliminateRedundantPhi', value: hir});
+
+  assertConsistentIdentifiers(hir);
+
+  constantPropagation(hir);
+  log({kind: 'hir', name: 'ConstantPropagation', value: hir});
+
+  inferTypes(hir);
+  log({kind: 'hir', name: 'InferTypes', value: hir});
+
+  if (env.enableValidations) {
+    if (env.config.validateHooksUsage) {
+      validateHooksUsage(hir).unwrap();
+    }
+    if (env.config.validateNoCapitalizedCalls) {
+      validateNoCapitalizedCalls(hir).unwrap();
+    }
+  }
+
+  if (env.config.enableFire) {
+    transformFire(hir);
+    log({kind: 'hir', name: 'TransformFire', value: hir});
+  }
+
+  if (env.config.lowerContextAccess) {
+    lowerContextAccess(hir, env.config.lowerContextAccess);
+  }
+
+  optimizePropsMethodCalls(hir);
+  log({kind: 'hir', name: 'OptimizePropsMethodCalls', value: hir});
+
+  analyseFunctions(hir);
+  log({kind: 'hir', name: 'AnalyseFunctions', value: hir});
+
+  const mutabilityAliasingErrors = inferMutationAliasingEffects(hir);
+  log({kind: 'hir', name: 'InferMutationAliasingEffects', value: hir});
+  if (env.enableValidations) {
+    if (mutabilityAliasingErrors.isErr()) {
+      throw mutabilityAliasingErrors.unwrapErr();
+    }
+  }
+
+  if (env.outputMode === 'ssr') {
+    optimizeForSSR(hir);
+    log({kind: 'hir', name: 'OptimizeForSSR', value: hir});
+  }
+
+  // Note: Has to come after infer reference effects because "dead" code may still affect inference
+  deadCodeElimination(hir);
+  log({kind: 'hir', name: 'DeadCodeElimination', value: hir});
+
+  if (env.config.enableInstructionReordering) {
+    instructionReordering(hir);
+    log({kind: 'hir', name: 'InstructionReordering', value: hir});
+  }
+
+  pruneMaybeThrows(hir);
+  log({kind: 'hir', name: 'PruneMaybeThrows', value: hir});
+
+  const mutabilityAliasingRangeErrors = inferMutationAliasingRanges(hir, {
+    isFunctionExpression: false,
+  });
+  log({kind: 'hir', name: 'InferMutationAliasingRanges', value: hir});
+  if (env.enableValidations) {
+    if (mutabilityAliasingRangeErrors.isErr()) {
+      throw mutabilityAliasingRangeErrors.unwrapErr();
+    }
+    validateLocalsNotReassignedAfterRender(hir);
+  }
+
+  if (env.enableValidations) {
+    if (env.config.assertValidMutableRanges) {
+      assertValidMutableRanges(hir);
+    }
+
+    if (env.config.validateRefAccessDuringRender) {
+      validateNoRefAccessInRender(hir).unwrap();
+    }
+
+    if (env.config.validateNoSetStateInRender) {
+      validateNoSetStateInRender(hir).unwrap();
+    }
+
+    if (
+      env.config.validateNoDerivedComputationsInEffects_exp &&
+      env.outputMode === 'lint'
+    ) {
+      env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
+    } else if (env.config.validateNoDerivedComputationsInEffects) {
+      validateNoDerivedComputationsInEffects(hir);
+    }
+
+    if (env.config.validateNoSetStateInEffects && env.outputMode === 'lint') {
+      env.logErrors(validateNoSetStateInEffects(hir, env));
+    }
+
+    if (env.config.validateNoJSXInTryStatements && env.outputMode === 'lint') {
+      env.logErrors(validateNoJSXInTryStatement(hir));
+    }
+
+    if (env.config.validateNoImpureFunctionsInRender) {
+      validateNoImpureFunctionsInRender(hir).unwrap();
+    }
+
+    validateNoFreezingKnownMutableFunctions(hir).unwrap();
+  }
+
+  inferReactivePlaces(hir);
+  log({kind: 'hir', name: 'InferReactivePlaces', value: hir});
+
+  if (env.enableValidations) {
+    if (
+      env.config.validateExhaustiveMemoizationDependencies ||
+      env.config.validateExhaustiveEffectDependencies
+    ) {
+      // NOTE: this relies on reactivity inference running first
+      validateExhaustiveDependencies(hir).unwrap();
+    }
+  }
+
+  rewriteInstructionKindsBasedOnReassignment(hir);
+  log({
+    kind: 'hir',
+    name: 'RewriteInstructionKindsBasedOnReassignment',
+    value: hir,
+  });
+
+  if (
+    env.enableValidations &&
+    env.config.validateStaticComponents &&
+    env.outputMode === 'lint'
+  ) {
+    env.logErrors(validateStaticComponents(hir));
+  }
+
+  if (env.enableMemoization) {
+    /**
+     * Only create reactive scopes (which directly map to generated memo blocks)
+     * if inferred memoization is enabled. This makes all later passes which
+     * transform reactive-scope labeled instructions no-ops.
+     */
+    inferReactiveScopeVariables(hir);
+    log({kind: 'hir', name: 'InferReactiveScopeVariables', value: hir});
+  }
+
+  const fbtOperands = memoizeFbtAndMacroOperandsInSameScope(hir);
+  log({
+    kind: 'hir',
+    name: 'MemoizeFbtAndMacroOperandsInSameScope',
+    value: hir,
+  });
+
+  if (env.config.enableJsxOutlining) {
+    outlineJSX(hir);
+  }
+
+  if (env.config.enableNameAnonymousFunctions) {
+    nameAnonymousFunctions(hir);
+    log({
+      kind: 'hir',
+      name: 'NameAnonymousFunctions',
+      value: hir,
+    });
+  }
+
+  if (env.config.enableFunctionOutlining) {
+    outlineFunctions(hir, fbtOperands);
+    log({kind: 'hir', name: 'OutlineFunctions', value: hir});
+  }
+
+  alignMethodCallScopes(hir);
+  log({
+    kind: 'hir',
+    name: 'AlignMethodCallScopes',
+    value: hir,
+  });
+
+  alignObjectMethodScopes(hir);
+  log({
+    kind: 'hir',
+    name: 'AlignObjectMethodScopes',
+    value: hir,
+  });
+
+  pruneUnusedLabelsHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'PruneUnusedLabelsHIR',
+    value: hir,
+  });
+
+  alignReactiveScopesToBlockScopesHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'AlignReactiveScopesToBlockScopesHIR',
+    value: hir,
+  });
+
+  mergeOverlappingReactiveScopesHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'MergeOverlappingReactiveScopesHIR',
+    value: hir,
+  });
+  assertValidBlockNesting(hir);
+
+  buildReactiveScopeTerminalsHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'BuildReactiveScopeTerminalsHIR',
+    value: hir,
+  });
+
+  assertValidBlockNesting(hir);
+
+  flattenReactiveLoopsHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'FlattenReactiveLoopsHIR',
+    value: hir,
+  });
+
+  flattenScopesWithHooksOrUseHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'FlattenScopesWithHooksOrUseHIR',
+    value: hir,
+  });
+  assertTerminalSuccessorsExist(hir);
+  assertTerminalPredsExist(hir);
+  propagateScopeDependenciesHIR(hir);
+  log({
+    kind: 'hir',
+    name: 'PropagateScopeDependenciesHIR',
+    value: hir,
+  });
+
+  if (env.config.inferEffectDependencies) {
+    inferEffectDependencies(hir);
+    log({
+      kind: 'hir',
+      name: 'InferEffectDependencies',
+      value: hir,
+    });
+  }
+
+  if (env.config.inlineJsxTransform) {
+    inlineJsxTransform(hir, env.config.inlineJsxTransform);
+    log({
+      kind: 'hir',
+      name: 'inlineJsxTransform',
+      value: hir,
+    });
+  }
+
+  const reactiveFunction = buildReactiveFunction(hir);
+  log({
+    kind: 'reactive',
+    name: 'BuildReactiveFunction',
+    value: reactiveFunction,
+  });
+
+  assertWellFormedBreakTargets(reactiveFunction);
+
+  pruneUnusedLabels(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneUnusedLabels',
+    value: reactiveFunction,
+  });
+  assertScopeInstructionsWithinScopes(reactiveFunction);
+
+  pruneNonEscapingScopes(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneNonEscapingScopes',
+    value: reactiveFunction,
+  });
+
+  pruneNonReactiveDependencies(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneNonReactiveDependencies',
+    value: reactiveFunction,
+  });
+
+  pruneUnusedScopes(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneUnusedScopes',
+    value: reactiveFunction,
+  });
+
+  mergeReactiveScopesThatInvalidateTogether(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'MergeReactiveScopesThatInvalidateTogether',
+    value: reactiveFunction,
+  });
+
+  pruneAlwaysInvalidatingScopes(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneAlwaysInvalidatingScopes',
+    value: reactiveFunction,
+  });
+
+  if (env.config.enableChangeDetectionForDebugging != null) {
+    pruneInitializationDependencies(reactiveFunction);
+    log({
+      kind: 'reactive',
+      name: 'PruneInitializationDependencies',
+      value: reactiveFunction,
+    });
+  }
+
+  propagateEarlyReturns(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PropagateEarlyReturns',
+    value: reactiveFunction,
+  });
+
+  pruneUnusedLValues(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneUnusedLValues',
+    value: reactiveFunction,
+  });
+
+  promoteUsedTemporaries(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PromoteUsedTemporaries',
+    value: reactiveFunction,
+  });
+
+  extractScopeDeclarationsFromDestructuring(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'ExtractScopeDeclarationsFromDestructuring',
+    value: reactiveFunction,
+  });
+
+  stabilizeBlockIds(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'StabilizeBlockIds',
+    value: reactiveFunction,
+  });
+
+  const uniqueIdentifiers = renameVariables(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'RenameVariables',
+    value: reactiveFunction,
+  });
+
+  pruneHoistedContexts(reactiveFunction);
+  log({
+    kind: 'reactive',
+    name: 'PruneHoistedContexts',
+    value: reactiveFunction,
+  });
+
+  if (env.config.validateMemoizedEffectDependencies) {
+    validateMemoizedEffectDependencies(reactiveFunction).unwrap();
+  }
+
+  if (
+    env.config.enablePreserveExistingMemoizationGuarantees ||
+    env.config.validatePreserveExistingMemoizationGuarantees
+  ) {
+    validatePreservedManualMemoization(reactiveFunction).unwrap();
+  }
+
+  const ast = codegenFunction(reactiveFunction, {
+    uniqueIdentifiers,
+    fbtOperands,
+  }).unwrap();
+  log({kind: 'ast', name: 'Codegen', value: ast});
+  for (const outlined of ast.outlined) {
+    log({kind: 'ast', name: 'Codegen (outlined)', value: outlined.fn});
+  }
+
+  if (env.config.validateSourceLocations) {
+    validateSourceLocations(func, ast).unwrap();
+  }
+
+  /**
+   * This flag should be only set for unit / fixture tests to check
+   * that Forget correctly handles unexpected errors (e.g. exceptions
+   * thrown by babel functions or other unexpected exceptions).
+   */
+  if (env.config.throwUnknownException__testonly) {
+    throw new Error('unexpected error');
+  }
+
+  return ast;
+}
+
+export function compileFn(
+  func: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  config: EnvironmentConfig,
+  fnType: ReactFunctionType,
+  mode: CompilerOutputMode,
+  programContext: ProgramContext,
+  logger: Logger | null,
+  filename: string | null,
+  code: string | null,
+): CodegenFunction {
+  return run(
+    func,
+    config,
+    fnType,
+    mode,
+    programContext,
+    logger,
+    filename,
+    code,
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
new file mode 100644
index 00000000000..80ce909f35a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
@@ -0,0 +1,1446 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/core';
+import * as t from '@babel/types';
+import {
+  CompilerError,
+  CompilerErrorDetail,
+  ErrorCategory,
+} from '../CompilerError';
+import {ExternalFunction, ReactFunctionType} from '../HIR/Environment';
+import {CodegenFunction} from '../ReactiveScopes';
+import {isComponentDeclaration} from '../Utils/ComponentDeclaration';
+import {isHookDeclaration} from '../Utils/HookDeclaration';
+import {assertExhaustive} from '../Utils/utils';
+import {insertGatedFunctionDeclaration} from './Gating';
+import {
+  addImportsToProgram,
+  ProgramContext,
+  validateRestrictedImports,
+} from './Imports';
+import {
+  CompilerOutputMode,
+  CompilerReactTarget,
+  ParsedPluginOptions,
+  PluginOptions,
+} from './Options';
+import {compileFn} from './Pipeline';
+import {
+  filterSuppressionsThatAffectFunction,
+  findProgramSuppressions,
+  suppressionsToCompilerError,
+} from './Suppression';
+import {GeneratedSource} from '../HIR';
+import {Err, Ok, Result} from '../Utils/Result';
+
+export type CompilerPass = {
+  opts: ParsedPluginOptions;
+  filename: string | null;
+  comments: Array<t.CommentBlock | t.CommentLine>;
+  code: string | null;
+};
+export const OPT_IN_DIRECTIVES = new Set(['use forget', 'use memo']);
+export const OPT_OUT_DIRECTIVES = new Set(['use no forget', 'use no memo']);
+const DYNAMIC_GATING_DIRECTIVE = new RegExp('^use memo if\\(([^\\)]*)\\)$');
+
+export function tryFindDirectiveEnablingMemoization(
+  directives: Array<t.Directive>,
+  opts: ParsedPluginOptions,
+): Result<t.Directive | null, CompilerError> {
+  const optIn = directives.find(directive =>
+    OPT_IN_DIRECTIVES.has(directive.value.value),
+  );
+  if (optIn != null) {
+    return Ok(optIn);
+  }
+  const dynamicGating = findDirectivesDynamicGating(directives, opts);
+  if (dynamicGating.isOk()) {
+    return Ok(dynamicGating.unwrap()?.directive ?? null);
+  } else {
+    return Err(dynamicGating.unwrapErr());
+  }
+}
+
+export function findDirectiveDisablingMemoization(
+  directives: Array<t.Directive>,
+  {customOptOutDirectives}: PluginOptions,
+): t.Directive | null {
+  if (customOptOutDirectives != null) {
+    return (
+      directives.find(
+        directive =>
+          customOptOutDirectives.indexOf(directive.value.value) !== -1,
+      ) ?? null
+    );
+  }
+  return (
+    directives.find(directive =>
+      OPT_OUT_DIRECTIVES.has(directive.value.value),
+    ) ?? null
+  );
+}
+function findDirectivesDynamicGating(
+  directives: Array<t.Directive>,
+  opts: ParsedPluginOptions,
+): Result<
+  {
+    gating: ExternalFunction;
+    directive: t.Directive;
+  } | null,
+  CompilerError
+> {
+  if (opts.dynamicGating === null) {
+    return Ok(null);
+  }
+  const errors = new CompilerError();
+  const result: Array<{directive: t.Directive; match: string}> = [];
+
+  for (const directive of directives) {
+    const maybeMatch = DYNAMIC_GATING_DIRECTIVE.exec(directive.value.value);
+    if (maybeMatch != null && maybeMatch[1] != null) {
+      if (t.isValidIdentifier(maybeMatch[1])) {
+        result.push({directive, match: maybeMatch[1]});
+      } else {
+        errors.push({
+          reason: `Dynamic gating directive is not a valid JavaScript identifier`,
+          description: `Found '${directive.value.value}'`,
+          category: ErrorCategory.Gating,
+          loc: directive.loc ?? null,
+          suggestions: null,
+        });
+      }
+    }
+  }
+  if (errors.hasAnyErrors()) {
+    return Err(errors);
+  } else if (result.length > 1) {
+    const error = new CompilerError();
+    error.push({
+      reason: `Multiple dynamic gating directives found`,
+      description: `Expected a single directive but found [${result
+        .map(r => r.directive.value.value)
+        .join(', ')}]`,
+      category: ErrorCategory.Gating,
+      loc: result[0].directive.loc ?? null,
+      suggestions: null,
+    });
+    return Err(error);
+  } else if (result.length === 1) {
+    return Ok({
+      gating: {
+        source: opts.dynamicGating.source,
+        importSpecifierName: result[0].match,
+      },
+      directive: result[0].directive,
+    });
+  } else {
+    return Ok(null);
+  }
+}
+
+function isError(err: unknown): boolean {
+  return !(err instanceof CompilerError) || err.hasErrors();
+}
+
+function isConfigError(err: unknown): boolean {
+  if (err instanceof CompilerError) {
+    return err.details.some(detail => detail.category === ErrorCategory.Config);
+  }
+  return false;
+}
+
+export type BabelFn =
+  | NodePath<t.FunctionDeclaration>
+  | NodePath<t.FunctionExpression>
+  | NodePath<t.ArrowFunctionExpression>;
+
+export type CompileResult = {
+  /**
+   * Distinguishes existing functions that were compiled ('original') from
+   * functions which were outlined. Only original functions need to be gated
+   * if gating mode is enabled.
+   */
+  kind: 'original' | 'outlined';
+  originalFn: BabelFn;
+  compiledFn: CodegenFunction;
+};
+
+function logError(
+  err: unknown,
+  context: {
+    opts: PluginOptions;
+    filename: string | null;
+  },
+  fnLoc: t.SourceLocation | null,
+): void {
+  if (context.opts.logger) {
+    if (err instanceof CompilerError) {
+      for (const detail of err.details) {
+        context.opts.logger.logEvent(context.filename, {
+          kind: 'CompileError',
+          fnLoc,
+          detail,
+        });
+      }
+    } else {
+      let stringifiedError;
+      if (err instanceof Error) {
+        stringifiedError = err.stack ?? err.message;
+      } else {
+        stringifiedError = err?.toString() ?? '[ null ]';
+      }
+
+      context.opts.logger.logEvent(context.filename, {
+        kind: 'PipelineError',
+        fnLoc,
+        data: stringifiedError,
+      });
+    }
+  }
+}
+function handleError(
+  err: unknown,
+  context: {
+    opts: PluginOptions;
+    filename: string | null;
+  },
+  fnLoc: t.SourceLocation | null,
+): void {
+  logError(err, context, fnLoc);
+  if (
+    context.opts.panicThreshold === 'all_errors' ||
+    (context.opts.panicThreshold === 'critical_errors' && isError(err)) ||
+    isConfigError(err) // Always throws regardless of panic threshold
+  ) {
+    throw err;
+  }
+}
+
+export function createNewFunctionNode(
+  originalFn: BabelFn,
+  compiledFn: CodegenFunction,
+): t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression {
+  let transformedFn:
+    | t.FunctionDeclaration
+    | t.ArrowFunctionExpression
+    | t.FunctionExpression;
+  switch (originalFn.node.type) {
+    case 'FunctionDeclaration': {
+      const fn: t.FunctionDeclaration = {
+        type: 'FunctionDeclaration',
+        id: compiledFn.id,
+        loc: originalFn.node.loc ?? null,
+        async: compiledFn.async,
+        generator: compiledFn.generator,
+        params: compiledFn.params,
+        body: compiledFn.body,
+      };
+      transformedFn = fn;
+      break;
+    }
+    case 'ArrowFunctionExpression': {
+      const fn: t.ArrowFunctionExpression = {
+        type: 'ArrowFunctionExpression',
+        loc: originalFn.node.loc ?? null,
+        async: compiledFn.async,
+        generator: compiledFn.generator,
+        params: compiledFn.params,
+        expression: originalFn.node.expression,
+        body: compiledFn.body,
+      };
+      transformedFn = fn;
+      break;
+    }
+    case 'FunctionExpression': {
+      const fn: t.FunctionExpression = {
+        type: 'FunctionExpression',
+        id: compiledFn.id,
+        loc: originalFn.node.loc ?? null,
+        async: compiledFn.async,
+        generator: compiledFn.generator,
+        params: compiledFn.params,
+        body: compiledFn.body,
+      };
+      transformedFn = fn;
+      break;
+    }
+    default: {
+      assertExhaustive(
+        originalFn.node,
+        `Creating unhandled function: ${originalFn.node}`,
+      );
+    }
+  }
+  // Avoid visiting the new transformed version
+  return transformedFn;
+}
+
+function insertNewOutlinedFunctionNode(
+  program: NodePath<t.Program>,
+  originalFn: BabelFn,
+  compiledFn: CodegenFunction,
+): BabelFn {
+  switch (originalFn.type) {
+    case 'FunctionDeclaration': {
+      return originalFn.insertAfter(
+        createNewFunctionNode(originalFn, compiledFn),
+      )[0]!;
+    }
+    /**
+     * We can't just append the outlined function as a sibling of the original function if it is an
+     * (Arrow)FunctionExpression parented by a VariableDeclaration, as this would cause its parent
+     * to become a SequenceExpression instead which breaks a bunch of assumptions elsewhere in the
+     * plugin.
+     *
+     * To get around this, we always synthesize a new FunctionDeclaration for the outlined function
+     * and insert it as a true sibling to the original function.
+     */
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression': {
+      const fn: t.FunctionDeclaration = {
+        type: 'FunctionDeclaration',
+        id: compiledFn.id,
+        loc: originalFn.node.loc ?? null,
+        async: compiledFn.async,
+        generator: compiledFn.generator,
+        params: compiledFn.params,
+        body: compiledFn.body,
+      };
+      const insertedFuncDecl = program.pushContainer('body', [fn])[0]!;
+      CompilerError.invariant(insertedFuncDecl.isFunctionDeclaration(), {
+        reason: 'Expected inserted function declaration',
+        description: `Got: ${insertedFuncDecl}`,
+        loc: insertedFuncDecl.node?.loc ?? GeneratedSource,
+      });
+      return insertedFuncDecl;
+    }
+    default: {
+      assertExhaustive(
+        originalFn,
+        `Inserting unhandled function: ${originalFn}`,
+      );
+    }
+  }
+}
+
+const DEFAULT_ESLINT_SUPPRESSIONS = [
+  'react-hooks/exhaustive-deps',
+  'react-hooks/rules-of-hooks',
+];
+
+function isFilePartOfSources(
+  sources: Array<string> | ((filename: string) => boolean),
+  filename: string,
+): boolean {
+  if (typeof sources === 'function') {
+    return sources(filename);
+  }
+
+  for (const prefix of sources) {
+    if (filename.indexOf(prefix) !== -1) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export type CompileProgramMetadata = {
+  retryErrors: Array<{fn: BabelFn; error: CompilerError}>;
+  inferredEffectLocations: Set<t.SourceLocation>;
+};
+/**
+ * Main entrypoint for React Compiler.
+ *
+ * @param program The Babel program node to compile
+ * @param pass Compiler configuration and context
+ * @returns Compilation results or null if compilation was skipped
+ */
+export function compileProgram(
+  program: NodePath<t.Program>,
+  pass: CompilerPass,
+): CompileProgramMetadata | null {
+  /**
+   * This is directly invoked by the react-compiler babel plugin, so exceptions
+   * thrown by this function will fail the babel build.
+   * - call `handleError` if your error is recoverable.
+   *   Unless the error is a warning / info diagnostic, compilation of a function
+   *   / entire file should also be skipped.
+   * - throw an exception if the error is fatal / not recoverable.
+   *   Examples of this are invalid compiler configs or failure to codegen outlined
+   *   functions *after* already emitting optimized components / hooks that invoke
+   *   the outlined functions.
+   */
+  if (shouldSkipCompilation(program, pass)) {
+    return null;
+  }
+  const restrictedImportsErr = validateRestrictedImports(
+    program,
+    pass.opts.environment,
+  );
+  if (restrictedImportsErr) {
+    handleError(restrictedImportsErr, pass, null);
+    return null;
+  }
+  /*
+   * Record lint errors and critical errors as depending on Forget's config,
+   * we may still need to run Forget's analysis on every function (even if we
+   * have already encountered errors) for reporting.
+   */
+  const suppressions = findProgramSuppressions(
+    pass.comments,
+    /*
+     * If the compiler is validating hooks rules and exhaustive memo dependencies, we don't need to check
+     * for React ESLint suppressions
+     */
+    pass.opts.environment.validateExhaustiveMemoizationDependencies &&
+      pass.opts.environment.validateHooksUsage
+      ? null
+      : (pass.opts.eslintSuppressionRules ?? DEFAULT_ESLINT_SUPPRESSIONS),
+    // Always bail on Flow suppressions
+    pass.opts.flowSuppressions,
+  );
+
+  const programContext = new ProgramContext({
+    program: program,
+    opts: pass.opts,
+    filename: pass.filename,
+    code: pass.code,
+    suppressions,
+    hasModuleScopeOptOut:
+      findDirectiveDisablingMemoization(program.node.directives, pass.opts) !=
+      null,
+  });
+
+  const queue: Array<CompileSource> = findFunctionsToCompile(
+    program,
+    pass,
+    programContext,
+  );
+  const compiledFns: Array<CompileResult> = [];
+
+  // outputMode takes precedence if specified
+  const outputMode: CompilerOutputMode =
+    pass.opts.outputMode ?? (pass.opts.noEmit ? 'lint' : 'client');
+  while (queue.length !== 0) {
+    const current = queue.shift()!;
+    const compiled = processFn(
+      current.fn,
+      current.fnType,
+      programContext,
+      outputMode,
+    );
+
+    if (compiled != null) {
+      for (const outlined of compiled.outlined) {
+        CompilerError.invariant(outlined.fn.outlined.length === 0, {
+          reason: 'Unexpected nested outlined functions',
+          loc: outlined.fn.loc,
+        });
+        const fn = insertNewOutlinedFunctionNode(
+          program,
+          current.fn,
+          outlined.fn,
+        );
+        fn.skip();
+        programContext.alreadyCompiled.add(fn.node);
+        if (outlined.type !== null) {
+          queue.push({
+            kind: 'outlined',
+            fn,
+            fnType: outlined.type,
+          });
+        }
+      }
+      compiledFns.push({
+        kind: current.kind,
+        originalFn: current.fn,
+        compiledFn: compiled,
+      });
+    }
+  }
+
+  // Avoid modifying the program if we find a program level opt-out
+  if (programContext.hasModuleScopeOptOut) {
+    if (compiledFns.length > 0) {
+      const error = new CompilerError();
+      error.pushErrorDetail(
+        new CompilerErrorDetail({
+          reason:
+            'Unexpected compiled functions when module scope opt-out is present',
+          category: ErrorCategory.Invariant,
+          loc: null,
+        }),
+      );
+      handleError(error, programContext, null);
+    }
+    return null;
+  }
+
+  // Insert React Compiler generated functions into the Babel AST
+  applyCompiledFunctions(program, compiledFns, pass, programContext);
+
+  return {
+    retryErrors: programContext.retryErrors,
+    inferredEffectLocations: programContext.inferredEffectLocations,
+  };
+}
+
+type CompileSource = {
+  kind: 'original' | 'outlined';
+  fn: BabelFn;
+  fnType: ReactFunctionType;
+};
+/**
+ * Find all React components and hooks that need to be compiled
+ *
+ * @returns An array of React functions from @param program to transform
+ */
+function findFunctionsToCompile(
+  program: NodePath<t.Program>,
+  pass: CompilerPass,
+  programContext: ProgramContext,
+): Array<CompileSource> {
+  const queue: Array<CompileSource> = [];
+  const traverseFunction = (fn: BabelFn, pass: CompilerPass): void => {
+    // In 'all' mode, compile only top level functions
+    if (
+      pass.opts.compilationMode === 'all' &&
+      fn.scope.getProgramParent() !== fn.scope.parent
+    ) {
+      return;
+    }
+
+    const fnType = getReactFunctionType(fn, pass);
+
+    if (pass.opts.environment.validateNoDynamicallyCreatedComponentsOrHooks) {
+      validateNoDynamicallyCreatedComponentsOrHooks(fn, pass, programContext);
+    }
+
+    if (fnType === null || programContext.alreadyCompiled.has(fn.node)) {
+      return;
+    }
+
+    /*
+     * We may be generating a new FunctionDeclaration node, so we must skip over it or this
+     * traversal will loop infinitely.
+     * Ensure we avoid visiting the original function again.
+     */
+    programContext.alreadyCompiled.add(fn.node);
+    fn.skip();
+
+    queue.push({kind: 'original', fn, fnType});
+  };
+
+  // Main traversal to compile with Forget
+  program.traverse(
+    {
+      ClassDeclaration(node: NodePath<t.ClassDeclaration>) {
+        /*
+         * Don't visit functions defined inside classes, because they
+         * can reference `this` which is unsafe for compilation
+         */
+        node.skip();
+      },
+
+      ClassExpression(node: NodePath<t.ClassExpression>) {
+        /*
+         * Don't visit functions defined inside classes, because they
+         * can reference `this` which is unsafe for compilation
+         */
+        node.skip();
+      },
+
+      FunctionDeclaration: traverseFunction,
+
+      FunctionExpression: traverseFunction,
+
+      ArrowFunctionExpression: traverseFunction,
+    },
+    {
+      ...pass,
+      opts: {...pass.opts, ...pass.opts},
+      filename: pass.filename ?? null,
+    },
+  );
+  return queue;
+}
+
+/**
+ * Try to compile a source function, taking into account all local suppressions,
+ * opt-ins, and opt-outs.
+ *
+ * Errors encountered during compilation are either logged (if recoverable) or
+ * thrown (if non-recoverable).
+ *
+ * @returns the compiled function or null if the function was skipped (due to
+ * config settings and/or outputs)
+ */
+function processFn(
+  fn: BabelFn,
+  fnType: ReactFunctionType,
+  programContext: ProgramContext,
+  outputMode: CompilerOutputMode,
+): null | CodegenFunction {
+  let directives: {
+    optIn: t.Directive | null;
+    optOut: t.Directive | null;
+  };
+  if (fn.node.body.type !== 'BlockStatement') {
+    directives = {
+      optIn: null,
+      optOut: null,
+    };
+  } else {
+    const optIn = tryFindDirectiveEnablingMemoization(
+      fn.node.body.directives,
+      programContext.opts,
+    );
+    if (optIn.isErr()) {
+      /**
+       * If parsing opt-in directive fails, it's most likely that React Compiler
+       * was not tested or rolled out on this function. In that case, we handle
+       * the error and fall back to the safest option which is to not optimize
+       * the function.
+       */
+      handleError(optIn.unwrapErr(), programContext, fn.node.loc ?? null);
+      return null;
+    }
+    directives = {
+      optIn: optIn.unwrapOr(null),
+      optOut: findDirectiveDisablingMemoization(
+        fn.node.body.directives,
+        programContext.opts,
+      ),
+    };
+  }
+
+  let compiledFn: CodegenFunction;
+  const compileResult = tryCompileFunction(
+    fn,
+    fnType,
+    programContext,
+    outputMode,
+  );
+  if (compileResult.kind === 'error') {
+    if (directives.optOut != null) {
+      logError(compileResult.error, programContext, fn.node.loc ?? null);
+    } else {
+      handleError(compileResult.error, programContext, fn.node.loc ?? null);
+    }
+    if (outputMode === 'client') {
+      const retryResult = retryCompileFunction(fn, fnType, programContext);
+      if (retryResult == null) {
+        return null;
+      }
+      compiledFn = retryResult;
+    } else {
+      return null;
+    }
+  } else {
+    compiledFn = compileResult.compiledFn;
+  }
+
+  /**
+   * If 'use no forget/memo' is present and we still ran the code through the
+   * compiler for validation, log a skip event and don't mutate the babel AST.
+   * This allows us to flag if there is an unused 'use no forget/memo'
+   * directive.
+   */
+  if (
+    programContext.opts.ignoreUseNoForget === false &&
+    directives.optOut != null
+  ) {
+    programContext.logEvent({
+      kind: 'CompileSkip',
+      fnLoc: fn.node.body.loc ?? null,
+      reason: `Skipped due to '${directives.optOut.value}' directive.`,
+      loc: directives.optOut.loc ?? null,
+    });
+    return null;
+  }
+  programContext.logEvent({
+    kind: 'CompileSuccess',
+    fnLoc: fn.node.loc ?? null,
+    fnName: compiledFn.id?.name ?? null,
+    memoSlots: compiledFn.memoSlotsUsed,
+    memoBlocks: compiledFn.memoBlocks,
+    memoValues: compiledFn.memoValues,
+    prunedMemoBlocks: compiledFn.prunedMemoBlocks,
+    prunedMemoValues: compiledFn.prunedMemoValues,
+  });
+
+  if (programContext.hasModuleScopeOptOut) {
+    return null;
+  } else if (programContext.opts.outputMode === 'lint') {
+    /**
+     * inferEffectDependencies + noEmit is currently only used for linting. In
+     * this mode, add source locations for where the compiler *can* infer effect
+     * dependencies.
+     */
+    for (const loc of compiledFn.inferredEffectLocations) {
+      if (loc !== GeneratedSource) {
+        programContext.inferredEffectLocations.add(loc);
+      }
+    }
+    return null;
+  } else if (
+    programContext.opts.compilationMode === 'annotation' &&
+    directives.optIn == null
+  ) {
+    /**
+     * If no opt-in directive is found and the compiler is configured in
+     * annotation mode, don't insert the compiled function.
+     */
+    return null;
+  } else {
+    return compiledFn;
+  }
+}
+
+function tryCompileFunction(
+  fn: BabelFn,
+  fnType: ReactFunctionType,
+  programContext: ProgramContext,
+  outputMode: CompilerOutputMode,
+):
+  | {kind: 'compile'; compiledFn: CodegenFunction}
+  | {kind: 'error'; error: unknown} {
+  /**
+   * Note that Babel does not attach comment nodes to nodes; they are dangling off of the
+   * Program node itself. We need to figure out whether an eslint suppression range
+   * applies to this function first.
+   */
+  const suppressionsInFunction = filterSuppressionsThatAffectFunction(
+    programContext.suppressions,
+    fn,
+  );
+  if (suppressionsInFunction.length > 0) {
+    return {
+      kind: 'error',
+      error: suppressionsToCompilerError(suppressionsInFunction),
+    };
+  }
+
+  try {
+    return {
+      kind: 'compile',
+      compiledFn: compileFn(
+        fn,
+        programContext.opts.environment,
+        fnType,
+        outputMode,
+        programContext,
+        programContext.opts.logger,
+        programContext.filename,
+        programContext.code,
+      ),
+    };
+  } catch (err) {
+    return {kind: 'error', error: err};
+  }
+}
+
+/**
+ * If non-memo feature flags are enabled, retry compilation with a more minimal
+ * feature set.
+ *
+ * @returns a CodegenFunction if retry was successful
+ */
+function retryCompileFunction(
+  fn: BabelFn,
+  fnType: ReactFunctionType,
+  programContext: ProgramContext,
+): CodegenFunction | null {
+  const environment = programContext.opts.environment;
+  if (
+    !(environment.enableFire || environment.inferEffectDependencies != null)
+  ) {
+    return null;
+  }
+  /**
+   * Note that function suppressions are not checked in the retry pipeline, as
+   * they only affect auto-memoization features.
+   */
+  try {
+    const retryResult = compileFn(
+      fn,
+      environment,
+      fnType,
+      'client-no-memo',
+      programContext,
+      programContext.opts.logger,
+      programContext.filename,
+      programContext.code,
+    );
+
+    if (!retryResult.hasFireRewrite && !retryResult.hasInferredEffect) {
+      return null;
+    }
+    return retryResult;
+  } catch (err) {
+    // TODO: we might want to log error here, but this will also result in duplicate logging
+    if (err instanceof CompilerError) {
+      programContext.retryErrors.push({fn, error: err});
+    }
+    return null;
+  }
+}
+
+/**
+ * Applies React Compiler generated functions to the babel AST by replacing
+ * existing functions in place or inserting new declarations.
+ */
+function applyCompiledFunctions(
+  program: NodePath<t.Program>,
+  compiledFns: Array<CompileResult>,
+  pass: CompilerPass,
+  programContext: ProgramContext,
+): void {
+  let referencedBeforeDeclared = null;
+  for (const result of compiledFns) {
+    const {kind, originalFn, compiledFn} = result;
+    const transformedFn = createNewFunctionNode(originalFn, compiledFn);
+    programContext.alreadyCompiled.add(transformedFn);
+
+    let dynamicGating: ExternalFunction | null = null;
+    if (originalFn.node.body.type === 'BlockStatement') {
+      const result = findDirectivesDynamicGating(
+        originalFn.node.body.directives,
+        pass.opts,
+      );
+      if (result.isOk()) {
+        dynamicGating = result.unwrap()?.gating ?? null;
+      }
+    }
+    const functionGating = dynamicGating ?? pass.opts.gating;
+    if (kind === 'original' && functionGating != null) {
+      referencedBeforeDeclared ??=
+        getFunctionReferencedBeforeDeclarationAtTopLevel(program, compiledFns);
+      insertGatedFunctionDeclaration(
+        originalFn,
+        transformedFn,
+        programContext,
+        functionGating,
+        referencedBeforeDeclared.has(result),
+      );
+    } else {
+      originalFn.replaceWith(transformedFn);
+    }
+  }
+
+  // Forget compiled the component, we need to update existing imports of useMemoCache
+  if (compiledFns.length > 0) {
+    addImportsToProgram(program, programContext);
+  }
+}
+
+function shouldSkipCompilation(
+  program: NodePath<t.Program>,
+  pass: CompilerPass,
+): boolean {
+  if (pass.opts.sources) {
+    if (pass.filename === null) {
+      const error = new CompilerError();
+      error.pushErrorDetail(
+        new CompilerErrorDetail({
+          reason: `Expected a filename but found none.`,
+          description:
+            "When the 'sources' config options is specified, the React compiler will only compile files with a name",
+          category: ErrorCategory.Config,
+          loc: null,
+        }),
+      );
+      handleError(error, pass, null);
+      return true;
+    }
+
+    if (!isFilePartOfSources(pass.opts.sources, pass.filename)) {
+      return true;
+    }
+  }
+
+  if (
+    hasMemoCacheFunctionImport(
+      program,
+      getReactCompilerRuntimeModule(pass.opts.target),
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Validates that Components/Hooks are always defined at module level. This prevents scope reference
+ * errors that occur when the compiler attempts to optimize the nested component/hook while its
+ * parent function remains uncompiled.
+ */
+function validateNoDynamicallyCreatedComponentsOrHooks(
+  fn: BabelFn,
+  pass: CompilerPass,
+  programContext: ProgramContext,
+): void {
+  const parentNameExpr = getFunctionName(fn);
+  const parentName =
+    parentNameExpr !== null && parentNameExpr.isIdentifier()
+      ? parentNameExpr.node.name
+      : '<anonymous>';
+
+  const validateNestedFunction = (
+    nestedFn: NodePath<
+      t.FunctionDeclaration | t.FunctionExpression | t.ArrowFunctionExpression
+    >,
+  ): void => {
+    if (
+      nestedFn.node === fn.node ||
+      programContext.alreadyCompiled.has(nestedFn.node)
+    ) {
+      return;
+    }
+
+    if (nestedFn.scope.getProgramParent() !== nestedFn.scope.parent) {
+      const nestedFnType = getReactFunctionType(nestedFn as BabelFn, pass);
+      const nestedFnNameExpr = getFunctionName(nestedFn as BabelFn);
+      const nestedName =
+        nestedFnNameExpr !== null && nestedFnNameExpr.isIdentifier()
+          ? nestedFnNameExpr.node.name
+          : '<anonymous>';
+      if (nestedFnType === 'Component' || nestedFnType === 'Hook') {
+        CompilerError.throwDiagnostic({
+          category: ErrorCategory.Factories,
+          reason: `Components and hooks cannot be created dynamically`,
+          description: `The function \`${nestedName}\` appears to be a React ${nestedFnType.toLowerCase()}, but it's defined inside \`${parentName}\`. Components and Hooks should always be declared at module scope`,
+          details: [
+            {
+              kind: 'error',
+              message: 'this function dynamically created a component/hook',
+              loc: parentNameExpr?.node.loc ?? fn.node.loc ?? null,
+            },
+            {
+              kind: 'error',
+              message: 'the component is created here',
+              loc: nestedFnNameExpr?.node.loc ?? nestedFn.node.loc ?? null,
+            },
+          ],
+        });
+      }
+    }
+
+    nestedFn.skip();
+  };
+
+  fn.traverse({
+    FunctionDeclaration: validateNestedFunction,
+    FunctionExpression: validateNestedFunction,
+    ArrowFunctionExpression: validateNestedFunction,
+  });
+}
+
+function getReactFunctionType(
+  fn: BabelFn,
+  pass: CompilerPass,
+): ReactFunctionType | null {
+  const hookPattern = pass.opts.environment.hookPattern;
+  if (fn.node.body.type === 'BlockStatement') {
+    const optInDirectives = tryFindDirectiveEnablingMemoization(
+      fn.node.body.directives,
+      pass.opts,
+    );
+    if (optInDirectives.unwrapOr(null) != null) {
+      return getComponentOrHookLike(fn, hookPattern) ?? 'Other';
+    }
+  }
+
+  // Component and hook declarations are known components/hooks
+  let componentSyntaxType: ReactFunctionType | null = null;
+  if (fn.isFunctionDeclaration()) {
+    if (isComponentDeclaration(fn.node)) {
+      componentSyntaxType = 'Component';
+    } else if (isHookDeclaration(fn.node)) {
+      componentSyntaxType = 'Hook';
+    }
+  }
+
+  switch (pass.opts.compilationMode) {
+    case 'annotation': {
+      // opt-ins are checked above
+      return null;
+    }
+    case 'infer': {
+      // Check if this is a component or hook-like function
+      return componentSyntaxType ?? getComponentOrHookLike(fn, hookPattern);
+    }
+    case 'syntax': {
+      return componentSyntaxType;
+    }
+    case 'all': {
+      return getComponentOrHookLike(fn, hookPattern) ?? 'Other';
+    }
+    default: {
+      assertExhaustive(
+        pass.opts.compilationMode,
+        `Unexpected compilationMode \`${pass.opts.compilationMode}\``,
+      );
+    }
+  }
+}
+
+/**
+ * Returns true if the program contains an `import {c} from "<moduleName>"` declaration,
+ * regardless of the local name of the 'c' specifier and the presence of other specifiers
+ * in the same declaration.
+ */
+function hasMemoCacheFunctionImport(
+  program: NodePath<t.Program>,
+  moduleName: string,
+): boolean {
+  let hasUseMemoCache = false;
+  program.traverse({
+    ImportSpecifier(path) {
+      const imported = path.get('imported');
+      let importedName: string | null = null;
+      if (imported.isIdentifier()) {
+        importedName = imported.node.name;
+      } else if (imported.isStringLiteral()) {
+        importedName = imported.node.value;
+      }
+      if (
+        importedName === 'c' &&
+        path.parentPath.isImportDeclaration() &&
+        path.parentPath.get('source').node.value === moduleName
+      ) {
+        hasUseMemoCache = true;
+      }
+    },
+  });
+  return hasUseMemoCache;
+}
+
+function isHookName(s: string, hookPattern: string | null): boolean {
+  if (hookPattern !== null) {
+    return new RegExp(hookPattern).test(s);
+  }
+  return /^use[A-Z0-9]/.test(s);
+}
+
+/*
+ * We consider hooks to be a hook name identifier or a member expression
+ * containing a hook name.
+ */
+
+function isHook(
+  path: NodePath<t.Expression | t.PrivateName>,
+  hookPattern: string | null,
+): boolean {
+  if (path.isIdentifier()) {
+    return isHookName(path.node.name, hookPattern);
+  } else if (
+    path.isMemberExpression() &&
+    !path.node.computed &&
+    isHook(path.get('property'), hookPattern)
+  ) {
+    const obj = path.get('object').node;
+    const isPascalCaseNameSpace = /^[A-Z].*/;
+    return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name);
+  } else {
+    return false;
+  }
+}
+
+/*
+ * Checks if the node is a React component name. React component names must
+ * always start with an uppercase letter.
+ */
+
+function isComponentName(path: NodePath<t.Expression>): boolean {
+  return path.isIdentifier() && /^[A-Z]/.test(path.node.name);
+}
+
+function isReactAPI(
+  path: NodePath<t.Expression | t.PrivateName | t.V8IntrinsicIdentifier>,
+  functionName: string,
+): boolean {
+  const node = path.node;
+  return (
+    (node.type === 'Identifier' && node.name === functionName) ||
+    (node.type === 'MemberExpression' &&
+      node.object.type === 'Identifier' &&
+      node.object.name === 'React' &&
+      node.property.type === 'Identifier' &&
+      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(path: NodePath<t.Expression>): boolean {
+  return !!(
+    path.parentPath.isCallExpression() &&
+    path.parentPath.get('callee').isExpression() &&
+    isReactAPI(path.parentPath.get('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(path: NodePath<t.Expression>): boolean {
+  return (
+    path.parentPath.isCallExpression() &&
+    path.parentPath.get('callee').isExpression() &&
+    isReactAPI(path.parentPath.get('callee'), 'memo')
+  );
+}
+
+function isValidPropsAnnotation(
+  annot: t.TypeAnnotation | t.TSTypeAnnotation | t.Noop | null | undefined,
+): boolean {
+  if (annot == null) {
+    return true;
+  } else if (annot.type === 'TSTypeAnnotation') {
+    switch (annot.typeAnnotation.type) {
+      case 'TSArrayType':
+      case 'TSBigIntKeyword':
+      case 'TSBooleanKeyword':
+      case 'TSConstructorType':
+      case 'TSFunctionType':
+      case 'TSLiteralType':
+      case 'TSNeverKeyword':
+      case 'TSNumberKeyword':
+      case 'TSStringKeyword':
+      case 'TSSymbolKeyword':
+      case 'TSTupleType':
+        return false;
+    }
+    return true;
+  } else if (annot.type === 'TypeAnnotation') {
+    switch (annot.typeAnnotation.type) {
+      case 'ArrayTypeAnnotation':
+      case 'BooleanLiteralTypeAnnotation':
+      case 'BooleanTypeAnnotation':
+      case 'EmptyTypeAnnotation':
+      case 'FunctionTypeAnnotation':
+      case 'NumberLiteralTypeAnnotation':
+      case 'NumberTypeAnnotation':
+      case 'StringLiteralTypeAnnotation':
+      case 'StringTypeAnnotation':
+      case 'SymbolTypeAnnotation':
+      case 'ThisTypeAnnotation':
+      case 'TupleTypeAnnotation':
+        return false;
+    }
+    return true;
+  } else if (annot.type === 'Noop') {
+    return true;
+  } else {
+    assertExhaustive(annot, `Unexpected annotation node \`${annot}\``);
+  }
+}
+
+function isValidComponentParams(
+  params: Array<NodePath<t.Identifier | t.Pattern | t.RestElement>>,
+): boolean {
+  if (params.length === 0) {
+    return true;
+  } else if (params.length > 0 && params.length <= 2) {
+    if (!isValidPropsAnnotation(params[0].node.typeAnnotation)) {
+      return false;
+    }
+
+    if (params.length === 1) {
+      return !params[0].isRestElement();
+    } else if (params[1].isIdentifier()) {
+      // check if second param might be a ref
+      const {name} = params[1].node;
+      return name.includes('ref') || name.includes('Ref');
+    } else {
+      /**
+       * Otherwise, avoid helper functions that take more than one argument.
+       * Helpers are _usually_ named with lowercase, but some code may
+       * violate this rule
+       */
+      return false;
+    }
+  }
+  return false;
+}
+
+/*
+ * Adapted from the ESLint rule at
+ * https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L90-L103
+ */
+function getComponentOrHookLike(
+  node: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  hookPattern: string | null,
+): ReactFunctionType | null {
+  const functionName = getFunctionName(node);
+  // Check if the name is component or hook like:
+  if (functionName !== null && isComponentName(functionName)) {
+    let isComponent =
+      callsHooksOrCreatesJsx(node, hookPattern) &&
+      isValidComponentParams(node.get('params')) &&
+      !returnsNonNode(node);
+    return isComponent ? 'Component' : null;
+  } else if (functionName !== null && isHook(functionName, hookPattern)) {
+    // Hooks have hook invocations or JSX, but can take any # of arguments
+    return callsHooksOrCreatesJsx(node, hookPattern) ? 'Hook' : null;
+  }
+
+  /*
+   * Otherwise for function or arrow function expressions, check if they
+   * appear as the argument to React.forwardRef() or React.memo():
+   */
+  if (node.isFunctionExpression() || node.isArrowFunctionExpression()) {
+    if (isForwardRefCallback(node) || isMemoCallback(node)) {
+      // As an added check we also look for hook invocations or JSX
+      return callsHooksOrCreatesJsx(node, hookPattern) ? 'Component' : null;
+    }
+  }
+  return null;
+}
+
+function skipNestedFunctions(
+  node: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+) {
+  return (
+    fn: NodePath<
+      t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+    >,
+  ): void => {
+    if (fn.node !== node.node) {
+      fn.skip();
+    }
+  };
+}
+
+function callsHooksOrCreatesJsx(
+  node: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  hookPattern: string | null,
+): boolean {
+  let invokesHooks = false;
+  let createsJsx = false;
+
+  node.traverse({
+    JSX() {
+      createsJsx = true;
+    },
+    CallExpression(call) {
+      const callee = call.get('callee');
+      if (callee.isExpression() && isHook(callee, hookPattern)) {
+        invokesHooks = true;
+      }
+    },
+    ArrowFunctionExpression: skipNestedFunctions(node),
+    FunctionExpression: skipNestedFunctions(node),
+    FunctionDeclaration: skipNestedFunctions(node),
+  });
+
+  return invokesHooks || createsJsx;
+}
+
+function isNonNode(node?: t.Expression | null): boolean {
+  if (!node) {
+    return true;
+  }
+  switch (node.type) {
+    case 'ObjectExpression':
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression':
+    case 'BigIntLiteral':
+    case 'ClassExpression':
+    case 'NewExpression': // technically `new Array()` is legit, but unlikely
+      return true;
+  }
+  return false;
+}
+
+function returnsNonNode(
+  node: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+): boolean {
+  let returnsNonNode = false;
+  if (
+    // node.traverse#ArrowFunctionExpression isn't called for the root node
+    node.type === 'ArrowFunctionExpression' &&
+    node.node.body.type !== 'BlockStatement'
+  ) {
+    returnsNonNode = isNonNode(node.node.body);
+  }
+
+  node.traverse({
+    ReturnStatement(ret) {
+      returnsNonNode = isNonNode(ret.node.argument);
+    },
+    // Skip traversing all nested functions and their return statements
+    ArrowFunctionExpression: skipNestedFunctions(node),
+    FunctionExpression: skipNestedFunctions(node),
+    FunctionDeclaration: skipNestedFunctions(node),
+    ObjectMethod: node => node.skip(),
+  });
+
+  return returnsNonNode;
+}
+
+/*
+ * Gets the static name of a function AST node. For function declarations it is
+ * easy. For anonymous function expressions it is much harder. If you search for
+ * `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
+ * where JS gives anonymous function expressions names. We roughly detect the
+ * same AST nodes with some exceptions to better fit our use case.
+ */
+
+function getFunctionName(
+  path: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+): NodePath<t.Expression> | null {
+  if (path.isFunctionDeclaration()) {
+    const id = path.get('id');
+    if (id.isIdentifier()) {
+      return id;
+    }
+    return null;
+  }
+  let id: NodePath<t.LVal | t.Expression | t.PrivateName> | null = null;
+  const parent = path.parentPath;
+  if (parent.isVariableDeclarator() && parent.get('init').node === path.node) {
+    // const useHook = () => {};
+    id = parent.get('id');
+  } else if (
+    parent.isAssignmentExpression() &&
+    parent.get('right').node === path.node &&
+    parent.get('operator') === '='
+  ) {
+    // useHook = () => {};
+    id = parent.get('left');
+  } else if (
+    parent.isProperty() &&
+    parent.get('value').node === path.node &&
+    !parent.get('computed') &&
+    parent.get('key').isLVal()
+  ) {
+    /*
+     * {useHook: () => {}}
+     * {useHook() {}}
+     */
+    id = parent.get('key');
+  } else if (
+    parent.isAssignmentPattern() &&
+    parent.get('right').node === path.node &&
+    !parent.get('computed')
+  ) {
+    /*
+     * const {useHook = () => {}} = {};
+     * ({useHook = () => {}} = {});
+     *
+     * Kinda clowny, but we'd said we'd follow spec convention for
+     * `IsAnonymousFunctionDefinition()` usage.
+     */
+    id = parent.get('left');
+  }
+  if (id !== null && (id.isIdentifier() || id.isMemberExpression())) {
+    return id;
+  } else {
+    return null;
+  }
+}
+
+function getFunctionReferencedBeforeDeclarationAtTopLevel(
+  program: NodePath<t.Program>,
+  fns: Array<CompileResult>,
+): Set<CompileResult> {
+  const fnNames = new Map<string, {id: t.Identifier; fn: CompileResult}>(
+    fns
+      .map<[NodePath<t.Expression> | null, CompileResult]>(fn => [
+        getFunctionName(fn.originalFn),
+        fn,
+      ])
+      .filter(
+        (entry): entry is [NodePath<t.Identifier>, CompileResult] =>
+          !!entry[0] && entry[0].isIdentifier(),
+      )
+      .map(entry => [entry[0].node.name, {id: entry[0].node, fn: entry[1]}]),
+  );
+  const referencedBeforeDeclaration = new Set<CompileResult>();
+
+  program.traverse({
+    TypeAnnotation(path) {
+      path.skip();
+    },
+    TSTypeAnnotation(path) {
+      path.skip();
+    },
+    TypeAlias(path) {
+      path.skip();
+    },
+    TSTypeAliasDeclaration(path) {
+      path.skip();
+    },
+    Identifier(id) {
+      const fn = fnNames.get(id.node.name);
+      // We're not tracking this identifier.
+      if (!fn) {
+        return;
+      }
+
+      /*
+       * We've reached the declaration, hoisting is no longer possible, stop
+       * checking for this component name.
+       */
+      if (id.node === fn.id) {
+        fnNames.delete(id.node.name);
+        return;
+      }
+
+      const scope = id.scope.getFunctionParent();
+      /*
+       * A null scope means there's no function scope, which means we're at the
+       * top level scope.
+       */
+      if (scope === null && id.isReferencedIdentifier()) {
+        referencedBeforeDeclaration.add(fn.fn);
+      }
+    },
+  });
+
+  return referencedBeforeDeclaration;
+}
+
+export function getReactCompilerRuntimeModule(
+  target: CompilerReactTarget,
+): string {
+  if (target === '19') {
+    return 'react/compiler-runtime'; // from react namespace
+  } else if (target === '17' || target === '18') {
+    return 'react-compiler-runtime'; // npm package
+  } else {
+    CompilerError.invariant(
+      target != null &&
+        target.kind === 'donotuse_meta_internal' &&
+        typeof target.runtimeModule === 'string',
+      {
+        reason: 'Expected target to already be validated',
+        loc: GeneratedSource,
+      },
+    );
+    return target.runtimeModule;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts
new file mode 100644
index 00000000000..6c54476200a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {hasOwnProperty} from '../Utils/utils';
+import {ParsedPluginOptions} from './Options';
+
+function hasModule(name: string): boolean {
+  if (typeof require === 'undefined') {
+    return false;
+  }
+  try {
+    return !!require.resolve(name);
+  } catch (error: any) {
+    if (
+      error.code === 'MODULE_NOT_FOUND' &&
+      error.message.indexOf(name) !== -1
+    ) {
+      return false;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Tries to detect if reanimated is installed by first looking for the presence of the babel plugin.
+ * However, babel-preset-expo includes it by default so it is occasionally ommitted. If so, we do
+ * a check to see if `react-native-animated` is requireable.
+ *
+ * See https://github.com/expo/expo/blob/e4b8d86442482c7316365a6b7ec1141eec73409d/packages/babel-preset-expo/src/index.ts#L300-L301
+ */
+export function pipelineUsesReanimatedPlugin(
+  plugins: Array<BabelCore.PluginItem> | null | undefined,
+): boolean {
+  if (Array.isArray(plugins)) {
+    for (const plugin of plugins) {
+      if (hasOwnProperty(plugin, 'key')) {
+        const key = (plugin as any).key; // already checked
+        if (
+          typeof key === 'string' &&
+          key.indexOf('react-native-reanimated') !== -1
+        ) {
+          return true;
+        }
+      }
+    }
+  }
+  return hasModule('react-native-reanimated');
+}
+
+export function injectReanimatedFlag(
+  options: ParsedPluginOptions,
+): ParsedPluginOptions {
+  return {
+    ...options,
+    environment: {
+      ...options.environment,
+      enableCustomTypeDefinitionForReanimated: true,
+    },
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Suppression.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Suppression.ts
new file mode 100644
index 00000000000..e6cb934419b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Suppression.ts
@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/core';
+import * as t from '@babel/types';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  CompilerSuggestionOperation,
+  ErrorCategory,
+} from '../CompilerError';
+import {assertExhaustive} from '../Utils/utils';
+import {GeneratedSource} from '../HIR';
+
+/**
+ * Captures the start and end range of a pair of eslint-disable ... eslint-enable comments. In the
+ * case of a CommentLine or a relevant Flow suppression, both the disable and enable point to the
+ * same comment.
+ *
+ * The enable comment can be missing in the case where only a disable block is present, ie the rest
+ * of the file has potential React violations.
+ */
+export type SuppressionRange = {
+  disableComment: t.Comment;
+  enableComment: t.Comment | null;
+  source: SuppressionSource;
+};
+
+type SuppressionSource = 'Eslint' | 'Flow';
+
+/**
+ * An suppression affects a function if:
+ *   1. The suppression is within the function's body; or
+ *   2. The suppression wraps the function
+ */
+export function filterSuppressionsThatAffectFunction(
+  suppressionRanges: Array<SuppressionRange>,
+  fn: NodePath<t.Function>,
+): Array<SuppressionRange> {
+  const suppressionsInScope: Array<SuppressionRange> = [];
+  const fnNode = fn.node;
+  for (const suppressionRange of suppressionRanges) {
+    if (
+      suppressionRange.disableComment.start == null ||
+      fnNode.start == null ||
+      fnNode.end == null
+    ) {
+      continue;
+    }
+    // The suppression is within the function
+    if (
+      suppressionRange.disableComment.start > fnNode.start &&
+      // If there is no matching enable, the rest of the file has potential violations
+      (suppressionRange.enableComment === null ||
+        (suppressionRange.enableComment.end != null &&
+          suppressionRange.enableComment.end < fnNode.end))
+    ) {
+      suppressionsInScope.push(suppressionRange);
+    }
+
+    // The suppression wraps the function
+    if (
+      suppressionRange.disableComment.start < fnNode.start &&
+      // If there is no matching enable, the rest of the file has potential violations
+      (suppressionRange.enableComment === null ||
+        (suppressionRange.enableComment.end != null &&
+          suppressionRange.enableComment.end > fnNode.end))
+    ) {
+      suppressionsInScope.push(suppressionRange);
+    }
+  }
+  return suppressionsInScope;
+}
+
+export function findProgramSuppressions(
+  programComments: Array<t.Comment>,
+  ruleNames: Array<string> | null,
+  flowSuppressions: boolean,
+): Array<SuppressionRange> {
+  const suppressionRanges: Array<SuppressionRange> = [];
+  let disableComment: t.Comment | null = null;
+  let enableComment: t.Comment | null = null;
+  let source: SuppressionSource | null = null;
+
+  let disableNextLinePattern: RegExp | null = null;
+  let disablePattern: RegExp | null = null;
+  let enablePattern: RegExp | null = null;
+  if (ruleNames != null && ruleNames.length !== 0) {
+    const rulePattern = `(${ruleNames.join('|')})`;
+    disableNextLinePattern = new RegExp(
+      `eslint-disable-next-line ${rulePattern}`,
+    );
+    disablePattern = new RegExp(`eslint-disable ${rulePattern}`);
+    enablePattern = new RegExp(`eslint-enable ${rulePattern}`);
+  }
+
+  const flowSuppressionPattern = new RegExp(
+    '\\$(FlowFixMe\\w*|FlowExpectedError|FlowIssue)\\[react\\-rule',
+  );
+
+  for (const comment of programComments) {
+    if (comment.start == null || comment.end == null) {
+      continue;
+    }
+
+    if (
+      /*
+       * If we're already within a CommentBlock, we should not restart the range prematurely for a
+       * CommentLine within the block.
+       */
+      disableComment == null &&
+      disableNextLinePattern != null &&
+      disableNextLinePattern.test(comment.value)
+    ) {
+      disableComment = comment;
+      enableComment = comment;
+      source = 'Eslint';
+    }
+
+    if (
+      flowSuppressions &&
+      disableComment == null &&
+      flowSuppressionPattern.test(comment.value)
+    ) {
+      disableComment = comment;
+      enableComment = comment;
+      source = 'Flow';
+    }
+
+    if (disablePattern != null && disablePattern.test(comment.value)) {
+      disableComment = comment;
+      source = 'Eslint';
+    }
+
+    if (
+      enablePattern != null &&
+      enablePattern.test(comment.value) &&
+      source === 'Eslint'
+    ) {
+      enableComment = comment;
+    }
+
+    if (disableComment != null && source != null) {
+      suppressionRanges.push({
+        disableComment: disableComment,
+        enableComment: enableComment,
+        source,
+      });
+      disableComment = null;
+      enableComment = null;
+      source = null;
+    }
+  }
+  return suppressionRanges;
+}
+
+export function suppressionsToCompilerError(
+  suppressionRanges: Array<SuppressionRange>,
+): CompilerError {
+  CompilerError.invariant(suppressionRanges.length !== 0, {
+    reason: `Expected at least suppression comment source range`,
+    loc: GeneratedSource,
+  });
+  const error = new CompilerError();
+  for (const suppressionRange of suppressionRanges) {
+    if (
+      suppressionRange.disableComment.start == null ||
+      suppressionRange.disableComment.end == null
+    ) {
+      continue;
+    }
+    let reason, suggestion;
+    switch (suppressionRange.source) {
+      case 'Eslint':
+        reason =
+          'React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled';
+        suggestion =
+          'Remove the ESLint suppression and address the React error';
+        break;
+      case 'Flow':
+        reason =
+          'React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow';
+        suggestion = 'Remove the Flow suppression and address the React error';
+        break;
+      default:
+        assertExhaustive(
+          suppressionRange.source,
+          'Unhandled suppression source',
+        );
+    }
+    error.pushDiagnostic(
+      CompilerDiagnostic.create({
+        reason: reason,
+        description: `React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression \`${suppressionRange.disableComment.value.trim()}\``,
+        category: ErrorCategory.Suppression,
+        suggestions: [
+          {
+            description: suggestion,
+            range: [
+              suppressionRange.disableComment.start,
+              suppressionRange.disableComment.end,
+            ],
+            op: CompilerSuggestionOperation.Remove,
+          },
+        ],
+      }).withDetails({
+        kind: 'error',
+        loc: suppressionRange.disableComment.loc ?? null,
+        message: 'Found React rule suppression',
+      }),
+    );
+  }
+  return error;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/ValidateNoUntransformedReferences.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/ValidateNoUntransformedReferences.ts
new file mode 100644
index 00000000000..fab0865b54d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/ValidateNoUntransformedReferences.ts
@@ -0,0 +1,327 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/core';
+import * as t from '@babel/types';
+
+import {CompilerError, EnvironmentConfig, Logger} from '..';
+import {getOrInsertWith} from '../Utils/utils';
+import {Environment, GeneratedSource} from '../HIR';
+import {DEFAULT_EXPORT} from '../HIR/Environment';
+import {CompileProgramMetadata} from './Program';
+import {
+  CompilerDiagnostic,
+  CompilerDiagnosticOptions,
+  ErrorCategory,
+} from '../CompilerError';
+
+function throwInvalidReact(
+  options: CompilerDiagnosticOptions,
+  {logger, filename}: TraversalState,
+): never {
+  logger?.logEvent(filename, {
+    kind: 'CompileError',
+    fnLoc: null,
+    detail: new CompilerDiagnostic(options),
+  });
+  CompilerError.throwDiagnostic(options);
+}
+
+function isAutodepsSigil(
+  arg: NodePath<t.ArgumentPlaceholder | t.SpreadElement | t.Expression>,
+): boolean {
+  // Check for AUTODEPS identifier imported from React
+  if (arg.isIdentifier() && arg.node.name === 'AUTODEPS') {
+    const binding = arg.scope.getBinding(arg.node.name);
+    if (binding && binding.path.isImportSpecifier()) {
+      const importSpecifier = binding.path.node as t.ImportSpecifier;
+      if (importSpecifier.imported.type === 'Identifier') {
+        return (importSpecifier.imported as t.Identifier).name === 'AUTODEPS';
+      }
+    }
+    return false;
+  }
+
+  // Check for React.AUTODEPS member expression
+  if (arg.isMemberExpression() && !arg.node.computed) {
+    const object = arg.get('object');
+    const property = arg.get('property');
+
+    if (
+      object.isIdentifier() &&
+      object.node.name === 'React' &&
+      property.isIdentifier() &&
+      property.node.name === 'AUTODEPS'
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+function assertValidEffectImportReference(
+  autodepsIndex: number,
+  paths: Array<NodePath<t.Node>>,
+  context: TraversalState,
+): void {
+  for (const path of paths) {
+    const parent = path.parentPath;
+    if (parent != null && parent.isCallExpression()) {
+      const args = parent.get('arguments');
+      const maybeCalleeLoc = path.node.loc;
+      const hasInferredEffect =
+        maybeCalleeLoc != null &&
+        context.inferredEffectLocations.has(maybeCalleeLoc);
+      /**
+       * Error on effect calls that still have AUTODEPS in their args
+       */
+      const hasAutodepsArg = args.some(isAutodepsSigil);
+      if (hasAutodepsArg && !hasInferredEffect) {
+        const maybeErrorDiagnostic = matchCompilerDiagnostic(
+          path,
+          context.transformErrors,
+        );
+        /**
+         * Note that we cannot easily check the type of the first argument here,
+         * as it may have already been transformed by the compiler (and not
+         * memoized).
+         */
+        throwInvalidReact(
+          {
+            category: ErrorCategory.AutomaticEffectDependencies,
+            reason:
+              'Cannot infer dependencies of this effect. This will break your build!',
+            description:
+              'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics' +
+              (maybeErrorDiagnostic ? ` ${maybeErrorDiagnostic}` : ''),
+            details: [
+              {
+                kind: 'error',
+                message: 'Cannot infer dependencies',
+                loc: parent.node.loc ?? GeneratedSource,
+              },
+            ],
+          },
+          context,
+        );
+      }
+    }
+  }
+}
+
+function assertValidFireImportReference(
+  paths: Array<NodePath<t.Node>>,
+  context: TraversalState,
+): void {
+  if (paths.length > 0) {
+    const maybeErrorDiagnostic = matchCompilerDiagnostic(
+      paths[0],
+      context.transformErrors,
+    );
+    throwInvalidReact(
+      {
+        category: ErrorCategory.Fire,
+        reason: '[Fire] Untransformed reference to compiler-required feature.',
+        description:
+          'Either remove this `fire` call or ensure it is successfully transformed by the compiler' +
+          (maybeErrorDiagnostic != null ? ` ${maybeErrorDiagnostic}` : ''),
+        details: [
+          {
+            kind: 'error',
+            message: 'Untransformed `fire` call',
+            loc: paths[0].node.loc ?? GeneratedSource,
+          },
+        ],
+      },
+      context,
+    );
+  }
+}
+export default function validateNoUntransformedReferences(
+  path: NodePath<t.Program>,
+  filename: string | null,
+  logger: Logger | null,
+  env: EnvironmentConfig,
+  compileResult: CompileProgramMetadata | null,
+): void {
+  const moduleLoadChecks = new Map<
+    string,
+    Map<string, CheckInvalidReferenceFn>
+  >();
+  if (env.enableFire) {
+    /**
+     * Error on any untransformed references to `fire` (e.g. including non-call
+     * expressions)
+     */
+    for (const module of Environment.knownReactModules) {
+      const react = getOrInsertWith(moduleLoadChecks, module, () => new Map());
+      react.set('fire', assertValidFireImportReference);
+    }
+  }
+  if (env.inferEffectDependencies) {
+    for (const {
+      function: {source, importSpecifierName},
+      autodepsIndex,
+    } of env.inferEffectDependencies) {
+      const module = getOrInsertWith(moduleLoadChecks, source, () => new Map());
+      module.set(
+        importSpecifierName,
+        assertValidEffectImportReference.bind(null, autodepsIndex),
+      );
+    }
+  }
+  if (moduleLoadChecks.size > 0) {
+    transformProgram(path, moduleLoadChecks, filename, logger, compileResult);
+  }
+}
+
+type TraversalState = {
+  shouldInvalidateScopes: boolean;
+  program: NodePath<t.Program>;
+  logger: Logger | null;
+  filename: string | null;
+  transformErrors: Array<{fn: NodePath<t.Node>; error: CompilerError}>;
+  inferredEffectLocations: Set<t.SourceLocation>;
+};
+type CheckInvalidReferenceFn = (
+  paths: Array<NodePath<t.Node>>,
+  context: TraversalState,
+) => void;
+
+function validateImportSpecifier(
+  specifier: NodePath<t.ImportSpecifier>,
+  importSpecifierChecks: Map<string, CheckInvalidReferenceFn>,
+  state: TraversalState,
+): void {
+  const imported = specifier.get('imported');
+  const specifierName: string =
+    imported.node.type === 'Identifier'
+      ? imported.node.name
+      : imported.node.value;
+  const checkFn = importSpecifierChecks.get(specifierName);
+  if (checkFn == null) {
+    return;
+  }
+  if (state.shouldInvalidateScopes) {
+    state.shouldInvalidateScopes = false;
+    state.program.scope.crawl();
+  }
+
+  const local = specifier.get('local');
+  const binding = local.scope.getBinding(local.node.name);
+  CompilerError.invariant(binding != null, {
+    reason: 'Expected binding to be found for import specifier',
+    loc: local.node.loc ?? GeneratedSource,
+  });
+  checkFn(binding.referencePaths, state);
+}
+
+function validateNamespacedImport(
+  specifier: NodePath<t.ImportNamespaceSpecifier | t.ImportDefaultSpecifier>,
+  importSpecifierChecks: Map<string, CheckInvalidReferenceFn>,
+  state: TraversalState,
+): void {
+  if (state.shouldInvalidateScopes) {
+    state.shouldInvalidateScopes = false;
+    state.program.scope.crawl();
+  }
+  const local = specifier.get('local');
+  const binding = local.scope.getBinding(local.node.name);
+  const defaultCheckFn = importSpecifierChecks.get(DEFAULT_EXPORT);
+
+  CompilerError.invariant(binding != null, {
+    reason: 'Expected binding to be found for import specifier',
+    loc: local.node.loc ?? GeneratedSource,
+  });
+  const filteredReferences = new Map<
+    CheckInvalidReferenceFn,
+    Array<NodePath<t.Node>>
+  >();
+  for (const reference of binding.referencePaths) {
+    if (defaultCheckFn != null) {
+      getOrInsertWith(filteredReferences, defaultCheckFn, () => []).push(
+        reference,
+      );
+    }
+    const parent = reference.parentPath;
+    if (
+      parent != null &&
+      parent.isMemberExpression() &&
+      parent.get('object') === reference
+    ) {
+      if (parent.node.computed || parent.node.property.type !== 'Identifier') {
+        continue;
+      }
+      const checkFn = importSpecifierChecks.get(parent.node.property.name);
+      if (checkFn != null) {
+        getOrInsertWith(filteredReferences, checkFn, () => []).push(parent);
+      }
+    }
+  }
+
+  for (const [checkFn, references] of filteredReferences) {
+    checkFn(references, state);
+  }
+}
+function transformProgram(
+  path: NodePath<t.Program>,
+
+  moduleLoadChecks: Map<string, Map<string, CheckInvalidReferenceFn>>,
+  filename: string | null,
+  logger: Logger | null,
+  compileResult: CompileProgramMetadata | null,
+): void {
+  const traversalState: TraversalState = {
+    shouldInvalidateScopes: true,
+    program: path,
+    filename,
+    logger,
+    transformErrors: compileResult?.retryErrors ?? [],
+    inferredEffectLocations:
+      compileResult?.inferredEffectLocations ?? new Set(),
+  };
+  path.traverse({
+    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
+      const importSpecifierChecks = moduleLoadChecks.get(
+        path.node.source.value,
+      );
+      if (importSpecifierChecks == null) {
+        return;
+      }
+      const specifiers = path.get('specifiers');
+      for (const specifier of specifiers) {
+        if (specifier.isImportSpecifier()) {
+          validateImportSpecifier(
+            specifier,
+            importSpecifierChecks,
+            traversalState,
+          );
+        } else {
+          validateNamespacedImport(
+            specifier as NodePath<
+              t.ImportNamespaceSpecifier | t.ImportDefaultSpecifier
+            >,
+            importSpecifierChecks,
+            traversalState,
+          );
+        }
+      }
+    },
+  });
+}
+
+function matchCompilerDiagnostic(
+  badReference: NodePath<t.Node>,
+  transformErrors: Array<{fn: NodePath<t.Node>; error: CompilerError}>,
+): string | null {
+  for (const {fn, error} of transformErrors) {
+    if (fn.isAncestor(badReference)) {
+      return error.toString();
+    }
+  }
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/index.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/index.ts
new file mode 100644
index 00000000000..1180f7c985e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './Gating';
+export * from './Imports';
+export * from './Options';
+export * from './Pipeline';
+export * from './Program';
+export * from './Suppression';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Flood/FlowTypes.ts b/compiler/packages/babel-plugin-react-compiler/src/Flood/FlowTypes.ts
new file mode 100644
index 00000000000..c63feb830fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Flood/FlowTypes.ts
@@ -0,0 +1,752 @@
+/**
+ * TypeScript definitions for Flow type JSON representations
+ * Based on the output of /data/sandcastle/boxes/fbsource/fbcode/flow/src/typing/convertTypes.ml
+ */
+
+// Base type for all Flow types with a kind field
+export interface BaseFlowType {
+  kind: string;
+}
+
+// Type for representing polarity
+export type Polarity = 'positive' | 'negative' | 'neutral';
+
+// Type for representing a name that might be null
+export type OptionalName = string | null;
+
+// Open type
+export interface OpenType extends BaseFlowType {
+  kind: 'Open';
+}
+
+// Def type
+export interface DefType extends BaseFlowType {
+  kind: 'Def';
+  def: DefT;
+}
+
+// Eval type
+export interface EvalType extends BaseFlowType {
+  kind: 'Eval';
+  type: FlowType;
+  destructor: Destructor;
+}
+
+// Generic type
+export interface GenericType extends BaseFlowType {
+  kind: 'Generic';
+  name: string;
+  bound: FlowType;
+  no_infer: boolean;
+}
+
+// ThisInstance type
+export interface ThisInstanceType extends BaseFlowType {
+  kind: 'ThisInstance';
+  instance: InstanceT;
+  is_this: boolean;
+  name: string;
+}
+
+// ThisTypeApp type
+export interface ThisTypeAppType extends BaseFlowType {
+  kind: 'ThisTypeApp';
+  t1: FlowType;
+  t2: FlowType;
+  t_list?: Array<FlowType>;
+}
+
+// TypeApp type
+export interface TypeAppType extends BaseFlowType {
+  kind: 'TypeApp';
+  type: FlowType;
+  targs: Array<FlowType>;
+  from_value: boolean;
+  use_desc: boolean;
+}
+
+// FunProto type
+export interface FunProtoType extends BaseFlowType {
+  kind: 'FunProto';
+}
+
+// ObjProto type
+export interface ObjProtoType extends BaseFlowType {
+  kind: 'ObjProto';
+}
+
+// NullProto type
+export interface NullProtoType extends BaseFlowType {
+  kind: 'NullProto';
+}
+
+// FunProtoBind type
+export interface FunProtoBindType extends BaseFlowType {
+  kind: 'FunProtoBind';
+}
+
+// Intersection type
+export interface IntersectionType extends BaseFlowType {
+  kind: 'Intersection';
+  members: Array<FlowType>;
+}
+
+// Union type
+export interface UnionType extends BaseFlowType {
+  kind: 'Union';
+  members: Array<FlowType>;
+}
+
+// Maybe type
+export interface MaybeType extends BaseFlowType {
+  kind: 'Maybe';
+  type: FlowType;
+}
+
+// Optional type
+export interface OptionalType extends BaseFlowType {
+  kind: 'Optional';
+  type: FlowType;
+  use_desc: boolean;
+}
+
+// Keys type
+export interface KeysType extends BaseFlowType {
+  kind: 'Keys';
+  type: FlowType;
+}
+
+// Annot type
+export interface AnnotType extends BaseFlowType {
+  kind: 'Annot';
+  type: FlowType;
+  use_desc: boolean;
+}
+
+// Opaque type
+export interface OpaqueType extends BaseFlowType {
+  kind: 'Opaque';
+  opaquetype: {
+    opaque_id: string;
+    underlying_t: FlowType | null;
+    super_t: FlowType | null;
+    opaque_type_args: Array<{
+      name: string;
+      type: FlowType;
+      polarity: Polarity;
+    }>;
+    opaque_name: string;
+  };
+}
+
+// Namespace type
+export interface NamespaceType extends BaseFlowType {
+  kind: 'Namespace';
+  namespace_symbol: {
+    symbol: string;
+  };
+  values_type: FlowType;
+  types_tmap: PropertyMap;
+}
+
+// Any type
+export interface AnyType extends BaseFlowType {
+  kind: 'Any';
+}
+
+// StrUtil type
+export interface StrUtilType extends BaseFlowType {
+  kind: 'StrUtil';
+  op: 'StrPrefix' | 'StrSuffix';
+  prefix?: string;
+  suffix?: string;
+  remainder?: FlowType;
+}
+
+// TypeParam definition
+export interface TypeParam {
+  name: string;
+  bound: FlowType;
+  polarity: Polarity;
+  default: FlowType | null;
+}
+
+// EnumInfo types
+export type EnumInfo = ConcreteEnum | AbstractEnum;
+
+export interface ConcreteEnum {
+  kind: 'ConcreteEnum';
+  enum_name: string;
+  enum_id: string;
+  members: Array<string>;
+  representation_t: FlowType;
+  has_unknown_members: boolean;
+}
+
+export interface AbstractEnum {
+  kind: 'AbstractEnum';
+  representation_t: FlowType;
+}
+
+// CanonicalRendersForm types
+export type CanonicalRendersForm =
+  | InstrinsicRenders
+  | NominalRenders
+  | StructuralRenders
+  | DefaultRenders;
+
+export interface InstrinsicRenders {
+  kind: 'InstrinsicRenders';
+  name: string;
+}
+
+export interface NominalRenders {
+  kind: 'NominalRenders';
+  renders_id: string;
+  renders_name: string;
+  renders_super: FlowType;
+}
+
+export interface StructuralRenders {
+  kind: 'StructuralRenders';
+  renders_variant: 'RendersNormal' | 'RendersMaybe' | 'RendersStar';
+  renders_structural_type: FlowType;
+}
+
+export interface DefaultRenders {
+  kind: 'DefaultRenders';
+}
+
+// InstanceT definition
+export interface InstanceT {
+  inst: InstType;
+  static: FlowType;
+  super: FlowType;
+  implements: Array<FlowType>;
+}
+
+// InstType definition
+export interface InstType {
+  class_name: string | null;
+  class_id: string;
+  type_args: Array<{
+    name: string;
+    type: FlowType;
+    polarity: Polarity;
+  }>;
+  own_props: PropertyMap;
+  proto_props: PropertyMap;
+  call_t: null | {
+    id: number;
+    call: FlowType;
+  };
+}
+
+// DefT types
+export type DefT =
+  | NumGeneralType
+  | StrGeneralType
+  | BoolGeneralType
+  | BigIntGeneralType
+  | EmptyType
+  | MixedType
+  | NullType
+  | VoidType
+  | SymbolType
+  | FunType
+  | ObjType
+  | ArrType
+  | ClassType
+  | InstanceType
+  | SingletonStrType
+  | NumericStrKeyType
+  | SingletonNumType
+  | SingletonBoolType
+  | SingletonBigIntType
+  | TypeType
+  | PolyType
+  | ReactAbstractComponentType
+  | RendersType
+  | EnumValueType
+  | EnumObjectType;
+
+export interface NumGeneralType extends BaseFlowType {
+  kind: 'NumGeneral';
+}
+
+export interface StrGeneralType extends BaseFlowType {
+  kind: 'StrGeneral';
+}
+
+export interface BoolGeneralType extends BaseFlowType {
+  kind: 'BoolGeneral';
+}
+
+export interface BigIntGeneralType extends BaseFlowType {
+  kind: 'BigIntGeneral';
+}
+
+export interface EmptyType extends BaseFlowType {
+  kind: 'Empty';
+}
+
+export interface MixedType extends BaseFlowType {
+  kind: 'Mixed';
+}
+
+export interface NullType extends BaseFlowType {
+  kind: 'Null';
+}
+
+export interface VoidType extends BaseFlowType {
+  kind: 'Void';
+}
+
+export interface SymbolType extends BaseFlowType {
+  kind: 'Symbol';
+}
+
+export interface FunType extends BaseFlowType {
+  kind: 'Fun';
+  static: FlowType;
+  funtype: FunTypeObj;
+}
+
+export interface ObjType extends BaseFlowType {
+  kind: 'Obj';
+  objtype: ObjTypeObj;
+}
+
+export interface ArrType extends BaseFlowType {
+  kind: 'Arr';
+  arrtype: ArrTypeObj;
+}
+
+export interface ClassType extends BaseFlowType {
+  kind: 'Class';
+  type: FlowType;
+}
+
+export interface InstanceType extends BaseFlowType {
+  kind: 'Instance';
+  instance: InstanceT;
+}
+
+export interface SingletonStrType extends BaseFlowType {
+  kind: 'SingletonStr';
+  from_annot: boolean;
+  value: string;
+}
+
+export interface NumericStrKeyType extends BaseFlowType {
+  kind: 'NumericStrKey';
+  number: string;
+  string: string;
+}
+
+export interface SingletonNumType extends BaseFlowType {
+  kind: 'SingletonNum';
+  from_annot: boolean;
+  number: string;
+  string: string;
+}
+
+export interface SingletonBoolType extends BaseFlowType {
+  kind: 'SingletonBool';
+  from_annot: boolean;
+  value: boolean;
+}
+
+export interface SingletonBigIntType extends BaseFlowType {
+  kind: 'SingletonBigInt';
+  from_annot: boolean;
+  value: string;
+}
+
+export interface TypeType extends BaseFlowType {
+  kind: 'Type';
+  type_kind: TypeTKind;
+  type: FlowType;
+}
+
+export type TypeTKind =
+  | 'TypeAliasKind'
+  | 'TypeParamKind'
+  | 'OpaqueKind'
+  | 'ImportTypeofKind'
+  | 'ImportClassKind'
+  | 'ImportEnumKind'
+  | 'InstanceKind'
+  | 'RenderTypeKind';
+
+export interface PolyType extends BaseFlowType {
+  kind: 'Poly';
+  tparams: Array<TypeParam>;
+  t_out: FlowType;
+  id: string;
+}
+
+export interface ReactAbstractComponentType extends BaseFlowType {
+  kind: 'ReactAbstractComponent';
+  config: FlowType;
+  renders: FlowType;
+  instance: ComponentInstance;
+  component_kind: ComponentKind;
+}
+
+export type ComponentInstance =
+  | {kind: 'RefSetterProp'; type: FlowType}
+  | {kind: 'Omitted'};
+
+export type ComponentKind =
+  | {kind: 'Structural'}
+  | {kind: 'Nominal'; id: string; name: string; types: Array<FlowType> | null};
+
+export interface RendersType extends BaseFlowType {
+  kind: 'Renders';
+  form: CanonicalRendersForm;
+}
+
+export interface EnumValueType extends BaseFlowType {
+  kind: 'EnumValue';
+  enum_info: EnumInfo;
+}
+
+export interface EnumObjectType extends BaseFlowType {
+  kind: 'EnumObject';
+  enum_value_t: FlowType;
+  enum_info: EnumInfo;
+}
+
+// ObjKind types
+export type ObjKind =
+  | {kind: 'Exact'}
+  | {kind: 'Inexact'}
+  | {kind: 'Indexed'; dicttype: DictType};
+
+// DictType definition
+export interface DictType {
+  dict_name: string | null;
+  key: FlowType;
+  value: FlowType;
+  dict_polarity: Polarity;
+}
+
+// ArrType types
+export type ArrTypeObj = ArrayAT | TupleAT | ROArrayAT;
+
+export interface ArrayAT {
+  kind: 'ArrayAT';
+  elem_t: FlowType;
+}
+
+export interface TupleAT {
+  kind: 'TupleAT';
+  elem_t: FlowType;
+  elements: Array<TupleElement>;
+  min_arity: number;
+  max_arity: number;
+  inexact: boolean;
+}
+
+export interface ROArrayAT {
+  kind: 'ROArrayAT';
+  elem_t: FlowType;
+}
+
+// TupleElement definition
+export interface TupleElement {
+  name: string | null;
+  t: FlowType;
+  polarity: Polarity;
+  optional: boolean;
+}
+
+// Flags definition
+export interface Flags {
+  obj_kind: ObjKind;
+}
+
+// Property types
+export type Property =
+  | FieldProperty
+  | GetProperty
+  | SetProperty
+  | GetSetProperty
+  | MethodProperty;
+
+export interface FieldProperty {
+  kind: 'Field';
+  type: FlowType;
+  polarity: Polarity;
+}
+
+export interface GetProperty {
+  kind: 'Get';
+  type: FlowType;
+}
+
+export interface SetProperty {
+  kind: 'Set';
+  type: FlowType;
+}
+
+export interface GetSetProperty {
+  kind: 'GetSet';
+  get_type: FlowType;
+  set_type: FlowType;
+}
+
+export interface MethodProperty {
+  kind: 'Method';
+  type: FlowType;
+}
+
+// PropertyMap definition
+export interface PropertyMap {
+  [key: string]: Property; // For other properties in the map
+}
+
+// ObjType definition
+export interface ObjTypeObj {
+  flags: Flags;
+  props: PropertyMap;
+  proto_t: FlowType;
+  call_t: number | null;
+}
+
+// FunType definition
+export interface FunTypeObj {
+  this_t: {
+    type: FlowType;
+    status: ThisStatus;
+  };
+  params: Array<{
+    name: string | null;
+    type: FlowType;
+  }>;
+  rest_param: null | {
+    name: string | null;
+    type: FlowType;
+  };
+  return_t: FlowType;
+  type_guard: null | {
+    inferred: boolean;
+    param_name: string;
+    type_guard: FlowType;
+    one_sided: boolean;
+  };
+  effect: Effect;
+}
+
+// ThisStatus types
+export type ThisStatus =
+  | {kind: 'This_Method'; unbound: boolean}
+  | {kind: 'This_Function'};
+
+// Effect types
+export type Effect =
+  | {kind: 'HookDecl'; id: string}
+  | {kind: 'HookAnnot'}
+  | {kind: 'ArbitraryEffect'}
+  | {kind: 'AnyEffect'};
+
+// Destructor types
+export type Destructor =
+  | NonMaybeTypeDestructor
+  | PropertyTypeDestructor
+  | ElementTypeDestructor
+  | OptionalIndexedAccessNonMaybeTypeDestructor
+  | OptionalIndexedAccessResultTypeDestructor
+  | ExactTypeDestructor
+  | ReadOnlyTypeDestructor
+  | PartialTypeDestructor
+  | RequiredTypeDestructor
+  | SpreadTypeDestructor
+  | SpreadTupleTypeDestructor
+  | RestTypeDestructor
+  | ValuesTypeDestructor
+  | ConditionalTypeDestructor
+  | TypeMapDestructor
+  | ReactElementPropsTypeDestructor
+  | ReactElementConfigTypeDestructor
+  | ReactCheckComponentConfigDestructor
+  | ReactDRODestructor
+  | MakeHooklikeDestructor
+  | MappedTypeDestructor
+  | EnumTypeDestructor;
+
+export interface NonMaybeTypeDestructor {
+  kind: 'NonMaybeType';
+}
+
+export interface PropertyTypeDestructor {
+  kind: 'PropertyType';
+  name: string;
+}
+
+export interface ElementTypeDestructor {
+  kind: 'ElementType';
+  index_type: FlowType;
+}
+
+export interface OptionalIndexedAccessNonMaybeTypeDestructor {
+  kind: 'OptionalIndexedAccessNonMaybeType';
+  index: OptionalIndexedAccessIndex;
+}
+
+export type OptionalIndexedAccessIndex =
+  | {kind: 'StrLitIndex'; name: string}
+  | {kind: 'TypeIndex'; type: FlowType};
+
+export interface OptionalIndexedAccessResultTypeDestructor {
+  kind: 'OptionalIndexedAccessResultType';
+}
+
+export interface ExactTypeDestructor {
+  kind: 'ExactType';
+}
+
+export interface ReadOnlyTypeDestructor {
+  kind: 'ReadOnlyType';
+}
+
+export interface PartialTypeDestructor {
+  kind: 'PartialType';
+}
+
+export interface RequiredTypeDestructor {
+  kind: 'RequiredType';
+}
+
+export interface SpreadTypeDestructor {
+  kind: 'SpreadType';
+  target: SpreadTarget;
+  operands: Array<SpreadOperand>;
+  operand_slice: Slice | null;
+}
+
+export type SpreadTarget =
+  | {kind: 'Value'; make_seal: 'Sealed' | 'Frozen' | 'As_Const'}
+  | {kind: 'Annot'; make_exact: boolean};
+
+export type SpreadOperand = {kind: 'Type'; type: FlowType} | Slice;
+
+export interface Slice {
+  kind: 'Slice';
+  prop_map: PropertyMap;
+  generics: Array<string>;
+  dict: DictType | null;
+  reachable_targs: Array<{
+    type: FlowType;
+    polarity: Polarity;
+  }>;
+}
+
+export interface SpreadTupleTypeDestructor {
+  kind: 'SpreadTupleType';
+  inexact: boolean;
+  resolved_rev: string;
+  unresolved: string;
+}
+
+export interface RestTypeDestructor {
+  kind: 'RestType';
+  merge_mode: RestMergeMode;
+  type: FlowType;
+}
+
+export type RestMergeMode =
+  | {kind: 'SpreadReversal'}
+  | {kind: 'ReactConfigMerge'; polarity: Polarity}
+  | {kind: 'Omit'};
+
+export interface ValuesTypeDestructor {
+  kind: 'ValuesType';
+}
+
+export interface ConditionalTypeDestructor {
+  kind: 'ConditionalType';
+  distributive_tparam_name: string | null;
+  infer_tparams: string;
+  extends_t: FlowType;
+  true_t: FlowType;
+  false_t: FlowType;
+}
+
+export interface TypeMapDestructor {
+  kind: 'ObjectKeyMirror';
+}
+
+export interface ReactElementPropsTypeDestructor {
+  kind: 'ReactElementPropsType';
+}
+
+export interface ReactElementConfigTypeDestructor {
+  kind: 'ReactElementConfigType';
+}
+
+export interface ReactCheckComponentConfigDestructor {
+  kind: 'ReactCheckComponentConfig';
+  props: {
+    [key: string]: Property;
+  };
+}
+
+export interface ReactDRODestructor {
+  kind: 'ReactDRO';
+  dro_type:
+    | 'HookReturn'
+    | 'HookArg'
+    | 'Props'
+    | 'ImmutableAnnot'
+    | 'DebugAnnot';
+}
+
+export interface MakeHooklikeDestructor {
+  kind: 'MakeHooklike';
+}
+
+export interface MappedTypeDestructor {
+  kind: 'MappedType';
+  homomorphic: Homomorphic;
+  distributive_tparam_name: string | null;
+  property_type: FlowType;
+  mapped_type_flags: {
+    variance: Polarity;
+    optional: 'MakeOptional' | 'RemoveOptional' | 'KeepOptionality';
+  };
+}
+
+export type Homomorphic =
+  | {kind: 'Homomorphic'}
+  | {kind: 'Unspecialized'}
+  | {kind: 'SemiHomomorphic'; type: FlowType};
+
+export interface EnumTypeDestructor {
+  kind: 'EnumType';
+}
+
+// Union of all possible Flow types
+export type FlowType =
+  | OpenType
+  | DefType
+  | EvalType
+  | GenericType
+  | ThisInstanceType
+  | ThisTypeAppType
+  | TypeAppType
+  | FunProtoType
+  | ObjProtoType
+  | NullProtoType
+  | FunProtoBindType
+  | IntersectionType
+  | UnionType
+  | MaybeType
+  | OptionalType
+  | KeysType
+  | AnnotType
+  | OpaqueType
+  | NamespaceType
+  | AnyType
+  | StrUtilType;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Flood/TypeErrors.ts b/compiler/packages/babel-plugin-react-compiler/src/Flood/TypeErrors.ts
new file mode 100644
index 00000000000..fa3f551ff5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Flood/TypeErrors.ts
@@ -0,0 +1,131 @@
+import {CompilerError, SourceLocation} from '..';
+import {
+  ConcreteType,
+  printConcrete,
+  printType,
+  StructuralValue,
+  Type,
+  VariableId,
+} from './Types';
+
+export function unsupportedLanguageFeature(
+  desc: string,
+  loc: SourceLocation,
+): never {
+  CompilerError.throwInvalidJS({
+    reason: `Typedchecker does not currently support language feature: ${desc}`,
+    loc,
+  });
+}
+
+export type UnificationError =
+  | {
+      kind: 'TypeUnification';
+      left: ConcreteType<Type>;
+      right: ConcreteType<Type>;
+    }
+  | {
+      kind: 'StructuralUnification';
+      left: StructuralValue;
+      right: ConcreteType<Type>;
+    };
+
+function printUnificationError(err: UnificationError): string {
+  if (err.kind === 'TypeUnification') {
+    return `${printConcrete(err.left, printType)} is incompatible with ${printConcrete(err.right, printType)}`;
+  } else {
+    return `structural ${err.left.kind} is incompatible with ${printConcrete(err.right, printType)}`;
+  }
+}
+
+export function raiseUnificationErrors(
+  errs: null | Array<UnificationError>,
+  loc: SourceLocation,
+): void {
+  if (errs != null) {
+    if (errs.length === 0) {
+      CompilerError.invariant(false, {
+        reason: 'Should not have array of zero errors',
+        loc,
+      });
+    } else if (errs.length === 1) {
+      CompilerError.throwInvalidJS({
+        reason: `Unable to unify types because ${printUnificationError(errs[0])}`,
+        loc,
+      });
+    } else {
+      const messages = errs
+        .map(err => `\t* ${printUnificationError(err)}`)
+        .join('\n');
+      CompilerError.throwInvalidJS({
+        reason: `Unable to unify types because:\n${messages}`,
+        loc,
+      });
+    }
+  }
+}
+
+export function unresolvableTypeVariable(
+  id: VariableId,
+  loc: SourceLocation,
+): never {
+  CompilerError.throwInvalidJS({
+    reason: `Unable to resolve free variable ${id} to a concrete type`,
+    loc,
+  });
+}
+
+export function cannotAddVoid(explicit: boolean, loc: SourceLocation): never {
+  if (explicit) {
+    CompilerError.throwInvalidJS({
+      reason: `Undefined is not a valid operand of \`+\``,
+      loc,
+    });
+  } else {
+    CompilerError.throwInvalidJS({
+      reason: `Value may be undefined, which is not a valid operand of \`+\``,
+      loc,
+    });
+  }
+}
+
+export function unsupportedTypeAnnotation(
+  desc: string,
+  loc: SourceLocation,
+): never {
+  CompilerError.throwInvalidJS({
+    reason: `Typedchecker does not currently support type annotation: ${desc}`,
+    loc,
+  });
+}
+
+export function checkTypeArgumentArity(
+  desc: string,
+  expected: number,
+  actual: number,
+  loc: SourceLocation,
+): void {
+  if (expected !== actual) {
+    CompilerError.throwInvalidJS({
+      reason: `Expected ${desc} to have ${expected} type parameters, got ${actual}`,
+      loc,
+    });
+  }
+}
+
+export function notAFunction(desc: string, loc: SourceLocation): void {
+  CompilerError.throwInvalidJS({
+    reason: `Cannot call ${desc} because it is not a function`,
+    loc,
+  });
+}
+
+export function notAPolymorphicFunction(
+  desc: string,
+  loc: SourceLocation,
+): void {
+  CompilerError.throwInvalidJS({
+    reason: `Cannot call ${desc} with type arguments because it is not a polymorphic function`,
+    loc,
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Flood/TypeUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Flood/TypeUtils.ts
new file mode 100644
index 00000000000..0a514f090d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Flood/TypeUtils.ts
@@ -0,0 +1,312 @@
+import {GeneratedSource} from '../HIR';
+import {assertExhaustive} from '../Utils/utils';
+import {unsupportedLanguageFeature} from './TypeErrors';
+import {
+  ConcreteType,
+  ResolvedType,
+  TypeParameter,
+  TypeParameterId,
+  DEBUG,
+  printConcrete,
+  printType,
+} from './Types';
+
+export function substitute(
+  type: ConcreteType<ResolvedType>,
+  typeParameters: Array<TypeParameter<ResolvedType>>,
+  typeArguments: Array<ResolvedType>,
+): ResolvedType {
+  const substMap = new Map<TypeParameterId, ResolvedType>();
+  for (let i = 0; i < typeParameters.length; i++) {
+    // TODO: Length checks to make sure type params match up with args
+    const typeParameter = typeParameters[i];
+    const typeArgument = typeArguments[i];
+    substMap.set(typeParameter.id, typeArgument);
+  }
+  const substitutionFunction = (t: ResolvedType): ResolvedType => {
+    // TODO: We really want a stateful mapper or visitor here so that we can model nested polymorphic types
+    if (t.type.kind === 'Generic' && substMap.has(t.type.id)) {
+      const substitutedType = substMap.get(t.type.id)!;
+      return substitutedType;
+    }
+
+    return {
+      kind: 'Concrete',
+      type: mapType(substitutionFunction, t.type),
+      platform: t.platform,
+    };
+  };
+
+  const substituted = mapType(substitutionFunction, type);
+
+  if (DEBUG) {
+    let substs = '';
+    for (let i = 0; i < typeParameters.length; i++) {
+      const typeParameter = typeParameters[i];
+      const typeArgument = typeArguments[i];
+      substs += `[${typeParameter.name}${typeParameter.id} := ${printType(typeArgument)}]`;
+    }
+    console.log(
+      `${printConcrete(type, printType)}${substs} = ${printConcrete(substituted, printType)}`,
+    );
+  }
+
+  return {kind: 'Concrete', type: substituted, platform: /* TODO */ 'shared'};
+}
+
+export function mapType<T, U>(
+  f: (t: T) => U,
+  type: ConcreteType<T>,
+): ConcreteType<U> {
+  switch (type.kind) {
+    case 'Mixed':
+    case 'Number':
+    case 'String':
+    case 'Boolean':
+    case 'Void':
+      return type;
+
+    case 'Nullable':
+      return {
+        kind: 'Nullable',
+        type: f(type.type),
+      };
+
+    case 'Array':
+      return {
+        kind: 'Array',
+        element: f(type.element),
+      };
+
+    case 'Set':
+      return {
+        kind: 'Set',
+        element: f(type.element),
+      };
+
+    case 'Map':
+      return {
+        kind: 'Map',
+        key: f(type.key),
+        value: f(type.value),
+      };
+
+    case 'Function':
+      return {
+        kind: 'Function',
+        typeParameters:
+          type.typeParameters?.map(param => ({
+            id: param.id,
+            name: param.name,
+            bound: f(param.bound),
+          })) ?? null,
+        params: type.params.map(f),
+        returnType: f(type.returnType),
+      };
+
+    case 'Component': {
+      return {
+        kind: 'Component',
+        children: type.children != null ? f(type.children) : null,
+        props: new Map([...type.props.entries()].map(([k, v]) => [k, f(v)])),
+      };
+    }
+
+    case 'Generic':
+      return {
+        kind: 'Generic',
+        id: type.id,
+        bound: f(type.bound),
+      };
+
+    case 'Object':
+      return type;
+
+    case 'Tuple':
+      return {
+        kind: 'Tuple',
+        id: type.id,
+        members: type.members.map(f),
+      };
+
+    case 'Structural':
+      return type;
+
+    case 'Enum':
+    case 'Union':
+    case 'Instance':
+      unsupportedLanguageFeature(type.kind, GeneratedSource);
+
+    default:
+      assertExhaustive(type, 'Unknown type kind');
+  }
+}
+
+export function diff<R, T>(
+  a: ConcreteType<T>,
+  b: ConcreteType<T>,
+  onChild: (a: T, b: T) => R,
+  onChildMismatch: (child: R, cur: R) => R,
+  onMismatch: (a: ConcreteType<T>, b: ConcreteType<T>, cur: R) => R,
+  init: R,
+): R {
+  let errors = init;
+
+  // Check if kinds match
+  if (a.kind !== b.kind) {
+    errors = onMismatch(a, b, errors);
+    return errors;
+  }
+
+  // Based on kind, check other properties
+  switch (a.kind) {
+    case 'Mixed':
+    case 'Number':
+    case 'String':
+    case 'Boolean':
+    case 'Void':
+      // Simple types, no further checks needed
+      break;
+
+    case 'Nullable':
+      // Check the nested type
+      errors = onChildMismatch(onChild(a.type, (b as typeof a).type), errors);
+      break;
+
+    case 'Array':
+    case 'Set':
+      // Check the element type
+      errors = onChildMismatch(
+        onChild(a.element, (b as typeof a).element),
+        errors,
+      );
+      break;
+
+    case 'Map':
+      // Check both key and value types
+      errors = onChildMismatch(onChild(a.key, (b as typeof a).key), errors);
+      errors = onChildMismatch(onChild(a.value, (b as typeof a).value), errors);
+      break;
+
+    case 'Function': {
+      const bFunc = b as typeof a;
+
+      // Check type parameters
+      if ((a.typeParameters == null) !== (bFunc.typeParameters == null)) {
+        errors = onMismatch(a, b, errors);
+      }
+
+      if (a.typeParameters != null && bFunc.typeParameters != null) {
+        if (a.typeParameters.length !== bFunc.typeParameters.length) {
+          errors = onMismatch(a, b, errors);
+        }
+
+        // Type parameters are just numbers, so we can compare them directly
+        for (let i = 0; i < a.typeParameters.length; i++) {
+          if (a.typeParameters[i] !== bFunc.typeParameters[i]) {
+            errors = onMismatch(a, b, errors);
+          }
+        }
+      }
+
+      // Check parameters
+      if (a.params.length !== bFunc.params.length) {
+        errors = onMismatch(a, b, errors);
+      }
+
+      for (let i = 0; i < a.params.length; i++) {
+        errors = onChildMismatch(onChild(a.params[i], bFunc.params[i]), errors);
+      }
+
+      // Check return type
+      errors = onChildMismatch(onChild(a.returnType, bFunc.returnType), errors);
+      break;
+    }
+
+    case 'Component': {
+      const bComp = b as typeof a;
+
+      // Check children
+      if (a.children !== bComp.children) {
+        errors = onMismatch(a, b, errors);
+      }
+
+      // Check props
+      if (a.props.size !== bComp.props.size) {
+        errors = onMismatch(a, b, errors);
+      }
+
+      for (const [k, v] of a.props) {
+        const bProp = bComp.props.get(k);
+        if (bProp == null) {
+          errors = onMismatch(a, b, errors);
+        } else {
+          errors = onChildMismatch(onChild(v, bProp), errors);
+        }
+      }
+
+      break;
+    }
+
+    case 'Generic': {
+      // Check that the type parameter IDs match
+      if (a.id !== (b as typeof a).id) {
+        errors = onMismatch(a, b, errors);
+      }
+      break;
+    }
+    case 'Structural': {
+      const bStruct = b as typeof a;
+
+      // Check that the structural IDs match
+      if (a.id !== bStruct.id) {
+        errors = onMismatch(a, b, errors);
+      }
+      break;
+    }
+    case 'Object': {
+      const bNom = b as typeof a;
+
+      // Check that the nominal IDs match
+      if (a.id !== bNom.id) {
+        errors = onMismatch(a, b, errors);
+      }
+      break;
+    }
+
+    case 'Tuple': {
+      const bTuple = b as typeof a;
+
+      // Check that the tuple IDs match
+      if (a.id !== bTuple.id) {
+        errors = onMismatch(a, b, errors);
+      }
+      for (let i = 0; i < a.members.length; i++) {
+        errors = onChildMismatch(
+          onChild(a.members[i], bTuple.members[i]),
+          errors,
+        );
+      }
+
+      break;
+    }
+
+    case 'Enum':
+    case 'Instance':
+    case 'Union': {
+      unsupportedLanguageFeature(a.kind, GeneratedSource);
+    }
+
+    default:
+      assertExhaustive(a, 'Unknown type kind');
+  }
+
+  return errors;
+}
+
+export function filterOptional(t: ResolvedType): ResolvedType {
+  if (t.kind === 'Concrete' && t.type.kind === 'Nullable') {
+    return t.type.type;
+  }
+  return t;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Flood/Types.ts b/compiler/packages/babel-plugin-react-compiler/src/Flood/Types.ts
new file mode 100644
index 00000000000..c2484004df3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Flood/Types.ts
@@ -0,0 +1,994 @@
+import {CompilerError, SourceLocation} from '..';
+import {
+  Environment,
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+} from '../HIR';
+import * as t from '@babel/types';
+import * as TypeErrors from './TypeErrors';
+import {assertExhaustive} from '../Utils/utils';
+import {FlowType} from './FlowTypes';
+
+export const DEBUG = false;
+
+export type Type =
+  | {kind: 'Concrete'; type: ConcreteType<Type>; platform: Platform}
+  | {kind: 'Variable'; id: VariableId};
+
+export type ResolvedType = {
+  kind: 'Concrete';
+  type: ConcreteType<ResolvedType>;
+  platform: Platform;
+};
+
+export type ComponentType<T> = {
+  kind: 'Component';
+  props: Map<string, T>;
+  children: null | T;
+};
+export type ConcreteType<T> =
+  | {kind: 'Enum'}
+  | {kind: 'Mixed'}
+  | {kind: 'Number'}
+  | {kind: 'String'}
+  | {kind: 'Boolean'}
+  | {kind: 'Void'}
+  | {kind: 'Nullable'; type: T}
+  | {kind: 'Array'; element: T}
+  | {kind: 'Set'; element: T}
+  | {kind: 'Map'; key: T; value: T}
+  | {
+      kind: 'Function';
+      typeParameters: null | Array<TypeParameter<T>>;
+      params: Array<T>;
+      returnType: T;
+    }
+  | ComponentType<T>
+  | {kind: 'Generic'; id: TypeParameterId; bound: T}
+  | {
+      kind: 'Object';
+      id: NominalId;
+      members: Map<string, ResolvedType>;
+    }
+  | {
+      kind: 'Tuple';
+      id: NominalId;
+      members: Array<T>;
+    }
+  | {kind: 'Structural'; id: LinearId}
+  | {kind: 'Union'; members: Array<T>}
+  | {kind: 'Instance'; name: string; members: Map<string, ResolvedType>};
+
+export type StructuralValue =
+  | {
+      kind: 'Function';
+      fn: HIRFunction;
+    }
+  | {
+      kind: 'Object';
+      members: Map<string, ResolvedType>;
+    }
+  | {
+      kind: 'Array';
+      elementType: ResolvedType;
+    };
+
+export type Structural = {
+  type: StructuralValue;
+  consumed: boolean;
+};
+// TODO: create a kind: "Alias"
+
+// type T<X> = { foo: X}
+
+/**
+ *
+ * function apply<A, B>(x: A, f: A => B): B { }
+ *
+ * apply(42, x => String(x));
+ *
+ * f({foo: 42})
+ *
+ * f([HOLE]) -----> {foo: 42} with context NominalType
+ *
+ * $0 = Object {foo: 42}
+ * $1 = LoadLocal "f"
+ * $2 = Call $1, [$0]
+ *
+ * ContextMap:
+ *   $2 => ??
+ *   $1 => [HOLE]($0)
+ *   $0 => $1([HOLE])
+ */
+
+/*
+ *const g = {foo: 42} as NominalType // ok
+ *
+ *
+ *function f(x: NominalType) { ... }
+ *f()
+ *
+ *const y: NominalType = {foo: 42}
+ *
+ *
+ */
+
+/**
+ * // Mike: maybe this could be the ideal?
+ *type X = nominal('registryNameX', {
+ *value: number,
+ *});
+ *
+ * // For now:
+ *opaque type X = {   // creates a new nominal type
+ *value: number,
+ *};
+ *
+ *type Y = X; // creates a type alias
+ *
+ *type Z = number; // creates a type alias
+ *
+ *
+ * // (todo: disallowed)
+ *type X' = {
+ *value: number,
+ *}
+ */
+
+export type TypeParameter<T> = {
+  name: string;
+  id: TypeParameterId;
+  bound: T;
+};
+
+const opaqueLinearId = Symbol();
+export type LinearId = number & {
+  [opaqueLinearId]: 'LinearId';
+};
+
+export function makeLinearId(id: number): LinearId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected LinearId id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as LinearId;
+}
+
+const opaqueTypeParameterId = Symbol();
+export type TypeParameterId = number & {
+  [opaqueTypeParameterId]: 'TypeParameterId';
+};
+
+export function makeTypeParameterId(id: number): TypeParameterId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected TypeParameterId to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as TypeParameterId;
+}
+
+const opaqueNominalId = Symbol();
+export type NominalId = number & {
+  [opaqueNominalId]: 'NominalId';
+};
+
+export function makeNominalId(id: number): NominalId {
+  return id as NominalId;
+}
+
+const opaqueVariableId = Symbol();
+export type VariableId = number & {
+  [opaqueVariableId]: 'VariableId';
+};
+
+export function makeVariableId(id: number): VariableId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected VariableId id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as VariableId;
+}
+
+export function printConcrete<T>(
+  type: ConcreteType<T>,
+  printType: (_: T) => string,
+): string {
+  switch (type.kind) {
+    case 'Mixed':
+      return 'mixed';
+    case 'Number':
+      return 'number';
+    case 'String':
+      return 'string';
+    case 'Boolean':
+      return 'boolean';
+    case 'Void':
+      return 'void';
+    case 'Nullable':
+      return `${printType(type.type)} | void`;
+    case 'Array':
+      return `Array<${printType(type.element)}>`;
+    case 'Set':
+      return `Set<${printType(type.element)}>`;
+    case 'Map':
+      return `Map<${printType(type.key)}, ${printType(type.value)}>`;
+    case 'Function': {
+      const typeParams = type.typeParameters
+        ? `<${type.typeParameters.map(tp => `T${tp}`).join(', ')}>`
+        : '';
+      const params = type.params.map(printType).join(', ');
+      const returnType = printType(type.returnType);
+      return `${typeParams}(${params}) => ${returnType}`;
+    }
+    case 'Component': {
+      const params = [...type.props.entries()]
+        .map(([k, v]) => `${k}: ${printType(v)}`)
+        .join(', ');
+      const comma = type.children != null && type.props.size > 0 ? ', ' : '';
+      const children =
+        type.children != null ? `children: ${printType(type.children)}` : '';
+      return `component (${params}${comma}${children})`;
+    }
+    case 'Generic':
+      return `T${type.id}`;
+    case 'Object': {
+      const name = `Object [${[...type.members.keys()].map(key => JSON.stringify(key)).join(', ')}]`;
+      return `${name}`;
+    }
+    case 'Tuple': {
+      const name = `Tuple ${type.members}`;
+      return `${name}`;
+    }
+    case 'Structural': {
+      const name = `Structural ${type.id}`;
+      return `${name}`;
+    }
+    case 'Enum': {
+      return 'TODO enum printing';
+    }
+    case 'Union': {
+      return type.members.map(printType).join(' | ');
+    }
+    case 'Instance': {
+      return type.name;
+    }
+    default:
+      assertExhaustive(type, `Unknown type: ${JSON.stringify(type)}`);
+  }
+}
+
+export function printType(type: Type): string {
+  switch (type.kind) {
+    case 'Concrete':
+      return printConcrete(type.type, printType);
+    case 'Variable':
+      return `$${type.id}`;
+    default:
+      assertExhaustive(type, `Unknown type: ${JSON.stringify(type)}`);
+  }
+}
+
+export function printResolved(type: ResolvedType): string {
+  return printConcrete(type.type, printResolved);
+}
+
+type Platform = 'client' | 'server' | 'shared';
+
+const DUMMY_NOMINAL = makeNominalId(0);
+
+function convertFlowType(flowType: FlowType, loc: string): ResolvedType {
+  let nextGenericId = 0;
+  function convertFlowTypeImpl(
+    flowType: FlowType,
+    loc: string,
+    genericEnv: Map<string, TypeParameterId>,
+    platform: Platform,
+    poly: null | Array<TypeParameter<ResolvedType>> = null,
+  ): ResolvedType {
+    switch (flowType.kind) {
+      case 'TypeApp': {
+        if (
+          flowType.type.kind === 'Def' &&
+          flowType.type.def.kind === 'Poly' &&
+          flowType.type.def.t_out.kind === 'Def' &&
+          flowType.type.def.t_out.def.kind === 'Type' &&
+          flowType.type.def.t_out.def.type.kind === 'Opaque' &&
+          flowType.type.def.t_out.def.type.opaquetype.opaque_name ===
+            'Client' &&
+          flowType.targs.length === 1
+        ) {
+          return convertFlowTypeImpl(
+            flowType.targs[0],
+            loc,
+            genericEnv,
+            'client',
+          );
+        } else if (
+          flowType.type.kind === 'Def' &&
+          flowType.type.def.kind === 'Poly' &&
+          flowType.type.def.t_out.kind === 'Def' &&
+          flowType.type.def.t_out.def.kind === 'Type' &&
+          flowType.type.def.t_out.def.type.kind === 'Opaque' &&
+          flowType.type.def.t_out.def.type.opaquetype.opaque_name ===
+            'Server' &&
+          flowType.targs.length === 1
+        ) {
+          return convertFlowTypeImpl(
+            flowType.targs[0],
+            loc,
+            genericEnv,
+            'server',
+          );
+        }
+        return Resolved.todo(platform);
+      }
+      case 'Open':
+        return Resolved.mixed(platform);
+      case 'Any':
+        return Resolved.todo(platform);
+      case 'Annot':
+        return convertFlowTypeImpl(
+          flowType.type,
+          loc,
+          genericEnv,
+          platform,
+          poly,
+        );
+      case 'Opaque': {
+        if (
+          flowType.opaquetype.opaque_name === 'Client' &&
+          flowType.opaquetype.super_t != null
+        ) {
+          return convertFlowTypeImpl(
+            flowType.opaquetype.super_t,
+            loc,
+            genericEnv,
+            'client',
+          );
+        }
+        if (
+          flowType.opaquetype.opaque_name === 'Server' &&
+          flowType.opaquetype.super_t != null
+        ) {
+          return convertFlowTypeImpl(
+            flowType.opaquetype.super_t,
+            loc,
+            genericEnv,
+            'server',
+          );
+        }
+        const t =
+          flowType.opaquetype.underlying_t ?? flowType.opaquetype.super_t;
+        if (t != null) {
+          return convertFlowTypeImpl(t, loc, genericEnv, platform, poly);
+        } else {
+          return Resolved.todo(platform);
+        }
+      }
+      case 'Def': {
+        switch (flowType.def.kind) {
+          case 'EnumValue':
+            return convertFlowTypeImpl(
+              flowType.def.enum_info.representation_t,
+              loc,
+              genericEnv,
+              platform,
+              poly,
+            );
+          case 'EnumObject':
+            return Resolved.enum(platform);
+          case 'Empty':
+            return Resolved.todo(platform);
+          case 'Instance': {
+            const members = new Map<string, ResolvedType>();
+            for (const key in flowType.def.instance.inst.own_props) {
+              const prop = flowType.def.instance.inst.own_props[key];
+              if (prop.kind === 'Field') {
+                members.set(
+                  key,
+                  convertFlowTypeImpl(prop.type, loc, genericEnv, platform),
+                );
+              } else {
+                CompilerError.invariant(false, {
+                  reason: `Unsupported property kind ${prop.kind}`,
+                  loc: GeneratedSource,
+                });
+              }
+            }
+            return Resolved.class(
+              flowType.def.instance.inst.class_name ?? '[anonymous class]',
+              members,
+              platform,
+            );
+          }
+          case 'Type':
+            return convertFlowTypeImpl(
+              flowType.def.type,
+              loc,
+              genericEnv,
+              platform,
+              poly,
+            );
+          case 'NumGeneral':
+          case 'SingletonNum':
+            return Resolved.number(platform);
+          case 'StrGeneral':
+          case 'SingletonStr':
+            return Resolved.string(platform);
+          case 'BoolGeneral':
+          case 'SingletonBool':
+            return Resolved.boolean(platform);
+          case 'Void':
+            return Resolved.void(platform);
+          case 'Null':
+            return Resolved.void(platform);
+          case 'Mixed':
+            return Resolved.mixed(platform);
+          case 'Arr': {
+            if (
+              flowType.def.arrtype.kind === 'ArrayAT' ||
+              flowType.def.arrtype.kind === 'ROArrayAT'
+            ) {
+              return Resolved.array(
+                convertFlowTypeImpl(
+                  flowType.def.arrtype.elem_t,
+                  loc,
+                  genericEnv,
+                  platform,
+                ),
+                platform,
+              );
+            } else {
+              return Resolved.tuple(
+                DUMMY_NOMINAL,
+                flowType.def.arrtype.elements.map(t =>
+                  convertFlowTypeImpl(t.t, loc, genericEnv, platform),
+                ),
+                platform,
+              );
+            }
+          }
+          case 'Obj': {
+            const members = new Map<string, ResolvedType>();
+            for (const key in flowType.def.objtype.props) {
+              const prop = flowType.def.objtype.props[key];
+              if (prop.kind === 'Field') {
+                members.set(
+                  key,
+                  convertFlowTypeImpl(prop.type, loc, genericEnv, platform),
+                );
+              } else {
+                CompilerError.invariant(false, {
+                  reason: `Unsupported property kind ${prop.kind}`,
+                  loc: GeneratedSource,
+                });
+              }
+            }
+            return Resolved.object(DUMMY_NOMINAL, members, platform);
+          }
+          case 'Class': {
+            if (flowType.def.type.kind === 'ThisInstance') {
+              const members = new Map<string, ResolvedType>();
+              for (const key in flowType.def.type.instance.inst.own_props) {
+                const prop = flowType.def.type.instance.inst.own_props[key];
+                if (prop.kind === 'Field') {
+                  members.set(
+                    key,
+                    convertFlowTypeImpl(prop.type, loc, genericEnv, platform),
+                  );
+                } else {
+                  CompilerError.invariant(false, {
+                    reason: `Unsupported property kind ${prop.kind}`,
+                    loc: GeneratedSource,
+                  });
+                }
+              }
+              return Resolved.class(
+                flowType.def.type.instance.inst.class_name ??
+                  '[anonymous class]',
+                members,
+                platform,
+              );
+            }
+            CompilerError.invariant(false, {
+              reason: `Unsupported class instance type ${flowType.def.type.kind}`,
+              loc: GeneratedSource,
+            });
+          }
+          case 'Fun':
+            return Resolved.function(
+              poly,
+              flowType.def.funtype.params.map(p =>
+                convertFlowTypeImpl(p.type, loc, genericEnv, platform),
+              ),
+              convertFlowTypeImpl(
+                flowType.def.funtype.return_t,
+                loc,
+                genericEnv,
+                platform,
+              ),
+              platform,
+            );
+          case 'Poly': {
+            let newEnv = genericEnv;
+            const poly = flowType.def.tparams.map(p => {
+              const id = makeTypeParameterId(nextGenericId++);
+              const bound = convertFlowTypeImpl(p.bound, loc, newEnv, platform);
+              newEnv = new Map(newEnv);
+              newEnv.set(p.name, id);
+              return {
+                name: p.name,
+                id,
+                bound,
+              };
+            });
+            return convertFlowTypeImpl(
+              flowType.def.t_out,
+              loc,
+              newEnv,
+              platform,
+              poly,
+            );
+          }
+          case 'ReactAbstractComponent': {
+            const props = new Map<string, ResolvedType>();
+            let children: ResolvedType | null = null;
+            const propsType = convertFlowTypeImpl(
+              flowType.def.config,
+              loc,
+              genericEnv,
+              platform,
+            );
+
+            if (propsType.type.kind === 'Object') {
+              propsType.type.members.forEach((v, k) => {
+                if (k === 'children') {
+                  children = v;
+                } else {
+                  props.set(k, v);
+                }
+              });
+            } else {
+              CompilerError.invariant(false, {
+                reason: `Unsupported component props type ${propsType.type.kind}`,
+                loc: GeneratedSource,
+              });
+            }
+
+            return Resolved.component(props, children, platform);
+          }
+          case 'Renders':
+            return Resolved.todo(platform);
+          default:
+            TypeErrors.unsupportedTypeAnnotation('Renders', GeneratedSource);
+        }
+      }
+      case 'Generic': {
+        const id = genericEnv.get(flowType.name);
+        if (id == null) {
+          TypeErrors.unsupportedTypeAnnotation(flowType.name, GeneratedSource);
+        }
+        return Resolved.generic(
+          id,
+          platform,
+          convertFlowTypeImpl(flowType.bound, loc, genericEnv, platform),
+        );
+      }
+      case 'Union': {
+        const members = flowType.members.map(t =>
+          convertFlowTypeImpl(t, loc, genericEnv, platform),
+        );
+        if (members.length === 1) {
+          return members[0];
+        }
+        if (
+          members[0].type.kind === 'Number' ||
+          members[0].type.kind === 'String' ||
+          members[0].type.kind === 'Boolean'
+        ) {
+          const dupes = members.filter(
+            t => t.type.kind === members[0].type.kind,
+          );
+          if (dupes.length === members.length) {
+            return members[0];
+          }
+        }
+        if (
+          members[0].type.kind === 'Array' &&
+          (members[0].type.element.type.kind === 'Number' ||
+            members[0].type.element.type.kind === 'String' ||
+            members[0].type.element.type.kind === 'Boolean')
+        ) {
+          const first = members[0].type.element;
+          const dupes = members.filter(
+            t =>
+              t.type.kind === 'Array' &&
+              t.type.element.type.kind === first.type.kind,
+          );
+          if (dupes.length === members.length) {
+            return members[0];
+          }
+        }
+        return Resolved.union(members, platform);
+      }
+      case 'Eval': {
+        if (
+          flowType.destructor.kind === 'ReactDRO' ||
+          flowType.destructor.kind === 'ReactCheckComponentConfig'
+        ) {
+          return convertFlowTypeImpl(
+            flowType.type,
+            loc,
+            genericEnv,
+            platform,
+            poly,
+          );
+        }
+        TypeErrors.unsupportedTypeAnnotation(
+          `EvalT(${flowType.destructor.kind})`,
+          GeneratedSource,
+        );
+      }
+      case 'Optional': {
+        return Resolved.union(
+          [
+            convertFlowTypeImpl(flowType.type, loc, genericEnv, platform),
+            Resolved.void(platform),
+          ],
+          platform,
+        );
+      }
+      default:
+        TypeErrors.unsupportedTypeAnnotation(flowType.kind, GeneratedSource);
+    }
+  }
+  return convertFlowTypeImpl(flowType, loc, new Map(), 'shared');
+}
+
+export interface ITypeEnv {
+  popGeneric(name: string): void;
+  getGeneric(name: string): null | TypeParameter<ResolvedType>;
+  pushGeneric(
+    name: string,
+    binding: {name: string; id: TypeParameterId; bound: ResolvedType},
+  ): void;
+  getType(id: Identifier): ResolvedType;
+  getTypeOrNull(id: Identifier): ResolvedType | null;
+  setType(id: Identifier, type: ResolvedType): void;
+  nextNominalId(): NominalId;
+  nextTypeParameterId(): TypeParameterId;
+  moduleEnv: Map<string, ResolvedType>;
+  addBinding(bindingIdentifier: t.Identifier, type: ResolvedType): void;
+  resolveBinding(bindingIdentifier: t.Identifier): ResolvedType | null;
+}
+
+function serializeLoc(location: t.SourceLocation): string {
+  return `${location.start.line}:${location.start.column}-${location.end.line}:${location.end.column}`;
+}
+
+function buildTypeEnvironment(
+  flowOutput: Array<{loc: t.SourceLocation; type: string}>,
+): Map<string, string> {
+  const result: Map<string, string> = new Map();
+  for (const item of flowOutput) {
+    const loc: t.SourceLocation = {
+      start: {
+        line: item.loc.start.line,
+        column: item.loc.start.column - 1,
+        index: item.loc.start.index,
+      },
+      end: item.loc.end,
+      filename: item.loc.filename,
+      identifierName: item.loc.identifierName,
+    };
+
+    result.set(serializeLoc(loc), item.type);
+  }
+  return result;
+}
+
+let lastFlowSource: string | null = null;
+let lastFlowResult: any = null;
+
+export class FlowTypeEnv implements ITypeEnv {
+  moduleEnv: Map<string, ResolvedType> = new Map();
+  #nextNominalId: number = 0;
+  #nextTypeParameterId: number = 0;
+
+  #types: Map<IdentifierId, ResolvedType> = new Map();
+  #bindings: Map<t.Identifier, ResolvedType> = new Map();
+  #generics: Array<[string, TypeParameter<ResolvedType>]> = [];
+  #flowTypes: Map<string, ResolvedType> = new Map();
+
+  init(env: Environment, source: string): void {
+    // TODO: use flow-js only for web environments (e.g. playground)
+    CompilerError.invariant(env.config.flowTypeProvider != null, {
+      reason: 'Expected flowDumpTypes to be defined in environment config',
+      loc: GeneratedSource,
+    });
+    let stdout: any;
+    if (source === lastFlowSource) {
+      stdout = lastFlowResult;
+    } else {
+      lastFlowSource = source;
+      lastFlowResult = env.config.flowTypeProvider(source);
+      stdout = lastFlowResult;
+    }
+    const flowTypes = buildTypeEnvironment(stdout);
+    const resolvedFlowTypes = new Map<string, ResolvedType>();
+    for (const [loc, type] of flowTypes) {
+      if (typeof loc === 'symbol') continue;
+      resolvedFlowTypes.set(loc, convertFlowType(JSON.parse(type), loc));
+    }
+    // =console.log(resolvedFlowTypes);
+    this.#flowTypes = resolvedFlowTypes;
+  }
+
+  setType(identifier: Identifier, type: ResolvedType): void {
+    if (
+      typeof identifier.loc !== 'symbol' &&
+      this.#flowTypes.has(serializeLoc(identifier.loc))
+    ) {
+      return;
+    }
+    this.#types.set(identifier.id, type);
+  }
+
+  getType(identifier: Identifier): ResolvedType {
+    const result = this.getTypeOrNull(identifier);
+    if (result == null) {
+      throw new Error(
+        `Type not found for ${identifier.id}, ${typeof identifier.loc === 'symbol' ? 'generated loc' : serializeLoc(identifier.loc)}`,
+      );
+    }
+    return result;
+  }
+
+  getTypeOrNull(identifier: Identifier): ResolvedType | null {
+    const result = this.#types.get(identifier.id) ?? null;
+    if (result == null && typeof identifier.loc !== 'symbol') {
+      const flowType = this.#flowTypes.get(serializeLoc(identifier.loc));
+      return flowType ?? null;
+    }
+    return result;
+  }
+
+  getTypeByLoc(loc: SourceLocation): ResolvedType | null {
+    if (typeof loc === 'symbol') {
+      return null;
+    }
+    const flowType = this.#flowTypes.get(serializeLoc(loc));
+    return flowType ?? null;
+  }
+
+  nextNominalId(): NominalId {
+    return makeNominalId(this.#nextNominalId++);
+  }
+
+  nextTypeParameterId(): TypeParameterId {
+    return makeTypeParameterId(this.#nextTypeParameterId++);
+  }
+
+  addBinding(bindingIdentifier: t.Identifier, type: ResolvedType): void {
+    this.#bindings.set(bindingIdentifier, type);
+  }
+
+  resolveBinding(bindingIdentifier: t.Identifier): ResolvedType | null {
+    return this.#bindings.get(bindingIdentifier) ?? null;
+  }
+
+  pushGeneric(name: string, generic: TypeParameter<ResolvedType>): void {
+    this.#generics.unshift([name, generic]);
+  }
+
+  popGeneric(name: string): void {
+    for (let i = 0; i < this.#generics.length; i++) {
+      if (this.#generics[i][0] === name) {
+        this.#generics.splice(i, 1);
+        return;
+      }
+    }
+  }
+
+  /**
+   * Look up bound polymorphic types
+   * @param name
+   * @returns
+   */
+  getGeneric(name: string): null | TypeParameter<ResolvedType> {
+    for (const [eltName, param] of this.#generics) {
+      if (name === eltName) {
+        return param;
+      }
+    }
+    return null;
+  }
+}
+const Primitives = {
+  number(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Number'}, platform};
+  },
+  string(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'String'}, platform};
+  },
+  boolean(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Boolean'}, platform};
+  },
+  void(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Void'}, platform};
+  },
+  mixed(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Mixed'}, platform};
+  },
+  enum(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Enum'}, platform};
+  },
+  todo(platform: Platform): Type & ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Mixed'}, platform};
+  },
+};
+
+export const Resolved = {
+  ...Primitives,
+  nullable(type: ResolvedType, platform: Platform): ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Nullable', type}, platform};
+  },
+  array(element: ResolvedType, platform: Platform): ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Array', element}, platform};
+  },
+  set(element: ResolvedType, platform: Platform): ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Set', element}, platform};
+  },
+  map(
+    key: ResolvedType,
+    value: ResolvedType,
+    platform: Platform,
+  ): ResolvedType {
+    return {kind: 'Concrete', type: {kind: 'Map', key, value}, platform};
+  },
+  function(
+    typeParameters: null | Array<TypeParameter<ResolvedType>>,
+    params: Array<ResolvedType>,
+    returnType: ResolvedType,
+    platform: Platform,
+  ): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {kind: 'Function', typeParameters, params, returnType},
+      platform,
+    };
+  },
+  component(
+    props: Map<string, ResolvedType>,
+    children: ResolvedType | null,
+    platform: Platform,
+  ): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {kind: 'Component', props, children},
+      platform,
+    };
+  },
+  object(
+    id: NominalId,
+    members: Map<string, ResolvedType>,
+    platform: Platform,
+  ): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {
+        kind: 'Object',
+        id,
+        members,
+      },
+      platform,
+    };
+  },
+  class(
+    name: string,
+    members: Map<string, ResolvedType>,
+    platform: Platform,
+  ): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {
+        kind: 'Instance',
+        name,
+        members,
+      },
+      platform,
+    };
+  },
+  tuple(
+    id: NominalId,
+    members: Array<ResolvedType>,
+    platform: Platform,
+  ): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {
+        kind: 'Tuple',
+        id,
+        members,
+      },
+      platform,
+    };
+  },
+  generic(
+    id: TypeParameterId,
+    platform: Platform,
+    bound = Primitives.mixed(platform),
+  ): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {
+        kind: 'Generic',
+        id,
+        bound,
+      },
+      platform,
+    };
+  },
+  union(members: Array<ResolvedType>, platform: Platform): ResolvedType {
+    return {
+      kind: 'Concrete',
+      type: {
+        kind: 'Union',
+        members,
+      },
+      platform,
+    };
+  },
+};
+
+/*
+ * export const Types = {
+ *   ...Primitives,
+ *   variable(env: TypeEnv): Type {
+ *     return env.nextTypeVariable();
+ *   },
+ *   nullable(type: Type): Type {
+ *     return {kind: 'Concrete', type: {kind: 'Nullable', type}};
+ *   },
+ *   array(element: Type): Type {
+ *     return {kind: 'Concrete', type: {kind: 'Array', element}};
+ *   },
+ *   set(element: Type): Type {
+ *     return {kind: 'Concrete', type: {kind: 'Set', element}};
+ *   },
+ *   map(key: Type, value: Type): Type {
+ *     return {kind: 'Concrete', type: {kind: 'Map', key, value}};
+ *   },
+ *   function(
+ *     typeParameters: null | Array<TypeParameter<Type>>,
+ *     params: Array<Type>,
+ *     returnType: Type,
+ *   ): Type {
+ *     return {
+ *       kind: 'Concrete',
+ *       type: {kind: 'Function', typeParameters, params, returnType},
+ *     };
+ *   },
+ *   component(
+ *     props: Map<string, ResolvedType>,
+ *     children: Type | null,
+ *   ): Type {
+ *     return {
+ *       kind: 'Concrete',
+ *       type: {kind: 'Component', props, children},
+ *     };
+ *   },
+ *   object(id: NominalId, members: Map<string, ResolvedType>): Type {
+ *     return {
+ *       kind: 'Concrete',
+ *       type: {
+ *         kind: 'Object',
+ *         id,
+ *         members,
+ *       },
+ *     };
+ *   },
+ * };
+ */
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertConsistentIdentifiers.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertConsistentIdentifiers.ts
new file mode 100644
index 00000000000..b002149f53e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertConsistentIdentifiers.ts
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  SourceLocation,
+} from './HIR';
+import {printPlace} from './PrintHIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from './visitors';
+
+/*
+ * Validation pass to check that there is a 1:1 mapping between Identifier objects and IdentifierIds,
+ * ie there can only be one Identifier instance per IdentifierId.
+ */
+export function assertConsistentIdentifiers(fn: HIRFunction): void {
+  const identifiers: Identifiers = new Map();
+  const assignments: Set<IdentifierId> = new Set();
+  for (const [, block] of fn.body.blocks) {
+    for (const phi of block.phis) {
+      validate(identifiers, phi.place.identifier);
+      for (const [, operand] of phi.operands) {
+        validate(identifiers, operand.identifier);
+      }
+    }
+    for (const instr of block.instructions) {
+      CompilerError.invariant(instr.lvalue.identifier.name === null, {
+        reason: `Expected all lvalues to be temporaries`,
+        description: `Found named lvalue \`${instr.lvalue.identifier.name}\``,
+        loc: instr.lvalue.loc,
+      });
+      CompilerError.invariant(!assignments.has(instr.lvalue.identifier.id), {
+        reason: `Expected lvalues to be assigned exactly once`,
+        description: `Found duplicate assignment of '${printPlace(
+          instr.lvalue,
+        )}'`,
+        loc: instr.lvalue.loc,
+      });
+      assignments.add(instr.lvalue.identifier.id);
+      for (const operand of eachInstructionLValue(instr)) {
+        validate(identifiers, operand.identifier, operand.loc);
+      }
+      for (const operand of eachInstructionValueOperand(instr.value)) {
+        validate(identifiers, operand.identifier, operand.loc);
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      validate(identifiers, operand.identifier, operand.loc);
+    }
+  }
+}
+
+type Identifiers = Map<IdentifierId, Identifier>;
+
+function validate(
+  identifiers: Identifiers,
+  identifier: Identifier,
+  loc: SourceLocation | null = null,
+): void {
+  const previous = identifiers.get(identifier.id);
+  if (previous === undefined) {
+    identifiers.set(identifier.id, identifier);
+  } else {
+    CompilerError.invariant(identifier === previous, {
+      reason: `Duplicate identifier object`,
+      description: `Found duplicate identifier object for id ${identifier.id}`,
+      loc: loc ?? GeneratedSource,
+    });
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertTerminalBlocksExist.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertTerminalBlocksExist.ts
new file mode 100644
index 00000000000..13dbbbf86f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertTerminalBlocksExist.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {GeneratedSource, HIRFunction} from './HIR';
+import {printTerminal} from './PrintHIR';
+import {eachTerminalSuccessor, mapTerminalSuccessors} from './visitors';
+
+export function assertTerminalSuccessorsExist(fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    mapTerminalSuccessors(block.terminal, successor => {
+      CompilerError.invariant(fn.body.blocks.has(successor), {
+        reason: `Terminal successor references unknown block`,
+        description: `Block bb${successor} does not exist for terminal '${printTerminal(
+          block.terminal,
+        )}'`,
+        loc: (block.terminal as any).loc ?? GeneratedSource,
+      });
+      return successor;
+    });
+  }
+}
+
+export function assertTerminalPredsExist(fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const pred of block.preds) {
+      const predBlock = fn.body.blocks.get(pred);
+      CompilerError.invariant(predBlock != null, {
+        reason: 'Expected predecessor block to exist',
+        description: `Block ${block.id} references non-existent ${pred}`,
+        loc: GeneratedSource,
+      });
+      CompilerError.invariant(
+        [...eachTerminalSuccessor(predBlock.terminal)].includes(block.id),
+        {
+          reason: 'Terminal successor does not reference correct predecessor',
+          description: `Block bb${block.id} has bb${predBlock.id} as a predecessor, but bb${predBlock.id}'s successors do not include bb${block.id}`,
+          loc: GeneratedSource,
+        },
+      );
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertValidBlockNesting.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertValidBlockNesting.ts
new file mode 100644
index 00000000000..adfb0510582
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertValidBlockNesting.ts
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  BlockId,
+  GeneratedSource,
+  HIRFunction,
+  MutableRange,
+  Place,
+  ReactiveScope,
+  ScopeId,
+} from './HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionOperand,
+  eachTerminalOperand,
+  terminalFallthrough,
+} from './visitors';
+
+/**
+ * This pass asserts that program blocks and scopes properly form a tree hierarchy
+ * with respect to block and scope ranges. In other words, two ranges must either
+ * disjoint or nested.
+ *
+ * ProgramBlockSubtree = subtree of basic blocks between a terminal and its fallthrough
+ * (e.g. continuation in the source AST). This spans every instruction contained within
+ * the source AST subtree representing the terminal.
+ *
+ * In this example, there is a single ProgramBlockSubtree, which spans instructions 1:5
+ * ```js
+ * function Foo() {
+ *   [0] a;
+ *   [1] if (cond) {
+ *   [2]   b;
+ *   [3] } else {
+ *   [4]   c;
+ *       }
+ *   [5] d;
+ * }
+ * ```
+ *
+ * Scope = reactive scope whose range has been correctly aligned and merged.
+ */
+type Block =
+  | ({
+      kind: 'ProgramBlockSubtree';
+      id: BlockId;
+    } & MutableRange)
+  | ({
+      kind: 'Scope';
+      id: ScopeId;
+    } & MutableRange);
+
+export function getScopes(fn: HIRFunction): Set<ReactiveScope> {
+  const scopes: Set<ReactiveScope> = new Set();
+  function visitPlace(place: Place): void {
+    const scope = place.identifier.scope;
+    if (scope != null) {
+      if (scope.range.start !== scope.range.end) {
+        scopes.add(scope);
+      }
+    }
+  }
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      for (const operand of eachInstructionLValue(instr)) {
+        visitPlace(operand);
+      }
+
+      for (const operand of eachInstructionOperand(instr)) {
+        visitPlace(operand);
+      }
+    }
+
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      visitPlace(operand);
+    }
+  }
+
+  return scopes;
+}
+
+/**
+ * Sort range in ascending order of start instruction, breaking ties
+ * with descending order of end instructions. For overlapping ranges, this
+ * always orders nested inner range after outer ranges which is identical
+ * to the ordering of a pre-order tree traversal.
+ * e.g. we order the following ranges to [0, 4], [0, 2], [5, 8]
+ * 0  ⌝  ⌝
+ * 1  ⌟  |
+ * 2     |
+ * 3     ⌟
+ * 4
+ * 5  ⌝
+ * 6  |
+ * 7  ⌟
+ */
+export function rangePreOrderComparator(
+  a: MutableRange,
+  b: MutableRange,
+): number {
+  const startDiff = a.start - b.start;
+  if (startDiff !== 0) return startDiff;
+  return b.end - a.end;
+}
+
+export function recursivelyTraverseItems<T, TContext>(
+  items: Array<T>,
+  getRange: (val: T) => MutableRange,
+  context: TContext,
+  enter: (val: T, context: TContext) => void,
+  exit: (val: T, context: TContext) => void,
+): void {
+  items.sort((a, b) => rangePreOrderComparator(getRange(a), getRange(b)));
+  let activeItems: Array<T> = [];
+  const ranges = items.map(getRange);
+  for (let i = 0; i < items.length; i++) {
+    const curr = items[i];
+    const currRange = ranges[i];
+    for (let i = activeItems.length - 1; i >= 0; i--) {
+      const maybeParent = activeItems[i];
+      const maybeParentRange = getRange(maybeParent);
+      const disjoint = currRange.start >= maybeParentRange.end;
+      const nested = currRange.end <= maybeParentRange.end;
+      CompilerError.invariant(disjoint || nested, {
+        reason: 'Invalid nesting in program blocks or scopes',
+        description: `Items overlap but are not nested: ${maybeParentRange.start}:${maybeParentRange.end}(${currRange.start}:${currRange.end})`,
+        loc: GeneratedSource,
+      });
+      if (disjoint) {
+        exit(maybeParent, context);
+        activeItems.length = i;
+      } else {
+        break;
+      }
+    }
+    enter(curr, context);
+    activeItems.push(curr);
+  }
+
+  let curr = activeItems.pop();
+  while (curr != null) {
+    exit(curr, context);
+    curr = activeItems.pop();
+  }
+}
+const no_op: () => void = () => {};
+
+export function assertValidBlockNesting(fn: HIRFunction): void {
+  const scopes = getScopes(fn);
+
+  const blocks: Array<Block> = [...scopes].map(scope => ({
+    kind: 'Scope',
+    id: scope.id,
+    ...scope.range,
+  })) as Array<Block>;
+  for (const [, block] of fn.body.blocks) {
+    const fallthroughId = terminalFallthrough(block.terminal);
+    if (fallthroughId != null) {
+      const fallthrough = fn.body.blocks.get(fallthroughId)!;
+      const end = fallthrough.instructions[0]?.id ?? fallthrough.terminal.id;
+      blocks.push({
+        kind: 'ProgramBlockSubtree',
+        id: block.id,
+        start: block.terminal.id,
+        end,
+      });
+    }
+  }
+
+  recursivelyTraverseItems(blocks, block => block, null, no_op, no_op);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertValidMutableRanges.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertValidMutableRanges.ts
new file mode 100644
index 00000000000..773986a1b5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/AssertValidMutableRanges.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {HIRFunction, MutableRange, Place} from './HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionOperand,
+  eachTerminalOperand,
+} from './visitors';
+import {CompilerError} from '..';
+import {printPlace} from './PrintHIR';
+
+/*
+ * Checks that all mutable ranges in the function are well-formed, with
+ * start === end === 0 OR end > start.
+ */
+export function assertValidMutableRanges(fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const phi of block.phis) {
+      visit(phi.place, `phi for block bb${block.id}`);
+      for (const [pred, operand] of phi.operands) {
+        visit(operand, `phi predecessor bb${pred} for block bb${block.id}`);
+      }
+    }
+    for (const instr of block.instructions) {
+      for (const operand of eachInstructionLValue(instr)) {
+        visit(operand, `instruction [${instr.id}]`);
+      }
+      for (const operand of eachInstructionOperand(instr)) {
+        visit(operand, `instruction [${instr.id}]`);
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      visit(operand, `terminal [${block.terminal.id}]`);
+    }
+  }
+}
+
+function visit(place: Place, description: string): void {
+  validateMutableRange(place, place.identifier.mutableRange, description);
+  if (place.identifier.scope !== null) {
+    validateMutableRange(place, place.identifier.scope.range, description);
+  }
+}
+
+function validateMutableRange(
+  place: Place,
+  range: MutableRange,
+  description: string,
+): void {
+  CompilerError.invariant(
+    (range.start === 0 && range.end === 0) || range.end > range.start,
+    {
+      reason: `Invalid mutable range: [${range.start}:${range.end}]`,
+      description: `${printPlace(place)} in ${description}`,
+      loc: place.loc,
+    },
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
new file mode 100644
index 00000000000..f43b3dd7015
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -0,0 +1,4386 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath, Scope} from '@babel/traverse';
+import * as t from '@babel/types';
+import invariant from 'invariant';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  CompilerSuggestionOperation,
+  ErrorCategory,
+} from '../CompilerError';
+import {Err, Ok, Result} from '../Utils/Result';
+import {assertExhaustive, hasNode} from '../Utils/utils';
+import {Environment} from './Environment';
+import {
+  ArrayExpression,
+  ArrayPattern,
+  BlockId,
+  BranchTerminal,
+  BuiltinTag,
+  Case,
+  Effect,
+  GeneratedSource,
+  GotoVariant,
+  HIRFunction,
+  IfTerminal,
+  InstructionKind,
+  InstructionValue,
+  JsxAttribute,
+  LoweredFunction,
+  ObjectPattern,
+  ObjectProperty,
+  ObjectPropertyKey,
+  Place,
+  PropertyLiteral,
+  ReturnTerminal,
+  SourceLocation,
+  SpreadPattern,
+  ThrowTerminal,
+  Type,
+  makeInstructionId,
+  makePropertyLiteral,
+  makeType,
+  promoteTemporary,
+  validateIdentifierName,
+} from './HIR';
+import HIRBuilder, {Bindings, createTemporaryPlace} from './HIRBuilder';
+import {BuiltInArrayId} from './ObjectShape';
+
+/*
+ * *******************************************************************************************
+ * *******************************************************************************************
+ * ************************************* Lowering to HIR *************************************
+ * *******************************************************************************************
+ * *******************************************************************************************
+ */
+
+/*
+ * Converts a function into a high-level intermediate form (HIR) which represents
+ * the code as a control-flow graph. All normal control-flow is modeled as accurately
+ * as possible to allow precise, expression-level memoization. The main exceptions are
+ * try/catch statements and exceptions: we currently bail out (skip compilation) for
+ * try/catch and do not attempt to model control flow of exceptions, which can occur
+ * ~anywhere in JavaScript. The compiler assumes that exceptions will be handled by
+ * the runtime, ie by invalidating memoization.
+ */
+export function lower(
+  func: NodePath<t.Function>,
+  env: Environment,
+  // Bindings captured from the outer function, in case lower() is called recursively (for lambdas)
+  bindings: Bindings | null = null,
+  capturedRefs: Map<t.Identifier, SourceLocation> = new Map(),
+): Result<HIRFunction, CompilerError> {
+  const builder = new HIRBuilder(env, {
+    bindings,
+    context: capturedRefs,
+  });
+  const context: HIRFunction['context'] = [];
+
+  for (const [ref, loc] of capturedRefs ?? []) {
+    context.push({
+      kind: 'Identifier',
+      identifier: builder.resolveBinding(ref),
+      effect: Effect.Unknown,
+      reactive: false,
+      loc,
+    });
+  }
+
+  let id: string | null = null;
+  if (func.isFunctionDeclaration() || func.isFunctionExpression()) {
+    const idNode = (
+      func as NodePath<t.FunctionDeclaration | t.FunctionExpression>
+    ).get('id');
+    if (hasNode(idNode)) {
+      id = idNode.node.name;
+    }
+  }
+  const params: Array<Place | SpreadPattern> = [];
+  func.get('params').forEach(param => {
+    if (param.isIdentifier()) {
+      const binding = builder.resolveIdentifier(param);
+      if (binding.kind !== 'Identifier') {
+        builder.errors.pushDiagnostic(
+          CompilerDiagnostic.create({
+            category: ErrorCategory.Invariant,
+            reason: 'Could not find binding',
+            description: `[BuildHIR] Could not find binding for param \`${param.node.name}\``,
+          }).withDetails({
+            kind: 'error',
+            loc: param.node.loc ?? null,
+            message: 'Could not find binding',
+          }),
+        );
+        return;
+      }
+      const place: Place = {
+        kind: 'Identifier',
+        identifier: binding.identifier,
+        effect: Effect.Unknown,
+        reactive: false,
+        loc: param.node.loc ?? GeneratedSource,
+      };
+      params.push(place);
+    } else if (
+      param.isObjectPattern() ||
+      param.isArrayPattern() ||
+      param.isAssignmentPattern()
+    ) {
+      const place: Place = {
+        kind: 'Identifier',
+        identifier: builder.makeTemporary(param.node.loc ?? GeneratedSource),
+        effect: Effect.Unknown,
+        reactive: false,
+        loc: param.node.loc ?? GeneratedSource,
+      };
+      promoteTemporary(place.identifier);
+      params.push(place);
+      lowerAssignment(
+        builder,
+        param.node.loc ?? GeneratedSource,
+        InstructionKind.Let,
+        param,
+        place,
+        'Assignment',
+      );
+    } else if (param.isRestElement()) {
+      const place: Place = {
+        kind: 'Identifier',
+        identifier: builder.makeTemporary(param.node.loc ?? GeneratedSource),
+        effect: Effect.Unknown,
+        reactive: false,
+        loc: param.node.loc ?? GeneratedSource,
+      };
+      params.push({
+        kind: 'Spread',
+        place,
+      });
+      lowerAssignment(
+        builder,
+        param.node.loc ?? GeneratedSource,
+        InstructionKind.Let,
+        param.get('argument'),
+        place,
+        'Assignment',
+      );
+    } else {
+      builder.errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          category: ErrorCategory.Todo,
+          reason: `Handle ${param.node.type} parameters`,
+          description: `[BuildHIR] Add support for ${param.node.type} parameters`,
+        }).withDetails({
+          kind: 'error',
+          loc: param.node.loc ?? null,
+          message: 'Unsupported parameter type',
+        }),
+      );
+    }
+  });
+
+  let directives: Array<string> = [];
+  const body = func.get('body');
+  if (body.isExpression()) {
+    const fallthrough = builder.reserve('block');
+    const terminal: ReturnTerminal = {
+      kind: 'return',
+      returnVariant: 'Implicit',
+      loc: GeneratedSource,
+      value: lowerExpressionToTemporary(builder, body),
+      id: makeInstructionId(0),
+      effects: null,
+    };
+    builder.terminateWithContinuation(terminal, fallthrough);
+  } else if (body.isBlockStatement()) {
+    lowerStatement(builder, body);
+    directives = body.get('directives').map(d => d.node.value.value);
+  } else {
+    builder.errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Syntax,
+        reason: `Unexpected function body kind`,
+        description: `Expected function body to be an expression or a block statement, got \`${body.type}\``,
+      }).withDetails({
+        kind: 'error',
+        loc: body.node.loc ?? null,
+        message: 'Expected a block statement or expression',
+      }),
+    );
+  }
+
+  let validatedId: HIRFunction['id'] = null;
+  if (id != null) {
+    const idResult = validateIdentifierName(id);
+    if (idResult.isErr()) {
+      builder.errors.merge(idResult.unwrapErr());
+    } else {
+      validatedId = idResult.unwrap().value;
+    }
+  }
+
+  if (builder.errors.hasAnyErrors()) {
+    return Err(builder.errors);
+  }
+
+  builder.terminate(
+    {
+      kind: 'return',
+      returnVariant: 'Void',
+      loc: GeneratedSource,
+      value: lowerValueToTemporary(builder, {
+        kind: 'Primitive',
+        value: undefined,
+        loc: GeneratedSource,
+      }),
+      id: makeInstructionId(0),
+      effects: null,
+    },
+    null,
+  );
+
+  return Ok({
+    id: validatedId,
+    nameHint: null,
+    params,
+    fnType: bindings == null ? env.fnType : 'Other',
+    returnTypeAnnotation: null, // TODO: extract the actual return type node if present
+    returns: createTemporaryPlace(env, func.node.loc ?? GeneratedSource),
+    body: builder.build(),
+    context,
+    generator: func.node.generator === true,
+    async: func.node.async === true,
+    loc: func.node.loc ?? GeneratedSource,
+    env,
+    effects: null,
+    aliasingEffects: null,
+    directives,
+  });
+}
+
+// Helper to lower a statement
+function lowerStatement(
+  builder: HIRBuilder,
+  stmtPath: NodePath<t.Statement>,
+  label: string | null = null,
+): void {
+  const stmtNode = stmtPath.node;
+  switch (stmtNode.type) {
+    case 'ThrowStatement': {
+      const stmt = stmtPath as NodePath<t.ThrowStatement>;
+      const value = lowerExpressionToTemporary(builder, stmt.get('argument'));
+      const handler = builder.resolveThrowHandler();
+      if (handler != null) {
+        /*
+         * NOTE: we could support this, but a `throw` inside try/catch is using exceptions
+         * for control-flow and is generally considered an anti-pattern. we can likely
+         * just not support this pattern, unless it really becomes necessary for some reason.
+         */
+        builder.errors.push({
+          reason:
+            '(BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch',
+          category: ErrorCategory.Todo,
+          loc: stmt.node.loc ?? null,
+          suggestions: null,
+        });
+      }
+      const terminal: ThrowTerminal = {
+        kind: 'throw',
+        value,
+        id: makeInstructionId(0),
+        loc: stmt.node.loc ?? GeneratedSource,
+      };
+      builder.terminate(terminal, 'block');
+      return;
+    }
+    case 'ReturnStatement': {
+      const stmt = stmtPath as NodePath<t.ReturnStatement>;
+      const argument = stmt.get('argument');
+      let value;
+      if (argument.node === null) {
+        value = lowerValueToTemporary(builder, {
+          kind: 'Primitive',
+          value: undefined,
+          loc: GeneratedSource,
+        });
+      } else {
+        value = lowerExpressionToTemporary(
+          builder,
+          argument as NodePath<t.Expression>,
+        );
+      }
+      const terminal: ReturnTerminal = {
+        kind: 'return',
+        returnVariant: 'Explicit',
+        loc: stmt.node.loc ?? GeneratedSource,
+        value,
+        id: makeInstructionId(0),
+        effects: null,
+      };
+      builder.terminate(terminal, 'block');
+      return;
+    }
+    case 'IfStatement': {
+      const stmt = stmtPath as NodePath<t.IfStatement>;
+      //  Block for code following the if
+      const continuationBlock = builder.reserve('block');
+      //  Block for the consequent (if the test is truthy)
+      const consequentBlock = builder.enter('block', _blockId => {
+        const consequent = stmt.get('consequent');
+        lowerStatement(builder, consequent);
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: consequent.node.loc ?? GeneratedSource,
+        };
+      });
+      //  Block for the alternate (if the test is not truthy)
+      let alternateBlock: BlockId;
+      const alternate = stmt.get('alternate');
+      if (hasNode(alternate)) {
+        alternateBlock = builder.enter('block', _blockId => {
+          lowerStatement(builder, alternate);
+          return {
+            kind: 'goto',
+            block: continuationBlock.id,
+            variant: GotoVariant.Break,
+            id: makeInstructionId(0),
+            loc: alternate.node?.loc ?? GeneratedSource,
+          };
+        });
+      } else {
+        //  If there is no else clause, use the continuation directly
+        alternateBlock = continuationBlock.id;
+      }
+      const test = lowerExpressionToTemporary(builder, stmt.get('test'));
+      const terminal: IfTerminal = {
+        kind: 'if',
+        test,
+        consequent: consequentBlock,
+        alternate: alternateBlock,
+        fallthrough: continuationBlock.id,
+        id: makeInstructionId(0),
+        loc: stmt.node.loc ?? GeneratedSource,
+      };
+      builder.terminateWithContinuation(terminal, continuationBlock);
+      return;
+    }
+    case 'BlockStatement': {
+      const stmt = stmtPath as NodePath<t.BlockStatement>;
+      const statements = stmt.get('body');
+      /**
+       * Hoistable identifier bindings defined for this precise block
+       * scope (excluding bindings from parent or child block scopes).
+       */
+      const hoistableIdentifiers: Set<t.Identifier> = new Set();
+
+      for (const [, binding] of Object.entries(stmt.scope.bindings)) {
+        // refs to params are always valid / never need to be hoisted
+        if (binding.kind !== 'param') {
+          hoistableIdentifiers.add(binding.identifier);
+        }
+      }
+
+      for (const s of statements) {
+        const willHoist = new Set<NodePath<t.Identifier>>();
+        /*
+         * If we see a hoistable identifier before its declaration, it should be hoisted just
+         * before the statement that references it.
+         */
+        let fnDepth = s.isFunctionDeclaration() ? 1 : 0;
+        const withFunctionContext = {
+          enter: (): void => {
+            fnDepth++;
+          },
+          exit: (): void => {
+            fnDepth--;
+          },
+        };
+        s.traverse({
+          FunctionExpression: withFunctionContext,
+          FunctionDeclaration: withFunctionContext,
+          ArrowFunctionExpression: withFunctionContext,
+          ObjectMethod: withFunctionContext,
+          Identifier(id: NodePath<t.Identifier>) {
+            const id2 = id;
+            if (
+              !id2.isReferencedIdentifier() &&
+              // isReferencedIdentifier is broken and returns false for reassignments
+              id.parent.type !== 'AssignmentExpression'
+            ) {
+              return;
+            }
+            const binding = id.scope.getBinding(id.node.name);
+            /**
+             * We can only hoist an identifier decl if
+             * 1. the reference occurs within an inner function
+             * or
+             * 2. the declaration itself is hoistable
+             */
+            if (
+              binding != null &&
+              hoistableIdentifiers.has(binding.identifier) &&
+              (fnDepth > 0 || binding.kind === 'hoisted')
+            ) {
+              willHoist.add(id);
+            }
+          },
+        });
+        /*
+         * After visiting the declaration, hoisting is no longer required
+         */
+        s.traverse({
+          Identifier(path: NodePath<t.Identifier>) {
+            if (hoistableIdentifiers.has(path.node)) {
+              hoistableIdentifiers.delete(path.node);
+            }
+          },
+        });
+
+        // Hoist declarations that need it to the earliest point where they are needed
+        for (const id of willHoist) {
+          const binding = stmt.scope.getBinding(id.node.name);
+          CompilerError.invariant(binding != null, {
+            reason: 'Expected to find binding for hoisted identifier',
+            description: `Could not find a binding for ${id.node.name}`,
+            loc: id.node.loc ?? GeneratedSource,
+          });
+          if (builder.environment.isHoistedIdentifier(binding.identifier)) {
+            // Already hoisted
+            continue;
+          }
+
+          let kind:
+            | InstructionKind.Let
+            | InstructionKind.HoistedConst
+            | InstructionKind.HoistedLet
+            | InstructionKind.HoistedFunction;
+          if (binding.kind === 'const' || binding.kind === 'var') {
+            kind = InstructionKind.HoistedConst;
+          } else if (binding.kind === 'let') {
+            kind = InstructionKind.HoistedLet;
+          } else if (binding.path.isFunctionDeclaration()) {
+            kind = InstructionKind.HoistedFunction;
+          } else if (!binding.path.isVariableDeclarator()) {
+            builder.errors.push({
+              category: ErrorCategory.Todo,
+              reason: 'Unsupported declaration type for hoisting',
+              description: `variable "${binding.identifier.name}" declared with ${binding.path.type}`,
+              suggestions: null,
+              loc: id.parentPath.node.loc ?? GeneratedSource,
+            });
+            continue;
+          } else {
+            builder.errors.push({
+              category: ErrorCategory.Todo,
+              reason: 'Handle non-const declarations for hoisting',
+              description: `variable "${binding.identifier.name}" declared with ${binding.kind}`,
+              suggestions: null,
+              loc: id.parentPath.node.loc ?? GeneratedSource,
+            });
+            continue;
+          }
+
+          const identifier = builder.resolveIdentifier(id);
+          CompilerError.invariant(identifier.kind === 'Identifier', {
+            reason:
+              'Expected hoisted binding to be a local identifier, not a global',
+            loc: id.node.loc ?? GeneratedSource,
+          });
+          const place: Place = {
+            effect: Effect.Unknown,
+            identifier: identifier.identifier,
+            kind: 'Identifier',
+            reactive: false,
+            loc: id.node.loc ?? GeneratedSource,
+          };
+          lowerValueToTemporary(builder, {
+            kind: 'DeclareContext',
+            lvalue: {
+              kind,
+              place,
+            },
+            loc: id.node.loc ?? GeneratedSource,
+          });
+          builder.environment.addHoistedIdentifier(binding.identifier);
+        }
+        lowerStatement(builder, s);
+      }
+
+      return;
+    }
+    case 'BreakStatement': {
+      const stmt = stmtPath as NodePath<t.BreakStatement>;
+      const block = builder.lookupBreak(stmt.node.label?.name ?? null);
+      builder.terminate(
+        {
+          kind: 'goto',
+          block,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: stmt.node.loc ?? GeneratedSource,
+        },
+        'block',
+      );
+      return;
+    }
+    case 'ContinueStatement': {
+      const stmt = stmtPath as NodePath<t.ContinueStatement>;
+      const block = builder.lookupContinue(stmt.node.label?.name ?? null);
+      builder.terminate(
+        {
+          kind: 'goto',
+          block,
+          variant: GotoVariant.Continue,
+          id: makeInstructionId(0),
+          loc: stmt.node.loc ?? GeneratedSource,
+        },
+        'block',
+      );
+      return;
+    }
+    case 'ForStatement': {
+      const stmt = stmtPath as NodePath<t.ForStatement>;
+
+      const testBlock = builder.reserve('loop');
+      //  Block for code following the loop
+      const continuationBlock = builder.reserve('block');
+
+      const initBlock = builder.enter('loop', _blockId => {
+        const init = stmt.get('init');
+        if (!init.isVariableDeclaration()) {
+          builder.errors.push({
+            reason:
+              '(BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement',
+            category: ErrorCategory.Todo,
+            loc: stmt.node.loc ?? null,
+            suggestions: null,
+          });
+          return {
+            kind: 'unsupported',
+            id: makeInstructionId(0),
+            loc: init.node?.loc ?? GeneratedSource,
+          };
+        }
+        lowerStatement(builder, init);
+        return {
+          kind: 'goto',
+          block: testBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: init.node.loc ?? GeneratedSource,
+        };
+      });
+
+      let updateBlock: BlockId | null = null;
+      const update = stmt.get('update');
+      if (hasNode(update)) {
+        updateBlock = builder.enter('loop', _blockId => {
+          lowerExpressionToTemporary(builder, update);
+          return {
+            kind: 'goto',
+            block: testBlock.id,
+            variant: GotoVariant.Break,
+            id: makeInstructionId(0),
+            loc: update.node?.loc ?? GeneratedSource,
+          };
+        });
+      }
+
+      const bodyBlock = builder.enter('block', _blockId => {
+        return builder.loop(
+          label,
+          updateBlock ?? testBlock.id,
+          continuationBlock.id,
+          () => {
+            const body = stmt.get('body');
+            lowerStatement(builder, body);
+            return {
+              kind: 'goto',
+              block: updateBlock ?? testBlock.id,
+              variant: GotoVariant.Continue,
+              id: makeInstructionId(0),
+              loc: body.node.loc ?? GeneratedSource,
+            };
+          },
+        );
+      });
+
+      builder.terminateWithContinuation(
+        {
+          kind: 'for',
+          loc: stmtNode.loc ?? GeneratedSource,
+          init: initBlock,
+          test: testBlock.id,
+          update: updateBlock,
+          loop: bodyBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+        },
+        testBlock,
+      );
+
+      const test = stmt.get('test');
+      if (test.node == null) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerStatement) Handle empty test in ForStatement`,
+          category: ErrorCategory.Todo,
+          loc: stmt.node.loc ?? null,
+          suggestions: null,
+        });
+      } else {
+        builder.terminateWithContinuation(
+          {
+            kind: 'branch',
+            test: lowerExpressionToTemporary(
+              builder,
+              test as NodePath<t.Expression>,
+            ),
+            consequent: bodyBlock,
+            alternate: continuationBlock.id,
+            fallthrough: continuationBlock.id,
+            id: makeInstructionId(0),
+            loc: stmt.node.loc ?? GeneratedSource,
+          },
+          continuationBlock,
+        );
+      }
+      return;
+    }
+    case 'WhileStatement': {
+      const stmt = stmtPath as NodePath<t.WhileStatement>;
+      //  Block used to evaluate whether to (re)enter or exit the loop
+      const conditionalBlock = builder.reserve('loop');
+      //  Block for code following the loop
+      const continuationBlock = builder.reserve('block');
+      //  Loop body
+      const loopBlock = builder.enter('block', _blockId => {
+        return builder.loop(
+          label,
+          conditionalBlock.id,
+          continuationBlock.id,
+          () => {
+            const body = stmt.get('body');
+            lowerStatement(builder, body);
+            return {
+              kind: 'goto',
+              block: conditionalBlock.id,
+              variant: GotoVariant.Continue,
+              id: makeInstructionId(0),
+              loc: body.node.loc ?? GeneratedSource,
+            };
+          },
+        );
+      });
+      /*
+       * The code leading up to the loop must jump to the conditional block,
+       * to evaluate whether to enter the loop or bypass to the continuation.
+       */
+      const loc = stmt.node.loc ?? GeneratedSource;
+      builder.terminateWithContinuation(
+        {
+          kind: 'while',
+          loc,
+          test: conditionalBlock.id,
+          loop: loopBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+        },
+        conditionalBlock,
+      );
+      const test = lowerExpressionToTemporary(builder, stmt.get('test'));
+      const terminal: BranchTerminal = {
+        kind: 'branch',
+        test,
+        consequent: loopBlock,
+        alternate: continuationBlock.id,
+        fallthrough: conditionalBlock.id,
+        id: makeInstructionId(0),
+        loc: stmt.node.loc ?? GeneratedSource,
+      };
+      //  Complete the conditional and continue with code after the loop
+      builder.terminateWithContinuation(terminal, continuationBlock);
+      return;
+    }
+    case 'LabeledStatement': {
+      const stmt = stmtPath as NodePath<t.LabeledStatement>;
+      const label = stmt.node.label.name;
+      const body = stmt.get('body');
+      switch (body.node.type) {
+        case 'ForInStatement':
+        case 'ForOfStatement':
+        case 'ForStatement':
+        case 'WhileStatement':
+        case 'DoWhileStatement': {
+          /*
+           * labeled loops are special because of continue, so push the label
+           * down
+           */
+          lowerStatement(builder, stmt.get('body'), label);
+          break;
+        }
+        default: {
+          /*
+           * All other statements create a continuation block to allow `break`,
+           * explicitly *don't* pass the label down
+           */
+          const continuationBlock = builder.reserve('block');
+          const block = builder.enter('block', () => {
+            const body = stmt.get('body');
+            builder.label(label, continuationBlock.id, () => {
+              lowerStatement(builder, body);
+            });
+            return {
+              kind: 'goto',
+              block: continuationBlock.id,
+              variant: GotoVariant.Break,
+              id: makeInstructionId(0),
+              loc: body.node.loc ?? GeneratedSource,
+            };
+          });
+          builder.terminateWithContinuation(
+            {
+              kind: 'label',
+              block,
+              fallthrough: continuationBlock.id,
+              id: makeInstructionId(0),
+              loc: stmt.node.loc ?? GeneratedSource,
+            },
+            continuationBlock,
+          );
+        }
+      }
+      return;
+    }
+    case 'SwitchStatement': {
+      const stmt = stmtPath as NodePath<t.SwitchStatement>;
+      //  Block following the switch
+      const continuationBlock = builder.reserve('block');
+      /*
+       * The goto target for any cases that fallthrough, which initially starts
+       * as the continuation block and is then updated as we iterate through cases
+       * in reverse order.
+       */
+      let fallthrough = continuationBlock.id;
+      /*
+       * Iterate through cases in reverse order, so that previous blocks can fallthrough
+       * to successors
+       */
+      const cases: Array<Case> = [];
+      let hasDefault = false;
+      for (let ii = stmt.get('cases').length - 1; ii >= 0; ii--) {
+        const case_: NodePath<t.SwitchCase> = stmt.get('cases')[ii];
+        const testExpr = case_.get('test');
+        if (testExpr.node == null) {
+          if (hasDefault) {
+            builder.errors.push({
+              reason: `Expected at most one \`default\` branch in a switch statement, this code should have failed to parse`,
+              category: ErrorCategory.Syntax,
+              loc: case_.node.loc ?? null,
+              suggestions: null,
+            });
+            break;
+          }
+          hasDefault = true;
+        }
+        const block = builder.enter('block', _blockId => {
+          return builder.switch(label, continuationBlock.id, () => {
+            case_
+              .get('consequent')
+              .forEach(consequent => lowerStatement(builder, consequent));
+            /*
+             * always generate a fallthrough to the next block, this may be dead code
+             * if there was an explicit break, but if so it will be pruned later.
+             */
+            return {
+              kind: 'goto',
+              block: fallthrough,
+              variant: GotoVariant.Break,
+              id: makeInstructionId(0),
+              loc: case_.node.loc ?? GeneratedSource,
+            };
+          });
+        });
+        let test: Place | null = null;
+        if (hasNode(testExpr)) {
+          test = lowerReorderableExpression(builder, testExpr);
+        }
+        cases.push({
+          test,
+          block,
+        });
+        fallthrough = block;
+      }
+      /*
+       * it doesn't matter for our analysis purposes, but reverse the order of the cases
+       * back to the original to make it match the original code/intent.
+       */
+      cases.reverse();
+      /*
+       * If there wasn't an explicit default case, generate one to model the fact that execution
+       * could bypass any of the other cases and jump directly to the continuation.
+       */
+      if (!hasDefault) {
+        cases.push({test: null, block: continuationBlock.id});
+      }
+
+      const test = lowerExpressionToTemporary(
+        builder,
+        stmt.get('discriminant'),
+      );
+      builder.terminateWithContinuation(
+        {
+          kind: 'switch',
+          test,
+          cases,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc: stmt.node.loc ?? GeneratedSource,
+        },
+        continuationBlock,
+      );
+      return;
+    }
+    case 'VariableDeclaration': {
+      const stmt = stmtPath as NodePath<t.VariableDeclaration>;
+      const nodeKind: t.VariableDeclaration['kind'] = stmt.node.kind;
+      if (nodeKind === 'var') {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerStatement) Handle ${nodeKind} kinds in VariableDeclaration`,
+          category: ErrorCategory.Todo,
+          loc: stmt.node.loc ?? null,
+          suggestions: null,
+        });
+        return;
+      }
+      const kind =
+        nodeKind === 'let' ? InstructionKind.Let : InstructionKind.Const;
+      for (const declaration of stmt.get('declarations')) {
+        const id = declaration.get('id');
+        const init = declaration.get('init');
+        if (hasNode(init)) {
+          const value = lowerExpressionToTemporary(builder, init);
+          lowerAssignment(
+            builder,
+            stmt.node.loc ?? GeneratedSource,
+            kind,
+            id,
+            value,
+            id.isObjectPattern() || id.isArrayPattern()
+              ? 'Destructure'
+              : 'Assignment',
+          );
+        } else if (id.isIdentifier()) {
+          const binding = builder.resolveIdentifier(id);
+          if (binding.kind !== 'Identifier') {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerAssignment) Could not find binding for declaration.`,
+              category: ErrorCategory.Invariant,
+              loc: id.node.loc ?? null,
+              suggestions: null,
+            });
+          } else {
+            const place: Place = {
+              effect: Effect.Unknown,
+              identifier: binding.identifier,
+              kind: 'Identifier',
+              reactive: false,
+              loc: id.node.loc ?? GeneratedSource,
+            };
+            if (builder.isContextIdentifier(id)) {
+              if (kind === InstructionKind.Const) {
+                const declRangeStart = declaration.parentPath.node.start!;
+                builder.errors.push({
+                  reason: `Expect \`const\` declaration not to be reassigned`,
+                  category: ErrorCategory.Syntax,
+                  loc: id.node.loc ?? null,
+                  suggestions: [
+                    {
+                      description: 'Change to a `let` declaration',
+                      op: CompilerSuggestionOperation.Replace,
+                      range: [declRangeStart, declRangeStart + 5], // "const".length
+                      text: 'let',
+                    },
+                  ],
+                });
+              }
+              lowerValueToTemporary(builder, {
+                kind: 'DeclareContext',
+                lvalue: {
+                  kind: InstructionKind.Let,
+                  place,
+                },
+                loc: id.node.loc ?? GeneratedSource,
+              });
+            } else {
+              const typeAnnotation = id.get('typeAnnotation');
+              let type: t.FlowType | t.TSType | null;
+              if (typeAnnotation.isTSTypeAnnotation()) {
+                const typePath = typeAnnotation.get('typeAnnotation');
+                type = typePath.node;
+              } else if (typeAnnotation.isTypeAnnotation()) {
+                const typePath = typeAnnotation.get('typeAnnotation');
+                type = typePath.node;
+              } else {
+                type = null;
+              }
+              lowerValueToTemporary(builder, {
+                kind: 'DeclareLocal',
+                lvalue: {
+                  kind,
+                  place,
+                },
+                type,
+                loc: id.node.loc ?? GeneratedSource,
+              });
+            }
+          }
+        } else {
+          builder.errors.push({
+            reason: `Expected variable declaration to be an identifier if no initializer was provided`,
+            description: `Got a \`${id.type}\``,
+            category: ErrorCategory.Syntax,
+            loc: stmt.node.loc ?? null,
+            suggestions: null,
+          });
+        }
+      }
+      return;
+    }
+    case 'ExpressionStatement': {
+      const stmt = stmtPath as NodePath<t.ExpressionStatement>;
+      const expression = stmt.get('expression');
+      lowerExpressionToTemporary(builder, expression);
+      return;
+    }
+    case 'DoWhileStatement': {
+      const stmt = stmtPath as NodePath<t.DoWhileStatement>;
+      //  Block used to evaluate whether to (re)enter or exit the loop
+      const conditionalBlock = builder.reserve('loop');
+      //  Block for code following the loop
+      const continuationBlock = builder.reserve('block');
+      //  Loop body, executed at least once uncondtionally prior to exit
+      const loopBlock = builder.enter('block', _loopBlockId => {
+        return builder.loop(
+          label,
+          conditionalBlock.id,
+          continuationBlock.id,
+          () => {
+            const body = stmt.get('body');
+            lowerStatement(builder, body);
+            return {
+              kind: 'goto',
+              block: conditionalBlock.id,
+              variant: GotoVariant.Continue,
+              id: makeInstructionId(0),
+              loc: body.node.loc ?? GeneratedSource,
+            };
+          },
+        );
+      });
+      /*
+       * Jump to the conditional block to evaluate whether to (re)enter the loop or exit to the
+       * continuation block.
+       */
+      const loc = stmt.node.loc ?? GeneratedSource;
+      builder.terminateWithContinuation(
+        {
+          kind: 'do-while',
+          loc,
+          test: conditionalBlock.id,
+          loop: loopBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+        },
+        conditionalBlock,
+      );
+      /*
+       * The conditional block is empty and exists solely as conditional for
+       * (re)entering or exiting the loop
+       */
+      const test = lowerExpressionToTemporary(builder, stmt.get('test'));
+      const terminal: BranchTerminal = {
+        kind: 'branch',
+        test,
+        consequent: loopBlock,
+        alternate: continuationBlock.id,
+        fallthrough: conditionalBlock.id,
+        id: makeInstructionId(0),
+        loc,
+      };
+      //  Complete the conditional and continue with code after the loop
+      builder.terminateWithContinuation(terminal, continuationBlock);
+      return;
+    }
+    case 'FunctionDeclaration': {
+      const stmt = stmtPath as NodePath<t.FunctionDeclaration>;
+      stmt.skip();
+      CompilerError.invariant(stmt.get('id').type === 'Identifier', {
+        reason: 'function declarations must have a name',
+        loc: stmt.node.loc ?? GeneratedSource,
+      });
+      const id = stmt.get('id') as NodePath<t.Identifier>;
+
+      const fn = lowerValueToTemporary(
+        builder,
+        lowerFunctionToValue(builder, stmt),
+      );
+      lowerAssignment(
+        builder,
+        stmt.node.loc ?? GeneratedSource,
+        InstructionKind.Function,
+        id,
+        fn,
+        'Assignment',
+      );
+
+      return;
+    }
+    case 'ForOfStatement': {
+      const stmt = stmtPath as NodePath<t.ForOfStatement>;
+      const continuationBlock = builder.reserve('block');
+      const initBlock = builder.reserve('loop');
+      const testBlock = builder.reserve('loop');
+
+      if (stmt.node.await) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerStatement) Handle for-await loops`,
+          category: ErrorCategory.Todo,
+          loc: stmt.node.loc ?? null,
+          suggestions: null,
+        });
+        return;
+      }
+
+      const loopBlock = builder.enter('block', _blockId => {
+        return builder.loop(label, initBlock.id, continuationBlock.id, () => {
+          const body = stmt.get('body');
+          lowerStatement(builder, body);
+          return {
+            kind: 'goto',
+            block: initBlock.id,
+            variant: GotoVariant.Continue,
+            id: makeInstructionId(0),
+            loc: body.node.loc ?? GeneratedSource,
+          };
+        });
+      });
+
+      const loc = stmt.node.loc ?? GeneratedSource;
+      const value = lowerExpressionToTemporary(builder, stmt.get('right'));
+      builder.terminateWithContinuation(
+        {
+          kind: 'for-of',
+          loc,
+          init: initBlock.id,
+          test: testBlock.id,
+          loop: loopBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+        },
+        initBlock,
+      );
+
+      /*
+       * The init of a ForOf statement is compound over a left (VariableDeclaration | LVal) and
+       * right (Expression), so we synthesize a new InstrValue and assignment (potentially multiple
+       * instructions when we handle other syntax like Patterns)
+       */
+      const iterator = lowerValueToTemporary(builder, {
+        kind: 'GetIterator',
+        loc: value.loc,
+        collection: {...value},
+      });
+      builder.terminateWithContinuation(
+        {
+          id: makeInstructionId(0),
+          kind: 'goto',
+          block: testBlock.id,
+          variant: GotoVariant.Break,
+          loc: stmt.node.loc ?? GeneratedSource,
+        },
+        testBlock,
+      );
+
+      const left = stmt.get('left');
+      const leftLoc = left.node.loc ?? GeneratedSource;
+      let test: Place;
+      const advanceIterator = lowerValueToTemporary(builder, {
+        kind: 'IteratorNext',
+        loc: leftLoc,
+        iterator: {...iterator},
+        collection: {...value},
+      });
+      if (left.isVariableDeclaration()) {
+        const declarations = left.get('declarations');
+        CompilerError.invariant(declarations.length === 1, {
+          reason: `Expected only one declaration in the init of a ForOfStatement, got ${declarations.length}`,
+          loc: left.node.loc ?? GeneratedSource,
+        });
+        const id = declarations[0].get('id');
+        const assign = lowerAssignment(
+          builder,
+          leftLoc,
+          InstructionKind.Let,
+          id,
+          advanceIterator,
+          'Assignment',
+        );
+        test = lowerValueToTemporary(builder, assign);
+      } else {
+        CompilerError.invariant(left.isLVal(), {
+          reason: 'Expected ForOf init to be a variable declaration or lval',
+          loc: leftLoc,
+        });
+        const assign = lowerAssignment(
+          builder,
+          leftLoc,
+          InstructionKind.Reassign,
+          left,
+          advanceIterator,
+          'Assignment',
+        );
+        test = lowerValueToTemporary(builder, assign);
+      }
+      builder.terminateWithContinuation(
+        {
+          id: makeInstructionId(0),
+          kind: 'branch',
+          test,
+          consequent: loopBlock,
+          alternate: continuationBlock.id,
+          loc: stmt.node.loc ?? GeneratedSource,
+          fallthrough: continuationBlock.id,
+        },
+        continuationBlock,
+      );
+      return;
+    }
+    case 'ForInStatement': {
+      const stmt = stmtPath as NodePath<t.ForInStatement>;
+      const continuationBlock = builder.reserve('block');
+      const initBlock = builder.reserve('loop');
+
+      const loopBlock = builder.enter('block', _blockId => {
+        return builder.loop(label, initBlock.id, continuationBlock.id, () => {
+          const body = stmt.get('body');
+          lowerStatement(builder, body);
+          return {
+            kind: 'goto',
+            block: initBlock.id,
+            variant: GotoVariant.Continue,
+            id: makeInstructionId(0),
+            loc: body.node.loc ?? GeneratedSource,
+          };
+        });
+      });
+
+      const loc = stmt.node.loc ?? GeneratedSource;
+      const value = lowerExpressionToTemporary(builder, stmt.get('right'));
+      builder.terminateWithContinuation(
+        {
+          kind: 'for-in',
+          loc,
+          init: initBlock.id,
+          loop: loopBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+        },
+        initBlock,
+      );
+
+      /*
+       * The init of a ForIn statement is compound over a left (VariableDeclaration | LVal) and
+       * right (Expression), so we synthesize a new InstrValue and assignment (potentially multiple
+       * instructions when we handle other syntax like Patterns)
+       */
+      const left = stmt.get('left');
+      const leftLoc = left.node.loc ?? GeneratedSource;
+      let test: Place;
+      const nextPropertyTemp = lowerValueToTemporary(builder, {
+        kind: 'NextPropertyOf',
+        loc: leftLoc,
+        value,
+      });
+      if (left.isVariableDeclaration()) {
+        const declarations = left.get('declarations');
+        CompilerError.invariant(declarations.length === 1, {
+          reason: `Expected only one declaration in the init of a ForInStatement, got ${declarations.length}`,
+          loc: left.node.loc ?? GeneratedSource,
+        });
+        const id = declarations[0].get('id');
+        const assign = lowerAssignment(
+          builder,
+          leftLoc,
+          InstructionKind.Let,
+          id,
+          nextPropertyTemp,
+          'Assignment',
+        );
+        test = lowerValueToTemporary(builder, assign);
+      } else {
+        CompilerError.invariant(left.isLVal(), {
+          reason: 'Expected ForIn init to be a variable declaration or lval',
+          loc: leftLoc,
+        });
+        const assign = lowerAssignment(
+          builder,
+          leftLoc,
+          InstructionKind.Reassign,
+          left,
+          nextPropertyTemp,
+          'Assignment',
+        );
+        test = lowerValueToTemporary(builder, assign);
+      }
+      builder.terminateWithContinuation(
+        {
+          id: makeInstructionId(0),
+          kind: 'branch',
+          test,
+          consequent: loopBlock,
+          alternate: continuationBlock.id,
+          fallthrough: continuationBlock.id,
+          loc: stmt.node.loc ?? GeneratedSource,
+        },
+        continuationBlock,
+      );
+      return;
+    }
+    case 'DebuggerStatement': {
+      const stmt = stmtPath as NodePath<t.DebuggerStatement>;
+      const loc = stmt.node.loc ?? GeneratedSource;
+      builder.push({
+        id: makeInstructionId(0),
+        lvalue: buildTemporaryPlace(builder, loc),
+        value: {
+          kind: 'Debugger',
+          loc,
+        },
+        effects: null,
+        loc,
+      });
+      return;
+    }
+    case 'EmptyStatement': {
+      return;
+    }
+    case 'TryStatement': {
+      const stmt = stmtPath as NodePath<t.TryStatement>;
+      const continuationBlock = builder.reserve('block');
+
+      const handlerPath = stmt.get('handler');
+      if (!hasNode(handlerPath)) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerStatement) Handle TryStatement without a catch clause`,
+          category: ErrorCategory.Todo,
+          loc: stmt.node.loc ?? null,
+          suggestions: null,
+        });
+        return;
+      }
+      if (hasNode(stmt.get('finalizer'))) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause`,
+          category: ErrorCategory.Todo,
+          loc: stmt.node.loc ?? null,
+          suggestions: null,
+        });
+      }
+
+      const handlerBindingPath = handlerPath.get('param');
+      let handlerBinding: {
+        place: Place;
+        path: NodePath<t.Identifier | t.ArrayPattern | t.ObjectPattern>;
+      } | null = null;
+      if (hasNode(handlerBindingPath)) {
+        const place: Place = {
+          kind: 'Identifier',
+          identifier: builder.makeTemporary(
+            handlerBindingPath.node.loc ?? GeneratedSource,
+          ),
+          effect: Effect.Unknown,
+          reactive: false,
+          loc: handlerBindingPath.node.loc ?? GeneratedSource,
+        };
+        promoteTemporary(place.identifier);
+        lowerValueToTemporary(builder, {
+          kind: 'DeclareLocal',
+          lvalue: {
+            kind: InstructionKind.Catch,
+            place: {...place},
+          },
+          type: null,
+          loc: handlerBindingPath.node.loc ?? GeneratedSource,
+        });
+
+        handlerBinding = {
+          path: handlerBindingPath,
+          place,
+        };
+      }
+
+      const handler = builder.enter('catch', _blockId => {
+        if (handlerBinding !== null) {
+          lowerAssignment(
+            builder,
+            handlerBinding.path.node.loc ?? GeneratedSource,
+            InstructionKind.Catch,
+            handlerBinding.path,
+            {...handlerBinding.place},
+            'Assignment',
+          );
+        }
+        lowerStatement(builder, handlerPath.get('body'));
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: handlerPath.node.loc ?? GeneratedSource,
+        };
+      });
+
+      const block = builder.enter('block', _blockId => {
+        const block = stmt.get('block');
+        builder.enterTryCatch(handler, () => {
+          lowerStatement(builder, block);
+        });
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Try,
+          id: makeInstructionId(0),
+          loc: block.node.loc ?? GeneratedSource,
+        };
+      });
+
+      builder.terminateWithContinuation(
+        {
+          kind: 'try',
+          block,
+          handlerBinding:
+            handlerBinding !== null ? {...handlerBinding.place} : null,
+          handler,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc: stmt.node.loc ?? GeneratedSource,
+        },
+        continuationBlock,
+      );
+
+      return;
+    }
+    case 'WithStatement': {
+      builder.errors.push({
+        reason: `JavaScript 'with' syntax is not supported`,
+        description: `'with' syntax is considered deprecated and removed from JavaScript standards, consider alternatives`,
+        category: ErrorCategory.UnsupportedSyntax,
+        loc: stmtPath.node.loc ?? null,
+        suggestions: null,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'ClassDeclaration': {
+      /**
+       * In theory we could support inline class declarations, but this is rare enough in practice
+       * and complex enough to support that we don't anticipate supporting anytime soon. Developers
+       * are encouraged to lift classes out of component/hook declarations.
+       */
+      builder.errors.push({
+        reason: 'Inline `class` declarations are not supported',
+        description: `Move class declarations outside of components/hooks`,
+        category: ErrorCategory.UnsupportedSyntax,
+        loc: stmtPath.node.loc ?? null,
+        suggestions: null,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'EnumDeclaration':
+    case 'TSEnumDeclaration': {
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'ExportAllDeclaration':
+    case 'ExportDefaultDeclaration':
+    case 'ExportNamedDeclaration':
+    case 'ImportDeclaration':
+    case 'TSExportAssignment':
+    case 'TSImportEqualsDeclaration': {
+      builder.errors.push({
+        reason:
+          'JavaScript `import` and `export` statements may only appear at the top level of a module',
+        category: ErrorCategory.Syntax,
+        loc: stmtPath.node.loc ?? null,
+        suggestions: null,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'TSNamespaceExportDeclaration': {
+      builder.errors.push({
+        reason:
+          'TypeScript `namespace` statements may only appear at the top level of a module',
+        category: ErrorCategory.Syntax,
+        loc: stmtPath.node.loc ?? null,
+        suggestions: null,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'UnsupportedNode',
+        loc: stmtPath.node.loc ?? GeneratedSource,
+        node: stmtPath.node,
+      });
+      return;
+    }
+    case 'DeclareClass':
+    case 'DeclareExportAllDeclaration':
+    case 'DeclareExportDeclaration':
+    case 'DeclareFunction':
+    case 'DeclareInterface':
+    case 'DeclareModule':
+    case 'DeclareModuleExports':
+    case 'DeclareOpaqueType':
+    case 'DeclareTypeAlias':
+    case 'DeclareVariable':
+    case 'InterfaceDeclaration':
+    case 'OpaqueType':
+    case 'TSDeclareFunction':
+    case 'TSInterfaceDeclaration':
+    case 'TSModuleDeclaration':
+    case 'TSTypeAliasDeclaration':
+    case 'TypeAlias': {
+      // We do not preserve type annotations/syntax through transformation
+      return;
+    }
+    default: {
+      return assertExhaustive(
+        stmtNode,
+        `Unsupported statement kind '${
+          (stmtNode as any as NodePath<t.Statement>).type
+        }'`,
+      );
+    }
+  }
+}
+
+function lowerObjectMethod(
+  builder: HIRBuilder,
+  property: NodePath<t.ObjectMethod>,
+): InstructionValue {
+  const loc = property.node.loc ?? GeneratedSource;
+  const loweredFunc = lowerFunction(builder, property);
+  if (!loweredFunc) {
+    return {kind: 'UnsupportedNode', node: property.node, loc: loc};
+  }
+
+  return {
+    kind: 'ObjectMethod',
+    loc,
+    loweredFunc,
+  };
+}
+
+function lowerObjectPropertyKey(
+  builder: HIRBuilder,
+  property: NodePath<t.ObjectProperty | t.ObjectMethod>,
+): ObjectPropertyKey | null {
+  const key = property.get('key');
+  if (key.isStringLiteral()) {
+    return {
+      kind: 'string',
+      name: key.node.value,
+    };
+  } else if (property.node.computed && key.isExpression()) {
+    const place = lowerExpressionToTemporary(builder, key);
+    return {
+      kind: 'computed',
+      name: place,
+    };
+  } else if (key.isIdentifier()) {
+    return {
+      kind: 'identifier',
+      name: key.node.name,
+    };
+  } else if (key.isNumericLiteral()) {
+    return {
+      kind: 'identifier',
+      name: String(key.node.value),
+    };
+  }
+
+  builder.errors.push({
+    reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`,
+    category: ErrorCategory.Todo,
+    loc: key.node.loc ?? null,
+    suggestions: null,
+  });
+  return null;
+}
+
+function lowerExpression(
+  builder: HIRBuilder,
+  exprPath: NodePath<t.Expression>,
+): InstructionValue {
+  const exprNode = exprPath.node;
+  const exprLoc = exprNode.loc ?? GeneratedSource;
+  switch (exprNode.type) {
+    case 'Identifier': {
+      const expr = exprPath as NodePath<t.Identifier>;
+      const place = lowerIdentifier(builder, expr);
+      return {
+        kind: getLoadKind(builder, expr),
+        place,
+        loc: exprLoc,
+      };
+    }
+    case 'NullLiteral': {
+      return {
+        kind: 'Primitive',
+        value: null,
+        loc: exprLoc,
+      };
+    }
+    case 'BooleanLiteral':
+    case 'NumericLiteral':
+    case 'StringLiteral': {
+      const expr = exprPath as NodePath<
+        t.StringLiteral | t.BooleanLiteral | t.NumericLiteral
+      >;
+      const value = expr.node.value;
+      return {
+        kind: 'Primitive',
+        value,
+        loc: exprLoc,
+      };
+    }
+    case 'ObjectExpression': {
+      const expr = exprPath as NodePath<t.ObjectExpression>;
+      const propertyPaths = expr.get('properties');
+      const properties: Array<ObjectProperty | SpreadPattern> = [];
+      for (const propertyPath of propertyPaths) {
+        if (propertyPath.isObjectProperty()) {
+          const loweredKey = lowerObjectPropertyKey(builder, propertyPath);
+          if (!loweredKey) {
+            continue;
+          }
+          const valuePath = propertyPath.get('value');
+          if (!valuePath.isExpression()) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerExpression) Handle ${valuePath.type} values in ObjectExpression`,
+              category: ErrorCategory.Todo,
+              loc: valuePath.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          const value = lowerExpressionToTemporary(builder, valuePath);
+          properties.push({
+            kind: 'ObjectProperty',
+            type: 'property',
+            place: value,
+            key: loweredKey,
+          });
+        } else if (propertyPath.isSpreadElement()) {
+          const place = lowerExpressionToTemporary(
+            builder,
+            propertyPath.get('argument'),
+          );
+          properties.push({
+            kind: 'Spread',
+            place,
+          });
+        } else if (propertyPath.isObjectMethod()) {
+          if (propertyPath.node.kind !== 'method') {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.node.kind} functions in ObjectExpression`,
+              category: ErrorCategory.Todo,
+              loc: propertyPath.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          const method = lowerObjectMethod(builder, propertyPath);
+          const place = lowerValueToTemporary(builder, method);
+          const loweredKey = lowerObjectPropertyKey(builder, propertyPath);
+          if (!loweredKey) {
+            continue;
+          }
+          properties.push({
+            kind: 'ObjectProperty',
+            type: 'method',
+            place,
+            key: loweredKey,
+          });
+        } else {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.type} properties in ObjectExpression`,
+            category: ErrorCategory.Todo,
+            loc: propertyPath.node.loc ?? null,
+            suggestions: null,
+          });
+          continue;
+        }
+      }
+      return {
+        kind: 'ObjectExpression',
+        properties,
+        loc: exprLoc,
+      };
+    }
+    case 'ArrayExpression': {
+      const expr = exprPath as NodePath<t.ArrayExpression>;
+      let elements: ArrayExpression['elements'] = [];
+      for (const element of expr.get('elements')) {
+        if (element.node == null) {
+          elements.push({
+            kind: 'Hole',
+          });
+          continue;
+        } else if (element.isExpression()) {
+          elements.push(lowerExpressionToTemporary(builder, element));
+        } else if (element.isSpreadElement()) {
+          const place = lowerExpressionToTemporary(
+            builder,
+            element.get('argument'),
+          );
+          elements.push({kind: 'Spread', place});
+        } else {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Handle ${element.type} elements in ArrayExpression`,
+            category: ErrorCategory.Todo,
+            loc: element.node.loc ?? null,
+            suggestions: null,
+          });
+          continue;
+        }
+      }
+      return {
+        kind: 'ArrayExpression',
+        elements,
+        loc: exprLoc,
+      };
+    }
+    case 'NewExpression': {
+      const expr = exprPath as NodePath<t.NewExpression>;
+      const calleePath = expr.get('callee');
+      if (!calleePath.isExpression()) {
+        builder.errors.push({
+          reason: `Expected an expression as the \`new\` expression receiver (v8 intrinsics are not supported)`,
+          description: `Got a \`${calleePath.node.type}\``,
+          category: ErrorCategory.Syntax,
+          loc: calleePath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      const callee = lowerExpressionToTemporary(builder, calleePath);
+      const args = lowerArguments(builder, expr.get('arguments'));
+
+      return {
+        kind: 'NewExpression',
+        callee,
+        args,
+        loc: exprLoc,
+      };
+    }
+    case 'OptionalCallExpression': {
+      const expr = exprPath as NodePath<t.OptionalCallExpression>;
+      return lowerOptionalCallExpression(builder, expr, null);
+    }
+    case 'CallExpression': {
+      const expr = exprPath as NodePath<t.CallExpression>;
+      const calleePath = expr.get('callee');
+      if (!calleePath.isExpression()) {
+        builder.errors.push({
+          reason: `Expected Expression, got ${calleePath.type} in CallExpression (v8 intrinsics not supported). This error is likely caused by a bug in React Compiler. Please file an issue`,
+          category: ErrorCategory.Todo,
+          loc: calleePath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      if (calleePath.isMemberExpression()) {
+        const memberExpr = lowerMemberExpression(builder, calleePath);
+        const propertyPlace = lowerValueToTemporary(builder, memberExpr.value);
+        const args = lowerArguments(builder, expr.get('arguments'));
+        return {
+          kind: 'MethodCall',
+          receiver: memberExpr.object,
+          property: {...propertyPlace},
+          args,
+          loc: exprLoc,
+        };
+      } else {
+        const callee = lowerExpressionToTemporary(builder, calleePath);
+        const args = lowerArguments(builder, expr.get('arguments'));
+        return {
+          kind: 'CallExpression',
+          callee,
+          args,
+          loc: exprLoc,
+        };
+      }
+    }
+    case 'BinaryExpression': {
+      const expr = exprPath as NodePath<t.BinaryExpression>;
+      const leftPath = expr.get('left');
+      if (!leftPath.isExpression()) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerExpression) Expected Expression, got ${leftPath.type} lval in BinaryExpression`,
+          category: ErrorCategory.Todo,
+          loc: leftPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      const left = lowerExpressionToTemporary(builder, leftPath);
+      const right = lowerExpressionToTemporary(builder, expr.get('right'));
+      const operator = expr.node.operator;
+      if (operator === '|>') {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerExpression) Pipe operator not supported`,
+          category: ErrorCategory.Todo,
+          loc: leftPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      return {
+        kind: 'BinaryExpression',
+        operator,
+        left,
+        right,
+        loc: exprLoc,
+      };
+    }
+    case 'SequenceExpression': {
+      const expr = exprPath as NodePath<t.SequenceExpression>;
+      const exprLoc = expr.node.loc ?? GeneratedSource;
+
+      const continuationBlock = builder.reserve(builder.currentBlockKind());
+      const place = buildTemporaryPlace(builder, exprLoc);
+
+      const sequenceBlock = builder.enter('sequence', _ => {
+        let last: Place | null = null;
+        for (const item of expr.get('expressions')) {
+          last = lowerExpressionToTemporary(builder, item);
+        }
+        if (last === null) {
+          builder.errors.push({
+            reason: `Expected sequence expression to have at least one expression`,
+            category: ErrorCategory.Syntax,
+            loc: expr.node.loc ?? null,
+            suggestions: null,
+          });
+        } else {
+          lowerValueToTemporary(builder, {
+            kind: 'StoreLocal',
+            lvalue: {kind: InstructionKind.Const, place: {...place}},
+            value: last,
+            type: null,
+            loc: exprLoc,
+          });
+        }
+        return {
+          kind: 'goto',
+          id: makeInstructionId(0),
+          block: continuationBlock.id,
+          loc: exprLoc,
+          variant: GotoVariant.Break,
+        };
+      });
+
+      builder.terminateWithContinuation(
+        {
+          kind: 'sequence',
+          block: sequenceBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc: exprLoc,
+        },
+        continuationBlock,
+      );
+      return {kind: 'LoadLocal', place, loc: place.loc};
+    }
+    case 'ConditionalExpression': {
+      const expr = exprPath as NodePath<t.ConditionalExpression>;
+      const exprLoc = expr.node.loc ?? GeneratedSource;
+
+      //  Block for code following the if
+      const continuationBlock = builder.reserve(builder.currentBlockKind());
+      const testBlock = builder.reserve('value');
+      const place = buildTemporaryPlace(builder, exprLoc);
+
+      //  Block for the consequent (if the test is truthy)
+      const consequentBlock = builder.enter('value', _blockId => {
+        const consequentPath = expr.get('consequent');
+        const consequent = lowerExpressionToTemporary(builder, consequentPath);
+        lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {kind: InstructionKind.Const, place: {...place}},
+          value: consequent,
+          type: null,
+          loc: exprLoc,
+        });
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: consequentPath.node.loc ?? GeneratedSource,
+        };
+      });
+      //  Block for the alternate (if the test is not truthy)
+      const alternateBlock = builder.enter('value', _blockId => {
+        const alternatePath = expr.get('alternate');
+        const alternate = lowerExpressionToTemporary(builder, alternatePath);
+        lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {kind: InstructionKind.Const, place: {...place}},
+          value: alternate,
+          type: null,
+          loc: exprLoc,
+        });
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: alternatePath.node.loc ?? GeneratedSource,
+        };
+      });
+
+      builder.terminateWithContinuation(
+        {
+          kind: 'ternary',
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          test: testBlock.id,
+          loc: exprLoc,
+        },
+        testBlock,
+      );
+      const testPlace = lowerExpressionToTemporary(builder, expr.get('test'));
+      builder.terminateWithContinuation(
+        {
+          kind: 'branch',
+          test: {...testPlace},
+          consequent: consequentBlock,
+          alternate: alternateBlock,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc: exprLoc,
+        },
+        continuationBlock,
+      );
+      return {kind: 'LoadLocal', place, loc: place.loc};
+    }
+    case 'LogicalExpression': {
+      const expr = exprPath as NodePath<t.LogicalExpression>;
+      const exprLoc = expr.node.loc ?? GeneratedSource;
+      const continuationBlock = builder.reserve(builder.currentBlockKind());
+      const testBlock = builder.reserve('value');
+      const place = buildTemporaryPlace(builder, exprLoc);
+      const leftPlace = buildTemporaryPlace(
+        builder,
+        expr.get('left').node.loc ?? GeneratedSource,
+      );
+      const consequent = builder.enter('value', () => {
+        lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {kind: InstructionKind.Const, place: {...place}},
+          value: {...leftPlace},
+          type: null,
+          loc: leftPlace.loc,
+        });
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: leftPlace.loc,
+        };
+      });
+      const alternate = builder.enter('value', () => {
+        const right = lowerExpressionToTemporary(builder, expr.get('right'));
+        lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {kind: InstructionKind.Const, place: {...place}},
+          value: {...right},
+          type: null,
+          loc: right.loc,
+        });
+        return {
+          kind: 'goto',
+          block: continuationBlock.id,
+          variant: GotoVariant.Break,
+          id: makeInstructionId(0),
+          loc: right.loc,
+        };
+      });
+      builder.terminateWithContinuation(
+        {
+          kind: 'logical',
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          test: testBlock.id,
+          operator: expr.node.operator,
+          loc: exprLoc,
+        },
+        testBlock,
+      );
+      const leftValue = lowerExpressionToTemporary(builder, expr.get('left'));
+      builder.push({
+        id: makeInstructionId(0),
+        lvalue: {...leftPlace},
+        value: {
+          kind: 'LoadLocal',
+          place: leftValue,
+          loc: exprLoc,
+        },
+        effects: null,
+        loc: exprLoc,
+      });
+      builder.terminateWithContinuation(
+        {
+          kind: 'branch',
+          test: {...leftPlace},
+          consequent,
+          alternate,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc: exprLoc,
+        },
+        continuationBlock,
+      );
+      return {kind: 'LoadLocal', place, loc: place.loc};
+    }
+    case 'AssignmentExpression': {
+      const expr = exprPath as NodePath<t.AssignmentExpression>;
+      const operator = expr.node.operator;
+
+      if (operator === '=') {
+        const left = expr.get('left');
+        if (left.isLVal()) {
+          return lowerAssignment(
+            builder,
+            left.node.loc ?? GeneratedSource,
+            InstructionKind.Reassign,
+            left,
+            lowerExpressionToTemporary(builder, expr.get('right')),
+            left.isArrayPattern() || left.isObjectPattern()
+              ? 'Destructure'
+              : 'Assignment',
+          );
+        } else {
+          /**
+           * OptionalMemberExpressions as the left side of an AssignmentExpression are Stage 1 and
+           * not supported by React Compiler yet.
+           */
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Unsupported syntax on the left side of an AssignmentExpression`,
+            description: `Expected an LVal, got: ${left.type}`,
+            category: ErrorCategory.Todo,
+            loc: left.node.loc ?? null,
+            suggestions: null,
+          });
+          return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+        }
+      }
+
+      const operators: {
+        [key: string]: Exclude<t.BinaryExpression['operator'], '|>'>;
+      } = {
+        '+=': '+',
+        '-=': '-',
+        '/=': '/',
+        '%=': '%',
+        '*=': '*',
+        '**=': '**',
+        '&=': '&',
+        '|=': '|',
+        '>>=': '>>',
+        '>>>=': '>>>',
+        '<<=': '<<',
+        '^=': '^',
+      };
+      const binaryOperator = operators[operator];
+      if (binaryOperator == null) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerExpression) Handle ${operator} operators in AssignmentExpression`,
+          category: ErrorCategory.Todo,
+          loc: expr.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      const left = expr.get('left');
+      const leftNode = left.node;
+      switch (leftNode.type) {
+        case 'Identifier': {
+          const leftExpr = left as NodePath<t.Identifier>;
+          const leftPlace = lowerExpressionToTemporary(builder, leftExpr);
+          const right = lowerExpressionToTemporary(builder, expr.get('right'));
+          const binaryPlace = lowerValueToTemporary(builder, {
+            kind: 'BinaryExpression',
+            operator: binaryOperator,
+            left: leftPlace,
+            right,
+            loc: exprLoc,
+          });
+          const binding = builder.resolveIdentifier(leftExpr);
+          if (binding.kind === 'Identifier') {
+            const identifier = lowerIdentifier(builder, leftExpr);
+            const kind = getStoreKind(builder, leftExpr);
+            if (kind === 'StoreLocal') {
+              lowerValueToTemporary(builder, {
+                kind: 'StoreLocal',
+                lvalue: {
+                  place: {...identifier},
+                  kind: InstructionKind.Reassign,
+                },
+                value: {...binaryPlace},
+                type: null,
+                loc: exprLoc,
+              });
+              return {kind: 'LoadLocal', place: identifier, loc: exprLoc};
+            } else {
+              lowerValueToTemporary(builder, {
+                kind: 'StoreContext',
+                lvalue: {
+                  place: {...identifier},
+                  kind: InstructionKind.Reassign,
+                },
+                value: {...binaryPlace},
+                loc: exprLoc,
+              });
+              return {kind: 'LoadContext', place: identifier, loc: exprLoc};
+            }
+          } else {
+            const temporary = lowerValueToTemporary(builder, {
+              kind: 'StoreGlobal',
+              name: leftExpr.node.name,
+              value: {...binaryPlace},
+              loc: exprLoc,
+            });
+            return {kind: 'LoadLocal', place: temporary, loc: temporary.loc};
+          }
+        }
+        case 'MemberExpression': {
+          // a.b.c += <right>
+          const leftExpr = left as NodePath<t.MemberExpression>;
+          const {object, property, value} = lowerMemberExpression(
+            builder,
+            leftExpr,
+          );
+
+          // Store the previous value to a temporary
+          const previousValuePlace = lowerValueToTemporary(builder, value);
+          // Store the new value to a temporary
+          const newValuePlace = lowerValueToTemporary(builder, {
+            kind: 'BinaryExpression',
+            operator: binaryOperator,
+            left: {...previousValuePlace},
+            right: lowerExpressionToTemporary(builder, expr.get('right')),
+            loc: leftExpr.node.loc ?? GeneratedSource,
+          });
+
+          // Save the result back to the property
+          if (typeof property === 'string' || typeof property === 'number') {
+            return {
+              kind: 'PropertyStore',
+              object: {...object},
+              property: makePropertyLiteral(property),
+              value: {...newValuePlace},
+              loc: leftExpr.node.loc ?? GeneratedSource,
+            };
+          } else {
+            return {
+              kind: 'ComputedStore',
+              object: {...object},
+              property: {...property},
+              value: {...newValuePlace},
+              loc: leftExpr.node.loc ?? GeneratedSource,
+            };
+          }
+        }
+        default: {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Expected Identifier or MemberExpression, got ${expr.type} lval in AssignmentExpression`,
+            category: ErrorCategory.Todo,
+            loc: expr.node.loc ?? null,
+            suggestions: null,
+          });
+          return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+        }
+      }
+    }
+    case 'OptionalMemberExpression': {
+      const expr = exprPath as NodePath<t.OptionalMemberExpression>;
+      const {value} = lowerOptionalMemberExpression(builder, expr, null);
+      return {kind: 'LoadLocal', place: value, loc: value.loc};
+    }
+    case 'MemberExpression': {
+      const expr = exprPath as NodePath<
+        t.MemberExpression | t.OptionalMemberExpression
+      >;
+      const {value} = lowerMemberExpression(builder, expr);
+      const place = lowerValueToTemporary(builder, value);
+      return {kind: 'LoadLocal', place, loc: place.loc};
+    }
+    case 'JSXElement': {
+      const expr = exprPath as NodePath<t.JSXElement>;
+      const opening = expr.get('openingElement');
+      const openingLoc = opening.node.loc ?? GeneratedSource;
+      const tag = lowerJsxElementName(builder, opening.get('name'));
+      const props: Array<JsxAttribute> = [];
+      for (const attribute of opening.get('attributes')) {
+        if (attribute.isJSXSpreadAttribute()) {
+          const argument = lowerExpressionToTemporary(
+            builder,
+            attribute.get('argument'),
+          );
+          props.push({kind: 'JsxSpreadAttribute', argument});
+          continue;
+        }
+        if (!attribute.isJSXAttribute()) {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Handle ${attribute.type} attributes in JSXElement`,
+            category: ErrorCategory.Todo,
+            loc: attribute.node.loc ?? null,
+            suggestions: null,
+          });
+          continue;
+        }
+        const namePath = attribute.get('name');
+        let propName;
+        if (namePath.isJSXIdentifier()) {
+          propName = namePath.node.name;
+          if (propName.indexOf(':') !== -1) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerExpression) Unexpected colon in attribute name \`${propName}\``,
+              category: ErrorCategory.Todo,
+              loc: namePath.node.loc ?? null,
+              suggestions: null,
+            });
+          }
+        } else {
+          CompilerError.invariant(namePath.isJSXNamespacedName(), {
+            reason: 'Refinement',
+            loc: namePath.node.loc ?? GeneratedSource,
+          });
+          const namespace = namePath.node.namespace.name;
+          const name = namePath.node.name.name;
+          propName = `${namespace}:${name}`;
+        }
+        const valueExpr = attribute.get('value');
+        let value;
+        if (valueExpr.isJSXElement() || valueExpr.isStringLiteral()) {
+          value = lowerExpressionToTemporary(builder, valueExpr);
+        } else if (valueExpr.type == null) {
+          value = lowerValueToTemporary(builder, {
+            kind: 'Primitive',
+            value: true,
+            loc: attribute.node.loc ?? GeneratedSource,
+          });
+        } else {
+          if (!valueExpr.isJSXExpressionContainer()) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerExpression) Handle ${valueExpr.type} attribute values in JSXElement`,
+              category: ErrorCategory.Todo,
+              loc: valueExpr.node?.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          const expression = valueExpr.get('expression');
+          if (!expression.isExpression()) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerExpression) Handle ${expression.type} expressions in JSXExpressionContainer within JSXElement`,
+              category: ErrorCategory.Todo,
+              loc: valueExpr.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          value = lowerExpressionToTemporary(builder, expression);
+        }
+        props.push({kind: 'JsxAttribute', name: propName, place: value});
+      }
+
+      const isFbt =
+        tag.kind === 'BuiltinTag' && (tag.name === 'fbt' || tag.name === 'fbs');
+      if (isFbt) {
+        const tagName = tag.name;
+        const openingIdentifier = opening.get('name');
+        const tagIdentifier = openingIdentifier.isJSXIdentifier()
+          ? builder.resolveIdentifier(openingIdentifier)
+          : null;
+        if (tagIdentifier != null) {
+          // This is already checked in builder.resolveIdentifier
+          CompilerError.invariant(tagIdentifier.kind !== 'Identifier', {
+            reason: `<${tagName}> tags should be module-level imports`,
+            loc: openingIdentifier.node.loc ?? GeneratedSource,
+          });
+        }
+        // see `error.todo-multiple-fbt-plural` fixture for explanation
+        const fbtLocations = {
+          enum: new Array<SourceLocation>(),
+          plural: new Array<SourceLocation>(),
+          pronoun: new Array<SourceLocation>(),
+        };
+        expr.traverse({
+          JSXClosingElement(path) {
+            path.skip();
+          },
+          JSXNamespacedName(path) {
+            if (path.node.namespace.name === tagName) {
+              switch (path.node.name.name) {
+                case 'enum':
+                  fbtLocations.enum.push(path.node.loc ?? GeneratedSource);
+                  break;
+                case 'plural':
+                  fbtLocations.plural.push(path.node.loc ?? GeneratedSource);
+                  break;
+                case 'pronoun':
+                  fbtLocations.pronoun.push(path.node.loc ?? GeneratedSource);
+                  break;
+              }
+            }
+          },
+        });
+        for (const [name, locations] of Object.entries(fbtLocations)) {
+          if (locations.length > 1) {
+            CompilerError.throwDiagnostic({
+              category: ErrorCategory.Todo,
+              reason: 'Support duplicate fbt tags',
+              description: `Support \`<${tagName}>\` tags with multiple \`<${tagName}:${name}>\` values`,
+              details: locations.map(loc => {
+                return {
+                  kind: 'error',
+                  message: `Multiple \`<${tagName}:${name}>\` tags found`,
+                  loc,
+                };
+              }),
+            });
+          }
+        }
+      }
+
+      /**
+       * Increment fbt counter before traversing into children, as whitespace
+       * in jsx text is handled differently for fbt subtrees.
+       */
+      isFbt && builder.fbtDepth++;
+      const children: Array<Place> = expr
+        .get('children')
+        .map(child => lowerJsxElement(builder, child))
+        .filter(notNull);
+      isFbt && builder.fbtDepth--;
+
+      return {
+        kind: 'JsxExpression',
+        tag,
+        props,
+        children: children.length === 0 ? null : children,
+        loc: exprLoc,
+        openingLoc: openingLoc,
+        closingLoc: expr.get('closingElement').node?.loc ?? GeneratedSource,
+      };
+    }
+    case 'JSXFragment': {
+      const expr = exprPath as NodePath<t.JSXFragment>;
+      const children: Array<Place> = expr
+        .get('children')
+        .map(child => lowerJsxElement(builder, child))
+        .filter(notNull);
+      return {
+        kind: 'JsxFragment',
+        children,
+        loc: exprLoc,
+      };
+    }
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression': {
+      const expr = exprPath as NodePath<
+        t.FunctionExpression | t.ArrowFunctionExpression
+      >;
+      return lowerFunctionToValue(builder, expr);
+    }
+    case 'TaggedTemplateExpression': {
+      const expr = exprPath as NodePath<t.TaggedTemplateExpression>;
+      if (expr.get('quasi').get('expressions').length !== 0) {
+        builder.errors.push({
+          reason:
+            '(BuildHIR::lowerExpression) Handle tagged template with interpolations',
+          category: ErrorCategory.Todo,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      CompilerError.invariant(expr.get('quasi').get('quasis').length == 1, {
+        reason:
+          "there should be only one quasi as we don't support interpolations yet",
+        loc: expr.node.loc ?? GeneratedSource,
+      });
+      const value = expr.get('quasi').get('quasis').at(0)!.node.value;
+      if (value.raw !== value.cooked) {
+        builder.errors.push({
+          reason:
+            '(BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value',
+          category: ErrorCategory.Todo,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+
+      return {
+        kind: 'TaggedTemplateExpression',
+        tag: lowerExpressionToTemporary(builder, expr.get('tag')),
+        value,
+        loc: exprLoc,
+      };
+    }
+    case 'TemplateLiteral': {
+      const expr = exprPath as NodePath<t.TemplateLiteral>;
+      const subexprs = expr.get('expressions');
+      const quasis = expr.get('quasis');
+
+      if (subexprs.length !== quasis.length - 1) {
+        builder.errors.push({
+          reason: `Unexpected quasi and subexpression lengths in template literal`,
+          category: ErrorCategory.Syntax,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+
+      if (subexprs.some(e => !e.isExpression())) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerAssignment) Handle TSType in TemplateLiteral.`,
+          category: ErrorCategory.Todo,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+
+      const subexprPlaces = subexprs.map(e =>
+        lowerExpressionToTemporary(builder, e as NodePath<t.Expression>),
+      );
+
+      return {
+        kind: 'TemplateLiteral',
+        subexprs: subexprPlaces,
+        quasis: expr.get('quasis').map(q => q.node.value),
+        loc: exprLoc,
+      };
+    }
+    case 'UnaryExpression': {
+      let expr = exprPath as NodePath<t.UnaryExpression>;
+      if (expr.node.operator === 'delete') {
+        const argument = expr.get('argument');
+        if (argument.isMemberExpression()) {
+          const {object, property} = lowerMemberExpression(builder, argument);
+          if (typeof property === 'string' || typeof property === 'number') {
+            return {
+              kind: 'PropertyDelete',
+              object,
+              property: makePropertyLiteral(property),
+              loc: exprLoc,
+            };
+          } else {
+            return {
+              kind: 'ComputedDelete',
+              object,
+              property,
+              loc: exprLoc,
+            };
+          }
+        } else {
+          builder.errors.push({
+            reason: `Only object properties can be deleted`,
+            category: ErrorCategory.Syntax,
+            loc: expr.node.loc ?? null,
+            suggestions: [
+              {
+                description: 'Remove this line',
+                range: [expr.node.start!, expr.node.end!],
+                op: CompilerSuggestionOperation.Remove,
+              },
+            ],
+          });
+          return {kind: 'UnsupportedNode', node: expr.node, loc: exprLoc};
+        }
+      } else if (expr.node.operator === 'throw') {
+        builder.errors.push({
+          reason: `Throw expressions are not supported`,
+          category: ErrorCategory.Syntax,
+          loc: expr.node.loc ?? null,
+          suggestions: [
+            {
+              description: 'Remove this line',
+              range: [expr.node.start!, expr.node.end!],
+              op: CompilerSuggestionOperation.Remove,
+            },
+          ],
+        });
+        return {kind: 'UnsupportedNode', node: expr.node, loc: exprLoc};
+      } else {
+        return {
+          kind: 'UnaryExpression',
+          operator: expr.node.operator,
+          value: lowerExpressionToTemporary(builder, expr.get('argument')),
+          loc: exprLoc,
+        };
+      }
+    }
+    case 'AwaitExpression': {
+      let expr = exprPath as NodePath<t.AwaitExpression>;
+      return {
+        kind: 'Await',
+        value: lowerExpressionToTemporary(builder, expr.get('argument')),
+        loc: exprLoc,
+      };
+    }
+    case 'TypeCastExpression': {
+      let expr = exprPath as NodePath<t.TypeCastExpression>;
+      const typeAnnotation = expr.get('typeAnnotation').get('typeAnnotation');
+      return {
+        kind: 'TypeCastExpression',
+        value: lowerExpressionToTemporary(builder, expr.get('expression')),
+        typeAnnotation: typeAnnotation.node,
+        typeAnnotationKind: 'cast',
+        type: lowerType(typeAnnotation.node),
+        loc: exprLoc,
+      };
+    }
+    case 'TSSatisfiesExpression': {
+      let expr = exprPath as NodePath<t.TSSatisfiesExpression>;
+      const typeAnnotation = expr.get('typeAnnotation');
+      return {
+        kind: 'TypeCastExpression',
+        value: lowerExpressionToTemporary(builder, expr.get('expression')),
+        typeAnnotation: typeAnnotation.node,
+        typeAnnotationKind: 'satisfies',
+        type: lowerType(typeAnnotation.node),
+        loc: exprLoc,
+      };
+    }
+    case 'TSAsExpression': {
+      let expr = exprPath as NodePath<t.TSAsExpression>;
+      const typeAnnotation = expr.get('typeAnnotation');
+      return {
+        kind: 'TypeCastExpression',
+        value: lowerExpressionToTemporary(builder, expr.get('expression')),
+        typeAnnotation: typeAnnotation.node,
+        typeAnnotationKind: 'as',
+        type: lowerType(typeAnnotation.node),
+        loc: exprLoc,
+      };
+    }
+    case 'UpdateExpression': {
+      let expr = exprPath as NodePath<t.UpdateExpression>;
+      const argument = expr.get('argument');
+      if (argument.isMemberExpression()) {
+        const binaryOperator = expr.node.operator === '++' ? '+' : '-';
+        const leftExpr = argument as NodePath<t.MemberExpression>;
+        const {object, property, value} = lowerMemberExpression(
+          builder,
+          leftExpr,
+        );
+
+        // Store the previous value to a temporary
+        const previousValuePlace = lowerValueToTemporary(builder, value);
+        // Store the new value to a temporary
+        const updatedValue = lowerValueToTemporary(builder, {
+          kind: 'BinaryExpression',
+          operator: binaryOperator,
+          left: {...previousValuePlace},
+          right: lowerValueToTemporary(builder, {
+            kind: 'Primitive',
+            value: 1,
+            loc: GeneratedSource,
+          }),
+          loc: leftExpr.node.loc ?? GeneratedSource,
+        });
+
+        // Save the result back to the property
+        let newValuePlace;
+        if (typeof property === 'string' || typeof property === 'number') {
+          newValuePlace = lowerValueToTemporary(builder, {
+            kind: 'PropertyStore',
+            object: {...object},
+            property: makePropertyLiteral(property),
+            value: {...updatedValue},
+            loc: leftExpr.node.loc ?? GeneratedSource,
+          });
+        } else {
+          newValuePlace = lowerValueToTemporary(builder, {
+            kind: 'ComputedStore',
+            object: {...object},
+            property: {...property},
+            value: {...updatedValue},
+            loc: leftExpr.node.loc ?? GeneratedSource,
+          });
+        }
+
+        return {
+          kind: 'LoadLocal',
+          place: expr.node.prefix
+            ? {...newValuePlace}
+            : {...previousValuePlace},
+          loc: exprLoc,
+        };
+      }
+      if (!argument.isIdentifier()) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerExpression) Handle UpdateExpression with ${argument.type} argument`,
+          category: ErrorCategory.Todo,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      } else if (builder.isContextIdentifier(argument)) {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerExpression) Handle UpdateExpression to variables captured within lambdas.`,
+          category: ErrorCategory.Todo,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      const lvalue = lowerIdentifierForAssignment(
+        builder,
+        argument.node.loc ?? GeneratedSource,
+        InstructionKind.Reassign,
+        argument,
+      );
+      if (lvalue === null) {
+        /*
+         * lowerIdentifierForAssignment should have already reported an error if it returned null,
+         * we check here just in case
+         */
+        if (!builder.errors.hasAnyErrors()) {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerExpression) Found an invalid UpdateExpression without a previously reported error`,
+            category: ErrorCategory.Invariant,
+            loc: exprLoc,
+            suggestions: null,
+          });
+        }
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      } else if (lvalue.kind === 'Global') {
+        builder.errors.push({
+          reason: `(BuildHIR::lowerExpression) Support UpdateExpression where argument is a global`,
+          category: ErrorCategory.Todo,
+          loc: exprLoc,
+          suggestions: null,
+        });
+        return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+      }
+      const value = lowerIdentifier(builder, argument);
+      if (expr.node.prefix) {
+        return {
+          kind: 'PrefixUpdate',
+          lvalue,
+          operation: expr.node.operator,
+          value,
+          loc: exprLoc,
+        };
+      } else {
+        return {
+          kind: 'PostfixUpdate',
+          lvalue,
+          operation: expr.node.operator,
+          value,
+          loc: exprLoc,
+        };
+      }
+    }
+    case 'RegExpLiteral': {
+      let expr = exprPath as NodePath<t.RegExpLiteral>;
+      return {
+        kind: 'RegExpLiteral',
+        pattern: expr.node.pattern,
+        flags: expr.node.flags,
+        loc: expr.node.loc ?? GeneratedSource,
+      };
+    }
+    case 'TSInstantiationExpression':
+    case 'TSNonNullExpression': {
+      let expr = exprPath as NodePath<t.TSNonNullExpression>;
+      return lowerExpression(builder, expr.get('expression'));
+    }
+    case 'MetaProperty': {
+      let expr = exprPath as NodePath<t.MetaProperty>;
+      if (
+        expr.node.meta.name === 'import' &&
+        expr.node.property.name === 'meta'
+      ) {
+        return {
+          kind: 'MetaProperty',
+          meta: expr.node.meta.name,
+          property: expr.node.property.name,
+          loc: expr.node.loc ?? GeneratedSource,
+        };
+      }
+
+      builder.errors.push({
+        reason: `(BuildHIR::lowerExpression) Handle MetaProperty expressions other than import.meta`,
+        category: ErrorCategory.Todo,
+        loc: exprPath.node.loc ?? null,
+        suggestions: null,
+      });
+      return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+    }
+    default: {
+      builder.errors.push({
+        reason: `(BuildHIR::lowerExpression) Handle ${exprPath.type} expressions`,
+        category: ErrorCategory.Todo,
+        loc: exprPath.node.loc ?? null,
+        suggestions: null,
+      });
+      return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+    }
+  }
+}
+
+function lowerOptionalMemberExpression(
+  builder: HIRBuilder,
+  expr: NodePath<t.OptionalMemberExpression>,
+  parentAlternate: BlockId | null,
+): {object: Place; value: Place} {
+  const optional = expr.node.optional;
+  const loc = expr.node.loc ?? GeneratedSource;
+  const place = buildTemporaryPlace(builder, loc);
+  const continuationBlock = builder.reserve(builder.currentBlockKind());
+  const consequent = builder.reserve('value');
+
+  /*
+   * block to evaluate if the callee is null/undefined, this sets the result of the call to undefined.
+   * note that we only create an alternate when first entering an optional subtree of the ast: if this
+   * is a child of an optional node, we use the alterate created by the parent.
+   */
+  const alternate =
+    parentAlternate !== null
+      ? parentAlternate
+      : builder.enter('value', () => {
+          const temp = lowerValueToTemporary(builder, {
+            kind: 'Primitive',
+            value: undefined,
+            loc,
+          });
+          lowerValueToTemporary(builder, {
+            kind: 'StoreLocal',
+            lvalue: {kind: InstructionKind.Const, place: {...place}},
+            value: {...temp},
+            type: null,
+            loc,
+          });
+          return {
+            kind: 'goto',
+            variant: GotoVariant.Break,
+            block: continuationBlock.id,
+            id: makeInstructionId(0),
+            loc,
+          };
+        });
+
+  let object: Place | null = null;
+  const testBlock = builder.enter('value', () => {
+    const objectPath = expr.get('object');
+    if (objectPath.isOptionalMemberExpression()) {
+      const {value} = lowerOptionalMemberExpression(
+        builder,
+        objectPath,
+        alternate,
+      );
+      object = value;
+    } else if (objectPath.isOptionalCallExpression()) {
+      const value = lowerOptionalCallExpression(builder, objectPath, alternate);
+      object = lowerValueToTemporary(builder, value);
+    } else {
+      object = lowerExpressionToTemporary(builder, objectPath);
+    }
+    return {
+      kind: 'branch',
+      test: {...object},
+      consequent: consequent.id,
+      alternate,
+      fallthrough: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc,
+    };
+  });
+  CompilerError.invariant(object !== null, {
+    reason: 'Satisfy type checker',
+    loc: GeneratedSource,
+  });
+
+  /*
+   * block to evaluate if the callee is non-null/undefined. arguments are lowered in this block to preserve
+   * the semantic of conditional evaluation depending on the callee
+   */
+  builder.enterReserved(consequent, () => {
+    const {value} = lowerMemberExpression(builder, expr, object);
+    const temp = lowerValueToTemporary(builder, value);
+    lowerValueToTemporary(builder, {
+      kind: 'StoreLocal',
+      lvalue: {kind: InstructionKind.Const, place: {...place}},
+      value: {...temp},
+      type: null,
+      loc,
+    });
+    return {
+      kind: 'goto',
+      variant: GotoVariant.Break,
+      block: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc,
+    };
+  });
+
+  builder.terminateWithContinuation(
+    {
+      kind: 'optional',
+      optional,
+      test: testBlock,
+      fallthrough: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc,
+    },
+    continuationBlock,
+  );
+
+  return {object, value: place};
+}
+
+function lowerOptionalCallExpression(
+  builder: HIRBuilder,
+  expr: NodePath<t.OptionalCallExpression>,
+  parentAlternate: BlockId | null,
+): InstructionValue {
+  const optional = expr.node.optional;
+  const calleePath = expr.get('callee');
+  const loc = expr.node.loc ?? GeneratedSource;
+  const place = buildTemporaryPlace(builder, loc);
+  const continuationBlock = builder.reserve(builder.currentBlockKind());
+  const consequent = builder.reserve('value');
+
+  /*
+   * block to evaluate if the callee is null/undefined, this sets the result of the call to undefined.
+   * note that we only create an alternate when first entering an optional subtree of the ast: if this
+   * is a child of an optional node, we use the alterate created by the parent.
+   */
+  const alternate =
+    parentAlternate !== null
+      ? parentAlternate
+      : builder.enter('value', () => {
+          const temp = lowerValueToTemporary(builder, {
+            kind: 'Primitive',
+            value: undefined,
+            loc,
+          });
+          lowerValueToTemporary(builder, {
+            kind: 'StoreLocal',
+            lvalue: {kind: InstructionKind.Const, place: {...place}},
+            value: {...temp},
+            type: null,
+            loc,
+          });
+          return {
+            kind: 'goto',
+            variant: GotoVariant.Break,
+            block: continuationBlock.id,
+            id: makeInstructionId(0),
+            loc,
+          };
+        });
+
+  /*
+   * Lower the callee within the test block to represent the fact that the code for the callee is
+   * scoped within the optional
+   */
+  let callee:
+    | {kind: 'CallExpression'; callee: Place}
+    | {kind: 'MethodCall'; receiver: Place; property: Place};
+  const testBlock = builder.enter('value', () => {
+    if (calleePath.isOptionalCallExpression()) {
+      // Recursively call lowerOptionalCallExpression to thread down the alternate block
+      const value = lowerOptionalCallExpression(builder, calleePath, alternate);
+      const valuePlace = lowerValueToTemporary(builder, value);
+      callee = {
+        kind: 'CallExpression',
+        callee: valuePlace,
+      };
+    } else if (calleePath.isOptionalMemberExpression()) {
+      const {object, value} = lowerOptionalMemberExpression(
+        builder,
+        calleePath,
+        alternate,
+      );
+      callee = {
+        kind: 'MethodCall',
+        receiver: object,
+        property: value,
+      };
+    } else if (calleePath.isMemberExpression()) {
+      const memberExpr = lowerMemberExpression(builder, calleePath);
+      const propertyPlace = lowerValueToTemporary(builder, memberExpr.value);
+      callee = {
+        kind: 'MethodCall',
+        receiver: memberExpr.object,
+        property: propertyPlace,
+      };
+    } else {
+      callee = {
+        kind: 'CallExpression',
+        callee: lowerExpressionToTemporary(builder, calleePath),
+      };
+    }
+    const testPlace =
+      callee.kind === 'CallExpression' ? callee.callee : callee.property;
+    return {
+      kind: 'branch',
+      test: {...testPlace},
+      consequent: consequent.id,
+      alternate,
+      fallthrough: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc,
+    };
+  });
+
+  /*
+   * block to evaluate if the callee is non-null/undefined. arguments are lowered in this block to preserve
+   * the semantic of conditional evaluation depending on the callee
+   */
+  builder.enterReserved(consequent, () => {
+    const args = lowerArguments(builder, expr.get('arguments'));
+    const temp = buildTemporaryPlace(builder, loc);
+    if (callee.kind === 'CallExpression') {
+      builder.push({
+        id: makeInstructionId(0),
+        lvalue: {...temp},
+        value: {
+          kind: 'CallExpression',
+          callee: {...callee.callee},
+          args,
+          loc,
+        },
+        effects: null,
+        loc,
+      });
+    } else {
+      builder.push({
+        id: makeInstructionId(0),
+        lvalue: {...temp},
+        value: {
+          kind: 'MethodCall',
+          receiver: {...callee.receiver},
+          property: {...callee.property},
+          args,
+          loc,
+        },
+        effects: null,
+        loc,
+      });
+    }
+    lowerValueToTemporary(builder, {
+      kind: 'StoreLocal',
+      lvalue: {kind: InstructionKind.Const, place: {...place}},
+      value: {...temp},
+      type: null,
+      loc,
+    });
+    return {
+      kind: 'goto',
+      variant: GotoVariant.Break,
+      block: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc,
+    };
+  });
+
+  builder.terminateWithContinuation(
+    {
+      kind: 'optional',
+      optional,
+      test: testBlock,
+      fallthrough: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc,
+    },
+    continuationBlock,
+  );
+
+  return {kind: 'LoadLocal', place, loc: place.loc};
+}
+
+/*
+ * There are a few places where we do not preserve original evaluation ordering and/or control flow, such as
+ * switch case test values and default values in destructuring (assignment patterns). In these cases we allow
+ * simple expressions whose evaluation cannot be observed:
+ *  - primitives
+ *  - arrays/objects whose values are also safely reorderable.
+ */
+function lowerReorderableExpression(
+  builder: HIRBuilder,
+  expr: NodePath<t.Expression>,
+): Place {
+  if (!isReorderableExpression(builder, expr, true)) {
+    builder.errors.push({
+      reason: `(BuildHIR::node.lowerReorderableExpression) Expression type \`${expr.type}\` cannot be safely reordered`,
+      category: ErrorCategory.Todo,
+      loc: expr.node.loc ?? null,
+      suggestions: null,
+    });
+  }
+  return lowerExpressionToTemporary(builder, expr);
+}
+
+function isReorderableExpression(
+  builder: HIRBuilder,
+  expr: NodePath<t.Expression>,
+  allowLocalIdentifiers: boolean,
+): boolean {
+  switch (expr.node.type) {
+    case 'Identifier': {
+      const binding = builder.resolveIdentifier(expr as NodePath<t.Identifier>);
+      if (binding.kind === 'Identifier') {
+        return allowLocalIdentifiers;
+      } else {
+        // global, definitely safe
+        return true;
+      }
+    }
+    case 'TSInstantiationExpression': {
+      const innerExpr = (expr as NodePath<t.TSInstantiationExpression>).get(
+        'expression',
+      ) as NodePath<t.Expression>;
+      return isReorderableExpression(builder, innerExpr, allowLocalIdentifiers);
+    }
+    case 'RegExpLiteral':
+    case 'StringLiteral':
+    case 'NumericLiteral':
+    case 'NullLiteral':
+    case 'BooleanLiteral':
+    case 'BigIntLiteral': {
+      return true;
+    }
+    case 'UnaryExpression': {
+      const unary = expr as NodePath<t.UnaryExpression>;
+      switch (expr.node.operator) {
+        case '!':
+        case '+':
+        case '-': {
+          return isReorderableExpression(
+            builder,
+            unary.get('argument'),
+            allowLocalIdentifiers,
+          );
+        }
+        default: {
+          return false;
+        }
+      }
+    }
+    case 'TSAsExpression':
+    case 'TSNonNullExpression':
+    case 'TypeCastExpression': {
+      return isReorderableExpression(
+        builder,
+        (expr as NodePath<t.TypeCastExpression>).get('expression'),
+        allowLocalIdentifiers,
+      );
+    }
+    case 'LogicalExpression': {
+      const logical = expr as NodePath<t.LogicalExpression>;
+      return (
+        isReorderableExpression(
+          builder,
+          logical.get('left'),
+          allowLocalIdentifiers,
+        ) &&
+        isReorderableExpression(
+          builder,
+          logical.get('right'),
+          allowLocalIdentifiers,
+        )
+      );
+    }
+    case 'ConditionalExpression': {
+      const conditional = expr as NodePath<t.ConditionalExpression>;
+      return (
+        isReorderableExpression(
+          builder,
+          conditional.get('test'),
+          allowLocalIdentifiers,
+        ) &&
+        isReorderableExpression(
+          builder,
+          conditional.get('consequent'),
+          allowLocalIdentifiers,
+        ) &&
+        isReorderableExpression(
+          builder,
+          conditional.get('alternate'),
+          allowLocalIdentifiers,
+        )
+      );
+    }
+    case 'ArrayExpression': {
+      return (expr as NodePath<t.ArrayExpression>)
+        .get('elements')
+        .every(
+          element =>
+            element.isExpression() &&
+            isReorderableExpression(builder, element, allowLocalIdentifiers),
+        );
+    }
+    case 'ObjectExpression': {
+      return (expr as NodePath<t.ObjectExpression>)
+        .get('properties')
+        .every(property => {
+          if (!property.isObjectProperty() || property.node.computed) {
+            return false;
+          }
+          const value = property.get('value');
+          return (
+            value.isExpression() &&
+            isReorderableExpression(builder, value, allowLocalIdentifiers)
+          );
+        });
+    }
+    case 'MemberExpression': {
+      /*
+       * A common pattern is switch statements where the case test values are properties of a global,
+       * eg `case ProductOptions.Option: { ... }`
+       * We therefore allow expressions where the innermost object is a global identifier, and reject
+       * all other member expressions (for now).
+       */
+      const test = expr as NodePath<t.MemberExpression>;
+      let innerObject: NodePath<t.Expression> = test;
+      while (innerObject.isMemberExpression()) {
+        innerObject = innerObject.get('object');
+      }
+      if (
+        innerObject.isIdentifier() &&
+        builder.resolveIdentifier(innerObject).kind !== 'Identifier'
+      ) {
+        // This is a property/computed load from a global, that's safe to reorder
+        return true;
+      } else {
+        return false;
+      }
+    }
+    case 'ArrowFunctionExpression': {
+      const fn = expr as NodePath<t.ArrowFunctionExpression>;
+      const body = fn.get('body');
+      if (body.node.type === 'BlockStatement') {
+        return body.node.body.length === 0;
+      } else {
+        // For TypeScript
+        invariant(body.isExpression(), 'Expected an expression');
+        return isReorderableExpression(
+          builder,
+          body,
+          /* disallow local identifiers in the body */ false,
+        );
+      }
+    }
+    case 'CallExpression': {
+      const call = expr as NodePath<t.CallExpression>;
+      const callee = call.get('callee');
+      return (
+        callee.isExpression() &&
+        isReorderableExpression(builder, callee, allowLocalIdentifiers) &&
+        call
+          .get('arguments')
+          .every(
+            arg =>
+              arg.isExpression() &&
+              isReorderableExpression(builder, arg, allowLocalIdentifiers),
+          )
+      );
+    }
+    default: {
+      return false;
+    }
+  }
+}
+
+function lowerArguments(
+  builder: HIRBuilder,
+  expr: Array<
+    NodePath<
+      | t.Expression
+      | t.SpreadElement
+      | t.JSXNamespacedName
+      | t.ArgumentPlaceholder
+    >
+  >,
+): Array<Place | SpreadPattern> {
+  let args: Array<Place | SpreadPattern> = [];
+  for (const argPath of expr) {
+    if (argPath.isSpreadElement()) {
+      args.push({
+        kind: 'Spread',
+        place: lowerExpressionToTemporary(builder, argPath.get('argument')),
+      });
+    } else if (argPath.isExpression()) {
+      args.push(lowerExpressionToTemporary(builder, argPath));
+    } else {
+      builder.errors.push({
+        reason: `(BuildHIR::lowerExpression) Handle ${argPath.type} arguments in CallExpression`,
+        category: ErrorCategory.Todo,
+        loc: argPath.node.loc ?? null,
+        suggestions: null,
+      });
+    }
+  }
+  return args;
+}
+
+type LoweredMemberExpression = {
+  object: Place;
+  property: Place | string | number;
+  value: InstructionValue;
+};
+function lowerMemberExpression(
+  builder: HIRBuilder,
+  expr: NodePath<t.MemberExpression | t.OptionalMemberExpression>,
+  loweredObject: Place | null = null,
+): LoweredMemberExpression {
+  const exprNode = expr.node;
+  const exprLoc = exprNode.loc ?? GeneratedSource;
+  const objectNode = expr.get('object');
+  const propertyNode = expr.get('property');
+  const object =
+    loweredObject ?? lowerExpressionToTemporary(builder, objectNode);
+
+  if (!expr.node.computed || expr.node.property.type === 'NumericLiteral') {
+    let property: PropertyLiteral;
+    if (propertyNode.isIdentifier()) {
+      property = makePropertyLiteral(propertyNode.node.name);
+    } else if (propertyNode.isNumericLiteral()) {
+      property = makePropertyLiteral(propertyNode.node.value);
+    } else {
+      builder.errors.push({
+        reason: `(BuildHIR::lowerMemberExpression) Handle ${propertyNode.type} property`,
+        category: ErrorCategory.Todo,
+        loc: propertyNode.node.loc ?? null,
+        suggestions: null,
+      });
+      return {
+        object,
+        property: propertyNode.toString(),
+        value: {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc},
+      };
+    }
+    const value: InstructionValue = {
+      kind: 'PropertyLoad',
+      object: {...object},
+      property,
+      loc: exprLoc,
+    };
+    return {object, property, value};
+  } else {
+    if (!propertyNode.isExpression()) {
+      builder.errors.push({
+        reason: `(BuildHIR::lowerMemberExpression) Expected Expression, got ${propertyNode.type} property`,
+        category: ErrorCategory.Todo,
+        loc: propertyNode.node.loc ?? null,
+        suggestions: null,
+      });
+      return {
+        object,
+        property: propertyNode.toString(),
+        value: {
+          kind: 'UnsupportedNode',
+          node: exprNode,
+          loc: exprLoc,
+        },
+      };
+    }
+    const property = lowerExpressionToTemporary(builder, propertyNode);
+    const value: InstructionValue = {
+      kind: 'ComputedLoad',
+      object: {...object},
+      property: {...property},
+      loc: exprLoc,
+    };
+    return {object, property, value};
+  }
+}
+
+function lowerJsxElementName(
+  builder: HIRBuilder,
+  exprPath: NodePath<
+    t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName
+  >,
+): Place | BuiltinTag {
+  const exprNode = exprPath.node;
+  const exprLoc = exprNode.loc ?? GeneratedSource;
+  if (exprPath.isJSXIdentifier()) {
+    const tag: string = exprPath.node.name;
+    if (tag.match(/^[A-Z]/)) {
+      const kind = getLoadKind(builder, exprPath);
+      return lowerValueToTemporary(builder, {
+        kind: kind,
+        place: lowerIdentifier(builder, exprPath),
+        loc: exprLoc,
+      });
+    } else {
+      return {
+        kind: 'BuiltinTag',
+        name: tag,
+        loc: exprLoc,
+      };
+    }
+  } else if (exprPath.isJSXMemberExpression()) {
+    return lowerJsxMemberExpression(builder, exprPath);
+  } else if (exprPath.isJSXNamespacedName()) {
+    const namespace = exprPath.node.namespace.name;
+    const name = exprPath.node.name.name;
+    const tag = `${namespace}:${name}`;
+    if (namespace.indexOf(':') !== -1 || name.indexOf(':') !== -1) {
+      builder.errors.push({
+        reason: `Expected JSXNamespacedName to have no colons in the namespace or name`,
+        description: `Got \`${namespace}\` : \`${name}\``,
+        category: ErrorCategory.Syntax,
+        loc: exprPath.node.loc ?? null,
+        suggestions: null,
+      });
+    }
+    const place = lowerValueToTemporary(builder, {
+      kind: 'Primitive',
+      value: tag,
+      loc: exprLoc,
+    });
+    return place;
+  } else {
+    builder.errors.push({
+      reason: `(BuildHIR::lowerJsxElementName) Handle ${exprPath.type} tags`,
+      category: ErrorCategory.Todo,
+      loc: exprPath.node.loc ?? null,
+      suggestions: null,
+    });
+    return lowerValueToTemporary(builder, {
+      kind: 'UnsupportedNode',
+      node: exprNode,
+      loc: exprLoc,
+    });
+  }
+}
+
+function lowerJsxMemberExpression(
+  builder: HIRBuilder,
+  exprPath: NodePath<t.JSXMemberExpression>,
+): Place {
+  const loc = exprPath.node.loc ?? GeneratedSource;
+  const object = exprPath.get('object');
+  let objectPlace: Place;
+  if (object.isJSXMemberExpression()) {
+    objectPlace = lowerJsxMemberExpression(builder, object);
+  } else {
+    CompilerError.invariant(object.isJSXIdentifier(), {
+      reason: `TypeScript refinement fail: expected 'JsxIdentifier', got \`${object.node.type}\``,
+      loc: object.node.loc ?? GeneratedSource,
+    });
+
+    const kind = getLoadKind(builder, object);
+    objectPlace = lowerValueToTemporary(builder, {
+      kind: kind,
+      place: lowerIdentifier(builder, object),
+      loc: exprPath.node.loc ?? GeneratedSource,
+    });
+  }
+  const property = exprPath.get('property').node.name;
+  return lowerValueToTemporary(builder, {
+    kind: 'PropertyLoad',
+    object: objectPlace,
+    property: makePropertyLiteral(property),
+    loc,
+  });
+}
+
+function lowerJsxElement(
+  builder: HIRBuilder,
+  exprPath: NodePath<
+    | t.JSXText
+    | t.JSXExpressionContainer
+    | t.JSXSpreadChild
+    | t.JSXElement
+    | t.JSXFragment
+  >,
+): Place | null {
+  const exprNode = exprPath.node;
+  const exprLoc = exprNode.loc ?? GeneratedSource;
+  if (exprPath.isJSXElement() || exprPath.isJSXFragment()) {
+    return lowerExpressionToTemporary(builder, exprPath);
+  } else if (exprPath.isJSXExpressionContainer()) {
+    const expression = exprPath.get('expression');
+    if (expression.isJSXEmptyExpression()) {
+      return null;
+    } else {
+      CompilerError.invariant(expression.isExpression(), {
+        reason: `(BuildHIR::lowerJsxElement) Expected Expression but found ${expression.type}!`,
+        loc: expression.node.loc ?? GeneratedSource,
+      });
+      return lowerExpressionToTemporary(builder, expression);
+    }
+  } else if (exprPath.isJSXText()) {
+    let text: string | null;
+    if (builder.fbtDepth > 0) {
+      /*
+       * FBT whitespace normalization differs from standard JSX.
+       * https://github.com/facebook/fbt/blob/0b4e0d13c30bffd0daa2a75715d606e3587b4e40/packages/babel-plugin-fbt/src/FbtUtil.js#L76-L87
+       * Since the fbt transform runs after, let's just preserve all
+       * whitespace in FBT subtrees as is.
+       */
+      text = exprPath.node.value;
+    } else {
+      text = trimJsxText(exprPath.node.value);
+    }
+
+    if (text === null) {
+      return null;
+    }
+    const place = lowerValueToTemporary(builder, {
+      kind: 'JSXText',
+      value: text,
+      loc: exprLoc,
+    });
+    return place;
+  } else {
+    builder.errors.push({
+      reason: `(BuildHIR::lowerJsxElement) Unhandled JsxElement, got: ${exprPath.type}`,
+      category: ErrorCategory.Todo,
+      loc: exprPath.node.loc ?? null,
+      suggestions: null,
+    });
+    const place = lowerValueToTemporary(builder, {
+      kind: 'UnsupportedNode',
+      node: exprNode,
+      loc: exprLoc,
+    });
+    return place;
+  }
+}
+
+/*
+ * Trims whitespace according to the JSX spec:
+ * > JSX removes whitespace at the beginning and ending of a line.
+ * > It also removes blank lines. New lines adjacent to tags are removed;
+ * > new lines that occur in the middle of string literals are condensed
+ * > into a single space.
+ *
+ * From https://legacy.reactjs.org/docs/jsx-in-depth.html#string-literals-1
+ *
+ * Implementation adapted from Babel:
+ * https://github.com/babel/babel/blob/54d30f206057be64b496d2da1ec8c49d244ba4e4/packages/babel-types/src/utils/react/cleanJSXElementLiteralChild.ts#L5
+ */
+function trimJsxText(original: string): string | null {
+  const lines = original.split(/\r\n|\n|\r/);
+
+  let lastNonEmptyLine = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].match(/[^ \t]/)) {
+      lastNonEmptyLine = i;
+    }
+  }
+
+  let str = '';
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    const isFirstLine = i === 0;
+    const isLastLine = i === lines.length - 1;
+    const isLastNonEmptyLine = i === lastNonEmptyLine;
+
+    // replace rendered whitespace tabs with spaces
+    let trimmedLine = line.replace(/\t/g, ' ');
+
+    // trim whitespace touching a newline
+    if (!isFirstLine) {
+      trimmedLine = trimmedLine.replace(/^[ ]+/, '');
+    }
+
+    // trim whitespace touching an endline
+    if (!isLastLine) {
+      trimmedLine = trimmedLine.replace(/[ ]+$/, '');
+    }
+
+    if (trimmedLine) {
+      if (!isLastNonEmptyLine) {
+        trimmedLine += ' ';
+      }
+
+      str += trimmedLine;
+    }
+  }
+
+  if (str.length !== 0) {
+    return str;
+  } else {
+    return null;
+  }
+}
+
+function lowerFunctionToValue(
+  builder: HIRBuilder,
+  expr: NodePath<
+    t.FunctionExpression | t.ArrowFunctionExpression | t.FunctionDeclaration
+  >,
+): InstructionValue {
+  const exprNode = expr.node;
+  const exprLoc = exprNode.loc ?? GeneratedSource;
+  const loweredFunc = lowerFunction(builder, expr);
+  if (!loweredFunc) {
+    return {kind: 'UnsupportedNode', node: exprNode, loc: exprLoc};
+  }
+  return {
+    kind: 'FunctionExpression',
+    name: loweredFunc.func.id,
+    nameHint: null,
+    type: expr.node.type,
+    loc: exprLoc,
+    loweredFunc,
+  };
+}
+
+function lowerFunction(
+  builder: HIRBuilder,
+  expr: NodePath<
+    | t.FunctionExpression
+    | t.ArrowFunctionExpression
+    | t.FunctionDeclaration
+    | t.ObjectMethod
+  >,
+): LoweredFunction | null {
+  const componentScope: Scope = builder.environment.parentFunction.scope;
+  const capturedContext = gatherCapturedContext(expr, componentScope);
+
+  /*
+   * TODO(gsn): In the future, we could only pass in the context identifiers
+   * that are actually used by this function and it's nested functions, rather
+   * than all context identifiers.
+   *
+   * This isn't a problem in practice because use Babel's scope analysis to
+   * identify the correct references.
+   */
+  const lowering = lower(
+    expr,
+    builder.environment,
+    builder.bindings,
+    new Map([...builder.context, ...capturedContext]),
+  );
+  let loweredFunc: HIRFunction;
+  if (lowering.isErr()) {
+    const functionErrors = lowering.unwrapErr();
+    builder.errors.merge(functionErrors);
+    return null;
+  }
+  loweredFunc = lowering.unwrap();
+  return {
+    func: loweredFunc,
+  };
+}
+
+function lowerExpressionToTemporary(
+  builder: HIRBuilder,
+  exprPath: NodePath<t.Expression>,
+): Place {
+  const value = lowerExpression(builder, exprPath);
+  return lowerValueToTemporary(builder, value);
+}
+
+export function lowerValueToTemporary(
+  builder: HIRBuilder,
+  value: InstructionValue,
+): Place {
+  if (value.kind === 'LoadLocal' && value.place.identifier.name === null) {
+    return value.place;
+  }
+  const place: Place = buildTemporaryPlace(builder, value.loc);
+  builder.push({
+    id: makeInstructionId(0),
+    lvalue: {...place},
+    value: value,
+    effects: null,
+    loc: value.loc,
+  });
+  return place;
+}
+
+function lowerIdentifier(
+  builder: HIRBuilder,
+  exprPath: NodePath<t.Identifier | t.JSXIdentifier>,
+): Place {
+  const exprNode = exprPath.node;
+  const exprLoc = exprNode.loc ?? GeneratedSource;
+  const binding = builder.resolveIdentifier(exprPath);
+  switch (binding.kind) {
+    case 'Identifier': {
+      const place: Place = {
+        kind: 'Identifier',
+        identifier: binding.identifier,
+        effect: Effect.Unknown,
+        reactive: false,
+        loc: exprLoc,
+      };
+      return place;
+    }
+    default: {
+      if (binding.kind === 'Global' && binding.name === 'eval') {
+        builder.errors.push({
+          reason: `The 'eval' function is not supported`,
+          description:
+            'Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler',
+          category: ErrorCategory.UnsupportedSyntax,
+          loc: exprPath.node.loc ?? null,
+          suggestions: null,
+        });
+      }
+      return lowerValueToTemporary(builder, {
+        kind: 'LoadGlobal',
+        binding,
+        loc: exprLoc,
+      });
+    }
+  }
+}
+
+// Creates a temporary Identifier and Place referencing that identifier.
+function buildTemporaryPlace(builder: HIRBuilder, loc: SourceLocation): Place {
+  const place: Place = {
+    kind: 'Identifier',
+    identifier: builder.makeTemporary(loc),
+    effect: Effect.Unknown,
+    reactive: false,
+    loc,
+  };
+  return place;
+}
+
+function getStoreKind(
+  builder: HIRBuilder,
+  identifier: NodePath<t.Identifier>,
+): 'StoreLocal' | 'StoreContext' {
+  const isContext = builder.isContextIdentifier(identifier);
+  return isContext ? 'StoreContext' : 'StoreLocal';
+}
+
+function getLoadKind(
+  builder: HIRBuilder,
+  identifier: NodePath<t.Identifier | t.JSXIdentifier>,
+): 'LoadLocal' | 'LoadContext' {
+  const isContext = builder.isContextIdentifier(identifier);
+  return isContext ? 'LoadContext' : 'LoadLocal';
+}
+
+function lowerIdentifierForAssignment(
+  builder: HIRBuilder,
+  loc: SourceLocation,
+  kind: InstructionKind,
+  path: NodePath<t.Identifier>,
+): Place | {kind: 'Global'; name: string} | null {
+  const binding = builder.resolveIdentifier(path);
+  if (binding.kind !== 'Identifier') {
+    if (kind === InstructionKind.Reassign) {
+      return {kind: 'Global', name: path.node.name};
+    } else {
+      // Else its an internal error bc we couldn't find the binding
+      builder.errors.push({
+        reason: `(BuildHIR::lowerAssignment) Could not find binding for declaration.`,
+        category: ErrorCategory.Invariant,
+        loc: path.node.loc ?? null,
+        suggestions: null,
+      });
+      return null;
+    }
+  } else if (
+    binding.bindingKind === 'const' &&
+    kind === InstructionKind.Reassign
+  ) {
+    builder.errors.push({
+      reason: `Cannot reassign a \`const\` variable`,
+      category: ErrorCategory.Syntax,
+      loc: path.node.loc ?? null,
+      description:
+        binding.identifier.name != null
+          ? `\`${binding.identifier.name.value}\` is declared as const`
+          : null,
+    });
+    return null;
+  }
+
+  const place: Place = {
+    kind: 'Identifier',
+    identifier: binding.identifier,
+    effect: Effect.Unknown,
+    reactive: false,
+    loc,
+  };
+  return place;
+}
+
+function lowerAssignment(
+  builder: HIRBuilder,
+  loc: SourceLocation,
+  kind: InstructionKind,
+  lvaluePath: NodePath<t.LVal>,
+  value: Place,
+  assignmentKind: 'Destructure' | 'Assignment',
+): InstructionValue {
+  const lvalueNode = lvaluePath.node;
+  switch (lvalueNode.type) {
+    case 'Identifier': {
+      const lvalue = lvaluePath as NodePath<t.Identifier>;
+      const place = lowerIdentifierForAssignment(builder, loc, kind, lvalue);
+      if (place === null) {
+        return {
+          kind: 'UnsupportedNode',
+          loc: lvalue.node.loc ?? GeneratedSource,
+          node: lvalue.node,
+        };
+      } else if (place.kind === 'Global') {
+        const temporary = lowerValueToTemporary(builder, {
+          kind: 'StoreGlobal',
+          name: place.name,
+          value,
+          loc,
+        });
+        return {kind: 'LoadLocal', place: temporary, loc: temporary.loc};
+      }
+      const isHoistedIdentifier = builder.environment.isHoistedIdentifier(
+        lvalue.node,
+      );
+
+      let temporary;
+      if (builder.isContextIdentifier(lvalue)) {
+        if (kind === InstructionKind.Const && !isHoistedIdentifier) {
+          builder.errors.push({
+            reason: `Expected \`const\` declaration not to be reassigned`,
+            category: ErrorCategory.Syntax,
+            loc: lvalue.node.loc ?? null,
+            suggestions: null,
+          });
+        }
+
+        if (
+          kind !== InstructionKind.Const &&
+          kind !== InstructionKind.Reassign &&
+          kind !== InstructionKind.Let &&
+          kind !== InstructionKind.Function
+        ) {
+          builder.errors.push({
+            reason: `Unexpected context variable kind`,
+            category: ErrorCategory.Syntax,
+            loc: lvalue.node.loc ?? null,
+            suggestions: null,
+          });
+          temporary = lowerValueToTemporary(builder, {
+            kind: 'UnsupportedNode',
+            node: lvalueNode,
+            loc: lvalueNode.loc ?? GeneratedSource,
+          });
+        } else {
+          temporary = lowerValueToTemporary(builder, {
+            kind: 'StoreContext',
+            lvalue: {place: {...place}, kind},
+            value,
+            loc,
+          });
+        }
+      } else {
+        const typeAnnotation = lvalue.get('typeAnnotation');
+        let type: t.FlowType | t.TSType | null;
+        if (typeAnnotation.isTSTypeAnnotation()) {
+          const typePath = typeAnnotation.get('typeAnnotation');
+          type = typePath.node;
+        } else if (typeAnnotation.isTypeAnnotation()) {
+          const typePath = typeAnnotation.get('typeAnnotation');
+          type = typePath.node;
+        } else {
+          type = null;
+        }
+        temporary = lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {place: {...place}, kind},
+          value,
+          type,
+          loc,
+        });
+      }
+      return {kind: 'LoadLocal', place: temporary, loc: temporary.loc};
+    }
+    case 'MemberExpression': {
+      // This can only occur because of a coding error, parsers enforce this condition
+      CompilerError.invariant(kind === InstructionKind.Reassign, {
+        reason: 'MemberExpression may only appear in an assignment expression',
+        loc: lvaluePath.node.loc ?? GeneratedSource,
+      });
+      const lvalue = lvaluePath as NodePath<t.MemberExpression>;
+      const property = lvalue.get('property');
+      const object = lowerExpressionToTemporary(builder, lvalue.get('object'));
+      if (!lvalue.node.computed || lvalue.get('property').isNumericLiteral()) {
+        let temporary;
+        if (property.isIdentifier()) {
+          temporary = lowerValueToTemporary(builder, {
+            kind: 'PropertyStore',
+            object,
+            property: makePropertyLiteral(property.node.name),
+            value,
+            loc,
+          });
+        } else if (property.isNumericLiteral()) {
+          temporary = lowerValueToTemporary(builder, {
+            kind: 'PropertyStore',
+            object,
+            property: makePropertyLiteral(property.node.value),
+            value,
+            loc,
+          });
+        } else {
+          builder.errors.push({
+            reason: `(BuildHIR::lowerAssignment) Handle ${property.type} properties in MemberExpression`,
+            category: ErrorCategory.Todo,
+            loc: property.node.loc ?? null,
+            suggestions: null,
+          });
+          return {kind: 'UnsupportedNode', node: lvalueNode, loc};
+        }
+        return {kind: 'LoadLocal', place: temporary, loc: temporary.loc};
+      } else {
+        if (!property.isExpression()) {
+          builder.errors.push({
+            reason:
+              '(BuildHIR::lowerAssignment) Expected private name to appear as a non-computed property',
+            category: ErrorCategory.Todo,
+            loc: property.node.loc ?? null,
+            suggestions: null,
+          });
+          return {kind: 'UnsupportedNode', node: lvalueNode, loc};
+        }
+        const propertyPlace = lowerExpressionToTemporary(builder, property);
+        const temporary = lowerValueToTemporary(builder, {
+          kind: 'ComputedStore',
+          object,
+          property: propertyPlace,
+          value,
+          loc,
+        });
+        return {kind: 'LoadLocal', place: temporary, loc: temporary.loc};
+      }
+    }
+    case 'ArrayPattern': {
+      const lvalue = lvaluePath as NodePath<t.ArrayPattern>;
+      const elements = lvalue.get('elements');
+      const items: ArrayPattern['items'] = [];
+      const followups: Array<{place: Place; path: NodePath<t.LVal>}> = [];
+      /*
+       * A given destructuring statement must contain all declarations or all
+       * reassignments. This is enforced by the parser, but we rewrite nested
+       * destructuring into assignment to a temporary. Therefore, if we see
+       * any reassignments that are nested destructuring we fall back to
+       * using temporaries for all variables, and emitting the actual reassignments
+       * in follow-up statements
+       */
+      const forceTemporaries =
+        kind === InstructionKind.Reassign &&
+        (elements.some(element => !element.isIdentifier()) ||
+          elements.some(
+            element =>
+              element.isIdentifier() &&
+              (getStoreKind(builder, element) !== 'StoreLocal' ||
+                builder.resolveIdentifier(element).kind !== 'Identifier'),
+          ));
+      for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        if (element.node == null) {
+          items.push({
+            kind: 'Hole',
+          });
+          continue;
+        }
+        if (element.isRestElement()) {
+          const argument = element.get('argument');
+          if (
+            argument.isIdentifier() &&
+            !forceTemporaries &&
+            (assignmentKind === 'Assignment' ||
+              getStoreKind(builder, argument) === 'StoreLocal')
+          ) {
+            const identifier = lowerIdentifierForAssignment(
+              builder,
+              element.node.loc ?? GeneratedSource,
+              kind,
+              argument,
+            );
+            if (identifier === null) {
+              continue;
+            } else if (identifier.kind === 'Global') {
+              builder.errors.push({
+                category: ErrorCategory.Todo,
+                reason:
+                  'Expected reassignment of globals to enable forceTemporaries',
+                loc: element.node.loc ?? GeneratedSource,
+              });
+              continue;
+            }
+            items.push({
+              kind: 'Spread',
+              place: identifier,
+            });
+          } else {
+            const temp = buildTemporaryPlace(
+              builder,
+              element.node.loc ?? GeneratedSource,
+            );
+            promoteTemporary(temp.identifier);
+            items.push({
+              kind: 'Spread',
+              place: {...temp},
+            });
+            followups.push({place: temp, path: argument as NodePath<t.LVal>}); // TODO remove type cast
+          }
+        } else if (
+          element.isIdentifier() &&
+          !forceTemporaries &&
+          (assignmentKind === 'Assignment' ||
+            getStoreKind(builder, element) === 'StoreLocal')
+        ) {
+          const identifier = lowerIdentifierForAssignment(
+            builder,
+            element.node.loc ?? GeneratedSource,
+            kind,
+            element,
+          );
+          if (identifier === null) {
+            continue;
+          } else if (identifier.kind === 'Global') {
+            builder.errors.push({
+              category: ErrorCategory.Todo,
+              reason:
+                'Expected reassignment of globals to enable forceTemporaries',
+              loc: element.node.loc ?? GeneratedSource,
+            });
+            continue;
+          }
+          items.push(identifier);
+        } else {
+          const temp = buildTemporaryPlace(
+            builder,
+            element.node.loc ?? GeneratedSource,
+          );
+          promoteTemporary(temp.identifier);
+          items.push({...temp});
+          followups.push({place: temp, path: element as NodePath<t.LVal>}); // TODO remove type cast
+        }
+      }
+      const temporary = lowerValueToTemporary(builder, {
+        kind: 'Destructure',
+        lvalue: {
+          kind,
+          pattern: {
+            kind: 'ArrayPattern',
+            items,
+            loc: lvalue.node.loc ?? GeneratedSource,
+          },
+        },
+        value,
+        loc,
+      });
+      for (const {place, path} of followups) {
+        lowerAssignment(
+          builder,
+          path.node.loc ?? loc,
+          kind,
+          path,
+          place,
+          assignmentKind,
+        );
+      }
+      return {kind: 'LoadLocal', place: temporary, loc: value.loc};
+    }
+    case 'ObjectPattern': {
+      const lvalue = lvaluePath as NodePath<t.ObjectPattern>;
+      const propertiesPaths = lvalue.get('properties');
+      const properties: ObjectPattern['properties'] = [];
+      const followups: Array<{place: Place; path: NodePath<t.LVal>}> = [];
+      /*
+       * A given destructuring statement must contain all declarations or all
+       * reassignments. This is enforced by the parser, but we rewrite nested
+       * destructuring into assignment to a temporary. Therefore, if we see
+       * any reassignments that are nested destructuring we fall back to
+       * using temporaries for all variables, and emitting the actual reassignments
+       * in follow-up statements
+       */
+      const forceTemporaries =
+        kind === InstructionKind.Reassign &&
+        propertiesPaths.some(
+          property =>
+            property.isRestElement() ||
+            (property.isObjectProperty() &&
+              (!property.get('value').isIdentifier() ||
+                builder.resolveIdentifier(
+                  property.get('value') as NodePath<t.Identifier>,
+                ).kind !== 'Identifier')),
+        );
+      for (let i = 0; i < propertiesPaths.length; i++) {
+        const property = propertiesPaths[i];
+        if (property.isRestElement()) {
+          const argument = property.get('argument');
+          if (!argument.isIdentifier()) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerAssignment) Handle ${argument.node.type} rest element in ObjectPattern`,
+              category: ErrorCategory.Todo,
+              loc: argument.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          if (
+            forceTemporaries ||
+            getStoreKind(builder, argument) === 'StoreContext'
+          ) {
+            const temp = buildTemporaryPlace(
+              builder,
+              property.node.loc ?? GeneratedSource,
+            );
+            promoteTemporary(temp.identifier);
+            properties.push({
+              kind: 'Spread',
+              place: {...temp},
+            });
+            followups.push({place: temp, path: argument as NodePath<t.LVal>}); // TODO remove type cast
+          } else {
+            const identifier = lowerIdentifierForAssignment(
+              builder,
+              property.node.loc ?? GeneratedSource,
+              kind,
+              argument,
+            );
+            if (identifier === null) {
+              continue;
+            } else if (identifier.kind === 'Global') {
+              builder.errors.push({
+                category: ErrorCategory.Todo,
+                reason:
+                  'Expected reassignment of globals to enable forceTemporaries',
+                loc: property.node.loc ?? GeneratedSource,
+              });
+              continue;
+            }
+            properties.push({
+              kind: 'Spread',
+              place: identifier,
+            });
+          }
+        } else {
+          // TODO: this should always be true given the if/else
+          if (!property.isObjectProperty()) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerAssignment) Handle ${property.type} properties in ObjectPattern`,
+              category: ErrorCategory.Todo,
+              loc: property.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          if (property.node.computed) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern`,
+              category: ErrorCategory.Todo,
+              loc: property.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          const loweredKey = lowerObjectPropertyKey(builder, property);
+          if (!loweredKey) {
+            continue;
+          }
+          const element = property.get('value');
+          if (!element.isLVal()) {
+            builder.errors.push({
+              reason: `(BuildHIR::lowerAssignment) Expected object property value to be an LVal, got: ${element.type}`,
+              category: ErrorCategory.Todo,
+              loc: element.node.loc ?? null,
+              suggestions: null,
+            });
+            continue;
+          }
+          if (
+            element.isIdentifier() &&
+            !forceTemporaries &&
+            (assignmentKind === 'Assignment' ||
+              getStoreKind(builder, element) === 'StoreLocal')
+          ) {
+            const identifier = lowerIdentifierForAssignment(
+              builder,
+              element.node.loc ?? GeneratedSource,
+              kind,
+              element,
+            );
+            if (identifier === null) {
+              continue;
+            } else if (identifier.kind === 'Global') {
+              builder.errors.push({
+                category: ErrorCategory.Todo,
+                reason:
+                  'Expected reassignment of globals to enable forceTemporaries',
+                loc: element.node.loc ?? GeneratedSource,
+              });
+              continue;
+            }
+            properties.push({
+              kind: 'ObjectProperty',
+              type: 'property',
+              place: identifier,
+              key: loweredKey,
+            });
+          } else {
+            const temp = buildTemporaryPlace(
+              builder,
+              element.node.loc ?? GeneratedSource,
+            );
+            promoteTemporary(temp.identifier);
+            properties.push({
+              kind: 'ObjectProperty',
+              type: 'property',
+              place: {...temp},
+              key: loweredKey,
+            });
+            followups.push({place: temp, path: element as NodePath<t.LVal>}); // TODO remove type cast
+          }
+        }
+      }
+      const temporary = lowerValueToTemporary(builder, {
+        kind: 'Destructure',
+        lvalue: {
+          kind,
+          pattern: {
+            kind: 'ObjectPattern',
+            properties,
+            loc: lvalue.node.loc ?? GeneratedSource,
+          },
+        },
+        value,
+        loc,
+      });
+      for (const {place, path} of followups) {
+        lowerAssignment(
+          builder,
+          path.node.loc ?? loc,
+          kind,
+          path,
+          place,
+          assignmentKind,
+        );
+      }
+      return {kind: 'LoadLocal', place: temporary, loc: value.loc};
+    }
+    case 'AssignmentPattern': {
+      const lvalue = lvaluePath as NodePath<t.AssignmentPattern>;
+      const loc = lvalue.node.loc ?? GeneratedSource;
+      const temp = buildTemporaryPlace(builder, loc);
+
+      const testBlock = builder.reserve('value');
+      const continuationBlock = builder.reserve(builder.currentBlockKind());
+
+      const consequent = builder.enter('value', () => {
+        /*
+         * Because we reorder evaluation, we restrict the allowed default values to those where
+         * evaluation order is unobservable
+         */
+        const defaultValue = lowerReorderableExpression(
+          builder,
+          lvalue.get('right'),
+        );
+        lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {kind: InstructionKind.Const, place: {...temp}},
+          value: {...defaultValue},
+          type: null,
+          loc,
+        });
+        return {
+          kind: 'goto',
+          variant: GotoVariant.Break,
+          block: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc,
+        };
+      });
+
+      const alternate = builder.enter('value', () => {
+        lowerValueToTemporary(builder, {
+          kind: 'StoreLocal',
+          lvalue: {kind: InstructionKind.Const, place: {...temp}},
+          value: {...value},
+          type: null,
+          loc,
+        });
+        return {
+          kind: 'goto',
+          variant: GotoVariant.Break,
+          block: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc,
+        };
+      });
+      builder.terminateWithContinuation(
+        {
+          kind: 'ternary',
+          test: testBlock.id,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc,
+        },
+        testBlock,
+      );
+      const undef = lowerValueToTemporary(builder, {
+        kind: 'Primitive',
+        value: undefined,
+        loc,
+      });
+      const test = lowerValueToTemporary(builder, {
+        kind: 'BinaryExpression',
+        left: {...value},
+        operator: '===',
+        right: {...undef},
+        loc,
+      });
+      builder.terminateWithContinuation(
+        {
+          kind: 'branch',
+          test: {...test},
+          consequent,
+          alternate,
+          fallthrough: continuationBlock.id,
+          id: makeInstructionId(0),
+          loc,
+        },
+        continuationBlock,
+      );
+
+      return lowerAssignment(
+        builder,
+        loc,
+        kind,
+        lvalue.get('left'),
+        temp,
+        assignmentKind,
+      );
+    }
+    default: {
+      builder.errors.push({
+        reason: `(BuildHIR::lowerAssignment) Handle ${lvaluePath.type} assignments`,
+        category: ErrorCategory.Todo,
+        loc: lvaluePath.node.loc ?? null,
+        suggestions: null,
+      });
+      return {kind: 'UnsupportedNode', node: lvalueNode, loc};
+    }
+  }
+}
+
+function captureScopes({from, to}: {from: Scope; to: Scope}): Set<Scope> {
+  let scopes: Set<Scope> = new Set();
+  while (from) {
+    scopes.add(from);
+
+    if (from === to) {
+      break;
+    }
+
+    from = from.parent;
+  }
+  return scopes;
+}
+
+/**
+ * Returns a mapping of "context" identifiers — references to free variables that
+ * will become part of the function expression's `context` array — along with the
+ * source location of their first reference within the function.
+ */
+function gatherCapturedContext(
+  fn: NodePath<
+    | t.FunctionExpression
+    | t.ArrowFunctionExpression
+    | t.FunctionDeclaration
+    | t.ObjectMethod
+  >,
+  componentScope: Scope,
+): Map<t.Identifier, SourceLocation> {
+  const capturedIds = new Map<t.Identifier, SourceLocation>();
+
+  /*
+   * Capture all the scopes from the parent of this function up to and including
+   * the component scope.
+   */
+  const pureScopes: Set<Scope> = captureScopes({
+    from: fn.scope.parent,
+    to: componentScope,
+  });
+
+  function handleMaybeDependency(
+    path: NodePath<t.Identifier> | NodePath<t.JSXOpeningElement>,
+  ): void {
+    // Base context variable to depend on
+    let baseIdentifier: NodePath<t.Identifier> | NodePath<t.JSXIdentifier>;
+    if (path.isJSXOpeningElement()) {
+      const name = path.get('name');
+      if (!(name.isJSXMemberExpression() || name.isJSXIdentifier())) {
+        // TODO: should JSX namespaced names be handled here as well?
+        return;
+      }
+      let current: NodePath<t.JSXMemberExpression | t.JSXIdentifier> = name;
+      while (current.isJSXMemberExpression()) {
+        current = current.get('object');
+      }
+      invariant(
+        current.isJSXIdentifier(),
+        'Invalid logic in gatherCapturedDeps',
+      );
+      baseIdentifier = current;
+    } else {
+      baseIdentifier = path;
+    }
+
+    /*
+     * Skip dependency path, as we already tried to recursively add it (+ all subexpressions)
+     * as a dependency.
+     */
+    path.skip();
+
+    // Add the base identifier binding as a dependency.
+    const binding = baseIdentifier.scope.getBinding(baseIdentifier.node.name);
+    if (
+      binding !== undefined &&
+      pureScopes.has(binding.scope) &&
+      !capturedIds.has(binding.identifier)
+    ) {
+      capturedIds.set(
+        binding.identifier,
+        path.node.loc ?? binding.identifier.loc ?? GeneratedSource,
+      );
+    }
+  }
+
+  fn.traverse({
+    TypeAnnotation(path) {
+      path.skip();
+    },
+    TSTypeAnnotation(path) {
+      path.skip();
+    },
+    TypeAlias(path) {
+      path.skip();
+    },
+    TSTypeAliasDeclaration(path) {
+      path.skip();
+    },
+    Expression(path) {
+      if (path.isAssignmentExpression()) {
+        /*
+         * Babel has a bug where it doesn't visit the LHS of an
+         * AssignmentExpression if it's an Identifier. Work around it by explicitly
+         * visiting it.
+         */
+        const left = path.get('left');
+        if (left.isIdentifier()) {
+          handleMaybeDependency(left);
+        }
+        return;
+      } else if (path.isJSXElement()) {
+        handleMaybeDependency(path.get('openingElement'));
+      } else if (path.isIdentifier()) {
+        handleMaybeDependency(path);
+      }
+    },
+  });
+
+  return capturedIds;
+}
+
+function notNull<T>(value: T | null): value is T {
+  return value !== null;
+}
+
+export function lowerType(node: t.FlowType | t.TSType): Type {
+  switch (node.type) {
+    case 'GenericTypeAnnotation': {
+      const id = node.id;
+      if (id.type === 'Identifier' && id.name === 'Array') {
+        return {kind: 'Object', shapeId: BuiltInArrayId};
+      }
+      return makeType();
+    }
+    case 'TSTypeReference': {
+      const typeName = node.typeName;
+      if (typeName.type === 'Identifier' && typeName.name === 'Array') {
+        return {kind: 'Object', shapeId: BuiltInArrayId};
+      }
+      return makeType();
+    }
+    case 'ArrayTypeAnnotation':
+    case 'TSArrayType': {
+      return {kind: 'Object', shapeId: BuiltInArrayId};
+    }
+    case 'BooleanLiteralTypeAnnotation':
+    case 'BooleanTypeAnnotation':
+    case 'NullLiteralTypeAnnotation':
+    case 'NumberLiteralTypeAnnotation':
+    case 'NumberTypeAnnotation':
+    case 'StringLiteralTypeAnnotation':
+    case 'StringTypeAnnotation':
+    case 'TSBooleanKeyword':
+    case 'TSNullKeyword':
+    case 'TSNumberKeyword':
+    case 'TSStringKeyword':
+    case 'TSSymbolKeyword':
+    case 'TSUndefinedKeyword':
+    case 'TSVoidKeyword':
+    case 'VoidTypeAnnotation': {
+      return {kind: 'Primitive'};
+    }
+    default: {
+      return makeType();
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildReactiveScopeTerminalsHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildReactiveScopeTerminalsHIR.ts
new file mode 100644
index 00000000000..6f69af4b4f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildReactiveScopeTerminalsHIR.ts
@@ -0,0 +1,311 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {getScopes, recursivelyTraverseItems} from './AssertValidBlockNesting';
+import {Environment} from './Environment';
+import {
+  BasicBlock,
+  BlockId,
+  GeneratedSource,
+  GotoTerminal,
+  GotoVariant,
+  HIRFunction,
+  InstructionId,
+  ReactiveScope,
+  ReactiveScopeTerminal,
+  ScopeId,
+} from './HIR';
+import {
+  fixScopeAndIdentifierRanges,
+  markInstructionIds,
+  markPredecessors,
+  reversePostorderBlocks,
+} from './HIRBuilder';
+
+/**
+ * This pass assumes that all program blocks are properly nested with respect to fallthroughs
+ * (e.g. a valid javascript AST).
+ * Given a function whose reactive scope ranges have been correctly aligned and merged,
+ * this pass rewrites blocks to introduce ReactiveScopeTerminals and their fallthrough blocks.
+ * e.g.
+ * ```js
+ * // source
+ * [0] ...
+ * [1] const x = [];  ⌝ scope range
+ * [2] if (cond) {    |
+ * [3]  x.push(a);    |
+ *     }              |
+ * [4] x.push(b);     ⌟
+ * [5] ...
+ *
+ * // before this pass
+ * bb0:
+ *  [0]
+ *  [1]
+ *  [2]
+ *  If ($2) then bb1 else bb2 (fallthrough=bb2)
+ * bb1:
+ *  [3]
+ *  Goto bb2
+ * bb2:
+ *  [4]
+ *  [5]
+ *
+ * // after this pass
+ * bb0:
+ *  [0]
+ *  ScopeTerminal goto=bb3 (fallthrough=bb4)    <-- new
+ * bb3:                                         <-- new
+ *  [1]
+ *  [2]
+ *  If ($2) then bb1 else bb2 (fallthrough=bb2)
+ * bb1:
+ *  [3]
+ *  Goto bb2
+ * bb2:
+ *  [4]
+ *  Goto bb4                                    <-- new
+ * bb4:                                         <-- new
+ *  [5]
+ * ```
+ */
+
+export function buildReactiveScopeTerminalsHIR(fn: HIRFunction): void {
+  /**
+   * Step 1:
+   * Traverse all blocks to build up a list of rewrites. We also pre-allocate the
+   * fallthrough ID here as scope start terminals and scope end terminals both
+   * require a fallthrough block.
+   */
+  const queuedRewrites: Array<TerminalRewriteInfo> = [];
+  recursivelyTraverseItems(
+    [...getScopes(fn)],
+    scope => scope.range,
+    {
+      fallthroughs: new Map(),
+      rewrites: queuedRewrites,
+      env: fn.env,
+    },
+    pushStartScopeTerminal,
+    pushEndScopeTerminal,
+  );
+
+  /**
+   * Step 2:
+   * Traverse all blocks to apply rewrites. Here, we split blocks as described at
+   * the top of this file to add scope terminals and fallthroughs.
+   */
+  const rewrittenFinalBlocks = new Map<BlockId, BlockId>();
+  const nextBlocks = new Map<BlockId, BasicBlock>();
+  /**
+   * reverse queuedRewrites to pop off the end as we traverse instructions in
+   * ascending order
+   */
+  queuedRewrites.reverse();
+  for (const [, block] of fn.body.blocks) {
+    const context: RewriteContext = {
+      nextBlockId: block.id,
+      rewrites: [],
+      nextPreds: block.preds,
+      instrSliceIdx: 0,
+      source: block,
+    };
+    /**
+     * Handle queued terminal rewrites at their nearest instruction ID.
+     * Note that multiple terminal rewrites may map to the same instruction ID.
+     */
+    for (let i = 0; i < block.instructions.length + 1; i++) {
+      const instrId =
+        i < block.instructions.length
+          ? block.instructions[i].id
+          : block.terminal.id;
+      let rewrite = queuedRewrites.at(-1);
+      while (rewrite != null && rewrite.instrId <= instrId) {
+        handleRewrite(rewrite, i, context);
+        queuedRewrites.pop();
+        rewrite = queuedRewrites.at(-1);
+      }
+    }
+
+    if (context.rewrites.length > 0) {
+      const finalBlock: BasicBlock = {
+        id: context.nextBlockId,
+        kind: block.kind,
+        preds: context.nextPreds,
+        terminal: block.terminal,
+        instructions: block.instructions.slice(context.instrSliceIdx),
+        phis: new Set(),
+      };
+      context.rewrites.push(finalBlock);
+      for (const b of context.rewrites) {
+        nextBlocks.set(b.id, b);
+      }
+      rewrittenFinalBlocks.set(block.id, finalBlock.id);
+    } else {
+      nextBlocks.set(block.id, block);
+    }
+  }
+  const originalBlocks = fn.body.blocks;
+  fn.body.blocks = nextBlocks;
+
+  /**
+   * Step 3:
+   * Repoint phis when they refer to a rewritten block.
+   */
+  for (const [, block] of originalBlocks) {
+    for (const phi of block.phis) {
+      for (const [originalId, value] of phi.operands) {
+        const newId = rewrittenFinalBlocks.get(originalId);
+        if (newId != null) {
+          phi.operands.delete(originalId);
+          phi.operands.set(newId, value);
+        }
+      }
+    }
+  }
+
+  /**
+   * Step 4:
+   * Fixup the HIR to restore RPO, ensure correct predecessors, and
+   * renumber instructions. Note that the renumbering instructions
+   * invalidates scope and identifier ranges, so we fix them in the
+   * next step.
+   */
+  reversePostorderBlocks(fn.body);
+  markPredecessors(fn.body);
+  markInstructionIds(fn.body);
+
+  /**
+   * Step 5:
+   * Fix scope and identifier ranges to account for renumbered instructions
+   */
+  fixScopeAndIdentifierRanges(fn.body);
+}
+
+type TerminalRewriteInfo =
+  | {
+      kind: 'StartScope';
+      blockId: BlockId;
+      fallthroughId: BlockId;
+      instrId: InstructionId;
+      scope: ReactiveScope;
+    }
+  | {
+      kind: 'EndScope';
+      instrId: InstructionId;
+      fallthroughId: BlockId;
+    };
+
+/**
+ * Helpers for reversing scope ranges to gather terminal rewrite information
+ */
+type ScopeTraversalContext = {
+  // cache allocated fallthroughs for start/end scope terminal pairs
+  fallthroughs: Map<ScopeId, BlockId>;
+  rewrites: Array<TerminalRewriteInfo>;
+  env: Environment;
+};
+
+function pushStartScopeTerminal(
+  scope: ReactiveScope,
+  context: ScopeTraversalContext,
+): void {
+  const blockId = context.env.nextBlockId;
+  const fallthroughId = context.env.nextBlockId;
+  context.rewrites.push({
+    kind: 'StartScope',
+    blockId,
+    fallthroughId,
+    instrId: scope.range.start,
+    scope,
+  });
+  context.fallthroughs.set(scope.id, fallthroughId);
+}
+
+function pushEndScopeTerminal(
+  scope: ReactiveScope,
+  context: ScopeTraversalContext,
+): void {
+  const fallthroughId = context.fallthroughs.get(scope.id);
+  CompilerError.invariant(fallthroughId != null, {
+    reason: 'Expected scope to exist',
+    loc: GeneratedSource,
+  });
+  context.rewrites.push({
+    kind: 'EndScope',
+    fallthroughId,
+    instrId: scope.range.end,
+  });
+}
+
+type RewriteContext = {
+  source: BasicBlock;
+  instrSliceIdx: number;
+  nextPreds: Set<BlockId>;
+  nextBlockId: BlockId;
+  rewrites: Array<BasicBlock>;
+};
+
+/**
+ * Create a block rewrite by slicing a set of instructions from source.
+ * Since scope start-ends always end with a GOTO to the next instruction
+ * from the source block, we directly connect rewritten blocks using state
+ * from `context`.
+ *
+ * Source:
+ *   bb0:
+ *     instr1, instr2, instr3, instr4, [[ original terminal ]]
+ * Rewritten:
+ *   bb0:
+ *     instr1, [[ scope start block=bb1]]
+ *   bb1:
+ *     instr2, instr3, [[ scope end goto=bb2 ]]
+ *   bb2:
+ *     instr4, [[ original terminal ]]
+ */
+function handleRewrite(
+  terminalInfo: TerminalRewriteInfo,
+  idx: number,
+  context: RewriteContext,
+): void {
+  // TODO make consistent instruction IDs instead of reusing
+  const terminal: ReactiveScopeTerminal | GotoTerminal =
+    terminalInfo.kind === 'StartScope'
+      ? {
+          kind: 'scope',
+          fallthrough: terminalInfo.fallthroughId,
+          block: terminalInfo.blockId,
+          scope: terminalInfo.scope,
+          id: terminalInfo.instrId,
+          loc: GeneratedSource,
+        }
+      : {
+          kind: 'goto',
+          variant: GotoVariant.Break,
+          block: terminalInfo.fallthroughId,
+          id: terminalInfo.instrId,
+          loc: GeneratedSource,
+        };
+
+  const currBlockId = context.nextBlockId;
+  context.rewrites.push({
+    kind: context.source.kind,
+    id: currBlockId,
+    instructions: context.source.instructions.slice(context.instrSliceIdx, idx),
+    preds: context.nextPreds,
+    // Only the first rewrite should reuse source block phis
+    phis: context.rewrites.length === 0 ? context.source.phis : new Set(),
+    terminal,
+  });
+  context.nextPreds = new Set([currBlockId]);
+  context.nextBlockId =
+    terminalInfo.kind === 'StartScope'
+      ? terminalInfo.blockId
+      : terminalInfo.fallthroughId;
+  context.instrSliceIdx = idx;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts
new file mode 100644
index 00000000000..77494d0a04e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts
@@ -0,0 +1,810 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {inRange} from '../ReactiveScopes/InferReactiveScopeVariables';
+import {printDependency} from '../ReactiveScopes/PrintReactiveFunction';
+import {
+  Set_equal,
+  Set_filter,
+  Set_intersect,
+  Set_union,
+  getOrInsertDefault,
+} from '../Utils/utils';
+import {
+  BasicBlock,
+  BlockId,
+  DependencyPathEntry,
+  FunctionExpression,
+  GeneratedSource,
+  getHookKind,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  InstructionId,
+  InstructionValue,
+  LoweredFunction,
+  PropertyLiteral,
+  ReactiveScopeDependency,
+  ScopeId,
+  TInstruction,
+} from './HIR';
+
+const DEBUG_PRINT = false;
+
+/**
+ * Helper function for `PropagateScopeDependencies`. Uses control flow graph
+ * analysis to determine which `Identifier`s can be assumed to be non-null
+ * objects, on a per-block basis.
+ *
+ * Here is an example:
+ * ```js
+ * function useFoo(x, y, z) {
+ *   // NOT safe to hoist PropertyLoads here
+ *   if (...) {
+ *     // safe to hoist loads from x
+ *     read(x.a);
+ *     return;
+ *   }
+ *   // safe to hoist loads from y, z
+ *   read(y.b);
+ *   if (...) {
+ *     // safe to hoist loads from y, z
+ *     read(z.a);
+ *   } else {
+ *     // safe to hoist loads from y, z
+ *     read(z.b);
+ *   }
+ *   // safe to hoist loads from y, z
+ *   return;
+ * }
+ * ```
+ *
+ * Note that we currently do NOT account for mutable / declaration range when
+ * doing the CFG-based traversal, producing results that are technically
+ * incorrect but filtered by PropagateScopeDeps (which only takes dependencies
+ * on constructed value -- i.e. a scope's dependencies must have mutable ranges
+ * ending earlier than the scope start).
+ *
+ * Take this example, this function will infer x.foo.bar as non-nullable for
+ * bb0, via the intersection of bb1 & bb2 which in turn comes from bb3. This is
+ * technically incorrect bb0 is before / during x's mutable range.
+ * ```
+ *  bb0:
+ *    const x = ...;
+ *    if cond then bb1 else bb2
+ *  bb1:
+ *    ...
+ *    goto bb3
+ *  bb2:
+ *    ...
+ *    goto bb3:
+ *  bb3:
+ *    x.foo.bar
+ * ```
+ *
+ * @param fn
+ * @param temporaries sidemap of identifier -> baseObject.a.b paths. Does not
+ * contain optional chains.
+ * @param hoistableFromOptionals sidemap of optionalBlock -> baseObject?.a
+ * optional paths for which it's safe to evaluate non-optional loads (see
+ * CollectOptionalChainDependencies).
+ * @returns
+ */
+export function collectHoistablePropertyLoads(
+  fn: HIRFunction,
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+  hoistableFromOptionals: ReadonlyMap<BlockId, ReactiveScopeDependency>,
+): ReadonlyMap<BlockId, BlockInfo> {
+  const registry = new PropertyPathRegistry();
+  /**
+   * Due to current limitations of mutable range inference, there are edge cases in
+   * which we infer known-immutable values (e.g. props or hook params) to have a
+   * mutable range and scope.
+   * (see `destructure-array-declaration-to-context-var` fixture)
+   * We track known immutable identifiers to reduce regressions (as PropagateScopeDeps
+   * is being rewritten to HIR).
+   */
+  const knownImmutableIdentifiers = new Set<IdentifierId>();
+  if (fn.fnType === 'Component' || fn.fnType === 'Hook') {
+    for (const p of fn.params) {
+      if (p.kind === 'Identifier') {
+        knownImmutableIdentifiers.add(p.identifier.id);
+      }
+    }
+  }
+  return collectHoistablePropertyLoadsImpl(fn, {
+    temporaries,
+    knownImmutableIdentifiers,
+    hoistableFromOptionals,
+    registry,
+    nestedFnImmutableContext: null,
+    assumedInvokedFns: fn.env.config.enableTreatFunctionDepsAsConditional
+      ? new Set()
+      : getAssumedInvokedFunctions(fn),
+  });
+}
+
+export function collectHoistablePropertyLoadsInInnerFn(
+  fnInstr: TInstruction<FunctionExpression>,
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+  hoistableFromOptionals: ReadonlyMap<BlockId, ReactiveScopeDependency>,
+): ReadonlyMap<BlockId, BlockInfo> {
+  const fn = fnInstr.value.loweredFunc.func;
+  const initialContext: CollectHoistablePropertyLoadsContext = {
+    temporaries,
+    knownImmutableIdentifiers: new Set(),
+    hoistableFromOptionals,
+    registry: new PropertyPathRegistry(),
+    nestedFnImmutableContext: null,
+    assumedInvokedFns: fn.env.config.enableTreatFunctionDepsAsConditional
+      ? new Set()
+      : getAssumedInvokedFunctions(fn),
+  };
+  const nestedFnImmutableContext = new Set(
+    fn.context
+      .filter(place =>
+        isImmutableAtInstr(place.identifier, fnInstr.id, initialContext),
+      )
+      .map(place => place.identifier.id),
+  );
+  initialContext.nestedFnImmutableContext = nestedFnImmutableContext;
+  return collectHoistablePropertyLoadsImpl(fn, initialContext);
+}
+
+type CollectHoistablePropertyLoadsContext = {
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>;
+  knownImmutableIdentifiers: ReadonlySet<IdentifierId>;
+  hoistableFromOptionals: ReadonlyMap<BlockId, ReactiveScopeDependency>;
+  registry: PropertyPathRegistry;
+  /**
+   * (For nested / inner function declarations)
+   * Context variables (i.e. captured from an outer scope) that are immutable.
+   * Note that this technically could be merged into `knownImmutableIdentifiers`,
+   * but are currently kept separate for readability.
+   */
+  nestedFnImmutableContext: ReadonlySet<IdentifierId> | null;
+  /**
+   * Functions which are assumed to be eventually called (as opposed to ones which might
+   * not be called, e.g. the 0th argument of Array.map)
+   */
+  assumedInvokedFns: ReadonlySet<LoweredFunction>;
+};
+function collectHoistablePropertyLoadsImpl(
+  fn: HIRFunction,
+  context: CollectHoistablePropertyLoadsContext,
+): ReadonlyMap<BlockId, BlockInfo> {
+  const nodes = collectNonNullsInBlocks(fn, context);
+  propagateNonNull(fn, nodes, context.registry);
+
+  if (DEBUG_PRINT) {
+    console.log('(printing hoistable nodes in blocks)');
+    for (const [blockId, node] of nodes) {
+      console.log(
+        `bb${blockId}: ${[...node.assumedNonNullObjects].map(n => printDependency(n.fullPath)).join(' ')}`,
+      );
+    }
+  }
+
+  return nodes;
+}
+
+export function keyByScopeId<T>(
+  fn: HIRFunction,
+  source: ReadonlyMap<BlockId, T>,
+): ReadonlyMap<ScopeId, T> {
+  const keyedByScopeId = new Map<ScopeId, T>();
+  for (const [_, block] of fn.body.blocks) {
+    if (block.terminal.kind === 'scope') {
+      keyedByScopeId.set(
+        block.terminal.scope.id,
+        source.get(block.terminal.block)!,
+      );
+    }
+  }
+  return keyedByScopeId;
+}
+
+export type BlockInfo = {
+  block: BasicBlock;
+  assumedNonNullObjects: ReadonlySet<PropertyPathNode>;
+};
+
+/**
+ * PropertyLoadRegistry data structure to dedupe property loads (e.g. a.b.c)
+ * and make computing sets intersections simpler.
+ */
+type RootNode = {
+  properties: Map<PropertyLiteral, PropertyPathNode>;
+  optionalProperties: Map<PropertyLiteral, PropertyPathNode>;
+  parent: null;
+  // Recorded to make later computations simpler
+  fullPath: ReactiveScopeDependency;
+  hasOptional: boolean;
+  root: IdentifierId;
+};
+
+type PropertyPathNode =
+  | {
+      properties: Map<PropertyLiteral, PropertyPathNode>;
+      optionalProperties: Map<PropertyLiteral, PropertyPathNode>;
+      parent: PropertyPathNode;
+      fullPath: ReactiveScopeDependency;
+      hasOptional: boolean;
+    }
+  | RootNode;
+
+class PropertyPathRegistry {
+  roots: Map<IdentifierId, RootNode> = new Map();
+
+  getOrCreateIdentifier(
+    identifier: Identifier,
+    reactive: boolean,
+  ): PropertyPathNode {
+    /**
+     * Reads from a statically scoped variable are always safe in JS,
+     * with the exception of TDZ (not addressed by this pass).
+     */
+    let rootNode = this.roots.get(identifier.id);
+
+    if (rootNode === undefined) {
+      rootNode = {
+        root: identifier.id,
+        properties: new Map(),
+        optionalProperties: new Map(),
+        fullPath: {
+          identifier,
+          reactive,
+          path: [],
+        },
+        hasOptional: false,
+        parent: null,
+      };
+      this.roots.set(identifier.id, rootNode);
+    } else {
+      CompilerError.invariant(reactive === rootNode.fullPath.reactive, {
+        reason:
+          '[HoistablePropertyLoads] Found inconsistencies in `reactive` flag when deduping identifier reads within the same scope',
+        loc: identifier.loc,
+      });
+    }
+    return rootNode;
+  }
+
+  static getOrCreatePropertyEntry(
+    parent: PropertyPathNode,
+    entry: DependencyPathEntry,
+  ): PropertyPathNode {
+    const map = entry.optional ? parent.optionalProperties : parent.properties;
+    let child = map.get(entry.property);
+    if (child == null) {
+      child = {
+        properties: new Map(),
+        optionalProperties: new Map(),
+        parent: parent,
+        fullPath: {
+          identifier: parent.fullPath.identifier,
+          reactive: parent.fullPath.reactive,
+          path: parent.fullPath.path.concat(entry),
+        },
+        hasOptional: parent.hasOptional || entry.optional,
+      };
+      map.set(entry.property, child);
+    }
+    return child;
+  }
+
+  getOrCreateProperty(n: ReactiveScopeDependency): PropertyPathNode {
+    /**
+     * We add ReactiveScopeDependencies according to instruction ordering,
+     * so all subpaths of a PropertyLoad should already exist
+     * (e.g. a.b is added before a.b.c),
+     */
+    let currNode = this.getOrCreateIdentifier(n.identifier, n.reactive);
+    if (n.path.length === 0) {
+      return currNode;
+    }
+    for (let i = 0; i < n.path.length - 1; i++) {
+      currNode = PropertyPathRegistry.getOrCreatePropertyEntry(
+        currNode,
+        n.path[i],
+      );
+    }
+
+    return PropertyPathRegistry.getOrCreatePropertyEntry(
+      currNode,
+      n.path.at(-1)!,
+    );
+  }
+}
+
+function getMaybeNonNullInInstruction(
+  instr: InstructionValue,
+  context: CollectHoistablePropertyLoadsContext,
+): PropertyPathNode | null {
+  let path: ReactiveScopeDependency | null = null;
+  if (instr.kind === 'PropertyLoad') {
+    path = context.temporaries.get(instr.object.identifier.id) ?? {
+      identifier: instr.object.identifier,
+      reactive: instr.object.reactive,
+      path: [],
+    };
+  } else if (instr.kind === 'Destructure') {
+    path = context.temporaries.get(instr.value.identifier.id) ?? null;
+  } else if (instr.kind === 'ComputedLoad') {
+    path = context.temporaries.get(instr.object.identifier.id) ?? null;
+  }
+  return path != null ? context.registry.getOrCreateProperty(path) : null;
+}
+
+function isImmutableAtInstr(
+  identifier: Identifier,
+  instr: InstructionId,
+  context: CollectHoistablePropertyLoadsContext,
+): boolean {
+  if (context.nestedFnImmutableContext != null) {
+    /**
+     * Comparing instructions ids across inner-outer function bodies is not valid, as they are numbered
+     */
+    return context.nestedFnImmutableContext.has(identifier.id);
+  } else {
+    /**
+     * Since this runs *after* buildReactiveScopeTerminals, identifier mutable ranges
+     * are not valid with respect to current instruction id numbering.
+     * We use attached reactive scope ranges as a proxy for mutable range, but this
+     * is an overestimate as (1) scope ranges merge and align to form valid program
+     * blocks and (2) passes like MemoizeFbtAndMacroOperands may assign scopes to
+     * non-mutable identifiers.
+     *
+     * See comment in exported function for why we track known immutable identifiers.
+     */
+    const mutableAtInstr =
+      identifier.mutableRange.end > identifier.mutableRange.start + 1 &&
+      identifier.scope != null &&
+      inRange(
+        {
+          id: instr,
+        },
+        identifier.scope.range,
+      );
+    return (
+      !mutableAtInstr || context.knownImmutableIdentifiers.has(identifier.id)
+    );
+  }
+}
+
+function collectNonNullsInBlocks(
+  fn: HIRFunction,
+  context: CollectHoistablePropertyLoadsContext,
+): ReadonlyMap<BlockId, BlockInfo> {
+  /**
+   * Known non-null objects such as functional component props can be safely
+   * read from any block.
+   */
+  const knownNonNullIdentifiers = new Set<PropertyPathNode>();
+  if (
+    fn.fnType === 'Component' &&
+    fn.params.length > 0 &&
+    fn.params[0].kind === 'Identifier'
+  ) {
+    const identifier = fn.params[0].identifier;
+    knownNonNullIdentifiers.add(
+      context.registry.getOrCreateIdentifier(identifier, true),
+    );
+  }
+  const nodes = new Map<
+    BlockId,
+    {
+      block: BasicBlock;
+      assumedNonNullObjects: Set<PropertyPathNode>;
+    }
+  >();
+  for (const [_, block] of fn.body.blocks) {
+    const assumedNonNullObjects = new Set<PropertyPathNode>(
+      knownNonNullIdentifiers,
+    );
+
+    const maybeOptionalChain = context.hoistableFromOptionals.get(block.id);
+    if (maybeOptionalChain != null) {
+      assumedNonNullObjects.add(
+        context.registry.getOrCreateProperty(maybeOptionalChain),
+      );
+    }
+    for (const instr of block.instructions) {
+      const maybeNonNull = getMaybeNonNullInInstruction(instr.value, context);
+      if (
+        maybeNonNull != null &&
+        isImmutableAtInstr(maybeNonNull.fullPath.identifier, instr.id, context)
+      ) {
+        assumedNonNullObjects.add(maybeNonNull);
+      }
+      if (instr.value.kind === 'FunctionExpression') {
+        const innerFn = instr.value.loweredFunc;
+        if (context.assumedInvokedFns.has(innerFn)) {
+          const innerHoistableMap = collectHoistablePropertyLoadsImpl(
+            innerFn.func,
+            {
+              ...context,
+              nestedFnImmutableContext:
+                context.nestedFnImmutableContext ??
+                new Set(
+                  innerFn.func.context
+                    .filter(place =>
+                      isImmutableAtInstr(place.identifier, instr.id, context),
+                    )
+                    .map(place => place.identifier.id),
+                ),
+            },
+          );
+          const innerHoistables = assertNonNull(
+            innerHoistableMap.get(innerFn.func.body.entry),
+          );
+          for (const entry of innerHoistables.assumedNonNullObjects) {
+            assumedNonNullObjects.add(entry);
+          }
+        }
+      } else if (
+        fn.env.config.enablePreserveExistingMemoizationGuarantees &&
+        instr.value.kind === 'StartMemoize' &&
+        instr.value.deps != null
+      ) {
+        for (const dep of instr.value.deps) {
+          if (dep.root.kind === 'NamedLocal') {
+            if (
+              !isImmutableAtInstr(dep.root.value.identifier, instr.id, context)
+            ) {
+              continue;
+            }
+            for (let i = 0; i < dep.path.length; i++) {
+              const pathEntry = dep.path[i]!;
+              if (pathEntry.optional) {
+                break;
+              }
+              const depNode = context.registry.getOrCreateProperty({
+                identifier: dep.root.value.identifier,
+                path: dep.path.slice(0, i),
+                reactive: dep.root.value.reactive,
+              });
+              assumedNonNullObjects.add(depNode);
+            }
+          }
+        }
+      }
+    }
+
+    nodes.set(block.id, {
+      block,
+      assumedNonNullObjects,
+    });
+  }
+  return nodes;
+}
+
+function propagateNonNull(
+  fn: HIRFunction,
+  nodes: ReadonlyMap<BlockId, BlockInfo>,
+  registry: PropertyPathRegistry,
+): void {
+  const blockSuccessors = new Map<BlockId, Set<BlockId>>();
+  const terminalPreds = new Set<BlockId>();
+
+  for (const [blockId, block] of fn.body.blocks) {
+    for (const pred of block.preds) {
+      getOrInsertDefault(blockSuccessors, pred, new Set()).add(blockId);
+    }
+    if (block.terminal.kind === 'throw' || block.terminal.kind === 'return') {
+      terminalPreds.add(blockId);
+    }
+  }
+
+  /**
+   * In the context of a control flow graph, the identifiers that a block
+   * can assume are non-null can be calculated from the following:
+   * X = Union(Intersect(X_neighbors), X)
+   */
+  function recursivelyPropagateNonNull(
+    nodeId: BlockId,
+    direction: 'forward' | 'backward',
+    traversalState: Map<BlockId, 'active' | 'done'>,
+  ): boolean {
+    /**
+     * Avoid re-visiting computed or currently active nodes, which can
+     * occur when the control flow graph has backedges.
+     */
+    if (traversalState.has(nodeId)) {
+      return false;
+    }
+    traversalState.set(nodeId, 'active');
+
+    const node = nodes.get(nodeId);
+    if (node == null) {
+      CompilerError.invariant(false, {
+        reason: `Bad node ${nodeId}, kind: ${direction}`,
+        loc: GeneratedSource,
+      });
+    }
+    const neighbors = Array.from(
+      direction === 'backward'
+        ? (blockSuccessors.get(nodeId) ?? [])
+        : node.block.preds,
+    );
+
+    let changed = false;
+    for (const pred of neighbors) {
+      if (!traversalState.has(pred)) {
+        const neighborChanged = recursivelyPropagateNonNull(
+          pred,
+          direction,
+          traversalState,
+        );
+        changed ||= neighborChanged;
+      }
+    }
+    /**
+     * Note that a predecessor / successor can only be active (status != 'done')
+     * if it is a self-loop or other transitive cycle. Active neighbors can be
+     * filtered out (i.e. not included in the intersection)
+     * Example: self loop.
+     *    X = Union(Intersect(X, ...X_other_neighbors), X)
+     *
+     * Example: transitive cycle through node Y, for some Y that is a
+     * predecessor / successor of X.
+     *    X = Union(
+     *          Intersect(
+     *            Union(Intersect(X, ...Y_other_neighbors), Y),
+     *            ...X_neighbors
+     *          ),
+     *          X
+     *        )
+     *
+     * Non-active neighbors with no recorded results can occur due to backedges.
+     * it's not safe to assume they can be filtered out (e.g. not included in
+     * the intersection)
+     */
+    const neighborAccesses = Set_intersect(
+      Array.from(neighbors)
+        .filter(n => traversalState.get(n) === 'done')
+        .map(n => assertNonNull(nodes.get(n)).assumedNonNullObjects),
+    );
+
+    const prevObjects = assertNonNull(nodes.get(nodeId)).assumedNonNullObjects;
+    const mergedObjects = Set_union(prevObjects, neighborAccesses);
+    reduceMaybeOptionalChains(mergedObjects, registry);
+
+    assertNonNull(nodes.get(nodeId)).assumedNonNullObjects = mergedObjects;
+    traversalState.set(nodeId, 'done');
+    /**
+     * Note that it's not sufficient to compare set sizes since
+     * reduceMaybeOptionalChains may replace optional-chain loads with
+     * unconditional loads. This could in turn change `assumedNonNullObjects` of
+     * downstream blocks and backedges.
+     */
+    changed ||= !Set_equal(prevObjects, mergedObjects);
+    return changed;
+  }
+  const traversalState = new Map<BlockId, 'done' | 'active'>();
+  const reversedBlocks = [...fn.body.blocks];
+  reversedBlocks.reverse();
+
+  let changed;
+  let i = 0;
+  do {
+    CompilerError.invariant(i++ < 100, {
+      reason:
+        '[CollectHoistablePropertyLoads] fixed point iteration did not terminate after 100 loops',
+      loc: GeneratedSource,
+    });
+
+    changed = false;
+    for (const [blockId] of fn.body.blocks) {
+      const forwardChanged = recursivelyPropagateNonNull(
+        blockId,
+        'forward',
+        traversalState,
+      );
+      changed ||= forwardChanged;
+    }
+    traversalState.clear();
+    for (const [blockId] of reversedBlocks) {
+      const backwardChanged = recursivelyPropagateNonNull(
+        blockId,
+        'backward',
+        traversalState,
+      );
+      changed ||= backwardChanged;
+    }
+    traversalState.clear();
+  } while (changed);
+}
+
+export function assertNonNull<T extends NonNullable<U>, U>(
+  value: T | null | undefined,
+  source?: string,
+): T {
+  CompilerError.invariant(value != null, {
+    reason: 'Unexpected null',
+    description: source != null ? `(from ${source})` : null,
+    loc: GeneratedSource,
+  });
+  return value;
+}
+
+/**
+ * Any two optional chains with different operations . vs ?. but the same set of
+ * property strings paths de-duplicates.
+ *
+ * Intuitively: given <base>?.b, we know <base> to be either hoistable or not.
+ * If unconditional reads from <base> are hoistable, we can replace all
+ * <base>?.PROPERTY_STRING subpaths with <base>.PROPERTY_STRING
+ */
+function reduceMaybeOptionalChains(
+  nodes: Set<PropertyPathNode>,
+  registry: PropertyPathRegistry,
+): void {
+  let optionalChainNodes = Set_filter(nodes, n => n.hasOptional);
+  if (optionalChainNodes.size === 0) {
+    return;
+  }
+  let changed: boolean;
+  do {
+    changed = false;
+
+    for (const original of optionalChainNodes) {
+      let {identifier, path: origPath, reactive} = original.fullPath;
+      let currNode: PropertyPathNode = registry.getOrCreateIdentifier(
+        identifier,
+        reactive,
+      );
+      for (let i = 0; i < origPath.length; i++) {
+        const entry = origPath[i];
+        // If the base is known to be non-null, replace with a non-optional load
+        const nextEntry: DependencyPathEntry =
+          entry.optional && nodes.has(currNode)
+            ? {property: entry.property, optional: false}
+            : entry;
+        currNode = PropertyPathRegistry.getOrCreatePropertyEntry(
+          currNode,
+          nextEntry,
+        );
+      }
+      if (currNode !== original) {
+        changed = true;
+        optionalChainNodes.delete(original);
+        optionalChainNodes.add(currNode);
+        nodes.delete(original);
+        nodes.add(currNode);
+      }
+    }
+  } while (changed);
+}
+
+function getAssumedInvokedFunctions(
+  fn: HIRFunction,
+  temporaries: Map<
+    IdentifierId,
+    {fn: LoweredFunction; mayInvoke: Set<LoweredFunction>}
+  > = new Map(),
+): ReadonlySet<LoweredFunction> {
+  const hoistableFunctions = new Set<LoweredFunction>();
+  /**
+   * Step 1: Conservatively collect identifier to function expression mappings
+   */
+  for (const block of fn.body.blocks.values()) {
+    for (const {lvalue, value} of block.instructions) {
+      /**
+       * Conservatively only match function expressions which can have guaranteed ssa.
+       * ObjectMethods and ObjectProperties do not.
+       */
+      if (value.kind === 'FunctionExpression') {
+        temporaries.set(lvalue.identifier.id, {
+          fn: value.loweredFunc,
+          mayInvoke: new Set(),
+        });
+      } else if (value.kind === 'StoreLocal') {
+        const lvalue = value.lvalue.place.identifier;
+        const maybeLoweredFunc = temporaries.get(value.value.identifier.id);
+        if (maybeLoweredFunc != null) {
+          temporaries.set(lvalue.id, maybeLoweredFunc);
+        }
+      } else if (value.kind === 'LoadLocal') {
+        const maybeLoweredFunc = temporaries.get(value.place.identifier.id);
+        if (maybeLoweredFunc != null) {
+          temporaries.set(lvalue.identifier.id, maybeLoweredFunc);
+        }
+      }
+    }
+  }
+  /**
+   * Step 2: Forward pass to do analysis of assumed function calls. Note that
+   * this is conservative and does not count indirect references through
+   * containers (e.g. `return {cb: () => {...}})`).
+   */
+  for (const block of fn.body.blocks.values()) {
+    for (const {lvalue, value} of block.instructions) {
+      if (value.kind === 'CallExpression') {
+        const callee = value.callee;
+        const maybeHook = getHookKind(fn.env, callee.identifier);
+        const maybeLoweredFunc = temporaries.get(callee.identifier.id);
+        if (maybeLoweredFunc != null) {
+          // Direct calls
+          hoistableFunctions.add(maybeLoweredFunc.fn);
+        } else if (maybeHook != null) {
+          /**
+           * Assume arguments to all hooks are safe to invoke
+           */
+          for (const arg of value.args) {
+            if (arg.kind === 'Identifier') {
+              const maybeLoweredFunc = temporaries.get(arg.identifier.id);
+              if (maybeLoweredFunc != null) {
+                hoistableFunctions.add(maybeLoweredFunc.fn);
+              }
+            }
+          }
+        }
+      } else if (value.kind === 'JsxExpression') {
+        /**
+         * Assume JSX attributes and children are safe to invoke
+         */
+        for (const attr of value.props) {
+          if (attr.kind === 'JsxSpreadAttribute') {
+            continue;
+          }
+          const maybeLoweredFunc = temporaries.get(attr.place.identifier.id);
+          if (maybeLoweredFunc != null) {
+            hoistableFunctions.add(maybeLoweredFunc.fn);
+          }
+        }
+        for (const child of value.children ?? []) {
+          const maybeLoweredFunc = temporaries.get(child.identifier.id);
+          if (maybeLoweredFunc != null) {
+            hoistableFunctions.add(maybeLoweredFunc.fn);
+          }
+        }
+      } else if (value.kind === 'FunctionExpression') {
+        /**
+         * Recursively traverse into other function expressions which may invoke
+         * or pass already declared functions to react (e.g. as JSXAttributes).
+         *
+         * If lambda A calls lambda B, we assume lambda B is safe to invoke if
+         * lambda A is -- even if lambda B is conditionally called. (see
+         * `conditional-call-chain` fixture for example).
+         */
+        const loweredFunc = value.loweredFunc.func;
+        const lambdasCalled = getAssumedInvokedFunctions(
+          loweredFunc,
+          temporaries,
+        );
+        const maybeLoweredFunc = temporaries.get(lvalue.identifier.id);
+        if (maybeLoweredFunc != null) {
+          for (const called of lambdasCalled) {
+            maybeLoweredFunc.mayInvoke.add(called);
+          }
+        }
+      }
+    }
+    if (block.terminal.kind === 'return') {
+      /**
+       * Assume directly returned functions are safe to call
+       */
+      const maybeLoweredFunc = temporaries.get(
+        block.terminal.value.identifier.id,
+      );
+      if (maybeLoweredFunc != null) {
+        hoistableFunctions.add(maybeLoweredFunc.fn);
+      }
+    }
+  }
+
+  for (const [_, {fn, mayInvoke}] of temporaries) {
+    if (hoistableFunctions.has(fn)) {
+      for (const called of mayInvoke) {
+        hoistableFunctions.add(called);
+      }
+    }
+  }
+  return hoistableFunctions;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectOptionalChainDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectOptionalChainDependencies.ts
new file mode 100644
index 00000000000..75dad4c1bfe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectOptionalChainDependencies.ts
@@ -0,0 +1,412 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {assertNonNull} from './CollectHoistablePropertyLoads';
+import {
+  BlockId,
+  BasicBlock,
+  IdentifierId,
+  ReactiveScopeDependency,
+  BranchTerminal,
+  TInstruction,
+  PropertyLoad,
+  StoreLocal,
+  GotoVariant,
+  TBasicBlock,
+  OptionalTerminal,
+  HIRFunction,
+  DependencyPathEntry,
+  Instruction,
+  Terminal,
+  PropertyLiteral,
+} from './HIR';
+import {printIdentifier} from './PrintHIR';
+
+export function collectOptionalChainSidemap(
+  fn: HIRFunction,
+): OptionalChainSidemap {
+  const context: OptionalTraversalContext = {
+    currFn: fn,
+    blocks: fn.body.blocks,
+    seenOptionals: new Set(),
+    processedInstrsInOptional: new Set(),
+    temporariesReadInOptional: new Map(),
+    hoistableObjects: new Map(),
+  };
+  traverseFunction(fn, context);
+  return {
+    temporariesReadInOptional: context.temporariesReadInOptional,
+    processedInstrsInOptional: context.processedInstrsInOptional,
+    hoistableObjects: context.hoistableObjects,
+  };
+}
+export type OptionalChainSidemap = {
+  /**
+   * Stores the correct property mapping (e.g. `a?.b` instead of `a.b`) for
+   * dependency calculation. Note that we currently do not store anything on
+   * outer phi nodes.
+   */
+  temporariesReadInOptional: ReadonlyMap<IdentifierId, ReactiveScopeDependency>;
+  /**
+   * Records instructions (PropertyLoads, StoreLocals, and test terminals)
+   * processed in this pass. When extracting dependencies in
+   * PropagateScopeDependencies, these instructions are skipped.
+   *
+   * E.g. given a?.b
+   * ```
+   * bb0
+   *   $0 = LoadLocal 'a'
+   *   test $0 then=bb1         <- Avoid adding dependencies from these instructions, as
+   * bb1                           the sidemap produced by readOptionalBlock already maps
+   *   $1 = PropertyLoad $0.'b' <- $1 and $2 back to a?.b. Instead, we want to add a?.b
+   *   StoreLocal $2 = $1       <- as a dependency when $1 or $2 are later used in either
+   *                                 - an unhoistable expression within an outer optional
+   *                                   block e.g. MethodCall
+   *                                 - a phi node (if the entire optional value is hoistable)
+   * ```
+   *
+   * Note that mapping blockIds to their evaluated dependency path does not
+   * work, since values produced by inner optional chains may be referenced in
+   * outer ones
+   * ```
+   * a?.b.c()
+   *  ->
+   * bb0
+   *   $0 = LoadLocal 'a'
+   *   test $0 then=bb1
+   * bb1
+   *   $1 = PropertyLoad $0.'b'
+   *   StoreLocal $2 = $1
+   *   goto bb2
+   * bb2
+   *   test $2 then=bb3
+   * bb3:
+   *   $3 = PropertyLoad $2.'c'
+   *   StoreLocal $4 = $3
+   *   goto bb4
+   * bb4
+   *   test $4 then=bb5
+   * bb5:
+   *   $5 = MethodCall $2.$4() <--- here, we want to take a dep on $2 and $4!
+   * ```
+   *
+   * Also note that InstructionIds are not unique across inner functions.
+   */
+  processedInstrsInOptional: ReadonlySet<Instruction | Terminal>;
+  /**
+   * Records optional chains for which we can safely evaluate non-optional
+   * PropertyLoads. e.g. given `a?.b.c`, we can evaluate any load from `a?.b` at
+   * the optional terminal in bb1.
+   * ```js
+   * bb1:
+   *   ...
+   *   Optional optional=false test=bb2 fallth=...
+   * bb2:
+   *   Optional optional=true test=bb3 fallth=...
+   * ...
+   * ```
+   */
+  hoistableObjects: ReadonlyMap<BlockId, ReactiveScopeDependency>;
+};
+
+type OptionalTraversalContext = {
+  currFn: HIRFunction;
+  blocks: ReadonlyMap<BlockId, BasicBlock>;
+
+  // Track optional blocks to avoid outer calls into nested optionals
+  seenOptionals: Set<BlockId>;
+
+  processedInstrsInOptional: Set<Instruction | Terminal>;
+  temporariesReadInOptional: Map<IdentifierId, ReactiveScopeDependency>;
+  hoistableObjects: Map<BlockId, ReactiveScopeDependency>;
+};
+
+function traverseFunction(
+  fn: HIRFunction,
+  context: OptionalTraversalContext,
+): void {
+  for (const [_, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'FunctionExpression' ||
+        instr.value.kind === 'ObjectMethod'
+      ) {
+        traverseFunction(instr.value.loweredFunc.func, {
+          ...context,
+          currFn: instr.value.loweredFunc.func,
+          blocks: instr.value.loweredFunc.func.body.blocks,
+        });
+      }
+    }
+    if (
+      block.terminal.kind === 'optional' &&
+      !context.seenOptionals.has(block.id)
+    ) {
+      traverseOptionalBlock(
+        block as TBasicBlock<OptionalTerminal>,
+        context,
+        null,
+      );
+    }
+  }
+}
+/**
+ * Match the consequent and alternate blocks of an optional.
+ * @returns propertyload computed by the consequent block, or null if the
+ * consequent block is not a simple PropertyLoad.
+ */
+function matchOptionalTestBlock(
+  terminal: BranchTerminal,
+  blocks: ReadonlyMap<BlockId, BasicBlock>,
+): {
+  consequentId: IdentifierId;
+  property: PropertyLiteral;
+  propertyId: IdentifierId;
+  storeLocalInstr: Instruction;
+  consequentGoto: BlockId;
+} | null {
+  const consequentBlock = assertNonNull(blocks.get(terminal.consequent));
+  if (
+    consequentBlock.instructions.length === 2 &&
+    consequentBlock.instructions[0].value.kind === 'PropertyLoad' &&
+    consequentBlock.instructions[1].value.kind === 'StoreLocal'
+  ) {
+    const propertyLoad: TInstruction<PropertyLoad> = consequentBlock
+      .instructions[0] as TInstruction<PropertyLoad>;
+    const storeLocal: StoreLocal = consequentBlock.instructions[1].value;
+    const storeLocalInstr = consequentBlock.instructions[1];
+    CompilerError.invariant(
+      propertyLoad.value.object.identifier.id === terminal.test.identifier.id,
+      {
+        reason:
+          '[OptionalChainDeps] Inconsistent optional chaining property load',
+        description: `Test=${printIdentifier(terminal.test.identifier)} PropertyLoad base=${printIdentifier(propertyLoad.value.object.identifier)}`,
+        loc: propertyLoad.loc,
+      },
+    );
+
+    CompilerError.invariant(
+      storeLocal.value.identifier.id === propertyLoad.lvalue.identifier.id,
+      {
+        reason: '[OptionalChainDeps] Unexpected storeLocal',
+        loc: propertyLoad.loc,
+      },
+    );
+    if (
+      consequentBlock.terminal.kind !== 'goto' ||
+      consequentBlock.terminal.variant !== GotoVariant.Break
+    ) {
+      return null;
+    }
+    const alternate = assertNonNull(blocks.get(terminal.alternate));
+
+    CompilerError.invariant(
+      alternate.instructions.length === 2 &&
+        alternate.instructions[0].value.kind === 'Primitive' &&
+        alternate.instructions[1].value.kind === 'StoreLocal',
+      {
+        reason: 'Unexpected alternate structure',
+        loc: terminal.loc,
+      },
+    );
+
+    return {
+      consequentId: storeLocal.lvalue.place.identifier.id,
+      property: propertyLoad.value.property,
+      propertyId: propertyLoad.lvalue.identifier.id,
+      storeLocalInstr,
+      consequentGoto: consequentBlock.terminal.block,
+    };
+  }
+  return null;
+}
+
+/**
+ * Traverse into the optional block and all transitively referenced blocks to
+ * collect sidemaps of optional chain dependencies.
+ *
+ * @returns the IdentifierId representing the optional block if the block and
+ * all transitively referenced optional blocks precisely represent a chain of
+ * property loads. If any part of the optional chain is not hoistable, returns
+ * null.
+ */
+function traverseOptionalBlock(
+  optional: TBasicBlock<OptionalTerminal>,
+  context: OptionalTraversalContext,
+  outerAlternate: BlockId | null,
+): IdentifierId | null {
+  context.seenOptionals.add(optional.id);
+  const maybeTest = context.blocks.get(optional.terminal.test)!;
+  let test: BranchTerminal;
+  let baseObject: ReactiveScopeDependency;
+  if (maybeTest.terminal.kind === 'branch') {
+    CompilerError.invariant(optional.terminal.optional, {
+      reason: '[OptionalChainDeps] Expect base case to be always optional',
+      loc: optional.terminal.loc,
+    });
+    /**
+     * Optional base expressions are currently within value blocks which cannot
+     * be interrupted by scope boundaries. As such, the only dependencies we can
+     * hoist out of optional chains are property load chains with no intervening
+     * instructions.
+     *
+     * Ideally, we would be able to flatten base instructions out of optional
+     * blocks, but this would require changes to HIR.
+     *
+     * For now, only match base expressions that are straightforward
+     * PropertyLoad chains
+     */
+    if (
+      maybeTest.instructions.length === 0 ||
+      maybeTest.instructions[0].value.kind !== 'LoadLocal'
+    ) {
+      return null;
+    }
+    const path: Array<DependencyPathEntry> = [];
+    for (let i = 1; i < maybeTest.instructions.length; i++) {
+      const instrVal = maybeTest.instructions[i].value;
+      const prevInstr = maybeTest.instructions[i - 1];
+      if (
+        instrVal.kind === 'PropertyLoad' &&
+        instrVal.object.identifier.id === prevInstr.lvalue.identifier.id
+      ) {
+        path.push({property: instrVal.property, optional: false});
+      } else {
+        return null;
+      }
+    }
+    CompilerError.invariant(
+      maybeTest.terminal.test.identifier.id ===
+        maybeTest.instructions.at(-1)!.lvalue.identifier.id,
+      {
+        reason: '[OptionalChainDeps] Unexpected test expression',
+        loc: maybeTest.terminal.loc,
+      },
+    );
+    baseObject = {
+      identifier: maybeTest.instructions[0].value.place.identifier,
+      reactive: maybeTest.instructions[0].value.place.reactive,
+      path,
+    };
+    test = maybeTest.terminal;
+  } else if (maybeTest.terminal.kind === 'optional') {
+    /**
+     * This is either
+     * - <inner_optional>?.property (optional=true)
+     * - <inner_optional>.property  (optional=false)
+     * - <inner_optional> <other operation>
+     * - a optional base block with a separate nested optional-chain (e.g. a(c?.d)?.d)
+     */
+    const testBlock = context.blocks.get(maybeTest.terminal.fallthrough)!;
+    if (testBlock!.terminal.kind !== 'branch') {
+      /**
+       * Fallthrough of the inner optional should be a block with no
+       * instructions, terminating with Test($<temporary written to from
+       * StoreLocal>)
+       */
+      CompilerError.throwTodo({
+        reason: `Unexpected terminal kind \`${testBlock.terminal.kind}\` for optional fallthrough block`,
+        loc: maybeTest.terminal.loc,
+      });
+    }
+    /**
+     * Recurse into inner optional blocks to collect inner optional-chain
+     * expressions, regardless of whether we can match the outer one to a
+     * PropertyLoad.
+     */
+    const innerOptional = traverseOptionalBlock(
+      maybeTest as TBasicBlock<OptionalTerminal>,
+      context,
+      testBlock.terminal.alternate,
+    );
+    if (innerOptional == null) {
+      return null;
+    }
+
+    /**
+     * Check that the inner optional is part of the same optional-chain as the
+     * outer one. This is not guaranteed, e.g. given a(c?.d)?.d
+     * ```
+     * bb0:
+     *   Optional test=bb1
+     * bb1:
+     *   $0 = LoadLocal a               <-- part 1 of the outer optional-chaining base
+     *   Optional test=bb2 fallth=bb5   <-- start of optional chain for c?.d
+     * bb2:
+     *   ... (optional chain for c?.d)
+     * ...
+     * bb5:
+     *   $1 = phi(c.d, undefined)       <-- part 2 (continuation) of the outer optional-base
+     *   $2 = Call $0($1)
+     *   Branch $2 ...
+     * ```
+     */
+    if (testBlock.terminal.test.identifier.id !== innerOptional) {
+      return null;
+    }
+
+    if (!optional.terminal.optional) {
+      /**
+       * If this is an non-optional load participating in an optional chain
+       * (e.g. loading the `c` property in `a?.b.c`), record that PropertyLoads
+       * from the inner optional value are hoistable.
+       */
+      context.hoistableObjects.set(
+        optional.id,
+        assertNonNull(context.temporariesReadInOptional.get(innerOptional)),
+      );
+    }
+    baseObject = assertNonNull(
+      context.temporariesReadInOptional.get(innerOptional),
+    );
+    test = testBlock.terminal;
+  } else {
+    return null;
+  }
+
+  if (test.alternate === outerAlternate) {
+    CompilerError.invariant(optional.instructions.length === 0, {
+      reason:
+        '[OptionalChainDeps] Unexpected instructions an inner optional block. ' +
+        'This indicates that the compiler may be incorrectly concatenating two unrelated optional chains',
+      loc: optional.terminal.loc,
+    });
+  }
+  const matchConsequentResult = matchOptionalTestBlock(test, context.blocks);
+  if (!matchConsequentResult) {
+    // Optional chain consequent is not hoistable e.g. a?.[computed()]
+    return null;
+  }
+  CompilerError.invariant(
+    matchConsequentResult.consequentGoto === optional.terminal.fallthrough,
+    {
+      reason: '[OptionalChainDeps] Unexpected optional goto-fallthrough',
+      description: `${matchConsequentResult.consequentGoto} != ${optional.terminal.fallthrough}`,
+      loc: optional.terminal.loc,
+    },
+  );
+  const load = {
+    identifier: baseObject.identifier,
+    reactive: baseObject.reactive,
+    path: [
+      ...baseObject.path,
+      {
+        property: matchConsequentResult.property,
+        optional: optional.terminal.optional,
+      },
+    ],
+  };
+  context.processedInstrsInOptional.add(matchConsequentResult.storeLocalInstr);
+  context.processedInstrsInOptional.add(test);
+  context.temporariesReadInOptional.set(
+    matchConsequentResult.consequentId,
+    load,
+  );
+  context.temporariesReadInOptional.set(matchConsequentResult.propertyId, load);
+  return matchConsequentResult.consequentId;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ComputeUnconditionalBlocks.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ComputeUnconditionalBlocks.ts
new file mode 100644
index 00000000000..8b339a2823e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ComputeUnconditionalBlocks.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BlockId,
+  GeneratedSource,
+  HIRFunction,
+  computePostDominatorTree,
+} from '.';
+import {CompilerError} from '..';
+
+export function computeUnconditionalBlocks(fn: HIRFunction): Set<BlockId> {
+  // Construct the set of blocks that is always reachable from the entry block.
+  const unconditionalBlocks = new Set<BlockId>();
+  const dominators = computePostDominatorTree(fn, {
+    /*
+     * Hooks must only be in a consistent order for executions that return normally,
+     * so we opt-in to viewing throw as a non-exit node.
+     */
+    includeThrowsAsExitNode: false,
+  });
+  const exit = dominators.exit;
+  let current: BlockId | null = fn.body.entry;
+  while (current !== null && current !== exit) {
+    CompilerError.invariant(!unconditionalBlocks.has(current), {
+      reason:
+        'Internal error: non-terminating loop in ComputeUnconditionalBlocks',
+      loc: GeneratedSource,
+    });
+    unconditionalBlocks.add(current);
+    current = dominators.get(current);
+  }
+  return unconditionalBlocks;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts
new file mode 100644
index 00000000000..106fce615c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Effect, ValueKind} from '..';
+import {TypeConfig} from './TypeSchema';
+
+/**
+ * Libraries developed before we officially documented the [Rules of React](https://react.dev/reference/rules)
+ * implement APIs which cannot be memoized safely, either via manual or automatic memoization.
+ *
+ * Any non-hook API that is designed to be called during render (not events/effects) should be safe to memoize:
+ *
+ * ```js
+ * function Component() {
+ *   const {someFunction} = useLibrary();
+ *   // it should always be safe to memoize functions like this
+ *  const result = useMemo(() => someFunction(), [someFunction]);
+ * }
+ * ```
+ *
+ * However, some APIs implement "interior mutability" — mutating values rather than copying into a new value
+ * and setting state with the new value. Such functions (`someFunction()` in the example) could return different
+ * values even though the function itself is the same object. This breaks memoization, since React relies on
+ * the outer object (or function) changing if part of its value has changed.
+ *
+ * Given that we didn't have the Rules of React precisely documented prior to the introduction of React compiler,
+ * it's understandable that some libraries accidentally shipped APIs that break this rule. However, developers
+ * can easily run into pitfalls with these APIs. They may manually memoize them, which can break their app. Or
+ * they may try using React Compiler, and think that the compiler has broken their code.
+ *
+ * To help ensure that developers can successfully use the compiler with existing code, this file teaches the
+ * compiler about specific APIs that are known to be incompatible with memoization. We've tried to be as precise
+ * as possible.
+ *
+ * The React team is open to collaborating with library authors to help develop compatible versions of these APIs,
+ * and we have already reached out to the teams who own any API listed here to ensure they are aware of the issue.
+ */
+export function defaultModuleTypeProvider(
+  moduleName: string,
+): TypeConfig | null {
+  switch (moduleName) {
+    case 'react-hook-form': {
+      return {
+        kind: 'object',
+        properties: {
+          useForm: {
+            kind: 'hook',
+            returnType: {
+              kind: 'object',
+              properties: {
+                // Only the `watch()` function returned by react-hook-form's `useForm()` API is incompatible
+                watch: {
+                  kind: 'function',
+                  positionalParams: [],
+                  restParam: Effect.Read,
+                  calleeEffect: Effect.Read,
+                  returnType: {kind: 'type', name: 'Any'},
+                  returnValueKind: ValueKind.Mutable,
+                  knownIncompatible: `React Hook Form's \`useForm()\` API returns a \`watch()\` function which cannot be memoized safely.`,
+                },
+              },
+            },
+          },
+        },
+      };
+    }
+    case '@tanstack/react-table': {
+      return {
+        kind: 'object',
+        properties: {
+          /*
+           * Many of the properties of `useReactTable()`'s return value are incompatible, so we mark the entire hook
+           * as incompatible
+           */
+          useReactTable: {
+            kind: 'hook',
+            positionalParams: [],
+            restParam: Effect.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            knownIncompatible: `TanStack Table's \`useReactTable()\` API returns functions that cannot be memoized safely`,
+          },
+        },
+      };
+    }
+    case '@tanstack/react-virtual': {
+      return {
+        kind: 'object',
+        properties: {
+          /*
+           * Many of the properties of `useVirtualizer()`'s return value are incompatible, so we mark the entire hook
+           * as incompatible
+           */
+          useVirtualizer: {
+            kind: 'hook',
+            positionalParams: [],
+            restParam: Effect.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            knownIncompatible: `TanStack Virtual's \`useVirtualizer()\` API returns functions that cannot be memoized safely`,
+          },
+        },
+      };
+    }
+  }
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/DeriveMinimalDependenciesHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/DeriveMinimalDependenciesHIR.ts
new file mode 100644
index 00000000000..7819ab39b2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/DeriveMinimalDependenciesHIR.ts
@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  DependencyPathEntry,
+  GeneratedSource,
+  Identifier,
+  PropertyLiteral,
+  ReactiveScopeDependency,
+} from '../HIR';
+import {printIdentifier} from '../HIR/PrintHIR';
+
+/**
+ * Simpler fork of DeriveMinimalDependencies, see PropagateScopeDependenciesHIR
+ * for detailed explanation.
+ */
+export class ReactiveScopeDependencyTreeHIR {
+  /**
+   * Paths from which we can hoist PropertyLoads. If an `identifier`,
+   * `identifier.path`, or `identifier?.path` is in this map, it is safe to
+   * evaluate (non-optional) PropertyLoads from.
+   */
+  #hoistableObjects: Map<Identifier, HoistableNode & {reactive: boolean}> =
+    new Map();
+  #deps: Map<Identifier, DependencyNode & {reactive: boolean}> = new Map();
+
+  /**
+   * @param hoistableObjects a set of paths from which we can safely evaluate
+   * PropertyLoads. Note that we expect these to not contain duplicates (e.g.
+   * both `a?.b` and `a.b`) only because CollectHoistablePropertyLoads merges
+   * duplicates when traversing the CFG.
+   */
+  constructor(hoistableObjects: Iterable<ReactiveScopeDependency>) {
+    for (const {path, identifier, reactive} of hoistableObjects) {
+      let currNode = ReactiveScopeDependencyTreeHIR.#getOrCreateRoot(
+        identifier,
+        reactive,
+        this.#hoistableObjects,
+        path.length > 0 && path[0].optional ? 'Optional' : 'NonNull',
+      );
+
+      for (let i = 0; i < path.length; i++) {
+        const prevAccessType = currNode.properties.get(
+          path[i].property,
+        )?.accessType;
+        const accessType =
+          i + 1 < path.length && path[i + 1].optional ? 'Optional' : 'NonNull';
+        CompilerError.invariant(
+          prevAccessType == null || prevAccessType === accessType,
+          {
+            reason: 'Conflicting access types',
+            loc: GeneratedSource,
+          },
+        );
+        let nextNode = currNode.properties.get(path[i].property);
+        if (nextNode == null) {
+          nextNode = {
+            properties: new Map(),
+            accessType,
+          };
+          currNode.properties.set(path[i].property, nextNode);
+        }
+        currNode = nextNode;
+      }
+    }
+  }
+
+  static #getOrCreateRoot<T extends string>(
+    identifier: Identifier,
+    reactive: boolean,
+    roots: Map<Identifier, TreeNode<T> & {reactive: boolean}>,
+    defaultAccessType: T,
+  ): TreeNode<T> {
+    // roots can always be accessed unconditionally in JS
+    let rootNode = roots.get(identifier);
+
+    if (rootNode === undefined) {
+      rootNode = {
+        properties: new Map(),
+        reactive,
+        accessType: defaultAccessType,
+      };
+      roots.set(identifier, rootNode);
+    } else {
+      CompilerError.invariant(reactive === rootNode.reactive, {
+        reason: '[DeriveMinimalDependenciesHIR] Conflicting reactive root flag',
+        description: `Identifier ${printIdentifier(identifier)}`,
+        loc: GeneratedSource,
+      });
+    }
+    return rootNode;
+  }
+
+  /**
+   * Join a dependency with `#hoistableObjects` to record the hoistable
+   * dependency. This effectively truncates @param dep to its maximal
+   * safe-to-evaluate subpath
+   */
+  addDependency(dep: ReactiveScopeDependency): void {
+    const {identifier, reactive, path} = dep;
+    let depCursor = ReactiveScopeDependencyTreeHIR.#getOrCreateRoot(
+      identifier,
+      reactive,
+      this.#deps,
+      PropertyAccessType.UnconditionalAccess,
+    );
+    /**
+     * hoistableCursor is null if depCursor is not an object we can hoist
+     * property reads from otherwise, it represents the same node in the
+     * hoistable / cfg-informed tree
+     */
+    let hoistableCursor: HoistableNode | undefined =
+      this.#hoistableObjects.get(identifier);
+
+    // All properties read 'on the way' to a dependency are marked as 'access'
+    for (const entry of path) {
+      let nextHoistableCursor: HoistableNode | undefined;
+      let nextDepCursor: DependencyNode;
+      if (entry.optional) {
+        /**
+         * No need to check the access type since we can match both optional or non-optionals
+         * in the hoistable
+         *  e.g. a?.b<rest> is hoistable if a.b<rest> is hoistable
+         */
+        if (hoistableCursor != null) {
+          nextHoistableCursor = hoistableCursor?.properties.get(entry.property);
+        }
+
+        let accessType;
+        if (
+          hoistableCursor != null &&
+          hoistableCursor.accessType === 'NonNull'
+        ) {
+          /**
+           * For an optional chain dep `a?.b`: if the hoistable tree only
+           * contains `a`, we can keep either `a?.b` or 'a.b' as a dependency.
+           * (note that we currently do the latter for perf)
+           */
+          accessType = PropertyAccessType.UnconditionalAccess;
+        } else {
+          /**
+           * Given that it's safe to evaluate `depCursor` and optional load
+           * never throws, it's also safe to evaluate `depCursor?.entry`
+           */
+          accessType = PropertyAccessType.OptionalAccess;
+        }
+        nextDepCursor = makeOrMergeProperty(
+          depCursor,
+          entry.property,
+          accessType,
+        );
+      } else if (
+        hoistableCursor != null &&
+        hoistableCursor.accessType === 'NonNull'
+      ) {
+        nextHoistableCursor = hoistableCursor.properties.get(entry.property);
+        nextDepCursor = makeOrMergeProperty(
+          depCursor,
+          entry.property,
+          PropertyAccessType.UnconditionalAccess,
+        );
+      } else {
+        /**
+         * Break to truncate the dependency on its first non-optional entry that PropertyLoads are not hoistable from
+         */
+        break;
+      }
+      depCursor = nextDepCursor;
+      hoistableCursor = nextHoistableCursor;
+    }
+    // mark the final node as a dependency
+    depCursor.accessType = merge(
+      depCursor.accessType,
+      PropertyAccessType.OptionalDependency,
+    );
+  }
+
+  deriveMinimalDependencies(): Set<ReactiveScopeDependency> {
+    const results = new Set<ReactiveScopeDependency>();
+    for (const [rootId, rootNode] of this.#deps.entries()) {
+      collectMinimalDependenciesInSubtree(
+        rootNode,
+        rootNode.reactive,
+        rootId,
+        [],
+        results,
+      );
+    }
+
+    return results;
+  }
+
+  /*
+   * Prints dependency tree to string for debugging.
+   * @param includeAccesses
+   * @returns string representation of DependencyTree
+   */
+  printDeps(includeAccesses: boolean): string {
+    let res: Array<Array<string>> = [];
+
+    for (const [rootId, rootNode] of this.#deps.entries()) {
+      const rootResults = printSubtree(rootNode, includeAccesses).map(
+        result => `${printIdentifier(rootId)}.${result}`,
+      );
+      res.push(rootResults);
+    }
+    return res.flat().join('\n');
+  }
+
+  static debug<T extends string>(roots: Map<Identifier, TreeNode<T>>): string {
+    const buf: Array<string> = [`tree() [`];
+    for (const [rootId, rootNode] of roots) {
+      buf.push(`${printIdentifier(rootId)} (${rootNode.accessType}):`);
+      this.#debugImpl(buf, rootNode, 1);
+    }
+    buf.push(']');
+    return buf.length > 2 ? buf.join('\n') : buf.join('');
+  }
+
+  static #debugImpl<T extends string>(
+    buf: Array<string>,
+    node: TreeNode<T>,
+    depth: number = 0,
+  ): void {
+    for (const [property, childNode] of node.properties) {
+      buf.push(`${'  '.repeat(depth)}.${property} (${childNode.accessType}):`);
+      this.#debugImpl(buf, childNode, depth + 1);
+    }
+  }
+}
+
+/*
+ * Enum representing the access type of single property on a parent object.
+ * We distinguish on two independent axes:
+ * Optional / Unconditional:
+ *    - whether this property is an optional load (within an optional chain)
+ * Access / Dependency:
+ *    - Access: this property is read on the path of a dependency. We do not
+ *      need to track change variables for accessed properties. Tracking accesses
+ *      helps Forget do more granular dependency tracking.
+ *    - Dependency: this property is read as a dependency and we must track changes
+ *      to it for correctness.
+ *    ```javascript
+ *    // props.a is a dependency here and must be tracked
+ *    deps: {props.a, props.a.b} ---> minimalDeps: {props.a}
+ *    // props.a is just an access here and does not need to be tracked
+ *    deps: {props.a.b} ---> minimalDeps: {props.a.b}
+ *    ```
+ */
+enum PropertyAccessType {
+  OptionalAccess = 'OptionalAccess',
+  UnconditionalAccess = 'UnconditionalAccess',
+  OptionalDependency = 'OptionalDependency',
+  UnconditionalDependency = 'UnconditionalDependency',
+}
+
+function isOptional(access: PropertyAccessType): boolean {
+  return (
+    access === PropertyAccessType.OptionalAccess ||
+    access === PropertyAccessType.OptionalDependency
+  );
+}
+function isDependency(access: PropertyAccessType): boolean {
+  return (
+    access === PropertyAccessType.OptionalDependency ||
+    access === PropertyAccessType.UnconditionalDependency
+  );
+}
+
+function merge(
+  access1: PropertyAccessType,
+  access2: PropertyAccessType,
+): PropertyAccessType {
+  const resultIsUnconditional = !(isOptional(access1) && isOptional(access2));
+  const resultIsDependency = isDependency(access1) || isDependency(access2);
+
+  /*
+   * Straightforward merge.
+   * This can be represented as bitwise OR, but is written out for readability
+   *
+   * Observe that `UnconditionalAccess | ConditionalDependency` produces an
+   * unconditionally accessed conditional dependency. We currently use these
+   * as we use unconditional dependencies. (i.e. to codegen change variables)
+   */
+  if (resultIsUnconditional) {
+    if (resultIsDependency) {
+      return PropertyAccessType.UnconditionalDependency;
+    } else {
+      return PropertyAccessType.UnconditionalAccess;
+    }
+  } else {
+    // result is optional
+    if (resultIsDependency) {
+      return PropertyAccessType.OptionalDependency;
+    } else {
+      return PropertyAccessType.OptionalAccess;
+    }
+  }
+}
+
+type TreeNode<T extends string> = {
+  properties: Map<PropertyLiteral, TreeNode<T>>;
+  accessType: T;
+};
+type HoistableNode = TreeNode<'Optional' | 'NonNull'>;
+type DependencyNode = TreeNode<PropertyAccessType>;
+
+/**
+ * Recursively calculates minimal dependencies in a subtree.
+ * @param node DependencyNode representing a dependency subtree.
+ * @returns a minimal list of dependencies in this subtree.
+ */
+function collectMinimalDependenciesInSubtree(
+  node: DependencyNode,
+  reactive: boolean,
+  rootIdentifier: Identifier,
+  path: Array<DependencyPathEntry>,
+  results: Set<ReactiveScopeDependency>,
+): void {
+  if (isDependency(node.accessType)) {
+    results.add({identifier: rootIdentifier, reactive, path});
+  } else {
+    for (const [childName, childNode] of node.properties) {
+      collectMinimalDependenciesInSubtree(
+        childNode,
+        reactive,
+        rootIdentifier,
+        [
+          ...path,
+          {
+            property: childName,
+            optional: isOptional(childNode.accessType),
+          },
+        ],
+        results,
+      );
+    }
+  }
+}
+
+function printSubtree(
+  node: DependencyNode,
+  includeAccesses: boolean,
+): Array<string> {
+  const results: Array<string> = [];
+  for (const [propertyName, propertyNode] of node.properties) {
+    if (includeAccesses || isDependency(propertyNode.accessType)) {
+      results.push(`${propertyName} (${propertyNode.accessType})`);
+    }
+    const propertyResults = printSubtree(propertyNode, includeAccesses);
+    results.push(...propertyResults.map(result => `${propertyName}.${result}`));
+  }
+  return results;
+}
+
+function makeOrMergeProperty(
+  node: DependencyNode,
+  property: PropertyLiteral,
+  accessType: PropertyAccessType,
+): DependencyNode {
+  let child = node.properties.get(property);
+  if (child == null) {
+    child = {
+      properties: new Map(),
+      accessType,
+    };
+    node.properties.set(property, child);
+  } else {
+    child.accessType = merge(child.accessType, accessType);
+  }
+  return child;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Dominator.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Dominator.ts
new file mode 100644
index 00000000000..25461b23a63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Dominator.ts
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import prettyFormat from 'pretty-format';
+import {CompilerError} from '../CompilerError';
+import {BlockId, GeneratedSource, HIRFunction} from './HIR';
+import {eachTerminalSuccessor} from './visitors';
+
+/*
+ * Computes the dominator tree of the given function. The returned `Dominator` stores the immediate
+ * dominator of each node in the function, which can be retrieved with `Dominator.prototype.get()`.
+ *
+ * A block X dominates block Y in the CFG if all paths to Y must flow through X. Thus the entry
+ * block dominates all other blocks. See https://en.wikipedia.org/wiki/Dominator_(graph_theory)
+ * for more.
+ */
+export function computeDominatorTree(fn: HIRFunction): Dominator<BlockId> {
+  const graph = buildGraph(fn);
+  const nodes = computeImmediateDominators(graph);
+  return new Dominator(graph.entry, nodes);
+}
+
+/*
+ * Similar to `computeDominatorTree()` but computes the post dominators of the function. The returned
+ * `PostDominator` stores the immediate post-dominators of each node in the function.
+ *
+ * A block Y post-dominates block X in the CFG if all paths from X to the exit must flow through Y.
+ * The caller must specify whether to consider `throw` statements as exit nodes. If set to false,
+ * only return statements are considered exit nodes.
+ */
+export function computePostDominatorTree(
+  fn: HIRFunction,
+  options: {includeThrowsAsExitNode: boolean},
+): PostDominator<BlockId> {
+  const graph = buildReverseGraph(fn, options.includeThrowsAsExitNode);
+  const nodes = computeImmediateDominators(graph);
+
+  /*
+   * When options.includeThrowsAsExitNode is false, nodes that flow into a throws
+   * terminal and don't reach the exit node won't be in the node map. Add them
+   * with themselves as dominator to reflect that they don't flow into the exit.
+   */
+  if (!options.includeThrowsAsExitNode) {
+    for (const [id] of fn.body.blocks) {
+      if (!nodes.has(id)) {
+        nodes.set(id, id);
+      }
+    }
+  }
+  return new PostDominator(graph.entry, nodes);
+}
+
+type Node<T> = {
+  id: T;
+  index: number;
+  preds: Set<T>;
+  succs: Set<T>;
+};
+type Graph<T> = {
+  entry: T;
+  nodes: Map<T, Node<T>>;
+};
+
+// A dominator tree that stores the immediate dominator for each block in function.
+export class Dominator<T> {
+  #entry: T;
+  #nodes: Map<T, T>;
+
+  constructor(entry: T, nodes: Map<T, T>) {
+    this.#entry = entry;
+    this.#nodes = nodes;
+  }
+
+  // Returns the entry node
+  get entry(): T {
+    return this.#entry;
+  }
+
+  /*
+   * Returns the immediate dominator of the block with @param id if present. Returns null
+   * if there is no immediate dominator (ie if the dominator is @param id itself).
+   */
+  get(id: T): T | null {
+    const dominator = this.#nodes.get(id);
+    CompilerError.invariant(dominator !== undefined, {
+      reason: 'Unknown node',
+      loc: GeneratedSource,
+    });
+    return dominator === id ? null : dominator;
+  }
+
+  debug(): string {
+    const dominators = new Map();
+    for (const [key, value] of this.#nodes) {
+      dominators.set(`bb${key}`, `bb${value}`);
+    }
+    return prettyFormat({
+      entry: `bb${this.#entry}`,
+      dominators,
+    });
+  }
+}
+
+export class PostDominator<T> {
+  #exit: T;
+  #nodes: Map<T, T>;
+
+  constructor(exit: T, nodes: Map<T, T>) {
+    this.#exit = exit;
+    this.#nodes = nodes;
+  }
+
+  // Returns the node representing normal exit from the function, ie return terminals.
+  get exit(): T {
+    return this.#exit;
+  }
+
+  /*
+   * Returns the immediate dominator of the block with @param id if present. Returns null
+   * if there is no immediate dominator (ie if the dominator is @param id itself).
+   */
+  get(id: T): T | null {
+    const dominator = this.#nodes.get(id);
+    CompilerError.invariant(dominator !== undefined, {
+      reason: 'Unknown node',
+      loc: GeneratedSource,
+    });
+    return dominator === id ? null : dominator;
+  }
+
+  debug(): string {
+    const postDominators = new Map();
+    for (const [key, value] of this.#nodes) {
+      postDominators.set(`bb${key}`, `bb${value}`);
+    }
+    return prettyFormat({
+      exit: `bb${this.exit}`,
+      postDominators,
+    });
+  }
+}
+
+/*
+ * The implementation is a straightforward adaptation of https://www.cs.rice.edu/~keith/Embed/dom.pdf
+ * except that CFG nodes ordering is inverted (so the comparison functions are swapped)
+ */
+function computeImmediateDominators<T>(graph: Graph<T>): Map<T, T> {
+  const nodes: Map<T, T> = new Map();
+  nodes.set(graph.entry, graph.entry);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const [id, node] of graph.nodes) {
+      // Skip start node
+      if (node.id === graph.entry) {
+        continue;
+      }
+
+      // first processed predecessor
+      let newIdom: T | null = null;
+      for (const pred of node.preds) {
+        if (nodes.has(pred)) {
+          newIdom = pred;
+          break;
+        }
+      }
+      CompilerError.invariant(newIdom !== null, {
+        reason: `At least one predecessor must have been visited for block ${id}`,
+        loc: GeneratedSource,
+      });
+
+      for (const pred of node.preds) {
+        // For all other predecessors
+        if (pred === newIdom) {
+          continue;
+        }
+        const predDom = nodes.get(pred);
+        if (predDom !== undefined) {
+          newIdom = intersect(pred, newIdom, graph, nodes);
+        }
+      }
+
+      if (nodes.get(id) !== newIdom) {
+        nodes.set(id, newIdom);
+        changed = true;
+      }
+    }
+  }
+  return nodes;
+}
+
+function intersect<T>(a: T, b: T, graph: Graph<T>, nodes: Map<T, T>): T {
+  let block1: Node<T> = graph.nodes.get(a)!;
+  let block2: Node<T> = graph.nodes.get(b)!;
+  while (block1 !== block2) {
+    while (block1.index > block2.index) {
+      const dom = nodes.get(block1.id)!;
+      block1 = graph.nodes.get(dom)!;
+    }
+    while (block2.index > block1.index) {
+      const dom = nodes.get(block2.id)!;
+      block2 = graph.nodes.get(dom)!;
+    }
+  }
+  return block1.id;
+}
+
+// Turns the HIRFunction into a simplified internal form that is shared for dominator/post-dominator computation
+function buildGraph(fn: HIRFunction): Graph<BlockId> {
+  const graph: Graph<BlockId> = {entry: fn.body.entry, nodes: new Map()};
+  let index = 0;
+  for (const [id, block] of fn.body.blocks) {
+    graph.nodes.set(id, {
+      id,
+      index: index++,
+      preds: block.preds,
+      succs: new Set(eachTerminalSuccessor(block.terminal)),
+    });
+  }
+  return graph;
+}
+
+/*
+ *  Turns the HIRFunction into a simplified internal form that is shared for dominator/post-dominator computation,
+ * notably this version flips the graph and puts the reversed form back into RPO (such that successors are before predecessors).
+ * Note that RPO of the reversed graph isn't the same as reversed RPO of the forward graph because of loops.
+ */
+function buildReverseGraph(
+  fn: HIRFunction,
+  includeThrowsAsExitNode: boolean,
+): Graph<BlockId> {
+  const nodes: Map<BlockId, Node<BlockId>> = new Map();
+  const exitId = fn.env.nextBlockId;
+  const exit: Node<BlockId> = {
+    id: exitId,
+    index: 0,
+    preds: new Set(),
+    succs: new Set(),
+  };
+  nodes.set(exitId, exit);
+
+  for (const [id, block] of fn.body.blocks) {
+    const node: Node<BlockId> = {
+      id,
+      index: 0,
+      preds: new Set(eachTerminalSuccessor(block.terminal)),
+      succs: new Set(block.preds),
+    };
+    if (block.terminal.kind === 'return') {
+      node.preds.add(exitId);
+      exit.succs.add(id);
+    } else if (block.terminal.kind === 'throw' && includeThrowsAsExitNode) {
+      node.preds.add(exitId);
+      exit.succs.add(id);
+    }
+    nodes.set(id, node);
+  }
+
+  // Put nodes into RPO form
+  const visited = new Set<BlockId>();
+  const postorder: Array<BlockId> = [];
+  function visit(id: BlockId): void {
+    if (visited.has(id)) {
+      return;
+    }
+    visited.add(id);
+    const node = nodes.get(id)!;
+    for (const successor of node.succs) {
+      visit(successor);
+    }
+    postorder.push(id);
+  }
+  visit(exitId);
+
+  const rpo: Graph<BlockId> = {entry: exitId, nodes: new Map()};
+  let index = 0;
+  for (const id of postorder.reverse()) {
+    const node = nodes.get(id)!;
+    node.index = index++;
+    rpo.nodes.set(id, node);
+  }
+  return rpo;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
new file mode 100644
index 00000000000..7ceb5bf005c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
@@ -0,0 +1,1296 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {ZodError, z} from 'zod/v4';
+import {fromZodError} from 'zod-validation-error/v4';
+import {CompilerError} from '../CompilerError';
+import {CompilerOutputMode, Logger, ProgramContext} from '../Entrypoint';
+import {Err, Ok, Result} from '../Utils/Result';
+import {
+  DEFAULT_GLOBALS,
+  DEFAULT_SHAPES,
+  Global,
+  GlobalRegistry,
+  getReanimatedModuleType,
+  installTypeConfig,
+} from './Globals';
+import {
+  BlockId,
+  BuiltInType,
+  Effect,
+  FunctionType,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  NonLocalBinding,
+  PolyType,
+  ScopeId,
+  SourceLocation,
+  Type,
+  ValidatedIdentifier,
+  ValueKind,
+  getHookKindForType,
+  makeBlockId,
+  makeIdentifierId,
+  makeIdentifierName,
+  makeScopeId,
+} from './HIR';
+import {
+  BuiltInMixedReadonlyId,
+  DefaultMutatingHook,
+  DefaultNonmutatingHook,
+  FunctionSignature,
+  ShapeRegistry,
+  addHook,
+} from './ObjectShape';
+import {Scope as BabelScope, NodePath} from '@babel/traverse';
+import {TypeSchema} from './TypeSchema';
+import {FlowTypeEnv} from '../Flood/Types';
+import {defaultModuleTypeProvider} from './DefaultModuleTypeProvider';
+import {assertExhaustive} from '../Utils/utils';
+
+export const ReactElementSymbolSchema = z.object({
+  elementSymbol: z.union([
+    z.literal('react.element'),
+    z.literal('react.transitional.element'),
+  ]),
+  globalDevVar: z.string(),
+});
+
+export const ExternalFunctionSchema = z.object({
+  // Source for the imported module that exports the `importSpecifierName` functions
+  source: z.string(),
+
+  // Unique name for the feature flag test condition, eg `isForgetEnabled_ProjectName`
+  importSpecifierName: z.string(),
+});
+
+export const InstrumentationSchema = z
+  .object({
+    fn: ExternalFunctionSchema,
+    gating: ExternalFunctionSchema.nullable(),
+    globalGating: z.string().nullable(),
+  })
+  .refine(
+    opts => opts.gating != null || opts.globalGating != null,
+    'Expected at least one of gating or globalGating',
+  );
+
+export type ExternalFunction = z.infer<typeof ExternalFunctionSchema>;
+export const USE_FIRE_FUNCTION_NAME = 'useFire';
+export const EMIT_FREEZE_GLOBAL_GATING = '__DEV__';
+
+export const MacroSchema = z.string();
+
+export type CompilerMode = 'all_features' | 'no_inferred_memo';
+
+export type Macro = z.infer<typeof MacroSchema>;
+
+const HookSchema = z.object({
+  /*
+   * The effect of arguments to this hook. Describes whether the hook may or may
+   * not mutate arguments, etc.
+   */
+  effectKind: z.nativeEnum(Effect),
+
+  /*
+   * The kind of value returned by the hook. Allows indicating that a hook returns
+   * a primitive or already-frozen value, which can allow more precise memoization
+   * of callers.
+   */
+  valueKind: z.nativeEnum(ValueKind),
+
+  /*
+   * Specifies whether hook arguments may be aliased by other arguments or by the
+   * return value of the function. Defaults to false. When enabled, this allows the
+   * compiler to avoid memoizing arguments.
+   */
+  noAlias: z.boolean().default(false),
+
+  /*
+   * Specifies whether the hook returns data that is composed of:
+   * - undefined
+   * - null
+   * - boolean
+   * - number
+   * - string
+   * - arrays whose items are also transitiveMixed
+   * - objects whose values are also transitiveMixed
+   *
+   * Many state management and data-fetching APIs return data that meets
+   * this criteria since this is JSON + undefined. Forget can compile
+   * hooks that return transitively mixed data more optimally because it
+   * can make inferences about some method calls (especially array methods
+   * like `data.items.map(...)` since these builtin types have few built-in
+   * methods.
+   */
+  transitiveMixedData: z.boolean().default(false),
+});
+
+export type Hook = z.infer<typeof HookSchema>;
+
+/*
+ * TODO(mofeiZ): User defined global types (with corresponding shapes).
+ * User defined global types should have inline ObjectShapes instead of directly
+ * using ObjectShapes.ShapeRegistry, as a user-provided ShapeRegistry may be
+ * accidentally be not well formed.
+ * i.e.
+ *   missing required shapes (BuiltInArray for [] and BuiltInObject for {})
+ *   missing some recursive Object / Function shapeIds
+ */
+
+export const EnvironmentConfigSchema = z.object({
+  customHooks: z.map(z.string(), HookSchema).default(new Map()),
+
+  /**
+   * A function that, given the name of a module, can optionally return a description
+   * of that module's type signature.
+   */
+  moduleTypeProvider: z.nullable(z.any()).default(null),
+
+  /**
+   * A list of functions which the application compiles as macros, where
+   * the compiler must ensure they are not compiled to rename the macro or separate the
+   * "function" from its argument.
+   *
+   * For example, Meta has some APIs such as `featureflag("name-of-feature-flag")` which
+   * are rewritten by a plugin. Assigning `featureflag` to a temporary would break the
+   * plugin since it looks specifically for the name of the function being invoked, not
+   * following aliases.
+   */
+  customMacros: z.nullable(z.array(MacroSchema)).default(null),
+
+  /**
+   * Enable a check that resets the memoization cache when the source code of
+   * the file changes. This is intended to support hot module reloading (HMR),
+   * where the same runtime component instance will be reused across different
+   * versions of the component source.
+   *
+   * When set to
+   * - true:  code for HMR support is always generated, regardless of NODE_ENV
+   *          or `globalThis.__DEV__`
+   * - false: code for HMR support is not generated
+   * - null:  (default) code for HMR support is conditionally generated dependent
+   *          on `NODE_ENV` and `globalThis.__DEV__` at the time of compilation.
+   */
+  enableResetCacheOnSourceFileChanges: z.nullable(z.boolean()).default(null),
+
+  /**
+   * Enable using information from existing useMemo/useCallback to understand when a value is done
+   * being mutated. With this mode enabled, Forget will still discard the actual useMemo/useCallback
+   * calls and may memoize slightly differently. However, it will assume that the values produced
+   * are not subsequently modified, guaranteeing that the value will be memoized.
+   *
+   * By preserving guarantees about when values are memoized, this option preserves any existing
+   * behavior that depends on referential equality in the original program. Notably, this preserves
+   * existing effect behavior (how often effects fire) for effects that rely on referential equality.
+   *
+   * When disabled, Forget will not only prune useMemo and useCallback calls but also completely ignore
+   * them, not using any information from them to guide compilation. Therefore, disabling this flag
+   * will produce output that mimics the result from removing all memoization.
+   *
+   * Our recommendation is to first try running your application with this flag enabled, then attempt
+   * to disable this flag and see what changes or breaks. This will mostly likely be effects that
+   * depend on referential equality, which can be refactored (TODO guide for this).
+   *
+   * NOTE: this mode treats freeze as a transitive operation for function expressions. This means
+   * that if a useEffect or useCallback references a function value, that function value will be
+   * considered frozen, and in turn all of its referenced variables will be considered frozen as well.
+   */
+  enablePreserveExistingMemoizationGuarantees: z.boolean().default(true),
+
+  /**
+   * Validates that all useMemo/useCallback values are also memoized by Forget. This mode can be
+   * used with or without @enablePreserveExistingMemoizationGuarantees.
+   *
+   * With enablePreserveExistingMemoizationGuarantees, this validation enables automatically and
+   * verifies that Forget was able to preserve manual memoization semantics under that mode's
+   * additional assumptions about the input.
+   *
+   * With enablePreserveExistingMemoizationGuarantees off, this validation ignores manual memoization
+   * when determining program behavior, and only uses information from useMemo/useCallback to check
+   * that the memoization was preserved. This can be useful for determining where referential equalities
+   * may change under Forget.
+   */
+  validatePreserveExistingMemoizationGuarantees: z.boolean().default(true),
+
+  /**
+   * Validate that dependencies supplied to manual memoization calls are exhaustive.
+   */
+  validateExhaustiveMemoizationDependencies: z.boolean().default(true),
+
+  /**
+   * Validate that dependencies supplied to effect hooks are exhaustive.
+   * Can be:
+   * - 'off': No validation (default)
+   * - 'all': Validate and report both missing and extra dependencies
+   * - 'missing-only': Only report missing dependencies
+   * - 'extra-only': Only report extra/unnecessary dependencies
+   */
+  validateExhaustiveEffectDependencies: z
+    .enum(['off', 'all', 'missing-only', 'extra-only'])
+    .default('off'),
+
+  /**
+   * When this is true, rather than pruning existing manual memoization but ensuring or validating
+   * that the memoized values remain memoized, the compiler will simply not prune existing calls to
+   * useMemo/useCallback.
+   */
+  enablePreserveExistingManualUseMemo: z.boolean().default(false),
+
+  // 🌲
+  enableForest: z.boolean().default(false),
+
+  /**
+   * Enable use of type annotations in the source to drive type inference. By default
+   * Forget attemps to infer types using only information that is guaranteed correct
+   * given the source, and does not trust user-supplied type annotations. This mode
+   * enables trusting user type annotations.
+   */
+  enableUseTypeAnnotations: z.boolean().default(false),
+
+  /**
+   * Allows specifying a function that can populate HIR with type information from
+   * Flow
+   */
+  flowTypeProvider: z.nullable(z.any()).default(null),
+
+  /**
+   * Enables inference of optional dependency chains. Without this flag
+   * a property chain such as `props?.items?.foo` will infer as a dep on
+   * just `props`. With this flag enabled, we'll infer that full path as
+   * the dependency.
+   */
+  enableOptionalDependencies: z.boolean().default(true),
+
+  enableFire: z.boolean().default(false),
+
+  enableNameAnonymousFunctions: z.boolean().default(false),
+
+  /**
+   * Enables inference and auto-insertion of effect dependencies. Takes in an array of
+   * configurable module and import pairs to allow for user-land experimentation. For example,
+   * [
+   *   {
+   *     module: 'react',
+   *     imported: 'useEffect',
+   *     autodepsIndex: 1,
+   *   },{
+   *     module: 'MyExperimentalEffectHooks',
+   *     imported: 'useExperimentalEffect',
+   *     autodepsIndex: 2,
+   *   },
+   * ]
+   * would insert dependencies for calls of `useEffect` imported from `react` and calls of
+   * useExperimentalEffect` from `MyExperimentalEffectHooks`.
+   *
+   * `autodepsIndex` tells the compiler which index we expect the AUTODEPS to appear in.
+   *  With the configuration above, we'd insert dependencies for `useEffect` if it has two
+   *  arguments, and the second is AUTODEPS.
+   *
+   * Still experimental.
+   */
+  inferEffectDependencies: z
+    .nullable(
+      z.array(
+        z.object({
+          function: ExternalFunctionSchema,
+          autodepsIndex: z.number().min(1, 'autodepsIndex must be > 0'),
+        }),
+      ),
+    )
+    .default(null),
+
+  /**
+   * Enables inlining ReactElement object literals in place of JSX
+   * An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime
+   * Currently a prod-only optimization, requiring Fast JSX dependencies
+   *
+   * The symbol configuration is set for backwards compatability with pre-React 19 transforms
+   */
+  inlineJsxTransform: ReactElementSymbolSchema.nullable().default(null),
+
+  /*
+   * Enable validation of hooks to partially check that the component honors the rules of hooks.
+   * When disabled, the component is assumed to follow the rules (though the Babel plugin looks
+   * for suppressions of the lint rule).
+   */
+  validateHooksUsage: z.boolean().default(true),
+
+  // Validate that ref values (`ref.current`) are not accessed during render.
+  validateRefAccessDuringRender: z.boolean().default(true),
+
+  /*
+   * Validates that setState is not unconditionally called during render, as it can lead to
+   * infinite loops.
+   */
+  validateNoSetStateInRender: z.boolean().default(true),
+
+  /**
+   * When enabled, changes the behavior of validateNoSetStateInRender to recommend
+   * using useKeyedState instead of the manual pattern for resetting state.
+   */
+  enableUseKeyedState: z.boolean().default(false),
+
+  /**
+   * Validates that setState is not called synchronously within an effect (useEffect and friends).
+   * Scheduling a setState (with an event listener, subscription, etc) is valid.
+   */
+  validateNoSetStateInEffects: z.boolean().default(false),
+
+  /**
+   * Validates that effects are not used to calculate derived data which could instead be computed
+   * during render.
+   */
+  validateNoDerivedComputationsInEffects: z.boolean().default(false),
+
+  /**
+   * Experimental: Validates that effects are not used to calculate derived data which could instead be computed
+   * during render. Generates a custom error message for each type of violation.
+   */
+  validateNoDerivedComputationsInEffects_exp: z.boolean().default(false),
+
+  /**
+   * Validates against creating JSX within a try block and recommends using an error boundary
+   * instead.
+   */
+  validateNoJSXInTryStatements: z.boolean().default(false),
+
+  /**
+   * Validates against dynamically creating components during render.
+   */
+  validateStaticComponents: z.boolean().default(false),
+
+  /**
+   * Validates that the dependencies of all effect hooks are memoized. This helps ensure
+   * that Forget does not introduce infinite renders caused by a dependency changing,
+   * triggering an effect, which triggers re-rendering, which causes a dependency to change,
+   * triggering the effect, etc.
+   *
+   * Covers useEffect, useLayoutEffect, useInsertionEffect.
+   */
+  validateMemoizedEffectDependencies: z.boolean().default(false),
+
+  /**
+   * Validates that there are no capitalized calls other than those allowed by the allowlist.
+   * Calls to capitalized functions are often functions that used to be components and may
+   * have lingering hook calls, which makes those calls risky to memoize.
+   *
+   * You can specify a list of capitalized calls to allowlist using this option. React Compiler
+   * always includes its known global functions, including common functions like Boolean and String,
+   * in this allowlist. You can enable this validation with no additional allowlisted calls by setting
+   * this option to the empty array.
+   */
+  validateNoCapitalizedCalls: z.nullable(z.array(z.string())).default(null),
+  validateBlocklistedImports: z.nullable(z.array(z.string())).default(null),
+
+  /**
+   * Validates that AST nodes generated during codegen have proper source locations.
+   * This is useful for debugging issues with source maps and Istanbul coverage.
+   * When enabled, the compiler will error if important source locations are missing in the generated AST.
+   */
+  validateSourceLocations: z.boolean().default(false),
+
+  /**
+   * Validate against impure functions called during render
+   */
+  validateNoImpureFunctionsInRender: z.boolean().default(false),
+
+  /**
+   * Validate against passing mutable functions to hooks
+   */
+  validateNoFreezingKnownMutableFunctions: z.boolean().default(false),
+
+  /*
+   * When enabled, the compiler assumes that hooks follow the Rules of React:
+   * - Hooks may memoize computation based on any of their parameters, thus
+   *   any arguments to a hook are assumed frozen after calling the hook.
+   * - Hooks may memoize the result they return, thus the return value is
+   *   assumed frozen.
+   */
+  enableAssumeHooksFollowRulesOfReact: z.boolean().default(true),
+
+  /**
+   * When enabled, the compiler assumes that any values are not subsequently
+   * modified after they are captured by a function passed to React. For example,
+   * if a value `x` is referenced inside a function expression passed to `useEffect`,
+   * then this flag will assume that `x` is not subusequently modified.
+   */
+  enableTransitivelyFreezeFunctionExpressions: z.boolean().default(true),
+
+  /*
+   * Enables codegen mutability debugging. This emits a dev-mode only to log mutations
+   * to values that Forget assumes are immutable (for Forget compiled code).
+   * For example:
+   *   emitFreeze: {
+   *     source: 'ReactForgetRuntime',
+   *     importSpecifierName: 'makeReadOnly',
+   *   }
+   *
+   * produces:
+   *   import {makeReadOnly} from 'ReactForgetRuntime';
+   *
+   *   function Component(props) {
+   *     if (c_0) {
+   *       // ...
+   *       $[0] = __DEV__ ? makeReadOnly(x) : x;
+   *     } else {
+   *       x = $[0];
+   *     }
+   *   }
+   */
+  enableEmitFreeze: ExternalFunctionSchema.nullable().default(null),
+
+  enableEmitHookGuards: ExternalFunctionSchema.nullable().default(null),
+
+  /**
+   * Enable instruction reordering. See InstructionReordering.ts for the details
+   * of the approach.
+   */
+  enableInstructionReordering: z.boolean().default(false),
+
+  /**
+   * Enables function outlinining, where anonymous functions that do not close over
+   * local variables can be extracted into top-level helper functions.
+   */
+  enableFunctionOutlining: z.boolean().default(true),
+
+  /**
+   * If enabled, this will outline nested JSX into a separate component.
+   *
+   * This will enable the compiler to memoize the separate component, giving us
+   * the same behavior as compiling _within_ the callback.
+   *
+   * ```
+   * function Component(countries, onDelete) {
+   *   const name = useFoo();
+   *   return countries.map(() => {
+   *     return (
+   *       <Foo>
+   *         <Bar>{name}</Bar>
+   *         <Button onclick={onDelete}>delete</Button>
+   *       </Foo>
+   *     );
+   *   });
+   * }
+   * ```
+   *
+   * will be transpiled to:
+   *
+   * ```
+   * function Component(countries, onDelete) {
+   *   const name = useFoo();
+   *   return countries.map(() => {
+   *     return (
+   *       <Temp name={name} onDelete={onDelete} />
+   *     );
+   *   });
+   * }
+   *
+   * function Temp({name, onDelete}) {
+   *   return (
+   *     <Foo>
+   *       <Bar>{name}</Bar>
+   *       <Button onclick={onDelete}>delete</Button>
+   *     </Foo>
+   *   );
+   * }
+   *
+   * Both, `Component` and `Temp` will then be memoized by the compiler.
+   *
+   * With this change, when `countries` is updated by adding one single value,
+   * only the newly added value is re-rendered and not the entire list.
+   */
+  enableJsxOutlining: z.boolean().default(false),
+
+  /*
+   * Enables instrumentation codegen. This emits a dev-mode only call to an
+   * instrumentation function, for components and hooks that Forget compiles.
+   * For example:
+   *   instrumentForget: {
+   *     import: {
+   *       source: 'react-compiler-runtime',
+   *       importSpecifierName: 'useRenderCounter',
+   *      }
+   *   }
+   *
+   * produces:
+   *   import {useRenderCounter} from 'react-compiler-runtime';
+   *
+   *   function Component(props) {
+   *     if (__DEV__) {
+   *        useRenderCounter("Component", "/filepath/filename.js");
+   *     }
+   *     // ...
+   *   }
+   *
+   */
+  enableEmitInstrumentForget: InstrumentationSchema.nullable().default(null),
+
+  // Enable validation of mutable ranges
+  assertValidMutableRanges: z.boolean().default(false),
+
+  /*
+   * Enable emitting "change variables" which store the result of whether a particular
+   * reactive scope dependency has changed since the scope was last executed.
+   *
+   * Ex:
+   * ```
+   * const c_0 = $[0] !== input; // change variable
+   * let output;
+   * if (c_0) ...
+   * ```
+   *
+   * Defaults to false, where the comparison is inlined:
+   *
+   * ```
+   * let output;
+   * if ($[0] !== input) ...
+   * ```
+   */
+  enableChangeVariableCodegen: z.boolean().default(false),
+
+  /**
+   * Enable emitting comments that explain Forget's output, and which
+   * values are being checked and which values produced by each memo block.
+   *
+   * Intended for use in demo purposes (incl playground)
+   */
+  enableMemoizationComments: z.boolean().default(false),
+
+  /**
+   * [TESTING ONLY] Throw an unknown exception during compilation to
+   * simulate unexpected exceptions e.g. errors from babel functions.
+   */
+  throwUnknownException__testonly: z.boolean().default(false),
+
+  /**
+   * Enables deps of a function epxression to be treated as conditional. This
+   * makes sure we don't load a dep when it's a property (to check if it has
+   * changed) and instead check the receiver.
+   *
+   * This makes sure we don't end up throwing when the reciver is null. Consider
+   * this code:
+   *
+   * ```
+   * function getLength() {
+   *   return props.bar.length;
+   * }
+   * ```
+   *
+   * It's only safe to memoize `getLength` against props, not props.bar, as
+   * props.bar could be null when this `getLength` function is created.
+   *
+   * This does cause the memoization to now be coarse grained, which is
+   * non-ideal.
+   */
+  enableTreatFunctionDepsAsConditional: z.boolean().default(false),
+
+  /**
+   * When true, always act as though the dependencies of a memoized value
+   * have changed. This makes the compiler not actually perform any optimizations,
+   * but is useful for debugging. Implicitly also sets
+   * @enablePreserveExistingManualUseMemo, because otherwise memoization in the
+   * original source will be disabled as well.
+   */
+  disableMemoizationForDebugging: z.boolean().default(false),
+
+  /**
+   * When true, rather using memoized values, the compiler will always re-compute
+   * values, and then use a heuristic to compare the memoized value to the newly
+   * computed one. This detects cases where rules of react violations may cause the
+   * compiled code to behave differently than the original.
+   */
+  enableChangeDetectionForDebugging:
+    ExternalFunctionSchema.nullable().default(null),
+
+  /**
+   * The react native re-animated library uses custom Babel transforms that
+   * requires the calls to library API remain unmodified.
+   *
+   * If this flag is turned on, the React compiler will use custom type
+   * definitions for reanimated library to make it's Babel plugin work
+   * with the compiler.
+   */
+  enableCustomTypeDefinitionForReanimated: z.boolean().default(false),
+
+  /**
+   * If specified, this value is used as a pattern for determing which global values should be
+   * treated as hooks. The pattern should have a single capture group, which will be used as
+   * the hook name for the purposes of resolving hook definitions (for builtin hooks)_.
+   *
+   * For example, by default `React$useState` would not be treated as a hook. By specifying
+   * `hookPattern: 'React$(\w+)'`, the compiler will treat this value equivalently to `useState()`.
+   *
+   * This setting is intended for cases where Forget is compiling code that has been prebundled
+   * and identifiers have been changed.
+   */
+  hookPattern: z.string().nullable().default(null),
+
+  /**
+   * If enabled, this will treat objects named as `ref` or if their names end with the substring `Ref`,
+   * and contain a property named `current`, as React refs.
+   *
+   * ```
+   * const ref = useMyRef();
+   * const myRef = useMyRef2();
+   * useEffect(() => {
+   *   ref.current = ...;
+   *   myRef.current = ...;
+   * })
+   * ```
+   *
+   * Here the variables `ref` and `myRef` will be typed as Refs.
+   */
+  enableTreatRefLikeIdentifiersAsRefs: z.boolean().default(true),
+
+  /**
+   * Treat identifiers as SetState type if both
+   * - they are named with a "set-" prefix
+   * - they are called somewhere
+   */
+  enableTreatSetIdentifiersAsStateSetters: z.boolean().default(false),
+
+  /*
+   * If specified a value, the compiler lowers any calls to `useContext` to use
+   * this value as the callee.
+   *
+   * A selector function is compiled and passed as an argument along with the
+   * context to this function call.
+   *
+   * The compiler automatically figures out the keys by looking for the immediate
+   * destructuring of the return value from the useContext call. In the future,
+   * this can be extended to different kinds of context access like property
+   * loads and accesses over multiple statements as well.
+   *
+   * ```
+   * // input
+   * const {foo, bar} = useContext(MyContext);
+   *
+   * // output
+   * const {foo, bar} = useCompiledContext(MyContext, (c) => [c.foo, c.bar]);
+   * ```
+   */
+  lowerContextAccess: ExternalFunctionSchema.nullable().default(null),
+
+  /**
+   * If enabled, will validate useMemos that don't return any values:
+   *
+   * Valid:
+   *   useMemo(() => foo, [foo]);
+   *   useMemo(() => { return foo }, [foo]);
+   * Invalid:
+   *   useMemo(() => { ... }, [...]);
+   */
+  validateNoVoidUseMemo: z.boolean().default(true),
+
+  /**
+   * Validates that Components/Hooks are always defined at module level. This prevents scope
+   * reference errors that occur when the compiler attempts to optimize the nested component/hook
+   * while its parent function remains uncompiled.
+   */
+  validateNoDynamicallyCreatedComponentsOrHooks: z.boolean().default(false),
+
+  /**
+   * When enabled, allows setState calls in effects based on valid patterns involving refs:
+   * - Allow setState where the value being set is derived from a ref. This is useful where
+   *   state needs to take into account layer information, and a layout effect reads layout
+   *   data from a ref and sets state.
+   * - Allow conditionally calling setState after manually comparing previous/new values
+   *   for changes via a ref. Relying on effect deps is insufficient for non-primitive values,
+   *   so a ref is generally required to manually track previous values and compare prev/next
+   *   for meaningful changes before setting state.
+   */
+  enableAllowSetStateFromRefsInEffects: z.boolean().default(true),
+
+  /**
+   * When enabled, provides verbose error messages for setState calls within effects,
+   * presenting multiple possible fixes to the user/agent since we cannot statically
+   * determine which specific use-case applies:
+   * 1. Non-local derived data - requires restructuring state ownership
+   * 2. Derived event pattern - detecting when a prop changes
+   * 3. Force update / external sync - should use useSyncExternalStore
+   */
+  enableVerboseNoSetStateInEffect: z.boolean().default(false),
+
+  /**
+   * Enables inference of event handler types for JSX props on built-in DOM elements.
+   * When enabled, functions passed to event handler props (props starting with "on")
+   * on primitive JSX tags are inferred to have the BuiltinEventHandlerId type, which
+   * allows ref access within those functions since DOM event handlers are guaranteed
+   * by React to only execute in response to events, not during render.
+   */
+  enableInferEventHandlers: z.boolean().default(false),
+});
+
+export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;
+
+export type PartialEnvironmentConfig = Partial<EnvironmentConfig>;
+
+export type ReactFunctionType = 'Component' | 'Hook' | 'Other';
+
+export function printFunctionType(type: ReactFunctionType): string {
+  switch (type) {
+    case 'Component': {
+      return 'component';
+    }
+    case 'Hook': {
+      return 'hook';
+    }
+    default: {
+      return 'function';
+    }
+  }
+}
+
+export class Environment {
+  #globals: GlobalRegistry;
+  #shapes: ShapeRegistry;
+  #moduleTypes: Map<string, Global | null> = new Map();
+  #nextIdentifer: number = 0;
+  #nextBlock: number = 0;
+  #nextScope: number = 0;
+  #scope: BabelScope;
+  #outlinedFunctions: Array<{
+    fn: HIRFunction;
+    type: ReactFunctionType | null;
+  }> = [];
+  logger: Logger | null;
+  filename: string | null;
+  code: string | null;
+  config: EnvironmentConfig;
+  fnType: ReactFunctionType;
+  outputMode: CompilerOutputMode;
+  programContext: ProgramContext;
+  hasFireRewrite: boolean;
+  hasInferredEffect: boolean;
+  inferredEffectLocations: Set<SourceLocation> = new Set();
+
+  #contextIdentifiers: Set<t.Identifier>;
+  #hoistedIdentifiers: Set<t.Identifier>;
+  parentFunction: NodePath<t.Function>;
+
+  #flowTypeEnvironment: FlowTypeEnv | null;
+
+  constructor(
+    scope: BabelScope,
+    fnType: ReactFunctionType,
+    outputMode: CompilerOutputMode,
+    config: EnvironmentConfig,
+    contextIdentifiers: Set<t.Identifier>,
+    parentFunction: NodePath<t.Function>, // the outermost function being compiled
+    logger: Logger | null,
+    filename: string | null,
+    code: string | null,
+    programContext: ProgramContext,
+  ) {
+    this.#scope = scope;
+    this.fnType = fnType;
+    this.outputMode = outputMode;
+    this.config = config;
+    this.filename = filename;
+    this.code = code;
+    this.logger = logger;
+    this.programContext = programContext;
+    this.#shapes = new Map(DEFAULT_SHAPES);
+    this.#globals = new Map(DEFAULT_GLOBALS);
+    this.hasFireRewrite = false;
+    this.hasInferredEffect = false;
+
+    if (
+      config.disableMemoizationForDebugging &&
+      config.enableChangeDetectionForDebugging != null
+    ) {
+      CompilerError.throwInvalidConfig({
+        reason: `Invalid environment config: the 'disableMemoizationForDebugging' and 'enableChangeDetectionForDebugging' options cannot be used together`,
+        description: null,
+        loc: null,
+        suggestions: null,
+      });
+    }
+
+    for (const [hookName, hook] of this.config.customHooks) {
+      CompilerError.invariant(!this.#globals.has(hookName), {
+        reason: `[Globals] Found existing definition in global registry for custom hook ${hookName}`,
+        loc: GeneratedSource,
+      });
+      this.#globals.set(
+        hookName,
+        addHook(this.#shapes, {
+          positionalParams: [],
+          restParam: hook.effectKind,
+          returnType: hook.transitiveMixedData
+            ? {kind: 'Object', shapeId: BuiltInMixedReadonlyId}
+            : {kind: 'Poly'},
+          returnValueKind: hook.valueKind,
+          calleeEffect: Effect.Read,
+          hookKind: 'Custom',
+          noAlias: hook.noAlias,
+        }),
+      );
+    }
+
+    if (config.enableCustomTypeDefinitionForReanimated) {
+      const reanimatedModuleType = getReanimatedModuleType(this.#shapes);
+      this.#moduleTypes.set(REANIMATED_MODULE_NAME, reanimatedModuleType);
+    }
+
+    this.parentFunction = parentFunction;
+    this.#contextIdentifiers = contextIdentifiers;
+    this.#hoistedIdentifiers = new Set();
+
+    if (config.flowTypeProvider != null) {
+      this.#flowTypeEnvironment = new FlowTypeEnv();
+      CompilerError.invariant(code != null, {
+        reason:
+          'Expected Environment to be initialized with source code when a Flow type provider is specified',
+        loc: GeneratedSource,
+      });
+      this.#flowTypeEnvironment.init(this, code);
+    } else {
+      this.#flowTypeEnvironment = null;
+    }
+  }
+
+  get typeContext(): FlowTypeEnv {
+    CompilerError.invariant(this.#flowTypeEnvironment != null, {
+      reason: 'Flow type environment not initialized',
+      loc: GeneratedSource,
+    });
+    return this.#flowTypeEnvironment;
+  }
+
+  get enableDropManualMemoization(): boolean {
+    switch (this.outputMode) {
+      case 'lint': {
+        // linting drops to be more compatible with compiler analysis
+        return true;
+      }
+      case 'client':
+      case 'ssr': {
+        return true;
+      }
+      case 'client-no-memo': {
+        return false;
+      }
+      default: {
+        assertExhaustive(
+          this.outputMode,
+          `Unexpected output mode '${this.outputMode}'`,
+        );
+      }
+    }
+  }
+
+  get enableMemoization(): boolean {
+    switch (this.outputMode) {
+      case 'client':
+      case 'lint': {
+        // linting also enables memoization so that we can check if manual memoization is preserved
+        return true;
+      }
+      case 'ssr':
+      case 'client-no-memo': {
+        return false;
+      }
+      default: {
+        assertExhaustive(
+          this.outputMode,
+          `Unexpected output mode '${this.outputMode}'`,
+        );
+      }
+    }
+  }
+
+  get enableValidations(): boolean {
+    switch (this.outputMode) {
+      case 'client':
+      case 'lint':
+      case 'ssr': {
+        return true;
+      }
+      case 'client-no-memo': {
+        return false;
+      }
+      default: {
+        assertExhaustive(
+          this.outputMode,
+          `Unexpected output mode '${this.outputMode}'`,
+        );
+      }
+    }
+  }
+
+  get nextIdentifierId(): IdentifierId {
+    return makeIdentifierId(this.#nextIdentifer++);
+  }
+
+  get nextBlockId(): BlockId {
+    return makeBlockId(this.#nextBlock++);
+  }
+
+  get nextScopeId(): ScopeId {
+    return makeScopeId(this.#nextScope++);
+  }
+
+  get scope(): BabelScope {
+    return this.#scope;
+  }
+
+  logErrors(errors: Result<void, CompilerError>): void {
+    if (errors.isOk() || this.logger == null) {
+      return;
+    }
+    for (const error of errors.unwrapErr().details) {
+      this.logger.logEvent(this.filename, {
+        kind: 'CompileError',
+        detail: error,
+        fnLoc: null,
+      });
+    }
+  }
+
+  isContextIdentifier(node: t.Identifier): boolean {
+    return this.#contextIdentifiers.has(node);
+  }
+
+  isHoistedIdentifier(node: t.Identifier): boolean {
+    return this.#hoistedIdentifiers.has(node);
+  }
+
+  generateGloballyUniqueIdentifierName(
+    name: string | null,
+  ): ValidatedIdentifier {
+    const identifierNode = this.#scope.generateUidIdentifier(name ?? undefined);
+    return makeIdentifierName(identifierNode.name);
+  }
+
+  outlineFunction(fn: HIRFunction, type: ReactFunctionType | null): void {
+    this.#outlinedFunctions.push({fn, type});
+  }
+
+  getOutlinedFunctions(): Array<{
+    fn: HIRFunction;
+    type: ReactFunctionType | null;
+  }> {
+    return this.#outlinedFunctions;
+  }
+
+  #resolveModuleType(moduleName: string, loc: SourceLocation): Global | null {
+    let moduleType = this.#moduleTypes.get(moduleName);
+    if (moduleType === undefined) {
+      /*
+       * NOTE: Zod doesn't work when specifying a function as a default, so we have to
+       * fallback to the default value here
+       */
+      const moduleTypeProvider =
+        this.config.moduleTypeProvider ?? defaultModuleTypeProvider;
+      if (moduleTypeProvider == null) {
+        return null;
+      }
+      if (typeof moduleTypeProvider !== 'function') {
+        CompilerError.throwInvalidConfig({
+          reason: `Expected a function for \`moduleTypeProvider\``,
+          loc,
+        });
+      }
+      const unparsedModuleConfig = moduleTypeProvider(moduleName);
+      if (unparsedModuleConfig != null) {
+        const parsedModuleConfig = TypeSchema.safeParse(unparsedModuleConfig);
+        if (!parsedModuleConfig.success) {
+          CompilerError.throwInvalidConfig({
+            reason: `Could not parse module type, the configured \`moduleTypeProvider\` function returned an invalid module description`,
+            description: parsedModuleConfig.error.toString(),
+            loc,
+          });
+        }
+        const moduleConfig = parsedModuleConfig.data;
+        moduleType = installTypeConfig(
+          this.#globals,
+          this.#shapes,
+          moduleConfig,
+          moduleName,
+          loc,
+        );
+      } else {
+        moduleType = null;
+      }
+      this.#moduleTypes.set(moduleName, moduleType);
+    }
+    return moduleType;
+  }
+
+  getGlobalDeclaration(
+    binding: NonLocalBinding,
+    loc: SourceLocation,
+  ): Global | null {
+    if (this.config.hookPattern != null) {
+      const match = new RegExp(this.config.hookPattern).exec(binding.name);
+      if (
+        match != null &&
+        typeof match[1] === 'string' &&
+        isHookName(match[1])
+      ) {
+        const resolvedName = match[1];
+        return this.#globals.get(resolvedName) ?? this.#getCustomHookType();
+      }
+    }
+
+    switch (binding.kind) {
+      case 'ModuleLocal': {
+        // don't resolve module locals
+        return isHookName(binding.name) ? this.#getCustomHookType() : null;
+      }
+      case 'Global': {
+        return (
+          this.#globals.get(binding.name) ??
+          (isHookName(binding.name) ? this.#getCustomHookType() : null)
+        );
+      }
+      case 'ImportSpecifier': {
+        if (this.#isKnownReactModule(binding.module)) {
+          /**
+           * For `import {imported as name} from "..."` form, we use the `imported`
+           * name rather than the local alias. Because we don't have definitions for
+           * every React builtin hook yet, we also check to see if the imported name
+           * is hook-like (whereas the fall-through below is checking if the aliased
+           * name is hook-like)
+           */
+          return (
+            this.#globals.get(binding.imported) ??
+            (isHookName(binding.imported) || isHookName(binding.name)
+              ? this.#getCustomHookType()
+              : null)
+          );
+        } else {
+          const moduleType = this.#resolveModuleType(binding.module, loc);
+          if (moduleType !== null) {
+            const importedType = this.getPropertyType(
+              moduleType,
+              binding.imported,
+            );
+            if (importedType != null) {
+              /*
+               * Check that hook-like export names are hook types, and non-hook names are non-hook types.
+               * The user-assigned alias isn't decidable by the type provider, so we ignore that for the check.
+               * Thus we allow `import {fooNonHook as useFoo} from ...` because the name and type both say
+               * that it's not a hook.
+               */
+              const expectHook = isHookName(binding.imported);
+              const isHook = getHookKindForType(this, importedType) != null;
+              if (expectHook !== isHook) {
+                CompilerError.throwInvalidConfig({
+                  reason: `Invalid type configuration for module`,
+                  description: `Expected type for \`import {${binding.imported}} from '${binding.module}'\` ${expectHook ? 'to be a hook' : 'not to be a hook'} based on the exported name`,
+                  loc,
+                });
+              }
+              return importedType;
+            }
+          }
+
+          /**
+           * For modules we don't own, we look at whether the original name or import alias
+           * are hook-like. Both of the following are likely hooks so we would return a hook
+           * type for both:
+           *
+           * `import {useHook as foo} ...`
+           * `import {foo as useHook} ...`
+           */
+          return isHookName(binding.imported) || isHookName(binding.name)
+            ? this.#getCustomHookType()
+            : null;
+        }
+      }
+      case 'ImportDefault':
+      case 'ImportNamespace': {
+        if (this.#isKnownReactModule(binding.module)) {
+          // only resolve imports to modules we know about
+          return (
+            this.#globals.get(binding.name) ??
+            (isHookName(binding.name) ? this.#getCustomHookType() : null)
+          );
+        } else {
+          const moduleType = this.#resolveModuleType(binding.module, loc);
+          if (moduleType !== null) {
+            let importedType: Type | null = null;
+            if (binding.kind === 'ImportDefault') {
+              const defaultType = this.getPropertyType(moduleType, 'default');
+              if (defaultType !== null) {
+                importedType = defaultType;
+              }
+            } else {
+              importedType = moduleType;
+            }
+            if (importedType !== null) {
+              /*
+               * Check that the hook-like modules are defined as types, and non hook-like modules are not typed as hooks.
+               * So `import Foo from 'useFoo'` is expected to be a hook based on the module name
+               */
+              const expectHook = isHookName(binding.module);
+              const isHook = getHookKindForType(this, importedType) != null;
+              if (expectHook !== isHook) {
+                CompilerError.throwInvalidConfig({
+                  reason: `Invalid type configuration for module`,
+                  description: `Expected type for \`import ... from '${binding.module}'\` ${expectHook ? 'to be a hook' : 'not to be a hook'} based on the module name`,
+                  loc,
+                });
+              }
+              return importedType;
+            }
+          }
+          return isHookName(binding.name) ? this.#getCustomHookType() : null;
+        }
+      }
+    }
+  }
+
+  #isKnownReactModule(moduleName: string): boolean {
+    return (
+      moduleName.toLowerCase() === 'react' ||
+      moduleName.toLowerCase() === 'react-dom'
+    );
+  }
+  static knownReactModules: ReadonlyArray<string> = ['react', 'react-dom'];
+
+  getFallthroughPropertyType(
+    receiver: Type,
+    _property: Type,
+  ): BuiltInType | PolyType | null {
+    let shapeId = null;
+    if (receiver.kind === 'Object' || receiver.kind === 'Function') {
+      shapeId = receiver.shapeId;
+    }
+
+    if (shapeId !== null) {
+      const shape = this.#shapes.get(shapeId);
+
+      CompilerError.invariant(shape !== undefined, {
+        reason: `[HIR] Forget internal error: cannot resolve shape ${shapeId}`,
+        loc: GeneratedSource,
+      });
+      return shape.properties.get('*') ?? null;
+    }
+    return null;
+  }
+
+  getPropertyType(
+    receiver: Type,
+    property: string | number,
+  ): BuiltInType | PolyType | null {
+    let shapeId = null;
+    if (receiver.kind === 'Object' || receiver.kind === 'Function') {
+      shapeId = receiver.shapeId;
+    }
+    if (shapeId !== null) {
+      /*
+       * If an object or function has a shapeId, it must have been assigned
+       * by Forget (and be present in a builtin or user-defined registry)
+       */
+      const shape = this.#shapes.get(shapeId);
+      CompilerError.invariant(shape !== undefined, {
+        reason: `[HIR] Forget internal error: cannot resolve shape ${shapeId}`,
+        loc: GeneratedSource,
+      });
+      if (typeof property === 'string') {
+        return (
+          shape.properties.get(property) ??
+          shape.properties.get('*') ??
+          (isHookName(property) ? this.#getCustomHookType() : null)
+        );
+      } else {
+        return shape.properties.get('*') ?? null;
+      }
+    } else if (typeof property === 'string' && isHookName(property)) {
+      return this.#getCustomHookType();
+    }
+    return null;
+  }
+
+  getFunctionSignature(type: FunctionType): FunctionSignature | null {
+    const {shapeId} = type;
+    if (shapeId !== null) {
+      const shape = this.#shapes.get(shapeId);
+      CompilerError.invariant(shape !== undefined, {
+        reason: `[HIR] Forget internal error: cannot resolve shape ${shapeId}`,
+        loc: GeneratedSource,
+      });
+      return shape.functionType;
+    }
+    return null;
+  }
+
+  addHoistedIdentifier(node: t.Identifier): void {
+    this.#contextIdentifiers.add(node);
+    this.#hoistedIdentifiers.add(node);
+  }
+
+  #getCustomHookType(): Global {
+    if (this.config.enableAssumeHooksFollowRulesOfReact) {
+      return DefaultNonmutatingHook;
+    } else {
+      return DefaultMutatingHook;
+    }
+  }
+}
+
+const REANIMATED_MODULE_NAME = 'react-native-reanimated';
+
+// From https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#LL18C1-L23C2
+export function isHookName(name: string): boolean {
+  return /^use[A-Z0-9]/.test(name);
+}
+
+export function parseEnvironmentConfig(
+  partialConfig: PartialEnvironmentConfig,
+): Result<EnvironmentConfig, ZodError<PartialEnvironmentConfig>> {
+  const config = EnvironmentConfigSchema.safeParse(partialConfig);
+  if (config.success) {
+    return Ok(config.data);
+  } else {
+    return Err(config.error);
+  }
+}
+
+export function validateEnvironmentConfig(
+  partialConfig: PartialEnvironmentConfig,
+): EnvironmentConfig {
+  const config = EnvironmentConfigSchema.safeParse(partialConfig);
+  if (config.success) {
+    return config.data;
+  }
+
+  CompilerError.throwInvalidConfig({
+    reason:
+      'Could not validate environment config. Update React Compiler config to fix the error',
+    description: `${fromZodError(config.error)}`,
+    loc: null,
+    suggestions: null,
+  });
+}
+
+export function tryParseExternalFunction(
+  maybeExternalFunction: any,
+): ExternalFunction {
+  const externalFunction = ExternalFunctionSchema.safeParse(
+    maybeExternalFunction,
+  );
+  if (externalFunction.success) {
+    return externalFunction.data;
+  }
+
+  CompilerError.throwInvalidConfig({
+    reason:
+      'Could not parse external function. Update React Compiler config to fix the error',
+    description: `${fromZodError(externalFunction.error)}`,
+    loc: null,
+    suggestions: null,
+  });
+}
+
+export const DEFAULT_EXPORT = 'default';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/FindContextIdentifiers.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/FindContextIdentifiers.ts
new file mode 100644
index 00000000000..efb5df2a49f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/FindContextIdentifiers.ts
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {NodePath} from '@babel/traverse';
+import type * as t from '@babel/types';
+import {CompilerError} from '../CompilerError';
+import {getOrInsertDefault} from '../Utils/utils';
+import {GeneratedSource} from './HIR';
+
+type IdentifierInfo = {
+  reassigned: boolean;
+  reassignedByInnerFn: boolean;
+  referencedByInnerFn: boolean;
+};
+const DEFAULT_IDENTIFIER_INFO: IdentifierInfo = {
+  reassigned: false,
+  reassignedByInnerFn: false,
+  referencedByInnerFn: false,
+};
+
+type BabelFunction =
+  | NodePath<t.FunctionDeclaration>
+  | NodePath<t.FunctionExpression>
+  | NodePath<t.ArrowFunctionExpression>
+  | NodePath<t.ObjectMethod>;
+type FindContextIdentifierState = {
+  currentFn: Array<BabelFunction>;
+  identifiers: Map<t.Identifier, IdentifierInfo>;
+};
+
+const withFunctionScope = {
+  enter: function (
+    path: BabelFunction,
+    state: FindContextIdentifierState,
+  ): void {
+    state.currentFn.push(path);
+  },
+  exit: function (_: BabelFunction, state: FindContextIdentifierState): void {
+    state.currentFn.pop();
+  },
+};
+
+export function findContextIdentifiers(
+  func: NodePath<t.Function>,
+): Set<t.Identifier> {
+  const state: FindContextIdentifierState = {
+    currentFn: [],
+    identifiers: new Map(),
+  };
+
+  func.traverse<FindContextIdentifierState>(
+    {
+      FunctionDeclaration: withFunctionScope,
+      FunctionExpression: withFunctionScope,
+      ArrowFunctionExpression: withFunctionScope,
+      ObjectMethod: withFunctionScope,
+      AssignmentExpression(
+        path: NodePath<t.AssignmentExpression>,
+        state: FindContextIdentifierState,
+      ): void {
+        const left = path.get('left');
+        if (left.isLVal()) {
+          const currentFn = state.currentFn.at(-1) ?? null;
+          handleAssignment(currentFn, state.identifiers, left);
+        } else {
+          /**
+           * OptionalMemberExpressions as the left side of an AssignmentExpression are Stage 1 and
+           * not supported by React Compiler yet.
+           */
+          CompilerError.throwTodo({
+            reason: `Unsupported syntax on the left side of an AssignmentExpression`,
+            description: `Expected an LVal, got: ${left.type}`,
+            loc: left.node.loc ?? null,
+          });
+        }
+      },
+      UpdateExpression(
+        path: NodePath<t.UpdateExpression>,
+        state: FindContextIdentifierState,
+      ): void {
+        const argument = path.get('argument');
+        const currentFn = state.currentFn.at(-1) ?? null;
+        if (argument.isLVal()) {
+          handleAssignment(currentFn, state.identifiers, argument);
+        }
+      },
+      Identifier(
+        path: NodePath<t.Identifier>,
+        state: FindContextIdentifierState,
+      ): void {
+        const currentFn = state.currentFn.at(-1) ?? null;
+        if (path.isReferencedIdentifier()) {
+          handleIdentifier(currentFn, state.identifiers, path);
+        }
+      },
+    },
+    state,
+  );
+
+  const result = new Set<t.Identifier>();
+  for (const [id, info] of state.identifiers.entries()) {
+    if (info.reassignedByInnerFn) {
+      result.add(id);
+    } else if (info.reassigned && info.referencedByInnerFn) {
+      result.add(id);
+    }
+  }
+  return result;
+}
+
+function handleIdentifier(
+  currentFn: BabelFunction | null,
+  identifiers: Map<t.Identifier, IdentifierInfo>,
+  path: NodePath<t.Identifier>,
+): void {
+  const name = path.node.name;
+  const binding = path.scope.getBinding(name);
+  if (binding == null) {
+    return;
+  }
+  const identifier = getOrInsertDefault(identifiers, binding.identifier, {
+    ...DEFAULT_IDENTIFIER_INFO,
+  });
+
+  if (currentFn != null) {
+    const bindingAboveLambdaScope = currentFn.scope.parent.getBinding(name);
+
+    if (binding === bindingAboveLambdaScope) {
+      identifier.referencedByInnerFn = true;
+    }
+  }
+}
+
+function handleAssignment(
+  currentFn: BabelFunction | null,
+  identifiers: Map<t.Identifier, IdentifierInfo>,
+  lvalPath: NodePath<t.LVal>,
+): void {
+  /*
+   * Find all reassignments to identifiers declared outside of currentFn
+   * This closely follows destructuring assignment assumptions and logic in BuildHIR
+   */
+  const lvalNode = lvalPath.node;
+  switch (lvalNode.type) {
+    case 'Identifier': {
+      const path = lvalPath as NodePath<t.Identifier>;
+      const name = path.node.name;
+      const binding = path.scope.getBinding(name);
+      if (binding == null) {
+        break;
+      }
+      const state = getOrInsertDefault(identifiers, binding.identifier, {
+        ...DEFAULT_IDENTIFIER_INFO,
+      });
+      state.reassigned = true;
+
+      if (currentFn != null) {
+        const bindingAboveLambdaScope = currentFn.scope.parent.getBinding(name);
+
+        if (binding === bindingAboveLambdaScope) {
+          state.reassignedByInnerFn = true;
+        }
+      }
+      break;
+    }
+    case 'ArrayPattern': {
+      const path = lvalPath as NodePath<t.ArrayPattern>;
+      for (const element of path.get('elements')) {
+        if (nonNull(element)) {
+          handleAssignment(currentFn, identifiers, element);
+        }
+      }
+      break;
+    }
+    case 'ObjectPattern': {
+      const path = lvalPath as NodePath<t.ObjectPattern>;
+      for (const property of path.get('properties')) {
+        if (property.isObjectProperty()) {
+          const valuePath = property.get('value');
+          CompilerError.invariant(valuePath.isLVal(), {
+            reason: `[FindContextIdentifiers] Expected object property value to be an LVal, got: ${valuePath.type}`,
+            loc: valuePath.node.loc ?? GeneratedSource,
+          });
+          handleAssignment(currentFn, identifiers, valuePath);
+        } else {
+          CompilerError.invariant(property.isRestElement(), {
+            reason: `[FindContextIdentifiers] Invalid assumptions for babel types.`,
+            loc: property.node.loc ?? GeneratedSource,
+          });
+          handleAssignment(currentFn, identifiers, property);
+        }
+      }
+      break;
+    }
+    case 'AssignmentPattern': {
+      const path = lvalPath as NodePath<t.AssignmentPattern>;
+      const left = path.get('left');
+      handleAssignment(currentFn, identifiers, left);
+      break;
+    }
+    case 'RestElement': {
+      const path = lvalPath as NodePath<t.RestElement>;
+      handleAssignment(currentFn, identifiers, path.get('argument'));
+      break;
+    }
+    case 'MemberExpression': {
+      // Interior mutability (not a reassign)
+      break;
+    }
+    default: {
+      CompilerError.throwTodo({
+        reason: `[FindContextIdentifiers] Cannot handle Object destructuring assignment target ${lvalNode.type}`,
+        description: null,
+        loc: lvalNode.loc ?? GeneratedSource,
+        suggestions: null,
+      });
+    }
+  }
+}
+
+function nonNull<T extends NonNullable<t.Node>>(
+  t: NodePath<T | null>,
+): t is NodePath<T> {
+  return t.node != null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
new file mode 100644
index 00000000000..441b5d5452a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
@@ -0,0 +1,1150 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Effect, ValueKind, ValueReason} from './HIR';
+import {
+  BUILTIN_SHAPES,
+  BuiltInArrayId,
+  BuiltInAutodepsId,
+  BuiltInFireFunctionId,
+  BuiltInFireId,
+  BuiltInMapId,
+  BuiltInMixedReadonlyId,
+  BuiltInObjectId,
+  BuiltInSetId,
+  BuiltInUseActionStateId,
+  BuiltInUseContextHookId,
+  BuiltInUseEffectEventId,
+  BuiltInUseEffectHookId,
+  BuiltInUseInsertionEffectHookId,
+  BuiltInUseLayoutEffectHookId,
+  BuiltInUseOperatorId,
+  BuiltInUseOptimisticId,
+  BuiltInUseReducerId,
+  BuiltInUseRefId,
+  BuiltInUseStateId,
+  BuiltInUseTransitionId,
+  BuiltInWeakMapId,
+  BuiltInWeakSetId,
+  BuiltInEffectEventId,
+  ReanimatedSharedValueId,
+  ShapeRegistry,
+  addFunction,
+  addHook,
+  addObject,
+} from './ObjectShape';
+import {BuiltInType, ObjectType, PolyType} from './Types';
+import {TypeConfig} from './TypeSchema';
+import {assertExhaustive} from '../Utils/utils';
+import {isHookName} from './Environment';
+import {CompilerError, SourceLocation} from '..';
+
+/*
+ * This file exports types and defaults for JavaScript global objects.
+ * A Forget `Environment` stores the GlobalRegistry and ShapeRegistry
+ * used for the current project. These ultimately help Forget refine
+ * its inference of types (i.e. Object vs Primitive) and effects
+ * (i.e. read vs mutate) in source programs.
+ */
+
+// ShapeRegistry with default definitions for builtins and global objects.
+export const DEFAULT_SHAPES: ShapeRegistry = new Map(BUILTIN_SHAPES);
+
+// Hack until we add ObjectShapes for all globals
+const UNTYPED_GLOBALS: Set<string> = new Set([
+  'Object',
+  'Function',
+  'RegExp',
+  'Date',
+  'Error',
+  'TypeError',
+  'RangeError',
+  'ReferenceError',
+  'SyntaxError',
+  'URIError',
+  'EvalError',
+  'DataView',
+  'Float32Array',
+  'Float64Array',
+  'Int8Array',
+  'Int16Array',
+  'Int32Array',
+  'WeakMap',
+  'Uint8Array',
+  'Uint8ClampedArray',
+  'Uint16Array',
+  'Uint32Array',
+  'ArrayBuffer',
+  'JSON',
+  'console',
+  'eval',
+]);
+
+const TYPED_GLOBALS: Array<[string, BuiltInType]> = [
+  [
+    'Object',
+    addObject(DEFAULT_SHAPES, 'Object', [
+      [
+        'keys',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [Effect.Read],
+          restParam: null,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+        }),
+      ],
+      [
+        /**
+         * Object.fromEntries(iterable)
+         * iterable: An iterable, such as an Array or Map, containing a list of
+         *           objects. Each object should have two properties.
+         * Returns a new object whose properties are given by the entries of the
+         * iterable.
+         */
+        'fromEntries',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [Effect.ConditionallyMutate],
+          restParam: null,
+          returnType: {kind: 'Object', shapeId: BuiltInObjectId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+        }),
+      ],
+      [
+        'entries',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [Effect.Capture],
+          restParam: null,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+          aliasing: {
+            receiver: '@receiver',
+            params: ['@object'],
+            rest: null,
+            returns: '@returns',
+            temporaries: [],
+            effects: [
+              {
+                kind: 'Create',
+                into: '@returns',
+                reason: ValueReason.KnownReturnSignature,
+                value: ValueKind.Mutable,
+              },
+              // Object values are captured into the return
+              {
+                kind: 'Capture',
+                from: '@object',
+                into: '@returns',
+              },
+            ],
+          },
+        }),
+      ],
+      [
+        'keys',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [Effect.Read],
+          restParam: null,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+          aliasing: {
+            receiver: '@receiver',
+            params: ['@object'],
+            rest: null,
+            returns: '@returns',
+            temporaries: [],
+            effects: [
+              {
+                kind: 'Create',
+                into: '@returns',
+                reason: ValueReason.KnownReturnSignature,
+                value: ValueKind.Mutable,
+              },
+              // Only keys are captured, and keys are immutable
+              {
+                kind: 'ImmutableCapture',
+                from: '@object',
+                into: '@returns',
+              },
+            ],
+          },
+        }),
+      ],
+      [
+        'values',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [Effect.Capture],
+          restParam: null,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+          aliasing: {
+            receiver: '@receiver',
+            params: ['@object'],
+            rest: null,
+            returns: '@returns',
+            temporaries: [],
+            effects: [
+              {
+                kind: 'Create',
+                into: '@returns',
+                reason: ValueReason.KnownReturnSignature,
+                value: ValueKind.Mutable,
+              },
+              // Object values are captured into the return
+              {
+                kind: 'Capture',
+                from: '@object',
+                into: '@returns',
+              },
+            ],
+          },
+        }),
+      ],
+    ]),
+  ],
+  [
+    'Array',
+    addObject(DEFAULT_SHAPES, 'Array', [
+      [
+        'isArray',
+        // Array.isArray(value)
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [Effect.Read],
+          restParam: null,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      /*
+       * https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.from
+       * Array.from(arrayLike, optionalFn, optionalThis)
+       * Note that the Effect of `arrayLike` is polymorphic i.e.
+       *  - Effect.read if
+       *     - it does not have an @iterator property and is array-like
+       *       (i.e. has a length property)
+       *    - it is an iterable object whose iterator does not mutate itself
+       *  - Effect.mutate if it is a self-mutative iterator (e.g. a generator
+       *    function)
+       */
+      [
+        'from',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [
+            Effect.ConditionallyMutateIterator,
+            Effect.ConditionallyMutate,
+            Effect.ConditionallyMutate,
+          ],
+          restParam: Effect.Read,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+        }),
+      ],
+      [
+        'of',
+        // Array.of(element0, ..., elementN)
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+        }),
+      ],
+    ]),
+  ],
+  [
+    'performance',
+    addObject(DEFAULT_SHAPES, 'performance', [
+      // Static methods (TODO)
+      [
+        'now',
+        // Date.now()
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Poly'}, // TODO: could be Primitive, but that would change existing compilation
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable, // same here
+          impure: true,
+          canonicalName: 'performance.now',
+        }),
+      ],
+    ]),
+  ],
+  [
+    'Date',
+    addObject(DEFAULT_SHAPES, 'Date', [
+      // Static methods (TODO)
+      [
+        'now',
+        // Date.now()
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Poly'}, // TODO: could be Primitive, but that would change existing compilation
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable, // same here
+          impure: true,
+          canonicalName: 'Date.now',
+        }),
+      ],
+    ]),
+  ],
+  [
+    'Math',
+    addObject(DEFAULT_SHAPES, 'Math', [
+      // Static properties (TODO)
+      ['PI', {kind: 'Primitive'}],
+      // Static methods (TODO)
+      [
+        'max',
+        // Math.max(value0, ..., valueN)
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'min',
+        // Math.min(value0, ..., valueN)
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'trunc',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'ceil',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'floor',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'pow',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'random',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Poly'}, // TODO: could be Primitive, but that would change existing compilation
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable, // same here
+          impure: true,
+          canonicalName: 'Math.random',
+        }),
+      ],
+    ]),
+  ],
+  ['Infinity', {kind: 'Primitive'}],
+  ['NaN', {kind: 'Primitive'}],
+  [
+    'console',
+    addObject(DEFAULT_SHAPES, 'console', [
+      [
+        'error',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'info',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'log',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'table',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'trace',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+      [
+        'warn',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Read,
+          returnType: {kind: 'Primitive'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Primitive,
+        }),
+      ],
+    ]),
+  ],
+  [
+    'Boolean',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'Number',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'String',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'parseInt',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'parseFloat',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'isNaN',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'isFinite',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'encodeURI',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'encodeURIComponent',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'decodeURI',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'decodeURIComponent',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'Map',
+    addFunction(
+      DEFAULT_SHAPES,
+      [],
+      {
+        positionalParams: [Effect.ConditionallyMutateIterator],
+        restParam: null,
+        returnType: {kind: 'Object', shapeId: BuiltInMapId},
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Mutable,
+      },
+      null,
+      true,
+    ),
+  ],
+  [
+    'Set',
+    addFunction(
+      DEFAULT_SHAPES,
+      [],
+      {
+        positionalParams: [Effect.ConditionallyMutateIterator],
+        restParam: null,
+        returnType: {kind: 'Object', shapeId: BuiltInSetId},
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Mutable,
+      },
+      null,
+      true,
+    ),
+  ],
+  [
+    'WeakMap',
+    addFunction(
+      DEFAULT_SHAPES,
+      [],
+      {
+        positionalParams: [Effect.ConditionallyMutateIterator],
+        restParam: null,
+        returnType: {kind: 'Object', shapeId: BuiltInWeakMapId},
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Mutable,
+      },
+      null,
+      true,
+    ),
+  ],
+  [
+    'WeakSet',
+    addFunction(
+      DEFAULT_SHAPES,
+      [],
+      {
+        positionalParams: [Effect.ConditionallyMutateIterator],
+        restParam: null,
+        returnType: {kind: 'Object', shapeId: BuiltInWeakSetId},
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Mutable,
+      },
+      null,
+      true,
+    ),
+  ],
+  // TODO: rest of Global objects
+];
+
+/*
+ * TODO(mofeiZ): We currently only store rest param effects for hooks.
+ * now that FeatureFlag `enableTreatHooksAsFunctions` is removed we can
+ * use positional params too (?)
+ */
+const REACT_APIS: Array<[string, BuiltInType]> = [
+  [
+    'useContext',
+    addHook(
+      DEFAULT_SHAPES,
+      {
+        positionalParams: [],
+        restParam: Effect.Read,
+        returnType: {kind: 'Poly'},
+        calleeEffect: Effect.Read,
+        hookKind: 'useContext',
+        returnValueKind: ValueKind.Frozen,
+        returnValueReason: ValueReason.Context,
+      },
+      BuiltInUseContextHookId,
+    ),
+  ],
+  [
+    'useState',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Object', shapeId: BuiltInUseStateId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useState',
+      returnValueKind: ValueKind.Frozen,
+      returnValueReason: ValueReason.State,
+    }),
+  ],
+  [
+    'useActionState',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Object', shapeId: BuiltInUseActionStateId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useActionState',
+      returnValueKind: ValueKind.Frozen,
+      returnValueReason: ValueReason.State,
+    }),
+  ],
+  [
+    'useReducer',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Object', shapeId: BuiltInUseReducerId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useReducer',
+      returnValueKind: ValueKind.Frozen,
+      returnValueReason: ValueReason.ReducerState,
+    }),
+  ],
+  [
+    'useRef',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Capture,
+      returnType: {kind: 'Object', shapeId: BuiltInUseRefId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useRef',
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'useImperativeHandle',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      hookKind: 'useImperativeHandle',
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
+  [
+    'useMemo',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Read,
+      hookKind: 'useMemo',
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
+  [
+    'useCallback',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Read,
+      hookKind: 'useCallback',
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
+  [
+    'useEffect',
+    addHook(
+      DEFAULT_SHAPES,
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {kind: 'Primitive'},
+        calleeEffect: Effect.Read,
+        hookKind: 'useEffect',
+        returnValueKind: ValueKind.Frozen,
+        aliasing: {
+          receiver: '@receiver',
+          params: [],
+          rest: '@rest',
+          returns: '@returns',
+          temporaries: ['@effect'],
+          effects: [
+            // Freezes the function and deps
+            {
+              kind: 'Freeze',
+              value: '@rest',
+              reason: ValueReason.Effect,
+            },
+            // Internally creates an effect object that captures the function and deps
+            {
+              kind: 'Create',
+              into: '@effect',
+              value: ValueKind.Frozen,
+              reason: ValueReason.KnownReturnSignature,
+            },
+            // The effect stores the function and dependencies
+            {
+              kind: 'Capture',
+              from: '@rest',
+              into: '@effect',
+            },
+            // Returns undefined
+            {
+              kind: 'Create',
+              into: '@returns',
+              value: ValueKind.Primitive,
+              reason: ValueReason.KnownReturnSignature,
+            },
+          ],
+        },
+      },
+      BuiltInUseEffectHookId,
+    ),
+  ],
+  [
+    'useLayoutEffect',
+    addHook(
+      DEFAULT_SHAPES,
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {kind: 'Poly'},
+        calleeEffect: Effect.Read,
+        hookKind: 'useLayoutEffect',
+        returnValueKind: ValueKind.Frozen,
+      },
+      BuiltInUseLayoutEffectHookId,
+    ),
+  ],
+  [
+    'useInsertionEffect',
+    addHook(
+      DEFAULT_SHAPES,
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {kind: 'Poly'},
+        calleeEffect: Effect.Read,
+        hookKind: 'useInsertionEffect',
+        returnValueKind: ValueKind.Frozen,
+      },
+      BuiltInUseInsertionEffectHookId,
+    ),
+  ],
+  [
+    'useTransition',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInUseTransitionId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useTransition',
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
+  [
+    'useOptimistic',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Object', shapeId: BuiltInUseOptimisticId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useOptimistic',
+      returnValueKind: ValueKind.Frozen,
+      returnValueReason: ValueReason.State,
+    }),
+  ],
+  [
+    'use',
+    addFunction(
+      DEFAULT_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {kind: 'Poly'},
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Frozen,
+      },
+      BuiltInUseOperatorId,
+    ),
+  ],
+  [
+    'fire',
+    addFunction(
+      DEFAULT_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: null,
+        returnType: {
+          kind: 'Function',
+          return: {kind: 'Poly'},
+          shapeId: BuiltInFireFunctionId,
+          isConstructor: false,
+        },
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Frozen,
+      },
+      BuiltInFireId,
+    ),
+  ],
+  [
+    'useEffectEvent',
+    addHook(
+      DEFAULT_SHAPES,
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {
+          kind: 'Function',
+          return: {kind: 'Poly'},
+          shapeId: BuiltInEffectEventId,
+          isConstructor: false,
+        },
+        calleeEffect: Effect.Read,
+        hookKind: 'useEffectEvent',
+        // Frozen because it should not mutate any locally-bound values
+        returnValueKind: ValueKind.Frozen,
+      },
+      BuiltInUseEffectEventId,
+    ),
+  ],
+  ['AUTODEPS', addObject(DEFAULT_SHAPES, BuiltInAutodepsId, [])],
+];
+
+TYPED_GLOBALS.push(
+  [
+    'React',
+    addObject(DEFAULT_SHAPES, null, [
+      ...REACT_APIS,
+      [
+        'createElement',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Freeze,
+          returnType: {kind: 'Poly'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Frozen,
+        }),
+      ],
+      [
+        'cloneElement',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Freeze,
+          returnType: {kind: 'Poly'},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Frozen,
+        }),
+      ],
+      [
+        'createRef',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [],
+          restParam: Effect.Capture, // createRef takes no paramters
+          returnType: {kind: 'Object', shapeId: BuiltInUseRefId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+        }),
+      ],
+    ]),
+  ],
+  [
+    '_jsx',
+    addFunction(DEFAULT_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
+);
+
+export type Global = BuiltInType | PolyType;
+export type GlobalRegistry = Map<string, Global>;
+export const DEFAULT_GLOBALS: GlobalRegistry = new Map(REACT_APIS);
+
+// Hack until we add ObjectShapes for all globals
+for (const name of UNTYPED_GLOBALS) {
+  DEFAULT_GLOBALS.set(name, {
+    kind: 'Poly',
+  });
+}
+
+for (const [name, type_] of TYPED_GLOBALS) {
+  DEFAULT_GLOBALS.set(name, type_);
+}
+
+// Recursive global types
+DEFAULT_GLOBALS.set(
+  'globalThis',
+  addObject(DEFAULT_SHAPES, 'globalThis', TYPED_GLOBALS),
+);
+DEFAULT_GLOBALS.set(
+  'global',
+  addObject(DEFAULT_SHAPES, 'global', TYPED_GLOBALS),
+);
+
+export function installTypeConfig(
+  globals: GlobalRegistry,
+  shapes: ShapeRegistry,
+  typeConfig: TypeConfig,
+  moduleName: string,
+  loc: SourceLocation,
+): Global {
+  switch (typeConfig.kind) {
+    case 'type': {
+      switch (typeConfig.name) {
+        case 'Array': {
+          return {kind: 'Object', shapeId: BuiltInArrayId};
+        }
+        case 'MixedReadonly': {
+          return {kind: 'Object', shapeId: BuiltInMixedReadonlyId};
+        }
+        case 'Primitive': {
+          return {kind: 'Primitive'};
+        }
+        case 'Ref': {
+          return {kind: 'Object', shapeId: BuiltInUseRefId};
+        }
+        case 'Any': {
+          return {kind: 'Poly'};
+        }
+        default: {
+          assertExhaustive(
+            typeConfig.name,
+            `Unexpected type '${(typeConfig as any).name}'`,
+          );
+        }
+      }
+    }
+    case 'function': {
+      return addFunction(shapes, [], {
+        positionalParams: typeConfig.positionalParams,
+        restParam: typeConfig.restParam,
+        calleeEffect: typeConfig.calleeEffect,
+        returnType: installTypeConfig(
+          globals,
+          shapes,
+          typeConfig.returnType,
+          moduleName,
+          loc,
+        ),
+        returnValueKind: typeConfig.returnValueKind,
+        noAlias: typeConfig.noAlias === true,
+        mutableOnlyIfOperandsAreMutable:
+          typeConfig.mutableOnlyIfOperandsAreMutable === true,
+        aliasing: typeConfig.aliasing,
+        knownIncompatible: typeConfig.knownIncompatible ?? null,
+      });
+    }
+    case 'hook': {
+      return addHook(shapes, {
+        hookKind: 'Custom',
+        positionalParams: typeConfig.positionalParams ?? [],
+        restParam: typeConfig.restParam ?? Effect.Freeze,
+        calleeEffect: Effect.Read,
+        returnType: installTypeConfig(
+          globals,
+          shapes,
+          typeConfig.returnType,
+          moduleName,
+          loc,
+        ),
+        returnValueKind: typeConfig.returnValueKind ?? ValueKind.Frozen,
+        noAlias: typeConfig.noAlias === true,
+        aliasing: typeConfig.aliasing,
+        knownIncompatible: typeConfig.knownIncompatible ?? null,
+      });
+    }
+    case 'object': {
+      return addObject(
+        shapes,
+        null,
+        Object.entries(typeConfig.properties ?? {}).map(([key, value]) => {
+          const type = installTypeConfig(
+            globals,
+            shapes,
+            value,
+            moduleName,
+            loc,
+          );
+          const expectHook = isHookName(key);
+          let isHook = false;
+          if (type.kind === 'Function' && type.shapeId !== null) {
+            const functionType = shapes.get(type.shapeId);
+            if (functionType?.functionType?.hookKind !== null) {
+              isHook = true;
+            }
+          }
+          if (expectHook !== isHook) {
+            CompilerError.throwInvalidConfig({
+              reason: `Invalid type configuration for module`,
+              description: `Expected type for object property '${key}' from module '${moduleName}' ${expectHook ? 'to be a hook' : 'not to be a hook'} based on the property name`,
+              loc,
+            });
+          }
+          return [key, type];
+        }),
+      );
+    }
+    default: {
+      assertExhaustive(
+        typeConfig,
+        `Unexpected type kind '${(typeConfig as any).kind}'`,
+      );
+    }
+  }
+}
+
+export function getReanimatedModuleType(registry: ShapeRegistry): ObjectType {
+  // hooks that freeze args and return frozen value
+  const frozenHooks = [
+    'useFrameCallback',
+    'useAnimatedStyle',
+    'useAnimatedProps',
+    'useAnimatedScrollHandler',
+    'useAnimatedReaction',
+    'useWorkletCallback',
+  ];
+  const reanimatedType: Array<[string, BuiltInType]> = [];
+  for (const hook of frozenHooks) {
+    reanimatedType.push([
+      hook,
+      addHook(registry, {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {kind: 'Poly'},
+        returnValueKind: ValueKind.Frozen,
+        noAlias: true,
+        calleeEffect: Effect.Read,
+        hookKind: 'Custom',
+      }),
+    ]);
+  }
+
+  /**
+   * hooks that return a mutable value. ideally these should be modelled as a
+   * ref, but this works for now.
+   */
+  const mutableHooks = ['useSharedValue', 'useDerivedValue'];
+  for (const hook of mutableHooks) {
+    reanimatedType.push([
+      hook,
+      addHook(registry, {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {kind: 'Object', shapeId: ReanimatedSharedValueId},
+        returnValueKind: ValueKind.Mutable,
+        noAlias: true,
+        calleeEffect: Effect.Read,
+        hookKind: 'Custom',
+      }),
+    ]);
+  }
+
+  // functions that return mutable value
+  const funcs = [
+    'withTiming',
+    'withSpring',
+    'createAnimatedPropAdapter',
+    'withDecay',
+    'withRepeat',
+    'runOnUI',
+    'executeOnUIRuntimeSync',
+  ];
+  for (const fn of funcs) {
+    reanimatedType.push([
+      fn,
+      addFunction(registry, [], {
+        positionalParams: [],
+        restParam: Effect.Read,
+        returnType: {kind: 'Poly'},
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Mutable,
+        noAlias: true,
+      }),
+    ]);
+  }
+
+  return addObject(registry, null, reanimatedType);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
new file mode 100644
index 00000000000..ca9cd6945a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -0,0 +1,1999 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {BindingKind} from '@babel/traverse';
+import * as t from '@babel/types';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {assertExhaustive} from '../Utils/utils';
+import {Environment, ReactFunctionType} from './Environment';
+import type {HookKind} from './ObjectShape';
+import {Type, makeType} from './Types';
+import {z} from 'zod/v4';
+import type {AliasingEffect} from '../Inference/AliasingEffects';
+import {isReservedWord} from '../Utils/Keyword';
+import {Err, Ok, Result} from '../Utils/Result';
+
+/*
+ * *******************************************************************************************
+ * *******************************************************************************************
+ * ************************************* Core Data Model *************************************
+ * *******************************************************************************************
+ * *******************************************************************************************
+ */
+
+// AST -> (lowering) -> HIR -> (analysis) -> Reactive Scopes -> (codegen) -> AST
+
+/*
+ * A location in a source file, intended to be used for providing diagnostic information and
+ * transforming code while preserving source information (ie to emit source maps).
+ *
+ * `GeneratedSource` indicates that there is no single source location from which the code derives.
+ */
+export const GeneratedSource = Symbol();
+export type SourceLocation = t.SourceLocation | typeof GeneratedSource;
+
+/*
+ * A React function defines a computation that takes some set of reactive inputs
+ * (props, hook arguments) and return a result (JSX, hook return value). Unlike
+ * HIR, the data model is tree-shaped:
+ *
+ * ReactFunction
+ *    ReactiveBlock
+ *      ReactiveBlockScope*
+ *       Place* (dependencies)
+ *       (ReactiveInstruction | ReactiveTerminal)*
+ *
+ * Where ReactiveTerminal may recursively contain zero or more ReactiveBlocks.
+ *
+ * Each ReactiveBlockScope describes a set of dependencies as well as the instructions (and terminals)
+ * within that scope.
+ */
+export type ReactiveFunction = {
+  loc: SourceLocation;
+  id: ValidIdentifierName | null;
+  nameHint: string | null;
+  params: Array<Place | SpreadPattern>;
+  generator: boolean;
+  async: boolean;
+  body: ReactiveBlock;
+  env: Environment;
+  directives: Array<string>;
+};
+
+export type ReactiveScopeBlock = {
+  kind: 'scope';
+  scope: ReactiveScope;
+  instructions: ReactiveBlock;
+};
+
+export type PrunedReactiveScopeBlock = {
+  kind: 'pruned-scope';
+  scope: ReactiveScope;
+  instructions: ReactiveBlock;
+};
+
+export type ReactiveBlock = Array<ReactiveStatement>;
+
+export type ReactiveStatement =
+  | ReactiveInstructionStatement
+  | ReactiveTerminalStatement
+  | ReactiveScopeBlock
+  | PrunedReactiveScopeBlock;
+
+export type ReactiveInstructionStatement = {
+  kind: 'instruction';
+  instruction: ReactiveInstruction;
+};
+
+export type ReactiveTerminalStatement<
+  Tterminal extends ReactiveTerminal = ReactiveTerminal,
+> = {
+  kind: 'terminal';
+  terminal: Tterminal;
+  label: {
+    id: BlockId;
+    implicit: boolean;
+  } | null;
+};
+
+export type ReactiveInstruction = {
+  id: InstructionId;
+  lvalue: Place | null;
+  value: ReactiveValue;
+  effects?: Array<AliasingEffect> | null; // TODO make non-optional
+  loc: SourceLocation;
+};
+
+export type ReactiveValue =
+  | InstructionValue
+  | ReactiveLogicalValue
+  | ReactiveSequenceValue
+  | ReactiveTernaryValue
+  | ReactiveOptionalCallValue;
+
+export type ReactiveLogicalValue = {
+  kind: 'LogicalExpression';
+  operator: t.LogicalExpression['operator'];
+  left: ReactiveValue;
+  right: ReactiveValue;
+  loc: SourceLocation;
+};
+
+export type ReactiveTernaryValue = {
+  kind: 'ConditionalExpression';
+  test: ReactiveValue;
+  consequent: ReactiveValue;
+  alternate: ReactiveValue;
+  loc: SourceLocation;
+};
+
+export type ReactiveSequenceValue = {
+  kind: 'SequenceExpression';
+  instructions: Array<ReactiveInstruction>;
+  id: InstructionId;
+  value: ReactiveValue;
+  loc: SourceLocation;
+};
+
+export type ReactiveOptionalCallValue = {
+  kind: 'OptionalExpression';
+  id: InstructionId;
+  value: ReactiveValue;
+  optional: boolean;
+  loc: SourceLocation;
+};
+
+export type ReactiveTerminal =
+  | ReactiveBreakTerminal
+  | ReactiveContinueTerminal
+  | ReactiveReturnTerminal
+  | ReactiveThrowTerminal
+  | ReactiveSwitchTerminal
+  | ReactiveDoWhileTerminal
+  | ReactiveWhileTerminal
+  | ReactiveForTerminal
+  | ReactiveForOfTerminal
+  | ReactiveForInTerminal
+  | ReactiveIfTerminal
+  | ReactiveLabelTerminal
+  | ReactiveTryTerminal;
+
+function _staticInvariantReactiveTerminalHasLocation(
+  terminal: ReactiveTerminal,
+): SourceLocation {
+  // If this fails, it is because a variant of ReactiveTerminal is missing a .loc - add it!
+  return terminal.loc;
+}
+
+function _staticInvariantReactiveTerminalHasInstructionId(
+  terminal: ReactiveTerminal,
+): InstructionId {
+  // If this fails, it is because a variant of ReactiveTerminal is missing a .id - add it!
+  return terminal.id;
+}
+
+export type ReactiveTerminalTargetKind = 'implicit' | 'labeled' | 'unlabeled';
+export type ReactiveBreakTerminal = {
+  kind: 'break';
+  target: BlockId;
+  id: InstructionId;
+  targetKind: ReactiveTerminalTargetKind;
+  loc: SourceLocation;
+};
+export type ReactiveContinueTerminal = {
+  kind: 'continue';
+  target: BlockId;
+  id: InstructionId;
+  targetKind: ReactiveTerminalTargetKind;
+  loc: SourceLocation;
+};
+export type ReactiveReturnTerminal = {
+  kind: 'return';
+  value: Place;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveThrowTerminal = {
+  kind: 'throw';
+  value: Place;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveSwitchTerminal = {
+  kind: 'switch';
+  test: Place;
+  cases: Array<{
+    test: Place | null;
+    block: ReactiveBlock | void;
+  }>;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveDoWhileTerminal = {
+  kind: 'do-while';
+  loop: ReactiveBlock;
+  test: ReactiveValue;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveWhileTerminal = {
+  kind: 'while';
+  test: ReactiveValue;
+  loop: ReactiveBlock;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveForTerminal = {
+  kind: 'for';
+  init: ReactiveValue;
+  test: ReactiveValue;
+  update: ReactiveValue | null;
+  loop: ReactiveBlock;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveForOfTerminal = {
+  kind: 'for-of';
+  init: ReactiveValue;
+  test: ReactiveValue;
+  loop: ReactiveBlock;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveForInTerminal = {
+  kind: 'for-in';
+  init: ReactiveValue;
+  loop: ReactiveBlock;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveIfTerminal = {
+  kind: 'if';
+  test: Place;
+  consequent: ReactiveBlock;
+  alternate: ReactiveBlock | null;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveLabelTerminal = {
+  kind: 'label';
+  block: ReactiveBlock;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+export type ReactiveTryTerminal = {
+  kind: 'try';
+  block: ReactiveBlock;
+  handlerBinding: Place | null;
+  handler: ReactiveBlock;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+// A function lowered to HIR form, ie where its body is lowered to an HIR control-flow graph
+export type HIRFunction = {
+  loc: SourceLocation;
+  id: ValidIdentifierName | null;
+  nameHint: string | null;
+  fnType: ReactFunctionType;
+  env: Environment;
+  params: Array<Place | SpreadPattern>;
+  returnTypeAnnotation: t.FlowType | t.TSType | null;
+  returns: Place;
+  context: Array<Place>;
+  body: HIR;
+  generator: boolean;
+  async: boolean;
+  directives: Array<string>;
+  aliasingEffects: Array<AliasingEffect> | null;
+};
+
+/*
+ * Each reactive scope may have its own control-flow, so the instructions form
+ * a control-flow graph. The graph comprises a set of basic blocks which reference
+ * each other via terminal statements, as well as a reference to the entry block.
+ */
+export type HIR = {
+  entry: BlockId;
+
+  /*
+   * Basic blocks are stored as a map to aid certain operations that need to
+   * lookup blocks by their id. However, the order of the items in the map is
+   * reverse postorder, that is, barring cycles, predecessors appear before
+   * successors. This is designed to facilitate forward data flow analysis.
+   */
+  blocks: Map<BlockId, BasicBlock>;
+};
+
+/*
+ * Each basic block within an instruction graph contains zero or more instructions
+ * followed by a terminal node. Note that basic blocks always execute consecutively,
+ * there can be no branching within a block other than for an exception. Exceptions
+ * can occur pervasively and React runtime is responsible for resetting state when
+ * an exception occurs, therefore the block model only represents explicit throw
+ * statements and not implicit exceptions which may occur.
+ */
+export type BlockKind = 'block' | 'value' | 'loop' | 'sequence' | 'catch';
+
+/**
+ * Returns true for "block" and "catch" block kinds which correspond to statements
+ * in the source, including BlockStatement, CatchStatement.
+ *
+ * Inverse of isExpressionBlockKind()
+ */
+export function isStatementBlockKind(kind: BlockKind): boolean {
+  return kind === 'block' || kind === 'catch';
+}
+
+/**
+ * Returns true for "value", "loop", and "sequence" block kinds which correspond to
+ * expressions in the source, such as ConditionalExpression, LogicalExpression, loop
+ * initializer/test/updaters, etc
+ *
+ * Inverse of isStatementBlockKind()
+ */
+export function isExpressionBlockKind(kind: BlockKind): boolean {
+  return !isStatementBlockKind(kind);
+}
+
+export type BasicBlock = {
+  kind: BlockKind;
+  id: BlockId;
+  instructions: Array<Instruction>;
+  terminal: Terminal;
+  preds: Set<BlockId>;
+  phis: Set<Phi>;
+};
+export type TBasicBlock<T extends Terminal> = BasicBlock & {terminal: T};
+
+/*
+ * Terminal nodes generally represent statements that affect control flow, such as
+ * for-of, if-else, return, etc.
+ */
+export type Terminal =
+  | UnsupportedTerminal
+  | UnreachableTerminal
+  | ThrowTerminal
+  | ReturnTerminal
+  | GotoTerminal
+  | IfTerminal
+  | BranchTerminal
+  | SwitchTerminal
+  | ForTerminal
+  | ForOfTerminal
+  | ForInTerminal
+  | DoWhileTerminal
+  | WhileTerminal
+  | LogicalTerminal
+  | TernaryTerminal
+  | OptionalTerminal
+  | LabelTerminal
+  | SequenceTerminal
+  | MaybeThrowTerminal
+  | TryTerminal
+  | ReactiveScopeTerminal
+  | PrunedScopeTerminal;
+
+export type TerminalWithFallthrough = Terminal & {fallthrough: BlockId};
+
+function _staticInvariantTerminalHasLocation(
+  terminal: Terminal,
+): SourceLocation {
+  // If this fails, it is because a variant of Terminal is missing a .loc - add it!
+  return terminal.loc;
+}
+
+function _staticInvariantTerminalHasInstructionId(
+  terminal: Terminal,
+): InstructionId {
+  // If this fails, it is because a variant of Terminal is missing a .id - add it!
+  return terminal.id;
+}
+
+function _staticInvariantTerminalHasFallthrough(
+  terminal: Terminal,
+): BlockId | never | undefined {
+  // If this fails, it is because a variant of Terminal is missing a fallthrough annotation
+  return terminal.fallthrough;
+}
+
+/*
+ * Terminal nodes allowed for a value block
+ * A terminal that couldn't be lowered correctly.
+ */
+export type UnsupportedTerminal = {
+  kind: 'unsupported';
+  id: InstructionId;
+  loc: SourceLocation;
+  fallthrough?: never;
+};
+
+/**
+ * Terminal for an unreachable block.
+ * Unreachable blocks are emitted when all control flow paths of a if/switch/try block diverge
+ * before reaching the fallthrough.
+ */
+export type UnreachableTerminal = {
+  kind: 'unreachable';
+  id: InstructionId;
+  loc: SourceLocation;
+  fallthrough?: never;
+};
+
+export type ThrowTerminal = {
+  kind: 'throw';
+  value: Place;
+  id: InstructionId;
+  loc: SourceLocation;
+  fallthrough?: never;
+};
+export type Case = {test: Place | null; block: BlockId};
+
+export type ReturnVariant = 'Void' | 'Implicit' | 'Explicit';
+export type ReturnTerminal = {
+  kind: 'return';
+  /**
+   * Void:
+   *   () => { ... }
+   *   function() { ... }
+   * Implicit (ArrowFunctionExpression only):
+   *   () => foo
+   * Explicit:
+   *   () => { return ... }
+   *   function () { return ... }
+   */
+  returnVariant: ReturnVariant;
+  loc: SourceLocation;
+  value: Place;
+  id: InstructionId;
+  fallthrough?: never;
+  effects: Array<AliasingEffect> | null;
+};
+
+export type GotoTerminal = {
+  kind: 'goto';
+  block: BlockId;
+  variant: GotoVariant;
+  id: InstructionId;
+  loc: SourceLocation;
+  fallthrough?: never;
+};
+
+export enum GotoVariant {
+  Break = 'Break',
+  Continue = 'Continue',
+  Try = 'Try',
+}
+
+export type IfTerminal = {
+  kind: 'if';
+  test: Place;
+  consequent: BlockId;
+  alternate: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type BranchTerminal = {
+  kind: 'branch';
+  test: Place;
+  consequent: BlockId;
+  alternate: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+  fallthrough: BlockId;
+};
+
+export type SwitchTerminal = {
+  kind: 'switch';
+  test: Place;
+  cases: Array<Case>;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type DoWhileTerminal = {
+  kind: 'do-while';
+  loop: BlockId;
+  test: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type WhileTerminal = {
+  kind: 'while';
+  loc: SourceLocation;
+  test: BlockId;
+  loop: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+};
+
+export type ForTerminal = {
+  kind: 'for';
+  loc: SourceLocation;
+  init: BlockId;
+  test: BlockId;
+  update: BlockId | null;
+  loop: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+};
+
+export type ForOfTerminal = {
+  kind: 'for-of';
+  loc: SourceLocation;
+  init: BlockId;
+  test: BlockId;
+  loop: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+};
+
+export type ForInTerminal = {
+  kind: 'for-in';
+  loc: SourceLocation;
+  init: BlockId;
+  loop: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+};
+
+export type LogicalTerminal = {
+  kind: 'logical';
+  operator: t.LogicalExpression['operator'];
+  test: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type TernaryTerminal = {
+  kind: 'ternary';
+  test: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type LabelTerminal = {
+  kind: 'label';
+  block: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type OptionalTerminal = {
+  kind: 'optional';
+  /*
+   * Specifies whether this node was optional. If false, it means that the original
+   * node was part of an optional chain but this specific item was non-optional.
+   * For example, in `a?.b.c?.()`, the `.b` access is non-optional but appears within
+   * an optional chain.
+   */
+  optional: boolean;
+  test: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type SequenceTerminal = {
+  kind: 'sequence';
+  block: BlockId;
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type TryTerminal = {
+  kind: 'try';
+  block: BlockId;
+  handlerBinding: Place | null;
+  handler: BlockId;
+  // TODO: support `finally`
+  fallthrough: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type MaybeThrowTerminal = {
+  kind: 'maybe-throw';
+  continuation: BlockId;
+  handler: BlockId;
+  id: InstructionId;
+  loc: SourceLocation;
+  fallthrough?: never;
+  effects: Array<AliasingEffect> | null;
+};
+
+export type ReactiveScopeTerminal = {
+  kind: 'scope';
+  fallthrough: BlockId;
+  block: BlockId;
+  scope: ReactiveScope;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+export type PrunedScopeTerminal = {
+  kind: 'pruned-scope';
+  fallthrough: BlockId;
+  block: BlockId;
+  scope: ReactiveScope;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+
+/*
+ * Instructions generally represent expressions but with all nesting flattened away,
+ * such that all operands to each instruction are either primitive values OR are
+ * references to a place, which may be a temporary that holds the results of a
+ * previous instruction. So `foo(bar(a))` would decompose into two instructions,
+ * one to store `tmp0 = bar(a)`, one for `foo(tmp0)`.
+ *
+ * Instructions generally store their value into a Place, though some instructions
+ * may not produce a value that is necessary to track (for example, class definitions)
+ * or may occur only for side-effects (many expression statements).
+ */
+export type Instruction = {
+  id: InstructionId;
+  lvalue: Place;
+  value: InstructionValue;
+  loc: SourceLocation;
+  effects: Array<AliasingEffect> | null;
+};
+
+export type TInstruction<T extends InstructionValue> = {
+  id: InstructionId;
+  lvalue: Place;
+  value: T;
+  effects: Array<AliasingEffect> | null;
+  loc: SourceLocation;
+};
+
+export type LValue = {
+  place: Place;
+  kind: InstructionKind;
+};
+
+export type LValuePattern = {
+  pattern: Pattern;
+  kind: InstructionKind;
+};
+
+export type ArrayExpression = {
+  kind: 'ArrayExpression';
+  elements: Array<Place | SpreadPattern | Hole>;
+  loc: SourceLocation;
+};
+
+export type Pattern = ArrayPattern | ObjectPattern;
+
+export type Hole = {
+  kind: 'Hole';
+};
+
+export type SpreadPattern = {
+  kind: 'Spread';
+  place: Place;
+};
+
+export type ArrayPattern = {
+  kind: 'ArrayPattern';
+  items: Array<Place | SpreadPattern | Hole>;
+  loc: SourceLocation;
+};
+
+export type ObjectPattern = {
+  kind: 'ObjectPattern';
+  properties: Array<ObjectProperty | SpreadPattern>;
+  loc: SourceLocation;
+};
+
+export type ObjectPropertyKey =
+  | {
+      kind: 'string';
+      name: string;
+    }
+  | {
+      kind: 'identifier';
+      name: string;
+    }
+  | {
+      kind: 'computed';
+      name: Place;
+    }
+  | {
+      kind: 'number';
+      name: number;
+    };
+
+export type ObjectProperty = {
+  kind: 'ObjectProperty';
+  key: ObjectPropertyKey;
+  type: 'property' | 'method';
+  place: Place;
+};
+
+export type LoweredFunction = {
+  func: HIRFunction;
+};
+
+export type ObjectMethod = {
+  kind: 'ObjectMethod';
+  loc: SourceLocation;
+  loweredFunc: LoweredFunction;
+};
+
+export enum InstructionKind {
+  // const declaration
+  Const = 'Const',
+  // let declaration
+  Let = 'Let',
+  // assing a new value to a let binding
+  Reassign = 'Reassign',
+  // catch clause binding
+  Catch = 'Catch',
+
+  // hoisted const declarations
+  HoistedConst = 'HoistedConst',
+
+  // hoisted const declarations
+  HoistedLet = 'HoistedLet',
+
+  HoistedFunction = 'HoistedFunction',
+  Function = 'Function',
+}
+
+export function convertHoistedLValueKind(
+  kind: InstructionKind,
+): InstructionKind | null {
+  switch (kind) {
+    case InstructionKind.HoistedLet:
+      return InstructionKind.Let;
+    case InstructionKind.HoistedConst:
+      return InstructionKind.Const;
+    case InstructionKind.HoistedFunction:
+      return InstructionKind.Function;
+    case InstructionKind.Let:
+    case InstructionKind.Const:
+    case InstructionKind.Function:
+    case InstructionKind.Reassign:
+    case InstructionKind.Catch:
+      return null;
+    default:
+      assertExhaustive(kind, 'Unexpected lvalue kind');
+  }
+}
+
+function _staticInvariantInstructionValueHasLocation(
+  value: InstructionValue,
+): SourceLocation {
+  // If this fails, it is because a variant of InstructionValue is missing a .loc - add it!
+  return value.loc;
+}
+
+export type Phi = {
+  kind: 'Phi';
+  place: Place;
+  operands: Map<BlockId, Place>;
+};
+
+/**
+ * Valid ManualMemoDependencies are always of the form
+ * `sourceDeclaredVariable.a.b?.c`, since this is documented
+ * and enforced by the `react-hooks/exhaustive-deps` rule.
+ *
+ * `root` must either reference a ValidatedIdentifier or a global
+ * variable.
+ */
+export type ManualMemoDependency = {
+  root:
+    | {
+        kind: 'NamedLocal';
+        value: Place;
+        constant: boolean;
+      }
+    | {kind: 'Global'; identifierName: string};
+  path: DependencyPath;
+  loc: SourceLocation;
+};
+
+export type StartMemoize = {
+  kind: 'StartMemoize';
+  // Start/FinishMemoize markers should have matching ids
+  manualMemoId: number;
+  /**
+   * deps-list from source code, or null if one was not provided
+   * (e.g. useMemo without a second arg)
+   */
+  deps: Array<ManualMemoDependency> | null;
+  /**
+   * The source location of the dependencies argument. Used for
+   * emitting diagnostics with a suggested replacement
+   */
+  depsLoc: SourceLocation | null;
+  loc: SourceLocation;
+};
+export type FinishMemoize = {
+  kind: 'FinishMemoize';
+  // Start/FinishMemoize markers should have matching ids
+  manualMemoId: number;
+  decl: Place;
+  pruned?: true;
+  loc: SourceLocation;
+};
+
+/*
+ * Forget currently does not handle MethodCall correctly in
+ * all cases. Specifically, we do not bind the receiver and method property
+ * before calling to args. Until we add a SequenceExpression to inline all
+ * instructions generated when lowering args, we have a limited representation
+ * with some constraints.
+ *
+ * Forget currently makes these assumptions (checked in codegen):
+ *   - {@link MethodCall.property} is a temporary produced by a PropertyLoad or ComputedLoad
+ *     on {@link MethodCall.receiver}
+ *   - {@link MethodCall.property} remains an rval (i.e. never promoted to a
+ *     named identifier). We currently rely on this for codegen.
+ *
+ * Type inference does not currently guarantee that {@link MethodCall.property}
+ * is a FunctionType.
+ */
+export type MethodCall = {
+  kind: 'MethodCall';
+  receiver: Place;
+  property: Place;
+  args: Array<Place | SpreadPattern>;
+  loc: SourceLocation;
+};
+
+export type CallExpression = {
+  kind: 'CallExpression';
+  callee: Place;
+  args: Array<Place | SpreadPattern>;
+  loc: SourceLocation;
+  typeArguments?: Array<t.FlowType>;
+};
+
+export type NewExpression = {
+  kind: 'NewExpression';
+  callee: Place;
+  args: Array<Place | SpreadPattern>;
+  loc: SourceLocation;
+};
+
+export type LoadLocal = {
+  kind: 'LoadLocal';
+  place: Place;
+  loc: SourceLocation;
+};
+export type LoadContext = {
+  kind: 'LoadContext';
+  place: Place;
+  loc: SourceLocation;
+};
+
+/*
+ * The value of a given instruction. Note that values are not recursive: complex
+ * values such as objects or arrays are always defined by instructions to define
+ * their operands (saving to a temporary), then passing those temporaries as
+ * the operands to the final instruction (ObjectExpression, ArrayExpression, etc).
+ *
+ * Operands are therefore always a Place.
+ */
+
+export type InstructionValue =
+  | LoadLocal
+  | LoadContext
+  | {
+      kind: 'DeclareLocal';
+      lvalue: LValue;
+      type: t.FlowType | t.TSType | null;
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'DeclareContext';
+      lvalue: {
+        kind:
+          | InstructionKind.Let
+          | InstructionKind.HoistedConst
+          | InstructionKind.HoistedLet
+          | InstructionKind.HoistedFunction;
+        place: Place;
+      };
+      loc: SourceLocation;
+    }
+  | StoreLocal
+  | {
+      kind: 'StoreContext';
+      /**
+       * StoreContext kinds:
+       * Reassign: context variable reassignment in source
+       * Const:    const declaration + assignment in source
+       *           ('const' context vars are ones whose declarations are hoisted)
+       * Let:      let declaration + assignment in source
+       * Function: function declaration in source (similar to `const`)
+       */
+      lvalue: {
+        kind:
+          | InstructionKind.Reassign
+          | InstructionKind.Const
+          | InstructionKind.Let
+          | InstructionKind.Function;
+        place: Place;
+      };
+      value: Place;
+      loc: SourceLocation;
+    }
+  | Destructure
+  | {
+      kind: 'Primitive';
+      value: number | boolean | string | null | undefined;
+      loc: SourceLocation;
+    }
+  | JSXText
+  | {
+      kind: 'BinaryExpression';
+      operator: Exclude<t.BinaryExpression['operator'], '|>'>;
+      left: Place;
+      right: Place;
+      loc: SourceLocation;
+    }
+  | NewExpression
+  | CallExpression
+  | MethodCall
+  | {
+      kind: 'UnaryExpression';
+      operator: Exclude<t.UnaryExpression['operator'], 'throw' | 'delete'>;
+      value: Place;
+      loc: SourceLocation;
+    }
+  | ({
+      kind: 'TypeCastExpression';
+      value: Place;
+      type: Type;
+      loc: SourceLocation;
+    } & (
+      | {
+          typeAnnotation: t.FlowType;
+          typeAnnotationKind: 'cast';
+        }
+      | {
+          typeAnnotation: t.TSType;
+          typeAnnotationKind: 'as' | 'satisfies';
+        }
+    ))
+  | JsxExpression
+  | {
+      kind: 'ObjectExpression';
+      properties: Array<ObjectProperty | SpreadPattern>;
+      loc: SourceLocation;
+    }
+  | ObjectMethod
+  | ArrayExpression
+  | {kind: 'JsxFragment'; children: Array<Place>; loc: SourceLocation}
+  | {
+      kind: 'RegExpLiteral';
+      pattern: string;
+      flags: string;
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'MetaProperty';
+      meta: string;
+      property: string;
+      loc: SourceLocation;
+    }
+
+  // store `object.property = value`
+  | {
+      kind: 'PropertyStore';
+      object: Place;
+      property: PropertyLiteral;
+      value: Place;
+      loc: SourceLocation;
+    }
+  // load `object.property`
+  | PropertyLoad
+  // `delete object.property`
+  | {
+      kind: 'PropertyDelete';
+      object: Place;
+      property: PropertyLiteral;
+      loc: SourceLocation;
+    }
+
+  // store `object[index] = value` - like PropertyStore but with a dynamic property
+  | {
+      kind: 'ComputedStore';
+      object: Place;
+      property: Place;
+      value: Place;
+      loc: SourceLocation;
+    }
+  // load `object[index]` - like PropertyLoad but with a dynamic property
+  | {
+      kind: 'ComputedLoad';
+      object: Place;
+      property: Place;
+      loc: SourceLocation;
+    }
+  // `delete object[property]`
+  | {
+      kind: 'ComputedDelete';
+      object: Place;
+      property: Place;
+      loc: SourceLocation;
+    }
+  | LoadGlobal
+  | StoreGlobal
+  | FunctionExpression
+  | {
+      kind: 'TaggedTemplateExpression';
+      tag: Place;
+      value: {raw: string; cooked?: string};
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'TemplateLiteral';
+      subexprs: Array<Place>;
+      quasis: Array<{raw: string; cooked?: string}>;
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'Await';
+      value: Place;
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'GetIterator';
+      collection: Place; // the collection
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'IteratorNext';
+      iterator: Place; // the iterator created with GetIterator
+      collection: Place; // the collection being iterated over (which may be an iterable or iterator)
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'NextPropertyOf';
+      value: Place; // the collection
+      loc: SourceLocation;
+    }
+  /*
+   * Models a prefix update expression such as --x or ++y
+   * This instructions increments or decrements the <lvalue>
+   * but evaluates to the value of <value> prior to the update.
+   */
+  | {
+      kind: 'PrefixUpdate';
+      lvalue: Place;
+      operation: t.UpdateExpression['operator'];
+      value: Place;
+      loc: SourceLocation;
+    }
+  /*
+   * Models a postfix update expression such as x-- or y++
+   * This instructions increments or decrements the <lvalue>
+   * and evaluates to the value after the update
+   */
+  | {
+      kind: 'PostfixUpdate';
+      lvalue: Place;
+      operation: t.UpdateExpression['operator'];
+      value: Place;
+      loc: SourceLocation;
+    }
+  // `debugger` statement
+  | {kind: 'Debugger'; loc: SourceLocation}
+  /*
+   * Represents semantic information from useMemo/useCallback that the developer
+   * has indicated a particular value should be memoized. This value is ignored
+   * unless the TODO flag is enabled.
+   *
+   * NOTE: the Memoize instruction is intended for side-effects only, and is pruned
+   * during codegen. It can't be pruned during DCE because we need to preserve the
+   * instruction so it can be visible in InferReferenceEffects.
+   */
+  | StartMemoize
+  | FinishMemoize
+  /*
+   * Catch-all for statements such as type imports, nested class declarations, etc
+   * which are not directly represented, but included for completeness and to allow
+   * passing through in codegen.
+   */
+  | {
+      kind: 'UnsupportedNode';
+      node: t.Node;
+      loc: SourceLocation;
+    };
+
+export type JsxExpression = {
+  kind: 'JsxExpression';
+  tag: Place | BuiltinTag;
+  props: Array<JsxAttribute>;
+  children: Array<Place> | null; // null === no children
+  loc: SourceLocation;
+  openingLoc: SourceLocation;
+  closingLoc: SourceLocation;
+};
+
+export type JsxAttribute =
+  | {kind: 'JsxSpreadAttribute'; argument: Place}
+  | {kind: 'JsxAttribute'; name: string; place: Place};
+
+export type FunctionExpression = {
+  kind: 'FunctionExpression';
+  name: ValidIdentifierName | null;
+  nameHint: string | null;
+  loweredFunc: LoweredFunction;
+  type:
+    | 'ArrowFunctionExpression'
+    | 'FunctionExpression'
+    | 'FunctionDeclaration';
+  loc: SourceLocation;
+};
+
+export type Destructure = {
+  kind: 'Destructure';
+  lvalue: LValuePattern;
+  value: Place;
+  loc: SourceLocation;
+};
+
+/*
+ * A place where data may be read from / written to:
+ * - a variable (identifier)
+ * - a path into an identifier
+ */
+export type Place = {
+  kind: 'Identifier';
+  identifier: Identifier;
+  effect: Effect;
+  reactive: boolean;
+  loc: SourceLocation;
+};
+
+// A primitive value with a specific (constant) value.
+export type Primitive = {
+  kind: 'Primitive';
+  value: number | boolean | string | null | undefined;
+  loc: SourceLocation;
+};
+
+export type JSXText = {kind: 'JSXText'; value: string; loc: SourceLocation};
+
+export type StoreLocal = {
+  kind: 'StoreLocal';
+  lvalue: LValue;
+  value: Place;
+  type: t.FlowType | t.TSType | null;
+  loc: SourceLocation;
+};
+export type PropertyLoad = {
+  kind: 'PropertyLoad';
+  object: Place;
+  property: PropertyLiteral;
+  loc: SourceLocation;
+};
+
+export type LoadGlobal = {
+  kind: 'LoadGlobal';
+  binding: NonLocalBinding;
+  loc: SourceLocation;
+};
+
+export type StoreGlobal = {
+  kind: 'StoreGlobal';
+  name: string;
+  value: Place;
+  loc: SourceLocation;
+};
+
+export type BuiltinTag = {
+  kind: 'BuiltinTag';
+  name: string;
+  loc: SourceLocation;
+};
+
+/*
+ * Range in which an identifier is mutable. Start and End refer to Instruction.id.
+ *
+ * Start is inclusive, End is exclusive (ie, end is the "first" instruction for which
+ * the value is not mutable).
+ */
+export type MutableRange = {
+  start: InstructionId;
+  end: InstructionId;
+};
+
+export type VariableBinding =
+  // let, const, etc declared within the current component/hook
+  | {kind: 'Identifier'; identifier: Identifier; bindingKind: BindingKind}
+  // bindings declard outside the current component/hook
+  | NonLocalBinding;
+
+// `import {bar as baz} from 'foo'`: name=baz, module=foo, imported=bar
+export type NonLocalImportSpecifier = {
+  kind: 'ImportSpecifier';
+  name: string;
+  module: string;
+  imported: string;
+};
+
+export type NonLocalBinding =
+  // `import Foo from 'foo'`: name=Foo, module=foo
+  | {kind: 'ImportDefault'; name: string; module: string}
+  // `import * as Foo from 'foo'`: name=Foo, module=foo
+  | {kind: 'ImportNamespace'; name: string; module: string}
+  // `import {bar as baz} from 'foo'`
+  | NonLocalImportSpecifier
+  // let, const, function, etc declared in the module but outside the current component/hook
+  | {kind: 'ModuleLocal'; name: string}
+  // an unresolved binding
+  | {kind: 'Global'; name: string};
+
+// Represents a user-defined variable (has a name) or a temporary variable (no name).
+export type Identifier = {
+  /**
+   * After EnterSSA, `id` uniquely identifies an SSA instance of a variable.
+   * Before EnterSSA, `id` matches `declarationId`.
+   */
+  id: IdentifierId;
+
+  /**
+   * Uniquely identifies a given variable in the original program. If a value is
+   * reassigned in the original program each reassigned value will have a distinct
+   * `id` (after EnterSSA), but they will still have the same `declarationId`.
+   */
+  declarationId: DeclarationId;
+
+  // null for temporaries. name is primarily used for debugging.
+  name: IdentifierName | null;
+  // The range for which this variable is mutable
+  mutableRange: MutableRange;
+  /*
+   * The ID of the reactive scope which will compute this value. Multiple
+   * variables may have the same scope id.
+   */
+  scope: ReactiveScope | null;
+  type: Type;
+  loc: SourceLocation;
+};
+
+export type IdentifierName = ValidatedIdentifier | PromotedIdentifier;
+export type ValidatedIdentifier = {kind: 'named'; value: ValidIdentifierName};
+export type PromotedIdentifier = {kind: 'promoted'; value: string};
+
+/**
+ * Simulated opaque type for identifier names to ensure values can only be created
+ * through the below helpers.
+ */
+const opaqueValidIdentifierName = Symbol();
+export type ValidIdentifierName = string & {
+  [opaqueValidIdentifierName]: 'ValidIdentifierName';
+};
+
+export function makeTemporaryIdentifier(
+  id: IdentifierId,
+  loc: SourceLocation,
+): Identifier {
+  return {
+    id,
+    name: null,
+    declarationId: makeDeclarationId(id),
+    mutableRange: {start: makeInstructionId(0), end: makeInstructionId(0)},
+    scope: null,
+    type: makeType(),
+    loc,
+  };
+}
+
+export function forkTemporaryIdentifier(
+  id: IdentifierId,
+  source: Identifier,
+): Identifier {
+  return {
+    ...source,
+    mutableRange: {start: makeInstructionId(0), end: makeInstructionId(0)},
+    id,
+  };
+}
+
+export function validateIdentifierName(
+  name: string,
+): Result<ValidatedIdentifier, CompilerError> {
+  if (isReservedWord(name)) {
+    const error = new CompilerError();
+    error.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Syntax,
+        reason: 'Expected a non-reserved identifier name',
+        description: `\`${name}\` is a reserved word in JavaScript and cannot be used as an identifier name`,
+        suggestions: null,
+      }).withDetails({
+        kind: 'error',
+        loc: GeneratedSource,
+        message: 'reserved word',
+      }),
+    );
+    return Err(error);
+  } else if (!t.isValidIdentifier(name)) {
+    const error = new CompilerError();
+    error.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Syntax,
+        reason: `Expected a valid identifier name`,
+        description: `\`${name}\` is not a valid JavaScript identifier`,
+        suggestions: null,
+      }).withDetails({
+        kind: 'error',
+        loc: GeneratedSource,
+        message: 'reserved word',
+      }),
+    );
+  }
+  return Ok({
+    kind: 'named',
+    value: name as ValidIdentifierName,
+  });
+}
+
+/**
+ * Creates a valid identifier name. This should *not* be used for synthesizing
+ * identifier names: only call this method for identifier names that appear in the
+ * original source code.
+ */
+export function makeIdentifierName(name: string): ValidatedIdentifier {
+  return validateIdentifierName(name).unwrap();
+}
+
+/**
+ * Given an unnamed identifier, promote it to a named identifier.
+ *
+ * Note: this uses the identifier's DeclarationId to ensure that all
+ * instances of the same declaration will have the same name.
+ */
+export function promoteTemporary(identifier: Identifier): void {
+  CompilerError.invariant(identifier.name === null, {
+    reason: `Expected a temporary (unnamed) identifier`,
+    description: `Identifier already has a name, \`${identifier.name}\``,
+    loc: GeneratedSource,
+  });
+  identifier.name = {
+    kind: 'promoted',
+    value: `#t${identifier.declarationId}`,
+  };
+}
+
+export function isPromotedTemporary(name: string): boolean {
+  return name.startsWith('#t');
+}
+
+/**
+ * Given an unnamed identifier, promote it to a named identifier, distinguishing
+ * it as a value that needs to be capitalized since it appears in JSX element tag position
+ *
+ * Note: this uses the identifier's DeclarationId to ensure that all
+ * instances of the same declaration will have the same name.
+ */
+export function promoteTemporaryJsxTag(identifier: Identifier): void {
+  CompilerError.invariant(identifier.name === null, {
+    reason: `Expected a temporary (unnamed) identifier`,
+    description: `Identifier already has a name, \`${identifier.name}\``,
+    loc: GeneratedSource,
+  });
+  identifier.name = {
+    kind: 'promoted',
+    value: `#T${identifier.declarationId}`,
+  };
+}
+
+export function isPromotedJsxTemporary(name: string): boolean {
+  return name.startsWith('#T');
+}
+
+export type AbstractValue = {
+  kind: ValueKind;
+  reason: ReadonlySet<ValueReason>;
+  context: ReadonlySet<Place>;
+};
+
+/**
+ * The reason for the kind of a value.
+ */
+export enum ValueReason {
+  /**
+   * Defined outside the React function.
+   */
+  Global = 'global',
+
+  /**
+   * Used in a JSX expression.
+   */
+  JsxCaptured = 'jsx-captured',
+
+  /**
+   * Argument to a hook
+   */
+  HookCaptured = 'hook-captured',
+
+  /**
+   * Return value of a hook
+   */
+  HookReturn = 'hook-return',
+
+  /**
+   * Passed to an effect
+   */
+  Effect = 'effect',
+
+  /**
+   * Return value of a function with known frozen return value, e.g. `useState`.
+   */
+  KnownReturnSignature = 'known-return-signature',
+
+  /**
+   * A value returned from `useContext`
+   */
+  Context = 'context',
+
+  /**
+   * A value returned from `useState`
+   */
+  State = 'state',
+
+  /**
+   * A value returned from `useReducer`
+   */
+  ReducerState = 'reducer-state',
+
+  /**
+   * Props of a component or arguments of a hook.
+   */
+  ReactiveFunctionArgument = 'reactive-function-argument',
+
+  Other = 'other',
+}
+
+/*
+ * Distinguish between different kinds of values relevant to inference purposes:
+ * see the main docblock for the module for details.
+ */
+export enum ValueKind {
+  MaybeFrozen = 'maybefrozen',
+  Frozen = 'frozen',
+  Primitive = 'primitive',
+  Global = 'global',
+  Mutable = 'mutable',
+  Context = 'context',
+}
+
+export const ValueKindSchema = z.enum([
+  ValueKind.MaybeFrozen,
+  ValueKind.Frozen,
+  ValueKind.Primitive,
+  ValueKind.Global,
+  ValueKind.Mutable,
+  ValueKind.Context,
+]);
+
+export const ValueReasonSchema = z.enum([
+  ValueReason.Context,
+  ValueReason.Effect,
+  ValueReason.Global,
+  ValueReason.HookCaptured,
+  ValueReason.HookReturn,
+  ValueReason.JsxCaptured,
+  ValueReason.KnownReturnSignature,
+  ValueReason.Other,
+  ValueReason.ReactiveFunctionArgument,
+  ValueReason.ReducerState,
+  ValueReason.State,
+]);
+
+// The effect with which a value is modified.
+export enum Effect {
+  // Default value: not allowed after lifetime inference
+  Unknown = '<unknown>',
+  // This reference freezes the value (corresponds to a place where codegen should emit a freeze instruction)
+  Freeze = 'freeze',
+  // This reference reads the value
+  Read = 'read',
+  // This reference reads and stores the value
+  Capture = 'capture',
+  ConditionallyMutateIterator = 'mutate-iterator?',
+  /*
+   * This reference *may* write to (mutate) the value. This covers two similar cases:
+   * - The compiler is being conservative and assuming that a value *may* be mutated
+   * - The effect is polymorphic: mutable values may be mutated, non-mutable values
+   *   will not be mutated.
+   * In both cases, we conservatively assume that mutable values will be mutated.
+   * But we do not error if the value is known to be immutable.
+   */
+  ConditionallyMutate = 'mutate?',
+
+  /*
+   * This reference *does* write to (mutate) the value. It is an error (invalid input)
+   * if an immutable value flows into a location with this effect.
+   */
+  Mutate = 'mutate',
+  // This reference may alias to (mutate) the value
+  Store = 'store',
+}
+export const EffectSchema = z.enum([
+  Effect.Read,
+  Effect.Mutate,
+  Effect.ConditionallyMutate,
+  Effect.ConditionallyMutateIterator,
+  Effect.Capture,
+  Effect.Store,
+  Effect.Freeze,
+]);
+
+export function isMutableEffect(
+  effect: Effect,
+  location: SourceLocation,
+): boolean {
+  switch (effect) {
+    case Effect.Capture:
+    case Effect.Store:
+    case Effect.ConditionallyMutate:
+    case Effect.ConditionallyMutateIterator:
+    case Effect.Mutate: {
+      return true;
+    }
+
+    case Effect.Unknown: {
+      CompilerError.invariant(false, {
+        reason: 'Unexpected unknown effect',
+        loc: location,
+      });
+    }
+    case Effect.Read:
+    case Effect.Freeze: {
+      return false;
+    }
+    default: {
+      assertExhaustive(effect, `Unexpected effect \`${effect}\``);
+    }
+  }
+}
+
+export type ReactiveScope = {
+  id: ScopeId;
+  range: MutableRange;
+
+  /**
+   * The inputs to this reactive scope
+   */
+  dependencies: ReactiveScopeDependencies;
+
+  /**
+   * The set of values produced by this scope. This may be empty
+   * for scopes that produce reassignments only.
+   */
+  declarations: Map<IdentifierId, ReactiveScopeDeclaration>;
+
+  /**
+   * A mutable range may sometimes include a reassignment of some variable.
+   * This is the set of identifiers which are reassigned by this scope.
+   */
+  reassignments: Set<Identifier>;
+
+  /**
+   * Reactive scopes may contain a return statement, which needs to be replayed
+   * whenever the inputs to the scope have not changed since the previous execution.
+   * If the reactive scope has an early return, this variable stores the temporary
+   * identifier to which the return value will be assigned. See PropagateEarlyReturns
+   * for more about how early returns in reactive scopes are compiled and represented.
+   *
+   * This value is null for scopes that do not contain early returns.
+   */
+  earlyReturnValue: {
+    value: Identifier;
+    loc: SourceLocation;
+    label: BlockId;
+  } | null;
+
+  /*
+   * Some passes may merge scopes together. The merged set contains the
+   * ids of scopes that were merged into this one, for passes that need
+   * to track which scopes are still present (in some form) vs scopes that
+   * no longer exist due to being pruned.
+   */
+  merged: Set<ScopeId>;
+
+  loc: SourceLocation;
+};
+
+export type ReactiveScopeDependencies = Set<ReactiveScopeDependency>;
+
+export type ReactiveScopeDeclaration = {
+  identifier: Identifier;
+  scope: ReactiveScope; // the scope in which the variable was originally declared
+};
+
+const opaquePropertyLiteral = Symbol();
+export type PropertyLiteral = (string | number) & {
+  [opaquePropertyLiteral]: 'PropertyLiteral';
+};
+export function makePropertyLiteral(value: string | number): PropertyLiteral {
+  return value as PropertyLiteral;
+}
+export type DependencyPathEntry = {
+  property: PropertyLiteral;
+  optional: boolean;
+};
+export type DependencyPath = Array<DependencyPathEntry>;
+export type ReactiveScopeDependency = {
+  identifier: Identifier;
+  /**
+   * Reflects whether the base identifier is reactive. Note that some reactive
+   * objects may have non-reactive properties, but we do not currently track
+   * this.
+   *
+   * ```js
+   * // Technically, result[0] is reactive and result[1] is not.
+   * // Currently, both dependencies would be marked as reactive.
+   * const result = useState();
+   * ```
+   */
+  reactive: boolean;
+  path: DependencyPath;
+};
+
+export function areEqualPaths(a: DependencyPath, b: DependencyPath): boolean {
+  return (
+    a.length === b.length &&
+    a.every(
+      (item, ix) =>
+        item.property === b[ix].property && item.optional === b[ix].optional,
+    )
+  );
+}
+export function isSubPath(
+  subpath: DependencyPath,
+  path: DependencyPath,
+): boolean {
+  return (
+    subpath.length <= path.length &&
+    subpath.every(
+      (item, ix) =>
+        item.property === path[ix].property &&
+        item.optional === path[ix].optional,
+    )
+  );
+}
+export function isSubPathIgnoringOptionals(
+  subpath: DependencyPath,
+  path: DependencyPath,
+): boolean {
+  return (
+    subpath.length <= path.length &&
+    subpath.every((item, ix) => item.property === path[ix].property)
+  );
+}
+
+export function getPlaceScope(
+  id: InstructionId,
+  place: Place,
+): ReactiveScope | null {
+  const scope = place.identifier.scope;
+  if (scope !== null && isScopeActive(scope, id)) {
+    return scope;
+  }
+  return null;
+}
+
+function isScopeActive(scope: ReactiveScope, id: InstructionId): boolean {
+  return id >= scope.range.start && id < scope.range.end;
+}
+
+/*
+ * Simulated opaque type for BlockIds to prevent using normal numbers as block ids
+ * accidentally.
+ */
+const opaqueBlockId = Symbol();
+export type BlockId = number & {[opaqueBlockId]: 'BlockId'};
+
+export function makeBlockId(id: number): BlockId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected block id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as BlockId;
+}
+
+/*
+ * Simulated opaque type for ScopeIds to prevent using normal numbers as scope ids
+ * accidentally.
+ */
+const opaqueScopeId = Symbol();
+export type ScopeId = number & {[opaqueScopeId]: 'ScopeId'};
+
+export function makeScopeId(id: number): ScopeId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected block id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as ScopeId;
+}
+
+/*
+ * Simulated opaque type for IdentifierId to prevent using normal numbers as ids
+ * accidentally.
+ */
+const opaqueIdentifierId = Symbol();
+export type IdentifierId = number & {[opaqueIdentifierId]: 'IdentifierId'};
+
+export function makeIdentifierId(id: number): IdentifierId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected identifier id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as IdentifierId;
+}
+
+/*
+ * Simulated opaque type for IdentifierId to prevent using normal numbers as ids
+ * accidentally.
+ */
+const opageDeclarationId = Symbol();
+export type DeclarationId = number & {[opageDeclarationId]: 'DeclarationId'};
+
+export function makeDeclarationId(id: number): DeclarationId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected declaration id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as DeclarationId;
+}
+
+/*
+ * Simulated opaque type for InstructionId to prevent using normal numbers as ids
+ * accidentally.
+ */
+const opaqueInstructionId = Symbol();
+export type InstructionId = number & {[opaqueInstructionId]: 'IdentifierId'};
+
+export function makeInstructionId(id: number): InstructionId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected instruction id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as InstructionId;
+}
+
+export function isObjectMethodType(id: Identifier): boolean {
+  return id.type.kind == 'ObjectMethod';
+}
+
+export function isObjectType(id: Identifier): boolean {
+  return id.type.kind === 'Object';
+}
+
+export function isPrimitiveType(id: Identifier): boolean {
+  return id.type.kind === 'Primitive';
+}
+
+export function isPlainObjectType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInObject';
+}
+
+export function isArrayType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInArray';
+}
+
+export function isMapType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInMap';
+}
+
+export function isSetType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInSet';
+}
+
+export function isPropsType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInProps';
+}
+
+export function isRefValueType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInRefValue';
+}
+
+export function isUseRefType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseRefId';
+}
+
+export function isUseStateType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseState';
+}
+
+export function isJsxType(type: Type): boolean {
+  return type.kind === 'Object' && type.shapeId === 'BuiltInJsx';
+}
+
+export function isRefOrRefValue(id: Identifier): boolean {
+  return isUseRefType(id) || isRefValueType(id);
+}
+
+/*
+ * Returns true if the type is a Ref or a custom user type that acts like a ref when it
+ * shouldn't. For now the only other case of this is Reanimated's shared values.
+ */
+export function isRefOrRefLikeMutableType(type: Type): boolean {
+  return (
+    type.kind === 'Object' &&
+    (type.shapeId === 'BuiltInUseRefId' ||
+      type.shapeId == 'ReanimatedSharedValueId')
+  );
+}
+
+export function isSetStateType(id: Identifier): boolean {
+  return id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetState';
+}
+
+export function isUseActionStateType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseActionState'
+  );
+}
+
+export function isStartTransitionType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInStartTransition'
+  );
+}
+
+export function isUseOptimisticType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseOptimistic'
+  );
+}
+
+export function isSetOptimisticType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetOptimistic'
+  );
+}
+
+export function isSetActionStateType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetActionState'
+  );
+}
+
+export function isUseReducerType(id: Identifier): boolean {
+  return id.type.kind === 'Function' && id.type.shapeId === 'BuiltInUseReducer';
+}
+
+export function isDispatcherType(id: Identifier): boolean {
+  return id.type.kind === 'Function' && id.type.shapeId === 'BuiltInDispatch';
+}
+
+export function isFireFunctionType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInFireFunction'
+  );
+}
+
+export function isEffectEventFunctionType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' &&
+    id.type.shapeId === 'BuiltInEffectEventFunction'
+  );
+}
+
+export function isStableType(id: Identifier): boolean {
+  return (
+    isSetStateType(id) ||
+    isSetActionStateType(id) ||
+    isDispatcherType(id) ||
+    isUseRefType(id) ||
+    isStartTransitionType(id) ||
+    isSetOptimisticType(id)
+  );
+}
+
+export function isStableTypeContainer(id: Identifier): boolean {
+  const type_ = id.type;
+  if (type_.kind !== 'Object') {
+    return false;
+  }
+  return (
+    isUseStateType(id) || // setState
+    isUseActionStateType(id) || // setActionState
+    isUseReducerType(id) || // dispatcher
+    isUseOptimisticType(id) || // setOptimistic
+    type_.shapeId === 'BuiltInUseTransition' // startTransition
+  );
+}
+
+export function evaluatesToStableTypeOrContainer(
+  env: Environment,
+  {value}: Instruction,
+): boolean {
+  if (value.kind === 'CallExpression' || value.kind === 'MethodCall') {
+    const callee =
+      value.kind === 'CallExpression' ? value.callee : value.property;
+
+    const calleeHookKind = getHookKind(env, callee.identifier);
+    switch (calleeHookKind) {
+      case 'useState':
+      case 'useReducer':
+      case 'useActionState':
+      case 'useRef':
+      case 'useTransition':
+      case 'useOptimistic':
+        return true;
+    }
+  }
+  return false;
+}
+
+export function isUseEffectHookType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInUseEffectHook'
+  );
+}
+export function isUseLayoutEffectHookType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' &&
+    id.type.shapeId === 'BuiltInUseLayoutEffectHook'
+  );
+}
+export function isUseInsertionEffectHookType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' &&
+    id.type.shapeId === 'BuiltInUseInsertionEffectHook'
+  );
+}
+export function isUseEffectEventType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInUseEffectEvent'
+  );
+}
+
+export function isUseContextHookType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInUseContextHook'
+  );
+}
+
+export function getHookKind(env: Environment, id: Identifier): HookKind | null {
+  return getHookKindForType(env, id.type);
+}
+
+export function isUseOperator(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInUseOperator'
+  );
+}
+
+export function getHookKindForType(
+  env: Environment,
+  type: Type,
+): HookKind | null {
+  if (type.kind === 'Function') {
+    const signature = env.getFunctionSignature(type);
+    return signature?.hookKind ?? null;
+  }
+  return null;
+}
+
+export * from './Types';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
new file mode 100644
index 00000000000..ab92904243c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
@@ -0,0 +1,950 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Binding, NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {CompilerError, ErrorCategory} from '../CompilerError';
+import {Environment} from './Environment';
+import {
+  BasicBlock,
+  BlockId,
+  BlockKind,
+  Effect,
+  GeneratedSource,
+  GotoVariant,
+  HIR,
+  Identifier,
+  IdentifierId,
+  Instruction,
+  Place,
+  SourceLocation,
+  Terminal,
+  VariableBinding,
+  makeBlockId,
+  makeDeclarationId,
+  makeIdentifierName,
+  makeInstructionId,
+  makeTemporaryIdentifier,
+  makeType,
+} from './HIR';
+import {printInstruction} from './PrintHIR';
+import {
+  eachTerminalSuccessor,
+  mapTerminalSuccessors,
+  terminalFallthrough,
+} from './visitors';
+
+/*
+ * *******************************************************************************************
+ * *******************************************************************************************
+ * ************************************* Lowering to HIR *************************************
+ * *******************************************************************************************
+ * *******************************************************************************************
+ */
+
+// A work-in-progress block that does not yet have a terminator
+export type WipBlock = {
+  id: BlockId;
+  instructions: Array<Instruction>;
+  kind: BlockKind;
+};
+
+type Scope = LoopScope | LabelScope | SwitchScope;
+
+type LoopScope = {
+  kind: 'loop';
+  label: string | null;
+  continueBlock: BlockId;
+  breakBlock: BlockId;
+};
+
+type SwitchScope = {
+  kind: 'switch';
+  breakBlock: BlockId;
+  label: string | null;
+};
+
+type LabelScope = {
+  kind: 'label';
+  label: string;
+  breakBlock: BlockId;
+};
+
+function newBlock(id: BlockId, kind: BlockKind): WipBlock {
+  return {id, kind, instructions: []};
+}
+
+export type Bindings = Map<
+  string,
+  {node: t.Identifier; identifier: Identifier}
+>;
+
+/*
+ * Determines how instructions should be constructed in order to preserve
+ * exception semantics
+ */
+export type ExceptionsMode =
+  /*
+   * Mode used for code not covered by explicit exception handling, any
+   * errors are assumed to be thrown out of the function
+   */
+  | {kind: 'ThrowExceptions'}
+  /*
+   * Mode used for code that *is* covered by explicit exception handling
+   * (ie try/catch), which requires modeling the possibility of control
+   * flow to the exception handler.
+   */
+  | {kind: 'CatchExceptions'; handler: BlockId};
+
+// Helper class for constructing a CFG
+export default class HIRBuilder {
+  #completed: Map<BlockId, BasicBlock> = new Map();
+  #current: WipBlock;
+  #entry: BlockId;
+  #scopes: Array<Scope> = [];
+  #context: Map<t.Identifier, SourceLocation>;
+  #bindings: Bindings;
+  #env: Environment;
+  #exceptionHandlerStack: Array<BlockId> = [];
+  errors: CompilerError = new CompilerError();
+  /**
+   * Traversal context: counts the number of `fbt` tag parents
+   * of the current babel node.
+   */
+  fbtDepth: number = 0;
+
+  get nextIdentifierId(): IdentifierId {
+    return this.#env.nextIdentifierId;
+  }
+
+  get context(): Map<t.Identifier, SourceLocation> {
+    return this.#context;
+  }
+
+  get bindings(): Bindings {
+    return this.#bindings;
+  }
+
+  get environment(): Environment {
+    return this.#env;
+  }
+
+  constructor(
+    env: Environment,
+    options?: {
+      bindings?: Bindings | null;
+      context?: Map<t.Identifier, SourceLocation>;
+      entryBlockKind?: BlockKind;
+    },
+  ) {
+    this.#env = env;
+    this.#bindings = options?.bindings ?? new Map();
+    this.#context = options?.context ?? new Map();
+    this.#entry = makeBlockId(env.nextBlockId);
+    this.#current = newBlock(this.#entry, options?.entryBlockKind ?? 'block');
+  }
+
+  currentBlockKind(): BlockKind {
+    return this.#current.kind;
+  }
+
+  // Push a statement or expression onto the current block
+  push(instruction: Instruction): void {
+    this.#current.instructions.push(instruction);
+    const exceptionHandler = this.#exceptionHandlerStack.at(-1);
+    if (exceptionHandler !== undefined) {
+      const continuationBlock = this.reserve(this.currentBlockKind());
+      this.terminateWithContinuation(
+        {
+          kind: 'maybe-throw',
+          continuation: continuationBlock.id,
+          handler: exceptionHandler,
+          id: makeInstructionId(0),
+          loc: instruction.loc,
+          effects: null,
+        },
+        continuationBlock,
+      );
+    }
+  }
+
+  enterTryCatch(handler: BlockId, fn: () => void): void {
+    this.#exceptionHandlerStack.push(handler);
+    fn();
+    this.#exceptionHandlerStack.pop();
+  }
+
+  resolveThrowHandler(): BlockId | null {
+    const handler = this.#exceptionHandlerStack.at(-1);
+    return handler ?? null;
+  }
+
+  makeTemporary(loc: SourceLocation): Identifier {
+    const id = this.nextIdentifierId;
+    return makeTemporaryIdentifier(id, loc);
+  }
+
+  #resolveBabelBinding(
+    path: NodePath<t.Identifier | t.JSXIdentifier>,
+  ): Binding | null {
+    const originalName = path.node.name;
+    const binding = path.scope.getBinding(originalName);
+    if (binding == null) {
+      return null;
+    }
+    return binding;
+  }
+
+  /*
+   * Maps an Identifier (or JSX identifier) Babel node to an internal `Identifier`
+   * which represents the variable being referenced, according to the JS scoping rules.
+   *
+   * Because Forget does not preserve _all_ block scopes in the input (only those that
+   * happen to occur from control flow), this resolution ensures that different variables
+   * with the same name are mapped to a unique name. Concretely, this function maintains
+   * the invariant that all references to a given variable will return an `Identifier`
+   * with the same (unique for the function) `name` and `id`.
+   *
+   * Example:
+   *
+   * ```javascript
+   * function foo() {
+   *    const x = 0;
+   *    {
+   *      const x = 1;
+   *    }
+   *    return x;
+   * }
+   * ```
+   *
+   * The above converts as follows:
+   *
+   * ```
+   * Const Identifier { name: 'x', id: 0 } = Primitive { value: 0 };
+   * Const Identifier { name: 'x_0', id: 1 } = Primitive { value: 1 };
+   * Return Identifier { name: 'x', id: 0};
+   * ```
+   */
+  resolveIdentifier(
+    path: NodePath<t.Identifier | t.JSXIdentifier>,
+  ): VariableBinding {
+    const originalName = path.node.name;
+    const babelBinding = this.#resolveBabelBinding(path);
+    if (babelBinding == null) {
+      return {kind: 'Global', name: originalName};
+    }
+
+    // Check if the binding is from module scope
+    const outerBinding =
+      this.#env.parentFunction.scope.parent.getBinding(originalName);
+    if (babelBinding === outerBinding) {
+      const path = babelBinding.path;
+      if (path.isImportDefaultSpecifier()) {
+        const importDeclaration =
+          path.parentPath as NodePath<t.ImportDeclaration>;
+        return {
+          kind: 'ImportDefault',
+          name: originalName,
+          module: importDeclaration.node.source.value,
+        };
+      } else if (path.isImportSpecifier()) {
+        const importDeclaration =
+          path.parentPath as NodePath<t.ImportDeclaration>;
+        return {
+          kind: 'ImportSpecifier',
+          name: originalName,
+          module: importDeclaration.node.source.value,
+          imported:
+            path.node.imported.type === 'Identifier'
+              ? path.node.imported.name
+              : path.node.imported.value,
+        };
+      } else if (path.isImportNamespaceSpecifier()) {
+        const importDeclaration =
+          path.parentPath as NodePath<t.ImportDeclaration>;
+        return {
+          kind: 'ImportNamespace',
+          name: originalName,
+          module: importDeclaration.node.source.value,
+        };
+      } else {
+        return {
+          kind: 'ModuleLocal',
+          name: originalName,
+        };
+      }
+    }
+
+    const resolvedBinding = this.resolveBinding(babelBinding.identifier);
+    if (resolvedBinding.name && resolvedBinding.name.value !== originalName) {
+      babelBinding.scope.rename(originalName, resolvedBinding.name.value);
+    }
+    return {
+      kind: 'Identifier',
+      identifier: resolvedBinding,
+      bindingKind: babelBinding.kind,
+    };
+  }
+
+  isContextIdentifier(path: NodePath<t.Identifier | t.JSXIdentifier>): boolean {
+    const binding = this.#resolveBabelBinding(path);
+    if (binding) {
+      // Check if the binding is from module scope, if so return null
+      const outerBinding = this.#env.parentFunction.scope.parent.getBinding(
+        path.node.name,
+      );
+      if (binding === outerBinding) {
+        return false;
+      }
+      return this.#env.isContextIdentifier(binding.identifier);
+    } else {
+      return false;
+    }
+  }
+
+  resolveBinding(node: t.Identifier): Identifier {
+    if (node.name === 'fbt') {
+      CompilerError.throwDiagnostic({
+        category: ErrorCategory.Todo,
+        reason: 'Support local variables named `fbt`',
+        description:
+          'Local variables named `fbt` may conflict with the fbt plugin and are not yet supported',
+        details: [
+          {
+            kind: 'error',
+            message: 'Rename to avoid conflict with fbt plugin',
+            loc: node.loc ?? GeneratedSource,
+          },
+        ],
+      });
+    }
+    if (node.name === 'this') {
+      CompilerError.throwDiagnostic({
+        category: ErrorCategory.UnsupportedSyntax,
+        reason: '`this` is not supported syntax',
+        description:
+          'React Compiler does not support compiling functions that use `this`',
+        details: [
+          {
+            kind: 'error',
+            message: '`this` was used here',
+            loc: node.loc ?? GeneratedSource,
+          },
+        ],
+      });
+    }
+    const originalName = node.name;
+    let name = originalName;
+    let index = 0;
+    while (true) {
+      const mapping = this.#bindings.get(name);
+      if (mapping === undefined) {
+        const id = this.nextIdentifierId;
+        const identifier: Identifier = {
+          id,
+          declarationId: makeDeclarationId(id),
+          name: makeIdentifierName(name),
+          mutableRange: {
+            start: makeInstructionId(0),
+            end: makeInstructionId(0),
+          },
+          scope: null,
+          type: makeType(),
+          loc: node.loc ?? GeneratedSource,
+        };
+        this.#env.programContext.addNewReference(name);
+        this.#bindings.set(name, {node, identifier});
+        return identifier;
+      } else if (mapping.node === node) {
+        return mapping.identifier;
+      } else {
+        name = `${originalName}_${index++}`;
+      }
+    }
+  }
+
+  // Construct a final CFG from this context
+  build(): HIR {
+    let ir: HIR = {
+      blocks: this.#completed,
+      entry: this.#entry,
+    };
+    const rpoBlocks = getReversePostorderedBlocks(ir);
+    for (const [id, block] of ir.blocks) {
+      if (
+        !rpoBlocks.has(id) &&
+        block.instructions.some(
+          instr => instr.value.kind === 'FunctionExpression',
+        )
+      ) {
+        CompilerError.throwTodo({
+          reason: `Support functions with unreachable code that may contain hoisted declarations`,
+          loc: block.instructions[0]?.loc ?? block.terminal.loc,
+          description: null,
+          suggestions: null,
+        });
+      }
+    }
+    ir.blocks = rpoBlocks;
+
+    removeUnreachableForUpdates(ir);
+    removeDeadDoWhileStatements(ir);
+    removeUnnecessaryTryCatch(ir);
+    markInstructionIds(ir);
+    markPredecessors(ir);
+
+    return ir;
+  }
+
+  // Terminate the current block w the given terminal, and start a new block
+  terminate(terminal: Terminal, nextBlockKind: BlockKind | null): BlockId {
+    const {id: blockId, kind, instructions} = this.#current;
+    this.#completed.set(blockId, {
+      kind,
+      id: blockId,
+      instructions,
+      terminal,
+      preds: new Set(),
+      phis: new Set(),
+    });
+    if (nextBlockKind) {
+      const nextId = this.#env.nextBlockId;
+      this.#current = newBlock(nextId, nextBlockKind);
+    }
+    return blockId;
+  }
+
+  /*
+   * Terminate the current block w the given terminal, and set the previously
+   * reserved block as the new current block
+   */
+  terminateWithContinuation(terminal: Terminal, continuation: WipBlock): void {
+    const {id: blockId, kind, instructions} = this.#current;
+    this.#completed.set(blockId, {
+      kind: kind,
+      id: blockId,
+      instructions,
+      terminal: terminal,
+      preds: new Set(),
+      phis: new Set(),
+    });
+    this.#current = continuation;
+  }
+
+  /*
+   * Reserve a block so that it can be referenced prior to construction.
+   * Make this the current block with `terminateWithContinuation()` or
+   * call `complete()` to save it without setting it as the current block.
+   */
+  reserve(kind: BlockKind): WipBlock {
+    return newBlock(makeBlockId(this.#env.nextBlockId), kind);
+  }
+
+  // Save a previously reserved block as completed
+  complete(block: WipBlock, terminal: Terminal): void {
+    const {id: blockId, kind, instructions} = block;
+    this.#completed.set(blockId, {
+      kind,
+      id: blockId,
+      instructions,
+      terminal,
+      preds: new Set(),
+      phis: new Set(),
+    });
+  }
+
+  /*
+   * Sets the given wip block as the current block, executes the provided callback to populate the block
+   * up to its terminal, and then resets the previous actively block.
+   */
+  enterReserved(wip: WipBlock, fn: () => Terminal): void {
+    const current = this.#current;
+    this.#current = wip;
+    const terminal = fn();
+    const {id: blockId, kind, instructions} = this.#current;
+    this.#completed.set(blockId, {
+      kind,
+      id: blockId,
+      instructions,
+      terminal,
+      preds: new Set(),
+      phis: new Set(),
+    });
+    this.#current = current;
+  }
+
+  /*
+   * Create a new block and execute the provided callback with the new block
+   * set as the current, resetting to the previously active block upon exit.
+   * The lambda must return a terminal node, which is used to terminate the
+   * newly constructed block.
+   */
+  enter(nextBlockKind: BlockKind, fn: (blockId: BlockId) => Terminal): BlockId {
+    const wip = this.reserve(nextBlockKind);
+    this.enterReserved(wip, () => {
+      return fn(wip.id);
+    });
+    return wip.id;
+  }
+
+  label<T>(label: string, breakBlock: BlockId, fn: () => T): T {
+    this.#scopes.push({
+      kind: 'label',
+      breakBlock,
+      label,
+    });
+    const value = fn();
+    const last = this.#scopes.pop();
+    CompilerError.invariant(
+      last != null &&
+        last.kind === 'label' &&
+        last.label === label &&
+        last.breakBlock === breakBlock,
+      {
+        reason: 'Mismatched label',
+        loc: GeneratedSource,
+      },
+    );
+    return value;
+  }
+
+  switch<T>(label: string | null, breakBlock: BlockId, fn: () => T): T {
+    this.#scopes.push({
+      kind: 'switch',
+      breakBlock,
+      label,
+    });
+    const value = fn();
+    const last = this.#scopes.pop();
+    CompilerError.invariant(
+      last != null &&
+        last.kind === 'switch' &&
+        last.label === label &&
+        last.breakBlock === breakBlock,
+      {
+        reason: 'Mismatched label',
+        loc: GeneratedSource,
+      },
+    );
+    return value;
+  }
+
+  /*
+   * Executes the provided lambda inside a scope in which the provided loop
+   * information is cached for lookup with `lookupBreak()` and `lookupContinue()`
+   */
+  loop<T>(
+    label: string | null,
+    // block of the loop body. "continue" jumps here.
+    continueBlock: BlockId,
+    // block following the loop. "break" jumps here.
+    breakBlock: BlockId,
+    fn: () => T,
+  ): T {
+    this.#scopes.push({
+      kind: 'loop',
+      label,
+      continueBlock,
+      breakBlock,
+    });
+    const value = fn();
+    const last = this.#scopes.pop();
+    CompilerError.invariant(
+      last != null &&
+        last.kind === 'loop' &&
+        last.label === label &&
+        last.continueBlock === continueBlock &&
+        last.breakBlock === breakBlock,
+      {
+        reason: 'Mismatched loops',
+        loc: GeneratedSource,
+      },
+    );
+    return value;
+  }
+
+  /*
+   * Lookup the block target for a break statement, based on loops and switch statements
+   * in scope. Throws if there is no available location to break.
+   */
+  lookupBreak(label: string | null): BlockId {
+    for (let ii = this.#scopes.length - 1; ii >= 0; ii--) {
+      const scope = this.#scopes[ii];
+      if (
+        (label === null &&
+          (scope.kind === 'loop' || scope.kind === 'switch')) ||
+        label === scope.label
+      ) {
+        return scope.breakBlock;
+      }
+    }
+    CompilerError.invariant(false, {
+      reason: 'Expected a loop or switch to be in scope',
+      loc: GeneratedSource,
+    });
+  }
+
+  /*
+   * Lookup the block target for a continue statement, based on loops
+   * in scope. Throws if there is no available location to continue, or if the given
+   * label does not correspond to a loop (this should also be validated at parse time).
+   */
+  lookupContinue(label: string | null): BlockId {
+    for (let ii = this.#scopes.length - 1; ii >= 0; ii--) {
+      const scope = this.#scopes[ii];
+      if (scope.kind === 'loop') {
+        if (label === null || label === scope.label) {
+          return scope.continueBlock;
+        }
+      } else if (label !== null && scope.label === label) {
+        CompilerError.invariant(false, {
+          reason: 'Continue may only refer to a labeled loop',
+          loc: GeneratedSource,
+        });
+      }
+    }
+    CompilerError.invariant(false, {
+      reason: 'Expected a loop to be in scope',
+      loc: GeneratedSource,
+    });
+  }
+}
+
+// Helper to shrink a CFG eliminate jump-only blocks.
+function _shrink(func: HIR): void {
+  const gotos = new Map();
+  /*
+   * Given a target block for some terminator, resolves the ideal block that should be
+   * targeted instead. This transitively resolves any blocks that are simple indirections
+   * (empty blocks that terminate in a goto).
+   */
+  function resolveBlockTarget(blockId: BlockId): BlockId {
+    let target = gotos.get(blockId) ?? null;
+    if (target !== null) {
+      return target;
+    }
+    const block = func.blocks.get(blockId);
+    CompilerError.invariant(block != null, {
+      reason: `expected block ${blockId} to exist`,
+      loc: GeneratedSource,
+    });
+    target = getTargetIfIndirection(block);
+    if (target !== null) {
+      //  the target might also be a simple goto, recurse
+      target = resolveBlockTarget(target) ?? target;
+      gotos.set(blockId, target);
+      return target;
+    } else {
+      //  If the block wasn't an indirection, return the original input.
+      return blockId;
+    }
+  }
+
+  const queue = [func.entry];
+  const reachable = new Set<BlockId>();
+  while (queue.length !== 0) {
+    const blockId = queue.shift()!;
+    if (reachable.has(blockId)) {
+      continue;
+    }
+    reachable.add(blockId);
+    const block = func.blocks.get(blockId)!;
+    block.terminal = mapTerminalSuccessors(block.terminal, prevTarget => {
+      const target = resolveBlockTarget(prevTarget);
+      queue.push(target);
+      return target;
+    });
+  }
+  for (const [blockId] of func.blocks) {
+    if (!reachable.has(blockId)) {
+      func.blocks.delete(blockId);
+    }
+  }
+}
+
+export function removeUnreachableForUpdates(fn: HIR): void {
+  for (const [, block] of fn.blocks) {
+    if (
+      block.terminal.kind === 'for' &&
+      block.terminal.update !== null &&
+      !fn.blocks.has(block.terminal.update)
+    ) {
+      block.terminal.update = null;
+    }
+  }
+}
+
+export function removeDeadDoWhileStatements(func: HIR): void {
+  const visited: Set<BlockId> = new Set();
+  for (const [_, block] of func.blocks) {
+    visited.add(block.id);
+  }
+
+  /*
+   * If the test condition of a DoWhile is unreachable, the terminal is effectively deadcode and we
+   * can just inline the loop body. We replace the terminal with a goto to the loop block and
+   * MergeConsecutiveBlocks figures out how to merge as appropriate.
+   */
+  for (const [_, block] of func.blocks) {
+    if (block.terminal.kind === 'do-while') {
+      if (!visited.has(block.terminal.test)) {
+        block.terminal = {
+          kind: 'goto',
+          block: block.terminal.loop,
+          variant: GotoVariant.Break,
+          id: block.terminal.id,
+          loc: block.terminal.loc,
+        };
+      }
+    }
+  }
+}
+
+/*
+ * Converts the graph to reverse-postorder, with predecessor blocks appearing
+ * before successors except in the case of back edges (ie loops).
+ */
+export function reversePostorderBlocks(func: HIR): void {
+  const rpoBlocks = getReversePostorderedBlocks(func);
+  func.blocks = rpoBlocks;
+}
+
+/**
+ * Returns a mapping of BlockId => BasicBlock where the insertion order of the map
+ * has blocks in reverse-postorder, with predecessor blocks appearing before successors
+ * except in the case of back edges (ie loops). Note that not all blocks in the input
+ * may be in the output: blocks will be removed in the case of unreachable code in
+ * the input.
+ */
+function getReversePostorderedBlocks(func: HIR): HIR['blocks'] {
+  const visited: Set<BlockId> = new Set();
+  const used: Set<BlockId> = new Set();
+  const usedFallthroughs: Set<BlockId> = new Set();
+  const postorder: Array<BlockId> = [];
+  function visit(blockId: BlockId, isUsed: boolean): void {
+    const wasUsed = used.has(blockId);
+    const wasVisited = visited.has(blockId);
+    visited.add(blockId);
+    if (isUsed) {
+      used.add(blockId);
+    }
+    if (wasVisited && (wasUsed || !isUsed)) {
+      return;
+    }
+
+    /*
+     * Note that we visit successors in reverse order. This ensures that when we
+     * reverse the list at the end, that "sibling" edges appear in-order. For example,
+     * ```
+     * // bb0
+     * let x;
+     * if (c) {
+     *    // bb1
+     *    x = 1;
+     * } else {
+     *    // bb2
+     *    x = 2;
+     * }
+     * // bb3
+     * x;
+     * ```
+     *
+     * We want the output to be bb0, bb1, bb2, bb3 just to line up with the original
+     * program order for visual debugging. By visiting the successors in reverse order
+     * (eg bb2 then bb1), we ensure that they get reversed back to the correct order.
+     */
+    const block = func.blocks.get(blockId)!;
+    CompilerError.invariant(block != null, {
+      reason: '[HIRBuilder] Unexpected null block',
+      description: `expected block ${blockId} to exist`,
+      loc: GeneratedSource,
+    });
+    const successors = [...eachTerminalSuccessor(block.terminal)].reverse();
+    const fallthrough = terminalFallthrough(block.terminal);
+
+    /**
+     * Fallthrough blocks are only used to record original program block structure. If the
+     * fallthrough is actually reachable, it will be reached through terminal successors.
+     * To retain program structure, we visit fallthrough blocks first (marking them as not
+     * actually used yet) to ensure their block IDs emitted in the correct order.
+     */
+    if (fallthrough != null) {
+      if (isUsed) {
+        usedFallthroughs.add(fallthrough);
+      }
+      visit(fallthrough, false);
+    }
+    for (const successor of successors) {
+      visit(successor, isUsed);
+    }
+
+    if (!wasVisited) {
+      postorder.push(blockId);
+    }
+  }
+  visit(func.entry, true);
+  const blocks = new Map<BlockId, BasicBlock>();
+  for (const blockId of postorder.reverse()) {
+    const block = func.blocks.get(blockId)!;
+    if (used.has(blockId)) {
+      blocks.set(blockId, func.blocks.get(blockId)!);
+    } else if (usedFallthroughs.has(blockId)) {
+      blocks.set(blockId, {
+        ...block,
+        instructions: [],
+        terminal: {
+          kind: 'unreachable',
+          id: block.terminal.id,
+          loc: block.terminal.loc,
+        },
+      });
+    }
+    // otherwise this block is unreachable
+  }
+
+  return blocks;
+}
+
+export function markInstructionIds(func: HIR): void {
+  let id = 0;
+  const visited = new Set<Instruction>();
+  for (const [_, block] of func.blocks) {
+    for (const instr of block.instructions) {
+      CompilerError.invariant(!visited.has(instr), {
+        reason: `${printInstruction(instr)} already visited!`,
+        loc: instr.loc,
+      });
+      visited.add(instr);
+      instr.id = makeInstructionId(++id);
+    }
+    block.terminal.id = makeInstructionId(++id);
+  }
+}
+
+export function markPredecessors(func: HIR): void {
+  for (const [, block] of func.blocks) {
+    block.preds.clear();
+  }
+  const visited: Set<BlockId> = new Set();
+  function visit(blockId: BlockId, prevBlock: BasicBlock | null): void {
+    const block = func.blocks.get(blockId)!;
+    if (block == null) {
+      return;
+    }
+    CompilerError.invariant(block != null, {
+      reason: 'unexpected missing block',
+      description: `block ${blockId}`,
+      loc: GeneratedSource,
+    });
+    if (prevBlock) {
+      block.preds.add(prevBlock.id);
+    }
+
+    if (visited.has(blockId)) {
+      return;
+    }
+    visited.add(blockId);
+
+    const {terminal} = block;
+
+    for (const successor of eachTerminalSuccessor(terminal)) {
+      visit(successor, block);
+    }
+  }
+  visit(func.entry, null);
+}
+
+/*
+ * If the given block is a simple indirection — empty terminated with a goto(break) —
+ * returns the block being pointed to. Otherwise returns null.
+ */
+function getTargetIfIndirection(block: BasicBlock): number | null {
+  return block.instructions.length === 0 &&
+    block.terminal.kind === 'goto' &&
+    block.terminal.variant === GotoVariant.Break
+    ? block.terminal.block
+    : null;
+}
+
+/*
+ * Finds try terminals where the handler is unreachable, and converts the try
+ * to a goto(terminal.block)
+ */
+export function removeUnnecessaryTryCatch(fn: HIR): void {
+  for (const [, block] of fn.blocks) {
+    if (
+      block.terminal.kind === 'try' &&
+      !fn.blocks.has(block.terminal.handler)
+    ) {
+      const handlerId = block.terminal.handler;
+      const fallthroughId = block.terminal.fallthrough;
+      const fallthrough = fn.blocks.get(fallthroughId);
+      block.terminal = {
+        kind: 'goto',
+        block: block.terminal.block,
+        id: makeInstructionId(0),
+        loc: block.terminal.loc,
+        variant: GotoVariant.Break,
+      };
+
+      if (fallthrough != null) {
+        if (fallthrough.preds.size === 1 && fallthrough.preds.has(handlerId)) {
+          // delete fallthrough
+          fn.blocks.delete(fallthroughId);
+        } else {
+          fallthrough.preds.delete(handlerId);
+        }
+      }
+    }
+  }
+}
+
+export function createTemporaryPlace(
+  env: Environment,
+  loc: SourceLocation,
+): Place {
+  return {
+    kind: 'Identifier',
+    identifier: makeTemporaryIdentifier(env.nextIdentifierId, loc),
+    reactive: false,
+    effect: Effect.Unknown,
+    loc: GeneratedSource,
+  };
+}
+
+/**
+ * Clones an existing Place, returning a new temporary Place that shares the
+ * same metadata properties as the original place (effect, reactive flag, type)
+ * but has a new, temporary Identifier.
+ */
+export function clonePlaceToTemporary(env: Environment, place: Place): Place {
+  const temp = createTemporaryPlace(env, place.loc);
+  temp.effect = place.effect;
+  temp.identifier.type = place.identifier.type;
+  temp.reactive = place.reactive;
+  return temp;
+}
+
+/**
+ * Fix scope and identifier ranges to account for renumbered instructions
+ */
+export function fixScopeAndIdentifierRanges(func: HIR): void {
+  for (const [, block] of func.blocks) {
+    const terminal = block.terminal;
+    if (terminal.kind === 'scope' || terminal.kind === 'pruned-scope') {
+      /*
+       * Scope ranges should always align to start at the 'scope' terminal
+       * and end at the first instruction of the fallthrough block
+       */
+      const fallthroughBlock = func.blocks.get(terminal.fallthrough)!;
+      const firstId =
+        fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
+      terminal.scope.range.start = terminal.id;
+      terminal.scope.range.end = firstId;
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/MergeConsecutiveBlocks.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/MergeConsecutiveBlocks.ts
new file mode 100644
index 00000000000..bdd4f3f1e13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/MergeConsecutiveBlocks.ts
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  BlockId,
+  Effect,
+  GeneratedSource,
+  HIRFunction,
+  Instruction,
+  Place,
+} from './HIR';
+import {markPredecessors} from './HIRBuilder';
+import {terminalFallthrough, terminalHasFallthrough} from './visitors';
+
+/*
+ * Merges sequences of blocks that will always execute consecutively —
+ * ie where the predecessor always transfers control to the successor
+ * (ie ends in a goto) and where the predecessor is the only predecessor
+ * for that successor (ie, there is no other way to reach the successor).
+ *
+ * Note that this pass leaves value/loop blocks alone because they cannot
+ * be merged without breaking the structure of the high-level terminals
+ * that reference them.
+ */
+export function mergeConsecutiveBlocks(fn: HIRFunction): void {
+  const merged = new MergedBlocks();
+  const fallthroughBlocks = new Set<BlockId>();
+  for (const [, block] of fn.body.blocks) {
+    const fallthrough = terminalFallthrough(block.terminal);
+    if (fallthrough !== null) {
+      fallthroughBlocks.add(fallthrough);
+    }
+
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'FunctionExpression' ||
+        instr.value.kind === 'ObjectMethod'
+      ) {
+        mergeConsecutiveBlocks(instr.value.loweredFunc.func);
+      }
+    }
+
+    if (
+      // Can only merge blocks with a single predecessor
+      block.preds.size !== 1 ||
+      // Value blocks cannot merge
+      block.kind !== 'block' ||
+      // Merging across fallthroughs could move the predecessor out of its block scope
+      fallthroughBlocks.has(block.id)
+    ) {
+      continue;
+    }
+    const originalPredecessorId = Array.from(block.preds)[0]!;
+    const predecessorId = merged.get(originalPredecessorId);
+    const predecessor = fn.body.blocks.get(predecessorId);
+    CompilerError.invariant(predecessor !== undefined, {
+      reason: `Expected predecessor ${predecessorId} to exist`,
+      loc: GeneratedSource,
+    });
+    if (predecessor.terminal.kind !== 'goto' || predecessor.kind !== 'block') {
+      /*
+       * The predecessor is not guaranteed to transfer control to this block,
+       * they aren't consecutive.
+       */
+      continue;
+    }
+
+    // Replace phis in the merged block with canonical assignments to the single operand value
+    for (const phi of block.phis) {
+      CompilerError.invariant(phi.operands.size === 1, {
+        reason: `Found a block with a single predecessor but where a phi has multiple (${phi.operands.size}) operands`,
+        loc: GeneratedSource,
+      });
+      const operand = Array.from(phi.operands.values())[0]!;
+      const lvalue: Place = {
+        kind: 'Identifier',
+        identifier: phi.place.identifier,
+        effect: Effect.ConditionallyMutate,
+        reactive: false,
+        loc: GeneratedSource,
+      };
+      const instr: Instruction = {
+        id: predecessor.terminal.id,
+        lvalue: {...lvalue},
+        value: {
+          kind: 'LoadLocal',
+          place: {...operand},
+          loc: GeneratedSource,
+        },
+        effects: [{kind: 'Alias', from: {...operand}, into: {...lvalue}}],
+        loc: GeneratedSource,
+      };
+      predecessor.instructions.push(instr);
+    }
+
+    predecessor.instructions.push(...block.instructions);
+    predecessor.terminal = block.terminal;
+    merged.merge(block.id, predecessorId);
+    fn.body.blocks.delete(block.id);
+  }
+  for (const [, block] of fn.body.blocks) {
+    for (const phi of block.phis) {
+      for (const [predecessorId, operand] of phi.operands) {
+        const mapped = merged.get(predecessorId);
+        if (mapped !== predecessorId) {
+          phi.operands.delete(predecessorId);
+          phi.operands.set(mapped, operand);
+        }
+      }
+    }
+  }
+  markPredecessors(fn.body);
+  for (const [, {terminal}] of fn.body.blocks) {
+    if (terminalHasFallthrough(terminal)) {
+      terminal.fallthrough = merged.get(terminal.fallthrough);
+    }
+  }
+}
+
+class MergedBlocks {
+  #map: Map<BlockId, BlockId> = new Map();
+
+  // Record that @param block was merged into @param into.
+  merge(block: BlockId, into: BlockId): void {
+    const target = this.get(into);
+    this.#map.set(block, target);
+  }
+
+  /*
+   * Get the id of the block that @param block has been merged into.
+   * This is transitive, in the case that eg @param block was merged
+   * into a block which later merged into another block.
+   */
+  get(block: BlockId): BlockId {
+    let current = block;
+    while (this.#map.has(current)) {
+      current = this.#map.get(current) ?? current;
+    }
+    return current;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/MergeOverlappingReactiveScopesHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/MergeOverlappingReactiveScopesHIR.ts
new file mode 100644
index 00000000000..96d20ea6442
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/MergeOverlappingReactiveScopesHIR.ts
@@ -0,0 +1,313 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  HIRFunction,
+  InstructionId,
+  Place,
+  ReactiveScope,
+  makeInstructionId,
+} from '.';
+import {getPlaceScope} from '../HIR/HIR';
+import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
+import DisjointSet from '../Utils/DisjointSet';
+import {getOrInsertDefault} from '../Utils/utils';
+import {
+  eachInstructionLValue,
+  eachInstructionOperand,
+  eachTerminalOperand,
+} from './visitors';
+
+/**
+ * While previous passes ensure that reactive scopes span valid sets of program
+ * blocks, pairs of reactive scopes may still be inconsistent with respect to
+ * each other.
+ *
+ * (a) Reactive scopes ranges must form valid blocks in the resulting javascript
+ * program. Any two scopes must either be entirely disjoint or one scope must be
+ * nested within the other.
+ *   ```js
+ *   // Scopes 1:3 and 3:5 are valid because they contain no common instructions
+ *   [1] ⌝
+ *   [2] ⌟
+ *   [3] ⌝
+ *   [4] ⌟
+ *   // Scopes 1:3 and 1:5 are valid because the former is nested within the other
+ *   [1] ⌝  ⌝
+ *   [2] ⌟  |
+ *   [3]    |
+ *   [4]    ⌟
+ *   // Scopes 1:4 and 2:5 are invalid because we cannot produce if-else memo
+ *   // blocks representing these scopes in the output program.
+ *   [1] ⌝
+ *   [2] |  ⌝
+ *   [3] ⌟  |
+ *   [4]    ⌟
+ *   ```
+ *
+ * (b) A scope's own instructions may only mutate that scope.
+ * For each reactive scope, we currently produce exactly one if-block which
+ * spans the instruction range of the scope. In this simple example, instr [2]
+ * does not mutate any values but is included within scope @0.
+ * ```js
+ *   // IR instructions
+ *   [1] (writes to scope @0's values)
+ *   [2] (does not mutate anything)
+ *   [3] (writes to scope @0's values)
+ *
+ *   // javascript output
+ *   if (( scope @0's dependencies changed )) {
+ *     [1]
+ *     [2]
+ *     [3]
+ *   }
+ * ```
+ * Nested scopes may be modeled as a tree in which child scopes are contained
+ * within parent scopes. This corresponds to nested if-else memo blocks in the
+ * output program). An instruction may only mutate its own "active" scope.
+ *   ```js
+ *   // Active scopes for a simple program
+ *   scope @0 {
+ *     [0] (active scope=@0)
+ *     scope @1 {
+ *       [1] (active scope=@1)
+ *       [2] (active scope=@1)
+ *     }
+ *     [3] (active scope=@0)
+ *   }
+ *   [4] (no active scope)
+ *
+ *   // In this example, scopes @0 and @1 must be merged because instr [2]'s
+ *   // active scope is scope@1 but it mutates scope@0.
+ *   scope @0, produces x {
+ *     [0] x = []
+ *     scope @1, produces y {
+ *       [1] y = []
+ *       [2] x.push(2)
+ *       [3] y.push(3)
+ *     }
+ *     [3] x.push(1)
+ *   }
+ * ```
+ *
+ * As mentioned, these constraints arise entirely from the current design of
+ * compiler output.
+ * - instruction ordering is preserved (otherwise, disjoint ranges for scopes
+ *   may be produced by reordering their mutating instructions)
+ * - exactly one if-else block per scope, which does not allow the composition
+ *   of a reactive scope from disconnected instruction ranges.
+ */
+
+export function mergeOverlappingReactiveScopesHIR(fn: HIRFunction): void {
+  /**
+   * Collect all scopes eagerly because some scopes begin before the first
+   * instruction that references them (due to alignReactiveScopesToBlocks)
+   */
+  const scopesInfo = collectScopeInfo(fn);
+
+  /**
+   * Iterate through scopes and instructions to find which should be merged
+   */
+  const joinedScopes = getOverlappingReactiveScopes(fn, scopesInfo);
+
+  /**
+   * Merge scopes and rewrite all references
+   */
+  joinedScopes.forEach((scope, groupScope) => {
+    if (scope !== groupScope) {
+      groupScope.range.start = makeInstructionId(
+        Math.min(groupScope.range.start, scope.range.start),
+      );
+      groupScope.range.end = makeInstructionId(
+        Math.max(groupScope.range.end, scope.range.end),
+      );
+    }
+  });
+  for (const [place, originalScope] of scopesInfo.placeScopes) {
+    const nextScope = joinedScopes.find(originalScope);
+    if (nextScope !== null && nextScope !== originalScope) {
+      place.identifier.scope = nextScope;
+    }
+  }
+}
+
+type ScopeInfo = {
+  scopeStarts: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
+  scopeEnds: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
+  placeScopes: Map<Place, ReactiveScope>;
+};
+
+type TraversalState = {
+  joined: DisjointSet<ReactiveScope>;
+  activeScopes: Array<ReactiveScope>;
+};
+
+function collectScopeInfo(fn: HIRFunction): ScopeInfo {
+  const scopeStarts: Map<InstructionId, Set<ReactiveScope>> = new Map();
+  const scopeEnds: Map<InstructionId, Set<ReactiveScope>> = new Map();
+  const placeScopes: Map<Place, ReactiveScope> = new Map();
+
+  function collectPlaceScope(place: Place): void {
+    const scope = place.identifier.scope;
+    if (scope != null) {
+      placeScopes.set(place, scope);
+      /**
+       * Record both mutating and non-mutating scopes to merge scopes with
+       * still-mutating values with inner scopes that alias those values
+       * (see `nonmutating-capture-in-unsplittable-memo-block`)
+       *
+       * Note that this isn't perfect, as it also leads to merging of mutating
+       * scopes with JSX single-instruction scopes (see `mutation-within-jsx`)
+       */
+      if (scope.range.start !== scope.range.end) {
+        getOrInsertDefault(scopeStarts, scope.range.start, new Set()).add(
+          scope,
+        );
+        getOrInsertDefault(scopeEnds, scope.range.end, new Set()).add(scope);
+      }
+    }
+  }
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      for (const operand of eachInstructionLValue(instr)) {
+        collectPlaceScope(operand);
+      }
+      for (const operand of eachInstructionOperand(instr)) {
+        collectPlaceScope(operand);
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      collectPlaceScope(operand);
+    }
+  }
+
+  return {
+    scopeStarts: [...scopeStarts.entries()]
+      .map(([id, scopes]) => ({id, scopes}))
+      .sort((a, b) => b.id - a.id),
+    scopeEnds: [...scopeEnds.entries()]
+      .map(([id, scopes]) => ({id, scopes}))
+      .sort((a, b) => b.id - a.id),
+    placeScopes,
+  };
+}
+
+function visitInstructionId(
+  id: InstructionId,
+  {scopeEnds, scopeStarts}: ScopeInfo,
+  {activeScopes, joined}: TraversalState,
+): void {
+  /**
+   * Handle all scopes that end at this instruction.
+   */
+  const scopeEndTop = scopeEnds.at(-1);
+  if (scopeEndTop != null && scopeEndTop.id <= id) {
+    scopeEnds.pop();
+
+    /**
+     * Match scopes that end at this instruction with our stack of active
+     * scopes (from traversal state). We need to sort these in descending
+     * order of start IDs because the scopes stack is ordered as such
+     */
+    const scopesSortedStartDescending = [...scopeEndTop.scopes].sort(
+      (a, b) => b.range.start - a.range.start,
+    );
+    for (const scope of scopesSortedStartDescending) {
+      const idx = activeScopes.indexOf(scope);
+      if (idx !== -1) {
+        /**
+         * Detect and merge all overlapping scopes. `activeScopes` is ordered
+         * by scope start, so every active scope between a completed scope s
+         * and the top of the stack (1) started later than s and (2) completes after s.
+         */
+        if (idx !== activeScopes.length - 1) {
+          joined.union([scope, ...activeScopes.slice(idx + 1)]);
+        }
+        activeScopes.splice(idx, 1);
+      }
+    }
+  }
+
+  /**
+   * Handle all scopes that begin at this instruction by adding them
+   * to the scopes stack
+   */
+  const scopeStartTop = scopeStarts.at(-1);
+  if (scopeStartTop != null && scopeStartTop.id <= id) {
+    scopeStarts.pop();
+
+    const scopesSortedEndDescending = [...scopeStartTop.scopes].sort(
+      (a, b) => b.range.end - a.range.end,
+    );
+    activeScopes.push(...scopesSortedEndDescending);
+    /**
+     * Merge all identical scopes (ones with the same start and end),
+     * as they end up with the same reactive block
+     */
+    for (let i = 1; i < scopesSortedEndDescending.length; i++) {
+      const prev = scopesSortedEndDescending[i - 1];
+      const curr = scopesSortedEndDescending[i];
+      if (prev.range.end === curr.range.end) {
+        joined.union([prev, curr]);
+      }
+    }
+  }
+}
+
+function visitPlace(
+  id: InstructionId,
+  place: Place,
+  {activeScopes, joined}: TraversalState,
+): void {
+  /**
+   * If an instruction mutates an outer scope, flatten all scopes from the top
+   * of the stack to the mutated outer scope.
+   */
+  const placeScope = getPlaceScope(id, place);
+  if (placeScope != null && isMutable({id}, place)) {
+    const placeScopeIdx = activeScopes.indexOf(placeScope);
+    if (placeScopeIdx !== -1 && placeScopeIdx !== activeScopes.length - 1) {
+      joined.union([placeScope, ...activeScopes.slice(placeScopeIdx + 1)]);
+    }
+  }
+}
+
+function getOverlappingReactiveScopes(
+  fn: HIRFunction,
+  context: ScopeInfo,
+): DisjointSet<ReactiveScope> {
+  const state: TraversalState = {
+    joined: new DisjointSet<ReactiveScope>(),
+    activeScopes: [],
+  };
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      visitInstructionId(instr.id, context, state);
+      for (const place of eachInstructionOperand(instr)) {
+        if (
+          (instr.value.kind === 'FunctionExpression' ||
+            instr.value.kind === 'ObjectMethod') &&
+          place.identifier.type.kind === 'Primitive'
+        ) {
+          continue;
+        }
+        visitPlace(instr.id, place, state);
+      }
+      for (const place of eachInstructionLValue(instr)) {
+        visitPlace(instr.id, place, state);
+      }
+    }
+    visitInstructionId(block.terminal.id, context, state);
+    for (const place of eachTerminalOperand(block.terminal)) {
+      visitPlace(block.terminal.id, place, state);
+    }
+  }
+
+  return state.joined;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
new file mode 100644
index 00000000000..d104d799d72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
@@ -0,0 +1,1532 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {AliasingEffect, AliasingSignature} from '../Inference/AliasingEffects';
+import {assertExhaustive} from '../Utils/utils';
+import {
+  Effect,
+  GeneratedSource,
+  Hole,
+  makeDeclarationId,
+  makeIdentifierId,
+  makeInstructionId,
+  Place,
+  SourceLocation,
+  SpreadPattern,
+  ValueKind,
+  ValueReason,
+} from './HIR';
+import {
+  BuiltInType,
+  FunctionType,
+  makeType,
+  ObjectType,
+  PolyType,
+  PrimitiveType,
+} from './Types';
+import {AliasingEffectConfig, AliasingSignatureConfig} from './TypeSchema';
+
+/*
+ * This file exports types and defaults for JavaScript object shapes. These are
+ * stored and used by a Forget `Environment`. See comments in `Types.ts`,
+ * `Globals.ts`, and `Environment.ts` for more details.
+ */
+
+const PRIMITIVE_TYPE: PrimitiveType = {
+  kind: 'Primitive',
+};
+
+let nextAnonId = 0;
+/*
+ * We currently use strings for anonymous ShapeIds since they are easily
+ * debuggable, even though `Symbol()` might be more performant
+ */
+function createAnonId(): string {
+  return `<generated_${nextAnonId++}>`;
+}
+
+/*
+ * Add a non-hook function to an existing ShapeRegistry.
+ *
+ * @returns a {@link FunctionType} representing the added function.
+ */
+export function addFunction(
+  registry: ShapeRegistry,
+  properties: Iterable<[string, BuiltInType | PolyType]>,
+  fn: Omit<FunctionSignature, 'hookKind' | 'aliasing'> & {
+    aliasing?: AliasingSignatureConfig | null | undefined;
+  },
+  id: string | null = null,
+  isConstructor: boolean = false,
+): FunctionType {
+  const shapeId = id ?? createAnonId();
+  const aliasing =
+    fn.aliasing != null
+      ? parseAliasingSignatureConfig(fn.aliasing, '<builtin>', GeneratedSource)
+      : null;
+  addShape(registry, shapeId, properties, {
+    ...fn,
+    aliasing,
+    hookKind: null,
+  });
+  return {
+    kind: 'Function',
+    return: fn.returnType,
+    shapeId,
+    isConstructor,
+  };
+}
+
+/*
+ * Add a hook to an existing ShapeRegistry.
+ *
+ * @returns a {@link FunctionType} representing the added hook function.
+ */
+export function addHook(
+  registry: ShapeRegistry,
+  fn: Omit<FunctionSignature, 'aliasing'> & {
+    hookKind: HookKind;
+    aliasing?: AliasingSignatureConfig | null | undefined;
+  },
+  id: string | null = null,
+): FunctionType {
+  const shapeId = id ?? createAnonId();
+  const aliasing =
+    fn.aliasing != null
+      ? parseAliasingSignatureConfig(fn.aliasing, '<builtin>', GeneratedSource)
+      : null;
+  addShape(registry, shapeId, [], {...fn, aliasing});
+  return {
+    kind: 'Function',
+    return: fn.returnType,
+    shapeId,
+    isConstructor: false,
+  };
+}
+
+function parseAliasingSignatureConfig(
+  typeConfig: AliasingSignatureConfig,
+  moduleName: string,
+  loc: SourceLocation,
+): AliasingSignature {
+  const lifetimes = new Map<string, Place>();
+  function define(temp: string): Place {
+    CompilerError.invariant(!lifetimes.has(temp), {
+      reason: `Invalid type configuration for module`,
+      description: `Expected aliasing signature to have unique names for receiver, params, rest, returns, and temporaries in module '${moduleName}'`,
+      loc,
+    });
+    const place = signatureArgument(lifetimes.size);
+    lifetimes.set(temp, place);
+    return place;
+  }
+  function lookup(temp: string): Place {
+    const place = lifetimes.get(temp);
+    CompilerError.invariant(place != null, {
+      reason: `Invalid type configuration for module`,
+      description: `Expected aliasing signature effects to reference known names from receiver/params/rest/returns/temporaries, but '${temp}' is not a known name in '${moduleName}'`,
+      loc,
+    });
+    return place;
+  }
+  const receiver = define(typeConfig.receiver);
+  const params = typeConfig.params.map(define);
+  const rest = typeConfig.rest != null ? define(typeConfig.rest) : null;
+  const returns = define(typeConfig.returns);
+  const temporaries = typeConfig.temporaries.map(define);
+  const effects = typeConfig.effects.map(
+    (effect: AliasingEffectConfig): AliasingEffect => {
+      switch (effect.kind) {
+        case 'ImmutableCapture':
+        case 'CreateFrom':
+        case 'Capture':
+        case 'Alias':
+        case 'Assign': {
+          const from = lookup(effect.from);
+          const into = lookup(effect.into);
+          return {
+            kind: effect.kind,
+            from,
+            into,
+          };
+        }
+        case 'Mutate':
+        case 'MutateTransitiveConditionally': {
+          const value = lookup(effect.value);
+          return {kind: effect.kind, value};
+        }
+        case 'Create': {
+          const into = lookup(effect.into);
+          return {
+            kind: 'Create',
+            into,
+            reason: effect.reason,
+            value: effect.value,
+          };
+        }
+        case 'Freeze': {
+          const value = lookup(effect.value);
+          return {
+            kind: 'Freeze',
+            value,
+            reason: effect.reason,
+          };
+        }
+        case 'Impure': {
+          const place = lookup(effect.place);
+          return {
+            kind: 'Impure',
+            place,
+            error: CompilerError.throwTodo({
+              reason: 'Support impure effect declarations',
+              loc: GeneratedSource,
+            }),
+          };
+        }
+        case 'Apply': {
+          const receiver = lookup(effect.receiver);
+          const fn = lookup(effect.function);
+          const args: Array<Place | SpreadPattern | Hole> = effect.args.map(
+            arg => {
+              if (typeof arg === 'string') {
+                return lookup(arg);
+              } else if (arg.kind === 'Spread') {
+                return {kind: 'Spread', place: lookup(arg.place)};
+              } else {
+                return arg;
+              }
+            },
+          );
+          const into = lookup(effect.into);
+          return {
+            kind: 'Apply',
+            receiver,
+            function: fn,
+            mutatesFunction: effect.mutatesFunction,
+            args,
+            into,
+            loc,
+            signature: null,
+          };
+        }
+        default: {
+          assertExhaustive(
+            effect,
+            `Unexpected effect kind '${(effect as any).kind}'`,
+          );
+        }
+      }
+    },
+  );
+  return {
+    receiver: receiver.identifier.id,
+    params: params.map(p => p.identifier.id),
+    rest: rest != null ? rest.identifier.id : null,
+    returns: returns.identifier.id,
+    temporaries,
+    effects,
+  };
+}
+
+/*
+ * Add an object to an existing ShapeRegistry.
+ *
+ * @returns an {@link ObjectType} representing the added object.
+ */
+export function addObject(
+  registry: ShapeRegistry,
+  id: string | null,
+  properties: Iterable<[string, BuiltInType | PolyType]>,
+): ObjectType {
+  const shapeId = id ?? createAnonId();
+  addShape(registry, shapeId, properties, null);
+  return {
+    kind: 'Object',
+    shapeId,
+  };
+}
+
+function addShape(
+  registry: ShapeRegistry,
+  id: string,
+  properties: Iterable<[string, BuiltInType | PolyType]>,
+  functionType: FunctionSignature | null,
+): ObjectShape {
+  const shape: ObjectShape = {
+    properties: new Map(properties),
+    functionType,
+  };
+
+  CompilerError.invariant(!registry.has(id), {
+    reason: `[ObjectShape] Could not add shape to registry: name ${id} already exists.`,
+    loc: GeneratedSource,
+  });
+  registry.set(id, shape);
+  return shape;
+}
+
+export type HookKind =
+  | 'useContext'
+  | 'useState'
+  | 'useActionState'
+  | 'useReducer'
+  | 'useRef'
+  | 'useEffect'
+  | 'useLayoutEffect'
+  | 'useInsertionEffect'
+  | 'useMemo'
+  | 'useCallback'
+  | 'useTransition'
+  | 'useImperativeHandle'
+  | 'useEffectEvent'
+  | 'useOptimistic'
+  | 'Custom';
+
+/*
+ * Call signature of a function, used for type and effect inference.
+ *
+ * Note: Param type is not recorded since it currently does not affect inference.
+ * Specifically, we currently do not:
+ *   - infer types based on their usage in argument position
+ *   - handle inference for overloaded / generic functions
+ */
+export type FunctionSignature = {
+  positionalParams: Array<Effect>;
+  restParam: Effect | null;
+  returnType: BuiltInType | PolyType;
+  returnValueKind: ValueKind;
+
+  /**
+   * For functions that return frozen/immutable values, the reason provides a more
+   * precise error message for any (invalid) mutations of the value.
+   */
+  returnValueReason?: ValueReason;
+
+  calleeEffect: Effect;
+  hookKind: HookKind | null;
+  /*
+   * Whether any of the parameters may be aliased by each other or the return
+   * value. Defaults to false (parameters may alias). When true, the compiler
+   * may choose not to memoize arguments if they do not otherwise escape.
+   */
+  noAlias?: boolean;
+
+  /**
+   * Supported only for methods (no-op when used on functions in CallExpression.callee position).
+   *
+   * Indicates that the method can only modify its receiver if any of the arguments
+   * are mutable or are function expressions which mutate their arguments. This is designed
+   * for methods such as Array.prototype.map(), which only mutate the receiver array if they are
+   * passed a callback which has mutable side-effects (including mutating its inputs).
+   *
+   * MethodCalls to such functions will use a different behavior depending on their arguments:
+   * - If arguments are all non-mutable, the arguments get the Read effect and the receiver is Capture.
+   * - Else uses the effects specified by this signature.
+   */
+  mutableOnlyIfOperandsAreMutable?: boolean;
+
+  impure?: boolean;
+  knownIncompatible?: string | null | undefined;
+
+  canonicalName?: string;
+
+  aliasing?: AliasingSignature | null | undefined;
+};
+
+/*
+ * Shape of an {@link FunctionType} if {@link ObjectShape.functionType} is present,
+ * or {@link ObjectType} otherwise.
+ *
+ * Constructors (e.g. the global `Array` object) and other functions (e.g. `Math.min`)
+ * are both represented by {@link ObjectShape.functionType}.
+ */
+export type ObjectShape = {
+  properties: Map<string, BuiltInType | PolyType>;
+  functionType: FunctionSignature | null;
+};
+
+/*
+ * Every valid ShapeRegistry must contain ObjectShape definitions for
+ * {@link BuiltInArrayId} and {@link BuiltInObjectId}, since these are the
+ * the inferred types for [] and {}.
+ */
+export type ShapeRegistry = Map<string, ObjectShape>;
+export const BuiltInPropsId = 'BuiltInProps';
+export const BuiltInArrayId = 'BuiltInArray';
+export const BuiltInSetId = 'BuiltInSet';
+export const BuiltInMapId = 'BuiltInMap';
+export const BuiltInWeakSetId = 'BuiltInWeakSet';
+export const BuiltInWeakMapId = 'BuiltInWeakMap';
+export const BuiltInFunctionId = 'BuiltInFunction';
+export const BuiltInJsxId = 'BuiltInJsx';
+export const BuiltInObjectId = 'BuiltInObject';
+export const BuiltInUseStateId = 'BuiltInUseState';
+export const BuiltInSetStateId = 'BuiltInSetState';
+export const BuiltInUseActionStateId = 'BuiltInUseActionState';
+export const BuiltInSetActionStateId = 'BuiltInSetActionState';
+export const BuiltInUseRefId = 'BuiltInUseRefId';
+export const BuiltInRefValueId = 'BuiltInRefValue';
+export const BuiltInMixedReadonlyId = 'BuiltInMixedReadonly';
+export const BuiltInUseEffectHookId = 'BuiltInUseEffectHook';
+export const BuiltInUseLayoutEffectHookId = 'BuiltInUseLayoutEffectHook';
+export const BuiltInUseInsertionEffectHookId = 'BuiltInUseInsertionEffectHook';
+export const BuiltInUseOperatorId = 'BuiltInUseOperator';
+export const BuiltInUseReducerId = 'BuiltInUseReducer';
+export const BuiltInDispatchId = 'BuiltInDispatch';
+export const BuiltInUseContextHookId = 'BuiltInUseContextHook';
+export const BuiltInUseTransitionId = 'BuiltInUseTransition';
+export const BuiltInUseOptimisticId = 'BuiltInUseOptimistic';
+export const BuiltInSetOptimisticId = 'BuiltInSetOptimistic';
+export const BuiltInStartTransitionId = 'BuiltInStartTransition';
+export const BuiltInFireId = 'BuiltInFire';
+export const BuiltInFireFunctionId = 'BuiltInFireFunction';
+export const BuiltInUseEffectEventId = 'BuiltInUseEffectEvent';
+export const BuiltInEffectEventId = 'BuiltInEffectEventFunction';
+export const BuiltInAutodepsId = 'BuiltInAutoDepsId';
+export const BuiltInEventHandlerId = 'BuiltInEventHandlerId';
+
+// See getReanimatedModuleType() in Globals.ts — this is part of supporting Reanimated's ref-like types
+export const ReanimatedSharedValueId = 'ReanimatedSharedValueId';
+
+// ShapeRegistry with default definitions for built-ins.
+export const BUILTIN_SHAPES: ShapeRegistry = new Map();
+
+// If the `ref` prop exists, it has the ref type
+addObject(BUILTIN_SHAPES, BuiltInPropsId, [
+  ['ref', {kind: 'Object', shapeId: BuiltInUseRefId}],
+]);
+
+/* Built-in array shape */
+addObject(BUILTIN_SHAPES, BuiltInArrayId, [
+  [
+    'indexOf',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'includes',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'pop',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'at',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'concat',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Capture,
+      returnType: {
+        kind: 'Object',
+        shapeId: BuiltInArrayId,
+      },
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  ['length', PRIMITIVE_TYPE],
+  [
+    'push',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Capture,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+      aliasing: {
+        receiver: '@receiver',
+        params: [],
+        rest: '@rest',
+        returns: '@returns',
+        temporaries: [],
+        effects: [
+          // Push directly mutates the array itself
+          {kind: 'Mutate', value: '@receiver'},
+          // The arguments are captured into the array
+          {
+            kind: 'Capture',
+            from: '@rest',
+            into: '@receiver',
+          },
+          // Returns the new length, a primitive
+          {
+            kind: 'Create',
+            into: '@returns',
+            value: ValueKind.Primitive,
+            reason: ValueReason.KnownReturnSignature,
+          },
+        ],
+      },
+    }),
+  ],
+  [
+    'slice',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {
+        kind: 'Object',
+        shapeId: BuiltInArrayId,
+      },
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'map',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+      /*
+       * callee is ConditionallyMutate because items of the array
+       * flow into the lambda and may be mutated there, even though
+       * the array object itself is not modified
+       */
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+      aliasing: {
+        receiver: '@receiver',
+        params: ['@callback'],
+        rest: null,
+        returns: '@returns',
+        temporaries: [
+          // Temporary representing captured items of the receiver
+          '@item',
+          // Temporary representing the result of the callback
+          '@callbackReturn',
+          /*
+           * Undefined `this` arg to the callback. Note the signature does not
+           * support passing an explicit thisArg second param
+           */
+          '@thisArg',
+        ],
+        effects: [
+          // Map creates a new mutable array
+          {
+            kind: 'Create',
+            into: '@returns',
+            value: ValueKind.Mutable,
+            reason: ValueReason.KnownReturnSignature,
+          },
+          // The first arg to the callback is an item extracted from the receiver array
+          {
+            kind: 'CreateFrom',
+            from: '@receiver',
+            into: '@item',
+          },
+          // The undefined this for the callback
+          {
+            kind: 'Create',
+            into: '@thisArg',
+            value: ValueKind.Primitive,
+            reason: ValueReason.KnownReturnSignature,
+          },
+          // calls the callback, returning the result into a temporary
+          {
+            kind: 'Apply',
+            receiver: '@thisArg',
+            args: ['@item', {kind: 'Hole'}, '@receiver'],
+            function: '@callback',
+            into: '@callbackReturn',
+            mutatesFunction: false,
+          },
+          // captures the result of the callback into the return array
+          {
+            kind: 'Capture',
+            from: '@callbackReturn',
+            into: '@returns',
+          },
+        ],
+      },
+    }),
+  ],
+  [
+    'flatMap',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+      /*
+       * callee is ConditionallyMutate because items of the array
+       * flow into the lambda and may be mutated there, even though
+       * the array object itself is not modified
+       */
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'filter',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+      /*
+       * callee is ConditionallyMutate because items of the array
+       * flow into the lambda and may be mutated there, even though
+       * the array object itself is not modified
+       */
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'every',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Primitive'},
+      /*
+       * callee is ConditionallyMutate because items of the array
+       * flow into the lambda and may be mutated there, even though
+       * the array object itself is not modified
+       */
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'some',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Primitive'},
+      /*
+       * callee is ConditionallyMutate because items of the array
+       * flow into the lambda and may be mutated there, even though
+       * the array object itself is not modified
+       */
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'find',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'findIndex',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Primitive'},
+      /*
+       * callee is ConditionallyMutate because items of the array
+       * flow into the lambda and may be mutated there, even though
+       * the array object itself is not modified
+       */
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'join',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  // TODO: rest of Array properties
+]);
+
+/* Built-in Object shape */
+addObject(BUILTIN_SHAPES, BuiltInObjectId, [
+  [
+    'toString',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  /*
+   * TODO:
+   * hasOwnProperty, isPrototypeOf, propertyIsEnumerable, toLocaleString, valueOf
+   */
+]);
+
+/* Built-in Set shape */
+addObject(BUILTIN_SHAPES, BuiltInSetId, [
+  [
+    /**
+     * add(value)
+     * Parameters
+     *   value: the value of the element to add to the Set object.
+     * Returns the Set object with added value.
+     */
+    'add',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInSetId},
+      calleeEffect: Effect.Store,
+      // returnValueKind is technically dependent on the ValueKind of the set itself
+      returnValueKind: ValueKind.Mutable,
+      aliasing: {
+        receiver: '@receiver',
+        params: [],
+        rest: '@rest',
+        returns: '@returns',
+        temporaries: [],
+        effects: [
+          // Set.add returns the receiver Set
+          {
+            kind: 'Assign',
+            from: '@receiver',
+            into: '@returns',
+          },
+          // Set.add mutates the set itself
+          {
+            kind: 'Mutate',
+            value: '@receiver',
+          },
+          // Captures the rest params into the set
+          {
+            kind: 'Capture',
+            from: '@rest',
+            into: '@receiver',
+          },
+        ],
+      },
+    }),
+  ],
+  [
+    /**
+     * clear()
+     * Parameters none
+     * Returns undefined
+     */
+    'clear',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    /**
+     * setInstance.delete(value)
+     * Returns true if value was already in Set; otherwise false.
+     */
+    'delete',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'has',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  ['size', PRIMITIVE_TYPE],
+  [
+    /**
+     * difference(other)
+     * Parameters
+     *   other: A Set object, or set-like object.
+     * Returns a new Set object containing elements in this set but not in the other set.
+     */
+    'difference',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInSetId},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    /**
+     * union(other)
+     * Parameters
+     *   other: A Set object, or set-like object.
+     * Returns a new Set object containing elements in either this set or the other set.
+     */
+    'union',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInSetId},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    /**
+     * symmetricalDifference(other)
+     * Parameters
+     *   other: A Set object, or set-like object.
+     * A new Set object containing elements which are in either this set or the other set, but not in both.
+     */
+    'symmetricalDifference',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInSetId},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    /**
+     * isSubsetOf(other)
+     * Parameters
+     *   other: A Set object, or set-like object.
+     * Returns true if all elements in this set are also in the other set, and false otherwise.
+     */
+    'isSubsetOf',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    /**
+     * isSupersetOf(other)
+     * Parameters
+     *  other: A Set object, or set-like object.
+     * Returns true if all elements in the other set are also in this set, and false otherwise.
+     */
+    'isSupersetOf',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    /**
+     * forEach(callbackFn)
+     * forEach(callbackFn, thisArg)
+     */
+    'forEach',
+    addFunction(BUILTIN_SHAPES, [], {
+      /**
+       * see Array.map explanation for why arguments are marked `ConditionallyMutate`
+       */
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  /**
+   * Iterators
+   */
+  [
+    'entries',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'keys',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'values',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+]);
+addObject(BUILTIN_SHAPES, BuiltInMapId, [
+  [
+    /**
+     * clear()
+     * Parameters none
+     * Returns undefined
+     */
+    'clear',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'delete',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'get',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'has',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    /**
+     * Params
+     *   key: the key of the element to add to the Map object. The key may be
+     *   any JavaScript type (any primitive value or any type of JavaScript
+     *   object).
+     *   value: the value of the element to add to the Map object.
+     * Returns the Map object.
+     */
+    'set',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture, Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInMapId},
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  ['size', PRIMITIVE_TYPE],
+  [
+    'forEach',
+    addFunction(BUILTIN_SHAPES, [], {
+      /**
+       * see Array.map explanation for why arguments are marked `ConditionallyMutate`
+       */
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  /**
+   * Iterators
+   */
+  [
+    'entries',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'keys',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'values',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInWeakSetId, [
+  [
+    /**
+     * add(value)
+     * Parameters
+     *   value: the value of the element to add to the Set object.
+     * Returns the Set object with added value.
+     */
+    'add',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInWeakSetId},
+      calleeEffect: Effect.Store,
+      // returnValueKind is technically dependent on the ValueKind of the set itself
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    /**
+     * setInstance.delete(value)
+     * Returns true if value was already in Set; otherwise false.
+     */
+    'delete',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'has',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInWeakMapId, [
+  [
+    'delete',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'get',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: {kind: 'Poly'},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'has',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    /**
+     * Params
+     *   key: the key of the element to add to the Map object. The key may be
+     *   any JavaScript type (any primitive value or any type of JavaScript
+     *   object).
+     *   value: the value of the element to add to the Map object.
+     * Returns the Map object.
+     */
+    'set',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Capture, Effect.Capture],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInWeakMapId},
+      calleeEffect: Effect.Store,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInUseStateId, [
+  ['0', {kind: 'Poly'}],
+  [
+    '1',
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInSetStateId,
+    ),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInUseTransitionId, [
+  ['0', {kind: 'Primitive'}],
+  [
+    '1',
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: null,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInStartTransitionId,
+    ),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInUseOptimisticId, [
+  ['0', {kind: 'Poly'}],
+  [
+    '1',
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInSetOptimisticId,
+    ),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInUseActionStateId, [
+  ['0', {kind: 'Poly'}],
+  [
+    '1',
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInSetActionStateId,
+    ),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInUseReducerId, [
+  ['0', {kind: 'Poly'}],
+  [
+    '1',
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInDispatchId,
+    ),
+  ],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInUseRefId, [
+  ['current', {kind: 'Object', shapeId: BuiltInRefValueId}],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInRefValueId, [
+  ['*', {kind: 'Object', shapeId: BuiltInRefValueId}],
+]);
+
+addObject(BUILTIN_SHAPES, ReanimatedSharedValueId, []);
+
+addFunction(
+  BUILTIN_SHAPES,
+  [],
+  {
+    positionalParams: [],
+    restParam: Effect.ConditionallyMutate,
+    returnType: {kind: 'Poly'},
+    calleeEffect: Effect.ConditionallyMutate,
+    returnValueKind: ValueKind.Mutable,
+  },
+  BuiltInEffectEventId,
+);
+
+addFunction(
+  BUILTIN_SHAPES,
+  [],
+  {
+    positionalParams: [],
+    restParam: Effect.ConditionallyMutate,
+    returnType: {kind: 'Poly'},
+    calleeEffect: Effect.ConditionallyMutate,
+    returnValueKind: ValueKind.Mutable,
+  },
+  BuiltInEventHandlerId,
+);
+
+/**
+ * MixedReadOnly =
+ *   | primitive
+ *   | simple objects (Record<string, MixedReadOnly>)
+ *   | Array<MixedReadOnly>
+ *
+ * APIs such as Relay — but also Flux and other data stores — often return a
+ * union of types with some interesting properties in terms of analysis.
+ *
+ * Given this constraint, if data came from Relay, then we should be able to
+ * infer things like `data.items.map(): Array`. That may seem like a leap at
+ * first but remember, we assume you're not patching builtins. Thus the only way
+ * data.items.map can exist and be a function, given the above set of data types
+ * and builtin JS methods, is if `data.items` was an Array, and `data.items.map`
+ * is therefore calling Array.prototype.map. Then we know that function returns
+ * an Array as well. This relies on the fact that map() is being called, so if
+ * data.items was some other type it would error at runtime - so it's sound.
+ *
+ * Note that this shape is currently only used for hook return values, which
+ * means that it's safe to type aliasing method-call return kinds as `Frozen`.
+ *
+ * Also note that all newly created arrays from method-calls (e.g. `.map`)
+ * have the appropriate mutable `BuiltInArray` shape
+ */
+addObject(BUILTIN_SHAPES, BuiltInMixedReadonlyId, [
+  [
+    'toString',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'indexOf',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'includes',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  [
+    'at',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [Effect.Read],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInMixedReadonlyId},
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
+  [
+    'map',
+    addFunction(BUILTIN_SHAPES, [], {
+      /**
+       * Note `map`'s arguments are annotated as Effect.ConditionallyMutate as
+       * calling `<array>.map(fn)` might invoke `fn`, which means replaying its
+       * effects.
+       *
+       * (Note that Effect.Read / Effect.Capture on a function type means
+       * potential data dependency or aliasing respectively.)
+       */
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+    }),
+  ],
+  [
+    'flatMap',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+    }),
+  ],
+  [
+    'filter',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Mutable,
+      noAlias: true,
+    }),
+  ],
+  [
+    'concat',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Capture,
+      returnType: {
+        kind: 'Object',
+        shapeId: BuiltInArrayId,
+      },
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'slice',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: {
+        kind: 'Object',
+        shapeId: BuiltInArrayId,
+      },
+      calleeEffect: Effect.Capture,
+      returnValueKind: ValueKind.Mutable,
+    }),
+  ],
+  [
+    'every',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'some',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'find',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Object', shapeId: BuiltInMixedReadonlyId},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Frozen,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'findIndex',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.ConditionallyMutate,
+      returnType: {kind: 'Primitive'},
+      calleeEffect: Effect.ConditionallyMutate,
+      returnValueKind: ValueKind.Primitive,
+      noAlias: true,
+      mutableOnlyIfOperandsAreMutable: true,
+    }),
+  ],
+  [
+    'join',
+    addFunction(BUILTIN_SHAPES, [], {
+      positionalParams: [],
+      restParam: Effect.Read,
+      returnType: PRIMITIVE_TYPE,
+      calleeEffect: Effect.Read,
+      returnValueKind: ValueKind.Primitive,
+    }),
+  ],
+  ['*', {kind: 'Object', shapeId: BuiltInMixedReadonlyId}],
+]);
+
+addObject(BUILTIN_SHAPES, BuiltInJsxId, []);
+addObject(BUILTIN_SHAPES, BuiltInFunctionId, []);
+
+export const DefaultMutatingHook = addHook(
+  BUILTIN_SHAPES,
+  {
+    positionalParams: [],
+    restParam: Effect.ConditionallyMutate,
+    returnType: {kind: 'Poly'},
+    calleeEffect: Effect.Read,
+    hookKind: 'Custom',
+    returnValueKind: ValueKind.Mutable,
+  },
+  'DefaultMutatingHook',
+);
+
+export const DefaultNonmutatingHook = addHook(
+  BUILTIN_SHAPES,
+  {
+    positionalParams: [],
+    restParam: Effect.Freeze,
+    returnType: {kind: 'Poly'},
+    calleeEffect: Effect.Read,
+    hookKind: 'Custom',
+    returnValueKind: ValueKind.Frozen,
+    aliasing: {
+      receiver: '@receiver',
+      params: [],
+      rest: '@rest',
+      returns: '@returns',
+      temporaries: [],
+      effects: [
+        // Freeze the arguments
+        {
+          kind: 'Freeze',
+          value: '@rest',
+          reason: ValueReason.HookCaptured,
+        },
+        // Returns a frozen value
+        {
+          kind: 'Create',
+          into: '@returns',
+          value: ValueKind.Frozen,
+          reason: ValueReason.HookReturn,
+        },
+        // May alias any arguments into the return
+        {
+          kind: 'Alias',
+          from: '@rest',
+          into: '@returns',
+        },
+      ],
+    },
+  },
+  'DefaultNonmutatingHook',
+);
+
+export function signatureArgument(id: number): Place {
+  const place: Place = {
+    kind: 'Identifier',
+    effect: Effect.Unknown,
+    loc: GeneratedSource,
+    reactive: false,
+    identifier: {
+      declarationId: makeDeclarationId(id),
+      id: makeIdentifierId(id),
+      loc: GeneratedSource,
+      mutableRange: {start: makeInstructionId(0), end: makeInstructionId(0)},
+      name: null,
+      scope: null,
+      type: makeType(),
+    },
+  };
+  return place;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
new file mode 100644
index 00000000000..b1e3746b0e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
@@ -0,0 +1,1034 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {printReactiveScopeSummary} from '../ReactiveScopes/PrintReactiveFunction';
+import DisjointSet from '../Utils/DisjointSet';
+import {assertExhaustive} from '../Utils/utils';
+import type {
+  FunctionExpression,
+  HIR,
+  HIRFunction,
+  Identifier,
+  IdentifierName,
+  Instruction,
+  InstructionValue,
+  LValue,
+  ManualMemoDependency,
+  MutableRange,
+  ObjectMethod,
+  ObjectPropertyKey,
+  Pattern,
+  Phi,
+  Place,
+  ReactiveInstruction,
+  ReactiveScope,
+  ReactiveValue,
+  SourceLocation,
+  SpreadPattern,
+  Terminal,
+  Type,
+} from './HIR';
+import {GotoVariant, InstructionKind} from './HIR';
+import {AliasingEffect, AliasingSignature} from '../Inference/AliasingEffects';
+
+export type Options = {
+  indent: number;
+};
+
+export function printFunctionWithOutlined(fn: HIRFunction): string {
+  const output = [printFunction(fn)];
+  for (const outlined of fn.env.getOutlinedFunctions()) {
+    output.push(`\nfunction ${outlined.fn.id}:\n${printHIR(outlined.fn.body)}`);
+  }
+  return output.join('\n');
+}
+
+export function printFunction(fn: HIRFunction): string {
+  const output = [];
+  let definition = '';
+  if (fn.id !== null) {
+    definition += fn.id;
+  } else {
+    definition += '<<anonymous>>';
+  }
+  if (fn.nameHint != null) {
+    definition += ` ${fn.nameHint}`;
+  }
+  if (fn.params.length !== 0) {
+    definition +=
+      '(' +
+      fn.params
+        .map(param => {
+          if (param.kind === 'Identifier') {
+            return printPlace(param);
+          } else {
+            return `...${printPlace(param.place)}`;
+          }
+        })
+        .join(', ') +
+      ')';
+  } else {
+    definition += '()';
+  }
+  definition += `: ${printPlace(fn.returns)}`;
+  output.push(definition);
+  output.push(...fn.directives);
+  output.push(printHIR(fn.body));
+  return output.join('\n');
+}
+
+export function printHIR(ir: HIR, options: Options | null = null): string {
+  let output = [];
+  let indent = ' '.repeat(options?.indent ?? 0);
+  const push = (text: string, indent: string = '  '): void => {
+    output.push(`${indent}${text}`);
+  };
+  for (const [blockId, block] of ir.blocks) {
+    output.push(`bb${blockId} (${block.kind}):`);
+    if (block.preds.size > 0) {
+      const preds = ['predecessor blocks:'];
+      for (const pred of block.preds) {
+        preds.push(`bb${pred}`);
+      }
+      push(preds.join(' '));
+    }
+    for (const phi of block.phis) {
+      push(printPhi(phi));
+    }
+    for (const instr of block.instructions) {
+      push(printInstruction(instr));
+    }
+    const terminal = printTerminal(block.terminal);
+    if (Array.isArray(terminal)) {
+      terminal.forEach(line => push(line));
+    } else {
+      push(terminal);
+    }
+  }
+  return output.map(line => indent + line).join('\n');
+}
+
+export function printMixedHIR(
+  value: Instruction | InstructionValue | Terminal,
+): string {
+  if (!('kind' in value)) {
+    return printInstruction(value);
+  }
+  switch (value.kind) {
+    case 'try':
+    case 'maybe-throw':
+    case 'sequence':
+    case 'label':
+    case 'optional':
+    case 'branch':
+    case 'if':
+    case 'logical':
+    case 'ternary':
+    case 'return':
+    case 'switch':
+    case 'throw':
+    case 'while':
+    case 'for':
+    case 'unreachable':
+    case 'unsupported':
+    case 'goto':
+    case 'do-while':
+    case 'for-in':
+    case 'for-of':
+    case 'scope':
+    case 'pruned-scope': {
+      const terminal = printTerminal(value);
+      if (Array.isArray(terminal)) {
+        return terminal.join('; ');
+      }
+      return terminal;
+    }
+    default: {
+      return printInstructionValue(value);
+    }
+  }
+}
+
+export function printInstruction(instr: ReactiveInstruction): string {
+  const id = `[${instr.id}]`;
+  let value = printInstructionValue(instr.value);
+  if (instr.effects != null) {
+    value += `\n    ${instr.effects.map(printAliasingEffect).join('\n    ')}`;
+  }
+
+  if (instr.lvalue !== null) {
+    return `${id} ${printPlace(instr.lvalue)} = ${value}`;
+  } else {
+    return `${id} ${value}`;
+  }
+}
+
+export function printPhi(phi: Phi): string {
+  const items = [];
+  items.push(printPlace(phi.place));
+  items.push(printMutableRange(phi.place.identifier));
+  items.push(printType(phi.place.identifier.type));
+  items.push(': phi(');
+  const phis = [];
+  for (const [blockId, place] of phi.operands) {
+    phis.push(`bb${blockId}: ${printPlace(place)}`);
+  }
+
+  items.push(phis.join(', '));
+  items.push(')');
+  return items.join('');
+}
+
+export function printTerminal(terminal: Terminal): Array<string> | string {
+  let value;
+  switch (terminal.kind) {
+    case 'if': {
+      value = `[${terminal.id}] If (${printPlace(terminal.test)}) then:bb${
+        terminal.consequent
+      } else:bb${terminal.alternate}${
+        terminal.fallthrough ? ` fallthrough=bb${terminal.fallthrough}` : ''
+      }`;
+      break;
+    }
+    case 'branch': {
+      value = `[${terminal.id}] Branch (${printPlace(terminal.test)}) then:bb${
+        terminal.consequent
+      } else:bb${terminal.alternate} fallthrough:bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'logical': {
+      value = `[${terminal.id}] Logical ${terminal.operator} test:bb${terminal.test} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'ternary': {
+      value = `[${terminal.id}] Ternary test:bb${terminal.test} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'optional': {
+      value = `[${terminal.id}] Optional (optional=${terminal.optional}) test:bb${terminal.test} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'throw': {
+      value = `[${terminal.id}] Throw ${printPlace(terminal.value)}`;
+      break;
+    }
+    case 'return': {
+      value = `[${terminal.id}] Return ${terminal.returnVariant}${
+        terminal.value != null ? ' ' + printPlace(terminal.value) : ''
+      }`;
+      if (terminal.effects != null) {
+        value += `\n    ${terminal.effects.map(printAliasingEffect).join('\n    ')}`;
+      }
+      break;
+    }
+    case 'goto': {
+      value = `[${terminal.id}] Goto${
+        terminal.variant === GotoVariant.Continue ? '(Continue)' : ''
+      } bb${terminal.block}`;
+      break;
+    }
+    case 'switch': {
+      const output = [];
+      output.push(`[${terminal.id}] Switch (${printPlace(terminal.test)})`);
+      terminal.cases.forEach(case_ => {
+        if (case_.test !== null) {
+          output.push(`  Case ${printPlace(case_.test)}: bb${case_.block}`);
+        } else {
+          output.push(`  Default: bb${case_.block}`);
+        }
+      });
+      if (terminal.fallthrough) {
+        output.push(`  Fallthrough: bb${terminal.fallthrough}`);
+      }
+      value = output;
+      break;
+    }
+    case 'do-while': {
+      value = `[${terminal.id}] DoWhile loop=${`bb${terminal.loop}`} test=bb${
+        terminal.test
+      } fallthrough=${`bb${terminal.fallthrough}`}`;
+      break;
+    }
+    case 'while': {
+      value = `[${terminal.id}] While test=bb${terminal.test} loop=${
+        terminal.loop !== null ? `bb${terminal.loop}` : ''
+      } fallthrough=${terminal.fallthrough ? `bb${terminal.fallthrough}` : ''}`;
+      break;
+    }
+    case 'for': {
+      value = `[${terminal.id}] For init=bb${terminal.init} test=bb${terminal.test} loop=bb${terminal.loop} update=bb${terminal.update} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'for-of': {
+      value = `[${terminal.id}] ForOf init=bb${terminal.init} test=bb${terminal.test} loop=bb${terminal.loop} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'for-in': {
+      value = `[${terminal.id}] ForIn init=bb${terminal.init} loop=bb${terminal.loop} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'label': {
+      value = `[${terminal.id}] Label block=bb${terminal.block} fallthrough=${
+        terminal.fallthrough ? `bb${terminal.fallthrough}` : ''
+      }`;
+      break;
+    }
+    case 'sequence': {
+      value = `[${terminal.id}] Sequence block=bb${terminal.block} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'unreachable': {
+      value = `[${terminal.id}] Unreachable`;
+      break;
+    }
+    case 'unsupported': {
+      value = `[${terminal.id}] Unsupported`;
+      break;
+    }
+    case 'maybe-throw': {
+      value = `[${terminal.id}] MaybeThrow continuation=bb${terminal.continuation} handler=bb${terminal.handler}`;
+      if (terminal.effects != null) {
+        value += `\n    ${terminal.effects.map(printAliasingEffect).join('\n    ')}`;
+      }
+      break;
+    }
+    case 'scope': {
+      value = `[${terminal.id}] Scope ${printReactiveScopeSummary(
+        terminal.scope,
+      )} block=bb${terminal.block} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'pruned-scope': {
+      value = `[${terminal.id}] <pruned> Scope ${printReactiveScopeSummary(
+        terminal.scope,
+      )} block=bb${terminal.block} fallthrough=bb${terminal.fallthrough}`;
+      break;
+    }
+    case 'try': {
+      value = `[${terminal.id}] Try block=bb${terminal.block} handler=bb${
+        terminal.handler
+      }${
+        terminal.handlerBinding !== null
+          ? ` handlerBinding=(${printPlace(terminal.handlerBinding)})`
+          : ''
+      } fallthrough=${
+        terminal.fallthrough != null ? `bb${terminal.fallthrough}` : ''
+      }`;
+      break;
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${terminal as any as Terminal}\``,
+      );
+    }
+  }
+  return value;
+}
+
+function printHole(): string {
+  return '<hole>';
+}
+
+function printObjectPropertyKey(key: ObjectPropertyKey): string {
+  switch (key.kind) {
+    case 'identifier':
+      return key.name;
+    case 'string':
+      return `"${key.name}"`;
+    case 'computed': {
+      return `[${printPlace(key.name)}]`;
+    }
+    case 'number': {
+      return String(key.name);
+    }
+  }
+}
+
+export function printInstructionValue(instrValue: ReactiveValue): string {
+  let value = '';
+  switch (instrValue.kind) {
+    case 'ArrayExpression': {
+      value = `Array [${instrValue.elements
+        .map(element => {
+          if (element.kind === 'Identifier') {
+            return printPlace(element);
+          } else if (element.kind === 'Hole') {
+            return printHole();
+          } else {
+            return `...${printPlace(element.place)}`;
+          }
+        })
+        .join(', ')}]`;
+      break;
+    }
+    case 'ObjectExpression': {
+      const properties = [];
+      if (instrValue.properties !== null) {
+        for (const property of instrValue.properties) {
+          if (property.kind === 'ObjectProperty') {
+            properties.push(
+              `${printObjectPropertyKey(property.key)}: ${printPlace(
+                property.place,
+              )}`,
+            );
+          } else {
+            properties.push(`...${printPlace(property.place)}`);
+          }
+        }
+      }
+      value = `Object { ${properties.join(', ')} }`;
+      break;
+    }
+    case 'UnaryExpression': {
+      value = `Unary ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'BinaryExpression': {
+      value = `Binary ${printPlace(instrValue.left)} ${
+        instrValue.operator
+      } ${printPlace(instrValue.right)}`;
+      break;
+    }
+    case 'NewExpression': {
+      value = `New ${printPlace(instrValue.callee)}(${instrValue.args
+        .map(arg => printPattern(arg))
+        .join(', ')})`;
+      break;
+    }
+    case 'CallExpression': {
+      value = `Call ${printPlace(instrValue.callee)}(${instrValue.args
+        .map(arg => printPattern(arg))
+        .join(', ')})`;
+      break;
+    }
+    case 'MethodCall': {
+      value = `MethodCall ${printPlace(instrValue.receiver)}.${printPlace(
+        instrValue.property,
+      )}(${instrValue.args.map(arg => printPattern(arg)).join(', ')})`;
+      break;
+    }
+    case 'JSXText': {
+      value = `JSXText ${JSON.stringify(instrValue.value)}`;
+      break;
+    }
+    case 'Primitive': {
+      if (instrValue.value === undefined) {
+        value = '<undefined>';
+      } else {
+        value = JSON.stringify(instrValue.value);
+      }
+      break;
+    }
+    case 'TypeCastExpression': {
+      value = `TypeCast ${printPlace(instrValue.value)}: ${printType(
+        instrValue.type,
+      )}`;
+      break;
+    }
+    case 'JsxExpression': {
+      const propItems = [];
+      for (const attribute of instrValue.props) {
+        if (attribute.kind === 'JsxAttribute') {
+          propItems.push(
+            `${attribute.name}={${
+              attribute.place !== null ? printPlace(attribute.place) : '<empty>'
+            }}`,
+          );
+        } else {
+          propItems.push(`...${printPlace(attribute.argument)}`);
+        }
+      }
+      const tag =
+        instrValue.tag.kind === 'Identifier'
+          ? printPlace(instrValue.tag)
+          : instrValue.tag.name;
+      const props = propItems.length !== 0 ? ' ' + propItems.join(' ') : '';
+      if (instrValue.children !== null) {
+        const children = instrValue.children.map(child => {
+          return `{${printPlace(child)}}`;
+        });
+        value = `JSX <${tag}${props}${
+          props.length > 0 ? ' ' : ''
+        }>${children.join('')}</${tag}>`;
+      } else {
+        value = `JSX <${tag}${props}${props.length > 0 ? ' ' : ''}/>`;
+      }
+      break;
+    }
+    case 'JsxFragment': {
+      value = `JsxFragment [${instrValue.children
+        .map(child => printPlace(child))
+        .join(', ')}]`;
+      break;
+    }
+    case 'UnsupportedNode': {
+      value = `UnsupportedNode ${instrValue.node.type}`;
+      break;
+    }
+    case 'LoadLocal': {
+      value = `LoadLocal ${printPlace(instrValue.place)}`;
+      break;
+    }
+    case 'DeclareLocal': {
+      value = `DeclareLocal ${instrValue.lvalue.kind} ${printPlace(
+        instrValue.lvalue.place,
+      )}`;
+      break;
+    }
+    case 'DeclareContext': {
+      value = `DeclareContext ${instrValue.lvalue.kind} ${printPlace(
+        instrValue.lvalue.place,
+      )}`;
+      break;
+    }
+    case 'StoreLocal': {
+      value = `StoreLocal ${instrValue.lvalue.kind} ${printPlace(
+        instrValue.lvalue.place,
+      )} = ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'LoadContext': {
+      value = `LoadContext ${printPlace(instrValue.place)}`;
+      break;
+    }
+    case 'StoreContext': {
+      value = `StoreContext ${instrValue.lvalue.kind} ${printPlace(
+        instrValue.lvalue.place,
+      )} = ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'Destructure': {
+      value = `Destructure ${instrValue.lvalue.kind} ${printPattern(
+        instrValue.lvalue.pattern,
+      )} = ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'PropertyLoad': {
+      value = `PropertyLoad ${printPlace(instrValue.object)}.${
+        instrValue.property
+      }`;
+      break;
+    }
+    case 'PropertyStore': {
+      value = `PropertyStore ${printPlace(instrValue.object)}.${
+        instrValue.property
+      } = ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'PropertyDelete': {
+      value = `PropertyDelete ${printPlace(instrValue.object)}.${
+        instrValue.property
+      }`;
+      break;
+    }
+    case 'ComputedLoad': {
+      value = `ComputedLoad ${printPlace(instrValue.object)}[${printPlace(
+        instrValue.property,
+      )}]`;
+      break;
+    }
+    case 'ComputedStore': {
+      value = `ComputedStore ${printPlace(instrValue.object)}[${printPlace(
+        instrValue.property,
+      )}] = ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'ComputedDelete': {
+      value = `ComputedDelete ${printPlace(instrValue.object)}[${printPlace(
+        instrValue.property,
+      )}]`;
+      break;
+    }
+    case 'ObjectMethod':
+    case 'FunctionExpression': {
+      const kind =
+        instrValue.kind === 'FunctionExpression' ? 'Function' : 'ObjectMethod';
+      const name = getFunctionName(instrValue, '');
+      const fn = printFunction(instrValue.loweredFunc.func)
+        .split('\n')
+        .map(line => `      ${line}`)
+        .join('\n');
+      const context = instrValue.loweredFunc.func.context
+        .map(dep => printPlace(dep))
+        .join(',');
+      const aliasingEffects =
+        instrValue.loweredFunc.func.aliasingEffects
+          ?.map(printAliasingEffect)
+          ?.join(', ') ?? '';
+      value = `${kind} ${name} @context[${context}] @aliasingEffects=[${aliasingEffects}]\n${fn}`;
+      break;
+    }
+    case 'TaggedTemplateExpression': {
+      value = `${printPlace(instrValue.tag)}\`${instrValue.value.raw}\``;
+      break;
+    }
+    case 'LogicalExpression': {
+      value = `Logical ${printInstructionValue(instrValue.left)} ${
+        instrValue.operator
+      } ${printInstructionValue(instrValue.right)}`;
+      break;
+    }
+    case 'SequenceExpression': {
+      value = [
+        `Sequence`,
+        ...instrValue.instructions.map(
+          instr => `    ${printInstruction(instr)}`,
+        ),
+        `    ${printInstructionValue(instrValue.value)}`,
+      ].join('\n');
+      break;
+    }
+    case 'ConditionalExpression': {
+      value = `Ternary ${printInstructionValue(
+        instrValue.test,
+      )} ? ${printInstructionValue(
+        instrValue.consequent,
+      )} : ${printInstructionValue(instrValue.alternate)}`;
+      break;
+    }
+    case 'TemplateLiteral': {
+      value = '`';
+      CompilerError.invariant(
+        instrValue.subexprs.length === instrValue.quasis.length - 1,
+        {
+          reason: 'Bad assumption about quasi length.',
+          loc: instrValue.loc,
+        },
+      );
+      for (let i = 0; i < instrValue.subexprs.length; i++) {
+        value += instrValue.quasis[i].raw;
+        value += `\${${printPlace(instrValue.subexprs[i])}}`;
+      }
+      value += instrValue.quasis.at(-1)!.raw + '`';
+      break;
+    }
+    case 'LoadGlobal': {
+      switch (instrValue.binding.kind) {
+        case 'Global': {
+          value = `LoadGlobal(global) ${instrValue.binding.name}`;
+          break;
+        }
+        case 'ModuleLocal': {
+          value = `LoadGlobal(module) ${instrValue.binding.name}`;
+          break;
+        }
+        case 'ImportDefault': {
+          value = `LoadGlobal import ${instrValue.binding.name} from '${instrValue.binding.module}'`;
+          break;
+        }
+        case 'ImportNamespace': {
+          value = `LoadGlobal import * as ${instrValue.binding.name} from '${instrValue.binding.module}'`;
+          break;
+        }
+        case 'ImportSpecifier': {
+          if (instrValue.binding.imported !== instrValue.binding.name) {
+            value = `LoadGlobal import { ${instrValue.binding.imported} as ${instrValue.binding.name} } from '${instrValue.binding.module}'`;
+          } else {
+            value = `LoadGlobal import { ${instrValue.binding.name} } from '${instrValue.binding.module}'`;
+          }
+          break;
+        }
+        default: {
+          assertExhaustive(
+            instrValue.binding,
+            `Unexpected binding kind \`${(instrValue.binding as any).kind}\``,
+          );
+        }
+      }
+      break;
+    }
+    case 'StoreGlobal': {
+      value = `StoreGlobal ${instrValue.name} = ${printPlace(
+        instrValue.value,
+      )}`;
+      break;
+    }
+    case 'OptionalExpression': {
+      value = `OptionalExpression ${printInstructionValue(instrValue.value)}`;
+      break;
+    }
+    case 'RegExpLiteral': {
+      value = `RegExp /${instrValue.pattern}/${instrValue.flags}`;
+      break;
+    }
+    case 'MetaProperty': {
+      value = `MetaProperty ${instrValue.meta}.${instrValue.property}`;
+      break;
+    }
+    case 'Await': {
+      value = `Await ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'GetIterator': {
+      value = `GetIterator collection=${printPlace(instrValue.collection)}`;
+      break;
+    }
+    case 'IteratorNext': {
+      value = `IteratorNext iterator=${printPlace(
+        instrValue.iterator,
+      )} collection=${printPlace(instrValue.collection)}`;
+      break;
+    }
+    case 'NextPropertyOf': {
+      value = `NextPropertyOf ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'Debugger': {
+      value = `Debugger`;
+      break;
+    }
+    case 'PostfixUpdate': {
+      value = `PostfixUpdate ${printPlace(instrValue.lvalue)} = ${printPlace(
+        instrValue.value,
+      )} ${instrValue.operation}`;
+      break;
+    }
+    case 'PrefixUpdate': {
+      value = `PrefixUpdate ${printPlace(instrValue.lvalue)} = ${
+        instrValue.operation
+      } ${printPlace(instrValue.value)}`;
+      break;
+    }
+    case 'StartMemoize': {
+      value = `StartMemoize deps=${
+        instrValue.deps?.map(dep => printManualMemoDependency(dep, false)) ??
+        '(none)'
+      }`;
+      break;
+    }
+    case 'FinishMemoize': {
+      value = `FinishMemoize decl=${printPlace(instrValue.decl)}${instrValue.pruned ? ' pruned' : ''}`;
+      break;
+    }
+    default: {
+      assertExhaustive(
+        instrValue,
+        `Unexpected instruction kind '${
+          (instrValue as any as InstructionValue).kind
+        }'`,
+      );
+    }
+  }
+  return value;
+}
+
+function isMutable(range: MutableRange): boolean {
+  return range.end > range.start + 1;
+}
+
+const DEBUG_MUTABLE_RANGES = false;
+function printMutableRange(identifier: Identifier): string {
+  if (DEBUG_MUTABLE_RANGES) {
+    // if debugging, print both the identifier and scope range if they differ
+    const range = identifier.mutableRange;
+    const scopeRange = identifier.scope?.range;
+    if (
+      scopeRange != null &&
+      (scopeRange.start !== range.start || scopeRange.end !== range.end)
+    ) {
+      return `[${range.start}:${range.end}] scope=[${scopeRange.start}:${scopeRange.end}]`;
+    }
+    return isMutable(range) ? `[${range.start}:${range.end}]` : '';
+  }
+  // in non-debug mode, prefer the scope range if it exists
+  const range = identifier.scope?.range ?? identifier.mutableRange;
+  return isMutable(range) ? `[${range.start}:${range.end}]` : '';
+}
+
+export function printLValue(lval: LValue): string {
+  let lvalue = `${printPlace(lval.place)}`;
+
+  switch (lval.kind) {
+    case InstructionKind.Let: {
+      return `Let ${lvalue}`;
+    }
+    case InstructionKind.Const: {
+      return `Const ${lvalue}$`;
+    }
+    case InstructionKind.Reassign: {
+      return `Reassign ${lvalue}`;
+    }
+    case InstructionKind.Catch: {
+      return `Catch ${lvalue}`;
+    }
+    case InstructionKind.HoistedConst: {
+      return `HoistedConst ${lvalue}$`;
+    }
+    case InstructionKind.HoistedLet: {
+      return `HoistedLet ${lvalue}$`;
+    }
+    case InstructionKind.Function: {
+      return `Function ${lvalue}$`;
+    }
+    case InstructionKind.HoistedFunction: {
+      return `HoistedFunction ${lvalue}$`;
+    }
+    default: {
+      assertExhaustive(lval.kind, `Unexpected lvalue kind \`${lval.kind}\``);
+    }
+  }
+}
+
+export function printPattern(pattern: Pattern | Place | SpreadPattern): string {
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      return (
+        '[ ' +
+        pattern.items
+          .map(item => {
+            if (item.kind === 'Hole') {
+              return '<hole>';
+            }
+            return printPattern(item);
+          })
+          .join(', ') +
+        ' ]'
+      );
+    }
+    case 'ObjectPattern': {
+      return (
+        '{ ' +
+        pattern.properties
+          .map(item => {
+            switch (item.kind) {
+              case 'ObjectProperty': {
+                return `${printObjectPropertyKey(item.key)}: ${printPattern(
+                  item.place,
+                )}`;
+              }
+              case 'Spread': {
+                return printPattern(item);
+              }
+              default: {
+                assertExhaustive(item, 'Unexpected object property kind');
+              }
+            }
+          })
+          .join(', ') +
+        ' }'
+      );
+    }
+    case 'Spread': {
+      return `...${printPlace(pattern.place)}`;
+    }
+    case 'Identifier': {
+      return printPlace(pattern);
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function printPlace(place: Place): string {
+  const items = [
+    place.effect,
+    ' ',
+    printIdentifier(place.identifier),
+    printMutableRange(place.identifier),
+    printType(place.identifier.type),
+    place.reactive ? '{reactive}' : null,
+  ];
+  return items.filter(x => x != null).join('');
+}
+
+export function printIdentifier(id: Identifier): string {
+  return `${printName(id.name)}\$${id.id}${printScope(id.scope)}`;
+}
+
+function printName(name: IdentifierName | null): string {
+  if (name === null) {
+    return '';
+  }
+  return name.value;
+}
+
+function printScope(scope: ReactiveScope | null): string {
+  return `${scope !== null ? `_@${scope.id}` : ''}`;
+}
+
+export function printManualMemoDependency(
+  val: ManualMemoDependency,
+  nameOnly: boolean,
+): string {
+  let rootStr;
+  if (val.root.kind === 'Global') {
+    rootStr = val.root.identifierName;
+  } else {
+    CompilerError.invariant(val.root.value.identifier.name?.kind === 'named', {
+      reason: 'DepsValidation: expected named local variable in depslist',
+      loc: val.root.value.loc,
+    });
+    rootStr = nameOnly
+      ? val.root.value.identifier.name.value
+      : printIdentifier(val.root.value.identifier);
+  }
+  return `${rootStr}${val.path.map(v => `${v.optional ? '?.' : '.'}${v.property}`).join('')}`;
+}
+export function printType(type: Type): string {
+  if (type.kind === 'Type') return '';
+  // TODO(mofeiZ): add debugName for generated ids
+  if (type.kind === 'Object' && type.shapeId != null) {
+    return `:T${type.kind}<${type.shapeId}>`;
+  } else if (type.kind === 'Function' && type.shapeId != null) {
+    const returnType = printType(type.return);
+    return `:T${type.kind}<${type.shapeId}>()${returnType !== '' ? `:  ${returnType}` : ''}`;
+  } else {
+    return `:T${type.kind}`;
+  }
+}
+
+export function printSourceLocation(loc: SourceLocation): string {
+  if (typeof loc === 'symbol') {
+    return 'generated';
+  } else {
+    return `${loc.start.line}:${loc.start.column}:${loc.end.line}:${loc.end.column}`;
+  }
+}
+
+export function printSourceLocationLine(loc: SourceLocation): string {
+  if (typeof loc === 'symbol') {
+    return 'generated';
+  } else {
+    return `${loc.start.line}:${loc.end.line}`;
+  }
+}
+
+export function printAliases(aliases: DisjointSet<Identifier>): string {
+  const aliasSets = aliases.buildSets();
+
+  const items = [];
+  for (const aliasSet of aliasSets) {
+    items.push([...aliasSet].map(id => printIdentifier(id)).join(','));
+  }
+
+  return items.join('\n');
+}
+
+function getFunctionName(
+  instrValue: ObjectMethod | FunctionExpression,
+  defaultValue: string,
+): string {
+  switch (instrValue.kind) {
+    case 'FunctionExpression':
+      return instrValue.name ?? defaultValue;
+    case 'ObjectMethod':
+      return defaultValue;
+  }
+}
+
+export function printAliasingEffect(effect: AliasingEffect): string {
+  switch (effect.kind) {
+    case 'Assign': {
+      return `Assign ${printPlaceForAliasEffect(effect.into)} = ${printPlaceForAliasEffect(effect.from)}`;
+    }
+    case 'Alias': {
+      return `Alias ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;
+    }
+    case 'MaybeAlias': {
+      return `MaybeAlias ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;
+    }
+    case 'Capture': {
+      return `Capture ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;
+    }
+    case 'ImmutableCapture': {
+      return `ImmutableCapture ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;
+    }
+    case 'Create': {
+      return `Create ${printPlaceForAliasEffect(effect.into)} = ${effect.value}`;
+    }
+    case 'CreateFrom': {
+      return `Create ${printPlaceForAliasEffect(effect.into)} = kindOf(${printPlaceForAliasEffect(effect.from)})`;
+    }
+    case 'CreateFunction': {
+      return `Function ${printPlaceForAliasEffect(effect.into)} = Function captures=[${effect.captures.map(printPlaceForAliasEffect).join(', ')}]`;
+    }
+    case 'Apply': {
+      const receiverCallee =
+        effect.receiver.identifier.id === effect.function.identifier.id
+          ? printPlaceForAliasEffect(effect.receiver)
+          : `${printPlaceForAliasEffect(effect.receiver)}.${printPlaceForAliasEffect(effect.function)}`;
+      const args = effect.args
+        .map(arg => {
+          if (arg.kind === 'Identifier') {
+            return printPlaceForAliasEffect(arg);
+          } else if (arg.kind === 'Hole') {
+            return ' ';
+          }
+          return `...${printPlaceForAliasEffect(arg.place)}`;
+        })
+        .join(', ');
+      let signature = '';
+      if (effect.signature != null) {
+        if (effect.signature.aliasing != null) {
+          signature = printAliasingSignature(effect.signature.aliasing);
+        } else {
+          signature = JSON.stringify(effect.signature, null, 2);
+        }
+      }
+      return `Apply ${printPlaceForAliasEffect(effect.into)} = ${receiverCallee}(${args})${signature != '' ? '\n     ' : ''}${signature}`;
+    }
+    case 'Freeze': {
+      return `Freeze ${printPlaceForAliasEffect(effect.value)} ${effect.reason}`;
+    }
+    case 'Mutate':
+    case 'MutateConditionally':
+    case 'MutateTransitive':
+    case 'MutateTransitiveConditionally': {
+      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}${effect.kind === 'Mutate' && effect.reason?.kind === 'AssignCurrentProperty' ? ' (assign `.current`)' : ''}`;
+    }
+    case 'MutateFrozen': {
+      return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
+    }
+    case 'MutateGlobal': {
+      return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
+    }
+    case 'Impure': {
+      return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
+    }
+    case 'Render': {
+      return `Render ${printPlaceForAliasEffect(effect.place)}`;
+    }
+    default: {
+      assertExhaustive(effect, `Unexpected kind '${(effect as any).kind}'`);
+    }
+  }
+}
+
+function printPlaceForAliasEffect(place: Place): string {
+  return printIdentifier(place.identifier);
+}
+
+export function printAliasingSignature(signature: AliasingSignature): string {
+  const tokens: Array<string> = ['function '];
+  if (signature.temporaries.length !== 0) {
+    tokens.push('<');
+    tokens.push(
+      signature.temporaries.map(temp => `$${temp.identifier.id}`).join(', '),
+    );
+    tokens.push('>');
+  }
+  tokens.push('(');
+  tokens.push('this=$' + String(signature.receiver));
+  for (const param of signature.params) {
+    tokens.push(', $' + String(param));
+  }
+  if (signature.rest != null) {
+    tokens.push(`, ...$${String(signature.rest)}`);
+  }
+  tokens.push('): ');
+  tokens.push('$' + String(signature.returns) + ':');
+  for (const effect of signature.effects) {
+    tokens.push('\n  ' + printAliasingEffect(effect));
+  }
+  return tokens.join('');
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PropagateScopeDependenciesHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PropagateScopeDependenciesHIR.ts
new file mode 100644
index 00000000000..91b7712b881
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PropagateScopeDependenciesHIR.ts
@@ -0,0 +1,834 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ScopeId,
+  HIRFunction,
+  Place,
+  Instruction,
+  ReactiveScopeDependency,
+  Identifier,
+  ReactiveScope,
+  isObjectMethodType,
+  isRefValueType,
+  isUseRefType,
+  makeInstructionId,
+  InstructionId,
+  InstructionKind,
+  GeneratedSource,
+  DeclarationId,
+  areEqualPaths,
+  IdentifierId,
+  Terminal,
+  InstructionValue,
+  LoadContext,
+  TInstruction,
+  FunctionExpression,
+  ObjectMethod,
+  PropertyLiteral,
+  convertHoistedLValueKind,
+} from './HIR';
+import {
+  collectHoistablePropertyLoads,
+  keyByScopeId,
+} from './CollectHoistablePropertyLoads';
+import {
+  ScopeBlockTraversal,
+  eachInstructionOperand,
+  eachInstructionValueOperand,
+  eachPatternOperand,
+  eachTerminalOperand,
+} from './visitors';
+import {Stack, empty} from '../Utils/Stack';
+import {CompilerError} from '../CompilerError';
+import {Iterable_some} from '../Utils/utils';
+import {ReactiveScopeDependencyTreeHIR} from './DeriveMinimalDependenciesHIR';
+import {collectOptionalChainSidemap} from './CollectOptionalChainDependencies';
+
+export function propagateScopeDependenciesHIR(fn: HIRFunction): void {
+  const usedOutsideDeclaringScope =
+    findTemporariesUsedOutsideDeclaringScope(fn);
+  const temporaries = collectTemporariesSidemap(fn, usedOutsideDeclaringScope);
+  const {
+    temporariesReadInOptional,
+    processedInstrsInOptional,
+    hoistableObjects,
+  } = collectOptionalChainSidemap(fn);
+
+  const hoistablePropertyLoads = keyByScopeId(
+    fn,
+    collectHoistablePropertyLoads(fn, temporaries, hoistableObjects),
+  );
+
+  const scopeDeps = collectDependencies(
+    fn,
+    usedOutsideDeclaringScope,
+    new Map([...temporaries, ...temporariesReadInOptional]),
+    processedInstrsInOptional,
+  );
+
+  /**
+   * Derive the minimal set of hoistable dependencies for each scope.
+   */
+  for (const [scope, deps] of scopeDeps) {
+    if (deps.length === 0) {
+      continue;
+    }
+
+    /**
+     * Step 1: Find hoistable accesses, given the basic block in which the scope
+     * begins.
+     */
+    const hoistables = hoistablePropertyLoads.get(scope.id);
+    CompilerError.invariant(hoistables != null, {
+      reason: '[PropagateScopeDependencies] Scope not found in tracked blocks',
+      loc: GeneratedSource,
+    });
+    /**
+     * Step 2: Calculate hoistable dependencies.
+     */
+    const tree = new ReactiveScopeDependencyTreeHIR(
+      [...hoistables.assumedNonNullObjects].map(o => o.fullPath),
+    );
+    for (const dep of deps) {
+      tree.addDependency({...dep});
+    }
+
+    /**
+     * Step 3: Reduce dependencies to a minimal set.
+     */
+    const candidates = tree.deriveMinimalDependencies();
+    for (const candidateDep of candidates) {
+      if (
+        !Iterable_some(
+          scope.dependencies,
+          existingDep =>
+            existingDep.identifier.declarationId ===
+              candidateDep.identifier.declarationId &&
+            areEqualPaths(existingDep.path, candidateDep.path),
+        )
+      )
+        scope.dependencies.add(candidateDep);
+    }
+  }
+}
+
+export function findTemporariesUsedOutsideDeclaringScope(
+  fn: HIRFunction,
+): ReadonlySet<DeclarationId> {
+  /*
+   * tracks all relevant LoadLocal and PropertyLoad lvalues
+   * and the scope where they are defined
+   */
+  const declarations = new Map<DeclarationId, ScopeId>();
+  const prunedScopes = new Set<ScopeId>();
+  const scopeTraversal = new ScopeBlockTraversal();
+  const usedOutsideDeclaringScope = new Set<DeclarationId>();
+
+  function handlePlace(place: Place): void {
+    const declaringScope = declarations.get(place.identifier.declarationId);
+    if (
+      declaringScope != null &&
+      !scopeTraversal.isScopeActive(declaringScope) &&
+      !prunedScopes.has(declaringScope)
+    ) {
+      // Declaring scope is not active === used outside declaring scope
+      usedOutsideDeclaringScope.add(place.identifier.declarationId);
+    }
+  }
+
+  function handleInstruction(instr: Instruction): void {
+    const scope = scopeTraversal.currentScope;
+    if (scope == null || prunedScopes.has(scope)) {
+      return;
+    }
+    switch (instr.value.kind) {
+      case 'LoadLocal':
+      case 'LoadContext':
+      case 'PropertyLoad': {
+        declarations.set(instr.lvalue.identifier.declarationId, scope);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  for (const [blockId, block] of fn.body.blocks) {
+    scopeTraversal.recordScopes(block);
+    const scopeStartInfo = scopeTraversal.blockInfos.get(blockId);
+    if (scopeStartInfo?.kind === 'begin' && scopeStartInfo.pruned) {
+      prunedScopes.add(scopeStartInfo.scope.id);
+    }
+    for (const instr of block.instructions) {
+      for (const place of eachInstructionOperand(instr)) {
+        handlePlace(place);
+      }
+      handleInstruction(instr);
+    }
+
+    for (const place of eachTerminalOperand(block.terminal)) {
+      handlePlace(place);
+    }
+  }
+  return usedOutsideDeclaringScope;
+}
+
+/**
+ * @returns mapping of LoadLocal and PropertyLoad to the source of the load.
+ * ```js
+ * // source
+ * foo(a.b);
+ *
+ * // HIR: a potential sidemap is {0: a, 1: a.b, 2: foo}
+ * $0 = LoadLocal 'a'
+ * $1 = PropertyLoad $0, 'b'
+ * $2 = LoadLocal 'foo'
+ * $3 = CallExpression $2($1)
+ * ```
+ * @param usedOutsideDeclaringScope is used to check the correctness of
+ * reordering LoadLocal / PropertyLoad calls. We only track a LoadLocal /
+ * PropertyLoad in the returned temporaries map if reordering the read (from the
+ * time-of-load to time-of-use) is valid.
+ *
+ * If a LoadLocal or PropertyLoad instruction is within the reactive scope range
+ * (a proxy for mutable range) of the load source, later instructions may
+ * reassign / mutate the source value. Since it's incorrect to reorder these
+ * load instructions to after their scope ranges, we also do not store them in
+ * identifier sidemaps.
+ *
+ * Take this example (from fixture
+ * `evaluation-order-mutate-call-after-dependency-load`)
+ * ```js
+ * // source
+ * function useFoo(arg) {
+ *   const arr = [1, 2, 3, ...arg];
+ *   return [
+ *     arr.length,
+ *     arr.push(0)
+ *   ];
+ * }
+ *
+ * // IR pseudocode
+ * scope @0 {
+ *   $0 = arr = ArrayExpression [1, 2, 3, ...arg]
+ *   $1 = arr.length
+ *   $2 = arr.push(0)
+ * }
+ * scope @1 {
+ *   $3 = ArrayExpression [$1, $2]
+ * }
+ * ```
+ * Here, it's invalid for scope@1 to take `arr.length` as a dependency instead
+ * of $1, as the evaluation of `arr.length` changes between instructions $1 and
+ * $3. We do not track $1 -> arr.length in this case.
+ */
+export function collectTemporariesSidemap(
+  fn: HIRFunction,
+  usedOutsideDeclaringScope: ReadonlySet<DeclarationId>,
+): ReadonlyMap<IdentifierId, ReactiveScopeDependency> {
+  const temporaries = new Map();
+  collectTemporariesSidemapImpl(
+    fn,
+    usedOutsideDeclaringScope,
+    temporaries,
+    null,
+  );
+  return temporaries;
+}
+
+function isLoadContextMutable(
+  instrValue: InstructionValue,
+  id: InstructionId,
+): instrValue is LoadContext {
+  if (instrValue.kind === 'LoadContext') {
+    /**
+     * Not all context variables currently have scopes due to limitations of
+     * mutability analysis for function expressions.
+     *
+     * Currently, many function expressions references are inferred to be
+     * 'Read' | 'Freeze' effects which don't replay mutable effects of captured
+     * context.
+     */
+    return (
+      instrValue.place.identifier.scope != null &&
+      id >= instrValue.place.identifier.scope.range.end
+    );
+  }
+  return false;
+}
+/**
+ * Recursive collect a sidemap of all `LoadLocal` and `PropertyLoads` with a
+ * function and all nested functions.
+ *
+ * Note that IdentifierIds are currently unique, so we can use a single
+ * Map<IdentifierId, ...> across all nested functions.
+ */
+function collectTemporariesSidemapImpl(
+  fn: HIRFunction,
+  usedOutsideDeclaringScope: ReadonlySet<DeclarationId>,
+  temporaries: Map<IdentifierId, ReactiveScopeDependency>,
+  innerFnContext: {instrId: InstructionId} | null,
+): void {
+  for (const [_, block] of fn.body.blocks) {
+    for (const {value, lvalue, id: origInstrId} of block.instructions) {
+      const instrId =
+        innerFnContext != null ? innerFnContext.instrId : origInstrId;
+      const usedOutside = usedOutsideDeclaringScope.has(
+        lvalue.identifier.declarationId,
+      );
+
+      if (value.kind === 'PropertyLoad' && !usedOutside) {
+        if (
+          innerFnContext == null ||
+          temporaries.has(value.object.identifier.id)
+        ) {
+          /**
+           * All dependencies of a inner / nested function must have a base
+           * identifier from the outermost component / hook. This is because the
+           * compiler cannot break an inner function into multiple granular
+           * scopes.
+           */
+          const property = getProperty(
+            value.object,
+            value.property,
+            false,
+            temporaries,
+          );
+          temporaries.set(lvalue.identifier.id, property);
+        }
+      } else if (
+        (value.kind === 'LoadLocal' || isLoadContextMutable(value, instrId)) &&
+        lvalue.identifier.name == null &&
+        value.place.identifier.name !== null &&
+        !usedOutside
+      ) {
+        if (
+          innerFnContext == null ||
+          fn.context.some(
+            context => context.identifier.id === value.place.identifier.id,
+          )
+        ) {
+          temporaries.set(lvalue.identifier.id, {
+            identifier: value.place.identifier,
+            reactive: value.place.reactive,
+            path: [],
+          });
+        }
+      } else if (
+        value.kind === 'FunctionExpression' ||
+        value.kind === 'ObjectMethod'
+      ) {
+        collectTemporariesSidemapImpl(
+          value.loweredFunc.func,
+          usedOutsideDeclaringScope,
+          temporaries,
+          innerFnContext ?? {instrId},
+        );
+      }
+    }
+  }
+}
+
+function getProperty(
+  object: Place,
+  propertyName: PropertyLiteral,
+  optional: boolean,
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+): ReactiveScopeDependency {
+  /*
+   * (1) Get the base object either from the temporary sidemap (e.g. a LoadLocal)
+   * or a deep copy of an existing property dependency.
+   *  Example 1:
+   *    $0 = LoadLocal x
+   *    $1 = PropertyLoad $0.y
+   *  getProperty($0, ...) -> resolvedObject = x, resolvedDependency = null
+   *
+   *  Example 2:
+   *    $0 = LoadLocal x
+   *    $1 = PropertyLoad $0.y
+   *    $2 = PropertyLoad $1.z
+   *  getProperty($1, ...) -> resolvedObject = null, resolvedDependency = x.y
+   *
+   *  Example 3:
+   *    $0 = Call(...)
+   *    $1 = PropertyLoad $0.y
+   *  getProperty($0, ...) -> resolvedObject = null, resolvedDependency = null
+   */
+  const resolvedDependency = temporaries.get(object.identifier.id);
+
+  /**
+   * (2) Push the last PropertyLoad
+   * TODO(mofeiZ): understand optional chaining
+   */
+  let property: ReactiveScopeDependency;
+  if (resolvedDependency == null) {
+    property = {
+      identifier: object.identifier,
+      reactive: object.reactive,
+      path: [{property: propertyName, optional}],
+    };
+  } else {
+    property = {
+      identifier: resolvedDependency.identifier,
+      reactive: resolvedDependency.reactive,
+      path: [...resolvedDependency.path, {property: propertyName, optional}],
+    };
+  }
+  return property;
+}
+
+type Decl = {
+  id: InstructionId;
+  scope: Stack<ReactiveScope>;
+};
+
+export class DependencyCollectionContext {
+  #declarations: Map<DeclarationId, Decl> = new Map();
+  #reassignments: Map<Identifier, Decl> = new Map();
+
+  #scopes: Stack<ReactiveScope> = empty();
+  // Reactive dependencies used in the current reactive scope.
+  #dependencies: Stack<Array<ReactiveScopeDependency>> = empty();
+  deps: Map<ReactiveScope, Array<ReactiveScopeDependency>> = new Map();
+
+  #temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>;
+  #temporariesUsedOutsideScope: ReadonlySet<DeclarationId>;
+  #processedInstrsInOptional: ReadonlySet<Instruction | Terminal>;
+
+  /**
+   * Tracks the traversal state. See Context.declare for explanation of why this
+   * is needed.
+   */
+  #innerFnContext: {outerInstrId: InstructionId} | null = null;
+
+  constructor(
+    temporariesUsedOutsideScope: ReadonlySet<DeclarationId>,
+    temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+    processedInstrsInOptional: ReadonlySet<Instruction | Terminal>,
+  ) {
+    this.#temporariesUsedOutsideScope = temporariesUsedOutsideScope;
+    this.#temporaries = temporaries;
+    this.#processedInstrsInOptional = processedInstrsInOptional;
+  }
+
+  enterScope(scope: ReactiveScope): void {
+    // Set context for new scope
+    this.#dependencies = this.#dependencies.push([]);
+    this.#scopes = this.#scopes.push(scope);
+  }
+
+  exitScope(scope: ReactiveScope, pruned: boolean): void {
+    // Save dependencies we collected from the exiting scope
+    const scopedDependencies = this.#dependencies.value;
+    CompilerError.invariant(scopedDependencies != null, {
+      reason: '[PropagateScopeDeps]: Unexpected scope mismatch',
+      loc: scope.loc,
+    });
+
+    // Restore context of previous scope
+    this.#scopes = this.#scopes.pop();
+    this.#dependencies = this.#dependencies.pop();
+
+    /*
+     * Collect dependencies we recorded for the exiting scope and propagate
+     * them upward using the same rules as normal dependency collection.
+     * Child scopes may have dependencies on values created within the outer
+     * scope, which necessarily cannot be dependencies of the outer scope.
+     */
+    for (const dep of scopedDependencies) {
+      if (this.#checkValidDependency(dep)) {
+        this.#dependencies.value?.push(dep);
+      }
+    }
+
+    if (!pruned) {
+      this.deps.set(scope, scopedDependencies);
+    }
+  }
+
+  isUsedOutsideDeclaringScope(place: Place): boolean {
+    return this.#temporariesUsedOutsideScope.has(
+      place.identifier.declarationId,
+    );
+  }
+
+  /*
+   * Records where a value was declared, and optionally, the scope where the
+   * value originated from. This is later used to determine if a dependency
+   * should be added to a scope; if the current scope we are visiting is the
+   * same scope where the value originates, it can't be a dependency on itself.
+   *
+   * Note that we do not track declarations or reassignments within inner
+   * functions for the following reasons:
+   *   - inner functions cannot be split by scope boundaries and are guaranteed
+   *     to consume their own declarations
+   *   - reassignments within inner functions are tracked as context variables,
+   *     which already have extended mutable ranges to account for reassignments
+   *   - *most importantly* it's currently simply incorrect to compare inner
+   *     function instruction ids (tracked by `decl`) with outer ones (as stored
+   *     by root identifier mutable ranges).
+   */
+  declare(identifier: Identifier, decl: Decl): void {
+    if (this.#innerFnContext != null) return;
+    if (!this.#declarations.has(identifier.declarationId)) {
+      this.#declarations.set(identifier.declarationId, decl);
+    }
+    this.#reassignments.set(identifier, decl);
+  }
+  hasDeclared(identifier: Identifier): boolean {
+    return this.#declarations.has(identifier.declarationId);
+  }
+
+  // Checks if identifier is a valid dependency in the current scope
+  #checkValidDependency(maybeDependency: ReactiveScopeDependency): boolean {
+    // ref value is not a valid dep
+    if (isRefValueType(maybeDependency.identifier)) {
+      return false;
+    }
+
+    /*
+     * object methods are not deps because they will be codegen'ed back in to
+     * the object literal.
+     */
+    if (isObjectMethodType(maybeDependency.identifier)) {
+      return false;
+    }
+
+    const identifier = maybeDependency.identifier;
+    /*
+     * If this operand is used in a scope, has a dynamic value, and was defined
+     * before this scope, then its a dependency of the scope.
+     */
+    const currentDeclaration =
+      this.#reassignments.get(identifier) ??
+      this.#declarations.get(identifier.declarationId);
+    const currentScope = this.currentScope.value;
+    return (
+      currentScope != null &&
+      currentDeclaration !== undefined &&
+      currentDeclaration.id < currentScope.range.start
+    );
+  }
+
+  #isScopeActive(scope: ReactiveScope): boolean {
+    if (this.#scopes === null) {
+      return false;
+    }
+    return this.#scopes.find(state => state === scope);
+  }
+
+  get currentScope(): Stack<ReactiveScope> {
+    return this.#scopes;
+  }
+
+  visitOperand(place: Place): void {
+    /*
+     * if this operand is a temporary created for a property load, try to resolve it to
+     * the expanded Place. Fall back to using the operand as-is.
+     */
+    this.visitDependency(
+      this.#temporaries.get(place.identifier.id) ?? {
+        identifier: place.identifier,
+        reactive: place.reactive,
+        path: [],
+      },
+    );
+  }
+
+  visitProperty(
+    object: Place,
+    property: PropertyLiteral,
+    optional: boolean,
+  ): void {
+    const nextDependency = getProperty(
+      object,
+      property,
+      optional,
+      this.#temporaries,
+    );
+    this.visitDependency(nextDependency);
+  }
+
+  visitDependency(maybeDependency: ReactiveScopeDependency): void {
+    /*
+     * Any value used after its originally defining scope has concluded must be added as an
+     * output of its defining scope. Regardless of whether its a const or not,
+     * some later code needs access to the value. If the current
+     * scope we are visiting is the same scope where the value originates, it can't be a dependency
+     * on itself.
+     */
+
+    /*
+     * if originalDeclaration is undefined here, then this is not a local var
+     * (all decls e.g. `let x;` should be initialized in BuildHIR)
+     */
+    const originalDeclaration = this.#declarations.get(
+      maybeDependency.identifier.declarationId,
+    );
+    if (
+      originalDeclaration !== undefined &&
+      originalDeclaration.scope.value !== null
+    ) {
+      originalDeclaration.scope.each(scope => {
+        if (
+          !this.#isScopeActive(scope) &&
+          !Iterable_some(
+            scope.declarations.values(),
+            decl =>
+              decl.identifier.declarationId ===
+              maybeDependency.identifier.declarationId,
+          )
+        ) {
+          scope.declarations.set(maybeDependency.identifier.id, {
+            identifier: maybeDependency.identifier,
+            scope: originalDeclaration.scope.value!,
+          });
+        }
+      });
+    }
+
+    // ref.current access is not a valid dep
+    if (
+      isUseRefType(maybeDependency.identifier) &&
+      maybeDependency.path.at(0)?.property === 'current'
+    ) {
+      maybeDependency = {
+        identifier: maybeDependency.identifier,
+        reactive: maybeDependency.reactive,
+        path: [],
+      };
+    }
+    if (this.#checkValidDependency(maybeDependency)) {
+      this.#dependencies.value!.push(maybeDependency);
+    }
+  }
+
+  /*
+   * Record a variable that is declared in some other scope and that is being reassigned in the
+   * current one as a {@link ReactiveScope.reassignments}
+   */
+  visitReassignment(place: Place): void {
+    const currentScope = this.currentScope.value;
+    if (
+      currentScope != null &&
+      !Iterable_some(
+        currentScope.reassignments,
+        identifier =>
+          identifier.declarationId === place.identifier.declarationId,
+      ) &&
+      this.#checkValidDependency({
+        identifier: place.identifier,
+        reactive: place.reactive,
+        path: [],
+      })
+    ) {
+      currentScope.reassignments.add(place.identifier);
+    }
+  }
+  enterInnerFn<T>(
+    innerFn: TInstruction<FunctionExpression> | TInstruction<ObjectMethod>,
+    cb: () => T,
+  ): T {
+    const prevContext = this.#innerFnContext;
+    this.#innerFnContext = this.#innerFnContext ?? {outerInstrId: innerFn.id};
+    const result = cb();
+    this.#innerFnContext = prevContext;
+    return result;
+  }
+
+  /**
+   * Skip dependencies that are subexpressions of other dependencies. e.g. if a
+   * dependency is tracked in the temporaries sidemap, it can be added at
+   * site-of-use
+   */
+  isDeferredDependency(
+    instr:
+      | {kind: HIRValue.Instruction; value: Instruction}
+      | {kind: HIRValue.Terminal; value: Terminal},
+  ): boolean {
+    return (
+      this.#processedInstrsInOptional.has(instr.value) ||
+      (instr.kind === HIRValue.Instruction &&
+        this.#temporaries.has(instr.value.lvalue.identifier.id))
+    );
+  }
+}
+enum HIRValue {
+  Instruction = 1,
+  Terminal,
+}
+
+export function handleInstruction(
+  instr: Instruction,
+  context: DependencyCollectionContext,
+): void {
+  const {id, value, lvalue} = instr;
+  context.declare(lvalue.identifier, {
+    id,
+    scope: context.currentScope,
+  });
+  if (
+    context.isDeferredDependency({kind: HIRValue.Instruction, value: instr})
+  ) {
+    return;
+  }
+  if (value.kind === 'PropertyLoad') {
+    context.visitProperty(value.object, value.property, false);
+  } else if (value.kind === 'StoreLocal') {
+    context.visitOperand(value.value);
+    if (value.lvalue.kind === InstructionKind.Reassign) {
+      context.visitReassignment(value.lvalue.place);
+    }
+    context.declare(value.lvalue.place.identifier, {
+      id,
+      scope: context.currentScope,
+    });
+  } else if (value.kind === 'DeclareLocal' || value.kind === 'DeclareContext') {
+    /*
+     * Some variables may be declared and never initialized. We need to retain
+     * (and hoist) these declarations if they are included in a reactive scope.
+     * One approach is to simply add all `DeclareLocal`s as scope declarations.
+     *
+     * Context variables with hoisted declarations only become live after their
+     * first assignment. We only declare real DeclareLocal / DeclareContext
+     * instructions (not hoisted ones) to avoid generating dependencies on
+     * hoisted declarations.
+     */
+    if (convertHoistedLValueKind(value.lvalue.kind) === null) {
+      context.declare(value.lvalue.place.identifier, {
+        id,
+        scope: context.currentScope,
+      });
+    }
+  } else if (value.kind === 'Destructure') {
+    context.visitOperand(value.value);
+    for (const place of eachPatternOperand(value.lvalue.pattern)) {
+      if (value.lvalue.kind === InstructionKind.Reassign) {
+        context.visitReassignment(place);
+      }
+      context.declare(place.identifier, {
+        id,
+        scope: context.currentScope,
+      });
+    }
+  } else if (value.kind === 'StoreContext') {
+    /**
+     * Some StoreContext variables have hoisted declarations. If we're storing
+     * to a context variable that hasn't yet been declared, the StoreContext is
+     * the declaration.
+     * (see corresponding logic in PruneHoistedContext)
+     */
+    if (
+      !context.hasDeclared(value.lvalue.place.identifier) ||
+      value.lvalue.kind !== InstructionKind.Reassign
+    ) {
+      context.declare(value.lvalue.place.identifier, {
+        id,
+        scope: context.currentScope,
+      });
+    }
+
+    for (const operand of eachInstructionValueOperand(value)) {
+      context.visitOperand(operand);
+    }
+  } else {
+    for (const operand of eachInstructionValueOperand(value)) {
+      context.visitOperand(operand);
+    }
+  }
+}
+
+function collectDependencies(
+  fn: HIRFunction,
+  usedOutsideDeclaringScope: ReadonlySet<DeclarationId>,
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+  processedInstrsInOptional: ReadonlySet<Instruction | Terminal>,
+): Map<ReactiveScope, Array<ReactiveScopeDependency>> {
+  const context = new DependencyCollectionContext(
+    usedOutsideDeclaringScope,
+    temporaries,
+    processedInstrsInOptional,
+  );
+
+  for (const param of fn.params) {
+    if (param.kind === 'Identifier') {
+      context.declare(param.identifier, {
+        id: makeInstructionId(0),
+        scope: empty(),
+      });
+    } else {
+      context.declare(param.place.identifier, {
+        id: makeInstructionId(0),
+        scope: empty(),
+      });
+    }
+  }
+
+  const scopeTraversal = new ScopeBlockTraversal();
+
+  const handleFunction = (fn: HIRFunction): void => {
+    for (const [blockId, block] of fn.body.blocks) {
+      scopeTraversal.recordScopes(block);
+      const scopeBlockInfo = scopeTraversal.blockInfos.get(blockId);
+      if (scopeBlockInfo?.kind === 'begin') {
+        context.enterScope(scopeBlockInfo.scope);
+      } else if (scopeBlockInfo?.kind === 'end') {
+        context.exitScope(scopeBlockInfo.scope, scopeBlockInfo.pruned);
+      }
+      // Record referenced optional chains in phis
+      for (const phi of block.phis) {
+        for (const operand of phi.operands) {
+          const maybeOptionalChain = temporaries.get(operand[1].identifier.id);
+          if (maybeOptionalChain) {
+            context.visitDependency(maybeOptionalChain);
+          }
+        }
+      }
+      for (const instr of block.instructions) {
+        if (
+          instr.value.kind === 'FunctionExpression' ||
+          instr.value.kind === 'ObjectMethod'
+        ) {
+          context.declare(instr.lvalue.identifier, {
+            id: instr.id,
+            scope: context.currentScope,
+          });
+          /**
+           * Recursively visit the inner function to extract dependencies there
+           */
+          const innerFn = instr.value.loweredFunc.func;
+          context.enterInnerFn(
+            instr as
+              | TInstruction<FunctionExpression>
+              | TInstruction<ObjectMethod>,
+            () => {
+              handleFunction(innerFn);
+            },
+          );
+        } else {
+          handleInstruction(instr, context);
+        }
+      }
+
+      if (
+        !context.isDeferredDependency({
+          kind: HIRValue.Terminal,
+          value: block.terminal,
+        })
+      ) {
+        for (const place of eachTerminalOperand(block.terminal)) {
+          context.visitOperand(place);
+        }
+      }
+    }
+  };
+
+  handleFunction(fn);
+  return context.deps;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PruneUnusedLabelsHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PruneUnusedLabelsHIR.ts
new file mode 100644
index 00000000000..f0c488c3e1e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PruneUnusedLabelsHIR.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {BlockId, GotoVariant, HIRFunction} from './HIR';
+
+export function pruneUnusedLabelsHIR(fn: HIRFunction): void {
+  const merged: Array<{
+    label: BlockId;
+    next: BlockId;
+    fallthrough: BlockId;
+  }> = [];
+  const rewrites: Map<BlockId, BlockId> = new Map();
+  for (const [blockId, block] of fn.body.blocks) {
+    const terminal = block.terminal;
+    if (terminal.kind === 'label') {
+      const {block: nextId, fallthrough: fallthroughId} = terminal;
+      const next = fn.body.blocks.get(nextId)!;
+      const fallthrough = fn.body.blocks.get(fallthroughId)!;
+      if (
+        next.terminal.kind === 'goto' &&
+        next.terminal.variant === GotoVariant.Break &&
+        next.terminal.block === fallthroughId
+      ) {
+        if (next.kind === 'block' && fallthrough.kind === 'block') {
+          // Only merge normal block types
+          merged.push({
+            label: blockId,
+            next: nextId,
+            fallthrough: fallthroughId,
+          });
+        }
+      }
+    }
+  }
+
+  for (const {
+    label: originalLabelId,
+    next: nextId,
+    fallthrough: fallthroughId,
+  } of merged) {
+    const labelId = rewrites.get(originalLabelId) ?? originalLabelId;
+    const label = fn.body.blocks.get(labelId)!;
+    const next = fn.body.blocks.get(nextId)!;
+    const fallthrough = fn.body.blocks.get(fallthroughId)!;
+
+    // Merge block and fallthrough
+    CompilerError.invariant(
+      next.phis.size === 0 && fallthrough.phis.size === 0,
+      {
+        reason: 'Unexpected phis when merging label blocks',
+        loc: label.terminal.loc,
+      },
+    );
+
+    CompilerError.invariant(
+      next.preds.size === 1 &&
+        fallthrough.preds.size === 1 &&
+        next.preds.has(originalLabelId) &&
+        fallthrough.preds.has(nextId),
+      {
+        reason: 'Unexpected block predecessors when merging label blocks',
+        loc: label.terminal.loc,
+      },
+    );
+
+    label.instructions.push(...next.instructions, ...fallthrough.instructions);
+    label.terminal = fallthrough.terminal;
+    fn.body.blocks.delete(nextId);
+    fn.body.blocks.delete(fallthroughId);
+    rewrites.set(fallthroughId, labelId);
+  }
+
+  for (const [_, block] of fn.body.blocks) {
+    for (const pred of block.preds) {
+      const rewritten = rewrites.get(pred);
+      if (rewritten != null) {
+        block.preds.delete(pred);
+        block.preds.add(rewritten);
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ScopeDependencyUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ScopeDependencyUtils.ts
new file mode 100644
index 00000000000..067e7a716ab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ScopeDependencyUtils.ts
@@ -0,0 +1,281 @@
+import {
+  Place,
+  ReactiveScopeDependency,
+  Identifier,
+  makeInstructionId,
+  InstructionKind,
+  GeneratedSource,
+  BlockId,
+  makeTemporaryIdentifier,
+  Effect,
+  GotoVariant,
+  HIR,
+} from './HIR';
+import {CompilerError} from '../CompilerError';
+import {Environment} from './Environment';
+import HIRBuilder from './HIRBuilder';
+import {lowerValueToTemporary} from './BuildHIR';
+
+type DependencyInstructions = {
+  place: Place;
+  value: HIR;
+  exitBlockId: BlockId;
+};
+
+export function buildDependencyInstructions(
+  dep: ReactiveScopeDependency,
+  env: Environment,
+): DependencyInstructions {
+  const builder = new HIRBuilder(env, {
+    entryBlockKind: 'value',
+  });
+  let dependencyValue: Identifier;
+  if (dep.path.every(path => !path.optional)) {
+    dependencyValue = writeNonOptionalDependency(dep, env, builder);
+  } else {
+    dependencyValue = writeOptionalDependency(dep, builder, null);
+  }
+
+  const exitBlockId = builder.terminate(
+    {
+      kind: 'unsupported',
+      loc: GeneratedSource,
+      id: makeInstructionId(0),
+    },
+    null,
+  );
+  return {
+    place: {
+      kind: 'Identifier',
+      identifier: dependencyValue,
+      effect: Effect.Freeze,
+      reactive: dep.reactive,
+      loc: GeneratedSource,
+    },
+    value: builder.build(),
+    exitBlockId,
+  };
+}
+
+/**
+ * Write instructions for a simple dependency (without optional chains)
+ */
+function writeNonOptionalDependency(
+  dep: ReactiveScopeDependency,
+  env: Environment,
+  builder: HIRBuilder,
+): Identifier {
+  const loc = dep.identifier.loc;
+  let curr: Identifier = makeTemporaryIdentifier(env.nextIdentifierId, loc);
+  builder.push({
+    lvalue: {
+      identifier: curr,
+      kind: 'Identifier',
+      effect: Effect.Mutate,
+      reactive: dep.reactive,
+      loc,
+    },
+    value: {
+      kind: 'LoadLocal',
+      place: {
+        identifier: dep.identifier,
+        kind: 'Identifier',
+        effect: Effect.Freeze,
+        reactive: dep.reactive,
+        loc,
+      },
+      loc,
+    },
+    id: makeInstructionId(1),
+    loc: loc,
+    effects: null,
+  });
+
+  /**
+   * Iteratively build up dependency instructions by reading from the last written
+   * instruction.
+   */
+  for (const path of dep.path) {
+    const next = makeTemporaryIdentifier(env.nextIdentifierId, loc);
+    builder.push({
+      lvalue: {
+        identifier: next,
+        kind: 'Identifier',
+        effect: Effect.Mutate,
+        reactive: dep.reactive,
+        loc,
+      },
+      value: {
+        kind: 'PropertyLoad',
+        object: {
+          identifier: curr,
+          kind: 'Identifier',
+          effect: Effect.Freeze,
+          reactive: dep.reactive,
+          loc,
+        },
+        property: path.property,
+        loc,
+      },
+      id: makeInstructionId(1),
+      loc: loc,
+      effects: null,
+    });
+    curr = next;
+  }
+  return curr;
+}
+
+/**
+ * Write a dependency into optional blocks.
+ *
+ * e.g. `a.b?.c.d` is written to an optional block that tests `a.b` and
+ * conditionally evaluates `c.d`.
+ */
+function writeOptionalDependency(
+  dep: ReactiveScopeDependency,
+  builder: HIRBuilder,
+  parentAlternate: BlockId | null,
+): Identifier {
+  const env = builder.environment;
+  /**
+   * Reserve an identifier which will be used to store the result of this
+   * dependency.
+   */
+  const dependencyValue: Place = {
+    kind: 'Identifier',
+    identifier: makeTemporaryIdentifier(env.nextIdentifierId, GeneratedSource),
+    effect: Effect.Mutate,
+    reactive: dep.reactive,
+    loc: GeneratedSource,
+  };
+
+  /**
+   * Reserve a block which is the fallthrough (and transitive successor) of this
+   * optional chain.
+   */
+  const continuationBlock = builder.reserve(builder.currentBlockKind());
+  let alternate;
+  if (parentAlternate != null) {
+    alternate = parentAlternate;
+  } else {
+    /**
+     * If an outermost alternate block has not been reserved, write one
+     *
+     * $N = Primitive undefined
+     * $M = StoreLocal $OptionalResult = $N
+     * goto fallthrough
+     */
+    alternate = builder.enter('value', () => {
+      const temp = lowerValueToTemporary(builder, {
+        kind: 'Primitive',
+        value: undefined,
+        loc: GeneratedSource,
+      });
+      lowerValueToTemporary(builder, {
+        kind: 'StoreLocal',
+        lvalue: {kind: InstructionKind.Const, place: {...dependencyValue}},
+        value: {...temp},
+        type: null,
+        loc: GeneratedSource,
+      });
+      return {
+        kind: 'goto',
+        variant: GotoVariant.Break,
+        block: continuationBlock.id,
+        id: makeInstructionId(0),
+        loc: GeneratedSource,
+      };
+    });
+  }
+
+  // Reserve the consequent block, which is the successor of the test block
+  const consequent = builder.reserve('value');
+
+  let testIdentifier: Identifier | null = null;
+  const testBlock = builder.enter('value', () => {
+    const testDependency = {
+      ...dep,
+      path: dep.path.slice(0, dep.path.length - 1),
+    };
+    const firstOptional = dep.path.findIndex(path => path.optional);
+    CompilerError.invariant(firstOptional !== -1, {
+      reason:
+        '[ScopeDependencyUtils] Internal invariant broken: expected optional path',
+      loc: dep.identifier.loc,
+    });
+    if (firstOptional === dep.path.length - 1) {
+      // Base case: the test block is simple
+      testIdentifier = writeNonOptionalDependency(testDependency, env, builder);
+    } else {
+      // Otherwise, the test block is a nested optional chain
+      testIdentifier = writeOptionalDependency(
+        testDependency,
+        builder,
+        alternate,
+      );
+    }
+
+    return {
+      kind: 'branch',
+      test: {
+        identifier: testIdentifier,
+        effect: Effect.Freeze,
+        kind: 'Identifier',
+        loc: GeneratedSource,
+        reactive: dep.reactive,
+      },
+      consequent: consequent.id,
+      alternate,
+      id: makeInstructionId(0),
+      loc: GeneratedSource,
+      fallthrough: continuationBlock.id,
+    };
+  });
+
+  builder.enterReserved(consequent, () => {
+    CompilerError.invariant(testIdentifier !== null, {
+      reason: 'Satisfy type checker',
+      loc: GeneratedSource,
+    });
+
+    lowerValueToTemporary(builder, {
+      kind: 'StoreLocal',
+      lvalue: {kind: InstructionKind.Const, place: {...dependencyValue}},
+      value: lowerValueToTemporary(builder, {
+        kind: 'PropertyLoad',
+        object: {
+          identifier: testIdentifier,
+          kind: 'Identifier',
+          effect: Effect.Freeze,
+          reactive: dep.reactive,
+          loc: GeneratedSource,
+        },
+        property: dep.path.at(-1)!.property,
+        loc: GeneratedSource,
+      }),
+      type: null,
+      loc: GeneratedSource,
+    });
+    return {
+      kind: 'goto',
+      variant: GotoVariant.Break,
+      block: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc: GeneratedSource,
+    };
+  });
+  builder.terminateWithContinuation(
+    {
+      kind: 'optional',
+      optional: dep.path.at(-1)!.optional,
+      test: testBlock,
+      fallthrough: continuationBlock.id,
+      id: makeInstructionId(0),
+      loc: GeneratedSource,
+    },
+    continuationBlock,
+  );
+
+  return dependencyValue.identifier;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts
new file mode 100644
index 00000000000..eeaaebf7a39
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts
@@ -0,0 +1,325 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {isValidIdentifier} from '@babel/types';
+import {z} from 'zod/v4';
+import {Effect, ValueKind} from '..';
+import {
+  EffectSchema,
+  ValueKindSchema,
+  ValueReason,
+  ValueReasonSchema,
+} from './HIR';
+
+export type ObjectPropertiesConfig = {[key: string]: TypeConfig};
+export const ObjectPropertiesSchema: z.ZodType<ObjectPropertiesConfig> = z
+  .record(
+    z.string(),
+    z.lazy(() => TypeSchema),
+  )
+  .refine(record => {
+    return Object.keys(record).every(
+      key => key === '*' || key === 'default' || isValidIdentifier(key),
+    );
+  }, 'Expected all "object" property names to be valid identifier, `*` to match any property, of `default` to define a module default export');
+
+export type ObjectTypeConfig = {
+  kind: 'object';
+  properties: ObjectPropertiesConfig | null;
+};
+export const ObjectTypeSchema: z.ZodType<ObjectTypeConfig> = z.object({
+  kind: z.literal('object'),
+  properties: ObjectPropertiesSchema.nullable(),
+});
+
+export const LifetimeIdSchema = z.string().refine(id => id.startsWith('@'), {
+  message: "Placeholder names must start with '@'",
+});
+
+export type FreezeEffectConfig = {
+  kind: 'Freeze';
+  value: string;
+  reason: ValueReason;
+};
+
+export const FreezeEffectSchema: z.ZodType<FreezeEffectConfig> = z.object({
+  kind: z.literal('Freeze'),
+  value: LifetimeIdSchema,
+  reason: ValueReasonSchema,
+});
+
+export type MutateEffectConfig = {
+  kind: 'Mutate';
+  value: string;
+};
+
+export const MutateEffectSchema: z.ZodType<MutateEffectConfig> = z.object({
+  kind: z.literal('Mutate'),
+  value: LifetimeIdSchema,
+});
+
+export type MutateTransitiveConditionallyConfig = {
+  kind: 'MutateTransitiveConditionally';
+  value: string;
+};
+
+export const MutateTransitiveConditionallySchema: z.ZodType<MutateTransitiveConditionallyConfig> =
+  z.object({
+    kind: z.literal('MutateTransitiveConditionally'),
+    value: LifetimeIdSchema,
+  });
+
+export type CreateEffectConfig = {
+  kind: 'Create';
+  into: string;
+  value: ValueKind;
+  reason: ValueReason;
+};
+
+export const CreateEffectSchema: z.ZodType<CreateEffectConfig> = z.object({
+  kind: z.literal('Create'),
+  into: LifetimeIdSchema,
+  value: ValueKindSchema,
+  reason: ValueReasonSchema,
+});
+
+export type AssignEffectConfig = {
+  kind: 'Assign';
+  from: string;
+  into: string;
+};
+
+export const AssignEffectSchema: z.ZodType<AssignEffectConfig> = z.object({
+  kind: z.literal('Assign'),
+  from: LifetimeIdSchema,
+  into: LifetimeIdSchema,
+});
+
+export type AliasEffectConfig = {
+  kind: 'Alias';
+  from: string;
+  into: string;
+};
+
+export const AliasEffectSchema: z.ZodType<AliasEffectConfig> = z.object({
+  kind: z.literal('Alias'),
+  from: LifetimeIdSchema,
+  into: LifetimeIdSchema,
+});
+
+export type ImmutableCaptureEffectConfig = {
+  kind: 'ImmutableCapture';
+  from: string;
+  into: string;
+};
+
+export const ImmutableCaptureEffectSchema: z.ZodType<ImmutableCaptureEffectConfig> =
+  z.object({
+    kind: z.literal('ImmutableCapture'),
+    from: LifetimeIdSchema,
+    into: LifetimeIdSchema,
+  });
+
+export type CaptureEffectConfig = {
+  kind: 'Capture';
+  from: string;
+  into: string;
+};
+
+export const CaptureEffectSchema: z.ZodType<CaptureEffectConfig> = z.object({
+  kind: z.literal('Capture'),
+  from: LifetimeIdSchema,
+  into: LifetimeIdSchema,
+});
+
+export type CreateFromEffectConfig = {
+  kind: 'CreateFrom';
+  from: string;
+  into: string;
+};
+
+export const CreateFromEffectSchema: z.ZodType<CreateFromEffectConfig> =
+  z.object({
+    kind: z.literal('CreateFrom'),
+    from: LifetimeIdSchema,
+    into: LifetimeIdSchema,
+  });
+
+export type ApplyArgConfig =
+  | string
+  | {kind: 'Spread'; place: string}
+  | {kind: 'Hole'};
+
+export const ApplyArgSchema: z.ZodType<ApplyArgConfig> = z.union([
+  LifetimeIdSchema,
+  z.object({
+    kind: z.literal('Spread'),
+    place: LifetimeIdSchema,
+  }),
+  z.object({
+    kind: z.literal('Hole'),
+  }),
+]);
+
+export type ApplyEffectConfig = {
+  kind: 'Apply';
+  receiver: string;
+  function: string;
+  mutatesFunction: boolean;
+  args: Array<ApplyArgConfig>;
+  into: string;
+};
+
+export const ApplyEffectSchema: z.ZodType<ApplyEffectConfig> = z.object({
+  kind: z.literal('Apply'),
+  receiver: LifetimeIdSchema,
+  function: LifetimeIdSchema,
+  mutatesFunction: z.boolean(),
+  args: z.array(ApplyArgSchema),
+  into: LifetimeIdSchema,
+});
+
+export type ImpureEffectConfig = {
+  kind: 'Impure';
+  place: string;
+};
+
+export const ImpureEffectSchema: z.ZodType<ImpureEffectConfig> = z.object({
+  kind: z.literal('Impure'),
+  place: LifetimeIdSchema,
+});
+
+export type AliasingEffectConfig =
+  | FreezeEffectConfig
+  | CreateEffectConfig
+  | CreateFromEffectConfig
+  | AssignEffectConfig
+  | AliasEffectConfig
+  | CaptureEffectConfig
+  | ImmutableCaptureEffectConfig
+  | ImpureEffectConfig
+  | MutateEffectConfig
+  | MutateTransitiveConditionallyConfig
+  | ApplyEffectConfig;
+
+export const AliasingEffectSchema: z.ZodType<AliasingEffectConfig> = z.union([
+  FreezeEffectSchema,
+  CreateEffectSchema,
+  CreateFromEffectSchema,
+  AssignEffectSchema,
+  AliasEffectSchema,
+  CaptureEffectSchema,
+  ImmutableCaptureEffectSchema,
+  ImpureEffectSchema,
+  MutateEffectSchema,
+  MutateTransitiveConditionallySchema,
+  ApplyEffectSchema,
+]);
+
+export type AliasingSignatureConfig = {
+  receiver: string;
+  params: Array<string>;
+  rest: string | null;
+  returns: string;
+  effects: Array<AliasingEffectConfig>;
+  temporaries: Array<string>;
+};
+
+export const AliasingSignatureSchema: z.ZodType<AliasingSignatureConfig> =
+  z.object({
+    receiver: LifetimeIdSchema,
+    params: z.array(LifetimeIdSchema),
+    rest: LifetimeIdSchema.nullable(),
+    returns: LifetimeIdSchema,
+    effects: z.array(AliasingEffectSchema),
+    temporaries: z.array(LifetimeIdSchema),
+  });
+
+export type FunctionTypeConfig = {
+  kind: 'function';
+  positionalParams: Array<Effect>;
+  restParam: Effect | null;
+  calleeEffect: Effect;
+  returnType: TypeConfig;
+  returnValueKind: ValueKind;
+  noAlias?: boolean | null | undefined;
+  mutableOnlyIfOperandsAreMutable?: boolean | null | undefined;
+  impure?: boolean | null | undefined;
+  canonicalName?: string | null | undefined;
+  aliasing?: AliasingSignatureConfig | null | undefined;
+  knownIncompatible?: string | null | undefined;
+};
+export const FunctionTypeSchema: z.ZodType<FunctionTypeConfig> = z.object({
+  kind: z.literal('function'),
+  positionalParams: z.array(EffectSchema),
+  restParam: EffectSchema.nullable(),
+  calleeEffect: EffectSchema,
+  returnType: z.lazy(() => TypeSchema),
+  returnValueKind: ValueKindSchema,
+  noAlias: z.boolean().nullable().optional(),
+  mutableOnlyIfOperandsAreMutable: z.boolean().nullable().optional(),
+  impure: z.boolean().nullable().optional(),
+  canonicalName: z.string().nullable().optional(),
+  aliasing: AliasingSignatureSchema.nullable().optional(),
+  knownIncompatible: z.string().nullable().optional(),
+});
+
+export type HookTypeConfig = {
+  kind: 'hook';
+  positionalParams?: Array<Effect> | null | undefined;
+  restParam?: Effect | null | undefined;
+  returnType: TypeConfig;
+  returnValueKind?: ValueKind | null | undefined;
+  noAlias?: boolean | null | undefined;
+  aliasing?: AliasingSignatureConfig | null | undefined;
+  knownIncompatible?: string | null | undefined;
+};
+export const HookTypeSchema: z.ZodType<HookTypeConfig> = z.object({
+  kind: z.literal('hook'),
+  positionalParams: z.array(EffectSchema).nullable().optional(),
+  restParam: EffectSchema.nullable().optional(),
+  returnType: z.lazy(() => TypeSchema),
+  returnValueKind: ValueKindSchema.nullable().optional(),
+  noAlias: z.boolean().nullable().optional(),
+  aliasing: AliasingSignatureSchema.nullable().optional(),
+  knownIncompatible: z.string().nullable().optional(),
+});
+
+export type BuiltInTypeConfig =
+  | 'Any'
+  | 'Ref'
+  | 'Array'
+  | 'Primitive'
+  | 'MixedReadonly';
+export const BuiltInTypeSchema: z.ZodType<BuiltInTypeConfig> = z.union([
+  z.literal('Any'),
+  z.literal('Ref'),
+  z.literal('Array'),
+  z.literal('Primitive'),
+  z.literal('MixedReadonly'),
+]);
+
+export type TypeReferenceConfig = {
+  kind: 'type';
+  name: BuiltInTypeConfig;
+};
+export const TypeReferenceSchema: z.ZodType<TypeReferenceConfig> = z.object({
+  kind: z.literal('type'),
+  name: BuiltInTypeSchema,
+});
+
+export type TypeConfig =
+  | ObjectTypeConfig
+  | FunctionTypeConfig
+  | HookTypeConfig
+  | TypeReferenceConfig;
+export const TypeSchema: z.ZodType<TypeConfig> = z.union([
+  ObjectTypeSchema,
+  FunctionTypeSchema,
+  HookTypeSchema,
+  TypeReferenceSchema,
+]);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Types.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Types.ts
new file mode 100644
index 00000000000..f126ab7aa6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Types.ts
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {GeneratedSource, PropertyLiteral} from './HIR';
+
+export type BuiltInType = PrimitiveType | FunctionType | ObjectType;
+
+export type Type =
+  | BuiltInType
+  | PhiType
+  | TypeVar
+  | PolyType
+  | PropType
+  | ObjectMethod;
+export type PrimitiveType = {kind: 'Primitive'};
+
+/*
+ * An {@link FunctionType} or {@link ObjectType} (also a JS object) may be associated with an
+ * inferred "object shape", i.e. a known property (key -> Type) map. This is
+ * subtly different from JS language semantics - `shape` represents both
+ * OwnPropertyDescriptors and properties present in the prototype chain.
+ *
+ * {@link ObjectShape.functionType} is always present on the shape of a {@link FunctionType},
+ * and it represents the call signature of the function. Note that Forget thinks of a
+ * {@link FunctionType} as any "callable object" (not to be confused with objects that
+ *   extend the global `Function`.)
+ *
+ * If `shapeId` is present, it is a key into the ShapeRegistry used to infer this
+ * FunctionType or ObjectType instance (i.e. from an Environment).
+ */
+
+export type FunctionType = {
+  kind: 'Function';
+  shapeId: string | null;
+  return: Type;
+  isConstructor: boolean;
+};
+
+export type ObjectType = {
+  kind: 'Object';
+  shapeId: string | null;
+};
+
+export type TypeVar = {
+  kind: 'Type';
+  id: TypeId;
+};
+export type PolyType = {
+  kind: 'Poly';
+};
+export type PhiType = {
+  kind: 'Phi';
+  operands: Array<Type>;
+};
+export type PropType = {
+  kind: 'Property';
+  objectType: Type;
+  objectName: string;
+  propertyName:
+    | {
+        kind: 'literal';
+        value: PropertyLiteral;
+      }
+    | {
+        kind: 'computed';
+        value: Type;
+      };
+};
+
+export type ObjectMethod = {
+  kind: 'ObjectMethod';
+};
+
+/*
+ * Simulated opaque type for TypeId to prevent using normal numbers as ids
+ * accidentally.
+ */
+const opaqueTypeId = Symbol();
+export type TypeId = number & {[opaqueTypeId]: 'IdentifierId'};
+
+export function makeTypeId(id: number): TypeId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected instruction id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as TypeId;
+}
+
+let typeCounter = 0;
+export function makeType(): TypeVar {
+  return {
+    kind: 'Type',
+    id: makeTypeId(typeCounter++),
+  };
+}
+
+/**
+ * Duplicates the given type, copying types that are exact while creating fresh
+ * type identifiers for any abstract types.
+ */
+export function duplicateType(type: Type): Type {
+  switch (type.kind) {
+    case 'Function': {
+      return {
+        kind: 'Function',
+        return: duplicateType(type.return),
+        shapeId: type.shapeId,
+        isConstructor: type.isConstructor,
+      };
+    }
+    case 'Object': {
+      return {kind: 'Object', shapeId: type.shapeId};
+    }
+    case 'ObjectMethod': {
+      return {kind: 'ObjectMethod'};
+    }
+    case 'Phi': {
+      return {
+        kind: 'Phi',
+        operands: type.operands.map(operand => duplicateType(operand)),
+      };
+    }
+    case 'Poly': {
+      return {kind: 'Poly'};
+    }
+    case 'Primitive': {
+      return {kind: 'Primitive'};
+    }
+    case 'Property': {
+      return {
+        kind: 'Property',
+        objectType: duplicateType(type.objectType),
+        objectName: type.objectName,
+        propertyName: type.propertyName,
+      };
+    }
+    case 'Type': {
+      return makeType();
+    }
+  }
+}
+
+export function typeEquals(tA: Type, tB: Type): boolean {
+  if (tA.kind !== tB.kind) return false;
+  return (
+    typeVarEquals(tA, tB) ||
+    funcTypeEquals(tA, tB) ||
+    objectTypeEquals(tA, tB) ||
+    primitiveTypeEquals(tA, tB) ||
+    polyTypeEquals(tA, tB) ||
+    phiTypeEquals(tA, tB) ||
+    propTypeEquals(tA, tB) ||
+    objectMethodTypeEquals(tA, tB)
+  );
+}
+
+function typeVarEquals(tA: Type, tB: Type): boolean {
+  if (tA.kind === 'Type' && tB.kind === 'Type') {
+    return tA.id === tB.id;
+  }
+  return false;
+}
+
+function typeKindCheck(tA: Type, tb: Type, type: string): boolean {
+  return tA.kind === type && tb.kind === type;
+}
+
+function objectMethodTypeEquals(tA: Type, tB: Type): boolean {
+  return typeKindCheck(tA, tB, 'ObjectMethod');
+}
+
+function propTypeEquals(tA: Type, tB: Type): boolean {
+  if (tA.kind === 'Property' && tB.kind === 'Property') {
+    if (!typeEquals(tA.objectType, tB.objectType)) {
+      return false;
+    }
+
+    return (
+      tA.propertyName === tB.propertyName && tA.objectName === tB.objectName
+    );
+  }
+
+  return false;
+}
+
+function primitiveTypeEquals(tA: Type, tB: Type): boolean {
+  return typeKindCheck(tA, tB, 'Primitive');
+}
+
+function polyTypeEquals(tA: Type, tB: Type): boolean {
+  return typeKindCheck(tA, tB, 'Poly');
+}
+
+function objectTypeEquals(tA: Type, tB: Type): boolean {
+  if (tA.kind === 'Object' && tB.kind == 'Object') {
+    return tA.shapeId === tB.shapeId;
+  }
+
+  return false;
+}
+
+function funcTypeEquals(tA: Type, tB: Type): boolean {
+  if (tA.kind !== 'Function' || tB.kind !== 'Function') {
+    return false;
+  }
+  return typeEquals(tA.return, tB.return);
+}
+
+function phiTypeEquals(tA: Type, tB: Type): boolean {
+  if (tA.kind === 'Phi' && tB.kind === 'Phi') {
+    if (tA.operands.length !== tB.operands.length) {
+      return false;
+    }
+
+    let operands = new Set(tA.operands);
+    for (let i = 0; i < tB.operands.length; i++) {
+      if (!operands.has(tB.operands[i])) {
+        return false;
+      }
+    }
+  }
+
+  return false;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/index.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/index.ts
new file mode 100644
index 00000000000..bbc9b325d47
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/index.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {assertConsistentIdentifiers} from './AssertConsistentIdentifiers';
+export {
+  assertTerminalSuccessorsExist,
+  assertTerminalPredsExist,
+} from './AssertTerminalBlocksExist';
+export {assertValidBlockNesting} from './AssertValidBlockNesting';
+export {assertValidMutableRanges} from './AssertValidMutableRanges';
+export {lower} from './BuildHIR';
+export {buildReactiveScopeTerminalsHIR} from './BuildReactiveScopeTerminalsHIR';
+export {computeDominatorTree, computePostDominatorTree} from './Dominator';
+export {
+  Environment,
+  validateEnvironmentConfig,
+  type EnvironmentConfig,
+  type ExternalFunction,
+  type Hook,
+} from './Environment';
+export * from './HIR';
+export {
+  markInstructionIds,
+  markPredecessors,
+  removeUnnecessaryTryCatch,
+  reversePostorderBlocks,
+} from './HIRBuilder';
+export {mergeConsecutiveBlocks} from './MergeConsecutiveBlocks';
+export {mergeOverlappingReactiveScopesHIR} from './MergeOverlappingReactiveScopesHIR';
+export {printFunction, printHIR, printFunctionWithOutlined} from './PrintHIR';
+export {pruneUnusedLabelsHIR} from './PruneUnusedLabelsHIR';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
new file mode 100644
index 00000000000..d27bfe0b0ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
@@ -0,0 +1,1308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {assertExhaustive} from '../Utils/utils';
+import {CompilerError} from '..';
+import {
+  BasicBlock,
+  BlockId,
+  Instruction,
+  InstructionKind,
+  InstructionValue,
+  makeInstructionId,
+  Pattern,
+  Place,
+  ReactiveInstruction,
+  ReactiveScope,
+  ReactiveValue,
+  ScopeId,
+  SpreadPattern,
+  Terminal,
+} from './HIR';
+
+export function* eachInstructionLValue(
+  instr: ReactiveInstruction,
+): Iterable<Place> {
+  if (instr.lvalue !== null) {
+    yield instr.lvalue;
+  }
+  yield* eachInstructionValueLValue(instr.value);
+}
+
+export function* eachInstructionLValueWithKind(
+  instr: ReactiveInstruction,
+): Iterable<[Place, InstructionKind]> {
+  switch (instr.value.kind) {
+    case 'DeclareContext':
+    case 'StoreContext':
+    case 'DeclareLocal':
+    case 'StoreLocal': {
+      yield [instr.value.lvalue.place, instr.value.lvalue.kind];
+      break;
+    }
+    case 'Destructure': {
+      const kind = instr.value.lvalue.kind;
+      for (const place of eachPatternOperand(instr.value.lvalue.pattern)) {
+        yield [place, kind];
+      }
+      break;
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      yield [instr.value.lvalue, InstructionKind.Reassign];
+      break;
+    }
+  }
+}
+
+export function* eachInstructionValueLValue(
+  value: ReactiveValue,
+): Iterable<Place> {
+  switch (value.kind) {
+    case 'DeclareContext':
+    case 'StoreContext':
+    case 'DeclareLocal':
+    case 'StoreLocal': {
+      yield value.lvalue.place;
+      break;
+    }
+    case 'Destructure': {
+      yield* eachPatternOperand(value.lvalue.pattern);
+      break;
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      yield value.lvalue;
+      break;
+    }
+  }
+}
+
+export function* eachInstructionOperand(instr: Instruction): Iterable<Place> {
+  yield* eachInstructionValueOperand(instr.value);
+}
+export function* eachInstructionValueOperand(
+  instrValue: InstructionValue,
+): Iterable<Place> {
+  switch (instrValue.kind) {
+    case 'NewExpression':
+    case 'CallExpression': {
+      yield instrValue.callee;
+      yield* eachCallArgument(instrValue.args);
+      break;
+    }
+    case 'BinaryExpression': {
+      yield instrValue.left;
+      yield instrValue.right;
+      break;
+    }
+    case 'MethodCall': {
+      yield instrValue.receiver;
+      yield instrValue.property;
+      yield* eachCallArgument(instrValue.args);
+      break;
+    }
+    case 'DeclareContext':
+    case 'DeclareLocal': {
+      break;
+    }
+    case 'LoadLocal':
+    case 'LoadContext': {
+      yield instrValue.place;
+      break;
+    }
+    case 'StoreLocal': {
+      yield instrValue.value;
+      break;
+    }
+    case 'StoreContext': {
+      yield instrValue.lvalue.place;
+      yield instrValue.value;
+      break;
+    }
+    case 'StoreGlobal': {
+      yield instrValue.value;
+      break;
+    }
+    case 'Destructure': {
+      yield instrValue.value;
+      break;
+    }
+    case 'PropertyLoad': {
+      yield instrValue.object;
+      break;
+    }
+    case 'PropertyDelete': {
+      yield instrValue.object;
+      break;
+    }
+    case 'PropertyStore': {
+      yield instrValue.object;
+      yield instrValue.value;
+      break;
+    }
+    case 'ComputedLoad': {
+      yield instrValue.object;
+      yield instrValue.property;
+      break;
+    }
+    case 'ComputedDelete': {
+      yield instrValue.object;
+      yield instrValue.property;
+      break;
+    }
+    case 'ComputedStore': {
+      yield instrValue.object;
+      yield instrValue.property;
+      yield instrValue.value;
+      break;
+    }
+    case 'UnaryExpression': {
+      yield instrValue.value;
+      break;
+    }
+    case 'JsxExpression': {
+      if (instrValue.tag.kind === 'Identifier') {
+        yield instrValue.tag;
+      }
+      for (const attribute of instrValue.props) {
+        switch (attribute.kind) {
+          case 'JsxAttribute': {
+            yield attribute.place;
+            break;
+          }
+          case 'JsxSpreadAttribute': {
+            yield attribute.argument;
+            break;
+          }
+          default: {
+            assertExhaustive(
+              attribute,
+              `Unexpected attribute kind \`${(attribute as any).kind}\``,
+            );
+          }
+        }
+      }
+      if (instrValue.children) {
+        yield* instrValue.children;
+      }
+      break;
+    }
+    case 'JsxFragment': {
+      yield* instrValue.children;
+      break;
+    }
+    case 'ObjectExpression': {
+      for (const property of instrValue.properties) {
+        if (
+          property.kind === 'ObjectProperty' &&
+          property.key.kind === 'computed'
+        ) {
+          yield property.key.name;
+        }
+        yield property.place;
+      }
+      break;
+    }
+    case 'ArrayExpression': {
+      for (const element of instrValue.elements) {
+        if (element.kind === 'Identifier') {
+          yield element;
+        } else if (element.kind === 'Spread') {
+          yield element.place;
+        }
+      }
+      break;
+    }
+    case 'ObjectMethod':
+    case 'FunctionExpression': {
+      yield* instrValue.loweredFunc.func.context;
+      break;
+    }
+    case 'TaggedTemplateExpression': {
+      yield instrValue.tag;
+      break;
+    }
+    case 'TypeCastExpression': {
+      yield instrValue.value;
+      break;
+    }
+    case 'TemplateLiteral': {
+      yield* instrValue.subexprs;
+      break;
+    }
+    case 'Await': {
+      yield instrValue.value;
+      break;
+    }
+    case 'GetIterator': {
+      yield instrValue.collection;
+      break;
+    }
+    case 'IteratorNext': {
+      yield instrValue.iterator;
+      yield instrValue.collection;
+      break;
+    }
+    case 'NextPropertyOf': {
+      yield instrValue.value;
+      break;
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      yield instrValue.value;
+      break;
+    }
+    case 'StartMemoize': {
+      if (instrValue.deps != null) {
+        for (const dep of instrValue.deps) {
+          if (dep.root.kind === 'NamedLocal') {
+            yield dep.root.value;
+          }
+        }
+      }
+      break;
+    }
+    case 'FinishMemoize': {
+      yield instrValue.decl;
+      break;
+    }
+    case 'Debugger':
+    case 'RegExpLiteral':
+    case 'MetaProperty':
+    case 'LoadGlobal':
+    case 'UnsupportedNode':
+    case 'Primitive':
+    case 'JSXText': {
+      break;
+    }
+    default: {
+      assertExhaustive(
+        instrValue,
+        `Unexpected instruction kind \`${(instrValue as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function* eachCallArgument(
+  args: Array<Place | SpreadPattern>,
+): Iterable<Place> {
+  for (const arg of args) {
+    if (arg.kind === 'Identifier') {
+      yield arg;
+    } else {
+      yield arg.place;
+    }
+  }
+}
+
+export function doesPatternContainSpreadElement(pattern: Pattern): boolean {
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      for (const item of pattern.items) {
+        if (item.kind === 'Spread') {
+          return true;
+        }
+      }
+      break;
+    }
+    case 'ObjectPattern': {
+      for (const property of pattern.properties) {
+        if (property.kind === 'Spread') {
+          return true;
+        }
+      }
+      break;
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+  return false;
+}
+
+export function* eachPatternOperand(pattern: Pattern): Iterable<Place> {
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      for (const item of pattern.items) {
+        if (item.kind === 'Identifier') {
+          yield item;
+        } else if (item.kind === 'Spread') {
+          yield item.place;
+        } else if (item.kind === 'Hole') {
+          continue;
+        } else {
+          assertExhaustive(
+            item,
+            `Unexpected item kind \`${(item as any).kind}\``,
+          );
+        }
+      }
+      break;
+    }
+    case 'ObjectPattern': {
+      for (const property of pattern.properties) {
+        if (property.kind === 'ObjectProperty') {
+          yield property.place;
+        } else if (property.kind === 'Spread') {
+          yield property.place;
+        } else {
+          assertExhaustive(
+            property,
+            `Unexpected item kind \`${(property as any).kind}\``,
+          );
+        }
+      }
+      break;
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function* eachPatternItem(
+  pattern: Pattern,
+): Iterable<Place | SpreadPattern> {
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      for (const item of pattern.items) {
+        if (item.kind === 'Identifier') {
+          yield item;
+        } else if (item.kind === 'Spread') {
+          yield item;
+        } else if (item.kind === 'Hole') {
+          continue;
+        } else {
+          assertExhaustive(
+            item,
+            `Unexpected item kind \`${(item as any).kind}\``,
+          );
+        }
+      }
+      break;
+    }
+    case 'ObjectPattern': {
+      for (const property of pattern.properties) {
+        if (property.kind === 'ObjectProperty') {
+          yield property.place;
+        } else if (property.kind === 'Spread') {
+          yield property;
+        } else {
+          assertExhaustive(
+            property,
+            `Unexpected item kind \`${(property as any).kind}\``,
+          );
+        }
+      }
+      break;
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function mapInstructionLValues(
+  instr: Instruction,
+  fn: (place: Place) => Place,
+): void {
+  switch (instr.value.kind) {
+    case 'DeclareLocal':
+    case 'StoreLocal': {
+      const lvalue = instr.value.lvalue;
+      lvalue.place = fn(lvalue.place);
+      break;
+    }
+    case 'Destructure': {
+      mapPatternOperands(instr.value.lvalue.pattern, fn);
+      break;
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      instr.value.lvalue = fn(instr.value.lvalue);
+      break;
+    }
+  }
+  if (instr.lvalue !== null) {
+    instr.lvalue = fn(instr.lvalue);
+  }
+}
+
+export function mapInstructionOperands(
+  instr: Instruction,
+  fn: (place: Place) => Place,
+): void {
+  mapInstructionValueOperands(instr.value, fn);
+}
+
+export function mapInstructionValueOperands(
+  instrValue: InstructionValue,
+  fn: (place: Place) => Place,
+): void {
+  switch (instrValue.kind) {
+    case 'BinaryExpression': {
+      instrValue.left = fn(instrValue.left);
+      instrValue.right = fn(instrValue.right);
+      break;
+    }
+    case 'PropertyLoad': {
+      instrValue.object = fn(instrValue.object);
+      break;
+    }
+    case 'PropertyDelete': {
+      instrValue.object = fn(instrValue.object);
+      break;
+    }
+    case 'PropertyStore': {
+      instrValue.object = fn(instrValue.object);
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'ComputedLoad': {
+      instrValue.object = fn(instrValue.object);
+      instrValue.property = fn(instrValue.property);
+      break;
+    }
+    case 'ComputedDelete': {
+      instrValue.object = fn(instrValue.object);
+      instrValue.property = fn(instrValue.property);
+      break;
+    }
+    case 'ComputedStore': {
+      instrValue.object = fn(instrValue.object);
+      instrValue.property = fn(instrValue.property);
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'DeclareContext':
+    case 'DeclareLocal': {
+      break;
+    }
+    case 'LoadLocal':
+    case 'LoadContext': {
+      instrValue.place = fn(instrValue.place);
+      break;
+    }
+    case 'StoreLocal': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'StoreContext': {
+      instrValue.lvalue.place = fn(instrValue.lvalue.place);
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'StoreGlobal': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'Destructure': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'NewExpression':
+    case 'CallExpression': {
+      instrValue.callee = fn(instrValue.callee);
+      instrValue.args = mapCallArguments(instrValue.args, fn);
+      break;
+    }
+    case 'MethodCall': {
+      instrValue.receiver = fn(instrValue.receiver);
+      instrValue.property = fn(instrValue.property);
+      instrValue.args = mapCallArguments(instrValue.args, fn);
+      break;
+    }
+    case 'UnaryExpression': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'JsxExpression': {
+      if (instrValue.tag.kind === 'Identifier') {
+        instrValue.tag = fn(instrValue.tag);
+      }
+      for (const attribute of instrValue.props) {
+        switch (attribute.kind) {
+          case 'JsxAttribute': {
+            attribute.place = fn(attribute.place);
+            break;
+          }
+          case 'JsxSpreadAttribute': {
+            attribute.argument = fn(attribute.argument);
+            break;
+          }
+          default: {
+            assertExhaustive(
+              attribute,
+              `Unexpected attribute kind \`${(attribute as any).kind}\``,
+            );
+          }
+        }
+      }
+      if (instrValue.children) {
+        instrValue.children = instrValue.children.map(p => fn(p));
+      }
+      break;
+    }
+    case 'ObjectExpression': {
+      for (const property of instrValue.properties) {
+        if (
+          property.kind === 'ObjectProperty' &&
+          property.key.kind === 'computed'
+        ) {
+          property.key.name = fn(property.key.name);
+        }
+        property.place = fn(property.place);
+      }
+      break;
+    }
+    case 'ArrayExpression': {
+      instrValue.elements = instrValue.elements.map(element => {
+        if (element.kind === 'Identifier') {
+          return fn(element);
+        } else if (element.kind === 'Spread') {
+          element.place = fn(element.place);
+          return element;
+        } else {
+          return element;
+        }
+      });
+      break;
+    }
+    case 'JsxFragment': {
+      instrValue.children = instrValue.children.map(e => fn(e));
+      break;
+    }
+    case 'ObjectMethod':
+    case 'FunctionExpression': {
+      instrValue.loweredFunc.func.context =
+        instrValue.loweredFunc.func.context.map(d => fn(d));
+
+      break;
+    }
+    case 'TaggedTemplateExpression': {
+      instrValue.tag = fn(instrValue.tag);
+      break;
+    }
+    case 'TypeCastExpression': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'TemplateLiteral': {
+      instrValue.subexprs = instrValue.subexprs.map(fn);
+      break;
+    }
+    case 'Await': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'GetIterator': {
+      instrValue.collection = fn(instrValue.collection);
+      break;
+    }
+    case 'IteratorNext': {
+      instrValue.iterator = fn(instrValue.iterator);
+      instrValue.collection = fn(instrValue.collection);
+      break;
+    }
+    case 'NextPropertyOf': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      instrValue.value = fn(instrValue.value);
+      break;
+    }
+    case 'StartMemoize': {
+      if (instrValue.deps != null) {
+        for (const dep of instrValue.deps) {
+          if (dep.root.kind === 'NamedLocal') {
+            dep.root.value = fn(dep.root.value);
+          }
+        }
+      }
+      break;
+    }
+    case 'FinishMemoize': {
+      instrValue.decl = fn(instrValue.decl);
+      break;
+    }
+    case 'Debugger':
+    case 'RegExpLiteral':
+    case 'MetaProperty':
+    case 'LoadGlobal':
+    case 'UnsupportedNode':
+    case 'Primitive':
+    case 'JSXText': {
+      break;
+    }
+    default: {
+      assertExhaustive(instrValue, 'Unexpected instruction kind');
+    }
+  }
+}
+
+export function mapCallArguments(
+  args: Array<Place | SpreadPattern>,
+  fn: (place: Place) => Place,
+): Array<Place | SpreadPattern> {
+  return args.map(arg => {
+    if (arg.kind === 'Identifier') {
+      return fn(arg);
+    } else {
+      arg.place = fn(arg.place);
+      return arg;
+    }
+  });
+}
+
+export function mapPatternOperands(
+  pattern: Pattern,
+  fn: (place: Place) => Place,
+): void {
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      pattern.items = pattern.items.map(item => {
+        if (item.kind === 'Identifier') {
+          return fn(item);
+        } else if (item.kind === 'Spread') {
+          item.place = fn(item.place);
+          return item;
+        } else {
+          return item;
+        }
+      });
+      break;
+    }
+    case 'ObjectPattern': {
+      for (const property of pattern.properties) {
+        property.place = fn(property.place);
+      }
+      break;
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+}
+
+// Maps a terminal node's block assignments using the provided function.
+export function mapTerminalSuccessors(
+  terminal: Terminal,
+  fn: (block: BlockId) => BlockId,
+): Terminal {
+  switch (terminal.kind) {
+    case 'goto': {
+      const target = fn(terminal.block);
+      return {
+        kind: 'goto',
+        block: target,
+        variant: terminal.variant,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'if': {
+      const consequent = fn(terminal.consequent);
+      const alternate = fn(terminal.alternate);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'if',
+        test: terminal.test,
+        consequent,
+        alternate,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'branch': {
+      const consequent = fn(terminal.consequent);
+      const alternate = fn(terminal.alternate);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'branch',
+        test: terminal.test,
+        consequent,
+        alternate,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'switch': {
+      const cases = terminal.cases.map(case_ => {
+        const target = fn(case_.block);
+        return {
+          test: case_.test,
+          block: target,
+        };
+      });
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'switch',
+        test: terminal.test,
+        cases,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'logical': {
+      const test = fn(terminal.test);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'logical',
+        test,
+        fallthrough,
+        operator: terminal.operator,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'ternary': {
+      const test = fn(terminal.test);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'ternary',
+        test,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'optional': {
+      const test = fn(terminal.test);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'optional',
+        optional: terminal.optional,
+        test,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'return': {
+      return {
+        kind: 'return',
+        returnVariant: terminal.returnVariant,
+        loc: terminal.loc,
+        value: terminal.value,
+        id: makeInstructionId(0),
+        effects: terminal.effects,
+      };
+    }
+    case 'throw': {
+      return terminal;
+    }
+    case 'do-while': {
+      const loop = fn(terminal.loop);
+      const test = fn(terminal.test);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'do-while',
+        loc: terminal.loc,
+        test,
+        loop,
+        fallthrough,
+        id: makeInstructionId(0),
+      };
+    }
+    case 'while': {
+      const test = fn(terminal.test);
+      const loop = fn(terminal.loop);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'while',
+        loc: terminal.loc,
+        test,
+        loop,
+        fallthrough,
+        id: makeInstructionId(0),
+      };
+    }
+    case 'for': {
+      const init = fn(terminal.init);
+      const test = fn(terminal.test);
+      const update = terminal.update !== null ? fn(terminal.update) : null;
+      const loop = fn(terminal.loop);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'for',
+        loc: terminal.loc,
+        init,
+        test,
+        update,
+        loop,
+        fallthrough,
+        id: makeInstructionId(0),
+      };
+    }
+    case 'for-of': {
+      const init = fn(terminal.init);
+      const loop = fn(terminal.loop);
+      const test = fn(terminal.test);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'for-of',
+        loc: terminal.loc,
+        init,
+        test,
+        loop,
+        fallthrough,
+        id: makeInstructionId(0),
+      };
+    }
+    case 'for-in': {
+      const init = fn(terminal.init);
+      const loop = fn(terminal.loop);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'for-in',
+        loc: terminal.loc,
+        init,
+        loop,
+        fallthrough,
+        id: makeInstructionId(0),
+      };
+    }
+    case 'label': {
+      const block = fn(terminal.block);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'label',
+        block,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'sequence': {
+      const block = fn(terminal.block);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'sequence',
+        block,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'maybe-throw': {
+      const continuation = fn(terminal.continuation);
+      const handler = fn(terminal.handler);
+      return {
+        kind: 'maybe-throw',
+        continuation,
+        handler,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+        effects: terminal.effects,
+      };
+    }
+    case 'try': {
+      const block = fn(terminal.block);
+      const handler = fn(terminal.handler);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: 'try',
+        block,
+        handlerBinding: terminal.handlerBinding,
+        handler,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'scope':
+    case 'pruned-scope': {
+      const block = fn(terminal.block);
+      const fallthrough = fn(terminal.fallthrough);
+      return {
+        kind: terminal.kind,
+        scope: terminal.scope,
+        block,
+        fallthrough,
+        id: makeInstructionId(0),
+        loc: terminal.loc,
+      };
+    }
+    case 'unreachable':
+    case 'unsupported': {
+      return terminal;
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any as Terminal).kind}\``,
+      );
+    }
+  }
+}
+
+export function terminalHasFallthrough<
+  T extends Terminal,
+  U extends T & {fallthrough: BlockId},
+>(terminal: T): terminal is U {
+  switch (terminal.kind) {
+    case 'maybe-throw':
+    case 'goto':
+    case 'return':
+    case 'throw':
+    case 'unreachable':
+    case 'unsupported': {
+      const _: undefined = terminal.fallthrough;
+      return false;
+    }
+    case 'branch':
+    case 'try':
+    case 'do-while':
+    case 'for-of':
+    case 'for-in':
+    case 'for':
+    case 'if':
+    case 'label':
+    case 'logical':
+    case 'optional':
+    case 'sequence':
+    case 'switch':
+    case 'ternary':
+    case 'while':
+    case 'scope':
+    case 'pruned-scope': {
+      const _: BlockId = terminal.fallthrough;
+      return true;
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any).kind}\``,
+      );
+    }
+  }
+}
+
+/*
+ * Helper to get a terminal's fallthrough. The main reason to extract this as a helper
+ * function is to ensure that we use an exhaustive switch to ensure that we add new terminal
+ * variants as appropriate.
+ */
+export function terminalFallthrough(terminal: Terminal): BlockId | null {
+  if (terminalHasFallthrough(terminal)) {
+    return terminal.fallthrough;
+  } else {
+    return null;
+  }
+}
+
+/*
+ * Iterates over the successor block ids of the provided terminal. The function is called
+ * specifically for the successors that define the standard control flow, and not
+ * pseduo-successors such as fallthroughs.
+ */
+export function* eachTerminalSuccessor(terminal: Terminal): Iterable<BlockId> {
+  switch (terminal.kind) {
+    case 'goto': {
+      yield terminal.block;
+      break;
+    }
+    case 'if': {
+      yield terminal.consequent;
+      yield terminal.alternate;
+      break;
+    }
+    case 'branch': {
+      yield terminal.consequent;
+      yield terminal.alternate;
+      break;
+    }
+    case 'switch': {
+      for (const case_ of terminal.cases) {
+        yield case_.block;
+      }
+      break;
+    }
+    case 'optional':
+    case 'ternary':
+    case 'logical': {
+      yield terminal.test;
+      break;
+    }
+    case 'return': {
+      break;
+    }
+    case 'throw': {
+      break;
+    }
+    case 'do-while': {
+      yield terminal.loop;
+      break;
+    }
+    case 'while': {
+      yield terminal.test;
+      break;
+    }
+    case 'for': {
+      yield terminal.init;
+      break;
+    }
+    case 'for-of': {
+      yield terminal.init;
+      break;
+    }
+    case 'for-in': {
+      yield terminal.init;
+      break;
+    }
+    case 'label': {
+      yield terminal.block;
+      break;
+    }
+    case 'sequence': {
+      yield terminal.block;
+      break;
+    }
+    case 'maybe-throw': {
+      yield terminal.continuation;
+      yield terminal.handler;
+      break;
+    }
+    case 'try': {
+      yield terminal.block;
+      break;
+    }
+    case 'scope':
+    case 'pruned-scope': {
+      yield terminal.block;
+      break;
+    }
+    case 'unreachable':
+    case 'unsupported':
+      break;
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any as Terminal).kind}\``,
+      );
+    }
+  }
+}
+
+export function mapTerminalOperands(
+  terminal: Terminal,
+  fn: (place: Place) => Place,
+): void {
+  switch (terminal.kind) {
+    case 'if': {
+      terminal.test = fn(terminal.test);
+      break;
+    }
+    case 'branch': {
+      terminal.test = fn(terminal.test);
+      break;
+    }
+    case 'switch': {
+      terminal.test = fn(terminal.test);
+      for (const case_ of terminal.cases) {
+        if (case_.test === null) {
+          continue;
+        }
+        case_.test = fn(case_.test);
+      }
+      break;
+    }
+    case 'return':
+    case 'throw': {
+      terminal.value = fn(terminal.value);
+      break;
+    }
+    case 'try': {
+      if (terminal.handlerBinding !== null) {
+        terminal.handlerBinding = fn(terminal.handlerBinding);
+      } else {
+        terminal.handlerBinding = null;
+      }
+      break;
+    }
+    case 'maybe-throw':
+    case 'sequence':
+    case 'label':
+    case 'optional':
+    case 'ternary':
+    case 'logical':
+    case 'do-while':
+    case 'while':
+    case 'for':
+    case 'for-of':
+    case 'for-in':
+    case 'goto':
+    case 'unreachable':
+    case 'unsupported':
+    case 'scope':
+    case 'pruned-scope': {
+      // no-op
+      break;
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function* eachTerminalOperand(terminal: Terminal): Iterable<Place> {
+  switch (terminal.kind) {
+    case 'if': {
+      yield terminal.test;
+      break;
+    }
+    case 'branch': {
+      yield terminal.test;
+      break;
+    }
+    case 'switch': {
+      yield terminal.test;
+      for (const case_ of terminal.cases) {
+        if (case_.test === null) {
+          continue;
+        }
+        yield case_.test;
+      }
+      break;
+    }
+    case 'return':
+    case 'throw': {
+      yield terminal.value;
+      break;
+    }
+    case 'try': {
+      if (terminal.handlerBinding !== null) {
+        yield terminal.handlerBinding;
+      }
+      break;
+    }
+    case 'maybe-throw':
+    case 'sequence':
+    case 'label':
+    case 'optional':
+    case 'ternary':
+    case 'logical':
+    case 'do-while':
+    case 'while':
+    case 'for':
+    case 'for-of':
+    case 'for-in':
+    case 'goto':
+    case 'unreachable':
+    case 'unsupported':
+    case 'scope':
+    case 'pruned-scope': {
+      // no-op
+      break;
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any).kind}\``,
+      );
+    }
+  }
+}
+
+/**
+ * Helper class for traversing scope blocks in HIR-form.
+ */
+export class ScopeBlockTraversal {
+  // Live stack of active scopes
+  #activeScopes: Array<ScopeId> = [];
+  blockInfos: Map<
+    BlockId,
+    | {
+        kind: 'end';
+        scope: ReactiveScope;
+        pruned: boolean;
+      }
+    | {
+        kind: 'begin';
+        scope: ReactiveScope;
+        pruned: boolean;
+        fallthrough: BlockId;
+      }
+  > = new Map();
+
+  recordScopes(block: BasicBlock): void {
+    const blockInfo = this.blockInfos.get(block.id);
+    if (blockInfo?.kind === 'begin') {
+      this.#activeScopes.push(blockInfo.scope.id);
+    } else if (blockInfo?.kind === 'end') {
+      const top = this.#activeScopes.at(-1);
+      CompilerError.invariant(blockInfo.scope.id === top, {
+        reason:
+          'Expected traversed block fallthrough to match top-most active scope',
+        loc: block.instructions[0]?.loc ?? block.terminal.loc,
+      });
+      this.#activeScopes.pop();
+    }
+
+    if (
+      block.terminal.kind === 'scope' ||
+      block.terminal.kind === 'pruned-scope'
+    ) {
+      CompilerError.invariant(
+        !this.blockInfos.has(block.terminal.block) &&
+          !this.blockInfos.has(block.terminal.fallthrough),
+        {
+          reason: 'Expected unique scope blocks and fallthroughs',
+          loc: block.terminal.loc,
+        },
+      );
+      this.blockInfos.set(block.terminal.block, {
+        kind: 'begin',
+        scope: block.terminal.scope,
+        pruned: block.terminal.kind === 'pruned-scope',
+        fallthrough: block.terminal.fallthrough,
+      });
+      this.blockInfos.set(block.terminal.fallthrough, {
+        kind: 'end',
+        scope: block.terminal.scope,
+        pruned: block.terminal.kind === 'pruned-scope',
+      });
+    }
+  }
+
+  /**
+   * @returns if the given scope is currently 'active', i.e. if the scope start
+   * block but not the scope fallthrough has been recorded.
+   */
+  isScopeActive(scopeId: ScopeId): boolean {
+    return this.#activeScopes.indexOf(scopeId) !== -1;
+  }
+
+  /**
+   * The current, innermost active scope.
+   */
+  get currentScope(): ScopeId | null {
+    return this.#activeScopes.at(-1) ?? null;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts
new file mode 100644
index 00000000000..7f30e25a5c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic} from '../CompilerError';
+import {
+  FunctionExpression,
+  GeneratedSource,
+  Hole,
+  IdentifierId,
+  ObjectMethod,
+  Place,
+  SourceLocation,
+  SpreadPattern,
+  ValueKind,
+  ValueReason,
+} from '../HIR';
+import {FunctionSignature} from '../HIR/ObjectShape';
+import {printSourceLocation} from '../HIR/PrintHIR';
+
+/**
+ * `AliasingEffect` describes a set of "effects" that an instruction/terminal has on one or
+ * more values in a program. These effects include mutation of values, freezing values,
+ * tracking data flow between values, and other specialized cases.
+ */
+export type AliasingEffect =
+  /**
+   * Marks the given value and its direct aliases as frozen.
+   *
+   * Captured values are *not* considered frozen, because we cannot be sure that a previously
+   * captured value will still be captured at the point of the freeze.
+   *
+   * For example:
+   * const x = {};
+   * const y = [x];
+   * y.pop(); // y dosn't contain x anymore!
+   * freeze(y);
+   * mutate(x); // safe to mutate!
+   *
+   * The exception to this is FunctionExpressions - since it is impossible to change which
+   * value a function closes over[1] we can transitively freeze functions and their captures.
+   *
+   * [1] Except for `let` values that are reassigned and closed over by a function, but we
+   * handle this explicitly with StoreContext/LoadContext.
+   */
+  | {kind: 'Freeze'; value: Place; reason: ValueReason}
+  /**
+   * Mutate the value and any direct aliases (not captures). Errors if the value is not mutable.
+   */
+  | {kind: 'Mutate'; value: Place; reason?: MutationReason | null}
+  /**
+   * Mutate the value and any direct aliases (not captures), but only if the value is known mutable.
+   * This should be rare.
+   *
+   * TODO: this is only used for IteratorNext, but even then MutateTransitiveConditionally is more
+   * correct for iterators of unknown types.
+   */
+  | {kind: 'MutateConditionally'; value: Place}
+  /**
+   * Mutate the value, any direct aliases, and any transitive captures. Errors if the value is not mutable.
+   */
+  | {kind: 'MutateTransitive'; value: Place}
+  /**
+   * Mutates any of the value, its direct aliases, and its transitive captures that are mutable.
+   */
+  | {kind: 'MutateTransitiveConditionally'; value: Place}
+  /**
+   * Records information flow from `from` to `into` in cases where local mutation of the destination
+   * will *not* mutate the source:
+   *
+   * - Capture a -> b and Mutate(b) X=> (does not imply) Mutate(a)
+   * - Capture a -> b and MutateTransitive(b) => (does imply) Mutate(a)
+   *
+   * Example: `array.push(item)`. Information from item is captured into array, but there is not a
+   * direct aliasing, and local mutations of array will not modify item.
+   */
+  | {kind: 'Capture'; from: Place; into: Place}
+  /**
+   * Records information flow from `from` to `into` in cases where local mutation of the destination
+   * *will* mutate the source:
+   *
+   * - Alias a -> b and Mutate(b) => (does imply) Mutate(a)
+   * - Alias a -> b and MutateTransitive(b) => (does imply) Mutate(a)
+   *
+   * Example: `c = identity(a)`. We don't know what `identity()` returns so we can't use Assign.
+   * But we have to assume that it _could_ be returning its input, such that a local mutation of
+   * c could be mutating a.
+   */
+  | {kind: 'Alias'; from: Place; into: Place}
+
+  /**
+   * Indicates the potential for information flow from `from` to `into`. This is used for a specific
+   * case: functions with unknown signatures. If the compiler sees a call such as `foo(x)`, it has to
+   * consider several possibilities (which may depend on the arguments):
+   * - foo(x) returns a new mutable value that does not capture any information from x.
+   * - foo(x) returns a new mutable value that *does* capture information from x.
+   * - foo(x) returns x itself, ie foo is the identity function
+   *
+   * The same is true of functions that take multiple arguments: `cond(a, b, c)` could conditionally
+   * return b or c depending on the value of a.
+   *
+   * To represent this case, MaybeAlias represents the fact that an aliasing relationship could exist.
+   * Any mutations that flow through this relationship automatically become conditional.
+   */
+  | {kind: 'MaybeAlias'; from: Place; into: Place}
+
+  /**
+   * Records direct assignment: `into = from`.
+   */
+  | {kind: 'Assign'; from: Place; into: Place}
+  /**
+   * Creates a value of the given type at the given place
+   */
+  | {kind: 'Create'; into: Place; value: ValueKind; reason: ValueReason}
+  /**
+   * Creates a new value with the same kind as the starting value.
+   */
+  | {kind: 'CreateFrom'; from: Place; into: Place}
+  /**
+   * Immutable data flow, used for escape analysis. Does not influence mutable range analysis:
+   */
+  | {kind: 'ImmutableCapture'; from: Place; into: Place}
+  /**
+   * Calls the function at the given place with the given arguments either captured or aliased,
+   * and captures/aliases the result into the given place.
+   */
+  | {
+      kind: 'Apply';
+      receiver: Place;
+      function: Place;
+      mutatesFunction: boolean;
+      args: Array<Place | SpreadPattern | Hole>;
+      into: Place;
+      signature: FunctionSignature | null;
+      loc: SourceLocation;
+    }
+  /**
+   * Constructs a function value with the given captures. The mutability of the function
+   * will be determined by the mutability of the capture values when evaluated.
+   */
+  | {
+      kind: 'CreateFunction';
+      captures: Array<Place>;
+      function: FunctionExpression | ObjectMethod;
+      into: Place;
+    }
+  /**
+   * Mutation of a value known to be immutable
+   */
+  | {kind: 'MutateFrozen'; place: Place; error: CompilerDiagnostic}
+  /**
+   * Mutation of a global
+   */
+  | {
+      kind: 'MutateGlobal';
+      place: Place;
+      error: CompilerDiagnostic;
+    }
+  /**
+   * Indicates a side-effect that is not safe during render
+   */
+  | {kind: 'Impure'; place: Place; error: CompilerDiagnostic}
+  /**
+   * Indicates that a given place is accessed during render. Used to distingush
+   * hook arguments that are known to be called immediately vs those used for
+   * event handlers/effects, and for JSX values known to be called during render
+   * (tags, children) vs those that may be events/effect (other props).
+   */
+  | {
+      kind: 'Render';
+      place: Place;
+    };
+
+export type MutationReason = {kind: 'AssignCurrentProperty'};
+
+export function hashEffect(effect: AliasingEffect): string {
+  switch (effect.kind) {
+    case 'Apply': {
+      return [
+        effect.kind,
+        effect.receiver.identifier.id,
+        effect.function.identifier.id,
+        effect.mutatesFunction,
+        effect.args
+          .map(a => {
+            if (a.kind === 'Hole') {
+              return '';
+            } else if (a.kind === 'Identifier') {
+              return a.identifier.id;
+            } else {
+              return `...${a.place.identifier.id}`;
+            }
+          })
+          .join(','),
+        effect.into.identifier.id,
+      ].join(':');
+    }
+    case 'CreateFrom':
+    case 'ImmutableCapture':
+    case 'Assign':
+    case 'Alias':
+    case 'Capture':
+    case 'MaybeAlias': {
+      return [
+        effect.kind,
+        effect.from.identifier.id,
+        effect.into.identifier.id,
+      ].join(':');
+    }
+    case 'Create': {
+      return [
+        effect.kind,
+        effect.into.identifier.id,
+        effect.value,
+        effect.reason,
+      ].join(':');
+    }
+    case 'Freeze': {
+      return [effect.kind, effect.value.identifier.id, effect.reason].join(':');
+    }
+    case 'Impure':
+    case 'Render': {
+      return [effect.kind, effect.place.identifier.id].join(':');
+    }
+    case 'MutateFrozen':
+    case 'MutateGlobal': {
+      return [
+        effect.kind,
+        effect.place.identifier.id,
+        effect.error.severity,
+        effect.error.reason,
+        effect.error.description,
+        printSourceLocation(effect.error.primaryLocation() ?? GeneratedSource),
+      ].join(':');
+    }
+    case 'Mutate':
+    case 'MutateConditionally':
+    case 'MutateTransitive':
+    case 'MutateTransitiveConditionally': {
+      return [effect.kind, effect.value.identifier.id].join(':');
+    }
+    case 'CreateFunction': {
+      return [
+        effect.kind,
+        effect.into.identifier.id,
+        // return places are a unique way to identify functions themselves
+        effect.function.loweredFunc.func.returns.identifier.id,
+        effect.captures.map(p => p.identifier.id).join(','),
+      ].join(':');
+    }
+  }
+}
+
+export type AliasingSignature = {
+  receiver: IdentifierId;
+  params: Array<IdentifierId>;
+  rest: IdentifierId | null;
+  returns: IdentifierId;
+  effects: Array<AliasingEffect>;
+  temporaries: Array<Place>;
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts
new file mode 100644
index 00000000000..77a2bdcde59
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {Effect, HIRFunction, IdentifierId, makeInstructionId} from '../HIR';
+import {deadCodeElimination} from '../Optimization';
+import {inferReactiveScopeVariables} from '../ReactiveScopes';
+import {rewriteInstructionKindsBasedOnReassignment} from '../SSA';
+import {assertExhaustive} from '../Utils/utils';
+import {inferMutationAliasingEffects} from './InferMutationAliasingEffects';
+import {inferMutationAliasingRanges} from './InferMutationAliasingRanges';
+
+export default function analyseFunctions(func: HIRFunction): void {
+  for (const [_, block] of func.body.blocks) {
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'ObjectMethod':
+        case 'FunctionExpression': {
+          lowerWithMutationAliasing(instr.value.loweredFunc.func);
+
+          /**
+           * Reset mutable range for outer inferReferenceEffects
+           */
+          for (const operand of instr.value.loweredFunc.func.context) {
+            /**
+             * NOTE: inferReactiveScopeVariables makes identifiers in the scope
+             * point to the *same* mutableRange instance. Resetting start/end
+             * here is insufficient, because a later mutation of the range
+             * for any one identifier could affect the range for other identifiers.
+             */
+            operand.identifier.mutableRange = {
+              start: makeInstructionId(0),
+              end: makeInstructionId(0),
+            };
+            operand.identifier.scope = null;
+          }
+          break;
+        }
+      }
+    }
+  }
+}
+
+function lowerWithMutationAliasing(fn: HIRFunction): void {
+  /**
+   * Phase 1: similar to lower(), but using the new mutation/aliasing inference
+   */
+  analyseFunctions(fn);
+  inferMutationAliasingEffects(fn, {isFunctionExpression: true});
+  deadCodeElimination(fn);
+  const functionEffects = inferMutationAliasingRanges(fn, {
+    isFunctionExpression: true,
+  }).unwrap();
+  rewriteInstructionKindsBasedOnReassignment(fn);
+  inferReactiveScopeVariables(fn);
+  fn.aliasingEffects = functionEffects;
+
+  /**
+   * Phase 2: populate the Effect of each context variable to use in inferring
+   * the outer function. For example, InferMutationAliasingEffects uses context variable
+   * effects to decide if the function may be mutable or not.
+   */
+  const capturedOrMutated = new Set<IdentifierId>();
+  for (const effect of functionEffects) {
+    switch (effect.kind) {
+      case 'Assign':
+      case 'Alias':
+      case 'Capture':
+      case 'CreateFrom':
+      case 'MaybeAlias': {
+        capturedOrMutated.add(effect.from.identifier.id);
+        break;
+      }
+      case 'Apply': {
+        CompilerError.invariant(false, {
+          reason: `[AnalyzeFunctions] Expected Apply effects to be replaced with more precise effects`,
+          loc: effect.function.loc,
+        });
+      }
+      case 'Mutate':
+      case 'MutateConditionally':
+      case 'MutateTransitive':
+      case 'MutateTransitiveConditionally': {
+        capturedOrMutated.add(effect.value.identifier.id);
+        break;
+      }
+      case 'Impure':
+      case 'Render':
+      case 'MutateFrozen':
+      case 'MutateGlobal':
+      case 'CreateFunction':
+      case 'Create':
+      case 'Freeze':
+      case 'ImmutableCapture': {
+        // no-op
+        break;
+      }
+      default: {
+        assertExhaustive(
+          effect,
+          `Unexpected effect kind ${(effect as any).kind}`,
+        );
+      }
+    }
+  }
+
+  for (const operand of fn.context) {
+    if (
+      capturedOrMutated.has(operand.identifier.id) ||
+      operand.effect === Effect.Capture
+    ) {
+      operand.effect = Effect.Capture;
+    } else {
+      operand.effect = Effect.Read;
+    }
+  }
+
+  fn.env.logger?.debugLogIRs?.({
+    kind: 'hir',
+    name: 'AnalyseFunction (inner)',
+    value: fn,
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts
new file mode 100644
index 00000000000..1fab651947a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {BlockId, computePostDominatorTree, HIRFunction, Place} from '../HIR';
+import {PostDominator} from '../HIR/Dominator';
+
+export type ControlDominators = (id: BlockId) => boolean;
+
+/**
+ * Returns an object that lazily calculates whether particular blocks are controlled
+ * by values of interest. Which values matter are up to the caller.
+ */
+export function createControlDominators(
+  fn: HIRFunction,
+  isControlVariable: (place: Place) => boolean,
+): ControlDominators {
+  const postDominators = computePostDominatorTree(fn, {
+    includeThrowsAsExitNode: false,
+  });
+  const postDominatorFrontierCache = new Map<BlockId, Set<BlockId>>();
+
+  function isControlledBlock(id: BlockId): boolean {
+    let controlBlocks = postDominatorFrontierCache.get(id);
+    if (controlBlocks === undefined) {
+      controlBlocks = postDominatorFrontier(fn, postDominators, id);
+      postDominatorFrontierCache.set(id, controlBlocks);
+    }
+    for (const blockId of controlBlocks) {
+      const controlBlock = fn.body.blocks.get(blockId)!;
+      switch (controlBlock.terminal.kind) {
+        case 'if':
+        case 'branch': {
+          if (isControlVariable(controlBlock.terminal.test)) {
+            return true;
+          }
+          break;
+        }
+        case 'switch': {
+          if (isControlVariable(controlBlock.terminal.test)) {
+            return true;
+          }
+          for (const case_ of controlBlock.terminal.cases) {
+            if (case_.test !== null && isControlVariable(case_.test)) {
+              return true;
+            }
+          }
+          break;
+        }
+      }
+    }
+    return false;
+  }
+
+  return isControlledBlock;
+}
+
+/*
+ * Computes the post-dominator frontier of @param block. These are immediate successors of nodes that
+ * post-dominate @param targetId and from which execution may not reach @param block. Intuitively, these
+ * are the earliest blocks from which execution branches such that it may or may not reach the target block.
+ */
+function postDominatorFrontier(
+  fn: HIRFunction,
+  postDominators: PostDominator<BlockId>,
+  targetId: BlockId,
+): Set<BlockId> {
+  const visited = new Set<BlockId>();
+  const frontier = new Set<BlockId>();
+  const targetPostDominators = postDominatorsOf(fn, postDominators, targetId);
+  for (const blockId of [...targetPostDominators, targetId]) {
+    if (visited.has(blockId)) {
+      continue;
+    }
+    visited.add(blockId);
+    const block = fn.body.blocks.get(blockId)!;
+    for (const pred of block.preds) {
+      if (!targetPostDominators.has(pred)) {
+        // The predecessor does not always reach this block, we found an item on the frontier!
+        frontier.add(pred);
+      }
+    }
+  }
+  return frontier;
+}
+
+function postDominatorsOf(
+  fn: HIRFunction,
+  postDominators: PostDominator<BlockId>,
+  targetId: BlockId,
+): Set<BlockId> {
+  const result = new Set<BlockId>();
+  const visited = new Set<BlockId>();
+  const queue = [targetId];
+  while (queue.length) {
+    const currentId = queue.shift()!;
+    if (visited.has(currentId)) {
+      continue;
+    }
+    visited.add(currentId);
+    const current = fn.body.blocks.get(currentId)!;
+    for (const pred of current.preds) {
+      const predPostDominator = postDominators.get(pred) ?? pred;
+      if (predPostDominator === targetId || result.has(predPostDominator)) {
+        result.add(pred);
+      }
+      queue.push(pred);
+    }
+  }
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts
new file mode 100644
index 00000000000..eb8fe5ad4e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts
@@ -0,0 +1,598 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic, CompilerError, SourceLocation} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {
+  CallExpression,
+  Effect,
+  Environment,
+  FinishMemoize,
+  FunctionExpression,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  InstructionId,
+  InstructionValue,
+  LoadGlobal,
+  LoadLocal,
+  ManualMemoDependency,
+  MethodCall,
+  Place,
+  PropertyLoad,
+  SpreadPattern,
+  StartMemoize,
+  TInstruction,
+  getHookKindForType,
+  makeInstructionId,
+} from '../HIR';
+import {createTemporaryPlace, markInstructionIds} from '../HIR/HIRBuilder';
+import {Result} from '../Utils/Result';
+
+type ManualMemoCallee = {
+  kind: 'useMemo' | 'useCallback';
+  loadInstr: TInstruction<LoadGlobal> | TInstruction<PropertyLoad>;
+};
+
+type IdentifierSidemap = {
+  functions: Map<IdentifierId, TInstruction<FunctionExpression>>;
+  manualMemos: Map<IdentifierId, ManualMemoCallee>;
+  react: Set<IdentifierId>;
+  maybeDepsLists: Map<IdentifierId, {loc: SourceLocation; deps: Array<Place>}>;
+  maybeDeps: Map<IdentifierId, ManualMemoDependency>;
+  optionals: Set<IdentifierId>;
+};
+
+/**
+ * Collect loads from named variables and property reads from @value
+ * into `maybeDeps`
+ * Returns the variable + property reads represented by @instr
+ */
+export function collectMaybeMemoDependencies(
+  value: InstructionValue,
+  maybeDeps: Map<IdentifierId, ManualMemoDependency>,
+  optional: boolean,
+): ManualMemoDependency | null {
+  switch (value.kind) {
+    case 'LoadGlobal': {
+      return {
+        root: {
+          kind: 'Global',
+          identifierName: value.binding.name,
+        },
+        path: [],
+        loc: value.loc,
+      };
+    }
+    case 'PropertyLoad': {
+      const object = maybeDeps.get(value.object.identifier.id);
+      if (object != null) {
+        return {
+          root: object.root,
+          // TODO: determine if the access is optional
+          path: [...object.path, {property: value.property, optional}],
+          loc: value.loc,
+        };
+      }
+      break;
+    }
+
+    case 'LoadLocal':
+    case 'LoadContext': {
+      const source = maybeDeps.get(value.place.identifier.id);
+      if (source != null) {
+        return source;
+      } else if (
+        value.place.identifier.name != null &&
+        value.place.identifier.name.kind === 'named'
+      ) {
+        return {
+          root: {
+            kind: 'NamedLocal',
+            value: {...value.place},
+            constant: false,
+          },
+          path: [],
+          loc: value.place.loc,
+        };
+      }
+      break;
+    }
+    case 'StoreLocal': {
+      /*
+       * Value blocks rely on StoreLocal to populate their return value.
+       * We need to track these as optional property chains are valid in
+       * source depslists
+       */
+      const lvalue = value.lvalue.place.identifier;
+      const rvalue = value.value.identifier.id;
+      const aliased = maybeDeps.get(rvalue);
+      if (aliased != null && lvalue.name?.kind !== 'named') {
+        maybeDeps.set(lvalue.id, aliased);
+        return aliased;
+      }
+      break;
+    }
+  }
+  return null;
+}
+
+function collectTemporaries(
+  instr: Instruction,
+  env: Environment,
+  sidemap: IdentifierSidemap,
+): void {
+  const {value, lvalue} = instr;
+  switch (value.kind) {
+    case 'FunctionExpression': {
+      sidemap.functions.set(
+        instr.lvalue.identifier.id,
+        instr as TInstruction<FunctionExpression>,
+      );
+      break;
+    }
+    case 'LoadGlobal': {
+      const global = env.getGlobalDeclaration(value.binding, value.loc);
+      const hookKind = global !== null ? getHookKindForType(env, global) : null;
+      const lvalId = instr.lvalue.identifier.id;
+      if (hookKind === 'useMemo' || hookKind === 'useCallback') {
+        sidemap.manualMemos.set(lvalId, {
+          kind: hookKind,
+          loadInstr: instr as TInstruction<LoadGlobal>,
+        });
+      } else if (value.binding.name === 'React') {
+        sidemap.react.add(lvalId);
+      }
+      break;
+    }
+    case 'PropertyLoad': {
+      if (sidemap.react.has(value.object.identifier.id)) {
+        const property = value.property;
+        if (property === 'useMemo' || property === 'useCallback') {
+          sidemap.manualMemos.set(instr.lvalue.identifier.id, {
+            kind: property as 'useMemo' | 'useCallback',
+            loadInstr: instr as TInstruction<PropertyLoad>,
+          });
+        }
+      }
+      break;
+    }
+    case 'ArrayExpression': {
+      if (value.elements.every(e => e.kind === 'Identifier')) {
+        sidemap.maybeDepsLists.set(instr.lvalue.identifier.id, {
+          loc: value.loc,
+          deps: value.elements as Array<Place>,
+        });
+      }
+      break;
+    }
+  }
+  const maybeDep = collectMaybeMemoDependencies(
+    value,
+    sidemap.maybeDeps,
+    sidemap.optionals.has(lvalue.identifier.id),
+  );
+  // We don't expect named lvalues during this pass (unlike ValidatePreservingManualMemo)
+  if (maybeDep != null) {
+    sidemap.maybeDeps.set(lvalue.identifier.id, maybeDep);
+  }
+}
+
+function makeManualMemoizationMarkers(
+  fnExpr: Place,
+  env: Environment,
+  depsList: Array<ManualMemoDependency> | null,
+  depsLoc: SourceLocation | null,
+  memoDecl: Place,
+  manualMemoId: number,
+): [TInstruction<StartMemoize>, TInstruction<FinishMemoize>] {
+  return [
+    {
+      id: makeInstructionId(0),
+      lvalue: createTemporaryPlace(env, fnExpr.loc),
+      value: {
+        kind: 'StartMemoize',
+        manualMemoId,
+        /*
+         * Use deps list from source instead of inferred deps
+         * as dependencies
+         */
+        deps: depsList,
+        depsLoc,
+        loc: fnExpr.loc,
+      },
+      effects: null,
+      loc: fnExpr.loc,
+    },
+    {
+      id: makeInstructionId(0),
+      lvalue: createTemporaryPlace(env, fnExpr.loc),
+      value: {
+        kind: 'FinishMemoize',
+        manualMemoId,
+        decl: {...memoDecl},
+        loc: fnExpr.loc,
+      },
+      effects: null,
+      loc: fnExpr.loc,
+    },
+  ];
+}
+
+function getManualMemoizationReplacement(
+  fn: Place,
+  loc: SourceLocation,
+  kind: 'useMemo' | 'useCallback',
+): LoadLocal | CallExpression {
+  if (kind === 'useMemo') {
+    /*
+     * Replace the hook callee with the fn arg.
+     *
+     * before:
+     *   $1 = LoadGlobal useMemo       // load the useMemo global
+     *   $2 = FunctionExpression ...   // memo function
+     *   $3 = ArrayExpression [ ... ]  // deps array
+     *   $4 = Call $1 ($2, $3 )        // invoke useMemo w fn and deps
+     *
+     * after:
+     *   $1 = LoadGlobal useMemo       // load the useMemo global (dead code)
+     *   $2 = FunctionExpression ...   // memo function
+     *   $3 = ArrayExpression [ ... ]  // deps array (dead code)
+     *   $4 = Call $2 ()               // invoke the memo function itself
+     *
+     * Note that a later pass (InlineImmediatelyInvokedFunctionExpressions) will
+     * inline the useMemo callback along with any other immediately invoked IIFEs.
+     */
+    return {
+      kind: 'CallExpression',
+      callee: fn,
+      /*
+       * Drop the args, including the deps array which DCE will remove
+       * later.
+       */
+      args: [],
+      loc,
+    };
+  } else {
+    /*
+     * Instead of a Call, just alias the callback directly.
+     *
+     * before:
+     *   $1 = LoadGlobal useCallback
+     *   $2 = FunctionExpression ...   // the callback being memoized
+     *   $3 = ArrayExpression ...      // deps array
+     *   $4 = Call $1 ( $2, $3 )       // invoke useCallback
+     *
+     * after:
+     *   $1 = LoadGlobal useCallback   // dead code
+     *   $2 = FunctionExpression ...   // the callback being memoized
+     *   $3 = ArrayExpression ...      // deps array (dead code)
+     *   $4 = LoadLocal $2             // reference the function
+     */
+    return {
+      kind: 'LoadLocal',
+      place: {
+        kind: 'Identifier',
+        identifier: fn.identifier,
+        effect: Effect.Unknown,
+        reactive: false,
+        loc,
+      },
+      loc,
+    };
+  }
+}
+
+function extractManualMemoizationArgs(
+  instr: TInstruction<CallExpression> | TInstruction<MethodCall>,
+  kind: 'useCallback' | 'useMemo',
+  sidemap: IdentifierSidemap,
+  errors: CompilerError,
+): {
+  fnPlace: Place;
+  depsList: Array<ManualMemoDependency> | null;
+  depsLoc: SourceLocation | null;
+} | null {
+  const [fnPlace, depsListPlace] = instr.value.args as Array<
+    Place | SpreadPattern | undefined
+  >;
+  if (fnPlace == null || fnPlace.kind !== 'Identifier') {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.UseMemo,
+        reason: `Expected a callback function to be passed to ${kind}`,
+        description:
+          kind === 'useCallback'
+            ? 'The first argument to useCallback() must be a function to cache'
+            : 'The first argument to useMemo() must be a function that calculates a result to cache',
+        suggestions: null,
+      }).withDetails({
+        kind: 'error',
+        loc: instr.value.loc,
+        message:
+          kind === 'useCallback'
+            ? `Expected a callback function`
+            : `Expected a memoization function`,
+      }),
+    );
+    return null;
+  }
+  if (depsListPlace == null) {
+    return {
+      fnPlace,
+      depsList: null,
+      depsLoc: null,
+    };
+  }
+  const maybeDepsList =
+    depsListPlace.kind === 'Identifier'
+      ? sidemap.maybeDepsLists.get(depsListPlace.identifier.id)
+      : null;
+  if (maybeDepsList == null) {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.UseMemo,
+        reason: `Expected the dependency list for ${kind} to be an array literal`,
+        description: `Expected the dependency list for ${kind} to be an array literal`,
+        suggestions: null,
+      }).withDetails({
+        kind: 'error',
+        loc:
+          depsListPlace?.kind === 'Identifier' ? depsListPlace.loc : instr.loc,
+        message: `Expected the dependency list for ${kind} to be an array literal`,
+      }),
+    );
+    return null;
+  }
+  const depsList: Array<ManualMemoDependency> = [];
+  for (const dep of maybeDepsList.deps) {
+    const maybeDep = sidemap.maybeDeps.get(dep.identifier.id);
+    if (maybeDep == null) {
+      errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          category: ErrorCategory.UseMemo,
+          reason: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+          description: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+          suggestions: null,
+        }).withDetails({
+          kind: 'error',
+          loc: dep.loc,
+          message: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+        }),
+      );
+    } else {
+      depsList.push(maybeDep);
+    }
+  }
+  return {
+    fnPlace,
+    depsList,
+    depsLoc: maybeDepsList.loc,
+  };
+}
+
+/*
+ * Removes manual memoization using the `useMemo` and `useCallback` APIs. This pass is designed
+ * to compose with InlineImmediatelyInvokedFunctionExpressions, and needs to run prior to entering
+ * SSA form (alternatively we could refactor and re-EnterSSA after inlining). Therefore it cannot
+ * rely on type inference to find useMemo/useCallback invocations, and instead does basic tracking
+ * of globals and property loads to find both direct calls as well as usage via the React namespace,
+ * eg `React.useMemo()`.
+ *
+ * This pass also validates that useMemo callbacks return a value (not void), ensuring that useMemo
+ * is only used for memoizing values and not for running arbitrary side effects.
+ */
+export function dropManualMemoization(
+  func: HIRFunction,
+): Result<void, CompilerError> {
+  const errors = new CompilerError();
+  const isValidationEnabled =
+    func.env.config.validatePreserveExistingMemoizationGuarantees ||
+    func.env.config.validateNoSetStateInRender ||
+    func.env.config.enablePreserveExistingMemoizationGuarantees;
+  const optionals = findOptionalPlaces(func);
+  const sidemap: IdentifierSidemap = {
+    functions: new Map(),
+    manualMemos: new Map(),
+    react: new Set(),
+    maybeDeps: new Map(),
+    maybeDepsLists: new Map(),
+    optionals,
+  };
+  let nextManualMemoId = 0;
+
+  /**
+   * Phase 1:
+   * - Overwrite manual memoization from
+   *   CallExpression callee="useMemo/Callback", args=[fnArg, depslist])
+   *   to either
+   *   CallExpression callee=fnArg
+   *   LoadLocal fnArg
+   * - (if validation is enabled) collect manual memoization markers
+   */
+  const queuedInserts: Map<
+    InstructionId,
+    TInstruction<StartMemoize> | TInstruction<FinishMemoize>
+  > = new Map();
+  for (const [_, block] of func.body.blocks) {
+    for (let i = 0; i < block.instructions.length; i++) {
+      const instr = block.instructions[i]!;
+      if (
+        instr.value.kind === 'CallExpression' ||
+        instr.value.kind === 'MethodCall'
+      ) {
+        const id =
+          instr.value.kind === 'CallExpression'
+            ? instr.value.callee.identifier.id
+            : instr.value.property.identifier.id;
+
+        const manualMemo = sidemap.manualMemos.get(id);
+        if (manualMemo != null) {
+          const memoDetails = extractManualMemoizationArgs(
+            instr as TInstruction<CallExpression> | TInstruction<MethodCall>,
+            manualMemo.kind,
+            sidemap,
+            errors,
+          );
+
+          if (memoDetails == null) {
+            continue;
+          }
+          const {fnPlace, depsList, depsLoc} = memoDetails;
+
+          instr.value = getManualMemoizationReplacement(
+            fnPlace,
+            instr.value.loc,
+            manualMemo.kind,
+          );
+          if (isValidationEnabled) {
+            /**
+             * Explicitly bail out when we encounter manual memoization
+             * without inline instructions, as our current validation
+             * assumes that source depslists closely match inferred deps
+             * due to the `exhaustive-deps` lint rule (which only provides
+             * diagnostics for inline memo functions)
+             * ```js
+             * useMemo(opaqueFn, [dep1, dep2]);
+             * ```
+             * While we could handle this by diffing reactive scope deps
+             * of the opaque arg against the source depslist, this pattern
+             * is rare and likely sketchy.
+             */
+            if (!sidemap.functions.has(fnPlace.identifier.id)) {
+              errors.pushDiagnostic(
+                CompilerDiagnostic.create({
+                  category: ErrorCategory.UseMemo,
+                  reason: `Expected the first argument to be an inline function expression`,
+                  description: `Expected the first argument to be an inline function expression`,
+                  suggestions: [],
+                }).withDetails({
+                  kind: 'error',
+                  loc: fnPlace.loc,
+                  message: `Expected the first argument to be an inline function expression`,
+                }),
+              );
+              continue;
+            }
+            const memoDecl: Place =
+              manualMemo.kind === 'useMemo'
+                ? instr.lvalue
+                : {
+                    kind: 'Identifier',
+                    identifier: fnPlace.identifier,
+                    effect: Effect.Unknown,
+                    reactive: false,
+                    loc: fnPlace.loc,
+                  };
+
+            const [startMarker, finishMarker] = makeManualMemoizationMarkers(
+              fnPlace,
+              func.env,
+              depsList,
+              depsLoc,
+              memoDecl,
+              nextManualMemoId++,
+            );
+
+            /**
+             * Insert StartMarker right after the `useMemo`/`useCallback` load to
+             * ensure all temporaries created when lowering the inline fn expression
+             * are included.
+             * e.g.
+             * ```
+             * 0: LoadGlobal useMemo
+             * 1: StartMarker deps=[var]
+             * 2: t0 = LoadContext [var]
+             * 3: function deps=t0
+             * ...
+             * ```
+             */
+            queuedInserts.set(manualMemo.loadInstr.id, startMarker);
+            queuedInserts.set(instr.id, finishMarker);
+          }
+        }
+      } else {
+        collectTemporaries(instr, func.env, sidemap);
+      }
+    }
+  }
+
+  /**
+   * Phase 2: Insert manual memoization markers as needed
+   */
+  if (queuedInserts.size > 0) {
+    let hasChanges = false;
+    for (const [_, block] of func.body.blocks) {
+      let nextInstructions: Array<Instruction> | null = null;
+      for (let i = 0; i < block.instructions.length; i++) {
+        const instr = block.instructions[i];
+        const insertInstr = queuedInserts.get(instr.id);
+        if (insertInstr != null) {
+          nextInstructions = nextInstructions ?? block.instructions.slice(0, i);
+          nextInstructions.push(instr);
+          nextInstructions.push(insertInstr);
+        } else if (nextInstructions != null) {
+          nextInstructions.push(instr);
+        }
+      }
+      if (nextInstructions !== null) {
+        block.instructions = nextInstructions;
+        hasChanges = true;
+      }
+    }
+
+    if (hasChanges) {
+      markInstructionIds(func.body);
+    }
+  }
+
+  return errors.asResult();
+}
+
+function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> {
+  const optionals = new Set<IdentifierId>();
+  for (const [, block] of fn.body.blocks) {
+    if (block.terminal.kind === 'optional' && block.terminal.optional) {
+      const optionalTerminal = block.terminal;
+      let testBlock = fn.body.blocks.get(block.terminal.test)!;
+      loop: while (true) {
+        const terminal = testBlock.terminal;
+        switch (terminal.kind) {
+          case 'branch': {
+            if (terminal.fallthrough === optionalTerminal.fallthrough) {
+              // found it
+              const consequent = fn.body.blocks.get(terminal.consequent)!;
+              const last = consequent.instructions.at(-1);
+              if (last !== undefined && last.value.kind === 'StoreLocal') {
+                optionals.add(last.value.value.identifier.id);
+              }
+              break loop;
+            } else {
+              testBlock = fn.body.blocks.get(terminal.fallthrough)!;
+            }
+            break;
+          }
+          case 'optional':
+          case 'logical':
+          case 'sequence':
+          case 'ternary': {
+            testBlock = fn.body.blocks.get(terminal.fallthrough)!;
+            break;
+          }
+          default: {
+            CompilerError.invariant(false, {
+              reason: `Unexpected terminal in optional`,
+              message: `Unexpected ${terminal.kind} in optional`,
+              loc: terminal.loc,
+            });
+          }
+        }
+      }
+    }
+  }
+  return optionals;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts
new file mode 100644
index 00000000000..2997a449dea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts
@@ -0,0 +1,675 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {CompilerError, SourceLocation} from '..';
+import {
+  ArrayExpression,
+  Effect,
+  FunctionExpression,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  makeInstructionId,
+  TInstruction,
+  InstructionId,
+  ScopeId,
+  ReactiveScopeDependency,
+  Place,
+  ReactiveScope,
+  ReactiveScopeDependencies,
+  Terminal,
+  isUseRefType,
+  isSetStateType,
+  isFireFunctionType,
+  makeScopeId,
+  HIR,
+  BasicBlock,
+  BlockId,
+  isEffectEventFunctionType,
+} from '../HIR';
+import {collectHoistablePropertyLoadsInInnerFn} from '../HIR/CollectHoistablePropertyLoads';
+import {collectOptionalChainSidemap} from '../HIR/CollectOptionalChainDependencies';
+import {ReactiveScopeDependencyTreeHIR} from '../HIR/DeriveMinimalDependenciesHIR';
+import {DEFAULT_EXPORT} from '../HIR/Environment';
+import {
+  createTemporaryPlace,
+  fixScopeAndIdentifierRanges,
+  markInstructionIds,
+  markPredecessors,
+  reversePostorderBlocks,
+} from '../HIR/HIRBuilder';
+import {
+  collectTemporariesSidemap,
+  DependencyCollectionContext,
+  handleInstruction,
+} from '../HIR/PropagateScopeDependenciesHIR';
+import {buildDependencyInstructions} from '../HIR/ScopeDependencyUtils';
+import {
+  eachInstructionOperand,
+  eachTerminalOperand,
+  terminalFallthrough,
+} from '../HIR/visitors';
+import {empty} from '../Utils/Stack';
+import {getOrInsertWith} from '../Utils/utils';
+import {deadCodeElimination} from '../Optimization';
+import {BuiltInAutodepsId} from '../HIR/ObjectShape';
+
+/**
+ * Infers reactive dependencies captured by useEffect lambdas and adds them as
+ * a second argument to the useEffect call if no dependency array is provided.
+ */
+export function inferEffectDependencies(fn: HIRFunction): void {
+  const fnExpressions = new Map<
+    IdentifierId,
+    TInstruction<FunctionExpression>
+  >();
+
+  const autodepFnConfigs = new Map<string, Map<string, number>>();
+  for (const effectTarget of fn.env.config.inferEffectDependencies!) {
+    const moduleTargets = getOrInsertWith(
+      autodepFnConfigs,
+      effectTarget.function.source,
+      () => new Map<string, number>(),
+    );
+    moduleTargets.set(
+      effectTarget.function.importSpecifierName,
+      effectTarget.autodepsIndex,
+    );
+  }
+  const autodepFnLoads = new Map<IdentifierId, number>();
+  const autodepModuleLoads = new Map<IdentifierId, Map<string, number>>();
+
+  const scopeInfos = new Map<ScopeId, ReactiveScopeDependencies>();
+
+  const loadGlobals = new Set<IdentifierId>();
+
+  /**
+   * When inserting LoadLocals, we need to retain the reactivity of the base
+   * identifier, as later passes e.g. PruneNonReactiveDeps take the reactivity of
+   * a base identifier as the "maximal" reactivity of all its references.
+   * Concretely,
+   * reactive(Identifier i) = Union_{reference of i}(reactive(reference))
+   */
+  const reactiveIds = inferReactiveIdentifiers(fn);
+  const rewriteBlocks: Array<BasicBlock> = [];
+
+  for (const [, block] of fn.body.blocks) {
+    if (block.terminal.kind === 'scope') {
+      const scopeBlock = fn.body.blocks.get(block.terminal.block)!;
+      if (
+        scopeBlock.instructions.length === 1 &&
+        scopeBlock.terminal.kind === 'goto' &&
+        scopeBlock.terminal.block === block.terminal.fallthrough
+      ) {
+        scopeInfos.set(
+          block.terminal.scope.id,
+          block.terminal.scope.dependencies,
+        );
+      }
+    }
+    const rewriteInstrs: Array<SpliceInfo> = [];
+    for (const instr of block.instructions) {
+      const {value, lvalue} = instr;
+      if (value.kind === 'FunctionExpression') {
+        fnExpressions.set(
+          lvalue.identifier.id,
+          instr as TInstruction<FunctionExpression>,
+        );
+      } else if (value.kind === 'PropertyLoad') {
+        if (
+          typeof value.property === 'string' &&
+          autodepModuleLoads.has(value.object.identifier.id)
+        ) {
+          const moduleTargets = autodepModuleLoads.get(
+            value.object.identifier.id,
+          )!;
+          const propertyName = value.property;
+          const numRequiredArgs = moduleTargets.get(propertyName);
+          if (numRequiredArgs != null) {
+            autodepFnLoads.set(lvalue.identifier.id, numRequiredArgs);
+          }
+        }
+      } else if (value.kind === 'LoadGlobal') {
+        loadGlobals.add(lvalue.identifier.id);
+        /*
+         * TODO: Handle properties on default exports, like
+         * import React from 'react';
+         * React.useEffect(...);
+         */
+        if (value.binding.kind === 'ImportNamespace') {
+          const moduleTargets = autodepFnConfigs.get(value.binding.module);
+          if (moduleTargets != null) {
+            autodepModuleLoads.set(lvalue.identifier.id, moduleTargets);
+          }
+        }
+        if (
+          value.binding.kind === 'ImportSpecifier' ||
+          value.binding.kind === 'ImportDefault'
+        ) {
+          const moduleTargets = autodepFnConfigs.get(value.binding.module);
+          if (moduleTargets != null) {
+            const importSpecifierName =
+              value.binding.kind === 'ImportSpecifier'
+                ? value.binding.imported
+                : DEFAULT_EXPORT;
+            const numRequiredArgs = moduleTargets.get(importSpecifierName);
+            if (numRequiredArgs != null) {
+              autodepFnLoads.set(lvalue.identifier.id, numRequiredArgs);
+            }
+          }
+        }
+      } else if (
+        value.kind === 'CallExpression' ||
+        value.kind === 'MethodCall'
+      ) {
+        const callee =
+          value.kind === 'CallExpression' ? value.callee : value.property;
+
+        const autodepsArgIndex = value.args.findIndex(
+          arg =>
+            arg.kind === 'Identifier' &&
+            arg.identifier.type.kind === 'Object' &&
+            arg.identifier.type.shapeId === BuiltInAutodepsId,
+        );
+        const autodepsArgExpectedIndex = autodepFnLoads.get(
+          callee.identifier.id,
+        );
+
+        if (
+          value.args.length > 0 &&
+          autodepsArgExpectedIndex != null &&
+          autodepsArgIndex === autodepsArgExpectedIndex &&
+          autodepFnLoads.has(callee.identifier.id) &&
+          value.args[0].kind === 'Identifier'
+        ) {
+          // We have a useEffect call with no deps array, so we need to infer the deps
+          const effectDeps: Array<Place> = [];
+          const deps: ArrayExpression = {
+            kind: 'ArrayExpression',
+            elements: effectDeps,
+            loc: GeneratedSource,
+          };
+          const depsPlace = createTemporaryPlace(fn.env, GeneratedSource);
+          depsPlace.effect = Effect.Read;
+
+          const fnExpr = fnExpressions.get(value.args[0].identifier.id);
+          if (fnExpr != null) {
+            // We have a function expression, so we can infer its dependencies
+            const scopeInfo =
+              fnExpr.lvalue.identifier.scope != null
+                ? scopeInfos.get(fnExpr.lvalue.identifier.scope.id)
+                : null;
+            let minimalDeps: Set<ReactiveScopeDependency>;
+            if (scopeInfo != null) {
+              minimalDeps = new Set(scopeInfo);
+            } else {
+              minimalDeps = inferMinimalDependencies(fnExpr);
+            }
+            /**
+             * Step 1: push dependencies to the effect deps array
+             *
+             * Note that it's invalid to prune all non-reactive deps in this pass, see
+             * the `infer-effect-deps/pruned-nonreactive-obj` fixture for an
+             * explanation.
+             */
+
+            const usedDeps = [];
+            for (const maybeDep of minimalDeps) {
+              if (
+                ((isUseRefType(maybeDep.identifier) ||
+                  isSetStateType(maybeDep.identifier)) &&
+                  !reactiveIds.has(maybeDep.identifier.id)) ||
+                isFireFunctionType(maybeDep.identifier) ||
+                isEffectEventFunctionType(maybeDep.identifier)
+              ) {
+                // exclude non-reactive hook results, which will never be in a memo block
+                continue;
+              }
+
+              const dep = truncateDepAtCurrent(maybeDep);
+              const {place, value, exitBlockId} = buildDependencyInstructions(
+                dep,
+                fn.env,
+              );
+              rewriteInstrs.push({
+                kind: 'block',
+                location: instr.id,
+                value,
+                exitBlockId: exitBlockId,
+              });
+              effectDeps.push(place);
+              usedDeps.push(dep);
+            }
+
+            // For LSP autodeps feature.
+            const decorations: Array<t.SourceLocation> = [];
+            for (const loc of collectDepUsages(usedDeps, fnExpr.value)) {
+              if (typeof loc === 'symbol') {
+                continue;
+              }
+              decorations.push(loc);
+            }
+            if (typeof value.loc !== 'symbol') {
+              fn.env.logger?.logEvent(fn.env.filename, {
+                kind: 'AutoDepsDecorations',
+                fnLoc: value.loc,
+                decorations,
+              });
+            }
+
+            // Step 2: push the inferred deps array as an argument of the useEffect
+            rewriteInstrs.push({
+              kind: 'instr',
+              location: instr.id,
+              value: {
+                id: makeInstructionId(0),
+                loc: GeneratedSource,
+                lvalue: {...depsPlace, effect: Effect.Mutate},
+                value: deps,
+                effects: null,
+              },
+            });
+            value.args[autodepsArgIndex] = {
+              ...depsPlace,
+              effect: Effect.Freeze,
+            };
+            fn.env.inferredEffectLocations.add(callee.loc);
+          } else if (loadGlobals.has(value.args[0].identifier.id)) {
+            // Global functions have no reactive dependencies, so we can insert an empty array
+            rewriteInstrs.push({
+              kind: 'instr',
+              location: instr.id,
+              value: {
+                id: makeInstructionId(0),
+                loc: GeneratedSource,
+                lvalue: {...depsPlace, effect: Effect.Mutate},
+                value: deps,
+                effects: null,
+              },
+            });
+            value.args[autodepsArgIndex] = {
+              ...depsPlace,
+              effect: Effect.Freeze,
+            };
+            fn.env.inferredEffectLocations.add(callee.loc);
+          }
+        } else if (
+          value.args.length >= 2 &&
+          value.args.length - 1 === autodepFnLoads.get(callee.identifier.id) &&
+          value.args[0] != null &&
+          value.args[0].kind === 'Identifier'
+        ) {
+          const penultimateArg = value.args[value.args.length - 2];
+          const depArrayArg = value.args[value.args.length - 1];
+          if (
+            depArrayArg.kind !== 'Spread' &&
+            penultimateArg.kind !== 'Spread' &&
+            typeof depArrayArg.loc !== 'symbol' &&
+            typeof penultimateArg.loc !== 'symbol' &&
+            typeof value.loc !== 'symbol'
+          ) {
+            fn.env.logger?.logEvent(fn.env.filename, {
+              kind: 'AutoDepsEligible',
+              fnLoc: value.loc,
+              depArrayLoc: {
+                ...depArrayArg.loc,
+                start: penultimateArg.loc.end,
+                end: depArrayArg.loc.end,
+              },
+            });
+          }
+        }
+      }
+    }
+    rewriteSplices(block, rewriteInstrs, rewriteBlocks);
+  }
+
+  if (rewriteBlocks.length > 0) {
+    for (const block of rewriteBlocks) {
+      fn.body.blocks.set(block.id, block);
+    }
+
+    /**
+     * Fixup the HIR to restore RPO, ensure correct predecessors, and renumber
+     * instructions.
+     */
+    reversePostorderBlocks(fn.body);
+    markPredecessors(fn.body);
+    // Renumber instructions and fix scope ranges
+    markInstructionIds(fn.body);
+    fixScopeAndIdentifierRanges(fn.body);
+    deadCodeElimination(fn);
+
+    fn.env.hasInferredEffect = true;
+  }
+}
+
+function truncateDepAtCurrent(
+  dep: ReactiveScopeDependency,
+): ReactiveScopeDependency {
+  const idx = dep.path.findIndex(path => path.property === 'current');
+  if (idx === -1) {
+    return dep;
+  } else {
+    return {...dep, path: dep.path.slice(0, idx)};
+  }
+}
+
+type SpliceInfo =
+  | {kind: 'instr'; location: InstructionId; value: Instruction}
+  | {
+      kind: 'block';
+      location: InstructionId;
+      value: HIR;
+      exitBlockId: BlockId;
+    };
+
+function rewriteSplices(
+  originalBlock: BasicBlock,
+  splices: Array<SpliceInfo>,
+  rewriteBlocks: Array<BasicBlock>,
+): void {
+  if (splices.length === 0) {
+    return;
+  }
+  /**
+   * Splice instructions or value blocks into the original block.
+   * --- original block ---
+   * bb_original
+   *   instr1
+   *   ...
+   *   instr2 <-- splice location
+   *   instr3
+   *   ...
+   *   <original terminal>
+   *
+   * If there is more than one block in the splice, this means that we're
+   * splicing in a set of value-blocks of the following structure:
+   * --- blocks we're splicing in ---
+   * bb_entry:
+   *   instrEntry
+   *   ...
+   *   <splice terminal> fallthrough=bb_exit
+   *
+   * bb1(value):
+   *   ...
+   *
+   * bb_exit:
+   *   instrExit
+   *   ...
+   *   <synthetic terminal>
+   *
+   *
+   * --- rewritten blocks ---
+   * bb_original
+   *   instr1
+   *   ... (original instructions)
+   *   instr2
+   *   instrEntry
+   *   ... (spliced instructions)
+   *   <splice terminal> fallthrough=bb_exit
+   *
+   * bb1(value):
+   *   ...
+   *
+   * bb_exit:
+   *   instrExit
+   *   ... (spliced instructions)
+   *   instr3
+   *   ... (original instructions)
+   *   <original terminal>
+   */
+  const originalInstrs = originalBlock.instructions;
+  let currBlock: BasicBlock = {...originalBlock, instructions: []};
+  rewriteBlocks.push(currBlock);
+
+  let cursor = 0;
+
+  for (const rewrite of splices) {
+    while (originalInstrs[cursor].id < rewrite.location) {
+      CompilerError.invariant(
+        originalInstrs[cursor].id < originalInstrs[cursor + 1].id,
+        {
+          reason:
+            '[InferEffectDependencies] Internal invariant broken: expected block instructions to be sorted',
+          loc: originalInstrs[cursor].loc,
+        },
+      );
+      currBlock.instructions.push(originalInstrs[cursor]);
+      cursor++;
+    }
+    CompilerError.invariant(originalInstrs[cursor].id === rewrite.location, {
+      reason:
+        '[InferEffectDependencies] Internal invariant broken: splice location not found',
+      loc: originalInstrs[cursor].loc,
+    });
+
+    if (rewrite.kind === 'instr') {
+      currBlock.instructions.push(rewrite.value);
+    } else if (rewrite.kind === 'block') {
+      const {entry, blocks} = rewrite.value;
+      const entryBlock = blocks.get(entry)!;
+      // splice in all instructions from the entry block
+      currBlock.instructions.push(...entryBlock.instructions);
+      if (blocks.size > 1) {
+        /**
+         * We're splicing in a set of value-blocks, which means we need
+         * to push new blocks and update terminals.
+         */
+        CompilerError.invariant(
+          terminalFallthrough(entryBlock.terminal) === rewrite.exitBlockId,
+          {
+            reason:
+              '[InferEffectDependencies] Internal invariant broken: expected entry block to have a fallthrough',
+            loc: entryBlock.terminal.loc,
+          },
+        );
+        const originalTerminal = currBlock.terminal;
+        currBlock.terminal = entryBlock.terminal;
+
+        for (const [id, block] of blocks) {
+          if (id === entry) {
+            continue;
+          }
+          if (id === rewrite.exitBlockId) {
+            block.terminal = originalTerminal;
+            currBlock = block;
+          }
+          rewriteBlocks.push(block);
+        }
+      }
+    }
+  }
+  currBlock.instructions.push(...originalInstrs.slice(cursor));
+}
+
+function inferReactiveIdentifiers(fn: HIRFunction): Set<IdentifierId> {
+  const reactiveIds: Set<IdentifierId> = new Set();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      /**
+       * No need to traverse into nested functions as
+       * 1. their effects are recorded in `LoweredFunction.dependencies`
+       * 2. we don't mark `reactive` in these anyways
+       */
+      for (const place of eachInstructionOperand(instr)) {
+        if (place.reactive) {
+          reactiveIds.add(place.identifier.id);
+        }
+      }
+    }
+
+    for (const place of eachTerminalOperand(block.terminal)) {
+      if (place.reactive) {
+        reactiveIds.add(place.identifier.id);
+      }
+    }
+  }
+  return reactiveIds;
+}
+
+function collectDepUsages(
+  deps: Array<ReactiveScopeDependency>,
+  fnExpr: FunctionExpression,
+): Array<SourceLocation> {
+  const identifiers: Map<IdentifierId, ReactiveScopeDependency> = new Map();
+  const loadedDeps: Set<IdentifierId> = new Set();
+  const sourceLocations = [];
+  for (const dep of deps) {
+    identifiers.set(dep.identifier.id, dep);
+  }
+
+  for (const [, block] of fnExpr.loweredFunc.func.body.blocks) {
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'LoadLocal' &&
+        identifiers.has(instr.value.place.identifier.id)
+      ) {
+        loadedDeps.add(instr.lvalue.identifier.id);
+      }
+      for (const place of eachInstructionOperand(instr)) {
+        if (loadedDeps.has(place.identifier.id)) {
+          // TODO(@jbrown215): handle member exprs!!
+          sourceLocations.push(place.identifier.loc);
+        }
+      }
+    }
+  }
+
+  return sourceLocations;
+}
+
+function inferMinimalDependencies(
+  fnInstr: TInstruction<FunctionExpression>,
+): Set<ReactiveScopeDependency> {
+  const fn = fnInstr.value.loweredFunc.func;
+
+  const temporaries = collectTemporariesSidemap(fn, new Set());
+  const {
+    hoistableObjects,
+    processedInstrsInOptional,
+    temporariesReadInOptional,
+  } = collectOptionalChainSidemap(fn);
+
+  const hoistablePropertyLoads = collectHoistablePropertyLoadsInInnerFn(
+    fnInstr,
+    temporaries,
+    hoistableObjects,
+  );
+  const hoistableToFnEntry = hoistablePropertyLoads.get(fn.body.entry);
+  CompilerError.invariant(hoistableToFnEntry != null, {
+    reason:
+      '[InferEffectDependencies] Internal invariant broken: missing entry block',
+    loc: fnInstr.loc,
+  });
+
+  const dependencies = inferDependencies(
+    fnInstr,
+    new Map([...temporaries, ...temporariesReadInOptional]),
+    processedInstrsInOptional,
+  );
+
+  const tree = new ReactiveScopeDependencyTreeHIR(
+    [...hoistableToFnEntry.assumedNonNullObjects].map(o => o.fullPath),
+  );
+  for (const dep of dependencies) {
+    tree.addDependency({...dep});
+  }
+
+  return tree.deriveMinimalDependencies();
+}
+
+function inferDependencies(
+  fnInstr: TInstruction<FunctionExpression>,
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+  processedInstrsInOptional: ReadonlySet<Instruction | Terminal>,
+): Set<ReactiveScopeDependency> {
+  const fn = fnInstr.value.loweredFunc.func;
+  const context = new DependencyCollectionContext(
+    new Set(),
+    temporaries,
+    processedInstrsInOptional,
+  );
+  for (const dep of fn.context) {
+    context.declare(dep.identifier, {
+      id: makeInstructionId(0),
+      scope: empty(),
+    });
+  }
+  const placeholderScope: ReactiveScope = {
+    id: makeScopeId(0),
+    range: {
+      start: fnInstr.id,
+      end: makeInstructionId(fnInstr.id + 1),
+    },
+    dependencies: new Set(),
+    reassignments: new Set(),
+    declarations: new Map(),
+    earlyReturnValue: null,
+    merged: new Set(),
+    loc: GeneratedSource,
+  };
+  context.enterScope(placeholderScope);
+  inferDependenciesInFn(fn, context, temporaries);
+  context.exitScope(placeholderScope, false);
+  const resultUnfiltered = context.deps.get(placeholderScope);
+  CompilerError.invariant(resultUnfiltered != null, {
+    reason:
+      '[InferEffectDependencies] Internal invariant broken: missing scope dependencies',
+    loc: fn.loc,
+  });
+
+  const fnContext = new Set(fn.context.map(dep => dep.identifier.id));
+  const result = new Set<ReactiveScopeDependency>();
+  for (const dep of resultUnfiltered) {
+    if (fnContext.has(dep.identifier.id)) {
+      result.add(dep);
+    }
+  }
+
+  return result;
+}
+
+function inferDependenciesInFn(
+  fn: HIRFunction,
+  context: DependencyCollectionContext,
+  temporaries: ReadonlyMap<IdentifierId, ReactiveScopeDependency>,
+): void {
+  for (const [, block] of fn.body.blocks) {
+    // Record referenced optional chains in phis
+    for (const phi of block.phis) {
+      for (const operand of phi.operands) {
+        const maybeOptionalChain = temporaries.get(operand[1].identifier.id);
+        if (maybeOptionalChain) {
+          context.visitDependency(maybeOptionalChain);
+        }
+      }
+    }
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'FunctionExpression' ||
+        instr.value.kind === 'ObjectMethod'
+      ) {
+        context.declare(instr.lvalue.identifier, {
+          id: instr.id,
+          scope: context.currentScope,
+        });
+        /**
+         * Recursively visit the inner function to extract dependencies
+         */
+        const innerFn = instr.value.loweredFunc.func;
+        context.enterInnerFn(instr as TInstruction<FunctionExpression>, () => {
+          inferDependenciesInFn(innerFn, context, temporaries);
+        });
+      } else {
+        handleInstruction(instr, context);
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
new file mode 100644
index 00000000000..ca916626311
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
@@ -0,0 +1,2975 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  Effect,
+  SourceLocation,
+  ValueKind,
+} from '..';
+import {
+  BasicBlock,
+  BlockId,
+  DeclarationId,
+  Environment,
+  FunctionExpression,
+  GeneratedSource,
+  getHookKind,
+  HIRFunction,
+  Hole,
+  IdentifierId,
+  Instruction,
+  InstructionKind,
+  InstructionValue,
+  isArrayType,
+  isJsxType,
+  isMapType,
+  isPrimitiveType,
+  isRefOrRefValue,
+  isSetType,
+  makeIdentifierId,
+  Phi,
+  Place,
+  SpreadPattern,
+  Type,
+  ValueReason,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachPatternItem,
+  eachTerminalOperand,
+  eachTerminalSuccessor,
+} from '../HIR/visitors';
+import {Ok, Result} from '../Utils/Result';
+import {
+  assertExhaustive,
+  getOrInsertDefault,
+  getOrInsertWith,
+  Set_isSuperset,
+} from '../Utils/utils';
+import {
+  printAliasingEffect,
+  printAliasingSignature,
+  printIdentifier,
+  printInstruction,
+  printInstructionValue,
+  printPlace,
+} from '../HIR/PrintHIR';
+import {FunctionSignature} from '../HIR/ObjectShape';
+import prettyFormat from 'pretty-format';
+import {createTemporaryPlace} from '../HIR/HIRBuilder';
+import {
+  AliasingEffect,
+  AliasingSignature,
+  hashEffect,
+  MutationReason,
+} from './AliasingEffects';
+import {ErrorCategory} from '../CompilerError';
+
+const DEBUG = false;
+
+/**
+ * Infers the mutation/aliasing effects for instructions and terminals and annotates
+ * them on the HIR, making the effects of builtin instructions/functions as well as
+ * user-defined functions explicit. These effects then form the basis for subsequent
+ * analysis to determine the mutable range of each value in the program — the set of
+ * instructions over which the value is created and mutated — as well as validation
+ * against invalid code.
+ *
+ * At a high level the approach is:
+ * - Determine a set of candidate effects based purely on the syntax of the instruction
+ *   and the types involved. These candidate effects are cached the first time each
+ *   instruction is visited. The idea is to reason about the semantics of the instruction
+ *   or function in isolation, separately from how those effects may interact with later
+ *   abstract interpretation.
+ * - Then we do abstract interpretation over the HIR, iterating until reaching a fixpoint.
+ *   This phase tracks the abstract kind of each value (mutable, primitive, frozen, etc)
+ *   and the set of values pointed to by each identifier. Each candidate effect is "applied"
+ *   to the current abtract state, and effects may be dropped or rewritten accordingly.
+ *   For example, a "MutateConditionally <x>" effect may be dropped if x is not a mutable
+ *   value. A "Mutate <y>" effect may get converted into a "MutateFrozen <error>" effect
+ *   if y is mutable, etc.
+ */
+export function inferMutationAliasingEffects(
+  fn: HIRFunction,
+  {isFunctionExpression}: {isFunctionExpression: boolean} = {
+    isFunctionExpression: false,
+  },
+): Result<void, CompilerError> {
+  const initialState = InferenceState.empty(fn.env, isFunctionExpression);
+
+  // Map of blocks to the last (merged) incoming state that was processed
+  const statesByBlock: Map<BlockId, InferenceState> = new Map();
+
+  for (const ref of fn.context) {
+    // TODO: using InstructionValue as a bit of a hack, but it's pragmatic
+    const value: InstructionValue = {
+      kind: 'ObjectExpression',
+      properties: [],
+      loc: ref.loc,
+    };
+    initialState.initialize(value, {
+      kind: ValueKind.Context,
+      reason: new Set([ValueReason.Other]),
+    });
+    initialState.define(ref, value);
+  }
+
+  const paramKind: AbstractValue = isFunctionExpression
+    ? {
+        kind: ValueKind.Mutable,
+        reason: new Set([ValueReason.Other]),
+      }
+    : {
+        kind: ValueKind.Frozen,
+        reason: new Set([ValueReason.ReactiveFunctionArgument]),
+      };
+
+  if (fn.fnType === 'Component') {
+    CompilerError.invariant(fn.params.length <= 2, {
+      reason:
+        'Expected React component to have not more than two parameters: one for props and for ref',
+      loc: fn.loc,
+    });
+    const [props, ref] = fn.params;
+    if (props != null) {
+      inferParam(props, initialState, paramKind);
+    }
+    if (ref != null) {
+      const place = ref.kind === 'Identifier' ? ref : ref.place;
+      const value: InstructionValue = {
+        kind: 'ObjectExpression',
+        properties: [],
+        loc: place.loc,
+      };
+      initialState.initialize(value, {
+        kind: ValueKind.Mutable,
+        reason: new Set([ValueReason.Other]),
+      });
+      initialState.define(place, value);
+    }
+  } else {
+    for (const param of fn.params) {
+      inferParam(param, initialState, paramKind);
+    }
+  }
+
+  /*
+   * Multiple predecessors may be visited prior to reaching a given successor,
+   * so track the list of incoming state for each successor block.
+   * These are merged when reaching that block again.
+   */
+  const queuedStates: Map<BlockId, InferenceState> = new Map();
+  function queue(blockId: BlockId, state: InferenceState): void {
+    let queuedState = queuedStates.get(blockId);
+    if (queuedState != null) {
+      // merge the queued states for this block
+      state = queuedState.merge(state) ?? queuedState;
+      queuedStates.set(blockId, state);
+    } else {
+      /*
+       * this is the first queued state for this block, see whether
+       * there are changed relative to the last time it was processed.
+       */
+      const prevState = statesByBlock.get(blockId);
+      const nextState = prevState != null ? prevState.merge(state) : state;
+      if (nextState != null) {
+        queuedStates.set(blockId, nextState);
+      }
+    }
+  }
+  queue(fn.body.entry, initialState);
+
+  const hoistedContextDeclarations = findHoistedContextDeclarations(fn);
+
+  const context = new Context(
+    isFunctionExpression,
+    fn,
+    hoistedContextDeclarations,
+    findNonMutatedDestructureSpreads(fn),
+  );
+
+  let iterationCount = 0;
+  while (queuedStates.size !== 0) {
+    iterationCount++;
+    if (iterationCount > 100) {
+      CompilerError.invariant(false, {
+        reason: `[InferMutationAliasingEffects] Potential infinite loop`,
+        description: `A value, temporary place, or effect was not cached properly`,
+        loc: fn.loc,
+      });
+    }
+    for (const [blockId, block] of fn.body.blocks) {
+      const incomingState = queuedStates.get(blockId);
+      queuedStates.delete(blockId);
+      if (incomingState == null) {
+        continue;
+      }
+
+      statesByBlock.set(blockId, incomingState);
+      const state = incomingState.clone();
+      inferBlock(context, state, block);
+
+      for (const nextBlockId of eachTerminalSuccessor(block.terminal)) {
+        queue(nextBlockId, state);
+      }
+    }
+  }
+  return Ok(undefined);
+}
+
+function findHoistedContextDeclarations(
+  fn: HIRFunction,
+): Map<DeclarationId, Place | null> {
+  const hoisted = new Map<DeclarationId, Place | null>();
+  function visit(place: Place): void {
+    if (
+      hoisted.has(place.identifier.declarationId) &&
+      hoisted.get(place.identifier.declarationId) == null
+    ) {
+      // If this is the first load of the value, store the location
+      hoisted.set(place.identifier.declarationId, place);
+    }
+  }
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      if (instr.value.kind === 'DeclareContext') {
+        const kind = instr.value.lvalue.kind;
+        if (
+          kind == InstructionKind.HoistedConst ||
+          kind == InstructionKind.HoistedFunction ||
+          kind == InstructionKind.HoistedLet
+        ) {
+          hoisted.set(instr.value.lvalue.place.identifier.declarationId, null);
+        }
+      } else {
+        for (const operand of eachInstructionValueOperand(instr.value)) {
+          visit(operand);
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      visit(operand);
+    }
+  }
+  return hoisted;
+}
+
+class Context {
+  internedEffects: Map<string, AliasingEffect> = new Map();
+  instructionSignatureCache: Map<Instruction, InstructionSignature> = new Map();
+  effectInstructionValueCache: Map<AliasingEffect, InstructionValue> =
+    new Map();
+  applySignatureCache: Map<
+    AliasingSignature,
+    Map<AliasingEffect, Array<AliasingEffect> | null>
+  > = new Map();
+  catchHandlers: Map<BlockId, Place> = new Map();
+  functionSignatureCache: Map<FunctionExpression, AliasingSignature> =
+    new Map();
+  isFuctionExpression: boolean;
+  fn: HIRFunction;
+  hoistedContextDeclarations: Map<DeclarationId, Place | null>;
+  nonMutatingSpreads: Set<IdentifierId>;
+
+  constructor(
+    isFunctionExpression: boolean,
+    fn: HIRFunction,
+    hoistedContextDeclarations: Map<DeclarationId, Place | null>,
+    nonMutatingSpreads: Set<IdentifierId>,
+  ) {
+    this.isFuctionExpression = isFunctionExpression;
+    this.fn = fn;
+    this.hoistedContextDeclarations = hoistedContextDeclarations;
+    this.nonMutatingSpreads = nonMutatingSpreads;
+  }
+
+  cacheApplySignature(
+    signature: AliasingSignature,
+    effect: Extract<AliasingEffect, {kind: 'Apply'}>,
+    f: () => Array<AliasingEffect> | null,
+  ): Array<AliasingEffect> | null {
+    const inner = getOrInsertDefault(
+      this.applySignatureCache,
+      signature,
+      new Map(),
+    );
+    return getOrInsertWith(inner, effect, f);
+  }
+
+  internEffect(effect: AliasingEffect): AliasingEffect {
+    const hash = hashEffect(effect);
+    let interned = this.internedEffects.get(hash);
+    if (interned == null) {
+      this.internedEffects.set(hash, effect);
+      interned = effect;
+    }
+    return interned;
+  }
+}
+
+/**
+ * Finds objects created via ObjectPattern spread destructuring
+ * (`const {x, ...spread} = ...`) where a) the rvalue is known frozen and
+ * b) the spread value cannot possibly be directly mutated. The idea is that
+ * for this set of values, we can treat the spread object as frozen.
+ *
+ * The primary use case for this is props spreading:
+ *
+ * ```
+ * function Component({prop, ...otherProps}) {
+ *   const transformedProp = transform(prop, otherProps.foo);
+ *   // pass `otherProps` down:
+ *   return <Foo {...otherProps} prop={transformedProp} />;
+ * }
+ * ```
+ *
+ * Here we know that since `otherProps` cannot be mutated, we don't have to treat
+ * it as mutable: `otherProps.foo` only reads a value that must be frozen, so it
+ * can be treated as frozen too.
+ */
+function findNonMutatedDestructureSpreads(fn: HIRFunction): Set<IdentifierId> {
+  const knownFrozen = new Set<IdentifierId>();
+  if (fn.fnType === 'Component') {
+    const [props] = fn.params;
+    if (props != null && props.kind === 'Identifier') {
+      knownFrozen.add(props.identifier.id);
+    }
+  } else {
+    for (const param of fn.params) {
+      if (param.kind === 'Identifier') {
+        knownFrozen.add(param.identifier.id);
+      }
+    }
+  }
+
+  // Map of temporaries to identifiers for spread objects
+  const candidateNonMutatingSpreads = new Map<IdentifierId, IdentifierId>();
+  for (const block of fn.body.blocks.values()) {
+    if (candidateNonMutatingSpreads.size !== 0) {
+      for (const phi of block.phis) {
+        for (const operand of phi.operands.values()) {
+          const spread = candidateNonMutatingSpreads.get(operand.identifier.id);
+          if (spread != null) {
+            candidateNonMutatingSpreads.delete(spread);
+          }
+        }
+      }
+    }
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'Destructure': {
+          if (
+            !knownFrozen.has(value.value.identifier.id) ||
+            !(
+              value.lvalue.kind === InstructionKind.Let ||
+              value.lvalue.kind === InstructionKind.Const
+            ) ||
+            value.lvalue.pattern.kind !== 'ObjectPattern'
+          ) {
+            continue;
+          }
+          for (const item of value.lvalue.pattern.properties) {
+            if (item.kind !== 'Spread') {
+              continue;
+            }
+            candidateNonMutatingSpreads.set(
+              item.place.identifier.id,
+              item.place.identifier.id,
+            );
+          }
+          break;
+        }
+        case 'LoadLocal': {
+          const spread = candidateNonMutatingSpreads.get(
+            value.place.identifier.id,
+          );
+          if (spread != null) {
+            candidateNonMutatingSpreads.set(lvalue.identifier.id, spread);
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          const spread = candidateNonMutatingSpreads.get(
+            value.value.identifier.id,
+          );
+          if (spread != null) {
+            candidateNonMutatingSpreads.set(lvalue.identifier.id, spread);
+            candidateNonMutatingSpreads.set(
+              value.lvalue.place.identifier.id,
+              spread,
+            );
+          }
+          break;
+        }
+        case 'JsxFragment':
+        case 'JsxExpression': {
+          // Passing objects created with spread to jsx can't mutate them
+          break;
+        }
+        case 'PropertyLoad': {
+          // Properties must be frozen since the original value was frozen
+          break;
+        }
+        case 'CallExpression':
+        case 'MethodCall': {
+          const callee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          if (getHookKind(fn.env, callee.identifier) != null) {
+            // Hook calls have frozen arguments, and non-ref returns are frozen
+            if (!isRefOrRefValue(lvalue.identifier)) {
+              knownFrozen.add(lvalue.identifier.id);
+            }
+          } else {
+            // Non-hook calls check their operands, since they are potentially mutable
+            if (candidateNonMutatingSpreads.size !== 0) {
+              // Otherwise any reference to the spread object itself may mutate
+              for (const operand of eachInstructionValueOperand(value)) {
+                const spread = candidateNonMutatingSpreads.get(
+                  operand.identifier.id,
+                );
+                if (spread != null) {
+                  candidateNonMutatingSpreads.delete(spread);
+                }
+              }
+            }
+          }
+          break;
+        }
+        default: {
+          if (candidateNonMutatingSpreads.size !== 0) {
+            // Otherwise any reference to the spread object itself may mutate
+            for (const operand of eachInstructionValueOperand(value)) {
+              const spread = candidateNonMutatingSpreads.get(
+                operand.identifier.id,
+              );
+              if (spread != null) {
+                candidateNonMutatingSpreads.delete(spread);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  const nonMutatingSpreads = new Set<IdentifierId>();
+  for (const [key, value] of candidateNonMutatingSpreads) {
+    if (key === value) {
+      nonMutatingSpreads.add(key);
+    }
+  }
+  return nonMutatingSpreads;
+}
+
+function inferParam(
+  param: Place | SpreadPattern,
+  initialState: InferenceState,
+  paramKind: AbstractValue,
+): void {
+  const place = param.kind === 'Identifier' ? param : param.place;
+  const value: InstructionValue = {
+    kind: 'Primitive',
+    loc: place.loc,
+    value: undefined,
+  };
+  initialState.initialize(value, paramKind);
+  initialState.define(place, value);
+}
+
+function inferBlock(
+  context: Context,
+  state: InferenceState,
+  block: BasicBlock,
+): void {
+  for (const phi of block.phis) {
+    state.inferPhi(phi);
+  }
+
+  for (const instr of block.instructions) {
+    let instructionSignature = context.instructionSignatureCache.get(instr);
+    if (instructionSignature == null) {
+      instructionSignature = computeSignatureForInstruction(
+        context,
+        state.env,
+        instr,
+      );
+      context.instructionSignatureCache.set(instr, instructionSignature);
+    }
+    const effects = applySignature(context, state, instructionSignature, instr);
+    instr.effects = effects;
+  }
+  const terminal = block.terminal;
+  if (terminal.kind === 'try' && terminal.handlerBinding != null) {
+    context.catchHandlers.set(terminal.handler, terminal.handlerBinding);
+  } else if (terminal.kind === 'maybe-throw') {
+    const handlerParam = context.catchHandlers.get(terminal.handler);
+    if (handlerParam != null) {
+      CompilerError.invariant(state.kind(handlerParam) != null, {
+        reason:
+          'Expected catch binding to be intialized with a DeclareLocal Catch instruction',
+        loc: terminal.loc,
+      });
+      const effects: Array<AliasingEffect> = [];
+      for (const instr of block.instructions) {
+        if (
+          instr.value.kind === 'CallExpression' ||
+          instr.value.kind === 'MethodCall'
+        ) {
+          /**
+           * Many instructions can error, but only calls can throw their result as the error
+           * itself. For example, `c = a.b` can throw if `a` is nullish, but the thrown value
+           * is an error object synthesized by the JS runtime. Whereas `throwsInput(x)` can
+           * throw (effectively) the result of the call.
+           *
+           * TODO: call applyEffect() instead. This meant that the catch param wasn't inferred
+           * as a mutable value, though. See `try-catch-try-value-modified-in-catch-escaping.js`
+           * fixture as an example
+           */
+          state.appendAlias(handlerParam, instr.lvalue);
+          const kind = state.kind(instr.lvalue).kind;
+          if (kind === ValueKind.Mutable || kind == ValueKind.Context) {
+            effects.push(
+              context.internEffect({
+                kind: 'Alias',
+                from: instr.lvalue,
+                into: handlerParam,
+              }),
+            );
+          }
+        }
+      }
+      terminal.effects = effects.length !== 0 ? effects : null;
+    }
+  } else if (terminal.kind === 'return') {
+    if (!context.isFuctionExpression) {
+      terminal.effects = [
+        context.internEffect({
+          kind: 'Freeze',
+          value: terminal.value,
+          reason: ValueReason.JsxCaptured,
+        }),
+      ];
+    }
+  }
+}
+
+/**
+ * Applies the signature to the given state to determine the precise set of effects
+ * that will occur in practice. This takes into account the inferred state of each
+ * variable. For example, the signature may have a `ConditionallyMutate x` effect.
+ * Here, we check the abstract type of `x` and either record a `Mutate x` if x is mutable
+ * or no effect if x is a primitive, global, or frozen.
+ *
+ * This phase may also emit errors, for example MutateLocal on a frozen value is invalid.
+ */
+function applySignature(
+  context: Context,
+  state: InferenceState,
+  signature: InstructionSignature,
+  instruction: Instruction,
+): Array<AliasingEffect> | null {
+  const effects: Array<AliasingEffect> = [];
+  /**
+   * For function instructions, eagerly validate that they aren't mutating
+   * a known-frozen value.
+   *
+   * TODO: make sure we're also validating against global mutations somewhere, but
+   * account for this being allowed in effects/event handlers.
+   */
+  if (
+    instruction.value.kind === 'FunctionExpression' ||
+    instruction.value.kind === 'ObjectMethod'
+  ) {
+    const aliasingEffects =
+      instruction.value.loweredFunc.func.aliasingEffects ?? [];
+    const context = new Set(
+      instruction.value.loweredFunc.func.context.map(p => p.identifier.id),
+    );
+    for (const effect of aliasingEffects) {
+      if (effect.kind === 'Mutate' || effect.kind === 'MutateTransitive') {
+        if (!context.has(effect.value.identifier.id)) {
+          continue;
+        }
+        const value = state.kind(effect.value);
+        switch (value.kind) {
+          case ValueKind.Frozen: {
+            const reason = getWriteErrorReason({
+              kind: value.kind,
+              reason: value.reason,
+            });
+            const variable =
+              effect.value.identifier.name !== null &&
+              effect.value.identifier.name.kind === 'named'
+                ? `\`${effect.value.identifier.name.value}\``
+                : 'value';
+            const diagnostic = CompilerDiagnostic.create({
+              category: ErrorCategory.Immutability,
+              reason: 'This value cannot be modified',
+              description: reason,
+            }).withDetails({
+              kind: 'error',
+              loc: effect.value.loc,
+              message: `${variable} cannot be modified`,
+            });
+            if (
+              effect.kind === 'Mutate' &&
+              effect.reason?.kind === 'AssignCurrentProperty'
+            ) {
+              diagnostic.withDetails({
+                kind: 'hint',
+                message: `Hint: If this value is a Ref (value returned by \`useRef()\`), rename the variable to end in "Ref".`,
+              });
+            }
+            effects.push({
+              kind: 'MutateFrozen',
+              place: effect.value,
+              error: diagnostic,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  /*
+   * Track which values we've already aliased once, so that we can switch to
+   * appendAlias() for subsequent aliases into the same value
+   */
+  const initialized = new Set<IdentifierId>();
+
+  if (DEBUG) {
+    console.log(printInstruction(instruction));
+  }
+
+  for (const effect of signature.effects) {
+    applyEffect(context, state, effect, initialized, effects);
+  }
+  if (DEBUG) {
+    console.log(
+      prettyFormat(state.debugAbstractValue(state.kind(instruction.lvalue))),
+    );
+    console.log(
+      effects.map(effect => `  ${printAliasingEffect(effect)}`).join('\n'),
+    );
+  }
+  if (
+    !(state.isDefined(instruction.lvalue) && state.kind(instruction.lvalue))
+  ) {
+    CompilerError.invariant(false, {
+      reason: `Expected instruction lvalue to be initialized`,
+      loc: instruction.loc,
+    });
+  }
+  return effects.length !== 0 ? effects : null;
+}
+
+function applyEffect(
+  context: Context,
+  state: InferenceState,
+  _effect: AliasingEffect,
+  initialized: Set<IdentifierId>,
+  effects: Array<AliasingEffect>,
+): void {
+  const effect = context.internEffect(_effect);
+  if (DEBUG) {
+    console.log(printAliasingEffect(effect));
+  }
+  switch (effect.kind) {
+    case 'Freeze': {
+      const didFreeze = state.freeze(effect.value, effect.reason);
+      if (didFreeze) {
+        effects.push(effect);
+      }
+      break;
+    }
+    case 'Create': {
+      CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
+        reason: `Cannot re-initialize variable within an instruction`,
+        description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
+        loc: effect.into.loc,
+      });
+      initialized.add(effect.into.identifier.id);
+
+      let value = context.effectInstructionValueCache.get(effect);
+      if (value == null) {
+        value = {
+          kind: 'ObjectExpression',
+          properties: [],
+          loc: effect.into.loc,
+        };
+        context.effectInstructionValueCache.set(effect, value);
+      }
+      state.initialize(value, {
+        kind: effect.value,
+        reason: new Set([effect.reason]),
+      });
+      state.define(effect.into, value);
+      effects.push(effect);
+      break;
+    }
+    case 'ImmutableCapture': {
+      const kind = state.kind(effect.from).kind;
+      switch (kind) {
+        case ValueKind.Global:
+        case ValueKind.Primitive: {
+          // no-op: we don't need to track data flow for copy types
+          break;
+        }
+        default: {
+          effects.push(effect);
+        }
+      }
+      break;
+    }
+    case 'CreateFrom': {
+      CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
+        reason: `Cannot re-initialize variable within an instruction`,
+        description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
+        loc: effect.into.loc,
+      });
+      initialized.add(effect.into.identifier.id);
+
+      const fromValue = state.kind(effect.from);
+      let value = context.effectInstructionValueCache.get(effect);
+      if (value == null) {
+        value = {
+          kind: 'ObjectExpression',
+          properties: [],
+          loc: effect.into.loc,
+        };
+        context.effectInstructionValueCache.set(effect, value);
+      }
+      state.initialize(value, {
+        kind: fromValue.kind,
+        reason: new Set(fromValue.reason),
+      });
+      state.define(effect.into, value);
+      switch (fromValue.kind) {
+        case ValueKind.Primitive:
+        case ValueKind.Global: {
+          effects.push({
+            kind: 'Create',
+            value: fromValue.kind,
+            into: effect.into,
+            reason: [...fromValue.reason][0] ?? ValueReason.Other,
+          });
+          break;
+        }
+        case ValueKind.Frozen: {
+          effects.push({
+            kind: 'Create',
+            value: fromValue.kind,
+            into: effect.into,
+            reason: [...fromValue.reason][0] ?? ValueReason.Other,
+          });
+          applyEffect(
+            context,
+            state,
+            {
+              kind: 'ImmutableCapture',
+              from: effect.from,
+              into: effect.into,
+            },
+            initialized,
+            effects,
+          );
+          break;
+        }
+        default: {
+          effects.push(effect);
+        }
+      }
+      break;
+    }
+    case 'CreateFunction': {
+      CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
+        reason: `Cannot re-initialize variable within an instruction`,
+        description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
+        loc: effect.into.loc,
+      });
+      initialized.add(effect.into.identifier.id);
+
+      effects.push(effect);
+      /**
+       * We consider the function mutable if it has any mutable context variables or
+       * any side-effects that need to be tracked if the function is called.
+       */
+      const hasCaptures = effect.captures.some(capture => {
+        switch (state.kind(capture).kind) {
+          case ValueKind.Context:
+          case ValueKind.Mutable: {
+            return true;
+          }
+          default: {
+            return false;
+          }
+        }
+      });
+      const hasTrackedSideEffects =
+        effect.function.loweredFunc.func.aliasingEffects?.some(
+          effect =>
+            // TODO; include "render" here?
+            effect.kind === 'MutateFrozen' ||
+            effect.kind === 'MutateGlobal' ||
+            effect.kind === 'Impure',
+        );
+      // For legacy compatibility
+      const capturesRef = effect.function.loweredFunc.func.context.some(
+        operand => isRefOrRefValue(operand.identifier),
+      );
+      const isMutable = hasCaptures || hasTrackedSideEffects || capturesRef;
+      for (const operand of effect.function.loweredFunc.func.context) {
+        if (operand.effect !== Effect.Capture) {
+          continue;
+        }
+        const kind = state.kind(operand).kind;
+        if (
+          kind === ValueKind.Primitive ||
+          kind == ValueKind.Frozen ||
+          kind == ValueKind.Global
+        ) {
+          operand.effect = Effect.Read;
+        }
+      }
+      state.initialize(effect.function, {
+        kind: isMutable ? ValueKind.Mutable : ValueKind.Frozen,
+        reason: new Set([]),
+      });
+      state.define(effect.into, effect.function);
+      for (const capture of effect.captures) {
+        applyEffect(
+          context,
+          state,
+          {
+            kind: 'Capture',
+            from: capture,
+            into: effect.into,
+          },
+          initialized,
+          effects,
+        );
+      }
+      break;
+    }
+    case 'MaybeAlias':
+    case 'Alias':
+    case 'Capture': {
+      CompilerError.invariant(
+        effect.kind === 'Capture' ||
+          effect.kind === 'MaybeAlias' ||
+          initialized.has(effect.into.identifier.id),
+        {
+          reason: `Expected destination to already be initialized within this instruction`,
+          description:
+            `Destination ${printPlace(effect.into)} is not initialized in this ` +
+            `instruction for effect ${printAliasingEffect(effect)}`,
+          loc: effect.into.loc,
+        },
+      );
+      /*
+       * Capture describes potential information flow: storing a pointer to one value
+       * within another. If the destination is not mutable, or the source value has
+       * copy-on-write semantics, then we can prune the effect
+       */
+      const intoKind = state.kind(effect.into).kind;
+      let destinationType: 'context' | 'mutable' | null = null;
+      switch (intoKind) {
+        case ValueKind.Context: {
+          destinationType = 'context';
+          break;
+        }
+        case ValueKind.Mutable:
+        case ValueKind.MaybeFrozen: {
+          destinationType = 'mutable';
+          break;
+        }
+      }
+      const fromKind = state.kind(effect.from).kind;
+      let sourceType: 'context' | 'mutable' | 'frozen' | null = null;
+      switch (fromKind) {
+        case ValueKind.Context: {
+          sourceType = 'context';
+          break;
+        }
+        case ValueKind.Global:
+        case ValueKind.Primitive: {
+          break;
+        }
+        case ValueKind.MaybeFrozen:
+        case ValueKind.Frozen: {
+          sourceType = 'frozen';
+          break;
+        }
+        default: {
+          sourceType = 'mutable';
+          break;
+        }
+      }
+
+      if (sourceType === 'frozen') {
+        applyEffect(
+          context,
+          state,
+          {
+            kind: 'ImmutableCapture',
+            from: effect.from,
+            into: effect.into,
+          },
+          initialized,
+          effects,
+        );
+      } else if (
+        (sourceType === 'mutable' && destinationType === 'mutable') ||
+        effect.kind === 'MaybeAlias'
+      ) {
+        effects.push(effect);
+      } else if (
+        (sourceType === 'context' && destinationType != null) ||
+        (sourceType === 'mutable' && destinationType === 'context')
+      ) {
+        applyEffect(
+          context,
+          state,
+          {kind: 'MaybeAlias', from: effect.from, into: effect.into},
+          initialized,
+          effects,
+        );
+      }
+      break;
+    }
+    case 'Assign': {
+      CompilerError.invariant(!initialized.has(effect.into.identifier.id), {
+        reason: `Cannot re-initialize variable within an instruction`,
+        description: `Re-initialized ${printPlace(effect.into)} in ${printAliasingEffect(effect)}`,
+        loc: effect.into.loc,
+      });
+      initialized.add(effect.into.identifier.id);
+
+      /*
+       * Alias represents potential pointer aliasing. If the type is a global,
+       * a primitive (copy-on-write semantics) then we can prune the effect
+       */
+      const fromValue = state.kind(effect.from);
+      const fromKind = fromValue.kind;
+      switch (fromKind) {
+        case ValueKind.Frozen: {
+          applyEffect(
+            context,
+            state,
+            {
+              kind: 'ImmutableCapture',
+              from: effect.from,
+              into: effect.into,
+            },
+            initialized,
+            effects,
+          );
+          let value = context.effectInstructionValueCache.get(effect);
+          if (value == null) {
+            value = {
+              kind: 'Primitive',
+              value: undefined,
+              loc: effect.from.loc,
+            };
+            context.effectInstructionValueCache.set(effect, value);
+          }
+          state.initialize(value, {
+            kind: fromKind,
+            reason: new Set(fromValue.reason),
+          });
+          state.define(effect.into, value);
+          break;
+        }
+        case ValueKind.Global:
+        case ValueKind.Primitive: {
+          let value = context.effectInstructionValueCache.get(effect);
+          if (value == null) {
+            value = {
+              kind: 'Primitive',
+              value: undefined,
+              loc: effect.from.loc,
+            };
+            context.effectInstructionValueCache.set(effect, value);
+          }
+          state.initialize(value, {
+            kind: fromKind,
+            reason: new Set(fromValue.reason),
+          });
+          state.define(effect.into, value);
+          break;
+        }
+        default: {
+          state.assign(effect.into, effect.from);
+          effects.push(effect);
+          break;
+        }
+      }
+      break;
+    }
+    case 'Apply': {
+      const functionValues = state.values(effect.function);
+      if (
+        functionValues.length === 1 &&
+        functionValues[0].kind === 'FunctionExpression' &&
+        functionValues[0].loweredFunc.func.aliasingEffects != null
+      ) {
+        /*
+         * We're calling a locally declared function, we already know it's effects!
+         * We just have to substitute in the args for the params
+         */
+        const functionExpr = functionValues[0];
+        let signature = context.functionSignatureCache.get(functionExpr);
+        if (signature == null) {
+          signature = buildSignatureFromFunctionExpression(
+            state.env,
+            functionExpr,
+          );
+          context.functionSignatureCache.set(functionExpr, signature);
+        }
+        if (DEBUG) {
+          console.log(
+            `constructed alias signature:\n${printAliasingSignature(signature)}`,
+          );
+        }
+        const signatureEffects = context.cacheApplySignature(
+          signature,
+          effect,
+          () =>
+            computeEffectsForSignature(
+              state.env,
+              signature,
+              effect.into,
+              effect.receiver,
+              effect.args,
+              functionExpr.loweredFunc.func.context,
+              effect.loc,
+            ),
+        );
+        if (signatureEffects != null) {
+          applyEffect(
+            context,
+            state,
+            {kind: 'MutateTransitiveConditionally', value: effect.function},
+            initialized,
+            effects,
+          );
+          for (const signatureEffect of signatureEffects) {
+            applyEffect(context, state, signatureEffect, initialized, effects);
+          }
+          break;
+        }
+      }
+      let signatureEffects = null;
+      if (effect.signature?.aliasing != null) {
+        const signature = effect.signature.aliasing;
+        signatureEffects = context.cacheApplySignature(
+          effect.signature.aliasing,
+          effect,
+          () =>
+            computeEffectsForSignature(
+              state.env,
+              signature,
+              effect.into,
+              effect.receiver,
+              effect.args,
+              [],
+              effect.loc,
+            ),
+        );
+      }
+      if (signatureEffects != null) {
+        for (const signatureEffect of signatureEffects) {
+          applyEffect(context, state, signatureEffect, initialized, effects);
+        }
+      } else if (effect.signature != null) {
+        const legacyEffects = computeEffectsForLegacySignature(
+          state,
+          effect.signature,
+          effect.into,
+          effect.receiver,
+          effect.args,
+          effect.loc,
+        );
+        for (const legacyEffect of legacyEffects) {
+          applyEffect(context, state, legacyEffect, initialized, effects);
+        }
+      } else {
+        applyEffect(
+          context,
+          state,
+          {
+            kind: 'Create',
+            into: effect.into,
+            value: ValueKind.Mutable,
+            reason: ValueReason.Other,
+          },
+          initialized,
+          effects,
+        );
+        /*
+         * If no signature then by default:
+         * - All operands are conditionally mutated, except some instruction
+         *   variants are assumed to not mutate the callee (such as `new`)
+         * - All operands are captured into (but not directly aliased as)
+         *   every other argument.
+         */
+        for (const arg of [effect.receiver, effect.function, ...effect.args]) {
+          if (arg.kind === 'Hole') {
+            continue;
+          }
+          const operand = arg.kind === 'Identifier' ? arg : arg.place;
+          if (operand !== effect.function || effect.mutatesFunction) {
+            applyEffect(
+              context,
+              state,
+              {
+                kind: 'MutateTransitiveConditionally',
+                value: operand,
+              },
+              initialized,
+              effects,
+            );
+          }
+          const mutateIterator =
+            arg.kind === 'Spread' ? conditionallyMutateIterator(operand) : null;
+          if (mutateIterator) {
+            applyEffect(context, state, mutateIterator, initialized, effects);
+          }
+          applyEffect(
+            context,
+            state,
+            // OK: recording information flow
+            {kind: 'MaybeAlias', from: operand, into: effect.into},
+            initialized,
+            effects,
+          );
+          for (const otherArg of [
+            effect.receiver,
+            effect.function,
+            ...effect.args,
+          ]) {
+            if (otherArg.kind === 'Hole') {
+              continue;
+            }
+            const other =
+              otherArg.kind === 'Identifier' ? otherArg : otherArg.place;
+            if (other === arg) {
+              continue;
+            }
+            applyEffect(
+              context,
+              state,
+              {
+                /*
+                 * OK: a function might store one operand into another,
+                 * but it can't force one to alias another
+                 */
+                kind: 'Capture',
+                from: operand,
+                into: other,
+              },
+              initialized,
+              effects,
+            );
+          }
+        }
+      }
+      break;
+    }
+    case 'Mutate':
+    case 'MutateConditionally':
+    case 'MutateTransitive':
+    case 'MutateTransitiveConditionally': {
+      const mutationKind = state.mutate(effect.kind, effect.value);
+      if (mutationKind === 'mutate') {
+        effects.push(effect);
+      } else if (mutationKind === 'mutate-ref') {
+        // no-op
+      } else if (
+        mutationKind !== 'none' &&
+        (effect.kind === 'Mutate' || effect.kind === 'MutateTransitive')
+      ) {
+        const value = state.kind(effect.value);
+        if (DEBUG) {
+          console.log(`invalid mutation: ${printAliasingEffect(effect)}`);
+          console.log(prettyFormat(state.debugAbstractValue(value)));
+        }
+
+        if (
+          mutationKind === 'mutate-frozen' &&
+          context.hoistedContextDeclarations.has(
+            effect.value.identifier.declarationId,
+          )
+        ) {
+          const variable =
+            effect.value.identifier.name !== null &&
+            effect.value.identifier.name.kind === 'named'
+              ? `\`${effect.value.identifier.name.value}\``
+              : null;
+          const hoistedAccess = context.hoistedContextDeclarations.get(
+            effect.value.identifier.declarationId,
+          );
+          const diagnostic = CompilerDiagnostic.create({
+            category: ErrorCategory.Immutability,
+            reason: 'Cannot access variable before it is declared',
+            description: `${variable ?? 'This variable'} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`,
+          });
+          if (hoistedAccess != null && hoistedAccess.loc != effect.value.loc) {
+            diagnostic.withDetails({
+              kind: 'error',
+              loc: hoistedAccess.loc,
+              message: `${variable ?? 'variable'} accessed before it is declared`,
+            });
+          }
+          diagnostic.withDetails({
+            kind: 'error',
+            loc: effect.value.loc,
+            message: `${variable ?? 'variable'} is declared here`,
+          });
+
+          applyEffect(
+            context,
+            state,
+            {
+              kind: 'MutateFrozen',
+              place: effect.value,
+              error: diagnostic,
+            },
+            initialized,
+            effects,
+          );
+        } else {
+          const reason = getWriteErrorReason({
+            kind: value.kind,
+            reason: value.reason,
+          });
+          const variable =
+            effect.value.identifier.name !== null &&
+            effect.value.identifier.name.kind === 'named'
+              ? `\`${effect.value.identifier.name.value}\``
+              : 'value';
+          const diagnostic = CompilerDiagnostic.create({
+            category: ErrorCategory.Immutability,
+            reason: 'This value cannot be modified',
+            description: reason,
+          }).withDetails({
+            kind: 'error',
+            loc: effect.value.loc,
+            message: `${variable} cannot be modified`,
+          });
+          if (
+            effect.kind === 'Mutate' &&
+            effect.reason?.kind === 'AssignCurrentProperty'
+          ) {
+            diagnostic.withDetails({
+              kind: 'hint',
+              message: `Hint: If this value is a Ref (value returned by \`useRef()\`), rename the variable to end in "Ref".`,
+            });
+          }
+          applyEffect(
+            context,
+            state,
+            {
+              kind:
+                value.kind === ValueKind.Frozen
+                  ? 'MutateFrozen'
+                  : 'MutateGlobal',
+              place: effect.value,
+              error: diagnostic,
+            },
+            initialized,
+            effects,
+          );
+        }
+      }
+      break;
+    }
+    case 'Impure':
+    case 'Render':
+    case 'MutateFrozen':
+    case 'MutateGlobal': {
+      effects.push(effect);
+      break;
+    }
+    default: {
+      assertExhaustive(
+        effect,
+        `Unexpected effect kind '${(effect as any).kind as any}'`,
+      );
+    }
+  }
+}
+
+class InferenceState {
+  env: Environment;
+  #isFunctionExpression: boolean;
+
+  // The kind of each value, based on its allocation site
+  #values: Map<InstructionValue, AbstractValue>;
+  /*
+   * The set of values pointed to by each identifier. This is a set
+   * to accomodate phi points (where a variable may have different
+   * values from different control flow paths).
+   */
+  #variables: Map<IdentifierId, Set<InstructionValue>>;
+
+  constructor(
+    env: Environment,
+    isFunctionExpression: boolean,
+    values: Map<InstructionValue, AbstractValue>,
+    variables: Map<IdentifierId, Set<InstructionValue>>,
+  ) {
+    this.env = env;
+    this.#isFunctionExpression = isFunctionExpression;
+    this.#values = values;
+    this.#variables = variables;
+  }
+
+  static empty(
+    env: Environment,
+    isFunctionExpression: boolean,
+  ): InferenceState {
+    return new InferenceState(env, isFunctionExpression, new Map(), new Map());
+  }
+
+  get isFunctionExpression(): boolean {
+    return this.#isFunctionExpression;
+  }
+
+  // (Re)initializes a @param value with its default @param kind.
+  initialize(value: InstructionValue, kind: AbstractValue): void {
+    CompilerError.invariant(value.kind !== 'LoadLocal', {
+      reason:
+        '[InferMutationAliasingEffects] Expected all top-level identifiers to be defined as variables, not values',
+      loc: value.loc,
+    });
+    this.#values.set(value, kind);
+  }
+
+  values(place: Place): Array<InstructionValue> {
+    const values = this.#variables.get(place.identifier.id);
+    CompilerError.invariant(values != null, {
+      reason: `[InferMutationAliasingEffects] Expected value kind to be initialized`,
+      description: `${printPlace(place)}`,
+      message: 'this is uninitialized',
+      loc: place.loc,
+    });
+    return Array.from(values);
+  }
+
+  // Lookup the kind of the given @param value.
+  kind(place: Place): AbstractValue {
+    const values = this.#variables.get(place.identifier.id);
+    CompilerError.invariant(values != null, {
+      reason: `[InferMutationAliasingEffects] Expected value kind to be initialized`,
+      description: `${printPlace(place)}`,
+      message: 'this is uninitialized',
+      loc: place.loc,
+    });
+    let mergedKind: AbstractValue | null = null;
+    for (const value of values) {
+      const kind = this.#values.get(value)!;
+      mergedKind =
+        mergedKind !== null ? mergeAbstractValues(mergedKind, kind) : kind;
+    }
+    CompilerError.invariant(mergedKind !== null, {
+      reason: `[InferMutationAliasingEffects] Expected at least one value`,
+      description: `No value found at \`${printPlace(place)}\``,
+      loc: place.loc,
+    });
+    return mergedKind;
+  }
+
+  // Updates the value at @param place to point to the same value as @param value.
+  assign(place: Place, value: Place): void {
+    const values = this.#variables.get(value.identifier.id);
+    CompilerError.invariant(values != null, {
+      reason: `[InferMutationAliasingEffects] Expected value for identifier to be initialized`,
+      description: `${printIdentifier(value.identifier)}`,
+      message: 'Expected value for identifier to be initialized',
+      loc: value.loc,
+    });
+    this.#variables.set(place.identifier.id, new Set(values));
+  }
+
+  appendAlias(place: Place, value: Place): void {
+    const values = this.#variables.get(value.identifier.id);
+    CompilerError.invariant(values != null, {
+      reason: `[InferMutationAliasingEffects] Expected value for identifier to be initialized`,
+      description: `${printIdentifier(value.identifier)}`,
+      message: 'Expected value for identifier to be initialized',
+      loc: value.loc,
+    });
+    const prevValues = this.values(place);
+    this.#variables.set(
+      place.identifier.id,
+      new Set([...prevValues, ...values]),
+    );
+  }
+
+  // Defines (initializing or updating) a variable with a specific kind of value.
+  define(place: Place, value: InstructionValue): void {
+    CompilerError.invariant(this.#values.has(value), {
+      reason: `[InferMutationAliasingEffects] Expected value to be initialized`,
+      description: printInstructionValue(value),
+      loc: value.loc,
+    });
+    this.#variables.set(place.identifier.id, new Set([value]));
+  }
+
+  isDefined(place: Place): boolean {
+    return this.#variables.has(place.identifier.id);
+  }
+
+  /**
+   * Marks @param place as transitively frozen. Returns true if the value was not
+   * already frozen, false if the value is already frozen (or already known immutable).
+   */
+  freeze(place: Place, reason: ValueReason): boolean {
+    const value = this.kind(place);
+    switch (value.kind) {
+      case ValueKind.Context:
+      case ValueKind.Mutable:
+      case ValueKind.MaybeFrozen: {
+        const values = this.values(place);
+        for (const instrValue of values) {
+          this.freezeValue(instrValue, reason);
+        }
+        return true;
+      }
+      case ValueKind.Frozen:
+      case ValueKind.Global:
+      case ValueKind.Primitive: {
+        return false;
+      }
+      default: {
+        assertExhaustive(
+          value.kind,
+          `Unexpected value kind '${(value as any).kind}'`,
+        );
+      }
+    }
+  }
+
+  freezeValue(value: InstructionValue, reason: ValueReason): void {
+    this.#values.set(value, {
+      kind: ValueKind.Frozen,
+      reason: new Set([reason]),
+    });
+    if (
+      value.kind === 'FunctionExpression' &&
+      (this.env.config.enablePreserveExistingMemoizationGuarantees ||
+        this.env.config.enableTransitivelyFreezeFunctionExpressions)
+    ) {
+      for (const place of value.loweredFunc.func.context) {
+        this.freeze(place, reason);
+      }
+    }
+  }
+
+  mutate(
+    variant:
+      | 'Mutate'
+      | 'MutateConditionally'
+      | 'MutateTransitive'
+      | 'MutateTransitiveConditionally',
+    place: Place,
+  ): 'none' | 'mutate' | 'mutate-frozen' | 'mutate-global' | 'mutate-ref' {
+    if (isRefOrRefValue(place.identifier)) {
+      return 'mutate-ref';
+    }
+    const kind = this.kind(place).kind;
+    switch (variant) {
+      case 'MutateConditionally':
+      case 'MutateTransitiveConditionally': {
+        switch (kind) {
+          case ValueKind.Mutable:
+          case ValueKind.Context: {
+            return 'mutate';
+          }
+          default: {
+            return 'none';
+          }
+        }
+      }
+      case 'Mutate':
+      case 'MutateTransitive': {
+        switch (kind) {
+          case ValueKind.Mutable:
+          case ValueKind.Context: {
+            return 'mutate';
+          }
+          case ValueKind.Primitive: {
+            // technically an error, but it's not React specific
+            return 'none';
+          }
+          case ValueKind.Frozen: {
+            return 'mutate-frozen';
+          }
+          case ValueKind.Global: {
+            return 'mutate-global';
+          }
+          case ValueKind.MaybeFrozen: {
+            return 'mutate-frozen';
+          }
+          default: {
+            assertExhaustive(kind, `Unexpected kind ${kind}`);
+          }
+        }
+      }
+      default: {
+        assertExhaustive(variant, `Unexpected mutation variant ${variant}`);
+      }
+    }
+  }
+
+  /*
+   * Combine the contents of @param this and @param other, returning a new
+   * instance with the combined changes _if_ there are any changes, or
+   * returning null if no changes would occur. Changes include:
+   * - new entries in @param other that did not exist in @param this
+   * - entries whose values differ in @param this and @param other,
+   *    and where joining the values produces a different value than
+   *    what was in @param this.
+   *
+   * Note that values are joined using a lattice operation to ensure
+   * termination.
+   */
+  merge(other: InferenceState): InferenceState | null {
+    let nextValues: Map<InstructionValue, AbstractValue> | null = null;
+    let nextVariables: Map<IdentifierId, Set<InstructionValue>> | null = null;
+
+    for (const [id, thisValue] of this.#values) {
+      const otherValue = other.#values.get(id);
+      if (otherValue !== undefined) {
+        const mergedValue = mergeAbstractValues(thisValue, otherValue);
+        if (mergedValue !== thisValue) {
+          nextValues = nextValues ?? new Map(this.#values);
+          nextValues.set(id, mergedValue);
+        }
+      }
+    }
+    for (const [id, otherValue] of other.#values) {
+      if (this.#values.has(id)) {
+        // merged above
+        continue;
+      }
+      nextValues = nextValues ?? new Map(this.#values);
+      nextValues.set(id, otherValue);
+    }
+
+    for (const [id, thisValues] of this.#variables) {
+      const otherValues = other.#variables.get(id);
+      if (otherValues !== undefined) {
+        let mergedValues: Set<InstructionValue> | null = null;
+        for (const otherValue of otherValues) {
+          if (!thisValues.has(otherValue)) {
+            mergedValues = mergedValues ?? new Set(thisValues);
+            mergedValues.add(otherValue);
+          }
+        }
+        if (mergedValues !== null) {
+          nextVariables = nextVariables ?? new Map(this.#variables);
+          nextVariables.set(id, mergedValues);
+        }
+      }
+    }
+    for (const [id, otherValues] of other.#variables) {
+      if (this.#variables.has(id)) {
+        continue;
+      }
+      nextVariables = nextVariables ?? new Map(this.#variables);
+      nextVariables.set(id, new Set(otherValues));
+    }
+
+    if (nextVariables === null && nextValues === null) {
+      return null;
+    } else {
+      return new InferenceState(
+        this.env,
+        this.#isFunctionExpression,
+        nextValues ?? new Map(this.#values),
+        nextVariables ?? new Map(this.#variables),
+      );
+    }
+  }
+
+  /*
+   * Returns a copy of this state.
+   * TODO: consider using persistent data structures to make
+   * clone cheaper.
+   */
+  clone(): InferenceState {
+    return new InferenceState(
+      this.env,
+      this.#isFunctionExpression,
+      new Map(this.#values),
+      new Map(this.#variables),
+    );
+  }
+
+  /*
+   * For debugging purposes, dumps the state to a plain
+   * object so that it can printed as JSON.
+   */
+  debug(): any {
+    const result: any = {values: {}, variables: {}};
+    const objects: Map<InstructionValue, number> = new Map();
+    function identify(value: InstructionValue): number {
+      let id = objects.get(value);
+      if (id == null) {
+        id = objects.size;
+        objects.set(value, id);
+      }
+      return id;
+    }
+    for (const [value, kind] of this.#values) {
+      const id = identify(value);
+      result.values[id] = {
+        abstract: this.debugAbstractValue(kind),
+        value: printInstructionValue(value),
+      };
+    }
+    for (const [variable, values] of this.#variables) {
+      result.variables[`$${variable}`] = [...values].map(identify);
+    }
+    return result;
+  }
+
+  debugAbstractValue(value: AbstractValue): any {
+    return {
+      kind: value.kind,
+      reason: [...value.reason],
+    };
+  }
+
+  inferPhi(phi: Phi): void {
+    const values: Set<InstructionValue> = new Set();
+    for (const [_, operand] of phi.operands) {
+      const operandValues = this.#variables.get(operand.identifier.id);
+      // This is a backedge that will be handled later by State.merge
+      if (operandValues === undefined) continue;
+      for (const v of operandValues) {
+        values.add(v);
+      }
+    }
+
+    if (values.size > 0) {
+      this.#variables.set(phi.place.identifier.id, values);
+    }
+  }
+}
+
+/**
+ * Returns a value that represents the combined states of the two input values.
+ * If the two values are semantically equivalent, it returns the first argument.
+ */
+function mergeAbstractValues(
+  a: AbstractValue,
+  b: AbstractValue,
+): AbstractValue {
+  const kind = mergeValueKinds(a.kind, b.kind);
+  if (
+    kind === a.kind &&
+    kind === b.kind &&
+    Set_isSuperset(a.reason, b.reason)
+  ) {
+    return a;
+  }
+  const reason = new Set(a.reason);
+  for (const r of b.reason) {
+    reason.add(r);
+  }
+  return {kind, reason};
+}
+
+type InstructionSignature = {
+  effects: ReadonlyArray<AliasingEffect>;
+};
+
+function conditionallyMutateIterator(place: Place): AliasingEffect | null {
+  if (
+    !(
+      isArrayType(place.identifier) ||
+      isSetType(place.identifier) ||
+      isMapType(place.identifier)
+    )
+  ) {
+    return {
+      kind: 'MutateTransitiveConditionally',
+      value: place,
+    };
+  }
+  return null;
+}
+
+/**
+ * Computes an effect signature for the instruction _without_ looking at the inference state,
+ * and only using the semantics of the instructions and the inferred types. The idea is to make
+ * it easy to check that the semantics of each instruction are preserved by describing only the
+ * effects and not making decisions based on the inference state.
+ *
+ * Then in applySignature(), above, we refine this signature based on the inference state.
+ *
+ * NOTE: this function is designed to be cached so it's only computed once upon first visiting
+ * an instruction.
+ */
+function computeSignatureForInstruction(
+  context: Context,
+  env: Environment,
+  instr: Instruction,
+): InstructionSignature {
+  const {lvalue, value} = instr;
+  const effects: Array<AliasingEffect> = [];
+  switch (value.kind) {
+    case 'ArrayExpression': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Mutable,
+        reason: ValueReason.Other,
+      });
+      // All elements are captured into part of the output value
+      for (const element of value.elements) {
+        if (element.kind === 'Identifier') {
+          effects.push({
+            kind: 'Capture',
+            from: element,
+            into: lvalue,
+          });
+        } else if (element.kind === 'Spread') {
+          const mutateIterator = conditionallyMutateIterator(element.place);
+          if (mutateIterator != null) {
+            effects.push(mutateIterator);
+          }
+          effects.push({
+            kind: 'Capture',
+            from: element.place,
+            into: lvalue,
+          });
+        } else {
+          continue;
+        }
+      }
+      break;
+    }
+    case 'ObjectExpression': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Mutable,
+        reason: ValueReason.Other,
+      });
+      for (const property of value.properties) {
+        if (property.kind === 'ObjectProperty') {
+          effects.push({
+            kind: 'Capture',
+            from: property.place,
+            into: lvalue,
+          });
+        } else {
+          effects.push({
+            kind: 'Capture',
+            from: property.place,
+            into: lvalue,
+          });
+        }
+      }
+      break;
+    }
+    case 'Await': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Mutable,
+        reason: ValueReason.Other,
+      });
+      // Potentially mutates the receiver (awaiting it changes its state and can run side effects)
+      effects.push({kind: 'MutateTransitiveConditionally', value: value.value});
+      /**
+       * Data from the promise may be returned into the result, but await does not directly return
+       * the promise itself
+       */
+      effects.push({
+        kind: 'Capture',
+        from: value.value,
+        into: lvalue,
+      });
+      break;
+    }
+    case 'NewExpression':
+    case 'CallExpression':
+    case 'MethodCall': {
+      let callee;
+      let receiver;
+      let mutatesCallee;
+      if (value.kind === 'NewExpression') {
+        callee = value.callee;
+        receiver = value.callee;
+        mutatesCallee = false;
+      } else if (value.kind === 'CallExpression') {
+        callee = value.callee;
+        receiver = value.callee;
+        mutatesCallee = true;
+      } else if (value.kind === 'MethodCall') {
+        callee = value.property;
+        receiver = value.receiver;
+        mutatesCallee = false;
+      } else {
+        assertExhaustive(
+          value,
+          `Unexpected value kind '${(value as any).kind}'`,
+        );
+      }
+      const signature = getFunctionCallSignature(env, callee.identifier.type);
+      effects.push({
+        kind: 'Apply',
+        receiver,
+        function: callee,
+        mutatesFunction: mutatesCallee,
+        args: value.args,
+        into: lvalue,
+        signature,
+        loc: value.loc,
+      });
+      break;
+    }
+    case 'PropertyDelete':
+    case 'ComputedDelete': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      // Mutates the object by removing the property, no aliasing
+      effects.push({kind: 'Mutate', value: value.object});
+      break;
+    }
+    case 'PropertyLoad':
+    case 'ComputedLoad': {
+      if (isPrimitiveType(lvalue.identifier)) {
+        effects.push({
+          kind: 'Create',
+          into: lvalue,
+          value: ValueKind.Primitive,
+          reason: ValueReason.Other,
+        });
+      } else {
+        effects.push({
+          kind: 'CreateFrom',
+          from: value.object,
+          into: lvalue,
+        });
+      }
+      break;
+    }
+    case 'PropertyStore':
+    case 'ComputedStore': {
+      /**
+       * Add a hint about naming as "ref"/"-Ref", but only if we weren't able to infer any
+       * type for the object. In some cases the variable may be named like a ref, but is
+       * also used as a ref callback such that we infer the type as a function rather than
+       * a ref.
+       */
+      const mutationReason: MutationReason | null =
+        value.kind === 'PropertyStore' &&
+        value.property === 'current' &&
+        value.object.identifier.type.kind === 'Type'
+          ? {kind: 'AssignCurrentProperty'}
+          : null;
+      effects.push({
+        kind: 'Mutate',
+        value: value.object,
+        reason: mutationReason,
+      });
+      effects.push({
+        kind: 'Capture',
+        from: value.value,
+        into: value.object,
+      });
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+    case 'ObjectMethod':
+    case 'FunctionExpression': {
+      /**
+       * We've already analyzed the function expression in AnalyzeFunctions. There, we assign
+       * a Capture effect to any context variable that appears (locally) to be aliased and/or
+       * mutated. The precise effects are annotated on the function expression's aliasingEffects
+       * property, but we don't want to execute those effects yet. We can only use those when
+       * we know exactly how the function is invoked — via an Apply effect from a custom signature.
+       *
+       * But in the general case, functions can be passed around and possibly called in ways where
+       * we don't know how to interpret their precise effects. For example:
+       *
+       * ```
+       * const a = {};
+       *
+       * // We don't want to consider a as mutating here, this just declares the function
+       * const f = () => { maybeMutate(a) };
+       *
+       * // We don't want to consider a as mutating here either, it can't possibly call f yet
+       * const x = [f];
+       *
+       * // Here we have to assume that f can be called (transitively), and have to consider a
+       * // as mutating
+       * callAllFunctionInArray(x);
+       * ```
+       *
+       * So for any context variables that were inferred as captured or mutated, we record a
+       * Capture effect. If the resulting function is transitively mutated, this will mean
+       * that those operands are also considered mutated. If the function is never called,
+       * they won't be!
+       *
+       * This relies on the rule that:
+       * Capture a -> b and MutateTransitive(b) => Mutate(a)
+       *
+       * Substituting:
+       * Capture contextvar -> function and MutateTransitive(function) => Mutate(contextvar)
+       *
+       * Note that if the type of the context variables are frozen, global, or primitive, the
+       * Capture will either get pruned or downgraded to an ImmutableCapture.
+       */
+      effects.push({
+        kind: 'CreateFunction',
+        into: lvalue,
+        function: value,
+        captures: value.loweredFunc.func.context.filter(
+          operand => operand.effect === Effect.Capture,
+        ),
+      });
+      break;
+    }
+    case 'GetIterator': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Mutable,
+        reason: ValueReason.Other,
+      });
+      if (
+        isArrayType(value.collection.identifier) ||
+        isMapType(value.collection.identifier) ||
+        isSetType(value.collection.identifier)
+      ) {
+        /*
+         * Builtin collections are known to return a fresh iterator on each call,
+         * so the iterator does not alias the collection
+         */
+        effects.push({
+          kind: 'Capture',
+          from: value.collection,
+          into: lvalue,
+        });
+      } else {
+        /*
+         * Otherwise, the object may return itself as the iterator, so we have to
+         * assume that the result directly aliases the collection. Further, the
+         * method to get the iterator could potentially mutate the collection
+         */
+        effects.push({kind: 'Alias', from: value.collection, into: lvalue});
+        effects.push({
+          kind: 'MutateTransitiveConditionally',
+          value: value.collection,
+        });
+      }
+      break;
+    }
+    case 'IteratorNext': {
+      /*
+       * Technically advancing an iterator will always mutate it (for any reasonable implementation)
+       * But because we create an alias from the collection to the iterator if we don't know the type,
+       * then it's possible the iterator is aliased to a frozen value and we wouldn't want to error.
+       * so we mark this as conditional mutation to allow iterating frozen values.
+       */
+      effects.push({kind: 'MutateConditionally', value: value.iterator});
+      // Extracts part of the original collection into the result
+      effects.push({
+        kind: 'CreateFrom',
+        from: value.collection,
+        into: lvalue,
+      });
+      break;
+    }
+    case 'NextPropertyOf': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+    case 'JsxExpression':
+    case 'JsxFragment': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Frozen,
+        reason: ValueReason.JsxCaptured,
+      });
+      for (const operand of eachInstructionValueOperand(value)) {
+        effects.push({
+          kind: 'Freeze',
+          value: operand,
+          reason: ValueReason.JsxCaptured,
+        });
+        effects.push({
+          kind: 'Capture',
+          from: operand,
+          into: lvalue,
+        });
+      }
+      if (value.kind === 'JsxExpression') {
+        if (value.tag.kind === 'Identifier') {
+          // Tags are render function, by definition they're called during render
+          effects.push({
+            kind: 'Render',
+            place: value.tag,
+          });
+        }
+        if (value.children != null) {
+          // Children are typically called during render, not used as an event/effect callback
+          for (const child of value.children) {
+            effects.push({
+              kind: 'Render',
+              place: child,
+            });
+          }
+        }
+        for (const prop of value.props) {
+          if (
+            prop.kind === 'JsxAttribute' &&
+            prop.place.identifier.type.kind === 'Function' &&
+            (isJsxType(prop.place.identifier.type.return) ||
+              (prop.place.identifier.type.return.kind === 'Phi' &&
+                prop.place.identifier.type.return.operands.some(operand =>
+                  isJsxType(operand),
+                )))
+          ) {
+            // Any props which return jsx are assumed to be called during render
+            effects.push({
+              kind: 'Render',
+              place: prop.place,
+            });
+          }
+        }
+      }
+      break;
+    }
+    case 'DeclareLocal': {
+      // TODO check this
+      effects.push({
+        kind: 'Create',
+        into: value.lvalue.place,
+        // TODO: what kind here???
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        // TODO: what kind here???
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+    case 'Destructure': {
+      for (const patternItem of eachPatternItem(value.lvalue.pattern)) {
+        const place =
+          patternItem.kind === 'Identifier' ? patternItem : patternItem.place;
+        if (isPrimitiveType(place.identifier)) {
+          effects.push({
+            kind: 'Create',
+            into: place,
+            value: ValueKind.Primitive,
+            reason: ValueReason.Other,
+          });
+        } else if (patternItem.kind === 'Identifier') {
+          effects.push({
+            kind: 'CreateFrom',
+            from: value.value,
+            into: place,
+          });
+        } else {
+          // Spread creates a new object/array that captures from the RValue
+          effects.push({
+            kind: 'Create',
+            into: place,
+            reason: ValueReason.Other,
+            value: context.nonMutatingSpreads.has(place.identifier.id)
+              ? ValueKind.Frozen
+              : ValueKind.Mutable,
+          });
+          effects.push({
+            kind: 'Capture',
+            from: value.value,
+            into: place,
+          });
+        }
+      }
+      effects.push({kind: 'Assign', from: value.value, into: lvalue});
+      break;
+    }
+    case 'LoadContext': {
+      /*
+       * Context variables are like mutable boxes. Loading from one
+       * is equivalent to a PropertyLoad from the box, so we model it
+       * with the same effect we use there (CreateFrom)
+       */
+      effects.push({kind: 'CreateFrom', from: value.place, into: lvalue});
+      break;
+    }
+    case 'DeclareContext': {
+      // Context variables are conceptually like mutable boxes
+      const kind = value.lvalue.kind;
+      if (
+        !context.hoistedContextDeclarations.has(
+          value.lvalue.place.identifier.declarationId,
+        ) ||
+        kind === InstructionKind.HoistedConst ||
+        kind === InstructionKind.HoistedFunction ||
+        kind === InstructionKind.HoistedLet
+      ) {
+        /**
+         * If this context variable is not hoisted, or this is the declaration doing the hoisting,
+         * then we create the box.
+         */
+        effects.push({
+          kind: 'Create',
+          into: value.lvalue.place,
+          value: ValueKind.Mutable,
+          reason: ValueReason.Other,
+        });
+      } else {
+        /**
+         * Otherwise this may be a "declare", but there was a previous DeclareContext that
+         * hoisted this variable, and we're mutating it here.
+         */
+        effects.push({kind: 'Mutate', value: value.lvalue.place});
+      }
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        // The result can't be referenced so this value doesn't matter
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+    case 'StoreContext': {
+      /*
+       * Context variables are like mutable boxes, so semantically
+       * we're either creating (let/const) or mutating (reassign) a box,
+       * and then capturing the value into it.
+       */
+      if (
+        value.lvalue.kind === InstructionKind.Reassign ||
+        context.hoistedContextDeclarations.has(
+          value.lvalue.place.identifier.declarationId,
+        )
+      ) {
+        effects.push({kind: 'Mutate', value: value.lvalue.place});
+      } else {
+        effects.push({
+          kind: 'Create',
+          into: value.lvalue.place,
+          value: ValueKind.Mutable,
+          reason: ValueReason.Other,
+        });
+      }
+      effects.push({
+        kind: 'Capture',
+        from: value.value,
+        into: value.lvalue.place,
+      });
+      effects.push({kind: 'Assign', from: value.value, into: lvalue});
+      break;
+    }
+    case 'LoadLocal': {
+      effects.push({kind: 'Assign', from: value.place, into: lvalue});
+      break;
+    }
+    case 'StoreLocal': {
+      effects.push({
+        kind: 'Assign',
+        from: value.value,
+        into: value.lvalue.place,
+      });
+      effects.push({kind: 'Assign', from: value.value, into: lvalue});
+      break;
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      effects.push({
+        kind: 'Create',
+        into: value.lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+    case 'StoreGlobal': {
+      const variable = `\`${value.name}\``;
+      effects.push({
+        kind: 'MutateGlobal',
+        place: value.value,
+        error: CompilerDiagnostic.create({
+          category: ErrorCategory.Globals,
+          reason:
+            'Cannot reassign variables declared outside of the component/hook',
+          description: `Variable ${variable} is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)`,
+        }).withDetails({
+          kind: 'error',
+          loc: instr.loc,
+          message: `${variable} cannot be reassigned`,
+        }),
+      });
+      effects.push({kind: 'Assign', from: value.value, into: lvalue});
+      break;
+    }
+    case 'TypeCastExpression': {
+      effects.push({kind: 'Assign', from: value.value, into: lvalue});
+      break;
+    }
+    case 'LoadGlobal': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Global,
+        reason: ValueReason.Global,
+      });
+      break;
+    }
+    case 'StartMemoize':
+    case 'FinishMemoize': {
+      if (env.config.enablePreserveExistingMemoizationGuarantees) {
+        for (const operand of eachInstructionValueOperand(value)) {
+          effects.push({
+            kind: 'Freeze',
+            value: operand,
+            reason: ValueReason.HookCaptured,
+          });
+        }
+      }
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+    case 'TaggedTemplateExpression':
+    case 'BinaryExpression':
+    case 'Debugger':
+    case 'JSXText':
+    case 'MetaProperty':
+    case 'Primitive':
+    case 'RegExpLiteral':
+    case 'TemplateLiteral':
+    case 'UnaryExpression':
+    case 'UnsupportedNode': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      break;
+    }
+  }
+  return {
+    effects,
+  };
+}
+
+/**
+ * Creates a set of aliasing effects given a legacy FunctionSignature. This makes all of the
+ * old implicit behaviors from the signatures and InferReferenceEffects explicit, see comments
+ * in the body for details.
+ *
+ * The goal of this method is to make it easier to migrate incrementally to the new system,
+ * so we don't have to immediately write new signatures for all the methods to get expected
+ * compilation output.
+ */
+function computeEffectsForLegacySignature(
+  state: InferenceState,
+  signature: FunctionSignature,
+  lvalue: Place,
+  receiver: Place,
+  args: Array<Place | SpreadPattern | Hole>,
+  loc: SourceLocation,
+): Array<AliasingEffect> {
+  const returnValueReason = signature.returnValueReason ?? ValueReason.Other;
+  const effects: Array<AliasingEffect> = [];
+  effects.push({
+    kind: 'Create',
+    into: lvalue,
+    value: signature.returnValueKind,
+    reason: returnValueReason,
+  });
+  if (signature.impure && state.env.config.validateNoImpureFunctionsInRender) {
+    effects.push({
+      kind: 'Impure',
+      place: receiver,
+      error: CompilerDiagnostic.create({
+        category: ErrorCategory.Purity,
+        reason: 'Cannot call impure function during render',
+        description:
+          (signature.canonicalName != null
+            ? `\`${signature.canonicalName}\` is an impure function. `
+            : '') +
+          'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
+      }).withDetails({
+        kind: 'error',
+        loc,
+        message: 'Cannot call impure function',
+      }),
+    });
+  }
+  if (signature.knownIncompatible != null && state.env.enableValidations) {
+    const errors = new CompilerError();
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.IncompatibleLibrary,
+        reason: 'Use of incompatible library',
+        description: [
+          'This API returns functions which cannot be memoized without leading to stale UI. ' +
+            'To prevent this, by default React Compiler will skip memoizing this component/hook. ' +
+            'However, you may see issues if values from this API are passed to other components/hooks that are ' +
+            'memoized',
+        ].join(''),
+      }).withDetails({
+        kind: 'error',
+        loc: receiver.loc,
+        message: signature.knownIncompatible,
+      }),
+    );
+    throw errors;
+  }
+  const stores: Array<Place> = [];
+  const captures: Array<Place> = [];
+  function visit(place: Place, effect: Effect): void {
+    switch (effect) {
+      case Effect.Store: {
+        effects.push({
+          kind: 'Mutate',
+          value: place,
+        });
+        stores.push(place);
+        break;
+      }
+      case Effect.Capture: {
+        captures.push(place);
+        break;
+      }
+      case Effect.ConditionallyMutate: {
+        effects.push({
+          kind: 'MutateTransitiveConditionally',
+          value: place,
+        });
+        break;
+      }
+      case Effect.ConditionallyMutateIterator: {
+        const mutateIterator = conditionallyMutateIterator(place);
+        if (mutateIterator != null) {
+          effects.push(mutateIterator);
+        }
+        effects.push({
+          kind: 'Capture',
+          from: place,
+          into: lvalue,
+        });
+        break;
+      }
+      case Effect.Freeze: {
+        effects.push({
+          kind: 'Freeze',
+          value: place,
+          reason: returnValueReason,
+        });
+        break;
+      }
+      case Effect.Mutate: {
+        effects.push({kind: 'MutateTransitive', value: place});
+        break;
+      }
+      case Effect.Read: {
+        effects.push({
+          kind: 'ImmutableCapture',
+          from: place,
+          into: lvalue,
+        });
+        break;
+      }
+    }
+  }
+
+  if (
+    signature.mutableOnlyIfOperandsAreMutable &&
+    areArgumentsImmutableAndNonMutating(state, args)
+  ) {
+    effects.push({
+      kind: 'Alias',
+      from: receiver,
+      into: lvalue,
+    });
+    for (const arg of args) {
+      if (arg.kind === 'Hole') {
+        continue;
+      }
+      const place = arg.kind === 'Identifier' ? arg : arg.place;
+      effects.push({
+        kind: 'ImmutableCapture',
+        from: place,
+        into: lvalue,
+      });
+    }
+    return effects;
+  }
+
+  if (signature.calleeEffect !== Effect.Capture) {
+    /*
+     * InferReferenceEffects and FunctionSignature have an implicit assumption that the receiver
+     * is captured into the return value. Consider for example the signature for Array.proto.pop:
+     * the calleeEffect is Store, since it's a known mutation but non-transitive. But the return
+     * of the pop() captures from the receiver! This isn't specified explicitly. So we add this
+     * here, and rely on applySignature() to downgrade this to ImmutableCapture (or prune) if
+     * the type doesn't actually need to be captured based on the input and return type.
+     */
+    effects.push({
+      kind: 'Alias',
+      from: receiver,
+      into: lvalue,
+    });
+  }
+  visit(receiver, signature.calleeEffect);
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg.kind === 'Hole') {
+      continue;
+    }
+    const place = arg.kind === 'Identifier' ? arg : arg.place;
+    const signatureEffect =
+      arg.kind === 'Identifier' && i < signature.positionalParams.length
+        ? signature.positionalParams[i]!
+        : (signature.restParam ?? Effect.ConditionallyMutate);
+    const effect = getArgumentEffect(signatureEffect, arg);
+
+    visit(place, effect);
+  }
+  if (captures.length !== 0) {
+    if (stores.length === 0) {
+      // If no stores, then capture into the return value
+      for (const capture of captures) {
+        effects.push({kind: 'Alias', from: capture, into: lvalue});
+      }
+    } else {
+      // Else capture into the stores
+      for (const capture of captures) {
+        for (const store of stores) {
+          effects.push({kind: 'Capture', from: capture, into: store});
+        }
+      }
+    }
+  }
+  return effects;
+}
+
+/**
+ * Returns true if all of the arguments are both non-mutable (immutable or frozen)
+ * _and_ are not functions which might mutate their arguments. Note that function
+ * expressions count as frozen so long as they do not mutate free variables: this
+ * function checks that such functions also don't mutate their inputs.
+ */
+function areArgumentsImmutableAndNonMutating(
+  state: InferenceState,
+  args: Array<Place | SpreadPattern | Hole>,
+): boolean {
+  for (const arg of args) {
+    if (arg.kind === 'Hole') {
+      continue;
+    }
+    if (arg.kind === 'Identifier' && arg.identifier.type.kind === 'Function') {
+      const fnShape = state.env.getFunctionSignature(arg.identifier.type);
+      if (fnShape != null) {
+        return (
+          !fnShape.positionalParams.some(isKnownMutableEffect) &&
+          (fnShape.restParam == null ||
+            !isKnownMutableEffect(fnShape.restParam))
+        );
+      }
+    }
+    const place = arg.kind === 'Identifier' ? arg : arg.place;
+
+    const kind = state.kind(place).kind;
+    switch (kind) {
+      case ValueKind.Primitive:
+      case ValueKind.Frozen: {
+        /*
+         * Only immutable values, or frozen lambdas are allowed.
+         * A lambda may appear frozen even if it may mutate its inputs,
+         * so we have a second check even for frozen value types
+         */
+        break;
+      }
+      default: {
+        /**
+         * Globals, module locals, and other locally defined functions may
+         * mutate their arguments.
+         */
+        return false;
+      }
+    }
+    const values = state.values(place);
+    for (const value of values) {
+      if (
+        value.kind === 'FunctionExpression' &&
+        value.loweredFunc.func.params.some(param => {
+          const place = param.kind === 'Identifier' ? param : param.place;
+          const range = place.identifier.mutableRange;
+          return range.end > range.start + 1;
+        })
+      ) {
+        // This is a function which may mutate its inputs
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+function computeEffectsForSignature(
+  env: Environment,
+  signature: AliasingSignature,
+  lvalue: Place,
+  receiver: Place,
+  args: Array<Place | SpreadPattern | Hole>,
+  // Used for signatures constructed dynamically which reference context variables
+  context: Array<Place> = [],
+  loc: SourceLocation,
+): Array<AliasingEffect> | null {
+  if (
+    // Not enough args
+    signature.params.length > args.length ||
+    // Too many args and there is no rest param to hold them
+    (args.length > signature.params.length && signature.rest == null)
+  ) {
+    return null;
+  }
+  // Build substitutions
+  const mutableSpreads = new Set<IdentifierId>();
+  const substitutions: Map<IdentifierId, Array<Place>> = new Map();
+  substitutions.set(signature.receiver, [receiver]);
+  substitutions.set(signature.returns, [lvalue]);
+  const params = signature.params;
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg.kind === 'Hole') {
+      continue;
+    } else if (params == null || i >= params.length || arg.kind === 'Spread') {
+      if (signature.rest == null) {
+        return null;
+      }
+      const place = arg.kind === 'Identifier' ? arg : arg.place;
+      getOrInsertWith(substitutions, signature.rest, () => []).push(place);
+
+      if (arg.kind === 'Spread') {
+        const mutateIterator = conditionallyMutateIterator(arg.place);
+        if (mutateIterator != null) {
+          mutableSpreads.add(arg.place.identifier.id);
+        }
+      }
+    } else {
+      const param = params[i];
+      substitutions.set(param, [arg]);
+    }
+  }
+
+  /*
+   * Signatures constructed dynamically from function expressions will reference values
+   * other than their receiver/args/etc. We populate the substitution table with these
+   * values so that we can still exit for unpopulated substitutions
+   */
+  for (const operand of context) {
+    substitutions.set(operand.identifier.id, [operand]);
+  }
+
+  const effects: Array<AliasingEffect> = [];
+  for (const signatureTemporary of signature.temporaries) {
+    const temp = createTemporaryPlace(env, receiver.loc);
+    substitutions.set(signatureTemporary.identifier.id, [temp]);
+  }
+
+  // Apply substitutions
+  for (const effect of signature.effects) {
+    switch (effect.kind) {
+      case 'MaybeAlias':
+      case 'Assign':
+      case 'ImmutableCapture':
+      case 'Alias':
+      case 'CreateFrom':
+      case 'Capture': {
+        const from = substitutions.get(effect.from.identifier.id) ?? [];
+        const to = substitutions.get(effect.into.identifier.id) ?? [];
+        for (const fromId of from) {
+          for (const toId of to) {
+            effects.push({
+              kind: effect.kind,
+              from: fromId,
+              into: toId,
+            });
+          }
+        }
+        break;
+      }
+      case 'Impure':
+      case 'MutateFrozen':
+      case 'MutateGlobal': {
+        const values = substitutions.get(effect.place.identifier.id) ?? [];
+        for (const value of values) {
+          effects.push({kind: effect.kind, place: value, error: effect.error});
+        }
+        break;
+      }
+      case 'Render': {
+        const values = substitutions.get(effect.place.identifier.id) ?? [];
+        for (const value of values) {
+          effects.push({kind: effect.kind, place: value});
+        }
+        break;
+      }
+      case 'Mutate':
+      case 'MutateTransitive':
+      case 'MutateTransitiveConditionally':
+      case 'MutateConditionally': {
+        const values = substitutions.get(effect.value.identifier.id) ?? [];
+        for (const id of values) {
+          effects.push({kind: effect.kind, value: id});
+        }
+        break;
+      }
+      case 'Freeze': {
+        const values = substitutions.get(effect.value.identifier.id) ?? [];
+        for (const value of values) {
+          if (mutableSpreads.has(value.identifier.id)) {
+            CompilerError.throwTodo({
+              reason: 'Support spread syntax for hook arguments',
+              loc: value.loc,
+            });
+          }
+          effects.push({kind: 'Freeze', value, reason: effect.reason});
+        }
+        break;
+      }
+      case 'Create': {
+        const into = substitutions.get(effect.into.identifier.id) ?? [];
+        for (const value of into) {
+          effects.push({
+            kind: 'Create',
+            into: value,
+            value: effect.value,
+            reason: effect.reason,
+          });
+        }
+        break;
+      }
+      case 'Apply': {
+        const applyReceiver = substitutions.get(effect.receiver.identifier.id);
+        if (applyReceiver == null || applyReceiver.length !== 1) {
+          return null;
+        }
+        const applyFunction = substitutions.get(effect.function.identifier.id);
+        if (applyFunction == null || applyFunction.length !== 1) {
+          return null;
+        }
+        const applyInto = substitutions.get(effect.into.identifier.id);
+        if (applyInto == null || applyInto.length !== 1) {
+          return null;
+        }
+        const applyArgs: Array<Place | SpreadPattern | Hole> = [];
+        for (const arg of effect.args) {
+          if (arg.kind === 'Hole') {
+            applyArgs.push(arg);
+          } else if (arg.kind === 'Identifier') {
+            const applyArg = substitutions.get(arg.identifier.id);
+            if (applyArg == null || applyArg.length !== 1) {
+              return null;
+            }
+            applyArgs.push(applyArg[0]);
+          } else {
+            const applyArg = substitutions.get(arg.place.identifier.id);
+            if (applyArg == null || applyArg.length !== 1) {
+              return null;
+            }
+            applyArgs.push({kind: 'Spread', place: applyArg[0]});
+          }
+        }
+        effects.push({
+          kind: 'Apply',
+          mutatesFunction: effect.mutatesFunction,
+          receiver: applyReceiver[0],
+          args: applyArgs,
+          function: applyFunction[0],
+          into: applyInto[0],
+          signature: effect.signature,
+          loc,
+        });
+        break;
+      }
+      case 'CreateFunction': {
+        CompilerError.throwTodo({
+          reason: `Support CreateFrom effects in signatures`,
+          loc: receiver.loc,
+        });
+      }
+      default: {
+        assertExhaustive(
+          effect,
+          `Unexpected effect kind '${(effect as any).kind}'`,
+        );
+      }
+    }
+  }
+  return effects;
+}
+
+function buildSignatureFromFunctionExpression(
+  env: Environment,
+  fn: FunctionExpression,
+): AliasingSignature {
+  let rest: IdentifierId | null = null;
+  const params: Array<IdentifierId> = [];
+  for (const param of fn.loweredFunc.func.params) {
+    if (param.kind === 'Identifier') {
+      params.push(param.identifier.id);
+    } else {
+      rest = param.place.identifier.id;
+    }
+  }
+  return {
+    receiver: makeIdentifierId(0),
+    params,
+    rest: rest ?? createTemporaryPlace(env, fn.loc).identifier.id,
+    returns: fn.loweredFunc.func.returns.identifier.id,
+    effects: fn.loweredFunc.func.aliasingEffects ?? [],
+    temporaries: [],
+  };
+}
+
+export type AbstractValue = {
+  kind: ValueKind;
+  reason: ReadonlySet<ValueReason>;
+};
+
+export function getWriteErrorReason(abstractValue: AbstractValue): string {
+  if (abstractValue.reason.has(ValueReason.Global)) {
+    return 'Modifying a variable defined outside a component or hook is not allowed. Consider using an effect';
+  } else if (abstractValue.reason.has(ValueReason.JsxCaptured)) {
+    return 'Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX';
+  } else if (abstractValue.reason.has(ValueReason.Context)) {
+    return `Modifying a value returned from 'useContext()' is not allowed.`;
+  } else if (abstractValue.reason.has(ValueReason.KnownReturnSignature)) {
+    return 'Modifying a value returned from a function whose return value should not be mutated';
+  } else if (abstractValue.reason.has(ValueReason.ReactiveFunctionArgument)) {
+    return 'Modifying component props or hook arguments is not allowed. Consider using a local variable instead';
+  } else if (abstractValue.reason.has(ValueReason.State)) {
+    return "Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead";
+  } else if (abstractValue.reason.has(ValueReason.ReducerState)) {
+    return "Modifying a value returned from 'useReducer()', which should not be modified directly. Use the dispatch function to update instead";
+  } else if (abstractValue.reason.has(ValueReason.Effect)) {
+    return 'Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()';
+  } else if (abstractValue.reason.has(ValueReason.HookCaptured)) {
+    return 'Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook';
+  } else if (abstractValue.reason.has(ValueReason.HookReturn)) {
+    return 'Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed';
+  } else {
+    return 'This modifies a variable that React considers immutable';
+  }
+}
+
+function getArgumentEffect(
+  signatureEffect: Effect | null,
+  arg: Place | SpreadPattern,
+): Effect {
+  if (signatureEffect != null) {
+    if (arg.kind === 'Identifier') {
+      return signatureEffect;
+    } else if (
+      signatureEffect === Effect.Mutate ||
+      signatureEffect === Effect.ConditionallyMutate
+    ) {
+      return signatureEffect;
+    } else {
+      // see call-spread-argument-mutable-iterator test fixture
+      if (signatureEffect === Effect.Freeze) {
+        CompilerError.throwTodo({
+          reason: 'Support spread syntax for hook arguments',
+          loc: arg.place.loc,
+        });
+      }
+      // effects[i] is Effect.Capture | Effect.Read | Effect.Store
+      return Effect.ConditionallyMutateIterator;
+    }
+  } else {
+    return Effect.ConditionallyMutate;
+  }
+}
+
+export function getFunctionCallSignature(
+  env: Environment,
+  type: Type,
+): FunctionSignature | null {
+  if (type.kind !== 'Function') {
+    return null;
+  }
+  return env.getFunctionSignature(type);
+}
+
+export function isKnownMutableEffect(effect: Effect): boolean {
+  switch (effect) {
+    case Effect.Store:
+    case Effect.ConditionallyMutate:
+    case Effect.ConditionallyMutateIterator:
+    case Effect.Mutate: {
+      return true;
+    }
+
+    case Effect.Unknown: {
+      CompilerError.invariant(false, {
+        reason: 'Unexpected unknown effect',
+        loc: GeneratedSource,
+      });
+    }
+    case Effect.Read:
+    case Effect.Capture:
+    case Effect.Freeze: {
+      return false;
+    }
+    default: {
+      assertExhaustive(effect, `Unexpected effect \`${effect}\``);
+    }
+  }
+}
+
+/**
+ * Joins two values using the following rules:
+ * == Effect Transitions ==
+ *
+ * Freezing an immutable value has not effect:
+ *                ┌───────────────┐
+ *                │               │
+ *                ▼               │ Freeze
+ * ┌──────────────────────────┐  │
+ * │        Immutable         │──┘
+ * └──────────────────────────┘
+ *
+ * Freezing a mutable or maybe-frozen value makes it frozen. Freezing a frozen
+ * value has no effect:
+ *                                                     ┌───────────────┐
+ * ┌─────────────────────────┐     Freeze             │               │
+ * │       MaybeFrozen       │────┐                   ▼               │ Freeze
+ * └─────────────────────────┘    │     ┌──────────────────────────┐  │
+ *                                 ├────▶│          Frozen          │──┘
+ *                                 │     └──────────────────────────┘
+ * ┌─────────────────────────┐    │
+ * │         Mutable         │────┘
+ * └─────────────────────────┘
+ *
+ * == Join Lattice ==
+ * - immutable | mutable => mutable
+ *     The justification is that immutable and mutable values are different types,
+ *     and functions can introspect them to tell the difference (if the argument
+ *     is null return early, else if its an object mutate it).
+ * - frozen | mutable => maybe-frozen
+ *     Frozen values are indistinguishable from mutable values at runtime, so callers
+ *     cannot dynamically avoid mutation of "frozen" values. If a value could be
+ *     frozen we have to distinguish it from a mutable value. But it also isn't known
+ *     frozen yet, so we distinguish as maybe-frozen.
+ * - immutable | frozen => frozen
+ *     This is subtle and falls out of the above rules. If a value could be any of
+ *     immutable, mutable, or frozen, then at runtime it could either be a primitive
+ *     or a reference type, and callers can't distinguish frozen or not for reference
+ *     types. To ensure that any sequence of joins btw those three states yields the
+ *     correct maybe-frozen, these two have to produce a frozen value.
+ * - <any> | maybe-frozen => maybe-frozen
+ * - immutable | context => context
+ * - mutable | context => context
+ * - frozen | context => maybe-frozen
+ *
+ * ┌──────────────────────────┐
+ * │        Immutable         │───┐
+ * └──────────────────────────┘   │
+ *                                 │    ┌─────────────────────────┐
+ *                                 ├───▶│         Frozen          │──┐
+ * ┌──────────────────────────┐   │    └─────────────────────────┘  │
+ * │          Frozen          │───┤                                 │  ┌─────────────────────────┐
+ * └──────────────────────────┘   │                                 ├─▶│       MaybeFrozen       │
+ *                                 │    ┌─────────────────────────┐  │  └─────────────────────────┘
+ *                                 ├───▶│       MaybeFrozen       │──┘
+ * ┌──────────────────────────┐   │    └─────────────────────────┘
+ * │         Mutable          │───┘
+ * └──────────────────────────┘
+ */
+function mergeValueKinds(a: ValueKind, b: ValueKind): ValueKind {
+  if (a === b) {
+    return a;
+  } else if (a === ValueKind.MaybeFrozen || b === ValueKind.MaybeFrozen) {
+    return ValueKind.MaybeFrozen;
+    // after this a and b differ and neither are MaybeFrozen
+  } else if (a === ValueKind.Mutable || b === ValueKind.Mutable) {
+    if (a === ValueKind.Frozen || b === ValueKind.Frozen) {
+      // frozen | mutable
+      return ValueKind.MaybeFrozen;
+    } else if (a === ValueKind.Context || b === ValueKind.Context) {
+      // context | mutable
+      return ValueKind.Context;
+    } else {
+      // mutable | immutable
+      return ValueKind.Mutable;
+    }
+  } else if (a === ValueKind.Context || b === ValueKind.Context) {
+    if (a === ValueKind.Frozen || b === ValueKind.Frozen) {
+      // frozen | context
+      return ValueKind.MaybeFrozen;
+    } else {
+      // context | immutable
+      return ValueKind.Context;
+    }
+  } else if (a === ValueKind.Frozen || b === ValueKind.Frozen) {
+    return ValueKind.Frozen;
+  } else if (a === ValueKind.Global || b === ValueKind.Global) {
+    return ValueKind.Global;
+  } else {
+    CompilerError.invariant(
+      a === ValueKind.Primitive && b == ValueKind.Primitive,
+      {
+        reason: `Unexpected value kind in mergeValues()`,
+        description: `Found kinds ${a} and ${b}`,
+        loc: GeneratedSource,
+      },
+    );
+    return ValueKind.Primitive;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts
new file mode 100644
index 00000000000..b8c5eeaa8e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts
@@ -0,0 +1,839 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, SourceLocation} from '..';
+import {
+  BlockId,
+  Effect,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  InstructionId,
+  isJsxType,
+  makeInstructionId,
+  ValueKind,
+  ValueReason,
+  Place,
+  isPrimitiveType,
+} from '../HIR/HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
+import {Err, Ok, Result} from '../Utils/Result';
+import {AliasingEffect, MutationReason} from './AliasingEffects';
+
+/**
+ * This pass builds an abstract model of the heap and interprets the effects of the
+ * given function in order to determine the following:
+ * - The mutable ranges of all identifiers in the function
+ * - The externally-visible effects of the function, such as mutations of params and
+ *   context-vars, aliasing between params/context-vars/return-value, and impure side
+ *   effects.
+ * - The legacy `Effect` to store on each Place.
+ *
+ * This pass builds a data flow graph using the effects, tracking an abstract notion
+ * of "when" each effect occurs relative to the others. It then walks each mutation
+ * effect against the graph, updating the range of each node that would be reachable
+ * at the "time" that the effect occurred.
+ *
+ * This pass also validates against invalid effects: any function that is reachable
+ * by being called, or via a Render effect, is validated against mutating globals
+ * or calling impure code.
+ *
+ * Note that this function also populates the outer function's aliasing effects with
+ * any mutations that apply to its params or context variables.
+ *
+ * ## Example
+ * A function expression such as the following:
+ *
+ * ```
+ * (x) => { x.y = true }
+ * ```
+ *
+ * Would populate a `Mutate x` aliasing effect on the outer function.
+ *
+ * ## Returned Function Effects
+ *
+ * The function returns (if successful) a list of externally-visible effects.
+ * This is determined by simulating a conditional, transitive mutation against
+ * each param, context variable, and return value in turn, and seeing which other
+ * such values are affected. If they're affected, they must be captured, so we
+ * record a Capture.
+ *
+ * The only tricky bit is the return value, which could _alias_ (or even assign)
+ * one or more of the params/context-vars rather than just capturing. So we have
+ * to do a bit more tracking for returns.
+ */
+export function inferMutationAliasingRanges(
+  fn: HIRFunction,
+  {isFunctionExpression}: {isFunctionExpression: boolean},
+): Result<Array<AliasingEffect>, CompilerError> {
+  // The set of externally-visible effects
+  const functionEffects: Array<AliasingEffect> = [];
+
+  /**
+   * Part 1: Infer mutable ranges for values. We build an abstract model of
+   * values, the alias/capture edges between them, and the set of mutations.
+   * Edges and mutations are ordered, with mutations processed against the
+   * abstract model only after it is fully constructed by visiting all blocks
+   * _and_ connecting phis. Phis are considered ordered at the time of the
+   * phi node.
+   *
+   * This should (may?) mean that mutations are able to see the full state
+   * of the graph and mark all the appropriate identifiers as mutated at
+   * the correct point, accounting for both backward and forward edges.
+   * Ie a mutation of x accounts for both values that flowed into x,
+   * and values that x flowed into.
+   */
+  const state = new AliasingState();
+  type PendingPhiOperand = {from: Place; into: Place; index: number};
+  const pendingPhis = new Map<BlockId, Array<PendingPhiOperand>>();
+  const mutations: Array<{
+    index: number;
+    id: InstructionId;
+    transitive: boolean;
+    kind: MutationKind;
+    place: Place;
+    reason: MutationReason | null;
+  }> = [];
+  const renders: Array<{index: number; place: Place}> = [];
+
+  let index = 0;
+
+  const errors = new CompilerError();
+
+  for (const param of [...fn.params, ...fn.context, fn.returns]) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    state.create(place, {kind: 'Object'});
+  }
+  const seenBlocks = new Set<BlockId>();
+  for (const block of fn.body.blocks.values()) {
+    for (const phi of block.phis) {
+      state.create(phi.place, {kind: 'Phi'});
+      for (const [pred, operand] of phi.operands) {
+        if (!seenBlocks.has(pred)) {
+          // NOTE: annotation required to actually typecheck and not silently infer `any`
+          const blockPhis = getOrInsertWith<BlockId, Array<PendingPhiOperand>>(
+            pendingPhis,
+            pred,
+            () => [],
+          );
+          blockPhis.push({from: operand, into: phi.place, index: index++});
+        } else {
+          state.assign(index++, operand, phi.place);
+        }
+      }
+    }
+    seenBlocks.add(block.id);
+
+    for (const instr of block.instructions) {
+      if (instr.effects == null) continue;
+      for (const effect of instr.effects) {
+        if (effect.kind === 'Create') {
+          state.create(effect.into, {kind: 'Object'});
+        } else if (effect.kind === 'CreateFunction') {
+          state.create(effect.into, {
+            kind: 'Function',
+            function: effect.function.loweredFunc.func,
+          });
+        } else if (effect.kind === 'CreateFrom') {
+          state.createFrom(index++, effect.from, effect.into);
+        } else if (effect.kind === 'Assign') {
+          /**
+           * TODO: Invariant that the node is not initialized yet
+           *
+           * InferFunctionExpressionAliasingEffectSignatures currently infers
+           * Assign effects in some places that should be Alias, leading to
+           * Assign effects that reinitialize a value. The end result appears to
+           * be fine, but we should fix that inference pass so that we add the
+           * invariant here.
+           */
+          if (!state.nodes.has(effect.into.identifier)) {
+            state.create(effect.into, {kind: 'Object'});
+          }
+          state.assign(index++, effect.from, effect.into);
+        } else if (effect.kind === 'Alias') {
+          state.assign(index++, effect.from, effect.into);
+        } else if (effect.kind === 'MaybeAlias') {
+          state.maybeAlias(index++, effect.from, effect.into);
+        } else if (effect.kind === 'Capture') {
+          state.capture(index++, effect.from, effect.into);
+        } else if (
+          effect.kind === 'MutateTransitive' ||
+          effect.kind === 'MutateTransitiveConditionally'
+        ) {
+          mutations.push({
+            index: index++,
+            id: instr.id,
+            transitive: true,
+            kind:
+              effect.kind === 'MutateTransitive'
+                ? MutationKind.Definite
+                : MutationKind.Conditional,
+            reason: null,
+            place: effect.value,
+          });
+        } else if (
+          effect.kind === 'Mutate' ||
+          effect.kind === 'MutateConditionally'
+        ) {
+          mutations.push({
+            index: index++,
+            id: instr.id,
+            transitive: false,
+            kind:
+              effect.kind === 'Mutate'
+                ? MutationKind.Definite
+                : MutationKind.Conditional,
+            reason: effect.kind === 'Mutate' ? (effect.reason ?? null) : null,
+            place: effect.value,
+          });
+        } else if (
+          effect.kind === 'MutateFrozen' ||
+          effect.kind === 'MutateGlobal' ||
+          effect.kind === 'Impure'
+        ) {
+          errors.pushDiagnostic(effect.error);
+          functionEffects.push(effect);
+        } else if (effect.kind === 'Render') {
+          renders.push({index: index++, place: effect.place});
+          functionEffects.push(effect);
+        }
+      }
+    }
+    const blockPhis = pendingPhis.get(block.id);
+    if (blockPhis != null) {
+      for (const {from, into, index} of blockPhis) {
+        state.assign(index, from, into);
+      }
+    }
+    if (block.terminal.kind === 'return') {
+      state.assign(index++, block.terminal.value, fn.returns);
+    }
+
+    if (
+      (block.terminal.kind === 'maybe-throw' ||
+        block.terminal.kind === 'return') &&
+      block.terminal.effects != null
+    ) {
+      for (const effect of block.terminal.effects) {
+        if (effect.kind === 'Alias') {
+          state.assign(index++, effect.from, effect.into);
+        } else {
+          CompilerError.invariant(effect.kind === 'Freeze', {
+            reason: `Unexpected '${effect.kind}' effect for MaybeThrow terminal`,
+            loc: block.terminal.loc,
+          });
+        }
+      }
+    }
+  }
+
+  for (const mutation of mutations) {
+    state.mutate(
+      mutation.index,
+      mutation.place.identifier,
+      makeInstructionId(mutation.id + 1),
+      mutation.transitive,
+      mutation.kind,
+      mutation.place.loc,
+      mutation.reason,
+      errors,
+    );
+  }
+  for (const render of renders) {
+    state.render(render.index, render.place.identifier, errors);
+  }
+  for (const param of [...fn.context, ...fn.params]) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+
+    const node = state.nodes.get(place.identifier);
+    if (node == null) {
+      continue;
+    }
+    let mutated = false;
+    if (node.local != null) {
+      if (node.local.kind === MutationKind.Conditional) {
+        mutated = true;
+        functionEffects.push({
+          kind: 'MutateConditionally',
+          value: {...place, loc: node.local.loc},
+        });
+      } else if (node.local.kind === MutationKind.Definite) {
+        mutated = true;
+        functionEffects.push({
+          kind: 'Mutate',
+          value: {...place, loc: node.local.loc},
+          reason: node.mutationReason,
+        });
+      }
+    }
+    if (node.transitive != null) {
+      if (node.transitive.kind === MutationKind.Conditional) {
+        mutated = true;
+        functionEffects.push({
+          kind: 'MutateTransitiveConditionally',
+          value: {...place, loc: node.transitive.loc},
+        });
+      } else if (node.transitive.kind === MutationKind.Definite) {
+        mutated = true;
+        functionEffects.push({
+          kind: 'MutateTransitive',
+          value: {...place, loc: node.transitive.loc},
+        });
+      }
+    }
+    if (mutated) {
+      place.effect = Effect.Capture;
+    }
+  }
+
+  /**
+   * Part 2
+   * Add legacy operand-specific effects based on instruction effects and mutable ranges.
+   * Also fixes up operand mutable ranges, making sure that start is non-zero if the value
+   * is mutated (depended on by later passes like InferReactiveScopeVariables which uses this
+   * to filter spurious mutations of globals, which we now guard against more precisely)
+   */
+  for (const block of fn.body.blocks.values()) {
+    for (const phi of block.phis) {
+      // TODO: we don't actually set these effects today!
+      phi.place.effect = Effect.Store;
+      const isPhiMutatedAfterCreation: boolean =
+        phi.place.identifier.mutableRange.end >
+        (block.instructions.at(0)?.id ?? block.terminal.id);
+      for (const operand of phi.operands.values()) {
+        operand.effect = isPhiMutatedAfterCreation
+          ? Effect.Capture
+          : Effect.Read;
+      }
+      if (
+        isPhiMutatedAfterCreation &&
+        phi.place.identifier.mutableRange.start === 0
+      ) {
+        /*
+         * TODO: ideally we'd construct a precise start range, but what really
+         * matters is that the phi's range appears mutable (end > start + 1)
+         * so we just set the start to the previous instruction before this block
+         */
+        const firstInstructionIdOfBlock =
+          block.instructions.at(0)?.id ?? block.terminal.id;
+        phi.place.identifier.mutableRange.start = makeInstructionId(
+          firstInstructionIdOfBlock - 1,
+        );
+      }
+    }
+    for (const instr of block.instructions) {
+      for (const lvalue of eachInstructionLValue(instr)) {
+        lvalue.effect = Effect.ConditionallyMutate;
+        if (lvalue.identifier.mutableRange.start === 0) {
+          lvalue.identifier.mutableRange.start = instr.id;
+        }
+        if (lvalue.identifier.mutableRange.end === 0) {
+          lvalue.identifier.mutableRange.end = makeInstructionId(
+            Math.max(instr.id + 1, lvalue.identifier.mutableRange.end),
+          );
+        }
+      }
+      for (const operand of eachInstructionValueOperand(instr.value)) {
+        operand.effect = Effect.Read;
+      }
+      if (instr.effects == null) {
+        continue;
+      }
+      const operandEffects = new Map<IdentifierId, Effect>();
+      for (const effect of instr.effects) {
+        switch (effect.kind) {
+          case 'Assign':
+          case 'Alias':
+          case 'Capture':
+          case 'CreateFrom':
+          case 'MaybeAlias': {
+            const isMutatedOrReassigned =
+              effect.into.identifier.mutableRange.end > instr.id;
+            if (isMutatedOrReassigned) {
+              operandEffects.set(effect.from.identifier.id, Effect.Capture);
+              operandEffects.set(effect.into.identifier.id, Effect.Store);
+            } else {
+              operandEffects.set(effect.from.identifier.id, Effect.Read);
+              operandEffects.set(effect.into.identifier.id, Effect.Store);
+            }
+            break;
+          }
+          case 'CreateFunction':
+          case 'Create': {
+            break;
+          }
+          case 'Mutate': {
+            operandEffects.set(effect.value.identifier.id, Effect.Store);
+            break;
+          }
+          case 'Apply': {
+            CompilerError.invariant(false, {
+              reason: `[AnalyzeFunctions] Expected Apply effects to be replaced with more precise effects`,
+              loc: effect.function.loc,
+            });
+          }
+          case 'MutateTransitive':
+          case 'MutateConditionally':
+          case 'MutateTransitiveConditionally': {
+            operandEffects.set(
+              effect.value.identifier.id,
+              Effect.ConditionallyMutate,
+            );
+            break;
+          }
+          case 'Freeze': {
+            operandEffects.set(effect.value.identifier.id, Effect.Freeze);
+            break;
+          }
+          case 'ImmutableCapture': {
+            // no-op, Read is the default
+            break;
+          }
+          case 'Impure':
+          case 'Render':
+          case 'MutateFrozen':
+          case 'MutateGlobal': {
+            // no-op
+            break;
+          }
+          default: {
+            assertExhaustive(
+              effect,
+              `Unexpected effect kind ${(effect as any).kind}`,
+            );
+          }
+        }
+      }
+      for (const lvalue of eachInstructionLValue(instr)) {
+        const effect =
+          operandEffects.get(lvalue.identifier.id) ??
+          Effect.ConditionallyMutate;
+        lvalue.effect = effect;
+      }
+      for (const operand of eachInstructionValueOperand(instr.value)) {
+        if (
+          operand.identifier.mutableRange.end > instr.id &&
+          operand.identifier.mutableRange.start === 0
+        ) {
+          operand.identifier.mutableRange.start = instr.id;
+        }
+        const effect = operandEffects.get(operand.identifier.id) ?? Effect.Read;
+        operand.effect = effect;
+      }
+
+      /**
+       * This case is targeted at hoisted functions like:
+       *
+       * ```
+       * x();
+       * function x() { ... }
+       * ```
+       *
+       * Which turns into:
+       *
+       * t0 = DeclareContext HoistedFunction x
+       * t1 = LoadContext x
+       * t2 = CallExpression t1 ( )
+       * t3 = FunctionExpression ...
+       * t4 = StoreContext Function x = t3
+       *
+       * If the function had captured mutable values, it would already have its
+       * range extended to include the StoreContext. But if the function doesn't
+       * capture any mutable values its range won't have been extended yet. We
+       * want to ensure that the value is memoized along with the context variable,
+       * not independently of it (bc of the way we do codegen for hoisted functions).
+       * So here we check for StoreContext rvalues and if they haven't already had
+       * their range extended to at least this instruction, we extend it.
+       */
+      if (
+        instr.value.kind === 'StoreContext' &&
+        instr.value.value.identifier.mutableRange.end <= instr.id
+      ) {
+        instr.value.value.identifier.mutableRange.end = makeInstructionId(
+          instr.id + 1,
+        );
+      }
+    }
+    if (block.terminal.kind === 'return') {
+      block.terminal.value.effect = isFunctionExpression
+        ? Effect.Read
+        : Effect.Freeze;
+    } else {
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        operand.effect = Effect.Read;
+      }
+    }
+  }
+
+  /**
+   * Part 3
+   * Finish populating the externally visible effects. Above we bubble-up the side effects
+   * (MutateFrozen/MutableGlobal/Impure/Render) as well as mutations of context variables.
+   * Here we populate an effect to create the return value as well as populating alias/capture
+   * effects for how data flows between the params, context vars, and return.
+   */
+  const returns = fn.returns.identifier;
+  functionEffects.push({
+    kind: 'Create',
+    into: fn.returns,
+    value: isPrimitiveType(returns)
+      ? ValueKind.Primitive
+      : isJsxType(returns.type)
+        ? ValueKind.Frozen
+        : ValueKind.Mutable,
+    reason: ValueReason.KnownReturnSignature,
+  });
+  /**
+   * Determine precise data-flow effects by simulating transitive mutations of the params/
+   * captures and seeing what other params/context variables are affected. Anything that
+   * would be transitively mutated needs a capture relationship.
+   */
+  const tracked: Array<Place> = [];
+  const ignoredErrors = new CompilerError();
+  for (const param of [...fn.params, ...fn.context, fn.returns]) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    tracked.push(place);
+  }
+  for (const into of tracked) {
+    const mutationIndex = index++;
+    state.mutate(
+      mutationIndex,
+      into.identifier,
+      null,
+      true,
+      MutationKind.Conditional,
+      into.loc,
+      null,
+      ignoredErrors,
+    );
+    for (const from of tracked) {
+      if (
+        from.identifier.id === into.identifier.id ||
+        from.identifier.id === fn.returns.identifier.id
+      ) {
+        continue;
+      }
+      const fromNode = state.nodes.get(from.identifier);
+      CompilerError.invariant(fromNode != null, {
+        reason: `Expected a node to exist for all parameters and context variables`,
+        loc: into.loc,
+      });
+      if (fromNode.lastMutated === mutationIndex) {
+        if (into.identifier.id === fn.returns.identifier.id) {
+          // The return value could be any of the params/context variables
+          functionEffects.push({
+            kind: 'Alias',
+            from,
+            into,
+          });
+        } else {
+          // Otherwise params/context-vars can only capture each other
+          functionEffects.push({
+            kind: 'Capture',
+            from,
+            into,
+          });
+        }
+      }
+    }
+  }
+
+  if (errors.hasAnyErrors() && !isFunctionExpression) {
+    return Err(errors);
+  }
+  return Ok(functionEffects);
+}
+
+function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void {
+  for (const effect of fn.aliasingEffects ?? []) {
+    switch (effect.kind) {
+      case 'Impure':
+      case 'MutateFrozen':
+      case 'MutateGlobal': {
+        errors.pushDiagnostic(effect.error);
+        break;
+      }
+    }
+  }
+}
+
+export enum MutationKind {
+  None = 0,
+  Conditional = 1,
+  Definite = 2,
+}
+
+type Node = {
+  id: Identifier;
+  createdFrom: Map<Identifier, number>;
+  captures: Map<Identifier, number>;
+  aliases: Map<Identifier, number>;
+  maybeAliases: Map<Identifier, number>;
+  edges: Array<{
+    index: number;
+    node: Identifier;
+    kind: 'capture' | 'alias' | 'maybeAlias';
+  }>;
+  transitive: {kind: MutationKind; loc: SourceLocation} | null;
+  local: {kind: MutationKind; loc: SourceLocation} | null;
+  lastMutated: number;
+  mutationReason: MutationReason | null;
+  value:
+    | {kind: 'Object'}
+    | {kind: 'Phi'}
+    | {kind: 'Function'; function: HIRFunction};
+};
+class AliasingState {
+  nodes: Map<Identifier, Node> = new Map();
+
+  create(place: Place, value: Node['value']): void {
+    this.nodes.set(place.identifier, {
+      id: place.identifier,
+      createdFrom: new Map(),
+      captures: new Map(),
+      aliases: new Map(),
+      maybeAliases: new Map(),
+      edges: [],
+      transitive: null,
+      local: null,
+      lastMutated: 0,
+      mutationReason: null,
+      value,
+    });
+  }
+
+  createFrom(index: number, from: Place, into: Place): void {
+    this.create(into, {kind: 'Object'});
+    const fromNode = this.nodes.get(from.identifier);
+    const toNode = this.nodes.get(into.identifier);
+    if (fromNode == null || toNode == null) {
+      return;
+    }
+    fromNode.edges.push({index, node: into.identifier, kind: 'alias'});
+    if (!toNode.createdFrom.has(from.identifier)) {
+      toNode.createdFrom.set(from.identifier, index);
+    }
+  }
+
+  capture(index: number, from: Place, into: Place): void {
+    const fromNode = this.nodes.get(from.identifier);
+    const toNode = this.nodes.get(into.identifier);
+    if (fromNode == null || toNode == null) {
+      return;
+    }
+    fromNode.edges.push({index, node: into.identifier, kind: 'capture'});
+    if (!toNode.captures.has(from.identifier)) {
+      toNode.captures.set(from.identifier, index);
+    }
+  }
+
+  assign(index: number, from: Place, into: Place): void {
+    const fromNode = this.nodes.get(from.identifier);
+    const toNode = this.nodes.get(into.identifier);
+    if (fromNode == null || toNode == null) {
+      return;
+    }
+    fromNode.edges.push({index, node: into.identifier, kind: 'alias'});
+    if (!toNode.aliases.has(from.identifier)) {
+      toNode.aliases.set(from.identifier, index);
+    }
+  }
+
+  maybeAlias(index: number, from: Place, into: Place): void {
+    const fromNode = this.nodes.get(from.identifier);
+    const toNode = this.nodes.get(into.identifier);
+    if (fromNode == null || toNode == null) {
+      return;
+    }
+    fromNode.edges.push({index, node: into.identifier, kind: 'maybeAlias'});
+    if (!toNode.maybeAliases.has(from.identifier)) {
+      toNode.maybeAliases.set(from.identifier, index);
+    }
+  }
+
+  render(index: number, start: Identifier, errors: CompilerError): void {
+    const seen = new Set<Identifier>();
+    const queue: Array<Identifier> = [start];
+    while (queue.length !== 0) {
+      const current = queue.pop()!;
+      if (seen.has(current)) {
+        continue;
+      }
+      seen.add(current);
+      const node = this.nodes.get(current);
+      if (node == null || node.transitive != null || node.local != null) {
+        continue;
+      }
+      if (node.value.kind === 'Function') {
+        appendFunctionErrors(errors, node.value.function);
+      }
+      for (const [alias, when] of node.createdFrom) {
+        if (when >= index) {
+          continue;
+        }
+        queue.push(alias);
+      }
+      for (const [alias, when] of node.aliases) {
+        if (when >= index) {
+          continue;
+        }
+        queue.push(alias);
+      }
+      for (const [capture, when] of node.captures) {
+        if (when >= index) {
+          continue;
+        }
+        queue.push(capture);
+      }
+    }
+  }
+
+  mutate(
+    index: number,
+    start: Identifier,
+    // Null is used for simulated mutations
+    end: InstructionId | null,
+    transitive: boolean,
+    startKind: MutationKind,
+    loc: SourceLocation,
+    reason: MutationReason | null,
+    errors: CompilerError,
+  ): void {
+    const seen = new Map<Identifier, MutationKind>();
+    const queue: Array<{
+      place: Identifier;
+      transitive: boolean;
+      direction: 'backwards' | 'forwards';
+      kind: MutationKind;
+    }> = [{place: start, transitive, direction: 'backwards', kind: startKind}];
+    while (queue.length !== 0) {
+      const {place: current, transitive, direction, kind} = queue.pop()!;
+      const previousKind = seen.get(current);
+      if (previousKind != null && previousKind >= kind) {
+        continue;
+      }
+      seen.set(current, kind);
+      const node = this.nodes.get(current);
+      if (node == null) {
+        continue;
+      }
+      node.mutationReason ??= reason;
+      node.lastMutated = Math.max(node.lastMutated, index);
+      if (end != null) {
+        node.id.mutableRange.end = makeInstructionId(
+          Math.max(node.id.mutableRange.end, end),
+        );
+      }
+      if (
+        node.value.kind === 'Function' &&
+        node.transitive == null &&
+        node.local == null
+      ) {
+        appendFunctionErrors(errors, node.value.function);
+      }
+      if (transitive) {
+        if (node.transitive == null || node.transitive.kind < kind) {
+          node.transitive = {kind, loc};
+        }
+      } else {
+        if (node.local == null || node.local.kind < kind) {
+          node.local = {kind, loc};
+        }
+      }
+      /**
+       * all mutations affect "forward" edges by the rules:
+       * - Capture a -> b, mutate(a) => mutate(b)
+       * - Alias a -> b, mutate(a) => mutate(b)
+       */
+      for (const edge of node.edges) {
+        if (edge.index >= index) {
+          break;
+        }
+        queue.push({
+          place: edge.node,
+          transitive,
+          direction: 'forwards',
+          // Traversing a maybeAlias edge always downgrades to conditional mutation
+          kind: edge.kind === 'maybeAlias' ? MutationKind.Conditional : kind,
+        });
+      }
+      for (const [alias, when] of node.createdFrom) {
+        if (when >= index) {
+          continue;
+        }
+        queue.push({
+          place: alias,
+          transitive: true,
+          direction: 'backwards',
+          kind,
+        });
+      }
+      if (direction === 'backwards' || node.value.kind !== 'Phi') {
+        /**
+         * all mutations affect backward alias edges by the rules:
+         * - Alias a -> b, mutate(b) => mutate(a)
+         * - Alias a -> b, mutateTransitive(b) => mutate(a)
+         *
+         * However, if we reached a phi because one of its inputs was mutated
+         * (and we're advancing "forwards" through that node's edges), then
+         * we know we've already processed the mutation at its source. The
+         * phi's other inputs can't be affected.
+         */
+        for (const [alias, when] of node.aliases) {
+          if (when >= index) {
+            continue;
+          }
+          queue.push({
+            place: alias,
+            transitive,
+            direction: 'backwards',
+            kind,
+          });
+        }
+        /**
+         * MaybeAlias indicates potential data flow from unknown function calls,
+         * so we downgrade mutations through these aliases to consider them
+         * conditional. This means we'll consider them for mutation *range*
+         * purposes but not report validation errors for mutations, since
+         * we aren't sure that the `from` value could actually be aliased.
+         */
+        for (const [alias, when] of node.maybeAliases) {
+          if (when >= index) {
+            continue;
+          }
+          queue.push({
+            place: alias,
+            transitive,
+            direction: 'backwards',
+            kind: MutationKind.Conditional,
+          });
+        }
+      }
+      /**
+       * but only transitive mutations affect captures
+       */
+      if (transitive) {
+        for (const [capture, when] of node.captures) {
+          if (when >= index) {
+            continue;
+          }
+          queue.push({
+            place: capture,
+            transitive,
+            direction: 'backwards',
+            kind,
+          });
+        }
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReactivePlaces.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReactivePlaces.ts
new file mode 100644
index 00000000000..6b77c89f3b7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReactivePlaces.ts
@@ -0,0 +1,413 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  Effect,
+  Environment,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  Instruction,
+  Place,
+  evaluatesToStableTypeOrContainer,
+  getHookKind,
+  isStableType,
+  isStableTypeContainer,
+  isUseOperator,
+} from '../HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionOperand,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {
+  findDisjointMutableValues,
+  isMutable,
+} from '../ReactiveScopes/InferReactiveScopeVariables';
+import DisjointSet from '../Utils/DisjointSet';
+import {assertExhaustive} from '../Utils/utils';
+import {createControlDominators} from './ControlDominators';
+
+/**
+ * Side map to track and propagate sources of stability (i.e. hook calls such as
+ * `useRef()` and property reads such as `useState()[1]). Note that this
+ * requires forward data flow analysis since stability is not part of React
+ * Compiler's type system.
+ */
+class StableSidemap {
+  map: Map<IdentifierId, {isStable: boolean}> = new Map();
+  env: Environment;
+
+  constructor(env: Environment) {
+    this.env = env;
+  }
+
+  handleInstruction(instr: Instruction): void {
+    const {value, lvalue} = instr;
+
+    switch (value.kind) {
+      case 'CallExpression':
+      case 'MethodCall': {
+        /**
+         * Sources of stability are known hook calls
+         */
+        if (evaluatesToStableTypeOrContainer(this.env, instr)) {
+          if (isStableType(lvalue.identifier)) {
+            this.map.set(lvalue.identifier.id, {
+              isStable: true,
+            });
+          } else {
+            this.map.set(lvalue.identifier.id, {
+              isStable: false,
+            });
+          }
+        }
+        break;
+      }
+
+      case 'Destructure':
+      case 'PropertyLoad': {
+        /**
+         * PropertyLoads may from stable containers may also produce stable
+         * values. ComputedLoads are technically safe for now (as all stable
+         * containers have differently-typed elements), but are not handled as
+         * they should be rare anyways.
+         */
+        const source =
+          value.kind === 'Destructure'
+            ? value.value.identifier.id
+            : value.object.identifier.id;
+        const entry = this.map.get(source);
+        if (entry) {
+          for (const lvalue of eachInstructionLValue(instr)) {
+            if (isStableTypeContainer(lvalue.identifier)) {
+              this.map.set(lvalue.identifier.id, {
+                isStable: false,
+              });
+            } else if (isStableType(lvalue.identifier)) {
+              this.map.set(lvalue.identifier.id, {
+                isStable: true,
+              });
+            }
+          }
+        }
+        break;
+      }
+
+      case 'StoreLocal': {
+        const entry = this.map.get(value.value.identifier.id);
+        if (entry) {
+          this.map.set(lvalue.identifier.id, entry);
+          this.map.set(value.lvalue.place.identifier.id, entry);
+        }
+        break;
+      }
+
+      case 'LoadLocal': {
+        const entry = this.map.get(value.place.identifier.id);
+        if (entry) {
+          this.map.set(lvalue.identifier.id, entry);
+        }
+        break;
+      }
+    }
+  }
+
+  isStable(id: IdentifierId): boolean {
+    const entry = this.map.get(id);
+    return entry != null ? entry.isStable : false;
+  }
+}
+/*
+ * Infers which `Place`s are reactive, ie may *semantically* change
+ * over the course of the component/hook's lifetime. Places are reactive
+ * if they derive from source source of reactivity, which includes the
+ * following categories.
+ *
+ * ## Props
+ *
+ * Props may change so they're reactive:
+ *
+ * ## Hooks
+ *
+ * Hooks may access state or context, which can change so they're reactive.
+ *
+ * ## Mutation with reactive operands
+ *
+ * Any value that is mutated in an instruction that also has reactive operands
+ * could cause the modified value to capture a reference to the reactive value,
+ * making the mutated value reactive.
+ *
+ * Ex:
+ * ```
+ * function Component(props) {
+ *    const x = {}; // not yet reactive
+ *    x.y = props.y;
+ * }
+ * ```
+ *
+ * Here `x` is modified in an instruction that has a reactive operand (`props.y`)
+ * so x becomes reactive.
+ *
+ * ## Conditional assignment based on a reactive condition
+ *
+ * Conditionally reassigning a variable based on a condition which is reactive means
+ * that the value being assigned could change, hence that variable also becomes
+ * reactive.
+ *
+ * ```
+ * function Component(props) {
+ *    let x;
+ *    if (props.cond) {
+ *      x = 1;
+ *    } else {
+ *      x = 2;
+ *    }
+ *    return x;
+ * }
+ * ```
+ *
+ * Here `x` is never assigned a reactive value (it is assigned the constant 1 or 2) but
+ * the condition, `props.cond`, is reactive, and therefore `x` could change reactively too.
+ *
+ *
+ * # Algorithm
+ *
+ * The algorithm uses a fixpoint iteration in order to propagate reactivity "forward" through
+ * the control-flow graph. We track whether each IdentifierId is reactive and terminate when
+ * there are no changes after a given pass over the CFG.
+ *
+ * Note that in Forget it's possible to create a "readonly" reference to a value where
+ * the reference is created within that value's mutable range:
+ *
+ * ```javascript
+ * const x = [];
+ * const z = [x];
+ * x.push(props.input);
+ *
+ * return <div>{z}</div>;
+ * ```
+ *
+ * Here `z` is never used to mutate the value, but it is aliasing `x` which
+ * is mutated after the creation of the alias. The pass needs to account for
+ * values which become reactive via mutability, and propagate this reactivity
+ * to these readonly aliases. Using forward data flow is insufficient since
+ * this information needs to propagate "backwards" from the `x.push(props.input)`
+ * to the previous `z = [x]` line. We use a fixpoint iteration even if the
+ * program has no back edges to accomplish this.
+ */
+export function inferReactivePlaces(fn: HIRFunction): void {
+  const reactiveIdentifiers = new ReactivityMap(findDisjointMutableValues(fn));
+  const stableIdentifierSources = new StableSidemap(fn.env);
+  for (const param of fn.params) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    reactiveIdentifiers.markReactive(place);
+  }
+
+  const isReactiveControlledBlock = createControlDominators(fn, place =>
+    reactiveIdentifiers.isReactive(place),
+  );
+
+  do {
+    for (const [, block] of fn.body.blocks) {
+      let hasReactiveControl = isReactiveControlledBlock(block.id);
+
+      for (const phi of block.phis) {
+        if (reactiveIdentifiers.isReactive(phi.place)) {
+          // Already marked reactive on a previous pass
+          continue;
+        }
+        let isPhiReactive = false;
+        for (const [, operand] of phi.operands) {
+          if (reactiveIdentifiers.isReactive(operand)) {
+            isPhiReactive = true;
+            break;
+          }
+        }
+        if (isPhiReactive) {
+          reactiveIdentifiers.markReactive(phi.place);
+        } else {
+          for (const [pred] of phi.operands) {
+            if (isReactiveControlledBlock(pred)) {
+              reactiveIdentifiers.markReactive(phi.place);
+              break;
+            }
+          }
+        }
+      }
+      for (const instruction of block.instructions) {
+        stableIdentifierSources.handleInstruction(instruction);
+        const {value} = instruction;
+        let hasReactiveInput = false;
+        /*
+         * NOTE: we want to mark all operands as reactive or not, so we
+         * avoid short-circuiting here
+         */
+        for (const operand of eachInstructionValueOperand(value)) {
+          const reactive = reactiveIdentifiers.isReactive(operand);
+          hasReactiveInput ||= reactive;
+        }
+
+        /**
+         * Hooks and the 'use' operator are sources of reactivity because
+         * they can access state (for hooks) or context (for hooks/use).
+         *
+         * Technically, `use` could be used to await a non-reactive promise,
+         * but we are conservative and assume that the value could be reactive.
+         */
+        if (
+          value.kind === 'CallExpression' &&
+          (getHookKind(fn.env, value.callee.identifier) != null ||
+            isUseOperator(value.callee.identifier))
+        ) {
+          hasReactiveInput = true;
+        } else if (
+          value.kind === 'MethodCall' &&
+          (getHookKind(fn.env, value.property.identifier) != null ||
+            isUseOperator(value.property.identifier))
+        ) {
+          hasReactiveInput = true;
+        }
+
+        if (hasReactiveInput) {
+          for (const lvalue of eachInstructionLValue(instruction)) {
+            /**
+             * Note that it's not correct to mark all stable-typed identifiers
+             * as non-reactive, since ternaries and other value blocks can
+             * produce reactive identifiers typed as these.
+             * (e.g. `props.cond ? setState1 : setState2`)
+             */
+            if (stableIdentifierSources.isStable(lvalue.identifier.id)) {
+              continue;
+            }
+            reactiveIdentifiers.markReactive(lvalue);
+          }
+        }
+        if (hasReactiveInput || hasReactiveControl) {
+          for (const operand of eachInstructionValueOperand(value)) {
+            switch (operand.effect) {
+              case Effect.Capture:
+              case Effect.Store:
+              case Effect.ConditionallyMutate:
+              case Effect.ConditionallyMutateIterator:
+              case Effect.Mutate: {
+                if (isMutable(instruction, operand)) {
+                  reactiveIdentifiers.markReactive(operand);
+                }
+                break;
+              }
+              case Effect.Freeze:
+              case Effect.Read: {
+                // no-op
+                break;
+              }
+              case Effect.Unknown: {
+                CompilerError.invariant(false, {
+                  reason: 'Unexpected unknown effect',
+                  loc: operand.loc,
+                });
+              }
+              default: {
+                assertExhaustive(
+                  operand.effect,
+                  `Unexpected effect kind \`${operand.effect}\``,
+                );
+              }
+            }
+          }
+        }
+      }
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        reactiveIdentifiers.isReactive(operand);
+      }
+    }
+  } while (reactiveIdentifiers.snapshot());
+
+  function propagateReactivityToInnerFunctions(
+    fn: HIRFunction,
+    isOutermost: boolean,
+  ): void {
+    for (const [, block] of fn.body.blocks) {
+      for (const instr of block.instructions) {
+        if (!isOutermost) {
+          for (const operand of eachInstructionOperand(instr)) {
+            reactiveIdentifiers.isReactive(operand);
+          }
+        }
+        if (
+          instr.value.kind === 'ObjectMethod' ||
+          instr.value.kind === 'FunctionExpression'
+        ) {
+          propagateReactivityToInnerFunctions(
+            instr.value.loweredFunc.func,
+            false,
+          );
+        }
+      }
+      if (!isOutermost) {
+        for (const operand of eachTerminalOperand(block.terminal)) {
+          reactiveIdentifiers.isReactive(operand);
+        }
+      }
+    }
+  }
+
+  /**
+   * Propagate reactivity for inner functions, as we eventually hoist and dedupe
+   * dependency instructions for scopes.
+   */
+  propagateReactivityToInnerFunctions(fn, true);
+}
+
+class ReactivityMap {
+  hasChanges: boolean = false;
+  reactive: Set<IdentifierId> = new Set();
+
+  /**
+   * Sets of mutably aliased identifiers — these are the same foundation for determining
+   * reactive scopes a few passes later. The actual InferReactiveScopeVariables pass runs
+   * after LeaveSSA, which artificially merges mutable ranges in cases such as declarations
+   * that are later reassigned. Here we use only the underlying sets of mutably aliased values.
+   *
+   * Any identifier that has a mapping in this disjoint set will be treated as a stand in for
+   * its canonical identifier in all cases, so that any reactivity flowing into one identifier of
+   * an alias group will effectively make the whole alias group (all its identifiers) reactive.
+   */
+  aliasedIdentifiers: DisjointSet<Identifier>;
+
+  constructor(aliasedIdentifiers: DisjointSet<Identifier>) {
+    this.aliasedIdentifiers = aliasedIdentifiers;
+  }
+
+  isReactive(place: Place): boolean {
+    const identifier =
+      this.aliasedIdentifiers.find(place.identifier) ?? place.identifier;
+    const reactive = this.reactive.has(identifier.id);
+    if (reactive) {
+      place.reactive = true;
+    }
+    return reactive;
+  }
+
+  markReactive(place: Place): void {
+    place.reactive = true;
+    const identifier =
+      this.aliasedIdentifiers.find(place.identifier) ?? place.identifier;
+    if (!this.reactive.has(identifier.id)) {
+      this.hasChanges = true;
+      this.reactive.add(identifier.id);
+    }
+  }
+
+  snapshot(): boolean {
+    const hasChanges = this.hasChanges;
+    this.hasChanges = false;
+    return hasChanges;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InlineImmediatelyInvokedFunctionExpressions.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InlineImmediatelyInvokedFunctionExpressions.ts
new file mode 100644
index 00000000000..d71f6ebc8a0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InlineImmediatelyInvokedFunctionExpressions.ts
@@ -0,0 +1,336 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BasicBlock,
+  BlockId,
+  Environment,
+  FunctionExpression,
+  GeneratedSource,
+  GotoTerminal,
+  GotoVariant,
+  HIRFunction,
+  IdentifierId,
+  InstructionKind,
+  LabelTerminal,
+  Place,
+  isStatementBlockKind,
+  makeInstructionId,
+  mergeConsecutiveBlocks,
+  promoteTemporary,
+  reversePostorderBlocks,
+} from '../HIR';
+import {
+  createTemporaryPlace,
+  markInstructionIds,
+  markPredecessors,
+} from '../HIR/HIRBuilder';
+import {eachInstructionValueOperand} from '../HIR/visitors';
+import {retainWhere} from '../Utils/utils';
+
+/*
+ * Inlines immediately invoked function expressions (IIFEs) to allow more fine-grained memoization
+ * of the values they produce.
+ *
+ * Example:
+ *
+ * ```
+ * const x = (() => {
+ *    const x = [];
+ *    x.push(foo());
+ *    return x;
+ * })();
+ *
+ * =>
+ *
+ * bb0:
+ *     // placeholder for the result, all return statements will assign here
+ *    let t0;
+ *    // Label allows using a goto (break) to exit out of the body
+ *    Label block=bb1 fallthrough=bb2
+ * bb1:
+ *    // code within the function expression
+ *    const x0 = [];
+ *    x0.push(foo());
+ *    // return is replaced by assignment to the result variable...
+ *    t0 = x0;
+ *    // ...and a goto to the code after the function expression invocation
+ *    Goto bb2
+ * bb2:
+ *    // code after the IIFE call
+ *    const x = t0;
+ * ```
+ *
+ * The implementation relies on HIR's ability to support labeled blocks:
+ * - We terminate the basic block just prior to the CallExpression of the IIFE
+ *    with a LabelTerminal whose fallback is the code following the CallExpression.
+ *    Just prior to the terminal we also create a named temporary variable which
+ *    will hold the result.
+ * - We then inline the contents of the function "in between" (conceptually) those
+ *    two blocks.
+ * - All return statements in the original function expression are replaced with a
+ *    StoreLocal to the temporary we allocated before plus a Goto to the fallthrough
+ *    block (code following the CallExpression).
+ *
+ * Note that if the inliined function has only one return, we avoid the labeled block
+ * and fully inline the code. The original return is replaced with an assignmen to the
+ * IIFE's call expression lvalue.
+ */
+export function inlineImmediatelyInvokedFunctionExpressions(
+  fn: HIRFunction,
+): void {
+  // Track all function expressions that are assigned to a temporary
+  const functions = new Map<IdentifierId, FunctionExpression>();
+  // Functions that are inlined
+  const inlinedFunctions = new Set<IdentifierId>();
+
+  /*
+   * Iterate the *existing* blocks from the outer component to find IIFEs
+   * and inline them. During iteration we will modify `fn` (by inlining the CFG
+   * of IIFEs) so we explicitly copy references to just the original
+   * function's blocks first. As blocks are split to make room for IIFE calls,
+   * the split portions of the blocks will be added to this queue.
+   */
+  const queue = Array.from(fn.body.blocks.values());
+  queue: for (const block of queue) {
+    /*
+     * We can't handle labels inside expressions yet, so we don't inline IIFEs if they are in an
+     * expression block.
+     */
+    if (isStatementBlockKind(block.kind)) {
+      for (let ii = 0; ii < block.instructions.length; ii++) {
+        const instr = block.instructions[ii]!;
+        switch (instr.value.kind) {
+          case 'FunctionExpression': {
+            if (instr.lvalue.identifier.name === null) {
+              functions.set(instr.lvalue.identifier.id, instr.value);
+            }
+            break;
+          }
+          case 'CallExpression': {
+            if (instr.value.args.length !== 0) {
+              // We don't support inlining when there are arguments
+              continue;
+            }
+            const body = functions.get(instr.value.callee.identifier.id);
+            if (body === undefined) {
+              // Not invoking a local function expression, can't inline
+              continue;
+            }
+
+            if (
+              body.loweredFunc.func.params.length > 0 ||
+              body.loweredFunc.func.async ||
+              body.loweredFunc.func.generator
+            ) {
+              // Can't inline functions with params, or async/generator functions
+              continue;
+            }
+
+            // We know this function is used for an IIFE and can prune it later
+            inlinedFunctions.add(instr.value.callee.identifier.id);
+
+            // Create a new block which will contain code following the IIFE call
+            const continuationBlockId = fn.env.nextBlockId;
+            const continuationBlock: BasicBlock = {
+              id: continuationBlockId,
+              instructions: block.instructions.slice(ii + 1),
+              kind: block.kind,
+              phis: new Set(),
+              preds: new Set(),
+              terminal: block.terminal,
+            };
+            fn.body.blocks.set(continuationBlockId, continuationBlock);
+
+            /*
+             * Trim the original block to contain instructions up to (but not including)
+             * the IIFE
+             */
+            block.instructions.length = ii;
+
+            if (hasSingleExitReturnTerminal(body.loweredFunc.func)) {
+              block.terminal = {
+                kind: 'goto',
+                block: body.loweredFunc.func.body.entry,
+                id: block.terminal.id,
+                loc: block.terminal.loc,
+                variant: GotoVariant.Break,
+              } as GotoTerminal;
+              for (const block of body.loweredFunc.func.body.blocks.values()) {
+                if (block.terminal.kind === 'return') {
+                  block.instructions.push({
+                    id: makeInstructionId(0),
+                    loc: block.terminal.loc,
+                    lvalue: instr.lvalue,
+                    value: {
+                      kind: 'LoadLocal',
+                      loc: block.terminal.loc,
+                      place: block.terminal.value,
+                    },
+                    effects: null,
+                  });
+                  block.terminal = {
+                    kind: 'goto',
+                    block: continuationBlockId,
+                    id: block.terminal.id,
+                    loc: block.terminal.loc,
+                    variant: GotoVariant.Break,
+                  } as GotoTerminal;
+                }
+              }
+              for (const [id, block] of body.loweredFunc.func.body.blocks) {
+                block.preds.clear();
+                fn.body.blocks.set(id, block);
+              }
+            } else {
+              /*
+               * To account for multiple returns within the lambda, we treat the lambda
+               * as if it were a single labeled statement, and replace all returns with gotos
+               * to the label fallthrough.
+               */
+              const newTerminal: LabelTerminal = {
+                block: body.loweredFunc.func.body.entry,
+                id: makeInstructionId(0),
+                kind: 'label',
+                fallthrough: continuationBlockId,
+                loc: block.terminal.loc,
+              };
+              block.terminal = newTerminal;
+
+              // We store the result in the IIFE temporary
+              const result = instr.lvalue;
+
+              // Declare the IIFE temporary
+              declareTemporary(fn.env, block, result);
+
+              // Promote the temporary with a name as we require this to persist
+              if (result.identifier.name == null) {
+                promoteTemporary(result.identifier);
+              }
+
+              /*
+               * Rewrite blocks from the lambda to replace any `return` with a
+               * store to the result and `goto` the continuation block
+               */
+              for (const [id, block] of body.loweredFunc.func.body.blocks) {
+                block.preds.clear();
+                rewriteBlock(fn.env, block, continuationBlockId, result);
+                fn.body.blocks.set(id, block);
+              }
+            }
+
+            /*
+             * Ensure we visit the continuation block, since there may have been
+             * sequential IIFEs that need to be visited.
+             */
+            queue.push(continuationBlock);
+            continue queue;
+          }
+          default: {
+            for (const place of eachInstructionValueOperand(instr.value)) {
+              // Any other use of a function expression means it isn't an IIFE
+              functions.delete(place.identifier.id);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  if (inlinedFunctions.size !== 0) {
+    // Remove instructions that define lambdas which we inlined
+    for (const block of fn.body.blocks.values()) {
+      retainWhere(
+        block.instructions,
+        instr => !inlinedFunctions.has(instr.lvalue.identifier.id),
+      );
+    }
+
+    /*
+     * If terminals have changed then blocks may have become newly unreachable.
+     * Re-run minification of the graph (incl reordering instruction ids)
+     */
+    reversePostorderBlocks(fn.body);
+    markInstructionIds(fn.body);
+    markPredecessors(fn.body);
+    mergeConsecutiveBlocks(fn);
+  }
+}
+
+/**
+ * Returns true if the function has a single exit terminal (throw/return) which is a return
+ */
+function hasSingleExitReturnTerminal(fn: HIRFunction): boolean {
+  let hasReturn = false;
+  let exitCount = 0;
+  for (const [, block] of fn.body.blocks) {
+    if (block.terminal.kind === 'return' || block.terminal.kind === 'throw') {
+      hasReturn ||= block.terminal.kind === 'return';
+      exitCount++;
+    }
+  }
+  return exitCount === 1 && hasReturn;
+}
+
+/*
+ * Rewrites the block so that all `return` terminals are replaced:
+ * * Add a StoreLocal <returnValue> = <terminal.value>
+ * * Replace the terminal with a Goto to <returnTarget>
+ */
+function rewriteBlock(
+  env: Environment,
+  block: BasicBlock,
+  returnTarget: BlockId,
+  returnValue: Place,
+): void {
+  const {terminal} = block;
+  if (terminal.kind !== 'return') {
+    return;
+  }
+  block.instructions.push({
+    id: makeInstructionId(0),
+    loc: terminal.loc,
+    lvalue: createTemporaryPlace(env, terminal.loc),
+    value: {
+      kind: 'StoreLocal',
+      lvalue: {kind: InstructionKind.Reassign, place: {...returnValue}},
+      value: terminal.value,
+      type: null,
+      loc: terminal.loc,
+    },
+    effects: null,
+  });
+  block.terminal = {
+    kind: 'goto',
+    block: returnTarget,
+    id: makeInstructionId(0),
+    variant: GotoVariant.Break,
+    loc: block.terminal.loc,
+  };
+}
+
+function declareTemporary(
+  env: Environment,
+  block: BasicBlock,
+  result: Place,
+): void {
+  block.instructions.push({
+    id: makeInstructionId(0),
+    loc: GeneratedSource,
+    lvalue: createTemporaryPlace(env, result.loc),
+    value: {
+      kind: 'DeclareLocal',
+      lvalue: {
+        place: result,
+        kind: InstructionKind.Let,
+      },
+      type: null,
+      loc: result.loc,
+    },
+    effects: null,
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md b/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md
new file mode 100644
index 00000000000..ab327c255b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md
@@ -0,0 +1,559 @@
+# The Mutability & Aliasing Model
+
+This document describes the new (as of June 2025) mutability and aliasing model powering React Compiler. The mutability and aliasing system is a conceptual subcomponent whose primary role is to determine minimal sets of values that mutate together, and the range of instructions over which those mutations occur. These minimal sets of values that mutate together, and the corresponding instructions doing those mutations, are ultimately grouped into reactive scopes, which then translate into memoization blocks in the output (after substantial additional processing described in the comments of those passes).
+
+To build an intuition, consider the following example:
+
+```js
+function Component() {
+    // a is created and mutated over the course of these two instructions:
+    const a = {};
+    mutate(a);
+
+    // b and c are created and mutated together — mutate might modify b via c
+    const b = {};
+    const c = {b};
+    mutate(c);
+
+    // does not modify a/b/c
+    return <Foo a={a} c={c} />
+}
+```
+
+The goal of mutability and aliasing inference is to understand the set of instructions that create/modify a, b, and c.
+
+In code, the mutability and aliasing model is compromised of the following phases:
+
+* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errros) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen.
+* `InferMutationAliasingRanges`. Infers a mutable range (start:end instruction ids) for each value in the program, and annotates each Place with its effect type for usage in later passes. This builds a graph of data flow through the program over time in order to understand which mutations effect which values.
+* `InferReactiveScopeVariables`. Given the per-Place effects, determines disjoint sets of values that mutate together and assigns all identifiers in each set to a unique scope, and updates the range to include the ranges of all constituent values.
+
+Finally, `AnalyzeFunctions` needs to understand the mutation and aliasing semantics of nested FunctionExpression and ObjectMethod values. `AnalyzeFunctions` calls `InferFunctionExpressionAliasingEffectsSignature` to determine the publicly observable set of mutation/aliasing effects for nested functions.
+
+## Mutation and Aliasing Effects
+
+The inference model is based on a set of "effects" that describe subtle aspects of mutation, aliasing, and other changes to the state of values over time
+
+### Creation Effects
+
+#### Create
+
+```js
+{
+    kind: 'Create';
+    into: Place;
+    value: ValueKind;
+    reason: ValueReason;
+}
+```
+
+Describes the creation of a new value with the given kind, and reason for having that kind. For example, `x = 10` might have an effect like `Create x = ValueKind.Primitive [ValueReason.Other]`.
+
+#### CreateFunction
+
+```js
+{
+    kind: 'CreateFunction';
+    captures: Array<Place>;
+    function: FunctionExpression | ObjectMethod;
+    into: Place;
+}
+```
+
+Describes the creation of new function value, capturing the given set of mutable values. CreateFunction is used to specifically track function types so that we can precisely model calls to those functions with `Apply`.
+
+#### Apply
+
+```js
+{
+    kind: 'Apply';
+    receiver: Place;
+    function: Place; // same as receiver for function calls
+    mutatesFunction: boolean; // indicates if this is a type that we consdier to mutate the function itself by default
+    args: Array<Place | SpreadPattern | Hole>;
+    into: Place; // where result is stored
+    signature: FunctionSignature | null;
+}
+```
+
+Describes the potential creation of a value by calling a function. This models `new`, function calls, and method calls. The inference algorithm uses the most precise signature it can determine:
+
+* If the function is a locally created function expression, we use a signature inferred from the behavior of that function to interpret the effects of calling it with the given arguments.
+* Else if the function has a known aliasing signature (new style precise effects signature), we apply the arguments to that signature to get a precise set of effects.
+* Else if the function has a legacy style signature (with per-param effects) we convert the legacy per-Place effects into aliasing effects (described in this doc) and apply those.
+* Else fall back to inferring a generic set of effects.
+
+The generic fallback is to assume:
+- The return value may alias any of the arguments (Alias param -> return)
+- Any arguments *may* be transitively mutated (MutateTransitiveConditionally param)
+- Any argument may be captured into any other argument (Capture paramN -> paramM for all N,M where N != M)
+
+### Aliasing Effects
+
+These effects describe data-flow only, separately from mutation or other state-changing semantics.
+
+#### Assign
+
+```js
+{
+    kind: 'Assign';
+    from: Place;
+    into: Place;
+}
+```
+
+Describes an `x = y` assignment, where the receiving (into) value is overwritten with a new (from) value. After this effect, any previous assignments/aliases to the receiving value are dropped. Note that `Alias` initializes the receiving value.
+
+> TODO: InferMutationAliasingRanges may not fully reset aliases on encountering this effect
+
+#### Alias
+
+```js
+{
+    kind: 'Alias';
+    from: Place;
+    into: Place;
+}
+```
+
+Describes that an assignment _may_ occur, but that the possible assignment is non-exclusive. The canonical use-case for `Alias` is a function that may return more than one of its arguments, such as `(x, y, z) => x ? y : z`. Here, the result of this function may be `y` or `z`, but neither one overwrites the other. Note that `Alias` does _not_ initialize the receiving value: it should always be paired with an effect to create the receiving value.
+
+#### Capture
+
+```js
+{
+    kind: 'Capture';
+    from: Place;
+    into: Place;
+}
+```
+
+Describes that a reference to one variable (from) is stored within another value (into). Examples include:
+- An array expression captures the items of the array (`array = [capturedValue]`)
+- Array.prototype.push captures the pushed values into the array (`array.push(capturedValue)`)
+- Property assignment captures the value onto the object (`object.property = capturedValue`)
+
+#### CreateFrom
+
+```js
+{
+    kind: 'CreateFrom';
+    from: Place;
+    into: Place;
+}
+```
+
+This is somewhat the inverse of `Capture`. The `CreateFrom` effect describes that a variable is initialized by extracting _part_ of another value, without taking a direct alias to the full other value. Examples include:
+
+- Indexing into an array (`createdFrom = array[0]`)
+- Reading an object property (`createdFrom = object.property`)
+- Getting a Map key (`createdFrom = map.get(key)`)
+
+#### ImmutableCapture
+
+Describes immutable data flow from one value to another. This is not currently used for anything, but is intended to eventually power a more sophisticated escape analysis.
+
+### MaybeAlias
+
+Describes potential data flow that the compiler knows may occur behind a function call, but cannot be sure about. For example, `foo(x)` _may_ be the identity function and return `x`, or `cond(a, b, c)` may conditionally return `b` or `c` depending on the value of `a`, but those functions could just as easily return new mutable values and not capture any information from their arguments. MaybeAlias represents that we have to consider the potential for data flow when deciding mutable ranges, but should be conservative about reporting errors. For example, `foo(someFrozenValue).property = true` should not error since we don't know for certain that foo returns its input.
+
+### State-Changing Effects
+
+The following effects describe state changes to specific values, not data flow. In many cases, JavaScript semantics will involve a combination of both data-flow effects *and* state-change effects. For example, `object.property = value` has data flow (`Capture object <- value`) and mutation (`Mutate object`).
+
+#### Freeze
+
+```js
+{
+    kind: 'Freeze',
+    // The reference being frozen
+    value: Place;
+    // The reason the value is frozen (passed to a hook, passed to jsx, etc)
+    reason: ValueReason;
+}
+```
+
+Once a reference to a value has been passed to React, that value is generally not safe to mutate further. This is not a strictly required property of React, but is a natural consequence of making components and hooks composable without leaking implementation details. Concretely, once a value has been passed as a JSX prop, passed as argument to a hook, or returned from a hook, it must be assumed that the other "side" — receiver of the prop/argument/return value — will use that value as an input to an effect or memoization unit. Mutating that value (instead of creating a new value) will fail to cause the consuming computation to update:
+
+```js
+// INVALID DO NOT DO THIS
+function Component(props) {
+    const array = useArray(props.value);
+    // OOPS! this value is memoized, the array won't get re-created
+    // when `props.value` changes, so we might just keep pushing new
+    // values to the same array on every render!
+    array.push(props.otherValue);
+}
+
+function useArray(a) {
+    return useMemo(() => [a], [a]);
+}
+```
+
+The **Freeze** effect accepts a variable reference and a reason that the value is being frozen. Note: _freeze only applies to the reference, not the underlying value_. Our inference is conservative, and assumes that there may still be other references to the same underlying value which are mutated later. For example:
+
+```js
+const x = {};
+const y = [];
+x.y = y;
+freeze(y); // y _reference_ is frozen
+x.y.push(props.value); // but y is still considered mutable bc of this
+```
+
+#### Mutate (and MutateConditionally)
+
+```js
+{
+    kind: 'Mutate';
+    value: Place;
+}
+```
+
+Mutate indicates that a value is mutated, without modifying any of the values that it may transitively have captured. Canonical examples include:
+
+- Pushing an item onto an array modifies the array, but does not modify any items stored _within_ the array (unless the array has a reference to itself!)
+- Assigning a value to an object property modifies the object, but not any values stored in the object's other properties.
+
+This helps explain the distinction between Assign/Alias and Capture: Mutate only affects assign/alias but not captures.
+
+`MutateConditionally` is an alternative in which the mutation _may_ happen depending on the type of the value. The conditional variant is not generally used and included for completeness.
+
+
+
+#### MutateTransitiveConditionally (and MutateTransitive)
+
+`MutateTransitiveConditionally` represents an operation that may mutate _any_ aspect of a value, including reaching arbitrarily deep into nested values to mutate them. This is the default semantic for unknown functions — we have no idea what they do, so we assume that they are idempotent but may mutate any aspect of the mutable values that are passed to them.
+
+There is also `MutateTransitive` for completeness, but this is not generally used.
+
+### Side Effects
+
+Finally, there are a few effects that describe error, or potential error, conditions:
+
+- `MutateFrozen` is always an error, because it indicates known mutation of a value that should not be mutated.
+- `MutateGlobal` indicates known mutation of a global value, which is not safe during render. This effect is an error if reachable during render, but allowed if only reachable via an event handler or useEffect.
+- `Impure` indicates calling some other logic that is impure/side-effecting. This is an error if reachable during render, but allowed if only reachable via an event handler or useEffect.
+  - TODO: we could probably merge this and MutateGlobal
+- `Render` indicates a value that is not mutated, but is known to be called during render. It's used for a few particular places like JSX tags and JSX children, which we assume are accessed during render (while other props may be event handlers etc). This helps to detect more MutateGlobal/Impure effects and reject more invalid programs.
+
+
+## Rules
+
+### Mutation of Alias Mutates the Source Value
+
+```
+Alias a <- b
+Mutate a
+=>
+Mutate b
+```
+
+Example:
+
+```js
+const a = maybeIdentity(b); // Alias a <- b
+a.property = value; // a could be b, so this mutates b
+```
+
+### Mutation of Assignment Mutates the Source Value
+
+```
+Assign a <- b
+Mutate a
+=>
+Mutate b
+```
+
+Example:
+
+```js
+const a = b;
+a.property = value // a _is_ b, this mutates b
+```
+
+### Mutation of CreateFrom Mutates the Source Value
+
+```
+CreateFrom a <- b
+Mutate a
+=>
+Mutate b
+```
+
+Example:
+
+```js
+const a = b[index];
+a.property = value // the contents of b are transitively mutated
+```
+
+
+### Mutation of Capture Does *Not* Mutate the Source Value
+
+```
+Capture a <- b
+Mutate a
+!=>
+~Mutate b~
+```
+
+Example:
+
+```js
+const a = {};
+a.b = b;
+a.property = value; // mutates a, not b
+```
+
+### Mutation of Source Affects Alias, Assignment, CreateFrom, and Capture
+
+```
+Alias a <- b OR Assign a <- b OR CreateFrom a <- b OR Capture a <- b
+Mutate b
+=>
+Mutate a
+```
+
+A derived value changes when it's source value is mutated.
+
+Example:
+
+```js
+const x = {};
+const y = [x];
+x.y = true; // this changes the value within `y` ie mutates y
+```
+
+
+### TransitiveMutation of Alias, Assignment, CreateFrom, or Capture Mutates the Source
+
+```
+Alias a <- b OR Assign a <- b OR CreateFrom a <- b OR Capture a <- b
+MutateTransitive a
+=>
+MutateTransitive b
+```
+
+Remember, the intuition for a transitive mutation is that it's something that could traverse arbitrarily deep into an object and mutate whatever it finds. Imagine something that recurses into every nested object/array and sets `.field = value`. Given a function `mutate()` that does this, then:
+
+```js
+const a = b; // assign
+mutate(a); // clearly can transitively mutate b
+
+const a = maybeIdentity(b); // alias
+mutate(a); // clearly can transitively mutate b
+
+const a = b[index]; // createfrom
+mutate(a); // clearly can transitively mutate b
+
+const a = {};
+a.b = b; // capture
+mutate(a); // can transitively mutate b
+```
+
+### MaybeAlias makes mutation conditional
+
+Because we don't know for certain that the aliasing occurs, we consider the mutation conditional against the source.
+
+```
+MaybeAlias a <- b
+Mutate a
+=>
+MutateConditional b
+```
+
+### Freeze Does Not Freeze the Value
+
+Freeze does not freeze the value itself:
+
+```
+Create x
+Assign y <- x OR Alias y <- x OR CreateFrom y <- x OR Capture y <- x
+Freeze y
+!=>
+~Freeze x~
+```
+
+This means that subsequent mutations of the original value are valid:
+
+```
+Create x
+Assign y <- x OR Alias y <- x OR CreateFrom y <- x OR Capture y <- x
+Freeze y
+Mutate x
+=>
+Mutate x (mutation is ok)
+```
+
+As well as mutations through other assignments/aliases/captures/createfroms of the original value:
+
+```
+Create x
+Assign y <- x OR Alias y <- x OR CreateFrom y <- x OR Capture y <- x
+Freeze y
+Alias z <- x OR Capture z <- x OR CreateFrom z <- x OR Assign z <- x
+Mutate z
+=>
+Mutate x (mutation is ok)
+```
+
+### Freeze Freezes The Reference 
+
+Although freeze doesn't freeze the value, it does affect the reference. The reference cannot be used to mutate.
+
+Conditional mutations of the reference are no-ops:
+
+```
+Create x
+Assign y <- x OR Alias y <- x OR CreateFrom y <- x OR Capture y <- x
+Freeze y
+MutateConditional y
+=>
+(no mutation)
+```
+
+And known mutations of the reference are errors:
+
+```
+Create x
+Assign y <- x OR Alias y <- x OR CreateFrom y <- x OR Capture y <- x
+Freeze y
+MutateConditional y
+=>
+MutateFrozen y error=...
+```
+
+### Corollary: Transitivity of Assign/Alias/CreateFrom/Capture
+
+A key part of the inference model is inferring a signature for function expressions. The signature is a minimal set of effects that describes the publicly observable behavior of the function. This can include "global" effects like side effects (MutateGlobal/Impure) as well as mutations/aliasing of parameters and free variables.
+
+In order to determine the aliasing of params and free variables into each other and/or the return value, we may encounter chains of assign, alias, createfrom, and capture effects. For example:
+
+```js
+const f = (x) => {
+    const y = [x];  // capture y <- x
+    const z = y[0]; // createfrom z <- y
+    return z;     // assign return <- z
+}
+// <Effect> return <- x
+```
+
+In this example we can see that there should be some effect on `f` that tracks the flow of data from `x` into the return value. The key constraint is preserving the semantics around how local/transitive mutations of the destination would affect the source.
+
+#### Each of the effects is transitive with itself
+
+```
+Assign b <- a
+Assign c <- b
+=>
+Assign c <- a
+```
+
+```
+Alias b <- a
+Alias c <- b
+=>
+Alias c <- a
+```
+
+```
+CreateFrom b <- a
+CreateFrom c <- b
+=>
+CreateFrom c <- a
+```
+
+```
+Capture b <- a
+Capture c <- b
+=>
+Capture c <- a
+```
+
+#### Alias > Assign
+
+```
+Assign b <- a
+Alias c <- b
+=>
+Alias c <- a
+```
+
+```
+Alias b <- a
+Assign c <- b
+=>
+Alias c <- a
+```
+
+### CreateFrom > Assign/Alias
+
+Intuition: 
+
+```
+CreateFrom b <- a
+Alias c <- b OR Assign c <- b
+=>
+CreateFrom c <- a
+```
+
+```
+Alias b <- a OR Assign b <- a
+CreateFrom c <- b
+=>
+CreateFrom c <- a
+```
+
+### Capture > Assign/Alias
+
+Intuition: capturing means that a local mutation of the destination will not affect the source, so we preserve the capture.
+
+```
+Capture b <- a
+Alias c <- b OR Assign c <- b
+=>
+Capture c <- a
+```
+
+```
+Alias b <- a OR Assign b <- a
+Capture c <- b
+=>
+Capture c <- a
+```
+
+### Capture And CreateFrom
+
+Intuition: these effects are inverses of each other (capturing into an object, extracting from an object). The result is based on the order of operations:
+
+Capture then CreatFrom is equivalent to Alias: we have to assume that the result _is_ the original value and that a local mutation of the result could mutate the original.
+
+```js
+const b = [a]; // capture
+const c = b[0]; // createfrom
+mutate(c); // this clearly can mutate a, so the result must be one of Assign/Alias/CreateFrom 
+```
+
+We use Alias as the return type because the mutability kind of the result is not derived from the source value (there's a fresh object in between due to the capture), so the full set of effects in practice would be a Create+Alias.
+
+```
+Capture b <- a
+CreateFrom c <- b
+=>
+Alias c <- a
+```
+
+Meanwhile the opposite direction preserves the capture, because the result is not the same as the source:
+
+```js
+const b = a[0]; // createfrom
+const c = [b]; // capture
+mutate(c); // does not mutate a, so the result must be Capture
+```
+
+```
+CreateFrom b <- a
+Capture c <- b
+=>
+Capture c <- a
+```
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/index.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/index.ts
new file mode 100644
index 00000000000..eb645cc218d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as analyseFunctions} from './AnalyseFunctions';
+export {dropManualMemoization} from './DropManualMemoization';
+export {inferReactivePlaces} from './InferReactivePlaces';
+export {inlineImmediatelyInvokedFunctionExpressions} from './InlineImmediatelyInvokedFunctionExpressions';
+export {inferEffectDependencies} from './InferEffectDependencies';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts
new file mode 100644
index 00000000000..52a5a8b8c76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts
@@ -0,0 +1,626 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {isValidIdentifier} from '@babel/types';
+import {CompilerError} from '../CompilerError';
+import {
+  GeneratedSource,
+  GotoVariant,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  InstructionValue,
+  LoadGlobal,
+  Phi,
+  Place,
+  Primitive,
+  assertConsistentIdentifiers,
+  assertTerminalSuccessorsExist,
+  makePropertyLiteral,
+  markInstructionIds,
+  markPredecessors,
+  mergeConsecutiveBlocks,
+  reversePostorderBlocks,
+} from '../HIR';
+import {
+  removeDeadDoWhileStatements,
+  removeUnnecessaryTryCatch,
+  removeUnreachableForUpdates,
+} from '../HIR/HIRBuilder';
+import {eliminateRedundantPhi} from '../SSA';
+
+/*
+ * Applies constant propagation/folding to the given function. The approach is
+ * [Sparse Conditional Constant Propagation](https://en.wikipedia.org/wiki/Sparse_conditional_constant_propagation):
+ * we use abstract interpretation to record known constant values for identifiers,
+ * with lack of a value indicating that the identifier does not have a
+ * known constant value.
+ *
+ * Instructions which can be compile-time evaluated *and* whose operands are known constants
+ * are replaced with the resulting constant value. For example a BinaryExpression
+ * where the left value is known to be `1` and the right value is known to be `2`
+ * can be replaced with a `Constant 3` instruction.
+ *
+ * This pass also exploits the use of SSA form, tracking the constant values of
+ * local variables. For example, in `let x = 4; let y = x + 1` we know that
+ * `x = 4` in the binary expression and can replace the binary expression with
+ * `Constant 5`.
+ *
+ * This pass also visits conditionals (currently only IfTerminal) and can prune
+ * unreachable branches when the condition is a known truthy/falsey constant. The
+ * pass uses fixpoint iteration, looping until no additional updates can be
+ * performed. This allows the compiler to find cases where once one conditional is pruned,
+ * other values become constant, allowing subsequent conditionals to be pruned and so on.
+ */
+export function constantPropagation(fn: HIRFunction): void {
+  const constants: Constants = new Map();
+  constantPropagationImpl(fn, constants);
+}
+
+function constantPropagationImpl(fn: HIRFunction, constants: Constants): void {
+  while (true) {
+    const haveTerminalsChanged = applyConstantPropagation(fn, constants);
+    if (!haveTerminalsChanged) {
+      break;
+    }
+    /*
+     * If terminals have changed then blocks may have become newly unreachable.
+     * Re-run minification of the graph (incl reordering instruction ids)
+     */
+    reversePostorderBlocks(fn.body);
+    removeUnreachableForUpdates(fn.body);
+    removeDeadDoWhileStatements(fn.body);
+    removeUnnecessaryTryCatch(fn.body);
+    markInstructionIds(fn.body);
+    markPredecessors(fn.body);
+
+    // Now that predecessors are updated, prune phi operands that can never be reached
+    for (const [, block] of fn.body.blocks) {
+      for (const phi of block.phis) {
+        for (const [predecessor] of phi.operands) {
+          if (!block.preds.has(predecessor)) {
+            phi.operands.delete(predecessor);
+          }
+        }
+      }
+    }
+    /*
+     * By removing some phi operands, there may be phis that were not previously
+     * redundant but now are
+     */
+    eliminateRedundantPhi(fn);
+    /*
+     * Finally, merge together any blocks that are now guaranteed to execute
+     * consecutively
+     */
+    mergeConsecutiveBlocks(fn);
+
+    assertConsistentIdentifiers(fn);
+    assertTerminalSuccessorsExist(fn);
+  }
+}
+
+function applyConstantPropagation(
+  fn: HIRFunction,
+  constants: Constants,
+): boolean {
+  let hasChanges = false;
+  for (const [, block] of fn.body.blocks) {
+    /*
+     * Initialize phi values if all operands have the same known constant value.
+     * Note that this analysis uses a single-pass only, so it will never fill in
+     * phi values for blocks that have a back-edge.
+     */
+    for (const phi of block.phis) {
+      let value = evaluatePhi(phi, constants);
+      if (value !== null) {
+        constants.set(phi.place.identifier.id, value);
+      }
+    }
+
+    for (let i = 0; i < block.instructions.length; i++) {
+      if (block.kind === 'sequence' && i === block.instructions.length - 1) {
+        /*
+         * evaluating the last value of a value block can break order of evaluation,
+         * skip these instructions
+         */
+        continue;
+      }
+      const instr = block.instructions[i]!;
+      const value = evaluateInstruction(constants, instr);
+      if (value !== null) {
+        constants.set(instr.lvalue.identifier.id, value);
+      }
+    }
+
+    const terminal = block.terminal;
+    switch (terminal.kind) {
+      case 'if': {
+        const testValue = read(constants, terminal.test);
+        if (testValue !== null && testValue.kind === 'Primitive') {
+          hasChanges = true;
+          const targetBlockId = testValue.value
+            ? terminal.consequent
+            : terminal.alternate;
+          block.terminal = {
+            kind: 'goto',
+            variant: GotoVariant.Break,
+            block: targetBlockId,
+            id: terminal.id,
+            loc: terminal.loc,
+          };
+        }
+        break;
+      }
+      default: {
+        // no-op
+      }
+    }
+  }
+
+  return hasChanges;
+}
+
+function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
+  let value: Constant | null = null;
+  for (const [, operand] of phi.operands) {
+    const operandValue = constants.get(operand.identifier.id) ?? null;
+    // did not find a constant, can't constant propogate
+    if (operandValue === null) {
+      return null;
+    }
+
+    /*
+     * first iteration of the loop, let's store the operand and continue
+     * looping.
+     */
+    if (value === null) {
+      value = operandValue;
+      continue;
+    }
+
+    // found different kinds of constants, can't constant propogate
+    if (operandValue.kind !== value.kind) {
+      return null;
+    }
+
+    switch (operandValue.kind) {
+      case 'Primitive': {
+        CompilerError.invariant(value.kind === 'Primitive', {
+          reason: 'value kind expected to be Primitive',
+          loc: GeneratedSource,
+        });
+
+        // different constant values, can't constant propogate
+        if (operandValue.value !== value.value) {
+          return null;
+        }
+        break;
+      }
+      case 'LoadGlobal': {
+        CompilerError.invariant(value.kind === 'LoadGlobal', {
+          reason: 'value kind expected to be LoadGlobal',
+          loc: GeneratedSource,
+        });
+
+        // different global values, can't constant propogate
+        if (operandValue.binding.name !== value.binding.name) {
+          return null;
+        }
+        break;
+      }
+      default:
+        return null;
+    }
+  }
+
+  return value;
+}
+
+function evaluateInstruction(
+  constants: Constants,
+  instr: Instruction,
+): Constant | null {
+  const value = instr.value;
+  switch (value.kind) {
+    case 'Primitive': {
+      return value;
+    }
+    case 'LoadGlobal': {
+      return value;
+    }
+    case 'ComputedLoad': {
+      const property = read(constants, value.property);
+      if (
+        property !== null &&
+        property.kind === 'Primitive' &&
+        ((typeof property.value === 'string' &&
+          isValidIdentifier(property.value)) ||
+          typeof property.value === 'number')
+      ) {
+        const nextValue: InstructionValue = {
+          kind: 'PropertyLoad',
+          loc: value.loc,
+          property: makePropertyLiteral(property.value),
+          object: value.object,
+        };
+        instr.value = nextValue;
+      }
+      return null;
+    }
+    case 'ComputedStore': {
+      const property = read(constants, value.property);
+      if (
+        property !== null &&
+        property.kind === 'Primitive' &&
+        ((typeof property.value === 'string' &&
+          isValidIdentifier(property.value)) ||
+          typeof property.value === 'number')
+      ) {
+        const nextValue: InstructionValue = {
+          kind: 'PropertyStore',
+          loc: value.loc,
+          property: makePropertyLiteral(property.value),
+          object: value.object,
+          value: value.value,
+        };
+        instr.value = nextValue;
+      }
+      return null;
+    }
+    case 'PostfixUpdate': {
+      const previous = read(constants, value.value);
+      if (
+        previous !== null &&
+        previous.kind === 'Primitive' &&
+        typeof previous.value === 'number'
+      ) {
+        const next =
+          value.operation === '++' ? previous.value + 1 : previous.value - 1;
+        // Store the updated value
+        constants.set(value.lvalue.identifier.id, {
+          kind: 'Primitive',
+          value: next,
+          loc: value.loc,
+        });
+        // But return the value prior to the update
+        return previous;
+      }
+      return null;
+    }
+    case 'PrefixUpdate': {
+      const previous = read(constants, value.value);
+      if (
+        previous !== null &&
+        previous.kind === 'Primitive' &&
+        typeof previous.value === 'number'
+      ) {
+        const next: Primitive = {
+          kind: 'Primitive',
+          value:
+            value.operation === '++' ? previous.value + 1 : previous.value - 1,
+          loc: value.loc,
+        };
+        // Store and return the updated value
+        constants.set(value.lvalue.identifier.id, next);
+        return next;
+      }
+      return null;
+    }
+    case 'UnaryExpression': {
+      switch (value.operator) {
+        case '!': {
+          const operand = read(constants, value.value);
+          if (operand !== null && operand.kind === 'Primitive') {
+            const result: Primitive = {
+              kind: 'Primitive',
+              value: !operand.value,
+              loc: value.loc,
+            };
+            instr.value = result;
+            return result;
+          }
+          return null;
+        }
+        case '-': {
+          const operand = read(constants, value.value);
+          if (
+            operand !== null &&
+            operand.kind === 'Primitive' &&
+            typeof operand.value === 'number'
+          ) {
+            const result: Primitive = {
+              kind: 'Primitive',
+              value: operand.value * -1,
+              loc: value.loc,
+            };
+            instr.value = result;
+            return result;
+          }
+          return null;
+        }
+        default:
+          return null;
+      }
+    }
+    case 'BinaryExpression': {
+      const lhsValue = read(constants, value.left);
+      const rhsValue = read(constants, value.right);
+      if (
+        lhsValue !== null &&
+        rhsValue !== null &&
+        lhsValue.kind === 'Primitive' &&
+        rhsValue.kind === 'Primitive'
+      ) {
+        const lhs = lhsValue.value;
+        const rhs = rhsValue.value;
+        let result: Primitive | null = null;
+        switch (value.operator) {
+          case '+': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs + rhs, loc: value.loc};
+            } else if (typeof lhs === 'string' && typeof rhs === 'string') {
+              result = {kind: 'Primitive', value: lhs + rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '-': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs - rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '*': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs * rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '/': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs / rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '|': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs | rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '&': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs & rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '^': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs ^ rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '<<': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs << rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '>>': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs >> rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '>>>': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {
+                kind: 'Primitive',
+                value: lhs >>> rhs,
+                loc: value.loc,
+              };
+            }
+            break;
+          }
+          case '%': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs % rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '**': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs ** rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '<': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs < rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '<=': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs <= rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '>': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs > rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '>=': {
+            if (typeof lhs === 'number' && typeof rhs === 'number') {
+              result = {kind: 'Primitive', value: lhs >= rhs, loc: value.loc};
+            }
+            break;
+          }
+          case '==': {
+            result = {kind: 'Primitive', value: lhs == rhs, loc: value.loc};
+            break;
+          }
+          case '===': {
+            result = {kind: 'Primitive', value: lhs === rhs, loc: value.loc};
+            break;
+          }
+          case '!=': {
+            result = {kind: 'Primitive', value: lhs != rhs, loc: value.loc};
+            break;
+          }
+          case '!==': {
+            result = {kind: 'Primitive', value: lhs !== rhs, loc: value.loc};
+            break;
+          }
+          default: {
+            break;
+          }
+        }
+        if (result !== null) {
+          instr.value = result;
+          return result;
+        }
+      }
+      return null;
+    }
+    case 'PropertyLoad': {
+      const objectValue = read(constants, value.object);
+      if (objectValue !== null) {
+        if (
+          objectValue.kind === 'Primitive' &&
+          typeof objectValue.value === 'string' &&
+          value.property === 'length'
+        ) {
+          const result: InstructionValue = {
+            kind: 'Primitive',
+            value: objectValue.value.length,
+            loc: value.loc,
+          };
+          instr.value = result;
+          return result;
+        }
+      }
+      return null;
+    }
+    case 'TemplateLiteral': {
+      if (value.subexprs.length === 0) {
+        const result: InstructionValue = {
+          kind: 'Primitive',
+          value: value.quasis.map(q => q.cooked).join(''),
+          loc: value.loc,
+        };
+        instr.value = result;
+        return result;
+      }
+
+      if (value.subexprs.length !== value.quasis.length - 1) {
+        return null;
+      }
+
+      if (value.quasis.some(q => q.cooked === undefined)) {
+        return null;
+      }
+
+      let quasiIndex = 0;
+      let resultString = value.quasis[quasiIndex].cooked as string;
+      ++quasiIndex;
+
+      for (const subExpr of value.subexprs) {
+        const subExprValue = read(constants, subExpr);
+        if (!subExprValue || subExprValue.kind !== 'Primitive') {
+          return null;
+        }
+
+        const expressionValue = subExprValue.value;
+        if (
+          typeof expressionValue !== 'number' &&
+          typeof expressionValue !== 'string' &&
+          typeof expressionValue !== 'boolean' &&
+          !(typeof expressionValue === 'object' && expressionValue === null)
+        ) {
+          // value is not supported (function, object) or invalid (symbol), or something else
+          return null;
+        }
+
+        const suffix = value.quasis[quasiIndex].cooked;
+        ++quasiIndex;
+
+        if (suffix === undefined) {
+          return null;
+        }
+
+        /*
+         * Spec states that concat calls ToString(argument) internally on its parameters
+         * -> we don't have to implement ToString(argument) ourselves and just use the engine implementation
+         * Refs:
+         *  - https://tc39.es/ecma262/2024/#sec-tostring
+         *  - https://tc39.es/ecma262/2024/#sec-string.prototype.concat
+         *  - https://tc39.es/ecma262/2024/#sec-template-literals-runtime-semantics-evaluation
+         */
+        resultString = resultString.concat(expressionValue as string, suffix);
+      }
+
+      const result: InstructionValue = {
+        kind: 'Primitive',
+        value: resultString,
+        loc: value.loc,
+      };
+
+      instr.value = result;
+      return result;
+    }
+    case 'LoadLocal': {
+      const placeValue = read(constants, value.place);
+      if (placeValue !== null) {
+        instr.value = placeValue;
+      }
+      return placeValue;
+    }
+    case 'StoreLocal': {
+      const placeValue = read(constants, value.value);
+      if (placeValue !== null) {
+        constants.set(value.lvalue.place.identifier.id, placeValue);
+      }
+      return placeValue;
+    }
+    case 'ObjectMethod':
+    case 'FunctionExpression': {
+      constantPropagationImpl(value.loweredFunc.func, constants);
+      return null;
+    }
+    case 'StartMemoize': {
+      if (value.deps != null) {
+        for (const dep of value.deps) {
+          if (dep.root.kind === 'NamedLocal') {
+            const placeValue = read(constants, dep.root.value);
+            if (placeValue != null && placeValue.kind === 'Primitive') {
+              dep.root.constant = true;
+            }
+          }
+        }
+      }
+      return null;
+    }
+    default: {
+      // TODO: handle more cases
+      return null;
+    }
+  }
+}
+
+/*
+ * Recursively read the value of a place: if it is a constant place, attempt to read
+ * from that place until reaching a primitive or finding a value that is unset.
+ */
+function read(constants: Constants, place: Place): Constant | null {
+  return constants.get(place.identifier.id) ?? null;
+}
+
+type Constant = Primitive | LoadGlobal;
+type Constants = Map<IdentifierId, Constant>;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts
new file mode 100644
index 00000000000..8b251e9966c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts
@@ -0,0 +1,426 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BlockId,
+  Environment,
+  getHookKind,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  Instruction,
+  InstructionKind,
+  InstructionValue,
+  ObjectPattern,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachPatternOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {assertExhaustive, retainWhere} from '../Utils/utils';
+
+/*
+ * Implements dead-code elimination, eliminating instructions whose values are unused.
+ *
+ * Note that unreachable blocks are already pruned during HIR construction.
+ */
+export function deadCodeElimination(fn: HIRFunction): void {
+  /**
+   * Phase 1: Find/mark all referenced identifiers
+   * Usages may be visited AFTER declarations if there are circular phi / data dependencies
+   * between blocks, so we wait to sweep until after fixed point iteration is complete
+   */
+  const state = findReferencedIdentifiers(fn);
+
+  /**
+   * Phase 2: Prune / sweep unreferenced identifiers and instructions
+   * as possible (subject to HIR structural constraints)
+   */
+  for (const [, block] of fn.body.blocks) {
+    for (const phi of block.phis) {
+      if (!state.isIdOrNameUsed(phi.place.identifier)) {
+        block.phis.delete(phi);
+      }
+    }
+    retainWhere(block.instructions, instr =>
+      state.isIdOrNameUsed(instr.lvalue.identifier),
+    );
+    // Rewrite retained instructions
+    for (let i = 0; i < block.instructions.length; i++) {
+      const isBlockValue =
+        block.kind !== 'block' && i === block.instructions.length - 1;
+      if (!isBlockValue) {
+        rewriteInstruction(block.instructions[i], state);
+      }
+    }
+  }
+
+  /**
+   * Constant propagation and DCE may have deleted or rewritten instructions
+   * that reference context variables.
+   */
+  retainWhere(fn.context, contextVar =>
+    state.isIdOrNameUsed(contextVar.identifier),
+  );
+}
+
+class State {
+  env: Environment;
+  named: Set<string> = new Set();
+  identifiers: Set<IdentifierId> = new Set();
+
+  constructor(env: Environment) {
+    this.env = env;
+  }
+
+  // Mark the identifier as being referenced (not dead code)
+  reference(identifier: Identifier): void {
+    this.identifiers.add(identifier.id);
+    if (identifier.name !== null) {
+      this.named.add(identifier.name.value);
+    }
+  }
+
+  /*
+   * Check if any version of the given identifier is used somewhere.
+   * This checks both for usage of this specific identifer id (ssa id)
+   * and (for named identifiers) for any usages of that identifier name.
+   */
+  isIdOrNameUsed(identifier: Identifier): boolean {
+    return (
+      this.identifiers.has(identifier.id) ||
+      (identifier.name !== null && this.named.has(identifier.name.value))
+    );
+  }
+
+  /*
+   * Like `used()`, but only checks for usages of this specific identifier id
+   * (ssa id).
+   */
+  isIdUsed(identifier: Identifier): boolean {
+    return this.identifiers.has(identifier.id);
+  }
+
+  get count(): number {
+    return this.identifiers.size;
+  }
+}
+
+function findReferencedIdentifiers(fn: HIRFunction): State {
+  /*
+   * If there are no back-edges the algorithm can terminate after a single iteration
+   * of the blocks
+   */
+  const hasLoop = hasBackEdge(fn);
+  const reversedBlocks = [...fn.body.blocks.values()].reverse();
+
+  const state = new State(fn.env);
+  let size = state.count;
+  do {
+    size = state.count;
+
+    /*
+     * Iterate blocks in postorder (successors before predecessors, excepting loops)
+     * to visit usages before declarations
+     */
+    for (const block of reversedBlocks) {
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        state.reference(operand.identifier);
+      }
+
+      for (let i = block.instructions.length - 1; i >= 0; i--) {
+        const instr = block.instructions[i]!;
+        const isBlockValue =
+          block.kind !== 'block' && i === block.instructions.length - 1;
+
+        if (isBlockValue) {
+          /**
+           * The last instr of a value block is never eligible for pruning,
+           * as that's the block's value. Pessimistically consider all operands
+           * as used to avoid rewriting the last instruction
+           */
+          state.reference(instr.lvalue.identifier);
+          for (const place of eachInstructionValueOperand(instr.value)) {
+            state.reference(place.identifier);
+          }
+        } else if (
+          state.isIdOrNameUsed(instr.lvalue.identifier) ||
+          !pruneableValue(instr.value, state)
+        ) {
+          state.reference(instr.lvalue.identifier);
+
+          if (instr.value.kind === 'StoreLocal') {
+            /*
+             * If this is a Let/Const declaration, mark the initializer as referenced
+             * only if the ssa'ed lval is also referenced
+             */
+            if (
+              instr.value.lvalue.kind === InstructionKind.Reassign ||
+              state.isIdUsed(instr.value.lvalue.place.identifier)
+            ) {
+              state.reference(instr.value.value.identifier);
+            }
+          } else {
+            for (const operand of eachInstructionValueOperand(instr.value)) {
+              state.reference(operand.identifier);
+            }
+          }
+        }
+      }
+      for (const phi of block.phis) {
+        if (state.isIdOrNameUsed(phi.place.identifier)) {
+          for (const [_pred, operand] of phi.operands) {
+            state.reference(operand.identifier);
+          }
+        }
+      }
+    }
+  } while (state.count > size && hasLoop);
+  return state;
+}
+
+function rewriteInstruction(instr: Instruction, state: State): void {
+  if (instr.value.kind === 'Destructure') {
+    // Remove unused lvalues
+    switch (instr.value.lvalue.pattern.kind) {
+      case 'ArrayPattern': {
+        /*
+         * For arrays, we can prune items prior to the end by replacing
+         * them with a hole. Items at the end can simply be dropped.
+         */
+        let lastEntryIndex = 0;
+        const items = instr.value.lvalue.pattern.items;
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.kind === 'Identifier') {
+            if (!state.isIdOrNameUsed(item.identifier)) {
+              items[i] = {kind: 'Hole'};
+            } else {
+              lastEntryIndex = i;
+            }
+          } else if (item.kind === 'Spread') {
+            if (!state.isIdOrNameUsed(item.place.identifier)) {
+              items[i] = {kind: 'Hole'};
+            } else {
+              lastEntryIndex = i;
+            }
+          }
+        }
+        items.length = lastEntryIndex + 1;
+        break;
+      }
+      case 'ObjectPattern': {
+        /*
+         * For objects we can prune any unused properties so long as there is no used rest element
+         * (`const {x, ...y} = z`). If a rest element exists and is used, then nothing can be pruned
+         * because it would change the set of properties which are copied into the rest value.
+         * In the `const {x, ...y} = z` example, removing the `x` property would mean that `y` now
+         * has an `x` property, changing the semantics.
+         */
+        let nextProperties: ObjectPattern['properties'] | null = null;
+        for (const property of instr.value.lvalue.pattern.properties) {
+          if (property.kind === 'ObjectProperty') {
+            if (state.isIdOrNameUsed(property.place.identifier)) {
+              nextProperties ??= [];
+              nextProperties.push(property);
+            }
+          } else {
+            if (state.isIdOrNameUsed(property.place.identifier)) {
+              nextProperties = null;
+              break;
+            }
+          }
+        }
+        if (nextProperties !== null) {
+          instr.value.lvalue.pattern.properties = nextProperties;
+        }
+        break;
+      }
+      default: {
+        assertExhaustive(
+          instr.value.lvalue.pattern,
+          `Unexpected pattern kind '${
+            (instr.value.lvalue.pattern as any).kind
+          }'`,
+        );
+      }
+    }
+  } else if (instr.value.kind === 'StoreLocal') {
+    if (
+      instr.value.lvalue.kind !== InstructionKind.Reassign &&
+      !state.isIdUsed(instr.value.lvalue.place.identifier)
+    ) {
+      /*
+       * This is a const/let declaration where the variable is accessed later,
+       * but where the value is always overwritten before being read. Ie the
+       * initializer value is never read. We rewrite to a DeclareLocal so
+       * that the initializer value can be DCE'd
+       */
+      instr.value = {
+        kind: 'DeclareLocal',
+        lvalue: instr.value.lvalue,
+        type: instr.value.type,
+        loc: instr.value.loc,
+      };
+    }
+  }
+}
+
+/*
+ * Returns true if it is safe to prune an instruction with the given value.
+ * Functions which may have side-
+ */
+function pruneableValue(value: InstructionValue, state: State): boolean {
+  switch (value.kind) {
+    case 'DeclareLocal': {
+      // Declarations are pruneable only if the named variable is never read later
+      return !state.isIdOrNameUsed(value.lvalue.place.identifier);
+    }
+    case 'StoreLocal': {
+      if (value.lvalue.kind === InstructionKind.Reassign) {
+        // Reassignments can be pruned if the specific instance being assigned is never read
+        return !state.isIdUsed(value.lvalue.place.identifier);
+      }
+      // Declarations are pruneable only if the named variable is never read later
+      return !state.isIdOrNameUsed(value.lvalue.place.identifier);
+    }
+    case 'Destructure': {
+      let isIdOrNameUsed = false;
+      let isIdUsed = false;
+      for (const place of eachPatternOperand(value.lvalue.pattern)) {
+        if (state.isIdUsed(place.identifier)) {
+          isIdOrNameUsed = true;
+          isIdUsed = true;
+        } else if (state.isIdOrNameUsed(place.identifier)) {
+          isIdOrNameUsed = true;
+        }
+      }
+      if (value.lvalue.kind === InstructionKind.Reassign) {
+        // Reassignments can be pruned if the specific instance being assigned is never read
+        return !isIdUsed;
+      } else {
+        // Otherwise pruneable only if none of the identifiers are read from later
+        return !isIdOrNameUsed;
+      }
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      // Updates are pruneable if the specific instance instance being assigned is never read
+      return !state.isIdUsed(value.lvalue.identifier);
+    }
+    case 'Debugger': {
+      // explicitly retain debugger statements to not break debugging workflows
+      return false;
+    }
+    case 'CallExpression':
+    case 'MethodCall': {
+      if (state.env.outputMode === 'ssr') {
+        const calleee =
+          value.kind === 'CallExpression' ? value.callee : value.property;
+        const hookKind = getHookKind(state.env, calleee.identifier);
+        switch (hookKind) {
+          case 'useState':
+          case 'useReducer':
+          case 'useRef': {
+            // unused refs can be removed
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+    case 'Await':
+    case 'ComputedDelete':
+    case 'ComputedStore':
+    case 'PropertyDelete':
+    case 'PropertyStore':
+    case 'StoreGlobal': {
+      /*
+       * Mutating instructions are not safe to prune.
+       * TODO: we could be more precise and make this conditional on whether
+       * any arguments are actually modified
+       */
+      return false;
+    }
+    case 'NewExpression':
+    case 'UnsupportedNode':
+    case 'TaggedTemplateExpression': {
+      // Potentially safe to prune, since they should just be creating new values
+      return false;
+    }
+    case 'GetIterator':
+    case 'NextPropertyOf':
+    case 'IteratorNext': {
+      /*
+       * Technically a IteratorNext/NextPropertyOf will never be unused because it's
+       * always used later by another StoreLocal or Destructure instruction, but conceptually
+       * we can't prune
+       */
+      return false;
+    }
+    case 'LoadContext':
+    case 'DeclareContext':
+    case 'StoreContext': {
+      return false;
+    }
+    case 'StartMemoize':
+    case 'FinishMemoize': {
+      /**
+       * This instruction is used by the @enablePreserveExistingMemoizationGuarantees feature
+       * to preserve information about memoization semantics in the original code. We can't
+       * DCE without losing the memoization guarantees.
+       */
+      return false;
+    }
+    case 'RegExpLiteral':
+    case 'MetaProperty':
+    case 'LoadGlobal':
+    case 'ArrayExpression':
+    case 'BinaryExpression':
+    case 'ComputedLoad':
+    case 'ObjectMethod':
+    case 'FunctionExpression':
+    case 'LoadLocal':
+    case 'JsxExpression':
+    case 'JsxFragment':
+    case 'JSXText':
+    case 'ObjectExpression':
+    case 'Primitive':
+    case 'PropertyLoad':
+    case 'TemplateLiteral':
+    case 'TypeCastExpression':
+    case 'UnaryExpression': {
+      // Definitely safe to prune since they are read-only
+      return true;
+    }
+    default: {
+      assertExhaustive(
+        value,
+        `Unexepcted value kind \`${(value as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function hasBackEdge(fn: HIRFunction): boolean {
+  return findBlocksWithBackEdges(fn).size > 0;
+}
+
+export function findBlocksWithBackEdges(fn: HIRFunction): Set<BlockId> {
+  const visited = new Set<BlockId>();
+  const blocks = new Set<BlockId>();
+  for (const [blockId, block] of fn.body.blocks) {
+    for (const predId of block.preds) {
+      if (!visited.has(predId)) {
+        blocks.add(blockId);
+      }
+    }
+    visited.add(blockId);
+  }
+  return blocks;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
new file mode 100644
index 00000000000..3588cf32f9f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
@@ -0,0 +1,790 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BasicBlock,
+  BlockId,
+  BuiltinTag,
+  DeclarationId,
+  Effect,
+  forkTemporaryIdentifier,
+  GotoTerminal,
+  GotoVariant,
+  HIRFunction,
+  Identifier,
+  IfTerminal,
+  Instruction,
+  InstructionKind,
+  JsxAttribute,
+  makeInstructionId,
+  makePropertyLiteral,
+  ObjectProperty,
+  Phi,
+  Place,
+  promoteTemporary,
+  SpreadPattern,
+} from '../HIR';
+import {
+  createTemporaryPlace,
+  fixScopeAndIdentifierRanges,
+  markInstructionIds,
+  markPredecessors,
+  reversePostorderBlocks,
+} from '../HIR/HIRBuilder';
+import {CompilerError, EnvironmentConfig} from '..';
+import {
+  mapInstructionLValues,
+  mapInstructionOperands,
+  mapInstructionValueOperands,
+  mapTerminalOperands,
+} from '../HIR/visitors';
+import {ErrorCategory} from '../CompilerError';
+
+type InlinedJsxDeclarationMap = Map<
+  DeclarationId,
+  {identifier: Identifier; blockIdsToIgnore: Set<BlockId>}
+>;
+
+/**
+ * A prod-only, RN optimization to replace JSX with inlined ReactElement object literals
+ *
+ * Example:
+ * <>foo</>
+ * _______________
+ * let t1;
+ * if (__DEV__) {
+ *   t1 = <>foo</>
+ * } else {
+ *   t1 = {...}
+ * }
+ *
+ */
+export function inlineJsxTransform(
+  fn: HIRFunction,
+  inlineJsxTransformConfig: NonNullable<
+    EnvironmentConfig['inlineJsxTransform']
+  >,
+): void {
+  const inlinedJsxDeclarations: InlinedJsxDeclarationMap = new Map();
+  /**
+   * Step 1: Codegen the conditional and ReactElement object literal
+   */
+  for (const [_, currentBlock] of [...fn.body.blocks]) {
+    let fallthroughBlockInstructions: Array<Instruction> | null = null;
+    const instructionCount = currentBlock.instructions.length;
+    for (let i = 0; i < instructionCount; i++) {
+      const instr = currentBlock.instructions[i]!;
+      // TODO: Support value blocks
+      if (currentBlock.kind === 'value') {
+        fn.env.logger?.logEvent(fn.env.filename, {
+          kind: 'CompileDiagnostic',
+          fnLoc: null,
+          detail: {
+            category: ErrorCategory.Todo,
+            reason: 'JSX Inlining is not supported on value blocks',
+            loc: instr.loc,
+          },
+        });
+        continue;
+      }
+      switch (instr.value.kind) {
+        case 'JsxExpression':
+        case 'JsxFragment': {
+          /**
+           * Split into blocks for new IfTerminal:
+           *   current, then, else, fallthrough
+           */
+          const currentBlockInstructions = currentBlock.instructions.slice(
+            0,
+            i,
+          );
+          const thenBlockInstructions = currentBlock.instructions.slice(
+            i,
+            i + 1,
+          );
+          const elseBlockInstructions: Array<Instruction> = [];
+          fallthroughBlockInstructions ??= currentBlock.instructions.slice(
+            i + 1,
+          );
+
+          const fallthroughBlockId = fn.env.nextBlockId;
+          const fallthroughBlock: BasicBlock = {
+            kind: currentBlock.kind,
+            id: fallthroughBlockId,
+            instructions: fallthroughBlockInstructions,
+            terminal: currentBlock.terminal,
+            preds: new Set(),
+            phis: new Set(),
+          };
+
+          /**
+           * Complete current block
+           * - Add instruction for variable declaration
+           * - Add instruction for LoadGlobal used by conditional
+           * - End block with a new IfTerminal
+           */
+          const varPlace = createTemporaryPlace(fn.env, instr.value.loc);
+          promoteTemporary(varPlace.identifier);
+          const varLValuePlace = createTemporaryPlace(fn.env, instr.value.loc);
+          const thenVarPlace = {
+            ...varPlace,
+            identifier: forkTemporaryIdentifier(
+              fn.env.nextIdentifierId,
+              varPlace.identifier,
+            ),
+          };
+          const elseVarPlace = {
+            ...varPlace,
+            identifier: forkTemporaryIdentifier(
+              fn.env.nextIdentifierId,
+              varPlace.identifier,
+            ),
+          };
+          const varInstruction: Instruction = {
+            id: makeInstructionId(0),
+            lvalue: {...varLValuePlace},
+            value: {
+              kind: 'DeclareLocal',
+              lvalue: {place: {...varPlace}, kind: InstructionKind.Let},
+              type: null,
+              loc: instr.value.loc,
+            },
+            effects: null,
+            loc: instr.loc,
+          };
+          currentBlockInstructions.push(varInstruction);
+
+          const devGlobalPlace = createTemporaryPlace(fn.env, instr.value.loc);
+          const devGlobalInstruction: Instruction = {
+            id: makeInstructionId(0),
+            lvalue: {...devGlobalPlace, effect: Effect.Mutate},
+            value: {
+              kind: 'LoadGlobal',
+              binding: {
+                kind: 'Global',
+                name: inlineJsxTransformConfig.globalDevVar,
+              },
+              loc: instr.value.loc,
+            },
+            effects: null,
+            loc: instr.loc,
+          };
+          currentBlockInstructions.push(devGlobalInstruction);
+          const thenBlockId = fn.env.nextBlockId;
+          const elseBlockId = fn.env.nextBlockId;
+          const ifTerminal: IfTerminal = {
+            kind: 'if',
+            test: {...devGlobalPlace, effect: Effect.Read},
+            consequent: thenBlockId,
+            alternate: elseBlockId,
+            fallthrough: fallthroughBlockId,
+            loc: instr.loc,
+            id: makeInstructionId(0),
+          };
+          currentBlock.instructions = currentBlockInstructions;
+          currentBlock.terminal = ifTerminal;
+
+          /**
+           * Set up then block where we put the original JSX return
+           */
+          const thenBlock: BasicBlock = {
+            id: thenBlockId,
+            instructions: thenBlockInstructions,
+            kind: 'block',
+            phis: new Set(),
+            preds: new Set(),
+            terminal: {
+              kind: 'goto',
+              block: fallthroughBlockId,
+              variant: GotoVariant.Break,
+              id: makeInstructionId(0),
+              loc: instr.loc,
+            },
+          };
+          fn.body.blocks.set(thenBlockId, thenBlock);
+
+          const resassignElsePlace = createTemporaryPlace(
+            fn.env,
+            instr.value.loc,
+          );
+          const reassignElseInstruction: Instruction = {
+            id: makeInstructionId(0),
+            lvalue: {...resassignElsePlace},
+            value: {
+              kind: 'StoreLocal',
+              lvalue: {
+                place: elseVarPlace,
+                kind: InstructionKind.Reassign,
+              },
+              value: {...instr.lvalue},
+              type: null,
+              loc: instr.value.loc,
+            },
+            effects: null,
+            loc: instr.loc,
+          };
+          thenBlockInstructions.push(reassignElseInstruction);
+
+          /**
+           * Set up else block where we add new codegen
+           */
+          const elseBlockTerminal: GotoTerminal = {
+            kind: 'goto',
+            block: fallthroughBlockId,
+            variant: GotoVariant.Break,
+            id: makeInstructionId(0),
+            loc: instr.loc,
+          };
+          const elseBlock: BasicBlock = {
+            id: elseBlockId,
+            instructions: elseBlockInstructions,
+            kind: 'block',
+            phis: new Set(),
+            preds: new Set(),
+            terminal: elseBlockTerminal,
+          };
+          fn.body.blocks.set(elseBlockId, elseBlock);
+
+          /**
+           * ReactElement object literal codegen
+           */
+          const {refProperty, keyProperty, propsProperty} =
+            createPropsProperties(
+              fn,
+              instr,
+              elseBlockInstructions,
+              instr.value.kind === 'JsxExpression' ? instr.value.props : [],
+              instr.value.children,
+            );
+          const reactElementInstructionPlace = createTemporaryPlace(
+            fn.env,
+            instr.value.loc,
+          );
+          const reactElementInstruction: Instruction = {
+            id: makeInstructionId(0),
+            lvalue: {...reactElementInstructionPlace, effect: Effect.Store},
+            value: {
+              kind: 'ObjectExpression',
+              properties: [
+                createSymbolProperty(
+                  fn,
+                  instr,
+                  elseBlockInstructions,
+                  '$$typeof',
+                  inlineJsxTransformConfig.elementSymbol,
+                ),
+                instr.value.kind === 'JsxExpression'
+                  ? createTagProperty(
+                      fn,
+                      instr,
+                      elseBlockInstructions,
+                      instr.value.tag,
+                    )
+                  : createSymbolProperty(
+                      fn,
+                      instr,
+                      elseBlockInstructions,
+                      'type',
+                      'react.fragment',
+                    ),
+                refProperty,
+                keyProperty,
+                propsProperty,
+              ],
+              loc: instr.value.loc,
+            },
+            effects: null,
+            loc: instr.loc,
+          };
+          elseBlockInstructions.push(reactElementInstruction);
+
+          const reassignConditionalInstruction: Instruction = {
+            id: makeInstructionId(0),
+            lvalue: {...createTemporaryPlace(fn.env, instr.value.loc)},
+            value: {
+              kind: 'StoreLocal',
+              lvalue: {
+                place: {...elseVarPlace},
+                kind: InstructionKind.Reassign,
+              },
+              value: {...reactElementInstruction.lvalue},
+              type: null,
+              loc: instr.value.loc,
+            },
+            effects: null,
+            loc: instr.loc,
+          };
+          elseBlockInstructions.push(reassignConditionalInstruction);
+
+          /**
+           * Create phis to reassign the var
+           */
+          const operands: Map<BlockId, Place> = new Map();
+          operands.set(thenBlockId, {
+            ...elseVarPlace,
+          });
+          operands.set(elseBlockId, {
+            ...thenVarPlace,
+          });
+
+          const phiIdentifier = forkTemporaryIdentifier(
+            fn.env.nextIdentifierId,
+            varPlace.identifier,
+          );
+          const phiPlace = {
+            ...createTemporaryPlace(fn.env, instr.value.loc),
+            identifier: phiIdentifier,
+          };
+          const phis: Set<Phi> = new Set([
+            {
+              kind: 'Phi',
+              operands,
+              place: phiPlace,
+            },
+          ]);
+          fallthroughBlock.phis = phis;
+          fn.body.blocks.set(fallthroughBlockId, fallthroughBlock);
+
+          /**
+           * Track this JSX instruction so we can replace references in step 2
+           */
+          inlinedJsxDeclarations.set(instr.lvalue.identifier.declarationId, {
+            identifier: phiIdentifier,
+            blockIdsToIgnore: new Set([thenBlockId, elseBlockId]),
+          });
+          break;
+        }
+        case 'FunctionExpression':
+        case 'ObjectMethod': {
+          inlineJsxTransform(
+            instr.value.loweredFunc.func,
+            inlineJsxTransformConfig,
+          );
+          break;
+        }
+      }
+    }
+  }
+
+  /**
+   * Step 2: Replace declarations with new phi values
+   */
+  for (const [blockId, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      mapInstructionOperands(instr, place =>
+        handlePlace(place, blockId, inlinedJsxDeclarations),
+      );
+
+      mapInstructionLValues(instr, lvalue =>
+        handlelValue(lvalue, blockId, inlinedJsxDeclarations),
+      );
+
+      mapInstructionValueOperands(instr.value, place =>
+        handlePlace(place, blockId, inlinedJsxDeclarations),
+      );
+    }
+
+    mapTerminalOperands(block.terminal, place =>
+      handlePlace(place, blockId, inlinedJsxDeclarations),
+    );
+
+    if (block.terminal.kind === 'scope') {
+      const scope = block.terminal.scope;
+      for (const dep of scope.dependencies) {
+        dep.identifier = handleIdentifier(
+          dep.identifier,
+          inlinedJsxDeclarations,
+        );
+      }
+
+      for (const [origId, decl] of [...scope.declarations]) {
+        const newDecl = handleIdentifier(
+          decl.identifier,
+          inlinedJsxDeclarations,
+        );
+        if (newDecl.id !== origId) {
+          scope.declarations.delete(origId);
+          scope.declarations.set(decl.identifier.id, {
+            identifier: newDecl,
+            scope: decl.scope,
+          });
+        }
+      }
+    }
+  }
+
+  /**
+   * Step 3: Fixup the HIR
+   * Restore RPO, ensure correct predecessors, renumber instructions, fix scope and ranges.
+   */
+  reversePostorderBlocks(fn.body);
+  markPredecessors(fn.body);
+  markInstructionIds(fn.body);
+  fixScopeAndIdentifierRanges(fn.body);
+}
+
+function createSymbolProperty(
+  fn: HIRFunction,
+  instr: Instruction,
+  nextInstructions: Array<Instruction>,
+  propertyName: string,
+  symbolName: string,
+): ObjectProperty {
+  const symbolPlace = createTemporaryPlace(fn.env, instr.value.loc);
+  const symbolInstruction: Instruction = {
+    id: makeInstructionId(0),
+    lvalue: {...symbolPlace, effect: Effect.Mutate},
+    value: {
+      kind: 'LoadGlobal',
+      binding: {kind: 'Global', name: 'Symbol'},
+      loc: instr.value.loc,
+    },
+    effects: null,
+    loc: instr.loc,
+  };
+  nextInstructions.push(symbolInstruction);
+
+  const symbolForPlace = createTemporaryPlace(fn.env, instr.value.loc);
+  const symbolForInstruction: Instruction = {
+    id: makeInstructionId(0),
+    lvalue: {...symbolForPlace, effect: Effect.Read},
+    value: {
+      kind: 'PropertyLoad',
+      object: {...symbolInstruction.lvalue},
+      property: makePropertyLiteral('for'),
+      loc: instr.value.loc,
+    },
+    effects: null,
+    loc: instr.loc,
+  };
+  nextInstructions.push(symbolForInstruction);
+
+  const symbolValuePlace = createTemporaryPlace(fn.env, instr.value.loc);
+  const symbolValueInstruction: Instruction = {
+    id: makeInstructionId(0),
+    lvalue: {...symbolValuePlace, effect: Effect.Mutate},
+    value: {
+      kind: 'Primitive',
+      value: symbolName,
+      loc: instr.value.loc,
+    },
+    effects: null,
+    loc: instr.loc,
+  };
+  nextInstructions.push(symbolValueInstruction);
+
+  const $$typeofPlace = createTemporaryPlace(fn.env, instr.value.loc);
+  const $$typeofInstruction: Instruction = {
+    id: makeInstructionId(0),
+    lvalue: {...$$typeofPlace, effect: Effect.Mutate},
+    value: {
+      kind: 'MethodCall',
+      receiver: symbolInstruction.lvalue,
+      property: symbolForInstruction.lvalue,
+      args: [symbolValueInstruction.lvalue],
+      loc: instr.value.loc,
+    },
+    effects: null,
+    loc: instr.loc,
+  };
+  const $$typeofProperty: ObjectProperty = {
+    kind: 'ObjectProperty',
+    key: {name: propertyName, kind: 'string'},
+    type: 'property',
+    place: {...$$typeofPlace, effect: Effect.Capture},
+  };
+  nextInstructions.push($$typeofInstruction);
+  return $$typeofProperty;
+}
+
+function createTagProperty(
+  fn: HIRFunction,
+  instr: Instruction,
+  nextInstructions: Array<Instruction>,
+  componentTag: BuiltinTag | Place,
+): ObjectProperty {
+  let tagProperty: ObjectProperty;
+  switch (componentTag.kind) {
+    case 'BuiltinTag': {
+      const tagPropertyPlace = createTemporaryPlace(fn.env, instr.value.loc);
+      const tagInstruction: Instruction = {
+        id: makeInstructionId(0),
+        lvalue: {...tagPropertyPlace, effect: Effect.Mutate},
+        value: {
+          kind: 'Primitive',
+          value: componentTag.name,
+          loc: instr.value.loc,
+        },
+        effects: null,
+        loc: instr.loc,
+      };
+      tagProperty = {
+        kind: 'ObjectProperty',
+        key: {name: 'type', kind: 'string'},
+        type: 'property',
+        place: {...tagPropertyPlace, effect: Effect.Capture},
+      };
+      nextInstructions.push(tagInstruction);
+      break;
+    }
+    case 'Identifier': {
+      tagProperty = {
+        kind: 'ObjectProperty',
+        key: {name: 'type', kind: 'string'},
+        type: 'property',
+        place: {...componentTag, effect: Effect.Capture},
+      };
+      break;
+    }
+  }
+
+  return tagProperty;
+}
+
+function createPropsProperties(
+  fn: HIRFunction,
+  instr: Instruction,
+  nextInstructions: Array<Instruction>,
+  propAttributes: Array<JsxAttribute>,
+  children: Array<Place> | null,
+): {
+  refProperty: ObjectProperty;
+  keyProperty: ObjectProperty;
+  propsProperty: ObjectProperty;
+} {
+  let refProperty: ObjectProperty | undefined;
+  let keyProperty: ObjectProperty | undefined;
+  const props: Array<ObjectProperty | SpreadPattern> = [];
+  const jsxAttributesWithoutKey = propAttributes.filter(
+    p => p.kind === 'JsxAttribute' && p.name !== 'key',
+  );
+  const jsxSpreadAttributes = propAttributes.filter(
+    p => p.kind === 'JsxSpreadAttribute',
+  );
+  const spreadPropsOnly =
+    jsxAttributesWithoutKey.length === 0 && jsxSpreadAttributes.length === 1;
+  propAttributes.forEach(prop => {
+    switch (prop.kind) {
+      case 'JsxAttribute': {
+        switch (prop.name) {
+          case 'key': {
+            keyProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'key', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            break;
+          }
+          case 'ref': {
+            /**
+             * In the current JSX implementation, ref is both
+             * a property on the element and a property on props.
+             */
+            refProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'ref', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            const refPropProperty: ObjectProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'ref', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            props.push(refPropProperty);
+            break;
+          }
+          default: {
+            const attributeProperty: ObjectProperty = {
+              kind: 'ObjectProperty',
+              key: {name: prop.name, kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            props.push(attributeProperty);
+          }
+        }
+        break;
+      }
+      case 'JsxSpreadAttribute': {
+        props.push({
+          kind: 'Spread',
+          place: {...prop.argument},
+        });
+        break;
+      }
+    }
+  });
+
+  const propsPropertyPlace = createTemporaryPlace(fn.env, instr.value.loc);
+  if (children) {
+    let childrenPropProperty: ObjectProperty;
+    if (children.length === 1) {
+      childrenPropProperty = {
+        kind: 'ObjectProperty',
+        key: {name: 'children', kind: 'string'},
+        type: 'property',
+        place: {...children[0], effect: Effect.Capture},
+      };
+    } else {
+      const childrenPropPropertyPlace = createTemporaryPlace(
+        fn.env,
+        instr.value.loc,
+      );
+
+      const childrenPropInstruction: Instruction = {
+        id: makeInstructionId(0),
+        lvalue: {...childrenPropPropertyPlace, effect: Effect.Mutate},
+        value: {
+          kind: 'ArrayExpression',
+          elements: [...children],
+          loc: instr.value.loc,
+        },
+        effects: null,
+        loc: instr.loc,
+      };
+      nextInstructions.push(childrenPropInstruction);
+      childrenPropProperty = {
+        kind: 'ObjectProperty',
+        key: {name: 'children', kind: 'string'},
+        type: 'property',
+        place: {...childrenPropPropertyPlace, effect: Effect.Capture},
+      };
+    }
+    props.push(childrenPropProperty);
+  }
+
+  if (refProperty == null) {
+    const refPropertyPlace = createTemporaryPlace(fn.env, instr.value.loc);
+    const refInstruction: Instruction = {
+      id: makeInstructionId(0),
+      lvalue: {...refPropertyPlace, effect: Effect.Mutate},
+      value: {
+        kind: 'Primitive',
+        value: null,
+        loc: instr.value.loc,
+      },
+      effects: null,
+      loc: instr.loc,
+    };
+    refProperty = {
+      kind: 'ObjectProperty',
+      key: {name: 'ref', kind: 'string'},
+      type: 'property',
+      place: {...refPropertyPlace, effect: Effect.Capture},
+    };
+    nextInstructions.push(refInstruction);
+  }
+
+  if (keyProperty == null) {
+    const keyPropertyPlace = createTemporaryPlace(fn.env, instr.value.loc);
+    const keyInstruction: Instruction = {
+      id: makeInstructionId(0),
+      lvalue: {...keyPropertyPlace, effect: Effect.Mutate},
+      value: {
+        kind: 'Primitive',
+        value: null,
+        loc: instr.value.loc,
+      },
+      effects: null,
+      loc: instr.loc,
+    };
+    keyProperty = {
+      kind: 'ObjectProperty',
+      key: {name: 'key', kind: 'string'},
+      type: 'property',
+      place: {...keyPropertyPlace, effect: Effect.Capture},
+    };
+    nextInstructions.push(keyInstruction);
+  }
+
+  let propsProperty: ObjectProperty;
+  if (spreadPropsOnly) {
+    const spreadProp = jsxSpreadAttributes[0];
+    CompilerError.invariant(spreadProp.kind === 'JsxSpreadAttribute', {
+      reason: 'Spread prop attribute must be of kind JSXSpreadAttribute',
+      loc: instr.loc,
+    });
+    propsProperty = {
+      kind: 'ObjectProperty',
+      key: {name: 'props', kind: 'string'},
+      type: 'property',
+      place: {...spreadProp.argument, effect: Effect.Mutate},
+    };
+  } else {
+    const propsInstruction: Instruction = {
+      id: makeInstructionId(0),
+      lvalue: {...propsPropertyPlace, effect: Effect.Mutate},
+      value: {
+        kind: 'ObjectExpression',
+        properties: props,
+        loc: instr.value.loc,
+      },
+      effects: null,
+      loc: instr.loc,
+    };
+    propsProperty = {
+      kind: 'ObjectProperty',
+      key: {name: 'props', kind: 'string'},
+      type: 'property',
+      place: {...propsPropertyPlace, effect: Effect.Capture},
+    };
+    nextInstructions.push(propsInstruction);
+  }
+
+  return {refProperty, keyProperty, propsProperty};
+}
+
+function handlePlace(
+  place: Place,
+  blockId: BlockId,
+  inlinedJsxDeclarations: InlinedJsxDeclarationMap,
+): Place {
+  const inlinedJsxDeclaration = inlinedJsxDeclarations.get(
+    place.identifier.declarationId,
+  );
+  if (
+    inlinedJsxDeclaration == null ||
+    inlinedJsxDeclaration.blockIdsToIgnore.has(blockId)
+  ) {
+    return place;
+  }
+
+  return {...place, identifier: inlinedJsxDeclaration.identifier};
+}
+
+function handlelValue(
+  lvalue: Place,
+  blockId: BlockId,
+  inlinedJsxDeclarations: InlinedJsxDeclarationMap,
+): Place {
+  const inlinedJsxDeclaration = inlinedJsxDeclarations.get(
+    lvalue.identifier.declarationId,
+  );
+  if (
+    inlinedJsxDeclaration == null ||
+    inlinedJsxDeclaration.blockIdsToIgnore.has(blockId)
+  ) {
+    return lvalue;
+  }
+
+  return {...lvalue, identifier: inlinedJsxDeclaration.identifier};
+}
+
+function handleIdentifier(
+  identifier: Identifier,
+  inlinedJsxDeclarations: InlinedJsxDeclarationMap,
+): Identifier {
+  const inlinedJsxDeclaration = inlinedJsxDeclarations.get(
+    identifier.declarationId,
+  );
+  return inlinedJsxDeclaration == null
+    ? identifier
+    : inlinedJsxDeclaration.identifier;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts
new file mode 100644
index 00000000000..f0c038247e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts
@@ -0,0 +1,503 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  BasicBlock,
+  Environment,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  InstructionId,
+  Place,
+  isExpressionBlockKind,
+  makeInstructionId,
+  markInstructionIds,
+} from '../HIR';
+import {printInstruction} from '../HIR/PrintHIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {getOrInsertWith} from '../Utils/utils';
+
+/**
+ * This pass implements conservative instruction reordering to move instructions closer to
+ * to where their produced values are consumed. The goal is to group instructions in a way that
+ * is more optimal for future optimizations. Notably, MergeReactiveScopesThatAlwaysInvalidateTogether
+ * can only merge two candidate scopes if there are no intervenining instructions that are used by
+ * some later code: instruction reordering can move those intervening instructions later in many cases,
+ * thereby allowing more scopes to merge together.
+ *
+ * The high-level approach is to build a dependency graph where nodes correspond either to
+ * instructions OR to a particular lvalue assignment of another instruction. So
+ * `Destructure [x, y] = z` creates 3 nodes: one for the instruction, and one each for x and y.
+ * The lvalue nodes depend on the instruction node that assigns them.
+ *
+ * Dependency edges are added for all the lvalues and rvalues of each instruction, so for example
+ * the node for `t$2 = CallExpression t$0 ( t$1 )` will take dependencies on the nodes for t$0 and t$1.
+ *
+ * Individual instructions are grouped into two categories:
+ * - "Reorderable" instructions include a safe set of instructions that we know are fine to reorder.
+ *   This includes JSX elements/fragments/text, primitives, template literals, and globals.
+ *   These instructions are never emitted until they are referenced, and can even be moved across
+ *   basic blocks until they are used.
+ * - All other instructions are non-reorderable, and take an explicit dependency on the last such
+ *   non-reorderable instruction in their block. This largely ensures that mutations are serialized,
+ *   since all potentially mutating instructions are in this category.
+ *
+ * The only remaining mutation not handled by the above is variable reassignment. To ensure that all
+ * reads/writes of a variable access the correct version, all references (lvalues and rvalues) to
+ * each named variable are serialized. Thus `x = 1; y = x; x = 2; z = x` will establish a chain
+ * of dependencies and retain the correct ordering.
+ *
+ * The algorithm proceeds one basic block at a time, first building up the dependnecy graph and then
+ * reordering.
+ *
+ * The reordering weights nodes according to their transitive dependencies, and whether a particular node
+ * needs memoization or not. Larger dependencies go first, followed by smaller dependencies, which in
+ * testing seems to allow scopes to merge more effectively. Over time we can likely continue to improve
+ * the reordering heuristic.
+ *
+ * An obvious area for improvement is to allow reordering of LoadLocals that occur after the last write
+ * of the named variable. We can add this in a follow-up.
+ */
+export function instructionReordering(fn: HIRFunction): void {
+  // Shared nodes are emitted when they are first used
+  const shared: Nodes = new Map();
+  const references = findReferencedRangeOfTemporaries(fn);
+  for (const [, block] of fn.body.blocks) {
+    reorderBlock(fn.env, block, shared, references);
+  }
+  CompilerError.invariant(shared.size === 0, {
+    reason: `InstructionReordering: expected all reorderable nodes to have been emitted`,
+    loc:
+      [...shared.values()]
+        .map(node => node.instruction?.loc)
+        .filter(loc => loc != null)[0] ?? GeneratedSource,
+  });
+  markInstructionIds(fn.body);
+}
+
+const DEBUG = false;
+
+type Nodes = Map<IdentifierId, Node>;
+type Node = {
+  instruction: Instruction | null;
+  dependencies: Set<IdentifierId>;
+  reorderability: Reorderability;
+  depth: number | null;
+};
+
+// Inclusive start and end
+type References = {
+  singleUseIdentifiers: SingleUseIdentifiers;
+  lastAssignments: LastAssignments;
+};
+type LastAssignments = Map<string, InstructionId>;
+type SingleUseIdentifiers = Set<IdentifierId>;
+enum ReferenceKind {
+  Read,
+  Write,
+}
+function findReferencedRangeOfTemporaries(fn: HIRFunction): References {
+  const singleUseIdentifiers = new Map<IdentifierId, number>();
+  const lastAssignments: LastAssignments = new Map();
+  function reference(
+    instr: InstructionId,
+    place: Place,
+    kind: ReferenceKind,
+  ): void {
+    if (
+      place.identifier.name !== null &&
+      place.identifier.name.kind === 'named'
+    ) {
+      if (kind === ReferenceKind.Write) {
+        const name = place.identifier.name.value;
+        const previous = lastAssignments.get(name);
+        if (previous === undefined) {
+          lastAssignments.set(name, instr);
+        } else {
+          lastAssignments.set(
+            name,
+            makeInstructionId(Math.max(previous, instr)),
+          );
+        }
+      }
+      return;
+    } else if (kind === ReferenceKind.Read) {
+      const previousCount = singleUseIdentifiers.get(place.identifier.id) ?? 0;
+      singleUseIdentifiers.set(place.identifier.id, previousCount + 1);
+    }
+  }
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      for (const operand of eachInstructionValueLValue(instr.value)) {
+        reference(instr.id, operand, ReferenceKind.Read);
+      }
+      for (const lvalue of eachInstructionLValue(instr)) {
+        reference(instr.id, lvalue, ReferenceKind.Write);
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      reference(block.terminal.id, operand, ReferenceKind.Read);
+    }
+  }
+  return {
+    singleUseIdentifiers: new Set(
+      [...singleUseIdentifiers]
+        .filter(([, count]) => count === 1)
+        .map(([id]) => id),
+    ),
+    lastAssignments,
+  };
+}
+
+function reorderBlock(
+  env: Environment,
+  block: BasicBlock,
+  shared: Nodes,
+  references: References,
+): void {
+  const locals: Nodes = new Map();
+  const named: Map<string, IdentifierId> = new Map();
+  let previous: IdentifierId | null = null;
+  for (const instr of block.instructions) {
+    const {lvalue, value} = instr;
+    // Get or create a node for this lvalue
+    const reorderability = getReorderability(instr, references);
+    const node = getOrInsertWith(
+      locals,
+      lvalue.identifier.id,
+      () =>
+        ({
+          instruction: instr,
+          dependencies: new Set(),
+          reorderability,
+          depth: null,
+        }) as Node,
+    );
+    /**
+     * Ensure non-reoderable instructions have their order retained by
+     * adding explicit dependencies to the previous such instruction.
+     */
+    if (reorderability === Reorderability.Nonreorderable) {
+      if (previous !== null) {
+        node.dependencies.add(previous);
+      }
+      previous = lvalue.identifier.id;
+    }
+    /**
+     * Establish dependencies on operands
+     */
+    for (const operand of eachInstructionValueOperand(value)) {
+      const {name, id} = operand.identifier;
+      if (name !== null && name.kind === 'named') {
+        // Serialize all accesses to named variables
+        const previous = named.get(name.value);
+        if (previous !== undefined) {
+          node.dependencies.add(previous);
+        }
+        named.set(name.value, lvalue.identifier.id);
+      } else if (locals.has(id) || shared.has(id)) {
+        node.dependencies.add(id);
+      }
+    }
+    /**
+     * Establish nodes for lvalues, with dependencies on the node
+     * for the instruction itself. This ensures that any consumers
+     * of the lvalue will take a dependency through to the original
+     * instruction.
+     */
+    for (const lvalueOperand of eachInstructionValueLValue(value)) {
+      const lvalueNode = getOrInsertWith(
+        locals,
+        lvalueOperand.identifier.id,
+        () =>
+          ({
+            instruction: null,
+            dependencies: new Set(),
+            depth: null,
+          }) as Node,
+      );
+      lvalueNode.dependencies.add(lvalue.identifier.id);
+      const name = lvalueOperand.identifier.name;
+      if (name !== null && name.kind === 'named') {
+        const previous = named.get(name.value);
+        if (previous !== undefined) {
+          node.dependencies.add(previous);
+        }
+        named.set(name.value, lvalue.identifier.id);
+      }
+    }
+  }
+
+  const nextInstructions: Array<Instruction> = [];
+  const seen = new Set<IdentifierId>();
+
+  DEBUG && console.log(`bb${block.id}`);
+
+  /**
+   * The ideal order for emitting instructions may change the final instruction,
+   * but value blocks have special semantics for the final instruction of a block -
+   * that's the expression's value!. So we choose between a less optimal strategy
+   * for value blocks which preserves the final instruction order OR a more optimal
+   * ordering for statement-y blocks.
+   */
+  if (isExpressionBlockKind(block.kind)) {
+    // First emit everything that can't be reordered
+    if (previous !== null) {
+      DEBUG && console.log(`(last non-reorderable instruction)`);
+      DEBUG && print(env, locals, shared, seen, previous);
+      emit(env, locals, shared, nextInstructions, previous);
+    }
+    /*
+     * For "value" blocks the final instruction represents its value, so we have to be
+     * careful to not change the ordering. Emit the last instruction explicitly.
+     * Any non-reorderable instructions will get emitted first, and any unused
+     * reorderable instructions can be deferred to the shared node list.
+     */
+    if (block.instructions.length !== 0) {
+      DEBUG && console.log(`(block value)`);
+      DEBUG &&
+        print(
+          env,
+          locals,
+          shared,
+          seen,
+          block.instructions.at(-1)!.lvalue.identifier.id,
+        );
+      emit(
+        env,
+        locals,
+        shared,
+        nextInstructions,
+        block.instructions.at(-1)!.lvalue.identifier.id,
+      );
+    }
+    /*
+     * Then emit the dependencies of the terminal operand. In many cases they will have
+     * already been emitted in the previous step and this is a no-op.
+     * TODO: sort the dependencies based on weight, like we do for other nodes. Not a big
+     * deal though since most terminals have a single operand
+     */
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      DEBUG && console.log(`(terminal operand)`);
+      DEBUG && print(env, locals, shared, seen, operand.identifier.id);
+      emit(env, locals, shared, nextInstructions, operand.identifier.id);
+    }
+    // Anything not emitted yet is globally reorderable
+    for (const [id, node] of locals) {
+      if (node.instruction == null) {
+        continue;
+      }
+      CompilerError.invariant(
+        node.reorderability === Reorderability.Reorderable,
+        {
+          reason: `Expected all remaining instructions to be reorderable`,
+          description:
+            node.instruction != null
+              ? `Instruction [${node.instruction.id}] was not emitted yet but is not reorderable`
+              : `Lvalue $${id} was not emitted yet but is not reorderable`,
+          loc: node.instruction?.loc ?? block.terminal.loc,
+        },
+      );
+
+      DEBUG && console.log(`save shared: $${id}`);
+      shared.set(id, node);
+    }
+  } else {
+    /**
+     * If this is not a value block, then the order within the block doesn't matter
+     * and we can optimize more. The observation is that blocks often have instructions
+     * such as:
+     *
+     * ```
+     * t$0 = nonreorderable
+     * t$1 = nonreorderable <-- this gets in the way of merging t$0 and t$2
+     * t$2 = reorderable deps[ t$0 ]
+     * return t$2
+     * ```
+     *
+     * Ie where there is some pair of nonreorderable+reorderable values, with some intervening
+     * also non-reorderable instruction. If we emit all non-reorderable instructions first,
+     * then we'll keep the original order. But reordering instructions doesn't just mean moving
+     * them later: we can also move them _earlier_. By starting from terminal operands we
+     * end up emitting:
+     *
+     * ```
+     * t$0 = nonreorderable // dep of t$2
+     * t$2 = reorderable deps[ t$0 ]
+     * t$1 = nonreorderable <-- not in the way of merging anymore!
+     * return t$2
+     * ```
+     *
+     * Ie all nonreorderable transitive deps of the terminal operands will get emitted first,
+     * but we'll be able to intersperse the depending reorderable instructions in between
+     * them in a way that works better with scope merging.
+     */
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      DEBUG && console.log(`(terminal operand)`);
+      DEBUG && print(env, locals, shared, seen, operand.identifier.id);
+      emit(env, locals, shared, nextInstructions, operand.identifier.id);
+    }
+    // Anything not emitted yet is globally reorderable
+    for (const id of Array.from(locals.keys()).reverse()) {
+      const node = locals.get(id);
+      if (node === undefined) {
+        continue;
+      }
+      if (node.reorderability === Reorderability.Reorderable) {
+        DEBUG && console.log(`save shared: $${id}`);
+        shared.set(id, node);
+      } else {
+        DEBUG && console.log('leftover');
+        DEBUG && print(env, locals, shared, seen, id);
+        emit(env, locals, shared, nextInstructions, id);
+      }
+    }
+  }
+
+  block.instructions = nextInstructions;
+  DEBUG && console.log();
+}
+
+function getDepth(env: Environment, nodes: Nodes, id: IdentifierId): number {
+  const node = nodes.get(id)!;
+  if (node == null) {
+    return 0;
+  }
+  if (node.depth != null) {
+    return node.depth;
+  }
+  node.depth = 0; // in case of cycles
+  let depth = node.reorderability === Reorderability.Reorderable ? 1 : 10;
+  for (const dep of node.dependencies) {
+    depth += getDepth(env, nodes, dep);
+  }
+  node.depth = depth;
+  return depth;
+}
+
+function print(
+  env: Environment,
+  locals: Nodes,
+  shared: Nodes,
+  seen: Set<IdentifierId>,
+  id: IdentifierId,
+  depth: number = 0,
+): void {
+  if (seen.has(id)) {
+    DEBUG && console.log(`${'|   '.repeat(depth)}$${id} <skipped>`);
+    return;
+  }
+  seen.add(id);
+  const node = locals.get(id) ?? shared.get(id);
+  if (node == null) {
+    return;
+  }
+  const deps = [...node.dependencies];
+  deps.sort((a, b) => {
+    const aDepth = getDepth(env, locals, a);
+    const bDepth = getDepth(env, locals, b);
+    return bDepth - aDepth;
+  });
+  for (const dep of deps) {
+    print(env, locals, shared, seen, dep, depth + 1);
+  }
+  DEBUG &&
+    console.log(
+      `${'|   '.repeat(depth)}$${id} ${printNode(node)} deps=[${deps
+        .map(x => `$${x}`)
+        .join(', ')}] depth=${node.depth}`,
+    );
+}
+
+function printNode(node: Node): string {
+  const {instruction} = node;
+  if (instruction === null) {
+    return '<lvalue-only>';
+  }
+  switch (instruction.value.kind) {
+    case 'FunctionExpression':
+    case 'ObjectMethod': {
+      return `[${instruction.id}] ${instruction.value.kind}`;
+    }
+    default: {
+      return printInstruction(instruction);
+    }
+  }
+}
+
+function emit(
+  env: Environment,
+  locals: Nodes,
+  shared: Nodes,
+  instructions: Array<Instruction>,
+  id: IdentifierId,
+): void {
+  const node = locals.get(id) ?? shared.get(id);
+  if (node == null) {
+    return;
+  }
+  locals.delete(id);
+  shared.delete(id);
+  const deps = [...node.dependencies];
+  deps.sort((a, b) => {
+    const aDepth = getDepth(env, locals, a);
+    const bDepth = getDepth(env, locals, b);
+    return bDepth - aDepth;
+  });
+  for (const dep of deps) {
+    emit(env, locals, shared, instructions, dep);
+  }
+  if (node.instruction !== null) {
+    instructions.push(node.instruction);
+  }
+}
+
+enum Reorderability {
+  Reorderable,
+  Nonreorderable,
+}
+function getReorderability(
+  instr: Instruction,
+  references: References,
+): Reorderability {
+  switch (instr.value.kind) {
+    case 'JsxExpression':
+    case 'JsxFragment':
+    case 'JSXText':
+    case 'LoadGlobal':
+    case 'Primitive':
+    case 'TemplateLiteral':
+    case 'BinaryExpression':
+    case 'UnaryExpression': {
+      return Reorderability.Reorderable;
+    }
+    case 'LoadLocal': {
+      const name = instr.value.place.identifier.name;
+      if (name !== null && name.kind === 'named') {
+        const lastAssignment = references.lastAssignments.get(name.value);
+        if (
+          lastAssignment !== undefined &&
+          lastAssignment < instr.id &&
+          references.singleUseIdentifiers.has(instr.lvalue.identifier.id)
+        ) {
+          return Reorderability.Reorderable;
+        }
+      }
+      return Reorderability.Nonreorderable;
+    }
+    default: {
+      return Reorderability.Nonreorderable;
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts
new file mode 100644
index 00000000000..50f00427205
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/LowerContextAccess.ts
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ArrayExpression,
+  BasicBlock,
+  CallExpression,
+  Destructure,
+  Environment,
+  ExternalFunction,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  LoadGlobal,
+  LoadLocal,
+  NonLocalImportSpecifier,
+  Place,
+  PropertyLoad,
+  isUseContextHookType,
+  makeBlockId,
+  makeInstructionId,
+  makePropertyLiteral,
+  markInstructionIds,
+  promoteTemporary,
+  reversePostorderBlocks,
+} from '../HIR';
+import {createTemporaryPlace} from '../HIR/HIRBuilder';
+import {enterSSA} from '../SSA';
+import {inferTypes} from '../TypeInference';
+
+export function lowerContextAccess(
+  fn: HIRFunction,
+  loweredContextCalleeConfig: ExternalFunction,
+): void {
+  const contextAccess: Map<IdentifierId, CallExpression> = new Map();
+  const contextKeys: Map<IdentifierId, Array<string>> = new Map();
+
+  // collect context access and keys
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const {value, lvalue} = instr;
+
+      if (
+        value.kind === 'CallExpression' &&
+        isUseContextHookType(value.callee.identifier)
+      ) {
+        contextAccess.set(lvalue.identifier.id, value);
+        continue;
+      }
+
+      if (value.kind !== 'Destructure') {
+        continue;
+      }
+
+      const destructureId = value.value.identifier.id;
+      if (!contextAccess.has(destructureId)) {
+        continue;
+      }
+
+      const keys = getContextKeys(value);
+      if (keys === null) {
+        return;
+      }
+
+      if (contextKeys.has(destructureId)) {
+        /*
+         * TODO(gsn): Add support for accessing context over multiple
+         * statements.
+         */
+        return;
+      } else {
+        contextKeys.set(destructureId, keys);
+      }
+    }
+  }
+
+  let importLoweredContextCallee: NonLocalImportSpecifier | null = null;
+
+  if (contextAccess.size > 0 && contextKeys.size > 0) {
+    for (const [, block] of fn.body.blocks) {
+      let nextInstructions: Array<Instruction> | null = null;
+
+      for (let i = 0; i < block.instructions.length; i++) {
+        const instr = block.instructions[i];
+        const {lvalue, value} = instr;
+        if (
+          value.kind === 'CallExpression' &&
+          isUseContextHookType(value.callee.identifier) &&
+          contextKeys.has(lvalue.identifier.id)
+        ) {
+          importLoweredContextCallee ??=
+            fn.env.programContext.addImportSpecifier(
+              loweredContextCalleeConfig,
+            );
+          const loweredContextCalleeInstr = emitLoadLoweredContextCallee(
+            fn.env,
+            importLoweredContextCallee,
+          );
+
+          if (nextInstructions === null) {
+            nextInstructions = block.instructions.slice(0, i);
+          }
+          nextInstructions.push(loweredContextCalleeInstr);
+
+          const keys = contextKeys.get(lvalue.identifier.id)!;
+          const selectorFnInstr = emitSelectorFn(fn.env, keys);
+          nextInstructions.push(selectorFnInstr);
+
+          const lowerContextCallId = loweredContextCalleeInstr.lvalue;
+          value.callee = lowerContextCallId;
+
+          const selectorFn = selectorFnInstr.lvalue;
+          value.args.push(selectorFn);
+        }
+
+        if (nextInstructions) {
+          nextInstructions.push(instr);
+        }
+      }
+      if (nextInstructions) {
+        block.instructions = nextInstructions;
+      }
+    }
+    markInstructionIds(fn.body);
+    inferTypes(fn);
+  }
+}
+
+function emitLoadLoweredContextCallee(
+  env: Environment,
+  importedLowerContextCallee: NonLocalImportSpecifier,
+): Instruction {
+  const loadGlobal: LoadGlobal = {
+    kind: 'LoadGlobal',
+    binding: {...importedLowerContextCallee},
+    loc: GeneratedSource,
+  };
+
+  return {
+    id: makeInstructionId(0),
+    loc: GeneratedSource,
+    lvalue: createTemporaryPlace(env, GeneratedSource),
+    effects: null,
+    value: loadGlobal,
+  };
+}
+
+function getContextKeys(value: Destructure): Array<string> | null {
+  const keys = [];
+  const pattern = value.lvalue.pattern;
+
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      return null;
+    }
+
+    case 'ObjectPattern': {
+      for (const place of pattern.properties) {
+        if (
+          place.kind !== 'ObjectProperty' ||
+          place.type !== 'property' ||
+          place.key.kind !== 'identifier' ||
+          place.place.identifier.name === null ||
+          place.place.identifier.name.kind !== 'named'
+        ) {
+          return null;
+        }
+        keys.push(place.key.name);
+      }
+      return keys;
+    }
+  }
+}
+
+function emitPropertyLoad(
+  env: Environment,
+  obj: Place,
+  property: string,
+): {instructions: Array<Instruction>; element: Place} {
+  const loadObj: LoadLocal = {
+    kind: 'LoadLocal',
+    place: obj,
+    loc: GeneratedSource,
+  };
+  const object: Place = createTemporaryPlace(env, GeneratedSource);
+  const loadLocalInstr: Instruction = {
+    lvalue: object,
+    value: loadObj,
+    id: makeInstructionId(0),
+    effects: null,
+    loc: GeneratedSource,
+  };
+
+  const loadProp: PropertyLoad = {
+    kind: 'PropertyLoad',
+    object,
+    property: makePropertyLiteral(property),
+    loc: GeneratedSource,
+  };
+  const element: Place = createTemporaryPlace(env, GeneratedSource);
+  const loadPropInstr: Instruction = {
+    lvalue: element,
+    value: loadProp,
+    id: makeInstructionId(0),
+    effects: null,
+    loc: GeneratedSource,
+  };
+  return {
+    instructions: [loadLocalInstr, loadPropInstr],
+    element: element,
+  };
+}
+
+function emitSelectorFn(env: Environment, keys: Array<string>): Instruction {
+  const obj: Place = createTemporaryPlace(env, GeneratedSource);
+  promoteTemporary(obj.identifier);
+  const instr: Array<Instruction> = [];
+  const elements = [];
+  for (const key of keys) {
+    const {instructions, element: prop} = emitPropertyLoad(env, obj, key);
+    instr.push(...instructions);
+    elements.push(prop);
+  }
+
+  const arrayInstr = emitArrayInstr(elements, env);
+  instr.push(arrayInstr);
+
+  const block: BasicBlock = {
+    kind: 'block',
+    id: makeBlockId(0),
+    instructions: instr,
+    terminal: {
+      id: makeInstructionId(0),
+      kind: 'return',
+      returnVariant: 'Explicit',
+      loc: GeneratedSource,
+      value: arrayInstr.lvalue,
+      effects: null,
+    },
+    preds: new Set(),
+    phis: new Set(),
+  };
+
+  const fn: HIRFunction = {
+    loc: GeneratedSource,
+    id: null,
+    nameHint: null,
+    fnType: 'Other',
+    env,
+    params: [obj],
+    returnTypeAnnotation: null,
+    returns: createTemporaryPlace(env, GeneratedSource),
+    context: [],
+    body: {
+      entry: block.id,
+      blocks: new Map([[block.id, block]]),
+    },
+    generator: false,
+    async: false,
+    directives: [],
+    aliasingEffects: [],
+  };
+
+  reversePostorderBlocks(fn.body);
+  markInstructionIds(fn.body);
+  enterSSA(fn);
+  inferTypes(fn);
+
+  const fnInstr: Instruction = {
+    id: makeInstructionId(0),
+    value: {
+      kind: 'FunctionExpression',
+      name: null,
+      nameHint: null,
+      loweredFunc: {
+        func: fn,
+      },
+      type: 'ArrowFunctionExpression',
+      loc: GeneratedSource,
+    },
+    lvalue: createTemporaryPlace(env, GeneratedSource),
+    effects: null,
+    loc: GeneratedSource,
+  };
+  return fnInstr;
+}
+
+function emitArrayInstr(elements: Array<Place>, env: Environment): Instruction {
+  const array: ArrayExpression = {
+    kind: 'ArrayExpression',
+    elements,
+    loc: GeneratedSource,
+  };
+  const arrayLvalue: Place = createTemporaryPlace(env, GeneratedSource);
+  const arrayInstr: Instruction = {
+    id: makeInstructionId(0),
+    value: array,
+    lvalue: arrayLvalue,
+    effects: null,
+    loc: GeneratedSource,
+  };
+  return arrayInstr;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizeForSSR.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizeForSSR.ts
new file mode 100644
index 00000000000..16644ec7a87
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizeForSSR.ts
@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  CallExpression,
+  getHookKind,
+  HIRFunction,
+  IdentifierId,
+  InstructionValue,
+  isArrayType,
+  isPlainObjectType,
+  isPrimitiveType,
+  isSetStateType,
+  isStartTransitionType,
+  LoadLocal,
+  StoreLocal,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {retainWhere} from '../Utils/utils';
+
+/**
+ * Optimizes the code for running specifically in an SSR environment. This optimization
+ * asssumes that setState will not be called during render during initial mount, which
+ * allows inlining useState/useReducer.
+ *
+ * Optimizations:
+ * - Inline useState/useReducer
+ * - Remove effects
+ * - Remove refs where known to be unused during render (eg directly passed to a dom node)
+ * - Remove event handlers
+ *
+ * Note that an earlier pass already inlines useMemo/useCallback
+ */
+export function optimizeForSSR(fn: HIRFunction): void {
+  const inlinedState = new Map<IdentifierId, InstructionValue>();
+  /**
+   * First pass identifies useState/useReducer which can be safely inlined. Any use
+   * of the hook return other than destructuring (with a specific pattern) prevents
+   * inlining.
+   *
+   * Supported cases:
+   * - `const [state, ] = useState( <primitive-array-or-object> )`
+   * - `const [state, ] = useReducer(..., <value>)`
+   * - `const [state, ] = useReducer[..., <value>, <init>]`
+   */
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'Destructure': {
+          if (
+            inlinedState.has(value.value.identifier.id) &&
+            value.lvalue.pattern.kind === 'ArrayPattern' &&
+            value.lvalue.pattern.items.length >= 1 &&
+            value.lvalue.pattern.items[0].kind === 'Identifier'
+          ) {
+            // Allow destructuring of inlined states
+            continue;
+          }
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const calleee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          const hookKind = getHookKind(fn.env, calleee.identifier);
+          switch (hookKind) {
+            case 'useReducer': {
+              if (
+                value.args.length === 2 &&
+                value.args[1].kind === 'Identifier'
+              ) {
+                const arg = value.args[1];
+                const replace: LoadLocal = {
+                  kind: 'LoadLocal',
+                  place: arg,
+                  loc: arg.loc,
+                };
+                inlinedState.set(instr.lvalue.identifier.id, replace);
+              } else if (
+                value.args.length === 3 &&
+                value.args[1].kind === 'Identifier' &&
+                value.args[2].kind === 'Identifier'
+              ) {
+                const arg = value.args[1];
+                const initializer = value.args[2];
+                const replace: CallExpression = {
+                  kind: 'CallExpression',
+                  callee: initializer,
+                  args: [arg],
+                  loc: value.loc,
+                };
+                inlinedState.set(instr.lvalue.identifier.id, replace);
+              }
+              break;
+            }
+            case 'useState': {
+              if (
+                value.args.length === 1 &&
+                value.args[0].kind === 'Identifier'
+              ) {
+                const arg = value.args[0];
+                if (
+                  isPrimitiveType(arg.identifier) ||
+                  isPlainObjectType(arg.identifier) ||
+                  isArrayType(arg.identifier)
+                ) {
+                  const replace: LoadLocal = {
+                    kind: 'LoadLocal',
+                    place: arg,
+                    loc: arg.loc,
+                  };
+                  inlinedState.set(instr.lvalue.identifier.id, replace);
+                }
+              }
+              break;
+            }
+          }
+        }
+      }
+      // Any use of useState/useReducer return besides destructuring prevents inlining
+      if (inlinedState.size !== 0) {
+        for (const operand of eachInstructionValueOperand(value)) {
+          inlinedState.delete(operand.identifier.id);
+        }
+      }
+    }
+    if (inlinedState.size !== 0) {
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        inlinedState.delete(operand.identifier.id);
+      }
+    }
+  }
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'FunctionExpression': {
+          if (hasKnownNonRenderCall(value.loweredFunc.func)) {
+            instr.value = {
+              kind: 'Primitive',
+              value: undefined,
+              loc: value.loc,
+            };
+          }
+          break;
+        }
+        case 'JsxExpression': {
+          if (
+            value.tag.kind === 'BuiltinTag' &&
+            value.tag.name.indexOf('-') === -1
+          ) {
+            const tag = value.tag.name;
+            retainWhere(value.props, prop => {
+              return (
+                prop.kind === 'JsxSpreadAttribute' ||
+                (!isKnownEventHandler(tag, prop.name) && prop.name !== 'ref')
+              );
+            });
+          }
+          break;
+        }
+        case 'Destructure': {
+          if (inlinedState.has(value.value.identifier.id)) {
+            // Canonical check is part of determining if state can inline, this is for TS
+            CompilerError.invariant(
+              value.lvalue.pattern.kind === 'ArrayPattern' &&
+                value.lvalue.pattern.items.length >= 1 &&
+                value.lvalue.pattern.items[0].kind === 'Identifier',
+              {
+                reason:
+                  'Expected a valid destructuring pattern for inlined state',
+                message: 'Expected a valid destructuring pattern',
+                loc: value.loc,
+              },
+            );
+            const store: StoreLocal = {
+              kind: 'StoreLocal',
+              loc: value.loc,
+              type: null,
+              lvalue: {
+                kind: value.lvalue.kind,
+                place: value.lvalue.pattern.items[0],
+              },
+              value: value.value,
+            };
+            instr.value = store;
+          }
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const calleee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          const hookKind = getHookKind(fn.env, calleee.identifier);
+          switch (hookKind) {
+            case 'useEffectEvent': {
+              if (
+                value.args.length === 1 &&
+                value.args[0].kind === 'Identifier'
+              ) {
+                const load: LoadLocal = {
+                  kind: 'LoadLocal',
+                  place: value.args[0],
+                  loc: value.loc,
+                };
+                instr.value = load;
+              }
+              break;
+            }
+            case 'useEffect':
+            case 'useLayoutEffect':
+            case 'useInsertionEffect': {
+              // Drop effects
+              instr.value = {
+                kind: 'Primitive',
+                value: undefined,
+                loc: value.loc,
+              };
+              break;
+            }
+            case 'useReducer':
+            case 'useState': {
+              const replace = inlinedState.get(instr.lvalue.identifier.id);
+              if (replace != null) {
+                instr.value = replace;
+              }
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function hasKnownNonRenderCall(fn: HIRFunction): boolean {
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'CallExpression' &&
+        (isSetStateType(instr.value.callee.identifier) ||
+          isStartTransitionType(instr.value.callee.identifier))
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+const EVENT_HANDLER_PATTERN = /^on[A-Z]/;
+function isKnownEventHandler(_tag: string, prop: string): boolean {
+  return EVENT_HANDLER_PATTERN.test(prop);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizePropsMethodCalls.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizePropsMethodCalls.ts
new file mode 100644
index 00000000000..ab686ca2193
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizePropsMethodCalls.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {HIRFunction, isPropsType} from '../HIR';
+
+/**
+ * Converts method calls into regular calls where the receiver is the props object:
+ *
+ * Example:
+ *
+ * ```
+ * // INPUT
+ * props.foo();
+ *
+ * // OUTPUT
+ * const t0 = props.foo;
+ * t0();
+ * ```
+ *
+ * Counter example:
+ *
+ * Here the receiver is `props.foo`, not the props object, so we don't rewrite it:
+ *
+ * // INPUT
+ * props.foo.bar();
+ *
+ * // OUTPUT
+ * props.foo.bar();
+ * ```
+ */
+export function optimizePropsMethodCalls(fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    for (let i = 0; i < block.instructions.length; i++) {
+      const instr = block.instructions[i]!;
+      if (
+        instr.value.kind === 'MethodCall' &&
+        isPropsType(instr.value.receiver.identifier)
+      ) {
+        instr.value = {
+          kind: 'CallExpression',
+          callee: instr.value.property,
+          args: instr.value.args,
+          loc: instr.value.loc,
+        };
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineFunctions.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineFunctions.ts
new file mode 100644
index 00000000000..6ab0a811ff5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineFunctions.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {HIRFunction, IdentifierId} from '../HIR';
+
+export function outlineFunctions(
+  fn: HIRFunction,
+  fbtOperands: Set<IdentifierId>,
+): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const {value, lvalue} = instr;
+
+      if (
+        value.kind === 'FunctionExpression' ||
+        value.kind === 'ObjectMethod'
+      ) {
+        // Recurse in case there are inner functions which can be outlined
+        outlineFunctions(value.loweredFunc.func, fbtOperands);
+      }
+      if (
+        value.kind === 'FunctionExpression' &&
+        value.loweredFunc.func.context.length === 0 &&
+        // TODO: handle outlining named functions
+        value.loweredFunc.func.id === null &&
+        !fbtOperands.has(lvalue.identifier.id)
+      ) {
+        const loweredFunc = value.loweredFunc.func;
+
+        const id = fn.env.generateGloballyUniqueIdentifierName(
+          loweredFunc.id ?? loweredFunc.nameHint,
+        );
+        loweredFunc.id = id.value;
+
+        fn.env.outlineFunction(loweredFunc, null);
+        instr.value = {
+          kind: 'LoadGlobal',
+          binding: {
+            kind: 'Global',
+            name: id.value,
+          },
+          loc: value.loc,
+        };
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts
new file mode 100644
index 00000000000..a38256896b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts
@@ -0,0 +1,528 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import invariant from 'invariant';
+import {Environment} from '../HIR';
+import {
+  BasicBlock,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  InstructionId,
+  InstructionKind,
+  JsxAttribute,
+  JsxExpression,
+  LoadGlobal,
+  makeBlockId,
+  makeIdentifierName,
+  makeInstructionId,
+  ObjectProperty,
+  Place,
+  promoteTemporary,
+  promoteTemporaryJsxTag,
+} from '../HIR/HIR';
+import {createTemporaryPlace} from '../HIR/HIRBuilder';
+import {printIdentifier} from '../HIR/PrintHIR';
+import {deadCodeElimination} from './DeadCodeElimination';
+import {assertExhaustive} from '../Utils/utils';
+
+export function outlineJSX(fn: HIRFunction): void {
+  const outlinedFns: Array<HIRFunction> = [];
+  outlineJsxImpl(fn, outlinedFns);
+
+  for (const outlinedFn of outlinedFns) {
+    fn.env.outlineFunction(outlinedFn, 'Component');
+  }
+}
+
+type JsxInstruction = Instruction & {value: JsxExpression};
+type LoadGlobalInstruction = Instruction & {value: LoadGlobal};
+type LoadGlobalMap = Map<IdentifierId, LoadGlobalInstruction>;
+
+type State = {
+  jsx: Array<JsxInstruction>;
+  children: Set<IdentifierId>;
+};
+
+function outlineJsxImpl(
+  fn: HIRFunction,
+  outlinedFns: Array<HIRFunction>,
+): void {
+  const globals: LoadGlobalMap = new Map();
+
+  function processAndOutlineJSX(
+    state: State,
+    rewriteInstr: Map<InstructionId, Array<Instruction>>,
+  ): void {
+    if (state.jsx.length <= 1) {
+      return;
+    }
+    const result = process(
+      fn,
+      [...state.jsx].sort((a, b) => a.id - b.id),
+      globals,
+    );
+    if (result) {
+      outlinedFns.push(result.fn);
+      rewriteInstr.set(state.jsx.at(0)!.id, result.instrs);
+    }
+  }
+
+  for (const [, block] of fn.body.blocks) {
+    const rewriteInstr = new Map();
+    let state: State = {
+      jsx: [],
+      children: new Set(),
+    };
+
+    for (let i = block.instructions.length - 1; i >= 0; i--) {
+      const instr = block.instructions[i];
+      const {value, lvalue} = instr;
+      switch (value.kind) {
+        case 'LoadGlobal': {
+          globals.set(lvalue.identifier.id, instr as LoadGlobalInstruction);
+          break;
+        }
+        case 'FunctionExpression': {
+          outlineJsxImpl(value.loweredFunc.func, outlinedFns);
+          break;
+        }
+
+        case 'JsxExpression': {
+          if (!state.children.has(lvalue.identifier.id)) {
+            processAndOutlineJSX(state, rewriteInstr);
+
+            state = {
+              jsx: [],
+              children: new Set(),
+            };
+          }
+          state.jsx.push(instr as JsxInstruction);
+          if (value.children) {
+            for (const child of value.children) {
+              state.children.add(child.identifier.id);
+            }
+          }
+          break;
+        }
+        case 'ArrayExpression':
+        case 'Await':
+        case 'BinaryExpression':
+        case 'CallExpression':
+        case 'ComputedDelete':
+        case 'ComputedLoad':
+        case 'ComputedStore':
+        case 'Debugger':
+        case 'DeclareContext':
+        case 'DeclareLocal':
+        case 'Destructure':
+        case 'FinishMemoize':
+        case 'GetIterator':
+        case 'IteratorNext':
+        case 'JSXText':
+        case 'JsxFragment':
+        case 'LoadContext':
+        case 'LoadLocal':
+        case 'MetaProperty':
+        case 'MethodCall':
+        case 'NewExpression':
+        case 'NextPropertyOf':
+        case 'ObjectExpression':
+        case 'ObjectMethod':
+        case 'PostfixUpdate':
+        case 'PrefixUpdate':
+        case 'Primitive':
+        case 'PropertyDelete':
+        case 'PropertyLoad':
+        case 'PropertyStore':
+        case 'RegExpLiteral':
+        case 'StartMemoize':
+        case 'StoreContext':
+        case 'StoreGlobal':
+        case 'StoreLocal':
+        case 'TaggedTemplateExpression':
+        case 'TemplateLiteral':
+        case 'TypeCastExpression':
+        case 'UnsupportedNode':
+        case 'UnaryExpression': {
+          break;
+        }
+        default: {
+          assertExhaustive(value, `Unexpected instruction: ${value}`);
+        }
+      }
+    }
+    processAndOutlineJSX(state, rewriteInstr);
+
+    if (rewriteInstr.size > 0) {
+      const newInstrs = [];
+      for (let i = 0; i < block.instructions.length; i++) {
+        // InstructionId's are one-indexed, so add one to account for them.
+        const id = i + 1;
+        if (rewriteInstr.has(id)) {
+          const instrs = rewriteInstr.get(id);
+          newInstrs.push(...instrs);
+        } else {
+          newInstrs.push(block.instructions[i]);
+        }
+      }
+      block.instructions = newInstrs;
+    }
+    deadCodeElimination(fn);
+  }
+}
+
+type OutlinedResult = {
+  instrs: Array<Instruction>;
+  fn: HIRFunction;
+};
+
+function process(
+  fn: HIRFunction,
+  jsx: Array<JsxInstruction>,
+  globals: LoadGlobalMap,
+): OutlinedResult | null {
+  /**
+   * In the future, add a check for backedge to outline jsx inside loops in a
+   * top level component. For now, only outline jsx in callbacks.
+   */
+  if (fn.fnType === 'Component') {
+    return null;
+  }
+
+  const props = collectProps(fn.env, jsx);
+  if (!props) return null;
+
+  const outlinedTag = fn.env.generateGloballyUniqueIdentifierName(null).value;
+  const newInstrs = emitOutlinedJsx(fn.env, jsx, props, outlinedTag);
+  if (!newInstrs) return null;
+
+  const outlinedFn = emitOutlinedFn(fn.env, jsx, props, globals);
+  if (!outlinedFn) return null;
+  outlinedFn.id = outlinedTag;
+
+  return {instrs: newInstrs, fn: outlinedFn};
+}
+
+type OutlinedJsxAttribute = {
+  originalName: string;
+  newName: string;
+  place: Place;
+};
+
+function collectProps(
+  env: Environment,
+  instructions: Array<JsxInstruction>,
+): Array<OutlinedJsxAttribute> | null {
+  let id = 1;
+
+  function generateName(oldName: string): string {
+    let newName = oldName;
+    while (seen.has(newName)) {
+      newName = `${oldName}${id++}`;
+    }
+    seen.add(newName);
+    env.programContext.addNewReference(newName);
+    return newName;
+  }
+
+  const attributes: Array<OutlinedJsxAttribute> = [];
+  const jsxIds = new Set(instructions.map(i => i.lvalue.identifier.id));
+  const seen: Set<string> = new Set();
+
+  for (const instr of instructions) {
+    const {value} = instr;
+
+    for (const at of value.props) {
+      if (at.kind === 'JsxSpreadAttribute') {
+        return null;
+      }
+
+      if (at.kind === 'JsxAttribute') {
+        const newName = generateName(at.name);
+        attributes.push({
+          originalName: at.name,
+          newName,
+          place: at.place,
+        });
+      }
+    }
+
+    if (value.children) {
+      for (const child of value.children) {
+        if (jsxIds.has(child.identifier.id)) {
+          continue;
+        }
+
+        promoteTemporary(child.identifier);
+        const newName = generateName('t');
+        attributes.push({
+          originalName: child.identifier.name!.value,
+          newName: newName,
+          place: child,
+        });
+      }
+    }
+  }
+  return attributes;
+}
+
+function emitOutlinedJsx(
+  env: Environment,
+  instructions: Array<Instruction>,
+  outlinedProps: Array<OutlinedJsxAttribute>,
+  outlinedTag: string,
+): Array<Instruction> {
+  const props: Array<JsxAttribute> = outlinedProps.map(p => ({
+    kind: 'JsxAttribute',
+    name: p.newName,
+    place: p.place,
+  }));
+
+  const loadJsx: Instruction = {
+    id: makeInstructionId(0),
+    loc: GeneratedSource,
+    lvalue: createTemporaryPlace(env, GeneratedSource),
+    value: {
+      kind: 'LoadGlobal',
+      binding: {
+        kind: 'ModuleLocal',
+        name: outlinedTag,
+      },
+      loc: GeneratedSource,
+    },
+    effects: null,
+  };
+  promoteTemporaryJsxTag(loadJsx.lvalue.identifier);
+  const jsxExpr: Instruction = {
+    id: makeInstructionId(0),
+    loc: GeneratedSource,
+    lvalue: instructions.at(-1)!.lvalue,
+    value: {
+      kind: 'JsxExpression',
+      tag: {...loadJsx.lvalue},
+      props,
+      children: null,
+      loc: GeneratedSource,
+      openingLoc: GeneratedSource,
+      closingLoc: GeneratedSource,
+    },
+    effects: null,
+  };
+
+  return [loadJsx, jsxExpr];
+}
+
+function emitOutlinedFn(
+  env: Environment,
+  jsx: Array<JsxInstruction>,
+  oldProps: Array<OutlinedJsxAttribute>,
+  globals: LoadGlobalMap,
+): HIRFunction | null {
+  const instructions: Array<Instruction> = [];
+  const oldToNewProps = createOldToNewPropsMapping(env, oldProps);
+
+  const propsObj: Place = createTemporaryPlace(env, GeneratedSource);
+  promoteTemporary(propsObj.identifier);
+
+  const destructurePropsInstr = emitDestructureProps(
+    env,
+    propsObj,
+    oldToNewProps,
+  );
+  instructions.push(destructurePropsInstr);
+
+  const updatedJsxInstructions = emitUpdatedJsx(jsx, oldToNewProps);
+  const loadGlobalInstrs = emitLoadGlobals(jsx, globals);
+  if (!loadGlobalInstrs) {
+    return null;
+  }
+  instructions.push(...loadGlobalInstrs);
+  instructions.push(...updatedJsxInstructions);
+
+  const block: BasicBlock = {
+    kind: 'block',
+    id: makeBlockId(0),
+    instructions,
+    terminal: {
+      id: makeInstructionId(0),
+      kind: 'return',
+      returnVariant: 'Explicit',
+      loc: GeneratedSource,
+      value: instructions.at(-1)!.lvalue,
+      effects: null,
+    },
+    preds: new Set(),
+    phis: new Set(),
+  };
+
+  const fn: HIRFunction = {
+    loc: GeneratedSource,
+    id: null,
+    nameHint: null,
+    fnType: 'Other',
+    env,
+    params: [propsObj],
+    returnTypeAnnotation: null,
+    returns: createTemporaryPlace(env, GeneratedSource),
+    context: [],
+    body: {
+      entry: block.id,
+      blocks: new Map([[block.id, block]]),
+    },
+    generator: false,
+    async: false,
+    directives: [],
+    aliasingEffects: [],
+  };
+  return fn;
+}
+
+function emitLoadGlobals(
+  jsx: Array<JsxInstruction>,
+  globals: LoadGlobalMap,
+): Array<Instruction> | null {
+  const instructions: Array<Instruction> = [];
+  for (const {value} of jsx) {
+    // Add load globals instructions for jsx tags
+    if (value.tag.kind === 'Identifier') {
+      const loadGlobalInstr = globals.get(value.tag.identifier.id);
+      if (!loadGlobalInstr) {
+        return null;
+      }
+      instructions.push(loadGlobalInstr);
+    }
+  }
+
+  return instructions;
+}
+
+function emitUpdatedJsx(
+  jsx: Array<JsxInstruction>,
+  oldToNewProps: Map<IdentifierId, OutlinedJsxAttribute>,
+): Array<JsxInstruction> {
+  const newInstrs: Array<JsxInstruction> = [];
+  const jsxIds = new Set(jsx.map(i => i.lvalue.identifier.id));
+
+  for (const instr of jsx) {
+    const {value} = instr;
+    const newProps: Array<JsxAttribute> = [];
+    // Update old props references to use the newly destructured props param
+    for (const prop of value.props) {
+      invariant(
+        prop.kind === 'JsxAttribute',
+        `Expected only attributes but found ${prop.kind}`,
+      );
+      if (prop.name === 'key') {
+        continue;
+      }
+      const newProp = oldToNewProps.get(prop.place.identifier.id);
+      invariant(
+        newProp !== undefined,
+        `Expected a new property for ${printIdentifier(prop.place.identifier)}`,
+      );
+      newProps.push({
+        kind: 'JsxAttribute',
+        name: newProp.originalName,
+        place: newProp.place,
+      });
+    }
+
+    let newChildren: Array<Place> | null = null;
+    if (value.children) {
+      newChildren = [];
+      for (const child of value.children) {
+        if (jsxIds.has(child.identifier.id)) {
+          newChildren.push({...child});
+          continue;
+        }
+
+        const newChild = oldToNewProps.get(child.identifier.id);
+        invariant(
+          newChild !== undefined,
+          `Expected a new prop for ${printIdentifier(child.identifier)}`,
+        );
+        newChildren.push({...newChild.place});
+      }
+    }
+
+    newInstrs.push({
+      ...instr,
+      value: {
+        ...value,
+        props: newProps,
+        children: newChildren,
+      },
+    });
+  }
+
+  return newInstrs;
+}
+
+function createOldToNewPropsMapping(
+  env: Environment,
+  oldProps: Array<OutlinedJsxAttribute>,
+): Map<IdentifierId, OutlinedJsxAttribute> {
+  const oldToNewProps = new Map();
+
+  for (const oldProp of oldProps) {
+    // Do not read key prop in the outlined component
+    if (oldProp.originalName === 'key') {
+      continue;
+    }
+
+    const newProp: OutlinedJsxAttribute = {
+      ...oldProp,
+      place: createTemporaryPlace(env, GeneratedSource),
+    };
+    newProp.place.identifier.name = makeIdentifierName(oldProp.newName);
+    oldToNewProps.set(oldProp.place.identifier.id, newProp);
+  }
+
+  return oldToNewProps;
+}
+
+function emitDestructureProps(
+  env: Environment,
+  propsObj: Place,
+  oldToNewProps: Map<IdentifierId, OutlinedJsxAttribute>,
+): Instruction {
+  const properties: Array<ObjectProperty> = [];
+  for (const [_, prop] of oldToNewProps) {
+    properties.push({
+      kind: 'ObjectProperty',
+      key: {
+        kind: 'string',
+        name: prop.newName,
+      },
+      type: 'property',
+      place: prop.place,
+    });
+  }
+
+  const destructurePropsInstr: Instruction = {
+    id: makeInstructionId(0),
+    lvalue: createTemporaryPlace(env, GeneratedSource),
+    loc: GeneratedSource,
+    value: {
+      kind: 'Destructure',
+      lvalue: {
+        pattern: {
+          kind: 'ObjectPattern',
+          properties,
+          loc: GeneratedSource,
+        },
+        kind: InstructionKind.Let,
+      },
+      loc: GeneratedSource,
+      value: propsObj,
+    },
+    effects: null,
+  };
+  return destructurePropsInstr;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/PruneMaybeThrows.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/PruneMaybeThrows.ts
new file mode 100644
index 00000000000..5f934c145ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/PruneMaybeThrows.ts
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  BlockId,
+  GeneratedSource,
+  GotoVariant,
+  HIRFunction,
+  Instruction,
+  assertConsistentIdentifiers,
+  assertTerminalSuccessorsExist,
+  mergeConsecutiveBlocks,
+  reversePostorderBlocks,
+} from '../HIR';
+import {
+  markInstructionIds,
+  removeDeadDoWhileStatements,
+  removeUnnecessaryTryCatch,
+  removeUnreachableForUpdates,
+} from '../HIR/HIRBuilder';
+import {printPlace} from '../HIR/PrintHIR';
+
+/*
+ * This pass prunes `maybe-throw` terminals for blocks that can provably *never* throw.
+ * For now this is very conservative, and only affects blocks with primitives or
+ * array/object literals. Even a variable reference could throw bc of the TDZ.
+ */
+export function pruneMaybeThrows(fn: HIRFunction): void {
+  const terminalMapping = pruneMaybeThrowsImpl(fn);
+  if (terminalMapping) {
+    /*
+     * If terminals have changed then blocks may have become newly unreachable.
+     * Re-run minification of the graph (incl reordering instruction ids)
+     */
+    reversePostorderBlocks(fn.body);
+    removeUnreachableForUpdates(fn.body);
+    removeDeadDoWhileStatements(fn.body);
+    removeUnnecessaryTryCatch(fn.body);
+    markInstructionIds(fn.body);
+    mergeConsecutiveBlocks(fn);
+
+    // Rewrite phi operands to reference the updated predecessor blocks
+    for (const [, block] of fn.body.blocks) {
+      for (const phi of block.phis) {
+        for (const [predecessor, operand] of phi.operands) {
+          if (!block.preds.has(predecessor)) {
+            const mappedTerminal = terminalMapping.get(predecessor);
+            CompilerError.invariant(mappedTerminal != null, {
+              reason: `Expected non-existing phi operand's predecessor to have been mapped to a new terminal`,
+              description: `Could not find mapping for predecessor bb${predecessor} in block bb${
+                block.id
+              } for phi ${printPlace(phi.place)}`,
+              loc: GeneratedSource,
+            });
+            phi.operands.delete(predecessor);
+            phi.operands.set(mappedTerminal, operand);
+          }
+        }
+      }
+    }
+
+    assertConsistentIdentifiers(fn);
+    assertTerminalSuccessorsExist(fn);
+  }
+}
+
+function pruneMaybeThrowsImpl(fn: HIRFunction): Map<BlockId, BlockId> | null {
+  const terminalMapping = new Map<BlockId, BlockId>();
+  for (const [_, block] of fn.body.blocks) {
+    const terminal = block.terminal;
+    if (terminal.kind !== 'maybe-throw') {
+      continue;
+    }
+    const canThrow = block.instructions.some(instr =>
+      instructionMayThrow(instr),
+    );
+    if (!canThrow) {
+      const source = terminalMapping.get(block.id) ?? block.id;
+      terminalMapping.set(terminal.continuation, source);
+      block.terminal = {
+        kind: 'goto',
+        block: terminal.continuation,
+        variant: GotoVariant.Break,
+        id: terminal.id,
+        loc: terminal.loc,
+      };
+    }
+  }
+  return terminalMapping.size > 0 ? terminalMapping : null;
+}
+
+function instructionMayThrow(instr: Instruction): boolean {
+  switch (instr.value.kind) {
+    case 'Primitive':
+    case 'ArrayExpression':
+    case 'ObjectExpression': {
+      return false;
+    }
+    default: {
+      return true;
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/index.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/index.ts
new file mode 100644
index 00000000000..bb060b8dc28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {constantPropagation} from './ConstantPropagation';
+export {deadCodeElimination} from './DeadCodeElimination';
+export {pruneMaybeThrows} from './PruneMaybeThrows';
+export {inlineJsxTransform} from './InlineJsxTransform';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignMethodCallScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignMethodCallScopes.ts
new file mode 100644
index 00000000000..9c72f24b0f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignMethodCallScopes.ts
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  HIRFunction,
+  IdentifierId,
+  ReactiveScope,
+  makeInstructionId,
+} from '../HIR';
+import DisjointSet from '../Utils/DisjointSet';
+
+/**
+ * Ensures that method call instructions have scopes such that either:
+ * - Both the MethodCall and its property have the same scope
+ * - OR neither has a scope
+ */
+export function alignMethodCallScopes(fn: HIRFunction): void {
+  const scopeMapping = new Map<IdentifierId, ReactiveScope | null>();
+  const mergedScopes = new DisjointSet<ReactiveScope>();
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      if (value.kind === 'MethodCall') {
+        const lvalueScope = lvalue.identifier.scope;
+        const propertyScope = value.property.identifier.scope;
+        if (lvalueScope !== null) {
+          if (propertyScope !== null) {
+            // Both have a scope: merge the scopes
+            mergedScopes.union([lvalueScope, propertyScope]);
+          } else {
+            /*
+             * Else the call itself has a scope but not the property,
+             * record that this property should be in this scope
+             */
+            scopeMapping.set(value.property.identifier.id, lvalueScope);
+          }
+        } else if (propertyScope !== null) {
+          // else this property does not need a scope
+          scopeMapping.set(value.property.identifier.id, null);
+        }
+      } else if (
+        value.kind === 'FunctionExpression' ||
+        value.kind === 'ObjectMethod'
+      ) {
+        alignMethodCallScopes(value.loweredFunc.func);
+      }
+    }
+  }
+
+  mergedScopes.forEach((scope, root) => {
+    if (scope === root) {
+      return;
+    }
+    root.range.start = makeInstructionId(
+      Math.min(scope.range.start, root.range.start),
+    );
+    root.range.end = makeInstructionId(
+      Math.max(scope.range.end, root.range.end),
+    );
+  });
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const mappedScope = scopeMapping.get(instr.lvalue.identifier.id);
+      if (mappedScope !== undefined) {
+        instr.lvalue.identifier.scope = mappedScope;
+      } else if (instr.lvalue.identifier.scope !== null) {
+        const mergedScope = mergedScopes.find(instr.lvalue.identifier.scope);
+        if (mergedScope != null) {
+          instr.lvalue.identifier.scope = mergedScope;
+        }
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignObjectMethodScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignObjectMethodScopes.ts
new file mode 100644
index 00000000000..317168f9868
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignObjectMethodScopes.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  ReactiveScope,
+  makeInstructionId,
+} from '../HIR';
+import {eachInstructionValueOperand} from '../HIR/visitors';
+import DisjointSet from '../Utils/DisjointSet';
+
+/**
+ * Align scopes of object method values to that of their enclosing object expressions.
+ * To produce a well-formed JS program in Codegen, object methods and object expressions
+ * must be in the same ReactiveBlock as object method definitions must be inlined.
+ */
+
+function findScopesToMerge(fn: HIRFunction): DisjointSet<ReactiveScope> {
+  const objectMethodDecls: Set<Identifier> = new Set();
+  const mergeScopesBuilder = new DisjointSet<ReactiveScope>();
+
+  for (const [_, block] of fn.body.blocks) {
+    for (const {lvalue, value} of block.instructions) {
+      if (value.kind === 'ObjectMethod') {
+        objectMethodDecls.add(lvalue.identifier);
+      } else if (value.kind === 'ObjectExpression') {
+        for (const operand of eachInstructionValueOperand(value)) {
+          if (objectMethodDecls.has(operand.identifier)) {
+            const operandScope = operand.identifier.scope;
+            const lvalueScope = lvalue.identifier.scope;
+
+            CompilerError.invariant(
+              operandScope != null && lvalueScope != null,
+              {
+                reason:
+                  'Internal error: Expected all ObjectExpressions and ObjectMethods to have non-null scope.',
+                loc: GeneratedSource,
+              },
+            );
+            mergeScopesBuilder.union([operandScope, lvalueScope]);
+          }
+        }
+      }
+    }
+  }
+  return mergeScopesBuilder;
+}
+
+export function alignObjectMethodScopes(fn: HIRFunction): void {
+  // Handle inner functions: we assume that Scopes are disjoint across functions
+  for (const [_, block] of fn.body.blocks) {
+    for (const {value} of block.instructions) {
+      if (
+        value.kind === 'ObjectMethod' ||
+        value.kind === 'FunctionExpression'
+      ) {
+        alignObjectMethodScopes(value.loweredFunc.func);
+      }
+    }
+  }
+
+  const scopeGroupsMap = findScopesToMerge(fn).canonicalize();
+  /**
+   * Step 1: Merge affected scopes to their canonical root.
+   */
+  for (const [scope, root] of scopeGroupsMap) {
+    if (scope !== root) {
+      root.range.start = makeInstructionId(
+        Math.min(scope.range.start, root.range.start),
+      );
+      root.range.end = makeInstructionId(
+        Math.max(scope.range.end, root.range.end),
+      );
+    }
+  }
+
+  /**
+   * Step 2: Repoint identifiers whose scopes were merged.
+   */
+  for (const [_, block] of fn.body.blocks) {
+    for (const {
+      lvalue: {identifier},
+    } of block.instructions) {
+      if (identifier.scope != null) {
+        const root = scopeGroupsMap.get(identifier.scope);
+        if (root != null) {
+          identifier.scope = root;
+        }
+        // otherwise, this identifier's scope was not affected by this pass
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts
new file mode 100644
index 00000000000..e440340bd29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts
@@ -0,0 +1,321 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  BlockId,
+  HIRFunction,
+  InstructionId,
+  MutableRange,
+  Place,
+  ReactiveScope,
+  getPlaceScope,
+  makeInstructionId,
+} from '../HIR/HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+  mapTerminalSuccessors,
+  terminalFallthrough,
+} from '../HIR/visitors';
+import {retainWhere_Set} from '../Utils/utils';
+
+type InstructionRange = MutableRange;
+/*
+ * Note: this is the 2nd of 4 passes that determine how to break a function into discrete
+ * reactive scopes (independently memoizeable units of code):
+ * 1. InferReactiveScopeVariables (on HIR) determines operands that mutate together and assigns
+ *     them a unique reactive scope.
+ * 2. AlignReactiveScopesToBlockScopes (this pass, on ReactiveFunction) aligns reactive scopes
+ *     to block scopes.
+ * 3. MergeOverlappingReactiveScopes (on ReactiveFunction) ensures that reactive scopes do not
+ *     overlap, merging any such scopes.
+ * 4. BuildReactiveBlocks (on ReactiveFunction) groups the statements for each scope into
+ *     a ReactiveScopeBlock.
+ *
+ * Prior inference passes assign a reactive scope to each operand, but the ranges of these
+ * scopes are based on specific instructions at arbitrary points in the control-flow graph.
+ * However, to codegen blocks around the instructions in each scope, the scopes must be
+ * aligned to block-scope boundaries - we can't memoize half of a loop!
+ *
+ * This pass updates reactive scope boundaries to align to control flow boundaries, for
+ * example:
+ *
+ * ```javascript
+ * function foo(cond, a) {
+ *                     ⌵ original scope
+ *                          ⌵ expanded scope
+ *    const x = [];    ⌝    ⌝
+ *    if (cond) {      ⎮    ⎮
+ *      ...            ⎮    ⎮
+ *      x.push(a);     ⌟    ⎮
+ *      ...                 ⎮
+ *    }                     ⌟
+ * }
+ * ```
+ *
+ * Here the original scope for `x` ended partway through the if consequent, but we can't
+ * memoize part of that block. This pass would align the scope to the end of the consequent.
+ *
+ * The more general rule is that a reactive scope may only end at the same block scope as it
+ * began: this pass therefore finds, for each scope, the block where that scope started and
+ * finds the first instruction after the scope's mutable range in that same block scope (which
+ * will be the updated end for that scope).
+ */
+export function alignReactiveScopesToBlockScopesHIR(fn: HIRFunction): void {
+  const activeBlockFallthroughRanges: Array<{
+    range: InstructionRange;
+    fallthrough: BlockId;
+  }> = [];
+  const activeScopes = new Set<ReactiveScope>();
+  const seen = new Set<ReactiveScope>();
+  const valueBlockNodes = new Map<BlockId, ValueBlockNode>();
+  const placeScopes = new Map<Place, ReactiveScope>();
+
+  function recordPlace(
+    id: InstructionId,
+    place: Place,
+    node: ValueBlockNode | null,
+  ): void {
+    if (place.identifier.scope !== null) {
+      placeScopes.set(place, place.identifier.scope);
+    }
+
+    const scope = getPlaceScope(id, place);
+    if (scope == null) {
+      return;
+    }
+    activeScopes.add(scope);
+    node?.children.push({kind: 'scope', scope, id});
+
+    if (seen.has(scope)) {
+      return;
+    }
+    seen.add(scope);
+    if (node != null && node.valueRange !== null) {
+      scope.range.start = makeInstructionId(
+        Math.min(node.valueRange.start, scope.range.start),
+      );
+      scope.range.end = makeInstructionId(
+        Math.max(node.valueRange.end, scope.range.end),
+      );
+    }
+  }
+
+  for (const [, block] of fn.body.blocks) {
+    const startingId = block.instructions[0]?.id ?? block.terminal.id;
+    retainWhere_Set(activeScopes, scope => scope.range.end > startingId);
+    const top = activeBlockFallthroughRanges.at(-1);
+    if (top?.fallthrough === block.id) {
+      activeBlockFallthroughRanges.pop();
+      /*
+       * All active scopes must have either started before or within the last
+       * block-fallthrough range. In either case, they overlap this block-
+       * fallthrough range and can have their ranges extended.
+       */
+      for (const scope of activeScopes) {
+        scope.range.start = makeInstructionId(
+          Math.min(scope.range.start, top.range.start),
+        );
+      }
+    }
+
+    const {instructions, terminal} = block;
+    const node = valueBlockNodes.get(block.id) ?? null;
+    for (const instr of instructions) {
+      for (const lvalue of eachInstructionLValue(instr)) {
+        recordPlace(instr.id, lvalue, node);
+      }
+      for (const operand of eachInstructionValueOperand(instr.value)) {
+        recordPlace(instr.id, operand, node);
+      }
+    }
+    for (const operand of eachTerminalOperand(terminal)) {
+      recordPlace(terminal.id, operand, node);
+    }
+
+    const fallthrough = terminalFallthrough(terminal);
+    if (fallthrough !== null && terminal.kind !== 'branch') {
+      /*
+       * Any currently active scopes that overlaps the block-fallthrough range
+       * need their range extended to at least the first instruction of the
+       * fallthrough
+       */
+      const fallthroughBlock = fn.body.blocks.get(fallthrough)!;
+      const nextId =
+        fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
+      for (const scope of activeScopes) {
+        if (scope.range.end > terminal.id) {
+          scope.range.end = makeInstructionId(
+            Math.max(scope.range.end, nextId),
+          );
+        }
+      }
+      /**
+       * We also record the block-fallthrough range for future scopes that begin
+       * within the range (and overlap with the range end).
+       */
+      activeBlockFallthroughRanges.push({
+        fallthrough,
+        range: {
+          start: terminal.id,
+          end: nextId,
+        },
+      });
+
+      CompilerError.invariant(!valueBlockNodes.has(fallthrough), {
+        reason: 'Expect hir blocks to have unique fallthroughs',
+        loc: terminal.loc,
+      });
+      if (node != null) {
+        valueBlockNodes.set(fallthrough, node);
+      }
+    } else if (terminal.kind === 'goto') {
+      /**
+       * If we encounter a goto that is not to the natural fallthrough of the current
+       * block (not the topmost fallthrough on the stack), then this is a goto to a
+       * label. Any scopes that extend beyond the goto must be extended to include
+       * the labeled range, so that the break statement doesn't accidentally jump
+       * out of the scope. We do this by extending the start and end of the scope's
+       * range to the label and its fallthrough respectively.
+       */
+      const start = activeBlockFallthroughRanges.find(
+        range => range.fallthrough === terminal.block,
+      );
+      if (start != null && start !== activeBlockFallthroughRanges.at(-1)) {
+        const fallthroughBlock = fn.body.blocks.get(start.fallthrough)!;
+        const firstId =
+          fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
+        for (const scope of activeScopes) {
+          /**
+           * activeScopes is only filtered at block start points, so some of the
+           * scopes may not actually be active anymore, ie we've past their end
+           * instruction. Only extend ranges for scopes that are actually active.
+           *
+           * TODO: consider pruning activeScopes per instruction
+           */
+          if (scope.range.end <= terminal.id) {
+            continue;
+          }
+          scope.range.start = makeInstructionId(
+            Math.min(start.range.start, scope.range.start),
+          );
+          scope.range.end = makeInstructionId(
+            Math.max(firstId, scope.range.end),
+          );
+        }
+      }
+    }
+
+    /*
+     * Visit all successors (not just direct successors for control-flow ordering) to
+     * set a value block node where necessary to align the value block start/end
+     * back to the outer block scope.
+     *
+     * TODO: add a variant of eachTerminalSuccessor() that visits _all_ successors, not
+     * just those that are direct successors for normal control-flow ordering.
+     */
+    mapTerminalSuccessors(terminal, successor => {
+      if (valueBlockNodes.has(successor)) {
+        return successor;
+      }
+
+      const successorBlock = fn.body.blocks.get(successor)!;
+      if (successorBlock.kind === 'block' || successorBlock.kind === 'catch') {
+        /*
+         * we need the block kind check here because the do..while terminal's
+         * successor is a block, and try's successor is a catch block
+         */
+      } else if (
+        node == null ||
+        terminal.kind === 'ternary' ||
+        terminal.kind === 'logical' ||
+        terminal.kind === 'optional'
+      ) {
+        /**
+         * Create a new node whenever we transition from non-value -> value block.
+         *
+         * For compatibility with the previous ReactiveFunction-based scope merging logic,
+         * we also create new scope nodes for ternary, logical, and optional terminals.
+         * Inside value blocks we always store a range (valueRange) that is the
+         * start/end instruction ids at the nearest parent block scope level, so that
+         * scopes inside the value blocks can be extended to align with block scope
+         * instructions.
+         */
+        let valueRange: MutableRange;
+        if (node == null) {
+          // Transition from block->value block, derive the outer block range
+          CompilerError.invariant(fallthrough !== null, {
+            reason: `Expected a fallthrough for value block`,
+            loc: terminal.loc,
+          });
+          const fallthroughBlock = fn.body.blocks.get(fallthrough)!;
+          const nextId =
+            fallthroughBlock.instructions[0]?.id ??
+            fallthroughBlock.terminal.id;
+          valueRange = {
+            start: terminal.id,
+            end: nextId,
+          };
+        } else {
+          // else value->value transition, reuse the range
+          valueRange = node.valueRange;
+        }
+        const childNode: ValueBlockNode = {
+          kind: 'node',
+          id: terminal.id,
+          children: [],
+          valueRange,
+        };
+        node?.children.push(childNode);
+        valueBlockNodes.set(successor, childNode);
+      } else {
+        // this is a value -> value block transition, reuse the node
+        valueBlockNodes.set(successor, node);
+      }
+      return successor;
+    });
+  }
+}
+
+type ValueBlockNode = {
+  kind: 'node';
+  id: InstructionId;
+  valueRange: MutableRange;
+  children: Array<ValueBlockNode | ReactiveScopeNode>;
+};
+type ReactiveScopeNode = {
+  kind: 'scope';
+  id: InstructionId;
+  scope: ReactiveScope;
+};
+
+function _debug(node: ValueBlockNode): string {
+  const buf: Array<string> = [];
+  _printNode(node, buf, 0);
+  return buf.join('\n');
+}
+function _printNode(
+  node: ValueBlockNode | ReactiveScopeNode,
+  out: Array<string>,
+  depth: number = 0,
+): void {
+  let prefix = '  '.repeat(depth);
+  if (node.kind === 'scope') {
+    out.push(
+      `${prefix}[${node.id}] @${node.scope.id} [${node.scope.range.start}:${node.scope.range.end}]`,
+    );
+  } else {
+    let range = ` (range=[${node.valueRange.start}:${node.valueRange.end}])`;
+    out.push(`${prefix}[${node.id}] node${range} [`);
+    for (const child of node.children) {
+      _printNode(child, out, depth + 1);
+    }
+    out.push(`${prefix}]`);
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertScopeInstructionsWithinScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertScopeInstructionsWithinScope.ts
new file mode 100644
index 00000000000..07ad4b3e7e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertScopeInstructionsWithinScope.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {visitReactiveFunction} from '.';
+import {CompilerError} from '..';
+import {
+  InstructionId,
+  Place,
+  ReactiveFunction,
+  ReactiveScopeBlock,
+  ScopeId,
+} from '../HIR';
+import {getPlaceScope} from '../HIR/HIR';
+import {ReactiveFunctionVisitor} from './visitors';
+
+/*
+ * Internal validation pass that checks all the instructions involved in creating
+ * values for a given scope are within the corresponding ReactiveScopeBlock. Errors
+ * in HIR/ReactiveFunction structure and alias analysis could theoretically create
+ * a structure such as:
+ *
+ * Function
+ *    LabelTerminal
+ *     Instruction in scope 0
+ *    Instruction in scope 0
+ *
+ * Because ReactiveScopeBlocks are closed when their surrounding block ends, this
+ * structure would create reactive scopes as follows:
+ *
+ * Function
+ *    LabelTerminal
+ *      ReactiveScopeBlock scope=0
+ *        Instruction in scope 0
+ *    Instruction in scope 0
+ *
+ * This pass asserts we didn't accidentally end up with such a structure, as a guard
+ * against compiler coding mistakes in earlier passes.
+ */
+export function assertScopeInstructionsWithinScopes(
+  fn: ReactiveFunction,
+): void {
+  const existingScopes = new Set<ScopeId>();
+  visitReactiveFunction(fn, new FindAllScopesVisitor(), existingScopes);
+  visitReactiveFunction(
+    fn,
+    new CheckInstructionsAgainstScopesVisitor(),
+    existingScopes,
+  );
+}
+
+class FindAllScopesVisitor extends ReactiveFunctionVisitor<Set<ScopeId>> {
+  override visitScope(block: ReactiveScopeBlock, state: Set<ScopeId>): void {
+    this.traverseScope(block, state);
+    state.add(block.scope.id);
+  }
+}
+
+class CheckInstructionsAgainstScopesVisitor extends ReactiveFunctionVisitor<
+  Set<ScopeId>
+> {
+  activeScopes: Set<ScopeId> = new Set();
+
+  override visitPlace(
+    id: InstructionId,
+    place: Place,
+    state: Set<ScopeId>,
+  ): void {
+    const scope = getPlaceScope(id, place);
+    if (
+      scope !== null &&
+      // is there a scope for this at all, or did we end up pruning this scope?
+      state.has(scope.id) &&
+      /*
+       * if the scope exists somewhere, it must be active or else this is a straggler
+       * instruction
+       */
+      !this.activeScopes.has(scope.id)
+    ) {
+      CompilerError.invariant(false, {
+        reason:
+          'Encountered an instruction that should be part of a scope, but where that scope has already completed',
+        description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed`,
+        loc: place.loc,
+      });
+    }
+  }
+
+  override visitScope(block: ReactiveScopeBlock, state: Set<ScopeId>): void {
+    this.activeScopes.add(block.scope.id);
+    this.traverseScope(block, state);
+    this.activeScopes.delete(block.scope.id);
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertWellFormedBreakTargets.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertWellFormedBreakTargets.ts
new file mode 100644
index 00000000000..9ce9b2f4906
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertWellFormedBreakTargets.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {BlockId, ReactiveFunction, ReactiveTerminalStatement} from '../HIR';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+/**
+ * Assert that all break/continue targets reference existent labels.
+ */
+export function assertWellFormedBreakTargets(fn: ReactiveFunction): void {
+  visitReactiveFunction(fn, new Visitor(), new Set());
+}
+
+class Visitor extends ReactiveFunctionVisitor<Set<BlockId>> {
+  override visitTerminal(
+    stmt: ReactiveTerminalStatement,
+    seenLabels: Set<BlockId>,
+  ): void {
+    if (stmt.label != null) {
+      seenLabels.add(stmt.label.id);
+    }
+    const terminal = stmt.terminal;
+    if (terminal.kind === 'break' || terminal.kind === 'continue') {
+      CompilerError.invariant(seenLabels.has(terminal.target), {
+        reason: 'Unexpected break to invalid label',
+        loc: stmt.terminal.loc,
+      });
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
new file mode 100644
index 00000000000..c65ef1193fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
@@ -0,0 +1,1475 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  BasicBlock,
+  BlockId,
+  GeneratedSource,
+  GotoVariant,
+  HIR,
+  InstructionId,
+  Place,
+  ReactiveBlock,
+  SourceLocation,
+} from '../HIR';
+import {
+  HIRFunction,
+  ReactiveBreakTerminal,
+  ReactiveContinueTerminal,
+  ReactiveFunction,
+  ReactiveLogicalValue,
+  ReactiveSequenceValue,
+  ReactiveTerminalStatement,
+  ReactiveTerminalTargetKind,
+  ReactiveTernaryValue,
+  ReactiveValue,
+  Terminal,
+} from '../HIR/HIR';
+import {assertExhaustive} from '../Utils/utils';
+
+/*
+ * Converts from HIR (lower-level CFG) to ReactiveFunction, a tree representation
+ * that is closer to an AST. This pass restores the original control flow constructs,
+ * including break/continue to labeled statements. Note that this pass naively emits
+ * labels for *all* terminals: see PruneUnusedLabels which removes unnecessary labels.
+ */
+export function buildReactiveFunction(fn: HIRFunction): ReactiveFunction {
+  const cx = new Context(fn.body);
+  const driver = new Driver(cx);
+  const body = driver.traverseBlock(cx.block(fn.body.entry));
+  return {
+    loc: fn.loc,
+    id: fn.id,
+    nameHint: fn.nameHint,
+    params: fn.params,
+    generator: fn.generator,
+    async: fn.async,
+    body,
+    env: fn.env,
+    directives: fn.directives,
+  };
+}
+
+class Driver {
+  cx: Context;
+
+  constructor(cx: Context) {
+    this.cx = cx;
+  }
+
+  traverseBlock(block: BasicBlock): ReactiveBlock {
+    const blockValue: ReactiveBlock = [];
+    this.visitBlock(block, blockValue);
+    return blockValue;
+  }
+
+  visitBlock(block: BasicBlock, blockValue: ReactiveBlock): void {
+    CompilerError.invariant(!this.cx.emitted.has(block.id), {
+      reason: `Cannot emit the same block twice: bb${block.id}`,
+      loc: GeneratedSource,
+    });
+    this.cx.emitted.add(block.id);
+    for (const instruction of block.instructions) {
+      blockValue.push({
+        kind: 'instruction',
+        instruction,
+      });
+    }
+
+    const terminal = block.terminal;
+    const scheduleIds = [];
+    switch (terminal.kind) {
+      case 'return': {
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'return',
+            loc: terminal.loc,
+            value: terminal.value,
+            id: terminal.id,
+          },
+          label: null,
+        });
+        break;
+      }
+      case 'throw': {
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'throw',
+            loc: terminal.loc,
+            value: terminal.value,
+            id: terminal.id,
+          },
+          label: null,
+        });
+        break;
+      }
+      case 'if': {
+        const fallthroughId =
+          this.cx.reachable(terminal.fallthrough) &&
+          !this.cx.isScheduled(terminal.fallthrough)
+            ? terminal.fallthrough
+            : null;
+        const alternateId =
+          terminal.alternate !== terminal.fallthrough
+            ? terminal.alternate
+            : null;
+
+        if (fallthroughId !== null) {
+          const scheduleId = this.cx.schedule(fallthroughId, 'if');
+          scheduleIds.push(scheduleId);
+        }
+
+        let consequent: ReactiveBlock | null = null;
+        if (this.cx.isScheduled(terminal.consequent)) {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'if' where the consequent is already scheduled`,
+            loc: terminal.loc,
+          });
+        } else {
+          consequent = this.traverseBlock(
+            this.cx.ir.blocks.get(terminal.consequent)!,
+          );
+        }
+
+        let alternate: ReactiveBlock | null = null;
+        if (alternateId !== null) {
+          if (this.cx.isScheduled(alternateId)) {
+            CompilerError.invariant(false, {
+              reason: `Unexpected 'if' where the alternate is already scheduled`,
+              loc: terminal.loc,
+            });
+          } else {
+            alternate = this.traverseBlock(this.cx.ir.blocks.get(alternateId)!);
+          }
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'if',
+            loc: terminal.loc,
+            test: terminal.test,
+            consequent: consequent ?? this.emptyBlock(),
+            alternate: alternate,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null
+              ? null
+              : {
+                  id: fallthroughId,
+                  implicit: false,
+                },
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'switch': {
+        const fallthroughId =
+          this.cx.reachable(terminal.fallthrough) &&
+          !this.cx.isScheduled(terminal.fallthrough)
+            ? terminal.fallthrough
+            : null;
+        if (fallthroughId !== null) {
+          const scheduleId = this.cx.schedule(fallthroughId, 'switch');
+          scheduleIds.push(scheduleId);
+        }
+
+        const cases: Array<{
+          test: Place | null;
+          block: ReactiveBlock;
+        }> = [];
+        [...terminal.cases].reverse().forEach((case_, _index) => {
+          const test = case_.test;
+
+          let consequent: ReactiveBlock;
+          if (this.cx.isScheduled(case_.block)) {
+            CompilerError.invariant(case_.block === terminal.fallthrough, {
+              reason: `Unexpected 'switch' where a case is already scheduled and block is not the fallthrough`,
+              loc: terminal.loc,
+            });
+            return;
+          } else {
+            consequent = this.traverseBlock(
+              this.cx.ir.blocks.get(case_.block)!,
+            );
+            const scheduleId = this.cx.schedule(case_.block, 'case');
+            scheduleIds.push(scheduleId);
+          }
+          cases.push({test, block: consequent});
+        });
+        cases.reverse();
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'switch',
+            loc: terminal.loc,
+            test: terminal.test,
+            cases,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null
+              ? null
+              : {
+                  id: fallthroughId,
+                  implicit: false,
+                },
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'do-while': {
+        const fallthroughId = !this.cx.isScheduled(terminal.fallthrough)
+          ? terminal.fallthrough
+          : null;
+        const loopId =
+          !this.cx.isScheduled(terminal.loop) &&
+          terminal.loop !== terminal.fallthrough
+            ? terminal.loop
+            : null;
+        const scheduleId = this.cx.scheduleLoop(
+          terminal.fallthrough,
+          terminal.test,
+          terminal.loop,
+        );
+        scheduleIds.push(scheduleId);
+
+        let loopBody: ReactiveBlock;
+        if (loopId) {
+          loopBody = this.traverseBlock(this.cx.ir.blocks.get(loopId)!);
+        } else {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'do-while' where the loop is already scheduled`,
+            loc: terminal.loc,
+          });
+        }
+
+        const testValue = this.visitValueBlock(
+          terminal.test,
+          terminal.loc,
+        ).value;
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'do-while',
+            loc: terminal.loc,
+            test: testValue,
+            loop: loopBody,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null
+              ? null
+              : {
+                  id: fallthroughId,
+                  implicit: false,
+                },
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'while': {
+        const fallthroughId =
+          this.cx.reachable(terminal.fallthrough) &&
+          !this.cx.isScheduled(terminal.fallthrough)
+            ? terminal.fallthrough
+            : null;
+        const loopId =
+          !this.cx.isScheduled(terminal.loop) &&
+          terminal.loop !== terminal.fallthrough
+            ? terminal.loop
+            : null;
+        const scheduleId = this.cx.scheduleLoop(
+          terminal.fallthrough,
+          terminal.test,
+          terminal.loop,
+        );
+        scheduleIds.push(scheduleId);
+
+        const testValue = this.visitValueBlock(
+          terminal.test,
+          terminal.loc,
+        ).value;
+
+        let loopBody: ReactiveBlock;
+        if (loopId) {
+          loopBody = this.traverseBlock(this.cx.ir.blocks.get(loopId)!);
+        } else {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'while' where the loop is already scheduled`,
+            loc: terminal.loc,
+          });
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'while',
+            loc: terminal.loc,
+            test: testValue,
+            loop: loopBody,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null
+              ? null
+              : {
+                  id: fallthroughId,
+                  implicit: false,
+                },
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'for': {
+        const loopId =
+          !this.cx.isScheduled(terminal.loop) &&
+          terminal.loop !== terminal.fallthrough
+            ? terminal.loop
+            : null;
+
+        const fallthroughId = !this.cx.isScheduled(terminal.fallthrough)
+          ? terminal.fallthrough
+          : null;
+
+        const scheduleId = this.cx.scheduleLoop(
+          terminal.fallthrough,
+          terminal.update ?? terminal.test,
+          terminal.loop,
+        );
+        scheduleIds.push(scheduleId);
+
+        const init = this.visitValueBlock(terminal.init, terminal.loc);
+        const initBlock = this.cx.ir.blocks.get(init.block)!;
+        let initValue = init.value;
+        if (initValue.kind === 'SequenceExpression') {
+          const last = initBlock.instructions.at(-1)!;
+          initValue.instructions.push(last);
+          initValue.value = {
+            kind: 'Primitive',
+            value: undefined,
+            loc: terminal.loc,
+          };
+        } else {
+          initValue = {
+            kind: 'SequenceExpression',
+            instructions: [initBlock.instructions.at(-1)!],
+            id: terminal.id,
+            loc: terminal.loc,
+            value: {
+              kind: 'Primitive',
+              value: undefined,
+              loc: terminal.loc,
+            },
+          };
+        }
+
+        const testValue = this.visitValueBlock(
+          terminal.test,
+          terminal.loc,
+        ).value;
+
+        const updateValue =
+          terminal.update !== null
+            ? this.visitValueBlock(terminal.update, terminal.loc).value
+            : null;
+
+        let loopBody: ReactiveBlock;
+        if (loopId) {
+          loopBody = this.traverseBlock(this.cx.ir.blocks.get(loopId)!);
+        } else {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'for' where the loop is already scheduled`,
+            loc: terminal.loc,
+          });
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'for',
+            loc: terminal.loc,
+            init: initValue,
+            test: testValue,
+            update: updateValue,
+            loop: loopBody,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null ? null : {id: fallthroughId, implicit: false},
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'for-of': {
+        const loopId =
+          !this.cx.isScheduled(terminal.loop) &&
+          terminal.loop !== terminal.fallthrough
+            ? terminal.loop
+            : null;
+
+        const fallthroughId = !this.cx.isScheduled(terminal.fallthrough)
+          ? terminal.fallthrough
+          : null;
+
+        const scheduleId = this.cx.scheduleLoop(
+          terminal.fallthrough,
+          terminal.init,
+          terminal.loop,
+        );
+        scheduleIds.push(scheduleId);
+
+        const init = this.visitValueBlock(terminal.init, terminal.loc);
+        const initBlock = this.cx.ir.blocks.get(init.block)!;
+        let initValue = init.value;
+        if (initValue.kind === 'SequenceExpression') {
+          const last = initBlock.instructions.at(-1)!;
+          initValue.instructions.push(last);
+          initValue.value = {
+            kind: 'Primitive',
+            value: undefined,
+            loc: terminal.loc,
+          };
+        } else {
+          initValue = {
+            kind: 'SequenceExpression',
+            instructions: [initBlock.instructions.at(-1)!],
+            id: terminal.id,
+            loc: terminal.loc,
+            value: {
+              kind: 'Primitive',
+              value: undefined,
+              loc: terminal.loc,
+            },
+          };
+        }
+
+        const test = this.visitValueBlock(terminal.test, terminal.loc);
+        const testBlock = this.cx.ir.blocks.get(test.block)!;
+        let testValue = test.value;
+        if (testValue.kind === 'SequenceExpression') {
+          const last = testBlock.instructions.at(-1)!;
+          testValue.instructions.push(last);
+          testValue.value = {
+            kind: 'Primitive',
+            value: undefined,
+            loc: terminal.loc,
+          };
+        } else {
+          testValue = {
+            kind: 'SequenceExpression',
+            instructions: [testBlock.instructions.at(-1)!],
+            id: terminal.id,
+            loc: terminal.loc,
+            value: {
+              kind: 'Primitive',
+              value: undefined,
+              loc: terminal.loc,
+            },
+          };
+        }
+
+        let loopBody: ReactiveBlock;
+        if (loopId) {
+          loopBody = this.traverseBlock(this.cx.ir.blocks.get(loopId)!);
+        } else {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'for-of' where the loop is already scheduled`,
+            loc: terminal.loc,
+          });
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'for-of',
+            loc: terminal.loc,
+            init: initValue,
+            test: testValue,
+            loop: loopBody,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null ? null : {id: fallthroughId, implicit: false},
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'for-in': {
+        const loopId =
+          !this.cx.isScheduled(terminal.loop) &&
+          terminal.loop !== terminal.fallthrough
+            ? terminal.loop
+            : null;
+
+        const fallthroughId = !this.cx.isScheduled(terminal.fallthrough)
+          ? terminal.fallthrough
+          : null;
+
+        const scheduleId = this.cx.scheduleLoop(
+          terminal.fallthrough,
+          terminal.init,
+          terminal.loop,
+        );
+        scheduleIds.push(scheduleId);
+
+        const init = this.visitValueBlock(terminal.init, terminal.loc);
+        const initBlock = this.cx.ir.blocks.get(init.block)!;
+        let initValue = init.value;
+        if (initValue.kind === 'SequenceExpression') {
+          const last = initBlock.instructions.at(-1)!;
+          initValue.instructions.push(last);
+          initValue.value = {
+            kind: 'Primitive',
+            value: undefined,
+            loc: terminal.loc,
+          };
+        } else {
+          initValue = {
+            kind: 'SequenceExpression',
+            instructions: [initBlock.instructions.at(-1)!],
+            id: terminal.id,
+            loc: terminal.loc,
+            value: {
+              kind: 'Primitive',
+              value: undefined,
+              loc: terminal.loc,
+            },
+          };
+        }
+
+        let loopBody: ReactiveBlock;
+        if (loopId) {
+          loopBody = this.traverseBlock(this.cx.ir.blocks.get(loopId)!);
+        } else {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'for-in' where the loop is already scheduled`,
+            loc: terminal.loc,
+          });
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'for-in',
+            loc: terminal.loc,
+            init: initValue,
+            loop: loopBody,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null ? null : {id: fallthroughId, implicit: false},
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'branch': {
+        let consequent: ReactiveBlock | null = null;
+        if (this.cx.isScheduled(terminal.consequent)) {
+          const break_ = this.visitBreak(
+            terminal.consequent,
+            terminal.id,
+            terminal.loc,
+          );
+          if (break_ !== null) {
+            consequent = [break_];
+          }
+        } else {
+          consequent = this.traverseBlock(
+            this.cx.ir.blocks.get(terminal.consequent)!,
+          );
+        }
+
+        let alternate: ReactiveBlock | null = null;
+        if (this.cx.isScheduled(terminal.alternate)) {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'branch' where the alternate is already scheduled`,
+            loc: terminal.loc,
+          });
+        } else {
+          alternate = this.traverseBlock(
+            this.cx.ir.blocks.get(terminal.alternate)!,
+          );
+        }
+
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'if',
+            loc: terminal.loc,
+            test: terminal.test,
+            consequent: consequent ?? this.emptyBlock(),
+            alternate: alternate,
+            id: terminal.id,
+          },
+          label: null,
+        });
+
+        break;
+      }
+      case 'label': {
+        const fallthroughId =
+          this.cx.reachable(terminal.fallthrough) &&
+          !this.cx.isScheduled(terminal.fallthrough)
+            ? terminal.fallthrough
+            : null;
+        if (fallthroughId !== null) {
+          const scheduleId = this.cx.schedule(fallthroughId, 'if');
+          scheduleIds.push(scheduleId);
+        }
+
+        let block: ReactiveBlock;
+        if (this.cx.isScheduled(terminal.block)) {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'label' where the block is already scheduled`,
+            loc: terminal.loc,
+          });
+        } else {
+          block = this.traverseBlock(this.cx.ir.blocks.get(terminal.block)!);
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          terminal: {
+            kind: 'label',
+            loc: terminal.loc,
+            block,
+            id: terminal.id,
+          },
+          label:
+            fallthroughId == null ? null : {id: fallthroughId, implicit: false},
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+
+        break;
+      }
+      case 'sequence':
+      case 'optional':
+      case 'ternary':
+      case 'logical': {
+        const fallthroughId =
+          terminal.fallthrough !== null &&
+          !this.cx.isScheduled(terminal.fallthrough)
+            ? terminal.fallthrough
+            : null;
+        if (fallthroughId !== null) {
+          const scheduleId = this.cx.schedule(fallthroughId, 'if');
+          scheduleIds.push(scheduleId);
+        }
+
+        const {place, value} = this.visitValueBlockTerminal(terminal);
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'instruction',
+          instruction: {
+            id: terminal.id,
+            lvalue: place,
+            value,
+            loc: terminal.loc,
+          },
+        });
+
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'goto': {
+        switch (terminal.variant) {
+          case GotoVariant.Break: {
+            const break_ = this.visitBreak(
+              terminal.block,
+              terminal.id,
+              terminal.loc,
+            );
+            if (break_ !== null) {
+              blockValue.push(break_);
+            }
+            break;
+          }
+          case GotoVariant.Continue: {
+            const continue_ = this.visitContinue(
+              terminal.block,
+              terminal.id,
+              terminal.loc,
+            );
+            if (continue_ !== null) {
+              blockValue.push(continue_);
+            }
+            break;
+          }
+          case GotoVariant.Try: {
+            break;
+          }
+          default: {
+            assertExhaustive(
+              terminal.variant,
+              `Unexpected goto variant \`${terminal.variant}\``,
+            );
+          }
+        }
+        break;
+      }
+      case 'maybe-throw': {
+        /*
+         * ReactiveFunction does not explicit model maybe-throw semantics,
+         * so these terminals flatten away
+         */
+        if (!this.cx.isScheduled(terminal.continuation)) {
+          this.visitBlock(
+            this.cx.ir.blocks.get(terminal.continuation)!,
+            blockValue,
+          );
+        }
+        break;
+      }
+      case 'try': {
+        const fallthroughId =
+          this.cx.reachable(terminal.fallthrough) &&
+          !this.cx.isScheduled(terminal.fallthrough)
+            ? terminal.fallthrough
+            : null;
+        if (fallthroughId !== null) {
+          const scheduleId = this.cx.schedule(fallthroughId, 'if');
+          scheduleIds.push(scheduleId);
+        }
+        this.cx.scheduleCatchHandler(terminal.handler);
+
+        const block = this.traverseBlock(
+          this.cx.ir.blocks.get(terminal.block)!,
+        );
+        const handler = this.traverseBlock(
+          this.cx.ir.blocks.get(terminal.handler)!,
+        );
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: 'terminal',
+          label:
+            fallthroughId == null ? null : {id: fallthroughId, implicit: false},
+          terminal: {
+            kind: 'try',
+            loc: terminal.loc,
+            block,
+            handlerBinding: terminal.handlerBinding,
+            handler,
+            id: terminal.id,
+          },
+        });
+
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+        break;
+      }
+      case 'pruned-scope':
+      case 'scope': {
+        const fallthroughId = !this.cx.isScheduled(terminal.fallthrough)
+          ? terminal.fallthrough
+          : null;
+        if (fallthroughId !== null) {
+          const scheduleId = this.cx.schedule(fallthroughId, 'if');
+          scheduleIds.push(scheduleId);
+          this.cx.scopeFallthroughs.add(fallthroughId);
+        }
+
+        let block: ReactiveBlock;
+        if (this.cx.isScheduled(terminal.block)) {
+          CompilerError.invariant(false, {
+            reason: `Unexpected 'scope' where the block is already scheduled`,
+            loc: terminal.loc,
+          });
+        } else {
+          block = this.traverseBlock(this.cx.ir.blocks.get(terminal.block)!);
+        }
+
+        this.cx.unscheduleAll(scheduleIds);
+        blockValue.push({
+          kind: terminal.kind,
+          instructions: block,
+          scope: terminal.scope,
+        });
+        if (fallthroughId !== null) {
+          this.visitBlock(this.cx.ir.blocks.get(fallthroughId)!, blockValue);
+        }
+
+        break;
+      }
+      case 'unreachable': {
+        // noop
+        break;
+      }
+      case 'unsupported': {
+        CompilerError.invariant(false, {
+          reason: 'Unexpected unsupported terminal',
+          loc: terminal.loc,
+        });
+      }
+      default: {
+        assertExhaustive(terminal, 'Unexpected terminal');
+      }
+    }
+  }
+
+  visitValueBlock(
+    id: BlockId,
+    loc: SourceLocation,
+  ): {block: BlockId; value: ReactiveValue; place: Place; id: InstructionId} {
+    const defaultBlock = this.cx.ir.blocks.get(id)!;
+    if (defaultBlock.terminal.kind === 'branch') {
+      const instructions = defaultBlock.instructions;
+      if (instructions.length === 0) {
+        return {
+          block: defaultBlock.id,
+          place: defaultBlock.terminal.test,
+          value: {
+            kind: 'LoadLocal',
+            place: defaultBlock.terminal.test,
+            loc: defaultBlock.terminal.test.loc,
+          },
+          id: defaultBlock.terminal.id,
+        };
+      } else if (defaultBlock.instructions.length === 1) {
+        const instr = defaultBlock.instructions[0]!;
+        CompilerError.invariant(
+          instr.lvalue.identifier.id ===
+            defaultBlock.terminal.test.identifier.id,
+          {
+            reason:
+              'Expected branch block to end in an instruction that sets the test value',
+            loc: instr.lvalue.loc,
+          },
+        );
+        return {
+          block: defaultBlock.id,
+          place: instr.lvalue!,
+          value: instr.value,
+          id: instr.id,
+        };
+      } else {
+        const instr = defaultBlock.instructions.at(-1)!;
+        const sequence: ReactiveSequenceValue = {
+          kind: 'SequenceExpression',
+          instructions: defaultBlock.instructions.slice(0, -1),
+          id: instr.id,
+          value: instr.value,
+          loc: loc,
+        };
+        return {
+          block: defaultBlock.id,
+          place: defaultBlock.terminal.test,
+          value: sequence,
+          id: defaultBlock.terminal.id,
+        };
+      }
+    } else if (defaultBlock.terminal.kind === 'goto') {
+      const instructions = defaultBlock.instructions;
+      if (instructions.length === 0) {
+        CompilerError.invariant(false, {
+          reason: 'Expected goto value block to have at least one instruction',
+          loc: GeneratedSource,
+        });
+      } else if (defaultBlock.instructions.length === 1) {
+        const instr = defaultBlock.instructions[0]!;
+        let place: Place = instr.lvalue;
+        let value: ReactiveValue = instr.value;
+        if (
+          /*
+           * Value blocks generally end in a StoreLocal to assign the value of the
+           * expression for this branch. These StoreLocal instructions can be pruned,
+           * since we represent the value blocks as a compund value in ReactiveFunction
+           * (no phis). However, it's also possible to have a value block that ends in
+           * an AssignmentExpression, which we need to keep. So we only prune
+           * StoreLocal for temporaries — any named/promoted values must be used
+           * elsewhere and aren't safe to prune.
+           */
+          value.kind === 'StoreLocal' &&
+          value.lvalue.place.identifier.name === null
+        ) {
+          place = value.lvalue.place;
+          value = {
+            kind: 'LoadLocal',
+            place: value.value,
+            loc: value.value.loc,
+          };
+        }
+        return {
+          block: defaultBlock.id,
+          place,
+          value,
+          id: instr.id,
+        };
+      } else {
+        const instr = defaultBlock.instructions.at(-1)!;
+        let place: Place = instr.lvalue;
+        let value: ReactiveValue = instr.value;
+        if (
+          /*
+           * Value blocks generally end in a StoreLocal to assign the value of the
+           * expression for this branch. These StoreLocal instructions can be pruned,
+           * since we represent the value blocks as a compund value in ReactiveFunction
+           * (no phis). However, it's also possible to have a value block that ends in
+           * an AssignmentExpression, which we need to keep. So we only prune
+           * StoreLocal for temporaries — any named/promoted values must be used
+           * elsewhere and aren't safe to prune.
+           */
+          value.kind === 'StoreLocal' &&
+          value.lvalue.place.identifier.name === null
+        ) {
+          place = value.lvalue.place;
+          value = {
+            kind: 'LoadLocal',
+            place: value.value,
+            loc: value.value.loc,
+          };
+        }
+        const sequence: ReactiveSequenceValue = {
+          kind: 'SequenceExpression',
+          instructions: defaultBlock.instructions.slice(0, -1),
+          id: instr.id,
+          value,
+          loc: loc,
+        };
+        return {
+          block: defaultBlock.id,
+          place,
+          value: sequence,
+          id: instr.id,
+        };
+      }
+    } else {
+      /*
+       * The value block ended in a value terminal, recurse to get the value
+       * of that terminal
+       */
+      const init = this.visitValueBlockTerminal(defaultBlock.terminal);
+      // Code following the logical terminal
+      const final = this.visitValueBlock(init.fallthrough, loc);
+      // Stitch the two together...
+      const sequence: ReactiveSequenceValue = {
+        kind: 'SequenceExpression',
+        instructions: [
+          ...defaultBlock.instructions,
+          {
+            id: init.id,
+            loc,
+            lvalue: init.place,
+            value: init.value,
+          },
+        ],
+        id: final.id,
+        value: final.value,
+        loc,
+      };
+      return {
+        block: init.fallthrough,
+        value: sequence,
+        place: final.place,
+        id: final.id,
+      };
+    }
+  }
+
+  visitValueBlockTerminal(terminal: Terminal): {
+    value: ReactiveValue;
+    place: Place;
+    fallthrough: BlockId;
+    id: InstructionId;
+  } {
+    switch (terminal.kind) {
+      case 'sequence': {
+        const block = this.visitValueBlock(terminal.block, terminal.loc);
+        return {
+          value: block.value,
+          place: block.place,
+          fallthrough: terminal.fallthrough,
+          id: terminal.id,
+        };
+      }
+      case 'optional': {
+        const test = this.visitValueBlock(terminal.test, terminal.loc);
+        const testBlock = this.cx.ir.blocks.get(test.block)!;
+        if (testBlock.terminal.kind !== 'branch') {
+          CompilerError.throwTodo({
+            reason: `Unexpected terminal kind \`${testBlock.terminal.kind}\` for optional test block`,
+            description: null,
+            loc: testBlock.terminal.loc,
+            suggestions: null,
+          });
+        }
+        const consequent = this.visitValueBlock(
+          testBlock.terminal.consequent,
+          terminal.loc,
+        );
+        const call: ReactiveSequenceValue = {
+          kind: 'SequenceExpression',
+          instructions: [
+            {
+              id: test.id,
+              loc: testBlock.terminal.loc,
+              lvalue: test.place,
+              value: test.value,
+            },
+          ],
+          id: consequent.id,
+          value: consequent.value,
+          loc: terminal.loc,
+        };
+        return {
+          place: {...consequent.place},
+          value: {
+            kind: 'OptionalExpression',
+            optional: terminal.optional,
+            value: call,
+            id: terminal.id,
+            loc: terminal.loc,
+          },
+          fallthrough: terminal.fallthrough,
+          id: terminal.id,
+        };
+      }
+      case 'logical': {
+        const test = this.visitValueBlock(terminal.test, terminal.loc);
+        const testBlock = this.cx.ir.blocks.get(test.block)!;
+        if (testBlock.terminal.kind !== 'branch') {
+          CompilerError.throwTodo({
+            reason: `Unexpected terminal kind \`${testBlock.terminal.kind}\` for logical test block`,
+            description: null,
+            loc: testBlock.terminal.loc,
+            suggestions: null,
+          });
+        }
+
+        const leftFinal = this.visitValueBlock(
+          testBlock.terminal.consequent,
+          terminal.loc,
+        );
+        const left: ReactiveSequenceValue = {
+          kind: 'SequenceExpression',
+          instructions: [
+            {
+              id: test.id,
+              loc: terminal.loc,
+              lvalue: test.place,
+              value: test.value,
+            },
+          ],
+          id: leftFinal.id,
+          value: leftFinal.value,
+          loc: terminal.loc,
+        };
+        const right = this.visitValueBlock(
+          testBlock.terminal.alternate,
+          terminal.loc,
+        );
+        const value: ReactiveLogicalValue = {
+          kind: 'LogicalExpression',
+          operator: terminal.operator,
+          left: left,
+          right: right.value,
+          loc: terminal.loc,
+        };
+        return {
+          place: {...leftFinal.place},
+          value,
+          fallthrough: terminal.fallthrough,
+          id: terminal.id,
+        };
+      }
+      case 'ternary': {
+        const test = this.visitValueBlock(terminal.test, terminal.loc);
+        const testBlock = this.cx.ir.blocks.get(test.block)!;
+        if (testBlock.terminal.kind !== 'branch') {
+          CompilerError.throwTodo({
+            reason: `Unexpected terminal kind \`${testBlock.terminal.kind}\` for ternary test block`,
+            description: null,
+            loc: testBlock.terminal.loc,
+            suggestions: null,
+          });
+        }
+        const consequent = this.visitValueBlock(
+          testBlock.terminal.consequent,
+          terminal.loc,
+        );
+        const alternate = this.visitValueBlock(
+          testBlock.terminal.alternate,
+          terminal.loc,
+        );
+        const value: ReactiveTernaryValue = {
+          kind: 'ConditionalExpression',
+          test: test.value,
+          consequent: consequent.value,
+          alternate: alternate.value,
+          loc: terminal.loc,
+        };
+
+        return {
+          place: {...consequent.place},
+          value,
+          fallthrough: terminal.fallthrough,
+          id: terminal.id,
+        };
+      }
+      case 'maybe-throw': {
+        CompilerError.throwTodo({
+          reason: `Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement`,
+          description: null,
+          loc: terminal.loc,
+          suggestions: null,
+        });
+      }
+      case 'label': {
+        CompilerError.throwTodo({
+          reason: `Support labeled statements combined with value blocks (conditional, logical, optional chaining, etc)`,
+          description: null,
+          loc: terminal.loc,
+          suggestions: null,
+        });
+      }
+      default: {
+        CompilerError.throwTodo({
+          reason: `Support \`${terminal.kind}\` as a value block terminal (conditional, logical, optional chaining, etc)`,
+          description: null,
+          loc: terminal.loc,
+          suggestions: null,
+        });
+      }
+    }
+  }
+
+  emptyBlock(): ReactiveBlock {
+    return [];
+  }
+
+  visitBreak(
+    block: BlockId,
+    id: InstructionId,
+    loc: SourceLocation,
+  ): ReactiveTerminalStatement<ReactiveBreakTerminal> | null {
+    const target = this.cx.getBreakTarget(block);
+    if (target === null) {
+      CompilerError.invariant(false, {
+        reason: 'Expected a break target',
+        loc: GeneratedSource,
+      });
+    }
+    if (this.cx.scopeFallthroughs.has(target.block)) {
+      CompilerError.invariant(target.type === 'implicit', {
+        reason: 'Expected reactive scope to implicitly break to fallthrough',
+        loc,
+      });
+      return null;
+    }
+    return {
+      kind: 'terminal',
+      terminal: {
+        kind: 'break',
+        loc,
+        target: target.block,
+        id,
+        targetKind: target.type,
+      },
+      label: null,
+    };
+  }
+
+  visitContinue(
+    block: BlockId,
+    id: InstructionId,
+    loc: SourceLocation,
+  ): ReactiveTerminalStatement<ReactiveContinueTerminal> {
+    const target = this.cx.getContinueTarget(block);
+    CompilerError.invariant(target !== null, {
+      reason: `Expected continue target to be scheduled for bb${block}`,
+      loc: GeneratedSource,
+    });
+
+    return {
+      kind: 'terminal',
+      terminal: {
+        kind: 'continue',
+        loc,
+        target: target.block,
+        id,
+        targetKind: target.type,
+      },
+      label: null,
+    };
+  }
+}
+
+class Context {
+  ir: HIR;
+  #nextScheduleId: number = 0;
+
+  /*
+   * Used to track which blocks *have been* generated already in order to
+   * abort if a block is generated a second time. This is an error catching
+   * mechanism for debugging purposes, and is not used by the codegen algorithm
+   * to drive decisions about how to emit blocks.
+   */
+  emitted: Set<BlockId> = new Set();
+
+  scopeFallthroughs: Set<BlockId> = new Set();
+  /*
+   * A set of blocks that are already scheduled to be emitted by eg a parent.
+   * This allows child nodes to avoid re-emitting the same block and emit eg
+   * a break instead.
+   */
+  #scheduled: Set<BlockId> = new Set();
+
+  #catchHandlers: Set<BlockId> = new Set();
+
+  /*
+   * Represents which control flow operations are currently in scope, with the innermost
+   * scope last. Roughly speaking, the last ControlFlowTarget on the stack indicates where
+   * control will implicitly transfer, such that gotos to that block can be elided. Gotos
+   * targeting items higher up the stack may need labeled break or continue; see
+   * getBreakTarget() and getContinueTarget() for more details.
+   */
+  #controlFlowStack: Array<ControlFlowTarget> = [];
+
+  constructor(ir: HIR) {
+    this.ir = ir;
+  }
+
+  block(id: BlockId): BasicBlock {
+    return this.ir.blocks.get(id)!;
+  }
+
+  scheduleCatchHandler(block: BlockId): void {
+    this.#catchHandlers.add(block);
+  }
+
+  reachable(id: BlockId): boolean {
+    const block = this.ir.blocks.get(id)!;
+    return block.terminal.kind !== 'unreachable';
+  }
+
+  /*
+   * Record that the given block will be emitted (eg by the codegen of a parent node)
+   * so that child nodes can avoid re-emitting it.
+   */
+  schedule(block: BlockId, type: 'if' | 'switch' | 'case'): number {
+    const id = this.#nextScheduleId++;
+    CompilerError.invariant(!this.#scheduled.has(block), {
+      reason: `Break block is already scheduled: bb${block}`,
+      loc: GeneratedSource,
+    });
+    this.#scheduled.add(block);
+    this.#controlFlowStack.push({block, id, type});
+    return id;
+  }
+
+  scheduleLoop(
+    fallthroughBlock: BlockId,
+    continueBlock: BlockId,
+    loopBlock: BlockId | null,
+  ): number {
+    const id = this.#nextScheduleId++;
+    const ownsBlock = !this.#scheduled.has(fallthroughBlock);
+    this.#scheduled.add(fallthroughBlock);
+    CompilerError.invariant(!this.#scheduled.has(continueBlock), {
+      reason: `Continue block is already scheduled: bb${continueBlock}`,
+      loc: GeneratedSource,
+    });
+    this.#scheduled.add(continueBlock);
+    let ownsLoop = false;
+    if (loopBlock !== null) {
+      ownsLoop = !this.#scheduled.has(loopBlock);
+      this.#scheduled.add(loopBlock);
+    }
+
+    this.#controlFlowStack.push({
+      block: fallthroughBlock,
+      ownsBlock,
+      id,
+      type: 'loop',
+      continueBlock,
+      loopBlock,
+      ownsLoop,
+    });
+    return id;
+  }
+
+  // Removes a block that was scheduled; must be called after that block is emitted.
+  unschedule(scheduleId: number): void {
+    const last = this.#controlFlowStack.pop();
+    CompilerError.invariant(last !== undefined && last.id === scheduleId, {
+      reason: 'Can only unschedule the last target',
+      loc: GeneratedSource,
+    });
+    if (last.type !== 'loop' || last.ownsBlock !== null) {
+      this.#scheduled.delete(last.block);
+    }
+    if (last.type === 'loop') {
+      this.#scheduled.delete(last.continueBlock);
+      if (last.ownsLoop && last.loopBlock !== null) {
+        this.#scheduled.delete(last.loopBlock);
+      }
+    }
+  }
+
+  /*
+   * Helper to unschedule multiple scheduled blocks. The ids should be in
+   * the order in which they were scheduled, ie most recently scheduled last.
+   */
+  unscheduleAll(scheduleIds: Array<number>): void {
+    for (let i = scheduleIds.length - 1; i >= 0; i--) {
+      this.unschedule(scheduleIds[i]!);
+    }
+  }
+
+  // Check if the given @param block is scheduled or not.
+  isScheduled(block: BlockId): boolean {
+    return this.#scheduled.has(block) || this.#catchHandlers.has(block);
+  }
+
+  /*
+   * Given the current control flow stack, determines how a `break` to the given @param block
+   * must be emitted. Returns as follows:
+   * - 'implicit' if control would implicitly transfer to that block
+   * - 'labeled' if a labeled break is required to transfer control to that block
+   * - 'unlabeled' if an unlabeled break would transfer to that block
+   * - null if there is no information for this block
+   *
+   * The returned 'block' value should be used as the label if necessary.
+   */
+  getBreakTarget(block: BlockId): {
+    block: BlockId;
+    type: ReactiveTerminalTargetKind;
+  } {
+    let hasPrecedingLoop = false;
+    for (let i = this.#controlFlowStack.length - 1; i >= 0; i--) {
+      const target = this.#controlFlowStack[i]!;
+      if (target.block === block) {
+        let type: ReactiveTerminalTargetKind;
+        if (target.type === 'loop') {
+          /*
+           * breaking out of a loop requires an explicit break,
+           * but only requires a label if breaking past the innermost loop.
+           */
+          type = hasPrecedingLoop ? 'labeled' : 'unlabeled';
+        } else if (i === this.#controlFlowStack.length - 1) {
+          /*
+           * breaking to the last break point, which is where control will transfer
+           * implicitly
+           */
+          type = 'implicit';
+        } else {
+          // breaking somewhere else requires an explicit break
+          type = 'labeled';
+        }
+        return {
+          block: target.block,
+          type,
+        };
+      }
+      hasPrecedingLoop ||= target.type === 'loop';
+    }
+
+    CompilerError.invariant(false, {
+      reason: 'Expected a break target',
+      loc: GeneratedSource,
+    });
+  }
+
+  /*
+   * Given the current control flow stack, determines how a `continue` to the given @param block
+   * must be emitted. Returns as follows:
+   * - 'implicit' if control would implicitly continue to that block
+   * - 'labeled' if a labeled continue is required to continue to that block
+   * - 'unlabeled' if an unlabeled continue would transfer to that block
+   * - null if there is no information for this block
+   *
+   * The returned 'block' value should be used as the label if necessary.
+   */
+  getContinueTarget(
+    block: BlockId,
+  ): {block: BlockId; type: ReactiveTerminalTargetKind} | null {
+    let hasPrecedingLoop = false;
+    for (let i = this.#controlFlowStack.length - 1; i >= 0; i--) {
+      const target = this.#controlFlowStack[i]!;
+      if (target.type == 'loop' && target.continueBlock === block) {
+        let type: ReactiveTerminalTargetKind;
+        if (hasPrecedingLoop) {
+          /*
+           * continuing to a loop that is not the innermost loop always requires
+           * a label
+           */
+          type = 'labeled';
+        } else if (i === this.#controlFlowStack.length - 1) {
+          /*
+           * continuing to the last break point, which is where control will
+           * transfer to naturally
+           */
+          type = 'implicit';
+        } else {
+          /*
+           * the continue is inside some conditional logic, requires an explicit
+           * continue
+           */
+          type = 'unlabeled';
+        }
+        return {
+          block: target.block,
+          type,
+        };
+      }
+      hasPrecedingLoop ||= target.type === 'loop';
+    }
+    return null;
+  }
+
+  debugBreakTargets(): Array<ControlFlowTarget> {
+    return this.#controlFlowStack.map(target => ({...target}));
+  }
+}
+
+type ControlFlowTarget =
+  | {type: 'if'; block: BlockId; id: number}
+  | {type: 'switch'; block: BlockId; id: number}
+  | {type: 'case'; block: BlockId; id: number}
+  | {
+      type: 'loop';
+      block: BlockId;
+      ownsBlock: boolean;
+      continueBlock: BlockId;
+      loopBlock: BlockId | null;
+      ownsLoop: boolean;
+      id: number;
+    };
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
new file mode 100644
index 00000000000..135ba76572d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -0,0 +1,2697 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {createHmac} from 'crypto';
+import {
+  pruneHoistedContexts,
+  pruneUnusedLValues,
+  pruneUnusedLabels,
+  renameVariables,
+} from '.';
+import {CompilerError, ErrorCategory} from '../CompilerError';
+import {Environment, ExternalFunction} from '../HIR';
+import {
+  ArrayPattern,
+  BlockId,
+  DeclarationId,
+  GeneratedSource,
+  Identifier,
+  IdentifierId,
+  InstructionKind,
+  JsxAttribute,
+  ObjectMethod,
+  ObjectPropertyKey,
+  Pattern,
+  Place,
+  PrunedReactiveScopeBlock,
+  ReactiveBlock,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScope,
+  ReactiveScopeBlock,
+  ReactiveScopeDeclaration,
+  ReactiveScopeDependency,
+  ReactiveTerminal,
+  ReactiveValue,
+  SourceLocation,
+  SpreadPattern,
+  ValidIdentifierName,
+  getHookKind,
+  makeIdentifierName,
+} from '../HIR/HIR';
+import {printIdentifier, printInstruction, printPlace} from '../HIR/PrintHIR';
+import {eachPatternOperand} from '../HIR/visitors';
+import {Err, Ok, Result} from '../Utils/Result';
+import {GuardKind} from '../Utils/RuntimeDiagnosticConstants';
+import {assertExhaustive} from '../Utils/utils';
+import {buildReactiveFunction} from './BuildReactiveFunction';
+import {SINGLE_CHILD_FBT_TAGS} from './MemoizeFbtAndMacroOperandsInSameScope';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+import {EMIT_FREEZE_GLOBAL_GATING, ReactFunctionType} from '../HIR/Environment';
+import {ProgramContext} from '../Entrypoint';
+
+export const MEMO_CACHE_SENTINEL = 'react.memo_cache_sentinel';
+export const EARLY_RETURN_SENTINEL = 'react.early_return_sentinel';
+
+export type CodegenFunction = {
+  type: 'CodegenFunction';
+  id: t.Identifier | null;
+  nameHint: string | null;
+  params: t.FunctionDeclaration['params'];
+  body: t.BlockStatement;
+  generator: boolean;
+  async: boolean;
+  loc: SourceLocation;
+
+  /*
+   * Compiler info for logging and heuristics
+   * Number of memo slots (value passed to useMemoCache)
+   */
+  memoSlotsUsed: number;
+  /*
+   * Number of memo *blocks* (reactive scopes) regardless of
+   * how many inputs/outputs each block has
+   */
+  memoBlocks: number;
+
+  /**
+   * Number of memoized values across all reactive scopes
+   */
+  memoValues: number;
+
+  /**
+   * The number of reactive scopes that were created but had to be discarded
+   * because they contained hook calls.
+   */
+  prunedMemoBlocks: number;
+
+  /**
+   * The total number of values that should have been memoized but weren't
+   * because they were part of a pruned memo block.
+   */
+  prunedMemoValues: number;
+
+  outlined: Array<{
+    fn: CodegenFunction;
+    type: ReactFunctionType | null;
+  }>;
+
+  /**
+   * This is true if the compiler has compiled inferred effect dependencies
+   */
+  hasInferredEffect: boolean;
+  inferredEffectLocations: Set<SourceLocation>;
+
+  /**
+   * This is true if the compiler has compiled a fire to a useFire call
+   */
+  hasFireRewrite: boolean;
+};
+
+export function codegenFunction(
+  fn: ReactiveFunction,
+  {
+    uniqueIdentifiers,
+    fbtOperands,
+  }: {
+    uniqueIdentifiers: Set<string>;
+    fbtOperands: Set<IdentifierId>;
+  },
+): Result<CodegenFunction, CompilerError> {
+  const cx = new Context(
+    fn.env,
+    fn.id ?? '[[ anonymous ]]',
+    uniqueIdentifiers,
+    fbtOperands,
+    null,
+  );
+
+  /**
+   * Fast Refresh reuses component instances at runtime even as the source of the component changes.
+   * The generated code needs to prevent values from one version of the code being reused after a code cange.
+   * If HMR detection is enabled and we know the source code of the component, assign a cache slot to track
+   * the source hash, and later, emit code to check for source changes and reset the cache on source changes.
+   */
+  let fastRefreshState: {
+    cacheIndex: number;
+    hash: string;
+  } | null = null;
+  if (
+    fn.env.config.enableResetCacheOnSourceFileChanges &&
+    fn.env.code !== null
+  ) {
+    const hash = createHmac('sha256', fn.env.code).digest('hex');
+    fastRefreshState = {
+      cacheIndex: cx.nextCacheIndex,
+      hash,
+    };
+  }
+
+  const compileResult = codegenReactiveFunction(cx, fn);
+  if (compileResult.isErr()) {
+    return compileResult;
+  }
+  const compiled = compileResult.unwrap();
+
+  const hookGuard = fn.env.config.enableEmitHookGuards;
+  if (hookGuard != null && fn.env.outputMode === 'client') {
+    compiled.body = t.blockStatement([
+      createHookGuard(
+        hookGuard,
+        fn.env.programContext,
+        compiled.body.body,
+        GuardKind.PushHookGuard,
+        GuardKind.PopHookGuard,
+      ),
+    ]);
+  }
+
+  const cacheCount = compiled.memoSlotsUsed;
+  if (cacheCount !== 0) {
+    const preface: Array<t.Statement> = [];
+    const useMemoCacheIdentifier =
+      fn.env.programContext.addMemoCacheImport().name;
+
+    // The import declaration for `useMemoCache` is inserted in the Babel plugin
+    preface.push(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          t.identifier(cx.synthesizeName('$')),
+          t.callExpression(t.identifier(useMemoCacheIdentifier), [
+            t.numericLiteral(cacheCount),
+          ]),
+        ),
+      ]),
+    );
+    if (fastRefreshState !== null) {
+      // HMR detection is enabled, emit code to reset the memo cache on source changes
+      const index = cx.synthesizeName('$i');
+      preface.push(
+        t.ifStatement(
+          t.binaryExpression(
+            '!==',
+            t.memberExpression(
+              t.identifier(cx.synthesizeName('$')),
+              t.numericLiteral(fastRefreshState.cacheIndex),
+              true,
+            ),
+            t.stringLiteral(fastRefreshState.hash),
+          ),
+          t.blockStatement([
+            t.forStatement(
+              t.variableDeclaration('let', [
+                t.variableDeclarator(t.identifier(index), t.numericLiteral(0)),
+              ]),
+              t.binaryExpression(
+                '<',
+                t.identifier(index),
+                t.numericLiteral(cacheCount),
+              ),
+              t.assignmentExpression(
+                '+=',
+                t.identifier(index),
+                t.numericLiteral(1),
+              ),
+              t.blockStatement([
+                t.expressionStatement(
+                  t.assignmentExpression(
+                    '=',
+                    t.memberExpression(
+                      t.identifier(cx.synthesizeName('$')),
+                      t.identifier(index),
+                      true,
+                    ),
+                    t.callExpression(
+                      t.memberExpression(
+                        t.identifier('Symbol'),
+                        t.identifier('for'),
+                      ),
+                      [t.stringLiteral(MEMO_CACHE_SENTINEL)],
+                    ),
+                  ),
+                ),
+              ]),
+            ),
+            t.expressionStatement(
+              t.assignmentExpression(
+                '=',
+                t.memberExpression(
+                  t.identifier(cx.synthesizeName('$')),
+                  t.numericLiteral(fastRefreshState.cacheIndex),
+                  true,
+                ),
+                t.stringLiteral(fastRefreshState.hash),
+              ),
+            ),
+          ]),
+        ),
+      );
+    }
+    compiled.body.body.unshift(...preface);
+  }
+
+  const emitInstrumentForget = fn.env.config.enableEmitInstrumentForget;
+  if (
+    emitInstrumentForget != null &&
+    fn.id != null &&
+    fn.env.outputMode === 'client'
+  ) {
+    /*
+     * Technically, this is a conditional hook call. However, we expect
+     * __DEV__ and gating identifier to be runtime constants
+     */
+    const gating =
+      emitInstrumentForget.gating != null
+        ? t.identifier(
+            fn.env.programContext.addImportSpecifier(
+              emitInstrumentForget.gating,
+            ).name,
+          )
+        : null;
+
+    const globalGating =
+      emitInstrumentForget.globalGating != null
+        ? t.identifier(emitInstrumentForget.globalGating)
+        : null;
+
+    if (emitInstrumentForget.globalGating != null) {
+      const assertResult = fn.env.programContext.assertGlobalBinding(
+        emitInstrumentForget.globalGating,
+      );
+      if (assertResult.isErr()) {
+        return assertResult;
+      }
+    }
+
+    let ifTest: t.Expression;
+    if (gating != null && globalGating != null) {
+      ifTest = t.logicalExpression('&&', globalGating, gating);
+    } else if (gating != null) {
+      ifTest = gating;
+    } else {
+      CompilerError.invariant(globalGating != null, {
+        reason:
+          'Bad config not caught! Expected at least one of gating or globalGating',
+        loc: GeneratedSource,
+      });
+      ifTest = globalGating;
+    }
+
+    const instrumentFnIdentifier = fn.env.programContext.addImportSpecifier(
+      emitInstrumentForget.fn,
+    ).name;
+    const test: t.IfStatement = t.ifStatement(
+      ifTest,
+      t.expressionStatement(
+        t.callExpression(t.identifier(instrumentFnIdentifier), [
+          t.stringLiteral(fn.id),
+          t.stringLiteral(fn.env.filename ?? ''),
+        ]),
+      ),
+    );
+    compiled.body.body.unshift(test);
+  }
+
+  const outlined: CodegenFunction['outlined'] = [];
+  for (const {fn: outlinedFunction, type} of cx.env.getOutlinedFunctions()) {
+    const reactiveFunction = buildReactiveFunction(outlinedFunction);
+    pruneUnusedLabels(reactiveFunction);
+    pruneUnusedLValues(reactiveFunction);
+    pruneHoistedContexts(reactiveFunction);
+
+    const identifiers = renameVariables(reactiveFunction);
+    const codegen = codegenReactiveFunction(
+      new Context(
+        cx.env,
+        reactiveFunction.id ?? '[[ anonymous ]]',
+        identifiers,
+        cx.fbtOperands,
+      ),
+      reactiveFunction,
+    );
+    if (codegen.isErr()) {
+      return codegen;
+    }
+    outlined.push({fn: codegen.unwrap(), type});
+  }
+  compiled.outlined = outlined;
+
+  return compileResult;
+}
+
+function codegenReactiveFunction(
+  cx: Context,
+  fn: ReactiveFunction,
+): Result<CodegenFunction, CompilerError> {
+  for (const param of fn.params) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    cx.temp.set(place.identifier.declarationId, null);
+    cx.declare(place.identifier);
+  }
+
+  const params = fn.params.map(param => convertParameter(param));
+  const body: t.BlockStatement = codegenBlock(cx, fn.body);
+  body.directives = fn.directives.map(d => t.directive(t.directiveLiteral(d)));
+  const statements = body.body;
+  if (statements.length !== 0) {
+    const last = statements[statements.length - 1];
+    if (last.type === 'ReturnStatement' && last.argument == null) {
+      statements.pop();
+    }
+  }
+
+  if (cx.errors.hasAnyErrors()) {
+    return Err(cx.errors);
+  }
+
+  const countMemoBlockVisitor = new CountMemoBlockVisitor(fn.env);
+  visitReactiveFunction(fn, countMemoBlockVisitor, undefined);
+
+  return Ok({
+    type: 'CodegenFunction',
+    loc: fn.loc,
+    id: fn.id !== null ? t.identifier(fn.id) : null,
+    nameHint: fn.nameHint,
+    params,
+    body,
+    generator: fn.generator,
+    async: fn.async,
+    memoSlotsUsed: cx.nextCacheIndex,
+    memoBlocks: countMemoBlockVisitor.memoBlocks,
+    memoValues: countMemoBlockVisitor.memoValues,
+    prunedMemoBlocks: countMemoBlockVisitor.prunedMemoBlocks,
+    prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
+    outlined: [],
+    hasFireRewrite: fn.env.hasFireRewrite,
+    hasInferredEffect: fn.env.hasInferredEffect,
+    inferredEffectLocations: fn.env.inferredEffectLocations,
+  });
+}
+
+class CountMemoBlockVisitor extends ReactiveFunctionVisitor<void> {
+  env: Environment;
+  memoBlocks: number = 0;
+  memoValues: number = 0;
+  prunedMemoBlocks: number = 0;
+  prunedMemoValues: number = 0;
+
+  constructor(env: Environment) {
+    super();
+    this.env = env;
+  }
+
+  override visitScope(scopeBlock: ReactiveScopeBlock, state: void): void {
+    this.memoBlocks += 1;
+    this.memoValues += scopeBlock.scope.declarations.size;
+    this.traverseScope(scopeBlock, state);
+  }
+
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: void,
+  ): void {
+    this.prunedMemoBlocks += 1;
+    this.prunedMemoValues += scopeBlock.scope.declarations.size;
+    this.traversePrunedScope(scopeBlock, state);
+  }
+}
+
+function convertParameter(
+  param: Place | SpreadPattern,
+): t.Identifier | t.RestElement {
+  if (param.kind === 'Identifier') {
+    return convertIdentifier(param.identifier);
+  } else {
+    return t.restElement(convertIdentifier(param.place.identifier));
+  }
+}
+
+class Context {
+  env: Environment;
+  fnName: string;
+  #nextCacheIndex: number = 0;
+  /**
+   * Tracks which named variables have been declared to dedupe declarations,
+   * so this uses DeclarationId instead of IdentifierId
+   */
+  #declarations: Set<DeclarationId> = new Set();
+  temp: Temporaries;
+  errors: CompilerError = new CompilerError();
+  objectMethods: Map<IdentifierId, ObjectMethod> = new Map();
+  uniqueIdentifiers: Set<string>;
+  fbtOperands: Set<IdentifierId>;
+  synthesizedNames: Map<string, ValidIdentifierName> = new Map();
+
+  constructor(
+    env: Environment,
+    fnName: string,
+    uniqueIdentifiers: Set<string>,
+    fbtOperands: Set<IdentifierId>,
+    temporaries: Temporaries | null = null,
+  ) {
+    this.env = env;
+    this.fnName = fnName;
+    this.uniqueIdentifiers = uniqueIdentifiers;
+    this.fbtOperands = fbtOperands;
+    this.temp = temporaries !== null ? new Map(temporaries) : new Map();
+  }
+  get nextCacheIndex(): number {
+    return this.#nextCacheIndex++;
+  }
+
+  declare(identifier: Identifier): void {
+    this.#declarations.add(identifier.declarationId);
+  }
+
+  hasDeclared(identifier: Identifier): boolean {
+    return this.#declarations.has(identifier.declarationId);
+  }
+
+  synthesizeName(name: string): ValidIdentifierName {
+    const previous = this.synthesizedNames.get(name);
+    if (previous !== undefined) {
+      return previous;
+    }
+    let validated = makeIdentifierName(name).value;
+    let index = 0;
+    while (this.uniqueIdentifiers.has(validated)) {
+      validated = makeIdentifierName(`${name}${index++}`).value;
+    }
+    this.uniqueIdentifiers.add(validated);
+    this.synthesizedNames.set(name, validated);
+    return validated;
+  }
+}
+
+function codegenBlock(cx: Context, block: ReactiveBlock): t.BlockStatement {
+  const temp = new Map(cx.temp);
+  const result = codegenBlockNoReset(cx, block);
+  /*
+   * Check that the block only added new temporaries and did not update the
+   * value of any existing temporary
+   */
+  for (const [key, value] of cx.temp) {
+    if (!temp.has(key)) {
+      continue;
+    }
+    CompilerError.invariant(temp.get(key)! === value, {
+      reason: 'Expected temporary value to be unchanged',
+      loc: GeneratedSource,
+    });
+  }
+  cx.temp = temp;
+  return result;
+}
+
+/*
+ * Generates code for the block, without resetting the Context's temporary state.
+ * This should not be used unless it is expected that temporaries from this block
+ * can be referenced later, which is currently only true for sequence expressions
+ * where the final `value` is expected to reference the temporary created in the
+ * preceding instructions of the sequence.
+ */
+function codegenBlockNoReset(
+  cx: Context,
+  block: ReactiveBlock,
+): t.BlockStatement {
+  const statements: Array<t.Statement> = [];
+  for (const item of block) {
+    switch (item.kind) {
+      case 'instruction': {
+        const statement = codegenInstructionNullable(cx, item.instruction);
+        if (statement !== null) {
+          statements.push(statement);
+        }
+        break;
+      }
+      case 'pruned-scope': {
+        const scopeBlock = codegenBlockNoReset(cx, item.instructions);
+        statements.push(...scopeBlock.body);
+        break;
+      }
+      case 'scope': {
+        const temp = new Map(cx.temp);
+        codegenReactiveScope(cx, statements, item.scope, item.instructions);
+        cx.temp = temp;
+        break;
+      }
+      case 'terminal': {
+        const statement = codegenTerminal(cx, item.terminal);
+        if (statement === null) {
+          break;
+        }
+        if (item.label !== null && !item.label.implicit) {
+          const block =
+            statement.type === 'BlockStatement' && statement.body.length === 1
+              ? statement.body[0]
+              : statement;
+          statements.push(
+            t.labeledStatement(
+              t.identifier(codegenLabel(item.label.id)),
+              block,
+            ),
+          );
+        } else if (statement.type === 'BlockStatement') {
+          statements.push(...statement.body);
+        } else {
+          statements.push(statement);
+        }
+        break;
+      }
+      default: {
+        assertExhaustive(
+          item,
+          `Unexpected item kind \`${(item as any).kind}\``,
+        );
+      }
+    }
+  }
+  return t.blockStatement(statements);
+}
+
+function wrapCacheDep(cx: Context, value: t.Expression): t.Expression {
+  if (
+    cx.env.config.enableEmitFreeze != null &&
+    cx.env.outputMode === 'client'
+  ) {
+    const emitFreezeIdentifier = cx.env.programContext.addImportSpecifier(
+      cx.env.config.enableEmitFreeze,
+    ).name;
+    cx.env.programContext
+      .assertGlobalBinding(EMIT_FREEZE_GLOBAL_GATING, cx.env.scope)
+      .unwrap();
+    return t.conditionalExpression(
+      t.identifier(EMIT_FREEZE_GLOBAL_GATING),
+      t.callExpression(t.identifier(emitFreezeIdentifier), [
+        value,
+        t.stringLiteral(cx.fnName),
+      ]),
+      value,
+    );
+  } else {
+    return value;
+  }
+}
+
+function codegenReactiveScope(
+  cx: Context,
+  statements: Array<t.Statement>,
+  scope: ReactiveScope,
+  block: ReactiveBlock,
+): void {
+  const cacheStoreStatements: Array<t.Statement> = [];
+  const cacheLoadStatements: Array<t.Statement> = [];
+  const cacheLoads: Array<{
+    name: t.Identifier;
+    index: number;
+    value: t.Expression;
+  }> = [];
+  const changeExpressions: Array<t.Expression> = [];
+  const changeExpressionComments: Array<string> = [];
+  const outputComments: Array<string> = [];
+
+  for (const dep of [...scope.dependencies].sort(compareScopeDependency)) {
+    const index = cx.nextCacheIndex;
+    changeExpressionComments.push(printDependencyComment(dep));
+    const comparison = t.binaryExpression(
+      '!==',
+      t.memberExpression(
+        t.identifier(cx.synthesizeName('$')),
+        t.numericLiteral(index),
+        true,
+      ),
+      codegenDependency(cx, dep),
+    );
+
+    if (cx.env.config.enableChangeVariableCodegen) {
+      const changeIdentifier = t.identifier(cx.synthesizeName(`c_${index}`));
+      statements.push(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(changeIdentifier, comparison),
+        ]),
+      );
+      changeExpressions.push(changeIdentifier);
+    } else {
+      changeExpressions.push(comparison);
+    }
+    /*
+     * Adding directly to cacheStoreStatements rather than cacheLoads, because there
+     * is no corresponding cacheLoadStatement for dependencies
+     */
+    cacheStoreStatements.push(
+      t.expressionStatement(
+        t.assignmentExpression(
+          '=',
+          t.memberExpression(
+            t.identifier(cx.synthesizeName('$')),
+            t.numericLiteral(index),
+            true,
+          ),
+          codegenDependency(cx, dep),
+        ),
+      ),
+    );
+  }
+  let firstOutputIndex: number | null = null;
+
+  for (const [, {identifier}] of [...scope.declarations].sort(([, a], [, b]) =>
+    compareScopeDeclaration(a, b),
+  )) {
+    const index = cx.nextCacheIndex;
+    if (firstOutputIndex === null) {
+      firstOutputIndex = index;
+    }
+
+    CompilerError.invariant(identifier.name != null, {
+      reason: `Expected scope declaration identifier to be named`,
+      description: `Declaration \`${printIdentifier(
+        identifier,
+      )}\` is unnamed in scope @${scope.id}`,
+      loc: GeneratedSource,
+    });
+
+    const name = convertIdentifier(identifier);
+    outputComments.push(name.name);
+    if (!cx.hasDeclared(identifier)) {
+      statements.push(
+        t.variableDeclaration('let', [createVariableDeclarator(name, null)]),
+      );
+    }
+    cacheLoads.push({name, index, value: wrapCacheDep(cx, name)});
+    cx.declare(identifier);
+  }
+  for (const reassignment of scope.reassignments) {
+    const index = cx.nextCacheIndex;
+    if (firstOutputIndex === null) {
+      firstOutputIndex = index;
+    }
+    const name = convertIdentifier(reassignment);
+    outputComments.push(name.name);
+    cacheLoads.push({name, index, value: wrapCacheDep(cx, name)});
+  }
+
+  let testCondition = (changeExpressions as Array<t.Expression>).reduce(
+    (acc: t.Expression | null, ident: t.Expression) => {
+      if (acc == null) {
+        return ident;
+      }
+      return t.logicalExpression('||', acc, ident);
+    },
+    null as t.Expression | null,
+  );
+  if (testCondition === null) {
+    CompilerError.invariant(firstOutputIndex !== null, {
+      reason: `Expected scope to have at least one declaration`,
+      description: `Scope '@${scope.id}' has no declarations`,
+      loc: GeneratedSource,
+    });
+    testCondition = t.binaryExpression(
+      '===',
+      t.memberExpression(
+        t.identifier(cx.synthesizeName('$')),
+        t.numericLiteral(firstOutputIndex),
+        true,
+      ),
+      t.callExpression(
+        t.memberExpression(t.identifier('Symbol'), t.identifier('for')),
+        [t.stringLiteral(MEMO_CACHE_SENTINEL)],
+      ),
+    );
+  }
+
+  if (cx.env.config.disableMemoizationForDebugging) {
+    CompilerError.invariant(
+      cx.env.config.enableChangeDetectionForDebugging == null,
+      {
+        reason: `Expected to not have both change detection enabled and memoization disabled`,
+        description: `Incompatible config options`,
+        loc: GeneratedSource,
+      },
+    );
+    testCondition = t.logicalExpression(
+      '||',
+      testCondition,
+      t.booleanLiteral(true),
+    );
+  }
+  let computationBlock = codegenBlock(cx, block);
+
+  let memoStatement;
+  const detectionFunction = cx.env.config.enableChangeDetectionForDebugging;
+  if (detectionFunction != null && changeExpressions.length > 0) {
+    const loc =
+      typeof scope.loc === 'symbol'
+        ? 'unknown location'
+        : `(${scope.loc.start.line}:${scope.loc.end.line})`;
+    const importedDetectionFunctionIdentifier =
+      cx.env.programContext.addImportSpecifier(detectionFunction).name;
+    const cacheLoadOldValueStatements: Array<t.Statement> = [];
+    const changeDetectionStatements: Array<t.Statement> = [];
+    const idempotenceDetectionStatements: Array<t.Statement> = [];
+
+    for (const {name, index, value} of cacheLoads) {
+      const loadName = cx.synthesizeName(`old$${name.name}`);
+      const slot = t.memberExpression(
+        t.identifier(cx.synthesizeName('$')),
+        t.numericLiteral(index),
+        true,
+      );
+      cacheStoreStatements.push(
+        t.expressionStatement(t.assignmentExpression('=', slot, value)),
+      );
+      cacheLoadOldValueStatements.push(
+        t.variableDeclaration('let', [
+          t.variableDeclarator(t.identifier(loadName), slot),
+        ]),
+      );
+      changeDetectionStatements.push(
+        t.expressionStatement(
+          t.callExpression(t.identifier(importedDetectionFunctionIdentifier), [
+            t.identifier(loadName),
+            t.cloneNode(name, true),
+            t.stringLiteral(name.name),
+            t.stringLiteral(cx.fnName),
+            t.stringLiteral('cached'),
+            t.stringLiteral(loc),
+          ]),
+        ),
+      );
+      idempotenceDetectionStatements.push(
+        t.expressionStatement(
+          t.callExpression(t.identifier(importedDetectionFunctionIdentifier), [
+            t.cloneNode(slot, true),
+            t.cloneNode(name, true),
+            t.stringLiteral(name.name),
+            t.stringLiteral(cx.fnName),
+            t.stringLiteral('recomputed'),
+            t.stringLiteral(loc),
+          ]),
+        ),
+      );
+      idempotenceDetectionStatements.push(
+        t.expressionStatement(t.assignmentExpression('=', name, slot)),
+      );
+    }
+    const condition = cx.synthesizeName('condition');
+    const recomputationBlock = t.cloneNode(computationBlock, true);
+    memoStatement = t.blockStatement([
+      ...computationBlock.body,
+      t.variableDeclaration('let', [
+        t.variableDeclarator(t.identifier(condition), testCondition),
+      ]),
+      t.ifStatement(
+        t.unaryExpression('!', t.identifier(condition)),
+        t.blockStatement([
+          ...cacheLoadOldValueStatements,
+          ...changeDetectionStatements,
+        ]),
+      ),
+      ...cacheStoreStatements,
+      t.ifStatement(
+        t.identifier(condition),
+        t.blockStatement([
+          ...recomputationBlock.body,
+          ...idempotenceDetectionStatements,
+        ]),
+      ),
+    ]);
+  } else {
+    for (const {name, index, value} of cacheLoads) {
+      cacheStoreStatements.push(
+        t.expressionStatement(
+          t.assignmentExpression(
+            '=',
+            t.memberExpression(
+              t.identifier(cx.synthesizeName('$')),
+              t.numericLiteral(index),
+              true,
+            ),
+            value,
+          ),
+        ),
+      );
+      cacheLoadStatements.push(
+        t.expressionStatement(
+          t.assignmentExpression(
+            '=',
+            name,
+            t.memberExpression(
+              t.identifier(cx.synthesizeName('$')),
+              t.numericLiteral(index),
+              true,
+            ),
+          ),
+        ),
+      );
+    }
+    computationBlock.body.push(...cacheStoreStatements);
+    memoStatement = t.ifStatement(
+      testCondition,
+      computationBlock,
+      t.blockStatement(cacheLoadStatements),
+    );
+  }
+
+  if (cx.env.config.enableMemoizationComments) {
+    if (changeExpressionComments.length) {
+      t.addComment(
+        memoStatement,
+        'leading',
+        ` check if ${printDelimitedCommentList(
+          changeExpressionComments,
+          'or',
+        )} changed`,
+        true,
+      );
+      t.addComment(
+        memoStatement,
+        'leading',
+        ` "useMemo" for ${printDelimitedCommentList(outputComments, 'and')}:`,
+        true,
+      );
+    } else {
+      t.addComment(
+        memoStatement,
+        'leading',
+        ' cache value with no dependencies',
+        true,
+      );
+      t.addComment(
+        memoStatement,
+        'leading',
+        ` "useMemo" for ${printDelimitedCommentList(outputComments, 'and')}:`,
+        true,
+      );
+    }
+    if (computationBlock.body.length > 0) {
+      t.addComment(
+        computationBlock.body[0]!,
+        'leading',
+        ` Inputs changed, recompute`,
+        true,
+      );
+    }
+    if (cacheLoadStatements.length > 0) {
+      t.addComment(
+        cacheLoadStatements[0]!,
+        'leading',
+        ` Inputs did not change, use cached value`,
+        true,
+      );
+    }
+  }
+  statements.push(memoStatement);
+
+  const earlyReturnValue = scope.earlyReturnValue;
+  if (earlyReturnValue !== null) {
+    CompilerError.invariant(
+      earlyReturnValue.value.name !== null &&
+        earlyReturnValue.value.name.kind === 'named',
+      {
+        reason: `Expected early return value to be promoted to a named variable`,
+        loc: earlyReturnValue.loc,
+      },
+    );
+    const name: ValidIdentifierName = earlyReturnValue.value.name.value;
+    statements.push(
+      t.ifStatement(
+        t.binaryExpression(
+          '!==',
+          t.identifier(name),
+          t.callExpression(
+            t.memberExpression(t.identifier('Symbol'), t.identifier('for')),
+            [t.stringLiteral(EARLY_RETURN_SENTINEL)],
+          ),
+        ),
+        t.blockStatement([t.returnStatement(t.identifier(name))]),
+      ),
+    );
+  }
+}
+
+function codegenTerminal(
+  cx: Context,
+  terminal: ReactiveTerminal,
+): t.Statement | null {
+  switch (terminal.kind) {
+    case 'break': {
+      if (terminal.targetKind === 'implicit') {
+        return null;
+      }
+      return createBreakStatement(
+        terminal.loc,
+        terminal.targetKind === 'labeled'
+          ? t.identifier(codegenLabel(terminal.target))
+          : null,
+      );
+    }
+    case 'continue': {
+      if (terminal.targetKind === 'implicit') {
+        return null;
+      }
+      return createContinueStatement(
+        terminal.loc,
+        terminal.targetKind === 'labeled'
+          ? t.identifier(codegenLabel(terminal.target))
+          : null,
+      );
+    }
+    case 'for': {
+      return createForStatement(
+        terminal.loc,
+        codegenForInit(cx, terminal.init),
+        codegenInstructionValueToExpression(cx, terminal.test),
+        terminal.update !== null
+          ? codegenInstructionValueToExpression(cx, terminal.update)
+          : null,
+        codegenBlock(cx, terminal.loop),
+      );
+    }
+    case 'for-in': {
+      CompilerError.invariant(terminal.init.kind === 'SequenceExpression', {
+        reason: `Expected a sequence expression init for for..in`,
+        description: `Got \`${terminal.init.kind}\` expression instead`,
+        loc: terminal.init.loc,
+      });
+      if (terminal.init.instructions.length !== 2) {
+        CompilerError.throwTodo({
+          reason: 'Support non-trivial for..in inits',
+          description: null,
+          loc: terminal.init.loc,
+          suggestions: null,
+        });
+      }
+      const iterableCollection = terminal.init.instructions[0];
+      const iterableItem = terminal.init.instructions[1];
+      let lval: t.LVal;
+      switch (iterableItem.value.kind) {
+        case 'StoreLocal': {
+          lval = codegenLValue(cx, iterableItem.value.lvalue.place);
+          break;
+        }
+        case 'Destructure': {
+          lval = codegenLValue(cx, iterableItem.value.lvalue.pattern);
+          break;
+        }
+        case 'StoreContext': {
+          CompilerError.throwTodo({
+            reason: 'Support non-trivial for..in inits',
+            description: null,
+            loc: terminal.init.loc,
+            suggestions: null,
+          });
+        }
+        default:
+          CompilerError.invariant(false, {
+            reason: `Expected a StoreLocal or Destructure to be assigned to the collection`,
+            description: `Found ${iterableItem.value.kind}`,
+            loc: iterableItem.value.loc,
+          });
+      }
+      let varDeclKind: 'const' | 'let';
+      switch (iterableItem.value.lvalue.kind) {
+        case InstructionKind.Const:
+          varDeclKind = 'const' as const;
+          break;
+        case InstructionKind.Let:
+          varDeclKind = 'let' as const;
+          break;
+        case InstructionKind.Reassign:
+          CompilerError.invariant(false, {
+            reason:
+              'Destructure should never be Reassign as it would be an Object/ArrayPattern',
+            loc: iterableItem.loc,
+          });
+        case InstructionKind.Catch:
+        case InstructionKind.HoistedConst:
+        case InstructionKind.HoistedLet:
+        case InstructionKind.HoistedFunction:
+        case InstructionKind.Function:
+          CompilerError.invariant(false, {
+            reason: `Unexpected ${iterableItem.value.lvalue.kind} variable in for..in collection`,
+            loc: iterableItem.loc,
+          });
+        default:
+          assertExhaustive(
+            iterableItem.value.lvalue.kind,
+            `Unhandled lvalue kind: ${iterableItem.value.lvalue.kind}`,
+          );
+      }
+      return createForInStatement(
+        terminal.loc,
+        /*
+         * Special handling here since we only want the VariableDeclarators without any inits
+         * This needs to be updated when we handle non-trivial ForOf inits
+         */
+        createVariableDeclaration(iterableItem.value.loc, varDeclKind, [
+          t.variableDeclarator(lval, null),
+        ]),
+        codegenInstructionValueToExpression(cx, iterableCollection.value),
+        codegenBlock(cx, terminal.loop),
+      );
+    }
+    case 'for-of': {
+      CompilerError.invariant(
+        terminal.init.kind === 'SequenceExpression' &&
+          terminal.init.instructions.length === 1 &&
+          terminal.init.instructions[0].value.kind === 'GetIterator',
+        {
+          reason: `Expected a single-expression sequence expression init for for..of`,
+          description: `Got \`${terminal.init.kind}\` expression instead`,
+          loc: terminal.init.loc,
+        },
+      );
+      const iterableCollection = terminal.init.instructions[0].value;
+
+      CompilerError.invariant(terminal.test.kind === 'SequenceExpression', {
+        reason: `Expected a sequence expression test for for..of`,
+        description: `Got \`${terminal.init.kind}\` expression instead`,
+        loc: terminal.test.loc,
+      });
+      if (terminal.test.instructions.length !== 2) {
+        CompilerError.throwTodo({
+          reason: 'Support non-trivial for..of inits',
+          description: null,
+          loc: terminal.init.loc,
+          suggestions: null,
+        });
+      }
+      const iterableItem = terminal.test.instructions[1];
+      let lval: t.LVal;
+      switch (iterableItem.value.kind) {
+        case 'StoreLocal': {
+          lval = codegenLValue(cx, iterableItem.value.lvalue.place);
+          break;
+        }
+        case 'Destructure': {
+          lval = codegenLValue(cx, iterableItem.value.lvalue.pattern);
+          break;
+        }
+        case 'StoreContext': {
+          CompilerError.throwTodo({
+            reason: 'Support non-trivial for..of inits',
+            description: null,
+            loc: terminal.init.loc,
+            suggestions: null,
+          });
+        }
+        default:
+          CompilerError.invariant(false, {
+            reason: `Expected a StoreLocal or Destructure to be assigned to the collection`,
+            description: `Found ${iterableItem.value.kind}`,
+            loc: iterableItem.value.loc,
+          });
+      }
+      let varDeclKind: 'const' | 'let';
+      switch (iterableItem.value.lvalue.kind) {
+        case InstructionKind.Const:
+          varDeclKind = 'const' as const;
+          break;
+        case InstructionKind.Let:
+          varDeclKind = 'let' as const;
+          break;
+        case InstructionKind.Reassign:
+        case InstructionKind.Catch:
+        case InstructionKind.HoistedConst:
+        case InstructionKind.HoistedLet:
+        case InstructionKind.HoistedFunction:
+        case InstructionKind.Function:
+          CompilerError.invariant(false, {
+            reason: `Unexpected ${iterableItem.value.lvalue.kind} variable in for..of collection`,
+            loc: iterableItem.loc,
+          });
+        default:
+          assertExhaustive(
+            iterableItem.value.lvalue.kind,
+            `Unhandled lvalue kind: ${iterableItem.value.lvalue.kind}`,
+          );
+      }
+      return createForOfStatement(
+        terminal.loc,
+        /*
+         * Special handling here since we only want the VariableDeclarators without any inits
+         * This needs to be updated when we handle non-trivial ForOf inits
+         */
+        createVariableDeclaration(iterableItem.value.loc, varDeclKind, [
+          t.variableDeclarator(lval, null),
+        ]),
+        codegenInstructionValueToExpression(cx, iterableCollection),
+        codegenBlock(cx, terminal.loop),
+      );
+    }
+    case 'if': {
+      const test = codegenPlaceToExpression(cx, terminal.test);
+      const consequent = codegenBlock(cx, terminal.consequent);
+      let alternate: t.Statement | null = null;
+      if (terminal.alternate !== null) {
+        const block = codegenBlock(cx, terminal.alternate);
+        if (block.body.length !== 0) {
+          alternate = block;
+        }
+      }
+      return createIfStatement(terminal.loc, test, consequent, alternate);
+    }
+    case 'return': {
+      const value = codegenPlaceToExpression(cx, terminal.value);
+      if (value.type === 'Identifier' && value.name === 'undefined') {
+        // Use implicit undefined
+        return t.returnStatement();
+      }
+      return t.returnStatement(value);
+    }
+    case 'switch': {
+      return createSwitchStatement(
+        terminal.loc,
+        codegenPlaceToExpression(cx, terminal.test),
+        terminal.cases.map(case_ => {
+          const test =
+            case_.test !== null
+              ? codegenPlaceToExpression(cx, case_.test)
+              : null;
+          const block = codegenBlock(cx, case_.block!);
+          return t.switchCase(test, block.body.length === 0 ? [] : [block]);
+        }),
+      );
+    }
+    case 'throw': {
+      return createThrowStatement(
+        terminal.loc,
+        codegenPlaceToExpression(cx, terminal.value),
+      );
+    }
+    case 'do-while': {
+      const test = codegenInstructionValueToExpression(cx, terminal.test);
+      return createDoWhileStatement(
+        terminal.loc,
+        test,
+        codegenBlock(cx, terminal.loop),
+      );
+    }
+    case 'while': {
+      const test = codegenInstructionValueToExpression(cx, terminal.test);
+      return createWhileStatement(
+        terminal.loc,
+        test,
+        codegenBlock(cx, terminal.loop),
+      );
+    }
+    case 'label': {
+      return codegenBlock(cx, terminal.block);
+    }
+    case 'try': {
+      let catchParam = null;
+      if (terminal.handlerBinding !== null) {
+        catchParam = convertIdentifier(terminal.handlerBinding.identifier);
+        cx.temp.set(terminal.handlerBinding.identifier.declarationId, null);
+      }
+      return createTryStatement(
+        terminal.loc,
+        codegenBlock(cx, terminal.block),
+        t.catchClause(catchParam, codegenBlock(cx, terminal.handler)),
+      );
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any).kind}\``,
+      );
+    }
+  }
+}
+
+function codegenInstructionNullable(
+  cx: Context,
+  instr: ReactiveInstruction,
+): t.Statement | null {
+  if (
+    instr.value.kind === 'StoreLocal' ||
+    instr.value.kind === 'StoreContext' ||
+    instr.value.kind === 'Destructure' ||
+    instr.value.kind === 'DeclareLocal' ||
+    instr.value.kind === 'DeclareContext'
+  ) {
+    let kind: InstructionKind = instr.value.lvalue.kind;
+    let lvalue: Place | Pattern;
+    let value: t.Expression | null;
+    if (instr.value.kind === 'StoreLocal') {
+      kind = cx.hasDeclared(instr.value.lvalue.place.identifier)
+        ? InstructionKind.Reassign
+        : kind;
+      lvalue = instr.value.lvalue.place;
+      value = codegenPlaceToExpression(cx, instr.value.value);
+    } else if (instr.value.kind === 'StoreContext') {
+      lvalue = instr.value.lvalue.place;
+      value = codegenPlaceToExpression(cx, instr.value.value);
+    } else if (
+      instr.value.kind === 'DeclareLocal' ||
+      instr.value.kind === 'DeclareContext'
+    ) {
+      if (cx.hasDeclared(instr.value.lvalue.place.identifier)) {
+        return null;
+      }
+      kind = instr.value.lvalue.kind;
+      lvalue = instr.value.lvalue.place;
+      value = null;
+    } else {
+      lvalue = instr.value.lvalue.pattern;
+      for (const place of eachPatternOperand(lvalue)) {
+        if (
+          kind !== InstructionKind.Reassign &&
+          place.identifier.name === null
+        ) {
+          cx.temp.set(place.identifier.declarationId, null);
+        }
+      }
+      value = codegenPlaceToExpression(cx, instr.value.value);
+    }
+    switch (kind) {
+      case InstructionKind.Const: {
+        CompilerError.invariant(instr.lvalue === null, {
+          reason: `Const declaration cannot be referenced as an expression`,
+          message: `this is ${kind}`,
+          loc: instr.value.loc,
+        });
+        return createVariableDeclaration(instr.loc, 'const', [
+          createVariableDeclarator(codegenLValue(cx, lvalue), value),
+        ]);
+      }
+      case InstructionKind.Function: {
+        CompilerError.invariant(instr.lvalue === null, {
+          reason: `Function declaration cannot be referenced as an expression`,
+          loc: instr.value.loc,
+        });
+        const genLvalue = codegenLValue(cx, lvalue);
+        CompilerError.invariant(genLvalue.type === 'Identifier', {
+          reason: 'Expected an identifier as a function declaration lvalue',
+          loc: instr.value.loc,
+        });
+        CompilerError.invariant(value?.type === 'FunctionExpression', {
+          reason: 'Expected a function as a function declaration value',
+          description: `Got ${value == null ? String(value) : value.type} at ${printInstruction(instr)}`,
+          loc: instr.value.loc,
+        });
+        return createFunctionDeclaration(
+          instr.loc,
+          genLvalue,
+          value.params,
+          value.body,
+          value.generator,
+          value.async,
+        );
+      }
+      case InstructionKind.Let: {
+        CompilerError.invariant(instr.lvalue === null, {
+          reason: `Const declaration cannot be referenced as an expression`,
+          message: `this is ${kind}`,
+          loc: instr.value.loc,
+        });
+        return createVariableDeclaration(instr.loc, 'let', [
+          createVariableDeclarator(codegenLValue(cx, lvalue), value),
+        ]);
+      }
+      case InstructionKind.Reassign: {
+        CompilerError.invariant(value !== null, {
+          reason: 'Expected a value for reassignment',
+          loc: instr.value.loc,
+        });
+        const expr = t.assignmentExpression(
+          '=',
+          codegenLValue(cx, lvalue),
+          value,
+        );
+        if (instr.lvalue !== null) {
+          if (instr.value.kind !== 'StoreContext') {
+            cx.temp.set(instr.lvalue.identifier.declarationId, expr);
+            return null;
+          } else {
+            // Handle chained reassignments for context variables
+            const statement = codegenInstruction(cx, instr, expr);
+            if (statement.type === 'EmptyStatement') {
+              return null;
+            }
+            return statement;
+          }
+        } else {
+          return createExpressionStatement(instr.loc, expr);
+        }
+      }
+      case InstructionKind.Catch: {
+        return t.emptyStatement();
+      }
+      case InstructionKind.HoistedLet:
+      case InstructionKind.HoistedConst:
+      case InstructionKind.HoistedFunction: {
+        CompilerError.invariant(false, {
+          reason: `Expected ${kind} to have been pruned in PruneHoistedContexts`,
+          loc: instr.loc,
+        });
+      }
+      default: {
+        assertExhaustive(kind, `Unexpected instruction kind \`${kind}\``);
+      }
+    }
+  } else if (
+    instr.value.kind === 'StartMemoize' ||
+    instr.value.kind === 'FinishMemoize'
+  ) {
+    return null;
+  } else if (instr.value.kind === 'Debugger') {
+    return t.debuggerStatement();
+  } else if (instr.value.kind === 'ObjectMethod') {
+    CompilerError.invariant(instr.lvalue, {
+      reason: 'Expected object methods to have a temp lvalue',
+      loc: GeneratedSource,
+    });
+    cx.objectMethods.set(instr.lvalue.identifier.id, instr.value);
+    return null;
+  } else {
+    const value = codegenInstructionValue(cx, instr.value);
+    const statement = codegenInstruction(cx, instr, value);
+    if (statement.type === 'EmptyStatement') {
+      return null;
+    }
+    return statement;
+  }
+}
+
+function codegenForInit(
+  cx: Context,
+  init: ReactiveValue,
+): t.Expression | t.VariableDeclaration | null {
+  if (init.kind === 'SequenceExpression') {
+    const body = codegenBlock(
+      cx,
+      init.instructions.map(instruction => ({
+        kind: 'instruction',
+        instruction,
+      })),
+    ).body;
+    const declarators: Array<t.VariableDeclarator> = [];
+    let kind: 'let' | 'const' = 'const';
+    body.forEach(instr => {
+      let top: undefined | t.VariableDeclarator = undefined;
+      if (
+        instr.type === 'ExpressionStatement' &&
+        instr.expression.type === 'AssignmentExpression' &&
+        instr.expression.operator === '=' &&
+        instr.expression.left.type === 'Identifier' &&
+        (top = declarators.at(-1))?.id.type === 'Identifier' &&
+        top?.id.name === instr.expression.left.name &&
+        top?.init == null
+      ) {
+        top.init = instr.expression.right;
+      } else {
+        CompilerError.invariant(
+          instr.type === 'VariableDeclaration' &&
+            (instr.kind === 'let' || instr.kind === 'const'),
+          {
+            reason: 'Expected a variable declaration',
+            description: `Got ${instr.type}`,
+            loc: init.loc,
+          },
+        );
+        if (instr.kind === 'let') {
+          kind = 'let';
+        }
+        declarators.push(...instr.declarations);
+      }
+    });
+    CompilerError.invariant(declarators.length > 0, {
+      reason: 'Expected a variable declaration',
+      loc: init.loc,
+    });
+    return t.variableDeclaration(kind, declarators);
+  } else {
+    return codegenInstructionValueToExpression(cx, init);
+  }
+}
+
+function printDependencyComment(dependency: ReactiveScopeDependency): string {
+  const identifier = convertIdentifier(dependency.identifier);
+  let name = identifier.name;
+  if (dependency.path !== null) {
+    for (const path of dependency.path) {
+      name += `.${path.property}`;
+    }
+  }
+  return name;
+}
+
+function printDelimitedCommentList(
+  items: Array<string>,
+  finalCompletion: string,
+): string {
+  if (items.length === 2) {
+    return items.join(` ${finalCompletion} `);
+  } else if (items.length <= 1) {
+    return items.join('');
+  }
+
+  let output = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]!;
+    if (i < items.length - 2) {
+      output.push(`${item}, `);
+    } else if (i === items.length - 2) {
+      output.push(`${item}, ${finalCompletion} `);
+    } else {
+      output.push(item);
+    }
+  }
+  return output.join('');
+}
+
+function codegenDependency(
+  cx: Context,
+  dependency: ReactiveScopeDependency,
+): t.Expression {
+  let object: t.Expression = convertIdentifier(dependency.identifier);
+  if (dependency.path.length !== 0) {
+    const hasOptional = dependency.path.some(path => path.optional);
+    for (const path of dependency.path) {
+      const property =
+        typeof path.property === 'string'
+          ? t.identifier(path.property)
+          : t.numericLiteral(path.property);
+      const isComputed = typeof path.property !== 'string';
+      if (hasOptional) {
+        object = t.optionalMemberExpression(
+          object,
+          property,
+          isComputed,
+          path.optional,
+        );
+      } else {
+        object = t.memberExpression(object, property, isComputed);
+      }
+    }
+  }
+  return object;
+}
+
+function withLoc<T extends (...args: Array<any>) => t.Node>(
+  fn: T,
+): (
+  loc: SourceLocation | null | undefined,
+  ...args: Parameters<T>
+) => ReturnType<T> {
+  return (
+    loc: SourceLocation | null | undefined,
+    ...args: Parameters<T>
+  ): ReturnType<T> => {
+    const node = fn(...args);
+    if (loc != null && loc != GeneratedSource) {
+      node.loc = loc;
+    }
+    return node as ReturnType<T>;
+  };
+}
+
+const createIdentifier = withLoc(t.identifier);
+const createArrayPattern = withLoc(t.arrayPattern);
+const createObjectPattern = withLoc(t.objectPattern);
+const createBinaryExpression = withLoc(t.binaryExpression);
+const createExpressionStatement = withLoc(t.expressionStatement);
+const _createLabelledStatement = withLoc(t.labeledStatement);
+const createVariableDeclaration = withLoc(t.variableDeclaration);
+const createFunctionDeclaration = withLoc(t.functionDeclaration);
+const createWhileStatement = withLoc(t.whileStatement);
+const createDoWhileStatement = withLoc(t.doWhileStatement);
+const createSwitchStatement = withLoc(t.switchStatement);
+const createIfStatement = withLoc(t.ifStatement);
+const createForStatement = withLoc(t.forStatement);
+const createForOfStatement = withLoc(t.forOfStatement);
+const createForInStatement = withLoc(t.forInStatement);
+const createTaggedTemplateExpression = withLoc(t.taggedTemplateExpression);
+const createLogicalExpression = withLoc(t.logicalExpression);
+const createSequenceExpression = withLoc(t.sequenceExpression);
+const createConditionalExpression = withLoc(t.conditionalExpression);
+const createTemplateLiteral = withLoc(t.templateLiteral);
+const createJsxNamespacedName = withLoc(t.jsxNamespacedName);
+const createJsxElement = withLoc(t.jsxElement);
+const createJsxAttribute = withLoc(t.jsxAttribute);
+const createJsxIdentifier = withLoc(t.jsxIdentifier);
+const createJsxExpressionContainer = withLoc(t.jsxExpressionContainer);
+const createJsxText = withLoc(t.jsxText);
+const createJsxClosingElement = withLoc(t.jsxClosingElement);
+const createJsxOpeningElement = withLoc(t.jsxOpeningElement);
+const createStringLiteral = withLoc(t.stringLiteral);
+const createThrowStatement = withLoc(t.throwStatement);
+const createTryStatement = withLoc(t.tryStatement);
+const createBreakStatement = withLoc(t.breakStatement);
+const createContinueStatement = withLoc(t.continueStatement);
+
+function createVariableDeclarator(
+  id: t.LVal,
+  init?: t.Expression | null,
+): t.VariableDeclarator {
+  const node = t.variableDeclarator(id, init);
+
+  /*
+   * The variable declarator location is not preserved in HIR, however, we can use the
+   * start location of the id and the end location of the init to recreate the
+   * exact original variable declarator location.
+   *
+   * Or if init is null, we likely have a declaration without an initializer, so we can use the id.loc.end as the end location.
+   */
+  if (id.loc && (init === null || init?.loc)) {
+    node.loc = {
+      start: id.loc.start,
+      end: init?.loc?.end ?? id.loc.end,
+      filename: id.loc.filename,
+      identifierName: undefined,
+    };
+  }
+
+  return node;
+}
+
+function createHookGuard(
+  guard: ExternalFunction,
+  context: ProgramContext,
+  stmts: Array<t.Statement>,
+  before: GuardKind,
+  after: GuardKind,
+): t.TryStatement {
+  const guardFnName = context.addImportSpecifier(guard).name;
+  function createHookGuardImpl(kind: number): t.ExpressionStatement {
+    return t.expressionStatement(
+      t.callExpression(t.identifier(guardFnName), [t.numericLiteral(kind)]),
+    );
+  }
+
+  return t.tryStatement(
+    t.blockStatement([createHookGuardImpl(before), ...stmts]),
+    null,
+    t.blockStatement([createHookGuardImpl(after)]),
+  );
+}
+
+/**
+ * Create a call expression.
+ * If enableEmitHookGuards is set and the callExpression is a hook call,
+ * the following transform will be made.
+ * ```js
+ * // source
+ * useHook(arg1, arg2)
+ *
+ * // codegen
+ * (() => {
+ *   try {
+ *     $dispatcherGuard(PUSH_EXPECT_HOOK);
+ *     return useHook(arg1, arg2);
+ *   } finally {
+ *     $dispatcherGuard(POP_EXPECT_HOOK);
+ *   }
+ * })()
+ * ```
+ */
+function createCallExpression(
+  env: Environment,
+  callee: t.Expression,
+  args: Array<t.Expression | t.SpreadElement>,
+  loc: SourceLocation | null,
+  isHook: boolean,
+): t.CallExpression {
+  const callExpr = t.callExpression(callee, args);
+  if (loc != null && loc != GeneratedSource) {
+    callExpr.loc = loc;
+  }
+
+  const hookGuard = env.config.enableEmitHookGuards;
+  if (hookGuard != null && isHook && env.outputMode === 'client') {
+    const iife = t.functionExpression(
+      null,
+      [],
+      t.blockStatement([
+        createHookGuard(
+          hookGuard,
+          env.programContext,
+          [t.returnStatement(callExpr)],
+          GuardKind.AllowHook,
+          GuardKind.DisallowHook,
+        ),
+      ]),
+    );
+    return t.callExpression(iife, []);
+  } else {
+    return callExpr;
+  }
+}
+
+type Temporaries = Map<DeclarationId, t.Expression | t.JSXText | null>;
+
+function codegenLabel(id: BlockId): string {
+  return `bb${id}`;
+}
+
+function codegenInstruction(
+  cx: Context,
+  instr: ReactiveInstruction,
+  value: t.Expression | t.JSXText,
+): t.Statement {
+  if (t.isStatement(value)) {
+    return value;
+  }
+  if (instr.lvalue === null) {
+    return t.expressionStatement(convertValueToExpression(value));
+  }
+  if (instr.lvalue.identifier.name === null) {
+    // temporary
+    cx.temp.set(instr.lvalue.identifier.declarationId, value);
+    return t.emptyStatement();
+  } else {
+    const expressionValue = convertValueToExpression(value);
+    if (cx.hasDeclared(instr.lvalue.identifier)) {
+      return createExpressionStatement(
+        instr.loc,
+        t.assignmentExpression(
+          '=',
+          convertIdentifier(instr.lvalue.identifier),
+          expressionValue,
+        ),
+      );
+    } else {
+      return createVariableDeclaration(instr.loc, 'const', [
+        createVariableDeclarator(
+          convertIdentifier(instr.lvalue.identifier),
+          expressionValue,
+        ),
+      ]);
+    }
+  }
+}
+
+function convertValueToExpression(
+  value: t.JSXText | t.Expression,
+): t.Expression {
+  if (value.type === 'JSXText') {
+    return createStringLiteral(value.loc, value.value);
+  }
+  return value;
+}
+
+function codegenInstructionValueToExpression(
+  cx: Context,
+  instrValue: ReactiveValue,
+): t.Expression {
+  const value = codegenInstructionValue(cx, instrValue);
+  return convertValueToExpression(value);
+}
+
+function codegenInstructionValue(
+  cx: Context,
+  instrValue: ReactiveValue,
+): t.Expression | t.JSXText {
+  let value: t.Expression | t.JSXText;
+  switch (instrValue.kind) {
+    case 'ArrayExpression': {
+      const elements = instrValue.elements.map(element => {
+        if (element.kind === 'Identifier') {
+          return codegenPlaceToExpression(cx, element);
+        } else if (element.kind === 'Spread') {
+          return t.spreadElement(codegenPlaceToExpression(cx, element.place));
+        } else {
+          return null;
+        }
+      });
+      value = t.arrayExpression(elements);
+      break;
+    }
+    case 'BinaryExpression': {
+      const left = codegenPlaceToExpression(cx, instrValue.left);
+      const right = codegenPlaceToExpression(cx, instrValue.right);
+      value = createBinaryExpression(
+        instrValue.loc,
+        instrValue.operator,
+        left,
+        right,
+      );
+      break;
+    }
+    case 'UnaryExpression': {
+      value = t.unaryExpression(
+        instrValue.operator,
+        codegenPlaceToExpression(cx, instrValue.value),
+      );
+      break;
+    }
+    case 'Primitive': {
+      value = codegenValue(cx, instrValue.loc, instrValue.value);
+      break;
+    }
+    case 'CallExpression': {
+      if (cx.env.config.enableForest) {
+        const callee = codegenPlaceToExpression(cx, instrValue.callee);
+        const args = instrValue.args.map(arg => codegenArgument(cx, arg));
+        value = t.callExpression(callee, args);
+        if (instrValue.typeArguments != null) {
+          value.typeArguments = t.typeParameterInstantiation(
+            instrValue.typeArguments,
+          );
+        }
+        break;
+      }
+      const isHook = getHookKind(cx.env, instrValue.callee.identifier) != null;
+      const callee = codegenPlaceToExpression(cx, instrValue.callee);
+      const args = instrValue.args.map(arg => codegenArgument(cx, arg));
+      value = createCallExpression(
+        cx.env,
+        callee,
+        args,
+        instrValue.loc,
+        isHook,
+      );
+      break;
+    }
+    case 'OptionalExpression': {
+      const optionalValue = codegenInstructionValueToExpression(
+        cx,
+        instrValue.value,
+      );
+      switch (optionalValue.type) {
+        case 'OptionalCallExpression':
+        case 'CallExpression': {
+          CompilerError.invariant(t.isExpression(optionalValue.callee), {
+            reason: 'v8 intrinsics are validated during lowering',
+            loc: optionalValue.callee.loc ?? GeneratedSource,
+          });
+          value = t.optionalCallExpression(
+            optionalValue.callee,
+            optionalValue.arguments,
+            instrValue.optional,
+          );
+          break;
+        }
+        case 'OptionalMemberExpression':
+        case 'MemberExpression': {
+          const property = optionalValue.property;
+          CompilerError.invariant(t.isExpression(property), {
+            reason: 'Private names are validated during lowering',
+            loc: property.loc ?? GeneratedSource,
+          });
+          value = t.optionalMemberExpression(
+            optionalValue.object,
+            property,
+            optionalValue.computed,
+            instrValue.optional,
+          );
+          break;
+        }
+        default: {
+          CompilerError.invariant(false, {
+            reason:
+              'Expected an optional value to resolve to a call expression or member expression',
+            description: `Got a \`${optionalValue.type}\``,
+            loc: instrValue.loc,
+          });
+        }
+      }
+      break;
+    }
+    case 'MethodCall': {
+      const isHook =
+        getHookKind(cx.env, instrValue.property.identifier) != null;
+      const memberExpr = codegenPlaceToExpression(cx, instrValue.property);
+      CompilerError.invariant(
+        t.isMemberExpression(memberExpr) ||
+          t.isOptionalMemberExpression(memberExpr),
+        {
+          reason:
+            '[Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression',
+          message: `Got: '${memberExpr.type}'`,
+          loc: memberExpr.loc ?? GeneratedSource,
+        },
+      );
+      CompilerError.invariant(
+        t.isNodesEquivalent(
+          memberExpr.object,
+          codegenPlaceToExpression(cx, instrValue.receiver),
+        ),
+        {
+          reason:
+            '[Codegen] Internal error: Forget should always generate MethodCall::property ' +
+            'as a MemberExpression of MethodCall::receiver',
+          loc: memberExpr.loc ?? GeneratedSource,
+        },
+      );
+      const args = instrValue.args.map(arg => codegenArgument(cx, arg));
+      value = createCallExpression(
+        cx.env,
+        memberExpr,
+        args,
+        instrValue.loc,
+        isHook,
+      );
+      break;
+    }
+    case 'NewExpression': {
+      const callee = codegenPlaceToExpression(cx, instrValue.callee);
+      const args = instrValue.args.map(arg => codegenArgument(cx, arg));
+      value = t.newExpression(callee, args);
+      break;
+    }
+    case 'ObjectExpression': {
+      const properties = [];
+      for (const property of instrValue.properties) {
+        if (property.kind === 'ObjectProperty') {
+          const key = codegenObjectPropertyKey(cx, property.key);
+
+          switch (property.type) {
+            case 'property': {
+              const value = codegenPlaceToExpression(cx, property.place);
+              properties.push(
+                t.objectProperty(
+                  key,
+                  value,
+                  property.key.kind === 'computed',
+                  key.type === 'Identifier' &&
+                    value.type === 'Identifier' &&
+                    value.name === key.name,
+                ),
+              );
+              break;
+            }
+            case 'method': {
+              const method = cx.objectMethods.get(property.place.identifier.id);
+              CompilerError.invariant(method, {
+                reason: 'Expected ObjectMethod instruction',
+                loc: GeneratedSource,
+              });
+              const loweredFunc = method.loweredFunc;
+              const reactiveFunction = buildReactiveFunction(loweredFunc.func);
+              pruneUnusedLabels(reactiveFunction);
+              pruneUnusedLValues(reactiveFunction);
+              const fn = codegenReactiveFunction(
+                new Context(
+                  cx.env,
+                  reactiveFunction.id ?? '[[ anonymous ]]',
+                  cx.uniqueIdentifiers,
+                  cx.fbtOperands,
+                  cx.temp,
+                ),
+                reactiveFunction,
+              ).unwrap();
+
+              /*
+               * ObjectMethod builder must be backwards compatible with older versions of babel.
+               * https://github.com/babel/babel/blob/v7.7.4/packages/babel-types/src/definitions/core.js#L599-L603
+               */
+              const babelNode = t.objectMethod(
+                'method',
+                key,
+                fn.params,
+                fn.body,
+                false,
+              );
+              babelNode.async = fn.async;
+              babelNode.generator = fn.generator;
+              properties.push(babelNode);
+              break;
+            }
+            default:
+              assertExhaustive(
+                property.type,
+                `Unexpected property type: ${property.type}`,
+              );
+          }
+        } else {
+          properties.push(
+            t.spreadElement(codegenPlaceToExpression(cx, property.place)),
+          );
+        }
+      }
+      value = t.objectExpression(properties);
+      break;
+    }
+    case 'JSXText': {
+      value = createJsxText(instrValue.loc, instrValue.value);
+      break;
+    }
+    case 'JsxExpression': {
+      const attributes: Array<t.JSXAttribute | t.JSXSpreadAttribute> = [];
+      for (const attribute of instrValue.props) {
+        attributes.push(codegenJsxAttribute(cx, attribute));
+      }
+      let tagValue =
+        instrValue.tag.kind === 'Identifier'
+          ? codegenPlaceToExpression(cx, instrValue.tag)
+          : t.stringLiteral(instrValue.tag.name);
+      let tag: t.JSXIdentifier | t.JSXNamespacedName | t.JSXMemberExpression;
+      if (tagValue.type === 'Identifier') {
+        tag = createJsxIdentifier(instrValue.tag.loc, tagValue.name);
+      } else if (tagValue.type === 'MemberExpression') {
+        tag = convertMemberExpressionToJsx(tagValue);
+      } else {
+        CompilerError.invariant(tagValue.type === 'StringLiteral', {
+          reason: `Expected JSX tag to be an identifier or string, got \`${tagValue.type}\``,
+          loc: tagValue.loc ?? GeneratedSource,
+        });
+        if (tagValue.value.indexOf(':') >= 0) {
+          const [namespace, name] = tagValue.value.split(':', 2);
+          tag = createJsxNamespacedName(
+            instrValue.tag.loc,
+            createJsxIdentifier(instrValue.tag.loc, namespace),
+            createJsxIdentifier(instrValue.tag.loc, name),
+          );
+        } else {
+          tag = createJsxIdentifier(instrValue.loc, tagValue.value);
+        }
+      }
+      let children;
+      if (
+        tagValue.type === 'StringLiteral' &&
+        SINGLE_CHILD_FBT_TAGS.has(tagValue.value)
+      ) {
+        CompilerError.invariant(instrValue.children != null, {
+          reason: 'Expected fbt element to have children',
+          loc: instrValue.loc,
+        });
+        children = instrValue.children.map(child =>
+          codegenJsxFbtChildElement(cx, child),
+        );
+      } else {
+        children =
+          instrValue.children !== null
+            ? instrValue.children.map(child => codegenJsxElement(cx, child))
+            : [];
+      }
+      value = createJsxElement(
+        instrValue.loc,
+        createJsxOpeningElement(
+          instrValue.openingLoc,
+          tag,
+          attributes,
+          instrValue.children === null,
+        ),
+        instrValue.children !== null
+          ? createJsxClosingElement(instrValue.closingLoc, tag)
+          : null,
+        children,
+        instrValue.children === null,
+      );
+      break;
+    }
+    case 'JsxFragment': {
+      value = t.jsxFragment(
+        t.jsxOpeningFragment(),
+        t.jsxClosingFragment(),
+        instrValue.children.map(child => codegenJsxElement(cx, child)),
+      );
+      break;
+    }
+    case 'UnsupportedNode': {
+      const node = instrValue.node;
+      if (!t.isExpression(node)) {
+        return node as any; // TODO handle statements, jsx fragments
+      }
+      value = node;
+      break;
+    }
+    case 'PropertyStore':
+    case 'PropertyLoad':
+    case 'PropertyDelete': {
+      let memberExpr;
+      /*
+       * We currently only lower single chains of optional memberexpr.
+       * (See BuildHIR.ts for more detail.)
+       */
+      if (typeof instrValue.property === 'string') {
+        memberExpr = t.memberExpression(
+          codegenPlaceToExpression(cx, instrValue.object),
+          t.identifier(instrValue.property),
+        );
+      } else {
+        memberExpr = t.memberExpression(
+          codegenPlaceToExpression(cx, instrValue.object),
+          t.numericLiteral(instrValue.property),
+          true,
+        );
+      }
+      if (instrValue.kind === 'PropertyStore') {
+        value = t.assignmentExpression(
+          '=',
+          memberExpr,
+          codegenPlaceToExpression(cx, instrValue.value),
+        );
+      } else if (instrValue.kind === 'PropertyLoad') {
+        value = memberExpr;
+      } else {
+        value = t.unaryExpression('delete', memberExpr);
+      }
+      break;
+    }
+    case 'ComputedStore': {
+      value = t.assignmentExpression(
+        '=',
+        t.memberExpression(
+          codegenPlaceToExpression(cx, instrValue.object),
+          codegenPlaceToExpression(cx, instrValue.property),
+          true,
+        ),
+        codegenPlaceToExpression(cx, instrValue.value),
+      );
+      break;
+    }
+    case 'ComputedLoad': {
+      const object = codegenPlaceToExpression(cx, instrValue.object);
+      const property = codegenPlaceToExpression(cx, instrValue.property);
+      value = t.memberExpression(object, property, true);
+      break;
+    }
+    case 'ComputedDelete': {
+      value = t.unaryExpression(
+        'delete',
+        t.memberExpression(
+          codegenPlaceToExpression(cx, instrValue.object),
+          codegenPlaceToExpression(cx, instrValue.property),
+          true,
+        ),
+      );
+      break;
+    }
+    case 'LoadLocal':
+    case 'LoadContext': {
+      value = codegenPlaceToExpression(cx, instrValue.place);
+      break;
+    }
+    case 'FunctionExpression': {
+      const loweredFunc = instrValue.loweredFunc.func;
+      const reactiveFunction = buildReactiveFunction(loweredFunc);
+      pruneUnusedLabels(reactiveFunction);
+      pruneUnusedLValues(reactiveFunction);
+      pruneHoistedContexts(reactiveFunction);
+      const fn = codegenReactiveFunction(
+        new Context(
+          cx.env,
+          reactiveFunction.id ?? '[[ anonymous ]]',
+          cx.uniqueIdentifiers,
+          cx.fbtOperands,
+          cx.temp,
+        ),
+        reactiveFunction,
+      ).unwrap();
+
+      if (instrValue.type === 'ArrowFunctionExpression') {
+        let body: t.BlockStatement | t.Expression = fn.body;
+        if (body.body.length === 1 && loweredFunc.directives.length == 0) {
+          const stmt = body.body[0]!;
+          if (stmt.type === 'ReturnStatement' && stmt.argument != null) {
+            body = stmt.argument;
+          }
+        }
+        value = t.arrowFunctionExpression(fn.params, body, fn.async);
+      } else {
+        value = t.functionExpression(
+          instrValue.name != null ? t.identifier(instrValue.name) : null,
+          fn.params,
+          fn.body,
+          fn.generator,
+          fn.async,
+        );
+      }
+      if (
+        cx.env.config.enableNameAnonymousFunctions &&
+        instrValue.name == null &&
+        instrValue.nameHint != null
+      ) {
+        const name = instrValue.nameHint;
+        value = t.memberExpression(
+          t.objectExpression([t.objectProperty(t.stringLiteral(name), value)]),
+          t.stringLiteral(name),
+          true,
+          false,
+        );
+      }
+      break;
+    }
+    case 'TaggedTemplateExpression': {
+      value = createTaggedTemplateExpression(
+        instrValue.loc,
+        codegenPlaceToExpression(cx, instrValue.tag),
+        t.templateLiteral([t.templateElement(instrValue.value)], []),
+      );
+      break;
+    }
+    case 'TypeCastExpression': {
+      if (t.isTSType(instrValue.typeAnnotation)) {
+        if (instrValue.typeAnnotationKind === 'satisfies') {
+          value = t.tsSatisfiesExpression(
+            codegenPlaceToExpression(cx, instrValue.value),
+            instrValue.typeAnnotation,
+          );
+        } else {
+          value = t.tsAsExpression(
+            codegenPlaceToExpression(cx, instrValue.value),
+            instrValue.typeAnnotation,
+          );
+        }
+      } else {
+        value = t.typeCastExpression(
+          codegenPlaceToExpression(cx, instrValue.value),
+          t.typeAnnotation(instrValue.typeAnnotation),
+        );
+      }
+      break;
+    }
+    case 'LogicalExpression': {
+      value = createLogicalExpression(
+        instrValue.loc,
+        instrValue.operator,
+        codegenInstructionValueToExpression(cx, instrValue.left),
+        codegenInstructionValueToExpression(cx, instrValue.right),
+      );
+      break;
+    }
+    case 'ConditionalExpression': {
+      value = createConditionalExpression(
+        instrValue.loc,
+        codegenInstructionValueToExpression(cx, instrValue.test),
+        codegenInstructionValueToExpression(cx, instrValue.consequent),
+        codegenInstructionValueToExpression(cx, instrValue.alternate),
+      );
+      break;
+    }
+    case 'SequenceExpression': {
+      const body = codegenBlockNoReset(
+        cx,
+        instrValue.instructions.map(instruction => ({
+          kind: 'instruction',
+          instruction,
+        })),
+      ).body;
+      const expressions = body.map(stmt => {
+        if (stmt.type === 'ExpressionStatement') {
+          return stmt.expression;
+        } else {
+          if (t.isVariableDeclaration(stmt)) {
+            const declarator = stmt.declarations[0];
+            cx.errors.push({
+              reason: `(CodegenReactiveFunction::codegenInstructionValue) Cannot declare variables in a value block, tried to declare '${
+                (declarator.id as t.Identifier).name
+              }'`,
+              category: ErrorCategory.Todo,
+              loc: declarator.loc ?? null,
+              suggestions: null,
+            });
+            return t.stringLiteral(`TODO handle ${declarator.id}`);
+          } else {
+            cx.errors.push({
+              reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
+              category: ErrorCategory.Todo,
+              loc: stmt.loc ?? null,
+              suggestions: null,
+            });
+            return t.stringLiteral(`TODO handle ${stmt.type}`);
+          }
+        }
+      });
+      if (expressions.length === 0) {
+        value = codegenInstructionValueToExpression(cx, instrValue.value);
+      } else {
+        value = createSequenceExpression(instrValue.loc, [
+          ...expressions,
+          codegenInstructionValueToExpression(cx, instrValue.value),
+        ]);
+      }
+      break;
+    }
+    case 'TemplateLiteral': {
+      value = createTemplateLiteral(
+        instrValue.loc,
+        instrValue.quasis.map(q => t.templateElement(q)),
+        instrValue.subexprs.map(p => codegenPlaceToExpression(cx, p)),
+      );
+      break;
+    }
+    case 'LoadGlobal': {
+      value = t.identifier(instrValue.binding.name);
+      break;
+    }
+    case 'RegExpLiteral': {
+      value = t.regExpLiteral(instrValue.pattern, instrValue.flags);
+      break;
+    }
+    case 'MetaProperty': {
+      value = t.metaProperty(
+        t.identifier(instrValue.meta),
+        t.identifier(instrValue.property),
+      );
+      break;
+    }
+    case 'Await': {
+      value = t.awaitExpression(codegenPlaceToExpression(cx, instrValue.value));
+      break;
+    }
+    case 'GetIterator': {
+      value = codegenPlaceToExpression(cx, instrValue.collection);
+      break;
+    }
+    case 'IteratorNext': {
+      value = codegenPlaceToExpression(cx, instrValue.iterator);
+      break;
+    }
+    case 'NextPropertyOf': {
+      value = codegenPlaceToExpression(cx, instrValue.value);
+      break;
+    }
+    case 'PostfixUpdate': {
+      value = t.updateExpression(
+        instrValue.operation,
+        codegenPlaceToExpression(cx, instrValue.lvalue),
+        false,
+      );
+      break;
+    }
+    case 'PrefixUpdate': {
+      value = t.updateExpression(
+        instrValue.operation,
+        codegenPlaceToExpression(cx, instrValue.lvalue),
+        true,
+      );
+      break;
+    }
+    case 'StoreLocal': {
+      CompilerError.invariant(
+        instrValue.lvalue.kind === InstructionKind.Reassign,
+        {
+          reason: `Unexpected StoreLocal in codegenInstructionValue`,
+          loc: instrValue.loc,
+        },
+      );
+      value = t.assignmentExpression(
+        '=',
+        codegenLValue(cx, instrValue.lvalue.place),
+        codegenPlaceToExpression(cx, instrValue.value),
+      );
+      break;
+    }
+    case 'StoreGlobal': {
+      value = t.assignmentExpression(
+        '=',
+        t.identifier(instrValue.name),
+        codegenPlaceToExpression(cx, instrValue.value),
+      );
+      break;
+    }
+    case 'StartMemoize':
+    case 'FinishMemoize':
+    case 'Debugger':
+    case 'DeclareLocal':
+    case 'DeclareContext':
+    case 'Destructure':
+    case 'ObjectMethod':
+    case 'StoreContext': {
+      CompilerError.invariant(false, {
+        reason: `Unexpected ${instrValue.kind} in codegenInstructionValue`,
+        loc: instrValue.loc,
+      });
+    }
+    default: {
+      assertExhaustive(
+        instrValue,
+        `Unexpected instruction value kind \`${(instrValue as any).kind}\``,
+      );
+    }
+  }
+  if (instrValue.loc != null && instrValue.loc != GeneratedSource) {
+    value.loc = instrValue.loc;
+  }
+  return value;
+}
+
+/**
+ * Due to a bug in earlier Babel versions, JSX string attributes with double quotes, unicode characters, or special
+ * control characters such as \n may be escaped unnecessarily. To avoid trigger this Babel bug, we use a
+ * JsxExpressionContainer for such strings.
+ *
+ * u0000 to u001F: C0 control codes
+ * u007F         : Delete character
+ * u0080 to u009F: C1 control codes
+ * u00A0 to uFFFF: All non-basic Latin characters
+ * https://en.wikipedia.org/wiki/List_of_Unicode_characters#Control_codes
+ *
+ * u010000 to u10FFFF: Astral plane characters
+ * https://mathiasbynens.be/notes/javascript-unicode
+ */
+const STRING_REQUIRES_EXPR_CONTAINER_PATTERN =
+  /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}\u{010000}-\u{10FFFF}]|"|\\/u;
+function codegenJsxAttribute(
+  cx: Context,
+  attribute: JsxAttribute,
+): t.JSXAttribute | t.JSXSpreadAttribute {
+  switch (attribute.kind) {
+    case 'JsxAttribute': {
+      let propName: t.JSXIdentifier | t.JSXNamespacedName;
+      if (attribute.name.indexOf(':') === -1) {
+        propName = createJsxIdentifier(attribute.place.loc, attribute.name);
+      } else {
+        const [namespace, name] = attribute.name.split(':', 2);
+        propName = createJsxNamespacedName(
+          attribute.place.loc,
+          createJsxIdentifier(attribute.place.loc, namespace),
+          createJsxIdentifier(attribute.place.loc, name),
+        );
+      }
+      const innerValue = codegenPlaceToExpression(cx, attribute.place);
+      let value;
+      switch (innerValue.type) {
+        case 'StringLiteral': {
+          value = innerValue;
+          if (
+            STRING_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value) &&
+            !cx.fbtOperands.has(attribute.place.identifier.id)
+          ) {
+            value = createJsxExpressionContainer(value.loc, value);
+          }
+          break;
+        }
+        default: {
+          /*
+           * NOTE JSXFragment is technically allowed as an attribute value per the spec
+           * but many tools do not support this case. We emit fragments wrapped in an
+           * expression container for compatibility purposes.
+           * spec: https://github.com/facebook/jsx/blob/main/AST.md#jsx-attributes
+           */
+          value = createJsxExpressionContainer(attribute.place.loc, innerValue);
+          break;
+        }
+      }
+      return createJsxAttribute(attribute.place.loc, propName, value);
+    }
+    case 'JsxSpreadAttribute': {
+      return t.jsxSpreadAttribute(
+        codegenPlaceToExpression(cx, attribute.argument),
+      );
+    }
+    default: {
+      assertExhaustive(
+        attribute,
+        `Unexpected attribute kind \`${(attribute as any).kind}\``,
+      );
+    }
+  }
+}
+
+const JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN = /[<>&{}]/;
+function codegenJsxElement(
+  cx: Context,
+  place: Place,
+):
+  | t.JSXText
+  | t.JSXExpressionContainer
+  | t.JSXSpreadChild
+  | t.JSXElement
+  | t.JSXFragment {
+  const value = codegenPlace(cx, place);
+  switch (value.type) {
+    case 'JSXText': {
+      if (JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value)) {
+        return createJsxExpressionContainer(
+          place.loc,
+          createStringLiteral(place.loc, value.value),
+        );
+      }
+      return createJsxText(place.loc, value.value);
+    }
+    case 'JSXElement':
+    case 'JSXFragment': {
+      return value;
+    }
+    default: {
+      return createJsxExpressionContainer(place.loc, value);
+    }
+  }
+}
+
+function codegenJsxFbtChildElement(
+  cx: Context,
+  place: Place,
+):
+  | t.JSXText
+  | t.JSXExpressionContainer
+  | t.JSXSpreadChild
+  | t.JSXElement
+  | t.JSXFragment {
+  const value = codegenPlace(cx, place);
+  switch (value.type) {
+    // fbt:param only allows JSX element or expression container as children
+    case 'JSXText':
+    case 'JSXElement': {
+      return value;
+    }
+    default: {
+      return createJsxExpressionContainer(place.loc, value);
+    }
+  }
+}
+
+function convertMemberExpressionToJsx(
+  expr: t.MemberExpression,
+): t.JSXMemberExpression {
+  CompilerError.invariant(expr.property.type === 'Identifier', {
+    reason: 'Expected JSX member expression property to be a string',
+    loc: expr.loc ?? GeneratedSource,
+  });
+  const property = t.jsxIdentifier(expr.property.name);
+  if (expr.object.type === 'Identifier') {
+    return t.jsxMemberExpression(t.jsxIdentifier(expr.object.name), property);
+  } else {
+    CompilerError.invariant(expr.object.type === 'MemberExpression', {
+      reason:
+        'Expected JSX member expression to be an identifier or nested member expression',
+      loc: expr.object.loc ?? GeneratedSource,
+    });
+    const object = convertMemberExpressionToJsx(expr.object);
+    return t.jsxMemberExpression(object, property);
+  }
+}
+
+function codegenObjectPropertyKey(
+  cx: Context,
+  key: ObjectPropertyKey,
+): t.Expression {
+  switch (key.kind) {
+    case 'string': {
+      return t.stringLiteral(key.name);
+    }
+    case 'identifier': {
+      return t.identifier(key.name);
+    }
+    case 'computed': {
+      const expr = codegenPlace(cx, key.name);
+      CompilerError.invariant(t.isExpression(expr), {
+        reason: 'Expected object property key to be an expression',
+        loc: key.name.loc,
+      });
+      return expr;
+    }
+    case 'number': {
+      return t.numericLiteral(key.name);
+    }
+  }
+}
+
+function codegenArrayPattern(
+  cx: Context,
+  pattern: ArrayPattern,
+): t.ArrayPattern {
+  const hasHoles = !pattern.items.every(e => e.kind !== 'Hole');
+  if (hasHoles) {
+    const result = createArrayPattern(pattern.loc, []);
+    /*
+     * Older versions of babel have a validation bug fixed by
+     * https://github.com/babel/babel/pull/10917
+     * https://github.com/babel/babel/commit/e7b80a2cb93cf28010207fc3cdd19b4568ca35b9#diff-19b555d2f3904c206af406540d9df200b1e16befedb83ff39ebfcbd876f7fa8aL52
+     *
+     * Link to buggy older version (observe that elements must be PatternLikes here)
+     * https://github.com/babel/babel/blob/v7.7.4/packages/babel-types/src/definitions/es2015.js#L50-L53
+     *
+     * Link to newer versions with correct validation (observe elements can be PatternLike | null)
+     * https://github.com/babel/babel/blob/v7.23.0/packages/babel-types/src/definitions/core.ts#L1306-L1311
+     */
+    for (const item of pattern.items) {
+      if (item.kind === 'Hole') {
+        result.elements.push(null);
+      } else {
+        result.elements.push(codegenLValue(cx, item));
+      }
+    }
+    return result;
+  } else {
+    return createArrayPattern(
+      pattern.loc,
+      pattern.items.map(item => {
+        if (item.kind === 'Hole') {
+          return null;
+        }
+        return codegenLValue(cx, item);
+      }),
+    );
+  }
+}
+
+function codegenLValue(
+  cx: Context,
+  pattern: Pattern | Place | SpreadPattern,
+): t.ArrayPattern | t.ObjectPattern | t.RestElement | t.Identifier {
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      return codegenArrayPattern(cx, pattern);
+    }
+    case 'ObjectPattern': {
+      return createObjectPattern(
+        pattern.loc,
+        pattern.properties.map(property => {
+          if (property.kind === 'ObjectProperty') {
+            const key = codegenObjectPropertyKey(cx, property.key);
+            const value = codegenLValue(cx, property.place);
+            return t.objectProperty(
+              key,
+              value,
+              property.key.kind === 'computed',
+              key.type === 'Identifier' &&
+                value.type === 'Identifier' &&
+                value.name === key.name,
+            );
+          } else {
+            return t.restElement(codegenLValue(cx, property.place));
+          }
+        }),
+      );
+    }
+    case 'Spread': {
+      return t.restElement(codegenLValue(cx, pattern.place));
+    }
+    case 'Identifier': {
+      return convertIdentifier(pattern.identifier);
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+}
+
+function codegenValue(
+  cx: Context,
+  loc: SourceLocation,
+  value: boolean | number | string | null | undefined,
+): t.Expression {
+  if (typeof value === 'number') {
+    if (value < 0) {
+      /**
+       * Babel's code generator produces invalid JS for negative numbers when
+       * run with { compact: true }.
+       * See repro https://codesandbox.io/p/devbox/5d47fr
+       */
+      return t.unaryExpression('-', t.numericLiteral(-value), false);
+    } else {
+      return t.numericLiteral(value);
+    }
+  } else if (typeof value === 'boolean') {
+    return t.booleanLiteral(value);
+  } else if (typeof value === 'string') {
+    return createStringLiteral(loc, value);
+  } else if (value === null) {
+    return t.nullLiteral();
+  } else if (value === undefined) {
+    return t.identifier('undefined');
+  } else {
+    assertExhaustive(value, 'Unexpected primitive value kind');
+  }
+}
+
+function codegenArgument(
+  cx: Context,
+  arg: Place | SpreadPattern,
+): t.Expression | t.SpreadElement {
+  if (arg.kind === 'Identifier') {
+    return codegenPlaceToExpression(cx, arg);
+  } else {
+    return t.spreadElement(codegenPlaceToExpression(cx, arg.place));
+  }
+}
+
+function codegenPlaceToExpression(cx: Context, place: Place): t.Expression {
+  const value = codegenPlace(cx, place);
+  return convertValueToExpression(value);
+}
+
+function codegenPlace(cx: Context, place: Place): t.Expression | t.JSXText {
+  let tmp = cx.temp.get(place.identifier.declarationId);
+  if (tmp != null) {
+    return tmp;
+  }
+  CompilerError.invariant(place.identifier.name !== null || tmp !== undefined, {
+    reason: `[Codegen] No value found for temporary`,
+    description: `Value for '${printPlace(
+      place,
+    )}' was not set in the codegen context`,
+    loc: place.loc,
+  });
+  const identifier = convertIdentifier(place.identifier);
+  identifier.loc = place.loc as any;
+  return identifier;
+}
+
+function convertIdentifier(identifier: Identifier): t.Identifier {
+  CompilerError.invariant(
+    identifier.name !== null && identifier.name.kind === 'named',
+    {
+      reason: `Expected temporaries to be promoted to named identifiers in an earlier pass`,
+      description: `identifier ${identifier.id} is unnamed`,
+      loc: GeneratedSource,
+    },
+  );
+  return createIdentifier(identifier.loc, identifier.name.value);
+}
+
+function compareScopeDependency(
+  a: ReactiveScopeDependency,
+  b: ReactiveScopeDependency,
+): number {
+  CompilerError.invariant(
+    a.identifier.name?.kind === 'named' && b.identifier.name?.kind === 'named',
+    {
+      reason: '[Codegen] Expected named identifier for dependency',
+      loc: a.identifier.loc,
+    },
+  );
+  const aName = [
+    a.identifier.name.value,
+    ...a.path.map(entry => `${entry.optional ? '?' : ''}${entry.property}`),
+  ].join('.');
+  const bName = [
+    b.identifier.name.value,
+    ...b.path.map(entry => `${entry.optional ? '?' : ''}${entry.property}`),
+  ].join('.');
+  if (aName < bName) return -1;
+  else if (aName > bName) return 1;
+  else return 0;
+}
+
+function compareScopeDeclaration(
+  a: ReactiveScopeDeclaration,
+  b: ReactiveScopeDeclaration,
+): number {
+  CompilerError.invariant(
+    a.identifier.name?.kind === 'named' && b.identifier.name?.kind === 'named',
+    {
+      reason: '[Codegen] Expected named identifier for declaration',
+      loc: a.identifier.loc,
+    },
+  );
+  const aName = a.identifier.name.value;
+  const bName = b.identifier.name.value;
+  if (aName < bName) return -1;
+  else if (aName > bName) return 1;
+  else return 0;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReactiveIdentifiers.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReactiveIdentifiers.ts
new file mode 100644
index 00000000000..38512340058
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReactiveIdentifiers.ts
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  IdentifierId,
+  InstructionId,
+  Place,
+  PrunedReactiveScopeBlock,
+  ReactiveFunction,
+  isPrimitiveType,
+  isUseRefType,
+  Identifier,
+} from '../HIR/HIR';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+class Visitor extends ReactiveFunctionVisitor<Set<IdentifierId>> {
+  /*
+   * Visitors don't visit lvalues as places by default, but we want to visit all places to
+   * check for reactivity
+   */
+  override visitLValue(
+    id: InstructionId,
+    lvalue: Place,
+    state: Set<IdentifierId>,
+  ): void {
+    this.visitPlace(id, lvalue, state);
+  }
+
+  /*
+   * This visitor only infers data dependencies and does not account for control dependencies
+   * where a variable may be assigned a different value based on some conditional, eg via two
+   * different paths of an if statement.
+   */
+  override visitPlace(
+    _id: InstructionId,
+    place: Place,
+    state: Set<IdentifierId>,
+  ): void {
+    if (place.reactive) {
+      state.add(place.identifier.id);
+    }
+  }
+
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: Set<IdentifierId>,
+  ): void {
+    this.traversePrunedScope(scopeBlock, state);
+
+    for (const [id, decl] of scopeBlock.scope.declarations) {
+      if (
+        !isPrimitiveType(decl.identifier) &&
+        !isStableRefType(decl.identifier, state)
+      ) {
+        state.add(id);
+      }
+    }
+  }
+}
+function isStableRefType(
+  identifier: Identifier,
+  reactiveIdentifiers: Set<IdentifierId>,
+): boolean {
+  return isUseRefType(identifier) && !reactiveIdentifiers.has(identifier.id);
+}
+/*
+ * Computes a set of identifiers which are reactive, using the analysis previously performed
+ * in `InferReactivePlaces`.
+ */
+export function collectReactiveIdentifiers(
+  fn: ReactiveFunction,
+): Set<IdentifierId> {
+  const visitor = new Visitor();
+  const state = new Set<IdentifierId>();
+  visitReactiveFunction(fn, visitor, state);
+
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReferencedGlobals.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReferencedGlobals.ts
new file mode 100644
index 00000000000..0875825dd5d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReferencedGlobals.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {visitReactiveFunction} from '.';
+import {InstructionId, Place, ReactiveFunction, ReactiveValue} from '../HIR';
+import {ReactiveFunctionVisitor} from './visitors';
+
+/**
+ * Returns a set of unique globals (by name) that are referenced transitively within the function.
+ */
+export function collectReferencedGlobals(fn: ReactiveFunction): Set<string> {
+  const identifiers = new Set<string>();
+  visitReactiveFunction(fn, new Visitor(), identifiers);
+  return identifiers;
+}
+
+class Visitor extends ReactiveFunctionVisitor<Set<string>> {
+  override visitValue(
+    id: InstructionId,
+    value: ReactiveValue,
+    state: Set<string>,
+  ): void {
+    this.traverseValue(id, value, state);
+    if (value.kind === 'FunctionExpression' || value.kind === 'ObjectMethod') {
+      this.visitHirFunction(value.loweredFunc.func, state);
+    } else if (value.kind === 'LoadGlobal') {
+      state.add(value.binding.name);
+    }
+  }
+
+  override visitReactiveFunctionValue(
+    _id: InstructionId,
+    _dependencies: Array<Place>,
+    fn: ReactiveFunction,
+    state: Set<string>,
+  ): void {
+    visitReactiveFunction(fn, this, state);
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/ExtractScopeDeclarationsFromDestructuring.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/ExtractScopeDeclarationsFromDestructuring.ts
new file mode 100644
index 00000000000..f24861152aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/ExtractScopeDeclarationsFromDestructuring.ts
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  DeclarationId,
+  Destructure,
+  Environment,
+  IdentifierId,
+  InstructionKind,
+  Place,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+  promoteTemporary,
+} from '../HIR';
+import {clonePlaceToTemporary} from '../HIR/HIRBuilder';
+import {
+  eachInstructionLValueWithKind,
+  eachPatternOperand,
+  mapPatternOperands,
+} from '../HIR/visitors';
+import {
+  ReactiveFunctionTransform,
+  Transformed,
+  visitReactiveFunction,
+} from './visitors';
+
+/*
+ * Destructuring statements may sometimes define some variables which are declared by the scope,
+ * and others that are only used locally within the scope, for example:
+ *
+ * ```
+ * const {x, ...rest} = value;
+ * return rest;
+ * ```
+ *
+ * Here the scope structure turns into:
+ *
+ * ```
+ * let c_0 = $[0] !== value;
+ * let rest;
+ * if (c_0) {
+ *    // OOPS! we want to reassign `rest` here, but
+ *    // `x` isn't declared anywhere!
+ *    {x, ...rest} = value;
+ *    $[0] = value;
+ *    $[1] = rest;
+ * } else {
+ *    rest = $[1];
+ * }
+ * return rest;
+ * ```
+ *
+ * Note that because `rest` is declared by the scope, we can't redeclare it in the
+ * destructuring statement. But we have to declare `x`!
+ *
+ * This pass finds destructuring instructions that contain mixed values such as this,
+ * and rewrites them to ensure that any scope variable assignments are extracted first
+ * to a temporary and reassigned in a separate instruction. For example, the output
+ * for the above would be along the lines of:
+ *
+ * ```
+ * let c_0 = $[0] !== value;
+ * let rest;
+ * if (c_0) {
+ *    const {x, ...t0} = value; <-- replace `rest` with a temporary
+ *    rest = t0; // <-- and create a separate instruction to assign that to `rest`
+ *    $[0] = value;
+ *    $[1] = rest;
+ * } else {
+ *    rest = $[1];
+ * }
+ * return rest;
+ * ```
+ *
+ */
+export function extractScopeDeclarationsFromDestructuring(
+  fn: ReactiveFunction,
+): void {
+  const state = new State(fn.env);
+  for (const param of fn.params) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    state.declared.add(place.identifier.declarationId);
+  }
+  visitReactiveFunction(fn, new Visitor(), state);
+}
+
+class State {
+  env: Environment;
+  /**
+   * We need to track which program variables are already declared to convert
+   * declarations into reassignments, so we use DeclarationId
+   */
+  declared: Set<DeclarationId> = new Set();
+
+  constructor(env: Environment) {
+    this.env = env;
+  }
+}
+
+class Visitor extends ReactiveFunctionTransform<State> {
+  override visitScope(scope: ReactiveScopeBlock, state: State): void {
+    for (const [, declaration] of scope.scope.declarations) {
+      state.declared.add(declaration.identifier.declarationId);
+    }
+    this.traverseScope(scope, state);
+  }
+
+  override transformInstruction(
+    instruction: ReactiveInstruction,
+    state: State,
+  ): Transformed<ReactiveStatement> {
+    this.visitInstruction(instruction, state);
+
+    let instructionsToProcess: Array<ReactiveInstruction> = [instruction];
+    let result: Transformed<ReactiveStatement> = {kind: 'keep'};
+
+    if (instruction.value.kind === 'Destructure') {
+      const transformed = transformDestructuring(
+        state,
+        instruction,
+        instruction.value,
+      );
+      if (transformed) {
+        instructionsToProcess = transformed;
+        result = {
+          kind: 'replace-many',
+          value: transformed.map(instruction => ({
+            kind: 'instruction',
+            instruction,
+          })),
+        };
+      }
+    }
+
+    // Update state.declared with declarations from the instruction(s)
+    for (const instr of instructionsToProcess) {
+      for (const [place, kind] of eachInstructionLValueWithKind(instr)) {
+        if (kind !== InstructionKind.Reassign) {
+          state.declared.add(place.identifier.declarationId);
+        }
+      }
+    }
+
+    return result;
+  }
+}
+
+function transformDestructuring(
+  state: State,
+  instr: ReactiveInstruction,
+  destructure: Destructure,
+): null | Array<ReactiveInstruction> {
+  let reassigned: Set<IdentifierId> = new Set();
+  let hasDeclaration = false;
+  for (const place of eachPatternOperand(destructure.lvalue.pattern)) {
+    const isDeclared = state.declared.has(place.identifier.declarationId);
+    if (isDeclared) {
+      reassigned.add(place.identifier.id);
+    } else {
+      hasDeclaration = true;
+    }
+  }
+  if (!hasDeclaration) {
+    // all reassignments
+    destructure.lvalue.kind = InstructionKind.Reassign;
+    return null;
+  }
+  /*
+   * Else it's a mix, replace the reassigned items in the destructuring with temporary
+   * variables and emit separate assignment statements for them
+   */
+  const instructions: Array<ReactiveInstruction> = [];
+  const renamed: Map<Place, Place> = new Map();
+  mapPatternOperands(destructure.lvalue.pattern, place => {
+    if (!reassigned.has(place.identifier.id)) {
+      return place;
+    }
+    const temporary = clonePlaceToTemporary(state.env, place);
+    promoteTemporary(temporary.identifier);
+    renamed.set(place, temporary);
+    return temporary;
+  });
+  instructions.push(instr);
+  for (const [original, temporary] of renamed) {
+    instructions.push({
+      id: instr.id,
+      lvalue: null,
+      value: {
+        kind: 'StoreLocal',
+        lvalue: {
+          kind: InstructionKind.Reassign,
+          place: original,
+        },
+        value: temporary,
+        type: null,
+        loc: destructure.loc,
+      },
+      loc: instr.loc,
+    });
+  }
+  return instructions;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenReactiveLoopsHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenReactiveLoopsHIR.ts
new file mode 100644
index 00000000000..66044ae534f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenReactiveLoopsHIR.ts
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {BlockId, HIRFunction, PrunedScopeTerminal} from '../HIR';
+import {assertExhaustive, retainWhere} from '../Utils/utils';
+
+/**
+ * Prunes any reactive scopes that are within a loop (for, while, etc). We don't yet
+ * support memoization within loops because this would require an extra layer of reconciliation
+ * (plus a way to identify values across runs, similar to how we use `key` in JSX for lists).
+ * Eventually we may integrate more deeply into the runtime so that we can do a single level
+ * of reconciliation, but for now we've found it's sufficient to memoize *around* the loop.
+ */
+export function flattenReactiveLoopsHIR(fn: HIRFunction): void {
+  const activeLoops = Array<BlockId>();
+  for (const [, block] of fn.body.blocks) {
+    retainWhere(activeLoops, id => id !== block.id);
+    const {terminal} = block;
+    switch (terminal.kind) {
+      case 'do-while':
+      case 'for':
+      case 'for-in':
+      case 'for-of':
+      case 'while': {
+        activeLoops.push(terminal.fallthrough);
+        break;
+      }
+      case 'scope': {
+        if (activeLoops.length !== 0) {
+          block.terminal = {
+            kind: 'pruned-scope',
+            block: terminal.block,
+            fallthrough: terminal.fallthrough,
+            id: terminal.id,
+            loc: terminal.loc,
+            scope: terminal.scope,
+          } as PrunedScopeTerminal;
+        }
+        break;
+      }
+      case 'branch':
+      case 'goto':
+      case 'if':
+      case 'label':
+      case 'logical':
+      case 'maybe-throw':
+      case 'optional':
+      case 'pruned-scope':
+      case 'return':
+      case 'sequence':
+      case 'switch':
+      case 'ternary':
+      case 'throw':
+      case 'try':
+      case 'unreachable':
+      case 'unsupported': {
+        break;
+      }
+      default: {
+        assertExhaustive(
+          terminal,
+          `Unexpected terminal kind \`${(terminal as any).kind}\``,
+        );
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts
new file mode 100644
index 00000000000..103923a2e4d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  BlockId,
+  HIRFunction,
+  LabelTerminal,
+  PrunedScopeTerminal,
+  getHookKind,
+  isUseOperator,
+} from '../HIR';
+import {retainWhere} from '../Utils/utils';
+
+/**
+ * For simplicity the majority of compiler passes do not treat hooks specially. However, hooks are different
+ * from regular functions in two key ways:
+ * - They can introduce reactivity even when their arguments are non-reactive (accounted for in InferReactivePlaces)
+ * - They cannot be called conditionally
+ *
+ * The `use` operator is similar:
+ * - It can access context, and therefore introduce reactivity
+ * - It can be called conditionally, but _it must be called if the component needs the return value_. This is because
+ *   React uses the fact that use was called to remember that the component needs the value, and that changes to the
+ *   input should invalidate the component itself.
+ *
+ * This pass accounts for the "can't call conditionally" aspect of both hooks and use. Though the reasoning is slightly
+ * different for reach, the result is that we can't memoize scopes that call hooks or use since this would make them
+ * called conditionally in the output.
+ *
+ * The pass finds and removes any scopes that transitively contain a hook or use call. By running all
+ * the reactive scope inference first, agnostic of hooks, we know that the reactive scopes accurately
+ * describe the set of values which "construct together", and remove _all_ that memoization in order
+ * to ensure the hook call does not inadvertently become conditional.
+ */
+export function flattenScopesWithHooksOrUseHIR(fn: HIRFunction): void {
+  const activeScopes: Array<{block: BlockId; fallthrough: BlockId}> = [];
+  const prune: Array<BlockId> = [];
+
+  for (const [, block] of fn.body.blocks) {
+    retainWhere(activeScopes, current => current.fallthrough !== block.id);
+
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'MethodCall':
+        case 'CallExpression': {
+          const callee =
+            value.kind === 'MethodCall' ? value.property : value.callee;
+          if (
+            getHookKind(fn.env, callee.identifier) != null ||
+            isUseOperator(callee.identifier)
+          ) {
+            prune.push(...activeScopes.map(entry => entry.block));
+            activeScopes.length = 0;
+          }
+        }
+      }
+    }
+    if (block.terminal.kind === 'scope') {
+      activeScopes.push({
+        block: block.id,
+        fallthrough: block.terminal.fallthrough,
+      });
+    }
+  }
+
+  for (const id of prune) {
+    const block = fn.body.blocks.get(id)!;
+    const terminal = block.terminal;
+    CompilerError.invariant(terminal.kind === 'scope', {
+      reason: `Expected block to have a scope terminal`,
+      description: `Expected block bb${block.id} to end in a scope terminal`,
+      loc: terminal.loc,
+    });
+    const body = fn.body.blocks.get(terminal.block)!;
+    if (
+      body.instructions.length === 1 &&
+      body.terminal.kind === 'goto' &&
+      body.terminal.block === terminal.fallthrough
+    ) {
+      /*
+       * This was a scope just for a hook call, which doesn't need memoization.
+       * flatten it away. We rely on the PrunedUnusedLabel step to do the actual
+       * flattening
+       */
+      block.terminal = {
+        kind: 'label',
+        block: terminal.block,
+        fallthrough: terminal.fallthrough,
+        id: terminal.id,
+        loc: terminal.loc,
+      } as LabelTerminal;
+      continue;
+    }
+
+    block.terminal = {
+      kind: 'pruned-scope',
+      block: terminal.block,
+      fallthrough: terminal.fallthrough,
+      id: terminal.id,
+      loc: terminal.loc,
+      scope: terminal.scope,
+    } as PrunedScopeTerminal;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts
new file mode 100644
index 00000000000..efa8975a78a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts
@@ -0,0 +1,396 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, SourceLocation} from '..';
+import {Environment} from '../HIR';
+import {
+  DeclarationId,
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  Instruction,
+  InstructionId,
+  MutableRange,
+  Place,
+  ReactiveScope,
+  makeInstructionId,
+} from '../HIR/HIR';
+import {
+  doesPatternContainSpreadElement,
+  eachInstructionOperand,
+  eachPatternOperand,
+} from '../HIR/visitors';
+import DisjointSet from '../Utils/DisjointSet';
+import {assertExhaustive} from '../Utils/utils';
+
+/*
+ * Note: this is the 1st of 4 passes that determine how to break a function into discrete
+ * reactive scopes (independently memoizeable units of code):
+ * 1. InferReactiveScopeVariables (this pass, on HIR) determines operands that mutate
+ *     together and assigns them a unique reactive scope.
+ * 2. AlignReactiveScopesToBlockScopes (on ReactiveFunction) aligns reactive scopes
+ *     to block scopes.
+ * 3. MergeOverlappingReactiveScopes (on ReactiveFunction) ensures that reactive
+ *     scopes do not overlap, merging any such scopes.
+ * 4. BuildReactiveBlocks (on ReactiveFunction) groups the statements for each scope into
+ *     a ReactiveScopeBlock.
+ *
+ * For each mutable variable, infers a reactive scope which will construct that
+ * variable. Variables that co-mutate are assigned to the same reactive scope.
+ * This pass does *not* infer the set of instructions necessary to compute each
+ * variable/scope, only the set of variables that will be computed by each scope.
+ *
+ * Examples:
+ * ```javascript
+ * // Mutable arguments
+ * let x = {};
+ * let y = [];
+ * foo(x, y); // both args mutable, could alias each other
+ * y.push(x); // y is part of callee, counts as operand
+ *
+ * let z = {};
+ * y.push(z);
+ *
+ * // Mutable assignment
+ * let x = {};
+ * let y = [];
+ * x.y = y; // trivial aliasing
+ * ```
+ *
+ * More generally, all mutable operands (incl lvalue) of an instruction must go in the
+ * same scope.
+ *
+ * ## Implementation
+ *
+ * 1. Iterate over all instructions in all blocks (order does not matter, single pass),
+ *     and create disjoint sets ({@link DisjointSet}) for each set of operands that
+ *     mutate together per above rules.
+ * 2. Iterate the contents of each set, and assign a new {@link ScopeId} to each set,
+ *     and update the `scope` property of each item in that set to that scope id.
+ *
+ * ## Other Issues Uncovered
+ *
+ * Mutable lifetimes need to account for aliasing (known todo, already described in InferMutableLifetimes.ts)
+ *
+ * ```javascript
+ * let x = {};
+ * let y = [];
+ * x.y = y; // RHS is not considered mutable here bc not further mutation
+ * mutate(x); // bc y is aliased here, it should still be considered mutable above
+ * ```
+ */
+export function inferReactiveScopeVariables(fn: HIRFunction): void {
+  /*
+   * Represents the set of reactive scopes as disjoint sets of identifiers
+   * that mutate together.
+   */
+  const scopeIdentifiers = findDisjointMutableValues(fn);
+
+  // Maps each scope (by its identifying member) to a ScopeId value
+  const scopes: Map<Identifier, ReactiveScope> = new Map();
+
+  /*
+   * Iterate over all the identifiers and assign a unique ScopeId
+   * for each scope (based on the set identifier).
+   *
+   * At the same time, group the identifiers in each scope and
+   * build a MutableRange that describes the span of mutations
+   * across all identifiers in each scope.
+   */
+  scopeIdentifiers.forEach((identifier, groupIdentifier) => {
+    let scope = scopes.get(groupIdentifier);
+    if (scope === undefined) {
+      scope = {
+        id: fn.env.nextScopeId,
+        range: identifier.mutableRange,
+        dependencies: new Set(),
+        declarations: new Map(),
+        reassignments: new Set(),
+        earlyReturnValue: null,
+        merged: new Set(),
+        loc: identifier.loc,
+      };
+      scopes.set(groupIdentifier, scope);
+    } else {
+      if (scope.range.start === 0) {
+        scope.range.start = identifier.mutableRange.start;
+      } else if (identifier.mutableRange.start !== 0) {
+        scope.range.start = makeInstructionId(
+          Math.min(scope.range.start, identifier.mutableRange.start),
+        );
+      }
+      scope.range.end = makeInstructionId(
+        Math.max(scope.range.end, identifier.mutableRange.end),
+      );
+      scope.loc = mergeLocation(scope.loc, identifier.loc);
+    }
+    identifier.scope = scope;
+    identifier.mutableRange = scope.range;
+  });
+
+  let maxInstruction = 0;
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      maxInstruction = makeInstructionId(Math.max(maxInstruction, instr.id));
+    }
+    maxInstruction = makeInstructionId(
+      Math.max(maxInstruction, block.terminal.id),
+    );
+  }
+
+  /*
+   * Validate that all scopes have properly intialized, valid mutable ranges
+   * within the span of instructions for this function, ie from 1 to 1 past
+   * the last instruction id.
+   */
+  for (const [, scope] of scopes) {
+    if (
+      scope.range.start === 0 ||
+      scope.range.end === 0 ||
+      maxInstruction === 0 ||
+      scope.range.end > maxInstruction + 1
+    ) {
+      // Make it easier to debug why the error occurred
+      fn.env.logger?.debugLogIRs?.({
+        kind: 'hir',
+        name: 'InferReactiveScopeVariables (invalid scope)',
+        value: fn,
+      });
+      CompilerError.invariant(false, {
+        reason: `Invalid mutable range for scope`,
+        description: `Scope @${scope.id} has range [${scope.range.start}:${
+          scope.range.end
+        }] but the valid range is [1:${maxInstruction + 1}]`,
+        loc: GeneratedSource,
+      });
+    }
+  }
+}
+
+function mergeLocation(l: SourceLocation, r: SourceLocation): SourceLocation {
+  if (l === GeneratedSource) {
+    return r;
+  } else if (r === GeneratedSource) {
+    return l;
+  } else {
+    return {
+      filename: l.filename,
+      identifierName: l.identifierName,
+      start: {
+        index: Math.min(l.start.index, r.start.index),
+        line: Math.min(l.start.line, r.start.line),
+        column: Math.min(l.start.column, r.start.column),
+      },
+      end: {
+        index: Math.max(l.end.index, r.end.index),
+        line: Math.max(l.end.line, r.end.line),
+        column: Math.max(l.end.column, r.end.column),
+      },
+    };
+  }
+}
+
+// Is the operand mutable at this given instruction
+export function isMutable(instr: {id: InstructionId}, place: Place): boolean {
+  return inRange(instr, place.identifier.mutableRange);
+}
+
+export function inRange(
+  {id}: {id: InstructionId},
+  range: MutableRange,
+): boolean {
+  return id >= range.start && id < range.end;
+}
+
+function mayAllocate(_env: Environment, instruction: Instruction): boolean {
+  const {value} = instruction;
+  switch (value.kind) {
+    case 'Destructure': {
+      return doesPatternContainSpreadElement(value.lvalue.pattern);
+    }
+    case 'PostfixUpdate':
+    case 'PrefixUpdate':
+    case 'Await':
+    case 'DeclareLocal':
+    case 'DeclareContext':
+    case 'StoreLocal':
+    case 'LoadGlobal':
+    case 'MetaProperty':
+    case 'TypeCastExpression':
+    case 'LoadLocal':
+    case 'LoadContext':
+    case 'StoreContext':
+    case 'PropertyDelete':
+    case 'ComputedLoad':
+    case 'ComputedDelete':
+    case 'JSXText':
+    case 'TemplateLiteral':
+    case 'Primitive':
+    case 'GetIterator':
+    case 'IteratorNext':
+    case 'NextPropertyOf':
+    case 'Debugger':
+    case 'StartMemoize':
+    case 'FinishMemoize':
+    case 'UnaryExpression':
+    case 'BinaryExpression':
+    case 'PropertyLoad':
+    case 'StoreGlobal': {
+      return false;
+    }
+    case 'TaggedTemplateExpression':
+    case 'CallExpression':
+    case 'MethodCall': {
+      return instruction.lvalue.identifier.type.kind !== 'Primitive';
+    }
+    case 'RegExpLiteral':
+    case 'PropertyStore':
+    case 'ComputedStore':
+    case 'ArrayExpression':
+    case 'JsxExpression':
+    case 'JsxFragment':
+    case 'NewExpression':
+    case 'ObjectExpression':
+    case 'UnsupportedNode':
+    case 'ObjectMethod':
+    case 'FunctionExpression': {
+      return true;
+    }
+    default: {
+      assertExhaustive(
+        value,
+        `Unexpected value kind \`${(value as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function findDisjointMutableValues(
+  fn: HIRFunction,
+): DisjointSet<Identifier> {
+  const scopeIdentifiers = new DisjointSet<Identifier>();
+
+  const declarations = new Map<DeclarationId, Identifier>();
+  function declareIdentifier(lvalue: Place): void {
+    if (!declarations.has(lvalue.identifier.declarationId)) {
+      declarations.set(lvalue.identifier.declarationId, lvalue.identifier);
+    }
+  }
+
+  for (const [_, block] of fn.body.blocks) {
+    /*
+     * If a phi is mutated after creation, then we need to alias all of its operands such that they
+     * are assigned to the same scope.
+     */
+    for (const phi of block.phis) {
+      if (
+        phi.place.identifier.mutableRange.start + 1 !==
+          phi.place.identifier.mutableRange.end &&
+        phi.place.identifier.mutableRange.end >
+          (block.instructions.at(0)?.id ?? block.terminal.id)
+      ) {
+        const operands = [phi.place.identifier];
+        const declaration = declarations.get(
+          phi.place.identifier.declarationId,
+        );
+        if (declaration !== undefined) {
+          operands.push(declaration);
+        }
+        for (const [_, phiId] of phi.operands) {
+          operands.push(phiId.identifier);
+        }
+        scopeIdentifiers.union(operands);
+      } else if (fn.env.config.enableForest) {
+        for (const [, phiId] of phi.operands) {
+          scopeIdentifiers.union([phi.place.identifier, phiId.identifier]);
+        }
+      }
+    }
+
+    for (const instr of block.instructions) {
+      const operands: Array<Identifier> = [];
+      const range = instr.lvalue.identifier.mutableRange;
+      if (range.end > range.start + 1 || mayAllocate(fn.env, instr)) {
+        operands.push(instr.lvalue!.identifier);
+      }
+      if (
+        instr.value.kind === 'DeclareLocal' ||
+        instr.value.kind === 'DeclareContext'
+      ) {
+        declareIdentifier(instr.value.lvalue.place);
+      } else if (
+        instr.value.kind === 'StoreLocal' ||
+        instr.value.kind === 'StoreContext'
+      ) {
+        declareIdentifier(instr.value.lvalue.place);
+        if (
+          instr.value.lvalue.place.identifier.mutableRange.end >
+          instr.value.lvalue.place.identifier.mutableRange.start + 1
+        ) {
+          operands.push(instr.value.lvalue.place.identifier);
+        }
+        if (
+          isMutable(instr, instr.value.value) &&
+          instr.value.value.identifier.mutableRange.start > 0
+        ) {
+          operands.push(instr.value.value.identifier);
+        }
+      } else if (instr.value.kind === 'Destructure') {
+        for (const place of eachPatternOperand(instr.value.lvalue.pattern)) {
+          declareIdentifier(place);
+          if (
+            place.identifier.mutableRange.end >
+            place.identifier.mutableRange.start + 1
+          ) {
+            operands.push(place.identifier);
+          }
+        }
+        if (
+          isMutable(instr, instr.value.value) &&
+          instr.value.value.identifier.mutableRange.start > 0
+        ) {
+          operands.push(instr.value.value.identifier);
+        }
+      } else if (instr.value.kind === 'MethodCall') {
+        for (const operand of eachInstructionOperand(instr)) {
+          if (
+            isMutable(instr, operand) &&
+            /*
+             * exclude global variables from being added to scopes, we can't recreate them!
+             * TODO: improve handling of module-scoped variables and globals
+             */
+            operand.identifier.mutableRange.start > 0
+          ) {
+            operands.push(operand.identifier);
+          }
+        }
+        /*
+         * Ensure that the ComputedLoad to resolve the method is in the same scope as the
+         * call itself
+         */
+        operands.push(instr.value.property.identifier);
+      } else {
+        for (const operand of eachInstructionOperand(instr)) {
+          if (
+            isMutable(instr, operand) &&
+            /*
+             * exclude global variables from being added to scopes, we can't recreate them!
+             * TODO: improve handling of module-scoped variables and globals
+             */
+            operand.identifier.mutableRange.start > 0
+          ) {
+            operands.push(operand.identifier);
+          }
+        }
+      }
+      if (operands.length !== 0) {
+        scopeIdentifiers.union(operands);
+      }
+    }
+  }
+  return scopeIdentifiers;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts
new file mode 100644
index 00000000000..0ce05a823e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts
@@ -0,0 +1,304 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  HIRFunction,
+  IdentifierId,
+  InstructionValue,
+  makeInstructionId,
+  MutableRange,
+  Place,
+  ReactiveScope,
+} from '../HIR';
+import {Macro} from '../HIR/Environment';
+import {eachInstructionValueOperand} from '../HIR/visitors';
+
+/**
+ * Whether a macro requires its arguments to be transitively inlined (eg fbt)
+ * or just avoid having the top-level values be converted to variables (eg fbt.param)
+ */
+enum InlineLevel {
+  Transitive = 'Transitive',
+  Shallow = 'Shallow',
+}
+type MacroDefinition = {
+  level: InlineLevel;
+  properties: Map<string, MacroDefinition> | null;
+};
+
+const SHALLOW_MACRO: MacroDefinition = {
+  level: InlineLevel.Shallow,
+  properties: null,
+};
+const TRANSITIVE_MACRO: MacroDefinition = {
+  level: InlineLevel.Transitive,
+  properties: null,
+};
+const FBT_MACRO: MacroDefinition = {
+  level: InlineLevel.Transitive,
+  properties: new Map([['*', SHALLOW_MACRO]]),
+};
+FBT_MACRO.properties!.set('enum', FBT_MACRO);
+
+/**
+ * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/)
+ * as well as similar user-configurable macro-like APIs where it's important that
+ * the name of the function not be changed, and it's literal arguments not be turned
+ * into temporaries.
+ *
+ * ## FBT
+ *
+ * FBT provides the `<fbt>` JSX element and `fbt()` calls (which take params in the
+ * form of `<fbt:param>` children or `fbt.param()` arguments, respectively). These
+ * tags/functions have restrictions on what types of syntax may appear as props/children/
+ * arguments, notably that variable references may not appear directly — variables
+ * must always be wrapped in a `<fbt:param>` or `fbt.param()`.
+ *
+ * To ensure that Forget doesn't rewrite code to violate this restriction, we force
+ * operands to fbt tags/calls have the same scope as the tag/call itself.
+ *
+ * Note that this still allows the props/arguments of `<fbt:param>`/`fbt.param()`
+ * to be independently memoized.
+ *
+ * ## User-defined macro-like function
+ *
+ * Users can also specify their own functions to be treated similarly to fbt via the
+ * `customMacros` environment configuration. By default, user-supplied custom macros
+ * have their arguments transitively inlined.
+ */
+export function memoizeFbtAndMacroOperandsInSameScope(
+  fn: HIRFunction,
+): Set<IdentifierId> {
+  const macroKinds = new Map<Macro, MacroDefinition>([
+    ...Array.from(FBT_TAGS.entries()),
+    ...(fn.env.config.customMacros ?? []).map(
+      name => [name, TRANSITIVE_MACRO] as [Macro, MacroDefinition],
+    ),
+  ]);
+  /**
+   * Forward data-flow analysis to identify all macro tags, including
+   * things like `fbt.foo.bar(...)`
+   */
+  const macroTags = populateMacroTags(fn, macroKinds);
+
+  /**
+   * Reverse data-flow analysis to merge arguments to macro *invocations*
+   * based on the kind of the macro
+   */
+  const macroValues = mergeMacroArguments(fn, macroTags, macroKinds);
+
+  return macroValues;
+}
+
+const FBT_TAGS: Map<string, MacroDefinition> = new Map([
+  ['fbt', FBT_MACRO],
+  ['fbt:param', SHALLOW_MACRO],
+  ['fbt:enum', FBT_MACRO],
+  ['fbt:plural', SHALLOW_MACRO],
+  ['fbs', FBT_MACRO],
+  ['fbs:param', SHALLOW_MACRO],
+  ['fbs:enum', FBT_MACRO],
+  ['fbs:plural', SHALLOW_MACRO],
+]);
+export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([
+  'fbt:param',
+  'fbs:param',
+]);
+
+function populateMacroTags(
+  fn: HIRFunction,
+  macroKinds: Map<Macro, MacroDefinition>,
+): Map<IdentifierId, MacroDefinition> {
+  const macroTags = new Map<IdentifierId, MacroDefinition>();
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'Primitive': {
+          if (typeof value.value === 'string') {
+            const macroDefinition = macroKinds.get(value.value);
+            if (macroDefinition != null) {
+              /*
+               * We don't distinguish between tag names and strings, so record
+               * all `fbt` string literals in case they are used as a jsx tag.
+               */
+              macroTags.set(lvalue.identifier.id, macroDefinition);
+            }
+          }
+          break;
+        }
+        case 'LoadGlobal': {
+          let macroDefinition = macroKinds.get(value.binding.name);
+          if (macroDefinition != null) {
+            macroTags.set(lvalue.identifier.id, macroDefinition);
+          }
+          break;
+        }
+        case 'PropertyLoad': {
+          if (typeof value.property === 'string') {
+            const macroDefinition = macroTags.get(value.object.identifier.id);
+            if (macroDefinition != null) {
+              const propertyDefinition =
+                macroDefinition.properties != null
+                  ? (macroDefinition.properties.get(value.property) ??
+                    macroDefinition.properties.get('*'))
+                  : null;
+              const propertyMacro = propertyDefinition ?? macroDefinition;
+              macroTags.set(lvalue.identifier.id, propertyMacro);
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+  return macroTags;
+}
+
+function mergeMacroArguments(
+  fn: HIRFunction,
+  macroTags: Map<IdentifierId, MacroDefinition>,
+  macroKinds: Map<Macro, MacroDefinition>,
+): Set<IdentifierId> {
+  const macroValues = new Set<IdentifierId>(macroTags.keys());
+  for (const block of Array.from(fn.body.blocks.values()).reverse()) {
+    for (let i = block.instructions.length - 1; i >= 0; i--) {
+      const instr = block.instructions[i]!;
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'DeclareContext':
+        case 'DeclareLocal':
+        case 'Destructure':
+        case 'LoadContext':
+        case 'LoadLocal':
+        case 'PostfixUpdate':
+        case 'PrefixUpdate':
+        case 'StoreContext':
+        case 'StoreLocal': {
+          // Instructions that never need to be merged
+          break;
+        }
+        case 'CallExpression':
+        case 'MethodCall': {
+          const scope = lvalue.identifier.scope;
+          if (scope == null) {
+            continue;
+          }
+          const callee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          const macroDefinition =
+            macroTags.get(callee.identifier.id) ??
+            macroTags.get(lvalue.identifier.id);
+          if (macroDefinition != null) {
+            visitOperands(
+              macroDefinition,
+              scope,
+              lvalue,
+              value,
+              macroValues,
+              macroTags,
+            );
+          }
+          break;
+        }
+        case 'JsxExpression': {
+          const scope = lvalue.identifier.scope;
+          if (scope == null) {
+            continue;
+          }
+          let macroDefinition;
+          if (value.tag.kind === 'Identifier') {
+            macroDefinition = macroTags.get(value.tag.identifier.id);
+          } else {
+            macroDefinition = macroKinds.get(value.tag.name);
+          }
+          macroDefinition ??= macroTags.get(lvalue.identifier.id);
+          if (macroDefinition != null) {
+            visitOperands(
+              macroDefinition,
+              scope,
+              lvalue,
+              value,
+              macroValues,
+              macroTags,
+            );
+          }
+          break;
+        }
+        default: {
+          const scope = lvalue.identifier.scope;
+          if (scope == null) {
+            continue;
+          }
+          const macroDefinition = macroTags.get(lvalue.identifier.id);
+          if (macroDefinition != null) {
+            visitOperands(
+              macroDefinition,
+              scope,
+              lvalue,
+              value,
+              macroValues,
+              macroTags,
+            );
+          }
+          break;
+        }
+      }
+    }
+    for (const phi of block.phis) {
+      const scope = phi.place.identifier.scope;
+      if (scope == null) {
+        continue;
+      }
+      const macroDefinition = macroTags.get(phi.place.identifier.id);
+      if (
+        macroDefinition == null ||
+        macroDefinition.level === InlineLevel.Shallow
+      ) {
+        continue;
+      }
+      macroValues.add(phi.place.identifier.id);
+      for (const operand of phi.operands.values()) {
+        operand.identifier.scope = scope;
+        expandFbtScopeRange(scope.range, operand.identifier.mutableRange);
+        macroTags.set(operand.identifier.id, macroDefinition);
+        macroValues.add(operand.identifier.id);
+      }
+    }
+  }
+  return macroValues;
+}
+
+function expandFbtScopeRange(
+  fbtRange: MutableRange,
+  extendWith: MutableRange,
+): void {
+  if (extendWith.start !== 0) {
+    fbtRange.start = makeInstructionId(
+      Math.min(fbtRange.start, extendWith.start),
+    );
+  }
+}
+
+function visitOperands(
+  macroDefinition: MacroDefinition,
+  scope: ReactiveScope,
+  lvalue: Place,
+  value: InstructionValue,
+  macroValues: Set<IdentifierId>,
+  macroTags: Map<IdentifierId, MacroDefinition>,
+): void {
+  macroValues.add(lvalue.identifier.id);
+  for (const operand of eachInstructionValueOperand(value)) {
+    if (macroDefinition.level === InlineLevel.Transitive) {
+      operand.identifier.scope = scope;
+      expandFbtScopeRange(scope.range, operand.identifier.mutableRange);
+      macroTags.set(operand.identifier.id, macroDefinition);
+    }
+    macroValues.add(operand.identifier.id);
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts
new file mode 100644
index 00000000000..bdf2f29284a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts
@@ -0,0 +1,570 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  DeclarationId,
+  GeneratedSource,
+  InstructionId,
+  InstructionKind,
+  Place,
+  ReactiveBlock,
+  ReactiveFunction,
+  ReactiveScope,
+  ReactiveScopeBlock,
+  ReactiveScopeDependencies,
+  ReactiveScopeDependency,
+  ReactiveStatement,
+  Type,
+  areEqualPaths,
+  makeInstructionId,
+} from '../HIR';
+import {
+  BuiltInArrayId,
+  BuiltInFunctionId,
+  BuiltInJsxId,
+  BuiltInObjectId,
+} from '../HIR/ObjectShape';
+import {eachInstructionLValue} from '../HIR/visitors';
+import {assertExhaustive, Iterable_some} from '../Utils/utils';
+import {printReactiveScopeSummary} from './PrintReactiveFunction';
+import {
+  ReactiveFunctionTransform,
+  ReactiveFunctionVisitor,
+  Transformed,
+  visitReactiveFunction,
+} from './visitors';
+
+/*
+ * The primary goal of this pass is to reduce memoization overhead, specifically:
+ * - Use fewer memo slots
+ * - Reduce the number of comparisons and other memoization-related instructions
+ *
+ * The algorithm merges in two main cases: consecutive scopes that invalidate together
+ * or nested scopes that invalidate together
+ *
+ * ## Consecutive Scopes
+ *
+ * The idea is that if two consecutive scopes would always invalidate together,
+ * it's more efficient to group the scopes together to save on memoization overhead.
+ *
+ * This optimization is necessarily somewhat limited. First, we only merge
+ * scopes that are in the same (reactive) block, ie we don't merge across
+ * control-flow or block-scoping boundaries. Second, we can only merge scopes
+ * so long as any intermediate instructions are safe to memoize — specifically,
+ * as long as the values created by those instructions are only referenced by
+ * the second scope and not elsewhere. This is to avoid changing control-flow
+ * and to avoid increasing the number of scope outputs (which defeats the optimization).
+ *
+ * With that in mind we can apply the optimization in two cases. Given a block with
+ * scope A, some safe-to-memoize instructions I, and scope B, we can merge scopes when:
+ * - A and B have identical dependencies. This means they will invalidate together, so
+ *    by merging the scopes we can avoid duplicate cache slots and duplicate checks of
+ *    those dependencies.
+ * - The output of A is the input to B. Any invalidation of A will change its output
+ *    which invalidates B, so we can similarly merge scopes. Note that this optimization
+ *    may not be beneficial if the outupts of A are not guaranteed to change if its input
+ *    changes, but in practice this is generally the case.
+ *
+ * ## Nested Scopes
+ *
+ * In this case, if an inner scope has the same dependencies as its parent, then we can
+ * flatten away the inner scope since it will always invalidate at the same time.
+ *
+ * Note that PropagateScopeDependencies propagates scope dependencies upwards. This ensures
+ * that parent scopes have the union of their own direct dependencies as well as those of
+ * their (transitive) children. As a result nested scopes may have the same or fewer
+ * dependencies than their parents, but not more dependencies. If they have fewer dependncies,
+ * it means that the inner scope does not always invalidate with the parent and we should not
+ * flatten. If they inner scope has the exact same dependencies, however, then it's always
+ * better to flatten.
+ */
+export function mergeReactiveScopesThatInvalidateTogether(
+  fn: ReactiveFunction,
+): void {
+  const lastUsageVisitor = new FindLastUsageVisitor();
+  visitReactiveFunction(fn, lastUsageVisitor, undefined);
+  visitReactiveFunction(fn, new Transform(lastUsageVisitor.lastUsage), null);
+}
+
+const DEBUG: boolean = false;
+function log(msg: string): void {
+  if (DEBUG) {
+    console.log(msg);
+  }
+}
+
+class FindLastUsageVisitor extends ReactiveFunctionVisitor<void> {
+  /*
+   * TODO LeaveSSA: use IdentifierId for more precise tracking
+   * Using DeclarationId is necessary for compatible output but produces suboptimal results
+   * in cases where a scope defines a variable, but that version is never read and always
+   * overwritten later.
+   * see reassignment-separate-scopes.js for example
+   */
+  lastUsage: Map<DeclarationId, InstructionId> = new Map();
+
+  override visitPlace(id: InstructionId, place: Place, _state: void): void {
+    const previousUsage = this.lastUsage.get(place.identifier.declarationId);
+    const lastUsage =
+      previousUsage !== undefined
+        ? makeInstructionId(Math.max(previousUsage, id))
+        : id;
+    this.lastUsage.set(place.identifier.declarationId, lastUsage);
+  }
+}
+
+class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | null> {
+  lastUsage: Map<DeclarationId, InstructionId>;
+  temporaries: Map<DeclarationId, DeclarationId> = new Map();
+
+  constructor(lastUsage: Map<DeclarationId, InstructionId>) {
+    super();
+    this.lastUsage = lastUsage;
+  }
+
+  override transformScope(
+    scopeBlock: ReactiveScopeBlock,
+    state: ReactiveScopeDependencies | null,
+  ): Transformed<ReactiveStatement> {
+    this.visitScope(scopeBlock, scopeBlock.scope.dependencies);
+    if (
+      state !== null &&
+      areEqualDependencies(state, scopeBlock.scope.dependencies)
+    ) {
+      return {kind: 'replace-many', value: scopeBlock.instructions};
+    } else {
+      return {kind: 'keep'};
+    }
+  }
+
+  override visitBlock(
+    block: ReactiveBlock,
+    state: ReactiveScopeDependencies | null,
+  ): void {
+    // Pass 1: visit nested blocks to potentially merge their scopes
+    this.traverseBlock(block, state);
+
+    // Pass 2: identify scopes for merging
+    type MergedScope = {
+      block: ReactiveScopeBlock;
+      from: number;
+      to: number;
+      lvalues: Set<DeclarationId>;
+    };
+    let current: MergedScope | null = null;
+    const merged: Array<MergedScope> = [];
+    function reset(): void {
+      CompilerError.invariant(current !== null, {
+        reason:
+          'MergeConsecutiveScopes: expected current scope to be non-null if reset()',
+        loc: GeneratedSource,
+      });
+      if (current.to > current.from + 1) {
+        merged.push(current);
+      }
+      current = null;
+    }
+    for (let i = 0; i < block.length; i++) {
+      const instr = block[i]!;
+      switch (instr.kind) {
+        case 'terminal': {
+          // For now we don't merge across terminals
+          if (current !== null) {
+            log(
+              `Reset scope @${current.block.scope.id} from terminal [${instr.terminal.id}]`,
+            );
+            reset();
+          }
+          break;
+        }
+        case 'pruned-scope': {
+          // For now we don't merge across pruned scopes
+          if (current !== null) {
+            log(
+              `Reset scope @${current.block.scope.id} from pruned scope @${instr.scope.id}`,
+            );
+            reset();
+          }
+          break;
+        }
+        case 'instruction': {
+          switch (instr.instruction.value.kind) {
+            case 'BinaryExpression':
+            case 'ComputedLoad':
+            case 'JSXText':
+            case 'LoadGlobal':
+            case 'LoadLocal':
+            case 'Primitive':
+            case 'PropertyLoad':
+            case 'TemplateLiteral':
+            case 'UnaryExpression': {
+              /*
+               * We can merge two scopes if there are intervening instructions, but:
+               * - Only if the instructions are simple and it's okay to make them
+               *   execute conditionally (hence allowing a conservative subset of value kinds)
+               * - The values produced are used at or before the next scope. If they are used
+               *   later and we move them into the scope, then they wouldn't be accessible to
+               *   subsequent code wo expanding the set of declarations, which we want to avoid
+               */
+              if (current !== null && instr.instruction.lvalue !== null) {
+                current.lvalues.add(
+                  instr.instruction.lvalue.identifier.declarationId,
+                );
+                if (instr.instruction.value.kind === 'LoadLocal') {
+                  this.temporaries.set(
+                    instr.instruction.lvalue.identifier.declarationId,
+                    instr.instruction.value.place.identifier.declarationId,
+                  );
+                }
+              }
+              break;
+            }
+            case 'StoreLocal': {
+              /**
+               * It's safe to have intervening StoreLocal instructions _if_ they are const
+               * and the last usage of the variable is at or before the next scope. This is
+               * similar to the case above for simple instructions.
+               *
+               * Reassignments are *not* safe to merge since they are a side-effect that we
+               * don't want to make conditional.
+               */
+              if (current !== null) {
+                if (
+                  instr.instruction.value.lvalue.kind === InstructionKind.Const
+                ) {
+                  for (const lvalue of eachInstructionLValue(
+                    instr.instruction,
+                  )) {
+                    current.lvalues.add(lvalue.identifier.declarationId);
+                  }
+                  this.temporaries.set(
+                    instr.instruction.value.lvalue.place.identifier
+                      .declarationId,
+                    this.temporaries.get(
+                      instr.instruction.value.value.identifier.declarationId,
+                    ) ?? instr.instruction.value.value.identifier.declarationId,
+                  );
+                } else {
+                  log(
+                    `Reset scope @${current.block.scope.id} from StoreLocal in [${instr.instruction.id}]`,
+                  );
+                  reset();
+                }
+              }
+              break;
+            }
+            default: {
+              // Other instructions are known to prevent merging, so we reset the scope if present
+              if (current !== null) {
+                log(
+                  `Reset scope @${current.block.scope.id} from instruction [${instr.instruction.id}]`,
+                );
+                reset();
+              }
+            }
+          }
+          break;
+        }
+        case 'scope': {
+          if (
+            current !== null &&
+            canMergeScopes(current.block, instr, this.temporaries) &&
+            areLValuesLastUsedByScope(
+              instr.scope,
+              current.lvalues,
+              this.lastUsage,
+            )
+          ) {
+            // The current and next scopes can merge!
+            log(
+              `Can merge scope @${current.block.scope.id} with @${instr.scope.id}`,
+            );
+            // Update the merged scope's range
+            current.block.scope.range.end = makeInstructionId(
+              Math.max(current.block.scope.range.end, instr.scope.range.end),
+            );
+            // Add declarations
+            for (const [key, value] of instr.scope.declarations) {
+              current.block.scope.declarations.set(key, value);
+            }
+            /*
+             * Then prune declarations - this removes declarations from the earlier
+             * scope that are last-used at or before the newly merged subsequent scope
+             */
+            updateScopeDeclarations(current.block.scope, this.lastUsage);
+            current.to = i + 1;
+            /*
+             * We already checked that intermediate values were used at-or-before the merged
+             * scoped, so we can reset
+             */
+            current.lvalues.clear();
+
+            if (!scopeIsEligibleForMerging(instr)) {
+              /*
+               * The subsequent scope that we just merged isn't guaranteed to invalidate if its
+               * inputs change, so it is not a candidate for future merging
+               */
+              log(
+                `  but scope @${instr.scope.id} doesnt guaranteed invalidate so it cannot merge further`,
+              );
+              reset();
+            }
+          } else {
+            // No previous scope, or the scope cannot merge
+            if (current !== null) {
+              // Reset if necessary
+              log(
+                `Reset scope @${current.block.scope.id}, not mergeable with subsequent scope @${instr.scope.id}`,
+              );
+              reset();
+            }
+            // Only set a new merge candidate if the scope is guaranteed to invalidate on changes
+            if (scopeIsEligibleForMerging(instr)) {
+              current = {
+                block: instr,
+                from: i,
+                to: i + 1,
+                lvalues: new Set(),
+              };
+            } else {
+              log(
+                `scope @${instr.scope.id} doesnt guaranteed invalidate so it cannot merge further`,
+              );
+            }
+          }
+          break;
+        }
+        default: {
+          assertExhaustive(
+            instr,
+            `Unexpected instruction kind \`${(instr as any).kind}\``,
+          );
+        }
+      }
+    }
+    if (current !== null) {
+      reset();
+    }
+    if (merged.length) {
+      log(`merged ${merged.length} scopes:`);
+      for (const entry of merged) {
+        log(
+          printReactiveScopeSummary(entry.block.scope) +
+            ` from=${entry.from} to=${entry.to}`,
+        );
+      }
+    }
+
+    // Pass 3: optional: if scopes can be merged, merge them and update the block
+    if (merged.length === 0) {
+      // Nothing merged, nothing to do!
+      return;
+    }
+    const nextInstructions = [];
+    let index = 0;
+    for (const entry of merged) {
+      if (index < entry.from) {
+        nextInstructions.push(...block.slice(index, entry.from));
+        index = entry.from;
+      }
+      const mergedScope = block[entry.from]!;
+      CompilerError.invariant(mergedScope.kind === 'scope', {
+        reason:
+          'MergeConsecutiveScopes: Expected scope starting index to be a scope',
+        loc: GeneratedSource,
+      });
+      nextInstructions.push(mergedScope);
+      index++;
+      while (index < entry.to) {
+        const instr = block[index++]!;
+        if (instr.kind === 'scope') {
+          mergedScope.instructions.push(...instr.instructions);
+          mergedScope.scope.merged.add(instr.scope.id);
+        } else {
+          mergedScope.instructions.push(instr);
+        }
+      }
+    }
+    while (index < block.length) {
+      nextInstructions.push(block[index++]!);
+    }
+    block.length = 0;
+    block.push(...nextInstructions);
+  }
+}
+
+/*
+ * Updates @param scope's declarations to remove any declarations that are not
+ * used after the scope, based on the scope's updated range post-merging.
+ */
+function updateScopeDeclarations(
+  scope: ReactiveScope,
+  lastUsage: Map<DeclarationId, InstructionId>,
+): void {
+  for (const [id, decl] of scope.declarations) {
+    const lastUsedAt = lastUsage.get(decl.identifier.declarationId)!;
+    if (lastUsedAt < scope.range.end) {
+      scope.declarations.delete(id);
+    }
+  }
+}
+
+/*
+ * Returns whether the given @param scope is the last usage of all
+ * the given @param lvalues. Returns false if any of the lvalues
+ * are used again after the scope.
+ */
+function areLValuesLastUsedByScope(
+  scope: ReactiveScope,
+  lvalues: Set<DeclarationId>,
+  lastUsage: Map<DeclarationId, InstructionId>,
+): boolean {
+  for (const lvalue of lvalues) {
+    const lastUsedAt = lastUsage.get(lvalue)!;
+    if (lastUsedAt >= scope.range.end) {
+      log(`  lvalue ${lvalue} used after scope @${scope.id}, cannot merge`);
+      return false;
+    }
+  }
+  return true;
+}
+
+function canMergeScopes(
+  current: ReactiveScopeBlock,
+  next: ReactiveScopeBlock,
+  temporaries: Map<DeclarationId, DeclarationId>,
+): boolean {
+  // Don't merge scopes with reassignments
+  if (
+    current.scope.reassignments.size !== 0 ||
+    next.scope.reassignments.size !== 0
+  ) {
+    log(`  cannot merge, has reassignments`);
+    return false;
+  }
+  // Merge scopes whose dependencies are identical
+  if (
+    areEqualDependencies(current.scope.dependencies, next.scope.dependencies)
+  ) {
+    log(`  canMergeScopes: dependencies are equal`);
+    return true;
+  }
+  /*
+   * Merge scopes where the outputs of the previous scope are the inputs
+   * of the subsequent scope. Note that the output of a scope is not
+   * guaranteed to change when its inputs change, for example `foo(x)`
+   * may not change when `x` changes, for example `foo(x) { return x < 10}`
+   * will not change as x changes from 0 -> 1.
+   * Therefore we check that the outputs of the previous scope are of a type
+   * that is guaranteed to invalidate with its inputs, and only merge in this case.
+   */
+  if (
+    areEqualDependencies(
+      new Set(
+        [...current.scope.declarations.values()].map(declaration => ({
+          identifier: declaration.identifier,
+          reactive: true,
+          path: [],
+        })),
+      ),
+      next.scope.dependencies,
+    ) ||
+    (next.scope.dependencies.size !== 0 &&
+      [...next.scope.dependencies].every(
+        dep =>
+          dep.path.length === 0 &&
+          isAlwaysInvalidatingType(dep.identifier.type) &&
+          Iterable_some(
+            current.scope.declarations.values(),
+            decl =>
+              decl.identifier.declarationId === dep.identifier.declarationId ||
+              decl.identifier.declarationId ===
+                temporaries.get(dep.identifier.declarationId),
+          ),
+      ))
+  ) {
+    log(`  outputs of prev are input to current`);
+    return true;
+  }
+  log(`  cannot merge scopes:`);
+  log(
+    `  ${printReactiveScopeSummary(current.scope)} ${[...current.scope.declarations.values()].map(decl => decl.identifier.declarationId)}`,
+  );
+  log(
+    `  ${printReactiveScopeSummary(next.scope)} ${[...next.scope.dependencies].map(dep => `${dep.identifier.declarationId} ${temporaries.get(dep.identifier.declarationId) ?? dep.identifier.declarationId}`)}`,
+  );
+  return false;
+}
+
+export function isAlwaysInvalidatingType(type: Type): boolean {
+  switch (type.kind) {
+    case 'Object': {
+      switch (type.shapeId) {
+        case BuiltInArrayId:
+        case BuiltInObjectId:
+        case BuiltInFunctionId:
+        case BuiltInJsxId: {
+          return true;
+        }
+      }
+      break;
+    }
+    case 'Function': {
+      return true;
+    }
+  }
+  return false;
+}
+
+function areEqualDependencies(
+  a: Set<ReactiveScopeDependency>,
+  b: Set<ReactiveScopeDependency>,
+): boolean {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const aValue of a) {
+    let found = false;
+    for (const bValue of b) {
+      if (
+        aValue.identifier.declarationId === bValue.identifier.declarationId &&
+        areEqualPaths(aValue.path, bValue.path)
+      ) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Is this scope eligible for merging with subsequent scopes? In general this
+ * is only true if the scope's output values are guaranteed to change when its
+ * input changes. When the output may not change, it's better to avoid merging
+ * with subsequent scopes so that they can compare the input and avoid updating
+ * when there are no changes.
+ *
+ * A special-case is if the scope has no dependencies, then its output will
+ * *never* change and it's also eligible for merging.
+ */
+function scopeIsEligibleForMerging(scopeBlock: ReactiveScopeBlock): boolean {
+  if (scopeBlock.scope.dependencies.size === 0) {
+    /*
+     * Regardless of the type of value produced, if the scope has no dependencies
+     * then its value will never change.
+     */
+    return true;
+  }
+  return [...scopeBlock.scope.declarations].some(([, decl]) =>
+    isAlwaysInvalidatingType(decl.identifier.type),
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
new file mode 100644
index 00000000000..ffb25082c20
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
@@ -0,0 +1,457 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  GeneratedSource,
+  PrunedReactiveScopeBlock,
+  ReactiveFunction,
+  ReactiveScope,
+  ReactiveScopeBlock,
+  ReactiveScopeDependency,
+  ReactiveStatement,
+  ReactiveTerminal,
+  ReactiveValue,
+} from '../HIR/HIR';
+import {
+  printFunction,
+  printIdentifier,
+  printInstructionValue,
+  printPlace,
+  printType,
+} from '../HIR/PrintHIR';
+import {assertExhaustive} from '../Utils/utils';
+
+export function printReactiveFunctionWithOutlined(
+  fn: ReactiveFunction,
+): string {
+  const writer = new Writer();
+  writeReactiveFunction(fn, writer);
+  for (const outlined of fn.env.getOutlinedFunctions()) {
+    writer.writeLine('\nfunction ' + printFunction(outlined.fn));
+  }
+  return writer.complete();
+}
+
+export function printReactiveFunction(fn: ReactiveFunction): string {
+  const writer = new Writer();
+  writeReactiveFunction(fn, writer);
+  return writer.complete();
+}
+
+function writeReactiveFunction(fn: ReactiveFunction, writer: Writer): void {
+  writer.writeLine(`function ${fn.id !== null ? fn.id : '<unknown>'}(`);
+  writer.indented(() => {
+    for (const param of fn.params) {
+      if (param.kind === 'Identifier') {
+        writer.writeLine(`${printPlace(param)},`);
+      } else {
+        writer.writeLine(`...${printPlace(param.place)},`);
+      }
+    }
+  });
+  writer.writeLine(') {');
+  writeReactiveInstructions(writer, fn.body);
+  writer.writeLine('}');
+}
+
+export function printReactiveScopeSummary(scope: ReactiveScope): string {
+  const items = [];
+  // If the scope has a return value it needs a label
+  items.push('scope');
+  items.push(`@${scope.id}`);
+  items.push(`[${scope.range.start}:${scope.range.end}]`);
+  items.push(
+    `dependencies=[${Array.from(scope.dependencies)
+      .map(dep => printDependency(dep))
+      .join(', ')}]`,
+  );
+  items.push(
+    `declarations=[${Array.from(scope.declarations)
+      .map(([, decl]) =>
+        printIdentifier({...decl.identifier, scope: decl.scope}),
+      )
+      .join(', ')}]`,
+  );
+  items.push(
+    `reassignments=[${Array.from(scope.reassignments).map(reassign =>
+      printIdentifier(reassign),
+    )}]`,
+  );
+  if (scope.earlyReturnValue !== null) {
+    items.push(
+      `earlyReturn={id: ${printIdentifier(
+        scope.earlyReturnValue.value,
+      )}, label: ${scope.earlyReturnValue.label}}}`,
+    );
+  }
+  return items.join(' ');
+}
+
+export function writeReactiveBlock(
+  writer: Writer,
+  block: ReactiveScopeBlock,
+): void {
+  writer.writeLine(`${printReactiveScopeSummary(block.scope)} {`);
+  writeReactiveInstructions(writer, block.instructions);
+  writer.writeLine('}');
+}
+
+export function writePrunedScope(
+  writer: Writer,
+  block: PrunedReactiveScopeBlock,
+): void {
+  writer.writeLine(`<pruned> ${printReactiveScopeSummary(block.scope)} {`);
+  writeReactiveInstructions(writer, block.instructions);
+  writer.writeLine('}');
+}
+
+export function printDependency(dependency: ReactiveScopeDependency): string {
+  const identifier =
+    printIdentifier(dependency.identifier) +
+    printType(dependency.identifier.type);
+  return `${identifier}${dependency.path.map(token => `${token.optional ? '?.' : '.'}${token.property}`).join('')}`;
+}
+
+export function printReactiveInstructions(
+  instructions: Array<ReactiveStatement>,
+): string {
+  const writer = new Writer();
+  writeReactiveInstructions(writer, instructions);
+  return writer.complete();
+}
+
+export function writeReactiveInstructions(
+  writer: Writer,
+  instructions: Array<ReactiveStatement>,
+): void {
+  writer.indented(() => {
+    for (const instr of instructions) {
+      writeReactiveInstruction(writer, instr);
+    }
+  });
+}
+
+function writeReactiveInstruction(
+  writer: Writer,
+  instr: ReactiveStatement,
+): void {
+  switch (instr.kind) {
+    case 'instruction': {
+      const {instruction} = instr;
+      const id = `[${instruction.id}]`;
+
+      if (instruction.lvalue !== null) {
+        writer.write(`${id} ${printPlace(instruction.lvalue)} = `);
+        writeReactiveValue(writer, instruction.value);
+        writer.newline();
+      } else {
+        writer.write(`${id} `);
+        writeReactiveValue(writer, instruction.value);
+        writer.newline();
+      }
+      break;
+    }
+    case 'scope': {
+      writeReactiveBlock(writer, instr);
+      break;
+    }
+    case 'pruned-scope': {
+      writePrunedScope(writer, instr);
+      break;
+    }
+    case 'terminal': {
+      if (instr.label !== null) {
+        writer.write(`bb${instr.label.id}: `);
+      }
+      writeTerminal(writer, instr.terminal);
+      break;
+    }
+    default: {
+      assertExhaustive(
+        instr,
+        `Unexpected terminal kind \`${(instr as any).kind}\``,
+      );
+    }
+  }
+}
+
+export function printReactiveValue(value: ReactiveValue): string {
+  const writer = new Writer();
+  writeReactiveValue(writer, value);
+  return writer.complete();
+}
+
+function writeReactiveValue(writer: Writer, value: ReactiveValue): void {
+  switch (value.kind) {
+    case 'ConditionalExpression': {
+      writer.writeLine(`Ternary `);
+      writer.indented(() => {
+        writeReactiveValue(writer, value.test);
+        writer.writeLine(`? `);
+        writer.indented(() => {
+          writeReactiveValue(writer, value.consequent);
+        });
+        writer.writeLine(`: `);
+        writer.indented(() => {
+          writeReactiveValue(writer, value.alternate);
+        });
+      });
+      writer.newline();
+      break;
+    }
+    case 'LogicalExpression': {
+      writer.writeLine(`Logical`);
+      writer.indented(() => {
+        writeReactiveValue(writer, value.left);
+        writer.write(`${value.operator} `);
+        writeReactiveValue(writer, value.right);
+      });
+      writer.newline();
+      break;
+    }
+    case 'SequenceExpression': {
+      writer.writeLine(`Sequence`);
+      writer.indented(() => {
+        writer.indented(() => {
+          value.instructions.forEach(instr =>
+            writeReactiveInstruction(writer, {
+              kind: 'instruction',
+              instruction: instr,
+            }),
+          );
+          writer.write(`[${value.id}] `);
+          writeReactiveValue(writer, value.value);
+        });
+      });
+      writer.newline();
+      break;
+    }
+    case 'OptionalExpression': {
+      writer.append(`OptionalExpression optional=${value.optional}`);
+      writer.newline();
+      writer.indented(() => {
+        writeReactiveValue(writer, value.value);
+      });
+      writer.newline();
+      break;
+    }
+    default: {
+      const printed = printInstructionValue(value);
+      const lines = printed.split('\n');
+      if (lines.length === 1) {
+        writer.writeLine(printed);
+      } else {
+        writer.indented(() => {
+          for (const line of lines) {
+            writer.writeLine(line);
+          }
+        });
+      }
+    }
+  }
+}
+
+export function printReactiveTerminal(terminal: ReactiveTerminal): string {
+  const writer = new Writer();
+  writeTerminal(writer, terminal);
+  return writer.complete();
+}
+
+function writeTerminal(writer: Writer, terminal: ReactiveTerminal): void {
+  switch (terminal.kind) {
+    case 'break': {
+      const id = terminal.id !== null ? `[${terminal.id}]` : [];
+      writer.writeLine(
+        `${id} break bb${terminal.target} (${terminal.targetKind})`,
+      );
+
+      break;
+    }
+    case 'continue': {
+      const id = `[${terminal.id}]`;
+      writer.writeLine(
+        `${id} continue bb${terminal.target} (${terminal.targetKind})`,
+      );
+      break;
+    }
+    case 'do-while': {
+      writer.writeLine(`[${terminal.id}] do-while {`);
+      writeReactiveInstructions(writer, terminal.loop);
+      writer.writeLine('} (');
+      writer.indented(() => {
+        writeReactiveValue(writer, terminal.test);
+      });
+      writer.writeLine(')');
+      break;
+    }
+    case 'while': {
+      writer.writeLine(`[${terminal.id}] while (`);
+      writer.indented(() => {
+        writeReactiveValue(writer, terminal.test);
+      });
+      writer.writeLine(') {');
+      writeReactiveInstructions(writer, terminal.loop);
+      writer.writeLine('}');
+      break;
+    }
+    case 'if': {
+      const {test, consequent, alternate} = terminal;
+      writer.writeLine(`[${terminal.id}] if (${printPlace(test)}) {`);
+      writeReactiveInstructions(writer, consequent);
+      if (alternate !== null) {
+        writer.writeLine('} else {');
+        writeReactiveInstructions(writer, alternate);
+      }
+      writer.writeLine('}');
+      break;
+    }
+    case 'switch': {
+      writer.writeLine(
+        `[${terminal.id}] switch (${printPlace(terminal.test)}) {`,
+      );
+      writer.indented(() => {
+        for (const case_ of terminal.cases) {
+          let prefix =
+            case_.test !== null ? `case ${printPlace(case_.test)}` : 'default';
+          writer.writeLine(`${prefix}: {`);
+          writer.indented(() => {
+            const block = case_.block;
+            CompilerError.invariant(block != null, {
+              reason: 'Expected case to have a block',
+              loc: case_.test?.loc ?? GeneratedSource,
+            });
+            writeReactiveInstructions(writer, block);
+          });
+          writer.writeLine('}');
+        }
+      });
+      writer.writeLine('}');
+      break;
+    }
+    case 'for': {
+      writer.writeLine(`[${terminal.id}] for (`);
+      writer.indented(() => {
+        writeReactiveValue(writer, terminal.init);
+        writer.writeLine(';');
+        writeReactiveValue(writer, terminal.test);
+        writer.writeLine(';');
+        if (terminal.update !== null) {
+          writeReactiveValue(writer, terminal.update);
+        }
+      });
+      writer.writeLine(') {');
+      writeReactiveInstructions(writer, terminal.loop);
+      writer.writeLine('}');
+      break;
+    }
+    case 'for-of': {
+      writer.writeLine(`[${terminal.id}] for-of (`);
+      writer.indented(() => {
+        writeReactiveValue(writer, terminal.init);
+        writer.writeLine(';');
+        writeReactiveValue(writer, terminal.test);
+      });
+      writer.writeLine(') {');
+      writeReactiveInstructions(writer, terminal.loop);
+      writer.writeLine('}');
+      break;
+    }
+    case 'for-in': {
+      writer.writeLine(`[${terminal.id}] for-in (`);
+      writer.indented(() => {
+        writeReactiveValue(writer, terminal.init);
+      });
+      writer.writeLine(') {');
+      writeReactiveInstructions(writer, terminal.loop);
+      writer.writeLine('}');
+      break;
+    }
+    case 'throw': {
+      writer.writeLine(`[${terminal.id}] throw ${printPlace(terminal.value)}`);
+      break;
+    }
+    case 'return': {
+      writer.writeLine(`[${terminal.id}] return ${printPlace(terminal.value)}`);
+      break;
+    }
+    case 'label': {
+      writer.writeLine('{');
+      writeReactiveInstructions(writer, terminal.block);
+      writer.writeLine('}');
+      break;
+    }
+    case 'try': {
+      writer.writeLine(`[${terminal.id}] try {`);
+      writeReactiveInstructions(writer, terminal.block);
+      writer.write(`} catch `);
+      if (terminal.handlerBinding !== null) {
+        writer.writeLine(`(${printPlace(terminal.handlerBinding)}) {`);
+      } else {
+        writer.writeLine(`{`);
+      }
+      writeReactiveInstructions(writer, terminal.handler);
+      writer.writeLine('}');
+      break;
+    }
+    default:
+      assertExhaustive(
+        terminal,
+        `Unhandled terminal kind \`${(terminal as any).kind}\``,
+      );
+  }
+}
+
+export class Writer {
+  #out: Array<string> = [];
+  #line: string;
+  #depth: number;
+
+  constructor({depth}: {depth: number} = {depth: 0}) {
+    this.#depth = Math.max(depth, 0);
+    this.#line = '';
+  }
+
+  complete(): string {
+    const line = this.#line.trimEnd();
+    if (line.length > 0) {
+      this.#out.push(line);
+    }
+    return this.#out.join('\n');
+  }
+
+  append(s: string): void {
+    this.write(s);
+  }
+
+  newline(): void {
+    const line = this.#line.trimEnd();
+    if (line.length > 0) {
+      this.#out.push(line);
+    }
+    this.#line = '';
+  }
+
+  write(s: string): void {
+    if (this.#line.length === 0 && this.#depth > 0) {
+      // indent before writing
+      this.#line = '  '.repeat(this.#depth);
+    }
+    this.#line += s;
+  }
+
+  writeLine(s: string): void {
+    this.write(s);
+    this.newline();
+  }
+
+  indented(f: () => void): void {
+    this.#depth++;
+    f();
+    this.#depth--;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts
new file mode 100644
index 00000000000..1bd9690c5a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts
@@ -0,0 +1,464 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {GeneratedSource} from '../HIR';
+import {
+  DeclarationId,
+  Identifier,
+  InstructionId,
+  Place,
+  PrunedReactiveScopeBlock,
+  ReactiveFunction,
+  ReactiveScope,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveValue,
+  ScopeId,
+  SpreadPattern,
+  promoteTemporary,
+  promoteTemporaryJsxTag,
+  IdentifierId,
+} from '../HIR/HIR';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
+
+/**
+ * Phase 2: Promote identifiers which are used in a place that requires a named variable.
+ */
+class PromoteTemporaries extends ReactiveFunctionVisitor<State> {
+  override visitScope(scopeBlock: ReactiveScopeBlock, state: State): void {
+    for (const dep of scopeBlock.scope.dependencies) {
+      const {identifier} = dep;
+      if (identifier.name == null) {
+        promoteIdentifier(identifier, state);
+      }
+    }
+    /*
+     * This is technically optional. We could prune ReactiveScopes
+     * whose outputs are not used in another computation or return
+     * value.
+     * Many of our current test fixtures do not return a value, so
+     * it is better for now to promote (and memoize) every output.
+     */
+    for (const [, declaration] of scopeBlock.scope.declarations) {
+      if (declaration.identifier.name == null) {
+        promoteIdentifier(declaration.identifier, state);
+      }
+    }
+    this.traverseScope(scopeBlock, state);
+  }
+
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: State,
+  ): void {
+    for (const [, declaration] of scopeBlock.scope.declarations) {
+      if (
+        declaration.identifier.name == null &&
+        state.pruned.get(declaration.identifier.declarationId)
+          ?.usedOutsideScope === true
+      ) {
+        promoteIdentifier(declaration.identifier, state);
+      }
+    }
+    this.traversePrunedScope(scopeBlock, state);
+  }
+
+  override visitParam(place: Place, state: State): void {
+    if (place.identifier.name === null) {
+      promoteIdentifier(place.identifier, state);
+    }
+  }
+
+  override visitValue(
+    id: InstructionId,
+    value: ReactiveValue,
+    state: State,
+  ): void {
+    this.traverseValue(id, value, state);
+    if (value.kind === 'FunctionExpression' || value.kind === 'ObjectMethod') {
+      this.visitHirFunction(value.loweredFunc.func, state);
+    }
+  }
+
+  override visitReactiveFunctionValue(
+    _id: InstructionId,
+    _dependencies: Array<Place>,
+    fn: ReactiveFunction,
+    state: State,
+  ): void {
+    for (const operand of fn.params) {
+      const place = operand.kind === 'Identifier' ? operand : operand.place;
+      if (place.identifier.name === null) {
+        promoteIdentifier(place.identifier, state);
+      }
+    }
+    visitReactiveFunction(fn, this, state);
+  }
+}
+
+/**
+ * Phase 3: Now that identifiers which need promotion are promoted, find and promote
+ * all other Identifier instances of each promoted DeclarationId.
+ */
+class PromoteAllInstancedOfPromotedTemporaries extends ReactiveFunctionVisitor<State> {
+  override visitPlace(_id: InstructionId, place: Place, state: State): void {
+    if (
+      place.identifier.name === null &&
+      state.promoted.has(place.identifier.declarationId)
+    ) {
+      promoteIdentifier(place.identifier, state);
+    }
+  }
+  override visitLValue(
+    _id: InstructionId,
+    _lvalue: Place,
+    _state: State,
+  ): void {
+    this.visitPlace(_id, _lvalue, _state);
+  }
+  traverseScopeIdentifiers(scope: ReactiveScope, state: State): void {
+    for (const [, decl] of scope.declarations) {
+      if (
+        decl.identifier.name === null &&
+        state.promoted.has(decl.identifier.declarationId)
+      ) {
+        promoteIdentifier(decl.identifier, state);
+      }
+    }
+    for (const dep of scope.dependencies) {
+      if (
+        dep.identifier.name === null &&
+        state.promoted.has(dep.identifier.declarationId)
+      ) {
+        promoteIdentifier(dep.identifier, state);
+      }
+    }
+    for (const reassignment of scope.reassignments) {
+      if (
+        reassignment.name === null &&
+        state.promoted.has(reassignment.declarationId)
+      ) {
+        promoteIdentifier(reassignment, state);
+      }
+    }
+  }
+  override visitScope(scope: ReactiveScopeBlock, state: State): void {
+    this.traverseScope(scope, state);
+    this.traverseScopeIdentifiers(scope.scope, state);
+  }
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: State,
+  ): void {
+    this.traversePrunedScope(scopeBlock, state);
+    this.traverseScopeIdentifiers(scopeBlock.scope, state);
+  }
+  override visitReactiveFunctionValue(
+    _id: InstructionId,
+    _dependencies: Array<Place>,
+    fn: ReactiveFunction,
+    state: State,
+  ): void {
+    visitReactiveFunction(fn, this, state);
+  }
+}
+
+type JsxExpressionTags = Set<DeclarationId>;
+type State = {
+  tags: JsxExpressionTags;
+  promoted: Set<DeclarationId>;
+  pruned: Map<
+    DeclarationId,
+    {activeScopes: Array<ScopeId>; usedOutsideScope: boolean}
+  >; // true if referenced within another scope, false if only accessed outside of scopes
+};
+
+/**
+ * Phase 1: checks for pruned variables which need to be promoted, as well as
+ * usage of identifiers as jsx tags, which need to be promoted differently
+ */
+class CollectPromotableTemporaries extends ReactiveFunctionVisitor<State> {
+  activeScopes: Array<ScopeId> = [];
+
+  override visitPlace(_id: InstructionId, place: Place, state: State): void {
+    if (
+      this.activeScopes.length !== 0 &&
+      state.pruned.has(place.identifier.declarationId)
+    ) {
+      const prunedPlace = state.pruned.get(place.identifier.declarationId)!;
+      if (prunedPlace.activeScopes.indexOf(this.activeScopes.at(-1)!) === -1) {
+        prunedPlace.usedOutsideScope = true;
+      }
+    }
+  }
+
+  override visitValue(
+    id: InstructionId,
+    value: ReactiveValue,
+    state: State,
+  ): void {
+    this.traverseValue(id, value, state);
+    if (value.kind === 'JsxExpression' && value.tag.kind === 'Identifier') {
+      state.tags.add(value.tag.identifier.declarationId);
+    }
+  }
+
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: State,
+  ): void {
+    for (const [_id, decl] of scopeBlock.scope.declarations) {
+      state.pruned.set(decl.identifier.declarationId, {
+        activeScopes: [...this.activeScopes],
+        usedOutsideScope: false,
+      });
+    }
+    this.visitBlock(scopeBlock.instructions, state);
+  }
+
+  override visitScope(scopeBlock: ReactiveScopeBlock, state: State): void {
+    this.activeScopes.push(scopeBlock.scope.id);
+    this.traverseScope(scopeBlock, state);
+    this.activeScopes.pop();
+  }
+}
+
+type InterState = Map<IdentifierId, [Identifier, boolean]>;
+class PromoteInterposedTemporaries extends ReactiveFunctionVisitor<InterState> {
+  #promotable: State;
+  #consts: Set<IdentifierId> = new Set();
+  #globals: Set<IdentifierId> = new Set();
+
+  /*
+   * Unpromoted temporaries will be emitted at their use sites rather than as separate
+   * declarations. However, this causes errors if an interposing temporary has been
+   * promoted, or if an interposing instruction has had its lvalues deleted, because such
+   * temporaries will be emitted as separate statements, which can effectively cause
+   * code to be reordered, and when that code has side effects that changes program behavior.
+   * This visitor promotes temporarties that have such interposing instructions to preserve
+   * source ordering.
+   */
+  constructor(promotable: State, params: Array<Place | SpreadPattern>) {
+    super();
+    params.forEach(param => {
+      switch (param.kind) {
+        case 'Identifier':
+          this.#consts.add(param.identifier.id);
+          break;
+        case 'Spread':
+          this.#consts.add(param.place.identifier.id);
+          break;
+      }
+    });
+    this.#promotable = promotable;
+  }
+
+  override visitPlace(
+    _id: InstructionId,
+    place: Place,
+    state: InterState,
+  ): void {
+    const promo = state.get(place.identifier.id);
+    if (promo) {
+      const [identifier, needsPromotion] = promo;
+      if (
+        needsPromotion &&
+        identifier.name === null &&
+        !this.#consts.has(identifier.id)
+      ) {
+        /*
+         * If the identifier hasn't been promoted but is marked as needing
+         * promotion by the logic in `visitInstruction`, and we've seen a
+         * use of it after said marking, promote it
+         */
+        promoteIdentifier(identifier, this.#promotable);
+      }
+    }
+  }
+
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    state: InterState,
+  ): void {
+    for (const lval of eachInstructionValueLValue(instruction.value)) {
+      CompilerError.invariant(lval.identifier.name != null, {
+        reason:
+          'PromoteInterposedTemporaries: Assignment targets not expected to be temporaries',
+        loc: instruction.loc,
+      });
+    }
+
+    switch (instruction.value.kind) {
+      case 'CallExpression':
+      case 'MethodCall':
+      case 'Await':
+      case 'PropertyStore':
+      case 'PropertyDelete':
+      case 'ComputedStore':
+      case 'ComputedDelete':
+      case 'PostfixUpdate':
+      case 'PrefixUpdate':
+      case 'StoreLocal':
+      case 'StoreContext':
+      case 'StoreGlobal':
+      case 'Destructure': {
+        let constStore = false;
+
+        if (
+          (instruction.value.kind === 'StoreContext' ||
+            instruction.value.kind === 'StoreLocal') &&
+          (instruction.value.lvalue.kind === 'Const' ||
+            instruction.value.lvalue.kind === 'HoistedConst')
+        ) {
+          /*
+           * If an identifier is const, we don't need to worry about it
+           * being mutated between being loaded and being used
+           */
+          this.#consts.add(instruction.value.lvalue.place.identifier.id);
+          constStore = true;
+        }
+        if (
+          instruction.value.kind === 'Destructure' &&
+          (instruction.value.lvalue.kind === 'Const' ||
+            instruction.value.lvalue.kind === 'HoistedConst')
+        ) {
+          [...eachPatternOperand(instruction.value.lvalue.pattern)].forEach(
+            ident => this.#consts.add(ident.identifier.id),
+          );
+          constStore = true;
+        }
+        if (instruction.value.kind === 'MethodCall') {
+          // Treat property of method call as constlike so we don't promote it.
+          this.#consts.add(instruction.value.property.identifier.id);
+        }
+
+        super.visitInstruction(instruction, state);
+        if (
+          !constStore &&
+          (instruction.lvalue == null ||
+            instruction.lvalue.identifier.name != null)
+        ) {
+          /*
+           * If we've stripped the lvalue or promoted the lvalue, then we will emit this instruction
+           * as a statement in codegen.
+           *
+           * If this instruction will be emitted directly as a statement rather than as a temporary
+           * during codegen, then it can interpose between the defs and the uses of other temporaries.
+           * Since this instruction could potentially mutate those defs, it's not safe to relocate
+           * the definition of those temporaries to after this instruction. Mark all those temporaries
+           * as needing promotion, but don't promote them until we actually see them being used.
+           */
+          for (const [key, [ident, _]] of state.entries()) {
+            state.set(key, [ident, true]);
+          }
+        }
+        if (instruction.lvalue && instruction.lvalue.identifier.name === null) {
+          // Add this instruction's lvalue to the state, initially not marked as needing promotion
+          state.set(instruction.lvalue.identifier.id, [
+            instruction.lvalue.identifier,
+            false,
+          ]);
+        }
+        break;
+      }
+      case 'DeclareContext':
+      case 'DeclareLocal': {
+        if (
+          instruction.value.lvalue.kind === 'Const' ||
+          instruction.value.lvalue.kind === 'HoistedConst'
+        ) {
+          this.#consts.add(instruction.value.lvalue.place.identifier.id);
+        }
+        super.visitInstruction(instruction, state);
+        break;
+      }
+      case 'LoadContext':
+      case 'LoadLocal': {
+        if (instruction.lvalue && instruction.lvalue.identifier.name === null) {
+          if (this.#consts.has(instruction.value.place.identifier.id)) {
+            this.#consts.add(instruction.lvalue.identifier.id);
+          }
+          state.set(instruction.lvalue.identifier.id, [
+            instruction.lvalue.identifier,
+            false,
+          ]);
+        }
+        super.visitInstruction(instruction, state);
+        break;
+      }
+      case 'PropertyLoad':
+      case 'ComputedLoad': {
+        if (instruction.lvalue) {
+          if (this.#globals.has(instruction.value.object.identifier.id)) {
+            this.#globals.add(instruction.lvalue.identifier.id);
+            this.#consts.add(instruction.lvalue.identifier.id);
+          }
+          if (instruction.lvalue.identifier.name === null) {
+            state.set(instruction.lvalue.identifier.id, [
+              instruction.lvalue.identifier,
+              false,
+            ]);
+          }
+        }
+        super.visitInstruction(instruction, state);
+        break;
+      }
+      case 'LoadGlobal': {
+        instruction.lvalue &&
+          this.#globals.add(instruction.lvalue.identifier.id);
+        super.visitInstruction(instruction, state);
+        break;
+      }
+      default: {
+        super.visitInstruction(instruction, state);
+      }
+    }
+  }
+}
+
+export function promoteUsedTemporaries(fn: ReactiveFunction): void {
+  const state: State = {
+    tags: new Set(),
+    promoted: new Set(),
+    pruned: new Map(),
+  };
+  visitReactiveFunction(fn, new CollectPromotableTemporaries(), state);
+  for (const operand of fn.params) {
+    const place = operand.kind === 'Identifier' ? operand : operand.place;
+    if (place.identifier.name === null) {
+      promoteIdentifier(place.identifier, state);
+    }
+  }
+  visitReactiveFunction(fn, new PromoteTemporaries(), state);
+
+  visitReactiveFunction(
+    fn,
+    new PromoteInterposedTemporaries(state, fn.params),
+    new Map(),
+  );
+  visitReactiveFunction(
+    fn,
+    new PromoteAllInstancedOfPromotedTemporaries(),
+    state,
+  );
+}
+
+function promoteIdentifier(identifier: Identifier, state: State): void {
+  CompilerError.invariant(identifier.name === null, {
+    reason:
+      'promoteTemporary: Expected to be called only for temporary variables',
+    loc: GeneratedSource,
+  });
+  if (state.tags.has(identifier.declarationId)) {
+    promoteTemporaryJsxTag(identifier);
+  } else {
+    promoteTemporary(identifier);
+  }
+  state.promoted.add(identifier.declarationId);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PropagateEarlyReturns.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PropagateEarlyReturns.ts
new file mode 100644
index 00000000000..522aaf5a5df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PropagateEarlyReturns.ts
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {visitReactiveFunction} from '.';
+import {Effect} from '..';
+import {
+  Environment,
+  GeneratedSource,
+  InstructionKind,
+  ReactiveFunction,
+  ReactiveScope,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+  ReactiveTerminalStatement,
+  makeInstructionId,
+  makePropertyLiteral,
+  promoteTemporary,
+} from '../HIR';
+import {createTemporaryPlace} from '../HIR/HIRBuilder';
+import {EARLY_RETURN_SENTINEL} from './CodegenReactiveFunction';
+import {ReactiveFunctionTransform, Transformed} from './visitors';
+
+/**
+ * This pass ensures that reactive blocks honor the control flow behavior of the
+ * original code including early return semantics. Specifically, if a reactive
+ * scope early returned during the previous execution and the inputs to that block
+ * have not changed, then the code should early return (with the same value) again.
+ *
+ * Example:
+ *
+ * ```javascript
+ * let x = [];
+ * if (props.cond) {
+ *   x.push(12);
+ *   return x;
+ * } else {
+ *   return foo();
+ * }
+ * ```
+ *
+ * Imagine that this code is called twice in a row with props.cond = true. Both
+ * times it should return the same object (===), an array `[12]`.
+ *
+ * The compilation strategy is as follows. For each top-level reactive scope
+ * that contains (transitively) an early return:
+ *
+ * - Label the scope
+ * - Synthesize a new temporary, eg `t0`, and set it as a declaration of the scope.
+ *   This will represent the possibly-unset return value for that scope.
+ * - Make the first instruction of the scope the declaration of that temporary,
+ *   assigning a sentinel value (can reuse the same symbol as we use for cache slots).
+ *   This assignment ensures that if we don't take an early return, that the value
+ *   is the sentinel.
+ * - Replace all `return` statements with:
+ *   - An assignment of the temporary with the value being returned.
+ *   - A `break` to the reactive scope's label.
+ *
+ * Finally, CodegenReactiveScope adds an if check following the reactive scope:
+ * if the early return temporary value is *not* the sentinel value, we early return
+ * it. Otherwise, execution continues.
+ *
+ * For the above example that looks roughly like:
+ *
+ * ```
+ * let t0;
+ * if (props.cond !== $[0]) {
+ *   t0 = Symbol.for('react.memo_cache_sentinel');
+ *   bb0: {
+ *     let x = [];
+ *     if (props.cond) {
+ *       x.push(12);
+ *       t0 = x;
+ *       break bb0;
+ *     } else {
+ *       let t1;
+ *       if ($[1] === Symbol.for('react.memo_cache_sentinel')) {
+ *         t1 = foo();
+ *         $[1] = t1;
+ *       } else {
+ *         t1 = $[1];
+ *       }
+ *       t0 = t1;
+ *       break bb0;
+ *     }
+ *   }
+ *   $[0] = props.cond;
+ *   $[2] = t0;
+ * } else {
+ *   t0 = $[2];
+ * }
+ * // This part added in CodegenReactiveScope:
+ * if (t0 !== Symbol.for('react.memo_cache_sentinel')) {
+ *   return t0;
+ * }
+ * ```
+ */
+export function propagateEarlyReturns(fn: ReactiveFunction): void {
+  visitReactiveFunction(fn, new Transform(fn.env), {
+    withinReactiveScope: false,
+    earlyReturnValue: null,
+  });
+}
+
+type State = {
+  /**
+   * Are we within a reactive scope? We use this for two things:
+   * - When we find an early return, transform it to an assign+break
+   *   only if we're in a reactive scope
+   * - Annotate reactive scopes that contain early returns...but only
+   *   the outermost reactive scope, we can't do this for nested
+   *   scopes.
+   */
+  withinReactiveScope: boolean;
+
+  /**
+   * Store early return information to bubble it back up to the outermost
+   * reactive scope
+   */
+  earlyReturnValue: ReactiveScope['earlyReturnValue'];
+};
+
+class Transform extends ReactiveFunctionTransform<State> {
+  env: Environment;
+  constructor(env: Environment) {
+    super();
+    this.env = env;
+  }
+
+  override visitScope(
+    scopeBlock: ReactiveScopeBlock,
+    parentState: State,
+  ): void {
+    /**
+     * Exit early if an earlier pass has already created an early return,
+     * which may happen in alternate compiler configurations.
+     */
+    if (scopeBlock.scope.earlyReturnValue !== null) {
+      return;
+    }
+
+    const innerState: State = {
+      withinReactiveScope: true,
+      earlyReturnValue: parentState.earlyReturnValue,
+    };
+    this.traverseScope(scopeBlock, innerState);
+
+    const earlyReturnValue = innerState.earlyReturnValue;
+    if (earlyReturnValue !== null) {
+      if (!parentState.withinReactiveScope) {
+        // This is the outermost scope wrapping an early return, store the early return information
+        scopeBlock.scope.earlyReturnValue = earlyReturnValue;
+        scopeBlock.scope.declarations.set(earlyReturnValue.value.id, {
+          identifier: earlyReturnValue.value,
+          scope: scopeBlock.scope,
+        });
+
+        const instructions = scopeBlock.instructions;
+        const loc = earlyReturnValue.loc;
+        const sentinelTemp = createTemporaryPlace(this.env, loc);
+        const symbolTemp = createTemporaryPlace(this.env, loc);
+        const forTemp = createTemporaryPlace(this.env, loc);
+        const argTemp = createTemporaryPlace(this.env, loc);
+        scopeBlock.instructions = [
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: {...symbolTemp},
+              value: {
+                kind: 'LoadGlobal',
+                binding: {
+                  kind: 'Global',
+                  name: 'Symbol',
+                },
+                loc,
+              },
+            },
+          },
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: {...forTemp},
+              value: {
+                kind: 'PropertyLoad',
+                object: {...symbolTemp},
+                property: makePropertyLiteral('for'),
+                loc,
+              },
+            },
+          },
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: {...argTemp},
+              value: {
+                kind: 'Primitive',
+                value: EARLY_RETURN_SENTINEL,
+                loc,
+              },
+            },
+          },
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: {...sentinelTemp},
+              value: {
+                kind: 'MethodCall',
+                receiver: symbolTemp,
+                property: forTemp,
+                args: [argTemp],
+                loc,
+              },
+            },
+          },
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: null,
+              value: {
+                kind: 'StoreLocal',
+                loc,
+                type: null,
+                lvalue: {
+                  kind: InstructionKind.Let,
+                  place: {
+                    kind: 'Identifier',
+                    effect: Effect.ConditionallyMutate,
+                    loc,
+                    reactive: true,
+                    identifier: earlyReturnValue.value,
+                  },
+                },
+                value: {...sentinelTemp},
+              },
+            },
+          },
+          {
+            kind: 'terminal',
+            label: {
+              id: earlyReturnValue.label,
+              implicit: false,
+            },
+            terminal: {
+              kind: 'label',
+              id: makeInstructionId(0),
+              loc: GeneratedSource,
+              block: instructions,
+            },
+          },
+        ];
+      } else {
+        /*
+         * Not the outermost scope, but we save the early return information in case there are other
+         * early returns within the same outermost scope
+         */
+        parentState.earlyReturnValue = earlyReturnValue;
+      }
+    }
+  }
+
+  override transformTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: State,
+  ): Transformed<ReactiveStatement> {
+    if (state.withinReactiveScope && stmt.terminal.kind === 'return') {
+      const loc = stmt.terminal.value.loc;
+      let earlyReturnValue: ReactiveScope['earlyReturnValue'];
+      if (state.earlyReturnValue !== null) {
+        earlyReturnValue = state.earlyReturnValue;
+      } else {
+        const identifier = createTemporaryPlace(this.env, loc).identifier;
+        promoteTemporary(identifier);
+        earlyReturnValue = {
+          label: this.env.nextBlockId,
+          loc,
+          value: identifier,
+        };
+      }
+      state.earlyReturnValue = earlyReturnValue;
+      return {
+        kind: 'replace-many',
+        value: [
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: null,
+              value: {
+                kind: 'StoreLocal',
+                loc,
+                type: null,
+                lvalue: {
+                  kind: InstructionKind.Reassign,
+                  place: {
+                    kind: 'Identifier',
+                    identifier: earlyReturnValue.value,
+                    effect: Effect.Capture,
+                    loc,
+                    reactive: true,
+                  },
+                },
+                value: stmt.terminal.value,
+              },
+            },
+          },
+          {
+            kind: 'terminal',
+            label: null,
+            terminal: {
+              kind: 'break',
+              id: makeInstructionId(0),
+              loc,
+              targetKind: 'labeled',
+              target: earlyReturnValue.label,
+            },
+          },
+        ],
+      };
+    }
+    this.traverseTerminal(stmt, state);
+    return {kind: 'keep'};
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneAllReactiveScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneAllReactiveScopes.ts
new file mode 100644
index 00000000000..8f819deca5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneAllReactiveScopes.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ReactiveFunction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+} from '../HIR/HIR';
+import {
+  ReactiveFunctionTransform,
+  Transformed,
+  visitReactiveFunction,
+} from './visitors';
+
+/*
+ * Removes *all* reactive scopes. Intended for experimentation only, to allow
+ * accurately removing memoization using the compiler pipeline to get a baseline
+ * for performance of a product without memoization applied.
+ */
+export function pruneAllReactiveScopes(fn: ReactiveFunction): void {
+  visitReactiveFunction(fn, new Transform(), undefined);
+}
+
+class Transform extends ReactiveFunctionTransform<void> {
+  override transformScope(
+    scopeBlock: ReactiveScopeBlock,
+    state: void,
+  ): Transformed<ReactiveStatement> {
+    this.visitScope(scopeBlock, state);
+    return {kind: 'replace-many', value: scopeBlock.instructions};
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneAlwaysInvalidatingScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneAlwaysInvalidatingScopes.ts
new file mode 100644
index 00000000000..b470271cf00
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneAlwaysInvalidatingScopes.ts
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {ReactiveFunctionTransform, Transformed, visitReactiveFunction} from '.';
+import {
+  Identifier,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+} from '../HIR';
+
+/**
+ * Some instructions will *always* produce a new value, and unless memoized will *always*
+ * invalidate downstream reactive scopes. This pass finds such values and prunes downstream
+ * memoization.
+ *
+ * NOTE: function calls are an edge-case: function calls *may* return primitives, so this
+ * pass optimistically assumes they do. Therefore, unmemoized function calls will *not*
+ * prune downstream memoization. Only guaranteed new allocations, such as object and array
+ * literals, will cause pruning.
+ */
+export function pruneAlwaysInvalidatingScopes(fn: ReactiveFunction): void {
+  visitReactiveFunction(fn, new Transform(), false);
+}
+
+class Transform extends ReactiveFunctionTransform<boolean> {
+  alwaysInvalidatingValues: Set<Identifier> = new Set();
+  unmemoizedValues: Set<Identifier> = new Set();
+
+  override transformInstruction(
+    instruction: ReactiveInstruction,
+    withinScope: boolean,
+  ): Transformed<ReactiveStatement> {
+    this.visitInstruction(instruction, withinScope);
+
+    const {lvalue, value} = instruction;
+    switch (value.kind) {
+      case 'ArrayExpression':
+      case 'ObjectExpression':
+      case 'JsxExpression':
+      case 'JsxFragment':
+      case 'NewExpression': {
+        if (lvalue !== null) {
+          this.alwaysInvalidatingValues.add(lvalue.identifier);
+          if (!withinScope) {
+            this.unmemoizedValues.add(lvalue.identifier);
+          }
+        }
+        break;
+      }
+      case 'StoreLocal': {
+        if (this.alwaysInvalidatingValues.has(value.value.identifier)) {
+          this.alwaysInvalidatingValues.add(value.lvalue.place.identifier);
+        }
+        if (this.unmemoizedValues.has(value.value.identifier)) {
+          this.unmemoizedValues.add(value.lvalue.place.identifier);
+        }
+        break;
+      }
+      case 'LoadLocal': {
+        if (
+          lvalue !== null &&
+          this.alwaysInvalidatingValues.has(value.place.identifier)
+        ) {
+          this.alwaysInvalidatingValues.add(lvalue.identifier);
+        }
+        if (
+          lvalue !== null &&
+          this.unmemoizedValues.has(value.place.identifier)
+        ) {
+          this.unmemoizedValues.add(lvalue.identifier);
+        }
+        break;
+      }
+    }
+    return {kind: 'keep'};
+  }
+
+  override transformScope(
+    scopeBlock: ReactiveScopeBlock,
+    _withinScope: boolean,
+  ): Transformed<ReactiveStatement> {
+    this.visitScope(scopeBlock, true);
+
+    for (const dep of scopeBlock.scope.dependencies) {
+      if (this.unmemoizedValues.has(dep.identifier)) {
+        /*
+         * This scope depends on an always-invalidating value so the scope will always invalidate:
+         * prune it to avoid wasted comparisons
+         */
+        for (const [_, decl] of scopeBlock.scope.declarations) {
+          if (this.alwaysInvalidatingValues.has(decl.identifier)) {
+            this.unmemoizedValues.add(decl.identifier);
+          }
+        }
+        for (const identifier of scopeBlock.scope.reassignments) {
+          if (this.alwaysInvalidatingValues.has(identifier)) {
+            this.unmemoizedValues.add(identifier);
+          }
+        }
+        return {
+          kind: 'replace',
+          value: {
+            kind: 'pruned-scope',
+            scope: scopeBlock.scope,
+            instructions: scopeBlock.instructions,
+          },
+        };
+      }
+    }
+    return {kind: 'keep'};
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts
new file mode 100644
index 00000000000..ae3ff122a23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  convertHoistedLValueKind,
+  IdentifierId,
+  InstructionId,
+  InstructionKind,
+  Place,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+} from '../HIR';
+import {empty, Stack} from '../Utils/Stack';
+import {
+  ReactiveFunctionTransform,
+  Transformed,
+  visitReactiveFunction,
+} from './visitors';
+
+/*
+ * Prunes DeclareContexts lowered for HoistedConsts, and transforms any references back to its
+ * original instruction kind.
+ *
+ * Also detects and bails out on context variables which are:
+ * - function declarations, which are hoisted by JS engines to the nearest block scope
+ * - referenced before they are defined (i.e. having a `DeclareContext HoistedConst`)
+ * - declared
+ *
+ * This is because React Compiler converts a `function foo()` function declaration to
+ * 1. a `let foo;` declaration before reactive memo blocks
+ * 2. a `foo = function foo() {}` assignment within the block
+ *
+ * This means references before the assignment are invalid (see fixture
+ * error.todo-functiondecl-hoisting)
+ */
+export function pruneHoistedContexts(fn: ReactiveFunction): void {
+  visitReactiveFunction(fn, new Visitor(), {
+    activeScopes: empty(),
+    uninitialized: new Map(),
+  });
+}
+
+type VisitorState = {
+  activeScopes: Stack<Set<IdentifierId>>;
+  uninitialized: Map<
+    IdentifierId,
+    | {
+        kind: 'unknown-kind';
+      }
+    | {
+        kind: 'func';
+        definition: Place | null;
+      }
+  >;
+};
+
+class Visitor extends ReactiveFunctionTransform<VisitorState> {
+  override visitScope(scope: ReactiveScopeBlock, state: VisitorState): void {
+    state.activeScopes = state.activeScopes.push(
+      new Set(scope.scope.declarations.keys()),
+    );
+    /**
+     * Add declared but not initialized / assigned variables. This may include
+     * function declarations that escape the memo block.
+     */
+    for (const decl of scope.scope.declarations.values()) {
+      state.uninitialized.set(decl.identifier.id, {kind: 'unknown-kind'});
+    }
+    this.traverseScope(scope, state);
+    state.activeScopes.pop();
+    for (const decl of scope.scope.declarations.values()) {
+      state.uninitialized.delete(decl.identifier.id);
+    }
+  }
+  override visitPlace(
+    _id: InstructionId,
+    place: Place,
+    state: VisitorState,
+  ): void {
+    const maybeHoistedFn = state.uninitialized.get(place.identifier.id);
+    if (
+      maybeHoistedFn?.kind === 'func' &&
+      maybeHoistedFn.definition !== place
+    ) {
+      CompilerError.throwTodo({
+        reason: '[PruneHoistedContexts] Rewrite hoisted function references',
+        loc: place.loc,
+      });
+    }
+  }
+  override transformInstruction(
+    instruction: ReactiveInstruction,
+    state: VisitorState,
+  ): Transformed<ReactiveStatement> {
+    /**
+     * Remove hoisted declarations to preserve TDZ
+     */
+    if (instruction.value.kind === 'DeclareContext') {
+      const maybeNonHoisted = convertHoistedLValueKind(
+        instruction.value.lvalue.kind,
+      );
+      if (maybeNonHoisted != null) {
+        if (
+          maybeNonHoisted === InstructionKind.Function &&
+          state.uninitialized.has(instruction.value.lvalue.place.identifier.id)
+        ) {
+          state.uninitialized.set(
+            instruction.value.lvalue.place.identifier.id,
+            {
+              kind: 'func',
+              definition: null,
+            },
+          );
+        }
+        return {kind: 'remove'};
+      }
+    }
+    if (
+      instruction.value.kind === 'StoreContext' &&
+      instruction.value.lvalue.kind !== InstructionKind.Reassign
+    ) {
+      /**
+       * Rewrite StoreContexts let/const that will be pre-declared in
+       * codegen to reassignments.
+       */
+      const lvalueId = instruction.value.lvalue.place.identifier.id;
+      const isDeclaredByScope = state.activeScopes.find(scope =>
+        scope.has(lvalueId),
+      );
+      if (isDeclaredByScope) {
+        if (
+          instruction.value.lvalue.kind === InstructionKind.Let ||
+          instruction.value.lvalue.kind === InstructionKind.Const
+        ) {
+          instruction.value.lvalue.kind = InstructionKind.Reassign;
+        } else if (instruction.value.lvalue.kind === InstructionKind.Function) {
+          const maybeHoistedFn = state.uninitialized.get(lvalueId);
+          if (maybeHoistedFn != null) {
+            CompilerError.invariant(maybeHoistedFn.kind === 'func', {
+              reason: '[PruneHoistedContexts] Unexpected hoisted function',
+              loc: instruction.loc,
+            });
+            maybeHoistedFn.definition = instruction.value.lvalue.place;
+            /**
+             * References to hoisted functions are now "safe" as variable assignments
+             * have finished.
+             */
+            state.uninitialized.delete(lvalueId);
+          }
+        } else {
+          CompilerError.throwTodo({
+            reason: '[PruneHoistedContexts] Unexpected kind',
+            description: `(${instruction.value.lvalue.kind})`,
+            loc: instruction.loc,
+          });
+        }
+      }
+    }
+
+    this.visitInstruction(instruction, state);
+    return {kind: 'keep'};
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneInitializationDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneInitializationDependencies.ts
new file mode 100644
index 00000000000..9ef9d382c28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneInitializationDependencies.ts
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  Environment,
+  Identifier,
+  IdentifierId,
+  InstructionId,
+  Place,
+  PropertyLiteral,
+  ReactiveBlock,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveTerminalStatement,
+  getHookKind,
+  isUseRefType,
+  isUseStateType,
+} from '../HIR';
+import {eachCallArgument, eachInstructionLValue} from '../HIR/visitors';
+import DisjointSet from '../Utils/DisjointSet';
+import {assertExhaustive} from '../Utils/utils';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+/**
+ * This pass is built based on the observation by @jbrown215 that arguments
+ * to useState and useRef are only used the first time a component is rendered.
+ * Any subsequent times, the arguments will be evaluated but ignored. In this pass,
+ * we use this fact to improve the output of the compiler by not recomputing values that
+ * are only used as arguments (or inputs to arguments to) useState and useRef.
+ *
+ * This pass isn't yet stress-tested so it's not enabled by default. It's only enabled
+ * to support certain debug modes that detect non-idempotent code, since non-idempotent
+ * code can "safely" be used if its only passed to useState and useRef. We plan to rewrite
+ * this pass in HIR and enable it as an optimization in the future.
+ *
+ * Algorithm:
+ * We take two passes over the reactive function AST. In the first pass, we gather
+ * aliases and build relationships between property accesses--the key thing we need
+ * to do here is to find that, e.g., $0.x and $1 refer to the same value if
+ * $1 = PropertyLoad $0.x.
+ *
+ * In the second pass, we traverse the AST in reverse order and track how each place
+ * is used. If a place is read from in any Terminal, we mark the place as "Update", meaning
+ * it is used whenever the component is updated/re-rendered. If a place is read from in
+ * a useState or useRef hook call, we mark it as "Create", since it is only used when the
+ * component is created. In other instructions, we propagate the inferred place for the
+ * instructions lvalues onto any other instructions that are read.
+ *
+ * Whenever we finish this reverse pass over a reactive block, we can look at the blocks
+ * dependencies and see whether the dependencies are used in an "Update" context or only
+ * in a "Create" context. If a dependency is create-only, then we can remove that dependency
+ * from the block.
+ */
+
+type CreateUpdate = 'Create' | 'Update' | 'Unknown';
+
+type KindMap = Map<IdentifierId, CreateUpdate>;
+
+class Visitor extends ReactiveFunctionVisitor<CreateUpdate> {
+  map: KindMap = new Map();
+  aliases: DisjointSet<IdentifierId>;
+  paths: Map<IdentifierId, Map<PropertyLiteral, IdentifierId>>;
+  env: Environment;
+
+  constructor(
+    env: Environment,
+    aliases: DisjointSet<IdentifierId>,
+    paths: Map<IdentifierId, Map<PropertyLiteral, IdentifierId>>,
+  ) {
+    super();
+    this.aliases = aliases;
+    this.paths = paths;
+    this.env = env;
+  }
+
+  join(values: Array<CreateUpdate>): CreateUpdate {
+    function join2(l: CreateUpdate, r: CreateUpdate): CreateUpdate {
+      if (l === 'Update' || r === 'Update') {
+        return 'Update';
+      } else if (l === 'Create' || r === 'Create') {
+        return 'Create';
+      } else if (l === 'Unknown' || r === 'Unknown') {
+        return 'Unknown';
+      }
+      assertExhaustive(r, `Unhandled variable kind ${r}`);
+    }
+    return values.reduce(join2, 'Unknown');
+  }
+
+  isCreateOnlyHook(id: Identifier): boolean {
+    return isUseStateType(id) || isUseRefType(id);
+  }
+
+  override visitPlace(
+    _: InstructionId,
+    place: Place,
+    state: CreateUpdate,
+  ): void {
+    this.map.set(
+      place.identifier.id,
+      this.join([state, this.map.get(place.identifier.id) ?? 'Unknown']),
+    );
+  }
+
+  override visitBlock(block: ReactiveBlock, state: CreateUpdate): void {
+    super.visitBlock([...block].reverse(), state);
+  }
+
+  override visitInstruction(instruction: ReactiveInstruction): void {
+    const state = this.join(
+      [...eachInstructionLValue(instruction)].map(
+        operand => this.map.get(operand.identifier.id) ?? 'Unknown',
+      ),
+    );
+
+    const visitCallOrMethodNonArgs = (): void => {
+      switch (instruction.value.kind) {
+        case 'CallExpression': {
+          this.visitPlace(instruction.id, instruction.value.callee, state);
+          break;
+        }
+        case 'MethodCall': {
+          this.visitPlace(instruction.id, instruction.value.property, state);
+          this.visitPlace(instruction.id, instruction.value.receiver, state);
+          break;
+        }
+      }
+    };
+
+    const isHook = (): boolean => {
+      let callee = null;
+      switch (instruction.value.kind) {
+        case 'CallExpression': {
+          callee = instruction.value.callee.identifier;
+          break;
+        }
+        case 'MethodCall': {
+          callee = instruction.value.property.identifier;
+          break;
+        }
+      }
+      return callee != null && getHookKind(this.env, callee) != null;
+    };
+
+    switch (instruction.value.kind) {
+      case 'CallExpression':
+      case 'MethodCall': {
+        if (
+          instruction.lvalue &&
+          this.isCreateOnlyHook(instruction.lvalue.identifier)
+        ) {
+          [...eachCallArgument(instruction.value.args)].forEach(operand =>
+            this.visitPlace(instruction.id, operand, 'Create'),
+          );
+          visitCallOrMethodNonArgs();
+        } else {
+          this.traverseInstruction(instruction, isHook() ? 'Update' : state);
+        }
+        break;
+      }
+      default: {
+        this.traverseInstruction(instruction, state);
+      }
+    }
+  }
+
+  override visitScope(scope: ReactiveScopeBlock): void {
+    const state = this.join(
+      [
+        ...scope.scope.declarations.keys(),
+        ...[...scope.scope.reassignments.values()].map(ident => ident.id),
+      ].map(id => this.map.get(id) ?? 'Unknown'),
+    );
+    super.visitScope(scope, state);
+    [...scope.scope.dependencies].forEach(ident => {
+      let target: undefined | IdentifierId =
+        this.aliases.find(ident.identifier.id) ?? ident.identifier.id;
+      ident.path.forEach(token => {
+        target &&= this.paths.get(target)?.get(token.property);
+      });
+      if (target && this.map.get(target) === 'Create') {
+        scope.scope.dependencies.delete(ident);
+      }
+    });
+  }
+
+  override visitTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: CreateUpdate,
+  ): void {
+    CompilerError.invariant(state !== 'Create', {
+      reason: "Visiting a terminal statement with state 'Create'",
+      loc: stmt.terminal.loc,
+    });
+    super.visitTerminal(stmt, state);
+  }
+
+  override visitReactiveFunctionValue(
+    _id: InstructionId,
+    _dependencies: Array<Place>,
+    fn: ReactiveFunction,
+    state: CreateUpdate,
+  ): void {
+    visitReactiveFunction(fn, this, state);
+  }
+}
+
+export default function pruneInitializationDependencies(
+  fn: ReactiveFunction,
+): void {
+  const [aliases, paths] = getAliases(fn);
+  visitReactiveFunction(fn, new Visitor(fn.env, aliases, paths), 'Update');
+}
+
+function update(
+  map: Map<IdentifierId, Map<PropertyLiteral, IdentifierId>>,
+  key: IdentifierId,
+  path: PropertyLiteral,
+  value: IdentifierId,
+): void {
+  const inner = map.get(key) ?? new Map();
+  inner.set(path, value);
+  map.set(key, inner);
+}
+
+class AliasVisitor extends ReactiveFunctionVisitor {
+  scopeIdentifiers: DisjointSet<IdentifierId> = new DisjointSet<IdentifierId>();
+  scopePaths: Map<IdentifierId, Map<PropertyLiteral, IdentifierId>> = new Map();
+
+  override visitInstruction(instr: ReactiveInstruction): void {
+    if (
+      instr.value.kind === 'StoreLocal' ||
+      instr.value.kind === 'StoreContext'
+    ) {
+      this.scopeIdentifiers.union([
+        instr.value.lvalue.place.identifier.id,
+        instr.value.value.identifier.id,
+      ]);
+    } else if (
+      instr.value.kind === 'LoadLocal' ||
+      instr.value.kind === 'LoadContext'
+    ) {
+      instr.lvalue &&
+        this.scopeIdentifiers.union([
+          instr.lvalue.identifier.id,
+          instr.value.place.identifier.id,
+        ]);
+    } else if (instr.value.kind === 'PropertyLoad') {
+      instr.lvalue &&
+        update(
+          this.scopePaths,
+          instr.value.object.identifier.id,
+          instr.value.property,
+          instr.lvalue.identifier.id,
+        );
+    } else if (instr.value.kind === 'PropertyStore') {
+      update(
+        this.scopePaths,
+        instr.value.object.identifier.id,
+        instr.value.property,
+        instr.value.value.identifier.id,
+      );
+    }
+  }
+}
+
+function getAliases(
+  fn: ReactiveFunction,
+): [
+  DisjointSet<IdentifierId>,
+  Map<IdentifierId, Map<PropertyLiteral, IdentifierId>>,
+] {
+  const visitor = new AliasVisitor();
+  visitReactiveFunction(fn, visitor, null);
+  let disjoint = visitor.scopeIdentifiers;
+  let scopePaths = new Map<IdentifierId, Map<PropertyLiteral, IdentifierId>>();
+  for (const [key, value] of visitor.scopePaths) {
+    for (const [path, id] of value) {
+      update(
+        scopePaths,
+        disjoint.find(key) ?? key,
+        path,
+        disjoint.find(id) ?? id,
+      );
+    }
+  }
+  return [disjoint, scopePaths];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts
new file mode 100644
index 00000000000..a3408f580b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts
@@ -0,0 +1,1123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  DeclarationId,
+  Environment,
+  GeneratedSource,
+  Identifier,
+  InstructionId,
+  Pattern,
+  Place,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+  ReactiveTerminal,
+  ReactiveTerminalStatement,
+  ReactiveValue,
+  ScopeId,
+  getHookKind,
+  isMutableEffect,
+} from '../HIR';
+import {assertExhaustive, getOrInsertDefault} from '../Utils/utils';
+import {getPlaceScope, ReactiveScope} from '../HIR/HIR';
+import {
+  ReactiveFunctionTransform,
+  ReactiveFunctionVisitor,
+  Transformed,
+  eachReactiveValueOperand,
+  visitReactiveFunction,
+} from './visitors';
+import {printPlace} from '../HIR/PrintHIR';
+import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
+
+/*
+ * This pass prunes reactive scopes that are not necessary to bound downstream computation.
+ * Specifically, the pass identifies the set of identifiers which may "escape". Values can
+ * escape in one of two ways:
+ * * They are directly returned by the function and/or transitively aliased by a return
+ *    value.
+ * * They are passed as input to a hook. This is because any value passed to a hook may
+ *    have its referenced ultimately stored by React (ie, be aliased by an external value).
+ *    For example, the closure passed to useEffect escapes.
+ *
+ * Example to build intuition:
+ *
+ * ```javascript
+ * function Component(props) {
+ *    const a = {}; // not aliased or returned: *not* memoized
+ *    const b = {}; // aliased by c, which is returned: memoized
+ *    const c = [b]; // directly returned: memoized
+ *    return c;
+ * }
+ * ```
+ *
+ * However, this logic alone is insufficient for two reasons:
+ * - Statically memoizing JSX elements *may* be inefficient compared to using dynamic
+ *    memoization with `React.memo()`. Static memoization may be JIT'd and can look at
+ *    the precise props w/o dynamic iteration, but incurs potentially large code-size
+ *    overhead. Dynamic memoization with `React.memo()` incurs potentially increased
+ *    runtime overhead for smaller code size. We plan to experiment with both variants
+ *    for JSX.
+ * - Because we merge values whose mutations _interleave_ into a single scope, there
+ *    can be cases where a non-escaping value needs to be memoized anyway to avoid breaking
+ *    a memoization input. As a rule, for any scope that has a memoized output, all of that
+ *    scope's transitive dependencies must also be memoized _even if they don't escape_.
+ *    Failing to memoize them would cause the scope to invalidate more often than necessary
+ *    and break downstream memoization.
+ *
+ * Example of this second case:
+ *
+ * ```javascript
+ * function Component(props) {
+ *    // a can be independently memoized but it doesn't escape, so naively we may think its
+ *    // safe to not memoize. but not memoizing would break caching of b, which does
+ *    // escape.
+ *    const a = [props.a];
+ *
+ *    // b and c are interleaved and grouped into a single scope,
+ *    // but they are independent values. c does not escape, but
+ *    // we need to ensure that a is memoized or else b will invalidate
+ *    // on every render since a is a dependency.
+ *    const b = [];
+ *    const c = {};
+ *    c.a = a;
+ *    b.push(props.b);
+ *
+ *    return b;
+ * }
+ * ```
+ *
+ * ## Algorithm
+ *
+ * 1. First we build up a graph, a mapping of IdentifierId to a node describing all the
+ *     scopes and inputs involved in creating that identifier. Individual nodes are marked
+ *     as definitely aliased, conditionally aliased, or unaliased:
+ *       a. Arrays, objects, function calls all produce a new value and are always marked as aliased
+ *       b. Conditional and logical expressions (and a few others) are conditinally aliased,
+ *          depending on whether their result value is aliased.
+ *       c. JSX is always unaliased (though its props children may be)
+ * 2. The same pass which builds the graph also stores the set of returned identifiers and set of
+ *     identifiers passed as arguments to hooks.
+ * 3. We traverse the graph starting from the returned identifiers and mark reachable dependencies
+ *     as escaping, based on the combination of the parent node's type and its children (eg a
+ *     conditional node with an aliased dep promotes to aliased).
+ * 4. Finally we prune scopes whose outputs weren't marked.
+ */
+export function pruneNonEscapingScopes(fn: ReactiveFunction): void {
+  /*
+   * First build up a map of which instructions are involved in creating which values,
+   * and which values are returned.
+   */
+  const state = new State(fn.env);
+  for (const param of fn.params) {
+    if (param.kind === 'Identifier') {
+      state.declare(param.identifier.declarationId);
+    } else {
+      state.declare(param.place.identifier.declarationId);
+    }
+  }
+  visitReactiveFunction(fn, new CollectDependenciesVisitor(fn.env, state), []);
+
+  /*
+   * Then walk outward from the returned values and find all captured operands.
+   * This forms the set of identifiers which should be memoized.
+   */
+  const memoized = computeMemoizedIdentifiers(state);
+
+  // Prune scopes that do not declare/reassign any escaping values
+  visitReactiveFunction(fn, new PruneScopesTransform(), memoized);
+}
+
+export type MemoizationOptions = {
+  memoizeJsxElements: boolean;
+  forceMemoizePrimitives: boolean;
+};
+
+// Describes how to determine whether a value should be memoized, relative to dependees and dependencies
+enum MemoizationLevel {
+  // The value should be memoized if it escapes
+  Memoized = 'Memoized',
+  /*
+   * Values that are memoized if their dependencies are memoized (used for logical/ternary and
+   * other expressions that propagate dependencies wo changing them)
+   */
+  Conditional = 'Conditional',
+  /*
+   * Values that cannot be compared with Object.is, but which by default don't need to be memoized
+   * unless forced
+   */
+  Unmemoized = 'Unmemoized',
+  // The value will never be memoized: used for values that can be cheaply compared w Object.is
+  Never = 'Never',
+}
+
+/*
+ * Given an identifier that appears as an lvalue multiple times with different memoization levels,
+ * determines the final memoization level.
+ */
+function joinAliases(
+  kind1: MemoizationLevel,
+  kind2: MemoizationLevel,
+): MemoizationLevel {
+  if (
+    kind1 === MemoizationLevel.Memoized ||
+    kind2 === MemoizationLevel.Memoized
+  ) {
+    return MemoizationLevel.Memoized;
+  } else if (
+    kind1 === MemoizationLevel.Conditional ||
+    kind2 === MemoizationLevel.Conditional
+  ) {
+    return MemoizationLevel.Conditional;
+  } else if (
+    kind1 === MemoizationLevel.Unmemoized ||
+    kind2 === MemoizationLevel.Unmemoized
+  ) {
+    return MemoizationLevel.Unmemoized;
+  } else {
+    return MemoizationLevel.Never;
+  }
+}
+
+// A node in the graph describing the memoization level of a given identifier as well as its dependencies and scopes.
+type IdentifierNode = {
+  level: MemoizationLevel;
+  memoized: boolean;
+  dependencies: Set<DeclarationId>;
+  scopes: Set<ScopeId>;
+  seen: boolean;
+};
+
+// A scope node describing its dependencies
+type ScopeNode = {
+  dependencies: Array<DeclarationId>;
+  seen: boolean;
+};
+
+// Stores the identifier and scope graphs, set of returned identifiers, etc
+class State {
+  env: Environment;
+  /*
+   * Maps lvalues for LoadLocal to the identifier being loaded, to resolve indirections
+   * in subsequent lvalues/rvalues.
+   *
+   * NOTE: this pass uses DeclarationId rather than IdentifierId because the pass is not
+   * aware of control-flow, only data flow via mutation. Instead of precisely modeling
+   * control flow, we analyze all values that may flow into a particular program variable,
+   * and then whether that program variable may escape (if so, the values flowing in may
+   * escape too). Thus we use DeclarationId to captures all values that may flow into
+   * a particular program variable, regardless of control flow paths.
+   *
+   * In the future when we convert to HIR everywhere this pass can account for control
+   * flow and use SSA ids.
+   */
+  definitions: Map<DeclarationId, DeclarationId> = new Map();
+
+  identifiers: Map<DeclarationId, IdentifierNode> = new Map();
+  scopes: Map<ScopeId, ScopeNode> = new Map();
+  escapingValues: Set<DeclarationId> = new Set();
+
+  constructor(env: Environment) {
+    this.env = env;
+  }
+
+  // Declare a new identifier, used for function id and params
+  declare(id: DeclarationId): void {
+    this.identifiers.set(id, {
+      level: MemoizationLevel.Never,
+      memoized: false,
+      dependencies: new Set(),
+      scopes: new Set(),
+      seen: false,
+    });
+  }
+
+  /*
+   * Associates the identifier with its scope, if there is one and it is active for the given instruction id:
+   * - Records the scope and its dependencies
+   * - Associates the identifier with this scope
+   */
+  visitOperand(
+    id: InstructionId,
+    place: Place,
+    identifier: DeclarationId,
+  ): void {
+    const scope = getPlaceScope(id, place);
+    if (scope !== null) {
+      let node = this.scopes.get(scope.id);
+      if (node === undefined) {
+        node = {
+          dependencies: [...scope.dependencies].map(
+            dep => dep.identifier.declarationId,
+          ),
+          seen: false,
+        };
+        this.scopes.set(scope.id, node);
+      }
+      const identifierNode = this.identifiers.get(identifier);
+      CompilerError.invariant(identifierNode !== undefined, {
+        reason: 'Expected identifier to be initialized',
+        description: `[${id}] operand=${printPlace(place)} for identifier declaration ${identifier}`,
+        loc: place.loc,
+      });
+      identifierNode.scopes.add(scope.id);
+    }
+  }
+}
+
+/*
+ * Given a state derived from visiting the function, walks the graph from the returned nodes
+ * to determine which other values should be memoized. Returns a set of all identifiers
+ * that should be memoized.
+ */
+function computeMemoizedIdentifiers(state: State): Set<DeclarationId> {
+  const memoized = new Set<DeclarationId>();
+
+  // Visit an identifier, optionally forcing it to be memoized
+  function visit(id: DeclarationId, forceMemoize: boolean = false): boolean {
+    const node = state.identifiers.get(id);
+    CompilerError.invariant(node !== undefined, {
+      reason: `Expected a node for all identifiers, none found for \`${id}\``,
+      loc: GeneratedSource,
+    });
+    if (node.seen) {
+      return node.memoized;
+    }
+    node.seen = true;
+
+    /*
+     * Note: in case of cycles we temporarily mark the identifier as non-memoized,
+     * this is reset later after processing dependencies
+     */
+    node.memoized = false;
+
+    // Visit dependencies, determine if any of them are memoized
+    let hasMemoizedDependency = false;
+    for (const dep of node.dependencies) {
+      const isDepMemoized = visit(dep);
+      hasMemoizedDependency ||= isDepMemoized;
+    }
+
+    if (
+      node.level === MemoizationLevel.Memoized ||
+      (node.level === MemoizationLevel.Conditional &&
+        (hasMemoizedDependency || forceMemoize)) ||
+      (node.level === MemoizationLevel.Unmemoized && forceMemoize)
+    ) {
+      node.memoized = true;
+      memoized.add(id);
+      for (const scope of node.scopes) {
+        forceMemoizeScopeDependencies(scope);
+      }
+    }
+    return node.memoized;
+  }
+
+  // Force all the scope's optionally-memoizeable dependencies (not "Never") to be memoized
+  function forceMemoizeScopeDependencies(id: ScopeId): void {
+    const node = state.scopes.get(id);
+    CompilerError.invariant(node !== undefined, {
+      reason: 'Expected a node for all scopes',
+      loc: GeneratedSource,
+    });
+    if (node.seen) {
+      return;
+    }
+    node.seen = true;
+
+    for (const dep of node.dependencies) {
+      visit(dep, true);
+    }
+    return;
+  }
+
+  // Walk from the "roots" aka returned identifiers.
+  for (const value of state.escapingValues) {
+    visit(value);
+  }
+
+  return memoized;
+}
+
+type LValueMemoization = {
+  place: Place;
+  level: MemoizationLevel;
+};
+
+function computePatternLValues(pattern: Pattern): Array<LValueMemoization> {
+  const lvalues: Array<LValueMemoization> = [];
+  switch (pattern.kind) {
+    case 'ArrayPattern': {
+      for (const item of pattern.items) {
+        if (item.kind === 'Identifier') {
+          lvalues.push({place: item, level: MemoizationLevel.Conditional});
+        } else if (item.kind === 'Spread') {
+          lvalues.push({place: item.place, level: MemoizationLevel.Memoized});
+        }
+      }
+      break;
+    }
+    case 'ObjectPattern': {
+      for (const property of pattern.properties) {
+        if (property.kind === 'ObjectProperty') {
+          lvalues.push({
+            place: property.place,
+            level: MemoizationLevel.Conditional,
+          });
+        } else {
+          lvalues.push({
+            place: property.place,
+            level: MemoizationLevel.Memoized,
+          });
+        }
+      }
+      break;
+    }
+    default: {
+      assertExhaustive(
+        pattern,
+        `Unexpected pattern kind \`${(pattern as any).kind}\``,
+      );
+    }
+  }
+  return lvalues;
+}
+
+/*
+ * Populates the input state with the set of returned identifiers and information about each
+ * identifier's and scope's dependencies.
+ */
+class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
+  Array<ReactiveScope>
+> {
+  env: Environment;
+  state: State;
+  options: MemoizationOptions;
+
+  constructor(env: Environment, state: State) {
+    super();
+    this.env = env;
+    this.state = state;
+    this.options = {
+      memoizeJsxElements: !this.env.config.enableForest,
+      forceMemoizePrimitives:
+        this.env.config.enableForest ||
+        this.env.config.enablePreserveExistingMemoizationGuarantees,
+    };
+  }
+
+  /*
+   * Given a value, returns a description of how it should be memoized:
+   * - lvalues: optional extra places that are lvalue-like in the sense of
+   *   aliasing the rvalues
+   * - rvalues: places that are aliased by the instruction's lvalues.
+   * - level: the level of memoization to apply to this value
+   */
+  computeMemoizationInputs(
+    value: ReactiveValue,
+    lvalue: Place | null,
+  ): {
+    // can optionally return a custom set of lvalues per instruction
+    lvalues: Array<LValueMemoization>;
+    rvalues: Array<Place>;
+  } {
+    const env = this.env;
+    const options = this.options;
+
+    switch (value.kind) {
+      case 'ConditionalExpression': {
+        return {
+          // Only need to memoize if the rvalues are memoized
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [
+            // Conditionals do not alias their test value.
+            ...this.computeMemoizationInputs(value.consequent, null).rvalues,
+            ...this.computeMemoizationInputs(value.alternate, null).rvalues,
+          ],
+        };
+      }
+      case 'LogicalExpression': {
+        return {
+          // Only need to memoize if the rvalues are memoized
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [
+            ...this.computeMemoizationInputs(value.left, null).rvalues,
+            ...this.computeMemoizationInputs(value.right, null).rvalues,
+          ],
+        };
+      }
+      case 'SequenceExpression': {
+        for (const instr of value.instructions) {
+          this.visitValueForMemoization(instr.id, instr.value, instr.lvalue);
+        }
+        return {
+          // Only need to memoize if the rvalues are memoized
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          /*
+           * Only the final value of the sequence is a true rvalue:
+           * values from the sequence's instructions are evaluated
+           * as separate nodes
+           */
+          rvalues: this.computeMemoizationInputs(value.value, null).rvalues,
+        };
+      }
+      case 'JsxExpression': {
+        const operands: Array<Place> = [];
+        if (value.tag.kind === 'Identifier') {
+          operands.push(value.tag);
+        }
+        for (const prop of value.props) {
+          if (prop.kind === 'JsxAttribute') {
+            operands.push(prop.place);
+          } else {
+            operands.push(prop.argument);
+          }
+        }
+        if (value.children !== null) {
+          for (const child of value.children) {
+            operands.push(child);
+          }
+        }
+        const level = options.memoizeJsxElements
+          ? MemoizationLevel.Memoized
+          : MemoizationLevel.Unmemoized;
+        return {
+          /*
+           * JSX elements themselves are not memoized unless forced to
+           * avoid breaking downstream memoization
+           */
+          lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
+          rvalues: operands,
+        };
+      }
+      case 'JsxFragment': {
+        const level = options.memoizeJsxElements
+          ? MemoizationLevel.Memoized
+          : MemoizationLevel.Unmemoized;
+        return {
+          /*
+           * JSX elements themselves are not memoized unless forced to
+           * avoid breaking downstream memoization
+           */
+          lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
+          rvalues: value.children,
+        };
+      }
+      case 'NextPropertyOf':
+      case 'StartMemoize':
+      case 'FinishMemoize':
+      case 'Debugger':
+      case 'ComputedDelete':
+      case 'PropertyDelete':
+      case 'LoadGlobal':
+      case 'MetaProperty':
+      case 'TemplateLiteral':
+      case 'Primitive':
+      case 'JSXText':
+      case 'BinaryExpression':
+      case 'UnaryExpression': {
+        if (options.forceMemoizePrimitives) {
+          /**
+           * Because these instructions produce primitives we usually don't consider
+           * them as escape points: they are known to copy, not return references.
+           * However if we're forcing memoization of primitives then we mark these
+           * instructions as needing memoization and walk their rvalues to ensure
+           * any scopes transitively reachable from the rvalues are considered for
+           * memoization. Note: we may still prune primitive-producing scopes if
+           * they don't ultimately escape at all.
+           */
+          const level = MemoizationLevel.Conditional;
+          return {
+            lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
+            rvalues: [...eachReactiveValueOperand(value)],
+          };
+        }
+        const level = MemoizationLevel.Never;
+        return {
+          // All of these instructions return a primitive value and never need to be memoized
+          lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
+          rvalues: [],
+        };
+      }
+      case 'Await':
+      case 'TypeCastExpression': {
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [value.value],
+        };
+      }
+      case 'IteratorNext': {
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [value.iterator, value.collection],
+        };
+      }
+      case 'GetIterator': {
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [value.collection],
+        };
+      }
+      case 'LoadLocal': {
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [value.place],
+        };
+      }
+      case 'LoadContext': {
+        return {
+          // Should never be pruned
+          lvalues:
+            lvalue !== null
+              ? [{place: lvalue, level: MemoizationLevel.Conditional}]
+              : [],
+          rvalues: [value.place],
+        };
+      }
+      case 'DeclareContext': {
+        const lvalues = [
+          {place: value.lvalue.place, level: MemoizationLevel.Memoized},
+        ];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Unmemoized});
+        }
+        return {
+          lvalues,
+          rvalues: [],
+        };
+      }
+
+      case 'DeclareLocal': {
+        const lvalues = [
+          {place: value.lvalue.place, level: MemoizationLevel.Unmemoized},
+        ];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Unmemoized});
+        }
+        return {
+          lvalues,
+          rvalues: [],
+        };
+      }
+      case 'PrefixUpdate':
+      case 'PostfixUpdate': {
+        const lvalues = [
+          {place: value.lvalue, level: MemoizationLevel.Conditional},
+        ];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Conditional});
+        }
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues,
+          rvalues: [value.value],
+        };
+      }
+      case 'StoreLocal': {
+        const lvalues = [
+          {place: value.lvalue.place, level: MemoizationLevel.Conditional},
+        ];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Conditional});
+        }
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues,
+          rvalues: [value.value],
+        };
+      }
+      case 'StoreContext': {
+        // Should never be pruned
+        const lvalues = [
+          {place: value.lvalue.place, level: MemoizationLevel.Memoized},
+        ];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Conditional});
+        }
+
+        return {
+          lvalues,
+          rvalues: [value.value],
+        };
+      }
+      case 'StoreGlobal': {
+        const lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Unmemoized});
+        }
+
+        return {
+          lvalues,
+          rvalues: [value.value],
+        };
+      }
+      case 'Destructure': {
+        // Indirection for the inner value, memoized if the value is
+        const lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Conditional});
+        }
+        lvalues.push(...computePatternLValues(value.lvalue.pattern));
+        return {
+          lvalues: lvalues,
+          rvalues: [value.value],
+        };
+      }
+      case 'ComputedLoad':
+      case 'PropertyLoad': {
+        const level = MemoizationLevel.Conditional;
+        return {
+          // Indirection for the inner value, memoized if the value is
+          lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
+          /*
+           * Only the object is aliased to the result, and the result only needs to be
+           * memoized if the object is
+           */
+          rvalues: [value.object],
+        };
+      }
+      case 'ComputedStore': {
+        /*
+         * The object being stored to acts as an lvalue (it aliases the value), but
+         * the computed key is not aliased
+         */
+        const lvalues = [
+          {place: value.object, level: MemoizationLevel.Conditional},
+        ];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Conditional});
+        }
+        return {
+          lvalues,
+          rvalues: [value.value],
+        };
+      }
+      case 'OptionalExpression': {
+        // Indirection for the inner value, memoized if the value is
+        const lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Conditional});
+        }
+        return {
+          lvalues: lvalues,
+          rvalues: [
+            ...this.computeMemoizationInputs(value.value, null).rvalues,
+          ],
+        };
+      }
+      case 'TaggedTemplateExpression': {
+        const signature = getFunctionCallSignature(
+          env,
+          value.tag.identifier.type,
+        );
+        let lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Memoized});
+        }
+        if (signature?.noAlias === true) {
+          return {
+            lvalues,
+            rvalues: [],
+          };
+        }
+        const operands = [...eachReactiveValueOperand(value)];
+        lvalues.push(
+          ...operands
+            .filter(operand => isMutableEffect(operand.effect, operand.loc))
+            .map(place => ({place, level: MemoizationLevel.Memoized})),
+        );
+        return {
+          lvalues,
+          rvalues: operands,
+        };
+      }
+      case 'CallExpression': {
+        const signature = getFunctionCallSignature(
+          env,
+          value.callee.identifier.type,
+        );
+        let lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Memoized});
+        }
+        if (signature?.noAlias === true) {
+          return {
+            lvalues,
+            rvalues: [],
+          };
+        }
+        const operands = [...eachReactiveValueOperand(value)];
+        lvalues.push(
+          ...operands
+            .filter(operand => isMutableEffect(operand.effect, operand.loc))
+            .map(place => ({place, level: MemoizationLevel.Memoized})),
+        );
+        return {
+          lvalues,
+          rvalues: operands,
+        };
+      }
+      case 'MethodCall': {
+        const signature = getFunctionCallSignature(
+          env,
+          value.property.identifier.type,
+        );
+        let lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Memoized});
+        }
+        if (signature?.noAlias === true) {
+          return {
+            lvalues,
+            rvalues: [],
+          };
+        }
+        const operands = [...eachReactiveValueOperand(value)];
+        lvalues.push(
+          ...operands
+            .filter(operand => isMutableEffect(operand.effect, operand.loc))
+            .map(place => ({place, level: MemoizationLevel.Memoized})),
+        );
+        return {
+          lvalues,
+          rvalues: operands,
+        };
+      }
+      case 'RegExpLiteral':
+      case 'ObjectMethod':
+      case 'FunctionExpression':
+      case 'ArrayExpression':
+      case 'NewExpression':
+      case 'ObjectExpression':
+      case 'PropertyStore': {
+        /*
+         * All of these instructions may produce new values which must be memoized if
+         * reachable from a return value. Any mutable rvalue may alias any other rvalue
+         */
+        const operands = [...eachReactiveValueOperand(value)];
+        const lvalues = operands
+          .filter(operand => isMutableEffect(operand.effect, operand.loc))
+          .map(place => ({place, level: MemoizationLevel.Memoized}));
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Memoized});
+        }
+        return {
+          lvalues,
+          rvalues: operands,
+        };
+      }
+      case 'UnsupportedNode': {
+        const lvalues = [];
+        if (lvalue !== null) {
+          lvalues.push({place: lvalue, level: MemoizationLevel.Never});
+        }
+        return {
+          lvalues,
+          rvalues: [],
+        };
+      }
+      default: {
+        assertExhaustive(
+          value,
+          `Unexpected value kind \`${(value as any).kind}\``,
+        );
+      }
+    }
+  }
+
+  visitValueForMemoization(
+    id: InstructionId,
+    value: ReactiveValue,
+    lvalue: Place | null,
+  ): void {
+    const state = this.state;
+    // Determe the level of memoization for this value and the lvalues/rvalues
+    const aliasing = this.computeMemoizationInputs(value, lvalue);
+
+    // Associate all the rvalues with the instruction's scope if it has one
+    for (const operand of aliasing.rvalues) {
+      const operandId =
+        state.definitions.get(operand.identifier.declarationId) ??
+        operand.identifier.declarationId;
+      state.visitOperand(id, operand, operandId);
+    }
+
+    // Add the operands as dependencies of all lvalues.
+    for (const {place: lvalue, level} of aliasing.lvalues) {
+      const lvalueId =
+        state.definitions.get(lvalue.identifier.declarationId) ??
+        lvalue.identifier.declarationId;
+      let node = state.identifiers.get(lvalueId);
+      if (node === undefined) {
+        node = {
+          level: MemoizationLevel.Never,
+          memoized: false,
+          dependencies: new Set(),
+          scopes: new Set(),
+          seen: false,
+        };
+        state.identifiers.set(lvalueId, node);
+      }
+      node.level = joinAliases(node.level, level);
+      /*
+       * This looks like NxM iterations but in practice all instructions with multiple
+       * lvalues have only a single rvalue
+       */
+      for (const operand of aliasing.rvalues) {
+        const operandId =
+          state.definitions.get(operand.identifier.declarationId) ??
+          operand.identifier.declarationId;
+        if (operandId === lvalueId) {
+          continue;
+        }
+        node.dependencies.add(operandId);
+      }
+
+      state.visitOperand(id, lvalue, lvalueId);
+    }
+
+    if (value.kind === 'LoadLocal' && lvalue !== null) {
+      state.definitions.set(
+        lvalue.identifier.declarationId,
+        value.place.identifier.declarationId,
+      );
+    } else if (value.kind === 'CallExpression' || value.kind === 'MethodCall') {
+      let callee =
+        value.kind === 'CallExpression' ? value.callee : value.property;
+      if (getHookKind(state.env, callee.identifier) != null) {
+        const signature = getFunctionCallSignature(
+          this.env,
+          callee.identifier.type,
+        );
+        /*
+         * Hook values are assumed to escape by default since they can be inputs
+         * to reactive scopes in the hook. However if the hook is annotated as
+         * noAlias we know that the arguments cannot escape and don't need to
+         * be memoized.
+         */
+        if (signature && signature.noAlias === true) {
+          return;
+        }
+        for (const operand of value.args) {
+          const place = operand.kind === 'Spread' ? operand.place : operand;
+          state.escapingValues.add(place.identifier.declarationId);
+        }
+      }
+    }
+  }
+
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    _scopes: Array<ReactiveScope>,
+  ): void {
+    this.visitValueForMemoization(
+      instruction.id,
+      instruction.value,
+      instruction.lvalue,
+    );
+  }
+
+  override visitTerminal(
+    stmt: ReactiveTerminalStatement<ReactiveTerminal>,
+    scopes: Array<ReactiveScope>,
+  ): void {
+    this.traverseTerminal(stmt, scopes);
+    if (stmt.terminal.kind === 'return') {
+      this.state.escapingValues.add(
+        stmt.terminal.value.identifier.declarationId,
+      );
+
+      /*
+       * If the return is within a scope, then those scopes must be evaluated
+       * with the return and should be considered dependencies of the returned
+       * value.
+       *
+       * This ensures that if those scopes have dependencies that those deps
+       * are also memoized.
+       */
+      const identifierNode = this.state.identifiers.get(
+        stmt.terminal.value.identifier.declarationId,
+      );
+      CompilerError.invariant(identifierNode !== undefined, {
+        reason: 'Expected identifier to be initialized',
+        loc: stmt.terminal.loc,
+      });
+      for (const scope of scopes) {
+        identifierNode.scopes.add(scope.id);
+      }
+    }
+  }
+
+  override visitScope(
+    scope: ReactiveScopeBlock,
+    scopes: Array<ReactiveScope>,
+  ): void {
+    /*
+     * If a scope reassigns any variables, set the chain of active scopes as a dependency
+     * of those variables. This ensures that if the variable escapes that we treat the
+     * reassignment scopes — and importantly their dependencies — as needing memoization.
+     */
+    for (const reassignment of scope.scope.reassignments) {
+      const identifierNode = this.state.identifiers.get(
+        reassignment.declarationId,
+      );
+      CompilerError.invariant(identifierNode !== undefined, {
+        reason: 'Expected identifier to be initialized',
+        loc: reassignment.loc,
+      });
+      for (const scope of scopes) {
+        identifierNode.scopes.add(scope.id);
+      }
+      identifierNode.scopes.add(scope.scope.id);
+    }
+
+    this.traverseScope(scope, [...scopes, scope.scope]);
+  }
+}
+
+// Prune reactive scopes that do not have any memoized outputs
+class PruneScopesTransform extends ReactiveFunctionTransform<
+  Set<DeclarationId>
+> {
+  prunedScopes: Set<ScopeId> = new Set();
+  /**
+   * Track reassignments so we can correctly set `pruned` flags for
+   * inlined useMemos.
+   */
+  reassignments: Map<DeclarationId, Set<Identifier>> = new Map();
+
+  override transformScope(
+    scopeBlock: ReactiveScopeBlock,
+    state: Set<DeclarationId>,
+  ): Transformed<ReactiveStatement> {
+    this.visitScope(scopeBlock, state);
+
+    /**
+     * Scopes may initially appear "empty" because the value being memoized
+     * is early-returned from within the scope. For now we intentionaly keep
+     * these scopes, and let them get pruned later by PruneUnusedScopes
+     * _after_ handling the early-return case in PropagateEarlyReturns.
+     *
+     * Also keep the scope if an early return was created by some earlier pass,
+     * which may happen in alternate compiler configurations.
+     */
+    if (
+      (scopeBlock.scope.declarations.size === 0 &&
+        scopeBlock.scope.reassignments.size === 0) ||
+      scopeBlock.scope.earlyReturnValue !== null
+    ) {
+      return {kind: 'keep'};
+    }
+
+    const hasMemoizedOutput =
+      Array.from(scopeBlock.scope.declarations.values()).some(decl =>
+        state.has(decl.identifier.declarationId),
+      ) ||
+      Array.from(scopeBlock.scope.reassignments).some(identifier =>
+        state.has(identifier.declarationId),
+      );
+    if (hasMemoizedOutput) {
+      return {kind: 'keep'};
+    } else {
+      this.prunedScopes.add(scopeBlock.scope.id);
+      return {
+        kind: 'replace-many',
+        value: scopeBlock.instructions,
+      };
+    }
+  }
+
+  /**
+   * If we pruned the scope for a non-escaping value, we know it doesn't
+   * need to be memoized. Remove associated `Memoize` instructions so that
+   * we don't report false positives on "missing" memoization of these values.
+   */
+  override transformInstruction(
+    instruction: ReactiveInstruction,
+    state: Set<DeclarationId>,
+  ): Transformed<ReactiveStatement> {
+    this.traverseInstruction(instruction, state);
+
+    const value = instruction.value;
+    if (value.kind === 'StoreLocal' && value.lvalue.kind === 'Reassign') {
+      // Complex cases of useMemo inlining result in a temporary that is reassigned
+      const ids = getOrInsertDefault(
+        this.reassignments,
+        value.lvalue.place.identifier.declarationId,
+        new Set(),
+      );
+      ids.add(value.value.identifier);
+    } else if (
+      value.kind === 'LoadLocal' &&
+      value.place.identifier.scope != null &&
+      instruction.lvalue != null &&
+      instruction.lvalue.identifier.scope == null
+    ) {
+      /*
+       * Simpler cases result in a direct assignment to the original lvalue, with a
+       * LoadLocal
+       */
+      const ids = getOrInsertDefault(
+        this.reassignments,
+        instruction.lvalue.identifier.declarationId,
+        new Set(),
+      );
+      ids.add(value.place.identifier);
+    } else if (value.kind === 'FinishMemoize') {
+      let decls;
+      if (value.decl.identifier.scope == null) {
+        /**
+         * If the manual memo was a useMemo that got inlined, iterate through
+         * all reassignments to the iife temporary to ensure they're memoized.
+         */
+        decls = this.reassignments.get(value.decl.identifier.declarationId) ?? [
+          value.decl.identifier,
+        ];
+      } else {
+        decls = [value.decl.identifier];
+      }
+
+      if (
+        [...decls].every(
+          decl => decl.scope == null || this.prunedScopes.has(decl.scope.id),
+        )
+      ) {
+        value.pruned = true;
+      }
+    }
+
+    return {kind: 'keep'};
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonReactiveDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonReactiveDependencies.ts
new file mode 100644
index 00000000000..9bdf15aeb53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonReactiveDependencies.ts
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  IdentifierId,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  isStableType,
+} from '../HIR';
+import {eachPatternOperand} from '../HIR/visitors';
+import {collectReactiveIdentifiers} from './CollectReactiveIdentifiers';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+/*
+ * PropagateScopeDependencies infers dependencies without considering whether dependencies
+ * are actually reactive or not (ie, whether their value can change over time).
+ *
+ * This pass prunes dependencies that are guaranteed to be non-reactive.
+ */
+export function pruneNonReactiveDependencies(fn: ReactiveFunction): void {
+  const reactiveIdentifiers = collectReactiveIdentifiers(fn);
+  visitReactiveFunction(fn, new Visitor(), reactiveIdentifiers);
+}
+
+type ReactiveIdentifiers = Set<IdentifierId>;
+
+class Visitor extends ReactiveFunctionVisitor<ReactiveIdentifiers> {
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    state: ReactiveIdentifiers,
+  ): void {
+    this.traverseInstruction(instruction, state);
+
+    const {lvalue, value} = instruction;
+    switch (value.kind) {
+      case 'LoadLocal': {
+        if (lvalue !== null && state.has(value.place.identifier.id)) {
+          state.add(lvalue.identifier.id);
+        }
+        break;
+      }
+      case 'StoreLocal': {
+        if (state.has(value.value.identifier.id)) {
+          state.add(value.lvalue.place.identifier.id);
+          if (lvalue !== null) {
+            state.add(lvalue.identifier.id);
+          }
+        }
+        break;
+      }
+      case 'Destructure': {
+        if (state.has(value.value.identifier.id)) {
+          for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
+            if (isStableType(lvalue.identifier)) {
+              continue;
+            }
+            state.add(lvalue.identifier.id);
+          }
+          if (lvalue !== null) {
+            state.add(lvalue.identifier.id);
+          }
+        }
+        break;
+      }
+      case 'PropertyLoad': {
+        if (
+          lvalue !== null &&
+          state.has(value.object.identifier.id) &&
+          !isStableType(lvalue.identifier)
+        ) {
+          state.add(lvalue.identifier.id);
+        }
+        break;
+      }
+      case 'ComputedLoad': {
+        if (
+          lvalue !== null &&
+          (state.has(value.object.identifier.id) ||
+            state.has(value.property.identifier.id))
+        ) {
+          state.add(lvalue.identifier.id);
+        }
+        break;
+      }
+    }
+  }
+
+  override visitScope(
+    scopeBlock: ReactiveScopeBlock,
+    state: ReactiveIdentifiers,
+  ): void {
+    this.traverseScope(scopeBlock, state);
+    for (const dep of scopeBlock.scope.dependencies) {
+      const isReactive = state.has(dep.identifier.id);
+      if (!isReactive) {
+        scopeBlock.scope.dependencies.delete(dep);
+      }
+    }
+    if (scopeBlock.scope.dependencies.size !== 0) {
+      /**
+       * If any of a scope's dependencies are reactive, then all of its
+       * outputs will re-evaluate whenever those dependencies change.
+       * Mark all of the outputs as reactive to reflect the fact that
+       * they may change in practice based on a reactive input.
+       */
+      for (const [, declaration] of scopeBlock.scope.declarations) {
+        state.add(declaration.identifier.id);
+      }
+      for (const reassignment of scopeBlock.scope.reassignments) {
+        state.add(reassignment.id);
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneTemporaryLValues.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneTemporaryLValues.ts
new file mode 100644
index 00000000000..76f48adacab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneTemporaryLValues.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  DeclarationId,
+  InstructionId,
+  Place,
+  ReactiveFunction,
+  ReactiveInstruction,
+} from '../HIR/HIR';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+/*
+ * Nulls out lvalues for temporary variables that are never accessed later. This only
+ * nulls out the lvalue itself, it does not remove the corresponding instructions.
+ */
+export function pruneUnusedLValues(fn: ReactiveFunction): void {
+  const lvalues = new Map<DeclarationId, ReactiveInstruction>();
+  visitReactiveFunction(fn, new Visitor(), lvalues);
+  for (const [, instr] of lvalues) {
+    instr.lvalue = null;
+  }
+}
+
+/**
+ * This pass uses DeclarationIds because the lvalue IdentifierId of a compound expression
+ * (ternary, logical, optional) in ReactiveFunction may not be the same as the IdentifierId
+ * of the phi, and which is referenced later. Keying by DeclarationId ensures we don't
+ * delete lvalues for identifiers that are used.
+ *
+ * TODO LeaveSSA: once we use HIR everywhere, this can likely move back to using IdentifierId
+ */
+type LValues = Map<DeclarationId, ReactiveInstruction>;
+
+class Visitor extends ReactiveFunctionVisitor<LValues> {
+  override visitPlace(id: InstructionId, place: Place, state: LValues): void {
+    state.delete(place.identifier.declarationId);
+  }
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    state: LValues,
+  ): void {
+    this.traverseInstruction(instruction, state);
+    if (
+      instruction.lvalue !== null &&
+      instruction.lvalue.identifier.name === null
+    ) {
+      state.set(instruction.lvalue.identifier.declarationId, instruction);
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneUnusedLabels.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneUnusedLabels.ts
new file mode 100644
index 00000000000..548c7013409
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneUnusedLabels.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BlockId,
+  ReactiveFunction,
+  ReactiveStatement,
+  ReactiveTerminalStatement,
+} from '../HIR/HIR';
+import {
+  ReactiveFunctionTransform,
+  Transformed,
+  visitReactiveFunction,
+} from './visitors';
+
+/*
+ * Flattens labeled terminals where the label is not reachable, and
+ * nulls out labels for other terminals where the label is unused.
+ */
+export function pruneUnusedLabels(fn: ReactiveFunction): void {
+  const labels: Labels = new Set();
+  visitReactiveFunction(fn, new Transform(), labels);
+}
+
+type Labels = Set<BlockId>;
+
+class Transform extends ReactiveFunctionTransform<Labels> {
+  override transformTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: Labels,
+  ): Transformed<ReactiveStatement> {
+    this.traverseTerminal(stmt, state);
+    const {terminal} = stmt;
+    if (
+      (terminal.kind === 'break' || terminal.kind === 'continue') &&
+      terminal.targetKind === 'labeled'
+    ) {
+      state.add(terminal.target);
+    }
+    // Is this terminal reachable via a break/continue to its label?
+    const isReachableLabel = stmt.label !== null && state.has(stmt.label.id);
+    if (stmt.terminal.kind === 'label' && !isReachableLabel) {
+      // Flatten labeled terminals where the label isn't necessary
+      const block = [...stmt.terminal.block];
+      const last = block.at(-1);
+      if (
+        last !== undefined &&
+        last.kind === 'terminal' &&
+        last.terminal.kind === 'break' &&
+        last.terminal.target === null
+      ) {
+        block.pop();
+      }
+      return {kind: 'replace-many', value: block};
+    } else {
+      if (!isReachableLabel && stmt.label != null) {
+        stmt.label.implicit = true;
+      }
+      return {kind: 'keep'};
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneUnusedScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneUnusedScopes.ts
new file mode 100644
index 00000000000..fdcf0065297
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneUnusedScopes.ts
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ReactiveFunction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+  ReactiveTerminalStatement,
+} from '../HIR/HIR';
+import {
+  ReactiveFunctionTransform,
+  Transformed,
+  visitReactiveFunction,
+} from './visitors';
+
+// Converts scopes without outputs into regular blocks.
+export function pruneUnusedScopes(fn: ReactiveFunction): void {
+  visitReactiveFunction(fn, new Transform(), {
+    hasReturnStatement: false,
+  } as State);
+}
+
+type State = {
+  hasReturnStatement: boolean;
+};
+
+class Transform extends ReactiveFunctionTransform<State> {
+  override visitTerminal(stmt: ReactiveTerminalStatement, state: State): void {
+    this.traverseTerminal(stmt, state);
+    if (stmt.terminal.kind === 'return') {
+      state.hasReturnStatement = true;
+    }
+  }
+  override transformScope(
+    scopeBlock: ReactiveScopeBlock,
+    _state: State,
+  ): Transformed<ReactiveStatement> {
+    const scopeState: State = {hasReturnStatement: false};
+    this.visitScope(scopeBlock, scopeState);
+    if (
+      !scopeState.hasReturnStatement &&
+      scopeBlock.scope.reassignments.size === 0 &&
+      (scopeBlock.scope.declarations.size === 0 ||
+        /*
+         * Can prune scopes where all declarations bubbled up from inner
+         * scopes
+         */
+        !hasOwnDeclaration(scopeBlock))
+    ) {
+      return {
+        kind: 'replace',
+        value: {
+          kind: 'pruned-scope',
+          scope: scopeBlock.scope,
+          instructions: scopeBlock.instructions,
+        },
+      };
+    } else {
+      return {kind: 'keep'};
+    }
+  }
+}
+
+/*
+ * Does the scope block declare any values of its own? This can return
+ * false if all the block's declarations are propagated from nested scopes.
+ */
+function hasOwnDeclaration(block: ReactiveScopeBlock): boolean {
+  for (const declaration of block.scope.declarations.values()) {
+    if (declaration.scope.id === block.scope.id) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts
new file mode 100644
index 00000000000..6d72d2e2517
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts
@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {ProgramContext} from '..';
+import {CompilerError} from '../CompilerError';
+import {
+  DeclarationId,
+  GeneratedSource,
+  Identifier,
+  IdentifierName,
+  InstructionId,
+  Place,
+  PrunedReactiveScopeBlock,
+  ReactiveBlock,
+  ReactiveFunction,
+  ReactiveScopeBlock,
+  ReactiveValue,
+  ValidIdentifierName,
+  isPromotedJsxTemporary,
+  isPromotedTemporary,
+  makeIdentifierName,
+} from '../HIR/HIR';
+import {collectReferencedGlobals} from './CollectReferencedGlobals';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+/**
+ * Ensures that each named variable in the given function has a unique name
+ * that does not conflict with any other variables in the same block scope.
+ * Note that the scoping is based on the final inferred blocks, not the
+ * block scopes that were present in the original source. Thus variables
+ * that shadowed in the original source may end up with unique names in the
+ * output, if Forget would merge those two blocks into a single scope.
+ *
+ * Variables are renamed using their original name followed by a number,
+ * starting with 0 and incrementing until a unique name is found. Eg if the
+ * compiler collapses three scopes that each had their own `foo` declaration,
+ * they will be renamed to `foo`, `foo0`, and `foo1`, assuming that no conflicts'
+ * exist for `foo0` and `foo1`.
+ *
+ * For temporary values that are promoted to named variables, the starting name
+ * is "T0" for values that appear in JSX tag position and "t0" otherwise. If this
+ * name conflicts, the number portion increments until the name is unique (t1, t2, etc).
+ *
+ * Returns a Set of all the unique variable names in the function after renaming.
+ */
+export function renameVariables(fn: ReactiveFunction): Set<string> {
+  const globals = collectReferencedGlobals(fn);
+  const scopes = new Scopes(globals, fn.env.programContext);
+  renameVariablesImpl(fn, new Visitor(), scopes);
+  return new Set([...scopes.names, ...globals]);
+}
+
+function renameVariablesImpl(
+  fn: ReactiveFunction,
+  visitor: Visitor,
+  scopes: Scopes,
+): void {
+  scopes.enter(() => {
+    for (const param of fn.params) {
+      if (param.kind === 'Identifier') {
+        scopes.visit(param.identifier);
+      } else {
+        scopes.visit(param.place.identifier);
+      }
+    }
+    visitReactiveFunction(fn, visitor, scopes);
+  });
+}
+
+class Visitor extends ReactiveFunctionVisitor<Scopes> {
+  override visitParam(place: Place, state: Scopes): void {
+    state.visit(place.identifier);
+  }
+  override visitLValue(_id: InstructionId, lvalue: Place, state: Scopes): void {
+    state.visit(lvalue.identifier);
+  }
+  override visitPlace(id: InstructionId, place: Place, state: Scopes): void {
+    state.visit(place.identifier);
+  }
+  override visitBlock(block: ReactiveBlock, state: Scopes): void {
+    state.enter(() => {
+      this.traverseBlock(block, state);
+    });
+  }
+
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: Scopes,
+  ): void {
+    this.traverseBlock(scopeBlock.instructions, state);
+  }
+
+  override visitScope(scope: ReactiveScopeBlock, state: Scopes): void {
+    for (const [_, declaration] of scope.scope.declarations) {
+      state.visit(declaration.identifier);
+    }
+    this.traverseScope(scope, state);
+  }
+
+  override visitValue(
+    id: InstructionId,
+    value: ReactiveValue,
+    state: Scopes,
+  ): void {
+    this.traverseValue(id, value, state);
+    if (value.kind === 'FunctionExpression' || value.kind === 'ObjectMethod') {
+      this.visitHirFunction(value.loweredFunc.func, state);
+    }
+  }
+
+  override visitReactiveFunctionValue(
+    _id: InstructionId,
+    _dependencies: Array<Place>,
+    _fn: ReactiveFunction,
+    _state: Scopes,
+  ): void {
+    renameVariablesImpl(_fn, this, _state);
+  }
+}
+
+class Scopes {
+  #seen: Map<DeclarationId, IdentifierName> = new Map();
+  #stack: Array<Map<string, DeclarationId>> = [new Map()];
+  #globals: Set<string>;
+  #programContext: ProgramContext;
+  names: Set<ValidIdentifierName> = new Set();
+
+  constructor(globals: Set<string>, programContext: ProgramContext) {
+    this.#globals = globals;
+    this.#programContext = programContext;
+  }
+
+  visit(identifier: Identifier): void {
+    const originalName = identifier.name;
+    if (originalName === null) {
+      return;
+    }
+    const mappedName = this.#seen.get(identifier.declarationId);
+    if (mappedName !== undefined) {
+      identifier.name = mappedName;
+      return;
+    }
+    let name: string = originalName.value;
+    let id = 0;
+    if (isPromotedTemporary(originalName.value)) {
+      name = `t${id++}`;
+    } else if (isPromotedJsxTemporary(originalName.value)) {
+      name = `T${id++}`;
+    }
+    while (this.#lookup(name) !== null || this.#globals.has(name)) {
+      if (isPromotedTemporary(originalName.value)) {
+        name = `t${id++}`;
+      } else if (isPromotedJsxTemporary(originalName.value)) {
+        name = `T${id++}`;
+      } else {
+        name = `${originalName.value}$${id++}`;
+      }
+    }
+    this.#programContext.addNewReference(name);
+    const identifierName = makeIdentifierName(name);
+    identifier.name = identifierName;
+    this.#seen.set(identifier.declarationId, identifierName);
+    this.#stack.at(-1)!.set(identifierName.value, identifier.declarationId);
+    this.names.add(identifierName.value);
+  }
+
+  #lookup(name: string): DeclarationId | null {
+    for (let i = this.#stack.length - 1; i >= 0; i--) {
+      const scope = this.#stack[i]!;
+      const entry = scope.get(name);
+      if (entry !== undefined) {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  enter(fn: () => void): void {
+    const next = new Map();
+    this.#stack.push(next);
+    fn();
+    const last = this.#stack.pop();
+    CompilerError.invariant(last === next, {
+      reason: 'Mismatch push/pop calls',
+      loc: GeneratedSource,
+    });
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/StabilizeBlockIds.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/StabilizeBlockIds.ts
new file mode 100644
index 00000000000..9ad18154746
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/StabilizeBlockIds.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  BlockId,
+  ReactiveFunction,
+  ReactiveScopeBlock,
+  ReactiveTerminalStatement,
+  makeBlockId,
+} from '../HIR';
+import {getOrInsertDefault} from '../Utils/utils';
+import {ReactiveFunctionVisitor, visitReactiveFunction} from './visitors';
+
+export function stabilizeBlockIds(fn: ReactiveFunction): void {
+  const referenced: Set<BlockId> = new Set();
+  visitReactiveFunction(fn, new CollectReferencedLabels(), referenced);
+
+  const mappings = new Map<BlockId, BlockId>();
+  for (const blockId of referenced) {
+    mappings.set(blockId, makeBlockId(mappings.size));
+  }
+
+  visitReactiveFunction(fn, new RewriteBlockIds(), mappings);
+}
+
+class CollectReferencedLabels extends ReactiveFunctionVisitor<Set<BlockId>> {
+  override visitScope(scope: ReactiveScopeBlock, state: Set<BlockId>): void {
+    const {earlyReturnValue} = scope.scope;
+    if (earlyReturnValue != null) {
+      state.add(earlyReturnValue.label);
+    }
+    this.traverseScope(scope, state);
+  }
+  override visitTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: Set<BlockId>,
+  ): void {
+    if (stmt.label != null) {
+      if (!stmt.label.implicit) {
+        state.add(stmt.label.id);
+      }
+    }
+    this.traverseTerminal(stmt, state);
+  }
+}
+
+class RewriteBlockIds extends ReactiveFunctionVisitor<Map<BlockId, BlockId>> {
+  override visitScope(
+    scope: ReactiveScopeBlock,
+    state: Map<BlockId, BlockId>,
+  ): void {
+    const {earlyReturnValue} = scope.scope;
+    if (earlyReturnValue != null) {
+      const rewrittenId = getOrInsertDefault(
+        state,
+        earlyReturnValue.label,
+        state.size,
+      );
+      earlyReturnValue.label = makeBlockId(rewrittenId);
+    }
+    this.traverseScope(scope, state);
+  }
+  override visitTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: Map<BlockId, BlockId>,
+  ): void {
+    if (stmt.label != null) {
+      const rewrittenId = getOrInsertDefault(state, stmt.label.id, state.size);
+      stmt.label.id = makeBlockId(rewrittenId);
+    }
+
+    const terminal = stmt.terminal;
+    if (terminal.kind === 'break' || terminal.kind === 'continue') {
+      const rewrittenId = getOrInsertDefault(
+        state,
+        terminal.target,
+        state.size,
+      );
+      terminal.target = makeBlockId(rewrittenId);
+    }
+    this.traverseTerminal(stmt, state);
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/index.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/index.ts
new file mode 100644
index 00000000000..d0f89f05d2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/index.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {alignObjectMethodScopes} from './AlignObjectMethodScopes';
+export {assertScopeInstructionsWithinScopes} from './AssertScopeInstructionsWithinScope';
+export {assertWellFormedBreakTargets} from './AssertWellFormedBreakTargets';
+export {buildReactiveFunction} from './BuildReactiveFunction';
+export {codegenFunction, type CodegenFunction} from './CodegenReactiveFunction';
+export {extractScopeDeclarationsFromDestructuring} from './ExtractScopeDeclarationsFromDestructuring';
+export {inferReactiveScopeVariables} from './InferReactiveScopeVariables';
+export {memoizeFbtAndMacroOperandsInSameScope} from './MemoizeFbtAndMacroOperandsInSameScope';
+export {mergeReactiveScopesThatInvalidateTogether} from './MergeReactiveScopesThatInvalidateTogether';
+export {
+  printReactiveFunction,
+  printReactiveFunctionWithOutlined,
+} from './PrintReactiveFunction';
+export {promoteUsedTemporaries} from './PromoteUsedTemporaries';
+export {propagateEarlyReturns} from './PropagateEarlyReturns';
+export {pruneAllReactiveScopes} from './PruneAllReactiveScopes';
+export {pruneHoistedContexts} from './PruneHoistedContexts';
+export {pruneNonEscapingScopes} from './PruneNonEscapingScopes';
+export {pruneNonReactiveDependencies} from './PruneNonReactiveDependencies';
+export {pruneUnusedLValues} from './PruneTemporaryLValues';
+export {pruneUnusedLabels} from './PruneUnusedLabels';
+export {pruneUnusedScopes} from './PruneUnusedScopes';
+export {renameVariables} from './RenameVariables';
+export {stabilizeBlockIds} from './StabilizeBlockIds';
+export {
+  ReactiveFunctionTransform,
+  eachReactiveValueOperand,
+  visitReactiveFunction,
+  type Transformed,
+} from './visitors';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts
new file mode 100644
index 00000000000..4ad05aa302a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts
@@ -0,0 +1,666 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  HIRFunction,
+  InstructionId,
+  Place,
+  PrunedReactiveScopeBlock,
+  ReactiveBlock,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveStatement,
+  ReactiveTerminal,
+  ReactiveTerminalStatement,
+  ReactiveValue,
+} from '../HIR/HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {assertExhaustive} from '../Utils/utils';
+
+export function visitReactiveFunction<TState>(
+  fn: ReactiveFunction,
+  visitor: ReactiveFunctionVisitor<TState>,
+  state: TState,
+): void {
+  visitor.visitBlock(fn.body, state);
+}
+
+export class ReactiveFunctionVisitor<TState = void> {
+  visitID(_id: InstructionId, _state: TState): void {}
+  visitParam(_place: Place, _state: TState): void {}
+  visitLValue(_id: InstructionId, _lvalue: Place, _state: TState): void {}
+  visitPlace(_id: InstructionId, _place: Place, _state: TState): void {}
+  visitReactiveFunctionValue(
+    _id: InstructionId,
+    _dependencies: Array<Place>,
+    _fn: ReactiveFunction,
+    _state: TState,
+  ): void {}
+
+  visitValue(id: InstructionId, value: ReactiveValue, state: TState): void {
+    this.traverseValue(id, value, state);
+  }
+  traverseValue(id: InstructionId, value: ReactiveValue, state: TState): void {
+    switch (value.kind) {
+      case 'OptionalExpression': {
+        this.visitValue(id, value.value, state);
+        break;
+      }
+      case 'LogicalExpression': {
+        this.visitValue(id, value.left, state);
+        this.visitValue(id, value.right, state);
+        break;
+      }
+      case 'ConditionalExpression': {
+        this.visitValue(id, value.test, state);
+        this.visitValue(id, value.consequent, state);
+        this.visitValue(id, value.alternate, state);
+        break;
+      }
+      case 'SequenceExpression': {
+        for (const instr of value.instructions) {
+          this.visitInstruction(instr, state);
+        }
+        this.visitValue(value.id, value.value, state);
+        break;
+      }
+      default: {
+        for (const place of eachInstructionValueOperand(value)) {
+          this.visitPlace(id, place, state);
+        }
+      }
+    }
+  }
+
+  visitInstruction(instruction: ReactiveInstruction, state: TState): void {
+    this.traverseInstruction(instruction, state);
+  }
+  traverseInstruction(instruction: ReactiveInstruction, state: TState): void {
+    this.visitID(instruction.id, state);
+    for (const operand of eachInstructionLValue(instruction)) {
+      this.visitLValue(instruction.id, operand, state);
+    }
+    this.visitValue(instruction.id, instruction.value, state);
+  }
+
+  visitTerminal(stmt: ReactiveTerminalStatement, state: TState): void {
+    this.traverseTerminal(stmt, state);
+  }
+  traverseTerminal(stmt: ReactiveTerminalStatement, state: TState): void {
+    const {terminal} = stmt;
+    if (terminal.id !== null) {
+      this.visitID(terminal.id, state);
+    }
+    switch (terminal.kind) {
+      case 'break':
+      case 'continue': {
+        break;
+      }
+      case 'return': {
+        this.visitPlace(terminal.id, terminal.value, state);
+        break;
+      }
+      case 'throw': {
+        this.visitPlace(terminal.id, terminal.value, state);
+        break;
+      }
+      case 'for': {
+        this.visitValue(terminal.id, terminal.init, state);
+        this.visitValue(terminal.id, terminal.test, state);
+        this.visitBlock(terminal.loop, state);
+        if (terminal.update !== null) {
+          this.visitValue(terminal.id, terminal.update, state);
+        }
+        break;
+      }
+      case 'for-of': {
+        this.visitValue(terminal.id, terminal.init, state);
+        this.visitValue(terminal.id, terminal.test, state);
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'for-in': {
+        this.visitValue(terminal.id, terminal.init, state);
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'do-while': {
+        this.visitBlock(terminal.loop, state);
+        this.visitValue(terminal.id, terminal.test, state);
+        break;
+      }
+      case 'while': {
+        this.visitValue(terminal.id, terminal.test, state);
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'if': {
+        this.visitPlace(terminal.id, terminal.test, state);
+        this.visitBlock(terminal.consequent, state);
+        if (terminal.alternate !== null) {
+          this.visitBlock(terminal.alternate, state);
+        }
+        break;
+      }
+      case 'switch': {
+        this.visitPlace(terminal.id, terminal.test, state);
+        for (const case_ of terminal.cases) {
+          if (case_.test !== null) {
+            this.visitPlace(terminal.id, case_.test, state);
+          }
+          if (case_.block !== undefined) {
+            this.visitBlock(case_.block, state);
+          }
+        }
+        break;
+      }
+      case 'label': {
+        this.visitBlock(terminal.block, state);
+        break;
+      }
+      case 'try': {
+        this.visitBlock(terminal.block, state);
+        this.visitBlock(terminal.handler, state);
+        break;
+      }
+      default: {
+        assertExhaustive(
+          terminal,
+          `Unexpected terminal kind \`${(terminal as any).kind}\``,
+        );
+      }
+    }
+  }
+
+  visitScope(scope: ReactiveScopeBlock, state: TState): void {
+    this.traverseScope(scope, state);
+  }
+  traverseScope(scope: ReactiveScopeBlock, state: TState): void {
+    this.visitBlock(scope.instructions, state);
+  }
+
+  visitPrunedScope(scopeBlock: PrunedReactiveScopeBlock, state: TState): void {
+    this.traversePrunedScope(scopeBlock, state);
+  }
+  traversePrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: TState,
+  ): void {
+    this.visitBlock(scopeBlock.instructions, state);
+  }
+
+  visitBlock(block: ReactiveBlock, state: TState): void {
+    this.traverseBlock(block, state);
+  }
+  traverseBlock(block: ReactiveBlock, state: TState): void {
+    for (const instr of block) {
+      switch (instr.kind) {
+        case 'instruction': {
+          this.visitInstruction(instr.instruction, state);
+          break;
+        }
+        case 'scope': {
+          this.visitScope(instr, state);
+          break;
+        }
+        case 'pruned-scope': {
+          this.visitPrunedScope(instr, state);
+          break;
+        }
+        case 'terminal': {
+          this.visitTerminal(instr, state);
+          break;
+        }
+        default: {
+          assertExhaustive(
+            instr,
+            `Unexpected instruction kind \`${(instr as any).kind}\``,
+          );
+        }
+      }
+    }
+  }
+
+  visitHirFunction(fn: HIRFunction, state: TState): void {
+    for (const param of fn.params) {
+      const place = param.kind === 'Identifier' ? param : param.place;
+      this.visitParam(place, state);
+    }
+    for (const [, block] of fn.body.blocks) {
+      for (const instr of block.instructions) {
+        this.visitInstruction(instr, state);
+        if (
+          instr.value.kind === 'FunctionExpression' ||
+          instr.value.kind === 'ObjectMethod'
+        ) {
+          this.visitHirFunction(instr.value.loweredFunc.func, state);
+        }
+      }
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        this.visitPlace(block.terminal.id, operand, state);
+      }
+    }
+  }
+}
+
+export type TransformedValue =
+  | {kind: 'keep'}
+  | {kind: 'replace'; value: ReactiveValue};
+
+export type Transformed<T> =
+  | {kind: 'remove'}
+  | {kind: 'keep'}
+  | {kind: 'replace'; value: T}
+  | {kind: 'replace-many'; value: Array<T>};
+
+export class ReactiveFunctionTransform<
+  TState = void,
+> extends ReactiveFunctionVisitor<TState> {
+  override traverseBlock(block: ReactiveBlock, state: TState): void {
+    let nextBlock: ReactiveBlock | null = null;
+    for (let i = 0; i < block.length; i++) {
+      const instr = block[i]!;
+      let transformed: Transformed<ReactiveStatement>;
+      switch (instr.kind) {
+        case 'instruction': {
+          transformed = this.transformInstruction(instr.instruction, state);
+          break;
+        }
+        case 'scope': {
+          transformed = this.transformScope(instr, state);
+          break;
+        }
+        case 'pruned-scope': {
+          transformed = this.transformPrunedScope(instr, state);
+          break;
+        }
+        case 'terminal': {
+          transformed = this.transformTerminal(instr, state);
+          break;
+        }
+        default: {
+          assertExhaustive(
+            instr,
+            `Unexpected instruction kind \`${(instr as any).kind}\``,
+          );
+        }
+      }
+      switch (transformed.kind) {
+        case 'keep': {
+          if (nextBlock !== null) {
+            nextBlock.push(instr);
+          }
+          break;
+        }
+        case 'remove': {
+          if (nextBlock === null) {
+            nextBlock = block.slice(0, i);
+          }
+          break;
+        }
+        case 'replace': {
+          nextBlock ??= block.slice(0, i);
+          nextBlock.push(transformed.value);
+          break;
+        }
+        case 'replace-many': {
+          nextBlock ??= block.slice(0, i);
+          nextBlock.push(...transformed.value);
+          break;
+        }
+      }
+    }
+    if (nextBlock !== null) {
+      block.length = 0;
+      block.push(...nextBlock);
+    }
+  }
+
+  transformInstruction(
+    instruction: ReactiveInstruction,
+    state: TState,
+  ): Transformed<ReactiveStatement> {
+    this.visitInstruction(instruction, state);
+    return {kind: 'keep'};
+  }
+
+  transformTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: TState,
+  ): Transformed<ReactiveStatement> {
+    this.visitTerminal(stmt, state);
+    return {kind: 'keep'};
+  }
+
+  transformScope(
+    scope: ReactiveScopeBlock,
+    state: TState,
+  ): Transformed<ReactiveStatement> {
+    this.visitScope(scope, state);
+    return {kind: 'keep'};
+  }
+
+  transformPrunedScope(
+    scope: PrunedReactiveScopeBlock,
+    state: TState,
+  ): Transformed<ReactiveStatement> {
+    this.visitPrunedScope(scope, state);
+    return {kind: 'keep'};
+  }
+
+  transformValue(
+    id: InstructionId,
+    value: ReactiveValue,
+    state: TState,
+  ): TransformedValue {
+    this.visitValue(id, value, state);
+    return {kind: 'keep'};
+  }
+
+  transformReactiveFunctionValue(
+    id: InstructionId,
+    dependencies: Array<Place>,
+    fn: ReactiveFunction,
+    state: TState,
+  ): {kind: 'keep'} | {kind: 'replace'; value: ReactiveFunction} {
+    this.visitReactiveFunctionValue(id, dependencies, fn, state);
+    return {kind: 'keep'};
+  }
+
+  override traverseValue(
+    id: InstructionId,
+    value: ReactiveValue,
+    state: TState,
+  ): void {
+    switch (value.kind) {
+      case 'OptionalExpression': {
+        const nextValue = this.transformValue(id, value.value, state);
+        if (nextValue.kind === 'replace') {
+          value.value = nextValue.value;
+        }
+        break;
+      }
+      case 'LogicalExpression': {
+        const left = this.transformValue(id, value.left, state);
+        if (left.kind === 'replace') {
+          value.left = left.value;
+        }
+        const right = this.transformValue(id, value.right, state);
+        if (right.kind === 'replace') {
+          value.right = right.value;
+        }
+        break;
+      }
+      case 'ConditionalExpression': {
+        const test = this.transformValue(id, value.test, state);
+        if (test.kind === 'replace') {
+          value.test = test.value;
+        }
+        const consequent = this.transformValue(id, value.consequent, state);
+        if (consequent.kind === 'replace') {
+          value.consequent = consequent.value;
+        }
+        const alternate = this.transformValue(id, value.alternate, state);
+        if (alternate.kind === 'replace') {
+          value.alternate = alternate.value;
+        }
+        break;
+      }
+      case 'SequenceExpression': {
+        for (const instr of value.instructions) {
+          this.visitInstruction(instr, state);
+        }
+        const nextValue = this.transformValue(value.id, value.value, state);
+        if (nextValue.kind === 'replace') {
+          value.value = nextValue.value;
+        }
+        break;
+      }
+      default: {
+        for (const place of eachInstructionValueOperand(value)) {
+          this.visitPlace(id, place, state);
+        }
+      }
+    }
+  }
+
+  override traverseInstruction(
+    instruction: ReactiveInstruction,
+    state: TState,
+  ): void {
+    this.visitID(instruction.id, state);
+    for (const operand of eachInstructionLValue(instruction)) {
+      this.visitLValue(instruction.id, operand, state);
+    }
+    const nextValue = this.transformValue(
+      instruction.id,
+      instruction.value,
+      state,
+    );
+    if (nextValue.kind === 'replace') {
+      instruction.value = nextValue.value;
+    }
+  }
+
+  override traverseTerminal(
+    stmt: ReactiveTerminalStatement,
+    state: TState,
+  ): void {
+    const {terminal} = stmt;
+    if (terminal.id !== null) {
+      this.visitID(terminal.id, state);
+    }
+    switch (terminal.kind) {
+      case 'break':
+      case 'continue': {
+        break;
+      }
+      case 'return': {
+        this.visitPlace(terminal.id, terminal.value, state);
+        break;
+      }
+      case 'throw': {
+        this.visitPlace(terminal.id, terminal.value, state);
+        break;
+      }
+      case 'for': {
+        const init = this.transformValue(terminal.id, terminal.init, state);
+        if (init.kind === 'replace') {
+          terminal.init = init.value;
+        }
+        const test = this.transformValue(terminal.id, terminal.test, state);
+        if (test.kind === 'replace') {
+          terminal.test = test.value;
+        }
+        if (terminal.update !== null) {
+          const update = this.transformValue(
+            terminal.id,
+            terminal.update,
+            state,
+          );
+          if (update.kind === 'replace') {
+            terminal.update = update.value;
+          }
+        }
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'for-of': {
+        const init = this.transformValue(terminal.id, terminal.init, state);
+        if (init.kind === 'replace') {
+          terminal.init = init.value;
+        }
+        const test = this.transformValue(terminal.id, terminal.test, state);
+        if (test.kind === 'replace') {
+          terminal.test = test.value;
+        }
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'for-in': {
+        const init = this.transformValue(terminal.id, terminal.init, state);
+        if (init.kind === 'replace') {
+          terminal.init = init.value;
+        }
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'do-while': {
+        this.visitBlock(terminal.loop, state);
+        const test = this.transformValue(terminal.id, terminal.test, state);
+        if (test.kind === 'replace') {
+          terminal.test = test.value;
+        }
+        break;
+      }
+      case 'while': {
+        const test = this.transformValue(terminal.id, terminal.test, state);
+        if (test.kind === 'replace') {
+          terminal.test = test.value;
+        }
+        this.visitBlock(terminal.loop, state);
+        break;
+      }
+      case 'if': {
+        this.visitPlace(terminal.id, terminal.test, state);
+        this.visitBlock(terminal.consequent, state);
+        if (terminal.alternate !== null) {
+          this.visitBlock(terminal.alternate, state);
+        }
+        break;
+      }
+      case 'switch': {
+        this.visitPlace(terminal.id, terminal.test, state);
+        for (const case_ of terminal.cases) {
+          if (case_.test !== null) {
+            this.visitPlace(terminal.id, case_.test, state);
+          }
+          if (case_.block !== undefined) {
+            this.visitBlock(case_.block, state);
+          }
+        }
+        break;
+      }
+      case 'label': {
+        this.visitBlock(terminal.block, state);
+        break;
+      }
+      case 'try': {
+        this.visitBlock(terminal.block, state);
+        if (terminal.handlerBinding !== null) {
+          this.visitPlace(terminal.id, terminal.handlerBinding, state);
+        }
+        this.visitBlock(terminal.handler, state);
+        break;
+      }
+      default: {
+        assertExhaustive(
+          terminal,
+          `Unexpected terminal kind \`${(terminal as any).kind}\``,
+        );
+      }
+    }
+  }
+}
+
+export function* eachReactiveValueOperand(
+  instrValue: ReactiveValue,
+): Iterable<Place> {
+  switch (instrValue.kind) {
+    case 'OptionalExpression': {
+      yield* eachReactiveValueOperand(instrValue.value);
+      break;
+    }
+    case 'LogicalExpression': {
+      yield* eachReactiveValueOperand(instrValue.left);
+      yield* eachReactiveValueOperand(instrValue.right);
+      break;
+    }
+    case 'SequenceExpression': {
+      for (const instr of instrValue.instructions) {
+        yield* eachReactiveValueOperand(instr.value);
+      }
+      yield* eachReactiveValueOperand(instrValue.value);
+      break;
+    }
+    case 'ConditionalExpression': {
+      yield* eachReactiveValueOperand(instrValue.test);
+      yield* eachReactiveValueOperand(instrValue.consequent);
+      yield* eachReactiveValueOperand(instrValue.alternate);
+      break;
+    }
+    default: {
+      yield* eachInstructionValueOperand(instrValue);
+    }
+  }
+}
+
+export function mapTerminalBlocks(
+  terminal: ReactiveTerminal,
+  fn: (block: ReactiveBlock) => ReactiveBlock,
+): void {
+  switch (terminal.kind) {
+    case 'break':
+    case 'continue':
+    case 'return':
+    case 'throw': {
+      break;
+    }
+    case 'for': {
+      terminal.loop = fn(terminal.loop);
+      break;
+    }
+    case 'for-of': {
+      terminal.loop = fn(terminal.loop);
+      break;
+    }
+    case 'for-in': {
+      terminal.loop = fn(terminal.loop);
+      break;
+    }
+    case 'do-while':
+    case 'while': {
+      terminal.loop = fn(terminal.loop);
+      break;
+    }
+    case 'if': {
+      terminal.consequent = fn(terminal.consequent);
+      if (terminal.alternate !== null) {
+        terminal.alternate = fn(terminal.alternate);
+      }
+      break;
+    }
+    case 'switch': {
+      for (const case_ of terminal.cases) {
+        if (case_.block !== undefined) {
+          case_.block = fn(case_.block);
+        }
+      }
+      break;
+    }
+    case 'label': {
+      terminal.block = fn(terminal.block);
+      break;
+    }
+    case 'try': {
+      terminal.block = fn(terminal.block);
+      terminal.handler = fn(terminal.handler);
+      break;
+    }
+    default: {
+      assertExhaustive(
+        terminal,
+        `Unexpected terminal kind \`${(terminal as any).kind}\``,
+      );
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/SSA/EliminateRedundantPhi.ts b/compiler/packages/babel-plugin-react-compiler/src/SSA/EliminateRedundantPhi.ts
new file mode 100644
index 00000000000..ab6d59b1445
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/SSA/EliminateRedundantPhi.ts
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  BlockId,
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  Place,
+} from '../HIR/HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+
+const DEBUG = false;
+
+/*
+ * Pass to eliminate redundant phi nodes:
+ * - all operands are the same identifier, ie `x2 = phi(x1, x1, x1)`.
+ * - all operands are the same identifier *or* the output of the phi, ie `x2 = phi(x1, x2, x1, x2)`.
+ *
+ * In both these cases, the phi is eliminated and all usages of the phi identifier
+ * are replaced with the other operand (ie in both cases above, all usages of `x2` are replaced with `x1` .
+ *
+ * The algorithm is inspired by that in https://pp.ipd.kit.edu/uploads/publikationen/braun13cc.pdf
+ * but modified to reduce passes over the CFG. We visit the blocks in reverse postorder. Each time a redundant
+ * phi is encountered we add a mapping (eg x2 -> x1) to a rewrite table. Subsequent instructions, terminals,
+ * and phis rewrite all their identifiers based on this table. The algorithm loops over the CFG repeatedly
+ * until there are no new rewrites: for a CFG without back-edges it completes in a single pass.
+ */
+export function eliminateRedundantPhi(
+  fn: HIRFunction,
+  sharedRewrites?: Map<Identifier, Identifier>,
+): void {
+  const ir = fn.body;
+  const rewrites: Map<Identifier, Identifier> =
+    sharedRewrites != null ? sharedRewrites : new Map();
+
+  /*
+   * Whether or the CFG has a back-edge (a loop). We determine this dynamically
+   * during the first iteration over the CFG by recording which blocks were already
+   * visited, and checking if a block has any predecessors that weren't visited yet.
+   * Because blocks are in reverse postorder, the only time this can occur is a loop.
+   */
+  let hasBackEdge = false;
+  const visited: Set<BlockId> = new Set();
+
+  /*
+   * size tracks the number of rewrites at the beginning of each iteration, so we can
+   * compare to see if any new rewrites were added in that iteration.
+   */
+  let size = rewrites.size;
+  do {
+    size = rewrites.size;
+    for (const [blockId, block] of ir.blocks) {
+      /*
+       * On the first iteration of the loop check for any back-edges.
+       * if there aren't any then there won't be a second iteration
+       */
+      if (!hasBackEdge) {
+        for (const predId of block.preds) {
+          if (!visited.has(predId)) {
+            hasBackEdge = true;
+          }
+        }
+      }
+      visited.add(blockId);
+
+      // Find any redundant phis
+      phis: for (const phi of block.phis) {
+        // Remap phis in case operands are from eliminated phis
+        phi.operands.forEach((place, _) => rewritePlace(place, rewrites));
+        // Find if the phi can be eliminated
+        let same: Identifier | null = null;
+        for (const [_, operand] of phi.operands) {
+          if (
+            (same !== null && operand.identifier.id === same.id) ||
+            operand.identifier.id === phi.place.identifier.id
+          ) {
+            /*
+             * This operand is the same as the phi or is the same as the
+             * previous non-phi operands
+             */
+            continue;
+          } else if (same !== null) {
+            /*
+             * There are multiple operands not equal to the phi itself,
+             * this phi can't be eliminated.
+             */
+            continue phis;
+          } else {
+            // First non-phi operand
+            same = operand.identifier;
+          }
+        }
+        CompilerError.invariant(same !== null, {
+          reason: 'Expected phis to be non-empty',
+          loc: GeneratedSource,
+        });
+        rewrites.set(phi.place.identifier, same);
+        block.phis.delete(phi);
+      }
+
+      // Rewrite all instruction lvalues and operands
+      for (const instr of block.instructions) {
+        for (const place of eachInstructionLValue(instr)) {
+          rewritePlace(place, rewrites);
+        }
+        for (const place of eachInstructionOperand(instr)) {
+          rewritePlace(place, rewrites);
+        }
+
+        if (
+          instr.value.kind === 'FunctionExpression' ||
+          instr.value.kind === 'ObjectMethod'
+        ) {
+          const {context} = instr.value.loweredFunc.func;
+          for (const place of context) {
+            rewritePlace(place, rewrites);
+          }
+
+          /*
+           * recursive call to:
+           * - eliminate phi nodes in child node
+           * - propagate rewrites, which may have changed between iterations
+           */
+          eliminateRedundantPhi(instr.value.loweredFunc.func, rewrites);
+        }
+      }
+
+      // Rewrite all terminal operands
+      const {terminal} = block;
+      for (const place of eachTerminalOperand(terminal)) {
+        rewritePlace(place, rewrites);
+      }
+    }
+    /*
+     * We only need to loop if there were newly eliminated phis in this iteration
+     * *and* the CFG has loops. If there are no loops, then all eliminated phis
+     * have already propagated forwards since we visit in reverse postorder.
+     */
+  } while (rewrites.size > size && hasBackEdge);
+
+  if (DEBUG) {
+    for (const [, block] of ir.blocks) {
+      for (const phi of block.phis) {
+        CompilerError.invariant(!rewrites.has(phi.place.identifier), {
+          reason: '[EliminateRedundantPhis]: rewrite not complete',
+          loc: phi.place.loc,
+        });
+        for (const [, operand] of phi.operands) {
+          CompilerError.invariant(!rewrites.has(operand.identifier), {
+            reason: '[EliminateRedundantPhis]: rewrite not complete',
+            loc: phi.place.loc,
+          });
+        }
+      }
+    }
+  }
+}
+
+function rewritePlace(
+  place: Place,
+  rewrites: Map<Identifier, Identifier>,
+): void {
+  const rewrite = rewrites.get(place.identifier);
+  if (rewrite != null) {
+    place.identifier = rewrite;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts b/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts
new file mode 100644
index 00000000000..b5f586032b0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts
@@ -0,0 +1,329 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {Environment} from '../HIR/Environment';
+import {
+  BasicBlock,
+  BlockId,
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  makeInstructionId,
+  makeType,
+  Phi,
+  Place,
+} from '../HIR/HIR';
+import {printIdentifier, printPlace} from '../HIR/PrintHIR';
+import {
+  eachTerminalSuccessor,
+  mapInstructionLValues,
+  mapInstructionOperands,
+  mapTerminalOperands,
+} from '../HIR/visitors';
+
+type IncompletePhi = {
+  oldPlace: Place;
+  newPlace: Place;
+};
+
+type State = {
+  defs: Map<Identifier, Identifier>;
+  incompletePhis: Array<IncompletePhi>;
+};
+
+class SSABuilder {
+  #states: Map<BasicBlock, State> = new Map();
+  #current: BasicBlock | null = null;
+  unsealedPreds: Map<BasicBlock, number> = new Map();
+  #blocks: Map<BlockId, BasicBlock>;
+  #env: Environment;
+  #unknown: Set<Identifier> = new Set();
+  #context: Set<Identifier> = new Set();
+
+  constructor(env: Environment, blocks: ReadonlyMap<BlockId, BasicBlock>) {
+    this.#blocks = new Map(blocks);
+    this.#env = env;
+  }
+
+  get nextSsaId(): IdentifierId {
+    return this.#env.nextIdentifierId;
+  }
+
+  defineFunction(func: HIRFunction): void {
+    for (const [id, block] of func.body.blocks) {
+      this.#blocks.set(id, block);
+    }
+  }
+
+  enter(fn: () => void): void {
+    const current = this.#current;
+    fn();
+    this.#current = current;
+  }
+
+  state(): State {
+    CompilerError.invariant(this.#current !== null, {
+      reason: 'we need to be in a block to access state!',
+      loc: GeneratedSource,
+    });
+    return this.#states.get(this.#current)!;
+  }
+
+  makeId(oldId: Identifier): Identifier {
+    return {
+      id: this.nextSsaId,
+      declarationId: oldId.declarationId,
+      name: oldId.name,
+      mutableRange: {
+        start: makeInstructionId(0),
+        end: makeInstructionId(0),
+      },
+      scope: null, // reset along w the mutable range
+      type: makeType(),
+      loc: oldId.loc,
+    };
+  }
+
+  defineContext(oldPlace: Place): Place {
+    const newPlace = this.definePlace(oldPlace);
+    this.#context.add(oldPlace.identifier);
+    return newPlace;
+  }
+
+  definePlace(oldPlace: Place): Place {
+    const oldId = oldPlace.identifier;
+    if (this.#unknown.has(oldId)) {
+      CompilerError.throwTodo({
+        reason: `[hoisting] EnterSSA: Expected identifier to be defined before being used`,
+        description: `Identifier ${printIdentifier(oldId)} is undefined`,
+        loc: oldPlace.loc,
+        suggestions: null,
+      });
+    }
+
+    // Do not redefine context references.
+    if (this.#context.has(oldId)) {
+      return this.getPlace(oldPlace);
+    }
+
+    const newId = this.makeId(oldId);
+    this.state().defs.set(oldId, newId);
+    return {
+      ...oldPlace,
+      identifier: newId,
+    };
+  }
+
+  getPlace(oldPlace: Place): Place {
+    const newId = this.getIdAt(oldPlace, this.#current!.id);
+    return {
+      ...oldPlace,
+      identifier: newId,
+    };
+  }
+
+  getIdAt(oldPlace: Place, blockId: BlockId): Identifier {
+    // check if Place is defined locally
+    const block = this.#blocks.get(blockId)!;
+    const state = this.#states.get(block)!;
+
+    if (state.defs.has(oldPlace.identifier)) {
+      return state.defs.get(oldPlace.identifier)!;
+    }
+
+    if (block.preds.size == 0) {
+      /*
+       * We're at the entry block and haven't found our defintion yet.
+       * console.log(
+       *   `Unable to find "${printPlace(
+       *     oldPlace
+       *   )}" in bb${blockId}, assuming it's a global`
+       * );
+       */
+      this.#unknown.add(oldPlace.identifier);
+      return oldPlace.identifier;
+    }
+
+    if (this.unsealedPreds.get(block)! > 0) {
+      /*
+       * We haven't visited all our predecessors, let's place an incomplete phi
+       * for now.
+       */
+      const newId = this.makeId(oldPlace.identifier);
+      state.incompletePhis.push({
+        oldPlace,
+        newPlace: {...oldPlace, identifier: newId},
+      });
+      state.defs.set(oldPlace.identifier, newId);
+      return newId;
+    }
+
+    // Only one predecessor, let's check there
+    if (block.preds.size == 1) {
+      const [pred] = block.preds;
+      const newId = this.getIdAt(oldPlace, pred);
+      state.defs.set(oldPlace.identifier, newId);
+      return newId;
+    }
+
+    // There are multiple predecessors, we may need a phi.
+    const newId = this.makeId(oldPlace.identifier);
+    /*
+     * Adding a phi may loop back to our block if there is a loop in the CFG.  We
+     * update our defs before adding the phi to terminate the recursion rather than
+     * looping infinitely.
+     */
+    state.defs.set(oldPlace.identifier, newId);
+    return this.addPhi(block, oldPlace, {...oldPlace, identifier: newId});
+  }
+
+  addPhi(block: BasicBlock, oldPlace: Place, newPlace: Place): Identifier {
+    const predDefs: Map<BlockId, Place> = new Map();
+    for (const predBlockId of block.preds) {
+      const predId = this.getIdAt(oldPlace, predBlockId);
+      predDefs.set(predBlockId, {...oldPlace, identifier: predId});
+    }
+
+    const phi: Phi = {
+      kind: 'Phi',
+      place: newPlace,
+      operands: predDefs,
+    };
+
+    block.phis.add(phi);
+    return newPlace.identifier;
+  }
+
+  fixIncompletePhis(block: BasicBlock): void {
+    const state = this.#states.get(block)!;
+    for (const phi of state.incompletePhis) {
+      this.addPhi(block, phi.oldPlace, phi.newPlace);
+    }
+  }
+
+  startBlock(block: BasicBlock): void {
+    this.#current = block;
+    this.#states.set(block, {
+      defs: new Map(),
+      incompletePhis: [],
+    });
+  }
+
+  print(): void {
+    const text: Array<string> = [];
+    for (const [block, state] of this.#states) {
+      text.push(`bb${block.id}:`);
+      for (const [oldId, newId] of state.defs) {
+        text.push(`  \$${printIdentifier(oldId)}: \$${printIdentifier(newId)}`);
+      }
+
+      for (const incompletePhi of state.incompletePhis) {
+        text.push(
+          `  iphi \$${printPlace(
+            incompletePhi.newPlace,
+          )} = \$${printPlace(incompletePhi.oldPlace)}`,
+        );
+      }
+    }
+
+    text.push(`current block: bb${this.#current?.id}`);
+    console.log(text.join('\n'));
+  }
+}
+
+export default function enterSSA(func: HIRFunction): void {
+  const builder = new SSABuilder(func.env, func.body.blocks);
+  enterSSAImpl(func, builder, func.body.entry);
+}
+
+function enterSSAImpl(
+  func: HIRFunction,
+  builder: SSABuilder,
+  rootEntry: BlockId,
+): void {
+  const visitedBlocks: Set<BasicBlock> = new Set();
+  for (const [blockId, block] of func.body.blocks) {
+    CompilerError.invariant(!visitedBlocks.has(block), {
+      reason: `found a cycle! visiting bb${block.id} again`,
+      loc: GeneratedSource,
+    });
+
+    visitedBlocks.add(block);
+
+    builder.startBlock(block);
+
+    if (blockId === rootEntry) {
+      // NOTE: func.context should be empty for the root function
+      CompilerError.invariant(func.context.length === 0, {
+        reason: `Expected function context to be empty for outer function declarations`,
+        loc: func.loc,
+      });
+      func.params = func.params.map(param => {
+        if (param.kind === 'Identifier') {
+          return builder.definePlace(param);
+        } else {
+          return {
+            kind: 'Spread',
+            place: builder.definePlace(param.place),
+          };
+        }
+      });
+    }
+
+    for (const instr of block.instructions) {
+      mapInstructionOperands(instr, place => builder.getPlace(place));
+      mapInstructionLValues(instr, lvalue => builder.definePlace(lvalue));
+
+      if (
+        instr.value.kind === 'FunctionExpression' ||
+        instr.value.kind === 'ObjectMethod'
+      ) {
+        const loweredFunc = instr.value.loweredFunc.func;
+        const entry = loweredFunc.body.blocks.get(loweredFunc.body.entry)!;
+        CompilerError.invariant(entry.preds.size === 0, {
+          reason:
+            'Expected function expression entry block to have zero predecessors',
+          loc: GeneratedSource,
+        });
+        entry.preds.add(blockId);
+        builder.defineFunction(loweredFunc);
+        builder.enter(() => {
+          loweredFunc.params = loweredFunc.params.map(param => {
+            if (param.kind === 'Identifier') {
+              return builder.definePlace(param);
+            } else {
+              return {
+                kind: 'Spread',
+                place: builder.definePlace(param.place),
+              };
+            }
+          });
+          enterSSAImpl(loweredFunc, builder, rootEntry);
+        });
+        entry.preds.clear();
+      }
+    }
+
+    mapTerminalOperands(block.terminal, place => builder.getPlace(place));
+    for (const outputId of eachTerminalSuccessor(block.terminal)) {
+      const output = func.body.blocks.get(outputId)!;
+      let count;
+      if (builder.unsealedPreds.has(output)) {
+        count = builder.unsealedPreds.get(output)! - 1;
+      } else {
+        count = output.preds.size - 1;
+      }
+      builder.unsealedPreds.set(output, count);
+
+      if (count === 0 && visitedBlocks.has(output)) {
+        builder.fixIncompletePhis(output);
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/SSA/RewriteInstructionKindsBasedOnReassignment.ts b/compiler/packages/babel-plugin-react-compiler/src/SSA/RewriteInstructionKindsBasedOnReassignment.ts
new file mode 100644
index 00000000000..5c4fb240b6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/SSA/RewriteInstructionKindsBasedOnReassignment.ts
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {
+  DeclarationId,
+  GeneratedSource,
+  HIRFunction,
+  InstructionKind,
+  LValue,
+  LValuePattern,
+  Place,
+} from '../HIR/HIR';
+import {printPlace} from '../HIR/PrintHIR';
+import {eachPatternOperand} from '../HIR/visitors';
+
+/**
+ * This pass rewrites the InstructionKind of instructions which declare/assign variables,
+ * converting the first declaration to a Const/Let depending on whether it is subsequently
+ * reassigned, and ensuring that subsequent reassignments are marked as a Reassign. Note
+ * that declarations which were const in the original program cannot become `let`, but the
+ * inverse is not true: a `let` which was reassigned in the source may be converted to a
+ * `const` if the reassignment is not used and was removed by dead code elimination.
+ *
+ * NOTE: this is a subset of the operations previously performed by the LeaveSSA pass.
+ */
+export function rewriteInstructionKindsBasedOnReassignment(
+  fn: HIRFunction,
+): void {
+  const declarations = new Map<DeclarationId, LValue | LValuePattern>();
+  for (const param of fn.params) {
+    let place: Place = param.kind === 'Identifier' ? param : param.place;
+    if (place.identifier.name !== null) {
+      declarations.set(place.identifier.declarationId, {
+        kind: InstructionKind.Let,
+        place,
+      });
+    }
+  }
+  for (const place of fn.context) {
+    if (place.identifier.name !== null) {
+      declarations.set(place.identifier.declarationId, {
+        kind: InstructionKind.Let,
+        place,
+      });
+    }
+  }
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'DeclareLocal': {
+          const lvalue = value.lvalue;
+          CompilerError.invariant(
+            !declarations.has(lvalue.place.identifier.declarationId),
+            {
+              reason: `Expected variable not to be defined prior to declaration`,
+              description: `${printPlace(lvalue.place)} was already defined`,
+              loc: lvalue.place.loc,
+            },
+          );
+          declarations.set(lvalue.place.identifier.declarationId, lvalue);
+          break;
+        }
+        case 'StoreLocal': {
+          const lvalue = value.lvalue;
+          if (lvalue.place.identifier.name !== null) {
+            const declaration = declarations.get(
+              lvalue.place.identifier.declarationId,
+            );
+            if (declaration === undefined) {
+              CompilerError.invariant(
+                !declarations.has(lvalue.place.identifier.declarationId),
+                {
+                  reason: `Expected variable not to be defined prior to declaration`,
+                  description: `${printPlace(lvalue.place)} was already defined`,
+                  loc: lvalue.place.loc,
+                },
+              );
+              declarations.set(lvalue.place.identifier.declarationId, lvalue);
+              lvalue.kind = InstructionKind.Const;
+            } else {
+              declaration.kind = InstructionKind.Let;
+              lvalue.kind = InstructionKind.Reassign;
+            }
+          }
+          break;
+        }
+        case 'Destructure': {
+          const lvalue = value.lvalue;
+          let kind: InstructionKind | null = null;
+          for (const place of eachPatternOperand(lvalue.pattern)) {
+            if (place.identifier.name === null) {
+              CompilerError.invariant(
+                kind === null || kind === InstructionKind.Const,
+                {
+                  reason: `Expected consistent kind for destructuring`,
+                  description: `other places were \`${kind}\` but '${printPlace(
+                    place,
+                  )}' is const`,
+                  loc: place.loc,
+                },
+              );
+              kind = InstructionKind.Const;
+            } else {
+              const declaration = declarations.get(
+                place.identifier.declarationId,
+              );
+              if (declaration === undefined) {
+                CompilerError.invariant(block.kind !== 'value', {
+                  reason: `TODO: Handle reassignment in a value block where the original declaration was removed by dead code elimination (DCE)`,
+                  loc: place.loc,
+                });
+                declarations.set(place.identifier.declarationId, lvalue);
+                CompilerError.invariant(
+                  kind === null || kind === InstructionKind.Const,
+                  {
+                    reason: `Expected consistent kind for destructuring`,
+                    description: `Other places were \`${kind}\` but '${printPlace(
+                      place,
+                    )}' is const`,
+                    loc: place.loc,
+                  },
+                );
+                kind = InstructionKind.Const;
+              } else {
+                CompilerError.invariant(
+                  kind === null || kind === InstructionKind.Reassign,
+                  {
+                    reason: `Expected consistent kind for destructuring`,
+                    description: `Other places were \`${kind}\` but '${printPlace(
+                      place,
+                    )}' is reassigned`,
+                    loc: place.loc,
+                  },
+                );
+                kind = InstructionKind.Reassign;
+                declaration.kind = InstructionKind.Let;
+              }
+            }
+          }
+          CompilerError.invariant(kind !== null, {
+            reason: 'Expected at least one operand',
+            loc: GeneratedSource,
+          });
+          lvalue.kind = kind;
+          break;
+        }
+        case 'PostfixUpdate':
+        case 'PrefixUpdate': {
+          const lvalue = value.lvalue;
+          const declaration = declarations.get(lvalue.identifier.declarationId);
+          CompilerError.invariant(declaration !== undefined, {
+            reason: `Expected variable to have been defined`,
+            description: `No declaration for ${printPlace(lvalue)}`,
+            loc: lvalue.loc,
+          });
+          declaration.kind = InstructionKind.Let;
+          break;
+        }
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/SSA/index.ts b/compiler/packages/babel-plugin-react-compiler/src/SSA/index.ts
new file mode 100644
index 00000000000..9ce9f5b21d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/SSA/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {eliminateRedundantPhi} from './EliminateRedundantPhi';
+export {default as enterSSA} from './EnterSSA';
+export {rewriteInstructionKindsBasedOnReassignment} from './RewriteInstructionKindsBasedOnReassignment';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Transform/NameAnonymousFunctions.ts b/compiler/packages/babel-plugin-react-compiler/src/Transform/NameAnonymousFunctions.ts
new file mode 100644
index 00000000000..23f9ed729f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Transform/NameAnonymousFunctions.ts
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  FunctionExpression,
+  getHookKind,
+  HIRFunction,
+  IdentifierId,
+} from '../HIR';
+
+export function nameAnonymousFunctions(fn: HIRFunction): void {
+  if (fn.id == null) {
+    return;
+  }
+  const parentName = fn.id;
+  const functions = nameAnonymousFunctionsImpl(fn);
+  function visit(node: Node, prefix: string): void {
+    if (node.generatedName != null && node.fn.nameHint == null) {
+      /**
+       * Note that we don't generate a name for functions that already had one,
+       * so we'll only add the prefix to anonymous functions regardless of
+       * nesting depth.
+       */
+      const name = `${prefix}${node.generatedName}]`;
+      node.fn.nameHint = name;
+      node.fn.loweredFunc.func.nameHint = name;
+    }
+    /**
+     * Whether or not we generated a name for the function at this node,
+     * traverse into its nested functions to assign them names
+     */
+    const nextPrefix = `${prefix}${node.generatedName ?? node.fn.name ?? '<anonymous>'} > `;
+    for (const inner of node.inner) {
+      visit(inner, nextPrefix);
+    }
+  }
+  for (const node of functions) {
+    visit(node, `${parentName}[`);
+  }
+}
+
+type Node = {
+  fn: FunctionExpression;
+  generatedName: string | null;
+  inner: Array<Node>;
+};
+
+function nameAnonymousFunctionsImpl(fn: HIRFunction): Array<Node> {
+  // Functions that we track to generate names for
+  const functions: Map<IdentifierId, Node> = new Map();
+  // Tracks temporaries that read from variables/globals/properties
+  const names: Map<IdentifierId, string> = new Map();
+  // Tracks all function nodes to bubble up for later renaming
+  const nodes: Array<Node> = [];
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'LoadGlobal': {
+          names.set(lvalue.identifier.id, value.binding.name);
+          break;
+        }
+        case 'LoadContext':
+        case 'LoadLocal': {
+          const name = value.place.identifier.name;
+          if (name != null && name.kind === 'named') {
+            names.set(lvalue.identifier.id, name.value);
+          }
+          const func = functions.get(value.place.identifier.id);
+          if (func != null) {
+            functions.set(lvalue.identifier.id, func);
+          }
+          break;
+        }
+        case 'PropertyLoad': {
+          const objectName = names.get(value.object.identifier.id);
+          if (objectName != null) {
+            names.set(
+              lvalue.identifier.id,
+              `${objectName}.${String(value.property)}`,
+            );
+          }
+          break;
+        }
+        case 'FunctionExpression': {
+          const inner = nameAnonymousFunctionsImpl(value.loweredFunc.func);
+          const node: Node = {
+            fn: value,
+            generatedName: null,
+            inner,
+          };
+          /**
+           * Bubble-up all functions, even if they're named, so that we can
+           * later generate names for any inner anonymous functions
+           */
+          nodes.push(node);
+          if (value.name == null) {
+            // but only generate names for anonymous functions
+            functions.set(lvalue.identifier.id, node);
+          }
+          break;
+        }
+        case 'StoreContext':
+        case 'StoreLocal': {
+          const node = functions.get(value.value.identifier.id);
+          const variableName = value.lvalue.place.identifier.name;
+          if (
+            node != null &&
+            node.generatedName == null &&
+            variableName != null &&
+            variableName.kind === 'named'
+          ) {
+            node.generatedName = variableName.value;
+            functions.delete(value.value.identifier.id);
+          }
+          break;
+        }
+        case 'CallExpression':
+        case 'MethodCall': {
+          const callee =
+            value.kind === 'MethodCall' ? value.property : value.callee;
+          const hookKind = getHookKind(fn.env, callee.identifier);
+          let calleeName: string | null = null;
+          if (hookKind != null && hookKind !== 'Custom') {
+            calleeName = hookKind;
+          } else {
+            calleeName = names.get(callee.identifier.id) ?? '(anonymous)';
+          }
+          let fnArgCount = 0;
+          for (const arg of value.args) {
+            if (arg.kind === 'Identifier' && functions.has(arg.identifier.id)) {
+              fnArgCount++;
+            }
+          }
+          for (let i = 0; i < value.args.length; i++) {
+            const arg = value.args[i]!;
+            if (arg.kind === 'Spread') {
+              continue;
+            }
+            const node = functions.get(arg.identifier.id);
+            if (node != null && node.generatedName == null) {
+              const generatedName =
+                fnArgCount > 1 ? `${calleeName}(arg${i})` : `${calleeName}()`;
+              node.generatedName = generatedName;
+              functions.delete(arg.identifier.id);
+            }
+          }
+          break;
+        }
+        case 'JsxExpression': {
+          for (const attr of value.props) {
+            if (attr.kind === 'JsxSpreadAttribute') {
+              continue;
+            }
+            const node = functions.get(attr.place.identifier.id);
+            if (node != null && node.generatedName == null) {
+              const elementName =
+                value.tag.kind === 'BuiltinTag'
+                  ? value.tag.name
+                  : (names.get(value.tag.identifier.id) ?? null);
+              const propName =
+                elementName == null
+                  ? attr.name
+                  : `<${elementName}>.${attr.name}`;
+              node.generatedName = `${propName}`;
+              functions.delete(attr.place.identifier.id);
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+  return nodes;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts b/compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts
new file mode 100644
index 00000000000..6793df5710b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts
@@ -0,0 +1,739 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, CompilerErrorDetailOptions, SourceLocation} from '..';
+import {
+  ArrayExpression,
+  CallExpression,
+  Effect,
+  Environment,
+  FunctionExpression,
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  Instruction,
+  InstructionId,
+  InstructionKind,
+  InstructionValue,
+  isUseEffectHookType,
+  LoadLocal,
+  makeInstructionId,
+  NonLocalImportSpecifier,
+  Place,
+  promoteTemporary,
+} from '../HIR';
+import {createTemporaryPlace, markInstructionIds} from '../HIR/HIRBuilder';
+import {getOrInsertWith} from '../Utils/utils';
+import {
+  BuiltInFireFunctionId,
+  BuiltInFireId,
+  DefaultNonmutatingHook,
+} from '../HIR/ObjectShape';
+import {eachInstructionOperand} from '../HIR/visitors';
+import {printSourceLocationLine} from '../HIR/PrintHIR';
+import {USE_FIRE_FUNCTION_NAME} from '../HIR/Environment';
+import {ErrorCategory} from '../CompilerError';
+
+/*
+ * TODO(jmbrown):
+ *   - traverse object methods
+ *   - method calls
+ *   - React.useEffect calls
+ */
+
+const CANNOT_COMPILE_FIRE = 'Cannot compile `fire`';
+
+export function transformFire(fn: HIRFunction): void {
+  const context = new Context(fn.env);
+  replaceFireFunctions(fn, context);
+  if (!context.hasErrors()) {
+    ensureNoMoreFireUses(fn, context);
+  }
+  context.throwIfErrorsFound();
+}
+
+function replaceFireFunctions(fn: HIRFunction, context: Context): void {
+  let importedUseFire: NonLocalImportSpecifier | null = null;
+  let hasRewrite = false;
+  for (const [, block] of fn.body.blocks) {
+    const rewriteInstrs = new Map<InstructionId, Array<Instruction>>();
+    const deleteInstrs = new Set<InstructionId>();
+    for (const instr of block.instructions) {
+      const {value, lvalue} = instr;
+      if (
+        value.kind === 'CallExpression' &&
+        isUseEffectHookType(value.callee.identifier) &&
+        value.args.length > 0 &&
+        value.args[0].kind === 'Identifier'
+      ) {
+        const lambda = context.getFunctionExpression(
+          value.args[0].identifier.id,
+        );
+        if (lambda != null) {
+          const capturedCallees =
+            visitFunctionExpressionAndPropagateFireDependencies(
+              lambda,
+              context,
+              true,
+            );
+
+          // Add useFire calls for all fire calls in found in the lambda
+          const newInstrs = [];
+          for (const [
+            fireCalleePlace,
+            fireCalleeInfo,
+          ] of capturedCallees.entries()) {
+            if (!context.hasCalleeWithInsertedFire(fireCalleePlace)) {
+              context.addCalleeWithInsertedFire(fireCalleePlace);
+
+              importedUseFire ??= fn.env.programContext.addImportSpecifier({
+                source: fn.env.programContext.reactRuntimeModule,
+                importSpecifierName: USE_FIRE_FUNCTION_NAME,
+              });
+              const loadUseFireInstr = makeLoadUseFireInstruction(
+                fn.env,
+                importedUseFire,
+              );
+              const loadFireCalleeInstr = makeLoadFireCalleeInstruction(
+                fn.env,
+                fireCalleeInfo.capturedCalleeIdentifier,
+              );
+              const callUseFireInstr = makeCallUseFireInstruction(
+                fn.env,
+                loadUseFireInstr.lvalue,
+                loadFireCalleeInstr.lvalue,
+              );
+              const storeUseFireInstr = makeStoreUseFireInstruction(
+                fn.env,
+                callUseFireInstr.lvalue,
+                fireCalleeInfo.fireFunctionBinding,
+              );
+              newInstrs.push(
+                loadUseFireInstr,
+                loadFireCalleeInstr,
+                callUseFireInstr,
+                storeUseFireInstr,
+              );
+
+              // We insert all of these instructions before the useEffect is loaded
+              const loadUseEffectInstrId = context.getLoadGlobalInstrId(
+                value.callee.identifier.id,
+              );
+              if (loadUseEffectInstrId == null) {
+                context.pushError({
+                  loc: value.loc,
+                  description: null,
+                  category: ErrorCategory.Invariant,
+                  reason: '[InsertFire] No LoadGlobal found for useEffect call',
+                  suggestions: null,
+                });
+                continue;
+              }
+              rewriteInstrs.set(loadUseEffectInstrId, newInstrs);
+            }
+          }
+          ensureNoRemainingCalleeCaptures(
+            lambda.loweredFunc.func,
+            context,
+            capturedCallees,
+          );
+
+          if (
+            value.args.length > 1 &&
+            value.args[1] != null &&
+            value.args[1].kind === 'Identifier'
+          ) {
+            const depArray = value.args[1];
+            const depArrayExpression = context.getArrayExpression(
+              depArray.identifier.id,
+            );
+            if (depArrayExpression != null) {
+              for (const dependency of depArrayExpression.elements) {
+                if (dependency.kind === 'Identifier') {
+                  const loadOfDependency = context.getLoadLocalInstr(
+                    dependency.identifier.id,
+                  );
+                  if (loadOfDependency != null) {
+                    const replacedDepArrayItem = capturedCallees.get(
+                      loadOfDependency.place.identifier.id,
+                    );
+                    if (replacedDepArrayItem != null) {
+                      loadOfDependency.place =
+                        replacedDepArrayItem.fireFunctionBinding;
+                    }
+                  }
+                }
+              }
+            } else {
+              context.pushError({
+                loc: value.args[1].loc,
+                description:
+                  'You must use an array literal for an effect dependency array when that effect uses `fire()`',
+                category: ErrorCategory.Fire,
+                reason: CANNOT_COMPILE_FIRE,
+                suggestions: null,
+              });
+            }
+          } else if (value.args.length > 1 && value.args[1].kind === 'Spread') {
+            context.pushError({
+              loc: value.args[1].place.loc,
+              description:
+                'You must use an array literal for an effect dependency array when that effect uses `fire()`',
+              category: ErrorCategory.Fire,
+              reason: CANNOT_COMPILE_FIRE,
+              suggestions: null,
+            });
+          }
+        }
+      } else if (
+        value.kind === 'CallExpression' &&
+        value.callee.identifier.type.kind === 'Function' &&
+        value.callee.identifier.type.shapeId === BuiltInFireId &&
+        context.inUseEffectLambda()
+      ) {
+        /*
+         * We found a fire(callExpr()) call. We remove the `fire()` call and replace the callExpr()
+         * with a freshly generated fire function binding. We'll insert the useFire call before the
+         * useEffect call, which happens in the CallExpression (useEffect) case above.
+         */
+
+        /*
+         * We only allow fire to be called with a CallExpression: `fire(f())`
+         * TODO: add support for method calls: `fire(this.method())`
+         */
+        if (value.args.length === 1 && value.args[0].kind === 'Identifier') {
+          const callExpr = context.getCallExpression(
+            value.args[0].identifier.id,
+          );
+
+          if (callExpr != null) {
+            const calleeId = callExpr.callee.identifier.id;
+            const loadLocal = context.getLoadLocalInstr(calleeId);
+            if (loadLocal == null) {
+              context.pushError({
+                loc: value.loc,
+                description: null,
+                category: ErrorCategory.Invariant,
+                reason:
+                  '[InsertFire] No loadLocal found for fire call argument',
+                suggestions: null,
+              });
+              continue;
+            }
+
+            const fireFunctionBinding =
+              context.getOrGenerateFireFunctionBinding(
+                loadLocal.place,
+                value.loc,
+              );
+
+            loadLocal.place = {...fireFunctionBinding};
+
+            // Delete the fire call expression
+            deleteInstrs.add(instr.id);
+          } else {
+            context.pushError({
+              loc: value.loc,
+              description:
+                '`fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed',
+              category: ErrorCategory.Fire,
+              reason: CANNOT_COMPILE_FIRE,
+              suggestions: null,
+            });
+          }
+        } else {
+          let description: string =
+            'fire() can only take in a single call expression as an argument';
+          if (value.args.length === 0) {
+            description += ' but received none';
+          } else if (value.args.length > 1) {
+            description += ' but received multiple arguments';
+          } else if (value.args[0].kind === 'Spread') {
+            description += ' but received a spread argument';
+          }
+          context.pushError({
+            loc: value.loc,
+            description,
+            category: ErrorCategory.Fire,
+            reason: CANNOT_COMPILE_FIRE,
+            suggestions: null,
+          });
+        }
+      } else if (value.kind === 'CallExpression') {
+        context.addCallExpression(lvalue.identifier.id, value);
+      } else if (
+        value.kind === 'FunctionExpression' &&
+        context.inUseEffectLambda()
+      ) {
+        visitFunctionExpressionAndPropagateFireDependencies(
+          value,
+          context,
+          false,
+        );
+      } else if (value.kind === 'FunctionExpression') {
+        context.addFunctionExpression(lvalue.identifier.id, value);
+      } else if (value.kind === 'LoadLocal') {
+        context.addLoadLocalInstr(lvalue.identifier.id, value);
+      } else if (
+        value.kind === 'LoadGlobal' &&
+        value.binding.kind === 'ImportSpecifier' &&
+        value.binding.module === 'react' &&
+        value.binding.imported === 'fire' &&
+        context.inUseEffectLambda()
+      ) {
+        deleteInstrs.add(instr.id);
+      } else if (value.kind === 'LoadGlobal') {
+        context.addLoadGlobalInstrId(lvalue.identifier.id, instr.id);
+      } else if (value.kind === 'ArrayExpression') {
+        context.addArrayExpression(lvalue.identifier.id, value);
+      }
+    }
+    block.instructions = rewriteInstructions(rewriteInstrs, block.instructions);
+    block.instructions = deleteInstructions(deleteInstrs, block.instructions);
+
+    if (rewriteInstrs.size > 0 || deleteInstrs.size > 0) {
+      hasRewrite = true;
+      fn.env.hasFireRewrite = true;
+    }
+  }
+
+  if (hasRewrite) {
+    markInstructionIds(fn.body);
+  }
+}
+
+/**
+ * Traverses a function expression to find fire calls fire(foo()) and replaces them with
+ * fireFoo().
+ *
+ * When a function captures a fire call we need to update its context to reflect the newly created
+ * fire function bindings and update the LoadLocals referenced by the function's dependencies.
+ *
+ * @param isUseEffect is necessary so we can keep track of when we should additionally insert
+ * useFire hooks calls.
+ */
+function visitFunctionExpressionAndPropagateFireDependencies(
+  fnExpr: FunctionExpression,
+  context: Context,
+  enteringUseEffect: boolean,
+): FireCalleesToFireFunctionBinding {
+  let withScope = enteringUseEffect
+    ? context.withUseEffectLambdaScope.bind(context)
+    : context.withFunctionScope.bind(context);
+
+  const calleesCapturedByFnExpression = withScope(() =>
+    replaceFireFunctions(fnExpr.loweredFunc.func, context),
+  );
+
+  // For each replaced callee, update the context of the function expression to track it
+  for (
+    let contextIdx = 0;
+    contextIdx < fnExpr.loweredFunc.func.context.length;
+    contextIdx++
+  ) {
+    const contextItem = fnExpr.loweredFunc.func.context[contextIdx];
+    const replacedCallee = calleesCapturedByFnExpression.get(
+      contextItem.identifier.id,
+    );
+    if (replacedCallee != null) {
+      fnExpr.loweredFunc.func.context[contextIdx] = {
+        ...replacedCallee.fireFunctionBinding,
+      };
+    }
+  }
+
+  context.mergeCalleesFromInnerScope(calleesCapturedByFnExpression);
+
+  return calleesCapturedByFnExpression;
+}
+
+/*
+ * eachInstructionOperand is not sufficient for our cases because:
+ *  1. fire is a global, which will not appear
+ *  2. The HIR may be malformed, so can't rely on function deps and must
+ *     traverse the whole function.
+ */
+function* eachReachablePlace(fn: HIRFunction): Iterable<Place> {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'FunctionExpression' ||
+        instr.value.kind === 'ObjectMethod'
+      ) {
+        yield* eachReachablePlace(instr.value.loweredFunc.func);
+      } else {
+        yield* eachInstructionOperand(instr);
+      }
+    }
+  }
+}
+
+function ensureNoRemainingCalleeCaptures(
+  fn: HIRFunction,
+  context: Context,
+  capturedCallees: FireCalleesToFireFunctionBinding,
+): void {
+  for (const place of eachReachablePlace(fn)) {
+    const calleeInfo = capturedCallees.get(place.identifier.id);
+    if (calleeInfo != null) {
+      const calleeName =
+        calleeInfo.capturedCalleeIdentifier.name?.kind === 'named'
+          ? calleeInfo.capturedCalleeIdentifier.name.value
+          : '<unknown>';
+      context.pushError({
+        loc: place.loc,
+        description: `All uses of ${calleeName} must be either used with a fire() call in \
+this effect or not used with a fire() call at all. ${calleeName} was used with fire() on line \
+${printSourceLocationLine(calleeInfo.fireLoc)} in this effect`,
+        category: ErrorCategory.Fire,
+        reason: CANNOT_COMPILE_FIRE,
+        suggestions: null,
+      });
+    }
+  }
+}
+
+function ensureNoMoreFireUses(fn: HIRFunction, context: Context): void {
+  for (const place of eachReachablePlace(fn)) {
+    if (
+      place.identifier.type.kind === 'Function' &&
+      place.identifier.type.shapeId === BuiltInFireId
+    ) {
+      context.pushError({
+        loc: place.identifier.loc,
+        description: 'Cannot use `fire` outside of a useEffect function',
+        category: ErrorCategory.Fire,
+        reason: CANNOT_COMPILE_FIRE,
+        suggestions: null,
+      });
+    }
+  }
+}
+
+function makeLoadUseFireInstruction(
+  env: Environment,
+  importedLoadUseFire: NonLocalImportSpecifier,
+): Instruction {
+  const useFirePlace = createTemporaryPlace(env, GeneratedSource);
+  useFirePlace.effect = Effect.Read;
+  useFirePlace.identifier.type = DefaultNonmutatingHook;
+  const instrValue: InstructionValue = {
+    kind: 'LoadGlobal',
+    binding: {...importedLoadUseFire},
+    loc: GeneratedSource,
+  };
+  return {
+    id: makeInstructionId(0),
+    value: instrValue,
+    lvalue: {...useFirePlace},
+    loc: GeneratedSource,
+    effects: null,
+  };
+}
+
+function makeLoadFireCalleeInstruction(
+  env: Environment,
+  fireCalleeIdentifier: Identifier,
+): Instruction {
+  const loadedFireCallee = createTemporaryPlace(env, GeneratedSource);
+  const fireCallee: Place = {
+    kind: 'Identifier',
+    identifier: fireCalleeIdentifier,
+    reactive: false,
+    effect: Effect.Unknown,
+    loc: fireCalleeIdentifier.loc,
+  };
+  return {
+    id: makeInstructionId(0),
+    value: {
+      kind: 'LoadLocal',
+      loc: GeneratedSource,
+      place: {...fireCallee},
+    },
+    lvalue: {...loadedFireCallee},
+    loc: GeneratedSource,
+    effects: null,
+  };
+}
+
+function makeCallUseFireInstruction(
+  env: Environment,
+  useFirePlace: Place,
+  argPlace: Place,
+): Instruction {
+  const useFireCallResultPlace = createTemporaryPlace(env, GeneratedSource);
+  useFireCallResultPlace.effect = Effect.Read;
+
+  const useFireCall: CallExpression = {
+    kind: 'CallExpression',
+    callee: {...useFirePlace},
+    args: [argPlace],
+    loc: GeneratedSource,
+  };
+
+  return {
+    id: makeInstructionId(0),
+    value: useFireCall,
+    lvalue: {...useFireCallResultPlace},
+    loc: GeneratedSource,
+    effects: null,
+  };
+}
+
+function makeStoreUseFireInstruction(
+  env: Environment,
+  useFireCallResultPlace: Place,
+  fireFunctionBindingPlace: Place,
+): Instruction {
+  promoteTemporary(fireFunctionBindingPlace.identifier);
+
+  const fireFunctionBindingLValuePlace = createTemporaryPlace(
+    env,
+    GeneratedSource,
+  );
+  return {
+    id: makeInstructionId(0),
+    value: {
+      kind: 'StoreLocal',
+      lvalue: {
+        kind: InstructionKind.Const,
+        place: {...fireFunctionBindingPlace},
+      },
+      value: {...useFireCallResultPlace},
+      type: null,
+      loc: GeneratedSource,
+    },
+    lvalue: fireFunctionBindingLValuePlace,
+    loc: GeneratedSource,
+    effects: null,
+  };
+}
+
+type FireCalleesToFireFunctionBinding = Map<
+  IdentifierId,
+  {
+    fireFunctionBinding: Place;
+    capturedCalleeIdentifier: Identifier;
+    fireLoc: SourceLocation;
+  }
+>;
+
+class Context {
+  #env: Environment;
+
+  #errors: CompilerError = new CompilerError();
+
+  /*
+   * Used to look up the call expression passed to a `fire(callExpr())`. Gives back
+   * the `callExpr()`.
+   */
+  #callExpressions = new Map<IdentifierId, CallExpression>();
+
+  /*
+   * We keep track of function expressions so that we can traverse them when
+   * we encounter a lambda passed to a useEffect call
+   */
+  #functionExpressions = new Map<IdentifierId, FunctionExpression>();
+
+  /*
+   * Mapping from lvalue ids to the LoadLocal for it. Allows us to replace dependency LoadLocals.
+   */
+  #loadLocals = new Map<IdentifierId, LoadLocal>();
+
+  /*
+   * Maps all of the fire callees found in a component/hook to the generated fire function places
+   * we create for them. Allows us to reuse already-inserted useFire results
+   */
+  #fireCalleesToFireFunctions: Map<IdentifierId, Place> = new Map();
+
+  /*
+   * The callees for which we have already created fire bindings. Used to skip inserting a new
+   * useFire call for a fire callee if one has already been created.
+   */
+  #calleesWithInsertedFire = new Set<IdentifierId>();
+
+  /*
+   * A mapping from fire callees to the created fire function bindings that are reachable from this
+   * scope.
+   *
+   * We additionally keep track of the captured callee identifier so that we can properly reference
+   * it in the place where we LoadLocal the callee as an argument to useFire.
+   */
+  #capturedCalleeIdentifierIds: FireCalleesToFireFunctionBinding = new Map();
+
+  /*
+   * We only transform fire calls if we're syntactically within a useEffect lambda (for now)
+   */
+  #inUseEffectLambda = false;
+
+  /*
+   * Mapping from useEffect callee identifier ids to the instruction id of the
+   * load global instruction for the useEffect call. We use this to insert the
+   * useFire calls before the useEffect call
+   */
+  #loadGlobalInstructionIds = new Map<IdentifierId, InstructionId>();
+
+  constructor(env: Environment) {
+    this.#env = env;
+  }
+
+  /*
+   * We keep track of array expressions so we can rewrite dependency arrays passed to useEffect
+   * to use the fire functions
+   */
+  #arrayExpressions = new Map<IdentifierId, ArrayExpression>();
+
+  pushError(error: CompilerErrorDetailOptions): void {
+    this.#errors.push(error);
+  }
+
+  withFunctionScope(fn: () => void): FireCalleesToFireFunctionBinding {
+    fn();
+    return this.#capturedCalleeIdentifierIds;
+  }
+
+  withUseEffectLambdaScope(fn: () => void): FireCalleesToFireFunctionBinding {
+    const capturedCalleeIdentifierIds = this.#capturedCalleeIdentifierIds;
+    const inUseEffectLambda = this.#inUseEffectLambda;
+
+    this.#capturedCalleeIdentifierIds = new Map();
+    this.#inUseEffectLambda = true;
+
+    const resultCapturedCalleeIdentifierIds = this.withFunctionScope(fn);
+
+    this.#capturedCalleeIdentifierIds = capturedCalleeIdentifierIds;
+    this.#inUseEffectLambda = inUseEffectLambda;
+
+    return resultCapturedCalleeIdentifierIds;
+  }
+
+  addCallExpression(id: IdentifierId, callExpr: CallExpression): void {
+    this.#callExpressions.set(id, callExpr);
+  }
+
+  getCallExpression(id: IdentifierId): CallExpression | undefined {
+    return this.#callExpressions.get(id);
+  }
+
+  addLoadLocalInstr(id: IdentifierId, loadLocal: LoadLocal): void {
+    this.#loadLocals.set(id, loadLocal);
+  }
+
+  getLoadLocalInstr(id: IdentifierId): LoadLocal | undefined {
+    return this.#loadLocals.get(id);
+  }
+  getOrGenerateFireFunctionBinding(
+    callee: Place,
+    fireLoc: SourceLocation,
+  ): Place {
+    const fireFunctionBinding = getOrInsertWith(
+      this.#fireCalleesToFireFunctions,
+      callee.identifier.id,
+      () => createTemporaryPlace(this.#env, GeneratedSource),
+    );
+
+    fireFunctionBinding.identifier.type = {
+      kind: 'Function',
+      shapeId: BuiltInFireFunctionId,
+      return: {kind: 'Poly'},
+      isConstructor: false,
+    };
+
+    this.#capturedCalleeIdentifierIds.set(callee.identifier.id, {
+      fireFunctionBinding,
+      capturedCalleeIdentifier: callee.identifier,
+      fireLoc,
+    });
+
+    return fireFunctionBinding;
+  }
+
+  mergeCalleesFromInnerScope(
+    innerCallees: FireCalleesToFireFunctionBinding,
+  ): void {
+    for (const [id, calleeInfo] of innerCallees.entries()) {
+      this.#capturedCalleeIdentifierIds.set(id, calleeInfo);
+    }
+  }
+
+  addCalleeWithInsertedFire(id: IdentifierId): void {
+    this.#calleesWithInsertedFire.add(id);
+  }
+
+  hasCalleeWithInsertedFire(id: IdentifierId): boolean {
+    return this.#calleesWithInsertedFire.has(id);
+  }
+
+  inUseEffectLambda(): boolean {
+    return this.#inUseEffectLambda;
+  }
+
+  addFunctionExpression(id: IdentifierId, fn: FunctionExpression): void {
+    this.#functionExpressions.set(id, fn);
+  }
+
+  getFunctionExpression(id: IdentifierId): FunctionExpression | undefined {
+    return this.#functionExpressions.get(id);
+  }
+
+  addLoadGlobalInstrId(id: IdentifierId, instrId: InstructionId): void {
+    this.#loadGlobalInstructionIds.set(id, instrId);
+  }
+
+  getLoadGlobalInstrId(id: IdentifierId): InstructionId | undefined {
+    return this.#loadGlobalInstructionIds.get(id);
+  }
+
+  addArrayExpression(id: IdentifierId, array: ArrayExpression): void {
+    this.#arrayExpressions.set(id, array);
+  }
+
+  getArrayExpression(id: IdentifierId): ArrayExpression | undefined {
+    return this.#arrayExpressions.get(id);
+  }
+
+  hasErrors(): boolean {
+    return this.#errors.hasAnyErrors();
+  }
+
+  throwIfErrorsFound(): void {
+    if (this.hasErrors()) throw this.#errors;
+  }
+}
+
+function deleteInstructions(
+  deleteInstrs: Set<InstructionId>,
+  instructions: Array<Instruction>,
+): Array<Instruction> {
+  if (deleteInstrs.size > 0) {
+    const newInstrs = instructions.filter(instr => !deleteInstrs.has(instr.id));
+    return newInstrs;
+  }
+  return instructions;
+}
+
+function rewriteInstructions(
+  rewriteInstrs: Map<InstructionId, Array<Instruction>>,
+  instructions: Array<Instruction>,
+): Array<Instruction> {
+  if (rewriteInstrs.size > 0) {
+    const newInstrs = [];
+    for (const instr of instructions) {
+      const newInstrsAtId = rewriteInstrs.get(instr.id);
+      if (newInstrsAtId != null) {
+        newInstrs.push(...newInstrsAtId, instr);
+      } else {
+        newInstrs.push(instr);
+      }
+    }
+
+    return newInstrs;
+  }
+
+  return instructions;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Transform/index.ts b/compiler/packages/babel-plugin-react-compiler/src/Transform/index.ts
new file mode 100644
index 00000000000..4f142104f21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Transform/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {transformFire} from './TransformFire';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts
new file mode 100644
index 00000000000..50fdfb356cd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts
@@ -0,0 +1,880 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {CompilerError} from '../CompilerError';
+import {Environment} from '../HIR';
+import {lowerType} from '../HIR/BuildHIR';
+import {
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  Instruction,
+  InstructionKind,
+  makePropertyLiteral,
+  makeType,
+  PropType,
+  Type,
+  typeEquals,
+  TypeId,
+  TypeVar,
+} from '../HIR/HIR';
+import {
+  BuiltInArrayId,
+  BuiltInEventHandlerId,
+  BuiltInFunctionId,
+  BuiltInJsxId,
+  BuiltInMixedReadonlyId,
+  BuiltInObjectId,
+  BuiltInPropsId,
+  BuiltInRefValueId,
+  BuiltInSetStateId,
+  BuiltInUseRefId,
+} from '../HIR/ObjectShape';
+import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
+import {assertExhaustive} from '../Utils/utils';
+
+function isPrimitiveBinaryOp(op: t.BinaryExpression['operator']): boolean {
+  switch (op) {
+    case '+':
+    case '-':
+    case '/':
+    case '%':
+    case '*':
+    case '**':
+    case '&':
+    case '|':
+    case '>>':
+    case '<<':
+    case '^':
+    case '>':
+    case '<':
+    case '>=':
+    case '<=':
+    case '|>':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function inferTypes(func: HIRFunction): void {
+  const unifier = new Unifier(func.env);
+  for (const e of generate(func)) {
+    unifier.unify(e.left, e.right);
+  }
+  apply(func, unifier);
+}
+
+function apply(func: HIRFunction, unifier: Unifier): void {
+  for (const [_, block] of func.body.blocks) {
+    for (const phi of block.phis) {
+      phi.place.identifier.type = unifier.get(phi.place.identifier.type);
+    }
+    for (const instr of block.instructions) {
+      for (const operand of eachInstructionLValue(instr)) {
+        operand.identifier.type = unifier.get(operand.identifier.type);
+      }
+      for (const place of eachInstructionOperand(instr)) {
+        place.identifier.type = unifier.get(place.identifier.type);
+      }
+      const {lvalue, value} = instr;
+      lvalue.identifier.type = unifier.get(lvalue.identifier.type);
+
+      if (
+        value.kind === 'FunctionExpression' ||
+        value.kind === 'ObjectMethod'
+      ) {
+        apply(value.loweredFunc.func, unifier);
+      }
+    }
+  }
+  const returns = func.returns.identifier;
+  returns.type = unifier.get(returns.type);
+}
+
+type TypeEquation = {
+  left: Type;
+  right: Type;
+};
+
+function equation(left: Type, right: Type): TypeEquation {
+  return {
+    left,
+    right,
+  };
+}
+
+function* generate(
+  func: HIRFunction,
+): Generator<TypeEquation, void, undefined> {
+  if (func.fnType === 'Component') {
+    const [props, ref] = func.params;
+    if (props && props.kind === 'Identifier') {
+      yield equation(props.identifier.type, {
+        kind: 'Object',
+        shapeId: BuiltInPropsId,
+      });
+    }
+    if (ref && ref.kind === 'Identifier') {
+      yield equation(ref.identifier.type, {
+        kind: 'Object',
+        shapeId: BuiltInUseRefId,
+      });
+    }
+  }
+
+  const names = new Map();
+  const returnTypes: Array<Type> = [];
+  for (const [_, block] of func.body.blocks) {
+    for (const phi of block.phis) {
+      yield equation(phi.place.identifier.type, {
+        kind: 'Phi',
+        operands: [...phi.operands.values()].map(id => id.identifier.type),
+      });
+    }
+
+    for (const instr of block.instructions) {
+      yield* generateInstructionTypes(func.env, names, instr);
+    }
+    const terminal = block.terminal;
+    if (terminal.kind === 'return') {
+      returnTypes.push(terminal.value.identifier.type);
+    }
+  }
+  if (returnTypes.length > 1) {
+    yield equation(func.returns.identifier.type, {
+      kind: 'Phi',
+      operands: returnTypes,
+    });
+  } else if (returnTypes.length === 1) {
+    yield equation(func.returns.identifier.type, returnTypes[0]!);
+  }
+}
+
+function setName(
+  names: Map<IdentifierId, string>,
+  id: IdentifierId,
+  name: Identifier,
+): void {
+  if (name.name?.kind === 'named') {
+    names.set(id, name.name.value);
+  }
+}
+
+function getName(names: Map<IdentifierId, string>, id: IdentifierId): string {
+  return names.get(id) ?? '';
+}
+
+function* generateInstructionTypes(
+  env: Environment,
+  names: Map<IdentifierId, string>,
+  instr: Instruction,
+): Generator<TypeEquation, void, undefined> {
+  const {lvalue, value} = instr;
+  const left = lvalue.identifier.type;
+
+  switch (value.kind) {
+    case 'TemplateLiteral':
+    case 'JSXText':
+    case 'Primitive': {
+      yield equation(left, {kind: 'Primitive'});
+      break;
+    }
+
+    case 'UnaryExpression': {
+      yield equation(left, {kind: 'Primitive'});
+      break;
+    }
+
+    case 'LoadLocal': {
+      setName(names, lvalue.identifier.id, value.place.identifier);
+      yield equation(left, value.place.identifier.type);
+      break;
+    }
+
+    // We intentionally do not infer types for most context variables
+    case 'DeclareContext':
+    case 'LoadContext': {
+      break;
+    }
+    case 'StoreContext': {
+      /**
+       * The caveat is StoreContext const, where we know the value is
+       * assigned once such that everywhere the value is accessed, it
+       * must have the same type from the rvalue.
+       *
+       * A concrete example where this is useful is `const ref = useRef()`
+       * where the ref is referenced before its declaration in a function
+       * expression, causing it to be converted to a const context variable.
+       */
+      if (value.lvalue.kind === InstructionKind.Const) {
+        yield equation(
+          value.lvalue.place.identifier.type,
+          value.value.identifier.type,
+        );
+      }
+      break;
+    }
+
+    case 'StoreLocal': {
+      if (env.config.enableUseTypeAnnotations) {
+        yield equation(
+          value.lvalue.place.identifier.type,
+          value.value.identifier.type,
+        );
+        const valueType =
+          value.type === null ? makeType() : lowerType(value.type);
+        yield equation(valueType, value.lvalue.place.identifier.type);
+        yield equation(left, valueType);
+      } else {
+        yield equation(left, value.value.identifier.type);
+        yield equation(
+          value.lvalue.place.identifier.type,
+          value.value.identifier.type,
+        );
+      }
+      break;
+    }
+
+    case 'StoreGlobal': {
+      yield equation(left, value.value.identifier.type);
+      break;
+    }
+
+    case 'BinaryExpression': {
+      if (isPrimitiveBinaryOp(value.operator)) {
+        yield equation(value.left.identifier.type, {kind: 'Primitive'});
+        yield equation(value.right.identifier.type, {kind: 'Primitive'});
+      }
+      yield equation(left, {kind: 'Primitive'});
+      break;
+    }
+
+    case 'PostfixUpdate':
+    case 'PrefixUpdate': {
+      yield equation(value.value.identifier.type, {kind: 'Primitive'});
+      yield equation(value.lvalue.identifier.type, {kind: 'Primitive'});
+      yield equation(left, {kind: 'Primitive'});
+      break;
+    }
+
+    case 'LoadGlobal': {
+      const globalType = env.getGlobalDeclaration(value.binding, value.loc);
+      if (globalType) {
+        yield equation(left, globalType);
+      }
+      break;
+    }
+
+    case 'CallExpression': {
+      const returnType = makeType();
+      /*
+       * TODO: callee could be a hook or a function, so this type equation isn't correct.
+       * We should change Hook to a subtype of Function or change unifier logic.
+       * (see https://github.com/facebook/react-forget/pull/1427)
+       */
+      let shapeId: string | null = null;
+      if (env.config.enableTreatSetIdentifiersAsStateSetters) {
+        const name = getName(names, value.callee.identifier.id);
+        if (name.startsWith('set')) {
+          shapeId = BuiltInSetStateId;
+        }
+      }
+      yield equation(value.callee.identifier.type, {
+        kind: 'Function',
+        shapeId,
+        return: returnType,
+        isConstructor: false,
+      });
+      yield equation(left, returnType);
+      break;
+    }
+
+    case 'TaggedTemplateExpression': {
+      const returnType = makeType();
+      /*
+       * TODO: callee could be a hook or a function, so this type equation isn't correct.
+       * We should change Hook to a subtype of Function or change unifier logic.
+       * (see https://github.com/facebook/react-forget/pull/1427)
+       */
+      yield equation(value.tag.identifier.type, {
+        kind: 'Function',
+        shapeId: null,
+        return: returnType,
+        isConstructor: false,
+      });
+      yield equation(left, returnType);
+      break;
+    }
+
+    case 'ObjectExpression': {
+      for (const property of value.properties) {
+        if (
+          property.kind === 'ObjectProperty' &&
+          property.key.kind === 'computed'
+        ) {
+          yield equation(property.key.name.identifier.type, {
+            kind: 'Primitive',
+          });
+        }
+      }
+      yield equation(left, {kind: 'Object', shapeId: BuiltInObjectId});
+      break;
+    }
+
+    case 'ArrayExpression': {
+      yield equation(left, {kind: 'Object', shapeId: BuiltInArrayId});
+      break;
+    }
+
+    case 'PropertyLoad': {
+      yield equation(left, {
+        kind: 'Property',
+        objectType: value.object.identifier.type,
+        objectName: getName(names, value.object.identifier.id),
+        propertyName: {
+          kind: 'literal',
+          value: value.property,
+        },
+      });
+      break;
+    }
+
+    case 'ComputedLoad': {
+      yield equation(left, {
+        kind: 'Property',
+        objectType: value.object.identifier.type,
+        objectName: getName(names, value.object.identifier.id),
+        propertyName: {
+          kind: 'computed',
+          value: value.property.identifier.type,
+        },
+      });
+      break;
+    }
+    case 'MethodCall': {
+      const returnType = makeType();
+      yield equation(value.property.identifier.type, {
+        kind: 'Function',
+        return: returnType,
+        shapeId: null,
+        isConstructor: false,
+      });
+
+      yield equation(left, returnType);
+      break;
+    }
+
+    case 'Destructure': {
+      const pattern = value.lvalue.pattern;
+      if (pattern.kind === 'ArrayPattern') {
+        for (let i = 0; i < pattern.items.length; i++) {
+          const item = pattern.items[i];
+          if (item.kind === 'Identifier') {
+            // To simulate tuples we use properties with `String(<index>)`, eg "0".
+            const propertyName = String(i);
+            yield equation(item.identifier.type, {
+              kind: 'Property',
+              objectType: value.value.identifier.type,
+              objectName: getName(names, value.value.identifier.id),
+              propertyName: {
+                kind: 'literal',
+                value: makePropertyLiteral(propertyName),
+              },
+            });
+          } else if (item.kind === 'Spread') {
+            // Array pattern spread always creates an array
+            yield equation(item.place.identifier.type, {
+              kind: 'Object',
+              shapeId: BuiltInArrayId,
+            });
+          } else {
+            continue;
+          }
+        }
+      } else {
+        for (const property of pattern.properties) {
+          if (property.kind === 'ObjectProperty') {
+            if (
+              property.key.kind === 'identifier' ||
+              property.key.kind === 'string'
+            ) {
+              yield equation(property.place.identifier.type, {
+                kind: 'Property',
+                objectType: value.value.identifier.type,
+                objectName: getName(names, value.value.identifier.id),
+                propertyName: {
+                  kind: 'literal',
+                  value: makePropertyLiteral(property.key.name),
+                },
+              });
+            }
+          }
+        }
+      }
+      break;
+    }
+
+    case 'TypeCastExpression': {
+      if (env.config.enableUseTypeAnnotations) {
+        yield equation(value.type, value.value.identifier.type);
+        yield equation(left, value.type);
+      } else {
+        yield equation(left, value.value.identifier.type);
+      }
+      break;
+    }
+
+    case 'PropertyDelete':
+    case 'ComputedDelete': {
+      yield equation(left, {kind: 'Primitive'});
+      break;
+    }
+
+    case 'FunctionExpression': {
+      yield* generate(value.loweredFunc.func);
+      yield equation(left, {
+        kind: 'Function',
+        shapeId: BuiltInFunctionId,
+        return: value.loweredFunc.func.returns.identifier.type,
+        isConstructor: false,
+      });
+      break;
+    }
+
+    case 'NextPropertyOf': {
+      yield equation(left, {kind: 'Primitive'});
+      break;
+    }
+
+    case 'ObjectMethod': {
+      yield* generate(value.loweredFunc.func);
+      yield equation(left, {kind: 'ObjectMethod'});
+      break;
+    }
+
+    case 'JsxExpression':
+    case 'JsxFragment': {
+      if (env.config.enableTreatRefLikeIdentifiersAsRefs) {
+        if (value.kind === 'JsxExpression') {
+          for (const prop of value.props) {
+            if (prop.kind === 'JsxAttribute' && prop.name === 'ref') {
+              yield equation(prop.place.identifier.type, {
+                kind: 'Object',
+                shapeId: BuiltInUseRefId,
+              });
+            }
+          }
+        }
+      }
+      if (env.config.enableInferEventHandlers) {
+        if (
+          value.kind === 'JsxExpression' &&
+          value.tag.kind === 'BuiltinTag' &&
+          !value.tag.name.includes('-')
+        ) {
+          /*
+           * Infer event handler types for built-in DOM elements.
+           * Props starting with "on" (e.g., onClick, onSubmit) on primitive tags
+           * are inferred as event handlers. This allows functions with ref access
+           * to be passed to these props, since DOM event handlers are guaranteed
+           * by React to only execute in response to events, never during render.
+           *
+           * We exclude tags with hyphens to avoid web components (custom elements),
+           * which are required by the HTML spec to contain a hyphen. Web components
+           * may call event handler props during their lifecycle methods (e.g.,
+           * connectedCallback), which would be unsafe for ref access.
+           */
+          for (const prop of value.props) {
+            if (
+              prop.kind === 'JsxAttribute' &&
+              prop.name.startsWith('on') &&
+              prop.name.length > 2 &&
+              prop.name[2] === prop.name[2].toUpperCase()
+            ) {
+              yield equation(prop.place.identifier.type, {
+                kind: 'Function',
+                shapeId: BuiltInEventHandlerId,
+                return: makeType(),
+                isConstructor: false,
+              });
+            }
+          }
+        }
+      }
+      yield equation(left, {kind: 'Object', shapeId: BuiltInJsxId});
+      break;
+    }
+    case 'NewExpression': {
+      const returnType = makeType();
+      yield equation(value.callee.identifier.type, {
+        kind: 'Function',
+        return: returnType,
+        shapeId: null,
+        isConstructor: true,
+      });
+
+      yield equation(left, returnType);
+      break;
+    }
+    case 'PropertyStore': {
+      /**
+       * Infer types based on assignments to known object properties
+       * This is important for refs, where assignment to `<maybeRef>.current`
+       * can help us infer that an object itself is a ref
+       */
+      yield equation(
+        /**
+         * Our property type declarations are best-effort and we haven't tested
+         * using them to drive inference of rvalues from lvalues. We want to emit
+         * a Property type in order to infer refs from `.current` accesses, but
+         * stay conservative by not otherwise inferring anything about rvalues.
+         * So we use a dummy type here.
+         *
+         * TODO: consider using the rvalue type here
+         */
+        makeType(),
+        // unify() only handles properties in the second position
+        {
+          kind: 'Property',
+          objectType: value.object.identifier.type,
+          objectName: getName(names, value.object.identifier.id),
+          propertyName: {
+            kind: 'literal',
+            value: value.property,
+          },
+        },
+      );
+      break;
+    }
+    case 'DeclareLocal':
+    case 'RegExpLiteral':
+    case 'MetaProperty':
+    case 'ComputedStore':
+    case 'Await':
+    case 'GetIterator':
+    case 'IteratorNext':
+    case 'UnsupportedNode':
+    case 'Debugger':
+    case 'FinishMemoize':
+    case 'StartMemoize': {
+      break;
+    }
+    default:
+      assertExhaustive(
+        value,
+        `Unhandled instruction value kind: ${(value as any).kind}`,
+      );
+  }
+}
+
+type Substitution = Map<TypeId, Type>;
+class Unifier {
+  substitutions: Substitution = new Map();
+  env: Environment;
+
+  constructor(env: Environment) {
+    this.env = env;
+  }
+
+  unify(tA: Type, tB: Type): void {
+    if (tB.kind === 'Property') {
+      if (
+        this.env.config.enableTreatRefLikeIdentifiersAsRefs &&
+        isRefLikeName(tB)
+      ) {
+        this.unify(tB.objectType, {
+          kind: 'Object',
+          shapeId: BuiltInUseRefId,
+        });
+        this.unify(tA, {
+          kind: 'Object',
+          shapeId: BuiltInRefValueId,
+        });
+        return;
+      }
+      const objectType = this.get(tB.objectType);
+      const propertyType =
+        tB.propertyName.kind === 'literal'
+          ? this.env.getPropertyType(objectType, tB.propertyName.value)
+          : this.env.getFallthroughPropertyType(
+              objectType,
+              tB.propertyName.value,
+            );
+      if (propertyType !== null) {
+        this.unify(tA, propertyType);
+      }
+      /*
+       * We do not error if tB is not a known object or function (even if it
+       * is a primitive), since JS implicit conversion to objects
+       */
+      return;
+    }
+
+    if (typeEquals(tA, tB)) {
+      return;
+    }
+
+    if (tA.kind === 'Type') {
+      this.bindVariableTo(tA, tB);
+      return;
+    }
+
+    if (tB.kind === 'Type') {
+      this.bindVariableTo(tB, tA);
+      return;
+    }
+
+    if (
+      tB.kind === 'Function' &&
+      tA.kind === 'Function' &&
+      tA.isConstructor === tB.isConstructor
+    ) {
+      this.unify(tA.return, tB.return);
+      return;
+    }
+  }
+
+  bindVariableTo(v: TypeVar, type: Type): void {
+    if (type.kind === 'Poly') {
+      //  Ignore PolyType, since we don't support polymorphic types correctly.
+      return;
+    }
+
+    if (this.substitutions.has(v.id)) {
+      this.unify(this.substitutions.get(v.id)!, type);
+      return;
+    }
+
+    if (type.kind === 'Type' && this.substitutions.has(type.id)) {
+      this.unify(v, this.substitutions.get(type.id)!);
+      return;
+    }
+
+    if (type.kind === 'Phi') {
+      CompilerError.invariant(type.operands.length > 0, {
+        reason: 'there should be at least one operand',
+        loc: GeneratedSource,
+      });
+
+      let candidateType: Type | null = null;
+      for (const operand of type.operands) {
+        const resolved = this.get(operand);
+        if (candidateType === null) {
+          candidateType = resolved;
+        } else if (!typeEquals(resolved, candidateType)) {
+          const unionType = tryUnionTypes(resolved, candidateType);
+          if (unionType === null) {
+            candidateType = null;
+            break;
+          } else {
+            candidateType = unionType;
+          }
+        } // else same type, continue
+      }
+
+      if (candidateType !== null) {
+        this.unify(v, candidateType);
+        return;
+      }
+    }
+
+    if (this.occursCheck(v, type)) {
+      const resolvedType = this.tryResolveType(v, type);
+      if (resolvedType !== null) {
+        this.substitutions.set(v.id, resolvedType);
+        return;
+      }
+      throw new Error('cycle detected');
+    }
+
+    this.substitutions.set(v.id, type);
+  }
+
+  tryResolveType(v: TypeVar, type: Type): Type | null {
+    switch (type.kind) {
+      case 'Phi': {
+        /**
+         * Resolve the type of the phi by recursively removing `v` as an operand.
+         * For example we can end up with types like this:
+         *
+         * v = Phi [
+         *   T1
+         *   T2
+         *   Phi [
+         *     T3
+         *     Phi [
+         *       T4
+         *       v <-- cycle!
+         *     ]
+         *   ]
+         * ]
+         *
+         * By recursively removing `v`, we end up with:
+         *
+         * v = Phi [
+         *   T1
+         *   T2
+         *   Phi [
+         *     T3
+         *     Phi [
+         *       T4
+         *     ]
+         *   ]
+         * ]
+         *
+         * Which avoids the cycle
+         */
+        const operands = [];
+        for (const operand of type.operands) {
+          if (operand.kind === 'Type' && operand.id === v.id) {
+            continue;
+          }
+          const resolved = this.tryResolveType(v, operand);
+          if (resolved === null) {
+            return null;
+          }
+          operands.push(resolved);
+        }
+        return {kind: 'Phi', operands};
+      }
+      case 'Type': {
+        const substitution = this.get(type);
+        if (substitution !== type) {
+          const resolved = this.tryResolveType(v, substitution);
+          if (resolved !== null) {
+            this.substitutions.set(type.id, resolved);
+          }
+          return resolved;
+        }
+        return type;
+      }
+      case 'Property': {
+        const objectType = this.tryResolveType(v, this.get(type.objectType));
+        if (objectType === null) {
+          return null;
+        }
+        return {
+          kind: 'Property',
+          objectName: type.objectName,
+          objectType,
+          propertyName: type.propertyName,
+        };
+      }
+      case 'Function': {
+        const returnType = this.tryResolveType(v, this.get(type.return));
+        if (returnType === null) {
+          return null;
+        }
+        return {
+          kind: 'Function',
+          return: returnType,
+          shapeId: type.shapeId,
+          isConstructor: type.isConstructor,
+        };
+      }
+      case 'ObjectMethod':
+      case 'Object':
+      case 'Primitive':
+      case 'Poly': {
+        return type;
+      }
+      default: {
+        assertExhaustive(type, `Unexpected type kind '${(type as any).kind}'`);
+      }
+    }
+  }
+
+  occursCheck(v: TypeVar, type: Type): boolean {
+    if (typeEquals(v, type)) return true;
+
+    if (type.kind === 'Type' && this.substitutions.has(type.id)) {
+      return this.occursCheck(v, this.substitutions.get(type.id)!);
+    }
+
+    if (type.kind === 'Phi') {
+      return type.operands.some(o => this.occursCheck(v, o));
+    }
+
+    if (type.kind === 'Function') {
+      return this.occursCheck(v, type.return);
+    }
+
+    return false;
+  }
+
+  get(type: Type): Type {
+    if (type.kind === 'Type') {
+      if (this.substitutions.has(type.id)) {
+        return this.get(this.substitutions.get(type.id)!);
+      }
+    }
+
+    if (type.kind === 'Phi') {
+      return {kind: 'Phi', operands: type.operands.map(o => this.get(o))};
+    }
+
+    if (type.kind === 'Function') {
+      return {
+        kind: 'Function',
+        isConstructor: type.isConstructor,
+        shapeId: type.shapeId,
+        return: this.get(type.return),
+      };
+    }
+
+    return type;
+  }
+}
+
+const RefLikeNameRE = /^(?:[a-zA-Z$_][a-zA-Z$_0-9]*)Ref$|^ref$/;
+
+function isRefLikeName(t: PropType): boolean {
+  return (
+    t.propertyName.kind === 'literal' &&
+    RefLikeNameRE.test(t.objectName) &&
+    t.propertyName.value === 'current'
+  );
+}
+
+function tryUnionTypes(ty1: Type, ty2: Type): Type | null {
+  let readonlyType: Type;
+  let otherType: Type;
+  if (ty1.kind === 'Object' && ty1.shapeId === BuiltInMixedReadonlyId) {
+    readonlyType = ty1;
+    otherType = ty2;
+  } else if (ty2.kind === 'Object' && ty2.shapeId === BuiltInMixedReadonlyId) {
+    readonlyType = ty2;
+    otherType = ty1;
+  } else {
+    return null;
+  }
+  if (otherType.kind === 'Primitive') {
+    /**
+     * Union(Primitive | MixedReadonly) = MixedReadonly
+     *
+     * For example, `data ?? null` could return `data`, the fact that RHS
+     * is a primitive doesn't guarantee the result is a primitive.
+     */
+    return readonlyType;
+  } else if (
+    otherType.kind === 'Object' &&
+    otherType.shapeId === BuiltInArrayId
+  ) {
+    /**
+     * Union(Array | MixedReadonly) = Array
+     *
+     * In practice this pattern means the result is always an array. Given
+     * that this behavior requires opting-in to the mixedreadonly type
+     * (via moduleTypeProvider) this seems like a reasonable heuristic.
+     */
+    return otherType;
+  }
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/TypeInference/index.ts b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/index.ts
new file mode 100644
index 00000000000..ff7e70d35d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {inferTypes} from './InferTypes';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/ComponentDeclaration.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/ComponentDeclaration.ts
new file mode 100644
index 00000000000..80175064f99
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/ComponentDeclaration.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+
+export type ComponentDeclaration = t.FunctionDeclaration & {
+  __componentDeclaration: boolean;
+};
+
+export function isComponentDeclaration(
+  node: t.FunctionDeclaration,
+): node is ComponentDeclaration {
+  return Object.prototype.hasOwnProperty.call(node, '__componentDeclaration');
+}
+
+export function parseComponentDeclaration(
+  node: t.FunctionDeclaration,
+): ComponentDeclaration | null {
+  return isComponentDeclaration(node) ? node : null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/DisjointSet.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/DisjointSet.ts
new file mode 100644
index 00000000000..d60c8f9c7c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/DisjointSet.ts
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {GeneratedSource} from '../HIR/HIR';
+
+// Represents items which form disjoint sets.
+export default class DisjointSet<T> {
+  #entries: Map<T, T> = new Map();
+
+  /*
+   * Updates the graph to reflect that the given @param items form a set,
+   * linking any previous sets that the items were part of into a single
+   * set.
+   */
+  union(items: Array<T>): void {
+    const first = items.shift();
+    CompilerError.invariant(first != null, {
+      reason: 'Expected set to be non-empty',
+      loc: GeneratedSource,
+    });
+    /*
+     * determine an arbitrary "root" for this set: if the first
+     * item already has a root then use that, otherwise the first item
+     * will be the new root.
+     */
+    let root = this.find(first);
+    if (root == null) {
+      root = first;
+      this.#entries.set(first, first);
+    }
+    // update remaining items (which may already be part of other sets)
+    for (const item of items) {
+      let itemParent = this.#entries.get(item);
+      if (itemParent == null) {
+        // new item, no existing set to update
+        this.#entries.set(item, root);
+        continue;
+      } else if (itemParent === root) {
+        continue;
+      } else {
+        let current = item;
+        while (itemParent !== root) {
+          this.#entries.set(current, root);
+          current = itemParent;
+          itemParent = this.#entries.get(current)!;
+        }
+      }
+    }
+  }
+
+  /*
+   * Finds the set to which the given @param item is associated, if @param item
+   * is present in this set. If item is not present, returns null.
+   *
+   * Note that the returned value may be any item in the set to which the input
+   * belongs: the only guarantee is that all items in a set will return the same
+   * value in between calls to `union()`.
+   */
+  find(item: T): T | null {
+    if (!this.#entries.has(item)) {
+      return null;
+    }
+    const parent = this.#entries.get(item)!;
+    if (parent === item) {
+      // this is the root element
+      return item;
+    }
+    // Recurse to find the root (caching all elements along the path to the root)
+    const root = this.find(parent)!;
+    // Cache the element itself
+    this.#entries.set(item, root);
+    return root;
+  }
+
+  has(item: T): boolean {
+    return this.#entries.has(item);
+  }
+
+  /*
+   * Forces the set into canonical form, ie with all items pointing directly to
+   * their root, and returns a Map representing the mapping of items to their roots.
+   */
+  canonicalize(): Map<T, T> {
+    const entries = new Map<T, T>();
+    for (const item of this.#entries.keys()) {
+      const root = this.find(item)!;
+      entries.set(item, root);
+    }
+    return entries;
+  }
+
+  /*
+   * Calls the provided callback once for each item in the disjoint set,
+   * passing the @param item and the @param group to which it belongs.
+   */
+  forEach(fn: (item: T, group: T) => void): void {
+    for (const item of this.#entries.keys()) {
+      const group = this.find(item)!;
+      fn(item, group);
+    }
+  }
+
+  buildSets(): Array<Set<T>> {
+    const ids: Map<T, number> = new Map();
+    const sets: Map<number, Set<T>> = new Map();
+
+    this.forEach((identifier, groupIdentifier) => {
+      let id = ids.get(groupIdentifier);
+      if (id == null) {
+        id = ids.size;
+        ids.set(groupIdentifier, id);
+      }
+
+      let set = sets.get(id);
+      if (set === undefined) {
+        set = new Set();
+        sets.set(id, set);
+      }
+      set.add(identifier);
+    });
+
+    return [...sets.values()];
+  }
+
+  get size(): number {
+    return this.#entries.size;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/HookDeclaration.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/HookDeclaration.ts
new file mode 100644
index 00000000000..0e82d26eeeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/HookDeclaration.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+
+export type HookDeclaration = t.FunctionDeclaration & {
+  __hookDeclaration: boolean;
+};
+
+export function isHookDeclaration(
+  node: t.FunctionDeclaration,
+): node is HookDeclaration {
+  return Object.prototype.hasOwnProperty.call(node, '__hookDeclaration');
+}
+
+export function parseHookDeclaration(
+  node: t.FunctionDeclaration,
+): HookDeclaration | null {
+  return isHookDeclaration(node) ? node : null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts
new file mode 100644
index 00000000000..3964f4accc8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-keywords-and-reserved-words
+ */
+
+/**
+ * Note: `await` and `yield` are contextually allowed as identifiers.
+ *   await: reserved inside async functions and modules
+ *   yield: reserved inside generator functions
+ *
+ * Note: `async` is not reserved.
+ */
+const RESERVED_WORDS = new Set([
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'enum',
+  'export',
+  'extends',
+  'false',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'import',
+  'in',
+  'instanceof',
+  'new',
+  'null',
+  'return',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'true',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+]);
+
+/**
+ * Reserved when a module has a 'use strict' directive.
+ */
+const STRICT_MODE_RESERVED_WORDS = new Set([
+  'let',
+  'static',
+  'implements',
+  'interface',
+  'package',
+  'private',
+  'protected',
+  'public',
+]);
+/**
+ * The names arguments and eval are not keywords, but they are subject to some restrictions in
+ * strict mode code.
+ */
+const STRICT_MODE_RESTRICTED_WORDS = new Set(['eval', 'arguments']);
+
+/**
+ * Conservative check for whether an identifer name is reserved or not. We assume that code is
+ * written with strict mode.
+ */
+export function isReservedWord(identifierName: string): boolean {
+  return (
+    RESERVED_WORDS.has(identifierName) ||
+    STRICT_MODE_RESERVED_WORDS.has(identifierName) ||
+    STRICT_MODE_RESTRICTED_WORDS.has(identifierName)
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/Result.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/Result.ts
new file mode 100644
index 00000000000..32e3ec82c59
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/Result.ts
@@ -0,0 +1,242 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Direct translation of Rust's Result type, although some ownership related methods are omitted.
+export interface Result<T, E> {
+  /*
+   * Maps a `Result<T, E>` to `Result<U, E>` by applying a function to a contained `Ok` value,
+   * leaving an `Err` value untouched.
+   *
+   * This function can be used to compose the results of two functions.
+   */
+  map<U>(fn: (val: T) => U): Result<U, E>;
+  /*
+   * Maps a `Result<T, E>` to `Result<T, F>` by applying a function to a contained `Err` value,
+   * leaving an `Ok` value untouched.
+   *
+   * This function can be used to pass through a successful result while handling an error.
+   */
+  mapErr<F>(fn: (val: E) => F): Result<T, F>;
+  /*
+   * Returns the provided default (if `Err`), or applies a function to the contained value
+   * (if `Ok`).
+   *
+   * Arguments passed to {@link mapOr} are eagerly evaluated; if you are passing the result of a
+   * function call, it is recommended to use {@link mapOrElse}, which is lazily evaluated.
+   */
+  mapOr<U>(fallback: U, fn: (val: T) => U): U;
+  /*
+   * Maps a `Result<T, E>` to `U` by applying fallback function default to a contained `Err` value,
+   * or function `fn` to a contained `Ok` value.
+   *
+   * This function can be used to unpack a successful result while handling an error.
+   */
+  mapOrElse<U>(fallback: () => U, fn: (val: T) => U): U;
+  /*
+   * Calls `fn` if the result is `Ok`, otherwise returns the `Err` value of self.
+   *
+   * This function can be used for control flow based on Result values.
+   */
+  andThen<U>(fn: (val: T) => Result<U, E>): Result<U, E>;
+  /*
+   * Returns res if the result is `Ok`, otherwise returns the `Err` value of self.
+   *
+   * Arguments passed to {@link and} are eagerly evaluated; if you are passing the result of a
+   * function call, it is recommended to use {@link andThen}, which is lazily evaluated.
+   */
+  and<U>(res: Result<U, E>): Result<U, E>;
+  /*
+   * Returns `res` if the result is `Err`, otherwise returns the `Ok` value of self.
+   *
+   * Arguments passed to {@link or} are eagerly evaluated; if you are passing the result of a
+   * function call, it is recommended to use {@link orElse}, which is lazily evaluated.
+   */
+  or(res: Result<T, E>): Result<T, E>;
+  /*
+   * Calls `fn` if the result is `Err`, otherwise returns the `Ok` value of self.
+   *
+   * This function can be used for control flow based on result values.
+   */
+  orElse<F>(fn: (val: E) => Result<T, F>): Result<T, F>;
+  // Returns `true` if the result is `Ok`.
+  isOk(): this is OkImpl<T>;
+  // Returns `true` if the result is `Err`.
+  isErr(): this is ErrImpl<E>;
+  // Returns the contained `Ok` value or throws.
+  expect(msg: string): T;
+  // Returns the contained `Err` value or throws.
+  expectErr(msg: string): E;
+  // Returns the contained `Ok` value.
+  unwrap(): T;
+  /*
+   * Returns the contained `Ok` value or a provided default.
+   *
+   * Arguments passed to {@link unwrapOr} are eagerly evaluated; if you are passing the result of a
+   * function call, it is recommended to use {@link unwrapOrElse}, which is lazily evaluated.
+   */
+  unwrapOr(fallback: T): T;
+  // Returns the contained `Ok` value or computes it from a closure.
+  unwrapOrElse(fallback: (val: E) => T): T;
+  // Returns the contained `Err` value or throws.
+  unwrapErr(): E;
+}
+
+export function Ok<T>(val: T): OkImpl<T> {
+  return new OkImpl(val);
+}
+
+class OkImpl<T> implements Result<T, never> {
+  #val: T;
+  constructor(val: T) {
+    this.#val = val;
+  }
+
+  map<U>(fn: (val: T) => U): Result<U, never> {
+    return new OkImpl(fn(this.#val));
+  }
+
+  mapErr<F>(_fn: (val: never) => F): Result<T, F> {
+    return this;
+  }
+
+  mapOr<U>(_fallback: U, fn: (val: T) => U): U {
+    return fn(this.#val);
+  }
+
+  mapOrElse<U>(_fallback: () => U, fn: (val: T) => U): U {
+    return fn(this.#val);
+  }
+
+  andThen<U>(fn: (val: T) => Result<U, never>): Result<U, never> {
+    return fn(this.#val);
+  }
+
+  and<U>(res: Result<U, never>): Result<U, never> {
+    return res;
+  }
+
+  or(_res: Result<T, never>): Result<T, never> {
+    return this;
+  }
+
+  orElse<F>(_fn: (val: never) => Result<T, F>): Result<T, F> {
+    return this;
+  }
+
+  isOk(): this is OkImpl<T> {
+    return true;
+  }
+
+  isErr(): this is ErrImpl<never> {
+    return false;
+  }
+
+  expect(_msg: string): T {
+    return this.#val;
+  }
+
+  expectErr(msg: string): never {
+    throw new Error(`${msg}: ${this.#val}`);
+  }
+
+  unwrap(): T {
+    return this.#val;
+  }
+
+  unwrapOr(_fallback: T): T {
+    return this.#val;
+  }
+
+  unwrapOrElse(_fallback: (val: never) => T): T {
+    return this.#val;
+  }
+
+  unwrapErr(): never {
+    if (this.#val instanceof Error) {
+      throw this.#val;
+    }
+    throw new Error(`Can't unwrap \`Ok\` to \`Err\`: ${this.#val}`);
+  }
+}
+
+export function Err<E>(val: E): ErrImpl<E> {
+  return new ErrImpl(val);
+}
+
+class ErrImpl<E> implements Result<never, E> {
+  #val: E;
+  constructor(val: E) {
+    this.#val = val;
+  }
+
+  map<U>(_fn: (val: never) => U): Result<U, E> {
+    return this;
+  }
+
+  mapErr<F>(fn: (val: E) => F): Result<never, F> {
+    return new ErrImpl(fn(this.#val));
+  }
+
+  mapOr<U>(fallback: U, _fn: (val: never) => U): U {
+    return fallback;
+  }
+
+  mapOrElse<U>(fallback: () => U, _fn: (val: never) => U): U {
+    return fallback();
+  }
+
+  andThen<U>(_fn: (val: never) => Result<U, E>): Result<U, E> {
+    return this;
+  }
+
+  and<U>(_res: Result<U, E>): Result<U, E> {
+    return this;
+  }
+
+  or(res: Result<never, E>): Result<never, E> {
+    return res;
+  }
+
+  orElse<F>(fn: (val: E) => ErrImpl<F>): Result<never, F> {
+    return fn(this.#val);
+  }
+
+  isOk(): this is OkImpl<never> {
+    return false;
+  }
+
+  isErr(): this is ErrImpl<E> {
+    return true;
+  }
+
+  expect(msg: string): never {
+    throw new Error(`${msg}: ${this.#val}`);
+  }
+
+  expectErr(_msg: string): E {
+    return this.#val;
+  }
+
+  unwrap(): never {
+    if (this.#val instanceof Error) {
+      throw this.#val;
+    }
+    throw new Error(`Can't unwrap \`Err\` to \`Ok\`: ${this.#val}`);
+  }
+
+  unwrapOr<T>(fallback: T): T {
+    return fallback;
+  }
+
+  unwrapOrElse<T>(fallback: (val: E) => T): T {
+    return fallback(this.#val);
+  }
+
+  unwrapErr(): E {
+    return this.#val;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/RuntimeDiagnosticConstants.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/RuntimeDiagnosticConstants.ts
new file mode 100644
index 00000000000..5949a489215
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/RuntimeDiagnosticConstants.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// WARNING: ensure this is synced with enum values in react-compiler-runtime:GuardKind
+export enum GuardKind {
+  PushHookGuard = 0,
+  PopHookGuard = 1,
+  AllowHook = 2,
+  DisallowHook = 3,
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/Stack.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/Stack.ts
new file mode 100644
index 00000000000..2ddfd3827aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/Stack.ts
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// An immutable stack data structure supporting O(1) push/pop operations.
+export type Stack<T> = Node<T> | Empty<T>;
+
+// Static assertion that Stack<T> is a StackInterface<T>
+function _assertStackInterface<T>(stack: Stack<T>): void {
+  let _: StackInterface<T> = stack;
+}
+
+/*
+ * Internal interface to enforce consistent behavior btw Node/Empty variants
+ * Note that we export a union rather than the interface so that it is impossible
+ * to create additional variants: a Stack should always be exactly a Node or Empty
+ * instance.
+ */
+interface StackInterface<T> {
+  push(value: T): StackInterface<T>;
+
+  pop(): StackInterface<T>;
+
+  contains(value: T): boolean;
+  find(fn: (value: T) => boolean): boolean;
+
+  each(fn: (value: T) => void): void;
+
+  get value(): T | null;
+
+  print(fn: (node: T) => string): string;
+}
+
+export function create<T>(value: T): Stack<T> {
+  return new Node(value);
+}
+
+export function empty<T>(): Stack<T> {
+  return EMPTY as any;
+}
+
+class Node<T> implements StackInterface<T> {
+  #value: T;
+  #next: Stack<T>;
+
+  constructor(value: T, next: Stack<T> = EMPTY as any) {
+    this.#value = value;
+    this.#next = next;
+  }
+
+  push(value: T): Node<T> {
+    return new Node(value, this);
+  }
+
+  pop(): Stack<T> {
+    return this.#next;
+  }
+
+  find(fn: (value: T) => boolean): boolean {
+    return fn(this.#value) ? true : this.#next.find(fn);
+  }
+
+  contains(value: T): boolean {
+    return (
+      value === this.#value ||
+      (this.#next !== null && this.#next.contains(value))
+    );
+  }
+  each(fn: (value: T) => void): void {
+    fn(this.#value);
+    this.#next.each(fn);
+  }
+
+  get value(): T {
+    return this.#value;
+  }
+
+  print(fn: (node: T) => string): string {
+    return fn(this.#value) + this.#next.print(fn);
+  }
+}
+
+class Empty<T> implements StackInterface<T> {
+  push(value: T): Stack<T> {
+    return new Node(value as T, this as Stack<T>);
+  }
+  pop(): Stack<T> {
+    return this;
+  }
+
+  find(_fn: (value: T) => boolean): boolean {
+    return false;
+  }
+  contains(_value: T): boolean {
+    return false;
+  }
+  each(_fn: (value: T) => void): void {
+    return;
+  }
+  get value(): T | null {
+    return null;
+  }
+  print(_: (node: T) => string): string {
+    return '';
+  }
+}
+
+const EMPTY: Stack<void> = new Empty();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts
new file mode 100644
index 00000000000..68f73c7f997
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {fromZodError} from 'zod-validation-error/v4';
+import {CompilerError} from '../CompilerError';
+import {
+  CompilationMode,
+  defaultOptions,
+  parsePluginOptions,
+  PluginOptions,
+} from '../Entrypoint';
+import {EnvironmentConfig} from '..';
+import {GeneratedSource} from '../HIR/HIR';
+import {
+  EnvironmentConfigSchema,
+  PartialEnvironmentConfig,
+} from '../HIR/Environment';
+import {Err, Ok, Result} from './Result';
+import {hasOwnProperty} from './utils';
+
+function tryParseTestPragmaValue(val: string): Result<unknown, unknown> {
+  try {
+    let parsedVal: unknown;
+    const stringMatch = /^"([^"]*)"$/.exec(val);
+    if (stringMatch && stringMatch.length > 1) {
+      parsedVal = stringMatch[1];
+    } else {
+      parsedVal = JSON.parse(val);
+    }
+    return Ok(parsedVal);
+  } catch (e) {
+    return Err(e);
+  }
+}
+
+const testComplexConfigDefaults: PartialEnvironmentConfig = {
+  validateNoCapitalizedCalls: [],
+  enableChangeDetectionForDebugging: {
+    source: 'react-compiler-runtime',
+    importSpecifierName: '$structuralCheck',
+  },
+  enableEmitFreeze: {
+    source: 'react-compiler-runtime',
+    importSpecifierName: 'makeReadOnly',
+  },
+  enableEmitInstrumentForget: {
+    fn: {
+      source: 'react-compiler-runtime',
+      importSpecifierName: 'useRenderCounter',
+    },
+    gating: {
+      source: 'react-compiler-runtime',
+      importSpecifierName: 'shouldInstrument',
+    },
+    globalGating: 'DEV',
+  },
+  enableEmitHookGuards: {
+    source: 'react-compiler-runtime',
+    importSpecifierName: '$dispatcherGuard',
+  },
+  inlineJsxTransform: {
+    elementSymbol: 'react.transitional.element',
+    globalDevVar: 'DEV',
+  },
+  lowerContextAccess: {
+    source: 'react-compiler-runtime',
+    importSpecifierName: 'useContext_withSelector',
+  },
+  inferEffectDependencies: [
+    {
+      function: {
+        source: 'react',
+        importSpecifierName: 'useEffect',
+      },
+      autodepsIndex: 1,
+    },
+    {
+      function: {
+        source: 'shared-runtime',
+        importSpecifierName: 'useSpecialEffect',
+      },
+      autodepsIndex: 2,
+    },
+    {
+      function: {
+        source: 'useEffectWrapper',
+        importSpecifierName: 'default',
+      },
+      autodepsIndex: 1,
+    },
+  ],
+};
+
+function* splitPragma(
+  pragma: string,
+): Generator<{key: string; value: string | null}> {
+  for (const entry of pragma.split('@')) {
+    const keyVal = entry.trim();
+    const valIdx = keyVal.indexOf(':');
+    if (valIdx === -1) {
+      yield {key: keyVal.split(' ', 1)[0], value: null};
+    } else {
+      yield {key: keyVal.slice(0, valIdx), value: keyVal.slice(valIdx + 1)};
+    }
+  }
+}
+
+/**
+ * For snap test fixtures and playground only.
+ */
+function parseConfigPragmaEnvironmentForTest(
+  pragma: string,
+  defaultConfig: PartialEnvironmentConfig,
+): EnvironmentConfig {
+  // throw early if the defaults are invalid
+  EnvironmentConfigSchema.parse(defaultConfig);
+
+  const maybeConfig: Partial<Record<keyof EnvironmentConfig, unknown>> =
+    defaultConfig;
+
+  for (const {key, value: val} of splitPragma(pragma)) {
+    if (!hasOwnProperty(EnvironmentConfigSchema.shape, key)) {
+      continue;
+    }
+    const isSet = val == null || val === 'true';
+    if (isSet && key in testComplexConfigDefaults) {
+      maybeConfig[key] = testComplexConfigDefaults[key];
+    } else if (isSet) {
+      maybeConfig[key] = true;
+    } else if (val === 'false') {
+      maybeConfig[key] = false;
+    } else if (val) {
+      const parsedVal = tryParseTestPragmaValue(val).unwrap();
+      if (key === 'customMacros' && typeof parsedVal === 'string') {
+        maybeConfig[key] = [parsedVal.split('.')[0]];
+        continue;
+      }
+      maybeConfig[key] = parsedVal;
+    }
+  }
+  const config = EnvironmentConfigSchema.safeParse(maybeConfig);
+  if (config.success) {
+    /**
+     * Unless explicitly enabled, do not insert HMR handling code
+     * in test fixtures or playground to reduce visual noise.
+     */
+    if (config.data.enableResetCacheOnSourceFileChanges == null) {
+      config.data.enableResetCacheOnSourceFileChanges = false;
+    }
+    return config.data;
+  }
+  CompilerError.invariant(false, {
+    reason: 'Internal error, could not parse config from pragma string',
+    description: `${fromZodError(config.error)}`,
+    loc: GeneratedSource,
+  });
+}
+
+const testComplexPluginOptionDefaults: PluginOptions = {
+  gating: {
+    source: 'ReactForgetFeatureFlag',
+    importSpecifierName: 'isForgetEnabled_Fixtures',
+  },
+};
+export function parseConfigPragmaForTests(
+  pragma: string,
+  defaults: {
+    compilationMode: CompilationMode;
+    environment?: PartialEnvironmentConfig;
+  },
+): PluginOptions {
+  const environment = parseConfigPragmaEnvironmentForTest(
+    pragma,
+    defaults.environment ?? {},
+  );
+  const options: Record<keyof PluginOptions, unknown> = {
+    ...defaultOptions,
+    panicThreshold: 'all_errors',
+    compilationMode: defaults.compilationMode,
+    environment,
+  };
+  for (const {key, value: val} of splitPragma(pragma)) {
+    if (!hasOwnProperty(defaultOptions, key)) {
+      continue;
+    }
+    const isSet = val == null || val === 'true';
+    if (isSet && key in testComplexPluginOptionDefaults) {
+      options[key] = testComplexPluginOptionDefaults[key];
+    } else if (isSet) {
+      options[key] = true;
+    } else if (val === 'false') {
+      options[key] = false;
+    } else if (val != null) {
+      const parsedVal = tryParseTestPragmaValue(val).unwrap();
+      if (key === 'target' && parsedVal === 'donotuse_meta_internal') {
+        options[key] = {
+          kind: parsedVal,
+          runtimeModule: 'react',
+        };
+      } else {
+        options[key] = parsedVal;
+      }
+    }
+  }
+  return parsePluginOptions(options);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/todo.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/todo.ts
new file mode 100644
index 00000000000..d5a284c5d8d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/todo.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function todo(message: string): never {
+  throw new Error('TODO: ' + message);
+}
+
+export function todoInvariant(
+  condition: unknown,
+  message: string,
+): asserts condition {
+  if (!condition) {
+    throw new Error('TODO: ' + message);
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/types.d.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/types.d.ts
new file mode 100644
index 00000000000..2f7b149c74c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/types.d.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export type ExtractClassProperties<C> = {
+  [K in keyof C as C[K] extends Function ? never : K]: C[K];
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts
new file mode 100644
index 00000000000..897614015f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/traverse';
+
+/*
+ * Trigger an exhaustivess check in TypeScript and throw at runtime.
+ *
+ * Example:
+ *
+ * ```ts
+ * enum ErrorCode = {
+ *    E0001 = "E0001",
+ *    E0002 = "E0002"
+ * }
+ *
+ * switch (code) {
+ *    case ErrorCode.E0001:
+ *      // ...
+ *    default:
+ *      assertExhaustive(code, "Unhandled error code");
+ * }
+ * ```
+ */
+export function assertExhaustive(_: never, errorMsg: string): never {
+  throw new Error(errorMsg);
+}
+
+// Modifies @param array in place, retaining only the items where the predicate returns true.
+export function retainWhere<T>(
+  array: Array<T>,
+  predicate: (item: T, index: number) => boolean,
+): void {
+  let writeIndex = 0;
+  for (let readIndex = 0; readIndex < array.length; readIndex++) {
+    const item = array[readIndex];
+    if (predicate(item, readIndex) === true) {
+      array[writeIndex++] = item;
+    }
+  }
+  array.length = writeIndex;
+}
+
+export function retainWhere_Set<T>(
+  items: Set<T>,
+  predicate: (item: T) => boolean,
+): void {
+  for (const item of items) {
+    if (!predicate(item)) {
+      items.delete(item);
+    }
+  }
+}
+
+export function getOrInsertWith<U, V>(
+  m: Map<U, V>,
+  key: U,
+  makeDefault: () => V,
+): V {
+  if (m.has(key)) {
+    return m.get(key) as V;
+  } else {
+    const defaultValue = makeDefault();
+    m.set(key, defaultValue);
+    return defaultValue;
+  }
+}
+
+export function getOrInsertDefault<U, V>(
+  m: Map<U, V>,
+  key: U,
+  defaultValue: V,
+): V {
+  if (m.has(key)) {
+    return m.get(key) as V;
+  } else {
+    m.set(key, defaultValue);
+    return defaultValue;
+  }
+}
+export function Set_equal<T>(a: ReadonlySet<T>, b: ReadonlySet<T>): boolean {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const item of a) {
+    if (!b.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function Set_union<T>(a: ReadonlySet<T>, b: ReadonlySet<T>): Set<T> {
+  const union = new Set<T>(a);
+  for (const item of b) {
+    union.add(item);
+  }
+  return union;
+}
+
+export function Set_intersect<T>(sets: Array<ReadonlySet<T>>): Set<T> {
+  if (sets.length === 0 || sets.some(s => s.size === 0)) {
+    return new Set();
+  } else if (sets.length === 1) {
+    return new Set(sets[0]);
+  }
+  const result: Set<T> = new Set();
+  const first = sets[0];
+  outer: for (const e of first) {
+    for (let i = 1; i < sets.length; i++) {
+      if (!sets[i].has(e)) {
+        continue outer;
+      }
+    }
+    result.add(e);
+  }
+  return result;
+}
+
+/**
+ * @returns `true` if `a` is a superset of `b`.
+ */
+export function Set_isSuperset<T>(
+  a: ReadonlySet<T>,
+  b: ReadonlySet<T>,
+): boolean {
+  for (const v of b) {
+    if (!a.has(v)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function Iterable_some<T>(
+  iter: Iterable<T>,
+  pred: (item: T) => boolean,
+): boolean {
+  for (const item of iter) {
+    if (pred(item)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function nonNull<T extends NonNullable<U>, U>(
+  value: T | null | undefined,
+): value is T {
+  return value != null;
+}
+
+export function Set_filter<T>(
+  source: ReadonlySet<T>,
+  fn: (arg: T) => boolean,
+): Set<T> {
+  const result = new Set<T>();
+  for (const entry of source) {
+    if (fn(entry)) {
+      result.add(entry);
+    }
+  }
+  return result;
+}
+
+export function hasNode<T>(
+  input: NodePath<T | null | undefined>,
+): input is NodePath<NonNullable<T>> {
+  /*
+   * Internal babel is on an older version that does not have hasNode (v7.17)
+   * See https://github.com/babel/babel/pull/13940/files for impl
+   * https://github.com/babel/babel/blob/5ebab544af2f1c6fc6abdaae6f4e5426975c9a16/packages/babel-traverse/src/path/index.ts#L128-L130
+   */
+  return input.node != null;
+}
+
+export function hasOwnProperty<T>(
+  obj: T,
+  key: string | number | symbol,
+): key is keyof T {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateContextVariableLValues.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateContextVariableLValues.ts
new file mode 100644
index 00000000000..a0d14ab16ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateContextVariableLValues.ts
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {HIRFunction, IdentifierId, Place} from '../HIR';
+import {printPlace} from '../HIR/PrintHIR';
+import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
+
+/**
+ * Validates that all store/load references to a given named identifier align with the
+ * "kind" of that variable (normal variable or context variable). For example, a context
+ * variable may not be loaded/stored with regular StoreLocal/LoadLocal/Destructure instructions.
+ */
+export function validateContextVariableLValues(fn: HIRFunction): void {
+  const identifierKinds: IdentifierKinds = new Map();
+  validateContextVariableLValuesImpl(fn, identifierKinds);
+}
+
+function validateContextVariableLValuesImpl(
+  fn: HIRFunction,
+  identifierKinds: IdentifierKinds,
+): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'DeclareContext':
+        case 'StoreContext': {
+          visit(identifierKinds, value.lvalue.place, 'context');
+          break;
+        }
+        case 'LoadContext': {
+          visit(identifierKinds, value.place, 'context');
+          break;
+        }
+        case 'StoreLocal':
+        case 'DeclareLocal': {
+          visit(identifierKinds, value.lvalue.place, 'local');
+          break;
+        }
+        case 'LoadLocal': {
+          visit(identifierKinds, value.place, 'local');
+          break;
+        }
+        case 'PostfixUpdate':
+        case 'PrefixUpdate': {
+          visit(identifierKinds, value.lvalue, 'local');
+          break;
+        }
+        case 'Destructure': {
+          for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
+            visit(identifierKinds, lvalue, 'destructure');
+          }
+          break;
+        }
+        case 'ObjectMethod':
+        case 'FunctionExpression': {
+          validateContextVariableLValuesImpl(
+            value.loweredFunc.func,
+            identifierKinds,
+          );
+          break;
+        }
+        default: {
+          for (const _ of eachInstructionValueLValue(value)) {
+            CompilerError.throwTodo({
+              reason:
+                'ValidateContextVariableLValues: unhandled instruction variant',
+              loc: value.loc,
+              description: `Handle '${value.kind} lvalues`,
+              suggestions: null,
+            });
+          }
+        }
+      }
+    }
+  }
+}
+
+type IdentifierKinds = Map<
+  IdentifierId,
+  {place: Place; kind: 'local' | 'context' | 'destructure'}
+>;
+
+function visit(
+  identifiers: IdentifierKinds,
+  place: Place,
+  kind: 'local' | 'context' | 'destructure',
+): void {
+  const prev = identifiers.get(place.identifier.id);
+  if (prev !== undefined) {
+    const wasContext = prev.kind === 'context';
+    const isContext = kind === 'context';
+    if (wasContext !== isContext) {
+      if (prev.kind === 'destructure' || kind === 'destructure') {
+        CompilerError.throwTodo({
+          reason: `Support destructuring of context variables`,
+          loc: kind === 'destructure' ? place.loc : prev.place.loc,
+          description: null,
+          suggestions: null,
+        });
+      }
+
+      CompilerError.invariant(false, {
+        reason:
+          'Expected all references to a variable to be consistently local or context references',
+        description: `Identifier ${printPlace(place)} is referenced as a ${kind} variable, but was previously referenced as a ${prev.kind} variable`,
+        message: `this is ${prev.kind}`,
+        loc: place.loc,
+      });
+    }
+  }
+  identifiers.set(place.identifier.id, {place, kind});
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts
new file mode 100644
index 00000000000..e8a0c7dec31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts
@@ -0,0 +1,1108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import prettyFormat from 'pretty-format';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  CompilerSuggestionOperation,
+  Effect,
+  SourceLocation,
+} from '..';
+import {CompilerSuggestion, ErrorCategory} from '../CompilerError';
+import {
+  areEqualPaths,
+  BlockId,
+  DependencyPath,
+  FinishMemoize,
+  GeneratedSource,
+  HIRFunction,
+  Identifier,
+  IdentifierId,
+  InstructionKind,
+  isEffectEventFunctionType,
+  isPrimitiveType,
+  isStableType,
+  isSubPath,
+  isSubPathIgnoringOptionals,
+  isUseRefType,
+  LoadGlobal,
+  ManualMemoDependency,
+  Place,
+  StartMemoize,
+} from '../HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {Result} from '../Utils/Result';
+import {retainWhere} from '../Utils/utils';
+import {isEffectHook} from './ValidateMemoizedEffectDependencies';
+
+const DEBUG = false;
+
+/**
+ * Validates that existing manual memoization is exhaustive and does not
+ * have extraneous dependencies. The goal of the validation is to ensure
+ * that auto-memoization will not substantially change the behavior of
+ * the program:
+ * - If the manual dependencies were non-exhaustive (missing important deps)
+ *   then auto-memoization will include those dependencies, and cause the
+ *   value to update *more* frequently.
+ * - If the manual dependencies had extraneous deps, then auto memoization
+ *   will remove them and cause the value to update *less* frequently.
+ *
+ * The implementation compares the manual dependencies against the values
+ * actually used within the memoization function
+ * - For each value V referenced in the memo function, either:
+ *   - If the value is non-reactive *and* a known stable type, then the
+ *     value may optionally be specified as an exact dependency.
+ *   - Otherwise, report an error unless there is a manual dependency that will
+ *     invalidate whenever V invalidates. If `x.y.z` is referenced, there must
+ *     be a manual dependency for `x.y.z`, `x.y`, or `x`. Note that we assume
+ *     no interior mutability, ie we assume that any changes to inner paths must
+ *     always cause the other path to change as well.
+ * - Any dependencies that do not correspond to a value referenced in the memo
+ *   function are considered extraneous and throw an error
+ *
+ * ## TODO: Invalid, Complex Deps
+ *
+ * Handle cases where the user deps were not simple identifiers + property chains.
+ * We try to detect this in ValidateUseMemo but we miss some cases. The problem
+ * is that invalid forms can be value blocks or function calls that don't get
+ * removed by DCE, leaving a structure like:
+ *
+ * StartMemoize
+ * t0 = <value to memoize>
+ * ...non-DCE'd code for manual deps...
+ * FinishMemoize decl=t0
+ *
+ * When we go to compute the dependencies, we then think that the user's manual dep
+ * logic is part of what the memo computation logic.
+ */
+export function validateExhaustiveDependencies(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const env = fn.env;
+  const reactive = collectReactiveIdentifiersHIR(fn);
+
+  const temporaries: Map<IdentifierId, Temporary> = new Map();
+  for (const param of fn.params) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    temporaries.set(place.identifier.id, {
+      kind: 'Local',
+      identifier: place.identifier,
+      path: [],
+      context: false,
+      loc: place.loc,
+    });
+  }
+  const error = new CompilerError();
+  let startMemo: StartMemoize | null = null;
+
+  function onStartMemoize(
+    value: StartMemoize,
+    dependencies: Set<InferredDependency>,
+    locals: Set<IdentifierId>,
+  ): void {
+    CompilerError.invariant(startMemo == null, {
+      reason: 'Unexpected nested memo calls',
+      loc: value.loc,
+    });
+    startMemo = value;
+    dependencies.clear();
+    locals.clear();
+  }
+  function onFinishMemoize(
+    value: FinishMemoize,
+    dependencies: Set<InferredDependency>,
+    locals: Set<IdentifierId>,
+  ): void {
+    CompilerError.invariant(
+      startMemo != null && startMemo.manualMemoId === value.manualMemoId,
+      {
+        reason: 'Found FinishMemoize without corresponding StartMemoize',
+        loc: value.loc,
+      },
+    );
+    if (env.config.validateExhaustiveMemoizationDependencies) {
+      visitCandidateDependency(value.decl, temporaries, dependencies, locals);
+      const inferred: Array<InferredDependency> = Array.from(dependencies);
+
+      const diagnostic = validateDependencies(
+        inferred,
+        startMemo.deps ?? [],
+        reactive,
+        startMemo.depsLoc,
+        ErrorCategory.MemoDependencies,
+        'all',
+      );
+      if (diagnostic != null) {
+        error.pushDiagnostic(diagnostic);
+      }
+    }
+
+    dependencies.clear();
+    locals.clear();
+    startMemo = null;
+  }
+
+  collectDependencies(
+    fn,
+    temporaries,
+    {
+      onStartMemoize,
+      onFinishMemoize,
+      onEffect: (inferred, manual, manualMemoLoc) => {
+        if (env.config.validateExhaustiveEffectDependencies === 'off') {
+          return;
+        }
+        if (DEBUG) {
+          console.log(Array.from(inferred, printInferredDependency));
+          console.log(Array.from(manual, printInferredDependency));
+        }
+        const manualDeps: Array<ManualMemoDependency> = [];
+        for (const dep of manual) {
+          if (dep.kind === 'Local') {
+            manualDeps.push({
+              root: {
+                kind: 'NamedLocal',
+                constant: false,
+                value: {
+                  effect: Effect.Read,
+                  identifier: dep.identifier,
+                  kind: 'Identifier',
+                  loc: dep.loc,
+                  reactive: reactive.has(dep.identifier.id),
+                },
+              },
+              path: dep.path,
+              loc: dep.loc,
+            });
+          } else {
+            manualDeps.push({
+              root: {
+                kind: 'Global',
+                identifierName: dep.binding.name,
+              },
+              path: [],
+              loc: GeneratedSource,
+            });
+          }
+        }
+        const effectReportMode =
+          typeof env.config.validateExhaustiveEffectDependencies === 'string'
+            ? env.config.validateExhaustiveEffectDependencies
+            : 'all';
+        const diagnostic = validateDependencies(
+          Array.from(inferred),
+          manualDeps,
+          reactive,
+          manualMemoLoc,
+          ErrorCategory.EffectExhaustiveDependencies,
+          effectReportMode,
+        );
+        if (diagnostic != null) {
+          error.pushDiagnostic(diagnostic);
+        }
+      },
+    },
+    false, // isFunctionExpression
+  );
+  return error.asResult();
+}
+
+function validateDependencies(
+  inferred: Array<InferredDependency>,
+  manualDependencies: Array<ManualMemoDependency>,
+  reactive: Set<IdentifierId>,
+  manualMemoLoc: SourceLocation | null,
+  category:
+    | ErrorCategory.MemoDependencies
+    | ErrorCategory.EffectExhaustiveDependencies,
+  exhaustiveDepsReportMode: 'all' | 'missing-only' | 'extra-only',
+): CompilerDiagnostic | null {
+  // Sort dependencies by name and path, with shorter/non-optional paths first
+  inferred.sort((a, b) => {
+    if (a.kind === 'Global' && b.kind == 'Global') {
+      return a.binding.name.localeCompare(b.binding.name);
+    } else if (a.kind == 'Local' && b.kind == 'Local') {
+      CompilerError.invariant(
+        a.identifier.name != null &&
+          a.identifier.name.kind === 'named' &&
+          b.identifier.name != null &&
+          b.identifier.name.kind === 'named',
+        {
+          reason: 'Expected dependencies to be named variables',
+          loc: a.loc,
+        },
+      );
+      if (a.identifier.id !== b.identifier.id) {
+        return a.identifier.name.value.localeCompare(b.identifier.name.value);
+      }
+      if (a.path.length !== b.path.length) {
+        // if a's path is shorter this returns a negative, sorting a first
+        return a.path.length - b.path.length;
+      }
+      for (let i = 0; i < a.path.length; i++) {
+        const aProperty = a.path[i];
+        const bProperty = b.path[i];
+        const aOptional = aProperty.optional ? 0 : 1;
+        const bOptional = bProperty.optional ? 0 : 1;
+        if (aOptional !== bOptional) {
+          // sort non-optionals first
+          return aOptional - bOptional;
+        } else if (aProperty.property !== bProperty.property) {
+          return String(aProperty.property).localeCompare(
+            String(bProperty.property),
+          );
+        }
+      }
+      return 0;
+    } else {
+      const aName =
+        a.kind === 'Global' ? a.binding.name : a.identifier.name?.value;
+      const bName =
+        b.kind === 'Global' ? b.binding.name : b.identifier.name?.value;
+      if (aName != null && bName != null) {
+        return aName.localeCompare(bName);
+      }
+      return 0;
+    }
+  });
+  // remove redundant inferred dependencies
+  retainWhere(inferred, (dep, ix) => {
+    const match = inferred.findIndex(prevDep => {
+      return (
+        isEqualTemporary(prevDep, dep) ||
+        (prevDep.kind === 'Local' &&
+          dep.kind === 'Local' &&
+          prevDep.identifier.id === dep.identifier.id &&
+          isSubPath(prevDep.path, dep.path))
+      );
+    });
+    // only retain entries that don't have a prior match
+    return match === -1 || match >= ix;
+  });
+  // Validate that all manual dependencies belong there
+  if (DEBUG) {
+    console.log('manual');
+    console.log(
+      manualDependencies
+        .map(x => '  ' + printManualMemoDependency(x))
+        .join('\n'),
+    );
+    console.log('inferred');
+    console.log(
+      inferred.map(x => '  ' + printInferredDependency(x)).join('\n'),
+    );
+  }
+  const matched: Set<ManualMemoDependency> = new Set();
+  const missing: Array<Extract<InferredDependency, {kind: 'Local'}>> = [];
+  const extra: Array<ManualMemoDependency> = [];
+  for (const inferredDependency of inferred) {
+    if (inferredDependency.kind === 'Global') {
+      for (const manualDependency of manualDependencies) {
+        if (
+          manualDependency.root.kind === 'Global' &&
+          manualDependency.root.identifierName ===
+            inferredDependency.binding.name
+        ) {
+          matched.add(manualDependency);
+          extra.push(manualDependency);
+        }
+      }
+      continue;
+    }
+    CompilerError.invariant(inferredDependency.kind === 'Local', {
+      reason: 'Unexpected function dependency',
+      loc: inferredDependency.loc,
+    });
+    /**
+     * Skip effect event functions as they are not valid dependencies
+     */
+    if (isEffectEventFunctionType(inferredDependency.identifier)) {
+      continue;
+    }
+    let hasMatchingManualDependency = false;
+    for (const manualDependency of manualDependencies) {
+      if (
+        manualDependency.root.kind === 'NamedLocal' &&
+        manualDependency.root.value.identifier.id ===
+          inferredDependency.identifier.id &&
+        (areEqualPaths(manualDependency.path, inferredDependency.path) ||
+          isSubPathIgnoringOptionals(
+            manualDependency.path,
+            inferredDependency.path,
+          ))
+      ) {
+        hasMatchingManualDependency = true;
+        matched.add(manualDependency);
+      }
+    }
+    if (
+      hasMatchingManualDependency ||
+      isOptionalDependency(inferredDependency, reactive)
+    ) {
+      continue;
+    }
+
+    missing.push(inferredDependency);
+  }
+
+  for (const dep of manualDependencies) {
+    if (matched.has(dep)) {
+      continue;
+    }
+    if (dep.root.kind === 'NamedLocal' && dep.root.constant) {
+      CompilerError.invariant(
+        !dep.root.value.reactive && isPrimitiveType(dep.root.value.identifier),
+        {
+          reason: 'Expected constant-folded dependency to be non-reactive',
+          loc: dep.root.value.loc,
+        },
+      );
+      /*
+       * Constant primitives can get constant-folded, which means we won't
+       * see a LoadLocal for the value within the memo function.
+       */
+      continue;
+    }
+    extra.push(dep);
+  }
+
+  // Filter based on report mode
+  const filteredMissing =
+    exhaustiveDepsReportMode === 'extra-only' ? [] : missing;
+  const filteredExtra =
+    exhaustiveDepsReportMode === 'missing-only' ? [] : extra;
+
+  if (filteredMissing.length !== 0 || filteredExtra.length !== 0) {
+    let suggestion: CompilerSuggestion | null = null;
+    if (
+      manualMemoLoc != null &&
+      typeof manualMemoLoc !== 'symbol' &&
+      manualMemoLoc.start.index != null &&
+      manualMemoLoc.end.index != null
+    ) {
+      suggestion = {
+        description: 'Update dependencies',
+        range: [manualMemoLoc.start.index, manualMemoLoc.end.index],
+        op: CompilerSuggestionOperation.Replace,
+        text: `[${inferred
+          .filter(
+            dep =>
+              dep.kind === 'Local' &&
+              !isOptionalDependency(dep, reactive) &&
+              !isEffectEventFunctionType(dep.identifier),
+          )
+          .map(printInferredDependency)
+          .join(', ')}]`,
+      };
+    }
+    const diagnostic = createDiagnostic(
+      category,
+      filteredMissing,
+      filteredExtra,
+      suggestion,
+    );
+    for (const dep of filteredMissing) {
+      let reactiveStableValueHint = '';
+      if (isStableType(dep.identifier)) {
+        reactiveStableValueHint =
+          '. Refs, setState functions, and other "stable" values generally do not need to be added ' +
+          'as dependencies, but this variable may change over time to point to different values';
+      }
+      diagnostic.withDetails({
+        kind: 'error',
+        message: `Missing dependency \`${printInferredDependency(dep)}\`${reactiveStableValueHint}`,
+        loc: dep.loc,
+      });
+    }
+    for (const dep of filteredExtra) {
+      if (dep.root.kind === 'Global') {
+        diagnostic.withDetails({
+          kind: 'error',
+          message:
+            `Unnecessary dependency \`${printManualMemoDependency(dep)}\`. ` +
+            'Values declared outside of a component/hook should not be listed as ' +
+            'dependencies as the component will not re-render if they change',
+          loc: dep.loc ?? manualMemoLoc,
+        });
+      } else {
+        const root = dep.root.value;
+        const matchingInferred = inferred.find(
+          (
+            inferredDep,
+          ): inferredDep is Extract<InferredDependency, {kind: 'Local'}> => {
+            return (
+              inferredDep.kind === 'Local' &&
+              inferredDep.identifier.id === root.identifier.id &&
+              isSubPathIgnoringOptionals(inferredDep.path, dep.path)
+            );
+          },
+        );
+        if (
+          matchingInferred != null &&
+          isEffectEventFunctionType(matchingInferred.identifier)
+        ) {
+          diagnostic.withDetails({
+            kind: 'error',
+            message:
+              `Functions returned from \`useEffectEvent\` must not be included in the dependency array. ` +
+              `Remove \`${printManualMemoDependency(dep)}\` from the dependencies.`,
+            loc: dep.loc ?? manualMemoLoc,
+          });
+        } else if (
+          matchingInferred != null &&
+          !isOptionalDependency(matchingInferred, reactive)
+        ) {
+          diagnostic.withDetails({
+            kind: 'error',
+            message:
+              `Overly precise dependency \`${printManualMemoDependency(dep)}\`, ` +
+              `use \`${printInferredDependency(matchingInferred)}\` instead`,
+            loc: dep.loc ?? manualMemoLoc,
+          });
+        } else {
+          /**
+           * Else this dependency doesn't correspond to anything referenced in the memo function,
+           * or is an optional dependency so we don't want to suggest adding it
+           */
+          diagnostic.withDetails({
+            kind: 'error',
+            message: `Unnecessary dependency \`${printManualMemoDependency(dep)}\``,
+            loc: dep.loc ?? manualMemoLoc,
+          });
+        }
+      }
+    }
+    if (suggestion != null) {
+      diagnostic.withDetails({
+        kind: 'hint',
+        message: `Inferred dependencies: \`${suggestion.text}\``,
+      });
+    }
+    return diagnostic;
+  }
+  return null;
+}
+
+function addDependency(
+  dep: Temporary,
+  dependencies: Set<InferredDependency>,
+  locals: Set<IdentifierId>,
+): void {
+  if (dep.kind === 'Aggregate') {
+    for (const x of dep.dependencies) {
+      addDependency(x, dependencies, locals);
+    }
+  } else if (dep.kind === 'Global') {
+    dependencies.add(dep);
+  } else if (!locals.has(dep.identifier.id)) {
+    dependencies.add(dep);
+  }
+}
+
+function visitCandidateDependency(
+  place: Place,
+  temporaries: Map<IdentifierId, Temporary>,
+  dependencies: Set<InferredDependency>,
+  locals: Set<IdentifierId>,
+): void {
+  const dep = temporaries.get(place.identifier.id);
+  if (dep != null) {
+    addDependency(dep, dependencies, locals);
+  }
+}
+
+/**
+ * This function determines the dependencies of the given function relative to
+ * its external context. Dependencies are collected eagerly, the first time an
+ * external variable is referenced, as opposed to trying to delay or aggregate
+ * calculation of dependencies until they are later "used".
+ *
+ * For example, in
+ *
+ * ```
+ * function f() {
+ *   let x = y; // we record a dependency on `y` here
+ *   ...
+ *   use(x); // as opposed to trying to delay that dependency until here
+ * }
+ * ```
+ *
+ * That said, LoadLocal/LoadContext does not immediately take a dependency,
+ * we store the dependency in a temporary and set it as used when that temporary
+ * is referenced as an operand.
+ *
+ * As we proceed through the function we track local variables that it creates
+ * and don't consider later references to these variables as dependencies.
+ *
+ * For function expressions we first collect the function's dependencies by
+ * calling this function recursively, _without_ taking into account whether
+ * the "external" variables it accesses are actually external or just locals
+ * in the parent. We then prune any locals and immediately consider any
+ * remaining externals that it accesses as a dependency:
+ *
+ * ```
+ * function Component() {
+ *   const local = ...;
+ *   const f = () => { return [external, local] };
+ * }
+ * ```
+ *
+ * Here we calculate `f` as having dependencies `external, `local` and save
+ * this into `temporaries`. We then also immediately take these as dependencies
+ * at the Component scope, at which point we filter out `local` as a local variable,
+ * leaving just a dependency on `external`.
+ *
+ * When calling this function on a top-level component or hook, the collected dependencies
+ * will only contain the globals that it accesses which isn't useful. Instead, passing
+ * onStartMemoize/onFinishMemoize callbacks allows looking at the dependencies within
+ * blocks of manual memoization.
+ */
+function collectDependencies(
+  fn: HIRFunction,
+  temporaries: Map<IdentifierId, Temporary>,
+  callbacks: {
+    onStartMemoize: (
+      startMemo: StartMemoize,
+      dependencies: Set<InferredDependency>,
+      locals: Set<IdentifierId>,
+    ) => void;
+    onFinishMemoize: (
+      finishMemo: FinishMemoize,
+      dependencies: Set<InferredDependency>,
+      locals: Set<IdentifierId>,
+    ) => void;
+    onEffect: (
+      inferred: Set<InferredDependency>,
+      manual: Set<InferredDependency>,
+      manualMemoLoc: SourceLocation | null,
+    ) => void;
+  } | null,
+  isFunctionExpression: boolean,
+): Extract<Temporary, {kind: 'Aggregate'}> {
+  const optionals = findOptionalPlaces(fn);
+  if (DEBUG) {
+    console.log(prettyFormat(optionals));
+  }
+  const locals: Set<IdentifierId> = new Set();
+  if (isFunctionExpression) {
+    for (const param of fn.params) {
+      const place = param.kind === 'Identifier' ? param : param.place;
+      locals.add(place.identifier.id);
+    }
+  }
+
+  const dependencies: Set<InferredDependency> = new Set();
+  function visit(place: Place): void {
+    visitCandidateDependency(place, temporaries, dependencies, locals);
+  }
+  for (const block of fn.body.blocks.values()) {
+    for (const phi of block.phis) {
+      const deps: Array<InferredDependency> = [];
+      for (const operand of phi.operands.values()) {
+        const dep = temporaries.get(operand.identifier.id);
+        if (dep == null) {
+          continue;
+        }
+        if (dep.kind === 'Aggregate') {
+          deps.push(...dep.dependencies);
+        } else {
+          deps.push(dep);
+        }
+      }
+      if (deps.length === 0) {
+        continue;
+      } else if (deps.length === 1) {
+        temporaries.set(phi.place.identifier.id, deps[0]!);
+      } else {
+        temporaries.set(phi.place.identifier.id, {
+          kind: 'Aggregate',
+          dependencies: new Set(deps),
+        });
+      }
+    }
+
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'LoadGlobal': {
+          temporaries.set(lvalue.identifier.id, {
+            kind: 'Global',
+            binding: value.binding,
+          });
+          break;
+        }
+        case 'LoadContext':
+        case 'LoadLocal': {
+          const temp = temporaries.get(value.place.identifier.id);
+          if (temp != null) {
+            if (temp.kind === 'Local') {
+              const local: Temporary = {...temp, loc: value.place.loc};
+              temporaries.set(lvalue.identifier.id, local);
+            } else {
+              temporaries.set(lvalue.identifier.id, temp);
+            }
+            if (locals.has(value.place.identifier.id)) {
+              locals.add(lvalue.identifier.id);
+            }
+          }
+          break;
+        }
+        case 'DeclareLocal': {
+          const local: Temporary = {
+            kind: 'Local',
+            identifier: value.lvalue.place.identifier,
+            path: [],
+            context: false,
+            loc: value.lvalue.place.loc,
+          };
+          temporaries.set(value.lvalue.place.identifier.id, local);
+          locals.add(value.lvalue.place.identifier.id);
+          break;
+        }
+        case 'StoreLocal': {
+          if (value.lvalue.place.identifier.name == null) {
+            const temp = temporaries.get(value.value.identifier.id);
+            if (temp != null) {
+              temporaries.set(value.lvalue.place.identifier.id, temp);
+            }
+            break;
+          }
+          visit(value.value);
+          if (value.lvalue.kind !== InstructionKind.Reassign) {
+            const local: Temporary = {
+              kind: 'Local',
+              identifier: value.lvalue.place.identifier,
+              path: [],
+              context: false,
+              loc: value.lvalue.place.loc,
+            };
+            temporaries.set(value.lvalue.place.identifier.id, local);
+            locals.add(value.lvalue.place.identifier.id);
+          }
+          break;
+        }
+        case 'DeclareContext': {
+          const local: Temporary = {
+            kind: 'Local',
+            identifier: value.lvalue.place.identifier,
+            path: [],
+            context: true,
+            loc: value.lvalue.place.loc,
+          };
+          temporaries.set(value.lvalue.place.identifier.id, local);
+          break;
+        }
+        case 'StoreContext': {
+          visit(value.value);
+          if (value.lvalue.kind !== InstructionKind.Reassign) {
+            const local: Temporary = {
+              kind: 'Local',
+              identifier: value.lvalue.place.identifier,
+              path: [],
+              context: true,
+              loc: value.lvalue.place.loc,
+            };
+            temporaries.set(value.lvalue.place.identifier.id, local);
+            locals.add(value.lvalue.place.identifier.id);
+          }
+          break;
+        }
+        case 'Destructure': {
+          visit(value.value);
+          if (value.lvalue.kind !== InstructionKind.Reassign) {
+            for (const lvalue of eachInstructionValueLValue(value)) {
+              const local: Temporary = {
+                kind: 'Local',
+                identifier: lvalue.identifier,
+                path: [],
+                context: false,
+                loc: lvalue.loc,
+              };
+              temporaries.set(lvalue.identifier.id, local);
+              locals.add(lvalue.identifier.id);
+            }
+          }
+          break;
+        }
+        case 'PropertyLoad': {
+          if (
+            typeof value.property === 'number' ||
+            (isUseRefType(value.object.identifier) &&
+              value.property === 'current')
+          ) {
+            visit(value.object);
+            break;
+          }
+          const object = temporaries.get(value.object.identifier.id);
+          if (object != null && object.kind === 'Local') {
+            const optional = optionals.get(value.object.identifier.id) ?? false;
+            const local: Temporary = {
+              kind: 'Local',
+              identifier: object.identifier,
+              context: object.context,
+              path: [
+                ...object.path,
+                {
+                  optional,
+                  property: value.property,
+                },
+              ],
+              loc: value.loc,
+            };
+            temporaries.set(lvalue.identifier.id, local);
+          }
+          break;
+        }
+        case 'FunctionExpression':
+        case 'ObjectMethod': {
+          const functionDeps = collectDependencies(
+            value.loweredFunc.func,
+            temporaries,
+            null,
+            true, // isFunctionExpression
+          );
+          temporaries.set(lvalue.identifier.id, functionDeps);
+          addDependency(functionDeps, dependencies, locals);
+          break;
+        }
+        case 'StartMemoize': {
+          const onStartMemoize = callbacks?.onStartMemoize;
+          if (onStartMemoize != null) {
+            onStartMemoize(value, dependencies, locals);
+          }
+          break;
+        }
+        case 'FinishMemoize': {
+          const onFinishMemoize = callbacks?.onFinishMemoize;
+          if (onFinishMemoize != null) {
+            onFinishMemoize(value, dependencies, locals);
+          }
+          break;
+        }
+        case 'ArrayExpression': {
+          const arrayDeps: Set<InferredDependency> = new Set();
+          for (const item of value.elements) {
+            if (item.kind === 'Hole') {
+              continue;
+            }
+            const place = item.kind === 'Identifier' ? item : item.place;
+            // Visit with alternative deps/locals to record manual dependencies
+            visitCandidateDependency(place, temporaries, arrayDeps, new Set());
+            // Visit normally to propagate inferred dependencies upward
+            visit(place);
+          }
+          temporaries.set(lvalue.identifier.id, {
+            kind: 'Aggregate',
+            dependencies: arrayDeps,
+            loc: value.loc,
+          });
+          break;
+        }
+        case 'CallExpression':
+        case 'MethodCall': {
+          const receiver =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+
+          const onEffect = callbacks?.onEffect;
+          if (onEffect != null && isEffectHook(receiver.identifier)) {
+            const [fn, deps] = value.args;
+            if (fn?.kind === 'Identifier' && deps?.kind === 'Identifier') {
+              const fnDeps = temporaries.get(fn.identifier.id);
+              const manualDeps = temporaries.get(deps.identifier.id);
+              if (
+                fnDeps?.kind === 'Aggregate' &&
+                manualDeps?.kind === 'Aggregate'
+              ) {
+                onEffect(
+                  fnDeps.dependencies,
+                  manualDeps.dependencies,
+                  manualDeps.loc ?? null,
+                );
+              }
+            }
+          }
+
+          // Ignore the method itself
+          for (const operand of eachInstructionValueOperand(value)) {
+            if (
+              value.kind === 'MethodCall' &&
+              operand.identifier.id === value.property.identifier.id
+            ) {
+              continue;
+            }
+            visit(operand);
+          }
+          break;
+        }
+        default: {
+          for (const operand of eachInstructionValueOperand(value)) {
+            visit(operand);
+          }
+          for (const lvalue of eachInstructionLValue(instr)) {
+            locals.add(lvalue.identifier.id);
+          }
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      if (optionals.has(operand.identifier.id)) {
+        continue;
+      }
+      visit(operand);
+    }
+  }
+  return {kind: 'Aggregate', dependencies};
+}
+
+function printInferredDependency(dep: InferredDependency): string {
+  switch (dep.kind) {
+    case 'Global': {
+      return dep.binding.name;
+    }
+    case 'Local': {
+      CompilerError.invariant(
+        dep.identifier.name != null && dep.identifier.name.kind === 'named',
+        {
+          reason: 'Expected dependencies to be named variables',
+          loc: dep.loc,
+        },
+      );
+      return `${dep.identifier.name.value}${dep.path.map(p => (p.optional ? '?' : '') + '.' + p.property).join('')}`;
+    }
+  }
+}
+
+function printManualMemoDependency(dep: ManualMemoDependency): string {
+  let identifierName: string;
+  if (dep.root.kind === 'Global') {
+    identifierName = dep.root.identifierName;
+  } else {
+    const name = dep.root.value.identifier.name;
+    CompilerError.invariant(name != null && name.kind === 'named', {
+      reason: 'Expected manual dependencies to be named variables',
+      loc: dep.root.value.loc,
+    });
+    identifierName = name.value;
+  }
+  return `${identifierName}${dep.path.map(p => (p.optional ? '?' : '') + '.' + p.property).join('')}`;
+}
+
+function isEqualTemporary(a: Temporary, b: Temporary): boolean {
+  switch (a.kind) {
+    case 'Aggregate': {
+      return false;
+    }
+    case 'Global': {
+      return b.kind === 'Global' && a.binding.name === b.binding.name;
+    }
+    case 'Local': {
+      return (
+        b.kind === 'Local' &&
+        a.identifier.id === b.identifier.id &&
+        areEqualPaths(a.path, b.path)
+      );
+    }
+  }
+}
+
+type Temporary =
+  | {kind: 'Global'; binding: LoadGlobal['binding']}
+  | {
+      kind: 'Local';
+      identifier: Identifier;
+      path: DependencyPath;
+      context: boolean;
+      loc: SourceLocation;
+    }
+  | {
+      kind: 'Aggregate';
+      dependencies: Set<InferredDependency>;
+      loc?: SourceLocation;
+    };
+type InferredDependency = Extract<Temporary, {kind: 'Local' | 'Global'}>;
+
+function collectReactiveIdentifiersHIR(fn: HIRFunction): Set<IdentifierId> {
+  const reactive = new Set<IdentifierId>();
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      for (const lvalue of eachInstructionLValue(instr)) {
+        if (lvalue.reactive) {
+          reactive.add(lvalue.identifier.id);
+        }
+      }
+      for (const operand of eachInstructionValueOperand(instr.value)) {
+        if (operand.reactive) {
+          reactive.add(operand.identifier.id);
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      if (operand.reactive) {
+        reactive.add(operand.identifier.id);
+      }
+    }
+  }
+  return reactive;
+}
+
+export function findOptionalPlaces(
+  fn: HIRFunction,
+): Map<IdentifierId, boolean> {
+  const optionals = new Map<IdentifierId, boolean>();
+  const visited: Set<BlockId> = new Set();
+  for (const [, block] of fn.body.blocks) {
+    if (visited.has(block.id)) {
+      continue;
+    }
+    if (block.terminal.kind === 'optional') {
+      visited.add(block.id);
+      const optionalTerminal = block.terminal;
+      let testBlock = fn.body.blocks.get(block.terminal.test)!;
+      const queue: Array<boolean | null> = [block.terminal.optional];
+      loop: while (true) {
+        visited.add(testBlock.id);
+        const terminal = testBlock.terminal;
+        switch (terminal.kind) {
+          case 'branch': {
+            const isOptional = queue.pop();
+            CompilerError.invariant(isOptional !== undefined, {
+              reason:
+                'Expected an optional value for each optional test condition',
+              loc: terminal.test.loc,
+            });
+            if (isOptional != null) {
+              optionals.set(terminal.test.identifier.id, isOptional);
+            }
+            if (terminal.fallthrough === optionalTerminal.fallthrough) {
+              // found it
+              const consequent = fn.body.blocks.get(terminal.consequent)!;
+              const last = consequent.instructions.at(-1);
+              if (last !== undefined && last.value.kind === 'StoreLocal') {
+                if (isOptional != null) {
+                  optionals.set(last.value.value.identifier.id, isOptional);
+                }
+              }
+              break loop;
+            } else {
+              testBlock = fn.body.blocks.get(terminal.fallthrough)!;
+            }
+            break;
+          }
+          case 'optional': {
+            queue.push(terminal.optional);
+            testBlock = fn.body.blocks.get(terminal.test)!;
+            break;
+          }
+          case 'logical':
+          case 'ternary': {
+            queue.push(null);
+            testBlock = fn.body.blocks.get(terminal.test)!;
+            break;
+          }
+
+          case 'sequence': {
+            // Do we need sequence?? In any case, don't push to queue bc there is no corresponding branch terminal
+            testBlock = fn.body.blocks.get(terminal.block)!;
+            break;
+          }
+          default: {
+            CompilerError.invariant(false, {
+              reason: `Unexpected terminal in optional`,
+              message: `Unexpected ${terminal.kind} in optional`,
+              loc: terminal.loc,
+            });
+          }
+        }
+      }
+      CompilerError.invariant(queue.length === 0, {
+        reason:
+          'Expected a matching number of conditional blocks and branch points',
+        loc: block.terminal.loc,
+      });
+    }
+  }
+  return optionals;
+}
+
+function isOptionalDependency(
+  inferredDependency: Extract<InferredDependency, {kind: 'Local'}>,
+  reactive: Set<IdentifierId>,
+): boolean {
+  return (
+    !reactive.has(inferredDependency.identifier.id) &&
+    (isStableType(inferredDependency.identifier) ||
+      isPrimitiveType(inferredDependency.identifier))
+  );
+}
+
+function createDiagnostic(
+  category:
+    | ErrorCategory.MemoDependencies
+    | ErrorCategory.EffectExhaustiveDependencies,
+  missing: Array<InferredDependency>,
+  extra: Array<ManualMemoDependency>,
+  suggestion: CompilerSuggestion | null,
+): CompilerDiagnostic {
+  let reason: string;
+  let description: string;
+
+  function joinMissingExtraDetail(
+    missingString: string,
+    extraString: string,
+    joinStr: string,
+  ): string {
+    return [
+      missing.length !== 0 ? missingString : null,
+      extra.length !== 0 ? extraString : null,
+    ]
+      .filter(Boolean)
+      .join(joinStr);
+  }
+
+  switch (category) {
+    case ErrorCategory.MemoDependencies: {
+      reason = `Found ${joinMissingExtraDetail('missing', 'extra', '/')} memoization dependencies`;
+      description = joinMissingExtraDetail(
+        'Missing dependencies can cause a value to update less often than it should, resulting in stale UI',
+        'Extra dependencies can cause a value to update more often than it should, resulting in performance' +
+          ' problems such as excessive renders or effects firing too often',
+        '. ',
+      );
+      break;
+    }
+    case ErrorCategory.EffectExhaustiveDependencies: {
+      reason = `Found ${joinMissingExtraDetail('missing', 'extra', '/')} effect dependencies`;
+      description = joinMissingExtraDetail(
+        'Missing dependencies can cause an effect to fire less often than it should',
+        'Extra dependencies can cause an effect to fire more often than it should, resulting' +
+          ' in performance problems such as excessive renders and side effects',
+        '. ',
+      );
+      break;
+    }
+    default: {
+      CompilerError.invariant(false, {
+        reason: `Unexpected error category: ${category}`,
+        loc: GeneratedSource,
+      });
+    }
+  }
+
+  return CompilerDiagnostic.create({
+    category,
+    reason,
+    description,
+    suggestions: suggestion != null ? [suggestion] : null,
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts
new file mode 100644
index 00000000000..7259041ec29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts
@@ -0,0 +1,465 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {
+  CompilerError,
+  CompilerErrorDetail,
+  ErrorCategory,
+} from '../CompilerError';
+import {computeUnconditionalBlocks} from '../HIR/ComputeUnconditionalBlocks';
+import {isHookName} from '../HIR/Environment';
+import {
+  HIRFunction,
+  IdentifierId,
+  Place,
+  SourceLocation,
+  getHookKind,
+} from '../HIR/HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {assertExhaustive} from '../Utils/utils';
+import {Result} from '../Utils/Result';
+
+/**
+ * Represents the possible kinds of value which may be stored at a given Place during
+ * abstract interpretation. The kinds form a lattice, with earlier items taking
+ * precedence over later items (see joinKinds()).
+ */
+enum Kind {
+  // A potential/known hook which was already used in an invalid way
+  Error = 'Error',
+
+  /*
+   * A known hook. Sources include:
+   * - LoadGlobal instructions whose type was inferred as a hook
+   * - PropertyLoad, ComputedLoad, and Destructuring instructions
+   *   where the object is a KnownHook
+   * - PropertyLoad, ComputedLoad, and Destructuring instructions
+   *   where the object is a Global and the property name is hook-like
+   */
+  KnownHook = 'KnownHook',
+
+  /*
+   * A potential hook. Sources include:
+   * - LValues (other than LoadGlobal) where the name is hook-like
+   * - PropertyLoad, ComputedLoad, and Destructuring instructions
+   *   where the object is a potential hook or the property name
+   *   is hook-like
+   */
+  PotentialHook = 'PotentialHook',
+
+  // LoadGlobal values whose type was not inferred as a hook
+  Global = 'Global',
+
+  // All other values, ie local variables
+  Local = 'Local',
+}
+
+function joinKinds(a: Kind, b: Kind): Kind {
+  if (a === Kind.Error || b === Kind.Error) {
+    return Kind.Error;
+  } else if (a === Kind.KnownHook || b === Kind.KnownHook) {
+    return Kind.KnownHook;
+  } else if (a === Kind.PotentialHook || b === Kind.PotentialHook) {
+    return Kind.PotentialHook;
+  } else if (a === Kind.Global || b === Kind.Global) {
+    return Kind.Global;
+  } else {
+    return Kind.Local;
+  }
+}
+
+/*
+ * Validates that the function honors the [Rules of Hooks](https://react.dev/warnings/invalid-hook-call-warning)
+ * rule that hooks may only be called and not otherwise referenced as first-class values.
+ *
+ * Specifically this pass implements the following rules:
+ * - Known hooks may only be called unconditionally, and cannot be used as first-class values.
+ *   See the note for Kind.KnownHook for sources of known hooks
+ * - Potential hooks may be referenced as first-class values, with the exception that they
+ *   may not appear as the callee of a conditional call.
+ *   See the note for Kind.PotentialHook for sources of potential hooks
+ */
+export function validateHooksUsage(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const unconditionalBlocks = computeUnconditionalBlocks(fn);
+
+  const errors = new CompilerError();
+  const errorsByPlace = new Map<t.SourceLocation, CompilerErrorDetail>();
+
+  function recordError(
+    loc: SourceLocation,
+    errorDetail: CompilerErrorDetail,
+  ): void {
+    if (typeof loc === 'symbol') {
+      errors.pushErrorDetail(errorDetail);
+    } else {
+      errorsByPlace.set(loc, errorDetail);
+    }
+  }
+
+  function recordConditionalHookError(place: Place): void {
+    // Once a particular hook has a conditional call error, don't report any further issues for this hook
+    setKind(place, Kind.Error);
+
+    const reason =
+      'Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)';
+    const previousError =
+      typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
+
+    /*
+     * In some circumstances such as optional calls, we may first encounter a "hook may not be referenced as normal values" error.
+     * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error
+     */
+    if (previousError === undefined || previousError.reason !== reason) {
+      recordError(
+        place.loc,
+        new CompilerErrorDetail({
+          category: ErrorCategory.Hooks,
+          description: null,
+          reason,
+          loc: place.loc,
+          suggestions: null,
+        }),
+      );
+    }
+  }
+  function recordInvalidHookUsageError(place: Place): void {
+    const previousError =
+      typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
+    if (previousError === undefined) {
+      recordError(
+        place.loc,
+        new CompilerErrorDetail({
+          category: ErrorCategory.Hooks,
+          description: null,
+          reason:
+            'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
+          loc: place.loc,
+          suggestions: null,
+        }),
+      );
+    }
+  }
+  function recordDynamicHookUsageError(place: Place): void {
+    const previousError =
+      typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
+    if (previousError === undefined) {
+      recordError(
+        place.loc,
+        new CompilerErrorDetail({
+          category: ErrorCategory.Hooks,
+          description: null,
+          reason:
+            'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
+          loc: place.loc,
+          suggestions: null,
+        }),
+      );
+    }
+  }
+
+  const valueKinds = new Map<IdentifierId, Kind>();
+  function getKindForPlace(place: Place): Kind {
+    const knownKind = valueKinds.get(place.identifier.id);
+    if (
+      place.identifier.name !== null &&
+      isHookName(place.identifier.name.value)
+    ) {
+      return joinKinds(knownKind ?? Kind.Local, Kind.PotentialHook);
+    } else {
+      return knownKind ?? Kind.Local;
+    }
+  }
+
+  function visitPlace(place: Place): void {
+    const kind = valueKinds.get(place.identifier.id);
+    if (kind === Kind.KnownHook) {
+      recordInvalidHookUsageError(place);
+    }
+  }
+
+  function setKind(place: Place, kind: Kind): void {
+    valueKinds.set(place.identifier.id, kind);
+  }
+
+  for (const param of fn.params) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    const kind = getKindForPlace(place);
+    setKind(place, kind);
+  }
+
+  for (const [, block] of fn.body.blocks) {
+    for (const phi of block.phis) {
+      let kind: Kind =
+        phi.place.identifier.name !== null &&
+        isHookName(phi.place.identifier.name.value)
+          ? Kind.PotentialHook
+          : Kind.Local;
+      for (const [, operand] of phi.operands) {
+        const operandKind = valueKinds.get(operand.identifier.id);
+        /*
+         * NOTE: we currently skip operands whose value is unknown
+         * (which can only occur for functions with loops), we may
+         * cause us to miss invalid code in some cases. We should
+         * expand this to a fixpoint iteration in a follow-up.
+         */
+        if (operandKind !== undefined) {
+          kind = joinKinds(kind, operandKind);
+        }
+      }
+      valueKinds.set(phi.place.identifier.id, kind);
+    }
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'LoadGlobal': {
+          /*
+           * Globals are the one source of known hooks: they are either
+           * directly a hook, or infer a Global kind from which knownhooks
+           * can be derived later via property access (PropertyLoad etc)
+           */
+          if (getHookKind(fn.env, instr.lvalue.identifier) != null) {
+            setKind(instr.lvalue, Kind.KnownHook);
+          } else {
+            setKind(instr.lvalue, Kind.Global);
+          }
+          break;
+        }
+        case 'LoadContext':
+        case 'LoadLocal': {
+          visitPlace(instr.value.place);
+          const kind = getKindForPlace(instr.value.place);
+          setKind(instr.lvalue, kind);
+          break;
+        }
+        case 'StoreLocal':
+        case 'StoreContext': {
+          visitPlace(instr.value.value);
+          const kind = joinKinds(
+            getKindForPlace(instr.value.value),
+            getKindForPlace(instr.value.lvalue.place),
+          );
+          setKind(instr.value.lvalue.place, kind);
+          setKind(instr.lvalue, kind);
+          break;
+        }
+        case 'ComputedLoad': {
+          visitPlace(instr.value.object);
+          const kind = getKindForPlace(instr.value.object);
+          setKind(instr.lvalue, joinKinds(getKindForPlace(instr.lvalue), kind));
+          break;
+        }
+        case 'PropertyLoad': {
+          const objectKind = getKindForPlace(instr.value.object);
+          const isHookProperty =
+            typeof instr.value.property === 'string' &&
+            isHookName(instr.value.property);
+          let kind: Kind;
+          switch (objectKind) {
+            case Kind.Error: {
+              kind = Kind.Error;
+              break;
+            }
+            case Kind.KnownHook: {
+              /**
+               * const useFoo;
+               * function Component() {
+               *   let x = useFoo.useBar; // useFoo is KnownHook, any property from it inherits KnownHook
+               * }
+               */
+              kind = isHookProperty ? Kind.KnownHook : Kind.Local;
+              break;
+            }
+            case Kind.PotentialHook: {
+              /**
+               * function Component(props) {
+               *   let useFoo;
+               *   let x = useFoo.useBar; // useFoo is PotentialHook, any property from it inherits PotentialHook
+               * }
+               */
+              kind = Kind.PotentialHook;
+              break;
+            }
+            case Kind.Global: {
+              /**
+               * function Component() {
+               *   let x = React.useState; // hook-named property of global is knownhook
+               *   let y = React.foo; // else inherit Global
+               * }
+               */
+              kind = isHookProperty ? Kind.KnownHook : Kind.Global;
+              break;
+            }
+            case Kind.Local: {
+              /**
+               * function Component() {
+               *   let o = createObject();
+               *   let x = o.useState; // hook-named property of local is potentialhook
+               *   let y = o.foo; // else inherit local
+               * }
+               */
+              kind = isHookProperty ? Kind.PotentialHook : Kind.Local;
+              break;
+            }
+            default: {
+              assertExhaustive(objectKind, `Unexpected kind \`${objectKind}\``);
+            }
+          }
+          setKind(instr.lvalue, kind);
+          break;
+        }
+        case 'CallExpression': {
+          const calleeKind = getKindForPlace(instr.value.callee);
+          const isHookCallee =
+            calleeKind === Kind.KnownHook || calleeKind === Kind.PotentialHook;
+          if (isHookCallee && !unconditionalBlocks.has(block.id)) {
+            recordConditionalHookError(instr.value.callee);
+          } else if (calleeKind === Kind.PotentialHook) {
+            recordDynamicHookUsageError(instr.value.callee);
+          }
+          /**
+           * We intentionally skip the callee because it's validated above
+           */
+          for (const operand of eachInstructionOperand(instr)) {
+            if (operand === instr.value.callee) {
+              continue;
+            }
+            visitPlace(operand);
+          }
+          break;
+        }
+        case 'MethodCall': {
+          const calleeKind = getKindForPlace(instr.value.property);
+          const isHookCallee =
+            calleeKind === Kind.KnownHook || calleeKind === Kind.PotentialHook;
+          if (isHookCallee && !unconditionalBlocks.has(block.id)) {
+            recordConditionalHookError(instr.value.property);
+          } else if (calleeKind === Kind.PotentialHook) {
+            recordDynamicHookUsageError(instr.value.property);
+          }
+          /*
+           * We intentionally skip the property because it's validated above
+           */
+          for (const operand of eachInstructionOperand(instr)) {
+            if (operand === instr.value.property) {
+              continue;
+            }
+            visitPlace(operand);
+          }
+          break;
+        }
+        case 'Destructure': {
+          visitPlace(instr.value.value);
+          const objectKind = getKindForPlace(instr.value.value);
+          for (const lvalue of eachInstructionLValue(instr)) {
+            const isHookProperty =
+              lvalue.identifier.name !== null &&
+              isHookName(lvalue.identifier.name.value);
+            let kind: Kind;
+            switch (objectKind) {
+              case Kind.Error: {
+                kind = Kind.Error;
+                break;
+              }
+              case Kind.KnownHook: {
+                kind = Kind.KnownHook;
+                break;
+              }
+              case Kind.PotentialHook: {
+                kind = Kind.PotentialHook;
+                break;
+              }
+              case Kind.Global: {
+                kind = isHookProperty ? Kind.KnownHook : Kind.Global;
+                break;
+              }
+              case Kind.Local: {
+                kind = isHookProperty ? Kind.PotentialHook : Kind.Local;
+                break;
+              }
+              default: {
+                assertExhaustive(
+                  objectKind,
+                  `Unexpected kind \`${objectKind}\``,
+                );
+              }
+            }
+            setKind(lvalue, kind);
+          }
+          break;
+        }
+        case 'ObjectMethod':
+        case 'FunctionExpression': {
+          visitFunctionExpression(errors, instr.value.loweredFunc.func);
+          break;
+        }
+        default: {
+          /*
+           * Else check usages of operands, but do *not* flow properties
+           * from operands into the lvalues. For example, `let x = identity(y)`
+           * does not infer `x` as a potential hook even if `y` is a potential hook.
+           */
+          for (const operand of eachInstructionOperand(instr)) {
+            visitPlace(operand);
+          }
+          for (const lvalue of eachInstructionLValue(instr)) {
+            const kind = getKindForPlace(lvalue);
+            setKind(lvalue, kind);
+          }
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      visitPlace(operand);
+    }
+  }
+
+  for (const [, error] of errorsByPlace) {
+    errors.pushErrorDetail(error);
+  }
+  return errors.asResult();
+}
+
+function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'ObjectMethod':
+        case 'FunctionExpression': {
+          visitFunctionExpression(errors, instr.value.loweredFunc.func);
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const callee =
+            instr.value.kind === 'CallExpression'
+              ? instr.value.callee
+              : instr.value.property;
+          const hookKind = getHookKind(fn.env, callee.identifier);
+          if (hookKind != null) {
+            errors.pushErrorDetail(
+              new CompilerErrorDetail({
+                category: ErrorCategory.Hooks,
+                reason:
+                  'Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)',
+                loc: callee.loc,
+                description: `Cannot call ${hookKind === 'Custom' ? 'hook' : hookKind} within a function expression`,
+                suggestions: null,
+              }),
+            );
+          }
+          break;
+        }
+      }
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts
new file mode 100644
index 00000000000..0bdb4835700
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic, CompilerError, Effect} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {HIRFunction, IdentifierId, Place} from '../HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
+
+/**
+ * Validates that local variables cannot be reassigned after render.
+ * This prevents a category of bugs in which a closure captures a
+ * binding from one render but does not update
+ */
+export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
+  const contextVariables = new Set<IdentifierId>();
+  const reassignment = getContextReassignment(
+    fn,
+    contextVariables,
+    false,
+    false,
+  );
+  if (reassignment !== null) {
+    const errors = new CompilerError();
+    const variable =
+      reassignment.identifier.name != null &&
+      reassignment.identifier.name.kind === 'named'
+        ? `\`${reassignment.identifier.name.value}\``
+        : 'variable';
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Immutability,
+        reason: 'Cannot reassign variable after render completes',
+        description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`,
+      }).withDetails({
+        kind: 'error',
+        loc: reassignment.loc,
+        message: `Cannot reassign ${variable} after render completes`,
+      }),
+    );
+    throw errors;
+  }
+}
+
+function getContextReassignment(
+  fn: HIRFunction,
+  contextVariables: Set<IdentifierId>,
+  isFunctionExpression: boolean,
+  isAsync: boolean,
+): Place | null {
+  const reassigningFunctions = new Map<IdentifierId, Place>();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'FunctionExpression':
+        case 'ObjectMethod': {
+          let reassignment = getContextReassignment(
+            value.loweredFunc.func,
+            contextVariables,
+            true,
+            isAsync || value.loweredFunc.func.async,
+          );
+          if (reassignment === null) {
+            // If the function itself doesn't reassign, does one of its dependencies?
+            for (const operand of eachInstructionValueOperand(value)) {
+              const reassignmentFromOperand = reassigningFunctions.get(
+                operand.identifier.id,
+              );
+              if (reassignmentFromOperand !== undefined) {
+                reassignment = reassignmentFromOperand;
+                break;
+              }
+            }
+          }
+          // if the function or its depends reassign, propagate that fact on the lvalue
+          if (reassignment !== null) {
+            if (isAsync || value.loweredFunc.func.async) {
+              const errors = new CompilerError();
+              const variable =
+                reassignment.identifier.name !== null &&
+                reassignment.identifier.name.kind === 'named'
+                  ? `\`${reassignment.identifier.name.value}\``
+                  : 'variable';
+              errors.pushDiagnostic(
+                CompilerDiagnostic.create({
+                  category: ErrorCategory.Immutability,
+                  reason: 'Cannot reassign variable in async function',
+                  description:
+                    'Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead',
+                }).withDetails({
+                  kind: 'error',
+                  loc: reassignment.loc,
+                  message: `Cannot reassign ${variable}`,
+                }),
+              );
+              throw errors;
+            }
+            reassigningFunctions.set(lvalue.identifier.id, reassignment);
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          const reassignment = reassigningFunctions.get(
+            value.value.identifier.id,
+          );
+          if (reassignment !== undefined) {
+            reassigningFunctions.set(
+              value.lvalue.place.identifier.id,
+              reassignment,
+            );
+            reassigningFunctions.set(lvalue.identifier.id, reassignment);
+          }
+          break;
+        }
+        case 'LoadLocal': {
+          const reassignment = reassigningFunctions.get(
+            value.place.identifier.id,
+          );
+          if (reassignment !== undefined) {
+            reassigningFunctions.set(lvalue.identifier.id, reassignment);
+          }
+          break;
+        }
+        case 'DeclareContext': {
+          if (!isFunctionExpression) {
+            contextVariables.add(value.lvalue.place.identifier.id);
+          }
+          break;
+        }
+        case 'StoreContext': {
+          if (isFunctionExpression) {
+            if (contextVariables.has(value.lvalue.place.identifier.id)) {
+              return value.lvalue.place;
+            }
+          } else {
+            /*
+             * We only track reassignments of variables defined in the outer
+             * component or hook.
+             */
+            contextVariables.add(value.lvalue.place.identifier.id);
+          }
+          const reassignment = reassigningFunctions.get(
+            value.value.identifier.id,
+          );
+          if (reassignment !== undefined) {
+            reassigningFunctions.set(
+              value.lvalue.place.identifier.id,
+              reassignment,
+            );
+            reassigningFunctions.set(lvalue.identifier.id, reassignment);
+          }
+          break;
+        }
+        default: {
+          let operands = eachInstructionValueOperand(value);
+          // If we're calling a function that doesn't let its arguments escape, only test the callee
+          if (value.kind === 'CallExpression') {
+            const signature = getFunctionCallSignature(
+              fn.env,
+              value.callee.identifier.type,
+            );
+            if (signature?.noAlias) {
+              operands = [value.callee];
+            }
+          } else if (value.kind === 'MethodCall') {
+            const signature = getFunctionCallSignature(
+              fn.env,
+              value.property.identifier.type,
+            );
+            if (signature?.noAlias) {
+              operands = [value.receiver, value.property];
+            }
+          } else if (value.kind === 'TaggedTemplateExpression') {
+            const signature = getFunctionCallSignature(
+              fn.env,
+              value.tag.identifier.type,
+            );
+            if (signature?.noAlias) {
+              operands = [value.tag];
+            }
+          }
+          for (const operand of operands) {
+            CompilerError.invariant(operand.effect !== Effect.Unknown, {
+              reason: `Expected effects to be inferred prior to ValidateLocalsNotReassignedAfterRender`,
+              loc: operand.loc,
+            });
+            const reassignment = reassigningFunctions.get(
+              operand.identifier.id,
+            );
+            if (reassignment !== undefined) {
+              /*
+               * Functions that reassign local variables are inherently mutable and are unsafe to pass
+               * to a place that expects a frozen value. Propagate the reassignment upward.
+               */
+              if (operand.effect === Effect.Freeze) {
+                return reassignment;
+              } else {
+                /*
+                 * If the operand is not frozen but it does reassign, then the lvalues
+                 * of the instruction could also be reassigning
+                 */
+                for (const lval of eachInstructionLValue(instr)) {
+                  reassigningFunctions.set(lval.identifier.id, reassignment);
+                }
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      const reassignment = reassigningFunctions.get(operand.identifier.id);
+      if (reassignment !== undefined) {
+        return reassignment;
+      }
+    }
+  }
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateMemoizedEffectDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateMemoizedEffectDependencies.ts
new file mode 100644
index 00000000000..15d0be57fcf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateMemoizedEffectDependencies.ts
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {
+  Identifier,
+  Instruction,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ScopeId,
+  isUseEffectHookType,
+  isUseInsertionEffectHookType,
+  isUseLayoutEffectHookType,
+} from '../HIR';
+import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
+import {
+  ReactiveFunctionVisitor,
+  visitReactiveFunction,
+} from '../ReactiveScopes/visitors';
+import {Result} from '../Utils/Result';
+
+/**
+ * Validates that all known effect dependencies are memoized. The algorithm checks two things:
+ * - Disallow effect dependencies that should be memoized (have a reactive scope assigned) but
+ *   where that reactive scope does not exist. This checks for cases where a reactive scope was
+ *   pruned for some reason, such as spanning a hook.
+ * - Disallow effect dependencies whose a mutable range that encompasses the effect call.
+ *
+ * This latter check corresponds to any values which Forget knows may be mutable and may be mutated
+ * after the effect. Note that it's possible Forget may miss not memoize a value for some other reason,
+ * but in general this is a bug. The only reason Forget would _choose_ to skip memoization of an
+ * effect dependency is because it's mutated later.
+ *
+ * Example:
+ *
+ * ```javascript
+ * const object = {}; // mutable range starts here...
+ *
+ * useEffect(() => {
+ *   console.log('hello');
+ * }, [object]); // the dependency array picks up the mutable range of its mutable contents
+ *
+ * mutate(object); // ... mutable range ends here after this mutation
+ * ```
+ */
+export function validateMemoizedEffectDependencies(
+  fn: ReactiveFunction,
+): Result<void, CompilerError> {
+  const errors = new CompilerError();
+  visitReactiveFunction(fn, new Visitor(), errors);
+  return errors.asResult();
+}
+
+class Visitor extends ReactiveFunctionVisitor<CompilerError> {
+  scopes: Set<ScopeId> = new Set();
+
+  override visitScope(
+    scopeBlock: ReactiveScopeBlock,
+    state: CompilerError,
+  ): void {
+    this.traverseScope(scopeBlock, state);
+
+    /*
+     * Record scopes that exist in the AST so we can later check to see if
+     * effect dependencies which should be memoized (have a scope assigned)
+     * actually are memoized (that scope exists).
+     * However, we only record scopes if *their* dependencies are also
+     * memoized, allowing a transitive memoization check.
+     */
+    let areDependenciesMemoized = true;
+    for (const dep of scopeBlock.scope.dependencies) {
+      if (isUnmemoized(dep.identifier, this.scopes)) {
+        areDependenciesMemoized = false;
+        break;
+      }
+    }
+    if (areDependenciesMemoized) {
+      this.scopes.add(scopeBlock.scope.id);
+      for (const id of scopeBlock.scope.merged) {
+        this.scopes.add(id);
+      }
+    }
+  }
+
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    state: CompilerError,
+  ): void {
+    this.traverseInstruction(instruction, state);
+    if (
+      instruction.value.kind === 'CallExpression' &&
+      isEffectHook(instruction.value.callee.identifier) &&
+      instruction.value.args.length >= 2
+    ) {
+      const deps = instruction.value.args[1]!;
+      if (
+        deps.kind === 'Identifier' &&
+        /*
+         * TODO: isMutable is not safe to call here as it relies on identifier mutableRange which is no longer valid at this point
+         * in the pipeline
+         */
+        (isMutable(instruction as Instruction, deps) ||
+          isUnmemoized(deps.identifier, this.scopes))
+      ) {
+        state.push({
+          category: ErrorCategory.EffectDependencies,
+          reason:
+            'React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior',
+          description: null,
+          loc: typeof instruction.loc !== 'symbol' ? instruction.loc : null,
+          suggestions: null,
+        });
+      }
+    }
+  }
+}
+
+function isUnmemoized(operand: Identifier, scopes: Set<ScopeId>): boolean {
+  return operand.scope != null && !scopes.has(operand.scope.id);
+}
+
+export function isEffectHook(identifier: Identifier): boolean {
+  return (
+    isUseEffectHookType(identifier) ||
+    isUseLayoutEffectHookType(identifier) ||
+    isUseInsertionEffectHookType(identifier)
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoCapitalizedCalls.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoCapitalizedCalls.ts
new file mode 100644
index 00000000000..0d0242d25c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoCapitalizedCalls.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, EnvironmentConfig} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {HIRFunction, IdentifierId} from '../HIR';
+import {DEFAULT_GLOBALS} from '../HIR/Globals';
+import {Result} from '../Utils/Result';
+
+export function validateNoCapitalizedCalls(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const envConfig: EnvironmentConfig = fn.env.config;
+  const ALLOW_LIST = new Set([
+    ...DEFAULT_GLOBALS.keys(),
+    ...(envConfig.validateNoCapitalizedCalls ?? []),
+  ]);
+  /*
+   * The hook pattern may allow uppercase names, like React$useState, so we need to be sure that we
+   * do not error in those cases
+   */
+  const hookPattern =
+    envConfig.hookPattern != null ? new RegExp(envConfig.hookPattern) : null;
+  const isAllowed = (name: string): boolean => {
+    return (
+      ALLOW_LIST.has(name) || (hookPattern != null && hookPattern.test(name))
+    );
+  };
+
+  const errors = new CompilerError();
+  const capitalLoadGlobals = new Map<IdentifierId, string>();
+  const capitalizedProperties = new Map<IdentifierId, string>();
+  const reason =
+    'Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config';
+  for (const [, block] of fn.body.blocks) {
+    for (const {lvalue, value} of block.instructions) {
+      switch (value.kind) {
+        case 'LoadGlobal': {
+          if (
+            value.binding.name != '' &&
+            /^[A-Z]/.test(value.binding.name) &&
+            // We don't want to flag CONSTANTS()
+            !(value.binding.name.toUpperCase() === value.binding.name) &&
+            !isAllowed(value.binding.name)
+          ) {
+            capitalLoadGlobals.set(lvalue.identifier.id, value.binding.name);
+          }
+
+          break;
+        }
+        case 'CallExpression': {
+          const calleeIdentifier = value.callee.identifier.id;
+          const calleeName = capitalLoadGlobals.get(calleeIdentifier);
+          if (calleeName != null) {
+            CompilerError.throwInvalidReact({
+              category: ErrorCategory.CapitalizedCalls,
+              reason,
+              description: `${calleeName} may be a component`,
+              loc: value.loc,
+              suggestions: null,
+            });
+          }
+          break;
+        }
+        case 'PropertyLoad': {
+          // Start conservative and disallow all capitalized method calls
+          if (
+            typeof value.property === 'string' &&
+            /^[A-Z]/.test(value.property)
+          ) {
+            capitalizedProperties.set(lvalue.identifier.id, value.property);
+          }
+          break;
+        }
+        case 'MethodCall': {
+          const propertyIdentifier = value.property.identifier.id;
+          const propertyName = capitalizedProperties.get(propertyIdentifier);
+          if (propertyName != null) {
+            errors.push({
+              category: ErrorCategory.CapitalizedCalls,
+              reason,
+              description: `${propertyName} may be a component`,
+              loc: value.loc,
+              suggestions: null,
+            });
+          }
+          break;
+        }
+      }
+    }
+  }
+  return errors.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects.ts
new file mode 100644
index 00000000000..a80f1efc636
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects.ts
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, SourceLocation} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {
+  ArrayExpression,
+  BlockId,
+  FunctionExpression,
+  HIRFunction,
+  IdentifierId,
+  isSetStateType,
+  isUseEffectHookType,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+
+/**
+ * Validates that useEffect is not used for derived computations which could/should
+ * be performed in render.
+ *
+ * See https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state
+ *
+ * Example:
+ *
+ * ```
+ * // 🔴 Avoid: redundant state and unnecessary Effect
+ * const [fullName, setFullName] = useState('');
+ * useEffect(() => {
+ *   setFullName(firstName + ' ' + lastName);
+ * }, [firstName, lastName]);
+ * ```
+ *
+ * Instead use:
+ *
+ * ```
+ * // ✅ Good: calculated during rendering
+ * const fullName = firstName + ' ' + lastName;
+ * ```
+ */
+export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
+  const candidateDependencies: Map<IdentifierId, ArrayExpression> = new Map();
+  const functions: Map<IdentifierId, FunctionExpression> = new Map();
+  const locals: Map<IdentifierId, IdentifierId> = new Map();
+
+  const errors = new CompilerError();
+
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      if (value.kind === 'LoadLocal') {
+        locals.set(lvalue.identifier.id, value.place.identifier.id);
+      } else if (value.kind === 'ArrayExpression') {
+        candidateDependencies.set(lvalue.identifier.id, value);
+      } else if (value.kind === 'FunctionExpression') {
+        functions.set(lvalue.identifier.id, value);
+      } else if (
+        value.kind === 'CallExpression' ||
+        value.kind === 'MethodCall'
+      ) {
+        const callee =
+          value.kind === 'CallExpression' ? value.callee : value.property;
+        if (
+          isUseEffectHookType(callee.identifier) &&
+          value.args.length === 2 &&
+          value.args[0].kind === 'Identifier' &&
+          value.args[1].kind === 'Identifier'
+        ) {
+          const effectFunction = functions.get(value.args[0].identifier.id);
+          const deps = candidateDependencies.get(value.args[1].identifier.id);
+          if (
+            effectFunction != null &&
+            deps != null &&
+            deps.elements.length !== 0 &&
+            deps.elements.every(element => element.kind === 'Identifier')
+          ) {
+            const dependencies: Array<IdentifierId> = deps.elements.map(dep => {
+              CompilerError.invariant(dep.kind === 'Identifier', {
+                reason: `Dependency is checked as a place above`,
+                loc: value.loc,
+              });
+              return locals.get(dep.identifier.id) ?? dep.identifier.id;
+            });
+            validateEffect(
+              effectFunction.loweredFunc.func,
+              dependencies,
+              errors,
+            );
+          }
+        }
+      }
+    }
+  }
+  if (errors.hasAnyErrors()) {
+    throw errors;
+  }
+}
+
+function validateEffect(
+  effectFunction: HIRFunction,
+  effectDeps: Array<IdentifierId>,
+  errors: CompilerError,
+): void {
+  for (const operand of effectFunction.context) {
+    if (isSetStateType(operand.identifier)) {
+      continue;
+    } else if (effectDeps.find(dep => dep === operand.identifier.id) != null) {
+      continue;
+    } else {
+      // Captured something other than the effect dep or setState
+      return;
+    }
+  }
+  for (const dep of effectDeps) {
+    if (
+      effectFunction.context.find(operand => operand.identifier.id === dep) ==
+      null
+    ) {
+      // effect dep wasn't actually used in the function
+      return;
+    }
+  }
+
+  const seenBlocks: Set<BlockId> = new Set();
+  const values: Map<IdentifierId, Array<IdentifierId>> = new Map();
+  for (const dep of effectDeps) {
+    values.set(dep, [dep]);
+  }
+
+  const setStateLocations: Array<SourceLocation> = [];
+  for (const block of effectFunction.body.blocks.values()) {
+    for (const pred of block.preds) {
+      if (!seenBlocks.has(pred)) {
+        // skip if block has a back edge
+        return;
+      }
+    }
+    for (const phi of block.phis) {
+      const aggregateDeps: Set<IdentifierId> = new Set();
+      for (const operand of phi.operands.values()) {
+        const deps = values.get(operand.identifier.id);
+        if (deps != null) {
+          for (const dep of deps) {
+            aggregateDeps.add(dep);
+          }
+        }
+      }
+      if (aggregateDeps.size !== 0) {
+        values.set(phi.place.identifier.id, Array.from(aggregateDeps));
+      }
+    }
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'Primitive':
+        case 'JSXText':
+        case 'LoadGlobal': {
+          break;
+        }
+        case 'LoadLocal': {
+          const deps = values.get(instr.value.place.identifier.id);
+          if (deps != null) {
+            values.set(instr.lvalue.identifier.id, deps);
+          }
+          break;
+        }
+        case 'ComputedLoad':
+        case 'PropertyLoad':
+        case 'BinaryExpression':
+        case 'TemplateLiteral':
+        case 'CallExpression':
+        case 'MethodCall': {
+          const aggregateDeps: Set<IdentifierId> = new Set();
+          for (const operand of eachInstructionValueOperand(instr.value)) {
+            const deps = values.get(operand.identifier.id);
+            if (deps != null) {
+              for (const dep of deps) {
+                aggregateDeps.add(dep);
+              }
+            }
+          }
+          if (aggregateDeps.size !== 0) {
+            values.set(instr.lvalue.identifier.id, Array.from(aggregateDeps));
+          }
+
+          if (
+            instr.value.kind === 'CallExpression' &&
+            isSetStateType(instr.value.callee.identifier) &&
+            instr.value.args.length === 1 &&
+            instr.value.args[0].kind === 'Identifier'
+          ) {
+            const deps = values.get(instr.value.args[0].identifier.id);
+            if (deps != null && new Set(deps).size === effectDeps.length) {
+              setStateLocations.push(instr.value.callee.loc);
+            } else {
+              // doesn't depend on any deps
+              return;
+            }
+          }
+          break;
+        }
+        default: {
+          return;
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      if (values.has(operand.identifier.id)) {
+        //
+        return;
+      }
+    }
+    seenBlocks.add(block.id);
+  }
+
+  for (const loc of setStateLocations) {
+    errors.push({
+      category: ErrorCategory.EffectDerivationsOfState,
+      reason:
+        'Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)',
+      description: null,
+      loc,
+      suggestions: null,
+    });
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts
new file mode 100644
index 00000000000..616c6d20250
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts
@@ -0,0 +1,842 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Result} from '../Utils/Result';
+import {CompilerDiagnostic, CompilerError, Effect} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {
+  BlockId,
+  FunctionExpression,
+  HIRFunction,
+  IdentifierId,
+  isSetStateType,
+  isUseEffectHookType,
+  Place,
+  CallExpression,
+  Instruction,
+  isUseStateType,
+  BasicBlock,
+  isUseRefType,
+  SourceLocation,
+  ArrayExpression,
+} from '../HIR';
+import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
+import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
+import {assertExhaustive} from '../Utils/utils';
+
+type TypeOfValue = 'ignored' | 'fromProps' | 'fromState' | 'fromPropsAndState';
+
+type DerivationMetadata = {
+  typeOfValue: TypeOfValue;
+  place: Place;
+  sourcesIds: Set<IdentifierId>;
+  isStateSource: boolean;
+};
+
+type EffectMetadata = {
+  effect: HIRFunction;
+  dependencies: ArrayExpression;
+};
+
+type ValidationContext = {
+  readonly functions: Map<IdentifierId, FunctionExpression>;
+  readonly candidateDependencies: Map<IdentifierId, ArrayExpression>;
+  readonly errors: CompilerError;
+  readonly derivationCache: DerivationCache;
+  readonly effectsCache: Map<IdentifierId, EffectMetadata>;
+  readonly setStateLoads: Map<IdentifierId, IdentifierId | null>;
+  readonly setStateUsages: Map<IdentifierId, Set<SourceLocation>>;
+};
+
+const MAX_FIXPOINT_ITERATIONS = 100;
+
+class DerivationCache {
+  hasChanges: boolean = false;
+  cache: Map<IdentifierId, DerivationMetadata> = new Map();
+  private previousCache: Map<IdentifierId, DerivationMetadata> | null = null;
+
+  takeSnapshot(): void {
+    this.previousCache = new Map();
+    for (const [key, value] of this.cache.entries()) {
+      this.previousCache.set(key, {
+        place: value.place,
+        sourcesIds: new Set(value.sourcesIds),
+        typeOfValue: value.typeOfValue,
+        isStateSource: value.isStateSource,
+      });
+    }
+  }
+
+  checkForChanges(): void {
+    if (this.previousCache === null) {
+      this.hasChanges = true;
+      return;
+    }
+
+    for (const [key, value] of this.cache.entries()) {
+      const previousValue = this.previousCache.get(key);
+      if (
+        previousValue === undefined ||
+        !this.isDerivationEqual(previousValue, value)
+      ) {
+        this.hasChanges = true;
+        return;
+      }
+    }
+
+    if (this.cache.size !== this.previousCache.size) {
+      this.hasChanges = true;
+      return;
+    }
+
+    this.hasChanges = false;
+  }
+
+  snapshot(): boolean {
+    const hasChanges = this.hasChanges;
+    this.hasChanges = false;
+    return hasChanges;
+  }
+
+  addDerivationEntry(
+    derivedVar: Place,
+    sourcesIds: Set<IdentifierId>,
+    typeOfValue: TypeOfValue,
+    isStateSource: boolean,
+  ): void {
+    let finalIsSource = isStateSource;
+    if (!finalIsSource) {
+      for (const sourceId of sourcesIds) {
+        const sourceMetadata = this.cache.get(sourceId);
+        if (
+          sourceMetadata?.isStateSource &&
+          sourceMetadata.place.identifier.name?.kind !== 'named'
+        ) {
+          finalIsSource = true;
+          break;
+        }
+      }
+    }
+
+    this.cache.set(derivedVar.identifier.id, {
+      place: derivedVar,
+      sourcesIds: sourcesIds,
+      typeOfValue: typeOfValue ?? 'ignored',
+      isStateSource: finalIsSource,
+    });
+  }
+
+  private isDerivationEqual(
+    a: DerivationMetadata,
+    b: DerivationMetadata,
+  ): boolean {
+    if (a.typeOfValue !== b.typeOfValue) {
+      return false;
+    }
+    if (a.sourcesIds.size !== b.sourcesIds.size) {
+      return false;
+    }
+    for (const id of a.sourcesIds) {
+      if (!b.sourcesIds.has(id)) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+function isNamedIdentifier(place: Place): place is Place & {
+  identifier: {name: NonNullable<Place['identifier']['name']>};
+} {
+  return (
+    place.identifier.name !== null && place.identifier.name.kind === 'named'
+  );
+}
+
+/**
+ * Validates that useEffect is not used for derived computations which could/should
+ * be performed in render.
+ *
+ * See https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state
+ *
+ * Example:
+ *
+ * ```
+ * // 🔴 Avoid: redundant state and unnecessary Effect
+ * const [fullName, setFullName] = useState('');
+ * useEffect(() => {
+ *   setFullName(firstName + ' ' + lastName);
+ * }, [firstName, lastName]);
+ * ```
+ *
+ * Instead use:
+ *
+ * ```
+ * // ✅ Good: calculated during rendering
+ * const fullName = firstName + ' ' + lastName;
+ * ```
+ */
+export function validateNoDerivedComputationsInEffects_exp(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const functions: Map<IdentifierId, FunctionExpression> = new Map();
+  const candidateDependencies: Map<IdentifierId, ArrayExpression> = new Map();
+  const derivationCache = new DerivationCache();
+  const errors = new CompilerError();
+  const effectsCache: Map<IdentifierId, EffectMetadata> = new Map();
+
+  const setStateLoads: Map<IdentifierId, IdentifierId> = new Map();
+  const setStateUsages: Map<IdentifierId, Set<SourceLocation>> = new Map();
+
+  const context: ValidationContext = {
+    functions,
+    candidateDependencies,
+    errors,
+    derivationCache,
+    effectsCache,
+    setStateLoads,
+    setStateUsages,
+  };
+
+  if (fn.fnType === 'Hook') {
+    for (const param of fn.params) {
+      if (param.kind === 'Identifier') {
+        context.derivationCache.cache.set(param.identifier.id, {
+          place: param,
+          sourcesIds: new Set(),
+          typeOfValue: 'fromProps',
+          isStateSource: true,
+        });
+      }
+    }
+  } else if (fn.fnType === 'Component') {
+    const props = fn.params[0];
+    if (props != null && props.kind === 'Identifier') {
+      context.derivationCache.cache.set(props.identifier.id, {
+        place: props,
+        sourcesIds: new Set(),
+        typeOfValue: 'fromProps',
+        isStateSource: true,
+      });
+    }
+  }
+
+  let isFirstPass = true;
+  let iterationCount = 0;
+  do {
+    context.derivationCache.takeSnapshot();
+
+    for (const block of fn.body.blocks.values()) {
+      recordPhiDerivations(block, context);
+      for (const instr of block.instructions) {
+        recordInstructionDerivations(instr, context, isFirstPass);
+      }
+    }
+
+    context.derivationCache.checkForChanges();
+    isFirstPass = false;
+    iterationCount++;
+    CompilerError.invariant(iterationCount < MAX_FIXPOINT_ITERATIONS, {
+      reason:
+        '[ValidateNoDerivedComputationsInEffects] Fixpoint iteration failed to converge.',
+      description: `Fixpoint iteration exceeded ${MAX_FIXPOINT_ITERATIONS} iterations while tracking derivations. This suggests a cyclic dependency in the derivation cache.`,
+      loc: fn.loc,
+    });
+  } while (context.derivationCache.snapshot());
+
+  for (const [, effect] of effectsCache) {
+    validateEffect(effect.effect, effect.dependencies, context);
+  }
+
+  return errors.asResult();
+}
+
+function recordPhiDerivations(
+  block: BasicBlock,
+  context: ValidationContext,
+): void {
+  for (const phi of block.phis) {
+    let typeOfValue: TypeOfValue = 'ignored';
+    let sourcesIds: Set<IdentifierId> = new Set();
+    for (const operand of phi.operands.values()) {
+      const operandMetadata = context.derivationCache.cache.get(
+        operand.identifier.id,
+      );
+
+      if (operandMetadata === undefined) {
+        continue;
+      }
+
+      typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue);
+      sourcesIds.add(operand.identifier.id);
+    }
+
+    if (typeOfValue !== 'ignored') {
+      context.derivationCache.addDerivationEntry(
+        phi.place,
+        sourcesIds,
+        typeOfValue,
+        false,
+      );
+    }
+  }
+}
+
+function joinValue(
+  lvalueType: TypeOfValue,
+  valueType: TypeOfValue,
+): TypeOfValue {
+  if (lvalueType === 'ignored') return valueType;
+  if (valueType === 'ignored') return lvalueType;
+  if (lvalueType === valueType) return lvalueType;
+  return 'fromPropsAndState';
+}
+
+function getRootSetState(
+  key: IdentifierId,
+  loads: Map<IdentifierId, IdentifierId | null>,
+  visited: Set<IdentifierId> = new Set(),
+): IdentifierId | null {
+  if (visited.has(key)) {
+    return null;
+  }
+  visited.add(key);
+
+  const parentId = loads.get(key);
+
+  if (parentId === undefined) {
+    return null;
+  }
+
+  if (parentId === null) {
+    return key;
+  }
+
+  return getRootSetState(parentId, loads, visited);
+}
+
+function maybeRecordSetState(
+  instr: Instruction,
+  loads: Map<IdentifierId, IdentifierId | null>,
+  usages: Map<IdentifierId, Set<SourceLocation>>,
+): void {
+  for (const operand of eachInstructionLValue(instr)) {
+    if (
+      instr.value.kind === 'LoadLocal' &&
+      loads.has(instr.value.place.identifier.id)
+    ) {
+      loads.set(operand.identifier.id, instr.value.place.identifier.id);
+    } else {
+      if (isSetStateType(operand.identifier)) {
+        // this is a root setState
+        loads.set(operand.identifier.id, null);
+      }
+    }
+
+    const rootSetState = getRootSetState(operand.identifier.id, loads);
+    if (rootSetState !== null && usages.get(rootSetState) === undefined) {
+      usages.set(rootSetState, new Set([operand.loc]));
+    }
+  }
+}
+
+function recordInstructionDerivations(
+  instr: Instruction,
+  context: ValidationContext,
+  isFirstPass: boolean,
+): void {
+  maybeRecordSetState(instr, context.setStateLoads, context.setStateUsages);
+
+  let typeOfValue: TypeOfValue = 'ignored';
+  let isSource: boolean = false;
+  const sources: Set<IdentifierId> = new Set();
+  const {lvalue, value} = instr;
+  if (value.kind === 'FunctionExpression') {
+    context.functions.set(lvalue.identifier.id, value);
+    for (const [, block] of value.loweredFunc.func.body.blocks) {
+      recordPhiDerivations(block, context);
+      for (const instr of block.instructions) {
+        recordInstructionDerivations(instr, context, isFirstPass);
+      }
+    }
+  } else if (value.kind === 'CallExpression' || value.kind === 'MethodCall') {
+    const callee =
+      value.kind === 'CallExpression' ? value.callee : value.property;
+    if (
+      isUseEffectHookType(callee.identifier) &&
+      value.args.length === 2 &&
+      value.args[0].kind === 'Identifier' &&
+      value.args[1].kind === 'Identifier'
+    ) {
+      const effectFunction = context.functions.get(value.args[0].identifier.id);
+      const deps = context.candidateDependencies.get(
+        value.args[1].identifier.id,
+      );
+      if (effectFunction != null && deps != null) {
+        context.effectsCache.set(value.args[0].identifier.id, {
+          effect: effectFunction.loweredFunc.func,
+          dependencies: deps,
+        });
+      }
+    } else if (isUseStateType(lvalue.identifier)) {
+      typeOfValue = 'fromState';
+      context.derivationCache.addDerivationEntry(
+        lvalue,
+        new Set(),
+        typeOfValue,
+        true,
+      );
+      return;
+    }
+  } else if (value.kind === 'ArrayExpression') {
+    context.candidateDependencies.set(lvalue.identifier.id, value);
+  }
+
+  for (const operand of eachInstructionOperand(instr)) {
+    if (context.setStateLoads.has(operand.identifier.id)) {
+      const rootSetStateId = getRootSetState(
+        operand.identifier.id,
+        context.setStateLoads,
+      );
+      if (rootSetStateId !== null) {
+        context.setStateUsages.get(rootSetStateId)?.add(operand.loc);
+      }
+    }
+
+    const operandMetadata = context.derivationCache.cache.get(
+      operand.identifier.id,
+    );
+
+    if (operandMetadata === undefined) {
+      continue;
+    }
+
+    typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue);
+    sources.add(operand.identifier.id);
+  }
+
+  if (typeOfValue === 'ignored') {
+    return;
+  }
+
+  for (const lvalue of eachInstructionLValue(instr)) {
+    context.derivationCache.addDerivationEntry(
+      lvalue,
+      sources,
+      typeOfValue,
+      isSource,
+    );
+  }
+
+  if (value.kind === 'FunctionExpression') {
+    /*
+     * We don't want to record effect mutations of FunctionExpressions the mutations will happen in the
+     * function body and we will record them there.
+     */
+    return;
+  }
+
+  for (const operand of eachInstructionOperand(instr)) {
+    switch (operand.effect) {
+      case Effect.Capture:
+      case Effect.Store:
+      case Effect.ConditionallyMutate:
+      case Effect.ConditionallyMutateIterator:
+      case Effect.Mutate: {
+        if (isMutable(instr, operand)) {
+          if (context.derivationCache.cache.has(operand.identifier.id)) {
+            const operandMetadata = context.derivationCache.cache.get(
+              operand.identifier.id,
+            );
+
+            if (operandMetadata !== undefined) {
+              operandMetadata.typeOfValue = joinValue(
+                typeOfValue,
+                operandMetadata.typeOfValue,
+              );
+            }
+          } else {
+            context.derivationCache.addDerivationEntry(
+              operand,
+              sources,
+              typeOfValue,
+              false,
+            );
+          }
+        }
+        break;
+      }
+      case Effect.Freeze:
+      case Effect.Read: {
+        // no-op
+        break;
+      }
+      case Effect.Unknown: {
+        CompilerError.invariant(false, {
+          reason: 'Unexpected unknown effect',
+          loc: operand.loc,
+        });
+      }
+      default: {
+        assertExhaustive(
+          operand.effect,
+          `Unexpected effect kind \`${operand.effect}\``,
+        );
+      }
+    }
+  }
+}
+
+type TreeNode = {
+  name: string;
+  typeOfValue: TypeOfValue;
+  isSource: boolean;
+  children: Array<TreeNode>;
+};
+
+function buildTreeNode(
+  sourceId: IdentifierId,
+  context: ValidationContext,
+  visited: Set<string> = new Set(),
+): Array<TreeNode> {
+  const sourceMetadata = context.derivationCache.cache.get(sourceId);
+  if (!sourceMetadata) {
+    return [];
+  }
+
+  if (sourceMetadata.isStateSource && isNamedIdentifier(sourceMetadata.place)) {
+    return [
+      {
+        name: sourceMetadata.place.identifier.name.value,
+        typeOfValue: sourceMetadata.typeOfValue,
+        isSource: sourceMetadata.isStateSource,
+        children: [],
+      },
+    ];
+  }
+
+  const children: Array<TreeNode> = [];
+
+  const namedSiblings: Set<string> = new Set();
+  for (const childId of sourceMetadata.sourcesIds) {
+    CompilerError.invariant(childId !== sourceId, {
+      reason:
+        'Unexpected self-reference: a value should not have itself as a source',
+      loc: sourceMetadata.place.loc,
+    });
+
+    const childNodes = buildTreeNode(
+      childId,
+      context,
+      new Set([
+        ...visited,
+        ...(isNamedIdentifier(sourceMetadata.place)
+          ? [sourceMetadata.place.identifier.name.value]
+          : []),
+      ]),
+    );
+    if (childNodes) {
+      for (const childNode of childNodes) {
+        if (!namedSiblings.has(childNode.name)) {
+          children.push(childNode);
+          namedSiblings.add(childNode.name);
+        }
+      }
+    }
+  }
+
+  if (
+    isNamedIdentifier(sourceMetadata.place) &&
+    !visited.has(sourceMetadata.place.identifier.name.value)
+  ) {
+    return [
+      {
+        name: sourceMetadata.place.identifier.name.value,
+        typeOfValue: sourceMetadata.typeOfValue,
+        isSource: sourceMetadata.isStateSource,
+        children: children,
+      },
+    ];
+  }
+
+  return children;
+}
+
+function renderTree(
+  node: TreeNode,
+  indent: string = '',
+  isLast: boolean = true,
+  propsSet: Set<string>,
+  stateSet: Set<string>,
+): string {
+  const prefix = indent + (isLast ? '└── ' : '├── ');
+  const childIndent = indent + (isLast ? '    ' : '│   ');
+
+  let result = `${prefix}${node.name}`;
+
+  if (node.isSource) {
+    let typeLabel: string;
+    if (node.typeOfValue === 'fromProps') {
+      propsSet.add(node.name);
+      typeLabel = 'Prop';
+    } else if (node.typeOfValue === 'fromState') {
+      stateSet.add(node.name);
+      typeLabel = 'State';
+    } else {
+      propsSet.add(node.name);
+      stateSet.add(node.name);
+      typeLabel = 'Prop and State';
+    }
+    result += ` (${typeLabel})`;
+  }
+
+  if (node.children.length > 0) {
+    result += '\n';
+    node.children.forEach((child, index) => {
+      const isLastChild = index === node.children.length - 1;
+      result += renderTree(child, childIndent, isLastChild, propsSet, stateSet);
+      if (index < node.children.length - 1) {
+        result += '\n';
+      }
+    });
+  }
+
+  return result;
+}
+
+function getFnLocalDeps(
+  fn: FunctionExpression | undefined,
+): Set<IdentifierId> | undefined {
+  if (!fn) {
+    return undefined;
+  }
+
+  const deps: Set<IdentifierId> = new Set();
+
+  for (const [, block] of fn.loweredFunc.func.body.blocks) {
+    for (const instr of block.instructions) {
+      if (instr.value.kind === 'LoadLocal') {
+        deps.add(instr.value.place.identifier.id);
+      }
+    }
+  }
+
+  return deps;
+}
+
+function validateEffect(
+  effectFunction: HIRFunction,
+  dependencies: ArrayExpression,
+  context: ValidationContext,
+): void {
+  const seenBlocks: Set<BlockId> = new Set();
+
+  const effectDerivedSetStateCalls: Array<{
+    value: CallExpression;
+    id: IdentifierId;
+    sourceIds: Set<IdentifierId>;
+    typeOfValue: TypeOfValue;
+  }> = [];
+
+  const effectSetStateUsages: Map<
+    IdentifierId,
+    Set<SourceLocation>
+  > = new Map();
+
+  // Consider setStates in the effect's dependency array as being part of effectSetStateUsages
+  for (const dep of dependencies.elements) {
+    if (dep.kind === 'Identifier') {
+      const root = getRootSetState(dep.identifier.id, context.setStateLoads);
+      if (root !== null) {
+        effectSetStateUsages.set(root, new Set([dep.loc]));
+      }
+    }
+  }
+
+  let cleanUpFunctionDeps: Set<IdentifierId> | undefined;
+
+  const globals: Set<IdentifierId> = new Set();
+  for (const block of effectFunction.body.blocks.values()) {
+    /*
+     * if the block is in an effect and is of type return then its an effect's cleanup function
+     * if the cleanup function depends on a value from which effect-set state is derived then
+     * we can't validate
+     */
+    if (
+      block.terminal.kind === 'return' &&
+      block.terminal.returnVariant === 'Explicit'
+    ) {
+      cleanUpFunctionDeps = getFnLocalDeps(
+        context.functions.get(block.terminal.value.identifier.id),
+      );
+    }
+    for (const pred of block.preds) {
+      if (!seenBlocks.has(pred)) {
+        // skip if block has a back edge
+        return;
+      }
+    }
+
+    for (const instr of block.instructions) {
+      // Early return if any instruction is deriving a value from a ref
+      if (isUseRefType(instr.lvalue.identifier)) {
+        return;
+      }
+
+      maybeRecordSetState(instr, context.setStateLoads, effectSetStateUsages);
+
+      for (const operand of eachInstructionOperand(instr)) {
+        if (context.setStateLoads.has(operand.identifier.id)) {
+          const rootSetStateId = getRootSetState(
+            operand.identifier.id,
+            context.setStateLoads,
+          );
+          if (rootSetStateId !== null) {
+            effectSetStateUsages.get(rootSetStateId)?.add(operand.loc);
+          }
+        }
+      }
+
+      if (
+        instr.value.kind === 'CallExpression' &&
+        isSetStateType(instr.value.callee.identifier) &&
+        instr.value.args.length === 1 &&
+        instr.value.args[0].kind === 'Identifier'
+      ) {
+        const calleeMetadata = context.derivationCache.cache.get(
+          instr.value.callee.identifier.id,
+        );
+
+        /*
+         * If the setState comes from a source other than local state skip
+         * since the fix is not to calculate in render
+         */
+        if (calleeMetadata?.typeOfValue != 'fromState') {
+          continue;
+        }
+
+        const argMetadata = context.derivationCache.cache.get(
+          instr.value.args[0].identifier.id,
+        );
+
+        if (argMetadata !== undefined) {
+          effectDerivedSetStateCalls.push({
+            value: instr.value,
+            id: instr.value.callee.identifier.id,
+            sourceIds: argMetadata.sourcesIds,
+            typeOfValue: argMetadata.typeOfValue,
+          });
+        }
+      } else if (instr.value.kind === 'CallExpression') {
+        const calleeMetadata = context.derivationCache.cache.get(
+          instr.value.callee.identifier.id,
+        );
+
+        if (
+          calleeMetadata !== undefined &&
+          (calleeMetadata.typeOfValue === 'fromProps' ||
+            calleeMetadata.typeOfValue === 'fromPropsAndState')
+        ) {
+          // If the callee is a prop we can't confidently say that it should be derived in render
+          return;
+        }
+
+        if (globals.has(instr.value.callee.identifier.id)) {
+          // If the callee is a global we can't confidently say that it should be derived in render
+          return;
+        }
+      } else if (instr.value.kind === 'LoadGlobal') {
+        globals.add(instr.lvalue.identifier.id);
+        for (const operand of eachInstructionOperand(instr)) {
+          globals.add(operand.identifier.id);
+        }
+      }
+    }
+    seenBlocks.add(block.id);
+  }
+
+  for (const derivedSetStateCall of effectDerivedSetStateCalls) {
+    const rootSetStateCall = getRootSetState(
+      derivedSetStateCall.id,
+      context.setStateLoads,
+    );
+
+    if (
+      rootSetStateCall !== null &&
+      effectSetStateUsages.has(rootSetStateCall) &&
+      context.setStateUsages.has(rootSetStateCall) &&
+      effectSetStateUsages.get(rootSetStateCall)!.size ===
+        context.setStateUsages.get(rootSetStateCall)!.size - 1
+    ) {
+      const propsSet = new Set<string>();
+      const stateSet = new Set<string>();
+
+      const rootNodesMap = new Map<string, TreeNode>();
+      for (const id of derivedSetStateCall.sourceIds) {
+        const nodes = buildTreeNode(id, context);
+        for (const node of nodes) {
+          if (!rootNodesMap.has(node.name)) {
+            rootNodesMap.set(node.name, node);
+          }
+        }
+      }
+      const rootNodes = Array.from(rootNodesMap.values());
+
+      const trees = rootNodes.map((node, index) =>
+        renderTree(
+          node,
+          '',
+          index === rootNodes.length - 1,
+          propsSet,
+          stateSet,
+        ),
+      );
+
+      for (const dep of derivedSetStateCall.sourceIds) {
+        if (cleanUpFunctionDeps !== undefined && cleanUpFunctionDeps.has(dep)) {
+          return;
+        }
+      }
+
+      const propsArr = Array.from(propsSet);
+      const stateArr = Array.from(stateSet);
+
+      let rootSources = '';
+      if (propsArr.length > 0) {
+        rootSources += `Props: [${propsArr.join(', ')}]`;
+      }
+      if (stateArr.length > 0) {
+        if (rootSources) rootSources += '\n';
+        rootSources += `State: [${stateArr.join(', ')}]`;
+      }
+
+      const description = `Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+${rootSources}
+
+Data Flow Tree:
+${trees.join('\n')}
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state`;
+
+      context.errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          description: description,
+          category: ErrorCategory.EffectDerivationsOfState,
+          reason:
+            'You might not need an effect. Derive values in render, not effects.',
+        }).withDetails({
+          kind: 'error',
+          loc: derivedSetStateCall.value.callee.loc,
+          message: 'This should be computed during render, not in an effect',
+        }),
+      );
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts
new file mode 100644
index 00000000000..0c5b5a9a319
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic, CompilerError, Effect} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {
+  HIRFunction,
+  IdentifierId,
+  isRefOrRefLikeMutableType,
+  Place,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {AliasingEffect} from '../Inference/AliasingEffects';
+import {Result} from '../Utils/Result';
+
+/**
+ * Validates that functions with known mutations (ie due to types) cannot be passed
+ * where a frozen value is expected. Example:
+ *
+ * ```
+ * function Component() {
+ *   const cache = new Map();
+ *   const onClick = () => {
+ *     cache.set(...);
+ *   }
+ *   useHook(onClick); // ERROR: cannot pass a mutable value
+ *   return <Foo onClick={onClick} /> // ERROR: cannot pass a mutable value
+ * }
+ * ```
+ *
+ * Because `onClick` function mutates `cache` when called, `onClick` is equivalent to a mutable
+ * variables. But unlike other mutables values like an array, the receiver of the function has
+ * no way to avoid mutation — for example, a function can receive an array and choose not to mutate
+ * it, but there's no way to know that a function is mutable and avoid calling it.
+ *
+ * This pass detects functions with *known* mutations (Store or Mutate, not ConditionallyMutate)
+ * that are passed where a frozen value is expected and rejects them.
+ */
+export function validateNoFreezingKnownMutableFunctions(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const errors = new CompilerError();
+  const contextMutationEffects: Map<
+    IdentifierId,
+    Extract<AliasingEffect, {kind: 'Mutate'} | {kind: 'MutateTransitive'}>
+  > = new Map();
+
+  function visitOperand(operand: Place): void {
+    if (operand.effect === Effect.Freeze) {
+      const effect = contextMutationEffects.get(operand.identifier.id);
+      if (effect != null) {
+        const place = effect.value;
+        const variable =
+          place != null &&
+          place.identifier.name != null &&
+          place.identifier.name.kind === 'named'
+            ? `\`${place.identifier.name.value}\``
+            : 'a local variable';
+        errors.pushDiagnostic(
+          CompilerDiagnostic.create({
+            category: ErrorCategory.Immutability,
+            reason: 'Cannot modify local variables after render completes',
+            description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead`,
+          })
+            .withDetails({
+              kind: 'error',
+              loc: operand.loc,
+              message: `This function may (indirectly) reassign or modify ${variable} after render`,
+            })
+            .withDetails({
+              kind: 'error',
+              loc: effect.value.loc,
+              message: `This modifies ${variable}`,
+            }),
+        );
+      }
+    }
+  }
+
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'LoadLocal': {
+          const effect = contextMutationEffects.get(value.place.identifier.id);
+          if (effect != null) {
+            contextMutationEffects.set(lvalue.identifier.id, effect);
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          const effect = contextMutationEffects.get(value.value.identifier.id);
+          if (effect != null) {
+            contextMutationEffects.set(lvalue.identifier.id, effect);
+            contextMutationEffects.set(
+              value.lvalue.place.identifier.id,
+              effect,
+            );
+          }
+          break;
+        }
+        case 'FunctionExpression': {
+          if (value.loweredFunc.func.aliasingEffects != null) {
+            const context = new Set(
+              value.loweredFunc.func.context.map(p => p.identifier.id),
+            );
+            effects: for (const effect of value.loweredFunc.func
+              .aliasingEffects) {
+              switch (effect.kind) {
+                case 'Mutate':
+                case 'MutateTransitive': {
+                  const knownMutation = contextMutationEffects.get(
+                    effect.value.identifier.id,
+                  );
+                  if (knownMutation != null) {
+                    contextMutationEffects.set(
+                      lvalue.identifier.id,
+                      knownMutation,
+                    );
+                  } else if (
+                    context.has(effect.value.identifier.id) &&
+                    !isRefOrRefLikeMutableType(effect.value.identifier.type)
+                  ) {
+                    contextMutationEffects.set(lvalue.identifier.id, effect);
+                    break effects;
+                  }
+                  break;
+                }
+                case 'MutateConditionally':
+                case 'MutateTransitiveConditionally': {
+                  const knownMutation = contextMutationEffects.get(
+                    effect.value.identifier.id,
+                  );
+                  if (knownMutation != null) {
+                    contextMutationEffects.set(
+                      lvalue.identifier.id,
+                      knownMutation,
+                    );
+                  }
+                  break;
+                }
+              }
+            }
+          }
+          break;
+        }
+        default: {
+          for (const operand of eachInstructionValueOperand(value)) {
+            visitOperand(operand);
+          }
+        }
+      }
+    }
+    for (const operand of eachTerminalOperand(block.terminal)) {
+      visitOperand(operand);
+    }
+  }
+  return errors.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts
new file mode 100644
index 00000000000..ca0612d80ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic, CompilerError} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {HIRFunction} from '../HIR';
+import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
+import {Result} from '../Utils/Result';
+
+/**
+ * Checks that known-impure functions are not called during render. Examples of invalid functions to
+ * call during render are `Math.random()` and `Date.now()`. Users may extend this set of
+ * impure functions via a module type provider and specifying functions with `impure: true`.
+ *
+ * TODO: add best-effort analysis of functions which are called during render. We have variations of
+ * this in several of our validation passes and should unify those analyses into a reusable helper
+ * and use it here.
+ */
+export function validateNoImpureFunctionsInRender(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const value = instr.value;
+      if (value.kind === 'MethodCall' || value.kind == 'CallExpression') {
+        const callee =
+          value.kind === 'MethodCall' ? value.property : value.callee;
+        const signature = getFunctionCallSignature(
+          fn.env,
+          callee.identifier.type,
+        );
+        if (signature != null && signature.impure === true) {
+          errors.pushDiagnostic(
+            CompilerDiagnostic.create({
+              category: ErrorCategory.Purity,
+              reason: 'Cannot call impure function during render',
+              description:
+                (signature.canonicalName != null
+                  ? `\`${signature.canonicalName}\` is an impure function. `
+                  : '') +
+                'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
+              suggestions: null,
+            }).withDetails({
+              kind: 'error',
+              loc: callee.loc,
+              message: 'Cannot call impure function',
+            }),
+          );
+        }
+      }
+    }
+  }
+  return errors.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts
new file mode 100644
index 00000000000..00ffca556f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic, CompilerError} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {BlockId, HIRFunction} from '../HIR';
+import {Result} from '../Utils/Result';
+import {retainWhere} from '../Utils/utils';
+
+/**
+ * Developers may not be aware of error boundaries and lazy evaluation of JSX, leading them
+ * to use patterns such as `let el; try { el = <Component /> } catch { ... }` to attempt to
+ * catch rendering errors. Such code will fail to catch errors in rendering, but developers
+ * may not realize this right away.
+ *
+ * This validation pass validates against this pattern: specifically, it errors for JSX
+ * created within a try block. JSX is allowed within a catch statement, unless that catch
+ * is itself nested inside an outer try.
+ */
+export function validateNoJSXInTryStatement(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const activeTryBlocks: Array<BlockId> = [];
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    retainWhere(activeTryBlocks, id => id !== block.id);
+
+    if (activeTryBlocks.length !== 0) {
+      for (const instr of block.instructions) {
+        const {value} = instr;
+        switch (value.kind) {
+          case 'JsxExpression':
+          case 'JsxFragment': {
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
+                category: ErrorCategory.ErrorBoundaries,
+                reason: 'Avoid constructing JSX within try/catch',
+                description: `React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)`,
+              }).withDetails({
+                kind: 'error',
+                loc: value.loc,
+                message: 'Avoid constructing JSX within try/catch',
+              }),
+            );
+            break;
+          }
+        }
+      }
+    }
+
+    if (block.terminal.kind === 'try') {
+      activeTryBlocks.push(block.terminal.handler);
+    }
+  }
+  return errors.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
new file mode 100644
index 00000000000..dd7b04a11d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
@@ -0,0 +1,882 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {
+  BlockId,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  Identifier,
+  Place,
+  SourceLocation,
+  getHookKindForType,
+  isRefValueType,
+  isUseRefType,
+} from '../HIR';
+import {BuiltInEventHandlerId} from '../HIR/ObjectShape';
+import {
+  eachInstructionOperand,
+  eachInstructionValueOperand,
+  eachPatternOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {Err, Ok, Result} from '../Utils/Result';
+import {retainWhere} from '../Utils/utils';
+
+/**
+ * Validates that a function does not access a ref value during render. This includes a partial check
+ * for ref values which are accessed indirectly via function expressions.
+ *
+ * ```javascript
+ * // ERROR
+ * const ref = useRef();
+ * ref.current;
+ *
+ * const ref = useRef();
+ * foo(ref); // may access .current
+ *
+ * // ALLOWED
+ * const ref = useHookThatReturnsRef();
+ * ref.current;
+ * ```
+ *
+ * In the future we may reject more cases, based on either object names (`fooRef.current` is likely a ref)
+ * or based on property name alone (`foo.current` might be a ref).
+ */
+
+const opaqueRefId = Symbol();
+type RefId = number & {[opaqueRefId]: 'RefId'};
+
+function makeRefId(id: number): RefId {
+  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
+    reason: 'Expected identifier id to be a non-negative integer',
+    loc: GeneratedSource,
+  });
+  return id as RefId;
+}
+let _refId = 0;
+function nextRefId(): RefId {
+  return makeRefId(_refId++);
+}
+
+type RefAccessType =
+  | {kind: 'None'}
+  | {kind: 'Nullable'}
+  | {kind: 'Guard'; refId: RefId}
+  | RefAccessRefType;
+
+type RefAccessRefType =
+  | {kind: 'Ref'; refId: RefId}
+  | {kind: 'RefValue'; loc?: SourceLocation; refId?: RefId}
+  | {kind: 'Structure'; value: null | RefAccessRefType; fn: null | RefFnType};
+
+type RefFnType = {readRefEffect: boolean; returnType: RefAccessType};
+
+class Env {
+  #changed = false;
+  #data: Map<IdentifierId, RefAccessType> = new Map();
+  #temporaries: Map<IdentifierId, Place> = new Map();
+
+  lookup(place: Place): Place {
+    return this.#temporaries.get(place.identifier.id) ?? place;
+  }
+
+  define(place: Place, value: Place): void {
+    this.#temporaries.set(place.identifier.id, value);
+  }
+
+  resetChanged(): void {
+    this.#changed = false;
+  }
+
+  hasChanged(): boolean {
+    return this.#changed;
+  }
+
+  get(key: IdentifierId): RefAccessType | undefined {
+    const operandId = this.#temporaries.get(key)?.identifier.id ?? key;
+    return this.#data.get(operandId);
+  }
+
+  set(key: IdentifierId, value: RefAccessType): this {
+    const operandId = this.#temporaries.get(key)?.identifier.id ?? key;
+    const cur = this.#data.get(operandId);
+    const widenedValue = joinRefAccessTypes(value, cur ?? {kind: 'None'});
+    if (
+      !(cur == null && widenedValue.kind === 'None') &&
+      (cur == null || !tyEqual(cur, widenedValue))
+    ) {
+      this.#changed = true;
+    }
+    this.#data.set(operandId, widenedValue);
+    return this;
+  }
+}
+
+export function validateNoRefAccessInRender(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const env = new Env();
+  collectTemporariesSidemap(fn, env);
+  return validateNoRefAccessInRenderImpl(fn, env).map(_ => undefined);
+}
+
+function collectTemporariesSidemap(fn: HIRFunction, env: Env): void {
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'LoadLocal': {
+          const temp = env.lookup(value.place);
+          if (temp != null) {
+            env.define(lvalue, temp);
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          const temp = env.lookup(value.value);
+          if (temp != null) {
+            env.define(lvalue, temp);
+            env.define(value.lvalue.place, temp);
+          }
+          break;
+        }
+        case 'PropertyLoad': {
+          if (
+            isUseRefType(value.object.identifier) &&
+            value.property === 'current'
+          ) {
+            continue;
+          }
+          const temp = env.lookup(value.object);
+          if (temp != null) {
+            env.define(lvalue, temp);
+          }
+          break;
+        }
+      }
+    }
+  }
+}
+
+function refTypeOfType(place: Place): RefAccessType {
+  if (isRefValueType(place.identifier)) {
+    return {kind: 'RefValue'};
+  } else if (isUseRefType(place.identifier)) {
+    return {kind: 'Ref', refId: nextRefId()};
+  } else {
+    return {kind: 'None'};
+  }
+}
+
+function isEventHandlerType(identifier: Identifier): boolean {
+  const type = identifier.type;
+  return type.kind === 'Function' && type.shapeId === BuiltInEventHandlerId;
+}
+
+function tyEqual(a: RefAccessType, b: RefAccessType): boolean {
+  if (a.kind !== b.kind) {
+    return false;
+  }
+  switch (a.kind) {
+    case 'None':
+      return true;
+    case 'Ref':
+      return true;
+    case 'Nullable':
+      return true;
+    case 'Guard':
+      CompilerError.invariant(b.kind === 'Guard', {
+        reason: 'Expected ref value',
+        loc: GeneratedSource,
+      });
+      return a.refId === b.refId;
+    case 'RefValue':
+      CompilerError.invariant(b.kind === 'RefValue', {
+        reason: 'Expected ref value',
+        loc: GeneratedSource,
+      });
+      return a.loc == b.loc;
+    case 'Structure': {
+      CompilerError.invariant(b.kind === 'Structure', {
+        reason: 'Expected structure',
+        loc: GeneratedSource,
+      });
+      const fnTypesEqual =
+        (a.fn === null && b.fn === null) ||
+        (a.fn !== null &&
+          b.fn !== null &&
+          a.fn.readRefEffect === b.fn.readRefEffect &&
+          tyEqual(a.fn.returnType, b.fn.returnType));
+      return (
+        fnTypesEqual &&
+        (a.value === b.value ||
+          (a.value !== null && b.value !== null && tyEqual(a.value, b.value)))
+      );
+    }
+  }
+}
+
+function joinRefAccessTypes(...types: Array<RefAccessType>): RefAccessType {
+  function joinRefAccessRefTypes(
+    a: RefAccessRefType,
+    b: RefAccessRefType,
+  ): RefAccessRefType {
+    if (a.kind === 'RefValue') {
+      if (b.kind === 'RefValue' && a.refId === b.refId) {
+        return a;
+      }
+      return {kind: 'RefValue'};
+    } else if (b.kind === 'RefValue') {
+      return b;
+    } else if (a.kind === 'Ref' || b.kind === 'Ref') {
+      if (a.kind === 'Ref' && b.kind === 'Ref' && a.refId === b.refId) {
+        return a;
+      }
+      return {kind: 'Ref', refId: nextRefId()};
+    } else {
+      CompilerError.invariant(
+        a.kind === 'Structure' && b.kind === 'Structure',
+        {
+          reason: 'Expected structure',
+          loc: GeneratedSource,
+        },
+      );
+      const fn =
+        a.fn === null
+          ? b.fn
+          : b.fn === null
+            ? a.fn
+            : {
+                readRefEffect: a.fn.readRefEffect || b.fn.readRefEffect,
+                returnType: joinRefAccessTypes(
+                  a.fn.returnType,
+                  b.fn.returnType,
+                ),
+              };
+      const value =
+        a.value === null
+          ? b.value
+          : b.value === null
+            ? a.value
+            : joinRefAccessRefTypes(a.value, b.value);
+      return {
+        kind: 'Structure',
+        fn,
+        value,
+      };
+    }
+  }
+
+  return types.reduce(
+    (a, b) => {
+      if (a.kind === 'None') {
+        return b;
+      } else if (b.kind === 'None') {
+        return a;
+      } else if (a.kind === 'Guard') {
+        if (b.kind === 'Guard' && a.refId === b.refId) {
+          return a;
+        } else if (b.kind === 'Nullable' || b.kind === 'Guard') {
+          return {kind: 'None'};
+        } else {
+          return b;
+        }
+      } else if (b.kind === 'Guard') {
+        if (a.kind === 'Nullable') {
+          return {kind: 'None'};
+        } else {
+          return b;
+        }
+      } else if (a.kind === 'Nullable') {
+        return b;
+      } else if (b.kind === 'Nullable') {
+        return a;
+      } else {
+        return joinRefAccessRefTypes(a, b);
+      }
+    },
+    {kind: 'None'},
+  );
+}
+
+function validateNoRefAccessInRenderImpl(
+  fn: HIRFunction,
+  env: Env,
+): Result<RefAccessType, CompilerError> {
+  let returnValues: Array<undefined | RefAccessType> = [];
+  let place;
+  for (const param of fn.params) {
+    if (param.kind === 'Identifier') {
+      place = param;
+    } else {
+      place = param.place;
+    }
+    const type = refTypeOfType(place);
+    env.set(place.identifier.id, type);
+  }
+
+  const interpolatedAsJsx = new Set<IdentifierId>();
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      if (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') {
+        if (value.children != null) {
+          for (const child of value.children) {
+            interpolatedAsJsx.add(child.identifier.id);
+          }
+        }
+      }
+    }
+  }
+
+  for (let i = 0; (i == 0 || env.hasChanged()) && i < 10; i++) {
+    env.resetChanged();
+    returnValues = [];
+    const safeBlocks: Array<{block: BlockId; ref: RefId}> = [];
+    const errors = new CompilerError();
+    for (const [, block] of fn.body.blocks) {
+      retainWhere(safeBlocks, entry => entry.block !== block.id);
+      for (const phi of block.phis) {
+        env.set(
+          phi.place.identifier.id,
+          joinRefAccessTypes(
+            ...Array(...phi.operands.values()).map(
+              operand =>
+                env.get(operand.identifier.id) ?? ({kind: 'None'} as const),
+            ),
+          ),
+        );
+      }
+
+      for (const instr of block.instructions) {
+        switch (instr.value.kind) {
+          case 'JsxExpression':
+          case 'JsxFragment': {
+            for (const operand of eachInstructionValueOperand(instr.value)) {
+              validateNoDirectRefValueAccess(errors, operand, env);
+            }
+            break;
+          }
+          case 'ComputedLoad':
+          case 'PropertyLoad': {
+            if (instr.value.kind === 'ComputedLoad') {
+              validateNoDirectRefValueAccess(errors, instr.value.property, env);
+            }
+            const objType = env.get(instr.value.object.identifier.id);
+            let lookupType: null | RefAccessType = null;
+            if (objType?.kind === 'Structure') {
+              lookupType = objType.value;
+            } else if (objType?.kind === 'Ref') {
+              lookupType = {
+                kind: 'RefValue',
+                loc: instr.loc,
+                refId: objType.refId,
+              };
+            }
+            env.set(
+              instr.lvalue.identifier.id,
+              lookupType ?? refTypeOfType(instr.lvalue),
+            );
+            break;
+          }
+          case 'TypeCastExpression': {
+            env.set(
+              instr.lvalue.identifier.id,
+              env.get(instr.value.value.identifier.id) ??
+                refTypeOfType(instr.lvalue),
+            );
+            break;
+          }
+          case 'LoadContext':
+          case 'LoadLocal': {
+            env.set(
+              instr.lvalue.identifier.id,
+              env.get(instr.value.place.identifier.id) ??
+                refTypeOfType(instr.lvalue),
+            );
+            break;
+          }
+          case 'StoreContext':
+          case 'StoreLocal': {
+            env.set(
+              instr.value.lvalue.place.identifier.id,
+              env.get(instr.value.value.identifier.id) ??
+                refTypeOfType(instr.value.lvalue.place),
+            );
+            env.set(
+              instr.lvalue.identifier.id,
+              env.get(instr.value.value.identifier.id) ??
+                refTypeOfType(instr.lvalue),
+            );
+            break;
+          }
+          case 'Destructure': {
+            const objType = env.get(instr.value.value.identifier.id);
+            let lookupType = null;
+            if (objType?.kind === 'Structure') {
+              lookupType = objType.value;
+            }
+            env.set(
+              instr.lvalue.identifier.id,
+              lookupType ?? refTypeOfType(instr.lvalue),
+            );
+            for (const lval of eachPatternOperand(instr.value.lvalue.pattern)) {
+              env.set(lval.identifier.id, lookupType ?? refTypeOfType(lval));
+            }
+            break;
+          }
+          case 'ObjectMethod':
+          case 'FunctionExpression': {
+            let returnType: RefAccessType = {kind: 'None'};
+            let readRefEffect = false;
+            const result = validateNoRefAccessInRenderImpl(
+              instr.value.loweredFunc.func,
+              env,
+            );
+            if (result.isOk()) {
+              returnType = result.unwrap();
+            } else if (result.isErr()) {
+              readRefEffect = true;
+            }
+            env.set(instr.lvalue.identifier.id, {
+              kind: 'Structure',
+              fn: {
+                readRefEffect,
+                returnType,
+              },
+              value: null,
+            });
+            break;
+          }
+          case 'MethodCall':
+          case 'CallExpression': {
+            const callee =
+              instr.value.kind === 'CallExpression'
+                ? instr.value.callee
+                : instr.value.property;
+            const hookKind = getHookKindForType(fn.env, callee.identifier.type);
+            let returnType: RefAccessType = {kind: 'None'};
+            const fnType = env.get(callee.identifier.id);
+            let didError = false;
+            if (fnType?.kind === 'Structure' && fnType.fn !== null) {
+              returnType = fnType.fn.returnType;
+              if (fnType.fn.readRefEffect) {
+                didError = true;
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.Refs,
+                    reason: 'Cannot access refs during render',
+                    description: ERROR_DESCRIPTION,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: callee.loc,
+                    message: `This function accesses a ref value`,
+                  }),
+                );
+              }
+            }
+            /*
+             * If we already reported an error on this instruction, don't report
+             * duplicate errors
+             */
+            if (!didError) {
+              const isRefLValue = isUseRefType(instr.lvalue.identifier);
+              const isEventHandlerLValue = isEventHandlerType(
+                instr.lvalue.identifier,
+              );
+              for (const operand of eachInstructionValueOperand(instr.value)) {
+                /**
+                 * By default we check that function call operands are not refs,
+                 * ref values, or functions that can access refs.
+                 */
+                if (
+                  isRefLValue ||
+                  isEventHandlerLValue ||
+                  (hookKind != null &&
+                    hookKind !== 'useState' &&
+                    hookKind !== 'useReducer')
+                ) {
+                  /**
+                   * Allow passing refs or ref-accessing functions when:
+                   * 1. lvalue is a ref (mergeRefs pattern: `mergeRefs(ref1, ref2)`)
+                   * 2. lvalue is an event handler (DOM events execute outside render)
+                   * 3. calling hooks (independently validated for ref safety)
+                   */
+                  validateNoDirectRefValueAccess(errors, operand, env);
+                } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {
+                  /**
+                   * Special case: the lvalue is passed as a jsx child
+                   *
+                   * For example `<Foo>{renderHelper(ref)}</Foo>`. Here we have more
+                   * context and infer that the ref is being passed to a component-like
+                   * render function which attempts to obey the rules.
+                   */
+                  validateNoRefValueAccess(errors, env, operand);
+                } else {
+                  validateNoRefPassedToFunction(
+                    errors,
+                    env,
+                    operand,
+                    operand.loc,
+                  );
+                }
+              }
+            }
+            env.set(instr.lvalue.identifier.id, returnType);
+            break;
+          }
+          case 'ObjectExpression':
+          case 'ArrayExpression': {
+            const types: Array<RefAccessType> = [];
+            for (const operand of eachInstructionValueOperand(instr.value)) {
+              validateNoDirectRefValueAccess(errors, operand, env);
+              types.push(env.get(operand.identifier.id) ?? {kind: 'None'});
+            }
+            const value = joinRefAccessTypes(...types);
+            if (
+              value.kind === 'None' ||
+              value.kind === 'Guard' ||
+              value.kind === 'Nullable'
+            ) {
+              env.set(instr.lvalue.identifier.id, {kind: 'None'});
+            } else {
+              env.set(instr.lvalue.identifier.id, {
+                kind: 'Structure',
+                value,
+                fn: null,
+              });
+            }
+            break;
+          }
+          case 'PropertyDelete':
+          case 'PropertyStore':
+          case 'ComputedDelete':
+          case 'ComputedStore': {
+            const target = env.get(instr.value.object.identifier.id);
+            let safe: (typeof safeBlocks)['0'] | null | undefined = null;
+            if (
+              instr.value.kind === 'PropertyStore' &&
+              target != null &&
+              target.kind === 'Ref'
+            ) {
+              safe = safeBlocks.find(entry => entry.ref === target.refId);
+            }
+            if (safe != null) {
+              retainWhere(safeBlocks, entry => entry !== safe);
+            } else {
+              validateNoRefUpdate(errors, env, instr.value.object, instr.loc);
+            }
+            if (
+              instr.value.kind === 'ComputedDelete' ||
+              instr.value.kind === 'ComputedStore'
+            ) {
+              validateNoRefValueAccess(errors, env, instr.value.property);
+            }
+            if (
+              instr.value.kind === 'ComputedStore' ||
+              instr.value.kind === 'PropertyStore'
+            ) {
+              validateNoDirectRefValueAccess(errors, instr.value.value, env);
+              const type = env.get(instr.value.value.identifier.id);
+              if (type != null && type.kind === 'Structure') {
+                let objectType: RefAccessType = type;
+                if (target != null) {
+                  objectType = joinRefAccessTypes(objectType, target);
+                }
+                env.set(instr.value.object.identifier.id, objectType);
+              }
+            }
+            break;
+          }
+          case 'StartMemoize':
+          case 'FinishMemoize':
+            break;
+          case 'LoadGlobal': {
+            if (instr.value.binding.name === 'undefined') {
+              env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
+            }
+            break;
+          }
+          case 'Primitive': {
+            if (instr.value.value == null) {
+              env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
+            }
+            break;
+          }
+          case 'UnaryExpression': {
+            if (instr.value.operator === '!') {
+              const value = env.get(instr.value.value.identifier.id);
+              const refId =
+                value?.kind === 'RefValue' && value.refId != null
+                  ? value.refId
+                  : null;
+              if (refId !== null) {
+                /*
+                 * Record an error suggesting the `if (ref.current == null)` pattern,
+                 * but also record the lvalue as a guard so that we don't emit a second
+                 * error for the write to the ref
+                 */
+                env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.Refs,
+                    reason: 'Cannot access refs during render',
+                    description: ERROR_DESCRIPTION,
+                  })
+                    .withDetails({
+                      kind: 'error',
+                      loc: instr.value.value.loc,
+                      message: `Cannot access ref value during render`,
+                    })
+                    .withDetails({
+                      kind: 'hint',
+                      message:
+                        'To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`',
+                    }),
+                );
+                break;
+              }
+            }
+            validateNoRefValueAccess(errors, env, instr.value.value);
+            break;
+          }
+          case 'BinaryExpression': {
+            const left = env.get(instr.value.left.identifier.id);
+            const right = env.get(instr.value.right.identifier.id);
+            let nullish: boolean = false;
+            let refId: RefId | null = null;
+            if (left?.kind === 'RefValue' && left.refId != null) {
+              refId = left.refId;
+            } else if (right?.kind === 'RefValue' && right.refId != null) {
+              refId = right.refId;
+            }
+
+            if (left?.kind === 'Nullable') {
+              nullish = true;
+            } else if (right?.kind === 'Nullable') {
+              nullish = true;
+            }
+
+            if (refId !== null && nullish) {
+              env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
+            } else {
+              for (const operand of eachInstructionValueOperand(instr.value)) {
+                validateNoRefValueAccess(errors, env, operand);
+              }
+            }
+            break;
+          }
+          default: {
+            for (const operand of eachInstructionValueOperand(instr.value)) {
+              validateNoRefValueAccess(errors, env, operand);
+            }
+            break;
+          }
+        }
+
+        // Guard values are derived from ref.current, so they can only be used in if statement targets
+        for (const operand of eachInstructionOperand(instr)) {
+          guardCheck(errors, operand, env);
+        }
+
+        if (
+          isUseRefType(instr.lvalue.identifier) &&
+          env.get(instr.lvalue.identifier.id)?.kind !== 'Ref'
+        ) {
+          env.set(
+            instr.lvalue.identifier.id,
+            joinRefAccessTypes(
+              env.get(instr.lvalue.identifier.id) ?? {kind: 'None'},
+              {kind: 'Ref', refId: nextRefId()},
+            ),
+          );
+        }
+        if (
+          isRefValueType(instr.lvalue.identifier) &&
+          env.get(instr.lvalue.identifier.id)?.kind !== 'RefValue'
+        ) {
+          env.set(
+            instr.lvalue.identifier.id,
+            joinRefAccessTypes(
+              env.get(instr.lvalue.identifier.id) ?? {kind: 'None'},
+              {kind: 'RefValue', loc: instr.loc},
+            ),
+          );
+        }
+      }
+
+      if (block.terminal.kind === 'if') {
+        const test = env.get(block.terminal.test.identifier.id);
+        if (
+          test?.kind === 'Guard' &&
+          safeBlocks.find(entry => entry.ref === test.refId) == null
+        ) {
+          safeBlocks.push({block: block.terminal.fallthrough, ref: test.refId});
+        }
+      }
+
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        if (block.terminal.kind !== 'return') {
+          validateNoRefValueAccess(errors, env, operand);
+          if (block.terminal.kind !== 'if') {
+            guardCheck(errors, operand, env);
+          }
+        } else {
+          // Allow functions containing refs to be returned, but not direct ref values
+          validateNoDirectRefValueAccess(errors, operand, env);
+          guardCheck(errors, operand, env);
+          returnValues.push(env.get(operand.identifier.id));
+        }
+      }
+    }
+
+    if (errors.hasAnyErrors()) {
+      return Err(errors);
+    }
+  }
+
+  CompilerError.invariant(!env.hasChanged(), {
+    reason: 'Ref type environment did not converge',
+    loc: GeneratedSource,
+  });
+
+  return Ok(
+    joinRefAccessTypes(
+      ...returnValues.filter((env): env is RefAccessType => env !== undefined),
+    ),
+  );
+}
+
+function destructure(
+  type: RefAccessType | undefined,
+): RefAccessType | undefined {
+  if (type?.kind === 'Structure' && type.value !== null) {
+    return destructure(type.value);
+  }
+  return type;
+}
+
+function guardCheck(errors: CompilerError, operand: Place, env: Env): void {
+  if (env.get(operand.identifier.id)?.kind === 'Guard') {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: operand.loc,
+        message: `Cannot access ref value during render`,
+      }),
+    );
+  }
+}
+
+function validateNoRefValueAccess(
+  errors: CompilerError,
+  env: Env,
+  operand: Place,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (
+    type?.kind === 'RefValue' ||
+    (type?.kind === 'Structure' && type.fn?.readRefEffect)
+  ) {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: (type.kind === 'RefValue' && type.loc) || operand.loc,
+        message: `Cannot access ref value during render`,
+      }),
+    );
+  }
+}
+
+function validateNoRefPassedToFunction(
+  errors: CompilerError,
+  env: Env,
+  operand: Place,
+  loc: SourceLocation,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (
+    type?.kind === 'Ref' ||
+    type?.kind === 'RefValue' ||
+    (type?.kind === 'Structure' && type.fn?.readRefEffect)
+  ) {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: (type.kind === 'RefValue' && type.loc) || loc,
+        message: `Passing a ref to a function may read its value during render`,
+      }),
+    );
+  }
+}
+
+function validateNoRefUpdate(
+  errors: CompilerError,
+  env: Env,
+  operand: Place,
+  loc: SourceLocation,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (type?.kind === 'Ref' || type?.kind === 'RefValue') {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: (type.kind === 'RefValue' && type.loc) || loc,
+        message: `Cannot update ref during render`,
+      }),
+    );
+  }
+}
+
+function validateNoDirectRefValueAccess(
+  errors: CompilerError,
+  operand: Place,
+  env: Env,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (type?.kind === 'RefValue') {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: type.loc ?? operand.loc,
+        message: `Cannot access ref value during render`,
+      }),
+    );
+  }
+}
+
+const ERROR_DESCRIPTION =
+  'React refs are values that are not needed for rendering. Refs should only be accessed ' +
+  'outside of render, such as in event handlers or effects. ' +
+  'Accessing a ref value (the `current` property) during render can cause your component ' +
+  'not to update as expected (https://react.dev/reference/react/useRef)';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts
new file mode 100644
index 00000000000..eba2fdf5bbd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts
@@ -0,0 +1,347 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {
+  Environment,
+  HIRFunction,
+  IdentifierId,
+  isSetStateType,
+  isUseEffectHookType,
+  isUseEffectEventType,
+  isUseInsertionEffectHookType,
+  isUseLayoutEffectHookType,
+  isUseRefType,
+  isRefValueType,
+  Place,
+  Effect,
+  BlockId,
+} from '../HIR';
+import {
+  eachInstructionLValue,
+  eachInstructionValueOperand,
+} from '../HIR/visitors';
+import {createControlDominators} from '../Inference/ControlDominators';
+import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
+import {Result} from '../Utils/Result';
+import {assertExhaustive, Iterable_some} from '../Utils/utils';
+
+/**
+ * Validates against calling setState in the body of an effect (useEffect and friends),
+ * while allowing calling setState in callbacks scheduled by the effect.
+ *
+ * Calling setState during execution of a useEffect triggers a re-render, which is
+ * often bad for performance and frequently has more efficient and straightforward
+ * alternatives. See https://react.dev/learn/you-might-not-need-an-effect for examples.
+ */
+export function validateNoSetStateInEffects(
+  fn: HIRFunction,
+  env: Environment,
+): Result<void, CompilerError> {
+  const setStateFunctions: Map<IdentifierId, Place> = new Map();
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'LoadLocal': {
+          if (setStateFunctions.has(instr.value.place.identifier.id)) {
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.place,
+            );
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          if (setStateFunctions.has(instr.value.value.identifier.id)) {
+            setStateFunctions.set(
+              instr.value.lvalue.place.identifier.id,
+              instr.value.value,
+            );
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.value,
+            );
+          }
+          break;
+        }
+        case 'FunctionExpression': {
+          if (
+            // faster-path to check if the function expression references a setState
+            [...eachInstructionValueOperand(instr.value)].some(
+              operand =>
+                isSetStateType(operand.identifier) ||
+                setStateFunctions.has(operand.identifier.id),
+            )
+          ) {
+            const callee = getSetStateCall(
+              instr.value.loweredFunc.func,
+              setStateFunctions,
+              env,
+            );
+            if (callee !== null) {
+              setStateFunctions.set(instr.lvalue.identifier.id, callee);
+            }
+          }
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const callee =
+            instr.value.kind === 'MethodCall'
+              ? instr.value.receiver
+              : instr.value.callee;
+
+          if (isUseEffectEventType(callee.identifier)) {
+            const arg = instr.value.args[0];
+            if (arg !== undefined && arg.kind === 'Identifier') {
+              const setState = setStateFunctions.get(arg.identifier.id);
+              if (setState !== undefined) {
+                /**
+                 * This effect event function calls setState synchonously,
+                 * treat it as a setState function for transitive tracking
+                 */
+                setStateFunctions.set(instr.lvalue.identifier.id, setState);
+              }
+            }
+          } else if (
+            isUseEffectHookType(callee.identifier) ||
+            isUseLayoutEffectHookType(callee.identifier) ||
+            isUseInsertionEffectHookType(callee.identifier)
+          ) {
+            const arg = instr.value.args[0];
+            if (arg !== undefined && arg.kind === 'Identifier') {
+              const setState = setStateFunctions.get(arg.identifier.id);
+              if (setState !== undefined) {
+                const enableVerbose =
+                  env.config.enableVerboseNoSetStateInEffect;
+                if (enableVerbose) {
+                  errors.pushDiagnostic(
+                    CompilerDiagnostic.create({
+                      category: ErrorCategory.EffectSetState,
+                      reason:
+                        'Calling setState synchronously within an effect can trigger cascading renders',
+                      description:
+                        'Effects are intended to synchronize state between React and external systems. ' +
+                        'Calling setState synchronously causes cascading renders that hurt performance.\n\n' +
+                        'This pattern may indicate one of several issues:\n\n' +
+                        '**1. Non-local derived data**: If the value being set could be computed from props/state ' +
+                        'but requires data from a parent component, consider restructuring state ownership so the ' +
+                        'derivation can happen during render in the component that owns the relevant state.\n\n' +
+                        "**2. Derived event pattern**: If you're detecting when a prop changes (e.g., `isPlaying` " +
+                        'transitioning from false to true), this often indicates the parent should provide an event ' +
+                        'callback (like `onPlay`) instead of just the current state. Request access to the original event.\n\n' +
+                        "**3. Force update / external sync**: If you're forcing a re-render to sync with an external " +
+                        'data source (mutable values outside React), use `useSyncExternalStore` to properly subscribe ' +
+                        'to external state changes.\n\n' +
+                        'See: https://react.dev/learn/you-might-not-need-an-effect',
+                      suggestions: null,
+                    }).withDetails({
+                      kind: 'error',
+                      loc: setState.loc,
+                      message:
+                        'Avoid calling setState() directly within an effect',
+                    }),
+                  );
+                } else {
+                  errors.pushDiagnostic(
+                    CompilerDiagnostic.create({
+                      category: ErrorCategory.EffectSetState,
+                      reason:
+                        'Calling setState synchronously within an effect can trigger cascading renders',
+                      description:
+                        'Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. ' +
+                        'In general, the body of an effect should do one or both of the following:\n' +
+                        '* Update external systems with the latest state from React.\n' +
+                        '* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\n' +
+                        'Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. ' +
+                        '(https://react.dev/learn/you-might-not-need-an-effect)',
+                      suggestions: null,
+                    }).withDetails({
+                      kind: 'error',
+                      loc: setState.loc,
+                      message:
+                        'Avoid calling setState() directly within an effect',
+                    }),
+                  );
+                }
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  return errors.asResult();
+}
+
+function getSetStateCall(
+  fn: HIRFunction,
+  setStateFunctions: Map<IdentifierId, Place>,
+  env: Environment,
+): Place | null {
+  const enableAllowSetStateFromRefsInEffects =
+    env.config.enableAllowSetStateFromRefsInEffects;
+  const refDerivedValues: Set<IdentifierId> = new Set();
+
+  const isDerivedFromRef = (place: Place): boolean => {
+    return (
+      refDerivedValues.has(place.identifier.id) ||
+      isUseRefType(place.identifier) ||
+      isRefValueType(place.identifier)
+    );
+  };
+
+  const isRefControlledBlock: (id: BlockId) => boolean =
+    enableAllowSetStateFromRefsInEffects
+      ? createControlDominators(fn, place => isDerivedFromRef(place))
+      : (): boolean => false;
+
+  for (const [, block] of fn.body.blocks) {
+    if (enableAllowSetStateFromRefsInEffects) {
+      for (const phi of block.phis) {
+        if (isDerivedFromRef(phi.place)) {
+          continue;
+        }
+        let isPhiDerivedFromRef = false;
+        for (const [, operand] of phi.operands) {
+          if (isDerivedFromRef(operand)) {
+            isPhiDerivedFromRef = true;
+            break;
+          }
+        }
+        if (isPhiDerivedFromRef) {
+          refDerivedValues.add(phi.place.identifier.id);
+        } else {
+          for (const [pred] of phi.operands) {
+            if (isRefControlledBlock(pred)) {
+              refDerivedValues.add(phi.place.identifier.id);
+              break;
+            }
+          }
+        }
+      }
+    }
+    for (const instr of block.instructions) {
+      if (enableAllowSetStateFromRefsInEffects) {
+        const hasRefOperand = Iterable_some(
+          eachInstructionValueOperand(instr.value),
+          isDerivedFromRef,
+        );
+
+        if (hasRefOperand) {
+          for (const lvalue of eachInstructionLValue(instr)) {
+            refDerivedValues.add(lvalue.identifier.id);
+          }
+          // Ref-derived values can also propagate through mutation
+          for (const operand of eachInstructionValueOperand(instr.value)) {
+            switch (operand.effect) {
+              case Effect.Capture:
+              case Effect.Store:
+              case Effect.ConditionallyMutate:
+              case Effect.ConditionallyMutateIterator:
+              case Effect.Mutate: {
+                if (isMutable(instr, operand)) {
+                  refDerivedValues.add(operand.identifier.id);
+                }
+                break;
+              }
+              case Effect.Freeze:
+              case Effect.Read: {
+                // no-op
+                break;
+              }
+              case Effect.Unknown: {
+                CompilerError.invariant(false, {
+                  reason: 'Unexpected unknown effect',
+                  loc: operand.loc,
+                });
+              }
+              default: {
+                assertExhaustive(
+                  operand.effect,
+                  `Unexpected effect kind \`${operand.effect}\``,
+                );
+              }
+            }
+          }
+        }
+
+        if (
+          instr.value.kind === 'PropertyLoad' &&
+          instr.value.property === 'current' &&
+          (isUseRefType(instr.value.object.identifier) ||
+            isRefValueType(instr.value.object.identifier))
+        ) {
+          refDerivedValues.add(instr.lvalue.identifier.id);
+        }
+      }
+
+      switch (instr.value.kind) {
+        case 'LoadLocal': {
+          if (setStateFunctions.has(instr.value.place.identifier.id)) {
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.place,
+            );
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          if (setStateFunctions.has(instr.value.value.identifier.id)) {
+            setStateFunctions.set(
+              instr.value.lvalue.place.identifier.id,
+              instr.value.value,
+            );
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.value,
+            );
+          }
+          break;
+        }
+        case 'CallExpression': {
+          const callee = instr.value.callee;
+          if (
+            isSetStateType(callee.identifier) ||
+            setStateFunctions.has(callee.identifier.id)
+          ) {
+            if (enableAllowSetStateFromRefsInEffects) {
+              const arg = instr.value.args.at(0);
+              if (
+                arg !== undefined &&
+                arg.kind === 'Identifier' &&
+                refDerivedValues.has(arg.identifier.id)
+              ) {
+                /**
+                 * The one special case where we allow setStates in effects is in the very specific
+                 * scenario where the value being set is derived from a ref. For example this may
+                 * be needed when initial layout measurements from refs need to be stored in state.
+                 */
+                return null;
+              } else if (isRefControlledBlock(block.id)) {
+                continue;
+              }
+            }
+            /*
+             * TODO: once we support multiple locations per error, we should link to the
+             * original Place in the case that setStateFunction.has(callee)
+             */
+            return callee;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts
new file mode 100644
index 00000000000..28a1de4235a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {HIRFunction, IdentifierId, isSetStateType} from '../HIR';
+import {computeUnconditionalBlocks} from '../HIR/ComputeUnconditionalBlocks';
+import {eachInstructionValueOperand} from '../HIR/visitors';
+import {Result} from '../Utils/Result';
+
+/**
+ * Validates that the given function does not have an infinite update loop
+ * caused by unconditionally calling setState during render. This validation
+ * is conservative and cannot catch all cases of unconditional setState in
+ * render, but avoids false positives. Examples of cases that are caught:
+ *
+ * ```javascript
+ * // Direct call of setState:
+ * const [state, setState] = useState(false);
+ * setState(true);
+ *
+ * // Indirect via a function:
+ * const [state, setState] = useState(false);
+ * const setTrue = () => setState(true);
+ * setTrue();
+ * ```
+ *
+ * However, storing setState inside another value and accessing it is not yet
+ * validated:
+ *
+ * ```
+ * // false negative, not detected but will cause an infinite render loop
+ * const [state, setState] = useState(false);
+ * const x = [setState];
+ * const y = x.pop();
+ * y();
+ * ```
+ */
+export function validateNoSetStateInRender(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const unconditionalSetStateFunctions: Set<IdentifierId> = new Set();
+  return validateNoSetStateInRenderImpl(fn, unconditionalSetStateFunctions);
+}
+
+function validateNoSetStateInRenderImpl(
+  fn: HIRFunction,
+  unconditionalSetStateFunctions: Set<IdentifierId>,
+): Result<void, CompilerError> {
+  const unconditionalBlocks = computeUnconditionalBlocks(fn);
+  let activeManualMemoId: number | null = null;
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'LoadLocal': {
+          if (
+            unconditionalSetStateFunctions.has(instr.value.place.identifier.id)
+          ) {
+            unconditionalSetStateFunctions.add(instr.lvalue.identifier.id);
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          if (
+            unconditionalSetStateFunctions.has(instr.value.value.identifier.id)
+          ) {
+            unconditionalSetStateFunctions.add(
+              instr.value.lvalue.place.identifier.id,
+            );
+            unconditionalSetStateFunctions.add(instr.lvalue.identifier.id);
+          }
+          break;
+        }
+        case 'ObjectMethod':
+        case 'FunctionExpression': {
+          if (
+            // faster-path to check if the function expression references a setState
+            [...eachInstructionValueOperand(instr.value)].some(
+              operand =>
+                isSetStateType(operand.identifier) ||
+                unconditionalSetStateFunctions.has(operand.identifier.id),
+            ) &&
+            // if yes, does it unconditonally call it?
+            validateNoSetStateInRenderImpl(
+              instr.value.loweredFunc.func,
+              unconditionalSetStateFunctions,
+            ).isErr()
+          ) {
+            // This function expression unconditionally calls a setState
+            unconditionalSetStateFunctions.add(instr.lvalue.identifier.id);
+          }
+          break;
+        }
+        case 'StartMemoize': {
+          CompilerError.invariant(activeManualMemoId === null, {
+            reason: 'Unexpected nested StartMemoize instructions',
+            loc: instr.value.loc,
+          });
+          activeManualMemoId = instr.value.manualMemoId;
+          break;
+        }
+        case 'FinishMemoize': {
+          CompilerError.invariant(
+            activeManualMemoId === instr.value.manualMemoId,
+            {
+              reason:
+                'Expected FinishMemoize to align with previous StartMemoize instruction',
+              loc: instr.value.loc,
+            },
+          );
+          activeManualMemoId = null;
+          break;
+        }
+        case 'CallExpression': {
+          const callee = instr.value.callee;
+          if (
+            isSetStateType(callee.identifier) ||
+            unconditionalSetStateFunctions.has(callee.identifier.id)
+          ) {
+            if (activeManualMemoId !== null) {
+              errors.pushDiagnostic(
+                CompilerDiagnostic.create({
+                  category: ErrorCategory.RenderSetState,
+                  reason:
+                    'Calling setState from useMemo may trigger an infinite loop',
+                  description:
+                    'Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)',
+                  suggestions: null,
+                }).withDetails({
+                  kind: 'error',
+                  loc: callee.loc,
+                  message: 'Found setState() within useMemo()',
+                }),
+              );
+            } else if (unconditionalBlocks.has(block.id)) {
+              const enableUseKeyedState = fn.env.config.enableUseKeyedState;
+              if (enableUseKeyedState) {
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.RenderSetState,
+                    reason: 'Cannot call setState during render',
+                    description:
+                      'Calling setState during render may trigger an infinite loop.\n' +
+                      '* To reset state when other state/props change, use `const [state, setState] = useKeyedState(initialState, key)` to reset `state` when `key` changes.\n' +
+                      '* To derive data from other state/props, compute the derived data during render without using state',
+                    suggestions: null,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: callee.loc,
+                    message: 'Found setState() in render',
+                  }),
+                );
+              } else {
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.RenderSetState,
+                    reason: 'Cannot call setState during render',
+                    description:
+                      'Calling setState during render may trigger an infinite loop.\n' +
+                      '* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders\n' +
+                      '* To derive data from other state/props, compute the derived data during render without using state',
+                    suggestions: null,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: callee.loc,
+                    message: 'Found setState() in render',
+                  }),
+                );
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  return errors.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidatePreservedManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidatePreservedManualMemoization.ts
new file mode 100644
index 00000000000..5591a6a29c8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidatePreservedManualMemoization.ts
@@ -0,0 +1,609 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {
+  DeclarationId,
+  Effect,
+  GeneratedSource,
+  Identifier,
+  IdentifierId,
+  InstructionValue,
+  ManualMemoDependency,
+  PrunedReactiveScopeBlock,
+  ReactiveFunction,
+  ReactiveInstruction,
+  ReactiveScopeBlock,
+  ReactiveScopeDependency,
+  ReactiveValue,
+  ScopeId,
+  SourceLocation,
+} from '../HIR';
+import {printIdentifier, printManualMemoDependency} from '../HIR/PrintHIR';
+import {
+  eachInstructionValueLValue,
+  eachInstructionValueOperand,
+} from '../HIR/visitors';
+import {collectMaybeMemoDependencies} from '../Inference/DropManualMemoization';
+import {
+  ReactiveFunctionVisitor,
+  visitReactiveFunction,
+} from '../ReactiveScopes/visitors';
+import {Result} from '../Utils/Result';
+import {getOrInsertDefault} from '../Utils/utils';
+
+/**
+ * Validates that all explicit manual memoization (useMemo/useCallback) was accurately
+ * preserved, and that no originally memoized values became unmemoized in the output.
+ *
+ * This can occur if a value's mutable range somehow extended to include a hook and
+ * was pruned.
+ */
+export function validatePreservedManualMemoization(
+  fn: ReactiveFunction,
+): Result<void, CompilerError> {
+  const state = {
+    errors: new CompilerError(),
+    manualMemoState: null,
+  };
+  visitReactiveFunction(fn, new Visitor(), state);
+  return state.errors.asResult();
+}
+
+const DEBUG = false;
+
+type ManualMemoBlockState = {
+  /**
+   * Tracks reassigned temporaries.
+   * This is necessary because useMemo calls are usually inlined.
+   * Inlining produces a `let` declaration, followed by reassignments
+   * to the newly declared variable (one per return statement).
+   * Since InferReactiveScopes does not merge scopes across reassigned
+   * variables (except in the case of a mutate-after-phi), we need to
+   * track reassignments to validate we're retaining manual memo.
+   */
+  reassignments: Map<DeclarationId, Set<Identifier>>;
+  // The source of the original memoization, used when reporting errors
+  loc: SourceLocation;
+
+  /**
+   * Values produced within manual memoization blocks.
+   * We track these to ensure our inferred dependencies are
+   * produced before the manual memo block starts
+   *
+   * As an example:
+   * ```js
+   * // source
+   * const result = useMemo(() => {
+   *   return [makeObject(input1), input2],
+   * }, [input1, input2]);
+   * ```
+   * Here, we record inferred dependencies as [input1, input2]
+   * but not t0
+   * ```js
+   * // StartMemoize
+   * let t0;
+   * if ($[0] != input1) {
+   *   t0 = makeObject(input1);
+   *   // ...
+   * } else { ... }
+   *
+   * let result;
+   * if ($[1] != t0 || $[2] != input2) {
+   *   result = [t0, input2];
+   * } else { ... }
+   * ```
+   */
+  decls: Set<DeclarationId>;
+
+  /*
+   * normalized depslist from useMemo/useCallback
+   * callsite in source
+   */
+  depsFromSource: Array<ManualMemoDependency> | null;
+  manualMemoId: number;
+};
+
+type VisitorState = {
+  errors: CompilerError;
+  manualMemoState: ManualMemoBlockState | null;
+};
+
+function prettyPrintScopeDependency(val: ReactiveScopeDependency): string {
+  let rootStr;
+  if (val.identifier.name?.kind === 'named') {
+    rootStr = val.identifier.name.value;
+  } else {
+    rootStr = '[unnamed]';
+  }
+  return `${rootStr}${val.path.map(v => `${v.optional ? '?.' : '.'}${v.property}`).join('')}`;
+}
+
+enum CompareDependencyResult {
+  Ok = 0,
+  RootDifference = 1,
+  PathDifference = 2,
+  Subpath = 3,
+  RefAccessDifference = 4,
+}
+
+function merge(
+  a: CompareDependencyResult,
+  b: CompareDependencyResult,
+): CompareDependencyResult {
+  return Math.max(a, b);
+}
+
+function getCompareDependencyResultDescription(
+  result: CompareDependencyResult,
+): string {
+  switch (result) {
+    case CompareDependencyResult.Ok:
+      return 'Dependencies equal';
+    case CompareDependencyResult.RootDifference:
+    case CompareDependencyResult.PathDifference:
+      return 'Inferred different dependency than source';
+    case CompareDependencyResult.RefAccessDifference:
+      return 'Differences in ref.current access';
+    case CompareDependencyResult.Subpath:
+      return 'Inferred less specific property than source';
+  }
+}
+
+function compareDeps(
+  inferred: ManualMemoDependency,
+  source: ManualMemoDependency,
+): CompareDependencyResult {
+  const rootsEqual =
+    (inferred.root.kind === 'Global' &&
+      source.root.kind === 'Global' &&
+      inferred.root.identifierName === source.root.identifierName) ||
+    (inferred.root.kind === 'NamedLocal' &&
+      source.root.kind === 'NamedLocal' &&
+      inferred.root.value.identifier.id === source.root.value.identifier.id);
+  if (!rootsEqual) {
+    return CompareDependencyResult.RootDifference;
+  }
+
+  let isSubpath = true;
+  for (let i = 0; i < Math.min(inferred.path.length, source.path.length); i++) {
+    if (inferred.path[i].property !== source.path[i].property) {
+      isSubpath = false;
+      break;
+    } else if (inferred.path[i].optional !== source.path[i].optional) {
+      /**
+       * The inferred path must be at least as precise as the manual path:
+       * if the inferred path is optional, then the source path must have
+       * been optional too.
+       */
+      return CompareDependencyResult.PathDifference;
+    }
+  }
+
+  if (
+    isSubpath &&
+    (source.path.length === inferred.path.length ||
+      (inferred.path.length >= source.path.length &&
+        !inferred.path.some(token => token.property === 'current')))
+  ) {
+    return CompareDependencyResult.Ok;
+  } else {
+    if (isSubpath) {
+      if (
+        source.path.some(token => token.property === 'current') ||
+        inferred.path.some(token => token.property === 'current')
+      ) {
+        return CompareDependencyResult.RefAccessDifference;
+      } else {
+        return CompareDependencyResult.Subpath;
+      }
+    } else {
+      return CompareDependencyResult.PathDifference;
+    }
+  }
+}
+
+/**
+ * Validate that an inferred dependency either matches a source dependency
+ * or is produced by earlier instructions in the same manual memoization
+ * call.
+ * Inferred dependency `rootA.[pathA]` matches a source dependency `rootB.[pathB]`
+ * when:
+ *   - rootA and rootB are loads from the same named identifier. Note that this
+ *     identifier must be also named in source, as DropManualMemoization, which
+ *     runs before any renaming passes, only records loads from named variables.
+ *   - and one of the following holds:
+ *       - pathA and pathB are identifical
+ *       - pathB is a subpath of pathA and neither read into a `ref` type*
+ *
+ * We do not allow for partial matches on ref types because they are not immutable
+ * values, e.g.
+ * ref_prev === ref_new does not imply ref_prev.current === ref_new.current
+ */
+function validateInferredDep(
+  dep: ReactiveScopeDependency,
+  temporaries: Map<IdentifierId, ManualMemoDependency>,
+  declsWithinMemoBlock: Set<DeclarationId>,
+  validDepsInMemoBlock: Array<ManualMemoDependency>,
+  errorState: CompilerError,
+  memoLocation: SourceLocation,
+): void {
+  let normalizedDep: ManualMemoDependency;
+  const maybeNormalizedRoot = temporaries.get(dep.identifier.id);
+  if (maybeNormalizedRoot != null) {
+    normalizedDep = {
+      root: maybeNormalizedRoot.root,
+      path: [...maybeNormalizedRoot.path, ...dep.path],
+      loc: maybeNormalizedRoot.loc,
+    };
+  } else {
+    CompilerError.invariant(dep.identifier.name?.kind === 'named', {
+      reason:
+        'ValidatePreservedManualMemoization: expected scope dependency to be named',
+      loc: GeneratedSource,
+    });
+    normalizedDep = {
+      root: {
+        kind: 'NamedLocal',
+        value: {
+          kind: 'Identifier',
+          identifier: dep.identifier,
+          loc: GeneratedSource,
+          effect: Effect.Read,
+          reactive: false,
+        },
+        constant: false,
+      },
+      path: [...dep.path],
+      loc: GeneratedSource,
+    };
+  }
+  for (const decl of declsWithinMemoBlock) {
+    if (
+      normalizedDep.root.kind === 'NamedLocal' &&
+      decl === normalizedDep.root.value.identifier.declarationId
+    ) {
+      return;
+    }
+  }
+  let errorDiagnostic: CompareDependencyResult | null = null;
+  for (const originalDep of validDepsInMemoBlock) {
+    const compareResult = compareDeps(normalizedDep, originalDep);
+    if (compareResult === CompareDependencyResult.Ok) {
+      return;
+    } else {
+      errorDiagnostic = merge(errorDiagnostic ?? compareResult, compareResult);
+    }
+  }
+  errorState.pushDiagnostic(
+    CompilerDiagnostic.create({
+      category: ErrorCategory.PreserveManualMemo,
+      reason: 'Existing memoization could not be preserved',
+      description: [
+        'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',
+        'The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. ',
+        DEBUG ||
+        // If the dependency is a named variable then we can report it. Otherwise only print in debug mode
+        (dep.identifier.name != null && dep.identifier.name.kind === 'named')
+          ? `The inferred dependency was \`${prettyPrintScopeDependency(
+              dep,
+            )}\`, but the source dependencies were [${validDepsInMemoBlock
+              .map(dep => printManualMemoDependency(dep, true))
+              .join(', ')}]. ${
+              errorDiagnostic
+                ? getCompareDependencyResultDescription(errorDiagnostic)
+                : 'Inferred dependency not present in source'
+            }`
+          : '',
+      ]
+        .join('')
+        .trim(),
+      suggestions: null,
+    }).withDetails({
+      kind: 'error',
+      loc: memoLocation,
+      message: 'Could not preserve existing manual memoization',
+    }),
+  );
+}
+
+class Visitor extends ReactiveFunctionVisitor<VisitorState> {
+  /**
+   * Records all completed scopes (regardless of transitive memoization
+   * of scope dependencies)
+   *
+   * Both @scopes and @prunedScopes are live sets. We rely on iterating
+   * the reactive-ir in evaluation order, as they are used to determine
+   * whether scope dependencies / declarations have completed mutation.
+   */
+  scopes: Set<ScopeId> = new Set();
+  prunedScopes: Set<ScopeId> = new Set();
+  temporaries: Map<IdentifierId, ManualMemoDependency> = new Map();
+
+  /**
+   * Recursively visit values and instructions to collect declarations
+   * and property loads.
+   * @returns a @{ManualMemoDependency} representing the variable +
+   * property reads represented by @value
+   */
+  recordDepsInValue(value: ReactiveValue, state: VisitorState): void {
+    switch (value.kind) {
+      case 'SequenceExpression': {
+        for (const instr of value.instructions) {
+          this.visitInstruction(instr, state);
+        }
+        this.recordDepsInValue(value.value, state);
+        break;
+      }
+      case 'OptionalExpression': {
+        this.recordDepsInValue(value.value, state);
+        break;
+      }
+      case 'ConditionalExpression': {
+        this.recordDepsInValue(value.test, state);
+        this.recordDepsInValue(value.consequent, state);
+        this.recordDepsInValue(value.alternate, state);
+        break;
+      }
+      case 'LogicalExpression': {
+        this.recordDepsInValue(value.left, state);
+        this.recordDepsInValue(value.right, state);
+        break;
+      }
+      default: {
+        collectMaybeMemoDependencies(value, this.temporaries, false);
+        if (
+          value.kind === 'StoreLocal' ||
+          value.kind === 'StoreContext' ||
+          value.kind === 'Destructure'
+        ) {
+          for (const storeTarget of eachInstructionValueLValue(value)) {
+            state.manualMemoState?.decls.add(
+              storeTarget.identifier.declarationId,
+            );
+            if (storeTarget.identifier.name?.kind === 'named') {
+              this.temporaries.set(storeTarget.identifier.id, {
+                root: {
+                  kind: 'NamedLocal',
+                  value: storeTarget,
+                  constant: false,
+                },
+                path: [],
+                loc: storeTarget.loc,
+              });
+            }
+          }
+        }
+        break;
+      }
+    }
+  }
+
+  recordTemporaries(instr: ReactiveInstruction, state: VisitorState): void {
+    const temporaries = this.temporaries;
+    const {lvalue, value} = instr;
+    const lvalId = lvalue?.identifier.id;
+    if (lvalId != null && temporaries.has(lvalId)) {
+      return;
+    }
+    const isNamedLocal = lvalue?.identifier.name?.kind === 'named';
+    if (lvalue !== null && isNamedLocal && state.manualMemoState != null) {
+      state.manualMemoState.decls.add(lvalue.identifier.declarationId);
+    }
+
+    this.recordDepsInValue(value, state);
+    if (lvalue != null) {
+      temporaries.set(lvalue.identifier.id, {
+        root: {
+          kind: 'NamedLocal',
+          value: {...lvalue},
+          constant: false,
+        },
+        path: [],
+        loc: lvalue.loc,
+      });
+    }
+  }
+
+  override visitScope(
+    scopeBlock: ReactiveScopeBlock,
+    state: VisitorState,
+  ): void {
+    this.traverseScope(scopeBlock, state);
+
+    if (
+      state.manualMemoState != null &&
+      state.manualMemoState.depsFromSource != null
+    ) {
+      for (const dep of scopeBlock.scope.dependencies) {
+        validateInferredDep(
+          dep,
+          this.temporaries,
+          state.manualMemoState.decls,
+          state.manualMemoState.depsFromSource,
+          state.errors,
+          state.manualMemoState.loc,
+        );
+      }
+    }
+
+    this.scopes.add(scopeBlock.scope.id);
+    for (const id of scopeBlock.scope.merged) {
+      this.scopes.add(id);
+    }
+  }
+
+  override visitPrunedScope(
+    scopeBlock: PrunedReactiveScopeBlock,
+    state: VisitorState,
+  ): void {
+    this.traversePrunedScope(scopeBlock, state);
+    this.prunedScopes.add(scopeBlock.scope.id);
+  }
+
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    state: VisitorState,
+  ): void {
+    /**
+     * We don't invoke traverseInstructions because `recordDepsInValue`
+     * recursively visits ReactiveValues and instructions
+     */
+    this.recordTemporaries(instruction, state);
+    const value = instruction.value;
+    // Track reassignments from inlining of manual memo
+    if (
+      value.kind === 'StoreLocal' &&
+      value.lvalue.kind === 'Reassign' &&
+      state.manualMemoState != null
+    ) {
+      // Complex cases of inlining end up with a temporary that is reassigned
+      const ids = getOrInsertDefault(
+        state.manualMemoState.reassignments,
+        value.lvalue.place.identifier.declarationId,
+        new Set(),
+      );
+      ids.add(value.value.identifier);
+    }
+    if (
+      value.kind === 'LoadLocal' &&
+      value.place.identifier.scope != null &&
+      instruction.lvalue != null &&
+      instruction.lvalue.identifier.scope == null &&
+      state.manualMemoState != null
+    ) {
+      // Simpler cases of inlining assign to the original IIFE lvalue
+      const ids = getOrInsertDefault(
+        state.manualMemoState.reassignments,
+        instruction.lvalue.identifier.declarationId,
+        new Set(),
+      );
+      ids.add(value.place.identifier);
+    }
+    if (value.kind === 'StartMemoize') {
+      let depsFromSource: Array<ManualMemoDependency> | null = null;
+      if (value.deps != null) {
+        depsFromSource = value.deps;
+      }
+      CompilerError.invariant(state.manualMemoState == null, {
+        reason: 'Unexpected nested StartMemoize instructions',
+        description: `Bad manual memoization ids: ${state.manualMemoState?.manualMemoId}, ${value.manualMemoId}`,
+        loc: value.loc,
+      });
+
+      state.manualMemoState = {
+        loc: instruction.loc,
+        decls: new Set(),
+        depsFromSource,
+        manualMemoId: value.manualMemoId,
+        reassignments: new Map(),
+      };
+
+      /**
+       * We check that each scope dependency is either:
+       * (1) Not scoped
+       *     Checking `identifier.scope == null` is a proxy for whether the dep
+       *     is a primitive, global, or other guaranteed non-allocating value.
+       *     Non-allocating values do not need memoization.
+       *     Note that this is a conservative estimate as some primitive-typed
+       *     variables do receive scopes.
+       * (2) Scoped (a maybe newly-allocated value with a mutable range)
+       *     Here, we check that the dependency's scope has completed before
+       *     the manual useMemo as a proxy for mutable-range checking. This
+       *     validates that there are no potential rule-of-react violations
+       *     in source.
+       *     Note that scope range is an overly conservative proxy as we merge
+       *     overlapping ranges.
+       *     See fixture `error.false-positive-useMemo-overlap-scopes`
+       */
+      for (const {identifier, loc} of eachInstructionValueOperand(
+        value as InstructionValue,
+      )) {
+        if (
+          identifier.scope != null &&
+          !this.scopes.has(identifier.scope.id) &&
+          !this.prunedScopes.has(identifier.scope.id)
+        ) {
+          state.errors.pushDiagnostic(
+            CompilerDiagnostic.create({
+              category: ErrorCategory.PreserveManualMemo,
+              reason: 'Existing memoization could not be preserved',
+              description: [
+                'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',
+                'This dependency may be mutated later, which could cause the value to change unexpectedly',
+              ].join(''),
+            }).withDetails({
+              kind: 'error',
+              loc,
+              message: 'This dependency may be modified later',
+            }),
+          );
+        }
+      }
+    }
+    if (value.kind === 'FinishMemoize') {
+      CompilerError.invariant(
+        state.manualMemoState != null &&
+          state.manualMemoState.manualMemoId === value.manualMemoId,
+        {
+          reason: 'Unexpected mismatch between StartMemoize and FinishMemoize',
+          description: `Encountered StartMemoize id=${state.manualMemoState?.manualMemoId} followed by FinishMemoize id=${value.manualMemoId}`,
+          loc: value.loc,
+        },
+      );
+      const reassignments = state.manualMemoState.reassignments;
+      state.manualMemoState = null;
+      if (!value.pruned) {
+        for (const {identifier, loc} of eachInstructionValueOperand(
+          value as InstructionValue,
+        )) {
+          let decls;
+          if (identifier.scope == null) {
+            /**
+             * If the manual memo was a useMemo that got inlined, iterate through
+             * all reassignments to the iife temporary to ensure they're memoized.
+             */
+            decls = reassignments.get(identifier.declarationId) ?? [identifier];
+          } else {
+            decls = [identifier];
+          }
+
+          for (const identifier of decls) {
+            if (isUnmemoized(identifier, this.scopes)) {
+              state.errors.pushDiagnostic(
+                CompilerDiagnostic.create({
+                  category: ErrorCategory.PreserveManualMemo,
+                  reason: 'Existing memoization could not be preserved',
+                  description: [
+                    'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output',
+                    DEBUG
+                      ? `${printIdentifier(identifier)} was not memoized.`
+                      : '',
+                  ]
+                    .join('')
+                    .trim(),
+                }).withDetails({
+                  kind: 'error',
+                  loc,
+                  message: 'Could not preserve existing memoization',
+                }),
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function isUnmemoized(operand: Identifier, scopes: Set<ScopeId>): boolean {
+  return operand.scope != null && !scopes.has(operand.scope.id);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateSourceLocations.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateSourceLocations.ts
new file mode 100644
index 00000000000..cd357af70f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateSourceLocations.ts
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {CompilerDiagnostic, CompilerError, ErrorCategory} from '..';
+import {CodegenFunction} from '../ReactiveScopes';
+import {Result} from '../Utils/Result';
+
+/**
+ * IMPORTANT: This validation is only intended for use in unit tests.
+ * It is not intended for use in production.
+ *
+ * This validation is used to ensure that the generated AST has proper source locations
+ * for "important" original nodes.
+ *
+ * There's one big gotcha with this validation: it only works if the "important" original nodes
+ * are not optimized away by the compiler.
+ *
+ * When that scenario happens, we should just update the fixture to not include a node that has no
+ * corresponding node in the generated AST due to being completely removed during compilation.
+ */
+
+/**
+ * Some common node types that are important for coverage tracking.
+ * Based on istanbul-lib-instrument + some other common nodes we expect to be present in the generated AST.
+ *
+ * Note: For VariableDeclaration, VariableDeclarator, and Identifier, we enforce stricter validation
+ * that requires both the source location AND node type to match in the generated AST. This ensures
+ * that variable declarations maintain their structural integrity through compilation.
+ */
+const IMPORTANT_INSTRUMENTED_TYPES = new Set([
+  'ArrowFunctionExpression',
+  'AssignmentPattern',
+  'ObjectMethod',
+  'ExpressionStatement',
+  'BreakStatement',
+  'ContinueStatement',
+  'ReturnStatement',
+  'ThrowStatement',
+  'TryStatement',
+  'VariableDeclarator',
+  'IfStatement',
+  'ForStatement',
+  'ForInStatement',
+  'ForOfStatement',
+  'WhileStatement',
+  'DoWhileStatement',
+  'SwitchStatement',
+  'SwitchCase',
+  'WithStatement',
+  'FunctionDeclaration',
+  'FunctionExpression',
+  'LabeledStatement',
+  'ConditionalExpression',
+  'LogicalExpression',
+
+  /**
+   * Note: these aren't important for coverage tracking,
+   * but we still want to track them to ensure we aren't regressing them when
+   * we fix the source location tracking for other nodes.
+   */
+  'VariableDeclaration',
+  'Identifier',
+]);
+
+/**
+ * Check if a node is a manual memoization call that the compiler optimizes away.
+ * These include useMemo and useCallback calls, which are intentionally removed
+ * by the DropManualMemoization pass.
+ */
+function isManualMemoization(node: t.Node): boolean {
+  // Check if this is a useMemo/useCallback call expression
+  if (t.isCallExpression(node)) {
+    const callee = node.callee;
+    if (t.isIdentifier(callee)) {
+      return callee.name === 'useMemo' || callee.name === 'useCallback';
+    }
+    if (
+      t.isMemberExpression(callee) &&
+      t.isIdentifier(callee.property) &&
+      t.isIdentifier(callee.object)
+    ) {
+      return (
+        callee.object.name === 'React' &&
+        (callee.property.name === 'useMemo' ||
+          callee.property.name === 'useCallback')
+      );
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Create a location key for comparison. We compare by line/column/source,
+ * not by object identity.
+ */
+function locationKey(loc: t.SourceLocation): string {
+  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`;
+}
+
+/**
+ * Validates that important source locations from the original code are preserved
+ * in the generated AST. This ensures that Istanbul coverage instrumentation can
+ * properly map back to the original source code.
+ *
+ * The validator:
+ * 1. Collects locations from "important" nodes in the original AST (those that
+ *    Istanbul instruments for coverage tracking)
+ * 2. Exempts known compiler optimizations (useMemo/useCallback removal)
+ * 3. Verifies that all important locations appear somewhere in the generated AST
+ *
+ * Missing locations can cause Istanbul to fail to track coverage for certain
+ * code paths, leading to inaccurate coverage reports.
+ */
+export function validateSourceLocations(
+  func: NodePath<
+    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
+  >,
+  generatedAst: CodegenFunction,
+): Result<void, CompilerError> {
+  const errors = new CompilerError();
+
+  /*
+   * Step 1: Collect important locations from the original source
+   * Note: Multiple node types can share the same location (e.g. VariableDeclarator and Identifier)
+   */
+  const importantOriginalLocations = new Map<
+    string,
+    {loc: t.SourceLocation; nodeTypes: Set<string>}
+  >();
+
+  func.traverse({
+    enter(path) {
+      const node = path.node;
+
+      // Only track node types that Istanbul instruments
+      if (!IMPORTANT_INSTRUMENTED_TYPES.has(node.type)) {
+        return;
+      }
+
+      // Skip manual memoization that the compiler intentionally removes
+      if (isManualMemoization(node)) {
+        return;
+      }
+
+      // Collect the location if it exists
+      if (node.loc) {
+        const key = locationKey(node.loc);
+        const existing = importantOriginalLocations.get(key);
+        if (existing) {
+          existing.nodeTypes.add(node.type);
+        } else {
+          importantOriginalLocations.set(key, {
+            loc: node.loc,
+            nodeTypes: new Set([node.type]),
+          });
+        }
+      }
+    },
+  });
+
+  // Step 2: Collect all locations from the generated AST with their node types
+  const generatedLocations = new Map<string, Set<string>>();
+
+  function collectGeneratedLocations(node: t.Node): void {
+    if (node.loc) {
+      const key = locationKey(node.loc);
+      const nodeTypes = generatedLocations.get(key);
+      if (nodeTypes) {
+        nodeTypes.add(node.type);
+      } else {
+        generatedLocations.set(key, new Set([node.type]));
+      }
+    }
+
+    // Use Babel's VISITOR_KEYS to traverse only actual node properties
+    const keys = t.VISITOR_KEYS[node.type as keyof typeof t.VISITOR_KEYS];
+
+    if (!keys) {
+      return;
+    }
+
+    for (const key of keys) {
+      const value = (node as any)[key];
+
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          if (t.isNode(item)) {
+            collectGeneratedLocations(item);
+          }
+        }
+      } else if (t.isNode(value)) {
+        collectGeneratedLocations(value);
+      }
+    }
+  }
+
+  // Collect from main function body
+  collectGeneratedLocations(generatedAst.body);
+
+  // Collect from outlined functions
+  for (const outlined of generatedAst.outlined) {
+    collectGeneratedLocations(outlined.fn.body);
+  }
+
+  /*
+   * Step 3: Validate that all important locations are preserved
+   * For certain node types, also validate that the node type matches
+   */
+  const strictNodeTypes = new Set([
+    'VariableDeclaration',
+    'VariableDeclarator',
+    'Identifier',
+  ]);
+
+  const reportMissingLocation = (
+    loc: t.SourceLocation,
+    nodeType: string,
+  ): void => {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Todo,
+        reason: 'Important source location missing in generated code',
+        description:
+          `Source location for ${nodeType} is missing in the generated output. This can cause coverage instrumentation ` +
+          `to fail to track this code properly, resulting in inaccurate coverage reports.`,
+      }).withDetails({
+        kind: 'error',
+        loc,
+        message: null,
+      }),
+    );
+  };
+
+  const reportWrongNodeType = (
+    loc: t.SourceLocation,
+    expectedType: string,
+    actualTypes: Set<string>,
+  ): void => {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Todo,
+        reason:
+          'Important source location has wrong node type in generated code',
+        description:
+          `Source location for ${expectedType} exists in the generated output but with wrong node type(s): ${Array.from(actualTypes).join(', ')}. ` +
+          `This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports.`,
+      }).withDetails({
+        kind: 'error',
+        loc,
+        message: null,
+      }),
+    );
+  };
+
+  for (const [key, {loc, nodeTypes}] of importantOriginalLocations) {
+    const generatedNodeTypes = generatedLocations.get(key);
+
+    if (!generatedNodeTypes) {
+      // Location is completely missing
+      reportMissingLocation(loc, Array.from(nodeTypes).join(', '));
+    } else {
+      // Location exists, check each node type
+      for (const nodeType of nodeTypes) {
+        if (
+          strictNodeTypes.has(nodeType) &&
+          !generatedNodeTypes.has(nodeType)
+        ) {
+          /*
+           * For strict node types, the specific node type must be present
+           * Check if any generated node type is also an important original node type
+           */
+          const hasValidNodeType = Array.from(generatedNodeTypes).some(
+            genType => nodeTypes.has(genType),
+          );
+
+          if (hasValidNodeType) {
+            // At least one generated node type is valid (also in original), so this is just missing
+            reportMissingLocation(loc, nodeType);
+          } else {
+            // None of the generated node types are in original - this is wrong node type
+            reportWrongNodeType(loc, nodeType, generatedNodeTypes);
+          }
+        }
+      }
+    }
+  }
+
+  return errors.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateStaticComponents.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateStaticComponents.ts
new file mode 100644
index 00000000000..484f825ac18
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateStaticComponents.ts
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {HIRFunction, IdentifierId, SourceLocation} from '../HIR';
+import {Result} from '../Utils/Result';
+
+/**
+ * Validates against components that are created dynamically and whose identity is not guaranteed
+ * to be stable (which would cause the component to reset on each re-render).
+ */
+export function validateStaticComponents(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const error = new CompilerError();
+  const knownDynamicComponents = new Map<IdentifierId, SourceLocation>();
+  for (const block of fn.body.blocks.values()) {
+    phis: for (const phi of block.phis) {
+      for (const operand of phi.operands.values()) {
+        const loc = knownDynamicComponents.get(operand.identifier.id);
+        if (loc != null) {
+          knownDynamicComponents.set(phi.place.identifier.id, loc);
+          continue phis;
+        }
+      }
+    }
+    for (const instr of block.instructions) {
+      const {lvalue, value} = instr;
+      switch (value.kind) {
+        case 'FunctionExpression':
+        case 'NewExpression':
+        case 'MethodCall':
+        case 'CallExpression': {
+          knownDynamicComponents.set(lvalue.identifier.id, value.loc);
+          break;
+        }
+        case 'LoadLocal': {
+          const loc = knownDynamicComponents.get(value.place.identifier.id);
+          if (loc != null) {
+            knownDynamicComponents.set(lvalue.identifier.id, loc);
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          const loc = knownDynamicComponents.get(value.value.identifier.id);
+          if (loc != null) {
+            knownDynamicComponents.set(lvalue.identifier.id, loc);
+            knownDynamicComponents.set(value.lvalue.place.identifier.id, loc);
+          }
+          break;
+        }
+        case 'JsxExpression': {
+          if (value.tag.kind === 'Identifier') {
+            const location = knownDynamicComponents.get(
+              value.tag.identifier.id,
+            );
+            if (location != null) {
+              error.pushDiagnostic(
+                CompilerDiagnostic.create({
+                  category: ErrorCategory.StaticComponents,
+                  reason: 'Cannot create components during render',
+                  description: `Components created during render will reset their state each time they are created. Declare components outside of render`,
+                })
+                  .withDetails({
+                    kind: 'error',
+                    loc: value.tag.loc,
+                    message: 'This component is created during render',
+                  })
+                  .withDetails({
+                    kind: 'error',
+                    loc: location,
+                    message: 'The component is created during render here',
+                  }),
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+  return error.asResult();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts
new file mode 100644
index 00000000000..2bccda3a2e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  ErrorCategory,
+} from '../CompilerError';
+import {
+  FunctionExpression,
+  HIRFunction,
+  IdentifierId,
+  SourceLocation,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {Result} from '../Utils/Result';
+
+export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
+  const errors = new CompilerError();
+  const voidMemoErrors = new CompilerError();
+  const useMemos = new Set<IdentifierId>();
+  const react = new Set<IdentifierId>();
+  const functions = new Map<IdentifierId, FunctionExpression>();
+  const unusedUseMemos = new Map<IdentifierId, SourceLocation>();
+  for (const [, block] of fn.body.blocks) {
+    for (const {lvalue, value} of block.instructions) {
+      if (unusedUseMemos.size !== 0) {
+        /**
+         * Most of the time useMemo results are referenced immediately. Don't bother
+         * scanning instruction operands for useMemos unless there is an as-yet-unused
+         * useMemo.
+         */
+        for (const operand of eachInstructionValueOperand(value)) {
+          unusedUseMemos.delete(operand.identifier.id);
+        }
+      }
+      switch (value.kind) {
+        case 'LoadGlobal': {
+          if (value.binding.name === 'useMemo') {
+            useMemos.add(lvalue.identifier.id);
+          } else if (value.binding.name === 'React') {
+            react.add(lvalue.identifier.id);
+          }
+          break;
+        }
+        case 'PropertyLoad': {
+          if (react.has(value.object.identifier.id)) {
+            if (value.property === 'useMemo') {
+              useMemos.add(lvalue.identifier.id);
+            }
+          }
+          break;
+        }
+        case 'FunctionExpression': {
+          functions.set(lvalue.identifier.id, value);
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          // Is the function being called useMemo, with at least 1 argument?
+          const callee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          const isUseMemo = useMemos.has(callee.identifier.id);
+          if (!isUseMemo || value.args.length === 0) {
+            continue;
+          }
+
+          /*
+           * If yes get the first argument and if it refers to a locally defined function
+           * expression, validate the function
+           */
+          const [arg] = value.args;
+          if (arg.kind !== 'Identifier') {
+            continue;
+          }
+          const body = functions.get(arg.identifier.id);
+          if (body === undefined) {
+            continue;
+          }
+
+          if (body.loweredFunc.func.params.length > 0) {
+            const firstParam = body.loweredFunc.func.params[0];
+            const loc =
+              firstParam.kind === 'Identifier'
+                ? firstParam.loc
+                : firstParam.place.loc;
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
+                category: ErrorCategory.UseMemo,
+                reason: 'useMemo() callbacks may not accept parameters',
+                description:
+                  'useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation',
+                suggestions: null,
+              }).withDetails({
+                kind: 'error',
+                loc,
+                message: 'Callbacks with parameters are not supported',
+              }),
+            );
+          }
+
+          if (body.loweredFunc.func.async || body.loweredFunc.func.generator) {
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
+                category: ErrorCategory.UseMemo,
+                reason:
+                  'useMemo() callbacks may not be async or generator functions',
+                description:
+                  'useMemo() callbacks are called once and must synchronously return a value',
+                suggestions: null,
+              }).withDetails({
+                kind: 'error',
+                loc: body.loc,
+                message: 'Async and generator functions are not supported',
+              }),
+            );
+          }
+
+          validateNoContextVariableAssignment(body.loweredFunc.func, errors);
+
+          if (fn.env.config.validateNoVoidUseMemo) {
+            if (!hasNonVoidReturn(body.loweredFunc.func)) {
+              voidMemoErrors.pushDiagnostic(
+                CompilerDiagnostic.create({
+                  category: ErrorCategory.VoidUseMemo,
+                  reason: 'useMemo() callbacks must return a value',
+                  description: `This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`,
+                  suggestions: null,
+                }).withDetails({
+                  kind: 'error',
+                  loc: body.loc,
+                  message: 'useMemo() callbacks must return a value',
+                }),
+              );
+            } else {
+              unusedUseMemos.set(lvalue.identifier.id, callee.loc);
+            }
+          }
+          break;
+        }
+      }
+    }
+    if (unusedUseMemos.size !== 0) {
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        unusedUseMemos.delete(operand.identifier.id);
+      }
+    }
+  }
+  if (unusedUseMemos.size !== 0) {
+    /**
+     * Basic check for unused memos, where the result of the call is never referenced. This runs
+     * before DCE so it's more of an AST-level check that something, _anything_, cares about the value.
+     *
+     * This is easy to defeat with e.g. `const _ = useMemo(...)` but it at least gives us something to teach.
+     * Even a DCE-based version could be bypassed with `noop(useMemo(...))`.
+     */
+    for (const loc of unusedUseMemos.values()) {
+      voidMemoErrors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          category: ErrorCategory.VoidUseMemo,
+          reason: 'useMemo() result is unused',
+          description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`,
+          suggestions: null,
+        }).withDetails({
+          kind: 'error',
+          loc,
+          message: 'useMemo() result is unused',
+        }),
+      );
+    }
+  }
+  fn.env.logErrors(voidMemoErrors.asResult());
+  return errors.asResult();
+}
+
+function validateNoContextVariableAssignment(
+  fn: HIRFunction,
+  errors: CompilerError,
+): void {
+  const context = new Set(fn.context.map(place => place.identifier.id));
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const value = instr.value;
+      switch (value.kind) {
+        case 'StoreContext': {
+          if (context.has(value.lvalue.place.identifier.id)) {
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
+                category: ErrorCategory.UseMemo,
+                reason:
+                  'useMemo() callbacks may not reassign variables declared outside of the callback',
+                description:
+                  'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
+                suggestions: null,
+              }).withDetails({
+                kind: 'error',
+                loc: value.lvalue.place.loc,
+                message: 'Cannot reassign variable',
+              }),
+            );
+          }
+          break;
+        }
+      }
+    }
+  }
+}
+
+function hasNonVoidReturn(func: HIRFunction): boolean {
+  for (const [, block] of func.body.blocks) {
+    if (block.terminal.kind === 'return') {
+      if (
+        block.terminal.returnVariant === 'Explicit' ||
+        block.terminal.returnVariant === 'Implicit'
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/index.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/index.ts
new file mode 100644
index 00000000000..44abf3241d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {validateContextVariableLValues} from './ValidateContextVariableLValues';
+export {validateHooksUsage} from './ValidateHooksUsage';
+export {validateMemoizedEffectDependencies} from './ValidateMemoizedEffectDependencies';
+export {validateNoCapitalizedCalls} from './ValidateNoCapitalizedCalls';
+export {validateNoRefAccessInRender} from './ValidateNoRefAccessInRender';
+export {validateNoSetStateInRender} from './ValidateNoSetStateInRender';
+export {validatePreservedManualMemoization} from './ValidatePreservedManualMemoization';
+export {validateSourceLocations} from './ValidateSourceLocations';
+export {validateUseMemo} from './ValidateUseMemo';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/DisjointSet-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/DisjointSet-test.ts
new file mode 100644
index 00000000000..754edf0c938
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/DisjointSet-test.ts
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import DisjointSet from '../Utils/DisjointSet';
+
+type TestIdentifier = {
+  id: number;
+  name: string;
+};
+
+describe('DisjointSet', () => {
+  let identifierId = 0;
+  function makeIdentifier(name: string): TestIdentifier {
+    return {
+      id: identifierId++,
+      name,
+    };
+  }
+
+  function makeIdentifiers(...names: string[]): TestIdentifier[] {
+    return names.map(name => makeIdentifier(name));
+  }
+
+  beforeEach(() => {
+    identifierId = 0;
+  });
+
+  it('.find - finds the correct group which the item is associated with', () => {
+    const identifiers = new DisjointSet<TestIdentifier>();
+    const [x, y, z] = makeIdentifiers('x', 'y', 'z');
+
+    identifiers.union([x]);
+    identifiers.union([y, x]);
+
+    expect(identifiers.find(x)).toBe(y);
+    expect(identifiers.find(y)).toBe(y);
+    expect(identifiers.find(z)).toBe(null);
+  });
+
+  it('.size - returns 0 when empty', () => {
+    const identifiers = new DisjointSet<TestIdentifier>();
+
+    expect(identifiers.size).toBe(0);
+  });
+
+  it('.size - returns the correct size when non-empty', () => {
+    const identifiers = new DisjointSet<TestIdentifier>();
+    const [x, y] = makeIdentifiers('x', 'y', 'z');
+
+    identifiers.union([x]);
+    identifiers.union([y, x]);
+
+    expect(identifiers.size).toBe(2);
+  });
+
+  it('.buildSets - returns non-overlapping sets', () => {
+    const identifiers = new DisjointSet<TestIdentifier>();
+    const [a, b, c, x, y, z] = makeIdentifiers('a', 'b', 'c', 'x', 'y', 'z');
+
+    identifiers.union([a]);
+    identifiers.union([b, a]);
+    identifiers.union([c, b]);
+
+    identifiers.union([x]);
+    identifiers.union([y, x]);
+    identifiers.union([z, y]);
+    identifiers.union([x, z]);
+
+    expect(identifiers.buildSets()).toMatchInlineSnapshot(`
+      [
+        Set {
+          {
+            "id": 0,
+            "name": "a",
+          },
+          {
+            "id": 1,
+            "name": "b",
+          },
+          {
+            "id": 2,
+            "name": "c",
+          },
+        },
+        Set {
+          {
+            "id": 3,
+            "name": "x",
+          },
+          {
+            "id": 4,
+            "name": "y",
+          },
+          {
+            "id": 5,
+            "name": "z",
+          },
+        },
+      ]
+    `);
+  });
+
+  // Regression test for issue #933
+  it("`forEach` doesn't infinite loop when there are cycles", () => {
+    const identifiers = new DisjointSet<TestIdentifier>();
+    const [x, y, z] = makeIdentifiers('x', 'y', 'z');
+
+    identifiers.union([x]);
+    identifiers.union([y, x]);
+    identifiers.union([z, y]);
+    identifiers.union([x, z]);
+
+    identifiers.forEach((_, group) => expect(group).toBe(z));
+  });
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts
new file mode 100644
index 00000000000..ca386fb2402
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import invariant from 'invariant';
+import {runBabelPluginReactCompiler} from '../Babel/RunReactCompilerBabelPlugin';
+import type {Logger, LoggerEvent} from '../Entrypoint';
+
+it('logs succesful compilation', () => {
+  const logs: [string | null, LoggerEvent][] = [];
+  const logger: Logger = {
+    logEvent(filename, event) {
+      logs.push([filename, event]);
+    },
+  };
+
+  const _ = runBabelPluginReactCompiler(
+    'function Component(props) { return <div>{props}</div> }',
+    'test.js',
+    'flow',
+    {logger, panicThreshold: 'all_errors'},
+  );
+
+  const [filename, event] = logs.at(0)!;
+  expect(filename).toContain('test.js');
+  expect(event.kind).toEqual('CompileSuccess');
+  invariant(event.kind === 'CompileSuccess', 'typescript be smarter');
+  expect(event.fnName).toEqual('Component');
+  expect(event.fnLoc?.end).toEqual({column: 55, index: 55, line: 1});
+  expect(event.fnLoc?.start).toEqual({column: 0, index: 0, line: 1});
+});
+
+it('logs failed compilation', () => {
+  const logs: [string | null, LoggerEvent][] = [];
+  const logger: Logger = {
+    logEvent(filename, event) {
+      logs.push([filename, event]);
+    },
+  };
+
+  expect(() => {
+    runBabelPluginReactCompiler(
+      'function Component(props) { props.foo = 1; return <div>{props}</div> }',
+      'test.js',
+      'flow',
+      {logger, panicThreshold: 'all_errors'},
+    );
+  }).toThrow();
+
+  const [filename, event] = logs.at(0)!;
+  expect(filename).toContain('test.js');
+  expect(event.kind).toEqual('CompileError');
+  invariant(event.kind === 'CompileError', 'typescript be smarter');
+
+  expect(event.detail.severity).toEqual('Error');
+  //@ts-ignore
+  const {start, end, identifierName} =
+    event.detail.primaryLocation() as t.SourceLocation;
+  expect(start).toEqual({column: 28, index: 28, line: 1});
+  expect(end).toEqual({column: 33, index: 33, line: 1});
+  expect(identifierName).toEqual('props');
+
+  // Make sure event.fnLoc is different from event.detail.loc
+  expect(event.fnLoc?.start).toEqual({column: 0, index: 0, line: 1});
+  expect(event.fnLoc?.end).toEqual({column: 70, index: 70, line: 1});
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/Result-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Result-test.ts
new file mode 100644
index 00000000000..a91c0bdbde7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Result-test.ts
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '../CompilerError';
+import {Err, Ok, Result} from '../Utils/Result';
+
+function addMax10(a: number, b: number): Result<number, string> {
+  const n = a + b;
+  return n > 10 ? Err(`${n} is too high`) : Ok(n);
+}
+
+function onlyFoo(foo: string): Result<string, string> {
+  return foo === 'foo' ? Ok(foo) : Err(foo);
+}
+
+class CustomDummyError extends Error {}
+
+describe('Result', () => {
+  test('.map', () => {
+    expect(addMax10(1, 1).map(n => n * 2)).toEqual(Ok(4));
+    expect(addMax10(10, 10).map(n => n * 2)).toEqual(Err('20 is too high'));
+  });
+
+  test('.mapErr', () => {
+    expect(addMax10(1, 1).mapErr(e => `not a number: ${e}`)).toEqual(Ok(2));
+    expect(addMax10(10, 10).mapErr(e => `couldn't add: ${e}`)).toEqual(
+      Err("couldn't add: 20 is too high"),
+    );
+  });
+
+  test('.mapOr', () => {
+    expect(onlyFoo('foo').mapOr(42, v => v.length)).toEqual(3);
+    expect(onlyFoo('bar').mapOr(42, v => v.length)).toEqual(42);
+  });
+
+  test('.mapOrElse', () => {
+    expect(
+      onlyFoo('foo').mapOrElse(
+        () => 42,
+        v => v.length,
+      ),
+    ).toEqual(3);
+    expect(
+      onlyFoo('bar').mapOrElse(
+        () => 42,
+        v => v.length,
+      ),
+    ).toEqual(42);
+  });
+
+  test('.andThen', () => {
+    expect(addMax10(1, 1).andThen(n => Ok(n * 2))).toEqual(Ok(4));
+    expect(addMax10(10, 10).andThen(n => Ok(n * 2))).toEqual(
+      Err('20 is too high'),
+    );
+  });
+
+  test('.and', () => {
+    expect(addMax10(1, 1).and(Ok(4))).toEqual(Ok(4));
+    expect(addMax10(10, 10).and(Ok(4))).toEqual(Err('20 is too high'));
+    expect(addMax10(1, 1).and(Err('hehe'))).toEqual(Err('hehe'));
+    expect(addMax10(10, 10).and(Err('hehe'))).toEqual(Err('20 is too high'));
+  });
+
+  test('.or', () => {
+    expect(addMax10(1, 1).or(Ok(4))).toEqual(Ok(2));
+    expect(addMax10(10, 10).or(Ok(4))).toEqual(Ok(4));
+    expect(addMax10(1, 1).or(Err('hehe'))).toEqual(Ok(2));
+    expect(addMax10(10, 10).or(Err('hehe'))).toEqual(Err('hehe'));
+  });
+
+  test('.orElse', () => {
+    expect(addMax10(1, 1).orElse(str => Err(str.toUpperCase()))).toEqual(Ok(2));
+    expect(addMax10(10, 10).orElse(str => Err(str.toUpperCase()))).toEqual(
+      Err('20 IS TOO HIGH'),
+    );
+  });
+
+  test('.isOk', () => {
+    expect(addMax10(1, 1).isOk()).toBeTruthy();
+    expect(addMax10(10, 10).isOk()).toBeFalsy();
+  });
+
+  test('.isErr', () => {
+    expect(addMax10(1, 1).isErr()).toBeFalsy();
+    expect(addMax10(10, 10).isErr()).toBeTruthy();
+  });
+
+  test('.expect', () => {
+    expect(addMax10(1, 1).expect('a number under 10')).toEqual(2);
+    expect(() => {
+      addMax10(10, 10).expect('a number under 10');
+    }).toThrowErrorMatchingInlineSnapshot(
+      `"a number under 10: 20 is too high"`,
+    );
+  });
+
+  test('.expectErr', () => {
+    expect(() => {
+      addMax10(1, 1).expectErr('a number under 10');
+    }).toThrowErrorMatchingInlineSnapshot(`"a number under 10: 2"`);
+    expect(addMax10(10, 10).expectErr('a number under 10')).toEqual(
+      '20 is too high',
+    );
+  });
+
+  test('.unwrap', () => {
+    expect(addMax10(1, 1).unwrap()).toEqual(2);
+    expect(() => {
+      addMax10(10, 10).unwrap();
+    }).toThrowErrorMatchingInlineSnapshot(
+      `"Can't unwrap \`Err\` to \`Ok\`: 20 is too high"`,
+    );
+    expect(() => {
+      Err(new CustomDummyError('oops')).unwrap();
+    }).toThrowErrorMatchingInlineSnapshot(`"oops"`);
+  });
+
+  test('.unwrapOr', () => {
+    expect(addMax10(1, 1).unwrapOr(4)).toEqual(2);
+    expect(addMax10(10, 10).unwrapOr(4)).toEqual(4);
+  });
+
+  test('.unwrapOrElse', () => {
+    expect(addMax10(1, 1).unwrapOrElse(() => 4)).toEqual(2);
+    expect(addMax10(10, 10).unwrapOrElse(s => s.length)).toEqual(14);
+  });
+
+  test('.unwrapErr', () => {
+    expect(() => {
+      addMax10(1, 1).unwrapErr();
+    }).toThrowErrorMatchingInlineSnapshot(
+      `"Can't unwrap \`Ok\` to \`Err\`: 2"`,
+    );
+    expect(addMax10(10, 10).unwrapErr()).toEqual('20 is too high');
+    expect(() => {
+      Ok(new CustomDummyError('oops')).unwrapErr();
+    }).toThrowErrorMatchingInlineSnapshot(`"oops"`);
+  });
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/constant-prop.e2e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/constant-prop.e2e.js
new file mode 100644
index 00000000000..229e36206da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/constant-prop.e2e.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {render} from '@testing-library/react';
+
+globalThis.constantValue = 'global test value';
+
+test('literal-constant-propagation', () => {
+  function Component() {
+    'use memo';
+    const x = 'test value 1';
+    return <div>{x}</div>;
+  }
+  const {asFragment, rerender} = render(<Component />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        test value 1
+      </div>
+    </DocumentFragment>
+  `);
+
+  rerender(<Component />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        test value 1
+      </div>
+    </DocumentFragment>
+  `);
+});
+
+test('global-constant-propagation', () => {
+  function Component() {
+    'use memo';
+    const x = constantValue;
+
+    return <div>{x}</div>;
+  }
+  const {asFragment, rerender} = render(<Component />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        global test value
+      </div>
+    </DocumentFragment>
+  `);
+
+  rerender(<Component />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        global test value
+      </div>
+    </DocumentFragment>
+  `);
+});
+
+test('lambda-constant-propagation', () => {
+  function Component() {
+    'use memo';
+    const x = 'test value 1';
+    const getDiv = () => <div>{x}</div>;
+    return getDiv();
+  }
+  const {asFragment, rerender} = render(<Component />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          test value 1
+        </div>
+      </DocumentFragment>
+    `);
+
+  rerender(<Component />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          test value 1
+        </div>
+      </DocumentFragment>
+    `);
+});
+
+test('lambda-constant-propagation-of-phi-node', () => {
+  function Component({noopCallback}) {
+    'use memo';
+    const x = 'test value 1';
+    if (constantValue) {
+      noopCallback();
+    }
+    for (let i = 0; i < 5; i++) {
+      if (!constantValue) {
+        noopCallback();
+      }
+    }
+    const getDiv = () => <div>{x}</div>;
+    return getDiv();
+  }
+
+  const {asFragment, rerender} = render(<Component noopCallback={() => {}} />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          test value 1
+        </div>
+      </DocumentFragment>
+    `);
+
+  rerender(<Component noopCallback={() => {}} />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        test value 1
+      </div>
+    </DocumentFragment>
+  `);
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/expectLogs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/expectLogs.js
new file mode 100644
index 00000000000..7e00bd50145
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/expectLogs.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const logs = [];
+
+export function log(message) {
+  logs.push(message);
+}
+
+export function expectLogsAndClear(expected) {
+  expect(logs).toEqual(expected);
+  logs.length = 0;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/hello.e2e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/hello.e2e.js
new file mode 100644
index 00000000000..2c6f77e638e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/hello.e2e.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {expectLogsAndClear, log} from './expectLogs';
+
+function Hello({name}) {
+  const items = [1, 2, 3].map(item => {
+    log(`recomputing ${item}`);
+    return <div key={item}>Item {item}</div>;
+  });
+  return (
+    <div>
+      Hello<b>{name}</b>
+      {items}
+    </div>
+  );
+}
+
+test('hello', () => {
+  const {asFragment, rerender} = render(<Hello name="World" />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        Hello
+        <b>
+          World
+        </b>
+        <div>
+          Item 1
+        </div>
+        <div>
+          Item 2
+        </div>
+        <div>
+          Item 3
+        </div>
+      </div>
+    </DocumentFragment>
+  `);
+
+  expectLogsAndClear(['recomputing 1', 'recomputing 2', 'recomputing 3']);
+
+  rerender(<Hello name="Universe" />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div>
+        Hello
+        <b>
+          Universe
+        </b>
+        <div>
+          Item 1
+        </div>
+        <div>
+          Item 2
+        </div>
+        <div>
+          Item 3
+        </div>
+      </div>
+    </DocumentFragment>
+  `);
+
+  expectLogsAndClear(
+    __FORGET__ ? [] : ['recomputing 1', 'recomputing 2', 'recomputing 3']
+  );
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/update-button.e2e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/update-button.e2e.js
new file mode 100644
index 00000000000..ac25adeba9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/update-button.e2e.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {render} from '@testing-library/react';
+import * as React from 'react';
+
+function Button({label}) {
+  const theme = useTheme();
+  const style = computeStyle(theme);
+  return <button color={style}>{label}</button>;
+}
+
+let currentTheme = 'light';
+function useTheme() {
+  'use memo';
+  return currentTheme;
+}
+
+let styleComputations = 0;
+function computeStyle(theme) {
+  styleComputations++;
+  return theme === 'light' ? 'white' : 'black';
+}
+
+test('update-button', () => {
+  const {asFragment, rerender} = render(<Button label="Click me" />);
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <button
+        color="white"
+      >
+        Click me
+      </button>
+    </DocumentFragment>
+  `);
+
+  // Update the label, but not the theme
+  rerender(<Button label="Click again" />);
+  // `computeStyle` should not be called again when Forget is enabled
+  expect(styleComputations).toBe(__FORGET__ ? 1 : 2);
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <button
+        color="white"
+      >
+        Click again
+      </button>
+    </DocumentFragment>
+  `);
+
+  currentTheme = 'dark';
+  rerender(<Button label="Click again" />);
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <button
+        color="black"
+      >
+        Click again
+      </button>
+    </DocumentFragment>
+  `);
+
+  expect(styleComputations).toBe(__FORGET__ ? 2 : 3);
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/update-expressions.e2e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/update-expressions.e2e.js
new file mode 100644
index 00000000000..0344c5799fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/update-expressions.e2e.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {render, screen, fireEvent} from '@testing-library/react';
+import * as React from 'react';
+import {expectLogsAndClear, log} from './expectLogs';
+
+function Counter(props) {
+  'use memo';
+  let value = props.value;
+  let a = value++;
+  expect(a).toBe(props.value); // postfix
+  let b = ++value;
+  expect(b).toBe(props.value + 2); // previous postfix operation + prefix operation
+  let c = ++value;
+  expect(c).toBe(props.value + 3);
+  let d = value--;
+  expect(d).toBe(props.value + 3);
+  let e = --value;
+  expect(e).toBe(props.value + 1);
+  let f = --value;
+  expect(f).toBe(props.value);
+  expect(value).toBe(props.value);
+  return <span>{value}</span>;
+}
+
+test('use-state', async () => {
+  const {asFragment, rerender} = render(<Counter value={0} />);
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <span>
+        0
+      </span>
+    </DocumentFragment>
+  `);
+
+  rerender(<Counter value={1} />);
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <span>
+        1
+      </span>
+    </DocumentFragment>
+  `);
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/use-state.e2e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/use-state.e2e.js
new file mode 100644
index 00000000000..cc41cdf7e23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/e2e/use-state.e2e.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {render, screen, fireEvent} from '@testing-library/react';
+import * as React from 'react';
+import {useState} from 'react';
+import {expectLogsAndClear, log} from './expectLogs';
+
+function Counter() {
+  let [state, setState] = useState(0);
+  return (
+    <div>
+      <Title text="Counter" />
+      <span>{state}</span>
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    </div>
+  );
+}
+
+function Title({text}) {
+  log(`rendering: ${text}`);
+  return <h1>{text}</h1>;
+}
+
+test('use-state', async () => {
+  const {asFragment} = render(<Counter />);
+
+  expect(asFragment()).toMatchInlineSnapshot(`
+  <DocumentFragment>
+    <div>
+      <h1>
+        Counter
+      </h1>
+      <span>
+        0
+      </span>
+      <button
+        data-testid="button"
+      >
+        increment
+      </button>
+    </div>
+  </DocumentFragment>
+  `);
+
+  expectLogsAndClear(['rendering: Counter']);
+
+  fireEvent.click(screen.getByTestId('button'));
+  await screen.findByText('1');
+
+  expectLogsAndClear(__FORGET__ ? [] : ['rendering: Counter']);
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts
new file mode 100644
index 00000000000..933990b6bdd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Effect, validateEnvironmentConfig} from '..';
+import {ValueKind} from '../HIR';
+
+describe('parseConfigPragma()', () => {
+  it('passing null throws', () => {
+    expect(() => validateEnvironmentConfig(null as any)).toThrow();
+  });
+
+  // tests that the error message remains useful
+  it('passing incorrect value throws', () => {
+    expect(() => {
+      validateEnvironmentConfig({
+        validateHooksUsage: 1,
+      } as any);
+    }).toThrowErrorMatchingInlineSnapshot(
+      `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: Invalid input: expected boolean, received number at "validateHooksUsage"."`,
+    );
+  });
+
+  it('effect autodeps config must have at least 1 required argument', () => {
+    expect(() => {
+      validateEnvironmentConfig({
+        inferEffectDependencies: [
+          {
+            function: {
+              source: 'react',
+              importSpecifierName: 'useEffect',
+            },
+            autodepsIndex: 0,
+          },
+        ],
+      } as any);
+    }).toThrowErrorMatchingInlineSnapshot(
+      `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: AutodepsIndex must be > 0 at "inferEffectDependencies[0].autodepsIndex"."`,
+    );
+  });
+
+  it('can parse stringy enums', () => {
+    const stringyHook = {
+      effectKind: 'freeze',
+      valueKind: 'frozen',
+    };
+    const env = {
+      customHooks: new Map([['useFoo', stringyHook]]),
+    };
+    const validatedEnv = validateEnvironmentConfig(env as any);
+    const validatedHook = validatedEnv.customHooks.get('useFoo');
+    expect(validatedHook?.effectKind).toBe(Effect.Freeze);
+    expect(validatedHook?.valueKind).toBe(ValueKind.Frozen);
+  });
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md
new file mode 100644
index 00000000000..eb2d451c564
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, mutate} from 'shared-runtime';
+
+function Component() {
+  // a's mutable range should be the same as x's mutable range,
+  // since a is captured into x (which gets mutated later)
+  let a = makeObject_Primitives();
+
+  let x = [];
+  x.push(a);
+
+  mutate(x);
+  return [x, a];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, mutate } from "shared-runtime";
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = makeObject_Primitives();
+    const x = [];
+    x.push(a);
+    mutate(x);
+    t0 = [x, a];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[{"a":0,"b":"value1","c":true},"joe"],"[[ cyclic ref *2 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.js
new file mode 100644
index 00000000000..5ba8bd4cacf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.js
@@ -0,0 +1,19 @@
+import {makeObject_Primitives, mutate} from 'shared-runtime';
+
+function Component() {
+  // a's mutable range should be the same as x's mutable range,
+  // since a is captured into x (which gets mutated later)
+  let a = makeObject_Primitives();
+
+  let x = [];
+  x.push(a);
+
+  mutate(x);
+  return [x, a];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md
new file mode 100644
index 00000000000..b7b89dc1a1d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component() {
+  // a's mutable range should be limited
+  // the following line
+  let a = someObj();
+
+  let x = [];
+  x.push(a);
+
+  return [x, a];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = someObj();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const a = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    x.push(a);
+    t1 = [x, a];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.js
new file mode 100644
index 00000000000..9b2dbbdd1bc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.js
@@ -0,0 +1,10 @@
+function Component() {
+  // a's mutable range should be limited
+  // the following line
+  let a = someObj();
+
+  let x = [];
+  x.push(a);
+
+  return [x, a];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md
new file mode 100644
index 00000000000..3d7de52f4f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let x = {a};
+  let y = {};
+
+  y.x = x['a'];
+  mutate(y);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== a) {
+    x = { a };
+    const y = {};
+
+    y.x = x.a;
+    mutate(y);
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.js
new file mode 100644
index 00000000000..f4faec2785b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.js
@@ -0,0 +1,8 @@
+function component(a) {
+  let x = {a};
+  let y = {};
+
+  y.x = x['a'];
+  mutate(y);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md
new file mode 100644
index 00000000000..f320d630713
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function component() {
+  let z = [];
+  let y = {};
+  y.z = z;
+  let x = {};
+  x.y = y;
+  mutate(x.y.z);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const z = [];
+    const y = {};
+    y.z = z;
+    x = {};
+    x.y = y;
+    mutate(x.y.z);
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.js
new file mode 100644
index 00000000000..fb356300382
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.js
@@ -0,0 +1,9 @@
+function component() {
+  let z = [];
+  let y = {};
+  y.z = z;
+  let x = {};
+  x.y = y;
+  mutate(x.y.z);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md
new file mode 100644
index 00000000000..100567a3385
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function component() {
+  let z = [];
+  let y = {};
+  y.z = z;
+  let x = {};
+  x.y = y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const z = [];
+    const y = {};
+    y.z = z;
+    x = {};
+    x.y = y;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":{"z":[]}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.js
new file mode 100644
index 00000000000..1f39df112a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.js
@@ -0,0 +1,14 @@
+function component() {
+  let z = [];
+  let y = {};
+  y.z = z;
+  let x = {};
+  x.y = y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.expect.md
new file mode 100644
index 00000000000..d74428a1586
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function foo(cond) {
+  let a = {};
+  let b = {};
+  let c = {};
+  while (cond) {
+    let z = a;
+    a = b;
+    b = c;
+    c = z;
+    mutate(a, b);
+  }
+  a;
+  b;
+  c;
+  return a;
+}
+
+function mutate(x, y) {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(cond) {
+  const $ = _c(2);
+  let a;
+  if ($[0] !== cond) {
+    a = {};
+    let b = {};
+    let c = {};
+    while (cond) {
+      const z = a;
+      a = b;
+      b = c;
+      c = z;
+      mutate(a, b);
+    }
+    $[0] = cond;
+    $[1] = a;
+  } else {
+    a = $[1];
+  }
+  return a;
+}
+
+function mutate(x, y) {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.js
new file mode 100644
index 00000000000..34aa4c93aaa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.js
@@ -0,0 +1,18 @@
+function foo(cond) {
+  let a = {};
+  let b = {};
+  let c = {};
+  while (cond) {
+    let z = a;
+    a = b;
+    b = c;
+    c = z;
+    mutate(a, b);
+  }
+  a;
+  b;
+  c;
+  return a;
+}
+
+function mutate(x, y) {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.expect.md
new file mode 100644
index 00000000000..e91766e79c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.expect.md
@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+// @enableTransitivelyFreezeFunctionExpressions:false
+import {
+  Stringify,
+  mutate,
+  identity,
+  setPropertyByKey,
+  shallowCopy,
+} from 'shared-runtime';
+/**
+ * Function expression version of `aliased-nested-scope-truncated-dep`.
+ *
+ * In this fixture, the output would be invalid if propagateScopeDeps did not
+ * avoid adding MemberExpression dependencies which would other evaluate during
+ * the mutable ranges of their base objects.
+ * This is different from `aliased-nested-scope-truncated-dep` which *does*
+ * produce correct output regardless of MemberExpression dependency truncation.
+ *
+ * Note while other expressions evaluate inline, function expressions *always*
+ * represent deferred evaluation. This means that
+ * (1) it's always safe to reorder function expression creation until its
+ *     earliest potential invocation
+ * (2) it's invalid to eagerly evaluate function expression dependencies during
+ *     their respective mutable ranges.
+ */
+
+function Component({prop}) {
+  let obj = shallowCopy(prop);
+
+  const aliasedObj = identity(obj);
+
+  // When `obj` is mutable (either directly or through aliases), taking a
+  // dependency on `obj.id` is invalid as it may change before getId() is invoked
+  const getId = () => obj.id;
+
+  mutate(aliasedObj);
+  setPropertyByKey(aliasedObj, 'id', prop.id + 1);
+
+  // Calling getId() should return prop.id + 1, not the prev
+  return <Stringify getId={getId} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: {id: 1}}],
+  sequentialRenders: [{prop: {id: 1}}, {prop: {id: 1}}, {prop: {id: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTransitivelyFreezeFunctionExpressions:false
+import {
+  Stringify,
+  mutate,
+  identity,
+  setPropertyByKey,
+  shallowCopy,
+} from "shared-runtime";
+/**
+ * Function expression version of `aliased-nested-scope-truncated-dep`.
+ *
+ * In this fixture, the output would be invalid if propagateScopeDeps did not
+ * avoid adding MemberExpression dependencies which would other evaluate during
+ * the mutable ranges of their base objects.
+ * This is different from `aliased-nested-scope-truncated-dep` which *does*
+ * produce correct output regardless of MemberExpression dependency truncation.
+ *
+ * Note while other expressions evaluate inline, function expressions *always*
+ * represent deferred evaluation. This means that
+ * (1) it's always safe to reorder function expression creation until its
+ *     earliest potential invocation
+ * (2) it's invalid to eagerly evaluate function expression dependencies during
+ *     their respective mutable ranges.
+ */
+
+function Component(t0) {
+  const $ = _c(2);
+  const { prop } = t0;
+  let t1;
+  if ($[0] !== prop) {
+    const obj = shallowCopy(prop);
+    const aliasedObj = identity(obj);
+    const getId = () => obj.id;
+    mutate(aliasedObj);
+    setPropertyByKey(aliasedObj, "id", prop.id + 1);
+    t1 = <Stringify getId={getId} shouldInvokeFns={true} />;
+    $[0] = prop;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prop: { id: 1 } }],
+  sequentialRenders: [
+    { prop: { id: 1 } },
+    { prop: { id: 1 } },
+    { prop: { id: 2 } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getId":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+<div>{"getId":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+<div>{"getId":{"kind":"Function","result":3},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.tsx
new file mode 100644
index 00000000000..40022c6f651
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.tsx
@@ -0,0 +1,46 @@
+// @enableTransitivelyFreezeFunctionExpressions:false
+import {
+  Stringify,
+  mutate,
+  identity,
+  setPropertyByKey,
+  shallowCopy,
+} from 'shared-runtime';
+/**
+ * Function expression version of `aliased-nested-scope-truncated-dep`.
+ *
+ * In this fixture, the output would be invalid if propagateScopeDeps did not
+ * avoid adding MemberExpression dependencies which would other evaluate during
+ * the mutable ranges of their base objects.
+ * This is different from `aliased-nested-scope-truncated-dep` which *does*
+ * produce correct output regardless of MemberExpression dependency truncation.
+ *
+ * Note while other expressions evaluate inline, function expressions *always*
+ * represent deferred evaluation. This means that
+ * (1) it's always safe to reorder function expression creation until its
+ *     earliest potential invocation
+ * (2) it's invalid to eagerly evaluate function expression dependencies during
+ *     their respective mutable ranges.
+ */
+
+function Component({prop}) {
+  let obj = shallowCopy(prop);
+
+  const aliasedObj = identity(obj);
+
+  // When `obj` is mutable (either directly or through aliases), taking a
+  // dependency on `obj.id` is invalid as it may change before getId() is invoked
+  const getId = () => obj.id;
+
+  mutate(aliasedObj);
+  setPropertyByKey(aliasedObj, 'id', prop.id + 1);
+
+  // Calling getId() should return prop.id + 1, not the prev
+  return <Stringify getId={getId} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: {id: 1}}],
+  sequentialRenders: [{prop: {id: 1}}, {prop: {id: 1}}, {prop: {id: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.expect.md
new file mode 100644
index 00000000000..a44c3a1a5de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.expect.md
@@ -0,0 +1,211 @@
+
+## Input
+
+```javascript
+import {
+  Stringify,
+  mutate,
+  identity,
+  shallowCopy,
+  setPropertyByKey,
+} from 'shared-runtime';
+
+/**
+ * This fixture is similar to `bug-aliased-capture-aliased-mutate` and
+ * `nonmutating-capture-in-unsplittable-memo-block`, but with a focus on
+ * dependency extraction.
+ *
+ * NOTE: this fixture is currently valid, but will break with optimizations:
+ * - Scope and mutable-range based reordering may move the array creation
+ *     *after* the `mutate(aliasedObj)` call. This is invalid if mutate
+ *     reassigns inner properties.
+ * - RecycleInto or other deeper-equality optimizations may produce invalid
+ *     output -- it may compare the array's contents / dependencies too early.
+ * - Runtime validation for immutable values will break if `mutate` does
+ *     interior mutation of the value captured into the array.
+ *
+ * Before scope block creation, HIR looks like this:
+ *  //
+ *  // $1 is unscoped as obj's mutable range will be
+ *  // extended in a later pass
+ *  //
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  //
+ *  // $3 gets assigned a scope as Array is an allocating
+ *  // instruction, but this does *not* get extended or
+ *  // merged into the later mutation site.
+ *  // (explained in `bug-aliased-capture-aliased-mutate`)
+ *  //
+ *  $3@1  = Array[$2]
+ *  ...
+ *  $10@0 = LoadLocal shallowCopy@0[0, 12]
+ *  $11   = LoadGlobal mutate
+ *  $12   = $11($10@0[0, 12])
+ *
+ * When filling in scope dependencies, we find that it's incorrect to depend on
+ * PropertyLoads from obj as it hasn't completed its mutable range. Following
+ * the immutable / mutable-new typing system, we check the identity of obj to
+ * detect whether it was newly created (and thus mutable) in this render pass.
+ *
+ * HIR with scopes looks like this.
+ * bb0:
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  scopeTerminal deps=[obj@0] block=bb1 fallt=bb2
+ * bb1:
+ *  $3@1  = Array[$2]
+ *  goto bb2
+ * bb2:
+ *  ...
+ *
+ * This is surprising as deps now is entirely decoupled from temporaries used
+ * by the block itself. scope @1's instructions now reference a value (1)
+ * produced outside its scope range and (2) not represented in its dependencies
+ *
+ * The right thing to do is to ensure that all Loads from a value get assigned
+ * the value's reactive scope. This also requires track mutating and aliasing
+ * separately from scope range. In this example, that would correctly merge
+ * the scopes of $3 with obj.
+ * Runtime validation and optimizations such as ReactiveGraph-based reordering
+ * require this as well.
+ *
+ * A tempting fix is to instead extend $3's ReactiveScope range up to include
+ * $2 (the PropertyLoad). This fixes dependency deduping but not reordering
+ * and mutability.
+ */
+function Component({prop}) {
+  let obj = shallowCopy(prop);
+  const aliasedObj = identity(obj);
+
+  // [obj.id] currently is assigned its own reactive scope
+  const id = [obj.id];
+
+  // Writing to the alias may reassign to previously captured references.
+  // The compiler currently produces valid output, but this breaks with
+  // reordering, recycleInto, and other potential optimizations.
+  mutate(aliasedObj);
+  setPropertyByKey(aliasedObj, 'id', prop.id + 1);
+
+  return <Stringify id={id} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: {id: 1}}],
+  sequentialRenders: [{prop: {id: 1}}, {prop: {id: 1}}, {prop: {id: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  Stringify,
+  mutate,
+  identity,
+  shallowCopy,
+  setPropertyByKey,
+} from "shared-runtime";
+
+/**
+ * This fixture is similar to `bug-aliased-capture-aliased-mutate` and
+ * `nonmutating-capture-in-unsplittable-memo-block`, but with a focus on
+ * dependency extraction.
+ *
+ * NOTE: this fixture is currently valid, but will break with optimizations:
+ * - Scope and mutable-range based reordering may move the array creation
+ *     *after* the `mutate(aliasedObj)` call. This is invalid if mutate
+ *     reassigns inner properties.
+ * - RecycleInto or other deeper-equality optimizations may produce invalid
+ *     output -- it may compare the array's contents / dependencies too early.
+ * - Runtime validation for immutable values will break if `mutate` does
+ *     interior mutation of the value captured into the array.
+ *
+ * Before scope block creation, HIR looks like this:
+ *  //
+ *  // $1 is unscoped as obj's mutable range will be
+ *  // extended in a later pass
+ *  //
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  //
+ *  // $3 gets assigned a scope as Array is an allocating
+ *  // instruction, but this does *not* get extended or
+ *  // merged into the later mutation site.
+ *  // (explained in `bug-aliased-capture-aliased-mutate`)
+ *  //
+ *  $3@1  = Array[$2]
+ *  ...
+ *  $10@0 = LoadLocal shallowCopy@0[0, 12]
+ *  $11   = LoadGlobal mutate
+ *  $12   = $11($10@0[0, 12])
+ *
+ * When filling in scope dependencies, we find that it's incorrect to depend on
+ * PropertyLoads from obj as it hasn't completed its mutable range. Following
+ * the immutable / mutable-new typing system, we check the identity of obj to
+ * detect whether it was newly created (and thus mutable) in this render pass.
+ *
+ * HIR with scopes looks like this.
+ * bb0:
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  scopeTerminal deps=[obj@0] block=bb1 fallt=bb2
+ * bb1:
+ *  $3@1  = Array[$2]
+ *  goto bb2
+ * bb2:
+ *  ...
+ *
+ * This is surprising as deps now is entirely decoupled from temporaries used
+ * by the block itself. scope @1's instructions now reference a value (1)
+ * produced outside its scope range and (2) not represented in its dependencies
+ *
+ * The right thing to do is to ensure that all Loads from a value get assigned
+ * the value's reactive scope. This also requires track mutating and aliasing
+ * separately from scope range. In this example, that would correctly merge
+ * the scopes of $3 with obj.
+ * Runtime validation and optimizations such as ReactiveGraph-based reordering
+ * require this as well.
+ *
+ * A tempting fix is to instead extend $3's ReactiveScope range up to include
+ * $2 (the PropertyLoad). This fixes dependency deduping but not reordering
+ * and mutability.
+ */
+function Component(t0) {
+  const $ = _c(2);
+  const { prop } = t0;
+  let t1;
+  if ($[0] !== prop) {
+    const obj = shallowCopy(prop);
+    const aliasedObj = identity(obj);
+    const id = [obj.id];
+    mutate(aliasedObj);
+    setPropertyByKey(aliasedObj, "id", prop.id + 1);
+    t1 = <Stringify id={id} />;
+    $[0] = prop;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prop: { id: 1 } }],
+  sequentialRenders: [
+    { prop: { id: 1 } },
+    { prop: { id: 1 } },
+    { prop: { id: 2 } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"id":[1]}</div>
+<div>{"id":[1]}</div>
+<div>{"id":[2]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.tsx
new file mode 100644
index 00000000000..4d9d7e78fb3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.tsx
@@ -0,0 +1,93 @@
+import {
+  Stringify,
+  mutate,
+  identity,
+  shallowCopy,
+  setPropertyByKey,
+} from 'shared-runtime';
+
+/**
+ * This fixture is similar to `bug-aliased-capture-aliased-mutate` and
+ * `nonmutating-capture-in-unsplittable-memo-block`, but with a focus on
+ * dependency extraction.
+ *
+ * NOTE: this fixture is currently valid, but will break with optimizations:
+ * - Scope and mutable-range based reordering may move the array creation
+ *     *after* the `mutate(aliasedObj)` call. This is invalid if mutate
+ *     reassigns inner properties.
+ * - RecycleInto or other deeper-equality optimizations may produce invalid
+ *     output -- it may compare the array's contents / dependencies too early.
+ * - Runtime validation for immutable values will break if `mutate` does
+ *     interior mutation of the value captured into the array.
+ *
+ * Before scope block creation, HIR looks like this:
+ *  //
+ *  // $1 is unscoped as obj's mutable range will be
+ *  // extended in a later pass
+ *  //
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  //
+ *  // $3 gets assigned a scope as Array is an allocating
+ *  // instruction, but this does *not* get extended or
+ *  // merged into the later mutation site.
+ *  // (explained in `bug-aliased-capture-aliased-mutate`)
+ *  //
+ *  $3@1  = Array[$2]
+ *  ...
+ *  $10@0 = LoadLocal shallowCopy@0[0, 12]
+ *  $11   = LoadGlobal mutate
+ *  $12   = $11($10@0[0, 12])
+ *
+ * When filling in scope dependencies, we find that it's incorrect to depend on
+ * PropertyLoads from obj as it hasn't completed its mutable range. Following
+ * the immutable / mutable-new typing system, we check the identity of obj to
+ * detect whether it was newly created (and thus mutable) in this render pass.
+ *
+ * HIR with scopes looks like this.
+ * bb0:
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  scopeTerminal deps=[obj@0] block=bb1 fallt=bb2
+ * bb1:
+ *  $3@1  = Array[$2]
+ *  goto bb2
+ * bb2:
+ *  ...
+ *
+ * This is surprising as deps now is entirely decoupled from temporaries used
+ * by the block itself. scope @1's instructions now reference a value (1)
+ * produced outside its scope range and (2) not represented in its dependencies
+ *
+ * The right thing to do is to ensure that all Loads from a value get assigned
+ * the value's reactive scope. This also requires track mutating and aliasing
+ * separately from scope range. In this example, that would correctly merge
+ * the scopes of $3 with obj.
+ * Runtime validation and optimizations such as ReactiveGraph-based reordering
+ * require this as well.
+ *
+ * A tempting fix is to instead extend $3's ReactiveScope range up to include
+ * $2 (the PropertyLoad). This fixes dependency deduping but not reordering
+ * and mutability.
+ */
+function Component({prop}) {
+  let obj = shallowCopy(prop);
+  const aliasedObj = identity(obj);
+
+  // [obj.id] currently is assigned its own reactive scope
+  const id = [obj.id];
+
+  // Writing to the alias may reassign to previously captured references.
+  // The compiler currently produces valid output, but this breaks with
+  // reordering, recycleInto, and other potential optimizations.
+  mutate(aliasedObj);
+  setPropertyByKey(aliasedObj, 'id', prop.id + 1);
+
+  return <Stringify id={id} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: {id: 1}}],
+  sequentialRenders: [{prop: {id: 1}}, {prop: {id: 1}}, {prop: {id: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.expect.md
new file mode 100644
index 00000000000..33d89a92d77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+/**
+ * Similar fixture to `align-scopes-nested-block-structure`, but
+ * a simpler case.
+ */
+function useFoo(cond) {
+  let s = null;
+  if (cond) {
+    s = {};
+  } else {
+    return null;
+  }
+  mutate(s);
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+/**
+ * Similar fixture to `align-scopes-nested-block-structure`, but
+ * a simpler case.
+ */
+function useFoo(cond) {
+  const $ = _c(3);
+  let s;
+  let t0;
+  if ($[0] !== cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      if (cond) {
+        s = {};
+      } else {
+        t0 = null;
+        break bb0;
+      }
+
+      mutate(s);
+    }
+    $[0] = cond;
+    $[1] = t0;
+    $[2] = s;
+  } else {
+    t0 = $[1];
+    s = $[2];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.ts
new file mode 100644
index 00000000000..4c0e0aec3a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.ts
@@ -0,0 +1,21 @@
+import {mutate} from 'shared-runtime';
+
+/**
+ * Similar fixture to `align-scopes-nested-block-structure`, but
+ * a simpler case.
+ */
+function useFoo(cond) {
+  let s = null;
+  if (cond) {
+    s = {};
+  } else {
+    return null;
+  }
+  mutate(s);
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.expect.md
new file mode 100644
index 00000000000..62ea047e254
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {getNull} from 'shared-runtime';
+
+function Component(props) {
+  const items = (() => {
+    return getNull() ?? [];
+  })();
+  items.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { getNull } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let items;
+  if ($[0] !== props.a) {
+    items = getNull() ?? [];
+
+    items.push(props.a);
+    $[0] = props.a;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: {} }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.ts
new file mode 100644
index 00000000000..0f1c820b5d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.ts
@@ -0,0 +1,14 @@
+import {getNull} from 'shared-runtime';
+
+function Component(props) {
+  const items = (() => {
+    return getNull() ?? [];
+  })();
+  items.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.expect.md
new file mode 100644
index 00000000000..3cad136ff11
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.expect.md
@@ -0,0 +1,170 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+/**
+ * Fixture showing that it's not sufficient to only align direct scoped
+ * accesses of a block-fallthrough pair.
+ * Below is a simplified view of HIR blocks in this fixture.
+ * Note that here, s is mutated in both bb1 and bb4. However, neither
+ * bb1 nor bb4 have terminal fallthroughs or are fallthroughs themselves.
+ *
+ * This means that we need to recursively visit all scopes accessed between
+ * a block and its fallthrough and extend the range of those scopes which overlap
+ * with an active block/fallthrough pair,
+ *
+ *  bb0
+ *  ┌──────────────┐
+ *  │let s = null  │
+ *  │test cond1    │
+ *  │ <fallthr=bb3>│
+ *  └┬─────────────┘
+ *   │  bb1
+ *   ├─►┌───────┐
+ *   │  │s = {} ├────┐
+ *   │  └───────┘    │
+ *   │  bb2          │
+ *   └─►┌───────┐    │
+ *      │return;│    │
+ *      └───────┘    │
+ *  bb3              │
+ *  ┌──────────────┐◄┘
+ *  │test cond2    │
+ *  │ <fallthr=bb5>│
+ *  └┬─────────────┘
+ *   │  bb4
+ *   ├─►┌─────────┐
+ *   │  │mutate(s)├─┐
+ *   ▼  └─────────┘ │
+ *  bb5             │
+ *  ┌───────────┐   │
+ *  │return s;  │◄──┘
+ *  └───────────┘
+ */
+function useFoo({cond1, cond2}) {
+  let s = null;
+  if (cond1) {
+    s = {};
+  } else {
+    return null;
+  }
+
+  if (cond2) {
+    mutate(s);
+  }
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond1: true, cond2: false}],
+  sequentialRenders: [
+    {cond1: true, cond2: false},
+    {cond1: true, cond2: false},
+    {cond1: true, cond2: true},
+    {cond1: true, cond2: true},
+    {cond1: false, cond2: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+/**
+ * Fixture showing that it's not sufficient to only align direct scoped
+ * accesses of a block-fallthrough pair.
+ * Below is a simplified view of HIR blocks in this fixture.
+ * Note that here, s is mutated in both bb1 and bb4. However, neither
+ * bb1 nor bb4 have terminal fallthroughs or are fallthroughs themselves.
+ *
+ * This means that we need to recursively visit all scopes accessed between
+ * a block and its fallthrough and extend the range of those scopes which overlap
+ * with an active block/fallthrough pair,
+ *
+ *  bb0
+ *  ┌──────────────┐
+ *  │let s = null  │
+ *  │test cond1    │
+ *  │ <fallthr=bb3>│
+ *  └┬─────────────┘
+ *   │  bb1
+ *   ├─►┌───────┐
+ *   │  │s = {} ├────┐
+ *   │  └───────┘    │
+ *   │  bb2          │
+ *   └─►┌───────┐    │
+ *      │return;│    │
+ *      └───────┘    │
+ *  bb3              │
+ *  ┌──────────────┐◄┘
+ *  │test cond2    │
+ *  │ <fallthr=bb5>│
+ *  └┬─────────────┘
+ *   │  bb4
+ *   ├─►┌─────────┐
+ *   │  │mutate(s)├─┐
+ *   ▼  └─────────┘ │
+ *  bb5             │
+ *  ┌───────────┐   │
+ *  │return s;  │◄──┘
+ *  └───────────┘
+ */
+function useFoo(t0) {
+  const $ = _c(4);
+  const { cond1, cond2 } = t0;
+  let s;
+  let t1;
+  if ($[0] !== cond1 || $[1] !== cond2) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      if (cond1) {
+        s = {};
+      } else {
+        t1 = null;
+        break bb0;
+      }
+
+      if (cond2) {
+        mutate(s);
+      }
+    }
+    $[0] = cond1;
+    $[1] = cond2;
+    $[2] = t1;
+    $[3] = s;
+  } else {
+    t1 = $[2];
+    s = $[3];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond1: true, cond2: false }],
+  sequentialRenders: [
+    { cond1: true, cond2: false },
+    { cond1: true, cond2: false },
+    { cond1: true, cond2: true },
+    { cond1: true, cond2: true },
+    { cond1: false, cond2: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
+{}
+{"wat0":"joe"}
+{"wat0":"joe"}
+null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.ts
new file mode 100644
index 00000000000..4205f0e2d60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.ts
@@ -0,0 +1,66 @@
+import {mutate} from 'shared-runtime';
+/**
+ * Fixture showing that it's not sufficient to only align direct scoped
+ * accesses of a block-fallthrough pair.
+ * Below is a simplified view of HIR blocks in this fixture.
+ * Note that here, s is mutated in both bb1 and bb4. However, neither
+ * bb1 nor bb4 have terminal fallthroughs or are fallthroughs themselves.
+ *
+ * This means that we need to recursively visit all scopes accessed between
+ * a block and its fallthrough and extend the range of those scopes which overlap
+ * with an active block/fallthrough pair,
+ *
+ *  bb0
+ *  ┌──────────────┐
+ *  │let s = null  │
+ *  │test cond1    │
+ *  │ <fallthr=bb3>│
+ *  └┬─────────────┘
+ *   │  bb1
+ *   ├─►┌───────┐
+ *   │  │s = {} ├────┐
+ *   │  └───────┘    │
+ *   │  bb2          │
+ *   └─►┌───────┐    │
+ *      │return;│    │
+ *      └───────┘    │
+ *  bb3              │
+ *  ┌──────────────┐◄┘
+ *  │test cond2    │
+ *  │ <fallthr=bb5>│
+ *  └┬─────────────┘
+ *   │  bb4
+ *   ├─►┌─────────┐
+ *   │  │mutate(s)├─┐
+ *   ▼  └─────────┘ │
+ *  bb5             │
+ *  ┌───────────┐   │
+ *  │return s;  │◄──┘
+ *  └───────────┘
+ */
+function useFoo({cond1, cond2}) {
+  let s = null;
+  if (cond1) {
+    s = {};
+  } else {
+    return null;
+  }
+
+  if (cond2) {
+    mutate(s);
+  }
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond1: true, cond2: false}],
+  sequentialRenders: [
+    {cond1: true, cond2: false},
+    {cond1: true, cond2: false},
+    {cond1: true, cond2: true},
+    {cond1: true, cond2: true},
+    {cond1: false, cond2: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md
new file mode 100644
index 00000000000..03939d16d66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+function useFoo({cond}) {
+  let items: any = {};
+  b0: {
+    if (cond) {
+      // Mutable range of `items` begins here, but its reactive scope block
+      // should be aligned to above the if-branch
+      items = [];
+    } else {
+      break b0;
+    }
+    items.push(2);
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true}],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(3);
+  const { cond } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {};
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let items = t1;
+  if ($[1] !== cond) {
+    bb0: {
+      if (cond) {
+        items = [];
+      } else {
+        break bb0;
+      }
+
+      items.push(2);
+    }
+    $[1] = cond;
+    $[2] = items;
+  } else {
+    items = $[2];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: true }],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[2]
+{}
+{}
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.ts
new file mode 100644
index 00000000000..1ff9b99a2ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.ts
@@ -0,0 +1,26 @@
+function useFoo({cond}) {
+  let items: any = {};
+  b0: {
+    if (cond) {
+      // Mutable range of `items` begins here, but its reactive scope block
+      // should be aligned to above the if-branch
+      items = [];
+    } else {
+      break b0;
+    }
+    items.push(2);
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true}],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.expect.md
new file mode 100644
index 00000000000..dc39126da45
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({cond, value}) {
+  let items;
+  label: {
+    items = [];
+    // Mutable range of `items` begins here, but its reactive scope block
+    // should be aligned to above the label-block
+    if (cond) break label;
+    arrayPush(items, value);
+  }
+  arrayPush(items, value);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true, value: 2}],
+  sequentialRenders: [
+    {cond: true, value: 2},
+    {cond: true, value: 2},
+    {cond: true, value: 3},
+    {cond: false, value: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(3);
+  const { cond, value } = t0;
+  let items;
+  if ($[0] !== cond || $[1] !== value) {
+    bb0: {
+      items = [];
+
+      if (cond) {
+        break bb0;
+      }
+      arrayPush(items, value);
+    }
+
+    arrayPush(items, value);
+    $[0] = cond;
+    $[1] = value;
+    $[2] = items;
+  } else {
+    items = $[2];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: true, value: 2 }],
+  sequentialRenders: [
+    { cond: true, value: 2 },
+    { cond: true, value: 2 },
+    { cond: true, value: 3 },
+    { cond: false, value: 3 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[2]
+[3]
+[3,3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.ts
new file mode 100644
index 00000000000..c1f93f124a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-label.ts
@@ -0,0 +1,25 @@
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({cond, value}) {
+  let items;
+  label: {
+    items = [];
+    // Mutable range of `items` begins here, but its reactive scope block
+    // should be aligned to above the label-block
+    if (cond) break label;
+    arrayPush(items, value);
+  }
+  arrayPush(items, value);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true, value: 2}],
+  sequentialRenders: [
+    {cond: true, value: 2},
+    {cond: true, value: 2},
+    {cond: true, value: 3},
+    {cond: false, value: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md
new file mode 100644
index 00000000000..1bc6b9b51eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {arrayPush, mutate} from 'shared-runtime';
+
+function useFoo({value}) {
+  let items = null;
+  try {
+    // Mutable range of `items` begins here, but its reactive scope block
+    // should be aligned to above the try-block
+    items = [];
+    arrayPush(items, value);
+  } catch {
+    // ignore
+  }
+  mutate(items);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 2}],
+  sequentialRenders: [{value: 2}, {value: 2}, {value: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush, mutate } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let items;
+  if ($[0] !== value) {
+    try {
+      items = [];
+      arrayPush(items, value);
+    } catch {}
+
+    mutate(items);
+    $[0] = value;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: 2 }],
+  sequentialRenders: [{ value: 2 }, { value: 2 }, { value: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2,"joe"]
+[2,"joe"]
+[3,"joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.ts
new file mode 100644
index 00000000000..ca992992c5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.ts
@@ -0,0 +1,21 @@
+import {arrayPush, mutate} from 'shared-runtime';
+
+function useFoo({value}) {
+  let items = null;
+  try {
+    // Mutable range of `items` begins here, but its reactive scope block
+    // should be aligned to above the try-block
+    items = [];
+    arrayPush(items, value);
+  } catch {
+    // ignore
+  }
+  mutate(items);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 2}],
+  sequentialRenders: [{value: 2}, {value: 2}, {value: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.expect.md
new file mode 100644
index 00000000000..2cb15a99ea5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {CONST_TRUE, makeObject_Primitives} from 'shared-runtime';
+
+function Foo() {
+  try {
+    let thing = null;
+    if (cond) {
+      thing = makeObject_Primitives();
+    }
+    if (CONST_TRUE) {
+      mutate(thing);
+    }
+    return thing;
+  } catch {}
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_TRUE, makeObject_Primitives } from "shared-runtime";
+
+function Foo() {
+  const $ = _c(1);
+  try {
+    let thing;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      thing = null;
+      if (cond) {
+        thing = makeObject_Primitives();
+      }
+
+      if (CONST_TRUE) {
+        mutate(thing);
+      }
+      $[0] = thing;
+    } else {
+      thing = $[0];
+    }
+    return thing;
+  } catch {}
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.ts
new file mode 100644
index 00000000000..9ccdc81579b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.ts
@@ -0,0 +1,19 @@
+import {CONST_TRUE, makeObject_Primitives} from 'shared-runtime';
+
+function Foo() {
+  try {
+    let thing = null;
+    if (cond) {
+      thing = makeObject_Primitives();
+    }
+    if (CONST_TRUE) {
+      mutate(thing);
+    }
+    return thing;
+  } catch {}
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md
new file mode 100644
index 00000000000..aff7a2e7b99
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {Stringify, identity, makeArray, mutate} from 'shared-runtime';
+
+/**
+ * Here, identity('foo') is an immutable allocating instruction.
+ * `arr` is a mutable value whose mutable range ends at `arr.map`.
+ *
+ * The previous (reactive function) version of alignScopesToBlocks set the range of
+ * both scopes to end at value blocks within the <></> expression.
+ * However, both scope ranges should be aligned to the outer value block
+ * (e.g. `cond1 ? <>: null`). The HIR version of alignScopesToBlocks
+ * handles this correctly.
+ */
+function Foo({cond1, cond2}) {
+  const arr = makeArray<any>({a: 2}, 2, []);
+
+  return cond1 ? (
+    <>
+      <div>{identity('foo')}</div>
+      <Stringify value={cond2 ? arr.map(mutate) : null} />
+    </>
+  ) : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond1: true, cond2: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, identity, makeArray, mutate } from "shared-runtime";
+
+/**
+ * Here, identity('foo') is an immutable allocating instruction.
+ * `arr` is a mutable value whose mutable range ends at `arr.map`.
+ *
+ * The previous (reactive function) version of alignScopesToBlocks set the range of
+ * both scopes to end at value blocks within the <></> expression.
+ * However, both scope ranges should be aligned to the outer value block
+ * (e.g. `cond1 ? <>: null`). The HIR version of alignScopesToBlocks
+ * handles this correctly.
+ */
+function Foo(t0) {
+  const $ = _c(3);
+  const { cond1, cond2 } = t0;
+  let t1;
+  if ($[0] !== cond1 || $[1] !== cond2) {
+    const arr = makeArray({ a: 2 }, 2, []);
+    t1 = cond1 ? (
+      <>
+        <div>{identity("foo")}</div>
+        <Stringify value={cond2 ? arr.map(mutate) : null} />
+      </>
+    ) : null;
+    $[0] = cond1;
+    $[1] = cond2;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ cond1: true, cond2: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>foo</div><div>{"value":[null,null,null]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.tsx
new file mode 100644
index 00000000000..b5e2fa0c19e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.tsx
@@ -0,0 +1,27 @@
+import {Stringify, identity, makeArray, mutate} from 'shared-runtime';
+
+/**
+ * Here, identity('foo') is an immutable allocating instruction.
+ * `arr` is a mutable value whose mutable range ends at `arr.map`.
+ *
+ * The previous (reactive function) version of alignScopesToBlocks set the range of
+ * both scopes to end at value blocks within the <></> expression.
+ * However, both scope ranges should be aligned to the outer value block
+ * (e.g. `cond1 ? <>: null`). The HIR version of alignScopesToBlocks
+ * handles this correctly.
+ */
+function Foo({cond1, cond2}) {
+  const arr = makeArray<any>({a: 2}, 2, []);
+
+  return cond1 ? (
+    <>
+      <div>{identity('foo')}</div>
+      <Stringify value={cond2 ? arr.map(mutate) : null} />
+    </>
+  ) : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond1: true, cond2: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.expect.md
new file mode 100644
index 00000000000..70a0b8293d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+/**
+ * This is a weird case as data has type `BuiltInMixedReadonly`.
+ * The only scoped value we currently infer in this program is the
+ * PropertyLoad `data?.toString`.
+ */
+import {useFragment} from 'shared-runtime';
+
+function Foo() {
+  const data = useFragment();
+  return [data?.toString() || ''];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * This is a weird case as data has type `BuiltInMixedReadonly`.
+ * The only scoped value we currently infer in this program is the
+ * PropertyLoad `data?.toString`.
+ */
+import { useFragment } from "shared-runtime";
+
+function Foo() {
+  const $ = _c(4);
+  const data = useFragment();
+  let t0;
+  if ($[0] !== data) {
+    t0 = data?.toString() || "";
+    $[0] = data;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = [t0];
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["[object Object]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.ts
new file mode 100644
index 00000000000..1e278fbf880
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.ts
@@ -0,0 +1,16 @@
+/**
+ * This is a weird case as data has type `BuiltInMixedReadonly`.
+ * The only scoped value we currently infer in this program is the
+ * PropertyLoad `data?.toString`.
+ */
+import {useFragment} from 'shared-runtime';
+
+function Foo() {
+  const data = useFragment();
+  return [data?.toString() || ''];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.expect.md
new file mode 100644
index 00000000000..6702b26e92d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.expect.md
@@ -0,0 +1,95 @@
+
+## Input
+
+```javascript
+// bar(props.b) is an allocating expression that produces a primitive, which means
+// that Forget should memoize it.
+// Correctness:
+
+import {identity, mutate, setProperty} from 'shared-runtime';
+
+//   - y depends on either bar(props.b) or bar(props.b) + 1
+function AllocatingPrimitiveAsDepNested(props) {
+  let x = {};
+  mutate(x);
+  let y = identity(identity(props.b) + 1);
+  setProperty(x, props.a);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: AllocatingPrimitiveAsDepNested,
+  params: [{a: 1, b: 2}],
+  sequentialRenders: [
+    // change b
+    {a: 1, b: 3},
+    // change b
+    {a: 1, b: 4},
+    // change a
+    {a: 2, b: 4},
+    // change a
+    {a: 3, b: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // bar(props.b) is an allocating expression that produces a primitive, which means
+// that Forget should memoize it.
+// Correctness:
+
+import { identity, mutate, setProperty } from "shared-runtime";
+
+//   - y depends on either bar(props.b) or bar(props.b) + 1
+function AllocatingPrimitiveAsDepNested(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    const x = {};
+    mutate(x);
+    const t1 = identity(props.b) + 1;
+    let t2;
+    if ($[3] !== t1) {
+      t2 = identity(t1);
+      $[3] = t1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    const y = t2;
+    setProperty(x, props.a);
+    t0 = [x, y];
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: AllocatingPrimitiveAsDepNested,
+  params: [{ a: 1, b: 2 }],
+  sequentialRenders: [
+    // change b
+    { a: 1, b: 3 },
+    // change b
+    { a: 1, b: 4 },
+    // change a
+    { a: 2, b: 4 },
+    // change a
+    { a: 3, b: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"wat0":"joe","wat1":1},4]
+[{"wat0":"joe","wat1":1},5]
+[{"wat0":"joe","wat1":2},5]
+[{"wat0":"joe","wat1":3},5]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.js
new file mode 100644
index 00000000000..908fb317d03
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.js
@@ -0,0 +1,29 @@
+// bar(props.b) is an allocating expression that produces a primitive, which means
+// that Forget should memoize it.
+// Correctness:
+
+import {identity, mutate, setProperty} from 'shared-runtime';
+
+//   - y depends on either bar(props.b) or bar(props.b) + 1
+function AllocatingPrimitiveAsDepNested(props) {
+  let x = {};
+  mutate(x);
+  let y = identity(identity(props.b) + 1);
+  setProperty(x, props.a);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: AllocatingPrimitiveAsDepNested,
+  params: [{a: 1, b: 2}],
+  sequentialRenders: [
+    // change b
+    {a: 1, b: 3},
+    // change b
+    {a: 1, b: 4},
+    // change a
+    {a: 2, b: 4},
+    // change a
+    {a: 3, b: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md
new file mode 100644
index 00000000000..293d9964cc4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+// bar(props.b) is an allocating expression that produces a primitive, which means
+// that Forget should memoize it.
+// Correctness:
+//   - y depends on either bar(props.b) or bar(props.b) + 1
+function AllocatingPrimitiveAsDep(props) {
+  let y = foo(bar(props).b + 1);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+// bar(props.b) is an allocating expression that produces a primitive, which means
+// that Forget should memoize it.
+// Correctness:
+//   - y depends on either bar(props.b) or bar(props.b) + 1
+function AllocatingPrimitiveAsDep(props) {
+  const $ = _c(2);
+  const t0 = bar(props).b + 1;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = foo(t0);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const y = t1;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js
new file mode 100644
index 00000000000..3c0768e7f51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js
@@ -0,0 +1,9 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+// bar(props.b) is an allocating expression that produces a primitive, which means
+// that Forget should memoize it.
+// Correctness:
+//   - y depends on either bar(props.b) or bar(props.b) + 1
+function AllocatingPrimitiveAsDep(props) {
+  let y = foo(bar(props).b + 1);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md
new file mode 100644
index 00000000000..b5fc0a9dc75
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const object = {};
+  object.foo = () => ref.current;
+  return <Stringify object={object} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  const ref = useRef(props.value);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const object = {};
+    object.foo = () => ref.current;
+    t0 = <Stringify object={object} shouldInvokeFns={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"object":{"foo":{"kind":"Function","result":42}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js
new file mode 100644
index 00000000000..2c84772dca0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js
@@ -0,0 +1,14 @@
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const object = {};
+  object.foo = () => ref.current;
+  return <Stringify object={object} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.expect.md
new file mode 100644
index 00000000000..90ffebd6958
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel:false
+function Component() {
+  const foo = () => {
+    someGlobal = true;
+  };
+  // spreading a function is weird, but it doesn't call the function so this is allowed
+  return <div {...foo} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel:false
+function Component() {
+  const $ = _c(1);
+  const foo = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div {...foo} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  someGlobal = true;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.js
new file mode 100644
index 00000000000..2ed0c70a7f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.js
@@ -0,0 +1,8 @@
+// @enableNewMutationAliasingModel:false
+function Component() {
+  const foo = () => {
+    someGlobal = true;
+  };
+  // spreading a function is weird, but it doesn't call the function so this is allowed
+  return <div {...foo} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md
new file mode 100644
index 00000000000..9b583998714
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useEffect, useState} from 'react';
+
+let someGlobal = {};
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = useCallback(() => {
+    someGlobal.value = true;
+  }, []);
+  useEffect(() => {
+    setGlobal();
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal.value);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useEffect, useState } from "react";
+
+let someGlobal = {};
+
+function Component() {
+  const $ = _c(6);
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = _temp;
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setGlobal();
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setState(someGlobal.value);
+    };
+    t3 = [someGlobal];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+
+  const t4 = String(state);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = <div>{t4}</div>;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
+}
+function _temp() {
+  someGlobal.value = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>true</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.js
new file mode 100644
index 00000000000..533adcadb2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.js
@@ -0,0 +1,26 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useEffect, useState} from 'react';
+
+let someGlobal = {};
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = useCallback(() => {
+    someGlobal.value = true;
+  }, []);
+  useEffect(() => {
+    setGlobal();
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal.value);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md
new file mode 100644
index 00000000000..4a9dfb220ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+let someGlobal = {};
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = () => {
+    someGlobal.value = true;
+  };
+  useEffect(() => {
+    setGlobal();
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal.value);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+let someGlobal = {};
+
+function Component() {
+  const $ = _c(6);
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = _temp;
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setGlobal();
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setState(someGlobal.value);
+    };
+    t3 = [someGlobal];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+
+  const t4 = String(state);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = <div>{t4}</div>;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
+}
+function _temp() {
+  someGlobal.value = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>true</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.js
new file mode 100644
index 00000000000..dba58e3a65f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.js
@@ -0,0 +1,25 @@
+import {useEffect, useState} from 'react';
+
+let someGlobal = {};
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = () => {
+    someGlobal.value = true;
+  };
+  useEffect(() => {
+    setGlobal();
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal.value);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.expect.md
new file mode 100644
index 00000000000..f5c393c1746
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {useCallback, useEffect, useState} from 'react';
+
+function Component() {
+  const callback = useCallback(() => {
+    window.foo = true;
+  }, []);
+
+  return <div>Ok</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useEffect, useState } from "react";
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Ok</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  window.foo = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Ok</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.js
new file mode 100644
index 00000000000..c7efe18b525
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.js
@@ -0,0 +1,14 @@
+import {useCallback, useEffect, useState} from 'react';
+
+function Component() {
+  const callback = useCallback(() => {
+    window.foo = true;
+  }, []);
+
+  return <div>Ok</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md
new file mode 100644
index 00000000000..4ac51dc56b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+let someGlobal = false;
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = () => {
+    someGlobal = true;
+  };
+  useEffect(() => {
+    setGlobal();
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+let someGlobal = false;
+
+function Component() {
+  const $ = _c(6);
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = _temp;
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setGlobal();
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setState(someGlobal);
+    };
+    t3 = [someGlobal];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+
+  const t4 = String(state);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = <div>{t4}</div>;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
+}
+function _temp() {
+  someGlobal = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>true</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.js
new file mode 100644
index 00000000000..ea79ddf776d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.js
@@ -0,0 +1,25 @@
+import {useEffect, useState} from 'react';
+
+let someGlobal = false;
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = () => {
+    someGlobal = true;
+  };
+  useEffect(() => {
+    setGlobal();
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md
new file mode 100644
index 00000000000..3733f19d91d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+let someGlobal = false;
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  useEffect(() => {
+    someGlobal = true;
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+let someGlobal = false;
+
+function Component() {
+  const $ = _c(5);
+  const [state, setState] = useState(someGlobal);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp, t0);
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      setState(someGlobal);
+    };
+    t2 = [someGlobal];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+
+  const t3 = String(state);
+  let t4;
+  if ($[3] !== t3) {
+    t4 = <div>{t3}</div>;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
+}
+function _temp() {
+  someGlobal = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>true</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.js
new file mode 100644
index 00000000000..73580fad67c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.js
@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react';
+
+let someGlobal = false;
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  useEffect(() => {
+    someGlobal = true;
+  }, []);
+
+  useEffect(() => {
+    setState(someGlobal);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.expect.md
new file mode 100644
index 00000000000..6933edef467
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const ref2 = useRef(null);
+  const mergedRef = mergeRefs([ref], ref2);
+
+  return <Stringify ref={mergedRef} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(1);
+  const ref = useRef(null);
+  const ref2 = useRef(null);
+  const mergedRef = mergeRefs([ref], ref2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify ref={mergedRef} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.js
new file mode 100644
index 00000000000..91c5f082849
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.js
@@ -0,0 +1,11 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const ref2 = useRef(null);
+  const mergedRef = mergeRefs([ref], ref2);
+
+  return <Stringify ref={mergedRef} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md
new file mode 100644
index 00000000000..8a3d0fac963
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+const someGlobal = {value: 0};
+
+function Component({value}) {
+  const onClick = () => {
+    someGlobal.value = value;
+  };
+  return useMemo(() => {
+    return <div onClick={onClick}>{someGlobal.value}</div>;
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 0}],
+  sequentialRenders: [
+    {value: 1},
+    {value: 1},
+    {value: 42},
+    {value: 42},
+    {value: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+const someGlobal = { value: 0 };
+
+function Component(t0) {
+  const $ = _c(4);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = () => {
+      someGlobal.value = value;
+    };
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onClick = t1;
+  let t2;
+  if ($[2] !== onClick) {
+    t2 = <div onClick={onClick}>{someGlobal.value}</div>;
+    $[2] = onClick;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 0 }],
+  sequentialRenders: [
+    { value: 1 },
+    { value: 1 },
+    { value: 42 },
+    { value: 42 },
+    { value: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0</div>
+<div>0</div>
+<div>0</div>
+<div>0</div>
+<div>0</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js
new file mode 100644
index 00000000000..9f0653d9d38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js
@@ -0,0 +1,25 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+const someGlobal = {value: 0};
+
+function Component({value}) {
+  const onClick = () => {
+    someGlobal.value = value;
+  };
+  return useMemo(() => {
+    return <div onClick={onClick}>{someGlobal.value}</div>;
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 0}],
+  sequentialRenders: [
+    {value: 1},
+    {value: 1},
+    {value: 42},
+    {value: 42},
+    {value: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md
new file mode 100644
index 00000000000..76e4432fe90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+let someGlobal = {value: null};
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  // NOTE: if we initialize to eg null or a local, then it won't be a definitively global
+  // mutation below when we modify `y`. The point of this is example is that if all control
+  // flow paths produce a global, we allow the mutation in an effect
+  let x = someGlobal;
+  while (x == null) {
+    x = someGlobal;
+  }
+
+  // capture into a separate variable that is not a context variable.
+  const y = x;
+  /**
+   * Note that this fixture currently produces a stale effect closure if `y = x
+   * = someGlobal` changes between renders. Under current compiler assumptions,
+   * that would be a rule of react violation.
+   */
+  useEffect(() => {
+    y.value = 'hello';
+  });
+
+  useEffect(() => {
+    setState(someGlobal.value);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+let someGlobal = { value: null };
+
+function Component() {
+  const $ = _c(5);
+  const [state, setState] = useState(someGlobal);
+
+  let x = someGlobal;
+  while (x == null) {
+    x = someGlobal;
+  }
+
+  const y = x;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      y.value = "hello";
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(t0);
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      setState(someGlobal.value);
+    };
+    t2 = [someGlobal];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+
+  const t3 = String(state);
+  let t4;
+  if ($[3] !== t3) {
+    t4 = <div>{t3}</div>;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.js
new file mode 100644
index 00000000000..6e44adf2041
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.js
@@ -0,0 +1,37 @@
+import {useEffect, useState} from 'react';
+
+let someGlobal = {value: null};
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  // NOTE: if we initialize to eg null or a local, then it won't be a definitively global
+  // mutation below when we modify `y`. The point of this is example is that if all control
+  // flow paths produce a global, we allow the mutation in an effect
+  let x = someGlobal;
+  while (x == null) {
+    x = someGlobal;
+  }
+
+  // capture into a separate variable that is not a context variable.
+  const y = x;
+  /**
+   * Note that this fixture currently produces a stale effect closure if `y = x
+   * = someGlobal` changes between renders. Under current compiler assumptions,
+   * that would be a rule of react violation.
+   */
+  useEffect(() => {
+    y.value = 'hello';
+  });
+
+  useEffect(() => {
+    setState(someGlobal.value);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
new file mode 100644
index 00000000000..b39077c9535
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current = '';
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(2);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const setRef = () => {
+      if (ref.current !== null) {
+        ref.current = "";
+      }
+    };
+    t0 = () => {
+      setRef();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <>
+        <input ref={ref} />
+        <button onClick={onClick} />
+      </>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx
new file mode 100644
index 00000000000..3f6427b40b7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx
@@ -0,0 +1,28 @@
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current = '';
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
new file mode 100644
index 00000000000..3b65ecfb8d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current = '';
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(2);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref.current !== null) {
+        ref.current = "";
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <>
+        <input ref={ref} />
+        <button onClick={onClick} />
+      </>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx
new file mode 100644
index 00000000000..4231ef4e0ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx
@@ -0,0 +1,24 @@
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current = '';
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
new file mode 100644
index 00000000000..37407b5cd0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current.value = '';
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(2);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const setRef = () => {
+      if (ref.current !== null) {
+        ref.current.value = "";
+      }
+    };
+    t0 = () => {
+      setRef();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <>
+        <input ref={ref} />
+        <button onClick={onClick} />
+      </>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx
new file mode 100644
index 00000000000..ed96f87a98a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx
@@ -0,0 +1,28 @@
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current.value = '';
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
new file mode 100644
index 00000000000..0d8ac787e5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current.value = '';
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(2);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref.current !== null) {
+        ref.current.value = "";
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <>
+        <input ref={ref} />
+        <button onClick={onClick} />
+      </>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx
new file mode 100644
index 00000000000..30a262d988c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx
@@ -0,0 +1,24 @@
+// @validateRefAccessDuringRender
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current.value = '';
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.expect.md
new file mode 100644
index 00000000000..f23ab16c16b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  return <Foo>{props.render({ref})}</Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import { useRef } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  const ref = useRef(null);
+
+  const T0 = Foo;
+  const t0 = props.render({ ref });
+  let t1;
+  if ($[0] !== T0 || $[1] !== t0) {
+    t1 = <T0>{t0}</T0>;
+    $[0] = T0;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.js
new file mode 100644
index 00000000000..ab9ffe2ed37
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper-props-object.js
@@ -0,0 +1,9 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  return <Foo>{props.render({ref})}</Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.expect.md
new file mode 100644
index 00000000000..a0ad22fcaf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  return <Foo>{props.render(ref)}</Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import { useRef } from "react";
+
+function Component(props) {
+  const $ = _c(4);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] !== props.render) {
+    t0 = props.render(ref);
+    $[0] = props.render;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = <Foo>{t0}</Foo>;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.js
new file mode 100644
index 00000000000..7c5a70188fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-ref-to-render-helper.js
@@ -0,0 +1,9 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  return <Foo>{props.render(ref)}</Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md
new file mode 100644
index 00000000000..7ec38df94be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const ref = useRef(null);
+  return <Foo ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Foo ref={ref} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.js
new file mode 100644
index 00000000000..a820b0d60ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const ref = useRef(null);
+  return <Foo ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.expect.md
new file mode 100644
index 00000000000..60945024f25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component() {
+  const onClick = () => {
+    // Cannot assign to globals
+    someUnknownGlobal = true;
+    moduleLocal = true;
+  };
+  // It's possible that this could be an event handler / effect function,
+  // but we don't know that and optimistically assume it will only be
+  // called by an event handler or effect, where it is allowed to modify globals
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  const onClick = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div onClick={onClick} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  someUnknownGlobal = true;
+  moduleLocal = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.js
new file mode 100644
index 00000000000..8b9da9eb311
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.js
@@ -0,0 +1,16 @@
+function Component() {
+  const onClick = () => {
+    // Cannot assign to globals
+    someUnknownGlobal = true;
+    moduleLocal = true;
+  };
+  // It's possible that this could be an event handler / effect function,
+  // but we don't know that and optimistically assume it will only be
+  // called by an event handler or effect, where it is allowed to modify globals
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.expect.md
new file mode 100644
index 00000000000..5cee9a68ceb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.expect.md
@@ -0,0 +1,148 @@
+
+## Input
+
+```javascript
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit<T>(callback: (data: T) => void | Promise<void>) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+// Simulates an upload function
+async function upload(file: any): Promise<{blob: {url: string}}> {
+  return {blob: {url: 'https://example.com/file.jpg'}};
+}
+
+interface SignatureRef {
+  toFile(): any;
+}
+
+function Component() {
+  const ref = useRef<SignatureRef>(null);
+
+  const onSubmit = async (value: any) => {
+    // This should be allowed: accessing ref.current in an async event handler
+    // that's wrapped and passed to onSubmit prop
+    let sigUrl: string;
+    if (value.hasSignature) {
+      const {blob} = await upload(ref.current?.toFile());
+      sigUrl = blob?.url || '';
+    } else {
+      sigUrl = value.signature;
+    }
+    console.log('Signature URL:', sigUrl);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input type="text" name="signature" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
+import { useRef } from "react";
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit(callback) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== callback) {
+    t0 = (event) => {
+      event.preventDefault();
+      callback({} as T);
+    };
+    $[0] = callback;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+// Simulates an upload function
+async function upload(file) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { blob: { url: "https://example.com/file.jpg" } };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+interface SignatureRef {
+  toFile(): any;
+}
+
+function Component() {
+  const $ = _c(4);
+  const ref = useRef(null);
+
+  const onSubmit = async (value) => {
+    let sigUrl;
+    if (value.hasSignature) {
+      const { blob } = await upload(ref.current?.toFile());
+      sigUrl = blob?.url || "";
+    } else {
+      sigUrl = value.signature;
+    }
+
+    console.log("Signature URL:", sigUrl);
+  };
+
+  const t0 = handleSubmit(onSubmit);
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <input type="text" name="signature" />;
+    t2 = <button type="submit">Submit</button>;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t0) {
+    t3 = (
+      <form onSubmit={t0}>
+        {t1}
+        {t2}
+      </form>
+    );
+    $[2] = t0;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <form><input type="text" name="signature"><button type="submit">Submit</button></form>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.tsx
new file mode 100644
index 00000000000..be6f6656e18
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.tsx
@@ -0,0 +1,48 @@
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit<T>(callback: (data: T) => void | Promise<void>) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+// Simulates an upload function
+async function upload(file: any): Promise<{blob: {url: string}}> {
+  return {blob: {url: 'https://example.com/file.jpg'}};
+}
+
+interface SignatureRef {
+  toFile(): any;
+}
+
+function Component() {
+  const ref = useRef<SignatureRef>(null);
+
+  const onSubmit = async (value: any) => {
+    // This should be allowed: accessing ref.current in an async event handler
+    // that's wrapped and passed to onSubmit prop
+    let sigUrl: string;
+    if (value.hasSignature) {
+      const {blob} = await upload(ref.current?.toFile());
+      sigUrl = blob?.url || '';
+    } else {
+      sigUrl = value.signature;
+    }
+    console.log('Signature URL:', sigUrl);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input type="text" name="signature" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md
new file mode 100644
index 00000000000..6cf97f6c351
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md
@@ -0,0 +1,119 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender @validateNoSetStateInRender:false
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  const setRef = useCallback(() => {
+    ref.current = 'Ok';
+  }, []);
+
+  useEffect(() => {
+    setRef();
+  }, []);
+
+  useEffect(() => {
+    setState(true);
+  }, []);
+
+  // We use state to force a re-render and observe whether the
+  // ref updated. This lets us check that the effect actually ran
+  // and wasn't DCE'd
+  return <Child key={String(state)} ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender @validateNoSetStateInRender:false
+import { useCallback, useEffect, useRef, useState } from "react";
+
+function Component() {
+  const $ = _c(7);
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current = "Ok";
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const setRef = t0;
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      setRef();
+    };
+    t2 = [];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      setState(true);
+    };
+    t4 = [];
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t3 = $[3];
+    t4 = $[4];
+  }
+  useEffect(t3, t4);
+
+  const t5 = String(state);
+  let t6;
+  if ($[5] !== t5) {
+    t6 = <Child key={t5} ref={ref} />;
+    $[5] = t5;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  return t6;
+}
+
+function Child({ ref }) {
+  "use no memo";
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Ok
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.js
new file mode 100644
index 00000000000..4320b5871da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.js
@@ -0,0 +1,35 @@
+// @validateRefAccessDuringRender @validateNoSetStateInRender:false
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  const setRef = useCallback(() => {
+    ref.current = 'Ok';
+  }, []);
+
+  useEffect(() => {
+    setRef();
+  }, []);
+
+  useEffect(() => {
+    setState(true);
+  }, []);
+
+  // We use state to force a re-render and observe whether the
+  // ref updated. This lets us check that the effect actually ran
+  // and wasn't DCE'd
+  return <Child key={String(state)} ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md
new file mode 100644
index 00000000000..009d504da25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md
@@ -0,0 +1,105 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import {useEffect, useRef, useState} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  useEffect(() => {
+    ref.current = 'Ok';
+  }, []);
+
+  useEffect(() => {
+    setState(true);
+  }, []);
+
+  // We use state to force a re-render and observe whether the
+  // ref updated. This lets us check that the effect actually ran
+  // and wasn't DCE'd
+  return <Child key={String(state)} ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useEffect, useRef, useState } from "react";
+
+function Component() {
+  const $ = _c(6);
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current = "Ok";
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setState(true);
+    };
+    t3 = [];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+
+  const t4 = String(state);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = <Child key={t4} ref={ref} />;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
+}
+
+function Child({ ref }) {
+  "use no memo";
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Ok
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.js
new file mode 100644
index 00000000000..54a1dc22c3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.js
@@ -0,0 +1,31 @@
+// @validateRefAccessDuringRender
+import {useEffect, useRef, useState} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  useEffect(() => {
+    ref.current = 'Ok';
+  }, []);
+
+  useEffect(() => {
+    setState(true);
+  }, []);
+
+  // We use state to force a re-render and observe whether the
+  // ref updated. This lets us check that the effect actually ran
+  // and wasn't DCE'd
+  return <Child key={String(state)} ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.expect.md
new file mode 100644
index 00000000000..5a272796587
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates react-hook-form's handleSubmit or similar event handler wrappers
+function handleSubmit<T>(callback: (data: T) => void) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+function Component() {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onSubmit = (data: any) => {
+    // This should be allowed: accessing ref.current in an event handler
+    // that's wrapped by handleSubmit and passed to onSubmit prop
+    if (ref.current !== null) {
+      console.log(ref.current.value);
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
+import { useRef } from "react";
+
+// Simulates react-hook-form's handleSubmit or similar event handler wrappers
+function handleSubmit(callback) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== callback) {
+    t0 = (event) => {
+      event.preventDefault();
+      callback({} as T);
+    };
+    $[0] = callback;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Component() {
+  const $ = _c(1);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onSubmit = (data) => {
+      if (ref.current !== null) {
+        console.log(ref.current.value);
+      }
+    };
+    t0 = (
+      <>
+        <input ref={ref} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <button type="submit">Submit</button>
+        </form>
+      </>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><form><button type="submit">Submit</button></form>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.tsx
new file mode 100644
index 00000000000..f305a1f9ac6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.tsx
@@ -0,0 +1,36 @@
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates react-hook-form's handleSubmit or similar event handler wrappers
+function handleSubmit<T>(callback: (data: T) => void) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+function Component() {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onSubmit = (data: any) => {
+    // This should be allowed: accessing ref.current in an event handler
+    // that's wrapped by handleSubmit and passed to onSubmit prop
+    if (ref.current !== null) {
+      console.log(ref.current.value);
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md
new file mode 100644
index 00000000000..26e996017eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md
@@ -0,0 +1,102 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import {useEffect, useRef, useState} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  useEffect(() => {
+    const callback = () => {
+      ref.current = 'Ok';
+    };
+  }, []);
+
+  useEffect(() => {
+    setState(true);
+  }, []);
+
+  // We use state to force a re-render and observe whether the
+  // ref updated. This lets us check that the effect actually ran
+  // and wasn't DCE'd
+  return <Child key={String(state)} ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useEffect, useRef, useState } from "react";
+
+function Component() {
+  const $ = _c(5);
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp, t0);
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      setState(true);
+    };
+    t2 = [];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+
+  const t3 = String(state);
+  let t4;
+  if ($[3] !== t3) {
+    t4 = <Child key={t3} ref={ref} />;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
+}
+function _temp() {}
+
+function Child({ ref }) {
+  "use no memo";
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.js
new file mode 100644
index 00000000000..dcd8540e2a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.js
@@ -0,0 +1,33 @@
+// @validateRefAccessDuringRender
+import {useEffect, useRef, useState} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [state, setState] = useState(false);
+  useEffect(() => {
+    const callback = () => {
+      ref.current = 'Ok';
+    };
+  }, []);
+
+  useEffect(() => {
+    setState(true);
+  }, []);
+
+  // We use state to force a re-render and observe whether the
+  // ref updated. This lets us check that the effect actually ran
+  // and wasn't DCE'd
+  return <Child key={String(state)} ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  // This violates the rules of React, so we access the ref in a child
+  // component
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.expect.md
new file mode 100644
index 00000000000..c355819320a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == undefined) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function C() {
+  const r = useRef(null);
+  if (r.current == undefined) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.js
new file mode 100644
index 00000000000..886f025287b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization-undefined.js
@@ -0,0 +1,14 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == undefined) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.expect.md
new file mode 100644
index 00000000000..560cef900ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.js
new file mode 100644
index 00000000000..7c7c3d9cb90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-initialization.js
@@ -0,0 +1,14 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-lazy-initialization-with-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-lazy-initialization-with-logical.expect.md
new file mode 100644
index 00000000000..3540e842f67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-lazy-initialization-with-logical.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+  if (ref.current == null) {
+    // the logical means the ref write is in a different block
+    // from the if consequent. this tests that the "safe" blocks
+    // extend up to the if's fallthrough
+    ref.current = props.unknownKey ?? props.value;
+  }
+  return <Child ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+
+import { useRef } from "react";
+
+function Component(props) {
+  const $ = _c(1);
+  const ref = useRef(null);
+  if (ref.current == null) {
+    ref.current = props.unknownKey ?? props.value;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Child ref={ref} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Child({ ref }) {
+  "use no memo";
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-lazy-initialization-with-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-lazy-initialization-with-logical.js
new file mode 100644
index 00000000000..2e1b03a28da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-lazy-initialization-with-logical.js
@@ -0,0 +1,24 @@
+// @validateRefAccessDuringRender
+
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+  if (ref.current == null) {
+    // the logical means the ref write is in a different block
+    // from the if consequent. this tests that the "safe" blocks
+    // extend up to the if's fallthrough
+    ref.current = props.unknownKey ?? props.value;
+  }
+  return <Child ref={ref} />;
+}
+
+function Child({ref}) {
+  'use no memo';
+  return ref.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.expect.md
new file mode 100644
index 00000000000..ee7a71e8f8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function useArrayOfRef() {
+  const ref = useRef(null);
+  const callback = value => {
+    ref.current = value;
+  };
+  return [callback] as const;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {
+    useArrayOfRef();
+    return 'ok';
+  },
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+
+function useArrayOfRef() {
+  const $ = _c(1);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const callback = (value) => {
+      ref.current = value;
+    };
+    t0 = [callback];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0 as const;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {
+    useArrayOfRef();
+    return "ok";
+  },
+
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) "ok"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.js
new file mode 100644
index 00000000000..2d0aafeffda
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.js
@@ -0,0 +1,17 @@
+import {useRef} from 'react';
+
+function useArrayOfRef() {
+  const ref = useRef(null);
+  const callback = value => {
+    ref.current = value;
+  };
+  return [callback] as const;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {
+    useArrayOfRef();
+    return 'ok';
+  },
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.expect.md
new file mode 100644
index 00000000000..2c6184553d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+function Component({a, b, c}) {
+  const x = [a];
+  const y = [null, b];
+  const z = [[], [], [c]];
+  x[0] = y[1];
+  z[0][0] = x[0];
+  return [x, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 20, c: 300}],
+  sequentialRenders: [
+    {a: 2, b: 20, c: 300},
+    {a: 3, b: 20, c: 300},
+    {a: 3, b: 21, c: 300},
+    {a: 3, b: 22, c: 300},
+    {a: 3, b: 22, c: 301},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(6);
+  const { a, b, c } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    const x = [a];
+    let t2;
+    if ($[4] !== b) {
+      t2 = [null, b];
+      $[4] = b;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    const y = t2;
+    const z = [[], [], [c]];
+    x[0] = y[1];
+    z[0][0] = x[0];
+    t1 = [x, z];
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 20, c: 300 }],
+  sequentialRenders: [
+    { a: 2, b: 20, c: 300 },
+    { a: 3, b: 20, c: 300 },
+    { a: 3, b: 21, c: 300 },
+    { a: 3, b: 22, c: 300 },
+    { a: 3, b: 22, c: 301 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[20],[[20],[],[300]]]
+[[20],[[20],[],[300]]]
+[[21],[[21],[],[300]]]
+[[22],[[22],[],[300]]]
+[[22],[[22],[],[301]]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.js
new file mode 100644
index 00000000000..e3d3015a14a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-access-assignment.js
@@ -0,0 +1,20 @@
+function Component({a, b, c}) {
+  const x = [a];
+  const y = [null, b];
+  const z = [[], [], [c]];
+  x[0] = y[1];
+  z[0][0] = x[0];
+  return [x, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 20, c: 300}],
+  sequentialRenders: [
+    {a: 2, b: 20, c: 300},
+    {a: 3, b: 20, c: 300},
+    {a: 3, b: 21, c: 300},
+    {a: 3, b: 22, c: 300},
+    {a: 3, b: 22, c: 301},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.expect.md
new file mode 100644
index 00000000000..cd782c3f791
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = foo(props.x);
+  const fn = function () {
+    const arr = [...bar(props)];
+    return arr.at(x);
+  };
+  const fnResult = fn();
+  return fnResult;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x);
+    $[0] = props.x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== props || $[3] !== x) {
+    const fn = function () {
+      const arr = [...bar(props)];
+      return arr.at(x);
+    };
+    t1 = fn();
+    $[2] = props;
+    $[3] = x;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const fnResult = t1;
+  return fnResult;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.js
new file mode 100644
index 00000000000..244b834756e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const x = foo(props.x);
+  const fn = function () {
+    const arr = [...bar(props)];
+    return arr.at(x);
+  };
+  const fnResult = fn();
+  return fnResult;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.expect.md
new file mode 100644
index 00000000000..a8bad512154
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// arrayInstance.at should have the following effects:
+//  - read on arg0
+//  - read on receiver
+//  - mutate on lvalue
+function ArrayAtTest(props) {
+  const arr = [foo(props.x)];
+  const result = arr.at(bar(props.y));
+  return result;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // arrayInstance.at should have the following effects:
+//  - read on arg0
+//  - read on receiver
+//  - mutate on lvalue
+function ArrayAtTest(props) {
+  const $ = _c(9);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x);
+    $[0] = props.x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = [t0];
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const arr = t1;
+  let t2;
+  if ($[4] !== arr || $[5] !== props.y) {
+    let t3;
+    if ($[7] !== props.y) {
+      t3 = bar(props.y);
+      $[7] = props.y;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    t2 = arr.at(t3);
+    $[4] = arr;
+    $[5] = props.y;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const result = t2;
+  return result;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.js
new file mode 100644
index 00000000000..2e2e78e50e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.js
@@ -0,0 +1,9 @@
+// arrayInstance.at should have the following effects:
+//  - read on arg0
+//  - read on receiver
+//  - mutate on lvalue
+function ArrayAtTest(props) {
+  const arr = [foo(props.x)];
+  const result = arr.at(bar(props.y));
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md
new file mode 100644
index 00000000000..c2ba7336360
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// x's mutable range should extend to `mutate(y)`
+
+function Component(props) {
+  let x = [42, {}];
+  const idx = foo(props.b);
+  let y = x.at(idx);
+  mutate(y);
+
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // x's mutable range should extend to `mutate(y)`
+
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.b) {
+    x = [42, {}];
+    const idx = foo(props.b);
+    const y = x.at(idx);
+    mutate(y);
+    $[0] = props.b;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.js
new file mode 100644
index 00000000000..9553132e1a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.js
@@ -0,0 +1,10 @@
+// x's mutable range should extend to `mutate(y)`
+
+function Component(props) {
+  let x = [42, {}];
+  const idx = foo(props.b);
+  let y = x.at(idx);
+  mutate(y);
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.expect.md
new file mode 100644
index 00000000000..e88eff03af2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+/**
+ * Fixture showing why `concat` needs to capture both the callee and rest args.
+ * Here, observe that arr1's values are captured into arr2.
+ *  - Later mutations of arr2 may write to values within arr1.
+ *  - Observe that it's technically valid to separately memoize the array arr1
+ *    itself.
+ */
+function Foo({inputNum}) {
+  const arr1: Array<number | object> = [{a: 1}, {}];
+  const arr2 = arr1.concat([1, inputNum]);
+  mutate(arr2[0]);
+  return arr2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{inputNum: 2}],
+  sequentialRenders: [{inputNum: 2}, {inputNum: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+/**
+ * Fixture showing why `concat` needs to capture both the callee and rest args.
+ * Here, observe that arr1's values are captured into arr2.
+ *  - Later mutations of arr2 may write to values within arr1.
+ *  - Observe that it's technically valid to separately memoize the array arr1
+ *    itself.
+ */
+function Foo(t0) {
+  const $ = _c(2);
+  const { inputNum } = t0;
+  let arr2;
+  if ($[0] !== inputNum) {
+    const arr1 = [{ a: 1 }, {}];
+    arr2 = arr1.concat([1, inputNum]);
+    mutate(arr2[0]);
+    $[0] = inputNum;
+    $[1] = arr2;
+  } else {
+    arr2 = $[1];
+  }
+  return arr2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ inputNum: 2 }],
+  sequentialRenders: [{ inputNum: 2 }, { inputNum: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":1,"wat0":"joe"},{},1,2]
+[{"a":1,"wat0":"joe"},{},1,3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.ts
new file mode 100644
index 00000000000..abd0f51fea7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.ts
@@ -0,0 +1,21 @@
+import {mutate} from 'shared-runtime';
+
+/**
+ * Fixture showing why `concat` needs to capture both the callee and rest args.
+ * Here, observe that arr1's values are captured into arr2.
+ *  - Later mutations of arr2 may write to values within arr1.
+ *  - Observe that it's technically valid to separately memoize the array arr1
+ *    itself.
+ */
+function Foo({inputNum}) {
+  const arr1: Array<number | object> = [{a: 1}, {}];
+  const arr2 = arr1.concat([1, inputNum]);
+  mutate(arr2[0]);
+  return arr2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{inputNum: 2}],
+  sequentialRenders: [{inputNum: 2}, {inputNum: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.expect.md
new file mode 100644
index 00000000000..f3af7efcf62
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [0, ...props.foo, null, ...props.bar, 'z'];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: [1, 2, 3], bar: [4, 5, 6]}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.bar || $[1] !== props.foo) {
+    t0 = [0, ...props.foo, null, ...props.bar, "z"];
+    $[0] = props.bar;
+    $[1] = props.foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: [1, 2, 3], bar: [4, 5, 6] }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,1,2,3,null,4,5,6,"z"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.js
new file mode 100644
index 00000000000..d50b40e9191
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const x = [0, ...props.foo, null, ...props.bar, 'z'];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: [1, 2, 3], bar: [4, 5, 6]}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.expect.md
new file mode 100644
index 00000000000..12be224d8f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.expect.md
@@ -0,0 +1,118 @@
+
+## Input
+
+```javascript
+import {useIdentity, Stringify} from 'shared-runtime';
+
+/**
+ * TODO: Note that this `Array.from` is inferred to be mutating its first
+ * argument. This is because React Compiler's typing system does not yet support
+ * annotating a function with a set of argument match cases + distinct
+ * definitions (polymorphism).
+ *
+ * In this case, we should be able to infer that the `Array.from` call is
+ * not mutating its 0th argument.
+ * The 0th argument should be typed as having `effect:Mutate` only when
+ * (1) it might be a mutable iterable or
+ * (2) the 1st argument might mutate its callee
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = Array.from(arr, (x, idx) => ({...x, id: idx}));
+  return <Stringify>{derived.at(-1)}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useIdentity, Stringify } from "shared-runtime";
+
+/**
+ * TODO: Note that this `Array.from` is inferred to be mutating its first
+ * argument. This is because React Compiler's typing system does not yet support
+ * annotating a function with a set of argument match cases + distinct
+ * definitions (polymorphism).
+ *
+ * In this case, we should be able to infer that the `Array.from` call is
+ * not mutating its 0th argument.
+ * The 0th argument should be typed as having `effect:Mutate` only when
+ * (1) it might be a mutable iterable or
+ * (2) the 1st argument might mutate its callee
+ */
+function Component(t0) {
+  const $ = _c(10);
+  const { value } = t0;
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { value: "foo" };
+    t2 = { value: "bar" };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== value) {
+    t3 = [t1, t2, { value }];
+    $[2] = value;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const arr = t3;
+  useIdentity();
+  let t4;
+  if ($[4] !== arr) {
+    t4 = Array.from(arr, _temp);
+    $[4] = arr;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const derived = t4;
+  let t5;
+  if ($[6] !== derived) {
+    t5 = derived.at(-1);
+    $[6] = derived;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t5) {
+    t6 = <Stringify>{t5}</Stringify>;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
+}
+function _temp(x, idx) {
+  return { ...x, id: idx };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":{"value":5,"id":2}}</div>
+<div>{"children":{"value":6,"id":2}}</div>
+<div>{"children":{"value":6,"id":2}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.js
new file mode 100644
index 00000000000..f2b364bc60e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.js
@@ -0,0 +1,26 @@
+import {useIdentity, Stringify} from 'shared-runtime';
+
+/**
+ * TODO: Note that this `Array.from` is inferred to be mutating its first
+ * argument. This is because React Compiler's typing system does not yet support
+ * annotating a function with a set of argument match cases + distinct
+ * definitions (polymorphism).
+ *
+ * In this case, we should be able to infer that the `Array.from` call is
+ * not mutating its 0th argument.
+ * The 0th argument should be typed as having `effect:Mutate` only when
+ * (1) it might be a mutable iterable or
+ * (2) the 1st argument might mutate its callee
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = Array.from(arr, (x, idx) => ({...x, id: idx}));
+  return <Stringify>{derived.at(-1)}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.expect.md
new file mode 100644
index 00000000000..3e89dbeae8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.expect.md
@@ -0,0 +1,115 @@
+
+## Input
+
+```javascript
+import {useIdentity, Stringify} from 'shared-runtime';
+
+/**
+ * TODO: Note that this `Array.from` is inferred to be mutating its first
+ * argument. This is because React Compiler's typing system does not yet support
+ * annotating a function with a set of argument match cases + distinct
+ * definitions (polymorphism)
+ *
+ * In this case, we should be able to infer that the `Array.from` call is
+ * not mutating its 0th argument.
+ * The 0th argument should be typed as having `effect:Mutate` only when
+ * (1) it might be a mutable iterable or
+ * (2) the 1st argument might mutate its callee
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = Array.from(arr);
+  return <Stringify>{derived.at(-1)}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useIdentity, Stringify } from "shared-runtime";
+
+/**
+ * TODO: Note that this `Array.from` is inferred to be mutating its first
+ * argument. This is because React Compiler's typing system does not yet support
+ * annotating a function with a set of argument match cases + distinct
+ * definitions (polymorphism)
+ *
+ * In this case, we should be able to infer that the `Array.from` call is
+ * not mutating its 0th argument.
+ * The 0th argument should be typed as having `effect:Mutate` only when
+ * (1) it might be a mutable iterable or
+ * (2) the 1st argument might mutate its callee
+ */
+function Component(t0) {
+  const $ = _c(10);
+  const { value } = t0;
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { value: "foo" };
+    t2 = { value: "bar" };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== value) {
+    t3 = [t1, t2, { value }];
+    $[2] = value;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const arr = t3;
+  useIdentity();
+  let t4;
+  if ($[4] !== arr) {
+    t4 = Array.from(arr);
+    $[4] = arr;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const derived = t4;
+  let t5;
+  if ($[6] !== derived) {
+    t5 = derived.at(-1);
+    $[6] = derived;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t5) {
+    t6 = <Stringify>{t5}</Stringify>;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":{"value":5}}</div>
+<div>{"children":{"value":6}}</div>
+<div>{"children":{"value":6}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.js
new file mode 100644
index 00000000000..c9b09c384de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.js
@@ -0,0 +1,26 @@
+import {useIdentity, Stringify} from 'shared-runtime';
+
+/**
+ * TODO: Note that this `Array.from` is inferred to be mutating its first
+ * argument. This is because React Compiler's typing system does not yet support
+ * annotating a function with a set of argument match cases + distinct
+ * definitions (polymorphism)
+ *
+ * In this case, we should be able to infer that the `Array.from` call is
+ * not mutating its 0th argument.
+ * The 0th argument should be typed as having `effect:Mutate` only when
+ * (1) it might be a mutable iterable or
+ * (2) the 1st argument might mutate its callee
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = Array.from(arr);
+  return <Stringify>{derived.at(-1)}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.expect.md
new file mode 100644
index 00000000000..94211944955
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = Array.from(arr).map(mutateAndReturn);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}, {value: 7}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutateAndReturn, Stringify, useIdentity } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { value } = t0;
+  const arr = [{ value: "foo" }, { value: "bar" }, { value }];
+  useIdentity();
+  const derived = Array.from(arr).map(mutateAndReturn);
+  let t1;
+  if ($[0] !== derived) {
+    t1 = derived.at(0);
+    $[0] = derived;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== derived) {
+    t2 = derived.at(-1);
+    $[2] = derived;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = (
+      <Stringify>
+        {t1}
+        {t2}
+      </Stringify>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }, { value: 7 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":7,"wat0":"joe"}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.js
new file mode 100644
index 00000000000..af5bea83a3d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.js
@@ -0,0 +1,19 @@
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = Array.from(arr).map(mutateAndReturn);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}, {value: 7}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md
new file mode 100644
index 00000000000..0dbb7884322
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [{}, [], props.value];
+  const y = x.join(() => 'this closure gets stringified, not called');
+  foo(y);
+  return [x, y];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== props.value) {
+    t2 = [t0, t1, props.value];
+    $[2] = props.value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const x = t2;
+  const y = x.join(_temp);
+  foo(y);
+  let t3;
+  if ($[4] !== x || $[5] !== y) {
+    t3 = [x, y];
+    $[4] = x;
+    $[5] = y;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+function _temp() {
+  return "this closure gets stringified, not called";
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.js
new file mode 100644
index 00000000000..a5afaf1578d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const x = [{}, [], props.value];
+  const y = x.join(() => 'this closure gets stringified, not called');
+  foo(y);
+  return [x, y];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.expect.md
new file mode 100644
index 00000000000..efd094c1a53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // This item is part of the receiver, should be memoized
+  const item = {a: props.a};
+  const items = [item];
+  const mapped = items.map(item => item);
+  return mapped;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {id: 42}}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.a) {
+    const item = { a: props.a };
+    const items = [item];
+    t0 = items.map(_temp);
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const mapped = t0;
+  return mapped;
+}
+function _temp(item_0) {
+  return item_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { id: 42 } }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":{"id":42}}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.js
new file mode 100644
index 00000000000..bb06ab542e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  // This item is part of the receiver, should be memoized
+  const item = {a: props.a};
+  const items = [item];
+  const mapped = items.map(item => item);
+  return mapped;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {id: 42}}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array-noAlias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array-noAlias.expect.md
new file mode 100644
index 00000000000..3408ec3ffa6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array-noAlias.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  <dif>{x}</dif>;
+  const y = x.map(item => item);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    const y = x.map(_temp);
+    t1 = [x, y];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp(item) {
+  return item;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array-noAlias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array-noAlias.js
new file mode 100644
index 00000000000..394e9377429
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array-noAlias.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const x = [];
+  <dif>{x}</dif>;
+  const y = x.map(item => item);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array.expect.md
new file mode 100644
index 00000000000..3408ec3ffa6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  <dif>{x}</dif>;
+  const y = x.map(item => item);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    const y = x.map(_temp);
+    t1 = [x, y];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp(item) {
+  return item;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array.js
new file mode 100644
index 00000000000..394e9377429
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-frozen-array.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const x = [];
+  <dif>{x}</dif>;
+  const y = x.map(item => item);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda-noAlias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda-noAlias.expect.md
new file mode 100644
index 00000000000..59a16a54d4b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda-noAlias.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  const y = x.map(item => {
+    item.updated = true;
+    return item;
+  });
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    const y = x.map(_temp);
+    t0 = [x, y];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp(item) {
+  item.updated = true;
+  return item;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda-noAlias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda-noAlias.js
new file mode 100644
index 00000000000..83a3387ff6b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda-noAlias.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const x = [];
+  const y = x.map(item => {
+    item.updated = true;
+    return item;
+  });
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda.expect.md
new file mode 100644
index 00000000000..59a16a54d4b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  const y = x.map(item => {
+    item.updated = true;
+    return item;
+  });
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    const y = x.map(_temp);
+    t0 = [x, y];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp(item) {
+  item.updated = true;
+  return item;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda.js
new file mode 100644
index 00000000000..83a3387ff6b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-mutating-lambda.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const x = [];
+  const y = x.map(item => {
+    item.updated = true;
+    return item;
+  });
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md
new file mode 100644
index 00000000000..0061bbe7fcb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [{}];
+  const y = x.map(item => {
+    return item;
+  });
+  y[0].flag = true;
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [{}];
+    const y = x.map(_temp);
+    y[0].flag = true;
+    t0 = [x, y];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp(item) {
+  return item;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[{"flag":true}],["[[ cyclic ref *2 ]]"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.js
new file mode 100644
index 00000000000..0f55f33acb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const x = [{}];
+  const y = x.map(item => {
+    return item;
+  });
+  y[0].flag = true;
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md
new file mode 100644
index 00000000000..f165502a29b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const f = item => item;
+  const x = [...props.items].map(f); // `f` doesn't escape here...
+  return [x, f]; // ...but it does here so it's memoized
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1}]}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const f = _temp;
+  let t0;
+  if ($[0] !== props.items) {
+    const x = [...props.items].map(f);
+    t0 = [x, f];
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(item) {
+  return item;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1 }] }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[{"id":1}],"[[ function params=1 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.js
new file mode 100644
index 00000000000..bab0285d604
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const f = item => item;
+  const x = [...props.items].map(f); // `f` doesn't escape here...
+  return [x, f]; // ...but it does here so it's memoized
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1}]}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-params.expect.md
new file mode 100644
index 00000000000..65e9bca48a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-params.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function component([a, b]) {
+  let y = {a};
+  let z = {b};
+  return [y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(t0) {
+  const $ = _c(7);
+  const [a, b] = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const y = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = { b };
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const z = t2;
+  let t3;
+  if ($[4] !== y || $[5] !== z) {
+    t3 = [y, z];
+    $[4] = y;
+    $[5] = z;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [["val1", "val2"]],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":"val1"},{"b":"val2"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-params.js
new file mode 100644
index 00000000000..4f1a632f474
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-params.js
@@ -0,0 +1,11 @@
+function component([a, b]) {
+  let y = {a};
+  let z = {b};
+  return [y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.expect.md
new file mode 100644
index 00000000000..c3bc1d16238
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.expect.md
@@ -0,0 +1,104 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  // Should memoize independently
+  const x = useMemo(() => makeObject_Primitives(), []);
+
+  const rest = useMemo(() => {
+    const [_, ...rest] = props.array;
+
+    // Should be inferred as Array.proto.push which doesn't mutate input
+    rest.push(x);
+    return rest;
+  });
+
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={x} />
+      <ValidateMemoization inputs={[props.array]} output={rest} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{array: [0, 1, 2]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(9);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let rest;
+  if ($[1] !== props.array) {
+    [, ...rest] = props.array;
+
+    rest.push(x);
+    $[1] = props.array;
+    $[2] = rest;
+  } else {
+    rest = $[2];
+  }
+  const rest_0 = rest;
+  let t1;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <ValidateMemoization inputs={[]} output={x} />;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== props.array) {
+    t2 = [props.array];
+    $[4] = props.array;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== rest_0 || $[7] !== t2) {
+    t3 = (
+      <>
+        {t1}
+        <ValidateMemoization inputs={t2} output={rest_0} />
+      </>
+    );
+    $[6] = rest_0;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ array: [0, 1, 2] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[],"output":{"a":0,"b":"value1","c":true}}</div><div>{"inputs":[[0,1,2]],"output":[1,2,{"a":0,"b":"value1","c":true}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.js
new file mode 100644
index 00000000000..686e8744077
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-pattern-spread-creates-array.js
@@ -0,0 +1,28 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  // Should memoize independently
+  const x = useMemo(() => makeObject_Primitives(), []);
+
+  const rest = useMemo(() => {
+    const [_, ...rest] = props.array;
+
+    // Should be inferred as Array.proto.push which doesn't mutate input
+    rest.push(x);
+    return rest;
+  });
+
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={x} />
+      <ValidateMemoization inputs={[props.array]} output={rest} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{array: [0, 1, 2]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-properties.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-properties.expect.md
new file mode 100644
index 00000000000..de226fdb715
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-properties.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = [props.a, props.b, 'hello'];
+  const x = a.length;
+  const y = a.push;
+  return {a, x, y, z: a.concat};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: [1, 2], b: 2}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    t0 = [props.a, props.b, "hello"];
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const a = t0;
+  const x = a.length;
+  const y = a.push;
+  let t1;
+  if ($[3] !== a || $[4] !== x || $[5] !== y) {
+    t1 = { a, x, y, z: a.concat };
+    $[3] = a;
+    $[4] = x;
+    $[5] = y;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: [1, 2], b: 2 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":[[1,2],2,"hello"],"x":3,"y":"[[ function params=1 ]]","z":"[[ function params=1 ]]"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-properties.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-properties.js
new file mode 100644
index 00000000000..1c912953341
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-properties.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const a = [props.a, props.b, 'hello'];
+  const x = a.length;
+  const y = a.push;
+  return {a, x, y, z: a.concat};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: [1, 2], b: 2}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md
new file mode 100644
index 00000000000..6618be4a6c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = [props.a, props.b, 'hello'];
+  const x = a.push(42);
+  const y = a.at(props.c);
+
+  return {a, x, y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2, c: 0}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(11);
+  let a;
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    a = [props.a, props.b, "hello"];
+    t0 = a.push(42);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = a;
+    $[3] = t0;
+  } else {
+    a = $[2];
+    t0 = $[3];
+  }
+  const x = t0;
+  let t1;
+  if ($[4] !== a || $[5] !== props.c) {
+    t1 = a.at(props.c);
+    $[4] = a;
+    $[5] = props.c;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const y = t1;
+  let t2;
+  if ($[7] !== a || $[8] !== x || $[9] !== y) {
+    t2 = { a, x, y };
+    $[7] = a;
+    $[8] = x;
+    $[9] = y;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 2, c: 0 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":[1,2,"hello",42],"x":4,"y":1}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.js
new file mode 100644
index 00000000000..be20c827237
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const a = [props.a, props.b, 'hello'];
+  const x = a.push(42);
+  const y = a.at(props.c);
+
+  return {a, x, y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2, c: 0}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md
new file mode 100644
index 00000000000..22cda38b1d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// arrayInstance.push should have the following effects:
+//  - read on all args (rest parameter)
+//  - mutate on receiver
+function Component(props) {
+  const x = foo(props.x);
+  const y = {y: props.y};
+  const arr = [];
+  arr.push({});
+  arr.push(x, y);
+  return arr;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // arrayInstance.push should have the following effects:
+//  - read on all args (rest parameter)
+//  - mutate on receiver
+function Component(props) {
+  const $ = _c(8);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x);
+    $[0] = props.x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== props.y) {
+    t1 = { y: props.y };
+    $[2] = props.y;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const y = t1;
+  let arr;
+  if ($[4] !== x || $[5] !== y) {
+    arr = [];
+    let t2;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {};
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    arr.push(t2);
+    arr.push(x, y);
+    $[4] = x;
+    $[5] = y;
+    $[6] = arr;
+  } else {
+    arr = $[6];
+  }
+  return arr;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.js
new file mode 100644
index 00000000000..272cd198b7c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.js
@@ -0,0 +1,11 @@
+// arrayInstance.push should have the following effects:
+//  - read on all args (rest parameter)
+//  - mutate on receiver
+function Component(props) {
+  const x = foo(props.x);
+  const y = {y: props.y};
+  const arr = [];
+  arr.push({});
+  arr.push(x, y);
+  return arr;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-later-mutated.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-later-mutated.expect.md
new file mode 100644
index 00000000000..a317e22faf9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-later-mutated.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function useBar({arg}) {
+  /**
+   * Note that mutableIterator is mutated by the later object spread. Therefore,
+   * `s.values()` should be memoized within the same block as the object spread.
+   * In terms of compiler internals, they should have the same reactive scope.
+   */
+  const obj = {};
+  const s = new Set([obj, 5, 4]);
+  const mutableIterator = s.values();
+  const arr = [...mutableIterator];
+
+  obj.x = arg;
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{arg: 3}],
+  sequentialRenders: [{arg: 3}, {arg: 3}, {arg: 4}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useBar(t0) {
+  const $ = _c(2);
+  const { arg } = t0;
+  let arr;
+  if ($[0] !== arg) {
+    const obj = {};
+    const s = new Set([obj, 5, 4]);
+    const mutableIterator = s.values();
+    arr = [...mutableIterator];
+
+    obj.x = arg;
+    $[0] = arg;
+    $[1] = arr;
+  } else {
+    arr = $[1];
+  }
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{ arg: 3 }],
+  sequentialRenders: [{ arg: 3 }, { arg: 3 }, { arg: 4 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"x":3},5,4]
+[{"x":3},5,4]
+[{"x":4},5,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-later-mutated.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-later-mutated.js
new file mode 100644
index 00000000000..036ce2ddfc6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-later-mutated.js
@@ -0,0 +1,20 @@
+function useBar({arg}) {
+  /**
+   * Note that mutableIterator is mutated by the later object spread. Therefore,
+   * `s.values()` should be memoized within the same block as the object spread.
+   * In terms of compiler internals, they should have the same reactive scope.
+   */
+  const obj = {};
+  const s = new Set([obj, 5, 4]);
+  const mutableIterator = s.values();
+  const arr = [...mutableIterator];
+
+  obj.x = arg;
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{arg: 3}],
+  sequentialRenders: [{arg: 3}, {arg: 3}, {arg: 4}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.expect.md
new file mode 100644
index 00000000000..7aa0702d470
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+/**
+ * TODO: object spreads should have conditionally mutate semantics
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) [3,1,5,4]
+ *   [3,1,5,4]
+ *   [4,1,5,4]
+ *   Forget:
+ *   (kind: ok) [3,1,5,4]
+ *   [3,1,5,4]
+ *   [4]
+ */
+
+function useBar({arg}) {
+  'use memo';
+
+  /**
+   * Note that mutableIterator is mutated by the later object spread. Therefore,
+   * `s.values()` should be memoized within the same block as the object spread.
+   * In terms of compiler internals, they should have the same reactive scope.
+   */
+  const s = new Set([1, 5, 4]);
+  const mutableIterator = s.values();
+
+  return [arg, ...mutableIterator];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{arg: 3}],
+  sequentialRenders: [{arg: 3}, {arg: 3}, {arg: 4}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * TODO: object spreads should have conditionally mutate semantics
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) [3,1,5,4]
+ *   [3,1,5,4]
+ *   [4,1,5,4]
+ *   Forget:
+ *   (kind: ok) [3,1,5,4]
+ *   [3,1,5,4]
+ *   [4]
+ */
+
+function useBar(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { arg } = t0;
+  let t1;
+  if ($[0] !== arg) {
+    const s = new Set([1, 5, 4]);
+    const mutableIterator = s.values();
+    t1 = [arg, ...mutableIterator];
+    $[0] = arg;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{ arg: 3 }],
+  sequentialRenders: [{ arg: 3 }, { arg: 3 }, { arg: 4 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [3,1,5,4]
+[3,1,5,4]
+[4,1,5,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.js
new file mode 100644
index 00000000000..c83a9e53e6a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.js
@@ -0,0 +1,32 @@
+/**
+ * TODO: object spreads should have conditionally mutate semantics
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) [3,1,5,4]
+ *   [3,1,5,4]
+ *   [4,1,5,4]
+ *   Forget:
+ *   (kind: ok) [3,1,5,4]
+ *   [3,1,5,4]
+ *   [4]
+ */
+
+function useBar({arg}) {
+  'use memo';
+
+  /**
+   * Note that mutableIterator is mutated by the later object spread. Therefore,
+   * `s.values()` should be memoized within the same block as the object spread.
+   * In terms of compiler internals, they should have the same reactive scope.
+   */
+  const s = new Set([1, 5, 4]);
+  const mutableIterator = s.values();
+
+  return [arg, ...mutableIterator];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{arg: 3}],
+  sequentialRenders: [{arg: 3}, {arg: 3}, {arg: 4}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-expr-directive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-expr-directive.expect.md
new file mode 100644
index 00000000000..93eb2bd28ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-expr-directive.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component() {
+  'use strict';
+  let [count, setCount] = React.useState(0);
+  const update = () => {
+    'worklet';
+    setCount(count => count + 1);
+  };
+  return <button onClick={update}>{count}</button>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  "use strict";
+  const $ = _c(3);
+
+  const [count, setCount] = React.useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      "worklet";
+
+      setCount(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const update = t0;
+  let t1;
+  if ($[1] !== count) {
+    t1 = <button onClick={update}>{count}</button>;
+    $[1] = count;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp(count_0) {
+  return count_0 + 1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-expr-directive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-expr-directive.js
new file mode 100644
index 00000000000..dd80b9a3615
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-expr-directive.js
@@ -0,0 +1,9 @@
+function Component() {
+  'use strict';
+  let [count, setCount] = React.useState(0);
+  const update = () => {
+    'worklet';
+    setCount(count => count + 1);
+  };
+  return <button onClick={update}>{count}</button>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-one-line-directive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-one-line-directive.expect.md
new file mode 100644
index 00000000000..9fa8df31149
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-one-line-directive.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function useFoo() {
+  const update = () => {
+    'worklet';
+    return 1;
+  };
+  return update;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function useFoo() {
+  const update = _temp;
+  return update;
+}
+function _temp() {
+  "worklet";
+  return 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-one-line-directive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-one-line-directive.js
new file mode 100644
index 00000000000..57bff1a8f74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-one-line-directive.js
@@ -0,0 +1,13 @@
+function useFoo() {
+  const update = () => {
+    'worklet';
+    return 1;
+  };
+  return update;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.expect.md
new file mode 100644
index 00000000000..d50d9d58cc7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+const Test = () => <div />;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+const Test = () => {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.js
new file mode 100644
index 00000000000..03195fd7d99
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.js
@@ -0,0 +1,7 @@
+// @compilationMode:"infer"
+const Test = () => <div />;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-computed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-computed.expect.md
new file mode 100644
index 00000000000..38b7044d15e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-computed.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [props.x];
+  const index = 0;
+  x[index] *= 2;
+  x['0'] += 3;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 2}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.x) {
+    x = [props.x];
+
+    x[0] = x[0] * 2;
+    x["0"] = x["0"] + 3;
+    $[0] = props.x;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 2 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [7]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-computed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-computed.js
new file mode 100644
index 00000000000..e251b1aaf55
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-computed.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const x = [props.x];
+  const index = 0;
+  x[index] *= 2;
+  x['0'] += 3;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 2}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-nested-path.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-nested-path.expect.md
new file mode 100644
index 00000000000..23672bcf08f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-nested-path.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function g(props) {
+  const a = {b: {c: props.c}};
+  a.b.c = a.b.c + 1;
+  a.b.c *= 2;
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: g,
+  params: [{c: 2}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function g(props) {
+  const $ = _c(2);
+  let a;
+  if ($[0] !== props.c) {
+    a = { b: { c: props.c } };
+    a.b.c = a.b.c + 1;
+    a.b.c = a.b.c * 2;
+    $[0] = props.c;
+    $[1] = a;
+  } else {
+    a = $[1];
+  }
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: g,
+  params: [{ c: 2 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":{"c":6}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-nested-path.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-nested-path.js
new file mode 100644
index 00000000000..d4a716e7f7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-expression-nested-path.js
@@ -0,0 +1,12 @@
+function g(props) {
+  const a = {b: {c: props.c}};
+  a.b.c = a.b.c + 1;
+  a.b.c *= 2;
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: g,
+  params: [{c: 2}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-in-nested-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-in-nested-if.expect.md
new file mode 100644
index 00000000000..c26d7652fed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-in-nested-if.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function useBar(props) {
+  let z;
+
+  if (props.a) {
+    if (props.b) {
+      z = baz();
+    }
+  }
+
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useBar(props) {
+  const $ = _c(1);
+  let z;
+
+  if (props.a) {
+    if (props.b) {
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = baz();
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      z = t0;
+    }
+  }
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-in-nested-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-in-nested-if.js
new file mode 100644
index 00000000000..b55579a36de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-in-nested-if.js
@@ -0,0 +1,11 @@
+function useBar(props) {
+  let z;
+
+  if (props.a) {
+    if (props.b) {
+      z = baz();
+    }
+  }
+
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md
new file mode 100644
index 00000000000..7ea9a069297
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function foo() {
+  const a = [[1]];
+  const first = a.at(0);
+  first.set(0, 2);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let a;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    a = [[1]];
+    const first = a.at(0);
+    first.set(0, 2);
+    $[0] = a;
+  } else {
+    a = $[0];
+  }
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.js
new file mode 100644
index 00000000000..db7685e8e28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.js
@@ -0,0 +1,12 @@
+function foo() {
+  const a = [[1]];
+  const first = a.at(0);
+  first.set(0, 2);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue.expect.md
new file mode 100644
index 00000000000..af970667c74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function g() {
+  const x = {y: {z: 1}};
+  x.y.z = x.y.z + 1;
+  x.y.z *= 2;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: g,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function g() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = { y: { z: 1 } };
+    x.y.z = x.y.z + 1;
+    x.y.z = x.y.z * 2;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: g,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":{"z":4}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue.js
new file mode 100644
index 00000000000..a35c239af4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue.js
@@ -0,0 +1,12 @@
+function g() {
+  const x = {y: {z: 1}};
+  x.y.z = x.y.z + 1;
+  x.y.z *= 2;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: g,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md
new file mode 100644
index 00000000000..880601fbc6d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function f() {
+  let x = 1;
+  x = x + 1;
+  x += 1;
+  x >>>= 1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function f() {
+  return 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.js
new file mode 100644
index 00000000000..707843931b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.js
@@ -0,0 +1,13 @@
+function f() {
+  let x = 1;
+  x = x + 1;
+  x += 1;
+  x >>>= 1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md
new file mode 100644
index 00000000000..6996c2cac7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+async function Component(props) {
+  const x = [];
+  await populateData(props.id, x);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+async function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.id) {
+    x = [];
+    await populateData(props.id, x);
+    $[0] = props.id;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.js
new file mode 100644
index 00000000000..8b5a45e6081
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.js
@@ -0,0 +1,5 @@
+async function Component(props) {
+  const x = [];
+  await populateData(props.id, x);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await.expect.md
new file mode 100644
index 00000000000..5415d9bd49d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+async function Component(props) {
+  const user = await load(props.id);
+  return <div>{user.name}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+async function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.id) {
+    t0 = await load(props.id);
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const user = t0;
+  let t1;
+  if ($[2] !== user.name) {
+    t1 = <div>{user.name}</div>;
+    $[2] = user.name;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await.js
new file mode 100644
index 00000000000..3d021138fe4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await.js
@@ -0,0 +1,4 @@
+async function Component(props) {
+  const user = await load(props.id);
+  return <div>{user.name}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md
new file mode 100644
index 00000000000..8b48145d913
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {useState, useMemo} from 'react';
+
+function Component(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+function Component2(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState, useMemo } from "react";
+
+function Component(props) {
+  const $ = _c(4);
+  const [x] = useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = calculateExpensiveNumber(x);
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const expensiveNumber = t0;
+  let t1;
+  if ($[2] !== expensiveNumber) {
+    t1 = <div>{expensiveNumber}</div>;
+    $[2] = expensiveNumber;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+function Component2(props) {
+  const $ = _c(4);
+  const [x] = useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = calculateExpensiveNumber(x);
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const expensiveNumber = t0;
+  let t1;
+  if ($[2] !== expensiveNumber) {
+    t1 = <div>{expensiveNumber}</div>;
+    $[2] = expensiveNumber;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.js
new file mode 100644
index 00000000000..7109349f65b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.js
@@ -0,0 +1,15 @@
+import {useState, useMemo} from 'react';
+
+function Component(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+function Component2(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md
new file mode 100644
index 00000000000..745da40e7c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+import {useState, useMemo} from 'react';
+
+function Component(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+function Component2(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { useState, useMemo } from "react";
+
+function Component(props) {
+  const $ = _c(4);
+  const [x] = useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = calculateExpensiveNumber(x);
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const expensiveNumber = t0;
+  let t1;
+  if ($[2] !== expensiveNumber) {
+    t1 = <div>{expensiveNumber}</div>;
+    $[2] = expensiveNumber;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+function Component2(props) {
+  const $ = _c(4);
+  const [x] = useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = calculateExpensiveNumber(x);
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const expensiveNumber = t0;
+  let t1;
+  if ($[2] !== expensiveNumber) {
+    t1 = <div>{expensiveNumber}</div>;
+    $[2] = expensiveNumber;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.js
new file mode 100644
index 00000000000..d23cd2931ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {useState, useMemo} from 'react';
+
+function Component(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+function Component2(props) {
+  const [x] = useState(0);
+  const expensiveNumber = useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md
new file mode 100644
index 00000000000..297b01229c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+import {calculateExpensiveNumber} from 'shared-runtime';
+
+function Component(props) {
+  const [x] = React.useState(0);
+  const expensiveNumber = React.useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { calculateExpensiveNumber } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  const [x] = React.useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = calculateExpensiveNumber(x);
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const expensiveNumber = t0;
+  let t1;
+  if ($[2] !== expensiveNumber) {
+    t1 = <div>{expensiveNumber}</div>;
+    $[2] = expensiveNumber;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.js
new file mode 100644
index 00000000000..58471203ede
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {calculateExpensiveNumber} from 'shared-runtime';
+
+function Component(props) {
+  const [x] = React.useState(0);
+  const expensiveNumber = React.useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return <div>{expensiveNumber}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-runtime-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-runtime-import.expect.md
new file mode 100644
index 00000000000..ac4e7dc3a8c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-runtime-import.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+import {someImport} from 'react/compiler-runtime';
+import {calculateExpensiveNumber} from 'shared-runtime';
+
+function Component(props) {
+  const [x] = React.useState(0);
+  const expensiveNumber = React.useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return (
+    <div>
+      {expensiveNumber}
+      {`${someImport}`}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import * as React from "react";
+import { someImport, c as _c } from "react/compiler-runtime";
+import { calculateExpensiveNumber } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  const [x] = React.useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = calculateExpensiveNumber(x);
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const expensiveNumber = t0;
+  let t1;
+  if ($[2] !== expensiveNumber) {
+    t1 = (
+      <div>
+        {expensiveNumber}
+        {`${someImport}`}
+      </div>
+    );
+    $[2] = expensiveNumber;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0undefined</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-runtime-import.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-runtime-import.js
new file mode 100644
index 00000000000..80a2006dd12
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-runtime-import.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {someImport} from 'react/compiler-runtime';
+import {calculateExpensiveNumber} from 'shared-runtime';
+
+function Component(props) {
+  const [x] = React.useState(0);
+  const expensiveNumber = React.useMemo(() => calculateExpensiveNumber(x), [x]);
+
+  return (
+    <div>
+      {expensiveNumber}
+      {`${someImport}`}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-repro-compact-negative-number.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-repro-compact-negative-number.expect.md
new file mode 100644
index 00000000000..70e19e0744a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-repro-compact-negative-number.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Repro(props) {
+  const MY_CONST = -2;
+  return <Stringify>{props.arg - MY_CONST}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Repro,
+  params: [
+    {
+      arg: 3,
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Repro(props) {
+  const $ = _c(2);
+
+  const t0 = props.arg - -2;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <Stringify>{t0}</Stringify>;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Repro,
+  params: [
+    {
+      arg: 3,
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":5}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-repro-compact-negative-number.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-repro-compact-negative-number.js
new file mode 100644
index 00000000000..891589bc981
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-repro-compact-negative-number.js
@@ -0,0 +1,15 @@
+import {Stringify} from 'shared-runtime';
+
+function Repro(props) {
+  const MY_CONST = -2;
+  return <Stringify>{props.arg - MY_CONST}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Repro,
+  params: [
+    {
+      arg: 3,
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-dead-code.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-dead-code.expect.md
new file mode 100644
index 00000000000..a42a8835f5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-dead-code.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function useHook(a, b) {
+  switch (a) {
+    case 1:
+      if (b == null) {
+        return;
+      }
+      console.log(b);
+      break;
+    case 2:
+      return;
+    default:
+      return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1, 'foo'],
+};
+
+```
+
+## Code
+
+```javascript
+function useHook(a, b) {
+  bb0: switch (a) {
+    case 1: {
+      if (b == null) {
+        return;
+      }
+
+      console.log(b);
+      break bb0;
+    }
+    case 2: {
+      return;
+    }
+    default: {
+      return;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1, "foo"],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['foo']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-dead-code.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-dead-code.js
new file mode 100644
index 00000000000..0763d19e7a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-dead-code.js
@@ -0,0 +1,19 @@
+function useHook(a, b) {
+  switch (a) {
+    case 1:
+      if (b == null) {
+        return;
+      }
+      console.log(b);
+      break;
+    case 2:
+      return;
+    default:
+      return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1, 'foo'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.expect.md
new file mode 100644
index 00000000000..8c2b57cbad5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component(props) {
+  const outerHandlers = useMemo(() => {
+    let handlers = {value: props.value};
+    switch (props.test) {
+      case true: {
+        console.log(handlers.value);
+        break;
+      }
+      default: {
+      }
+    }
+    return handlers;
+  });
+  return outerHandlers;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: true, value: 'hello'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = { value: props.value };
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const handlers = t0;
+  bb0: switch (props.test) {
+    case true: {
+      console.log(handlers.value);
+      break bb0;
+    }
+    default:
+  }
+  const outerHandlers = handlers;
+  return outerHandlers;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ test: true, value: "hello" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"value":"hello"}
+logs: ['hello']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.js
new file mode 100644
index 00000000000..9448a284dd6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/block-scoping-switch-variable-scoping.js
@@ -0,0 +1,23 @@
+// @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component(props) {
+  const outerHandlers = useMemo(() => {
+    let handlers = {value: props.value};
+    switch (props.test) {
+      case true: {
+        console.log(handlers.value);
+        break;
+      }
+      default: {
+      }
+    }
+    return handlers;
+  });
+  return outerHandlers;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: true, value: 'hello'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-capturing-func-maybealias-captured-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-capturing-func-maybealias-captured-mutate.expect.md
new file mode 100644
index 00000000000..8d1e8522255
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-capturing-func-maybealias-captured-mutate.expect.md
@@ -0,0 +1,122 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel:false
+import {makeArray, mutate} from 'shared-runtime';
+
+/**
+ * Bug repro:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok)
+ *   {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+ *   {"bar":5,"x":{"foo":3,"wat0":"joe"}}
+ *   Forget:
+ *   (kind: ok)
+ *   {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+ *   {"bar":5,"x":{"foo":3,"wat0":"joe","wat1":"joe"}}
+ *
+ * Fork of `capturing-func-alias-captured-mutate`, but instead of directly
+ * aliasing `y` via `[y]`, we make an opaque call.
+ *
+ * Note that the bug here is that we don't infer that `a = makeArray(y)`
+ * potentially captures a context variable into a local variable. As a result,
+ * we don't understand that `a[0].x = b` captures `x` into `y` -- instead, we're
+ * currently inferring that this lambda captures `y` (for a potential later
+ * mutation) and simply reads `x`.
+ *
+ * Concretely `InferReferenceEffects.hasContextRefOperand` is incorrectly not
+ * used when we analyze CallExpressions.
+ */
+function Component({foo, bar}: {foo: number; bar: number}) {
+  let x = {foo};
+  let y: {bar: number; x?: {foo: number}} = {bar};
+  const f0 = function () {
+    let a = makeArray(y); // a = [y]
+    let b = x;
+    // this writes y.x = x
+    a[0].x = b;
+  };
+  f0();
+  mutate(y.x);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 3, bar: 4}],
+  sequentialRenders: [
+    {foo: 3, bar: 4},
+    {foo: 3, bar: 5},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel:false
+import { makeArray, mutate } from "shared-runtime";
+
+/**
+ * Bug repro:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok)
+ *   {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+ *   {"bar":5,"x":{"foo":3,"wat0":"joe"}}
+ *   Forget:
+ *   (kind: ok)
+ *   {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+ *   {"bar":5,"x":{"foo":3,"wat0":"joe","wat1":"joe"}}
+ *
+ * Fork of `capturing-func-alias-captured-mutate`, but instead of directly
+ * aliasing `y` via `[y]`, we make an opaque call.
+ *
+ * Note that the bug here is that we don't infer that `a = makeArray(y)`
+ * potentially captures a context variable into a local variable. As a result,
+ * we don't understand that `a[0].x = b` captures `x` into `y` -- instead, we're
+ * currently inferring that this lambda captures `y` (for a potential later
+ * mutation) and simply reads `x`.
+ *
+ * Concretely `InferReferenceEffects.hasContextRefOperand` is incorrectly not
+ * used when we analyze CallExpressions.
+ */
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let y;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    y = { bar };
+    const f0 = function () {
+      const a = makeArray(y);
+      const b = x;
+
+      a[0].x = b;
+    };
+
+    f0();
+    mutate(y.x);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 3, bar: 4 }],
+  sequentialRenders: [
+    { foo: 3, bar: 4 },
+    { foo: 3, bar: 5 },
+  ],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-capturing-func-maybealias-captured-mutate.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-capturing-func-maybealias-captured-mutate.ts
new file mode 100644
index 00000000000..62d891febf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-capturing-func-maybealias-captured-mutate.ts
@@ -0,0 +1,49 @@
+// @enableNewMutationAliasingModel:false
+import {makeArray, mutate} from 'shared-runtime';
+
+/**
+ * Bug repro:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok)
+ *   {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+ *   {"bar":5,"x":{"foo":3,"wat0":"joe"}}
+ *   Forget:
+ *   (kind: ok)
+ *   {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+ *   {"bar":5,"x":{"foo":3,"wat0":"joe","wat1":"joe"}}
+ *
+ * Fork of `capturing-func-alias-captured-mutate`, but instead of directly
+ * aliasing `y` via `[y]`, we make an opaque call.
+ *
+ * Note that the bug here is that we don't infer that `a = makeArray(y)`
+ * potentially captures a context variable into a local variable. As a result,
+ * we don't understand that `a[0].x = b` captures `x` into `y` -- instead, we're
+ * currently inferring that this lambda captures `y` (for a potential later
+ * mutation) and simply reads `x`.
+ *
+ * Concretely `InferReferenceEffects.hasContextRefOperand` is incorrectly not
+ * used when we analyze CallExpressions.
+ */
+function Component({foo, bar}: {foo: number; bar: number}) {
+  let x = {foo};
+  let y: {bar: number; x?: {foo: number}} = {bar};
+  const f0 = function () {
+    let a = makeArray(y); // a = [y]
+    let b = x;
+    // this writes y.x = x
+    a[0].x = b;
+  };
+  f0();
+  mutate(y.x);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 3, bar: 4}],
+  sequentialRenders: [
+    {foo: 3, bar: 4},
+    {foo: 3, bar: 5},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md
new file mode 100644
index 00000000000..ccfc4517500
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md
@@ -0,0 +1,132 @@
+
+## Input
+
+```javascript
+import {useRef, useEffect} from 'react';
+
+/**
+ * The postfix increment operator should return the value before incrementing.
+ * ```js
+ * const id = count.current; // 0
+ * count.current = count.current + 1; // 1
+ * return id;
+ * ```
+ * The bug is that we currently increment the value before the expression is evaluated.
+ * This bug does not trigger when the incremented value is a plain primitive.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ * (kind: ok) {"count":{"current":0},"updateCountPostfix":"[[ function params=0 ]]","updateCountPrefix":"[[ function params=0 ]]"}
+ * logs: ['id = 0','count = 1']
+ * Forget:
+ * (kind: ok) {"count":{"current":0},"updateCountPostfix":"[[ function params=0 ]]","updateCountPrefix":"[[ function params=0 ]]"}
+ * logs: ['id = 1','count = 1']
+ */
+function useFoo() {
+  const count = useRef(0);
+  const updateCountPostfix = () => {
+    const id = count.current++;
+    return id;
+  };
+  const updateCountPrefix = () => {
+    const id = ++count.current;
+    return id;
+  };
+  useEffect(() => {
+    const id = updateCountPostfix();
+    console.log(`id = ${id}`);
+    console.log(`count = ${count.current}`);
+  }, []);
+  return {count, updateCountPostfix, updateCountPrefix};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef, useEffect } from "react";
+
+/**
+ * The postfix increment operator should return the value before incrementing.
+ * ```js
+ * const id = count.current; // 0
+ * count.current = count.current + 1; // 1
+ * return id;
+ * ```
+ * The bug is that we currently increment the value before the expression is evaluated.
+ * This bug does not trigger when the incremented value is a plain primitive.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ * (kind: ok) {"count":{"current":0},"updateCountPostfix":"[[ function params=0 ]]","updateCountPrefix":"[[ function params=0 ]]"}
+ * logs: ['id = 0','count = 1']
+ * Forget:
+ * (kind: ok) {"count":{"current":0},"updateCountPostfix":"[[ function params=0 ]]","updateCountPrefix":"[[ function params=0 ]]"}
+ * logs: ['id = 1','count = 1']
+ */
+function useFoo() {
+  const $ = _c(5);
+  const count = useRef(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      count.current = count.current + 1;
+      const id = count.current;
+      return id;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const updateCountPostfix = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      const id_0 = (count.current = count.current + 1);
+      return id_0;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const updateCountPrefix = t1;
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      const id_1 = updateCountPostfix();
+      console.log(`id = ${id_1}`);
+      console.log(`count = ${count.current}`);
+    };
+    t3 = [];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = { count, updateCountPostfix, updateCountPrefix };
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.js
new file mode 100644
index 00000000000..a7c1fad8bf2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.js
@@ -0,0 +1,42 @@
+import {useRef, useEffect} from 'react';
+
+/**
+ * The postfix increment operator should return the value before incrementing.
+ * ```js
+ * const id = count.current; // 0
+ * count.current = count.current + 1; // 1
+ * return id;
+ * ```
+ * The bug is that we currently increment the value before the expression is evaluated.
+ * This bug does not trigger when the incremented value is a plain primitive.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ * (kind: ok) {"count":{"current":0},"updateCountPostfix":"[[ function params=0 ]]","updateCountPrefix":"[[ function params=0 ]]"}
+ * logs: ['id = 0','count = 1']
+ * Forget:
+ * (kind: ok) {"count":{"current":0},"updateCountPostfix":"[[ function params=0 ]]","updateCountPrefix":"[[ function params=0 ]]"}
+ * logs: ['id = 1','count = 1']
+ */
+function useFoo() {
+  const count = useRef(0);
+  const updateCountPostfix = () => {
+    const id = count.current++;
+    return id;
+  };
+  const updateCountPrefix = () => {
+    const id = ++count.current;
+    return id;
+  };
+  useEffect(() => {
+    const id = updateCountPostfix();
+    console.log(`id = ${id}`);
+    console.log(`count = ${count.current}`);
+  }, []);
+  return {count, updateCountPostfix, updateCountPrefix};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-separate-memoization-due-to-callback-capturing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-separate-memoization-due-to-callback-capturing.expect.md
new file mode 100644
index 00000000000..7767989574c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-separate-memoization-due-to-callback-capturing.expect.md
@@ -0,0 +1,138 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel:false
+import {ValidateMemoization} from 'shared-runtime';
+
+const Codes = {
+  en: {name: 'English'},
+  ja: {name: 'Japanese'},
+  ko: {name: 'Korean'},
+  zh: {name: 'Chinese'},
+};
+
+function Component(a) {
+  let keys;
+  if (a) {
+    keys = Object.keys(Codes);
+  } else {
+    return null;
+  }
+  const options = keys.map(code => {
+    const country = Codes[code];
+    return {
+      name: country.name,
+      code,
+    };
+  });
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={keys} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[]}
+        output={options}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: false}],
+  sequentialRenders: [
+    {a: false},
+    {a: true},
+    {a: true},
+    {a: false},
+    {a: true},
+    {a: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel:false
+import { ValidateMemoization } from "shared-runtime";
+
+const Codes = {
+  en: { name: "English" },
+  ja: { name: "Japanese" },
+  ko: { name: "Korean" },
+  zh: { name: "Chinese" },
+};
+
+function Component(a) {
+  const $ = _c(4);
+  let keys;
+  if (a) {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = Object.keys(Codes);
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    keys = t0;
+  } else {
+    return null;
+  }
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = keys.map(_temp);
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const options = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <ValidateMemoization inputs={[]} output={keys} onlyCheckCompiled={true} />
+    );
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (
+      <>
+        {t1}
+        <ValidateMemoization
+          inputs={[]}
+          output={options}
+          onlyCheckCompiled={true}
+        />
+      </>
+    );
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(code) {
+  const country = Codes[code];
+  return { name: country.name, code };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: false }],
+  sequentialRenders: [
+    { a: false },
+    { a: true },
+    { a: true },
+    { a: false },
+    { a: true },
+    { a: false },
+  ],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-separate-memoization-due-to-callback-capturing.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-separate-memoization-due-to-callback-capturing.js
new file mode 100644
index 00000000000..c28ee705d16
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-separate-memoization-due-to-callback-capturing.js
@@ -0,0 +1,48 @@
+// @enableNewMutationAliasingModel:false
+import {ValidateMemoization} from 'shared-runtime';
+
+const Codes = {
+  en: {name: 'English'},
+  ja: {name: 'Japanese'},
+  ko: {name: 'Korean'},
+  zh: {name: 'Chinese'},
+};
+
+function Component(a) {
+  let keys;
+  if (a) {
+    keys = Object.keys(Codes);
+  } else {
+    return null;
+  }
+  const options = keys.map(code => {
+    const country = Codes[code];
+    return {
+      name: country.name,
+      code,
+    };
+  });
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={keys} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[]}
+        output={options}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: false}],
+  sequentialRenders: [
+    {a: false},
+    {a: true},
+    {a: true},
+    {a: false},
+    {a: true},
+    {a: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.expect.md
new file mode 100644
index 00000000000..8fc049fa6f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.expect.md
@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+import {arrayPush, CONST_NUMBER0, mutate} from 'shared-runtime';
+
+/**
+ * Repro for bug in our type inference system. We currently propagate inferred
+ * types through control flow / potential type guards. Note that this is
+ * inconsistent with both Flow and Typescript.
+ * https://flow.org/try/#1N4Igxg9gdgZglgcxALlAIwIZoKYBsD6uEEAztvhgE6UYCe+JADpdhgCYowa5kA0I2KAFcAtiRQAXSkOz9sADwxgJ+NPTbYuQ3BMnTZA+Y2yU4IwRO4A6SFBIrGVDGM7c+h46fNRLuKxJIGWh8MeT0ZfhYlCStpHzNsFBAMIQkIEQwJODAQfiEyfBE4eWw2fDgofDBMsAALfAA3KjgsXGxxZC4eAw0G-GhcWn9aY3wWZldu-g1mbGqJUoBaCRHEzrcDEgBrbAk62kXhXFxJ923d-cPRHEpTgyEoMDaqZdW7vKgoOfaSKgOKpqmDA+d4gB5fMA-P6LCCMLLQbiLOoYCqgh6-GDYRYIXYLSgkRZkCR4jpddwPfJLZjpOBkO4AX34kA0SRWxgABAAxYjsgC87OAAB0oOzReythU2Mh2YKQNyILLeMKxeymrgZNLhCIbsL6QBuYVs7DsgBCVD5AuVYolUClMpAZsoiqtorVGvZWpuSqg9OFMAeyjg0HZdTmW3lAAp5NKAPJoABWcwkAEppWZGLg4O12fJ2bSuTyhSKxSwJEJKCKAOQ2tiVvMi3MAMkbOasNb5vP5svlsoNPuFfoD8JFGQqUel8vZAB9TVReCHoHa0MRnlBUwWIJbi6K4DB2RHbGxk1uVSrd-uAIShsDh4hR5PHoun5-siS1SgQADuHuw34AotQECUBGsqysmfYvuyvrbqepblg2EFitBKpwRWOZ9vSuQgA0JgkEGUBJBk9gmCA9JAA
+ * https://www.typescriptlang.org/play/?#code/C4TwDgpgBAYg9nKBeKBvAUFLUDWBLAOwBMAuKAInjnIBpNsA3AQwBsBXCMgtgWwCMIAJ3QBfANzpQkKACEmg5GnpZ8xMuTmDayqM3aco3fkLoj0AMzYEAxsDxwCUawAsI1nFQAUADzJw+AFZuwACUZEwAzhFCwBFQ3lB4cVRK2InmUJ4AhJ4A5KpEuYmOCQBkpfEAdAXISCiUCOQhIalp2MDOgnAA7oYQvQCigl2CnuRWEN6QthBETTpmZhZWtvaOPEyEPmQpAD6y8jRODqRQfAgsEEwEYbAIrVh4GZ7WJy0Ybdgubh4IPiEST5YQQQYBsQQlQHYMxpEFgiHxCQiIA
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   [2]
+ *   [3]
+ * Forget:
+ *   (kind: ok)
+ *   [2]
+ *   [2,3]
+ */
+function useFoo({cond, value}: {cond: boolean; value: number}) {
+  const x = {value: cond ? CONST_NUMBER0 : []};
+  mutate(x);
+
+  const xValue = x.value;
+  let result;
+  if (typeof xValue === 'number') {
+    result = xValue + 1; //               (1) here we infer xValue is a primitive
+  } else {
+    result = arrayPush(xValue, value); // (2) and propagate it to all other xValue references
+  }
+
+  return result;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true}],
+  sequentialRenders: [
+    {cond: false, value: 2},
+    {cond: false, value: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush, CONST_NUMBER0, mutate } from "shared-runtime";
+
+/**
+ * Repro for bug in our type inference system. We currently propagate inferred
+ * types through control flow / potential type guards. Note that this is
+ * inconsistent with both Flow and Typescript.
+ * https://flow.org/try/#1N4Igxg9gdgZglgcxALlAIwIZoKYBsD6uEEAztvhgE6UYCe+JADpdhgCYowa5kA0I2KAFcAtiRQAXSkOz9sADwxgJ+NPTbYuQ3BMnTZA+Y2yU4IwRO4A6SFBIrGVDGM7c+h46fNRLuKxJIGWh8MeT0ZfhYlCStpHzNsFBAMIQkIEQwJODAQfiEyfBE4eWw2fDgofDBMsAALfAA3KjgsXGxxZC4eAw0G-GhcWn9aY3wWZldu-g1mbGqJUoBaCRHEzrcDEgBrbAk62kXhXFxJ923d-cPRHEpTgyEoMDaqZdW7vKgoOfaSKgOKpqmDA+d4gB5fMA-P6LCCMLLQbiLOoYCqgh6-GDYRYIXYLSgkRZkCR4jpddwPfJLZjpOBkO4AX34kA0SRWxgABAAxYjsgC87OAAB0oOzReythU2Mh2YKQNyILLeMKxeymrgZNLhCIbsL6QBuYVs7DsgBCVD5AuVYolUClMpAZsoiqtorVGvZWpuSqg9OFMAeyjg0HZdTmW3lAAp5NKAPJoABWcwkAEppWZGLg4O12fJ2bSuTyhSKxSwJEJKCKAOQ2tiVvMi3MAMkbOasNb5vP5svlsoNPuFfoD8JFGQqUel8vZAB9TVReCHoHa0MRnlBUwWIJbi6K4DB2RHbGxk1uVSrd-uAIShsDh4hR5PHoun5-siS1SgQADuHuw34AotQECUBGsqysmfYvuyvrbqepblg2EFitBKpwRWOZ9vSuQgA0JgkEGUBJBk9gmCA9JAA
+ * https://www.typescriptlang.org/play/?#code/C4TwDgpgBAYg9nKBeKBvAUFLUDWBLAOwBMAuKAInjnIBpNsA3AQwBsBXCMgtgWwCMIAJ3QBfANzpQkKACEmg5GnpZ8xMuTmDayqM3aco3fkLoj0AMzYEAxsDxwCUawAsI1nFQAUADzJw+AFZuwACUZEwAzhFCwBFQ3lB4cVRK2InmUJ4AhJ4A5KpEuYmOCQBkpfEAdAXISCiUCOQhIalp2MDOgnAA7oYQvQCigl2CnuRWEN6QthBETTpmZhZWtvaOPEyEPmQpAD6y8jRODqRQfAgsEEwEYbAIrVh4GZ7WJy0Ybdgubh4IPiEST5YQQQYBsQQlQHYMxpEFgiHxCQiIA
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   [2]
+ *   [3]
+ * Forget:
+ *   (kind: ok)
+ *   [2]
+ *   [2,3]
+ */
+function useFoo(t0) {
+  const $ = _c(5);
+  const { cond, value } = t0;
+  let x;
+  if ($[0] !== cond) {
+    x = { value: cond ? CONST_NUMBER0 : [] };
+    mutate(x);
+    $[0] = cond;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+
+  const xValue = x.value;
+  let result;
+  if (typeof xValue === "number") {
+    result = xValue + 1;
+  } else {
+    let t1;
+    if ($[2] !== value || $[3] !== xValue) {
+      t1 = arrayPush(xValue, value);
+      $[2] = value;
+      $[3] = xValue;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    result = t1;
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: true }],
+  sequentialRenders: [
+    { cond: false, value: 2 },
+    { cond: false, value: 3 },
+  ],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.ts
new file mode 100644
index 00000000000..4b8957dc8d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.ts
@@ -0,0 +1,41 @@
+import {arrayPush, CONST_NUMBER0, mutate} from 'shared-runtime';
+
+/**
+ * Repro for bug in our type inference system. We currently propagate inferred
+ * types through control flow / potential type guards. Note that this is
+ * inconsistent with both Flow and Typescript.
+ * https://flow.org/try/#1N4Igxg9gdgZglgcxALlAIwIZoKYBsD6uEEAztvhgE6UYCe+JADpdhgCYowa5kA0I2KAFcAtiRQAXSkOz9sADwxgJ+NPTbYuQ3BMnTZA+Y2yU4IwRO4A6SFBIrGVDGM7c+h46fNRLuKxJIGWh8MeT0ZfhYlCStpHzNsFBAMIQkIEQwJODAQfiEyfBE4eWw2fDgofDBMsAALfAA3KjgsXGxxZC4eAw0G-GhcWn9aY3wWZldu-g1mbGqJUoBaCRHEzrcDEgBrbAk62kXhXFxJ923d-cPRHEpTgyEoMDaqZdW7vKgoOfaSKgOKpqmDA+d4gB5fMA-P6LCCMLLQbiLOoYCqgh6-GDYRYIXYLSgkRZkCR4jpddwPfJLZjpOBkO4AX34kA0SRWxgABAAxYjsgC87OAAB0oOzReythU2Mh2YKQNyILLeMKxeymrgZNLhCIbsL6QBuYVs7DsgBCVD5AuVYolUClMpAZsoiqtorVGvZWpuSqg9OFMAeyjg0HZdTmW3lAAp5NKAPJoABWcwkAEppWZGLg4O12fJ2bSuTyhSKxSwJEJKCKAOQ2tiVvMi3MAMkbOasNb5vP5svlsoNPuFfoD8JFGQqUel8vZAB9TVReCHoHa0MRnlBUwWIJbi6K4DB2RHbGxk1uVSrd-uAIShsDh4hR5PHoun5-siS1SgQADuHuw34AotQECUBGsqysmfYvuyvrbqepblg2EFitBKpwRWOZ9vSuQgA0JgkEGUBJBk9gmCA9JAA
+ * https://www.typescriptlang.org/play/?#code/C4TwDgpgBAYg9nKBeKBvAUFLUDWBLAOwBMAuKAInjnIBpNsA3AQwBsBXCMgtgWwCMIAJ3QBfANzpQkKACEmg5GnpZ8xMuTmDayqM3aco3fkLoj0AMzYEAxsDxwCUawAsI1nFQAUADzJw+AFZuwACUZEwAzhFCwBFQ3lB4cVRK2InmUJ4AhJ4A5KpEuYmOCQBkpfEAdAXISCiUCOQhIalp2MDOgnAA7oYQvQCigl2CnuRWEN6QthBETTpmZhZWtvaOPEyEPmQpAD6y8jRODqRQfAgsEEwEYbAIrVh4GZ7WJy0Ybdgubh4IPiEST5YQQQYBsQQlQHYMxpEFgiHxCQiIA
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   [2]
+ *   [3]
+ * Forget:
+ *   (kind: ok)
+ *   [2]
+ *   [2,3]
+ */
+function useFoo({cond, value}: {cond: boolean; value: number}) {
+  const x = {value: cond ? CONST_NUMBER0 : []};
+  mutate(x);
+
+  const xValue = x.value;
+  let result;
+  if (typeof xValue === 'number') {
+    result = xValue + 1; //               (1) here we infer xValue is a primitive
+  } else {
+    result = arrayPush(xValue, value); // (2) and propagate it to all other xValue references
+  }
+
+  return result;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true}],
+  sequentialRenders: [
+    {cond: false, value: 2},
+    {cond: false, value: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.expect.md
new file mode 100644
index 00000000000..80c50cb653d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  return <div>{maybeMutate(maybeMutable)}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const maybeMutable = new MaybeMutable();
+    t0 = <div>{maybeMutate(maybeMutable)}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.js
new file mode 100644
index 00000000000..8b3fd76ca6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  return <div>{maybeMutate(maybeMutable)}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-assignment.expect.md
new file mode 100644
index 00000000000..6432d24ff09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-assignment.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = makeObject();
+  x.foo((x = makeObject()));
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = makeObject();
+    x.foo((x = makeObject()));
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-assignment.js
new file mode 100644
index 00000000000..dc686eea9e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-assignment.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  let x = makeObject();
+  x.foo((x = makeObject()));
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-destructuring-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-destructuring-assignment.expect.md
new file mode 100644
index 00000000000..e348b532447
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-destructuring-assignment.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = makeObject();
+  x.foo(([x] = makeObject()));
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = makeObject();
+    x.foo(([x] = makeObject()));
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-destructuring-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-destructuring-assignment.js
new file mode 100644
index 00000000000..e87fb49c347
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-args-destructuring-assignment.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  let x = makeObject();
+  x.foo(([x] = makeObject()));
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread-argument-mutable-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread-argument-mutable-iterator.expect.md
new file mode 100644
index 00000000000..74fb57b6bc2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread-argument-mutable-iterator.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+import {useIdentity} from 'shared-runtime';
+
+function useFoo() {
+  const it = new Set([1, 2]).values();
+  useIdentity();
+  return Math.max(...it);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useIdentity } from "shared-runtime";
+
+function useFoo() {
+  const it = new Set([1, 2]).values();
+  useIdentity();
+  return Math.max(...it);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
+2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread-argument-mutable-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread-argument-mutable-iterator.js
new file mode 100644
index 00000000000..1b30f0a46f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread-argument-mutable-iterator.js
@@ -0,0 +1,13 @@
+import {useIdentity} from 'shared-runtime';
+
+function useFoo() {
+  const it = new Set([1, 2]).values();
+  useIdentity();
+  return Math.max(...it);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread.expect.md
new file mode 100644
index 00000000000..2d7bc3f046e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  const x = makeArray(...props.a, null, ...props.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: [1, 2], b: [2, 3, 4]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    t0 = makeArray(...props.a, null, ...props.b);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: [1, 2], b: [2, 3, 4] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,2,null,2,3,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread.js
new file mode 100644
index 00000000000..8b7767c3bf8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-spread.js
@@ -0,0 +1,11 @@
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  const x = makeArray(...props.a, null, ...props.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: [1, 2], b: [2, 3, 4]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.expect.md
new file mode 100644
index 00000000000..8b9da4435b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeFunction(props);
+  const y = x(
+    <div>
+      <span>{props.text}</span>
+    </div>
+  );
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props) {
+    const x = makeFunction(props);
+    let t1;
+    if ($[2] !== props.text) {
+      t1 = (
+        <div>
+          <span>{props.text}</span>
+        </div>
+      );
+      $[2] = props.text;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    t0 = x(t1);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const y = t0;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.js
new file mode 100644
index 00000000000..0675b442875
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const x = makeFunction(props);
+  const y = x(
+    <div>
+      <span>{props.text}</span>
+    </div>
+  );
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md
new file mode 100644
index 00000000000..4482eab8e6a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  foo(a, b);
+  let _ = <div a={a} />;
+  foo(b);
+  return <div a={a} b={b} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {}
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = [];
+    const b = {};
+    foo(a, b);
+    foo(b);
+    t0 = <div a={a} b={b} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.js
new file mode 100644
index 00000000000..d0c79ac7663
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.js
@@ -0,0 +1,10 @@
+function foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  foo(a, b);
+  let _ = <div a={a} />;
+  foo(b);
+  return <div a={a} b={b} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md
new file mode 100644
index 00000000000..1d95318e5c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateNoCapitalizedCalls @hookPattern:".*\b(use[^$]+)$"
+import * as React from 'react';
+const React$useState = React.useState;
+const THIS_IS_A_CONSTANT = () => {};
+function Component() {
+  const b = Boolean(true); // OK
+  const n = Number(3); // OK
+  const s = String('foo'); // OK
+  const [state, setState] = React$useState(0); // OK
+  const [state2, setState2] = React.useState(1); // OK
+  const constant = THIS_IS_A_CONSTANT(); // OK
+  return 3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoCapitalizedCalls @hookPattern:".*\b(use[^$]+)$"
+import * as React from "react";
+const React$useState = React.useState;
+const THIS_IS_A_CONSTANT = () => {};
+function Component() {
+  Boolean(true);
+  Number(3);
+  String("foo");
+  React$useState(0);
+  React.useState(1);
+  THIS_IS_A_CONSTANT();
+  return 3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) 3
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.js
new file mode 100644
index 00000000000..59fdf7c5d07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.js
@@ -0,0 +1,19 @@
+// @validateNoCapitalizedCalls @hookPattern:".*\b(use[^$]+)$"
+import * as React from 'react';
+const React$useState = React.useState;
+const THIS_IS_A_CONSTANT = () => {};
+function Component() {
+  const b = Boolean(true); // OK
+  const n = Number(3); // OK
+  const s = String('foo'); // OK
+  const [state, setState] = React$useState(0); // OK
+  const [state2, setState2] = React.useState(1); // OK
+  const constant = THIS_IS_A_CONSTANT(); // OK
+  return 3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias-iife.expect.md
new file mode 100644
index 00000000000..09761587ed4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias-iife.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let x = {a};
+  (function () {
+    let q = x;
+    (function () {
+      q.b = 1;
+    })();
+  })();
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== a) {
+    x = { a };
+
+    const q = x;
+    (function () {
+      q.b = 1;
+    })();
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [2],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2,"b":1}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias-iife.js
new file mode 100644
index 00000000000..93fc2a545c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias-iife.js
@@ -0,0 +1,16 @@
+function component(a) {
+  let x = {a};
+  (function () {
+    let q = x;
+    (function () {
+      q.b = 1;
+    })();
+  })();
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md
new file mode 100644
index 00000000000..b753ebc9782
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let x = {a};
+  const f0 = function () {
+    let q = x;
+    const f1 = function () {
+      q.b = 1;
+    };
+    f1();
+  };
+  f0();
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== a) {
+    x = { a };
+    const f0 = function () {
+      const q = x;
+      const f1 = function () {
+        q.b = 1;
+      };
+
+      f1();
+    };
+
+    f0();
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.js
new file mode 100644
index 00000000000..9e90794288f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.js
@@ -0,0 +1,19 @@
+function component(a) {
+  let x = {a};
+  const f0 = function () {
+    let q = x;
+    const f1 = function () {
+      q.b = 1;
+    };
+    f1();
+  };
+  f0();
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.expect.md
new file mode 100644
index 00000000000..9d3623b849a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+function getNativeLogFunction(level) {
+  return function () {
+    let str;
+    if (arguments.length === 1 && typeof arguments[0] === 'string') {
+      str = arguments[0];
+    } else {
+      str = Array.prototype.map
+        .call(arguments, function (arg) {
+          return inspect(arg, {
+            depth: 10,
+          });
+        })
+        .join(', ');
+    }
+    const firstArg = arguments[0];
+    let logLevel = level;
+    if (
+      typeof firstArg === 'string' &&
+      firstArg.slice(0, 9) === 'Warning: ' &&
+      logLevel >= LOG_LEVELS.error
+    ) {
+      logLevel = LOG_LEVELS.warn;
+    }
+    if (global.__inspectorLog) {
+      global.__inspectorLog(
+        INSPECTOR_LEVELS[logLevel],
+        str,
+        [].slice.call(arguments),
+        INSPECTOR_FRAMES_TO_SKIP
+      );
+    }
+    if (groupStack.length) {
+      str = groupFormat('', str);
+    }
+    global.nativeLoggingHook(str, logLevel);
+  };
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function getNativeLogFunction(level) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== level) {
+    t0 = function () {
+      let str;
+      if (arguments.length === 1 && typeof arguments[0] === "string") {
+        str = arguments[0];
+      } else {
+        str = Array.prototype.map.call(arguments, _temp).join(", ");
+      }
+
+      const firstArg = arguments[0];
+      let logLevel = level;
+      if (
+        typeof firstArg === "string" &&
+        firstArg.slice(0, 9) === "Warning: " &&
+        logLevel >= LOG_LEVELS.error
+      ) {
+        logLevel = LOG_LEVELS.warn;
+      }
+
+      if (global.__inspectorLog) {
+        global.__inspectorLog(
+          INSPECTOR_LEVELS[logLevel],
+          str,
+          [].slice.call(arguments),
+          INSPECTOR_FRAMES_TO_SKIP,
+        );
+      }
+
+      if (groupStack.length) {
+        str = groupFormat("", str);
+      }
+
+      global.nativeLoggingHook(str, logLevel);
+    };
+    $[0] = level;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(arg) {
+  return inspect(arg, { depth: 10 });
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.js
new file mode 100644
index 00000000000..8ea15a0994b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.js
@@ -0,0 +1,37 @@
+function getNativeLogFunction(level) {
+  return function () {
+    let str;
+    if (arguments.length === 1 && typeof arguments[0] === 'string') {
+      str = arguments[0];
+    } else {
+      str = Array.prototype.map
+        .call(arguments, function (arg) {
+          return inspect(arg, {
+            depth: 10,
+          });
+        })
+        .join(', ');
+    }
+    const firstArg = arguments[0];
+    let logLevel = level;
+    if (
+      typeof firstArg === 'string' &&
+      firstArg.slice(0, 9) === 'Warning: ' &&
+      logLevel >= LOG_LEVELS.error
+    ) {
+      logLevel = LOG_LEVELS.warn;
+    }
+    if (global.__inspectorLog) {
+      global.__inspectorLog(
+        INSPECTOR_LEVELS[logLevel],
+        str,
+        [].slice.call(arguments),
+        INSPECTOR_FRAMES_TO_SKIP
+      );
+    }
+    if (groupStack.length) {
+      str = groupFormat('', str);
+    }
+    global.nativeLoggingHook(str, logLevel);
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
new file mode 100644
index 00000000000..158d31faca2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { addOne } from "shared-runtime";
+
+function useKeyCommand() {
+  const $ = _c(1);
+  const currentPosition = useRef(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
+    const moveLeft = { handler: handleKey("left") };
+    const moveRight = { handler: handleKey("right") };
+    t0 = [moveLeft, moveRight];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"handler":"[[ function params=0 ]]"},{"handler":"[[ function params=0 ]]"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.tsx
new file mode 100644
index 00000000000..7d8c223baaf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.tsx
@@ -0,0 +1,23 @@
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns-iife.expect.md
new file mode 100644
index 00000000000..342658ce238
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns-iife.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  (function () {
+    (function () {
+      z.b = 1;
+    })();
+  })();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let z;
+  if ($[0] !== a) {
+    z = { a };
+
+    (function () {
+      z.b = 1;
+    })();
+    $[0] = a;
+    $[1] = z;
+  } else {
+    z = $[1];
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [2],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2,"b":1}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns-iife.js
new file mode 100644
index 00000000000..c738e5ce5d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns-iife.js
@@ -0,0 +1,14 @@
+function component(a) {
+  let z = {a};
+  (function () {
+    (function () {
+      z.b = 1;
+    })();
+  })();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md
new file mode 100644
index 00000000000..0fd96063a60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  const f0 = function () {
+    const f1 = function () {
+      z.b = 1;
+    };
+    f1();
+  };
+  f0();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let z;
+  if ($[0] !== a) {
+    z = { a };
+    const f0 = function () {
+      const f1 = function () {
+        z.b = 1;
+      };
+
+      f1();
+    };
+
+    f0();
+    $[0] = a;
+    $[1] = z;
+  } else {
+    z = $[1];
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.js
new file mode 100644
index 00000000000..e263dc8d509
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.js
@@ -0,0 +1,17 @@
+function component(a) {
+  let z = {a};
+  const f0 = function () {
+    const f1 = function () {
+      z.b = 1;
+    };
+    f1();
+  };
+  f0();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.expect.md
new file mode 100644
index 00000000000..85950edabac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  let x = () => {
+    console.log(z);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    const z = { a };
+    t0 = () => {
+      console.log(z);
+    };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.js
new file mode 100644
index 00000000000..2b5f720b2f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.js
@@ -0,0 +1,13 @@
+function component(a) {
+  let z = {a};
+  let x = () => {
+    console.log(z);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md
new file mode 100644
index 00000000000..5e0b32709b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = {y};
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function component(foo, bar) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== bar || $[1] !== foo) {
+    x = { foo };
+    const y = { bar };
+
+    const a = { y };
+    const b = x;
+    a.x = b;
+
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo", "bar"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"foo":"foo"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.js
new file mode 100644
index 00000000000..749cbc0147b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.js
@@ -0,0 +1,18 @@
+import {mutate} from 'shared-runtime';
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = {y};
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md
new file mode 100644
index 00000000000..061e64222ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = {y};
+    let b = x;
+    a.x = b;
+  };
+  f0();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let x;
+  if ($[0] !== bar || $[1] !== foo) {
+    x = { foo };
+    const y = { bar };
+    const f0 = function () {
+      const a = { y };
+      const b = x;
+      a.x = b;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 2, bar: 3 }],
+  sequentialRenders: [
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 4 },
+    { foo: 3, bar: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"foo":2}
+{"foo":2}
+{"foo":2}
+{"foo":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.js
new file mode 100644
index 00000000000..8579e8c4943
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.js
@@ -0,0 +1,25 @@
+import {mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = {y};
+    let b = x;
+    a.x = b;
+  };
+  f0();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md
new file mode 100644
index 00000000000..81737a1ed50
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(foo, bar) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== bar || $[1] !== foo) {
+    x = { foo };
+    const y = { bar };
+
+    const a = [y];
+    const b = x;
+    a.x = b;
+
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo", "bar"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"foo":"foo"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.js
new file mode 100644
index 00000000000..6fb34a8ffc1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.js
@@ -0,0 +1,18 @@
+const {mutate} = require('shared-runtime');
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md
new file mode 100644
index 00000000000..fb44f2c7b8f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  };
+  f0();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let x;
+  if ($[0] !== bar || $[1] !== foo) {
+    x = { foo };
+    const y = { bar };
+    const f0 = function () {
+      const a = [y];
+      const b = x;
+      a.x = b;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 2, bar: 3 }],
+  sequentialRenders: [
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 4 },
+    { foo: 3, bar: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"foo":2}
+{"foo":2}
+{"foo":2}
+{"foo":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.js
new file mode 100644
index 00000000000..24dddd4910e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.js
@@ -0,0 +1,25 @@
+import {mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  };
+  f0();
+  mutate(y);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md
new file mode 100644
index 00000000000..4882aa822f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(foo, bar) {
+  const $ = _c(3);
+  let y;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    y = { bar };
+
+    const a = [y];
+    const b = x;
+    a.x = b;
+
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo", "bar"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"bar":"bar","wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.js
new file mode 100644
index 00000000000..0b96492497a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.js
@@ -0,0 +1,18 @@
+const {mutate} = require('shared-runtime');
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md
new file mode 100644
index 00000000000..e9cb3c4fd14
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let y;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    y = { bar };
+    const f0 = function () {
+      const a = [y];
+      const b = x;
+      a.x = b;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 2, bar: 3 }],
+  sequentialRenders: [
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 4 },
+    { foo: 3, bar: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"bar":3,"wat0":"joe"}
+{"bar":3,"wat0":"joe"}
+{"bar":4,"wat0":"joe"}
+{"bar":4,"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.js
new file mode 100644
index 00000000000..f757078e732
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.js
@@ -0,0 +1,24 @@
+import {mutate} from 'shared-runtime';
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = [y];
+    let b = x;
+    a.x = b;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md
new file mode 100644
index 00000000000..60493dd25ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = {y};
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(foo, bar) {
+  const $ = _c(3);
+  let y;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    y = { bar };
+
+    const a = { y };
+    const b = x;
+    a.x = b;
+
+    mutate(y);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo", "bar"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"bar":"bar","wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.js
new file mode 100644
index 00000000000..29b988c09bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.js
@@ -0,0 +1,18 @@
+const {mutate} = require('shared-runtime');
+
+function component(foo, bar) {
+  let x = {foo};
+  let y = {bar};
+  (function () {
+    let a = {y};
+    let b = x;
+    a.x = b;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo', 'bar'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md
new file mode 100644
index 00000000000..9a98f76b971
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = [y];
+    let b = x;
+    // this writes y.x = x
+    a[0].x = b;
+  };
+  f0();
+  mutate(y.x);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 3, bar: 4}],
+  sequentialRenders: [
+    {foo: 3, bar: 4},
+    {foo: 3, bar: 5},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let y;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    y = { bar };
+    const f0 = function () {
+      const a = [y];
+      const b = x;
+
+      a[0].x = b;
+    };
+
+    f0();
+    mutate(y.x);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 3, bar: 4 }],
+  sequentialRenders: [
+    { foo: 3, bar: 4 },
+    { foo: 3, bar: 5 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+{"bar":5,"x":{"foo":3,"wat0":"joe"}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.js
new file mode 100644
index 00000000000..b88ad567184
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.js
@@ -0,0 +1,24 @@
+import {mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = [y];
+    let b = x;
+    // this writes y.x = x
+    a[0].x = b;
+  };
+  f0();
+  mutate(y.x);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 3, bar: 4}],
+  sequentialRenders: [
+    {foo: 3, bar: 4},
+    {foo: 3, bar: 5},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md
new file mode 100644
index 00000000000..f44c24650cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    y['x'] = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+
+    y.x = x;
+
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":"foo"},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.js
new file mode 100644
index 00000000000..a3e74b613f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.js
@@ -0,0 +1,16 @@
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    y['x'] = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md
new file mode 100644
index 00000000000..513718ba860
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    y['x'] = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+    const f0 = function () {
+      y.x = x;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":2},"wat0":"joe"}
+{"x":{"a":2},"wat0":"joe"}
+{"x":{"a":3},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.js
new file mode 100644
index 00000000000..daa4fffb28d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.js
@@ -0,0 +1,17 @@
+import {mutate} from 'shared-runtime';
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    y['x'] = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md
new file mode 100644
index 00000000000..1a9dac53bf0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    y.x = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+
+    y.x = x;
+
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":"foo"},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.js
new file mode 100644
index 00000000000..88e269046f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.js
@@ -0,0 +1,16 @@
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    y.x = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md
new file mode 100644
index 00000000000..ae145f4d9e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    y.x = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+    const f0 = function () {
+      y.x = x;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":2},"wat0":"joe"}
+{"x":{"a":2},"wat0":"joe"}
+{"x":{"a":3},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.js
new file mode 100644
index 00000000000..524dc8af356
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.js
@@ -0,0 +1,17 @@
+import {mutate} from 'shared-runtime';
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    y.x = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md
new file mode 100644
index 00000000000..448078a9b5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    let a = y;
+    a['x'] = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+
+    const a_0 = y;
+    a_0.x = x;
+
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":"foo"},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.js
new file mode 100644
index 00000000000..e212df190d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.js
@@ -0,0 +1,17 @@
+import {mutate} from 'shared-runtime';
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    let a = y;
+    a['x'] = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md
new file mode 100644
index 00000000000..d65e9cca927
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    let a = y;
+    a['x'] = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+    const f0 = function () {
+      const a_0 = y;
+      a_0.x = x;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":2},"wat0":"joe"}
+{"x":{"a":2},"wat0":"joe"}
+{"x":{"a":3},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.js
new file mode 100644
index 00000000000..b4f645846c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.js
@@ -0,0 +1,19 @@
+import {mutate} from 'shared-runtime';
+
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    let a = y;
+    a['x'] = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md
new file mode 100644
index 00000000000..3acc6eac15d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    let a = y;
+    a.x = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+
+    const a_0 = y;
+    a_0.x = x;
+
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":"foo"},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.js
new file mode 100644
index 00000000000..fc716170f1d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.js
@@ -0,0 +1,17 @@
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    let a = y;
+    a.x = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md
new file mode 100644
index 00000000000..deb78c79e08
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    let a = y;
+    a.x = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+    const f0 = function () {
+      const a_0 = y;
+      a_0.x = x;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":{"a":2},"wat0":"joe"}
+{"x":{"a":2},"wat0":"joe"}
+{"x":{"a":3},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.js
new file mode 100644
index 00000000000..a82df6b27ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.js
@@ -0,0 +1,19 @@
+import {mutate} from 'shared-runtime';
+
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    let a = y;
+    a.x = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md
new file mode 100644
index 00000000000..6836544c5d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let y = {b};
+  let z = {a};
+  let x = function () {
+    z.a = 2;
+    y.b;
+  };
+  x();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{a: 'val1', b: 'val2'}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a, b) {
+  const $ = _c(2);
+  let z;
+  if ($[0] !== a) {
+    z = { a };
+    const x = function () {
+      z.a = 2;
+    };
+
+    x();
+    $[0] = a;
+    $[1] = z;
+  } else {
+    z = $[1];
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{ a: "val1", b: "val2" }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.js
new file mode 100644
index 00000000000..91ef51bc7ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.js
@@ -0,0 +1,16 @@
+function component(a, b) {
+  let y = {b};
+  let z = {a};
+  let x = function () {
+    z.a = 2;
+    y.b;
+  };
+  x();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{a: 'val1', b: 'val2'}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-3.expect.md
new file mode 100644
index 00000000000..cf18b29ab51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-3.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let y = {b};
+  let z = {a};
+  let x = function () {
+    z.a = 2;
+    y.b;
+  };
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a, b) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-3.js
new file mode 100644
index 00000000000..2528d43d6f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-3.js
@@ -0,0 +1,15 @@
+function component(a, b) {
+  let y = {b};
+  let z = {a};
+  let x = function () {
+    z.a = 2;
+    y.b;
+  };
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md
new file mode 100644
index 00000000000..566b02e1719
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let y = {b: {a}};
+  let x = function () {
+    y.b.a = 2;
+  };
+  x();
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    y = { b: { a } };
+    const x = function () {
+      y.b.a = 2;
+    };
+
+    x();
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.js
new file mode 100644
index 00000000000..e9230c60235
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.js
@@ -0,0 +1,14 @@
+function component(a) {
+  let y = {b: {a}};
+  let x = function () {
+    y.b.a = 2;
+  };
+  x();
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md
new file mode 100644
index 00000000000..03c0db7e971
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({a, b}) {
+  let z = {a};
+  let y = {b: {b}};
+  let x = function () {
+    z.a = 2;
+    mutate(y.b);
+  };
+  x();
+  return [y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 4, b: 3},
+    {a: 4, b: 5},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const z = { a };
+    const y = { b: { b } };
+    const x = function () {
+      z.a = 2;
+      mutate(y.b);
+    };
+    x();
+    t1 = [y, z];
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2, b: 3 }],
+  sequentialRenders: [
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+    { a: 4, b: 3 },
+    { a: 4, b: 5 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"b":{"b":3,"wat0":"joe"}},{"a":2}]
+[{"b":{"b":3,"wat0":"joe"}},{"a":2}]
+[{"b":{"b":3,"wat0":"joe"}},{"a":2}]
+[{"b":{"b":5,"wat0":"joe"}},{"a":2}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.js
new file mode 100644
index 00000000000..2ec7bcbe86c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.js
@@ -0,0 +1,23 @@
+import {mutate} from 'shared-runtime';
+
+function Component({a, b}) {
+  let z = {a};
+  let y = {b: {b}};
+  let x = function () {
+    z.a = 2;
+    mutate(y.b);
+  };
+  x();
+  return [y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 4, b: 3},
+    {a: 4, b: 5},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-no-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-no-mutate.expect.md
new file mode 100644
index 00000000000..14bf94e770a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-no-mutate.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+function Component({a, b}) {
+  let z = {a};
+  let y = {b};
+  let x = function () {
+    z.a = 2;
+    return Math.max(y.b, 0);
+  };
+  x();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 4, b: 3},
+    {a: 4, b: 5},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(5);
+  const { a, b } = t0;
+  let z;
+  if ($[0] !== a || $[1] !== b) {
+    z = { a };
+    let t1;
+    if ($[3] !== b) {
+      t1 = { b };
+      $[3] = b;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    const y = t1;
+    const x = function () {
+      z.a = 2;
+      return Math.max(y.b, 0);
+    };
+
+    x();
+    $[0] = a;
+    $[1] = b;
+    $[2] = z;
+  } else {
+    z = $[2];
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2, b: 3 }],
+  sequentialRenders: [
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+    { a: 4, b: 3 },
+    { a: 4, b: 5 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2}
+{"a":2}
+{"a":2}
+{"a":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-no-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-no-mutate.js
new file mode 100644
index 00000000000..8fe3bb3db52
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-no-mutate.js
@@ -0,0 +1,21 @@
+function Component({a, b}) {
+  let z = {a};
+  let y = {b};
+  let x = function () {
+    z.a = 2;
+    return Math.max(y.b, 0);
+  };
+  x();
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 4, b: 3},
+    {a: 4, b: 5},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md
new file mode 100644
index 00000000000..a071dddba6b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    y = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+
+    y = x;
+
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["foo"],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":"foo","wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.js
new file mode 100644
index 00000000000..e8b829c23c8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.js
@@ -0,0 +1,16 @@
+const {mutate} = require('shared-runtime');
+
+function component(a) {
+  let x = {a};
+  let y = {};
+  (function () {
+    y = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['foo'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md
new file mode 100644
index 00000000000..0e2d7702399
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    y = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = {};
+    const f0 = function () {
+      y = x;
+    };
+
+    f0();
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2,"wat0":"joe"}
+{"a":2,"wat0":"joe"}
+{"a":3,"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.js
new file mode 100644
index 00000000000..22764fec72e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.js
@@ -0,0 +1,18 @@
+import {mutate} from 'shared-runtime';
+
+function Component({a}) {
+  let x = {a};
+  let y = {};
+  const f0 = function () {
+    y = x;
+  };
+  f0();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.expect.md
new file mode 100644
index 00000000000..41732aed0d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  let x = function () {
+    console.log(z);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    const z = { a };
+    t0 = function () {
+      console.log(z);
+    };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.js
new file mode 100644
index 00000000000..ed0f9961b13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.js
@@ -0,0 +1,13 @@
+function component(a) {
+  let z = {a};
+  let x = function () {
+    console.log(z);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2-iife.expect.md
new file mode 100644
index 00000000000..50480f1b251
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2-iife.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0][1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== x[0][1]) {
+    y = {};
+
+    y = x[0][1];
+    $[2] = x[0][1];
+    $[3] = y;
+  } else {
+    y = $[3];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [["val1", "val2"]],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "val2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2-iife.js
new file mode 100644
index 00000000000..4c224e28415
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2-iife.js
@@ -0,0 +1,15 @@
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0][1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2.expect.md
new file mode 100644
index 00000000000..94ce606f810
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function bar(a) {
+  let x = [a];
+  let y = {};
+  const f0 = function () {
+    y = x[0][1];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = [a];
+    y = {};
+    const f0 = function () {
+      y = x[0][1];
+    };
+
+    f0();
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [["val1", "val2"]],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "val2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2.js
new file mode 100644
index 00000000000..2c385ffd0db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-2.js
@@ -0,0 +1,16 @@
+function bar(a) {
+  let x = [a];
+  let y = {};
+  const f0 = function () {
+    y = x[0][1];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md
new file mode 100644
index 00000000000..9678918b3d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+function bar(a, b) {
+  let x = [a, b];
+  let y = {};
+  let t = {};
+  (function () {
+    y = x[0][1];
+    t = x[1][0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a, b) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== a || $[1] !== b) {
+    t0 = [a, b];
+    $[0] = a;
+    $[1] = b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  let y;
+  if ($[3] !== x[0][1] || $[4] !== x[1][0]) {
+    y = {};
+    let t = {};
+
+    y = x[0][1];
+    t = x[1][0];
+    $[3] = x[0][1];
+    $[4] = x[1][0];
+    $[5] = y;
+  } else {
+    y = $[5];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.js
new file mode 100644
index 00000000000..1afc28a9922
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.js
@@ -0,0 +1,19 @@
+function bar(a, b) {
+  let x = [a, b];
+  let y = {};
+  let t = {};
+  (function () {
+    y = x[0][1];
+    t = x[1][0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3.expect.md
new file mode 100644
index 00000000000..238b748e346
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function bar(a, b) {
+  let x = [a, b];
+  let y = {};
+  let t = {};
+  const f0 = function () {
+    y = x[0][1];
+    t = x[1][0];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a, b) {
+  const $ = _c(3);
+  let y;
+  if ($[0] !== a || $[1] !== b) {
+    const x = [a, b];
+    y = {};
+    let t = {};
+    const f0 = function () {
+      y = x[0][1];
+      t = x[1][0];
+    };
+
+    f0();
+    $[0] = a;
+    $[1] = b;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3.js
new file mode 100644
index 00000000000..3e92916e673
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3.js
@@ -0,0 +1,20 @@
+function bar(a, b) {
+  let x = [a, b];
+  let y = {};
+  let t = {};
+  const f0 = function () {
+    y = x[0][1];
+    t = x[1][0];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4-iife.expect.md
new file mode 100644
index 00000000000..edddf3715a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4-iife.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0].a[1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{a: ['val1', 'val2']}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== x[0].a[1]) {
+    y = {};
+
+    y = x[0].a[1];
+    $[2] = x[0].a[1];
+    $[3] = y;
+  } else {
+    y = $[3];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{ a: ["val1", "val2"] }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "val2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4-iife.js
new file mode 100644
index 00000000000..ca479a74589
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4-iife.js
@@ -0,0 +1,15 @@
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0].a[1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{a: ['val1', 'val2']}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4.expect.md
new file mode 100644
index 00000000000..7016d9f3ae4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function bar(a) {
+  let x = [a];
+  let y = {};
+  const f0 = function () {
+    y = x[0].a[1];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{a: ['val1', 'val2']}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = [a];
+    y = {};
+    const f0 = function () {
+      y = x[0].a[1];
+    };
+
+    f0();
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{ a: ["val1", "val2"] }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "val2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4.js
new file mode 100644
index 00000000000..861a4f3d14b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-4.js
@@ -0,0 +1,16 @@
+function bar(a) {
+  let x = [a];
+  let y = {};
+  const f0 = function () {
+    y = x[0].a[1];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{a: ['val1', 'val2']}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-iife.expect.md
new file mode 100644
index 00000000000..c9ce6dda9f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-iife.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ['TodoAdd'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== x[0]) {
+    y = {};
+
+    y = x[0];
+    $[2] = x[0];
+    $[3] = y;
+  } else {
+    y = $[3];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ["TodoAdd"],
+};
+
+```
+      
+### Eval output
+(kind: ok) "TodoAdd"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-iife.js
new file mode 100644
index 00000000000..9a0c7c19aa7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-iife.js
@@ -0,0 +1,14 @@
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ['TodoAdd'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md
new file mode 100644
index 00000000000..df33a11ad29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+function bar(a) {
+  let x = [a];
+  let y = {};
+  const f0 = function () {
+    y = x[0];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function bar(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    const x = [a];
+    y = {};
+    const f0 = function () {
+      y = x[0];
+    };
+
+    f0();
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.js
new file mode 100644
index 00000000000..7abf7c093e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.js
@@ -0,0 +1,16 @@
+function bar(a) {
+  let x = [a];
+  let y = {};
+  const f0 = function () {
+    y = x[0];
+  };
+  f0();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-capture-ref-before-rename.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-capture-ref-before-rename.expect.md
new file mode 100644
index 00000000000..6364e83deb9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-capture-ref-before-rename.expect.md
@@ -0,0 +1,95 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function Component({a, b}) {
+  let z = {a};
+  (function () {
+    mutate(z);
+  })();
+  let y = z;
+
+  {
+    // z is shadowed & renamed but the lambda is unaffected.
+    let z = {b};
+    y = {y, z};
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 2, b: 4},
+    {a: 3, b: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { a, b } = t0;
+  let z;
+  if ($[0] !== a) {
+    z = { a };
+
+    mutate(z);
+    $[0] = a;
+    $[1] = z;
+  } else {
+    z = $[1];
+  }
+
+  let y = z;
+  let t1;
+  if ($[2] !== b) {
+    t1 = { b };
+    $[2] = b;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const z_0 = t1;
+  let t2;
+  if ($[4] !== y || $[5] !== z_0) {
+    t2 = { y, z: z_0 };
+    $[4] = y;
+    $[5] = z_0;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  y = t2;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2, b: 3 }],
+  sequentialRenders: [
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+    { a: 2, b: 4 },
+    { a: 3, b: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":{"a":2,"wat0":"joe"},"z":{"b":3}}
+{"y":{"a":2,"wat0":"joe"},"z":{"b":3}}
+{"y":{"a":2,"wat0":"joe"},"z":{"b":4}}
+{"y":{"a":3,"wat0":"joe"},"z":{"b":4}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-capture-ref-before-rename.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-capture-ref-before-rename.js
new file mode 100644
index 00000000000..b13e563ea82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-capture-ref-before-rename.js
@@ -0,0 +1,27 @@
+import {mutate} from 'shared-runtime';
+
+function Component({a, b}) {
+  let z = {a};
+  (function () {
+    mutate(z);
+  })();
+  let y = z;
+
+  {
+    // z is shadowed & renamed but the lambda is unaffected.
+    let z = {b};
+    y = {y, z};
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 2, b: 4},
+    {a: 3, b: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md
new file mode 100644
index 00000000000..c42aa4c48c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function useHook(a, b) {
+  let z = {a};
+  let y = b;
+  let x = function () {
+    if (y) {
+      // we don't know for sure this mutates, so we should assume
+      // that there is no mutation so long as `x` isn't called
+      // during render
+      maybeMutate(z);
+    }
+  };
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useHook(a, b) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  const y = b;
+  let t1;
+  if ($[2] !== y || $[3] !== z) {
+    t1 = function () {
+      if (y) {
+        maybeMutate(z);
+      }
+    };
+    $[2] = y;
+    $[3] = z;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const x = t1;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.js
new file mode 100644
index 00000000000..04d6ca29e1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.js
@@ -0,0 +1,13 @@
+function useHook(a, b) {
+  let z = {a};
+  let y = b;
+  let x = function () {
+    if (y) {
+      // we don't know for sure this mutates, so we should assume
+      // that there is no mutation so long as `x` isn't called
+      // during render
+      maybeMutate(z);
+    }
+  };
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md
new file mode 100644
index 00000000000..a023d50236d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let t = {a};
+  function x() {
+    t.foo();
+  }
+  x(t);
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t;
+  if ($[0] !== a) {
+    t = { a };
+    const x = function x() {
+      t.foo();
+    };
+
+    x(t);
+    $[0] = a;
+    $[1] = t;
+  } else {
+    t = $[1];
+  }
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.js
new file mode 100644
index 00000000000..f8d1e184b3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.js
@@ -0,0 +1,14 @@
+function component(a) {
+  let t = {a};
+  function x() {
+    t.foo();
+  }
+  x(t);
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.expect.md
new file mode 100644
index 00000000000..5a2c68b63c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  const onFoo = useCallback(
+    reason => {
+      log(props.router.location);
+    },
+    [props.router.location]
+  );
+
+  return onFoo;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.router.location) {
+    t0 = (reason) => {
+      log(props.router.location);
+    };
+    $[0] = props.router.location;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onFoo = t0;
+  return onFoo;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.js
new file mode 100644
index 00000000000..ed8ddd804e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.js
@@ -0,0 +1,10 @@
+function Foo(props) {
+  const onFoo = useCallback(
+    reason => {
+      log(props.router.location);
+    },
+    [props.router.location]
+  );
+
+  return onFoo;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.expect.md
new file mode 100644
index 00000000000..cab9c9a500b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function component({mutator}) {
+  const poke = () => {
+    mutator.poke();
+  };
+
+  const hide = () => {
+    mutator.user.hide();
+  };
+
+  return <Foo poke={poke} hide={hide}></Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(t0) {
+  const $ = _c(7);
+  const { mutator } = t0;
+  let t1;
+  if ($[0] !== mutator) {
+    t1 = () => {
+      mutator.poke();
+    };
+    $[0] = mutator;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const poke = t1;
+  let t2;
+  if ($[2] !== mutator.user) {
+    t2 = () => {
+      mutator.user.hide();
+    };
+    $[2] = mutator.user;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const hide = t2;
+  let t3;
+  if ($[4] !== hide || $[5] !== poke) {
+    t3 = <Foo poke={poke} hide={hide} />;
+    $[4] = hide;
+    $[5] = poke;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.js
new file mode 100644
index 00000000000..f2c7e900e3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.js
@@ -0,0 +1,11 @@
+function component({mutator}) {
+  const poke = () => {
+    mutator.poke();
+  };
+
+  const hide = () => {
+    mutator.user.hide();
+  };
+
+  return <Foo poke={poke} hide={hide}></Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md
new file mode 100644
index 00000000000..034e9781b23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function useHook({a, b}) {
+  let z = {a};
+  {
+    let z = {b};
+    (function () {
+      mutate(z);
+    })();
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 2, b: 4},
+    {a: 3, b: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(2);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const z = t1;
+
+  const z_0 = { b };
+
+  mutate(z_0);
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ a: 2, b: 3 }],
+  sequentialRenders: [
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+    { a: 2, b: 4 },
+    { a: 3, b: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2}
+{"a":2}
+{"a":2}
+{"a":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.js
new file mode 100644
index 00000000000..49595f19d7e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.js
@@ -0,0 +1,23 @@
+import {mutate} from 'shared-runtime';
+
+function useHook({a, b}) {
+  let z = {a};
+  {
+    let z = {b};
+    (function () {
+      mutate(z);
+    })();
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 2, b: 4},
+    {a: 3, b: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.expect.md
new file mode 100644
index 00000000000..31b80bcda3b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+function Component({a, b}) {
+  let z = {a};
+  let p = () => <Stringify>{z}</Stringify>;
+  return p();
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+  sequentialRenders: [{a: 1}, {a: 1}, {a: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a) {
+    const z = { a };
+    const p = () => <Stringify>{z}</Stringify>;
+    t1 = p();
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1 }],
+  sequentialRenders: [{ a: 1 }, { a: 1 }, { a: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":{"a":1}}</div>
+<div>{"children":{"a":1}}</div>
+<div>{"children":{"a":2}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.js
new file mode 100644
index 00000000000..d5a4bb842f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.js
@@ -0,0 +1,11 @@
+import {Stringify} from 'shared-runtime';
+function Component({a, b}) {
+  let z = {a};
+  let p = () => <Stringify>{z}</Stringify>;
+  return p();
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+  sequentialRenders: [{a: 1}, {a: 1}, {a: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-shadow-captured.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-shadow-captured.expect.md
new file mode 100644
index 00000000000..d409bd32965
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-shadow-captured.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {mutate, Stringify} from 'shared-runtime';
+function Component({a}) {
+  let z = {a};
+  let x = function () {
+    let z;
+    mutate(z);
+    return z;
+  };
+  return <Stringify fn={x} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+  sequentialRenders: [{a: 1}, {a: 1}, {a: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate, Stringify } from "shared-runtime";
+function Component(t0) {
+  const $ = _c(1);
+
+  const x = _temp;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <Stringify fn={x} shouldInvokeFns={true} />;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+function _temp() {
+  let z_0;
+  mutate(z_0);
+  return z_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1 }],
+  sequentialRenders: [{ a: 1 }, { a: 1 }, { a: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-shadow-captured.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-shadow-captured.js
new file mode 100644
index 00000000000..a0ce67e4d00
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-shadow-captured.js
@@ -0,0 +1,16 @@
+import {mutate, Stringify} from 'shared-runtime';
+function Component({a}) {
+  let z = {a};
+  let x = function () {
+    let z;
+    mutate(z);
+    return z;
+  };
+  return <Stringify fn={x} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+  sequentialRenders: [{a: 1}, {a: 1}, {a: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-skip-computed-path.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-skip-computed-path.expect.md
new file mode 100644
index 00000000000..89e69d0790b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-skip-computed-path.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function StoreLandingUnseenGiftModalContainer(a) {
+  const giftsSeen = {a};
+  return (gift => (gift.id ? giftsSeen[gift.id] : false))();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: StoreLandingUnseenGiftModalContainer,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function StoreLandingUnseenGiftModalContainer(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    const giftsSeen = { a };
+    t0 = ((gift) => (gift.id ? giftsSeen[gift.id] : false))();
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: StoreLandingUnseenGiftModalContainer,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-skip-computed-path.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-skip-computed-path.js
new file mode 100644
index 00000000000..48332e6e01d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-skip-computed-path.js
@@ -0,0 +1,10 @@
+function StoreLandingUnseenGiftModalContainer(a) {
+  const giftsSeen = {a};
+  return (gift => (gift.id ? giftsSeen[gift.id] : false))();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: StoreLandingUnseenGiftModalContainer,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md
new file mode 100644
index 00000000000..3507b7822ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  let x;
+  {
+    x = function () {
+      console.log(z);
+    };
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  let x;
+  let t1;
+  if ($[2] !== z) {
+    t1 = function () {
+      console.log(z);
+    };
+    $[2] = z;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.js
new file mode 100644
index 00000000000..72510bf9c37
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.js
@@ -0,0 +1,16 @@
+function component(a) {
+  let z = {a};
+  let x;
+  {
+    x = function () {
+      console.log(z);
+    };
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.expect.md
new file mode 100644
index 00000000000..fcf42fac8c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  let x = function () {
+    console.log(z.a);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  let t1;
+  if ($[2] !== z.a) {
+    t1 = function () {
+      console.log(z.a);
+    };
+    $[2] = z.a;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.js
new file mode 100644
index 00000000000..2305db93f9b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.js
@@ -0,0 +1,13 @@
+function component(a) {
+  let z = {a};
+  let x = function () {
+    console.log(z.a);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-call.expect.md
new file mode 100644
index 00000000000..ecb2c279925
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-call.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a: {a}};
+  let x = function () {
+    z.a.a();
+  };
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a: { a } };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-call.js
new file mode 100644
index 00000000000..a76a4b88a97
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-call.js
@@ -0,0 +1,13 @@
+function component(a) {
+  let z = {a: {a}};
+  let x = function () {
+    z.a.a();
+  };
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.expect.md
new file mode 100644
index 00000000000..e7d21da4284
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a: {a}};
+  let x = function () {
+    (function () {
+      console.log(z.a.a);
+    })();
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a: { a } };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  let t1;
+  if ($[2] !== z.a.a) {
+    t1 = function () {
+      (function () {
+        console.log(z.a.a);
+      })();
+    };
+    $[2] = z.a.a;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.js
new file mode 100644
index 00000000000..c814d21d6af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.js
@@ -0,0 +1,15 @@
+function component(a) {
+  let z = {a: {a}};
+  let x = function () {
+    (function () {
+      console.log(z.a.a);
+    })();
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.expect.md
new file mode 100644
index 00000000000..f8833784323
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a: {a}};
+  let x = function () {
+    console.log(z.a.a);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a: { a } };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  let t1;
+  if ($[2] !== z.a.a) {
+    t1 = function () {
+      console.log(z.a.a);
+    };
+    $[2] = z.a.a;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.js
new file mode 100644
index 00000000000..a9cdaa155ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.js
@@ -0,0 +1,13 @@
+function component(a) {
+  let z = {a: {a}};
+  let x = function () {
+    console.log(z.a.a);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md
new file mode 100644
index 00000000000..f5d4b94ae54
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+function Component({a}) {
+  let x = {a};
+  let y = 1;
+  (function () {
+    y = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let y;
+  if ($[0] !== a) {
+    const x = { a };
+    y = 1;
+
+    y = x;
+
+    mutate(y);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2,"wat0":"joe"}
+{"a":2,"wat0":"joe"}
+{"a":3,"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.js
new file mode 100644
index 00000000000..2b4b1b47ecc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.js
@@ -0,0 +1,16 @@
+import {mutate} from 'shared-runtime';
+function Component({a}) {
+  let x = {a};
+  let y = 1;
+  (function () {
+    y = x;
+  })();
+  mutate(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.expect.md
new file mode 100644
index 00000000000..ec8a96a3926
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  let x = function () {
+    {
+      console.log(z);
+    }
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    const z = { a };
+    t0 = function () {
+      console.log(z);
+    };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.js
new file mode 100644
index 00000000000..0b39d15c848
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.js
@@ -0,0 +1,15 @@
+function component(a) {
+  let z = {a};
+  let x = function () {
+    {
+      console.log(z);
+    }
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.expect.md
new file mode 100644
index 00000000000..ee41bc88f5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let z = {a};
+  let x = function () {
+    (function () {
+      console.log(z);
+    })();
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    const z = { a };
+    t0 = function () {
+      (function () {
+        console.log(z);
+      })();
+    };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.js
new file mode 100644
index 00000000000..63a5bf3d17c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.js
@@ -0,0 +1,15 @@
+function component(a) {
+  let z = {a};
+  let x = function () {
+    (function () {
+      console.log(z);
+    })();
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-context-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-context-variable.expect.md
new file mode 100644
index 00000000000..796b75b2ddb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-context-variable.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function Component() {
+  let x,
+    y = (x = {});
+  const foo = () => {
+    x = makeArray();
+  };
+  foo();
+  return [y, x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function Component() {
+  const $ = _c(3);
+  let x;
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    y = x = {};
+    const foo = () => {
+      x = makeArray();
+    };
+
+    foo();
+    $[0] = x;
+    $[1] = y;
+  } else {
+    x = $[0];
+    y = $[1];
+  }
+  let t0;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [y, x];
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-context-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-context-variable.js
new file mode 100644
index 00000000000..7d1ce184448
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-context-variable.js
@@ -0,0 +1,16 @@
+import {makeArray} from 'shared-runtime';
+
+function Component() {
+  let x,
+    y = (x = {});
+  const foo = () => {
+    x = makeArray();
+  };
+  foo();
+  return [y, x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md
new file mode 100644
index 00000000000..d3ab894d2af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = {x: 0};
+  const y = {z: 0};
+  const z = {z: 0};
+  x.x += y.y *= 1;
+  z.z += y.y *= x.x &= 3;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let z;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = { x: 0 };
+    const y = { z: 0 };
+    z = { z: 0 };
+    x.x = x.x + (y.y = y.y * 1);
+    z.z = z.z + (y.y = y.y * (x.x = x.x & 3));
+    $[0] = z;
+  } else {
+    z = $[0];
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"z":null}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.js
new file mode 100644
index 00000000000..1fb9bbef3c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.js
@@ -0,0 +1,14 @@
+function foo() {
+  const x = {x: 0};
+  const y = {z: 0};
+  const z = {z: 0};
+  x.x += y.y *= 1;
+  z.z += y.y *= x.x &= 3;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect-reassign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect-reassign.expect.md
new file mode 100644
index 00000000000..099faadcede
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect-reassign.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enableChangeDetectionForDebugging
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = [];
+    x.push(props.value);
+  }
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { $structuralCheck } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableChangeDetectionForDebugging
+function Component(props) {
+  const $ = _c(2);
+  let x = null;
+  if (props.cond) {
+    {
+      x = [];
+      x.push(props.value);
+      let condition = $[0] !== props.value;
+      if (!condition) {
+        let old$x = $[1];
+        $structuralCheck(old$x, x, "x", "Component", "cached", "(3:6)");
+      }
+      $[0] = props.value;
+      $[1] = x;
+      if (condition) {
+        x = [];
+        x.push(props.value);
+        $structuralCheck($[1], x, "x", "Component", "recomputed", "(3:6)");
+        x = $[1];
+      }
+    }
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect-reassign.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect-reassign.js
new file mode 100644
index 00000000000..8ccc3d30f09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect-reassign.js
@@ -0,0 +1,9 @@
+// @enableChangeDetectionForDebugging
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = [];
+    x.push(props.value);
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md
new file mode 100644
index 00000000000..175a590be5b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+class Component {
+  _renderMessage = () => {
+    const Message = () => {
+      const message = this.state.message;
+      return <div>{message}</div>;
+    };
+    return <Message />;
+  };
+
+  render() {
+    return this._renderMessage();
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+class Component {
+  _renderMessage = () => {
+    const Message = () => {
+      const message = this.state.message;
+      return <div>{message}</div>;
+    };
+    return <Message />;
+  };
+
+  render() {
+    return this._renderMessage();
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.js
new file mode 100644
index 00000000000..324945eb2a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.js
@@ -0,0 +1,14 @@
+// @expectNothingCompiled @compilationMode:"infer"
+class Component {
+  _renderMessage = () => {
+    const Message = () => {
+      const message = this.state.message;
+      return <div>{message}</div>;
+    };
+    return <Message />;
+  };
+
+  render() {
+    return this._renderMessage();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-imports-same-source.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-imports-same-source.expect.md
new file mode 100644
index 00000000000..6ec8520f9ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-imports-same-source.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @enableEmitFreeze @enableEmitInstrumentForget
+
+function useFoo(props) {
+  return foo(props.x);
+}
+
+```
+
+## Code
+
+```javascript
+import {
+  makeReadOnly,
+  shouldInstrument,
+  useRenderCounter,
+} from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitFreeze @enableEmitInstrumentForget
+
+function useFoo(props) {
+  if (DEV && shouldInstrument)
+    useRenderCounter("useFoo", "/codegen-emit-imports-same-source.ts");
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x);
+    $[0] = props.x;
+    $[1] = __DEV__ ? makeReadOnly(t0, "useFoo") : t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-imports-same-source.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-imports-same-source.js
new file mode 100644
index 00000000000..bd66353319d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-imports-same-source.js
@@ -0,0 +1,5 @@
+// @enableEmitFreeze @enableEmitInstrumentForget
+
+function useFoo(props) {
+  return foo(props.x);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md
new file mode 100644
index 00000000000..602e49672e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @enableEmitFreeze true
+
+function MyComponentName(props) {
+  let x = {};
+  foo(x, props.a);
+  foo(x, props.b);
+
+  let y = [];
+  y.push(x);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { makeReadOnly } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitFreeze true
+
+function MyComponentName(props) {
+  const $ = _c(3);
+  let y;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    const x = {};
+    foo(x, props.a);
+    foo(x, props.b);
+    y = [];
+    y.push(x);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = __DEV__ ? makeReadOnly(y, "MyComponentName") : y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.js
new file mode 100644
index 00000000000..8ad3e859e6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.js
@@ -0,0 +1,11 @@
+// @enableEmitFreeze true
+
+function MyComponentName(props) {
+  let x = {};
+  foo(x, props.a);
+  foo(x, props.b);
+
+  let y = [];
+  y.push(x);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.expect.md
new file mode 100644
index 00000000000..0778152f341
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {makeArray, print} from 'shared-runtime';
+
+function useTest() {
+  let w = {};
+  return makeArray(
+    (w = 42),
+    w,
+    (function foo() {
+      w = 999;
+      return 2;
+    })(),
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray, print } from "shared-runtime";
+
+function useTest() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let w = {};
+    const t1 = (w = 42);
+    const t2 = w;
+
+    w = 999;
+    t0 = makeArray(t1, t2, 2);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42,42,2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.ts
new file mode 100644
index 00000000000..8dd93a8482b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.ts
@@ -0,0 +1,18 @@
+import {makeArray, print} from 'shared-runtime';
+
+function useTest() {
+  let w = {};
+  return makeArray(
+    (w = 42),
+    w,
+    (function foo() {
+      w = 999;
+      return 2;
+    })(),
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.expect.md
new file mode 100644
index 00000000000..7310e0fcd26
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {makeArray, print} from 'shared-runtime';
+
+function useTest() {
+  let w = {};
+  return makeArray(
+    (w.x = 42),
+    w.x,
+    (function foo() {
+      w.x = 999;
+      return 2;
+    })(),
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray, print } from "shared-runtime";
+
+function useTest() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const w = {};
+    const t1 = (w.x = 42);
+    const t2 = w.x;
+
+    w.x = 999;
+    t0 = makeArray(t1, t2, 2);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42,42,2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.ts
new file mode 100644
index 00000000000..1b9f10856e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.ts
@@ -0,0 +1,18 @@
+import {makeArray, print} from 'shared-runtime';
+
+function useTest() {
+  let w = {};
+  return makeArray(
+    (w.x = 42),
+    w.x,
+    (function foo() {
+      w.x = 999;
+      return 2;
+    })(),
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.expect.md
new file mode 100644
index 00000000000..70b23c70c09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+import {makeArray, print} from 'shared-runtime';
+
+function useTest() {
+  return makeArray<number | void>(
+    print(1),
+    (function foo() {
+      print(2);
+      return 2;
+    })(),
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray, print } from "shared-runtime";
+
+function useTest() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const t1 = print(1);
+
+    print(2);
+    t0 = makeArray(t1, 2);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null,2]
+logs: [1,2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.ts
new file mode 100644
index 00000000000..52b1e8a9278
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife.ts
@@ -0,0 +1,16 @@
+import {makeArray, print} from 'shared-runtime';
+
+function useTest() {
+  return makeArray<number | void>(
+    print(1),
+    (function foo() {
+      print(2);
+      return 2;
+    })(),
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.expect.md
new file mode 100644
index 00000000000..edabebecfc4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enableEmitInstrumentForget @compilationMode:"annotation"
+
+function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { shouldInstrument, useRenderCounter } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitInstrumentForget @compilationMode:"annotation"
+
+function Bar(props) {
+  "use forget";
+  if (DEV && shouldInstrument)
+    useRenderCounter("Bar", "/codegen-instrument-forget-test.ts");
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.bar) {
+    t0 = <div>{props.bar}</div>;
+    $[0] = props.bar;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  "use forget";
+  if (DEV && shouldInstrument)
+    useRenderCounter("Foo", "/codegen-instrument-forget-test.ts");
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.bar) {
+    t0 = <Foo>{props.bar}</Foo>;
+    $[0] = props.bar;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.js
new file mode 100644
index 00000000000..cc5e4710548
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.js
@@ -0,0 +1,15 @@
+// @enableEmitInstrumentForget @compilationMode:"annotation"
+
+function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/complex-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/complex-while.expect.md
new file mode 100644
index 00000000000..844342020e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/complex-while.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  label: if (a) {
+    while (b) {
+      if (c) {
+        break label;
+      }
+    }
+  }
+  return c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  bb0: if (a) {
+    while (b) {
+      if (c) {
+        break bb0;
+      }
+    }
+  }
+  return c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/complex-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/complex-while.js
new file mode 100644
index 00000000000..c9194a39b4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/complex-while.js
@@ -0,0 +1,16 @@
+function foo(a, b, c) {
+  label: if (a) {
+    while (b) {
+      if (c) {
+        break label;
+      }
+    }
+  }
+  return c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.expect.md
new file mode 100644
index 00000000000..15cba5b29a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @flow @compilationMode:"infer"
+export default component Foo(bar: number) {
+  return <Bar bar={bar} />;
+}
+
+component Bar(bar: number) {
+  return <div>{bar}</div>;
+}
+
+function shouldNotCompile() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function Foo(t0) {
+  const $ = _c(2);
+  const { bar } = t0;
+  let t1;
+  if ($[0] !== bar) {
+    t1 = <Bar bar={bar} />;
+    $[0] = bar;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function Bar(t0) {
+  const $ = _c(2);
+  const { bar } = t0;
+  let t1;
+  if ($[0] !== bar) {
+    t1 = <div>{bar}</div>;
+    $[0] = bar;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function shouldNotCompile() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ bar: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.js
new file mode 100644
index 00000000000..04d419c7ce0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.js
@@ -0,0 +1,15 @@
+// @flow @compilationMode:"infer"
+export default component Foo(bar: number) {
+  return <Bar bar={bar} />;
+}
+
+component Bar(bar: number) {
+  return <div>{bar}</div>;
+}
+
+function shouldNotCompile() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-inner-function-with-many-args.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-inner-function-with-many-args.expect.md
new file mode 100644
index 00000000000..fe3d17d120e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-inner-function-with-many-args.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+function Component(props) {
+  const cb = (x, y, z) => x + y + z;
+
+  return <Stringify cb={cb} id={props.id} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const cb = _temp;
+  let t0;
+  if ($[0] !== props.id) {
+    t0 = <Stringify cb={cb} id={props.id} />;
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(x, y, z) {
+  return x + y + z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":"[[ function params=3 ]]","id":0}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-inner-function-with-many-args.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-inner-function-with-many-args.tsx
new file mode 100644
index 00000000000..a65614f09a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-inner-function-with-many-args.tsx
@@ -0,0 +1,11 @@
+import {Stringify} from 'shared-runtime';
+function Component(props) {
+  const cb = (x, y, z) => x + y + z;
+
+  return <Stringify cb={cb} id={props.id} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component.expect.md
new file mode 100644
index 00000000000..c6037fd2bb3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component.expect.md
@@ -0,0 +1,105 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = props.items;
+  const maxItems = props.maxItems;
+
+  const renderedItems = [];
+  const seen = new Set();
+  const max = Math.max(0, maxItems);
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items.at(i);
+    if (item == null || seen.has(item)) {
+      continue;
+    }
+    seen.add(item);
+    renderedItems.push(<div>{item}</div>);
+    if (renderedItems.length >= max) {
+      break;
+    }
+  }
+  const count = renderedItems.length;
+  return (
+    <div>
+      <h1>{count} Items</h1>
+      {renderedItems}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(8);
+  const items = props.items;
+  const maxItems = props.maxItems;
+  let renderedItems;
+  if ($[0] !== items || $[1] !== maxItems) {
+    renderedItems = [];
+    const seen = new Set();
+    const max = Math.max(0, maxItems);
+    for (let i = 0; i < items.length; i = i + 1, i) {
+      const item = items.at(i);
+      if (item == null || seen.has(item)) {
+        continue;
+      }
+
+      seen.add(item);
+      renderedItems.push(<div>{item}</div>);
+      if (renderedItems.length >= max) {
+        break;
+      }
+    }
+    $[0] = items;
+    $[1] = maxItems;
+    $[2] = renderedItems;
+  } else {
+    renderedItems = $[2];
+  }
+
+  const count = renderedItems.length;
+  let t0;
+  if ($[3] !== count) {
+    t0 = <h1>{count} Items</h1>;
+    $[3] = count;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== renderedItems || $[6] !== t0) {
+    t1 = (
+      <div>
+        {t0}
+        {renderedItems}
+      </div>
+    );
+    $[5] = renderedItems;
+    $[6] = t0;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component.js
new file mode 100644
index 00000000000..c460b9e3d35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component.js
@@ -0,0 +1,32 @@
+function Component(props) {
+  const items = props.items;
+  const maxItems = props.maxItems;
+
+  const renderedItems = [];
+  const seen = new Set();
+  const max = Math.max(0, maxItems);
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items.at(i);
+    if (item == null || seen.has(item)) {
+      continue;
+    }
+    seen.add(item);
+    renderedItems.push(<div>{item}</div>);
+    if (renderedItems.length >= max) {
+      break;
+    }
+  }
+  const count = renderedItems.length;
+  return (
+    <div>
+      <h1>{count} Items</h1>
+      {renderedItems}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md
new file mode 100644
index 00000000000..5ecf59e7a22
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// Should print A, B, arg, original
+function Component() {
+  const changeF = o => {
+    o.f = () => console.log('new');
+  };
+  const x = {
+    f: () => console.log('original'),
+  };
+
+  (console.log('A'), x)[(console.log('B'), 'f')](
+    (changeF(x), console.log('arg'), 1)
+  );
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Should print A, B, arg, original
+function Component() {
+  const $ = _c(1);
+  const changeF = _temp2;
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = { f: _temp3 };
+
+    (console.log("A"), x)[(console.log("B"), "f")](
+      (changeF(x), console.log("arg"), 1),
+    );
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+function _temp3() {
+  return console.log("original");
+}
+function _temp2(o) {
+  o.f = _temp;
+}
+function _temp() {
+  return console.log("new");
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"f":"[[ function params=0 ]]"}
+logs: ['A','B','arg','original']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.js
new file mode 100644
index 00000000000..ec08d4d3eaf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.js
@@ -0,0 +1,20 @@
+// Should print A, B, arg, original
+function Component() {
+  const changeF = o => {
+    o.f = () => console.log('new');
+  };
+  const x = {
+    f: () => console.log('original'),
+  };
+
+  (console.log('A'), x)[(console.log('B'), 'f')](
+    (changeF(x), console.log('arg'), 1)
+  );
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-spread.expect.md
new file mode 100644
index 00000000000..0329450b13e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-spread.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = foo[props.method](...props.a, null, ...props.b);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.method) {
+    t0 = foo[props.method](...props.a, null, ...props.b);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.method;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const x = t0;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-spread.js
new file mode 100644
index 00000000000..b933b65d4ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-spread.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = foo[props.method](...props.a, null, ...props.b);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md
new file mode 100644
index 00000000000..9f147194da1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  let a = foo();
+  // freeze `a` so we know the next line cannot mutate it
+  <div>{a}</div>;
+
+  // b should be dependent on `props.a`
+  let b = bar(a[props.a] + 1);
+  return b;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const $ = _c(2);
+  const a = foo();
+
+  const t0 = a[props.a] + 1;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = bar(t0);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const b = t1;
+  return b;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js
new file mode 100644
index 00000000000..29d6797fdd4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js
@@ -0,0 +1,10 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  let a = foo();
+  // freeze `a` so we know the next line cannot mutate it
+  <div>{a}</div>;
+
+  // b should be dependent on `props.a`
+  let b = bar(a[props.a] + 1);
+  return b;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md
new file mode 100644
index 00000000000..9af46bbfd98
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+function useHook({a, b}) {
+  let y = {a};
+  let x = {b};
+  x['y'] = y;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 3, b: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+function useHook(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    const y = { a };
+    x = { b };
+    x.y = y;
+    mutate(x);
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ a: 2, b: 3 }],
+  sequentialRenders: [
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+    { a: 3, b: 3 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":3,"y":{"a":2},"wat0":"joe"}
+{"b":3,"y":{"a":2},"wat0":"joe"}
+{"b":3,"y":{"a":3},"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.js
new file mode 100644
index 00000000000..85d0c398bcf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.js
@@ -0,0 +1,18 @@
+import {mutate} from 'shared-runtime';
+function useHook({a, b}) {
+  let y = {a};
+  let x = {b};
+  x['y'] = y;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 2, b: 3},
+    {a: 3, b: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md
new file mode 100644
index 00000000000..996afa1cb22
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function component() {
+  let [x, setX] = useState(0);
+  const handler = v => setX(v);
+  return <Foo handler={handler}></Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  const [, setX] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const handler = (v) => setX(v);
+    t0 = <Foo handler={handler} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.js
new file mode 100644
index 00000000000..e54eedaadc8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.js
@@ -0,0 +1,5 @@
+function component() {
+  let [x, setX] = useState(0);
+  const handler = v => setX(v);
+  return <Foo handler={handler}></Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md
new file mode 100644
index 00000000000..3f795b604e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+/**
+ * props.b *does* influence `a`
+ */
+function Component(props) {
+  const a = [];
+  a.push(props.a);
+  label: {
+    if (props.b) {
+      break label;
+    }
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * props.b *does* influence `a`
+ */
+function Component(props) {
+  const $ = _c(5);
+  let a;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    a = [];
+    a.push(props.a);
+    bb0: {
+      if (props.b) {
+        break bb0;
+      }
+
+      a.push(props.c);
+    }
+
+    a.push(props.d);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+  } else {
+    a = $[4];
+  }
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.js
new file mode 100644
index 00000000000..ccf983189cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.js
@@ -0,0 +1,21 @@
+/**
+ * props.b *does* influence `a`
+ */
+function Component(props) {
+  const a = [];
+  a.push(props.a);
+  label: {
+    if (props.b) {
+      break label;
+    }
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md
new file mode 100644
index 00000000000..5e708b95c6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md
@@ -0,0 +1,223 @@
+
+## Input
+
+```javascript
+/**
+ * props.b does *not* influence `a`
+ */
+function ComponentA(props) {
+  const a_DEBUG = [];
+  a_DEBUG.push(props.a);
+  if (props.b) {
+    return null;
+  }
+  a_DEBUG.push(props.d);
+  return a_DEBUG;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentB(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`, but only in a way that is never observable
+ */
+function ComponentC(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return null;
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentD(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return a;
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ComponentA,
+  params: [{a: 1, b: false, d: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * props.b does *not* influence `a`
+ */
+function ComponentA(props) {
+  const $ = _c(5);
+  let a_DEBUG;
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.d) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      a_DEBUG = [];
+      a_DEBUG.push(props.a);
+      if (props.b) {
+        t0 = null;
+        break bb0;
+      }
+
+      a_DEBUG.push(props.d);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.d;
+    $[3] = a_DEBUG;
+    $[4] = t0;
+  } else {
+    a_DEBUG = $[3];
+    t0 = $[4];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return a_DEBUG;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentB(props) {
+  const $ = _c(5);
+  let a;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    a = [];
+    a.push(props.a);
+    if (props.b) {
+      a.push(props.c);
+    }
+
+    a.push(props.d);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+  } else {
+    a = $[4];
+  }
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`, but only in a way that is never observable
+ */
+function ComponentC(props) {
+  const $ = _c(6);
+  let a;
+  let t0;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      a = [];
+      a.push(props.a);
+      if (props.b) {
+        a.push(props.c);
+        t0 = null;
+        break bb0;
+      }
+
+      a.push(props.d);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+    $[5] = t0;
+  } else {
+    a = $[4];
+    t0 = $[5];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentD(props) {
+  const $ = _c(6);
+  let a;
+  let t0;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      a = [];
+      a.push(props.a);
+      if (props.b) {
+        a.push(props.c);
+        t0 = a;
+        break bb0;
+      }
+
+      a.push(props.d);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+    $[5] = t0;
+  } else {
+    a = $[4];
+    t0 = $[5];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ComponentA,
+  params: [{ a: 1, b: false, d: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.js
new file mode 100644
index 00000000000..e0ed1014092
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.js
@@ -0,0 +1,58 @@
+/**
+ * props.b does *not* influence `a`
+ */
+function ComponentA(props) {
+  const a_DEBUG = [];
+  a_DEBUG.push(props.a);
+  if (props.b) {
+    return null;
+  }
+  a_DEBUG.push(props.d);
+  return a_DEBUG;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentB(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`, but only in a way that is never observable
+ */
+function ComponentC(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return null;
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentD(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return a;
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ComponentA,
+  params: [{a: 1, b: false, d: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md
new file mode 100644
index 00000000000..0bcaf60a8e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+function ComponentA(props) {
+  const a = [];
+  const b = [];
+  if (b) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function ComponentB(props) {
+  const a = [];
+  const b = [];
+  if (mayMutate(b)) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function Foo() {}
+function mayMutate() {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function ComponentA(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
+    const a = [];
+    const b = [];
+    if (b) {
+      a.push(props.p0);
+    }
+    if (props.p1) {
+      b.push(props.p2);
+    }
+    t0 = <Foo a={a} b={b} />;
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = props.p2;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+function ComponentB(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
+    const a = [];
+    const b = [];
+    if (mayMutate(b)) {
+      a.push(props.p0);
+    }
+    if (props.p1) {
+      b.push(props.p2);
+    }
+    t0 = <Foo a={a} b={b} />;
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = props.p2;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+function Foo() {}
+function mayMutate() {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.js
new file mode 100644
index 00000000000..0378ab655c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.js
@@ -0,0 +1,26 @@
+function ComponentA(props) {
+  const a = [];
+  const b = [];
+  if (b) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function ComponentB(props) {
+  const a = [];
+  const b = [];
+  if (mayMutate(b)) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function Foo() {}
+function mayMutate() {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md
new file mode 100644
index 00000000000..5c74ec25b85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  if (props.cond) {
+    setX(2);
+    foo();
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  if (props.cond) {
+    setX(2);
+    foo();
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.js
new file mode 100644
index 00000000000..f55201b7adc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.js
@@ -0,0 +1,20 @@
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  if (props.cond) {
+    setX(2);
+    foo();
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.expect.md
new file mode 100644
index 00000000000..243c4154679
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// @enableEmitInstrumentForget @compilationMode:"annotation"
+
+import {identity} from 'shared-runtime';
+
+function Bar(props) {
+  'use forget';
+  const shouldInstrument = identity(null);
+  const _shouldInstrument = identity(null);
+  const _x2 = () => {
+    const _shouldInstrument2 = 'hello world';
+    return identity({_shouldInstrument2});
+  };
+  return (
+    <div style={shouldInstrument} other={_shouldInstrument}>
+      {props.bar}
+    </div>
+  );
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import {
+  shouldInstrument as _shouldInstrument3,
+  useRenderCounter,
+} from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitInstrumentForget @compilationMode:"annotation"
+
+import { identity } from "shared-runtime";
+
+function Bar(props) {
+  "use forget";
+  if (DEV && _shouldInstrument3)
+    useRenderCounter("Bar", "/conflict-codegen-instrument-forget.ts");
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = identity(null);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const shouldInstrument = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = identity(null);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const _shouldInstrument = t1;
+  let t2;
+  if ($[2] !== props.bar) {
+    t2 = (
+      <div style={shouldInstrument} other={_shouldInstrument}>
+        {props.bar}
+      </div>
+    );
+    $[2] = props.bar;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+function Foo(props) {
+  "use forget";
+  if (DEV && _shouldInstrument3)
+    useRenderCounter("Foo", "/conflict-codegen-instrument-forget.ts");
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.bar) {
+    t0 = <Foo>{props.bar}</Foo>;
+    $[0] = props.bar;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.js
new file mode 100644
index 00000000000..58729d6beeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.js
@@ -0,0 +1,23 @@
+// @enableEmitInstrumentForget @compilationMode:"annotation"
+
+import {identity} from 'shared-runtime';
+
+function Bar(props) {
+  'use forget';
+  const shouldInstrument = identity(null);
+  const _shouldInstrument = identity(null);
+  const _x2 = () => {
+    const _shouldInstrument2 = 'hello world';
+    return identity({_shouldInstrument2});
+  };
+  return (
+    <div style={shouldInstrument} other={_shouldInstrument}>
+      {props.bar}
+    </div>
+  );
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflicting-dollar-sign-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflicting-dollar-sign-variable.expect.md
new file mode 100644
index 00000000000..84a542978c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflicting-dollar-sign-variable.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const $ = identity('jQuery');
+  const t0 = identity([$]);
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $0 = _c(1);
+  let t0;
+  if ($0[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const $ = identity("jQuery");
+    t0 = identity([$]);
+    $0[0] = t0;
+  } else {
+    t0 = $0[0];
+  }
+  const t0$0 = t0;
+  return t0$0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["jQuery"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflicting-dollar-sign-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflicting-dollar-sign-variable.js
new file mode 100644
index 00000000000..b8416701bcf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflicting-dollar-sign-variable.js
@@ -0,0 +1,12 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const $ = identity('jQuery');
+  const t0 = identity([$]);
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md
new file mode 100644
index 00000000000..b09c51a8768
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useHook({a, b}) {
+  const valA = useMemo(() => identity({a}), [a]);
+  const valB = useMemo(() => identity([b]), [b]);
+  return [valA, valB];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 2, b: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(7);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = identity({ a });
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const valA = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = identity([b]);
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const valB = t2;
+  let t3;
+  if ($[4] !== valA || $[5] !== valB) {
+    t3 = [valA, valB];
+    $[4] = valA;
+    $[5] = valB;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ a: 2, b: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":2},[3]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.ts
new file mode 100644
index 00000000000..d4a35a7bd43
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.ts
@@ -0,0 +1,13 @@
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useHook({a, b}) {
+  const valA = useMemo(() => identity({a}), [a]);
+  const valB = useMemo(() => identity([b]), [b]);
+  return [valA, valB];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 2, b: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md
new file mode 100644
index 00000000000..29fd76e8363
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {shallowCopy} from 'shared-runtime';
+
+function Component(props) {
+  const x = shallowCopy(props);
+  // These calls should view x as readonly and be grouped outside of the reactive scope for x:
+  console.log(x);
+  console.info(x);
+  console.warn(x);
+  console.error(x);
+  console.trace(x);
+  console.table(x);
+  global.console.log(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { shallowCopy } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = shallowCopy(props);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+
+  console.log(x);
+  console.info(x);
+  console.warn(x);
+  console.error(x);
+  console.trace(x);
+  console.table(x);
+  global.console.log(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 2 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":1,"b":2}
+logs: [{ a: 1, b: 2 },{ a: 1, b: 2 },{ a: 1, b: 2 },{ a: 1, b: 2 },{ a: 1, b: 2 },{ a: 1, b: 2 }]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.js
new file mode 100644
index 00000000000..e611f40b944
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.js
@@ -0,0 +1,20 @@
+import {shallowCopy} from 'shared-runtime';
+
+function Component(props) {
+  const x = shallowCopy(props);
+  // These calls should view x as readonly and be grouped outside of the reactive scope for x:
+  console.log(x);
+  console.info(x);
+  console.warn(x);
+  console.error(x);
+  console.trace(x);
+  console.table(x);
+  global.console.log(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-global.expect.md
new file mode 100644
index 00000000000..04b6c4f17f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-global.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function foo() {
+  const isX = GLOBAL_IS_X;
+  const getJSX = () => {
+    return <Child x={isX}></Child>;
+  };
+  const result = getJSX();
+  return result;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+
+  const getJSX = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = getJSX();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const result = t0;
+  return result;
+}
+function _temp() {
+  return <Child x={GLOBAL_IS_X} />;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-global.js
new file mode 100644
index 00000000000..ca1f4023ac5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-global.js
@@ -0,0 +1,8 @@
+function foo() {
+  const isX = GLOBAL_IS_X;
+  const getJSX = () => {
+    return <Child x={isX}></Child>;
+  };
+  const result = getJSX();
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-primitive.expect.md
new file mode 100644
index 00000000000..60fe0808d92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-primitive.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = 42;
+  const f = () => {
+    console.log(x);
+  };
+  f();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  const f = _temp;
+
+  f();
+  return 42;
+}
+function _temp() {
+  console.log(42);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
+logs: [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-primitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-primitive.js
new file mode 100644
index 00000000000..7708bf25427
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-into-function-expression-primitive.js
@@ -0,0 +1,14 @@
+function foo() {
+  const x = 42;
+  const f = () => {
+    console.log(x);
+  };
+  f();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md
new file mode 100644
index 00000000000..fc2a10cd3d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function useFoo(setOne: boolean) {
+  let x;
+  let y;
+  let z;
+  if (setOne) {
+    x = y = z = 1;
+  } else {
+    x = 2;
+    y = 3;
+    z = 5;
+  }
+  return {x, y, z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(setOne) {
+  const $ = _c(4);
+  let x;
+  let y;
+  let z;
+  if (setOne) {
+    x = y = z = 1;
+  } else {
+    x = 2;
+    y = 3;
+    z = 5;
+  }
+  let t0;
+  if ($[0] !== x || $[1] !== y || $[2] !== z) {
+    t0 = { x, y, z };
+    $[0] = x;
+    $[1] = y;
+    $[2] = z;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":1,"y":1,"z":1}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.ts
new file mode 100644
index 00000000000..0bf17a61478
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.ts
@@ -0,0 +1,18 @@
+function useFoo(setOne: boolean) {
+  let x;
+  let y;
+  let z;
+  if (setOne) {
+    x = y = z = 1;
+  } else {
+    x = 2;
+    y = 3;
+    z = 5;
+  }
+  return {x, y, z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md
new file mode 100644
index 00000000000..a7662e95ad8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const index = 'foo';
+  const x = {};
+  x[index] = x[index] + x['bar'];
+  x[index](props.foo);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.foo) {
+    x = {};
+    x.foo = x.foo + x.bar;
+    x.foo(props.foo);
+    $[0] = props.foo;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.js
new file mode 100644
index 00000000000..075f9374b2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const index = 'foo';
+  const x = {};
+  x[index] = x[index] + x['bar'];
+  x[index](props.foo);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-across-objectmethod-def.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-across-objectmethod-def.expect.md
new file mode 100644
index 00000000000..ae13330750f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-across-objectmethod-def.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+// repro for context identifier scoping bug, in which x was
+// inferred as a context variable.
+
+function Component() {
+  let x = 2;
+  const obj = {
+    method() {},
+  };
+  x = 4;
+  identity(obj);
+  // constant propagation should return 4 here
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { identity } from "shared-runtime";
+
+// repro for context identifier scoping bug, in which x was
+// inferred as a context variable.
+
+function Component() {
+  const obj = { method() {} };
+
+  identity(obj);
+  return 4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 4
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-across-objectmethod-def.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-across-objectmethod-def.js
new file mode 100644
index 00000000000..934bb1f0422
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-across-objectmethod-def.js
@@ -0,0 +1,20 @@
+import {identity} from 'shared-runtime';
+
+// repro for context identifier scoping bug, in which x was
+// inferred as a context variable.
+
+function Component() {
+  let x = 2;
+  const obj = {
+    method() {},
+  };
+  x = 4;
+  identity(obj);
+  // constant propagation should return 4 here
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-colliding-identifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-colliding-identifier.expect.md
new file mode 100644
index 00000000000..99ec2e1fdfe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-colliding-identifier.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import {invoke} from 'shared-runtime';
+
+function Component() {
+  let x = 2;
+  const fn = () => {
+    return {x: 'value'};
+  };
+  invoke(fn);
+  x = 3;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { invoke } from "shared-runtime";
+
+function Component() {
+  const fn = _temp;
+
+  invoke(fn);
+  return 3;
+}
+function _temp() {
+  return { x: "value" };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 3
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-colliding-identifier.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-colliding-identifier.js
new file mode 100644
index 00000000000..8d472d1e62b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-colliding-identifier.js
@@ -0,0 +1,16 @@
+import {invoke} from 'shared-runtime';
+
+function Component() {
+  let x = 2;
+  const fn = () => {
+    return {x: 'value'};
+  };
+  invoke(fn);
+  x = 3;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-to-object-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-to-object-method.expect.md
new file mode 100644
index 00000000000..cc5633a7b3f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-to-object-method.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Foo() {
+  const CONSTANT = 1;
+  const x = {
+    foo() {
+      return identity(CONSTANT);
+    },
+  };
+  return x.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = {
+      foo() {
+        return identity(1);
+      },
+    };
+    t0 = x.foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-to-object-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-to-object-method.js
new file mode 100644
index 00000000000..58a2b276105
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-prop-to-object-method.js
@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+function Foo() {
+  const CONSTANT = 1;
+  const x = {
+    foo() {
+      return identity(CONSTANT);
+    },
+  };
+  return x.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis-constant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis-constant.expect.md
new file mode 100644
index 00000000000..7bbd8c90d7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis-constant.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {CONST_STRING0, Text} from 'shared-runtime';
+function useFoo() {
+  'use no forget';
+  return {tab: CONST_STRING0};
+}
+
+function Test() {
+  const {tab} = useFoo();
+  const currentTab = tab === CONST_STRING0 ? CONST_STRING0 : CONST_STRING0;
+
+  return <Text value={currentTab} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_STRING0, Text } from "shared-runtime";
+function useFoo() {
+  "use no forget";
+  return { tab: CONST_STRING0 };
+}
+
+function Test() {
+  const $ = _c(1);
+  const { tab } = useFoo();
+  tab === CONST_STRING0 ? CONST_STRING0 : CONST_STRING0;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Text value={CONST_STRING0} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>global string 0</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis-constant.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis-constant.js
new file mode 100644
index 00000000000..4f70bb58046
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis-constant.js
@@ -0,0 +1,18 @@
+import {CONST_STRING0, Text} from 'shared-runtime';
+function useFoo() {
+  'use no forget';
+  return {tab: CONST_STRING0};
+}
+
+function Test() {
+  const {tab} = useFoo();
+  const currentTab = tab === CONST_STRING0 ? CONST_STRING0 : CONST_STRING0;
+
+  return <Text value={currentTab} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis.expect.md
new file mode 100644
index 00000000000..a738754a160
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {CONST_STRING0, CONST_STRING1, Text} from 'shared-runtime';
+
+function useFoo() {
+  'use no forget';
+  return {tab: CONST_STRING1};
+}
+
+function Test() {
+  const {tab} = useFoo();
+  const currentTab = tab === CONST_STRING0 ? CONST_STRING0 : CONST_STRING1;
+
+  return <Text value={currentTab} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_STRING0, CONST_STRING1, Text } from "shared-runtime";
+
+function useFoo() {
+  "use no forget";
+  return { tab: CONST_STRING1 };
+}
+
+function Test() {
+  const $ = _c(2);
+  const { tab } = useFoo();
+  const currentTab = tab === CONST_STRING0 ? CONST_STRING0 : CONST_STRING1;
+  let t0;
+  if ($[0] !== currentTab) {
+    t0 = <Text value={currentTab} />;
+    $[0] = currentTab;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>global string 1</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis.js
new file mode 100644
index 00000000000..2be7df2e407
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagate-global-phis.js
@@ -0,0 +1,19 @@
+import {CONST_STRING0, CONST_STRING1, Text} from 'shared-runtime';
+
+function useFoo() {
+  'use no forget';
+  return {tab: CONST_STRING1};
+}
+
+function Test() {
+  const {tab} = useFoo();
+  const currentTab = tab === CONST_STRING0 ? CONST_STRING0 : CONST_STRING1;
+
+  return <Text value={currentTab} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-bit-ops.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-bit-ops.expect.md
new file mode 100644
index 00000000000..b916be1357e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-bit-ops.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  return (
+    <Stringify
+      value={[
+        123.45 | 0,
+        123.45 & 0,
+        123.45 ^ 0,
+        123 << 0,
+        123 >> 0,
+        123 >>> 0,
+        123.45 | 1,
+        123.45 & 1,
+        123.45 ^ 1,
+        123 << 1,
+        123 >> 1,
+        123 >>> 1,
+        3 ** 2,
+        3 ** 2.5,
+        3.5 ** 2,
+        2 ** (3 ** 0.5),
+        4 % 2,
+        4 % 2.5,
+        4 % 3,
+        4.5 % 2,
+      ]}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Stringify
+        value={[
+          123, 0, 123, 123, 123, 123, 123, 1, 122, 246, 61, 61, 9,
+          15.588457268119896, 12.25, 3.3219970854839125, 0, 1.5, 1, 0.5,
+        ]}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":[123,0,123,123,123,123,123,1,122,246,61,61,9,15.588457268119896,12.25,3.3219970854839125,0,1.5,1,0.5]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-bit-ops.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-bit-ops.js
new file mode 100644
index 00000000000..6f984c4c77a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-bit-ops.js
@@ -0,0 +1,36 @@
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  return (
+    <Stringify
+      value={[
+        123.45 | 0,
+        123.45 & 0,
+        123.45 ^ 0,
+        123 << 0,
+        123 >> 0,
+        123 >>> 0,
+        123.45 | 1,
+        123.45 & 1,
+        123.45 ^ 1,
+        123 << 1,
+        123 >> 1,
+        123 >>> 1,
+        3 ** 2,
+        3 ** 2.5,
+        3.5 ** 2,
+        2 ** (3 ** 0.5),
+        4 % 2,
+        4 % 2.5,
+        4 % 3,
+        4.5 % 2,
+      ]}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-for.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-for.expect.md
new file mode 100644
index 00000000000..b5f52fef5dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-for.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function foo() {
+  let y = 0;
+  for (const x = 100; x < 10; x) {
+    y = y + 1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  let y = 0;
+  for (const x = 100; false; 100) {
+    y = y + 1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-for.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-for.js
new file mode 100644
index 00000000000..5793444de20
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-for.js
@@ -0,0 +1,13 @@
+function foo() {
+  let y = 0;
+  for (const x = 100; x < 10; x) {
+    y = y + 1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md
new file mode 100644
index 00000000000..503ee6d7168
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import {Stringify, identity} from 'shared-runtime';
+
+function Component(props) {
+  const x = 42;
+  const onEvent = () => {
+    return identity(x);
+  };
+  return <Stringify onEvent={onEvent} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+
+  const onEvent = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify onEvent={onEvent} shouldInvokeFns={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return identity(42);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"onEvent":{"kind":"Function","result":42},"shouldInvokeFns":true}</div>
+<div>{"onEvent":{"kind":"Function","result":42},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.js
new file mode 100644
index 00000000000..d1df503ad97
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.js
@@ -0,0 +1,15 @@
+import {Stringify, identity} from 'shared-runtime';
+
+function Component(props) {
+  const x = 42;
+  const onEvent = () => {
+    return identity(x);
+  };
+  return <Stringify onEvent={onEvent} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-phi.expect.md
new file mode 100644
index 00000000000..41c2caaeadb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-phi.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x;
+  if (a) {
+    x = 2 - 1;
+  } else {
+    x = 0 + 1;
+  }
+  if (x === 1) {
+    return b;
+  } else {
+    return c;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  if (a) {
+  }
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-phi.js
new file mode 100644
index 00000000000..1e2bee69ad2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-phi.js
@@ -0,0 +1,19 @@
+function foo(a, b, c) {
+  let x;
+  if (a) {
+    x = 2 - 1;
+  } else {
+    x = 0 + 1;
+  }
+  if (x === 1) {
+    return b;
+  } else {
+    return c;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-string-concat.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-string-concat.expect.md
new file mode 100644
index 00000000000..8174bd0364e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-string-concat.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function foo() {
+  const a = 'a' + 'b';
+  const c = 'c';
+  return a + c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  return "abc";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "abc"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-string-concat.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-string-concat.js
new file mode 100644
index 00000000000..d8c19b6a24e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-string-concat.js
@@ -0,0 +1,11 @@
+function foo() {
+  const a = 'a' + 'b';
+  const c = 'c';
+  return a + c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md
new file mode 100644
index 00000000000..06a7ee3a37f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md
@@ -0,0 +1,136 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {Stringify, identity} from 'shared-runtime';
+
+function foo() {
+  try {
+    identity(`${Symbol('0')}`); // Uncaught TypeError: Cannot convert a Symbol value to a string (leave as is)
+  } catch {}
+
+  return (
+    <Stringify
+      value={[
+        `` === '',
+        `\n` === '\n',
+        `a\nb`,
+        `\n`,
+        `a${1}b`,
+        ` abc \u0041\n\u000a\ŧ`,
+        `abc${1}def`,
+        `abc${1}def${2}`,
+        `abc${1}def${2}ghi`,
+        `a${1 + 3}b${``}c${'d' + `e${2 + 4}f`}`,
+        `1${2}${Math.sin(0)}`,
+        `${NaN}`,
+        `${Infinity}`,
+        `${-Infinity}`,
+        `${Number.MAX_SAFE_INTEGER}`,
+        `${Number.MIN_SAFE_INTEGER}`,
+        `${Number.MAX_VALUE}`,
+        `${Number.MIN_VALUE}`,
+        `${-0}`,
+        `
+        `,
+        `${{}}`,
+        `${[1, 2, 3]}`,
+        `${true}`,
+        `${false}`,
+        `${null}`,
+        `${undefined}`,
+        `123456789${0}`,
+        `${0}123456789`,
+        `${0}123456789${0}`,
+        `${0}1234${5}6789${0}`,
+        `${0}1234${`${0}123456789${`${0}123456789${0}`}`}6789${0}`,
+        `${0}1234${`${0}123456789${`${identity(0)}`}`}6789${0}`,
+        `${`${`${`${0}`}`}`}`,
+        `${`${`${`${''}`}`}`}`,
+        `${`${`${`${identity('')}`}`}`}`,
+      ]}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { Stringify, identity } from "shared-runtime";
+
+function foo() {
+  const $ = _c(1);
+  try {
+    identity(`${Symbol("0")}`);
+  } catch {}
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Stringify
+        value={[
+          true,
+          true,
+          "a\nb",
+          "\n",
+          "a1b",
+          " abc A\n\n\u0167",
+          "abc1def",
+          "abc1def2",
+          "abc1def2ghi",
+          "a4bcde6f",
+          `1${2}${Math.sin(0)}`,
+          `${NaN}`,
+          `${Infinity}`,
+          `${-Infinity}`,
+          `${Number.MAX_SAFE_INTEGER}`,
+          `${Number.MIN_SAFE_INTEGER}`,
+          `${Number.MAX_VALUE}`,
+          `${Number.MIN_VALUE}`,
+          "0",
+          "\n        ",
+
+          `${{}}`,
+          `${[1, 2, 3]}`,
+          "true",
+          "false",
+          "null",
+          `${undefined}`,
+          "1234567890",
+          "0123456789",
+          "01234567890",
+          "01234567890",
+          "0123401234567890123456789067890",
+          `${0}1234${`${0}123456789${`${identity(0)}`}`}6789${0}`,
+          "0",
+          "",
+          `${`${`${`${identity("")}`}`}`}`,
+        ]}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":[true,true,"a\nb","\n","a1b"," abc A\n\nŧ","abc1def","abc1def2","abc1def2ghi","a4bcde6f","120","NaN","Infinity","-Infinity","9007199254740991","-9007199254740991","1.7976931348623157e+308","5e-324","0","\n        ","[object Object]","1,2,3","true","false","null","undefined","1234567890","0123456789","01234567890","01234567890","0123401234567890123456789067890","012340123456789067890","0","",""]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js
new file mode 100644
index 00000000000..199284b8caa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js
@@ -0,0 +1,57 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import {Stringify, identity} from 'shared-runtime';
+
+function foo() {
+  try {
+    identity(`${Symbol('0')}`); // Uncaught TypeError: Cannot convert a Symbol value to a string (leave as is)
+  } catch {}
+
+  return (
+    <Stringify
+      value={[
+        `` === '',
+        `\n` === '\n',
+        `a\nb`,
+        `\n`,
+        `a${1}b`,
+        ` abc \u0041\n\u000a\ŧ`,
+        `abc${1}def`,
+        `abc${1}def${2}`,
+        `abc${1}def${2}ghi`,
+        `a${1 + 3}b${``}c${'d' + `e${2 + 4}f`}`,
+        `1${2}${Math.sin(0)}`,
+        `${NaN}`,
+        `${Infinity}`,
+        `${-Infinity}`,
+        `${Number.MAX_SAFE_INTEGER}`,
+        `${Number.MIN_SAFE_INTEGER}`,
+        `${Number.MAX_VALUE}`,
+        `${Number.MIN_VALUE}`,
+        `${-0}`,
+        `
+        `,
+        `${{}}`,
+        `${[1, 2, 3]}`,
+        `${true}`,
+        `${false}`,
+        `${null}`,
+        `${undefined}`,
+        `123456789${0}`,
+        `${0}123456789`,
+        `${0}123456789${0}`,
+        `${0}1234${5}6789${0}`,
+        `${0}1234${`${0}123456789${`${0}123456789${0}`}`}6789${0}`,
+        `${0}1234${`${0}123456789${`${identity(0)}`}`}6789${0}`,
+        `${`${`${`${0}`}`}`}`,
+        `${`${`${`${''}`}`}`}`,
+        `${`${`${`${identity('')}`}`}`}`,
+      ]}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary-number.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary-number.expect.md
new file mode 100644
index 00000000000..b52ea1b51b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary-number.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  const a = -1;
+  return (
+    <Stringify
+      value={[
+        2 * a,
+        -0,
+        0 === -0,
+        -Infinity,
+        -NaN,
+        a * NaN,
+        a * Infinity,
+        a * -Infinity,
+      ]}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Stringify
+        value={[
+          -2,
+          0,
+          true,
+          -Infinity,
+          -NaN,
+          -1 * NaN,
+          -1 * Infinity,
+          -1 * -Infinity,
+        ]}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":[-2,0,true,null,null,null,null,null]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary-number.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary-number.js
new file mode 100644
index 00000000000..8ef8ec0e6c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary-number.js
@@ -0,0 +1,25 @@
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  const a = -1;
+  return (
+    <Stringify
+      value={[
+        2 * a,
+        -0,
+        0 === -0,
+        -Infinity,
+        -NaN,
+        a * NaN,
+        a * Infinity,
+        a * -Infinity,
+      ]}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary.expect.md
new file mode 100644
index 00000000000..aaea767643b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  let _b;
+  const b = true;
+  if (!b) {
+    _b = 'bar';
+  } else {
+    _b = 'baz';
+  }
+
+  return (
+    <Stringify
+      value={{
+        _b,
+        b0: !true,
+        n0: !0,
+        n1: !1,
+        n2: !2,
+        n3: !-1,
+        s0: !'',
+        s1: !'a',
+        s2: !'ab',
+        u: !undefined,
+        n: !null,
+      }}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Stringify
+        value={{
+          _b: "baz",
+          b0: false,
+          n0: true,
+          n1: false,
+          n2: false,
+          n3: false,
+          s0: true,
+          s1: false,
+          s2: false,
+          u: !undefined,
+          n: true,
+        }}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{"_b":"baz","b0":false,"n0":true,"n1":false,"n2":false,"n3":false,"s0":true,"s1":false,"s2":false,"u":true,"n":true}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary.js
new file mode 100644
index 00000000000..e78c1bceba5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-unary.js
@@ -0,0 +1,35 @@
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  let _b;
+  const b = true;
+  if (!b) {
+    _b = 'bar';
+  } else {
+    _b = 'baz';
+  }
+
+  return (
+    <Stringify
+      value={{
+        _b,
+        b0: !true,
+        n0: !0,
+        n1: !1,
+        n2: !2,
+        n3: !-1,
+        s0: !'',
+        s1: !'a',
+        s2: !'ab',
+        u: !undefined,
+        n: !null,
+      }}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-while.expect.md
new file mode 100644
index 00000000000..452af75834f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-while.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 100;
+  let y = 0;
+  while (x < 10) {
+    y += 1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  let y = 0;
+  while (false) {
+    y = y + 1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-while.js
new file mode 100644
index 00000000000..fe63a1e7acb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-while.js
@@ -0,0 +1,14 @@
+function foo() {
+  let x = 100;
+  let y = 0;
+  while (x < 10) {
+    y += 1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation.expect.md
new file mode 100644
index 00000000000..b7265d44db4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function foo() {
+  const a = 1;
+  const b = 2;
+  const c = 3;
+  const d = a + b;
+  const e = d * c;
+  const f = e / d;
+  const g = f - e;
+
+  if (g) {
+    console.log('foo');
+  }
+
+  const h = g;
+  const i = h;
+  const j = i;
+  return j;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  console.log("foo");
+  return -6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) -6
+logs: ['foo']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation.js
new file mode 100644
index 00000000000..044e82d19ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation.js
@@ -0,0 +1,24 @@
+function foo() {
+  const a = 1;
+  const b = 2;
+  const c = 3;
+  const d = a + b;
+  const e = d * c;
+  const f = e / d;
+  const g = f - e;
+
+  if (g) {
+    console.log('foo');
+  }
+
+  const h = g;
+  const i = h;
+  const j = i;
+  return j;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md
new file mode 100644
index 00000000000..bfa6c830712
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  new Foo(a, b);
+  let _ = <div a={a} />;
+  new Foo(b);
+  return <div a={a} b={b} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {}
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = [];
+    const b = {};
+    new Foo(a, b);
+    new Foo(b);
+    t0 = <div a={a} b={b} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.js
new file mode 100644
index 00000000000..ed1df01d2aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.js
@@ -0,0 +1,10 @@
+function Foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  new Foo(a, b);
+  let _ = <div a={a} />;
+  new Foo(b);
+  return <div a={a} b={b} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md
new file mode 100644
index 00000000000..636bc53a172
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let Component = Stringify;
+
+  Component = useMemo(() => {
+    return Component;
+  }, [Component]);
+
+  return <Component {...props} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { useMemo } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let Component;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    Component = Stringify;
+
+    Component;
+    Component = Component;
+    $[0] = Component;
+  } else {
+    Component = $[0];
+  }
+  let t0;
+  if ($[1] !== props) {
+    t0 = <Component {...props} />;
+    $[1] = props;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"name":"Sathya"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js
new file mode 100644
index 00000000000..49cf3364b1c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js
@@ -0,0 +1,18 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let Component = Stringify;
+
+  Component = useMemo(() => {
+    return Component;
+  }, [Component]);
+
+  return <Component {...props} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-explicit-control-flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-explicit-control-flow.expect.md
new file mode 100644
index 00000000000..1e349821723
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-explicit-control-flow.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {invoke} from 'shared-runtime';
+
+function Component({shouldReassign}) {
+  let x = null;
+  const reassign = () => {
+    if (shouldReassign) {
+      x = 2;
+    }
+  };
+  invoke(reassign);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{shouldReassign: true}],
+  sequentialRenders: [{shouldReassign: false}, {shouldReassign: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { invoke } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { shouldReassign } = t0;
+  let x;
+  if ($[0] !== shouldReassign) {
+    x = null;
+    const reassign = () => {
+      if (shouldReassign) {
+        x = 2;
+      }
+    };
+
+    invoke(reassign);
+    $[0] = shouldReassign;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ shouldReassign: true }],
+  sequentialRenders: [{ shouldReassign: false }, { shouldReassign: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
+2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-explicit-control-flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-explicit-control-flow.js
new file mode 100644
index 00000000000..a2d103f61e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-explicit-control-flow.js
@@ -0,0 +1,18 @@
+import {invoke} from 'shared-runtime';
+
+function Component({shouldReassign}) {
+  let x = null;
+  const reassign = () => {
+    if (shouldReassign) {
+      x = 2;
+    }
+  };
+  invoke(reassign);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{shouldReassign: true}],
+  sequentialRenders: [{shouldReassign: false}, {shouldReassign: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-implicit-control-flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-implicit-control-flow.expect.md
new file mode 100644
index 00000000000..8f5da848766
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-implicit-control-flow.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {conditionalInvoke} from 'shared-runtime';
+
+// same as context-variable-reactive-explicit-control-flow.js, but make
+// the control flow implicit
+
+function Component({shouldReassign}) {
+  let x = null;
+  const reassign = () => {
+    x = 2;
+  };
+  conditionalInvoke(shouldReassign, reassign);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{shouldReassign: true}],
+  sequentialRenders: [{shouldReassign: false}, {shouldReassign: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { conditionalInvoke } from "shared-runtime";
+
+// same as context-variable-reactive-explicit-control-flow.js, but make
+// the control flow implicit
+
+function Component(t0) {
+  const $ = _c(2);
+  const { shouldReassign } = t0;
+  let x;
+  if ($[0] !== shouldReassign) {
+    x = null;
+    const reassign = () => {
+      x = 2;
+    };
+
+    conditionalInvoke(shouldReassign, reassign);
+    $[0] = shouldReassign;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ shouldReassign: true }],
+  sequentialRenders: [{ shouldReassign: false }, { shouldReassign: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
+2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-implicit-control-flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-implicit-control-flow.js
new file mode 100644
index 00000000000..1bf1c81ca34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reactive-implicit-control-flow.js
@@ -0,0 +1,19 @@
+import {conditionalInvoke} from 'shared-runtime';
+
+// same as context-variable-reactive-explicit-control-flow.js, but make
+// the control flow implicit
+
+function Component({shouldReassign}) {
+  let x = null;
+  const reassign = () => {
+    x = 2;
+  };
+  conditionalInvoke(shouldReassign, reassign);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{shouldReassign: true}],
+  sequentialRenders: [{shouldReassign: false}, {shouldReassign: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-objectmethod.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-objectmethod.expect.md
new file mode 100644
index 00000000000..cdd0269d5cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-objectmethod.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {invoke} from 'shared-runtime';
+
+function Component({cond}) {
+  let x = 2;
+  const obj = {
+    method(cond) {
+      if (cond) {
+        x = 4;
+      }
+    },
+  };
+  invoke(obj.method, cond);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { invoke } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { cond } = t0;
+  let x;
+  if ($[0] !== cond) {
+    x = 2;
+    const obj = {
+      method(cond_0) {
+        if (cond_0) {
+          x = 4;
+        }
+      },
+    };
+    invoke(obj.method, cond);
+    $[0] = cond;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 4
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-objectmethod.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-objectmethod.js
new file mode 100644
index 00000000000..6c6408209ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-objectmethod.js
@@ -0,0 +1,19 @@
+import {invoke} from 'shared-runtime';
+
+function Component({cond}) {
+  let x = 2;
+  const obj = {
+    method(cond) {
+      if (cond) {
+        x = 4;
+      }
+    },
+  };
+  invoke(obj.method, cond);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md
new file mode 100644
index 00000000000..08b92e940fc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x = null;
+  const callback = () => {
+    console.log(x);
+  };
+  x = {};
+  return <Stringify callback={callback} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let x = null;
+    const callback = () => {
+      console.log(x);
+    };
+    x = {};
+    t0 = <Stringify callback={callback} shouldInvokeFns={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"callback":{"kind":"Function"},"shouldInvokeFns":true}</div>
+logs: [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.js
new file mode 100644
index 00000000000..9cdecf5a444
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.js
@@ -0,0 +1,15 @@
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x = null;
+  const callback = () => {
+    console.log(x);
+  };
+  x = {};
+  return <Stringify callback={callback} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-reactive-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-reactive-capture.expect.md
new file mode 100644
index 00000000000..8578d269cbe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-reactive-capture.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {invoke} from 'shared-runtime';
+
+function Component({value}) {
+  let x = null;
+  const reassign = () => {
+    x = value;
+  };
+  invoke(reassign);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 2}],
+  sequentialRenders: [{value: 2}, {value: 4}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { invoke } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let x;
+  if ($[0] !== value) {
+    x = null;
+    const reassign = () => {
+      x = value;
+    };
+
+    invoke(reassign);
+    $[0] = value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 2 }],
+  sequentialRenders: [{ value: 2 }, { value: 4 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
+4
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-reactive-capture.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-reactive-capture.js
new file mode 100644
index 00000000000..5f11db367c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-reactive-capture.js
@@ -0,0 +1,16 @@
+import {invoke} from 'shared-runtime';
+
+function Component({value}) {
+  let x = null;
+  const reassign = () => {
+    x = value;
+  };
+  invoke(reassign);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 2}],
+  sequentialRenders: [{value: 2}, {value: 4}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-two-lambdas.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-two-lambdas.expect.md
new file mode 100644
index 00000000000..4ab74076756
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-two-lambdas.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {conditionalInvoke} from 'shared-runtime';
+
+function Component({doReassign1, doReassign2}) {
+  let x = {};
+  const reassign1 = () => {
+    x = 2;
+  };
+  const reassign2 = () => {
+    x = 3;
+  };
+  conditionalInvoke(doReassign1, reassign1);
+  conditionalInvoke(doReassign2, reassign2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{doReassign1: true, doReassign2: true}],
+  sequentialRenders: [
+    {doReassign1: true, doReassign2: true},
+    {doReassign1: true, doReassign2: false},
+    {doReassign1: false, doReassign2: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { conditionalInvoke } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { doReassign1, doReassign2 } = t0;
+  let x;
+  if ($[0] !== doReassign1 || $[1] !== doReassign2) {
+    x = {};
+    const reassign1 = () => {
+      x = 2;
+    };
+
+    const reassign2 = () => {
+      x = 3;
+    };
+
+    conditionalInvoke(doReassign1, reassign1);
+    conditionalInvoke(doReassign2, reassign2);
+    $[0] = doReassign1;
+    $[1] = doReassign2;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ doReassign1: true, doReassign2: true }],
+  sequentialRenders: [
+    { doReassign1: true, doReassign2: true },
+    { doReassign1: true, doReassign2: false },
+    { doReassign1: false, doReassign2: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 3
+2
+{}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-two-lambdas.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-two-lambdas.js
new file mode 100644
index 00000000000..5a7392d839f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-two-lambdas.js
@@ -0,0 +1,24 @@
+import {conditionalInvoke} from 'shared-runtime';
+
+function Component({doReassign1, doReassign2}) {
+  let x = {};
+  const reassign1 = () => {
+    x = 2;
+  };
+  const reassign2 = () => {
+    x = 3;
+  };
+  conditionalInvoke(doReassign1, reassign1);
+  conditionalInvoke(doReassign2, reassign2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{doReassign1: true, doReassign2: true}],
+  sequentialRenders: [
+    {doReassign1: true, doReassign2: true},
+    {doReassign1: true, doReassign2: false},
+    {doReassign1: false, doReassign2: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/controlled-input.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/controlled-input.expect.md
new file mode 100644
index 00000000000..1d7a816a95f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/controlled-input.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+function component() {
+  let [x, setX] = useState(0);
+  const handler = event => setX(event.target.value);
+  return <input onChange={handler} value={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+function component() {
+  const $ = _c(3);
+  const [x, setX] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (event) => setX(event.target.value);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const handler = t0;
+  let t1;
+  if ($[1] !== x) {
+    t1 = <input onChange={handler} value={x} />;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <input value="0">
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/controlled-input.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/controlled-input.js
new file mode 100644
index 00000000000..4f477c1ab8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/controlled-input.js
@@ -0,0 +1,12 @@
+import {useState} from 'react';
+function component() {
+  let [x, setX] = useState(0);
+  const handler = event => setX(event.target.value);
+  return <input onChange={handler} value={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md
new file mode 100644
index 00000000000..8f0033e086d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+import React from 'react';
+import {shallowCopy} from 'shared-runtime';
+
+function Component(props) {
+  const childProps = {style: {width: props.width}};
+  const element = React.createElement('div', childProps, ['hello world']);
+  shallowCopy(childProps); // function that in theory could mutate, we assume not bc createElement freezes
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import React from "react";
+import { shallowCopy } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.width) {
+    t0 = { style: { width: props.width } };
+    $[0] = props.width;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const childProps = t0;
+  let t1;
+  if ($[2] !== childProps) {
+    let t2;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = ["hello world"];
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = React.createElement("div", childProps, t2);
+    $[2] = childProps;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const element = t1;
+  shallowCopy(childProps);
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.js
new file mode 100644
index 00000000000..8b85f4f1c1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import {shallowCopy} from 'shared-runtime';
+
+function Component(props) {
+  const childProps = {style: {width: props.width}};
+  const element = React.createElement('div', childProps, ['hello world']);
+  shallowCopy(childProps); // function that in theory could mutate, we assume not bc createElement freezes
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/custom-opt-out-directive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/custom-opt-out-directive.expect.md
new file mode 100644
index 00000000000..ca69b5a0923
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/custom-opt-out-directive.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @customOptOutDirectives:["use todo memo"]
+function Component() {
+  'use todo memo';
+  return <div>hello world!</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @customOptOutDirectives:["use todo memo"]
+function Component() {
+  "use todo memo";
+  return <div>hello world!</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world!</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/custom-opt-out-directive.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/custom-opt-out-directive.tsx
new file mode 100644
index 00000000000..85e1583eb7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/custom-opt-out-directive.tsx
@@ -0,0 +1,10 @@
+// @expectNothingCompiled @customOptOutDirectives:["use todo memo"]
+function Component() {
+  'use todo memo';
+  return <div>hello world!</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-loop.expect.md
new file mode 100644
index 00000000000..37fa3847ad0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-loop.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  let x = 0;
+  let y = 0;
+  while (y < props.max) {
+    x++;
+    y++;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{max: 10}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo(props) {
+  let y = 0;
+  while (y < props.max) {
+    y++;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{ max: 10 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 10
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-loop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-loop.js
new file mode 100644
index 00000000000..31a361b30eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-loop.js
@@ -0,0 +1,15 @@
+function foo(props) {
+  let x = 0;
+  let y = 0;
+  while (y < props.max) {
+    x++;
+    y++;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{max: 10}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-const.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-const.expect.md
new file mode 100644
index 00000000000..ca601add0b0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-const.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const _ = 42;
+  return props.value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  return props.value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-const.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-const.js
new file mode 100644
index 00000000000..cf2850bfb64
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-const.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const _ = 42;
+  return props.value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-postfix-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-postfix-update.expect.md
new file mode 100644
index 00000000000..39aa901cbd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-postfix-update.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let i = 0;
+  i++;
+  i = props.i;
+  return i;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{i: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let i;
+
+  i = props.i;
+  return i;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ i: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-postfix-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-postfix-update.js
new file mode 100644
index 00000000000..da67d5ed74b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-postfix-update.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  let i = 0;
+  i++;
+  i = props.i;
+  return i;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{i: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-prefix-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-prefix-update.expect.md
new file mode 100644
index 00000000000..ef30c992ef7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-prefix-update.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let i = 0;
+  --i;
+  i = props.i;
+  return i;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{i: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let i;
+
+  i = props.i;
+  return i;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ i: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-prefix-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-prefix-update.js
new file mode 100644
index 00000000000..a14527255f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dce-unused-prefix-update.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  let i = 0;
+  --i;
+  i = props.i;
+  return i;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{i: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md
new file mode 100644
index 00000000000..ef4b8ce7b47
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  debugger;
+  x.push(props.value);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.value) {
+    x = [];
+    debugger;
+
+    x.push(props.value);
+    $[0] = props.value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.js
new file mode 100644
index 00000000000..fa899c11e3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const x = [];
+  debugger;
+  x.push(props.value);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger.expect.md
new file mode 100644
index 00000000000..b1eddc5d439
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  debugger;
+  if (props.cond) {
+    debugger;
+  } else {
+    while (props.cond) {
+      debugger;
+    }
+  }
+  debugger;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  debugger;
+
+  if (props.cond) {
+    debugger;
+  } else {
+    while (props.cond) {
+      debugger;
+    }
+  }
+  debugger;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger.js
new file mode 100644
index 00000000000..450f243d8b2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger.js
@@ -0,0 +1,17 @@
+function Component(props) {
+  debugger;
+  if (props.cond) {
+    debugger;
+  } else {
+    while (props.cond) {
+      debugger;
+    }
+  }
+  debugger;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md
new file mode 100644
index 00000000000..7ec870921f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(p) {
+  let x;
+  const foo = () => {
+    x = {};
+  };
+  foo();
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(p) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const foo = () => {
+      x = {};
+    };
+
+    foo();
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.js
new file mode 100644
index 00000000000..d69479ba749
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.js
@@ -0,0 +1,15 @@
+function Component(p) {
+  let x;
+  const foo = () => {
+    x = {};
+  };
+  foo();
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-function-expressions-with-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-function-expressions-with-params.expect.md
new file mode 100644
index 00000000000..7d0a1ffed1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-function-expressions-with-params.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Foo() {
+  return (function t() {
+    let x = {};
+    let y = {};
+    return function a(x = () => {}) {
+      return (function b(y = []) {
+        return [x, y];
+      })();
+    };
+  })();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function a(t1) {
+      const x_0 = t1 === undefined ? _temp : t1;
+      return (function b(t2) {
+        const y_0 = t2 === undefined ? [] : t2;
+        return [x_0, y_0];
+      })();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-function-expressions-with-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-function-expressions-with-params.js
new file mode 100644
index 00000000000..310204ae62c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-function-expressions-with-params.js
@@ -0,0 +1,16 @@
+function Foo() {
+  return (function t() {
+    let x = {};
+    let y = {};
+    return function a(x = () => {}) {
+      return (function b(y = []) {
+        return [x, y];
+      })();
+    };
+  })();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-array-with-unary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-array-with-unary.expect.md
new file mode 100644
index 00000000000..db406da6a18
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-array-with-unary.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component(x = [-1, 1]) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? [-1, 1] : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [-1,1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-array-with-unary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-array-with-unary.js
new file mode 100644
index 00000000000..bf0dd4b5ffe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-array-with-unary.js
@@ -0,0 +1,8 @@
+function Component(x = [-1, 1]) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-calls-global-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-calls-global-function.expect.md
new file mode 100644
index 00000000000..0cd9742942a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-calls-global-function.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(x = identity([() => {}, true, 42, 'hello'])) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? identity([_temp, true, 42, "hello"]) : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  return x;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["[[ function params=0 ]]",true,42,"hello"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-calls-global-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-calls-global-function.js
new file mode 100644
index 00000000000..d8981d97b9e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-calls-global-function.js
@@ -0,0 +1,10 @@
+import {identity} from 'shared-runtime';
+
+function Component(x = identity([() => {}, true, 42, 'hello'])) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-empty-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-empty-callback.expect.md
new file mode 100644
index 00000000000..43249cfc1e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-empty-callback.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(x = () => {}) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(t0) {
+  const x = t0 === undefined ? _temp : t0;
+  return x;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-empty-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-empty-callback.js
new file mode 100644
index 00000000000..03403534087
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-empty-callback.js
@@ -0,0 +1,8 @@
+function Component(x = () => {}) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-reorderable-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-reorderable-callback.expect.md
new file mode 100644
index 00000000000..e0b0b51308a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-reorderable-callback.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(x = () => [-1, true, 42.0, 'hello']) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(t0) {
+  const x = t0 === undefined ? _temp : t0;
+  return x;
+}
+function _temp() {
+  return [-1, true, 42, "hello"];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-reorderable-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-reorderable-callback.js
new file mode 100644
index 00000000000..4034364ec9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/default-param-with-reorderable-callback.js
@@ -0,0 +1,8 @@
+function Component(x = () => [-1, true, 42.0, 'hello']) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md
new file mode 100644
index 00000000000..02be1a0ca47
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {a: props.a, b: props.b};
+  const key = 'b';
+  delete x[key];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    x = { a: props.a, b: props.b };
+
+    delete x["b"];
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.js
new file mode 100644
index 00000000000..5cc8ceb8e1e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const x = {a: props.a, b: props.b};
+  const key = 'b';
+  delete x[key];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md
new file mode 100644
index 00000000000..a68721b5a22
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {a: props.a, b: props.b};
+  delete x.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    x = { a: props.a, b: props.b };
+    delete x.b;
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.js
new file mode 100644
index 00000000000..4d0354f3c31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const x = {a: props.a, b: props.b};
+  delete x.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md
new file mode 100644
index 00000000000..70eeecdda95
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  const x = [];
+  x.push(a);
+  <div>{x}</div>;
+
+  const y = [];
+  if (x.length) {
+    y.push(x);
+  }
+  if (b) {
+    y.push(b);
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== a) {
+    x = [];
+    x.push(a);
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let y;
+  if ($[2] !== b || $[3] !== x) {
+    y = [];
+    if (x.length) {
+      y.push(x);
+    }
+
+    if (b) {
+      y.push(b);
+    }
+    $[2] = b;
+    $[3] = x;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.js
new file mode 100644
index 00000000000..4aed98527db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.js
@@ -0,0 +1,20 @@
+function foo(a, b) {
+  const x = [];
+  x.push(a);
+  <div>{x}</div>;
+
+  const y = [];
+  if (x.length) {
+    y.push(x);
+  }
+  if (b) {
+    y.push(b);
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md
new file mode 100644
index 00000000000..783ad41fd4f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function foo(x, y, z) {
+  const items = [z];
+  items.push(x);
+
+  const items2 = [];
+  if (x) {
+    items2.push(y);
+  }
+
+  if (y) {
+    items.push(x);
+  }
+
+  return items2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(x, y, z) {
+  const $ = _c(3);
+  const items = [z];
+  items.push(x);
+  let items2;
+  if ($[0] !== x || $[1] !== y) {
+    items2 = [];
+    if (x) {
+      items2.push(y);
+    }
+    $[0] = x;
+    $[1] = y;
+    $[2] = items2;
+  } else {
+    items2 = $[2];
+  }
+
+  if (y) {
+    items.push(x);
+  }
+  return items2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.js
new file mode 100644
index 00000000000..206ee7a1068
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.js
@@ -0,0 +1,21 @@
+function foo(x, y, z) {
+  const items = [z];
+  items.push(x);
+
+  const items2 = [];
+  if (x) {
+    items2.push(y);
+  }
+
+  if (y) {
+    items.push(x);
+  }
+
+  return items2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md
new file mode 100644
index 00000000000..1268cbcfdc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  [x] = props.value;
+  const foo = () => {
+    x = identity(props.value[0]);
+  };
+  foo();
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [42]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.value) {
+    const [t0] = props.value;
+    x = t0;
+    const foo = () => {
+      x = identity(props.value[0]);
+    };
+
+    foo();
+    $[0] = props.value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = { x };
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [42] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":42}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.js
new file mode 100644
index 00000000000..349bea080c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.js
@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  [x] = props.value;
+  const foo = () => {
+    x = identity(props.value[0]);
+  };
+  foo();
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [42]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md
new file mode 100644
index 00000000000..769e4871f4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let [x] = props.value;
+  const foo = () => {
+    x = identity(props.value[0]);
+  };
+  foo();
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [42]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.value) {
+    const [t0] = props.value;
+    x = t0;
+    const foo = () => {
+      x = identity(props.value[0]);
+    };
+
+    foo();
+    $[0] = props.value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = <div>{x}</div>;
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [42] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.js
new file mode 100644
index 00000000000..bc9324a35f0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.js
@@ -0,0 +1,15 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let [x] = props.value;
+  const foo = () => {
+    x = identity(props.value[0]);
+  };
+  foo();
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [42]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-capture-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-capture-global.expect.md
new file mode 100644
index 00000000000..cbe56f29c07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-capture-global.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+let someGlobal = {};
+function component(a) {
+  let x = {a, someGlobal};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['value 1'],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+let someGlobal = {};
+function component(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a, someGlobal };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["value 1"],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":"value 1","someGlobal":{}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-capture-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-capture-global.js
new file mode 100644
index 00000000000..926a18e1e4b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-capture-global.js
@@ -0,0 +1,11 @@
+let someGlobal = {};
+function component(a) {
+  let x = {a, someGlobal};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['value 1'],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-default-array-with-unary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-default-array-with-unary.expect.md
new file mode 100644
index 00000000000..de9083fbec8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-default-array-with-unary.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [x = [-1, 1]] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: []}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const [t0] = props.value;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? [-1, 1] : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [-1,1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-default-array-with-unary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-default-array-with-unary.js
new file mode 100644
index 00000000000..56f1ab229a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-default-array-with-unary.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const [x = [-1, 1]] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: []}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md
new file mode 100644
index 00000000000..3b2768d350a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function foo(props) {
+  let x, y;
+  ({x, y} = {x: props.a, y: props.b});
+  console.log(x); // prevent DCE from eliminating `x` altogether
+  x = props.c;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function foo(props) {
+  let x;
+  let y;
+  ({ x, y } = { x: props.a, y: props.b });
+  console.log(x);
+  x = props.c;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js
new file mode 100644
index 00000000000..ec10d66f26d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js
@@ -0,0 +1,14 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+function foo(props) {
+  let x, y;
+  ({x, y} = {x: props.a, y: props.b});
+  console.log(x); // prevent DCE from eliminating `x` altogether
+  x = props.c;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md
new file mode 100644
index 00000000000..b1597891062
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+function useFoo(props: {
+  x?: string;
+  y?: string;
+  z?: string;
+  doDestructure: boolean;
+}) {
+  let x = null;
+  let y = null;
+  let z = null;
+  const myList = [];
+  if (props.doDestructure) {
+    ({x, y, z} = props);
+
+    myList.push(z);
+  }
+  return {
+    x,
+    y,
+    myList,
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{x: 'hello', y: 'world', doDestructure: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(props) {
+  const $ = _c(9);
+
+  let x = null;
+  let y = null;
+  let z;
+  let myList;
+  if ($[0] !== props) {
+    myList = [];
+    if (props.doDestructure) {
+      ({ x, y, z } = props);
+
+      myList.push(z);
+    }
+    $[0] = props;
+    $[1] = myList;
+    $[2] = x;
+    $[3] = y;
+    $[4] = z;
+  } else {
+    myList = $[1];
+    x = $[2];
+    y = $[3];
+    z = $[4];
+  }
+  let t0;
+  if ($[5] !== myList || $[6] !== x || $[7] !== y) {
+    t0 = { x, y, myList };
+    $[5] = myList;
+    $[6] = x;
+    $[7] = y;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ x: "hello", y: "world", doDestructure: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":"hello","y":"world","myList":[null]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.ts
new file mode 100644
index 00000000000..68ebba9322d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.ts
@@ -0,0 +1,26 @@
+function useFoo(props: {
+  x?: string;
+  y?: string;
+  z?: string;
+  doDestructure: boolean;
+}) {
+  let x = null;
+  let y = null;
+  let z = null;
+  const myList = [];
+  if (props.doDestructure) {
+    ({x, y, z} = props);
+
+    myList.push(z);
+  }
+  return {
+    x,
+    y,
+    myList,
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{x: 'hello', y: 'world', doDestructure: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-mixed-property-key-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-mixed-property-key-types.expect.md
new file mode 100644
index 00000000000..559cd444526
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-mixed-property-key-types.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function foo() {
+  const {'data-foo-bar': x, a: y, data: z} = {'data-foo-bar': 1, a: 2, data: 3};
+  return [x, y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { "data-foo-bar": 1, a: 2, data: 3 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const { "data-foo-bar": x, a: y, data: z } = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [x, y, z];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,2,3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-mixed-property-key-types.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-mixed-property-key-types.js
new file mode 100644
index 00000000000..5cda90c4d53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-mixed-property-key-types.js
@@ -0,0 +1,10 @@
+function foo() {
+  const {'data-foo-bar': x, a: y, data: z} = {'data-foo-bar': 1, a: 2, data: 3};
+  return [x, y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md
new file mode 100644
index 00000000000..e66ef2df13d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  ({x} = props);
+  const foo = () => {
+    x = identity(props.x);
+  };
+  foo();
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props) {
+    const { x: t0 } = props;
+    x = t0;
+    const foo = () => {
+      x = identity(props.x);
+    };
+
+    foo();
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = { x };
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":42}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.js
new file mode 100644
index 00000000000..d2a5c7d52c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.js
@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  ({x} = props);
+  const foo = () => {
+    x = identity(props.x);
+  };
+  foo();
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md
new file mode 100644
index 00000000000..66799c5c472
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let {x} = props;
+  const foo = () => {
+    x = identity(props.x);
+  };
+  foo();
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props) {
+    const { x: t0 } = props;
+    x = t0;
+    const foo = () => {
+      x = identity(props.x);
+    };
+
+    foo();
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = { x };
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":42}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.js
new file mode 100644
index 00000000000..bf1c778bc2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.js
@@ -0,0 +1,15 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let {x} = props;
+  const foo = () => {
+    x = identity(props.x);
+  };
+  foo();
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key-invalid-identifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key-invalid-identifier.expect.md
new file mode 100644
index 00000000000..56213c82566
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key-invalid-identifier.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function foo({'data-foo-bar': dataTestID}) {
+  return dataTestID;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{'data-foo-bar': {}}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo(t0) {
+  const { "data-foo-bar": dataTestID } = t0;
+  return dataTestID;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{ "data-foo-bar": {} }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key-invalid-identifier.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key-invalid-identifier.js
new file mode 100644
index 00000000000..a402345d5c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key-invalid-identifier.js
@@ -0,0 +1,9 @@
+function foo({'data-foo-bar': dataTestID}) {
+  return dataTestID;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{'data-foo-bar': {}}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key.expect.md
new file mode 100644
index 00000000000..5b30debae77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function foo({data: dataTestID}) {
+  return dataTestID;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{data: {}}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo(t0) {
+  const { data: dataTestID } = t0;
+  return dataTestID;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{ data: {} }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key.js
new file mode 100644
index 00000000000..9749e11d46d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-param-string-literal-key.js
@@ -0,0 +1,9 @@
+function foo({data: dataTestID}) {
+  return dataTestID;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{data: {}}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-invalid-identifier-property-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-invalid-identifier-property-key.expect.md
new file mode 100644
index 00000000000..ba35e5af57b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-invalid-identifier-property-key.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function foo() {
+  const {'data-foo-bar': t} = {'data-foo-bar': 1};
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { "data-foo-bar": 1 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const { "data-foo-bar": t } = t0;
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-invalid-identifier-property-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-invalid-identifier-property-key.js
new file mode 100644
index 00000000000..3d6eb9d95ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-invalid-identifier-property-key.js
@@ -0,0 +1,10 @@
+function foo() {
+  const {'data-foo-bar': t} = {'data-foo-bar': 1};
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-property-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-property-key.expect.md
new file mode 100644
index 00000000000..b233f52cb69
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-property-key.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function foo() {
+  const {data: t} = {data: 1};
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { data: 1 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const { data: t } = t0;
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-property-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-property-key.js
new file mode 100644
index 00000000000..6bb26396ba2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-string-literal-property-key.js
@@ -0,0 +1,10 @@
+function foo() {
+  const {data: t} = {data: 1};
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-default.expect.md
new file mode 100644
index 00000000000..971f9a1f4e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-default.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [[x] = ['default']] = props.y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const [t0] = props.y;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? ["default"] : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [x] = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-default.js
new file mode 100644
index 00000000000..e744d01265f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-default.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const [[x] = ['default']] = props.y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-param-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-param-default.expect.md
new file mode 100644
index 00000000000..414d3b1801a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-param-default.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component([a = 2]) {
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(t0) {
+  const [t1] = t0;
+  const a = t1 === undefined ? 2 : t1;
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-param-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-param-default.js
new file mode 100644
index 00000000000..37a48cda67d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-array-param-default.js
@@ -0,0 +1,9 @@
+function Component([a = 2]) {
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment-array-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment-array-default.expect.md
new file mode 100644
index 00000000000..fca6ebc8d40
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment-array-default.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  if (props.cond) {
+    [[x] = ['default']] = props.y;
+  } else {
+    x = props.fallback;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if (props.cond) {
+    const [t0] = props.y;
+    let t1;
+    if ($[0] !== t0) {
+      t1 = t0 === undefined ? ["default"] : t0;
+      $[0] = t0;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    [x] = t1;
+  } else {
+    x = props.fallback;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment-array-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment-array-default.js
new file mode 100644
index 00000000000..6561b0cd988
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment-array-default.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  let x;
+  if (props.cond) {
+    [[x] = ['default']] = props.y;
+  } else {
+    x = props.fallback;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md
new file mode 100644
index 00000000000..98025e3fa99
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let d, g, n, o;
+  [
+    d,
+    [
+      {
+        e: {f: g},
+      },
+    ],
+  ] = a;
+  ({
+    l: {
+      m: [[n]],
+    },
+    o,
+  } = b);
+  return {d, g, n, o};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(5);
+  let d;
+  let g;
+  let n;
+  let o;
+  const [t0, t1] = a;
+  d = t0;
+  const [t2] = t1;
+  const { e: t3 } = t2;
+  ({ f: g } = t3);
+  const { l: t4, o: t5 } = b;
+  const { m: t6 } = t4;
+  const [t7] = t6;
+  [n] = t7;
+  o = t5;
+  let t8;
+  if ($[0] !== d || $[1] !== g || $[2] !== n || $[3] !== o) {
+    t8 = { d, g, n, o };
+    $[0] = d;
+    $[1] = g;
+    $[2] = n;
+    $[3] = o;
+    $[4] = t8;
+  } else {
+    t8 = $[4];
+  }
+  return t8;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.js
new file mode 100644
index 00000000000..7b61954c196
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.js
@@ -0,0 +1,24 @@
+function foo(a, b, c) {
+  let d, g, n, o;
+  [
+    d,
+    [
+      {
+        e: {f: g},
+      },
+    ],
+  ] = a;
+  ({
+    l: {
+      m: [[n]],
+    },
+    o,
+  } = b);
+  return {d, g, n, o};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-array-hole.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-array-hole.expect.md
new file mode 100644
index 00000000000..17db0c2263a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-array-hole.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // destructure slot index has a hole in the input, should return default
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [, /* hole! */ 3.14]}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const [t0] = props.value;
+  const x = t0 === undefined ? 42 : t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [, /* hole! */ 3.14] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-array-hole.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-array-hole.js
new file mode 100644
index 00000000000..1495095de04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-array-hole.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  // destructure slot index has a hole in the input, should return default
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [, /* hole! */ 3.14]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-null.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-null.expect.md
new file mode 100644
index 00000000000..d51ef440a6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-null.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // destructure slot index has an explicit null in the input, should return null (not the default)
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [null]}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const [t0] = props.value;
+  const x = t0 === undefined ? 42 : t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [null] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-null.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-null.js
new file mode 100644
index 00000000000..7b41f5e01e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-null.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  // destructure slot index has an explicit null in the input, should return null (not the default)
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [null]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-undefined.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-undefined.expect.md
new file mode 100644
index 00000000000..8c1058adf6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-undefined.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // destructure slot index has an explicit undefined in the input, should return default
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [undefined]}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const [t0] = props.value;
+  const x = t0 === undefined ? 42 : t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [undefined] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-undefined.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-undefined.js
new file mode 100644
index 00000000000..ea3a917fc60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-at-explicit-undefined.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  // destructure slot index has an explicit undefined in the input, should return default
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: [undefined]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-past-end-of-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-past-end-of-array.expect.md
new file mode 100644
index 00000000000..2bc5f650e1d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-past-end-of-array.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // destructure past end of empty array, should evaluate to default
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: []}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const [t0] = props.value;
+  const x = t0 === undefined ? 42 : t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: [] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-past-end-of-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-past-end-of-array.js
new file mode 100644
index 00000000000..6050d72ed7c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-default-past-end-of-array.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  // destructure past end of empty array, should evaluate to default
+  const [x = 42] = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: []}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md
new file mode 100644
index 00000000000..3a8f9e84cac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md
@@ -0,0 +1,131 @@
+
+## Input
+
+```javascript
+import {Stringify, graphql} from 'shared-runtime';
+
+function useFragment(_arg1, _arg2) {
+  'use no forget';
+  return {
+    urls: ['url1', 'url2', 'url3'],
+    comments: ['comment1'],
+  };
+}
+
+function Component(props) {
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
+  const allUrls = [];
+  // `media` and `urls` are exported from the scope that will wrap this code,
+  // but `comments` is not (it doesn't need to be memoized, bc the callback
+  // only checks `comments.length`)
+  // because of the scope, the let declaration for media and urls are lifted
+  // out of the scope, and the destructure statement ends up turning into
+  // a reassignment, instead of a const declaration. this means we try to
+  // reassign `comments` when there's no declaration for it.
+  const {media = null, comments = [], urls = []} = post;
+  const onClick = e => {
+    if (!comments.length) {
+      return;
+    }
+    console.log(comments.length);
+  };
+  allUrls.push(...urls);
+  return <Stringify media={media} allUrls={allUrls} onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{post: {}}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, graphql } from "shared-runtime";
+
+function useFragment(_arg1, _arg2) {
+  "use no forget";
+  return {
+    urls: ["url1", "url2", "url3"],
+    comments: ["comment1"],
+  };
+}
+
+function Component(props) {
+  const $ = _c(8);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post,
+  );
+  let t0;
+  if ($[0] !== post) {
+    const allUrls = [];
+    const { media: t1, comments: t2, urls: t3 } = post;
+    const media = t1 === undefined ? null : t1;
+    let t4;
+    if ($[2] !== t2) {
+      t4 = t2 === undefined ? [] : t2;
+      $[2] = t2;
+      $[3] = t4;
+    } else {
+      t4 = $[3];
+    }
+    const comments = t4;
+    let t5;
+    if ($[4] !== t3) {
+      t5 = t3 === undefined ? [] : t3;
+      $[4] = t3;
+      $[5] = t5;
+    } else {
+      t5 = $[5];
+    }
+    const urls = t5;
+    let t6;
+    if ($[6] !== comments.length) {
+      t6 = (e) => {
+        if (!comments.length) {
+          return;
+        }
+        console.log(comments.length);
+      };
+      $[6] = comments.length;
+      $[7] = t6;
+    } else {
+      t6 = $[7];
+    }
+    const onClick = t6;
+    allUrls.push(...urls);
+    t0 = <Stringify media={media} allUrls={allUrls} onClick={onClick} />;
+    $[0] = post;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ post: {} }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"media":null,"allUrls":["url1","url2","url3"],"onClick":"[[ function params=1 ]]"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.js
new file mode 100644
index 00000000000..3aa47dca46f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.js
@@ -0,0 +1,43 @@
+import {Stringify, graphql} from 'shared-runtime';
+
+function useFragment(_arg1, _arg2) {
+  'use no forget';
+  return {
+    urls: ['url1', 'url2', 'url3'],
+    comments: ['comment1'],
+  };
+}
+
+function Component(props) {
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
+  const allUrls = [];
+  // `media` and `urls` are exported from the scope that will wrap this code,
+  // but `comments` is not (it doesn't need to be memoized, bc the callback
+  // only checks `comments.length`)
+  // because of the scope, the let declaration for media and urls are lifted
+  // out of the scope, and the destructure statement ends up turning into
+  // a reassignment, instead of a const declaration. this means we try to
+  // reassign `comments` when there's no declaration for it.
+  const {media = null, comments = [], urls = []} = post;
+  const onClick = e => {
+    if (!comments.length) {
+      return;
+    }
+    console.log(comments.length);
+  };
+  allUrls.push(...urls);
+  return <Stringify media={media} allUrls={allUrls} onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{post: {}}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md
new file mode 100644
index 00000000000..fbb6e50871d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
+  const allUrls = [];
+  // `media` and `urls` are exported from the scope that will wrap this code,
+  // but `comments` is not (it doesn't need to be memoized, bc the callback
+  // only checks `comments.length`)
+  // because of the scope, the let declaration for media and urls are lifted
+  // out of the scope, and the destructure statement ends up turning into
+  // a reassignment, instead of a const declaration. this means we try to
+  // reassign `comments` when there's no declaration for it.
+  const {media, comments, urls} = post;
+  const onClick = e => {
+    if (!comments.length) {
+      return;
+    }
+    console.log(comments.length);
+  };
+  allUrls.push(...urls);
+  return <Media media={media} onClick={onClick} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useFragment } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post,
+  );
+  let t0;
+  if ($[0] !== post) {
+    const allUrls = [];
+    const { media, comments, urls } = post;
+    let t1;
+    if ($[2] !== comments.length) {
+      t1 = (e) => {
+        if (!comments.length) {
+          return;
+        }
+        console.log(comments.length);
+      };
+      $[2] = comments.length;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    const onClick = t1;
+    allUrls.push(...urls);
+    t0 = <Media media={media} onClick={onClick} />;
+    $[0] = post;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js
new file mode 100644
index 00000000000..5d1377c4588
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js
@@ -0,0 +1,29 @@
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const post = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.post
+  );
+  const allUrls = [];
+  // `media` and `urls` are exported from the scope that will wrap this code,
+  // but `comments` is not (it doesn't need to be memoized, bc the callback
+  // only checks `comments.length`)
+  // because of the scope, the let declaration for media and urls are lifted
+  // out of the scope, and the destructure statement ends up turning into
+  // a reassignment, instead of a const declaration. this means we try to
+  // reassign `comments` when there's no declaration for it.
+  const {media, comments, urls} = post;
+  const onClick = e => {
+    if (!comments.length) {
+      return;
+    }
+    console.log(comments.length);
+  };
+  allUrls.push(...urls);
+  return <Media media={media} onClick={onClick} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-default.expect.md
new file mode 100644
index 00000000000..48ae27c74e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-default.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const {x: {y} = {y: 'default'}} = props.y;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const { x: t0 } = props.y;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? { y: "default" } : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const { y } = t1;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-default.js
new file mode 100644
index 00000000000..e9d7f3477f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-default.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const {x: {y} = {y: 'default'}} = props.y;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-param-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-param-default.expect.md
new file mode 100644
index 00000000000..3e2322fc9fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-param-default.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component({a = 2}) {
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(t0) {
+  const { a: t1 } = t0;
+  const a = t1 === undefined ? 2 : t1;
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-param-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-param-default.js
new file mode 100644
index 00000000000..180625d2492
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-param-default.js
@@ -0,0 +1,9 @@
+function Component({a = 2}) {
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-pattern-within-rest.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-pattern-within-rest.expect.md
new file mode 100644
index 00000000000..677107be83a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-pattern-within-rest.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [y, ...{z}] = props.value;
+  return [y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: ['y', {z: 'z!'}]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  let y;
+  if ($[0] !== props.value) {
+    [y, ...t0] = props.value;
+    $[0] = props.value;
+    $[1] = t0;
+    $[2] = y;
+  } else {
+    t0 = $[1];
+    y = $[2];
+  }
+  const { z } = t0;
+  let t1;
+  if ($[3] !== y || $[4] !== z) {
+    t1 = [y, z];
+    $[3] = y;
+    $[4] = z;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: ["y", { z: "z!" }] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["y",null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-pattern-within-rest.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-pattern-within-rest.js
new file mode 100644
index 00000000000..ebf4e4839ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-object-pattern-within-rest.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const [y, ...{z}] = props.value;
+  return [y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: ['y', {z: 'z!'}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md
new file mode 100644
index 00000000000..a43d5756096
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  x.push(props.value);
+  const {length: y} = x;
+  foo(y);
+  return [x, y];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.value) {
+    x = [];
+    x.push(props.value);
+    $[0] = props.value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  const { length: y } = x;
+  foo(y);
+  let t0;
+  if ($[2] !== x || $[3] !== y) {
+    t0 = [x, y];
+    $[2] = x;
+    $[3] = y;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.js
new file mode 100644
index 00000000000..179b266efaa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  const x = [];
+  x.push(props.value);
+  const {length: y} = x;
+  foo(y);
+  return [x, y];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-same-property-identifier-names.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-same-property-identifier-names.expect.md
new file mode 100644
index 00000000000..3e1c4771eab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-same-property-identifier-names.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const {
+    x: {destructured},
+    sameName: renamed,
+  } = props;
+  const sameName = identity(destructured);
+
+  return [sameName, renamed];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {destructured: 0}, sameName: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  const { x: t0, sameName: renamed } = props;
+  const { destructured } = t0;
+  let t1;
+  if ($[0] !== destructured) {
+    t1 = identity(destructured);
+    $[0] = destructured;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const sameName = t1;
+  let t2;
+  if ($[2] !== renamed || $[3] !== sameName) {
+    t2 = [sameName, renamed];
+    $[2] = renamed;
+    $[3] = sameName;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: { destructured: 0 }, sameName: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-same-property-identifier-names.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-same-property-identifier-names.js
new file mode 100644
index 00000000000..73faee9ab1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-same-property-identifier-names.js
@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const {
+    x: {destructured},
+    sameName: renamed,
+  } = props;
+  const sameName = identity(destructured);
+
+  return [sameName, renamed];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {destructured: 0}, sameName: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-conditional-as-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-conditional-as-default-value.expect.md
new file mode 100644
index 00000000000..f981cf0c2d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-conditional-as-default-value.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [x = true ? 1 : 0] = props.y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: []}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const [t0] = props.y;
+  const x = t0 === undefined ? (true ? 1 : 0) : t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: [] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-conditional-as-default-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-conditional-as-default-value.js
new file mode 100644
index 00000000000..4b8cf1b25dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-conditional-as-default-value.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const [x = true ? 1 : 0] = props.y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: []}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-typecast-as-default-value.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-typecast-as-default-value.flow.expect.md
new file mode 100644
index 00000000000..6fce86805e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-typecast-as-default-value.flow.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @flow
+function Component(props) {
+  const [x = ([]: Array<number>)] = props.y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: []}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const [t0] = props.y;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? ([]: Array<number>) : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: [] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-typecast-as-default-value.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-typecast-as-default-value.flow.js
new file mode 100644
index 00000000000..6de20262bd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-with-typecast-as-default-value.flow.js
@@ -0,0 +1,10 @@
+// @flow
+function Component(props) {
+  const [x = ([]: Array<number>)] = props.y;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: []}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring.expect.md
new file mode 100644
index 00000000000..f292e83e164
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring.expect.md
@@ -0,0 +1,112 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const [
+    d,
+    [
+      {
+        e: {f},
+        ...g
+      },
+    ],
+    ...h
+  ] = a;
+  const {
+    l: {
+      m: [[n], ...o],
+    },
+    p,
+  } = b;
+  return [d, f, g, h, n, o, p];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(18);
+  let d;
+  let h;
+  let t0;
+  if ($[0] !== a) {
+    [d, t0, ...h] = a;
+    $[0] = a;
+    $[1] = d;
+    $[2] = h;
+    $[3] = t0;
+  } else {
+    d = $[1];
+    h = $[2];
+    t0 = $[3];
+  }
+  const [t1] = t0;
+  let g;
+  let t2;
+  if ($[4] !== t1) {
+    ({ e: t2, ...g } = t1);
+    $[4] = t1;
+    $[5] = g;
+    $[6] = t2;
+  } else {
+    g = $[5];
+    t2 = $[6];
+  }
+  const { f } = t2;
+  const { l: t3, p } = b;
+  const { m: t4 } = t3;
+  let o;
+  let t5;
+  if ($[7] !== t4) {
+    [t5, ...o] = t4;
+    $[7] = t4;
+    $[8] = o;
+    $[9] = t5;
+  } else {
+    o = $[8];
+    t5 = $[9];
+  }
+  const [n] = t5;
+  let t6;
+  if (
+    $[10] !== d ||
+    $[11] !== f ||
+    $[12] !== g ||
+    $[13] !== h ||
+    $[14] !== n ||
+    $[15] !== o ||
+    $[16] !== p
+  ) {
+    t6 = [d, f, g, h, n, o, p];
+    $[10] = d;
+    $[11] = f;
+    $[12] = g;
+    $[13] = h;
+    $[14] = n;
+    $[15] = o;
+    $[16] = p;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring.js
new file mode 100644
index 00000000000..9b9db33cf70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring.js
@@ -0,0 +1,25 @@
+function foo(a, b, c) {
+  const [
+    d,
+    [
+      {
+        e: {f},
+        ...g
+      },
+    ],
+    ...h
+  ] = a;
+  const {
+    l: {
+      m: [[n], ...o],
+    },
+    p,
+  } = b;
+  return [d, f, g, h, n, o, p];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-break.expect.md
new file mode 100644
index 00000000000..35fcda1c124
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-break.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  do {
+    break;
+  } while (props.cond);
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-break.js
new file mode 100644
index 00000000000..3975854f92a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-break.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  do {
+    break;
+  } while (props.cond);
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md
new file mode 100644
index 00000000000..845955d5c83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [1, 2, 3];
+  let ret = [];
+  do {
+    let item = x.pop();
+    ret.push(item * 2);
+  } while (x.length && props.cond);
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let ret;
+  if ($[0] !== props) {
+    const x = [1, 2, 3];
+    ret = [];
+    do {
+      const item = x.pop();
+      ret.push(item * 2);
+    } while (x.length && props.cond);
+    $[0] = props;
+    $[1] = ret;
+  } else {
+    ret = $[1];
+  }
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.js
new file mode 100644
index 00000000000..50f8f86264e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  let x = [1, 2, 3];
+  let ret = [];
+  do {
+    let item = x.pop();
+    ret.push(item * 2);
+  } while (x.length && props.cond);
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-conditional-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-conditional-break.expect.md
new file mode 100644
index 00000000000..1dd74b2d934
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-conditional-break.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [0, 1, 2, 3];
+  do {
+    if (x === 0) {
+      break;
+    }
+    mutate(x);
+  } while (props.cond);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props) {
+    x = [0, 1, 2, 3];
+    do {
+      if (x === 0) {
+        break;
+      }
+
+      mutate(x);
+    } while (props.cond);
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-conditional-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-conditional-break.js
new file mode 100644
index 00000000000..c64286efc34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-conditional-break.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  let x = [0, 1, 2, 3];
+  do {
+    if (x === 0) {
+      break;
+    }
+    mutate(x);
+  } while (props.cond);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md
new file mode 100644
index 00000000000..c40110f44b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = [0, 1, 2, 3];
+  const ret = [];
+  do {
+    const item = x.pop();
+    if (item === 0) {
+      continue;
+    }
+    ret.push(item / 2);
+  } while (x.length);
+
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let ret;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [0, 1, 2, 3];
+    ret = [];
+    do {
+      const item = x.pop();
+      if (item === 0) {
+        continue;
+      }
+
+      ret.push(item / 2);
+    } while (x.length);
+    $[0] = ret;
+  } else {
+    ret = $[0];
+  }
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [1.5,1,0.5]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.js
new file mode 100644
index 00000000000..bf355adb280
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.js
@@ -0,0 +1,19 @@
+function Component() {
+  const x = [0, 1, 2, 3];
+  const ret = [];
+  do {
+    const item = x.pop();
+    if (item === 0) {
+      continue;
+    }
+    ret.push(item / 2);
+  } while (x.length);
+
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md
new file mode 100644
index 00000000000..1e79a239dd0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [1, 2, 3];
+  do {
+    mutate(x);
+    break;
+  } while (props.cond);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = [1, 2, 3];
+
+    mutate(x);
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.js
new file mode 100644
index 00000000000..764f2d4be9f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.js
@@ -0,0 +1,8 @@
+function Component(props) {
+  let x = [1, 2, 3];
+  do {
+    mutate(x);
+    break;
+  } while (props.cond);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md
new file mode 100644
index 00000000000..9bafc6d8efb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component() {
+  let x = [1, 2, 3];
+  let ret = [];
+  do {
+    let item = x.pop();
+    ret.push(item * 2);
+  } while (x.length);
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let ret;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [1, 2, 3];
+    ret = [];
+    do {
+      const item = x.pop();
+      ret.push(item * 2);
+    } while (x.length);
+    $[0] = ret;
+  } else {
+    ret = $[0];
+  }
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [6,4,2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.js
new file mode 100644
index 00000000000..ac836aee747
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.js
@@ -0,0 +1,15 @@
+function Component() {
+  let x = [1, 2, 3];
+  let ret = [];
+  do {
+    let item = x.pop();
+    ret.push(item * 2);
+  } while (x.length);
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dominator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dominator.expect.md
new file mode 100644
index 00000000000..508a7b62581
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dominator.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  label: if (props.a) {
+    x = 1;
+  } else {
+    if (props.b) {
+      x = 2;
+    } else {
+      break label;
+    }
+    x = 3;
+  }
+  label2: switch (props.c) {
+    case 'a': {
+      x = 4;
+      break;
+    }
+    case 'b': {
+      break label2;
+    }
+    case 'c': {
+      x = 5;
+      // intentional fallthrough
+    }
+    default: {
+      x = 6;
+    }
+  }
+  if (props.d) {
+    return null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x = 0;
+  bb0: if (props.a) {
+    x = 1;
+  } else {
+    if (props.b) {
+    } else {
+      break bb0;
+    }
+
+    x = 3;
+  }
+  bb1: bb2: switch (props.c) {
+    case "a": {
+      x = 4;
+      break bb2;
+    }
+    case "b": {
+      break bb1;
+    }
+    case "c":
+    default: {
+      x = 6;
+    }
+  }
+  if (props.d) {
+    return null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dominator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dominator.js
new file mode 100644
index 00000000000..e22dee4ca6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dominator.js
@@ -0,0 +1,39 @@
+function Component(props) {
+  let x = 0;
+  label: if (props.a) {
+    x = 1;
+  } else {
+    if (props.b) {
+      x = 2;
+    } else {
+      break label;
+    }
+    x = 3;
+  }
+  label2: switch (props.c) {
+    case 'a': {
+      x = 4;
+      break;
+    }
+    case 'b': {
+      break label2;
+    }
+    case 'c': {
+      x = 5;
+      // intentional fallthrough
+    }
+    default: {
+      x = 6;
+    }
+  }
+  if (props.d) {
+    return null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.expect.md
new file mode 100644
index 00000000000..93b08128a0a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(
+    () => makeObject(props.value).value + 1,
+    [props.value]
+  );
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+
+  console.log(result);
+  return "ok";
+}
+
+function makeObject(value) {
+  console.log(value);
+  return { value };
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: 42 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.js
new file mode 100644
index 00000000000..2ee24917c53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.js
@@ -0,0 +1,32 @@
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(
+    () => makeObject(props.value).value + 1,
+    [props.value]
+  );
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.expect.md
new file mode 100644
index 00000000000..0abd02f4122
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+  console.log(result);
+  return "ok";
+}
+
+function makeObject(value) {
+  console.log(value);
+  return { value };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: 42 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "ok"
+"ok"
+"ok"
+"ok"
+"ok"
+"ok"
+"ok"
+"ok"
+logs: [42,43,42,43,3.14,4.140000000000001,3.14,4.140000000000001,42,43,3.14,4.140000000000001,42,43,3.14,4.140000000000001]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.js
new file mode 100644
index 00000000000..7477ee0a9dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.js
@@ -0,0 +1,29 @@
+// @expectNothingCompiled @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = makeObject(props.value).value + 1;
+  console.log(result);
+  return 'ok';
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md
new file mode 100644
index 00000000000..ce5bfda6440
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md
@@ -0,0 +1,162 @@
+
+## Input
+
+```javascript
+import {ValidateMemoization} from 'shared-runtime';
+
+// Achieving Forget's level of memoization precision in this example isn't possible with useMemo
+// without significantly altering the code, so disable the non-Forget evaluation of this fixture.
+// @disableNonForgetInSprout
+function Component({a, b, c}) {
+  const x = [];
+  let y;
+  if (a) {
+    y = [b];
+  }
+  x.push(c);
+
+  // this scope should not merge with the above scope because y does not invalidate
+  // on changes to `c`
+  const z = [y];
+
+  // return [x, z];
+  return (
+    <>
+      <ValidateMemoization inputs={[a, b, c]} output={x} />
+      <ValidateMemoization inputs={[a, b]} output={z} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: false, b: null, c: 0}],
+  sequentialRenders: [
+    {a: false, b: null, c: 0},
+    {a: false, b: null, c: 1},
+    {a: true, b: 0, c: 1},
+    {a: true, b: 1, c: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { ValidateMemoization } from "shared-runtime";
+
+// Achieving Forget's level of memoization precision in this example isn't possible with useMemo
+// without significantly altering the code, so disable the non-Forget evaluation of this fixture.
+// @disableNonForgetInSprout
+function Component(t0) {
+  const $ = _c(25);
+  const { a, b, c } = t0;
+  let x;
+  let y;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      let t1;
+      if ($[5] !== b) {
+        t1 = [b];
+        $[5] = b;
+        $[6] = t1;
+      } else {
+        t1 = $[6];
+      }
+      y = t1;
+    }
+
+    x.push(c);
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+    $[4] = y;
+  } else {
+    x = $[3];
+    y = $[4];
+  }
+  let t1;
+  if ($[7] !== y) {
+    t1 = [y];
+    $[7] = y;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  const z = t1;
+  let t2;
+  if ($[9] !== a || $[10] !== b || $[11] !== c) {
+    t2 = [a, b, c];
+    $[9] = a;
+    $[10] = b;
+    $[11] = c;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  let t3;
+  if ($[13] !== t2 || $[14] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} />;
+    $[13] = t2;
+    $[14] = x;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  let t4;
+  if ($[16] !== a || $[17] !== b) {
+    t4 = [a, b];
+    $[16] = a;
+    $[17] = b;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  let t5;
+  if ($[19] !== t4 || $[20] !== z) {
+    t5 = <ValidateMemoization inputs={t4} output={z} />;
+    $[19] = t4;
+    $[20] = z;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  let t6;
+  if ($[22] !== t3 || $[23] !== t5) {
+    t6 = (
+      <>
+        {t3}
+        {t5}
+      </>
+    );
+    $[22] = t3;
+    $[23] = t5;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: false, b: null, c: 0 }],
+  sequentialRenders: [
+    { a: false, b: null, c: 0 },
+    { a: false, b: null, c: 1 },
+    { a: true, b: 0, c: 1 },
+    { a: true, b: 1, c: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[false,null,0],"output":[0]}</div><div>{"inputs":[false,null],"output":[null]}</div>
+<div>{"inputs":[false,null,1],"output":[1]}</div><div>{"inputs":[false,null],"output":[null]}</div>
+<div>{"inputs":[true,0,1],"output":[1]}</div><div>{"inputs":[true,0],"output":[[0]]}</div>
+<div>{"inputs":[true,1,1],"output":[1]}</div><div>{"inputs":[true,1],"output":[[1]]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.js
new file mode 100644
index 00000000000..25728f0ada7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.js
@@ -0,0 +1,36 @@
+import {ValidateMemoization} from 'shared-runtime';
+
+// Achieving Forget's level of memoization precision in this example isn't possible with useMemo
+// without significantly altering the code, so disable the non-Forget evaluation of this fixture.
+// @disableNonForgetInSprout
+function Component({a, b, c}) {
+  const x = [];
+  let y;
+  if (a) {
+    y = [b];
+  }
+  x.push(c);
+
+  // this scope should not merge with the above scope because y does not invalidate
+  // on changes to `c`
+  const z = [y];
+
+  // return [x, z];
+  return (
+    <>
+      <ValidateMemoization inputs={[a, b, c]} output={x} />
+      <ValidateMemoization inputs={[a, b]} output={z} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: false, b: null, c: 0}],
+  sequentialRenders: [
+    {a: false, b: null, c: 0},
+    {a: false, b: null, c: 1},
+    {a: true, b: 0, c: 1},
+    {a: true, b: 1, c: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md
new file mode 100644
index 00000000000..a59d1a566c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+import {Stringify, makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const array = [props.count];
+  const x = makeObject_Primitives();
+  const element = <div>{array}</div>;
+  console.log(x);
+  return <div>{element}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, makeObject_Primitives } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.count) {
+    t0 = [props.count];
+    $[0] = props.count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const array = t0;
+  const x = makeObject_Primitives();
+  let t1;
+  if ($[2] !== array) {
+    t1 = <div>{array}</div>;
+    $[2] = array;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const element = t1;
+  console.log(x);
+  let t2;
+  if ($[4] !== element) {
+    t2 = <div>{element}</div>;
+    $[4] = element;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ count: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>42</div></div>
+logs: [{ a: 0, b: 'value1', c: true }]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.js
new file mode 100644
index 00000000000..e4066d28c63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.js
@@ -0,0 +1,14 @@
+import {Stringify, makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const array = [props.count];
+  const x = makeObject_Primitives();
+  const element = <div>{array}</div>;
+  console.log(x);
+  return <div>{element}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md
new file mode 100644
index 00000000000..cae53674bc7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  const array = [props.count];
+  x = array;
+  const element = <div>{array}</div>;
+  return (
+    <div>
+      {element}
+      {x}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(7);
+  let x;
+  let t0;
+  if ($[0] !== props.count) {
+    t0 = [props.count];
+    $[0] = props.count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const array = t0;
+  x = array;
+  let t1;
+  if ($[2] !== array) {
+    t1 = <div>{array}</div>;
+    $[2] = array;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const element = t1;
+  let t2;
+  if ($[4] !== element || $[5] !== x) {
+    t2 = (
+      <div>
+        {element}
+        {x}
+      </div>
+    );
+    $[4] = element;
+    $[5] = x;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ count: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>42</div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.js
new file mode 100644
index 00000000000..f0b9bfb9ea5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.js
@@ -0,0 +1,19 @@
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  const array = [props.count];
+  x = array;
+  const element = <div>{array}</div>;
+  return (
+    <div>
+      {element}
+      {x}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usecallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usecallback.expect.md
new file mode 100644
index 00000000000..be8e2268290
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usecallback.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+
+function Component(props) {
+  const onClick = React.useCallback(() => {
+    console.log(props.value);
+  }, [props.value]);
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = () => {
+      console.log(props.value);
+    };
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[2] !== onClick) {
+    t1 = <div onClick={onClick} />;
+    $[2] = onClick;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usecallback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usecallback.js
new file mode 100644
index 00000000000..e4341718583
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usecallback.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+function Component(props) {
+  const onClick = React.useCallback(() => {
+    console.log(props.value);
+  }, [props.value]);
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md
new file mode 100644
index 00000000000..29d581df9c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+
+function Component(props) {
+  const x = React.useMemo(() => {
+    const x = [];
+    x.push(props.value);
+    return x;
+  }, [props.value]);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.value) {
+    x = [];
+    x.push(props.value);
+    $[0] = props.value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  const x_0 = x;
+  return x_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.js
new file mode 100644
index 00000000000..09c5f136f3b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+function Component(props) {
+  const x = React.useMemo(() => {
+    const x = [];
+    x.push(props.value);
+    return x;
+  }, [props.value]);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.expect.md
new file mode 100644
index 00000000000..68b0122ea92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    if (props.b) {
+      const y = [props.b];
+      x.push(y);
+      // oops no memo!
+      return x;
+    }
+    // oops no memo!
+    return x;
+  } else {
+    return foo();
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42, b: 3.14}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        if (props.b) {
+          let t1;
+          if ($[4] !== props.b) {
+            t1 = [props.b];
+            $[4] = props.b;
+            $[5] = t1;
+          } else {
+            t1 = $[5];
+          }
+          const y = t1;
+          x.push(y);
+          t0 = x;
+          break bb0;
+        }
+
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = foo();
+          $[6] = t1;
+        } else {
+          t1 = $[6];
+        }
+        t0 = t1;
+        break bb0;
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, a: 42, b: 3.14 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42,[3.14]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.js
new file mode 100644
index 00000000000..53eb06bc591
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.js
@@ -0,0 +1,21 @@
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    if (props.b) {
+      const y = [props.b];
+      x.push(y);
+      // oops no memo!
+      return x;
+    }
+    // oops no memo!
+    return x;
+  } else {
+    return foo();
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42, b: 3.14}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-no-declarations-reassignments-dependencies.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-no-declarations-reassignments-dependencies.expect.md
new file mode 100644
index 00000000000..56fdd4ccf82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-no-declarations-reassignments-dependencies.expect.md
@@ -0,0 +1,120 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+/**
+ * This fixture tests what happens when a reactive has no declarations (other than an early return),
+ * no reassignments, and no dependencies. In this case the only thing we can use to decide if we
+ * should take the if or else branch is the early return declaration. But if that uses the same
+ * sentinel as the memo cache sentinel, then if the previous execution did not early return it will
+ * look like we didn't execute the memo block yet, and we'll needlessly re-execute instead of skipping
+ * to the else branch.
+ *
+ * We have to use a distinct sentinel for the early return value.
+ *
+ * Here the fixture will always take the "else" branch and never early return. Logging (not included)
+ * confirms that the scope for `x` only executes once, on the first render of the component.
+ */
+let ENABLE_FEATURE = false;
+
+function Component(props) {
+  let x = [];
+  if (ENABLE_FEATURE) {
+    x.push(42);
+    return x;
+  } else {
+    console.log('fallthrough');
+  }
+  return makeArray(props.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {a: 42},
+    {a: 42},
+    {a: 3.14},
+    {a: 3.14},
+    {a: 42},
+    {a: 3.14},
+    {a: 42},
+    {a: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+/**
+ * This fixture tests what happens when a reactive has no declarations (other than an early return),
+ * no reassignments, and no dependencies. In this case the only thing we can use to decide if we
+ * should take the if or else branch is the early return declaration. But if that uses the same
+ * sentinel as the memo cache sentinel, then if the previous execution did not early return it will
+ * look like we didn't execute the memo block yet, and we'll needlessly re-execute instead of skipping
+ * to the else branch.
+ *
+ * We have to use a distinct sentinel for the early return value.
+ *
+ * Here the fixture will always take the "else" branch and never early return. Logging (not included)
+ * confirms that the scope for `x` only executes once, on the first render of the component.
+ */
+let ENABLE_FEATURE = false;
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (ENABLE_FEATURE) {
+        x.push(42);
+        t0 = x;
+        break bb0;
+      } else {
+        console.log("fallthrough");
+      }
+    }
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  let t1;
+  if ($[1] !== props.a) {
+    t1 = makeArray(props.a);
+    $[1] = props.a;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { a: 42 },
+    { a: 42 },
+    { a: 3.14 },
+    { a: 3.14 },
+    { a: 42 },
+    { a: 3.14 },
+    { a: 42 },
+    { a: 3.14 },
+  ],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-no-declarations-reassignments-dependencies.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-no-declarations-reassignments-dependencies.js
new file mode 100644
index 00000000000..e289445513c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-no-declarations-reassignments-dependencies.js
@@ -0,0 +1,42 @@
+import {makeArray} from 'shared-runtime';
+
+/**
+ * This fixture tests what happens when a reactive has no declarations (other than an early return),
+ * no reassignments, and no dependencies. In this case the only thing we can use to decide if we
+ * should take the if or else branch is the early return declaration. But if that uses the same
+ * sentinel as the memo cache sentinel, then if the previous execution did not early return it will
+ * look like we didn't execute the memo block yet, and we'll needlessly re-execute instead of skipping
+ * to the else branch.
+ *
+ * We have to use a distinct sentinel for the early return value.
+ *
+ * Here the fixture will always take the "else" branch and never early return. Logging (not included)
+ * confirms that the scope for `x` only executes once, on the first render of the component.
+ */
+let ENABLE_FEATURE = false;
+
+function Component(props) {
+  let x = [];
+  if (ENABLE_FEATURE) {
+    x.push(42);
+    return x;
+  } else {
+    console.log('fallthrough');
+  }
+  return makeArray(props.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {a: 42},
+    {a: 42},
+    {a: 3.14},
+    {a: 3.14},
+    {a: 42},
+    {a: 3.14},
+    {a: 42},
+    {a: 3.14},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.expect.md
new file mode 100644
index 00000000000..31df829e0c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.expect.md
@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    return makeArray(props.b);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    // pattern 1
+    {cond: true, a: 42},
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[4] !== props.b) {
+          t1 = makeArray(props.b);
+          $[4] = props.b;
+          $[5] = t1;
+        } else {
+          t1 = $[5];
+        }
+        t0 = t1;
+        break bb0;
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    // pattern 1
+    { cond: true, a: 42 },
+    { cond: true, a: 42 },
+    // pattern 2
+    { cond: false, b: 3.14 },
+    { cond: false, b: 3.14 },
+    // pattern 1
+    { cond: true, a: 42 },
+    // pattern 2
+    { cond: false, b: 3.14 },
+    // pattern 1
+    { cond: true, a: 42 },
+    // pattern 2
+    { cond: false, b: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
+[42]
+[3.14]
+[3.14]
+[42]
+[3.14]
+[42]
+[3.14]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.js
new file mode 100644
index 00000000000..7446d76fb32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.js
@@ -0,0 +1,33 @@
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    return makeArray(props.b);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    // pattern 1
+    {cond: true, a: 42},
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return.expect.md
new file mode 100644
index 00000000000..622f7356495
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function MyApp(props) {
+  let res;
+  if (props.cond) {
+    return;
+  } else {
+    res = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function MyApp(props) {
+  if (props.cond) {
+    return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return.js
new file mode 100644
index 00000000000..4b04d924216
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return.js
@@ -0,0 +1,14 @@
+function MyApp(props) {
+  let res;
+  if (props.cond) {
+    return;
+  } else {
+    res = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md
new file mode 100644
index 00000000000..deb87c9d8a0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function useThing(fn) {
+  const fnRef = useRef(fn);
+  const ref = useRef(null);
+
+  if (ref.current === null) {
+    ref.current = function (this: unknown, ...args) {
+      return fnRef.current.call(this, ...args);
+    };
+  }
+  return ref.current;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: `this` is not supported syntax
+
+React Compiler does not support compiling functions that use `this`.
+
+error.reserved-words.ts:8:28
+   6 |
+   7 |   if (ref.current === null) {
+>  8 |     ref.current = function (this: unknown, ...args) {
+     |                             ^^^^^^^^^^^^^ `this` was used here
+   9 |       return fnRef.current.call(this, ...args);
+  10 |     };
+  11 |   }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.ts
new file mode 100644
index 00000000000..2937ba8df5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.ts
@@ -0,0 +1,13 @@
+import {useRef} from 'react';
+
+function useThing(fn) {
+  const fnRef = useRef(fn);
+  const ref = useRef(null);
+
+  if (ref.current === null) {
+    ref.current = function (this: unknown, ...args) {
+      return fnRef.current.call(this, ...args);
+    };
+  }
+  return ref.current;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.expect.md
new file mode 100644
index 00000000000..fa5ae370e67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({value, enabled}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue('disabled');
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test', enabled: true}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ value, enabled }) {
+  const [localValue, setLocalValue] = useState("");
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue("disabled");
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "test", enabled: true }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":6,"index":263},"end":{"line":9,"column":19,"index":276},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":16,"column":1,"index":397},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>test</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js
new file mode 100644
index 00000000000..4cdcb53bb23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js
@@ -0,0 +1,21 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({value, enabled}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue('disabled');
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test', enabled: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md
new file mode 100644
index 00000000000..4db10f4df4c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+export default function Component({input = 'empty'}) {
+  const [currInput, setCurrInput] = useState(input);
+  const localConst = 'local const';
+
+  useEffect(() => {
+    setCurrInput(input + localConst);
+  }, [input, localConst]);
+
+  return <div>{currInput}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{input: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+export default function Component({ input = "empty" }) {
+  const [currInput, setCurrInput] = useState(input);
+  const localConst = "local const";
+
+  useEffect(() => {
+    setCurrInput(input + localConst);
+  }, [input, localConst]);
+
+  return <div>{currInput}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ input: "test" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [input]\n\nData Flow Tree:\n└── input (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":295},"end":{"line":9,"column":16,"index":307},"filename":"derived-state-from-default-props.ts","identifierName":"setCurrInput"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":13,"column":1,"index":391},"filename":"derived-state-from-default-props.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>testlocal const</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.js
new file mode 100644
index 00000000000..9d559946bea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.js
@@ -0,0 +1,18 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+export default function Component({input = 'empty'}) {
+  const [currInput, setCurrInput] = useState(input);
+  const localConst = 'local const';
+
+  useEffect(() => {
+    setCurrInput(input + localConst);
+  }, [input, localConst]);
+
+  return <div>{currInput}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{input: 'test'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.expect.md
new file mode 100644
index 00000000000..afddca39e9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+import {useEffect, useState} from 'react';
+
+function Component({shouldChange}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (shouldChange) {
+      setCount(count + 1);
+    }
+  }, [count]);
+
+  return <div>{count}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+import { useEffect, useState } from "react";
+
+function Component({ shouldChange }) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (shouldChange) {
+      setCount(count + 1);
+    }
+  }, [count]);
+
+  return <div>{count}</div>;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [count]\n\nData Flow Tree:\n└── count (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":6,"index":256},"end":{"line":10,"column":14,"index":264},"filename":"derived-state-from-local-state-in-effect.ts","identifierName":"setCount"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":127},"end":{"line":15,"column":1,"index":329},"filename":"derived-state-from-local-state-in-effect.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.js
new file mode 100644
index 00000000000..db84ab8be45
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.js
@@ -0,0 +1,15 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+import {useEffect, useState} from 'react';
+
+function Component({shouldChange}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (shouldChange) {
+      setCount(count + 1);
+    }
+  }, [count]);
+
+  return <div>{count}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.expect.md
new file mode 100644
index 00000000000..e1c33a6c73f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({firstName}) {
+  const [lastName, setLastName] = useState('Doe');
+  const [fullName, setFullName] = useState('John');
+
+  const middleName = 'D.';
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + middleName + ' ' + lastName);
+  }, [firstName, middleName, lastName]);
+
+  return (
+    <div>
+      <input value={lastName} onChange={e => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstName: 'John'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ firstName }) {
+  const [lastName, setLastName] = useState("Doe");
+  const [fullName, setFullName] = useState("John");
+
+  const middleName = "D.";
+
+  useEffect(() => {
+    setFullName(firstName + " " + middleName + " " + lastName);
+  }, [firstName, middleName, lastName]);
+
+  return (
+    <div>
+      <input value={lastName} onChange={(e) => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ firstName: "John" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [firstName]\nState: [lastName]\n\nData Flow Tree:\n├── firstName (Prop)\n└── lastName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":316},"end":{"line":11,"column":15,"index":327},"filename":"derived-state-from-prop-local-state-and-component-scope.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":20,"column":1,"index":561},"filename":"derived-state-from-prop-local-state-and-component-scope.ts"},"fnName":"Component","memoSlots":12,"memoBlocks":5,"memoValues":6,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div><input value="Doe"><div>John D. Doe</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.js
new file mode 100644
index 00000000000..31b77d14817
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.js
@@ -0,0 +1,25 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({firstName}) {
+  const [lastName, setLastName] = useState('Doe');
+  const [fullName, setFullName] = useState('John');
+
+  const middleName = 'D.';
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + middleName + ' ' + lastName);
+  }, [firstName, middleName, lastName]);
+
+  return (
+    <div>
+      <input value={lastName} onChange={e => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstName: 'John'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md
new file mode 100644
index 00000000000..960cf987d4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({initialName}) {
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    setName(initialName);
+  }, [initialName]);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{initialName: 'John'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ initialName }) {
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    setName(initialName);
+  }, [initialName]);
+
+  return (
+    <div>
+      <input value={name} onChange={(e) => setName(e.target.value)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ initialName: "John" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":16,"column":1,"index":378},"filename":"derived-state-from-prop-setter-call-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div><input value="John"></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js
new file mode 100644
index 00000000000..e454caf2ec8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js
@@ -0,0 +1,21 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({initialName}) {
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    setName(initialName);
+  }, [initialName]);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{initialName: 'John'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.expect.md
new file mode 100644
index 00000000000..226a3938bd7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @outputMode:"lint"
+
+function Component({value}) {
+  const [checked, setChecked] = useState('');
+
+  useEffect(() => {
+    setChecked(value === '' ? [] : value.split(','));
+  }, [value]);
+
+  return <div>{checked}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @outputMode:"lint"
+
+function Component({ value }) {
+  const [checked, setChecked] = useState("");
+
+  useEffect(() => {
+    setChecked(value === "" ? [] : value.split(","));
+  }, [value]);
+
+  return <div>{checked}</div>;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.js
new file mode 100644
index 00000000000..1c020d3015d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.js
@@ -0,0 +1,11 @@
+// @validateNoDerivedComputationsInEffects_exp @outputMode:"lint"
+
+function Component({value}) {
+  const [checked, setChecked] = useState('');
+
+  useEffect(() => {
+    setChecked(value === '' ? [] : value.split(','));
+  }, [value]);
+
+  return <div>{checked}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md
new file mode 100644
index 00000000000..de184ede639
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function MockComponent({onSet}) {
+  return <div onClick={() => onSet('clicked')}>Mock Component</div>;
+}
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+  }, [propValue]);
+
+  return <MockComponent onSet={setValue} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function MockComponent({ onSet }) {
+  return <div onClick={() => onSet("clicked")}>Mock Component</div>;
+}
+
+function Component({ propValue }) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+  }, [propValue]);
+
+  return <MockComponent onSet={setValue} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":6,"column":1,"index":230},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"MockComponent","memoSlots":2,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":8,"column":0,"index":232},"end":{"line":15,"column":1,"index":421},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>Mock Component</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js
new file mode 100644
index 00000000000..879d582c924
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js
@@ -0,0 +1,20 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function MockComponent({onSet}) {
+  return <div onClick={() => onSet('clicked')}>Mock Component</div>;
+}
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+  }, [propValue]);
+
+  return <MockComponent onSet={setValue} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.expect.md
new file mode 100644
index 00000000000..fc4d86a3f29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ value }) {
+  const [localValue, setLocalValue] = useState("");
+
+  useEffect(() => {
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "test" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":8,"column":4,"index":233},"end":{"line":8,"column":17,"index":246},"filename":"derived-state-from-prop-with-side-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":13,"column":1,"index":346},"filename":"derived-state-from-prop-with-side-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>test</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.js
new file mode 100644
index 00000000000..b6cebdb4080
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.js
@@ -0,0 +1,18 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md
new file mode 100644
index 00000000000..f11a4b26b53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState('');
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    setLocal(myRef.current + test);
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 'testString'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState, useRef } from "react";
+
+export default function Component({ test }) {
+  const [local, setLocal] = useState("");
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    setLocal(myRef.current + test);
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ test: "testString" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":149},"end":{"line":14,"column":1,"index":347},"filename":"derived-state-from-ref-and-state-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) nulltestString
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js
new file mode 100644
index 00000000000..9425aee2441
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js
@@ -0,0 +1,19 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState('');
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    setLocal(myRef.current + test);
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 'testString'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.expect.md
new file mode 100644
index 00000000000..080aa8e04dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+
+  function localFunction() {
+    console.log('local function');
+  }
+
+  useEffect(() => {
+    setValue(propValue);
+    localFunction();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ propValue }) {
+  const [value, setValue] = useState(null);
+
+  function localFunction() {
+    console.log("local function");
+  }
+
+  useEffect(() => {
+    setValue(propValue);
+    localFunction();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [propValue]\n\nData Flow Tree:\n└── propValue (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":12,"column":4,"index":298},"end":{"line":12,"column":12,"index":306},"filename":"effect-contains-local-function-call.ts","identifierName":"setValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":17,"column":1,"index":390},"filename":"effect-contains-local-function-call.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>test</div>
+logs: ['local function']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.js
new file mode 100644
index 00000000000..3eabb40feeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.js
@@ -0,0 +1,22 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+
+  function localFunction() {
+    console.log('local function');
+  }
+
+  useEffect(() => {
+    setValue(propValue);
+    localFunction();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md
new file mode 100644
index 00000000000..374877863dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({propValue, onChange}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    onChange();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test', onChange: () => {}}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ propValue, onChange }) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    onChange();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test", onChange: () => {} }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":12,"column":1,"index":325},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":16,"column":41,"index":421},"end":{"line":16,"column":49,"index":429},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":null,"memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>test</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js
new file mode 100644
index 00000000000..c9c9778ab84
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js
@@ -0,0 +1,17 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({propValue, onChange}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    onChange();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test', onChange: () => {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.expect.md
new file mode 100644
index 00000000000..1bd8fa23faa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component({prop}) {
+  const [s, setS] = useState(0);
+  useEffect(() => {
+    setS(prop);
+  }, [prop, setS]);
+
+  return <div>{prop}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component({ prop }) {
+  const [s, setS] = useState(0);
+  useEffect(() => {
+    setS(prop);
+  }, [prop, setS]);
+
+  return <div>{prop}</div>;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [prop]\n\nData Flow Tree:\n└── prop (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":6,"column":4,"index":169},"end":{"line":6,"column":8,"index":173},"filename":"effect-used-in-dep-array-still-errors.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":10,"column":1,"index":231},"filename":"effect-used-in-dep-array-still-errors.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.js
new file mode 100644
index 00000000000..bf48efbbc10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.js
@@ -0,0 +1,10 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component({prop}) {
+  const [s, setS] = useState(0);
+  useEffect(() => {
+    setS(prop);
+  }, [prop, setS]);
+
+  return <div>{prop}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.expect.md
new file mode 100644
index 00000000000..ac72a441484
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+import {useEffect, useState} from 'react';
+
+function Component(file: File) {
+  const [imageUrl, setImageUrl] = useState(null);
+
+  /*
+   * Cleaning up the variable or a source of the variable used to setState
+   * inside the effect communicates that we always need to clean up something
+   * which is a valid use case for useEffect. In which case we want to
+   * avoid an throwing
+   */
+  useEffect(() => {
+    const imageUrlPrepared = URL.createObjectURL(file);
+    setImageUrl(imageUrlPrepared);
+    return () => URL.revokeObjectURL(imageUrlPrepared);
+  }, [file]);
+
+  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+import { useEffect, useState } from "react";
+
+function Component(file: File) {
+  const [imageUrl, setImageUrl] = useState(null);
+
+  /*
+   * Cleaning up the variable or a source of the variable used to setState
+   * inside the effect communicates that we always need to clean up something
+   * which is a valid use case for useEffect. In which case we want to
+   * avoid an throwing
+   */
+  useEffect(() => {
+    const imageUrlPrepared = URL.createObjectURL(file);
+    setImageUrl(imageUrlPrepared);
+    return () => URL.revokeObjectURL(imageUrlPrepared);
+  }, [file]);
+
+  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":127},"end":{"line":21,"column":1,"index":719},"filename":"effect-with-cleanup-function-depending-on-derived-computation-value.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.js
new file mode 100644
index 00000000000..16e52562bd8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.js
@@ -0,0 +1,21 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+import {useEffect, useState} from 'react';
+
+function Component(file: File) {
+  const [imageUrl, setImageUrl] = useState(null);
+
+  /*
+   * Cleaning up the variable or a source of the variable used to setState
+   * inside the effect communicates that we always need to clean up something
+   * which is a valid use case for useEffect. In which case we want to
+   * avoid an throwing
+   */
+  useEffect(() => {
+    const imageUrlPrepared = URL.createObjectURL(file);
+    setImageUrl(imageUrlPrepared);
+    return () => URL.revokeObjectURL(imageUrlPrepared);
+  }, [file]);
+
+  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md
new file mode 100644
index 00000000000..58328b2e959
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    globalCall();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component({ propValue }) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    globalCall();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":12,"column":1,"index":317},"filename":"effect-with-global-function-call-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) globalCall is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js
new file mode 100644
index 00000000000..565e23bb0fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js
@@ -0,0 +1,17 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    globalCall();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.expect.md
new file mode 100644
index 00000000000..7ba22f51864
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly @outputMode:"lint"
+
+function Component({setParentState, prop}) {
+  useEffect(() => {
+    setParentState(prop);
+  }, [prop]);
+
+  return <div>{prop}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly @outputMode:"lint"
+
+function Component({ setParentState, prop }) {
+  useEffect(() => {
+    setParentState(prop);
+  }, [prop]);
+
+  return <div>{prop}</div>;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":124},"end":{"line":9,"column":1,"index":259},"filename":"from-props-setstate-in-effect-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.js
new file mode 100644
index 00000000000..1754209d837
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.js
@@ -0,0 +1,9 @@
+// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly @outputMode:"lint"
+
+function Component({setParentState, prop}) {
+  useEffect(() => {
+    setParentState(prop);
+  }, [prop]);
+
+  return <div>{prop}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.expect.md
new file mode 100644
index 00000000000..c1b99a95ab8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component() {
+  const [foo, setFoo] = useState({});
+  const [bar, setBar] = useState(new Set());
+
+  /*
+   * isChanged is considered context of the effect's function expression,
+   * if we don't bail out of effect mutation derivation tracking, isChanged
+   * will inherit the sources of the effect's function expression.
+   *
+   * This is innacurate and with the multiple passes ends up causing an infinite loop.
+   */
+  useEffect(() => {
+    let isChanged = false;
+
+    const newData = foo.map(val => {
+      bar.someMethod(val);
+      isChanged = true;
+    });
+
+    if (isChanged) {
+      setFoo(newData);
+    }
+  }, [foo, bar]);
+
+  return (
+    <div>
+      {foo}, {bar}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component() {
+  const [foo, setFoo] = useState({});
+  const [bar, setBar] = useState(new Set());
+
+  /*
+   * isChanged is considered context of the effect's function expression,
+   * if we don't bail out of effect mutation derivation tracking, isChanged
+   * will inherit the sources of the effect's function expression.
+   *
+   * This is innacurate and with the multiple passes ends up causing an infinite loop.
+   */
+  useEffect(() => {
+    let isChanged = false;
+
+    const newData = foo.map((val) => {
+      bar.someMethod(val);
+      isChanged = true;
+    });
+
+    if (isChanged) {
+      setFoo(newData);
+    }
+  }, [foo, bar]);
+
+  return (
+    <div>
+      {foo}, {bar}
+    </div>
+  );
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [foo, bar]\n\nData Flow Tree:\n└── newData\n    ├── foo (State)\n    └── bar (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":23,"column":6,"index":682},"end":{"line":23,"column":12,"index":688},"filename":"function-expression-mutation-edge-case.ts","identifierName":"setFoo"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":32,"column":1,"index":781},"filename":"function-expression-mutation-edge-case.ts"},"fnName":"Component","memoSlots":9,"memoBlocks":4,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js
new file mode 100644
index 00000000000..856209928d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js
@@ -0,0 +1,32 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component() {
+  const [foo, setFoo] = useState({});
+  const [bar, setBar] = useState(new Set());
+
+  /*
+   * isChanged is considered context of the effect's function expression,
+   * if we don't bail out of effect mutation derivation tracking, isChanged
+   * will inherit the sources of the effect's function expression.
+   *
+   * This is innacurate and with the multiple passes ends up causing an infinite loop.
+   */
+  useEffect(() => {
+    let isChanged = false;
+
+    const newData = foo.map(val => {
+      bar.someMethod(val);
+      isChanged = true;
+    });
+
+    if (isChanged) {
+      setFoo(newData);
+    }
+  }, [foo, bar]);
+
+  return (
+    <div>
+      {foo}, {bar}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md
new file mode 100644
index 00000000000..928b7e9f712
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const lastName = 'Swift';
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component() {
+  const [firstName, setFirstName] = useState("Taylor");
+  const lastName = "Swift";
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState("");
+  useEffect(() => {
+    setFullName(firstName + " " + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [firstName]\n\nData Flow Tree:\n└── firstName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":360},"end":{"line":11,"column":15,"index":371},"filename":"invalid-derived-computation-in-effect.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":15,"column":1,"index":464},"filename":"invalid-derived-computation-in-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>Taylor Swift</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.js
new file mode 100644
index 00000000000..6cd45831215
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.js
@@ -0,0 +1,20 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const lastName = 'Swift';
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.expect.md
new file mode 100644
index 00000000000..c627b583b25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+export default function Component(props) {
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: '[', value: 'test', suffix: ']'}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+export default function Component(props) {
+  const [displayValue, setDisplayValue] = useState("");
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prefix: "[", value: "test", suffix: "]" }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── computed\n    └── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":314},"end":{"line":9,"column":19,"index":329},"filename":"invalid-derived-state-from-computed-props.ts","identifierName":"setDisplayValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":13,"column":1,"index":428},"filename":"invalid-derived-state-from-computed-props.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>[test]</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.js
new file mode 100644
index 00000000000..4243834c2f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.js
@@ -0,0 +1,18 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+export default function Component(props) {
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: '[', value: 'test', suffix: ']'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.expect.md
new file mode 100644
index 00000000000..858daba5023
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+export default function Component({props}) {
+  const [fullName, setFullName] = useState(
+    props.firstName + ' ' + props.lastName
+  );
+
+  useEffect(() => {
+    setFullName(props.firstName + ' ' + props.lastName);
+  }, [props.firstName, props.lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+export default function Component({ props }) {
+  const [fullName, setFullName] = useState(
+    props.firstName + " " + props.lastName,
+  );
+
+  useEffect(() => {
+    setFullName(props.firstName + " " + props.lastName);
+  }, [props.firstName, props.lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ props: { firstName: "John", lastName: "Doe" } }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":288},"end":{"line":10,"column":15,"index":299},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":14,"column":1,"index":416},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>John Doe</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js
new file mode 100644
index 00000000000..abb1643e692
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js
@@ -0,0 +1,19 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+export default function Component({props}) {
+  const [fullName, setFullName] = useState(
+    props.firstName + ' ' + props.lastName
+  );
+
+  useEffect(() => {
+    setFullName(props.firstName + ' ' + props.lastName);
+  }, [props.firstName, props.lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md
new file mode 100644
index 00000000000..70174794dc7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState(0);
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    if (myRef.current) {
+      setLocal(test);
+    } else {
+      setLocal(test + test);
+    }
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 4}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { useEffect, useState, useRef } from "react";
+
+export default function Component({ test }) {
+  const [local, setLocal] = useState(0);
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    if (myRef.current) {
+      setLocal(test);
+    } else {
+      setLocal(test + test);
+    }
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ test: 4 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":149},"end":{"line":18,"column":1,"index":405},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) 8
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js
new file mode 100644
index 00000000000..a5424ab03b2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js
@@ -0,0 +1,23 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState(0);
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    if (myRef.current) {
+      setLocal(test);
+    } else {
+      setLocal(test + test);
+    }
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 4}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md
new file mode 100644
index 00000000000..690574e4429
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component({prop}) {
+  const [s, setS] = useState();
+  const [second, setSecond] = useState(prop);
+
+  /*
+   * `second` is a source of state. It will inherit the value of `prop` in
+   * the first render, but after that it will no longer be updated when
+   * `prop` changes. So we shouldn't consider `second` as being derived from
+   * `prop`
+   */
+  useEffect(() => {
+    setS(second);
+  }, [second]);
+
+  return <div>{s}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component({ prop }) {
+  const [s, setS] = useState();
+  const [second, setSecond] = useState(prop);
+
+  /*
+   * `second` is a source of state. It will inherit the value of `prop` in
+   * the first render, but after that it will no longer be updated when
+   * `prop` changes. So we shouldn't consider `second` as being derived from
+   * `prop`
+   */
+  useEffect(() => {
+    setS(second);
+  }, [second]);
+
+  return <div>{s}</div>;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":462},"end":{"line":14,"column":8,"index":466},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":18,"column":1,"index":519},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js
new file mode 100644
index 00000000000..3be4e88a07a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js
@@ -0,0 +1,18 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+
+function Component({prop}) {
+  const [s, setS] = useState();
+  const [second, setSecond] = useState(prop);
+
+  /*
+   * `second` is a source of state. It will inherit the value of `prop` in
+   * the first render, but after that it will no longer be updated when
+   * `prop` changes. So we shouldn't consider `second` as being derived from
+   * `prop`
+   */
+  useEffect(() => {
+    setS(second);
+  }, [second]);
+
+  return <div>{s}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-conflicting-imports.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-conflicting-imports.expect.md
new file mode 100644
index 00000000000..9b30c1b8cbb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-conflicting-imports.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @enableEmitFreeze @instrumentForget
+
+let makeReadOnly = 'conflicting identifier';
+function useFoo(props) {
+  return foo(props.x);
+}
+
+```
+
+## Code
+
+```javascript
+import { makeReadOnly as _makeReadOnly } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitFreeze @instrumentForget
+
+let makeReadOnly = "conflicting identifier";
+function useFoo(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x);
+    $[0] = props.x;
+    $[1] = __DEV__ ? _makeReadOnly(t0, "useFoo") : t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-conflicting-imports.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-conflicting-imports.js
new file mode 100644
index 00000000000..b30c56eb553
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-conflicting-imports.js
@@ -0,0 +1,6 @@
+// @enableEmitFreeze @instrumentForget
+
+let makeReadOnly = 'conflicting identifier';
+function useFoo(props) {
+  return foo(props.x);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-nonconflicting-global-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-nonconflicting-global-reference.expect.md
new file mode 100644
index 00000000000..ee18d3d1a2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-nonconflicting-global-reference.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @enableEmitFreeze @instrumentForget
+function useFoo(props) {
+  return foo(props.x, __DEV__);
+}
+
+```
+
+## Code
+
+```javascript
+import { makeReadOnly } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitFreeze @instrumentForget
+function useFoo(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x, __DEV__);
+    $[0] = props.x;
+    $[1] = __DEV__ ? makeReadOnly(t0, "useFoo") : t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-nonconflicting-global-reference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-nonconflicting-global-reference.js
new file mode 100644
index 00000000000..62c313b67d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/emit-freeze-nonconflicting-global-reference.js
@@ -0,0 +1,4 @@
+// @enableEmitFreeze @instrumentForget
+function useFoo(props) {
+  return foo(props.x, __DEV__);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-catch-statement.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-catch-statement.expect.md
new file mode 100644
index 00000000000..313facae688
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-catch-statement.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import {getNumber} from 'shared-runtime';
+
+function useFoo() {
+  try {
+    return getNumber();
+  } catch {}
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { getNumber } from "shared-runtime";
+
+function useFoo() {
+  const $ = _c(1);
+  try {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = getNumber();
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    return t0;
+  } catch {}
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 4
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-catch-statement.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-catch-statement.ts
new file mode 100644
index 00000000000..7a42d45afe3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-catch-statement.ts
@@ -0,0 +1,11 @@
+import {getNumber} from 'shared-runtime';
+
+function useFoo() {
+  try {
+    return getNumber();
+  } catch {}
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-eslint-suppressions-config.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-eslint-suppressions-config.expect.md
new file mode 100644
index 00000000000..eeb0ba6c96d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-eslint-suppressions-config.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @eslintSuppressionRules:[]
+
+// The suppression here shouldn't cause compilation to get skipped
+// Previously we had a bug where an empty list of suppressions would
+// create a regexp that matched any suppression
+function Component(props) {
+  'use forget';
+  // eslint-disable-next-line foo/not-react-related
+  return <div>{props.text}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{text: 'Hello'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @eslintSuppressionRules:[]
+
+// The suppression here shouldn't cause compilation to get skipped
+// Previously we had a bug where an empty list of suppressions would
+// create a regexp that matched any suppression
+function Component(props) {
+  "use forget";
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.text) {
+    t0 = <div>{props.text}</div>;
+    $[0] = props.text;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ text: "Hello" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-eslint-suppressions-config.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-eslint-suppressions-config.js
new file mode 100644
index 00000000000..b81132d3b82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/empty-eslint-suppressions-config.js
@@ -0,0 +1,15 @@
+// @eslintSuppressionRules:[]
+
+// The suppression here shouldn't cause compilation to get skipped
+// Previously we had a bug where an empty list of suppressions would
+// create a regexp that matched any suppression
+function Component(props) {
+  'use forget';
+  // eslint-disable-next-line foo/not-react-related
+  return <div>{props.text}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{text: 'Hello'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md
new file mode 100644
index 00000000000..2d633a3d0fd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const computedKey = props.key;
+  const {[computedKey]: x} = props.val;
+
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+
+error._todo.computed-lval-in-destructure.ts:3:9
+  1 | function Component(props) {
+  2 |   const computedKey = props.key;
+> 3 |   const {[computedKey]: x} = props.val;
+    |          ^^^^^^^^^^^^^^^^ (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+  4 |
+  5 |   return x;
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.js
new file mode 100644
index 00000000000..71cb38c25a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const computedKey = props.key;
+  const {[computedKey]: x} = props.val;
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md
new file mode 100644
index 00000000000..b7b707b3e74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component() {
+  const Foo = () => {
+    someGlobal = true;
+  };
+  return <Foo />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.assign-global-in-component-tag-function.ts:3:4
+  1 | function Component() {
+  2 |   const Foo = () => {
+> 3 |     someGlobal = true;
+    |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
+  4 |   };
+  5 |   return <Foo />;
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js
new file mode 100644
index 00000000000..2982fdf7085
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js
@@ -0,0 +1,6 @@
+function Component() {
+  const Foo = () => {
+    someGlobal = true;
+  };
+  return <Foo />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md
new file mode 100644
index 00000000000..1f5ac0c83df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component() {
+  const foo = () => {
+    someGlobal = true;
+  };
+  // Children are generally access/called during render, so
+  // modifying a global in a children function is almost
+  // certainly a mistake.
+  return <Foo>{foo}</Foo>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.assign-global-in-jsx-children.ts:3:4
+  1 | function Component() {
+  2 |   const foo = () => {
+> 3 |     someGlobal = true;
+    |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
+  4 |   };
+  5 |   // Children are generally access/called during render, so
+  6 |   // modifying a global in a children function is almost
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js
new file mode 100644
index 00000000000..82554e8ac43
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js
@@ -0,0 +1,9 @@
+function Component() {
+  const foo = () => {
+    someGlobal = true;
+  };
+  // Children are generally access/called during render, so
+  // modifying a global in a children function is almost
+  // certainly a mistake.
+  return <Foo>{foo}</Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.expect.md
new file mode 100644
index 00000000000..c89e773f321
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// Fixture to test that we show a hint to name as `ref` or `-Ref` when attempting
+// to assign .current inside an effect
+function Component({foo}) {
+  useEffect(() => {
+    foo.current = true;
+  }, [foo]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.assign-ref-in-effect-hint.ts:5:4
+  3 | function Component({foo}) {
+  4 |   useEffect(() => {
+> 5 |     foo.current = true;
+    |     ^^^ `foo` cannot be modified
+  6 |   }, [foo]);
+  7 | }
+  8 |
+
+Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.js
new file mode 100644
index 00000000000..15467349596
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.js
@@ -0,0 +1,7 @@
+// Fixture to test that we show a hint to name as `ref` or `-Ref` when attempting
+// to assign .current inside an effect
+function Component({foo}) {
+  useEffect(() => {
+    foo.current = true;
+  }, [foo]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md
new file mode 100644
index 00000000000..fe0ade4b91e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @enableFlowSuppressions
+
+function Foo(props) {
+  // $FlowFixMe[react-rule-hook]
+  useX();
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`.
+
+error.bailout-on-flow-suppression.ts:4:2
+  2 |
+  3 | function Foo(props) {
+> 4 |   // $FlowFixMe[react-rule-hook]
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+  5 |   useX();
+  6 |   return null;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.js
new file mode 100644
index 00000000000..957004260e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.js
@@ -0,0 +1,7 @@
+// @enableFlowSuppressions
+
+function Foo(props) {
+  // $FlowFixMe[react-rule-hook]
+  useX();
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md
new file mode 100644
index 00000000000..df3524de027
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @eslintSuppressionRules:["my-app","react-rule"] @validateExhaustiveMemoizationDependencies:false
+
+/* eslint-disable my-app/react-rule */
+function lowercasecomponent() {
+  'use forget';
+  const x = [];
+  // eslint-disable-next-line my-app/react-rule
+  return <div>{x}</div>;
+}
+/* eslint-enable my-app/react-rule */
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`.
+
+error.bailout-on-suppression-of-custom-rule.ts:3:0
+  1 | // @eslintSuppressionRules:["my-app","react-rule"] @validateExhaustiveMemoizationDependencies:false
+  2 |
+> 3 | /* eslint-disable my-app/react-rule */
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+  4 | function lowercasecomponent() {
+  5 |   'use forget';
+  6 |   const x = [];
+
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`.
+
+error.bailout-on-suppression-of-custom-rule.ts:7:2
+   5 |   'use forget';
+   6 |   const x = [];
+>  7 |   // eslint-disable-next-line my-app/react-rule
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+   8 |   return <div>{x}</div>;
+   9 | }
+  10 | /* eslint-enable my-app/react-rule */
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.js
new file mode 100644
index 00000000000..b9344d663b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.js
@@ -0,0 +1,10 @@
+// @eslintSuppressionRules:["my-app","react-rule"] @validateExhaustiveMemoizationDependencies:false
+
+/* eslint-disable my-app/react-rule */
+function lowercasecomponent() {
+  'use forget';
+  const x = [];
+  // eslint-disable-next-line my-app/react-rule
+  return <div>{x}</div>;
+}
+/* eslint-enable my-app/react-rule */
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.expect.md
new file mode 100644
index 00000000000..8968351e78e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+import {useCallback, useRef} from 'react';
+
+export default function useThunkDispatch(state, dispatch, extraArg) {
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  return useCallback(
+    function thunk(action) {
+      if (typeof action === 'function') {
+        return action(thunk, () => stateRef.current, extraArg);
+      } else {
+        dispatch(action);
+        return undefined;
+      }
+    },
+    [dispatch, extraArg]
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
+
+<unknown> thunk$14.
+
+error.bug-infer-mutation-aliasing-effects.ts:10:22
+   8 |     function thunk(action) {
+   9 |       if (typeof action === 'function') {
+> 10 |         return action(thunk, () => stateRef.current, extraArg);
+     |                       ^^^^^ this is uninitialized
+  11 |       } else {
+  12 |         dispatch(action);
+  13 |         return undefined;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.js
new file mode 100644
index 00000000000..3309406fc70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.js
@@ -0,0 +1,18 @@
+import {useCallback, useRef} from 'react';
+
+export default function useThunkDispatch(state, dispatch, extraArg) {
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  return useCallback(
+    function thunk(action) {
+      if (typeof action === 'function') {
+        return action(thunk, () => stateRef.current, extraArg);
+      } else {
+        dispatch(action);
+        return undefined;
+      }
+    },
+    [dispatch, extraArg]
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.expect.md
new file mode 100644
index 00000000000..cd311c6f219
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+const YearsAndMonthsSince = () => {
+  const diff = foo();
+  const months = Math.floor(diff.bar());
+  return <>{months}</>;
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: [Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression
+
+error.bug-invariant-codegen-methodcall.ts:3:17
+  1 | const YearsAndMonthsSince = () => {
+  2 |   const diff = foo();
+> 3 |   const months = Math.floor(diff.bar());
+    |                  ^^^^^^^^^^ Got: 'Identifier'
+  4 |   return <>{months}</>;
+  5 | };
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.js
new file mode 100644
index 00000000000..948182653cb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.js
@@ -0,0 +1,5 @@
+const YearsAndMonthsSince = () => {
+  const diff = foo();
+  const months = Math.floor(diff.bar());
+  return <>{months}</>;
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-couldnt-find-binding-for-decl.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-couldnt-find-binding-for-decl.expect.md
new file mode 100644
index 00000000000..b50ad703593
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-couldnt-find-binding-for-decl.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+export function Foo() {
+  useEffect(() => {
+    try {
+      // do something
+    } catch ({status}) {
+      // do something
+    }
+  }, []);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: (BuildHIR::lowerAssignment) Could not find binding for declaration.
+
+error.bug-invariant-couldnt-find-binding-for-decl.ts:7:14
+   5 |     try {
+   6 |       // do something
+>  7 |     } catch ({status}) {
+     |               ^^^^^^ (BuildHIR::lowerAssignment) Could not find binding for declaration.
+   8 |       // do something
+   9 |     }
+  10 |   }, []);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-couldnt-find-binding-for-decl.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-couldnt-find-binding-for-decl.js
new file mode 100644
index 00000000000..c005fec1bd5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-couldnt-find-binding-for-decl.js
@@ -0,0 +1,11 @@
+import {useEffect} from 'react';
+
+export function Foo() {
+  useEffect(() => {
+    try {
+      // do something
+    } catch ({status}) {
+      // do something
+    }
+  }, []);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-break-target.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-break-target.expect.md
new file mode 100644
index 00000000000..226ab20ac26
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-break-target.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+
+export default function useFoo(text) {
+  return useMemo(() => {
+    try {
+      let formattedText = '';
+      try {
+        formattedText = format(text);
+      } catch {
+        console.log('error');
+      }
+      return formattedText || '';
+    } catch (e) {}
+  }, [text]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: Expected a break target
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-break-target.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-break-target.js
new file mode 100644
index 00000000000..4616e0232aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-break-target.js
@@ -0,0 +1,15 @@
+import {useMemo} from 'react';
+
+export default function useFoo(text) {
+  return useMemo(() => {
+    try {
+      let formattedText = '';
+      try {
+        formattedText = format(text);
+      } catch {
+        console.log('error');
+      }
+      return formattedText || '';
+    } catch (e) {}
+  }, [text]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.expect.md
new file mode 100644
index 00000000000..a30ccffcd7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {useFoo, formatB, Baz} from './lib';
+
+export const Example = ({data}) => {
+  let a;
+  let b;
+
+  if (data) {
+    ({a, b} = data);
+  }
+
+  const foo = useFoo(a);
+  const bar = useMemo(() => formatB(b), [b]);
+
+  return <Baz foo={foo} bar={bar} />;
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: Expected consistent kind for destructuring
+
+Other places were `Reassign` but 'mutate? #t8$46[7:9]{reactive}' is const.
+
+error.bug-invariant-expected-consistent-destructuring.ts:9:9
+   7 |
+   8 |   if (data) {
+>  9 |     ({a, b} = data);
+     |          ^ Expected consistent kind for destructuring
+  10 |   }
+  11 |
+  12 |   const foo = useFoo(a);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.js
new file mode 100644
index 00000000000..c37b1931443
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.js
@@ -0,0 +1,16 @@
+import {useMemo} from 'react';
+import {useFoo, formatB, Baz} from './lib';
+
+export const Example = ({data}) => {
+  let a;
+  let b;
+
+  if (data) {
+    ({a, b} = data);
+  }
+
+  const foo = useFoo(a);
+  const bar = useMemo(() => formatB(b), [b]);
+
+  return <Baz foo={foo} bar={bar} />;
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.expect.md
new file mode 100644
index 00000000000..bca2e693074
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+import {bar} from './bar';
+
+export const useFoot = () => {
+  const [, setState] = useState(null);
+  try {
+    const {data} = bar();
+    setState({
+      data,
+      error: null,
+    });
+  } catch (err) {
+    setState(_prevState => ({
+      loading: false,
+      error: err,
+    }));
+  }
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: Expected all references to a variable to be consistently local or context references
+
+Identifier <unknown> err$7 is referenced as a context variable, but was previously referenced as a local variable.
+
+error.bug-invariant-local-or-context-references.ts:15:13
+  13 |     setState(_prevState => ({
+  14 |       loading: false,
+> 15 |       error: err,
+     |              ^^^ this is local
+  16 |     }));
+  17 |   }
+  18 | };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.js
new file mode 100644
index 00000000000..561bc25fb72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.js
@@ -0,0 +1,18 @@
+import {useState} from 'react';
+import {bar} from './bar';
+
+export const useFoot = () => {
+  const [, setState] = useState(null);
+  try {
+    const {data} = bar();
+    setState({
+      data,
+      error: null,
+    });
+  } catch (err) {
+    setState(_prevState => ({
+      loading: false,
+      error: err,
+    }));
+  }
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md
new file mode 100644
index 00000000000..30b95149263
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+const Foo = ({json}) => {
+  try {
+    const foo = JSON.parse(json)?.foo;
+    return <span>{foo}</span>;
+  } catch {
+    return null;
+  }
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: Unexpected terminal in optional
+
+error.bug-invariant-unexpected-terminal-in-optional.ts:3:16
+  1 | const Foo = ({json}) => {
+  2 |   try {
+> 3 |     const foo = JSON.parse(json)?.foo;
+    |                 ^^^^ Unexpected maybe-throw in optional
+  4 |     return <span>{foo}</span>;
+  5 |   } catch {
+  6 |     return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.js
new file mode 100644
index 00000000000..961640bfbd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.js
@@ -0,0 +1,8 @@
+const Foo = ({json}) => {
+  try {
+    const foo = JSON.parse(json)?.foo;
+    return <span>{foo}</span>;
+  } catch {
+    return null;
+  }
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.expect.md
new file mode 100644
index 00000000000..f8c46659bf7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+import Bar from './Bar';
+
+export function Foo() {
+  return (
+    <Bar
+      renderer={(...props) => {
+        return <span {...props}>{displayValue}</span>;
+      }}
+    />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: Expected temporaries to be promoted to named identifiers in an earlier pass
+
+identifier 15 is unnamed.
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.js
new file mode 100644
index 00000000000..4a06093d9f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.js
@@ -0,0 +1,11 @@
+import Bar from './Bar';
+
+export function Foo() {
+  return (
+    <Bar
+      renderer={(...props) => {
+        return <span {...props}>{displayValue}</span>;
+      }}
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md
new file mode 100644
index 00000000000..8b936ff0d92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = makeObject();
+  x.foo(([[x]] = makeObject()));
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: Const declaration cannot be referenced as an expression
+
+error.call-args-destructuring-asignment-complex.ts:3:9
+  1 | function Component(props) {
+  2 |   let x = makeObject();
+> 3 |   x.foo(([[x]] = makeObject()));
+    |          ^^^^^ this is Const
+  4 |   return x;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.js
new file mode 100644
index 00000000000..6f5dd4ea4af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  let x = makeObject();
+  x.foo(([[x]] = makeObject()));
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md
new file mode 100644
index 00000000000..60964064765
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @validateNoCapitalizedCalls
+function Foo() {
+  let x = Bar;
+  x(); // ERROR
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+Bar may be a component.
+
+error.capitalized-function-call-aliased.ts:4:2
+  2 | function Foo() {
+  3 |   let x = Bar;
+> 4 |   x(); // ERROR
+    |   ^^^ Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.js
new file mode 100644
index 00000000000..17659c5c322
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.js
@@ -0,0 +1,5 @@
+// @validateNoCapitalizedCalls
+function Foo() {
+  let x = Bar;
+  x(); // ERROR
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md
new file mode 100644
index 00000000000..59db7442a36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = SomeFunc();
+
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+SomeFunc may be a component.
+
+error.capitalized-function-call.ts:3:12
+  1 | // @validateNoCapitalizedCalls
+  2 | function Component() {
+> 3 |   const x = SomeFunc();
+    |             ^^^^^^^^^^ Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+  4 |
+  5 |   return x;
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.js
new file mode 100644
index 00000000000..bfae64ac9e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.js
@@ -0,0 +1,6 @@
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = SomeFunc();
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md
new file mode 100644
index 00000000000..f55721caa10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = someGlobal.SomeFunc();
+
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+SomeFunc may be a component.
+
+error.capitalized-method-call.ts:3:12
+  1 | // @validateNoCapitalizedCalls
+  2 | function Component() {
+> 3 |   const x = someGlobal.SomeFunc();
+    |             ^^^^^^^^^^^^^^^^^^^^^ Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+  4 |
+  5 |   return x;
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.js
new file mode 100644
index 00000000000..5f829e2cf02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-method-call.js
@@ -0,0 +1,6 @@
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = someGlobal.SomeFunc();
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md
new file mode 100644
index 00000000000..a3b2ace512f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left')(),
+  };
+  const moveRight = {
+    handler: handleKey('right')(),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.capture-ref-for-mutation.ts:12:13
+  10 |   };
+  11 |   const moveLeft = {
+> 12 |     handler: handleKey('left')(),
+     |              ^^^^^^^^^^^^^^^^^ This function accesses a ref value
+  13 |   };
+  14 |   const moveRight = {
+  15 |     handler: handleKey('right')(),
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.capture-ref-for-mutation.ts:15:13
+  13 |   };
+  14 |   const moveRight = {
+> 15 |     handler: handleKey('right')(),
+     |              ^^^^^^^^^^^^^^^^^^ This function accesses a ref value
+  16 |   };
+  17 |   return [moveLeft, moveRight];
+  18 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.tsx
new file mode 100644
index 00000000000..41e117ed15e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.tsx
@@ -0,0 +1,23 @@
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left')(),
+  };
+  const moveRight = {
+    handler: handleKey('right')(),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md
new file mode 100644
index 00000000000..fbf5ca665b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = React.useNonexistentHook();
+  }
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.conditional-hook-unknown-hook-react-namespace.ts:4:8
+  2 |   let x = null;
+  3 |   if (props.cond) {
+> 4 |     x = React.useNonexistentHook();
+    |         ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  5 |   }
+  6 |   return x;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.js
new file mode 100644
index 00000000000..0698132c614
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = React.useNonexistentHook();
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md
new file mode 100644
index 00000000000..2f8806787d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = Foo.useFoo();
+  }
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.conditional-hooks-as-method-call.ts:4:8
+  2 |   let x = null;
+  3 |   if (props.cond) {
+> 4 |     x = Foo.useFoo();
+    |         ^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  5 |   }
+  6 |   return x;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.js
new file mode 100644
index 00000000000..53059608fbb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = Foo.useFoo();
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md
new file mode 100644
index 00000000000..6e9887c5ac5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import {identity, invoke} from 'shared-runtime';
+
+function foo() {
+  let x = 2;
+  const fn1 = () => {
+    const copy1 = (x = 3);
+    return identity(copy1);
+  };
+  const fn2 = () => {
+    const copy2 = (x = 4);
+    return [invoke(fn1), copy2, identity(copy2)];
+  };
+  return invoke(fn2);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.context-variable-only-chained-assign.ts:10:19
+   8 |   };
+   9 |   const fn2 = () => {
+> 10 |     const copy2 = (x = 4);
+     |                    ^ Cannot reassign `x` after render completes
+  11 |     return [invoke(fn1), copy2, identity(copy2)];
+  12 |   };
+  13 |   return invoke(fn2);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.js
new file mode 100644
index 00000000000..095765cdb9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.js
@@ -0,0 +1,19 @@
+import {identity, invoke} from 'shared-runtime';
+
+function foo() {
+  let x = 2;
+  const fn1 = () => {
+    const copy1 = (x = 3);
+    return identity(copy1);
+  };
+  const fn2 = () => {
+    const copy2 = (x = 4);
+    return [invoke(fn1), copy2, identity(copy2)];
+  };
+  return invoke(fn2);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md
new file mode 100644
index 00000000000..e5c28e6e362
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function Component() {
+  let x = null;
+  function foo() {
+    x = 9;
+  }
+  const y = bar(foo);
+  return <Child y={y} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.declare-reassign-variable-in-function-declaration.ts:4:4
+  2 |   let x = null;
+  3 |   function foo() {
+> 4 |     x = 9;
+    |     ^ Cannot reassign `x` after render completes
+  5 |   }
+  6 |   const y = bar(foo);
+  7 |   return <Child y={y} />;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.js
new file mode 100644
index 00000000000..ca3ff478605
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.js
@@ -0,0 +1,8 @@
+function Component() {
+  let x = null;
+  function foo() {
+    x = 9;
+  }
+  const y = bar(foo);
+  return <Child y={y} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md
new file mode 100644
index 00000000000..4bf9a06b6e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(
+  x,
+  y = () => {
+    return x;
+  }
+) {
+  return y();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `ArrowFunctionExpression` cannot be safely reordered
+
+error.default-param-accesses-local.ts:3:6
+  1 | function Component(
+  2 |   x,
+> 3 |   y = () => {
+    |       ^^^^^^^
+> 4 |     return x;
+    | ^^^^^^^^^^^^^
+> 5 |   }
+    | ^^^^ (BuildHIR::node.lowerReorderableExpression) Expression type `ArrowFunctionExpression` cannot be safely reordered
+  6 | ) {
+  7 |   return y();
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.js
new file mode 100644
index 00000000000..3bd829a0da8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.js
@@ -0,0 +1,13 @@
+function Component(
+  x,
+  y = () => {
+    return x;
+  }
+) {
+  return y();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md
new file mode 100644
index 00000000000..00a68405f8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+function useInvalid() {
+  const x = identity(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useInvalid,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: [hoisting] EnterSSA: Expected identifier to be defined before being used
+
+Identifier x$1 is undefined.
+
+error.dont-hoist-inline-reference.ts:3:2
+  1 | import {identity} from 'shared-runtime';
+  2 | function useInvalid() {
+> 3 |   const x = identity(x);
+    |   ^^^^^^^^^^^^^^^^^^^^^^ [hoisting] EnterSSA: Expected identifier to be defined before being used
+  4 |   return x;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.js
new file mode 100644
index 00000000000..d017d9ea9e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.dont-hoist-inline-reference.js
@@ -0,0 +1,10 @@
+import {identity} from 'shared-runtime';
+function useInvalid() {
+  const x = identity(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useInvalid,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md
new file mode 100644
index 00000000000..d8436fa2c04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @enableEmitFreeze @instrumentForget
+function useFoo(props) {
+  const __DEV__ = 'conflicting global';
+  console.log(__DEV__);
+  return foo(props.x);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Encountered conflicting global in generated program
+
+Conflict from local binding __DEV__.
+
+error.emit-freeze-conflicting-global.ts:3:8
+  1 | // @enableEmitFreeze @instrumentForget
+  2 | function useFoo(props) {
+> 3 |   const __DEV__ = 'conflicting global';
+    |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Encountered conflicting global in generated program
+  4 |   console.log(__DEV__);
+  5 |   return foo(props.x);
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.js
new file mode 100644
index 00000000000..4391ad76e70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.emit-freeze-conflicting-global.js
@@ -0,0 +1,6 @@
+// @enableEmitFreeze @instrumentForget
+function useFoo(props) {
+  const __DEV__ = 'conflicting global';
+  console.log(__DEV__);
+  return foo(props.x);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md
new file mode 100644
index 00000000000..a8a83f6b116
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component() {
+  let callback = () => {
+    callback = null;
+  };
+  return <div onClick={callback} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `callback` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.function-expression-references-variable-its-assigned-to.ts:3:4
+  1 | function Component() {
+  2 |   let callback = () => {
+> 3 |     callback = null;
+    |     ^^^^^^^^ Cannot reassign `callback` after render completes
+  4 |   };
+  5 |   return <div onClick={callback} />;
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.js
new file mode 100644
index 00000000000..f5670b6371e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.js
@@ -0,0 +1,6 @@
+function Component() {
+  let callback = () => {
+    callback = null;
+  };
+  return <div onClick={callback} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.handle-unexpected-exception-pipeline.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.handle-unexpected-exception-pipeline.expect.md
new file mode 100644
index 00000000000..996bae3a749
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.handle-unexpected-exception-pipeline.expect.md
@@ -0,0 +1,23 @@
+
+## Input
+
+```javascript
+// @throwUnknownException__testonly:true
+
+function Component() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+unexpected error
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.handle-unexpected-exception-pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.handle-unexpected-exception-pipeline.ts
new file mode 100644
index 00000000000..4a341c4e475
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.handle-unexpected-exception-pipeline.ts
@@ -0,0 +1,8 @@
+// @throwUnknownException__testonly:true
+
+function Component() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md
new file mode 100644
index 00000000000..7913666aa31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props?.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items`, but the source dependencies were [props?.items, props.cond]. Inferred different dependency than source.
+
+error.hoist-optional-member-expression-with-conditional-optional.ts:4:23
+   2 | import {ValidateMemoization} from 'shared-runtime';
+   3 | function Component(props) {
+>  4 |   const data = useMemo(() => {
+     |                        ^^^^^^^
+>  5 |     const x = [];
+     | ^^^^^^^^^^^^^^^^^
+>  6 |     x.push(props?.items);
+     | ^^^^^^^^^^^^^^^^^
+>  7 |     if (props.cond) {
+     | ^^^^^^^^^^^^^^^^^
+>  8 |       x.push(props?.items);
+     | ^^^^^^^^^^^^^^^^^
+>  9 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 10 |     return x;
+     | ^^^^^^^^^^^^^^^^^
+> 11 |   }, [props?.items, props.cond]);
+     | ^^^^ Could not preserve existing manual memoization
+  12 |   return (
+  13 |     <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  14 |   );
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.js
new file mode 100644
index 00000000000..760f345e902
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.js
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props?.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md
new file mode 100644
index 00000000000..b60a9118755
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items`, but the source dependencies were [props?.items, props.cond]. Inferred different dependency than source.
+
+error.hoist-optional-member-expression-with-conditional.ts:4:23
+   2 | import {ValidateMemoization} from 'shared-runtime';
+   3 | function Component(props) {
+>  4 |   const data = useMemo(() => {
+     |                        ^^^^^^^
+>  5 |     const x = [];
+     | ^^^^^^^^^^^^^^^^^
+>  6 |     x.push(props?.items);
+     | ^^^^^^^^^^^^^^^^^
+>  7 |     if (props.cond) {
+     | ^^^^^^^^^^^^^^^^^
+>  8 |       x.push(props.items);
+     | ^^^^^^^^^^^^^^^^^
+>  9 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 10 |     return x;
+     | ^^^^^^^^^^^^^^^^^
+> 11 |   }, [props?.items, props.cond]);
+     | ^^^^ Could not preserve existing manual memoization
+  12 |   return (
+  13 |     <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  14 |   );
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.js
new file mode 100644
index 00000000000..3f773f4fe4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.js
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md
new file mode 100644
index 00000000000..d323477c175
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  function bar() {
+    return x;
+  }
+  return baz(); // OK: FuncDecls are HoistableDeclarations that have both declaration and value hoisting
+  function baz() {
+    return bar();
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support functions with unreachable code that may contain hoisted declarations
+
+error.hoisting-simple-function-declaration.ts:6:2
+   4 |   }
+   5 |   return baz(); // OK: FuncDecls are HoistableDeclarations that have both declaration and value hoisting
+>  6 |   function baz() {
+     |   ^^^^^^^^^^^^^^^^
+>  7 |     return bar();
+     | ^^^^^^^^^^^^^^^^^
+>  8 |   }
+     | ^^^^ Support functions with unreachable code that may contain hoisted declarations
+   9 | }
+  10 |
+  11 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.js
new file mode 100644
index 00000000000..7046794f95b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoisting-simple-function-declaration.js
@@ -0,0 +1,15 @@
+function hoisting() {
+  function bar() {
+    return x;
+  }
+  return baz(); // OK: FuncDecls are HoistableDeclarations that have both declaration and value hoisting
+  function baz() {
+    return bar();
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md
new file mode 100644
index 00000000000..2b60b2ec7cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enableTransitivelyFreezeFunctionExpressions
+import {setPropertyByKey, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({count}) {
+  const x = {value: 0};
+  /**
+   * After this custom hook call, it's no longer valid to mutate x.
+   */
+  const cb = useIdentity(() => {
+    setPropertyByKey(x, 'value', count);
+  });
+
+  x.value += count;
+  return <Stringify x={x} cb={cb} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{count: 1}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook.
+
+error.hook-call-freezes-captured-identifier.ts:13:2
+  11 |   });
+  12 |
+> 13 |   x.value += count;
+     |   ^ value cannot be modified
+  14 |   return <Stringify x={x} cb={cb} />;
+  15 | }
+  16 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.tsx
new file mode 100644
index 00000000000..b71626a435b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.tsx
@@ -0,0 +1,20 @@
+// @enableTransitivelyFreezeFunctionExpressions
+import {setPropertyByKey, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({count}) {
+  const x = {value: 0};
+  /**
+   * After this custom hook call, it's no longer valid to mutate x.
+   */
+  const cb = useIdentity(() => {
+    setPropertyByKey(x, 'value', count);
+  });
+
+  x.value += count;
+  return <Stringify x={x} cb={cb} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{count: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md
new file mode 100644
index 00000000000..c57d55e29a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enableTransitivelyFreezeFunctionExpressions
+import {mutate, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({count}) {
+  const x = {value: 0};
+  /**
+   * After this custom hook call, it's no longer valid to mutate x.
+   */
+  const cb = useIdentity(() => {
+    x.value++;
+  });
+
+  x.value += count;
+  return <Stringify x={x} cb={cb} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{count: 1}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook.
+
+error.hook-call-freezes-captured-memberexpr.ts:13:2
+  11 |   });
+  12 |
+> 13 |   x.value += count;
+     |   ^ value cannot be modified
+  14 |   return <Stringify x={x} cb={cb} />;
+  15 | }
+  16 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.jsx
new file mode 100644
index 00000000000..2a94559c1f0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.jsx
@@ -0,0 +1,20 @@
+// @enableTransitivelyFreezeFunctionExpressions
+import {mutate, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({count}) {
+  const x = {value: 0};
+  /**
+   * After this custom hook call, it's no longer valid to mutate x.
+   */
+  const cb = useIdentity(() => {
+    x.value++;
+  });
+
+  x.value += count;
+  return <Stringify x={x} cb={cb} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{count: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md
new file mode 100644
index 00000000000..3f8e6403aff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function useFoo() {}
+useFoo.useBar = function () {
+  return 'foo';
+};
+
+function Foo() {
+  let bar = useFoo.useBar;
+  return bar();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.hook-property-load-local-hook.ts:7:12
+   5 |
+   6 | function Foo() {
+>  7 |   let bar = useFoo.useBar;
+     |             ^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+   8 |   return bar();
+   9 | }
+  10 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.hook-property-load-local-hook.ts:8:9
+   6 | function Foo() {
+   7 |   let bar = useFoo.useBar;
+>  8 |   return bar();
+     |          ^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+   9 | }
+  10 |
+  11 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.js
new file mode 100644
index 00000000000..8a2da50d7c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.js
@@ -0,0 +1,14 @@
+function useFoo() {}
+useFoo.useBar = function () {
+  return 'foo';
+};
+
+function Foo() {
+  let bar = useFoo.useBar;
+  return bar();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md
new file mode 100644
index 00000000000..cf9a6a5b4c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {useEffect, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  useEffect(() => {}, [ref.current]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.hook-ref-value.ts:5:23
+  3 | function Component(props) {
+  4 |   const ref = useRef();
+> 5 |   useEffect(() => {}, [ref.current]);
+    |                        ^^^^^^^^^^^ Cannot access ref value during render
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPOINT = {
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.hook-ref-value.ts:5:23
+  3 | function Component(props) {
+  4 |   const ref = useRef();
+> 5 |   useEffect(() => {}, [ref.current]);
+    |                        ^^^^^^^^^^^ Cannot access ref value during render
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.js
new file mode 100644
index 00000000000..3276e4b4b44
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.js
@@ -0,0 +1,11 @@
+import {useEffect, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  useEffect(() => {}, [ref.current]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md
new file mode 100644
index 00000000000..4aac70a9332
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let x = React.useMemo(async () => {
+    await a;
+  }, []);
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+
+error.invalid-ReactUseMemo-async-callback.ts:2:24
+  1 | function component(a, b) {
+> 2 |   let x = React.useMemo(async () => {
+    |                         ^^^^^^^^^^^^^
+> 3 |     await a;
+    | ^^^^^^^^^^^^
+> 4 |   }, []);
+    | ^^^^ Async and generator functions are not supported
+  5 |   return x;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.js
new file mode 100644
index 00000000000..e5a7eb0cca6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.js
@@ -0,0 +1,6 @@
+function component(a, b) {
+  let x = React.useMemo(async () => {
+    await a;
+  }, []);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
new file mode 100644
index 00000000000..94a9a984c2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const value = ref.current;
+  return value;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-during-render.ts:4:16
+  2 | function Component(props) {
+  3 |   const ref = useRef(null);
+> 4 |   const value = ref.current;
+    |                 ^^^^^^^^^^^ Cannot access ref value during render
+  5 |   return value;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.js
new file mode 100644
index 00000000000..4269fe4b865
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.js
@@ -0,0 +1,6 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const value = ref.current;
+  return value;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md
new file mode 100644
index 00000000000..647cf28f7b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+import {useReducer, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const [state] = useReducer(
+    (state, action) => state + action,
+    0,
+    init => ref.current
+  );
+
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-in-reducer-init.ts:8:4
+   6 |     (state, action) => state + action,
+   7 |     0,
+>  8 |     init => ref.current
+     |     ^^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
+   9 |   );
+  10 |
+  11 |   return <Stringify state={state} />;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.js
new file mode 100644
index 00000000000..df10b8a9ebd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.js
@@ -0,0 +1,17 @@
+import {useReducer, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const [state] = useReducer(
+    (state, action) => state + action,
+    0,
+    init => ref.current
+  );
+
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md
new file mode 100644
index 00000000000..33fcd6d188c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+import {useReducer, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const [state] = useReducer(() => ref.current, null);
+
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-in-reducer.ts:5:29
+  3 | function Component(props) {
+  4 |   const ref = useRef(props.value);
+> 5 |   const [state] = useReducer(() => ref.current, null);
+    |                              ^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
+  6 |
+  7 |   return <Stringify state={state} />;
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.js
new file mode 100644
index 00000000000..135a78e0bae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.js
@@ -0,0 +1,13 @@
+import {useReducer, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const [state] = useReducer(() => ref.current, null);
+
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md
new file mode 100644
index 00000000000..73cead6affc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const object = {};
+  object.foo = () => ref.current;
+  const refValue = object.foo();
+  return <div>{refValue}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:7:19
+   5 |   const object = {};
+   6 |   object.foo = () => ref.current;
+>  7 |   const refValue = object.foo();
+     |                    ^^^^^^^^^^ This function accesses a ref value
+   8 |   return <div>{refValue}</div>;
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.js
new file mode 100644
index 00000000000..9d3faac764b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.js
@@ -0,0 +1,9 @@
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const object = {};
+  object.foo = () => ref.current;
+  const refValue = object.foo();
+  return <div>{refValue}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md
new file mode 100644
index 00000000000..a10db96463d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+import {useRef, useState} from 'react';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const [state] = useState(() => ref.current);
+
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-in-state-initializer.ts:5:27
+  3 | function Component(props) {
+  4 |   const ref = useRef(props.value);
+> 5 |   const [state] = useState(() => ref.current);
+    |                            ^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
+  6 |
+  7 |   return <Stringify state={state} />;
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.js
new file mode 100644
index 00000000000..c3f233023ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.js
@@ -0,0 +1,13 @@
+import {useRef, useState} from 'react';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const [state] = useState(() => ref.current);
+
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
new file mode 100644
index 00000000000..09a64d4bab2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    const aliasedRef = ref;
+    const current = aliasedRef.current;
+    return <Foo item={item} current={current} />;
+  };
+  return <Items>{props.items.map(item => renderItem(item))}</Items>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33
+   7 |     return <Foo item={item} current={current} />;
+   8 |   };
+>  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.js
new file mode 100644
index 00000000000..fd5b5ff3013
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.js
@@ -0,0 +1,10 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    const aliasedRef = ref;
+    const current = aliasedRef.current;
+    return <Foo item={item} current={current} />;
+  };
+  return <Items>{props.items.map(item => renderItem(item))}</Items>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md
new file mode 100644
index 00000000000..a401df523c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  <div>{x}</div>;
+  x.push(props.value);
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-array-push-frozen.ts:4:2
+  2 |   const x = [];
+  3 |   <div>{x}</div>;
+> 4 |   x.push(props.value);
+    |   ^ value cannot be modified
+  5 |   return x;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.js
new file mode 100644
index 00000000000..3ede9c0463c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const x = [];
+  <div>{x}</div>;
+  x.push(props.value);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.expect.md
new file mode 100644
index 00000000000..293596a5403
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @flow @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+import {makeObject_Primitives} from 'shared-runtime';
+
+component Example() {
+  const fooRef = makeObject_Primitives();
+  fooRef.current = true;
+
+  return <Stringify foo={fooRef} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component Example() {
+  5 |   const fooRef = makeObject_Primitives();
+> 6 |   fooRef.current = true;
+    |   ^^^^^^^^^^^^^^ Cannot update ref during render
+  7 |
+  8 |   return <Stringify foo={fooRef} />;
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.js
new file mode 100644
index 00000000000..39df293ba62
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.js
@@ -0,0 +1,9 @@
+// @flow @enableTreatRefLikeIdentifiersAsRefs @validateRefAccessDuringRender
+import {makeObject_Primitives} from 'shared-runtime';
+
+component Example() {
+  const fooRef = makeObject_Primitives();
+  fooRef.current = true;
+
+  return <Stringify foo={fooRef} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md
new file mode 100644
index 00000000000..e07aa2e32c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = useState;
+  const state = x(null);
+  return state[0];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-assign-hook-to-local.ts:2:12
+  1 | function Component(props) {
+> 2 |   const x = useState;
+    |             ^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 |   const state = x(null);
+  4 |   return state[0];
+  5 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.js
new file mode 100644
index 00000000000..886860e4de5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  const x = useState;
+  const state = x(null);
+  return state[0];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.expect.md
new file mode 100644
index 00000000000..aef40d34cb5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @flow
+
+component Foo() {
+  const foo = useFoo();
+  foo.current = true;
+  return <div />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed.
+
+  3 | component Foo() {
+  4 |   const foo = useFoo();
+> 5 |   foo.current = true;
+    |   ^^^ value cannot be modified
+  6 |   return <div />;
+  7 | }
+  8 |
+
+Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.js
new file mode 100644
index 00000000000..efe92bc034e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.js
@@ -0,0 +1,7 @@
+// @flow
+
+component Foo() {
+  const foo = useFoo();
+  foo.current = true;
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md
new file mode 100644
index 00000000000..d0e4864a761
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  x[0] = true;
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-computed-store-to-frozen-value.ts:5:2
+  3 |   // freeze
+  4 |   <div>{x}</div>;
+> 5 |   x[0] = true;
+    |   ^ value cannot be modified
+  6 |   return x;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.js
new file mode 100644
index 00000000000..a0741c5a581
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  x[0] = true;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md
new file mode 100644
index 00000000000..a89b7dc0f09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+import {useFragment as readFragment} from 'shared-runtime';
+
+function Component(props) {
+  let data;
+  if (props.cond) {
+    data = readFragment();
+  }
+  return data;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-conditional-call-aliased-hook-import.ts:6:11
+  4 |   let data;
+  5 |   if (props.cond) {
+> 6 |     data = readFragment();
+    |            ^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   }
+  8 |   return data;
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.js
new file mode 100644
index 00000000000..0d44272bf4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.js
@@ -0,0 +1,9 @@
+import {useFragment as readFragment} from 'shared-runtime';
+
+function Component(props) {
+  let data;
+  if (props.cond) {
+    data = readFragment();
+  }
+  return data;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md
new file mode 100644
index 00000000000..b5c2a7eb597
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+import {useState as state} from 'react';
+
+function Component(props) {
+  let s;
+  if (props.cond) {
+    [s] = state();
+  }
+  return s;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-conditional-call-aliased-react-hook.ts:6:10
+  4 |   let s;
+  5 |   if (props.cond) {
+> 6 |     [s] = state();
+    |           ^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   }
+  8 |   return s;
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.js
new file mode 100644
index 00000000000..43ca61de170
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.js
@@ -0,0 +1,9 @@
+import {useState as state} from 'react';
+
+function Component(props) {
+  let s;
+  if (props.cond) {
+    [s] = state();
+  }
+  return s;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md
new file mode 100644
index 00000000000..c904e866ff6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+import {makeArray as useArray} from 'other';
+
+function Component(props) {
+  let data;
+  if (props.cond) {
+    data = useArray();
+  }
+  return data;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-conditional-call-non-hook-imported-as-hook.ts:6:11
+  4 |   let data;
+  5 |   if (props.cond) {
+> 6 |     data = useArray();
+    |            ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   }
+  8 |   return data;
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.js
new file mode 100644
index 00000000000..6abdb8ab488
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.js
@@ -0,0 +1,9 @@
+import {makeArray as useArray} from 'other';
+
+function Component(props) {
+  let data;
+  if (props.cond) {
+    data = useArray();
+  }
+  return data;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md
new file mode 100644
index 00000000000..e4a94249623
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+function Component({item, cond}) {
+  const [prevItem, setPrevItem] = useState(item);
+  const [state, setState] = useState(0);
+
+  useMemo(() => {
+    if (cond) {
+      setPrevItem(item);
+      setState(0);
+    }
+  }, [cond, key, init]);
+
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).
+
+error.invalid-conditional-setState-in-useMemo.ts:7:6
+   5 |   useMemo(() => {
+   6 |     if (cond) {
+>  7 |       setPrevItem(item);
+     |       ^^^^^^^^^^^ Found setState() within useMemo()
+   8 |       setState(0);
+   9 |     }
+  10 |   }, [cond, key, init]);
+
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).
+
+error.invalid-conditional-setState-in-useMemo.ts:8:6
+   6 |     if (cond) {
+   7 |       setPrevItem(item);
+>  8 |       setState(0);
+     |       ^^^^^^^^ Found setState() within useMemo()
+   9 |     }
+  10 |   }, [cond, key, init]);
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.js
new file mode 100644
index 00000000000..4385ef6a6cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.js
@@ -0,0 +1,13 @@
+function Component({item, cond}) {
+  const [prevItem, setPrevItem] = useState(item);
+  const [state, setState] = useState(0);
+
+  useMemo(() => {
+    if (cond) {
+      setPrevItem(item);
+      setState(0);
+    }
+  }, [cond, key, init]);
+
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md
new file mode 100644
index 00000000000..1518035ae04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  delete x[y];
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-delete-computed-property-of-frozen-value.ts:5:9
+  3 |   // freeze
+  4 |   <div>{x}</div>;
+> 5 |   delete x[y];
+    |          ^ value cannot be modified
+  6 |   return x;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.js
new file mode 100644
index 00000000000..d9b47447d38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  delete x[y];
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md
new file mode 100644
index 00000000000..47f10323ca4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  delete x.y;
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-delete-property-of-frozen-value.ts:5:9
+  3 |   // freeze
+  4 |   <div>{x}</div>;
+> 5 |   delete x.y;
+    |          ^ value cannot be modified
+  6 |   return x;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.js
new file mode 100644
index 00000000000..f4239d7f8ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  delete x.y;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md
new file mode 100644
index 00000000000..ccbcf68a576
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function BadExample() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+
+error.invalid-derived-computation-in-effect.ts:11:4
+   9 |   const [fullName, setFullName] = useState('');
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+  12 |   }, [firstName, lastName]);
+  13 |
+  14 |   return <div>{fullName}</div>;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js
new file mode 100644
index 00000000000..0209b47ce39
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js
@@ -0,0 +1,15 @@
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function BadExample() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md
new file mode 100644
index 00000000000..7565ae35466
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function useFoo(props) {
+  [x] = props;
+  return {x};
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `x` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.invalid-destructure-assignment-to-global.ts:2:3
+  1 | function useFoo(props) {
+> 2 |   [x] = props;
+    |    ^ `x` cannot be reassigned
+  3 |   return {x};
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.js
new file mode 100644
index 00000000000..adb0fb7b846
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.js
@@ -0,0 +1,4 @@
+function useFoo(props) {
+  [x] = props;
+  return {x};
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md
new file mode 100644
index 00000000000..fedb1d5f3b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let a;
+  [a, b] = props.value;
+
+  return [a, b];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `b` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.invalid-destructure-to-local-global-variables.ts:3:6
+  1 | function Component(props) {
+  2 |   let a;
+> 3 |   [a, b] = props.value;
+    |       ^ `b` cannot be reassigned
+  4 |
+  5 |   return [a, b];
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.js
new file mode 100644
index 00000000000..0bee2274ae3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  let a;
+  [a, b] = props.value;
+
+  return [a, b];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
new file mode 100644
index 00000000000..c43bb5dcd9b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+  ref.current = false;
+
+  return <button ref={ref} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-disallow-mutating-ref-in-render.ts:4:2
+  2 | function Component() {
+  3 |   const ref = useRef(null);
+> 4 |   ref.current = false;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |
+  6 |   return <button ref={ref} />;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js
new file mode 100644
index 00000000000..714eb2d3206
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js
@@ -0,0 +1,7 @@
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+  ref.current = false;
+
+  return <button ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
new file mode 100644
index 00000000000..c8b70edcc41
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    ref.current = false;
+  };
+  const changeRef = setRef;
+  changeRef();
+
+  return <button ref={ref} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-disallow-mutating-refs-in-render-transitive.ts:9:2
+   7 |   };
+   8 |   const changeRef = setRef;
+>  9 |   changeRef();
+     |   ^^^^^^^^^ This function accesses a ref value
+  10 |
+  11 |   return <button ref={ref} />;
+  12 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js
new file mode 100644
index 00000000000..93857a55645
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js
@@ -0,0 +1,12 @@
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    ref.current = false;
+  };
+  const changeRef = setRef;
+  changeRef();
+
+  return <button ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.expect.md
new file mode 100644
index 00000000000..d766bc03b21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  eval('props.x = true');
+  return <div />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: The 'eval' function is not supported
+
+Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler.
+
+error.invalid-eval-unsupported.ts:2:2
+  1 | function Component(props) {
+> 2 |   eval('props.x = true');
+    |   ^^^^ The 'eval' function is not supported
+  3 |   return <div />;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.js
new file mode 100644
index 00000000000..b8885d2d54a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  eval('props.x = true');
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md
new file mode 100644
index 00000000000..ad5ad24908d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [x, setX] = useState({value: ''});
+  const onChange = e => {
+    // INVALID! should use copy-on-write and pass the new value
+    x.value = e.target.value;
+    setX(x);
+  };
+  return <input value={x.value} onChange={onChange} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead.
+
+error.invalid-function-expression-mutates-immutable-value.ts:5:4
+  3 |   const onChange = e => {
+  4 |     // INVALID! should use copy-on-write and pass the new value
+> 5 |     x.value = e.target.value;
+    |     ^ `x` cannot be modified
+  6 |     setX(x);
+  7 |   };
+  8 |   return <input value={x.value} onChange={onChange} />;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.js
new file mode 100644
index 00000000000..64a4b37d396
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const [x, setX] = useState({value: ''});
+  const onChange = e => {
+    // INVALID! should use copy-on-write and pass the new value
+    x.value = e.target.value;
+    setX(x);
+  };
+  return <input value={x.value} onChange={onChange} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md
new file mode 100644
index 00000000000..c8331d43afb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+let someGlobal = false;
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = () => {
+    someGlobal = true;
+  };
+  const indirectSetGlobal = () => {
+    setGlobal();
+  };
+  indirectSetGlobal();
+
+  useEffect(() => {
+    setState(someGlobal);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.invalid-global-reassignment-indirect.ts:9:4
+   7 |
+   8 |   const setGlobal = () => {
+>  9 |     someGlobal = true;
+     |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
+  10 |   };
+  11 |   const indirectSetGlobal = () => {
+  12 |     setGlobal();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.js
new file mode 100644
index 00000000000..9ba58c23a81
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.js
@@ -0,0 +1,26 @@
+import {useEffect, useState} from 'react';
+
+let someGlobal = false;
+
+function Component() {
+  const [state, setState] = useState(someGlobal);
+
+  const setGlobal = () => {
+    someGlobal = true;
+  };
+  const indirectSetGlobal = () => {
+    setGlobal();
+  };
+  indirectSetGlobal();
+
+  useEffect(() => {
+    setState(someGlobal);
+  }, [someGlobal]);
+
+  return <div>{String(state)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md
new file mode 100644
index 00000000000..291d3873b45
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {useEffect, useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo() {
+  /**
+   * Previously, this lowered to
+   * $1 = LoadContext capture setState
+   * $2 = FunctionExpression deps=$1 context=setState
+   *  [[ at this point, we freeze the `LoadContext setState` instruction, but it will never be referenced again ]]
+   *
+   * Now, this function expression directly references `setState`, which freezes
+   * the source `DeclareContext HoistedConst setState`. Freezing source identifiers
+   * (instead of the one level removed `LoadContext`) is more semantically correct
+   * for everything *other* than hoisted context declarations.
+   *
+   * $2 = Function context=setState
+   */
+  useEffect(() => setState(2), []);
+
+  const [state, setState] = useState(0);
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access variable before it is declared
+
+`setState` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.
+
+error.invalid-hoisting-setstate.ts:19:18
+  17 |    * $2 = Function context=setState
+  18 |    */
+> 19 |   useEffect(() => setState(2), []);
+     |                   ^^^^^^^^ `setState` accessed before it is declared
+  20 |
+  21 |   const [state, setState] = useState(0);
+  22 |   return <Stringify state={state} />;
+
+error.invalid-hoisting-setstate.ts:21:16
+  19 |   useEffect(() => setState(2), []);
+  20 |
+> 21 |   const [state, setState] = useState(0);
+     |                 ^^^^^^^^ `setState` is declared here
+  22 |   return <Stringify state={state} />;
+  23 | }
+  24 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.js
new file mode 100644
index 00000000000..f3b4167772e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.js
@@ -0,0 +1,29 @@
+// @enableNewMutationAliasingModel
+import {useEffect, useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo() {
+  /**
+   * Previously, this lowered to
+   * $1 = LoadContext capture setState
+   * $2 = FunctionExpression deps=$1 context=setState
+   *  [[ at this point, we freeze the `LoadContext setState` instruction, but it will never be referenced again ]]
+   *
+   * Now, this function expression directly references `setState`, which freezes
+   * the source `DeclareContext HoistedConst setState`. Freezing source identifiers
+   * (instead of the one level removed `LoadContext`) is more semantically correct
+   * for everything *other* than hoisted context declarations.
+   *
+   * $2 = Function context=setState
+   */
+  useEffect(() => setState(2), []);
+
+  const [state, setState] = useState(0);
+  return <Stringify state={state} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.expect.md
new file mode 100644
index 00000000000..49709441df9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+
+function useFoo() {
+  const cache = new Map();
+  useHook(() => {
+    cache.set('key', 'value');
+  });
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-hook-function-argument-mutates-local-variable.ts:5:10
+  3 | function useFoo() {
+  4 |   const cache = new Map();
+> 5 |   useHook(() => {
+    |           ^^^^^^^
+> 6 |     cache.set('key', 'value');
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 7 |   });
+    | ^^^^ This function may (indirectly) reassign or modify `cache` after render
+  8 | }
+  9 |
+
+error.invalid-hook-function-argument-mutates-local-variable.ts:6:4
+  4 |   const cache = new Map();
+  5 |   useHook(() => {
+> 6 |     cache.set('key', 'value');
+    |     ^^^^^ This modifies `cache`
+  7 |   });
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.js
new file mode 100644
index 00000000000..323d35700a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.js
@@ -0,0 +1,8 @@
+// @validateNoFreezingKnownMutableFunctions
+
+function useFoo() {
+  const cache = new Map();
+  useHook(() => {
+    cache.set('key', 'value');
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md
new file mode 100644
index 00000000000..255da7389b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+function Component() {
+  const date = Date.now();
+  const now = performance.now();
+  const rand = Math.random();
+  return <Foo date={date} now={now} rand={rand} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Cannot call impure function during render
+
+`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   const date = Date.now();
+    |                ^^^^^^^^^^ Cannot call impure function
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+  7 |   return <Foo date={date} now={now} rand={rand} />;
+
+Error: Cannot call impure function during render
+
+`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:5:14
+  3 | function Component() {
+  4 |   const date = Date.now();
+> 5 |   const now = performance.now();
+    |               ^^^^^^^^^^^^^^^^^ Cannot call impure function
+  6 |   const rand = Math.random();
+  7 |   return <Foo date={date} now={now} rand={rand} />;
+  8 | }
+
+Error: Cannot call impure function during render
+
+`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:6:15
+  4 |   const date = Date.now();
+  5 |   const now = performance.now();
+> 6 |   const rand = Math.random();
+    |                ^^^^^^^^^^^^^ Cannot call impure function
+  7 |   return <Foo date={date} now={now} rand={rand} />;
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.js
new file mode 100644
index 00000000000..6faf98caff7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.js
@@ -0,0 +1,8 @@
+// @validateNoImpureFunctionsInRender
+
+function Component() {
+  const date = Date.now();
+  const now = performance.now();
+  const rand = Math.random();
+  return <Foo date={date} now={now} rand={rand} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md
new file mode 100644
index 00000000000..3a609e102b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component({prop1, prop2}) {
+  'use memo';
+
+  const data = useIdentity(
+    new Map([
+      [0, 'value0'],
+      [1, 'value1'],
+    ])
+  );
+  let i = 0;
+  const items = [];
+  items.push(
+    <Stringify
+      key={i}
+      onClick={() => data.get(i) + prop1}
+      shouldInvokeFns={true}
+    />
+  );
+  i = i + 1;
+  items.push(
+    <Stringify
+      key={i}
+      onClick={() => data.get(i) + prop2}
+      shouldInvokeFns={true}
+    />
+  );
+  return <>{items}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop1: 'prop1', prop2: 'prop2'}],
+  sequentialRenders: [
+    {prop1: 'prop1', prop2: 'prop2'},
+    {prop1: 'prop1', prop2: 'prop2'},
+    {prop1: 'changed', prop2: 'prop2'},
+  ],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-jsx-captures-context-variable.ts:22:2
+  20 |     />
+  21 |   );
+> 22 |   i = i + 1;
+     |   ^ `i` cannot be modified
+  23 |   items.push(
+  24 |     <Stringify
+  25 |       key={i}
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.js
new file mode 100644
index 00000000000..166b9236c5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.js
@@ -0,0 +1,41 @@
+// @enableNewMutationAliasingModel
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component({prop1, prop2}) {
+  'use memo';
+
+  const data = useIdentity(
+    new Map([
+      [0, 'value0'],
+      [1, 'value1'],
+    ])
+  );
+  let i = 0;
+  const items = [];
+  items.push(
+    <Stringify
+      key={i}
+      onClick={() => data.get(i) + prop1}
+      shouldInvokeFns={true}
+    />
+  );
+  i = i + 1;
+  items.push(
+    <Stringify
+      key={i}
+      onClick={() => data.get(i) + prop2}
+      shouldInvokeFns={true}
+    />
+  );
+  return <>{items}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop1: 'prop1', prop2: 'prop2'}],
+  sequentialRenders: [
+    {prop1: 'prop1', prop2: 'prop2'},
+    {prop1: 'prop1', prop2: 'prop2'},
+    {prop1: 'changed', prop2: 'prop2'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-function.expect.md
new file mode 100644
index 00000000000..ef14379f2f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-function.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+import {knownIncompatible} from 'ReactCompilerKnownIncompatibleTest';
+
+function Component() {
+  const data = knownIncompatible();
+  return <div>Error</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Use of incompatible library
+
+This API returns functions which cannot be memoized without leading to stale UI. To prevent this, by default React Compiler will skip memoizing this component/hook. However, you may see issues if values from this API are passed to other components/hooks that are memoized.
+
+error.invalid-known-incompatible-function.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   const data = knownIncompatible();
+    |                ^^^^^^^^^^^^^^^^^ useKnownIncompatible is known to be incompatible
+  5 |   return <div>Error</div>;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-function.js
new file mode 100644
index 00000000000..778b6dd0453
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-function.js
@@ -0,0 +1,6 @@
+import {knownIncompatible} from 'ReactCompilerKnownIncompatibleTest';
+
+function Component() {
+  const data = knownIncompatible();
+  return <div>Error</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook-return-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook-return-property.expect.md
new file mode 100644
index 00000000000..13364153480
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook-return-property.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+import {useKnownIncompatibleIndirect} from 'ReactCompilerKnownIncompatibleTest';
+
+function Component() {
+  const {incompatible} = useKnownIncompatibleIndirect();
+  return <div>{incompatible()}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Use of incompatible library
+
+This API returns functions which cannot be memoized without leading to stale UI. To prevent this, by default React Compiler will skip memoizing this component/hook. However, you may see issues if values from this API are passed to other components/hooks that are memoized.
+
+error.invalid-known-incompatible-hook-return-property.ts:5:15
+  3 | function Component() {
+  4 |   const {incompatible} = useKnownIncompatibleIndirect();
+> 5 |   return <div>{incompatible()}</div>;
+    |                ^^^^^^^^^^^^ useKnownIncompatibleIndirect returns an incompatible() function that is known incompatible
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook-return-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook-return-property.js
new file mode 100644
index 00000000000..1160ccb4dc6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook-return-property.js
@@ -0,0 +1,6 @@
+import {useKnownIncompatibleIndirect} from 'ReactCompilerKnownIncompatibleTest';
+
+function Component() {
+  const {incompatible} = useKnownIncompatibleIndirect();
+  return <div>{incompatible()}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook.expect.md
new file mode 100644
index 00000000000..dd01727b704
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+import {useKnownIncompatible} from 'ReactCompilerKnownIncompatibleTest';
+
+function Component() {
+  const data = useKnownIncompatible();
+  return <div>Error</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Use of incompatible library
+
+This API returns functions which cannot be memoized without leading to stale UI. To prevent this, by default React Compiler will skip memoizing this component/hook. However, you may see issues if values from this API are passed to other components/hooks that are memoized.
+
+error.invalid-known-incompatible-hook.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   const data = useKnownIncompatible();
+    |                ^^^^^^^^^^^^^^^^^^^^ useKnownIncompatible is known to be incompatible
+  5 |   return <div>Error</div>;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook.js
new file mode 100644
index 00000000000..618516c55c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-known-incompatible-hook.js
@@ -0,0 +1,6 @@
+import {useKnownIncompatible} from 'ReactCompilerKnownIncompatibleTest';
+
+function Component() {
+  const data = useKnownIncompatible();
+  return <div>Error</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.expect.md
new file mode 100644
index 00000000000..c8547b3b1ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  let y = x;
+
+  if (props.p1) {
+    x = [];
+  }
+
+  let _ = <Component x={x} />;
+
+  // y is MaybeFrozen at this point, since it may alias to x
+  // (which is the above line freezes)
+  y.push(props.p2);
+
+  return <Component x={x} y={y} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-mutate-after-aliased-freeze.ts:13:2
+  11 |   // y is MaybeFrozen at this point, since it may alias to x
+  12 |   // (which is the above line freezes)
+> 13 |   y.push(props.p2);
+     |   ^ value cannot be modified
+  14 |
+  15 |   return <Component x={x} y={y} />;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.js
new file mode 100644
index 00000000000..8b08aaa2156
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  let x = [];
+  let y = x;
+
+  if (props.p1) {
+    x = [];
+  }
+
+  let _ = <Component x={x} />;
+
+  // y is MaybeFrozen at this point, since it may alias to x
+  // (which is the above line freezes)
+  y.push(props.p2);
+
+  return <Component x={x} y={y} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md
new file mode 100644
index 00000000000..e213b42f36d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+
+  let _ = <Component x={x} />;
+
+  // x is Frozen at this point
+  x.push(props.p2);
+
+  return <div>{_}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-mutate-after-freeze.ts:7:2
+   5 |
+   6 |   // x is Frozen at this point
+>  7 |   x.push(props.p2);
+     |   ^ value cannot be modified
+   8 |
+   9 |   return <div>{_}</div>;
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.js
new file mode 100644
index 00000000000..a40fbcb31e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  let x = [];
+
+  let _ = <Component x={x} />;
+
+  // x is Frozen at this point
+  x.push(props.p2);
+
+  return <div>{_}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md
new file mode 100644
index 00000000000..142f538a0dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const FooContext = useContext(Foo);
+  // This function should be memoized, but its mutable range is entangled
+  // with the useContext call. We can't memoize hooks, therefore the
+  // reactive scope around the hook + callback is pruned and we're left
+  // w no memoization of the callback.
+  //
+  // Ideally we'd determine that this isn't called during render and can
+  // therefore be considered "immutable" or otherwise safe to memoize
+  // independently
+  const onClick = () => {
+    FooContext.current = true;
+  };
+  return <div onClick={onClick} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from 'useContext()' is not allowed..
+
+error.invalid-mutate-context-in-callback.ts:12:4
+  10 |   // independently
+  11 |   const onClick = () => {
+> 12 |     FooContext.current = true;
+     |     ^^^^^^^^^^ `FooContext` cannot be modified
+  13 |   };
+  14 |   return <div onClick={onClick} />;
+  15 | }
+
+Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.js
new file mode 100644
index 00000000000..cd9f0c7e83c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  const FooContext = useContext(Foo);
+  // This function should be memoized, but its mutable range is entangled
+  // with the useContext call. We can't memoize hooks, therefore the
+  // reactive scope around the hook + callback is pruned and we're left
+  // w no memoization of the callback.
+  //
+  // Ideally we'd determine that this isn't called during render and can
+  // therefore be considered "immutable" or otherwise safe to memoize
+  // independently
+  const onClick = () => {
+    FooContext.current = true;
+  };
+  return <div onClick={onClick} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md
new file mode 100644
index 00000000000..eddbfb5eac1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const context = useContext(FooContext);
+  context.value = props.value;
+  return context.value;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from 'useContext()' is not allowed..
+
+error.invalid-mutate-context.ts:3:2
+  1 | function Component(props) {
+  2 |   const context = useContext(FooContext);
+> 3 |   context.value = props.value;
+    |   ^^^^^^^ value cannot be modified
+  4 |   return context.value;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.js
new file mode 100644
index 00000000000..8dda5f7d2df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  const context = useContext(FooContext);
+  context.value = props.value;
+  return context.value;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.expect.md
new file mode 100644
index 00000000000..3e3dcab8186
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component() {
+  const renderItem = item => {
+    // Multiple returns so that the return type is a Phi (union)
+    if (item == null) {
+      return null;
+    }
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.invalid-mutate-global-in-render-helper-phi-return-prop.ts:12:4
+  10 |     // called during render, and thus it's unsafe to mutate globals or call
+  11 |     // other impure code.
+> 12 |     global.property = true;
+     |     ^^^^^^ value cannot be modified
+  13 |     return <Item item={item} value={rand} />;
+  14 |   };
+  15 |   return <ItemList renderItem={renderItem} />;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.js
new file mode 100644
index 00000000000..b6ca0a04aee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.js
@@ -0,0 +1,16 @@
+function Component() {
+  const renderItem = item => {
+    // Multiple returns so that the return type is a Phi (union)
+    if (item == null) {
+      return null;
+    }
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.expect.md
new file mode 100644
index 00000000000..9e995d5124d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function Component() {
+  const renderItem = item => {
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.invalid-mutate-global-in-render-helper-prop.ts:8:4
+   6 |     // called during render, and thus it's unsafe to mutate globals or call
+   7 |     // other impure code.
+>  8 |     global.property = true;
+     |     ^^^^^^ value cannot be modified
+   9 |     return <Item item={item} value={rand} />;
+  10 |   };
+  11 |   return <ItemList renderItem={renderItem} />;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.js
new file mode 100644
index 00000000000..9355c482fb6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.js
@@ -0,0 +1,12 @@
+function Component() {
+  const renderItem = item => {
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.expect.md
new file mode 100644
index 00000000000..3ea3d017179
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const frozen = useHook();
+  let x;
+  if (props.cond) {
+    x = frozen;
+  } else {
+    x = {};
+  }
+  x.property = true;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed.
+
+error.invalid-mutate-phi-which-could-be-frozen.ts:11:2
+   9 |     x = {};
+  10 |   }
+> 11 |   x.property = true;
+     |   ^ value cannot be modified
+  12 | }
+  13 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.js
new file mode 100644
index 00000000000..f1f4691006b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.js
@@ -0,0 +1,12 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const frozen = useHook();
+  let x;
+  if (props.cond) {
+    x = frozen;
+  } else {
+    x = {};
+  }
+  x.property = true;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md
new file mode 100644
index 00000000000..c97cf9b8658
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+function Component(props) {
+  let x = null;
+  while (x == null) {
+    x = props.value;
+  }
+  let y = x;
+  let mutateProps = () => {
+    y.foo = true;
+  };
+  let mutatePropsIndirect = () => {
+    mutateProps();
+  };
+  useEffect(() => mutatePropsIndirect(), [mutatePropsIndirect]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.invalid-mutate-props-in-effect-fixpoint.ts:10:4
+   8 |   let y = x;
+   9 |   let mutateProps = () => {
+> 10 |     y.foo = true;
+     |     ^ `y` cannot be modified
+  11 |   };
+  12 |   let mutatePropsIndirect = () => {
+  13 |     mutateProps();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.js
new file mode 100644
index 00000000000..07843123424
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.js
@@ -0,0 +1,16 @@
+import {useEffect} from 'react';
+
+function Component(props) {
+  let x = null;
+  while (x == null) {
+    x = props.value;
+  }
+  let y = x;
+  let mutateProps = () => {
+    y.foo = true;
+  };
+  let mutatePropsIndirect = () => {
+    mutateProps();
+  };
+  useEffect(() => mutatePropsIndirect(), [mutatePropsIndirect]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md
new file mode 100644
index 00000000000..164b5d977ef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = [];
+  for (const x of props.items) {
+    x.modified = true;
+    items.push(x);
+  }
+  return items;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.invalid-mutate-props-via-for-of-iterator.ts:4:4
+  2 |   const items = [];
+  3 |   for (const x of props.items) {
+> 4 |     x.modified = true;
+    |     ^ value cannot be modified
+  5 |     items.push(x);
+  6 |   }
+  7 |   return items;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.js
new file mode 100644
index 00000000000..d7fd4951927
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.js
@@ -0,0 +1,8 @@
+function Component(props) {
+  const items = [];
+  for (const x of props.items) {
+    x.modified = true;
+    items.push(x);
+  }
+  return items;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md
new file mode 100644
index 00000000000..62792df4d85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function useInvalidMutation(options) {
+  function test() {
+    foo(options.foo); // error should not point on this line
+    options.foo = 'bar';
+  }
+  return test;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.invalid-mutation-in-closure.ts:4:4
+  2 |   function test() {
+  3 |     foo(options.foo); // error should not point on this line
+> 4 |     options.foo = 'bar';
+    |     ^^^^^^^ `options` cannot be modified
+  5 |   }
+  6 |   return test;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.js
new file mode 100644
index 00000000000..ca438768ed3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.js
@@ -0,0 +1,7 @@
+function useInvalidMutation(options) {
+  function test() {
+    foo(options.foo); // error should not point on this line
+    options.foo = 'bar';
+  }
+  return test;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md
new file mode 100644
index 00000000000..4ac7af5bae6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = cond ? someGlobal : props.foo;
+  const mutatePhiThatCouldBeProps = () => {
+    x.y = true;
+  };
+  const indirectMutateProps = () => {
+    mutatePhiThatCouldBeProps();
+  };
+  useEffect(() => indirectMutateProps(), []);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.invalid-mutation-of-possible-props-phi-indirect.ts:4:4
+  2 |   let x = cond ? someGlobal : props.foo;
+  3 |   const mutatePhiThatCouldBeProps = () => {
+> 4 |     x.y = true;
+    |     ^ `x` cannot be modified
+  5 |   };
+  6 |   const indirectMutateProps = () => {
+  7 |     mutatePhiThatCouldBeProps();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.js
new file mode 100644
index 00000000000..f6c2dee3d8b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  let x = cond ? someGlobal : props.foo;
+  const mutatePhiThatCouldBeProps = () => {
+    x.y = true;
+  };
+  const indirectMutateProps = () => {
+    mutatePhiThatCouldBeProps();
+  };
+  useEffect(() => indirectMutateProps(), []);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.expect.md
new file mode 100644
index 00000000000..437fbcb38c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+function Component() {
+  let local;
+  const mk_reassignlocal = () => {
+    // Create the reassignment function inside another function, then return it
+    const reassignLocal = newValue => {
+      local = newValue;
+    };
+    return reassignLocal;
+  };
+  const reassignLocal = mk_reassignlocal();
+  const onMount = newValue => {
+    reassignLocal('hello');
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+  return 'ok';
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-nested-function-reassign-local-variable-in-effect.ts:7:6
+   5 |     // Create the reassignment function inside another function, then return it
+   6 |     const reassignLocal = newValue => {
+>  7 |       local = newValue;
+     |       ^^^^^ Cannot reassign `local` after render completes
+   8 |     };
+   9 |     return reassignLocal;
+  10 |   };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.js
new file mode 100644
index 00000000000..92833663aae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.js
@@ -0,0 +1,37 @@
+import {useEffect} from 'react';
+function Component() {
+  let local;
+  const mk_reassignlocal = () => {
+    // Create the reassignment function inside another function, then return it
+    const reassignLocal = newValue => {
+      local = newValue;
+    };
+    return reassignLocal;
+  };
+  const reassignLocal = mk_reassignlocal();
+  const onMount = newValue => {
+    reassignLocal('hello');
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+  return 'ok';
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md
new file mode 100644
index 00000000000..93f804cae31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @enableCustomTypeDefinitionForReanimated
+
+/**
+ * Test that a global (i.e. non-imported) useSharedValue is treated as an
+ * unknown hook.
+ */
+function SomeComponent() {
+  const sharedVal = useSharedValue(0);
+  return (
+    <Button
+      onPress={() => (sharedVal.value = Math.random())}
+      title="Randomize"
+    />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed.
+
+error.invalid-non-imported-reanimated-shared-value-writes.ts:11:22
+   9 |   return (
+  10 |     <Button
+> 11 |       onPress={() => (sharedVal.value = Math.random())}
+     |                       ^^^^^^^^^ `sharedVal` cannot be modified
+  12 |       title="Randomize"
+  13 |     />
+  14 |   );
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.jsx
new file mode 100644
index 00000000000..8939b0ee00d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.jsx
@@ -0,0 +1,15 @@
+// @enableCustomTypeDefinitionForReanimated
+
+/**
+ * Test that a global (i.e. non-imported) useSharedValue is treated as an
+ * unknown hook.
+ */
+function SomeComponent() {
+  const sharedVal = useSharedValue(0);
+  return (
+    <Button
+      onPress={() => (sharedVal.value = Math.random())}
+      title="Randomize"
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.expect.md
new file mode 100644
index 00000000000..fa5cc6d53f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+function Component(props) {
+  const data = useMemo(() => {
+    // actual code is non-optional
+    return props.items.edges.nodes ?? [];
+    // deps are optional
+  }, [props.items?.edges?.nodes]);
+  return <Foo data={data} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items.edges.nodes`, but the source dependencies were [props.items?.edges?.nodes]. Inferred different dependency than source.
+
+error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.ts:3:23
+   1 | // @validatePreserveExistingMemoizationGuarantees
+   2 | function Component(props) {
+>  3 |   const data = useMemo(() => {
+     |                        ^^^^^^^
+>  4 |     // actual code is non-optional
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  5 |     return props.items.edges.nodes ?? [];
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  6 |     // deps are optional
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  7 |   }, [props.items?.edges?.nodes]);
+     | ^^^^ Could not preserve existing manual memoization
+   8 |   return <Foo data={data} />;
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.js
new file mode 100644
index 00000000000..1a6196a494e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-optional-member-expression-as-memo-dep-non-optional-in-body.js
@@ -0,0 +1,9 @@
+// @validatePreserveExistingMemoizationGuarantees
+function Component(props) {
+  const data = useMemo(() => {
+    // actual code is non-optional
+    return props.items.edges.nodes ?? [];
+    // deps are optional
+  }, [props.items?.edges?.nodes]);
+  return <Foo data={data} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.expect.md
new file mode 100644
index 00000000000..125faae8004
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return foo(useFoo);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-pass-hook-as-call-arg.ts:2:13
+  1 | function Component(props) {
+> 2 |   return foo(useFoo);
+    |              ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 | }
+  4 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.js
new file mode 100644
index 00000000000..b53bcb81814
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.js
@@ -0,0 +1,3 @@
+function Component(props) {
+  return foo(useFoo);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.expect.md
new file mode 100644
index 00000000000..64914ebbd1d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return <Child foo={useFoo} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-pass-hook-as-prop.ts:2:21
+  1 | function Component(props) {
+> 2 |   return <Child foo={useFoo} />;
+    |                      ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 | }
+  4 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.js
new file mode 100644
index 00000000000..4b3ea52d74b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.js
@@ -0,0 +1,3 @@
+function Component(props) {
+  return <Child foo={useFoo} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.expect.md
new file mode 100644
index 00000000000..3c70bfe8865
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+function Component() {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('key', 'value');
+  };
+  return <Foo fn={fn} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-pass-mutable-function-as-prop.ts:7:18
+  5 |     cache.set('key', 'value');
+  6 |   };
+> 7 |   return <Foo fn={fn} />;
+    |                   ^^ This function may (indirectly) reassign or modify `cache` after render
+  8 | }
+  9 |
+
+error.invalid-pass-mutable-function-as-prop.ts:5:4
+  3 |   const cache = new Map();
+  4 |   const fn = () => {
+> 5 |     cache.set('key', 'value');
+    |     ^^^^^ This modifies `cache`
+  6 |   };
+  7 |   return <Foo fn={fn} />;
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.js
new file mode 100644
index 00000000000..11793dfac5d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.js
@@ -0,0 +1,8 @@
+// @validateNoFreezingKnownMutableFunctions
+function Component() {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('key', 'value');
+  };
+  return <Foo fn={fn} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
new file mode 100644
index 00000000000..eaa140eb90b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const x = foo(ref);
+  return x.current;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-pass-ref-to-function.ts:4:16
+  2 | function Component(props) {
+  3 |   const ref = useRef(null);
+> 4 |   const x = foo(ref);
+    |                 ^^^ Passing a ref to a function may read its value during render
+  5 |   return x.current;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js
new file mode 100644
index 00000000000..bba228dfa43
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js
@@ -0,0 +1,6 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const x = foo(ref);
+  return x.current;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.expect.md
new file mode 100644
index 00000000000..9bfb86eae8b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const f = () => {
+    props.value = true;
+  };
+  const g = () => {
+    f();
+  };
+  g();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.invalid-prop-mutation-indirect.ts:3:4
+  1 | function Component(props) {
+  2 |   const f = () => {
+> 3 |     props.value = true;
+    |     ^^^^^ `props` cannot be modified
+  4 |   };
+  5 |   const g = () => {
+  6 |     f();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.js
new file mode 100644
index 00000000000..501f98be953
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const f = () => {
+    props.value = true;
+  };
+  const g = () => {
+    f();
+  };
+  g();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.expect.md
new file mode 100644
index 00000000000..2fae0dffc0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  x.y = true;
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.invalid-property-store-to-frozen-value.ts:5:2
+  3 |   // freeze
+  4 |   <div>{x}</div>;
+> 5 |   x.y = true;
+    |   ^ value cannot be modified
+  6 |   return x;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.js
new file mode 100644
index 00000000000..ff54bb789a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  const x = makeObject();
+  // freeze
+  <div>{x}</div>;
+  x.y = true;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.expect.md
new file mode 100644
index 00000000000..2730e34077c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const mutateProps = () => {
+    props.value = true;
+  };
+  const indirectMutateProps = () => {
+    mutateProps();
+  };
+  useEffect(() => indirectMutateProps(), []);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.invalid-props-mutation-in-effect-indirect.ts:3:4
+  1 | function Component(props) {
+  2 |   const mutateProps = () => {
+> 3 |     props.value = true;
+    |     ^^^^^ `props` cannot be modified
+  4 |   };
+  5 |   const indirectMutateProps = () => {
+  6 |     mutateProps();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.js
new file mode 100644
index 00000000000..0ab2f058f74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const mutateProps = () => {
+    props.value = true;
+  };
+  const indirectMutateProps = () => {
+    mutateProps();
+  };
+  useEffect(() => indirectMutateProps(), []);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
new file mode 100644
index 00000000000..cca903de74c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender @compilationMode:"infer"
+function Component({ref}) {
+  const value = ref.current;
+  return <div>{value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-read-ref-prop-in-render-destructure.ts:3:16
+  1 | // @validateRefAccessDuringRender @compilationMode:"infer"
+  2 | function Component({ref}) {
+> 3 |   const value = ref.current;
+    |                 ^^^^^^^^^^^ Cannot access ref value during render
+  4 |   return <div>{value}</div>;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.js
new file mode 100644
index 00000000000..81c58cf252d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.js
@@ -0,0 +1,5 @@
+// @validateRefAccessDuringRender @compilationMode:"infer"
+function Component({ref}) {
+  const value = ref.current;
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
new file mode 100644
index 00000000000..49b8e5d199f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender @compilationMode:"infer"
+function Component(props) {
+  const value = props.ref.current;
+  return <div>{value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-read-ref-prop-in-render-property-load.ts:3:16
+  1 | // @validateRefAccessDuringRender @compilationMode:"infer"
+  2 | function Component(props) {
+> 3 |   const value = props.ref.current;
+    |                 ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+  4 |   return <div>{value}</div>;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.js
new file mode 100644
index 00000000000..abb1ff86fb1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.js
@@ -0,0 +1,5 @@
+// @validateRefAccessDuringRender @compilationMode:"infer"
+function Component(props) {
+  const value = props.ref.current;
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-const.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-const.expect.md
new file mode 100644
index 00000000000..25b9a5c1863
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-const.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = 0;
+  x = 1;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign a `const` variable
+
+`x` is declared as const.
+
+error.invalid-reassign-const.ts:3:2
+  1 | function Component() {
+  2 |   const x = 0;
+> 3 |   x = 1;
+    |   ^ Cannot reassign a `const` variable
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-const.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-const.js
new file mode 100644
index 00000000000..d7443efa979
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-const.js
@@ -0,0 +1,4 @@
+function Component() {
+  const x = 0;
+  x = 1;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.expect.md
new file mode 100644
index 00000000000..6379515a057
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function useFoo() {
+  let x = 0;
+  return value => {
+    x = value;
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-in-hook-return-value.ts:4:4
+  2 |   let x = 0;
+  3 |   return value => {
+> 4 |     x = value;
+    |     ^ Cannot reassign `x` after render completes
+  5 |   };
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.js
new file mode 100644
index 00000000000..64a8b3ddc9b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.js
@@ -0,0 +1,6 @@
+function useFoo() {
+  let x = 0;
+  return value => {
+    x = value;
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.expect.md
new file mode 100644
index 00000000000..4e397afd6a0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component() {
+  let value = null;
+  const reassign = async () => {
+    await foo().then(result => {
+      // Reassigning a local variable in an async function is *always* mutating
+      // after render, so this should error regardless of where this ends up
+      // getting called
+      value = result;
+    });
+  };
+
+  const onClick = async () => {
+    await reassign();
+  };
+  return <div onClick={onClick}>Click</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable in async function
+
+Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-async-callback.ts:8:6
+   6 |       // after render, so this should error regardless of where this ends up
+   7 |       // getting called
+>  8 |       value = result;
+     |       ^^^^^ Cannot reassign `value`
+   9 |     });
+  10 |   };
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.js
new file mode 100644
index 00000000000..662f19dbd88
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.js
@@ -0,0 +1,16 @@
+function Component() {
+  let value = null;
+  const reassign = async () => {
+    await foo().then(result => {
+      // Reassigning a local variable in an async function is *always* mutating
+      // after render, so this should error regardless of where this ends up
+      // getting called
+      value = result;
+    });
+  };
+
+  const onClick = async () => {
+    await reassign();
+  };
+  return <div onClick={onClick}>Click</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.expect.md
new file mode 100644
index 00000000000..368b312022f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onMount = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
+  return 'ok';
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-effect.ts:7:4
+   5 |
+   6 |   const reassignLocal = newValue => {
+>  7 |     local = newValue;
+     |     ^^^^^ Cannot reassign `local` after render completes
+   8 |   };
+   9 |
+  10 |   const onMount = newValue => {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.js
new file mode 100644
index 00000000000..c1c288846eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.js
@@ -0,0 +1,38 @@
+import {useEffect} from 'react';
+
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onMount = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
+  return 'ok';
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.expect.md
new file mode 100644
index 00000000000..8c7973377d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const callback = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  useIdentity(() => {
+    callback();
+  });
+
+  return 'ok';
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-hook-argument.ts:8:4
+   6 |
+   7 |   const reassignLocal = newValue => {
+>  8 |     local = newValue;
+     |     ^^^^^ Cannot reassign `local` after render completes
+   9 |   };
+  10 |
+  11 |   const callback = newValue => {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.js
new file mode 100644
index 00000000000..a14df999978
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.js
@@ -0,0 +1,39 @@
+import {useEffect} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const callback = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  useIdentity(() => {
+    callback();
+  });
+
+  return 'ok';
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
new file mode 100644
index 00000000000..3ecbcc97c32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onClick = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  return <button onClick={onClick}>Submit</button>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-jsx-callback.ts:5:4
+  3 |
+  4 |   const reassignLocal = newValue => {
+> 5 |     local = newValue;
+    |     ^^^^^ Cannot reassign `local` after render completes
+  6 |   };
+  7 |
+  8 |   const onClick = newValue => {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.js
new file mode 100644
index 00000000000..121495ac1e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.js
@@ -0,0 +1,32 @@
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onClick = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  return <button onClick={onClick}>Submit</button>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md
new file mode 100644
index 00000000000..ba35168bcfe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Component() {
+  let x;
+  const y = useMemo(() => {
+    let z;
+    x = [];
+    z = true;
+    return z;
+  }, []);
+  return [x, y];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: useMemo() callbacks may not reassign variables declared outside of the callback
+
+useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
+
+error.invalid-reassign-variable-in-usememo.ts:5:4
+  3 |   const y = useMemo(() => {
+  4 |     let z;
+> 5 |     x = [];
+    |     ^ Cannot reassign variable
+  6 |     z = true;
+  7 |     return z;
+  8 |   }, []);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js
new file mode 100644
index 00000000000..885ba4b52d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js
@@ -0,0 +1,10 @@
+function Component() {
+  let x;
+  const y = useMemo(() => {
+    let z;
+    x = [];
+    z = true;
+    return z;
+  }, []);
+  return [x, y];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md
new file mode 100644
index 00000000000..ce1be800a13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  const current = !r.current;
+  return <div>{current}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 4 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   const current = !r.current;
+    |                    ^^^^^^^^^ Cannot access ref value during render
+  7 |   return <div>{current}</div>;
+  8 | }
+  9 |
+
+To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   const current = !r.current;
+    |                   ^^^^^^^^^^ Cannot access ref value during render
+  7 |   return <div>{current}</div>;
+  8 | }
+  9 |
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const r = useRef(null);
+   6 |   const current = !r.current;
+>  7 |   return <div>{current}</div>;
+     |                ^^^^^^^ Cannot access ref value during render
+   8 | }
+   9 |
+  10 | export const FIXTURE_ENTRYPOINT = {
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const r = useRef(null);
+   6 |   const current = !r.current;
+>  7 |   return <div>{current}</div>;
+     |                ^^^^^^^ Cannot access ref value during render
+   8 | }
+   9 |
+  10 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.js
new file mode 100644
index 00000000000..8d99008f805
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.js
@@ -0,0 +1,13 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  const current = !r.current;
+  return <div>{current}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
new file mode 100644
index 00000000000..df1e771fa25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    const current = ref.current;
+    return <Foo item={item} current={current} />;
+  };
+  return <Items>{props.items.map(item => renderItem(item))}</Items>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-ref-in-callback-invoked-during-render.ts:8:33
+   6 |     return <Foo item={item} current={current} />;
+   7 |   };
+>  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.js
new file mode 100644
index 00000000000..3474e301136
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.js
@@ -0,0 +1,9 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    const current = ref.current;
+    return <Foo item={item} current={current} />;
+  };
+  return <Items>{props.items.map(item => renderItem(item))}</Items>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md
new file mode 100644
index 00000000000..516d006c205
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (!r.current) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   if (!r.current) {
+    |        ^^^^^^^^^ Cannot access ref value during render
+  7 |     r.current = 1;
+  8 |   }
+  9 | }
+
+To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.js
new file mode 100644
index 00000000000..b9b5d41295c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.js
@@ -0,0 +1,14 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (!r.current) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
new file mode 100644
index 00000000000..d581232b3a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  return <Foo ref={ref.current} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-ref-value-as-props.ts:4:19
+  2 | function Component(props) {
+  3 |   const ref = useRef(null);
+> 4 |   return <Foo ref={ref.current} />;
+    |                    ^^^^^^^^^^^ Cannot access ref value during render
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.js
new file mode 100644
index 00000000000..0c8c1e65c8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.js
@@ -0,0 +1,5 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  return <Foo ref={ref.current} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.expect.md
new file mode 100644
index 00000000000..2648398e50b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+import {useHook} from 'shared-runtime';
+
+function useFoo() {
+  useHook(); // for inference to kick in
+  const cache = new Map();
+  return () => {
+    cache.set('key', 'value');
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-return-mutable-function-from-hook.ts:7:9
+   5 |   useHook(); // for inference to kick in
+   6 |   const cache = new Map();
+>  7 |   return () => {
+     |          ^^^^^^^
+>  8 |     cache.set('key', 'value');
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  9 |   };
+     | ^^^^ This function may (indirectly) reassign or modify `cache` after render
+  10 | }
+  11 |
+
+error.invalid-return-mutable-function-from-hook.ts:8:4
+   6 |   const cache = new Map();
+   7 |   return () => {
+>  8 |     cache.set('key', 'value');
+     |     ^^^^^ This modifies `cache`
+   9 |   };
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.js
new file mode 100644
index 00000000000..3df37783dc1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.js
@@ -0,0 +1,10 @@
+// @validateNoFreezingKnownMutableFunctions
+import {useHook} from 'shared-runtime';
+
+function useFoo() {
+  useHook(); // for inference to kick in
+  const cache = new Map();
+  return () => {
+    cache.set('key', 'value');
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
new file mode 100644
index 00000000000..387dff27bf0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  ref.current = props.value;
+  return ref.current;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-set-and-read-ref-during-render.ts:4:2
+  2 | function Component(props) {
+  3 |   const ref = useRef(null);
+> 4 |   ref.current = props.value;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |   return ref.current;
+  6 | }
+  7 |
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-set-and-read-ref-during-render.ts:5:9
+  3 |   const ref = useRef(null);
+  4 |   ref.current = props.value;
+> 5 |   return ref.current;
+    |          ^^^^^^^^^^^ Cannot access ref value during render
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.js
new file mode 100644
index 00000000000..ef485e9005b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.js
@@ -0,0 +1,6 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  ref.current = props.value;
+  return ref.current;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
new file mode 100644
index 00000000000..8ef0e223a86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef({inner: null});
+  ref.current.inner = props.value;
+  return ref.current.inner;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2
+  2 | function Component(props) {
+  3 |   const ref = useRef({inner: null});
+> 4 |   ref.current.inner = props.value;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |   return ref.current.inner;
+  6 | }
+  7 |
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9
+  3 |   const ref = useRef({inner: null});
+  4 |   ref.current.inner = props.value;
+> 5 |   return ref.current.inner;
+    |          ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.js
new file mode 100644
index 00000000000..dea3a0e50f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.js
@@ -0,0 +1,6 @@
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef({inner: null});
+  ref.current.inner = props.value;
+  return ref.current.inner;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md
new file mode 100644
index 00000000000..43ae7d0ec2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // Intentionally don't bind state, this repros a bug where we didn't
+  // infer the type of destructured properties after a hole in the array
+  let [, setState] = useState();
+  setState(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-setState-in-render-unbound-state.ts:5:2
+  3 |   // infer the type of destructured properties after a hole in the array
+  4 |   let [, setState] = useState();
+> 5 |   setState(1);
+    |   ^^^^^^^^ Found setState() in render
+  6 |   return props.foo;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js
new file mode 100644
index 00000000000..58e2837692a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  // Intentionally don't bind state, this repros a bug where we didn't
+  // infer the type of destructured properties after a hole in the array
+  let [, setState] = useState();
+  setState(1);
+  return props.foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.expect.md
new file mode 100644
index 00000000000..e284a9367fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+import {useCallback} from 'react';
+
+function useKeyedState({key, init}) {
+  const [prevKey, setPrevKey] = useState(key);
+  const [state, setState] = useState(init);
+
+  const fn = useCallback(() => {
+    setPrevKey(key);
+    setState(init);
+  });
+
+  useMemo(() => {
+    fn();
+  }, [key, init]);
+
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).
+
+error.invalid-setState-in-useMemo-indirect-useCallback.ts:13:4
+  11 |
+  12 |   useMemo(() => {
+> 13 |     fn();
+     |     ^^ Found setState() within useMemo()
+  14 |   }, [key, init]);
+  15 |
+  16 |   return state;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.js
new file mode 100644
index 00000000000..dbdf5f5a4da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.js
@@ -0,0 +1,17 @@
+import {useCallback} from 'react';
+
+function useKeyedState({key, init}) {
+  const [prevKey, setPrevKey] = useState(key);
+  const [state, setState] = useState(init);
+
+  const fn = useCallback(() => {
+    setPrevKey(key);
+    setState(init);
+  });
+
+  useMemo(() => {
+    fn();
+  }, [key, init]);
+
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.expect.md
new file mode 100644
index 00000000000..04d82e429f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function useKeyedState({key, init}) {
+  const [prevKey, setPrevKey] = useState(key);
+  const [state, setState] = useState(init);
+
+  useMemo(() => {
+    setPrevKey(key);
+    setState(init);
+  }, [key, init]);
+
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).
+
+error.invalid-setState-in-useMemo.ts:6:4
+  4 |
+  5 |   useMemo(() => {
+> 6 |     setPrevKey(key);
+    |     ^^^^^^^^^^ Found setState() within useMemo()
+  7 |     setState(init);
+  8 |   }, [key, init]);
+  9 |
+
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).
+
+error.invalid-setState-in-useMemo.ts:7:4
+   5 |   useMemo(() => {
+   6 |     setPrevKey(key);
+>  7 |     setState(init);
+     |     ^^^^^^^^ Found setState() within useMemo()
+   8 |   }, [key, init]);
+   9 |
+  10 |   return state;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.js
new file mode 100644
index 00000000000..ebbb6b2d14b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.js
@@ -0,0 +1,11 @@
+function useKeyedState({key, init}) {
+  const [prevKey, setPrevKey] = useState(key);
+  const [state, setState] = useState(init);
+
+  useMemo(() => {
+    setPrevKey(key);
+    setState(init);
+  }, [key, init]);
+
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.expect.md
new file mode 100644
index 00000000000..7caed105de9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender @enableUseKeyedState
+import {useState} from 'react';
+
+function Component() {
+  const [total, setTotal] = useState(0);
+  setTotal(42);
+  return total;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, use `const [state, setState] = useKeyedState(initialState, key)` to reset `state` when `key` changes.
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-setstate-unconditional-with-keyed-state.ts:6:2
+  4 | function Component() {
+  5 |   const [total, setTotal] = useState(0);
+> 6 |   setTotal(42);
+    |   ^^^^^^^^ Found setState() in render
+  7 |   return total;
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.js
new file mode 100644
index 00000000000..46393b5ef82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setstate-unconditional-with-keyed-state.js
@@ -0,0 +1,14 @@
+// @validateNoSetStateInRender @enableUseKeyedState
+import {useState} from 'react';
+
+function Component() {
+  const [total, setTotal] = useState(0);
+  setTotal(42);
+  return total;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md
new file mode 100644
index 00000000000..c4150096508
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+/* eslint-disable react-hooks/rules-of-hooks */
+function lowercasecomponent() {
+  'use forget';
+  const x = [];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return <div>{x}</div>;
+}
+/* eslint-enable react-hooks/rules-of-hooks */
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.
+
+error.invalid-sketchy-code-use-forget.ts:2:0
+  1 | // @validateExhaustiveMemoizationDependencies:false
+> 2 | /* eslint-disable react-hooks/rules-of-hooks */
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+  3 | function lowercasecomponent() {
+  4 |   'use forget';
+  5 |   const x = [];
+
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`.
+
+error.invalid-sketchy-code-use-forget.ts:6:2
+  4 |   'use forget';
+  5 |   const x = [];
+> 6 |   // eslint-disable-next-line react-hooks/rules-of-hooks
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+  7 |   return <div>{x}</div>;
+  8 | }
+  9 | /* eslint-enable react-hooks/rules-of-hooks */
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.js
new file mode 100644
index 00000000000..682c8119110
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.js
@@ -0,0 +1,9 @@
+// @validateExhaustiveMemoizationDependencies:false
+/* eslint-disable react-hooks/rules-of-hooks */
+function lowercasecomponent() {
+  'use forget';
+  const x = [];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return <div>{x}</div>;
+}
+/* eslint-enable react-hooks/rules-of-hooks */
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.expect.md
new file mode 100644
index 00000000000..1f3682bb906
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = props.cond ? useA : useB;
+  return x();
+}
+
+```
+
+
+## Error
+
+```
+Found 4 errors:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-ternary-with-hook-values.ts:2:25
+  1 | function Component(props) {
+> 2 |   const x = props.cond ? useA : useB;
+    |                          ^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 |   return x();
+  4 | }
+  5 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-ternary-with-hook-values.ts:2:32
+  1 | function Component(props) {
+> 2 |   const x = props.cond ? useA : useB;
+    |                                 ^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 |   return x();
+  4 | }
+  5 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-ternary-with-hook-values.ts:2:12
+  1 | function Component(props) {
+> 2 |   const x = props.cond ? useA : useB;
+    |             ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 |   return x();
+  4 | }
+  5 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-ternary-with-hook-values.ts:3:9
+  1 | function Component(props) {
+  2 |   const x = props.cond ? useA : useB;
+> 3 |   return x();
+    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.js
new file mode 100644
index 00000000000..3a47b73e1c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = props.cond ? useA : useB;
+  return x();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.expect.md
new file mode 100644
index 00000000000..3359db541a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import ReactCompilerTest from 'ReactCompilerTest';
+
+function Component() {
+  return ReactCompilerTest.useHookNotTypedAsHook();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Invalid type configuration for module
+
+Expected type for object property 'useHookNotTypedAsHook' from module 'ReactCompilerTest' to be a hook based on the property name.
+
+error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.ts:4:9
+  2 |
+  3 | function Component() {
+> 4 |   return ReactCompilerTest.useHookNotTypedAsHook();
+    |          ^^^^^^^^^^^^^^^^^ Invalid type configuration for module
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.js
new file mode 100644
index 00000000000..3a2f646569e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.js
@@ -0,0 +1,5 @@
+import ReactCompilerTest from 'ReactCompilerTest';
+
+function Component() {
+  return ReactCompilerTest.useHookNotTypedAsHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.expect.md
new file mode 100644
index 00000000000..136d19d122e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import {useHookNotTypedAsHook} from 'ReactCompilerTest';
+
+function Component() {
+  return useHookNotTypedAsHook();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Invalid type configuration for module
+
+Expected type for object property 'useHookNotTypedAsHook' from module 'ReactCompilerTest' to be a hook based on the property name.
+
+error.invalid-type-provider-hook-name-not-typed-as-hook.ts:4:9
+  2 |
+  3 | function Component() {
+> 4 |   return useHookNotTypedAsHook();
+    |          ^^^^^^^^^^^^^^^^^^^^^ Invalid type configuration for module
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.js
new file mode 100644
index 00000000000..d4ae58c5d95
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.js
@@ -0,0 +1,5 @@
+import {useHookNotTypedAsHook} from 'ReactCompilerTest';
+
+function Component() {
+  return useHookNotTypedAsHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hooklike-module-default-not-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hooklike-module-default-not-hook.expect.md
new file mode 100644
index 00000000000..4e9cd184747
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hooklike-module-default-not-hook.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import foo from 'useDefaultExportNotTypedAsHook';
+
+function Component() {
+  return <div>{foo()}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Invalid type configuration for module
+
+Expected type for `import ... from 'useDefaultExportNotTypedAsHook'` to be a hook based on the module name.
+
+error.invalid-type-provider-hooklike-module-default-not-hook.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   return <div>{foo()}</div>;
+    |                ^^^ Invalid type configuration for module
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hooklike-module-default-not-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hooklike-module-default-not-hook.js
new file mode 100644
index 00000000000..75d040fde07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hooklike-module-default-not-hook.js
@@ -0,0 +1,5 @@
+import foo from 'useDefaultExportNotTypedAsHook';
+
+function Component() {
+  return <div>{foo()}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.expect.md
new file mode 100644
index 00000000000..182f9a64a16
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import {notAhookTypedAsHook} from 'ReactCompilerTest';
+
+function Component() {
+  return <div>{notAhookTypedAsHook()}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Invalid type configuration for module
+
+Expected type for object property 'useHookNotTypedAsHook' from module 'ReactCompilerTest' to be a hook based on the property name.
+
+error.invalid-type-provider-nonhook-name-typed-as-hook.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   return <div>{notAhookTypedAsHook()}</div>;
+    |                ^^^^^^^^^^^^^^^^^^^ Invalid type configuration for module
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.js
new file mode 100644
index 00000000000..3763bed79c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.js
@@ -0,0 +1,5 @@
+import {notAhookTypedAsHook} from 'ReactCompilerTest';
+
+function Component() {
+  return <div>{notAhookTypedAsHook()}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md
new file mode 100644
index 00000000000..250114fdfb3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
+/**
+ * This hook returns a function that when called with an input object,
+ * will return the result of mapping that input with the supplied map
+ * function. Results are cached, so if the same input is passed again,
+ * the same output object will be returned.
+ *
+ * Note that this technically violates the rules of React and is unsafe:
+ * hooks must return immutable objects and be pure, and a function which
+ * captures and mutates a value when called is inherently not pure.
+ *
+ * However, in this case it is technically safe _if_ the mapping function
+ * is pure *and* the resulting objects are never modified. This is because
+ * the function only caches: the result of `returnedFunction(someInput)`
+ * strictly depends on `returnedFunction` and `someInput`, and cannot
+ * otherwise change over time.
+ */
+hook useMemoMap<TInput: interface {}, TOutput>(
+  map: TInput => TOutput
+): TInput => TOutput {
+  return useMemo(() => {
+    // The original issue is that `cache` was not memoized together with the returned
+    // function. This was because neither appears to ever be mutated — the function
+    // is known to mutate `cache` but the function isn't called.
+    //
+    // The fix is to detect cases like this — functions that are mutable but not called -
+    // and ensure that their mutable captures are aliased together into the same scope.
+    const cache = new WeakMap<TInput, TOutput>();
+    return input => {
+      let output = cache.get(input);
+      if (output == null) {
+        output = map(input);
+        cache.set(input, output);
+      }
+      return output;
+    };
+  }, [map]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+  19 |   map: TInput => TOutput
+  20 | ): TInput => TOutput {
+> 21 |   return useMemo(() => {
+     |          ^^^^^^^^^^^^^^^
+> 22 |     // The original issue is that `cache` was not memoized together with the returned
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 23 |     // function. This was because neither appears to ever be mutated — the function
+     …
+> 35 |       return output;
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 36 |     };
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 37 |   }, [map]);
+     | ^^^^^^^^^^^^ This function may (indirectly) reassign or modify `cache` after render
+  38 | }
+  39 |
+
+  31 |       if (output == null) {
+  32 |         output = map(input);
+> 33 |         cache.set(input, output);
+     |         ^^^^^ This modifies `cache`
+  34 |       }
+  35 |       return output;
+  36 |     };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js
new file mode 100644
index 00000000000..0fda92c726c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js
@@ -0,0 +1,38 @@
+// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
+/**
+ * This hook returns a function that when called with an input object,
+ * will return the result of mapping that input with the supplied map
+ * function. Results are cached, so if the same input is passed again,
+ * the same output object will be returned.
+ *
+ * Note that this technically violates the rules of React and is unsafe:
+ * hooks must return immutable objects and be pure, and a function which
+ * captures and mutates a value when called is inherently not pure.
+ *
+ * However, in this case it is technically safe _if_ the mapping function
+ * is pure *and* the resulting objects are never modified. This is because
+ * the function only caches: the result of `returnedFunction(someInput)`
+ * strictly depends on `returnedFunction` and `someInput`, and cannot
+ * otherwise change over time.
+ */
+hook useMemoMap<TInput: interface {}, TOutput>(
+  map: TInput => TOutput
+): TInput => TOutput {
+  return useMemo(() => {
+    // The original issue is that `cache` was not memoized together with the returned
+    // function. This was because neither appears to ever be mutated — the function
+    // is known to mutate `cache` but the function isn't called.
+    //
+    // The fix is to detect cases like this — functions that are mutable but not called -
+    // and ensure that their mutable captures are aliased together into the same scope.
+    const cache = new WeakMap<TInput, TOutput>();
+    return input => {
+      let output = cache.get(input);
+      if (output == null) {
+        output = map(input);
+        cache.set(input, output);
+      }
+      return output;
+    };
+  }, [map]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md
new file mode 100644
index 00000000000..a812cfac3ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// Note: Everything below this is sketchy @validateExhaustiveMemoizationDependencies:false
+/* eslint-disable react-hooks/rules-of-hooks */
+function lowercasecomponent() {
+  'use forget';
+  const x = [];
+  return <div>{x}</div>;
+}
+
+function Haunted() {
+  return <div>This entire file is haunted oOoOo</div>;
+}
+
+function CrimesAgainstReact() {
+  let x = React.useMemo(async () => {
+    await a;
+  }, []);
+
+  class MyAmazingInnerComponent {
+    render() {
+      return <div>Why would you do this</div>;
+    }
+  }
+
+  // Note: This shouldn't reset the eslint suppression to just this line
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return <MyAmazingInnerComponent />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.
+
+error.invalid-unclosed-eslint-suppression.ts:2:0
+  1 | // Note: Everything below this is sketchy @validateExhaustiveMemoizationDependencies:false
+> 2 | /* eslint-disable react-hooks/rules-of-hooks */
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+  3 | function lowercasecomponent() {
+  4 |   'use forget';
+  5 |   const x = [];
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.js
new file mode 100644
index 00000000000..d08f3f2f6f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.js
@@ -0,0 +1,27 @@
+// Note: Everything below this is sketchy @validateExhaustiveMemoizationDependencies:false
+/* eslint-disable react-hooks/rules-of-hooks */
+function lowercasecomponent() {
+  'use forget';
+  const x = [];
+  return <div>{x}</div>;
+}
+
+function Haunted() {
+  return <div>This entire file is haunted oOoOo</div>;
+}
+
+function CrimesAgainstReact() {
+  let x = React.useMemo(async () => {
+    await a;
+  }, []);
+
+  class MyAmazingInnerComponent {
+    render() {
+      return <div>Why would you do this</div>;
+    }
+  }
+
+  // Note: This shouldn't reset the eslint suppression to just this line
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return <MyAmazingInnerComponent />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.expect.md
new file mode 100644
index 00000000000..cb520546bb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
+function Component() {
+  const [state, setState] = useCustomState(0);
+  const aliased = setState;
+
+  setState(1);
+  aliased(2);
+
+  return state;
+}
+
+function useCustomState(init) {
+  return useState(init);
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-hook-return-in-render.ts:6:2
+  4 |   const aliased = setState;
+  5 |
+> 6 |   setState(1);
+    |   ^^^^^^^^ Found setState() in render
+  7 |   aliased(2);
+  8 |
+  9 |   return state;
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-hook-return-in-render.ts:7:2
+   5 |
+   6 |   setState(1);
+>  7 |   aliased(2);
+     |   ^^^^^^^ Found setState() in render
+   8 |
+   9 |   return state;
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.js
new file mode 100644
index 00000000000..ed9158ff096
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-hook-return-in-render.js
@@ -0,0 +1,14 @@
+// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
+function Component() {
+  const [state, setState] = useCustomState(0);
+  const aliased = setState;
+
+  setState(1);
+  aliased(2);
+
+  return state;
+}
+
+function useCustomState(init) {
+  return useState(init);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md
new file mode 100644
index 00000000000..9155951daa5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+  const aliased = setX;
+
+  setX(1);
+  aliased(2);
+
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-in-render.ts:6:2
+  4 |   const aliased = setX;
+  5 |
+> 6 |   setX(1);
+    |   ^^^^ Found setState() in render
+  7 |   aliased(2);
+  8 |
+  9 |   return x;
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-in-render.ts:7:2
+   5 |
+   6 |   setX(1);
+>  7 |   aliased(2);
+     |   ^^^^^^^ Found setState() in render
+   8 |
+   9 |   return x;
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.js
new file mode 100644
index 00000000000..7e08cbe5328
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.js
@@ -0,0 +1,10 @@
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+  const aliased = setX;
+
+  setX(1);
+  aliased(2);
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.expect.md
new file mode 100644
index 00000000000..8c46cbaf0f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
+function Component({setX}) {
+  const aliased = setX;
+
+  setX(1);
+  aliased(2);
+
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-prop-in-render.ts:5:2
+  3 |   const aliased = setX;
+  4 |
+> 5 |   setX(1);
+    |   ^^^^ Found setState() in render
+  6 |   aliased(2);
+  7 |
+  8 |   return x;
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-prop-in-render.ts:6:2
+  4 |
+  5 |   setX(1);
+> 6 |   aliased(2);
+    |   ^^^^^^^ Found setState() in render
+  7 |
+  8 |   return x;
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.js
new file mode 100644
index 00000000000..1a14c33fe38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-prop-in-render.js
@@ -0,0 +1,9 @@
+// @validateNoSetStateInRender @enableTreatSetIdentifiersAsStateSetters
+function Component({setX}) {
+  const aliased = setX;
+
+  setX(1);
+  aliased(2);
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
new file mode 100644
index 00000000000..53bf66b1ee5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Foo({a}) {
+  const ref = useRef();
+  // type information is lost here as we don't track types of fields
+  const val = {ref};
+  // without type info, we don't know that val.ref.current is a ref value so we
+  // *would* end up depending on val.ref.current
+  // however, this is an instance of accessing a ref during render and is disallowed
+  // under React's rules, so we reject this input
+  const x = {a, val: val.ref.current};
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21
+   8 |   // however, this is an instance of accessing a ref during render and is disallowed
+   9 |   // under React's rules, so we reject this input
+> 10 |   const x = {a, val: val.ref.current};
+     |                      ^^^^^^^^^^^^^^^ Cannot access ref value during render
+  11 |
+  12 |   return <VideoList videos={x} />;
+  13 | }
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-use-ref-added-to-dep-without-type-info.ts:12:28
+  10 |   const x = {a, val: val.ref.current};
+  11 |
+> 12 |   return <VideoList videos={x} />;
+     |                             ^ Cannot access ref value during render
+  13 | }
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js
new file mode 100644
index 00000000000..a560fb123da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js
@@ -0,0 +1,13 @@
+// @validateRefAccessDuringRender
+function Foo({a}) {
+  const ref = useRef();
+  // type information is lost here as we don't track types of fields
+  const val = {ref};
+  // without type info, we don't know that val.ref.current is a ref value so we
+  // *would* end up depending on val.ref.current
+  // however, this is an instance of accessing a ref during render and is disallowed
+  // under React's rules, so we reject this input
+  const x = {a, val: val.ref.current};
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.expect.md
new file mode 100644
index 00000000000..1e13064b722
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validateMemoizedEffectDependencies
+function Component(props) {
+  // Items cannot be memoized bc its mutation spans a hook call
+  const items = [props.value];
+  const [state, _setState] = useState(null);
+  mutate(items);
+
+  // Items is no longer mutable here, but it hasn't been memoized
+  useEffect(() => {
+    console.log(items);
+  }, [items]);
+
+  return [items, state];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+
+error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.ts:9:2
+   7 |
+   8 |   // Items is no longer mutable here, but it hasn't been memoized
+>  9 |   useEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^
+> 10 |     console.log(items);
+     | ^^^^^^^^^^^^^^^^^^^^^^^
+> 11 |   }, [items]);
+     | ^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+  12 |
+  13 |   return [items, state];
+  14 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.js
new file mode 100644
index 00000000000..20a0d9b606f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized-bc-range-overlaps-hook.js
@@ -0,0 +1,14 @@
+// @validateMemoizedEffectDependencies
+function Component(props) {
+  // Items cannot be memoized bc its mutation spans a hook call
+  const items = [props.value];
+  const [state, _setState] = useState(null);
+  mutate(items);
+
+  // Items is no longer mutable here, but it hasn't been memoized
+  useEffect(() => {
+    console.log(items);
+  }, [items]);
+
+  return [items, state];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized.expect.md
new file mode 100644
index 00000000000..02712424842
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateMemoizedEffectDependencies
+import {useEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+
+error.invalid-useEffect-dep-not-memoized.ts:6:2
+   4 | function Component(props) {
+   5 |   const data = {};
+>  6 |   useEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^
+>  7 |     console.log(props.value);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   }, [data]);
+     | ^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+   9 |   mutate(data);
+  10 |   return data;
+  11 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized.js
new file mode 100644
index 00000000000..fee0f630a07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useEffect-dep-not-memoized.js
@@ -0,0 +1,11 @@
+// @validateMemoizedEffectDependencies
+import {useEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useInsertionEffect-dep-not-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useInsertionEffect-dep-not-memoized.expect.md
new file mode 100644
index 00000000000..9f98a7a2273
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useInsertionEffect-dep-not-memoized.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateMemoizedEffectDependencies
+import {useInsertionEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useInsertionEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+
+error.invalid-useInsertionEffect-dep-not-memoized.ts:6:2
+   4 | function Component(props) {
+   5 |   const data = {};
+>  6 |   useInsertionEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  7 |     console.log(props.value);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   }, [data]);
+     | ^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+   9 |   mutate(data);
+  10 |   return data;
+  11 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useInsertionEffect-dep-not-memoized.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useInsertionEffect-dep-not-memoized.js
new file mode 100644
index 00000000000..7d1ed16544b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useInsertionEffect-dep-not-memoized.js
@@ -0,0 +1,11 @@
+// @validateMemoizedEffectDependencies
+import {useInsertionEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useInsertionEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useLayoutEffect-dep-not-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useLayoutEffect-dep-not-memoized.expect.md
new file mode 100644
index 00000000000..55ba0876d76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useLayoutEffect-dep-not-memoized.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateMemoizedEffectDependencies
+import {useLayoutEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useLayoutEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+
+error.invalid-useLayoutEffect-dep-not-memoized.ts:6:2
+   4 | function Component(props) {
+   5 |   const data = {};
+>  6 |   useLayoutEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^
+>  7 |     console.log(props.value);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   }, [data]);
+     | ^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+   9 |   mutate(data);
+  10 |   return data;
+  11 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useLayoutEffect-dep-not-memoized.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useLayoutEffect-dep-not-memoized.js
new file mode 100644
index 00000000000..3925334795e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useLayoutEffect-dep-not-memoized.js
@@ -0,0 +1,11 @@
+// @validateMemoizedEffectDependencies
+import {useLayoutEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useLayoutEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.expect.md
new file mode 100644
index 00000000000..7146a57869f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let x = useMemo(async () => {
+    await a;
+  }, []);
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+
+error.invalid-useMemo-async-callback.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(async () => {
+    |                   ^^^^^^^^^^^^^
+> 3 |     await a;
+    | ^^^^^^^^^^^^
+> 4 |   }, []);
+    | ^^^^ Async and generator functions are not supported
+  5 |   return x;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.js
new file mode 100644
index 00000000000..e9da86149cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.js
@@ -0,0 +1,6 @@
+function component(a, b) {
+  let x = useMemo(async () => {
+    await a;
+  }, []);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.expect.md
new file mode 100644
index 00000000000..933315073f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let x = useMemo(c => a, []);
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: useMemo() callbacks may not accept parameters
+
+useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.
+
+error.invalid-useMemo-callback-args.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(c => a, []);
+    |                   ^ Callbacks with parameters are not supported
+  3 |   return x;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.js
new file mode 100644
index 00000000000..4b9293a3c32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.js
@@ -0,0 +1,4 @@
+function component(a, b) {
+  let x = useMemo(c => a, []);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
new file mode 100644
index 00000000000..94223bb898c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function useHook({value}) {
+  const ref = useRef(null);
+  // Writing to a ref in render is against the rules:
+  ref.current = value;
+  // returning a ref is allowed, so this alone doesn't trigger an error:
+  return ref;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-write-but-dont-read-ref-in-render.ts:5:2
+  3 |   const ref = useRef(null);
+  4 |   // Writing to a ref in render is against the rules:
+> 5 |   ref.current = value;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  6 |   // returning a ref is allowed, so this alone doesn't trigger an error:
+  7 |   return ref;
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.js
new file mode 100644
index 00000000000..f9c8f0dcf7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.js
@@ -0,0 +1,8 @@
+// @validateRefAccessDuringRender
+function useHook({value}) {
+  const ref = useRef(null);
+  // Writing to a ref in render is against the rules:
+  ref.current = value;
+  // returning a ref is allowed, so this alone doesn't trigger an error:
+  return ref;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md
new file mode 100644
index 00000000000..f8d44926094
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender @compilationMode:"infer"
+function Component(props) {
+  const ref = props.ref;
+  ref.current = true;
+  return <div>{value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-write-ref-prop-in-render.ts:4:2
+  2 | function Component(props) {
+  3 |   const ref = props.ref;
+> 4 |   ref.current = true;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |   return <div>{value}</div>;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.js
new file mode 100644
index 00000000000..32997b89789
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.js
@@ -0,0 +1,6 @@
+// @validateRefAccessDuringRender @compilationMode:"infer"
+function Component(props) {
+  const ref = props.ref;
+  ref.current = true;
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.expect.md
new file mode 100644
index 00000000000..e525d9e857b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+
+function Foo() {
+  const [state, setState] = useState({foo: {bar: 3}});
+  const foo = state.foo;
+  foo.bar = 1;
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead.
+
+error.modify-state-2.ts:6:2
+  4 |   const [state, setState] = useState({foo: {bar: 3}});
+  5 |   const foo = state.foo;
+> 6 |   foo.bar = 1;
+    |   ^^^ value cannot be modified
+  7 |   return state;
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.js
new file mode 100644
index 00000000000..dea5c8979d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.js
@@ -0,0 +1,8 @@
+import {useState} from 'react';
+
+function Foo() {
+  const [state, setState] = useState({foo: {bar: 3}});
+  const foo = state.foo;
+  foo.bar = 1;
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.expect.md
new file mode 100644
index 00000000000..9dc405870db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+
+function Foo() {
+  let [state, setState] = useState({});
+  state.foo = 1;
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead.
+
+error.modify-state.ts:5:2
+  3 | function Foo() {
+  4 |   let [state, setState] = useState({});
+> 5 |   state.foo = 1;
+    |   ^^^^^ value cannot be modified
+  6 |   return state;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.js
new file mode 100644
index 00000000000..fe5f8a4f273
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.js
@@ -0,0 +1,7 @@
+import {useState} from 'react';
+
+function Foo() {
+  let [state, setState] = useState({});
+  state.foo = 1;
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.expect.md
new file mode 100644
index 00000000000..b3c1d0d243a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+import {useReducer} from 'react';
+
+function Foo() {
+  let [state, setState] = useReducer({foo: 1});
+  state.foo = 1;
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from 'useReducer()', which should not be modified directly. Use the dispatch function to update instead.
+
+error.modify-useReducer-state.ts:5:2
+  3 | function Foo() {
+  4 |   let [state, setState] = useReducer({foo: 1});
+> 5 |   state.foo = 1;
+    |   ^^^^^ value cannot be modified
+  6 |   return state;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.js
new file mode 100644
index 00000000000..c3b6f68db7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.js
@@ -0,0 +1,7 @@
+import {useReducer} from 'react';
+
+function Foo() {
+  let [state, setState] = useReducer({foo: 1});
+  state.foo = 1;
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.expect.md
new file mode 100644
index 00000000000..337b9dd30c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+let cond = true;
+function Component(props) {
+  let a;
+  let b;
+  const f = () => {
+    if (cond) {
+      a = {};
+      b = [];
+    } else {
+      a = {};
+      b = [];
+    }
+    a.property = true;
+    b.push(false);
+  };
+  return <div onClick={f} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `a` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.mutable-range-shared-inner-outer-function.ts:8:6
+   6 |   const f = () => {
+   7 |     if (cond) {
+>  8 |       a = {};
+     |       ^ Cannot reassign `a` after render completes
+   9 |       b = [];
+  10 |     } else {
+  11 |       a = {};
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.js
new file mode 100644
index 00000000000..ac7299181ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.js
@@ -0,0 +1,23 @@
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+let cond = true;
+function Component(props) {
+  let a;
+  let b;
+  const f = () => {
+    if (cond) {
+      a = {};
+      b = [];
+    } else {
+      a = {};
+      b = [];
+    }
+    a.property = true;
+    b.push(false);
+  };
+  return <div onClick={f} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.expect.md
new file mode 100644
index 00000000000..96b91ccff66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+export function ViewModeSelector(props) {
+  const renderIcon = () => <AcceptIcon />;
+  renderIcon.displayName = 'AcceptIcon';
+
+  return <Dropdown checkableIndicator={{children: renderIcon}} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+This modifies a variable that React considers immutable.
+
+error.mutate-function-property.ts:3:2
+  1 | export function ViewModeSelector(props) {
+  2 |   const renderIcon = () => <AcceptIcon />;
+> 3 |   renderIcon.displayName = 'AcceptIcon';
+    |   ^^^^^^^^^^ value cannot be modified
+  4 |
+  5 |   return <Dropdown checkableIndicator={{children: renderIcon}} />;
+  6 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.js
new file mode 100644
index 00000000000..a7d066718c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.js
@@ -0,0 +1,6 @@
+export function ViewModeSelector(props) {
+  const renderIcon = () => <AcceptIcon />;
+  renderIcon.displayName = 'AcceptIcon';
+
+  return <Dropdown checkableIndicator={{children: renderIcon}} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-global-increment-op-invalid-react.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-global-increment-op-invalid-react.expect.md
new file mode 100644
index 00000000000..5013a14300e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-global-increment-op-invalid-react.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+let renderCount = 0;
+
+function NoHooks() {
+  renderCount++;
+  return <div />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Support UpdateExpression where argument is a global
+
+error.mutate-global-increment-op-invalid-react.ts:4:2
+  2 |
+  3 | function NoHooks() {
+> 4 |   renderCount++;
+    |   ^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Support UpdateExpression where argument is a global
+  5 |   return <div />;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-global-increment-op-invalid-react.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-global-increment-op-invalid-react.js
new file mode 100644
index 00000000000..6d754345cf6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-global-increment-op-invalid-react.js
@@ -0,0 +1,6 @@
+let renderCount = 0;
+
+function NoHooks() {
+  renderCount++;
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md
new file mode 100644
index 00000000000..0a64f902f8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function useHook(a, b) {
+  b.test = 1;
+  a.test = 2;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.mutate-hook-argument.ts:2:2
+  1 | function useHook(a, b) {
+> 2 |   b.test = 1;
+    |   ^ value cannot be modified
+  3 |   a.test = 2;
+  4 | }
+  5 |
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.mutate-hook-argument.ts:3:2
+  1 | function useHook(a, b) {
+  2 |   b.test = 1;
+> 3 |   a.test = 2;
+    |   ^ value cannot be modified
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.js
new file mode 100644
index 00000000000..321e9049cdd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.js
@@ -0,0 +1,4 @@
+function useHook(a, b) {
+  b.test = 1;
+  a.test = 2;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.expect.md
new file mode 100644
index 00000000000..78530caf4a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+let wat = {};
+
+function Foo() {
+  delete wat.foo;
+  return wat;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.mutate-property-from-global.ts:4:9
+  2 |
+  3 | function Foo() {
+> 4 |   delete wat.foo;
+    |          ^^^ value cannot be modified
+  5 |   return wat;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.js
new file mode 100644
index 00000000000..54b42a607d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.js
@@ -0,0 +1,6 @@
+let wat = {};
+
+function Foo() {
+  delete wat.foo;
+  return wat;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.expect.md
new file mode 100644
index 00000000000..69f09d393c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  props.test = 1;
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.mutate-props.ts:2:2
+  1 | function Foo(props) {
+> 2 |   props.test = 1;
+    |   ^^^^^ value cannot be modified
+  3 |   return null;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.js
new file mode 100644
index 00000000000..c59b28f63a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.js
@@ -0,0 +1,4 @@
+function Foo(props) {
+  props.test = 1;
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.expect.md
new file mode 100644
index 00000000000..69ce796faed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validateNoDynamicallyCreatedComponentsOrHooks
+export function getInput(a) {
+  const Wrapper = () => {
+    const handleChange = () => {
+      a.onChange();
+    };
+
+    return <input onChange={handleChange} />;
+  };
+
+  return Wrapper;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: getInput,
+  isComponent: false,
+  params: [{onChange() {}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Components and hooks cannot be created dynamically
+
+The function `Wrapper` appears to be a React component, but it's defined inside `getInput`. Components and Hooks should always be declared at module scope.
+
+error.nested-component-in-normal-function.ts:2:16
+  1 | // @validateNoDynamicallyCreatedComponentsOrHooks
+> 2 | export function getInput(a) {
+    |                 ^^^^^^^^ this function dynamically created a component/hook
+  3 |   const Wrapper = () => {
+  4 |     const handleChange = () => {
+  5 |       a.onChange();
+
+error.nested-component-in-normal-function.ts:3:8
+  1 | // @validateNoDynamicallyCreatedComponentsOrHooks
+  2 | export function getInput(a) {
+> 3 |   const Wrapper = () => {
+    |         ^^^^^^^ the component is created here
+  4 |     const handleChange = () => {
+  5 |       a.onChange();
+  6 |     };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.js
new file mode 100644
index 00000000000..36be05e3ee8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.js
@@ -0,0 +1,18 @@
+// @validateNoDynamicallyCreatedComponentsOrHooks
+export function getInput(a) {
+  const Wrapper = () => {
+    const handleChange = () => {
+      a.onChange();
+    };
+
+    return <input onChange={handleChange} />;
+  };
+
+  return Wrapper;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: getInput,
+  isComponent: false,
+  params: [{onChange() {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.expect.md
new file mode 100644
index 00000000000..652fc2feb00
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateNoDynamicallyCreatedComponentsOrHooks
+import {useState} from 'react';
+
+function createCustomHook(config) {
+  function useConfiguredState() {
+    const [state, setState] = useState(0);
+
+    const increment = () => {
+      setState(state + config.step);
+    };
+
+    return [state, increment];
+  }
+
+  return useConfiguredState;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createCustomHook,
+  isComponent: false,
+  params: [{step: 1}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Components and hooks cannot be created dynamically
+
+The function `useConfiguredState` appears to be a React hook, but it's defined inside `createCustomHook`. Components and Hooks should always be declared at module scope.
+
+error.nested-hook-in-normal-function.ts:4:9
+  2 | import {useState} from 'react';
+  3 |
+> 4 | function createCustomHook(config) {
+    |          ^^^^^^^^^^^^^^^^ this function dynamically created a component/hook
+  5 |   function useConfiguredState() {
+  6 |     const [state, setState] = useState(0);
+  7 |
+
+error.nested-hook-in-normal-function.ts:5:11
+  3 |
+  4 | function createCustomHook(config) {
+> 5 |   function useConfiguredState() {
+    |            ^^^^^^^^^^^^^^^^^^ the component is created here
+  6 |     const [state, setState] = useState(0);
+  7 |
+  8 |     const increment = () => {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.js
new file mode 100644
index 00000000000..306e78f7b1c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.js
@@ -0,0 +1,22 @@
+// @validateNoDynamicallyCreatedComponentsOrHooks
+import {useState} from 'react';
+
+function createCustomHook(config) {
+  function useConfiguredState() {
+    const [state, setState] = useState(0);
+
+    const increment = () => {
+      setState(state + config.step);
+    };
+
+    return [state, increment];
+  }
+
+  return useConfiguredState;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createCustomHook,
+  isComponent: false,
+  params: [{step: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.expect.md
new file mode 100644
index 00000000000..c0c369e11d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.expect.md
@@ -0,0 +1,19 @@
+
+## Input
+
+```javascript
+// @disableMemoizationForDebugging @enableChangeDetectionForDebugging
+function Component(props) {}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Invalid environment config: the 'disableMemoizationForDebugging' and 'enableChangeDetectionForDebugging' options cannot be used together
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.js
new file mode 100644
index 00000000000..ce93cd29f1a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.js
@@ -0,0 +1,2 @@
+// @disableMemoizationForDebugging @enableChangeDetectionForDebugging
+function Component(props) {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.expect.md
new file mode 100644
index 00000000000..c7b1ac5f45b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+let x = {a: 42};
+
+function Component(props) {
+  foo(() => {
+    x.a = 10;
+    x.a = 20;
+  });
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.not-useEffect-external-mutate.ts:5:4
+  3 | function Component(props) {
+  4 |   foo(() => {
+> 5 |     x.a = 10;
+    |     ^ value cannot be modified
+  6 |     x.a = 20;
+  7 |   });
+  8 | }
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.not-useEffect-external-mutate.ts:6:4
+  4 |   foo(() => {
+  5 |     x.a = 10;
+> 6 |     x.a = 20;
+    |     ^ value cannot be modified
+  7 |   });
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.js
new file mode 100644
index 00000000000..3b44c4c2477
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.js
@@ -0,0 +1,8 @@
+let x = {a: 42};
+
+function Component(props) {
+  foo(() => {
+    x.a = 10;
+    x.a = 20;
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.expect.md
new file mode 100644
index 00000000000..c0998cb6cc1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = Foo.useFoo;
+  return x();
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.propertyload-hook.ts:2:12
+  1 | function Component() {
+> 2 |   const x = Foo.useFoo;
+    |             ^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 |   return x();
+  4 | }
+  5 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.propertyload-hook.ts:3:9
+  1 | function Component() {
+  2 |   const x = Foo.useFoo;
+> 3 |   return x();
+    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.js
new file mode 100644
index 00000000000..a0425375497
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.js
@@ -0,0 +1,4 @@
+function Component() {
+  const x = Foo.useFoo;
+  return x();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.expect.md
new file mode 100644
index 00000000000..db088bbd0b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+let b = 1;
+
+export default function MyApp() {
+  const fn = () => {
+    b = 2;
+  };
+  return foo(fn);
+}
+
+function foo(fn) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `b` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassign-global-fn-arg.ts:5:4
+  3 | export default function MyApp() {
+  4 |   const fn = () => {
+> 5 |     b = 2;
+    |     ^ `b` cannot be reassigned
+  6 |   };
+  7 |   return foo(fn);
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.js
new file mode 100644
index 00000000000..2ef634b470d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.js
@@ -0,0 +1,15 @@
+let b = 1;
+
+export default function MyApp() {
+  const fn = () => {
+    b = 2;
+  };
+  return foo(fn);
+}
+
+function foo(fn) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.expect.md
new file mode 100644
index 00000000000..a223997bb55
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function Component() {
+  const foo = () => {
+    // Cannot assign to globals
+    someUnknownGlobal = true;
+    moduleLocal = true;
+  };
+  foo();
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global-indirect.ts:4:4
+  2 |   const foo = () => {
+  3 |     // Cannot assign to globals
+> 4 |     someUnknownGlobal = true;
+    |     ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
+  5 |     moduleLocal = true;
+  6 |   };
+  7 |   foo();
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global-indirect.ts:5:4
+  3 |     // Cannot assign to globals
+  4 |     someUnknownGlobal = true;
+> 5 |     moduleLocal = true;
+    |     ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
+  6 |   };
+  7 |   foo();
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.js
new file mode 100644
index 00000000000..708fe643d57
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.js
@@ -0,0 +1,8 @@
+function Component() {
+  const foo = () => {
+    // Cannot assign to globals
+    someUnknownGlobal = true;
+    moduleLocal = true;
+  };
+  foo();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md
new file mode 100644
index 00000000000..0a374fd39ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component() {
+  // Cannot assign to globals
+  someUnknownGlobal = true;
+  moduleLocal = true;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global.ts:3:2
+  1 | function Component() {
+  2 |   // Cannot assign to globals
+> 3 |   someUnknownGlobal = true;
+    |   ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
+  4 |   moduleLocal = true;
+  5 | }
+  6 |
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global.ts:4:2
+  2 |   // Cannot assign to globals
+  3 |   someUnknownGlobal = true;
+> 4 |   moduleLocal = true;
+    |   ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.js
new file mode 100644
index 00000000000..d0509a3d52a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.js
@@ -0,0 +1,5 @@
+function Component() {
+  // Cannot assign to globals
+  someUnknownGlobal = true;
+  moduleLocal = true;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md
new file mode 100644
index 00000000000..17625298cd7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+const DEFAULT_VALUE = 1;
+
+component C() {
+  const r = useRef(DEFAULT_VALUE);
+  if (r.current == DEFAULT_VALUE) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   6 | component C() {
+   7 |   const r = useRef(DEFAULT_VALUE);
+>  8 |   if (r.current == DEFAULT_VALUE) {
+     |       ^^^^^^^^^ Cannot access ref value during render
+   9 |     r.current = 1;
+  10 |   }
+  11 | }
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   7 |   const r = useRef(DEFAULT_VALUE);
+   8 |   if (r.current == DEFAULT_VALUE) {
+>  9 |     r.current = 1;
+     |     ^^^^^^^^^ Cannot update ref during render
+  10 |   }
+  11 | }
+  12 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.js
new file mode 100644
index 00000000000..f7e9a9dccb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.js
@@ -0,0 +1,16 @@
+//@flow
+import {useRef} from 'react';
+
+const DEFAULT_VALUE = 1;
+
+component C() {
+  const r = useRef(DEFAULT_VALUE);
+  if (r.current == DEFAULT_VALUE) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md
new file mode 100644
index 00000000000..3a6d0b0f7a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const r = useRef(null);
+   6 |   if (r.current == null) {
+>  7 |     f(r);
+     |       ^ Passing a ref to a function may read its value during render
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.js
new file mode 100644
index 00000000000..4e5a53cd3f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.js
@@ -0,0 +1,14 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md
new file mode 100644
index 00000000000..d9f3ac3aad8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r.current);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const r = useRef(null);
+   6 |   if (r.current == null) {
+>  7 |     f(r.current);
+     |       ^^^^^^^^^ Passing a ref to a function may read its value during render
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.js
new file mode 100644
index 00000000000..50288fafc4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.js
@@ -0,0 +1,14 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r.current);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md
new file mode 100644
index 00000000000..7c6e6d5d58a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 42;
+    r.current = 42;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   6 |   if (r.current == null) {
+   7 |     r.current = 42;
+>  8 |     r.current = 42;
+     |     ^^^^^^^^^ Cannot update ref during render
+   9 |   }
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.js
new file mode 100644
index 00000000000..23e49520455
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.js
@@ -0,0 +1,15 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 42;
+    r.current = 42;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md
new file mode 100644
index 00000000000..aaa86f91415
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  const guard = r.current == null;
+  if (guard) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   const guard = r.current == null;
+    |                 ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+  7 |   if (guard) {
+  8 |     r.current = 1;
+  9 |   }
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const r = useRef(null);
+   6 |   const guard = r.current == null;
+>  7 |   if (guard) {
+     |       ^^^^^ Cannot access ref value during render
+   8 |     r.current = 1;
+   9 |   }
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.js
new file mode 100644
index 00000000000..94216b3bacb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.js
@@ -0,0 +1,15 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  const guard = r.current == null;
+  if (guard) {
+    r.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.expect.md
new file mode 100644
index 00000000000..e1bda188909
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  const r2 = useRef(null);
+  if (r.current == null) {
+    r2.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   6 |   const r2 = useRef(null);
+   7 |   if (r.current == null) {
+>  8 |     r2.current = 1;
+     |     ^^^^^^^^^^ Cannot update ref during render
+   9 |   }
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.js
new file mode 100644
index 00000000000..58abd12ac80
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.js
@@ -0,0 +1,15 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  const r2 = useRef(null);
+  if (r.current == null) {
+    r2.current = 1;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md
new file mode 100644
index 00000000000..e30d6103a20
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+  f(r.current);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   7 |     r.current = 1;
+   8 |   }
+>  9 |   f(r.current);
+     |     ^^^^^^^^^ Passing a ref to a function may read its value during render
+  10 | }
+  11 |
+  12 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.js
new file mode 100644
index 00000000000..a8e3b124bfe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.js
@@ -0,0 +1,15 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+  f(r.current);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.expect.md
new file mode 100644
index 00000000000..f8d08dda477
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+  r.current = 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   7 |     r.current = 1;
+   8 |   }
+>  9 |   r.current = 1;
+     |   ^^^^^^^^^ Cannot update ref during render
+  10 | }
+  11 |
+  12 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.js
new file mode 100644
index 00000000000..ba476e6e422
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.js
@@ -0,0 +1,15 @@
+//@flow
+import {useRef} from 'react';
+
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+  r.current = 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.expect.md
new file mode 100644
index 00000000000..2558d10d19c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback, useRef} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const Ref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    Ref.current?.click();
+  }, []);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `Ref.current`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.ref-like-name-not-Ref.ts:11:30
+   9 |   const Ref = useCustomRef();
+  10 |
+> 11 |   const onClick = useCallback(() => {
+     |                               ^^^^^^^
+> 12 |     Ref.current?.click();
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^
+> 13 |   }, []);
+     | ^^^^ Could not preserve existing manual memoization
+  14 |
+  15 |   return <button onClick={onClick} />;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.js
new file mode 100644
index 00000000000..60ab46e4eb4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-Ref.js
@@ -0,0 +1,22 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback, useRef} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const Ref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    Ref.current?.click();
+  }, []);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.expect.md
new file mode 100644
index 00000000000..2c2f725ec84
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback, useRef} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const notaref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    notaref.current?.click();
+  }, []);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `notaref.current`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.ref-like-name-not-a-ref.ts:11:30
+   9 |   const notaref = useCustomRef();
+  10 |
+> 11 |   const onClick = useCallback(() => {
+     |                               ^^^^^^^
+> 12 |     notaref.current?.click();
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 13 |   }, []);
+     | ^^^^ Could not preserve existing manual memoization
+  14 |
+  15 |   return <button onClick={onClick} />;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.js
new file mode 100644
index 00000000000..f0e0b584e9f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-like-name-not-a-ref.js
@@ -0,0 +1,22 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback, useRef} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const notaref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    notaref.current?.click();
+  }, []);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md
new file mode 100644
index 00000000000..94e4b0fc46f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  return ref?.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.ref-optional.ts:5:9
+  3 | function Component(props) {
+  4 |   const ref = useRef();
+> 5 |   return ref?.current;
+    |          ^^^^^^^^^^^^ Cannot access ref value during render
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.js
new file mode 100644
index 00000000000..00c67037b86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.js
@@ -0,0 +1,11 @@
+import {useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  return ref?.current;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md
new file mode 100644
index 00000000000..2a3657eda34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates a custom component wrapper
+function CustomForm({onSubmit, children}: any) {
+  return <form onSubmit={onSubmit}>{children}</form>;
+}
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit<T>(callback: (data: T) => void) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+function Component() {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onSubmit = (data: any) => {
+    // This should error: passing function with ref access to custom component
+    // event handler, even though it would be safe on a native <form>
+    if (ref.current !== null) {
+      console.log(ref.current.value);
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <CustomForm onSubmit={handleSubmit(onSubmit)}>
+        <button type="submit">Submit</button>
+      </CustomForm>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.ref-value-in-custom-component-event-handler-wrapper.ts:31:41
+  29 |     <>
+  30 |       <input ref={ref} />
+> 31 |       <CustomForm onSubmit={handleSubmit(onSubmit)}>
+     |                                          ^^^^^^^^ Passing a ref to a function may read its value during render
+  32 |         <button type="submit">Submit</button>
+  33 |       </CustomForm>
+  34 |     </>
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx
new file mode 100644
index 00000000000..b90a1217165
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx
@@ -0,0 +1,41 @@
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates a custom component wrapper
+function CustomForm({onSubmit, children}: any) {
+  return <form onSubmit={onSubmit}>{children}</form>;
+}
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit<T>(callback: (data: T) => void) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+function Component() {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onSubmit = (data: any) => {
+    // This should error: passing function with ref access to custom component
+    // event handler, even though it would be safe on a native <form>
+    if (ref.current !== null) {
+      console.log(ref.current.value);
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <CustomForm onSubmit={handleSubmit(onSubmit)}>
+        <button type="submit">Submit</button>
+      </CustomForm>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md
new file mode 100644
index 00000000000..718e2c81419
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates a handler wrapper
+function handleClick(value: any) {
+  return () => {
+    console.log(value);
+  };
+}
+
+function Component() {
+  const ref = useRef(null);
+
+  // This should still error: passing ref.current directly to a wrapper
+  // The ref value is accessed during render, not in the event handler
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={handleClick(ref.current)}>Click</button>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.ref-value-in-event-handler-wrapper.ts:19:35
+  17 |     <>
+  18 |       <input ref={ref} />
+> 19 |       <button onClick={handleClick(ref.current)}>Click</button>
+     |                                    ^^^^^^^^^^^ Cannot access ref value during render
+  20 |     </>
+  21 |   );
+  22 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx
new file mode 100644
index 00000000000..58313e560ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx
@@ -0,0 +1,27 @@
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates a handler wrapper
+function handleClick(value: any) {
+  return () => {
+    console.log(value);
+  };
+}
+
+function Component() {
+  const ref = useRef(null);
+
+  // This should still error: passing ref.current directly to a wrapper
+  // The ref value is accessed during render, not in the event handler
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={handleClick(ref.current)}>Click</button>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md
new file mode 100644
index 00000000000..8d603c629b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * When we validate preserving manual memoization we incorrectly reject this, because
+ * the original memoization had `object` depending on `input` but our scope depends on
+ * `value`.
+ *
+ * This fixture adds a later potential mutation, which extends the scope and should
+ * fail validation. This confirms that even though we allow the dependency to diverge,
+ * we still check that the output value is memoized.
+ */
+function useInputValue(input) {
+  const object = React.useMemo(() => {
+    const {value} = transform(input);
+    return {value};
+  }, [input]);
+  mutate(object);
+  return object;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.ts:19:17
+  17 |  */
+  18 | function useInputValue(input) {
+> 19 |   const object = React.useMemo(() => {
+     |                  ^^^^^^^^^^^^^^^^^^^^^
+> 20 |     const {value} = transform(input);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 21 |     return {value};
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 22 |   }, [input]);
+     | ^^^^^^^^^^^^^^ Could not preserve existing memoization
+  23 |   mutate(object);
+  24 |   return object;
+  25 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js
new file mode 100644
index 00000000000..086cda353e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js
@@ -0,0 +1,25 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * When we validate preserving manual memoization we incorrectly reject this, because
+ * the original memoization had `object` depending on `input` but our scope depends on
+ * `value`.
+ *
+ * This fixture adds a later potential mutation, which extends the scope and should
+ * fail validation. This confirms that even though we allow the dependency to diverge,
+ * we still check that the output value is memoized.
+ */
+function useInputValue(input) {
+  const object = React.useMemo(() => {
+    const {value} = transform(input);
+    return {value};
+  }, [input]);
+  mutate(object);
+  return object;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md
new file mode 100644
index 00000000000..25b11eb38c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+
+import {identity, Stringify, useHook} from 'shared-runtime';
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * When we validate preserving manual memoization we incorrectly reject this, because
+ * the original memoization had `object` depending on `input` but our scope depends on
+ * `value`.
+ */
+function useInputValue(input) {
+  // Conflate the `identity(input, x)` call with something outside the useMemo,
+  // to try and break memoization of `value`. This gets correctly flagged since
+  // the dependency is being mutated
+  let x = {};
+  useHook();
+  const object = React.useMemo(() => {
+    const {value} = identity(input, x);
+    return {value};
+  }, [input, x]);
+  return object;
+}
+
+function Component() {
+  return <Stringify value={useInputValue({value: 42}).value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.ts:25:13
+  23 |     const {value} = identity(input, x);
+  24 |     return {value};
+> 25 |   }, [input, x]);
+     |              ^ This dependency may be modified later
+  26 |   return object;
+  27 | }
+  28 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js
new file mode 100644
index 00000000000..7af080b072f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js
@@ -0,0 +1,36 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+
+import {identity, Stringify, useHook} from 'shared-runtime';
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * When we validate preserving manual memoization we incorrectly reject this, because
+ * the original memoization had `object` depending on `input` but our scope depends on
+ * `value`.
+ */
+function useInputValue(input) {
+  // Conflate the `identity(input, x)` call with something outside the useMemo,
+  // to try and break memoization of `value`. This gets correctly flagged since
+  // the dependency is being mutated
+  let x = {};
+  useHook();
+  const object = React.useMemo(() => {
+    const {value} = identity(input, x);
+    return {value};
+  }, [input, x]);
+  return object;
+}
+
+function Component() {
+  return <Stringify value={useInputValue({value: 42}).value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md
new file mode 100644
index 00000000000..ea2842d0b38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+/* eslint-disable react-hooks/rules-of-hooks */
+function lowercasecomponent() {
+  const x = [];
+  return <div>{x}</div>;
+}
+/* eslint-enable react-hooks/rules-of-hooks */
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: lowercasecomponent,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
+
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.
+
+error.sketchy-code-rules-of-hooks.ts:2:0
+  1 | // @validateExhaustiveMemoizationDependencies:false
+> 2 | /* eslint-disable react-hooks/rules-of-hooks */
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
+  3 | function lowercasecomponent() {
+  4 |   const x = [];
+  5 |   return <div>{x}</div>;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.js
new file mode 100644
index 00000000000..c8dd66f67f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.js
@@ -0,0 +1,13 @@
+// @validateExhaustiveMemoizationDependencies:false
+/* eslint-disable react-hooks/rules-of-hooks */
+function lowercasecomponent() {
+  const x = [];
+  return <div>{x}</div>;
+}
+/* eslint-enable react-hooks/rules-of-hooks */
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: lowercasecomponent,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.expect.md
new file mode 100644
index 00000000000..7ffe3f84cf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+let wat = {};
+
+function Foo() {
+  wat.test = 1;
+  return wat;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.store-property-in-global.ts:4:2
+  2 |
+  3 | function Foo() {
+> 4 |   wat.test = 1;
+    |   ^^^ value cannot be modified
+  5 |   return wat;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.js
new file mode 100644
index 00000000000..a210cd702b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.js
@@ -0,0 +1,6 @@
+let wat = {};
+
+function Foo() {
+  wat.test = 1;
+  return wat;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.expect.md
new file mode 100644
index 00000000000..ec187f6bc23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+
+function useHook(parentRef) {
+  // Some components accept a union of "callback" refs and ref objects, which
+  // we can't currently represent
+  const elementRef = useRef(null);
+  const handler = instance => {
+    elementRef.current = instance;
+    if (parentRef != null) {
+      if (typeof parentRef === 'function') {
+        // This call infers the type of `parentRef` as a function...
+        parentRef(instance);
+      } else {
+        // So this assignment fails since we don't know its a ref
+        parentRef.current = instance;
+      }
+    }
+  };
+  return handler;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.todo-allow-assigning-to-inferred-ref-prop-in-callback.ts:15:8
+  13 |       } else {
+  14 |         // So this assignment fails since we don't know its a ref
+> 15 |         parentRef.current = instance;
+     |         ^^^^^^^^^ `parentRef` cannot be modified
+  16 |       }
+  17 |     }
+  18 |   };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.js
new file mode 100644
index 00000000000..de2e1d0c968
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.js
@@ -0,0 +1,20 @@
+// @validateRefAccessDuringRender
+
+function useHook(parentRef) {
+  // Some components accept a union of "callback" refs and ref objects, which
+  // we can't currently represent
+  const elementRef = useRef(null);
+  const handler = instance => {
+    elementRef.current = instance;
+    if (parentRef != null) {
+      if (typeof parentRef === 'function') {
+        // This call infers the type of `parentRef` as a function...
+        parentRef(instance);
+      } else {
+        // So this assignment fails since we don't know its a ref
+        parentRef.current = instance;
+      }
+    }
+  };
+  return handler;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-await-loops.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-await-loops.expect.md
new file mode 100644
index 00000000000..a69896d6ae9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-await-loops.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+async function Component({items}) {
+  const x = [];
+  for await (const item of items) {
+    x.push(item);
+  }
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerStatement) Handle for-await loops
+
+error.todo-for-await-loops.ts:3:2
+  1 | async function Component({items}) {
+  2 |   const x = [];
+> 3 |   for await (const item of items) {
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 4 |     x.push(item);
+    | ^^^^^^^^^^^^^^^^^
+> 5 |   }
+    | ^^^^ (BuildHIR::lowerStatement) Handle for-await loops
+  6 |   return x;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-await-loops.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-await-loops.js
new file mode 100644
index 00000000000..d3ee7071ba2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-await-loops.js
@@ -0,0 +1,7 @@
+async function Component({items}) {
+  const x = [];
+  for await (const item of items) {
+    x.push(item);
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.expect.md
new file mode 100644
index 00000000000..e5bcf704d1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const data = useHook();
+  const items = [];
+  // NOTE: `item` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  for (let key in props.data) {
+    key = key ?? null; // no-op reassignment to force a context variable
+    items.push(
+      <div key={key} onClick={() => data.set(key)}>
+        {key}
+      </div>
+    );
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{data: {a: 'a', b: true, c: 'hello'}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support non-trivial for..in inits
+
+error.todo-for-in-loop-with-context-variable-iterator.ts:8:2
+   6 |   // NOTE: `item` is a context variable because it's reassigned and also referenced
+   7 |   // within a closure, the `onClick` handler of each item
+>  8 |   for (let key in props.data) {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  9 |     key = key ?? null; // no-op reassignment to force a context variable
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 10 |     items.push(
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 11 |       <div key={key} onClick={() => data.set(key)}>
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 12 |         {key}
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 13 |       </div>
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 14 |     );
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 15 |   }
+     | ^^^^ Support non-trivial for..in inits
+  16 |   return <div>{items}</div>;
+  17 | }
+  18 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.js
new file mode 100644
index 00000000000..4ab73875896
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.js
@@ -0,0 +1,22 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const data = useHook();
+  const items = [];
+  // NOTE: `item` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  for (let key in props.data) {
+    key = key ?? null; // no-op reassignment to force a context variable
+    items.push(
+      <div key={key} onClick={() => data.set(key)}>
+        {key}
+      </div>
+    );
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{data: {a: 'a', b: true, c: 'hello'}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.expect.md
new file mode 100644
index 00000000000..e56f70b29eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component() {
+  const data = useIdentity(
+    new Map([
+      [0, 'value0'],
+      [1, 'value1'],
+    ])
+  );
+  const items = [];
+  // NOTE: `i` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  // TODO: for loops create a unique environment on each iteration, which means
+  // that if the iteration variable is only updated in the updater, the variable
+  // is effectively const within the body and the "update" acts more like
+  // a re-initialization than a reassignment.
+  // Until we model this "new environment" semantic, we allow this case to error
+  for (let i = MIN; i <= MAX; i += INCREMENT) {
+    items.push(
+      <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />
+    );
+  }
+  return <>{items}</>;
+}
+
+const MIN = 0;
+const MAX = 3;
+const INCREMENT = 1;
+
+export const FIXTURE_ENTRYPOINT = {
+  params: [],
+  fn: Component,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.todo-for-loop-with-context-variable-iterator.ts:18:30
+  16 |   // a re-initialization than a reassignment.
+  17 |   // Until we model this "new environment" semantic, we allow this case to error
+> 18 |   for (let i = MIN; i <= MAX; i += INCREMENT) {
+     |                               ^ `i` cannot be modified
+  19 |     items.push(
+  20 |       <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />
+  21 |     );
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.js
new file mode 100644
index 00000000000..5942071d6c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.js
@@ -0,0 +1,33 @@
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component() {
+  const data = useIdentity(
+    new Map([
+      [0, 'value0'],
+      [1, 'value1'],
+    ])
+  );
+  const items = [];
+  // NOTE: `i` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  // TODO: for loops create a unique environment on each iteration, which means
+  // that if the iteration variable is only updated in the updater, the variable
+  // is effectively const within the body and the "update" acts more like
+  // a re-initialization than a reassignment.
+  // Until we model this "new environment" semantic, we allow this case to error
+  for (let i = MIN; i <= MAX; i += INCREMENT) {
+    items.push(
+      <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />
+    );
+  }
+  return <>{items}</>;
+}
+
+const MIN = 0;
+const MAX = 3;
+const INCREMENT = 1;
+
+export const FIXTURE_ENTRYPOINT = {
+  params: [],
+  fn: Component,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.expect.md
new file mode 100644
index 00000000000..800822b6743
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const data = useHook();
+  const items = [];
+  // NOTE: `item` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  for (let item of props.data) {
+    item = item ?? {}; // reassignment to force a context variable
+    items.push(
+      <div key={item.id} onClick={() => data.set(item)}>
+        {item.id}
+      </div>
+    );
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{data: [{id: '1'}, {id: '2'}]}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support non-trivial for..of inits
+
+error.todo-for-of-loop-with-context-variable-iterator.ts:8:2
+   6 |   // NOTE: `item` is a context variable because it's reassigned and also referenced
+   7 |   // within a closure, the `onClick` handler of each item
+>  8 |   for (let item of props.data) {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  9 |     item = item ?? {}; // reassignment to force a context variable
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 10 |     items.push(
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 11 |       <div key={item.id} onClick={() => data.set(item)}>
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 12 |         {item.id}
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 13 |       </div>
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 14 |     );
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 15 |   }
+     | ^^^^ Support non-trivial for..of inits
+  16 |   return <div>{items}</div>;
+  17 | }
+  18 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.js
new file mode 100644
index 00000000000..64f08fde894
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.js
@@ -0,0 +1,22 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const data = useHook();
+  const items = [];
+  // NOTE: `item` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  for (let item of props.data) {
+    item = item ?? {}; // reassignment to force a context variable
+    items.push(
+      <div key={item.id} onClick={() => data.set(item)}>
+        {item.id}
+      </div>
+    );
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{data: [{id: '1'}, {id: '2'}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md
new file mode 100644
index 00000000000..a88d43b3528
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function Component() {
+  let callback = () => {
+    onClick = () => {};
+  };
+  let onClick;
+
+  return <div onClick={callback} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `onClick` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.todo-function-expression-references-later-variable-declaration.ts:3:4
+  1 | function Component() {
+  2 |   let callback = () => {
+> 3 |     onClick = () => {};
+    |     ^^^^^^^ Cannot reassign `onClick` after render completes
+  4 |   };
+  5 |   let onClick;
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.js
new file mode 100644
index 00000000000..5c023d68124
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.js
@@ -0,0 +1,8 @@
+function Component() {
+  let callback = () => {
+    onClick = () => {};
+  };
+  let onClick;
+
+  return <div onClick={callback} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-functiondecl-hoisting.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-functiondecl-hoisting.expect.md
new file mode 100644
index 00000000000..1d90392ce30
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-functiondecl-hoisting.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Fixture currently fails with
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>{"result":{"value":2},"fn":{"kind":"Function","result":{"value":2}},"shouldInvokeFns":true}</div>
+ *   Forget:
+ *   (kind: exception) bar is not a function
+ */
+function Foo({value}) {
+  const result = bar();
+  function bar() {
+    return {value};
+  }
+  return <Stringify result={result} fn={bar} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: [PruneHoistedContexts] Rewrite hoisted function references
+
+error.todo-functiondecl-hoisting.ts:12:17
+  10 |  */
+  11 | function Foo({value}) {
+> 12 |   const result = bar();
+     |                  ^^^ [PruneHoistedContexts] Rewrite hoisted function references
+  13 |   function bar() {
+  14 |     return {value};
+  15 |   }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-functiondecl-hoisting.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-functiondecl-hoisting.tsx
new file mode 100644
index 00000000000..c4541012829
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-functiondecl-hoisting.tsx
@@ -0,0 +1,22 @@
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Fixture currently fails with
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>{"result":{"value":2},"fn":{"kind":"Function","result":{"value":2}},"shouldInvokeFns":true}</div>
+ *   Forget:
+ *   (kind: exception) bar is not a function
+ */
+function Foo({value}) {
+  const result = bar();
+  function bar() {
+    return {value};
+  }
+  return <Stringify result={result} fn={bar} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-handle-update-context-identifiers.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-handle-update-context-identifiers.expect.md
new file mode 100644
index 00000000000..eb7e37ba163
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-handle-update-context-identifiers.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function useFoo() {
+  let counter = 2;
+  const fn = () => {
+    return counter++;
+  };
+
+  return fn();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Handle UpdateExpression to variables captured within lambdas.
+
+error.todo-handle-update-context-identifiers.ts:4:11
+  2 |   let counter = 2;
+  3 |   const fn = () => {
+> 4 |     return counter++;
+    |            ^^^^^^^^^ (BuildHIR::lowerExpression) Handle UpdateExpression to variables captured within lambdas.
+  5 |   };
+  6 |
+  7 |   return fn();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-handle-update-context-identifiers.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-handle-update-context-identifiers.js
new file mode 100644
index 00000000000..dc7a5999df9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-handle-update-context-identifiers.js
@@ -0,0 +1,13 @@
+function useFoo() {
+  let counter = 2;
+  const fn = () => {
+    return counter++;
+  };
+
+  return fn();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoist-function-decls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoist-function-decls.expect.md
new file mode 100644
index 00000000000..0909abd0d49
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoist-function-decls.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component() {
+  return get2();
+  function get2() {
+    return 2;
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support functions with unreachable code that may contain hoisted declarations
+
+error.todo-hoist-function-decls.ts:3:2
+  1 | function Component() {
+  2 |   return get2();
+> 3 |   function get2() {
+    |   ^^^^^^^^^^^^^^^^^
+> 4 |     return 2;
+    | ^^^^^^^^^^^^^
+> 5 |   }
+    | ^^^^ Support functions with unreachable code that may contain hoisted declarations
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoist-function-decls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoist-function-decls.js
new file mode 100644
index 00000000000..385c716fbbd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoist-function-decls.js
@@ -0,0 +1,6 @@
+function Component() {
+  return get2();
+  function get2() {
+    return 2;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.expect.md
new file mode 100644
index 00000000000..c9152496f2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function Component() {
+  return <Foo />;
+
+  // This is unreachable from a control-flow perspective, but it gets hoisted
+  function Foo() {}
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support functions with unreachable code that may contain hoisted declarations
+
+error.todo-hoisted-function-in-unreachable-code.ts:6:2
+  4 |
+  5 |   // This is unreachable from a control-flow perspective, but it gets hoisted
+> 6 |   function Foo() {}
+    |   ^^^^^^^^^^^^^^^^^ Support functions with unreachable code that may contain hoisted declarations
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.js
new file mode 100644
index 00000000000..d67232371d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.js
@@ -0,0 +1,7 @@
+// @compilationMode:"infer"
+function Component() {
+  return <Foo />;
+
+  // This is unreachable from a control-flow perspective, but it gets hoisted
+  function Foo() {}
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisting-simple-var-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisting-simple-var-declaration.expect.md
new file mode 100644
index 00000000000..363a21db183
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisting-simple-var-declaration.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  function addOne(b) {
+    // a is undefined (only the declaration is hoisted, not the init) but shouldn't throw
+    return a + b;
+  }
+  const result = addOne(2);
+  var a = 1;
+
+  return result; // OK: returns NaN. The code is semantically wrong but technically correct
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+
+error.todo-hoisting-simple-var-declaration.ts:7:2
+   5 |   }
+   6 |   const result = addOne(2);
+>  7 |   var a = 1;
+     |   ^^^^^^^^^^ (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+   8 |
+   9 |   return result; // OK: returns NaN. The code is semantically wrong but technically correct
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisting-simple-var-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisting-simple-var-declaration.js
new file mode 100644
index 00000000000..042f57d918a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisting-simple-var-declaration.js
@@ -0,0 +1,16 @@
+function hoisting() {
+  function addOne(b) {
+    // a is undefined (only the declaration is hoisted, not the init) but shouldn't throw
+    return a + b;
+  }
+  const result = addOne(2);
+  var a = 1;
+
+  return result; // OK: returns NaN. The code is semantically wrong but technically correct
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hook-call-spreads-mutable-iterator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hook-call-spreads-mutable-iterator.expect.md
new file mode 100644
index 00000000000..32ba43bede2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hook-call-spreads-mutable-iterator.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+import {useIdentity} from 'shared-runtime';
+
+function Component() {
+  const items = makeArray(0, 1, 2, null, 4, false, 6);
+  return useIdentity(...items.values());
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support spread syntax for hook arguments
+
+error.todo-hook-call-spreads-mutable-iterator.ts:5:24
+  3 | function Component() {
+  4 |   const items = makeArray(0, 1, 2, null, 4, false, 6);
+> 5 |   return useIdentity(...items.values());
+    |                         ^^^^^^^^^^^^^^ Support spread syntax for hook arguments
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hook-call-spreads-mutable-iterator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hook-call-spreads-mutable-iterator.js
new file mode 100644
index 00000000000..982fd83dc8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hook-call-spreads-mutable-iterator.js
@@ -0,0 +1,12 @@
+import {useIdentity} from 'shared-runtime';
+
+function Component() {
+  const items = makeArray(0, 1, 2, null, 4, false, 6);
+  return useIdentity(...items.values());
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
new file mode 100644
index 00000000000..b5c079f5423
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+
+error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.ts:6:2
+   4 | function Component(props) {
+   5 |   let el;
+>  6 |   try {
+     |   ^^^^^
+>  7 |     let value;
+     | ^^^^^^^^^^^^^^
+>  8 |     try {
+     | ^^^^^^^^^^^^^^
+>  9 |       value = identity(props.foo);
+     | ^^^^^^^^^^^^^^
+> 10 |     } catch {
+     | ^^^^^^^^^^^^^^
+> 11 |       el = <div value={value} />;
+     | ^^^^^^^^^^^^^^
+> 12 |     }
+     | ^^^^^^^^^^^^^^
+> 13 |   } finally {
+     | ^^^^^^^^^^^^^^
+> 14 |     console.log(el);
+     | ^^^^^^^^^^^^^^
+> 15 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+  16 |   return el;
+  17 | }
+  18 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
new file mode 100644
index 00000000000..fbc0d292ce6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
@@ -0,0 +1,17 @@
+// @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
new file mode 100644
index 00000000000..79ae59e64c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+
+error.todo-invalid-jsx-in-try-with-finally.ts:4:2
+   2 | function Component(props) {
+   3 |   let el;
+>  4 |   try {
+     |   ^^^^^
+>  5 |     el = <div />;
+     | ^^^^^^^^^^^^^^^^^
+>  6 |   } finally {
+     | ^^^^^^^^^^^^^^^^^
+>  7 |     console.log(el);
+     | ^^^^^^^^^^^^^^^^^
+>  8 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+   9 |   return el;
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
new file mode 100644
index 00000000000..da168277214
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
@@ -0,0 +1,10 @@
+// @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
new file mode 100644
index 00000000000..32db5b2e7ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
@@ -0,0 +1,227 @@
+
+## Input
+
+```javascript
+function foo([a, b], {c, d, e = 'e'}, f = 'f', ...args) {
+  let i = 0;
+  var x = [];
+
+  class Bar {
+    #secretSauce = 42;
+    constructor() {
+      console.log(this.#secretSauce);
+    }
+  }
+
+  const g = {b() {}, c: () => {}};
+  const {z, aa = 'aa'} = useCustom();
+
+  <Button haha={1}></Button>;
+  <Button>{/** empty */}</Button>;
+
+  const j = function bar([quz, qux], ...args) {};
+
+  for (; i < 3; i += 1) {
+    x.push(i);
+  }
+  for (; i < 3; ) {
+    break;
+  }
+  for (;;) {
+    break;
+  }
+
+  graphql`
+    ${g}
+  `;
+
+  graphql`\\t\n`;
+
+  for (c of [1, 2]) {
+  }
+  for ([v] of [[1], [2]]) {
+  }
+  for ({v} of [{v: 1}, {v: 2}]) {
+  }
+
+  for (let x in {a: 1}) {
+  }
+
+  let updateIdentifier = 0;
+  --updateIdentifier;
+  ++updateIdentifier;
+  updateIdentifier.y++;
+  updateIdentifier.y--;
+
+  switch (i) {
+    case 1 + 1: {
+    }
+    case foo(): {
+    }
+    case x.y: {
+    }
+    default: {
+    }
+  }
+
+  function component(a) {
+    // Add support for function declarations once we support `var` hoisting.
+    function t() {}
+    t();
+  }
+}
+
+let moduleLocal = false;
+
+```
+
+
+## Error
+
+```
+Found 10 errors:
+
+Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+
+error.todo-kitchensink.ts:3:2
+  1 | function foo([a, b], {c, d, e = 'e'}, f = 'f', ...args) {
+  2 |   let i = 0;
+> 3 |   var x = [];
+    |   ^^^^^^^^^^^ (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+  4 |
+  5 |   class Bar {
+  6 |     #secretSauce = 42;
+
+Compilation Skipped: Inline `class` declarations are not supported
+
+Move class declarations outside of components/hooks.
+
+error.todo-kitchensink.ts:5:2
+   3 |   var x = [];
+   4 |
+>  5 |   class Bar {
+     |   ^^^^^^^^^^^
+>  6 |     #secretSauce = 42;
+     | ^^^^^^^^^^^^^^^^^^^^^^
+>  7 |     constructor() {
+     | ^^^^^^^^^^^^^^^^^^^^^^
+>  8 |       console.log(this.#secretSauce);
+     | ^^^^^^^^^^^^^^^^^^^^^^
+>  9 |     }
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 10 |   }
+     | ^^^^ Inline `class` declarations are not supported
+  11 |
+  12 |   const g = {b() {}, c: () => {}};
+  13 |   const {z, aa = 'aa'} = useCustom();
+
+Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+
+error.todo-kitchensink.ts:20:2
+  18 |   const j = function bar([quz, qux], ...args) {};
+  19 |
+> 20 |   for (; i < 3; i += 1) {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^
+> 21 |     x.push(i);
+     | ^^^^^^^^^^^^^^
+> 22 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+  23 |   for (; i < 3; ) {
+  24 |     break;
+  25 |   }
+
+Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+
+error.todo-kitchensink.ts:23:2
+  21 |     x.push(i);
+  22 |   }
+> 23 |   for (; i < 3; ) {
+     |   ^^^^^^^^^^^^^^^^^
+> 24 |     break;
+     | ^^^^^^^^^^
+> 25 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+  26 |   for (;;) {
+  27 |     break;
+  28 |   }
+
+Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+
+error.todo-kitchensink.ts:26:2
+  24 |     break;
+  25 |   }
+> 26 |   for (;;) {
+     |   ^^^^^^^^^^
+> 27 |     break;
+     | ^^^^^^^^^^
+> 28 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+  29 |
+  30 |   graphql`
+  31 |     ${g}
+
+Todo: (BuildHIR::lowerStatement) Handle empty test in ForStatement
+
+error.todo-kitchensink.ts:26:2
+  24 |     break;
+  25 |   }
+> 26 |   for (;;) {
+     |   ^^^^^^^^^^
+> 27 |     break;
+     | ^^^^^^^^^^
+> 28 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle empty test in ForStatement
+  29 |
+  30 |   graphql`
+  31 |     ${g}
+
+Todo: (BuildHIR::lowerExpression) Handle tagged template with interpolations
+
+error.todo-kitchensink.ts:30:2
+  28 |   }
+  29 |
+> 30 |   graphql`
+     |   ^^^^^^^^
+> 31 |     ${g}
+     | ^^^^^^^^
+> 32 |   `;
+     | ^^^^ (BuildHIR::lowerExpression) Handle tagged template with interpolations
+  33 |
+  34 |   graphql`\\t\n`;
+  35 |
+
+Todo: (BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value
+
+error.todo-kitchensink.ts:34:2
+  32 |   `;
+  33 |
+> 34 |   graphql`\\t\n`;
+     |   ^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value
+  35 |
+  36 |   for (c of [1, 2]) {
+  37 |   }
+
+Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `MemberExpression` cannot be safely reordered
+
+error.todo-kitchensink.ts:57:9
+  55 |     case foo(): {
+  56 |     }
+> 57 |     case x.y: {
+     |          ^^^ (BuildHIR::node.lowerReorderableExpression) Expression type `MemberExpression` cannot be safely reordered
+  58 |     }
+  59 |     default: {
+  60 |     }
+
+Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `BinaryExpression` cannot be safely reordered
+
+error.todo-kitchensink.ts:53:9
+  51 |
+  52 |   switch (i) {
+> 53 |     case 1 + 1: {
+     |          ^^^^^ (BuildHIR::node.lowerReorderableExpression) Expression type `BinaryExpression` cannot be safely reordered
+  54 |     }
+  55 |     case foo(): {
+  56 |     }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
new file mode 100644
index 00000000000..26c51d82975
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.js
@@ -0,0 +1,70 @@
+function foo([a, b], {c, d, e = 'e'}, f = 'f', ...args) {
+  let i = 0;
+  var x = [];
+
+  class Bar {
+    #secretSauce = 42;
+    constructor() {
+      console.log(this.#secretSauce);
+    }
+  }
+
+  const g = {b() {}, c: () => {}};
+  const {z, aa = 'aa'} = useCustom();
+
+  <Button haha={1}></Button>;
+  <Button>{/** empty */}</Button>;
+
+  const j = function bar([quz, qux], ...args) {};
+
+  for (; i < 3; i += 1) {
+    x.push(i);
+  }
+  for (; i < 3; ) {
+    break;
+  }
+  for (;;) {
+    break;
+  }
+
+  graphql`
+    ${g}
+  `;
+
+  graphql`\\t\n`;
+
+  for (c of [1, 2]) {
+  }
+  for ([v] of [[1], [2]]) {
+  }
+  for ({v} of [{v: 1}, {v: 2}]) {
+  }
+
+  for (let x in {a: 1}) {
+  }
+
+  let updateIdentifier = 0;
+  --updateIdentifier;
+  ++updateIdentifier;
+  updateIdentifier.y++;
+  updateIdentifier.y--;
+
+  switch (i) {
+    case 1 + 1: {
+    }
+    case foo(): {
+    }
+    case x.y: {
+    }
+    default: {
+    }
+  }
+
+  function component(a) {
+    // Add support for function declarations once we support `var` hoisting.
+    function t() {}
+    t();
+  }
+}
+
+let moduleLocal = false;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-logical-expression-within-try-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-logical-expression-within-try-catch.expect.md
new file mode 100644
index 00000000000..1aa5c4b5a76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-logical-expression-within-try-catch.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let result;
+  try {
+    result = props.cond && props.foo;
+  } catch (e) {
+    console.log(e);
+  }
+  return result;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+
+error.todo-logical-expression-within-try-catch.ts:4:13
+  2 |   let result;
+  3 |   try {
+> 4 |     result = props.cond && props.foo;
+    |              ^^^^^ Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+  5 |   } catch (e) {
+  6 |     console.log(e);
+  7 |   }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-logical-expression-within-try-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-logical-expression-within-try-catch.js
new file mode 100644
index 00000000000..4ccfb99d0c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-logical-expression-within-try-catch.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  let result;
+  try {
+    result = props.cond && props.foo;
+  } catch (e) {
+    console.log(e);
+  }
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md
new file mode 100644
index 00000000000..54af8a11478
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md
@@ -0,0 +1,394 @@
+
+## Input
+
+```javascript
+// @validateSourceLocations
+import {useEffect, useCallback} from 'react';
+
+function Component({prop1, prop2}) {
+  const x = prop1 + prop2;
+  const y = x * 2;
+  const arr = [x, y];
+  const obj = {x, y};
+  let destA, destB;
+  if (y > 5) {
+    [destA, destB] = arr;
+  }
+
+  const [a, b] = arr;
+  const {x: c, y: d} = obj;
+  let sound;
+
+  if (y > 10) {
+    sound = 'woof';
+  } else {
+    sound = 'meow';
+  }
+
+  useEffect(() => {
+    if (a > 10) {
+      console.log(a);
+      console.log(sound);
+      console.log(destA, destB);
+    }
+  }, [a, sound, destA, destB]);
+
+  const foo = useCallback(() => {
+    return a + b;
+  }, [a, b]);
+
+  function bar() {
+    return (c + d) * 2;
+  }
+
+  console.log('Hello, world!');
+
+  return [y, foo, bar];
+}
+
+```
+
+
+## Error
+
+```
+Found 25 errors:
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:4:9
+  2 | import {useEffect, useCallback} from 'react';
+  3 |
+> 4 | function Component({prop1, prop2}) {
+    |          ^^^^^^^^^
+  5 |   const x = prop1 + prop2;
+  6 |   const y = x * 2;
+  7 |   const arr = [x, y];
+
+Todo: Important source location missing in generated code
+
+Source location for VariableDeclaration is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:9:2
+   7 |   const arr = [x, y];
+   8 |   const obj = {x, y};
+>  9 |   let destA, destB;
+     |   ^^^^^^^^^^^^^^^^^
+  10 |   if (y > 5) {
+  11 |     [destA, destB] = arr;
+  12 |   }
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:11:4
+   9 |   let destA, destB;
+  10 |   if (y > 5) {
+> 11 |     [destA, destB] = arr;
+     |     ^^^^^^^^^^^^^^^^^^^^^
+  12 |   }
+  13 |
+  14 |   const [a, b] = arr;
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:15:9
+  13 |
+  14 |   const [a, b] = arr;
+> 15 |   const {x: c, y: d} = obj;
+     |          ^
+  16 |   let sound;
+  17 |
+  18 |   if (y > 10) {
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:15:15
+  13 |
+  14 |   const [a, b] = arr;
+> 15 |   const {x: c, y: d} = obj;
+     |                ^
+  16 |   let sound;
+  17 |
+  18 |   if (y > 10) {
+
+Todo: Important source location missing in generated code
+
+Source location for VariableDeclaration is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:16:2
+  14 |   const [a, b] = arr;
+  15 |   const {x: c, y: d} = obj;
+> 16 |   let sound;
+     |   ^^^^^^^^^^
+  17 |
+  18 |   if (y > 10) {
+  19 |     sound = 'woof';
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:19:4
+  17 |
+  18 |   if (y > 10) {
+> 19 |     sound = 'woof';
+     |     ^^^^^^^^^^^^^^^
+  20 |   } else {
+  21 |     sound = 'meow';
+  22 |   }
+
+Todo: Important source location has wrong node type in generated code
+
+Source location for Identifier exists in the generated output but with wrong node type(s): ExpressionStatement. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:19:4
+  17 |
+  18 |   if (y > 10) {
+> 19 |     sound = 'woof';
+     |     ^^^^^
+  20 |   } else {
+  21 |     sound = 'meow';
+  22 |   }
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:21:4
+  19 |     sound = 'woof';
+  20 |   } else {
+> 21 |     sound = 'meow';
+     |     ^^^^^^^^^^^^^^^
+  22 |   }
+  23 |
+  24 |   useEffect(() => {
+
+Todo: Important source location has wrong node type in generated code
+
+Source location for Identifier exists in the generated output but with wrong node type(s): ExpressionStatement. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:21:4
+  19 |     sound = 'woof';
+  20 |   } else {
+> 21 |     sound = 'meow';
+     |     ^^^^^
+  22 |   }
+  23 |
+  24 |   useEffect(() => {
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:24:2
+  22 |   }
+  23 |
+> 24 |   useEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^
+> 25 |     if (a > 10) {
+     | ^^^^^^^^^^^^^^^^^
+> 26 |       console.log(a);
+     | ^^^^^^^^^^^^^^^^^
+> 27 |       console.log(sound);
+     | ^^^^^^^^^^^^^^^^^
+> 28 |       console.log(destA, destB);
+     | ^^^^^^^^^^^^^^^^^
+> 29 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 30 |   }, [a, sound, destA, destB]);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  31 |
+  32 |   const foo = useCallback(() => {
+  33 |     return a + b;
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:26:6
+  24 |   useEffect(() => {
+  25 |     if (a > 10) {
+> 26 |       console.log(a);
+     |       ^^^^^^^^^^^^^^^
+  27 |       console.log(sound);
+  28 |       console.log(destA, destB);
+  29 |     }
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:26:14
+  24 |   useEffect(() => {
+  25 |     if (a > 10) {
+> 26 |       console.log(a);
+     |               ^^^
+  27 |       console.log(sound);
+  28 |       console.log(destA, destB);
+  29 |     }
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:27:6
+  25 |     if (a > 10) {
+  26 |       console.log(a);
+> 27 |       console.log(sound);
+     |       ^^^^^^^^^^^^^^^^^^^
+  28 |       console.log(destA, destB);
+  29 |     }
+  30 |   }, [a, sound, destA, destB]);
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:27:14
+  25 |     if (a > 10) {
+  26 |       console.log(a);
+> 27 |       console.log(sound);
+     |               ^^^
+  28 |       console.log(destA, destB);
+  29 |     }
+  30 |   }, [a, sound, destA, destB]);
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:28:6
+  26 |       console.log(a);
+  27 |       console.log(sound);
+> 28 |       console.log(destA, destB);
+     |       ^^^^^^^^^^^^^^^^^^^^^^^^^^
+  29 |     }
+  30 |   }, [a, sound, destA, destB]);
+  31 |
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:28:14
+  26 |       console.log(a);
+  27 |       console.log(sound);
+> 28 |       console.log(destA, destB);
+     |               ^^^
+  29 |     }
+  30 |   }, [a, sound, destA, destB]);
+  31 |
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:32:14
+  30 |   }, [a, sound, destA, destB]);
+  31 |
+> 32 |   const foo = useCallback(() => {
+     |               ^^^^^^^^^^^
+  33 |     return a + b;
+  34 |   }, [a, b]);
+  35 |
+
+Todo: Important source location missing in generated code
+
+Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:33:4
+  31 |
+  32 |   const foo = useCallback(() => {
+> 33 |     return a + b;
+     |     ^^^^^^^^^^^^^
+  34 |   }, [a, b]);
+  35 |
+  36 |   function bar() {
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:34:6
+  32 |   const foo = useCallback(() => {
+  33 |     return a + b;
+> 34 |   }, [a, b]);
+     |       ^
+  35 |
+  36 |   function bar() {
+  37 |     return (c + d) * 2;
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:34:9
+  32 |   const foo = useCallback(() => {
+  33 |     return a + b;
+> 34 |   }, [a, b]);
+     |          ^
+  35 |
+  36 |   function bar() {
+  37 |     return (c + d) * 2;
+
+Todo: Important source location missing in generated code
+
+Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:37:4
+  35 |
+  36 |   function bar() {
+> 37 |     return (c + d) * 2;
+     |     ^^^^^^^^^^^^^^^^^^^
+  38 |   }
+  39 |
+  40 |   console.log('Hello, world!');
+
+Todo: Important source location missing in generated code
+
+Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:40:2
+  38 |   }
+  39 |
+> 40 |   console.log('Hello, world!');
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  41 |
+  42 |   return [y, foo, bar];
+  43 | }
+
+Todo: Important source location missing in generated code
+
+Source location for Identifier is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:40:10
+  38 |   }
+  39 |
+> 40 |   console.log('Hello, world!');
+     |           ^^^
+  41 |
+  42 |   return [y, foo, bar];
+  43 | }
+
+Todo: Important source location missing in generated code
+
+Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
+
+error.todo-missing-source-locations.ts:42:2
+  40 |   console.log('Hello, world!');
+  41 |
+> 42 |   return [y, foo, bar];
+     |   ^^^^^^^^^^^^^^^^^^^^^
+  43 | }
+  44 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js
new file mode 100644
index 00000000000..70d376d81c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js
@@ -0,0 +1,43 @@
+// @validateSourceLocations
+import {useEffect, useCallback} from 'react';
+
+function Component({prop1, prop2}) {
+  const x = prop1 + prop2;
+  const y = x * 2;
+  const arr = [x, y];
+  const obj = {x, y};
+  let destA, destB;
+  if (y > 5) {
+    [destA, destB] = arr;
+  }
+
+  const [a, b] = arr;
+  const {x: c, y: d} = obj;
+  let sound;
+
+  if (y > 10) {
+    sound = 'woof';
+  } else {
+    sound = 'meow';
+  }
+
+  useEffect(() => {
+    if (a > 10) {
+      console.log(a);
+      console.log(sound);
+      console.log(destA, destB);
+    }
+  }, [a, sound, destA, destB]);
+
+  const foo = useCallback(() => {
+    return a + b;
+  }, [a, b]);
+
+  function bar() {
+    return (c + d) * 2;
+  }
+
+  console.log('Hello, world!');
+
+  return [y, foo, bar];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.expect.md
new file mode 100644
index 00000000000..e6968dcf13f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+const other = [0, 1];
+function Component({}) {
+  const items = makeArray(0, 1, 2, null, 4, false, 6);
+  const max = Math.max(2, items.push(5), ...other);
+  return max;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: [Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression
+
+error.todo-nested-method-calls-lower-property-load-into-temporary.ts:6:14
+  4 | function Component({}) {
+  5 |   const items = makeArray(0, 1, 2, null, 4, false, 6);
+> 6 |   const max = Math.max(2, items.push(5), ...other);
+    |               ^^^^^^^^ Got: 'Identifier'
+  7 |   return max;
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.js
new file mode 100644
index 00000000000..b2883c33038
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.js
@@ -0,0 +1,13 @@
+import {makeArray} from 'shared-runtime';
+
+const other = [0, 1];
+function Component({}) {
+  const items = makeArray(0, 1, 2, null, 4, false, 6);
+  const max = Math.max(2, items.push(5), ...other);
+  return max;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.expect.md
new file mode 100644
index 00000000000..31dd7c0991f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  const nt = new.target;
+  return <Stringify value={nt} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Handle MetaProperty expressions other than import.meta
+
+error.todo-new-target-meta-property.ts:4:13
+  2 |
+  3 | function foo() {
+> 4 |   const nt = new.target;
+    |              ^^^^^^^^^^ (BuildHIR::lowerExpression) Handle MetaProperty expressions other than import.meta
+  5 |   return <Stringify value={nt} />;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.js
new file mode 100644
index 00000000000..4c8fb87151d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.js
@@ -0,0 +1,6 @@
+import {Stringify} from 'shared-runtime';
+
+function foo() {
+  const nt = new.target;
+  return <Stringify value={nt} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.expect.md
new file mode 100644
index 00000000000..98d29e908c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component({value}) {
+  const object = {
+    get value() {
+      return value;
+    },
+  };
+  return <div>{object.value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{value: 0}],
+  sequentialRenders: [{value: 1}, {value: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Handle get functions in ObjectExpression
+
+error.todo-object-expression-get-syntax.ts:3:4
+  1 | function Component({value}) {
+  2 |   const object = {
+> 3 |     get value() {
+    |     ^^^^^^^^^^^^^
+> 4 |       return value;
+    | ^^^^^^^^^^^^^^^^^^^
+> 5 |     },
+    | ^^^^^^ (BuildHIR::lowerExpression) Handle get functions in ObjectExpression
+  6 |   };
+  7 |   return <div>{object.value}</div>;
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.js
new file mode 100644
index 00000000000..54cfde97f45
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.js
@@ -0,0 +1,14 @@
+function Component({value}) {
+  const object = {
+    get value() {
+      return value;
+    },
+  };
+  return <div>{object.value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{value: 0}],
+  sequentialRenders: [{value: 1}, {value: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.expect.md
new file mode 100644
index 00000000000..94f0dfbaab1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let value;
+  const object = {
+    set value(v) {
+      value = v;
+    },
+  };
+  object.value = props.value;
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{value: 0}],
+  sequentialRenders: [{value: 1}, {value: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Handle set functions in ObjectExpression
+
+error.todo-object-expression-set-syntax.ts:4:4
+  2 |   let value;
+  3 |   const object = {
+> 4 |     set value(v) {
+    |     ^^^^^^^^^^^^^^
+> 5 |       value = v;
+    | ^^^^^^^^^^^^^^^^
+> 6 |     },
+    | ^^^^^^ (BuildHIR::lowerExpression) Handle set functions in ObjectExpression
+  7 |   };
+  8 |   object.value = props.value;
+  9 |   return <div>{value}</div>;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.js
new file mode 100644
index 00000000000..8b6f8214b65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  let value;
+  const object = {
+    set value(v) {
+      value = v;
+    },
+  };
+  object.value = props.value;
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{value: 0}],
+  sequentialRenders: [{value: 1}, {value: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md
new file mode 100644
index 00000000000..38bb5800a82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+import {useNoAlias} from 'shared-runtime';
+
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ?? {};
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Unexpected terminal kind `optional` for logical test block
+
+error.todo-optional-call-chain-in-logical-expr.ts:5:30
+  3 | function useFoo(props: {value: {x: string; y: string} | null}) {
+  4 |   const value = props.value;
+> 5 |   return useNoAlias(value?.x, value?.y) ?? {};
+    |                               ^^^^^^^^ Unexpected terminal kind `optional` for logical test block
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPONT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.ts
new file mode 100644
index 00000000000..b96f6aefad5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.ts
@@ -0,0 +1,11 @@
+import {useNoAlias} from 'shared-runtime';
+
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ?? {};
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.expect.md
new file mode 100644
index 00000000000..6551bb8d40f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return createArray(value?.x, value?.y)?.join(', ');
+}
+
+function createArray<T>(...args: Array<T>): Array<T> {
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Unexpected terminal kind `optional` for optional fallthrough block
+
+error.todo-optional-call-chain-in-optional.ts:3:21
+  1 | function useFoo(props: {value: {x: string; y: string} | null}) {
+  2 |   const value = props.value;
+> 3 |   return createArray(value?.x, value?.y)?.join(', ');
+    |                      ^^^^^^^^ Unexpected terminal kind `optional` for optional fallthrough block
+  4 | }
+  5 |
+  6 | function createArray<T>(...args: Array<T>): Array<T> {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.ts
new file mode 100644
index 00000000000..7ee50e03802
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.ts
@@ -0,0 +1,13 @@
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return createArray(value?.x, value?.y)?.join(', ');
+}
+
+function createArray<T>(...args: Array<T>): Array<T> {
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md
new file mode 100644
index 00000000000..897b29ce6a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+import {useNoAlias} from 'shared-runtime';
+
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ? {} : null;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Unexpected terminal kind `optional` for ternary test block
+
+error.todo-optional-call-chain-in-ternary.ts:5:30
+  3 | function useFoo(props: {value: {x: string; y: string} | null}) {
+  4 |   const value = props.value;
+> 5 |   return useNoAlias(value?.x, value?.y) ? {} : null;
+    |                               ^^^^^^^^ Unexpected terminal kind `optional` for ternary test block
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPONT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.ts
new file mode 100644
index 00000000000..ac5302da00c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.ts
@@ -0,0 +1,11 @@
+import {useNoAlias} from 'shared-runtime';
+
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ? {} : null;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md
new file mode 100644
index 00000000000..45e3d365a8d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        // This is a bug in our dependency inference: we stop capturing dependencies
+        // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
+        // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
+        // full property chain, exactly as-is with optionals/non-optionals, as a
+        // dependency
+        return identity(x.a.b?.c.d?.e);
+      },
+    });
+  }, [x.a.b?.c.d?.e]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <Inner x={x} result={result} />;
+}
+
+function Inner({x, result}) {
+  'use no memo';
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {y: {z: 42}}}],
+  sequentialRenders: [
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+  ],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `x.a.b?.c`, but the source dependencies were [x.a.b?.c.d?.e]. Inferred less specific property than source.
+
+error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25
+   5 |
+   6 | function Component({x}) {
+>  7 |   const object = useMemo(() => {
+     |                          ^^^^^^^
+>  8 |     return identity({
+     | ^^^^^^^^^^^^^^^^^^^^^
+>  9 |       callback: () => {
+     …
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 17 |     });
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 18 |   }, [x.a.b?.c.d?.e]);
+     | ^^^^ Could not preserve existing manual memoization
+  19 |   const result = useMemo(() => {
+  20 |     return [object.callback()];
+  21 |   }, [object]);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js
new file mode 100644
index 00000000000..12f8ebf3ce4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js
@@ -0,0 +1,41 @@
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        // This is a bug in our dependency inference: we stop capturing dependencies
+        // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
+        // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
+        // full property chain, exactly as-is with optionals/non-optionals, as a
+        // dependency
+        return identity(x.a.b?.c.d?.e);
+      },
+    });
+  }, [x.a.b?.c.d?.e]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <Inner x={x} result={result} />;
+}
+
+function Inner({x, result}) {
+  'use no memo';
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {y: {z: 42}}}],
+  sequentialRenders: [
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.expect.md
new file mode 100644
index 00000000000..4b8ee0e4ed9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component({foo}) {
+  let bar = foo.bar;
+  return (
+    <Stringify
+      handler={() => {
+        foo = true;
+      }}
+    />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support destructuring of context variables
+
+error.todo-reassign-const.ts:3:20
+  1 | import {Stringify} from 'shared-runtime';
+  2 |
+> 3 | function Component({foo}) {
+    |                     ^^^ Support destructuring of context variables
+  4 |   let bar = foo.bar;
+  5 |   return (
+  6 |     <Stringify
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.js
new file mode 100644
index 00000000000..1061d7d419b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.js
@@ -0,0 +1,12 @@
+import {Stringify} from 'shared-runtime';
+
+function Component({foo}) {
+  let bar = foo.bar;
+  return (
+    <Stringify
+      handler={() => {
+        foo = true;
+      }}
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md
new file mode 100644
index 00000000000..6998caf4049
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Foo() {
+  try {
+    // NOTE: this fixture previously failed during LeaveSSA;
+    // double-check this code when supporting value blocks in try/catch
+    for (let i = 0; i < 2; i++) {}
+  } catch {}
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+
+error.todo-repro-declaration-for-all-identifiers.ts:5:20
+  3 |     // NOTE: this fixture previously failed during LeaveSSA;
+  4 |     // double-check this code when supporting value blocks in try/catch
+> 5 |     for (let i = 0; i < 2; i++) {}
+    |                     ^ Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+  6 |   } catch {}
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.js
new file mode 100644
index 00000000000..a633a175374
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.js
@@ -0,0 +1,7 @@
+function Foo() {
+  try {
+    // NOTE: this fixture previously failed during LeaveSSA;
+    // double-check this code when supporting value blocks in try/catch
+    for (let i = 0; i < 2; i++) {}
+  } catch {}
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md
new file mode 100644
index 00000000000..fc00a96a9f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {logValue, useFragment, useHook, typedLog} from 'shared-runtime';
+
+component Component() {
+  const data = useFragment();
+
+  const getIsEnabled = () => {
+    if (data != null) {
+      return true;
+    } else {
+      return {};
+    }
+  };
+
+  // We infer that getIsEnabled returns a mutable value, such that
+  // isEnabled is mutable
+  const isEnabled = useMemo(() => getIsEnabled(), [getIsEnabled]);
+
+  // We then infer getLoggingData as capturing that mutable value,
+  // so any calls to this function are then inferred as extending
+  // the mutable range of isEnabled
+  const getLoggingData = () => {
+    return {
+      isEnabled,
+    };
+  };
+
+  // The call here is then inferred as an indirect mutation of isEnabled
+  useHook(getLoggingData());
+
+  return <div onClick={() => typedLog(getLoggingData())} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+  16 |   // We infer that getIsEnabled returns a mutable value, such that
+  17 |   // isEnabled is mutable
+> 18 |   const isEnabled = useMemo(() => getIsEnabled(), [getIsEnabled]);
+     |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing memoization
+  19 |
+  20 |   // We then infer getLoggingData as capturing that mutable value,
+  21 |   // so any calls to this function are then inferred as extending
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js
new file mode 100644
index 00000000000..f3d08397770
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js
@@ -0,0 +1,33 @@
+// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {logValue, useFragment, useHook, typedLog} from 'shared-runtime';
+
+component Component() {
+  const data = useFragment();
+
+  const getIsEnabled = () => {
+    if (data != null) {
+      return true;
+    } else {
+      return {};
+    }
+  };
+
+  // We infer that getIsEnabled returns a mutable value, such that
+  // isEnabled is mutable
+  const isEnabled = useMemo(() => getIsEnabled(), [getIsEnabled]);
+
+  // We then infer getLoggingData as capturing that mutable value,
+  // so any calls to this function are then inferred as extending
+  // the mutable range of isEnabled
+  const getLoggingData = () => {
+    return {
+      isEnabled,
+    };
+  };
+
+  // The call here is then inferred as an indirect mutation of isEnabled
+  useHook(getLoggingData());
+
+  return <div onClick={() => typedLog(getLoggingData())} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md
new file mode 100644
index 00000000000..618e1fb2883
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md
@@ -0,0 +1,120 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useFragment} from 'react-relay';
+import LogEvent from 'LogEvent';
+import {useCallback, useMemo} from 'react';
+
+component Component(id) {
+  const items = useFragment();
+
+  const [index, setIndex] = useState(0);
+
+  const logData = useMemo(() => {
+    const item = items[index];
+    return {
+      key: item.key,
+    };
+  }, [index, items]);
+
+  const setCurrentIndex = useCallback(
+    (index: number) => {
+      const object = {
+        tracking: logData.key,
+      };
+      // We infer that this may mutate `object`, which in turn aliases
+      // data from `logData`, such that `logData` may be mutated.
+      LogEvent.log(() => object);
+      setIndex(index);
+    },
+    [index, logData, items]
+  );
+
+  if (prevId !== id) {
+    setCurrentIndex(0);
+  }
+
+  return (
+    <Foo
+      index={index}
+      items={items}
+      current={mediaList[index]}
+      setCurrentIndex={setCurrentIndex}
+    />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+   9 |   const [index, setIndex] = useState(0);
+  10 |
+> 11 |   const logData = useMemo(() => {
+     |                   ^^^^^^^^^^^^^^^
+> 12 |     const item = items[index];
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 13 |     return {
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 14 |       key: item.key,
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 15 |     };
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 16 |   }, [index, items]);
+     | ^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing memoization
+  17 |
+  18 |   const setCurrentIndex = useCallback(
+  19 |     (index: number) => {
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+  26 |       setIndex(index);
+  27 |     },
+> 28 |     [index, logData, items]
+     |             ^^^^^^^ This dependency may be modified later
+  29 |   );
+  30 |
+  31 |   if (prevId !== id) {
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+  17 |
+  18 |   const setCurrentIndex = useCallback(
+> 19 |     (index: number) => {
+     |     ^^^^^^^^^^^^^^^^^^^^
+> 20 |       const object = {
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 21 |         tracking: logData.key,
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 22 |       };
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 23 |       // We infer that this may mutate `object`, which in turn aliases
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 24 |       // data from `logData`, such that `logData` may be mutated.
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 25 |       LogEvent.log(() => object);
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 26 |       setIndex(index);
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 27 |     },
+     | ^^^^^^ Could not preserve existing memoization
+  28 |     [index, logData, items]
+  29 |   );
+  30 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js
new file mode 100644
index 00000000000..a59fda33df0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js
@@ -0,0 +1,43 @@
+// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useFragment} from 'react-relay';
+import LogEvent from 'LogEvent';
+import {useCallback, useMemo} from 'react';
+
+component Component(id) {
+  const items = useFragment();
+
+  const [index, setIndex] = useState(0);
+
+  const logData = useMemo(() => {
+    const item = items[index];
+    return {
+      key: item.key,
+    };
+  }, [index, items]);
+
+  const setCurrentIndex = useCallback(
+    (index: number) => {
+      const object = {
+        tracking: logData.key,
+      };
+      // We infer that this may mutate `object`, which in turn aliases
+      // data from `logData`, such that `logData` may be mutated.
+      LogEvent.log(() => object);
+      setIndex(index);
+    },
+    [index, logData, items]
+  );
+
+  if (prevId !== id) {
+    setCurrentIndex(0);
+  }
+
+  return (
+    <Foo
+      index={index}
+      items={items}
+      current={mediaList[index]}
+      setCurrentIndex={setCurrentIndex}
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md
new file mode 100644
index 00000000000..32595c07b52
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  function hasErrors() {
+    let hasErrors = false;
+    if (props.items == null) {
+      hasErrors = true;
+    }
+    return hasErrors;
+  }
+  return hasErrors();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
+
+<unknown> hasErrors_0$15:TFunction.
+
+error.todo-repro-named-function-with-shadowed-local-same-name.ts:9:9
+   7 |     return hasErrors;
+   8 |   }
+>  9 |   return hasErrors();
+     |          ^^^^^^^^^ this is uninitialized
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.js
new file mode 100644
index 00000000000..b7a450ccba0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  function hasErrors() {
+    let hasErrors = false;
+    if (props.items == null) {
+      hasErrors = true;
+    }
+    return hasErrors;
+  }
+  return hasErrors();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md
new file mode 100644
index 00000000000..4721e015b08
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {ValidateMemoization, useHook} from 'shared-runtime';
+
+function UnmemoizedCallbackCapturedInContextVariable({cond1, cond2}) {
+  // The return value is captured by `x` which is a context variable, which
+  // extends a's range to include the call instruction. This prevents the entire
+  // range from being memoized
+  const a = useHook();
+  // Because b is also part of that same mutable range, it can't be memoized either
+  const b = useMemo(() => ({}), []);
+
+  // Conditional assignment without a subsequent mutation normally doesn't create a mutable
+  // range, but in this case we're reassigning a context variable
+  let x;
+  if (cond1) {
+    x = a;
+  } else if (cond2) {
+    x = b;
+  } else {
+    return null;
+  }
+
+  const f = () => {
+    return x;
+  };
+  const result = f();
+
+  return <ValidateMemoization inputs={[cond1, cond2]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: UnmemoizedCallbackCapturedInContextVariable,
+  params: [{cond1: true, cond2: false}],
+  sequentialRenders: [
+    {cond1: true, cond2: true},
+    {cond1: false, cond2: true},
+    {cond1: false, cond2: true}, // fails sprout bc memoization is not preserved
+    {cond1: false, cond2: false},
+  ],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.todo-repro-unmemoized-callback-captured-in-context-variable.ts:11:12
+   9 |   const a = useHook();
+  10 |   // Because b is also part of that same mutable range, it can't be memoized either
+> 11 |   const b = useMemo(() => ({}), []);
+     |             ^^^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing memoization
+  12 |
+  13 |   // Conditional assignment without a subsequent mutation normally doesn't create a mutable
+  14 |   // range, but in this case we're reassigning a context variable
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx
new file mode 100644
index 00000000000..0b90cf45bc5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx
@@ -0,0 +1,41 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {ValidateMemoization, useHook} from 'shared-runtime';
+
+function UnmemoizedCallbackCapturedInContextVariable({cond1, cond2}) {
+  // The return value is captured by `x` which is a context variable, which
+  // extends a's range to include the call instruction. This prevents the entire
+  // range from being memoized
+  const a = useHook();
+  // Because b is also part of that same mutable range, it can't be memoized either
+  const b = useMemo(() => ({}), []);
+
+  // Conditional assignment without a subsequent mutation normally doesn't create a mutable
+  // range, but in this case we're reassigning a context variable
+  let x;
+  if (cond1) {
+    x = a;
+  } else if (cond2) {
+    x = b;
+  } else {
+    return null;
+  }
+
+  const f = () => {
+    return x;
+  };
+  const result = f();
+
+  return <ValidateMemoization inputs={[cond1, cond2]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: UnmemoizedCallbackCapturedInContextVariable,
+  params: [{cond1: true, cond2: false}],
+  sequentialRenders: [
+    {cond1: true, cond2: true},
+    {cond1: false, cond2: true},
+    {cond1: false, cond2: true}, // fails sprout bc memoization is not preserved
+    {cond1: false, cond2: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
new file mode 100644
index 00000000000..a0c492120a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  // The ref is modified later, extending its range and preventing memoization of onChange
+  ref.current.inner = null;
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.ts:14:2
+  12 |
+  13 |   // The ref is modified later, extending its range and preventing memoization of onChange
+> 14 |   ref.current.inner = null;
+     |   ^^^^^^^^^^^ Cannot update ref during render
+  15 |
+  16 |   return <input onChange={onChange} />;
+  17 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js
new file mode 100644
index 00000000000..cb259b457e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js
@@ -0,0 +1,22 @@
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  // The ref is modified later, extending its range and preventing memoization of onChange
+  ref.current.inner = null;
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-valid-functiondecl-hoisting.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-valid-functiondecl-hoisting.expect.md
new file mode 100644
index 00000000000..89a9c076754
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-valid-functiondecl-hoisting.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+/**
+ * Also see error.todo-functiondecl-hoisting.tsx which shows *invalid*
+ * compilation cases.
+ *
+ * This bailout specifically is a false positive for since this function's only
+ * reference-before-definition are within other functions which are not invoked.
+ */
+function Foo() {
+  'use memo';
+
+  function foo() {
+    return bar();
+  }
+  function bar() {
+    return 42;
+  }
+
+  return <Stringify fn1={foo} fn2={bar} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: [PruneHoistedContexts] Rewrite hoisted function references
+
+error.todo-valid-functiondecl-hoisting.ts:13:11
+  11 |
+  12 |   function foo() {
+> 13 |     return bar();
+     |            ^^^ [PruneHoistedContexts] Rewrite hoisted function references
+  14 |   }
+  15 |   function bar() {
+  16 |     return 42;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-valid-functiondecl-hoisting.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-valid-functiondecl-hoisting.tsx
new file mode 100644
index 00000000000..063492b89cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-valid-functiondecl-hoisting.tsx
@@ -0,0 +1,25 @@
+import {Stringify} from 'shared-runtime';
+/**
+ * Also see error.todo-functiondecl-hoisting.tsx which shows *invalid*
+ * compilation cases.
+ *
+ * This bailout specifically is a false positive for since this function's only
+ * reference-before-definition are within other functions which are not invoked.
+ */
+function Foo() {
+  'use memo';
+
+  function foo() {
+    return bar();
+  }
+  function bar() {
+    return 42;
+  }
+
+  return <Stringify fn1={foo} fn2={bar} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo.try-catch-with-throw.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo.try-catch-with-throw.expect.md
new file mode 100644
index 00000000000..dcbdc1e6460
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo.try-catch-with-throw.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  try {
+    throw [];
+  } catch (e) {
+    x.push(e);
+  }
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch
+
+error.todo.try-catch-with-throw.ts:4:4
+  2 |   let x;
+  3 |   try {
+> 4 |     throw [];
+    |     ^^^^^^^^^ (BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch
+  5 |   } catch (e) {
+  6 |     x.push(e);
+  7 |   }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo.try-catch-with-throw.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo.try-catch-with-throw.js
new file mode 100644
index 00000000000..dc51780e8fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo.try-catch-with-throw.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  let x;
+  try {
+    throw [];
+  } catch (e) {
+    x.push(e);
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.expect.md
new file mode 100644
index 00000000000..ad39cbc8bb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [state, setState] = useState(false);
+  for (const _ of props) {
+    if (props.cond) {
+      break;
+    } else {
+      continue;
+    }
+  }
+  setState(true);
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.unconditional-set-state-in-render-after-loop-break.ts:11:2
+   9 |     }
+  10 |   }
+> 11 |   setState(true);
+     |   ^^^^^^^^ Found setState() in render
+  12 |   return state;
+  13 | }
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.js
new file mode 100644
index 00000000000..9f3f79b64bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.js
@@ -0,0 +1,13 @@
+// @validateNoSetStateInRender
+function Component(props) {
+  const [state, setState] = useState(false);
+  for (const _ of props) {
+    if (props.cond) {
+      break;
+    } else {
+      continue;
+    }
+  }
+  setState(true);
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.expect.md
new file mode 100644
index 00000000000..066c185e7af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [state, setState] = useState(false);
+  for (const _ of props) {
+  }
+  setState(true);
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.unconditional-set-state-in-render-after-loop.ts:6:2
+  4 |   for (const _ of props) {
+  5 |   }
+> 6 |   setState(true);
+    |   ^^^^^^^^ Found setState() in render
+  7 |   return state;
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.js
new file mode 100644
index 00000000000..f802aff0ca0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.js
@@ -0,0 +1,8 @@
+// @validateNoSetStateInRender
+function Component(props) {
+  const [state, setState] = useState(false);
+  for (const _ of props) {
+  }
+  setState(true);
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.expect.md
new file mode 100644
index 00000000000..82d7cfbe286
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [state, setState] = useState(false);
+  for (const _ of props) {
+    if (props.cond) {
+      break;
+    } else {
+      throw new Error('bye!');
+    }
+  }
+  setState(true);
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.unconditional-set-state-in-render-with-loop-throw.ts:11:2
+   9 |     }
+  10 |   }
+> 11 |   setState(true);
+     |   ^^^^^^^^ Found setState() in render
+  12 |   return state;
+  13 | }
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.js
new file mode 100644
index 00000000000..67fff92deaa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.js
@@ -0,0 +1,13 @@
+// @validateNoSetStateInRender
+function Component(props) {
+  const [state, setState] = useState(false);
+  for (const _ of props) {
+    if (props.cond) {
+      break;
+    } else {
+      throw new Error('bye!');
+    }
+  }
+  setState(true);
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.expect.md
new file mode 100644
index 00000000000..1ebd42229d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+  foo();
+
+  return [x];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.unconditional-set-state-lambda.ts:8:2
+   6 |     setX(1);
+   7 |   };
+>  8 |   foo();
+     |   ^^^ Found setState() in render
+   9 |
+  10 |   return [x];
+  11 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.js
new file mode 100644
index 00000000000..04cf8428547
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.js
@@ -0,0 +1,11 @@
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+  foo();
+
+  return [x];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.expect.md
new file mode 100644
index 00000000000..4736e66c124
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  const bar = () => {
+    foo();
+  };
+
+  const baz = () => {
+    bar();
+  };
+  baz();
+
+  return [x];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.unconditional-set-state-nested-function-expressions.ts:16:2
+  14 |     bar();
+  15 |   };
+> 16 |   baz();
+     |   ^^^ Found setState() in render
+  17 |
+  18 |   return [x];
+  19 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.js
new file mode 100644
index 00000000000..4dfc2d305d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.js
@@ -0,0 +1,19 @@
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  const bar = () => {
+    foo();
+  };
+
+  const baz = () => {
+    bar();
+  };
+  baz();
+
+  return [x];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.expect.md
new file mode 100644
index 00000000000..439ada4b631
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+let renderCount = 0;
+function useFoo() {
+  renderCount += 1;
+  return renderCount;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `renderCount` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.update-global-should-bailout.ts:3:2
+  1 | let renderCount = 0;
+  2 | function useFoo() {
+> 3 |   renderCount += 1;
+    |   ^^^^^^^^^^^^^^^^ `renderCount` cannot be reassigned
+  4 |   return renderCount;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.tsx
new file mode 100644
index 00000000000..0e981e4bef1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.tsx
@@ -0,0 +1,10 @@
+let renderCount = 0;
+function useFoo() {
+  renderCount += 1;
+  return renderCount;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
new file mode 100644
index 00000000000..ba5a7407773
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  // The ref is modified later, extending its range and preventing memoization of onChange
+  const reset = () => {
+    ref.current.inner = null;
+  };
+  reset();
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:17:2
+  15 |     ref.current.inner = null;
+  16 |   };
+> 17 |   reset();
+     |   ^^^^^ This function accesses a ref value
+  18 |
+  19 |   return <input onChange={onChange} />;
+  20 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
new file mode 100644
index 00000000000..dec828c2d0d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
@@ -0,0 +1,25 @@
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  // The ref is modified later, extending its range and preventing memoization of onChange
+  const reset = () => {
+    ref.current.inner = null;
+  };
+  reset();
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
new file mode 100644
index 00000000000..b40b0bbf226
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  ref.current.inner = null;
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.useCallback-set-ref-nested-property-dont-preserve-memoization.ts:13:2
+  11 |   });
+  12 |
+> 13 |   ref.current.inner = null;
+     |   ^^^^^^^^^^^ Cannot update ref during render
+  14 |
+  15 |   return <input onChange={onChange} />;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.js
new file mode 100644
index 00000000000..2231d924775
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.js
@@ -0,0 +1,21 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  ref.current.inner = null;
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.expect.md
new file mode 100644
index 00000000000..b96648b00f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  // we don't handle generators at all so this test isn't
+  // useful for now, but adding this test in case we do
+  // add support for generators in the future.
+  let x = useMemo(function* () {
+    yield a;
+  }, []);
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Handle YieldExpression expressions
+
+error.useMemo-callback-generator.ts:6:4
+  4 |   // add support for generators in the future.
+  5 |   let x = useMemo(function* () {
+> 6 |     yield a;
+    |     ^^^^^^^ (BuildHIR::lowerExpression) Handle YieldExpression expressions
+  7 |   }, []);
+  8 |   return x;
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.js
new file mode 100644
index 00000000000..2a4739a0dbe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.js
@@ -0,0 +1,9 @@
+function component(a, b) {
+  // we don't handle generators at all so this test isn't
+  // useful for now, but adding this test in case we do
+  // add support for generators in the future.
+  let x = useMemo(function* () {
+    yield a;
+  }, []);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.expect.md
new file mode 100644
index 00000000000..e135d7d5754
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+
+// react-hooks-deps would error on this code (complex expression in depslist),
+// so Forget could bailout here
+function App({text, hasDeps}) {
+  const resolvedText = useMemo(
+    () => {
+      return text.toUpperCase();
+    },
+    hasDeps ? null : [text], // should be DCE'd
+  );
+  return resolvedText;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: App,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Expected the dependency list for useMemo to be an array literal
+
+Expected the dependency list for useMemo to be an array literal.
+
+error.useMemo-non-literal-depslist.ts:10:4
+   8 |       return text.toUpperCase();
+   9 |     },
+> 10 |     hasDeps ? null : [text], // should be DCE'd
+     |     ^^^^^^^^^^^^^^^^^^^^^^^ Expected the dependency list for useMemo to be an array literal
+  11 |   );
+  12 |   return resolvedText;
+  13 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.ts
new file mode 100644
index 00000000000..24645c724ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.ts
@@ -0,0 +1,19 @@
+import {useMemo} from 'react';
+
+// react-hooks-deps would error on this code (complex expression in depslist),
+// so Forget could bailout here
+function App({text, hasDeps}) {
+  const resolvedText = useMemo(
+    () => {
+      return text.toUpperCase();
+    },
+    hasDeps ? null : [text], // should be DCE'd
+  );
+  return resolvedText;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: App,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.expect.md
new file mode 100644
index 00000000000..233ca943514
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @validateBlocklistedImports:["DangerousImport"]
+import {foo} from 'DangerousImport';
+import {useIdentity} from 'shared-runtime';
+
+function useHook() {
+  useIdentity(foo);
+  return;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Bailing out due to blocklisted import
+
+Import from module DangerousImport.
+
+error.validate-blocklisted-imports.ts:2:0
+  1 | // @validateBlocklistedImports:["DangerousImport"]
+> 2 | import {foo} from 'DangerousImport';
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Bailing out due to blocklisted import
+  3 | import {useIdentity} from 'shared-runtime';
+  4 |
+  5 | function useHook() {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.ts
new file mode 100644
index 00000000000..d33c175bcf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.ts
@@ -0,0 +1,8 @@
+// @validateBlocklistedImports:["DangerousImport"]
+import {foo} from 'DangerousImport';
+import {useIdentity} from 'shared-runtime';
+
+function useHook() {
+  useIdentity(foo);
+  return;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-memoized-effect-deps-invalidated-dep-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-memoized-effect-deps-invalidated-dep-value.expect.md
new file mode 100644
index 00000000000..7fdadfbc896
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-memoized-effect-deps-invalidated-dep-value.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateMemoizedEffectDependencies
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = [];
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.push(props.value);
+
+  const y = [x];
+
+  useEffect(() => {
+    console.log(y);
+  }, [y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+
+error.validate-memoized-effect-deps-invalidated-dep-value.ts:11:2
+   9 |   const y = [x];
+  10 |
+> 11 |   useEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^
+> 12 |     console.log(y);
+     | ^^^^^^^^^^^^^^^^^^^
+> 13 |   }, [y]);
+     | ^^^^^^^^^^ React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior
+  14 | }
+  15 |
+  16 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-memoized-effect-deps-invalidated-dep-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-memoized-effect-deps-invalidated-dep-value.js
new file mode 100644
index 00000000000..e0944d35e63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-memoized-effect-deps-invalidated-dep-value.js
@@ -0,0 +1,19 @@
+// @validateMemoizedEffectDependencies
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = [];
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.push(props.value);
+
+  const y = [x];
+
+  useEffect(() => {
+    console.log(y);
+  }, [y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
new file mode 100644
index 00000000000..1d5a4a2284c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender:true
+function Foo(props, ref) {
+  console.log(ref.current);
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 'foo'}, {ref: {cuurrent: 1}}],
+  isComponent: true,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.validate-mutate-ref-arg-in-render.ts:3:14
+  1 | // @validateRefAccessDuringRender:true
+  2 | function Foo(props, ref) {
+> 3 |   console.log(ref.current);
+    |               ^^^^^^^^^^^ Passing a ref to a function may read its value during render
+  4 |   return <div>{props.bar}</div>;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js
new file mode 100644
index 00000000000..10218fc6163
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js
@@ -0,0 +1,11 @@
+// @validateRefAccessDuringRender:true
+function Foo(props, ref) {
+  console.log(ref.current);
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 'foo'}, {ref: {cuurrent: 1}}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md
new file mode 100644
index 00000000000..c7e16b3c12b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const entries = useMemo(() => Object.entries(object), [object]);
+  entries.map(([, value]) => {
+    value.updated = true;
+  });
+  return <Stringify entries={entries} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.validate-object-entries-mutation.ts:6:57
+  4 | function Component(props) {
+  5 |   const object = {object: props.object};
+> 6 |   const entries = useMemo(() => Object.entries(object), [object]);
+    |                                                          ^^^^^^ This dependency may be modified later
+  7 |   entries.map(([, value]) => {
+  8 |     value.updated = true;
+  9 |   });
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.validate-object-entries-mutation.ts:6:18
+  4 | function Component(props) {
+  5 |   const object = {object: props.object};
+> 6 |   const entries = useMemo(() => Object.entries(object), [object]);
+    |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing memoization
+  7 |   entries.map(([, value]) => {
+  8 |     value.updated = true;
+  9 |   });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js
new file mode 100644
index 00000000000..b3a240a111c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const entries = useMemo(() => Object.entries(object), [object]);
+  entries.map(([, value]) => {
+    value.updated = true;
+  });
+  return <Stringify entries={entries} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md
new file mode 100644
index 00000000000..bee5b18b7e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const values = useMemo(() => Object.values(object), [object]);
+  values.map(value => {
+    value.updated = true;
+  });
+  return <Stringify values={values} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.validate-object-values-mutation.ts:6:55
+  4 | function Component(props) {
+  5 |   const object = {object: props.object};
+> 6 |   const values = useMemo(() => Object.values(object), [object]);
+    |                                                        ^^^^^^ This dependency may be modified later
+  7 |   values.map(value => {
+  8 |     value.updated = true;
+  9 |   });
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.validate-object-values-mutation.ts:6:17
+  4 | function Component(props) {
+  5 |   const object = {object: props.object};
+> 6 |   const values = useMemo(() => Object.values(object), [object]);
+    |                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing memoization
+  7 |   values.map(value => {
+  8 |     value.updated = true;
+  9 |   });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js
new file mode 100644
index 00000000000..4f8c32367c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const values = useMemo(() => Object.values(object), [object]);
+  values.map(value => {
+    value.updated = true;
+  });
+  return <Stringify values={values} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.expect.md
new file mode 100644
index 00000000000..f38ffba9585
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // b is an object, must be memoized even though the input is not memoized
+  const {a, ...b} = props.a;
+  // d is an array, mut be memoized even though the input is not memoized
+  const [c, ...d] = props.c;
+  return <div b={b} d={d}></div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let b;
+  if ($[0] !== props.a) {
+    const { a, ...t0 } = props.a;
+    b = t0;
+    $[0] = props.a;
+    $[1] = b;
+  } else {
+    b = $[1];
+  }
+  let d;
+  if ($[2] !== props.c) {
+    [, ...d] = props.c;
+    $[2] = props.c;
+    $[3] = d;
+  } else {
+    d = $[3];
+  }
+  let t0;
+  if ($[4] !== b || $[5] !== d) {
+    t0 = <div b={b} d={d} />;
+    $[4] = b;
+    $[5] = d;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.js
new file mode 100644
index 00000000000..4c90a6f0fe4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-destructured-rest-element.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  // b is an object, must be memoized even though the input is not memoized
+  const {a, ...b} = props.a;
+  // d is an array, mut be memoized even though the input is not memoized
+  const [c, ...d] = props.c;
+  return <div b={b} d={d}></div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-jsx-child.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-jsx-child.expect.md
new file mode 100644
index 00000000000..4d51f85c770
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-jsx-child.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const x = [];
+  if (a) {
+    const y = [];
+    if (b) {
+      y.push(c);
+    }
+    x.push(<div>{y}</div>);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(9);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      let y;
+      if ($[4] !== b || $[5] !== c) {
+        y = [];
+        if (b) {
+          y.push(c);
+        }
+        $[4] = b;
+        $[5] = c;
+        $[6] = y;
+      } else {
+        y = $[6];
+      }
+      let t0;
+      if ($[7] !== y) {
+        t0 = <div>{y}</div>;
+        $[7] = y;
+        $[8] = t0;
+      } else {
+        t0 = $[8];
+      }
+      x.push(t0);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-jsx-child.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-jsx-child.js
new file mode 100644
index 00000000000..055bc4b46ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-jsx-child.js
@@ -0,0 +1,17 @@
+function foo(a, b, c) {
+  const x = [];
+  if (a) {
+    const y = [];
+    if (b) {
+      y.push(c);
+    }
+    x.push(<div>{y}</div>);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md
new file mode 100644
index 00000000000..cd4f47194e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = [props.a];
+  const b = [props.b];
+  const c = [props.c];
+  // We don't do constant folding for non-primitive values (yet) so we consider
+  // that any of a, b, or c could return here
+  return (a && b) || c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = [props.a];
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const a = t0;
+  let t1;
+  if ($[2] !== props.b) {
+    t1 = [props.b];
+    $[2] = props.b;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const b = t1;
+  let t2;
+  if ($[4] !== props.c) {
+    t2 = [props.c];
+    $[4] = props.c;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const c = t2;
+  return (a && b) || c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.js
new file mode 100644
index 00000000000..51f8ad7ac60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const a = [props.a];
+  const b = [props.b];
+  const c = [props.c];
+  // We don't do constant folding for non-primitive values (yet) so we consider
+  // that any of a, b, or c could return here
+  return (a && b) || c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md
new file mode 100644
index 00000000000..d3deeb6e50a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a can be independently memoized, is not mutated later
+  const a = [props.a];
+
+  // b and c are interleaved and grouped into a single scope,
+  // but they are independent values. c does not escape, but
+  // we need to ensure that a is memoized or else b will invalidate
+  // on every render since a is a dependency.
+  const b = [];
+  const c = {};
+  c.a = a;
+  b.push(props.b);
+
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = [props.a];
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const a = t0;
+  let b;
+  if ($[2] !== a || $[3] !== props.b) {
+    b = [];
+    const c = {};
+    c.a = a;
+    b.push(props.b);
+    $[2] = a;
+    $[3] = props.b;
+    $[4] = b;
+  } else {
+    b = $[4];
+  }
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.js
new file mode 100644
index 00000000000..ed6cb6762d4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.js
@@ -0,0 +1,21 @@
+function Component(props) {
+  // a can be independently memoized, is not mutated later
+  const a = [props.a];
+
+  // b and c are interleaved and grouped into a single scope,
+  // but they are independent values. c does not escape, but
+  // we need to ensure that a is memoized or else b will invalidate
+  // on every render since a is a dependency.
+  const b = [];
+  const c = {};
+  c.a = a;
+  b.push(props.b);
+
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md
new file mode 100644
index 00000000000..8ba85e3ff16
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a can be independently memoized, is not mutated later
+  // but a is a dependnecy of b, which is a dependency of c.
+  // we have to memoize a to avoid breaking memoization of b,
+  // to avoid breaking memoization of c.
+  const a = [props.a];
+
+  // a can be independently memoized, is not mutated later,
+  // but is a dependency of d which is part of c's scope.
+  // we have to memoize b to avoid breaking memoization of c.
+  const b = [a];
+
+  // c and d are interleaved and grouped into a single scope,
+  // but they are independent values. d does not escape, but
+  // we need to ensure that b is memoized or else b will invalidate
+  // on every render since a is a dependency. we also need to
+  // ensure that a is memoized, since it's a dependency of b.
+  const c = [];
+  const d = {};
+  d.b = b;
+  c.push(props.b);
+
+  return c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a) {
+    const a = [props.a];
+    t0 = [a];
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const b = t0;
+  let c;
+  if ($[2] !== b || $[3] !== props.b) {
+    c = [];
+    const d = {};
+    d.b = b;
+    c.push(props.b);
+    $[2] = b;
+    $[3] = props.b;
+    $[4] = c;
+  } else {
+    c = $[4];
+  }
+  return c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.js
new file mode 100644
index 00000000000..895c881cec4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.js
@@ -0,0 +1,30 @@
+function Component(props) {
+  // a can be independently memoized, is not mutated later
+  // but a is a dependnecy of b, which is a dependency of c.
+  // we have to memoize a to avoid breaking memoization of b,
+  // to avoid breaking memoization of c.
+  const a = [props.a];
+
+  // a can be independently memoized, is not mutated later,
+  // but is a dependency of d which is part of c's scope.
+  // we have to memoize b to avoid breaking memoization of c.
+  const b = [a];
+
+  // c and d are interleaved and grouped into a single scope,
+  // but they are independent values. d does not escape, but
+  // we need to ensure that b is memoized or else b will invalidate
+  // on every render since a is a dependency. we also need to
+  // ensure that a is memoized, since it's a dependency of b.
+  const c = [];
+  const d = {};
+  d.b = b;
+  c.push(props.b);
+
+  return c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md
new file mode 100644
index 00000000000..5920ba53a72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a does not need to be memoized ever, even though it's a
+  // dependency of c, which exists in a scope that has a memoized
+  // output. it doesn't need to be memoized bc the value is a primitive type.
+  const a = props.a + props.b;
+
+  // b and c are interleaved and grouped into a single scope,
+  // but they are independent values. c does not escape, but
+  // we need to ensure that a is memoized or else b will invalidate
+  // on every render since a is a dependency.
+  const b = [];
+  const c = {};
+  c.a = a;
+  b.push(props.c);
+
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+
+  const a = props.a + props.b;
+  let b;
+  if ($[0] !== a || $[1] !== props.c) {
+    b = [];
+    const c = {};
+    c.a = a;
+    b.push(props.c);
+    $[0] = a;
+    $[1] = props.c;
+    $[2] = b;
+  } else {
+    b = $[2];
+  }
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.js
new file mode 100644
index 00000000000..6b4bf029b2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.js
@@ -0,0 +1,23 @@
+function Component(props) {
+  // a does not need to be memoized ever, even though it's a
+  // dependency of c, which exists in a scope that has a memoized
+  // output. it doesn't need to be memoized bc the value is a primitive type.
+  const a = props.a + props.b;
+
+  // b and c are interleaved and grouped into a single scope,
+  // but they are independent values. c does not escape, but
+  // we need to ensure that a is memoized or else b will invalidate
+  // on every render since a is a dependency.
+  const b = [];
+  const c = {};
+  c.a = a;
+  b.push(props.c);
+
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-conditional-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-conditional-test.expect.md
new file mode 100644
index 00000000000..3c7301bdc65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-conditional-test.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [props.a];
+  const y = x ? props.b : props.c;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const x = [props.a];
+  const y = x ? props.b : props.c;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-conditional-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-conditional-test.js
new file mode 100644
index 00000000000..97bda68f395
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-conditional-test.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const x = [props.a];
+  const y = x ? props.b : props.c;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-if-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-if-test.expect.md
new file mode 100644
index 00000000000..4398bcf5084
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-if-test.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [props.a];
+  let y;
+  if (x) {
+    y = props.b;
+  } else {
+    y = props.c;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const x = [props.a];
+  let y;
+  if (x) {
+    y = props.b;
+  } else {
+    y = props.c;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-if-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-if-test.js
new file mode 100644
index 00000000000..b73e95f1d6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-if-test.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const x = [props.a];
+  let y;
+  if (x) {
+    y = props.b;
+  } else {
+    y = props.c;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-case.expect.md
new file mode 100644
index 00000000000..e74e3ef736e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-case.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = [props.a];
+  let x = props.b;
+  switch (props.c) {
+    case a: {
+      x = props.d;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const a = [props.a];
+  let x = props.b;
+  switch (props.c) {
+    case a: {
+      x = props.d;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-case.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-case.js
new file mode 100644
index 00000000000..4dca76a62f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-case.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const a = [props.a];
+  let x = props.b;
+  switch (props.c) {
+    case a: {
+      x = props.d;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-test.expect.md
new file mode 100644
index 00000000000..850677f803b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-test.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = [props.a];
+  let x = props.b;
+  switch (a) {
+    case true: {
+      x = props.c;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const a = [props.a];
+  let x = props.b;
+  switch (a) {
+    case true: {
+      x = props.c;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-test.js
new file mode 100644
index 00000000000..b927fc7546e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-not-switch-test.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const a = [props.a];
+  let x = props.b;
+  switch (a) {
+    case true: {
+      x = props.c;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-call-after-dependency-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-call-after-dependency-load.expect.md
new file mode 100644
index 00000000000..acad3c30921
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-call-after-dependency-load.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+/**
+ * Test that we preserve order of evaluation on the following case scope@0
+ * ```js
+ * // simplified HIR
+ * scope@0
+ *    ...
+ *    $0 = arr.length
+ *    $1 = arr.push(...)
+ *
+ * scope@1 <-- here we should depend on $0 (the value of the property load before the
+ *             mutable call)
+ *   [$0, $1]
+ * ```
+ */
+function useFoo(source: Array<number>): [number, number] {
+  const arr = [1, 2, 3, ...source];
+  return [arr.length, arr.push(0)];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [[5, 6]],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Test that we preserve order of evaluation on the following case scope@0
+ * ```js
+ * // simplified HIR
+ * scope@0
+ *    ...
+ *    $0 = arr.length
+ *    $1 = arr.push(...)
+ *
+ * scope@1 <-- here we should depend on $0 (the value of the property load before the
+ *             mutable call)
+ *   [$0, $1]
+ * ```
+ */
+function useFoo(source) {
+  const $ = _c(6);
+  let t0;
+  let t1;
+  if ($[0] !== source) {
+    const arr = [1, 2, 3, ...source];
+    t0 = arr.length;
+    t1 = arr.push(0);
+    $[0] = source;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t0 || $[4] !== t1) {
+    t2 = [t0, t1];
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [[5, 6]],
+};
+
+```
+      
+### Eval output
+(kind: ok) [5,6]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-call-after-dependency-load.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-call-after-dependency-load.ts
new file mode 100644
index 00000000000..c2fa617f51c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-call-after-dependency-load.ts
@@ -0,0 +1,23 @@
+/**
+ * Test that we preserve order of evaluation on the following case scope@0
+ * ```js
+ * // simplified HIR
+ * scope@0
+ *    ...
+ *    $0 = arr.length
+ *    $1 = arr.push(...)
+ *
+ * scope@1 <-- here we should depend on $0 (the value of the property load before the
+ *             mutable call)
+ *   [$0, $1]
+ * ```
+ */
+function useFoo(source: Array<number>): [number, number] {
+  const arr = [1, 2, 3, ...source];
+  return [arr.length, arr.push(0)];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [[5, 6]],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-store-after-dependency-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-store-after-dependency-load.expect.md
new file mode 100644
index 00000000000..b2bf1e36a48
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-store-after-dependency-load.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+/**
+ * Test that we preserve order of evaluation on the following case scope@0
+ * ```js
+ * // simplified HIR
+ * scope@0
+ *    ...
+ *    $0 = arr.length
+ *    $1 = arr.length = 0
+ *
+ * scope@1 <-- here we should depend on $0 (the value of the property load before the
+ *             property store)
+ *   [$0, $1]
+ * ```
+ */
+function useFoo(source: Array<number>): [number, number] {
+  const arr = [1, 2, 3, ...source];
+  return [arr.length, (arr.length = 0)];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [[5, 6]],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Test that we preserve order of evaluation on the following case scope@0
+ * ```js
+ * // simplified HIR
+ * scope@0
+ *    ...
+ *    $0 = arr.length
+ *    $1 = arr.length = 0
+ *
+ * scope@1 <-- here we should depend on $0 (the value of the property load before the
+ *             property store)
+ *   [$0, $1]
+ * ```
+ */
+function useFoo(source) {
+  const $ = _c(6);
+  let t0;
+  let t1;
+  if ($[0] !== source) {
+    const arr = [1, 2, 3, ...source];
+    t0 = arr.length;
+    t1 = arr.length = 0;
+    $[0] = source;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t0 || $[4] !== t1) {
+    t2 = [t0, t1];
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [[5, 6]],
+};
+
+```
+      
+### Eval output
+(kind: ok) [5,0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-store-after-dependency-load.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-store-after-dependency-load.ts
new file mode 100644
index 00000000000..8798cd99c7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/evaluation-order-mutate-store-after-dependency-load.ts
@@ -0,0 +1,23 @@
+/**
+ * Test that we preserve order of evaluation on the following case scope@0
+ * ```js
+ * // simplified HIR
+ * scope@0
+ *    ...
+ *    $0 = arr.length
+ *    $1 = arr.length = 0
+ *
+ * scope@1 <-- here we should depend on $0 (the value of the property load before the
+ *             property store)
+ *   [$0, $1]
+ * ```
+ */
+function useFoo(source: Array<number>): [number, number] {
+  const arr = [1, 2, 3, ...source];
+  return [arr.length, (arr.length = 0)];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [[5, 6]],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/compile-files-with-exhaustive-deps-violation-in-effects.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/compile-files-with-exhaustive-deps-violation-in-effects.expect.md
new file mode 100644
index 00000000000..e8e18395eca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/compile-files-with-exhaustive-deps-violation-in-effects.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  useEffect(
+    () => {
+      console.log(x);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    [
+      /* intentionally missing deps */
+    ]
+  );
+
+  const memo = useMemo(() => {
+    return [x];
+  }, [x]);
+
+  return <ValidateMemoization inputs={[x]} output={memo} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies
+
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(10);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = () => {
+      console.log(x);
+    };
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== x) {
+    t3 = [x];
+    $[3] = x;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const memo = t3;
+  let t4;
+  if ($[5] !== x) {
+    t4 = [x];
+    $[5] = x;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== memo || $[8] !== t4) {
+    t5 = <ValidateMemoization inputs={t4} output={memo} />;
+    $[7] = memo;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  return t5;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/compile-files-with-exhaustive-deps-violation-in-effects.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/compile-files-with-exhaustive-deps-violation-in-effects.js
new file mode 100644
index 00000000000..64817e701f0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/compile-files-with-exhaustive-deps-violation-in-effects.js
@@ -0,0 +1,22 @@
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  useEffect(
+    () => {
+      console.log(x);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    [
+      /* intentionally missing deps */
+    ]
+  );
+
+  const memo = useMemo(() => {
+    return [x];
+  }, [x]);
+
+  return <ValidateMemoization inputs={[x]} output={memo} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.exhaustive-deps-effect-events.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.exhaustive-deps-effect-events.expect.md
new file mode 100644
index 00000000000..d0a626e50ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.exhaustive-deps-effect-events.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect, useEffectEvent} from 'react';
+
+function Component({x, y, z}) {
+  const effectEvent = useEffectEvent(() => {
+    log(x);
+  });
+
+  const effectEvent2 = useEffectEvent(z => {
+    log(y, z);
+  });
+
+  // error - do not include effect event in deps
+  useEffect(() => {
+    effectEvent();
+  }, [effectEvent]);
+
+  // error - do not include effect event in deps
+  useEffect(() => {
+    effectEvent2(z);
+  }, [effectEvent2, z]);
+
+  // error - do not include effect event captured values in deps
+  useEffect(() => {
+    effectEvent2(z);
+  }, [y, z]);
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.exhaustive-deps-effect-events.ts:16:6
+  14 |   useEffect(() => {
+  15 |     effectEvent();
+> 16 |   }, [effectEvent]);
+     |       ^^^^^^^^^^^ Functions returned from `useEffectEvent` must not be included in the dependency array. Remove `effectEvent` from the dependencies.
+  17 |
+  18 |   // error - do not include effect event in deps
+  19 |   useEffect(() => {
+
+Inferred dependencies: `[]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.exhaustive-deps-effect-events.ts:21:6
+  19 |   useEffect(() => {
+  20 |     effectEvent2(z);
+> 21 |   }, [effectEvent2, z]);
+     |       ^^^^^^^^^^^^ Functions returned from `useEffectEvent` must not be included in the dependency array. Remove `effectEvent2` from the dependencies.
+  22 |
+  23 |   // error - do not include effect event captured values in deps
+  24 |   useEffect(() => {
+
+Inferred dependencies: `[z]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.exhaustive-deps-effect-events.ts:26:6
+  24 |   useEffect(() => {
+  25 |     effectEvent2(z);
+> 26 |   }, [y, z]);
+     |       ^ Unnecessary dependency `y`
+  27 | }
+  28 |
+
+Inferred dependencies: `[z]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.exhaustive-deps-effect-events.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.exhaustive-deps-effect-events.js
new file mode 100644
index 00000000000..03e4a326f95
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.exhaustive-deps-effect-events.js
@@ -0,0 +1,27 @@
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect, useEffectEvent} from 'react';
+
+function Component({x, y, z}) {
+  const effectEvent = useEffectEvent(() => {
+    log(x);
+  });
+
+  const effectEvent2 = useEffectEvent(z => {
+    log(y, z);
+  });
+
+  // error - do not include effect event in deps
+  useEffect(() => {
+    effectEvent();
+  }, [effectEvent]);
+
+  // error - do not include effect event in deps
+  useEffect(() => {
+    effectEvent2(z);
+  }, [effectEvent2, z]);
+
+  // error - do not include effect event captured values in deps
+  useEffect(() => {
+    effectEvent2(z);
+  }, [y, z]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-dep-on-ref-current-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-dep-on-ref-current-value.expect.md
new file mode 100644
index 00000000000..cba2cb4b4ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-dep-on-ref-current-value.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+function Component() {
+  const ref = useRef(null);
+  const onChange = useCallback(() => {
+    return ref.current.value;
+  }, [ref.current.value]);
+
+  return <input ref={ref} onChange={onChange} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found extra memoization dependencies
+
+Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-dep-on-ref-current-value.ts:7:6
+   5 |   const onChange = useCallback(() => {
+   6 |     return ref.current.value;
+>  7 |   }, [ref.current.value]);
+     |       ^^^^^^^^^^^^^^^^^ Unnecessary dependency `ref.current.value`
+   8 |
+   9 |   return <input ref={ref} onChange={onChange} />;
+  10 | }
+
+Inferred dependencies: `[]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-dep-on-ref-current-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-dep-on-ref-current-value.js
new file mode 100644
index 00000000000..f7a3ee43503
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-dep-on-ref-current-value.js
@@ -0,0 +1,10 @@
+// @validateExhaustiveMemoizationDependencies
+
+function Component() {
+  const ref = useRef(null);
+  const onChange = useCallback(() => {
+    return ref.current.value;
+  }, [ref.current.value]);
+
+  return <input ref={ref} onChange={onChange} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps-disallow-unused-stable-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps-disallow-unused-stable-types.expect.md
new file mode 100644
index 00000000000..6c1bddae85f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps-disallow-unused-stable-types.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const x = useMemo(() => {
+    return [state];
+    // error: `setState` is a stable type, but not actually referenced
+  }, [state, setState]);
+
+  return 'oops';
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found extra memoization dependencies
+
+Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-exhaustive-deps-disallow-unused-stable-types.ts:11:13
+   9 |     return [state];
+  10 |     // error: `setState` is a stable type, but not actually referenced
+> 11 |   }, [state, setState]);
+     |              ^^^^^^^^ Unnecessary dependency `setState`
+  12 |
+  13 |   return 'oops';
+  14 | }
+
+Inferred dependencies: `[state]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps-disallow-unused-stable-types.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps-disallow-unused-stable-types.js
new file mode 100644
index 00000000000..2bb03c36611
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps-disallow-unused-stable-types.js
@@ -0,0 +1,14 @@
+// @validateExhaustiveMemoizationDependencies
+
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const x = useMemo(() => {
+    return [state];
+    // error: `setState` is a stable type, but not actually referenced
+  }, [state, setState]);
+
+  return 'oops';
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md
new file mode 100644
index 00000000000..2c864f56aff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md
@@ -0,0 +1,162 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component({x, y, z}) {
+  const a = useMemo(() => {
+    return x?.y.z?.a;
+    // error: too precise
+  }, [x?.y.z?.a.b]);
+  const b = useMemo(() => {
+    return x.y.z?.a;
+    // ok, not our job to type check nullability
+  }, [x.y.z.a]);
+  const c = useMemo(() => {
+    return x?.y.z.a?.b;
+    // error: too precise
+  }, [x?.y.z.a?.b.z]);
+  const d = useMemo(() => {
+    return x?.y?.[(console.log(y), z?.b)];
+    // ok
+  }, [x?.y, y, z?.b]);
+  const e = useMemo(() => {
+    const e = [];
+    e.push(x);
+    return e;
+    // ok
+  }, [x]);
+  const f = useMemo(() => {
+    return [];
+    // error: unnecessary
+  }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref = z ? ref1 : ref2;
+  const cb = useMemo(() => {
+    return () => {
+      return ref.current;
+    };
+    // error: ref is a stable type but reactive
+  }, []);
+  return <Stringify results={[a, b, c, d, e, f, cb]} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 4 errors:
+
+Error: Found missing/extra memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI. Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-exhaustive-deps.ts:7:11
+   5 | function Component({x, y, z}) {
+   6 |   const a = useMemo(() => {
+>  7 |     return x?.y.z?.a;
+     |            ^^^^^^^^^ Missing dependency `x?.y.z?.a`
+   8 |     // error: too precise
+   9 |   }, [x?.y.z?.a.b]);
+  10 |   const b = useMemo(() => {
+
+error.invalid-exhaustive-deps.ts:9:6
+   7 |     return x?.y.z?.a;
+   8 |     // error: too precise
+>  9 |   }, [x?.y.z?.a.b]);
+     |       ^^^^^^^^^^^ Overly precise dependency `x?.y.z?.a.b`, use `x?.y.z?.a` instead
+  10 |   const b = useMemo(() => {
+  11 |     return x.y.z?.a;
+  12 |     // ok, not our job to type check nullability
+
+Inferred dependencies: `[x?.y.z?.a]`
+
+Error: Found missing/extra memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI. Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-exhaustive-deps.ts:15:11
+  13 |   }, [x.y.z.a]);
+  14 |   const c = useMemo(() => {
+> 15 |     return x?.y.z.a?.b;
+     |            ^^^^^^^^^^^ Missing dependency `x?.y.z.a?.b`
+  16 |     // error: too precise
+  17 |   }, [x?.y.z.a?.b.z]);
+  18 |   const d = useMemo(() => {
+
+error.invalid-exhaustive-deps.ts:17:6
+  15 |     return x?.y.z.a?.b;
+  16 |     // error: too precise
+> 17 |   }, [x?.y.z.a?.b.z]);
+     |       ^^^^^^^^^^^^^ Overly precise dependency `x?.y.z.a?.b.z`, use `x?.y.z.a?.b` instead
+  18 |   const d = useMemo(() => {
+  19 |     return x?.y?.[(console.log(y), z?.b)];
+  20 |     // ok
+
+Inferred dependencies: `[x?.y.z.a?.b]`
+
+Error: Found extra memoization dependencies
+
+Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-exhaustive-deps.ts:31:6
+  29 |     return [];
+  30 |     // error: unnecessary
+> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+     |       ^ Unnecessary dependency `x`
+  32 |   const ref1 = useRef(null);
+  33 |   const ref2 = useRef(null);
+  34 |   const ref = z ? ref1 : ref2;
+
+error.invalid-exhaustive-deps.ts:31:9
+  29 |     return [];
+  30 |     // error: unnecessary
+> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+     |          ^^^ Unnecessary dependency `y.z`
+  32 |   const ref1 = useRef(null);
+  33 |   const ref2 = useRef(null);
+  34 |   const ref = z ? ref1 : ref2;
+
+error.invalid-exhaustive-deps.ts:31:14
+  29 |     return [];
+  30 |     // error: unnecessary
+> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+     |               ^^^^^^^ Unnecessary dependency `z?.y?.a`
+  32 |   const ref1 = useRef(null);
+  33 |   const ref2 = useRef(null);
+  34 |   const ref = z ? ref1 : ref2;
+
+error.invalid-exhaustive-deps.ts:31:23
+  29 |     return [];
+  30 |     // error: unnecessary
+> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+     |                        ^^^^^^^^^^^^^ Unnecessary dependency `UNUSED_GLOBAL`. Values declared outside of a component/hook should not be listed as dependencies as the component will not re-render if they change
+  32 |   const ref1 = useRef(null);
+  33 |   const ref2 = useRef(null);
+  34 |   const ref = z ? ref1 : ref2;
+
+Inferred dependencies: `[]`
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-exhaustive-deps.ts:37:13
+  35 |   const cb = useMemo(() => {
+  36 |     return () => {
+> 37 |       return ref.current;
+     |              ^^^ Missing dependency `ref`. Refs, setState functions, and other "stable" values generally do not need to be added as dependencies, but this variable may change over time to point to different values
+  38 |     };
+  39 |     // error: ref is a stable type but reactive
+  40 |   }, []);
+
+Inferred dependencies: `[ref]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js
new file mode 100644
index 00000000000..c0f8d28837a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js
@@ -0,0 +1,42 @@
+// @validateExhaustiveMemoizationDependencies
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component({x, y, z}) {
+  const a = useMemo(() => {
+    return x?.y.z?.a;
+    // error: too precise
+  }, [x?.y.z?.a.b]);
+  const b = useMemo(() => {
+    return x.y.z?.a;
+    // ok, not our job to type check nullability
+  }, [x.y.z.a]);
+  const c = useMemo(() => {
+    return x?.y.z.a?.b;
+    // error: too precise
+  }, [x?.y.z.a?.b.z]);
+  const d = useMemo(() => {
+    return x?.y?.[(console.log(y), z?.b)];
+    // ok
+  }, [x?.y, y, z?.b]);
+  const e = useMemo(() => {
+    const e = [];
+    e.push(x);
+    return e;
+    // ok
+  }, [x]);
+  const f = useMemo(() => {
+    return [];
+    // error: unnecessary
+  }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref = z ? ref1 : ref2;
+  const cb = useMemo(() => {
+    return () => {
+      return ref.current;
+    };
+    // error: ref is a stable type but reactive
+  }, []);
+  return <Stringify results={[a, b, c, d, e, f, cb]} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-extra-only.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-extra-only.expect.md
new file mode 100644
index 00000000000..f9aac96434a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-extra-only.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveEffectDependencies:"extra-only"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // no error: missing dep not reported in extra-only mode
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // error: extra dep - y
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: extra dep - y (missing dep - z not reported)
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+
+  // error: extra dep - x.y
+  useEffect(() => {
+    log(x);
+  }, [x.y]);
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps-extra-only.ts:13:9
+  11 |   useEffect(() => {
+  12 |     log(x);
+> 13 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+  14 |
+  15 |   // error: extra dep - y (missing dep - z not reported)
+  16 |   useEffect(() => {
+
+Inferred dependencies: `[x]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps-extra-only.ts:18:9
+  16 |   useEffect(() => {
+  17 |     log(x, z);
+> 18 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+  19 |
+  20 |   // error: extra dep - x.y
+  21 |   useEffect(() => {
+
+Inferred dependencies: `[x, z]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps-extra-only.ts:23:6
+  21 |   useEffect(() => {
+  22 |     log(x);
+> 23 |   }, [x.y]);
+     |       ^^^ Overly precise dependency `x.y`, use `x` instead
+  24 | }
+  25 |
+
+Inferred dependencies: `[x]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-extra-only.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-extra-only.js
new file mode 100644
index 00000000000..fcdc4c1a75e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-extra-only.js
@@ -0,0 +1,24 @@
+// @validateExhaustiveEffectDependencies:"extra-only"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // no error: missing dep not reported in extra-only mode
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // error: extra dep - y
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: extra dep - y (missing dep - z not reported)
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+
+  // error: extra dep - x.y
+  useEffect(() => {
+    log(x);
+  }, [x.y]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-missing-only.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-missing-only.expect.md
new file mode 100644
index 00000000000..5a104f529ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-missing-only.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveEffectDependencies:"missing-only"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // error: missing dep - x
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // no error: extra dep not reported in missing-only mode
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: missing dep - z (extra dep - y not reported)
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+
+  // error: missing dep x
+  useEffect(() => {
+    log(x);
+  }, [x.y]);
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Found missing effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should.
+
+error.invalid-exhaustive-effect-deps-missing-only.ts:7:8
+   5 |   // error: missing dep - x
+   6 |   useEffect(() => {
+>  7 |     log(x);
+     |         ^ Missing dependency `x`
+   8 |   }, []);
+   9 |
+  10 |   // no error: extra dep not reported in missing-only mode
+
+Inferred dependencies: `[x]`
+
+Error: Found missing effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should.
+
+error.invalid-exhaustive-effect-deps-missing-only.ts:17:11
+  15 |   // error: missing dep - z (extra dep - y not reported)
+  16 |   useEffect(() => {
+> 17 |     log(x, z);
+     |            ^ Missing dependency `z`
+  18 |   }, [x, y]);
+  19 |
+  20 |   // error: missing dep x
+
+Inferred dependencies: `[x, z]`
+
+Error: Found missing effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should.
+
+error.invalid-exhaustive-effect-deps-missing-only.ts:22:8
+  20 |   // error: missing dep x
+  21 |   useEffect(() => {
+> 22 |     log(x);
+     |         ^ Missing dependency `x`
+  23 |   }, [x.y]);
+  24 | }
+  25 |
+
+Inferred dependencies: `[x]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-missing-only.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-missing-only.js
new file mode 100644
index 00000000000..7b333f97a85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps-missing-only.js
@@ -0,0 +1,24 @@
+// @validateExhaustiveEffectDependencies:"missing-only"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // error: missing dep - x
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // no error: extra dep not reported in missing-only mode
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: missing dep - z (extra dep - y not reported)
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+
+  // error: missing dep x
+  useEffect(() => {
+    log(x);
+  }, [x.y]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps.expect.md
new file mode 100644
index 00000000000..55dcd921a20
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps.expect.md
@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // error: missing dep - x
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // error: extra dep - y
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: missing dep - z; extra dep - y
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+
+  // error: missing dep x
+  useEffect(() => {
+    log(x);
+  }, [x.y]);
+}
+
+```
+
+
+## Error
+
+```
+Found 4 errors:
+
+Error: Found missing effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should.
+
+error.invalid-exhaustive-effect-deps.ts:7:8
+   5 |   // error: missing dep - x
+   6 |   useEffect(() => {
+>  7 |     log(x);
+     |         ^ Missing dependency `x`
+   8 |   }, []);
+   9 |
+  10 |   // error: extra dep - y
+
+Inferred dependencies: `[x]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps.ts:13:9
+  11 |   useEffect(() => {
+  12 |     log(x);
+> 13 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+  14 |
+  15 |   // error: missing dep - z; extra dep - y
+  16 |   useEffect(() => {
+
+Inferred dependencies: `[x]`
+
+Error: Found missing/extra effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should. Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps.ts:17:11
+  15 |   // error: missing dep - z; extra dep - y
+  16 |   useEffect(() => {
+> 17 |     log(x, z);
+     |            ^ Missing dependency `z`
+  18 |   }, [x, y]);
+  19 |
+  20 |   // error: missing dep x
+
+error.invalid-exhaustive-effect-deps.ts:18:9
+  16 |   useEffect(() => {
+  17 |     log(x, z);
+> 18 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+  19 |
+  20 |   // error: missing dep x
+  21 |   useEffect(() => {
+
+Inferred dependencies: `[x, z]`
+
+Error: Found missing/extra effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should. Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps.ts:22:8
+  20 |   // error: missing dep x
+  21 |   useEffect(() => {
+> 22 |     log(x);
+     |         ^ Missing dependency `x`
+  23 |   }, [x.y]);
+  24 | }
+  25 |
+
+error.invalid-exhaustive-effect-deps.ts:23:6
+  21 |   useEffect(() => {
+  22 |     log(x);
+> 23 |   }, [x.y]);
+     |       ^^^ Overly precise dependency `x.y`, use `x` instead
+  24 | }
+  25 |
+
+Inferred dependencies: `[x]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps.js
new file mode 100644
index 00000000000..e810fd3f7c8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-effect-deps.js
@@ -0,0 +1,24 @@
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // error: missing dep - x
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // error: extra dep - y
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: missing dep - z; extra dep - y
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+
+  // error: missing dep x
+  useEffect(() => {
+    log(x);
+  }, [x.y]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-inner-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-inner-function.expect.md
new file mode 100644
index 00000000000..2693d3bd05a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-inner-function.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {makeObject_Primitives} from 'shared-runtime';
+
+function useHook() {
+  const object = makeObject_Primitives();
+  const fn = useCallback(() => {
+    const g = () => {
+      return [object];
+    };
+    return g;
+  });
+  return fn;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-missing-nonreactive-dep-inner-function.ts:10:14
+   8 |   const fn = useCallback(() => {
+   9 |     const g = () => {
+> 10 |       return [object];
+     |               ^^^^^^ Missing dependency `object`
+  11 |     };
+  12 |     return g;
+  13 |   });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-inner-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-inner-function.js
new file mode 100644
index 00000000000..02ba7b84061
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-inner-function.js
@@ -0,0 +1,15 @@
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {makeObject_Primitives} from 'shared-runtime';
+
+function useHook() {
+  const object = makeObject_Primitives();
+  const fn = useCallback(() => {
+    const g = () => {
+      return [object];
+    };
+    return g;
+  });
+  return fn;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-unmemoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-unmemoized.expect.md
new file mode 100644
index 00000000000..bb991d17dad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-unmemoized.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {makeObject_Primitives, useIdentity} from 'shared-runtime';
+
+function useHook() {
+  // object is non-reactive but not memoized bc the mutation surrounds a hook
+  const object = makeObject_Primitives();
+  useIdentity();
+  object.x = 0;
+  const array = useMemo(() => [object], []);
+  return array;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-missing-nonreactive-dep-unmemoized.ts:11:31
+   9 |   useIdentity();
+  10 |   object.x = 0;
+> 11 |   const array = useMemo(() => [object], []);
+     |                                ^^^^^^ Missing dependency `object`
+  12 |   return array;
+  13 | }
+  14 |
+
+Inferred dependencies: `[object]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-unmemoized.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-unmemoized.js
new file mode 100644
index 00000000000..c790ce1daee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep-unmemoized.js
@@ -0,0 +1,13 @@
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {makeObject_Primitives, useIdentity} from 'shared-runtime';
+
+function useHook() {
+  // object is non-reactive but not memoized bc the mutation surrounds a hook
+  const object = makeObject_Primitives();
+  useIdentity();
+  object.x = 0;
+  const array = useMemo(() => [object], []);
+  return array;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep.expect.md
new file mode 100644
index 00000000000..1bd8e1ba56f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {makeObject_Primitives} from 'shared-runtime';
+
+function useHook() {
+  const object = makeObject_Primitives();
+  const array = useMemo(() => [object], []);
+  return array;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-missing-nonreactive-dep.ts:8:31
+   6 | function useHook() {
+   7 |   const object = makeObject_Primitives();
+>  8 |   const array = useMemo(() => [object], []);
+     |                                ^^^^^^ Missing dependency `object`
+   9 |   return array;
+  10 | }
+  11 |
+
+Inferred dependencies: `[object]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep.js
new file mode 100644
index 00000000000..bfc81d9dd5b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-missing-nonreactive-dep.js
@@ -0,0 +1,10 @@
+// @validateExhaustiveMemoizationDependencies
+
+import {useMemo} from 'react';
+import {makeObject_Primitives} from 'shared-runtime';
+
+function useHook() {
+  const object = makeObject_Primitives();
+  const array = useMemo(() => [object], []);
+  return array;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.sketchy-code-exhaustive-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.sketchy-code-exhaustive-deps.expect.md
new file mode 100644
index 00000000000..70be9d35d78
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.sketchy-code-exhaustive-deps.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+
+// @validateExhaustiveMemoizationDependencies
+function Component() {
+  const item = [];
+  const foo = useCallback(
+    () => {
+      arrayPush(item, 1);
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return <Button foo={foo} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.sketchy-code-exhaustive-deps.ts:8:16
+   6 |   const foo = useCallback(
+   7 |     () => {
+>  8 |       arrayPush(item, 1);
+     |                 ^^^^ Missing dependency `item`
+   9 |     }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  10 |     []
+  11 |   );
+
+Inferred dependencies: `[item]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.sketchy-code-exhaustive-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.sketchy-code-exhaustive-deps.js
new file mode 100644
index 00000000000..3739c0cc841
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.sketchy-code-exhaustive-deps.js
@@ -0,0 +1,14 @@
+import {arrayPush} from 'shared-runtime';
+
+// @validateExhaustiveMemoizationDependencies
+function Component() {
+  const item = [];
+  const foo = useCallback(
+    () => {
+      arrayPush(item, 1);
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return <Button foo={foo} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-constant-folded-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-constant-folded-values.expect.md
new file mode 100644
index 00000000000..bda2b035625
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-constant-folded-values.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+
+function Component() {
+  const x = 0;
+  const y = useMemo(() => {
+    return [x];
+    // x gets constant-folded but shouldn't count as extraneous,
+    // it was referenced in the memo block
+  }, [x]);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies
+
+function Component() {
+  const $ = _c(1);
+  const x = 0;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [0];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const y = t0;
+  return y;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-constant-folded-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-constant-folded-values.js
new file mode 100644
index 00000000000..6ee141cb3ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-constant-folded-values.js
@@ -0,0 +1,11 @@
+// @validateExhaustiveMemoizationDependencies
+
+function Component() {
+  const x = 0;
+  const y = useMemo(() => {
+    return [x];
+    // x gets constant-folded but shouldn't count as extraneous,
+    // it was referenced in the memo block
+  }, [x]);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.expect.md
new file mode 100644
index 00000000000..a5b500ddcf5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.expect.md
@@ -0,0 +1,148 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies @validateExhaustiveEffectDependencies:"all"
+import {
+  useCallback,
+  useTransition,
+  useState,
+  useOptimistic,
+  useActionState,
+  useRef,
+  useReducer,
+  useEffect,
+} from 'react';
+
+function useFoo() {
+  const [s, setState] = useState();
+  const ref = useRef(null);
+  const [t, startTransition] = useTransition();
+  const [u, addOptimistic] = useOptimistic();
+  const [v, dispatch] = useReducer(() => {}, null);
+  const [isPending, dispatchAction] = useActionState(() => {}, null);
+
+  useEffect(() => {
+    dispatch();
+    startTransition(() => {});
+    addOptimistic();
+    setState(null);
+    dispatchAction();
+    ref.current = true;
+  }, [
+    // intentionally adding unnecessary deps on nonreactive stable values
+    // to check that they're allowed
+    dispatch,
+    startTransition,
+    addOptimistic,
+    setState,
+    dispatchAction,
+    ref,
+  ]);
+
+  return useCallback(() => {
+    dispatch();
+    startTransition(() => {});
+    addOptimistic();
+    setState(null);
+    dispatchAction();
+    ref.current = true;
+  }, [
+    // intentionally adding unnecessary deps on nonreactive stable values
+    // to check that they're allowed
+    dispatch,
+    startTransition,
+    addOptimistic,
+    setState,
+    dispatchAction,
+    ref,
+  ]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies @validateExhaustiveEffectDependencies:"all"
+import {
+  useCallback,
+  useTransition,
+  useState,
+  useOptimistic,
+  useActionState,
+  useRef,
+  useReducer,
+  useEffect,
+} from "react";
+
+function useFoo() {
+  const $ = _c(3);
+  const [, setState] = useState();
+  const ref = useRef(null);
+  const [, startTransition] = useTransition();
+  const [, addOptimistic] = useOptimistic();
+  const [, dispatch] = useReducer(_temp, null);
+  const [, dispatchAction] = useActionState(_temp2, null);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      dispatch();
+      startTransition(_temp3);
+      addOptimistic();
+      setState(null);
+      dispatchAction();
+      ref.current = true;
+    };
+    t1 = [
+      dispatch,
+      startTransition,
+      addOptimistic,
+      setState,
+      dispatchAction,
+      ref,
+    ];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      dispatch();
+      startTransition(_temp4);
+      addOptimistic();
+      setState(null);
+      dispatchAction();
+      ref.current = true;
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+function _temp4() {}
+function _temp3() {}
+function _temp2() {}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
+logs: ['An optimistic state update occurred outside a transition or action. To fix, move the update to an action, or wrap with startTransition.']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.js
new file mode 100644
index 00000000000..75ea6edbb34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.js
@@ -0,0 +1,61 @@
+// @validateExhaustiveMemoizationDependencies @validateExhaustiveEffectDependencies:"all"
+import {
+  useCallback,
+  useTransition,
+  useState,
+  useOptimistic,
+  useActionState,
+  useRef,
+  useReducer,
+  useEffect,
+} from 'react';
+
+function useFoo() {
+  const [s, setState] = useState();
+  const ref = useRef(null);
+  const [t, startTransition] = useTransition();
+  const [u, addOptimistic] = useOptimistic();
+  const [v, dispatch] = useReducer(() => {}, null);
+  const [isPending, dispatchAction] = useActionState(() => {}, null);
+
+  useEffect(() => {
+    dispatch();
+    startTransition(() => {});
+    addOptimistic();
+    setState(null);
+    dispatchAction();
+    ref.current = true;
+  }, [
+    // intentionally adding unnecessary deps on nonreactive stable values
+    // to check that they're allowed
+    dispatch,
+    startTransition,
+    addOptimistic,
+    setState,
+    dispatchAction,
+    ref,
+  ]);
+
+  return useCallback(() => {
+    dispatch();
+    startTransition(() => {});
+    addOptimistic();
+    setState(null);
+    dispatchAction();
+    ref.current = true;
+  }, [
+    // intentionally adding unnecessary deps on nonreactive stable values
+    // to check that they're allowed
+    dispatch,
+    startTransition,
+    addOptimistic,
+    setState,
+    dispatchAction,
+    ref,
+  ]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-effect-events.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-effect-events.expect.md
new file mode 100644
index 00000000000..a633db2d8da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-effect-events.expect.md
@@ -0,0 +1,104 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect, useEffectEvent} from 'react';
+
+function Component({x, y, z}) {
+  const effectEvent = useEffectEvent(() => {
+    log(x);
+  });
+
+  const effectEvent2 = useEffectEvent(z => {
+    log(y, z);
+  });
+
+  // ok - effectEvent not included in deps
+  useEffect(() => {
+    effectEvent();
+  }, []);
+
+  // ok - effectEvent2 not included in deps, z included
+  useEffect(() => {
+    effectEvent2(z);
+  }, [z]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveEffectDependencies:"all"
+import { useEffect, useEffectEvent } from "react";
+
+function Component(t0) {
+  const $ = _c(12);
+  const { x, y, z } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = () => {
+      log(x);
+    };
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const effectEvent = useEffectEvent(t1);
+  let t2;
+  if ($[2] !== y) {
+    t2 = (z_0) => {
+      log(y, z_0);
+    };
+    $[2] = y;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const effectEvent2 = useEffectEvent(t2);
+  let t3;
+  if ($[4] !== effectEvent) {
+    t3 = () => {
+      effectEvent();
+    };
+    $[4] = effectEvent;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = [];
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[7] !== effectEvent2 || $[8] !== z) {
+    t5 = () => {
+      effectEvent2(z);
+    };
+    $[7] = effectEvent2;
+    $[8] = z;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== z) {
+    t6 = [z];
+    $[10] = z;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  useEffect(t5, t6);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-effect-events.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-effect-events.js
new file mode 100644
index 00000000000..ef3853b6e4d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps-effect-events.js
@@ -0,0 +1,22 @@
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect, useEffectEvent} from 'react';
+
+function Component({x, y, z}) {
+  const effectEvent = useEffectEvent(() => {
+    log(x);
+  });
+
+  const effectEvent2 = useEffectEvent(z => {
+    log(y, z);
+  });
+
+  // ok - effectEvent not included in deps
+  useEffect(() => {
+    effectEvent();
+  }, []);
+
+  // ok - effectEvent2 not included in deps, z included
+  useEffect(() => {
+    effectEvent2(z);
+  }, [z]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps.expect.md
new file mode 100644
index 00000000000..70d8a3abbf6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps.expect.md
@@ -0,0 +1,201 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies
+import {useCallback, useMemo} from 'react';
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function useHook1(x) {
+  return useMemo(() => {
+    return x?.y.z?.a;
+  }, [x?.y.z?.a]);
+}
+function useHook2(x) {
+  useMemo(() => {
+    return x.y.z?.a;
+  }, [x.y.z?.a]);
+}
+function useHook3(x) {
+  return useMemo(() => {
+    return x?.y.z.a?.b;
+  }, [x?.y.z.a?.b]);
+}
+function useHook4(x, y, z) {
+  return useMemo(() => {
+    return x?.y?.[(console.log(y), z?.b)];
+  }, [x?.y, y, z?.b]);
+}
+function useHook5(x) {
+  return useMemo(() => {
+    const e = [];
+    const local = makeObject_Primitives(x);
+    const fn = () => {
+      e.push(local);
+    };
+    fn();
+    return e;
+  }, [x]);
+}
+function useHook6(x) {
+  return useMemo(() => {
+    const f = [];
+    f.push(x.y.z);
+    f.push(x.y);
+    f.push(x);
+    return f;
+  }, [x]);
+}
+
+function useHook7(x) {
+  const [state, setState] = useState(true);
+  const f = () => {
+    setState(x => !x);
+  };
+  return useCallback(() => {
+    f();
+  }, [f]);
+}
+
+function Component({x, y, z}) {
+  const a = useHook1(x);
+  const b = useHook2(x);
+  const c = useHook3(x);
+  const d = useHook4(x, y, z);
+  const e = useHook5(x);
+  const f = useHook6(x);
+  const g = useHook7(x);
+  return <Stringify results={[a, b, c, d, e, f, g]} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies
+import { useCallback, useMemo } from "react";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function useHook1(x) {
+  x?.y.z?.a;
+  return x?.y.z?.a;
+}
+
+function useHook2(x) {
+  x.y.z?.a;
+}
+
+function useHook3(x) {
+  x?.y.z.a?.b;
+  return x?.y.z.a?.b;
+}
+
+function useHook4(x, y, z) {
+  x?.y;
+  z?.b;
+  return x?.y?.[(console.log(y), z?.b)];
+}
+
+function useHook5(x) {
+  const $ = _c(2);
+  let e;
+  if ($[0] !== x) {
+    e = [];
+    const local = makeObject_Primitives(x);
+    const fn = () => {
+      e.push(local);
+    };
+
+    fn();
+    $[0] = x;
+    $[1] = e;
+  } else {
+    e = $[1];
+  }
+  return e;
+}
+
+function useHook6(x) {
+  const $ = _c(2);
+  let f;
+  if ($[0] !== x) {
+    f = [];
+    f.push(x.y.z);
+    f.push(x.y);
+    f.push(x);
+    $[0] = x;
+    $[1] = f;
+  } else {
+    f = $[1];
+  }
+  return f;
+}
+
+function useHook7(x) {
+  const $ = _c(2);
+  const [, setState] = useState(true);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const f = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      f();
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp(x_0) {
+  return !x_0;
+}
+
+function Component(t0) {
+  const $ = _c(8);
+  const { x, y, z } = t0;
+  const a = useHook1(x);
+  const b = useHook2(x);
+  const c = useHook3(x);
+  const d = useHook4(x, y, z);
+  const e = useHook5(x);
+  const f = useHook6(x);
+  const g = useHook7(x);
+  let t1;
+  if (
+    $[0] !== a ||
+    $[1] !== b ||
+    $[2] !== c ||
+    $[3] !== d ||
+    $[4] !== e ||
+    $[5] !== f ||
+    $[6] !== g
+  ) {
+    t1 = <Stringify results={[a, b, c, d, e, f, g]} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = d;
+    $[4] = e;
+    $[5] = f;
+    $[6] = g;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps.js
new file mode 100644
index 00000000000..38e730b0d21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/exhaustive-deps.js
@@ -0,0 +1,65 @@
+// @validateExhaustiveMemoizationDependencies
+import {useCallback, useMemo} from 'react';
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function useHook1(x) {
+  return useMemo(() => {
+    return x?.y.z?.a;
+  }, [x?.y.z?.a]);
+}
+function useHook2(x) {
+  useMemo(() => {
+    return x.y.z?.a;
+  }, [x.y.z?.a]);
+}
+function useHook3(x) {
+  return useMemo(() => {
+    return x?.y.z.a?.b;
+  }, [x?.y.z.a?.b]);
+}
+function useHook4(x, y, z) {
+  return useMemo(() => {
+    return x?.y?.[(console.log(y), z?.b)];
+  }, [x?.y, y, z?.b]);
+}
+function useHook5(x) {
+  return useMemo(() => {
+    const e = [];
+    const local = makeObject_Primitives(x);
+    const fn = () => {
+      e.push(local);
+    };
+    fn();
+    return e;
+  }, [x]);
+}
+function useHook6(x) {
+  return useMemo(() => {
+    const f = [];
+    f.push(x.y.z);
+    f.push(x.y);
+    f.push(x);
+    return f;
+  }, [x]);
+}
+
+function useHook7(x) {
+  const [state, setState] = useState(true);
+  const f = () => {
+    setState(x => !x);
+  };
+  return useCallback(() => {
+    f();
+  }, [f]);
+}
+
+function Component({x, y, z}) {
+  const a = useHook1(x);
+  const b = useHook2(x);
+  const c = useHook3(x);
+  const d = useHook4(x, y, z);
+  const e = useHook5(x);
+  const f = useHook6(x);
+  const g = useHook7(x);
+  return <Stringify results={[a, b, c, d, e, f, g]} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md
new file mode 100644
index 00000000000..4257f9b6047
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const [state] = useState(0);
+  // Test for conflicts with `c` import
+  const c = state;
+  const _c = c;
+  const __c = _c;
+  const c1 = __c;
+  const $c = c1;
+  const array = useMemo(() => [$c], [state]);
+  return <ValidateMemoization inputs={[state]} output={array} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c2 } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo, useState } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c2(7);
+  const [state] = useState(0);
+
+  const c = state;
+  const _c = c;
+  const __c = _c;
+  const c1 = __c;
+  const $c = c1;
+  let t0;
+  if ($[0] !== $c) {
+    t0 = [$c];
+    $[0] = $c;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const array = t0;
+  let t1;
+  if ($[2] !== state) {
+    t1 = [state];
+    $[2] = state;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== array || $[5] !== t1) {
+    t2 = <ValidateMemoization inputs={t1} output={array} />;
+    $[4] = array;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":[0]}</div>
+<div>{"inputs":[0],"output":[0]}</div>
+<div>{"inputs":[0],"output":[0]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js
new file mode 100644
index 00000000000..bcc2fba9788
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js
@@ -0,0 +1,21 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const [state] = useState(0);
+  // Test for conflicts with `c` import
+  const c = state;
+  const _c = c;
+  const __c = _c;
+  const c1 = __c;
+  const $c = c1;
+  const array = useMemo(() => [$c], [state]);
+  return <ValidateMemoization inputs={[state]} output={array} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment-dynamic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment-dynamic.expect.md
new file mode 100644
index 00000000000..1e315b66099
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment-dynamic.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function f(y) {
+  let x = y;
+  return x + (x = 2) + x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function f(y) {
+  let x = y;
+  return x + (x = 2) + 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment-dynamic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment-dynamic.js
new file mode 100644
index 00000000000..418e352deaa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment-dynamic.js
@@ -0,0 +1,10 @@
+function f(y) {
+  let x = y;
+  return x + (x = 2) + x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment.expect.md
new file mode 100644
index 00000000000..e2933a6165a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function f() {
+  let x = 1;
+  return x + (x = 2) + x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function f() {
+  return 5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment.js
new file mode 100644
index 00000000000..b64ad6cd450
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/expression-with-assignment.js
@@ -0,0 +1,10 @@
+function f() {
+  let x = 1;
+  return x + (x = 2) + x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/extend-scopes-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/extend-scopes-if.expect.md
new file mode 100644
index 00000000000..2cc97eac7f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/extend-scopes-if.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    if (b) {
+      if (c) {
+        x.push(0);
+      }
+    }
+  }
+  if (x.length) {
+    return x;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      if (b) {
+        if (c) {
+          x.push(0);
+        }
+      }
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+
+  if (x.length) {
+    return x;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/extend-scopes-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/extend-scopes-if.js
new file mode 100644
index 00000000000..b7179158365
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/extend-scopes-if.js
@@ -0,0 +1,20 @@
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    if (b) {
+      if (c) {
+        x.push(0);
+      }
+    }
+  }
+  if (x.length) {
+    return x;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.expect.md
new file mode 100644
index 00000000000..3c3b3e32d05
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.expect.md
@@ -0,0 +1,96 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+import {useEffect, useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+let pretendConst = 0;
+
+function unsafeResetConst() {
+  pretendConst = 0;
+}
+
+function unsafeUpdateConst() {
+  pretendConst += 1;
+}
+
+function Component() {
+  useState(() => {
+    // unsafe: reset the constant when first rendering the instance
+    unsafeResetConst();
+  });
+  // UNSAFE! changing a module variable that is read by a component is normally
+  // unsafe, but in this case we're simulating a fast refresh between each render
+  unsafeUpdateConst();
+
+  // In production mode (no @enableResetCacheOnSourceFileChanges) memo caches are not
+  // reset unless the deps change
+  const value = useMemo(() => [{pretendConst}], []);
+
+  return <ValidateMemoization inputs={[]} output={value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+import { useEffect, useMemo, useState } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+let pretendConst = 0;
+
+function unsafeResetConst() {
+  pretendConst = 0;
+}
+
+function unsafeUpdateConst() {
+  pretendConst += 1;
+}
+
+function Component() {
+  const $ = _c(2);
+  useState(_temp);
+
+  unsafeUpdateConst();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [{ pretendConst }];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const value = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <ValidateMemoization inputs={[]} output={value} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp() {
+  unsafeResetConst();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[],"output":[{"pretendConst":1}]}</div>
+<div>{"inputs":[],"output":[{"pretendConst":1}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.js
new file mode 100644
index 00000000000..f1d96b5635a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.js
@@ -0,0 +1,35 @@
+// @compilationMode:"infer"
+import {useEffect, useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+let pretendConst = 0;
+
+function unsafeResetConst() {
+  pretendConst = 0;
+}
+
+function unsafeUpdateConst() {
+  pretendConst += 1;
+}
+
+function Component() {
+  useState(() => {
+    // unsafe: reset the constant when first rendering the instance
+    unsafeResetConst();
+  });
+  // UNSAFE! changing a module variable that is read by a component is normally
+  // unsafe, but in this case we're simulating a fast refresh between each render
+  unsafeUpdateConst();
+
+  // In production mode (no @enableResetCacheOnSourceFileChanges) memo caches are not
+  // reset unless the deps change
+  const value = useMemo(() => [{pretendConst}], []);
+
+  return <ValidateMemoization inputs={[]} output={value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.expect.md
new file mode 100644
index 00000000000..301eee10da0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.expect.md
@@ -0,0 +1,104 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges @validateExhaustiveMemoizationDependencies:false
+import {useEffect, useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+let pretendConst = 0;
+
+function unsafeResetConst() {
+  pretendConst = 0;
+}
+
+function unsafeUpdateConst() {
+  pretendConst += 1;
+}
+
+function Component() {
+  useState(() => {
+    // unsafe: reset the constant when first rendering the instance
+    unsafeResetConst();
+  });
+  // UNSAFE! changing a module variable that is read by a component is normally
+  // unsafe, but in this case we're simulating a fast refresh between each render
+  unsafeUpdateConst();
+
+  // TODO: In fast refresh mode (@enableResetCacheOnSourceFileChanges) Forget should
+  // reset on changes to globals that impact the component/hook, effectively memoizing
+  // as if value was reactive. However, we don't want to actually treat globals as
+  // reactive (though that would be trivial) since it could change compilation too much
+  // btw dev and prod. Instead, we should reset the cache via a secondary mechanism.
+  const value = useMemo(() => [{pretendConst}], [pretendConst]);
+
+  return <ValidateMemoization inputs={[pretendConst]} output={value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enableResetCacheOnSourceFileChanges @validateExhaustiveMemoizationDependencies:false
+import { useEffect, useMemo, useState } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+let pretendConst = 0;
+
+function unsafeResetConst() {
+  pretendConst = 0;
+}
+
+function unsafeUpdateConst() {
+  pretendConst += 1;
+}
+
+function Component() {
+  const $ = _c(3);
+  if (
+    $[0] !== "36c02976ff5bc474b7510128ea8220ffe31d92cd5d245148ed0a43146d18ded4"
+  ) {
+    for (let $i = 0; $i < 3; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "36c02976ff5bc474b7510128ea8220ffe31d92cd5d245148ed0a43146d18ded4";
+  }
+  useState(_temp);
+
+  unsafeUpdateConst();
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [{ pretendConst }];
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const value = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <ValidateMemoization inputs={[pretendConst]} output={value} />;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp() {
+  unsafeResetConst();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.js
new file mode 100644
index 00000000000..c5fcdf146ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.js
@@ -0,0 +1,38 @@
+// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges @validateExhaustiveMemoizationDependencies:false
+import {useEffect, useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+let pretendConst = 0;
+
+function unsafeResetConst() {
+  pretendConst = 0;
+}
+
+function unsafeUpdateConst() {
+  pretendConst += 1;
+}
+
+function Component() {
+  useState(() => {
+    // unsafe: reset the constant when first rendering the instance
+    unsafeResetConst();
+  });
+  // UNSAFE! changing a module variable that is read by a component is normally
+  // unsafe, but in this case we're simulating a fast refresh between each render
+  unsafeUpdateConst();
+
+  // TODO: In fast refresh mode (@enableResetCacheOnSourceFileChanges) Forget should
+  // reset on changes to globals that impact the component/hook, effectively memoizing
+  // as if value was reactive. However, we don't want to actually treat globals as
+  // reactive (though that would be trivial) since it could change compilation too much
+  // btw dev and prod. Instead, we should reset the cache via a secondary mechanism.
+  const value = useMemo(() => [{pretendConst}], [pretendConst]);
+
+  return <ValidateMemoization inputs={[pretendConst]} output={value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-reloading.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-reloading.expect.md
new file mode 100644
index 00000000000..136c19e62d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-reloading.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+// @enableResetCacheOnSourceFileChanges
+import {useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const [state, setState] = useState(0);
+  const doubled = useMemo(() => [state * 2], [state]);
+  return <ValidateMemoization inputs={[state]} output={doubled} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableResetCacheOnSourceFileChanges
+import { useMemo, useState } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(8);
+  if (
+    $[0] !== "20945b0193e529df490847c66111b38d7b02485d5b53d0829ff3b23af87b105c"
+  ) {
+    for (let $i = 0; $i < 8; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "20945b0193e529df490847c66111b38d7b02485d5b53d0829ff3b23af87b105c";
+  }
+  const [state] = useState(0);
+  const t0 = state * 2;
+  let t1;
+  if ($[1] !== t0) {
+    t1 = [t0];
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const doubled = t1;
+  let t2;
+  if ($[3] !== state) {
+    t2 = [state];
+    $[3] = state;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== doubled || $[6] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={doubled} />;
+    $[5] = doubled;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":[0]}</div>
+<div>{"inputs":[0],"output":[0]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-reloading.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-reloading.js
new file mode 100644
index 00000000000..71993c0cf9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-reloading.js
@@ -0,0 +1,15 @@
+// @enableResetCacheOnSourceFileChanges
+import {useMemo, useState} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const [state, setState] = useState(0);
+  const doubled = useMemo(() => [state * 2], [state]);
+  return <ValidateMemoization inputs={[state]} output={doubled} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md
new file mode 100644
index 00000000000..f4a416a5036
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import fbt from 'fbt';
+
+/**
+ * Similar to error.todo-multiple-fbt-plural
+ *
+ * Evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>1 apple and 2 bananas</div>
+ *   Forget:
+ *   (kind: ok) <div>1 apples and 2 bananas</div>
+ */
+
+function useFoo({apples, bananas}) {
+  return fbt(
+    `${fbt.param('number of apples', apples)} ` +
+      fbt.plural('apple', apples) +
+      ` and ${fbt.param('number of bananas', bananas)} ` +
+      fbt.plural('banana', bananas),
+    'TestDescription',
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{apples: 1, bananas: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import fbt from "fbt";
+
+/**
+ * Similar to error.todo-multiple-fbt-plural
+ *
+ * Evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>1 apple and 2 bananas</div>
+ *   Forget:
+ *   (kind: ok) <div>1 apples and 2 bananas</div>
+ */
+
+function useFoo(t0) {
+  const $ = _c(3);
+  const { apples, bananas } = t0;
+  let t1;
+  if ($[0] !== apples || $[1] !== bananas) {
+    t1 = fbt._(
+      {
+        "*": {
+          "*": "{number of apples} apples and {number of bananas} bananas",
+        },
+        _1: { _1: "{number of apples} apple and {number of bananas} banana" },
+      },
+      [
+        fbt._plural(apples),
+        fbt._plural(bananas),
+        fbt._param("number of apples", apples),
+        fbt._param("number of bananas", bananas),
+      ],
+      { hk: "3vKunl" },
+    );
+    $[0] = apples;
+    $[1] = bananas;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ apples: 1, bananas: 2 }],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts
new file mode 100644
index 00000000000..4ce2caadb9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts
@@ -0,0 +1,28 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import fbt from 'fbt';
+
+/**
+ * Similar to error.todo-multiple-fbt-plural
+ *
+ * Evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>1 apple and 2 bananas</div>
+ *   Forget:
+ *   (kind: ok) <div>1 apples and 2 bananas</div>
+ */
+
+function useFoo({apples, bananas}) {
+  return fbt(
+    `${fbt.param('number of apples', apples)} ` +
+      fbt.plural('apple', apples) +
+      ` and ${fbt.param('number of bananas', bananas)} ` +
+      fbt.plural('banana', bananas),
+    'TestDescription',
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{apples: 1, bananas: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-mixed-call-tag.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-mixed-call-tag.expect.md
new file mode 100644
index 00000000000..21b0dd24868
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-mixed-call-tag.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+/**
+ * Similar to error.todo-multiple-fbt-plural, but note that we must
+ * count fbt plurals across both <fbt:plural /> namespaced jsx tags
+ * and fbt.plural(...) call expressions.
+ *
+ * Evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>1 apple and 2 bananas</div>
+ *   Forget:
+ *   (kind: ok) <div>1 apples and 2 bananas</div>
+ */
+function useFoo({apples, bananas}) {
+  return (
+    <div>
+      <fbt desc="Test Description">
+        {fbt.param('number of apples', apples)}
+        {'  '}
+        {fbt.plural('apple', apples)} and
+        {'  '}
+        <fbt:plural name={'number of bananas'} count={bananas} showCount="yes">
+          banana
+        </fbt:plural>
+      </fbt>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{apples: 1, bananas: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+/**
+ * Similar to error.todo-multiple-fbt-plural, but note that we must
+ * count fbt plurals across both <fbt:plural /> namespaced jsx tags
+ * and fbt.plural(...) call expressions.
+ *
+ * Evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>1 apple and 2 bananas</div>
+ *   Forget:
+ *   (kind: ok) <div>1 apples and 2 bananas</div>
+ */
+function useFoo(t0) {
+  const $ = _c(3);
+  const { apples, bananas } = t0;
+  let t1;
+  if ($[0] !== apples || $[1] !== bananas) {
+    t1 = (
+      <div>
+        {fbt._(
+          {
+            "*": {
+              "*": "{number of apples} apples and {number of bananas} bananas",
+            },
+            _1: { _1: "{number of apples} apple and 1 banana" },
+          },
+          [
+            fbt._plural(apples),
+            fbt._plural(bananas, "number of bananas"),
+            fbt._param("number of apples", apples),
+          ],
+          { hk: "2xXrUW" },
+        )}
+      </div>
+    );
+    $[0] = apples;
+    $[1] = bananas;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ apples: 1, bananas: 2 }],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-mixed-call-tag.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-mixed-call-tag.tsx
new file mode 100644
index 00000000000..fe18eeeb7b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-mixed-call-tag.tsx
@@ -0,0 +1,34 @@
+import fbt from 'fbt';
+
+/**
+ * Similar to error.todo-multiple-fbt-plural, but note that we must
+ * count fbt plurals across both <fbt:plural /> namespaced jsx tags
+ * and fbt.plural(...) call expressions.
+ *
+ * Evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>1 apple and 2 bananas</div>
+ *   Forget:
+ *   (kind: ok) <div>1 apples and 2 bananas</div>
+ */
+function useFoo({apples, bananas}) {
+  return (
+    <div>
+      <fbt desc="Test Description">
+        {fbt.param('number of apples', apples)}
+        {'  '}
+        {fbt.plural('apple', apples)} and
+        {'  '}
+        <fbt:plural name={'number of bananas'} count={bananas} showCount="yes">
+          banana
+        </fbt:plural>
+      </fbt>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{apples: 1, bananas: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.expect.md
new file mode 100644
index 00000000000..bb86d3bc42e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+/**
+ * Note that the fbt transform looks for callsites with a `fbt`-named callee.
+ * This is incompatible with react-compiler as we rename local variables in
+ * HIRBuilder + RenameVariables.
+ *
+ * See evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>Hello, Sathya!Goodbye, Sathya!</div>
+ *   Forget:
+ *   (kind: exception) fbt$0.param is not a function
+ */
+
+function Foo(props) {
+  const getText1 = fbt =>
+    fbt(
+      `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+      '(description) Greeting'
+    );
+
+  const getText2 = fbt =>
+    fbt(
+      `Goodbye, ${fbt.param('(key) name', identity(props.name))}!`,
+      '(description) Greeting2'
+    );
+
+  return (
+    <div>
+      {getText1(fbt)}
+      {getText2(fbt)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name: 'Sathya'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support local variables named `fbt`
+
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.
+
+error.todo-fbt-as-local.ts:18:19
+  16 |
+  17 | function Foo(props) {
+> 18 |   const getText1 = fbt =>
+     |                    ^^^ Rename to avoid conflict with fbt plugin
+  19 |     fbt(
+  20 |       `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+  21 |       '(description) Greeting'
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.js
new file mode 100644
index 00000000000..4c75c926557
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.js
@@ -0,0 +1,41 @@
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+/**
+ * Note that the fbt transform looks for callsites with a `fbt`-named callee.
+ * This is incompatible with react-compiler as we rename local variables in
+ * HIRBuilder + RenameVariables.
+ *
+ * See evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>Hello, Sathya!Goodbye, Sathya!</div>
+ *   Forget:
+ *   (kind: exception) fbt$0.param is not a function
+ */
+
+function Foo(props) {
+  const getText1 = fbt =>
+    fbt(
+      `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+      '(description) Greeting'
+    );
+
+  const getText2 = fbt =>
+    fbt(
+      `Goodbye, ${fbt.param('(key) name', identity(props.name))}!`,
+      '(description) Greeting2'
+    );
+
+  return (
+    <div>
+      {getText1(fbt)}
+      {getText2(fbt)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name: 'Sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.expect.md
new file mode 100644
index 00000000000..3999d17d515
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component({a, b}) {
+  return (
+    <fbt desc="Description">
+      <fbt:enum enum-range={['avalue1', 'avalue1']} value={a} />{' '}
+      <fbt:enum enum-range={['bvalue1', 'bvalue2']} value={b} />
+    </fbt>
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support duplicate fbt tags
+
+Support `<fbt>` tags with multiple `<fbt:enum>` values.
+
+error.todo-fbt-unknown-enum-value.ts:6:7
+  4 |   return (
+  5 |     <fbt desc="Description">
+> 6 |       <fbt:enum enum-range={['avalue1', 'avalue1']} value={a} />{' '}
+    |        ^^^^^^^^ Multiple `<fbt:enum>` tags found
+  7 |       <fbt:enum enum-range={['bvalue1', 'bvalue2']} value={b} />
+  8 |     </fbt>
+  9 |   );
+
+error.todo-fbt-unknown-enum-value.ts:7:7
+   5 |     <fbt desc="Description">
+   6 |       <fbt:enum enum-range={['avalue1', 'avalue1']} value={a} />{' '}
+>  7 |       <fbt:enum enum-range={['bvalue1', 'bvalue2']} value={b} />
+     |        ^^^^^^^^ Multiple `<fbt:enum>` tags found
+   8 |     </fbt>
+   9 |   );
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.js
new file mode 100644
index 00000000000..24d4ea8c0e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.js
@@ -0,0 +1,10 @@
+import fbt from 'fbt';
+
+function Component({a, b}) {
+  return (
+    <fbt desc="Description">
+      <fbt:enum enum-range={['avalue1', 'avalue1']} value={a} />{' '}
+      <fbt:enum enum-range={['bvalue1', 'bvalue2']} value={b} />
+    </fbt>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md
new file mode 100644
index 00000000000..62605e5896c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const fbt = require('fbt');
+
+  return <fbt desc="Description">{'Text'}</fbt>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support local variables named `fbt`
+
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.
+
+error.todo-locally-require-fbt.ts:2:8
+  1 | function Component(props) {
+> 2 |   const fbt = require('fbt');
+    |         ^^^ Rename to avoid conflict with fbt plugin
+  3 |
+  4 |   return <fbt desc="Description">{'Text'}</fbt>;
+  5 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.js
new file mode 100644
index 00000000000..78883f93858
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  const fbt = require('fbt');
+
+  return <fbt desc="Description">{'Text'}</fbt>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.expect.md
new file mode 100644
index 00000000000..275f0ef0670
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+/**
+ * Forget + fbt inconsistency. Evaluator errors with the following
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) 1 rewrite to Rust · 2 months traveling
+ *   Forget:
+ *   (kind: ok) 1 rewrites to Rust · 2 months traveling
+ *
+ * The root issue here is that fbt:plural/enum/pronoun read `.start` and `.end` from
+ * babel nodes to slice into source strings for some complex dedupe logic
+ * (see [_getStringVariationCombinations](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/JSFbtBuilder.js#L297))
+ *
+ *
+ * Since Forget does not add `.start` and `.end` for babel nodes it synthesizes,
+ * [getRawSource](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/FbtUtil.js#L666-L673)
+ * simply returns the whole source code string. As a result, all fbt nodes dedupe together
+ * and _getStringVariationCombinations ends up early exiting (before adding valid candidate values).
+ *
+ *
+ *
+ * For fbt:plural tags specifically, the `count` node require that a `.start/.end`
+ * (see [code in FbtPluralNode](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/fbt-nodes/FbtPluralNode.js#L87-L90))
+ */
+function Foo({rewrites, months}) {
+  return (
+    <fbt desc="Test fbt description">
+      <fbt:plural count={rewrites} name="number of rewrites" showCount="yes">
+        rewrite
+      </fbt:plural>
+      to Rust ·
+      <fbt:plural count={months} name="number of months" showCount="yes">
+        month
+      </fbt:plural>
+      traveling
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{rewrites: 1, months: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support duplicate fbt tags
+
+Support `<fbt>` tags with multiple `<fbt:plural>` values.
+
+error.todo-multiple-fbt-plural.ts:29:7
+  27 |   return (
+  28 |     <fbt desc="Test fbt description">
+> 29 |       <fbt:plural count={rewrites} name="number of rewrites" showCount="yes">
+     |        ^^^^^^^^^^ Multiple `<fbt:plural>` tags found
+  30 |         rewrite
+  31 |       </fbt:plural>
+  32 |       to Rust ·
+
+error.todo-multiple-fbt-plural.ts:33:7
+  31 |       </fbt:plural>
+  32 |       to Rust ·
+> 33 |       <fbt:plural count={months} name="number of months" showCount="yes">
+     |        ^^^^^^^^^^ Multiple `<fbt:plural>` tags found
+  34 |         month
+  35 |       </fbt:plural>
+  36 |       traveling
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.tsx
new file mode 100644
index 00000000000..ef86a4f6cb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.tsx
@@ -0,0 +1,44 @@
+import fbt from 'fbt';
+
+/**
+ * Forget + fbt inconsistency. Evaluator errors with the following
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) 1 rewrite to Rust · 2 months traveling
+ *   Forget:
+ *   (kind: ok) 1 rewrites to Rust · 2 months traveling
+ *
+ * The root issue here is that fbt:plural/enum/pronoun read `.start` and `.end` from
+ * babel nodes to slice into source strings for some complex dedupe logic
+ * (see [_getStringVariationCombinations](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/JSFbtBuilder.js#L297))
+ *
+ *
+ * Since Forget does not add `.start` and `.end` for babel nodes it synthesizes,
+ * [getRawSource](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/FbtUtil.js#L666-L673)
+ * simply returns the whole source code string. As a result, all fbt nodes dedupe together
+ * and _getStringVariationCombinations ends up early exiting (before adding valid candidate values).
+ *
+ *
+ *
+ * For fbt:plural tags specifically, the `count` node require that a `.start/.end`
+ * (see [code in FbtPluralNode](https://github.com/facebook/fbt/blob/main/packages/babel-plugin-fbt/src/fbt-nodes/FbtPluralNode.js#L87-L90))
+ */
+function Foo({rewrites, months}) {
+  return (
+    <fbt desc="Test fbt description">
+      <fbt:plural count={rewrites} name="number of rewrites" showCount="yes">
+        rewrite
+      </fbt:plural>
+      to Rust ·
+      <fbt:plural count={months} name="number of months" showCount="yes">
+        month
+      </fbt:plural>
+      traveling
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{rewrites: 1, months: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.expect.md
new file mode 100644
index 00000000000..3334d26ec3e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {fbs} from 'fbt';
+
+function Component(props) {
+  return (
+    <div
+      title={
+        <fbs desc={'Dialog to show to user'}>
+          Hello <fbs:param name="user name">{props.name}</fbs:param>
+        </fbs>
+      }>
+      Hover me
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { fbs } from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = (
+      <div
+        title={fbs._(
+          "Hello {user name}",
+          [fbs._param("user name", props.name)],
+          { hk: "2zEDKF" },
+        )}
+      >
+        Hover me
+      </div>
+    );
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div title="Hello Sathya">Hover me</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.js
new file mode 100644
index 00000000000..13e080c1068
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.js
@@ -0,0 +1,19 @@
+import {fbs} from 'fbt';
+
+function Component(props) {
+  return (
+    <div
+      title={
+        <fbs desc={'Dialog to show to user'}>
+          Hello <fbs:param name="user name">{props.name}</fbs:param>
+        </fbs>
+      }>
+      Hover me
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.expect.md
new file mode 100644
index 00000000000..f785260a463
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const text = fbt(
+    `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+    '(description) Greeting'
+  );
+  return <div>{text}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = fbt._(
+      "Hello, {(key) name}!",
+      [fbt._param("(key) name", identity(props.name))],
+      { hk: "2sOsn5" },
+    );
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const text = t0;
+  let t1;
+  if ($[2] !== text) {
+    t1 = <div>{text}</div>;
+    $[2] = text;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello, Sathya!</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.js
new file mode 100644
index 00000000000..0f660991786
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.js
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const text = fbt(
+    `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+    '(description) Greeting'
+  );
+  return <div>{text}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.expect.md
new file mode 100644
index 00000000000..b03288870db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  const text = fbt(
+    `${fbt.param('(key) count', props.count)} items`,
+    '(description) Number of items'
+  );
+  return <div>{text}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.count) {
+    t0 = fbt._(
+      "{(key) count} items",
+      [fbt._param("(key) count", props.count)],
+      { hk: "3yW91j" },
+    );
+    $[0] = props.count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const text = t0;
+  let t1;
+  if ($[2] !== text) {
+    t1 = <div>{text}</div>;
+    $[2] = text;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ count: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>2 items</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.js
new file mode 100644
index 00000000000..49c5e1a6511
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.js
@@ -0,0 +1,14 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  const text = fbt(
+    `${fbt.param('(key) count', props.count)} items`,
+    '(description) Number of items'
+  );
+  return <div>{text}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md
new file mode 100644
index 00000000000..862417e5b5b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text<fbt:param name="paramName">{value}</fbt:param>After text
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+const _ = fbt;
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = fbt._(
+      "Before text{paramName}After text",
+      [fbt._param("paramName", value)],
+      { hk: "aKEGX" },
+    );
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello world" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Before texthello worldAfter text
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.tsx
new file mode 100644
index 00000000000..a69888cb8bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.tsx
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text<fbt:param name="paramName">{value}</fbt:param>After text
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md
new file mode 100644
index 00000000000..96cea12a623
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <span>
+      <fbt desc="Title">
+        <fbt:plural count={identity(props.count)} name="count" showCount="yes">
+          vote
+        </fbt:plural>{' '}
+        for <fbt:param name="option"> {props.option}</fbt:param>
+      </fbt>
+      !
+    </span>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42, option: 'thing'}],
+  sequentialRenders: [
+    {count: 42, option: 'thing'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.count || $[1] !== props.option) {
+    let t1;
+    if ($[3] !== props.count) {
+      t1 = identity(props.count);
+      $[3] = props.count;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    t0 = (
+      <span>
+        {fbt._(
+          { "*": "{count} votes for {option}", _1: "1 vote for {option}" },
+          [
+            fbt._plural(t1, "count"),
+            fbt._param(
+              "option",
+
+              props.option,
+            ),
+          ],
+          { hk: "3Bg20a" },
+        )}
+        !
+      </span>
+    );
+    $[0] = props.count;
+    $[1] = props.option;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ count: 42, option: "thing" }],
+  sequentialRenders: [
+    { count: 42, option: "thing" },
+    { count: 42, option: "thing" },
+    { count: 1, option: "other" },
+    { count: 1, option: "other" },
+    { count: 42, option: "thing" },
+    { count: 1, option: "other" },
+    { count: 42, option: "thing" },
+    { count: 1, option: "other" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <span>42 votes for thing!</span>
+<span>42 votes for thing!</span>
+<span>1 vote for other!</span>
+<span>1 vote for other!</span>
+<span>42 votes for thing!</span>
+<span>1 vote for other!</span>
+<span>42 votes for thing!</span>
+<span>1 vote for other!</span>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.js
new file mode 100644
index 00000000000..55d9b4701e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.js
@@ -0,0 +1,31 @@
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <span>
+      <fbt desc="Title">
+        <fbt:plural count={identity(props.count)} name="count" showCount="yes">
+          vote
+        </fbt:plural>{' '}
+        for <fbt:param name="option"> {props.option}</fbt:param>
+      </fbt>
+      !
+    </span>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42, option: 'thing'}],
+  sequentialRenders: [
+    {count: 42, option: 'thing'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.expect.md
new file mode 100644
index 00000000000..f3d5e8ac6af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello{' '}
+      <fbt:param
+        name="a really long description
+      that got split into multiple lines">
+        {props.name}
+      </fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    const element = fbt._(
+      "Hello {a really long description that got split into multiple lines}",
+      [
+        fbt._param(
+          "a really long description that got split into multiple lines",
+          props.name,
+        ),
+      ],
+      { hk: "1euPUp" },
+    );
+    t0 = element.toString();
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "Hello Jason"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.js
new file mode 100644
index 00000000000..795fecfca4d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.js
@@ -0,0 +1,20 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello{' '}
+      <fbt:param
+        name="a really long description
+      that got split into multiple lines">
+        {props.name}
+      </fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.expect.md
new file mode 100644
index 00000000000..62366dc5141
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name='"user" name'>{props.name}</fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    const element = fbt._(
+      'Hello {"user" name}',
+      [fbt._param('"user" name', props.name)],
+      { hk: "S0vMe" },
+    );
+    t0 = element.toString();
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "Hello Jason"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.js
new file mode 100644
index 00000000000..beadeb94ce0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.js
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name='"user" name'>{props.name}</fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md
new file mode 100644
index 00000000000..e5f465df169
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <span>
+      <fbt desc="Title">
+        <fbt:plural count={identity(props.count)} name="count" showCount="yes">
+          vote
+        </fbt:plural>{' '}
+        for <fbt:param name="option">{props.option} </fbt:param>
+      </fbt>
+      !
+    </span>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42, option: 'thing'}],
+  sequentialRenders: [
+    {count: 42, option: 'thing'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.count || $[1] !== props.option) {
+    let t1;
+    if ($[3] !== props.count) {
+      t1 = identity(props.count);
+      $[3] = props.count;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    t0 = (
+      <span>
+        {fbt._(
+          { "*": "{count} votes for {option}", _1: "1 vote for {option}" },
+          [
+            fbt._plural(t1, "count"),
+            fbt._param(
+              "option",
+
+              props.option,
+            ),
+          ],
+          { hk: "3Bg20a" },
+        )}
+        !
+      </span>
+    );
+    $[0] = props.count;
+    $[1] = props.option;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ count: 42, option: "thing" }],
+  sequentialRenders: [
+    { count: 42, option: "thing" },
+    { count: 42, option: "thing" },
+    { count: 1, option: "other" },
+    { count: 1, option: "other" },
+    { count: 42, option: "thing" },
+    { count: 1, option: "other" },
+    { count: 42, option: "thing" },
+    { count: 1, option: "other" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <span>42 votes for thing!</span>
+<span>42 votes for thing!</span>
+<span>1 vote for other!</span>
+<span>1 vote for other!</span>
+<span>42 votes for thing!</span>
+<span>1 vote for other!</span>
+<span>42 votes for thing!</span>
+<span>1 vote for other!</span>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.js
new file mode 100644
index 00000000000..e1817ab0b1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.js
@@ -0,0 +1,31 @@
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <span>
+      <fbt desc="Title">
+        <fbt:plural count={identity(props.count)} name="count" showCount="yes">
+          vote
+        </fbt:plural>{' '}
+        for <fbt:param name="option">{props.option} </fbt:param>
+      </fbt>
+      !
+    </span>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{count: 42, option: 'thing'}],
+  sequentialRenders: [
+    {count: 42, option: 'thing'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+    {count: 42, option: 'thing'},
+    {count: 1, option: 'other'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.expect.md
new file mode 100644
index 00000000000..6c3a94509eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name="user name ☺">{props.name}</fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    const element = fbt._(
+      "Hello {user name ☺}",
+      [fbt._param("user name \u263A", props.name)],
+      { hk: "1En1lp" },
+    );
+    t0 = element.toString();
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "Hello Jason"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.js
new file mode 100644
index 00000000000..91fa8552d35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.js
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name="user name ☺">{props.name}</fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.expect.md
new file mode 100644
index 00000000000..37f57721a44
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  return (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name="user name">{capitalize(props.name)}</fbt:param>
+    </fbt>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = fbt._(
+      "Hello {user name}",
+      [fbt._param("user name", capitalize(props.name))],
+      { hk: "2zEDKF" },
+    );
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.js
new file mode 100644
index 00000000000..3baa8ec17ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.js
@@ -0,0 +1,9 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  return (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name="user name">{capitalize(props.name)}</fbt:param>
+    </fbt>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params.expect.md
new file mode 100644
index 00000000000..610932fd4bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  return (
+    <div>
+      <fbt desc={'Dialog to show to user'}>
+        Hello <fbt:param name="user name">{props.name}</fbt:param>
+      </fbt>
+      <fbt desc={'Available actions|response'}>
+        <fbt:param name="actions|response">{props.actions}</fbt:param>
+      </fbt>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = fbt._("Hello {user name}", [fbt._param("user name", props.name)], {
+      hk: "2zEDKF",
+    });
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== props.actions) {
+    t1 = fbt._(
+      "{actions|response}",
+      [fbt._param("actions|response", props.actions)],
+      { hk: "1cjfbg" },
+    );
+    $[2] = props.actions;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== t0 || $[5] !== t1) {
+    t2 = (
+      <div>
+        {t0}
+        {t1}
+      </div>
+    );
+    $[4] = t0;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params.js
new file mode 100644
index 00000000000..91a52a32e2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params.js
@@ -0,0 +1,20 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  return (
+    <div>
+      <fbt desc={'Dialog to show to user'}>
+        Hello <fbt:param name="user name">{props.name}</fbt:param>
+      </fbt>
+      <fbt desc={'Available actions|response'}>
+        <fbt:param name="actions|response">{props.actions}</fbt:param>
+      </fbt>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-jsxtext.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-jsxtext.expect.md
new file mode 100644
index 00000000000..4b39a6d237d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-jsxtext.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Foo(props) {
+  return (
+    <fbt desc="Some text to be translated">
+      <fbt:enum
+        enum-range={{'0': 'hello', '1': 'goodbye'}}
+        value={props.value ? '0' : '1'}
+      />{' '}
+      <fbt:param name="value">{props.value}</fbt:param>
+      {', '}
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 1}],
+  sequentialRenders: [{value: 1}, {value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Foo(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = fbt._(
+      { "0": "hello {value},", "1": "goodbye {value}," },
+      [
+        fbt._enum(props.value ? "0" : "1", { "0": "hello", "1": "goodbye" }),
+        fbt._param(
+          "value",
+
+          props.value,
+        ),
+      ],
+      { hk: "Ri5kJ" },
+    );
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ value: 1 }],
+  sequentialRenders: [{ value: 1 }, { value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) hello 1,
+goodbye 0,
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-jsxtext.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-jsxtext.js
new file mode 100644
index 00000000000..7080753c4db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-jsxtext.js
@@ -0,0 +1,20 @@
+import fbt from 'fbt';
+
+function Foo(props) {
+  return (
+    <fbt desc="Some text to be translated">
+      <fbt:enum
+        enum-range={{'0': 'hello', '1': 'goodbye'}}
+        value={props.value ? '0' : '1'}
+      />{' '}
+      <fbt:param name="value">{props.value}</fbt:param>
+      {', '}
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 1}],
+  sequentialRenders: [{value: 1}, {value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.expect.md
new file mode 100644
index 00000000000..702a9fd8eab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+/**
+ * Note that fbt whitespace rules apply to the entire fbt subtree,
+ * not just direct children of fbt elements.
+ * (e.g. here, the JSXText children of the span element also use
+ * fbt whitespace rules)
+ */
+
+function Foo(props) {
+  return (
+    <fbt desc={'Dialog to show to user'}>
+      <span key={props.name}>
+        <fbt:param name="user name really long description for prettier">
+          {props.name}
+        </fbt:param>
+        !
+      </span>
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+/**
+ * Note that fbt whitespace rules apply to the entire fbt subtree,
+ * not just direct children of fbt elements.
+ * (e.g. here, the JSXText children of the span element also use
+ * fbt whitespace rules)
+ */
+
+function Foo(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = fbt._(
+      "{=m0}",
+      [
+        fbt._implicitParam(
+          "=m0",
+          <span key={props.name}>
+            {fbt._(
+              "{user name really long description for prettier} !",
+              [
+                fbt._param(
+                  "user name really long description for prettier",
+
+                  props.name,
+                ),
+              ],
+              { hk: "rdgIJ" },
+            )}
+          </span>,
+        ),
+      ],
+      { hk: "32Ufy5" },
+    );
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <span>Jason !</span>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.tsx
new file mode 100644
index 00000000000..d6aa512b9a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.tsx
@@ -0,0 +1,26 @@
+import fbt from 'fbt';
+
+/**
+ * Note that fbt whitespace rules apply to the entire fbt subtree,
+ * not just direct children of fbt elements.
+ * (e.g. here, the JSXText children of the span element also use
+ * fbt whitespace rules)
+ */
+
+function Foo(props) {
+  return (
+    <fbt desc={'Dialog to show to user'}>
+      <span key={props.name}>
+        <fbt:param name="user name really long description for prettier">
+          {props.name}
+        </fbt:param>
+        !
+      </span>
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md
new file mode 100644
index 00000000000..c421ccbe810
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Foo({name1, name2}) {
+  return (
+    <fbt desc="Text that is displayed when two people accepts the user's pull request.">
+      <fbt:param name="user1">
+        <span key={name1}>
+          <b>{name1}</b>
+        </span>
+      </fbt:param>
+      and
+      <fbt:param name="user2">
+        <span key={name2}>
+          <b>{name2}</b>
+        </span>
+      </fbt:param>
+      accepted your PR!
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name1: 'Mike', name2: 'Jan'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Foo(t0) {
+  const $ = _c(13);
+  const { name1, name2 } = t0;
+  let t1;
+  if ($[0] !== name1 || $[1] !== name2) {
+    let t2;
+    if ($[3] !== name1) {
+      t2 = <b>{name1}</b>;
+      $[3] = name1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== name1 || $[6] !== t2) {
+      t3 = <span key={name1}>{t2}</span>;
+      $[5] = name1;
+      $[6] = t2;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== name2) {
+      t4 = <b>{name2}</b>;
+      $[8] = name2;
+      $[9] = t4;
+    } else {
+      t4 = $[9];
+    }
+    let t5;
+    if ($[10] !== name2 || $[11] !== t4) {
+      t5 = <span key={name2}>{t4}</span>;
+      $[10] = name2;
+      $[11] = t4;
+      $[12] = t5;
+    } else {
+      t5 = $[12];
+    }
+    t1 = fbt._(
+      "{user1} and {user2} accepted your PR!",
+      [fbt._param("user1", t3), fbt._param("user2", t5)],
+      { hk: "2PxMie" },
+    );
+    $[0] = name1;
+    $[1] = name2;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ name1: "Mike", name2: "Jan" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <span><b>Mike</b></span> and <span><b>Jan</b></span> accepted your PR!
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.tsx
new file mode 100644
index 00000000000..5662455b3ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.tsx
@@ -0,0 +1,25 @@
+import fbt from 'fbt';
+
+function Foo({name1, name2}) {
+  return (
+    <fbt desc="Text that is displayed when two people accepts the user's pull request.">
+      <fbt:param name="user1">
+        <span key={name1}>
+          <b>{name1}</b>
+        </span>
+      </fbt:param>
+      and
+      <fbt:param name="user2">
+        <span key={name2}>
+          <b>{name2}</b>
+        </span>
+      </fbt:param>
+      accepted your PR!
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name1: 'Mike', name2: 'Jan'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md
new file mode 100644
index 00000000000..1af75896847
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text
+      <fbt:param name="paramName">{value}</fbt:param>
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+const _ = fbt;
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = fbt._(
+      "Before text {paramName}",
+      [
+        fbt._param(
+          "paramName",
+
+          value,
+        ),
+      ],
+      { hk: "3z5SVE" },
+    );
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello world" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Before text hello world
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.tsx
new file mode 100644
index 00000000000..88ba27d0112
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.tsx
@@ -0,0 +1,16 @@
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text
+      <fbt:param name="paramName">{value}</fbt:param>
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-repro-invalid-mutable-range-destructured-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-repro-invalid-mutable-range-destructured-prop.expect.md
new file mode 100644
index 00000000000..4f81700bbb0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-repro-invalid-mutable-range-destructured-prop.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+import {fbt} from 'fbt';
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({data}) {
+  const el = useMemo(
+    () => (
+      <fbt desc="user name">
+        <fbt:param name="name">{data.name ?? ''}</fbt:param>
+      </fbt>
+    ),
+    [data.name]
+  );
+  return <ValidateMemoization inputs={[data.name]} output={el} />;
+}
+
+const props1 = {data: {name: 'Mike'}};
+const props2 = {data: {name: 'Mofei'}};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [props1],
+  sequentialRenders: [props1, props2, props2, props1, {...props1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { fbt } from "fbt";
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { data } = t0;
+  let t1;
+  if ($[0] !== data.name) {
+    t1 = fbt._("{name}", [fbt._param("name", data.name ?? "")], {
+      hk: "csQUH",
+    });
+    $[0] = data.name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const el = t1;
+  let t2;
+  if ($[2] !== data.name) {
+    t2 = [data.name];
+    $[2] = data.name;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== el || $[5] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={el} />;
+    $[4] = el;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+const props1 = { data: { name: "Mike" } };
+const props2 = { data: { name: "Mofei" } };
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [props1],
+  sequentialRenders: [props1, props2, props2, props1, { ...props1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":["Mike"],"output":"Mike"}</div>
+<div>{"inputs":["Mofei"],"output":"Mofei"}</div>
+<div>{"inputs":["Mofei"],"output":"Mofei"}</div>
+<div>{"inputs":["Mike"],"output":"Mike"}</div>
+<div>{"inputs":["Mike"],"output":"Mike"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-repro-invalid-mutable-range-destructured-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-repro-invalid-mutable-range-destructured-prop.js
new file mode 100644
index 00000000000..a948755bb67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-repro-invalid-mutable-range-destructured-prop.js
@@ -0,0 +1,23 @@
+import {fbt} from 'fbt';
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({data}) {
+  const el = useMemo(
+    () => (
+      <fbt desc="user name">
+        <fbt:param name="name">{data.name ?? ''}</fbt:param>
+      </fbt>
+    ),
+    [data.name]
+  );
+  return <ValidateMemoization inputs={[data.name]} output={el} />;
+}
+
+const props1 = {data: {name: 'Mike'}};
+const props2 = {data: {name: 'Mofei'}};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [props1],
+  sequentialRenders: [props1, props2, props2, props1, {...props1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md
new file mode 100644
index 00000000000..c23c485cde4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text <fbt:param name="paramName">{value}</fbt:param> after text
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+const _ = fbt;
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = fbt._(
+      "Before text {paramName} after text",
+      [fbt._param("paramName", value)],
+      { hk: "26pxNm" },
+    );
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello world" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Before text hello world after text
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.tsx
new file mode 100644
index 00000000000..6d79118ddd4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.tsx
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text <fbt:param name="paramName">{value}</fbt:param> after text
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-template-string-same-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-template-string-same-scope.expect.md
new file mode 100644
index 00000000000..f35e4708298
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-template-string-same-scope.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {Stringify} from 'shared-runtime';
+
+export function Component(props) {
+  let count = 0;
+  if (props.items) {
+    count = props.items.length;
+  }
+  return (
+    <Stringify>
+      {fbt(
+        `for ${fbt.param('count', count)} experiences`,
+        `Label for the number of items`,
+        {project: 'public'}
+      )}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [1, 2, 3]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { Stringify } from "shared-runtime";
+
+export function Component(props) {
+  const $ = _c(4);
+  let count = 0;
+  if (props.items) {
+    count = props.items.length;
+  }
+  let t0;
+  if ($[0] !== count) {
+    t0 = fbt._("for {count} experiences", [fbt._param("count", count)], {
+      hk: "nmYpm",
+    });
+    $[0] = count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = <Stringify>{t0}</Stringify>;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [1, 2, 3] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":"for 3 experiences"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-template-string-same-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-template-string-same-scope.js
new file mode 100644
index 00000000000..381ac434151
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-template-string-same-scope.js
@@ -0,0 +1,23 @@
+import fbt from 'fbt';
+import {Stringify} from 'shared-runtime';
+
+export function Component(props) {
+  let count = 0;
+  if (props.items) {
+    count = props.items.length;
+  }
+  return (
+    <Stringify>
+      {fbt(
+        `for ${fbt.param('count', count)} experiences`,
+        `Label for the number of items`,
+        {project: 'public'}
+      )}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [1, 2, 3]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md
new file mode 100644
index 00000000000..9ad917e6f78
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name="user name">{props.name}</fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    const element = fbt._(
+      "Hello {user name}",
+      [fbt._param("user name", props.name)],
+      { hk: "2zEDKF" },
+    );
+    t0 = element.toString();
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "Hello Jason"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.js
new file mode 100644
index 00000000000..d80e6e39959
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.js
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  const element = (
+    <fbt desc={'Dialog to show to user'}>
+      Hello <fbt:param name="user name">{props.name}</fbt:param>
+    </fbt>
+  );
+  return element.toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md
new file mode 100644
index 00000000000..420f3de7d40
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text <fbt:param name="paramName"> {value} </fbt:param> after text
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+const _ = fbt;
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = fbt._(
+      "Before text {paramName} after text",
+      [fbt._param("paramName", value)],
+      { hk: "26pxNm" },
+    );
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello world" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Before text hello world after text
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.tsx
new file mode 100644
index 00000000000..51fdcc9eb05
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.tsx
@@ -0,0 +1,15 @@
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text <fbt:param name="paramName"> {value} </fbt:param> after text
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md
new file mode 100644
index 00000000000..1b060dacfeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text <fbt:param name="paramName">{value}</fbt:param> after text
+      more text and more and more and more and more and more and more and more
+      and more and blah blah blah blah
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+const _ = fbt;
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = fbt._(
+      "Before text {paramName} after text more text and more and more and more and more and more and more and more and more and blah blah blah blah",
+      [fbt._param("paramName", value)],
+      { hk: "24ZPpO" },
+    );
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello world" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Before text hello world after text more text and more and more and more and more and more and more and more and more and blah blah blah blah
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.tsx
new file mode 100644
index 00000000000..6beaa012f8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.tsx
@@ -0,0 +1,17 @@
+import fbt from 'fbt';
+
+const _ = fbt;
+function Component({value}: {value: string}) {
+  return (
+    <fbt desc="descdesc">
+      Before text <fbt:param name="paramName">{value}</fbt:param> after text
+      more text and more and more and more and more and more and more and more
+      and more and blah blah blah blah
+    </fbt>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello world'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-text-must-use-expression-container.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-text-must-use-expression-container.expect.md
new file mode 100644
index 00000000000..eb021353999
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-text-must-use-expression-container.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component(props) {
+  return (
+    <Foo
+      value={
+        <fbt desc="Description of the parameter">
+          <fbt:param name="value">{'0'}</fbt:param>%
+        </fbt>
+      }
+    />
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Foo
+        value={fbt._("{value}%", [fbt._param("value", "0")], { hk: "10F5Cc" })}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-text-must-use-expression-container.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-text-must-use-expression-container.js
new file mode 100644
index 00000000000..e38e2f1c0cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-text-must-use-expression-container.js
@@ -0,0 +1,13 @@
+import fbt from 'fbt';
+
+function Component(props) {
+  return (
+    <Foo
+      value={
+        <fbt desc="Description of the parameter">
+          <fbt:param name="value">{'0'}</fbt:param>%
+        </fbt>
+      }
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md
new file mode 100644
index 00000000000..66141f7f8d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+
+function Component({name, data, icon}) {
+  return (
+    <Text type="body4">
+      <fbt desc="Lorem ipsum">
+        <fbt:param name="item author">
+          <Text type="h4">{name}</Text>
+        </fbt:param>
+        <fbt:param name="icon">{icon}</fbt:param>
+        <Text type="h4">
+          <fbt:param name="item details">{data}</fbt:param>
+        </Text>
+      </fbt>
+    </Text>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+
+function Component(t0) {
+  const $ = _c(6);
+  const { name, data, icon } = t0;
+  let t1;
+  if ($[0] !== data || $[1] !== icon || $[2] !== name) {
+    let t2;
+    if ($[4] !== name) {
+      t2 = <Text type="h4">{name}</Text>;
+      $[4] = name;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    t1 = (
+      <Text type="body4">
+        {fbt._(
+          "{item author}{icon}{=m2}",
+          [
+            fbt._param("item author", t2),
+            fbt._param(
+              "icon",
+
+              icon,
+            ),
+            fbt._implicitParam(
+              "=m2",
+              <Text type="h4">
+                {fbt._("{item details}", [fbt._param("item details", data)], {
+                  hk: "4jLfVq",
+                })}
+              </Text>,
+            ),
+          ],
+          { hk: "2HLm2j" },
+        )}
+      </Text>
+    );
+    $[0] = data;
+    $[1] = icon;
+    $[2] = name;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.js
new file mode 100644
index 00000000000..1a9b4313c56
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.js
@@ -0,0 +1,17 @@
+import fbt from 'fbt';
+
+function Component({name, data, icon}) {
+  return (
+    <Text type="body4">
+      <fbt desc="Lorem ipsum">
+        <fbt:param name="item author">
+          <Text type="h4">{name}</Text>
+        </fbt:param>
+        <fbt:param name="icon">{icon}</fbt:param>
+        <Text type="h4">
+          <fbt:param name="item details">{data}</fbt:param>
+        </Text>
+      </fbt>
+    </Text>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md
new file mode 100644
index 00000000000..c9a43bb075e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <Foo
+      value={
+        <fbt desc="Description of the parameter">
+          <fbt:param name="value">{<>{identity(props.text)}</>}</fbt:param>%
+        </fbt>
+      }
+    />
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.text) {
+    const t1 = identity(props.text);
+    let t2;
+    if ($[2] !== t1) {
+      t2 = <>{t1}</>;
+      $[2] = t1;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    t0 = (
+      <Foo
+        value={fbt._("{value}%", [fbt._param("value", t2)], { hk: "10F5Cc" })}
+      />
+    );
+    $[0] = props.text;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.js
new file mode 100644
index 00000000000..f911189ba13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.js
@@ -0,0 +1,14 @@
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <Foo
+      value={
+        <fbt desc="Description of the parameter">
+          <fbt:param name="value">{<>{identity(props.text)}</>}</fbt:param>%
+        </fbt>
+      }
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md
new file mode 100644
index 00000000000..b5bf4f96587
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+import {fbt} from 'fbt';
+
+function Component() {
+  const buttonLabel = () => {
+    if (!someCondition) {
+      return <fbt desc="My label">{'Purchase as a gift'}</fbt>;
+    } else if (
+      !iconOnly &&
+      showPrice &&
+      item?.current_gift_offer?.price?.formatted != null
+    ) {
+      return (
+        <fbt desc="Gift button's label">
+          {'Gift | '}
+          <fbt:param name="price">
+            {item?.current_gift_offer?.price?.formatted}
+          </fbt:param>
+        </fbt>
+      );
+    } else if (!iconOnly && !showPrice) {
+      return <fbt desc="Gift button's label">{'Gift'}</fbt>;
+    }
+  };
+
+  return (
+    <View>
+      <Button text={buttonLabel()} />
+    </View>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { fbt } from "fbt";
+
+function Component() {
+  const $ = _c(1);
+  const buttonLabel = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <View>
+        <Button text={buttonLabel()} />
+      </View>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  if (!someCondition) {
+    return fbt._("Purchase as a gift", null, { hk: "1gHj4g" });
+  } else {
+    if (
+      !iconOnly &&
+      showPrice &&
+      item?.current_gift_offer?.price?.formatted != null
+    ) {
+      return fbt._(
+        "Gift | {price}",
+        [fbt._param("price", item?.current_gift_offer?.price?.formatted)],
+        { hk: "3GTnGE" },
+      );
+    } else {
+      if (!iconOnly && !showPrice) {
+        return fbt._("Gift", null, { hk: "3fqfrk" });
+      }
+    }
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.js
new file mode 100644
index 00000000000..4c326183bde
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.js
@@ -0,0 +1,30 @@
+import {fbt} from 'fbt';
+
+function Component() {
+  const buttonLabel = () => {
+    if (!someCondition) {
+      return <fbt desc="My label">{'Purchase as a gift'}</fbt>;
+    } else if (
+      !iconOnly &&
+      showPrice &&
+      item?.current_gift_offer?.price?.formatted != null
+    ) {
+      return (
+        <fbt desc="Gift button's label">
+          {'Gift | '}
+          <fbt:param name="price">
+            {item?.current_gift_offer?.price?.formatted}
+          </fbt:param>
+        </fbt>
+      );
+    } else if (!iconOnly && !showPrice) {
+      return <fbt desc="Gift button's label">{'Gift'}</fbt>;
+    }
+  };
+
+  return (
+    <View>
+      <Button text={buttonLabel()} />
+    </View>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md
new file mode 100644
index 00000000000..93a9b869f67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+// @flow
+import {fbt} from 'fbt';
+
+function Example({x}) {
+  // "Inner Text" needs to be visible to fbt: the <Bar> element cannot
+  // be memoized separately
+  return (
+    <fbt desc="Description">
+      Outer Text
+      <Foo key="b" x={x}>
+        <Bar key="a">Inner Text</Bar>
+      </Foo>
+    </fbt>
+  );
+}
+
+function Foo({x, children}) {
+  'use no memo';
+  return (
+    <>
+      <div>{x}</div>
+      <span>{children}</span>
+    </>
+  );
+}
+
+function Bar({children}) {
+  'use no memo';
+  return children;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{x: 'Hello'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { fbt } from "fbt";
+
+function Example(t0) {
+  const $ = _c(2);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x) {
+    t1 = fbt._(
+      "Outer Text {=m1}",
+      [
+        fbt._implicitParam(
+          "=m1",
+
+          <Foo key="b" x={x}>
+            {fbt._(
+              "{=m1}",
+              [
+                fbt._implicitParam(
+                  "=m1",
+                  <Bar key="a">
+                    {fbt._("Inner Text", null, { hk: "32YB0l" })}
+                  </Bar>,
+                ),
+              ],
+              { hk: "23dJsI" },
+            )}
+          </Foo>,
+        ),
+      ],
+      { hk: "2RVA7V" },
+    );
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function Foo({ x, children }) {
+  "use no memo";
+  return (
+    <>
+      <div>{x}</div>
+      <span>{children}</span>
+    </>
+  );
+}
+
+function Bar({ children }) {
+  "use no memo";
+  return children;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ x: "Hello" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Outer Text <div>Hello</div><span>Inner Text</span>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js
new file mode 100644
index 00000000000..f89289fb039
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js
@@ -0,0 +1,35 @@
+// @flow
+import {fbt} from 'fbt';
+
+function Example({x}) {
+  // "Inner Text" needs to be visible to fbt: the <Bar> element cannot
+  // be memoized separately
+  return (
+    <fbt desc="Description">
+      Outer Text
+      <Foo key="b" x={x}>
+        <Bar key="a">Inner Text</Bar>
+      </Foo>
+    </fbt>
+  );
+}
+
+function Foo({x, children}) {
+  'use no memo';
+  return (
+    <>
+      <div>{x}</div>
+      <span>{children}</span>
+    </>
+  );
+}
+
+function Bar({children}) {
+  'use no memo';
+  return children;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{x: 'Hello'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md
new file mode 100644
index 00000000000..10a2a9ae131
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md
@@ -0,0 +1,128 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {Stringify, identity} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component({firstname, lastname}) {
+  'use memo';
+  return (
+    <div>
+      {fbt(
+        [
+          'Name: ',
+          fbt.param('firstname', <Stringify key={0} name={firstname} />),
+          ', ',
+          fbt.param(
+            'lastname',
+            identity(
+              fbt(
+                '(inner)' +
+                  fbt.param('lastname', <Stringify key={1} name={lastname} />),
+                'Inner fbt value'
+              )
+            )
+          ),
+        ],
+        'Name'
+      )}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstname: 'first', lastname: 'last'}],
+  sequentialRenders: [{firstname: 'first', lastname: 'last'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { Stringify, identity } from "shared-runtime";
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component(t0) {
+  "use memo";
+  const $ = _c(9);
+  const { firstname, lastname } = t0;
+  let t1;
+  if ($[0] !== firstname || $[1] !== lastname) {
+    let t2;
+    if ($[3] !== firstname) {
+      t2 = <Stringify key={0} name={firstname} />;
+      $[3] = firstname;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== lastname) {
+      t3 = <Stringify key={1} name={lastname} />;
+      $[5] = lastname;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    t1 = fbt._(
+      "Name: {firstname}, {lastname}",
+      [
+        fbt._param("firstname", t2),
+        fbt._param(
+          "lastname",
+          identity(
+            fbt._("(inner){lastname}", [fbt._param("lastname", t3)], {
+              hk: "1Kdxyo",
+            }),
+          ),
+        ),
+      ],
+      { hk: "3AiIf8" },
+    );
+    $[0] = firstname;
+    $[1] = lastname;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[7] !== t1) {
+    t2 = <div>{t1}</div>;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ firstname: "first", lastname: "last" }],
+  sequentialRenders: [{ firstname: "first", lastname: "last" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Name: <div>{"name":"first"}</div>, (inner)<div>{"name":"last"}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js
new file mode 100644
index 00000000000..07efb4e03a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js
@@ -0,0 +1,42 @@
+import fbt from 'fbt';
+import {Stringify, identity} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component({firstname, lastname}) {
+  'use memo';
+  return (
+    <div>
+      {fbt(
+        [
+          'Name: ',
+          fbt.param('firstname', <Stringify key={0} name={firstname} />),
+          ', ',
+          fbt.param(
+            'lastname',
+            identity(
+              fbt(
+                '(inner)' +
+                  fbt.param('lastname', <Stringify key={1} name={lastname} />),
+                'Inner fbt value'
+              )
+            )
+          ),
+        ],
+        'Name'
+      )}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstname: 'first', lastname: 'last'}],
+  sequentialRenders: [{firstname: 'first', lastname: 'last'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md
new file mode 100644
index 00000000000..063e45e04e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md
@@ -0,0 +1,124 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component({firstname, lastname}) {
+  'use memo';
+  return (
+    <div>
+      {fbt(
+        [
+          'Name: ',
+          fbt.param('firstname', identity(firstname)),
+          ', ',
+          fbt.param(
+            'lastname',
+            identity(
+              fbt(
+                '(inner)' + fbt.param('lastname', identity(lastname)),
+                'Inner fbt value'
+              )
+            )
+          ),
+        ],
+        'Name'
+      )}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstname: 'first', lastname: 'last'}],
+  sequentialRenders: [{firstname: 'first', lastname: 'last'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { identity } from "shared-runtime";
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component(t0) {
+  "use memo";
+  const $ = _c(5);
+  const { firstname, lastname } = t0;
+  let t1;
+  if ($[0] !== firstname || $[1] !== lastname) {
+    t1 = fbt._(
+      "Name: {firstname}, {lastname}",
+      [
+        fbt._param(
+          "firstname",
+
+          identity(firstname),
+        ),
+        fbt._param(
+          "lastname",
+
+          identity(
+            fbt._(
+              "(inner){lastname}",
+              [
+                fbt._param(
+                  "lastname",
+
+                  identity(lastname),
+                ),
+              ],
+              { hk: "1Kdxyo" },
+            ),
+          ),
+        ),
+      ],
+      { hk: "3AiIf8" },
+    );
+    $[0] = firstname;
+    $[1] = lastname;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t1) {
+    t2 = <div>{t1}</div>;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ firstname: "first", lastname: "last" }],
+  sequentialRenders: [{ firstname: "first", lastname: "last" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Name: first, (inner)last</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js
new file mode 100644
index 00000000000..38465a62804
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js
@@ -0,0 +1,41 @@
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperands needs to account for nested fbt calls.
+ * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error:
+ *   /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier
+ *   ---
+ *   t3
+ *   ---
+ */
+function Component({firstname, lastname}) {
+  'use memo';
+  return (
+    <div>
+      {fbt(
+        [
+          'Name: ',
+          fbt.param('firstname', identity(firstname)),
+          ', ',
+          fbt.param(
+            'lastname',
+            identity(
+              fbt(
+                '(inner)' + fbt.param('lastname', identity(lastname)),
+                'Inner fbt value'
+              )
+            )
+          ),
+        ],
+        'Name'
+      )}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstname: 'first', lastname: 'last'}],
+  sequentialRenders: [{firstname: 'first', lastname: 'last'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-macro-property-not-handled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-macro-property-not-handled.expect.md
new file mode 100644
index 00000000000..a06b283d044
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-macro-property-not-handled.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperandsInSameScope should also track PropertyLoads (e.g. fbt.plural).
+ * This doesn't seem to be an issue for fbt, but affects other internal macros invoked as
+ * `importSpecifier.funcName` (see https://fburl.com/code/72icxwmn)
+ */
+function useFoo({items}: {items: Array<number>}) {
+  return fbt(
+    'There ' +
+      fbt.plural('is', useIdentity([...items]).length, {many: 'are'}) +
+      ' ' +
+      fbt.param('number of items', items.length) +
+      ' items',
+    'Error content when there are unsupported locales.',
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{items: [2, 3]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { useIdentity } from "shared-runtime";
+
+/**
+ * MemoizeFbtAndMacroOperandsInSameScope should also track PropertyLoads (e.g. fbt.plural).
+ * This doesn't seem to be an issue for fbt, but affects other internal macros invoked as
+ * `importSpecifier.funcName` (see https://fburl.com/code/72icxwmn)
+ */
+function useFoo(t0) {
+  const $ = _c(2);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = [...items];
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return fbt._(
+    {
+      "*": "There are {number of items} items",
+      _1: "There is {number of items} items",
+    },
+    [
+      fbt._plural(useIdentity(t1).length),
+      fbt._param(
+        "number of items",
+
+        items.length,
+      ),
+    ],
+    { hk: "xsa7w" },
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ items: [2, 3] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) There are 2 items
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-macro-property-not-handled.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-macro-property-not-handled.tsx
new file mode 100644
index 00000000000..6847159a85d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-macro-property-not-handled.tsx
@@ -0,0 +1,23 @@
+import fbt from 'fbt';
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * MemoizeFbtAndMacroOperandsInSameScope should also track PropertyLoads (e.g. fbt.plural).
+ * This doesn't seem to be an issue for fbt, but affects other internal macros invoked as
+ * `importSpecifier.funcName` (see https://fburl.com/code/72icxwmn)
+ */
+function useFoo({items}: {items: Array<number>}) {
+  return fbt(
+    'There ' +
+      fbt.plural('is', useIdentity([...items]).length, {many: 'are'}) +
+      ' ' +
+      fbt.param('number of items', items.length) +
+      ' items',
+    'Error content when there are unsupported locales.',
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{items: [2, 3]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md
new file mode 100644
index 00000000000..b8d3ba638ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {fbt} from 'fbt';
+import {useState} from 'react';
+
+const MIN = 10;
+
+function Component() {
+  const [count, setCount] = useState(0);
+
+  return fbt(
+    'Expected at least ' +
+      fbt.param('min', MIN, {number: true}) +
+      ' items, but got ' +
+      fbt.param('count', count, {number: true}) +
+      ' items.',
+    'Error description'
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { fbt } from "fbt";
+import { useState } from "react";
+
+const MIN = 10;
+
+function Component() {
+  const $ = _c(2);
+  const [count] = useState(0);
+  let t0;
+  if ($[0] !== count) {
+    t0 = fbt._(
+      { "*": { "*": "Expected at least {min} items, but got {count} items." } },
+      [
+        fbt._param(
+          "min",
+
+          MIN,
+          [0],
+        ),
+        fbt._param(
+          "count",
+
+          count,
+          [0],
+        ),
+      ],
+      { hk: "36gbz8" },
+    );
+    $[0] = count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Expected at least 10 items, but got 0 items.
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js
new file mode 100644
index 00000000000..cacd332534b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js
@@ -0,0 +1,22 @@
+import {fbt} from 'fbt';
+import {useState} from 'react';
+
+const MIN = 10;
+
+function Component() {
+  const [count, setCount] = useState(0);
+
+  return fbt(
+    'Expected at least ' +
+      fbt.param('min', MIN, {number: true}) +
+      ' items, but got ' +
+      fbt.param('count', count, {number: true}) +
+      ' items.',
+    'Error description'
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flag-enable-emit-hook-guards.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flag-enable-emit-hook-guards.expect.md
new file mode 100644
index 00000000000..714cd931ae8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flag-enable-emit-hook-guards.expect.md
@@ -0,0 +1,126 @@
+
+## Input
+
+```javascript
+// @enableEmitHookGuards
+import {createContext, useContext, useEffect, useState} from 'react';
+import {
+  CONST_STRING0,
+  ObjectWithHooks,
+  getNumber,
+  identity,
+  print,
+} from 'shared-runtime';
+
+const MyContext = createContext('my context value');
+function Component({value}) {
+  print(identity(CONST_STRING0));
+  const [state, setState] = useState(getNumber());
+  print(value, state);
+  useEffect(() => {
+    if (state === 4) {
+      setState(5);
+    }
+  }, [state]);
+  print(identity(value + state));
+  return ObjectWithHooks.useIdentity(useContext(MyContext));
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  args: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { $dispatcherGuard } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableEmitHookGuards
+import { createContext, useContext, useEffect, useState } from "react";
+import {
+  CONST_STRING0,
+  ObjectWithHooks,
+  getNumber,
+  identity,
+  print,
+} from "shared-runtime";
+
+const MyContext = createContext("my context value");
+function Component(t0) {
+  const $ = _c(4);
+  try {
+    $dispatcherGuard(0);
+    const { value } = t0;
+    print(identity(CONST_STRING0));
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = getNumber();
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    const [state, setState] = (function () {
+      try {
+        $dispatcherGuard(2);
+        return useState(t1);
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+    print(value, state);
+    let t2;
+    let t3;
+    if ($[1] !== state) {
+      t2 = () => {
+        if (state === 4) {
+          setState(5);
+        }
+      };
+      t3 = [state];
+      $[1] = state;
+      $[2] = t2;
+      $[3] = t3;
+    } else {
+      t2 = $[2];
+      t3 = $[3];
+    }
+    (function () {
+      try {
+        $dispatcherGuard(2);
+        return useEffect(t2, t3);
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+    print(identity(value + state));
+    return (function () {
+      try {
+        $dispatcherGuard(2);
+        return ObjectWithHooks.useIdentity(
+          (function () {
+            try {
+              $dispatcherGuard(2);
+              return useContext(MyContext);
+            } finally {
+              $dispatcherGuard(3);
+            }
+          })(),
+        );
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+  } finally {
+    $dispatcherGuard(1);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  args: [{ value: 0 }],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flag-enable-emit-hook-guards.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flag-enable-emit-hook-guards.ts
new file mode 100644
index 00000000000..63be7ad4c62
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flag-enable-emit-hook-guards.ts
@@ -0,0 +1,28 @@
+// @enableEmitHookGuards
+import {createContext, useContext, useEffect, useState} from 'react';
+import {
+  CONST_STRING0,
+  ObjectWithHooks,
+  getNumber,
+  identity,
+  print,
+} from 'shared-runtime';
+
+const MyContext = createContext('my context value');
+function Component({value}) {
+  print(identity(CONST_STRING0));
+  const [state, setState] = useState(getNumber());
+  print(value, state);
+  useEffect(() => {
+    if (state === 4) {
+      setState(5);
+    }
+  }, [state]);
+  print(identity(value + state));
+  return ObjectWithHooks.useIdentity(useContext(MyContext));
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  args: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flatten-scopes-with-methodcall-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flatten-scopes-with-methodcall-hook.expect.md
new file mode 100644
index 00000000000..35c2f6ae21e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flatten-scopes-with-methodcall-hook.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+const {ObjectWithHooks} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  const [y] = ObjectWithHooks.useMakeArray();
+  x.push(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+const { ObjectWithHooks } = require("shared-runtime");
+
+function Component(props) {
+  const x = [];
+  const [y] = ObjectWithHooks.useMakeArray();
+  x.push(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flatten-scopes-with-methodcall-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flatten-scopes-with-methodcall-hook.js
new file mode 100644
index 00000000000..75c94eeba9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flatten-scopes-with-methodcall-hook.js
@@ -0,0 +1,13 @@
+const {ObjectWithHooks} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  const [y] = ObjectWithHooks.useMakeArray();
+  x.push(y);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.expect.md
new file mode 100644
index 00000000000..dfbf4fbfd93
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @flow
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  enum Bool {
+    True = "true",
+    False = "false",
+  }
+
+  let bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  let t0;
+  if ($[0] !== bool) {
+    t0 = <div>{bool}</div>;
+    $[0] = bool;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: true }],
+};
+
+```
+      
+### Eval output
+(kind: exception) Bool is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.js
new file mode 100644
index 00000000000..42708c19e0c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/flow-enum-inline.js
@@ -0,0 +1,18 @@
+// @flow
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update-with-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update-with-continue.expect.md
new file mode 100644
index 00000000000..ed690241f39
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update-with-continue.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  for (let i = 0; i < props.count; ) {
+    x += i;
+    i += 1;
+    continue;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x = 0;
+  for (let i = 0; i < props.count; ) {
+    x = x + i;
+    i = i + 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update-with-continue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update-with-continue.js
new file mode 100644
index 00000000000..501f953e9b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update-with-continue.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  let x = 0;
+  for (let i = 0; i < props.count; ) {
+    x += i;
+    i += 1;
+    continue;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update.expect.md
new file mode 100644
index 00000000000..61a91178759
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  for (let i = 0; i < props.count; ) {
+    x += i;
+    if (x > 10) {
+      break;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x = 0;
+  for (const i = 0; 0 < props.count; ) {
+    x = x + 0;
+    if (x > 10) {
+      break;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update.js
new file mode 100644
index 00000000000..f506449be81
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-empty-update.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  let x = 0;
+  for (let i = 0; i < props.count; ) {
+    x += i;
+    if (x > 10) {
+      break;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-body-always-returns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-body-always-returns.expect.md
new file mode 100644
index 00000000000..ace051e251e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-body-always-returns.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  for (const x in props.value) {
+    return x;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'A!'}}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  for (const x in props.value) {
+    return x;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { a: "A!" } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "a"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-body-always-returns.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-body-always-returns.js
new file mode 100644
index 00000000000..b88ed2ca13d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-body-always-returns.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  for (const x in props.value) {
+    return x;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'A!'}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-break.expect.md
new file mode 100644
index 00000000000..f3b6a76e524
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-break.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  const object = {...props.value};
+  for (const y in object) {
+    if (y === 'break') {
+      break;
+    }
+    x = object[y];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  // should return 'a'
+  params: [{a: 'a', break: null, c: 'C!'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = { ...props.value };
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const object = t0;
+  for (const y in object) {
+    if (y === "break") {
+      break;
+    }
+
+    x = object[y];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  // should return 'a'
+  params: [{ a: "a", break: null, c: "C!" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-break.js
new file mode 100644
index 00000000000..fa1c38c4579
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-break.js
@@ -0,0 +1,17 @@
+function Component(props) {
+  let x;
+  const object = {...props.value};
+  for (const y in object) {
+    if (y === 'break') {
+      break;
+    }
+    x = object[y];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  // should return 'a'
+  params: [{a: 'a', break: null, c: 'C!'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-continue.expect.md
new file mode 100644
index 00000000000..09c89aef18c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-continue.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  const object = {...props.value};
+  for (const y in object) {
+    if (y === 'continue') {
+      continue;
+    }
+    x = object[y];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'a', continue: 'skip', b: 'hello!'}}],
+  sequentialRenders: [
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'skip!', continue: true}},
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'skip!', continue: true}},
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'skip!', continue: true}},
+    {value: {a: 'skip!', continue: true}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = { ...props.value };
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const object = t0;
+  for (const y in object) {
+    if (y === "continue") {
+      continue;
+    }
+
+    x = object[y];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { a: "a", continue: "skip", b: "hello!" } }],
+  sequentialRenders: [
+    { value: { a: "a", continue: "skip", b: "hello!" } },
+    { value: { a: "a", continue: "skip", b: "hello!" } },
+    { value: { a: "skip!", continue: true } },
+    { value: { a: "a", continue: "skip", b: "hello!" } },
+    { value: { a: "skip!", continue: true } },
+    { value: { a: "a", continue: "skip", b: "hello!" } },
+    { value: { a: "skip!", continue: true } },
+    { value: { a: "skip!", continue: true } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "hello!"
+"hello!"
+"skip!"
+"hello!"
+"skip!"
+"hello!"
+"skip!"
+"skip!"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-continue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-continue.js
new file mode 100644
index 00000000000..b67e6b2b5b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-continue.js
@@ -0,0 +1,26 @@
+function Component(props) {
+  let x;
+  const object = {...props.value};
+  for (const y in object) {
+    if (y === 'continue') {
+      continue;
+    }
+    x = object[y];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'a', continue: 'skip', b: 'hello!'}}],
+  sequentialRenders: [
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'skip!', continue: true}},
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'skip!', continue: true}},
+    {value: {a: 'a', continue: 'skip', b: 'hello!'}},
+    {value: {a: 'skip!', continue: true}},
+    {value: {a: 'skip!', continue: true}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-empty-body.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-empty-body.expect.md
new file mode 100644
index 00000000000..760c9cb6f51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-empty-body.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  for (const y in props.value) {
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'a', b: 'B', c: 'C!'}}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x;
+  for (const y in props.value) {
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { a: "a", b: "B", c: "C!" } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-empty-body.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-empty-body.js
new file mode 100644
index 00000000000..79f09d0d67c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-empty-body.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  let x;
+  for (const y in props.value) {
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'a', b: 'B', c: 'C!'}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md
new file mode 100644
index 00000000000..686d95a6f50
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+const {identity, mutate} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  const object = {...props.value};
+  for (const y in object) {
+    x = y;
+  }
+  mutate(x); // can't modify, x is known primitive!
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'a', b: 'B', c: 'C!'}}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+const { identity, mutate } = require("shared-runtime");
+
+function Component(props) {
+  let x;
+  const object = { ...props.value };
+  for (const y in object) {
+    x = y;
+  }
+
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { a: "a", b: "B", c: "C!" } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "c"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js
new file mode 100644
index 00000000000..027d1e7f41e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js
@@ -0,0 +1,17 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+const {identity, mutate} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  const object = {...props.value};
+  for (const y in object) {
+    x = y;
+  }
+  mutate(x); // can't modify, x is known primitive!
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {a: 'a', b: 'B', c: 'C!'}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement.expect.md
new file mode 100644
index 00000000000..00ce1f020e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let items = [];
+  for (const key in props) {
+    items.push(<div key={key}>{key}</div>);
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{hello: null, world: undefined, '!': true}],
+  sequentialRenders: [
+    {a: null, b: null, c: null},
+    {lauren: true, mofei: true, sathya: true, jason: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const items = [];
+    for (const key in props) {
+      items.push(<div key={key}>{key}</div>);
+    }
+    t0 = <div>{items}</div>;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ hello: null, world: undefined, "!": true }],
+  sequentialRenders: [
+    { a: null, b: null, c: null },
+    { lauren: true, mofei: true, sathya: true, jason: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>a</div><div>b</div><div>c</div></div>
+<div><div>lauren</div><div>mofei</div><div>sathya</div><div>jason</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement.js
new file mode 100644
index 00000000000..ba93f965556
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  let items = [];
+  for (const key in props) {
+    items.push(<div key={key}>{key}</div>);
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{hello: null, world: undefined, '!': true}],
+  sequentialRenders: [
+    {a: null, b: null, c: null},
+    {lauren: true, mofei: true, sathya: true, jason: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-logical.expect.md
new file mode 100644
index 00000000000..7434ae4f3e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-logical.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  let y = 0;
+  for (
+    let x = 0;
+    x > props.min && x < props.max;
+    x += props.cond ? props.increment : 2
+  ) {
+    x *= 2;
+    y += x;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(props) {
+  let y = 0;
+  for (
+    let x = 0;
+    x > props.min && x < props.max;
+    x = x + (props.cond ? props.increment : 2), x
+  ) {
+    x = x * 2;
+    y = y + x;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-logical.js
new file mode 100644
index 00000000000..cb09954ac7c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-logical.js
@@ -0,0 +1,18 @@
+function foo(props) {
+  let y = 0;
+  for (
+    let x = 0;
+    x > props.min && x < props.max;
+    x += props.cond ? props.increment : 2
+  ) {
+    x *= 2;
+    y += x;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-let-undefined-decl.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-let-undefined-decl.expect.md
new file mode 100644
index 00000000000..bb5447acf73
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-let-undefined-decl.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// These variables are unknown to useFoo, as they are
+// defined at module scope or implicit globals
+const isSelected = false;
+const isCurrent = true;
+
+function useFoo() {
+  for (let i = 0; i <= 5; i++) {
+    let color;
+    if (isSelected) {
+      color = isCurrent ? '#FFCC22' : '#FF5050';
+    } else {
+      color = isCurrent ? '#CCFF03' : '#CCCCCC';
+    }
+    console.log(color);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  params: [],
+  fn: useFoo,
+};
+
+```
+
+## Code
+
+```javascript
+// These variables are unknown to useFoo, as they are
+// defined at module scope or implicit globals
+const isSelected = false;
+const isCurrent = true;
+
+function useFoo() {
+  for (let i = 0; i <= 5; i++) {
+    let color;
+    if (isSelected) {
+      color = isCurrent ? "#FFCC22" : "#FF5050";
+    } else {
+      color = isCurrent ? "#CCFF03" : "#CCCCCC";
+    }
+
+    console.log(color);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  params: [],
+  fn: useFoo,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['#CCFF03','#CCFF03','#CCFF03','#CCFF03','#CCFF03','#CCFF03']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-let-undefined-decl.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-let-undefined-decl.js
new file mode 100644
index 00000000000..2de1d653e7c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-let-undefined-decl.js
@@ -0,0 +1,21 @@
+// These variables are unknown to useFoo, as they are
+// defined at module scope or implicit globals
+const isSelected = false;
+const isCurrent = true;
+
+function useFoo() {
+  for (let i = 0; i <= 5; i++) {
+    let color;
+    if (isSelected) {
+      color = isCurrent ? '#FFCC22' : '#FF5050';
+    } else {
+      color = isCurrent ? '#CCFF03' : '#CCCCCC';
+    }
+    console.log(color);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  params: [],
+  fn: useFoo,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-value-block-initializer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-value-block-initializer.expect.md
new file mode 100644
index 00000000000..a68e2a23fb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-value-block-initializer.expect.md
@@ -0,0 +1,138 @@
+
+## Input
+
+```javascript
+const TOTAL = 10;
+function Component(props) {
+  const items = [];
+  for (let i = props.start ?? 0; i < props.items.length; i++) {
+    const item = props.items[i];
+    items.push(<div key={item.id}>{item.value}</div>);
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      start: null,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+      ],
+    },
+  ],
+  sequentialRenders: [
+    {
+      start: 1,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+      ],
+    },
+    {
+      start: 2,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+      ],
+    },
+    {
+      start: 0,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+        {id: 2, value: 'two'},
+      ],
+    },
+    {
+      start: 1,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+        {id: 2, value: 'two'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const TOTAL = 10;
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.items || $[1] !== props.start) {
+    const items = [];
+    for (let i = props.start ?? 0; i < props.items.length; i++) {
+      const item = props.items[i];
+      items.push(<div key={item.id}>{item.value}</div>);
+    }
+    t0 = <div>{items}</div>;
+    $[0] = props.items;
+    $[1] = props.start;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      start: null,
+      items: [
+        { id: 0, value: "zero" },
+        { id: 1, value: "one" },
+      ],
+    },
+  ],
+
+  sequentialRenders: [
+    {
+      start: 1,
+      items: [
+        { id: 0, value: "zero" },
+        { id: 1, value: "one" },
+      ],
+    },
+    {
+      start: 2,
+      items: [
+        { id: 0, value: "zero" },
+        { id: 1, value: "one" },
+      ],
+    },
+    {
+      start: 0,
+      items: [
+        { id: 0, value: "zero" },
+        { id: 1, value: "one" },
+        { id: 2, value: "two" },
+      ],
+    },
+    {
+      start: 1,
+      items: [
+        { id: 0, value: "zero" },
+        { id: 1, value: "one" },
+        { id: 2, value: "two" },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>one</div></div>
+<div></div>
+<div><div>zero</div><div>one</div><div>two</div></div>
+<div><div>one</div><div>two</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-value-block-initializer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-value-block-initializer.js
new file mode 100644
index 00000000000..ae750d78288
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-value-block-initializer.js
@@ -0,0 +1,54 @@
+const TOTAL = 10;
+function Component(props) {
+  const items = [];
+  for (let i = props.start ?? 0; i < props.items.length; i++) {
+    const item = props.items[i];
+    items.push(<div key={item.id}>{item.value}</div>);
+  }
+  return <div>{items}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      start: null,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+      ],
+    },
+  ],
+  sequentialRenders: [
+    {
+      start: 1,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+      ],
+    },
+    {
+      start: 2,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+      ],
+    },
+    {
+      start: 0,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+        {id: 2, value: 'two'},
+      ],
+    },
+    {
+      start: 1,
+      items: [
+        {id: 0, value: 'zero'},
+        {id: 1, value: 'one'},
+        {id: 2, value: 'two'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-multiple-variable-declarations-in-initializer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-multiple-variable-declarations-in-initializer.expect.md
new file mode 100644
index 00000000000..faafa79faa5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-multiple-variable-declarations-in-initializer.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = [];
+
+  for (let i = 0, length = props.items.length; i < length; i++) {
+    items.push(props.items[i]);
+  }
+
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: ['a', 'b', 42]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let items;
+  if ($[0] !== props.items) {
+    items = [];
+
+    for (let i = 0, length = props.items.length; i < length; i++) {
+      items.push(props.items[i]);
+    }
+    $[0] = props.items;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: ["a", "b", 42] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["a","b",42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-multiple-variable-declarations-in-initializer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-multiple-variable-declarations-in-initializer.js
new file mode 100644
index 00000000000..039247bbe30
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-multiple-variable-declarations-in-initializer.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const items = [];
+
+  for (let i = 0, length = props.items.length; i < length; i++) {
+    items.push(props.items[i]);
+  }
+
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: ['a', 'b', 42]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-break.expect.md
new file mode 100644
index 00000000000..a5aebc8f313
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-break.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = [];
+  for (const item of [1, 2]) {
+    break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  for (const item of [1, 2]) {
+    break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-break.js
new file mode 100644
index 00000000000..4b47939e954
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-break.js
@@ -0,0 +1,13 @@
+function Component() {
+  const x = [];
+  for (const item of [1, 2]) {
+    break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later-value-initially-null.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later-value-initially-null.expect.md
new file mode 100644
index 00000000000..c21bc3fd382
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later-value-initially-null.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  let lastItem = null;
+  const items = [makeObject_Primitives(), makeObject_Primitives()];
+  for (const x of items) {
+    lastItem = x;
+  }
+  if (lastItem != null) {
+    lastItem.a += 1;
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  let items;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let lastItem = null;
+    items = [makeObject_Primitives(), makeObject_Primitives()];
+    for (const x of items) {
+      lastItem = x;
+    }
+
+    if (lastItem != null) {
+      lastItem.a = lastItem.a + 1;
+    }
+    $[0] = items;
+  } else {
+    items = $[0];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":0,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
+[{"a":0,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
+[{"a":0,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later-value-initially-null.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later-value-initially-null.js
new file mode 100644
index 00000000000..f64dc819808
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later-value-initially-null.js
@@ -0,0 +1,19 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  let lastItem = null;
+  const items = [makeObject_Primitives(), makeObject_Primitives()];
+  for (const x of items) {
+    lastItem = x;
+  }
+  if (lastItem != null) {
+    lastItem.a += 1;
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later.expect.md
new file mode 100644
index 00000000000..413f810c8a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  let lastItem = {};
+  const items = [makeObject_Primitives(), makeObject_Primitives()];
+  for (const x of items) {
+    lastItem = x;
+  }
+  if (lastItem != null) {
+    lastItem.a += 1;
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  let items;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let lastItem = {};
+    items = [makeObject_Primitives(), makeObject_Primitives()];
+    for (const x of items) {
+      lastItem = x;
+    }
+
+    if (lastItem != null) {
+      lastItem.a = lastItem.a + 1;
+    }
+    $[0] = items;
+  } else {
+    items = $[0];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":0,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
+[{"a":0,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later.js
new file mode 100644
index 00000000000..7b3f3be3ee8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-capture-item-of-local-collection-mutate-later.js
@@ -0,0 +1,19 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  let lastItem = {};
+  const items = [makeObject_Primitives(), makeObject_Primitives()];
+  for (const x of items) {
+    lastItem = x;
+  }
+  if (lastItem != null) {
+    lastItem.a += 1;
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-conditional-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-conditional-break.expect.md
new file mode 100644
index 00000000000..ce7ae8debad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-conditional-break.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = [];
+  for (const item of [1, 2]) {
+    if (item === 1) {
+      break;
+    }
+    x.push(item);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = [];
+    for (const item of [1, 2]) {
+      if (item === 1) {
+        break;
+      }
+
+      x.push(item);
+    }
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-conditional-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-conditional-break.js
new file mode 100644
index 00000000000..4f99a0f36de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-conditional-break.js
@@ -0,0 +1,16 @@
+function Component() {
+  const x = [];
+  for (const item of [1, 2]) {
+    if (item === 1) {
+      break;
+    }
+    x.push(item);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-continue.expect.md
new file mode 100644
index 00000000000..d51627d1640
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-continue.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = [0, 1, 2, 3];
+  const ret = [];
+  for (const item of x) {
+    if (item === 0) {
+      continue;
+    }
+    ret.push(item / 2);
+  }
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let ret;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [0, 1, 2, 3];
+    ret = [];
+    for (const item of x) {
+      if (item === 0) {
+        continue;
+      }
+
+      ret.push(item / 2);
+    }
+    $[0] = ret;
+  } else {
+    ret = $[0];
+  }
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [0.5,1,1.5]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-continue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-continue.js
new file mode 100644
index 00000000000..bee06f33aef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-continue.js
@@ -0,0 +1,17 @@
+function Component() {
+  const x = [0, 1, 2, 3];
+  const ret = [];
+  for (const item of x) {
+    if (item === 0) {
+      continue;
+    }
+    ret.push(item / 2);
+  }
+  return ret;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-destructure.expect.md
new file mode 100644
index 00000000000..1cdb5360783
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-destructure.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component() {
+  let x = [];
+  let items = [{v: 0}, {v: 1}, {v: 2}];
+  for (const {v} of items) {
+    x.push(v * 2);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = [];
+    const items = [{ v: 0 }, { v: 1 }, { v: 2 }];
+    for (const { v } of items) {
+      x.push(v * 2);
+    }
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,2,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-destructure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-destructure.js
new file mode 100644
index 00000000000..0a77e751bb1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-destructure.js
@@ -0,0 +1,14 @@
+function Component() {
+  let x = [];
+  let items = [{v: 0}, {v: 1}, {v: 2}];
+  for (const {v} of items) {
+    x.push(v * 2);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-immutable-collection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-immutable-collection.expect.md
new file mode 100644
index 00000000000..08d5545a5b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-immutable-collection.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+function Router({title, mapping}) {
+  const array = [];
+  for (let [, entry] of mapping) {
+    array.push([title, entry]);
+  }
+  return array;
+}
+
+const routes = new Map([
+  ['about', '/about'],
+  ['contact', '/contact'],
+]);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Router,
+  params: [],
+  sequentialRenders: [
+    {
+      title: 'Foo',
+      mapping: routes,
+    },
+    {
+      title: 'Bar',
+      mapping: routes,
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Router(t0) {
+  const $ = _c(3);
+  const { title, mapping } = t0;
+  let array;
+  if ($[0] !== mapping || $[1] !== title) {
+    array = [];
+    for (const [, entry] of mapping) {
+      array.push([title, entry]);
+    }
+    $[0] = mapping;
+    $[1] = title;
+    $[2] = array;
+  } else {
+    array = $[2];
+  }
+  return array;
+}
+
+const routes = new Map([
+  ["about", "/about"],
+  ["contact", "/contact"],
+]);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Router,
+  params: [],
+  sequentialRenders: [
+    {
+      title: "Foo",
+      mapping: routes,
+    },
+    {
+      title: "Bar",
+      mapping: routes,
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [["Foo","/about"],["Foo","/contact"]]
+[["Bar","/about"],["Bar","/contact"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-immutable-collection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-immutable-collection.js
new file mode 100644
index 00000000000..49e3853fdd5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-immutable-collection.js
@@ -0,0 +1,27 @@
+function Router({title, mapping}) {
+  const array = [];
+  for (let [, entry] of mapping) {
+    array.push([title, entry]);
+  }
+  return array;
+}
+
+const routes = new Map([
+  ['about', '/about'],
+  ['contact', '/contact'],
+]);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Router,
+  params: [],
+  sequentialRenders: [
+    {
+      title: 'Foo',
+      mapping: routes,
+    },
+    {
+      title: 'Bar',
+      mapping: routes,
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-iterator-of-immutable-collection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-iterator-of-immutable-collection.expect.md
new file mode 100644
index 00000000000..d33f670c292
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-iterator-of-immutable-collection.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+function Router({title, mapping}) {
+  const array = [];
+  for (let entry of mapping.values()) {
+    array.push([title, entry]);
+  }
+  return array;
+}
+
+const routes = new Map([
+  ['about', '/about'],
+  ['contact', '/contact'],
+]);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Router,
+  params: [],
+  sequentialRenders: [
+    {
+      title: 'Foo',
+      mapping: routes,
+    },
+    {
+      title: 'Bar',
+      mapping: routes,
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Router(t0) {
+  const $ = _c(3);
+  const { title, mapping } = t0;
+  let array;
+  if ($[0] !== mapping || $[1] !== title) {
+    array = [];
+    for (const entry of mapping.values()) {
+      array.push([title, entry]);
+    }
+    $[0] = mapping;
+    $[1] = title;
+    $[2] = array;
+  } else {
+    array = $[2];
+  }
+  return array;
+}
+
+const routes = new Map([
+  ["about", "/about"],
+  ["contact", "/contact"],
+]);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Router,
+  params: [],
+  sequentialRenders: [
+    {
+      title: "Foo",
+      mapping: routes,
+    },
+    {
+      title: "Bar",
+      mapping: routes,
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [["Foo","/about"],["Foo","/contact"]]
+[["Bar","/about"],["Bar","/contact"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-iterator-of-immutable-collection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-iterator-of-immutable-collection.js
new file mode 100644
index 00000000000..cbf336215ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-iterator-of-immutable-collection.js
@@ -0,0 +1,27 @@
+function Router({title, mapping}) {
+  const array = [];
+  for (let entry of mapping.values()) {
+    array.push([title, entry]);
+  }
+  return array;
+}
+
+const routes = new Map([
+  ['about', '/about'],
+  ['contact', '/contact'],
+]);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Router,
+  params: [],
+  sequentialRenders: [
+    {
+      title: 'Foo',
+      mapping: routes,
+    },
+    {
+      title: 'Bar',
+      mapping: routes,
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate-item-of-local-collection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate-item-of-local-collection.expect.md
new file mode 100644
index 00000000000..7488df65b7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate-item-of-local-collection.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const items = [makeObject_Primitives(), makeObject_Primitives()];
+  for (const x of items) {
+    x.a += 1;
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  let items;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    items = [makeObject_Primitives(), makeObject_Primitives()];
+    for (const x of items) {
+      x.a = x.a + 1;
+    }
+    $[0] = items;
+  } else {
+    items = $[0];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":1,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
+[{"a":1,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
+[{"a":1,"b":"value1","c":true},{"a":1,"b":"value1","c":true}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate-item-of-local-collection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate-item-of-local-collection.js
new file mode 100644
index 00000000000..cee55976b89
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate-item-of-local-collection.js
@@ -0,0 +1,15 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const items = [makeObject_Primitives(), makeObject_Primitives()];
+  for (const x of items) {
+    x.a += 1;
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate.expect.md
new file mode 100644
index 00000000000..ceb5b9289df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, mutateAndReturn, toJSON} from 'shared-runtime';
+
+function Component(_props) {
+  const collection = [makeObject_Primitives()];
+  const results = [];
+  for (const item of collection) {
+    results.push(<div key={toJSON(item)}>{toJSON(mutateAndReturn(item))}</div>);
+  }
+  return <div>{results}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, mutateAndReturn, toJSON } from "shared-runtime";
+
+function Component(_props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const collection = [makeObject_Primitives()];
+    const results = [];
+    for (const item of collection) {
+      results.push(
+        <div key={toJSON(item)}>{toJSON(mutateAndReturn(item))}</div>,
+      );
+    }
+    t0 = <div>{results}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"a":0,"b":"value1","c":true,"wat0":"joe"}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate.tsx
new file mode 100644
index 00000000000..63fe57e66d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-mutate.tsx
@@ -0,0 +1,16 @@
+import {makeObject_Primitives, mutateAndReturn, toJSON} from 'shared-runtime';
+
+function Component(_props) {
+  const collection = [makeObject_Primitives()];
+  const results = [];
+  for (const item of collection) {
+    results.push(<div key={toJSON(item)}>{toJSON(mutateAndReturn(item))}</div>);
+  }
+  return <div>{results}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-nonmutating-loop-local-collection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-nonmutating-loop-local-collection.expect.md
new file mode 100644
index 00000000000..6d05e5e5ae3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-nonmutating-loop-local-collection.expect.md
@@ -0,0 +1,138 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => {
+    return [a];
+  }, [a]);
+  const y = useMemo(() => {
+    const items = [b];
+    for (const i of x) {
+      items.push(i);
+    }
+    return items;
+  }, [x, b]);
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={x} />
+      <ValidateMemoization inputs={[x, b]} output={y} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 0, b: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(19);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = [a];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let items;
+  if ($[2] !== b || $[3] !== x) {
+    items = [b];
+    for (const i of x) {
+      items.push(i);
+    }
+    $[2] = b;
+    $[3] = x;
+    $[4] = items;
+  } else {
+    items = $[4];
+  }
+  const y = items;
+  let t2;
+  if ($[5] !== a) {
+    t2 = [a];
+    $[5] = a;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== t2 || $[8] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} />;
+    $[7] = t2;
+    $[8] = x;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== b || $[11] !== x) {
+    t4 = [x, b];
+    $[10] = b;
+    $[11] = x;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== t4 || $[14] !== y) {
+    t5 = <ValidateMemoization inputs={t4} output={y} />;
+    $[13] = t4;
+    $[14] = y;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== t3 || $[17] !== t5) {
+    t6 = (
+      <>
+        {t3}
+        {t5}
+      </>
+    );
+    $[16] = t3;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 0, b: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[1],"output":[1]}</div><div>{"inputs":[[1],0],"output":[0,1]}</div>
+<div>{"inputs":[1],"output":[1]}</div><div>{"inputs":[[1],1],"output":[1,1]}</div>
+<div>{"inputs":[0],"output":[0]}</div><div>{"inputs":[[0],1],"output":[1,0]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-nonmutating-loop-local-collection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-nonmutating-loop-local-collection.js
new file mode 100644
index 00000000000..3a687b1d342
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-nonmutating-loop-local-collection.js
@@ -0,0 +1,31 @@
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => {
+    return [a];
+  }, [a]);
+  const y = useMemo(() => {
+    const items = [b];
+    for (const i of x) {
+      items.push(i);
+    }
+    return items;
+  }, [x, b]);
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={x} />
+      <ValidateMemoization inputs={[x, b]} output={y} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 0, b: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-simple.expect.md
new file mode 100644
index 00000000000..f73d5f81c01
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-simple.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component() {
+  let x = [];
+  let items = [0, 1, 2];
+  for (const ii of items) {
+    x.push(ii * 2);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = [];
+    const items = [0, 1, 2];
+    for (const ii of items) {
+      x.push(ii * 2);
+    }
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,2,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-simple.js
new file mode 100644
index 00000000000..d3f445816e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-of-simple.js
@@ -0,0 +1,14 @@
+function Component() {
+  let x = [];
+  let items = [0, 1, 2];
+  for (const ii of items) {
+    x.push(ii * 2);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-return.expect.md
new file mode 100644
index 00000000000..46e8f9a9711
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-return.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  for (let i = 0; i < props.count; i++) {
+    return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  for (const i = 0; 0 < props.count; ) {
+    return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-return.js
new file mode 100644
index 00000000000..07659e2b2d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-return.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  for (let i = 0; i < props.count; i++) {
+    return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-with-assignment-as-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-with-assignment-as-update.expect.md
new file mode 100644
index 00000000000..f315ccaedb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-with-assignment-as-update.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = props.init;
+  for (let i = 0; i < 100; i = i + 1) {
+    x += i;
+  }
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{init: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x = props.init;
+  for (let i = 0; i < 100; i = i + 1) {
+    x = x + i;
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ init: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [4950]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-with-assignment-as-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-with-assignment-as-update.js
new file mode 100644
index 00000000000..5e18aa5ff77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-with-assignment-as-update.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  let x = props.init;
+  for (let i = 0; i < 100; i = i + 1) {
+    x += i;
+  }
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{init: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/frozen-after-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/frozen-after-alias.expect.md
new file mode 100644
index 00000000000..acfcb0bfe07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/frozen-after-alias.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component() {
+  const a = [];
+  const b = a;
+  useFreeze(a);
+  foo(b); // should be readonly, value is guaranteed frozen via alias
+  return b;
+}
+
+function useFreeze() {}
+function foo(x) {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const a = t0;
+  const b = a;
+  useFreeze(a);
+  foo(b);
+  return b;
+}
+
+function useFreeze() {}
+function foo(x) {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/frozen-after-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/frozen-after-alias.js
new file mode 100644
index 00000000000..852504b81d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/frozen-after-alias.js
@@ -0,0 +1,10 @@
+function Component() {
+  const a = [];
+  const b = a;
+  useFreeze(a);
+  foo(b); // should be readonly, value is guaranteed frozen via alias
+  return b;
+}
+
+function useFreeze() {}
+function foo(x) {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-reassign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-reassign.expect.md
new file mode 100644
index 00000000000..7e22cdac27c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-reassign.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function component() {
+  function x(a) {
+    a.foo();
+  }
+  x = {};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let x;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-reassign.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-reassign.js
new file mode 100644
index 00000000000..ec199bb0f55
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-reassign.js
@@ -0,0 +1,13 @@
+function component() {
+  function x(a) {
+    a.foo();
+  }
+  x = {};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-redeclare.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-redeclare.expect.md
new file mode 100644
index 00000000000..bb177f66d34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-redeclare.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function component() {
+  function x(a) {
+    a.foo();
+  }
+  function x() {}
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let x;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function x() {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-redeclare.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-redeclare.js
new file mode 100644
index 00000000000..ffdaa582a75
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-redeclare.js
@@ -0,0 +1,13 @@
+function component() {
+  function x(a) {
+    a.foo();
+  }
+  function x() {}
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-simple.expect.md
new file mode 100644
index 00000000000..c3e50f3a8fd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-simple.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let t = {a};
+  function x(p) {
+    p.foo();
+  }
+  x(t);
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(3);
+  let t;
+  if ($[0] !== a) {
+    t = { a };
+    let t0;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = function x(p) {
+        p.foo();
+      };
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    const x = t0;
+
+    x(t);
+    $[0] = a;
+    $[1] = t;
+  } else {
+    t = $[1];
+  }
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-simple.js
new file mode 100644
index 00000000000..ee48c438512
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-declaration-simple.js
@@ -0,0 +1,14 @@
+function component(a) {
+  let t = {a};
+  function x(p) {
+    p.foo();
+  }
+  x(t);
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expr-directive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expr-directive.expect.md
new file mode 100644
index 00000000000..8c4aa612e8c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expr-directive.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+function Component() {
+  'use strict';
+  let [count, setCount] = React.useState(0);
+  function update() {
+    'worklet';
+    setCount(count => count + 1);
+  }
+  return <button onClick={update}>{count}</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  "use strict";
+  const $ = _c(3);
+
+  const [count, setCount] = React.useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function update() {
+      "worklet";
+
+      setCount(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const update = t0;
+  let t1;
+  if ($[1] !== count) {
+    t1 = <button onClick={update}>{count}</button>;
+    $[1] = count;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp(count_0) {
+  return count_0 + 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <button>0</button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expr-directive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expr-directive.js
new file mode 100644
index 00000000000..d04f6498e28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expr-directive.js
@@ -0,0 +1,15 @@
+function Component() {
+  'use strict';
+  let [count, setCount] = React.useState(0);
+  function update() {
+    'worklet';
+    setCount(count => count + 1);
+  }
+  return <button onClick={update}>{count}</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-captures-value-later-frozen-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-captures-value-later-frozen-jsx.expect.md
new file mode 100644
index 00000000000..3bc3d03e3a0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-captures-value-later-frozen-jsx.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = {};
+  // onChange should be inferred as immutable, because the value
+  // it captures (`x`) is frozen by the time the function is referenced
+  const onChange = e => {
+    maybeMutate(x, e.target.value);
+  };
+  if (props.cond) {
+    <div>{x}</div>;
+  }
+  return <Foo value={x} onChange={onChange} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (e) => {
+      maybeMutate(x, e.target.value);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onChange = t1;
+
+  if (props.cond) {
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <Foo value={x} onChange={onChange} />;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-captures-value-later-frozen-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-captures-value-later-frozen-jsx.js
new file mode 100644
index 00000000000..5b858b18b02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-captures-value-later-frozen-jsx.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  let x = {};
+  // onChange should be inferred as immutable, because the value
+  // it captures (`x`) is frozen by the time the function is referenced
+  const onChange = e => {
+    maybeMutate(x, e.target.value);
+  };
+  if (props.cond) {
+    <div>{x}</div>;
+  }
+  return <Foo value={x} onChange={onChange} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.expect.md
new file mode 100644
index 00000000000..c8d6224645b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const id = useSelectedEntitytId();
+  // this example should infer `id` as mutable, and then infer `onLoad` as mutable,
+  // and be rejected because onLoad cannot be passed as a frozen value in the JSX.
+  // however, we likely have to allow this example to work, because hook return
+  // values are generally immutable in practice and are also widely referenced in
+  // callbacks.
+  const onLoad = () => {
+    log(id);
+  };
+  return <Foo onLoad={onLoad} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const id = useSelectedEntitytId();
+  let t0;
+  if ($[0] !== id) {
+    const onLoad = () => {
+      log(id);
+    };
+    t0 = <Foo onLoad={onLoad} />;
+    $[0] = id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.js
new file mode 100644
index 00000000000..fcf38652b1c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const id = useSelectedEntitytId();
+  // this example should infer `id` as mutable, and then infer `onLoad` as mutable,
+  // and be rejected because onLoad cannot be passed as a frozen value in the JSX.
+  // however, we likely have to allow this example to work, because hook return
+  // values are generally immutable in practice and are also widely referenced in
+  // callbacks.
+  const onLoad = () => {
+    log(id);
+  };
+  return <Foo onLoad={onLoad} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.expect.md
new file mode 100644
index 00000000000..4c03adc0e38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const a = useMemo(() => {
+    const a = [];
+    const f = function () {
+      a.push(props.name);
+    };
+    f.call();
+    return a;
+  }, [props.name]);
+  return <ValidateMemoization inputs={[props.name]} output={a} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+  sequentialRenders: [{name: 'Lauren'}, {name: 'Lauren'}, {name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(7);
+  let a;
+  if ($[0] !== props.name) {
+    a = [];
+    const f = function () {
+      a.push(props.name);
+    };
+
+    f.call();
+    $[0] = props.name;
+    $[1] = a;
+  } else {
+    a = $[1];
+  }
+  const a_0 = a;
+  let t0;
+  if ($[2] !== props.name) {
+    t0 = [props.name];
+    $[2] = props.name;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  let t1;
+  if ($[4] !== a_0 || $[5] !== t0) {
+    t1 = <ValidateMemoization inputs={t0} output={a_0} />;
+    $[4] = a_0;
+    $[5] = t0;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Jason" }],
+  sequentialRenders: [
+    { name: "Lauren" },
+    { name: "Lauren" },
+    { name: "Jason" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":["Lauren"],"output":["Lauren"]}</div>
+<div>{"inputs":["Lauren"],"output":["Lauren"]}</div>
+<div>{"inputs":["Jason"],"output":["Jason"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.js
new file mode 100644
index 00000000000..5ef046d5475
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call-mutating.js
@@ -0,0 +1,20 @@
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const a = useMemo(() => {
+    const a = [];
+    const f = function () {
+      a.push(props.name);
+    };
+    f.call();
+    return a;
+  }, [props.name]);
+  return <ValidateMemoization inputs={[props.name]} output={a} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+  sequentialRenders: [{name: 'Lauren'}, {name: 'Lauren'}, {name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md
new file mode 100644
index 00000000000..73dbdc7f9d4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const f = function () {
+    return <div>{props.name}</div>;
+  };
+  return f.call();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const f = function () {
+      return <div>{props.name}</div>;
+    };
+    t0 = f.call();
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Jason</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.js
new file mode 100644
index 00000000000..7ec19834bee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const f = function () {
+    return <div>{props.name}</div>;
+  };
+  return f.call();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-with-store-to-parameter.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-with-store-to-parameter.expect.md
new file mode 100644
index 00000000000..0825fbc44c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-with-store-to-parameter.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const mutate = (object, key, value) => {
+    object.updated = true;
+    object[key] = value;
+  };
+  const x = makeObject(props);
+  mutate(x);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const mutate = _temp;
+  let x;
+  if ($[0] !== props) {
+    x = makeObject(props);
+    mutate(x);
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+function _temp(object, key, value) {
+  object.updated = true;
+  object[key] = value;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-with-store-to-parameter.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-with-store-to-parameter.js
new file mode 100644
index 00000000000..d8412a7c83d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-with-store-to-parameter.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  const mutate = (object, key, value) => {
+    object.updated = true;
+    object[key] = value;
+  };
+  const x = makeObject(props);
+  mutate(x);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-param-assignment-pattern.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-param-assignment-pattern.expect.md
new file mode 100644
index 00000000000..2e2c403bf7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-param-assignment-pattern.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function Component(x = 'default', y = [{}]) {
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0, t1) {
+  const $ = _c(5);
+  const x = t0 === undefined ? "default" : t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? [{}] : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const y = t2;
+  let t3;
+  if ($[2] !== x || $[3] !== y) {
+    t3 = [x, y];
+    $[2] = x;
+    $[3] = y;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-param-assignment-pattern.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-param-assignment-pattern.js
new file mode 100644
index 00000000000..4be8f13526e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-param-assignment-pattern.js
@@ -0,0 +1,9 @@
+function Component(x = 'default', y = [{}]) {
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.expect.md
new file mode 100644
index 00000000000..5614560c6c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @enableTreatFunctionDepsAsConditional
+import {Stringify} from 'shared-runtime';
+
+function Component({props}) {
+  const f = () => props.a.b;
+
+  return <Stringify f={props == null ? () => {} : f} />;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{props: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatFunctionDepsAsConditional
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { props } = t0;
+  let t1;
+  if ($[0] !== props) {
+    t1 = () => props.a.b;
+    $[0] = props;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const f = t1;
+  let t2;
+  if ($[2] !== f || $[3] !== props) {
+    t2 = props == null ? _temp : f;
+    $[2] = f;
+    $[3] = props;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t2) {
+    t3 = <Stringify f={t2} />;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ props: null }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"f":"[[ function params=0 ]]"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.tsx
new file mode 100644
index 00000000000..ab3e00f9ba2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.tsx
@@ -0,0 +1,12 @@
+// @enableTreatFunctionDepsAsConditional
+import {Stringify} from 'shared-runtime';
+
+function Component({props}) {
+  const f = () => props.a.b;
+
+  return <Stringify f={props == null ? () => {} : f} />;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{props: null}],
+};
diff --git "a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr\342\200\223conditional-access.expect.md" "b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr\342\200\223conditional-access.expect.md"
new file mode 100644
index 00000000000..c7aa3e3b754
--- /dev/null
+++ "b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr\342\200\223conditional-access.expect.md"
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @enableTreatFunctionDepsAsConditional
+function Component(props) {
+  function getLength() {
+    return props.bar.length;
+  }
+
+  return props.bar && getLength();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{bar: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatFunctionDepsAsConditional
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.bar) {
+    t0 = function getLength() {
+      return props.bar.length;
+    };
+    $[0] = props.bar;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const getLength = t0;
+  let t1;
+  if ($[2] !== getLength || $[3] !== props.bar) {
+    t1 = props.bar && getLength();
+    $[2] = getLength;
+    $[3] = props.bar;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ bar: null }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git "a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr\342\200\223conditional-access.js" "b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr\342\200\223conditional-access.js"
new file mode 100644
index 00000000000..6e59fb947d1
--- /dev/null
+++ "b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr\342\200\223conditional-access.js"
@@ -0,0 +1,13 @@
+// @enableTreatFunctionDepsAsConditional
+function Component(props) {
+  function getLength() {
+    return props.bar.length;
+  }
+
+  return props.bar && getLength();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{bar: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/arrow-function-expr-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/arrow-function-expr-gating-test.expect.md
new file mode 100644
index 00000000000..298b4d59dfc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/arrow-function-expr-gating-test.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @gating
+import {Stringify} from 'shared-runtime';
+const ErrorView = ({error, _retry}) => <Stringify error={error}></Stringify>;
+
+export default ErrorView;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('ErrorView'),
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { Stringify } from "shared-runtime";
+const ErrorView = isForgetEnabled_Fixtures()
+  ? (t0) => {
+      const $ = _c(2);
+      const { error } = t0;
+      let t1;
+      if ($[0] !== error) {
+        t1 = <Stringify error={error} />;
+        $[0] = error;
+        $[1] = t1;
+      } else {
+        t1 = $[1];
+      }
+      return t1;
+    }
+  : ({ error, _retry }) => <Stringify error={error}></Stringify>;
+
+export default ErrorView;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("ErrorView"),
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/arrow-function-expr-gating-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/arrow-function-expr-gating-test.js
new file mode 100644
index 00000000000..4c6ab77596e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/arrow-function-expr-gating-test.js
@@ -0,0 +1,10 @@
+// @gating
+import {Stringify} from 'shared-runtime';
+const ErrorView = ({error, _retry}) => <Stringify error={error}></Stringify>;
+
+export default ErrorView;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('ErrorView'),
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.expect.md
new file mode 100644
index 00000000000..4f31c280775
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.expect.md
@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+// @enableEmitInstrumentForget @compilationMode:"annotation" @gating
+
+function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  if (props.bar < 0) {
+    return props.children;
+  }
+  return (
+    <Foo bar={props.bar - 1}>
+      <NoForget />
+    </Foo>
+  );
+}
+
+global.DEV = true;
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Foo'),
+  params: [{bar: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { shouldInstrument, useRenderCounter } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @enableEmitInstrumentForget @compilationMode:"annotation" @gating
+const Bar = isForgetEnabled_Fixtures()
+  ? function Bar(props) {
+      "use forget";
+      if (DEV && shouldInstrument)
+        useRenderCounter("Bar", "/codegen-instrument-forget-gating-test.ts");
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <div>{props.bar}</div>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Bar(props) {
+      "use forget";
+      return <div>{props.bar}</div>;
+    };
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+const Foo = isForgetEnabled_Fixtures()
+  ? function Foo(props) {
+      "use forget";
+      if (DEV && shouldInstrument)
+        useRenderCounter("Foo", "/codegen-instrument-forget-gating-test.ts");
+      const $ = _c(3);
+
+      if (props.bar < 0) {
+        return props.children;
+      }
+
+      const t0 = props.bar - 1;
+      let t1;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = <NoForget />;
+        $[0] = t1;
+      } else {
+        t1 = $[0];
+      }
+      let t2;
+      if ($[1] !== t0) {
+        t2 = <Foo bar={t0}>{t1}</Foo>;
+        $[1] = t0;
+        $[2] = t2;
+      } else {
+        t2 = $[2];
+      }
+      return t2;
+    }
+  : function Foo(props) {
+      "use forget";
+      if (props.bar < 0) {
+        return props.children;
+      }
+      return (
+        <Foo bar={props.bar - 1}>
+          <NoForget />
+        </Foo>
+      );
+    };
+
+global.DEV = true;
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Foo"),
+  params: [{ bar: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.js
new file mode 100644
index 00000000000..425b99da8bc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.js
@@ -0,0 +1,28 @@
+// @enableEmitInstrumentForget @compilationMode:"annotation" @gating
+
+function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  if (props.bar < 0) {
+    return props.children;
+  }
+  return (
+    <Foo bar={props.bar - 1}>
+      <NoForget />
+    </Foo>
+  );
+}
+
+global.DEV = true;
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Foo'),
+  params: [{bar: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/component-syntax-ref-gating.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/component-syntax-ref-gating.flow.expect.md
new file mode 100644
index 00000000000..410b6512446
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/component-syntax-ref-gating.flow.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @flow @gating
+import {Stringify} from 'shared-runtime';
+import * as React from 'react';
+
+component Foo(ref: React.RefSetter<Controls>) {
+  return <Stringify ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('(...args) => React.createElement(Foo, args)'),
+  params: [{ref: React.createRef()}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag";
+import { Stringify } from "shared-runtime";
+import * as React from "react";
+
+const Foo = React.forwardRef(Foo_withRef);
+const isForgetEnabled_Fixtures_result = isForgetEnabled_Fixtures();
+function Foo_withRef_optimized(_$$empty_props_placeholder$$, ref) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== ref) {
+    t0 = <Stringify ref={ref} />;
+    $[0] = ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function Foo_withRef_unoptimized(
+  _$$empty_props_placeholder$$: $ReadOnly<{}>,
+  ref: React.RefSetter<Controls>,
+): React.Node {
+  return <Stringify ref={ref} />;
+}
+function Foo_withRef(arg0, arg1) {
+  if (isForgetEnabled_Fixtures_result) return Foo_withRef_optimized(arg0, arg1);
+  else return Foo_withRef_unoptimized(arg0, arg1);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("(...args) => React.createElement(Foo, args)"),
+  params: [{ ref: React.createRef() }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"ref":null}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/component-syntax-ref-gating.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/component-syntax-ref-gating.flow.js
new file mode 100644
index 00000000000..02bed83cb21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/component-syntax-ref-gating.flow.js
@@ -0,0 +1,12 @@
+// @flow @gating
+import {Stringify} from 'shared-runtime';
+import * as React from 'react';
+
+component Foo(ref: React.RefSetter<Controls>) {
+  return <Stringify ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('(...args) => React.createElement(Foo, args)'),
+  params: [{ref: React.createRef()}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/conflicting-gating-fn.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/conflicting-gating-fn.expect.md
new file mode 100644
index 00000000000..ca6f518032b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/conflicting-gating-fn.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @gating
+
+export const isForgetEnabled_Fixtures = () => {
+  'use no forget';
+  return false;
+};
+
+export function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures as _isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+
+export const isForgetEnabled_Fixtures = () => {
+  "use no forget";
+  return false;
+};
+
+export const Bar = _isForgetEnabled_Fixtures()
+  ? function Bar(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <div>{props.bar}</div>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Bar(props) {
+      "use forget";
+      return <div>{props.bar}</div>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Bar"),
+  params: [{ bar: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>2</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/conflicting-gating-fn.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/conflicting-gating-fn.js
new file mode 100644
index 00000000000..3e5757dc915
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/conflicting-gating-fn.js
@@ -0,0 +1,16 @@
+// @gating
+
+export const isForgetEnabled_Fixtures = () => {
+  'use no forget';
+  return false;
+};
+
+export function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-annotation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-annotation.expect.md
new file mode 100644
index 00000000000..364239e4e3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-annotation.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @compilationMode:"annotation"
+
+function Foo() {
+  'use memo if(getTrue)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { getTrue } from "shared-runtime"; // @dynamicGating:{"source":"shared-runtime"} @compilationMode:"annotation"
+const Foo = getTrue()
+  ? function Foo() {
+      "use memo if(getTrue)";
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function Foo() {
+      "use memo if(getTrue)";
+      return <div>hello world</div>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-annotation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-annotation.js
new file mode 100644
index 00000000000..c30b30fe6f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-annotation.js
@@ -0,0 +1,11 @@
+// @dynamicGating:{"source":"shared-runtime"} @compilationMode:"annotation"
+
+function Foo() {
+  'use memo if(getTrue)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.expect.md
new file mode 100644
index 00000000000..535f98e574f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @validatePreserveExistingMemoizationGuarantees @panicThreshold:"none" @loggerTestOnly @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function Foo({value}) {
+  'use memo if(getTrue)';
+
+  const initialValue = useMemo(() => identity(value), []);
+  return (
+    <>
+      <div>initial value {initialValue}</div>
+      <div>current value {value}</div>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 1}],
+  sequentialRenders: [{value: 1}, {value: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @validatePreserveExistingMemoizationGuarantees @panicThreshold:"none" @loggerTestOnly @validateExhaustiveMemoizationDependencies:false
+
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function Foo({ value }) {
+  "use memo if(getTrue)";
+
+  const initialValue = useMemo(() => identity(value), []);
+  return (
+    <>
+      <div>initial value {initialValue}</div>
+      <div>current value {value}</div>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ value: 1 }],
+  sequentialRenders: [{ value: 1 }, { value: 2 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":255},"end":{"line":16,"column":1,"index":482},"filename":"dynamic-gating-bailout-nopanic.ts"},"detail":{"options":{"category":"PreserveManualMemo","reason":"Existing memoization could not be preserved","description":"React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `value`, but the source dependencies were []. Inferred dependency not present in source","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":337},"end":{"line":9,"column":52,"index":358},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}}}
+```
+      
+### Eval output
+(kind: ok) <div>initial value 1</div><div>current value 1</div>
+<div>initial value 1</div><div>current value 2</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.js
new file mode 100644
index 00000000000..381c2d4c565
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.js
@@ -0,0 +1,22 @@
+// @dynamicGating:{"source":"shared-runtime"} @validatePreserveExistingMemoizationGuarantees @panicThreshold:"none" @loggerTestOnly @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function Foo({value}) {
+  'use memo if(getTrue)';
+
+  const initialValue = useMemo(() => identity(value), []);
+  return (
+    <>
+      <div>initial value {initialValue}</div>
+      <div>current value {value}</div>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 1}],
+  sequentialRenders: [{value: 1}, {value: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-disabled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-disabled.expect.md
new file mode 100644
index 00000000000..7d95b54317d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-disabled.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"}
+
+function Foo() {
+  'use memo if(getFalse)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { getFalse } from "shared-runtime"; // @dynamicGating:{"source":"shared-runtime"}
+const Foo = getFalse()
+  ? function Foo() {
+      "use memo if(getFalse)";
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function Foo() {
+      "use memo if(getFalse)";
+      return <div>hello world</div>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-disabled.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-disabled.js
new file mode 100644
index 00000000000..be29f105687
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-disabled.js
@@ -0,0 +1,11 @@
+// @dynamicGating:{"source":"shared-runtime"}
+
+function Foo() {
+  'use memo if(getFalse)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-enabled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-enabled.expect.md
new file mode 100644
index 00000000000..272c5a57143
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-enabled.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"}
+
+function Foo() {
+  'use memo if(getTrue)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { getTrue } from "shared-runtime"; // @dynamicGating:{"source":"shared-runtime"}
+const Foo = getTrue()
+  ? function Foo() {
+      "use memo if(getTrue)";
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function Foo() {
+      "use memo if(getTrue)";
+      return <div>hello world</div>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-enabled.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-enabled.js
new file mode 100644
index 00000000000..9280e25d116
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-enabled.js
@@ -0,0 +1,11 @@
+// @dynamicGating:{"source":"shared-runtime"}
+
+function Foo() {
+  'use memo if(getTrue)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-identifier-nopanic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-identifier-nopanic.expect.md
new file mode 100644
index 00000000000..c8c91910b02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-identifier-nopanic.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none"
+
+function Foo() {
+  'use memo if(true)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none"
+
+function Foo() {
+  "use memo if(true)";
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-identifier-nopanic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-identifier-nopanic.js
new file mode 100644
index 00000000000..4d0d9c3bb86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-identifier-nopanic.js
@@ -0,0 +1,11 @@
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none"
+
+function Foo() {
+  'use memo if(true)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-multiple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-multiple.expect.md
new file mode 100644
index 00000000000..4650588cc47
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-multiple.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none" @loggerTestOnly
+
+function Foo() {
+  'use memo if(getTrue)';
+  'use memo if(getFalse)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none" @loggerTestOnly
+
+function Foo() {
+  "use memo if(getTrue)";
+  "use memo if(getFalse)";
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":3,"column":0,"index":86},"end":{"line":7,"column":1,"index":190},"filename":"dynamic-gating-invalid-multiple.ts"},"detail":{"options":{"category":"Gating","reason":"Multiple dynamic gating directives found","description":"Expected a single directive but found [use memo if(getTrue), use memo if(getFalse)]","suggestions":null,"loc":{"start":{"line":4,"column":2,"index":105},"end":{"line":4,"column":25,"index":128},"filename":"dynamic-gating-invalid-multiple.ts"}}}}
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-multiple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-multiple.js
new file mode 100644
index 00000000000..867ac8ee34b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-invalid-multiple.js
@@ -0,0 +1,12 @@
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none" @loggerTestOnly
+
+function Foo() {
+  'use memo if(getTrue)';
+  'use memo if(getFalse)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.expect.md
new file mode 100644
index 00000000000..c00e78b6e7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @outputMode:"lint"
+
+function Foo() {
+  'use memo if(getTrue)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @outputMode:"lint"
+
+function Foo() {
+  "use memo if(getTrue)";
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.js
new file mode 100644
index 00000000000..901a1dd3eae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.js
@@ -0,0 +1,11 @@
+// @dynamicGating:{"source":"shared-runtime"} @outputMode:"lint"
+
+function Foo() {
+  'use memo if(getTrue)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier-nopanic-required-feature.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier-nopanic-required-feature.expect.md
new file mode 100644
index 00000000000..05b7218de74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier-nopanic-required-feature.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none" @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveVariable({propVal}) {
+  'use memo if(invalid identifier)';
+  const arr = [propVal];
+  useEffect(() => print(arr), AUTODEPS);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveVariable,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.dynamic-gating-invalid-identifier-nopanic-required-feature.ts:8:2
+   6 |   'use memo if(invalid identifier)';
+   7 |   const arr = [propVal];
+>  8 |   useEffect(() => print(arr), AUTODEPS);
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+   9 | }
+  10 |
+  11 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier-nopanic-required-feature.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier-nopanic-required-feature.js
new file mode 100644
index 00000000000..c753bc26382
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier-nopanic-required-feature.js
@@ -0,0 +1,14 @@
+// @dynamicGating:{"source":"shared-runtime"} @panicThreshold:"none" @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveVariable({propVal}) {
+  'use memo if(invalid identifier)';
+  const arr = [propVal];
+  useEffect(() => print(arr), AUTODEPS);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveVariable,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier.expect.md
new file mode 100644
index 00000000000..3d2d4012a6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"}
+
+function Foo() {
+  'use memo if(true)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Dynamic gating directive is not a valid JavaScript identifier
+
+Found 'use memo if(true)'.
+
+error.dynamic-gating-invalid-identifier.ts:4:2
+  2 |
+  3 | function Foo() {
+> 4 |   'use memo if(true)';
+    |   ^^^^^^^^^^^^^^^^^^^^ Dynamic gating directive is not a valid JavaScript identifier
+  5 |   return <div>hello world</div>;
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier.js
new file mode 100644
index 00000000000..c4005544972
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/error.dynamic-gating-invalid-identifier.js
@@ -0,0 +1,11 @@
+// @dynamicGating:{"source":"shared-runtime"}
+
+function Foo() {
+  'use memo if(true)';
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-access-function-name-in-component.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-access-function-name-in-component.expect.md
new file mode 100644
index 00000000000..9b3633472d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-access-function-name-in-component.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @gating
+function Component() {
+  const name = Component.name;
+  return <div>{name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+const Component = isForgetEnabled_Fixtures()
+  ? function Component() {
+      const $ = _c(1);
+      const name = Component.name;
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>{name}</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function Component() {
+      const name = Component.name;
+      return <div>{name}</div>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Component</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-access-function-name-in-component.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-access-function-name-in-component.js
new file mode 100644
index 00000000000..f6c5fc813e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-access-function-name-in-component.js
@@ -0,0 +1,10 @@
+// @gating
+function Component() {
+  const name = Component.name;
+  return <div>{name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-nonreferenced-identifier-collision.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-nonreferenced-identifier-collision.expect.md
new file mode 100644
index 00000000000..40791a2454b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-nonreferenced-identifier-collision.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @gating
+import {identity, useHook as useRenamed} from 'shared-runtime';
+const _ = {
+  useHook: () => {},
+};
+identity(_.useHook);
+
+function useHook() {
+  useRenamed();
+  return <div>hello world!</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { identity, useHook as useRenamed } from "shared-runtime";
+const _ = {
+  useHook: isForgetEnabled_Fixtures() ? () => {} : () => {},
+};
+identity(_.useHook);
+const useHook = isForgetEnabled_Fixtures()
+  ? function useHook() {
+      const $ = _c(1);
+      useRenamed();
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world!</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function useHook() {
+      useRenamed();
+      return <div>hello world!</div>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world!</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-nonreferenced-identifier-collision.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-nonreferenced-identifier-collision.js
new file mode 100644
index 00000000000..f5d557978b2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-nonreferenced-identifier-collision.js
@@ -0,0 +1,16 @@
+// @gating
+import {identity, useHook as useRenamed} from 'shared-runtime';
+const _ = {
+  useHook: () => {},
+};
+identity(_.useHook);
+
+function useHook() {
+  useRenamed();
+  return <div>hello world!</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-preserves-function-properties.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-preserves-function-properties.expect.md
new file mode 100644
index 00000000000..cc852d25384
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-preserves-function-properties.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @gating
+
+export default function Component() {
+  return <></>;
+}
+
+export function Component2() {
+  return <></>;
+}
+
+Component.displayName = 'Component ONE';
+Component2.displayName = 'Component TWO';
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+const Component = isForgetEnabled_Fixtures()
+  ? function Component() {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <></>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function Component() {
+      return <></>;
+    };
+export default Component;
+
+export const Component2 = isForgetEnabled_Fixtures()
+  ? function Component2() {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <></>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : function Component2() {
+      return <></>;
+    };
+
+Component.displayName = "Component ONE";
+Component2.displayName = "Component TWO";
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-preserves-function-properties.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-preserves-function-properties.tsx
new file mode 100644
index 00000000000..f7cd9b59041
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-preserves-function-properties.tsx
@@ -0,0 +1,18 @@
+// @gating
+
+export default function Component() {
+  return <></>;
+}
+
+export function Component2() {
+  return <></>;
+}
+
+Component.displayName = 'Component ONE';
+Component2.displayName = 'Component TWO';
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.expect.md
new file mode 100644
index 00000000000..fbe3c554c19
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @gating @compilationMode:"annotation"
+export default function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
+const Bar = isForgetEnabled_Fixtures()
+  ? function Bar(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <div>{props.bar}</div>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Bar(props) {
+      "use forget";
+      return <div>{props.bar}</div>;
+    };
+export default Bar;
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+const Foo = isForgetEnabled_Fixtures()
+  ? function Foo(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <Foo>{props.bar}</Foo>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Foo(props) {
+      "use forget";
+      return <Foo>{props.bar}</Foo>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Bar"),
+  params: [{ bar: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>2</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.js
new file mode 100644
index 00000000000..369dc3bbd07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.js
@@ -0,0 +1,19 @@
+// @gating @compilationMode:"annotation"
+export default function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.expect.md
new file mode 100644
index 00000000000..2a0d3a598ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+// @gating @compilationMode:"annotation"
+export default function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  if (props.bar < 0) {
+    return props.children;
+  }
+  return (
+    <Foo bar={props.bar - 1}>
+      <NoForget />
+    </Foo>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
+const Bar = isForgetEnabled_Fixtures()
+  ? function Bar(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <div>{props.bar}</div>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Bar(props) {
+      "use forget";
+      return <div>{props.bar}</div>;
+    };
+export default Bar;
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+const Foo = isForgetEnabled_Fixtures()
+  ? function Foo(props) {
+      "use forget";
+      const $ = _c(3);
+
+      if (props.bar < 0) {
+        return props.children;
+      }
+
+      const t0 = props.bar - 1;
+      let t1;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = <NoForget />;
+        $[0] = t1;
+      } else {
+        t1 = $[0];
+      }
+      let t2;
+      if ($[1] !== t0) {
+        t2 = <Foo bar={t0}>{t1}</Foo>;
+        $[1] = t0;
+        $[2] = t2;
+      } else {
+        t2 = $[2];
+      }
+      return t2;
+    }
+  : function Foo(props) {
+      "use forget";
+      if (props.bar < 0) {
+        return props.children;
+      }
+      return (
+        <Foo bar={props.bar - 1}>
+          <NoForget />
+        </Foo>
+      );
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Bar"),
+  params: [{ bar: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>2</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.js
new file mode 100644
index 00000000000..af2f0981308
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.js
@@ -0,0 +1,26 @@
+// @gating @compilationMode:"annotation"
+export default function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  if (props.bar < 0) {
+    return props.children;
+  }
+  return (
+    <Foo bar={props.bar - 1}>
+      <NoForget />
+    </Foo>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.expect.md
new file mode 100644
index 00000000000..9661fe3d2bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @gating @compilationMode:"annotation"
+export function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+export function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+export function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
+export const Bar = isForgetEnabled_Fixtures()
+  ? function Bar(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <div>{props.bar}</div>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Bar(props) {
+      "use forget";
+      return <div>{props.bar}</div>;
+    };
+
+export function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+export const Foo = isForgetEnabled_Fixtures()
+  ? function Foo(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <Foo>{props.bar}</Foo>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Foo(props) {
+      "use forget";
+      return <Foo>{props.bar}</Foo>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Bar"),
+  params: [{ bar: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>2</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.js
new file mode 100644
index 00000000000..e07144b160f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.js
@@ -0,0 +1,19 @@
+// @gating @compilationMode:"annotation"
+export function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+export function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+export function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.expect.md
new file mode 100644
index 00000000000..0cd67fd1d20
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+// @gating @compilationMode:"annotation"
+function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
+const Bar = isForgetEnabled_Fixtures()
+  ? function Bar(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <div>{props.bar}</div>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Bar(props) {
+      "use forget";
+      return <div>{props.bar}</div>;
+    };
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+const Foo = isForgetEnabled_Fixtures()
+  ? function Foo(props) {
+      "use forget";
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== props.bar) {
+        t0 = <Foo>{props.bar}</Foo>;
+        $[0] = props.bar;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : function Foo(props) {
+      "use forget";
+      return <Foo>{props.bar}</Foo>;
+    };
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Bar"),
+  params: [{ bar: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>2</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.js
new file mode 100644
index 00000000000..bc45933af3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.js
@@ -0,0 +1,19 @@
+// @gating @compilationMode:"annotation"
+function Bar(props) {
+  'use forget';
+  return <div>{props.bar}</div>;
+}
+
+function NoForget(props) {
+  return <Bar>{props.noForget}</Bar>;
+}
+
+function Foo(props) {
+  'use forget';
+  return <Foo>{props.bar}</Foo>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Bar'),
+  params: [{bar: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl-ref.expect.md
new file mode 100644
index 00000000000..9730119c250
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl-ref.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @gating
+import {createRef, forwardRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+const Foo = forwardRef(Foo_withRef);
+function Foo_withRef(props, ref) {
+  return <Stringify ref={ref} {...props} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('(...args) => React.createElement(Foo, args)'),
+  params: [{prop1: 1, prop2: 2, ref: createRef()}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { createRef, forwardRef } from "react";
+import { Stringify } from "shared-runtime";
+
+const Foo = forwardRef(Foo_withRef);
+const isForgetEnabled_Fixtures_result = isForgetEnabled_Fixtures();
+function Foo_withRef_optimized(props, ref) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props || $[1] !== ref) {
+    t0 = <Stringify ref={ref} {...props} />;
+    $[0] = props;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+function Foo_withRef_unoptimized(props, ref) {
+  return <Stringify ref={ref} {...props} />;
+}
+function Foo_withRef(arg0, arg1) {
+  if (isForgetEnabled_Fixtures_result) return Foo_withRef_optimized(arg0, arg1);
+  else return Foo_withRef_unoptimized(arg0, arg1);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("(...args) => React.createElement(Foo, args)"),
+  params: [{ prop1: 1, prop2: 2, ref: createRef() }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"0":{"prop1":1,"prop2":2,"ref":{"current":null}},"ref":"[[ cyclic ref *3 ]]"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl-ref.js
new file mode 100644
index 00000000000..a382497d992
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl-ref.js
@@ -0,0 +1,13 @@
+// @gating
+import {createRef, forwardRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+const Foo = forwardRef(Foo_withRef);
+function Foo_withRef(props, ref) {
+  return <Stringify ref={ref} {...props} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('(...args) => React.createElement(Foo, args)'),
+  params: [{prop1: 1, prop2: 2, ref: createRef()}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl.expect.md
new file mode 100644
index 00000000000..937af490f1d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @gating
+import {memo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+export default memo(Foo);
+function Foo({prop1, prop2}) {
+  'use memo';
+  return <Stringify prop1={prop1} prop2={prop2} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Foo'),
+  params: [{prop1: 1, prop2: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { memo } from "react";
+import { Stringify } from "shared-runtime";
+
+export default memo(Foo);
+const isForgetEnabled_Fixtures_result = isForgetEnabled_Fixtures();
+function Foo_optimized(t0) {
+  "use memo";
+  const $ = _c(3);
+  const { prop1, prop2 } = t0;
+  let t1;
+  if ($[0] !== prop1 || $[1] !== prop2) {
+    t1 = <Stringify prop1={prop1} prop2={prop2} />;
+    $[0] = prop1;
+    $[1] = prop2;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function Foo_unoptimized({ prop1, prop2 }) {
+  "use memo";
+  return <Stringify prop1={prop1} prop2={prop2} />;
+}
+function Foo(arg0) {
+  if (isForgetEnabled_Fixtures_result) return Foo_optimized(arg0);
+  else return Foo_unoptimized(arg0);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Foo"),
+  params: [{ prop1: 1, prop2: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"prop1":1,"prop2":2}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl.js
new file mode 100644
index 00000000000..d51a7fcac0a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-use-before-decl.js
@@ -0,0 +1,14 @@
+// @gating
+import {memo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+export default memo(Foo);
+function Foo({prop1, prop2}) {
+  'use memo';
+  return <Stringify prop1={prop1} prop2={prop2} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Foo'),
+  params: [{prop1: 1, prop2: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-with-hoisted-type-reference.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-with-hoisted-type-reference.flow.expect.md
new file mode 100644
index 00000000000..f81680970c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-with-hoisted-type-reference.flow.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @flow @gating
+import {memo} from 'react';
+
+type Props = React.ElementConfig<typeof Component>;
+
+component Component(value: string) {
+  return <div>{value}</div>;
+}
+
+export default memo<Props>(Component);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Component'),
+  params: [{value: 'foo'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag";
+import { memo } from "react";
+
+type Props = React.ElementConfig<typeof Component>;
+const Component = isForgetEnabled_Fixtures()
+  ? function Component(t0) {
+      const $ = _c(2);
+      const { value } = t0;
+      let t1;
+      if ($[0] !== value) {
+        t1 = <div>{value}</div>;
+        $[0] = value;
+        $[1] = t1;
+      } else {
+        t1 = $[1];
+      }
+      return t1;
+    }
+  : function Component({ value }: $ReadOnly<{ value: string }>) {
+      return <div>{value}</div>;
+    };
+
+export default memo<Props>(Component);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Component"),
+  params: [{ value: "foo" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>foo</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-with-hoisted-type-reference.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-with-hoisted-type-reference.flow.js
new file mode 100644
index 00000000000..1fe640b6934
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-with-hoisted-type-reference.flow.js
@@ -0,0 +1,15 @@
+// @flow @gating
+import {memo} from 'react';
+
+type Props = React.ElementConfig<typeof Component>;
+
+component Component(value: string) {
+  return <div>{value}</div>;
+}
+
+export default memo<Props>(Component);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Component'),
+  params: [{value: 'foo'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.expect.md
new file mode 100644
index 00000000000..11067222595
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @gating @compilationMode:"infer"
+import React from 'react';
+export default React.forwardRef(function notNamedLikeAComponent(props) {
+  return <div />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"infer"
+import React from "react";
+export default React.forwardRef(
+  isForgetEnabled_Fixtures()
+    ? function notNamedLikeAComponent(props) {
+        const $ = _c(1);
+        let t0;
+        if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+          t0 = <div />;
+          $[0] = t0;
+        } else {
+          t0 = $[0];
+        }
+        return t0;
+      }
+    : function notNamedLikeAComponent(props) {
+        return <div />;
+      },
+);
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
+logs: ['forwardRef render functions accept exactly two parameters: props and ref. %s','Did you forget to use the ref parameter?']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.js
new file mode 100644
index 00000000000..518c8eeee38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.js
@@ -0,0 +1,5 @@
+// @gating @compilationMode:"infer"
+import React from 'react';
+export default React.forwardRef(function notNamedLikeAComponent(props) {
+  return <div />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/invalid-fnexpr-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/invalid-fnexpr-reference.expect.md
new file mode 100644
index 00000000000..cdf9acc2b65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/invalid-fnexpr-reference.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @gating
+import * as React from 'react';
+
+let Foo;
+const MemoFoo = React.memo(Foo);
+Foo = () => <div>hello world!</div>;
+
+/**
+ * Evaluate this fixture module to assert that compiler + original have the same
+ * runtime error message.
+ */
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {},
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import * as React from "react";
+
+let Foo;
+const MemoFoo = React.memo(Foo);
+Foo = isForgetEnabled_Fixtures()
+  ? () => {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world!</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : () => <div>hello world!</div>;
+
+/**
+ * Evaluate this fixture module to assert that compiler + original have the same
+ * runtime error message.
+ */
+export const FIXTURE_ENTRYPOINT = {
+  fn: isForgetEnabled_Fixtures() ? () => {} : () => {},
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['memo: The first argument must be a component. Instead received: %s','undefined']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/invalid-fnexpr-reference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/invalid-fnexpr-reference.js
new file mode 100644
index 00000000000..2bdeb76f589
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/invalid-fnexpr-reference.js
@@ -0,0 +1,15 @@
+// @gating
+import * as React from 'react';
+
+let Foo;
+const MemoFoo = React.memo(Foo);
+Foo = () => <div>hello world!</div>;
+
+/**
+ * Evaluate this fixture module to assert that compiler + original have the same
+ * runtime error message.
+ */
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {},
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-default-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-default-gating-test.expect.md
new file mode 100644
index 00000000000..1300bc8982d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-default-gating-test.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @gating
+import {Stringify} from 'shared-runtime';
+
+const ErrorView = (error, _retry) => <Stringify error={error}></Stringify>;
+
+export default props => (
+  <Foo>
+    <Bar></Bar>
+    <ErrorView></ErrorView>
+  </Foo>
+);
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { Stringify } from "shared-runtime";
+
+const ErrorView = isForgetEnabled_Fixtures()
+  ? (error, _retry) => {
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== error) {
+        t0 = <Stringify error={error} />;
+        $[0] = error;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : (error, _retry) => <Stringify error={error}></Stringify>;
+
+export default isForgetEnabled_Fixtures()
+  ? (props) => {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = (
+          <Foo>
+            <Bar />
+            <ErrorView />
+          </Foo>
+        );
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : (props) => (
+      <Foo>
+        <Bar></Bar>
+        <ErrorView></ErrorView>
+      </Foo>
+    );
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-default-gating-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-default-gating-test.js
new file mode 100644
index 00000000000..e856a290f7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-default-gating-test.js
@@ -0,0 +1,11 @@
+// @gating
+import {Stringify} from 'shared-runtime';
+
+const ErrorView = (error, _retry) => <Stringify error={error}></Stringify>;
+
+export default props => (
+  <Foo>
+    <Bar></Bar>
+    <ErrorView></ErrorView>
+  </Foo>
+);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-gating-test.expect.md
new file mode 100644
index 00000000000..c8905939391
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-gating-test.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+// @gating
+import {Stringify} from 'shared-runtime';
+
+const ErrorView = (error, _retry) => <Stringify error={error}></Stringify>;
+
+export const Renderer = props => (
+  <div>
+    <span></span>
+    <ErrorView></ErrorView>
+  </div>
+);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Renderer'),
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { Stringify } from "shared-runtime";
+
+const ErrorView = isForgetEnabled_Fixtures()
+  ? (error, _retry) => {
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== error) {
+        t0 = <Stringify error={error} />;
+        $[0] = error;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : (error, _retry) => <Stringify error={error}></Stringify>;
+
+export const Renderer = isForgetEnabled_Fixtures()
+  ? (props) => {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = (
+          <div>
+            <span />
+            <ErrorView />
+          </div>
+        );
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : (props) => (
+      <div>
+        <span></span>
+        <ErrorView></ErrorView>
+      </div>
+    );
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Renderer"),
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span></span><div>{"error":{}}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-gating-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-gating-test.js
new file mode 100644
index 00000000000..19152d68393
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-export-gating-test.js
@@ -0,0 +1,16 @@
+// @gating
+import {Stringify} from 'shared-runtime';
+
+const ErrorView = (error, _retry) => <Stringify error={error}></Stringify>;
+
+export const Renderer = props => (
+  <div>
+    <span></span>
+    <ErrorView></ErrorView>
+  </div>
+);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Renderer'),
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-gating-test.expect.md
new file mode 100644
index 00000000000..74be7ac5666
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-gating-test.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+// @gating
+import {Stringify} from 'shared-runtime';
+
+const ErrorView = (error, _retry) => <Stringify error={error}></Stringify>;
+
+const Renderer = props => (
+  <div>
+    <span></span>
+    <ErrorView></ErrorView>
+  </div>
+);
+
+export default Renderer;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Renderer'),
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import { Stringify } from "shared-runtime";
+
+const ErrorView = isForgetEnabled_Fixtures()
+  ? (error, _retry) => {
+      const $ = _c(2);
+      let t0;
+      if ($[0] !== error) {
+        t0 = <Stringify error={error} />;
+        $[0] = error;
+        $[1] = t0;
+      } else {
+        t0 = $[1];
+      }
+      return t0;
+    }
+  : (error, _retry) => <Stringify error={error}></Stringify>;
+
+const Renderer = isForgetEnabled_Fixtures()
+  ? (props) => {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = (
+          <div>
+            <span />
+            <ErrorView />
+          </div>
+        );
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : (props) => (
+      <div>
+        <span></span>
+        <ErrorView></ErrorView>
+      </div>
+    );
+export default Renderer;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval("Renderer"),
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span></span><div>{"error":{}}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-gating-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-gating-test.js
new file mode 100644
index 00000000000..ae4fd8dc94c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/multi-arrow-expr-gating-test.js
@@ -0,0 +1,18 @@
+// @gating
+import {Stringify} from 'shared-runtime';
+
+const ErrorView = (error, _retry) => <Stringify error={error}></Stringify>;
+
+const Renderer = props => (
+  <div>
+    <span></span>
+    <ErrorView></ErrorView>
+  </div>
+);
+
+export default Renderer;
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: eval('Renderer'),
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/reassigned-fnexpr-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/reassigned-fnexpr-variable.expect.md
new file mode 100644
index 00000000000..267da62b89a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/reassigned-fnexpr-variable.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @gating
+import * as React from 'react';
+
+/**
+ * Test that the correct `Foo` is printed
+ */
+let Foo = () => <div>hello world 1!</div>;
+const MemoOne = React.memo(Foo);
+Foo = () => <div>hello world 2!</div>;
+const MemoTwo = React.memo(Foo);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {
+    'use no memo';
+    return (
+      <>
+        <MemoOne />
+        <MemoTwo />
+      </>
+    );
+  },
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating
+import * as React from "react";
+
+/**
+ * Test that the correct `Foo` is printed
+ */
+let Foo = isForgetEnabled_Fixtures()
+  ? () => {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world 1!</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : () => <div>hello world 1!</div>;
+const MemoOne = React.memo(Foo);
+Foo = isForgetEnabled_Fixtures()
+  ? () => {
+      const $ = _c(1);
+      let t0;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = <div>hello world 2!</div>;
+        $[0] = t0;
+      } else {
+        t0 = $[0];
+      }
+      return t0;
+    }
+  : () => <div>hello world 2!</div>;
+const MemoTwo = React.memo(Foo);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {
+    "use no memo";
+    return (
+      <>
+        <MemoOne />
+        <MemoTwo />
+      </>
+    );
+  },
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world 1!</div><div>hello world 2!</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/reassigned-fnexpr-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/reassigned-fnexpr-variable.js
new file mode 100644
index 00000000000..f2275da7a2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/reassigned-fnexpr-variable.js
@@ -0,0 +1,23 @@
+// @gating
+import * as React from 'react';
+
+/**
+ * Test that the correct `Foo` is printed
+ */
+let Foo = () => <div>hello world 1!</div>;
+const MemoOne = React.memo(Foo);
+Foo = () => <div>hello world 2!</div>;
+const MemoTwo = React.memo(Foo);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {
+    'use no memo';
+    return (
+      <>
+        <MemoOne />
+        <MemoTwo />
+      </>
+    );
+  },
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/repro-no-gating-import-without-compiled-functions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/repro-no-gating-import-without-compiled-functions.expect.md
new file mode 100644
index 00000000000..06288dd2bec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/repro-no-gating-import-without-compiled-functions.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @gating
+import {isForgetEnabled_Fixtures} from 'ReactForgetFeatureFlag';
+
+export default 42;
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @gating
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag";
+
+export default 42;
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/repro-no-gating-import-without-compiled-functions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/repro-no-gating-import-without-compiled-functions.js
new file mode 100644
index 00000000000..56dc6091079
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/repro-no-gating-import-without-compiled-functions.js
@@ -0,0 +1,4 @@
+// @expectNothingCompiled @gating
+import {isForgetEnabled_Fixtures} from 'ReactForgetFeatureFlag';
+
+export default 42;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.expect.md
new file mode 100644
index 00000000000..dbd57bc2f70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  // NOTE: this will produce invalid output.
+  // The HIR is roughly:
+  //                                   ⌵ mutable range of `maybeMutable`
+  // StoreLocal maybeMutable = ...     ⌝
+  // t0 = LoadGlobal View              ⎮ <-- View is lowered inside this mutable range
+  //                                         and thus gets becomes an output of this scope,
+  //                                         gets promoted to temporary
+  // t1 = LoadGlobal maybeMutate       ⎮
+  // t2 = LoadLocal maybeMutable       ⎮
+  // t3 = Call t1(t2)                  ⌟
+  // t4 = Jsx tag=t0 props=[] children=[t3] <-- `t0` is an invalid tag
+  return <View>{maybeMutate(maybeMutable)}</View>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const maybeMutable = new MaybeMutable();
+    t0 = <View>{maybeMutate(maybeMutable)}</View>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.js
new file mode 100644
index 00000000000..8a0744fd505
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  // NOTE: this will produce invalid output.
+  // The HIR is roughly:
+  //                                   ⌵ mutable range of `maybeMutable`
+  // StoreLocal maybeMutable = ...     ⌝
+  // t0 = LoadGlobal View              ⎮ <-- View is lowered inside this mutable range
+  //                                         and thus gets becomes an output of this scope,
+  //                                         gets promoted to temporary
+  // t1 = LoadGlobal maybeMutate       ⎮
+  // t2 = LoadLocal maybeMutable       ⎮
+  // t3 = Call t1(t2)                  ⌟
+  // t4 = Jsx tag=t0 props=[] children=[t3] <-- `t0` is an invalid tag
+  return <View>{maybeMutate(maybeMutable)}</View>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.expect.md
new file mode 100644
index 00000000000..6882f8f4bde
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * Forked version of call-spread-argument-mutable-iterator that is known to not mutate
+ * the spread argument since it is a Set
+ */
+function useFoo() {
+  const s = new Set([1, 2]);
+  useIdentity(null);
+  return [Math.max(...s), s];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useIdentity } from "shared-runtime";
+
+/**
+ * Forked version of call-spread-argument-mutable-iterator that is known to not mutate
+ * the spread argument since it is a Set
+ */
+function useFoo() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = new Set([1, 2]);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const s = t0;
+  useIdentity(null);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [Math.max(...s), s];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2,{"kind":"Set","value":[1,2]}]
+[2,{"kind":"Set","value":[1,2]}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.ts
new file mode 100644
index 00000000000..b2746b01683
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.ts
@@ -0,0 +1,17 @@
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * Forked version of call-spread-argument-mutable-iterator that is known to not mutate
+ * the spread argument since it is a Set
+ */
+function useFoo() {
+  const s = new Set([1, 2]);
+  useIdentity(null);
+  return [Math.max(...s), s];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.expect.md
new file mode 100644
index 00000000000..61fe33680fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function useHook({el1, el2}) {
+  const s = new Map();
+  s.set(el1, makeArray(el1));
+  s.set(el2, makeArray(el2));
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{el1: 1, el2: 'foo'}],
+  sequentialRenders: [
+    {el1: 1, el2: 'foo'},
+    {el1: 2, el2: 'foo'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(7);
+  const { el1, el2 } = t0;
+  let s;
+  if ($[0] !== el1 || $[1] !== el2) {
+    s = new Map();
+    let t1;
+    if ($[3] !== el1) {
+      t1 = makeArray(el1);
+      $[3] = el1;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    s.set(el1, t1);
+    let t2;
+    if ($[5] !== el2) {
+      t2 = makeArray(el2);
+      $[5] = el2;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    s.set(el2, t2);
+    $[0] = el1;
+    $[1] = el2;
+    $[2] = s;
+  } else {
+    s = $[2];
+  }
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ el1: 1, el2: "foo" }],
+  sequentialRenders: [
+    { el1: 1, el2: "foo" },
+    { el1: 2, el2: "foo" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
+2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.ts
new file mode 100644
index 00000000000..2a0fb6d2390
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.ts
@@ -0,0 +1,17 @@
+import {makeArray} from 'shared-runtime';
+
+function useHook({el1, el2}) {
+  const s = new Map();
+  s.set(el1, makeArray(el1));
+  s.set(el2, makeArray(el2));
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{el1: 1, el2: 'foo'}],
+  sequentialRenders: [
+    {el1: 1, el2: 'foo'},
+    {el1: 2, el2: 'foo'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-capture-mutate-bug.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-capture-mutate-bug.expect.md
new file mode 100644
index 00000000000..091d050e640
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-capture-mutate-bug.expect.md
@@ -0,0 +1,113 @@
+
+## Input
+
+```javascript
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Repro for bug with `mutableOnlyIfOperandsAreMutable` flag
+ * Found differences in evaluator results
+  * Non-forget (expected):
+  * (kind: ok)
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * Forget:
+  * (kind: ok)
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe","wat1":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe","wat1":"joe"},{"value":6,"wat0":"joe"}]}</div>
+
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.filter(mutateAndReturn);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutateAndReturn, Stringify, useIdentity } from "shared-runtime";
+
+/**
+ * Repro for bug with `mutableOnlyIfOperandsAreMutable` flag
+ * Found differences in evaluator results
+  * Non-forget (expected):
+  * (kind: ok)
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * Forget:
+  * (kind: ok)
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe","wat1":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe","wat1":"joe"},{"value":6,"wat0":"joe"}]}</div>
+
+ */
+function Component(t0) {
+  const $ = _c(7);
+  const { value } = t0;
+  const arr = [{ value: "foo" }, { value: "bar" }, { value }];
+  useIdentity(null);
+  const derived = arr.filter(mutateAndReturn);
+  let t1;
+  if ($[0] !== derived) {
+    t1 = derived.at(0);
+    $[0] = derived;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== derived) {
+    t2 = derived.at(-1);
+    $[2] = derived;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = (
+      <Stringify>
+        {t1}
+        {t2}
+      </Stringify>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-capture-mutate-bug.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-capture-mutate-bug.tsx
new file mode 100644
index 00000000000..33e418a5fda
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-capture-mutate-bug.tsx
@@ -0,0 +1,34 @@
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Repro for bug with `mutableOnlyIfOperandsAreMutable` flag
+ * Found differences in evaluator results
+  * Non-forget (expected):
+  * (kind: ok)
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * Forget:
+  * (kind: ok)
+  * <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe","wat1":"joe"},{"value":6,"wat0":"joe"}]}</div>
+  * <div>{"children":[{"value":"foo","wat0":"joe","wat1":"joe"},{"value":6,"wat0":"joe"}]}</div>
+
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.filter(mutateAndReturn);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-known-nonmutate-Boolean.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-known-nonmutate-Boolean.expect.md
new file mode 100644
index 00000000000..0812e46c55b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-known-nonmutate-Boolean.expect.md
@@ -0,0 +1,118 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Also see repro-array-map-known-mutate-shape, which calls a global function
+ * that mutates its operands.
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.filter(Boolean);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, useIdentity } from "shared-runtime";
+
+/**
+ * Also see repro-array-map-known-mutate-shape, which calls a global function
+ * that mutates its operands.
+ */
+function Component(t0) {
+  const $ = _c(13);
+  const { value } = t0;
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { value: "foo" };
+    t2 = { value: "bar" };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== value) {
+    t3 = [t1, t2, { value }];
+    $[2] = value;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const arr = t3;
+  useIdentity(null);
+  let t4;
+  if ($[4] !== arr) {
+    t4 = arr.filter(Boolean);
+    $[4] = arr;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const derived = t4;
+  let t5;
+  if ($[6] !== derived) {
+    t5 = derived.at(0);
+    $[6] = derived;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== derived) {
+    t6 = derived.at(-1);
+    $[8] = derived;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t5 || $[11] !== t6) {
+    t7 = (
+      <Stringify>
+        {t5}
+        {t6}
+      </Stringify>
+    );
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  return t7;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[{"value":"foo"},{"value":5}]}</div>
+<div>{"children":[{"value":"foo"},{"value":6}]}</div>
+<div>{"children":[{"value":"foo"},{"value":6}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-known-nonmutate-Boolean.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-known-nonmutate-Boolean.tsx
new file mode 100644
index 00000000000..cd676d9b907
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-filter-known-nonmutate-Boolean.tsx
@@ -0,0 +1,23 @@
+import {Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Also see repro-array-map-known-mutate-shape, which calls a global function
+ * that mutates its operands.
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.filter(Boolean);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-capture-mutate-bug.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-capture-mutate-bug.expect.md
new file mode 100644
index 00000000000..b6bd4709ca6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-capture-mutate-bug.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Copy of repro-array-map-capture-mutate-bug, showing that the same issue applies to any
+ * function call which captures its callee when applying an operand.
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.map(mutateAndReturn);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutateAndReturn, Stringify, useIdentity } from "shared-runtime";
+
+/**
+ * Copy of repro-array-map-capture-mutate-bug, showing that the same issue applies to any
+ * function call which captures its callee when applying an operand.
+ */
+function Component(t0) {
+  const $ = _c(7);
+  const { value } = t0;
+  const arr = [{ value: "foo" }, { value: "bar" }, { value }];
+  useIdentity(null);
+  const derived = arr.map(mutateAndReturn);
+  let t1;
+  if ($[0] !== derived) {
+    t1 = derived.at(0);
+    $[0] = derived;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== derived) {
+    t2 = derived.at(-1);
+    $[2] = derived;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = (
+      <Stringify>
+        {t1}
+        {t2}
+      </Stringify>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[{"value":"foo","wat0":"joe"},{"value":5,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
+<div>{"children":[{"value":"foo","wat0":"joe"},{"value":6,"wat0":"joe"}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-capture-mutate-bug.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-capture-mutate-bug.tsx
new file mode 100644
index 00000000000..bda94b92c83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-capture-mutate-bug.tsx
@@ -0,0 +1,23 @@
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Copy of repro-array-map-capture-mutate-bug, showing that the same issue applies to any
+ * function call which captures its callee when applying an operand.
+ */
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.map(mutateAndReturn);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-known-mutate-shape.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-known-mutate-shape.expect.md
new file mode 100644
index 00000000000..27735532326
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-known-mutate-shape.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Also see repro-array-map-known-nonmutate-Boolean, which calls a global
+ * function that does *not* mutate its operands.
+ */
+function Component({value}) {
+  const arr = [
+    new Set([['foo', 2]]).values(),
+    new Set([['bar', 4]]).values(),
+    [['baz', value]],
+  ];
+  useIdentity(null);
+  const derived = arr.map(Object.fromEntries);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, useIdentity } from "shared-runtime";
+
+/**
+ * Also see repro-array-map-known-nonmutate-Boolean, which calls a global
+ * function that does *not* mutate its operands.
+ */
+function Component(t0) {
+  const $ = _c(7);
+  const { value } = t0;
+  const arr = [
+    new Set([["foo", 2]]).values(),
+    new Set([["bar", 4]]).values(),
+    [["baz", value]],
+  ];
+
+  useIdentity(null);
+  const derived = arr.map(Object.fromEntries);
+  let t1;
+  if ($[0] !== derived) {
+    t1 = derived.at(0);
+    $[0] = derived;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== derived) {
+    t2 = derived.at(-1);
+    $[2] = derived;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = (
+      <Stringify>
+        {t1}
+        {t2}
+      </Stringify>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[{"foo":2},{"baz":5}]}</div>
+<div>{"children":[{"foo":2},{"baz":6}]}</div>
+<div>{"children":[{"foo":2},{"baz":6}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-known-mutate-shape.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-known-mutate-shape.tsx
new file mode 100644
index 00000000000..191d0e0d336
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/repro-array-map-known-mutate-shape.tsx
@@ -0,0 +1,27 @@
+import {Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Also see repro-array-map-known-nonmutate-Boolean, which calls a global
+ * function that does *not* mutate its operands.
+ */
+function Component({value}) {
+  const arr = [
+    new Set([['foo', 2]]).values(),
+    new Set([['bar', 4]]).values(),
+    [['baz', value]],
+  ];
+  useIdentity(null);
+  const derived = arr.map(Object.fromEntries);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.expect.md
new file mode 100644
index 00000000000..cb829ffea21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function useHook({el1, el2}) {
+  const s = new Set();
+  const arr = makeArray(el1);
+  s.add(arr);
+  // Mutate after store
+  arr.push(el2);
+
+  s.add(makeArray(el2));
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{el1: 1, el2: 'foo'}],
+  sequentialRenders: [
+    {el1: 1, el2: 'foo'},
+    {el1: 2, el2: 'foo'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(5);
+  const { el1, el2 } = t0;
+  let s;
+  if ($[0] !== el1 || $[1] !== el2) {
+    s = new Set();
+    const arr = makeArray(el1);
+    s.add(arr);
+
+    arr.push(el2);
+    let t1;
+    if ($[3] !== el2) {
+      t1 = makeArray(el2);
+      $[3] = el2;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    s.add(t1);
+    $[0] = el1;
+    $[1] = el2;
+    $[2] = s;
+  } else {
+    s = $[2];
+  }
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ el1: 1, el2: "foo" }],
+  sequentialRenders: [
+    { el1: 1, el2: "foo" },
+    { el1: 2, el2: "foo" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
+2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.ts
new file mode 100644
index 00000000000..fe49ba813b0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.ts
@@ -0,0 +1,21 @@
+import {makeArray} from 'shared-runtime';
+
+function useHook({el1, el2}) {
+  const s = new Set();
+  const arr = makeArray(el1);
+  s.add(arr);
+  // Mutate after store
+  arr.push(el2);
+
+  s.add(makeArray(el2));
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{el1: 1, el2: 'foo'}],
+  sequentialRenders: [
+    {el1: 1, el2: 'foo'},
+    {el1: 2, el2: 'foo'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.expect.md
new file mode 100644
index 00000000000..245d11243a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.expect.md
@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+const MODULE_LOCAL = new Set([4, 5, 6]);
+function useFoo({propArr}: {propArr: Array<number>}) {
+  /* Array can be memoized separately of the Set */
+  const s1 = new Set([1, 2, 3]);
+  s1.add(propArr[0]);
+
+  /* but `.values` cannot be memoized separately */
+  const s2 = new Set(MODULE_LOCAL.values());
+  s2.add(propArr[1]);
+
+  const s3 = new Set(s2.values());
+  s3.add(propArr[2]);
+
+  /**
+   * s4 should be memoized separately from s3
+   */
+  const s4 = new Set(s3);
+  s4.add(propArr[3]);
+  return [s1, s2, s3, s4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{propArr: [7, 8, 9]}],
+  sequentialRenders: [{propArr: [7, 8, 9]}, {propArr: [7, 8, 10]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const MODULE_LOCAL = new Set([4, 5, 6]);
+function useFoo(t0) {
+  const $ = _c(15);
+  const { propArr } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [1, 2, 3];
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let s1;
+  if ($[1] !== propArr[0]) {
+    s1 = new Set(t1);
+    s1.add(propArr[0]);
+    $[1] = propArr[0];
+    $[2] = s1;
+  } else {
+    s1 = $[2];
+  }
+  let s2;
+  let s3;
+  if ($[3] !== propArr[1] || $[4] !== propArr[2]) {
+    s2 = new Set(MODULE_LOCAL.values());
+    s2.add(propArr[1]);
+    s3 = new Set(s2.values());
+    s3.add(propArr[2]);
+    $[3] = propArr[1];
+    $[4] = propArr[2];
+    $[5] = s2;
+    $[6] = s3;
+  } else {
+    s2 = $[5];
+    s3 = $[6];
+  }
+  let s4;
+  if ($[7] !== propArr[3] || $[8] !== s3) {
+    s4 = new Set(s3);
+    s4.add(propArr[3]);
+    $[7] = propArr[3];
+    $[8] = s3;
+    $[9] = s4;
+  } else {
+    s4 = $[9];
+  }
+  let t2;
+  if ($[10] !== s1 || $[11] !== s2 || $[12] !== s3 || $[13] !== s4) {
+    t2 = [s1, s2, s3, s4];
+    $[10] = s1;
+    $[11] = s2;
+    $[12] = s3;
+    $[13] = s4;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ propArr: [7, 8, 9] }],
+  sequentialRenders: [{ propArr: [7, 8, 9] }, { propArr: [7, 8, 10] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"kind":"Set","value":[1,2,3,7]},{"kind":"Set","value":[4,5,6,8]},{"kind":"Set","value":[4,5,6,8,9]},{"kind":"Set","value":[4,5,6,8,9,null]}]
+[{"kind":"Set","value":[1,2,3,7]},{"kind":"Set","value":[4,5,6,8]},{"kind":"Set","value":[4,5,6,8,10]},{"kind":"Set","value":[4,5,6,8,10,null]}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.ts
new file mode 100644
index 00000000000..04508ac1753
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.ts
@@ -0,0 +1,26 @@
+const MODULE_LOCAL = new Set([4, 5, 6]);
+function useFoo({propArr}: {propArr: Array<number>}) {
+  /* Array can be memoized separately of the Set */
+  const s1 = new Set([1, 2, 3]);
+  s1.add(propArr[0]);
+
+  /* but `.values` cannot be memoized separately */
+  const s2 = new Set(MODULE_LOCAL.values());
+  s2.add(propArr[1]);
+
+  const s3 = new Set(s2.values());
+  s3.add(propArr[2]);
+
+  /**
+   * s4 should be memoized separately from s3
+   */
+  const s4 = new Set(s3);
+  s4.add(propArr[3]);
+  return [s1, s2, s3, s4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{propArr: [7, 8, 9]}],
+  sequentialRenders: [{propArr: [7, 8, 9]}, {propArr: [7, 8, 10]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.expect.md
new file mode 100644
index 00000000000..371e98089f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function useHook({el1, el2}) {
+  const s = new Set();
+  s.add(makeArray(el1));
+  s.add(makeArray(el2));
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{el1: 1, el2: 'foo'}],
+  sequentialRenders: [
+    {el1: 1, el2: 'foo'},
+    {el1: 2, el2: 'foo'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(7);
+  const { el1, el2 } = t0;
+  let s;
+  if ($[0] !== el1 || $[1] !== el2) {
+    s = new Set();
+    let t1;
+    if ($[3] !== el1) {
+      t1 = makeArray(el1);
+      $[3] = el1;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    s.add(t1);
+    let t2;
+    if ($[5] !== el2) {
+      t2 = makeArray(el2);
+      $[5] = el2;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    s.add(t2);
+    $[0] = el1;
+    $[1] = el2;
+    $[2] = s;
+  } else {
+    s = $[2];
+  }
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ el1: 1, el2: "foo" }],
+  sequentialRenders: [
+    { el1: 1, el2: "foo" },
+    { el1: 2, el2: "foo" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
+2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.ts
new file mode 100644
index 00000000000..049e411d53e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.ts
@@ -0,0 +1,17 @@
+import {makeArray} from 'shared-runtime';
+
+function useHook({el1, el2}) {
+  const s = new Set();
+  s.add(makeArray(el1));
+  s.add(makeArray(el2));
+  return s.size;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{el1: 1, el2: 'foo'}],
+  sequentialRenders: [
+    {el1: 1, el2: 'foo'},
+    {el1: 2, el2: 'foo'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.expect.md
new file mode 100644
index 00000000000..78bac9ae4f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+import {makeArray, mutate} from 'shared-runtime';
+
+function useFoo({propArr}: {propArr: Array<number>}) {
+  const s1 = new Set<number | Array<number>>([1, 2, 3]);
+  s1.add(makeArray(propArr[0]));
+
+  const s2 = new Set(s1);
+  // this may also may mutate s1
+  mutate(s2);
+
+  return [s1, s2];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{propArr: [7, 8, 9]}],
+  sequentialRenders: [
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 10]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray, mutate } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(6);
+  const { propArr } = t0;
+  let s1;
+  let s2;
+  if ($[0] !== propArr[0]) {
+    s1 = new Set([1, 2, 3]);
+    s1.add(makeArray(propArr[0]));
+    s2 = new Set(s1);
+
+    mutate(s2);
+    $[0] = propArr[0];
+    $[1] = s1;
+    $[2] = s2;
+  } else {
+    s1 = $[1];
+    s2 = $[2];
+  }
+  let t1;
+  if ($[3] !== s1 || $[4] !== s2) {
+    t1 = [s1, s2];
+    $[3] = s1;
+    $[4] = s2;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ propArr: [7, 8, 9] }],
+  sequentialRenders: [
+    { propArr: [7, 8, 9] },
+    { propArr: [7, 8, 9] },
+    { propArr: [7, 8, 10] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"kind":"Set","value":[1,2,3,[7]]},{"kind":"Set","value":[1,2,3,"[[ cyclic ref *2 ]]"]}]
+[{"kind":"Set","value":[1,2,3,[7]]},{"kind":"Set","value":[1,2,3,"[[ cyclic ref *2 ]]"]}]
+[{"kind":"Set","value":[1,2,3,[7]]},{"kind":"Set","value":[1,2,3,"[[ cyclic ref *2 ]]"]}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.ts
new file mode 100644
index 00000000000..7bd283371e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.ts
@@ -0,0 +1,22 @@
+import {makeArray, mutate} from 'shared-runtime';
+
+function useFoo({propArr}: {propArr: Array<number>}) {
+  const s1 = new Set<number | Array<number>>([1, 2, 3]);
+  s1.add(makeArray(propArr[0]));
+
+  const s2 = new Set(s1);
+  // this may also may mutate s1
+  mutate(s2);
+
+  return [s1, s2];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{propArr: [7, 8, 9]}],
+  sequentialRenders: [
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 10]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.expect.md
new file mode 100644
index 00000000000..47ac8557dfb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {makeArray, useHook} from 'shared-runtime';
+
+function useFoo({propArr}: {propArr: Array<number>}) {
+  const s1 = new Set<number | Array<number>>([1, 2, 3]);
+  s1.add(makeArray(propArr[0]));
+
+  useHook();
+  const s2 = new Set();
+  for (const el of s1.values()) {
+    s2.add(el);
+  }
+
+  return [s1, s2];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{propArr: [7, 8, 9]}],
+  sequentialRenders: [
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 10]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { makeArray, useHook } from "shared-runtime";
+
+function useFoo(t0) {
+  const { propArr } = t0;
+  const s1 = new Set([1, 2, 3]);
+  s1.add(makeArray(propArr[0]));
+
+  useHook();
+  const s2 = new Set();
+  for (const el of s1.values()) {
+    s2.add(el);
+  }
+  return [s1, s2];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ propArr: [7, 8, 9] }],
+  sequentialRenders: [
+    { propArr: [7, 8, 9] },
+    { propArr: [7, 8, 9] },
+    { propArr: [7, 8, 10] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"kind":"Set","value":[1,2,3,[7]]},{"kind":"Set","value":[1,2,3,"[[ cyclic ref *2 ]]"]}]
+[{"kind":"Set","value":[1,2,3,[7]]},{"kind":"Set","value":[1,2,3,"[[ cyclic ref *2 ]]"]}]
+[{"kind":"Set","value":[1,2,3,[7]]},{"kind":"Set","value":[1,2,3,"[[ cyclic ref *2 ]]"]}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.ts
new file mode 100644
index 00000000000..63574c4bc3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.ts
@@ -0,0 +1,24 @@
+import {makeArray, useHook} from 'shared-runtime';
+
+function useFoo({propArr}: {propArr: Array<number>}) {
+  const s1 = new Set<number | Array<number>>([1, 2, 3]);
+  s1.add(makeArray(propArr[0]));
+
+  useHook();
+  const s2 = new Set();
+  for (const el of s1.values()) {
+    s2.add(el);
+  }
+
+  return [s1, s2];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{propArr: [7, 8, 9]}],
+  sequentialRenders: [
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 9]},
+    {propArr: [7, 8, 10]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.expect.md
new file mode 100644
index 00000000000..8c66b1f6788
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = new Set(arr).forEach(mutateAndReturn);
+  return <Stringify>{[...derived]}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}, {value: 7}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutateAndReturn, Stringify, useIdentity } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  const arr = [{ value: "foo" }, { value: "bar" }, { value }];
+  useIdentity();
+  const derived = new Set(arr).forEach(mutateAndReturn);
+  let t1;
+  if ($[0] !== derived) {
+    t1 = <Stringify>{[...derived]}</Stringify>;
+    $[0] = derived;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 5 }],
+  sequentialRenders: [{ value: 5 }, { value: 6 }, { value: 6 }, { value: 7 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: derived is not iterable ]]
+[[ (exception in render) TypeError: derived is not iterable ]]
+[[ (exception in render) TypeError: derived is not iterable ]]
+[[ (exception in render) TypeError: derived is not iterable ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.tsx
new file mode 100644
index 00000000000..b5d558e9288
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.tsx
@@ -0,0 +1,14 @@
+import {mutateAndReturn, Stringify, useIdentity} from 'shared-runtime';
+
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity();
+  const derived = new Set(arr).forEach(mutateAndReturn);
+  return <Stringify>{[...derived]}</Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 5}],
+  sequentialRenders: [{value: 5}, {value: 6}, {value: 6}, {value: 7}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Boolean.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Boolean.expect.md
new file mode 100644
index 00000000000..d3bd149d358
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Boolean.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  const y = Boolean(x);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const y = Boolean(x);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [x, y];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Boolean.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Boolean.js
new file mode 100644
index 00000000000..556c9fb680f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Boolean.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const x = {};
+  const y = Boolean(x);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Number.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Number.expect.md
new file mode 100644
index 00000000000..6aaccb79173
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Number.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  const y = Number(x);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const y = Number(x);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [x, y];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Number.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Number.js
new file mode 100644
index 00000000000..5272b0fccab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-Number.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const x = {};
+  const y = Number(x);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-String.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-String.expect.md
new file mode 100644
index 00000000000..5c4978bd290
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-String.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  const y = String(x);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const y = String(x);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [x, y];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-String.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-String.js
new file mode 100644
index 00000000000..816167350f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-String.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const x = {};
+  const y = String(x);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-dont-resolve-local-useState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-dont-resolve-local-useState.expect.md
new file mode 100644
index 00000000000..be7f3f1bd28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-dont-resolve-local-useState.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {useState as _useState, useCallback, useEffect} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function useState(value) {
+  const [state, setState] = _useState(value);
+  return [state, setState];
+}
+
+function Component() {
+  const [state, setState] = useState('hello');
+
+  return <div onClick={() => setState('goodbye')}>{state}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState as _useState, useCallback, useEffect } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function useState(value) {
+  const $ = _c(2);
+  const [state, setState] = _useState(value);
+  let t0;
+  if ($[0] !== state) {
+    t0 = [state, setState];
+    $[0] = state;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Component() {
+  const $ = _c(5);
+  const [state, setState] = useState("hello");
+  let t0;
+  if ($[0] !== setState) {
+    t0 = () => setState("goodbye");
+    $[0] = setState;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== state || $[3] !== t0) {
+    t1 = <div onClick={t0}>{state}</div>;
+    $[2] = state;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-dont-resolve-local-useState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-dont-resolve-local-useState.js
new file mode 100644
index 00000000000..ad0660fd625
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/globals-dont-resolve-local-useState.js
@@ -0,0 +1,18 @@
+import {useState as _useState, useCallback, useEffect} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function useState(value) {
+  const [state, setState] = _useState(value);
+  return [state, setState];
+}
+
+function Component() {
+  const [state, setState] = useState('hello');
+
+  return <div onClick={() => setState('goodbye')}>{state}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md
new file mode 100644
index 00000000000..97a2615f43c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+//@flow
+component Foo() {
+  function foo() {
+    return (
+      <div>
+        {a} {z} {y}
+      </div>
+    );
+  }
+  const [a, {x: z, y = 10}] = [1, {x: 2}];
+  return foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const foo = function foo() {
+      return (
+        <div>
+          {a} {z} {y}
+        </div>
+      );
+    };
+    const [t1, t2] = [1, { x: 2 }];
+    const a = t1;
+    const { x: t3, y: t4 } = t2;
+    const z = t3;
+    const y = t4 === undefined ? 10 : t4;
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>1 2 10</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js
new file mode 100644
index 00000000000..a1c52534944
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js
@@ -0,0 +1,17 @@
+//@flow
+component Foo() {
+  function foo() {
+    return (
+      <div>
+        {a} {z} {y}
+      </div>
+    );
+  }
+  const [a, {x: z, y = 10}] = [1, {x: 2}];
+  return foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-context-variable-in-outlined-fn.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-context-variable-in-outlined-fn.expect.md
new file mode 100644
index 00000000000..cbcb4486d92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-context-variable-in-outlined-fn.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+import {CONST_TRUE, useIdentity} from 'shared-runtime';
+
+const hidden = CONST_TRUE;
+function useFoo() {
+  const makeCb = useIdentity(() => {
+    const logIntervalId = () => {
+      log(intervalId);
+    };
+
+    let intervalId;
+    if (!hidden) {
+      intervalId = 2;
+    }
+    return () => {
+      logIntervalId();
+    };
+  });
+
+  return <Stringify fn={makeCb()} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_TRUE, useIdentity } from "shared-runtime";
+
+const hidden = CONST_TRUE;
+function useFoo() {
+  const $ = _c(4);
+  const makeCb = useIdentity(_temp);
+  let t0;
+  if ($[0] !== makeCb) {
+    t0 = makeCb();
+    $[0] = makeCb;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = <Stringify fn={t0} shouldInvokeFns={true} />;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+function _temp() {
+  const logIntervalId = () => {
+    log(intervalId);
+  };
+  let intervalId;
+  if (!hidden) {
+    intervalId = 2;
+  }
+  return () => {
+    logIntervalId();
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) Stringify is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-context-variable-in-outlined-fn.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-context-variable-in-outlined-fn.js
new file mode 100644
index 00000000000..a87a35ddba2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-context-variable-in-outlined-fn.js
@@ -0,0 +1,25 @@
+import {CONST_TRUE, useIdentity} from 'shared-runtime';
+
+const hidden = CONST_TRUE;
+function useFoo() {
+  const makeCb = useIdentity(() => {
+    const logIntervalId = () => {
+      log(intervalId);
+    };
+
+    let intervalId;
+    if (!hidden) {
+      intervalId = 2;
+    }
+    return () => {
+      logIntervalId();
+    };
+  });
+
+  return <Stringify fn={makeCb()} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-declaration-with-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-declaration-with-scope.expect.md
new file mode 100644
index 00000000000..503b0cbc4f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-declaration-with-scope.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {StaticText1, Stringify, identity, useHook} from 'shared-runtime';
+
+/**
+ * `button` and `dispatcher` must end up in the same memo block. It would be
+ * invalid for `button` to take a dependency on `dispatcher` as dispatcher
+ * is created later.
+ */
+function useFoo({onClose}) {
+  const button = StaticText1 ?? (
+    <Stringify
+      primary={{
+        label: identity('label'),
+        onPress: onClose,
+      }}
+      secondary={{
+        onPress: () => {
+          dispatcher.go('route2');
+        },
+      }}
+    />
+  );
+
+  const dispatcher = useHook();
+
+  return button;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{onClose: identity()}],
+};
+
+```
+
+## Code
+
+```javascript
+import { StaticText1, Stringify, identity, useHook } from "shared-runtime";
+
+/**
+ * `button` and `dispatcher` must end up in the same memo block. It would be
+ * invalid for `button` to take a dependency on `dispatcher` as dispatcher
+ * is created later.
+ */
+function useFoo(t0) {
+  const { onClose } = t0;
+  const button = StaticText1 ?? (
+    <Stringify
+      primary={{ label: identity("label"), onPress: onClose }}
+      secondary={{
+        onPress: () => {
+          dispatcher.go("route2");
+        },
+      }}
+    />
+  );
+
+  const dispatcher = useHook();
+  return button;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ onClose: identity() }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=1 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-declaration-with-scope.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-declaration-with-scope.tsx
new file mode 100644
index 00000000000..c08248c413a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-declaration-with-scope.tsx
@@ -0,0 +1,31 @@
+import {StaticText1, Stringify, identity, useHook} from 'shared-runtime';
+
+/**
+ * `button` and `dispatcher` must end up in the same memo block. It would be
+ * invalid for `button` to take a dependency on `dispatcher` as dispatcher
+ * is created later.
+ */
+function useFoo({onClose}) {
+  const button = StaticText1 ?? (
+    <Stringify
+      primary={{
+        label: identity('label'),
+        onPress: onClose,
+      }}
+      secondary={{
+        onPress: () => {
+          dispatcher.go('route2');
+        },
+      }}
+    />
+  );
+
+  const dispatcher = useHook();
+
+  return button;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{onClose: identity()}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-function-declaration.expect.md
new file mode 100644
index 00000000000..aa3246614ab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-function-declaration.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let t = {a};
+  x(t); // hoisted call
+  function x(p) {
+    p.a.foo();
+  }
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [
+    {
+      foo: () => {
+        console.log(42);
+      },
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let t;
+  if ($[0] !== a) {
+    t = { a };
+    x(t);
+    function x(p) {
+      p.a.foo();
+    }
+    $[0] = a;
+    $[1] = t;
+  } else {
+    t = $[1];
+  }
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [
+    {
+      foo: () => {
+        console.log(42);
+      },
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":{"foo":"[[ function params=0 ]]"}}
+logs: [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-function-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-function-declaration.js
new file mode 100644
index 00000000000..6fe6dc04cc9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisted-function-declaration.js
@@ -0,0 +1,19 @@
+function component(a) {
+  let t = {a};
+  x(t); // hoisted call
+  function x(p) {
+    p.a.foo();
+  }
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [
+    {
+      foo: () => {
+        console.log(42);
+      },
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md
new file mode 100644
index 00000000000..db1168548bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function hoisting() {
+  function onClick() {
+    return bar['baz'];
+  }
+  function onClick2() {
+    return bar[baz];
+  }
+  const baz = 'baz';
+  const bar = {baz: 1};
+
+  return (
+    <Stringify onClick={onClick} onClick2={onClick2} shouldInvokeFns={true} />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onClick = function onClick() {
+      return bar.baz;
+    };
+    const onClick2 = function onClick2() {
+      return bar[baz];
+    };
+    const baz = "baz";
+    const bar = { baz: 1 };
+    t0 = (
+      <Stringify onClick={onClick} onClick2={onClick2} shouldInvokeFns={true} />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"onClick":{"kind":"Function","result":1},"onClick2":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.js
new file mode 100644
index 00000000000..f0dca8d788b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.js
@@ -0,0 +1,21 @@
+import {Stringify} from 'shared-runtime';
+
+function hoisting() {
+  function onClick() {
+    return bar['baz'];
+  }
+  function onClick2() {
+    return bar[baz];
+  }
+  const baz = 'baz';
+  const bar = {baz: 1};
+
+  return (
+    <Stringify onClick={onClick} onClick2={onClick2} shouldInvokeFns={true} />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.expect.md
new file mode 100644
index 00000000000..4c032f697f0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+/**
+ * We currently hoist the accessed properties of function expressions,
+ * regardless of control flow. This is simply because we wrote support for
+ * function expressions before doing a lot of work in PropagateScopeDeps
+ * to handle conditionally accessed dependencies.
+ *
+ * Current evaluator error:
+ *  Found differences in evaluator results
+ *  Non-forget (expected):
+ *  (kind: ok) <div>{"shouldInvokeFns":true,"callback":{"kind":"Function","result":null}}</div>
+ *  Forget:
+ *  (kind: exception) Cannot read properties of null (reading 'prop')
+ */
+function Component({obj, isObjNull}) {
+  const callback = () => {
+    if (!isObjNull) {
+      return obj.prop;
+    } else {
+      return null;
+    }
+  };
+  return <Stringify shouldInvokeFns={true} callback={callback} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{obj: null, isObjNull: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+/**
+ * We currently hoist the accessed properties of function expressions,
+ * regardless of control flow. This is simply because we wrote support for
+ * function expressions before doing a lot of work in PropagateScopeDeps
+ * to handle conditionally accessed dependencies.
+ *
+ * Current evaluator error:
+ *  Found differences in evaluator results
+ *  Non-forget (expected):
+ *  (kind: ok) <div>{"shouldInvokeFns":true,"callback":{"kind":"Function","result":null}}</div>
+ *  Forget:
+ *  (kind: exception) Cannot read properties of null (reading 'prop')
+ */
+function Component(t0) {
+  const $ = _c(3);
+  const { obj, isObjNull } = t0;
+  let t1;
+  if ($[0] !== isObjNull || $[1] !== obj) {
+    const callback = () => {
+      if (!isObjNull) {
+        return obj.prop;
+      } else {
+        return null;
+      }
+    };
+    t1 = <Stringify shouldInvokeFns={true} callback={callback} />;
+    $[0] = isObjNull;
+    $[1] = obj;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ obj: null, isObjNull: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"shouldInvokeFns":true,"callback":{"kind":"Function","result":null}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.tsx
new file mode 100644
index 00000000000..0293779f731
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.tsx
@@ -0,0 +1,30 @@
+import {Stringify} from 'shared-runtime';
+
+/**
+ * We currently hoist the accessed properties of function expressions,
+ * regardless of control flow. This is simply because we wrote support for
+ * function expressions before doing a lot of work in PropagateScopeDeps
+ * to handle conditionally accessed dependencies.
+ *
+ * Current evaluator error:
+ *  Found differences in evaluator results
+ *  Non-forget (expected):
+ *  (kind: ok) <div>{"shouldInvokeFns":true,"callback":{"kind":"Function","result":null}}</div>
+ *  Forget:
+ *  (kind: exception) Cannot read properties of null (reading 'prop')
+ */
+function Component({obj, isObjNull}) {
+  const callback = () => {
+    if (!isObjNull) {
+      return obj.prop;
+    } else {
+      return null;
+    }
+  };
+  return <Stringify shouldInvokeFns={true} callback={callback} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{obj: null, isObjNull: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.expect.md
new file mode 100644
index 00000000000..4951aaa9f30
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Foo() {
+  const getX = () => x;
+  console.log(getX());
+
+  let x = 4;
+  x += 5;
+
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(2);
+  let getX;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    getX = () => x;
+    console.log(getX());
+
+    let x = 4;
+    x = x + 5;
+    $[0] = getX;
+  } else {
+    getX = $[0];
+  }
+  x;
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify getX={getX} shouldInvokeFns={true} />;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) Cannot access 'x' before initialization
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.js
new file mode 100644
index 00000000000..4097ee37970
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.js
@@ -0,0 +1,14 @@
+function Foo() {
+  const getX = () => x;
+  console.log(getX());
+
+  let x = 4;
+  x += 5;
+
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-let-declaration-without-initialization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-let-declaration-without-initialization.expect.md
new file mode 100644
index 00000000000..a67bd73fa82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-let-declaration-without-initialization.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {CONST_NUMBER1, Stringify} from 'shared-runtime';
+
+function useHook({cond}) {
+  'use memo';
+  const getX = () => x;
+
+  let x;
+  if (cond) {
+    x = CONST_NUMBER1;
+  }
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {},
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}, {cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_NUMBER1, Stringify } from "shared-runtime";
+
+function useHook(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { cond } = t0;
+  let t1;
+  if ($[0] !== cond) {
+    const getX = () => x;
+    let x;
+    if (cond) {
+      x = CONST_NUMBER1;
+    }
+    t1 = <Stringify getX={getX} shouldInvokeFns={true} />;
+    $[0] = cond;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {},
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: true }, { cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-let-declaration-without-initialization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-let-declaration-without-initialization.js
new file mode 100644
index 00000000000..cc413195156
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-let-declaration-without-initialization.js
@@ -0,0 +1,18 @@
+import {CONST_NUMBER1, Stringify} from 'shared-runtime';
+
+function useHook({cond}) {
+  'use memo';
+  const getX = () => x;
+
+  let x;
+  if (cond) {
+    x = CONST_NUMBER1;
+  }
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: () => {},
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}, {cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md
new file mode 100644
index 00000000000..441dab58814
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function hoisting() {
+  function onClick(x) {
+    return x + bar.baz;
+  }
+  const bar = {baz: 1};
+
+  return <Stringify onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onClick = function onClick(x) {
+      return x + bar.baz;
+    };
+    const bar = { baz: 1 };
+    t0 = <Stringify onClick={onClick} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"onClick":"[[ function params=1 ]]"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.js
new file mode 100644
index 00000000000..30fdc90a3f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.js
@@ -0,0 +1,16 @@
+import {Stringify} from 'shared-runtime';
+
+function hoisting() {
+  function onClick(x) {
+    return x + bar.baz;
+  }
+  const bar = {baz: 1};
+
+  return <Stringify onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-block-statements.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-block-statements.expect.md
new file mode 100644
index 00000000000..fd62da1e4e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-block-statements.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+import {print} from 'shared-runtime';
+
+function hoisting(cond) {
+  if (cond) {
+    const x = 1;
+    print(x);
+  }
+
+  const x = 2;
+  print(x);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [false],
+};
+
+```
+
+## Code
+
+```javascript
+import { print } from "shared-runtime";
+
+function hoisting(cond) {
+  if (cond) {
+    print(1);
+  }
+
+  print(2);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [false],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-block-statements.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-block-statements.js
new file mode 100644
index 00000000000..66480a62de9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-block-statements.js
@@ -0,0 +1,16 @@
+import {print} from 'shared-runtime';
+
+function hoisting(cond) {
+  if (cond) {
+    const x = 1;
+    print(x);
+  }
+
+  const x = 2;
+  print(x);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [false],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration-2.expect.md
new file mode 100644
index 00000000000..c14b8ab2db9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration-2.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function hoisting(cond) {
+  let items = [];
+  if (cond) {
+    const foo = () => {
+      items.push(bar());
+    };
+    const bar = () => true;
+    foo();
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting(cond) {
+  const $ = _c(2);
+  let items;
+  if ($[0] !== cond) {
+    items = [];
+    if (cond) {
+      const foo = () => {
+        items.push(bar());
+      };
+
+      const bar = _temp;
+      foo();
+    }
+    $[0] = cond;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+function _temp() {
+  return true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [true]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration-2.js
new file mode 100644
index 00000000000..c109660661d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration-2.js
@@ -0,0 +1,17 @@
+function hoisting(cond) {
+  let items = [];
+  if (cond) {
+    const foo = () => {
+      items.push(bar());
+    };
+    const bar = () => true;
+    foo();
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration.expect.md
new file mode 100644
index 00000000000..2b661a58b42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  const qux = () => {
+    let result;
+    {
+      result = foo();
+    }
+    return result;
+  };
+  const foo = () => {
+    return bar + baz;
+  };
+  const bar = 3;
+  const baz = 2;
+  return qux(); // OK: called outside of TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const qux = () => {
+      let result;
+      result = foo();
+      return result;
+    };
+    const foo = () => bar + baz;
+    const bar = 3;
+    const baz = 2;
+    t0 = qux();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration.js
new file mode 100644
index 00000000000..fda070951c8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-const-declaration.js
@@ -0,0 +1,21 @@
+function hoisting() {
+  const qux = () => {
+    let result;
+    {
+      result = foo();
+    }
+    return result;
+  };
+  const foo = () => {
+    return bar + baz;
+  };
+  const bar = 3;
+  const baz = 2;
+  return qux(); // OK: called outside of TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md
new file mode 100644
index 00000000000..fe0c6618f51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function hoisting(cond) {
+  let items = [];
+  if (cond) {
+    let foo = () => {
+      items.push(bar());
+    };
+    let bar = () => true;
+    foo();
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting(cond) {
+  const $ = _c(2);
+  let items;
+  if ($[0] !== cond) {
+    items = [];
+    if (cond) {
+      const foo = () => {
+        items.push(bar());
+      };
+
+      let bar = _temp;
+      foo();
+    }
+    $[0] = cond;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+function _temp() {
+  return true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [true]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js
new file mode 100644
index 00000000000..27b8a8fff60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js
@@ -0,0 +1,17 @@
+function hoisting(cond) {
+  let items = [];
+  if (cond) {
+    let foo = () => {
+      items.push(bar());
+    };
+    let bar = () => true;
+    foo();
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md
new file mode 100644
index 00000000000..cd2a9d32538
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  let qux = () => {
+    let result;
+    {
+      result = foo();
+    }
+    return result;
+  };
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  const baz = 2;
+  return qux(); // OK: called outside of TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const qux = () => {
+      let result;
+      result = foo();
+      return result;
+    };
+    let foo = () => bar + baz;
+    let bar = 3;
+    const baz = 2;
+    t0 = qux();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js
new file mode 100644
index 00000000000..c4c8f2aa4c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js
@@ -0,0 +1,21 @@
+function hoisting() {
+  let qux = () => {
+    let result;
+    {
+      result = foo();
+    }
+    return result;
+  };
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  const baz = 2;
+  return qux(); // OK: called outside of TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-object-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-object-method.expect.md
new file mode 100644
index 00000000000..bc7c402b941
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-object-method.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  const x = {
+    foo() {
+      return bar();
+    },
+  };
+  const bar = () => {
+    return 1;
+  };
+
+  return x.foo(); // OK: bar's value is only accessed outside of its TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = {
+      foo() {
+        return bar();
+      },
+    };
+    const bar = _temp;
+    t0 = x.foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-object-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-object-method.js
new file mode 100644
index 00000000000..05739909e2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-object-method.js
@@ -0,0 +1,17 @@
+function hoisting() {
+  const x = {
+    foo() {
+      return bar();
+    },
+  };
+  const bar = () => {
+    return 1;
+  };
+
+  return x.foo(); // OK: bar's value is only accessed outside of its TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.expect.md
new file mode 100644
index 00000000000..f393597719d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {CONST_NUMBER0, CONST_NUMBER1, Stringify} from 'shared-runtime';
+
+function useHook({cond}) {
+  'use memo';
+  const getX = () => x;
+
+  let x = CONST_NUMBER0;
+  if (cond) {
+    x += CONST_NUMBER1;
+  }
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}, {cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_NUMBER0, CONST_NUMBER1, Stringify } from "shared-runtime";
+
+function useHook(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { cond } = t0;
+  let t1;
+  if ($[0] !== cond) {
+    const getX = () => x;
+    let x = CONST_NUMBER0;
+    if (cond) {
+      x = x + CONST_NUMBER1;
+      x;
+    }
+    t1 = <Stringify getX={getX} shouldInvokeFns={true} />;
+    $[0] = cond;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: true }, { cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getX":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"getX":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"getX":{"kind":"Function","result":0},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.js
new file mode 100644
index 00000000000..e8d55039bef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.js
@@ -0,0 +1,18 @@
+import {CONST_NUMBER0, CONST_NUMBER1, Stringify} from 'shared-runtime';
+
+function useHook({cond}) {
+  'use memo';
+  const getX = () => x;
+
+  let x = CONST_NUMBER0;
+  if (cond) {
+    x += CONST_NUMBER1;
+  }
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}, {cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.expect.md
new file mode 100644
index 00000000000..7d6461e3a9f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {CONST_NUMBER0, CONST_NUMBER1, Stringify} from 'shared-runtime';
+
+function useHook({cond}) {
+  'use memo';
+  const getX = () => x;
+
+  let x = CONST_NUMBER0;
+  if (cond) {
+    x += CONST_NUMBER1;
+    x = Math.min(x, 100);
+  }
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}, {cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_NUMBER0, CONST_NUMBER1, Stringify } from "shared-runtime";
+
+function useHook(t0) {
+  "use memo";
+  const $ = _c(2);
+  const { cond } = t0;
+  let t1;
+  if ($[0] !== cond) {
+    const getX = () => x;
+    let x = CONST_NUMBER0;
+    if (cond) {
+      x = x + CONST_NUMBER1;
+      x;
+      x = Math.min(x, 100);
+    }
+    t1 = <Stringify getX={getX} shouldInvokeFns={true} />;
+    $[0] = cond;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: true }, { cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getX":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"getX":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"getX":{"kind":"Function","result":0},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.js
new file mode 100644
index 00000000000..2c2b8187eff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.js
@@ -0,0 +1,19 @@
+import {CONST_NUMBER0, CONST_NUMBER1, Stringify} from 'shared-runtime';
+
+function useHook({cond}) {
+  'use memo';
+  const getX = () => x;
+
+  let x = CONST_NUMBER0;
+  if (cond) {
+    x += CONST_NUMBER1;
+    x = Math.min(x, 100);
+  }
+  return <Stringify getX={getX} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}, {cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call-within-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call-within-lambda.expect.md
new file mode 100644
index 00000000000..7d5a6112ed7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call-within-lambda.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function Foo({}) {
+  const outer = val => {
+    const fact = x => {
+      if (x <= 0) {
+        return 1;
+      }
+      return x * fact(x - 1);
+    };
+    return fact(val);
+  };
+  return outer(3);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(t0) {
+  const $ = _c(1);
+  const outer = _temp;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = outer(3);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+function _temp(val) {
+  const fact = (x) => {
+    if (x <= 0) {
+      return 1;
+    }
+    return x * fact(x - 1);
+  };
+  return fact(val);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 6
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call-within-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call-within-lambda.js
new file mode 100644
index 00000000000..f3cd8932c76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call-within-lambda.js
@@ -0,0 +1,17 @@
+function Foo({}) {
+  const outer = val => {
+    const fact = x => {
+      if (x <= 0) {
+        return 1;
+      }
+      return x * fact(x - 1);
+    };
+    return fact(val);
+  };
+  return outer(3);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call.expect.md
new file mode 100644
index 00000000000..61fbfc5efec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function Foo({value}: {value: number}) {
+  const factorial = (x: number) => {
+    if (x <= 1) {
+      return 1;
+    } else {
+      return x * factorial(x - 1);
+    }
+  };
+
+  return factorial(value);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    const factorial = (x) => {
+      if (x <= 1) {
+        return 1;
+      } else {
+        return x * factorial(x - 1);
+      }
+    };
+    t1 = factorial(value);
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ value: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 6
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call.ts
new file mode 100644
index 00000000000..21d693ac25d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-recursive-call.ts
@@ -0,0 +1,16 @@
+function Foo({value}: {value: number}) {
+  const factorial = (x: number) => {
+    if (x <= 1) {
+      return 1;
+    } else {
+      return x * factorial(x - 1);
+    }
+  };
+
+  return factorial(value);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-repro-variable-used-in-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-repro-variable-used-in-assignment.expect.md
new file mode 100644
index 00000000000..a4775bc45be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-repro-variable-used-in-assignment.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function get2() {
+  const callbk = () => {
+    const copy = x;
+    return copy;
+  };
+  const x = 2;
+  return callbk();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: get2,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function get2() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const callbk = () => {
+      const copy = x;
+      return copy;
+    };
+    const x = 2;
+    t0 = callbk();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: get2,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-repro-variable-used-in-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-repro-variable-used-in-assignment.js
new file mode 100644
index 00000000000..5970998a9d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-repro-variable-used-in-assignment.js
@@ -0,0 +1,13 @@
+function get2() {
+  const callbk = () => {
+    const copy = x;
+    return copy;
+  };
+  const x = 2;
+  return callbk();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: get2,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.expect.md
new file mode 100644
index 00000000000..9397518d2d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+function useFoo() {
+  const onClick = response => {
+    setState(DISABLED_FORM);
+  };
+
+  const [state, setState] = useState();
+  const handleLogout = useCallback(() => {
+    setState(DISABLED_FORM);
+  }, [setState]);
+  const getComponent = () => {
+    return <ColumnItem onPress={() => handleLogout()} />;
+  };
+
+  // this `getComponent` call should not be inferred as mutating setState
+  return [getComponent(), onClick]; // pass onClick to avoid dce
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+function useFoo() {
+  const $ = _c(7);
+  const onClick = (response) => {
+    setState(DISABLED_FORM);
+  };
+
+  const [, t0] = useState();
+  const setState = t0;
+  let t1;
+  if ($[0] !== setState) {
+    t1 = () => {
+      setState(DISABLED_FORM);
+    };
+    $[0] = setState;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  setState;
+  const handleLogout = t1;
+  let t2;
+  if ($[2] !== handleLogout) {
+    const getComponent = () => <ColumnItem onPress={() => handleLogout()} />;
+    t2 = getComponent();
+    $[2] = handleLogout;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== onClick || $[5] !== t2) {
+    t3 = [t2, onClick];
+    $[4] = onClick;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.js
new file mode 100644
index 00000000000..4a44679390a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.js
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+function useFoo() {
+  const onClick = response => {
+    setState(DISABLED_FORM);
+  };
+
+  const [state, setState] = useState();
+  const handleLogout = useCallback(() => {
+    setState(DISABLED_FORM);
+  }, [setState]);
+  const getComponent = () => {
+    return <ColumnItem onPress={() => handleLogout()} />;
+  };
+
+  // this `getComponent` call should not be inferred as mutating setState
+  return [getComponent(), onClick]; // pass onClick to avoid dce
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.expect.md
new file mode 100644
index 00000000000..7939c9143d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  const foo = () => {
+    return bar + baz;
+  };
+  const bar = 3;
+  const baz = 2;
+  return foo(); // OK: called outside of TDZ for bar/baz
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let foo;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    foo = () => bar + baz;
+
+    const bar = 3;
+    const baz = 2;
+    $[0] = foo;
+  } else {
+    foo = $[0];
+  }
+  return foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.js
new file mode 100644
index 00000000000..dd4aea4c555
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.js
@@ -0,0 +1,14 @@
+function hoisting() {
+  const foo = () => {
+    return bar + baz;
+  };
+  const bar = 3;
+  const baz = 2;
+  return foo(); // OK: called outside of TDZ for bar/baz
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-function-expression.expect.md
new file mode 100644
index 00000000000..2df5c8ec44e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-function-expression.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  const foo = () => {
+    return bar();
+  };
+  const bar = () => {
+    return 1;
+  };
+
+  return foo(); // OK: bar's value is only accessed outside of its TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const foo = () => bar();
+    const bar = _temp;
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-function-expression.js
new file mode 100644
index 00000000000..785c4181e71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-function-expression.js
@@ -0,0 +1,16 @@
+function hoisting() {
+  const foo = () => {
+    return bar();
+  };
+  const bar = () => {
+    return 1;
+  };
+
+  return foo(); // OK: bar's value is only accessed outside of its TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md
new file mode 100644
index 00000000000..8d694a984ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  let baz = 2;
+  return foo(); // OK: called outside of TDZ for bar/baz
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let foo;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    foo = () => bar + baz;
+
+    let bar = 3;
+    let baz = 2;
+    $[0] = foo;
+  } else {
+    foo = $[0];
+  }
+  return foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js
new file mode 100644
index 00000000000..b9a02619f5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js
@@ -0,0 +1,14 @@
+function hoisting() {
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  let baz = 2;
+  return foo(); // OK: called outside of TDZ for bar/baz
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-within-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-within-lambda.expect.md
new file mode 100644
index 00000000000..95338be52aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-within-lambda.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component({}) {
+  const outer = () => {
+    const inner = () => {
+      return x;
+    };
+    const x = 3;
+    return inner();
+  };
+  return <div>{outer()}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(1);
+  const outer = _temp;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{outer()}</div>;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+function _temp() {
+  const inner = () => x;
+  const x = 3;
+  return inner();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>3</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-within-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-within-lambda.js
new file mode 100644
index 00000000000..934123cfa66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-within-lambda.js
@@ -0,0 +1,15 @@
+function Component({}) {
+  const outer = () => {
+    const inner = () => {
+      return x;
+    };
+    const x = 3;
+    return inner();
+  };
+  return <div>{outer()}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-expr.expect.md
new file mode 100644
index 00000000000..d31fa0b1cc9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-expr.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+import {CONST_STRING0} from 'shared-runtime';
+
+function t(props) {
+  let x = [, CONST_STRING0, props];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: [{a: 1, b: 2}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_STRING0 } from "shared-runtime";
+
+function t(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = [, CONST_STRING0, props];
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: [{ a: 1, b: 2 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [null,"global string 0",{"a":1,"b":2}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-expr.js
new file mode 100644
index 00000000000..62a3ef1d25c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-expr.js
@@ -0,0 +1,12 @@
+import {CONST_STRING0} from 'shared-runtime';
+
+function t(props) {
+  let x = [, CONST_STRING0, props];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: [{a: 1, b: 2}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce-2.expect.md
new file mode 100644
index 00000000000..acf7e2d009e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce-2.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function t(props) {
+  let [foo, bar, ,] = props;
+  return foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function t(props) {
+  const [foo] = props;
+  return foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce-2.js
new file mode 100644
index 00000000000..c963c10e42e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce-2.js
@@ -0,0 +1,10 @@
+function t(props) {
+  let [foo, bar, ,] = props;
+  return foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce.expect.md
new file mode 100644
index 00000000000..00f70eca4ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function t(props) {
+  let [, foo, bar] = props;
+  return foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function t(props) {
+  const [, foo] = props;
+  return foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce.js
new file mode 100644
index 00000000000..edf881e5f67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array-pattern-dce.js
@@ -0,0 +1,10 @@
+function t(props) {
+  let [, foo, bar] = props;
+  return foo;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: t,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call-freezes-captured-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call-freezes-captured-memberexpr.expect.md
new file mode 100644
index 00000000000..957919516d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call-freezes-captured-memberexpr.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+import {useIdentity, Stringify, identity} from 'shared-runtime';
+
+function Foo({val1}) {
+  // `x={inner: val1}` should be able to be memoized
+  const x = {inner: val1};
+
+  // Any references to `x` after this hook call should be read-only
+  const cb = useIdentity(() => x.inner);
+
+  // With enableTransitivelyFreezeFunctionExpressions, it's invalid
+  // to write to `x` after it's been frozen.
+  // TODO: runtime validation for DX
+  const copy = identity(x);
+  return <Stringify copy={copy} cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{val1: 1}],
+  sequentialRenders: [{val1: 1}, {val1: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useIdentity, Stringify, identity } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(9);
+  const { val1 } = t0;
+  let t1;
+  if ($[0] !== val1) {
+    t1 = { inner: val1 };
+    $[0] = val1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let t2;
+  if ($[2] !== x.inner) {
+    t2 = () => x.inner;
+    $[2] = x.inner;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const cb = useIdentity(t2);
+  let t3;
+  if ($[4] !== x) {
+    t3 = identity(x);
+    $[4] = x;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const copy = t3;
+  let t4;
+  if ($[6] !== cb || $[7] !== copy) {
+    t4 = <Stringify copy={copy} cb={cb} shouldInvokeFns={true} />;
+    $[6] = cb;
+    $[7] = copy;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ val1: 1 }],
+  sequentialRenders: [{ val1: 1 }, { val1: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"copy":{"inner":1},"cb":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"copy":{"inner":1},"cb":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call-freezes-captured-memberexpr.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call-freezes-captured-memberexpr.tsx
new file mode 100644
index 00000000000..68e8e034379
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call-freezes-captured-memberexpr.tsx
@@ -0,0 +1,21 @@
+import {useIdentity, Stringify, identity} from 'shared-runtime';
+
+function Foo({val1}) {
+  // `x={inner: val1}` should be able to be memoized
+  const x = {inner: val1};
+
+  // Any references to `x` after this hook call should be read-only
+  const cb = useIdentity(() => x.inner);
+
+  // With enableTransitivelyFreezeFunctionExpressions, it's invalid
+  // to write to `x` after it's been frozen.
+  // TODO: runtime validation for DX
+  const copy = identity(x);
+  return <Stringify copy={copy} cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{val1: 1}],
+  sequentialRenders: [{val1: 1}, {val1: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call.expect.md
new file mode 100644
index 00000000000..cd01f8ad98a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function useFreeze() {}
+function foo() {}
+
+function Component(props) {
+  const x = [];
+  const y = useFreeze(x);
+  foo(y, x);
+  return (
+    <Component>
+      {x}
+      {y}
+    </Component>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFreeze() {}
+function foo() {}
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const y = useFreeze(x);
+  foo(y, x);
+  let t1;
+  if ($[1] !== y) {
+    t1 = (
+      <Component>
+        {x}
+        {y}
+      </Component>
+    );
+    $[1] = y;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call.js
new file mode 100644
index 00000000000..f77767cfc8c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-call.js
@@ -0,0 +1,14 @@
+function useFreeze() {}
+function foo() {}
+
+function Component(props) {
+  const x = [];
+  const y = useFreeze(x);
+  foo(y, x);
+  return (
+    <Component>
+      {x}
+      {y}
+    </Component>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.expect.md
new file mode 100644
index 00000000000..d23e808983d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @flow @compilationMode:"infer"
+export default hook useFoo(bar: number) {
+  return [bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [42],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function useFoo(bar) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== bar) {
+    t0 = [bar];
+    $[0] = bar;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [42],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.js
new file mode 100644
index 00000000000..13db3325ceb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.js
@@ -0,0 +1,9 @@
+// @flow @compilationMode:"infer"
+export default hook useFoo(bar: number) {
+  return [bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [42],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.expect.md
new file mode 100644
index 00000000000..51a94698c6d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const user =
+    useFragment(
+      graphql`
+        fragment F on T {
+          id
+        }
+      `,
+      props.user
+    ) ?? {};
+  return user.name;
+}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const user =
+    useFragment(
+      graphql`
+        fragment F on T {
+          id
+        }
+      `,
+      props.user,
+    ) ?? {};
+  return user.name;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.js
new file mode 100644
index 00000000000..81a52e8f871
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-inside-logical-expression.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const user =
+    useFragment(
+      graphql`
+        fragment F on T {
+          id
+        }
+      `,
+      props.user
+    ) ?? {};
+  return user.name;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.expect.md
new file mode 100644
index 00000000000..329d57a0351
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {useNoAlias} from 'shared-runtime';
+
+function Component(props) {
+  const item = {a: props.a};
+  const x = useNoAlias(item, () => {
+    console.log(props);
+  }, [props.a]);
+  return [x, item];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {id: 42}}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useNoAlias } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = { a: props.a };
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const item = t0;
+  const x = useNoAlias(item, () => {
+    console.log(props);
+  }, [props.a]);
+  let t1;
+  if ($[2] !== item || $[3] !== x) {
+    t1 = [x, item];
+    $[2] = item;
+    $[3] = x;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { id: 42 } }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},{"a":{"id":42}}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.js
new file mode 100644
index 00000000000..c04890cbbb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-noAlias.js
@@ -0,0 +1,15 @@
+import {useNoAlias} from 'shared-runtime';
+
+function Component(props) {
+  const item = {a: props.a};
+  const x = useNoAlias(item, () => {
+    console.log(props);
+  }, [props.a]);
+  return [x, item];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {id: 42}}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-property-load-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-property-load-local.expect.md
new file mode 100644
index 00000000000..de49c0c22a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-property-load-local.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function useFoo() {}
+
+function Foo() {
+  let name = useFoo.name;
+  console.log(name);
+  return name;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function useFoo() {}
+
+function Foo() {
+  const name = useFoo.name;
+  console.log(name);
+  return name;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "useFoo"
+logs: ['useFoo']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-property-load-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-property-load-local.js
new file mode 100644
index 00000000000..ec3de1516dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-property-load-local.js
@@ -0,0 +1,12 @@
+function useFoo() {}
+
+function Foo() {
+  let name = useFoo.name;
+  console.log(name);
+  return name;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-ref-callback.expect.md
new file mode 100644
index 00000000000..3056a60a3a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-ref-callback.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+import {useEffect, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  useFoo(() => {
+    ref.current = 42;
+  });
+}
+
+function useFoo(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+
+function Component(props) {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      ref.current = 42;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useFoo(t0);
+}
+
+function useFoo(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-ref-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-ref-callback.js
new file mode 100644
index 00000000000..ab496e0adf0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-ref-callback.js
@@ -0,0 +1,15 @@
+import {useEffect, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef();
+  useFoo(() => {
+    ref.current = 42;
+  });
+}
+
+function useFoo(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-arguments.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-arguments.expect.md
new file mode 100644
index 00000000000..9e7c877303a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-arguments.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component() {
+  const a = [];
+  useFreeze(a); // should freeze
+  useFreeze(a); // should be readonly
+  call(a); // should be readonly
+  return a;
+}
+
+function useFreeze(x) {}
+function call(x) {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const a = t0;
+  useFreeze(a);
+  useFreeze(a);
+  call(a);
+  return a;
+}
+
+function useFreeze(x) {}
+function call(x) {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-arguments.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-arguments.js
new file mode 100644
index 00000000000..cdb1fce7e1d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-arguments.js
@@ -0,0 +1,10 @@
+function Component() {
+  const a = [];
+  useFreeze(a); // should freeze
+  useFreeze(a); // should be readonly
+  call(a); // should be readonly
+  return a;
+}
+
+function useFreeze(x) {}
+function call(x) {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-possibly-mutable-arguments.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-possibly-mutable-arguments.expect.md
new file mode 100644
index 00000000000..448e598029b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-possibly-mutable-arguments.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const cond = props.cond;
+  const x = props.x;
+  let a;
+  if (cond) {
+    a = x;
+  } else {
+    a = [];
+  }
+  useFreeze(a); // should freeze, value *may* be mutable
+  useFreeze(a); // should be readonly
+  call(a); // should be readonly
+  return a;
+}
+
+function useFreeze(x) {}
+function call(x) {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  const cond = props.cond;
+  const x = props.x;
+  let a;
+  if (cond) {
+    a = x;
+  } else {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = [];
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    a = t0;
+  }
+
+  useFreeze(a);
+  useFreeze(a);
+  call(a);
+  return a;
+}
+
+function useFreeze(x) {}
+function call(x) {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-possibly-mutable-arguments.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-possibly-mutable-arguments.js
new file mode 100644
index 00000000000..bcf51ccc4ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-freeze-possibly-mutable-arguments.js
@@ -0,0 +1,17 @@
+function Component(props) {
+  const cond = props.cond;
+  const x = props.x;
+  let a;
+  if (cond) {
+    a = x;
+  } else {
+    a = [];
+  }
+  useFreeze(a); // should freeze, value *may* be mutable
+  useFreeze(a); // should be readonly
+  call(a); // should be readonly
+  return a;
+}
+
+function useFreeze(x) {}
+function call(x) {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-React-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-React-namespace.expect.md
new file mode 100644
index 00000000000..e557cf592c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-React-namespace.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component() {
+  const [x, setX] = React.useState(1);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Component() {
+  const [x] = React.useState(1);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-React-namespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-React-namespace.js
new file mode 100644
index 00000000000..70f18c6cf15
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-React-namespace.js
@@ -0,0 +1,9 @@
+function Component() {
+  const [x, setX] = React.useState(1);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md
new file mode 100644
index 00000000000..1170f6a60a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md
@@ -0,0 +1,95 @@
+
+## Input
+
+```javascript
+// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
+
+import * as React from 'react';
+import {makeArray, useHook} from 'shared-runtime';
+
+const React$useState = React.useState;
+const React$useMemo = React.useMemo;
+const Internal$Reassigned$useHook = useHook;
+
+function Component() {
+  const [state, setState] = React$useState(0);
+  const object = Internal$Reassigned$useHook();
+  const json = JSON.stringify(object);
+  const doubledArray = React$useMemo(() => {
+    return makeArray(state);
+  }, [state]);
+  return (
+    <div>
+      {doubledArray.join('')}
+      {json}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
+
+import * as React from "react";
+import { makeArray, useHook } from "shared-runtime";
+
+const React$useState = React.useState;
+const React$useMemo = React.useMemo;
+const Internal$Reassigned$useHook = useHook;
+
+function Component() {
+  const $ = _c(7);
+  const [state] = React$useState(0);
+  const object = Internal$Reassigned$useHook();
+  let t0;
+  if ($[0] !== object) {
+    t0 = JSON.stringify(object);
+    $[0] = object;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const json = t0;
+  let t1;
+  if ($[2] !== state) {
+    const doubledArray = makeArray(state);
+    t1 = doubledArray.join("");
+    $[2] = state;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== json || $[5] !== t1) {
+    t2 = (
+      <div>
+        {t1}
+        {json}
+      </div>
+    );
+    $[4] = json;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0{"a":0,"b":"value1","c":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js
new file mode 100644
index 00000000000..4db8451bc85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js
@@ -0,0 +1,28 @@
+// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false
+
+import * as React from 'react';
+import {makeArray, useHook} from 'shared-runtime';
+
+const React$useState = React.useState;
+const React$useMemo = React.useMemo;
+const Internal$Reassigned$useHook = useHook;
+
+function Component() {
+  const [state, setState] = React$useState(0);
+  const object = Internal$Reassigned$useHook();
+  const json = JSON.stringify(object);
+  const doubledArray = React$useMemo(() => {
+    return makeArray(state);
+  }, [state]);
+  return (
+    <div>
+      {doubledArray.join('')}
+      {json}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md
new file mode 100644
index 00000000000..e004ef246ab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md
@@ -0,0 +1,113 @@
+
+## Input
+
+```javascript
+// @customMacros:"idx.*.b"
+
+function Component(props) {
+  // outlined
+  const groupName1 = idx(props, _ => _.group.label);
+  // outlined
+  const groupName2 = idx.a(props, _ => _.group.label);
+  // not outlined
+  const groupName3 = idx.a.b(props, _ => _.group.label);
+  // not outlined
+  const groupName4 = idx.hello_world.b(props, _ => _.group.label);
+  // outlined
+  const groupName5 = idx.hello_world.b.c(props, _ => _.group.label);
+  return (
+    <div>
+      {groupName1}
+      {groupName2}
+      {groupName3}
+      {groupName4}
+      {groupName5}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @customMacros:"idx.*.b"
+
+function Component(props) {
+  const $ = _c(16);
+  let t0;
+  if ($[0] !== props) {
+    t0 = idx(props, (_) => _.group.label);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const groupName1 = t0;
+  let t1;
+  if ($[2] !== props) {
+    t1 = idx.a(props, (__0) => __0.group.label);
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const groupName2 = t1;
+  let t2;
+  if ($[4] !== props) {
+    t2 = idx.a.b(props, (__1) => __1.group.label);
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const groupName3 = t2;
+  let t3;
+  if ($[6] !== props) {
+    t3 = idx.hello_world.b(props, (__2) => __2.group.label);
+    $[6] = props;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const groupName4 = t3;
+  let t4;
+  if ($[8] !== props) {
+    t4 = idx.hello_world.b.c(props, (__3) => __3.group.label);
+    $[8] = props;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const groupName5 = t4;
+  let t5;
+  if (
+    $[10] !== groupName1 ||
+    $[11] !== groupName2 ||
+    $[12] !== groupName3 ||
+    $[13] !== groupName4 ||
+    $[14] !== groupName5
+  ) {
+    t5 = (
+      <div>
+        {groupName1}
+        {groupName2}
+        {groupName3}
+        {groupName4}
+        {groupName5}
+      </div>
+    );
+    $[10] = groupName1;
+    $[11] = groupName2;
+    $[12] = groupName3;
+    $[13] = groupName4;
+    $[14] = groupName5;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  return t5;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.js
new file mode 100644
index 00000000000..5a362bbbe71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.js
@@ -0,0 +1,23 @@
+// @customMacros:"idx.*.b"
+
+function Component(props) {
+  // outlined
+  const groupName1 = idx(props, _ => _.group.label);
+  // outlined
+  const groupName2 = idx.a(props, _ => _.group.label);
+  // not outlined
+  const groupName3 = idx.a.b(props, _ => _.group.label);
+  // not outlined
+  const groupName4 = idx.hello_world.b(props, _ => _.group.label);
+  // outlined
+  const groupName5 = idx.hello_world.b.c(props, _ => _.group.label);
+  return (
+    <div>
+      {groupName1}
+      {groupName2}
+      {groupName3}
+      {groupName4}
+      {groupName5}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md
new file mode 100644
index 00000000000..e98fb191ce7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @customMacros:"idx.a"
+
+function Component(props) {
+  // outlined
+  const groupName1 = idx(props, _ => _.group.label);
+  // not outlined
+  const groupName2 = idx.a(props, _ => _.group.label);
+  // outlined
+  const groupName3 = idx.a.b(props, _ => _.group.label);
+  return (
+    <div>
+      {groupName1}
+      {groupName2}
+      {groupName3}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @customMacros:"idx.a"
+
+function Component(props) {
+  const $ = _c(10);
+  let t0;
+  if ($[0] !== props) {
+    t0 = idx(props, (_) => _.group.label);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const groupName1 = t0;
+  let t1;
+  if ($[2] !== props) {
+    t1 = idx.a(props, (__0) => __0.group.label);
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const groupName2 = t1;
+  let t2;
+  if ($[4] !== props) {
+    t2 = idx.a.b(props, (__1) => __1.group.label);
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const groupName3 = t2;
+  let t3;
+  if ($[6] !== groupName1 || $[7] !== groupName2 || $[8] !== groupName3) {
+    t3 = (
+      <div>
+        {groupName1}
+        {groupName2}
+        {groupName3}
+      </div>
+    );
+    $[6] = groupName1;
+    $[7] = groupName2;
+    $[8] = groupName3;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.js
new file mode 100644
index 00000000000..1b2cadb5d9e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.js
@@ -0,0 +1,17 @@
+// @customMacros:"idx.a"
+
+function Component(props) {
+  // outlined
+  const groupName1 = idx(props, _ => _.group.label);
+  // not outlined
+  const groupName2 = idx.a(props, _ => _.group.label);
+  // outlined
+  const groupName3 = idx.a.b(props, _ => _.group.label);
+  return (
+    <div>
+      {groupName1}
+      {groupName2}
+      {groupName3}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.expect.md
new file mode 100644
index 00000000000..aec4231c8dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @customMacros:"idx"
+import idx from 'idx';
+
+function Component(props) {
+  // the lambda should not be outlined
+  const groupName = idx(props, _ => _.group.label);
+  return <div>{groupName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @customMacros:"idx"
+
+function Component(props) {
+  var _ref2;
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props) {
+    var _ref;
+    t0 =
+      (_ref = props) != null
+        ? (_ref = _ref.group) != null
+          ? _ref.label
+          : _ref
+        : _ref;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const groupName = t0;
+  let t1;
+  if ($[2] !== groupName) {
+    t1 = <div>{groupName}</div>;
+    $[2] = groupName;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.js
new file mode 100644
index 00000000000..8cdf205ddd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.js
@@ -0,0 +1,13 @@
+// @customMacros:"idx"
+import idx from 'idx';
+
+function Component(props) {
+  // the lambda should not be outlined
+  const groupName = idx(props, _ => _.group.label);
+  return <div>{groupName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.expect.md
new file mode 100644
index 00000000000..b4d8a4155c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Foo() {
+  type X = number;
+  interface Bar {
+    baz: number;
+  }
+  return 0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Foo() {
+  return 0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.ts
new file mode 100644
index 00000000000..4330642bcf7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-inner-interface-types.ts
@@ -0,0 +1,12 @@
+function Foo() {
+  type X = number;
+  interface Bar {
+    baz: number;
+  }
+  return 0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-use-no-forget.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-use-no-forget.expect.md
new file mode 100644
index 00000000000..b73d7fd31fd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-use-no-forget.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @ignoreUseNoForget
+function Component(prop) {
+  'use no forget';
+  const result = prop.x.toFixed();
+  return <div>{result}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @ignoreUseNoForget
+function Component(prop) {
+  "use no forget";
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== prop.x) {
+    t0 = prop.x.toFixed();
+    $[0] = prop.x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const result = t0;
+  let t1;
+  if ($[2] !== result) {
+    t1 = <div>{result}</div>;
+    $[2] = result;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>1</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-use-no-forget.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-use-no-forget.js
new file mode 100644
index 00000000000..a083298880f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ignore-use-no-forget.js
@@ -0,0 +1,11 @@
+// @ignoreUseNoForget
+function Component(prop) {
+  'use no forget';
+  const result = prop.x.toFixed();
+  return <div>{result}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-inline-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-inline-ternary.expect.md
new file mode 100644
index 00000000000..bf4dddc6fc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-inline-ternary.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = props.foo
+    ? 1
+    : (() => {
+        throw new Error('Did not receive 1');
+      })();
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: true}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  props.foo ? 1 : _temp();
+  return items;
+}
+function _temp() {
+  throw new Error("Did not receive 1");
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: true }],
+};
+
+```
+      
+### Eval output
+(kind: exception) items is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-inline-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-inline-ternary.js
new file mode 100644
index 00000000000..56d20f7f9ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-inline-ternary.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const x = props.foo
+    ? 1
+    : (() => {
+        throw new Error('Did not receive 1');
+      })();
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.expect.md
new file mode 100644
index 00000000000..22f967883b0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = (() => {
+    if (props.cond) {
+      return [];
+    } else {
+      return null;
+    }
+  })();
+  items?.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let items;
+  if ($[0] !== props.a || $[1] !== props.cond) {
+    let t0;
+    if (props.cond) {
+      t0 = [];
+    } else {
+      t0 = null;
+    }
+    items = t0;
+
+    items?.push(props.a);
+    $[0] = props.a;
+    $[1] = props.cond;
+    $[2] = items;
+  } else {
+    items = $[2];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: {} }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.js
new file mode 100644
index 00000000000..f4f953d294e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const items = (() => {
+    if (props.cond) {
+      return [];
+    } else {
+      return null;
+    }
+  })();
+  items?.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later.expect.md
new file mode 100644
index 00000000000..76fc6e86aba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = (() => {
+    return [];
+  })();
+  items.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let items;
+  if ($[0] !== props.a) {
+    items = [];
+
+    items.push(props.a);
+    $[0] = props.a;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: {} }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later.js
new file mode 100644
index 00000000000..688a0a82435
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const items = (() => {
+    return [];
+  })();
+  items.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/immutable-hooks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/immutable-hooks.expect.md
new file mode 100644
index 00000000000..20d5af7045a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/immutable-hooks.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact true
+function Component(props) {
+  const x = {};
+  // In enableAssumeHooksFollowRulesOfReact mode hooks freeze their inputs and return frozen values
+  const y = useFoo(x);
+  // Thus both x and y are frozen here, and x can be independently memoized
+  bar(x, y);
+  return [x, y];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact true
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+
+  const y = useFoo(x);
+
+  bar(x, y);
+  let t1;
+  if ($[1] !== y) {
+    t1 = [x, y];
+    $[1] = y;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/immutable-hooks.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/immutable-hooks.js
new file mode 100644
index 00000000000..b4103fa5da6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/immutable-hooks.js
@@ -0,0 +1,9 @@
+// @enableAssumeHooksFollowRulesOfReact true
+function Component(props) {
+  const x = {};
+  // In enableAssumeHooksFollowRulesOfReact mode hooks freeze their inputs and return frozen values
+  const y = useFoo(x);
+  // Thus both x and y are frozen here, and x can be independently memoized
+  bar(x, y);
+  return [x, y];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.expect.md
new file mode 100644
index 00000000000..afbb1bdfe78
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.expect.md
@@ -0,0 +1,140 @@
+
+## Input
+
+```javascript
+import {
+  useEffect,
+  useRef,
+  // @ts-expect-error
+  experimental_useEffectEvent as useEffectEvent,
+} from 'react';
+
+let id = 0;
+function uniqueId() {
+  'use no memo';
+  return id++;
+}
+
+export function useCustomHook(src: string): void {
+  const uidRef = useRef(uniqueId());
+  const destroyed = useRef(false);
+  const getItem = (srcName, uid) => {
+    return {srcName, uid};
+  };
+
+  const getItemEvent = useEffectEvent(() => {
+    if (destroyed.current) return;
+
+    getItem(src, uidRef.current);
+  });
+
+  useEffect(() => {
+    destroyed.current = false;
+    getItemEvent();
+  }, []);
+}
+
+function Component() {
+  useCustomHook('hello');
+  return <div>Hello</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  isComponent: true,
+  params: [{x: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  useEffect,
+  useRef,
+  // @ts-expect-error
+  experimental_useEffectEvent as useEffectEvent,
+} from "react";
+
+let id = 0;
+function uniqueId() {
+  "use no memo";
+  return id++;
+}
+
+export function useCustomHook(src) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = uniqueId();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const uidRef = useRef(t0);
+  const destroyed = useRef(false);
+  const getItem = _temp;
+  let t1;
+  if ($[1] !== src) {
+    t1 = () => {
+      if (destroyed.current) {
+        return;
+      }
+
+      getItem(src, uidRef.current);
+    };
+    $[1] = src;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const getItemEvent = useEffectEvent(t1);
+  let t2;
+  if ($[3] !== getItemEvent) {
+    t2 = () => {
+      destroyed.current = false;
+      getItemEvent();
+    };
+    $[3] = getItemEvent;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  useEffect(t2, t3);
+}
+function _temp(srcName, uid) {
+  return { srcName, uid };
+}
+
+function Component() {
+  const $ = _c(1);
+  useCustomHook("hello");
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  isComponent: true,
+  params: [{ x: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.tsx
new file mode 100644
index 00000000000..a1c7220f290
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.tsx
@@ -0,0 +1,42 @@
+import {
+  useEffect,
+  useRef,
+  // @ts-expect-error
+  experimental_useEffectEvent as useEffectEvent,
+} from 'react';
+
+let id = 0;
+function uniqueId() {
+  'use no memo';
+  return id++;
+}
+
+export function useCustomHook(src: string): void {
+  const uidRef = useRef(uniqueId());
+  const destroyed = useRef(false);
+  const getItem = (srcName, uid) => {
+    return {srcName, uid};
+  };
+
+  const getItemEvent = useEffectEvent(() => {
+    if (destroyed.current) return;
+
+    getItem(src, uidRef.current);
+  });
+
+  useEffect(() => {
+    destroyed.current = false;
+    getItemEvent();
+  }, []);
+}
+
+function Component() {
+  useCustomHook('hello');
+  return <div>Hello</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  isComponent: true,
+  params: [{x: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-class.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-class.expect.md
new file mode 100644
index 00000000000..df981f77677
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-class.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const env = useRelayEnvironment();
+  // Note: this is a class has no mutable methods, ie it always treats `this` as readonly
+  const mutator = new Mutator(env);
+
+  useOtherHook();
+
+  // `x` should be independently memoizeable, since foo(x, mutator) cannot mutate
+  // the mutator.
+  const x = {};
+  foo(x, mutator);
+  return x;
+}
+
+class Mutator {}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const env = useRelayEnvironment();
+
+  const mutator = new Mutator(env);
+
+  useOtherHook();
+
+  const x = {};
+  foo(x, mutator);
+  return x;
+}
+
+class Mutator {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-class.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-class.js
new file mode 100644
index 00000000000..11740ef0a42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-class.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  const env = useRelayEnvironment();
+  // Note: this is a class has no mutable methods, ie it always treats `this` as readonly
+  const mutator = new Mutator(env);
+
+  useOtherHook();
+
+  // `x` should be independently memoizeable, since foo(x, mutator) cannot mutate
+  // the mutator.
+  const x = {};
+  foo(x, mutator);
+  return x;
+}
+
+class Mutator {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.expect.md
new file mode 100644
index 00000000000..76dfc5ab1ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [value, setValue] = useState(null);
+  // NOTE: this lambda does not capture any mutable values (only the state setter)
+  // and thus should be treated as readonly
+  const onChange = e => setValue(value => value + e.target.value);
+
+  useOtherHook();
+
+  // x should be independently memoizeable, since foo(x, onChange) cannot modify onChange
+  const x = {};
+  foo(x, onChange);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const [, setValue] = useState(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => setValue((value_0) => value_0 + e.target.value);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+
+  useOtherHook();
+  let x;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    foo(x, onChange);
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.js
new file mode 100644
index 00000000000..294006ced6d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inadvertent-mutability-readonly-lambda.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const [value, setValue] = useState(null);
+  // NOTE: this lambda does not capture any mutable values (only the state setter)
+  // and thus should be treated as readonly
+  const onChange = e => setValue(value => value + e.target.value);
+
+  useOtherHook();
+
+  // x should be independently memoizeable, since foo(x, onChange) cannot modify onChange
+  const x = {};
+  foo(x, onChange);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/incompatible-destructuring-kinds.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/incompatible-destructuring-kinds.expect.md
new file mode 100644
index 00000000000..cde1360bf04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/incompatible-destructuring-kinds.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component({}) {
+  let a = 'a';
+  let b = '';
+  [a, b] = [null, null];
+  // NOTE: reference `a` in a callback to force a context variable
+  return <Stringify a={a} b={b} onClick={() => a} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(4);
+  let a;
+  let b;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    a = "a";
+    const [t2, t3] = [null, null];
+    t1 = t3;
+    a = t2;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    a = $[0];
+    b = $[1];
+    t1 = $[2];
+  }
+  b = t1;
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <Stringify a={a} b={b} onClick={() => a} />;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"a":null,"b":"[[ cyclic ref *1 ]]","onClick":"[[ function params=0 ]]"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/incompatible-destructuring-kinds.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/incompatible-destructuring-kinds.js
new file mode 100644
index 00000000000..a3fe8f39b82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/incompatible-destructuring-kinds.js
@@ -0,0 +1,15 @@
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component({}) {
+  let a = 'a';
+  let b = '';
+  [a, b] = [null, null];
+  // NOTE: reference `a` in a callback to force a context variable
+  return <Stringify a={a} b={b} onClick={() => a} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent-across-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent-across-if.expect.md
new file mode 100644
index 00000000000..dad9f3c24f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent-across-if.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+function compute() {}
+function mutate() {}
+function foo() {}
+function Foo() {}
+
+/**
+ * Should produce 3 scopes:
+ *
+ * a: inputs=props.a & props.c; outputs=a
+ *   a = compute(props.a);
+ *   if (props.c)
+ *     mutate(a)
+ * b: inputs=props.b & props.c; outputs=b
+ *   b = compute(props.b);
+ *   if (props.c)
+ *     mutate(b)
+ * return: inputs=a, b outputs=return
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  if (props.c) {
+    mutate(a);
+    mutate(b);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function compute() {}
+function mutate() {}
+function foo() {}
+function Foo() {}
+
+/**
+ * Should produce 3 scopes:
+ *
+ * a: inputs=props.a & props.c; outputs=a
+ *   a = compute(props.a);
+ *   if (props.c)
+ *     mutate(a)
+ * b: inputs=props.b & props.c; outputs=b
+ *   b = compute(props.b);
+ *   if (props.c)
+ *     mutate(b)
+ * return: inputs=a, b outputs=return
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const $ = _c(8);
+  let a;
+  let b;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.c) {
+    a = compute(props.a);
+    b = compute(props.b);
+    if (props.c) {
+      mutate(a);
+      mutate(b);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = a;
+    $[4] = b;
+  } else {
+    a = $[3];
+    b = $[4];
+  }
+  let t0;
+  if ($[5] !== a || $[6] !== b) {
+    t0 = <Foo a={a} b={b} />;
+    $[5] = a;
+    $[6] = b;
+    $[7] = t0;
+  } else {
+    t0 = $[7];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent-across-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent-across-if.js
new file mode 100644
index 00000000000..d36900fff75
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent-across-if.js
@@ -0,0 +1,28 @@
+function compute() {}
+function mutate() {}
+function foo() {}
+function Foo() {}
+
+/**
+ * Should produce 3 scopes:
+ *
+ * a: inputs=props.a & props.c; outputs=a
+ *   a = compute(props.a);
+ *   if (props.c)
+ *     mutate(a)
+ * b: inputs=props.b & props.c; outputs=b
+ *   b = compute(props.b);
+ *   if (props.c)
+ *     mutate(b)
+ * return: inputs=a, b outputs=return
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  if (props.c) {
+    mutate(a);
+    mutate(b);
+  }
+  return <Foo a={a} b={b} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent.expect.md
new file mode 100644
index 00000000000..ac8a952e78d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+/**
+ * Should produce 3 scopes:
+ *
+ * a: inputs=props.a, outputs=a
+ *   a = compute(props.a);
+ * b: inputs=props.b, outputs=b
+ *   b = compute(props.b);
+ * return: inputs=a, b outputs=return
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  return <Foo a={a} b={b} />;
+}
+
+function compute() {}
+function foo() {}
+function Foo() {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Should produce 3 scopes:
+ *
+ * a: inputs=props.a, outputs=a
+ *   a = compute(props.a);
+ * b: inputs=props.b, outputs=b
+ *   b = compute(props.b);
+ * return: inputs=a, b outputs=return
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = compute(props.a);
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const a = t0;
+  let t1;
+  if ($[2] !== props.b) {
+    t1 = compute(props.b);
+    $[2] = props.b;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const b = t1;
+  let t2;
+  if ($[4] !== a || $[5] !== b) {
+    t2 = <Foo a={a} b={b} />;
+    $[4] = a;
+    $[5] = b;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+function compute() {}
+function foo() {}
+function Foo() {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent.js
new file mode 100644
index 00000000000..d7daa41b73c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independent.js
@@ -0,0 +1,19 @@
+/**
+ * Should produce 3 scopes:
+ *
+ * a: inputs=props.a, outputs=a
+ *   a = compute(props.a);
+ * b: inputs=props.b, outputs=b
+ *   b = compute(props.b);
+ * return: inputs=a, b outputs=return
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  return <Foo a={a} b={b} />;
+}
+
+function compute() {}
+function foo() {}
+function Foo() {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independently-memoize-object-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independently-memoize-object-property.expect.md
new file mode 100644
index 00000000000..ad0ab7cc748
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independently-memoize-object-property.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const x = {a: a};
+  // NOTE: this array should memoize independently from x, w only b,c as deps
+  x.y = [b, c];
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(7);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = { a };
+    let t0;
+    if ($[4] !== b || $[5] !== c) {
+      t0 = [b, c];
+      $[4] = b;
+      $[5] = c;
+      $[6] = t0;
+    } else {
+      t0 = $[6];
+    }
+    x.y = t0;
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independently-memoize-object-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independently-memoize-object-property.js
new file mode 100644
index 00000000000..b4483d5b2cb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/independently-memoize-object-property.js
@@ -0,0 +1,13 @@
+function foo(a, b, c) {
+  const x = {a: a};
+  // NOTE: this array should memoize independently from x, w only b,c as deps
+  x.y = [b, c];
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.expect.md
new file mode 100644
index 00000000000..129d3a72e9e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+import {useNoAlias} from 'shared-runtime';
+
+// This should be compiled by Forget
+function useFoo(value1, value2) {
+  return {
+    value: useNoAlias(value1 + value2),
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+import { useNoAlias } from "shared-runtime";
+
+// This should be compiled by Forget
+function useFoo(value1, value2) {
+  const $ = _c(2);
+
+  const t0 = useNoAlias(value1 + value2);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = { value: t0 };
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"value":{}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.js
new file mode 100644
index 00000000000..a03aa10aa8d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.js
@@ -0,0 +1,14 @@
+// @compilationMode:"infer"
+import {useNoAlias} from 'shared-runtime';
+
+// This should be compiled by Forget
+function useFoo(value1, value2) {
+  return {
+    value: useNoAlias(value1 + value2),
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md
new file mode 100644
index 00000000000..cd93ad9bf7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md
@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+// @debug @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const x = makeObject();
+  const y = delete x[props.value];
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+// @debug @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const x = makeObject();
+  const y = delete x[props.value];
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js
new file mode 100644
index 00000000000..6229cb6d3e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js
@@ -0,0 +1,6 @@
+// @debug @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const x = makeObject();
+  const y = delete x[props.value];
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.expect.md
new file mode 100644
index 00000000000..5f1f1f7662f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Takes multiple parameters - not a component!
+function Component(foo, bar) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [null, null],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Takes multiple parameters - not a component!
+function Component(foo, bar) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [null, null],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.js
new file mode 100644
index 00000000000..19406072fce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.js
@@ -0,0 +1,10 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// Takes multiple parameters - not a component!
+function Component(foo, bar) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [null, null],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.expect.md
new file mode 100644
index 00000000000..c85f4d4468f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
+import useMyEffect from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function nonReactFn(arg) {
+  useMyEffect(() => [1, 2, arg], AUTODEPS);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.callsite-in-non-react-fn-default-import.ts:6:2
+  4 |
+  5 | function nonReactFn(arg) {
+> 6 |   useMyEffect(() => [1, 2, arg], AUTODEPS);
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.js
new file mode 100644
index 00000000000..adfe3ffadd5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.js
@@ -0,0 +1,7 @@
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
+import useMyEffect from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function nonReactFn(arg) {
+  useMyEffect(() => [1, 2, arg], AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.expect.md
new file mode 100644
index 00000000000..a372aeb6b29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+
+function nonReactFn(arg) {
+  useEffect(() => [1, 2, arg], AUTODEPS);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.callsite-in-non-react-fn.ts:5:2
+  3 |
+  4 | function nonReactFn(arg) {
+> 5 |   useEffect(() => [1, 2, arg], AUTODEPS);
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.js
new file mode 100644
index 00000000000..9cbc47086b2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.js
@@ -0,0 +1,6 @@
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+
+function nonReactFn(arg) {
+  useEffect(() => [1, 2, arg], AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.expect.md
new file mode 100644
index 00000000000..ac56c25cb32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+
+/**
+ * Error on non-inlined effect functions:
+ * 1. From the effect hook callee's perspective, it only makes sense
+ *    to either
+ *    (a) never hard error (i.e. failing to infer deps is acceptable) or
+ *    (b) always hard error,
+ *    regardless of whether the callback function is an inline fn.
+ * 2. (Technical detail) it's harder to support detecting cases in which
+ *    function (pre-Forget transform) was inline but becomes memoized
+ */
+function Component({foo}) {
+  function f() {
+    console.log(foo);
+  }
+
+  // No inferred dep array, the argument is not a lambda
+  useEffect(f, AUTODEPS);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.non-inlined-effect-fn.ts:20:2
+  18 |
+  19 |   // No inferred dep array, the argument is not a lambda
+> 20 |   useEffect(f, AUTODEPS);
+     |   ^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  21 | }
+  22 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.js
new file mode 100644
index 00000000000..c113fe363c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.js
@@ -0,0 +1,21 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+
+/**
+ * Error on non-inlined effect functions:
+ * 1. From the effect hook callee's perspective, it only makes sense
+ *    to either
+ *    (a) never hard error (i.e. failing to infer deps is acceptable) or
+ *    (b) always hard error,
+ *    regardless of whether the callback function is an inline fn.
+ * 2. (Technical detail) it's harder to support detecting cases in which
+ *    function (pre-Forget transform) was inline but becomes memoized
+ */
+function Component({foo}) {
+  function f() {
+    console.log(foo);
+  }
+
+  // No inferred dep array, the argument is not a lambda
+  useEffect(f, AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-dynamic-gating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-dynamic-gating.expect.md
new file mode 100644
index 00000000000..251d7c76c90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-dynamic-gating.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @dynamicGating:{"source":"shared-runtime"} @inferEffectDependencies @panicThreshold:"none"
+
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+/**
+ * TODO: run the non-forget enabled version through the effect inference
+ * pipeline.
+ */
+function Component({foo}) {
+  'use memo if(getTrue)';
+  const arr = [];
+  useEffectWrapper(() => arr.push(foo), AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  sequentialRenders: [{foo: 1}, {foo: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.todo-dynamic-gating.ts:13:2
+  11 |   'use memo if(getTrue)';
+  12 |   const arr = [];
+> 13 |   useEffectWrapper(() => arr.push(foo), AUTODEPS);
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  14 |   arr.push(2);
+  15 |   return arr;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-dynamic-gating.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-dynamic-gating.js
new file mode 100644
index 00000000000..667abfea6f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-dynamic-gating.js
@@ -0,0 +1,22 @@
+// @dynamicGating:{"source":"shared-runtime"} @inferEffectDependencies @panicThreshold:"none"
+
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+/**
+ * TODO: run the non-forget enabled version through the effect inference
+ * pipeline.
+ */
+function Component({foo}) {
+  'use memo if(getTrue)';
+  const arr = [];
+  useEffectWrapper(() => arr.push(foo), AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  sequentialRenders: [{foo: 1}, {foo: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-gating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-gating.expect.md
new file mode 100644
index 00000000000..041a0f4e8bc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-gating.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @gating @inferEffectDependencies @panicThreshold:"none"
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+/**
+ * TODO: run the non-forget enabled version through the effect inference
+ * pipeline.
+ */
+function Component({foo}) {
+  const arr = [];
+  useEffectWrapper(() => arr.push(foo), AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  sequentialRenders: [{foo: 1}, {foo: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.todo-gating.ts:11:2
+   9 | function Component({foo}) {
+  10 |   const arr = [];
+> 11 |   useEffectWrapper(() => arr.push(foo), AUTODEPS);
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  12 |   arr.push(2);
+  13 |   return arr;
+  14 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-gating.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-gating.js
new file mode 100644
index 00000000000..60bd9a362e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-gating.js
@@ -0,0 +1,20 @@
+// @gating @inferEffectDependencies @panicThreshold:"none"
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+/**
+ * TODO: run the non-forget enabled version through the effect inference
+ * pipeline.
+ */
+function Component({foo}) {
+  const arr = [];
+  useEffectWrapper(() => arr.push(foo), AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  sequentialRenders: [{foo: 1}, {foo: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.expect.md
new file mode 100644
index 00000000000..3c7fa047f8b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import React from 'react';
+
+function NonReactiveDepInEffect() {
+  const obj = makeObject_Primitives();
+  React.useEffect(() => print(obj), React.AUTODEPS);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.todo-import-default-property-useEffect.ts:6:2
+  4 | function NonReactiveDepInEffect() {
+  5 |   const obj = makeObject_Primitives();
+> 6 |   React.useEffect(() => print(obj), React.AUTODEPS);
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.js
new file mode 100644
index 00000000000..c3044274cd2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.js
@@ -0,0 +1,7 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import React from 'react';
+
+function NonReactiveDepInEffect() {
+  const obj = makeObject_Primitives();
+  React.useEffect(() => print(obj), React.AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md
new file mode 100644
index 00000000000..00af7ec6ad5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {useSpecialEffect} from 'shared-runtime';
+import {AUTODEPS} from 'react';
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * We should surface these as actionable lint / build errors to devs.
+ */
+function Component({prop1}) {
+  'use memo';
+  useSpecialEffect(
+    () => {
+      try {
+        console.log(prop1);
+      } finally {
+        console.log('exiting');
+      }
+    },
+    [prop1],
+    AUTODEPS
+  );
+  return <div>{prop1}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (13:6).
+
+error.todo-syntax.ts:11:2
+   9 | function Component({prop1}) {
+  10 |   'use memo';
+> 11 |   useSpecialEffect(
+     |   ^^^^^^^^^^^^^^^^^
+> 12 |     () => {
+     | ^^^^^^^^^^^
+> 13 |       try {
+     …
+     | ^^^^^^^^^^^
+> 20 |     AUTODEPS
+     | ^^^^^^^^^^^
+> 21 |   );
+     | ^^^^ Cannot infer dependencies
+  22 |   return <div>{prop1}</div>;
+  23 | }
+  24 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.js
new file mode 100644
index 00000000000..ad1e5853295
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.js
@@ -0,0 +1,23 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {useSpecialEffect} from 'shared-runtime';
+import {AUTODEPS} from 'react';
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * We should surface these as actionable lint / build errors to devs.
+ */
+function Component({prop1}) {
+  'use memo';
+  useSpecialEffect(
+    () => {
+      try {
+        console.log(prop1);
+      } finally {
+        console.log('exiting');
+      }
+    },
+    [prop1],
+    AUTODEPS
+  );
+  return <div>{prop1}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.expect.md
new file mode 100644
index 00000000000..8371ba00403
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({propVal}) {
+  'use no memo';
+  useEffect(() => [propVal], AUTODEPS);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.use-no-memo.ts:6:2
+  4 | function Component({propVal}) {
+  5 |   'use no memo';
+> 6 |   useEffect(() => [propVal], AUTODEPS);
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.js
new file mode 100644
index 00000000000..30fbd8c2a61
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.js
@@ -0,0 +1,7 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({propVal}) {
+  'use no memo';
+  useEffect(() => [propVal], AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md
new file mode 100644
index 00000000000..b8cf1bc40aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({foo}) {
+  const arr = [];
+  // Taking either arr[0].value or arr as a dependency is reasonable
+  // as long as developers know what to expect.
+  useEffect(() => print(arr[0].value), AUTODEPS);
+  arr.push({value: foo});
+  return arr;
+}
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function Component(t0) {
+  const { foo } = t0;
+  const arr = [];
+
+  useEffect(() => print(arr[0].value), [arr[0].value]);
+  arr.push({ value: foo });
+  return arr;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js
new file mode 100644
index 00000000000..9ec840ab623
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js
@@ -0,0 +1,12 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({foo}) {
+  const arr = [];
+  // Taking either arr[0].value or arr as a dependency is reasonable
+  // as long as developers know what to expect.
+  useEffect(() => print(arr[0].value), AUTODEPS);
+  arr.push({value: foo});
+  return arr;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md
new file mode 100644
index 00000000000..4606d49f37f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({foo}) {
+  const arr = [];
+  // Taking either arr[0].value or arr as a dependency is reasonable
+  // as long as developers know what to expect.
+  useEffect(() => print(arr[0]?.value), AUTODEPS);
+  arr.push({value: foo});
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function Component(t0) {
+  const { foo } = t0;
+  const arr = [];
+
+  useEffect(() => print(arr[0]?.value), [arr[0]?.value]);
+  arr.push({ value: foo });
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 1 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":314},"end":{"line":9,"column":49,"index":361},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":336},"end":{"line":9,"column":27,"index":339},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) [{"value":1}]
+logs: [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js
new file mode 100644
index 00000000000..c78251bf2d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js
@@ -0,0 +1,17 @@
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({foo}) {
+  const arr = [];
+  // Taking either arr[0].value or arr as a dependency is reasonable
+  // as long as developers know what to expect.
+  useEffect(() => print(arr[0]?.value), AUTODEPS);
+  arr.push({value: foo});
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md
new file mode 100644
index 00000000000..ea5a887b8bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({arrRef}) {
+  // Avoid taking arr.current as a dependency
+  useEffect(() => print(arrRef.current), AUTODEPS);
+  arrRef.current.val = 2;
+  return arrRef;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arrRef: {current: {val: 'initial ref value'}}}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+
+import { useEffect, useRef, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function Component(t0) {
+  const { arrRef } = t0;
+
+  useEffect(() => print(arrRef.current), [arrRef]);
+  arrRef.current.val = 2;
+  return arrRef;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arrRef: { current: { val: "initial ref value" } } }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":237},"end":{"line":8,"column":50,"index":285},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":259},"end":{"line":8,"column":30,"index":265},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) {"current":{"val":2}}
+logs: [{ val: 2 }]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js
new file mode 100644
index 00000000000..d972d6d001c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js
@@ -0,0 +1,16 @@
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({arrRef}) {
+  // Avoid taking arr.current as a dependency
+  useEffect(() => print(arrRef.current), AUTODEPS);
+  arrRef.current.val = 2;
+  return arrRef;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arrRef: {current: {val: 'initial ref value'}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md
new file mode 100644
index 00000000000..71cd9fb6208
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({foo}) {
+  const arr = [];
+  useEffect(() => {
+    arr.push(foo);
+  }, AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+import { useEffect, AUTODEPS } from "react";
+
+function Component(t0) {
+  const { foo } = t0;
+  const arr = [];
+  useEffect(() => {
+    arr.push(foo);
+  }, [arr, foo]);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 1 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":159},"end":{"line":8,"column":14,"index":210},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":190},"end":{"line":7,"column":16,"index":193},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js
new file mode 100644
index 00000000000..965f64fd7ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js
@@ -0,0 +1,16 @@
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({foo}) {
+  const arr = [];
+  useEffect(() => {
+    arr.push(foo);
+  }, AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.expect.md
new file mode 100644
index 00000000000..4b2f94a263a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({foo}) {
+  useEffect(AUTODEPS);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.wrong-index-no-func.ts:5:2
+  3 |
+  4 | function Component({foo}) {
+> 5 |   useEffect(AUTODEPS);
+    |   ^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.js
new file mode 100644
index 00000000000..973798b5731
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.js
@@ -0,0 +1,6 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({foo}) {
+  useEffect(AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.expect.md
new file mode 100644
index 00000000000..0a5cde5cd65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {AUTODEPS} from 'react';
+import useEffectWrapper from 'useEffectWrapper';
+
+function Component({foo}) {
+  useEffectWrapper(
+    () => {
+      console.log(foo);
+    },
+    [foo],
+    AUTODEPS
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.wrong-index.ts:6:2
+   4 |
+   5 | function Component({foo}) {
+>  6 |   useEffectWrapper(
+     |   ^^^^^^^^^^^^^^^^^
+>  7 |     () => {
+     | ^^^^^^^^^^^
+>  8 |       console.log(foo);
+     | ^^^^^^^^^^^
+>  9 |     },
+     | ^^^^^^^^^^^
+> 10 |     [foo],
+     | ^^^^^^^^^^^
+> 11 |     AUTODEPS
+     | ^^^^^^^^^^^
+> 12 |   );
+     | ^^^^ Cannot infer dependencies
+  13 | }
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.js
new file mode 100644
index 00000000000..b0898e3dbde
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.js
@@ -0,0 +1,13 @@
+// @inferEffectDependencies
+import {AUTODEPS} from 'react';
+import useEffectWrapper from 'useEffectWrapper';
+
+function Component({foo}) {
+  useEffectWrapper(
+    () => {
+      console.log(foo);
+    },
+    [foo],
+    AUTODEPS
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md
new file mode 100644
index 00000000000..ae2b018d36d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+function useCustomRef() {
+  const ref = useRef();
+  return ref;
+}
+function NonReactiveWrapper() {
+  const ref = useCustomRef();
+  useEffect(() => {
+    print(ref);
+  }, AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useRef, AUTODEPS } from "react";
+function useCustomRef() {
+  const ref = useRef();
+  return ref;
+}
+
+function NonReactiveWrapper() {
+  const $ = _c(2);
+  const ref = useCustomRef();
+  let t0;
+  if ($[0] !== ref) {
+    t0 = () => {
+      print(ref);
+    };
+    $[0] = ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  useEffect(t0, [ref]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js
new file mode 100644
index 00000000000..18de64bc08b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js
@@ -0,0 +1,12 @@
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+function useCustomRef() {
+  const ref = useRef();
+  return ref;
+}
+function NonReactiveWrapper() {
+  const ref = useCustomRef();
+  useEffect(() => {
+    print(ref);
+  }, AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md
new file mode 100644
index 00000000000..a221475b95b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import * as React from 'react';
+import * as SharedRuntime from 'shared-runtime';
+
+function NonReactiveDepInEffect() {
+  const obj = makeObject_Primitives();
+  React.useEffect(() => print(obj), React.AUTODEPS);
+  SharedRuntime.useSpecialEffect(() => print(obj), [obj], React.AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import * as React from "react";
+import * as SharedRuntime from "shared-runtime";
+
+function NonReactiveDepInEffect() {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const obj = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => print(obj);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  React.useEffect(t1, [obj]);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => print(obj);
+    t3 = [obj];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  SharedRuntime.useSpecialEffect(t2, t3, [obj]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js
new file mode 100644
index 00000000000..3ef0bf400e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js
@@ -0,0 +1,9 @@
+// @inferEffectDependencies
+import * as React from 'react';
+import * as SharedRuntime from 'shared-runtime';
+
+function NonReactiveDepInEffect() {
+  const obj = makeObject_Primitives();
+  React.useEffect(() => print(obj), React.AUTODEPS);
+  SharedRuntime.useSpecialEffect(() => print(obj), [obj], React.AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md
new file mode 100644
index 00000000000..03d9ba04e90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {print, useSpecialEffect} from 'shared-runtime';
+import {AUTODEPS} from 'react';
+
+function CustomConfig({propVal}) {
+  // Insertion
+  useSpecialEffect(() => print(propVal), [propVal], AUTODEPS);
+  // No insertion
+  useSpecialEffect(() => print(propVal), [propVal], [propVal]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { print, useSpecialEffect } from "shared-runtime";
+import { AUTODEPS } from "react";
+
+function CustomConfig(t0) {
+  const $ = _c(7);
+  const { propVal } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== propVal) {
+    t1 = () => print(propVal);
+    t2 = [propVal];
+    $[0] = propVal;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useSpecialEffect(t1, t2, [propVal]);
+  let t3;
+  let t4;
+  let t5;
+  if ($[3] !== propVal) {
+    t3 = () => print(propVal);
+    t4 = [propVal];
+    t5 = [propVal];
+    $[3] = propVal;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useSpecialEffect(t3, t4, t5);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js
new file mode 100644
index 00000000000..efb82123984
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js
@@ -0,0 +1,10 @@
+// @inferEffectDependencies
+import {print, useSpecialEffect} from 'shared-runtime';
+import {AUTODEPS} from 'react';
+
+function CustomConfig({propVal}) {
+  // Insertion
+  useSpecialEffect(() => print(propVal), [propVal], AUTODEPS);
+  // No insertion
+  useSpecialEffect(() => print(propVal), [propVal], [propVal]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md
new file mode 100644
index 00000000000..e09c0ef8e8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md
@@ -0,0 +1,129 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+import useEffectWrapper from 'useEffectWrapper';
+
+const moduleNonReactive = 0;
+
+function Component({foo, bar}) {
+  const localNonreactive = 0;
+  const ref = useRef(0);
+  const localNonPrimitiveReactive = {
+    foo,
+  };
+  const localNonPrimitiveNonreactive = {};
+  useEffect(() => {
+    console.log(foo);
+    console.log(bar);
+    console.log(moduleNonReactive);
+    console.log(localNonreactive);
+    console.log(globalValue);
+    console.log(ref.current);
+    console.log(localNonPrimitiveReactive);
+    console.log(localNonPrimitiveNonreactive);
+  }, AUTODEPS);
+
+  // Optional chains and property accesses
+  // TODO: we may be able to save bytes by omitting property accesses if the
+  // object of the member expression is already included in the inferred deps
+  useEffect(() => {
+    console.log(bar?.baz);
+    console.log(bar.qux);
+  }, AUTODEPS);
+
+  useEffectWrapper(() => {
+    console.log(foo);
+  }, AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useRef, AUTODEPS } from "react";
+import useEffectWrapper from "useEffectWrapper";
+
+const moduleNonReactive = 0;
+
+function Component(t0) {
+  const $ = _c(12);
+  const { foo, bar } = t0;
+
+  const ref = useRef(0);
+  let t1;
+  if ($[0] !== foo) {
+    t1 = { foo };
+    $[0] = foo;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const localNonPrimitiveReactive = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {};
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const localNonPrimitiveNonreactive = t2;
+  let t3;
+  if ($[3] !== bar || $[4] !== foo || $[5] !== localNonPrimitiveReactive) {
+    t3 = () => {
+      console.log(foo);
+      console.log(bar);
+      console.log(moduleNonReactive);
+      console.log(0);
+      console.log(globalValue);
+      console.log(ref.current);
+      console.log(localNonPrimitiveReactive);
+      console.log(localNonPrimitiveNonreactive);
+    };
+    $[3] = bar;
+    $[4] = foo;
+    $[5] = localNonPrimitiveReactive;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  useEffect(t3, [
+    foo,
+    bar,
+    localNonPrimitiveReactive,
+    localNonPrimitiveNonreactive,
+  ]);
+  let t4;
+  if ($[7] !== bar.baz || $[8] !== bar.qux) {
+    t4 = () => {
+      console.log(bar?.baz);
+      console.log(bar.qux);
+    };
+    $[7] = bar.baz;
+    $[8] = bar.qux;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  useEffect(t4, [bar.baz, bar.qux]);
+  let t5;
+  if ($[10] !== foo) {
+    t5 = () => {
+      console.log(foo);
+    };
+    $[10] = foo;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  useEffectWrapper(t5, [foo]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js
new file mode 100644
index 00000000000..bf02842d25f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js
@@ -0,0 +1,36 @@
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+import useEffectWrapper from 'useEffectWrapper';
+
+const moduleNonReactive = 0;
+
+function Component({foo, bar}) {
+  const localNonreactive = 0;
+  const ref = useRef(0);
+  const localNonPrimitiveReactive = {
+    foo,
+  };
+  const localNonPrimitiveNonreactive = {};
+  useEffect(() => {
+    console.log(foo);
+    console.log(bar);
+    console.log(moduleNonReactive);
+    console.log(localNonreactive);
+    console.log(globalValue);
+    console.log(ref.current);
+    console.log(localNonPrimitiveReactive);
+    console.log(localNonPrimitiveNonreactive);
+  }, AUTODEPS);
+
+  // Optional chains and property accesses
+  // TODO: we may be able to save bytes by omitting property accesses if the
+  // object of the member expression is already included in the inferred deps
+  useEffect(() => {
+    console.log(bar?.baz);
+    console.log(bar.qux);
+  }, AUTODEPS);
+
+  useEffectWrapper(() => {
+    console.log(foo);
+  }, AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md
new file mode 100644
index 00000000000..2730f8941b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {makeObject_Primitives, print} from 'shared-runtime';
+
+/**
+ * Note that `obj` is currently added to the effect dependency array, even
+ * though it's non-reactive due to memoization.
+ *
+ * This is a TODO in effect dependency inference. Note that we cannot simply
+ * filter out non-reactive effect dependencies, as some non-reactive (by data
+ * flow) values become reactive due to scope pruning. See the
+ * `infer-effect-deps/pruned-nonreactive-obj` fixture for why this matters.
+ *
+ * Realizing that this `useEffect` should have an empty dependency array
+ * requires effect dependency inference to be structured similarly to memo
+ * dependency inference.
+ * Pass 1: add all potential dependencies regardless of dataflow reactivity
+ * Pass 2: (todo) prune non-reactive dependencies
+ *
+ * Note that instruction reordering should significantly reduce scope pruning
+ */
+function NonReactiveDepInEffect() {
+  const obj = makeObject_Primitives();
+  useEffect(() => print(obj), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { makeObject_Primitives, print } from "shared-runtime";
+
+/**
+ * Note that `obj` is currently added to the effect dependency array, even
+ * though it's non-reactive due to memoization.
+ *
+ * This is a TODO in effect dependency inference. Note that we cannot simply
+ * filter out non-reactive effect dependencies, as some non-reactive (by data
+ * flow) values become reactive due to scope pruning. See the
+ * `infer-effect-deps/pruned-nonreactive-obj` fixture for why this matters.
+ *
+ * Realizing that this `useEffect` should have an empty dependency array
+ * requires effect dependency inference to be structured similarly to memo
+ * dependency inference.
+ * Pass 1: add all potential dependencies regardless of dataflow reactivity
+ * Pass 2: (todo) prune non-reactive dependencies
+ *
+ * Note that instruction reordering should significantly reduce scope pruning
+ */
+function NonReactiveDepInEffect() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const obj = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => print(obj);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1, [obj]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js
new file mode 100644
index 00000000000..f6e44034c51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js
@@ -0,0 +1,25 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {makeObject_Primitives, print} from 'shared-runtime';
+
+/**
+ * Note that `obj` is currently added to the effect dependency array, even
+ * though it's non-reactive due to memoization.
+ *
+ * This is a TODO in effect dependency inference. Note that we cannot simply
+ * filter out non-reactive effect dependencies, as some non-reactive (by data
+ * flow) values become reactive due to scope pruning. See the
+ * `infer-effect-deps/pruned-nonreactive-obj` fixture for why this matters.
+ *
+ * Realizing that this `useEffect` should have an empty dependency array
+ * requires effect dependency inference to be structured similarly to memo
+ * dependency inference.
+ * Pass 1: add all potential dependencies regardless of dataflow reactivity
+ * Pass 2: (todo) prune non-reactive dependencies
+ *
+ * Note that instruction reordering should significantly reduce scope pruning
+ */
+function NonReactiveDepInEffect() {
+  const obj = makeObject_Primitives();
+  useEffect(() => print(obj), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md
new file mode 100644
index 00000000000..c95f9625bbb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useEffectEvent, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * We do not include effect events in dep arrays.
+ */
+function NonReactiveEffectEvent() {
+  const fn = useEffectEvent(() => print('hello world'));
+  useEffect(() => fn(), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useEffectEvent, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/**
+ * We do not include effect events in dep arrays.
+ */
+function NonReactiveEffectEvent() {
+  const $ = _c(2);
+  const fn = useEffectEvent(_temp);
+  let t0;
+  if ($[0] !== fn) {
+    t0 = () => fn();
+    $[0] = fn;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  useEffect(t0, []);
+}
+function _temp() {
+  return print("hello world");
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js
new file mode 100644
index 00000000000..fc78581e6d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js
@@ -0,0 +1,11 @@
+// @inferEffectDependencies
+import {useEffect, useEffectEvent, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * We do not include effect events in dep arrays.
+ */
+function NonReactiveEffectEvent() {
+  const fn = useEffectEvent(() => print('hello world'));
+  useEffect(() => fn(), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md
new file mode 100644
index 00000000000..05dcab77968
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * We never include a .current access in a dep array because it may be a ref access.
+ * This might over-capture objects that are not refs and happen to have fields named
+ * current, but that should be a rare case and the result would still be correct
+ * (assuming the effect is idempotent). In the worst case, you can always write a manual
+ * dep array.
+ */
+function RefsInEffects() {
+  const ref = useRefHelper();
+  const wrapped = useDeeperRefHelper();
+  useEffect(() => {
+    print(ref.current);
+    print(wrapped.foo.current);
+  }, AUTODEPS);
+}
+
+function useRefHelper() {
+  return useRef(0);
+}
+
+function useDeeperRefHelper() {
+  return {foo: useRefHelper()};
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/**
+ * We never include a .current access in a dep array because it may be a ref access.
+ * This might over-capture objects that are not refs and happen to have fields named
+ * current, but that should be a rare case and the result would still be correct
+ * (assuming the effect is idempotent). In the worst case, you can always write a manual
+ * dep array.
+ */
+function RefsInEffects() {
+  const $ = _c(3);
+  const ref = useRefHelper();
+  const wrapped = useDeeperRefHelper();
+  let t0;
+  if ($[0] !== ref || $[1] !== wrapped.foo.current) {
+    t0 = () => {
+      print(ref.current);
+      print(wrapped.foo.current);
+    };
+    $[0] = ref;
+    $[1] = wrapped.foo.current;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  useEffect(t0, [ref, wrapped.foo]);
+}
+
+function useRefHelper() {
+  return useRef(0);
+}
+
+function useDeeperRefHelper() {
+  const $ = _c(2);
+  const t0 = useRefHelper();
+  let t1;
+  if ($[0] !== t0) {
+    t1 = { foo: t0 };
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js
new file mode 100644
index 00000000000..92a905061fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js
@@ -0,0 +1,27 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * We never include a .current access in a dep array because it may be a ref access.
+ * This might over-capture objects that are not refs and happen to have fields named
+ * current, but that should be a rare case and the result would still be correct
+ * (assuming the effect is idempotent). In the worst case, you can always write a manual
+ * dep array.
+ */
+function RefsInEffects() {
+  const ref = useRefHelper();
+  const wrapped = useDeeperRefHelper();
+  useEffect(() => {
+    print(ref.current);
+    print(wrapped.foo.current);
+  }, AUTODEPS);
+}
+
+function useRefHelper() {
+  return useRef(0);
+}
+
+function useDeeperRefHelper() {
+  return {foo: useRefHelper()};
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md
new file mode 100644
index 00000000000..3c5835e7555
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * Special case of `infer-effect-deps/nonreactive-dep`.
+ *
+ * We know that local `useRef` return values are stable, regardless of
+ * inferred memoization.
+ */
+function NonReactiveRefInEffect() {
+  const ref = useRef('initial value');
+  useEffect(() => print(ref.current), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useRef, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/**
+ * Special case of `infer-effect-deps/nonreactive-dep`.
+ *
+ * We know that local `useRef` return values are stable, regardless of
+ * inferred memoization.
+ */
+function NonReactiveRefInEffect() {
+  const $ = _c(1);
+  const ref = useRef("initial value");
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => print(ref.current);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(t0, []);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js
new file mode 100644
index 00000000000..38b83b9b8f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js
@@ -0,0 +1,14 @@
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * Special case of `infer-effect-deps/nonreactive-dep`.
+ *
+ * We know that local `useRef` return values are stable, regardless of
+ * inferred memoization.
+ */
+function NonReactiveRefInEffect() {
+  const ref = useRef('initial value');
+  useEffect(() => print(ref.current), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md
new file mode 100644
index 00000000000..e0a1a95b339
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useState, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * Special case of `infer-effect-deps/nonreactive-dep`.
+ *
+ * We know that local `useRef` return values are stable, regardless of
+ * inferred memoization.
+ */
+function NonReactiveSetStateInEffect() {
+  const [_, setState] = useState('initial value');
+  useEffect(() => print(setState), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useState, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/**
+ * Special case of `infer-effect-deps/nonreactive-dep`.
+ *
+ * We know that local `useRef` return values are stable, regardless of
+ * inferred memoization.
+ */
+function NonReactiveSetStateInEffect() {
+  const $ = _c(1);
+  const [, setState] = useState("initial value");
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => print(setState);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(t0, []);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js
new file mode 100644
index 00000000000..0f8abceca0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js
@@ -0,0 +1,14 @@
+// @inferEffectDependencies
+import {useEffect, useState, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/**
+ * Special case of `infer-effect-deps/nonreactive-dep`.
+ *
+ * We know that local `useRef` return values are stable, regardless of
+ * inferred memoization.
+ */
+function NonReactiveSetStateInEffect() {
+  const [_, setState] = useState('initial value');
+  useEffect(() => print(setState), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md
new file mode 100644
index 00000000000..a0b0594afa1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+/**
+ * This compiled output is technically incorrect but this is currently the same
+ * case as a bailout (an effect that overfires).
+ *
+ * To ensure an empty deps array is passed, we need special case
+ * `InferEffectDependencies` for outlined functions (likely easier) or run it
+ * before OutlineFunctions
+ */
+function OutlinedFunctionInEffect() {
+  useEffect(() => print('hello world!'), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+/**
+ * This compiled output is technically incorrect but this is currently the same
+ * case as a bailout (an effect that overfires).
+ *
+ * To ensure an empty deps array is passed, we need special case
+ * `InferEffectDependencies` for outlined functions (likely easier) or run it
+ * before OutlineFunctions
+ */
+function OutlinedFunctionInEffect() {
+  useEffect(_temp, []);
+}
+function _temp() {
+  return print("hello world!");
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js
new file mode 100644
index 00000000000..5ec2f7d8f9e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js
@@ -0,0 +1,14 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+/**
+ * This compiled output is technically incorrect but this is currently the same
+ * case as a bailout (an effect that overfires).
+ *
+ * To ensure an empty deps array is passed, we need special case
+ * `InferEffectDependencies` for outlined functions (likely easier) or run it
+ * before OutlineFunctions
+ */
+function OutlinedFunctionInEffect() {
+  useEffect(() => print('hello world!'), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md
new file mode 100644
index 00000000000..c6c0087a774
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md
@@ -0,0 +1,119 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useIdentity, mutate, makeObject} from 'shared-runtime';
+import {useEffect, AUTODEPS} from 'react';
+
+/**
+ * When a semantically non-reactive value has a pruned scope (i.e. the object
+ * identity becomes reactive, but the underlying value it represents should be
+ * constant), the compiler can choose to either
+ * - add it as a dependency (and rerun the effect)
+ * - not add it as a dependency
+ *
+ * We keep semantically non-reactive values in both memo block and effect
+ * dependency arrays to avoid versioning invariants e.g. `x !== y.aliasedX`.
+ * ```js
+ * function Component() {
+ *   // obj is semantically non-reactive, but its memo scope is pruned due to
+ *   // the interleaving hook call
+ *   const obj = {};
+ *   useHook();
+ *   write(obj);
+ *
+ *   const ref = useRef();
+ *
+ *   // this effect needs to be rerun when obj's referential identity changes,
+ *   // because it might alias obj to a useRef / mutable store.
+ *   useEffect(() => ref.current = obj, ???);
+ *
+ *   // in a custom hook (or child component), the user might expect versioning
+ *   // invariants to hold
+ *   useHook(ref, obj);
+ * }
+ *
+ * // defined elsewhere
+ * function useHook(someRef, obj) {
+ *   useEffect(
+ *     () => assert(someRef.current === obj),
+ *     [someRef, obj]
+ *   );
+ * }
+ * ```
+ */
+function PrunedNonReactive() {
+  const obj = makeObject();
+  useIdentity(null);
+  mutate(obj);
+
+  useEffect(() => print(obj.value), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useIdentity, mutate, makeObject } from "shared-runtime";
+import { useEffect, AUTODEPS } from "react";
+
+/**
+ * When a semantically non-reactive value has a pruned scope (i.e. the object
+ * identity becomes reactive, but the underlying value it represents should be
+ * constant), the compiler can choose to either
+ * - add it as a dependency (and rerun the effect)
+ * - not add it as a dependency
+ *
+ * We keep semantically non-reactive values in both memo block and effect
+ * dependency arrays to avoid versioning invariants e.g. `x !== y.aliasedX`.
+ * ```js
+ * function Component() {
+ *   // obj is semantically non-reactive, but its memo scope is pruned due to
+ *   // the interleaving hook call
+ *   const obj = {};
+ *   useHook();
+ *   write(obj);
+ *
+ *   const ref = useRef();
+ *
+ *   // this effect needs to be rerun when obj's referential identity changes,
+ *   // because it might alias obj to a useRef / mutable store.
+ *   useEffect(() => ref.current = obj, ???);
+ *
+ *   // in a custom hook (or child component), the user might expect versioning
+ *   // invariants to hold
+ *   useHook(ref, obj);
+ * }
+ *
+ * // defined elsewhere
+ * function useHook(someRef, obj) {
+ *   useEffect(
+ *     () => assert(someRef.current === obj),
+ *     [someRef, obj]
+ *   );
+ * }
+ * ```
+ */
+function PrunedNonReactive() {
+  const $ = _c(2);
+  const obj = makeObject();
+  useIdentity(null);
+  mutate(obj);
+  let t0;
+  if ($[0] !== obj.value) {
+    t0 = () => print(obj.value);
+    $[0] = obj.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  useEffect(t0, [obj.value]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js
new file mode 100644
index 00000000000..f210f2779a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js
@@ -0,0 +1,48 @@
+// @inferEffectDependencies
+import {useIdentity, mutate, makeObject} from 'shared-runtime';
+import {useEffect, AUTODEPS} from 'react';
+
+/**
+ * When a semantically non-reactive value has a pruned scope (i.e. the object
+ * identity becomes reactive, but the underlying value it represents should be
+ * constant), the compiler can choose to either
+ * - add it as a dependency (and rerun the effect)
+ * - not add it as a dependency
+ *
+ * We keep semantically non-reactive values in both memo block and effect
+ * dependency arrays to avoid versioning invariants e.g. `x !== y.aliasedX`.
+ * ```js
+ * function Component() {
+ *   // obj is semantically non-reactive, but its memo scope is pruned due to
+ *   // the interleaving hook call
+ *   const obj = {};
+ *   useHook();
+ *   write(obj);
+ *
+ *   const ref = useRef();
+ *
+ *   // this effect needs to be rerun when obj's referential identity changes,
+ *   // because it might alias obj to a useRef / mutable store.
+ *   useEffect(() => ref.current = obj, ???);
+ *
+ *   // in a custom hook (or child component), the user might expect versioning
+ *   // invariants to hold
+ *   useHook(ref, obj);
+ * }
+ *
+ * // defined elsewhere
+ * function useHook(someRef, obj) {
+ *   useEffect(
+ *     () => assert(someRef.current === obj),
+ *     [someRef, obj]
+ *   );
+ * }
+ * ```
+ */
+function PrunedNonReactive() {
+  const obj = makeObject();
+  useIdentity(null);
+  mutate(obj);
+
+  useEffect(() => print(obj.value), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md
new file mode 100644
index 00000000000..983c474bdea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveMemberExprMerge({propVal}) {
+  const obj = {a: {b: propVal}};
+  useEffect(() => print(obj.a, obj.a.b), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function ReactiveMemberExprMerge(t0) {
+  const $ = _c(4);
+  const { propVal } = t0;
+  let t1;
+  if ($[0] !== propVal) {
+    t1 = { a: { b: propVal } };
+    $[0] = propVal;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const obj = t1;
+  let t2;
+  if ($[2] !== obj.a) {
+    t2 = () => print(obj.a, obj.a.b);
+    $[2] = obj.a;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t2, [obj.a]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js
new file mode 100644
index 00000000000..41c18d937a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js
@@ -0,0 +1,8 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveMemberExprMerge({propVal}) {
+  const obj = {a: {b: propVal}};
+  useEffect(() => print(obj.a, obj.a.b), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md
new file mode 100644
index 00000000000..50bceb09aef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveMemberExpr({propVal}) {
+  const obj = {a: {b: propVal}};
+  useEffect(() => print(obj.a.b), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function ReactiveMemberExpr(t0) {
+  const $ = _c(4);
+  const { propVal } = t0;
+  let t1;
+  if ($[0] !== propVal) {
+    t1 = { a: { b: propVal } };
+    $[0] = propVal;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const obj = t1;
+  let t2;
+  if ($[2] !== obj.a.b) {
+    t2 = () => print(obj.a.b);
+    $[2] = obj.a.b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t2, [obj.a.b]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js
new file mode 100644
index 00000000000..ca6e7d4f0f0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js
@@ -0,0 +1,8 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveMemberExpr({propVal}) {
+  const obj = {a: {b: propVal}};
+  useEffect(() => print(obj.a.b), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md
new file mode 100644
index 00000000000..a886842c8eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print, shallowCopy} from 'shared-runtime';
+
+function ReactiveMemberExpr({cond, propVal}) {
+  const obj = {a: cond ? {b: propVal} : null, c: null};
+  const other = shallowCopy({a: {b: {c: {d: {e: {f: propVal + 1}}}}}});
+  const primitive = shallowCopy(propVal);
+  useEffect(
+    () => print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f),
+    AUTODEPS
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveMemberExpr,
+  params: [{cond: true, propVal: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print, shallowCopy } from "shared-runtime";
+
+function ReactiveMemberExpr(t0) {
+  const $ = _c(13);
+  const { cond, propVal } = t0;
+  let t1;
+  if ($[0] !== cond || $[1] !== propVal) {
+    t1 = cond ? { b: propVal } : null;
+    $[0] = cond;
+    $[1] = propVal;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t1) {
+    t2 = { a: t1, c: null };
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const obj = t2;
+  const t3 = propVal + 1;
+  let t4;
+  if ($[5] !== t3) {
+    t4 = shallowCopy({ a: { b: { c: { d: { e: { f: t3 } } } } } });
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const other = t4;
+  let t5;
+  if ($[7] !== propVal) {
+    t5 = shallowCopy(propVal);
+    $[7] = propVal;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const primitive = t5;
+  let t6;
+  if (
+    $[9] !== obj.a?.b ||
+    $[10] !== other?.a?.b?.c?.d?.e.f ||
+    $[11] !== primitive.a?.b.c?.d?.e.f
+  ) {
+    t6 = () =>
+      print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f);
+    $[9] = obj.a?.b;
+    $[10] = other?.a?.b?.c?.d?.e.f;
+    $[11] = primitive.a?.b.c?.d?.e.f;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  useEffect(t6, [obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveMemberExpr,
+  params: [{ cond: true, propVal: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: [1,2,undefined]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js
new file mode 100644
index 00000000000..42dc585cbe9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js
@@ -0,0 +1,18 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print, shallowCopy} from 'shared-runtime';
+
+function ReactiveMemberExpr({cond, propVal}) {
+  const obj = {a: cond ? {b: propVal} : null, c: null};
+  const other = shallowCopy({a: {b: {c: {d: {e: {f: propVal + 1}}}}}});
+  const primitive = shallowCopy(propVal);
+  useEffect(
+    () => print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f),
+    AUTODEPS
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveMemberExpr,
+  params: [{cond: true, propVal: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md
new file mode 100644
index 00000000000..7dfad84f795
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveMemberExpr({cond, propVal}) {
+  const obj = {a: cond ? {b: propVal} : null, c: null};
+  useEffect(() => print(obj.a?.b), AUTODEPS);
+  useEffect(() => print(obj.c?.d), AUTODEPS);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveMemberExpr,
+  params: [{cond: true, propVal: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function ReactiveMemberExpr(t0) {
+  const $ = _c(9);
+  const { cond, propVal } = t0;
+  let t1;
+  if ($[0] !== cond || $[1] !== propVal) {
+    t1 = cond ? { b: propVal } : null;
+    $[0] = cond;
+    $[1] = propVal;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t1) {
+    t2 = { a: t1, c: null };
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const obj = t2;
+  let t3;
+  if ($[5] !== obj.a?.b) {
+    t3 = () => print(obj.a?.b);
+    $[5] = obj.a?.b;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  useEffect(t3, [obj.a?.b]);
+  let t4;
+  if ($[7] !== obj.c?.d) {
+    t4 = () => print(obj.c?.d);
+    $[7] = obj.c?.d;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  useEffect(t4, [obj.c?.d]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveMemberExpr,
+  params: [{ cond: true, propVal: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: [1,undefined]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js
new file mode 100644
index 00000000000..882f9026613
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js
@@ -0,0 +1,14 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveMemberExpr({cond, propVal}) {
+  const obj = {a: cond ? {b: propVal} : null, c: null};
+  useEffect(() => print(obj.a?.b), AUTODEPS);
+  useEffect(() => print(obj.c?.d), AUTODEPS);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ReactiveMemberExpr,
+  params: [{cond: true, propVal: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md
new file mode 100644
index 00000000000..97fab06c1f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useRef, useEffect, AUTODEPS} from 'react';
+import {print, mutate} from 'shared-runtime';
+
+function Component({cond}) {
+  const arr = useRef([]);
+  const other = useRef([]);
+  // Although arr and other are both stable, derived is not
+  const derived = cond ? arr : other;
+  useEffect(() => {
+    mutate(derived.current);
+    print(derived.current);
+  }, AUTODEPS);
+  return arr;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useRef, useEffect, AUTODEPS } from "react";
+import { print, mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(4);
+  const { cond } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const arr = useRef(t1);
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const other = useRef(t2);
+
+  const derived = cond ? arr : other;
+  let t3;
+  if ($[2] !== derived) {
+    t3 = () => {
+      mutate(derived.current);
+      print(derived.current);
+    };
+    $[2] = derived;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  useEffect(t3, [derived]);
+  return arr;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js
new file mode 100644
index 00000000000..32a9037a9f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js
@@ -0,0 +1,15 @@
+// @inferEffectDependencies
+import {useRef, useEffect, AUTODEPS} from 'react';
+import {print, mutate} from 'shared-runtime';
+
+function Component({cond}) {
+  const arr = useRef([]);
+  const other = useRef([]);
+  // Although arr and other are both stable, derived is not
+  const derived = cond ? arr : other;
+  useEffect(() => {
+    mutate(derived.current);
+    print(derived.current);
+  }, AUTODEPS);
+  return arr;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md
new file mode 100644
index 00000000000..7e5371dba35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/*
+ * Ref types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const ref1 = useRef('initial value');
+  const ref2 = useRef('initial value');
+  let ref;
+  if (props.foo) {
+    ref = ref1;
+  } else {
+    ref = ref2;
+  }
+  useEffect(() => print(ref), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useRef, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/*
+ * Ref types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const $ = _c(4);
+  const ref1 = useRef("initial value");
+  const ref2 = useRef("initial value");
+  let ref;
+  if ($[0] !== props.foo) {
+    if (props.foo) {
+      ref = ref1;
+    } else {
+      ref = ref2;
+    }
+    $[0] = props.foo;
+    $[1] = ref;
+  } else {
+    ref = $[1];
+  }
+  let t0;
+  if ($[2] !== ref) {
+    t0 = () => print(ref);
+    $[2] = ref;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  useEffect(t0, [ref]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js
new file mode 100644
index 00000000000..ee98a93c70b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js
@@ -0,0 +1,18 @@
+// @inferEffectDependencies
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/*
+ * Ref types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const ref1 = useRef('initial value');
+  const ref2 = useRef('initial value');
+  let ref;
+  if (props.foo) {
+    ref = ref1;
+  } else {
+    ref = ref2;
+  }
+  useEffect(() => print(ref), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md
new file mode 100644
index 00000000000..db79dda3010
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, useState, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/*
+ * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const [_state1, setState1] = useRef('initial value');
+  const [_state2, setState2] = useRef('initial value');
+  let setState;
+  if (props.foo) {
+    setState = setState1;
+  } else {
+    setState = setState2;
+  }
+  useEffect(() => print(setState), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, useState, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/*
+ * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const $ = _c(4);
+  const [, setState1] = useRef("initial value");
+  const [, setState2] = useRef("initial value");
+  let setState;
+  if ($[0] !== props.foo) {
+    if (props.foo) {
+      setState = setState1;
+    } else {
+      setState = setState2;
+    }
+    $[0] = props.foo;
+    $[1] = setState;
+  } else {
+    setState = $[1];
+  }
+  let t0;
+  if ($[2] !== setState) {
+    t0 = () => print(setState);
+    $[2] = setState;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  useEffect(t0, [setState]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js
new file mode 100644
index 00000000000..f69efd650cd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js
@@ -0,0 +1,18 @@
+// @inferEffectDependencies
+import {useEffect, useState, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/*
+ * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const [_state1, setState1] = useRef('initial value');
+  const [_state2, setState2] = useRef('initial value');
+  let setState;
+  if (props.foo) {
+    setState = setState1;
+  } else {
+    setState = setState2;
+  }
+  useEffect(() => print(setState), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md
new file mode 100644
index 00000000000..8646a926aa7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveVariable({propVal}) {
+  const arr = [propVal];
+  useEffect(() => print(arr), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function ReactiveVariable(t0) {
+  const $ = _c(4);
+  const { propVal } = t0;
+  let t1;
+  if ($[0] !== propVal) {
+    t1 = [propVal];
+    $[0] = propVal;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const arr = t1;
+  let t2;
+  if ($[2] !== arr) {
+    t2 = () => print(arr);
+    $[2] = arr;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t2, [arr]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js
new file mode 100644
index 00000000000..510ff6e1242
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js
@@ -0,0 +1,8 @@
+// @inferEffectDependencies
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function ReactiveVariable({propVal}) {
+  const arr = [propVal];
+  useEffect(() => print(arr), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.expect.md
new file mode 100644
index 00000000000..b8d213b6374
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.infer-effect-deps-with-rule-violation--lint.ts:8:2
+   6 | function Foo({propVal}) {
+   7 |   const arr = [propVal];
+>  8 |   useEffectWrapper(() => print(arr), AUTODEPS);
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+   9 |
+  10 |   const arr2 = [];
+  11 |   useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.js
new file mode 100644
index 00000000000..7df86cdfd25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.js
@@ -0,0 +1,20 @@
+// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.expect.md
new file mode 100644
index 00000000000..80d8af00e61
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  'use memo';
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot infer dependencies of this effect. This will break your build!
+
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
+
+error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.ts:9:2
+   7 |   'use memo';
+   8 |   const arr = [propVal];
+>  9 |   useEffectWrapper(() => print(arr), AUTODEPS);
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
+  10 |
+  11 |   const arr2 = [];
+  12 |   useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.js
new file mode 100644
index 00000000000..42bbf4c994b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.js
@@ -0,0 +1,21 @@
+// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  'use memo';
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.expect.md
new file mode 100644
index 00000000000..47de4a1d193
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import { print } from "shared-runtime";
+import useEffectWrapper from "useEffectWrapper";
+import { AUTODEPS } from "react";
+
+function Foo(t0) {
+  const { propVal } = t0;
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), [arr]);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), [arr2, propVal]);
+  arr2.push(2);
+  return { arr, arr2 };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ propVal: 1 }],
+  sequentialRenders: [{ propVal: 1 }, { propVal: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"arr":[1],"arr2":[2]}
+{"arr":[2],"arr2":[2]}
+logs: [[ 1 ],[ 2 ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.js
new file mode 100644
index 00000000000..6cca9a833d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.js
@@ -0,0 +1,20 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation-use-memo-opt-in--compile.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation-use-memo-opt-in--compile.expect.md
new file mode 100644
index 00000000000..610ad348902
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation-use-memo-opt-in--compile.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  'use memo';
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import { print } from "shared-runtime";
+import useEffectWrapper from "useEffectWrapper";
+import { AUTODEPS } from "react";
+
+function Foo(t0) {
+  "use memo";
+  const { propVal } = t0;
+
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), [arr]);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), [arr2, propVal]);
+  arr2.push(2);
+  return { arr, arr2 };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ propVal: 1 }],
+  sequentialRenders: [{ propVal: 1 }, { propVal: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"arr":[1],"arr2":[2]}
+{"arr":[2],"arr2":[2]}
+logs: [[ 1 ],[ 2 ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation-use-memo-opt-in--compile.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation-use-memo-opt-in--compile.js
new file mode 100644
index 00000000000..efa5db19406
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation-use-memo-opt-in--compile.js
@@ -0,0 +1,21 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  'use memo';
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/lint-repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/lint-repro.expect.md
new file mode 100644
index 00000000000..1d767ce3db7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/lint-repro.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @outputMode:"lint"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function ReactiveVariable({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @outputMode:"lint"
+import { print } from "shared-runtime";
+import useEffectWrapper from "useEffectWrapper";
+import { AUTODEPS } from "react";
+
+function ReactiveVariable({ propVal }) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/lint-repro.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/lint-repro.js
new file mode 100644
index 00000000000..011cc535c21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/lint-repro.js
@@ -0,0 +1,9 @@
+// @inferEffectDependencies @outputMode:"lint"
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function ReactiveVariable({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.expect.md
new file mode 100644
index 00000000000..89a89c41e73
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+React.memo(props => {
+  return <div />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+React.memo((props) => {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.js
new file mode 100644
index 00000000000..d9e1eaf31aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.js
@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+React.memo(props => {
+  return <div />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.expect.md
new file mode 100644
index 00000000000..c183bf949cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+const Component = props => {
+  return <div />;
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+const Component = (props) => {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.js
new file mode 100644
index 00000000000..c12f61d18fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.js
@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+const Component = props => {
+  return <div />;
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.expect.md
new file mode 100644
index 00000000000..49886e0ac3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+
+const Component = function ComponentName(props) {
+  return <Foo />;
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+
+const Component = function ComponentName(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Foo />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.js
new file mode 100644
index 00000000000..deac307a3b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.js
@@ -0,0 +1,5 @@
+// @compilationMode:"infer"
+
+const Component = function ComponentName(props) {
+  return <Foo />;
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.expect.md
new file mode 100644
index 00000000000..ca1d6e43360
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+React.forwardRef(props => {
+  return <div />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+React.forwardRef((props) => {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.js
new file mode 100644
index 00000000000..f2b458df8d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.js
@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+React.forwardRef(props => {
+  return <div />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.expect.md
new file mode 100644
index 00000000000..d92f1a6c450
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function Component(props) {
+  const [state, _] = useState(null);
+  return [state];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+function Component(props) {
+  const $ = _c(2);
+  const [state] = useState(null);
+  let t0;
+  if ($[0] !== state) {
+    t0 = [state];
+    $[0] = state;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.js
new file mode 100644
index 00000000000..57c03cd222a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.js
@@ -0,0 +1,5 @@
+// @compilationMode:"infer"
+function Component(props) {
+  const [state, _] = useState(null);
+  return [state];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.expect.md
new file mode 100644
index 00000000000..ed175c61abc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function Component(props) {
+  return <div />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.js
new file mode 100644
index 00000000000..73607ce519c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.js
@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+function Component(props) {
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.expect.md
new file mode 100644
index 00000000000..5f3da3fd8e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+
+function Foo({}, ref) {
+  return <div ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+
+function Foo(t0, ref) {
+  const $ = _c(2);
+  let t1;
+  if ($[0] !== ref) {
+    t1 = <div ref={ref} />;
+    $[0] = ref;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.js
new file mode 100644
index 00000000000..cefd53b1231
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.js
@@ -0,0 +1,10 @@
+// @compilationMode:"infer"
+
+function Foo({}, ref) {
+  return <div ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.expect.md
new file mode 100644
index 00000000000..a94055469af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function useStateValue(props) {
+  const [state, _] = useState(null);
+  return [state];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+function useStateValue(props) {
+  const $ = _c(2);
+  const [state] = useState(null);
+  let t0;
+  if ($[0] !== state) {
+    t0 = [state];
+    $[0] = state;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.js
new file mode 100644
index 00000000000..7191fe6cb04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.js
@@ -0,0 +1,5 @@
+// @compilationMode:"infer"
+function useStateValue(props) {
+  const [state, _] = useState(null);
+  return [state];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.expect.md
new file mode 100644
index 00000000000..3f4c0a01739
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function useDiv(props) {
+  return <div />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+function useDiv(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.js
new file mode 100644
index 00000000000..2fef05df39f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.js
@@ -0,0 +1,4 @@
+// @compilationMode:"infer"
+function useDiv(props) {
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-global-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-global-object.expect.md
new file mode 100644
index 00000000000..319777120f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-global-object.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+import {identity, sum} from 'shared-runtime';
+
+// Check that we correctly resolve type and effect lookups on the javascript
+// global object.
+function Component(props) {
+  let neverAliasedOrMutated = identity(props.b);
+  let primitiveVal1 = Math.max(props.a, neverAliasedOrMutated);
+  let primitiveVal2 = Infinity;
+  let primitiveVal3 = globalThis.globalThis.NaN;
+
+  // Even though we don't know the function signature of sum,
+  // we should be able to infer that it does not mutate its inputs.
+  sum(primitiveVal1, primitiveVal2, primitiveVal3);
+  return {primitiveVal1, primitiveVal2, primitiveVal3};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, sum } from "shared-runtime";
+
+// Check that we correctly resolve type and effect lookups on the javascript
+// global object.
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.b) {
+    t0 = identity(props.b);
+    $[0] = props.b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const neverAliasedOrMutated = t0;
+  const primitiveVal1 = Math.max(props.a, neverAliasedOrMutated);
+
+  const primitiveVal3 = globalThis.globalThis.NaN;
+
+  sum(primitiveVal1, Infinity, primitiveVal3);
+  let t1;
+  if ($[2] !== primitiveVal1) {
+    t1 = { primitiveVal1, primitiveVal2: Infinity, primitiveVal3 };
+    $[2] = primitiveVal1;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 2 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"primitiveVal1":2,"primitiveVal2":null,"primitiveVal3":null}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-global-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-global-object.js
new file mode 100644
index 00000000000..8529535b75a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-global-object.js
@@ -0,0 +1,21 @@
+import {identity, sum} from 'shared-runtime';
+
+// Check that we correctly resolve type and effect lookups on the javascript
+// global object.
+function Component(props) {
+  let neverAliasedOrMutated = identity(props.b);
+  let primitiveVal1 = Math.max(props.a, neverAliasedOrMutated);
+  let primitiveVal2 = Infinity;
+  let primitiveVal3 = globalThis.globalThis.NaN;
+
+  // Even though we don't know the function signature of sum,
+  // we should be able to infer that it does not mutate its inputs.
+  sum(primitiveVal1, primitiveVal2, primitiveVal3);
+  return {primitiveVal1, primitiveVal2, primitiveVal3};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.expect.md
new file mode 100644
index 00000000000..7ac27ab8144
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+
+import {Stringify} from 'shared-runtime';
+
+function Test() {
+  const context = {
+    testFn() {
+      // if it is an arrow function its work
+      return () => 'test'; // it will break compile if returns an arrow fn
+    },
+  };
+
+  return <Stringify value={context} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+
+import { Stringify } from "shared-runtime";
+
+function Test() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const context = {
+      testFn() {
+        return _temp;
+      },
+    };
+    t0 = <Stringify value={context} shouldInvokeFns={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return "test";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{"testFn":{"kind":"Function","result":{"kind":"Function","result":"test"}}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.jsx
new file mode 100644
index 00000000000..cb9d22a9f1a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.jsx
@@ -0,0 +1,19 @@
+// @compilationMode:"infer"
+
+import {Stringify} from 'shared-runtime';
+
+function Test() {
+  const context = {
+    testFn() {
+      // if it is an arrow function its work
+      return () => 'test'; // it will break compile if returns an arrow fn
+    },
+  };
+
+  return <Stringify value={context} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.expect.md
new file mode 100644
index 00000000000..0472063a7c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+import {useIdentity, identity} from 'shared-runtime';
+
+function Component(fakeProps: number) {
+  const x = useIdentity(fakeProps);
+  return identity(x);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [42],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+import { useIdentity, identity } from "shared-runtime";
+
+function Component(fakeProps: number) {
+  const x = useIdentity(fakeProps);
+  return identity(x);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [42],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.ts
new file mode 100644
index 00000000000..0fed6160600
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.ts
@@ -0,0 +1,12 @@
+// @expectNothingCompiled @compilationMode:"infer"
+import {useIdentity, identity} from 'shared-runtime';
+
+function Component(fakeProps: number) {
+  const x = useIdentity(fakeProps);
+  return identity(x);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [42],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.expect.md
new file mode 100644
index 00000000000..2f7e63d7712
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+function Component(props) {
+  const result = f(props);
+  function helper() {
+    return <foo />;
+  }
+  helper();
+  return result;
+}
+
+function f(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+function Component(props) {
+  const result = f(props);
+  function helper() {
+    return <foo />;
+  }
+  helper();
+  return result;
+}
+
+function f(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.js
new file mode 100644
index 00000000000..c4b75bd0585
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.js
@@ -0,0 +1,18 @@
+// @expectNothingCompiled @compilationMode:"infer"
+function Component(props) {
+  const result = f(props);
+  function helper() {
+    return <foo />;
+  }
+  helper();
+  return result;
+}
+
+function f(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.expect.md
new file mode 100644
index 00000000000..9e442088d49
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+function Component(props) {
+  const ignore = <foo />;
+  return {foo: f(props)};
+}
+
+function f(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+function Component(props) {
+  const ignore = <foo />;
+  return { foo: f(props) };
+}
+
+function f(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"foo":{}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.js
new file mode 100644
index 00000000000..f8b44e8abf9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.js
@@ -0,0 +1,14 @@
+// @expectNothingCompiled @compilationMode:"infer"
+function Component(props) {
+  const ignore = <foo />;
+  return {foo: f(props)};
+}
+
+function f(props) {
+  return props;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-phi-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-phi-primitive.expect.md
new file mode 100644
index 00000000000..8b5ea13ec4b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-phi-primitive.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  let x;
+  if (a) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+
+  let y = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [true, false],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b) {
+  let x;
+  if (a) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+
+  const y = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [true, false],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-phi-primitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-phi-primitive.js
new file mode 100644
index 00000000000..7e90336050c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-phi-primitive.js
@@ -0,0 +1,17 @@
+function foo(a, b) {
+  let x;
+  if (a) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+
+  let y = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [true, false],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md
new file mode 100644
index 00000000000..f8e74b37dda
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md
@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const x = makeObject();
+  const y = delete x.value;
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const x = makeObject();
+  const y = delete x.value;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js
new file mode 100644
index 00000000000..1dd4bd710e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js
@@ -0,0 +1,6 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component(props) {
+  const x = makeObject();
+  const y = delete x.value;
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.expect.md
new file mode 100644
index 00000000000..f415c20528b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+function useFoo({a}) {
+  let x = [];
+  x.push(a?.b.c?.d.e);
+  x.push(a.b?.c.d?.e);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: null},
+    {a: {}},
+    {a: {b: {c: {d: {e: 42}}}}},
+    {a: {b: {c: {d: {e: 43}}}}},
+    {a: {b: {c: {d: {e: undefined}}}}},
+    {a: {b: undefined}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let x;
+  if ($[0] !== a.b.c.d.e) {
+    x = [];
+    x.push(a?.b.c?.d.e);
+    x.push(a.b?.c.d?.e);
+    $[0] = a.b.c.d.e;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [
+    { a: null },
+    { a: null },
+    { a: {} },
+    { a: { b: { c: { d: { e: 42 } } } } },
+    { a: { b: { c: { d: { e: 43 } } } } },
+    { a: { b: { c: { d: { e: undefined } } } } },
+    { a: { b: undefined } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
+[42,42]
+[43,43]
+[null,null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.ts
new file mode 100644
index 00000000000..479048085e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.ts
@@ -0,0 +1,20 @@
+function useFoo({a}) {
+  let x = [];
+  x.push(a?.b.c?.d.e);
+  x.push(a.b?.c.d?.e);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: null},
+    {a: {}},
+    {a: {b: {c: {d: {e: 42}}}}},
+    {a: {b: {c: {d: {e: 43}}}}},
+    {a: {b: {c: {d: {e: undefined}}}}},
+    {a: {b: undefined}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.expect.md
new file mode 100644
index 00000000000..3b512a8b59c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.expect.md
@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// This component is skipped bc it doesn't call any hooks or
+// use JSX:
+function Component(props) {
+  return render();
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// This component is skipped bc it doesn't call any hooks or
+// use JSX:
+function Component(props) {
+  return render();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.js
new file mode 100644
index 00000000000..dee75b57414
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.js
@@ -0,0 +1,6 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// This component is skipped bc it doesn't call any hooks or
+// use JSX:
+function Component(props) {
+  return render();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-types-through-type-cast.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-types-through-type-cast.flow.expect.md
new file mode 100644
index 00000000000..2fb2fe3c444
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-types-through-type-cast.flow.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @flow
+import {getNumber} from 'shared-runtime';
+
+function Component(props) {
+  // We can infer that `x` is a primitive bc it is aliased to `y`,
+  // which is used in a binary expression
+  const x = getNumber();
+  const y = (x: any);
+  y + 1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { getNumber } from "shared-runtime";
+
+function Component(props) {
+  const x = getNumber();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 4
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-types-through-type-cast.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-types-through-type-cast.flow.js
new file mode 100644
index 00000000000..d5a9418ce56
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-types-through-type-cast.flow.js
@@ -0,0 +1,17 @@
+// @flow
+import {getNumber} from 'shared-runtime';
+
+function Component(props) {
+  // We can infer that `x` is a primitive bc it is aliased to `y`,
+  // which is used in a binary expression
+  const x = getNumber();
+  const y = (x: any);
+  y + 1;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
new file mode 100644
index 00000000000..69a68daa232
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
@@ -0,0 +1,477 @@
+
+## Input
+
+```javascript
+// @inlineJsxTransform
+
+function Parent({children, a: _a, b: _b, c: _c, ref}) {
+  return <div ref={ref}>{children}</div>;
+}
+
+function Child({children}) {
+  return <>{children}</>;
+}
+
+function GrandChild({className}) {
+  return (
+    <span className={className}>
+      <React.Fragment key="fragmentKey">Hello world</React.Fragment>
+    </span>
+  );
+}
+
+function ParentAndRefAndKey(props) {
+  const testRef = useRef();
+  return <Parent a="a" b={{b: 'b'}} c={C} key="testKey" ref={testRef} />;
+}
+
+function ParentAndChildren(props) {
+  const render = () => {
+    return <div key="d">{props.foo}</div>;
+  };
+  return (
+    <Parent>
+      <Child key="a" {...props} />
+      <Child key="b">
+        <GrandChild key="c" className={props.foo} {...props} />
+        {render()}
+      </Child>
+    </Parent>
+  );
+}
+
+const propsToSpread = {a: 'a', b: 'b', c: 'c'};
+function PropsSpread() {
+  return (
+    <>
+      <Test key="a" {...propsToSpread} />
+      <Test key="b" {...propsToSpread} a="z" />
+    </>
+  );
+}
+
+function ConditionalJsx({shouldWrap}) {
+  let content = <div>Hello</div>;
+
+  if (shouldWrap) {
+    content = <Parent>{content}</Parent>;
+  }
+
+  return content;
+}
+
+function ComponentWithSpreadPropsAndRef({ref, ...other}) {
+  return <Foo ref={ref} {...other} />;
+}
+
+// TODO: Support value blocks
+function TernaryJsx({cond}) {
+  return cond ? <div /> : null;
+}
+
+global.DEV = true;
+export const FIXTURE_ENTRYPOINT = {
+  fn: ParentAndChildren,
+  params: [{foo: 'abc'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c2 } from "react/compiler-runtime"; // @inlineJsxTransform
+
+function Parent(t0) {
+  const $ = _c2(3);
+  const { children, ref } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== ref) {
+    if (DEV) {
+      t1 = <div ref={ref}>{children}</div>;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: "div",
+        ref: ref,
+        key: null,
+        props: { ref: ref, children: children },
+      };
+    }
+    $[0] = children;
+    $[1] = ref;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Child(t0) {
+  const $ = _c2(2);
+  const { children } = t0;
+  let t1;
+  if ($[0] !== children) {
+    if (DEV) {
+      t1 = <>{children}</>;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Symbol.for("react.fragment"),
+        ref: null,
+        key: null,
+        props: { children: children },
+      };
+    }
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function GrandChild(t0) {
+  const $ = _c2(3);
+  const { className } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    if (DEV) {
+      t1 = <React.Fragment key="fragmentKey">Hello world</React.Fragment>;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: React.Fragment,
+        ref: null,
+        key: "fragmentKey",
+        props: { children: "Hello world" },
+      };
+    }
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== className) {
+    if (DEV) {
+      t2 = <span className={className}>{t1}</span>;
+    } else {
+      t2 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: "span",
+        ref: null,
+        key: null,
+        props: { className: className, children: t1 },
+      };
+    }
+    $[1] = className;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+function ParentAndRefAndKey(props) {
+  const $ = _c2(1);
+  const testRef = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    if (DEV) {
+      t0 = <Parent a="a" b={{ b: "b" }} c={C} key="testKey" ref={testRef} />;
+    } else {
+      t0 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Parent,
+        ref: testRef,
+        key: "testKey",
+        props: { a: "a", b: { b: "b" }, c: C, ref: testRef },
+      };
+    }
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function ParentAndChildren(props) {
+  const $ = _c2(14);
+  let t0;
+  if ($[0] !== props.foo) {
+    t0 = () => {
+      let t1;
+      if (DEV) {
+        t1 = <div key="d">{props.foo}</div>;
+      } else {
+        t1 = {
+          $$typeof: Symbol.for("react.transitional.element"),
+          type: "div",
+          ref: null,
+          key: "d",
+          props: { children: props.foo },
+        };
+      }
+      return t1;
+    };
+    $[0] = props.foo;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const render = t0;
+  let t1;
+  if ($[2] !== props) {
+    if (DEV) {
+      t1 = <Child key="a" {...props} />;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Child,
+        ref: null,
+        key: "a",
+        props: props,
+      };
+    }
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+
+  const t2 = props.foo;
+  let t3;
+  if ($[4] !== props) {
+    if (DEV) {
+      t3 = <GrandChild key="c" className={t2} {...props} />;
+    } else {
+      t3 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: GrandChild,
+        ref: null,
+        key: "c",
+        props: { className: t2, ...props },
+      };
+    }
+    $[4] = props;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== render) {
+    t4 = render();
+    $[6] = render;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t3 || $[9] !== t4) {
+    if (DEV) {
+      t5 = (
+        <Child key="b">
+          {t3}
+          {t4}
+        </Child>
+      );
+    } else {
+      t5 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Child,
+        ref: null,
+        key: "b",
+        props: { children: [t3, t4] },
+      };
+    }
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== t1 || $[12] !== t5) {
+    if (DEV) {
+      t6 = (
+        <Parent>
+          {t1}
+          {t5}
+        </Parent>
+      );
+    } else {
+      t6 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Parent,
+        ref: null,
+        key: null,
+        props: { children: [t1, t5] },
+      };
+    }
+    $[11] = t1;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  return t6;
+}
+
+const propsToSpread = { a: "a", b: "b", c: "c" };
+function PropsSpread() {
+  const $ = _c2(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let t1;
+    if (DEV) {
+      t1 = <Test key="a" {...propsToSpread} />;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Test,
+        ref: null,
+        key: "a",
+        props: propsToSpread,
+      };
+    }
+    let t2;
+    if (DEV) {
+      t2 = <Test key="b" {...propsToSpread} a="z" />;
+    } else {
+      t2 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Test,
+        ref: null,
+        key: "b",
+        props: { ...propsToSpread, a: "z" },
+      };
+    }
+    if (DEV) {
+      t0 = (
+        <>
+          {t1}
+          {t2}
+        </>
+      );
+    } else {
+      t0 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Symbol.for("react.fragment"),
+        ref: null,
+        key: null,
+        props: { children: [t1, t2] },
+      };
+    }
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function ConditionalJsx(t0) {
+  const $ = _c2(2);
+  const { shouldWrap } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    if (DEV) {
+      t1 = <div>Hello</div>;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: "div",
+        ref: null,
+        key: null,
+        props: { children: "Hello" },
+      };
+    }
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let content = t1;
+
+  if (shouldWrap) {
+    const t2 = content;
+    let t3;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      if (DEV) {
+        t3 = <Parent>{t2}</Parent>;
+      } else {
+        t3 = {
+          $$typeof: Symbol.for("react.transitional.element"),
+          type: Parent,
+          ref: null,
+          key: null,
+          props: { children: t2 },
+        };
+      }
+      $[1] = t3;
+    } else {
+      t3 = $[1];
+    }
+    content = t3;
+  }
+  return content;
+}
+
+function ComponentWithSpreadPropsAndRef(t0) {
+  const $ = _c2(6);
+  let other;
+  let ref;
+  if ($[0] !== t0) {
+    ({ ref, ...other } = t0);
+    $[0] = t0;
+    $[1] = other;
+    $[2] = ref;
+  } else {
+    other = $[1];
+    ref = $[2];
+  }
+  let t1;
+  if ($[3] !== other || $[4] !== ref) {
+    if (DEV) {
+      t1 = <Foo ref={ref} {...other} />;
+    } else {
+      t1 = {
+        $$typeof: Symbol.for("react.transitional.element"),
+        type: Foo,
+        ref: ref,
+        key: null,
+        props: { ref: ref, ...other },
+      };
+    }
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+// TODO: Support value blocks
+function TernaryJsx(t0) {
+  const $ = _c2(2);
+  const { cond } = t0;
+  let t1;
+  if ($[0] !== cond) {
+    t1 = cond ? <div /> : null;
+    $[0] = cond;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+global.DEV = true;
+export const FIXTURE_ENTRYPOINT = {
+  fn: ParentAndChildren,
+  params: [{ foo: "abc" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span class="abc">Hello world</span><div>abc</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js
new file mode 100644
index 00000000000..2ab1efef794
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js
@@ -0,0 +1,72 @@
+// @inlineJsxTransform
+
+function Parent({children, a: _a, b: _b, c: _c, ref}) {
+  return <div ref={ref}>{children}</div>;
+}
+
+function Child({children}) {
+  return <>{children}</>;
+}
+
+function GrandChild({className}) {
+  return (
+    <span className={className}>
+      <React.Fragment key="fragmentKey">Hello world</React.Fragment>
+    </span>
+  );
+}
+
+function ParentAndRefAndKey(props) {
+  const testRef = useRef();
+  return <Parent a="a" b={{b: 'b'}} c={C} key="testKey" ref={testRef} />;
+}
+
+function ParentAndChildren(props) {
+  const render = () => {
+    return <div key="d">{props.foo}</div>;
+  };
+  return (
+    <Parent>
+      <Child key="a" {...props} />
+      <Child key="b">
+        <GrandChild key="c" className={props.foo} {...props} />
+        {render()}
+      </Child>
+    </Parent>
+  );
+}
+
+const propsToSpread = {a: 'a', b: 'b', c: 'c'};
+function PropsSpread() {
+  return (
+    <>
+      <Test key="a" {...propsToSpread} />
+      <Test key="b" {...propsToSpread} a="z" />
+    </>
+  );
+}
+
+function ConditionalJsx({shouldWrap}) {
+  let content = <div>Hello</div>;
+
+  if (shouldWrap) {
+    content = <Parent>{content}</Parent>;
+  }
+
+  return content;
+}
+
+function ComponentWithSpreadPropsAndRef({ref, ...other}) {
+  return <Foo ref={ref} {...other} />;
+}
+
+// TODO: Support value blocks
+function TernaryJsx({cond}) {
+  return cond ? <div /> : null;
+}
+
+global.DEV = true;
+export const FIXTURE_ENTRYPOINT = {
+  fn: ParentAndChildren,
+  params: [{foo: 'abc'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback-cross-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback-cross-context.expect.md
new file mode 100644
index 00000000000..c1a6dfb3eae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback-cross-context.expect.md
@@ -0,0 +1,133 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Forked from array-map-simple.js
+ *
+ * Named lambdas (e.g. cb1) may be defined in the top scope of a function and
+ * used in a different lambda (getArrMap1).
+ *
+ * Here, we should try to determine if cb1 is actually called. In this case:
+ * - getArrMap1 is assumed to be called as it's passed to JSX
+ * - cb1 is not assumed to be called since it's only used as a call operand
+ */
+function useFoo({arr1, arr2}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const getArrMap1 = () => arr1.map(cb1);
+  const cb2 = e => arr2[0].value + e.value;
+  const getArrMap2 = () => arr1.map(cb2);
+  return (
+    <Stringify
+      getArrMap1={getArrMap1}
+      getArrMap2={getArrMap2}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+/**
+ * Forked from array-map-simple.js
+ *
+ * Named lambdas (e.g. cb1) may be defined in the top scope of a function and
+ * used in a different lambda (getArrMap1).
+ *
+ * Here, we should try to determine if cb1 is actually called. In this case:
+ * - getArrMap1 is assumed to be called as it's passed to JSX
+ * - cb1 is not assumed to be called since it's only used as a call operand
+ */
+function useFoo(t0) {
+  const $ = _c(13);
+  const { arr1, arr2 } = t0;
+  let t1;
+  if ($[0] !== arr1[0]) {
+    t1 = (e) => arr1[0].value + e.value;
+    $[0] = arr1[0];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb1 = t1;
+  let t2;
+  if ($[2] !== arr1 || $[3] !== cb1) {
+    t2 = () => arr1.map(cb1);
+    $[2] = arr1;
+    $[3] = cb1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const getArrMap1 = t2;
+  let t3;
+  if ($[5] !== arr2) {
+    t3 = (e_0) => arr2[0].value + e_0.value;
+    $[5] = arr2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const cb2 = t3;
+  let t4;
+  if ($[7] !== arr1 || $[8] !== cb2) {
+    t4 = () => arr1.map(cb2);
+    $[7] = arr1;
+    $[8] = cb2;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const getArrMap2 = t4;
+  let t5;
+  if ($[10] !== getArrMap1 || $[11] !== getArrMap2) {
+    t5 = (
+      <Stringify
+        getArrMap1={getArrMap1}
+        getArrMap2={getArrMap2}
+        shouldInvokeFns={true}
+      />
+    );
+    $[10] = getArrMap1;
+    $[11] = getArrMap2;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getArrMap1":{"kind":"Function","result":[]},"getArrMap2":{"kind":"Function","result":[]},"shouldInvokeFns":true}</div>
+<div>{"getArrMap1":{"kind":"Function","result":[]},"getArrMap2":{"kind":"Function","result":[]},"shouldInvokeFns":true}</div>
+<div>{"getArrMap1":{"kind":"Function","result":[2,3]},"getArrMap2":{"kind":"Function","result":[0,1]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback-cross-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback-cross-context.js
new file mode 100644
index 00000000000..e9056562262
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback-cross-context.js
@@ -0,0 +1,35 @@
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Forked from array-map-simple.js
+ *
+ * Named lambdas (e.g. cb1) may be defined in the top scope of a function and
+ * used in a different lambda (getArrMap1).
+ *
+ * Here, we should try to determine if cb1 is actually called. In this case:
+ * - getArrMap1 is assumed to be called as it's passed to JSX
+ * - cb1 is not assumed to be called since it's only used as a call operand
+ */
+function useFoo({arr1, arr2}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const getArrMap1 = () => arr1.map(cb1);
+  const cb2 = e => arr2[0].value + e.value;
+  const getArrMap2 = () => arr1.map(cb2);
+  return (
+    <Stringify
+      getArrMap1={getArrMap1}
+      getArrMap2={getArrMap2}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback.expect.md
new file mode 100644
index 00000000000..a741eb59f2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+/**
+ * Forked from array-map-simple.js
+ *
+ * Whether lambdas are named or passed inline shouldn't affect whether we expect
+ * it to be called.
+ */
+function useFoo({arr1, arr2}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const x = arr1.map(cb1);
+  const cb2 = e => arr2[0].value + e.value;
+  const y = arr1.map(cb2);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Forked from array-map-simple.js
+ *
+ * Whether lambdas are named or passed inline shouldn't affect whether we expect
+ * it to be called.
+ */
+function useFoo(t0) {
+  const $ = _c(13);
+  const { arr1, arr2 } = t0;
+  let t1;
+  if ($[0] !== arr1[0]) {
+    t1 = (e) => arr1[0].value + e.value;
+    $[0] = arr1[0];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb1 = t1;
+  let t2;
+  if ($[2] !== arr1 || $[3] !== cb1) {
+    t2 = arr1.map(cb1);
+    $[2] = arr1;
+    $[3] = cb1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const x = t2;
+  let t3;
+  if ($[5] !== arr2) {
+    t3 = (e_0) => arr2[0].value + e_0.value;
+    $[5] = arr2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const cb2 = t3;
+  let t4;
+  if ($[7] !== arr1 || $[8] !== cb2) {
+    t4 = arr1.map(cb2);
+    $[7] = arr1;
+    $[8] = cb2;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const y = t4;
+  let t5;
+  if ($[10] !== x || $[11] !== y) {
+    t5 = [x, y];
+    $[10] = x;
+    $[11] = y;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
+[[],[]]
+[[2,3],[0,1]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback.js
new file mode 100644
index 00000000000..bf4f3ba6618
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-callback.js
@@ -0,0 +1,23 @@
+/**
+ * Forked from array-map-simple.js
+ *
+ * Whether lambdas are named or passed inline shouldn't affect whether we expect
+ * it to be called.
+ */
+function useFoo({arr1, arr2}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const x = arr1.map(cb1);
+  const cb2 = e => arr2[0].value + e.value;
+  const y = arr1.map(cb2);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.expect.md
new file mode 100644
index 00000000000..96ec12d5eab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.expect.md
@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+/**
+ * Forked from array-map-simple.js
+ *
+ * Here, getVal1 has a known callsite in `cb1`, but `cb1` isn't known to be
+ * called (it's only passed to array.map). In this case, we should be
+ * conservative and assume that all named lambdas are conditionally called.
+ */
+function useFoo({arr1, arr2}) {
+  const getVal1 = () => arr1[0].value;
+  const cb1 = e => getVal1() + e.value;
+  const x = arr1.map(cb1);
+  const getVal2 = () => arr2[0].value;
+  const cb2 = e => getVal2() + e.value;
+  const y = arr1.map(cb2);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Forked from array-map-simple.js
+ *
+ * Here, getVal1 has a known callsite in `cb1`, but `cb1` isn't known to be
+ * called (it's only passed to array.map). In this case, we should be
+ * conservative and assume that all named lambdas are conditionally called.
+ */
+function useFoo(t0) {
+  const $ = _c(13);
+  const { arr1, arr2 } = t0;
+  let t1;
+  if ($[0] !== arr1[0]) {
+    const getVal1 = () => arr1[0].value;
+    t1 = (e) => getVal1() + e.value;
+    $[0] = arr1[0];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb1 = t1;
+  let t2;
+  if ($[2] !== arr1 || $[3] !== cb1) {
+    t2 = arr1.map(cb1);
+    $[2] = arr1;
+    $[3] = cb1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const x = t2;
+  let t3;
+  if ($[5] !== arr2) {
+    const getVal2 = () => arr2[0].value;
+    t3 = (e_0) => getVal2() + e_0.value;
+    $[5] = arr2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const cb2 = t3;
+  let t4;
+  if ($[7] !== arr1 || $[8] !== cb2) {
+    t4 = arr1.map(cb2);
+    $[7] = arr1;
+    $[8] = cb2;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const y = t4;
+  let t5;
+  if ($[10] !== x || $[11] !== y) {
+    t5 = [x, y];
+    $[10] = x;
+    $[11] = y;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
+[[],[]]
+[[2,3],[0,1]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.js
new file mode 100644
index 00000000000..598faba46db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.js
@@ -0,0 +1,26 @@
+/**
+ * Forked from array-map-simple.js
+ *
+ * Here, getVal1 has a known callsite in `cb1`, but `cb1` isn't known to be
+ * called (it's only passed to array.map). In this case, we should be
+ * conservative and assume that all named lambdas are conditionally called.
+ */
+function useFoo({arr1, arr2}) {
+  const getVal1 = () => arr1[0].value;
+  const cb1 = e => getVal1() + e.value;
+  const x = arr1.map(cb1);
+  const getVal2 = () => arr2[0].value;
+  const cb2 = e => getVal2() + e.value;
+  const y = arr1.map(cb2);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-simple.expect.md
new file mode 100644
index 00000000000..5eb97aa1bf0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-simple.expect.md
@@ -0,0 +1,111 @@
+
+## Input
+
+```javascript
+/**
+ * Test that we're not hoisting property reads from lambdas that are created to
+ * pass to opaque functions, which often have maybe-invoke semantics.
+ *
+ * In this example, we shouldn't hoist `arr[0].value` out of the lambda.
+ * ```js
+ * e => arr[0].value + e.value  <-- created to pass to map
+ * arr.map(<cb>)                <-- argument only invoked if array is non-empty
+ * ```
+ */
+function useFoo({arr1, arr2}) {
+  const x = arr1.map(e => arr1[0].value + e.value);
+  const y = arr1.map(e => arr2[0].value + e.value);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Test that we're not hoisting property reads from lambdas that are created to
+ * pass to opaque functions, which often have maybe-invoke semantics.
+ *
+ * In this example, we shouldn't hoist `arr[0].value` out of the lambda.
+ * ```js
+ * e => arr[0].value + e.value  <-- created to pass to map
+ * arr.map(<cb>)                <-- argument only invoked if array is non-empty
+ * ```
+ */
+function useFoo(t0) {
+  const $ = _c(12);
+  const { arr1, arr2 } = t0;
+  let t1;
+  if ($[0] !== arr1) {
+    let t2;
+    if ($[2] !== arr1[0]) {
+      t2 = (e) => arr1[0].value + e.value;
+      $[2] = arr1[0];
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    t1 = arr1.map(t2);
+    $[0] = arr1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let t2;
+  if ($[4] !== arr1 || $[5] !== arr2) {
+    let t3;
+    if ($[7] !== arr2) {
+      t3 = (e_0) => arr2[0].value + e_0.value;
+      $[7] = arr2;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    t2 = arr1.map(t3);
+    $[4] = arr1;
+    $[5] = arr2;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const y = t2;
+  let t3;
+  if ($[9] !== x || $[10] !== y) {
+    t3 = [x, y];
+    $[9] = x;
+    $[10] = y;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],[]]
+[[],[]]
+[[2,3],[0,1]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-simple.js
new file mode 100644
index 00000000000..80748d6131b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-simple.js
@@ -0,0 +1,25 @@
+/**
+ * Test that we're not hoisting property reads from lambdas that are created to
+ * pass to opaque functions, which often have maybe-invoke semantics.
+ *
+ * In this example, we shouldn't hoist `arr[0].value` out of the lambda.
+ * ```js
+ * e => arr[0].value + e.value  <-- created to pass to map
+ * arr.map(<cb>)                <-- argument only invoked if array is non-empty
+ * ```
+ */
+function useFoo({arr1, arr2}) {
+  const x = arr1.map(e => arr1[0].value + e.value);
+  const y = arr1.map(e => arr2[0].value + e.value);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.expect.md
new file mode 100644
index 00000000000..4622beeb0eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.expect.md
@@ -0,0 +1,104 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const logA = () => {
+    console.log(a.value);
+  };
+  const logB = () => {
+    console.log(b.value);
+  };
+  const hasLogged = useRef(false);
+  const log = () => {
+    if (!hasLogged.current) {
+      logA();
+      logB();
+      hasLogged.current = true;
+    }
+  };
+  return <Stringify log={log} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {value: 1}, b: {value: 2}}],
+  sequentialRenders: [
+    {a: {value: 1}, b: {value: 2}},
+    {a: {value: 3}, b: {value: 4}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a.value) {
+    t1 = () => {
+      console.log(a.value);
+    };
+    $[0] = a.value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const logA = t1;
+  let t2;
+  if ($[2] !== b.value) {
+    t2 = () => {
+      console.log(b.value);
+    };
+    $[2] = b.value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const logB = t2;
+
+  const hasLogged = useRef(false);
+  let t3;
+  if ($[4] !== logA || $[5] !== logB) {
+    const log = () => {
+      if (!hasLogged.current) {
+        logA();
+        logB();
+        hasLogged.current = true;
+      }
+    };
+    t3 = <Stringify log={log} shouldInvokeFns={true} />;
+    $[4] = logA;
+    $[5] = logB;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { value: 1 }, b: { value: 2 } }],
+  sequentialRenders: [
+    { a: { value: 1 }, b: { value: 2 } },
+    { a: { value: 3 }, b: { value: 4 } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"log":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"log":{"kind":"Function"},"shouldInvokeFns":true}</div>
+logs: [1,2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.tsx
new file mode 100644
index 00000000000..746287fe606
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.tsx
@@ -0,0 +1,29 @@
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const logA = () => {
+    console.log(a.value);
+  };
+  const logB = () => {
+    console.log(b.value);
+  };
+  const hasLogged = useRef(false);
+  const log = () => {
+    if (!hasLogged.current) {
+      logA();
+      logB();
+      hasLogged.current = true;
+    }
+  };
+  return <Stringify log={log} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {value: 1}, b: {value: 2}}],
+  sequentialRenders: [
+    {a: {value: 1}, b: {value: 2}},
+    {a: {value: 3}, b: {value: 4}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call.expect.md
new file mode 100644
index 00000000000..0080fd04689
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * Assume that conditionally called functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback({obj}: {obj: {value: number}}) {
+  const [state, setState] = useState(0);
+  const cb = () => {
+    if (obj.value !== 0) setState(obj.value);
+  };
+  useIdentity(null);
+  if (state === 0) {
+    cb();
+  }
+  return {cb};
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { useIdentity } from "shared-runtime";
+
+/**
+ * Assume that conditionally called functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback(t0) {
+  const $ = _c(4);
+  const { obj } = t0;
+  const [state, setState] = useState(0);
+  let t1;
+  if ($[0] !== obj.value) {
+    t1 = () => {
+      if (obj.value !== 0) {
+        setState(obj.value);
+      }
+    };
+    $[0] = obj.value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb = t1;
+
+  useIdentity(null);
+  if (state === 0) {
+    cb();
+  }
+  let t2;
+  if ($[2] !== cb) {
+    t2 = { cb };
+    $[2] = cb;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{ obj: { value: 1 } }],
+  sequentialRenders: [{ obj: { value: 1 } }, { obj: { value: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"cb":"[[ function params=0 ]]"}
+{"cb":"[[ function params=0 ]]"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call.ts
new file mode 100644
index 00000000000..12d92b726f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call.ts
@@ -0,0 +1,23 @@
+import {useState} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * Assume that conditionally called functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback({obj}: {obj: {value: number}}) {
+  const [state, setState] = useState(0);
+  const cb = () => {
+    if (obj.value !== 0) setState(obj.value);
+  };
+  useIdentity(null);
+  if (state === 0) {
+    cb();
+  }
+  return {cb};
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditionally-return-fn.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditionally-return-fn.expect.md
new file mode 100644
index 00000000000..77b62bc8c24
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditionally-return-fn.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+
+/**
+ * Assume that conditionally returned functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback({
+  obj,
+  shouldMakeCb,
+  setState,
+}: {
+  obj: {value: number};
+  shouldMakeCb: boolean;
+  setState: (newState: number) => void;
+}) {
+  const cb = () => setState(obj.value);
+  if (shouldMakeCb) return cb;
+  else return null;
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, shouldMakeCb: true, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, shouldMakeCb: true, setState},
+    {obj: {value: 2}, shouldMakeCb: true, setState},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+
+/**
+ * Assume that conditionally returned functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback(t0) {
+  const $ = _c(3);
+  const { obj, shouldMakeCb, setState } = t0;
+  let t1;
+  if ($[0] !== obj.value || $[1] !== setState) {
+    t1 = () => setState(obj.value);
+    $[0] = obj.value;
+    $[1] = setState;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const cb = t1;
+  if (shouldMakeCb) {
+    return cb;
+  } else {
+    return null;
+  }
+}
+
+const setState = (arg: number) => {
+  "use no memo";
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{ obj: { value: 1 }, shouldMakeCb: true, setState }],
+  sequentialRenders: [
+    { obj: { value: 1 }, shouldMakeCb: true, setState },
+    { obj: { value: 2 }, shouldMakeCb: true, setState },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"result":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditionally-return-fn.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditionally-return-fn.ts
new file mode 100644
index 00000000000..08dde03b037
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditionally-return-fn.ts
@@ -0,0 +1,32 @@
+import {createHookWrapper} from 'shared-runtime';
+
+/**
+ * Assume that conditionally returned functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback({
+  obj,
+  shouldMakeCb,
+  setState,
+}: {
+  obj: {value: number};
+  shouldMakeCb: boolean;
+  setState: (newState: number) => void;
+}) {
+  const cb = () => setState(obj.value);
+  if (shouldMakeCb) return cb;
+  else return null;
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, shouldMakeCb: true, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, shouldMakeCb: true, setState},
+    {obj: {value: 2}, shouldMakeCb: true, setState},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/direct-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/direct-call.expect.md
new file mode 100644
index 00000000000..2f31be1ffe1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/direct-call.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function useMakeCallback({obj}: {obj: {value: number}}) {
+  const [state, setState] = useState(0);
+  const cb = () => {
+    if (obj.value !== state) setState(obj.value);
+  };
+  useIdentity();
+  cb();
+  return [cb];
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { useIdentity } from "shared-runtime";
+
+function useMakeCallback(t0) {
+  const $ = _c(5);
+  const { obj } = t0;
+  const [state, setState] = useState(0);
+  let t1;
+  if ($[0] !== obj.value || $[1] !== state) {
+    t1 = () => {
+      if (obj.value !== state) {
+        setState(obj.value);
+      }
+    };
+    $[0] = obj.value;
+    $[1] = state;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const cb = t1;
+
+  useIdentity();
+  cb();
+  let t2;
+  if ($[3] !== cb) {
+    t2 = [cb];
+    $[3] = cb;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{ obj: { value: 1 } }],
+  sequentialRenders: [{ obj: { value: 1 } }, { obj: { value: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["[[ function params=0 ]]"]
+["[[ function params=0 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/direct-call.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/direct-call.ts
new file mode 100644
index 00000000000..c2e82922978
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/direct-call.ts
@@ -0,0 +1,17 @@
+import {useState} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function useMakeCallback({obj}: {obj: {value: number}}) {
+  const [state, setState] = useState(0);
+  const cb = () => {
+    if (obj.value !== state) setState(obj.value);
+  };
+  useIdentity();
+  cb();
+  return [cb];
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/function-with-conditional-callsite-in-another-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/function-with-conditional-callsite-in-another-function.expect.md
new file mode 100644
index 00000000000..8301912b024
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/function-with-conditional-callsite-in-another-function.expect.md
@@ -0,0 +1,130 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+
+/**
+ * (Given that the returned lambda is assumed to be invoked, see
+ * return-function)
+ *
+ * If lambda A conditionally calls lambda B, optimistically assume that property
+ * loads from lambda B has the same hoistability of ones from lambda A. This
+ * helps optimize components / hooks that create and chain many helper
+ * functions.
+ *
+ * Type systems and code readability encourage developers to colocate length and
+ * null checks values in the same function as where values are used. i.e.
+ * developers are unlikely to write the following code.
+ * ```js
+ * function useFoo(obj, objNotNullAndHasElements) {
+ *   // ...
+ *   const get0th = () => obj.arr[0].value;
+ *   return () => objNotNullAndHasElements ? get0th : undefined;
+ * }
+ * ```
+ *
+ * In Meta code, this assumption helps reduce the number of memo dependency
+ * deopts.
+ */
+function useMakeCallback({
+  obj,
+  cond,
+  setState,
+}: {
+  obj: {value: number};
+  cond: boolean;
+  setState: (newState: number) => void;
+}) {
+  const cb = () => setState(obj.value);
+  // cb's property loads are assumed to be hoistable to the start of this lambda
+  return () => (cond ? cb() : undefined);
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, cond: true, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, cond: true, setState},
+    {obj: {value: 2}, cond: true, setState},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+
+/**
+ * (Given that the returned lambda is assumed to be invoked, see
+ * return-function)
+ *
+ * If lambda A conditionally calls lambda B, optimistically assume that property
+ * loads from lambda B has the same hoistability of ones from lambda A. This
+ * helps optimize components / hooks that create and chain many helper
+ * functions.
+ *
+ * Type systems and code readability encourage developers to colocate length and
+ * null checks values in the same function as where values are used. i.e.
+ * developers are unlikely to write the following code.
+ * ```js
+ * function useFoo(obj, objNotNullAndHasElements) {
+ *   // ...
+ *   const get0th = () => obj.arr[0].value;
+ *   return () => objNotNullAndHasElements ? get0th : undefined;
+ * }
+ * ```
+ *
+ * In Meta code, this assumption helps reduce the number of memo dependency
+ * deopts.
+ */
+function useMakeCallback(t0) {
+  const $ = _c(6);
+  const { obj, cond, setState } = t0;
+  let t1;
+  if ($[0] !== obj.value || $[1] !== setState) {
+    t1 = () => setState(obj.value);
+    $[0] = obj.value;
+    $[1] = setState;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const cb = t1;
+  let t2;
+  if ($[3] !== cb || $[4] !== cond) {
+    t2 = () => (cond ? cb() : undefined);
+    $[3] = cb;
+    $[4] = cond;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+const setState = (arg: number) => {
+  "use no memo";
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{ obj: { value: 1 }, cond: true, setState }],
+  sequentialRenders: [
+    { obj: { value: 1 }, cond: true, setState },
+    { obj: { value: 2 }, cond: true, setState },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"result":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/function-with-conditional-callsite-in-another-function.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/function-with-conditional-callsite-in-another-function.ts
new file mode 100644
index 00000000000..b6283aa6a6b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/function-with-conditional-callsite-in-another-function.ts
@@ -0,0 +1,51 @@
+import {createHookWrapper} from 'shared-runtime';
+
+/**
+ * (Given that the returned lambda is assumed to be invoked, see
+ * return-function)
+ *
+ * If lambda A conditionally calls lambda B, optimistically assume that property
+ * loads from lambda B has the same hoistability of ones from lambda A. This
+ * helps optimize components / hooks that create and chain many helper
+ * functions.
+ *
+ * Type systems and code readability encourage developers to colocate length and
+ * null checks values in the same function as where values are used. i.e.
+ * developers are unlikely to write the following code.
+ * ```js
+ * function useFoo(obj, objNotNullAndHasElements) {
+ *   // ...
+ *   const get0th = () => obj.arr[0].value;
+ *   return () => objNotNullAndHasElements ? get0th : undefined;
+ * }
+ * ```
+ *
+ * In Meta code, this assumption helps reduce the number of memo dependency
+ * deopts.
+ */
+function useMakeCallback({
+  obj,
+  cond,
+  setState,
+}: {
+  obj: {value: number};
+  cond: boolean;
+  setState: (newState: number) => void;
+}) {
+  const cb = () => setState(obj.value);
+  // cb's property loads are assumed to be hoistable to the start of this lambda
+  return () => (cond ? cb() : undefined);
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, cond: true, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, cond: true, setState},
+    {obj: {value: 2}, cond: true, setState},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/hook-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/hook-call.expect.md
new file mode 100644
index 00000000000..ab8326a2286
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/hook-call.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, useIdentity} from 'shared-runtime';
+
+/**
+ * Assume that functions passed hook arguments are invoked and that their
+ * property loads are hoistable.
+ */
+function useMakeCallback({
+  obj,
+  setState,
+}: {
+  obj: {value: number};
+  setState: (newState: number) => void;
+}) {
+  const cb = useIdentity(() => setState(obj.value));
+  return cb;
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, setState},
+    {obj: {value: 2}, setState},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper, useIdentity } from "shared-runtime";
+
+/**
+ * Assume that functions passed hook arguments are invoked and that their
+ * property loads are hoistable.
+ */
+function useMakeCallback(t0) {
+  const $ = _c(3);
+  const { obj, setState } = t0;
+  let t1;
+  if ($[0] !== obj.value || $[1] !== setState) {
+    t1 = () => setState(obj.value);
+    $[0] = obj.value;
+    $[1] = setState;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const cb = useIdentity(t1);
+  return cb;
+}
+
+const setState = (arg: number) => {
+  "use no memo";
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{ obj: { value: 1 }, setState }],
+  sequentialRenders: [
+    { obj: { value: 1 }, setState },
+    { obj: { value: 2 }, setState },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"result":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/hook-call.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/hook-call.ts
new file mode 100644
index 00000000000..a1ab6e18c5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/hook-call.ts
@@ -0,0 +1,29 @@
+import {createHookWrapper, useIdentity} from 'shared-runtime';
+
+/**
+ * Assume that functions passed hook arguments are invoked and that their
+ * property loads are hoistable.
+ */
+function useMakeCallback({
+  obj,
+  setState,
+}: {
+  obj: {value: number};
+  setState: (newState: number) => void;
+}) {
+  const cb = useIdentity(() => setState(obj.value));
+  return cb;
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, setState},
+    {obj: {value: 2}, setState},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-and-passed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-and-passed.expect.md
new file mode 100644
index 00000000000..688901a4e21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-and-passed.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+
+function useFoo({arr1}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const x = arr1.map(cb1);
+  return [x, cb1];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useFoo),
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(8);
+  const { arr1 } = t0;
+  let t1;
+  if ($[0] !== arr1[0]) {
+    t1 = (e) => arr1[0].value + e.value;
+    $[0] = arr1[0];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb1 = t1;
+  let t2;
+  if ($[2] !== arr1 || $[3] !== cb1) {
+    t2 = arr1.map(cb1);
+    $[2] = arr1;
+    $[3] = cb1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const x = t2;
+  let t3;
+  if ($[5] !== cb1 || $[6] !== x) {
+    t3 = [x, cb1];
+    $[5] = cb1;
+    $[6] = x;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useFoo),
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":[[],"[[ function params=1 ]]"],"shouldInvokeFns":true}</div>
+<div>{"result":[[],"[[ function params=1 ]]"],"shouldInvokeFns":true}</div>
+<div>{"result":[[2,3],"[[ function params=1 ]]"],"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-and-passed.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-and-passed.ts
new file mode 100644
index 00000000000..c08701022a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-and-passed.ts
@@ -0,0 +1,17 @@
+import {createHookWrapper} from 'shared-runtime';
+
+function useFoo({arr1}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const x = arr1.map(cb1);
+  return [x, cb1];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useFoo),
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-function.expect.md
new file mode 100644
index 00000000000..76228fc2491
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-function.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @flow
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Assume that functions captured directly as jsx attributes are invoked and
+ * that their property loads are hoistable.
+ */
+function useMakeCallback({
+  obj,
+  setState,
+}: {
+  obj: {value: number};
+  setState: (newState: number) => void;
+}) {
+  return <Stringify cb={() => setState(obj.value)} shouldInvokeFns={true} />;
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, setState},
+    {obj: {value: 2}, setState},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function useMakeCallback(t0) {
+  const $ = _c(3);
+  const { obj, setState } = t0;
+  let t1;
+  if ($[0] !== obj.value || $[1] !== setState) {
+    t1 = <Stringify cb={() => setState(obj.value)} shouldInvokeFns={true} />;
+    $[0] = obj.value;
+    $[1] = setState;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+const setState = (arg: number) => {
+  "use no memo";
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{ obj: { value: 1 }, setState }],
+  sequentialRenders: [
+    { obj: { value: 1 }, setState },
+    { obj: { value: 2 }, setState },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-function.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-function.tsx
new file mode 100644
index 00000000000..316a0a03fb6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/jsx-function.tsx
@@ -0,0 +1,29 @@
+// @flow
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Assume that functions captured directly as jsx attributes are invoked and
+ * that their property loads are hoistable.
+ */
+function useMakeCallback({
+  obj,
+  setState,
+}: {
+  obj: {value: number};
+  setState: (newState: number) => void;
+}) {
+  return <Stringify cb={() => setState(obj.value)} shouldInvokeFns={true} />;
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, setState},
+    {obj: {value: 2}, setState},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/return-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/return-function.expect.md
new file mode 100644
index 00000000000..31e317d07e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/return-function.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+
+/**
+ * Assume that directly returned functions are invoked and that their property
+ * loads are hoistable.
+ */
+function useMakeCallback({
+  obj,
+  setState,
+}: {
+  obj: {value: number};
+  setState: (newState: number) => void;
+}) {
+  return () => setState(obj.value);
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, setState},
+    {obj: {value: 2}, setState},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+
+/**
+ * Assume that directly returned functions are invoked and that their property
+ * loads are hoistable.
+ */
+function useMakeCallback(t0) {
+  const $ = _c(3);
+  const { obj, setState } = t0;
+  let t1;
+  if ($[0] !== obj.value || $[1] !== setState) {
+    t1 = () => setState(obj.value);
+    $[0] = obj.value;
+    $[1] = setState;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+const setState = (arg: number) => {
+  "use no memo";
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{ obj: { value: 1 }, setState }],
+  sequentialRenders: [
+    { obj: { value: 1 }, setState },
+    { obj: { value: 2 }, setState },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"result":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/return-function.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/return-function.ts
new file mode 100644
index 00000000000..f0e0ac77f01
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/return-function.ts
@@ -0,0 +1,28 @@
+import {createHookWrapper} from 'shared-runtime';
+
+/**
+ * Assume that directly returned functions are invoked and that their property
+ * loads are hoistable.
+ */
+function useMakeCallback({
+  obj,
+  setState,
+}: {
+  obj: {value: number};
+  setState: (newState: number) => void;
+}) {
+  return () => setState(obj.value);
+}
+
+const setState = (arg: number) => {
+  'use no memo';
+  return arg;
+};
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useMakeCallback),
+  params: [{obj: {value: 1}, setState}],
+  sequentialRenders: [
+    {obj: {value: 1}, setState},
+    {obj: {value: 2}, setState},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/use-memo-returned.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/use-memo-returned.expect.md
new file mode 100644
index 00000000000..677e9acaeae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/use-memo-returned.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+import {useState, useMemo} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * Assume that conditionally called functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback({
+  obj,
+  shouldSynchronizeState,
+}: {
+  obj: {value: number};
+  shouldSynchronizeState: boolean;
+}) {
+  const [state, setState] = useState(0);
+  const cb = useMemo(() => {
+    return () => {
+      if (obj.value !== 0) setState(obj.value);
+    };
+  }, [obj.value, shouldSynchronizeState]);
+  useIdentity(null);
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+import { useState, useMemo } from "react";
+import { useIdentity } from "shared-runtime";
+
+/**
+ * Assume that conditionally called functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback(t0) {
+  const $ = _c(2);
+  const { obj, shouldSynchronizeState } = t0;
+  const [, setState] = useState(0);
+  let t1;
+  if ($[0] !== obj.value) {
+    t1 = () => {
+      if (obj.value !== 0) {
+        setState(obj.value);
+      }
+    };
+    $[0] = obj.value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb = t1;
+
+  useIdentity(null);
+  return cb;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{ obj: { value: 1 } }],
+  sequentialRenders: [{ obj: { value: 1 } }, { obj: { value: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
+"[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/use-memo-returned.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/use-memo-returned.ts
new file mode 100644
index 00000000000..6d0546289c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/use-memo-returned.ts
@@ -0,0 +1,29 @@
+// @validateExhaustiveMemoizationDependencies:false
+import {useState, useMemo} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+/**
+ * Assume that conditionally called functions can be invoked and that their
+ * property loads are hoistable to the function declaration site.
+ */
+function useMakeCallback({
+  obj,
+  shouldSynchronizeState,
+}: {
+  obj: {value: number};
+  shouldSynchronizeState: boolean;
+}) {
+  const [state, setState] = useState(0);
+  const cb = useMemo(() => {
+    return () => {
+      if (obj.value !== 0) setState(obj.value);
+    };
+  }, [obj.value, shouldSynchronizeState]);
+  useIdentity(null);
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/bug-invalid-array-map-manual.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/bug-invalid-array-map-manual.expect.md
new file mode 100644
index 00000000000..d00e71e14f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/bug-invalid-array-map-manual.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+function useFoo({arr1, arr2}) {
+  const cb = e => arr2[0].value + e.value;
+  const y = [];
+  for (let i = 0; i < arr1.length; i++) {
+    y.push(cb(arr1[i]));
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(5);
+  const { arr1, arr2 } = t0;
+  let t1;
+  if ($[0] !== arr2[0].value) {
+    t1 = (e) => arr2[0].value + e.value;
+    $[0] = arr2[0].value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb = t1;
+  let y;
+  if ($[2] !== arr1 || $[3] !== cb) {
+    y = [];
+    for (let i = 0; i < arr1.length; i++) {
+      y.push(cb(arr1[i]));
+    }
+    $[2] = arr1;
+    $[3] = cb;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/bug-invalid-array-map-manual.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/bug-invalid-array-map-manual.js
new file mode 100644
index 00000000000..eed75613061
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/bug-invalid-array-map-manual.js
@@ -0,0 +1,18 @@
+function useFoo({arr1, arr2}) {
+  const cb = e => arr2[0].value + e.value;
+  const y = [];
+  for (let i = 0; i < arr1.length; i++) {
+    y.push(cb(arr1[i]));
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/return-object-of-functions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/return-object-of-functions.expect.md
new file mode 100644
index 00000000000..5ccf5b5edc9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/return-object-of-functions.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+/**
+ * Assume that only directly returned functions or JSX attributes are invoked.
+ * Conservatively estimate that functions wrapped in objects or other containers
+ * might never be called (and therefore their property loads are not hoistable).
+ */
+function useMakeCallback({arr}) {
+  return {
+    getElement0: () => arr[0].value,
+    getElement1: () => arr[1].value,
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{arr: [1, 2]}],
+  sequentialRenders: [{arr: [1, 2]}, {arr: []}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Assume that only directly returned functions or JSX attributes are invoked.
+ * Conservatively estimate that functions wrapped in objects or other containers
+ * might never be called (and therefore their property loads are not hoistable).
+ */
+function useMakeCallback(t0) {
+  const $ = _c(2);
+  const { arr } = t0;
+  let t1;
+  if ($[0] !== arr) {
+    t1 = { getElement0: () => arr[0].value, getElement1: () => arr[1].value };
+    $[0] = arr;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{ arr: [1, 2] }],
+  sequentialRenders: [{ arr: [1, 2] }, { arr: [] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"getElement0":"[[ function params=0 ]]","getElement1":"[[ function params=0 ]]"}
+{"getElement0":"[[ function params=0 ]]","getElement1":"[[ function params=0 ]]"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/return-object-of-functions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/return-object-of-functions.js
new file mode 100644
index 00000000000..6aface49f80
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/return-object-of-functions.js
@@ -0,0 +1,17 @@
+/**
+ * Assume that only directly returned functions or JSX attributes are invoked.
+ * Conservatively estimate that functions wrapped in objects or other containers
+ * might never be called (and therefore their property loads are not hoistable).
+ */
+function useMakeCallback({arr}) {
+  return {
+    getElement0: () => arr[0].value,
+    getElement1: () => arr[1].value,
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{arr: [1, 2]}],
+  sequentialRenders: [{arr: [1, 2]}, {arr: []}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-dynamic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-dynamic.expect.md
new file mode 100644
index 00000000000..211007ef561
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-dynamic.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const item = useFragment(FRAGMENT, props.item);
+  useFreeze(item);
+
+  const count = new MaybeMutable(item);
+  return (
+    <View>
+      <View>
+        {<span>Text</span>}
+        {<span>{maybeMutate(count)}</span>}
+      </View>
+    </View>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(15);
+  const item = useFragment(FRAGMENT, props.item);
+  useFreeze(item);
+  let T0;
+  let T1;
+  let t0;
+  let t1;
+  if ($[0] !== item) {
+    const count = new MaybeMutable(item);
+    T1 = View;
+    T0 = View;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = <span>Text</span>;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    t0 = maybeMutate(count);
+    $[0] = item;
+    $[1] = T0;
+    $[2] = T1;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    T0 = $[1];
+    T1 = $[2];
+    t0 = $[3];
+    t1 = $[4];
+  }
+  let t2;
+  if ($[6] !== t0) {
+    t2 = <span>{t0}</span>;
+    $[6] = t0;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== T0 || $[9] !== t1 || $[10] !== t2) {
+    t3 = (
+      <T0>
+        {t1}
+        {t2}
+      </T0>
+    );
+    $[8] = T0;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== T1 || $[13] !== t3) {
+    t4 = <T1>{t3}</T1>;
+    $[12] = T1;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-dynamic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-dynamic.js
new file mode 100644
index 00000000000..dc36d75464e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-dynamic.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const item = useFragment(FRAGMENT, props.item);
+  useFreeze(item);
+
+  const count = new MaybeMutable(item);
+  return (
+    <View>
+      <View>
+        {<span>Text</span>}
+        {<span>{maybeMutate(count)}</span>}
+      </View>
+    </View>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-static.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-static.expect.md
new file mode 100644
index 00000000000..812aa0ba770
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-static.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const count = new MaybeMutable();
+  return (
+    <View>
+      <View>
+        {<span>Text</span>}
+        {<span>{maybeMutate(count)}</span>}
+      </View>
+    </View>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const count = new MaybeMutable();
+    t0 = (
+      <View>
+        <View>
+          <span>Text</span>
+          <span>{maybeMutate(count)}</span>
+        </View>
+      </View>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-static.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-static.js
new file mode 100644
index 00000000000..5c92f8bcf5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-memo-value-not-promoted-to-outer-scope-static.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const count = new MaybeMutable();
+  return (
+    <View>
+      <View>
+        {<span>Text</span>}
+        {<span>{maybeMutate(count)}</span>}
+      </View>
+    </View>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent-across-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent-across-if.expect.md
new file mode 100644
index 00000000000..2f4998efacc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent-across-if.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+function compute() {}
+function foo() {}
+function Foo() {}
+
+/**
+ * Should produce 1 scope:
+ *
+ * return: inputs=props.a & props.b & props.c; outputs=return
+ *   const a = compute(props.a);
+ *   const b = compute(props.b);
+ *   if (props.c)
+ *     foo(a, b);
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  if (props.c) {
+    foo(a, b);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function compute() {}
+function foo() {}
+function Foo() {}
+
+/**
+ * Should produce 1 scope:
+ *
+ * return: inputs=props.a & props.b & props.c; outputs=return
+ *   const a = compute(props.a);
+ *   const b = compute(props.b);
+ *   if (props.c)
+ *     foo(a, b);
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const $ = _c(8);
+  let a;
+  let b;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.c) {
+    a = compute(props.a);
+    b = compute(props.b);
+    if (props.c) {
+      foo(a, b);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = a;
+    $[4] = b;
+  } else {
+    a = $[3];
+    b = $[4];
+  }
+  let t0;
+  if ($[5] !== a || $[6] !== b) {
+    t0 = <Foo a={a} b={b} />;
+    $[5] = a;
+    $[6] = b;
+    $[7] = t0;
+  } else {
+    t0 = $[7];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent-across-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent-across-if.js
new file mode 100644
index 00000000000..8f05da6973c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent-across-if.js
@@ -0,0 +1,22 @@
+function compute() {}
+function foo() {}
+function Foo() {}
+
+/**
+ * Should produce 1 scope:
+ *
+ * return: inputs=props.a & props.b & props.c; outputs=return
+ *   const a = compute(props.a);
+ *   const b = compute(props.b);
+ *   if (props.c)
+ *     foo(a, b);
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  if (props.c) {
+    foo(a, b);
+  }
+  return <Foo a={a} b={b} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent.expect.md
new file mode 100644
index 00000000000..32e87ab33f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+/**
+ * Should produce 1 scope:
+ *
+ * return: inputs=props.a & props.b; outputs=return
+ *   const a = compute(props.a);
+ *   const b = compute(props.b);
+ *   foo(a, b);
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  foo(a, b);
+  return <Foo a={a} b={b} />;
+}
+
+function compute() {}
+function foo() {}
+function Foo() {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Should produce 1 scope:
+ *
+ * return: inputs=props.a & props.b; outputs=return
+ *   const a = compute(props.a);
+ *   const b = compute(props.b);
+ *   foo(a, b);
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const $ = _c(7);
+  let a;
+  let b;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    a = compute(props.a);
+    b = compute(props.b);
+    foo(a, b);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = a;
+    $[3] = b;
+  } else {
+    a = $[2];
+    b = $[3];
+  }
+  let t0;
+  if ($[4] !== a || $[5] !== b) {
+    t0 = <Foo a={a} b={b} />;
+    $[4] = a;
+    $[5] = b;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  return t0;
+}
+
+function compute() {}
+function foo() {}
+function Foo() {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent.js
new file mode 100644
index 00000000000..aef5a385a35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/interdependent.js
@@ -0,0 +1,19 @@
+/**
+ * Should produce 1 scope:
+ *
+ * return: inputs=props.a & props.b; outputs=return
+ *   const a = compute(props.a);
+ *   const b = compute(props.b);
+ *   foo(a, b);
+ *   return = <Foo a={a} b={b} />
+ */
+function Component(props) {
+  const a = compute(props.a);
+  const b = compute(props.b);
+  foo(a, b);
+  return <Foo a={a} b={b} />;
+}
+
+function compute() {}
+function foo() {}
+function Foo() {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
new file mode 100644
index 00000000000..6ac06c1df23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":241},"end":{"line":11,"column":32,"index":262},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":110},"end":{"line":17,"column":1,"index":317},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js
new file mode 100644
index 00000000000..a036272cdb0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js
@@ -0,0 +1,17 @@
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md
new file mode 100644
index 00000000000..1e08cb24a66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":123},"end":{"line":5,"column":16,"index":130},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":68},"end":{"line":10,"column":1,"index":179},"filename":"invalid-jsx-in-try-with-catch.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js
new file mode 100644
index 00000000000..45d932ec7c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js
@@ -0,0 +1,10 @@
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-lowercase-localvar.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-lowercase-localvar.expect.md
new file mode 100644
index 00000000000..925346225c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-lowercase-localvar.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+import {Throw} from 'shared-runtime';
+
+/**
+ * Note: this is disabled in the evaluator due to different devmode errors.
+ * Found differences in evaluator results
+ *  Non-forget (expected):
+ *  (kind: ok) <invalidtag val="[object Object]"></invalidtag>
+ *  logs: ['Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s','invalidTag']
+ *
+ *  Forget:
+ *  (kind: ok) <invalidtag val="[object Object]"></invalidtag>
+ *  logs: [
+ *   'Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s','invalidTag',
+ *   'Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','invalidTag',
+ *  ]
+ */
+function useFoo() {
+  const invalidTag = Throw;
+  /**
+   * Need to be careful to not parse `invalidTag` as a localVar (i.e. render
+   * Throw). Note that the jsx transform turns this into a string tag:
+   * `jsx("invalidTag"...
+   */
+  return <invalidTag val={{val: 2}} />;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Throw } from "shared-runtime";
+
+/**
+ * Note: this is disabled in the evaluator due to different devmode errors.
+ * Found differences in evaluator results
+ *  Non-forget (expected):
+ *  (kind: ok) <invalidtag val="[object Object]"></invalidtag>
+ *  logs: ['Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s','invalidTag']
+ *
+ *  Forget:
+ *  (kind: ok) <invalidtag val="[object Object]"></invalidtag>
+ *  logs: [
+ *   'Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s','invalidTag',
+ *   'Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','invalidTag',
+ *  ]
+ */
+function useFoo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <invalidTag val={{ val: 2 }} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-lowercase-localvar.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-lowercase-localvar.jsx
new file mode 100644
index 00000000000..1e62eb01176
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-lowercase-localvar.jsx
@@ -0,0 +1,29 @@
+import {Throw} from 'shared-runtime';
+
+/**
+ * Note: this is disabled in the evaluator due to different devmode errors.
+ * Found differences in evaluator results
+ *  Non-forget (expected):
+ *  (kind: ok) <invalidtag val="[object Object]"></invalidtag>
+ *  logs: ['Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s','invalidTag']
+ *
+ *  Forget:
+ *  (kind: ok) <invalidtag val="[object Object]"></invalidtag>
+ *  logs: [
+ *   'Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s','invalidTag',
+ *   'Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','invalidTag',
+ *  ]
+ */
+function useFoo() {
+  const invalidTag = Throw;
+  /**
+   * Need to be careful to not parse `invalidTag` as a localVar (i.e. render
+   * Throw). Note that the jsx transform turns this into a string tag:
+   * `jsx("invalidTag"...
+   */
+  return <invalidTag val={{val: 2}} />;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-derived-event.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-derived-event.expect.md
new file mode 100644
index 00000000000..be0a4dc4319
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-derived-event.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import {useState, useEffect} from 'react';
+
+function VideoPlayer({isPlaying}) {
+  const [wasPlaying, setWasPlaying] = useState(isPlaying);
+  useEffect(() => {
+    if (isPlaying !== wasPlaying) {
+      setWasPlaying(isPlaying);
+      console.log('Play state changed!');
+    }
+  }, [isPlaying, wasPlaying]);
+  return <video />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: VideoPlayer,
+  params: [{isPlaying: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import { useState, useEffect } from "react";
+
+function VideoPlayer(t0) {
+  const $ = _c(5);
+  const { isPlaying } = t0;
+  const [wasPlaying, setWasPlaying] = useState(isPlaying);
+  let t1;
+  let t2;
+  if ($[0] !== isPlaying || $[1] !== wasPlaying) {
+    t1 = () => {
+      if (isPlaying !== wasPlaying) {
+        setWasPlaying(isPlaying);
+        console.log("Play state changed!");
+      }
+    };
+    t2 = [isPlaying, wasPlaying];
+    $[0] = isPlaying;
+    $[1] = wasPlaying;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <video />;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: VideoPlayer,
+  params: [{ isPlaying: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <video></video>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-derived-event.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-derived-event.js
new file mode 100644
index 00000000000..4928dbe6078
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-derived-event.js
@@ -0,0 +1,18 @@
+// @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import {useState, useEffect} from 'react';
+
+function VideoPlayer({isPlaying}) {
+  const [wasPlaying, setWasPlaying] = useState(isPlaying);
+  useEffect(() => {
+    if (isPlaying !== wasPlaying) {
+      setWasPlaying(isPlaying);
+      console.log('Play state changed!');
+    }
+  }, [isPlaying, wasPlaying]);
+  return <video />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: VideoPlayer,
+  params: [{isPlaying: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-force-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-force-update.expect.md
new file mode 100644
index 00000000000..131eb99127b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-force-update.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import {useState, useEffect} from 'react';
+
+const externalStore = {
+  value: 0,
+  subscribe(callback) {
+    return () => {};
+  },
+  getValue() {
+    return this.value;
+  },
+};
+
+function ExternalDataComponent() {
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    const unsubscribe = externalStore.subscribe(() => {
+      forceUpdate({});
+    });
+    return unsubscribe;
+  }, []);
+  return <div>{externalStore.getValue()}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ExternalDataComponent,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import { useState, useEffect } from "react";
+
+const externalStore = {
+  value: 0,
+  subscribe(callback) {
+    return () => {};
+  },
+  getValue() {
+    return this.value;
+  },
+};
+
+function ExternalDataComponent() {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [, forceUpdate] = useState(t0);
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      const unsubscribe = externalStore.subscribe(() => {
+        forceUpdate({});
+      });
+      return unsubscribe;
+    };
+    t2 = [];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <div>{externalStore.getValue()}</div>;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ExternalDataComponent,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-force-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-force-update.js
new file mode 100644
index 00000000000..e7653d1a1ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-force-update.js
@@ -0,0 +1,28 @@
+// @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import {useState, useEffect} from 'react';
+
+const externalStore = {
+  value: 0,
+  subscribe(callback) {
+    return () => {};
+  },
+  getValue() {
+    return this.value;
+  },
+};
+
+function ExternalDataComponent() {
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    const unsubscribe = externalStore.subscribe(() => {
+      forceUpdate({});
+    });
+    return unsubscribe;
+  }, []);
+  return <div>{externalStore.getValue()}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ExternalDataComponent,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-non-local-derived.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-non-local-derived.expect.md
new file mode 100644
index 00000000000..35cdeb212d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-non-local-derived.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import {useState, useEffect} from 'react';
+
+function Child({firstName, lastName}) {
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Child,
+  params: [{firstName: 'John', lastName: 'Doe'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import { useState, useEffect } from "react";
+
+function Child(t0) {
+  const $ = _c(6);
+  const { firstName, lastName } = t0;
+  const [fullName, setFullName] = useState("");
+  let t1;
+  let t2;
+  if ($[0] !== firstName || $[1] !== lastName) {
+    t1 = () => {
+      setFullName(firstName + " " + lastName);
+    };
+    t2 = [firstName, lastName];
+    $[0] = firstName;
+    $[1] = lastName;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] !== fullName) {
+    t3 = <div>{fullName}</div>;
+    $[4] = fullName;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Child,
+  params: [{ firstName: "John", lastName: "Doe" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>John Doe</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-non-local-derived.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-non-local-derived.js
new file mode 100644
index 00000000000..eba6b5cdc0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-set-state-in-effect-verbose-non-local-derived.js
@@ -0,0 +1,15 @@
+// @validateNoSetStateInEffects @enableVerboseNoSetStateInEffect
+import {useState, useEffect} from 'react';
+
+function Child({firstName, lastName}) {
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Child,
+  params: [{firstName: 'John', lastName: 'Doe'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md
new file mode 100644
index 00000000000..5cd44a9c851
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState(s => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState((s) => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":284},"end":{"line":13,"column":5,"index":285},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":16,"column":1,"index":312},"filename":"invalid-setState-in-useEffect-transitive.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.js
new file mode 100644
index 00000000000..ef69e4be433
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.js
@@ -0,0 +1,16 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState(s => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md
new file mode 100644
index 00000000000..144cb7a5228
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useEffectEvent, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(true);
+  });
+  useEffect(() => {
+    effectEvent();
+  }, []);
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useEffectEvent, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(true);
+  });
+  useEffect(() => {
+    effectEvent();
+  }, []);
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":286},"end":{"line":10,"column":15,"index":297},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts","identifierName":"effectEvent"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":127},"end":{"line":13,"column":1,"index":328},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js
new file mode 100644
index 00000000000..823ace42c34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js
@@ -0,0 +1,13 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useEffectEvent, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(true);
+  });
+  useEffect(() => {
+    effectEvent();
+  }, []);
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md
new file mode 100644
index 00000000000..5022b551718
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState(s => s + 1);
+  });
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState((s) => s + 1);
+  });
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":199},"end":{"line":7,"column":12,"index":207},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":10,"column":1,"index":244},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js
new file mode 100644
index 00000000000..d2422caea02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js
@@ -0,0 +1,10 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState(s => s + 1);
+  });
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md
new file mode 100644
index 00000000000..a2aba4c7b91
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo @loggerTestOnly
+function Component() {
+  useMemo(() => {
+    return [];
+  }, []);
+  return <div />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo @loggerTestOnly
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() result is unused","description":"This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":2,"index":67},"end":{"line":3,"column":9,"index":74},"filename":"invalid-unused-usememo.ts","identifierName":"useMemo"},"message":"useMemo() result is unused"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":42},"end":{"line":7,"column":1,"index":127},"filename":"invalid-unused-usememo.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js
new file mode 100644
index 00000000000..e254424949b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js
@@ -0,0 +1,7 @@
+// @validateNoVoidUseMemo @loggerTestOnly
+function Component() {
+  useMemo(() => {
+    return [];
+  }, []);
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md
new file mode 100644
index 00000000000..24e62dad2be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo @loggerTestOnly
+function Component() {
+  const value = useMemo(() => {
+    console.log('computing');
+  }, []);
+  const value2 = React.useMemo(() => {
+    console.log('computing');
+  }, []);
+  return (
+    <div>
+      {value}
+      {value2}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo @loggerTestOnly
+function Component() {
+  const $ = _c(1);
+
+  console.log("computing");
+
+  console.log("computing");
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <div>
+        {undefined}
+        {undefined}
+      </div>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":24,"index":89},"end":{"line":5,"column":3,"index":130},"filename":"invalid-useMemo-no-return-value.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":6,"column":31,"index":168},"end":{"line":8,"column":3,"index":209},"filename":"invalid-useMemo-no-return-value.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":42},"end":{"line":15,"column":1,"index":283},"filename":"invalid-useMemo-no-return-value.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js
new file mode 100644
index 00000000000..781560fefa9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js
@@ -0,0 +1,15 @@
+// @validateNoVoidUseMemo @loggerTestOnly
+function Component() {
+  const value = useMemo(() => {
+    console.log('computing');
+  }, []);
+  const value2 = React.useMemo(() => {
+    console.log('computing');
+  }, []);
+  return (
+    <div>
+      {value}
+      {value2}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md
new file mode 100644
index 00000000000..44e70351691
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateExhaustiveMemoizationDependencies:false
+function component(a) {
+  let x = useMemo(() => {
+    mutate(a);
+  }, []);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateExhaustiveMemoizationDependencies:false
+function component(a) {
+  mutate(a);
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":18,"index":110},"end":{"line":5,"column":3,"index":136},"filename":"invalid-useMemo-return-empty.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":68},"end":{"line":7,"column":1,"index":156},"filename":"invalid-useMemo-return-empty.ts"},"fnName":"component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":1,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js
new file mode 100644
index 00000000000..8095a7af8f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js
@@ -0,0 +1,7 @@
+// @loggerTestOnly @validateExhaustiveMemoizationDependencies:false
+function component(a) {
+  let x = useMemo(() => {
+    mutate(a);
+  }, []);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if-else.expect.md
new file mode 100644
index 00000000000..225d0f3934b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if-else.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = null;
+  label: {
+    if (a) {
+      x = b;
+      break label;
+    }
+    x = c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  let x;
+  bb0: {
+    if (a) {
+      x = b;
+      break bb0;
+    }
+
+    x = c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if-else.js
new file mode 100644
index 00000000000..ff46a8d1ebc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if-else.js
@@ -0,0 +1,17 @@
+function foo(a, b, c) {
+  let x = null;
+  label: {
+    if (a) {
+      x = b;
+      break label;
+    }
+    x = c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if.expect.md
new file mode 100644
index 00000000000..22eae4efd53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let y = [];
+  label: if (a) {
+    if (b) {
+      y.push(c);
+      break label;
+    }
+    y.push(d);
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c, d) {
+  const $ = _c(5);
+  let y;
+  if ($[0] !== a || $[1] !== b || $[2] !== c || $[3] !== d) {
+    y = [];
+    bb0: if (a) {
+      if (b) {
+        y.push(c);
+        break bb0;
+      }
+
+      y.push(d);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = d;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if.js
new file mode 100644
index 00000000000..6b4ec90a3b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inverted-if.js
@@ -0,0 +1,17 @@
+function foo(a, b, c, d) {
+  let y = [];
+  label: if (a) {
+    if (b) {
+      y.push(c);
+      break label;
+    }
+    y.push(d);
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue852.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue852.expect.md
new file mode 100644
index 00000000000..c644a87c519
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue852.expect.md
@@ -0,0 +1,23 @@
+
+## Input
+
+```javascript
+function Component(c) {
+  let x = {c};
+  mutate(x);
+  let a = x;
+  let b = a;
+}
+
+```
+
+## Code
+
+```javascript
+function Component(c) {
+  const x = { c };
+  mutate(x);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue852.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue852.js
new file mode 100644
index 00000000000..9875fcfdb88
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue852.js
@@ -0,0 +1,6 @@
+function Component(c) {
+  let x = {c};
+  mutate(x);
+  let a = x;
+  let b = a;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue933-disjoint-set-infinite-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue933-disjoint-set-infinite-loop.expect.md
new file mode 100644
index 00000000000..10c7c063b40
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue933-disjoint-set-infinite-loop.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+function makeObj() {
+  'use no forget';
+  const result = [];
+  result.a = {b: 2};
+
+  return result;
+}
+
+// This caused an infinite loop in the compiler
+function MyApp(props) {
+  const y = makeObj();
+  const tmp = y.a;
+  const tmp2 = tmp.b;
+  y.push(tmp2);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function makeObj() {
+  "use no forget";
+  const result = [];
+  result.a = { b: 2 };
+
+  return result;
+}
+
+// This caused an infinite loop in the compiler
+function MyApp(props) {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    y = makeObj();
+    const tmp = y.a;
+    const tmp2 = tmp.b;
+    y.push(tmp2);
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue933-disjoint-set-infinite-loop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue933-disjoint-set-infinite-loop.js
new file mode 100644
index 00000000000..e9f9277c9d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/issue933-disjoint-set-infinite-loop.js
@@ -0,0 +1,22 @@
+function makeObj() {
+  'use no forget';
+  const result = [];
+  result.a = {b: 2};
+
+  return result;
+}
+
+// This caused an infinite loop in the compiler
+function MyApp(props) {
+  const y = makeObj();
+  const tmp = y.a;
+  const tmp2 = tmp.b;
+  y.push(tmp2);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-default-to-true.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-default-to-true.expect.md
new file mode 100644
index 00000000000..9df1962e4da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-default-to-true.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  // https://legacy.reactjs.org/docs/jsx-in-depth.html#props-default-to-true
+  return <Stringify truthyAttribute />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify truthyAttribute={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"truthyAttribute":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-default-to-true.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-default-to-true.tsx
new file mode 100644
index 00000000000..997aae8ff1a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-default-to-true.tsx
@@ -0,0 +1,11 @@
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  // https://legacy.reactjs.org/docs/jsx-in-depth.html#props-default-to-true
+  return <Stringify truthyAttribute />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.expect.md
new file mode 100644
index 00000000000..fecbc2c8485
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.expect.md
@@ -0,0 +1,104 @@
+
+## Input
+
+```javascript
+// @flow
+function Component({items}) {
+  // Per the spec, <Foo value=<>{...}</> /> is valid.
+  // But many tools don't allow fragments as jsx attribute values,
+  // so we ensure not to emit them wrapped in an expression container
+  return items.length > 0 ? (
+    <Foo
+      value={
+        <Bar>
+          {items.map(item => (
+            <Item key={item.id} item={item} />
+          ))}
+        </Bar>
+      }></Foo>
+  ) : null;
+}
+
+function Foo({value}) {
+  return value;
+}
+
+function Bar({children}) {
+  return <div>{children}</div>;
+}
+
+function Item({item}) {
+  return <div>{item.name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'One!'}]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 =
+      items.length > 0 ? <Foo value={<Bar>{items.map(_temp)}</Bar>} /> : null;
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp(item) {
+  return <Item key={item.id} item={item} />;
+}
+
+function Foo(t0) {
+  const { value } = t0;
+  return value;
+}
+
+function Bar(t0) {
+  const $ = _c(2);
+  const { children } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = <div>{children}</div>;
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function Item(t0) {
+  const $ = _c(2);
+  const { item } = t0;
+  let t1;
+  if ($[0] !== item.name) {
+    t1 = <div>{item.name}</div>;
+    $[0] = item.name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "One!" }] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>One!</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.js
new file mode 100644
index 00000000000..f78565ac87d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-element-value.js
@@ -0,0 +1,33 @@
+// @flow
+function Component({items}) {
+  // Per the spec, <Foo value=<>{...}</> /> is valid.
+  // But many tools don't allow fragments as jsx attribute values,
+  // so we ensure not to emit them wrapped in an expression container
+  return items.length > 0 ? (
+    <Foo
+      value={
+        <Bar>
+          {items.map(item => (
+            <Item key={item.id} item={item} />
+          ))}
+        </Bar>
+      }></Foo>
+  ) : null;
+}
+
+function Foo({value}) {
+  return value;
+}
+
+function Bar({children}) {
+  return <div>{children}</div>;
+}
+
+function Item({item}) {
+  return <div>{item.name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'One!'}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-fragment-value.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-fragment-value.flow.expect.md
new file mode 100644
index 00000000000..8bc421a14b2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-fragment-value.flow.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @flow
+import {Stringify} from 'shared-runtime';
+
+function Component({items}) {
+  // Per the spec, <Foo value=<>{...}</> /> is valid.
+  // But many tools don't allow fragments as jsx attribute values,
+  // so we ensure not to emit them wrapped in an expression container
+  return items.length > 0 ? (
+    <Foo
+      value={
+        <>
+          {items.map(item => (
+            <Stringify key={item.id} item={item} />
+          ))}
+        </>
+      }></Foo>
+  ) : null;
+}
+
+function Foo({value}) {
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'One!'}]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = items.length > 0 ? <Foo value={<>{items.map(_temp)}</>} /> : null;
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp(item) {
+  return <Stringify key={item.id} item={item} />;
+}
+
+function Foo(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = <div>{value}</div>;
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "One!" }] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"item":{"id":1,"name":"One!"}}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-fragment-value.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-fragment-value.flow.js
new file mode 100644
index 00000000000..5f2f6822322
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-attribute-with-jsx-fragment-value.flow.js
@@ -0,0 +1,27 @@
+// @flow
+import {Stringify} from 'shared-runtime';
+
+function Component({items}) {
+  // Per the spec, <Foo value=<>{...}</> /> is valid.
+  // But many tools don't allow fragments as jsx attribute values,
+  // so we ensure not to emit them wrapped in an expression container
+  return items.length > 0 ? (
+    <Foo
+      value={
+        <>
+          {items.map(item => (
+            <Stringify key={item.id} item={item} />
+          ))}
+        </>
+      }></Foo>
+  ) : null;
+}
+
+function Foo({value}) {
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'One!'}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.expect.md
new file mode 100644
index 00000000000..21a2f31ccdb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Test() {
+  return (
+    <div>
+      If the string contains the string &#123;pageNumber&#125; it will be
+      replaced by the page number.
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Test() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <div>
+        {
+          "If the string contains the string {pageNumber} it will be replaced by the page number."
+        }
+      </div>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>If the string contains the string {pageNumber} it will be replaced by the page number.</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.jsx
new file mode 100644
index 00000000000..1e93f5e0ad8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.jsx
@@ -0,0 +1,13 @@
+function Test() {
+  return (
+    <div>
+      If the string contains the string &#123;pageNumber&#125; it will be
+      replaced by the page number.
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-empty-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-empty-expression.expect.md
new file mode 100644
index 00000000000..03d661f4317
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-empty-expression.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+export function Component(props) {
+  return (
+    <div>
+      {}
+      {props.a}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 'hello'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = <div>{props.a}</div>;
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: "hello" }],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-empty-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-empty-expression.js
new file mode 100644
index 00000000000..0d9223957bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-empty-expression.js
@@ -0,0 +1,13 @@
+export function Component(props) {
+  return (
+    <div>
+      {}
+      {props.a}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 'hello'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-fragment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-fragment.expect.md
new file mode 100644
index 00000000000..f92e820dc2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-fragment.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  return (
+    <>
+      Hello {props.greeting}{' '}
+      <div>
+        <>Text</>
+      </div>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <div>
+        <>Text</>
+      </div>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.greeting) {
+    t1 = (
+      <>
+        Hello {props.greeting} {t0}
+      </>
+    );
+    $[1] = props.greeting;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-fragment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-fragment.js
new file mode 100644
index 00000000000..c8d531c763e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-fragment.js
@@ -0,0 +1,16 @@
+function Foo(props) {
+  return (
+    <>
+      Hello {props.greeting}{' '}
+      <div>
+        <>Text</>
+      </div>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-freeze.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-freeze.expect.md
new file mode 100644
index 00000000000..f309cdbac9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-freeze.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {jsx as _jsx} from 'react/jsx-runtime';
+import {shallowCopy} from 'shared-runtime';
+
+function Component(props) {
+  const childprops = {style: {width: props.width}};
+  const element = _jsx('div', {
+    childprops: childprops,
+    children: '"hello world"',
+  });
+  shallowCopy(childprops); // function that in theory could mutate, we assume not bc createElement freezes
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { shallowCopy } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let element;
+  if ($[0] !== props.width) {
+    const childprops = { style: { width: props.width } };
+    element = _jsx("div", { childprops, children: '"hello world"' });
+    shallowCopy(childprops);
+    $[0] = props.width;
+    $[1] = element;
+  } else {
+    element = $[1];
+  }
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div childprops="[object Object]">"hello world"</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-freeze.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-freeze.js
new file mode 100644
index 00000000000..b6b57f2874e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-freeze.js
@@ -0,0 +1,17 @@
+import {jsx as _jsx} from 'react/jsx-runtime';
+import {shallowCopy} from 'shared-runtime';
+
+function Component(props) {
+  const childprops = {style: {width: props.width}};
+  const element = _jsx('div', {
+    childprops: childprops,
+    children: '"hello world"',
+  });
+  shallowCopy(childprops); // function that in theory could mutate, we assume not bc createElement freezes
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.expect.md
new file mode 100644
index 00000000000..084b27c8e53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function Component() {
+  return <div>&gt;&lt;span &amp;</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>{"><span &"}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>&gt;&lt;span &amp;</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.js
new file mode 100644
index 00000000000..5d0ded58aed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.js
@@ -0,0 +1,8 @@
+function Component() {
+  return <div>&gt;&lt;span &amp;</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag-conditional.expect.md
new file mode 100644
index 00000000000..c8cf3f23991
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag-conditional.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+function useFoo({cond}) {
+  const MyLocal = SharedRuntime;
+  if (cond) {
+    return <MyLocal.Text value={4} />;
+  } else {
+    return null;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+function useFoo(t0) {
+  const $ = _c(1);
+  const { cond } = t0;
+
+  if (cond) {
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = <SharedRuntime.Text value={4} />;
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    return t1;
+  } else {
+    return null;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>4</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag-conditional.js
new file mode 100644
index 00000000000..44aa0325e88
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag-conditional.js
@@ -0,0 +1,14 @@
+import * as SharedRuntime from 'shared-runtime';
+function useFoo({cond}) {
+  const MyLocal = SharedRuntime;
+  if (cond) {
+    return <MyLocal.Text value={4} />;
+  } else {
+    return null;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag.expect.md
new file mode 100644
index 00000000000..f24e7a754db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+function useFoo() {
+  const MyLocal = SharedRuntime;
+  return <MyLocal.Text value={4} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+function useFoo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <SharedRuntime.Text value={4} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>4</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag.js
new file mode 100644
index 00000000000..858aba98f0a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-memberexpr-tag.js
@@ -0,0 +1,10 @@
+import * as SharedRuntime from 'shared-runtime';
+function useFoo() {
+  const MyLocal = SharedRuntime;
+  return <MyLocal.Text value={4} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.expect.md
new file mode 100644
index 00000000000..a7d27bc3819
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+function useFoo() {
+  const MyLocal = Stringify;
+  const callback = () => {
+    return <MyLocal value={4} />;
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+function useFoo() {
+  const $ = _c(1);
+
+  const callback = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = callback();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return <Stringify value={4} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":4}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.js
new file mode 100644
index 00000000000..c67e5d9c0e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.js
@@ -0,0 +1,13 @@
+import {Stringify} from 'shared-runtime';
+function useFoo() {
+  const MyLocal = Stringify;
+  const callback = () => {
+    return <MyLocal value={4} />;
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.expect.md
new file mode 100644
index 00000000000..31aa7c77a1e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+import {invoke} from 'shared-runtime';
+function useComponentFactory({name}) {
+  const localVar = SharedRuntime;
+  const cb = () => <localVar.Stringify>hello world {name}</localVar.Stringify>;
+  return invoke(cb);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useComponentFactory,
+  params: [{name: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+import { invoke } from "shared-runtime";
+function useComponentFactory(t0) {
+  const $ = _c(2);
+  const { name } = t0;
+  let t1;
+  if ($[0] !== name) {
+    const cb = () => (
+      <SharedRuntime.Stringify>hello world {name}</SharedRuntime.Stringify>
+    );
+    t1 = invoke(cb);
+    $[0] = name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useComponentFactory,
+  params: [{ name: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":["hello world ","sathya"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.jsx
new file mode 100644
index 00000000000..534490d5d4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.jsx
@@ -0,0 +1,12 @@
+import * as SharedRuntime from 'shared-runtime';
+import {invoke} from 'shared-runtime';
+function useComponentFactory({name}) {
+  const localVar = SharedRuntime;
+  const cb = () => <localVar.Stringify>hello world {name}</localVar.Stringify>;
+  return invoke(cb);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useComponentFactory,
+  params: [{name: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr.expect.md
new file mode 100644
index 00000000000..5778bf599f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+function Component({name}) {
+  const localVar = SharedRuntime;
+  return <localVar.Stringify>hello world {name}</localVar.Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { name } = t0;
+  let t1;
+  if ($[0] !== name) {
+    t1 = <SharedRuntime.Stringify>hello world {name}</SharedRuntime.Stringify>;
+    $[0] = name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":["hello world ","sathya"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr.jsx
new file mode 100644
index 00000000000..d55037fca03
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr.jsx
@@ -0,0 +1,10 @@
+import * as SharedRuntime from 'shared-runtime';
+function Component({name}) {
+  const localVar = SharedRuntime;
+  return <localVar.Stringify>hello world {name}</localVar.Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-memberexpr.expect.md
new file mode 100644
index 00000000000..f5f7b3727e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-memberexpr.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+function Component({name}) {
+  return <SharedRuntime.Stringify>hello world {name}</SharedRuntime.Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+function Component(t0) {
+  const $ = _c(2);
+  const { name } = t0;
+  let t1;
+  if ($[0] !== name) {
+    t1 = <SharedRuntime.Stringify>hello world {name}</SharedRuntime.Stringify>;
+    $[0] = name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":["hello world ","sathya"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-memberexpr.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-memberexpr.jsx
new file mode 100644
index 00000000000..992cbecebe3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-memberexpr.jsx
@@ -0,0 +1,9 @@
+import * as SharedRuntime from 'shared-runtime';
+function Component({name}) {
+  return <SharedRuntime.Stringify>hello world {name}</SharedRuntime.Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.expect.md
new file mode 100644
index 00000000000..71d9904a3a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  return <Foo.Bar>{maybeMutate(maybeMutable)}</Foo.Bar>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const maybeMutable = new MaybeMutable();
+    t0 = <Foo.Bar>{maybeMutate(maybeMutable)}</Foo.Bar>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.js
new file mode 100644
index 00000000000..4455f9a9abd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  return <Foo.Bar>{maybeMutate(maybeMutable)}</Foo.Bar>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression.expect.md
new file mode 100644
index 00000000000..411ba07fa36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return (
+    <Sathya.Codes.Forget>
+      <Foo.Bar.Baz />
+    </Sathya.Codes.Forget>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Sathya.Codes.Forget>
+        <Foo.Bar.Baz />
+      </Sathya.Codes.Forget>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression.js
new file mode 100644
index 00000000000..40f36ac072d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-member-expression.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  return (
+    <Sathya.Codes.Forget>
+      <Foo.Bar.Baz />
+    </Sathya.Codes.Forget>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-memberexpr-tag-in-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-memberexpr-tag-in-lambda.expect.md
new file mode 100644
index 00000000000..e5ead2479dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-memberexpr-tag-in-lambda.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+function useFoo() {
+  const MyLocal = SharedRuntime;
+  const callback = () => {
+    return <MyLocal.Text value={4} />;
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+function useFoo() {
+  const $ = _c(1);
+
+  const callback = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = callback();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return <SharedRuntime.Text value={4} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>4</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-memberexpr-tag-in-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-memberexpr-tag-in-lambda.js
new file mode 100644
index 00000000000..b8d1be8d2e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-memberexpr-tag-in-lambda.js
@@ -0,0 +1,13 @@
+import * as SharedRuntime from 'shared-runtime';
+function useFoo() {
+  const MyLocal = SharedRuntime;
+  const callback = () => {
+    return <MyLocal.Text value={4} />;
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-namespaced-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-namespaced-name.expect.md
new file mode 100644
index 00000000000..d587ed1f5bc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-namespaced-name.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return <xml:http protocol:version={props.version} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.version) {
+    t0 = <xml:http protocol:version={props.version} />;
+    $[0] = props.version;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-namespaced-name.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-namespaced-name.js
new file mode 100644
index 00000000000..825c5a7b90c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-namespaced-name.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  return <xml:http protocol:version={props.version} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.expect.md
new file mode 100644
index 00000000000..108c6725f7e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.expect.md
@@ -0,0 +1,144 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return arr.map(i => {
+    <>
+      {arr.map((i, id) => {
+        let child = (
+          <Bar x={x}>
+            <Baz i={i}></Baz>
+          </Bar>
+        );
+
+        let jsx = <div>{child}</div>;
+        return jsx;
+      })}
+    </>;
+  });
+}
+
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return <>{i}</>;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(3);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    t1 = arr.map((i) => {
+      arr.map((i_0, id) => {
+        const T0 = _temp;
+        const child = <T0 i={i_0} x={x} />;
+
+        const jsx = <div>{child}</div>;
+        return jsx;
+      });
+    });
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp(t0) {
+  const $ = _c(5);
+  const { i: i, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1 || $[3] !== x) {
+    t2 = <Bar x={x}>{t1}</Bar>;
+    $[2] = t1;
+    $[3] = x;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const $ = _c(2);
+  const { i } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <>{i}</>;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null,null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.js
new file mode 100644
index 00000000000..96a4e7bb248
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.js
@@ -0,0 +1,40 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return arr.map(i => {
+    <>
+      {arr.map((i, id) => {
+        let child = (
+          <Bar x={x}>
+            <Baz i={i}></Baz>
+          </Bar>
+        );
+
+        let jsx = <div>{child}</div>;
+        return jsx;
+      })}
+    </>;
+  });
+}
+
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return <>{i}</>;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dup-key-diff-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dup-key-diff-value.expect.md
new file mode 100644
index 00000000000..ded6e67020f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dup-key-diff-value.expect.md
@@ -0,0 +1,166 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i + 'i'}></Baz>
+            <Foo k={i + 'j'}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 i={i + "i"} k={i + "j"} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(8);
+  const { i: i, k: k, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== k) {
+    t2 = <Foo k={k} />;
+    $[2] = k;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2 || $[6] !== x) {
+    t3 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+      </Bar>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = x;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const { i } = t0;
+  return i;
+}
+
+function Foo(t0) {
+  const { k } = t0;
+  return k;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfooifoojxbaribarj
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dup-key-diff-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dup-key-diff-value.js
new file mode 100644
index 00000000000..63086739a23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dup-key-diff-value.js
@@ -0,0 +1,41 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i + 'i'}></Baz>
+            <Foo k={i + 'j'}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-attr-after-rename.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-attr-after-rename.expect.md
new file mode 100644
index 00000000000..c95e23222ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-attr-after-rename.expect.md
@@ -0,0 +1,177 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Foo k={i + 'i'}></Foo>
+            <Foo k={i + 'j'}></Foo>
+            <Baz k1={i + 'j'}></Baz>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({k1}) {
+  return k1;
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 k={i + "i"} k1={i + "j"} k12={i + "j"} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(11);
+  const { k: k, k1: k1, k12: k12, x: x } = t0;
+  let t1;
+  if ($[0] !== k) {
+    t1 = <Foo k={k} />;
+    $[0] = k;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== k1) {
+    t2 = <Foo k={k1} />;
+    $[2] = k1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== k12) {
+    t3 = <Baz k1={k12} />;
+    $[4] = k12;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== x) {
+    t4 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+        {t3}
+      </Bar>
+    );
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = x;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const { k1 } = t0;
+  return k1;
+}
+
+function Foo(t0) {
+  const { k } = t0;
+  return k;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfooifoojfoojxbaribarjbarj
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-attr-after-rename.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-attr-after-rename.js
new file mode 100644
index 00000000000..09a826492a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-attr-after-rename.js
@@ -0,0 +1,42 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Foo k={i + 'i'}></Foo>
+            <Foo k={i + 'j'}></Foo>
+            <Baz k1={i + 'j'}></Baz>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({k1}) {
+  return k1;
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-key-dupe-component.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-key-dupe-component.expect.md
new file mode 100644
index 00000000000..a53d9d92aa6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-key-dupe-component.expect.md
@@ -0,0 +1,157 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Foo k={i + 'i'}></Foo>
+            <Foo k={i + 'j'}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 k={i + "i"} k1={i + "j"} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(8);
+  const { k: k, k1: k1, x: x } = t0;
+  let t1;
+  if ($[0] !== k) {
+    t1 = <Foo k={k} />;
+    $[0] = k;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== k1) {
+    t2 = <Foo k={k1} />;
+    $[2] = k1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2 || $[6] !== x) {
+    t3 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+      </Bar>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = x;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Foo(t0) {
+  const { k } = t0;
+  return k;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfooifoojxbaribarj
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-key-dupe-component.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-key-dupe-component.js
new file mode 100644
index 00000000000..aa7cb548ce9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-dupe-key-dupe-component.js
@@ -0,0 +1,37 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Foo k={i + 'i'}></Foo>
+            <Foo k={i + 'j'}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.expect.md
new file mode 100644
index 00000000000..e6ba7dd7ee7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.expect.md
@@ -0,0 +1,166 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+            <Foo i={i}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function Foo({i}) {
+  return i;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 i={i} i1={i} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(8);
+  const { i: i, i1: i1, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== i1) {
+    t2 = <Foo i={i1} />;
+    $[2] = i1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2 || $[6] !== x) {
+    t3 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+      </Bar>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = x;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const { i } = t0;
+  return i;
+}
+
+function Foo(t0) {
+  const { i } = t0;
+  return i;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfoofooxbarbar
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.js
new file mode 100644
index 00000000000..0314ce8c676
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.js
@@ -0,0 +1,41 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+            <Foo i={i}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function Foo({i}) {
+  return i;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-jsx-stored-in-id.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-jsx-stored-in-id.expect.md
new file mode 100644
index 00000000000..7fca963134b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-jsx-stored-in-id.expect.md
@@ -0,0 +1,145 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        let jsx = (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+          </Bar>
+        );
+        return jsx;
+      })}
+    </>
+  );
+}
+
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        const jsx = <T0 i={i} key={id} x={x} />;
+        return jsx;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(5);
+  const { i: i, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1 || $[3] !== x) {
+    t2 = <Bar x={x}>{t1}</Bar>;
+    $[2] = t1;
+    $[3] = x;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const { i } = t0;
+  return i;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfooxbar
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-jsx-stored-in-id.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-jsx-stored-in-id.js
new file mode 100644
index 00000000000..971a9ff9962
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-jsx-stored-in-id.js
@@ -0,0 +1,38 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        let jsx = (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+          </Bar>
+        );
+        return jsx;
+      })}
+    </>
+  );
+}
+
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-separate-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-separate-nested.expect.md
new file mode 100644
index 00000000000..9d2b254c063
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-separate-nested.expect.md
@@ -0,0 +1,186 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+            <Joe j={i}></Joe>
+            <Foo k={i}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function Joe({j}) {
+  return j;
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 i={i} j={i} k={i} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(11);
+  const { i: i, j: j, k: k, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== j) {
+    t2 = <Joe j={j} />;
+    $[2] = j;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== k) {
+    t3 = <Foo k={k} />;
+    $[4] = k;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== x) {
+    t4 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+        {t3}
+      </Bar>
+    );
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = x;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const { i } = t0;
+  return i;
+}
+
+function Joe(t0) {
+  const { j } = t0;
+  return j;
+}
+
+function Foo(t0) {
+  const { k } = t0;
+  return k;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfoofoofooxbarbarbar
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-separate-nested.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-separate-nested.js
new file mode 100644
index 00000000000..47d97cfc68f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-separate-nested.js
@@ -0,0 +1,46 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+            <Joe j={i}></Joe>
+            <Foo k={i}></Foo>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function Joe({j}) {
+  return j;
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-simple.expect.md
new file mode 100644
index 00000000000..09323f5ac65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-simple.expect.md
@@ -0,0 +1,142 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 i={i} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(5);
+  const { i: i, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1 || $[3] !== x) {
+    t2 = <Bar x={x}>{t1}</Bar>;
+    $[2] = t1;
+    $[3] = x;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const { i } = t0;
+  return i;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfooxbar
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-simple.js
new file mode 100644
index 00000000000..c4dcc86763b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-simple.js
@@ -0,0 +1,36 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}></Baz>
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i}) {
+  return i;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-with-non-jsx-children.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-with-non-jsx-children.expect.md
new file mode 100644
index 00000000000..5408ea83a83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-with-non-jsx-children.expect.md
@@ -0,0 +1,189 @@
+
+## Input
+
+```javascript
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}>Test</Baz>
+            <Foo k={i} />
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i, children}) {
+  return (
+    <>
+      {i}
+      {children}
+    </>
+  );
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
+function Component(t0) {
+  const $ = _c(7);
+  const { arr } = t0;
+  const x = useX();
+  let t1;
+  if ($[0] !== arr || $[1] !== x) {
+    let t2;
+    if ($[3] !== x) {
+      t2 = (i, id) => {
+        const t3 = "Test";
+        const T0 = _temp;
+        return <T0 i={i} t={t3} k={i} key={id} x={x} />;
+      };
+      $[3] = x;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = arr.map(t2);
+    $[0] = arr;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(t0) {
+  const $ = _c(9);
+  const { i: i, t: t, k: k, x: x } = t0;
+  let t1;
+  if ($[0] !== i || $[1] !== t) {
+    t1 = <Baz i={i}>{t}</Baz>;
+    $[0] = i;
+    $[1] = t;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== k) {
+    t2 = <Foo k={k} />;
+    $[3] = k;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2 || $[7] !== x) {
+    t3 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+      </Bar>
+    );
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = x;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+
+function Bar(t0) {
+  const $ = _c(3);
+  const { x, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== x) {
+    t1 = (
+      <>
+        {x}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Baz(t0) {
+  const $ = _c(3);
+  const { i, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== i) {
+    t1 = (
+      <>
+        {i}
+        {children}
+      </>
+    );
+    $[0] = children;
+    $[1] = i;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Foo(t0) {
+  const { k } = t0;
+  return k;
+}
+
+function useX() {
+  return "x";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arr: ["foo", "bar"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) xfooTestfooxbarTestbar
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-with-non-jsx-children.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-with-non-jsx-children.js
new file mode 100644
index 00000000000..552db93e837
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-with-non-jsx-children.js
@@ -0,0 +1,47 @@
+// @enableJsxOutlining
+function Component({arr}) {
+  const x = useX();
+  return (
+    <>
+      {arr.map((i, id) => {
+        return (
+          <Bar key={id} x={x}>
+            <Baz i={i}>Test</Baz>
+            <Foo k={i} />
+          </Bar>
+        );
+      })}
+    </>
+  );
+}
+
+function Bar({x, children}) {
+  return (
+    <>
+      {x}
+      {children}
+    </>
+  );
+}
+
+function Baz({i, children}) {
+  return (
+    <>
+      {i}
+      {children}
+    </>
+  );
+}
+
+function Foo({k}) {
+  return k;
+}
+
+function useX() {
+  return 'x';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arr: ['foo', 'bar']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
new file mode 100644
index 00000000000..a539d92ed91
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+/**
+ * Fixture showing `@babel/generator` bug with jsx attribute strings containing
+ * escape sequences. Note that this is only a problem when generating jsx
+ * literals.
+ *
+ * When using the jsx transform to correctly lower jsx into
+ * `React.createElement` calls, the escape sequences are preserved correctly
+ * (see evaluator output).
+ */
+function MyApp() {
+  return <input pattern="\w" />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Fixture showing `@babel/generator` bug with jsx attribute strings containing
+ * escape sequences. Note that this is only a problem when generating jsx
+ * literals.
+ *
+ * When using the jsx transform to correctly lower jsx into
+ * `React.createElement` calls, the escape sequences are preserved correctly
+ * (see evaluator output).
+ */
+function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <input pattern={"\\w"} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input pattern="\w">
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js
new file mode 100644
index 00000000000..5a972a585be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js
@@ -0,0 +1,17 @@
+/**
+ * Fixture showing `@babel/generator` bug with jsx attribute strings containing
+ * escape sequences. Note that this is only a problem when generating jsx
+ * literals.
+ *
+ * When using the jsx transform to correctly lower jsx into
+ * `React.createElement` calls, the escape sequences are preserved correctly
+ * (see evaluator output).
+ */
+function MyApp() {
+  return <input pattern="\w" />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.expect.md
new file mode 100644
index 00000000000..3b5155a27a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+import {StaticText1} from 'shared-runtime';
+
+function Component() {
+  return (
+    <div>
+      Before text
+      <StaticText1 />
+      Middle text
+      <StaticText1>
+        Inner before text
+        <StaticText1 />
+        Inner middle text
+        <StaticText1 />
+        Inner after text
+      </StaticText1>
+      After text
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { StaticText1 } from "shared-runtime";
+
+function Component() {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <StaticText1 />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <StaticText1 />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (
+      <div>
+        Before text{t0}Middle text
+        <StaticText1>
+          Inner before text{t1}Inner middle text
+          <StaticText1 />
+          Inner after text
+        </StaticText1>
+        After text
+      </div>
+    );
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Before text<div>StaticText1</div>Middle text<div>StaticText1Inner before text<div>StaticText1</div>Inner middle text<div>StaticText1</div>Inner after text</div>After text</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.tsx
new file mode 100644
index 00000000000..3ad1bbc4cc9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-whitespace.tsx
@@ -0,0 +1,24 @@
+import {StaticText1} from 'shared-runtime';
+
+function Component() {
+  return (
+    <div>
+      Before text
+      <StaticText1 />
+      Middle text
+      <StaticText1>
+        Inner before text
+        <StaticText1 />
+        Inner middle text
+        <StaticText1 />
+        Inner after text
+      </StaticText1>
+      After text
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-reactive-local-variable-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-reactive-local-variable-member-expr.expect.md
new file mode 100644
index 00000000000..83b4c3f1f0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-reactive-local-variable-member-expr.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+import * as sharedRuntime from 'shared-runtime';
+
+function Component({something}: {something: {StaticText1: React.ElementType}}) {
+  const Foo = something.StaticText1;
+  return () => <Foo />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{something: sharedRuntime}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as sharedRuntime from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { something } = t0;
+  const Foo = something.StaticText1;
+  let t1;
+  if ($[0] !== Foo) {
+    t1 = () => <Foo />;
+    $[0] = Foo;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ something: sharedRuntime }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-reactive-local-variable-member-expr.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-reactive-local-variable-member-expr.tsx
new file mode 100644
index 00000000000..290e32f19ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-reactive-local-variable-member-expr.tsx
@@ -0,0 +1,11 @@
+import * as sharedRuntime from 'shared-runtime';
+
+function Component({something}: {something: {StaticText1: React.ElementType}}) {
+  const Foo = something.StaticText1;
+  return () => <Foo />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{something: sharedRuntime}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-spread.expect.md
new file mode 100644
index 00000000000..ffa2855d914
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-spread.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return (
+    <Component {...props} {...{bar: props.cond ? props.foo : props.bar}} />
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+
+  const t0 = props.cond ? props.foo : props.bar;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = { bar: t0 };
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== props || $[3] !== t1) {
+    t2 = <Component {...props} {...t1} />;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-spread.js
new file mode 100644
index 00000000000..0a3c76c1dbd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-spread.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  return (
+    <Component {...props} {...{bar: props.cond ? props.foo : props.bar}} />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md
new file mode 100644
index 00000000000..2bcf4825374
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <div>
+      <Text value={'\n'} />
+      <Text value={'A\tE'} />
+      <Text value={'나은'} />
+      <Text value={'Lauren'} />
+      <Text value={'சத்யா'} />
+      <Text value={'Sathya'} />
+      <Text value={'welcome 👋'} />
+    </div>
+  );
+}
+
+function Text({value}) {
+  return <span>{value}</span>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <div>
+        <Text value={"\n"} />
+        <Text value={"A\tE"} />
+        <Text value={"\uB098\uC740"} />
+        <Text value="Lauren" />
+        <Text value={"\u0B9A\u0BA4\u0BCD\u0BAF\u0BBE"} />
+        <Text value="Sathya" />
+        <Text value={"welcome \uD83D\uDC4B"} />
+      </div>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Text(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = <span>{value}</span>;
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span>
+</span><span>A	E</span><span>나은</span><span>Lauren</span><span>சத்யா</span><span>Sathya</span><span>welcome 👋</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js
new file mode 100644
index 00000000000..3234745a4c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js
@@ -0,0 +1,22 @@
+function Component() {
+  return (
+    <div>
+      <Text value={'\n'} />
+      <Text value={'A\tE'} />
+      <Text value={'나은'} />
+      <Text value={'Lauren'} />
+      <Text value={'சத்யா'} />
+      <Text value={'Sathya'} />
+      <Text value={'welcome 👋'} />
+    </div>
+  );
+}
+
+function Text({value}) {
+  return <span>{value}</span>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.expect.md
new file mode 100644
index 00000000000..7f05ade8760
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+function Component() {
+  return (
+    <Post
+      author="potetotes"
+      text="in addition to understanding JavaScript semantics and the rules of React, the compiler team also understands தமிழ், 中文, 日本語, 한국어 and i think that’s pretty cool"
+    />
+  );
+}
+
+function Post({author, text}) {
+  return (
+    <div>
+      <h1>{author}</h1>
+      <span>{text}</span>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Post
+        author="potetotes"
+        text={
+          "in addition to understanding JavaScript semantics and the rules of React, the compiler team also understands \u0BA4\u0BAE\u0BBF\u0BB4\u0BCD, \u4E2D\u6587, \u65E5\u672C\u8A9E, \uD55C\uAD6D\uC5B4 and i think that\u2019s pretty cool"
+        }
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Post(t0) {
+  const $ = _c(7);
+  const { author, text } = t0;
+  let t1;
+  if ($[0] !== author) {
+    t1 = <h1>{author}</h1>;
+    $[0] = author;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== text) {
+    t2 = <span>{text}</span>;
+    $[2] = text;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = (
+      <div>
+        {t1}
+        {t2}
+      </div>
+    );
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><h1>potetotes</h1><span>in addition to understanding JavaScript semantics and the rules of React, the compiler team also understands தமிழ், 中文, 日本語, 한국어 and i think that’s pretty cool</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.js
new file mode 100644
index 00000000000..680d8d93aa0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-non-ascii.js
@@ -0,0 +1,22 @@
+function Component() {
+  return (
+    <Post
+      author="potetotes"
+      text="in addition to understanding JavaScript semantics and the rules of React, the compiler team also understands தமிழ், 中文, 日本語, 한국어 and i think that’s pretty cool"
+    />
+  );
+}
+
+function Post({author, text}) {
+  return (
+    <div>
+      <h1>{author}</h1>
+      <span>{text}</span>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order-non-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order-non-global.expect.md
new file mode 100644
index 00000000000..afebfba378d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order-non-global.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+import {StaticText1, StaticText2} from 'shared-runtime';
+
+function MaybeMutable() {
+  return {};
+}
+function maybeMutate(x) {}
+
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  let Tag = props.component;
+  // NOTE: the order of evaluation in the lowering is incorrect:
+  // the jsx element's tag observes `Tag` after reassignment, but should observe
+  // it before the reassignment.
+
+  // Currently, Forget preserves jsx whitespace in the source text.
+  // prettier-ignore
+  return (
+    <Tag>{((Tag = props.alternateComponent), maybeMutate(maybeMutable))}<Tag /></Tag>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{component: StaticText1, alternateComponent: StaticText2}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { StaticText1, StaticText2 } from "shared-runtime";
+
+function MaybeMutable() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function maybeMutate(x) {}
+
+function Component(props) {
+  const $ = _c(11);
+  let T0;
+  let Tag;
+  let t0;
+  if ($[0] !== props.alternateComponent || $[1] !== props.component) {
+    const maybeMutable = new MaybeMutable();
+    Tag = props.component;
+    T0 = Tag;
+    t0 = ((Tag = props.alternateComponent), maybeMutate(maybeMutable));
+    $[0] = props.alternateComponent;
+    $[1] = props.component;
+    $[2] = T0;
+    $[3] = Tag;
+    $[4] = t0;
+  } else {
+    T0 = $[2];
+    Tag = $[3];
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== Tag) {
+    t1 = <Tag />;
+    $[5] = Tag;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== T0 || $[8] !== t0 || $[9] !== t1) {
+    t2 = (
+      <T0>
+        {t0}
+        {t1}
+      </T0>
+    );
+    $[7] = T0;
+    $[8] = t0;
+    $[9] = t1;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ component: StaticText1, alternateComponent: StaticText2 }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>StaticText1<div>StaticText2</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order-non-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order-non-global.js
new file mode 100644
index 00000000000..687c1a10adf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order-non-global.js
@@ -0,0 +1,26 @@
+import {StaticText1, StaticText2} from 'shared-runtime';
+
+function MaybeMutable() {
+  return {};
+}
+function maybeMutate(x) {}
+
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  let Tag = props.component;
+  // NOTE: the order of evaluation in the lowering is incorrect:
+  // the jsx element's tag observes `Tag` after reassignment, but should observe
+  // it before the reassignment.
+
+  // Currently, Forget preserves jsx whitespace in the source text.
+  // prettier-ignore
+  return (
+    <Tag>{((Tag = props.alternateComponent), maybeMutate(maybeMutable))}<Tag /></Tag>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{component: StaticText1, alternateComponent: StaticText2}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.expect.md
new file mode 100644
index 00000000000..b59db512231
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+import {StaticText1, StaticText2} from 'shared-runtime';
+
+function Component(props: {value: string}) {
+  let Tag = StaticText1;
+
+  // Currently, Forget preserves jsx whitespace in the source text.
+  // prettier-ignore
+  return (
+    <Tag>{((Tag = StaticText2), props.value)}<Tag /></Tag>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'string value 1'}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { StaticText1, StaticText2 } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+
+  const t0 = props.value;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <StaticText2 />;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== t0) {
+    t2 = (
+      <StaticText1>
+        {t0}
+        {t1}
+      </StaticText1>
+    );
+    $[1] = t0;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "string value 1" }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>StaticText1string value 1<div>StaticText2</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.tsx
new file mode 100644
index 00000000000..138b73a9aa6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.tsx
@@ -0,0 +1,17 @@
+import {StaticText1, StaticText2} from 'shared-runtime';
+
+function Component(props: {value: string}) {
+  let Tag = StaticText1;
+
+  // Currently, Forget preserves jsx whitespace in the source text.
+  // prettier-ignore
+  return (
+    <Tag>{((Tag = StaticText2), props.value)}<Tag /></Tag>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'string value 1'}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-ternary-local-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-ternary-local-variable.expect.md
new file mode 100644
index 00000000000..7a841aa7cab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-ternary-local-variable.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+import {RenderPropAsChild, StaticText1, StaticText2} from 'shared-runtime';
+
+function Component(props: {showText1: boolean}) {
+  const Foo = props.showText1 ? StaticText1 : StaticText2;
+
+  return <RenderPropAsChild items={[() => <Foo key="0" />]} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{showText1: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { RenderPropAsChild, StaticText1, StaticText2 } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  const Foo = props.showText1 ? StaticText1 : StaticText2;
+  let t0;
+  if ($[0] !== Foo) {
+    t0 = <RenderPropAsChild items={[() => <Foo key="0" />]} />;
+    $[0] = Foo;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ showText1: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>HigherOrderComponent<div>StaticText2</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-ternary-local-variable.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-ternary-local-variable.tsx
new file mode 100644
index 00000000000..a106d2a0aed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-ternary-local-variable.tsx
@@ -0,0 +1,12 @@
+import {RenderPropAsChild, StaticText1, StaticText2} from 'shared-runtime';
+
+function Component(props: {showText1: boolean}) {
+  const Foo = props.showText1 ? StaticText1 : StaticText2;
+
+  return <RenderPropAsChild items={[() => <Foo key="0" />]} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{showText1: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-loop.expect.md
new file mode 100644
index 00000000000..d12aa78beb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-loop.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+function useHook(end) {
+  const log = [];
+  for (let i = 0; i < end + 1; i++) {
+    log.push(`${i} @A`);
+    bb0: {
+      if (i === end) {
+        break bb0;
+      }
+      log.push(`${i} @B`);
+    }
+    log.push(`${i} @C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useHook(end) {
+  const $ = _c(2);
+  let log;
+  if ($[0] !== end) {
+    log = [];
+    for (let i = 0; i < end + 1; i++) {
+      log.push(`${i} @A`);
+      bb0: {
+        if (i === end) {
+          break bb0;
+        }
+
+        log.push(`${i} @B`);
+      }
+
+      log.push(`${i} @C`);
+    }
+    $[0] = end;
+    $[1] = log;
+  } else {
+    log = $[1];
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["0 @A","0 @B","0 @C","1 @A","1 @C"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-loop.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-loop.ts
new file mode 100644
index 00000000000..481f3e2a5d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-loop.ts
@@ -0,0 +1,19 @@
+function useHook(end) {
+  const log = [];
+  for (let i = 0; i < end + 1; i++) {
+    log.push(`${i} @A`);
+    bb0: {
+      if (i === end) {
+        break bb0;
+      }
+      log.push(`${i} @B`);
+    }
+    log.push(`${i} @C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.expect.md
new file mode 100644
index 00000000000..441b6ae3147
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+import {CONST_STRING0} from 'shared-runtime';
+
+function useHook(cond) {
+  const log = [];
+  switch (CONST_STRING0) {
+    case CONST_STRING0:
+      log.push(`@A`);
+      bb0: {
+        if (cond) {
+          break bb0;
+        }
+        log.push(`@B`);
+      }
+      log.push(`@C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_STRING0 } from "shared-runtime";
+
+function useHook(cond) {
+  const $ = _c(2);
+  let log;
+  if ($[0] !== cond) {
+    log = [];
+    switch (CONST_STRING0) {
+      case CONST_STRING0: {
+        log.push("@A");
+        bb0: {
+          if (cond) {
+            break bb0;
+          }
+
+          log.push("@B");
+        }
+
+        log.push("@C");
+      }
+    }
+    $[0] = cond;
+    $[1] = log;
+  } else {
+    log = $[1];
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["@A","@C"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.ts
new file mode 100644
index 00000000000..55b132a9fa5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/labeled-break-within-label-switch.ts
@@ -0,0 +1,22 @@
+import {CONST_STRING0} from 'shared-runtime';
+
+function useHook(cond) {
+  const log = [];
+  switch (CONST_STRING0) {
+    case CONST_STRING0:
+      log.push(`@A`);
+      bb0: {
+        if (cond) {
+          break bb0;
+        }
+        log.push(`@B`);
+      }
+      log.push(`@C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-captured.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-captured.expect.md
new file mode 100644
index 00000000000..eac52a68b5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-captured.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {CONST_NUMBER0, invoke} from 'shared-runtime';
+
+function Foo() {
+  const x = [{value: 0}, {value: 1}, {value: 2}];
+  const param = CONST_NUMBER0;
+  const foo = () => {
+    return x[param].value;
+  };
+
+  return invoke(foo);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_NUMBER0, invoke } from "shared-runtime";
+
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [{ value: 0 }, { value: 1 }, { value: 2 }];
+    const foo = () => x[CONST_NUMBER0].value;
+    t0 = invoke(foo);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-captured.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-captured.ts
new file mode 100644
index 00000000000..0074cf9128d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-captured.ts
@@ -0,0 +1,16 @@
+import {CONST_NUMBER0, invoke} from 'shared-runtime';
+
+function Foo() {
+  const x = [{value: 0}, {value: 1}, {value: 2}];
+  const param = CONST_NUMBER0;
+  const foo = () => {
+    return x[param].value;
+  };
+
+  return invoke(foo);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-param.expect.md
new file mode 100644
index 00000000000..5c0e939d524
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-param.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {invoke} from 'shared-runtime';
+
+function Foo() {
+  const x = [{value: 0}, {value: 1}, {value: 2}];
+  const foo = (param: number) => {
+    return x[param].value;
+  };
+
+  return invoke(foo, 1);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { invoke } from "shared-runtime";
+
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [{ value: 0 }, { value: 1 }, { value: 2 }];
+    const foo = (param) => x[param].value;
+    t0 = invoke(foo, 1);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-param.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-param.ts
new file mode 100644
index 00000000000..3dcfc298a9f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-array-access-member-expr-param.ts
@@ -0,0 +1,15 @@
+import {invoke} from 'shared-runtime';
+
+function Foo() {
+  const x = [{value: 0}, {value: 1}, {value: 2}];
+  const foo = (param: number) => {
+    return x[param].value;
+  };
+
+  return invoke(foo, 1);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-capture-returned-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-capture-returned-alias.expect.md
new file mode 100644
index 00000000000..ea9e981ba29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-capture-returned-alias.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// Here, element should not be memoized independently of aliasedElement, since
+// it is captured by fn.
+// AnalyzeFunctions currently does not find captured objects.
+//  - mutated context refs are declared as `Capture` effect in `FunctionExpression.deps`
+//  - all other context refs are left as Unknown. InferReferenceEffects currently demotes
+//    them to reads
+function CaptureNotMutate(props) {
+  const idx = foo(props.x);
+  const element = bar(props.el);
+
+  const fn = function () {
+    const arr = {element};
+    return arr[idx];
+  };
+  const aliasedElement = fn();
+  mutate(aliasedElement);
+  return aliasedElement;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Here, element should not be memoized independently of aliasedElement, since
+// it is captured by fn.
+// AnalyzeFunctions currently does not find captured objects.
+//  - mutated context refs are declared as `Capture` effect in `FunctionExpression.deps`
+//  - all other context refs are left as Unknown. InferReferenceEffects currently demotes
+//    them to reads
+function CaptureNotMutate(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = foo(props.x);
+    $[0] = props.x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const idx = t0;
+  let aliasedElement;
+  if ($[2] !== idx || $[3] !== props.el) {
+    const element = bar(props.el);
+    const fn = function () {
+      const arr = { element };
+      return arr[idx];
+    };
+    aliasedElement = fn();
+    mutate(aliasedElement);
+    $[2] = idx;
+    $[3] = props.el;
+    $[4] = aliasedElement;
+  } else {
+    aliasedElement = $[4];
+  }
+  return aliasedElement;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-capture-returned-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-capture-returned-alias.js
new file mode 100644
index 00000000000..9096307c241
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-capture-returned-alias.js
@@ -0,0 +1,18 @@
+// Here, element should not be memoized independently of aliasedElement, since
+// it is captured by fn.
+// AnalyzeFunctions currently does not find captured objects.
+//  - mutated context refs are declared as `Capture` effect in `FunctionExpression.deps`
+//  - all other context refs are left as Unknown. InferReferenceEffects currently demotes
+//    them to reads
+function CaptureNotMutate(props) {
+  const idx = foo(props.x);
+  const element = bar(props.el);
+
+  const fn = function () {
+    const arr = {element};
+    return arr[idx];
+  };
+  const aliasedElement = fn();
+  mutate(aliasedElement);
+  return aliasedElement;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutate-shadowed-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutate-shadowed-object.expect.md
new file mode 100644
index 00000000000..d532f252111
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutate-shadowed-object.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = {};
+  {
+    const x = [];
+    const fn = function () {
+      mutate(x);
+    };
+    fn();
+  }
+  return x; // should return {}
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+
+  const x_0 = [];
+  const fn = function () {
+    mutate(x_0);
+  };
+
+  fn();
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutate-shadowed-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutate-shadowed-object.js
new file mode 100644
index 00000000000..4971f05bd72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutate-shadowed-object.js
@@ -0,0 +1,11 @@
+function Component() {
+  const x = {};
+  {
+    const x = [];
+    const fn = function () {
+      mutate(x);
+    };
+    fn();
+  }
+  return x; // should return {}
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-non-reactive-to-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-non-reactive-to-reactive.expect.md
new file mode 100644
index 00000000000..ed0ddda55b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-non-reactive-to-reactive.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function f(a) {
+  let x;
+  (() => {
+    x = {a};
+  })();
+  return <div x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function f(a) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== a) {
+    x = { a };
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = <div x={x} />;
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-non-reactive-to-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-non-reactive-to-reactive.js
new file mode 100644
index 00000000000..bb502fba428
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-non-reactive-to-reactive.js
@@ -0,0 +1,13 @@
+function f(a) {
+  let x;
+  (() => {
+    x = {a};
+  })();
+  return <div x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-ref-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-ref-non-reactive.expect.md
new file mode 100644
index 00000000000..8dc4839085e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-ref-non-reactive.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function f(a) {
+  let x;
+  (() => {
+    x = {};
+  })();
+  // this is not reactive on `x` as `x` is never reactive
+  return <div x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function f(a) {
+  const $ = _c(2);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div x={x} />;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-ref-non-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-ref-non-reactive.js
new file mode 100644
index 00000000000..5037747c508
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-mutated-ref-non-reactive.js
@@ -0,0 +1,14 @@
+function f(a) {
+  let x;
+  (() => {
+    x = {};
+  })();
+  // this is not reactive on `x` as `x` is never reactive
+  return <div x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-primitive.expect.md
new file mode 100644
index 00000000000..159cf166cc0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-primitive.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// writing to primitives is not a 'mutate' or 'store' to context references,
+// under current analysis in AnalyzeFunctions.
+// <unknown> $23:TFunction = Function @deps[<unknown>
+//   $21:TPrimitive,<unknown> $22:TPrimitive]:
+
+function Component() {
+  let x = 40;
+
+  const fn = function () {
+    x = x + 1;
+  };
+  fn();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // writing to primitives is not a 'mutate' or 'store' to context references,
+// under current analysis in AnalyzeFunctions.
+// <unknown> $23:TFunction = Function @deps[<unknown>
+//   $21:TPrimitive,<unknown> $22:TPrimitive]:
+
+function Component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = 40;
+
+    const fn = function () {
+      x = x + 1;
+    };
+
+    fn();
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 41
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-primitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-primitive.js
new file mode 100644
index 00000000000..da6b52e3feb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-primitive.js
@@ -0,0 +1,20 @@
+// writing to primitives is not a 'mutate' or 'store' to context references,
+// under current analysis in AnalyzeFunctions.
+// <unknown> $23:TFunction = Function @deps[<unknown>
+//   $21:TPrimitive,<unknown> $22:TPrimitive]:
+
+function Component() {
+  let x = 40;
+
+  const fn = function () {
+    x = x + 1;
+  };
+  fn();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-shadowed-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-shadowed-primitive.expect.md
new file mode 100644
index 00000000000..d008f60e8ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-shadowed-primitive.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = {};
+  {
+    let x = 56;
+    const fn = function () {
+      x = 42;
+    };
+    fn();
+  }
+  return x; // should return {}
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+
+  let x_0 = 56;
+  const fn = function () {
+    x_0 = 42;
+  };
+
+  fn();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-shadowed-primitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-shadowed-primitive.js
new file mode 100644
index 00000000000..0eace9bfe36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-reassign-shadowed-primitive.js
@@ -0,0 +1,17 @@
+function Component() {
+  const x = {};
+  {
+    let x = 56;
+    const fn = function () {
+      x = 42;
+    };
+    fn();
+  }
+  return x; // should return {}
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-return-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-return-expression.expect.md
new file mode 100644
index 00000000000..f789e7f2971
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-return-expression.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+import {invoke} from 'shared-runtime';
+
+function useFoo() {
+  const x = {};
+  const result = invoke(() => x);
+  console.log(result);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { invoke } from "shared-runtime";
+
+function useFoo() {
+  const x = {};
+  const result = invoke(() => x);
+  console.log(result);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-return-expression.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-return-expression.ts
new file mode 100644
index 00000000000..26a8ea963a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lambda-return-expression.ts
@@ -0,0 +1,13 @@
+import {invoke} from 'shared-runtime';
+
+function useFoo() {
+  const x = {};
+  const result = invoke(() => x);
+  console.log(result);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.expect.md
new file mode 100644
index 00000000000..b6583dbc9e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.expect.md
@@ -0,0 +1,137 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly
+import {createContext, use, useState} from 'react';
+import {
+  Stringify,
+  identity,
+  makeObject_Primitives,
+  useHook,
+} from 'shared-runtime';
+
+function Component() {
+  const w = use(Context);
+
+  // The scopes for x and x2 are interleaved, so this is one scope with two values
+  const x = makeObject_Primitives();
+  const x2 = makeObject_Primitives();
+  useState(null);
+  identity(x);
+  identity(x2);
+
+  // We create a scope for all call expressions, but prune those with hook calls
+  // in this case it's _just_ a hook call, so we don't count this as pruned
+  const y = useHook();
+
+  const z = [];
+  for (let i = 0; i < 10; i++) {
+    // The scope for obj is pruned bc it's in a loop
+    const obj = makeObject_Primitives();
+    z.push(obj);
+  }
+
+  // Overall we expect two pruned scopes (for x+x2, and obj), with 3 pruned scope values.
+  return <Stringify items={[w, x, x2, y, z]} />;
+}
+
+const Context = createContext();
+
+function Wrapper() {
+  return (
+    <Context value={42}>
+      <Component />
+    </Context>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Wrapper,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly
+import { createContext, use, useState } from "react";
+import {
+  Stringify,
+  identity,
+  makeObject_Primitives,
+  useHook,
+} from "shared-runtime";
+
+function Component() {
+  const $ = _c(6);
+  const w = use(Context);
+
+  const x = makeObject_Primitives();
+  const x2 = makeObject_Primitives();
+  useState(null);
+  identity(x);
+  identity(x2);
+
+  const y = useHook();
+  let z;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    z = [];
+    for (let i = 0; i < 10; i++) {
+      const obj = makeObject_Primitives();
+      z.push(obj);
+    }
+    $[0] = z;
+  } else {
+    z = $[0];
+  }
+  let t0;
+  if ($[1] !== w || $[2] !== x || $[3] !== x2 || $[4] !== y) {
+    t0 = <Stringify items={[w, x, x2, y, z]} />;
+    $[1] = w;
+    $[2] = x;
+    $[3] = x2;
+    $[4] = y;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  return t0;
+}
+
+const Context = createContext();
+
+function Wrapper() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Context value={42}>
+        <Component />
+      </Context>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Wrapper,
+  params: [{}],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":10,"column":0,"index":167},"end":{"line":33,"column":1,"index":911},"filename":"log-pruned-memoization.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":2,"prunedMemoValues":3}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":37,"column":0,"index":947},"end":{"line":43,"column":1,"index":1045},"filename":"log-pruned-memoization.ts"},"fnName":"Wrapper","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) <div>{"items":[42,{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},[{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true},{"a":0,"b":"value1","c":true}]]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.js
new file mode 100644
index 00000000000..42c39d1e71d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/log-pruned-memoization.js
@@ -0,0 +1,48 @@
+// @loggerTestOnly
+import {createContext, use, useState} from 'react';
+import {
+  Stringify,
+  identity,
+  makeObject_Primitives,
+  useHook,
+} from 'shared-runtime';
+
+function Component() {
+  const w = use(Context);
+
+  // The scopes for x and x2 are interleaved, so this is one scope with two values
+  const x = makeObject_Primitives();
+  const x2 = makeObject_Primitives();
+  useState(null);
+  identity(x);
+  identity(x2);
+
+  // We create a scope for all call expressions, but prune those with hook calls
+  // in this case it's _just_ a hook call, so we don't count this as pruned
+  const y = useHook();
+
+  const z = [];
+  for (let i = 0; i < 10; i++) {
+    // The scope for obj is pruned bc it's in a loop
+    const obj = makeObject_Primitives();
+    z.push(obj);
+  }
+
+  // Overall we expect two pruned scopes (for x+x2, and obj), with 3 pruned scope values.
+  return <Stringify items={[w, x, x2, y, z]} />;
+}
+
+const Context = createContext();
+
+function Wrapper() {
+  return (
+    <Context value={42}>
+      <Component />
+    </Context>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Wrapper,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression-object.expect.md
new file mode 100644
index 00000000000..ccd03bd7a46
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression-object.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function component(props) {
+  // The mutable range for a extens the entire body.
+  // commenting out the last line of InferMutableRanges fixes it.
+  // my guess of what's going on is that a is aliased into the return value object literal,
+  // and that alias makes it look like the range of a needs to be extended to that point.
+  // but what's weird is that the end of a's range doesn't quite extend to the object.
+  let a = props.a || (props.b && props.c && props.d);
+  let b = (props.a && props.b && props.c) || props.d;
+  return {a, b};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(props) {
+  const $ = _c(3);
+
+  const a = props.a || (props.b && props.c && props.d);
+  const b = (props.a && props.b && props.c) || props.d;
+  let t0;
+  if ($[0] !== a || $[1] !== b) {
+    t0 = { a, b };
+    $[0] = a;
+    $[1] = b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression-object.js
new file mode 100644
index 00000000000..ed959361045
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression-object.js
@@ -0,0 +1,16 @@
+function component(props) {
+  // The mutable range for a extens the entire body.
+  // commenting out the last line of InferMutableRanges fixes it.
+  // my guess of what's going on is that a is aliased into the return value object literal,
+  // and that alias makes it look like the range of a needs to be extended to that point.
+  // but what's weird is that the end of a's range doesn't quite extend to the object.
+  let a = props.a || (props.b && props.c && props.d);
+  let b = (props.a && props.b && props.c) || props.d;
+  return {a, b};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression.expect.md
new file mode 100644
index 00000000000..1e1e10891d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function component(props) {
+  let a = props.a || (props.b && props.c && props.d);
+  let b = (props.a && props.b && props.c) || props.d;
+  return a ? b : props.c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function component(props) {
+  const a = props.a || (props.b && props.c && props.d);
+  const b = (props.a && props.b && props.c) || props.d;
+  return a ? b : props.c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression.js
new file mode 100644
index 00000000000..a3ab651cc24
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-expression.js
@@ -0,0 +1,11 @@
+function component(props) {
+  let a = props.a || (props.b && props.c && props.d);
+  let b = (props.a && props.b && props.c) || props.d;
+  return a ? b : props.c;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md
new file mode 100644
index 00000000000..f07193ea910
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+//@flow
+
+const foo = undefined;
+
+component C(...{scope = foo ?? null}: any) {
+  return scope;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{scope: undefined}],
+};
+
+```
+
+## Code
+
+```javascript
+const foo = undefined;
+
+function C(t0) {
+  const { scope: t1 } = t0;
+  const scope = t1 === undefined ? (foo ?? null) : t1;
+  return scope;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{ scope: undefined }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js
new file mode 100644
index 00000000000..48b7b1d04f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js
@@ -0,0 +1,12 @@
+//@flow
+
+const foo = undefined;
+
+component C(...{scope = foo ?? null}: any) {
+  return scope;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{scope: undefined}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/loop-unused-let.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/loop-unused-let.expect.md
new file mode 100644
index 00000000000..3ac76347cfd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/loop-unused-let.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+function useFoo() {
+  while (1) {
+    let foo;
+  }
+}
+
+```
+
+## Code
+
+```javascript
+function useFoo() {
+  while (1) {}
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/loop-unused-let.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/loop-unused-let.js
new file mode 100644
index 00000000000..c2c8048010f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/loop-unused-let.js
@@ -0,0 +1,5 @@
+function useFoo() {
+  while (1) {
+    let foo;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-access-hook-guard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-access-hook-guard.expect.md
new file mode 100644
index 00000000000..c6e179a6e7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-access-hook-guard.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess @enableEmitHookGuards
+function App() {
+  const {foo} = useContext(MyContext);
+  const {bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import {
+  $dispatcherGuard,
+  useContext_withSelector,
+} from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess @enableEmitHookGuards
+function App() {
+  const $ = _c(3);
+  try {
+    $dispatcherGuard(0);
+    const { foo } = (function () {
+      try {
+        $dispatcherGuard(2);
+        return useContext_withSelector(MyContext, _temp);
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+    const { bar } = (function () {
+      try {
+        $dispatcherGuard(2);
+        return useContext_withSelector(MyContext, _temp2);
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+    let t0;
+    if ($[0] !== bar || $[1] !== foo) {
+      t0 = <Bar foo={foo} bar={bar} />;
+      $[0] = bar;
+      $[1] = foo;
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    return t0;
+  } finally {
+    $dispatcherGuard(1);
+  }
+}
+function _temp2(t0) {
+  return [t0.bar];
+}
+function _temp(t0) {
+  return [t0.foo];
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-access-hook-guard.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-access-hook-guard.js
new file mode 100644
index 00000000000..da881ea124a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-access-hook-guard.js
@@ -0,0 +1,6 @@
+// @lowerContextAccess @enableEmitHookGuards
+function App() {
+  const {foo} = useContext(MyContext);
+  const {bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.expect.md
new file mode 100644
index 00000000000..af9b1df36ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const {foo} = useContext(MyContext);
+  const {bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { useContext_withSelector } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const { foo } = useContext_withSelector(MyContext, _temp);
+  const { bar } = useContext_withSelector(MyContext, _temp2);
+  let t0;
+  if ($[0] !== bar || $[1] !== foo) {
+    t0 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+function _temp2(t0) {
+  return [t0.bar];
+}
+function _temp(t0) {
+  return [t0.foo];
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.js
new file mode 100644
index 00000000000..314ff41c280
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-acess-multiple.js
@@ -0,0 +1,6 @@
+// @lowerContextAccess
+function App() {
+  const {foo} = useContext(MyContext);
+  const {bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.expect.md
new file mode 100644
index 00000000000..d13682467b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const {foo, bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { useContext_withSelector } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const { foo, bar } = useContext_withSelector(MyContext, _temp);
+  let t0;
+  if ($[0] !== bar || $[1] !== foo) {
+    t0 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+function _temp(t0) {
+  return [t0.foo, t0.bar];
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.js
new file mode 100644
index 00000000000..0d53548e67c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/lower-context-selector-simple.js
@@ -0,0 +1,5 @@
+// @lowerContextAccess
+function App() {
+  const {foo, bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/maybe-mutate-object-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/maybe-mutate-object-in-callback.expect.md
new file mode 100644
index 00000000000..a8069809b66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/maybe-mutate-object-in-callback.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function Component(props) {
+  const object = {};
+  // We optimistically assume function calls within callbacks don't mutate (unless the function
+  // is known to be called during render), so this should get memoized
+  const onClick = () => {
+    mutate(object);
+  };
+  return <Foo callback={onClick}>{props.children}</Foo>;
+}
+
+function Foo({children}) {
+  return children;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const object = {};
+    t0 = () => {
+      mutate(object);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] !== props.children) {
+    t1 = <Foo callback={onClick}>{props.children}</Foo>;
+    $[1] = props.children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Foo(t0) {
+  const { children } = t0;
+  return children;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ children: <div>Hello</div> }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/maybe-mutate-object-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/maybe-mutate-object-in-callback.js
new file mode 100644
index 00000000000..6bd738b85cd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/maybe-mutate-object-in-callback.js
@@ -0,0 +1,20 @@
+const {mutate} = require('shared-runtime');
+
+function Component(props) {
+  const object = {};
+  // We optimistically assume function calls within callbacks don't mutate (unless the function
+  // is known to be called during render), so this should get memoized
+  const onClick = () => {
+    mutate(object);
+  };
+  return <Foo callback={onClick}>{props.children}</Foo>;
+}
+
+function Foo({children}) {
+  return children;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mege-consecutive-scopes-dont-merge-with-different-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mege-consecutive-scopes-dont-merge-with-different-deps.expect.md
new file mode 100644
index 00000000000..2b6ae620f5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mege-consecutive-scopes-dont-merge-with-different-deps.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+const {getNumber, identity} = require('shared-runtime');
+
+function Component(props) {
+  // Two scopes: one for `getNumber()`, one for the object literal.
+  // Neither has dependencies so they should merge
+  return {a: getNumber(), b: identity(props.id), c: ['static']};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { getNumber, identity } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = getNumber();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.id) {
+    t1 = identity(props.id);
+    $[1] = props.id;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = ["static"];
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1) {
+    t3 = { a: t0, b: t1, c: t2 };
+    $[4] = t1;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":4,"b":42,"c":["static"]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mege-consecutive-scopes-dont-merge-with-different-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mege-consecutive-scopes-dont-merge-with-different-deps.js
new file mode 100644
index 00000000000..35b582cacec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mege-consecutive-scopes-dont-merge-with-different-deps.js
@@ -0,0 +1,12 @@
+const {getNumber, identity} = require('shared-runtime');
+
+function Component(props) {
+  // Two scopes: one for `getNumber()`, one for the object literal.
+  // Neither has dependencies so they should merge
+  return {a: getNumber(), b: identity(props.id), c: ['static']};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md
new file mode 100644
index 00000000000..6588b336b0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+//@flow
+
+component Foo() {
+  let x = {a: 1};
+  x.a++;
+  x.a--;
+  console.log(++x.a);
+  console.log(x.a++);
+
+  console.log(x.a);
+  let y = x.a++;
+  console.log(y);
+  console.log(x.a);
+
+  console.log((++x.a).toString(), (x.a++).toString(), x.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Foo() {
+  const x = { a: 1 };
+  x.a = x.a + 1;
+  x.a = x.a - 1;
+  console.log((x.a = x.a + 1));
+  const t0 = x.a;
+  x.a = t0 + 1;
+  console.log(t0);
+
+  console.log(x.a);
+  const t1 = x.a;
+  x.a = t1 + 1;
+  const y = t1;
+  console.log(y);
+  console.log(x.a);
+
+  const t2 = (x.a = x.a + 1).toString();
+  const t3 = x.a;
+  x.a = t3 + 1;
+  console.log(t2, t3.toString(), x.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: [2,2,3,3,4,'5','5',6]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js
new file mode 100644
index 00000000000..1a662a39ac0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js
@@ -0,0 +1,21 @@
+//@flow
+
+component Foo() {
+  let x = {a: 1};
+  x.a++;
+  x.a--;
+  console.log(++x.a);
+  console.log(x.a++);
+
+  console.log(x.a);
+  let y = x.a++;
+  console.log(y);
+  console.log(x.a);
+
+  console.log((++x.a).toString(), (x.a++).toString(), x.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoization-comments.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoization-comments.expect.md
new file mode 100644
index 00000000000..eae0b280f02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoization-comments.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+// @enableMemoizationComments
+import {addOne, getNumber, identity} from 'shared-runtime';
+
+function Component(props) {
+  const x = identity(props.a);
+  const y = addOne(x);
+  const z = identity(props.b);
+  return [x, y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 10}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableMemoizationComments
+import { addOne, getNumber, identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(9);
+  let t0;
+  let x; // "useMemo" for t0 and x:
+  // check if props.a changed
+  if ($[0] !== props.a) {
+    // Inputs changed, recompute
+    x = identity(props.a);
+    t0 = addOne(x);
+    $[0] = props.a;
+    $[1] = t0;
+    $[2] = x;
+  } else {
+    // Inputs did not change, use cached value
+    t0 = $[1];
+    x = $[2];
+  }
+  const y = t0;
+  let t1; // "useMemo" for t1:
+  // check if props.b changed
+  if ($[3] !== props.b) {
+    // Inputs changed, recompute
+    t1 = identity(props.b);
+    $[3] = props.b;
+    $[4] = t1;
+  } else {
+    // Inputs did not change, use cached value
+    t1 = $[4];
+  }
+  const z = t1;
+  let t2; // "useMemo" for t2:
+  // check if x, y, or z changed
+  if ($[5] !== x || $[6] !== y || $[7] !== z) {
+    // Inputs changed, recompute
+    t2 = [x, y, z];
+    $[5] = x;
+    $[6] = y;
+    $[7] = z;
+    $[8] = t2;
+  } else {
+    // Inputs did not change, use cached value
+    t2 = $[8];
+  }
+  return t2;
+}
+export const FIXTURE_ENTRYPOINT = { fn: Component, params: [{ a: 1, b: 10 }] };
+
+```
+      
+### Eval output
+(kind: ok) [1,2,10]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoization-comments.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoization-comments.js
new file mode 100644
index 00000000000..d35993ad053
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoization-comments.js
@@ -0,0 +1,14 @@
+// @enableMemoizationComments
+import {addOne, getNumber, identity} from 'shared-runtime';
+
+function Component(props) {
+  const x = identity(props.a);
+  const y = addOne(x);
+  const z = identity(props.b);
+  return [x, y, z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 10}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.expect.md
new file mode 100644
index 00000000000..70e70a26b46
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.expect.md
@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(() => {
+    return makeObject(props.value).value + 1;
+  }, [props.value]);
+  return <ValidateMemoization inputs={[props.value]} output={result} />;
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = makeObject(props.value);
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const result = t0.value + 1;
+  let t1;
+  if ($[2] !== props.value) {
+    t1 = [props.value];
+    $[2] = props.value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== result || $[5] !== t1) {
+    t2 = <ValidateMemoization inputs={t1} output={result} />;
+    $[4] = result;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+function makeObject(value) {
+  console.log(value);
+  return { value };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: 42 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+    { value: 42 },
+    { value: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+<div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+<div>{"inputs":[42],"output":43}</div>
+<div>{"inputs":[3.14],"output":4.140000000000001}</div>
+logs: [42,3.14,42,3.14,42,3.14]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.js
new file mode 100644
index 00000000000..5c7cefb609c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.js
@@ -0,0 +1,30 @@
+// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const result = useMemo(() => {
+    return makeObject(props.value).value + 1;
+  }, [props.value]);
+  return <ValidateMemoization inputs={[props.value]} output={result} />;
+}
+
+function makeObject(value) {
+  console.log(value);
+  return {value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: 42},
+    {value: 42},
+    {value: 3.14},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+    {value: 42},
+    {value: 3.14},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-conditional.expect.md
new file mode 100644
index 00000000000..060a0168bf3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-conditional.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  let x;
+  true ? (x = []) : (x = {});
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    true ? (x = []) : (x = {});
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-conditional.js
new file mode 100644
index 00000000000..2b8b15eec4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-conditional.js
@@ -0,0 +1,10 @@
+function Foo(props) {
+  let x;
+  true ? (x = []) : (x = {});
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical-no-sequence.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical-no-sequence.expect.md
new file mode 100644
index 00000000000..202d84a139a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical-no-sequence.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  let x;
+  true && (x = []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    true && (x = []);
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical-no-sequence.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical-no-sequence.js
new file mode 100644
index 00000000000..643c62ed940
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical-no-sequence.js
@@ -0,0 +1,10 @@
+function Foo(props) {
+  let x;
+  true && (x = []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical.expect.md
new file mode 100644
index 00000000000..e8a869f3103
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  let x;
+  true && ((x = []), null);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    true && ((x = []), null);
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical.js
new file mode 100644
index 00000000000..a55aac86ca2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-logical.js
@@ -0,0 +1,10 @@
+function Foo(props) {
+  let x;
+  true && ((x = []), null);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-sequence.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-sequence.expect.md
new file mode 100644
index 00000000000..11f1abccc89
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-sequence.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  let x;
+  (x = []), null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    (x = []), null;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-sequence.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-sequence.js
new file mode 100644
index 00000000000..5c731aabdf1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-value-block-value-sequence.js
@@ -0,0 +1,10 @@
+function Foo(props) {
+  let x;
+  (x = []), null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-nested-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-nested-scopes.expect.md
new file mode 100644
index 00000000000..e1b723b1b0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-nested-scopes.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+const {getNumber} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  // Two scopes: one for `getNumber()`, one for the object literal.
+  // Neither has dependencies so they should merge
+  if (props.cond) {
+    x = {session_id: getNumber()};
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { getNumber } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(1);
+  let x;
+
+  if (props.cond) {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = { session_id: getNumber() };
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    x = t0;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"session_id":4}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-nested-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-nested-scopes.js
new file mode 100644
index 00000000000..b5f96b781ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-nested-scopes.js
@@ -0,0 +1,16 @@
+const {getNumber} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  // Two scopes: one for `getNumber()`, one for the object literal.
+  // Neither has dependencies so they should merge
+  if (props.cond) {
+    x = {session_id: getNumber()};
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-deps-subset-of-decls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-deps-subset-of-decls.expect.md
new file mode 100644
index 00000000000..87175b3ec63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-deps-subset-of-decls.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+
+function Component() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>Decrement</button>
+      {/**
+       * The scope for the <button> depends on just the scope for the callback,
+       * but the previous scope (after merging) will declare both the above
+       * <button> and the callback.
+       */}
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+
+function Component() {
+  const $ = _c(2);
+  const [count, setCount] = useState(0);
+  let t0;
+  if ($[0] !== count) {
+    t0 = (
+      <div>
+        <button onClick={() => setCount(count - 1)}>Decrement</button>
+
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+    );
+    $[0] = count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><button>Decrement</button><button>Increment</button></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-deps-subset-of-decls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-deps-subset-of-decls.js
new file mode 100644
index 00000000000..0eb93a2a460
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-deps-subset-of-decls.js
@@ -0,0 +1,21 @@
+import {useState} from 'react';
+
+function Component() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>Decrement</button>
+      {/**
+       * The scope for the <button> depends on just the scope for the callback,
+       * but the previous scope (after merging) will declare both the above
+       * <button> and the callback.
+       */}
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-no-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-no-deps.expect.md
new file mode 100644
index 00000000000..a1f70cea197
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-no-deps.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+const {getNumber} = require('shared-runtime');
+
+function Component(props) {
+  // Two scopes: one for `getNumber()`, one for the object literal.
+  // Neither has dependencies so they should merge
+  return {session_id: getNumber()};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { getNumber } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { session_id: getNumber() };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"session_id":4}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-no-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-no-deps.js
new file mode 100644
index 00000000000..9d63fc8165a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-no-deps.js
@@ -0,0 +1,12 @@
+const {getNumber} = require('shared-runtime');
+
+function Component(props) {
+  // Two scopes: one for `getNumber()`, one for the object literal.
+  // Neither has dependencies so they should merge
+  return {session_id: getNumber()};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-objects.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-objects.expect.md
new file mode 100644
index 00000000000..d31d366b1e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-objects.expect.md
@@ -0,0 +1,110 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// This is a translation of the original merge-consecutive-scopes which uses plain objects
+// to describe the UI instead of JSX. The JSXText elements in that fixture happen to
+// prevent scome scopes from merging, which concealed a bug with the merging logic.
+// By avoiding JSX we eliminate extraneous instructions and more accurately test the merging.
+function Component(props) {
+  let [state, setState] = useState(0);
+  return [
+    {component: Stringify, props: {text: 'Counter'}},
+    {component: 'span', props: {children: [state]}},
+    {
+      component: 'button',
+      props: {
+        'data-testid': 'button',
+        onClick: () => setState(state + 1),
+        children: ['increment'],
+      },
+    },
+  ];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Stringify } from "shared-runtime";
+
+// This is a translation of the original merge-consecutive-scopes which uses plain objects
+// to describe the UI instead of JSX. The JSXText elements in that fixture happen to
+// prevent scome scopes from merging, which concealed a bug with the merging logic.
+// By avoiding JSX we eliminate extraneous instructions and more accurately test the merging.
+function Component(props) {
+  const $ = _c(11);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { component: Stringify, props: { text: "Counter" } };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== state) {
+    t1 = { component: "span", props: { children: [state] } };
+    $[1] = state;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== state) {
+    t2 = () => setState(state + 1);
+    $[3] = state;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = ["increment"];
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2) {
+    t4 = {
+      component: "button",
+      props: { "data-testid": "button", onClick: t2, children: t3 },
+    };
+    $[6] = t2;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t1 || $[9] !== t4) {
+    t5 = [t0, t1, t4];
+    $[8] = t1;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"component":"[[ function params=1 ]]","props":{"text":"Counter"}},{"component":"span","props":{"children":[0]}},{"component":"button","props":{"data-testid":"button","onClick":"[[ function params=0 ]]","children":["increment"]}}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-objects.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-objects.js
new file mode 100644
index 00000000000..c229d6b480a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-objects.js
@@ -0,0 +1,27 @@
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// This is a translation of the original merge-consecutive-scopes which uses plain objects
+// to describe the UI instead of JSX. The JSXText elements in that fixture happen to
+// prevent scome scopes from merging, which concealed a bug with the merging logic.
+// By avoiding JSX we eliminate extraneous instructions and more accurately test the merging.
+function Component(props) {
+  let [state, setState] = useState(0);
+  return [
+    {component: Stringify, props: {text: 'Counter'}},
+    {component: 'span', props: {children: [state]}},
+    {
+      component: 'button',
+      props: {
+        'data-testid': 'button',
+        onClick: () => setState(state + 1),
+        children: ['increment'],
+      },
+    },
+  ];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-reordering.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-reordering.expect.md
new file mode 100644
index 00000000000..e5a9081137a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-reordering.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+// @enableInstructionReordering
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  let [state, setState] = useState(0);
+  return (
+    <div>
+      <Stringify text="Counter" />
+      <span>{state}</span>
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableInstructionReordering
+import { useState } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component() {
+  const $ = _c(7);
+  const [state, setState] = useState(0);
+  let t0;
+  let t1;
+  if ($[0] !== state) {
+    t0 = (
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    );
+    t1 = <span>{state}</span>;
+    $[0] = state;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <Stringify text="Counter" />;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t0 || $[5] !== t1) {
+    t3 = (
+      <div>
+        {t2}
+        {t1}
+        {t0}
+      </div>
+    );
+    $[4] = t0;
+    $[5] = t1;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"text":"Counter"}</div><span>0</span><button data-testid="button">increment</button></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-reordering.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-reordering.js
new file mode 100644
index 00000000000..137c161b247
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes-reordering.js
@@ -0,0 +1,21 @@
+// @enableInstructionReordering
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  let [state, setState] = useState(0);
+  return (
+    <div>
+      <Stringify text="Counter" />
+      <span>{state}</span>
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md
new file mode 100644
index 00000000000..2e246c0e1c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  let [state, setState] = useState(0);
+  return (
+    <div>
+      <Stringify text="Counter" />
+      <span>{state}</span>
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component() {
+  const $ = _c(8);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify text="Counter" />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== state) {
+    t1 = <span>{state}</span>;
+    $[1] = state;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== state) {
+    t2 = (
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    );
+    $[3] = state;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = (
+      <div>
+        {t0}
+        {t1}
+        {t2}
+      </div>
+    );
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"text":"Counter"}</div><span>0</span><button data-testid="button">increment</button></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.js
new file mode 100644
index 00000000000..b0a72c2a389
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.js
@@ -0,0 +1,20 @@
+import {useState} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component() {
+  let [state, setState] = useState(0);
+  return (
+    <div>
+      <Stringify text="Counter" />
+      <span>{state}</span>
+      <button data-testid="button" onClick={() => setState(state + 1)}>
+        increment
+      </button>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md
new file mode 100644
index 00000000000..717c9a18599
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {setProperty} from 'shared-runtime';
+
+function Component(props) {
+  // start of scope for y, depend on props.a
+  let y = {};
+
+  // nested scope for x, dependent on props.a
+  const x = {};
+  setProperty(x, props.a);
+  // end of scope for x
+
+  y.a = props.a;
+  y.x = x;
+  // end of scope for y
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { setProperty } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== props.a) {
+    y = {};
+
+    const x = {};
+    setProperty(x, props.a);
+
+    y.a = props.a;
+    y.x = x;
+    $[0] = props.a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":42,"x":{"wat0":42}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.js
new file mode 100644
index 00000000000..39db609334d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.js
@@ -0,0 +1,22 @@
+import {setProperty} from 'shared-runtime';
+
+function Component(props) {
+  // start of scope for y, depend on props.a
+  let y = {};
+
+  // nested scope for x, dependent on props.a
+  const x = {};
+  setProperty(x, props.a);
+  // end of scope for x
+
+  y.a = props.a;
+  y.x = x;
+  // end of scope for y
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md
new file mode 100644
index 00000000000..0ff9773f76e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @enableInstructionReordering
+import {useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const onClick = () => {
+    setState(s => s + 1);
+  };
+  return (
+    <>
+      <span>Count: {state}</span>
+      <button onClick={onClick}>Increment</button>
+    </>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableInstructionReordering
+import { useState } from "react";
+
+function Component() {
+  const $ = _c(4);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <button onClick={onClick}>Increment</button>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== state) {
+    t2 = (
+      <>
+        <span>Count: {state}</span>
+        {t1}
+      </>
+    );
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(s) {
+  return s + 1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js
new file mode 100644
index 00000000000..33dfe347119
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.js
@@ -0,0 +1,15 @@
+// @enableInstructionReordering
+import {useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const onClick = () => {
+    setState(s => s + 1);
+  };
+  return (
+    <>
+      <span>Count: {state}</span>
+      <button onClick={onClick}>Increment</button>
+    </>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md
new file mode 100644
index 00000000000..c913995a5e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @validateMemoizedEffectDependencies
+
+import {useEffect} from 'react';
+
+function Component(props) {
+  const y = [[props.value]]; // merged w scope for inner array
+
+  useEffect(() => {
+    console.log(y);
+  }, [y]); // should still be a valid dependency here
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateMemoizedEffectDependencies
+
+import { useEffect } from "react";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = [[props.value]];
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const y = t0;
+  let t1;
+  let t2;
+  if ($[2] !== y) {
+    t1 = () => {
+      console.log(y);
+    };
+    t2 = [y];
+    $[2] = y;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [[42]]
+logs: [[ [ 42 ] ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.js
new file mode 100644
index 00000000000..1ede9dd4ccc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.js
@@ -0,0 +1,19 @@
+// @validateMemoizedEffectDependencies
+
+import {useEffect} from 'react';
+
+function Component(props) {
+  const y = [[props.value]]; // merged w scope for inner array
+
+  useEffect(() => {
+    console.log(y);
+  }, [y]); // should still be a valid dependency here
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md
new file mode 100644
index 00000000000..08a3ccb87f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enableAssumeHooksFollowRulesOfReact:false @customMacros:"cx"
+import {identity} from 'shared-runtime';
+
+const DARK = 'dark';
+
+function Component() {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx({
+        'styles/light': true,
+        'styles/dark': theme.getTheme() === DARK,
+      })}
+    />
+  );
+}
+
+function cx(obj) {
+  const classes = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (value) {
+      classes.push(key);
+    }
+  }
+  return classes.join(' ');
+}
+
+function useTheme() {
+  return {
+    getTheme() {
+      return DARK;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enableAssumeHooksFollowRulesOfReact:false @customMacros:"cx"
+import { identity } from "shared-runtime";
+
+const DARK = "dark";
+
+function Component() {
+  const $ = _c(2);
+  const theme = useTheme();
+
+  const t0 = cx({
+    "styles/light": true,
+    "styles/dark": theme.getTheme() === DARK,
+  });
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <div className={t0} />;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function cx(obj) {
+  const classes = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (value) {
+      classes.push(key);
+    }
+  }
+  return classes.join(" ");
+}
+
+function useTheme() {
+  return {
+    getTheme() {
+      return DARK;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="styles/light styles/dark"></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.js
new file mode 100644
index 00000000000..c72f6937544
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.js
@@ -0,0 +1,39 @@
+// @compilationMode:"infer" @enableAssumeHooksFollowRulesOfReact:false @customMacros:"cx"
+import {identity} from 'shared-runtime';
+
+const DARK = 'dark';
+
+function Component() {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx({
+        'styles/light': true,
+        'styles/dark': theme.getTheme() === DARK,
+      })}
+    />
+  );
+}
+
+function cx(obj) {
+  const classes = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (value) {
+      classes.push(key);
+    }
+  }
+  return classes.join(' ');
+}
+
+function useTheme() {
+  return {
+    getTheme() {
+      return DARK;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-assigned-to-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-assigned-to-temporary.expect.md
new file mode 100644
index 00000000000..c99b05a1133
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-assigned-to-temporary.expect.md
@@ -0,0 +1,104 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer" @enableAssumeHooksFollowRulesOfReact:false @customMacros(cx)
+import {identity} from 'shared-runtime';
+
+const DARK = 'dark';
+
+function Component() {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx.foo({
+        'styles/light': true,
+        'styles/dark': identity([theme.getTheme()]),
+      })}
+    />
+  );
+}
+
+const cx = {
+  foo(obj) {
+    const classes = [];
+    for (const [key, value] of Object.entries(obj)) {
+      if (value) {
+        classes.push(key);
+      }
+    }
+    return classes.join(' ');
+  },
+};
+
+function useTheme() {
+  return {
+    getTheme() {
+      return DARK;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enableAssumeHooksFollowRulesOfReact:false @customMacros(cx)
+import { identity } from "shared-runtime";
+
+const DARK = "dark";
+
+function Component() {
+  const $ = _c(2);
+  const theme = useTheme();
+
+  const t0 = cx.foo({
+    "styles/light": true,
+    "styles/dark": identity([theme.getTheme()]),
+  });
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <div className={t0} />;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+const cx = {
+  foo(obj) {
+    const classes = [];
+    for (const [key, value] of Object.entries(obj)) {
+      if (value) {
+        classes.push(key);
+      }
+    }
+    return classes.join(" ");
+  },
+};
+
+function useTheme() {
+  return {
+    getTheme() {
+      return DARK;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="styles/light styles/dark"></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-assigned-to-temporary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-assigned-to-temporary.js
new file mode 100644
index 00000000000..4254c5a4428
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-assigned-to-temporary.js
@@ -0,0 +1,41 @@
+// @compilationMode:"infer" @enableAssumeHooksFollowRulesOfReact:false @customMacros(cx)
+import {identity} from 'shared-runtime';
+
+const DARK = 'dark';
+
+function Component() {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx.foo({
+        'styles/light': true,
+        'styles/dark': identity([theme.getTheme()]),
+      })}
+    />
+  );
+}
+
+const cx = {
+  foo(obj) {
+    const classes = [];
+    for (const [key, value] of Object.entries(obj)) {
+      if (value) {
+        classes.push(key);
+      }
+    }
+    return classes.join(' ');
+  },
+};
+
+function useTheme() {
+  return {
+    getTheme() {
+      return DARK;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-nesting.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-nesting.expect.md
new file mode 100644
index 00000000000..90de08f3335
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-nesting.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+import {makeArray} from 'shared-runtime';
+
+function Component() {
+  const items = makeArray('foo', 'bar', '', null, 'baz', false, 'merp');
+  const classname = cx.namespace(...items.filter(isNonEmptyString));
+  return <div className={classname}>Ok</div>;
+}
+
+function isNonEmptyString(s) {
+  return typeof s === 'string' && s.trim().length !== 0;
+}
+
+const cx = {
+  namespace(...items) {
+    return items.join(' ');
+  },
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+import { makeArray } from "shared-runtime";
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const items = makeArray("foo", "bar", "", null, "baz", false, "merp");
+    const classname = cx.namespace(...items.filter(isNonEmptyString));
+    t0 = <div className={classname}>Ok</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function isNonEmptyString(s) {
+  return typeof s === "string" && s.trim().length !== 0;
+}
+
+const cx = {
+  namespace(...items) {
+    return items.join(" ");
+  },
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="foo bar baz merp">Ok</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-nesting.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-nesting.js
new file mode 100644
index 00000000000..41aebae7e33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-namespace-nesting.js
@@ -0,0 +1,23 @@
+// @compilationMode:"infer"
+import {makeArray} from 'shared-runtime';
+
+function Component() {
+  const items = makeArray('foo', 'bar', '', null, 'baz', false, 'merp');
+  const classname = cx.namespace(...items.filter(isNonEmptyString));
+  return <div className={classname}>Ok</div>;
+}
+
+function isNonEmptyString(s) {
+  return typeof s === 'string' && s.trim().length !== 0;
+}
+
+const cx = {
+  namespace(...items) {
+    return items.join(' ');
+  },
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.expect.md
new file mode 100644
index 00000000000..32de57f8a05
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+function a() {
+  return import.meta.url;
+}
+
+function b() {
+  let a = 0;
+  if (import.meta.url) {
+    a = 1;
+  }
+  return a;
+}
+
+function c() {
+  let a = 0;
+  if (import.meta.foo) {
+    a = 1;
+  }
+  return a;
+}
+
+function d() {
+  let a = 0;
+  if (import.meta) {
+    a = 1;
+  }
+  return a;
+}
+
+```
+
+## Code
+
+```javascript
+function a() {
+  return import.meta.url;
+}
+
+function b() {
+  let a = 0;
+  if (import.meta.url) {
+    a = 1;
+  }
+  return a;
+}
+
+function c() {
+  let a = 0;
+  if (import.meta.foo) {
+    a = 1;
+  }
+  return a;
+}
+
+function d() {
+  let a = 0;
+  if (import.meta) {
+    a = 1;
+  }
+  return a;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.mjs b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.mjs
new file mode 100644
index 00000000000..3f387b2699f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.mjs
@@ -0,0 +1,27 @@
+function a() {
+  return import.meta.url;
+}
+
+function b() {
+  let a = 0;
+  if (import.meta.url) {
+    a = 1;
+  }
+  return a;
+}
+
+function c() {
+  let a = 0;
+  if (import.meta.foo) {
+    a = 1;
+  }
+  return a;
+}
+
+function d() {
+  let a = 0;
+  if (import.meta) {
+    a = 1;
+  }
+  return a;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md
new file mode 100644
index 00000000000..2fc302c8b42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  // Construct and freeze x, y
+  const x = makeObject(a);
+  const y = makeObject(a);
+  <div>
+    {x}
+    {y}
+  </div>;
+
+  // z should depend on `x`, `y.method`, and `b`
+  const z = x[y.method](b);
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(8);
+  let t0;
+  if ($[0] !== a) {
+    t0 = makeObject(a);
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== a) {
+    t1 = makeObject(a);
+    $[2] = a;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const y = t1;
+  let t2;
+  if ($[4] !== b || $[5] !== x || $[6] !== y.method) {
+    t2 = x[y.method](b);
+    $[4] = b;
+    $[5] = x;
+    $[6] = y.method;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const z = t2;
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.js
new file mode 100644
index 00000000000..5aaf78027ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.js
@@ -0,0 +1,13 @@
+function foo(a, b, c) {
+  // Construct and freeze x, y
+  const x = makeObject(a);
+  const y = makeObject(a);
+  <div>
+    {x}
+    {y}
+  </div>;
+
+  // z should depend on `x`, `y.method`, and `b`
+  const z = x[y.method](b);
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md
new file mode 100644
index 00000000000..58c06101d38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  // Construct and freeze x
+  const x = makeObject(a);
+  <div>{x}</div>;
+
+  // y should depend on `x` and `b`
+  const method = x.method;
+  const y = method.call(x, b);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== a) {
+    t0 = makeObject(a);
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+
+  const method = x.method;
+  let t1;
+  if ($[2] !== b || $[3] !== method || $[4] !== x) {
+    t1 = method.call(x, b);
+    $[2] = b;
+    $[3] = method;
+    $[4] = x;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const y = t1;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.js
new file mode 100644
index 00000000000..5289caae269
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.js
@@ -0,0 +1,10 @@
+function foo(a, b, c) {
+  // Construct and freeze x
+  const x = makeObject(a);
+  <div>{x}</div>;
+
+  // y should depend on `x` and `b`
+  const method = x.method;
+  const y = method.call(x, b);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md
new file mode 100644
index 00000000000..fd8a4935a82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {addOne, shallowCopy} from 'shared-runtime';
+
+function foo(a, b, c) {
+  // Construct and freeze x
+  const x = shallowCopy(a);
+  <div>{x}</div>;
+
+  // y should depend on `x` and `b`
+  const y = x.foo(b);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{foo: addOne}, 3],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { addOne, shallowCopy } from "shared-runtime";
+
+function foo(a, b, c) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== a) {
+    t0 = shallowCopy(a);
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== b || $[3] !== x) {
+    t1 = x.foo(b);
+    $[2] = b;
+    $[3] = x;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const y = t1;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{ foo: addOne }, 3],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 4
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.js
new file mode 100644
index 00000000000..b106b95a984
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.js
@@ -0,0 +1,17 @@
+import {addOne, shallowCopy} from 'shared-runtime';
+
+function foo(a, b, c) {
+  // Construct and freeze x
+  const x = shallowCopy(a);
+  <div>{x}</div>;
+
+  // y should depend on `x` and `b`
+  const y = x.foo(b);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{foo: addOne}, 3],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.expect.md
new file mode 100644
index 00000000000..6dd05cbe7c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.expect.md
@@ -0,0 +1,155 @@
+
+## Input
+
+```javascript
+import {
+  arrayPush,
+  identity,
+  makeArray,
+  Stringify,
+  useFragment,
+} from 'shared-runtime';
+
+/**
+ * Bug repro showing why it's invalid for function references to be annotated
+ * with a `Read` effect when that reference might lead to the function being
+ * invoked.
+ *
+ * Note that currently, `Array.map` is annotated to have `Read` effects on its
+ * operands. This is incorrect as function effects must be replayed when `map`
+ * is called
+ * - Read:                non-aliasing data dependency
+ * - Capture:             maybe-aliasing data dependency
+ * - ConditionallyMutate: maybe-aliasing data dependency; maybe-write / invoke
+ *     but only if the value is mutable
+ *
+ * Invalid evaluator result: Found differences in evaluator results Non-forget
+ * (expected): (kind: ok)
+ *   <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+ *   <div>{"x":[2,2,2],"count":4}</div><div>{"item":1}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+ *   <div>{"x":[2,2,2,2,2,2],"count":4}</div><div>{"item":1}</div>
+ */
+
+function Component({extraJsx}) {
+  const x = makeArray();
+  const items = useFragment();
+  // This closure has the following effects that must be replayed:
+  //   - MaybeFreeze / Capture of `items`
+  //   - ConditionalMutate of x
+  const jsx = items.a.map((item, i) => {
+    arrayPush(x, 2);
+    return <Stringify item={item} key={i} />;
+  });
+  const offset = jsx.length;
+  for (let i = 0; i < extraJsx; i++) {
+    jsx.push(<Stringify item={0} key={i + offset} />);
+  }
+  const count = jsx.length;
+  identity(count);
+  return (
+    <>
+      <Stringify x={x} count={count} />
+      {jsx[0]}
+    </>
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{extraJsx: 0}],
+  sequentialRenders: [{extraJsx: 0}, {extraJsx: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  arrayPush,
+  identity,
+  makeArray,
+  Stringify,
+  useFragment,
+} from "shared-runtime";
+
+/**
+ * Bug repro showing why it's invalid for function references to be annotated
+ * with a `Read` effect when that reference might lead to the function being
+ * invoked.
+ *
+ * Note that currently, `Array.map` is annotated to have `Read` effects on its
+ * operands. This is incorrect as function effects must be replayed when `map`
+ * is called
+ * - Read:                non-aliasing data dependency
+ * - Capture:             maybe-aliasing data dependency
+ * - ConditionallyMutate: maybe-aliasing data dependency; maybe-write / invoke
+ *     but only if the value is mutable
+ *
+ * Invalid evaluator result: Found differences in evaluator results Non-forget
+ * (expected): (kind: ok)
+ *   <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+ *   <div>{"x":[2,2,2],"count":4}</div><div>{"item":1}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+ *   <div>{"x":[2,2,2,2,2,2],"count":4}</div><div>{"item":1}</div>
+ */
+
+function Component(t0) {
+  const $ = _c(6);
+  const { extraJsx } = t0;
+  const x = makeArray();
+  const items = useFragment();
+
+  const jsx = items.a.map((item, i) => {
+    arrayPush(x, 2);
+    return <Stringify item={item} key={i} />;
+  });
+  const offset = jsx.length;
+  for (let i_0 = 0; i_0 < extraJsx; i_0++) {
+    jsx.push(<Stringify item={0} key={i_0 + offset} />);
+  }
+
+  const count = jsx.length;
+  identity(count);
+  let t1;
+  if ($[0] !== count || $[1] !== x) {
+    t1 = <Stringify x={x} count={count} />;
+    $[0] = count;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== jsx[0] || $[4] !== t1) {
+    t2 = (
+      <>
+        {t1}
+        {jsx[0]}
+      </>
+    );
+    $[3] = jsx[0];
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ extraJsx: 0 }],
+  sequentialRenders: [{ extraJsx: 0 }, { extraJsx: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+<div>{"x":[2,2,2],"count":4}</div><div>{"item":1}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.js
new file mode 100644
index 00000000000..858a4ab3dc6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.js
@@ -0,0 +1,59 @@
+import {
+  arrayPush,
+  identity,
+  makeArray,
+  Stringify,
+  useFragment,
+} from 'shared-runtime';
+
+/**
+ * Bug repro showing why it's invalid for function references to be annotated
+ * with a `Read` effect when that reference might lead to the function being
+ * invoked.
+ *
+ * Note that currently, `Array.map` is annotated to have `Read` effects on its
+ * operands. This is incorrect as function effects must be replayed when `map`
+ * is called
+ * - Read:                non-aliasing data dependency
+ * - Capture:             maybe-aliasing data dependency
+ * - ConditionallyMutate: maybe-aliasing data dependency; maybe-write / invoke
+ *     but only if the value is mutable
+ *
+ * Invalid evaluator result: Found differences in evaluator results Non-forget
+ * (expected): (kind: ok)
+ *   <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+ *   <div>{"x":[2,2,2],"count":4}</div><div>{"item":1}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"x":[2,2,2],"count":3}</div><div>{"item":1}</div>
+ *   <div>{"x":[2,2,2,2,2,2],"count":4}</div><div>{"item":1}</div>
+ */
+
+function Component({extraJsx}) {
+  const x = makeArray();
+  const items = useFragment();
+  // This closure has the following effects that must be replayed:
+  //   - MaybeFreeze / Capture of `items`
+  //   - ConditionalMutate of x
+  const jsx = items.a.map((item, i) => {
+    arrayPush(x, 2);
+    return <Stringify item={item} key={i} />;
+  });
+  const offset = jsx.length;
+  for (let i = 0; i < extraJsx; i++) {
+    jsx.push(<Stringify item={0} key={i + offset} />);
+  }
+  const count = jsx.length;
+  identity(count);
+  return (
+    <>
+      <Stringify x={x} count={count} />
+      {jsx[0]}
+    </>
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{extraJsx: 0}],
+  sequentialRenders: [{extraJsx: 0}, {extraJsx: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/module-scoped-bindings.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/module-scoped-bindings.expect.md
new file mode 100644
index 00000000000..8e96f49417b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/module-scoped-bindings.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+import React from 'react';
+import {useState} from 'react';
+
+const CONST = true;
+
+let NON_REASSIGNED_LET = true;
+
+let REASSIGNED_LET = false;
+REASSIGNED_LET = true;
+
+function reassignedFunction() {}
+reassignedFunction = true;
+
+function nonReassignedFunction() {}
+
+class ReassignedClass {}
+ReassignedClass = true;
+
+class NonReassignedClass {}
+
+function Component() {
+  const [state] = useState(null);
+  return [
+    React,
+    state,
+    CONST,
+    NON_REASSIGNED_LET,
+    REASSIGNED_LET,
+    reassignedFunction,
+    nonReassignedFunction,
+    ReassignedClass,
+    NonReassignedClass,
+  ];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import React from "react";
+import { useState } from "react";
+
+const CONST = true;
+
+let NON_REASSIGNED_LET = true;
+
+let REASSIGNED_LET = false;
+REASSIGNED_LET = true;
+
+function reassignedFunction() {}
+reassignedFunction = true;
+
+function nonReassignedFunction() {}
+
+class ReassignedClass {}
+ReassignedClass = true;
+
+class NonReassignedClass {}
+
+function Component() {
+  const $ = _c(2);
+  const [state] = useState(null);
+  let t0;
+  if ($[0] !== state) {
+    t0 = [
+      React,
+      state,
+      CONST,
+      NON_REASSIGNED_LET,
+      REASSIGNED_LET,
+      reassignedFunction,
+      nonReassignedFunction,
+      ReassignedClass,
+      NonReassignedClass,
+    ];
+    $[0] = state;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"Children":{"map":"[[ function params=3 ]]","forEach":"[[ function params=3 ]]","count":"[[ function params=1 ]]","toArray":"[[ function params=1 ]]","only":"[[ function params=1 ]]"},"Component":"[[ function params=3 ]]","PureComponent":"[[ function params=3 ]]","__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE":{"H":{"readContext":"[[ function params=1 ]]","use":"[[ function params=1 ]]","useCallback":"[[ function params=2 ]]","useContext":"[[ function params=1 ]]","useEffect":"[[ function params=2 ]]","useImperativeHandle":"[[ function params=3 ]]","useInsertionEffect":"[[ function params=2 ]]","useLayoutEffect":"[[ function params=2 ]]","useMemo":"[[ function params=2 ]]","useReducer":"[[ function params=3 ]]","useRef":"[[ function params=1 ]]","useState":"[[ function params=1 ]]","useDebugValue":"[[ function params=0 ]]","useDeferredValue":"[[ function params=2 ]]","useTransition":"[[ function params=0 ]]","useSyncExternalStore":"[[ function params=3 ]]","useId":"[[ function params=0 ]]","useCacheRefresh":"[[ function params=0 ]]","useMemoCache":"[[ function params=1 ]]","useEffectEvent":"[[ function params=1 ]]","useHostTransitionStatus":"[[ function params=0 ]]","useFormState":"[[ function params=2 ]]","useActionState":"[[ function params=2 ]]","useOptimistic":"[[ function params=1 ]]"},"A":{"getCacheForType":"[[ function params=1 ]]","getOwner":"[[ function params=0 ]]"},"T":null,"S":"[[ function params=2 ]]","actQueue":["[[ function params=0 ]]","[[ function params=1 ]]"],"isBatchingLegacy":false,"didScheduleLegacyUpdate":false,"didUsePromise":false,"thrownErrors":[],"getCurrentStack":"[[ function params=0 ]]"},"__COMPILER_RUNTIME":{"c":"[[ function params=1 ]]"},"act":"[[ function params=1 ]]","cache":"[[ function params=1 ]]","captureOwnerStack":"[[ function params=0 ]]","cloneElement":"[[ function params=3 ]]","createContext":"[[ function params=1 ]]","createElement":"[[ function params=3 ]]","createRef":"[[ function params=0 ]]","experimental_useEffectEvent":"[[ function params=1 ]]","experimental_useOptimistic":"[[ function params=2 ]]","experimental_useResourceEffect":"[[ function params=0 ]]","forwardRef":"[[ function params=1 ]]","isValidElement":"[[ function params=1 ]]","lazy":"[[ function params=1 ]]","memo":"[[ function params=2 ]]","startTransition":"[[ function params=1 ]]","unstable_getCacheForType":"[[ function params=1 ]]","unstable_postpone":"[[ function params=1 ]]","unstable_useCacheRefresh":"[[ function params=0 ]]","use":"[[ function params=1 ]]","useActionState":"[[ function params=3 ]]","useCallback":"[[ function params=2 ]]","useContext":"[[ function params=1 ]]","useDebugValue":"[[ function params=2 ]]","useDeferredValue":"[[ function params=2 ]]","useEffect":"[[ function params=2 ]]","useId":"[[ function params=0 ]]","useImperativeHandle":"[[ function params=3 ]]","useInsertionEffect":"[[ function params=2 ]]","useLayoutEffect":"[[ function params=2 ]]","useMemo":"[[ function params=2 ]]","useOptimistic":"[[ function params=2 ]]","useReducer":"[[ function params=3 ]]","useRef":"[[ function params=1 ]]","useState":"[[ function params=1 ]]","useSyncExternalStore":"[[ function params=3 ]]","useTransition":"[[ function params=0 ]]","version":"19.0.0-experimental-4beb1fd8-20241118"},"[[ cyclic ref *6 ]]",true,true,true,true,"[[ function params=0 ]]",true,"[[ function params=0 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/module-scoped-bindings.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/module-scoped-bindings.js
new file mode 100644
index 00000000000..6190eb9e528
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/module-scoped-bindings.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import {useState} from 'react';
+
+const CONST = true;
+
+let NON_REASSIGNED_LET = true;
+
+let REASSIGNED_LET = false;
+REASSIGNED_LET = true;
+
+function reassignedFunction() {}
+reassignedFunction = true;
+
+function nonReassignedFunction() {}
+
+class ReassignedClass {}
+ReassignedClass = true;
+
+class NonReassignedClass {}
+
+function Component() {
+  const [state] = useState(null);
+  return [
+    React,
+    state,
+    CONST,
+    NON_REASSIGNED_LET,
+    REASSIGNED_LET,
+    reassignedFunction,
+    nonReassignedFunction,
+    ReassignedClass,
+    NonReassignedClass,
+  ];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-directive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-directive.expect.md
new file mode 100644
index 00000000000..0a1d0eeeefa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-directive.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function Component() {
+  'use foo';
+  'use bar';
+  return <div>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  "use foo";
+  "use bar";
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>"foo"</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>"foo"</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-directive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-directive.js
new file mode 100644
index 00000000000..5a269d2471a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-directive.js
@@ -0,0 +1,11 @@
+function Component() {
+  'use foo';
+  'use bar';
+  return <div>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md
new file mode 100644
index 00000000000..ba9b6684c9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+
+function Component(props) {
+  const [_state, setState] = useState();
+  const a = () => {
+    return b();
+  };
+  const b = () => {
+    return (
+      <>
+        <div onClick={() => onClick(true)}>a</div>
+        <div onClick={() => onClick(false)}>b</div>
+      </>
+    );
+  };
+  const onClick = value => {
+    setState(value);
+  };
+
+  return <div>{a()}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+
+function Component(props) {
+  const $ = _c(1);
+  const [, setState] = useState();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = () => b();
+    const b = () => (
+      <>
+        <div onClick={() => onClick(true)}>a</div>
+        <div onClick={() => onClick(false)}>b</div>
+      </>
+    );
+    const onClick = (value) => {
+      setState(value);
+    };
+    t0 = <div>{a()}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>a</div><div>b</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.js
new file mode 100644
index 00000000000..8d7c9fc1138
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.js
@@ -0,0 +1,26 @@
+import {useState} from 'react';
+
+function Component(props) {
+  const [_state, setState] = useState();
+  const a = () => {
+    return b();
+  };
+  const b = () => {
+    return (
+      <>
+        <div onClick={() => onClick(true)}>a</div>
+        <div onClick={() => onClick(false)}>b</div>
+      </>
+    );
+  };
+  const onClick = value => {
+    setState(value);
+  };
+
+  return <div>{a()}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.expect.md
new file mode 100644
index 00000000000..13e67f0e490
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @panicThreshold:"none"
+import {useHook} from 'shared-runtime';
+
+function InvalidComponent(props) {
+  if (props.cond) {
+    useHook();
+  }
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent(props) {
+  return <div>{props.greeting}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @panicThreshold:"none"
+import { useHook } from "shared-runtime";
+
+function InvalidComponent(props) {
+  if (props.cond) {
+    useHook();
+  }
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.greeting) {
+    t0 = <div>{props.greeting}</div>;
+    $[0] = props.greeting;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.js
new file mode 100644
index 00000000000..80f9bdd1092
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-components-first-is-invalid.js
@@ -0,0 +1,13 @@
+// @panicThreshold:"none"
+import {useHook} from 'shared-runtime';
+
+function InvalidComponent(props) {
+  if (props.cond) {
+    useHook();
+  }
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent(props) {
+  return <div>{props.greeting}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-loops.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-loops.expect.md
new file mode 100644
index 00000000000..dacee742440
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-loops.expect.md
@@ -0,0 +1,123 @@
+
+## Input
+
+```javascript
+function mutate(x, y) {
+  'use no forget';
+  if (x != null) {
+    x.value = (x.value ?? 0) + 1;
+  }
+  if (y != null) {
+    y.value = (y.value ?? 0) + 1;
+  }
+}
+function cond(x) {
+  'use no forget';
+  return x.value > 5;
+}
+
+function testFunction(props) {
+  let a = {};
+  let b = {};
+  let c = {};
+  let d = {};
+  while (true) {
+    let z = a;
+    a = b;
+    b = c;
+    c = d;
+    d = z;
+    mutate(a, b);
+    if (cond(a)) {
+      break;
+    }
+  }
+
+  // all of these tests are seemingly readonly, since the values are never directly
+  // mutated again. but they are all aliased by `d`, which is later modified, and
+  // these are therefore mutable references:
+  if (a) {
+  }
+  if (b) {
+  }
+  if (c) {
+  }
+  if (d) {
+  }
+
+  mutate(d, null);
+  return {a, b, c, d};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: testFunction,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function mutate(x, y) {
+  "use no forget";
+  if (x != null) {
+    x.value = (x.value ?? 0) + 1;
+  }
+  if (y != null) {
+    y.value = (y.value ?? 0) + 1;
+  }
+}
+function cond(x) {
+  "use no forget";
+  return x.value > 5;
+}
+
+function testFunction(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let a = {};
+    let b = {};
+    let c = {};
+    let d = {};
+    while (true) {
+      const z = a;
+      a = b;
+      b = c;
+      c = d;
+      d = z;
+      mutate(a, b);
+      if (cond(a)) {
+        break;
+      }
+    }
+    if (a) {
+    }
+    if (b) {
+    }
+    if (c) {
+    }
+    if (d) {
+    }
+    mutate(d, null);
+    t0 = { a, b, c, d };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: testFunction,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":{"value":6},"b":{"value":5},"c":{"value":4},"d":{"value":6}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-loops.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-loops.js
new file mode 100644
index 00000000000..7e4e32813fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-loops.js
@@ -0,0 +1,52 @@
+function mutate(x, y) {
+  'use no forget';
+  if (x != null) {
+    x.value = (x.value ?? 0) + 1;
+  }
+  if (y != null) {
+    y.value = (y.value ?? 0) + 1;
+  }
+}
+function cond(x) {
+  'use no forget';
+  return x.value > 5;
+}
+
+function testFunction(props) {
+  let a = {};
+  let b = {};
+  let c = {};
+  let d = {};
+  while (true) {
+    let z = a;
+    a = b;
+    b = c;
+    c = d;
+    d = z;
+    mutate(a, b);
+    if (cond(a)) {
+      break;
+    }
+  }
+
+  // all of these tests are seemingly readonly, since the values are never directly
+  // mutated again. but they are all aliased by `d`, which is later modified, and
+  // these are therefore mutable references:
+  if (a) {
+  }
+  if (b) {
+  }
+  if (c) {
+  }
+  if (d) {
+  }
+
+  mutate(d, null);
+  return {a, b, c, d};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: testFunction,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md
new file mode 100644
index 00000000000..8510bd2ecc8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md
@@ -0,0 +1,113 @@
+
+## Input
+
+```javascript
+function mutate(x, y) {
+  'use no forget';
+  if (!Array.isArray(x.value)) {
+    x.value = [];
+  }
+  x.value.push(y);
+  if (y != null) {
+    y.value = x;
+  }
+}
+
+function Component(props) {
+  const a = {};
+  const b = [a]; // array elements alias
+  const c = {};
+  const d = {c}; // object values alias
+
+  // capture all the values into this object
+  const x = {};
+  x.b = b;
+  const y = mutate(x, d); // mutation aliases the arg and return value
+
+  // all of these tests are seemingly readonly, since the values are never directly
+  // mutated again. but they are all aliased by `x`, which is later modified, and
+  // these are therefore mutable references:
+  if (a) {
+  }
+  if (b) {
+  }
+  if (c) {
+  }
+  if (d) {
+  }
+  if (y) {
+  }
+
+  // could in theory mutate any of a/b/c/x/z, so the above should be inferred as mutable
+  mutate(x, null);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function mutate(x, y) {
+  "use no forget";
+  if (!Array.isArray(x.value)) {
+    x.value = [];
+  }
+  x.value.push(y);
+  if (y != null) {
+    y.value = x;
+  }
+}
+
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = {};
+    const b = [a];
+    const c = {};
+    const d = { c };
+    x = {};
+    x.b = b;
+    const y = mutate(x, d);
+
+    if (a) {
+    }
+
+    if (b) {
+    }
+
+    if (c) {
+    }
+
+    if (d) {
+    }
+
+    if (y) {
+    }
+
+    mutate(x, null);
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":[{}],"value":[{"c":{},"value":"[[ cyclic ref *0 ]]"},null]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.js
new file mode 100644
index 00000000000..8b1d3e8fa57
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.js
@@ -0,0 +1,46 @@
+function mutate(x, y) {
+  'use no forget';
+  if (!Array.isArray(x.value)) {
+    x.value = [];
+  }
+  x.value.push(y);
+  if (y != null) {
+    y.value = x;
+  }
+}
+
+function Component(props) {
+  const a = {};
+  const b = [a]; // array elements alias
+  const c = {};
+  const d = {c}; // object values alias
+
+  // capture all the values into this object
+  const x = {};
+  x.b = b;
+  const y = mutate(x, d); // mutation aliases the arg and return value
+
+  // all of these tests are seemingly readonly, since the values are never directly
+  // mutated again. but they are all aliased by `x`, which is later modified, and
+  // these are therefore mutable references:
+  if (a) {
+  }
+  if (b) {
+  }
+  if (c) {
+  }
+  if (d) {
+  }
+  if (y) {
+  }
+
+  // could in theory mutate any of a/b/c/x/z, so the above should be inferred as mutable
+  mutate(x, null);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md
new file mode 100644
index 00000000000..b28a96361b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+function mutate() {}
+function cond() {}
+
+function Component(props) {
+  let a = {};
+  let b = {};
+  let c = {};
+  let d = {};
+  while (true) {
+    mutate(a, b);
+    if (cond(a)) {
+      break;
+    }
+  }
+
+  // all of these tests are seemingly readonly, since the values are never directly
+  // mutated again. but they are all aliased by `d`, which is later modified, and
+  // these are therefore mutable references:
+  if (a) {
+  }
+  if (b) {
+  }
+  if (c) {
+  }
+  if (d) {
+  }
+
+  mutate(d, null);
+}
+
+```
+
+## Code
+
+```javascript
+function mutate() {}
+function cond() {}
+
+function Component(props) {
+  const a = {};
+  const b = {};
+  const c = {};
+  const d = {};
+  while (true) {
+    mutate(a, b);
+    if (cond(a)) {
+      break;
+    }
+  }
+
+  if (a) {
+  }
+
+  if (b) {
+  }
+
+  if (c) {
+  }
+
+  if (d) {
+  }
+
+  mutate(d, null);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.js
new file mode 100644
index 00000000000..5b42db68310
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.js
@@ -0,0 +1,29 @@
+function mutate() {}
+function cond() {}
+
+function Component(props) {
+  let a = {};
+  let b = {};
+  let c = {};
+  let d = {};
+  while (true) {
+    mutate(a, b);
+    if (cond(a)) {
+      break;
+    }
+  }
+
+  // all of these tests are seemingly readonly, since the values are never directly
+  // mutated again. but they are all aliased by `d`, which is later modified, and
+  // these are therefore mutable references:
+  if (a) {
+  }
+  if (b) {
+  }
+  if (c) {
+  }
+  if (d) {
+  }
+
+  mutate(d, null);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md
new file mode 100644
index 00000000000..f3f21f8f622
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let y = function () {
+    m(x);
+  };
+
+  let x = {a};
+  m(x);
+  return y;
+}
+
+function m(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    y = function () {
+      m(x);
+    };
+
+    let x = { a };
+    m(x);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+function m(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js
new file mode 100644
index 00000000000..9985aea7f2f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js
@@ -0,0 +1,16 @@
+function component(a) {
+  let y = function () {
+    m(x);
+  };
+
+  let x = {a};
+  m(x);
+  return y;
+}
+
+function m(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{name: 'Jason'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md
new file mode 100644
index 00000000000..4633a1f8072
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+import {CONST_TRUE, identity, shallowCopy} from 'shared-runtime';
+
+function mutate(_: unknown) {}
+
+/**
+ * There are three values with their own scopes in this fixture.
+ * - arr, whose mutable range extends to the `mutate(...)` call
+ * - cond, which has a mutable range of exactly 1 (e.g. created but not
+ *   mutated)
+ * - { val: CONST_TRUE }, which is also not mutated after creation. However,
+ *   its scope range becomes extended to the value block.
+ *
+ * After AlignScopesToBlockScopes, our scopes look roughly like this
+ * ```js
+ *  [1] arr = shallowCopy()            ⌝@0
+ *  [2] cond = identity()        <- @1 |
+ *  [3] $0 = Ternary test=cond     ⌝@2 |
+ *  [4]        {val : CONST_TRUE}  |   |
+ *  [5]        mutate(arr)         |   |
+ *  [6] return $0                  ⌟   ⌟
+ * ```
+ *
+ * Observe that instruction 5 mutates scope 0, which means that scopes 0 and 2
+ * should be merged.
+ */
+function useFoo({input}) {
+  const arr = shallowCopy(input);
+
+  const cond = identity(false);
+  return cond ? {val: CONST_TRUE} : mutate(arr);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_TRUE, identity, shallowCopy } from "shared-runtime";
+
+function mutate(_) {}
+
+/**
+ * There are three values with their own scopes in this fixture.
+ * - arr, whose mutable range extends to the `mutate(...)` call
+ * - cond, which has a mutable range of exactly 1 (e.g. created but not
+ *   mutated)
+ * - { val: CONST_TRUE }, which is also not mutated after creation. However,
+ *   its scope range becomes extended to the value block.
+ *
+ * After AlignScopesToBlockScopes, our scopes look roughly like this
+ * ```js
+ *  [1] arr = shallowCopy()            ⌝@0
+ *  [2] cond = identity()        <- @1 |
+ *  [3] $0 = Ternary test=cond     ⌝@2 |
+ *  [4]        {val : CONST_TRUE}  |   |
+ *  [5]        mutate(arr)         |   |
+ *  [6] return $0                  ⌟   ⌟
+ * ```
+ *
+ * Observe that instruction 5 mutates scope 0, which means that scopes 0 and 2
+ * should be merged.
+ */
+function useFoo(t0) {
+  const $ = _c(2);
+  const { input } = t0;
+  let t1;
+  if ($[0] !== input) {
+    const arr = shallowCopy(input);
+    const cond = identity(false);
+    t1 = cond ? { val: CONST_TRUE } : mutate(arr);
+    $[0] = input;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.ts
new file mode 100644
index 00000000000..fd4452bebbd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.ts
@@ -0,0 +1,36 @@
+import {CONST_TRUE, identity, shallowCopy} from 'shared-runtime';
+
+function mutate(_: unknown) {}
+
+/**
+ * There are three values with their own scopes in this fixture.
+ * - arr, whose mutable range extends to the `mutate(...)` call
+ * - cond, which has a mutable range of exactly 1 (e.g. created but not
+ *   mutated)
+ * - { val: CONST_TRUE }, which is also not mutated after creation. However,
+ *   its scope range becomes extended to the value block.
+ *
+ * After AlignScopesToBlockScopes, our scopes look roughly like this
+ * ```js
+ *  [1] arr = shallowCopy()            ⌝@0
+ *  [2] cond = identity()        <- @1 |
+ *  [3] $0 = Ternary test=cond     ⌝@2 |
+ *  [4]        {val : CONST_TRUE}  |   |
+ *  [5]        mutate(arr)         |   |
+ *  [6] return $0                  ⌟   ⌟
+ * ```
+ *
+ * Observe that instruction 5 mutates scope 0, which means that scopes 0 and 2
+ * should be merged.
+ */
+function useFoo({input}) {
+  const arr = shallowCopy(input);
+
+  const cond = identity(false);
+  return cond ? {val: CONST_TRUE} : mutate(arr);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md
new file mode 100644
index 00000000000..b60832af667
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturnNewValue} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  // Key is modified by the function, but key itself is not frozen
+  const element = <div key={mutateAndReturnNewValue(key)}>{props.value}</div>;
+  // Key is later mutated here: this mutation must be grouped with the
+  // jsx construction above
+  mutate(key);
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate, mutateAndReturnNewValue } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let element;
+  if ($[0] !== props.value) {
+    const key = {};
+    element = <div key={mutateAndReturnNewValue(key)}>{props.value}</div>;
+
+    mutate(key);
+    $[0] = props.value;
+    $[1] = element;
+  } else {
+    element = $[1];
+  }
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.js
new file mode 100644
index 00000000000..3bb6eeae45c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.js
@@ -0,0 +1,16 @@
+import {identity, mutate, mutateAndReturnNewValue} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  // Key is modified by the function, but key itself is not frozen
+  const element = <div key={mutateAndReturnNewValue(key)}>{props.value}</div>;
+  // Key is later mutated here: this mutation must be grouped with the
+  // jsx construction above
+  mutate(key);
+  return element;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md
new file mode 100644
index 00000000000..ee091e29983
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+/**
+ * This test fixture is similar to mutation-within-jsx. The only difference
+ * is that there is no `freeze` effect here, which means that `z` may be
+ * mutated after its memo block through mutating `y`.
+ *
+ * While this is technically correct (as `z` is a nested memo block), it
+ * is an edge case as we believe that values are not mutated after their
+ * memo blocks (which may lead to 'tearing', i.e. mutating one render's
+ * values in a subsequent render.
+ */
+function useFoo({a, b}) {
+  // x and y's scopes start here
+  const x = {a};
+  const y = [b];
+  mutate(x);
+  // z captures the result of `mutate(y)`, which may be aliased to `y`.
+  const z = [mutate(y)];
+  // the following line may also mutate z
+  mutate(y);
+  // and end here
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+/**
+ * This test fixture is similar to mutation-within-jsx. The only difference
+ * is that there is no `freeze` effect here, which means that `z` may be
+ * mutated after its memo block through mutating `y`.
+ *
+ * While this is technically correct (as `z` is a nested memo block), it
+ * is an edge case as we believe that values are not mutated after their
+ * memo blocks (which may lead to 'tearing', i.e. mutating one render's
+ * values in a subsequent render.
+ */
+function useFoo(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let z;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a };
+    const y = [b];
+    mutate(x);
+    z = [mutate(y)];
+
+    mutate(y);
+    $[0] = a;
+    $[1] = b;
+    $[2] = z;
+  } else {
+    z = $[2];
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: 2, b: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.tsx
new file mode 100644
index 00000000000..52aae3a78b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.tsx
@@ -0,0 +1,29 @@
+import {mutate} from 'shared-runtime';
+
+/**
+ * This test fixture is similar to mutation-within-jsx. The only difference
+ * is that there is no `freeze` effect here, which means that `z` may be
+ * mutated after its memo block through mutating `y`.
+ *
+ * While this is technically correct (as `z` is a nested memo block), it
+ * is an edge case as we believe that values are not mutated after their
+ * memo blocks (which may lead to 'tearing', i.e. mutating one render's
+ * values in a subsequent render.
+ */
+function useFoo({a, b}) {
+  // x and y's scopes start here
+  const x = {a};
+  const y = [b];
+  mutate(x);
+  // z captures the result of `mutate(y)`, which may be aliased to `y`.
+  const z = [mutate(y)];
+  // the following line may also mutate z
+  mutate(y);
+  // and end here
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md
new file mode 100644
index 00000000000..17a8524eeee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+import {
+  Stringify,
+  makeObject_Primitives,
+  mutate,
+  mutateAndReturn,
+} from 'shared-runtime';
+
+function useFoo({data}) {
+  let obj = null;
+  let myDiv = null;
+  label: {
+    if (data.cond) {
+      obj = makeObject_Primitives();
+      if (data.cond1) {
+        myDiv = <Stringify value={mutateAndReturn(obj)} />;
+        break label;
+      }
+      mutate(obj);
+    }
+  }
+
+  return myDiv;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{data: {cond: true, cond1: true}}],
+  sequentialRenders: [
+    {data: {cond: true, cond1: true}},
+    {data: {cond: true, cond1: true}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  Stringify,
+  makeObject_Primitives,
+  mutate,
+  mutateAndReturn,
+} from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(4);
+  const { data } = t0;
+  let obj;
+  let myDiv = null;
+  if ($[0] !== data.cond || $[1] !== data.cond1) {
+    bb0: if (data.cond) {
+      obj = makeObject_Primitives();
+      if (data.cond1) {
+        myDiv = <Stringify value={mutateAndReturn(obj)} />;
+        break bb0;
+      }
+
+      mutate(obj);
+    }
+    $[0] = data.cond;
+    $[1] = data.cond1;
+    $[2] = obj;
+    $[3] = myDiv;
+  } else {
+    obj = $[2];
+    myDiv = $[3];
+  }
+  return myDiv;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ data: { cond: true, cond1: true } }],
+  sequentialRenders: [
+    { data: { cond: true, cond1: true } },
+    { data: { cond: true, cond1: true } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"value":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.tsx
new file mode 100644
index 00000000000..c3f6a778e2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.tsx
@@ -0,0 +1,32 @@
+import {
+  Stringify,
+  makeObject_Primitives,
+  mutate,
+  mutateAndReturn,
+} from 'shared-runtime';
+
+function useFoo({data}) {
+  let obj = null;
+  let myDiv = null;
+  label: {
+    if (data.cond) {
+      obj = makeObject_Primitives();
+      if (data.cond1) {
+        myDiv = <Stringify value={mutateAndReturn(obj)} />;
+        break label;
+      }
+      mutate(obj);
+    }
+  }
+
+  return myDiv;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{data: {cond: true, cond1: true}}],
+  sequentialRenders: [
+    {data: {cond: true, cond1: true}},
+    {data: {cond: true, cond1: true}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md
new file mode 100644
index 00000000000..d56d35ee84d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md
@@ -0,0 +1,131 @@
+
+## Input
+
+```javascript
+import {
+  Stringify,
+  makeObject_Primitives,
+  mutateAndReturn,
+} from 'shared-runtime';
+
+/**
+ * In this example, the `<Stringify ... />` JSX block mutates then captures obj.
+ * As JSX expressions freeze their values, we know that `obj` and `myDiv` cannot
+ * be mutated past this.
+ * This set of mutable range + scopes is an edge case because the JSX expression
+ * references values in two scopes.
+ * - (freeze) the result of `mutateAndReturn`
+ *   this is a mutable value with a mutable range starting at `makeObject()`
+ * - (mutate) the lvalue storing the result of `<Stringify .../>`
+ *   this is a immutable value and so gets assigned a different scope
+ *
+ * obj@0 = makeObj();                        ⌝ scope@0
+ * if (cond) {                               |
+ *   $1@0 = mutate(obj@0);                   |
+ *   myDiv@1 = JSX $1@0          <- scope@1  |
+ * }                                         ⌟
+ *
+ * Coincidentally, the range of `obj` is extended by alignScopesToBlocks to *past*
+ * the end of the JSX instruction. As we currently alias identifier mutableRanges to
+ * scope ranges, this `freeze` reference is perceived as occurring during the mutable
+ * range of `obj` (even though it is after the last mutating reference).
+ *
+ * This case is technically safe as `myDiv` correctly takes `obj` as a dependency. As
+ * a result, developers can never observe myDiv can aliasing a different value generation
+ * than `obj` (e.g. the invariant `myDiv.props.value === obj` always holds).
+ */
+function useFoo({data}) {
+  let obj = null;
+  let myDiv = null;
+  if (data.cond) {
+    obj = makeObject_Primitives();
+    if (data.cond1) {
+      myDiv = <Stringify value={mutateAndReturn(obj)} />;
+    }
+  }
+  return myDiv;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{data: {cond: true, cond1: true}}],
+  sequentialRenders: [
+    {data: {cond: true, cond1: true}},
+    {data: {cond: true, cond1: true}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  Stringify,
+  makeObject_Primitives,
+  mutateAndReturn,
+} from "shared-runtime";
+
+/**
+ * In this example, the `<Stringify ... />` JSX block mutates then captures obj.
+ * As JSX expressions freeze their values, we know that `obj` and `myDiv` cannot
+ * be mutated past this.
+ * This set of mutable range + scopes is an edge case because the JSX expression
+ * references values in two scopes.
+ * - (freeze) the result of `mutateAndReturn`
+ *   this is a mutable value with a mutable range starting at `makeObject()`
+ * - (mutate) the lvalue storing the result of `<Stringify .../>`
+ *   this is a immutable value and so gets assigned a different scope
+ *
+ * obj@0 = makeObj();                        ⌝ scope@0
+ * if (cond) {                               |
+ *   $1@0 = mutate(obj@0);                   |
+ *   myDiv@1 = JSX $1@0          <- scope@1  |
+ * }                                         ⌟
+ *
+ * Coincidentally, the range of `obj` is extended by alignScopesToBlocks to *past*
+ * the end of the JSX instruction. As we currently alias identifier mutableRanges to
+ * scope ranges, this `freeze` reference is perceived as occurring during the mutable
+ * range of `obj` (even though it is after the last mutating reference).
+ *
+ * This case is technically safe as `myDiv` correctly takes `obj` as a dependency. As
+ * a result, developers can never observe myDiv can aliasing a different value generation
+ * than `obj` (e.g. the invariant `myDiv.props.value === obj` always holds).
+ */
+function useFoo(t0) {
+  const $ = _c(3);
+  const { data } = t0;
+  let obj;
+  let myDiv = null;
+  if (data.cond) {
+    if ($[0] !== data.cond1) {
+      obj = makeObject_Primitives();
+      if (data.cond1) {
+        myDiv = <Stringify value={mutateAndReturn(obj)} />;
+      }
+      $[0] = data.cond1;
+      $[1] = obj;
+      $[2] = myDiv;
+    } else {
+      obj = $[1];
+      myDiv = $[2];
+    }
+  }
+  return myDiv;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ data: { cond: true, cond1: true } }],
+  sequentialRenders: [
+    { data: { cond: true, cond1: true } },
+    { data: { cond: true, cond1: true } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"value":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.tsx
new file mode 100644
index 00000000000..48a817e13ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.tsx
@@ -0,0 +1,52 @@
+import {
+  Stringify,
+  makeObject_Primitives,
+  mutateAndReturn,
+} from 'shared-runtime';
+
+/**
+ * In this example, the `<Stringify ... />` JSX block mutates then captures obj.
+ * As JSX expressions freeze their values, we know that `obj` and `myDiv` cannot
+ * be mutated past this.
+ * This set of mutable range + scopes is an edge case because the JSX expression
+ * references values in two scopes.
+ * - (freeze) the result of `mutateAndReturn`
+ *   this is a mutable value with a mutable range starting at `makeObject()`
+ * - (mutate) the lvalue storing the result of `<Stringify .../>`
+ *   this is a immutable value and so gets assigned a different scope
+ *
+ * obj@0 = makeObj();                        ⌝ scope@0
+ * if (cond) {                               |
+ *   $1@0 = mutate(obj@0);                   |
+ *   myDiv@1 = JSX $1@0          <- scope@1  |
+ * }                                         ⌟
+ *
+ * Coincidentally, the range of `obj` is extended by alignScopesToBlocks to *past*
+ * the end of the JSX instruction. As we currently alias identifier mutableRanges to
+ * scope ranges, this `freeze` reference is perceived as occurring during the mutable
+ * range of `obj` (even though it is after the last mutating reference).
+ *
+ * This case is technically safe as `myDiv` correctly takes `obj` as a dependency. As
+ * a result, developers can never observe myDiv can aliasing a different value generation
+ * than `obj` (e.g. the invariant `myDiv.props.value === obj` always holds).
+ */
+function useFoo({data}) {
+  let obj = null;
+  let myDiv = null;
+  if (data.cond) {
+    obj = makeObject_Primitives();
+    if (data.cond1) {
+      myDiv = <Stringify value={mutateAndReturn(obj)} />;
+    }
+  }
+  return myDiv;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{data: {cond: true, cond1: true}}],
+  sequentialRenders: [
+    {data: {cond: true, cond1: true}},
+    {data: {cond: true, cond1: true}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions-outline.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions-outline.expect.md
new file mode 100644
index 00000000000..a1267c6f829
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions-outline.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @enableNameAnonymousFunctions
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const onClick = () => {
+    console.log('hello!');
+  };
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNameAnonymousFunctions
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  const onClick = _ComponentOnClick;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div onClick={onClick} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _ComponentOnClick() {
+  console.log("hello!");
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions-outline.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions-outline.js
new file mode 100644
index 00000000000..0906cb928a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions-outline.js
@@ -0,0 +1,14 @@
+// @enableNameAnonymousFunctions
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const onClick = () => {
+    console.log('hello!');
+  };
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.expect.md
new file mode 100644
index 00000000000..6fccad7685b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.expect.md
@@ -0,0 +1,289 @@
+
+## Input
+
+```javascript
+// @enableNameAnonymousFunctions
+
+import {useCallback, useEffect} from 'react';
+import {identity, Stringify, useIdentity} from 'shared-runtime';
+import * as SharedRuntime from 'shared-runtime';
+
+function Component(props) {
+  function named() {
+    const inner = () => props.named;
+    const innerIdentity = identity(() => props.named);
+    return inner(innerIdentity());
+  }
+  const callback = useCallback(() => {
+    return 'ok';
+  }, []);
+  const namedVariable = function () {
+    return props.namedVariable;
+  };
+  const methodCall = SharedRuntime.identity(() => props.methodCall);
+  const call = identity(() => props.call);
+  const builtinElementAttr = <div onClick={() => props.builtinElementAttr} />;
+  const namedElementAttr = <Stringify onClick={() => props.namedElementAttr} />;
+  const hookArgument = useIdentity(() => props.hookArgument);
+  useEffect(() => {
+    console.log(props.useEffect);
+    JSON.stringify(null, null, () => props.useEffect);
+    const g = () => props.useEffect;
+    console.log(g());
+  }, [props.useEffect]);
+  return (
+    <>
+      {named()}
+      {callback()}
+      {namedVariable()}
+      {methodCall()}
+      {call()}
+      {builtinElementAttr}
+      {namedElementAttr}
+      {hookArgument()}
+    </>
+  );
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      named: '<named>',
+      namedVariable: '<namedVariable>',
+      methodCall: '<methodCall>',
+      call: '<call>',
+      builtinElementAttr: '<builtinElementAttr>',
+      namedElementAttr: '<namedElementAttr>',
+      hookArgument: '<hookArgument>',
+      useEffect: '<useEffect>',
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNameAnonymousFunctions
+
+import { useCallback, useEffect } from "react";
+import { identity, Stringify, useIdentity } from "shared-runtime";
+import * as SharedRuntime from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(31);
+  let t0;
+  if ($[0] !== props.named) {
+    t0 = function named() {
+      const inner = { "Component[named > inner]": () => props.named }[
+        "Component[named > inner]"
+      ];
+      const innerIdentity = identity(
+        { "Component[named > identity()]": () => props.named }[
+          "Component[named > identity()]"
+        ],
+      );
+      return inner(innerIdentity());
+    };
+    $[0] = props.named;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const named = t0;
+
+  const callback = _ComponentCallback;
+  let t1;
+  if ($[2] !== props.namedVariable) {
+    t1 = {
+      "Component[namedVariable]": function () {
+        return props.namedVariable;
+      },
+    }["Component[namedVariable]"];
+    $[2] = props.namedVariable;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const namedVariable = t1;
+  let t2;
+  if ($[4] !== props.methodCall) {
+    t2 = { "Component[SharedRuntime.identity()]": () => props.methodCall }[
+      "Component[SharedRuntime.identity()]"
+    ];
+    $[4] = props.methodCall;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const methodCall = SharedRuntime.identity(t2);
+  let t3;
+  if ($[6] !== props.call) {
+    t3 = { "Component[identity()]": () => props.call }["Component[identity()]"];
+    $[6] = props.call;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const call = identity(t3);
+  let t4;
+  if ($[8] !== props.builtinElementAttr) {
+    t4 = (
+      <div
+        onClick={
+          { "Component[<div>.onClick]": () => props.builtinElementAttr }[
+            "Component[<div>.onClick]"
+          ]
+        }
+      />
+    );
+    $[8] = props.builtinElementAttr;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const builtinElementAttr = t4;
+  let t5;
+  if ($[10] !== props.namedElementAttr) {
+    t5 = (
+      <Stringify
+        onClick={
+          { "Component[<Stringify>.onClick]": () => props.namedElementAttr }[
+            "Component[<Stringify>.onClick]"
+          ]
+        }
+      />
+    );
+    $[10] = props.namedElementAttr;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const namedElementAttr = t5;
+  let t6;
+  if ($[12] !== props.hookArgument) {
+    t6 = { "Component[useIdentity()]": () => props.hookArgument }[
+      "Component[useIdentity()]"
+    ];
+    $[12] = props.hookArgument;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const hookArgument = useIdentity(t6);
+  let t7;
+  let t8;
+  if ($[14] !== props.useEffect) {
+    t7 = {
+      "Component[useEffect()]": () => {
+        console.log(props.useEffect);
+        JSON.stringify(
+          null,
+          null,
+          {
+            "Component[useEffect() > JSON.stringify()]": () => props.useEffect,
+          }["Component[useEffect() > JSON.stringify()]"],
+        );
+        const g = { "Component[useEffect() > g]": () => props.useEffect }[
+          "Component[useEffect() > g]"
+        ];
+        console.log(g());
+      },
+    }["Component[useEffect()]"];
+    t8 = [props.useEffect];
+    $[14] = props.useEffect;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t7 = $[15];
+    t8 = $[16];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[17] !== named) {
+    t9 = named();
+    $[17] = named;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  const t10 = callback();
+  let t11;
+  if ($[19] !== namedVariable) {
+    t11 = namedVariable();
+    $[19] = namedVariable;
+    $[20] = t11;
+  } else {
+    t11 = $[20];
+  }
+  const t12 = methodCall();
+  const t13 = call();
+  let t14;
+  if ($[21] !== hookArgument) {
+    t14 = hookArgument();
+    $[21] = hookArgument;
+    $[22] = t14;
+  } else {
+    t14 = $[22];
+  }
+  let t15;
+  if (
+    $[23] !== builtinElementAttr ||
+    $[24] !== namedElementAttr ||
+    $[25] !== t11 ||
+    $[26] !== t12 ||
+    $[27] !== t13 ||
+    $[28] !== t14 ||
+    $[29] !== t9
+  ) {
+    t15 = (
+      <>
+        {t9}
+        {t10}
+        {t11}
+        {t12}
+        {t13}
+        {builtinElementAttr}
+        {namedElementAttr}
+        {t14}
+      </>
+    );
+    $[23] = builtinElementAttr;
+    $[24] = namedElementAttr;
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t13;
+    $[28] = t14;
+    $[29] = t9;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  return t15;
+}
+function _ComponentCallback() {
+  return "ok";
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      named: "<named>",
+      namedVariable: "<namedVariable>",
+      methodCall: "<methodCall>",
+      call: "<call>",
+      builtinElementAttr: "<builtinElementAttr>",
+      namedElementAttr: "<namedElementAttr>",
+      hookArgument: "<hookArgument>",
+      useEffect: "<useEffect>",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.js
new file mode 100644
index 00000000000..963bee9ea6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/name-anonymous-functions.js
@@ -0,0 +1,58 @@
+// @enableNameAnonymousFunctions
+
+import {useCallback, useEffect} from 'react';
+import {identity, Stringify, useIdentity} from 'shared-runtime';
+import * as SharedRuntime from 'shared-runtime';
+
+function Component(props) {
+  function named() {
+    const inner = () => props.named;
+    const innerIdentity = identity(() => props.named);
+    return inner(innerIdentity());
+  }
+  const callback = useCallback(() => {
+    return 'ok';
+  }, []);
+  const namedVariable = function () {
+    return props.namedVariable;
+  };
+  const methodCall = SharedRuntime.identity(() => props.methodCall);
+  const call = identity(() => props.call);
+  const builtinElementAttr = <div onClick={() => props.builtinElementAttr} />;
+  const namedElementAttr = <Stringify onClick={() => props.namedElementAttr} />;
+  const hookArgument = useIdentity(() => props.hookArgument);
+  useEffect(() => {
+    console.log(props.useEffect);
+    JSON.stringify(null, null, () => props.useEffect);
+    const g = () => props.useEffect;
+    console.log(g());
+  }, [props.useEffect]);
+  return (
+    <>
+      {named()}
+      {callback()}
+      {namedVariable()}
+      {methodCall()}
+      {call()}
+      {builtinElementAttr}
+      {namedElementAttr}
+      {hookArgument()}
+    </>
+  );
+}
+
+export const TODO_FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      named: '<named>',
+      namedVariable: '<namedVariable>',
+      methodCall: '<methodCall>',
+      call: '<call>',
+      builtinElementAttr: '<builtinElementAttr>',
+      namedElementAttr: '<namedElementAttr>',
+      hookArgument: '<hookArgument>',
+      useEffect: '<useEffect>',
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-shadowed-identifiers.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-shadowed-identifiers.expect.md
new file mode 100644
index 00000000000..3c624de9ebe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-shadowed-identifiers.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const [x, setX] = useState(null);
+
+  const onChange = e => {
+    let x = null; // intentionally shadow the original x
+    setX(currentX => currentX + x); // intentionally refer to shadowed x
+  };
+
+  return <input value={x} onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  const [x, setX] = useState(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      setX(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] !== x) {
+    t1 = <input value={x} onChange={onChange} />;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp(currentX) {
+  return currentX + null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-shadowed-identifiers.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-shadowed-identifiers.js
new file mode 100644
index 00000000000..9f8385a82fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-shadowed-identifiers.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const [x, setX] = useState(null);
+
+  const onChange = e => {
+    let x = null; // intentionally shadow the original x
+    setX(currentX => currentX + x); // intentionally refer to shadowed x
+  };
+
+  return <input value={x} onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-with-param-as-captured-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-with-param-as-captured-dep.expect.md
new file mode 100644
index 00000000000..2ab19c3f2c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-with-param-as-captured-dep.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function Foo() {
+  return (function t() {
+    let x = {};
+    return function a(x = () => {}) {
+      return x;
+    };
+  })();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function a(t1) {
+      const x_0 = t1 === undefined ? _temp : t1;
+      return x_0;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-with-param-as-captured-dep.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-with-param-as-captured-dep.ts
new file mode 100644
index 00000000000..746df1cb408
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-function-with-param-as-captured-dep.ts
@@ -0,0 +1,14 @@
+function Foo() {
+  return (function t() {
+    let x = {};
+    return function a(x = () => {}) {
+      return x;
+    };
+  })();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.expect.md
new file mode 100644
index 00000000000..92a24194a35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.expect.md
@@ -0,0 +1,229 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+/**
+ * identity(...)?.toString() is the outer optional, and prop?.value is the inner
+ * one.
+ * Note that prop?.
+ */
+function useFoo({
+  prop1,
+  prop2,
+  prop3,
+  prop4,
+  prop5,
+  prop6,
+}: {
+  prop1: null | {value: number};
+  prop2: null | {inner: {value: number}};
+  prop3: null | {fn: (val: any) => NonNullable<object>};
+  prop4: null | {inner: {value: number}};
+  prop5: null | {fn: (val: any) => NonNullable<object>};
+  prop6: null | {inner: {value: number}};
+}) {
+  // prop1?.value should be hoisted as the dependency of x
+  const x = identity(prop1?.value)?.toString();
+
+  // prop2?.inner.value should be hoisted as the dependency of y
+  const y = identity(prop2?.inner.value)?.toString();
+
+  // prop3 and prop4?.inner should be hoisted as the dependency of z
+  const z = prop3?.fn(prop4?.inner.value).toString();
+
+  // prop5 and prop6?.inner should be hoisted as the dependency of zz
+  const zz = prop5?.fn(prop6?.inner.value)?.toString();
+  return [x, y, z, zz];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+  ],
+  sequentialRenders: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: 4}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: undefined}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: undefined}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {},
+      prop3: {fn: identity},
+      prop4: {},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+/**
+ * identity(...)?.toString() is the outer optional, and prop?.value is the inner
+ * one.
+ * Note that prop?.
+ */
+function useFoo(t0) {
+  const $ = _c(15);
+  const { prop1, prop2, prop3, prop4, prop5, prop6 } = t0;
+  let t1;
+  if ($[0] !== prop1?.value) {
+    t1 = identity(prop1?.value)?.toString();
+    $[0] = prop1?.value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let t2;
+  if ($[2] !== prop2?.inner.value) {
+    t2 = identity(prop2?.inner.value)?.toString();
+    $[2] = prop2?.inner.value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const y = t2;
+  let t3;
+  if ($[4] !== prop3 || $[5] !== prop4?.inner) {
+    t3 = prop3?.fn(prop4?.inner.value).toString();
+    $[4] = prop3;
+    $[5] = prop4?.inner;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const z = t3;
+  let t4;
+  if ($[7] !== prop5 || $[8] !== prop6?.inner) {
+    t4 = prop5?.fn(prop6?.inner.value)?.toString();
+    $[7] = prop5;
+    $[8] = prop6?.inner;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const zz = t4;
+  let t5;
+  if ($[10] !== x || $[11] !== y || $[12] !== z || $[13] !== zz) {
+    t5 = [x, y, z, zz];
+    $[10] = x;
+    $[11] = y;
+    $[12] = z;
+    $[13] = zz;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+  ],
+
+  sequentialRenders: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+    {
+      prop1: { value: 2 },
+      prop2: { inner: { value: 3 } },
+      prop3: { fn: identity },
+      prop4: { inner: { value: 4 } },
+      prop5: { fn: identity },
+      prop6: { inner: { value: 4 } },
+    },
+    {
+      prop1: { value: 2 },
+      prop2: { inner: { value: 3 } },
+      prop3: { fn: identity },
+      prop4: { inner: { value: 4 } },
+      prop5: { fn: identity },
+      prop6: { inner: { value: undefined } },
+    },
+    {
+      prop1: { value: 2 },
+      prop2: { inner: { value: undefined } },
+      prop3: { fn: identity },
+      prop4: { inner: { value: undefined } },
+      prop5: { fn: identity },
+      prop6: { inner: { value: undefined } },
+    },
+    {
+      prop1: { value: 2 },
+      prop2: {},
+      prop3: { fn: identity },
+      prop4: {},
+      prop5: { fn: identity },
+      prop6: { inner: { value: undefined } },
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null,null,null,null]
+["2","3","4","4"]
+["2","3","4",null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'toString') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'value') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.ts
new file mode 100644
index 00000000000..d00cb4fee69
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.ts
@@ -0,0 +1,91 @@
+import {identity} from 'shared-runtime';
+
+/**
+ * identity(...)?.toString() is the outer optional, and prop?.value is the inner
+ * one.
+ * Note that prop?.
+ */
+function useFoo({
+  prop1,
+  prop2,
+  prop3,
+  prop4,
+  prop5,
+  prop6,
+}: {
+  prop1: null | {value: number};
+  prop2: null | {inner: {value: number}};
+  prop3: null | {fn: (val: any) => NonNullable<object>};
+  prop4: null | {inner: {value: number}};
+  prop5: null | {fn: (val: any) => NonNullable<object>};
+  prop6: null | {inner: {value: number}};
+}) {
+  // prop1?.value should be hoisted as the dependency of x
+  const x = identity(prop1?.value)?.toString();
+
+  // prop2?.inner.value should be hoisted as the dependency of y
+  const y = identity(prop2?.inner.value)?.toString();
+
+  // prop3 and prop4?.inner should be hoisted as the dependency of z
+  const z = prop3?.fn(prop4?.inner.value).toString();
+
+  // prop5 and prop6?.inner should be hoisted as the dependency of zz
+  const zz = prop5?.fn(prop6?.inner.value)?.toString();
+  return [x, y, z, zz];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+  ],
+  sequentialRenders: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: 4}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: undefined}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: undefined}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {},
+      prop3: {fn: identity},
+      prop4: {},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-member-expr.expect.md
new file mode 100644
index 00000000000..c2c1cc30c0d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-member-expr.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// We should codegen nested optional properties correctly
+// (i.e. placing `?` in the correct PropertyLoad)
+function Component(props) {
+  let x = foo(props.a?.b.c.d);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // We should codegen nested optional properties correctly
+// (i.e. placing `?` in the correct PropertyLoad)
+function Component(props) {
+  const $ = _c(2);
+  const t0 = props.a?.b.c.d;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = foo(t0);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-member-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-member-expr.js
new file mode 100644
index 00000000000..e9f800af8d4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-member-expr.js
@@ -0,0 +1,6 @@
+// We should codegen nested optional properties correctly
+// (i.e. placing `?` in the correct PropertyLoad)
+function Component(props) {
+  let x = foo(props.a?.b.c.d);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md
new file mode 100644
index 00000000000..37d41b69f32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {identity, mutate} from 'shared-runtime';
+
+function Foo({cond}) {
+  const x = identity(identity(cond)) ? {a: 2} : {b: 2};
+
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: false}],
+  sequentialRenders: [{cond: false}, {cond: false}, {cond: true}, {cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(2);
+  const { cond } = t0;
+  let x;
+  if ($[0] !== cond) {
+    x = identity(identity(cond)) ? { a: 2 } : { b: 2 };
+
+    mutate(x);
+    $[0] = cond;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ cond: false }],
+  sequentialRenders: [
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":2,"wat0":"joe"}
+{"b":2,"wat0":"joe"}
+{"a":2,"wat0":"joe"}
+{"a":2,"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.ts
new file mode 100644
index 00000000000..7f90511d05b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.ts
@@ -0,0 +1,14 @@
+import {identity, mutate} from 'shared-runtime';
+
+function Foo({cond}) {
+  const x = identity(identity(cond)) ? {a: 2} : {b: 2};
+
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: false}],
+  sequentialRenders: [{cond: false}, {cond: false}, {cond: true}, {cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md
new file mode 100644
index 00000000000..600ff19f0fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+function component(props) {
+  let x = [];
+  let y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+function component(props) {
+  const x = [];
+  const y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.js
new file mode 100644
index 00000000000..a1b0858fb3e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.js
@@ -0,0 +1,7 @@
+function component(props) {
+  let x = [];
+  let y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md
new file mode 100644
index 00000000000..1221ce01b93
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+class Foo {}
+function Component({val}) {
+  const MyClass = identity(Foo);
+  const x = [val];
+  const y = new MyClass();
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{val: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+class Foo {}
+function Component(t0) {
+  const $ = _c(6);
+  const { val } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = identity(Foo);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const MyClass = t1;
+  let t2;
+  if ($[1] !== val) {
+    t2 = [val];
+    $[1] = val;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const x = t2;
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = new MyClass();
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const y = t3;
+  let t4;
+  if ($[4] !== x) {
+    t4 = [x, y];
+    $[4] = x;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ val: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[0],{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.ts
new file mode 100644
index 00000000000..a25040a2856
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.ts
@@ -0,0 +1,15 @@
+import {identity} from 'shared-runtime';
+
+class Foo {}
+function Component({val}) {
+  const MyClass = identity(Foo);
+  const x = [val];
+  const y = new MyClass();
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{val: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.expect.md
new file mode 100644
index 00000000000..64b08ebd462
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.expect.md
@@ -0,0 +1,212 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {
+  Stringify,
+  mutate,
+  identity,
+  shallowCopy,
+  setPropertyByKey,
+} from 'shared-runtime';
+
+/**
+ * This fixture is similar to `bug-aliased-capture-aliased-mutate` and
+ * `nonmutating-capture-in-unsplittable-memo-block`, but with a focus on
+ * dependency extraction.
+ *
+ * NOTE: this fixture is currently valid, but will break with optimizations:
+ * - Scope and mutable-range based reordering may move the array creation
+ *     *after* the `mutate(aliasedObj)` call. This is invalid if mutate
+ *     reassigns inner properties.
+ * - RecycleInto or other deeper-equality optimizations may produce invalid
+ *     output -- it may compare the array's contents / dependencies too early.
+ * - Runtime validation for immutable values will break if `mutate` does
+ *     interior mutation of the value captured into the array.
+ *
+ * Before scope block creation, HIR looks like this:
+ *  //
+ *  // $1 is unscoped as obj's mutable range will be
+ *  // extended in a later pass
+ *  //
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  //
+ *  // $3 gets assigned a scope as Array is an allocating
+ *  // instruction, but this does *not* get extended or
+ *  // merged into the later mutation site.
+ *  // (explained in `bug-aliased-capture-aliased-mutate`)
+ *  //
+ *  $3@1  = Array[$2]
+ *  ...
+ *  $10@0 = LoadLocal shallowCopy@0[0, 12]
+ *  $11   = LoadGlobal mutate
+ *  $12   = $11($10@0[0, 12])
+ *
+ * When filling in scope dependencies, we find that it's incorrect to depend on
+ * PropertyLoads from obj as it hasn't completed its mutable range. Following
+ * the immutable / mutable-new typing system, we check the identity of obj to
+ * detect whether it was newly created (and thus mutable) in this render pass.
+ *
+ * HIR with scopes looks like this.
+ * bb0:
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  scopeTerminal deps=[obj@0] block=bb1 fallt=bb2
+ * bb1:
+ *  $3@1  = Array[$2]
+ *  goto bb2
+ * bb2:
+ *  ...
+ *
+ * This is surprising as deps now is entirely decoupled from temporaries used
+ * by the block itself. scope @1's instructions now reference a value (1)
+ * produced outside its scope range and (2) not represented in its dependencies
+ *
+ * The right thing to do is to ensure that all Loads from a value get assigned
+ * the value's reactive scope. This also requires track mutating and aliasing
+ * separately from scope range. In this example, that would correctly merge
+ * the scopes of $3 with obj.
+ * Runtime validation and optimizations such as ReactiveGraph-based reordering
+ * require this as well.
+ *
+ * A tempting fix is to instead extend $3's ReactiveScope range up to include
+ * $2 (the PropertyLoad). This fixes dependency deduping but not reordering
+ * and mutability.
+ */
+function Component({prop}) {
+  let obj = shallowCopy(prop);
+  const aliasedObj = identity(obj);
+
+  // [obj.id] currently is assigned its own reactive scope
+  const id = [obj.id];
+
+  // Writing to the alias may reassign to previously captured references.
+  // The compiler currently produces valid output, but this breaks with
+  // reordering, recycleInto, and other potential optimizations.
+  mutate(aliasedObj);
+  setPropertyByKey(aliasedObj, 'id', prop.id + 1);
+
+  return <Stringify id={id} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: {id: 1}}],
+  sequentialRenders: [{prop: {id: 1}}, {prop: {id: 1}}, {prop: {id: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import {
+  Stringify,
+  mutate,
+  identity,
+  shallowCopy,
+  setPropertyByKey,
+} from "shared-runtime";
+
+/**
+ * This fixture is similar to `bug-aliased-capture-aliased-mutate` and
+ * `nonmutating-capture-in-unsplittable-memo-block`, but with a focus on
+ * dependency extraction.
+ *
+ * NOTE: this fixture is currently valid, but will break with optimizations:
+ * - Scope and mutable-range based reordering may move the array creation
+ *     *after* the `mutate(aliasedObj)` call. This is invalid if mutate
+ *     reassigns inner properties.
+ * - RecycleInto or other deeper-equality optimizations may produce invalid
+ *     output -- it may compare the array's contents / dependencies too early.
+ * - Runtime validation for immutable values will break if `mutate` does
+ *     interior mutation of the value captured into the array.
+ *
+ * Before scope block creation, HIR looks like this:
+ *  //
+ *  // $1 is unscoped as obj's mutable range will be
+ *  // extended in a later pass
+ *  //
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  //
+ *  // $3 gets assigned a scope as Array is an allocating
+ *  // instruction, but this does *not* get extended or
+ *  // merged into the later mutation site.
+ *  // (explained in `bug-aliased-capture-aliased-mutate`)
+ *  //
+ *  $3@1  = Array[$2]
+ *  ...
+ *  $10@0 = LoadLocal shallowCopy@0[0, 12]
+ *  $11   = LoadGlobal mutate
+ *  $12   = $11($10@0[0, 12])
+ *
+ * When filling in scope dependencies, we find that it's incorrect to depend on
+ * PropertyLoads from obj as it hasn't completed its mutable range. Following
+ * the immutable / mutable-new typing system, we check the identity of obj to
+ * detect whether it was newly created (and thus mutable) in this render pass.
+ *
+ * HIR with scopes looks like this.
+ * bb0:
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  scopeTerminal deps=[obj@0] block=bb1 fallt=bb2
+ * bb1:
+ *  $3@1  = Array[$2]
+ *  goto bb2
+ * bb2:
+ *  ...
+ *
+ * This is surprising as deps now is entirely decoupled from temporaries used
+ * by the block itself. scope @1's instructions now reference a value (1)
+ * produced outside its scope range and (2) not represented in its dependencies
+ *
+ * The right thing to do is to ensure that all Loads from a value get assigned
+ * the value's reactive scope. This also requires track mutating and aliasing
+ * separately from scope range. In this example, that would correctly merge
+ * the scopes of $3 with obj.
+ * Runtime validation and optimizations such as ReactiveGraph-based reordering
+ * require this as well.
+ *
+ * A tempting fix is to instead extend $3's ReactiveScope range up to include
+ * $2 (the PropertyLoad). This fixes dependency deduping but not reordering
+ * and mutability.
+ */
+function Component(t0) {
+  const $ = _c(2);
+  const { prop } = t0;
+  let t1;
+  if ($[0] !== prop) {
+    const obj = shallowCopy(prop);
+    const aliasedObj = identity(obj);
+    const id = [obj.id];
+    mutate(aliasedObj);
+    setPropertyByKey(aliasedObj, "id", prop.id + 1);
+    t1 = <Stringify id={id} />;
+    $[0] = prop;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prop: { id: 1 } }],
+  sequentialRenders: [
+    { prop: { id: 1 } },
+    { prop: { id: 1 } },
+    { prop: { id: 2 } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"id":[1]}</div>
+<div>{"id":[1]}</div>
+<div>{"id":[2]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.tsx
new file mode 100644
index 00000000000..ecd5598cb09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.tsx
@@ -0,0 +1,94 @@
+// @enableNewMutationAliasingModel
+import {
+  Stringify,
+  mutate,
+  identity,
+  shallowCopy,
+  setPropertyByKey,
+} from 'shared-runtime';
+
+/**
+ * This fixture is similar to `bug-aliased-capture-aliased-mutate` and
+ * `nonmutating-capture-in-unsplittable-memo-block`, but with a focus on
+ * dependency extraction.
+ *
+ * NOTE: this fixture is currently valid, but will break with optimizations:
+ * - Scope and mutable-range based reordering may move the array creation
+ *     *after* the `mutate(aliasedObj)` call. This is invalid if mutate
+ *     reassigns inner properties.
+ * - RecycleInto or other deeper-equality optimizations may produce invalid
+ *     output -- it may compare the array's contents / dependencies too early.
+ * - Runtime validation for immutable values will break if `mutate` does
+ *     interior mutation of the value captured into the array.
+ *
+ * Before scope block creation, HIR looks like this:
+ *  //
+ *  // $1 is unscoped as obj's mutable range will be
+ *  // extended in a later pass
+ *  //
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  //
+ *  // $3 gets assigned a scope as Array is an allocating
+ *  // instruction, but this does *not* get extended or
+ *  // merged into the later mutation site.
+ *  // (explained in `bug-aliased-capture-aliased-mutate`)
+ *  //
+ *  $3@1  = Array[$2]
+ *  ...
+ *  $10@0 = LoadLocal shallowCopy@0[0, 12]
+ *  $11   = LoadGlobal mutate
+ *  $12   = $11($10@0[0, 12])
+ *
+ * When filling in scope dependencies, we find that it's incorrect to depend on
+ * PropertyLoads from obj as it hasn't completed its mutable range. Following
+ * the immutable / mutable-new typing system, we check the identity of obj to
+ * detect whether it was newly created (and thus mutable) in this render pass.
+ *
+ * HIR with scopes looks like this.
+ * bb0:
+ *  $1    = LoadLocal obj@0[0:12]
+ *  $2    = PropertyLoad $1.id
+ *  scopeTerminal deps=[obj@0] block=bb1 fallt=bb2
+ * bb1:
+ *  $3@1  = Array[$2]
+ *  goto bb2
+ * bb2:
+ *  ...
+ *
+ * This is surprising as deps now is entirely decoupled from temporaries used
+ * by the block itself. scope @1's instructions now reference a value (1)
+ * produced outside its scope range and (2) not represented in its dependencies
+ *
+ * The right thing to do is to ensure that all Loads from a value get assigned
+ * the value's reactive scope. This also requires track mutating and aliasing
+ * separately from scope range. In this example, that would correctly merge
+ * the scopes of $3 with obj.
+ * Runtime validation and optimizations such as ReactiveGraph-based reordering
+ * require this as well.
+ *
+ * A tempting fix is to instead extend $3's ReactiveScope range up to include
+ * $2 (the PropertyLoad). This fixes dependency deduping but not reordering
+ * and mutability.
+ */
+function Component({prop}) {
+  let obj = shallowCopy(prop);
+  const aliasedObj = identity(obj);
+
+  // [obj.id] currently is assigned its own reactive scope
+  const id = [obj.id];
+
+  // Writing to the alias may reassign to previously captured references.
+  // The compiler currently produces valid output, but this breaks with
+  // reordering, recycleInto, and other potential optimizations.
+  mutate(aliasedObj);
+  setPropertyByKey(aliasedObj, 'id', prop.id + 1);
+
+  return <Stringify id={id} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: {id: 1}}],
+  sequentialRenders: [{prop: {id: 1}}, {prop: {id: 1}}, {prop: {id: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-filter.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-filter.expect.md
new file mode 100644
index 00000000000..b3531c225d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-filter.expect.md
@@ -0,0 +1,93 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.filter(Boolean);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(13);
+  const { value } = t0;
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { value: "foo" };
+    t2 = { value: "bar" };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== value) {
+    t3 = [t1, t2, { value }];
+    $[2] = value;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const arr = t3;
+  useIdentity(null);
+  let t4;
+  if ($[4] !== arr) {
+    t4 = arr.filter(Boolean);
+    $[4] = arr;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const derived = t4;
+  let t5;
+  if ($[6] !== derived) {
+    t5 = derived.at(0);
+    $[6] = derived;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== derived) {
+    t6 = derived.at(-1);
+    $[8] = derived;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t5 || $[11] !== t6) {
+    t7 = (
+      <Stringify>
+        {t5}
+        {t6}
+      </Stringify>
+    );
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  return t7;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-filter.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-filter.js
new file mode 100644
index 00000000000..3229088e1da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-filter.js
@@ -0,0 +1,12 @@
+// @enableNewMutationAliasingModel
+function Component({value}) {
+  const arr = [{value: 'foo'}, {value: 'bar'}, {value}];
+  useIdentity(null);
+  const derived = arr.filter(Boolean);
+  return (
+    <Stringify>
+      {derived.at(0)}
+      {derived.at(-1)}
+    </Stringify>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.expect.md
new file mode 100644
index 00000000000..70872381885
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component(props) {
+  // This item is part of the receiver, should be memoized
+  const item = {a: props.a};
+  const items = [item];
+  const mapped = items.map(item => item);
+  // mapped[0].a = null;
+  return mapped;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {id: 42}}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.a) {
+    const item = { a: props.a };
+    const items = [item];
+    t0 = items.map(_temp);
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const mapped = t0;
+  return mapped;
+}
+function _temp(item_0) {
+  return item_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { id: 42 } }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":{"id":42}}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.js
new file mode 100644
index 00000000000..42e32b3e38b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.js
@@ -0,0 +1,15 @@
+// @enableNewMutationAliasingModel
+function Component(props) {
+  // This item is part of the receiver, should be memoized
+  const item = {a: props.a};
+  const items = [item];
+  const mapped = items.map(item => item);
+  // mapped[0].a = null;
+  return mapped;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {id: 42}}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.expect.md
new file mode 100644
index 00000000000..7bc2c193cf7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.expect.md
@@ -0,0 +1,134 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Forked from array-map-simple.js
+ *
+ * Named lambdas (e.g. cb1) may be defined in the top scope of a function and
+ * used in a different lambda (getArrMap1).
+ *
+ * Here, we should try to determine if cb1 is actually called. In this case:
+ * - getArrMap1 is assumed to be called as it's passed to JSX
+ * - cb1 is not assumed to be called since it's only used as a call operand
+ */
+function useFoo({arr1, arr2}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const getArrMap1 = () => arr1.map(cb1);
+  const cb2 = e => arr2[0].value + e.value;
+  const getArrMap2 = () => arr1.map(cb2);
+  return (
+    <Stringify
+      getArrMap1={getArrMap1}
+      getArrMap2={getArrMap2}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { Stringify } from "shared-runtime";
+
+/**
+ * Forked from array-map-simple.js
+ *
+ * Named lambdas (e.g. cb1) may be defined in the top scope of a function and
+ * used in a different lambda (getArrMap1).
+ *
+ * Here, we should try to determine if cb1 is actually called. In this case:
+ * - getArrMap1 is assumed to be called as it's passed to JSX
+ * - cb1 is not assumed to be called since it's only used as a call operand
+ */
+function useFoo(t0) {
+  const $ = _c(13);
+  const { arr1, arr2 } = t0;
+  let t1;
+  if ($[0] !== arr1[0]) {
+    t1 = (e) => arr1[0].value + e.value;
+    $[0] = arr1[0];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const cb1 = t1;
+  let t2;
+  if ($[2] !== arr1 || $[3] !== cb1) {
+    t2 = () => arr1.map(cb1);
+    $[2] = arr1;
+    $[3] = cb1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const getArrMap1 = t2;
+  let t3;
+  if ($[5] !== arr2) {
+    t3 = (e_0) => arr2[0].value + e_0.value;
+    $[5] = arr2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const cb2 = t3;
+  let t4;
+  if ($[7] !== arr1 || $[8] !== cb2) {
+    t4 = () => arr1.map(cb2);
+    $[7] = arr1;
+    $[8] = cb2;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const getArrMap2 = t4;
+  let t5;
+  if ($[10] !== getArrMap1 || $[11] !== getArrMap2) {
+    t5 = (
+      <Stringify
+        getArrMap1={getArrMap1}
+        getArrMap2={getArrMap2}
+        shouldInvokeFns={true}
+      />
+    );
+    $[10] = getArrMap1;
+    $[11] = getArrMap2;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arr1: [], arr2: [] }],
+  sequentialRenders: [
+    { arr1: [], arr2: [] },
+    { arr1: [], arr2: null },
+    { arr1: [{ value: 1 }, { value: 2 }], arr2: [{ value: -1 }] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getArrMap1":{"kind":"Function","result":[]},"getArrMap2":{"kind":"Function","result":[]},"shouldInvokeFns":true}</div>
+<div>{"getArrMap1":{"kind":"Function","result":[]},"getArrMap2":{"kind":"Function","result":[]},"shouldInvokeFns":true}</div>
+<div>{"getArrMap1":{"kind":"Function","result":[2,3]},"getArrMap2":{"kind":"Function","result":[0,1]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.js
new file mode 100644
index 00000000000..faa34747da1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.js
@@ -0,0 +1,36 @@
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Forked from array-map-simple.js
+ *
+ * Named lambdas (e.g. cb1) may be defined in the top scope of a function and
+ * used in a different lambda (getArrMap1).
+ *
+ * Here, we should try to determine if cb1 is actually called. In this case:
+ * - getArrMap1 is assumed to be called as it's passed to JSX
+ * - cb1 is not assumed to be called since it's only used as a call operand
+ */
+function useFoo({arr1, arr2}) {
+  const cb1 = e => arr1[0].value + e.value;
+  const getArrMap1 = () => arr1.map(cb1);
+  const cb2 = e => arr2[0].value + e.value;
+  const getArrMap2 = () => arr1.map(cb2);
+  return (
+    <Stringify
+      getArrMap1={getArrMap1}
+      getArrMap2={getArrMap2}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arr1: [], arr2: []}],
+  sequentialRenders: [
+    {arr1: [], arr2: []},
+    {arr1: [], arr2: null},
+    {arr1: [{value: 1}, {value: 2}], arr2: [{value: -1}]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-push.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-push.expect.md
new file mode 100644
index 00000000000..b2564a7a90d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-push.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b, c}) {
+  const x = [];
+  x.push(a);
+  const merged = {b}; // could be mutated by mutate(x) below
+  x.push(merged);
+  mutate(x);
+  const independent = {c}; // can't be later mutated
+  x.push(independent);
+  return <Foo value={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(6);
+  const { a, b, c } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    const x = [];
+    x.push(a);
+    const merged = { b };
+    x.push(merged);
+    mutate(x);
+    let t2;
+    if ($[4] !== c) {
+      t2 = { c };
+      $[4] = c;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    const independent = t2;
+    x.push(independent);
+    t1 = <Foo value={x} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-push.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-push.js
new file mode 100644
index 00000000000..eb7f31bff63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-push.js
@@ -0,0 +1,11 @@
+// @enableNewMutationAliasingModel
+function Component({a, b, c}) {
+  const x = [];
+  x.push(a);
+  const merged = {b}; // could be mutated by mutate(x) below
+  x.push(merged);
+  mutate(x);
+  const independent = {c}; // can't be later mutated
+  x.push(independent);
+  return <Foo value={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation-via-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation-via-function-expression.expect.md
new file mode 100644
index 00000000000..72f0e7fb28e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation-via-function-expression.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {a};
+  const y = [b];
+  const f = () => {
+    y.x = x;
+    mutate(y);
+  };
+  f();
+  return <div>{x}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a };
+    const y = [b];
+    const f = () => {
+      y.x = x;
+      mutate(y);
+    };
+    f();
+    t1 = <div>{x}</div>;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation-via-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation-via-function-expression.js
new file mode 100644
index 00000000000..8d4bb23742b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation-via-function-expression.js
@@ -0,0 +1,11 @@
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {a};
+  const y = [b];
+  const f = () => {
+    y.x = x;
+    mutate(y);
+  };
+  f();
+  return <div>{x}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation.expect.md
new file mode 100644
index 00000000000..0753f007b7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {a};
+  const y = [b];
+  y.x = x;
+  mutate(y);
+  return <div>{x}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a };
+    const y = [b];
+    y.x = x;
+    mutate(y);
+    t1 = <div>{x}</div>;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation.js
new file mode 100644
index 00000000000..480221fef4d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/basic-mutation.js
@@ -0,0 +1,8 @@
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {a};
+  const y = [b];
+  y.x = x;
+  mutate(y);
+  return <div>{x}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-backedge-phi-with-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-backedge-phi-with-later-mutation.expect.md
new file mode 100644
index 00000000000..99e9a66924a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-backedge-phi-with-later-mutation.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {arrayPush, Stringify} from 'shared-runtime';
+
+function Component({prop1, prop2}) {
+  'use memo';
+
+  let x = [{value: prop1}];
+  let z;
+  while (x.length < 2) {
+    // there's a phi here for x (value before the loop and the reassignment later)
+
+    // this mutation occurs before the reassigned value
+    arrayPush(x, {value: prop2});
+
+    if (x[0].value === prop1) {
+      x = [{value: prop2}];
+      const y = x;
+      z = y[0];
+    }
+  }
+  z.other = true;
+  return <Stringify z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop1: 0, prop2: 'a'}],
+  sequentialRenders: [
+    {prop1: 0, prop2: 'a'},
+    {prop1: 1, prop2: 'a'},
+    {prop1: 1, prop2: 'b'},
+    {prop1: 0, prop2: 'b'},
+    {prop1: 0, prop2: 'a'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { arrayPush, Stringify } from "shared-runtime";
+
+function Component(t0) {
+  "use memo";
+  const $ = _c(5);
+  const { prop1, prop2 } = t0;
+  let z;
+  if ($[0] !== prop1 || $[1] !== prop2) {
+    let x = [{ value: prop1 }];
+    while (x.length < 2) {
+      arrayPush(x, { value: prop2 });
+
+      if (x[0].value === prop1) {
+        x = [{ value: prop2 }];
+        const y = x;
+        z = y[0];
+      }
+    }
+
+    z.other = true;
+    $[0] = prop1;
+    $[1] = prop2;
+    $[2] = z;
+  } else {
+    z = $[2];
+  }
+  let t1;
+  if ($[3] !== z) {
+    t1 = <Stringify z={z} />;
+    $[3] = z;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prop1: 0, prop2: "a" }],
+  sequentialRenders: [
+    { prop1: 0, prop2: "a" },
+    { prop1: 1, prop2: "a" },
+    { prop1: 1, prop2: "b" },
+    { prop1: 0, prop2: "b" },
+    { prop1: 0, prop2: "a" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"z":{"value":"a","other":true}}</div>
+<div>{"z":{"value":"a","other":true}}</div>
+<div>{"z":{"value":"b","other":true}}</div>
+<div>{"z":{"value":"b","other":true}}</div>
+<div>{"z":{"value":"a","other":true}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-backedge-phi-with-later-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-backedge-phi-with-later-mutation.js
new file mode 100644
index 00000000000..042cae823f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-backedge-phi-with-later-mutation.js
@@ -0,0 +1,35 @@
+// @enableNewMutationAliasingModel
+import {arrayPush, Stringify} from 'shared-runtime';
+
+function Component({prop1, prop2}) {
+  'use memo';
+
+  let x = [{value: prop1}];
+  let z;
+  while (x.length < 2) {
+    // there's a phi here for x (value before the loop and the reassignment later)
+
+    // this mutation occurs before the reassigned value
+    arrayPush(x, {value: prop2});
+
+    if (x[0].value === prop1) {
+      x = [{value: prop2}];
+      const y = x;
+      z = y[0];
+    }
+  }
+  z.other = true;
+  return <Stringify z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop1: 0, prop2: 'a'}],
+  sequentialRenders: [
+    {prop1: 0, prop2: 'a'},
+    {prop1: 1, prop2: 'a'},
+    {prop1: 1, prop2: 'b'},
+    {prop1: 0, prop2: 'b'},
+    {prop1: 0, prop2: 'a'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-in-function-expression-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-in-function-expression-indirect.expect.md
new file mode 100644
index 00000000000..34c41ff54cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-in-function-expression-indirect.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+import {Stringify, mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = {y};
+    let b = {x};
+    a.y.x = b;
+  };
+  f0();
+  mutate(y);
+  return <Stringify x={y} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, mutate } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let t1;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    const y = { bar };
+    const f0 = function () {
+      const a = { y };
+      const b = { x };
+      a.y.x = b;
+    };
+    f0();
+    mutate(y);
+    t1 = <Stringify x={y} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 2, bar: 3 }],
+  sequentialRenders: [
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 3 },
+    { foo: 2, bar: 4 },
+    { foo: 3, bar: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":{"bar":3,"x":{"x":{"foo":2}},"wat0":"joe"}}</div>
+<div>{"x":{"bar":3,"x":{"x":{"foo":2}},"wat0":"joe"}}</div>
+<div>{"x":{"bar":4,"x":{"x":{"foo":2}},"wat0":"joe"}}</div>
+<div>{"x":{"bar":4,"x":{"x":{"foo":3}},"wat0":"joe"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-in-function-expression-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-in-function-expression-indirect.js
new file mode 100644
index 00000000000..5aa39d3ffb3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capture-in-function-expression-indirect.js
@@ -0,0 +1,25 @@
+import {Stringify, mutate} from 'shared-runtime';
+
+function Component({foo, bar}) {
+  let x = {foo};
+  let y = {bar};
+  const f0 = function () {
+    let a = {y};
+    let b = {x};
+    a.y.x = b;
+  };
+  f0();
+  mutate(y);
+  return <Stringify x={y} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 2, bar: 3}],
+  sequentialRenders: [
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 3},
+    {foo: 2, bar: 4},
+    {foo: 3, bar: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.expect.md
new file mode 100644
index 00000000000..d1434e95b82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0][1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function bar(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== x[0][1]) {
+    y = {};
+
+    y = x[0][1];
+    $[2] = x[0][1];
+    $[3] = y;
+  } else {
+    y = $[3];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [["val1", "val2"]],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "val2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.js
new file mode 100644
index 00000000000..a77287910a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.js
@@ -0,0 +1,16 @@
+// @enableNewMutationAliasingModel
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0][1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [['val1', 'val2']],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.expect.md
new file mode 100644
index 00000000000..80bb009ba25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function bar(a, b) {
+  let x = [a, b];
+  let y = {};
+  let t = {};
+  (function () {
+    y = x[0][1];
+    t = x[1][0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function bar(a, b) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== a || $[1] !== b) {
+    t0 = [a, b];
+    $[0] = a;
+    $[1] = b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  let y;
+  if ($[3] !== x[0][1] || $[4] !== x[1][0]) {
+    y = {};
+    let t = {};
+
+    y = x[0][1];
+    t = x[1][0];
+    $[3] = x[0][1];
+    $[4] = x[1][0];
+    $[5] = y;
+  } else {
+    y = $[5];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.js
new file mode 100644
index 00000000000..9afe5994b21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.js
@@ -0,0 +1,20 @@
+// @enableNewMutationAliasingModel
+function bar(a, b) {
+  let x = [a, b];
+  let y = {};
+  let t = {};
+  (function () {
+    y = x[0][1];
+    t = x[1][0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [
+    [1, 2],
+    [2, 3],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.expect.md
new file mode 100644
index 00000000000..663d1f3d567
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0].a[1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{a: ['val1', 'val2']}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function bar(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== x[0].a[1]) {
+    y = {};
+
+    y = x[0].a[1];
+    $[2] = x[0].a[1];
+    $[3] = y;
+  } else {
+    y = $[3];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{ a: ["val1", "val2"] }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "val2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.js
new file mode 100644
index 00000000000..5a3cb878485
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.js
@@ -0,0 +1,16 @@
+// @enableNewMutationAliasingModel
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0].a[1];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: [{a: ['val1', 'val2']}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.expect.md
new file mode 100644
index 00000000000..58694faf57d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ['TodoAdd'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function bar(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== x[0]) {
+    y = {};
+
+    y = x[0];
+    $[2] = x[0];
+    $[3] = y;
+  } else {
+    y = $[3];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ["TodoAdd"],
+};
+
+```
+      
+### Eval output
+(kind: ok) "TodoAdd"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.js
new file mode 100644
index 00000000000..0b95fc02a2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.js
@@ -0,0 +1,15 @@
+// @enableNewMutationAliasingModel
+function bar(a) {
+  let x = [a];
+  let y = {};
+  (function () {
+    y = x[0];
+  })();
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: bar,
+  params: ['TodoAdd'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md
new file mode 100644
index 00000000000..1241971d827
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender @enableNewMutationAliasingModel
+
+function Component() {
+  const date = Date.now();
+  const now = performance.now();
+  const rand = Math.random();
+  return <Foo date={date} now={now} rand={rand} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Cannot call impure function during render
+
+`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   const date = Date.now();
+    |                ^^^^^^^^^^ Cannot call impure function
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+  7 |   return <Foo date={date} now={now} rand={rand} />;
+
+Error: Cannot call impure function during render
+
+`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:5:14
+  3 | function Component() {
+  4 |   const date = Date.now();
+> 5 |   const now = performance.now();
+    |               ^^^^^^^^^^^^^^^^^ Cannot call impure function
+  6 |   const rand = Math.random();
+  7 |   return <Foo date={date} now={now} rand={rand} />;
+  8 | }
+
+Error: Cannot call impure function during render
+
+`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:6:15
+  4 |   const date = Date.now();
+  5 |   const now = performance.now();
+> 6 |   const rand = Math.random();
+    |                ^^^^^^^^^^^^^ Cannot call impure function
+  7 |   return <Foo date={date} now={now} rand={rand} />;
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.js
new file mode 100644
index 00000000000..83cf3e04f2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.js
@@ -0,0 +1,8 @@
+// @validateNoImpureFunctionsInRender @enableNewMutationAliasingModel
+
+function Component() {
+  const date = Date.now();
+  const now = performance.now();
+  const rand = Math.random();
+  return <Foo date={date} now={now} rand={rand} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
new file mode 100644
index 00000000000..babb4e89697
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onClick = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  return <button onClick={onClick}>Submit</button>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-jsx-callback.ts:6:4
+  4 |
+  5 |   const reassignLocal = newValue => {
+> 6 |     local = newValue;
+    |     ^^^^^ Cannot reassign `local` after render completes
+  7 |   };
+  8 |
+  9 |   const onClick = newValue => {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.js
new file mode 100644
index 00000000000..2cfb336bcf5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.js
@@ -0,0 +1,33 @@
+// @enableNewMutationAliasingModel
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onClick = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      //
+      // To protect against this, we disallow reassigning locals from
+      // functions that escape
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  return <button onClick={onClick}>Submit</button>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.expect.md
new file mode 100644
index 00000000000..d78e4becec7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+//@flow @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel
+
+import {useCallback} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function Component({content, refetch}) {
+  // This callback function accesses a hoisted const as a dependency,
+  // but it cannot reference it as a dependency since that would be a
+  // TDZ violation!
+  const onRefetch = useCallback(() => {
+    refetch(data);
+  }, [refetch]);
+
+  // The context variable gets frozen here since it's passed to a hook
+  const onSubmit = useIdentity(onRefetch);
+
+  // This has to error: onRefetch needs to memoize with `content` as a
+  // dependency, but the dependency comes later
+  const {data = null} = content;
+
+  return <Foo data={data} onSubmit={onSubmit} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access variable before it is declared
+
+`data` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.
+
+   9 |   // TDZ violation!
+  10 |   const onRefetch = useCallback(() => {
+> 11 |     refetch(data);
+     |             ^^^^ `data` accessed before it is declared
+  12 |   }, [refetch]);
+  13 |
+  14 |   // The context variable gets frozen here since it's passed to a hook
+
+  17 |   // This has to error: onRefetch needs to memoize with `content` as a
+  18 |   // dependency, but the dependency comes later
+> 19 |   const {data = null} = content;
+     |          ^^^^^^^^^^^ `data` is declared here
+  20 |
+  21 |   return <Foo data={data} onSubmit={onSubmit} />;
+  22 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.js
new file mode 100644
index 00000000000..30d1e0e35e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.js
@@ -0,0 +1,22 @@
+//@flow @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel
+
+import {useCallback} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function Component({content, refetch}) {
+  // This callback function accesses a hoisted const as a dependency,
+  // but it cannot reference it as a dependency since that would be a
+  // TDZ violation!
+  const onRefetch = useCallback(() => {
+    refetch(data);
+  }, [refetch]);
+
+  // The context variable gets frozen here since it's passed to a hook
+  const onSubmit = useIdentity(onRefetch);
+
+  // This has to error: onRefetch needs to memoize with `content` as a
+  // dependency, but the dependency comes later
+  const {data = null} = content;
+
+  return <Foo data={data} onSubmit={onSubmit} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md
new file mode 100644
index 00000000000..f3ebad71dfc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// This case is already unsound in source, so we can safely bailout
+function Foo(props) {
+  let x = [];
+  x.push(props);
+
+  // makeArray() is captured, but depsList contains [props]
+  const cb = useCallback(() => [x], [x]);
+
+  x = makeArray();
+
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.invalid-useCallback-captures-reassigned-context.ts:11:37
+   9 |
+  10 |   // makeArray() is captured, but depsList contains [props]
+> 11 |   const cb = useCallback(() => [x], [x]);
+     |                                      ^ This dependency may be modified later
+  12 |
+  13 |   x = makeArray();
+  14 |
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.invalid-useCallback-captures-reassigned-context.ts:11:25
+   9 |
+  10 |   // makeArray() is captured, but depsList contains [props]
+> 11 |   const cb = useCallback(() => [x], [x]);
+     |                          ^^^^^^^^^ Could not preserve existing memoization
+  12 |
+  13 |   x = makeArray();
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js
new file mode 100644
index 00000000000..d084df5e7a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js
@@ -0,0 +1,20 @@
+// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// This case is already unsound in source, so we can safely bailout
+function Foo(props) {
+  let x = [];
+  x.push(props);
+
+  // makeArray() is captured, but depsList contains [props]
+  const cb = useCallback(() => [x], [x]);
+
+  x = makeArray();
+
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.expect.md
new file mode 100644
index 00000000000..f73f23b262d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {a};
+  useFreeze(x);
+  x.y = true;
+  return <div>error</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook.
+
+error.mutate-frozen-value.ts:5:2
+  3 |   const x = {a};
+  4 |   useFreeze(x);
+> 5 |   x.y = true;
+    |   ^ value cannot be modified
+  6 |   return <div>error</div>;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.js
new file mode 100644
index 00000000000..4964f230491
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.js
@@ -0,0 +1,7 @@
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {a};
+  useFreeze(x);
+  x.y = true;
+  return <div>error</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.expect.md
new file mode 100644
index 00000000000..3de6acb91ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function useHook(a, b) {
+  b.test = 1;
+  a.test = 2;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.mutate-hook-argument.ts:3:2
+  1 | // @enableNewMutationAliasingModel
+  2 | function useHook(a, b) {
+> 3 |   b.test = 1;
+    |   ^ value cannot be modified
+  4 |   a.test = 2;
+  5 | }
+  6 |
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.mutate-hook-argument.ts:4:2
+  2 | function useHook(a, b) {
+  3 |   b.test = 1;
+> 4 |   a.test = 2;
+    |   ^ value cannot be modified
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.js
new file mode 100644
index 00000000000..41c5b991324
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.js
@@ -0,0 +1,5 @@
+// @enableNewMutationAliasingModel
+function useHook(a, b) {
+  b.test = 1;
+  a.test = 2;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.expect.md
new file mode 100644
index 00000000000..80a12e5d409
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+let x = {a: 42};
+
+function Component(props) {
+  foo(() => {
+    x.a = 10;
+    x.a = 20;
+  });
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.not-useEffect-external-mutate.ts:6:4
+  4 | function Component(props) {
+  5 |   foo(() => {
+> 6 |     x.a = 10;
+    |     ^ value cannot be modified
+  7 |     x.a = 20;
+  8 |   });
+  9 | }
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.not-useEffect-external-mutate.ts:7:4
+   5 |   foo(() => {
+   6 |     x.a = 10;
+>  7 |     x.a = 20;
+     |     ^ value cannot be modified
+   8 |   });
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.js
new file mode 100644
index 00000000000..ed51080726b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.js
@@ -0,0 +1,9 @@
+// @enableNewMutationAliasingModel
+let x = {a: 42};
+
+function Component(props) {
+  foo(() => {
+    x.a = 10;
+    x.a = 20;
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.expect.md
new file mode 100644
index 00000000000..9d106cd4f4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component() {
+  const foo = () => {
+    // Cannot assign to globals
+    someUnknownGlobal = true;
+    moduleLocal = true;
+  };
+  foo();
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global-indirect.ts:5:4
+  3 |   const foo = () => {
+  4 |     // Cannot assign to globals
+> 5 |     someUnknownGlobal = true;
+    |     ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
+  6 |     moduleLocal = true;
+  7 |   };
+  8 |   foo();
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global-indirect.ts:6:4
+  4 |     // Cannot assign to globals
+  5 |     someUnknownGlobal = true;
+> 6 |     moduleLocal = true;
+    |     ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
+  7 |   };
+  8 |   foo();
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.js
new file mode 100644
index 00000000000..6d6681e60ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.js
@@ -0,0 +1,9 @@
+// @enableNewMutationAliasingModel
+function Component() {
+  const foo = () => {
+    // Cannot assign to globals
+    someUnknownGlobal = true;
+    moduleLocal = true;
+  };
+  foo();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.expect.md
new file mode 100644
index 00000000000..01ff6085213
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component() {
+  // Cannot assign to globals
+  someUnknownGlobal = true;
+  moduleLocal = true;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global.ts:4:2
+  2 | function Component() {
+  3 |   // Cannot assign to globals
+> 4 |   someUnknownGlobal = true;
+    |   ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
+  5 |   moduleLocal = true;
+  6 | }
+  7 |
+
+Error: Cannot reassign variables declared outside of the component/hook
+
+Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+error.reassignment-to-global.ts:5:2
+  3 |   // Cannot assign to globals
+  4 |   someUnknownGlobal = true;
+> 5 |   moduleLocal = true;
+    |   ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.js
new file mode 100644
index 00000000000..41b706866bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.js
@@ -0,0 +1,6 @@
+// @enableNewMutationAliasingModel
+function Component() {
+  // Cannot assign to globals
+  someUnknownGlobal = true;
+  moduleLocal = true;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md
new file mode 100644
index 00000000000..44f358caade
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component(props) {
+  function hasErrors() {
+    let hasErrors = false;
+    if (props.items == null) {
+      hasErrors = true;
+    }
+    return hasErrors;
+  }
+  return hasErrors();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
+
+<unknown> hasErrors_0$15:TFunction.
+
+error.todo-repro-named-function-with-shadowed-local-same-name.ts:10:9
+   8 |     return hasErrors;
+   9 |   }
+> 10 |   return hasErrors();
+     |          ^^^^^^^^^ this is uninitialized
+  11 | }
+  12 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.js
new file mode 100644
index 00000000000..b58c0aea7da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.js
@@ -0,0 +1,11 @@
+// @enableNewMutationAliasingModel
+function Component(props) {
+  function hasErrors() {
+    let hasErrors = false;
+    if (props.items == null) {
+      hasErrors = true;
+    }
+    return hasErrors;
+  }
+  return hasErrors();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/iife-return-modified-later-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/iife-return-modified-later-phi.expect.md
new file mode 100644
index 00000000000..22f967883b0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/iife-return-modified-later-phi.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = (() => {
+    if (props.cond) {
+      return [];
+    } else {
+      return null;
+    }
+  })();
+  items?.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let items;
+  if ($[0] !== props.a || $[1] !== props.cond) {
+    let t0;
+    if (props.cond) {
+      t0 = [];
+    } else {
+      t0 = null;
+    }
+    items = t0;
+
+    items?.push(props.a);
+    $[0] = props.a;
+    $[1] = props.cond;
+    $[2] = items;
+  } else {
+    items = $[2];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: {} }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/iife-return-modified-later-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/iife-return-modified-later-phi.js
new file mode 100644
index 00000000000..f4f953d294e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/iife-return-modified-later-phi.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const items = (() => {
+    if (props.cond) {
+      return [];
+    } else {
+      return null;
+    }
+  })();
+  items?.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md
new file mode 100644
index 00000000000..edc266b9f33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({foo}) {
+  const arr = [];
+  // Taking either arr[0].value or arr as a dependency is reasonable
+  // as long as developers know what to expect.
+  useEffect(() => print(arr[0]?.value), AUTODEPS);
+  arr.push({value: foo});
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import { useEffect, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function Component(t0) {
+  const { foo } = t0;
+  const arr = [];
+
+  useEffect(() => print(arr[0]?.value), [arr[0]?.value]);
+  arr.push({ value: foo });
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 1 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":346},"end":{"line":9,"column":49,"index":393},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":368},"end":{"line":9,"column":27,"index":371},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) [{"value":1}]
+logs: [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js
new file mode 100644
index 00000000000..ee59d8fe4ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js
@@ -0,0 +1,17 @@
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import {useEffect, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({foo}) {
+  const arr = [];
+  // Taking either arr[0].value or arr as a dependency is reasonable
+  // as long as developers know what to expect.
+  useEffect(() => print(arr[0]?.value), AUTODEPS);
+  arr.push({value: foo});
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
new file mode 100644
index 00000000000..acf9c28cabd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({arrRef}) {
+  // Avoid taking arr.current as a dependency
+  useEffect(() => print(arrRef.current), AUTODEPS);
+  arrRef.current.val = 2;
+  return arrRef;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arrRef: {current: {val: 'initial ref value'}}}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+
+import { useEffect, useRef, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+function Component(t0) {
+  const { arrRef } = t0;
+
+  useEffect(() => print(arrRef.current), [arrRef]);
+  arrRef.current.val = 2;
+  return arrRef;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arrRef: { current: { val: "initial ref value" } } }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":269},"end":{"line":8,"column":50,"index":317},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":291},"end":{"line":8,"column":30,"index":297},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) {"current":{"val":2}}
+logs: [{ val: 2 }]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js
new file mode 100644
index 00000000000..9d0f7e194d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js
@@ -0,0 +1,16 @@
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+
+import {useEffect, useRef, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+function Component({arrRef}) {
+  // Avoid taking arr.current as a dependency
+  useEffect(() => print(arrRef.current), AUTODEPS);
+  arrRef.current.val = 2;
+  return arrRef;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arrRef: {current: {val: 'initial ref value'}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md
new file mode 100644
index 00000000000..93e7f1e0609
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({foo}) {
+  const arr = [];
+  useEffect(() => {
+    arr.push(foo);
+  }, AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import { useEffect, AUTODEPS } from "react";
+
+function Component(t0) {
+  const { foo } = t0;
+  const arr = [];
+  useEffect(() => {
+    arr.push(foo);
+  }, [arr, foo]);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 1 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":191},"end":{"line":8,"column":14,"index":242},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":222},"end":{"line":7,"column":16,"index":225},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js
new file mode 100644
index 00000000000..21298604043
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js
@@ -0,0 +1,16 @@
+// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import {useEffect, AUTODEPS} from 'react';
+
+function Component({foo}) {
+  const arr = [];
+  useEffect(() => {
+    arr.push(foo);
+  }, AUTODEPS);
+  arr.push(2);
+  return arr;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections-2.expect.md
new file mode 100644
index 00000000000..b42bfb001ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections-2.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = {a, b};
+  const f = () => {
+    const y = [x];
+    return y[0];
+  };
+  const x0 = f();
+  const z = [x0];
+  const x1 = z[0];
+  x1.key = 'value';
+  return <Stringify x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a, b };
+    const f = () => {
+      const y = [x];
+      return y[0];
+    };
+    const x0 = f();
+    const z = [x0];
+    const x1 = z[0];
+    x1.key = "value";
+    t1 = <Stringify x={x} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":{"a":0,"b":1,"key":"value"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections-2.js
new file mode 100644
index 00000000000..6a981e84089
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections-2.js
@@ -0,0 +1,20 @@
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = {a, b};
+  const f = () => {
+    const y = [x];
+    return y[0];
+  };
+  const x0 = f();
+  const z = [x0];
+  const x1 = z[0];
+  x1.key = 'value';
+  return <Stringify x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections.expect.md
new file mode 100644
index 00000000000..4dcb9110ab0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = {a, b};
+  const y = [x];
+  const f = () => {
+    const x0 = y[0];
+    return [x0];
+  };
+  const z = f();
+  const x1 = z[0];
+  x1.key = 'value';
+  return <Stringify x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a, b };
+    const y = [x];
+    const f = () => {
+      const x0 = y[0];
+      return [x0];
+    };
+    const z = f();
+    const x1 = z[0];
+    x1.key = "value";
+    t1 = <Stringify x={x} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":{"a":0,"b":1,"key":"value"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections.js
new file mode 100644
index 00000000000..aecd27a0930
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-function-call-indirections.js
@@ -0,0 +1,20 @@
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = {a, b};
+  const y = [x];
+  const f = () => {
+    const x0 = y[0];
+    return [x0];
+  };
+  const z = f();
+  const x1 = z[0];
+  x1.key = 'value';
+  return <Stringify x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-indirections.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-indirections.expect.md
new file mode 100644
index 00000000000..5f14dd1fe07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-indirections.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = {a, b};
+  const y = [x];
+  const x0 = y[0];
+  const z = [x0];
+  const x1 = z[0];
+  x1.key = 'value';
+  return <Stringify x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a, b };
+    const y = [x];
+    const x0 = y[0];
+    const z = [x0];
+    const x1 = z[0];
+    x1.key = "value";
+    t1 = <Stringify x={x} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":{"a":0,"b":1,"key":"value"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-indirections.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-indirections.js
new file mode 100644
index 00000000000..ba8808eedfe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-boxing-unboxing-indirections.js
@@ -0,0 +1,17 @@
+// @enableNewMutationAliasingModel
+import {Stringify} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = {a, b};
+  const y = [x];
+  const x0 = y[0];
+  const z = [x0];
+  const x1 = z[0];
+  x1.key = 'value';
+  return <Stringify x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md
new file mode 100644
index 00000000000..e7b0fe8e75e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const f = () => {
+    return identity(x);
+  };
+  const x2 = f();
+  x2.b = b;
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import { identity, ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    x = { a };
+    const f = () => identity(x);
+
+    const x2 = f();
+    x2.b = b;
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== a || $[4] !== b) {
+    t1 = [a, b];
+    $[3] = a;
+    $[4] = b;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1 || $[7] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[6] = t1;
+    $[7] = x;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":{"a":0,"b":0}}</div>
+<div>{"inputs":[0,1],"output":{"a":0,"b":1}}</div>
+<div>{"inputs":[1,1],"output":{"a":1,"b":1}}</div>
+<div>{"inputs":[0,0],"output":{"a":0,"b":0}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js
new file mode 100644
index 00000000000..2ac414570d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js
@@ -0,0 +1,25 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const f = () => {
+    return identity(x);
+  };
+  const x2 = f();
+  x2.b = b;
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md
new file mode 100644
index 00000000000..a392cb1137f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const x2 = identity(x);
+  x2.b = b;
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import { identity, ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    x = { a };
+    const x2 = identity(x);
+    x2.b = b;
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== a || $[4] !== b) {
+    t1 = [a, b];
+    $[3] = a;
+    $[4] = b;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1 || $[7] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[6] = t1;
+    $[7] = x;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":{"a":0,"b":0}}</div>
+<div>{"inputs":[0,1],"output":{"a":0,"b":1}}</div>
+<div>{"inputs":[1,1],"output":{"a":1,"b":1}}</div>
+<div>{"inputs":[0,0],"output":{"a":0,"b":0}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js
new file mode 100644
index 00000000000..33ba3a106ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js
@@ -0,0 +1,22 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const x2 = identity(x);
+  x2.b = b;
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-propertyload.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-propertyload.expect.md
new file mode 100644
index 00000000000..34345951ed7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-propertyload.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {};
+  const y = {x};
+  const z = y.x;
+  z.true = false;
+  return <div>{z}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(1);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = {};
+    const y = { x };
+    const z = y.x;
+    z.true = false;
+    t1 = <div>{z}</div>;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-propertyload.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-propertyload.js
new file mode 100644
index 00000000000..bff1ea4c350
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-propertyload.js
@@ -0,0 +1,8 @@
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = {};
+  const y = {x};
+  const z = y.x;
+  z.true = false;
+  return <div>{z}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/nullable-objects-assume-invoked-direct-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/nullable-objects-assume-invoked-direct-call.expect.md
new file mode 100644
index 00000000000..5033da8eac4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/nullable-objects-assume-invoked-direct-call.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {useState} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function useMakeCallback({obj}: {obj: {value: number}}) {
+  const [state, setState] = useState(0);
+  const cb = () => {
+    if (obj.value !== state) setState(obj.value);
+  };
+  useIdentity();
+  cb();
+  return [cb];
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { useState } from "react";
+import { useIdentity } from "shared-runtime";
+
+function useMakeCallback(t0) {
+  const $ = _c(5);
+  const { obj } = t0;
+  const [state, setState] = useState(0);
+  let t1;
+  if ($[0] !== obj.value || $[1] !== state) {
+    t1 = () => {
+      if (obj.value !== state) {
+        setState(obj.value);
+      }
+    };
+    $[0] = obj.value;
+    $[1] = state;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const cb = t1;
+
+  useIdentity();
+  cb();
+  let t2;
+  if ($[3] !== cb) {
+    t2 = [cb];
+    $[3] = cb;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{ obj: { value: 1 } }],
+  sequentialRenders: [{ obj: { value: 1 } }, { obj: { value: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["[[ function params=0 ]]"]
+["[[ function params=0 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/nullable-objects-assume-invoked-direct-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/nullable-objects-assume-invoked-direct-call.js
new file mode 100644
index 00000000000..1f2d69d9319
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/nullable-objects-assume-invoked-direct-call.js
@@ -0,0 +1,18 @@
+// @enableNewMutationAliasingModel
+import {useState} from 'react';
+import {useIdentity} from 'shared-runtime';
+
+function useMakeCallback({obj}: {obj: {value: number}}) {
+  const [state, setState] = useState(0);
+  const cb = () => {
+    if (obj.value !== state) setState(obj.value);
+  };
+  useIdentity();
+  cb();
+  return [cb];
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMakeCallback,
+  params: [{obj: {value: 1}}],
+  sequentialRenders: [{obj: {value: 1}}, {obj: {value: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.expect.md
new file mode 100644
index 00000000000..f9f881c72af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {identity, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [key]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { identity, mutate } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let context;
+  if ($[0] !== props.value) {
+    const key = {};
+    context = { [key]: identity([props.value]) };
+    mutate(key);
+    $[0] = props.value;
+    $[1] = context;
+  } else {
+    context = $[1];
+  }
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"[object Object]":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.js
new file mode 100644
index 00000000000..923733b9c23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.js
@@ -0,0 +1,16 @@
+// @enableNewMutationAliasingModel
+import {identity, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [key]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.expect.md
new file mode 100644
index 00000000000..713a3112fe2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {a: 'key'};
+  const context = {
+    [key.a]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { identity, mutate, mutateAndReturn } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let context;
+  if ($[0] !== props.value) {
+    const key = { a: "key" };
+    const t0 = key.a;
+    const t1 = identity([props.value]);
+    let t2;
+    if ($[2] !== t1) {
+      t2 = { [t0]: t1 };
+      $[2] = t1;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    context = t2;
+    mutate(key);
+    $[0] = props.value;
+    $[1] = context;
+  } else {
+    context = $[1];
+  }
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"key":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.js
new file mode 100644
index 00000000000..516fdc1dbcf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.js
@@ -0,0 +1,16 @@
+// @enableNewMutationAliasingModel
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {a: 'key'};
+  const context = {
+    [key.a]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/potential-mutation-in-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/potential-mutation-in-function-expression.expect.md
new file mode 100644
index 00000000000..a5cfc790ebc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/potential-mutation-in-function-expression.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b, c}) {
+  const x = [a, b];
+  const f = () => {
+    maybeMutate(x);
+    // different dependency to force this not to merge with x's scope
+    console.log(c);
+  };
+  return <Foo onClick={f} value={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b, c } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    t1 = [a, b];
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const x = t1;
+  let t2;
+  if ($[3] !== c || $[4] !== x) {
+    t2 = () => {
+      maybeMutate(x);
+
+      console.log(c);
+    };
+    $[3] = c;
+    $[4] = x;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const f = t2;
+  let t3;
+  if ($[6] !== f || $[7] !== x) {
+    t3 = <Foo onClick={f} value={x} />;
+    $[6] = f;
+    $[7] = x;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/potential-mutation-in-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/potential-mutation-in-function-expression.js
new file mode 100644
index 00000000000..096f4f17ea5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/potential-mutation-in-function-expression.js
@@ -0,0 +1,10 @@
+// @enableNewMutationAliasingModel
+function Component({a, b, c}) {
+  const x = [a, b];
+  const f = () => {
+    maybeMutate(x);
+    // different dependency to force this not to merge with x's scope
+    console.log(c);
+  };
+  return <Foo onClick={f} value={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-ref.expect.md
new file mode 100644
index 00000000000..26757db1a3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-ref.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function ReactiveRefInEffect(props) {
+  const ref1 = useRef('initial value');
+  const ref2 = useRef('initial value');
+  let ref;
+  if (props.foo) {
+    ref = ref1;
+  } else {
+    ref = ref2;
+  }
+  useEffect(() => print(ref));
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function ReactiveRefInEffect(props) {
+  const $ = _c(4);
+  const ref1 = useRef("initial value");
+  const ref2 = useRef("initial value");
+  let ref;
+  if ($[0] !== props.foo) {
+    if (props.foo) {
+      ref = ref1;
+    } else {
+      ref = ref2;
+    }
+    $[0] = props.foo;
+    $[1] = ref;
+  } else {
+    ref = $[1];
+  }
+  let t0;
+  if ($[2] !== ref) {
+    t0 = () => print(ref);
+    $[2] = ref;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  useEffect(t0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-ref.js
new file mode 100644
index 00000000000..3ae653c9620
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-ref.js
@@ -0,0 +1,12 @@
+// @enableNewMutationAliasingModel
+function ReactiveRefInEffect(props) {
+  const ref1 = useRef('initial value');
+  const ref2 = useRef('initial value');
+  let ref;
+  if (props.foo) {
+    ref = ref1;
+  } else {
+    ref = ref2;
+  }
+  useEffect(() => print(ref));
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md
new file mode 100644
index 00000000000..9f9786e4be8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @enableNewMutationAliasingModel
+import {useEffect, useState, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/*
+ * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const [_state1, setState1] = useRef('initial value');
+  const [_state2, setState2] = useRef('initial value');
+  let setState;
+  if (props.foo) {
+    setState = setState1;
+  } else {
+    setState = setState2;
+  }
+  useEffect(() => print(setState), AUTODEPS);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies @enableNewMutationAliasingModel
+import { useEffect, useState, AUTODEPS } from "react";
+import { print } from "shared-runtime";
+
+/*
+ * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const $ = _c(4);
+  const [, setState1] = useRef("initial value");
+  const [, setState2] = useRef("initial value");
+  let setState;
+  if ($[0] !== props.foo) {
+    if (props.foo) {
+      setState = setState1;
+    } else {
+      setState = setState2;
+    }
+    $[0] = props.foo;
+    $[1] = setState;
+  } else {
+    setState = $[1];
+  }
+  let t0;
+  if ($[2] !== setState) {
+    t0 = () => print(setState);
+    $[2] = setState;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  useEffect(t0, [setState]);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js
new file mode 100644
index 00000000000..d3519980324
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js
@@ -0,0 +1,18 @@
+// @inferEffectDependencies @enableNewMutationAliasingModel
+import {useEffect, useState, AUTODEPS} from 'react';
+import {print} from 'shared-runtime';
+
+/*
+ * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
+ */
+function ReactiveRefInEffect(props) {
+  const [_state1, setState1] = useRef('initial value');
+  const [_state2, setState2] = useRef('initial value');
+  let setState;
+  if (props.foo) {
+    setState = setState1;
+  } else {
+    setState = setState2;
+  }
+  useEffect(() => print(setState), AUTODEPS);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-compiler-infinite-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-compiler-infinite-loop.expect.md
new file mode 100644
index 00000000000..a402713f869
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-compiler-infinite-loop.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @flow @enableNewMutationAliasingModel
+
+import fbt from 'fbt';
+
+component Component() {
+  const sections = Object.keys(items);
+
+  for (let i = 0; i < sections.length; i += 3) {
+    chunks.push(
+      sections.slice(i, i + 3).map(section => {
+        return <Child />;
+      })
+    );
+  }
+
+  return <Child />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+
+import fbt from "fbt";
+
+function Component() {
+  const $ = _c(1);
+  const sections = Object.keys(items);
+
+  for (let i = 0; i < sections.length; i = i + 3, i) {
+    chunks.push(sections.slice(i, i + 3).map(_temp));
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Child />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp(section) {
+  return <Child />;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-compiler-infinite-loop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-compiler-infinite-loop.js
new file mode 100644
index 00000000000..d03a44618ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-compiler-infinite-loop.js
@@ -0,0 +1,17 @@
+// @flow @enableNewMutationAliasingModel
+
+import fbt from 'fbt';
+
+component Component() {
+  const sections = Object.keys(items);
+
+  for (let i = 0; i < sections.length; i += 3) {
+    chunks.push(
+      sections.slice(i, i + 3).map(section => {
+        return <Child />;
+      })
+    );
+  }
+
+  return <Child />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.expect.md
new file mode 100644
index 00000000000..25e4a3843cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+export function useFormatRelativeTime(opts = {}) {
+  const {timeZone, minimal} = opts;
+  const format = useCallback(function formatWithUnit() {}, [minimal]);
+  // We previously recorded `{timeZone}` as capturing timeZone into the object,
+  // then assumed that dateTimeFormat() mutates that object,
+  // which in turn could mutate timeZone and the object it came from,
+  // which meanteans that the value `minimal` is derived from can change.
+  //
+  // The fix was to record a Capture from a maybefrozen value as an ImmutableCapture
+  // which doesn't propagate mutations
+  dateTimeFormat({timeZone});
+  return format;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+export function useFormatRelativeTime(t0) {
+  const $ = _c(1);
+  const opts = t0 === undefined ? {} : t0;
+  const { timeZone, minimal } = opts;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = function formatWithUnit() {};
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const format = t1;
+
+  dateTimeFormat({ timeZone });
+  return format;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.js
new file mode 100644
index 00000000000..bd2548f672b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.js
@@ -0,0 +1,14 @@
+// @validateExhaustiveMemoizationDependencies:false
+export function useFormatRelativeTime(opts = {}) {
+  const {timeZone, minimal} = opts;
+  const format = useCallback(function formatWithUnit() {}, [minimal]);
+  // We previously recorded `{timeZone}` as capturing timeZone into the object,
+  // then assumed that dateTimeFormat() mutates that object,
+  // which in turn could mutate timeZone and the object it came from,
+  // which meanteans that the value `minimal` is derived from can change.
+  //
+  // The fix was to record a Capture from a maybefrozen value as an ImmutableCapture
+  // which doesn't propagate mutations
+  dateTimeFormat({timeZone});
+  return format;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-function-expression-effects-stack-overflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-function-expression-effects-stack-overflow.expect.md
new file mode 100644
index 00000000000..fe47e6b0a02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-function-expression-effects-stack-overflow.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = {};
+  const fn = () => {
+    new Object()
+      .build(x)
+      .build({})
+      .build({})
+      .build({})
+      .build({})
+      .build({})
+      .build({});
+  };
+  return <Stringify x={x} fn={fn} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    const fn = () => {
+      new Object()
+        .build(x)
+        .build({})
+        .build({})
+        .build({})
+        .build({})
+        .build({})
+        .build({});
+    };
+    t1 = <Stringify x={x} fn={fn} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-function-expression-effects-stack-overflow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-function-expression-effects-stack-overflow.js
new file mode 100644
index 00000000000..6e67ed7bab6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-function-expression-effects-stack-overflow.js
@@ -0,0 +1,14 @@
+function Component() {
+  const x = {};
+  const fn = () => {
+    new Object()
+      .build(x)
+      .build({})
+      .build({})
+      .build({})
+      .build({})
+      .build({})
+      .build({});
+  };
+  return <Stringify x={x} fn={fn} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-internal-compiler-shared-mutablerange-bug.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-internal-compiler-shared-mutablerange-bug.expect.md
new file mode 100644
index 00000000000..9a0c82a3ccc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-internal-compiler-shared-mutablerange-bug.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+//@flow @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel
+component Component(
+  onAsyncSubmit?: (() => void) => void,
+  onClose: (isConfirmed: boolean) => void
+) {
+  // When running inferReactiveScopeVariables,
+  // onAsyncSubmit and onClose update to share
+  // a mutableRange instance.
+  const onSubmit = useCallback(() => {
+    if (onAsyncSubmit) {
+      onAsyncSubmit(() => {
+        onClose(true);
+      });
+      return;
+    }
+  }, [onAsyncSubmit, onClose]);
+  // When running inferReactiveScopeVariables here,
+  // first the existing range gets updated (affecting
+  // onAsyncSubmit) and then onClose gets assigned a
+  // different mutable range instance, which is the
+  // one reset after AnalyzeFunctions.
+  // The fix is to fully reset mutable ranges *instances*
+  // after AnalyzeFunctions visit a function expression
+  return <Dialog onSubmit={onSubmit} onClose={() => onClose(false)} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(8);
+  const { onAsyncSubmit, onClose } = t0;
+  let t1;
+  if ($[0] !== onAsyncSubmit || $[1] !== onClose) {
+    t1 = () => {
+      if (onAsyncSubmit) {
+        onAsyncSubmit(() => {
+          onClose(true);
+        });
+        return;
+      }
+    };
+    $[0] = onAsyncSubmit;
+    $[1] = onClose;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onSubmit = t1;
+  let t2;
+  if ($[3] !== onClose) {
+    t2 = () => onClose(false);
+    $[3] = onClose;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== onSubmit || $[6] !== t2) {
+    t3 = <Dialog onSubmit={onSubmit} onClose={t2} />;
+    $[5] = onSubmit;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-internal-compiler-shared-mutablerange-bug.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-internal-compiler-shared-mutablerange-bug.js
new file mode 100644
index 00000000000..20cad06e97e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-internal-compiler-shared-mutablerange-bug.js
@@ -0,0 +1,25 @@
+//@flow @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel
+component Component(
+  onAsyncSubmit?: (() => void) => void,
+  onClose: (isConfirmed: boolean) => void
+) {
+  // When running inferReactiveScopeVariables,
+  // onAsyncSubmit and onClose update to share
+  // a mutableRange instance.
+  const onSubmit = useCallback(() => {
+    if (onAsyncSubmit) {
+      onAsyncSubmit(() => {
+        onClose(true);
+      });
+      return;
+    }
+  }, [onAsyncSubmit, onClose]);
+  // When running inferReactiveScopeVariables here,
+  // first the existing range gets updated (affecting
+  // onAsyncSubmit) and then onClose gets assigned a
+  // different mutable range instance, which is the
+  // one reset after AnalyzeFunctions.
+  // The fix is to fully reset mutable ranges *instances*
+  // after AnalyzeFunctions visit a function expression
+  return <Dialog onSubmit={onSubmit} onClose={() => onClose(false)} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-invalid-function-expression-effects-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-invalid-function-expression-effects-phi.expect.md
new file mode 100644
index 00000000000..6043495bc19
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-invalid-function-expression-effects-phi.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component({a, b}) {
+  const y = {a};
+  const x = {b};
+  const f = () => {
+    let z = null;
+    while (z == null) {
+      z = x;
+    }
+    // z is a phi with a backedge, and we don't realize it could be x,
+    // and therefore fail to record a Capture x <- y effect for this
+    // function expression
+    z.y = y;
+  };
+  f();
+  mutate(x);
+  return <div>{x}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const y = { a };
+    const x = { b };
+    const f = () => {
+      let z = null;
+      while (z == null) {
+        z = x;
+      }
+      z.y = y;
+    };
+    f();
+    mutate(x);
+    t1 = <div>{x}</div>;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-invalid-function-expression-effects-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-invalid-function-expression-effects-phi.js
new file mode 100644
index 00000000000..31a51b45aa3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-invalid-function-expression-effects-phi.js
@@ -0,0 +1,17 @@
+function Component({a, b}) {
+  const y = {a};
+  const x = {b};
+  const f = () => {
+    let z = null;
+    while (z == null) {
+      z = x;
+    }
+    // z is a phi with a backedge, and we don't realize it could be x,
+    // and therefore fail to record a Capture x <- y effect for this
+    // function expression
+    z.y = y;
+  };
+  f();
+  mutate(x);
+  return <div>{x}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-jsx-captures-value-mutated-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-jsx-captures-value-mutated-later.expect.md
new file mode 100644
index 00000000000..ef8a2dc1757
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-jsx-captures-value-mutated-later.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @flow @enableNewMutationAliasingModel
+
+import {identity, Stringify, useFragment} from 'shared-runtime';
+
+component Example() {
+  const data = useFragment();
+
+  const {a, b} = identity(data);
+
+  const el = <Stringify tooltip={b} />;
+
+  identity(a.at(0));
+
+  return <Stringify icon={el} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+
+import { identity, Stringify, useFragment } from "shared-runtime";
+
+function Example() {
+  const $ = _c(2);
+  const data = useFragment();
+  let t0;
+  if ($[0] !== data) {
+    const { a, b } = identity(data);
+    const el = <Stringify tooltip={b} />;
+    identity(a.at(0));
+    t0 = <Stringify icon={el} />;
+    $[0] = data;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-jsx-captures-value-mutated-later.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-jsx-captures-value-mutated-later.js
new file mode 100644
index 00000000000..7ab6dbc30ab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-jsx-captures-value-mutated-later.js
@@ -0,0 +1,15 @@
+// @flow @enableNewMutationAliasingModel
+
+import {identity, Stringify, useFragment} from 'shared-runtime';
+
+component Example() {
+  const data = useFragment();
+
+  const {a, b} = identity(data);
+
+  const el = <Stringify tooltip={b} />;
+
+  identity(a.at(0));
+
+  return <Stringify icon={el} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-mutate-new-set-of-frozen-items-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-mutate-new-set-of-frozen-items-in-callback.expect.md
new file mode 100644
index 00000000000..28fc8b601f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-mutate-new-set-of-frozen-items-in-callback.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel:true
+
+export const App = () => {
+  const [selected, setSelected] = useState(new Set<string>());
+  const onSelectedChange = (value: string) => {
+    const newSelected = new Set(selected);
+    if (newSelected.has(value)) {
+      // This should not count as a mutation of `selected`
+      newSelected.delete(value);
+    } else {
+      // This should not count as a mutation of `selected`
+      newSelected.add(value);
+    }
+    setSelected(newSelected);
+  };
+
+  return <Stringify selected={selected} onSelectedChange={onSelectedChange} />;
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel:true
+
+export const App = () => {
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = new Set();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [selected, setSelected] = useState(t0);
+  let t1;
+  if ($[1] !== selected) {
+    t1 = (value) => {
+      const newSelected = new Set(selected);
+      if (newSelected.has(value)) {
+        newSelected.delete(value);
+      } else {
+        newSelected.add(value);
+      }
+
+      setSelected(newSelected);
+    };
+    $[1] = selected;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onSelectedChange = t1;
+  let t2;
+  if ($[3] !== onSelectedChange || $[4] !== selected) {
+    t2 = <Stringify selected={selected} onSelectedChange={onSelectedChange} />;
+    $[3] = onSelectedChange;
+    $[4] = selected;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-mutate-new-set-of-frozen-items-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-mutate-new-set-of-frozen-items-in-callback.js
new file mode 100644
index 00000000000..c5a404a66c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-mutate-new-set-of-frozen-items-in-callback.js
@@ -0,0 +1,18 @@
+// @enableNewMutationAliasingModel:true
+
+export const App = () => {
+  const [selected, setSelected] = useState(new Set<string>());
+  const onSelectedChange = (value: string) => {
+    const newSelected = new Set(selected);
+    if (newSelected.has(value)) {
+      // This should not count as a mutation of `selected`
+      newSelected.delete(value);
+    } else {
+      // This should not count as a mutation of `selected`
+      newSelected.add(value);
+    }
+    setSelected(newSelected);
+  };
+
+  return <Stringify selected={selected} onSelectedChange={onSelectedChange} />;
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/set-add-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/set-add-mutate.expect.md
new file mode 100644
index 00000000000..955c4e07057
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/set-add-mutate.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function useHook({el1, el2}) {
+  const s = new Set();
+  const arr = makeArray(el1);
+  s.add(arr);
+  // Mutate after store
+  arr.push(el2);
+
+  s.add(makeArray(el2));
+  return s.size;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function useHook(t0) {
+  const $ = _c(5);
+  const { el1, el2 } = t0;
+  let s;
+  if ($[0] !== el1 || $[1] !== el2) {
+    s = new Set();
+    const arr = makeArray(el1);
+    s.add(arr);
+
+    arr.push(el2);
+    let t1;
+    if ($[3] !== el2) {
+      t1 = makeArray(el2);
+      $[3] = el2;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    s.add(t1);
+    $[0] = el1;
+    $[1] = el2;
+    $[2] = s;
+  } else {
+    s = $[2];
+  }
+  return s.size;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/set-add-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/set-add-mutate.js
new file mode 100644
index 00000000000..3afbd93f84b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/set-add-mutate.js
@@ -0,0 +1,11 @@
+// @enableNewMutationAliasingModel
+function useHook({el1, el2}) {
+  const s = new Set();
+  const arr = makeArray(el1);
+  s.add(arr);
+  // Mutate after store
+  arr.push(el2);
+
+  s.add(makeArray(el2));
+  return s.size;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.expect.md
new file mode 100644
index 00000000000..39bd61aaf34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @enableFire @enableNewMutationAliasingModel
+import {fire} from 'react';
+
+function Component({bar, baz}) {
+  const foo = () => {
+    console.log(bar);
+  };
+  useEffect(() => {
+    fire(foo(bar));
+    fire(baz(bar));
+  });
+
+  useEffect(() => {
+    fire(foo(bar));
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire @enableNewMutationAliasingModel
+import { fire } from "react";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { bar, baz } = t0;
+  let t1;
+  if ($[0] !== bar) {
+    t1 = () => {
+      console.log(bar);
+    };
+    $[0] = bar;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const foo = t1;
+  const t2 = useFire(foo);
+  const t3 = useFire(baz);
+  let t4;
+  if ($[2] !== bar || $[3] !== t2 || $[4] !== t3) {
+    t4 = () => {
+      t2(bar);
+      t3(bar);
+    };
+    $[2] = bar;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  useEffect(t4);
+  let t5;
+  if ($[6] !== bar || $[7] !== t2) {
+    t5 = () => {
+      t2(bar);
+    };
+    $[6] = bar;
+    $[7] = t2;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  useEffect(t5);
+  return null;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.js
new file mode 100644
index 00000000000..54d4cf83fe3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.js
@@ -0,0 +1,18 @@
+// @enableFire @enableNewMutationAliasingModel
+import {fire} from 'react';
+
+function Component({bar, baz}) {
+  const foo = () => {
+    console.log(bar);
+  };
+  useEffect(() => {
+    fire(foo(bar));
+    fire(baz(bar));
+  });
+
+  useEffect(() => {
+    fire(foo(bar));
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/ssa-renaming-ternary-destruction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/ssa-renaming-ternary-destruction.expect.md
new file mode 100644
index 00000000000..4c04ae19729
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/ssa-renaming-ternary-destruction.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR @enableNewMutationAliasingModel
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  // todo: the below should memoize separately from the above
+  // my guess is that the phi causes the different `x` identifiers
+  // to get added to an alias group. this is where we need to track
+  // the actual state of the alias groups at the time of the mutation
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR @enableNewMutationAliasingModel
+function useFoo(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.cond || $[3] !== props.foo) {
+    props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
+    $[2] = props.cond;
+    $[3] = props.foo;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/ssa-renaming-ternary-destruction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/ssa-renaming-ternary-destruction.js
new file mode 100644
index 00000000000..923d0b59bb8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/ssa-renaming-ternary-destruction.js
@@ -0,0 +1,21 @@
+// @enablePropagateDepsInHIR @enableNewMutationAliasingModel
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  // todo: the below should memoize separately from the above
+  // my guess is that the phi causes the different `x` identifiers
+  // to get added to an alias group. this is where we need to track
+  // the actual state of the alias groups at the time of the mutation
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md
new file mode 100644
index 00000000000..92e1a1c3b8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md
@@ -0,0 +1,158 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  mutate,
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b, c}: {a: number; b: number; c: number}) {
+  const x = useMemo(() => [{value: a}], [a, b, c]);
+  if (b === 0) {
+    // This object should only depend on c, it cannot be affected by the later mutation
+    x.push({value: c});
+  } else {
+    // This mutation shouldn't affect the object in the consequent
+    mutate(x);
+  }
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a, b, c]} output={x} />;
+      {/* TODO: should only depend on c */}
+      <ValidateMemoization inputs={[a, b, c]} output={x[0]} />;
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0, c: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0, c: 0},
+    {a: 0, b: 1, c: 0},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 1, c: 1},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 0, c: 0},
+    {a: 0, b: 0, c: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import {
+  mutate,
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(21);
+  const { a, b, c } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [{ value: a }];
+    if (b === 0) {
+      x.push({ value: c });
+    } else {
+      mutate(x);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  let t1;
+  if ($[4] !== a || $[5] !== b || $[6] !== c) {
+    t1 = [a, b, c];
+    $[4] = a;
+    $[5] = b;
+    $[6] = c;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== t1 || $[9] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[8] = t1;
+    $[9] = x;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== a || $[12] !== b || $[13] !== c) {
+    t3 = [a, b, c];
+    $[11] = a;
+    $[12] = b;
+    $[13] = c;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== t3 || $[16] !== x[0]) {
+    t4 = <ValidateMemoization inputs={t3} output={x[0]} />;
+    $[15] = t3;
+    $[16] = x[0];
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== t2 || $[19] !== t4) {
+    t5 = (
+      <>
+        {t2};{t4};
+      </>
+    );
+    $[18] = t2;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0, c: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0, c: 0 },
+    { a: 0, b: 1, c: 0 },
+    { a: 1, b: 1, c: 0 },
+    { a: 1, b: 1, c: 1 },
+    { a: 1, b: 1, c: 0 },
+    { a: 1, b: 0, c: 0 },
+    { a: 0, b: 0, c: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0,0],"output":[{"value":0},{"value":0}]}</div>;<div>{"inputs":[0,0,0],"output":{"value":0}}</div>;
+<div>{"inputs":[0,1,0],"output":[{"value":0},"joe"]}</div>;<div>{"inputs":[0,1,0],"output":{"value":0}}</div>;
+<div>{"inputs":[1,1,0],"output":[{"value":1},"joe"]}</div>;<div>{"inputs":[1,1,0],"output":{"value":1}}</div>;
+<div>{"inputs":[1,1,1],"output":[{"value":1},"joe"]}</div>;<div>{"inputs":[1,1,1],"output":{"value":1}}</div>;
+<div>{"inputs":[1,1,0],"output":[{"value":1},"joe"]}</div>;<div>{"inputs":[1,1,0],"output":{"value":1}}</div>;
+<div>{"inputs":[1,0,0],"output":[{"value":1},{"value":0}]}</div>;<div>{"inputs":[1,0,0],"output":{"value":1}}</div>;
+<div>{"inputs":[0,0,0],"output":[{"value":0},{"value":0}]}</div>;<div>{"inputs":[0,0,0],"output":{"value":0}}</div>;
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx
new file mode 100644
index 00000000000..c40d192468e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx
@@ -0,0 +1,42 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  mutate,
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b, c}: {a: number; b: number; c: number}) {
+  const x = useMemo(() => [{value: a}], [a, b, c]);
+  if (b === 0) {
+    // This object should only depend on c, it cannot be affected by the later mutation
+    x.push({value: c});
+  } else {
+    // This mutation shouldn't affect the object in the consequent
+    mutate(x);
+  }
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a, b, c]} output={x} />;
+      {/* TODO: should only depend on c */}
+      <ValidateMemoization inputs={[a, b, c]} output={x[0]} />;
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0, c: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0, c: 0},
+    {a: 0, b: 1, c: 0},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 1, c: 1},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 0, c: 0},
+    {a: 0, b: 0, c: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md
new file mode 100644
index 00000000000..25f37285237
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md
@@ -0,0 +1,113 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a]);
+  const f = () => {
+    const y = typedCreateFrom(x);
+    const z = typedCapture(y);
+    return z;
+  };
+  const z = f();
+  // does not mutate x, so x should not depend on b
+  typedMutate(z, b);
+
+  // TODO: this *should* only depend on `a`
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    x = [{ a }];
+    const f = () => {
+      const y = typedCreateFrom(x);
+      const z = typedCapture(y);
+      return z;
+    };
+
+    const z_0 = f();
+
+    typedMutate(z_0, b);
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== a || $[4] !== b) {
+    t1 = [a, b];
+    $[3] = a;
+    $[4] = b;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1 || $[7] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[6] = t1;
+    $[7] = x;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":[{"a":0}]}</div>
+<div>{"inputs":[0,1],"output":[{"a":0}]}</div>
+<div>{"inputs":[1,1],"output":[{"a":1}]}</div>
+<div>{"inputs":[0,0],"output":[{"a":0}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx
new file mode 100644
index 00000000000..c6bd016280d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx
@@ -0,0 +1,34 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a]);
+  const f = () => {
+    const y = typedCreateFrom(x);
+    const z = typedCapture(y);
+    return z;
+  };
+  const z = f();
+  // does not mutate x, so x should not depend on b
+  typedMutate(z, b);
+
+  // TODO: this *should* only depend on `a`
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitive-mutation-before-capturing-value-created-earlier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitive-mutation-before-capturing-value-created-earlier.expect.md
new file mode 100644
index 00000000000..09c4e3eaf33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitive-mutation-before-capturing-value-created-earlier.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = [a];
+  const y = {b};
+  mutate(y);
+  y.x = x;
+  return <div>{y}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+function Component(t0) {
+  const $ = _c(5);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = [a];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let t2;
+  if ($[2] !== b || $[3] !== x) {
+    const y = { b };
+    mutate(y);
+    y.x = x;
+    t2 = <div>{y}</div>;
+    $[2] = b;
+    $[3] = x;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitive-mutation-before-capturing-value-created-earlier.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitive-mutation-before-capturing-value-created-earlier.js
new file mode 100644
index 00000000000..e6e2e17bc0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitive-mutation-before-capturing-value-created-earlier.js
@@ -0,0 +1,8 @@
+// @enableNewMutationAliasingModel
+function Component({a, b}) {
+  const x = [a];
+  const y = {b};
+  mutate(y);
+  y.x = x;
+  return <div>{y}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md
new file mode 100644
index 00000000000..0f7eebb877c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md
@@ -0,0 +1,148 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const o: any = useMemo(() => ({a}), [a]);
+  const x: Array<any> = useMemo(() => [o], [o, b]);
+  const y = typedCapture(x);
+  const z = typedCapture(y);
+  x.push(z);
+  x.push(b);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={o} />;
+      <ValidateMemoization inputs={[a, b]} output={x} />;
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(19);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const o = t1;
+  let x;
+  if ($[2] !== b || $[3] !== o) {
+    x = [o];
+    const y = typedCapture(x);
+    const z = typedCapture(y);
+    x.push(z);
+    x.push(b);
+    $[2] = b;
+    $[3] = o;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  let t2;
+  if ($[5] !== a) {
+    t2 = [a];
+    $[5] = a;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== o || $[8] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={o} />;
+    $[7] = o;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== a || $[11] !== b) {
+    t4 = [a, b];
+    $[10] = a;
+    $[11] = b;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== t4 || $[14] !== x) {
+    t5 = <ValidateMemoization inputs={t4} output={x} />;
+    $[13] = t4;
+    $[14] = x;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== t3 || $[17] !== t5) {
+    t6 = (
+      <>
+        {t3};{t5};
+      </>
+    );
+    $[16] = t3;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":{"a":0}}</div>;<div>{"inputs":[0,0],"output":[{"a":0},[["[[ cyclic ref *2 ]]"]],0]}</div>;
+<div>{"inputs":[0],"output":{"a":0}}</div>;<div>{"inputs":[0,1],"output":[{"a":0},[["[[ cyclic ref *2 ]]"]],1]}</div>;
+<div>{"inputs":[1],"output":{"a":1}}</div>;<div>{"inputs":[1,1],"output":[{"a":1},[["[[ cyclic ref *2 ]]"]],1]}</div>;
+<div>{"inputs":[0],"output":{"a":0}}</div>;<div>{"inputs":[0,0],"output":[{"a":0},[["[[ cyclic ref *2 ]]"]],0]}</div>;
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx
new file mode 100644
index 00000000000..ada8679f251
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx
@@ -0,0 +1,35 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const o: any = useMemo(() => ({a}), [a]);
+  const x: Array<any> = useMemo(() => [o], [o, b]);
+  const y = typedCapture(x);
+  const z = typedCapture(y);
+  x.push(z);
+  x.push(b);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={o} />;
+      <ValidateMemoization inputs={[a, b]} output={x} />;
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md
new file mode 100644
index 00000000000..5a3388fd8e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md
@@ -0,0 +1,112 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}: {a: number; b: number}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const f = () => {
+    const y = typedCapture(x);
+    const z = typedCreateFrom(y);
+    return z;
+  };
+  const z = f();
+  // mutates x
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    x = { a };
+    const f = () => {
+      const y = typedCapture(x);
+      const z = typedCreateFrom(y);
+      return z;
+    };
+
+    const z_0 = f();
+
+    typedMutate(z_0, b);
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== a || $[4] !== b) {
+    t1 = [a, b];
+    $[3] = a;
+    $[4] = b;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1 || $[7] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[6] = t1;
+    $[7] = x;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":{"a":0,"property":0}}</div>
+<div>{"inputs":[0,1],"output":{"a":0,"property":1}}</div>
+<div>{"inputs":[1,1],"output":{"a":1,"property":1}}</div>
+<div>{"inputs":[0,0],"output":{"a":0,"property":0}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx
new file mode 100644
index 00000000000..a4a2279810c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx
@@ -0,0 +1,33 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}: {a: number; b: number}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const f = () => {
+    const y = typedCapture(x);
+    const z = typedCreateFrom(y);
+    return z;
+  };
+  const z = f();
+  // mutates x
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md
new file mode 100644
index 00000000000..9885ef17c10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}: {a: number; b: number}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const y = typedCapture(x);
+  const z = typedCreateFrom(y);
+  // mutates x
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    x = { a };
+    const y = typedCapture(x);
+    const z = typedCreateFrom(y);
+
+    typedMutate(z, b);
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== a || $[4] !== b) {
+    t1 = [a, b];
+    $[3] = a;
+    $[4] = b;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1 || $[7] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[6] = t1;
+    $[7] = x;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":{"a":0,"property":0}}</div>
+<div>{"inputs":[0,1],"output":{"a":0,"property":1}}</div>
+<div>{"inputs":[1,1],"output":{"a":1,"property":1}}</div>
+<div>{"inputs":[0,0],"output":{"a":0,"property":0}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx
new file mode 100644
index 00000000000..f343cc2afa2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx
@@ -0,0 +1,29 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}: {a: number; b: number}) {
+  const x = useMemo(() => ({a}), [a, b]);
+  const y = typedCapture(x);
+  const z = typedCreateFrom(y);
+  // mutates x
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-createfrom-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-createfrom-capture.expect.md
new file mode 100644
index 00000000000..42f34bff414
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-createfrom-capture.expect.md
@@ -0,0 +1,101 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a]);
+  const y = typedCreateFrom(x);
+  const z = typedCapture(y);
+  // does not mutate x, so x should not depend on b
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = [{ a }];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  const y = typedCreateFrom(x);
+  const z = typedCapture(y);
+
+  typedMutate(z, b);
+  let t2;
+  if ($[2] !== a) {
+    t2 = [a];
+    $[2] = a;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2 || $[5] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} />;
+    $[4] = t2;
+    $[5] = x;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":[{"a":0}]}</div>
+<div>{"inputs":[0],"output":[{"a":0}]}</div>
+<div>{"inputs":[1],"output":[{"a":1}]}</div>
+<div>{"inputs":[0],"output":[{"a":0}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-createfrom-capture.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-createfrom-capture.tsx
new file mode 100644
index 00000000000..32d65e61e01
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-createfrom-capture.tsx
@@ -0,0 +1,28 @@
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a]);
+  const y = typedCreateFrom(x);
+  const z = typedCapture(y);
+  // does not mutate x, so x should not depend on b
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md
new file mode 100644
index 00000000000..4222c0dfe2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md
@@ -0,0 +1,119 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a, b]);
+  let z: any;
+  if (b) {
+    z = x;
+  } else {
+    z = typedCapture(x);
+  }
+  // could mutate x
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(11);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let x;
+  if ($[2] !== b || $[3] !== t1) {
+    x = [t1];
+    let z;
+    if (b) {
+      z = x;
+    } else {
+      z = typedCapture(x);
+    }
+
+    typedMutate(z, b);
+    $[2] = b;
+    $[3] = t1;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  let t2;
+  if ($[5] !== a || $[6] !== b) {
+    t2 = [a, b];
+    $[5] = a;
+    $[6] = b;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== t2 || $[9] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} />;
+    $[8] = t2;
+    $[9] = x;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":[{"a":0}]}</div>
+<div>{"inputs":[0,1],"output":[{"a":0}]}</div>
+<div>{"inputs":[1,1],"output":[{"a":1}]}</div>
+<div>{"inputs":[0,0],"output":[{"a":0}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx
new file mode 100644
index 00000000000..ece6a2dc135
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx
@@ -0,0 +1,33 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a, b]);
+  let z: any;
+  if (b) {
+    z = x;
+  } else {
+    z = typedCapture(x);
+  }
+  // could mutate x
+  typedMutate(z, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-frozen-input.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-frozen-input.expect.md
new file mode 100644
index 00000000000..d3378b4d482
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-frozen-input.expect.md
@@ -0,0 +1,119 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+
+import {useMemo} from 'react';
+import {
+  identity,
+  makeObject_Primitives,
+  typedIdentity,
+  useIdentity,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  // create a mutable value with input `a`
+  const x = useMemo(() => makeObject_Primitives(a), [a]);
+
+  // freeze the value
+  useIdentity(x);
+
+  // known to pass-through via aliasing signature
+  const x2 = typedIdentity(x);
+
+  // Unknown function so we assume it conditionally mutates,
+  // but x2 is frozen so this downgrades to a read.
+  // x should *not* take b as a dependency
+  identity(x2, b);
+
+  return <ValidateMemoization inputs={[a]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 0, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+
+import { useMemo } from "react";
+import {
+  identity,
+  makeObject_Primitives,
+  typedIdentity,
+  useIdentity,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = makeObject_Primitives(a);
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+
+  useIdentity(x);
+
+  const x2 = typedIdentity(x);
+
+  identity(x2, b);
+  let t2;
+  if ($[2] !== a) {
+    t2 = [a];
+    $[2] = a;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2 || $[5] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} />;
+    $[4] = t2;
+    $[5] = x;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 0, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[1],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[1],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[0],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[0],"output":{"a":0,"b":"value1","c":true}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-frozen-input.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-frozen-input.js
new file mode 100644
index 00000000000..d0f677ee4df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-frozen-input.js
@@ -0,0 +1,40 @@
+// @enableNewMutationAliasingModel
+
+import {useMemo} from 'react';
+import {
+  identity,
+  makeObject_Primitives,
+  typedIdentity,
+  useIdentity,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  // create a mutable value with input `a`
+  const x = useMemo(() => makeObject_Primitives(a), [a]);
+
+  // freeze the value
+  useIdentity(x);
+
+  // known to pass-through via aliasing signature
+  const x2 = typedIdentity(x);
+
+  // Unknown function so we assume it conditionally mutates,
+  // but x2 is frozen so this downgrades to a read.
+  // x should *not* take b as a dependency
+  identity(x2, b);
+
+  return <ValidateMemoization inputs={[a]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 0, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-mutable-input.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-mutable-input.expect.md
new file mode 100644
index 00000000000..17fed05d93d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-mutable-input.expect.md
@@ -0,0 +1,112 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+
+import {
+  identity,
+  makeObject_Primitives,
+  typedIdentity,
+  useIdentity,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  // create a mutable value with input `a`
+  const x = makeObject_Primitives(a);
+
+  // known to pass-through via aliasing signature
+  const x2 = typedIdentity(x);
+
+  // Unknown function so we assume it conditionally mutates,
+  // and x is still mutable so
+  identity(x2, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 0, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+
+import {
+  identity,
+  makeObject_Primitives,
+  typedIdentity,
+  useIdentity,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { a, b } = t0;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    x = makeObject_Primitives(a);
+
+    const x2 = typedIdentity(x);
+
+    identity(x2, b);
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== a || $[4] !== b) {
+    t1 = [a, b];
+    $[3] = a;
+    $[4] = b;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1 || $[7] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[6] = t1;
+    $[7] = x;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 0, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[1,0],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[1,1],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[0,1],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[0,0],"output":{"a":0,"b":"value1","c":true}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-mutable-input.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-mutable-input.js
new file mode 100644
index 00000000000..719c89d11de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/typed-identity-function-mutable-input.js
@@ -0,0 +1,35 @@
+// @enableNewMutationAliasingModel
+
+import {
+  identity,
+  makeObject_Primitives,
+  typedIdentity,
+  useIdentity,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  // create a mutable value with input `a`
+  const x = makeObject_Primitives(a);
+
+  // known to pass-through via aliasing signature
+  const x2 = typedIdentity(x);
+
+  // Unknown function so we assume it conditionally mutates,
+  // and x is still mutable so
+  identity(x2, b);
+
+  return <ValidateMemoization inputs={[a, b]} output={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 0, b: 1},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md
new file mode 100644
index 00000000000..0e54471a23c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo({arr1, arr2, foo}) {
+  const x = [arr1];
+
+  let y = [];
+
+  const getVal1 = useCallback(() => {
+    return {x: 2};
+  }, []);
+
+  const getVal2 = useCallback(() => {
+    return [y];
+  }, [foo ? (y = x.concat(arr2)) : y]);
+
+  return <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{arr1: [1, 2], arr2: [3, 4], foo: true}],
+  sequentialRenders: [
+    {arr1: [1, 2], arr2: [3, 4], foo: true},
+    {arr1: [1, 2], arr2: [3, 4], foo: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(10);
+  const { arr1, arr2, foo } = t0;
+  let t1;
+  if ($[0] !== arr1) {
+    t1 = [arr1];
+    $[0] = arr1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let getVal1;
+  let t2;
+  if ($[2] !== arr2 || $[3] !== foo || $[4] !== x) {
+    let y = [];
+    getVal1 = _temp;
+    t2 = () => [y];
+    foo ? (y = x.concat(arr2)) : y;
+    $[2] = arr2;
+    $[3] = foo;
+    $[4] = x;
+    $[5] = getVal1;
+    $[6] = t2;
+  } else {
+    getVal1 = $[5];
+    t2 = $[6];
+  }
+  const getVal2 = t2;
+  let t3;
+  if ($[7] !== getVal1 || $[8] !== getVal2) {
+    t3 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+    $[7] = getVal1;
+    $[8] = getVal2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+function _temp() {
+  return { x: 2 };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ arr1: [1, 2], arr2: [3, 4], foo: true }],
+  sequentialRenders: [
+    { arr1: [1, 2], arr2: [3, 4], foo: true },
+    { arr1: [1, 2], arr2: [3, 4], foo: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"val1":{"kind":"Function","result":{"x":2}},"val2":{"kind":"Function","result":[[[1,2],3,4]]},"shouldInvokeFns":true}</div>
+<div>{"val1":{"kind":"Function","result":{"x":2}},"val2":{"kind":"Function","result":[[]]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx
new file mode 100644
index 00000000000..861c413386d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx
@@ -0,0 +1,28 @@
+// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo({arr1, arr2, foo}) {
+  const x = [arr1];
+
+  let y = [];
+
+  const getVal1 = useCallback(() => {
+    return {x: 2};
+  }, []);
+
+  const getVal2 = useCallback(() => {
+    return [y];
+  }, [foo ? (y = x.concat(arr2)) : y]);
+
+  return <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{arr1: [1, 2], arr2: [3, 4], foo: true}],
+  sequentialRenders: [
+    {arr1: [1, 2], arr2: [3, 4], foo: true},
+    {arr1: [1, 2], arr2: [3, 4], foo: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md
new file mode 100644
index 00000000000..4a65f8a4e29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// We currently produce invalid output (incorrect scoping for `y` declaration)
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  const getVal = useCallback(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+
+  return <Stringify getVal={getVal} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+import { Stringify } from "shared-runtime";
+
+// We currently produce invalid output (incorrect scoping for `y` declaration)
+function useFoo(arr1, arr2) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== arr1) {
+    t0 = [arr1];
+    $[0] = arr1;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== arr2 || $[3] !== x) {
+    let y;
+    t1 = () => ({ y });
+    (y = x.concat(arr2)), y;
+    $[2] = arr2;
+    $[3] = x;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const getVal = t1;
+  let t2;
+  if ($[5] !== getVal) {
+    t2 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
+    $[5] = getVal;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getVal":{"kind":"Function","result":{"y":[[1,2],3,4]}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx
new file mode 100644
index 00000000000..01a87a22599
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx
@@ -0,0 +1,23 @@
+// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// We currently produce invalid output (incorrect scoping for `y` declaration)
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  const getVal = useCallback(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+
+  return <Stringify getVal={getVal} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md
new file mode 100644
index 00000000000..2d3f4699866
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  return useMemo(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+function useFoo(arr1, arr2) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== arr1) {
+    t0 = [arr1];
+    $[0] = arr1;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== arr2 || $[3] !== x) {
+    (y = x.concat(arr2)), y;
+    $[2] = arr2;
+    $[3] = x;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  let t1;
+  if ($[5] !== y) {
+    t1 = { y };
+    $[5] = y;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":[[1,2],3,4]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts
new file mode 100644
index 00000000000..7b9c6e54da7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts
@@ -0,0 +1,19 @@
+// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  return useMemo(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-spread.expect.md
new file mode 100644
index 00000000000..a93d0df1e78
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-spread.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = new Foo(...props.foo, null, ...[props.bar]);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.bar || $[1] !== props.foo) {
+    t0 = new Foo(...props.foo, null, ...[props.bar]);
+    $[0] = props.bar;
+    $[1] = props.foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-spread.js
new file mode 100644
index 00000000000..f8a139d5882
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-spread.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = new Foo(...props.foo, null, ...[props.bar]);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/no-flow-bailout-unrelated.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/no-flow-bailout-unrelated.expect.md
new file mode 100644
index 00000000000..ffaa9eb74c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/no-flow-bailout-unrelated.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enableFlowSuppressions
+
+function useX() {}
+
+function Foo(props) {
+  // $FlowFixMe[incompatible-type]
+  useX();
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableFlowSuppressions
+
+function useX() {}
+
+function Foo(props) {
+  useX();
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/no-flow-bailout-unrelated.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/no-flow-bailout-unrelated.js
new file mode 100644
index 00000000000..c053580f35a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/no-flow-bailout-unrelated.js
@@ -0,0 +1,14 @@
+// @enableFlowSuppressions
+
+function useX() {}
+
+function Foo(props) {
+  // $FlowFixMe[incompatible-type]
+  useX();
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/noAlias-filter-on-array-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/noAlias-filter-on-array-prop.expect.md
new file mode 100644
index 00000000000..f9efa4ea234
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/noAlias-filter-on-array-prop.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const filtered = props.items.filter(item => item != null);
+  return filtered;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [{a: true}, null, true, false, null, 'string', 3.14, null, [null]],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.filter(_temp);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const filtered = t0;
+  return filtered;
+}
+function _temp(item) {
+  return item != null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        { a: true },
+        null,
+        true,
+        false,
+        null,
+        "string",
+        3.14,
+        null,
+        [null],
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":true},true,false,"string",3.14,[null]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/noAlias-filter-on-array-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/noAlias-filter-on-array-prop.js
new file mode 100644
index 00000000000..b15223e99d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/noAlias-filter-on-array-prop.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const filtered = props.items.filter(item => item != null);
+  return filtered;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [{a: true}, null, true, false, null, 'string', 3.14, null, [null]],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/non-null-assertion.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/non-null-assertion.expect.md
new file mode 100644
index 00000000000..bf8590ec3a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/non-null-assertion.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+interface ComponentProps {
+  name?: string;
+}
+
+function Component(props: ComponentProps) {
+  return props.name!.toUpperCase();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Alice'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+interface ComponentProps {
+  name?: string;
+}
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = props.name.toUpperCase();
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Alice" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "ALICE"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/non-null-assertion.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/non-null-assertion.ts
new file mode 100644
index 00000000000..0c866b08eee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/non-null-assertion.ts
@@ -0,0 +1,12 @@
+interface ComponentProps {
+  name?: string;
+}
+
+function Component(props: ComponentProps) {
+  return props.name!.toUpperCase();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Alice'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md
new file mode 100644
index 00000000000..9a4f0c179f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {identity, Stringify, useIdentity} from 'shared-runtime';
+
+function Component(props) {
+  const {x, ...rest} = useIdentity(props);
+  const z = rest.z;
+  identity(z);
+  return <Stringify x={x} z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, Stringify, useIdentity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(6);
+  const t0 = useIdentity(props);
+  let rest;
+  let x;
+  if ($[0] !== t0) {
+    ({ x, ...rest } = t0);
+    $[0] = t0;
+    $[1] = rest;
+    $[2] = x;
+  } else {
+    rest = $[1];
+    x = $[2];
+  }
+  const z = rest.z;
+  identity(z);
+  let t1;
+  if ($[3] !== x || $[4] !== z) {
+    t1 = <Stringify x={x} z={z} />;
+    $[3] = x;
+    $[4] = z;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: "Hello", z: "World" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":"Hello","z":"World"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js
new file mode 100644
index 00000000000..c4447f7be6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js
@@ -0,0 +1,13 @@
+import {identity, Stringify, useIdentity} from 'shared-runtime';
+
+function Component(props) {
+  const {x, ...rest} = useIdentity(props);
+  const z = rest.z;
+  identity(z);
+  return <Stringify x={x} z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md
new file mode 100644
index 00000000000..5335705c5d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {identity, Stringify} from 'shared-runtime';
+
+function Component({x, ...rest}) {
+  return <Stringify {...rest} x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(6);
+  let rest;
+  let x;
+  if ($[0] !== t0) {
+    ({ x, ...rest } = t0);
+    $[0] = t0;
+    $[1] = rest;
+    $[2] = x;
+  } else {
+    rest = $[1];
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== rest || $[4] !== x) {
+    t1 = <Stringify {...rest} x={x} />;
+    $[3] = rest;
+    $[4] = x;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: "Hello", z: "World" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"z":"World","x":"Hello"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js
new file mode 100644
index 00000000000..d9f24264d69
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js
@@ -0,0 +1,10 @@
+import {identity, Stringify} from 'shared-runtime';
+
+function Component({x, ...rest}) {
+  return <Stringify {...rest} x={x} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md
new file mode 100644
index 00000000000..7a435adcaad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {identity, Stringify} from 'shared-runtime';
+
+function Component({x, ...rest}) {
+  const restAlias = rest;
+  const z = restAlias.z;
+  identity(z);
+  return <Stringify x={x} z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(6);
+  let rest;
+  let x;
+  if ($[0] !== t0) {
+    ({ x, ...rest } = t0);
+    $[0] = t0;
+    $[1] = rest;
+    $[2] = x;
+  } else {
+    rest = $[1];
+    x = $[2];
+  }
+  const restAlias = rest;
+  const z = restAlias.z;
+  identity(z);
+  let t1;
+  if ($[3] !== x || $[4] !== z) {
+    t1 = <Stringify x={x} z={z} />;
+    $[3] = x;
+    $[4] = z;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: "Hello", z: "World" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":"Hello","z":"World"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js
new file mode 100644
index 00000000000..b1d26ab7f72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js
@@ -0,0 +1,13 @@
+import {identity, Stringify} from 'shared-runtime';
+
+function Component({x, ...rest}) {
+  const restAlias = rest;
+  const z = restAlias.z;
+  identity(z);
+  return <Stringify x={x} z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md
new file mode 100644
index 00000000000..a8b1c2d747f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {identity, Stringify} from 'shared-runtime';
+
+function Component({x, ...rest}) {
+  const z = rest.z;
+  identity(z);
+  return <Stringify x={x} z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(6);
+  let rest;
+  let x;
+  if ($[0] !== t0) {
+    ({ x, ...rest } = t0);
+    $[0] = t0;
+    $[1] = rest;
+    $[2] = x;
+  } else {
+    rest = $[1];
+    x = $[2];
+  }
+  const z = rest.z;
+  identity(z);
+  let t1;
+  if ($[3] !== x || $[4] !== z) {
+    t1 = <Stringify x={x} z={z} />;
+    $[3] = x;
+    $[4] = z;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: "Hello", z: "World" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"x":"Hello","z":"World"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js
new file mode 100644
index 00000000000..d3e83d560c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js
@@ -0,0 +1,12 @@
+import {identity, Stringify} from 'shared-runtime';
+
+function Component({x, ...rest}) {
+  const z = rest.z;
+  identity(z);
+  return <Stringify x={x} z={z} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 'Hello', z: 'World'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md
new file mode 100644
index 00000000000..deedcb7fec1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md
@@ -0,0 +1,112 @@
+
+## Input
+
+```javascript
+import {identity, mutate} from 'shared-runtime';
+
+/**
+ * Currently, InferReactiveScopeVariables do not ensure that maybe-aliased
+ * values get assigned the same reactive scope. This is safe only when an
+ * already-constructed value is captured, e.g.
+ * ```js
+ * const x = makeObj();  ⌝ mutable range of x
+ * mutate(x);            ⌟
+ *                       <-- after this point, we can produce a canonical version
+ *                           of x for all following aliases
+ * const y = [];
+ * y.push(x);            <-- y captures x
+ * ```
+ *
+ * However, if a value is captured/aliased during its mutable range and the
+ * capturing container is separately memoized, it becomes difficult to guarantee
+ * that all aliases refer to the same value.
+ *
+ */
+function useFoo({a, b}) {
+  const x = {a};
+  const y = {};
+  mutate(x);
+  const z = [identity(y), b];
+  mutate(y);
+
+  if (z[0] !== y) {
+    throw new Error('oh no!');
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 4, b: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate } from "shared-runtime";
+
+/**
+ * Currently, InferReactiveScopeVariables do not ensure that maybe-aliased
+ * values get assigned the same reactive scope. This is safe only when an
+ * already-constructed value is captured, e.g.
+ * ```js
+ * const x = makeObj();  ⌝ mutable range of x
+ * mutate(x);            ⌟
+ *                       <-- after this point, we can produce a canonical version
+ *                           of x for all following aliases
+ * const y = [];
+ * y.push(x);            <-- y captures x
+ * ```
+ *
+ * However, if a value is captured/aliased during its mutable range and the
+ * capturing container is separately memoized, it becomes difficult to guarantee
+ * that all aliases refer to the same value.
+ *
+ */
+function useFoo(t0) {
+  const $ = _c(4);
+  const { a, b } = t0;
+  let y;
+  let z;
+  if ($[0] !== a || $[1] !== b) {
+    const x = { a };
+    y = {};
+    mutate(x);
+    z = [identity(y), b];
+    mutate(y);
+    $[0] = a;
+    $[1] = b;
+    $[2] = y;
+    $[3] = z;
+  } else {
+    y = $[2];
+    z = $[3];
+  }
+
+  if (z[0] !== y) {
+    throw new Error("oh no!");
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: 2, b: 3 }],
+  sequentialRenders: [
+    { a: 2, b: 3 },
+    { a: 4, b: 3 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"wat0":"joe"},3]
+[{"wat0":"joe"},3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.ts
new file mode 100644
index 00000000000..e4a8c85ef31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.ts
@@ -0,0 +1,41 @@
+import {identity, mutate} from 'shared-runtime';
+
+/**
+ * Currently, InferReactiveScopeVariables do not ensure that maybe-aliased
+ * values get assigned the same reactive scope. This is safe only when an
+ * already-constructed value is captured, e.g.
+ * ```js
+ * const x = makeObj();  ⌝ mutable range of x
+ * mutate(x);            ⌟
+ *                       <-- after this point, we can produce a canonical version
+ *                           of x for all following aliases
+ * const y = [];
+ * y.push(x);            <-- y captures x
+ * ```
+ *
+ * However, if a value is captured/aliased during its mutable range and the
+ * capturing container is separately memoized, it becomes difficult to guarantee
+ * that all aliases refer to the same value.
+ *
+ */
+function useFoo({a, b}) {
+  const x = {a};
+  const y = {};
+  mutate(x);
+  const z = [identity(y), b];
+  mutate(y);
+
+  if (z[0] !== y) {
+    throw new Error('oh no!');
+  }
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 3}],
+  sequentialRenders: [
+    {a: 2, b: 3},
+    {a: 4, b: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonoptional-load-from-optional-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonoptional-load-from-optional-memberexpr.expect.md
new file mode 100644
index 00000000000..722a19eec7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonoptional-load-from-optional-memberexpr.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// Note that `a?.b.c` is semantically different from `(a?.b).c`
+// Here, 'props?.a` is an optional chain, and `.b` is an unconditional load
+// (nullthrows if a is nullish)
+
+function Component(props) {
+  let x = (props?.a).b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// Note that `a?.b.c` is semantically different from `(a?.b).c`
+// Here, 'props?.a` is an optional chain, and `.b` is an unconditional load
+// (nullthrows if a is nullish)
+
+function Component(props) {
+  const x = (props?.a).b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonoptional-load-from-optional-memberexpr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonoptional-load-from-optional-memberexpr.js
new file mode 100644
index 00000000000..dc789fcf67f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonoptional-load-from-optional-memberexpr.js
@@ -0,0 +1,14 @@
+// Note that `a?.b.c` is semantically different from `(a?.b).c`
+// Here, 'props?.a` is an optional chain, and `.b` is an unconditional load
+// (nullthrows if a is nullish)
+
+function Component(props) {
+  let x = (props?.a).b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-noescaping-dependency-can-inline-into-consuming-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-noescaping-dependency-can-inline-into-consuming-scope.expect.md
new file mode 100644
index 00000000000..113e9104800
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-noescaping-dependency-can-inline-into-consuming-scope.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @flow
+function Component() {
+  return (
+    <div
+      className={stylex(
+        // this value is a) in its own scope, b) non-reactive, and c) non-escaping
+        // its scope gets pruned bc it's non-escaping, but this doesn't mean we need to
+        // create a temporary for it
+        flags.feature('feature-name') ? styles.featureNameStyle : null
+      )}></div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <div
+        className={stylex(
+          flags.feature("feature-name") ? styles.featureNameStyle : null,
+        )}
+      />
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-noescaping-dependency-can-inline-into-consuming-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-noescaping-dependency-can-inline-into-consuming-scope.js
new file mode 100644
index 00000000000..85c0ad1e7d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonreactive-noescaping-dependency-can-inline-into-consuming-scope.js
@@ -0,0 +1,12 @@
+// @flow
+function Component() {
+  return (
+    <div
+      className={stylex(
+        // this value is a) in its own scope, b) non-reactive, and c) non-escaping
+        // its scope gets pruned bc it's non-escaping, but this doesn't mean we need to
+        // create a temporary for it
+        flags.feature('feature-name') ? styles.featureNameStyle : null
+      )}></div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md
new file mode 100644
index 00000000000..32d2a5a259f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function Test() {
+  const obj = {
+    21: 'dimaMachina',
+  };
+  // Destructuring assignment
+  const {21: myVar} = obj;
+  return (
+    <div>
+      {obj[21]}
+      {myVar}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Test() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { 21: "dimaMachina" };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const obj = t0;
+
+  const { 21: myVar } = obj;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <div>
+        {obj[21]}
+        {myVar}
+      </div>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>dimaMachinadimaMachina</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js
new file mode 100644
index 00000000000..b385417bbdd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js
@@ -0,0 +1,18 @@
+function Test() {
+  const obj = {
+    21: 'dimaMachina',
+  };
+  // Destructuring assignment
+  const {21: myVar} = obj;
+  return (
+    <div>
+      {obj[21]}
+      {myVar}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-cached-in-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-cached-in-if-else.expect.md
new file mode 100644
index 00000000000..a4cbca95fc5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-cached-in-if-else.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = {};
+  if (someVal) {
+    x = {b};
+  } else {
+    x = {c};
+  }
+
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c, d) {
+  const $ = _c(4);
+  let x;
+  if (someVal) {
+    let t0;
+    if ($[0] !== b) {
+      t0 = { b };
+      $[0] = b;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    x = t0;
+  } else {
+    let t0;
+    if ($[2] !== c) {
+      t0 = { c };
+      $[2] = c;
+      $[3] = t0;
+    } else {
+      t0 = $[3];
+    }
+    x = t0;
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-cached-in-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-cached-in-if-else.js
new file mode 100644
index 00000000000..79674f6185d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-cached-in-if-else.js
@@ -0,0 +1,10 @@
+function foo(a, b, c, d) {
+  let x = {};
+  if (someVal) {
+    x = {b};
+  } else {
+    x = {c};
+  }
+
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md
new file mode 100644
index 00000000000..0f2b186c653
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = {};
+  if (someVal) {
+    x = {b};
+  } else {
+    x = {c};
+  }
+
+  x.f = 1;
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c, d) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== b || $[1] !== c) {
+    if (someVal) {
+      x = { b };
+    } else {
+      x = { c };
+    }
+
+    x.f = 1;
+    $[0] = b;
+    $[1] = c;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.js
new file mode 100644
index 00000000000..81d6a415b64
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.js
@@ -0,0 +1,11 @@
+function foo(a, b, c, d) {
+  let x = {};
+  if (someVal) {
+    x = {b};
+  } else {
+    x = {c};
+  }
+
+  x.f = 1;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md
new file mode 100644
index 00000000000..52077b6b894
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = someObj();
+  if (a) {
+    const y = someObj();
+    const z = y;
+    x = z;
+  } else {
+    x = someObj();
+  }
+
+  x.f = 1;
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c, d) {
+  const $ = _c(2);
+  someObj();
+  let x;
+  if ($[0] !== a) {
+    if (a) {
+      const y = someObj();
+      const z = y;
+      x = z;
+    } else {
+      x = someObj();
+    }
+
+    x.f = 1;
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.js
new file mode 100644
index 00000000000..de4dd11684f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.js
@@ -0,0 +1,13 @@
+function foo(a, b, c, d) {
+  let x = someObj();
+  if (a) {
+    const y = someObj();
+    const z = y;
+    x = z;
+  } else {
+    x = someObj();
+  }
+
+  x.f = 1;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md
new file mode 100644
index 00000000000..933e05d1554
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = someObj();
+  if (a) {
+    x = someObj();
+  } else {
+    x = someObj();
+  }
+
+  x.f = 1;
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c, d) {
+  const $ = _c(2);
+  someObj();
+  let x;
+  if ($[0] !== a) {
+    if (a) {
+      x = someObj();
+    } else {
+      x = someObj();
+    }
+
+    x.f = 1;
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.js
new file mode 100644
index 00000000000..ed43dec1221
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.js
@@ -0,0 +1,11 @@
+function foo(a, b, c, d) {
+  let x = someObj();
+  if (a) {
+    x = someObj();
+  } else {
+    x = someObj();
+  }
+
+  x.f = 1;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md
new file mode 100644
index 00000000000..8c4a8b1a3cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = someObj();
+  if (a) {
+    let z;
+    if (b) {
+      const w = someObj();
+      z = w;
+    } else {
+      z = someObj();
+    }
+    const y = z;
+    x = z;
+  } else {
+    x = someObj();
+  }
+
+  x.f = 1;
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c, d) {
+  const $ = _c(3);
+  someObj();
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    if (a) {
+      let z;
+      if (b) {
+        const w = someObj();
+        z = w;
+      } else {
+        z = someObj();
+      }
+
+      x = z;
+    } else {
+      x = someObj();
+    }
+
+    x.f = 1;
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.js
new file mode 100644
index 00000000000..cd2ac6fa5a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.js
@@ -0,0 +1,19 @@
+function foo(a, b, c, d) {
+  let x = someObj();
+  if (a) {
+    let z;
+    if (b) {
+      const w = someObj();
+      z = w;
+    } else {
+      z = someObj();
+    }
+    const y = z;
+    x = z;
+  } else {
+    x = someObj();
+  }
+
+  x.f = 1;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-access-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-access-assignment.expect.md
new file mode 100644
index 00000000000..8b4dbc8f863
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-access-assignment.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+function Component({a, b, c}) {
+  // This is an object version of array-access-assignment.js
+  // Meant to confirm that object expressions and PropertyStore/PropertyLoad with strings
+  // works equivalently to array expressions and property accesses with numeric indices
+  const x = {zero: a};
+  const y = {zero: null, one: b};
+  const z = {zero: {}, one: {}, two: {zero: c}};
+  x.zero = y.one;
+  z.zero.zero = x.zero;
+  return {zero: x, one: z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 20, c: 300}],
+  sequentialRenders: [
+    {a: 2, b: 20, c: 300},
+    {a: 3, b: 20, c: 300},
+    {a: 3, b: 21, c: 300},
+    {a: 3, b: 22, c: 300},
+    {a: 3, b: 22, c: 301},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(6);
+  const { a, b, c } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    const x = { zero: a };
+    let t2;
+    if ($[4] !== b) {
+      t2 = { zero: null, one: b };
+      $[4] = b;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    const y = t2;
+    const z = { zero: {}, one: {}, two: { zero: c } };
+    x.zero = y.one;
+    z.zero.zero = x.zero;
+    t1 = { zero: x, one: z };
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 20, c: 300 }],
+  sequentialRenders: [
+    { a: 2, b: 20, c: 300 },
+    { a: 3, b: 20, c: 300 },
+    { a: 3, b: 21, c: 300 },
+    { a: 3, b: 22, c: 300 },
+    { a: 3, b: 22, c: 301 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"zero":{"zero":20},"one":{"zero":{"zero":20},"one":{},"two":{"zero":300}}}
+{"zero":{"zero":20},"one":{"zero":{"zero":20},"one":{},"two":{"zero":300}}}
+{"zero":{"zero":21},"one":{"zero":{"zero":21},"one":{},"two":{"zero":300}}}
+{"zero":{"zero":22},"one":{"zero":{"zero":22},"one":{},"two":{"zero":300}}}
+{"zero":{"zero":22},"one":{"zero":{"zero":22},"one":{},"two":{"zero":301}}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-access-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-access-assignment.js
new file mode 100644
index 00000000000..ef047238e7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-access-assignment.js
@@ -0,0 +1,23 @@
+function Component({a, b, c}) {
+  // This is an object version of array-access-assignment.js
+  // Meant to confirm that object expressions and PropertyStore/PropertyLoad with strings
+  // works equivalently to array expressions and property accesses with numeric indices
+  const x = {zero: a};
+  const y = {zero: null, one: b};
+  const z = {zero: {}, one: {}, two: {zero: c}};
+  x.zero = y.one;
+  z.zero.zero = x.zero;
+  return {zero: x, one: z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 20, c: 300}],
+  sequentialRenders: [
+    {a: 2, b: 20, c: 300},
+    {a: 3, b: 20, c: 300},
+    {a: 3, b: 21, c: 300},
+    {a: 3, b: 22, c: 300},
+    {a: 3, b: 22, c: 301},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md
new file mode 100644
index 00000000000..399c9d1d30a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const x = {...a};
+  x[b] = c[b];
+  x[1 + 2] = c[b * 4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  const x = { ...a };
+  x[b] = c[b];
+  x[3] = c[b * 4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.js
new file mode 100644
index 00000000000..68efd7f4f70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.js
@@ -0,0 +1,11 @@
+function foo(a, b, c) {
+  const x = {...a};
+  x[b] = c[b];
+  x[1 + 2] = c[b * 4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-entries-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-entries-mutation.expect.md
new file mode 100644
index 00000000000..bc541b47f1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-entries-mutation.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const entries = Object.entries(object);
+  entries.map(([, value]) => {
+    value.updated = true;
+  });
+  return <Stringify entries={entries} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.object) {
+    const object = { object: props.object };
+    const entries = Object.entries(object);
+    entries.map(_temp);
+    t0 = <Stringify entries={entries} />;
+    $[0] = props.object;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(t0) {
+  const [, value] = t0;
+  value.updated = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ object: { key: makeObject_Primitives() } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"entries":[["object",{"key":{"a":0,"b":"value1","c":true},"updated":true}]]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-entries-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-entries-mutation.js
new file mode 100644
index 00000000000..2902cffd014
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-entries-mutation.js
@@ -0,0 +1,15 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const entries = Object.entries(object);
+  entries.map(([, value]) => {
+    value.updated = true;
+  });
+  return <Stringify entries={entries} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-captures-function-with-global-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-captures-function-with-global-mutation.expect.md
new file mode 100644
index 00000000000..9d970ef9e67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-captures-function-with-global-mutation.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function Foo() {
+  const x = () => {
+    window.href = 'foo';
+  };
+  const y = {x};
+  return <Bar y={y} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  const x = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const y = { x };
+    t0 = <Bar y={y} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  window.href = "foo";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) Bar is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-captures-function-with-global-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-captures-function-with-global-mutation.js
new file mode 100644
index 00000000000..b3c936a2a28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-captures-function-with-global-mutation.js
@@ -0,0 +1,12 @@
+function Foo() {
+  const x = () => {
+    window.href = 'foo';
+  };
+  const y = {x};
+  return <Bar y={y} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-number.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-number.expect.md
new file mode 100644
index 00000000000..40685f9acc2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-number.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const key = 42;
+  const context = {
+    [key]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello!'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = identity([props.value]);
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = { [42]: t0 };
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const context = t1;
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello!" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"42":["hello!"]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-number.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-number.js
new file mode 100644
index 00000000000..c76210f30e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-number.js
@@ -0,0 +1,14 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const key = 42;
+  const context = {
+    [key]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello!'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-string.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-string.expect.md
new file mode 100644
index 00000000000..be73de917e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-string.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const key = 'KeyName';
+  const context = {
+    [key]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = identity([props.value]);
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = { ["KeyName"]: t0 };
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const context = t1;
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"KeyName":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-string.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-string.js
new file mode 100644
index 00000000000..cdbe85e819d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-constant-string.js
@@ -0,0 +1,14 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  const key = 'KeyName';
+  const context = {
+    [key]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md
new file mode 100644
index 00000000000..d46db9c8de1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [(mutate(key), key)]: identity([props.value]),
+  };
+  mutate(key);
+  return [context, key];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [{value: 42}, {value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate, mutateAndReturn } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.value) {
+    const key = {};
+    const context = { [(mutate(key), key)]: identity([props.value]) };
+    mutate(key);
+    t0 = [context, key];
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [{ value: 42 }, { value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+[{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js
new file mode 100644
index 00000000000..183c03cf916
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js
@@ -0,0 +1,16 @@
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [(mutate(key), key)]: identity([props.value]),
+  };
+  mutate(key);
+  return [context, key];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [{value: 42}, {value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md
new file mode 100644
index 00000000000..1d671aa36cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [mutateAndReturn(key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [{value: 42}, {value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate, mutateAndReturn } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let context;
+  if ($[0] !== props.value) {
+    const key = {};
+    context = { [mutateAndReturn(key)]: identity([props.value]) };
+    mutate(key);
+    $[0] = props.value;
+    $[1] = context;
+  } else {
+    context = $[1];
+  }
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [{ value: 42 }, { value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"[object Object]":[42]}
+{"[object Object]":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js
new file mode 100644
index 00000000000..0176850e981
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js
@@ -0,0 +1,16 @@
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [mutateAndReturn(key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [{value: 42}, {value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md
new file mode 100644
index 00000000000..77d3653e0c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [mutateAndReturn(key)]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate, mutateAndReturn } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const key = {};
+    t0 = mutateAndReturn(key);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.value) {
+    t1 = identity([props.value]);
+    $[1] = props.value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t1) {
+    t2 = { [t0]: t1 };
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const context = t2;
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"[object Object]":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js
new file mode 100644
index 00000000000..0a35c884f3f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js
@@ -0,0 +1,14 @@
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [mutateAndReturn(key)]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-non-reactive.expect.md
new file mode 100644
index 00000000000..deb40abb34d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-non-reactive.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+const SCALE = 2;
+
+function Component(props) {
+  const key = SCALE;
+  const context = {
+    [key]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{key: 'Sathya', value: 'Compiler'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+const SCALE = 2;
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = identity([props.value]);
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = { [SCALE]: t0 };
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const context = t1;
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ key: "Sathya", value: "Compiler" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"2":["Compiler"]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-non-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-non-reactive.js
new file mode 100644
index 00000000000..18a1646ef6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-non-reactive.js
@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+const SCALE = 2;
+
+function Component(props) {
+  const key = SCALE;
+  const context = {
+    [key]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{key: 'Sathya', value: 'Compiler'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-object-mutated-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-object-mutated-later.expect.md
new file mode 100644
index 00000000000..dfd6649095b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-object-mutated-later.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {identity, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [key]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let context;
+  if ($[0] !== props.value) {
+    const key = {};
+    context = { [key]: identity([props.value]) };
+    mutate(key);
+    $[0] = props.value;
+    $[1] = context;
+  } else {
+    context = $[1];
+  }
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"[object Object]":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-object-mutated-later.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-object-mutated-later.js
new file mode 100644
index 00000000000..1edaaaef27e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-object-mutated-later.js
@@ -0,0 +1,15 @@
+import {identity, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [key]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key.expect.md
new file mode 100644
index 00000000000..419e40ab5ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+const SCALE = 2;
+
+function Component(props) {
+  const {key} = props;
+  const context = {
+    [key]: identity([props.value, SCALE]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{key: 'Sathya', value: 'Compiler'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+const SCALE = 2;
+
+function Component(props) {
+  const $ = _c(5);
+  const { key } = props;
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = identity([props.value, SCALE]);
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== key || $[3] !== t0) {
+    t1 = { [key]: t0 };
+    $[2] = key;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const context = t1;
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ key: "Sathya", value: "Compiler" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"Sathya":["Compiler",2]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key.js
new file mode 100644
index 00000000000..bf5544eaa86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key.js
@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+const SCALE = 2;
+
+function Component(props) {
+  const {key} = props;
+  const context = {
+    [key]: identity([props.value, SCALE]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{key: 'Sathya', value: 'Compiler'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-member.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-member.expect.md
new file mode 100644
index 00000000000..49be82b146b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-member.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {a: 'key'};
+  const context = {
+    [key.a]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate, mutateAndReturn } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let context;
+  if ($[0] !== props.value) {
+    const key = { a: "key" };
+    const t0 = key.a;
+    const t1 = identity([props.value]);
+    let t2;
+    if ($[2] !== t1) {
+      t2 = { [t0]: t1 };
+      $[2] = t1;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    context = t2;
+    mutate(key);
+    $[0] = props.value;
+    $[1] = context;
+  } else {
+    context = $[1];
+  }
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"key":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-member.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-member.js
new file mode 100644
index 00000000000..95a1d434624
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-member.js
@@ -0,0 +1,15 @@
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {a: 'key'};
+  const context = {
+    [key.a]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md
new file mode 100644
index 00000000000..ac6cb97b086
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const obj = {mutateAndReturn};
+  const key = {};
+  const context = {
+    [obj.mutateAndReturn(key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, mutate, mutateAndReturn } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let context;
+  if ($[0] !== props.value) {
+    const obj = { mutateAndReturn };
+    const key = {};
+    context = { [obj.mutateAndReturn(key)]: identity([props.value]) };
+    mutate(key);
+    $[0] = props.value;
+    $[1] = context;
+  } else {
+    context = $[1];
+  }
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"[object Object]":[42]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js
new file mode 100644
index 00000000000..5cef590ed5d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js
@@ -0,0 +1,16 @@
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const obj = {mutateAndReturn};
+  const key = {};
+  const context = {
+    [obj.mutateAndReturn(key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-string-literal-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-string-literal-key.expect.md
new file mode 100644
index 00000000000..360a8d45175
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-string-literal-key.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {['foo']: props.foo};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.foo) {
+    t0 = { foo: props.foo };
+    $[0] = props.foo;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-string-literal-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-string-literal-key.js
new file mode 100644
index 00000000000..30e9855d7f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-string-literal-key.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const x = {['foo']: props.foo};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-keys.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-keys.expect.md
new file mode 100644
index 00000000000..f076d9032db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-keys.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component({items}) {
+  const record = useMemo(
+    () =>
+      Object.fromEntries(
+        items.map(item => [item.id, ref => <Stringify ref={ref} {...item} />])
+      ),
+    [items]
+  );
+
+  // Without a declaration for Object.entries(), this would be assumed to mutate
+  // `record`, meaning existing memoization couldn't be preserved
+  return (
+    <div>
+      {Object.keys(record).map(id => (
+        <Stringify key={id} render={record[id]} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: '0', name: 'Hello'},
+        {id: '1', name: 'World!'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { Stringify } from "shared-runtime";
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component(t0) {
+  const $ = _c(7);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = Object.fromEntries(items.map(_temp));
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const record = t1;
+  let t2;
+  if ($[2] !== record) {
+    t2 = Object.keys(record);
+    $[2] = record;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== record || $[5] !== t2) {
+    t3 = (
+      <div>
+        {t2.map((id) => (
+          <Stringify key={id} render={record[id]} />
+        ))}
+      </div>
+    );
+    $[4] = record;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+function _temp(item) {
+  return [item.id, (ref) => <Stringify ref={ref} {...item} />];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        { id: "0", name: "Hello" },
+        { id: "1", name: "World!" },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"render":"[[ function params=1 ]]"}</div><div>{"render":"[[ function params=1 ]]"}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-keys.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-keys.js
new file mode 100644
index 00000000000..38ae97ab956
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-keys.js
@@ -0,0 +1,36 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component({items}) {
+  const record = useMemo(
+    () =>
+      Object.fromEntries(
+        items.map(item => [item.id, ref => <Stringify ref={ref} {...item} />])
+      ),
+    [items]
+  );
+
+  // Without a declaration for Object.entries(), this would be assumed to mutate
+  // `record`, meaning existing memoization couldn't be preserved
+  return (
+    <div>
+      {Object.keys(record).map(id => (
+        <Stringify key={id} render={record[id]} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: '0', name: 'Hello'},
+        {id: '1', name: 'World!'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-call-in-ternary-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-call-in-ternary-test.expect.md
new file mode 100644
index 00000000000..cafa06298a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-call-in-ternary-test.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {
+  createHookWrapper,
+  identity,
+  CONST_STRING0,
+  CONST_STRING1,
+} from 'shared-runtime';
+
+function useHook({value}) {
+  return {
+    getValue() {
+      return identity(value);
+    },
+  }.getValue()
+    ? CONST_STRING0
+    : CONST_STRING1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import {
+  createHookWrapper,
+  identity,
+  CONST_STRING0,
+  CONST_STRING1,
+} from "shared-runtime";
+
+function useHook(t0) {
+  const { value } = t0;
+  return {
+    getValue() {
+      return identity(value);
+    },
+  }.getValue()
+    ? CONST_STRING0
+    : CONST_STRING1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":"global string 1","shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-call-in-ternary-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-call-in-ternary-test.js
new file mode 100644
index 00000000000..7f96298511a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-call-in-ternary-test.js
@@ -0,0 +1,21 @@
+import {
+  createHookWrapper,
+  identity,
+  CONST_STRING0,
+  CONST_STRING1,
+} from 'shared-runtime';
+
+function useHook({value}) {
+  return {
+    getValue() {
+      return identity(value);
+    },
+  }.getValue()
+    ? CONST_STRING0
+    : CONST_STRING1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-derived-in-ternary-consequent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-derived-in-ternary-consequent.expect.md
new file mode 100644
index 00000000000..ef8b8ef430f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-derived-in-ternary-consequent.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {identity, createHookWrapper} from 'shared-runtime';
+
+function useHook({isCond, value}) {
+  return isCond
+    ? identity({
+        getValue() {
+          return value;
+        },
+      })
+    : 42;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{isCond: true, value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, createHookWrapper } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(3);
+  const { isCond, value } = t0;
+  let t1;
+  if ($[0] !== isCond || $[1] !== value) {
+    t1 = isCond
+      ? identity({
+          getValue() {
+            return value;
+          },
+        })
+      : 42;
+    $[0] = isCond;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ isCond: true, value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getValue":{"kind":"Function","result":0}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-derived-in-ternary-consequent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-derived-in-ternary-consequent.js
new file mode 100644
index 00000000000..e2e2a0bffcc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-derived-in-ternary-consequent.js
@@ -0,0 +1,16 @@
+import {identity, createHookWrapper} from 'shared-runtime';
+
+function useHook({isCond, value}) {
+  return isCond
+    ? identity({
+        getValue() {
+          return value;
+        },
+      })
+    : 42;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{isCond: true, value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-consequent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-consequent.expect.md
new file mode 100644
index 00000000000..41b8d802d3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-consequent.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+
+function useHook({isCond, value}) {
+  return isCond
+    ? {
+        getValue() {
+          return value;
+        },
+      }
+    : 42;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{isCond: true, value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(3);
+  const { isCond, value } = t0;
+  let t1;
+  if ($[0] !== isCond || $[1] !== value) {
+    t1 = isCond
+      ? {
+          getValue() {
+            return value;
+          },
+        }
+      : 42;
+    $[0] = isCond;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ isCond: true, value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getValue":{"kind":"Function","result":0}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-consequent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-consequent.js
new file mode 100644
index 00000000000..84617e7c8bc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-consequent.js
@@ -0,0 +1,16 @@
+import {createHookWrapper} from 'shared-runtime';
+
+function useHook({isCond, value}) {
+  return isCond
+    ? {
+        getValue() {
+          return value;
+        },
+      }
+    : 42;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{isCond: true, value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-test.expect.md
new file mode 100644
index 00000000000..51463b326d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-test.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, CONST_STRING0, CONST_STRING1} from 'shared-runtime';
+
+function useHook({value}) {
+  return {
+    getValue() {
+      return identity(value);
+    },
+  }
+    ? CONST_STRING0
+    : CONST_STRING1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import {
+  createHookWrapper,
+  CONST_STRING0,
+  CONST_STRING1,
+} from "shared-runtime";
+
+function useHook(t0) {
+  const { value } = t0;
+  return {
+    getValue() {
+      return identity(value);
+    },
+  }
+    ? CONST_STRING0
+    : CONST_STRING1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":"global string 0","shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-test.js
new file mode 100644
index 00000000000..c414f4a946d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-method-in-ternary-test.js
@@ -0,0 +1,16 @@
+import {createHookWrapper, CONST_STRING0, CONST_STRING1} from 'shared-runtime';
+
+function useHook({value}) {
+  return {
+    getValue() {
+      return identity(value);
+    },
+  }
+    ? CONST_STRING0
+    : CONST_STRING1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-spread-element.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-spread-element.expect.md
new file mode 100644
index 00000000000..6900cd5b821
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-spread-element.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {...props.foo};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.foo) {
+    t0 = { ...props.foo };
+    $[0] = props.foo;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-spread-element.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-spread-element.js
new file mode 100644
index 00000000000..d3a2d2846e7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-literal-spread-element.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const x = {...props.foo};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-maybe-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-maybe-alias.expect.md
new file mode 100644
index 00000000000..74c0dcdc14f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-maybe-alias.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, setProperty} from 'shared-runtime';
+function useHook(props) {
+  const x = {
+    getX() {
+      return props;
+    },
+  };
+  const y = {
+    getY() {
+      return 'y';
+    },
+  };
+  return setProperty(x, y);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper, setProperty } from "shared-runtime";
+function useHook(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const x = {
+      getX() {
+        return props;
+      },
+    };
+    const y = {
+      getY() {
+        return "y";
+      },
+    };
+    t0 = setProperty(x, y);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getX":{"kind":"Function","result":{"value":0}},"wat0":{"getY":{"kind":"Function","result":"y"}}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-maybe-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-maybe-alias.js
new file mode 100644
index 00000000000..dbb1800c977
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-maybe-alias.js
@@ -0,0 +1,19 @@
+import {createHookWrapper, setProperty} from 'shared-runtime';
+function useHook(props) {
+  const x = {
+    getX() {
+      return props;
+    },
+  };
+  const y = {
+    getY() {
+      return 'y';
+    },
+  };
+  return setProperty(x, y);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.expect.md
new file mode 100644
index 00000000000..886eb119d36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, mutate} from 'shared-runtime';
+
+function useHook(a) {
+  const x = {a};
+  let obj = {
+    method() {
+      mutate(x);
+      return x;
+    },
+  };
+  return obj.method();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{x: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper, mutate } from "shared-runtime";
+
+function useHook(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    const x = { a };
+    const obj = {
+      method() {
+        mutate(x);
+        return x;
+      },
+    };
+    t0 = obj.method();
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ x: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"a":{"x":1},"wat0":"joe"},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.js
new file mode 100644
index 00000000000..ef8b122bbb4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-3.js
@@ -0,0 +1,17 @@
+import {createHookWrapper, mutate} from 'shared-runtime';
+
+function useHook(a) {
+  const x = {a};
+  let obj = {
+    method() {
+      mutate(x);
+      return x;
+    },
+  };
+  return obj.method();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{x: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md
new file mode 100644
index 00000000000..1674c16e88b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, mutate, mutateAndReturn} from 'shared-runtime';
+function useHook({value}) {
+  const x = mutateAndReturn({value});
+  const obj = {
+    getValue() {
+      return value;
+    },
+  };
+  mutate(x);
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper, mutate, mutateAndReturn } from "shared-runtime";
+function useHook(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let obj;
+  if ($[0] !== value) {
+    const x = mutateAndReturn({ value });
+    obj = {
+      getValue() {
+        return value;
+      },
+    };
+    mutate(x);
+    $[0] = value;
+    $[1] = obj;
+  } else {
+    obj = $[1];
+  }
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getValue":{"kind":"Function","result":0}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.js
new file mode 100644
index 00000000000..03058d857bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.js
@@ -0,0 +1,16 @@
+import {createHookWrapper, mutate, mutateAndReturn} from 'shared-runtime';
+function useHook({value}) {
+  const x = mutateAndReturn({value});
+  const obj = {
+    getValue() {
+      return value;
+    },
+  };
+  mutate(x);
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-derived-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-derived-value.expect.md
new file mode 100644
index 00000000000..6c135bb0ebf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-derived-value.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, mutateAndReturn} from 'shared-runtime';
+function useHook({value}) {
+  const x = mutateAndReturn({value});
+  const obj = {
+    getValue() {
+      return x;
+    },
+  };
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper, mutateAndReturn } from "shared-runtime";
+function useHook(t0) {
+  const $ = _c(4);
+  const { value } = t0;
+  let t1;
+  if ($[0] !== value) {
+    t1 = mutateAndReturn({ value });
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let t2;
+  if ($[2] !== x) {
+    t2 = {
+      getValue() {
+        return x;
+      },
+    };
+    $[2] = x;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const obj = t2;
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getValue":{"kind":"Function","result":{"value":0,"wat0":"joe"}}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-derived-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-derived-value.js
new file mode 100644
index 00000000000..a5c919984d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-derived-value.js
@@ -0,0 +1,15 @@
+import {createHookWrapper, mutateAndReturn} from 'shared-runtime';
+function useHook({value}) {
+  const x = mutateAndReturn({value});
+  const obj = {
+    getValue() {
+      return x;
+    },
+  };
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-hook-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-hook-dep.expect.md
new file mode 100644
index 00000000000..2f130f32c74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-hook-dep.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+import {useState} from 'react';
+function useFoo() {
+  const [state, _setState] = useState(false);
+  return {
+    func() {
+      return state;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useFoo),
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+import { useState } from "react";
+function useFoo() {
+  const $ = _c(2);
+  const [state] = useState(false);
+  let t0;
+  if ($[0] !== state) {
+    t0 = {
+      func() {
+        return state;
+      },
+    };
+    $[0] = state;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useFoo),
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"func":{"kind":"Function","result":false}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-hook-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-hook-dep.js
new file mode 100644
index 00000000000..da9a8ba1394
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-hook-dep.js
@@ -0,0 +1,15 @@
+import {createHookWrapper} from 'shared-runtime';
+import {useState} from 'react';
+function useFoo() {
+  const [state, _setState] = useState(false);
+  return {
+    func() {
+      return state;
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useFoo),
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md
new file mode 100644
index 00000000000..9c73dd6f992
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {createHookWrapper, mutate, mutateAndReturn} from 'shared-runtime';
+function useHook({value}) {
+  const x = mutateAndReturn({value});
+  const obj = {
+    getValue() {
+      return x;
+    },
+  };
+  mutate(obj);
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper, mutate, mutateAndReturn } from "shared-runtime";
+function useHook(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let obj;
+  if ($[0] !== value) {
+    const x = mutateAndReturn({ value });
+    obj = {
+      getValue() {
+        return x;
+      },
+    };
+    mutate(obj);
+    $[0] = value;
+    $[1] = obj;
+  } else {
+    obj = $[1];
+  }
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getValue":{"kind":"Function","result":{"value":0,"wat0":"joe"}},"wat0":"joe"},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.js
new file mode 100644
index 00000000000..29928376bd0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.js
@@ -0,0 +1,16 @@
+import {createHookWrapper, mutate, mutateAndReturn} from 'shared-runtime';
+function useHook({value}) {
+  const x = mutateAndReturn({value});
+  const obj = {
+    getValue() {
+      return x;
+    },
+  };
+  mutate(obj);
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand.expect.md
new file mode 100644
index 00000000000..ebfa1d8d316
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component() {
+  let obj = {
+    method() {
+      return 1;
+    },
+  };
+  return obj.method();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 1}, {a: 2}, {b: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const obj = {
+      method() {
+        return 1;
+      },
+    };
+    t0 = obj.method();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 1 }, { a: 2 }, { b: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand.js
new file mode 100644
index 00000000000..f7bf87e26e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand.js
@@ -0,0 +1,13 @@
+function Component() {
+  let obj = {
+    method() {
+      return 1;
+    },
+  };
+  return obj.method();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 1}, {a: 2}, {b: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.expect.md
new file mode 100644
index 00000000000..b5534114c08
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+  if (props.cond) {
+    object.value = 1;
+    return object;
+  } else {
+    object.value = props.value;
+    return object;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, value: [0, 1, 2]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.cond || $[1] !== props.value) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const object = makeObject_Primitives();
+      if (props.cond) {
+        object.value = 1;
+        t0 = object;
+        break bb0;
+      } else {
+        object.value = props.value;
+        t0 = object;
+        break bb0;
+      }
+    }
+    $[0] = props.cond;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, value: [0, 1, 2] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true,"value":[0,1,2]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.js
new file mode 100644
index 00000000000..94a142d0337
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.js
@@ -0,0 +1,17 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+  if (props.cond) {
+    object.value = 1;
+    return object;
+  } else {
+    object.value = props.value;
+    return object;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, value: [0, 1, 2]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-pattern-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-pattern-params.expect.md
new file mode 100644
index 00000000000..ad8828770df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-pattern-params.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function component({a, b}) {
+  let y = {a};
+  let z = {b};
+  return {y, z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(t0) {
+  const $ = _c(7);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const y = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = { b };
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const z = t2;
+  let t3;
+  if ($[4] !== y || $[5] !== z) {
+    t3 = { y, z };
+    $[4] = y;
+    $[5] = z;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-pattern-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-pattern-params.js
new file mode 100644
index 00000000000..6bebf0633cd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-pattern-params.js
@@ -0,0 +1,11 @@
+function component({a, b}) {
+  let y = {a};
+  let z = {b};
+  return {y, z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md
new file mode 100644
index 00000000000..290901a4d13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md
@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const x = a.x;
+  const y = {...b.c.d};
+  y.z = c.d.e;
+  foo(a.b.c);
+  [a.b.c];
+}
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  const y = { ...b.c.d };
+  y.z = c.d.e;
+  foo(a.b.c);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.js
new file mode 100644
index 00000000000..4aa21f7c7f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.js
@@ -0,0 +1,7 @@
+function foo(a, b, c) {
+  const x = a.x;
+  const y = {...b.c.d};
+  y.z = c.d.e;
+  foo(a.b.c);
+  [a.b.c];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-1.expect.md
new file mode 100644
index 00000000000..6b9ca0c2317
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-1.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+function useHook({a, b}) {
+  return {
+    x: function () {
+      return [a];
+    },
+    y() {
+      return [b];
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{a: 1, b: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+function useHook(t0) {
+  const $ = _c(5);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = function () {
+      return [a];
+    };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== b || $[3] !== t1) {
+    t2 = {
+      x: t1,
+      y() {
+        return [b];
+      },
+    };
+    $[2] = b;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ a: 1, b: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"x":{"kind":"Function","result":[1]},"y":{"kind":"Function","result":[2]}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-1.js
new file mode 100644
index 00000000000..7ec6b24bb4f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-1.js
@@ -0,0 +1,16 @@
+import {createHookWrapper} from 'shared-runtime';
+function useHook({a, b}) {
+  return {
+    x: function () {
+      return [a];
+    },
+    y() {
+      return [b];
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{a: 1, b: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-2.expect.md
new file mode 100644
index 00000000000..0a0383e93a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-2.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {createHookWrapper} from 'shared-runtime';
+
+function useHook({a, b, c}) {
+  return {
+    x: [a],
+    y() {
+      return [b];
+    },
+    z: {c},
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{a: 1, b: 2, c: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createHookWrapper } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(8);
+  const { a, b, c } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = [a];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== b || $[3] !== c || $[4] !== t1) {
+    let t3;
+    if ($[6] !== c) {
+      t3 = { c };
+      $[6] = c;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    t2 = {
+      x: t1,
+      y() {
+        return [b];
+      },
+      z: t3,
+    };
+    $[2] = b;
+    $[3] = c;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ a: 1, b: 2, c: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"x":[1],"y":{"kind":"Function","result":[2]},"z":{"c":2}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-2.js
new file mode 100644
index 00000000000..faf33dfeedf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-2.js
@@ -0,0 +1,16 @@
+import {createHookWrapper} from 'shared-runtime';
+
+function useHook({a, b, c}) {
+  return {
+    x: [a],
+    y() {
+      return [b];
+    },
+    z: {c},
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{a: 1, b: 2, c: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-nested.expect.md
new file mode 100644
index 00000000000..dc1cd699d29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-nested.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+import {createHookWrapper} from 'shared-runtime';
+
+function useHook({value}) {
+  const [state] = useState(false);
+
+  return {
+    getX() {
+      return {
+        a: [],
+        getY() {
+          return value;
+        },
+        state,
+      };
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { createHookWrapper } from "shared-runtime";
+
+function useHook(t0) {
+  const $ = _c(3);
+  const { value } = t0;
+  const [state] = useState(false);
+  let t1;
+  if ($[0] !== state || $[1] !== value) {
+    t1 = {
+      getX() {
+        return {
+          a: [],
+          getY() {
+            return value;
+          },
+          state,
+        };
+      },
+    };
+    $[0] = state;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"result":{"getX":{"kind":"Function","result":{"a":[],"getY":{"kind":"Function","result":0},"state":false}}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-nested.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-nested.js
new file mode 100644
index 00000000000..64cbac9ea5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-shorthand-method-nested.js
@@ -0,0 +1,23 @@
+import {useState} from 'react';
+import {createHookWrapper} from 'shared-runtime';
+
+function useHook({value}) {
+  const [state] = useState(false);
+
+  return {
+    getX() {
+      return {
+        a: [],
+        getY() {
+          return value;
+        },
+        state,
+      };
+    },
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createHookWrapper(useHook),
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values-mutation.expect.md
new file mode 100644
index 00000000000..bc541b47f1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values-mutation.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const entries = Object.entries(object);
+  entries.map(([, value]) => {
+    value.updated = true;
+  });
+  return <Stringify entries={entries} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.object) {
+    const object = { object: props.object };
+    const entries = Object.entries(object);
+    entries.map(_temp);
+    t0 = <Stringify entries={entries} />;
+    $[0] = props.object;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(t0) {
+  const [, value] = t0;
+  value.updated = true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ object: { key: makeObject_Primitives() } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"entries":[["object",{"key":{"a":0,"b":"value1","c":true},"updated":true}]]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values-mutation.js
new file mode 100644
index 00000000000..2902cffd014
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values-mutation.js
@@ -0,0 +1,15 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const object = {object: props.object};
+  const entries = Object.entries(object);
+  entries.map(([, value]) => {
+    value.updated = true;
+  });
+  return <Stringify entries={entries} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{object: {key: makeObject_Primitives()}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values.expect.md
new file mode 100644
index 00000000000..90039906641
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component({items}) {
+  const record = useMemo(
+    () =>
+      Object.fromEntries(
+        items.map(item => [
+          item.id,
+          {id: item.id, render: ref => <Stringify ref={ref} {...item} />},
+        ])
+      ),
+    [items]
+  );
+
+  // Without a declaration for Object.entries(), this would be assumed to mutate
+  // `record`, meaning existing memoization couldn't be preserved
+  return (
+    <div>
+      {Object.values(record).map(({id, render}) => (
+        <Stringify key={id} render={render} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: '0', name: 'Hello'},
+        {id: '1', name: 'World!'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { Stringify } from "shared-runtime";
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component(t0) {
+  const $ = _c(4);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = Object.fromEntries(items.map(_temp));
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const record = t1;
+  let t2;
+  if ($[2] !== record) {
+    t2 = <div>{Object.values(record).map(_temp2)}</div>;
+    $[2] = record;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp2(t0) {
+  const { id, render } = t0;
+  return <Stringify key={id} render={render} />;
+}
+function _temp(item) {
+  return [
+    item.id,
+    { id: item.id, render: (ref) => <Stringify ref={ref} {...item} /> },
+  ];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        { id: "0", name: "Hello" },
+        { id: "1", name: "World!" },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"render":"[[ function params=1 ]]"}</div><div>{"render":"[[ function params=1 ]]"}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values.js
new file mode 100644
index 00000000000..4cf229c379a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-values.js
@@ -0,0 +1,39 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component({items}) {
+  const record = useMemo(
+    () =>
+      Object.fromEntries(
+        items.map(item => [
+          item.id,
+          {id: item.id, render: ref => <Stringify ref={ref} {...item} />},
+        ])
+      ),
+    [items]
+  );
+
+  // Without a declaration for Object.entries(), this would be assumed to mutate
+  // `record`, meaning existing memoization couldn't be preserved
+  return (
+    <div>
+      {Object.values(record).map(({id, render}) => (
+        <Stringify key={id} render={render} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: '0', name: 'Hello'},
+        {id: '1', name: 'World!'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/option-enable-change-variable-codegen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/option-enable-change-variable-codegen.expect.md
new file mode 100644
index 00000000000..82f71f4a050
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/option-enable-change-variable-codegen.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @enableChangeVariableCodegen
+function Component(props) {
+  const c_0 = [props.a, props.b.c];
+  return c_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 3.14, b: {c: true}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableChangeVariableCodegen
+function Component(props) {
+  const $ = _c(3);
+  const c_00 = $[0] !== props.a;
+  const c_1 = $[1] !== props.b.c;
+  let t0;
+  if (c_00 || c_1) {
+    t0 = [props.a, props.b.c];
+    $[0] = props.a;
+    $[1] = props.b.c;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const c_0 = t0;
+  return c_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 3.14, b: { c: true } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [3.14,true]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/option-enable-change-variable-codegen.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/option-enable-change-variable-codegen.js
new file mode 100644
index 00000000000..4b89fddcf3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/option-enable-change-variable-codegen.js
@@ -0,0 +1,10 @@
+// @enableChangeVariableCodegen
+function Component(props) {
+  const c_0 = [props.a, props.b.c];
+  return c_0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 3.14, b: {c: true}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chained.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chained.expect.md
new file mode 100644
index 00000000000..5f90a126d31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chained.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return call?.(props.a)?.(props.b)?.(props.c);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = call?.(props.a)?.(props.b)?.(props.c);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chained.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chained.js
new file mode 100644
index 00000000000..c4fbcff906d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chained.js
@@ -0,0 +1,3 @@
+function Component(props) {
+  return call?.(props.a)?.(props.b)?.(props.c);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.expect.md
new file mode 100644
index 00000000000..fa6f8cd9bc6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const item = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.item
+  );
+  return item.items?.map(item => renderItem(item)) ?? [];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useFragment } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  const item = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.item,
+  );
+  let t0;
+  if ($[0] !== item.items) {
+    t0 = item.items?.map(_temp) ?? [];
+    $[0] = item.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(item_0) {
+  return renderItem(item_0);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.js
new file mode 100644
index 00000000000..6fa11a2dab4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-logical.js
@@ -0,0 +1,13 @@
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const item = useFragment(
+    graphql`
+      fragment F on T {
+        id
+      }
+    `,
+    props.item
+  );
+  return item.items?.map(item => renderItem(item)) ?? [];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-simple.expect.md
new file mode 100644
index 00000000000..00338b7f60c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-simple.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return foo?.(props);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = foo?.(props);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-simple.js
new file mode 100644
index 00000000000..6590cb5b78f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-simple.js
@@ -0,0 +1,3 @@
+function Component(props) {
+  return foo?.(props);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-independently-memoizable-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-independently-memoizable-arg.expect.md
new file mode 100644
index 00000000000..b313cc20762
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-independently-memoizable-arg.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeOptionalFunction(props);
+  // for a regular call, the JSX element could be independently memoized
+  // since it is an immutable value. however, because the call is optional,
+  // we can't extract out independent memoization for the element w/o
+  // forcing that argument to evaluate unconditionally
+  const y = x?.(
+    <div>
+      <span>{props.text}</span>
+    </div>
+  );
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const x = makeOptionalFunction(props);
+    t0 = x?.(
+      <div>
+        <span>{props.text}</span>
+      </div>,
+    );
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const y = t0;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-independently-memoizable-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-independently-memoizable-arg.js
new file mode 100644
index 00000000000..9d9abf887f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-independently-memoizable-arg.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  const x = makeOptionalFunction(props);
+  // for a regular call, the JSX element could be independently memoized
+  // since it is an immutable value. however, because the call is optional,
+  // we can't extract out independent memoization for the element w/o
+  // forcing that argument to evaluate unconditionally
+  const y = x?.(
+    <div>
+      <span>{props.text}</span>
+    </div>
+  );
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-optional-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-optional-property-load.expect.md
new file mode 100644
index 00000000000..d95461adf90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-optional-property-load.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return props?.items?.map?.(render)?.filter(Boolean) ?? [];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props?.items) {
+    t0 = props?.items?.map?.(render)?.filter(Boolean) ?? [];
+    $[0] = props?.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-optional-property-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-optional-property-load.js
new file mode 100644
index 00000000000..400ec94c5c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-with-optional-property-load.js
@@ -0,0 +1,3 @@
+function Component(props) {
+  return props?.items?.map?.(render)?.filter(Boolean) ?? [];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md
new file mode 100644
index 00000000000..856d235ae6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeOptionalFunction(props);
+  const y = makeObject(props);
+  const z = x?.(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const x = makeOptionalFunction(props);
+    const y = makeObject(props);
+    t0 = x?.(y.a, props.a, foo(y.b), bar(props.b));
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.js
new file mode 100644
index 00000000000..f4610a49f3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const x = makeOptionalFunction(props);
+  const y = makeObject(props);
+  const z = x?.(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-load-static.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-load-static.expect.md
new file mode 100644
index 00000000000..cd520d13e11
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-load-static.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = a?.b.c[0];
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const x = a?.b.c[0];
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-load-static.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-load-static.js
new file mode 100644
index 00000000000..aa192bc82dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-load-static.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  let x = a?.b.c[0];
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-member-expression.expect.md
new file mode 100644
index 00000000000..c641fb9a248
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-member-expression.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const object = makeObject(props);
+  return object?.[props.key];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = makeObject(props);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const object = t0;
+  return object?.[props.key];
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-member-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-member-expression.js
new file mode 100644
index 00000000000..5e8a408e100
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-computed-member-expression.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const object = makeObject(props);
+  return object?.[props.key];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep.expect.md
new file mode 100644
index 00000000000..4c2bced216f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep.expect.md
@@ -0,0 +1,96 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {identity, ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+
+function Component({arg}) {
+  const data = useMemo(() => {
+    return arg?.items.edges?.nodes.map(identity);
+  }, [arg?.items.edges?.nodes]);
+  return (
+    <ValidateMemoization inputs={[arg?.items.edges?.nodes]} output={data} />
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: null}],
+  sequentialRenders: [
+    {arg: null},
+    {arg: null},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import { identity, ValidateMemoization } from "shared-runtime";
+import { useMemo } from "react";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { arg } = t0;
+
+  arg?.items.edges?.nodes;
+  let t1;
+  if ($[0] !== arg?.items.edges?.nodes) {
+    t1 = arg?.items.edges?.nodes.map(identity);
+    $[0] = arg?.items.edges?.nodes;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const data = t1;
+
+  const t2 = arg?.items.edges?.nodes;
+  let t3;
+  if ($[2] !== t2) {
+    t3 = [t2];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== data || $[5] !== t3) {
+    t4 = <ValidateMemoization inputs={t3} output={data} />;
+    $[4] = data;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arg: null }],
+  sequentialRenders: [
+    { arg: null },
+    { arg: null },
+    { arg: { items: { edges: null } } },
+    { arg: { items: { edges: null } } },
+    { arg: { items: { edges: { nodes: [1, 2, "hello"] } } } },
+    { arg: { items: { edges: { nodes: [1, 2, "hello"] } } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[null]}</div>
+<div>{"inputs":[null]}</div>
+<div>{"inputs":[null]}</div>
+<div>{"inputs":[null]}</div>
+<div>{"inputs":[[1,2,"hello"]],"output":[1,2,"hello"]}</div>
+<div>{"inputs":[[1,2,"hello"]],"output":[1,2,"hello"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep.js
new file mode 100644
index 00000000000..73f0f4d421a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-as-memo-dep.js
@@ -0,0 +1,24 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {identity, ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+
+function Component({arg}) {
+  const data = useMemo(() => {
+    return arg?.items.edges?.nodes.map(identity);
+  }, [arg?.items.edges?.nodes]);
+  return (
+    <ValidateMemoization inputs={[arg?.items.edges?.nodes]} output={data} />
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: null}],
+  sequentialRenders: [
+    {arg: null},
+    {arg: null},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-call-as-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-call-as-property.expect.md
new file mode 100644
index 00000000000..6632545eeeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-call-as-property.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject();
+  return x?.[foo(props.value)];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] !== props) {
+    t1 = x?.[foo(props.value)];
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-call-as-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-call-as-property.js
new file mode 100644
index 00000000000..ad51e5ec628
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-call-as-property.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = makeObject();
+  return x?.[foo(props.value)];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-chain.expect.md
new file mode 100644
index 00000000000..8c705f61749
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-chain.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// Note that `a?.b.c` is semantically different from `(a?.b).c`
+// We should codegen the correct member expressions
+function Component(props) {
+  let x = props?.b.c;
+  let y = props?.b.c.d?.e.f.g?.h;
+  return {x, y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Note that `a?.b.c` is semantically different from `(a?.b).c`
+// We should codegen the correct member expressions
+function Component(props) {
+  const $ = _c(3);
+  const x = props?.b.c;
+  const y = props?.b.c.d?.e.f.g?.h;
+  let t0;
+  if ($[0] !== x || $[1] !== y) {
+    t0 = { x, y };
+    $[0] = x;
+    $[1] = y;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-chain.js
new file mode 100644
index 00000000000..065bc894d96
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-chain.js
@@ -0,0 +1,13 @@
+// Note that `a?.b.c` is semantically different from `(a?.b).c`
+// We should codegen the correct member expressions
+function Component(props) {
+  let x = props?.b.c;
+  let y = props?.b.c.d?.e.f.g?.h;
+  return {x, y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-inverted-optionals-parallel-paths.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-inverted-optionals-parallel-paths.expect.md
new file mode 100644
index 00000000000..73c88e2c493
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-inverted-optionals-parallel-paths.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.a.b?.c.d?.e);
+    x.push(props.a?.b.c?.d.e);
+    return x;
+  }, [props.a.b.c.d.e]);
+  return <ValidateMemoization inputs={[props.a.b.c.d.e]} output={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import { ValidateMemoization } from "shared-runtime";
+function Component(props) {
+  const $ = _c(2);
+
+  const x$0 = [];
+  x$0.push(props?.a.b?.c.d?.e);
+  x$0.push(props.a?.b.c?.d.e);
+  let t0;
+  if ($[0] !== props.a.b.c.d.e) {
+    t0 = <ValidateMemoization inputs={[props.a.b.c.d.e]} output={x} />;
+    $[0] = props.a.b.c.d.e;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-inverted-optionals-parallel-paths.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-inverted-optionals-parallel-paths.js
new file mode 100644
index 00000000000..563b0bbf0f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-inverted-optionals-parallel-paths.js
@@ -0,0 +1,11 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.a.b?.c.d?.e);
+    x.push(props.a?.b.c?.d.e);
+    return x;
+  }, [props.a.b.c.d.e]);
+  return <ValidateMemoization inputs={[props.a.b.c.d.e]} output={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single-with-unconditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single-with-unconditional.expect.md
new file mode 100644
index 00000000000..95ebf3f95f9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single-with-unconditional.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    x.push(props.items);
+    return x;
+  }, [props.items]);
+  return <ValidateMemoization inputs={[props.items]} output={data} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import { ValidateMemoization } from "shared-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let x;
+  if ($[0] !== props.items) {
+    x = [];
+    x.push(props?.items);
+    x.push(props.items);
+    $[0] = props.items;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  const data = x;
+  let t0;
+  if ($[2] !== props.items) {
+    t0 = [props.items];
+    $[2] = props.items;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  let t1;
+  if ($[4] !== data || $[5] !== t0) {
+    t1 = <ValidateMemoization inputs={t0} output={data} />;
+    $[4] = data;
+    $[5] = t0;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single-with-unconditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single-with-unconditional.js
new file mode 100644
index 00000000000..8e6275bf921
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single-with-unconditional.js
@@ -0,0 +1,11 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    x.push(props.items);
+    return x;
+  }, [props.items]);
+  return <ValidateMemoization inputs={[props.items]} output={data} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single.expect.md
new file mode 100644
index 00000000000..43476f1604b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+function Component({arg}) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(arg?.items);
+    return x;
+  }, [arg?.items]);
+  return <ValidateMemoization inputs={[arg?.items]} output={data} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: {items: 2}}],
+  sequentialRenders: [
+    {arg: {items: 2}},
+    {arg: {items: 2}},
+    {arg: null},
+    {arg: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import { ValidateMemoization } from "shared-runtime";
+import { useMemo } from "react";
+function Component(t0) {
+  const $ = _c(7);
+  const { arg } = t0;
+
+  arg?.items;
+  let x;
+  if ($[0] !== arg?.items) {
+    x = [];
+    x.push(arg?.items);
+    $[0] = arg?.items;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  const data = x;
+  const t1 = arg?.items;
+  let t2;
+  if ($[2] !== t1) {
+    t2 = [t1];
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== data || $[5] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={data} />;
+    $[4] = data;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arg: { items: 2 } }],
+  sequentialRenders: [
+    { arg: { items: 2 } },
+    { arg: { items: 2 } },
+    { arg: null },
+    { arg: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[2],"output":[2]}</div>
+<div>{"inputs":[2],"output":[2]}</div>
+<div>{"inputs":[null],"output":[null]}</div>
+<div>{"inputs":[null],"output":[null]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single.js
new file mode 100644
index 00000000000..62ac31dd6d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-single.js
@@ -0,0 +1,22 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
+import {ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+function Component({arg}) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(arg?.items);
+    return x;
+  }, [arg?.items]);
+  return <ValidateMemoization inputs={[arg?.items]} output={data} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: {items: 2}}],
+  sequentialRenders: [
+    {arg: {items: 2}},
+    {arg: {items: 2}},
+    {arg: null},
+    {arg: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-optional-member-expr-as-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-optional-member-expr-as-property.expect.md
new file mode 100644
index 00000000000..b30a76a1c04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-optional-member-expr-as-property.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject();
+  return x.y?.[props.a?.[props.b?.[props.c]]];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  return x.y?.[props.a?.[props.b?.[props.c]]];
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-optional-member-expr-as-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-optional-member-expr-as-property.js
new file mode 100644
index 00000000000..d5ced1ec06f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-optional-member-expr-as-property.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = makeObject();
+  return x.y?.[props.a?.[props.b?.[props.c]]];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression.expect.md
new file mode 100644
index 00000000000..4029117ea6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  let x = bar(props.a);
+  let y = x?.b;
+
+  let z = useBar(y);
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = bar(props.a);
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  const y = x?.b;
+
+  const z = useBar(y);
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression.js
new file mode 100644
index 00000000000..f2af4518ee2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression.js
@@ -0,0 +1,7 @@
+function Foo(props) {
+  let x = bar(props.a);
+  let y = x?.b;
+
+  let z = useBar(y);
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md
new file mode 100644
index 00000000000..6da3dea1507
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeObject(props);
+  const y = makeObject(props);
+  const z = x.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const x = makeObject(props);
+    const y = makeObject(props);
+    t0 = x.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b));
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.js
new file mode 100644
index 00000000000..25145d61edc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const x = makeObject(props);
+  const y = makeObject(props);
+  const z = x.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md
new file mode 100644
index 00000000000..1ce6250e102
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeOptionalObject(props);
+  const y = makeObject(props);
+  const z = x?.method(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const x = makeOptionalObject(props);
+    const y = makeObject(props);
+    t0 = x?.method(y.a, props.a, foo(y.b), bar(props.b));
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.js
new file mode 100644
index 00000000000..698437dcd8c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const x = makeOptionalObject(props);
+  const y = makeObject(props);
+  const z = x?.method(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md
new file mode 100644
index 00000000000..ac3d1996087
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = makeOptionalObject(props);
+  const y = makeObject(props);
+  const z = x?.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const x = makeOptionalObject(props);
+    const y = makeObject(props);
+    t0 = x?.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b));
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const z = t0;
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.js
new file mode 100644
index 00000000000..0d62a3c78db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  const x = makeOptionalObject(props);
+  const y = makeObject(props);
+  const z = x?.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b));
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
new file mode 100644
index 00000000000..7e79b2d0437
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @enableReactiveScopesInHIR:false
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableReactiveScopesInHIR:false
+import { useRef } from "react";
+import { addOne } from "shared-runtime";
+
+function useKeyCommand() {
+  const $ = _c(1);
+  const currentPosition = useRef(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
+    const moveLeft = { handler: handleKey("left") };
+    const moveRight = { handler: handleKey("right") };
+    t0 = [moveLeft, moveRight];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"handler":"[[ function params=0 ]]"},{"handler":"[[ function params=0 ]]"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.tsx
new file mode 100644
index 00000000000..6f27dfe07fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.tsx
@@ -0,0 +1,24 @@
+// @enableReactiveScopesInHIR:false
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.expect.md
new file mode 100644
index 00000000000..0f01d77d256
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  // test outlined functions with destructured parameters - the
+  // temporary for the destructured param must be promoted
+  return (
+    <>
+      {props.items.map(({id, name}) => (
+        <Stringify key={id} name={name} />
+      ))}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'one'}]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map(_temp);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = <>{t0}</>;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+function _temp(t0) {
+  const { id, name } = t0;
+  return <Stringify key={id} name={name} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "one" }] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"name":"one"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.js
new file mode 100644
index 00000000000..d185c40f062
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.js
@@ -0,0 +1,18 @@
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  // test outlined functions with destructured parameters - the
+  // temporary for the destructured param must be promoted
+  return (
+    <>
+      {props.items.map(({id, name}) => (
+        <Stringify key={id} name={name} />
+      ))}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'one'}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.expect.md
new file mode 100644
index 00000000000..dec1928cf89
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <Stringify key={item.id} item={item.name} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'one'}]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map(_temp);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = <div>{t0}</div>;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+function _temp(item) {
+  return <Stringify key={item.id} item={item.name} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [{ id: 1, name: "one" }] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"item":"one"}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.js
new file mode 100644
index 00000000000..71c93afe238
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.js
@@ -0,0 +1,16 @@
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <Stringify key={item.id} item={item.name} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [{id: 1, name: 'one'}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md
new file mode 100644
index 00000000000..d97c06481c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+const Component2 = props => {
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component2,
+  params: [
+    {
+      items: [
+        {id: 2, name: 'foo'},
+        {id: 3, name: 'bar'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const Component2 = (props) => {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map(_temp);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = <ul>{t0}</ul>;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component2,
+  params: [
+    {
+      items: [
+        { id: 2, name: "foo" },
+        { id: 3, name: "bar" },
+      ],
+    },
+  ],
+};
+function _temp(item) {
+  return <li key={item.id}>{item.name}</li>;
+}
+
+```
+      
+### Eval output
+(kind: ok) <ul><li>foo</li><li>bar</li></ul>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.js
new file mode 100644
index 00000000000..3a6ac59d409
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.js
@@ -0,0 +1,21 @@
+const Component2 = props => {
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component2,
+  params: [
+    {
+      items: [
+        {id: 2, name: 'foo'},
+        {id: 3, name: 'bar'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md
new file mode 100644
index 00000000000..11d4646c655
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return <View {...props} />;
+}
+
+const View = React.memo(({items}) => {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+});
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: 2, name: 'foo'},
+        {id: 3, name: 'bar'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <View {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+const View = React.memo((t0) => {
+  const $ = _c(4);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = items.map(_temp);
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = <ul>{t1}</ul>;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+});
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        { id: 2, name: "foo" },
+        { id: 3, name: "bar" },
+      ],
+    },
+  ],
+};
+function _temp(item) {
+  return <li key={item.id}>{item.name}</li>;
+}
+
+```
+      
+### Eval output
+(kind: ok) <ul><li>foo</li><li>bar</li></ul>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.js
new file mode 100644
index 00000000000..cc106300a39
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.js
@@ -0,0 +1,25 @@
+function Component(props) {
+  return <View {...props} />;
+}
+
+const View = React.memo(({items}) => {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+});
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: 2, name: 'foo'},
+        {id: 3, name: 'bar'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md
new file mode 100644
index 00000000000..894dea7ce89
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const x = [];
+  const y = [];
+
+  if (x) {
+  }
+
+  y.push(a);
+  x.push(b);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  const x = [];
+  const y = [];
+
+  if (x) {
+  }
+
+  y.push(a);
+  x.push(b);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.js
new file mode 100644
index 00000000000..de49b8b7597
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.js
@@ -0,0 +1,16 @@
+function foo(a, b, c) {
+  const x = [];
+  const y = [];
+
+  if (x) {
+  }
+
+  y.push(a);
+  x.push(b);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md
new file mode 100644
index 00000000000..6c425bcd88b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  let x = [];
+  let y = [];
+  x.push(a);
+  y.push(b);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b) {
+  const x = [];
+  const y = [];
+  x.push(a);
+  y.push(b);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.js
new file mode 100644
index 00000000000..b219006e2d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.js
@@ -0,0 +1,12 @@
+function foo(a, b) {
+  let x = [];
+  let y = [];
+  x.push(a);
+  y.push(b);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md
new file mode 100644
index 00000000000..de68c96a38c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  let x = [];
+  let y = [];
+  y.push(b);
+  x.push(a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b) {
+  const x = [];
+  const y = [];
+  y.push(b);
+  x.push(a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.js
new file mode 100644
index 00000000000..6253f2fd074
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.js
@@ -0,0 +1,12 @@
+function foo(a, b) {
+  let x = [];
+  let y = [];
+  y.push(b);
+  x.push(a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowing-within-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowing-within-block.expect.md
new file mode 100644
index 00000000000..6c7f138cc9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowing-within-block.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    let y = [];
+    if (b) {
+      y.push(c);
+    }
+
+    x.push(<div>{y}</div>);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(9);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      let y;
+      if ($[4] !== b || $[5] !== c) {
+        y = [];
+        if (b) {
+          y.push(c);
+        }
+        $[4] = b;
+        $[5] = c;
+        $[6] = y;
+      } else {
+        y = $[6];
+      }
+      let t0;
+      if ($[7] !== y) {
+        t0 = <div>{y}</div>;
+        $[7] = y;
+        $[8] = t0;
+      } else {
+        t0 = $[8];
+      }
+      x.push(t0);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowing-within-block.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowing-within-block.js
new file mode 100644
index 00000000000..134aa185fa0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowing-within-block.js
@@ -0,0 +1,18 @@
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    let y = [];
+    if (b) {
+      y.push(c);
+    }
+
+    x.push(<div>{y}</div>);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md
new file mode 100644
index 00000000000..7d14ce7e0d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  let y = [];
+  while (c) {
+    y.push(b);
+    x.push(a);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  const x = [];
+  const y = [];
+  while (c) {
+    y.push(b);
+    x.push(a);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.js
new file mode 100644
index 00000000000..4f6b2939cc7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.js
@@ -0,0 +1,14 @@
+function foo(a, b, c) {
+  let x = [];
+  let y = [];
+  while (c) {
+    y.push(b);
+    x.push(a);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-within-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-within-block.expect.md
new file mode 100644
index 00000000000..7da3965abbe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-within-block.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    let y = [];
+    if (b) {
+      y.push(c);
+    }
+
+    x.push(y);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(7);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      let y;
+      if ($[4] !== b || $[5] !== c) {
+        y = [];
+        if (b) {
+          y.push(c);
+        }
+        $[4] = b;
+        $[5] = c;
+        $[6] = y;
+      } else {
+        y = $[6];
+      }
+
+      x.push(y);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-within-block.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-within-block.js
new file mode 100644
index 00000000000..330eb3d4de8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-within-block.js
@@ -0,0 +1,18 @@
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    let y = [];
+    if (b) {
+      y.push(c);
+    }
+
+    x.push(y);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md
new file mode 100644
index 00000000000..87c9485d99a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  let y = null;
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    y = foo();
+    if (props.b) {
+      return;
+    }
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  let y;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = foo();
+          $[5] = t1;
+        } else {
+          t1 = $[5];
+        }
+        y = t1;
+        if (props.b) {
+          t0 = undefined;
+          break bb0;
+        }
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+    $[4] = y;
+  } else {
+    t0 = $[3];
+    y = $[4];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, a: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.js
new file mode 100644
index 00000000000..66d68242b8b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.js
@@ -0,0 +1,20 @@
+function Component(props) {
+  let x = [];
+  let y = null;
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    y = foo();
+    if (props.b) {
+      return;
+    }
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md
new file mode 100644
index 00000000000..f10c6af6094
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+
+function Foo(cond) {
+  let x = null;
+  if (cond) {
+    x = [];
+  } else {
+  }
+  // Here, x = phi(x$null, x$[]) should receive a ValueKind of Mutable
+  arrayPush(x, 2);
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush } from "shared-runtime";
+
+function Foo(cond) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== cond) {
+    x = null;
+    if (cond) {
+      x = [];
+    }
+
+    arrayPush(x, 2);
+    $[0] = cond;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.ts
new file mode 100644
index 00000000000..3bf259216c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.ts
@@ -0,0 +1,19 @@
+import {arrayPush} from 'shared-runtime';
+
+function Foo(cond) {
+  let x = null;
+  if (cond) {
+    x = [];
+  } else {
+  }
+  // Here, x = phi(x$null, x$[]) should receive a ValueKind of Mutable
+  arrayPush(x, 2);
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.expect.md
new file mode 100644
index 00000000000..2bfb21bc673
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.expect.md
@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    if (props.cond2) {
+      y = [props.value];
+    } else {
+      y = [props.value2];
+    }
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, cond2: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: true, value: 42},
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: true, cond2: false, value2: 42},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: false},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if (
+    $[1] !== props.cond ||
+    $[2] !== props.cond2 ||
+    $[3] !== props.value ||
+    $[4] !== props.value2
+  ) {
+    let y;
+    if (props.cond) {
+      if (props.cond2) {
+        y = [props.value];
+      } else {
+        y = [props.value2];
+      }
+    } else {
+      y = [];
+    }
+    y.push(x);
+    t1 = [x, y];
+    $[1] = props.cond;
+    $[2] = props.cond2;
+    $[3] = props.value;
+    $[4] = props.value2;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, cond2: true, value: 42 }],
+  sequentialRenders: [
+    { cond: true, cond2: true, value: 3.14 },
+    { cond: true, cond2: true, value: 42 },
+    { cond: true, cond2: true, value: 3.14 },
+    { cond: true, cond2: false, value2: 3.14 },
+    { cond: true, cond2: false, value2: 42 },
+    { cond: true, cond2: false, value2: 3.14 },
+    { cond: false },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},[42,"[[ cyclic ref *1 ]]"]]
+[{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},[42,"[[ cyclic ref *1 ]]"]]
+[{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},["[[ cyclic ref *1 ]]"]]
+[{},["[[ cyclic ref *1 ]]"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.js
new file mode 100644
index 00000000000..0a9aa39defe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.js
@@ -0,0 +1,37 @@
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    if (props.cond2) {
+      y = [props.value];
+    } else {
+      y = [props.value2];
+    }
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, cond2: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: true, value: 42},
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: true, cond2: false, value2: 42},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: false},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md
new file mode 100644
index 00000000000..9fc02ca3b90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = [props.value];
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, value: 3.14},
+    {cond: false, value: 3.14},
+    {cond: true, value: 42},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] !== props.cond || $[2] !== props.value) {
+    let y;
+    if (props.cond) {
+      y = [props.value];
+    } else {
+      y = [];
+    }
+    y.push(x);
+    t1 = [x, y];
+    $[1] = props.cond;
+    $[2] = props.value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, value: 42 }],
+  sequentialRenders: [
+    { cond: true, value: 3.14 },
+    { cond: false, value: 3.14 },
+    { cond: true, value: 42 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},["[[ cyclic ref *1 ]]"]]
+[{},[42,"[[ cyclic ref *1 ]]"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.js
new file mode 100644
index 00000000000..732a1524cba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.js
@@ -0,0 +1,26 @@
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = [props.value];
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, value: 3.14},
+    {cond: false, value: 3.14},
+    {cond: true, value: 42},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md
new file mode 100644
index 00000000000..f0a4ad368ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @debug
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = {};
+  } else {
+    y = {a: props.a};
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the object literals in the
+  // if/else branches
+  y.x = x;
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, a: 'a!'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @debug
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] !== props.a || $[2] !== props.cond) {
+    let y;
+    if (props.cond) {
+      y = {};
+    } else {
+      y = { a: props.a };
+    }
+    y.x = x;
+    t1 = [x, y];
+    $[1] = props.a;
+    $[2] = props.cond;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, a: "a!" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},{"a":"a!","x":"[[ cyclic ref *1 ]]"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.js
new file mode 100644
index 00000000000..ba7133ff808
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.js
@@ -0,0 +1,22 @@
+// @debug
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = {};
+  } else {
+    y = {a: props.a};
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the object literals in the
+  // if/else branches
+  y.x = x;
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, a: 'a!'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-existing-memoization-guarantees/lambda-with-fbt-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-existing-memoization-guarantees/lambda-with-fbt-preserve-memoization.expect.md
new file mode 100644
index 00000000000..bafbb5c5ef3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-existing-memoization-guarantees/lambda-with-fbt-preserve-memoization.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {fbt} from 'fbt';
+
+function Component() {
+  const buttonLabel = () => {
+    if (!someCondition) {
+      return <fbt desc="My label">{'Purchase as a gift'}</fbt>;
+    } else if (
+      !iconOnly &&
+      showPrice &&
+      item?.current_gift_offer?.price?.formatted != null
+    ) {
+      return (
+        <fbt desc="Gift button's label">
+          {'Gift | '}
+          <fbt:param name="price">
+            {item?.current_gift_offer?.price?.formatted}
+          </fbt:param>
+        </fbt>
+      );
+    } else if (!iconOnly && !showPrice) {
+      return <fbt desc="Gift button's label">{'Gift'}</fbt>;
+    }
+  };
+
+  return (
+    <View>
+      <Button text={buttonLabel()} />
+    </View>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { fbt } from "fbt";
+
+function Component() {
+  const $ = _c(1);
+  const buttonLabel = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <View>
+        <Button text={buttonLabel()} />
+      </View>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  if (!someCondition) {
+    return fbt._("Purchase as a gift", null, { hk: "1gHj4g" });
+  } else {
+    if (
+      !iconOnly &&
+      showPrice &&
+      item?.current_gift_offer?.price?.formatted != null
+    ) {
+      return fbt._(
+        "Gift | {price}",
+        [fbt._param("price", item?.current_gift_offer?.price?.formatted)],
+        { hk: "3GTnGE" },
+      );
+    } else {
+      if (!iconOnly && !showPrice) {
+        return fbt._("Gift", null, { hk: "3fqfrk" });
+      }
+    }
+  }
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-existing-memoization-guarantees/lambda-with-fbt-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-existing-memoization-guarantees/lambda-with-fbt-preserve-memoization.js
new file mode 100644
index 00000000000..6b49c4a1fb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-existing-memoization-guarantees/lambda-with-fbt-preserve-memoization.js
@@ -0,0 +1,31 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {fbt} from 'fbt';
+
+function Component() {
+  const buttonLabel = () => {
+    if (!someCondition) {
+      return <fbt desc="My label">{'Purchase as a gift'}</fbt>;
+    } else if (
+      !iconOnly &&
+      showPrice &&
+      item?.current_gift_offer?.price?.formatted != null
+    ) {
+      return (
+        <fbt desc="Gift button's label">
+          {'Gift | '}
+          <fbt:param name="price">
+            {item?.current_gift_offer?.price?.formatted}
+          </fbt:param>
+        </fbt>
+      );
+    } else if (!iconOnly && !showPrice) {
+      return <fbt desc="Gift button's label">{'Gift'}</fbt>;
+    }
+  };
+
+  return (
+    <View>
+      <Button text={buttonLabel()} />
+    </View>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-jsxtext-stringliteral-distinction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-jsxtext-stringliteral-distinction.expect.md
new file mode 100644
index 00000000000..e59226eb137
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-jsxtext-stringliteral-distinction.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function Foo() {
+  return <div> {', '}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div> {", "}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div> , </div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-jsxtext-stringliteral-distinction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-jsxtext-stringliteral-distinction.js
new file mode 100644
index 00000000000..2e9bbb4bc8d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-jsxtext-stringliteral-distinction.js
@@ -0,0 +1,8 @@
+function Foo() {
+  return <div> {', '}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md
new file mode 100644
index 00000000000..84c611dec35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md
@@ -0,0 +1,122 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        return identity(x.y.z); // accesses more levels of properties than the manual memo
+      },
+    });
+    // x.y as a manual dep only tells us that x is non-nullable, not that x.y is non-nullable
+    // we can only take a dep on x.y, not x.y.z
+  }, [x.y]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <ValidateMemoization inputs={[x.y]} output={result} />;
+}
+
+const input1 = {x: {y: {z: 42}}};
+const input1b = {x: {y: {z: 42}}};
+const input2 = {x: {y: {z: 3.14}}};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [input1],
+  sequentialRenders: [
+    input1,
+    input1,
+    input1b, // should reset even though .z didn't change
+    input1,
+    input2,
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import { useMemo } from "react";
+import { identity, ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(11);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x.y) {
+    t1 = identity({ callback: () => identity(x.y.z) });
+    $[0] = x.y;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const object = t1;
+  let t2;
+  if ($[2] !== object) {
+    t2 = object.callback();
+    $[2] = object;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2) {
+    t3 = [t2];
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const result = t3;
+  let t4;
+  if ($[6] !== x.y) {
+    t4 = [x.y];
+    $[6] = x.y;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== result || $[9] !== t4) {
+    t5 = <ValidateMemoization inputs={t4} output={result} />;
+    $[8] = result;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}
+
+const input1 = { x: { y: { z: 42 } } };
+const input1b = { x: { y: { z: 42 } } };
+const input2 = { x: { y: { z: 3.14 } } };
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [input1],
+  sequentialRenders: [
+    input1,
+    input1,
+    input1b, // should reset even though .z didn't change
+    input1,
+    input2,
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[{"z":42}],"output":[42]}</div>
+<div>{"inputs":[{"z":42}],"output":[42]}</div>
+<div>{"inputs":[{"z":42}],"output":[42]}</div>
+<div>{"inputs":[{"z":42}],"output":[42]}</div>
+<div>{"inputs":[{"z":3.14}],"output":[3.14]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.js
new file mode 100644
index 00000000000..373fdc53fa2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.js
@@ -0,0 +1,35 @@
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        return identity(x.y.z); // accesses more levels of properties than the manual memo
+      },
+    });
+    // x.y as a manual dep only tells us that x is non-nullable, not that x.y is non-nullable
+    // we can only take a dep on x.y, not x.y.z
+  }, [x.y]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <ValidateMemoization inputs={[x.y]} output={result} />;
+}
+
+const input1 = {x: {y: {z: 42}}};
+const input1b = {x: {y: {z: 42}}};
+const input2 = {x: {y: {z: 3.14}}};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [input1],
+  sequentialRenders: [
+    input1,
+    input1,
+    input1b, // should reset even though .z didn't change
+    input1,
+    input2,
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.expect.md
new file mode 100644
index 00000000000..82c11f7783d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.expect.md
@@ -0,0 +1,117 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        return identity(x.y.z);
+      },
+    });
+  }, [x.y.z]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {y: {z: 42}}}],
+  sequentialRenders: [
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import { useMemo } from "react";
+import { identity, ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(11);
+  const { x } = t0;
+  let t1;
+  if ($[0] !== x.y.z) {
+    t1 = identity({ callback: () => identity(x.y.z) });
+    $[0] = x.y.z;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const object = t1;
+  let t2;
+  if ($[2] !== object) {
+    t2 = object.callback();
+    $[2] = object;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2) {
+    t3 = [t2];
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const result = t3;
+  let t4;
+  if ($[6] !== x.y.z) {
+    t4 = [x.y.z];
+    $[6] = x.y.z;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== result || $[9] !== t4) {
+    t5 = <ValidateMemoization inputs={t4} output={result} />;
+    $[8] = result;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: { y: { z: 42 } } }],
+  sequentialRenders: [
+    { x: { y: { z: 42 } } },
+    { x: { y: { z: 42 } } },
+    { x: { y: { z: 3.14 } } },
+    { x: { y: { z: 42 } } },
+    { x: { y: { z: 3.14 } } },
+    { x: { y: { z: 42 } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[3.14],"output":[3.14]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[3.14],"output":[3.14]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js
new file mode 100644
index 00000000000..6b55e68bb01
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js
@@ -0,0 +1,31 @@
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        return identity(x.y.z);
+      },
+    });
+  }, [x.y.z]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {y: {z: 42}}}],
+  sequentialRenders: [
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md
new file mode 100644
index 00000000000..ab4940bcc3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md
@@ -0,0 +1,125 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x, y, z}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        return identity(x?.y?.z, y.a?.b, z.a.b?.c);
+      },
+    });
+  }, [x?.y?.z, y.a?.b, z.a.b?.c]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <Inner x={x} result={result} />;
+}
+
+function Inner({x, result}) {
+  'use no memo';
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {y: {z: 42}}}],
+  sequentialRenders: [
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import { useMemo } from "react";
+import { identity, ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(11);
+  const { x, y, z } = t0;
+
+  x?.y?.z;
+  y.a?.b;
+  z.a.b?.c;
+  let t1;
+  if ($[0] !== x?.y?.z || $[1] !== y.a?.b || $[2] !== z.a.b?.c) {
+    t1 = identity({ callback: () => identity(x?.y?.z, y.a?.b, z.a.b?.c) });
+    $[0] = x?.y?.z;
+    $[1] = y.a?.b;
+    $[2] = z.a.b?.c;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const object = t1;
+  let t2;
+  if ($[4] !== object) {
+    t2 = object.callback();
+    $[4] = object;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== t2) {
+    t3 = [t2];
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const result = t3;
+  let t4;
+  if ($[8] !== result || $[9] !== x) {
+    t4 = <Inner x={x} result={result} />;
+    $[8] = result;
+    $[9] = x;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+
+function Inner({ x, result }) {
+  "use no memo";
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: { y: { z: 42 } } }],
+  sequentialRenders: [
+    { x: { y: { z: 42 } } },
+    { x: { y: { z: 42 } } },
+    { x: { y: { z: 3.14 } } },
+    { x: { y: { z: 42 } } },
+    { x: { y: { z: 3.14 } } },
+    { x: { y: { z: 42 } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js
new file mode 100644
index 00000000000..820cef20cb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js
@@ -0,0 +1,36 @@
+// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false
+
+import {useMemo} from 'react';
+import {identity, ValidateMemoization} from 'shared-runtime';
+
+function Component({x, y, z}) {
+  const object = useMemo(() => {
+    return identity({
+      callback: () => {
+        return identity(x?.y?.z, y.a?.b, z.a.b?.c);
+      },
+    });
+  }, [x?.y?.z, y.a?.b, z.a.b?.c]);
+  const result = useMemo(() => {
+    return [object.callback()];
+  }, [object]);
+  return <Inner x={x} result={result} />;
+}
+
+function Inner({x, result}) {
+  'use no memo';
+  return <ValidateMemoization inputs={[x.y.z]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: {y: {z: 42}}}],
+  sequentialRenders: [
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+    {x: {y: {z: 3.14}}},
+    {x: {y: {z: 42}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-dropped-infer-always-invalidating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-dropped-infer-always-invalidating.expect.md
new file mode 100644
index 00000000000..aead04aa953
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-dropped-infer-always-invalidating.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {useHook} from 'shared-runtime';
+
+// useMemo values may not be memoized in Forget output if we
+// infer that their deps always invalidate.
+// This is technically a false positive as the useMemo in source
+// was effectively a no-op
+function useFoo(props) {
+  const x = [];
+  useHook();
+  x.push(props);
+
+  return useMemo(() => [x], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.false-positive-useMemo-dropped-infer-always-invalidating.ts:15:9
+  13 |   x.push(props);
+  14 |
+> 15 |   return useMemo(() => [x], [x]);
+     |          ^^^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing memoization
+  16 | }
+  17 |
+  18 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-dropped-infer-always-invalidating.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-dropped-infer-always-invalidating.ts
new file mode 100644
index 00000000000..3265182c51d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-dropped-infer-always-invalidating.ts
@@ -0,0 +1,21 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {useHook} from 'shared-runtime';
+
+// useMemo values may not be memoized in Forget output if we
+// infer that their deps always invalidate.
+// This is technically a false positive as the useMemo in source
+// was effectively a no-op
+function useFoo(props) {
+  const x = [];
+  useHook();
+  x.push(props);
+
+  return useMemo(() => [x], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md
new file mode 100644
index 00000000000..9a092e3f228
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+// This is a false positive as Forget's inferred memoization
+// invalidates strictly less than source. We currently do not
+// track transitive deps / invalidations of manual memo deps
+// because of implementation complexity
+function useFoo() {
+  const val = [1, 2, 3];
+
+  return useMemo(() => {
+    return identity(val);
+  }, [val]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.false-positive-useMemo-infer-mutate-deps.ts:14:6
+  12 |   return useMemo(() => {
+  13 |     return identity(val);
+> 14 |   }, [val]);
+     |       ^^^ This dependency may be modified later
+  15 | }
+  16 |
+  17 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts
new file mode 100644
index 00000000000..628c786550e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts
@@ -0,0 +1,20 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+// This is a false positive as Forget's inferred memoization
+// invalidates strictly less than source. We currently do not
+// track transitive deps / invalidations of manual memo deps
+// because of implementation complexity
+function useFoo() {
+  const val = [1, 2, 3];
+
+  return useMemo(() => {
+    return identity(val);
+  }, [val]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-overlap-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-overlap-scopes.expect.md
new file mode 100644
index 00000000000..f2bd513f57f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-overlap-scopes.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+import {useMemo} from 'react';
+import {arrayPush} from 'shared-runtime';
+
+/**
+ * Repro showing differences between mutable ranges and scope ranges.
+ *
+ * For useMemo dependency `x`:
+ * - mutable range ends after the `arrayPush(x, b)` instruction
+ * - scope range is extended due to MergeOverlappingScopes
+ *
+ * Since manual memo deps are guaranteed to be named (guaranteeing valid
+ * codegen), it's correct to take a dependency on a dep *before* the end
+ * of its scope (but after its mutable range ends).
+ */
+
+function useFoo(a, b) {
+  const x = [];
+  const y = [];
+  arrayPush(x, b);
+  const result = useMemo(() => {
+    return [Math.max(x[1], a)];
+  }, [a, x]);
+  arrayPush(y, 3);
+  return {result, y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.false-positive-useMemo-overlap-scopes.ts:23:9
+  21 |   const result = useMemo(() => {
+  22 |     return [Math.max(x[1], a)];
+> 23 |   }, [a, x]);
+     |          ^ This dependency may be modified later
+  24 |   arrayPush(y, 3);
+  25 |   return {result, y};
+  26 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-overlap-scopes.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-overlap-scopes.ts
new file mode 100644
index 00000000000..ade1c6219f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-overlap-scopes.ts
@@ -0,0 +1,31 @@
+// @validatePreserveExistingMemoizationGuarantees:true
+import {useMemo} from 'react';
+import {arrayPush} from 'shared-runtime';
+
+/**
+ * Repro showing differences between mutable ranges and scope ranges.
+ *
+ * For useMemo dependency `x`:
+ * - mutable range ends after the `arrayPush(x, b)` instruction
+ * - scope range is extended due to MergeOverlappingScopes
+ *
+ * Since manual memo deps are guaranteed to be named (guaranteeing valid
+ * codegen), it's correct to take a dependency on a dep *before* the end
+ * of its scope (but after its mutable range ends).
+ */
+
+function useFoo(a, b) {
+  const x = [];
+  const y = [];
+  arrayPush(x, b);
+  const result = useMemo(() => {
+    return [Math.max(x[1], a)];
+  }, [a, x]);
+  arrayPush(y, 3);
+  return {result, y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md
new file mode 100644
index 00000000000..ed2e61d8ee3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+
+function Component({propA, propB}) {
+  return useCallback(() => {
+    if (propA) {
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 1, propB: {x: {y: []}}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propB`, but the source dependencies were [propA, propB.x.y]. Inferred less specific property than source.
+
+error.hoist-useCallback-conditional-access-own-scope.ts:5:21
+   3 |
+   4 | function Component({propA, propB}) {
+>  5 |   return useCallback(() => {
+     |                      ^^^^^^^
+>  6 |     if (propA) {
+     | ^^^^^^^^^^^^^^^^
+>  7 |       return {
+     | ^^^^^^^^^^^^^^^^
+>  8 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^
+>  9 |       };
+     | ^^^^^^^^^^^^^^^^
+> 10 |     }
+     | ^^^^^^^^^^^^^^^^
+> 11 |   }, [propA, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  12 | }
+  13 |
+  14 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts
new file mode 100644
index 00000000000..a75a3936d4c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+
+function Component({propA, propB}) {
+  return useCallback(() => {
+    if (propA) {
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 1, propB: {x: {y: []}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md
new file mode 100644
index 00000000000..a16ef317b09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md
@@ -0,0 +1,93 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+import {identity, mutate} from 'shared-runtime';
+
+function useHook(propA, propB) {
+  return useCallback(() => {
+    const x = {};
+    if (identity(null) ?? propA.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA.a, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 1}, {x: {y: 3}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propA`, but the source dependencies were [propA.a, propB.x.y]. Inferred less specific property than source.
+
+error.hoist-useCallback-infer-conditional-value-block.ts:6:21
+   4 |
+   5 | function useHook(propA, propB) {
+>  6 |   return useCallback(() => {
+     |                      ^^^^^^^
+>  7 |     const x = {};
+     | ^^^^^^^^^^^^^^^^^
+>  8 |     if (identity(null) ?? propA.a) {
+     | ^^^^^^^^^^^^^^^^^
+>  9 |       mutate(x);
+     | ^^^^^^^^^^^^^^^^^
+> 10 |       return {
+     | ^^^^^^^^^^^^^^^^^
+> 11 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^^
+> 12 |       };
+     | ^^^^^^^^^^^^^^^^^
+> 13 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 14 |   }, [propA.a, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  15 | }
+  16 |
+  17 | export const FIXTURE_ENTRYPOINT = {
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propB`, but the source dependencies were [propA.a, propB.x.y]. Inferred less specific property than source.
+
+error.hoist-useCallback-infer-conditional-value-block.ts:6:21
+   4 |
+   5 | function useHook(propA, propB) {
+>  6 |   return useCallback(() => {
+     |                      ^^^^^^^
+>  7 |     const x = {};
+     | ^^^^^^^^^^^^^^^^^
+>  8 |     if (identity(null) ?? propA.a) {
+     | ^^^^^^^^^^^^^^^^^
+>  9 |       mutate(x);
+     | ^^^^^^^^^^^^^^^^^
+> 10 |       return {
+     | ^^^^^^^^^^^^^^^^^
+> 11 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^^
+> 12 |       };
+     | ^^^^^^^^^^^^^^^^^
+> 13 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 14 |   }, [propA.a, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  15 | }
+  16 |
+  17 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts
new file mode 100644
index 00000000000..23d77c84ec1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts
@@ -0,0 +1,20 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+import {identity, mutate} from 'shared-runtime';
+
+function useHook(propA, propB) {
+  return useCallback(() => {
+    const x = {};
+    if (identity(null) ?? propA.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA.a, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{a: 1}, {x: {y: 3}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md
new file mode 100644
index 00000000000..df6ee0495e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+
+import {useCallback} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// This case is already unsound in source, so we can safely bailout
+function Foo(props) {
+  let x = [];
+  x.push(props);
+
+  // makeArray() is captured, but depsList contains [props]
+  const cb = useCallback(() => [x], [x]);
+
+  x = makeArray();
+
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This dependency may be mutated later, which could cause the value to change unexpectedly.
+
+error.invalid-useCallback-captures-reassigned-context.ts:12:37
+  10 |
+  11 |   // makeArray() is captured, but depsList contains [props]
+> 12 |   const cb = useCallback(() => [x], [x]);
+     |                                      ^ This dependency may be modified later
+  13 |
+  14 |   x = makeArray();
+  15 |
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.invalid-useCallback-captures-reassigned-context.ts:12:25
+  10 |
+  11 |   // makeArray() is captured, but depsList contains [props]
+> 12 |   const cb = useCallback(() => [x], [x]);
+     |                          ^^^^^^^^^ Could not preserve existing memoization
+  13 |
+  14 |   x = makeArray();
+  15 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts
new file mode 100644
index 00000000000..29ff926d2e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts
@@ -0,0 +1,21 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+
+import {useCallback} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// This case is already unsound in source, so we can safely bailout
+function Foo(props) {
+  let x = [];
+  x.push(props);
+
+  // makeArray() is captured, but depsList contains [props]
+  const cb = useCallback(() => [x], [x]);
+
+  x = makeArray();
+
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
new file mode 100644
index 00000000000..77f104cab0c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useRef, useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function useFoo() {
+  const r = useRef();
+  return useMemo(() => makeArray(r), []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.maybe-mutable-ref-not-preserved.ts:8:33
+   6 | function useFoo() {
+   7 |   const r = useRef();
+>  8 |   return useMemo(() => makeArray(r), []);
+     |                                  ^ Passing a ref to a function may read its value during render
+   9 | }
+  10 |
+  11 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
new file mode 100644
index 00000000000..13b8b445827
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
@@ -0,0 +1,14 @@
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useRef, useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function useFoo() {
+  const r = useRef();
+  return useMemo(() => makeArray(r), []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md
new file mode 100644
index 00000000000..ca650005c79
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback, useRef} from 'react';
+
+function useFoo({cond}) {
+  const ref1 = useRef<undefined | (() => undefined)>();
+  const ref2 = useRef<undefined | (() => undefined)>();
+  const ref = cond ? ref1 : ref2;
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `ref`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.preserve-use-memo-ref-missing-reactive.ts:9:21
+   7 |   const ref = cond ? ref1 : ref2;
+   8 |
+>  9 |   return useCallback(() => {
+     |                      ^^^^^^^
+> 10 |     if (ref != null) {
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 11 |       ref.current();
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 12 |     }
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 13 |   }, []);
+     | ^^^^ Could not preserve existing manual memoization
+  14 | }
+  15 |
+  16 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts
new file mode 100644
index 00000000000..826e79f526d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback, useRef} from 'react';
+
+function useFoo({cond}) {
+  const ref1 = useRef<undefined | (() => undefined)>();
+  const ref2 = useRef<undefined | (() => undefined)>();
+  const ref = cond ? ref1 : ref2;
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md
new file mode 100644
index 00000000000..34f98b8c780
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useCallback} from 'react';
+
+// False positive:
+// We currently bail out on this because we don't understand
+// that `() => [x]` gets pruned because `x` always invalidates.
+function useFoo(props) {
+  const x = [];
+  useHook();
+  x.push(props);
+
+  return useCallback(() => [x], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.
+
+error.todo-useCallback-captures-invalidating-value.ts:13:21
+  11 |   x.push(props);
+  12 |
+> 13 |   return useCallback(() => [x], [x]);
+     |                      ^^^^^^^^^ Could not preserve existing memoization
+  14 | }
+  15 |
+  16 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.ts
new file mode 100644
index 00000000000..8c3aaf546de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useCallback} from 'react';
+
+// False positive:
+// We currently bail out on this because we don't understand
+// that `() => [x]` gets pruned because `x` always invalidates.
+function useFoo(props) {
+  const x = [];
+  useHook();
+  x.push(props);
+
+  return useCallback(() => [x], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md
new file mode 100644
index 00000000000..9d45c500d28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+// This is technically a false positive, but source is already breaking
+// `exhaustive-deps` lint rule (and can be considered invalid).
+function useHook(x) {
+  const aliasedX = x;
+  const aliasedProp = x.y.z;
+
+  return useCallback(() => [aliasedX, x.y.z], [x, aliasedProp]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `aliasedX`, but the source dependencies were [x, aliasedProp]. Inferred different dependency than source.
+
+error.useCallback-aliased-var.ts:9:21
+   7 |   const aliasedProp = x.y.z;
+   8 |
+>  9 |   return useCallback(() => [aliasedX, x.y.z], [x, aliasedProp]);
+     |                      ^^^^^^^^^^^^^^^^^^^^^^^ Could not preserve existing manual memoization
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.ts
new file mode 100644
index 00000000000..98c697d2208
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.ts
@@ -0,0 +1,10 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+// This is technically a false positive, but source is already breaking
+// `exhaustive-deps` lint rule (and can be considered invalid).
+function useHook(x) {
+  const aliasedX = x;
+  const aliasedProp = x.y.z;
+
+  return useCallback(() => [aliasedX, x.y.z], [x, aliasedProp]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md
new file mode 100644
index 00000000000..075458831b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+
+function Component({propA, propB}) {
+  return useCallback(() => {
+    return {
+      value: propB?.x.y,
+      other: propA,
+    };
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2, propB: {x: {y: []}}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propB?.x.y`, but the source dependencies were [propA, propB.x.y]. Inferred different dependency than source.
+
+error.useCallback-conditional-access-noAlloc.ts:5:21
+   3 |
+   4 | function Component({propA, propB}) {
+>  5 |   return useCallback(() => {
+     |                      ^^^^^^^
+>  6 |     return {
+     | ^^^^^^^^^^^^
+>  7 |       value: propB?.x.y,
+     | ^^^^^^^^^^^^
+>  8 |       other: propA,
+     | ^^^^^^^^^^^^
+>  9 |     };
+     | ^^^^^^^^^^^^
+> 10 |   }, [propA, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  11 | }
+  12 |
+  13 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts
new file mode 100644
index 00000000000..c6642be4f89
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+
+function Component({propA, propB}) {
+  return useCallback(() => {
+    return {
+      value: propB?.x.y,
+      other: propA,
+    };
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2, propB: {x: {y: []}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md
new file mode 100644
index 00000000000..077b9aa9f6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useCallback(() => {
+    const x = {};
+    if (propA?.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA?.a, propB.x.y]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propB`, but the source dependencies were [propA?.a, propB.x.y]. Inferred less specific property than source.
+
+error.useCallback-infer-less-specific-conditional-access.ts:6:21
+   4 |
+   5 | function Component({propA, propB}) {
+>  6 |   return useCallback(() => {
+     |                      ^^^^^^^
+>  7 |     const x = {};
+     | ^^^^^^^^^^^^^^^^^
+>  8 |     if (propA?.a) {
+     | ^^^^^^^^^^^^^^^^^
+>  9 |       mutate(x);
+     | ^^^^^^^^^^^^^^^^^
+> 10 |       return {
+     | ^^^^^^^^^^^^^^^^^
+> 11 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^^
+> 12 |       };
+     | ^^^^^^^^^^^^^^^^^
+> 13 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 14 |   }, [propA?.a, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  15 | }
+  16 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts
new file mode 100644
index 00000000000..637e0a974e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useCallback(() => {
+    const x = {};
+    if (propA?.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA?.a, propB.x.y]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-property-call-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-property-call-dep.expect.md
new file mode 100644
index 00000000000..ba1cc7e545e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-property-call-dep.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+
+function Component({propA}) {
+  return useCallback(() => {
+    return propA.x();
+  }, [propA.x]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propA`, but the source dependencies were [propA.x]. Inferred less specific property than source.
+
+error.useCallback-property-call-dep.ts:5:21
+  3 |
+  4 | function Component({propA}) {
+> 5 |   return useCallback(() => {
+    |                      ^^^^^^^
+> 6 |     return propA.x();
+    | ^^^^^^^^^^^^^^^^^^^^^
+> 7 |   }, [propA.x]);
+    | ^^^^ Could not preserve existing manual memoization
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-property-call-dep.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-property-call-dep.ts
new file mode 100644
index 00000000000..0c1f02778c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-property-call-dep.ts
@@ -0,0 +1,8 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+
+function Component({propA}) {
+  return useCallback(() => {
+    return propA.x();
+  }, [propA.x]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-aliased-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-aliased-var.expect.md
new file mode 100644
index 00000000000..7c1539a8cd8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-aliased-var.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+// This is technically a false positive, but source is already breaking
+// `exhaustive-deps` lint rule (and can be considered invalid).
+function useHook(x) {
+  const aliasedX = x;
+  const aliasedProp = x.y.z;
+
+  return useMemo(() => [x, x.y.z], [aliasedX, aliasedProp]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `x`, but the source dependencies were [aliasedX, aliasedProp]. Inferred different dependency than source.
+
+error.useMemo-aliased-var.ts:9:17
+   7 |   const aliasedProp = x.y.z;
+   8 |
+>  9 |   return useMemo(() => [x, x.y.z], [aliasedX, aliasedProp]);
+     |                  ^^^^^^^^^^^^^^^^ Could not preserve existing manual memoization
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-aliased-var.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-aliased-var.ts
new file mode 100644
index 00000000000..31baea97a4f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-aliased-var.ts
@@ -0,0 +1,10 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+// This is technically a false positive, but source is already breaking
+// `exhaustive-deps` lint rule (and can be considered invalid).
+function useHook(x) {
+  const aliasedX = x;
+  const aliasedProp = x.y.z;
+
+  return useMemo(() => [x, x.y.z], [aliasedX, aliasedProp]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md
new file mode 100644
index 00000000000..d93c52a10c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    const x = {};
+    if (propA?.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA?.a, propB.x.y]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propB`, but the source dependencies were [propA?.a, propB.x.y]. Inferred less specific property than source.
+
+error.useMemo-infer-less-specific-conditional-access.ts:6:17
+   4 |
+   5 | function Component({propA, propB}) {
+>  6 |   return useMemo(() => {
+     |                  ^^^^^^^
+>  7 |     const x = {};
+     | ^^^^^^^^^^^^^^^^^
+>  8 |     if (propA?.a) {
+     | ^^^^^^^^^^^^^^^^^
+>  9 |       mutate(x);
+     | ^^^^^^^^^^^^^^^^^
+> 10 |       return {
+     | ^^^^^^^^^^^^^^^^^
+> 11 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^^
+> 12 |       };
+     | ^^^^^^^^^^^^^^^^^
+> 13 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 14 |   }, [propA?.a, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  15 | }
+  16 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts
new file mode 100644
index 00000000000..9a81716828c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    const x = {};
+    if (propA?.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA?.a, propB.x.y]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md
new file mode 100644
index 00000000000..9d35f52504e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {identity, mutate} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    const x = {};
+    if (identity(null) ?? propA.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA.a, propB.x.y]);
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propA`, but the source dependencies were [propA.a, propB.x.y]. Inferred less specific property than source.
+
+error.useMemo-infer-less-specific-conditional-value-block.ts:6:17
+   4 |
+   5 | function Component({propA, propB}) {
+>  6 |   return useMemo(() => {
+     |                  ^^^^^^^
+>  7 |     const x = {};
+     | ^^^^^^^^^^^^^^^^^
+>  8 |     if (identity(null) ?? propA.a) {
+     | ^^^^^^^^^^^^^^^^^
+>  9 |       mutate(x);
+     | ^^^^^^^^^^^^^^^^^
+> 10 |       return {
+     | ^^^^^^^^^^^^^^^^^
+> 11 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^^
+> 12 |       };
+     | ^^^^^^^^^^^^^^^^^
+> 13 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 14 |   }, [propA.a, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  15 | }
+  16 |
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propB`, but the source dependencies were [propA.a, propB.x.y]. Inferred less specific property than source.
+
+error.useMemo-infer-less-specific-conditional-value-block.ts:6:17
+   4 |
+   5 | function Component({propA, propB}) {
+>  6 |   return useMemo(() => {
+     |                  ^^^^^^^
+>  7 |     const x = {};
+     | ^^^^^^^^^^^^^^^^^
+>  8 |     if (identity(null) ?? propA.a) {
+     | ^^^^^^^^^^^^^^^^^
+>  9 |       mutate(x);
+     | ^^^^^^^^^^^^^^^^^
+> 10 |       return {
+     | ^^^^^^^^^^^^^^^^^
+> 11 |         value: propB.x.y,
+     | ^^^^^^^^^^^^^^^^^
+> 12 |       };
+     | ^^^^^^^^^^^^^^^^^
+> 13 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 14 |   }, [propA.a, propB.x.y]);
+     | ^^^^ Could not preserve existing manual memoization
+  15 | }
+  16 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts
new file mode 100644
index 00000000000..7c9cb48c7c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {identity, mutate} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    const x = {};
+    if (identity(null) ?? propA.a) {
+      mutate(x);
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA.a, propB.x.y]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-chained-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-chained-object.expect.md
new file mode 100644
index 00000000000..6b707f3fe3b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-chained-object.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component({propA}) {
+  return useMemo(() => {
+    return {
+      value: propA.x().y,
+    };
+  }, [propA.x]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propA`, but the source dependencies were [propA.x]. Inferred less specific property than source.
+
+error.useMemo-property-call-chained-object.ts:5:17
+   3 |
+   4 | function Component({propA}) {
+>  5 |   return useMemo(() => {
+     |                  ^^^^^^^
+>  6 |     return {
+     | ^^^^^^^^^^^^
+>  7 |       value: propA.x().y,
+     | ^^^^^^^^^^^^
+>  8 |     };
+     | ^^^^^^^^^^^^
+>  9 |   }, [propA.x]);
+     | ^^^^ Could not preserve existing manual memoization
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-chained-object.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-chained-object.ts
new file mode 100644
index 00000000000..5bd9603c49d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-chained-object.ts
@@ -0,0 +1,10 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component({propA}) {
+  return useMemo(() => {
+    return {
+      value: propA.x().y,
+    };
+  }, [propA.x]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-dep.expect.md
new file mode 100644
index 00000000000..293b35629ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-dep.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component({propA}) {
+  return useMemo(() => {
+    return propA.x();
+  }, [propA.x]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `propA`, but the source dependencies were [propA.x]. Inferred less specific property than source.
+
+error.useMemo-property-call-dep.ts:5:17
+  3 |
+  4 | function Component({propA}) {
+> 5 |   return useMemo(() => {
+    |                  ^^^^^^^
+> 6 |     return propA.x();
+    | ^^^^^^^^^^^^^^^^^^^^^
+> 7 |   }, [propA.x]);
+    | ^^^^ Could not preserve existing manual memoization
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-dep.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-dep.ts
new file mode 100644
index 00000000000..6109e8033ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-property-call-dep.ts
@@ -0,0 +1,8 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component({propA}) {
+  return useMemo(() => {
+    return propA.x();
+  }, [propA.x]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.expect.md
new file mode 100644
index 00000000000..fe0bf6c22f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// Here, Forget infers that the memo block dependency is input1
+// 1. StartMemoize is emitted before the function expression
+//    (and thus before the depslist arg and its rvalues)
+// 2. x and y's overlapping reactive scopes forces y's reactive
+//    scope to be extended to after the `mutate(x)` call, after
+//    the StartMemoize instruction.
+// While this is technically a false positive, this example would
+// already fail the exhaustive-deps eslint rule.
+function useFoo(input1) {
+  const x = {};
+  const y = [input1];
+  const memoized = useMemo(() => {
+    return [y];
+  }, [(mutate(x), y)]);
+
+  return [x, memoized];
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.useMemo-unrelated-mutation-in-depslist.ts:18:14
+  16 |   const memoized = useMemo(() => {
+  17 |     return [y];
+> 18 |   }, [(mutate(x), y)]);
+     |               ^ Missing dependency `x`
+  19 |
+  20 |   return [x, memoized];
+  21 | }
+
+Inferred dependencies: `[x, y]`
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.ts
new file mode 100644
index 00000000000..74d5045e256
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.ts
@@ -0,0 +1,21 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// Here, Forget infers that the memo block dependency is input1
+// 1. StartMemoize is emitted before the function expression
+//    (and thus before the depslist arg and its rvalues)
+// 2. x and y's overlapping reactive scopes forces y's reactive
+//    scope to be extended to after the `mutate(x)` call, after
+//    the StartMemoize instruction.
+// While this is technically a false positive, this example would
+// already fail the exhaustive-deps eslint rule.
+function useFoo(input1) {
+  const x = {};
+  const y = [input1];
+  const memoized = useMemo(() => {
+    return [y];
+  }, [(mutate(x), y)]);
+
+  return [x, memoized];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
new file mode 100644
index 00000000000..0269b22a1f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {identity} from 'shared-runtime';
+
+component Component(disableLocalRef, ref) {
+  const localRef = useFooRef();
+  const mergedRef = useMemo(() => {
+    return disableLocalRef ? ref : identity(ref, localRef);
+  }, [disableLocalRef, ref, localRef]);
+  return <div ref={mergedRef} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const localRef = useFooRef();
+   6 |   const mergedRef = useMemo(() => {
+>  7 |     return disableLocalRef ? ref : identity(ref, localRef);
+     |                                             ^^^ Passing a ref to a function may read its value during render
+   8 |   }, [disableLocalRef, ref, localRef]);
+   9 |   return <div ref={mergedRef} />;
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js
new file mode 100644
index 00000000000..845d90cbf2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js
@@ -0,0 +1,10 @@
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {identity} from 'shared-runtime';
+
+component Component(disableLocalRef, ref) {
+  const localRef = useFooRef();
+  const mergedRef = useMemo(() => {
+    return disableLocalRef ? ref : identity(ref, localRef);
+  }, [disableLocalRef, ref, localRef]);
+  return <div ref={mergedRef} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.expect.md
new file mode 100644
index 00000000000..d14bbccb599
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+// We technically do not need to bailout here if we can check
+// `someHelper`'s reactive deps are a subset of depslist from
+// source. This check is somewhat incompatible with our current
+// representation of manual memoization in HIR, so we bail out
+// for now.
+function Component(props) {
+  const x = useMemo(someHelper, []);
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Expected the first argument to be an inline function expression
+
+Expected the first argument to be an inline function expression.
+
+error.validate-useMemo-named-function.ts:9:20
+   7 | // for now.
+   8 | function Component(props) {
+>  9 |   const x = useMemo(someHelper, []);
+     |                     ^^^^^^^^^^ Expected the first argument to be an inline function expression
+  10 |   return x;
+  11 | }
+  12 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.js
new file mode 100644
index 00000000000..9281fbf6700
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.js
@@ -0,0 +1,11 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+// We technically do not need to bailout here if we can check
+// `someHelper`'s reactive deps are a subset of depslist from
+// source. This check is somewhat incompatible with our current
+// representation of manual memoization in HIR, so we bail out
+// for now.
+function Component(props) {
+  const x = useMemo(someHelper, []);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md
new file mode 100644
index 00000000000..50d812fde56
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// This is currently considered valid because we don't ensure that every
+// instruction within manual memoization gets assigned to a reactive scope
+// (i.e. inferred non-mutable or non-escaping values don't get memoized)
+function useFoo({minWidth, styles, setStyles}) {
+  useMemo(() => {
+    if (styles.width > minWidth) {
+      setStyles(styles);
+    }
+  }, [styles, minWidth, setStyles]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{minWidth: 2, styles: {width: 1}, setStyles: () => {}}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+
+// This is currently considered valid because we don't ensure that every
+// instruction within manual memoization gets assigned to a reactive scope
+// (i.e. inferred non-mutable or non-escaping values don't get memoized)
+function useFoo(t0) {
+  const { minWidth, styles, setStyles } = t0;
+
+  if (styles.width > minWidth) {
+    setStyles(styles);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ minWidth: 2, styles: { width: 1 }, setStyles: () => {} }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.ts
new file mode 100644
index 00000000000..080a9975382
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// This is currently considered valid because we don't ensure that every
+// instruction within manual memoization gets assigned to a reactive scope
+// (i.e. inferred non-mutable or non-escaping values don't get memoized)
+function useFoo({minWidth, styles, setStyles}) {
+  useMemo(() => {
+    if (styles.width > minWidth) {
+      setStyles(styles);
+    }
+  }, [styles, minWidth, setStyles]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{minWidth: 2, styles: {width: 1}, setStyles: () => {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.expect.md
new file mode 100644
index 00000000000..be4f25b64c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {
+  useCallback,
+  useTransition,
+  useState,
+  useOptimistic,
+  useActionState,
+  useRef,
+  useReducer,
+} from 'react';
+
+function useFoo() {
+  const [s, setState] = useState();
+  const ref = useRef(null);
+  const [t, startTransition] = useTransition();
+  const [u, addOptimistic] = useOptimistic();
+  const [v, dispatch] = useReducer(() => {}, null);
+  const [isPending, dispatchAction] = useActionState(() => {}, null);
+
+  return useCallback(() => {
+    dispatch();
+    startTransition(() => {});
+    addOptimistic();
+    setState(null);
+    dispatchAction();
+    ref.current = true;
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import {
+  useCallback,
+  useTransition,
+  useState,
+  useOptimistic,
+  useActionState,
+  useRef,
+  useReducer,
+} from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [, setState] = useState();
+  const ref = useRef(null);
+  const [, startTransition] = useTransition();
+  const [, addOptimistic] = useOptimistic();
+  const [, dispatch] = useReducer(_temp, null);
+  const [, dispatchAction] = useActionState(_temp2, null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      dispatch();
+      startTransition(_temp3);
+      addOptimistic();
+      setState(null);
+      dispatchAction();
+      ref.current = true;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp3() {}
+function _temp2() {}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.ts
new file mode 100644
index 00000000000..b8120de3c3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.ts
@@ -0,0 +1,33 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {
+  useCallback,
+  useTransition,
+  useState,
+  useOptimistic,
+  useActionState,
+  useRef,
+  useReducer,
+} from 'react';
+
+function useFoo() {
+  const [s, setState] = useState();
+  const ref = useRef(null);
+  const [t, startTransition] = useTransition();
+  const [u, addOptimistic] = useOptimistic();
+  const [v, dispatch] = useReducer(() => {}, null);
+  const [isPending, dispatchAction] = useActionState(() => {}, null);
+
+  return useCallback(() => {
+    dispatch();
+    startTransition(() => {});
+    addOptimistic();
+    setState(null);
+    dispatchAction();
+    ref.current = true;
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md
new file mode 100644
index 00000000000..3625e2a6237
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo() {
+  const ref = useRef<undefined | (() => undefined)>();
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useRef } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref != null) {
+        ref.current();
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts
new file mode 100644
index 00000000000..92175ce5bba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo() {
+  const ref = useRef<undefined | (() => undefined)>();
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
new file mode 100644
index 00000000000..3687198df3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [t, start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useTransition } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [, start] = useTransition();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      start();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts
new file mode 100644
index 00000000000..a822d68dfc8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [t, start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns-primitive.expect.md
new file mode 100644
index 00000000000..8850f869d07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns-primitive.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(cond) {
+  useMemo(() => {
+    if (cond) {
+      return 2;
+    } else {
+      return identity(5);
+    }
+  }, [cond]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function useFoo(cond) {
+  let t0;
+  if (cond) {
+    t0 = 2;
+  } else {
+    t0 = identity(5);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns-primitive.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns-primitive.ts
new file mode 100644
index 00000000000..a79c84823cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns-primitive.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(cond) {
+  useMemo(() => {
+    if (cond) {
+      return 2;
+    } else {
+      return identity(5);
+    }
+  }, [cond]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns.expect.md
new file mode 100644
index 00000000000..af959b9865b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(cond) {
+  useMemo(() => {
+    if (cond) {
+      return identity(10);
+    } else {
+      return identity(5);
+    }
+  }, [cond]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function useFoo(cond) {
+  let t0;
+  if (cond) {
+    t0 = identity(10);
+  } else {
+    t0 = identity(5);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns.ts
new file mode 100644
index 00000000000..37729341061
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo-mult-returns.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(cond) {
+  useMemo(() => {
+    if (cond) {
+      return identity(10);
+    } else {
+      return identity(5);
+    }
+  }, [cond]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo.expect.md
new file mode 100644
index 00000000000..228790c4e27
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+/**
+ * This is technically a false positive, although it makes sense
+ * to bailout as source code might be doing something sketchy.
+ */
+function useFoo(x) {
+  useMemo(() => identity(x), [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2],
+};
+
+```
+
+## Code
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+/**
+ * This is technically a false positive, although it makes sense
+ * to bailout as source code might be doing something sketchy.
+ */
+function useFoo(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo.ts
new file mode 100644
index 00000000000..95059470add
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/prune-nonescaping-useMemo.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+/**
+ * This is technically a false positive, although it makes sense
+ * to bailout as source code might be doing something sketchy.
+ */
+function useFoo(x) {
+  useMemo(() => identity(x), [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useCallback-read-maybeRef.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useCallback-read-maybeRef.expect.md
new file mode 100644
index 00000000000..0ccfd1e43a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useCallback-read-maybeRef.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+
+function useHook(maybeRef) {
+  return useCallback(() => {
+    return [maybeRef.current];
+  }, [maybeRef]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+
+function useHook(maybeRef) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== maybeRef) {
+    t0 = () => [maybeRef.current];
+    $[0] = maybeRef;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useCallback-read-maybeRef.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useCallback-read-maybeRef.ts
new file mode 100644
index 00000000000..f2f1c44ec1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useCallback-read-maybeRef.ts
@@ -0,0 +1,8 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+
+function useHook(maybeRef) {
+  return useCallback(() => {
+    return [maybeRef.current];
+  }, [maybeRef]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useMemo-read-maybeRef.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useMemo-read-maybeRef.expect.md
new file mode 100644
index 00000000000..7bb7de6ea2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useMemo-read-maybeRef.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function useHook(maybeRef, shouldRead) {
+  return useMemo(() => {
+    return () => [maybeRef.current];
+  }, [shouldRead, maybeRef]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+function useHook(maybeRef, shouldRead) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== maybeRef) {
+    t0 = () => [maybeRef.current];
+    $[0] = maybeRef;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useMemo-read-maybeRef.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useMemo-read-maybeRef.ts
new file mode 100644
index 00000000000..1513065f2cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/repro-maybe-invalid-useMemo-read-maybeRef.ts
@@ -0,0 +1,8 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function useHook(maybeRef, shouldRead) {
+  return useMemo(() => {
+    return () => [maybeRef.current];
+  }, [shouldRead, maybeRef]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md
new file mode 100644
index 00000000000..f23cf84e504
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+
+// Todo: we currently only generate a `constVal` declaration when
+// validatePreserveExistingMemoizationGuarantees is enabled, as the
+// StartMemoize instruction uses `constVal`.
+// Fix is to rewrite StartMemoize instructions to remove constant
+// propagated values
+function useFoo() {
+  const constVal = 0;
+
+  return useMemo(() => [constVal], [constVal]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import { useMemo } from "react";
+
+// Todo: we currently only generate a `constVal` declaration when
+// validatePreserveExistingMemoizationGuarantees is enabled, as the
+// StartMemoize instruction uses `constVal`.
+// Fix is to rewrite StartMemoize instructions to remove constant
+// propagated values
+function useFoo() {
+  const $ = _c(1);
+  const constVal = 0;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [0];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.ts
new file mode 100644
index 00000000000..bfbc0ab5056
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+
+// Todo: we currently only generate a `constVal` declaration when
+// validatePreserveExistingMemoizationGuarantees is enabled, as the
+// StartMemoize instruction uses `constVal`.
+// Fix is to rewrite StartMemoize instructions to remove constant
+// propagated values
+function useFoo() {
+  const constVal = 0;
+
+  return useMemo(() => [constVal], [constVal]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.expect.md
new file mode 100644
index 00000000000..5fceb7ef816
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {sum} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  const x = propB.x.y;
+  return useCallback(() => {
+    return sum(propA.x, x);
+  }, [propA.x, x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: {x: 2}, propB: {x: {y: 3}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+import { sum } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { propA, propB } = t0;
+  const x = propB.x.y;
+  let t1;
+  if ($[0] !== propA.x || $[1] !== x) {
+    t1 = () => sum(propA.x, x);
+    $[0] = propA.x;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: { x: 2 }, propB: { x: { y: 3 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.ts
new file mode 100644
index 00000000000..be03a9ceaf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {sum} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  const x = propB.x.y;
+  return useCallback(() => {
+    return sum(propA.x, x);
+  }, [propA.x, x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: {x: 2}, propB: {x: {y: 3}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md
new file mode 100644
index 00000000000..a1cbe89a883
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md
@@ -0,0 +1,101 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * TODO: we're currently bailing out because `contextVar` is a context variable
+ * and not recorded into the PropagateScopeDeps LoadLocal / PropertyLoad
+ * sidemap. Previously, we were able to avoid this as `BuildHIR` hoisted
+ * `LoadContext` and `PropertyLoad` instructions into the outer function, which
+ * we took as eligible dependencies.
+ *
+ * One solution is to simply record `LoadContext` identifiers into the
+ * temporaries sidemap when the instruction occurs *after* the context
+ * variable's mutable range.
+ */
+function Foo(props) {
+  let contextVar;
+  if (props.cond) {
+    contextVar = {val: 2};
+  } else {
+    contextVar = {};
+  }
+
+  const cb = useCallback(() => [contextVar.val], [contextVar.val]);
+
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+import { Stringify } from "shared-runtime";
+
+/**
+ * TODO: we're currently bailing out because `contextVar` is a context variable
+ * and not recorded into the PropagateScopeDeps LoadLocal / PropertyLoad
+ * sidemap. Previously, we were able to avoid this as `BuildHIR` hoisted
+ * `LoadContext` and `PropertyLoad` instructions into the outer function, which
+ * we took as eligible dependencies.
+ *
+ * One solution is to simply record `LoadContext` identifiers into the
+ * temporaries sidemap when the instruction occurs *after* the context
+ * variable's mutable range.
+ */
+function Foo(props) {
+  const $ = _c(6);
+  let contextVar;
+  if ($[0] !== props.cond) {
+    if (props.cond) {
+      contextVar = { val: 2 };
+    } else {
+      contextVar = {};
+    }
+    $[0] = props.cond;
+    $[1] = contextVar;
+  } else {
+    contextVar = $[1];
+  }
+  let t0;
+  if ($[2] !== contextVar.val) {
+    t0 = () => [contextVar.val];
+    $[2] = contextVar.val;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  contextVar;
+  const cb = t0;
+  let t1;
+  if ($[4] !== cb) {
+    t1 = <Stringify cb={cb} shouldInvokeFns={true} />;
+    $[4] = cb;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":[2]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.tsx
new file mode 100644
index 00000000000..8447e3960dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.tsx
@@ -0,0 +1,32 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * TODO: we're currently bailing out because `contextVar` is a context variable
+ * and not recorded into the PropagateScopeDeps LoadLocal / PropertyLoad
+ * sidemap. Previously, we were able to avoid this as `BuildHIR` hoisted
+ * `LoadContext` and `PropertyLoad` instructions into the outer function, which
+ * we took as eligible dependencies.
+ *
+ * One solution is to simply record `LoadContext` identifiers into the
+ * temporaries sidemap when the instruction occurs *after* the context
+ * variable's mutable range.
+ */
+function Foo(props) {
+  let contextVar;
+  if (props.cond) {
+    contextVar = {val: 2};
+  } else {
+    contextVar = {};
+  }
+
+  const cb = useCallback(() => [contextVar.val], [contextVar.val]);
+
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context.expect.md
new file mode 100644
index 00000000000..41994e1e56e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useCallback} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// This case is fine, as all reassignments happen before the useCallback
+function Foo(props) {
+  let x = [];
+  x.push(props);
+  x = makeArray();
+
+  const cb = useCallback(() => [x], [x]);
+
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+
+import { useCallback } from "react";
+import { makeArray } from "shared-runtime";
+
+// This case is fine, as all reassignments happen before the useCallback
+function Foo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props) {
+    x = [];
+    x.push(props);
+    x = makeArray();
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = () => [x];
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  x;
+  const cb = t0;
+  return cb;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context.ts
new file mode 100644
index 00000000000..899b5bb25be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useCallback} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// This case is fine, as all reassignments happen before the useCallback
+function Foo(props) {
+  let x = [];
+  x.push(props);
+  x = makeArray();
+
+  const cb = useCallback(() => [x], [x]);
+
+  return cb;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-dep-scope-pruned.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-dep-scope-pruned.expect.md
new file mode 100644
index 00000000000..687d9565ba8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-dep-scope-pruned.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {identity, useIdentity} from 'shared-runtime';
+
+function mutate(_: unknown) {}
+
+/**
+ * Repro showing a manual memo whose declaration (useCallback's 1st argument)
+ * is memoized, but not its dependency (x). In this case, `x`'s scope is pruned
+ * due to hook-call flattening.
+ */
+function useFoo(a) {
+  const x = identity(a);
+  useIdentity(2);
+  mutate(x);
+
+  return useCallback(() => [x, []], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [3],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+import { identity, useIdentity } from "shared-runtime";
+
+function mutate(_) {}
+
+/**
+ * Repro showing a manual memo whose declaration (useCallback's 1st argument)
+ * is memoized, but not its dependency (x). In this case, `x`'s scope is pruned
+ * due to hook-call flattening.
+ */
+function useFoo(a) {
+  const $ = _c(2);
+  const x = identity(a);
+  useIdentity(2);
+  mutate(x);
+  let t0;
+  if ($[0] !== x) {
+    t0 = () => [x, []];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [3],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-dep-scope-pruned.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-dep-scope-pruned.ts
new file mode 100644
index 00000000000..23de8c2c259
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-dep-scope-pruned.ts
@@ -0,0 +1,23 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {identity, useIdentity} from 'shared-runtime';
+
+function mutate(_: unknown) {}
+
+/**
+ * Repro showing a manual memo whose declaration (useCallback's 1st argument)
+ * is memoized, but not its dependency (x). In this case, `x`'s scope is pruned
+ * due to hook-call flattening.
+ */
+function useFoo(a) {
+  const x = identity(a);
+  useIdentity(2);
+  mutate(x);
+
+  return useCallback(() => [x, []], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [3],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-extended-contextvar-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-extended-contextvar-scope.expect.md
new file mode 100644
index 00000000000..0a151b6ca30
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-extended-contextvar-scope.expect.md
@@ -0,0 +1,102 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useCallback} from 'react';
+import {Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Here, the *inferred* dependencies of cb are `a` and `t1 = LoadContext capture x_@1`.
+ * - t1 does not have a scope as it captures `x` after x's mutable range
+ * - `x` is a context variable, which means its mutable range extends to all
+ *    references / aliases.
+ * - `a`, `b`, and `x` get the same mutable range due to potential aliasing.
+ *
+ * We currently bail out because `a` has a scope and is not transitively memoized
+ * (as its scope is pruned due to a hook call)
+ */
+function useBar({a, b}, cond) {
+  let x = useIdentity({val: 3});
+  if (cond) {
+    x = b;
+  }
+
+  const cb = useCallback(() => {
+    return [a, x];
+  }, [a, x]);
+
+  return <Stringify cb={cb} shouldInvoke={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{a: 1, b: 2}, true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees:true
+
+import { useCallback } from "react";
+import { Stringify, useIdentity } from "shared-runtime";
+
+/**
+ * Here, the *inferred* dependencies of cb are `a` and `t1 = LoadContext capture x_@1`.
+ * - t1 does not have a scope as it captures `x` after x's mutable range
+ * - `x` is a context variable, which means its mutable range extends to all
+ *    references / aliases.
+ * - `a`, `b`, and `x` get the same mutable range due to potential aliasing.
+ *
+ * We currently bail out because `a` has a scope and is not transitively memoized
+ * (as its scope is pruned due to a hook call)
+ */
+function useBar(t0, cond) {
+  const $ = _c(6);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { val: 3 };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let x = useIdentity(t1);
+  if (cond) {
+    x = b;
+  }
+  let t2;
+  if ($[1] !== a || $[2] !== x) {
+    t2 = () => [a, x];
+    $[1] = a;
+    $[2] = x;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  x;
+  const cb = t2;
+  let t3;
+  if ($[4] !== cb) {
+    t3 = <Stringify cb={cb} shouldInvoke={true} />;
+    $[4] = cb;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{ a: 1, b: 2 }, true],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":"[[ function params=0 ]]","shouldInvoke":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-extended-contextvar-scope.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-extended-contextvar-scope.tsx
new file mode 100644
index 00000000000..ad735510f53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-extended-contextvar-scope.tsx
@@ -0,0 +1,32 @@
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useCallback} from 'react';
+import {Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Here, the *inferred* dependencies of cb are `a` and `t1 = LoadContext capture x_@1`.
+ * - t1 does not have a scope as it captures `x` after x's mutable range
+ * - `x` is a context variable, which means its mutable range extends to all
+ *    references / aliases.
+ * - `a`, `b`, and `x` get the same mutable range due to potential aliasing.
+ *
+ * We currently bail out because `a` has a scope and is not transitively memoized
+ * (as its scope is pruned due to a hook call)
+ */
+function useBar({a, b}, cond) {
+  let x = useIdentity({val: 3});
+  if (cond) {
+    x = b;
+  }
+
+  const cb = useCallback(() => {
+    return [a, x];
+  }, [a, x]);
+
+  return <Stringify cb={cb} shouldInvoke={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useBar,
+  params: [{a: 1, b: 2}, true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md
new file mode 100644
index 00000000000..350fdcfd43a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useState} from 'react';
+import {arrayPush} from 'shared-runtime';
+
+// useCallback-produced values can exist in nested reactive blocks, as long
+// as their reactive dependencies are a subset of depslist from source
+function useFoo(minWidth, otherProp) {
+  const [width, setWidth] = useState(1);
+  const x = [];
+  const style = useCallback(() => {
+    return {
+      width: Math.max(minWidth, width),
+    };
+  }, [width, minWidth]);
+  arrayPush(x, otherProp);
+  return [style, x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 'other'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useState } from "react";
+import { arrayPush } from "shared-runtime";
+
+// useCallback-produced values can exist in nested reactive blocks, as long
+// as their reactive dependencies are a subset of depslist from source
+function useFoo(minWidth, otherProp) {
+  const $ = _c(7);
+  const [width] = useState(1);
+  let t0;
+  if ($[0] !== minWidth || $[1] !== otherProp || $[2] !== width) {
+    const x = [];
+    let t1;
+    if ($[4] !== minWidth || $[5] !== width) {
+      t1 = () => ({ width: Math.max(minWidth, width) });
+      $[4] = minWidth;
+      $[5] = width;
+      $[6] = t1;
+    } else {
+      t1 = $[6];
+    }
+    const style = t1;
+    arrayPush(x, otherProp);
+    t0 = [style, x];
+    $[0] = minWidth;
+    $[1] = otherProp;
+    $[2] = width;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, "other"],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["[[ function params=0 ]]",["other"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.ts
new file mode 100644
index 00000000000..60aef540874
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.ts
@@ -0,0 +1,22 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useState} from 'react';
+import {arrayPush} from 'shared-runtime';
+
+// useCallback-produced values can exist in nested reactive blocks, as long
+// as their reactive dependencies are a subset of depslist from source
+function useFoo(minWidth, otherProp) {
+  const [width, setWidth] = useState(1);
+  const x = [];
+  const style = useCallback(() => {
+    return {
+      width: Math.max(minWidth, width),
+    };
+  }, [width, minWidth]);
+  arrayPush(x, otherProp);
+  return [style, x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 'other'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-fewer-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-fewer-deps.expect.md
new file mode 100644
index 00000000000..cccbe2d31f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-fewer-deps.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useCallback} from 'react';
+
+// It's correct to produce memo blocks with fewer deps than source
+function useFoo(a, b) {
+  return useCallback(() => [a], [a, b]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import { useCallback } from "react";
+
+// It's correct to produce memo blocks with fewer deps than source
+function useFoo(a, b) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    t0 = () => [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-fewer-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-fewer-deps.ts
new file mode 100644
index 00000000000..78dfa1e658c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-fewer-deps.ts
@@ -0,0 +1,13 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useCallback} from 'react';
+
+// It's correct to produce memo blocks with fewer deps than source
+function useFoo(a, b) {
+  return useCallback(() => [a], [a, b]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-more-specific.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-more-specific.expect.md
new file mode 100644
index 00000000000..7e57f294927
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-more-specific.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useCallback} from 'react';
+
+// More specific memoization always results in fewer memo block
+// executions.
+// Precisely:
+//  x_new != x_prev does NOT imply x.y.z_new != x.y.z_prev
+//  x.y.z_new != x.y.z_prev does imply x_new != x_prev
+function useHook(x) {
+  return useCallback(() => [x.y.z], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{y: {z: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+
+import { useCallback } from "react";
+
+// More specific memoization always results in fewer memo block
+// executions.
+// Precisely:
+//  x_new != x_prev does NOT imply x.y.z_new != x.y.z_prev
+//  x.y.z_new != x.y.z_prev does imply x_new != x_prev
+function useHook(x) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== x.y.z) {
+    t0 = () => [x.y.z];
+    $[0] = x.y.z;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ y: { z: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-more-specific.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-more-specific.ts
new file mode 100644
index 00000000000..71ad0d36a0c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-more-specific.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useCallback} from 'react';
+
+// More specific memoization always results in fewer memo block
+// executions.
+// Precisely:
+//  x_new != x_prev does NOT imply x.y.z_new != x.y.z_prev
+//  x.y.z_new != x.y.z_prev does imply x_new != x_prev
+function useHook(x) {
+  return useCallback(() => [x.y.z], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{y: {z: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-read-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-read-dep.expect.md
new file mode 100644
index 00000000000..ddbd5cfed66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-read-dep.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {sum} from 'shared-runtime';
+
+function useFoo() {
+  const val = [1, 2, 3];
+
+  return useCallback(() => {
+    return sum(...val);
+  }, [val]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+import { sum } from "shared-runtime";
+
+function useFoo() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [1, 2, 3];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const val = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => sum(...val);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-read-dep.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-read-dep.ts
new file mode 100644
index 00000000000..a23c2528d36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-read-dep.ts
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {sum} from 'shared-runtime';
+
+function useFoo() {
+  const val = [1, 2, 3];
+
+  return useCallback(() => {
+    return sum(...val);
+  }, [val]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-scope-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-scope-global.expect.md
new file mode 100644
index 00000000000..87cd57e917e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-scope-global.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useCallback} from 'react';
+import {CONST_STRING0} from 'shared-runtime';
+
+// It's correct to infer a useCallback block has no reactive dependencies
+function useFoo() {
+  return useCallback(() => [CONST_STRING0], [CONST_STRING0]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import { useCallback } from "react";
+import { CONST_STRING0 } from "shared-runtime";
+
+// It's correct to infer a useCallback block has no reactive dependencies
+function useFoo() {
+  return _temp;
+}
+function _temp() {
+  return [CONST_STRING0];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-scope-global.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-scope-global.ts
new file mode 100644
index 00000000000..0f8836d2030
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-scope-global.ts
@@ -0,0 +1,14 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useCallback} from 'react';
+import {CONST_STRING0} from 'shared-runtime';
+
+// It's correct to infer a useCallback block has no reactive dependencies
+function useFoo() {
+  return useCallback(() => [CONST_STRING0], [CONST_STRING0]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md
new file mode 100644
index 00000000000..0eb58ef85e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md
@@ -0,0 +1,102 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+
+function Component({entity, children}) {
+  const showMessage = useCallback(() => entity != null);
+
+  // We currently model functions as if they could escape intor their return value
+  // but if we ever changed that (or did optimization to figure out cases where they
+  // are known not to) we could get a false positive validation error here, since
+  // showMessage doesn't need to be memoized since it doesn't escape in this instance.
+  const shouldShowMessage = showMessage();
+  return (
+    <div>
+      <div>{shouldShowMessage}</div>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      entity: {name: 'Sathya'},
+      children: [<div key="gsathya">Hi Sathya!</div>],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { entity, children } = t0;
+  let t1;
+  if ($[0] !== entity) {
+    t1 = () => entity != null;
+    $[0] = entity;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const showMessage = t1;
+
+  const shouldShowMessage = showMessage();
+  let t2;
+  if ($[2] !== shouldShowMessage) {
+    t2 = <div>{shouldShowMessage}</div>;
+    $[2] = shouldShowMessage;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== children) {
+    t3 = <div>{children}</div>;
+    $[4] = children;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = (
+      <div>
+        {t2}
+        {t3}
+      </div>
+    );
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      entity: { name: "Sathya" },
+      children: [<div key="gsathya">Hi Sathya!</div>],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div></div><div><div>Hi Sathya!</div></div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.js
new file mode 100644
index 00000000000..640b9b8b9e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.js
@@ -0,0 +1,28 @@
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+
+function Component({entity, children}) {
+  const showMessage = useCallback(() => entity != null);
+
+  // We currently model functions as if they could escape intor their return value
+  // but if we ever changed that (or did optimization to figure out cases where they
+  // are known not to) we could get a false positive validation error here, since
+  // showMessage doesn't need to be memoized since it doesn't escape in this instance.
+  const shouldShowMessage = showMessage();
+  return (
+    <div>
+      <div>{shouldShowMessage}</div>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      entity: {name: 'Sathya'},
+      children: [<div key="gsathya">Hi Sathya!</div>],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping.expect.md
new file mode 100644
index 00000000000..bc9d4341e3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import {useCallback} from 'react';
+
+function Component({entity, children}) {
+  // showMessage doesn't escape so we don't memoize it.
+  // However, validatePreserveExistingMemoizationGuarantees only sees that the scope
+  // doesn't exist, and thinks the memoization was missed instead of being intentionally dropped.
+  const showMessage = useCallback(() => entity != null, [entity]);
+
+  if (!showMessage()) {
+    return children;
+  }
+
+  return <div>{children}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      entity: {name: 'Sathya'},
+      children: [<div key="gsathya">Hi Sathya!</div>],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import { useCallback } from "react";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { entity, children } = t0;
+
+  const showMessage = () => entity != null;
+
+  if (!showMessage()) {
+    return children;
+  }
+  let t1;
+  if ($[0] !== children) {
+    t1 = <div>{children}</div>;
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      entity: { name: "Sathya" },
+      children: [<div key="gsathya">Hi Sathya!</div>],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>Hi Sathya!</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping.js
new file mode 100644
index 00000000000..8d5870f9c5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping.js
@@ -0,0 +1,25 @@
+// @validatePreserveExistingMemoizationGuarantees @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import {useCallback} from 'react';
+
+function Component({entity, children}) {
+  // showMessage doesn't escape so we don't memoize it.
+  // However, validatePreserveExistingMemoizationGuarantees only sees that the scope
+  // doesn't exist, and thinks the memoization was missed instead of being intentionally dropped.
+  const showMessage = useCallback(() => entity != null, [entity]);
+
+  if (!showMessage()) {
+    return children;
+  }
+
+  return <div>{children}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      entity: {name: 'Sathya'},
+      children: [<div key="gsathya">Hi Sathya!</div>],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md
new file mode 100644
index 00000000000..1a86ddc7c15
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo({arr1, arr2, foo}) {
+  const x = [arr1];
+
+  let y = [];
+
+  const getVal1 = useCallback(() => {
+    return {x: 2};
+  }, []);
+
+  const getVal2 = useCallback(() => {
+    return [y];
+  }, [foo ? (y = x.concat(arr2)) : y]);
+
+  return <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{arr1: [1, 2], arr2: [3, 4], foo: true}],
+  sequentialRenders: [
+    {arr1: [1, 2], arr2: [3, 4], foo: true},
+    {arr1: [1, 2], arr2: [3, 4], foo: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(10);
+  const { arr1, arr2, foo } = t0;
+  let t1;
+  if ($[0] !== arr1) {
+    t1 = [arr1];
+    $[0] = arr1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let getVal1;
+  let t2;
+  if ($[2] !== arr2 || $[3] !== foo || $[4] !== x) {
+    let y = [];
+    getVal1 = _temp;
+    t2 = () => [y];
+    foo ? (y = x.concat(arr2)) : y;
+    $[2] = arr2;
+    $[3] = foo;
+    $[4] = x;
+    $[5] = getVal1;
+    $[6] = t2;
+  } else {
+    getVal1 = $[5];
+    t2 = $[6];
+  }
+  const getVal2 = t2;
+  let t3;
+  if ($[7] !== getVal1 || $[8] !== getVal2) {
+    t3 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+    $[7] = getVal1;
+    $[8] = getVal2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+function _temp() {
+  return { x: 2 };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ arr1: [1, 2], arr2: [3, 4], foo: true }],
+  sequentialRenders: [
+    { arr1: [1, 2], arr2: [3, 4], foo: true },
+    { arr1: [1, 2], arr2: [3, 4], foo: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"val1":{"kind":"Function","result":{"x":2}},"val2":{"kind":"Function","result":[[[1,2],3,4]]},"shouldInvokeFns":true}</div>
+<div>{"val1":{"kind":"Function","result":{"x":2}},"val2":{"kind":"Function","result":[[]]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx
new file mode 100644
index 00000000000..9831fcfdec9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx
@@ -0,0 +1,28 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo({arr1, arr2, foo}) {
+  const x = [arr1];
+
+  let y = [];
+
+  const getVal1 = useCallback(() => {
+    return {x: 2};
+  }, []);
+
+  const getVal2 = useCallback(() => {
+    return [y];
+  }, [foo ? (y = x.concat(arr2)) : y]);
+
+  return <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{arr1: [1, 2], arr2: [3, 4], foo: true}],
+  sequentialRenders: [
+    {arr1: [1, 2], arr2: [3, 4], foo: true},
+    {arr1: [1, 2], arr2: [3, 4], foo: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md
new file mode 100644
index 00000000000..78a7b36eba6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// We currently produce invalid output (incorrect scoping for `y` declaration)
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  const getVal = useCallback(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+
+  return <Stringify getVal={getVal} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+import { Stringify } from "shared-runtime";
+
+// We currently produce invalid output (incorrect scoping for `y` declaration)
+function useFoo(arr1, arr2) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== arr1) {
+    t0 = [arr1];
+    $[0] = arr1;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== arr2 || $[3] !== x) {
+    let y;
+    t1 = () => ({ y });
+    (y = x.concat(arr2)), y;
+    $[2] = arr2;
+    $[3] = x;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const getVal = t1;
+  let t2;
+  if ($[5] !== getVal) {
+    t2 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
+    $[5] = getVal;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"getVal":{"kind":"Function","result":{"y":[[1,2],3,4]}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx
new file mode 100644
index 00000000000..170593c486a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx
@@ -0,0 +1,23 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// We currently produce invalid output (incorrect scoping for `y` declaration)
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  const getVal = useCallback(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+
+  return <Stringify getVal={getVal} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-with-no-depslist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-with-no-depslist.expect.md
new file mode 100644
index 00000000000..81d7a48aa75
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-with-no-depslist.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+
+// Compiler can produce any memoization it finds valid if the
+// source listed no memo deps
+function Component({propA}) {
+  // @ts-ignore
+  return useCallback(() => {
+    return [propA];
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+
+// Compiler can produce any memoization it finds valid if the
+// source listed no memo deps
+function Component(t0) {
+  const $ = _c(2);
+  const { propA } = t0;
+  let t1;
+  if ($[0] !== propA) {
+    t1 = () => [propA];
+    $[0] = propA;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-with-no-depslist.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-with-no-depslist.ts
new file mode 100644
index 00000000000..5cabcdf7676
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-with-no-depslist.ts
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+
+// Compiler can produce any memoization it finds valid if the
+// source listed no memo deps
+function Component({propA}) {
+  // @ts-ignore
+  return useCallback(() => {
+    return [propA];
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md
new file mode 100644
index 00000000000..80e41063034
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {sum} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  const x = propB.x.y;
+  return useMemo(() => {
+    return sum(propA.x, x);
+  }, [propA.x, x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: {x: 2}, propB: {x: {y: 3}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { sum } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { propA, propB } = t0;
+  const x = propB.x.y;
+  let t1;
+  if ($[0] !== propA.x || $[1] !== x) {
+    t1 = sum(propA.x, x);
+    $[0] = propA.x;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: { x: 2 }, propB: { x: { y: 3 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.ts
new file mode 100644
index 00000000000..ad4ef05e408
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {sum} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  const x = propB.x.y;
+  return useMemo(() => {
+    return sum(propA.x, x);
+  }, [propA.x, x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: {x: 2}, propB: {x: {y: 3}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-alloc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-alloc.expect.md
new file mode 100644
index 00000000000..697234a0297
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-alloc.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    return {
+      value: identity(propB?.x.y),
+      other: propA,
+    };
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2, propB: {x: {y: []}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(5);
+  const { propA, propB } = t0;
+
+  const t1 = propB?.x.y;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = identity(t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== propA || $[3] !== t2) {
+    t3 = { value: t2, other: propA };
+    $[2] = propA;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: 2, propB: { x: { y: [] } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"value":[],"other":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-alloc.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-alloc.ts
new file mode 100644
index 00000000000..9727b093190
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-alloc.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    return {
+      value: identity(propB?.x.y),
+      other: propA,
+    };
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2, propB: {x: {y: []}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md
new file mode 100644
index 00000000000..3a279219dad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    return {
+      value: propB?.x.y,
+      other: propA,
+    };
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2, propB: {x: {y: []}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { propA, propB } = t0;
+
+  const t1 = propB?.x.y;
+  let t2;
+  if ($[0] !== propA || $[1] !== t1) {
+    t2 = { value: t1, other: propA };
+    $[0] = propA;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: 2, propB: { x: { y: [] } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"value":[],"other":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.ts
new file mode 100644
index 00000000000..767c330df27
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.ts
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    return {
+      value: propB?.x.y,
+      other: propA,
+    };
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2, propB: {x: {y: []}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md
new file mode 100644
index 00000000000..e4b16ce9e83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    if (propA) {
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 1, propB: {x: {y: []}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { propA, propB } = t0;
+  let t1;
+  bb0: {
+    if (propA) {
+      let t2;
+      if ($[0] !== propB.x.y) {
+        t2 = { value: propB.x.y };
+        $[0] = propB.x.y;
+        $[1] = t2;
+      } else {
+        t2 = $[1];
+      }
+      t1 = t2;
+      break bb0;
+    }
+    t1 = undefined;
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: 1, propB: { x: { y: [] } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"value":[]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.ts
new file mode 100644
index 00000000000..1e8cb6a8550
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+
+function Component({propA, propB}) {
+  return useMemo(() => {
+    if (propA) {
+      return {
+        value: propB.x.y,
+      };
+    }
+  }, [propA, propB.x.y]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 1, propB: {x: {y: []}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md
new file mode 100644
index 00000000000..918fb3d6568
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(cond) {
+  const sourceDep = 0;
+  const derived1 = useMemo(() => {
+    return identity(sourceDep);
+  }, [sourceDep]);
+  const derived2 = (cond ?? Math.min(sourceDep, 1)) ? 1 : 2;
+  const derived3 = useMemo(() => {
+    return identity(sourceDep);
+  }, [sourceDep]);
+  const derived4 = (Math.min(sourceDep, -1) ?? cond) ? 1 : 2;
+  return [derived1, derived2, derived3, derived4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function useFoo(cond) {
+  const $ = _c(5);
+  const sourceDep = 0;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = identity(0);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const derived1 = t0;
+
+  const derived2 = (cond ?? Math.min(0, 1)) ? 1 : 2;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = identity(0);
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const derived3 = t1;
+
+  const derived4 = (Math.min(0, -1) ?? cond) ? 1 : 2;
+  let t2;
+  if ($[2] !== derived2 || $[3] !== derived4) {
+    t2 = [derived1, derived2, derived3, derived4];
+    $[2] = derived2;
+    $[3] = derived4;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,1,0,1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.ts
new file mode 100644
index 00000000000..7415713419d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.ts
@@ -0,0 +1,21 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(cond) {
+  const sourceDep = 0;
+  const derived1 = useMemo(() => {
+    return identity(sourceDep);
+  }, [sourceDep]);
+  const derived2 = (cond ?? Math.min(sourceDep, 1)) ? 1 : 2;
+  const derived3 = useMemo(() => {
+    return identity(sourceDep);
+  }, [sourceDep]);
+  const derived4 = (Math.min(sourceDep, -1) ?? cond) ? 1 : 2;
+  return [derived1, derived2, derived3, derived4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-dep-array-literal-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-dep-array-literal-access.expect.md
new file mode 100644
index 00000000000..d20b74d04b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-dep-array-literal-access.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// We currently only recognize "hoistable" values (e.g. variable reads
+// and property loads from named variables) in the source depslist.
+// This makes validation logic simpler and follows the same constraints
+// from the eslint react-hooks-deps plugin.
+function Foo(props) {
+  const x = makeArray(props);
+  // react-hooks-deps lint would already fail here
+  return useMemo(() => [x[0]], [x[0]]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{val: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import { useMemo } from "react";
+import { makeArray } from "shared-runtime";
+
+// We currently only recognize "hoistable" values (e.g. variable reads
+// and property loads from named variables) in the source depslist.
+// This makes validation logic simpler and follows the same constraints
+// from the eslint react-hooks-deps plugin.
+function Foo(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props) {
+    t0 = makeArray(props);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== x[0]) {
+    t1 = [x[0]];
+    $[2] = x[0];
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ val: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"val":1}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-dep-array-literal-access.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-dep-array-literal-access.ts
new file mode 100644
index 00000000000..7602807972d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-dep-array-literal-access.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+// We currently only recognize "hoistable" values (e.g. variable reads
+// and property loads from named variables) in the source depslist.
+// This makes validation logic simpler and follows the same constraints
+// from the eslint react-hooks-deps plugin.
+function Foo(props) {
+  const x = makeArray(props);
+  // react-hooks-deps lint would already fail here
+  return useMemo(() => [x[0]], [x[0]]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{val: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md
new file mode 100644
index 00000000000..742b82098ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo, useState} from 'react';
+import {arrayPush} from 'shared-runtime';
+
+// useMemo-produced values can exist in nested reactive blocks, as long
+// as their reactive dependencies are a subset of depslist from source
+function useFoo(minWidth, otherProp) {
+  const [width, setWidth] = useState(1);
+  const x = [];
+  const style = useMemo(() => {
+    return {
+      width: Math.max(minWidth, width),
+    };
+  }, [width, minWidth]);
+  arrayPush(x, otherProp);
+  return [style, x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 'other'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo, useState } from "react";
+import { arrayPush } from "shared-runtime";
+
+// useMemo-produced values can exist in nested reactive blocks, as long
+// as their reactive dependencies are a subset of depslist from source
+function useFoo(minWidth, otherProp) {
+  const $ = _c(6);
+  const [width] = useState(1);
+  let t0;
+  if ($[0] !== minWidth || $[1] !== otherProp || $[2] !== width) {
+    const x = [];
+    const t1 = Math.max(minWidth, width);
+    let t2;
+    if ($[4] !== t1) {
+      t2 = { width: t1 };
+      $[4] = t1;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    const style = t2;
+    arrayPush(x, otherProp);
+    t0 = [style, x];
+    $[0] = minWidth;
+    $[1] = otherProp;
+    $[2] = width;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, "other"],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"width":2},["other"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.ts
new file mode 100644
index 00000000000..e6bff448698
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.ts
@@ -0,0 +1,22 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo, useState} from 'react';
+import {arrayPush} from 'shared-runtime';
+
+// useMemo-produced values can exist in nested reactive blocks, as long
+// as their reactive dependencies are a subset of depslist from source
+function useFoo(minWidth, otherProp) {
+  const [width, setWidth] = useState(1);
+  const x = [];
+  const style = useMemo(() => {
+    return {
+      width: Math.max(minWidth, width),
+    };
+  }, [width, minWidth]);
+  arrayPush(x, otherProp);
+  return [style, x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 'other'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-fewer-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-fewer-deps.expect.md
new file mode 100644
index 00000000000..11025151911
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-fewer-deps.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+
+// It's correct to produce memo blocks with fewer deps than source
+function useFoo(a, b) {
+  return useMemo(() => [a], [a, b]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import { useMemo } from "react";
+
+// It's correct to produce memo blocks with fewer deps than source
+function useFoo(a, b) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-fewer-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-fewer-deps.ts
new file mode 100644
index 00000000000..2ca2e7c7155
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-fewer-deps.ts
@@ -0,0 +1,13 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+
+// It's correct to produce memo blocks with fewer deps than source
+function useFoo(a, b) {
+  return useMemo(() => [a], [a, b]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1, 2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-more-specific.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-more-specific.expect.md
new file mode 100644
index 00000000000..fa68ee46695
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-more-specific.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// More specific memoization always results in fewer memo block
+// executions.
+// Precisely:
+//  x_new != x_prev does NOT imply x.y.z_new != x.y.z_prev
+//  x.y.z_new != x.y.z_prev does imply x_new != x_prev
+function useHook(x) {
+  return useMemo(() => [x.y.z], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{y: {z: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+
+// More specific memoization always results in fewer memo block
+// executions.
+// Precisely:
+//  x_new != x_prev does NOT imply x.y.z_new != x.y.z_prev
+//  x.y.z_new != x.y.z_prev does imply x_new != x_prev
+function useHook(x) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== x.y.z) {
+    t0 = [x.y.z];
+    $[0] = x.y.z;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{ y: { z: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-more-specific.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-more-specific.ts
new file mode 100644
index 00000000000..c42c03d49c2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-more-specific.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// More specific memoization always results in fewer memo block
+// executions.
+// Precisely:
+//  x_new != x_prev does NOT imply x.y.z_new != x.y.z_prev
+//  x.y.z_new != x.y.z_prev does imply x_new != x_prev
+function useHook(x) {
+  return useMemo(() => [x.y.z], [x]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [{y: {z: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-nonallocating.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-nonallocating.expect.md
new file mode 100644
index 00000000000..ddcb2257dc0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-nonallocating.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// It's correct to infer a useMemo value is non-allocating
+// and not provide it with a reactive scope
+function useFoo(num1, num2) {
+  return useMemo(() => Math.min(num1, num2), [num1, num2]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 3],
+};
+
+```
+
+## Code
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+
+// It's correct to infer a useMemo value is non-allocating
+// and not provide it with a reactive scope
+function useFoo(num1, num2) {
+  return Math.min(num1, num2);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 3],
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-nonallocating.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-nonallocating.ts
new file mode 100644
index 00000000000..1b3da7807fc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-nonallocating.ts
@@ -0,0 +1,14 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+// It's correct to infer a useMemo value is non-allocating
+// and not provide it with a reactive scope
+function useFoo(num1, num2) {
+  return useMemo(() => Math.min(num1, num2), [num1, num2]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [2, 3],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-scope-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-scope-global.expect.md
new file mode 100644
index 00000000000..3d146ba3e61
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-scope-global.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+import {CONST_STRING0} from 'shared-runtime';
+
+// It's correct to infer a useMemo block has no reactive dependencies
+function useFoo() {
+  return useMemo(() => [CONST_STRING0], [CONST_STRING0]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import { useMemo } from "react";
+import { CONST_STRING0 } from "shared-runtime";
+
+// It's correct to infer a useMemo block has no reactive dependencies
+function useFoo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [CONST_STRING0];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["global string 0"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-scope-global.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-scope-global.ts
new file mode 100644
index 00000000000..3565dfd39b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-infer-scope-global.ts
@@ -0,0 +1,14 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+
+import {useMemo} from 'react';
+import {CONST_STRING0} from 'shared-runtime';
+
+// It's correct to infer a useMemo block has no reactive dependencies
+function useFoo() {
+  return useMemo(() => [CONST_STRING0], [CONST_STRING0]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-inner-decl.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-inner-decl.expect.md
new file mode 100644
index 00000000000..bd812aa404c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-inner-decl.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(data) {
+  return useMemo(() => {
+    const temp = identity(data.a);
+    return {temp};
+  }, [data.a]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { identity } from "shared-runtime";
+
+function useFoo(data) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== data.a) {
+    t0 = identity(data.a);
+    $[0] = data.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const temp = t0;
+  let t1;
+  if ($[2] !== temp) {
+    t1 = { temp };
+    $[2] = temp;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"temp":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-inner-decl.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-inner-decl.ts
new file mode 100644
index 00000000000..2d73e51a756
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-inner-decl.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity} from 'shared-runtime';
+
+function useFoo(data) {
+  return useMemo(() => {
+    const temp = identity(data.a);
+    return {temp};
+  }, [data.a]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md
new file mode 100644
index 00000000000..d41c6703917
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+function useFoo({callback}) {
+  return useMemo(() => new Array(callback()), [callback]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      callback: () => {
+        'use no forget';
+        return [1, 2, 3];
+      },
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+
+import { useMemo } from "react";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { callback } = t0;
+  let t1;
+  if ($[0] !== callback) {
+    t1 = new Array(callback());
+    $[0] = callback;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      callback: () => {
+        "use no forget";
+        return [1, 2, 3];
+      },
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[1,2,3]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.ts
new file mode 100644
index 00000000000..cd609b3aa2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {useMemo} from 'react';
+
+function useFoo({callback}) {
+  return useMemo(() => new Array(callback()), [callback]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      callback: () => {
+        'use no forget';
+        return [1, 2, 3];
+      },
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md
new file mode 100644
index 00000000000..7af90abc7b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  return useMemo(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+function useFoo(arr1, arr2) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== arr1) {
+    t0 = [arr1];
+    $[0] = arr1;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let y;
+  if ($[2] !== arr2 || $[3] !== x) {
+    (y = x.concat(arr2)), y;
+    $[2] = arr2;
+    $[3] = x;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  let t1;
+  if ($[5] !== y) {
+    t1 = { y };
+    $[5] = y;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":[[1,2],3,4]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts
new file mode 100644
index 00000000000..9838cd9456d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts
@@ -0,0 +1,19 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function useFoo(arr1, arr2) {
+  const x = [arr1];
+
+  let y;
+  return useMemo(() => {
+    return {y};
+  }, [((y = x.concat(arr2)), y)]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    [1, 2],
+    [3, 4],
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md
new file mode 100644
index 00000000000..5e7df69d98b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo({arr1, arr2, foo}) {
+  const x = [arr1];
+
+  let y = [];
+
+  const val1 = useMemo(() => {
+    return {x: 2};
+  }, []);
+
+  const val2 = useMemo(() => {
+    return [y];
+  }, [foo ? (y = x.concat(arr2)) : y]);
+
+  return <Stringify val1={val1} val2={val2} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{arr1: [1, 2], arr2: [3, 4], foo: true}],
+  sequentialRenders: [
+    {arr1: [1, 2], arr2: [3, 4], foo: true},
+    {arr1: [1, 2], arr2: [3, 4], foo: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(9);
+  const { arr1, arr2, foo } = t0;
+  let t1;
+  let val1;
+  if ($[0] !== arr1 || $[1] !== arr2 || $[2] !== foo) {
+    const x = [arr1];
+    let y = [];
+    let t2;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = { x: 2 };
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    val1 = t2;
+
+    foo ? (y = x.concat(arr2)) : y;
+    t1 = (() => [y])();
+    $[0] = arr1;
+    $[1] = arr2;
+    $[2] = foo;
+    $[3] = t1;
+    $[4] = val1;
+  } else {
+    t1 = $[3];
+    val1 = $[4];
+  }
+  const val2 = t1;
+  let t2;
+  if ($[6] !== val1 || $[7] !== val2) {
+    t2 = <Stringify val1={val1} val2={val2} />;
+    $[6] = val1;
+    $[7] = val2;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ arr1: [1, 2], arr2: [3, 4], foo: true }],
+  sequentialRenders: [
+    { arr1: [1, 2], arr2: [3, 4], foo: true },
+    { arr1: [1, 2], arr2: [3, 4], foo: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"val1":{"x":2},"val2":[[[1,2],3,4]]}</div>
+<div>{"val1":{"x":2},"val2":[[]]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx
new file mode 100644
index 00000000000..673493c313b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx
@@ -0,0 +1,28 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Foo({arr1, arr2, foo}) {
+  const x = [arr1];
+
+  let y = [];
+
+  const val1 = useMemo(() => {
+    return {x: 2};
+  }, []);
+
+  const val2 = useMemo(() => {
+    return [y];
+  }, [foo ? (y = x.concat(arr2)) : y]);
+
+  return <Stringify val1={val1} val2={val2} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{arr1: [1, 2], arr2: [3, 4], foo: true}],
+  sequentialRenders: [
+    {arr1: [1, 2], arr2: [3, 4], foo: true},
+    {arr1: [1, 2], arr2: [3, 4], foo: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md
new file mode 100644
index 00000000000..3a8a7393f51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+// Compiler can produce any memoization it finds valid if the
+// source listed no memo deps
+function Component({propA}) {
+  // @ts-ignore
+  return useMemo(() => {
+    return [propA];
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+// Compiler can produce any memoization it finds valid if the
+// source listed no memo deps
+function Component(t0) {
+  const $ = _c(2);
+  const { propA } = t0;
+  let t1;
+  if ($[0] !== propA) {
+    t1 = [propA];
+    $[0] = propA;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propA: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.ts
new file mode 100644
index 00000000000..05799ccfa3b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.ts
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+// Compiler can produce any memoization it finds valid if the
+// source listed no memo deps
+function Component({propA}) {
+  // @ts-ignore
+  return useMemo(() => {
+    return [propA];
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propA: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md
new file mode 100644
index 00000000000..c5bfe197c3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* isPending intentionally not captured */ start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useTransition } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [, start] = useTransition();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      start();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js
new file mode 100644
index 00000000000..d7560197f03
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* isPending intentionally not captured */ start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md
new file mode 100644
index 00000000000..84441267558
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* state value intentionally not captured */ setState] = useState();
+
+  return useCallback(() => {
+    setState(x => x + 1);
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useTransition } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [, setState] = useState();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp(x) {
+  return x + 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) useState is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js
new file mode 100644
index 00000000000..e270d4f0192
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [, /* state value intentionally not captured */ setState] = useState();
+
+  return useCallback(() => {
+    setState(x => x + 1);
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-alias-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-alias-mutate.expect.md
new file mode 100644
index 00000000000..4c989cf1ace
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-alias-mutate.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let x = 'foo';
+  if (a) {
+    x = 'bar';
+  } else {
+    x = 'baz';
+  }
+  let y = x;
+  mutate(y);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+function component(a) {
+  let x;
+  if (a) {
+    x = "bar";
+  } else {
+    x = "baz";
+  }
+
+  const y = x;
+  mutate(y);
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-alias-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-alias-mutate.js
new file mode 100644
index 00000000000..ccfe3a67ecb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-alias-mutate.js
@@ -0,0 +1,11 @@
+function component(a) {
+  let x = 'foo';
+  if (a) {
+    x = 'bar';
+  } else {
+    x = 'baz';
+  }
+  let y = x;
+  mutate(y);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep-nested-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep-nested-scope.expect.md
new file mode 100644
index 00000000000..580a97ac19e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep-nested-scope.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// props.b + 1 is an non-allocating expression, which means Forget can
+// emit it trivially and repeatedly (e.g. no need to memoize props.b + 1
+// separately from props.b)
+// Correctness:
+
+import {identity, mutate, setProperty} from 'shared-runtime';
+
+//   y depends on either props.b or props.b + 1
+function PrimitiveAsDepNested(props) {
+  let x = {};
+  mutate(x);
+  let y = identity(props.b + 1);
+  setProperty(x, props.a);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: PrimitiveAsDepNested,
+  params: [{a: 1, b: 2}],
+  sequentialRenders: [
+    // change b
+    {a: 1, b: 3},
+    // change b
+    {a: 1, b: 4},
+    // change a
+    {a: 2, b: 4},
+    // change a
+    {a: 3, b: 4},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.b + 1 is an non-allocating expression, which means Forget can
+// emit it trivially and repeatedly (e.g. no need to memoize props.b + 1
+// separately from props.b)
+// Correctness:
+
+import { identity, mutate, setProperty } from "shared-runtime";
+
+//   y depends on either props.b or props.b + 1
+function PrimitiveAsDepNested(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    const x = {};
+    mutate(x);
+    const t1 = props.b + 1;
+    let t2;
+    if ($[3] !== t1) {
+      t2 = identity(t1);
+      $[3] = t1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    const y = t2;
+    setProperty(x, props.a);
+    t0 = [x, y];
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: PrimitiveAsDepNested,
+  params: [{ a: 1, b: 2 }],
+  sequentialRenders: [
+    // change b
+    { a: 1, b: 3 },
+    // change b
+    { a: 1, b: 4 },
+    // change a
+    { a: 2, b: 4 },
+    // change a
+    { a: 3, b: 4 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"wat0":"joe","wat1":1},4]
+[{"wat0":"joe","wat1":1},5]
+[{"wat0":"joe","wat1":2},5]
+[{"wat0":"joe","wat1":3},5]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep-nested-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep-nested-scope.js
new file mode 100644
index 00000000000..c6d7ece69cd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep-nested-scope.js
@@ -0,0 +1,30 @@
+// props.b + 1 is an non-allocating expression, which means Forget can
+// emit it trivially and repeatedly (e.g. no need to memoize props.b + 1
+// separately from props.b)
+// Correctness:
+
+import {identity, mutate, setProperty} from 'shared-runtime';
+
+//   y depends on either props.b or props.b + 1
+function PrimitiveAsDepNested(props) {
+  let x = {};
+  mutate(x);
+  let y = identity(props.b + 1);
+  setProperty(x, props.a);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: PrimitiveAsDepNested,
+  params: [{a: 1, b: 2}],
+  sequentialRenders: [
+    // change b
+    {a: 1, b: 3},
+    // change b
+    {a: 1, b: 4},
+    // change a
+    {a: 2, b: 4},
+    // change a
+    {a: 3, b: 4},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep.expect.md
new file mode 100644
index 00000000000..4c004962936
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// props.b + 1 is an non-allocating expression, which means Forget can
+// emit it trivially and repeatedly (e.g. no need to memoize props.b + 1
+// separately from props.b)
+// Correctness:
+//   y depends on either props.b or props.b + 1
+function PrimitiveAsDep(props) {
+  let y = foo(props.b + 1);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.b + 1 is an non-allocating expression, which means Forget can
+// emit it trivially and repeatedly (e.g. no need to memoize props.b + 1
+// separately from props.b)
+// Correctness:
+//   y depends on either props.b or props.b + 1
+function PrimitiveAsDep(props) {
+  const $ = _c(2);
+  const t0 = props.b + 1;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = foo(t0);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const y = t1;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep.js
new file mode 100644
index 00000000000..1c1d23f15fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-as-dep.js
@@ -0,0 +1,9 @@
+// props.b + 1 is an non-allocating expression, which means Forget can
+// emit it trivially and repeatedly (e.g. no need to memoize props.b + 1
+// separately from props.b)
+// Correctness:
+//   y depends on either props.b or props.b + 1
+function PrimitiveAsDep(props) {
+  let y = foo(props.b + 1);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.expect.md
new file mode 100644
index 00000000000..6c2170feb61
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+function Component({base, start, increment, test}) {
+  let value = base;
+  for (let i = start; i < test; i += increment) {
+    value += i;
+  }
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{base: 0, start: 0, test: 10, increment: 1}],
+  sequentialRenders: [
+    {base: 0, start: 1, test: 10, increment: 1},
+    {base: 0, start: 0, test: 10, increment: 2},
+    {base: 2, start: 0, test: 10, increment: 2},
+    {base: 0, start: 0, test: 11, increment: 2},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+function Component(t0) {
+  const $ = _c(2);
+  const { base, start, increment, test } = t0;
+  let value = base;
+  for (let i = start; i < test; i = i + increment, i) {
+    value = value + i;
+  }
+  let t1;
+  if ($[0] !== value) {
+    t1 = <div>{value}</div>;
+    $[0] = value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ base: 0, start: 0, test: 10, increment: 1 }],
+  sequentialRenders: [
+    { base: 0, start: 1, test: 10, increment: 1 },
+    { base: 0, start: 0, test: 10, increment: 2 },
+    { base: 2, start: 0, test: 10, increment: 2 },
+    { base: 0, start: 0, test: 11, increment: 2 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>45</div>
+<div>20</div>
+<div>22</div>
+<div>30</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.js
new file mode 100644
index 00000000000..cce3123f94e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.js
@@ -0,0 +1,19 @@
+// @enablePreserveExistingMemoizationGuarantees
+function Component({base, start, increment, test}) {
+  let value = base;
+  for (let i = start; i < test; i += increment) {
+    value += i;
+  }
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{base: 0, start: 0, test: 10, increment: 1}],
+  sequentialRenders: [
+    {base: 0, start: 1, test: 10, increment: 1},
+    {base: 0, start: 0, test: 10, increment: 2},
+    {base: 2, start: 0, test: 10, increment: 2},
+    {base: 0, start: 0, test: 11, increment: 2},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.expect.md
new file mode 100644
index 00000000000..9bfd9cf06ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let z = {a, b};
+  let x = function () {
+    console.log(z);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a, b) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== a || $[1] !== b) {
+    const z = { a, b };
+    t0 = function () {
+      console.log(z);
+    };
+    $[0] = a;
+    $[1] = b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.js
new file mode 100644
index 00000000000..c4c997874d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.js
@@ -0,0 +1,13 @@
+function component(a, b) {
+  let z = {a, b};
+  let x = function () {
+    console.log(z);
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-break-labeled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-break-labeled.expect.md
new file mode 100644
index 00000000000..f778c74037d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-break-labeled.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+/**
+ * props.b *does* influence `a`
+ */
+function Component(props) {
+  const a = [];
+  a.push(props.a);
+  label: {
+    if (props.b) {
+      break label;
+    }
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+/**
+ * props.b *does* influence `a`
+ */
+function Component(props) {
+  const $ = _c(5);
+  let a;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    a = [];
+    a.push(props.a);
+    bb0: {
+      if (props.b) {
+        break bb0;
+      }
+
+      a.push(props.c);
+    }
+
+    a.push(props.d);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+  } else {
+    a = $[4];
+  }
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-break-labeled.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-break-labeled.js
new file mode 100644
index 00000000000..770a4794fe0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-break-labeled.js
@@ -0,0 +1,22 @@
+// @enablePropagateDepsInHIR
+/**
+ * props.b *does* influence `a`
+ */
+function Component(props) {
+  const a = [];
+  a.push(props.a);
+  label: {
+    if (props.b) {
+      break label;
+    }
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-early-return.expect.md
new file mode 100644
index 00000000000..602859389e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-early-return.expect.md
@@ -0,0 +1,225 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+/**
+ * props.b does *not* influence `a`
+ */
+function ComponentA(props) {
+  const a_DEBUG = [];
+  a_DEBUG.push(props.a);
+  if (props.b) {
+    return null;
+  }
+  a_DEBUG.push(props.d);
+  return a_DEBUG;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentB(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`, but only in a way that is never observable
+ */
+function ComponentC(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return null;
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentD(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return a;
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ComponentA,
+  params: [{a: 1, b: false, d: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+/**
+ * props.b does *not* influence `a`
+ */
+function ComponentA(props) {
+  const $ = _c(5);
+  let a_DEBUG;
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.d) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      a_DEBUG = [];
+      a_DEBUG.push(props.a);
+      if (props.b) {
+        t0 = null;
+        break bb0;
+      }
+
+      a_DEBUG.push(props.d);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.d;
+    $[3] = a_DEBUG;
+    $[4] = t0;
+  } else {
+    a_DEBUG = $[3];
+    t0 = $[4];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return a_DEBUG;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentB(props) {
+  const $ = _c(5);
+  let a;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    a = [];
+    a.push(props.a);
+    if (props.b) {
+      a.push(props.c);
+    }
+
+    a.push(props.d);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+  } else {
+    a = $[4];
+  }
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`, but only in a way that is never observable
+ */
+function ComponentC(props) {
+  const $ = _c(6);
+  let a;
+  let t0;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      a = [];
+      a.push(props.a);
+      if (props.b) {
+        a.push(props.c);
+        t0 = null;
+        break bb0;
+      }
+
+      a.push(props.d);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+    $[5] = t0;
+  } else {
+    a = $[4];
+    t0 = $[5];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentD(props) {
+  const $ = _c(6);
+  let a;
+  let t0;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d
+  ) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      a = [];
+      a.push(props.a);
+      if (props.b) {
+        a.push(props.c);
+        t0 = a;
+        break bb0;
+      }
+
+      a.push(props.d);
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = a;
+    $[5] = t0;
+  } else {
+    a = $[4];
+    t0 = $[5];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ComponentA,
+  params: [{ a: 1, b: false, d: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-early-return.js
new file mode 100644
index 00000000000..02edefc77f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-early-return.js
@@ -0,0 +1,59 @@
+// @enablePropagateDepsInHIR
+/**
+ * props.b does *not* influence `a`
+ */
+function ComponentA(props) {
+  const a_DEBUG = [];
+  a_DEBUG.push(props.a);
+  if (props.b) {
+    return null;
+  }
+  a_DEBUG.push(props.d);
+  return a_DEBUG;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentB(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`, but only in a way that is never observable
+ */
+function ComponentC(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return null;
+  }
+  a.push(props.d);
+  return a;
+}
+
+/**
+ * props.b *does* influence `a`
+ */
+function ComponentD(props) {
+  const a = [];
+  a.push(props.a);
+  if (props.b) {
+    a.push(props.c);
+    return a;
+  }
+  a.push(props.d);
+  return a;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ComponentA,
+  params: [{a: 1, b: false, d: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-on-mutable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-on-mutable.expect.md
new file mode 100644
index 00000000000..7c2392453ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-on-mutable.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function ComponentA(props) {
+  const a = [];
+  const b = [];
+  if (b) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function ComponentB(props) {
+  const a = [];
+  const b = [];
+  if (mayMutate(b)) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function Foo() {}
+function mayMutate() {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function ComponentA(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
+    const a = [];
+    const b = [];
+    if (b) {
+      a.push(props.p0);
+    }
+    if (props.p1) {
+      b.push(props.p2);
+    }
+    t0 = <Foo a={a} b={b} />;
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = props.p2;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+function ComponentB(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
+    const a = [];
+    const b = [];
+    if (mayMutate(b)) {
+      a.push(props.p0);
+    }
+    if (props.p1) {
+      b.push(props.p2);
+    }
+    t0 = <Foo a={a} b={b} />;
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = props.p2;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+function Foo() {}
+function mayMutate() {}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-on-mutable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-on-mutable.js
new file mode 100644
index 00000000000..d03e36aaab5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/conditional-on-mutable.js
@@ -0,0 +1,27 @@
+// @enablePropagateDepsInHIR
+function ComponentA(props) {
+  const a = [];
+  const b = [];
+  if (b) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function ComponentB(props) {
+  const a = [];
+  const b = [];
+  if (mayMutate(b)) {
+    a.push(props.p0);
+  }
+  if (props.p1) {
+    b.push(props.p2);
+  }
+  return <Foo a={a} b={b} />;
+}
+
+function Foo() {}
+function mayMutate() {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-nested-early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-nested-early-return-within-reactive-scope.expect.md
new file mode 100644
index 00000000000..c235681d38c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-nested-early-return-within-reactive-scope.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    if (props.b) {
+      const y = [props.b];
+      x.push(y);
+      // oops no memo!
+      return x;
+    }
+    // oops no memo!
+    return x;
+  } else {
+    return foo();
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42, b: 3.14}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        if (props.b) {
+          let t1;
+          if ($[4] !== props.b) {
+            t1 = [props.b];
+            $[4] = props.b;
+            $[5] = t1;
+          } else {
+            t1 = $[5];
+          }
+          const y = t1;
+          x.push(y);
+          t0 = x;
+          break bb0;
+        }
+
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = foo();
+          $[6] = t1;
+        } else {
+          t1 = $[6];
+        }
+        t0 = t1;
+        break bb0;
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, a: 42, b: 3.14 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42,[3.14]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-nested-early-return-within-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-nested-early-return-within-reactive-scope.js
new file mode 100644
index 00000000000..c8c24172d79
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-nested-early-return-within-reactive-scope.js
@@ -0,0 +1,22 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    if (props.b) {
+      const y = [props.b];
+      x.push(y);
+      // oops no memo!
+      return x;
+    }
+    // oops no memo!
+    return x;
+  } else {
+    return foo();
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42, b: 3.14}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-within-reactive-scope.expect.md
new file mode 100644
index 00000000000..0e93d32061f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-within-reactive-scope.expect.md
@@ -0,0 +1,115 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    return makeArray(props.b);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    // pattern 1
+    {cond: true, a: 42},
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { makeArray } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[4] !== props.b) {
+          t1 = makeArray(props.b);
+          $[4] = props.b;
+          $[5] = t1;
+        } else {
+          t1 = $[5];
+        }
+        t0 = t1;
+        break bb0;
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    // pattern 1
+    { cond: true, a: 42 },
+    { cond: true, a: 42 },
+    // pattern 2
+    { cond: false, b: 3.14 },
+    { cond: false, b: 3.14 },
+    // pattern 1
+    { cond: true, a: 42 },
+    // pattern 2
+    { cond: false, b: 3.14 },
+    // pattern 1
+    { cond: true, a: 42 },
+    // pattern 2
+    { cond: false, b: 3.14 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
+[42]
+[3.14]
+[3.14]
+[42]
+[3.14]
+[42]
+[3.14]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-within-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-within-reactive-scope.js
new file mode 100644
index 00000000000..256eb46bc92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/early-return-within-reactive-scope.js
@@ -0,0 +1,34 @@
+// @enablePropagateDepsInHIR
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    return makeArray(props.b);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    // pattern 1
+    {cond: true, a: 42},
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+    // pattern 1
+    {cond: true, a: 42},
+    // pattern 2
+    {cond: false, b: 3.14},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.expect.md
new file mode 100644
index 00000000000..5da7122c76f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return createArray(value?.x, value?.y)?.join(', ');
+}
+
+function createArray<T>(...args: Array<T>): Array<T> {
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Unexpected terminal kind `optional` for optional fallthrough block
+
+error.todo-optional-call-chain-in-optional.ts:4:21
+  2 | function useFoo(props: {value: {x: string; y: string} | null}) {
+  3 |   const value = props.value;
+> 4 |   return createArray(value?.x, value?.y)?.join(', ');
+    |                      ^^^^^^^^ Unexpected terminal kind `optional` for optional fallthrough block
+  5 | }
+  6 |
+  7 | function createArray<T>(...args: Array<T>): Array<T> {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.ts
new file mode 100644
index 00000000000..0031bc770c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.ts
@@ -0,0 +1,14 @@
+// @enablePropagateDepsInHIR
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return createArray(value?.x, value?.y)?.join(', ');
+}
+
+function createArray<T>(...args: Array<T>): Array<T> {
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional-optional.expect.md
new file mode 100644
index 00000000000..14ea4e75938
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional-optional.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props?.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items`, but the source dependencies were [props?.items, props.cond]. Inferred different dependency than source.
+
+error.todo-optional-member-expression-with-conditional-optional.ts:4:23
+   2 | import {ValidateMemoization} from 'shared-runtime';
+   3 | function Component(props) {
+>  4 |   const data = useMemo(() => {
+     |                        ^^^^^^^
+>  5 |     const x = [];
+     | ^^^^^^^^^^^^^^^^^
+>  6 |     x.push(props?.items);
+     | ^^^^^^^^^^^^^^^^^
+>  7 |     if (props.cond) {
+     | ^^^^^^^^^^^^^^^^^
+>  8 |       x.push(props?.items);
+     | ^^^^^^^^^^^^^^^^^
+>  9 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 10 |     return x;
+     | ^^^^^^^^^^^^^^^^^
+> 11 |   }, [props?.items, props.cond]);
+     | ^^^^ Could not preserve existing manual memoization
+  12 |   return (
+  13 |     <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  14 |   );
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional-optional.js
new file mode 100644
index 00000000000..b2ae1032b27
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional-optional.js
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props?.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional.expect.md
new file mode 100644
index 00000000000..f3fdb07697a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `props.items`, but the source dependencies were [props?.items, props.cond]. Inferred different dependency than source.
+
+error.todo-optional-member-expression-with-conditional.ts:4:23
+   2 | import {ValidateMemoization} from 'shared-runtime';
+   3 | function Component(props) {
+>  4 |   const data = useMemo(() => {
+     |                        ^^^^^^^
+>  5 |     const x = [];
+     | ^^^^^^^^^^^^^^^^^
+>  6 |     x.push(props?.items);
+     | ^^^^^^^^^^^^^^^^^
+>  7 |     if (props.cond) {
+     | ^^^^^^^^^^^^^^^^^
+>  8 |       x.push(props.items);
+     | ^^^^^^^^^^^^^^^^^
+>  9 |     }
+     | ^^^^^^^^^^^^^^^^^
+> 10 |     return x;
+     | ^^^^^^^^^^^^^^^^^
+> 11 |   }, [props?.items, props.cond]);
+     | ^^^^ Could not preserve existing manual memoization
+  12 |   return (
+  13 |     <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  14 |   );
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional.js
new file mode 100644
index 00000000000..aa199702220
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-member-expression-with-conditional.js
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    if (props.cond) {
+      x.push(props.items);
+    }
+    return x;
+  }, [props?.items, props.cond]);
+  return (
+    <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/iife-return-modified-later-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/iife-return-modified-later-phi.expect.md
new file mode 100644
index 00000000000..2a3da8b195a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/iife-return-modified-later-phi.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  const items = (() => {
+    if (props.cond) {
+      return [];
+    } else {
+      return null;
+    }
+  })();
+  items?.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(3);
+  let items;
+  if ($[0] !== props.a || $[1] !== props.cond) {
+    let t0;
+    if (props.cond) {
+      t0 = [];
+    } else {
+      t0 = null;
+    }
+    items = t0;
+
+    items?.push(props.a);
+    $[0] = props.a;
+    $[1] = props.cond;
+    $[2] = items;
+  } else {
+    items = $[2];
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: {} }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/iife-return-modified-later-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/iife-return-modified-later-phi.js
new file mode 100644
index 00000000000..4e8eb097de8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/iife-return-modified-later-phi.js
@@ -0,0 +1,17 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  const items = (() => {
+    if (props.cond) {
+      return [];
+    } else {
+      return null;
+    }
+  })();
+  items?.push(props.a);
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-component-props-non-null.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-component-props-non-null.expect.md
new file mode 100644
index 00000000000..2c3b7930a73
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-component-props-non-null.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {identity, Stringify} from 'shared-runtime';
+
+function Foo(props) {
+  /**
+   * props.value should be inferred as the dependency of this scope
+   * since we know that props is safe to read from (i.e. non-null)
+   * as it is arg[0] of a component function
+   */
+  const arr = [];
+  if (props.cond) {
+    arr.push(identity(props.value));
+  }
+  return <Stringify arr={arr} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 2, cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { identity, Stringify } from "shared-runtime";
+
+function Foo(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.cond || $[1] !== props.value) {
+    const arr = [];
+    if (props.cond) {
+      let t1;
+      if ($[3] !== props.value) {
+        t1 = identity(props.value);
+        $[3] = props.value;
+        $[4] = t1;
+      } else {
+        t1 = $[4];
+      }
+      arr.push(t1);
+    }
+    t0 = <Stringify arr={arr} />;
+    $[0] = props.cond;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ value: 2, cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"arr":[2]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-component-props-non-null.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-component-props-non-null.tsx
new file mode 100644
index 00000000000..2d88e5a7902
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-component-props-non-null.tsx
@@ -0,0 +1,20 @@
+// @enablePropagateDepsInHIR
+import {identity, Stringify} from 'shared-runtime';
+
+function Foo(props) {
+  /**
+   * props.value should be inferred as the dependency of this scope
+   * since we know that props is safe to read from (i.e. non-null)
+   * as it is arg[0] of a component function
+   */
+  const arr = [];
+  if (props.cond) {
+    arr.push(identity(props.value));
+  }
+  return <Stringify arr={arr} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{value: 2, cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-non-null-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-non-null-destructure.expect.md
new file mode 100644
index 00000000000..faed26bc8ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-non-null-destructure.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {identity, useIdentity} from 'shared-runtime';
+
+function useFoo({arg, cond}: {arg: number; cond: boolean}) {
+  const maybeObj = useIdentity({value: arg});
+  const {value} = maybeObj;
+  useIdentity(null);
+  /**
+   * maybeObj.value should be inferred as the dependency of this scope
+   * since we know that maybeObj is safe to read from (i.e. non-null)
+   * due to the above destructuring instruction
+   */
+  const arr = [];
+  if (cond) {
+    arr.push(identity(maybeObj.value));
+  }
+  return {arr, value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arg: 2, cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { identity, useIdentity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(10);
+  const { arg, cond } = t0;
+  let t1;
+  if ($[0] !== arg) {
+    t1 = { value: arg };
+    $[0] = arg;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const maybeObj = useIdentity(t1);
+  const { value } = maybeObj;
+  useIdentity(null);
+  let arr;
+  if ($[2] !== cond || $[3] !== maybeObj.value) {
+    arr = [];
+    if (cond) {
+      let t2;
+      if ($[5] !== maybeObj.value) {
+        t2 = identity(maybeObj.value);
+        $[5] = maybeObj.value;
+        $[6] = t2;
+      } else {
+        t2 = $[6];
+      }
+      arr.push(t2);
+    }
+    $[2] = cond;
+    $[3] = maybeObj.value;
+    $[4] = arr;
+  } else {
+    arr = $[4];
+  }
+  let t2;
+  if ($[7] !== arr || $[8] !== value) {
+    t2 = { arr, value };
+    $[7] = arr;
+    $[8] = value;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ arg: 2, cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"arr":[],"value":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-non-null-destructure.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-non-null-destructure.ts
new file mode 100644
index 00000000000..f67991df725
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-non-null-destructure.ts
@@ -0,0 +1,23 @@
+// @enablePropagateDepsInHIR
+import {identity, useIdentity} from 'shared-runtime';
+
+function useFoo({arg, cond}: {arg: number; cond: boolean}) {
+  const maybeObj = useIdentity({value: arg});
+  const {value} = maybeObj;
+  useIdentity(null);
+  /**
+   * maybeObj.value should be inferred as the dependency of this scope
+   * since we know that maybeObj is safe to read from (i.e. non-null)
+   * due to the above destructuring instruction
+   */
+  const arr = [];
+  if (cond) {
+    arr.push(identity(maybeObj.value));
+  }
+  return {arr, value};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{arg: 2, cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-sequential-optional-chain-nonnull.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-sequential-optional-chain-nonnull.expect.md
new file mode 100644
index 00000000000..757ad2666d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-sequential-optional-chain-nonnull.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+function useFoo({a}) {
+  let x = [];
+  x.push(a?.b.c?.d.e);
+  x.push(a.b?.c.d?.e);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: null},
+    {a: {}},
+    {a: {b: {c: {d: {e: 42}}}}},
+    {a: {b: {c: {d: {e: 43}}}}},
+    {a: {b: {c: {d: {e: undefined}}}}},
+    {a: {b: undefined}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let x;
+  if ($[0] !== a.b.c.d.e) {
+    x = [];
+    x.push(a?.b.c?.d.e);
+    x.push(a.b?.c.d?.e);
+    $[0] = a.b.c.d.e;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [
+    { a: null },
+    { a: null },
+    { a: {} },
+    { a: { b: { c: { d: { e: 42 } } } } },
+    { a: { b: { c: { d: { e: 43 } } } } },
+    { a: { b: { c: { d: { e: undefined } } } } },
+    { a: { b: undefined } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
+[42,42]
+[43,43]
+[null,null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-sequential-optional-chain-nonnull.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-sequential-optional-chain-nonnull.ts
new file mode 100644
index 00000000000..750e422861c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/infer-sequential-optional-chain-nonnull.ts
@@ -0,0 +1,22 @@
+// @enablePropagateDepsInHIR
+
+function useFoo({a}) {
+  let x = [];
+  x.push(a?.b.c?.d.e);
+  x.push(a.b?.c.d?.e);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: null},
+    {a: {}},
+    {a: {b: {c: {d: {e: 42}}}}},
+    {a: {b: {c: {d: {e: 43}}}}},
+    {a: {b: {c: {d: {e: undefined}}}}},
+    {a: {b: undefined}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/nested-optional-chains.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/nested-optional-chains.expect.md
new file mode 100644
index 00000000000..56b987c677e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/nested-optional-chains.expect.md
@@ -0,0 +1,232 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {identity} from 'shared-runtime';
+
+/**
+ * identity(...)?.toString() is the outer optional, and prop?.value is the inner
+ * one.
+ * Note that prop?.
+ */
+function useFoo({
+  prop1,
+  prop2,
+  prop3,
+  prop4,
+  prop5,
+  prop6,
+}: {
+  prop1: null | {value: number};
+  prop2: null | {inner: {value: number}};
+  prop3: null | {fn: (val: any) => NonNullable<object>};
+  prop4: null | {inner: {value: number}};
+  prop5: null | {fn: (val: any) => NonNullable<object>};
+  prop6: null | {inner: {value: number}};
+}) {
+  // prop1?.value should be hoisted as the dependency of x
+  const x = identity(prop1?.value)?.toString();
+
+  // prop2?.inner.value should be hoisted as the dependency of y
+  const y = identity(prop2?.inner.value)?.toString();
+
+  // prop3 and prop4?.inner should be hoisted as the dependency of z
+  const z = prop3?.fn(prop4?.inner.value).toString();
+
+  // prop5 and prop6?.inner should be hoisted as the dependency of zz
+  const zz = prop5?.fn(prop6?.inner.value)?.toString();
+  return [x, y, z, zz];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+  ],
+  sequentialRenders: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: 4}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: undefined}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: undefined}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {},
+      prop3: {fn: identity},
+      prop4: {},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { identity } from "shared-runtime";
+
+/**
+ * identity(...)?.toString() is the outer optional, and prop?.value is the inner
+ * one.
+ * Note that prop?.
+ */
+function useFoo(t0) {
+  const $ = _c(15);
+  const { prop1, prop2, prop3, prop4, prop5, prop6 } = t0;
+  let t1;
+  if ($[0] !== prop1?.value) {
+    t1 = identity(prop1?.value)?.toString();
+    $[0] = prop1?.value;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const x = t1;
+  let t2;
+  if ($[2] !== prop2?.inner.value) {
+    t2 = identity(prop2?.inner.value)?.toString();
+    $[2] = prop2?.inner.value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const y = t2;
+  let t3;
+  if ($[4] !== prop3 || $[5] !== prop4?.inner) {
+    t3 = prop3?.fn(prop4?.inner.value).toString();
+    $[4] = prop3;
+    $[5] = prop4?.inner;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const z = t3;
+  let t4;
+  if ($[7] !== prop5 || $[8] !== prop6?.inner) {
+    t4 = prop5?.fn(prop6?.inner.value)?.toString();
+    $[7] = prop5;
+    $[8] = prop6?.inner;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const zz = t4;
+  let t5;
+  if ($[10] !== x || $[11] !== y || $[12] !== z || $[13] !== zz) {
+    t5 = [x, y, z, zz];
+    $[10] = x;
+    $[11] = y;
+    $[12] = z;
+    $[13] = zz;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+  ],
+
+  sequentialRenders: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+    {
+      prop1: { value: 2 },
+      prop2: { inner: { value: 3 } },
+      prop3: { fn: identity },
+      prop4: { inner: { value: 4 } },
+      prop5: { fn: identity },
+      prop6: { inner: { value: 4 } },
+    },
+    {
+      prop1: { value: 2 },
+      prop2: { inner: { value: 3 } },
+      prop3: { fn: identity },
+      prop4: { inner: { value: 4 } },
+      prop5: { fn: identity },
+      prop6: { inner: { value: undefined } },
+    },
+    {
+      prop1: { value: 2 },
+      prop2: { inner: { value: undefined } },
+      prop3: { fn: identity },
+      prop4: { inner: { value: undefined } },
+      prop5: { fn: identity },
+      prop6: { inner: { value: undefined } },
+    },
+    {
+      prop1: { value: 2 },
+      prop2: {},
+      prop3: { fn: identity },
+      prop4: {},
+      prop5: { fn: identity },
+      prop6: { inner: { value: undefined } },
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null,null,null,null]
+["2","3","4","4"]
+["2","3","4",null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'toString') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'value') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/nested-optional-chains.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/nested-optional-chains.ts
new file mode 100644
index 00000000000..48f3b2de2a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/nested-optional-chains.ts
@@ -0,0 +1,93 @@
+// @enablePropagateDepsInHIR
+
+import {identity} from 'shared-runtime';
+
+/**
+ * identity(...)?.toString() is the outer optional, and prop?.value is the inner
+ * one.
+ * Note that prop?.
+ */
+function useFoo({
+  prop1,
+  prop2,
+  prop3,
+  prop4,
+  prop5,
+  prop6,
+}: {
+  prop1: null | {value: number};
+  prop2: null | {inner: {value: number}};
+  prop3: null | {fn: (val: any) => NonNullable<object>};
+  prop4: null | {inner: {value: number}};
+  prop5: null | {fn: (val: any) => NonNullable<object>};
+  prop6: null | {inner: {value: number}};
+}) {
+  // prop1?.value should be hoisted as the dependency of x
+  const x = identity(prop1?.value)?.toString();
+
+  // prop2?.inner.value should be hoisted as the dependency of y
+  const y = identity(prop2?.inner.value)?.toString();
+
+  // prop3 and prop4?.inner should be hoisted as the dependency of z
+  const z = prop3?.fn(prop4?.inner.value).toString();
+
+  // prop5 and prop6?.inner should be hoisted as the dependency of zz
+  const zz = prop5?.fn(prop6?.inner.value)?.toString();
+  return [x, y, z, zz];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+  ],
+  sequentialRenders: [
+    {
+      prop1: null,
+      prop2: null,
+      prop3: null,
+      prop4: null,
+      prop5: null,
+      prop6: null,
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: 4}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: 3}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: 4}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {inner: {value: undefined}},
+      prop3: {fn: identity},
+      prop4: {inner: {value: undefined}},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+    {
+      prop1: {value: 2},
+      prop2: {},
+      prop3: {fn: identity},
+      prop4: {},
+      prop5: {fn: identity},
+      prop6: {inner: {value: undefined}},
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/object-mutated-in-consequent-alternate-both-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/object-mutated-in-consequent-alternate-both-return.expect.md
new file mode 100644
index 00000000000..142fc9cefe6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/object-mutated-in-consequent-alternate-both-return.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+  if (props.cond) {
+    object.value = 1;
+    return object;
+  } else {
+    object.value = props.value;
+    return object;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, value: [0, 1, 2]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { makeObject_Primitives } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.cond || $[1] !== props.value) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const object = makeObject_Primitives();
+      if (props.cond) {
+        object.value = 1;
+        t0 = object;
+        break bb0;
+      } else {
+        object.value = props.value;
+        t0 = object;
+        break bb0;
+      }
+    }
+    $[0] = props.cond;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, value: [0, 1, 2] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true,"value":[0,1,2]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/object-mutated-in-consequent-alternate-both-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/object-mutated-in-consequent-alternate-both-return.js
new file mode 100644
index 00000000000..2386448adfb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/object-mutated-in-consequent-alternate-both-return.js
@@ -0,0 +1,18 @@
+// @enablePropagateDepsInHIR
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+  if (props.cond) {
+    object.value = 1;
+    return object;
+  } else {
+    object.value = props.value;
+    return object;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, value: [0, 1, 2]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-as-memo-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-as-memo-dep.expect.md
new file mode 100644
index 00000000000..f763eea4f10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-as-memo-dep.expect.md
@@ -0,0 +1,96 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {identity, ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+
+function Component({arg}) {
+  const data = useMemo(() => {
+    return arg?.items.edges?.nodes.map(identity);
+  }, [arg?.items.edges?.nodes]);
+  return (
+    <ValidateMemoization inputs={[arg?.items.edges?.nodes]} output={data} />
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: null}],
+  sequentialRenders: [
+    {arg: null},
+    {arg: null},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import { identity, ValidateMemoization } from "shared-runtime";
+import { useMemo } from "react";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { arg } = t0;
+
+  arg?.items.edges?.nodes;
+  let t1;
+  if ($[0] !== arg?.items.edges?.nodes) {
+    t1 = arg?.items.edges?.nodes.map(identity);
+    $[0] = arg?.items.edges?.nodes;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const data = t1;
+
+  const t2 = arg?.items.edges?.nodes;
+  let t3;
+  if ($[2] !== t2) {
+    t3 = [t2];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== data || $[5] !== t3) {
+    t4 = <ValidateMemoization inputs={t3} output={data} />;
+    $[4] = data;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arg: null }],
+  sequentialRenders: [
+    { arg: null },
+    { arg: null },
+    { arg: { items: { edges: null } } },
+    { arg: { items: { edges: null } } },
+    { arg: { items: { edges: { nodes: [1, 2, "hello"] } } } },
+    { arg: { items: { edges: { nodes: [1, 2, "hello"] } } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[null]}</div>
+<div>{"inputs":[null]}</div>
+<div>{"inputs":[null]}</div>
+<div>{"inputs":[null]}</div>
+<div>{"inputs":[[1,2,"hello"]],"output":[1,2,"hello"]}</div>
+<div>{"inputs":[[1,2,"hello"]],"output":[1,2,"hello"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-as-memo-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-as-memo-dep.js
new file mode 100644
index 00000000000..d248c472f5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-as-memo-dep.js
@@ -0,0 +1,24 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {identity, ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+
+function Component({arg}) {
+  const data = useMemo(() => {
+    return arg?.items.edges?.nodes.map(identity);
+  }, [arg?.items.edges?.nodes]);
+  return (
+    <ValidateMemoization inputs={[arg?.items.edges?.nodes]} output={data} />
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: null}],
+  sequentialRenders: [
+    {arg: null},
+    {arg: null},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: null}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+    {arg: {items: {edges: {nodes: [1, 2, 'hello']}}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-inverted-optionals-parallel-paths.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-inverted-optionals-parallel-paths.expect.md
new file mode 100644
index 00000000000..f0dbc3448ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-inverted-optionals-parallel-paths.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.a.b?.c.d?.e);
+    x.push(props.a?.b.c?.d.e);
+    return x;
+  }, [props.a.b.c.d.e]);
+  return <ValidateMemoization inputs={[props.a.b.c.d.e]} output={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import { ValidateMemoization } from "shared-runtime";
+function Component(props) {
+  const $ = _c(2);
+
+  const x$0 = [];
+  x$0.push(props?.a.b?.c.d?.e);
+  x$0.push(props.a?.b.c?.d.e);
+  let t0;
+  if ($[0] !== props.a.b.c.d.e) {
+    t0 = <ValidateMemoization inputs={[props.a.b.c.d.e]} output={x} />;
+    $[0] = props.a.b.c.d.e;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-inverted-optionals-parallel-paths.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-inverted-optionals-parallel-paths.js
new file mode 100644
index 00000000000..091912f9573
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-inverted-optionals-parallel-paths.js
@@ -0,0 +1,11 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.a.b?.c.d?.e);
+    x.push(props.a?.b.c?.d.e);
+    return x;
+  }, [props.a.b.c.d.e]);
+  return <ValidateMemoization inputs={[props.a.b.c.d.e]} output={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single-with-unconditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single-with-unconditional.expect.md
new file mode 100644
index 00000000000..5600df5683c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single-with-unconditional.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    x.push(props.items);
+    return x;
+  }, [props.items]);
+  return <ValidateMemoization inputs={[props.items]} output={data} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import { ValidateMemoization } from "shared-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let x;
+  if ($[0] !== props.items) {
+    x = [];
+    x.push(props?.items);
+    x.push(props.items);
+    $[0] = props.items;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  const data = x;
+  let t0;
+  if ($[2] !== props.items) {
+    t0 = [props.items];
+    $[2] = props.items;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  let t1;
+  if ($[4] !== data || $[5] !== t0) {
+    t1 = <ValidateMemoization inputs={t0} output={data} />;
+    $[4] = data;
+    $[5] = t0;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single-with-unconditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single-with-unconditional.js
new file mode 100644
index 00000000000..a3f8ba41bd8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single-with-unconditional.js
@@ -0,0 +1,11 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+function Component(props) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(props?.items);
+    x.push(props.items);
+    return x;
+  }, [props.items]);
+  return <ValidateMemoization inputs={[props.items]} output={data} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single.expect.md
new file mode 100644
index 00000000000..8e55da462ef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+function Component({arg}) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(arg?.items);
+    return x;
+  }, [arg?.items]);
+  return <ValidateMemoization inputs={[arg?.items]} output={data} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: {items: 2}}],
+  sequentialRenders: [
+    {arg: {items: 2}},
+    {arg: {items: 2}},
+    {arg: null},
+    {arg: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import { ValidateMemoization } from "shared-runtime";
+import { useMemo } from "react";
+function Component(t0) {
+  const $ = _c(7);
+  const { arg } = t0;
+
+  arg?.items;
+  let x;
+  if ($[0] !== arg?.items) {
+    x = [];
+    x.push(arg?.items);
+    $[0] = arg?.items;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  const data = x;
+  const t1 = arg?.items;
+  let t2;
+  if ($[2] !== t1) {
+    t2 = [t1];
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== data || $[5] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={data} />;
+    $[4] = data;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arg: { items: 2 } }],
+  sequentialRenders: [
+    { arg: { items: 2 } },
+    { arg: { items: 2 } },
+    { arg: null },
+    { arg: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[2],"output":[2]}</div>
+<div>{"inputs":[2],"output":[2]}</div>
+<div>{"inputs":[null],"output":[null]}</div>
+<div>{"inputs":[null],"output":[null]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single.js
new file mode 100644
index 00000000000..8f54a0edb51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/optional-member-expression-single.js
@@ -0,0 +1,22 @@
+// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enablePropagateDepsInHIR
+import {ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+function Component({arg}) {
+  const data = useMemo(() => {
+    const x = [];
+    x.push(arg?.items);
+    return x;
+  }, [arg?.items]);
+  return <ValidateMemoization inputs={[arg?.items]} output={data} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: {items: 2}}],
+  sequentialRenders: [
+    {arg: {items: 2}},
+    {arg: {items: 2}},
+    {arg: null},
+    {arg: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/partial-early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/partial-early-return-within-reactive-scope.expect.md
new file mode 100644
index 00000000000..1972e92237c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/partial-early-return-within-reactive-scope.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  let y = null;
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    y = foo();
+    if (props.b) {
+      return;
+    }
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  let y;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = foo();
+          $[5] = t1;
+        } else {
+          t1 = $[5];
+        }
+        y = t1;
+        if (props.b) {
+          t0 = undefined;
+          break bb0;
+        }
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+    $[4] = y;
+  } else {
+    t0 = $[3];
+    y = $[4];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, a: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/partial-early-return-within-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/partial-early-return-within-reactive-scope.js
new file mode 100644
index 00000000000..d54f650c36b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/partial-early-return-within-reactive-scope.js
@@ -0,0 +1,21 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  let y = null;
+  if (props.cond) {
+    x.push(props.a);
+    // oops no memo!
+    return x;
+  } else {
+    y = foo();
+    if (props.b) {
+      return;
+    }
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, a: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push-consecutive-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push-consecutive-phis.expect.md
new file mode 100644
index 00000000000..662f6c33f6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push-consecutive-phis.expect.md
@@ -0,0 +1,117 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    if (props.cond2) {
+      y = [props.value];
+    } else {
+      y = [props.value2];
+    }
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, cond2: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: true, value: 42},
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: true, cond2: false, value2: 42},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: false},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { makeArray } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if (
+    $[1] !== props.cond ||
+    $[2] !== props.cond2 ||
+    $[3] !== props.value ||
+    $[4] !== props.value2
+  ) {
+    let y;
+    if (props.cond) {
+      if (props.cond2) {
+        y = [props.value];
+      } else {
+        y = [props.value2];
+      }
+    } else {
+      y = [];
+    }
+    y.push(x);
+    t1 = [x, y];
+    $[1] = props.cond;
+    $[2] = props.cond2;
+    $[3] = props.value;
+    $[4] = props.value2;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, cond2: true, value: 42 }],
+  sequentialRenders: [
+    { cond: true, cond2: true, value: 3.14 },
+    { cond: true, cond2: true, value: 42 },
+    { cond: true, cond2: true, value: 3.14 },
+    { cond: true, cond2: false, value2: 3.14 },
+    { cond: true, cond2: false, value2: 42 },
+    { cond: true, cond2: false, value2: 3.14 },
+    { cond: false },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},[42,"[[ cyclic ref *1 ]]"]]
+[{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},[42,"[[ cyclic ref *1 ]]"]]
+[{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},["[[ cyclic ref *1 ]]"]]
+[{},["[[ cyclic ref *1 ]]"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push-consecutive-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push-consecutive-phis.js
new file mode 100644
index 00000000000..9173848b49b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push-consecutive-phis.js
@@ -0,0 +1,38 @@
+// @enablePropagateDepsInHIR
+import {makeArray} from 'shared-runtime';
+
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    if (props.cond2) {
+      y = [props.value];
+    } else {
+      y = [props.value2];
+    }
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, cond2: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: true, value: 42},
+    {cond: true, cond2: true, value: 3.14},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: true, cond2: false, value2: 42},
+    {cond: true, cond2: false, value2: 3.14},
+    {cond: false},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push.expect.md
new file mode 100644
index 00000000000..a9a07e97244
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = [props.value];
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, value: 3.14},
+    {cond: false, value: 3.14},
+    {cond: true, value: 42},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] !== props.cond || $[2] !== props.value) {
+    let y;
+    if (props.cond) {
+      y = [props.value];
+    } else {
+      y = [];
+    }
+    y.push(x);
+    t1 = [x, y];
+    $[1] = props.cond;
+    $[2] = props.value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, value: 42 }],
+  sequentialRenders: [
+    { cond: true, value: 3.14 },
+    { cond: false, value: 3.14 },
+    { cond: true, value: 42 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},[3.14,"[[ cyclic ref *1 ]]"]]
+[{},["[[ cyclic ref *1 ]]"]]
+[{},[42,"[[ cyclic ref *1 ]]"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push.js
new file mode 100644
index 00000000000..0b60f4e4431
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-array-push.js
@@ -0,0 +1,27 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = [props.value];
+  } else {
+    y = [];
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the array literals in the
+  // if/else branches
+  y.push(x);
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: 42}],
+  sequentialRenders: [
+    {cond: true, value: 3.14},
+    {cond: false, value: 3.14},
+    {cond: true, value: 42},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-property-store.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-property-store.expect.md
new file mode 100644
index 00000000000..fb2d28b0306
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-property-store.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @debug @enablePropagateDepsInHIR
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = {};
+  } else {
+    y = {a: props.a};
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the object literals in the
+  // if/else branches
+  y.x = x;
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, a: 'a!'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @debug @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  let t1;
+  if ($[1] !== props.a || $[2] !== props.cond) {
+    let y;
+    if (props.cond) {
+      y = {};
+    } else {
+      y = { a: props.a };
+    }
+    y.x = x;
+    t1 = [x, y];
+    $[1] = props.a;
+    $[2] = props.cond;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, a: "a!" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},{"a":"a!","x":"[[ cyclic ref *1 ]]"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-property-store.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-property-store.js
new file mode 100644
index 00000000000..3611da08d2f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/phi-type-inference-property-store.js
@@ -0,0 +1,22 @@
+// @debug @enablePropagateDepsInHIR
+function Component(props) {
+  const x = {};
+  let y;
+  if (props.cond) {
+    y = {};
+  } else {
+    y = {a: props.a};
+  }
+  // This should be inferred as `<store> y` s.t. `x` can still
+  // be independently memoized. *But* this also must properly
+  // extend the mutable range of the object literals in the
+  // if/else branches
+  y.x = x;
+
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, a: 'a!'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md
new file mode 100644
index 00000000000..9a524e6357a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  return props.post.feedback.comments?.edges?.map(render);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.post.feedback.comments?.edges) {
+    t0 = props.post.feedback.comments?.edges?.map(render);
+    $[0] = props.post.feedback.comments?.edges;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reactive-dependencies-non-optional-properties-inside-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reactive-dependencies-non-optional-properties-inside-optional-chain.js
new file mode 100644
index 00000000000..58ad2a210fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reactive-dependencies-non-optional-properties-inside-optional-chain.js
@@ -0,0 +1,4 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  return props.post.feedback.comments?.edges?.map(render);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/conditional-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/conditional-member-expr.expect.md
new file mode 100644
index 00000000000..f13bfe7d617
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/conditional-member-expr.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a` as a dependency (since `props.a.b` is
+// a conditional dependency, i.e. gated behind control flow)
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a` as a dependency (since `props.a.b` is
+// a conditional dependency, i.e. gated behind control flow)
+
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a?.b) {
+    x = [];
+    x.push(props.a?.b);
+    $[0] = props.a?.b;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: null }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/conditional-member-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/conditional-member-expr.js
new file mode 100644
index 00000000000..447665425e7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/conditional-member-expr.js
@@ -0,0 +1,15 @@
+// @enablePropagateDepsInHIR
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a` as a dependency (since `props.a.b` is
+// a conditional dependency, i.e. gated behind control flow)
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-local-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-local-var.expect.md
new file mode 100644
index 00000000000..673dd0d5fdf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-local-var.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {shallowCopy, mutate, Stringify} from 'shared-runtime';
+
+function useFoo({
+  a,
+  shouldReadA,
+}: {
+  a: {b: {c: number}; x: number};
+  shouldReadA: boolean;
+}) {
+  const local = shallowCopy(a);
+  mutate(local);
+  return (
+    <Stringify
+      fn={() => {
+        if (shouldReadA) return local.b.c;
+        return null;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { shallowCopy, mutate, Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(5);
+  const { a, shouldReadA } = t0;
+  let local;
+  if ($[0] !== a) {
+    local = shallowCopy(a);
+    mutate(local);
+    $[0] = a;
+    $[1] = local;
+  } else {
+    local = $[1];
+  }
+  let t1;
+  if ($[2] !== local || $[3] !== shouldReadA) {
+    t1 = (
+      <Stringify
+        fn={() => {
+          if (shouldReadA) {
+            return local.b.c;
+          }
+          return null;
+        }}
+        shouldInvokeFns={true}
+      />
+    );
+    $[2] = local;
+    $[3] = shouldReadA;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null, shouldReadA: true }],
+  sequentialRenders: [
+    { a: null, shouldReadA: true },
+    { a: null, shouldReadA: false },
+    { a: { b: { c: 4 } }, shouldReadA: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
+<div>{"fn":{"kind":"Function","result":null},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-local-var.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-local-var.tsx
new file mode 100644
index 00000000000..fdf22dc970b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-local-var.tsx
@@ -0,0 +1,33 @@
+// @enablePropagateDepsInHIR
+
+import {shallowCopy, mutate, Stringify} from 'shared-runtime';
+
+function useFoo({
+  a,
+  shouldReadA,
+}: {
+  a: {b: {c: number}; x: number};
+  shouldReadA: boolean;
+}) {
+  const local = shallowCopy(a);
+  mutate(local);
+  return (
+    <Stringify
+      fn={() => {
+        if (shouldReadA) return local.b.c;
+        return null;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-not-hoisted.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-not-hoisted.expect.md
new file mode 100644
index 00000000000..abf4c98f232
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-not-hoisted.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function Foo({a, shouldReadA}) {
+  return (
+    <Stringify
+      fn={() => {
+        if (shouldReadA) return a.b.c;
+        return null;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(3);
+  const { a, shouldReadA } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== shouldReadA) {
+    t1 = (
+      <Stringify
+        fn={() => {
+          if (shouldReadA) {
+            return a.b.c;
+          }
+          return null;
+        }}
+        shouldInvokeFns={true}
+      />
+    );
+    $[0] = a;
+    $[1] = shouldReadA;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ a: null, shouldReadA: true }],
+  sequentialRenders: [
+    { a: null, shouldReadA: true },
+    { a: null, shouldReadA: false },
+    { a: { b: { c: 4 } }, shouldReadA: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function","result":null},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-not-hoisted.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-not-hoisted.tsx
new file mode 100644
index 00000000000..5c71d57750c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-cond-access-not-hoisted.tsx
@@ -0,0 +1,25 @@
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function Foo({a, shouldReadA}) {
+  return (
+    <Stringify
+      fn={() => {
+        if (shouldReadA) return a.b.c;
+        return null;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoisted.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoisted.expect.md
new file mode 100644
index 00000000000..1ddc7495bc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoisted.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  return <Stringify fn={() => a.b.c} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a.b.c) {
+    t1 = <Stringify fn={() => a.b.c} shouldInvokeFns={true} />;
+    $[0] = a.b.c;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [{ a: null }, { a: { b: { c: 4 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoisted.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoisted.tsx
new file mode 100644
index 00000000000..9cc72a36d7e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoisted.tsx
@@ -0,0 +1,13 @@
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  return <Stringify fn={() => a.b.c} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoists-other-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoists-other-dep.expect.md
new file mode 100644
index 00000000000..d82956e4a0d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoists-other-dep.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {identity, makeArray, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({a, cond}) {
+  // Assume fn will be uncond evaluated, so we can safely evaluate {a.<any>,
+  // a.b.<any}
+  const fn = () => [a, a.b.c];
+  useIdentity(null);
+  const x = makeArray();
+  if (cond) {
+    x.push(identity(a.b.c));
+  }
+  return <Stringify fn={fn} x={x} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, cond: true}],
+  sequentialRenders: [
+    {a: null, cond: true},
+    {a: {b: {c: 4}}, cond: true},
+    {a: {b: {c: 4}}, cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { identity, makeArray, Stringify, useIdentity } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(8);
+  const { a, cond } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = () => [a, a.b.c];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const fn = t1;
+  useIdentity(null);
+  let x;
+  if ($[2] !== a.b.c || $[3] !== cond) {
+    x = makeArray();
+    if (cond) {
+      x.push(identity(a.b.c));
+    }
+    $[2] = a.b.c;
+    $[3] = cond;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  let t2;
+  if ($[5] !== fn || $[6] !== x) {
+    t2 = <Stringify fn={fn} x={x} shouldInvokeFns={true} />;
+    $[5] = fn;
+    $[6] = x;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ a: null, cond: true }],
+  sequentialRenders: [
+    { a: null, cond: true },
+    { a: { b: { c: 4 } }, cond: true },
+    { a: { b: { c: 4 } }, cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function","result":[{"b":{"c":4}},4]},"x":[4],"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":[{"b":{"c":4}},4]},"x":[4],"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoists-other-dep.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoists-other-dep.tsx
new file mode 100644
index 00000000000..a9956ed8a5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-hoists-other-dep.tsx
@@ -0,0 +1,25 @@
+// @enablePropagateDepsInHIR
+
+import {identity, makeArray, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({a, cond}) {
+  // Assume fn will be uncond evaluated, so we can safely evaluate {a.<any>,
+  // a.b.<any}
+  const fn = () => [a, a.b.c];
+  useIdentity(null);
+  const x = makeArray();
+  if (cond) {
+    x.push(identity(a.b.c));
+  }
+  return <Stringify fn={fn} x={x} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, cond: true}],
+  sequentialRenders: [
+    {a: null, cond: true},
+    {a: {b: {c: 4}}, cond: true},
+    {a: {b: {c: 4}}, cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.expect.md
new file mode 100644
index 00000000000..41bab7ccc9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {mutate, shallowCopy, Stringify} from 'shared-runtime';
+
+function useFoo({a}: {a: {b: {c: number}}}) {
+  const local = shallowCopy(a);
+  mutate(local);
+  const fn = () => local.b.c;
+  return <Stringify fn={fn} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { mutate, shallowCopy, Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(4);
+  const { a } = t0;
+  let local;
+  if ($[0] !== a) {
+    local = shallowCopy(a);
+    mutate(local);
+    $[0] = a;
+    $[1] = local;
+  } else {
+    local = $[1];
+  }
+  let t1;
+  if ($[2] !== local.b.c) {
+    const fn = () => local.b.c;
+    t1 = <Stringify fn={fn} shouldInvokeFns={true} />;
+    $[2] = local.b.c;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [{ a: null }, { a: { b: { c: 4 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.tsx
new file mode 100644
index 00000000000..16a0964351d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.tsx
@@ -0,0 +1,16 @@
+// @enablePropagateDepsInHIR
+
+import {mutate, shallowCopy, Stringify} from 'shared-runtime';
+
+function useFoo({a}: {a: {b: {c: number}}}) {
+  const local = shallowCopy(a);
+  mutate(local);
+  const fn = () => local.b.c;
+  return <Stringify fn={fn} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-optional-hoists-other-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-optional-hoists-other-dep.expect.md
new file mode 100644
index 00000000000..c81e59eceaf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-optional-hoists-other-dep.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {identity, makeArray, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({a, cond}) {
+  // Assume fn can be uncond evaluated, so we can safely evaluate a.b?.c.<any>
+  const fn = () => [a, a.b?.c.d];
+  useIdentity(null);
+  const arr = makeArray();
+  if (cond) {
+    arr.push(identity(a.b?.c.e));
+  }
+  return <Stringify fn={fn} arr={arr} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, cond: true}],
+  sequentialRenders: [
+    {a: null, cond: true},
+    {a: {b: {c: {d: 5}}}, cond: true},
+    {a: {b: null}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { identity, makeArray, Stringify, useIdentity } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(8);
+  const { a, cond } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = () => [a, a.b?.c.d];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const fn = t1;
+  useIdentity(null);
+  let arr;
+  if ($[2] !== a.b?.c.e || $[3] !== cond) {
+    arr = makeArray();
+    if (cond) {
+      arr.push(identity(a.b?.c.e));
+    }
+    $[2] = a.b?.c.e;
+    $[3] = cond;
+    $[4] = arr;
+  } else {
+    arr = $[4];
+  }
+  let t2;
+  if ($[5] !== arr || $[6] !== fn) {
+    t2 = <Stringify fn={fn} arr={arr} shouldInvokeFns={true} />;
+    $[5] = arr;
+    $[6] = fn;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ a: null, cond: true }],
+  sequentialRenders: [
+    { a: null, cond: true },
+    { a: { b: { c: { d: 5 } } }, cond: true },
+    { a: { b: null }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function","result":[{"b":{"c":{"d":5}}},5]},"arr":[null],"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":[{"b":null},null]},"arr":[],"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-optional-hoists-other-dep.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-optional-hoists-other-dep.tsx
new file mode 100644
index 00000000000..3b538de991d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-optional-hoists-other-dep.tsx
@@ -0,0 +1,24 @@
+// @enablePropagateDepsInHIR
+
+import {identity, makeArray, Stringify, useIdentity} from 'shared-runtime';
+
+function Foo({a, cond}) {
+  // Assume fn can be uncond evaluated, so we can safely evaluate a.b?.c.<any>
+  const fn = () => [a, a.b?.c.d];
+  useIdentity(null);
+  const arr = makeArray();
+  if (cond) {
+    arr.push(identity(a.b?.c.e));
+  }
+  return <Stringify fn={fn} arr={arr} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, cond: true}],
+  sequentialRenders: [
+    {a: null, cond: true},
+    {a: {b: {c: {d: 5}}}, cond: true},
+    {a: {b: null}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.expect.md
new file mode 100644
index 00000000000..8a090ef8966
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {shallowCopy, Stringify, mutate} from 'shared-runtime';
+
+function useFoo({a}: {a: {b: {c: number}}}) {
+  const local = shallowCopy(a);
+  mutate(local);
+  const fn = () => [() => local.b.c];
+  return <Stringify fn={fn} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { shallowCopy, Stringify, mutate } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(4);
+  const { a } = t0;
+  let local;
+  if ($[0] !== a) {
+    local = shallowCopy(a);
+    mutate(local);
+    $[0] = a;
+    $[1] = local;
+  } else {
+    local = $[1];
+  }
+  let t1;
+  if ($[2] !== local) {
+    const fn = () => [() => local.b.c];
+    t1 = <Stringify fn={fn} shouldInvokeFns={true} />;
+    $[2] = local;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [{ a: null }, { a: { b: { c: 4 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
+<div>{"fn":{"kind":"Function","result":[{"kind":"Function","result":4}]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.tsx
new file mode 100644
index 00000000000..d351a19464b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.tsx
@@ -0,0 +1,16 @@
+// @enablePropagateDepsInHIR
+
+import {shallowCopy, Stringify, mutate} from 'shared-runtime';
+
+function useFoo({a}: {a: {b: {c: number}}}) {
+  const local = shallowCopy(a);
+  mutate(local);
+  const fn = () => [() => local.b.c];
+  return <Stringify fn={fn} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.expect.md
new file mode 100644
index 00000000000..77f5ae4db3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  const fn = () => {
+    return () => ({
+      value: a.b.c,
+    });
+  };
+  return <Stringify fn={fn} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a.b.c) {
+    const fn = () => () => ({ value: a.b.c });
+    t1 = <Stringify fn={fn} shouldInvokeFns={true} />;
+    $[0] = a.b.c;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [{ a: null }, { a: { b: { c: 4 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function","result":{"kind":"Function","result":{"value":4}}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.tsx
new file mode 100644
index 00000000000..41d004a689d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.tsx
@@ -0,0 +1,18 @@
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  const fn = () => {
+    return () => ({
+      value: a.b.c,
+    });
+  };
+  return <Stringify fn={fn} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.expect.md
new file mode 100644
index 00000000000..c8b9a5dddb7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {identity, Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  const x = {
+    fn() {
+      return identity(a.b.c);
+    },
+  };
+  return <Stringify x={x} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { identity, Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a) {
+    const x = {
+      fn() {
+        return identity(a.b.c);
+      },
+    };
+    t1 = <Stringify x={x} shouldInvokeFns={true} />;
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [{ a: null }, { a: { b: { c: 4 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"x":{"fn":{"kind":"Function","result":4}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.tsx
new file mode 100644
index 00000000000..b05b482bd31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.tsx
@@ -0,0 +1,18 @@
+// @enablePropagateDepsInHIR
+
+import {identity, Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  const x = {
+    fn() {
+      return identity(a.b.c);
+    },
+  };
+  return <Stringify x={x} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [{a: null}, {a: {b: {c: 4}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-objectmethod-cond-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-objectmethod-cond-access.expect.md
new file mode 100644
index 00000000000..96d37cee8aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-objectmethod-cond-access.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {Stringify} from 'shared-runtime';
+
+function Foo({a, shouldReadA}) {
+  return (
+    <Stringify
+      objectMethod={{
+        method() {
+          if (shouldReadA) return a.b.c;
+          return null;
+        },
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(3);
+  const { a, shouldReadA } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== shouldReadA) {
+    t1 = (
+      <Stringify
+        objectMethod={{
+          method() {
+            if (shouldReadA) {
+              return a.b.c;
+            }
+            return null;
+          },
+        }}
+        shouldInvokeFns={true}
+      />
+    );
+    $[0] = a;
+    $[1] = shouldReadA;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ a: null, shouldReadA: true }],
+  sequentialRenders: [
+    { a: null, shouldReadA: true },
+    { a: null, shouldReadA: false },
+    { a: { b: { c: 4 } }, shouldReadA: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"objectMethod":{"method":{"kind":"Function","result":null}},"shouldInvokeFns":true}</div>
+<div>{"objectMethod":{"method":{"kind":"Function","result":4}},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-objectmethod-cond-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-objectmethod-cond-access.js
new file mode 100644
index 00000000000..2c8488bb292
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-objectmethod-cond-access.js
@@ -0,0 +1,26 @@
+// @enablePropagateDepsInHIR
+import {Stringify} from 'shared-runtime';
+
+function Foo({a, shouldReadA}) {
+  return (
+    <Stringify
+      objectMethod={{
+        method() {
+          if (shouldReadA) return a.b.c;
+          return null;
+        },
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md
new file mode 100644
index 00000000000..53dae3e6eeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+// This tests an optimization, NOT a correctness property.
+// When propagating reactive dependencies of an inner scope up to its parent,
+// we prefer to retain granularity.
+//
+// In this test, we check that Forget propagates the inner scope's conditional
+// dependencies (e.g. props.a.b) instead of only its derived minimal
+// unconditional dependencies (e.g. props).
+// ```javascript
+//  scope @0 (deps=[???] decls=[x, y]) {
+//    let y = {};
+//    scope @1 (deps=[props] decls=[x]) {
+//      let x = {};
+//      if (foo) mutate1(x, props.a.b);
+//    }
+//    mutate2(y, props.a.b);
+//  }
+
+import {CONST_TRUE, setProperty} from 'shared-runtime';
+
+function useJoinCondDepsInUncondScopes(props) {
+  let y = {};
+  let x = {};
+  if (CONST_TRUE) {
+    setProperty(x, props.a.b);
+  }
+  setProperty(y, props.a.b);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useJoinCondDepsInUncondScopes,
+  params: [{a: {b: 3}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+// This tests an optimization, NOT a correctness property.
+// When propagating reactive dependencies of an inner scope up to its parent,
+// we prefer to retain granularity.
+//
+// In this test, we check that Forget propagates the inner scope's conditional
+// dependencies (e.g. props.a.b) instead of only its derived minimal
+// unconditional dependencies (e.g. props).
+// ```javascript
+//  scope @0 (deps=[???] decls=[x, y]) {
+//    let y = {};
+//    scope @1 (deps=[props] decls=[x]) {
+//      let x = {};
+//      if (foo) mutate1(x, props.a.b);
+//    }
+//    mutate2(y, props.a.b);
+//  }
+
+import { CONST_TRUE, setProperty } from "shared-runtime";
+
+function useJoinCondDepsInUncondScopes(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.a.b) {
+    const y = {};
+    const x = {};
+    if (CONST_TRUE) {
+      setProperty(x, props.a.b);
+    }
+    setProperty(y, props.a.b);
+    t0 = [x, y];
+    $[0] = props.a.b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useJoinCondDepsInUncondScopes,
+  params: [{ a: { b: 3 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"wat0":3},{"wat0":3}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/join-uncond-scopes-cond-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/join-uncond-scopes-cond-deps.js
new file mode 100644
index 00000000000..950dbd187ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/join-uncond-scopes-cond-deps.js
@@ -0,0 +1,34 @@
+// @enablePropagateDepsInHIR
+// This tests an optimization, NOT a correctness property.
+// When propagating reactive dependencies of an inner scope up to its parent,
+// we prefer to retain granularity.
+//
+// In this test, we check that Forget propagates the inner scope's conditional
+// dependencies (e.g. props.a.b) instead of only its derived minimal
+// unconditional dependencies (e.g. props).
+// ```javascript
+//  scope @0 (deps=[???] decls=[x, y]) {
+//    let y = {};
+//    scope @1 (deps=[props] decls=[x]) {
+//      let x = {};
+//      if (foo) mutate1(x, props.a.b);
+//    }
+//    mutate2(y, props.a.b);
+//  }
+
+import {CONST_TRUE, setProperty} from 'shared-runtime';
+
+function useJoinCondDepsInUncondScopes(props) {
+  let y = {};
+  let x = {};
+  if (CONST_TRUE) {
+    setProperty(x, props.a.b);
+  }
+  setProperty(y, props.a.b);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useJoinCondDepsInUncondScopes,
+  params: [{a: {b: 3}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md
new file mode 100644
index 00000000000..a13a918a312
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a.b` or a subpath as a dependency.
+//
+// (1) Since the reactive block producing x unconditionally read props.a.<...>,
+//     reading `props.a.b` outside of the block would still preserve nullthrows
+//     semantics of source code
+// (2) Technically, props.a, props.a.b, and props.a.b.c are all reactive deps.
+//     However, `props.a?.b` is only dependent on whether `props.a` is nullish,
+//     not its actual value. Since we already preserve nullthrows on `props.a`,
+//     we technically do not need to add `props.a` as a dependency.
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  x.push(props.a.b.c);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {b: {c: 1}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a.b` or a subpath as a dependency.
+//
+// (1) Since the reactive block producing x unconditionally read props.a.<...>,
+//     reading `props.a.b` outside of the block would still preserve nullthrows
+//     semantics of source code
+// (2) Technically, props.a, props.a.b, and props.a.b.c are all reactive deps.
+//     However, `props.a?.b` is only dependent on whether `props.a` is nullish,
+//     not its actual value. Since we already preserve nullthrows on `props.a`,
+//     we technically do not need to add `props.a` as a dependency.
+
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a.b) {
+    x = [];
+    x.push(props.a?.b);
+    x.push(props.a.b.c);
+    $[0] = props.a.b;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { b: { c: 1 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"c":1},1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain.ts
new file mode 100644
index 00000000000..6f1d99761dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain.ts
@@ -0,0 +1,23 @@
+// @enablePropagateDepsInHIR
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a.b` or a subpath as a dependency.
+//
+// (1) Since the reactive block producing x unconditionally read props.a.<...>,
+//     reading `props.a.b` outside of the block would still preserve nullthrows
+//     semantics of source code
+// (2) Technically, props.a, props.a.b, and props.a.b.c are all reactive deps.
+//     However, `props.a?.b` is only dependent on whether `props.a` is nullish,
+//     not its actual value. Since we already preserve nullthrows on `props.a`,
+//     we technically do not need to add `props.a` as a dependency.
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  x.push(props.a.b.c);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {b: {c: 1}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md
new file mode 100644
index 00000000000..277c2035259
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  const x = [];
+  x.push(props.items?.length);
+  x.push(props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: {edges: null, length: 0}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.items?.edges || $[1] !== props.items?.length) {
+    x = [];
+    x.push(props.items?.length);
+    let t0;
+    if ($[3] !== props.items?.edges) {
+      t0 = props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? [];
+      $[3] = props.items?.edges;
+      $[4] = t0;
+    } else {
+      t0 = $[4];
+    }
+    x.push(t0);
+    $[0] = props.items?.edges;
+    $[1] = props.items?.length;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: { edges: null, length: 0 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain2.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain2.ts
new file mode 100644
index 00000000000..cc696e15d05
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/memberexpr-join-optional-chain2.ts
@@ -0,0 +1,12 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  const x = [];
+  x.push(props.items?.length);
+  x.push(props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: {edges: null, length: 0}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/merge-uncond-optional-chain-and-cond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/merge-uncond-optional-chain-and-cond.expect.md
new file mode 100644
index 00000000000..8703c30cb09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/merge-uncond-optional-chain-and-cond.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {identity} from 'shared-runtime';
+
+/**
+ * Very contrived text fixture showing that it's technically incorrect to merge
+ * a conditional dependency (e.g. dep.path in `cond ? dep.path : ...`) and an
+ * unconditionally evaluated optional chain (`dep?.path`).
+ *
+ *
+ * when screen is non-null, useFoo returns { title: null } or "(not null)"
+ * when screen is null, useFoo throws
+ */
+function useFoo({screen}: {screen: null | undefined | {title_text: null}}) {
+  return screen?.title_text != null
+    ? '(not null)'
+    : identity({title: screen.title_text});
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{screen: null}],
+  sequentialRenders: [{screen: {title_bar: undefined}}, {screen: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { identity } from "shared-runtime";
+
+/**
+ * Very contrived text fixture showing that it's technically incorrect to merge
+ * a conditional dependency (e.g. dep.path in `cond ? dep.path : ...`) and an
+ * unconditionally evaluated optional chain (`dep?.path`).
+ *
+ *
+ * when screen is non-null, useFoo returns { title: null } or "(not null)"
+ * when screen is null, useFoo throws
+ */
+function useFoo(t0) {
+  const $ = _c(2);
+  const { screen } = t0;
+  let t1;
+  if ($[0] !== screen) {
+    t1 =
+      screen?.title_text != null
+        ? "(not null)"
+        : identity({ title: screen.title_text });
+    $[0] = screen;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ screen: null }],
+  sequentialRenders: [{ screen: { title_bar: undefined } }, { screen: null }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'title_text') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/merge-uncond-optional-chain-and-cond.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/merge-uncond-optional-chain-and-cond.ts
new file mode 100644
index 00000000000..2275412d777
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/merge-uncond-optional-chain-and-cond.ts
@@ -0,0 +1,22 @@
+// @enablePropagateDepsInHIR
+import {identity} from 'shared-runtime';
+
+/**
+ * Very contrived text fixture showing that it's technically incorrect to merge
+ * a conditional dependency (e.g. dep.path in `cond ? dep.path : ...`) and an
+ * unconditionally evaluated optional chain (`dep?.path`).
+ *
+ *
+ * when screen is non-null, useFoo returns { title: null } or "(not null)"
+ * when screen is null, useFoo throws
+ */
+function useFoo({screen}: {screen: null | undefined | {title_text: null}}) {
+  return screen?.title_text != null
+    ? '(not null)'
+    : identity({title: screen.title_text});
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{screen: null}],
+  sequentialRenders: [{screen: {title_bar: undefined}}, {screen: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/promote-uncond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/promote-uncond.expect.md
new file mode 100644
index 00000000000..30cea1e2c8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/promote-uncond.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+// When a conditional dependency `props.a.b.c` has no unconditional dependency
+// in its subpath or superpath, we should find the nearest unconditional access
+
+import {identity} from 'shared-runtime';
+
+// and promote it to an unconditional dependency.
+function usePromoteUnconditionalAccessToDependency(props, other) {
+  const x = {};
+  x.a = props.a.a.a;
+  if (identity(other)) {
+    x.c = props.a.b.c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: usePromoteUnconditionalAccessToDependency,
+  params: [{a: {a: {a: 3}}}, false],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+// When a conditional dependency `props.a.b.c` has no unconditional dependency
+// in its subpath or superpath, we should find the nearest unconditional access
+
+import { identity } from "shared-runtime";
+
+// and promote it to an unconditional dependency.
+function usePromoteUnconditionalAccessToDependency(props, other) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== other || $[1] !== props.a.a.a || $[2] !== props.a.b) {
+    x = {};
+    x.a = props.a.a.a;
+    if (identity(other)) {
+      x.c = props.a.b.c;
+    }
+    $[0] = other;
+    $[1] = props.a.a.a;
+    $[2] = props.a.b;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: usePromoteUnconditionalAccessToDependency,
+  params: [{ a: { a: { a: 3 } } }, false],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/promote-uncond.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/promote-uncond.js
new file mode 100644
index 00000000000..ef585f19ea5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/promote-uncond.js
@@ -0,0 +1,20 @@
+// @enablePropagateDepsInHIR
+// When a conditional dependency `props.a.b.c` has no unconditional dependency
+// in its subpath or superpath, we should find the nearest unconditional access
+
+import {identity} from 'shared-runtime';
+
+// and promote it to an unconditional dependency.
+function usePromoteUnconditionalAccessToDependency(props, other) {
+  const x = {};
+  x.a = props.a.a.a;
+  if (identity(other)) {
+    x.c = props.a.b.c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: usePromoteUnconditionalAccessToDependency,
+  params: [{a: {a: {a: 3}}}, false],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.expect.md
new file mode 100644
index 00000000000..ed56ff06811
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  return <Stringify fn={() => a.b?.c.d?.e} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: {b: null}},
+    {a: {b: {c: {d: null}}}},
+    {a: {b: {c: {d: {e: 4}}}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+
+import { Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a.b?.c.d?.e) {
+    t1 = <Stringify fn={() => a.b?.c.d?.e} shouldInvokeFns={true} />;
+    $[0] = a.b?.c.d?.e;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [
+    { a: null },
+    { a: { b: null } },
+    { a: { b: { c: { d: null } } } },
+    { a: { b: { c: { d: { e: 4 } } } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.tsx
new file mode 100644
index 00000000000..4a2072131e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.tsx
@@ -0,0 +1,18 @@
+// @enablePropagateDepsInHIR
+
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  return <Stringify fn={() => a.b?.c.d?.e} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: {b: null}},
+    {a: {b: {c: {d: null}}}},
+    {a: {b: {c: {d: {e: 4}}}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-invariant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-invariant.expect.md
new file mode 100644
index 00000000000..73df2b615b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-invariant.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {Stringify} from 'shared-runtime';
+
+function Foo({data}) {
+  return (
+    <Stringify foo={() => data.a.d} bar={data.a?.b.c} shouldInvokeFns={true} />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{data: {a: null}}],
+  sequentialRenders: [{data: {a: {b: {c: 4}}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(5);
+  const { data } = t0;
+  let t1;
+  if ($[0] !== data.a.d) {
+    t1 = () => data.a.d;
+    $[0] = data.a.d;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = data.a?.b.c;
+  let t3;
+  if ($[2] !== t1 || $[3] !== t2) {
+    t3 = <Stringify foo={t1} bar={t2} shouldInvokeFns={true} />;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ data: { a: null } }],
+  sequentialRenders: [{ data: { a: { b: { c: 4 } } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"foo":{"kind":"Function"},"bar":4,"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-invariant.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-invariant.tsx
new file mode 100644
index 00000000000..05ed136d5f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-invariant.tsx
@@ -0,0 +1,14 @@
+// @enablePropagateDepsInHIR
+import {Stringify} from 'shared-runtime';
+
+function Foo({data}) {
+  return (
+    <Stringify foo={() => data.a.d} bar={data.a?.b.c} shouldInvokeFns={true} />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{data: {a: null}}],
+  sequentialRenders: [{data: {a: {b: {c: 4}}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-scope-missing-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-scope-missing-mutable-range.expect.md
new file mode 100644
index 00000000000..9d232d8e781
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-scope-missing-mutable-range.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function HomeDiscoStoreItemTileRating(props) {
+  const item = useFragment();
+  let count = 0;
+  const aggregates = item?.aggregates || [];
+  aggregates.forEach(aggregate => {
+    count += aggregate.count || 0;
+  });
+
+  return <Text>{count}</Text>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function HomeDiscoStoreItemTileRating(props) {
+  const $ = _c(4);
+  const item = useFragment();
+  let count;
+  if ($[0] !== item?.aggregates) {
+    count = 0;
+    const aggregates = item?.aggregates || [];
+    aggregates.forEach((aggregate) => {
+      count = count + (aggregate.count || 0);
+      count;
+    });
+    $[0] = item?.aggregates;
+    $[1] = count;
+  } else {
+    count = $[1];
+  }
+  let t0;
+  if ($[2] !== count) {
+    t0 = <Text>{count}</Text>;
+    $[2] = count;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-scope-missing-mutable-range.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-scope-missing-mutable-range.js
new file mode 100644
index 00000000000..71933018ccb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/repro-scope-missing-mutable-range.js
@@ -0,0 +1,11 @@
+// @enablePropagateDepsInHIR
+function HomeDiscoStoreItemTileRating(props) {
+  const item = useFragment();
+  let count = 0;
+  const aggregates = item?.aggregates || [];
+  aggregates.forEach(aggregate => {
+    count += aggregate.count || 0;
+  });
+
+  return <Text>{count}</Text>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-cascading-eliminated-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-cascading-eliminated-phis.expect.md
new file mode 100644
index 00000000000..6277ffbf404
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-cascading-eliminated-phis.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = 0;
+  const values = [];
+  const y = props.a || props.b;
+  values.push(y);
+  if (props.c) {
+    x = 1;
+  }
+  values.push(x);
+  if (props.d) {
+    x = 2;
+  }
+  values.push(x);
+  return values;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1, c: true, d: true}],
+  sequentialRenders: [
+    {a: 0, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: false, d: true},
+    {a: 4, b: 1, c: false, d: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(7);
+  let x = 0;
+  let values;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d ||
+    $[4] !== x
+  ) {
+    values = [];
+    const y = props.a || props.b;
+    values.push(y);
+    if (props.c) {
+      x = 1;
+    }
+
+    values.push(x);
+    if (props.d) {
+      x = 2;
+    }
+
+    values.push(x);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = x;
+    $[5] = values;
+    $[6] = x;
+  } else {
+    values = $[5];
+    x = $[6];
+  }
+  return values;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 1, c: true, d: true }],
+  sequentialRenders: [
+    { a: 0, b: 1, c: true, d: true },
+    { a: 4, b: 1, c: true, d: true },
+    { a: 4, b: 1, c: false, d: true },
+    { a: 4, b: 1, c: false, d: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,1,2]
+[4,1,2]
+[4,0,2]
+[4,0,0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-cascading-eliminated-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-cascading-eliminated-phis.js
new file mode 100644
index 00000000000..eb1dde9a9d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-cascading-eliminated-phis.js
@@ -0,0 +1,27 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = 0;
+  const values = [];
+  const y = props.a || props.b;
+  values.push(y);
+  if (props.c) {
+    x = 1;
+  }
+  values.push(x);
+  if (props.d) {
+    x = 2;
+  }
+  values.push(x);
+  return values;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1, c: true, d: true}],
+  sequentialRenders: [
+    {a: 0, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: false, d: true},
+    {a: 4, b: 1, c: false, d: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-leave-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-leave-case.expect.md
new file mode 100644
index 00000000000..2b3d6598d91
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-leave-case.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  let y;
+  if (props.p0) {
+    x.push(props.p1);
+    y = x;
+  }
+  return (
+    <Stringify>
+      {x}
+      {y}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{p0: false, p1: 2}],
+  sequentialRenders: [
+    {p0: false, p1: 2},
+    {p0: false, p1: 2},
+    {p0: true, p1: 2},
+    {p0: true, p1: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1) {
+    const x = [];
+    let y;
+    if (props.p0) {
+      x.push(props.p1);
+      y = x;
+    }
+    t0 = (
+      <Stringify>
+        {x}
+        {y}
+      </Stringify>
+    );
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ p0: false, p1: 2 }],
+  sequentialRenders: [
+    { p0: false, p1: 2 },
+    { p0: false, p1: 2 },
+    { p0: true, p1: 2 },
+    { p0: true, p1: 3 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[[],null]}</div>
+<div>{"children":[[],null]}</div>
+<div>{"children":[[2],"[[ cyclic ref *2 ]]"]}</div>
+<div>{"children":[[3],"[[ cyclic ref *2 ]]"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-leave-case.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-leave-case.js
new file mode 100644
index 00000000000..f13f66c590a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-leave-case.js
@@ -0,0 +1,28 @@
+// @enablePropagateDepsInHIR
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  let y;
+  if (props.p0) {
+    x.push(props.p1);
+    y = x;
+  }
+  return (
+    <Stringify>
+      {x}
+      {y}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{p0: false, p1: 2}],
+  sequentialRenders: [
+    {p0: false, p1: 2},
+    {p0: false, p1: 2},
+    {p0: true, p1: 2},
+    {p0: true, p1: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction-with-mutation.expect.md
new file mode 100644
index 00000000000..eb623477049
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction-with-mutation.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55,"joe"]
+[55,"joe"]
+[3,"joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction-with-mutation.js
new file mode 100644
index 00000000000..1ea8b35addd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction-with-mutation.js
@@ -0,0 +1,20 @@
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction.expect.md
new file mode 100644
index 00000000000..a737b180946
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function useFoo(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.cond || $[3] !== props.foo) {
+    props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
+    $[2] = props.cond;
+    $[3] = props.foo;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction.js
new file mode 100644
index 00000000000..2f37cdabb47
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-destruction.js
@@ -0,0 +1,17 @@
+// @enablePropagateDepsInHIR
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-with-mutation.expect.md
new file mode 100644
index 00000000000..6a2184712a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-with-mutation.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    props.cond ? ((x = []), x.push(props.foo)) : null;
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55,"joe"]
+[55,"joe"]
+[3,"joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-with-mutation.js
new file mode 100644
index 00000000000..a8fce441354
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary-with-mutation.js
@@ -0,0 +1,20 @@
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary.expect.md
new file mode 100644
index 00000000000..a6750238dc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function useFoo(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.cond || $[3] !== props.foo) {
+    props.cond ? ((x = []), x.push(props.foo)) : null;
+    $[2] = props.cond;
+    $[3] = props.foo;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary.js
new file mode 100644
index 00000000000..3cafcd9f0bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-ternary.js
@@ -0,0 +1,17 @@
+// @enablePropagateDepsInHIR
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary-with-mutation.expect.md
new file mode 100644
index 00000000000..062c7ac8fca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary-with-mutation.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {arrayPush} from 'shared-runtime';
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  arrayPush(x, 4);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { arrayPush } from "shared-runtime";
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar));
+    arrayPush(x, 4);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55,4]
+[55,4]
+[3,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary-with-mutation.js
new file mode 100644
index 00000000000..2b7134fa208
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary-with-mutation.js
@@ -0,0 +1,21 @@
+// @enablePropagateDepsInHIR
+import {arrayPush} from 'shared-runtime';
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  arrayPush(x, 4);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary.expect.md
new file mode 100644
index 00000000000..923830fb4b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function useFoo(props) {
+  const $ = _c(6);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.bar || $[3] !== props.cond || $[4] !== props.foo) {
+    props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar));
+    $[2] = props.bar;
+    $[3] = props.cond;
+    $[4] = props.foo;
+    $[5] = x;
+  } else {
+    x = $[5];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary.js
new file mode 100644
index 00000000000..d131c3bbc0a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-ternary.js
@@ -0,0 +1,19 @@
+// @enablePropagateDepsInHIR
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-with-mutation.expect.md
new file mode 100644
index 00000000000..1cb3cf2474b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-with-mutation.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  } else {
+    x = [];
+    x = [];
+    x.push(props.bar);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    if (props.cond) {
+      x = [];
+      x.push(props.foo);
+    } else {
+      x = [];
+      x.push(props.bar);
+    }
+
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ bar: "bar", foo: "foo", cond: true }],
+  sequentialRenders: [
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","joe"]
+["foo","joe"]
+["bar","joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-with-mutation.js
new file mode 100644
index 00000000000..99e28942268
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-unconditional-with-mutation.js
@@ -0,0 +1,28 @@
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  } else {
+    x = [];
+    x = [];
+    x.push(props.bar);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-via-destructuring-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-via-destructuring-with-mutation.expect.md
new file mode 100644
index 00000000000..42288dda642
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-via-destructuring-with-mutation.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let {x} = {x: []};
+  x.push(props.bar);
+  if (props.cond) {
+    ({x} = {x: {}});
+    ({x} = {x: []});
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    ({ x } = { x: [] });
+    x.push(props.bar);
+    if (props.cond) {
+      ({ x } = { x: [] });
+      x.push(props.foo);
+    }
+
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ bar: "bar", foo: "foo", cond: true }],
+  sequentialRenders: [
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","joe"]
+["foo","joe"]
+["bar","joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-via-destructuring-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-via-destructuring-with-mutation.js
new file mode 100644
index 00000000000..e83596e91b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-via-destructuring-with-mutation.js
@@ -0,0 +1,24 @@
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let {x} = {x: []};
+  x.push(props.bar);
+  if (props.cond) {
+    ({x} = {x: {}});
+    ({x} = {x: []});
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-with-mutation.expect.md
new file mode 100644
index 00000000000..bac466cd6e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-with-mutation.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    if (props.cond) {
+      x = [];
+      x.push(props.foo);
+    }
+
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ bar: "bar", foo: "foo", cond: true }],
+  sequentialRenders: [
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","joe"]
+["foo","joe"]
+["bar","joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-with-mutation.js
new file mode 100644
index 00000000000..ac7b8007d8c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/ssa-renaming-with-mutation.js
@@ -0,0 +1,24 @@
+// @enablePropagateDepsInHIR
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch-non-final-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch-non-final-default.expect.md
new file mode 100644
index 00000000000..ed00e248ede
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch-non-final-default.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case 1: {
+      break;
+    }
+    case true: {
+      x.push(props.p2);
+      y = [];
+    }
+    default: {
+      break;
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(8);
+  let t0;
+  let y;
+  if ($[0] !== props.p0 || $[1] !== props.p2) {
+    const x = [];
+    bb0: switch (props.p0) {
+      case 1: {
+        break bb0;
+      }
+      case true: {
+        x.push(props.p2);
+        let t1;
+        if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = [];
+          $[4] = t1;
+        } else {
+          t1 = $[4];
+        }
+        y = t1;
+      }
+      default: {
+        break bb0;
+      }
+      case false: {
+        y = x;
+      }
+    }
+    t0 = <Component data={x} />;
+    $[0] = props.p0;
+    $[1] = props.p2;
+    $[2] = t0;
+    $[3] = y;
+  } else {
+    t0 = $[2];
+    y = $[3];
+  }
+  const child = t0;
+  y.push(props.p4);
+  let t1;
+  if ($[5] !== child || $[6] !== y) {
+    t1 = <Component data={y}>{child}</Component>;
+    $[5] = child;
+    $[6] = y;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch-non-final-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch-non-final-default.js
new file mode 100644
index 00000000000..7a73d054d54
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch-non-final-default.js
@@ -0,0 +1,24 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case 1: {
+      break;
+    }
+    case true: {
+      x.push(props.p2);
+      y = [];
+    }
+    default: {
+      break;
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch.expect.md
new file mode 100644
index 00000000000..77661de5f07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case true: {
+      x.push(props.p2);
+      x.push(props.p3);
+      y = [];
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function Component(props) {
+  const $ = _c(8);
+  let t0;
+  let y;
+  if ($[0] !== props.p0 || $[1] !== props.p2 || $[2] !== props.p3) {
+    const x = [];
+    switch (props.p0) {
+      case true: {
+        x.push(props.p2);
+        x.push(props.p3);
+      }
+      case false: {
+        y = x;
+      }
+    }
+    t0 = <Component data={x} />;
+    $[0] = props.p0;
+    $[1] = props.p2;
+    $[2] = props.p3;
+    $[3] = t0;
+    $[4] = y;
+  } else {
+    t0 = $[3];
+    y = $[4];
+  }
+  const child = t0;
+  y.push(props.p4);
+  let t1;
+  if ($[5] !== child || $[6] !== y) {
+    t1 = <Component data={y}>{child}</Component>;
+    $[5] = child;
+    $[6] = y;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch.js
new file mode 100644
index 00000000000..187fffd39ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/switch.js
@@ -0,0 +1,19 @@
+// @enablePropagateDepsInHIR
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case true: {
+      x.push(props.p2);
+      x.push(props.p3);
+      y = [];
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-maybe-null-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-maybe-null-dependency.expect.md
new file mode 100644
index 00000000000..cd2c4eb9dfd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-maybe-null-dependency.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+import {identity} from 'shared-runtime';
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject: {value: {inner: number}} | null) {
+  const y = [];
+  try {
+    y.push(identity(maybeNullObject.value.inner));
+  } catch {
+    y.push('null');
+  }
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [null],
+  sequentialRenders: [null, {value: 2}, {value: 3}, null],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+import { identity } from "shared-runtime";
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject) {
+  const $ = _c(4);
+  let y;
+  if ($[0] !== maybeNullObject) {
+    y = [];
+    try {
+      let t0;
+      if ($[2] !== maybeNullObject.value.inner) {
+        t0 = identity(maybeNullObject.value.inner);
+        $[2] = maybeNullObject.value.inner;
+        $[3] = t0;
+      } else {
+        t0 = $[3];
+      }
+      y.push(t0);
+    } catch {
+      y.push("null");
+    }
+    $[0] = maybeNullObject;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [null],
+  sequentialRenders: [null, { value: 2 }, { value: 3 }, null],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["null"]
+[null]
+[null]
+["null"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-maybe-null-dependency.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-maybe-null-dependency.ts
new file mode 100644
index 00000000000..bdbd9031172
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-maybe-null-dependency.ts
@@ -0,0 +1,23 @@
+// @enablePropagateDepsInHIR
+import {identity} from 'shared-runtime';
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject: {value: {inner: number}} | null) {
+  const y = [];
+  try {
+    y.push(identity(maybeNullObject.value.inner));
+  } catch {
+    y.push('null');
+  }
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [null],
+  sequentialRenders: [null, {value: 2}, {value: 3}, null],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md
new file mode 100644
index 00000000000..4fef6820554
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+const {shallowCopy, throwErrorWithMessage} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  try {
+    x.push(throwErrorWithMessage('oops'));
+  } catch {
+    x.push(shallowCopy({a: props.a}));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+const { shallowCopy, throwErrorWithMessage } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props) {
+    x = [];
+    try {
+      let t0;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = throwErrorWithMessage("oops");
+        $[2] = t0;
+      } else {
+        t0 = $[2];
+      }
+      x.push(t0);
+    } catch {
+      let t0;
+      if ($[3] !== props.a) {
+        t0 = shallowCopy({ a: props.a });
+        $[3] = props.a;
+        $[4] = t0;
+      } else {
+        t0 = $[4];
+      }
+      x.push(t0);
+    }
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":1}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.js
new file mode 100644
index 00000000000..97e4250b227
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.js
@@ -0,0 +1,17 @@
+// @enablePropagateDepsInHIR
+const {shallowCopy, throwErrorWithMessage} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  try {
+    x.push(throwErrorWithMessage('oops'));
+  } catch {
+    x.push(shallowCopy({a: props.a}));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch-escaping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch-escaping.expect.md
new file mode 100644
index 00000000000..5cd81990e86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch-escaping.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+const { throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== props.e || $[1] !== props.y) {
+    try {
+      const y = [];
+      y.push(props.y);
+      throwInput(y);
+    } catch (t0) {
+      const e = t0;
+      e.push(props.e);
+      x = e;
+    }
+    $[0] = props.e;
+    $[1] = props.y;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: "foo", e: "bar" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","bar"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch-escaping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch-escaping.js
new file mode 100644
index 00000000000..5a0864118ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch-escaping.js
@@ -0,0 +1,20 @@
+// @enablePropagateDepsInHIR
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch.expect.md
new file mode 100644
index 00000000000..dc41af62750
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    return e;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+const { throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.e || $[1] !== props.y) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      try {
+        const y = [];
+        y.push(props.y);
+        throwInput(y);
+      } catch (t1) {
+        const e = t1;
+        e.push(props.e);
+        t0 = e;
+        break bb0;
+      }
+    }
+    $[0] = props.e;
+    $[1] = props.y;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: "foo", e: "bar" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","bar"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch.js
new file mode 100644
index 00000000000..97d650453c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-try-value-modified-in-catch.js
@@ -0,0 +1,19 @@
+// @enablePropagateDepsInHIR
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    return e;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.expect.md
new file mode 100644
index 00000000000..bd8c1b994e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component(props) {
+  const x = useMemo(() => {
+    let y = [];
+    if (props.cond) {
+      y.push(props.a);
+    }
+    if (props.cond2) {
+      return y;
+    }
+    y.push(props.b);
+    return y;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2, cond2: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.cond ||
+    $[3] !== props.cond2
+  ) {
+    bb0: {
+      const y = [];
+      if (props.cond) {
+        y.push(props.a);
+      }
+
+      if (props.cond2) {
+        t0 = y;
+        break bb0;
+      }
+
+      y.push(props.b);
+      t0 = y;
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = props.cond2;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 2, cond2: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.js
new file mode 100644
index 00000000000..81794651893
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.js
@@ -0,0 +1,22 @@
+// @enablePropagateDepsInHIR @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component(props) {
+  const x = useMemo(() => {
+    let y = [];
+    if (props.cond) {
+      y.push(props.a);
+    }
+    if (props.cond2) {
+      return y;
+    }
+    y.push(props.b);
+    return y;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2, cond2: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md
new file mode 100644
index 00000000000..523b5b29bd8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  const y = [];
+  x.y = y;
+  const child = <Component data={y} />;
+  x.y.push(props.p0);
+  return <Component data={x}>{child}</Component>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.p0) {
+    const x = {};
+    const y = [];
+    x.y = y;
+    const child = <Component data={y} />;
+    x.y.push(props.p0);
+    t0 = <Component data={x}>{child}</Component>;
+    $[0] = props.p0;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.js
new file mode 100644
index 00000000000..41a03fd6313
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.js
@@ -0,0 +1,8 @@
+function Component(props) {
+  const x = {};
+  const y = [];
+  x.y = y;
+  const child = <Component data={y} />;
+  x.y.push(props.p0);
+  return <Component data={x}>{child}</Component>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md
new file mode 100644
index 00000000000..4061ae5c82a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// Should print A, arg, original
+
+function Component() {
+  const changeF = o => {
+    o.f = () => console.log('new');
+  };
+  const x = {
+    f: () => console.log('original'),
+  };
+
+  (console.log('A'), x).f((changeF(x), console.log('arg'), 1));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Should print A, arg, original
+
+function Component() {
+  const $ = _c(1);
+  const changeF = _temp2;
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = { f: _temp3 };
+
+    (console.log("A"), x).f((changeF(x), console.log("arg"), 1));
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+function _temp3() {
+  return console.log("original");
+}
+function _temp2(o) {
+  o.f = _temp;
+}
+function _temp() {
+  return console.log("new");
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"f":"[[ function params=0 ]]"}
+logs: ['A','arg','original']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.js
new file mode 100644
index 00000000000..fe8f0fd59c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.js
@@ -0,0 +1,19 @@
+// Should print A, arg, original
+
+function Component() {
+  const changeF = o => {
+    o.f = () => console.log('new');
+  };
+  const x = {
+    f: () => console.log('original'),
+  };
+
+  (console.log('A'), x).f((changeF(x), console.log('arg'), 1));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-spread.expect.md
new file mode 100644
index 00000000000..bc226b22577
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-spread.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = foo.bar(...props.a, null, ...props.b);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    t0 = foo.bar(...props.a, null, ...props.b);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-spread.js
new file mode 100644
index 00000000000..fb439164f9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-spread.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = foo.bar(...props.a, null, ...props.b);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.expect.md
new file mode 100644
index 00000000000..b84e6e44eab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const x = useMemo(() => props.x(), [props.x]);
+  return <ValidateMemoization inputs={[props.x]} output={x} />;
+}
+
+const f = () => ['React'];
+const g = () => ['Compiler'];
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: () => ['React']}],
+  sequentialRenders: [{x: f}, {x: g}, {x: g}, {x: f}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(7);
+  let t0;
+  if ($[0] !== props.x) {
+    t0 = props.x();
+    $[0] = props.x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== props.x) {
+    t1 = [props.x];
+    $[2] = props.x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== t1 || $[5] !== x) {
+    t2 = <ValidateMemoization inputs={t1} output={x} />;
+    $[4] = t1;
+    $[5] = x;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+const f = () => ["React"];
+const g = () => ["Compiler"];
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: () => ["React"] }],
+  sequentialRenders: [{ x: f }, { x: g }, { x: g }, { x: f }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":["[[ function params=0 ]]"],"output":["React"]}</div>
+<div>{"inputs":["[[ function params=0 ]]"],"output":["Compiler"]}</div>
+<div>{"inputs":["[[ function params=0 ]]"],"output":["Compiler"]}</div>
+<div>{"inputs":["[[ function params=0 ]]"],"output":["React"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.js
new file mode 100644
index 00000000000..5882e3cc6e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.js
@@ -0,0 +1,16 @@
+// @compilationMode:"infer"
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component(props) {
+  const x = useMemo(() => props.x(), [props.x]);
+  return <ValidateMemoization inputs={[props.x]} output={x} />;
+}
+
+const f = () => ['React'];
+const g = () => ['Compiler'];
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: () => ['React']}],
+  sequentialRenders: [{x: f}, {x: g}, {x: g}, {x: f}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md
new file mode 100644
index 00000000000..3106ea7fc82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = [];
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.push(props.value);
+
+  const y = [x];
+
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useHook } from "shared-runtime";
+
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+
+  const y = [x];
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[["sathya"]]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.js
new file mode 100644
index 00000000000..97ade196d33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.js
@@ -0,0 +1,16 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = [];
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.push(props.value);
+
+  const y = [x];
+
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md
new file mode 100644
index 00000000000..34c1400ec15
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const o = {};
+  const x = <div>{props.value}</div>; // create within the range of x to group with x
+  useHook(); // intersperse a hook call to prevent memoization of x
+  o.value = props.value;
+
+  const y = <div>{x}</div>;
+
+  return <div>{y}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useHook } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  const o = {};
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = <div>{props.value}</div>;
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  useHook();
+  o.value = props.value;
+  let t1;
+  if ($[2] !== x) {
+    const y = <div>{x}</div>;
+    t1 = <div>{y}</div>;
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div><div>sathya</div></div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.js
new file mode 100644
index 00000000000..aa767d5db14
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.js
@@ -0,0 +1,17 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const o = {};
+  const x = <div>{props.value}</div>; // create within the range of x to group with x
+  useHook(); // intersperse a hook call to prevent memoization of x
+  o.value = props.value;
+
+  const y = <div>{x}</div>;
+
+  return <div>{y}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md
new file mode 100644
index 00000000000..c035d4ef203
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = new Foo();
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.value = props.value;
+
+  const y = {x};
+
+  return {y};
+}
+
+class Foo {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useHook } from "shared-runtime";
+
+function Component(props) {
+  const x = new Foo();
+  useHook();
+  x.value = props.value;
+
+  const y = { x };
+  return { y };
+}
+
+class Foo {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":{"x":{"value":"sathya"}}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.js
new file mode 100644
index 00000000000..49e8ba3f4a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.js
@@ -0,0 +1,18 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = new Foo();
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.value = props.value;
+
+  const y = {x};
+
+  return {y};
+}
+
+class Foo {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md
new file mode 100644
index 00000000000..057fd520da1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = {};
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.value = props.value;
+
+  const y = {x};
+
+  return {y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useHook } from "shared-runtime";
+
+function Component(props) {
+  const x = {};
+  useHook();
+  x.value = props.value;
+
+  const y = { x };
+  return { y };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":{"x":{"value":"sathya"}}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.js
new file mode 100644
index 00000000000..c0072548b76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.js
@@ -0,0 +1,16 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const x = {};
+  useHook(); // intersperse a hook call to prevent memoization of x
+  x.value = props.value;
+
+  const y = {x};
+
+  return {y};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md
new file mode 100644
index 00000000000..7db6242783c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {useHook, identity} from 'shared-runtime';
+
+function Component(props) {
+  let x = 42;
+  if (props.cond) {
+    x = [];
+  }
+  useHook(); // intersperse a hook call to prevent memoization of x
+  identity(x);
+
+  const y = [x];
+
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useHook, identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let x = 42;
+  if (props.cond) {
+    x = [];
+  }
+
+  useHook();
+  identity(x);
+  let t0;
+  if ($[0] !== x) {
+    const y = [x];
+    t0 = [y];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[42]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.js
new file mode 100644
index 00000000000..2edafc3751b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.js
@@ -0,0 +1,19 @@
+import {useHook, identity} from 'shared-runtime';
+
+function Component(props) {
+  let x = 42;
+  if (props.cond) {
+    x = [];
+  }
+  useHook(); // intersperse a hook call to prevent memoization of x
+  identity(x);
+
+  const y = [x];
+
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute-escaped.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute-escaped.expect.md
new file mode 100644
index 00000000000..4dc3cae0061
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute-escaped.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+export function Component() {
+  return <Child text='Some \"text\"' />;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Child text={'Some \\"text\\"'} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Some \"text\"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute-escaped.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute-escaped.js
new file mode 100644
index 00000000000..8f1592217e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute-escaped.js
@@ -0,0 +1,12 @@
+export function Component() {
+  return <Child text='Some \"text\"' />;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute.expect.md
new file mode 100644
index 00000000000..490c3bc8c85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+export function Component() {
+  return <Child text='Some "text"' />;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Child text={'Some "text"'} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Some "text"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute.js
new file mode 100644
index 00000000000..341b02e0c27
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-in-jsx-attribute.js
@@ -0,0 +1,12 @@
+export function Component() {
+  return <Child text='Some "text"' />;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-jsx-attribute-escaped-constant-propagation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-jsx-attribute-escaped-constant-propagation.expect.md
new file mode 100644
index 00000000000..7d8fbdb0e58
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-jsx-attribute-escaped-constant-propagation.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+export function Component() {
+  // Test what happens if a string with double-quotes is interpolated via constant propagation
+  const text = 'Some "text"';
+  return <Child text={text} />;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Child text={'Some "text"'} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Some "text"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-jsx-attribute-escaped-constant-propagation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-jsx-attribute-escaped-constant-propagation.js
new file mode 100644
index 00000000000..ceb81cd29ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/quoted-strings-jsx-attribute-escaped-constant-propagation.js
@@ -0,0 +1,14 @@
+export function Component() {
+  // Test what happens if a string with double-quotes is interpolated via constant propagation
+  const text = 'Some "text"';
+  return <Child text={text} />;
+}
+
+function Child(props) {
+  return props.text;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md
new file mode 100644
index 00000000000..5deb18397d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+const FooContext = React.createContext({current: null});
+
+function Component(props) {
+  const foo = React.useContext(FooContext);
+  const ref = React.useRef();
+  const [x, setX] = React.useState(false);
+  const onClick = () => {
+    setX(true);
+    ref.current = true;
+  };
+  return <div onClick={onClick}>{React.cloneElement(props.children)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const FooContext = React.createContext({ current: null });
+
+function Component(props) {
+  const $ = _c(5);
+  React.useContext(FooContext);
+  const ref = React.useRef();
+  const [, setX] = React.useState(false);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setX(true);
+      ref.current = true;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] !== props.children) {
+    t1 = React.cloneElement(props.children);
+    $[1] = props.children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t1) {
+    t2 = <div onClick={onClick}>{t1}</div>;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ children: <div>Hello</div> }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>Hello</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.js
new file mode 100644
index 00000000000..beb1c22badf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.js
@@ -0,0 +1,17 @@
+const FooContext = React.createContext({current: null});
+
+function Component(props) {
+  const foo = React.useContext(FooContext);
+  const ref = React.useRef();
+  const [x, setX] = React.useState(false);
+  const onClick = () => {
+    setX(true);
+    ref.current = true;
+  };
+  return <div onClick={onClick}>{React.cloneElement(props.children)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-indirect.expect.md
new file mode 100644
index 00000000000..fcf78721a06
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-indirect.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  let y = 0;
+  let z = 0;
+  do {
+    x += 1;
+    y += 1;
+    z = y;
+  } while (x < props.limit);
+  return [z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {limit: 10},
+    {limit: 10},
+    {limit: 1},
+    {limit: 1},
+    {limit: 10},
+    {limit: 1},
+    {limit: 10},
+    {limit: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x = 0;
+  let y = 0;
+  let z;
+  do {
+    x = x + 1;
+    y = y + 1;
+    z = y;
+  } while (x < props.limit);
+  let t0;
+  if ($[0] !== z) {
+    t0 = [z];
+    $[0] = z;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { limit: 10 },
+    { limit: 10 },
+    { limit: 1 },
+    { limit: 1 },
+    { limit: 10 },
+    { limit: 1 },
+    { limit: 10 },
+    { limit: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [10]
+[10]
+[1]
+[1]
+[10]
+[1]
+[10]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-indirect.js
new file mode 100644
index 00000000000..ce1329c00d4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-indirect.js
@@ -0,0 +1,26 @@
+function Component(props) {
+  let x = 0;
+  let y = 0;
+  let z = 0;
+  do {
+    x += 1;
+    y += 1;
+    z = y;
+  } while (x < props.limit);
+  return [z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {limit: 10},
+    {limit: 10},
+    {limit: 1},
+    {limit: 1},
+    {limit: 10},
+    {limit: 1},
+    {limit: 10},
+    {limit: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md
new file mode 100644
index 00000000000..8cc8ce69f09
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md
@@ -0,0 +1,93 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  let i = 0;
+  do {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+    i++;
+  } while (i < props.test);
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is affected by
+  // `props.test` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {test: 12},
+    {test: 12},
+    {test: 1},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  let i = 0;
+  do {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+
+    i++;
+  } while (i < props.test);
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { test: 12 },
+    { test: 12 },
+    { test: 1 },
+    { test: 1 },
+    { test: 12 },
+    { test: 1 },
+    { test: 12 },
+    { test: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [10]
+[10]
+[1]
+[1]
+[10]
+[1]
+[10]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.js
new file mode 100644
index 00000000000..52ad55c38ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.js
@@ -0,0 +1,32 @@
+function Component(props) {
+  let x;
+  let i = 0;
+  do {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+    i++;
+  } while (i < props.test);
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is affected by
+  // `props.test` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {test: 12},
+    {test: 12},
+    {test: 1},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-init.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-init.expect.md
new file mode 100644
index 00000000000..0f2a2869b71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-init.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  for (let i = props.init; i < 10; i++) {
+    if (i === 0) {
+      x = 0;
+      break;
+    } else {
+      x = 1;
+      break;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose initial value `props.init` is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {init: 0},
+    {init: 0},
+    {init: 10},
+    {init: 10},
+    {init: 0},
+    {init: 10},
+    {init: 0},
+    {init: 10},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  for (const i = props.init; i < 10; ) {
+    if (i === 0) {
+      x = 0;
+      break;
+    } else {
+      x = 1;
+      break;
+    }
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { init: 0 },
+    { init: 0 },
+    { init: 10 },
+    { init: 10 },
+    { init: 0 },
+    { init: 10 },
+    { init: 0 },
+    { init: 10 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0]
+[0]
+[null]
+[null]
+[0]
+[null]
+[0]
+[null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-init.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-init.js
new file mode 100644
index 00000000000..13d54ef8ca7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-init.js
@@ -0,0 +1,31 @@
+function Component(props) {
+  let x;
+  for (let i = props.init; i < 10; i++) {
+    if (i === 0) {
+      x = 0;
+      break;
+    } else {
+      x = 1;
+      break;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose initial value `props.init` is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {init: 0},
+    {init: 0},
+    {init: 10},
+    {init: 10},
+    {init: 0},
+    {init: 10},
+    {init: 0},
+    {init: 10},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-test.expect.md
new file mode 100644
index 00000000000..d7c5a82873c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-test.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  for (let i = 0; i < props.test; i++) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is capped by
+  // `props.test` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {test: 12},
+    {test: 12},
+    {test: 1},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  for (let i = 0; i < props.test; i++) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { test: 12 },
+    { test: 12 },
+    { test: 1 },
+    { test: 1 },
+    { test: 12 },
+    { test: 1 },
+    { test: 12 },
+    { test: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [10]
+[10]
+[1]
+[1]
+[10]
+[1]
+[10]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-test.js
new file mode 100644
index 00000000000..fb72e008e3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-test.js
@@ -0,0 +1,30 @@
+function Component(props) {
+  let x;
+  for (let i = 0; i < props.test; i++) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is capped by
+  // `props.test` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {test: 12},
+    {test: 12},
+    {test: 1},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-update.expect.md
new file mode 100644
index 00000000000..a59893fe96d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-update.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  for (let i = 0; i < 10; i += props.update) {
+    if (i > 0 && i % 2 === 0) {
+      x = 2;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose possible values are
+  // affected by `props.update` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {update: 2},
+    {update: 2},
+    {update: 1},
+    {update: 1},
+    {update: 2},
+    {update: 1},
+    {update: 2},
+    {update: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  for (let i = 0; i < 10; i = i + props.update, i) {
+    if (i > 0 && i % 2 === 0) {
+      x = 2;
+    } else {
+      x = 1;
+    }
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { update: 2 },
+    { update: 2 },
+    { update: 1 },
+    { update: 1 },
+    { update: 2 },
+    { update: 1 },
+    { update: 2 },
+    { update: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[2]
+[1]
+[1]
+[2]
+[1]
+[2]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-update.js
new file mode 100644
index 00000000000..8d4ab093389
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-for-update.js
@@ -0,0 +1,30 @@
+function Component(props) {
+  let x;
+  for (let i = 0; i < 10; i += props.update) {
+    if (i > 0 && i % 2 === 0) {
+      x = 2;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose possible values are
+  // affected by `props.update` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {update: 2},
+    {update: 2},
+    {update: 1},
+    {update: 1},
+    {update: 2},
+    {update: 1},
+    {update: 2},
+    {update: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forin-collection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forin-collection.expect.md
new file mode 100644
index 00000000000..4d15f3f700e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forin-collection.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  for (const key in props.values) {
+    const i = parseInt(key, 10);
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is derived from
+  // `props.values` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {values: {'12': true}},
+    {values: {'12': true}},
+    {values: {'1': true}},
+    {values: {'1': true}},
+    {values: {'12': true}},
+    {values: {'1': true}},
+    {values: {'12': true}},
+    {values: {'1': true}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  for (const key in props.values) {
+    const i = parseInt(key, 10);
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { values: { "12": true } },
+    { values: { "12": true } },
+    { values: { "1": true } },
+    { values: { "1": true } },
+    { values: { "12": true } },
+    { values: { "1": true } },
+    { values: { "12": true } },
+    { values: { "1": true } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [10]
+[10]
+[1]
+[1]
+[10]
+[1]
+[10]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forin-collection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forin-collection.js
new file mode 100644
index 00000000000..60efa406bed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forin-collection.js
@@ -0,0 +1,31 @@
+function Component(props) {
+  let x;
+  for (const key in props.values) {
+    const i = parseInt(key, 10);
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is derived from
+  // `props.values` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {values: {'12': true}},
+    {values: {'12': true}},
+    {values: {'1': true}},
+    {values: {'1': true}},
+    {values: {'12': true}},
+    {values: {'1': true}},
+    {values: {'12': true}},
+    {values: {'1': true}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forof-collection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forof-collection.expect.md
new file mode 100644
index 00000000000..d2b56a454ef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forof-collection.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  for (const i of props.values) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is derived from
+  // `props.values` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {values: [12]},
+    {values: [12]},
+    {values: [1]},
+    {values: [1]},
+    {values: [12]},
+    {values: [1]},
+    {values: [12]},
+    {values: [1]},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  for (const i of props.values) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { values: [12] },
+    { values: [12] },
+    { values: [1] },
+    { values: [1] },
+    { values: [12] },
+    { values: [1] },
+    { values: [12] },
+    { values: [1] },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [10]
+[10]
+[1]
+[1]
+[10]
+[1]
+[10]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forof-collection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forof-collection.js
new file mode 100644
index 00000000000..ada4db74f0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-forof-collection.js
@@ -0,0 +1,30 @@
+function Component(props) {
+  let x;
+  for (const i of props.values) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is derived from
+  // `props.values` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {values: [12]},
+    {values: [12]},
+    {values: [1]},
+    {values: [1]},
+    {values: [12]},
+    {values: [1]},
+    {values: [12]},
+    {values: [1]},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-do-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-do-while.expect.md
new file mode 100644
index 00000000000..92eaa0df391
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-do-while.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(false);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x = 0;
+  do {
+    x += 1;
+  } while (c[0][0]);
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(false);
+
+  const c = [a];
+
+  let x = 0;
+  do {
+    x = x + 1;
+  } while (c[0][0]);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-do-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-do-while.js
new file mode 100644
index 00000000000..acbf3aeb3d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-do-while.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(false);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x = 0;
+  do {
+    x += 1;
+  } while (c[0][0]);
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md
new file mode 100644
index 00000000000..0f25437f23f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push({a: false});
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (const i in c[0][0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push({ a: false });
+
+  const c = [a];
+
+  let x;
+  for (const i in c[0][0]) {
+    x = 1;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.js
new file mode 100644
index 00000000000..bb07b8e4897
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push({a: false});
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (const i in c[0][0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md
new file mode 100644
index 00000000000..a02bbfd7c8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(0);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (let i = c[0][0]; i < 10; i++) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(0);
+
+  const c = [a];
+
+  let x;
+  for (let i = c[0][0]; i < 10; i++) {
+    x = 1;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.js
new file mode 100644
index 00000000000..dbb4b87c99b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(0);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (let i = c[0][0]; i < 10; i++) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md
new file mode 100644
index 00000000000..ef3595ce2f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (const i of c[0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  const c = [a];
+
+  let x;
+  for (const i of c[0]) {
+    x = 1;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.js
new file mode 100644
index 00000000000..0aec823804e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (const i of c[0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md
new file mode 100644
index 00000000000..d5ebb126216
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(10);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (let i = 0; i < c[0][0]; i++) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(10);
+
+  const c = [a];
+
+  let x;
+  for (let i = 0; i < c[0][0]; i++) {
+    x = 1;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.js
new file mode 100644
index 00000000000..1b44e943160
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(10);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (let i = 0; i < c[0][0]; i++) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md
new file mode 100644
index 00000000000..86bb037b084
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(10);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (let i = 0; i < 10; i += c[0][0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(10);
+
+  const c = [a];
+
+  let x;
+  for (let i = 0; i < 10; i = i + c[0][0], i) {
+    x = 1;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.js
new file mode 100644
index 00000000000..325808e7465
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(10);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  for (let i = 0; i < 10; i += c[0][0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md
new file mode 100644
index 00000000000..3ab4614a143
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  if (c[0][0]) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  const c = [a];
+
+  let x;
+  if (c[0][0]) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.js
new file mode 100644
index 00000000000..a2e3d3992eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.js
@@ -0,0 +1,31 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  if (c[0][0]) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md
new file mode 100644
index 00000000000..a6bb185de79
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  switch (c[0][0]) {
+    case true: {
+      x = 1;
+      break;
+    }
+    default: {
+      x = 2;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  const c = [a];
+
+  let x;
+  bb0: switch (c[0][0]) {
+    case true: {
+      x = 1;
+      break bb0;
+    }
+    default: {
+      x = 2;
+    }
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.js
new file mode 100644
index 00000000000..792a4988904
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.js
@@ -0,0 +1,35 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  switch (c[0][0]) {
+    case true: {
+      x = 1;
+      break;
+    }
+    default: {
+      x = 2;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md
new file mode 100644
index 00000000000..a43be0a9244
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  while (c[0][0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  const c = [a];
+
+  let x;
+  while (c[0][0]) {
+    x = 1;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.js
new file mode 100644
index 00000000000..e8c0850c067
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.js
@@ -0,0 +1,29 @@
+function Component(props) {
+  // a and b are independent but their mutations are interleaved, so
+  // they get grouped in a reactive scope. this means that a becomes
+  // reactive since it will effectively re-evaluate based on a reactive
+  // input
+  const a = [];
+  const b = [];
+  b.push(props.cond);
+  a.push(null);
+
+  // Downstream consumer of a, which initially seems non-reactive except
+  // that a becomes reactive, per above
+  const c = [a];
+
+  let x;
+  while (c[0][0]) {
+    x = 1;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `c[0]` which becomes reactive via
+  // being interleaved with `b`.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-if.expect.md
new file mode 100644
index 00000000000..8da63b424f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-if.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  if (props.cond) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.cond` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if (props.cond) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[2]
+[2]
+[1]
+[2]
+[1]
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-if.js
new file mode 100644
index 00000000000..fc9f6b1eb6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-if.js
@@ -0,0 +1,27 @@
+function Component(props) {
+  let x;
+  if (props.cond) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.cond` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-on-context-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-on-context-variable.expect.md
new file mode 100644
index 00000000000..963024e8871
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-on-context-variable.expect.md
@@ -0,0 +1,106 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  // Reassign `x` based on a reactive value, but inside a function expression
+  // to make it a context variable
+  const f = () => {
+    if (props.cond) {
+      x = 1;
+    } else {
+      x = 2;
+    }
+  };
+  // Pass `f` through a function to prevent IIFE inlining optimizations
+  const f2 = identity(f);
+  f2();
+
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.cond` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props) {
+    const f = () => {
+      if (props.cond) {
+        x = 1;
+      } else {
+        x = 2;
+      }
+    };
+
+    const f2 = identity(f);
+    f2();
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x) {
+    t0 = [x];
+    $[2] = x;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[2]
+[2]
+[1]
+[2]
+[1]
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-on-context-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-on-context-variable.js
new file mode 100644
index 00000000000..79d9bcbce57
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-on-context-variable.js
@@ -0,0 +1,37 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let x;
+  // Reassign `x` based on a reactive value, but inside a function expression
+  // to make it a context variable
+  const f = () => {
+    if (props.cond) {
+      x = 1;
+    } else {
+      x = 2;
+    }
+  };
+  // Pass `f` through a function to prevent IIFE inlining optimizations
+  const f2 = identity(f);
+  f2();
+
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.cond` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md
new file mode 100644
index 00000000000..c56bb7936c1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md
@@ -0,0 +1,137 @@
+
+## Input
+
+```javascript
+import invariant from 'invariant';
+import {useState} from 'react';
+
+function Component(props) {
+  const [x, setX] = useState(false);
+  const [y, setY] = useState(false);
+  let setState;
+  if (props.cond) {
+    setState = setX;
+  } else {
+    setState = setY;
+  }
+  const setState2 = setState;
+  const stateObject = {setState: setState2};
+  return (
+    <Foo
+      cond={props.cond}
+      setX={setX}
+      setY={setY}
+      setState={stateObject.setState}
+    />
+  );
+}
+
+function Foo({cond, setX, setY, setState}) {
+  if (cond) {
+    invariant(setState === setX, 'Expected the correct setState function');
+  } else {
+    invariant(setState === setY, 'Expected the correct setState function');
+  }
+  return 'ok';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import invariant from "invariant";
+import { useState } from "react";
+
+function Component(props) {
+  const $ = _c(5);
+  const [, setX] = useState(false);
+  const [, setY] = useState(false);
+  let setState;
+  if (props.cond) {
+    setState = setX;
+  } else {
+    setState = setY;
+  }
+
+  const setState2 = setState;
+  let t0;
+  if ($[0] !== setState2) {
+    t0 = { setState: setState2 };
+    $[0] = setState2;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const stateObject = t0;
+  let t1;
+  if ($[2] !== props.cond || $[3] !== stateObject.setState) {
+    t1 = (
+      <Foo
+        cond={props.cond}
+        setX={setX}
+        setY={setY}
+        setState={stateObject.setState}
+      />
+    );
+    $[2] = props.cond;
+    $[3] = stateObject.setState;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+function Foo(t0) {
+  const { cond, setX, setY, setState } = t0;
+  if (cond) {
+    invariant(setState === setX, "Expected the correct setState function");
+  } else {
+    invariant(setState === setY, "Expected the correct setState function");
+  }
+  return "ok";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ok
+ok
+ok
+ok
+ok
+ok
+ok
+ok
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.js
new file mode 100644
index 00000000000..2f1735b38b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.js
@@ -0,0 +1,47 @@
+import invariant from 'invariant';
+import {useState} from 'react';
+
+function Component(props) {
+  const [x, setX] = useState(false);
+  const [y, setY] = useState(false);
+  let setState;
+  if (props.cond) {
+    setState = setX;
+  } else {
+    setState = setY;
+  }
+  const setState2 = setState;
+  const stateObject = {setState: setState2};
+  return (
+    <Foo
+      cond={props.cond}
+      setX={setX}
+      setY={setY}
+      setState={stateObject.setState}
+    />
+  );
+}
+
+function Foo({cond, setX, setY, setState}) {
+  if (cond) {
+    invariant(setState === setX, 'Expected the correct setState function');
+  } else {
+    invariant(setState === setY, 'Expected the correct setState function');
+  }
+  return 'ok';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md
new file mode 100644
index 00000000000..88e9788196d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+
+  let value = null;
+  loop: for (let i = 0; i < 10; i++) {
+    switch (value) {
+      case true: {
+        x = 1;
+        break loop;
+      }
+      case false: {
+        x = 2;
+        break loop;
+      }
+    }
+
+    value = props.cond;
+  }
+
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `value` used as the switch test
+  // condition. That variable is initially null on the first iteration
+  // of the loop, but is later set to `props.value` which is reactive.
+  // Therefore x should be treated as reactive.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x = 0;
+
+  let value = null;
+  for (let i = 0; i < 10; i++) {
+    switch (value) {
+      case true: {
+        x = 1;
+        break;
+      }
+      case false: {
+        x = 2;
+        break;
+      }
+    }
+
+    value = props.cond;
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[2]
+[2]
+[1]
+[2]
+[1]
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.js
new file mode 100644
index 00000000000..bb60872cb6d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.js
@@ -0,0 +1,41 @@
+function Component(props) {
+  let x = 0;
+
+  let value = null;
+  loop: for (let i = 0; i < 10; i++) {
+    switch (value) {
+      case true: {
+        x = 1;
+        break loop;
+      }
+      case false: {
+        x = 2;
+        break loop;
+      }
+    }
+
+    value = props.cond;
+  }
+
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `value` used as the switch test
+  // condition. That variable is initially null on the first iteration
+  // of the loop, but is later set to `props.value` which is reactive.
+  // Therefore x should be treated as reactive.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-case-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-case-test.expect.md
new file mode 100644
index 00000000000..34351fc8dd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-case-test.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  switch (props.cond) {
+    case true: {
+      x = 1;
+      break;
+    }
+    case false: {
+      x = 2;
+      break;
+    }
+    default: {
+      x = 3;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.cond` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  bb0: switch (props.cond) {
+    case true: {
+      x = 1;
+      break bb0;
+    }
+    case false: {
+      x = 2;
+      break bb0;
+    }
+    default: {
+      x = 3;
+    }
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[2]
+[2]
+[1]
+[2]
+[1]
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-case-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-case-test.js
new file mode 100644
index 00000000000..e0ad925e59d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-case-test.js
@@ -0,0 +1,35 @@
+function Component(props) {
+  let x;
+  switch (props.cond) {
+    case true: {
+      x = 1;
+      break;
+    }
+    case false: {
+      x = 2;
+      break;
+    }
+    default: {
+      x = 3;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.cond` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-condition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-condition.expect.md
new file mode 100644
index 00000000000..346dcb65f67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-condition.expect.md
@@ -0,0 +1,96 @@
+
+## Input
+
+```javascript
+const GLOBAL = 42;
+
+function Component({value}) {
+  let x;
+  switch (GLOBAL) {
+    case value: {
+      x = 1;
+      break;
+    }
+    default: {
+      x = 2;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.value` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {value: GLOBAL},
+    {value: GLOBAL},
+    {value: null},
+    {value: null},
+    {value: GLOBAL},
+    {value: null},
+    {value: GLOBAL},
+    {value: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const GLOBAL = 42;
+
+function Component(t0) {
+  const $ = _c(2);
+  const { value } = t0;
+  let x;
+  bb0: switch (GLOBAL) {
+    case value: {
+      x = 1;
+      break bb0;
+    }
+    default: {
+      x = 2;
+    }
+  }
+  let t1;
+  if ($[0] !== x) {
+    t1 = [x];
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { value: GLOBAL },
+    { value: GLOBAL },
+    { value: null },
+    { value: null },
+    { value: GLOBAL },
+    { value: null },
+    { value: GLOBAL },
+    { value: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[2]
+[2]
+[1]
+[2]
+[1]
+[2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-condition.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-condition.js
new file mode 100644
index 00000000000..fe5dd1c122e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-switch-condition.js
@@ -0,0 +1,33 @@
+const GLOBAL = 42;
+
+function Component({value}) {
+  let x;
+  switch (GLOBAL) {
+    case value: {
+      x = 1;
+      break;
+    }
+    default: {
+      x = 2;
+    }
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" value `props.value` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {value: GLOBAL},
+    {value: GLOBAL},
+    {value: null},
+    {value: null},
+    {value: GLOBAL},
+    {value: null},
+    {value: GLOBAL},
+    {value: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-if.expect.md
new file mode 100644
index 00000000000..65ae49543bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-if.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // x is mutated conditionally based on a reactive value,
+  // so it needs to be considered reactive
+  let x = [];
+  if (props.cond) {
+    x.push(1);
+  }
+  // Since x is reactive, y is now reactively controlled too:
+  let y = false;
+  if (x[0]) {
+    y = true;
+  }
+  // Thus this value should be reactive on `y`:
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+
+  const x = [];
+  if (props.cond) {
+    x.push(1);
+  }
+
+  let y = false;
+  if (x[0]) {
+    y = true;
+  }
+  let t0;
+  if ($[0] !== y) {
+    t0 = [y];
+    $[0] = y;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [true]
+[true]
+[false]
+[false]
+[true]
+[false]
+[true]
+[false]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-if.js
new file mode 100644
index 00000000000..f0fed51afe1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-if.js
@@ -0,0 +1,30 @@
+function Component(props) {
+  // x is mutated conditionally based on a reactive value,
+  // so it needs to be considered reactive
+  let x = [];
+  if (props.cond) {
+    x.push(1);
+  }
+  // Since x is reactive, y is now reactively controlled too:
+  let y = false;
+  if (x[0]) {
+    y = true;
+  }
+  // Thus this value should be reactive on `y`:
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-switch.expect.md
new file mode 100644
index 00000000000..0d12397a2bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-switch.expect.md
@@ -0,0 +1,95 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // x is mutated conditionally based on a reactive value,
+  // so it needs to be considered reactive
+  let x = [];
+  if (props.cond) {
+    x.push(1);
+  }
+  // Since x is reactive, y is now reactively controlled too:
+  let y = false;
+  switch (x[0]) {
+    case 1: {
+      y = true;
+      break;
+    }
+  }
+  // Thus this value should be reactive on `y`:
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+
+  const x = [];
+  if (props.cond) {
+    x.push(1);
+  }
+
+  let y = false;
+  switch (x[0]) {
+    case 1: {
+      y = true;
+    }
+  }
+  let t0;
+  if ($[0] !== y) {
+    t0 = [y];
+    $[0] = y;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [true]
+[true]
+[false]
+[false]
+[true]
+[false]
+[true]
+[false]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-switch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-switch.js
new file mode 100644
index 00000000000..a3929e469f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-via-mutation-switch.js
@@ -0,0 +1,33 @@
+function Component(props) {
+  // x is mutated conditionally based on a reactive value,
+  // so it needs to be considered reactive
+  let x = [];
+  if (props.cond) {
+    x.push(1);
+  }
+  // Since x is reactive, y is now reactively controlled too:
+  let y = false;
+  switch (x[0]) {
+    case 1: {
+      y = true;
+      break;
+    }
+  }
+  // Thus this value should be reactive on `y`:
+  return [y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md
new file mode 100644
index 00000000000..8a55048ccef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md
@@ -0,0 +1,93 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  let i = 0;
+  while (i < props.test) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+    i++;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is affected by
+  // `props.test` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {test: 12},
+    {test: 12},
+    {test: 1},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  let i = 0;
+  while (i < props.test) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+
+    i++;
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { test: 12 },
+    { test: 12 },
+    { test: 1 },
+    { test: 1 },
+    { test: 12 },
+    { test: 1 },
+    { test: 12 },
+    { test: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [10]
+[10]
+[1]
+[1]
+[10]
+[1]
+[10]
+[1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.js
new file mode 100644
index 00000000000..9df744cdb55
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.js
@@ -0,0 +1,32 @@
+function Component(props) {
+  let x;
+  let i = 0;
+  while (i < props.test) {
+    if (i > 10) {
+      x = 10;
+    } else {
+      x = 1;
+    }
+    i++;
+  }
+  // The values assigned to `x` are non-reactive, but the value of `x`
+  // depends on the "control" variable `i`, whose value is affected by
+  // `props.test` which is reactive.
+  // Therefore x should be treated as reactive too.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {test: 12},
+    {test: 12},
+    {test: 1},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+    {test: 12},
+    {test: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md
new file mode 100644
index 00000000000..896a547fec2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return props.post.feedback.comments?.edges?.map(render);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.post.feedback.comments?.edges) {
+    t0 = props.post.feedback.comments?.edges?.map(render);
+    $[0] = props.post.feedback.comments?.edges;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.js
new file mode 100644
index 00000000000..e8e0da392e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.js
@@ -0,0 +1,3 @@
+function Component(props) {
+  return props.post.feedback.comments?.edges?.map(render);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md
new file mode 100644
index 00000000000..1c936618833
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  let y = 0;
+
+  while (x === 0) {
+    x = y;
+    y = props.value;
+  }
+
+  // x and y initially start out with non-reactive values,
+  // but after an iteration of the loop y becomes reactive,
+  // and this reactive value then flows into x on the next
+  // loop iteration, making x reactive.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let x = 0;
+  let y = 0;
+
+  while (x === 0) {
+    x = y;
+    y = props.value;
+  }
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.js
new file mode 100644
index 00000000000..477d15e4b13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.js
@@ -0,0 +1,20 @@
+function Component(props) {
+  let x = 0;
+  let y = 0;
+
+  while (x === 0) {
+    x = y;
+    y = props.value;
+  }
+
+  // x and y initially start out with non-reactive values,
+  // but after an iteration of the loop y becomes reactive,
+  // and this reactive value then flows into x on the next
+  // loop iteration, making x reactive.
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-nonreactive-captured-with-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-nonreactive-captured-with-reactive.expect.md
new file mode 100644
index 00000000000..c7178b9264c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-nonreactive-captured-with-reactive.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  const y = props.y;
+  return [x, y]; // x is captured here along with a reactive value. this shouldn't make `x` reactive!
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const y = props.y;
+  let t1;
+  if ($[1] !== y) {
+    t1 = [x, y];
+    $[1] = y;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-nonreactive-captured-with-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-nonreactive-captured-with-reactive.js
new file mode 100644
index 00000000000..4a8206b7761
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-nonreactive-captured-with-reactive.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const x = {};
+  const y = props.y;
+  return [x, y]; // x is captured here along with a reactive value. this shouldn't make `x` reactive!
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md
new file mode 100644
index 00000000000..9ced7db26af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+const {mutate} = require('shared-runtime');
+
+function Component(props) {
+  const x = {};
+  const y = props.y;
+  const z = [x, y];
+  mutate(z);
+  // x's object identity can change bc it co-mutates with z, which is reactive via props.y
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { mutate } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.y) {
+    const x = {};
+    const y = props.y;
+    const z = [x, y];
+    mutate(z);
+    t0 = [x];
+    $[0] = props.y;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.js
new file mode 100644
index 00000000000..e6dba9a68c5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.js
@@ -0,0 +1,15 @@
+const {mutate} = require('shared-runtime');
+
+function Component(props) {
+  const x = {};
+  const y = props.y;
+  const z = [x, y];
+  mutate(z);
+  // x's object identity can change bc it co-mutates with z, which is reactive via props.y
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.expect.md
new file mode 100644
index 00000000000..96d97e99abf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+import {useRef, forwardRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Fixture showing that Ref types may be reactive.
+ * We should always take a dependency on ref values (the outer box) as
+ * they may be reactive. Pruning should be done in
+ * `pruneNonReactiveDependencies`
+ */
+
+function Parent({cond}) {
+  const ref1 = useRef(1);
+  const ref2 = useRef(2);
+  const ref = cond ? ref1 : ref2;
+  return <Child ref={ref} />;
+}
+
+function ChildImpl(_props, ref) {
+  const cb = () => ref.current;
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+const Child = forwardRef(ChildImpl);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Parent,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef, forwardRef } from "react";
+import { Stringify } from "shared-runtime";
+
+/**
+ * Fixture showing that Ref types may be reactive.
+ * We should always take a dependency on ref values (the outer box) as
+ * they may be reactive. Pruning should be done in
+ * `pruneNonReactiveDependencies`
+ */
+
+function Parent(t0) {
+  const $ = _c(2);
+  const { cond } = t0;
+  const ref1 = useRef(1);
+  const ref2 = useRef(2);
+  const ref = cond ? ref1 : ref2;
+  let t1;
+  if ($[0] !== ref) {
+    t1 = <Child ref={ref} />;
+    $[0] = ref;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function ChildImpl(_props, ref) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== ref) {
+    const cb = () => ref.current;
+    t0 = <Stringify cb={cb} shouldInvokeFns={true} />;
+    $[0] = ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+const Child = forwardRef(ChildImpl);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Parent,
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.tsx
new file mode 100644
index 00000000000..c3eea7a2437
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.tsx
@@ -0,0 +1,29 @@
+import {useRef, forwardRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Fixture showing that Ref types may be reactive.
+ * We should always take a dependency on ref values (the outer box) as
+ * they may be reactive. Pruning should be done in
+ * `pruneNonReactiveDependencies`
+ */
+
+function Parent({cond}) {
+  const ref1 = useRef(1);
+  const ref2 = useRef(2);
+  const ref = cond ? ref1 : ref2;
+  return <Child ref={ref} />;
+}
+
+function ChildImpl(_props, ref) {
+  const cb = () => ref.current;
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+const Child = forwardRef(ChildImpl);
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Parent,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.expect.md
new file mode 100644
index 00000000000..85969ce25ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Fixture showing that Ref types may be reactive.
+ * We should always take a dependency on ref values (the outer box) as
+ * they may be reactive. Pruning should be done in
+ * `pruneNonReactiveDependencies`
+ */
+function Component({cond}) {
+  const ref1 = useRef(1);
+  const ref2 = useRef(2);
+  const ref = cond ? ref1 : ref2;
+  const cb = () => ref.current;
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Stringify } from "shared-runtime";
+
+/**
+ * Fixture showing that Ref types may be reactive.
+ * We should always take a dependency on ref values (the outer box) as
+ * they may be reactive. Pruning should be done in
+ * `pruneNonReactiveDependencies`
+ */
+function Component(t0) {
+  const $ = _c(2);
+  const { cond } = t0;
+  const ref1 = useRef(1);
+  const ref2 = useRef(2);
+  const ref = cond ? ref1 : ref2;
+  let t1;
+  if ($[0] !== ref) {
+    const cb = () => ref.current;
+    t1 = <Stringify cb={cb} shouldInvokeFns={true} />;
+    $[0] = ref;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
+<div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.tsx
new file mode 100644
index 00000000000..db95c5c204a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.tsx
@@ -0,0 +1,22 @@
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Fixture showing that Ref types may be reactive.
+ * We should always take a dependency on ref values (the outer box) as
+ * they may be reactive. Pruning should be done in
+ * `pruneNonReactiveDependencies`
+ */
+function Component({cond}) {
+  const ref1 = useRef(1);
+  const ref2 = useRef(2);
+  const ref = cond ? ref1 : ref2;
+  const cb = () => ref.current;
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+  sequentialRenders: [{cond: true}, {cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md
new file mode 100644
index 00000000000..71cd4e526a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = {};
+  let y = [];
+  let z = {};
+  y.push(z);
+  x.y = y;
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    const y = [];
+    const z = {};
+    y.push(z);
+    x.y = y;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"y":[{}]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.js
new file mode 100644
index 00000000000..aed09fc8bba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.js
@@ -0,0 +1,15 @@
+function foo() {
+  let x = {};
+  let y = [];
+  let z = {};
+  y.push(z);
+  x.y = y;
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes-if.expect.md
new file mode 100644
index 00000000000..2548ff3a2d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes-if.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  const x = [];
+  if (a) {
+    const y = [];
+    y.push(b);
+    x.push(<div>{y}</div>);
+  } else {
+    x.push(c);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(8);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      let y;
+      if ($[4] !== b) {
+        y = [];
+        y.push(b);
+        $[4] = b;
+        $[5] = y;
+      } else {
+        y = $[5];
+      }
+      let t0;
+      if ($[6] !== y) {
+        t0 = <div>{y}</div>;
+        $[6] = y;
+        $[7] = t0;
+      } else {
+        t0 = $[7];
+      }
+      x.push(t0);
+    } else {
+      x.push(c);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes-if.js
new file mode 100644
index 00000000000..7e759b47657
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes-if.js
@@ -0,0 +1,17 @@
+function foo(a, b, c) {
+  const x = [];
+  if (a) {
+    const y = [];
+    y.push(b);
+    x.push(<div>{y}</div>);
+  } else {
+    x.push(c);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md
new file mode 100644
index 00000000000..2481270f048
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function f(a, b) {
+  let x = []; // <- x starts being mutable here.
+  if (a.length === 1) {
+    if (b) {
+      x.push(b); // <- x stops being mutable here.
+    }
+  }
+
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function f(a, b) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== a.length || $[1] !== b) {
+    const x = [];
+    if (a.length === 1) {
+      if (b) {
+        x.push(b);
+      }
+    }
+    t0 = <div>{x}</div>;
+    $[0] = a.length;
+    $[1] = b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.js
new file mode 100644
index 00000000000..55af0503d2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.js
@@ -0,0 +1,16 @@
+function f(a, b) {
+  let x = []; // <- x starts being mutable here.
+  if (a.length === 1) {
+    if (b) {
+      x.push(b); // <- x stops being mutable here.
+    }
+  }
+
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md
new file mode 100644
index 00000000000..43d96c41970
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // a and b are technically independent, but their mutation is interleaved
+  // so they are grouped in a single reactive scope. a does not have any
+  // reactive inputs, but b does. therefore, we have to treat a as reactive,
+  // since it will be recreated based on a reactive input.
+  const a = {};
+  const b = [];
+  b.push(props.b);
+  a.a = null;
+
+  // because a may recreate when b does, it becomes reactive. we have to recreate
+  // c if a changes.
+  const c = [a];
+
+  // Example usage that could fail if we didn't treat a as reactive:
+  //  const [c, a] = Component({b: ...});
+  //  assert(c[0] === a);
+  return [c, a];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.b) {
+    const a = {};
+    const b = [];
+    b.push(props.b);
+    a.a = null;
+    const c = [a];
+    t0 = [c, a];
+    $[0] = props.b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.js
new file mode 100644
index 00000000000..36052cce428
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.js
@@ -0,0 +1,25 @@
+function Component(props) {
+  // a and b are technically independent, but their mutation is interleaved
+  // so they are grouped in a single reactive scope. a does not have any
+  // reactive inputs, but b does. therefore, we have to treat a as reactive,
+  // since it will be recreated based on a reactive input.
+  const a = {};
+  const b = [];
+  b.push(props.b);
+  a.a = null;
+
+  // because a may recreate when b does, it becomes reactive. we have to recreate
+  // c if a changes.
+  const c = [a];
+
+  // Example usage that could fail if we didn't treat a as reactive:
+  //  const [c, a] = Component({b: ...});
+  //  assert(c[0] === a);
+  return [c, a];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md
new file mode 100644
index 00000000000..5ac29886cf8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = bar();
+  mutate(items[props.key], props.a);
+
+  const count = foo(items.length + 1);
+
+  return {items, count};
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(8);
+  let items;
+  if ($[0] !== props.a || $[1] !== props.key) {
+    items = bar();
+    mutate(items[props.key], props.a);
+    $[0] = props.a;
+    $[1] = props.key;
+    $[2] = items;
+  } else {
+    items = $[2];
+  }
+
+  const t0 = items.length + 1;
+  let t1;
+  if ($[3] !== t0) {
+    t1 = foo(t0);
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const count = t1;
+  let t2;
+  if ($[5] !== count || $[6] !== items) {
+    t2 = { items, count };
+    $[5] = count;
+    $[6] = items;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.js
new file mode 100644
index 00000000000..70a2c785a26
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.js
@@ -0,0 +1,8 @@
+function Component(props) {
+  const items = bar();
+  mutate(items[props.key], props.a);
+
+  const count = foo(items.length + 1);
+
+  return {items, count};
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md
new file mode 100644
index 00000000000..bb76df4de02
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = bar();
+  mutate(items.a, props.a);
+
+  const count = foo(items.length + 1);
+
+  return {items, count};
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let items;
+  if ($[0] !== props.a) {
+    items = bar();
+    mutate(items.a, props.a);
+    $[0] = props.a;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+
+  const t0 = items.length + 1;
+  let t1;
+  if ($[2] !== t0) {
+    t1 = foo(t0);
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const count = t1;
+  let t2;
+  if ($[4] !== count || $[5] !== items) {
+    t2 = { items, count };
+    $[4] = count;
+    $[5] = items;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.js
new file mode 100644
index 00000000000..a93249f9a94
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.js
@@ -0,0 +1,8 @@
+function Component(props) {
+  const items = bar();
+  mutate(items.a, props.a);
+
+  const count = foo(items.length + 1);
+
+  return {items, count};
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.expect.md
new file mode 100644
index 00000000000..1d58d44ef31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  const y = x;
+  y.push(props.input);
+
+  return [x[0]];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: 42},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.input) {
+    x = [];
+    const y = x;
+    y.push(props.input);
+    $[0] = props.input;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x[0]) {
+    t0 = [x[0]];
+    $[2] = x[0];
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { input: 42 },
+    { input: 42 },
+    { input: "sathya" },
+    { input: "sathya" },
+    { input: 42 },
+    { input: "sathya" },
+    { input: 42 },
+    { input: "sathya" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
+[42]
+["sathya"]
+["sathya"]
+[42]
+["sathya"]
+[42]
+["sathya"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.js
new file mode 100644
index 00000000000..7f6e0b6767b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.js
@@ -0,0 +1,22 @@
+function Component(props) {
+  const x = [];
+  const y = x;
+  y.push(props.input);
+
+  return [x[0]];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: 42},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.expect.md
new file mode 100644
index 00000000000..36d05dda69c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  const f = arg => {
+    const y = x;
+    y.push(arg);
+  };
+  f(props.input);
+
+  return [x[0]];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: 42},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.input) {
+    x = [];
+    const f = (arg) => {
+      const y = x;
+      y.push(arg);
+    };
+
+    f(props.input);
+    $[0] = props.input;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x[0]) {
+    t0 = [x[0]];
+    $[2] = x[0];
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { input: 42 },
+    { input: 42 },
+    { input: "sathya" },
+    { input: "sathya" },
+    { input: 42 },
+    { input: "sathya" },
+    { input: 42 },
+    { input: "sathya" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
+[42]
+["sathya"]
+["sathya"]
+[42]
+["sathya"]
+[42]
+["sathya"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.js
new file mode 100644
index 00000000000..a82fb49882e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.js
@@ -0,0 +1,25 @@
+function Component(props) {
+  const x = [];
+  const f = arg => {
+    const y = x;
+    y.push(arg);
+  };
+  f(props.input);
+
+  return [x[0]];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: 42},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-through-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-through-property-load.expect.md
new file mode 100644
index 00000000000..a15924d9937
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-through-property-load.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = {};
+  const y = [];
+  x.y = y;
+  x.y.push(props.input);
+
+  let z = 0;
+  if (x.y[0]) {
+    z = 1;
+  }
+
+  return [z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: true},
+    {input: true},
+    {input: false},
+    {input: false},
+    {input: true},
+    {input: false},
+    {input: true},
+    {input: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const x = {};
+  const y = [];
+  x.y = y;
+  x.y.push(props.input);
+
+  let z = 0;
+  if (x.y[0]) {
+    z = 1;
+  }
+  let t0;
+  if ($[0] !== z) {
+    t0 = [z];
+    $[0] = z;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { input: true },
+    { input: true },
+    { input: false },
+    { input: false },
+    { input: true },
+    { input: false },
+    { input: true },
+    { input: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[0]
+[0]
+[1]
+[0]
+[1]
+[0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-through-property-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-through-property-load.js
new file mode 100644
index 00000000000..3613f8bbab9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-through-property-load.js
@@ -0,0 +1,28 @@
+function Component(props) {
+  const x = {};
+  const y = [];
+  x.y = y;
+  x.y.push(props.input);
+
+  let z = 0;
+  if (x.y[0]) {
+    z = 1;
+  }
+
+  return [z];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: true},
+    {input: true},
+    {input: false},
+    {input: false},
+    {input: true},
+    {input: false},
+    {input: true},
+    {input: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md
new file mode 100644
index 00000000000..ea084e04db3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  const y = x;
+
+  // y isn't reactive yet when we first visit this, so z is initially non-reactive
+  const z = [y];
+
+  // then we realize y is reactive. we need a fixpoint to propagate this back to z
+  y.push(props.input);
+
+  // PruneNonReactiveDependencies partially propagates reactivity (for now) which
+  // we bypass with an indirection of storing into another variable
+  const a = [z];
+
+  // b's value is conditional on `a`, which is reactive per above
+  let b = 0;
+  if (a[0][0][0] === 42) {
+    b = 1;
+  }
+
+  return [b];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: 42},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const x = [];
+  const y = x;
+
+  const z = [y];
+
+  y.push(props.input);
+
+  const a = [z];
+
+  let b = 0;
+  if (a[0][0][0] === 42) {
+    b = 1;
+  }
+  let t0;
+  if ($[0] !== b) {
+    t0 = [b];
+    $[0] = b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    { input: 42 },
+    { input: 42 },
+    { input: "sathya" },
+    { input: "sathya" },
+    { input: 42 },
+    { input: "sathya" },
+    { input: 42 },
+    { input: "sathya" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[1]
+[0]
+[0]
+[1]
+[0]
+[1]
+[0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.js
new file mode 100644
index 00000000000..83ab1d8536e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.js
@@ -0,0 +1,37 @@
+function Component(props) {
+  const x = [];
+  const y = x;
+
+  // y isn't reactive yet when we first visit this, so z is initially non-reactive
+  const z = [y];
+
+  // then we realize y is reactive. we need a fixpoint to propagate this back to z
+  y.push(props.input);
+
+  // PruneNonReactiveDependencies partially propagates reactivity (for now) which
+  // we bypass with an indirection of storing into another variable
+  const a = [z];
+
+  // b's value is conditional on `a`, which is reactive per above
+  let b = 0;
+  if (a[0][0][0] === 42) {
+    b = 1;
+  }
+
+  return [b];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  sequentialRenders: [
+    {input: 42},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+    {input: 42},
+    {input: 'sathya'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.expect.md
new file mode 100644
index 00000000000..3abd8cac949
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const x = makeObject();
+  const user = useFragment(
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
+    props.user
+  );
+  const posts = user.timeline.posts.edges.nodes.map(node => {
+    x.y = true;
+    return <Post post={node} />;
+  });
+  posts.push({});
+  const count = posts.length;
+  foo(count);
+  return <>{posts}</>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useFragment } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  const x = makeObject();
+  const user = useFragment(
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
+    props.user,
+  );
+  const posts = user.timeline.posts.edges.nodes.map((node) => {
+    x.y = true;
+    return <Post post={node} />;
+  });
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  posts.push(t0);
+  const count = posts.length;
+  foo(count);
+  let t1;
+  if ($[1] !== posts) {
+    t1 = <>{posts}</>;
+    $[1] = posts;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.js
new file mode 100644
index 00000000000..2658a048939
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls-mutable-lambda.js
@@ -0,0 +1,21 @@
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const x = makeObject();
+  const user = useFragment(
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
+    props.user
+  );
+  const posts = user.timeline.posts.edges.nodes.map(node => {
+    x.y = true;
+    return <Post post={node} />;
+  });
+  posts.push({});
+  const count = posts.length;
+  foo(count);
+  return <>{posts}</>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.expect.md
new file mode 100644
index 00000000000..05ab1c533b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const user = useFragment(
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
+    props.user
+  );
+  const posts = user.timeline.posts.edges.nodes.map(node => (
+    <Post post={node} />
+  ));
+  posts.push({});
+  const count = posts.length;
+  foo(count);
+  return <>{posts}</>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useFragment } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  const user = useFragment(
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
+    props.user,
+  );
+  let posts;
+  if ($[0] !== user.timeline.posts.edges.nodes) {
+    posts = user.timeline.posts.edges.nodes.map(_temp);
+    let t0;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = {};
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    posts.push(t0);
+    $[0] = user.timeline.posts.edges.nodes;
+    $[1] = posts;
+  } else {
+    posts = $[1];
+  }
+  const count = posts.length;
+  foo(count);
+  let t0;
+  if ($[3] !== posts) {
+    t0 = <>{posts}</>;
+    $[3] = posts;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+function _temp(node) {
+  return <Post post={node} />;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.js
new file mode 100644
index 00000000000..bb1e52dc764
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/readonly-object-method-calls.js
@@ -0,0 +1,19 @@
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const user = useFragment(
+    graphql`
+      fragment Component_user on User {
+        name
+      }
+    `,
+    props.user
+  );
+  const posts = user.timeline.posts.edges.nodes.map(node => (
+    <Post post={node} />
+  ));
+  posts.push({});
+  const count = posts.length;
+  foo(count);
+  return <>{posts}</>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-no-memo-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-no-memo-arg.expect.md
new file mode 100644
index 00000000000..1f5fb54eaeb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-no-memo-arg.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+// @enableCustomTypeDefinitionForReanimated
+import {useAnimatedProps, useSharedValue} from 'react-native-reanimated';
+function Component() {
+  const radius = useSharedValue(50);
+
+  const animatedProps = useAnimatedProps(() => {
+    // draw a circle
+    const path = `
+    M 100, 100
+    m -${radius.value}, 0
+    a ${radius.value},${radius.value} 0 1,0 ${radius.value * 2},0
+    a ${radius.value},${radius.value} 0 1,0 ${-radius.value * 2},0
+    `;
+    return {
+      d: path,
+    };
+  });
+
+  // attach animated props to an SVG path using animatedProps
+  return (
+    <Svg>
+      <AnimatedPath animatedProps={animatedProps} fill="black" />
+    </Svg>
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableCustomTypeDefinitionForReanimated
+import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
+function Component() {
+  const $ = _c(2);
+  const radius = useSharedValue(50);
+
+  const animatedProps = useAnimatedProps(() => {
+    const path = `
+    M 100, 100
+    m -${radius.value}, 0
+    a ${radius.value},${radius.value} 0 1,0 ${radius.value * 2},0
+    a ${radius.value},${radius.value} 0 1,0 ${-radius.value * 2},0
+    `;
+    return { d: path };
+  });
+  let t0;
+  if ($[0] !== animatedProps) {
+    t0 = (
+      <Svg>
+        <AnimatedPath animatedProps={animatedProps} fill="black" />
+      </Svg>
+    );
+    $[0] = animatedProps;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-no-memo-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-no-memo-arg.js
new file mode 100644
index 00000000000..d2865ce99ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-no-memo-arg.js
@@ -0,0 +1,30 @@
+// @enableCustomTypeDefinitionForReanimated
+import {useAnimatedProps, useSharedValue} from 'react-native-reanimated';
+function Component() {
+  const radius = useSharedValue(50);
+
+  const animatedProps = useAnimatedProps(() => {
+    // draw a circle
+    const path = `
+    M 100, 100
+    m -${radius.value}, 0
+    a ${radius.value},${radius.value} 0 1,0 ${radius.value * 2},0
+    a ${radius.value},${radius.value} 0 1,0 ${-radius.value * 2},0
+    `;
+    return {
+      d: path,
+    };
+  });
+
+  // attach animated props to an SVG path using animatedProps
+  return (
+    <Svg>
+      <AnimatedPath animatedProps={animatedProps} fill="black" />
+    </Svg>
+  );
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-shared-value-writes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-shared-value-writes.expect.md
new file mode 100644
index 00000000000..0a19a854289
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-shared-value-writes.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @enableCustomTypeDefinitionForReanimated
+import {useSharedValue} from 'react-native-reanimated';
+
+/**
+ * https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/hooks/useSharedValue/
+ *
+ * Test that shared values are treated as ref-like, i.e. allowing writes outside
+ * of render
+ */
+function SomeComponent() {
+  const sharedVal = useSharedValue(0);
+  return (
+    <Button
+      onPress={() => (sharedVal.value = Math.random())}
+      title="Randomize"
+    />
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableCustomTypeDefinitionForReanimated
+import { useSharedValue } from "react-native-reanimated";
+
+/**
+ * https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/hooks/useSharedValue/
+ *
+ * Test that shared values are treated as ref-like, i.e. allowing writes outside
+ * of render
+ */
+function SomeComponent() {
+  const $ = _c(2);
+  const sharedVal = useSharedValue(0);
+  let t0;
+  if ($[0] !== sharedVal) {
+    t0 = (
+      <Button
+        onPress={() => (sharedVal.value = Math.random())}
+        title="Randomize"
+      />
+    );
+    $[0] = sharedVal;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-shared-value-writes.jsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-shared-value-writes.jsx
new file mode 100644
index 00000000000..0aa959a8b6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reanimated-shared-value-writes.jsx
@@ -0,0 +1,18 @@
+// @enableCustomTypeDefinitionForReanimated
+import {useSharedValue} from 'react-native-reanimated';
+
+/**
+ * https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/hooks/useSharedValue/
+ *
+ * Test that shared values are treated as ref-like, i.e. allowing writes outside
+ * of render
+ */
+function SomeComponent() {
+  const sharedVal = useSharedValue(0);
+  return (
+    <Button
+      onPress={() => (sharedVal.value = Math.random())}
+      title="Randomize"
+    />
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.expect.md
new file mode 100644
index 00000000000..70ff08be60f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+let b = 1;
+
+export default function MyApp() {
+  const fn = () => {
+    b = 2;
+  };
+  return useFoo(fn);
+}
+
+function useFoo(fn) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+let b = 1;
+
+export default function MyApp() {
+  const fn = _temp;
+  return useFoo(fn);
+}
+function _temp() {
+  b = 2;
+}
+
+function useFoo(fn) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.js
new file mode 100644
index 00000000000..f584792febf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-hook-arg.js
@@ -0,0 +1,15 @@
+let b = 1;
+
+export default function MyApp() {
+  const fn = () => {
+    b = 2;
+  };
+  return useFoo(fn);
+}
+
+function useFoo(fn) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.expect.md
new file mode 100644
index 00000000000..9e7ba639e2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+let b = 1;
+
+export default function useMyHook() {
+  const fn = () => {
+    b = 2;
+  };
+  return fn;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMyHook,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+let b = 1;
+
+export default function useMyHook() {
+  const fn = _temp;
+  return fn;
+}
+function _temp() {
+  b = 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMyHook,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.js
new file mode 100644
index 00000000000..abbf1550792
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-global-return.js
@@ -0,0 +1,13 @@
+let b = 1;
+
+export default function useMyHook() {
+  const fn = () => {
+    b = 2;
+  };
+  return fn;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useMyHook,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md
new file mode 100644
index 00000000000..0b0fc73df6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+import {makeArray} from 'shared-runtime';
+
+// @flow
+function Component() {
+  const items = makeArray(0, 1, 2);
+  let item;
+  let sum = 0;
+  while ((item = items.pop())) {
+    sum += item;
+  }
+  return [items, sum];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray } from "shared-runtime";
+
+// @flow
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const items = makeArray(0, 1, 2);
+    let item;
+    let sum = 0;
+    while ((item = items.pop())) {
+      sum = sum + item;
+    }
+    t0 = [items, sum];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.js
new file mode 100644
index 00000000000..f1a94c3d571
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.js
@@ -0,0 +1,17 @@
+import {makeArray} from 'shared-runtime';
+
+// @flow
+function Component() {
+  const items = makeArray(0, 1, 2);
+  let item;
+  let sum = 0;
+  while ((item = items.pop())) {
+    sum += item;
+  }
+  return [items, sum];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md
new file mode 100644
index 00000000000..e081de311fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  let foo = () => {
+    x = {};
+  };
+  foo();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = [];
+    const foo = () => {
+      x = {};
+    };
+
+    foo();
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.js
new file mode 100644
index 00000000000..2b4dbc7004a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  let x = [];
+  let foo = () => {
+    x = {};
+  };
+  foo();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-primitive-in-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-primitive-in-context.expect.md
new file mode 100644
index 00000000000..8c35bc5bf5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-primitive-in-context.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 5;
+  let foo = () => {
+    x = {};
+  };
+  foo();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = 5;
+    const foo = () => {
+      x = {};
+    };
+
+    foo();
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-primitive-in-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-primitive-in-context.js
new file mode 100644
index 00000000000..d5c186005c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-primitive-in-context.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  let x = 5;
+  let foo = () => {
+    x = {};
+  };
+  foo();
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md
new file mode 100644
index 00000000000..29dc3afcd6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @flow
+export hook useItemLanguage(items) {
+  return useMemo(() => {
+    let language: ?string = null;
+    items.forEach(item => {
+      if (item.language != null) {
+        language = item.language;
+      }
+    });
+    return language;
+  }, [items]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export function useItemLanguage(items) {
+  const $ = _c(2);
+  let language;
+  if ($[0] !== items) {
+    language = null;
+    items.forEach((item) => {
+      if (item.language != null) {
+        language = item.language;
+      }
+    });
+    $[0] = items;
+    $[1] = language;
+  } else {
+    language = $[1];
+  }
+  return language;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js
new file mode 100644
index 00000000000..4ed89bfc643
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js
@@ -0,0 +1,12 @@
+// @flow
+export hook useItemLanguage(items) {
+  return useMemo(() => {
+    let language: ?string = null;
+    items.forEach(item => {
+      if (item.language != null) {
+        language = item.language;
+      }
+    });
+    return language;
+  }, [items]);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.expect.md
new file mode 100644
index 00000000000..39ce103cca0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  return () => {
+    let str;
+    if (arguments.length) {
+      str = arguments[0];
+    } else {
+      str = props.str;
+    }
+    global.log(str);
+  };
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = () => {
+      let str;
+      if (arguments.length) {
+        str = arguments[0];
+      } else {
+        str = props.str;
+      }
+
+      global.log(str);
+    };
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.js
new file mode 100644
index 00000000000..51f1d3dd167
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  return () => {
+    let str;
+    if (arguments.length) {
+      str = arguments[0];
+    } else {
+      str = props.str;
+    }
+    global.log(str);
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md
new file mode 100644
index 00000000000..82d59c358f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  x.push(props.p0);
+  let y = x;
+
+  if (props.p1) {
+    x = [];
+  }
+
+  y.push(props.p2);
+
+  return <Component x={x} y={y} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
+    let x = [];
+    x.push(props.p0);
+    const y = x;
+    if (props.p1) {
+      let t1;
+      if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = [];
+        $[4] = t1;
+      } else {
+        t1 = $[4];
+      }
+      x = t1;
+    }
+    y.push(props.p2);
+    t0 = <Component x={x} y={y} />;
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = props.p2;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.js
new file mode 100644
index 00000000000..4e30a5a390d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  let x = [];
+  x.push(props.p0);
+  let y = x;
+
+  if (props.p1) {
+    x = [];
+  }
+
+  y.push(props.p2);
+
+  return <Component x={x} y={y} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md
new file mode 100644
index 00000000000..3c1baee994c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    x.push(a);
+  }
+  let y = <div>{x}</div>;
+
+  switch (b) {
+    case 0: {
+      x = [];
+      x.push(b);
+      break;
+    }
+    default: {
+      x = [];
+      x.push(c);
+    }
+  }
+  return (
+    <div>
+      {y}
+      {x}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b, c) {
+  const $ = _c(10);
+  let t0;
+  let x;
+  if ($[0] !== a) {
+    x = [];
+    if (a) {
+      x.push(a);
+    }
+    t0 = <div>{x}</div>;
+    $[0] = a;
+    $[1] = t0;
+    $[2] = x;
+  } else {
+    t0 = $[1];
+    x = $[2];
+  }
+  const y = t0;
+  bb0: switch (b) {
+    case 0: {
+      if ($[3] !== b) {
+        x = [];
+        x.push(b);
+        $[3] = b;
+        $[4] = x;
+      } else {
+        x = $[4];
+      }
+      break bb0;
+    }
+    default: {
+      if ($[5] !== c) {
+        x = [];
+        x.push(c);
+        $[5] = c;
+        $[6] = x;
+      } else {
+        x = $[6];
+      }
+    }
+  }
+  let t1;
+  if ($[7] !== x || $[8] !== y) {
+    t1 = (
+      <div>
+        {y}
+        {x}
+      </div>
+    );
+    $[7] = x;
+    $[8] = y;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.js
new file mode 100644
index 00000000000..55ff2976cfb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.js
@@ -0,0 +1,31 @@
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    x.push(a);
+  }
+  let y = <div>{x}</div>;
+
+  switch (b) {
+    case 0: {
+      x = [];
+      x.push(b);
+      break;
+    }
+    default: {
+      x = [];
+      x.push(c);
+    }
+  }
+  return (
+    <div>
+      {y}
+      {x}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md
new file mode 100644
index 00000000000..de0f4d7449d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  x.push(props.p0);
+  let y = x;
+
+  x = [];
+  let _ = <Component x={x} />;
+
+  y.push(props.p1);
+
+  return <Component x={x} y={y} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1) {
+    let x = [];
+    x.push(props.p0);
+    const y = x;
+    let t1;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = [];
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    x = t1;
+    y.push(props.p1);
+    t0 = <Component x={x} y={y} />;
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.js
new file mode 100644
index 00000000000..3d4fbf1d661
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  let x = [];
+  x.push(props.p0);
+  let y = x;
+
+  x = [];
+  let _ = <Component x={x} />;
+
+  y.push(props.p1);
+
+  return <Component x={x} y={y} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.expect.md
new file mode 100644
index 00000000000..9217d137201
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+function Component1() {
+  const x = callback(10);
+  function callback(x) {
+    if (x == 0) {
+      return null;
+    }
+    return callback(x - 1);
+  }
+  return x;
+}
+
+function Component() {
+  function callback(x) {
+    if (x == 0) {
+      return null;
+    }
+    return callback(x - 1);
+  }
+  return callback(10);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component1() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = callback(10);
+    function callback(x_0) {
+      if (x_0 == 0) {
+        return null;
+      }
+      return callback(x_0 - 1);
+    }
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    function callback(x) {
+      if (x == 0) {
+        return null;
+      }
+      return callback(x - 1);
+    }
+    t0 = callback(10);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.js
new file mode 100644
index 00000000000..b09769da2f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.js
@@ -0,0 +1,25 @@
+function Component1() {
+  const x = callback(10);
+  function callback(x) {
+    if (x == 0) {
+      return null;
+    }
+    return callback(x - 1);
+  }
+  return x;
+}
+
+function Component() {
+  function callback(x) {
+    if (x == 0) {
+      return null;
+    }
+    return callback(x - 1);
+  }
+  return callback(10);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function.expect.md
new file mode 100644
index 00000000000..3dd1f745c1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo(x) {
+  if (x <= 0) {
+    return 0;
+  }
+  return x + foo(x - 1) + (() => foo(x - 2))();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [10],
+};
+
+```
+
+## Code
+
+```javascript
+function foo(x) {
+  if (x <= 0) {
+    return 0;
+  }
+  return x + foo(x - 1) + foo(x - 2);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [10],
+};
+
+```
+      
+### Eval output
+(kind: ok) 364
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function.js
new file mode 100644
index 00000000000..cfc5ee6cc5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function.js
@@ -0,0 +1,11 @@
+function foo(x) {
+  if (x <= 0) {
+    return 0;
+  }
+  return x + foo(x - 1) + (() => foo(x - 2))();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [10],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md
new file mode 100644
index 00000000000..f3ddf57ec00
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  b0: {
+    if (objIsNull) {
+      break b0;
+    } else {
+      x.push(obj.a);
+    }
+    x.push(obj.b);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(3);
+  const { obj, objIsNull } = t0;
+  let x;
+  if ($[0] !== obj || $[1] !== objIsNull) {
+    x = [];
+    bb0: {
+      if (objIsNull) {
+        break bb0;
+      } else {
+        x.push(obj.a);
+      }
+
+      x.push(obj.b);
+    }
+    $[0] = obj;
+    $[1] = objIsNull;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ obj: null, objIsNull: true }],
+  sequentialRenders: [
+    { obj: null, objIsNull: true },
+    { obj: { a: 2 }, objIsNull: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
+[2,null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.ts
new file mode 100644
index 00000000000..76db4ee79bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.ts
@@ -0,0 +1,21 @@
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  b0: {
+    if (objIsNull) {
+      break b0;
+    } else {
+      x.push(obj.a);
+    }
+    x.push(obj.b);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-cfg-nested-testifelse.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-cfg-nested-testifelse.expect.md
new file mode 100644
index 00000000000..2f862005b6a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-cfg-nested-testifelse.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {setProperty} from 'shared-runtime';
+
+function useFoo({o, branchCheck}: {o: {value: number}; branchCheck: boolean}) {
+  let x = {};
+  if (branchCheck) {
+    setProperty(x, o.value);
+  } else {
+    if (o.value) {
+      setProperty(x, o.value);
+    } else {
+      setProperty(x, o.value);
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{o: {value: 2}, branchCheck: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { setProperty } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(3);
+  const { o, branchCheck } = t0;
+  let x;
+  if ($[0] !== branchCheck || $[1] !== o.value) {
+    x = {};
+    if (branchCheck) {
+      setProperty(x, o.value);
+    } else {
+      if (o.value) {
+        setProperty(x, o.value);
+      } else {
+        setProperty(x, o.value);
+      }
+    }
+    $[0] = branchCheck;
+    $[1] = o.value;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ o: { value: 2 }, branchCheck: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"wat0":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-cfg-nested-testifelse.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-cfg-nested-testifelse.ts
new file mode 100644
index 00000000000..03e3c551318
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-cfg-nested-testifelse.ts
@@ -0,0 +1,20 @@
+import {setProperty} from 'shared-runtime';
+
+function useFoo({o, branchCheck}: {o: {value: number}; branchCheck: boolean}) {
+  let x = {};
+  if (branchCheck) {
+    setProperty(x, o.value);
+  } else {
+    if (o.value) {
+      setProperty(x, o.value);
+    } else {
+      setProperty(x, o.value);
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{o: {value: 2}, branchCheck: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md
new file mode 100644
index 00000000000..5700634449e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  if (objIsNull) {
+    return;
+  } else {
+    x.push(obj.a);
+  }
+  x.push(obj.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(4);
+  const { obj, objIsNull } = t0;
+  let t1;
+  let x;
+  if ($[0] !== obj || $[1] !== objIsNull) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (objIsNull) {
+        t1 = undefined;
+        break bb0;
+      } else {
+        x.push(obj.a);
+      }
+
+      x.push(obj.b);
+    }
+    $[0] = obj;
+    $[1] = objIsNull;
+    $[2] = t1;
+    $[3] = x;
+  } else {
+    t1 = $[2];
+    x = $[3];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ obj: null, objIsNull: true }],
+  sequentialRenders: [
+    { obj: null, objIsNull: true },
+    { obj: { a: 2 }, objIsNull: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+[2,null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.ts
new file mode 100644
index 00000000000..b3b005f261c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.ts
@@ -0,0 +1,19 @@
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  if (objIsNull) {
+    return;
+  } else {
+    x.push(obj.a);
+  }
+  x.push(obj.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-condexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-condexpr.expect.md
new file mode 100644
index 00000000000..424f7bdba42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-condexpr.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {identity, addOne} from 'shared-runtime';
+
+function useCondDepInConditionalExpr(props, cond) {
+  const x = identity(cond) ? addOne(props.a.b) : identity(props.a.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInConditionalExpr,
+  params: [{a: {b: 2}}, true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import { identity, addOne } from "shared-runtime";
+
+function useCondDepInConditionalExpr(props, cond) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== cond || $[1] !== props.a.b) {
+    t0 = identity(cond) ? addOne(props.a.b) : identity(props.a.b);
+    $[0] = cond;
+    $[1] = props.a.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInConditionalExpr,
+  params: [{ a: { b: 2 } }, true],
+};
+
+```
+      
+### Eval output
+(kind: ok) 3
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-condexpr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-condexpr.js
new file mode 100644
index 00000000000..0e3cd28632c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-condexpr.js
@@ -0,0 +1,15 @@
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {identity, addOne} from 'shared-runtime';
+
+function useCondDepInConditionalExpr(props, cond) {
+  const x = identity(cond) ? addOne(props.a.b) : identity(props.a.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInConditionalExpr,
+  params: [{a: {b: 2}}, true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md
new file mode 100644
index 00000000000..87a065b91bc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInDirectIfElse(props, cond) {
+  const x = {};
+  if (identity(cond)) {
+    x.b = props.a.b;
+  } else {
+    x.c = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInDirectIfElse,
+  params: [{a: {b: 2}}, true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import { identity } from "shared-runtime";
+
+function useCondDepInDirectIfElse(props, cond) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== cond || $[1] !== props.a.b) {
+    x = {};
+    if (identity(cond)) {
+      x.b = props.a.b;
+    } else {
+      x.c = props.a.b;
+    }
+    $[0] = cond;
+    $[1] = props.a.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInDirectIfElse,
+  params: [{ a: { b: 2 } }, true],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.js
new file mode 100644
index 00000000000..6a7eb11116c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.js
@@ -0,0 +1,20 @@
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInDirectIfElse(props, cond) {
+  const x = {};
+  if (identity(cond)) {
+    x.b = props.a.b;
+  } else {
+    x.c = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInDirectIfElse,
+  params: [{a: {b: 2}}, true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md
new file mode 100644
index 00000000000..b955a1ddd0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in every path
+
+import {identity, getNull} from 'shared-runtime';
+
+function useCondDepInNestedIfElse(props, cond) {
+  const x = {};
+  if (identity(cond)) {
+    if (getNull()) {
+      x.a = props.a.b;
+    }
+  } else {
+    x.d = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInNestedIfElse,
+  params: [{a: {b: 2}}, true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in every path
+
+import { identity, getNull } from "shared-runtime";
+
+function useCondDepInNestedIfElse(props, cond) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== cond || $[1] !== props) {
+    x = {};
+    if (identity(cond)) {
+      if (getNull()) {
+        x.a = props.a.b;
+      }
+    } else {
+      x.d = props.a.b;
+    }
+    $[0] = cond;
+    $[1] = props;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInNestedIfElse,
+  params: [{ a: { b: 2 } }, true],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.js
new file mode 100644
index 00000000000..09e1700b314
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.js
@@ -0,0 +1,21 @@
+// props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in every path
+
+import {identity, getNull} from 'shared-runtime';
+
+function useCondDepInNestedIfElse(props, cond) {
+  const x = {};
+  if (identity(cond)) {
+    if (getNull()) {
+      x.a = props.a.b;
+    }
+  } else {
+    x.d = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInNestedIfElse,
+  params: [{a: {b: 2}}, true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md
new file mode 100644
index 00000000000..5d6002f365f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {getNull, identity} from 'shared-runtime';
+
+function useCondDepInNestedIfElse(props, cond) {
+  const x = {};
+  if (identity(cond)) {
+    if (getNull()) {
+      x.a = props.a.b;
+    } else {
+      x.b = props.a.b;
+    }
+  } else if (identity(cond)) {
+    x.c = props.a.b;
+  } else {
+    x.d = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInNestedIfElse,
+  params: [{a: {b: 2}}, true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import { getNull, identity } from "shared-runtime";
+
+function useCondDepInNestedIfElse(props, cond) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== cond || $[1] !== props.a.b) {
+    x = {};
+    if (identity(cond)) {
+      if (getNull()) {
+        x.a = props.a.b;
+      } else {
+        x.b = props.a.b;
+      }
+    } else {
+      if (identity(cond)) {
+        x.c = props.a.b;
+      } else {
+        x.d = props.a.b;
+      }
+    }
+    $[0] = cond;
+    $[1] = props.a.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInNestedIfElse,
+  params: [{ a: { b: 2 } }, true],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.js
new file mode 100644
index 00000000000..282182f8c90
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.js
@@ -0,0 +1,26 @@
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {getNull, identity} from 'shared-runtime';
+
+function useCondDepInNestedIfElse(props, cond) {
+  const x = {};
+  if (identity(cond)) {
+    if (getNull()) {
+      x.a = props.a.b;
+    } else {
+      x.b = props.a.b;
+    }
+  } else if (identity(cond)) {
+    x.c = props.a.b;
+  } else {
+    x.d = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInNestedIfElse,
+  params: [{a: {b: 2}}, true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md
new file mode 100644
index 00000000000..035f8404e5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInSwitch(props, other) {
+  const x = {};
+  switch (identity(other)) {
+    case 1:
+      x.a = props.a.b;
+      break;
+    case 2:
+      x.b = props.a.b;
+      break;
+    default:
+      x.c = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitch,
+  params: [{a: {b: 2}}, 2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import { identity } from "shared-runtime";
+
+function useCondDepInSwitch(props, other) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== other || $[1] !== props.a.b) {
+    x = {};
+    bb0: switch (identity(other)) {
+      case 1: {
+        x.a = props.a.b;
+        break bb0;
+      }
+      case 2: {
+        x.b = props.a.b;
+        break bb0;
+      }
+      default: {
+        x.c = props.a.b;
+      }
+    }
+    $[0] = other;
+    $[1] = props.a.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitch,
+  params: [{ a: { b: 2 } }, 2],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.js
new file mode 100644
index 00000000000..334481e4097
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.js
@@ -0,0 +1,25 @@
+// props.a.b should be added as a unconditional dependency to the reactive
+// scope that produces x, since it is accessed unconditionally in all cfg
+// paths
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInSwitch(props, other) {
+  const x = {};
+  switch (identity(other)) {
+    case 1:
+      x.a = props.a.b;
+      break;
+    case 2:
+      x.b = props.a.b;
+      break;
+    default:
+      x.c = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitch,
+  params: [{a: {b: 2}}, 2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md
new file mode 100644
index 00000000000..6768b250fb6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in every path
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInSwitchMissingCase(props, other) {
+  const x = {};
+  switch (identity(other)) {
+    case 1:
+      x.a = props.a.b;
+      break;
+    case 2:
+      x.b = 42;
+      break;
+    default:
+      x.c = props.a.b;
+      break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitchMissingCase,
+  params: [{a: {b: 2}}, 2],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in every path
+
+import { identity } from "shared-runtime";
+
+function useCondDepInSwitchMissingCase(props, other) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== other || $[1] !== props) {
+    x = {};
+    bb0: switch (identity(other)) {
+      case 1: {
+        x.a = props.a.b;
+        break bb0;
+      }
+      case 2: {
+        x.b = 42;
+        break bb0;
+      }
+      default: {
+        x.c = props.a.b;
+      }
+    }
+    $[0] = other;
+    $[1] = props;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitchMissingCase,
+  params: [{ a: { b: 2 } }, 2],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":42}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.js
new file mode 100644
index 00000000000..8feb8104d42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.js
@@ -0,0 +1,25 @@
+// props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in every path
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInSwitchMissingCase(props, other) {
+  const x = {};
+  switch (identity(other)) {
+    case 1:
+      x.a = props.a.b;
+      break;
+    case 2:
+      x.b = 42;
+      break;
+    default:
+      x.c = props.a.b;
+      break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitchMissingCase,
+  params: [{a: {b: 2}}, 2],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md
new file mode 100644
index 00000000000..aca369a2703
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in the default case.
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInSwitchMissingDefault(props, other) {
+  const x = {};
+  switch (identity(other)) {
+    case 1:
+      x.a = props.a.b;
+      break;
+    case 2:
+      x.b = props.a.b;
+      break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitchMissingDefault,
+  params: [{a: {b: 2}}, 3],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in the default case.
+
+import { identity } from "shared-runtime";
+
+function useCondDepInSwitchMissingDefault(props, other) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== other || $[1] !== props) {
+    x = {};
+    bb0: switch (identity(other)) {
+      case 1: {
+        x.a = props.a.b;
+        break bb0;
+      }
+      case 2: {
+        x.b = props.a.b;
+      }
+    }
+    $[0] = other;
+    $[1] = props;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitchMissingDefault,
+  params: [{ a: { b: 2 } }, 3],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.js
new file mode 100644
index 00000000000..c1398d7bcf5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.js
@@ -0,0 +1,22 @@
+// props.a.b should NOT be added as a unconditional dependency to the reactive
+// scope that produces x if it is not accessed in the default case.
+
+import {identity} from 'shared-runtime';
+
+function useCondDepInSwitchMissingDefault(props, other) {
+  const x = {};
+  switch (identity(other)) {
+    case 1:
+      x.a = props.a.b;
+      break;
+    case 2:
+      x.b = props.a.b;
+      break;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useCondDepInSwitchMissingDefault,
+  params: [{a: {b: 2}}, 3],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cond-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cond-scope.expect.md
new file mode 100644
index 00000000000..61a0ded9ddb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cond-scope.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// Some reactive scopes are created within a conditional. If a child scope
+// is within a conditional, its reactive dependencies should be propagated
+// as conditionals
+//
+// In this test:
+// ```javascript
+// scope @0 (deps=[???] decls=[x]) {
+//   const x = {};
+//   if (foo) {
+//     scope @1 (deps=[props.a.b] decls=[tmp]) {
+//       const tmp = bar(props.a.b);
+//     }
+//     x.a = tmp;
+//   }
+// }
+// return x;
+// ```
+
+import {CONST_FALSE, identity} from 'shared-runtime';
+
+function useReactiveDepsInCondScope(props) {
+  let x = {};
+  if (CONST_FALSE) {
+    let tmp = identity(props.a.b);
+    x.a = tmp;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useReactiveDepsInCondScope,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Some reactive scopes are created within a conditional. If a child scope
+// is within a conditional, its reactive dependencies should be propagated
+// as conditionals
+//
+// In this test:
+// ```javascript
+// scope @0 (deps=[???] decls=[x]) {
+//   const x = {};
+//   if (foo) {
+//     scope @1 (deps=[props.a.b] decls=[tmp]) {
+//       const tmp = bar(props.a.b);
+//     }
+//     x.a = tmp;
+//   }
+// }
+// return x;
+// ```
+
+import { CONST_FALSE, identity } from "shared-runtime";
+
+function useReactiveDepsInCondScope(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props) {
+    x = {};
+    if (CONST_FALSE) {
+      let t0;
+      if ($[2] !== props.a.b) {
+        t0 = identity(props.a.b);
+        $[2] = props.a.b;
+        $[3] = t0;
+      } else {
+        t0 = $[3];
+      }
+      const tmp = t0;
+      x.a = tmp;
+    }
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useReactiveDepsInCondScope,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cond-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cond-scope.js
new file mode 100644
index 00000000000..0d78ea4f6c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cond-scope.js
@@ -0,0 +1,33 @@
+// Some reactive scopes are created within a conditional. If a child scope
+// is within a conditional, its reactive dependencies should be propagated
+// as conditionals
+//
+// In this test:
+// ```javascript
+// scope @0 (deps=[???] decls=[x]) {
+//   const x = {};
+//   if (foo) {
+//     scope @1 (deps=[props.a.b] decls=[tmp]) {
+//       const tmp = bar(props.a.b);
+//     }
+//     x.a = tmp;
+//   }
+// }
+// return x;
+// ```
+
+import {CONST_FALSE, identity} from 'shared-runtime';
+
+function useReactiveDepsInCondScope(props) {
+  let x = {};
+  if (CONST_FALSE) {
+    let tmp = identity(props.a.b);
+    x.a = tmp;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useReactiveDepsInCondScope,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md
new file mode 100644
index 00000000000..2dd61732f68
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a` as a dependency (since `props.a.b` is
+// a conditional dependency, i.e. gated behind control flow)
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a` as a dependency (since `props.a.b` is
+// a conditional dependency, i.e. gated behind control flow)
+
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a?.b) {
+    x = [];
+    x.push(props.a?.b);
+    $[0] = props.a?.b;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: null }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.js
new file mode 100644
index 00000000000..5372e374a98
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.js
@@ -0,0 +1,14 @@
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a` as a dependency (since `props.a.b` is
+// a conditional dependency, i.e. gated behind control flow)
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/context-var-granular-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/context-var-granular-dep.expect.md
new file mode 100644
index 00000000000..f8878701979
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/context-var-granular-dep.expect.md
@@ -0,0 +1,130 @@
+
+## Input
+
+```javascript
+import {throwErrorWithMessage, ValidateMemoization} from 'shared-runtime';
+
+/**
+ * Context variables are local variables that (1) have at least one reassignment
+ * and (2) are captured into a function expression. These have a known mutable
+ * range: from first declaration / assignment to the last direct or aliased,
+ * mutable reference.
+ *
+ * This fixture validates that forget can take granular dependencies on context
+ * variables when the reference to a context var happens *after* the end of its
+ * mutable range.
+ */
+function Component({cond, a}) {
+  let contextVar;
+  if (cond) {
+    contextVar = {val: a};
+  } else {
+    contextVar = {};
+    throwErrorWithMessage('');
+  }
+  const cb = {cb: () => contextVar.val * 4};
+
+  /**
+   * manually specify input to avoid adding a `PropertyLoad` from contextVar,
+   * which might affect hoistable-objects analysis.
+   */
+  return (
+    <ValidateMemoization
+      inputs={[cond ? a : undefined]}
+      output={cb}
+      onlyCheckCompiled={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, a: undefined}],
+  sequentialRenders: [
+    {cond: true, a: 2},
+    {cond: true, a: 2},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { throwErrorWithMessage, ValidateMemoization } from "shared-runtime";
+
+/**
+ * Context variables are local variables that (1) have at least one reassignment
+ * and (2) are captured into a function expression. These have a known mutable
+ * range: from first declaration / assignment to the last direct or aliased,
+ * mutable reference.
+ *
+ * This fixture validates that forget can take granular dependencies on context
+ * variables when the reference to a context var happens *after* the end of its
+ * mutable range.
+ */
+function Component(t0) {
+  const $ = _c(10);
+  const { cond, a } = t0;
+  let contextVar;
+  if ($[0] !== a || $[1] !== cond) {
+    if (cond) {
+      contextVar = { val: a };
+    } else {
+      contextVar = {};
+      throwErrorWithMessage("");
+    }
+    $[0] = a;
+    $[1] = cond;
+    $[2] = contextVar;
+  } else {
+    contextVar = $[2];
+  }
+  let t1;
+  if ($[3] !== contextVar) {
+    t1 = { cb: () => contextVar.val * 4 };
+    $[3] = contextVar;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const cb = t1;
+
+  const t2 = cond ? a : undefined;
+  let t3;
+  if ($[5] !== t2) {
+    t3 = [t2];
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== cb || $[8] !== t3) {
+    t4 = (
+      <ValidateMemoization inputs={t3} output={cb} onlyCheckCompiled={true} />
+    );
+    $[7] = cb;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, a: undefined }],
+  sequentialRenders: [
+    { cond: true, a: 2 },
+    { cond: true, a: 2 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[2],"output":{"cb":"[[ function params=0 ]]"}}</div>
+<div>{"inputs":[2],"output":{"cb":"[[ function params=0 ]]"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/context-var-granular-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/context-var-granular-dep.js
new file mode 100644
index 00000000000..b9bdd67e2f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/context-var-granular-dep.js
@@ -0,0 +1,43 @@
+import {throwErrorWithMessage, ValidateMemoization} from 'shared-runtime';
+
+/**
+ * Context variables are local variables that (1) have at least one reassignment
+ * and (2) are captured into a function expression. These have a known mutable
+ * range: from first declaration / assignment to the last direct or aliased,
+ * mutable reference.
+ *
+ * This fixture validates that forget can take granular dependencies on context
+ * variables when the reference to a context var happens *after* the end of its
+ * mutable range.
+ */
+function Component({cond, a}) {
+  let contextVar;
+  if (cond) {
+    contextVar = {val: a};
+  } else {
+    contextVar = {};
+    throwErrorWithMessage('');
+  }
+  const cb = {cb: () => contextVar.val * 4};
+
+  /**
+   * manually specify input to avoid adding a `PropertyLoad` from contextVar,
+   * which might affect hoistable-objects analysis.
+   */
+  return (
+    <ValidateMemoization
+      inputs={[cond ? a : undefined]}
+      output={cb}
+      onlyCheckCompiled={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, a: undefined}],
+  sequentialRenders: [
+    {cond: true, a: 2},
+    {cond: true, a: 2},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/edge-case-merge-uncond-optional-chain-and-cond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/edge-case-merge-uncond-optional-chain-and-cond.expect.md
new file mode 100644
index 00000000000..d9361bee322
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/edge-case-merge-uncond-optional-chain-and-cond.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+/**
+ * Evaluator failure:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) {}
+ *   [[ (exception in render) TypeError: Cannot read properties of null (reading 'title_text') ]]
+ *   Forget:
+ *   (kind: ok) {}
+ *   {}
+ */
+/**
+ * Very contrived text fixture showing that it's technically incorrect to merge
+ * a conditional dependency (e.g. dep.path in `cond ? dep.path : ...`) and an
+ * unconditionally evaluated optional chain (`dep?.path`).
+ *
+ *
+ * when screen is non-null, useFoo returns { title: null } or "(not null)"
+ * when screen is null, useFoo throws
+ */
+function useFoo({screen}: {screen: null | undefined | {title_text: null}}) {
+  return screen?.title_text != null
+    ? '(not null)'
+    : identity({title: screen.title_text});
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{screen: null}],
+  sequentialRenders: [{screen: {title_bar: undefined}}, {screen: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+/**
+ * Evaluator failure:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) {}
+ *   [[ (exception in render) TypeError: Cannot read properties of null (reading 'title_text') ]]
+ *   Forget:
+ *   (kind: ok) {}
+ *   {}
+ */
+/**
+ * Very contrived text fixture showing that it's technically incorrect to merge
+ * a conditional dependency (e.g. dep.path in `cond ? dep.path : ...`) and an
+ * unconditionally evaluated optional chain (`dep?.path`).
+ *
+ *
+ * when screen is non-null, useFoo returns { title: null } or "(not null)"
+ * when screen is null, useFoo throws
+ */
+function useFoo(t0) {
+  const $ = _c(2);
+  const { screen } = t0;
+  let t1;
+  if ($[0] !== screen) {
+    t1 =
+      screen?.title_text != null
+        ? "(not null)"
+        : identity({ title: screen.title_text });
+    $[0] = screen;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ screen: null }],
+  sequentialRenders: [{ screen: { title_bar: undefined } }, { screen: null }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'title_text') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/edge-case-merge-uncond-optional-chain-and-cond.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/edge-case-merge-uncond-optional-chain-and-cond.ts
new file mode 100644
index 00000000000..bb361e3c9fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/edge-case-merge-uncond-optional-chain-and-cond.ts
@@ -0,0 +1,31 @@
+import {identity} from 'shared-runtime';
+
+/**
+ * Evaluator failure:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) {}
+ *   [[ (exception in render) TypeError: Cannot read properties of null (reading 'title_text') ]]
+ *   Forget:
+ *   (kind: ok) {}
+ *   {}
+ */
+/**
+ * Very contrived text fixture showing that it's technically incorrect to merge
+ * a conditional dependency (e.g. dep.path in `cond ? dep.path : ...`) and an
+ * unconditionally evaluated optional chain (`dep?.path`).
+ *
+ *
+ * when screen is non-null, useFoo returns { title: null } or "(not null)"
+ * when screen is null, useFoo throws
+ */
+function useFoo({screen}: {screen: null | undefined | {title_text: null}}) {
+  return screen?.title_text != null
+    ? '(not null)'
+    : identity({title: screen.title_text});
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{screen: null}],
+  sequentialRenders: [{screen: {title_bar: undefined}}, {screen: null}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance.expect.md
new file mode 100644
index 00000000000..2dd93624049
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance.expect.md
@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, setPropertyByKey} from 'shared-runtime';
+
+function useFoo({value, cond}) {
+  let x: any = makeObject_Primitives();
+  if (cond) {
+    setPropertyByKey(x, 'a', null);
+  } else {
+    setPropertyByKey(x, 'a', {b: 2});
+  }
+
+  /**
+   * y should take a dependency on `x`, not `x.a.b` here
+   */
+  const y = [];
+  if (!cond) {
+    y.push(x.a.b);
+  }
+
+  x = makeObject_Primitives();
+  setPropertyByKey(x, 'a', {b: value});
+
+  return [y, x.a.b];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 3, cond: true}],
+  sequentialRenders: [
+    {value: 3, cond: true},
+    {value: 3, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, setPropertyByKey } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(10);
+  const { value, cond } = t0;
+  let x;
+  if ($[0] !== cond) {
+    x = makeObject_Primitives();
+    if (cond) {
+      setPropertyByKey(x, "a", null);
+    } else {
+      setPropertyByKey(x, "a", { b: 2 });
+    }
+    $[0] = cond;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let y;
+  if ($[2] !== cond || $[3] !== x) {
+    y = [];
+    if (!cond) {
+      y.push(x.a.b);
+    }
+    $[2] = cond;
+    $[3] = x;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  if ($[5] !== value) {
+    x = makeObject_Primitives();
+    setPropertyByKey(x, "a", { b: value });
+    $[5] = value;
+    $[6] = x;
+  } else {
+    x = $[6];
+  }
+  let t1;
+  if ($[7] !== x.a.b || $[8] !== y) {
+    t1 = [y, x.a.b];
+    $[7] = x.a.b;
+    $[8] = y;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: 3, cond: true }],
+  sequentialRenders: [
+    { value: 3, cond: true },
+    { value: 3, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[],3]
+[[2],3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance.tsx
new file mode 100644
index 00000000000..3f75571bd70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance.tsx
@@ -0,0 +1,32 @@
+import {makeObject_Primitives, setPropertyByKey} from 'shared-runtime';
+
+function useFoo({value, cond}) {
+  let x: any = makeObject_Primitives();
+  if (cond) {
+    setPropertyByKey(x, 'a', null);
+  } else {
+    setPropertyByKey(x, 'a', {b: 2});
+  }
+
+  /**
+   * y should take a dependency on `x`, not `x.a.b` here
+   */
+  const y = [];
+  if (!cond) {
+    y.push(x.a.b);
+  }
+
+  x = makeObject_Primitives();
+  setPropertyByKey(x, 'a', {b: value});
+
+  return [y, x.a.b];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 3, cond: true}],
+  sequentialRenders: [
+    {value: 3, cond: true},
+    {value: 3, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance1.expect.md
new file mode 100644
index 00000000000..54ee5676b3f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance1.expect.md
@@ -0,0 +1,96 @@
+
+## Input
+
+```javascript
+import {identity, shallowCopy, Stringify, useIdentity} from 'shared-runtime';
+
+type HasA = {kind: 'hasA'; a: {value: number}};
+type HasC = {kind: 'hasC'; c: {value: number}};
+function Foo({cond}: {cond: boolean}) {
+  let x: HasA | HasC = shallowCopy({kind: 'hasA', a: {value: 2}});
+  /**
+   * This read of x.a.value is outside of x's identifier mutable
+   * range + scope range. We mark this ssa instance (x_@0) as having
+   * a non-null object property `x.a`.
+   */
+  Math.max(x.a.value, 2);
+  if (cond) {
+    x = shallowCopy({kind: 'hasC', c: {value: 3}});
+  }
+
+  /**
+   * Since this x (x_@2 = phi(x_@0, x_@1)) is a different ssa instance,
+   * we cannot safely hoist a read of `x.a.value`
+   */
+  return <Stringify val={!cond && [(x as HasA).a.value + 2]} />;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: false}],
+  sequentialRenders: [{cond: false}, {cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, shallowCopy, Stringify, useIdentity } from "shared-runtime";
+
+type HasA = { kind: "hasA"; a: { value: number } };
+type HasC = { kind: "hasC"; c: { value: number } };
+function Foo(t0) {
+  const $ = _c(7);
+  const { cond } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = shallowCopy({ kind: "hasA", a: { value: 2 } });
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let x = t1;
+
+  Math.max(x.a.value, 2);
+  if (cond) {
+    let t2;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = shallowCopy({ kind: "hasC", c: { value: 3 } });
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    x = t2;
+  }
+  let t2;
+  if ($[2] !== cond || $[3] !== x) {
+    t2 = !cond && [(x as HasA).a.value + 2];
+    $[2] = cond;
+    $[3] = x;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t2) {
+    t3 = <Stringify val={t2} />;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ cond: false }],
+  sequentialRenders: [{ cond: false }, { cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"val":[4]}</div>
+<div>{"val":false}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance1.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance1.tsx
new file mode 100644
index 00000000000..147ca858093
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/hoist-deps-diff-ssa-instance1.tsx
@@ -0,0 +1,27 @@
+import {identity, shallowCopy, Stringify, useIdentity} from 'shared-runtime';
+
+type HasA = {kind: 'hasA'; a: {value: number}};
+type HasC = {kind: 'hasC'; c: {value: number}};
+function Foo({cond}: {cond: boolean}) {
+  let x: HasA | HasC = shallowCopy({kind: 'hasA', a: {value: 2}});
+  /**
+   * This read of x.a.value is outside of x's identifier mutable
+   * range + scope range. We mark this ssa instance (x_@0) as having
+   * a non-null object property `x.a`.
+   */
+  Math.max(x.a.value, 2);
+  if (cond) {
+    x = shallowCopy({kind: 'hasC', c: {value: 3}});
+  }
+
+  /**
+   * Since this x (x_@2 = phi(x_@0, x_@1)) is a different ssa instance,
+   * we cannot safely hoist a read of `x.a.value`
+   */
+  return <Stringify val={!cond && [(x as HasA).a.value + 2]} />;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: false}],
+  sequentialRenders: [{cond: false}, {cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/infer-function-cond-access-not-hoisted.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/infer-function-cond-access-not-hoisted.expect.md
new file mode 100644
index 00000000000..263dd4d2e78
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/infer-function-cond-access-not-hoisted.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Foo({a, shouldReadA}) {
+  return (
+    <Stringify
+      fn={() => {
+        if (shouldReadA) return a.b.c;
+        return null;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(3);
+  const { a, shouldReadA } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== shouldReadA) {
+    t1 = (
+      <Stringify
+        fn={() => {
+          if (shouldReadA) {
+            return a.b.c;
+          }
+          return null;
+        }}
+        shouldInvokeFns={true}
+      />
+    );
+    $[0] = a;
+    $[1] = shouldReadA;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ a: null, shouldReadA: true }],
+  sequentialRenders: [
+    { a: null, shouldReadA: true },
+    { a: null, shouldReadA: false },
+    { a: { b: { c: 4 } }, shouldReadA: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function","result":null},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/infer-function-cond-access-not-hoisted.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/infer-function-cond-access-not-hoisted.tsx
new file mode 100644
index 00000000000..e571ee7b953
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/infer-function-cond-access-not-hoisted.tsx
@@ -0,0 +1,23 @@
+import {Stringify} from 'shared-runtime';
+
+function Foo({a, shouldReadA}) {
+  return (
+    <Stringify
+      fn={() => {
+        if (shouldReadA) return a.b.c;
+        return null;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: null, shouldReadA: true}],
+  sequentialRenders: [
+    {a: null, shouldReadA: true},
+    {a: null, shouldReadA: false},
+    {a: {b: {c: 4}}, shouldReadA: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md
new file mode 100644
index 00000000000..d4b473c2006
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+// This tests an optimization, NOT a correctness property.
+// When propagating reactive dependencies of an inner scope up to its parent,
+// we prefer to retain granularity.
+//
+// In this test, we check that Forget propagates the inner scope's conditional
+// dependencies (e.g. props.a.b) instead of only its derived minimal
+// unconditional dependencies (e.g. props).
+// ```javascript
+//  scope @0 (deps=[???] decls=[x, y]) {
+//    let y = {};
+//    scope @1 (deps=[props] decls=[x]) {
+//      let x = {};
+//      if (foo) mutate1(x, props.a.b);
+//    }
+//    mutate2(y, props.a.b);
+//  }
+
+import {CONST_TRUE, setProperty} from 'shared-runtime';
+
+function useJoinCondDepsInUncondScopes(props) {
+  let y = {};
+  let x = {};
+  if (CONST_TRUE) {
+    setProperty(x, props.a.b);
+  }
+  setProperty(y, props.a.b);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useJoinCondDepsInUncondScopes,
+  params: [{a: {b: 3}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // This tests an optimization, NOT a correctness property.
+// When propagating reactive dependencies of an inner scope up to its parent,
+// we prefer to retain granularity.
+//
+// In this test, we check that Forget propagates the inner scope's conditional
+// dependencies (e.g. props.a.b) instead of only its derived minimal
+// unconditional dependencies (e.g. props).
+// ```javascript
+//  scope @0 (deps=[???] decls=[x, y]) {
+//    let y = {};
+//    scope @1 (deps=[props] decls=[x]) {
+//      let x = {};
+//      if (foo) mutate1(x, props.a.b);
+//    }
+//    mutate2(y, props.a.b);
+//  }
+
+import { CONST_TRUE, setProperty } from "shared-runtime";
+
+function useJoinCondDepsInUncondScopes(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.a.b) {
+    const y = {};
+    const x = {};
+    if (CONST_TRUE) {
+      setProperty(x, props.a.b);
+    }
+    setProperty(y, props.a.b);
+    t0 = [x, y];
+    $[0] = props.a.b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useJoinCondDepsInUncondScopes,
+  params: [{ a: { b: 3 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"wat0":3},{"wat0":3}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.js
new file mode 100644
index 00000000000..393e0556626
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.js
@@ -0,0 +1,33 @@
+// This tests an optimization, NOT a correctness property.
+// When propagating reactive dependencies of an inner scope up to its parent,
+// we prefer to retain granularity.
+//
+// In this test, we check that Forget propagates the inner scope's conditional
+// dependencies (e.g. props.a.b) instead of only its derived minimal
+// unconditional dependencies (e.g. props).
+// ```javascript
+//  scope @0 (deps=[???] decls=[x, y]) {
+//    let y = {};
+//    scope @1 (deps=[props] decls=[x]) {
+//      let x = {};
+//      if (foo) mutate1(x, props.a.b);
+//    }
+//    mutate2(y, props.a.b);
+//  }
+
+import {CONST_TRUE, setProperty} from 'shared-runtime';
+
+function useJoinCondDepsInUncondScopes(props) {
+  let y = {};
+  let x = {};
+  if (CONST_TRUE) {
+    setProperty(x, props.a.b);
+  }
+  setProperty(y, props.a.b);
+  return [x, y];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useJoinCondDepsInUncondScopes,
+  params: [{a: {b: 3}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md
new file mode 100644
index 00000000000..e024bc893a0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  b0: {
+    if (objIsNull) {
+      break b0;
+    }
+    x.push(obj.a);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+    // check we preserve nullthrows
+    {obj: {a: undefined}, objIsNull: false},
+    {obj: undefined, objIsNull: false},
+    {obj: {a: undefined}, objIsNull: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(3);
+  const { obj, objIsNull } = t0;
+  let x;
+  if ($[0] !== obj || $[1] !== objIsNull) {
+    x = [];
+    bb0: {
+      if (objIsNull) {
+        break bb0;
+      }
+
+      x.push(obj.a);
+    }
+    $[0] = obj;
+    $[1] = objIsNull;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ obj: null, objIsNull: true }],
+  sequentialRenders: [
+    { obj: null, objIsNull: true },
+    { obj: { a: 2 }, objIsNull: false },
+    // check we preserve nullthrows
+    { obj: { a: undefined }, objIsNull: false },
+    { obj: undefined, objIsNull: false },
+    { obj: { a: undefined }, objIsNull: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
+[2]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.ts
new file mode 100644
index 00000000000..cd8b3393fc4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.ts
@@ -0,0 +1,23 @@
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  b0: {
+    if (objIsNull) {
+      break b0;
+    }
+    x.push(obj.a);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+    // check we preserve nullthrows
+    {obj: {a: undefined}, objIsNull: false},
+    {obj: undefined, objIsNull: false},
+    {obj: {a: undefined}, objIsNull: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md
new file mode 100644
index 00000000000..d00e8d65269
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  const x = [];
+  label: {
+    if (cond) {
+      break label;
+    }
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, cond: false},
+    // preserve nullthrows
+    {input: null, cond: false},
+    {input: null, cond: true},
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(5);
+  const { input, cond } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== input) {
+    x = [];
+    bb0: {
+      if (cond) {
+        break bb0;
+      }
+      let t1;
+      if ($[3] !== input.a.b) {
+        t1 = identity(input.a.b);
+        $[3] = input.a.b;
+        $[4] = t1;
+      } else {
+        t1 = $[4];
+      }
+      x.push(t1);
+    }
+    $[0] = cond;
+    $[1] = input;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, cond: false }],
+  sequentialRenders: [
+    { input: { a: { b: 2 } }, cond: false },
+    // preserve nullthrows
+    { input: null, cond: false },
+    { input: null, cond: true },
+    { input: {}, cond: false },
+    { input: { a: { b: null } }, cond: false },
+    { input: { a: null }, cond: false },
+    { input: { a: { b: 3 } }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'a') ]]
+[]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.ts
new file mode 100644
index 00000000000..84b8bbc0a46
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.ts
@@ -0,0 +1,27 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  const x = [];
+  label: {
+    if (cond) {
+      break label;
+    }
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, cond: false},
+    // preserve nullthrows
+    {input: null, cond: false},
+    {input: null, cond: true},
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md
new file mode 100644
index 00000000000..055d1ce12e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  for (let i = 0; i < 5; i++) {
+    if (objIsNull) {
+      continue;
+    }
+    x.push(obj.a);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+    // check we preserve nullthrows
+    {obj: {a: undefined}, objIsNull: false},
+    {obj: undefined, objIsNull: false},
+    {obj: {a: undefined}, objIsNull: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(3);
+  const { obj, objIsNull } = t0;
+  let x;
+  if ($[0] !== obj || $[1] !== objIsNull) {
+    x = [];
+    for (let i = 0; i < 5; i++) {
+      if (objIsNull) {
+        continue;
+      }
+
+      x.push(obj.a);
+    }
+    $[0] = obj;
+    $[1] = objIsNull;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ obj: null, objIsNull: true }],
+  sequentialRenders: [
+    { obj: null, objIsNull: true },
+    { obj: { a: 2 }, objIsNull: false },
+    // check we preserve nullthrows
+    { obj: { a: undefined }, objIsNull: false },
+    { obj: undefined, objIsNull: false },
+    { obj: { a: undefined }, objIsNull: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
+[2,2,2,2,2]
+[null,null,null,null,null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
+[null,null,null,null,null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.ts
new file mode 100644
index 00000000000..61efecd2bc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.ts
@@ -0,0 +1,23 @@
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  for (let i = 0; i < 5; i++) {
+    if (objIsNull) {
+      continue;
+    }
+    x.push(obj.a);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+    // check we preserve nullthrows
+    {obj: {a: undefined}, objIsNull: false},
+    {obj: undefined, objIsNull: false},
+    {obj: {a: undefined}, objIsNull: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps.expect.md
new file mode 100644
index 00000000000..1c2162352b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps.expect.md
@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond, hasAB}) {
+  const x = [];
+  if (cond) {
+    if (!hasAB) {
+      return null;
+    }
+    x.push(identity(input.a.b));
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, cond: true, hasAB: false}],
+  sequentialRenders: [
+    {input: {a: {b: 1}}, cond: true, hasAB: true},
+    {input: null, cond: true, hasAB: false},
+    // preserve nullthrows
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+    {input: {a: undefined}, cond: true, hasAB: true},
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+    {input: undefined, cond: true, hasAB: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(9);
+  const { input, cond, hasAB } = t0;
+  let t1;
+  let x;
+  if ($[0] !== cond || $[1] !== hasAB || $[2] !== input) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (cond) {
+        if (!hasAB) {
+          t1 = null;
+          break bb0;
+        }
+        let t2;
+        if ($[5] !== input.a.b) {
+          t2 = identity(input.a.b);
+          $[5] = input.a.b;
+          $[6] = t2;
+        } else {
+          t2 = $[6];
+        }
+        x.push(t2);
+      } else {
+        let t2;
+        if ($[7] !== input.a.b) {
+          t2 = identity(input.a.b);
+          $[7] = input.a.b;
+          $[8] = t2;
+        } else {
+          t2 = $[8];
+        }
+        x.push(t2);
+      }
+    }
+    $[0] = cond;
+    $[1] = hasAB;
+    $[2] = input;
+    $[3] = t1;
+    $[4] = x;
+  } else {
+    t1 = $[3];
+    x = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { b: 1 }, cond: true, hasAB: false }],
+  sequentialRenders: [
+    { input: { a: { b: 1 } }, cond: true, hasAB: true },
+    { input: null, cond: true, hasAB: false },
+    // preserve nullthrows
+    { input: { a: { b: undefined } }, cond: true, hasAB: true },
+    { input: { a: undefined }, cond: true, hasAB: true },
+    { input: { a: { b: undefined } }, cond: true, hasAB: true },
+    { input: undefined, cond: true, hasAB: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+null
+[null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps.ts
new file mode 100644
index 00000000000..3c57541a83d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps.ts
@@ -0,0 +1,28 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond, hasAB}) {
+  const x = [];
+  if (cond) {
+    if (!hasAB) {
+      return null;
+    }
+    x.push(identity(input.a.b));
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, cond: true, hasAB: false}],
+  sequentialRenders: [
+    {input: {a: {b: 1}}, cond: true, hasAB: true},
+    {input: null, cond: true, hasAB: false},
+    // preserve nullthrows
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+    {input: {a: undefined}, cond: true, hasAB: true},
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+    {input: undefined, cond: true, hasAB: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps1.expect.md
new file mode 100644
index 00000000000..ca8228e2db0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps1.expect.md
@@ -0,0 +1,123 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond, hasAB}) {
+  const x = [];
+  if (cond) {
+    if (!hasAB) {
+      return null;
+    } else {
+      x.push(identity(input.a.b));
+    }
+    x.push(identity(input.a.b));
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, cond: true, hasAB: false}],
+  sequentialRenders: [
+    {input: {a: {b: 1}}, cond: true, hasAB: true},
+    {input: null, cond: true, hasAB: false},
+    // preserve nullthrows
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+    {input: {a: null}, cond: true, hasAB: true},
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(11);
+  const { input, cond, hasAB } = t0;
+  let t1;
+  let x;
+  if ($[0] !== cond || $[1] !== hasAB || $[2] !== input) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (cond) {
+        if (!hasAB) {
+          t1 = null;
+          break bb0;
+        } else {
+          let t2;
+          if ($[5] !== input.a.b) {
+            t2 = identity(input.a.b);
+            $[5] = input.a.b;
+            $[6] = t2;
+          } else {
+            t2 = $[6];
+          }
+          x.push(t2);
+        }
+        let t2;
+        if ($[7] !== input.a.b) {
+          t2 = identity(input.a.b);
+          $[7] = input.a.b;
+          $[8] = t2;
+        } else {
+          t2 = $[8];
+        }
+        x.push(t2);
+      } else {
+        let t2;
+        if ($[9] !== input.a.b) {
+          t2 = identity(input.a.b);
+          $[9] = input.a.b;
+          $[10] = t2;
+        } else {
+          t2 = $[10];
+        }
+        x.push(t2);
+      }
+    }
+    $[0] = cond;
+    $[1] = hasAB;
+    $[2] = input;
+    $[3] = t1;
+    $[4] = x;
+  } else {
+    t1 = $[3];
+    x = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { b: 1 }, cond: true, hasAB: false }],
+  sequentialRenders: [
+    { input: { a: { b: 1 } }, cond: true, hasAB: true },
+    { input: null, cond: true, hasAB: false },
+    // preserve nullthrows
+    { input: { a: { b: undefined } }, cond: true, hasAB: true },
+    { input: { a: null }, cond: true, hasAB: true },
+    { input: { a: { b: undefined } }, cond: true, hasAB: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,1]
+null
+[null,null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[null,null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps1.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps1.ts
new file mode 100644
index 00000000000..07a4b8e5d30
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/reduce-if-nonexhaustive-poisoned-deps1.ts
@@ -0,0 +1,29 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond, hasAB}) {
+  const x = [];
+  if (cond) {
+    if (!hasAB) {
+      return null;
+    } else {
+      x.push(identity(input.a.b));
+    }
+    x.push(identity(input.a.b));
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, cond: true, hasAB: false}],
+  sequentialRenders: [
+    {input: {a: {b: 1}}, cond: true, hasAB: true},
+    {input: null, cond: true, hasAB: false},
+    // preserve nullthrows
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+    {input: {a: null}, cond: true, hasAB: true},
+    {input: {a: {b: undefined}}, cond: true, hasAB: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md
new file mode 100644
index 00000000000..ce12fb17b06
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  if (objIsNull) {
+    return;
+  }
+  x.push(obj.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+    // check we preserve nullthrows
+    {obj: {a: undefined}, objIsNull: false},
+    {obj: undefined, objIsNull: false},
+    {obj: {a: undefined}, objIsNull: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(4);
+  const { obj, objIsNull } = t0;
+  let t1;
+  let x;
+  if ($[0] !== obj || $[1] !== objIsNull) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (objIsNull) {
+        t1 = undefined;
+        break bb0;
+      }
+
+      x.push(obj.b);
+    }
+    $[0] = obj;
+    $[1] = objIsNull;
+    $[2] = t1;
+    $[3] = x;
+  } else {
+    t1 = $[2];
+    x = $[3];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ obj: null, objIsNull: true }],
+  sequentialRenders: [
+    { obj: null, objIsNull: true },
+    { obj: { a: 2 }, objIsNull: false },
+    // check we preserve nullthrows
+    { obj: { a: undefined }, objIsNull: false },
+    { obj: undefined, objIsNull: false },
+    { obj: { a: undefined }, objIsNull: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+[null]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.ts
new file mode 100644
index 00000000000..1992b3ab653
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.ts
@@ -0,0 +1,21 @@
+function useFoo({obj, objIsNull}) {
+  const x = [];
+  if (objIsNull) {
+    return;
+  }
+  x.push(obj.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{obj: null, objIsNull: true}],
+  sequentialRenders: [
+    {obj: null, objIsNull: true},
+    {obj: {a: 2}, objIsNull: false},
+    // check we preserve nullthrows
+    {obj: {a: undefined}, objIsNull: false},
+    {obj: undefined, objIsNull: false},
+    {obj: {a: undefined}, objIsNull: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md
new file mode 100644
index 00000000000..058bf85b69f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  const x = [];
+  if (cond) {
+    return null;
+  }
+  x.push(identity(input.a.b));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, cond: false},
+    // preserve nullthrows
+    {input: null, cond: false},
+    {input: null, cond: true},
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(6);
+  const { input, cond } = t0;
+  let t1;
+  let x;
+  if ($[0] !== cond || $[1] !== input) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (cond) {
+        t1 = null;
+        break bb0;
+      }
+      let t2;
+      if ($[4] !== input.a.b) {
+        t2 = identity(input.a.b);
+        $[4] = input.a.b;
+        $[5] = t2;
+      } else {
+        t2 = $[5];
+      }
+      x.push(t2);
+    }
+    $[0] = cond;
+    $[1] = input;
+    $[2] = t1;
+    $[3] = x;
+  } else {
+    t1 = $[2];
+    x = $[3];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, cond: false }],
+  sequentialRenders: [
+    { input: { a: { b: 2 } }, cond: false },
+    // preserve nullthrows
+    { input: null, cond: false },
+    { input: null, cond: true },
+    { input: {}, cond: false },
+    { input: { a: { b: null } }, cond: false },
+    { input: { a: null }, cond: false },
+    { input: { a: { b: 3 } }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'a') ]]
+null
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.ts
new file mode 100644
index 00000000000..98b8ab33758
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.ts
@@ -0,0 +1,25 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  const x = [];
+  if (cond) {
+    return null;
+  }
+  x.push(identity(input.a.b));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, cond: false},
+    // preserve nullthrows
+    {input: null, cond: false},
+    {input: null, cond: true},
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md
new file mode 100644
index 00000000000..3bfc7e24675
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  const x = [];
+  label: {
+    if (cond) {
+      break label;
+    } else {
+      x.push(identity(input.a.b));
+    }
+  }
+  return x[0];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: null, cond: true},
+    {input: {a: {b: 2}}, cond: false},
+    {input: null, cond: true},
+    // preserve nullthrows
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(5);
+  const { input, cond } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== input) {
+    x = [];
+    bb0: if (cond) {
+      break bb0;
+    } else {
+      let t1;
+      if ($[3] !== input.a.b) {
+        t1 = identity(input.a.b);
+        $[3] = input.a.b;
+        $[4] = t1;
+      } else {
+        t1 = $[4];
+      }
+      x.push(t1);
+    }
+    $[0] = cond;
+    $[1] = input;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x[0];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, cond: false }],
+  sequentialRenders: [
+    { input: null, cond: true },
+    { input: { a: { b: 2 } }, cond: false },
+    { input: null, cond: true },
+    // preserve nullthrows
+    { input: {}, cond: false },
+    { input: { a: { b: null } }, cond: false },
+    { input: { a: null }, cond: false },
+    { input: { a: { b: 3 } }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+2
+
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+null
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+3
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.ts
new file mode 100644
index 00000000000..83c0da3fede
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.ts
@@ -0,0 +1,28 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  const x = [];
+  label: {
+    if (cond) {
+      break label;
+    } else {
+      x.push(identity(input.a.b));
+    }
+  }
+  return x[0];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: null, cond: true},
+    {input: {a: {b: 2}}, cond: false},
+    {input: null, cond: true},
+    // preserve nullthrows
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md
new file mode 100644
index 00000000000..16a16d24149
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+function useFoo({input, cond}) {
+  const x = [];
+  label: {
+    if (cond) {
+      break label;
+    }
+  }
+  x.push(input.a.b); // unconditional
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, cond: false},
+    // preserve nullthrows
+    {input: null, cond: false},
+    {input: null, cond: true},
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(3);
+  const { input, cond } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== input.a.b) {
+    x = [];
+    bb0: if (cond) {
+      break bb0;
+    }
+
+    x.push(input.a.b);
+    $[0] = cond;
+    $[1] = input.a.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, cond: false }],
+  sequentialRenders: [
+    { input: { a: { b: 2 } }, cond: false },
+    // preserve nullthrows
+    { input: null, cond: false },
+    { input: null, cond: true },
+    { input: {}, cond: false },
+    { input: { a: { b: null } }, cond: false },
+    { input: { a: null }, cond: false },
+    { input: { a: { b: 3 } }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.ts
new file mode 100644
index 00000000000..8a173da2041
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.ts
@@ -0,0 +1,25 @@
+function useFoo({input, cond}) {
+  const x = [];
+  label: {
+    if (cond) {
+      break label;
+    }
+  }
+  x.push(input.a.b); // unconditional
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, cond: false},
+    // preserve nullthrows
+    {input: null, cond: false},
+    {input: null, cond: true},
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md
new file mode 100644
index 00000000000..2715a0c92da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+function useFoo({input, max}) {
+  const x = [];
+  let i = 0;
+  while (true) {
+    i += 1;
+    if (i > max) {
+      break;
+    }
+  }
+  x.push(i);
+  x.push(input.a.b); // unconditional
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, max: 8}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, max: 8},
+    // preserve nullthrows
+    {input: null, max: 8},
+    {input: {}, max: 8},
+    {input: {a: {b: null}}, max: 8},
+    {input: {a: null}, max: 8},
+    {input: {a: {b: 3}}, max: 8},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(t0) {
+  const $ = _c(3);
+  const { input, max } = t0;
+  let x;
+  if ($[0] !== input.a.b || $[1] !== max) {
+    x = [];
+    let i = 0;
+    while (true) {
+      i = i + 1;
+      if (i > max) {
+        break;
+      }
+    }
+
+    x.push(i);
+    x.push(input.a.b);
+    $[0] = input.a.b;
+    $[1] = max;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, max: 8 }],
+  sequentialRenders: [
+    { input: { a: { b: 2 } }, max: 8 },
+    // preserve nullthrows
+    { input: null, max: 8 },
+    { input: {}, max: 8 },
+    { input: { a: { b: null } }, max: 8 },
+    { input: { a: null }, max: 8 },
+    { input: { a: { b: 3 } }, max: 8 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [9,2]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'a') ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[9,null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[9,3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.ts
new file mode 100644
index 00000000000..a9c9dd8caef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.ts
@@ -0,0 +1,27 @@
+function useFoo({input, max}) {
+  const x = [];
+  let i = 0;
+  while (true) {
+    i += 1;
+    if (i > max) {
+      break;
+    }
+  }
+  x.push(i);
+  x.push(input.a.b); // unconditional
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, max: 8}],
+  sequentialRenders: [
+    {input: {a: {b: 2}}, max: 8},
+    // preserve nullthrows
+    {input: null, max: 8},
+    {input: {}, max: 8},
+    {input: {a: {b: null}}, max: 8},
+    {input: {a: null}, max: 8},
+    {input: {a: {b: 3}}, max: 8},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md
new file mode 100644
index 00000000000..845ea4b5ac2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, hasAB, returnNull}) {
+  const x = [];
+  if (!hasAB) {
+    x.push(identity(input.a));
+    if (!returnNull) {
+      return null;
+    }
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, hasAB: false, returnNull: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(9);
+  const { input, hasAB, returnNull } = t0;
+  let t1;
+  let x;
+  if ($[0] !== hasAB || $[1] !== input.a || $[2] !== returnNull) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (!hasAB) {
+        let t2;
+        if ($[5] !== input.a) {
+          t2 = identity(input.a);
+          $[5] = input.a;
+          $[6] = t2;
+        } else {
+          t2 = $[6];
+        }
+        x.push(t2);
+        if (!returnNull) {
+          t1 = null;
+          break bb0;
+        }
+      } else {
+        let t2;
+        if ($[7] !== input.a.b) {
+          t2 = identity(input.a.b);
+          $[7] = input.a.b;
+          $[8] = t2;
+        } else {
+          t2 = $[8];
+        }
+        x.push(t2);
+      }
+    }
+    $[0] = hasAB;
+    $[1] = input.a;
+    $[2] = returnNull;
+    $[3] = t1;
+    $[4] = x;
+  } else {
+    t1 = $[3];
+    x = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { b: 1 }, hasAB: false, returnNull: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.ts
new file mode 100644
index 00000000000..e3a43ca1612
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.ts
@@ -0,0 +1,19 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, hasAB, returnNull}) {
+  const x = [];
+  if (!hasAB) {
+    x.push(identity(input.a));
+    if (!returnNull) {
+      return null;
+    }
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, hasAB: false, returnNull: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps1.expect.md
new file mode 100644
index 00000000000..d3e463495bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps1.expect.md
@@ -0,0 +1,123 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond2, cond1}) {
+  const x = [];
+  if (cond1) {
+    if (!cond2) {
+      x.push(identity(input.a.b));
+      return null;
+    } else {
+      x.push(identity(input.a.b));
+    }
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, cond1: true, cond2: false}],
+  sequentialRenders: [
+    {input: {a: {b: 1}}, cond1: true, cond2: true},
+    {input: null, cond1: true, cond2: false},
+    // preserve nullthrows
+    {input: {a: {b: undefined}}, cond1: true, cond2: true},
+    {input: {a: null}, cond1: true, cond2: true},
+    {input: {a: {b: undefined}}, cond1: true, cond2: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(11);
+  const { input, cond2, cond1 } = t0;
+  let t1;
+  let x;
+  if ($[0] !== cond1 || $[1] !== cond2 || $[2] !== input.a.b) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (cond1) {
+        if (!cond2) {
+          let t2;
+          if ($[5] !== input.a.b) {
+            t2 = identity(input.a.b);
+            $[5] = input.a.b;
+            $[6] = t2;
+          } else {
+            t2 = $[6];
+          }
+          x.push(t2);
+          t1 = null;
+          break bb0;
+        } else {
+          let t2;
+          if ($[7] !== input.a.b) {
+            t2 = identity(input.a.b);
+            $[7] = input.a.b;
+            $[8] = t2;
+          } else {
+            t2 = $[8];
+          }
+          x.push(t2);
+        }
+      } else {
+        let t2;
+        if ($[9] !== input.a.b) {
+          t2 = identity(input.a.b);
+          $[9] = input.a.b;
+          $[10] = t2;
+        } else {
+          t2 = $[10];
+        }
+        x.push(t2);
+      }
+    }
+    $[0] = cond1;
+    $[1] = cond2;
+    $[2] = input.a.b;
+    $[3] = t1;
+    $[4] = x;
+  } else {
+    t1 = $[3];
+    x = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { b: 1 }, cond1: true, cond2: false }],
+  sequentialRenders: [
+    { input: { a: { b: 1 } }, cond1: true, cond2: true },
+    { input: null, cond1: true, cond2: false },
+    // preserve nullthrows
+    { input: { a: { b: undefined } }, cond1: true, cond2: true },
+    { input: { a: null }, cond1: true, cond2: true },
+    { input: { a: { b: undefined } }, cond1: true, cond2: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'a') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps1.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps1.ts
new file mode 100644
index 00000000000..57948a3cb53
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps1.ts
@@ -0,0 +1,29 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, cond2, cond1}) {
+  const x = [];
+  if (cond1) {
+    if (!cond2) {
+      x.push(identity(input.a.b));
+      return null;
+    } else {
+      x.push(identity(input.a.b));
+    }
+  } else {
+    x.push(identity(input.a.b));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, cond1: true, cond2: false}],
+  sequentialRenders: [
+    {input: {a: {b: 1}}, cond1: true, cond2: true},
+    {input: null, cond1: true, cond2: false},
+    // preserve nullthrows
+    {input: {a: {b: undefined}}, cond1: true, cond2: true},
+    {input: {a: null}, cond1: true, cond2: true},
+    {input: {a: {b: undefined}}, cond1: true, cond2: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md
new file mode 100644
index 00000000000..11ca823fa2d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  if (cond) {
+    return {result: 'early return'};
+  }
+
+  // unconditional
+  const x = [];
+  arrayPush(x, input.a.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: null, cond: true},
+    {input: {a: {b: 2}}, cond: false},
+    {input: null, cond: true},
+    // preserve nullthrows
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(3);
+  const { input, cond } = t0;
+  if (cond) {
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = { result: "early return" };
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    return t1;
+  }
+  let x;
+  if ($[1] !== input.a.b) {
+    x = [];
+    arrayPush(x, input.a.b);
+    $[1] = input.a.b;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, cond: false }],
+  sequentialRenders: [
+    { input: null, cond: true },
+    { input: { a: { b: 2 } }, cond: false },
+    { input: null, cond: true },
+    // preserve nullthrows
+    { input: {}, cond: false },
+    { input: { a: { b: null } }, cond: false },
+    { input: { a: null }, cond: false },
+    { input: { a: { b: 3 } }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"result":"early return"}
+[2]
+{"result":"early return"}
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.ts
new file mode 100644
index 00000000000..9ea6e9554cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.ts
@@ -0,0 +1,27 @@
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  if (cond) {
+    return {result: 'early return'};
+  }
+
+  // unconditional
+  const x = [];
+  arrayPush(x, input.a.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: null, cond: true},
+    {input: {a: {b: 2}}, cond: false},
+    {input: null, cond: true},
+    // preserve nullthrows
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md
new file mode 100644
index 00000000000..dd7509c48c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  if (cond) {
+    throw new Error('throw with error!');
+  }
+
+  // unconditional
+  const x = [];
+  arrayPush(x, input.a.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: null, cond: true},
+    {input: {a: {b: 2}}, cond: false},
+    {input: null, cond: true},
+    // preserve nullthrows
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { input, cond } = t0;
+  if (cond) {
+    throw new Error("throw with error!");
+  }
+  let x;
+  if ($[0] !== input.a.b) {
+    x = [];
+    arrayPush(x, input.a.b);
+    $[0] = input.a.b;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { a: { b: 2 } }, cond: false }],
+  sequentialRenders: [
+    { input: null, cond: true },
+    { input: { a: { b: 2 } }, cond: false },
+    { input: null, cond: true },
+    // preserve nullthrows
+    { input: {}, cond: false },
+    { input: { a: { b: null } }, cond: false },
+    { input: { a: null }, cond: false },
+    { input: { a: { b: 3 } }, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) Error: throw with error! ]]
+[2]
+[[ (exception in render) Error: throw with error! ]]
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
+[null]
+[[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.ts
new file mode 100644
index 00000000000..923b1770657
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.ts
@@ -0,0 +1,27 @@
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({input, cond}) {
+  if (cond) {
+    throw new Error('throw with error!');
+  }
+
+  // unconditional
+  const x = [];
+  arrayPush(x, input.a.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {a: {b: 2}}, cond: false}],
+  sequentialRenders: [
+    {input: null, cond: true},
+    {input: {a: {b: 2}}, cond: false},
+    {input: null, cond: true},
+    // preserve nullthrows
+    {input: {}, cond: false},
+    {input: {a: {b: null}}, cond: false},
+    {input: {a: null}, cond: false},
+    {input: {a: {b: 3}}, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md
new file mode 100644
index 00000000000..a66540655ab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a.b` or a subpath as a dependency.
+//
+// (1) Since the reactive block producing x unconditionally read props.a.<...>,
+//     reading `props.a.b` outside of the block would still preserve nullthrows
+//     semantics of source code
+// (2) Technically, props.a, props.a.b, and props.a.b.c are all reactive deps.
+//     However, `props.a?.b` is only dependent on whether `props.a` is nullish,
+//     not its actual value. Since we already preserve nullthrows on `props.a`,
+//     we technically do not need to add `props.a` as a dependency.
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  x.push(props.a.b.c);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {b: {c: 1}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a.b` or a subpath as a dependency.
+//
+// (1) Since the reactive block producing x unconditionally read props.a.<...>,
+//     reading `props.a.b` outside of the block would still preserve nullthrows
+//     semantics of source code
+// (2) Technically, props.a, props.a.b, and props.a.b.c are all reactive deps.
+//     However, `props.a?.b` is only dependent on whether `props.a` is nullish,
+//     not its actual value. Since we already preserve nullthrows on `props.a`,
+//     we technically do not need to add `props.a` as a dependency.
+
+function Component(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a.b) {
+    x = [];
+    x.push(props.a?.b);
+    x.push(props.a.b.c);
+    $[0] = props.a.b;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { b: { c: 1 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"c":1},1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.ts
new file mode 100644
index 00000000000..b4dfed33d89
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.ts
@@ -0,0 +1,22 @@
+// To preserve the nullthrows behavior and reactive deps of this code,
+// Forget needs to add `props.a.b` or a subpath as a dependency.
+//
+// (1) Since the reactive block producing x unconditionally read props.a.<...>,
+//     reading `props.a.b` outside of the block would still preserve nullthrows
+//     semantics of source code
+// (2) Technically, props.a, props.a.b, and props.a.b.c are all reactive deps.
+//     However, `props.a?.b` is only dependent on whether `props.a` is nullish,
+//     not its actual value. Since we already preserve nullthrows on `props.a`,
+//     we technically do not need to add `props.a` as a dependency.
+
+function Component(props) {
+  let x = [];
+  x.push(props.a?.b);
+  x.push(props.a.b.c);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {b: {c: 1}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md
new file mode 100644
index 00000000000..7818ca4e0da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = [];
+  x.push(props.items?.length);
+  x.push(props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: {edges: null, length: 0}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.items?.edges || $[1] !== props.items?.length) {
+    x = [];
+    x.push(props.items?.length);
+    let t0;
+    if ($[3] !== props.items?.edges) {
+      t0 = props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? [];
+      $[3] = props.items?.edges;
+      $[4] = t0;
+    } else {
+      t0 = $[4];
+    }
+    x.push(t0);
+    $[0] = props.items?.edges;
+    $[1] = props.items?.length;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: { edges: null, length: 0 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0,[]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.ts
new file mode 100644
index 00000000000..331cd4af110
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.ts
@@ -0,0 +1,11 @@
+function Component(props) {
+  const x = [];
+  x.push(props.items?.length);
+  x.push(props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: {edges: null, length: 0}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md
new file mode 100644
index 00000000000..39d9462b49c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+// When an object's properties are only read conditionally, we should
+
+import {identity} from 'shared-runtime';
+
+// track the base object as a dependency.
+function useOnlyConditionalDependencies({props, cond}) {
+  const x = {};
+  if (identity(cond)) {
+    x.b = props.a.b;
+    x.c = props.a.b.c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useOnlyConditionalDependencies,
+  params: [{props: {a: {b: 2}}, cond: true}],
+  sequentialRenders: [
+    {props: {a: {b: 2}}, cond: true},
+    {props: null, cond: false},
+    // check we preserve nullthrows
+    {props: {a: {b: {c: undefined}}}, cond: true},
+    {props: {a: {b: undefined}}, cond: true},
+    {props: {a: {b: {c: undefined}}}, cond: true},
+    {props: undefined, cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // When an object's properties are only read conditionally, we should
+
+import { identity } from "shared-runtime";
+
+// track the base object as a dependency.
+function useOnlyConditionalDependencies(t0) {
+  const $ = _c(3);
+  const { props, cond } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== props) {
+    x = {};
+    if (identity(cond)) {
+      x.b = props.a.b;
+      x.c = props.a.b.c;
+    }
+    $[0] = cond;
+    $[1] = props;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useOnlyConditionalDependencies,
+  params: [{ props: { a: { b: 2 } }, cond: true }],
+  sequentialRenders: [
+    { props: { a: { b: 2 } }, cond: true },
+    { props: null, cond: false },
+    // check we preserve nullthrows
+    { props: { a: { b: { c: undefined } } }, cond: true },
+    { props: { a: { b: undefined } }, cond: true },
+    { props: { a: { b: { c: undefined } } }, cond: true },
+    { props: undefined, cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":2}
+{}
+{"b":{}}
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'c') ]]
+{"b":{}}
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.js
new file mode 100644
index 00000000000..f5f249f4ac6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.js
@@ -0,0 +1,27 @@
+// When an object's properties are only read conditionally, we should
+
+import {identity} from 'shared-runtime';
+
+// track the base object as a dependency.
+function useOnlyConditionalDependencies({props, cond}) {
+  const x = {};
+  if (identity(cond)) {
+    x.b = props.a.b;
+    x.c = props.a.b.c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useOnlyConditionalDependencies,
+  params: [{props: {a: {b: 2}}, cond: true}],
+  sequentialRenders: [
+    {props: {a: {b: 2}}, cond: true},
+    {props: null, cond: false},
+    // check we preserve nullthrows
+    {props: {a: {b: {c: undefined}}}, cond: true},
+    {props: {a: {b: undefined}}, cond: true},
+    {props: {a: {b: {c: undefined}}}, cond: true},
+    {props: undefined, cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md
new file mode 100644
index 00000000000..83e050da29f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// When a conditional dependency `props.a.b.c` has no unconditional dependency
+// in its subpath or superpath, we should find the nearest unconditional access
+
+import {identity} from 'shared-runtime';
+
+// and promote it to an unconditional dependency.
+function usePromoteUnconditionalAccessToDependency(props, other) {
+  const x = {};
+  x.a = props.a.a.a;
+  if (identity(other)) {
+    x.c = props.a.b.c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: usePromoteUnconditionalAccessToDependency,
+  params: [{a: {a: {a: 3}}}, false],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // When a conditional dependency `props.a.b.c` has no unconditional dependency
+// in its subpath or superpath, we should find the nearest unconditional access
+
+import { identity } from "shared-runtime";
+
+// and promote it to an unconditional dependency.
+function usePromoteUnconditionalAccessToDependency(props, other) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== other || $[1] !== props.a.a.a || $[2] !== props.a.b) {
+    x = {};
+    x.a = props.a.a.a;
+    if (identity(other)) {
+      x.c = props.a.b.c;
+    }
+    $[0] = other;
+    $[1] = props.a.a.a;
+    $[2] = props.a.b;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: usePromoteUnconditionalAccessToDependency,
+  params: [{ a: { a: { a: 3 } } }, false],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.js
new file mode 100644
index 00000000000..c89be5469a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.js
@@ -0,0 +1,19 @@
+// When a conditional dependency `props.a.b.c` has no unconditional dependency
+// in its subpath or superpath, we should find the nearest unconditional access
+
+import {identity} from 'shared-runtime';
+
+// and promote it to an unconditional dependency.
+function usePromoteUnconditionalAccessToDependency(props, other) {
+  const x = {};
+  x.a = props.a.a.a;
+  if (identity(other)) {
+    x.c = props.a.b.c;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: usePromoteUnconditionalAccessToDependency,
+  params: [{a: {a: {a: 3}}}, false],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md
new file mode 100644
index 00000000000..41a7a25d63a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md
@@ -0,0 +1,101 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function useFoo({input, inputHasAB, inputHasABC}) {
+  const x = [];
+  if (!inputHasABC) {
+    x.push(identity(input.a));
+    if (!inputHasAB) {
+      return null;
+    }
+    x.push(identity(input.a.b));
+  } else {
+    x.push(identity(input.a.b.c));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, inputHasAB: false, inputHasABC: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(11);
+  const { input, inputHasAB, inputHasABC } = t0;
+  let t1;
+  let x;
+  if ($[0] !== input.a || $[1] !== inputHasAB || $[2] !== inputHasABC) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      if (!inputHasABC) {
+        let t2;
+        if ($[5] !== input.a) {
+          t2 = identity(input.a);
+          $[5] = input.a;
+          $[6] = t2;
+        } else {
+          t2 = $[6];
+        }
+        x.push(t2);
+        if (!inputHasAB) {
+          t1 = null;
+          break bb0;
+        }
+        let t3;
+        if ($[7] !== input.a.b) {
+          t3 = identity(input.a.b);
+          $[7] = input.a.b;
+          $[8] = t3;
+        } else {
+          t3 = $[8];
+        }
+        x.push(t3);
+      } else {
+        let t2;
+        if ($[9] !== input.a.b.c) {
+          t2 = identity(input.a.b.c);
+          $[9] = input.a.b.c;
+          $[10] = t2;
+        } else {
+          t2 = $[10];
+        }
+        x.push(t2);
+      }
+    }
+    $[0] = input.a;
+    $[1] = inputHasAB;
+    $[2] = inputHasABC;
+    $[3] = t1;
+    $[4] = x;
+  } else {
+    t1 = $[3];
+    x = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ input: { b: 1 }, inputHasAB: false, inputHasABC: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.ts
new file mode 100644
index 00000000000..4bb8b49ec67
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.ts
@@ -0,0 +1,20 @@
+import {identity} from 'shared-runtime';
+
+function useFoo({input, inputHasAB, inputHasABC}) {
+  const x = [];
+  if (!inputHasABC) {
+    x.push(identity(input.a));
+    if (!inputHasAB) {
+      return null;
+    }
+    x.push(identity(input.a.b));
+  } else {
+    x.push(identity(input.a.b.c));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{input: {b: 1}, inputHasAB: false, inputHasABC: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md
new file mode 100644
index 00000000000..03e3e963979
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// When a conditional dependency `props.a` is a subpath of an unconditional
+// dependency `props.a.b`, we can access `props.a` while preserving program
+// semantics (with respect to nullthrows).
+// deps: {`props.a`, `props.a.b`} can further reduce to just `props.a`
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSubpath1(props, cond) {
+  const x = {};
+  x.b = props.a.b;
+  if (identity(cond)) {
+    x.a = props.a;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSubpath1,
+  params: [{a: {b: 3}}, false],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // When a conditional dependency `props.a` is a subpath of an unconditional
+// dependency `props.a.b`, we can access `props.a` while preserving program
+// semantics (with respect to nullthrows).
+// deps: {`props.a`, `props.a.b`} can further reduce to just `props.a`
+
+import { identity } from "shared-runtime";
+
+// ordering of accesses should not matter
+function useConditionalSubpath1(props, cond) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== cond || $[1] !== props.a) {
+    x = {};
+    x.b = props.a.b;
+    if (identity(cond)) {
+      x.a = props.a;
+    }
+    $[0] = cond;
+    $[1] = props.a;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSubpath1,
+  params: [{ a: { b: 3 } }, false],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.js
new file mode 100644
index 00000000000..858e3fc5ead
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.js
@@ -0,0 +1,21 @@
+// When a conditional dependency `props.a` is a subpath of an unconditional
+// dependency `props.a.b`, we can access `props.a` while preserving program
+// semantics (with respect to nullthrows).
+// deps: {`props.a`, `props.a.b`} can further reduce to just `props.a`
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSubpath1(props, cond) {
+  const x = {};
+  x.b = props.a.b;
+  if (identity(cond)) {
+    x.a = props.a;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSubpath1,
+  params: [{a: {b: 3}}, false],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md
new file mode 100644
index 00000000000..6c0d9047d95
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// When a conditional dependency `props.a` is a subpath of an unconditional
+// dependency `props.a.b`, we can access `props.a` while preserving program
+// semantics (with respect to nullthrows).
+// deps: {`props.a`, `props.a.b`} can further reduce to just `props.a`
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSubpath2(props, other) {
+  const x = {};
+  if (identity(other)) {
+    x.a = props.a;
+  }
+  x.b = props.a.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSubpath2,
+  params: [{a: {b: 3}}, false],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // When a conditional dependency `props.a` is a subpath of an unconditional
+// dependency `props.a.b`, we can access `props.a` while preserving program
+// semantics (with respect to nullthrows).
+// deps: {`props.a`, `props.a.b`} can further reduce to just `props.a`
+
+import { identity } from "shared-runtime";
+
+// ordering of accesses should not matter
+function useConditionalSubpath2(props, other) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== other || $[1] !== props.a) {
+    x = {};
+    if (identity(other)) {
+      x.a = props.a;
+    }
+
+    x.b = props.a.b;
+    $[0] = other;
+    $[1] = props.a;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSubpath2,
+  params: [{ a: { b: 3 } }, false],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.js
new file mode 100644
index 00000000000..1971893fac0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.js
@@ -0,0 +1,21 @@
+// When a conditional dependency `props.a` is a subpath of an unconditional
+// dependency `props.a.b`, we can access `props.a` while preserving program
+// semantics (with respect to nullthrows).
+// deps: {`props.a`, `props.a.b`} can further reduce to just `props.a`
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSubpath2(props, other) {
+  const x = {};
+  if (identity(other)) {
+    x.a = props.a;
+  }
+  x.b = props.a.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSubpath2,
+  params: [{a: {b: 3}}, false],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md
new file mode 100644
index 00000000000..5b246175f96
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+// When an unconditional dependency `props.a` is the subpath of a conditional
+// dependency `props.a.b`, we can safely overestimate and only track `props.a`
+// as a dependency
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSuperpath1({props, cond}) {
+  const x = {};
+  x.a = props.a;
+  if (identity(cond)) {
+    x.b = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSuperpath1,
+  params: [{props: {a: null}, cond: false}],
+  sequentialRenders: [
+    {props: {a: null}, cond: false},
+    {props: {a: {}}, cond: true},
+    {props: {a: {b: 3}}, cond: true},
+    {props: {}, cond: false},
+    // test that we preserve nullthrows
+    {props: {a: {b: undefined}}, cond: true},
+    {props: {a: undefined}, cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // When an unconditional dependency `props.a` is the subpath of a conditional
+// dependency `props.a.b`, we can safely overestimate and only track `props.a`
+// as a dependency
+
+import { identity } from "shared-runtime";
+
+// ordering of accesses should not matter
+function useConditionalSuperpath1(t0) {
+  const $ = _c(3);
+  const { props, cond } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== props.a) {
+    x = {};
+    x.a = props.a;
+    if (identity(cond)) {
+      x.b = props.a.b;
+    }
+    $[0] = cond;
+    $[1] = props.a;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSuperpath1,
+  params: [{ props: { a: null }, cond: false }],
+  sequentialRenders: [
+    { props: { a: null }, cond: false },
+    { props: { a: {} }, cond: true },
+    { props: { a: { b: 3 } }, cond: true },
+    { props: {}, cond: false },
+    // test that we preserve nullthrows
+    { props: { a: { b: undefined } }, cond: true },
+    { props: { a: undefined }, cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":null}
+{"a":{}}
+{"a":{"b":3},"b":3}
+{}
+{"a":{}}
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.js
new file mode 100644
index 00000000000..c38e8e9c9af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.js
@@ -0,0 +1,29 @@
+// When an unconditional dependency `props.a` is the subpath of a conditional
+// dependency `props.a.b`, we can safely overestimate and only track `props.a`
+// as a dependency
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSuperpath1({props, cond}) {
+  const x = {};
+  x.a = props.a;
+  if (identity(cond)) {
+    x.b = props.a.b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSuperpath1,
+  params: [{props: {a: null}, cond: false}],
+  sequentialRenders: [
+    {props: {a: null}, cond: false},
+    {props: {a: {}}, cond: true},
+    {props: {a: {b: 3}}, cond: true},
+    {props: {}, cond: false},
+    // test that we preserve nullthrows
+    {props: {a: {b: undefined}}, cond: true},
+    {props: {a: undefined}, cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md
new file mode 100644
index 00000000000..ffb310e7791
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+// When an unconditional dependency `props.a` is the subpath of a conditional
+// dependency `props.a.b`, we can safely overestimate and only track `props.a`
+// as a dependency
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSuperpath2({props, cond}) {
+  const x = {};
+  if (identity(cond)) {
+    x.b = props.a.b;
+  }
+  x.a = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSuperpath2,
+  params: [{props: {a: null}, cond: false}],
+  sequentialRenders: [
+    {props: {a: null}, cond: false},
+    {props: {a: {}}, cond: true},
+    {props: {a: {b: 3}}, cond: true},
+    {props: {}, cond: false},
+    // test that we preserve nullthrows
+    {props: {a: {b: undefined}}, cond: true},
+    {props: {a: undefined}, cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // When an unconditional dependency `props.a` is the subpath of a conditional
+// dependency `props.a.b`, we can safely overestimate and only track `props.a`
+// as a dependency
+
+import { identity } from "shared-runtime";
+
+// ordering of accesses should not matter
+function useConditionalSuperpath2(t0) {
+  const $ = _c(3);
+  const { props, cond } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== props.a) {
+    x = {};
+    if (identity(cond)) {
+      x.b = props.a.b;
+    }
+
+    x.a = props.a;
+    $[0] = cond;
+    $[1] = props.a;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSuperpath2,
+  params: [{ props: { a: null }, cond: false }],
+  sequentialRenders: [
+    { props: { a: null }, cond: false },
+    { props: { a: {} }, cond: true },
+    { props: { a: { b: 3 } }, cond: true },
+    { props: {}, cond: false },
+    // test that we preserve nullthrows
+    { props: { a: { b: undefined } }, cond: true },
+    { props: { a: undefined }, cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":null}
+{"a":{}}
+{"b":3,"a":{"b":3}}
+{}
+{"a":{}}
+[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'b') ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.js
new file mode 100644
index 00000000000..23e7163ccf5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.js
@@ -0,0 +1,29 @@
+// When an unconditional dependency `props.a` is the subpath of a conditional
+// dependency `props.a.b`, we can safely overestimate and only track `props.a`
+// as a dependency
+
+import {identity} from 'shared-runtime';
+
+// ordering of accesses should not matter
+function useConditionalSuperpath2({props, cond}) {
+  const x = {};
+  if (identity(cond)) {
+    x.b = props.a.b;
+  }
+  x.a = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useConditionalSuperpath2,
+  params: [{props: {a: null}, cond: false}],
+  sequentialRenders: [
+    {props: {a: null}, cond: false},
+    {props: {a: {}}, cond: true},
+    {props: {a: {b: 3}}, cond: true},
+    {props: {}, cond: false},
+    // test that we preserve nullthrows
+    {props: {a: {b: undefined}}, cond: true},
+    {props: {a: undefined}, cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.expect.md
new file mode 100644
index 00000000000..bb99a5d90fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  return <Stringify fn={() => a.b?.c.d?.e} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: {b: null}},
+    {a: {b: {c: {d: null}}}},
+    {a: {b: {c: {d: {e: 4}}}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a.b?.c.d?.e) {
+    t1 = <Stringify fn={() => a.b?.c.d?.e} shouldInvokeFns={true} />;
+    $[0] = a.b?.c.d?.e;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: null }],
+  sequentialRenders: [
+    { a: null },
+    { a: { b: null } },
+    { a: { b: { c: { d: null } } } },
+    { a: { b: { c: { d: { e: 4 } } } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: Cannot read properties of null (reading 'b') ]]
+<div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function"},"shouldInvokeFns":true}</div>
+<div>{"fn":{"kind":"Function","result":4},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.tsx
new file mode 100644
index 00000000000..11d5858434c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-infer-function-uncond-optionals-hoisted.tsx
@@ -0,0 +1,16 @@
+import {Stringify} from 'shared-runtime';
+
+function useFoo({a}) {
+  return <Stringify fn={() => a.b?.c.d?.e} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: null}],
+  sequentialRenders: [
+    {a: null},
+    {a: {b: null}},
+    {a: {b: {c: {d: null}}}},
+    {a: {b: {c: {d: {e: 4}}}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-merge-ssa-phi-access-nodes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-merge-ssa-phi-access-nodes.expect.md
new file mode 100644
index 00000000000..ccd81b3e144
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-merge-ssa-phi-access-nodes.expect.md
@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+import {
+  identity,
+  makeObject_Primitives,
+  setPropertyByKey,
+} from 'shared-runtime';
+
+/**
+ * A bit of an edge case, but we could further optimize here by merging
+ * re-orderability of nodes across phis.
+ */
+function useFoo(cond) {
+  let x;
+  if (cond) {
+    /** start of scope for x_@0 */
+    x = {};
+    setPropertyByKey(x, 'a', {b: 2});
+    /** end of scope for x_@0 */
+    Math.max(x.a.b, 0);
+  } else {
+    /** start of scope for x_@1 */
+    x = makeObject_Primitives();
+    setPropertyByKey(x, 'a', {b: 3});
+    /** end of scope for x_@1 */
+    Math.max(x.a.b, 0);
+  }
+  /**
+   * At this point, we have a phi node.
+   * x_@2 = phi(x_@0, x_@1)
+   *
+   * We can assume that both x_@0 and x_@1 both have non-null `x.a` properties,
+   * so we can infer that x_@2 does as well.
+   */
+
+  // Here, y should take a dependency on `x.a.b`
+  const y = [];
+  if (identity(cond)) {
+    y.push(x.a.b);
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  identity,
+  makeObject_Primitives,
+  setPropertyByKey,
+} from "shared-runtime";
+
+/**
+ * A bit of an edge case, but we could further optimize here by merging
+ * re-orderability of nodes across phis.
+ */
+function useFoo(cond) {
+  const $ = _c(5);
+  let x;
+  if (cond) {
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      x = {};
+      setPropertyByKey(x, "a", { b: 2 });
+      $[0] = x;
+    } else {
+      x = $[0];
+    }
+
+    Math.max(x.a.b, 0);
+  } else {
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      x = makeObject_Primitives();
+      setPropertyByKey(x, "a", { b: 3 });
+      $[1] = x;
+    } else {
+      x = $[1];
+    }
+
+    Math.max(x.a.b, 0);
+  }
+  let y;
+  if ($[2] !== cond || $[3] !== x) {
+    y = [];
+    if (identity(cond)) {
+      y.push(x.a.b);
+    }
+    $[2] = cond;
+    $[3] = x;
+    $[4] = y;
+  } else {
+    y = $[4];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-merge-ssa-phi-access-nodes.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-merge-ssa-phi-access-nodes.ts
new file mode 100644
index 00000000000..749b6c0a831
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/todo-merge-ssa-phi-access-nodes.ts
@@ -0,0 +1,45 @@
+import {
+  identity,
+  makeObject_Primitives,
+  setPropertyByKey,
+} from 'shared-runtime';
+
+/**
+ * A bit of an edge case, but we could further optimize here by merging
+ * re-orderability of nodes across phis.
+ */
+function useFoo(cond) {
+  let x;
+  if (cond) {
+    /** start of scope for x_@0 */
+    x = {};
+    setPropertyByKey(x, 'a', {b: 2});
+    /** end of scope for x_@0 */
+    Math.max(x.a.b, 0);
+  } else {
+    /** start of scope for x_@1 */
+    x = makeObject_Primitives();
+    setPropertyByKey(x, 'a', {b: 3});
+    /** end of scope for x_@1 */
+    Math.max(x.a.b, 0);
+  }
+  /**
+   * At this point, we have a phi node.
+   * x_@2 = phi(x_@0, x_@1)
+   *
+   * We can assume that both x_@0 and x_@1 both have non-null `x.a` properties,
+   * so we can infer that x_@2 does as well.
+   */
+
+  // Here, y should take a dependency on `x.a.b`
+  const y = [];
+  if (identity(cond)) {
+    y.push(x.a.b);
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-access-in-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-access-in-mutable-range.expect.md
new file mode 100644
index 00000000000..c91cf94445c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-access-in-mutable-range.expect.md
@@ -0,0 +1,105 @@
+
+## Input
+
+```javascript
+// x.a.b was accessed unconditionally within the mutable range of x.
+// As a result, we cannot infer anything about whether `x` or `x.a`
+// may be null. This means that it's not safe to hoist reads from x
+// (e.g. take `x.a` or `x.a.b` as a dependency).
+
+import {identity, makeObject_Primitives, setProperty} from 'shared-runtime';
+
+function Component({cond, other}) {
+  const x = makeObject_Primitives();
+  setProperty(x, {b: 3, other}, 'a');
+  identity(x.a.b);
+  if (!cond) {
+    x.a = null;
+  }
+
+  const y = [identity(cond) && x.a.b];
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+  sequentialRenders: [
+    {cond: false},
+    {cond: false},
+    {cond: false, other: 8},
+    {cond: true},
+    {cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // x.a.b was accessed unconditionally within the mutable range of x.
+// As a result, we cannot infer anything about whether `x` or `x.a`
+// may be null. This means that it's not safe to hoist reads from x
+// (e.g. take `x.a` or `x.a.b` as a dependency).
+
+import { identity, makeObject_Primitives, setProperty } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(8);
+  const { cond, other } = t0;
+  let x;
+  if ($[0] !== cond || $[1] !== other) {
+    x = makeObject_Primitives();
+    setProperty(x, { b: 3, other }, "a");
+    identity(x.a.b);
+    if (!cond) {
+      x.a = null;
+    }
+    $[0] = cond;
+    $[1] = other;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  let t1;
+  if ($[3] !== cond || $[4] !== x) {
+    t1 = identity(cond) && x.a.b;
+    $[3] = cond;
+    $[4] = x;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== t1) {
+    t2 = [t1];
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const y = t2;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false }],
+  sequentialRenders: [
+    { cond: false },
+    { cond: false },
+    { cond: false, other: 8 },
+    { cond: true },
+    { cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [false]
+[false]
+[false]
+[null]
+[null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-access-in-mutable-range.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-access-in-mutable-range.js
new file mode 100644
index 00000000000..c4e4819f6b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-access-in-mutable-range.js
@@ -0,0 +1,30 @@
+// x.a.b was accessed unconditionally within the mutable range of x.
+// As a result, we cannot infer anything about whether `x` or `x.a`
+// may be null. This means that it's not safe to hoist reads from x
+// (e.g. take `x.a` or `x.a.b` as a dependency).
+
+import {identity, makeObject_Primitives, setProperty} from 'shared-runtime';
+
+function Component({cond, other}) {
+  const x = makeObject_Primitives();
+  setProperty(x, {b: 3, other}, 'a');
+  identity(x.a.b);
+  if (!cond) {
+    x.a = null;
+  }
+
+  const y = [identity(cond) && x.a.b];
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+  sequentialRenders: [
+    {cond: false},
+    {cond: false},
+    {cond: false, other: 8},
+    {cond: true},
+    {cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md
new file mode 100644
index 00000000000..ff15f1a3360
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// Test that we can track non-overlapping dependencies separately.
+// (not needed for correctness but for dependency granularity)
+function TestNonOverlappingDescendantTracked(props) {
+  let x = {};
+  x.a = props.a.x.y;
+  x.b = props.b;
+  x.c = props.a.c.x.y.z;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestNonOverlappingDescendantTracked,
+  params: [{a: {x: {}, c: {x: {y: {z: 3}}}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Test that we can track non-overlapping dependencies separately.
+// (not needed for correctness but for dependency granularity)
+function TestNonOverlappingDescendantTracked(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.a.c.x.y.z || $[1] !== props.a.x.y || $[2] !== props.b) {
+    x = {};
+    x.a = props.a.x.y;
+    x.b = props.b;
+    x.c = props.a.c.x.y.z;
+    $[0] = props.a.c.x.y.z;
+    $[1] = props.a.x.y;
+    $[2] = props.b;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestNonOverlappingDescendantTracked,
+  params: [{ a: { x: {}, c: { x: { y: { z: 3 } } } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"c":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.js
new file mode 100644
index 00000000000..d80caadd4dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.js
@@ -0,0 +1,14 @@
+// Test that we can track non-overlapping dependencies separately.
+// (not needed for correctness but for dependency granularity)
+function TestNonOverlappingDescendantTracked(props) {
+  let x = {};
+  x.a = props.a.x.y;
+  x.b = props.b;
+  x.c = props.a.c.x.y.z;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestNonOverlappingDescendantTracked,
+  params: [{a: {x: {}, c: {x: {y: {z: 3}}}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md
new file mode 100644
index 00000000000..206bec00e60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// Test that we can track non-overlapping dependencies separately.
+// (not needed for correctness but for dependency granularity)
+function TestNonOverlappingTracked(props) {
+  let x = {};
+  x.b = props.a.b;
+  x.c = props.a.c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestNonOverlappingTracked,
+  params: [{a: {b: 2, c: 3}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Test that we can track non-overlapping dependencies separately.
+// (not needed for correctness but for dependency granularity)
+function TestNonOverlappingTracked(props) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== props.a.b || $[1] !== props.a.c) {
+    x = {};
+    x.b = props.a.b;
+    x.c = props.a.c;
+    $[0] = props.a.b;
+    $[1] = props.a.c;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestNonOverlappingTracked,
+  params: [{ a: { b: 2, c: 3 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":2,"c":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.js
new file mode 100644
index 00000000000..5e490b6dc93
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.js
@@ -0,0 +1,13 @@
+// Test that we can track non-overlapping dependencies separately.
+// (not needed for correctness but for dependency granularity)
+function TestNonOverlappingTracked(props) {
+  let x = {};
+  x.b = props.a.b;
+  x.c = props.a.c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestNonOverlappingTracked,
+  params: [{a: {b: 2, c: 3}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md
new file mode 100644
index 00000000000..8e8a14d5b19
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// Test that we correctly track a subpath if the subpath itself is accessed as
+// a dependency
+function TestOverlappingDescendantTracked(props) {
+  let x = {};
+  x.b = props.a.b.c;
+  x.c = props.a.b.c.x.y;
+  x.a = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestOverlappingDescendantTracked,
+  params: [{a: {b: {c: {x: {y: 5}}}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Test that we correctly track a subpath if the subpath itself is accessed as
+// a dependency
+function TestOverlappingDescendantTracked(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a) {
+    x = {};
+    x.b = props.a.b.c;
+    x.c = props.a.b.c.x.y;
+    x.a = props.a;
+    $[0] = props.a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestOverlappingDescendantTracked,
+  params: [{ a: { b: { c: { x: { y: 5 } } } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":{"x":{"y":5}},"c":5,"a":{"b":{"c":"[[ cyclic ref *1 ]]"}}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.js
new file mode 100644
index 00000000000..77621515b08
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.js
@@ -0,0 +1,14 @@
+// Test that we correctly track a subpath if the subpath itself is accessed as
+// a dependency
+function TestOverlappingDescendantTracked(props) {
+  let x = {};
+  x.b = props.a.b.c;
+  x.c = props.a.b.c.x.y;
+  x.a = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestOverlappingDescendantTracked,
+  params: [{a: {b: {c: {x: {y: 5}}}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md
new file mode 100644
index 00000000000..4026ef4183c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// Test that we correctly track a subpath if the subpath itself is accessed as
+// a dependency
+function TestOverlappingTracked(props) {
+  let x = {};
+  x.b = props.a.b;
+  x.c = props.a.c;
+  x.a = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestOverlappingTracked,
+  params: [{a: {c: 2}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Test that we correctly track a subpath if the subpath itself is accessed as
+// a dependency
+function TestOverlappingTracked(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a) {
+    x = {};
+    x.b = props.a.b;
+    x.c = props.a.c;
+    x.a = props.a;
+    $[0] = props.a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestOverlappingTracked,
+  params: [{ a: { c: 2 } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"c":2,"a":{"c":2}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.js
new file mode 100644
index 00000000000..9cef3f48ac5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.js
@@ -0,0 +1,14 @@
+// Test that we correctly track a subpath if the subpath itself is accessed as
+// a dependency
+function TestOverlappingTracked(props) {
+  let x = {};
+  x.b = props.a.b;
+  x.c = props.a.c;
+  x.a = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestOverlappingTracked,
+  params: [{a: {c: 2}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md
new file mode 100644
index 00000000000..9359c712e0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder1(props) {
+  let x = {};
+  x.b = props.a.b;
+  x.a = props.a;
+  x.c = props.a.b.c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder1,
+  params: [{a: {b: {c: 2}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder1(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a) {
+    x = {};
+    x.b = props.a.b;
+    x.a = props.a;
+    x.c = props.a.b.c;
+    $[0] = props.a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder1,
+  params: [{ a: { b: { c: 2 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"b":{"c":2},"a":{"b":"[[ cyclic ref *1 ]]"},"c":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.js
new file mode 100644
index 00000000000..47fd340531b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.js
@@ -0,0 +1,14 @@
+// Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder1(props) {
+  let x = {};
+  x.b = props.a.b;
+  x.a = props.a;
+  x.c = props.a.b.c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder1,
+  params: [{a: {b: {c: 2}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md
new file mode 100644
index 00000000000..b2ca4576d46
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder2(props) {
+  let x = {};
+  x.a = props.a;
+  x.b = props.a.b;
+  x.c = props.a.b.c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder2,
+  params: [{a: {b: {c: 2}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder2(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a) {
+    x = {};
+    x.a = props.a;
+    x.b = props.a.b;
+    x.c = props.a.b.c;
+    $[0] = props.a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder2,
+  params: [{ a: { b: { c: 2 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":{"b":{"c":2}},"b":"[[ cyclic ref *2 ]]","c":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.js
new file mode 100644
index 00000000000..2d6b33fcbed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.js
@@ -0,0 +1,14 @@
+// Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder2(props) {
+  let x = {};
+  x.a = props.a;
+  x.b = props.a.b;
+  x.c = props.a.b.c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder2,
+  params: [{a: {b: {c: 2}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md
new file mode 100644
index 00000000000..6af05fe2613
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder3(props) {
+  let x = {};
+  x.c = props.a.b.c;
+  x.a = props.a;
+  x.b = props.a.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder3,
+  params: [{a: {b: {c: 2}}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder3(props) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== props.a) {
+    x = {};
+    x.c = props.a.b.c;
+    x.a = props.a;
+    x.b = props.a.b;
+    $[0] = props.a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder3,
+  params: [{ a: { b: { c: 2 } } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"c":2,"a":{"b":{"c":2}},"b":"[[ cyclic ref *2 ]]"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.js
new file mode 100644
index 00000000000..1058e395fff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.js
@@ -0,0 +1,14 @@
+// Determine that we only need to track p.a here
+// Ordering of access should not matter
+function TestDepsSubpathOrder3(props) {
+  let x = {};
+  x.c = props.a.b.c;
+  x.a = props.a;
+  x.b = props.a.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TestDepsSubpathOrder3,
+  params: [{a: {b: {c: 2}}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md
new file mode 100644
index 00000000000..b726a723cb0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender false
+function VideoTab() {
+  const ref = useRef();
+  const t = ref.current;
+  let x = () => {
+    console.log(t);
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender false
+function VideoTab() {
+  const $ = _c(1);
+  const ref = useRef();
+  const t = ref.current;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = () => {
+      console.log(t);
+    };
+    t0 = <VideoList videos={x} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.js
new file mode 100644
index 00000000000..e3ff619ffa2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.js
@@ -0,0 +1,10 @@
+// @validateRefAccessDuringRender false
+function VideoTab() {
+  const ref = useRef();
+  const t = ref.current;
+  let x = () => {
+    console.log(t);
+  };
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.expect.md
new file mode 100644
index 00000000000..dd72a91d087
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender:false
+function Foo({a}) {
+  const ref = useRef();
+  const val = ref.current;
+  const x = {a, val};
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender:false
+function Foo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  const ref = useRef();
+  const val = ref.current;
+  let t1;
+  if ($[0] !== a) {
+    const x = { a, val };
+    t1 = <VideoList videos={x} />;
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.js
new file mode 100644
index 00000000000..e4843de2207
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.js
@@ -0,0 +1,8 @@
+// @validateRefAccessDuringRender:false
+function Foo({a}) {
+  const ref = useRef();
+  const val = ref.current;
+  const x = {a, val};
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md
new file mode 100644
index 00000000000..b7f1bd6c336
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender false
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    console.log(ref.current.x);
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender false
+function VideoTab() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = () => {
+      console.log(ref.current.x);
+    };
+    t0 = <VideoList videos={x} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.js
new file mode 100644
index 00000000000..7aaee3b21a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.js
@@ -0,0 +1,9 @@
+// @validateRefAccessDuringRender false
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    console.log(ref.current.x);
+  };
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md
new file mode 100644
index 00000000000..179e9037de4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef({text: {value: null}});
+  const inputChanged = e => {
+    ref.current.text.value = e.target.value;
+  };
+
+  return <input onChange={inputChanged} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { text: { value: null } };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const ref = useRef(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    const inputChanged = (e) => {
+      ref.current.text.value = e.target.value;
+    };
+    t1 = <input onChange={inputChanged} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.js
new file mode 100644
index 00000000000..4958b53a8ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.js
@@ -0,0 +1,15 @@
+import {useRef} from 'react';
+
+function Component() {
+  const ref = useRef({text: {value: null}});
+  const inputChanged = e => {
+    ref.current.text.value = e.target.value;
+  };
+
+  return <input onChange={inputChanged} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.expect.md
new file mode 100644
index 00000000000..3d50eafb503
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender:false
+function Foo({a}) {
+  const ref = useRef();
+  const x = {a, val: ref.current};
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender:false
+function Foo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  const ref = useRef();
+  let t1;
+  if ($[0] !== a) {
+    const x = { a, val: ref.current };
+    t1 = <VideoList videos={x} />;
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.js
new file mode 100644
index 00000000000..087751baa9e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.js
@@ -0,0 +1,7 @@
+// @validateRefAccessDuringRender:false
+function Foo({a}) {
+  const ref = useRef();
+  const x = {a, val: ref.current};
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md
new file mode 100644
index 00000000000..4497a823d36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    console.log(ref.current);
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function VideoTab() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = () => {
+      console.log(ref.current);
+    };
+    t0 = <VideoList videos={x} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.js
new file mode 100644
index 00000000000..0b08ef7b87b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.js
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    console.log(ref.current);
+  };
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md
new file mode 100644
index 00000000000..a55709b2826
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current?.x;
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function VideoTab() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = () => {
+      ref.current?.x;
+    };
+    t0 = <VideoList videos={x} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.js
new file mode 100644
index 00000000000..92b26a8f9ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.js
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current?.x;
+  };
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md
new file mode 100644
index 00000000000..6c6aae35263
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current = 1;
+  };
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function VideoTab() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = () => {
+      ref.current = 1;
+    };
+    t0 = <VideoList videos={x} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.js
new file mode 100644
index 00000000000..00b85bb6820
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.js
@@ -0,0 +1,8 @@
+function VideoTab() {
+  const ref = useRef();
+  let x = () => {
+    ref.current = 1;
+  };
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md
new file mode 100644
index 00000000000..8c620a698cd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const ref = useRef(null);
+  const onChange = e => {
+    const newValue = e.target.value ?? ref.current;
+    ref.current = newValue;
+  };
+  useEffect(() => {
+    console.log(ref.current);
+  });
+  return <Foo onChange={onChange} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      const newValue = e.target.value ?? ref.current;
+      ref.current = newValue;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      console.log(ref.current);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <Foo onChange={onChange} />;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.js
new file mode 100644
index 00000000000..b2d12b00315
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const ref = useRef(null);
+  const onChange = e => {
+    const newValue = e.target.value ?? ref.current;
+    ref.current = newValue;
+  };
+  useEffect(() => {
+    console.log(ref.current);
+  });
+  return <Foo onChange={onChange} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-effect.expect.md
new file mode 100644
index 00000000000..a750afe6fe8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-effect.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useEffect} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const ref = useCustomRef();
+
+  useEffect(() => {
+    ref.current?.click();
+  }, []);
+
+  return <div>foo</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import { useRef, useEffect } from "react";
+
+function useCustomRef() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { click: _temp };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return useRef(t0);
+}
+function _temp() {}
+
+function Foo() {
+  const $ = _c(4);
+  const ref = useCustomRef();
+  let t0;
+  if ($[0] !== ref) {
+    t0 = () => {
+      ref.current?.click();
+    };
+    $[0] = ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <div>foo</div>;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>foo</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-effect.js
new file mode 100644
index 00000000000..516be386554
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-effect.js
@@ -0,0 +1,22 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useEffect} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const ref = useCustomRef();
+
+  useEffect(() => {
+    ref.current?.click();
+  }, []);
+
+  return <div>foo</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md
new file mode 100644
index 00000000000..f74962e0d65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useCallback} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const ref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    ref.current?.click();
+  }, [ref]);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import { useRef, useCallback } from "react";
+
+function useCustomRef() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { click: _temp };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return useRef(t0);
+}
+function _temp() {}
+
+function Foo() {
+  const $ = _c(4);
+  const ref = useCustomRef();
+  let t0;
+  if ($[0] !== ref) {
+    t0 = () => {
+      ref.current?.click();
+    };
+    $[0] = ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[2] !== onClick) {
+    t1 = <button onClick={onClick} />;
+    $[2] = onClick;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.js
new file mode 100644
index 00000000000..bf243ab66cb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.js
@@ -0,0 +1,22 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useCallback} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const ref = useCustomRef();
+
+  const onClick = useCallback(() => {
+    ref.current?.click();
+  }, [ref]);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md
new file mode 100644
index 00000000000..f8de42a07f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useCallback} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const customRef = useCustomRef();
+
+  const onClick = useCallback(() => {
+    customRef.current?.click();
+  }, [customRef]);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import { useRef, useCallback } from "react";
+
+function useCustomRef() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { click: _temp };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return useRef(t0);
+}
+function _temp() {}
+
+function Foo() {
+  const $ = _c(4);
+  const customRef = useCustomRef();
+  let t0;
+  if ($[0] !== customRef) {
+    t0 = () => {
+      customRef.current?.click();
+    };
+    $[0] = customRef;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[2] !== onClick) {
+    t1 = <button onClick={onClick} />;
+    $[2] = onClick;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.js
new file mode 100644
index 00000000000..c4c7870f63f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.js
@@ -0,0 +1,22 @@
+// @enableTreatRefLikeIdentifiersAsRefs @validatePreserveExistingMemoizationGuarantees
+import {useRef, useCallback} from 'react';
+
+function useCustomRef() {
+  return useRef({click: () => {}});
+}
+
+function Foo() {
+  const customRef = useCustomRef();
+
+  const onClick = useCallback(() => {
+    customRef.current?.click();
+  }, [customRef]);
+
+  return <button onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md
new file mode 100644
index 00000000000..7a10cfe48e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+function Foo(props, ref) {
+  useEffect(() => {
+    ref.current = 2;
+  }, []);
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 'foo'}, {ref: {current: 1}}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from "react";
+
+function Foo(props, ref) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== ref) {
+    t0 = () => {
+      ref.current = 2;
+    };
+    $[0] = ref;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== props.bar) {
+    t2 = <div>{props.bar}</div>;
+    $[3] = props.bar;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ bar: "foo" }, { ref: { current: 1 } }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>foo</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.js
new file mode 100644
index 00000000000..ffd9eae08d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.js
@@ -0,0 +1,14 @@
+import {useEffect} from 'react';
+
+function Foo(props, ref) {
+  useEffect(() => {
+    ref.current = 2;
+  }, []);
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 'foo'}, {ref: {current: 1}}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/regexp-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/regexp-literal.expect.md
new file mode 100644
index 00000000000..80b90980bcf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/regexp-literal.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const pattern = /foo/g;
+  const value = makeValue();
+  // We treat RegExp instances as mutable objects (bc they are)
+  // so by default we assume this could be mutating `value`:
+  if (pattern.test(value)) {
+    return <div>{value}</div>;
+  }
+  return <div>Default</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  let value;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const pattern = /foo/g;
+    value = makeValue();
+    t0 = pattern.test(value);
+    $[0] = t0;
+    $[1] = value;
+  } else {
+    t0 = $[0];
+    value = $[1];
+  }
+  if (t0) {
+    let t1;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = <div>{value}</div>;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>Default</div>;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/regexp-literal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/regexp-literal.js
new file mode 100644
index 00000000000..9b22bb7f951
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/regexp-literal.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const pattern = /foo/g;
+  const value = makeValue();
+  // We treat RegExp instances as mutable objects (bc they are)
+  // so by default we assume this could be mutating `value`:
+  if (pattern.test(value)) {
+    return <div>{value}</div>;
+  }
+  return <div>Default</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/relay-transitive-mixeddata.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/relay-transitive-mixeddata.expect.md
new file mode 100644
index 00000000000..5caf2e8e0da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/relay-transitive-mixeddata.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {useFragment} from 'shared-runtime';
+
+/**
+ * React compiler should infer that the returned value is a primitive and avoid
+ * memoizing it.
+ */
+function useRelayData({query, idx}) {
+  'use memo';
+  const data = useFragment('', query);
+  return data.a[idx].toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useRelayData,
+  params: [{query: '', idx: 0}],
+  sequentialRenders: [
+    {query: '', idx: 0},
+    {query: '', idx: 0},
+    {query: '', idx: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { useFragment } from "shared-runtime";
+
+/**
+ * React compiler should infer that the returned value is a primitive and avoid
+ * memoizing it.
+ */
+function useRelayData(t0) {
+  "use memo";
+  const { query, idx } = t0;
+
+  const data = useFragment("", query);
+  return data.a[idx].toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useRelayData,
+  params: [{ query: "", idx: 0 }],
+  sequentialRenders: [
+    { query: "", idx: 0 },
+    { query: "", idx: 0 },
+    { query: "", idx: 1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "1"
+"1"
+"2"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/relay-transitive-mixeddata.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/relay-transitive-mixeddata.js
new file mode 100644
index 00000000000..78708f30c71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/relay-transitive-mixeddata.js
@@ -0,0 +1,21 @@
+import {useFragment} from 'shared-runtime';
+
+/**
+ * React compiler should infer that the returned value is a primitive and avoid
+ * memoizing it.
+ */
+function useRelayData({query, idx}) {
+  'use memo';
+  const data = useFragment('', query);
+  return data.a[idx].toString();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useRelayData,
+  params: [{query: '', idx: 0}],
+  sequentialRenders: [
+    {query: '', idx: 0},
+    {query: '', idx: 0},
+    {query: '', idx: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.expect.md
new file mode 100644
index 00000000000..e8d1d04b061
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+// @enableChangeVariableCodegen
+import {identity} from 'shared-runtime';
+
+const $ = 'module_$';
+const t0 = 'module_t0';
+const c_0 = 'module_c_0';
+function useFoo(props: {value: number}): number {
+  const a = () => {
+    const b = () => {
+      const c = () => {
+        console.log($);
+        console.log(t0);
+        console.log(c_0);
+        return identity(props.value);
+      };
+      return c;
+    };
+    return b;
+  };
+  return a()()();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableChangeVariableCodegen
+import { identity } from "shared-runtime";
+
+const $ = "module_$";
+const t0 = "module_t0";
+const c_0 = "module_c_0";
+function useFoo(props) {
+  const $0 = _c(2);
+  const c_00 = $0[0] !== props.value;
+  let t1;
+  if (c_00) {
+    const a = () => {
+      const b = () => {
+        const c = () => {
+          console.log($);
+          console.log(t0);
+          console.log(c_0);
+          return identity(props.value);
+        };
+        return c;
+      };
+      return b;
+    };
+    t1 = a()()();
+    $0[0] = props.value;
+    $0[1] = t1;
+  } else {
+    t1 = $0[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
+logs: ['module_$','module_t0','module_c_0']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.js
new file mode 100644
index 00000000000..5a3d6a3ef3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.js
@@ -0,0 +1,26 @@
+// @enableChangeVariableCodegen
+import {identity} from 'shared-runtime';
+
+const $ = 'module_$';
+const t0 = 'module_t0';
+const c_0 = 'module_c_0';
+function useFoo(props: {value: number}): number {
+  const a = () => {
+    const b = () => {
+      const c = () => {
+        console.log($);
+        console.log(t0);
+        console.log(c_0);
+        return identity(props.value);
+      };
+      return c;
+    };
+    return b;
+  };
+  return a()()();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-object-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-object-method.expect.md
new file mode 100644
index 00000000000..01130cc3a37
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-object-method.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @enableChangeVariableCodegen
+import {identity} from 'shared-runtime';
+
+const $ = 'module_$';
+const t0 = 'module_t0';
+const c_0 = 'module_c_0';
+function useFoo(props: {value: number}): number {
+  const a = {
+    foo() {
+      const b = {
+        bar() {
+          console.log($);
+          console.log(t0);
+          console.log(c_0);
+          return identity(props.value);
+        },
+      };
+      return b;
+    },
+  };
+  return a.foo().bar();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableChangeVariableCodegen
+import { identity } from "shared-runtime";
+
+const $ = "module_$";
+const t0 = "module_t0";
+const c_0 = "module_c_0";
+function useFoo(props) {
+  const $0 = _c(2);
+  const c_00 = $0[0] !== props;
+  let t1;
+  if (c_00) {
+    const a = {
+      foo() {
+        const b = {
+          bar() {
+            console.log($);
+            console.log(t0);
+            console.log(c_0);
+            return identity(props.value);
+          },
+        };
+        return b;
+      },
+    };
+    t1 = a.foo().bar();
+    $0[0] = props;
+    $0[1] = t1;
+  } else {
+    t1 = $0[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
+logs: ['module_$','module_t0','module_c_0']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-object-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-object-method.js
new file mode 100644
index 00000000000..c1432148a97
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-object-method.js
@@ -0,0 +1,27 @@
+// @enableChangeVariableCodegen
+import {identity} from 'shared-runtime';
+
+const $ = 'module_$';
+const t0 = 'module_t0';
+const c_0 = 'module_c_0';
+function useFoo(props: {value: number}): number {
+  const a = {
+    foo() {
+      const b = {
+        bar() {
+          console.log($);
+          console.log(t0);
+          console.log(c_0);
+          return identity(props.value);
+        },
+      };
+      return b;
+    },
+  };
+  return a.foo().bar();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables.expect.md
new file mode 100644
index 00000000000..71e9680c4e7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @enableChangeVariableCodegen
+import {identity} from 'shared-runtime';
+
+const $ = 'module_$';
+const t0 = 'module_t0';
+const c_0 = 'module_c_0';
+function useFoo(props: {value: number}): number {
+  const results = identity(props.value);
+  console.log($);
+  console.log(t0);
+  console.log(c_0);
+  return results;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableChangeVariableCodegen
+import { identity } from "shared-runtime";
+
+const $ = "module_$";
+const t0 = "module_t0";
+const c_0 = "module_c_0";
+function useFoo(props) {
+  const $0 = _c(2);
+  const c_00 = $0[0] !== props.value;
+  let t1;
+  if (c_00) {
+    t1 = identity(props.value);
+    $0[0] = props.value;
+    $0[1] = t1;
+  } else {
+    t1 = $0[1];
+  }
+  const results = t1;
+  console.log($);
+  console.log(t0);
+  console.log(c_0);
+  return results;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
+logs: ['module_$','module_t0','module_c_0']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables.ts
new file mode 100644
index 00000000000..38e75a82190
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables.ts
@@ -0,0 +1,18 @@
+// @enableChangeVariableCodegen
+import {identity} from 'shared-runtime';
+
+const $ = 'module_$';
+const t0 = 'module_t0';
+const c_0 = 'module_c_0';
+function useFoo(props: {value: number}): number {
+  const results = identity(props.value);
+  console.log($);
+  console.log(t0);
+  console.log(c_0);
+  return results;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.expect.md
new file mode 100644
index 00000000000..61414ae895b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+import {Stringify, identity, useIdentity} from 'shared-runtime';
+
+function Foo({}) {
+  const x = {};
+  const y = {};
+  useIdentity(0);
+  return (
+    <>
+      <Stringify value={identity(y)} />
+      <Stringify value={identity(x)} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, identity, useIdentity } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(9);
+  const x = {};
+  const y = {};
+  useIdentity(0);
+
+  const T0 = Stringify;
+  const t1 = identity(y);
+  let t2;
+  if ($[0] !== T0 || $[1] !== t1) {
+    t2 = <T0 value={t1} />;
+    $[0] = T0;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const T1 = Stringify;
+  const t3 = identity(x);
+  let t4;
+  if ($[3] !== T1 || $[4] !== t3) {
+    t4 = <T1 value={t3} />;
+    $[3] = T1;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== t2 || $[7] !== t4) {
+    t5 = (
+      <>
+        {t2}
+        {t4}
+      </>
+    );
+    $[6] = t2;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.tsx
new file mode 100644
index 00000000000..35995a862bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/renaming-jsx-tag-lowercase.tsx
@@ -0,0 +1,18 @@
+import {Stringify, identity, useIdentity} from 'shared-runtime';
+
+function Foo({}) {
+  const x = {};
+  const y = {};
+  useIdentity(0);
+  return (
+    <>
+      <Stringify value={identity(y)} />
+      <Stringify value={identity(x)} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reordering-across-blocks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reordering-across-blocks.expect.md
new file mode 100644
index 00000000000..aba6e5dc8aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reordering-across-blocks.expect.md
@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component({config}) {
+  /**
+   * The original memoization is optimal in the sense that it has
+   * one output (the object) and one dependency (`config`). Both
+   * the `a` and `b` functions will have to be recreated whenever
+   * `config` changes, cascading to update the object.
+   *
+   * However, we currently only consider consecutive scopes for
+   * merging, so we first see the `a` scope, then the `b` scope,
+   * and see that the output of the `a` scope is used later -
+   * so we don't merge these scopes, and so on.
+   *
+   * The more optimal thing would be to build a dependency graph
+   * of scopes so that we can see the data flow is along the lines
+   * of:
+   *
+   *             config
+   *            /      \
+   *          [a]      [b]
+   *           \       /
+   *           [object]
+   *
+   * All the scopes (shown in []) are transitively dependent on
+   * `config`, so they can be merged.
+   */
+  const object = useMemo(() => {
+    const a = event => {
+      config?.onA?.(event);
+    };
+
+    const b = event => {
+      config?.onB?.(event);
+    };
+
+    return {
+      b,
+      a,
+    };
+  }, [config]);
+
+  return <Stringify value={object} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { config } = t0;
+  let t1;
+  if ($[0] !== config) {
+    t1 = (event) => {
+      config?.onA?.(event);
+    };
+    $[0] = config;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const a = t1;
+  let t2;
+  if ($[2] !== config) {
+    t2 = (event_0) => {
+      config?.onB?.(event_0);
+    };
+    $[2] = config;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const b = t2;
+  let t3;
+  if ($[4] !== a || $[5] !== b) {
+    t3 = { b, a };
+    $[4] = a;
+    $[5] = b;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const object = t3;
+  let t4;
+  if ($[7] !== object) {
+    t4 = <Stringify value={object} />;
+    $[7] = object;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reordering-across-blocks.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reordering-across-blocks.js
new file mode 100644
index 00000000000..a71e0262cf1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reordering-across-blocks.js
@@ -0,0 +1,44 @@
+import {Stringify} from 'shared-runtime';
+
+function Component({config}) {
+  /**
+   * The original memoization is optimal in the sense that it has
+   * one output (the object) and one dependency (`config`). Both
+   * the `a` and `b` functions will have to be recreated whenever
+   * `config` changes, cascading to update the object.
+   *
+   * However, we currently only consider consecutive scopes for
+   * merging, so we first see the `a` scope, then the `b` scope,
+   * and see that the output of the `a` scope is used later -
+   * so we don't merge these scopes, and so on.
+   *
+   * The more optimal thing would be to build a dependency graph
+   * of scopes so that we can see the data flow is along the lines
+   * of:
+   *
+   *             config
+   *            /      \
+   *          [a]      [b]
+   *           \       /
+   *           [object]
+   *
+   * All the scopes (shown in []) are transitively dependent on
+   * `config`, so they can be merged.
+   */
+  const object = useMemo(() => {
+    const a = event => {
+      config?.onA?.(event);
+    };
+
+    const b = event => {
+      config?.onB?.(event);
+    };
+
+    return {
+      b,
+      a,
+    };
+  }, [config]);
+
+  return <Stringify value={object} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-aliased-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-aliased-mutate.expect.md
new file mode 100644
index 00000000000..d306b152dd0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-aliased-mutate.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+// @flow @enableTransitivelyFreezeFunctionExpressions:false @enableNewMutationAliasingModel
+import {arrayPush, setPropertyByKey, Stringify} from 'shared-runtime';
+
+/**
+ * Repro of a bug fixed in the new aliasing model.
+ *
+ * 1. `InferMutableRanges` derives the mutable range of identifiers and their
+ *     aliases from `LoadLocal`, `PropertyLoad`, etc
+ *   - After this pass, y's mutable range only extends to `arrayPush(x, y)`
+ *   - We avoid assigning mutable ranges to loads after y's mutable range, as
+ *     these are working with an immutable value. As a result, `LoadLocal y` and
+ *     `PropertyLoad y` do not get mutable ranges
+ * 2. `InferReactiveScopeVariables` extends mutable ranges and creates scopes,
+ *    as according to the 'co-mutation' of different values
+ *   - Here, we infer that
+ *     - `arrayPush(y, x)` might alias `x` and `y` to each other
+ *     - `setPropertyKey(x, ...)` may mutate both `x` and `y`
+ *   - This pass correctly extends the mutable range of `y`
+ *   - Since we didn't run `InferMutableRange` logic again, the LoadLocal /
+ *     PropertyLoads still don't have a mutable range
+ *
+ * Note that the this bug is an edge case. Compiler output is only invalid for:
+ *  - function expressions with
+ *    `enableTransitivelyFreezeFunctionExpressions:false`
+ *  - functions that throw and get retried without clearing the memocache
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":11},"shouldInvokeFns":true}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+ */
+function useFoo({a, b}: {a: number, b: number}) {
+  const x = [];
+  const y = {value: a};
+
+  arrayPush(x, y); // x and y co-mutate
+  const y_alias = y;
+  const cb = () => y_alias.value;
+  setPropertyByKey(x[0], 'value', b); // might overwrite y.value
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 10}],
+  sequentialRenders: [
+    {a: 2, b: 10},
+    {a: 2, b: 11},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush, setPropertyByKey, Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const x = [];
+    const y = { value: a };
+    arrayPush(x, y);
+    const y_alias = y;
+    const cb = () => y_alias.value;
+    setPropertyByKey(x[0], "value", b);
+    t1 = <Stringify cb={cb} shouldInvokeFns={true} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: 2, b: 10 }],
+  sequentialRenders: [
+    { a: 2, b: 10 },
+    { a: 2, b: 11 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+<div>{"cb":{"kind":"Function","result":11},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-aliased-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-aliased-mutate.js
new file mode 100644
index 00000000000..df9e294261e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-aliased-mutate.js
@@ -0,0 +1,55 @@
+// @flow @enableTransitivelyFreezeFunctionExpressions:false @enableNewMutationAliasingModel
+import {arrayPush, setPropertyByKey, Stringify} from 'shared-runtime';
+
+/**
+ * Repro of a bug fixed in the new aliasing model.
+ *
+ * 1. `InferMutableRanges` derives the mutable range of identifiers and their
+ *     aliases from `LoadLocal`, `PropertyLoad`, etc
+ *   - After this pass, y's mutable range only extends to `arrayPush(x, y)`
+ *   - We avoid assigning mutable ranges to loads after y's mutable range, as
+ *     these are working with an immutable value. As a result, `LoadLocal y` and
+ *     `PropertyLoad y` do not get mutable ranges
+ * 2. `InferReactiveScopeVariables` extends mutable ranges and creates scopes,
+ *    as according to the 'co-mutation' of different values
+ *   - Here, we infer that
+ *     - `arrayPush(y, x)` might alias `x` and `y` to each other
+ *     - `setPropertyKey(x, ...)` may mutate both `x` and `y`
+ *   - This pass correctly extends the mutable range of `y`
+ *   - Since we didn't run `InferMutableRange` logic again, the LoadLocal /
+ *     PropertyLoads still don't have a mutable range
+ *
+ * Note that the this bug is an edge case. Compiler output is only invalid for:
+ *  - function expressions with
+ *    `enableTransitivelyFreezeFunctionExpressions:false`
+ *  - functions that throw and get retried without clearing the memocache
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":11},"shouldInvokeFns":true}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":10},"shouldInvokeFns":true}</div>
+ */
+function useFoo({a, b}: {a: number, b: number}) {
+  const x = [];
+  const y = {value: a};
+
+  arrayPush(x, y); // x and y co-mutate
+  const y_alias = y;
+  const cb = () => y_alias.value;
+  setPropertyByKey(x[0], 'value', b); // might overwrite y.value
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 10}],
+  sequentialRenders: [
+    {a: 2, b: 10},
+    {a: 2, b: 11},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-mutate.expect.md
new file mode 100644
index 00000000000..c3b5d6d9256
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-mutate.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @flow @enableTransitivelyFreezeFunctionExpressions:false @enableNewMutationAliasingModel
+import {setPropertyByKey, Stringify} from 'shared-runtime';
+
+/**
+ * Variation of bug in `bug-aliased-capture-aliased-mutate`.
+ * Fixed in the new inference model.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":3},"shouldInvokeFns":true}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+ */
+
+function useFoo({a}: {a: number, b: number}) {
+  const arr = [];
+  const obj = {value: a};
+
+  setPropertyByKey(obj, 'arr', arr);
+  const obj_alias = obj;
+  const cb = () => obj_alias.arr.length;
+  for (let i = 0; i < a; i++) {
+    arr.push(i);
+  }
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { setPropertyByKey, Stringify } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a) {
+    const arr = [];
+    const obj = { value: a };
+    setPropertyByKey(obj, "arr", arr);
+    const obj_alias = obj;
+    const cb = () => obj_alias.arr.length;
+    for (let i = 0; i < a; i++) {
+      arr.push(i);
+    }
+    t1 = <Stringify cb={cb} shouldInvokeFns={true} />;
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: 2 }],
+  sequentialRenders: [{ a: 2 }, { a: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+<div>{"cb":{"kind":"Function","result":3},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-mutate.js
new file mode 100644
index 00000000000..2ed6941fa7f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-aliased-capture-mutate.js
@@ -0,0 +1,36 @@
+// @flow @enableTransitivelyFreezeFunctionExpressions:false @enableNewMutationAliasingModel
+import {setPropertyByKey, Stringify} from 'shared-runtime';
+
+/**
+ * Variation of bug in `bug-aliased-capture-aliased-mutate`.
+ * Fixed in the new inference model.
+ *
+ * Found differences in evaluator results
+ * Non-forget (expected):
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":3},"shouldInvokeFns":true}</div>
+ * Forget:
+ *   (kind: ok)
+ *   <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+ *   <div>{"cb":{"kind":"Function","result":2},"shouldInvokeFns":true}</div>
+ */
+
+function useFoo({a}: {a: number, b: number}) {
+  const arr = [];
+  const obj = {value: a};
+
+  setPropertyByKey(obj, 'arr', arr);
+  const obj_alias = obj;
+  const cb = () => obj_alias.arr.length;
+  for (let i = 0; i < a; i++) {
+    arr.push(i);
+  }
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2}],
+  sequentialRenders: [{a: 2}, {a: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md
new file mode 100644
index 00000000000..01161d0941e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+import {identity, makeObject_Primitives} from 'shared-runtime';
+
+function useHook() {}
+
+function useTest({cond}) {
+  const val = makeObject_Primitives();
+
+  useHook();
+  /**
+   * We don't technically need a reactive scope for this ternary as
+   * it cannot produce newly allocated values.
+   * While identity(...) may allocate, we can teach the compiler that
+   * its result is only used as as a test condition
+   */
+  const result = identity(cond) ? val : null;
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [{cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, makeObject_Primitives } from "shared-runtime";
+
+function useHook() {}
+
+function useTest(t0) {
+  const $ = _c(3);
+  const { cond } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = makeObject_Primitives();
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const val = t1;
+
+  useHook();
+  let t2;
+  if ($[1] !== cond) {
+    t2 = identity(cond) ? val : null;
+    $[1] = cond;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const result = t2;
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [{ cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.ts
new file mode 100644
index 00000000000..017ea326b40
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.ts
@@ -0,0 +1,22 @@
+import {identity, makeObject_Primitives} from 'shared-runtime';
+
+function useHook() {}
+
+function useTest({cond}) {
+  const val = makeObject_Primitives();
+
+  useHook();
+  /**
+   * We don't technically need a reactive scope for this ternary as
+   * it cannot produce newly allocated values.
+   * While identity(...) may allocate, we can teach the compiler that
+   * its result is only used as as a test condition
+   */
+  const result = identity(cond) ? val : null;
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [{cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-backedge-reference-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-backedge-reference-effect.expect.md
new file mode 100644
index 00000000000..1dc8a1f01a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-backedge-reference-effect.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Foo({userIds}) {
+  return (
+    <Stringify
+      fn={() => {
+        const arr = [];
+
+        for (const selectedUser of userIds) {
+          arr.push(selectedUser);
+        }
+        return arr;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{userIds: [1, 2, 3]}],
+  sequentialRenders: [{userIds: [1, 2, 4]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Foo(t0) {
+  const $ = _c(2);
+  const { userIds } = t0;
+  let t1;
+  if ($[0] !== userIds) {
+    t1 = (
+      <Stringify
+        fn={() => {
+          const arr = [];
+
+          for (const selectedUser of userIds) {
+            arr.push(selectedUser);
+          }
+          return arr;
+        }}
+        shouldInvokeFns={true}
+      />
+    );
+    $[0] = userIds;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ userIds: [1, 2, 3] }],
+  sequentialRenders: [{ userIds: [1, 2, 4] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"fn":{"kind":"Function","result":[1,2,4]},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-backedge-reference-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-backedge-reference-effect.js
new file mode 100644
index 00000000000..03145445ec5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-backedge-reference-effect.js
@@ -0,0 +1,23 @@
+import {Stringify} from 'shared-runtime';
+
+function Foo({userIds}) {
+  return (
+    <Stringify
+      fn={() => {
+        const arr = [];
+
+        for (const selectedUser of userIds) {
+          arr.push(selectedUser);
+        }
+        return arr;
+      }}
+      shouldInvokeFns={true}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{userIds: [1, 2, 3]}],
+  sequentialRenders: [{userIds: [1, 2, 4]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.expect.md
new file mode 100644
index 00000000000..cfbaa345682
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+// @panicThreshold(none)
+'use no memo';
+
+function Foo() {
+  return <button onClick={() => alert('hello!')}>Click me!</button>;
+}
+
+```
+
+## Code
+
+```javascript
+// @panicThreshold(none)
+"use no memo";
+
+function Foo() {
+  return <button onClick={() => alert("hello!")}>Click me!</button>;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.js
new file mode 100644
index 00000000000..405295ee4c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-bailout-nopanic-shouldnt-outline.js
@@ -0,0 +1,6 @@
+// @panicThreshold(none)
+'use no memo';
+
+function Foo() {
+  return <button onClick={() => alert('hello!')}>Click me!</button>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-capturing-func-maybealias-captured-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-capturing-func-maybealias-captured-mutate.expect.md
new file mode 100644
index 00000000000..f6b7ef3b43d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-capturing-func-maybealias-captured-mutate.expect.md
@@ -0,0 +1,111 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {makeArray, mutate} from 'shared-runtime';
+
+/**
+ * Bug repro, fixed in the new mutability/aliasing inference.
+ *
+ * Previous issue:
+ *
+ * Fork of `capturing-func-alias-captured-mutate`, but instead of directly
+ * aliasing `y` via `[y]`, we make an opaque call.
+ *
+ * Note that the bug here is that we don't infer that `a = makeArray(y)`
+ * potentially captures a context variable into a local variable. As a result,
+ * we don't understand that `a[0].x = b` captures `x` into `y` -- instead, we're
+ * currently inferring that this lambda captures `y` (for a potential later
+ * mutation) and simply reads `x`.
+ *
+ * Concretely `InferReferenceEffects.hasContextRefOperand` is incorrectly not
+ * used when we analyze CallExpressions.
+ */
+function Component({foo, bar}: {foo: number; bar: number}) {
+  let x = {foo};
+  let y: {bar: number; x?: {foo: number}} = {bar};
+  const f0 = function () {
+    let a = makeArray(y); // a = [y]
+    let b = x;
+    // this writes y.x = x
+    a[0].x = b;
+  };
+  f0();
+  mutate(y.x);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 3, bar: 4}],
+  sequentialRenders: [
+    {foo: 3, bar: 4},
+    {foo: 3, bar: 5},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { makeArray, mutate } from "shared-runtime";
+
+/**
+ * Bug repro, fixed in the new mutability/aliasing inference.
+ *
+ * Previous issue:
+ *
+ * Fork of `capturing-func-alias-captured-mutate`, but instead of directly
+ * aliasing `y` via `[y]`, we make an opaque call.
+ *
+ * Note that the bug here is that we don't infer that `a = makeArray(y)`
+ * potentially captures a context variable into a local variable. As a result,
+ * we don't understand that `a[0].x = b` captures `x` into `y` -- instead, we're
+ * currently inferring that this lambda captures `y` (for a potential later
+ * mutation) and simply reads `x`.
+ *
+ * Concretely `InferReferenceEffects.hasContextRefOperand` is incorrectly not
+ * used when we analyze CallExpressions.
+ */
+function Component(t0) {
+  const $ = _c(3);
+  const { foo, bar } = t0;
+  let y;
+  if ($[0] !== bar || $[1] !== foo) {
+    const x = { foo };
+    y = { bar };
+    const f0 = function () {
+      const a = makeArray(y);
+      const b = x;
+
+      a[0].x = b;
+    };
+
+    f0();
+    mutate(y.x);
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = y;
+  } else {
+    y = $[2];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 3, bar: 4 }],
+  sequentialRenders: [
+    { foo: 3, bar: 4 },
+    { foo: 3, bar: 5 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"bar":4,"x":{"foo":3,"wat0":"joe"}}
+{"bar":5,"x":{"foo":3,"wat0":"joe"}}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-capturing-func-maybealias-captured-mutate.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-capturing-func-maybealias-captured-mutate.ts
new file mode 100644
index 00000000000..8b7bdeb79be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-capturing-func-maybealias-captured-mutate.ts
@@ -0,0 +1,42 @@
+// @enableNewMutationAliasingModel
+import {makeArray, mutate} from 'shared-runtime';
+
+/**
+ * Bug repro, fixed in the new mutability/aliasing inference.
+ *
+ * Previous issue:
+ *
+ * Fork of `capturing-func-alias-captured-mutate`, but instead of directly
+ * aliasing `y` via `[y]`, we make an opaque call.
+ *
+ * Note that the bug here is that we don't infer that `a = makeArray(y)`
+ * potentially captures a context variable into a local variable. As a result,
+ * we don't understand that `a[0].x = b` captures `x` into `y` -- instead, we're
+ * currently inferring that this lambda captures `y` (for a potential later
+ * mutation) and simply reads `x`.
+ *
+ * Concretely `InferReferenceEffects.hasContextRefOperand` is incorrectly not
+ * used when we analyze CallExpressions.
+ */
+function Component({foo, bar}: {foo: number; bar: number}) {
+  let x = {foo};
+  let y: {bar: number; x?: {foo: number}} = {bar};
+  const f0 = function () {
+    let a = makeArray(y); // a = [y]
+    let b = x;
+    // this writes y.x = x
+    a[0].x = b;
+  };
+  f0();
+  mutate(y.x);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 3, bar: 4}],
+  sequentialRenders: [
+    {foo: 3, bar: 4},
+    {foo: 3, bar: 5},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-context-var-reassign-no-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-context-var-reassign-no-scope.expect.md
new file mode 100644
index 00000000000..cacd5649221
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-context-var-reassign-no-scope.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+import {useState, useEffect} from 'react';
+import {invoke, Stringify} from 'shared-runtime';
+
+function Content() {
+  const [announcement, setAnnouncement] = useState('');
+  const [users, setUsers] = useState([{name: 'John Doe'}, {name: 'Jane Doe'}]);
+
+  // This was originally passed down as an onClick, but React Compiler's test
+  // evaluator doesn't yet support events outside of React
+  useEffect(() => {
+    if (users.length === 2) {
+      let removedUserName = '';
+      setUsers(prevUsers => {
+        const newUsers = [...prevUsers];
+        removedUserName = newUsers.at(-1).name;
+        newUsers.pop();
+        return newUsers;
+      });
+
+      setAnnouncement(`Removed user (${removedUserName})`);
+    }
+  }, [users]);
+
+  return <Stringify users={users} announcement={announcement} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Content,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState, useEffect } from "react";
+import { invoke, Stringify } from "shared-runtime";
+
+function Content() {
+  const $ = _c(8);
+  const [announcement, setAnnouncement] = useState("");
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [{ name: "John Doe" }, { name: "Jane Doe" }];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [users, setUsers] = useState(t0);
+  let t1;
+  if ($[1] !== users.length) {
+    t1 = () => {
+      if (users.length === 2) {
+        let removedUserName = "";
+        setUsers((prevUsers) => {
+          const newUsers = [...prevUsers];
+          removedUserName = newUsers.at(-1).name;
+          newUsers.pop();
+          return newUsers;
+        });
+
+        setAnnouncement(`Removed user (${removedUserName})`);
+      }
+    };
+    $[1] = users.length;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== users) {
+    t2 = [users];
+    $[3] = users;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== announcement || $[6] !== users) {
+    t3 = <Stringify users={users} announcement={announcement} />;
+    $[5] = announcement;
+    $[6] = users;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Content,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"users":[{"name":"John Doe"}],"announcement":"Removed user (Jane Doe)"}</div>
+<div>{"users":[{"name":"John Doe"}],"announcement":"Removed user (Jane Doe)"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-context-var-reassign-no-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-context-var-reassign-no-scope.js
new file mode 100644
index 00000000000..ea37e07491b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-context-var-reassign-no-scope.js
@@ -0,0 +1,31 @@
+import {useState, useEffect} from 'react';
+import {invoke, Stringify} from 'shared-runtime';
+
+function Content() {
+  const [announcement, setAnnouncement] = useState('');
+  const [users, setUsers] = useState([{name: 'John Doe'}, {name: 'Jane Doe'}]);
+
+  // This was originally passed down as an onClick, but React Compiler's test
+  // evaluator doesn't yet support events outside of React
+  useEffect(() => {
+    if (users.length === 2) {
+      let removedUserName = '';
+      setUsers(prevUsers => {
+        const newUsers = [...prevUsers];
+        removedUserName = newUsers.at(-1).name;
+        newUsers.pop();
+        return newUsers;
+      });
+
+      setAnnouncement(`Removed user (${removedUserName})`);
+    }
+  }, [users]);
+
+  return <Stringify users={users} announcement={announcement} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Content,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dce-circular-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dce-circular-reference.expect.md
new file mode 100644
index 00000000000..b9949ffda9b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dce-circular-reference.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component({data}) {
+  let x = 0;
+  for (const item of data) {
+    const {current, other} = item;
+    x += current;
+    identity(other);
+  }
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      data: [
+        {current: 2, other: 3},
+        {current: 4, other: 5},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(2);
+  const { data } = t0;
+  let x = 0;
+  for (const item of data) {
+    const { current, other } = item;
+    x = x + current;
+    identity(other);
+  }
+  let t1;
+  if ($[0] !== x) {
+    t1 = [x];
+    $[0] = x;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      data: [
+        { current: 2, other: 3 },
+        { current: 4, other: 5 },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [6]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dce-circular-reference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dce-circular-reference.js
new file mode 100644
index 00000000000..964df9d7650
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dce-circular-reference.js
@@ -0,0 +1,23 @@
+import {identity} from 'shared-runtime';
+
+function Component({data}) {
+  let x = 0;
+  for (const item of data) {
+    const {current, other} = item;
+    x += current;
+    identity(other);
+  }
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      data: [
+        {current: 2, other: 3},
+        {current: 4, other: 5},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.expect.md
new file mode 100644
index 00000000000..699140137ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function Component() {
+  const dispatch = useDispatch();
+  // const [state, setState] = useState(0);
+
+  return (
+    <div>
+      <input
+        type="file"
+        onChange={event => {
+          dispatch(...event.target);
+          event.target.value = '';
+        }}
+      />
+    </div>
+  );
+}
+
+function useDispatch() {
+  'use no memo';
+  // skip compilation to make it easier to debug the above function
+  return (...values) => {
+    console.log(...values);
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
+function Component() {
+  const $ = _c(2);
+  const dispatch = useDispatch();
+  let t0;
+  if ($[0] !== dispatch) {
+    t0 = (
+      <div>
+        <input
+          type="file"
+          onChange={(event) => {
+            dispatch(...event.target);
+            event.target.value = "";
+          }}
+        />
+      </div>
+    );
+    $[0] = dispatch;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function useDispatch() {
+  "use no memo";
+  // skip compilation to make it easier to debug the above function
+  return (...values) => {
+    console.log(...values);
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><input type="file"></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.js
new file mode 100644
index 00000000000..386729e4078
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dispatch-spread-event-marks-event-frozen.js
@@ -0,0 +1,30 @@
+// @compilationMode:"infer"
+function Component() {
+  const dispatch = useDispatch();
+  // const [state, setState] = useState(0);
+
+  return (
+    <div>
+      <input
+        type="file"
+        onChange={event => {
+          dispatch(...event.target);
+          event.target.value = '';
+        }}
+      />
+    </div>
+  );
+}
+
+function useDispatch() {
+  'use no memo';
+  // skip compilation to make it easier to debug the above function
+  return (...values) => {
+    console.log(...values);
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-add-hook-guards-on-retry.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-add-hook-guards-on-retry.expect.md
new file mode 100644
index 00000000000..b19a06519f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-add-hook-guards-on-retry.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+// @flow @enableEmitHookGuards @panicThreshold:"none" @enableFire
+
+component Foo(useDynamicHook) {
+  useDynamicHook();
+  return <div>hello world</div>;
+}
+
+```
+
+## Code
+
+```javascript
+function Foo({
+  useDynamicHook,
+}: $ReadOnly<{ useDynamicHook: any }>): React.Node {
+  useDynamicHook();
+  return <div>hello world</div>;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-add-hook-guards-on-retry.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-add-hook-guards-on-retry.js
new file mode 100644
index 00000000000..54b18182133
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-add-hook-guards-on-retry.js
@@ -0,0 +1,6 @@
+// @flow @enableEmitHookGuards @panicThreshold:"none" @enableFire
+
+component Foo(useDynamicHook) {
+  useDynamicHook();
+  return <div>hello world</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md
new file mode 100644
index 00000000000..ace89f6ff0c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component(props) {
+  const x = [{...props.value}];
+  useEffect(() => {}, []);
+  const onClick = () => {
+    console.log(x.length);
+  };
+  let y;
+  return (
+    <div onClick={onClick}>
+      {x.map(item => {
+        y = item;
+        return <span key={item.id}>{item.text}</span>;
+      })}
+      {mutate(y)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {id: 0, text: 'Hello!'}}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { mutate } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  const x = [{ ...props.value }];
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp, t0);
+  const onClick = () => {
+    console.log(x.length);
+  };
+
+  let y;
+
+  const t1 = x.map((item) => {
+    y = item;
+    return <span key={item.id}>{item.text}</span>;
+  });
+  const t2 = mutate(y);
+  let t3;
+  if ($[1] !== onClick || $[2] !== t1 || $[3] !== t2) {
+    t3 = (
+      <div onClick={onClick}>
+        {t1}
+        {t2}
+      </div>
+    );
+    $[1] = onClick;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { id: 0, text: "Hello!" } }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span>Hello!</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.js
new file mode 100644
index 00000000000..24a3cd6a7b3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.js
@@ -0,0 +1,26 @@
+import {useEffect, useState} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component(props) {
+  const x = [{...props.value}];
+  useEffect(() => {}, []);
+  const onClick = () => {
+    console.log(x.length);
+  };
+  let y;
+  return (
+    <div onClick={onClick}>
+      {x.map(item => {
+        y = item;
+        return <span key={item.id}>{item.text}</span>;
+      })}
+      {mutate(y)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {id: 0, text: 'Hello!'}}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md
new file mode 100644
index 00000000000..82f6c9a7991
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component(props) {
+  const x = [{...props.value}];
+  useEffect(() => {}, []);
+  const onClick = () => {
+    console.log(x.length);
+  };
+  let y;
+  return (
+    <div onClick={onClick}>
+      {x.map(item => {
+        item.flag = true;
+        return <span key={item.id}>{item.text}</span>;
+      })}
+      {mutate(y)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {id: 0, text: 'Hello', flag: false}}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { mutate } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(7);
+  const x = [{ ...props.value }];
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp, t0);
+  const onClick = () => {
+    console.log(x.length);
+  };
+
+  let y;
+
+  const t1 = x.map(_temp2);
+  let t2;
+  if ($[1] !== y) {
+    t2 = mutate(y);
+    $[1] = y;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== onClick || $[4] !== t1 || $[5] !== t2) {
+    t3 = (
+      <div onClick={onClick}>
+        {t1}
+        {t2}
+      </div>
+    );
+    $[3] = onClick;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+function _temp2(item) {
+  item.flag = true;
+  return <span key={item.id}>{item.text}</span>;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { id: 0, text: "Hello", flag: false } }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span>Hello</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.js
new file mode 100644
index 00000000000..8451e59ecf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.js
@@ -0,0 +1,26 @@
+import {useEffect, useState} from 'react';
+import {mutate} from 'shared-runtime';
+
+function Component(props) {
+  const x = [{...props.value}];
+  useEffect(() => {}, []);
+  const onClick = () => {
+    console.log(x.length);
+  };
+  let y;
+  return (
+    <div onClick={onClick}>
+      {x.map(item => {
+        item.flag = true;
+        return <span key={item.id}>{item.text}</span>;
+      })}
+      {mutate(y)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {id: 0, text: 'Hello', flag: false}}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.expect.md
new file mode 100644
index 00000000000..af59c6b00ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+import type {SetStateAction, Dispatch} from 'react';
+import {useState} from 'react';
+
+function Component(_props: {}) {
+  const [x, _setX]: [number, Dispatch<SetStateAction<number>>] = useState(0);
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import type { SetStateAction, Dispatch } from "react";
+import { useState } from "react";
+
+function Component(_props) {
+  const $ = _c(2);
+  const [x] = useState(0);
+  let t0;
+  if ($[0] !== x) {
+    t0 = { x };
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":0}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.ts
new file mode 100644
index 00000000000..ea8769f265a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-import-specifier.ts
@@ -0,0 +1,12 @@
+import type {SetStateAction, Dispatch} from 'react';
+import {useState} from 'react';
+
+function Component(_props: {}) {
+  const [x, _setX]: [number, Dispatch<SetStateAction<number>>] = useState(0);
+  return {x};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md
new file mode 100644
index 00000000000..a44a07b7512
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component({id}) {
+  const bar = (() => {})();
+
+  return (
+    <>
+      <Stringify title={bar} />
+      <Stringify title={id ? true : false} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { id } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <Stringify title={undefined} />;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const t2 = id ? true : false;
+  let t3;
+  if ($[1] !== t2) {
+    t3 = (
+      <>
+        {t1}
+        <Stringify title={t2} />
+      </>
+    );
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{}</div><div>{"title":false}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.js
new file mode 100644
index 00000000000..3a1de8809ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.js
@@ -0,0 +1,17 @@
+import {Stringify} from 'shared-runtime';
+
+function Component({id}) {
+  const bar = (() => {})();
+
+  return (
+    <>
+      <Stringify title={bar} />
+      <Stringify title={id ? true : false} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-type-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-type-import.expect.md
new file mode 100644
index 00000000000..6f336222b08
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-type-import.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import type {ReactElement} from 'react';
+
+function Component(_props: {}): ReactElement {
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import type { ReactElement } from "react";
+
+function Component(_props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>hello world</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-type-import.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-type-import.tsx
new file mode 100644
index 00000000000..74194521bb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-type-import.tsx
@@ -0,0 +1,10 @@
+import type {ReactElement} from 'react';
+
+function Component(_props: {}): ReactElement {
+  return <div>hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-false-positive-ref-validation-in-use-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-false-positive-ref-validation-in-use-effect.expect.md
new file mode 100644
index 00000000000..cb51d86d0b2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-false-positive-ref-validation-in-use-effect.expect.md
@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @validateNoFreezingKnownMutableFunctions @enableNewMutationAliasingModel
+import {useCallback, useEffect, useRef} from 'react';
+import {useHook} from 'shared-runtime';
+
+// This was a false positive "can't freeze mutable function" in the old
+// inference model, fixed in the new inference model.
+function Component() {
+  const params = useHook();
+  const update = useCallback(
+    partialParams => {
+      const nextParams = {
+        ...params,
+        ...partialParams,
+      };
+      nextParams.param = 'value';
+      console.log(nextParams);
+    },
+    [params]
+  );
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current === null) {
+      update();
+    }
+  }, [update]);
+
+  return 'ok';
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoFreezingKnownMutableFunctions @enableNewMutationAliasingModel
+import { useCallback, useEffect, useRef } from "react";
+import { useHook } from "shared-runtime";
+
+// This was a false positive "can't freeze mutable function" in the old
+// inference model, fixed in the new inference model.
+function Component() {
+  const $ = _c(5);
+  const params = useHook();
+  let t0;
+  if ($[0] !== params) {
+    t0 = (partialParams) => {
+      const nextParams = { ...params, ...partialParams };
+      nextParams.param = "value";
+      console.log(nextParams);
+    };
+    $[0] = params;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const update = t0;
+
+  const ref = useRef(null);
+  let t1;
+  let t2;
+  if ($[2] !== update) {
+    t1 = () => {
+      if (ref.current === null) {
+        update();
+      }
+    };
+    t2 = [update];
+    $[2] = update;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  return "ok";
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-false-positive-ref-validation-in-use-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-false-positive-ref-validation-in-use-effect.js
new file mode 100644
index 00000000000..3ecfcca9c74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-false-positive-ref-validation-in-use-effect.js
@@ -0,0 +1,28 @@
+// @validateNoFreezingKnownMutableFunctions @enableNewMutationAliasingModel
+import {useCallback, useEffect, useRef} from 'react';
+import {useHook} from 'shared-runtime';
+
+// This was a false positive "can't freeze mutable function" in the old
+// inference model, fixed in the new inference model.
+function Component() {
+  const params = useHook();
+  const update = useCallback(
+    partialParams => {
+      const nextParams = {
+        ...params,
+        ...partialParams,
+      };
+      nextParams.param = 'value';
+      console.log(nextParams);
+    },
+    [params]
+  );
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current === null) {
+      update();
+    }
+  }, [update]);
+
+  return 'ok';
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting-variable-collision.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting-variable-collision.expect.md
new file mode 100644
index 00000000000..cee527e8074
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting-variable-collision.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const items = props.items.map(x => x);
+  const x = 42;
+  return [x, items];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [0, 42, null, undefined, {object: true}]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map(_temp);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const items = t0;
+  let t1;
+  if ($[2] !== items) {
+    t1 = [42, items];
+    $[2] = items;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+function _temp(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: [0, 42, null, undefined, { object: true }] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42,[0,42,null,null,{"object":true}]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting-variable-collision.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting-variable-collision.js
new file mode 100644
index 00000000000..b776ea92203
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting-variable-collision.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const items = props.items.map(x => x);
+  const x = 42;
+  return [x, items];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: [0, 42, null, undefined, {object: true}]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md
new file mode 100644
index 00000000000..3188e522070
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const wat = () => {
+    const pathname = 'wat';
+    pathname;
+  };
+
+  const pathname = props.wat;
+  const deeplinkItemId = pathname ? props.itemID : null;
+
+  return <button onClick={() => wat()}>{deeplinkItemId}</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{wat: '/dev/null', itemID: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(3);
+  const wat = _temp;
+
+  const pathname_0 = props.wat;
+  const deeplinkItemId = pathname_0 ? props.itemID : null;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => wat();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== deeplinkItemId) {
+    t1 = <button onClick={t0}>{deeplinkItemId}</button>;
+    $[1] = deeplinkItemId;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ wat: "/dev/null", itemID: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <button>42</button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.js
new file mode 100644
index 00000000000..b328f44d667
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const wat = () => {
+    const pathname = 'wat';
+    pathname;
+  };
+
+  const pathname = props.wat;
+  const deeplinkItemId = pathname ? props.itemID : null;
+
+  return <button onClick={() => wat()}>{deeplinkItemId}</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{wat: '/dev/null', itemID: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md
new file mode 100644
index 00000000000..ea711a5baf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md
@@ -0,0 +1,121 @@
+
+## Input
+
+```javascript
+// @flow @enableAssumeHooksFollowRulesOfReact
+function Component({label, highlightedItem}) {
+  const serverTime = useServerTime();
+  const highlight = new Highlight(highlightedItem);
+
+  const time = serverTime.get();
+  // subtle bit here: the binary expression infers the result of the call
+  // as a primitive and not needing memoization. the logical is necessary
+  // because without it there are no intermediate scopes which observe
+  // the result of the binary expression, so its memoization can be pruned
+  const timestampLabel = time / 1000 || label;
+
+  return (
+    <>
+      {highlight.render()}
+      {timestampLabel}
+    </>
+  );
+}
+
+function useServerTime() {
+  'use no forget';
+
+  return {
+    get() {
+      return 42000; // would be a constant value from the server
+    },
+  };
+}
+
+class Highlight {
+  constructor(value) {
+    this.value = value;
+  }
+
+  render() {
+    return this.value;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{label: '<unused>', highlightedItem: 'Seconds passed: '}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(8);
+  const { label, highlightedItem } = t0;
+  const serverTime = useServerTime();
+  let t1;
+  let timestampLabel;
+  if ($[0] !== highlightedItem || $[1] !== label || $[2] !== serverTime) {
+    const highlight = new Highlight(highlightedItem);
+    const time = serverTime.get();
+    timestampLabel = time / 1000 || label;
+    t1 = highlight.render();
+    $[0] = highlightedItem;
+    $[1] = label;
+    $[2] = serverTime;
+    $[3] = t1;
+    $[4] = timestampLabel;
+  } else {
+    t1 = $[3];
+    timestampLabel = $[4];
+  }
+  let t2;
+  if ($[5] !== t1 || $[6] !== timestampLabel) {
+    t2 = (
+      <>
+        {t1}
+        {timestampLabel}
+      </>
+    );
+    $[5] = t1;
+    $[6] = timestampLabel;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+function useServerTime() {
+  "use no forget";
+
+  return {
+    get() {
+      return 42000;
+    },
+  };
+}
+
+class Highlight {
+  constructor(value) {
+    this.value = value;
+  }
+
+  render() {
+    return this.value;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ label: "<unused>", highlightedItem: "Seconds passed: " }],
+};
+
+```
+      
+### Eval output
+(kind: ok) Seconds passed: 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.js
new file mode 100644
index 00000000000..22c855be613
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.js
@@ -0,0 +1,44 @@
+// @flow @enableAssumeHooksFollowRulesOfReact
+function Component({label, highlightedItem}) {
+  const serverTime = useServerTime();
+  const highlight = new Highlight(highlightedItem);
+
+  const time = serverTime.get();
+  // subtle bit here: the binary expression infers the result of the call
+  // as a primitive and not needing memoization. the logical is necessary
+  // because without it there are no intermediate scopes which observe
+  // the result of the binary expression, so its memoization can be pruned
+  const timestampLabel = time / 1000 || label;
+
+  return (
+    <>
+      {highlight.render()}
+      {timestampLabel}
+    </>
+  );
+}
+
+function useServerTime() {
+  'use no forget';
+
+  return {
+    get() {
+      return 42000; // would be a constant value from the server
+    },
+  };
+}
+
+class Highlight {
+  constructor(value) {
+    this.value = value;
+  }
+
+  render() {
+    return this.value;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{label: '<unused>', highlightedItem: 'Seconds passed: '}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md
new file mode 100644
index 00000000000..f141eaa64f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md
@@ -0,0 +1,115 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact
+import {Stringify, identity, useHook} from 'shared-runtime';
+
+function Component({index}) {
+  const data = useHook();
+
+  const a = identity(data, index);
+  const b = identity(data, index);
+  const c = identity(data, index);
+
+  return (
+    <div>
+      <Stringify value={identity(b)} />
+      <Stringify value={identity(a)} />
+      <Stringify value={identity(c)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{index: 0}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact
+import { Stringify, identity, useHook } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(17);
+  const { index } = t0;
+  const data = useHook();
+  let T0;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== data || $[1] !== index) {
+    const a = identity(data, index);
+    const b = identity(data, index);
+    const c = identity(data, index);
+    const t4 = identity(b);
+    if ($[6] !== t4) {
+      t2 = <Stringify value={t4} />;
+      $[6] = t4;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    const t5 = identity(a);
+    if ($[8] !== t5) {
+      t3 = <Stringify value={t5} />;
+      $[8] = t5;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    T0 = Stringify;
+    t1 = identity(c);
+    $[0] = data;
+    $[1] = index;
+    $[2] = T0;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    T0 = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+  }
+  let t4;
+  if ($[10] !== T0 || $[11] !== t1) {
+    t4 = <T0 value={t1} />;
+    $[10] = T0;
+    $[11] = t1;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+    t5 = (
+      <div>
+        {t2}
+        {t3}
+        {t4}
+      </div>
+    );
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ index: 0 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"value":{"a":0,"b":"value1","c":true}}</div><div>{"value":{"a":0,"b":"value1","c":true}}</div><div>{"value":{"a":0,"b":"value1","c":true}}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.js
new file mode 100644
index 00000000000..8b1be23bcd8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.js
@@ -0,0 +1,23 @@
+// @enableAssumeHooksFollowRulesOfReact
+import {Stringify, identity, useHook} from 'shared-runtime';
+
+function Component({index}) {
+  const data = useHook();
+
+  const a = identity(data, index);
+  const b = identity(data, index);
+  const c = identity(data, index);
+
+  return (
+    <div>
+      <Stringify value={identity(b)} />
+      <Stringify value={identity(a)} />
+      <Stringify value={identity(c)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{index: 0}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.expect.md
new file mode 100644
index 00000000000..544366b1de6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.expect.md
@@ -0,0 +1,162 @@
+
+## Input
+
+```javascript
+// @flow @compilationMode:"infer"
+'use strict';
+
+function getWeekendDays(user) {
+  return [0, 6];
+}
+
+function getConfig(weekendDays) {
+  return [1, 5];
+}
+
+component Calendar(user, defaultFirstDay, currentDate, view) {
+  const weekendDays = getWeekendDays(user);
+  let firstDay = defaultFirstDay;
+  let daysToDisplay = 7;
+  if (view === 'week') {
+    let lastDay;
+    // this assignment produces invalid code
+    [firstDay, lastDay] = getConfig(weekendDays);
+    daysToDisplay = ((7 + lastDay - firstDay) % 7) + 1;
+  } else if (view === 'day') {
+    firstDay = currentDate.getDayOfWeek();
+    daysToDisplay = 1;
+  }
+
+  return [currentDate, firstDay, daysToDisplay];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Calendar,
+  params: [
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: {getDayOfWeek: () => 3},
+      view: 'week',
+    },
+  ],
+  sequentialRenders: [
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: {getDayOfWeek: () => 3},
+      view: 'week',
+    },
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: {getDayOfWeek: () => 3},
+      view: 'day',
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+"use strict";
+import { c as _c } from "react/compiler-runtime";
+
+function getWeekendDays(user) {
+  return [0, 6];
+}
+
+function getConfig(weekendDays) {
+  return [1, 5];
+}
+
+function Calendar(t0) {
+  const $ = _c(12);
+  const { user, defaultFirstDay, currentDate, view } = t0;
+  let daysToDisplay;
+  let firstDay;
+  if (
+    $[0] !== currentDate ||
+    $[1] !== defaultFirstDay ||
+    $[2] !== user ||
+    $[3] !== view
+  ) {
+    const weekendDays = getWeekendDays(user);
+    firstDay = defaultFirstDay;
+    daysToDisplay = 7;
+    if (view === "week") {
+      let lastDay;
+
+      [firstDay, lastDay] = getConfig(weekendDays);
+      daysToDisplay = ((7 + lastDay - firstDay) % 7) + 1;
+    } else {
+      if (view === "day") {
+        let t1;
+        if ($[6] !== currentDate) {
+          t1 = currentDate.getDayOfWeek();
+          $[6] = currentDate;
+          $[7] = t1;
+        } else {
+          t1 = $[7];
+        }
+        firstDay = t1;
+        daysToDisplay = 1;
+      }
+    }
+    $[0] = currentDate;
+    $[1] = defaultFirstDay;
+    $[2] = user;
+    $[3] = view;
+    $[4] = daysToDisplay;
+    $[5] = firstDay;
+  } else {
+    daysToDisplay = $[4];
+    firstDay = $[5];
+  }
+  let t1;
+  if ($[8] !== currentDate || $[9] !== daysToDisplay || $[10] !== firstDay) {
+    t1 = [currentDate, firstDay, daysToDisplay];
+    $[8] = currentDate;
+    $[9] = daysToDisplay;
+    $[10] = firstDay;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Calendar,
+  params: [
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: { getDayOfWeek: () => 3 },
+      view: "week",
+    },
+  ],
+
+  sequentialRenders: [
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: { getDayOfWeek: () => 3 },
+      view: "week",
+    },
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: { getDayOfWeek: () => 3 },
+      view: "day",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"getDayOfWeek":"[[ function params=0 ]]"},1,5]
+[{"getDayOfWeek":"[[ function params=0 ]]"},3,1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.js
new file mode 100644
index 00000000000..461d6bf16df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.js
@@ -0,0 +1,53 @@
+// @flow @compilationMode:"infer"
+'use strict';
+
+function getWeekendDays(user) {
+  return [0, 6];
+}
+
+function getConfig(weekendDays) {
+  return [1, 5];
+}
+
+component Calendar(user, defaultFirstDay, currentDate, view) {
+  const weekendDays = getWeekendDays(user);
+  let firstDay = defaultFirstDay;
+  let daysToDisplay = 7;
+  if (view === 'week') {
+    let lastDay;
+    // this assignment produces invalid code
+    [firstDay, lastDay] = getConfig(weekendDays);
+    daysToDisplay = ((7 + lastDay - firstDay) % 7) + 1;
+  } else if (view === 'day') {
+    firstDay = currentDate.getDayOfWeek();
+    daysToDisplay = 1;
+  }
+
+  return [currentDate, firstDay, daysToDisplay];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Calendar,
+  params: [
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: {getDayOfWeek: () => 3},
+      view: 'week',
+    },
+  ],
+  sequentialRenders: [
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: {getDayOfWeek: () => 3},
+      view: 'week',
+    },
+    {
+      user: {},
+      defaultFirstDay: 1,
+      currentDate: {getDayOfWeek: () => 3},
+      view: 'day',
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-phi-as-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-phi-as-dependency.expect.md
new file mode 100644
index 00000000000..65ff18b65ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-phi-as-dependency.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {CONST_TRUE, Stringify, mutate, useIdentity} from 'shared-runtime';
+
+/**
+ * Fixture showing an edge case for ReactiveScope variable propagation.
+ * Fixed in the new inference model
+ *
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   Forget:
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   [[ (exception in render) Error: invariant broken ]]
+ *
+ */
+function Component() {
+  const obj = CONST_TRUE ? {inner: {value: 'hello'}} : null;
+  const boxedInner = [obj?.inner];
+  useIdentity(null);
+  mutate(obj);
+  if (boxedInner[0] !== obj?.inner) {
+    throw new Error('invariant broken');
+  }
+  return <Stringify obj={obj} inner={boxedInner} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: 0}],
+  sequentialRenders: [{arg: 0}, {arg: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableNewMutationAliasingModel
+import { CONST_TRUE, Stringify, mutate, useIdentity } from "shared-runtime";
+
+/**
+ * Fixture showing an edge case for ReactiveScope variable propagation.
+ * Fixed in the new inference model
+ *
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   Forget:
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   [[ (exception in render) Error: invariant broken ]]
+ *
+ */
+function Component() {
+  const obj = CONST_TRUE ? { inner: { value: "hello" } } : null;
+  const boxedInner = [obj?.inner];
+  useIdentity(null);
+  mutate(obj);
+  if (boxedInner[0] !== obj?.inner) {
+    throw new Error("invariant broken");
+  }
+  return <Stringify obj={obj} inner={boxedInner} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ arg: 0 }],
+  sequentialRenders: [{ arg: 0 }, { arg: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-phi-as-dependency.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-phi-as-dependency.tsx
new file mode 100644
index 00000000000..23c1a070104
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-phi-as-dependency.tsx
@@ -0,0 +1,32 @@
+// @enableNewMutationAliasingModel
+import {CONST_TRUE, Stringify, mutate, useIdentity} from 'shared-runtime';
+
+/**
+ * Fixture showing an edge case for ReactiveScope variable propagation.
+ * Fixed in the new inference model
+ *
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   Forget:
+ *   <div>{"obj":{"inner":{"value":"hello"},"wat0":"joe"},"inner":["[[ cyclic ref *2 ]]"]}</div>
+ *   [[ (exception in render) Error: invariant broken ]]
+ *
+ */
+function Component() {
+  const obj = CONST_TRUE ? {inner: {value: 'hello'}} : null;
+  const boxedInner = [obj?.inner];
+  useIdentity(null);
+  mutate(obj);
+  if (boxedInner[0] !== obj?.inner) {
+    throw new Error('invariant broken');
+  }
+  return <Stringify obj={obj} inner={boxedInner} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{arg: 0}],
+  sequentialRenders: [{arg: 0}, {arg: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.expect.md
new file mode 100644
index 00000000000..ecdfa88b980
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.expect.md
@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+import invariant from 'invariant';
+import {makeObject_Primitives, mutate, sum, useIdentity} from 'shared-runtime';
+
+/**
+ * Here, `z`'s original memo block is removed due to the inner hook call.
+ * However, we also infer that `z` is non-reactive, so by default we would create
+ * the memo block for `thing = [y, z]` as only depending on `y`.
+ *
+ * This could then mean that `thing[1]` and `z` may not refer to the same value,
+ * since z recreates every time but `thing` doesn't correspondingly invalidate.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function MyApp({count}) {
+  const z = makeObject_Primitives();
+  const x = useIdentity(2);
+  const y = sum(x, count);
+  mutate(z);
+  const z2 = z;
+  const thing = [y, z2];
+  if (thing[1] !== z) {
+    invariant(false, 'oh no!');
+  }
+  return thing;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [{count: 2}],
+  sequentialRenders: [{count: 2}, {count: 2}, {count: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import invariant from "invariant";
+import {
+  makeObject_Primitives,
+  mutate,
+  sum,
+  useIdentity,
+} from "shared-runtime";
+
+/**
+ * Here, `z`'s original memo block is removed due to the inner hook call.
+ * However, we also infer that `z` is non-reactive, so by default we would create
+ * the memo block for `thing = [y, z]` as only depending on `y`.
+ *
+ * This could then mean that `thing[1]` and `z` may not refer to the same value,
+ * since z recreates every time but `thing` doesn't correspondingly invalidate.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function MyApp(t0) {
+  const $ = _c(6);
+  const { count } = t0;
+  const z = makeObject_Primitives();
+  const x = useIdentity(2);
+  let t1;
+  if ($[0] !== count || $[1] !== x) {
+    t1 = sum(x, count);
+    $[0] = count;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const y = t1;
+  mutate(z);
+  const z2 = z;
+  let t2;
+  if ($[3] !== y || $[4] !== z2) {
+    t2 = [y, z2];
+    $[3] = y;
+    $[4] = z2;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const thing = t2;
+  if (thing[1] !== z) {
+    invariant(false, "oh no!");
+  }
+  return thing;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [{ count: 2 }],
+  sequentialRenders: [{ count: 2 }, { count: 2 }, { count: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [4,{"a":0,"b":"value1","c":true,"wat0":"joe"}]
+[4,{"a":0,"b":"value1","c":true,"wat0":"joe"}]
+[5,{"a":0,"b":"value1","c":true,"wat0":"joe"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.ts
new file mode 100644
index 00000000000..25e5fe2e39d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.ts
@@ -0,0 +1,32 @@
+import invariant from 'invariant';
+import {makeObject_Primitives, mutate, sum, useIdentity} from 'shared-runtime';
+
+/**
+ * Here, `z`'s original memo block is removed due to the inner hook call.
+ * However, we also infer that `z` is non-reactive, so by default we would create
+ * the memo block for `thing = [y, z]` as only depending on `y`.
+ *
+ * This could then mean that `thing[1]` and `z` may not refer to the same value,
+ * since z recreates every time but `thing` doesn't correspondingly invalidate.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function MyApp({count}) {
+  const z = makeObject_Primitives();
+  const x = useIdentity(2);
+  const y = sum(x, count);
+  mutate(z);
+  const z2 = z;
+  const thing = [y, z2];
+  if (thing[1] !== z) {
+    invariant(false, 'oh no!');
+  }
+  return thing;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [{count: 2}],
+  sequentialRenders: [{count: 2}, {count: 2}, {count: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.expect.md
new file mode 100644
index 00000000000..f9d725e0b35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.expect.md
@@ -0,0 +1,105 @@
+
+## Input
+
+```javascript
+import invariant from 'invariant';
+import {makeObject_Primitives, mutate, sum, useIdentity} from 'shared-runtime';
+
+/**
+ * Here, `z`'s original memo block is removed due to the inner hook call.
+ * However, we also infer that `z` is non-reactive, so by default we would create
+ * the memo block for `thing = [y, z]` as only depending on `y`.
+ *
+ * This could then mean that `thing[1]` and `z` may not refer to the same value,
+ * since z recreates every time but `thing` doesn't correspondingly invalidate.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function MyApp({count}) {
+  const z = makeObject_Primitives();
+  const x = useIdentity(2);
+  const y = sum(x, count);
+  mutate(z);
+  const thing = [y, z];
+  if (thing[1] !== z) {
+    invariant(false, 'oh no!');
+  }
+  return thing;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [{count: 2}],
+  sequentialRenders: [{count: 2}, {count: 2}, {count: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import invariant from "invariant";
+import {
+  makeObject_Primitives,
+  mutate,
+  sum,
+  useIdentity,
+} from "shared-runtime";
+
+/**
+ * Here, `z`'s original memo block is removed due to the inner hook call.
+ * However, we also infer that `z` is non-reactive, so by default we would create
+ * the memo block for `thing = [y, z]` as only depending on `y`.
+ *
+ * This could then mean that `thing[1]` and `z` may not refer to the same value,
+ * since z recreates every time but `thing` doesn't correspondingly invalidate.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function MyApp(t0) {
+  const $ = _c(6);
+  const { count } = t0;
+  const z = makeObject_Primitives();
+  const x = useIdentity(2);
+  let t1;
+  if ($[0] !== count || $[1] !== x) {
+    t1 = sum(x, count);
+    $[0] = count;
+    $[1] = x;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const y = t1;
+  mutate(z);
+  let t2;
+  if ($[3] !== y || $[4] !== z) {
+    t2 = [y, z];
+    $[3] = y;
+    $[4] = z;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const thing = t2;
+  if (thing[1] !== z) {
+    invariant(false, "oh no!");
+  }
+  return thing;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [{ count: 2 }],
+  sequentialRenders: [{ count: 2 }, { count: 2 }, { count: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [4,{"a":0,"b":"value1","c":true,"wat0":"joe"}]
+[4,{"a":0,"b":"value1","c":true,"wat0":"joe"}]
+[5,{"a":0,"b":"value1","c":true,"wat0":"joe"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.ts
new file mode 100644
index 00000000000..f9acd2f242c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.ts
@@ -0,0 +1,31 @@
+import invariant from 'invariant';
+import {makeObject_Primitives, mutate, sum, useIdentity} from 'shared-runtime';
+
+/**
+ * Here, `z`'s original memo block is removed due to the inner hook call.
+ * However, we also infer that `z` is non-reactive, so by default we would create
+ * the memo block for `thing = [y, z]` as only depending on `y`.
+ *
+ * This could then mean that `thing[1]` and `z` may not refer to the same value,
+ * since z recreates every time but `thing` doesn't correspondingly invalidate.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function MyApp({count}) {
+  const z = makeObject_Primitives();
+  const x = useIdentity(2);
+  const y = sum(x, count);
+  mutate(z);
+  const thing = [y, z];
+  if (thing[1] !== z) {
+    invariant(false, 'oh no!');
+  }
+  return thing;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [{count: 2}],
+  sequentialRenders: [{count: 2}, {count: 2}, {count: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.expect.md
new file mode 100644
index 00000000000..211f48f7d7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.expect.md
@@ -0,0 +1,102 @@
+
+## Input
+
+```javascript
+import {
+  CONST_TRUE,
+  identity,
+  makeObject_Primitives,
+  useNoAlias,
+} from 'shared-runtime';
+
+/**
+ * Here the scope for `obj` is pruned because it spans the `useNoAlias()` hook call.
+ * Because `obj` is non-reactive, it would by default be excluded as dependency for
+ * `result = [...identity(obj)..., obj]`, but this could then cause the values in
+ * `result` to be out of sync with `obj`.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function Foo() {
+  const obj = makeObject_Primitives();
+  // hook calls keeps the next two lines as its own reactive scope
+  useNoAlias();
+
+  const shouldCaptureObj = obj != null && CONST_TRUE;
+  const result = [shouldCaptureObj ? identity(obj) : null, obj];
+
+  useNoAlias(result, obj);
+
+  if (shouldCaptureObj && result[0] !== obj) {
+    throw new Error('Unexpected');
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import {
+  CONST_TRUE,
+  identity,
+  makeObject_Primitives,
+  useNoAlias,
+} from "shared-runtime";
+
+/**
+ * Here the scope for `obj` is pruned because it spans the `useNoAlias()` hook call.
+ * Because `obj` is non-reactive, it would by default be excluded as dependency for
+ * `result = [...identity(obj)..., obj]`, but this could then cause the values in
+ * `result` to be out of sync with `obj`.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function Foo() {
+  const $ = _c(3);
+  const obj = makeObject_Primitives();
+
+  useNoAlias();
+
+  const shouldCaptureObj = obj != null && CONST_TRUE;
+  const t0 = shouldCaptureObj ? identity(obj) : null;
+  let t1;
+  if ($[0] !== obj || $[1] !== t0) {
+    t1 = [t0, obj];
+    $[0] = obj;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const result = t1;
+
+  useNoAlias(result, obj);
+
+  if (shouldCaptureObj && result[0] !== obj) {
+    throw new Error("Unexpected");
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":0,"b":"value1","c":true},"[[ cyclic ref *1 ]]"]
+[{"a":0,"b":"value1","c":true},"[[ cyclic ref *1 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.ts
new file mode 100644
index 00000000000..7a4088b8f9c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.ts
@@ -0,0 +1,37 @@
+import {
+  CONST_TRUE,
+  identity,
+  makeObject_Primitives,
+  useNoAlias,
+} from 'shared-runtime';
+
+/**
+ * Here the scope for `obj` is pruned because it spans the `useNoAlias()` hook call.
+ * Because `obj` is non-reactive, it would by default be excluded as dependency for
+ * `result = [...identity(obj)..., obj]`, but this could then cause the values in
+ * `result` to be out of sync with `obj`.
+ *
+ * The fix is to consider pruned memo block outputs as reactive, since they will
+ * recreate on every render. This means `thing` depends on both y and z.
+ */
+function Foo() {
+  const obj = makeObject_Primitives();
+  // hook calls keeps the next two lines as its own reactive scope
+  useNoAlias();
+
+  const shouldCaptureObj = obj != null && CONST_TRUE;
+  const result = [shouldCaptureObj ? identity(obj) : null, obj];
+
+  useNoAlias(result, obj);
+
+  if (shouldCaptureObj && result[0] !== obj) {
+    throw new Error('Unexpected');
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+  sequentialRenders: [{}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md
new file mode 100644
index 00000000000..a70497fc3eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+import {
+  CONST_TRUE,
+  identity,
+  makeObject_Primitives,
+  mutateAndReturn,
+  useHook,
+} from 'shared-runtime';
+
+/**
+ * value and `mutateAndReturn(value)` should end up in the same reactive scope.
+ * (1) `value = makeObject` and `(temporary) = mutateAndReturn(value)` should be assigned
+ * the same scope id (on their identifiers)
+ * (2) alignScopesToBlockScopes should expand the scopes of both `(temporary) = identity(1)`
+ * and `(temporary) = mutateAndReturn(value)` to the outermost value block boundaries
+ * (3) mergeOverlappingScopes should merge the scopes of the above two instructions
+ */
+function Component({}) {
+  const value = makeObject_Primitives();
+  useHook();
+  const mutatedValue =
+    identity(1) && CONST_TRUE ? mutateAndReturn(value) : null;
+  const result = [];
+  useHook();
+  result.push(value, mutatedValue);
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+
+## Code
+
+```javascript
+import {
+  CONST_TRUE,
+  identity,
+  makeObject_Primitives,
+  mutateAndReturn,
+  useHook,
+} from "shared-runtime";
+
+/**
+ * value and `mutateAndReturn(value)` should end up in the same reactive scope.
+ * (1) `value = makeObject` and `(temporary) = mutateAndReturn(value)` should be assigned
+ * the same scope id (on their identifiers)
+ * (2) alignScopesToBlockScopes should expand the scopes of both `(temporary) = identity(1)`
+ * and `(temporary) = mutateAndReturn(value)` to the outermost value block boundaries
+ * (3) mergeOverlappingScopes should merge the scopes of the above two instructions
+ */
+function Component(t0) {
+  const value = makeObject_Primitives();
+  useHook();
+  const mutatedValue =
+    identity(1) && CONST_TRUE ? mutateAndReturn(value) : null;
+  const result = [];
+  useHook();
+  result.push(value, mutatedValue);
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":0,"b":"value1","c":true,"wat0":"joe"},"[[ cyclic ref *1 ]]"]
+[{"a":0,"b":"value1","c":true,"wat0":"joe"},"[[ cyclic ref *1 ]]"]
+[{"a":0,"b":"value1","c":true,"wat0":"joe"},"[[ cyclic ref *1 ]]"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.ts
new file mode 100644
index 00000000000..e097951fda7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.ts
@@ -0,0 +1,32 @@
+import {
+  CONST_TRUE,
+  identity,
+  makeObject_Primitives,
+  mutateAndReturn,
+  useHook,
+} from 'shared-runtime';
+
+/**
+ * value and `mutateAndReturn(value)` should end up in the same reactive scope.
+ * (1) `value = makeObject` and `(temporary) = mutateAndReturn(value)` should be assigned
+ * the same scope id (on their identifiers)
+ * (2) alignScopesToBlockScopes should expand the scopes of both `(temporary) = identity(1)`
+ * and `(temporary) = mutateAndReturn(value)` to the outermost value block boundaries
+ * (3) mergeOverlappingScopes should merge the scopes of the above two instructions
+ */
+function Component({}) {
+  const value = makeObject_Primitives();
+  useHook();
+  const mutatedValue =
+    identity(1) && CONST_TRUE ? mutateAndReturn(value) : null;
+  const result = [];
+  useHook();
+  result.push(value, mutatedValue);
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+  sequentialRenders: [{}, {}, {}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-local-mutation-of-new-object-from-destructured-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-local-mutation-of-new-object-from-destructured-prop.expect.md
new file mode 100644
index 00000000000..b1a0f6cbb34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-local-mutation-of-new-object-from-destructured-prop.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const {a} = props;
+  const {b, ...rest} = a;
+  // Local mutation of `rest` is allowed since it is a newly allocated object
+  rest.value = props.value;
+  return <Stringify rest={rest} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {b: 0, other: 'other'}, value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(5);
+  const { a } = props;
+  let rest;
+  if ($[0] !== a || $[1] !== props.value) {
+    const { b, ...t0 } = a;
+    rest = t0;
+
+    rest.value = props.value;
+    $[0] = a;
+    $[1] = props.value;
+    $[2] = rest;
+  } else {
+    rest = $[2];
+  }
+  let t0;
+  if ($[3] !== rest) {
+    t0 = <Stringify rest={rest} />;
+    $[3] = rest;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { b: 0, other: "other" }, value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"rest":{"other":"other","value":42}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-local-mutation-of-new-object-from-destructured-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-local-mutation-of-new-object-from-destructured-prop.js
new file mode 100644
index 00000000000..a77de3177d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-local-mutation-of-new-object-from-destructured-prop.js
@@ -0,0 +1,14 @@
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const {a} = props;
+  const {b, ...rest} = a;
+  // Local mutation of `rest` is allowed since it is a newly allocated object
+  rest.value = props.value;
+  return <Stringify rest={rest} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {b: 0, other: 'other'}, value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md
new file mode 100644
index 00000000000..95570bdcd4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+function Component(props) {
+  const x = [props.value];
+  useEffect(() => {}, []);
+  const onClick = () => {
+    console.log(x.length);
+  };
+  return (
+    <div onClick={onClick}>
+      {x.map(item => {
+        return <span key={item}>{item}</span>;
+      })}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+function Component(props) {
+  const $ = _c(10);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = [props.value];
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(_temp, t1);
+  let t2;
+  if ($[3] !== x.length) {
+    t2 = () => {
+      console.log(x.length);
+    };
+    $[3] = x.length;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const onClick = t2;
+  let t3;
+  if ($[5] !== x) {
+    t3 = x.map(_temp2);
+    $[5] = x;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== onClick || $[8] !== t3) {
+    t4 = <div onClick={onClick}>{t3}</div>;
+    $[7] = onClick;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+function _temp2(item) {
+  return <span key={item}>{item}</span>;
+}
+function _temp() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><span>42</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.js
new file mode 100644
index 00000000000..b32b696c6ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.js
@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react';
+
+function Component(props) {
+  const x = [props.value];
+  useEffect(() => {}, []);
+  const onClick = () => {
+    console.log(x.length);
+  };
+  return (
+    <div onClick={onClick}>
+      {x.map(item => {
+        return <span key={item}>{item}</span>;
+      })}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-for-of-collection-when-loop-body-returns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-for-of-collection-when-loop-body-returns.expect.md
new file mode 100644
index 00000000000..bc124ff96af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-for-of-collection-when-loop-body-returns.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+function useHook(nodeID, condition) {
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  for (const key of Object.keys(node?.fields ?? {})) {
+    if (condition) {
+      return new Class(node.fields?.[field]);
+    }
+  }
+  return new Class();
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useHook(nodeID, condition) {
+  const $ = _c(7);
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+  let t0;
+  if ($[0] !== node?.fields) {
+    t0 = Object.keys(node?.fields ?? {});
+    $[0] = node?.fields;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== condition || $[3] !== node || $[4] !== t0) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: for (const key of t0) {
+      if (condition) {
+        t1 = new Class(node.fields?.[field]);
+        break bb0;
+      }
+    }
+    $[2] = condition;
+    $[3] = node;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  let t2;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = new Class();
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-for-of-collection-when-loop-body-returns.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-for-of-collection-when-loop-body-returns.js
new file mode 100644
index 00000000000..a010f3f28cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-for-of-collection-when-loop-body-returns.js
@@ -0,0 +1,11 @@
+function useHook(nodeID, condition) {
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  for (const key of Object.keys(node?.fields ?? {})) {
+    if (condition) {
+      return new Class(node.fields?.[field]);
+    }
+  }
+  return new Class();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md
new file mode 100644
index 00000000000..b45977b6953
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+const someGlobal = true;
+export default function Component(props) {
+  const {b} = props;
+  const items = [];
+  let i = 0;
+  while (i < 10) {
+    if (someGlobal) {
+      items.push(<div key={i}>{b}</div>);
+      i++;
+    }
+  }
+  return <>{items}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{b: 42}],
+  sequentialRenders: [
+    {b: 0},
+    {b: 0},
+    {b: 42},
+    {b: 42},
+    {b: 0},
+    {b: 42},
+    {b: 0},
+    {b: 42},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const someGlobal = true;
+export default function Component(props) {
+  const $ = _c(2);
+  const { b } = props;
+  let t0;
+  if ($[0] !== b) {
+    const items = [];
+    let i = 0;
+    while (i < 10) {
+      if (someGlobal) {
+        items.push(<div key={i}>{b}</div>);
+        i++;
+      }
+    }
+    t0 = <>{items}</>;
+    $[0] = b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ b: 42 }],
+  sequentialRenders: [
+    { b: 0 },
+    { b: 0 },
+    { b: 42 },
+    { b: 42 },
+    { b: 0 },
+    { b: 42 },
+    { b: 0 },
+    { b: 42 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div>
+<div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div>
+<div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div>
+<div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div>
+<div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div>
+<div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div>
+<div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div><div>0</div>
+<div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div><div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.js
new file mode 100644
index 00000000000..f66224019c8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.js
@@ -0,0 +1,28 @@
+const someGlobal = true;
+export default function Component(props) {
+  const {b} = props;
+  const items = [];
+  let i = 0;
+  while (i < 10) {
+    if (someGlobal) {
+      items.push(<div key={i}>{b}</div>);
+      i++;
+    }
+  }
+  return <>{items}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{b: 42}],
+  sequentialRenders: [
+    {b: 0},
+    {b: 0},
+    {b: 42},
+    {b: 42},
+    {b: 0},
+    {b: 42},
+    {b: 0},
+    {b: 42},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md
new file mode 100644
index 00000000000..15bc857ac76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees @enableUseTypeAnnotations
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+// This is a version of error.todo-repro-missing-memoization-lack-of-phi-types
+// with explicit type annotations and using enableUseTypeAnnotations to demonstrate
+// that type information is sufficient to preserve memoization in this example
+function Component() {
+  const data = useFragment();
+  const nodes: Array<any> = data.nodes ?? [];
+  const flatMap: Array<any> = nodes.flatMap(node => node.items);
+  const filtered: Array<any> = flatMap.filter(item => item != null);
+  const map: Array<any> = useMemo(() => filtered.map(), [filtered]);
+  const index: Array<any> = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { useFragment } from "shared-runtime";
+
+function Component() {
+  const $ = _c(7);
+  const data = useFragment();
+  let t0;
+  if ($[0] !== data.nodes) {
+    const nodes = data.nodes ?? [];
+    const flatMap = nodes.flatMap(_temp);
+    t0 = flatMap.filter(_temp2);
+    $[0] = data.nodes;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const filtered = t0;
+  let t1;
+  if ($[2] !== filtered) {
+    t1 = filtered.map();
+    $[2] = filtered;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const map = t1;
+  const index = filtered.findIndex(_temp3);
+  let t2;
+  if ($[4] !== index || $[5] !== map) {
+    t2 = (
+      <div>
+        {map}
+        {index}
+      </div>
+    );
+    $[4] = index;
+    $[5] = map;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp3(x) {
+  return x === null;
+}
+function _temp2(item) {
+  return item != null;
+}
+function _temp(node) {
+  return node.items;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js
new file mode 100644
index 00000000000..914ef6199d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.js
@@ -0,0 +1,22 @@
+// @flow @validatePreserveExistingMemoizationGuarantees @enableUseTypeAnnotations
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+// This is a version of error.todo-repro-missing-memoization-lack-of-phi-types
+// with explicit type annotations and using enableUseTypeAnnotations to demonstrate
+// that type information is sufficient to preserve memoization in this example
+function Component() {
+  const data = useFragment();
+  const nodes: Array<any> = data.nodes ?? [];
+  const flatMap: Array<any> = nodes.flatMap(node => node.items);
+  const filtered: Array<any> = flatMap.filter(item => item != null);
+  const map: Array<any> = useMemo(() => filtered.map(), [filtered]);
+  const index: Array<any> = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.expect.md
new file mode 100644
index 00000000000..4728226c64c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+function Component() {
+  const data = useFragment();
+  const nodes = data.nodes ?? [];
+  const flatMap = nodes.flatMap(node => node.items);
+  const filtered = flatMap.filter(item => item != null);
+  const map = useMemo(() => filtered.map(), [filtered]);
+  const index = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { useFragment } from "shared-runtime";
+
+function Component() {
+  const $ = _c(7);
+  const data = useFragment();
+  let t0;
+  if ($[0] !== data.nodes) {
+    const nodes = data.nodes ?? [];
+    const flatMap = nodes.flatMap(_temp);
+    t0 = flatMap.filter(_temp2);
+    $[0] = data.nodes;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const filtered = t0;
+  let t1;
+  if ($[2] !== filtered) {
+    t1 = filtered.map();
+    $[2] = filtered;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const map = t1;
+  const index = filtered.findIndex(_temp3);
+  let t2;
+  if ($[4] !== index || $[5] !== map) {
+    t2 = (
+      <div>
+        {map}
+        {index}
+      </div>
+    );
+    $[4] = index;
+    $[5] = map;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp3(x) {
+  return x === null;
+}
+function _temp2(item) {
+  return item != null;
+}
+function _temp(node) {
+  return node.items;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.js
new file mode 100644
index 00000000000..a2d5b5d4711
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.js
@@ -0,0 +1,19 @@
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {useFragment} from 'shared-runtime';
+
+function Component() {
+  const data = useFragment();
+  const nodes = data.nodes ?? [];
+  const flatMap = nodes.flatMap(node => node.items);
+  const filtered = flatMap.filter(item => item != null);
+  const map = useMemo(() => filtered.map(), [filtered]);
+  const index = filtered.findIndex(x => x === null);
+
+  return (
+    <div>
+      {map}
+      {index}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-phi-after-dce-merge-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-phi-after-dce-merge-scopes.expect.md
new file mode 100644
index 00000000000..da7220c73c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-phi-after-dce-merge-scopes.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function Component() {
+  let v3, v4, acc;
+  v3 = false;
+  v4 = v3;
+  acc = v3;
+  if (acc) {
+    acc = true;
+    v3 = acc;
+  }
+  if (acc) {
+    v3 = v4;
+  }
+  v4 = v3;
+  return [acc, v3, v4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [false, false, false];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [false,false,false]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-phi-after-dce-merge-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-phi-after-dce-merge-scopes.js
new file mode 100644
index 00000000000..298ccbebaf2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-phi-after-dce-merge-scopes.js
@@ -0,0 +1,20 @@
+function Component() {
+  let v3, v4, acc;
+  v3 = false;
+  v4 = v3;
+  acc = v3;
+  if (acc) {
+    acc = true;
+    v3 = acc;
+  }
+  if (acc) {
+    v3 = v4;
+  }
+  v4 = v3;
+  return [acc, v3, v4];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md
new file mode 100644
index 00000000000..993747a5083
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md
@@ -0,0 +1,101 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+
+function Component(props) {
+  const items = props.items ? props.items.slice() : [];
+  const [state] = useState('');
+  return props.cond ? (
+    <div>{state}</div>
+  ) : (
+    <div>
+      {items.map(item => (
+        <div key={item.id}>{item.name}</div>
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, items: [{id: 0, name: 'Alice'}]}],
+  sequentialRenders: [
+    {cond: false, items: [{id: 0, name: 'Alice'}]},
+    {
+      cond: false,
+      items: [
+        {id: 0, name: 'Alice'},
+        {id: 1, name: 'Bob'},
+      ],
+    },
+    {
+      cond: true,
+      items: [
+        {id: 0, name: 'Alice'},
+        {id: 1, name: 'Bob'},
+      ],
+    },
+    {
+      cond: false,
+      items: [
+        {id: 1, name: 'Bob'},
+        {id: 2, name: 'Claire'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { useState } from "react";
+
+function Component(props) {
+  const items = props.items ? props.items.slice() : [];
+  const [state] = useState("");
+  return props.cond ? <div>{state}</div> : <div>{items.map(_temp)}</div>;
+}
+function _temp(item) {
+  return <div key={item.id}>{item.name}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, items: [{ id: 0, name: "Alice" }] }],
+  sequentialRenders: [
+    { cond: false, items: [{ id: 0, name: "Alice" }] },
+    {
+      cond: false,
+      items: [
+        { id: 0, name: "Alice" },
+        { id: 1, name: "Bob" },
+      ],
+    },
+    {
+      cond: true,
+      items: [
+        { id: 0, name: "Alice" },
+        { id: 1, name: "Bob" },
+      ],
+    },
+    {
+      cond: false,
+      items: [
+        { id: 1, name: "Bob" },
+        { id: 2, name: "Claire" },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>Alice</div></div>
+<div><div>Alice</div><div>Bob</div></div>
+<div></div>
+<div><div>Bob</div><div>Claire</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.js
new file mode 100644
index 00000000000..e95b9de05c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.js
@@ -0,0 +1,44 @@
+import {useState} from 'react';
+
+function Component(props) {
+  const items = props.items ? props.items.slice() : [];
+  const [state] = useState('');
+  return props.cond ? (
+    <div>{state}</div>
+  ) : (
+    <div>
+      {items.map(item => (
+        <div key={item.id}>{item.name}</div>
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, items: [{id: 0, name: 'Alice'}]}],
+  sequentialRenders: [
+    {cond: false, items: [{id: 0, name: 'Alice'}]},
+    {
+      cond: false,
+      items: [
+        {id: 0, name: 'Alice'},
+        {id: 1, name: 'Bob'},
+      ],
+    },
+    {
+      cond: true,
+      items: [
+        {id: 0, name: 'Alice'},
+        {id: 1, name: 'Bob'},
+      ],
+    },
+    {
+      cond: false,
+      items: [
+        {id: 1, name: 'Bob'},
+        {id: 2, name: 'Claire'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.expect.md
new file mode 100644
index 00000000000..83aa4107748
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.expect.md
@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+// @flow
+component Example() {
+  const fooRef = useRef();
+
+  function updateStyles() {
+    const foo = fooRef.current;
+    // The access of `barRef` here before its declaration causes it be hoisted...
+    if (barRef.current == null || foo == null) {
+      return;
+    }
+    foo.style.height = '100px';
+  }
+
+  // ...which previously meant that we didn't infer a type...
+  const barRef = useRef(null);
+
+  const resizeRef = useResizeObserver(
+    rect => {
+      const {width} = rect;
+      // ...which meant that we failed to ignore the mutation here...
+      barRef.current = width;
+    } // ...which caused this to fail with "can't freeze a mutable function"
+  );
+
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(_ => {
+      updateStyles();
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return <div ref={resizeRef} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Example() {
+  const $ = _c(6);
+  const fooRef = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function updateStyles() {
+      const foo = fooRef.current;
+
+      if (barRef.current == null || foo == null) {
+        return;
+      }
+
+      foo.style.height = "100px";
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const updateStyles = t0;
+
+  const barRef = useRef(null);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (rect) => {
+      const { width } = rect;
+
+      barRef.current = width;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const resizeRef = useResizeObserver(t1);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      const observer = new ResizeObserver((_) => {
+        updateStyles();
+      });
+      return () => {
+        observer.disconnect();
+      };
+    };
+    t3 = [];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useLayoutEffect(t2, t3);
+  let t4;
+  if ($[4] !== resizeRef) {
+    t4 = <div ref={resizeRef} />;
+    $[4] = resizeRef;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.js
new file mode 100644
index 00000000000..7aab1a5c40e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.js
@@ -0,0 +1,36 @@
+// @flow
+component Example() {
+  const fooRef = useRef();
+
+  function updateStyles() {
+    const foo = fooRef.current;
+    // The access of `barRef` here before its declaration causes it be hoisted...
+    if (barRef.current == null || foo == null) {
+      return;
+    }
+    foo.style.height = '100px';
+  }
+
+  // ...which previously meant that we didn't infer a type...
+  const barRef = useRef(null);
+
+  const resizeRef = useResizeObserver(
+    rect => {
+      const {width} = rect;
+      // ...which meant that we failed to ignore the mutation here...
+      barRef.current = width;
+    } // ...which caused this to fail with "can't freeze a mutable function"
+  );
+
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(_ => {
+      updateStyles();
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return <div ref={resizeRef} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.expect.md
new file mode 100644
index 00000000000..20eab399ba0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+import {identity, makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The argument maybe-aliases into the return
+    const obj = identity(object);
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: makeObject_Primitives(), value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Example(props) {
+  const $ = _c(5);
+  const object = props.object;
+  let t0;
+  if ($[0] !== object || $[1] !== props.value) {
+    const f = () => {
+      const obj = identity(object);
+      obj.property = props.value;
+      return obj;
+    };
+    t0 = f();
+    $[0] = object;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const obj_0 = t0;
+  let t1;
+  if ($[3] !== obj_0) {
+    t1 = <Stringify obj={obj_0} />;
+    $[3] = obj_0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ object: makeObject_Primitives(), value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"a":0,"b":"value1","c":true,"property":42}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.js
new file mode 100644
index 00000000000..88070806119
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.js
@@ -0,0 +1,18 @@
+import {identity, makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The argument maybe-aliases into the return
+    const obj = identity(object);
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: makeObject_Primitives(), value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.expect.md
new file mode 100644
index 00000000000..e5456ed8582
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The receiver maybe-aliases into the return
+    const obj = object.makeObject();
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Example(props) {
+  const $ = _c(5);
+  const object = props.object;
+  let t0;
+  if ($[0] !== object || $[1] !== props.value) {
+    const f = () => {
+      const obj = object.makeObject();
+      obj.property = props.value;
+      return obj;
+    };
+    t0 = f();
+    $[0] = object;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const obj_0 = t0;
+  let t1;
+  if ($[3] !== obj_0) {
+    t1 = <Stringify obj={obj_0} />;
+    $[3] = obj_0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ object: { makeObject: makeObject_Primitives }, value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"a":0,"b":"value1","c":true,"property":42}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.js
new file mode 100644
index 00000000000..92834df138d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.js
@@ -0,0 +1,18 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The receiver maybe-aliases into the return
+    const obj = object.makeObject();
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.expect.md
new file mode 100644
index 00000000000..0c91a935ed7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const obj = props.object.makeObject();
+  obj.property = props.value;
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Example(props) {
+  const $ = _c(5);
+  let obj;
+  if ($[0] !== props.object || $[1] !== props.value) {
+    obj = props.object.makeObject();
+    obj.property = props.value;
+    $[0] = props.object;
+    $[1] = props.value;
+    $[2] = obj;
+  } else {
+    obj = $[2];
+  }
+  let t0;
+  if ($[3] !== obj) {
+    t0 = <Stringify obj={obj} />;
+    $[3] = obj;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ object: { makeObject: makeObject_Primitives }, value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"a":0,"b":"value1","c":true,"property":42}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.js
new file mode 100644
index 00000000000..d5ed97e159b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.js
@@ -0,0 +1,12 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const obj = props.object.makeObject();
+  obj.property = props.value;
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md
new file mode 100644
index 00000000000..3a711300943
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+function Component() {
+  const items = useItems();
+  const filteredItems = useMemo(
+    () =>
+      items.filter(([item]) => {
+        return item.name != null;
+      }),
+    [item]
+  );
+
+  if (filteredItems.length === 0) {
+    // note: this must return nested JSX to create the right scope
+    // shape that causes no declarations to be emitted
+    return (
+      <div>
+        <span />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {filteredItems.map(([item]) => (
+        <Stringify item={item} />
+      ))}
+    </>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+function Component() {
+  const $ = _c(6);
+  const items = useItems();
+  let t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const filteredItems = items.filter(_temp);
+      if (filteredItems.length === 0) {
+        let t2;
+        if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+          t2 = (
+            <div>
+              <span />
+            </div>
+          );
+          $[3] = t2;
+        } else {
+          t2 = $[3];
+        }
+        t1 = t2;
+        break bb0;
+      }
+      t0 = filteredItems.map(_temp2);
+    }
+    $[0] = items;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  let t2;
+  if ($[4] !== t0) {
+    t2 = <>{t0}</>;
+    $[4] = t0;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+function _temp2(t0) {
+  const [item_0] = t0;
+  return <Stringify item={item_0} />;
+}
+function _temp(t0) {
+  const [item] = t0;
+  return item.name != null;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js
new file mode 100644
index 00000000000..a4baa811b5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js
@@ -0,0 +1,29 @@
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+function Component() {
+  const items = useItems();
+  const filteredItems = useMemo(
+    () =>
+      items.filter(([item]) => {
+        return item.name != null;
+      }),
+    [item]
+  );
+
+  if (filteredItems.length === 0) {
+    // note: this must return nested JSX to create the right scope
+    // shape that causes no declarations to be emitted
+    return (
+      <div>
+        <span />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {filteredItems.map(([item]) => (
+        <Stringify item={item} />
+      ))}
+    </>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md
new file mode 100644
index 00000000000..925470cc6a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import {identity, makeObject_Primitives} from 'shared-runtime';
+import fbt from 'fbt';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+  const cond = makeObject_Primitives();
+  if (!cond) {
+    return null;
+  }
+
+  return (
+    <div className="foo">
+      {fbt(
+        'Lorum ipsum' + fbt.param('thing', object.b) + ' blah blah blah',
+        'More text'
+      )}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, makeObject_Primitives } from "shared-runtime";
+import fbt from "fbt";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const object = makeObject_Primitives();
+      const cond = makeObject_Primitives();
+      if (!cond) {
+        t1 = null;
+        break bb0;
+      }
+      t0 = (
+        <div className="foo">
+          {fbt._(
+            "Lorum ipsum{thing} blah blah blah",
+            [fbt._param("thing", object.b)],
+            { hk: "lwmuH" },
+          )}
+        </div>
+      );
+    }
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="foo">Lorum ipsumvalue1 blah blah blah</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.js
new file mode 100644
index 00000000000..cb846169412
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.js
@@ -0,0 +1,25 @@
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import {identity, makeObject_Primitives} from 'shared-runtime';
+import fbt from 'fbt';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+  const cond = makeObject_Primitives();
+  if (!cond) {
+    return null;
+  }
+
+  return (
+    <div className="foo">
+      {fbt(
+        'Lorum ipsum' + fbt.param('thing', object.b) + ' blah blah blah',
+        'More text'
+      )}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md
new file mode 100644
index 00000000000..b5a78277288
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+function Component(listItem, thread) {
+  const isFoo = isFooThread(thread.threadType);
+  const body = useBar(listItem, [getBadgeText(listItem, isFoo)]);
+
+  return body;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(listItem, thread) {
+  const $ = _c(7);
+  let t0;
+  let t1;
+  let t2;
+  if ($[0] !== listItem || $[1] !== thread.threadType) {
+    const isFoo = isFooThread(thread.threadType);
+    t1 = useBar;
+    t2 = listItem;
+    t0 = getBadgeText(listItem, isFoo);
+    $[0] = listItem;
+    $[1] = thread.threadType;
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t0) {
+    t3 = [t0];
+    $[5] = t0;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const body = t1(t2, t3);
+  return body;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.js
new file mode 100644
index 00000000000..41c4be9afba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.js
@@ -0,0 +1,7 @@
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+function Component(listItem, thread) {
+  const isFoo = isFooThread(thread.threadType);
+  const body = useBar(listItem, [getBadgeText(listItem, isFoo)]);
+
+  return body;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-non-identifier-object-keys.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-non-identifier-object-keys.expect.md
new file mode 100644
index 00000000000..99724578229
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-non-identifier-object-keys.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+function Foo() {
+  return {
+    'a.b': 1,
+    'a\b': 2,
+    'a/b': 3,
+    'a+b': 4,
+    'a b': 5,
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { "a.b": 1, "a\b": 2, "a/b": 3, "a+b": 4, "a b": 5 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a.b":1,"a\b":2,"a/b":3,"a+b":4,"a b":5}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-non-identifier-object-keys.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-non-identifier-object-keys.ts
new file mode 100644
index 00000000000..aefd815a344
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-non-identifier-object-keys.ts
@@ -0,0 +1,15 @@
+function Foo() {
+  return {
+    'a.b': 1,
+    'a\b': 2,
+    'a/b': 3,
+    'a+b': 4,
+    'a b': 5,
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md
new file mode 100644
index 00000000000..407a9744250
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {identity, mutate} from 'shared-runtime';
+
+/**
+ * Fixed in the new inference model.
+ *
+ * Bug: copy of error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr
+ * with the mutation hoisted to a named variable instead of being directly
+ * inlined into the Object key.
+ *
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   Forget:
+ *   (kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe","wat2":"joe"}]
+ */
+function Component(props) {
+  const key = {};
+  const tmp = (mutate(key), key);
+  const context = {
+    // Here, `tmp` is frozen (as it's inferred to be a primitive/string)
+    [tmp]: identity([props.value]),
+  };
+  mutate(key);
+  return [context, key];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [{value: 42}, {value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { identity, mutate } from "shared-runtime";
+
+/**
+ * Fixed in the new inference model.
+ *
+ * Bug: copy of error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr
+ * with the mutation hoisted to a named variable instead of being directly
+ * inlined into the Object key.
+ *
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   Forget:
+ *   (kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe","wat2":"joe"}]
+ */
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.value) {
+    const key = {};
+    const tmp = (mutate(key), key);
+    const context = { [tmp]: identity([props.value]) };
+    mutate(key);
+    t0 = [context, key];
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [{ value: 42 }, { value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+[{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.js
new file mode 100644
index 00000000000..71abb3bc497
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.js
@@ -0,0 +1,34 @@
+// @enableNewMutationAliasingModel
+import {identity, mutate} from 'shared-runtime';
+
+/**
+ * Fixed in the new inference model.
+ *
+ * Bug: copy of error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr
+ * with the mutation hoisted to a named variable instead of being directly
+ * inlined into the Object key.
+ *
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   Forget:
+ *   (kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}]
+ *   [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe","wat2":"joe"}]
+ */
+function Component(props) {
+  const key = {};
+  const tmp = (mutate(key), key);
+  const context = {
+    // Here, `tmp` is frozen (as it's inferred to be a primitive/string)
+    [tmp]: identity([props.value]),
+  };
+  mutate(key);
+  return [context, key];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [{value: 42}, {value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-fromEntries-entries.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-fromEntries-entries.expect.md
new file mode 100644
index 00000000000..b7ebcbc1cf6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-fromEntries-entries.expect.md
@@ -0,0 +1,97 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component({items}) {
+  const record = useMemo(
+    () =>
+      Object.fromEntries(
+        items.map(item => [item.id, ref => <Stringify ref={ref} {...item} />])
+      ),
+    [items]
+  );
+
+  // Without a declaration for Object.entries(), this would be assumed to mutate
+  // `record`, meaning existing memoization couldn't be preserved
+  return (
+    <div>
+      {Object.entries(record).map(([id, render]) => (
+        <Stringify key={id} render={render} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: '0', name: 'Hello'},
+        {id: '1', name: 'World!'},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { Stringify } from "shared-runtime";
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component(t0) {
+  const $ = _c(4);
+  const { items } = t0;
+  let t1;
+  if ($[0] !== items) {
+    t1 = Object.fromEntries(items.map(_temp));
+    $[0] = items;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const record = t1;
+  let t2;
+  if ($[2] !== record) {
+    t2 = <div>{Object.entries(record).map(_temp2)}</div>;
+    $[2] = record;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp2(t0) {
+  const [id, render] = t0;
+  return <Stringify key={id} render={render} />;
+}
+function _temp(item) {
+  return [item.id, (ref) => <Stringify ref={ref} {...item} />];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        { id: "0", name: "Hello" },
+        { id: "1", name: "World!" },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>{"render":"[[ function params=1 ]]"}</div><div>{"render":"[[ function params=1 ]]"}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-fromEntries-entries.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-fromEntries-entries.js
new file mode 100644
index 00000000000..7dd8f34826a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-fromEntries-entries.js
@@ -0,0 +1,36 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {Stringify} from 'shared-runtime';
+
+// derived from https://github.com/facebook/react/issues/32261
+function Component({items}) {
+  const record = useMemo(
+    () =>
+      Object.fromEntries(
+        items.map(item => [item.id, ref => <Stringify ref={ref} {...item} />])
+      ),
+    [items]
+  );
+
+  // Without a declaration for Object.entries(), this would be assumed to mutate
+  // `record`, meaning existing memoization couldn't be preserved
+  return (
+    <div>
+      {Object.entries(record).map(([id, render]) => (
+        <Stringify key={id} render={render} />
+      ))}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      items: [
+        {id: '0', name: 'Hello'},
+        {id: '1', name: 'World!'},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-pattern.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-pattern.expect.md
new file mode 100644
index 00000000000..ee19fc2e4c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-pattern.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function component(t) {
+  let {a} = t;
+  let y = {a};
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{a: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(t) {
+  const $ = _c(2);
+  const { a } = t;
+  let t0;
+  if ($[0] !== a) {
+    t0 = { a };
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const y = t0;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{ a: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":42}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-pattern.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-pattern.js
new file mode 100644
index 00000000000..d02c5c64de6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-pattern.js
@@ -0,0 +1,10 @@
+function component(t) {
+  let {a} = t;
+  let y = {a};
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{a: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preds-undefined-try-catch-return-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preds-undefined-try-catch-return-primitive.expect.md
new file mode 100644
index 00000000000..618dea3e51a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preds-undefined-try-catch-return-primitive.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+
+import {useMemo} from 'react';
+
+const checkforTouchEvents = true;
+function useSupportsTouchEvent() {
+  return useMemo(() => {
+    if (checkforTouchEvents) {
+      try {
+        document.createEvent('TouchEvent');
+        return true;
+      } catch {
+        return false;
+      }
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useSupportsTouchEvent,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+
+import { useMemo } from "react";
+
+const checkforTouchEvents = true;
+function useSupportsTouchEvent() {
+  let t0;
+  bb0: {
+    if (checkforTouchEvents) {
+      try {
+        document.createEvent("TouchEvent");
+        t0 = true;
+        break bb0;
+      } catch {
+        t0 = false;
+        break bb0;
+      }
+    }
+    t0 = undefined;
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useSupportsTouchEvent,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) true
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preds-undefined-try-catch-return-primitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preds-undefined-try-catch-return-primitive.js
new file mode 100644
index 00000000000..d5f912715d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preds-undefined-try-catch-return-primitive.js
@@ -0,0 +1,22 @@
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+
+import {useMemo} from 'react';
+
+const checkforTouchEvents = true;
+function useSupportsTouchEvent() {
+  return useMemo(() => {
+    if (checkforTouchEvents) {
+      try {
+        document.createEvent('TouchEvent');
+        return true;
+      } catch {
+        return false;
+      }
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useSupportsTouchEvent,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency.expect.md
new file mode 100644
index 00000000000..eca36e2a791
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {identity, Stringify} from 'shared-runtime';
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * Previously ValidatePreservedManualMemoization rejected this input, because
+ * the original memoization had `object` depending on `input` but we split the scope per above,
+ * and the scope for the FinishMemoize instruction is the second scope which depends on `value`
+ */
+function useInputValue(input) {
+  const object = React.useMemo(() => {
+    const {value} = identity(input);
+    return {value};
+  }, [input]);
+  return object;
+}
+
+function Component() {
+  return <Stringify value={useInputValue({value: 42}).value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+
+import { identity, Stringify } from "shared-runtime";
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * Previously ValidatePreservedManualMemoization rejected this input, because
+ * the original memoization had `object` depending on `input` but we split the scope per above,
+ * and the scope for the FinishMemoize instruction is the second scope which depends on `value`
+ */
+function useInputValue(input) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== input) {
+    t0 = identity(input);
+    $[0] = input;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const { value } = t0;
+  let t1;
+  if ($[2] !== value) {
+    t1 = { value };
+    $[2] = value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const object = t1;
+  return object;
+}
+
+function Component() {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { value: 42 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const t1 = useInputValue(t0);
+  let t2;
+  if ($[1] !== t1.value) {
+    t2 = <Stringify value={t1.value} />;
+    $[1] = t1.value;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":42}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency.js
new file mode 100644
index 00000000000..a9533ce44bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency.js
@@ -0,0 +1,31 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {identity, Stringify} from 'shared-runtime';
+
+/**
+ * Repro from https://github.com/facebook/react/issues/34262
+ *
+ * The compiler memoizes more precisely than the original code, with two reactive scopes:
+ * - One for `transform(input)` with `input` as dep
+ * - One for `{value}` with `value` as dep
+ *
+ * Previously ValidatePreservedManualMemoization rejected this input, because
+ * the original memoization had `object` depending on `input` but we split the scope per above,
+ * and the scope for the FinishMemoize instruction is the second scope which depends on `value`
+ */
+function useInputValue(input) {
+  const object = React.useMemo(() => {
+    const {value} = identity(input);
+    return {value};
+  }, [input]);
+  return object;
+}
+
+function Component() {
+  return <Stringify value={useInputValue({value: 42}).value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-jsx.expect.md
new file mode 100644
index 00000000000..32cbbb2b918
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-jsx.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function V0({v1, v2}: V3<{v1: any, v2: V4}>): V12.V11 {
+  const v5 = v1.v6?.v7;
+  return (
+    <Component8 c9={va} cb="apqjx">
+      {v5 != null ? (
+        <ComponentC cd={v5}>
+          <ComponentE cf={v1} c10={v2} />
+        </ComponentC>
+      ) : (
+        <ComponentE cf={v1} c10={v2} />
+      )}
+    </Component8>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function V0(t0) {
+  const $ = _c(4);
+  const { v1, v2 } = t0;
+  const v5 = v1.v6?.v7;
+  let t1;
+  if ($[0] !== v1 || $[1] !== v2 || $[2] !== v5) {
+    t1 = (
+      <Component8 c9={va} cb="apqjx">
+        {v5 != null ? (
+          <ComponentC cd={v5}>
+            <ComponentE cf={v1} c10={v2} />
+          </ComponentC>
+        ) : (
+          <ComponentE cf={v1} c10={v2} />
+        )}
+      </Component8>
+    );
+    $[0] = v1;
+    $[1] = v2;
+    $[2] = v5;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-jsx.js
new file mode 100644
index 00000000000..476ec9e35ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-jsx.js
@@ -0,0 +1,14 @@
+function V0({v1, v2}: V3<{v1: any, v2: V4}>): V12.V11 {
+  const v5 = v1.v6?.v7;
+  return (
+    <Component8 c9={va} cb="apqjx">
+      {v5 != null ? (
+        <ComponentC cd={v5}>
+          <ComponentE cf={v1} c10={v2} />
+        </ComponentC>
+      ) : (
+        <ComponentE cf={v1} c10={v2} />
+      )}
+    </Component8>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md
new file mode 100644
index 00000000000..97109cfc4e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+function V0({v1}: V2<{v1?: V3}>): V2b.V2a {
+  const v4 = v5(V6.v7({v8: V9.va}));
+  const vb = (
+    <ComponentC cd="TxqUy" ce="oh`]uc" cf="Bdbo" c10={!V9.va && v11.v12}>
+      gmhubcw
+      {v1 === V3.V13 ? (
+        <c14 c15="L^]w\\T\\qrGmqrlQyrvBgf\\inuRdkEqwVPwixiriYGSZmKJf]E]RdT{N[WyVPiEJIbdFzvDohJV[BV`H[[K^xoy[HOGKDqVzUJ^h">
+          iawyneijcgamsfgrrjyvhjrrqvzexxwenxqoknnilmfloafyvnvkqbssqnxnexqvtcpvjysaiovjxyqrorqskfph
+        </c14>
+      ) : v16.v17('pyorztRC]EJzVuP^e') ? (
+        <c14 c15="CRinMqvmOknWRAKERI]RBzB_LXGKQe{SUpoN[\\gL[`bLMOhvFqDVVMNOdY">
+          goprinbjmmjhfserfuqyluxcewpyjihektogc
+        </c14>
+      ) : (
+        <c14 c15="H\\\\GAcTc\\lfGMW[yHriCpvW`w]niSIKj\\kdgFI">
+          yejarlvudihqdrdgpvahovggdnmgnueedxpbwbkdvvkdhqwrtoiual
+        </c14>
+      )}
+      hflmn
+    </ComponentC>
+  );
+  return vb;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function V0(t0) {
+  const $ = _c(2);
+  const { v1 } = t0;
+  v5(V6.v7({ v8: V9.va }));
+  let t1;
+  if ($[0] !== v1) {
+    t1 = (
+      <ComponentC cd="TxqUy" ce="oh`]uc" cf="Bdbo" c10={!V9.va && v11.v12}>
+        gmhubcw
+        {v1 === V3.V13 ? (
+          <c14
+            c15={
+              "L^]w\\\\T\\\\qrGmqrlQyrvBgf\\\\inuRdkEqwVPwixiriYGSZmKJf]E]RdT{N[WyVPiEJIbdFzvDohJV[BV`H[[K^xoy[HOGKDqVzUJ^h"
+            }
+          >
+            iawyneijcgamsfgrrjyvhjrrqvzexxwenxqoknnilmfloafyvnvkqbssqnxnexqvtcpvjysaiovjxyqrorqskfph
+          </c14>
+        ) : v16.v17("pyorztRC]EJzVuP^e") ? (
+          <c14
+            c15={
+              "CRinMqvmOknWRAKERI]RBzB_LXGKQe{SUpoN[\\\\gL[`bLMOhvFqDVVMNOdY"
+            }
+          >
+            goprinbjmmjhfserfuqyluxcewpyjihektogc
+          </c14>
+        ) : (
+          <c14 c15={"H\\\\\\\\GAcTc\\\\lfGMW[yHriCpvW`w]niSIKj\\\\kdgFI"}>
+            yejarlvudihqdrdgpvahovggdnmgnueedxpbwbkdvvkdhqwrtoiual
+          </c14>
+        )}
+        hflmn
+      </ComponentC>
+    );
+    $[0] = v1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const vb = t1;
+  return vb;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.js
new file mode 100644
index 00000000000..74822160ae1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.js
@@ -0,0 +1,23 @@
+function V0({v1}: V2<{v1?: V3}>): V2b.V2a {
+  const v4 = v5(V6.v7({v8: V9.va}));
+  const vb = (
+    <ComponentC cd="TxqUy" ce="oh`]uc" cf="Bdbo" c10={!V9.va && v11.v12}>
+      gmhubcw
+      {v1 === V3.V13 ? (
+        <c14 c15="L^]w\\T\\qrGmqrlQyrvBgf\\inuRdkEqwVPwixiriYGSZmKJf]E]RdT{N[WyVPiEJIbdFzvDohJV[BV`H[[K^xoy[HOGKDqVzUJ^h">
+          iawyneijcgamsfgrrjyvhjrrqvzexxwenxqoknnilmfloafyvnvkqbssqnxnexqvtcpvjysaiovjxyqrorqskfph
+        </c14>
+      ) : v16.v17('pyorztRC]EJzVuP^e') ? (
+        <c14 c15="CRinMqvmOknWRAKERI]RBzB_LXGKQe{SUpoN[\\gL[`bLMOhvFqDVVMNOdY">
+          goprinbjmmjhfserfuqyluxcewpyjihektogc
+        </c14>
+      ) : (
+        <c14 c15="H\\\\GAcTc\\lfGMW[yHriCpvW`w]niSIKj\\kdgFI">
+          yejarlvudihqdrdgpvahovggdnmgnueedxpbwbkdvvkdhqwrtoiual
+        </c14>
+      )}
+      hflmn
+    </ComponentC>
+  );
+  return vb;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.expect.md
new file mode 100644
index 00000000000..19c85c943e7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component({other, ...props}, ref) {
+  [props, ref] = useIdentity([props, ref]);
+  return <Stringify props={props} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 'hello', children: <div>Hello</div>}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, useIdentity } from "shared-runtime";
+
+function Component(t0, ref) {
+  const $ = _c(7);
+  let props;
+  if ($[0] !== t0) {
+    let { other, ...t1 } = t0;
+    props = t1;
+    $[0] = t0;
+    $[1] = props;
+  } else {
+    props = $[1];
+  }
+  let t1;
+  if ($[2] !== props || $[3] !== ref) {
+    t1 = [props, ref];
+    $[2] = props;
+    $[3] = ref;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  [props, ref] = useIdentity(t1);
+  let t2;
+  if ($[5] !== props) {
+    t2 = <Stringify props={props} />;
+    $[5] = props;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: "hello", children: <div>Hello</div> }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"props":{"a":0,"b":"hello","children":{"type":"div","key":null,"props":{"children":"Hello"},"_owner":"[[ cyclic ref *3 ]]","_store":{}}}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.js
new file mode 100644
index 00000000000..329000aedb0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-props.js
@@ -0,0 +1,11 @@
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component({other, ...props}, ref) {
+  [props, ref] = useIdentity([props, ref]);
+  return <Stringify props={props} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 'hello', children: <div>Hello</div>}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md
new file mode 100644
index 00000000000..719ef502af1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @debug
+function Component(a, b) {
+  let x = [];
+  let y = [];
+  let z = foo(a);
+  if (FLAG) {
+    x = bar(z);
+    y = baz(b);
+  }
+  return [x, y];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @debug
+function Component(a, b) {
+  const $ = _c(11);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let x = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let y = t1;
+  if ($[2] !== a || $[3] !== b) {
+    const z = foo(a);
+    if (FLAG) {
+      x = bar(z);
+      let t2;
+      if ($[6] !== b) {
+        t2 = baz(b);
+        $[6] = b;
+        $[7] = t2;
+      } else {
+        t2 = $[7];
+      }
+      y = t2;
+    }
+    $[2] = a;
+    $[3] = b;
+    $[4] = x;
+    $[5] = y;
+  } else {
+    x = $[4];
+    y = $[5];
+  }
+  let t2;
+  if ($[8] !== x || $[9] !== y) {
+    t2 = [x, y];
+    $[8] = x;
+    $[9] = y;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.js
new file mode 100644
index 00000000000..2ffd6efb9f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.js
@@ -0,0 +1,11 @@
+// @debug
+function Component(a, b) {
+  let x = [];
+  let y = [];
+  let z = foo(a);
+  if (FLAG) {
+    x = bar(z);
+    y = baz(b);
+  }
+  return [x, y];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
new file mode 100644
index 00000000000..0ce46d3cc5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+import {Stringify, identity, mutate, CONST_TRUE} from 'shared-runtime';
+
+function Foo(props, ref) {
+  const value = {};
+  if (CONST_TRUE) {
+    mutate(value);
+    return <Stringify ref={ref} />;
+  }
+  mutate(value);
+  if (CONST_TRUE) {
+    return <Stringify ref={identity(ref)} />;
+  }
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}, {current: 'fake-ref-object'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, identity, mutate, CONST_TRUE } from "shared-runtime";
+
+function Foo(props, ref) {
+  const $ = _c(7);
+  let t0;
+  let value;
+  if ($[0] !== ref) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      value = {};
+      if (CONST_TRUE) {
+        mutate(value);
+        t0 = <Stringify ref={ref} />;
+        break bb0;
+      }
+
+      mutate(value);
+    }
+    $[0] = ref;
+    $[1] = t0;
+    $[2] = value;
+  } else {
+    t0 = $[1];
+    value = $[2];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  if (CONST_TRUE) {
+    let t1;
+    if ($[3] !== ref) {
+      t1 = identity(ref);
+      $[3] = ref;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== t1) {
+      t2 = <Stringify ref={t1} />;
+      $[5] = t1;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    return t2;
+  }
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}, { current: "fake-ref-object" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"ref":{"current":"fake-ref-object"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.tsx
new file mode 100644
index 00000000000..fc52ce67669
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.tsx
@@ -0,0 +1,19 @@
+import {Stringify, identity, mutate, CONST_TRUE} from 'shared-runtime';
+
+function Foo(props, ref) {
+  const value = {};
+  if (CONST_TRUE) {
+    mutate(value);
+    return <Stringify ref={ref} />;
+  }
+  mutate(value);
+  if (CONST_TRUE) {
+    return <Stringify ref={identity(ref)} />;
+  }
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}, {current: 'fake-ref-object'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md
new file mode 100644
index 00000000000..8a56a464747
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md
@@ -0,0 +1,127 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {Stringify, identity, makeArray, toJSON} from 'shared-runtime';
+import {useMemo} from 'react';
+
+function Component(props) {
+  const propsString = useMemo(() => toJSON(props), [props]);
+  if (propsString.length <= 2) {
+    return null;
+  }
+
+  const linkProps = {
+    url: identity(propsString),
+  };
+  const x = {};
+
+  // reactive scope ends at makeArray, as it is inferred as maybeMutate
+  return (
+    <Stringify
+      link={linkProps}
+      val1={[1]}
+      val2={[2]}
+      val3={[3]}
+      val4={[4]}
+      val5={[5]}>
+      {makeArray(x, 2)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{val: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { Stringify, identity, makeArray, toJSON } from "shared-runtime";
+import { useMemo } from "react";
+
+function Component(props) {
+  const $ = _c(10);
+  let t0;
+  let t1;
+  if ($[0] !== props) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const propsString = toJSON(props);
+      if (propsString.length <= 2) {
+        t1 = null;
+        break bb0;
+      }
+      t0 = identity(propsString);
+    }
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  let t2;
+  if ($[3] !== t0) {
+    const linkProps = { url: t0 };
+    const x = {};
+    let t3;
+    let t4;
+    let t5;
+    let t6;
+    let t7;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = [1];
+      t4 = [2];
+      t5 = [3];
+      t6 = [4];
+      t7 = [5];
+      $[5] = t3;
+      $[6] = t4;
+      $[7] = t5;
+      $[8] = t6;
+      $[9] = t7;
+    } else {
+      t3 = $[5];
+      t4 = $[6];
+      t5 = $[7];
+      t6 = $[8];
+      t7 = $[9];
+    }
+    t2 = (
+      <Stringify
+        link={linkProps}
+        val1={t3}
+        val2={t4}
+        val3={t5}
+        val4={t6}
+        val5={t7}
+      >
+        {makeArray(x, 2)}
+      </Stringify>
+    );
+    $[3] = t0;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ val: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"link":{"url":"{\"val\":2}"},"val1":[1],"val2":[2],"val3":[3],"val4":[4],"val5":[5],"children":[{},2]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js
new file mode 100644
index 00000000000..139be81a6c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js
@@ -0,0 +1,33 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import {Stringify, identity, makeArray, toJSON} from 'shared-runtime';
+import {useMemo} from 'react';
+
+function Component(props) {
+  const propsString = useMemo(() => toJSON(props), [props]);
+  if (propsString.length <= 2) {
+    return null;
+  }
+
+  const linkProps = {
+    url: identity(propsString),
+  };
+  const x = {};
+
+  // reactive scope ends at makeArray, as it is inferred as maybeMutate
+  return (
+    <Stringify
+      link={linkProps}
+      val1={[1]}
+      val2={[2]}
+      val3={[3]}
+      val4={[4]}
+      val5={[5]}>
+      {makeArray(x, 2)}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{val: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-retain-source-when-bailout.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-retain-source-when-bailout.expect.md
new file mode 100644
index 00000000000..a153a5cf746
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-retain-source-when-bailout.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @panicThreshold:"none"
+import {useNoAlias} from 'shared-runtime';
+
+const cond = true;
+function useFoo(props) {
+  props.x = 10;
+  if (cond) bar();
+  return useNoAlias({});
+
+  function bar() {
+    console.log('bar called');
+    return 5;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @panicThreshold:"none"
+import { useNoAlias } from "shared-runtime";
+
+const cond = true;
+function useFoo(props) {
+  props.x = 10;
+  if (cond) bar();
+  return useNoAlias({});
+
+  function bar() {
+    console.log("bar called");
+    return 5;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
+logs: ['bar called']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-retain-source-when-bailout.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-retain-source-when-bailout.js
new file mode 100644
index 00000000000..fc96e1435f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-retain-source-when-bailout.js
@@ -0,0 +1,19 @@
+// @panicThreshold:"none"
+import {useNoAlias} from 'shared-runtime';
+
+const cond = true;
+function useFoo(props) {
+  props.x = 10;
+  if (cond) bar();
+  return useNoAlias({});
+
+  function bar() {
+    console.log('bar called');
+    return 5;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-mutates-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-mutates-context.expect.md
new file mode 100644
index 00000000000..5ba1dbd7804
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-mutates-context.expect.md
@@ -0,0 +1,91 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Example showing that returned inner function expressions should not be
+ * typed with `freeze` effects.
+ */
+function Foo({a, b}) {
+  'use memo';
+  const obj = {};
+  const updaterFactory = () => {
+    /**
+     * This returned function expression *is* a local value. But it might (1)
+     * capture and mutate its context environment and (2) be called during
+     * render.
+     * Typing it with `freeze` effects would be incorrect as it would mean
+     * inferring that calls to updaterFactory()() do not mutate its captured
+     * context.
+     */
+    return newValue => {
+      obj.value = newValue;
+      obj.a = a;
+    };
+  };
+
+  const updater = updaterFactory();
+  updater(b);
+  return <Stringify cb={obj} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: 1, b: 2}],
+  sequentialRenders: [
+    {a: 1, b: 2},
+    {a: 1, b: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+/**
+ * Example showing that returned inner function expressions should not be
+ * typed with `freeze` effects.
+ */
+function Foo(t0) {
+  "use memo";
+  const $ = _c(3);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a || $[1] !== b) {
+    const obj = {};
+    const updaterFactory = () => (newValue) => {
+      obj.value = newValue;
+      obj.a = a;
+    };
+    const updater = updaterFactory();
+    updater(b);
+    t1 = <Stringify cb={obj} shouldInvokeFns={true} />;
+    $[0] = a;
+    $[1] = b;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ a: 1, b: 2 }],
+  sequentialRenders: [
+    { a: 1, b: 2 },
+    { a: 1, b: 3 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"value":2,"a":1},"shouldInvokeFns":true}</div>
+<div>{"cb":{"value":3,"a":1},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-mutates-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-mutates-context.js
new file mode 100644
index 00000000000..e5bd4a9b8c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-mutates-context.js
@@ -0,0 +1,37 @@
+import {Stringify} from 'shared-runtime';
+
+/**
+ * Example showing that returned inner function expressions should not be
+ * typed with `freeze` effects.
+ */
+function Foo({a, b}) {
+  'use memo';
+  const obj = {};
+  const updaterFactory = () => {
+    /**
+     * This returned function expression *is* a local value. But it might (1)
+     * capture and mutate its context environment and (2) be called during
+     * render.
+     * Typing it with `freeze` effects would be incorrect as it would mean
+     * inferring that calls to updaterFactory()() do not mutate its captured
+     * context.
+     */
+    return newValue => {
+      obj.value = newValue;
+      obj.a = a;
+    };
+  };
+
+  const updater = updaterFactory();
+  updater(b);
+  return <Stringify cb={obj} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{a: 1, b: 2}],
+  sequentialRenders: [
+    {a: 1, b: 2},
+    {a: 1, b: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.expect.md
new file mode 100644
index 00000000000..690c21f0efc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+import {makeArray, Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Example showing that returned inner function expressions should not be
+ * typed with `freeze` effects.
+ * Also see repro-returned-inner-fn-mutates-context
+ */
+function Foo({b}) {
+  'use memo';
+
+  const fnFactory = () => {
+    /**
+     * This returned function expression *is* a local value. But it might (1)
+     * capture and mutate its context environment and (2) be called during
+     * render.
+     * Typing it with `freeze` effects would be incorrect as it would mean
+     * inferring that calls to updaterFactory()() do not mutate its captured
+     * context.
+     */
+    return () => {
+      myVar = () => console.log('a');
+    };
+  };
+  let myVar = () => console.log('b');
+  useIdentity();
+
+  const fn = fnFactory();
+  const arr = makeArray(b);
+  fn(arr);
+  return <Stringify cb={myVar} value={arr} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{b: 1}],
+  sequentialRenders: [{b: 1}, {b: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeArray, Stringify, useIdentity } from "shared-runtime";
+
+/**
+ * Example showing that returned inner function expressions should not be
+ * typed with `freeze` effects.
+ * Also see repro-returned-inner-fn-mutates-context
+ */
+function Foo(t0) {
+  "use memo";
+  const $ = _c(3);
+  const { b } = t0;
+
+  const fnFactory = () => () => {
+    myVar = _temp;
+  };
+  let myVar = _temp2;
+  useIdentity();
+
+  const fn = fnFactory();
+  const arr = makeArray(b);
+  fn(arr);
+  let t1;
+  if ($[0] !== arr || $[1] !== myVar) {
+    t1 = <Stringify cb={myVar} value={arr} shouldInvokeFns={true} />;
+    $[0] = arr;
+    $[1] = myVar;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp2() {
+  return console.log("b");
+}
+function _temp() {
+  return console.log("a");
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ b: 1 }],
+  sequentialRenders: [{ b: 1 }, { b: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function"},"value":[1],"shouldInvokeFns":true}</div>
+<div>{"cb":{"kind":"Function"},"value":[2],"shouldInvokeFns":true}</div>
+logs: ['a','a']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.js
new file mode 100644
index 00000000000..00bb694b340
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.js
@@ -0,0 +1,37 @@
+import {makeArray, Stringify, useIdentity} from 'shared-runtime';
+
+/**
+ * Example showing that returned inner function expressions should not be
+ * typed with `freeze` effects.
+ * Also see repro-returned-inner-fn-mutates-context
+ */
+function Foo({b}) {
+  'use memo';
+
+  const fnFactory = () => {
+    /**
+     * This returned function expression *is* a local value. But it might (1)
+     * capture and mutate its context environment and (2) be called during
+     * render.
+     * Typing it with `freeze` effects would be incorrect as it would mean
+     * inferring that calls to updaterFactory()() do not mutate its captured
+     * context.
+     */
+    return () => {
+      myVar = () => console.log('a');
+    };
+  };
+  let myVar = () => console.log('b');
+  useIdentity();
+
+  const fn = fnFactory();
+  const arr = makeArray(b);
+  fn(arr);
+  return <Stringify cb={myVar} value={arr} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{b: 1}],
+  sequentialRenders: [{b: 1}, {b: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md
new file mode 100644
index 00000000000..b7c425ba5c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function HomeDiscoStoreItemTileRating(props) {
+  const item = useFragment();
+  let count = 0;
+  const aggregates = item?.aggregates || [];
+  aggregates.forEach(aggregate => {
+    count += aggregate.count || 0;
+  });
+
+  return <Text>{count}</Text>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function HomeDiscoStoreItemTileRating(props) {
+  const $ = _c(4);
+  const item = useFragment();
+  let count;
+  if ($[0] !== item?.aggregates) {
+    count = 0;
+    const aggregates = item?.aggregates || [];
+    aggregates.forEach((aggregate) => {
+      count = count + (aggregate.count || 0);
+      count;
+    });
+    $[0] = item?.aggregates;
+    $[1] = count;
+  } else {
+    count = $[1];
+  }
+  let t0;
+  if ($[2] !== count) {
+    t0 = <Text>{count}</Text>;
+    $[2] = count;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.js
new file mode 100644
index 00000000000..3708b96783a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.js
@@ -0,0 +1,10 @@
+function HomeDiscoStoreItemTileRating(props) {
+  const item = useFragment();
+  let count = 0;
+  const aggregates = item?.aggregates || [];
+  aggregates.forEach(aggregate => {
+    count += aggregate.count || 0;
+  });
+
+  return <Text>{count}</Text>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-memoization-due-to-callback-capturing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-memoization-due-to-callback-capturing.expect.md
new file mode 100644
index 00000000000..434cbaa908d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-memoization-due-to-callback-capturing.expect.md
@@ -0,0 +1,149 @@
+
+## Input
+
+```javascript
+// @enableNewMutationAliasingModel
+import {ValidateMemoization} from 'shared-runtime';
+
+const Codes = {
+  en: {name: 'English'},
+  ja: {name: 'Japanese'},
+  ko: {name: 'Korean'},
+  zh: {name: 'Chinese'},
+};
+
+function Component(a) {
+  let keys;
+  if (a) {
+    keys = Object.keys(Codes);
+  } else {
+    return null;
+  }
+  const options = keys.map(code => {
+    // In the old inference model, `keys` was assumed to be mutated bc
+    // this callback captures its input into its output, and the return
+    // is treated as a mutation since it's a function expression. The new
+    // model understands that `code` is captured but not mutated.
+    const country = Codes[code];
+    return {
+      name: country.name,
+      code,
+    };
+  });
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={keys} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[]}
+        output={options}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: false}],
+  sequentialRenders: [
+    {a: false},
+    {a: true},
+    {a: true},
+    {a: false},
+    {a: true},
+    {a: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
+import { ValidateMemoization } from "shared-runtime";
+
+const Codes = {
+  en: { name: "English" },
+  ja: { name: "Japanese" },
+  ko: { name: "Korean" },
+  zh: { name: "Chinese" },
+};
+
+function Component(a) {
+  const $ = _c(4);
+  let keys;
+  if (a) {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = Object.keys(Codes);
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    keys = t0;
+  } else {
+    return null;
+  }
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = keys.map(_temp);
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const options = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <ValidateMemoization inputs={[]} output={keys} onlyCheckCompiled={true} />
+    );
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (
+      <>
+        {t1}
+        <ValidateMemoization
+          inputs={[]}
+          output={options}
+          onlyCheckCompiled={true}
+        />
+      </>
+    );
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(code) {
+  const country = Codes[code];
+  return { name: country.name, code };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: false }],
+  sequentialRenders: [
+    { a: false },
+    { a: true },
+    { a: true },
+    { a: false },
+    { a: true },
+    { a: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[],"output":["en","ja","ko","zh"]}</div><div>{"inputs":[],"output":[{"name":"English","code":"en"},{"name":"Japanese","code":"ja"},{"name":"Korean","code":"ko"},{"name":"Chinese","code":"zh"}]}</div>
+<div>{"inputs":[],"output":["en","ja","ko","zh"]}</div><div>{"inputs":[],"output":[{"name":"English","code":"en"},{"name":"Japanese","code":"ja"},{"name":"Korean","code":"ko"},{"name":"Chinese","code":"zh"}]}</div>
+<div>{"inputs":[],"output":["en","ja","ko","zh"]}</div><div>{"inputs":[],"output":[{"name":"English","code":"en"},{"name":"Japanese","code":"ja"},{"name":"Korean","code":"ko"},{"name":"Chinese","code":"zh"}]}</div>
+<div>{"inputs":[],"output":["en","ja","ko","zh"]}</div><div>{"inputs":[],"output":[{"name":"English","code":"en"},{"name":"Japanese","code":"ja"},{"name":"Korean","code":"ko"},{"name":"Chinese","code":"zh"}]}</div>
+<div>{"inputs":[],"output":["en","ja","ko","zh"]}</div><div>{"inputs":[],"output":[{"name":"English","code":"en"},{"name":"Japanese","code":"ja"},{"name":"Korean","code":"ko"},{"name":"Chinese","code":"zh"}]}</div>
+<div>{"inputs":[],"output":["en","ja","ko","zh"]}</div><div>{"inputs":[],"output":[{"name":"English","code":"en"},{"name":"Japanese","code":"ja"},{"name":"Korean","code":"ko"},{"name":"Chinese","code":"zh"}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-memoization-due-to-callback-capturing.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-memoization-due-to-callback-capturing.js
new file mode 100644
index 00000000000..11aaeb94508
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-memoization-due-to-callback-capturing.js
@@ -0,0 +1,52 @@
+// @enableNewMutationAliasingModel
+import {ValidateMemoization} from 'shared-runtime';
+
+const Codes = {
+  en: {name: 'English'},
+  ja: {name: 'Japanese'},
+  ko: {name: 'Korean'},
+  zh: {name: 'Chinese'},
+};
+
+function Component(a) {
+  let keys;
+  if (a) {
+    keys = Object.keys(Codes);
+  } else {
+    return null;
+  }
+  const options = keys.map(code => {
+    // In the old inference model, `keys` was assumed to be mutated bc
+    // this callback captures its input into its output, and the return
+    // is treated as a mutation since it's a function expression. The new
+    // model understands that `code` is captured but not mutated.
+    const country = Codes[code];
+    return {
+      name: country.name,
+      code,
+    };
+  });
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={keys} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[]}
+        output={options}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: false}],
+  sequentialRenders: [
+    {a: false},
+    {a: true},
+    {a: true},
+    {a: false},
+    {a: true},
+    {a: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md
new file mode 100644
index 00000000000..3dac481e08d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md
@@ -0,0 +1,115 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+const DISPLAY = true;
+function Component({cond = false, id}) {
+  return (
+    <>
+      <div className={identity(styles.a, id !== null ? styles.b : {})}></div>
+
+      {cond === false && (
+        <div className={identity(styles.c, DISPLAY ? styles.d : {})} />
+      )}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, id: 42}],
+  sequentialRenders: [
+    {cond: false, id: 4},
+    {cond: true, id: 4},
+    {cond: true, id: 42},
+  ],
+};
+
+const styles = {
+  a: 'a',
+  b: 'b',
+  c: 'c',
+  d: 'd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+const DISPLAY = true;
+function Component(t0) {
+  const $ = _c(9);
+  const { cond: t1, id } = t0;
+  const cond = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== id) {
+    t2 = identity(styles.a, id !== null ? styles.b : {});
+    $[0] = id;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t2) {
+    t3 = <div className={t2} />;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== cond) {
+    t4 = cond === false && (
+      <div className={identity(styles.c, DISPLAY ? styles.d : {})} />
+    );
+    $[4] = cond;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== t3 || $[7] !== t4) {
+    t5 = (
+      <>
+        {t3}
+        {t4}
+      </>
+    );
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false, id: 42 }],
+  sequentialRenders: [
+    { cond: false, id: 4 },
+    { cond: true, id: 4 },
+    { cond: true, id: 42 },
+  ],
+};
+
+const styles = {
+  a: "a",
+  b: "b",
+  c: "c",
+  d: "d",
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="a"></div><div class="c"></div>
+<div class="a"></div>
+<div class="a"></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.js
new file mode 100644
index 00000000000..28e541bfd9a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.js
@@ -0,0 +1,31 @@
+import {identity} from 'shared-runtime';
+
+const DISPLAY = true;
+function Component({cond = false, id}) {
+  return (
+    <>
+      <div className={identity(styles.a, id !== null ? styles.b : {})}></div>
+
+      {cond === false && (
+        <div className={identity(styles.c, DISPLAY ? styles.d : {})} />
+      )}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false, id: 42}],
+  sequentialRenders: [
+    {cond: false, id: 4},
+    {cond: true, id: 4},
+    {cond: true, id: 42},
+  ],
+};
+
+const styles = {
+  a: 'a',
+  b: 'b',
+  c: 'c',
+  d: 'd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-slow-validate-preserve-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-slow-validate-preserve-memo.expect.md
new file mode 100644
index 00000000000..3238f43c073
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-slow-validate-preserve-memo.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+
+import {Builder} from 'shared-runtime';
+function useTest({isNull, data}: {isNull: boolean; data: string}) {
+  const result = Builder.makeBuilder(isNull, 'hello world')
+    ?.push('1', 2)
+    ?.push(3, {
+      a: 4,
+      b: 5,
+      c: data,
+    })
+    ?.push(6, data)
+    ?.push(7, '8')
+    ?.push('8', Builder.makeBuilder(!isNull)?.push(9).vals)?.vals;
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [{isNull: false, data: 'param'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+
+import { Builder } from "shared-runtime";
+function useTest(t0) {
+  const $ = _c(3);
+  const { isNull, data } = t0;
+  let t1;
+  if ($[0] !== data || $[1] !== isNull) {
+    t1 = Builder.makeBuilder(isNull, "hello world")
+      ?.push("1", 2)
+      ?.push(3, { a: 4, b: 5, c: data })
+      ?.push(6, data)
+      ?.push(7, "8")
+      ?.push("8", Builder.makeBuilder(!isNull)?.push(9).vals)?.vals;
+    $[0] = data;
+    $[1] = isNull;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const result = t1;
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [{ isNull: false, data: "param" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["hello world","1",2,3,{"a":4,"b":5,"c":"param"},6,"param",7,"8","8",null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-slow-validate-preserve-memo.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-slow-validate-preserve-memo.ts
new file mode 100644
index 00000000000..311a7d7c70a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-slow-validate-preserve-memo.ts
@@ -0,0 +1,21 @@
+// @validatePreserveExistingMemoizationGuarantees
+
+import {Builder} from 'shared-runtime';
+function useTest({isNull, data}: {isNull: boolean; data: string}) {
+  const result = Builder.makeBuilder(isNull, 'hello world')
+    ?.push('1', 2)
+    ?.push(3, {
+      a: 4,
+      b: 5,
+      c: data,
+    })
+    ?.push(6, data)
+    ?.push(7, '8')
+    ?.push('8', Builder.makeBuilder(!isNull)?.push(9).vals)?.vals;
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useTest,
+  params: [{isNull: false, data: 'param'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.expect.md
new file mode 100644
index 00000000000..01d1fe688ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+import {useState} from 'react';
+
+/**
+ * Repro for https://github.com/facebook/react/issues/35122
+ *
+ * InferReactiveScopeVariables was excluding primitive operands
+ * when considering operands for merging. We previously did not
+ * infer types for context variables (StoreContext etc), but later
+ * started inferring types in cases of `const` context variables,
+ * since the type cannot change.
+ *
+ * In this example, this meant that we skipped the `isExpired`
+ * operand of the onClick function expression when considering
+ * scopes to merge.
+ */
+function Test1() {
+  const [expire, setExpire] = useState(5);
+
+  const onClick = () => {
+    // Reference to isExpired prior to declaration
+    console.log('isExpired', isExpired);
+  };
+
+  const isExpired = expire === 0;
+
+  return <div onClick={onClick}>{expire}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test1,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+
+/**
+ * Repro for https://github.com/facebook/react/issues/35122
+ *
+ * InferReactiveScopeVariables was excluding primitive operands
+ * when considering operands for merging. We previously did not
+ * infer types for context variables (StoreContext etc), but later
+ * started inferring types in cases of `const` context variables,
+ * since the type cannot change.
+ *
+ * In this example, this meant that we skipped the `isExpired`
+ * operand of the onClick function expression when considering
+ * scopes to merge.
+ */
+function Test1() {
+  const $ = _c(5);
+  const [expire] = useState(5);
+  let onClick;
+  if ($[0] !== expire) {
+    onClick = () => {
+      console.log("isExpired", isExpired);
+    };
+
+    const isExpired = expire === 0;
+    $[0] = expire;
+    $[1] = onClick;
+  } else {
+    onClick = $[1];
+  }
+  let t0;
+  if ($[2] !== expire || $[3] !== onClick) {
+    t0 = <div onClick={onClick}>{expire}</div>;
+    $[2] = expire;
+    $[3] = onClick;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test1,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>5</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.js
new file mode 100644
index 00000000000..035640fb6ba
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-stale-closure-forward-reference.js
@@ -0,0 +1,32 @@
+import {useState} from 'react';
+
+/**
+ * Repro for https://github.com/facebook/react/issues/35122
+ *
+ * InferReactiveScopeVariables was excluding primitive operands
+ * when considering operands for merging. We previously did not
+ * infer types for context variables (StoreContext etc), but later
+ * started inferring types in cases of `const` context variables,
+ * since the type cannot change.
+ *
+ * In this example, this meant that we skipped the `isExpired`
+ * operand of the onClick function expression when considering
+ * scopes to merge.
+ */
+function Test1() {
+  const [expire, setExpire] = useState(5);
+
+  const onClick = () => {
+    // Reference to isExpired prior to declaration
+    console.log('isExpired', isExpired);
+  };
+
+  const isExpired = expire === 0;
+
+  return <div onClick={onClick}>{expire}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test1,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.expect.md
new file mode 100644
index 00000000000..5a67449fff4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+import {StaticText1, Stringify, Text} from 'shared-runtime';
+
+function Component(props) {
+  const {buttons} = props;
+  const [primaryButton, ...nonPrimaryButtons] = buttons;
+
+  const renderedNonPrimaryButtons = nonPrimaryButtons.map((buttonProps, i) => (
+    <Stringify
+      {...buttonProps}
+      key={`button-${i}`}
+      style={
+        i % 2 === 0 ? styles.leftSecondaryButton : styles.rightSecondaryButton
+      }
+    />
+  ));
+
+  return <StaticText1>{renderedNonPrimaryButtons}</StaticText1>;
+}
+
+const styles = {
+  leftSecondaryButton: {left: true},
+  rightSecondaryButton: {right: true},
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      buttons: [
+        {},
+        {type: 'submit', children: ['Submit!']},
+        {type: 'button', children: ['Reset']},
+      ],
+    },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { StaticText1, Stringify, Text } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  const { buttons } = props;
+  let t0;
+  if ($[0] !== buttons) {
+    const [, ...nonPrimaryButtons] = buttons;
+    const renderedNonPrimaryButtons = nonPrimaryButtons.map(_temp);
+    t0 = <StaticText1>{renderedNonPrimaryButtons}</StaticText1>;
+    $[0] = buttons;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(buttonProps, i) {
+  return (
+    <Stringify
+      {...buttonProps}
+      key={`button-${i}`}
+      style={
+        i % 2 === 0 ? styles.leftSecondaryButton : styles.rightSecondaryButton
+      }
+    />
+  );
+}
+
+const styles = {
+  leftSecondaryButton: { left: true },
+  rightSecondaryButton: { right: true },
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      buttons: [
+        {},
+        { type: "submit", children: ["Submit!"] },
+        { type: "button", children: ["Reset"] },
+      ],
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>StaticText1<div>{"type":"submit","children":["Submit!"],"style":{"left":true}}</div><div>{"type":"button","children":["Reset"],"style":{"right":true}}</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.js
new file mode 100644
index 00000000000..44f438c7348
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.js
@@ -0,0 +1,36 @@
+import {StaticText1, Stringify, Text} from 'shared-runtime';
+
+function Component(props) {
+  const {buttons} = props;
+  const [primaryButton, ...nonPrimaryButtons] = buttons;
+
+  const renderedNonPrimaryButtons = nonPrimaryButtons.map((buttonProps, i) => (
+    <Stringify
+      {...buttonProps}
+      key={`button-${i}`}
+      style={
+        i % 2 === 0 ? styles.leftSecondaryButton : styles.rightSecondaryButton
+      }
+    />
+  ));
+
+  return <StaticText1>{renderedNonPrimaryButtons}</StaticText1>;
+}
+
+const styles = {
+  leftSecondaryButton: {left: true},
+  rightSecondaryButton: {right: true},
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      buttons: [
+        {},
+        {type: 'submit', children: ['Submit!']},
+        {type: 'button', children: ['Reset']},
+      ],
+    },
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unmerged-fbt-call-merge-overlapping-reactive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unmerged-fbt-call-merge-overlapping-reactive-scopes.expect.md
new file mode 100644
index 00000000000..ee2c82048a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unmerged-fbt-call-merge-overlapping-reactive-scopes.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const label = fbt(
+    fbt.plural('bar', props.value.length, {
+      many: 'bars',
+      showCount: 'yes',
+    }),
+    'The label text'
+  );
+  return props.cond ? (
+    <Stringify
+      description={<fbt desc="Some text">Text here</fbt>}
+      label={label.toString()}
+    />
+  ) : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: [0, 1, 2]}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import fbt from "fbt";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.cond || $[1] !== props.value.length) {
+    const label = fbt._(
+      { "*": "{number} bars", _1: "1 bar" },
+      [fbt._plural(props.value.length, "number")],
+      { hk: "4mUen7" },
+    );
+    t0 = props.cond ? (
+      <Stringify
+        description={fbt._("Text here", null, { hk: "21YpZs" })}
+        label={label.toString()}
+      />
+    ) : null;
+    $[0] = props.cond;
+    $[1] = props.value.length;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, value: [0, 1, 2] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"description":"Text here","label":"3 bars"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unmerged-fbt-call-merge-overlapping-reactive-scopes.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unmerged-fbt-call-merge-overlapping-reactive-scopes.js
new file mode 100644
index 00000000000..03d84f40561
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unmerged-fbt-call-merge-overlapping-reactive-scopes.js
@@ -0,0 +1,23 @@
+import fbt from 'fbt';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const label = fbt(
+    fbt.plural('bar', props.value.length, {
+      many: 'bars',
+      showCount: 'yes',
+    }),
+    'The label text'
+  );
+  return props.cond ? (
+    <Stringify
+      description={<fbt desc="Some text">Text here</fbt>}
+      label={label.toString()}
+    />
+  ) : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: [0, 1, 2]}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md
new file mode 100644
index 00000000000..a1af1285ec8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md
@@ -0,0 +1,117 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import {useMemo, useState} from 'react';
+import {ValidateMemoization, identity} from 'shared-runtime';
+
+function Component({value}) {
+  const result = useMemo(() => {
+    if (value == null) {
+      return null;
+    }
+    try {
+      return {value};
+    } catch (e) {
+      return null;
+    }
+  }, [value]);
+  return <ValidateMemoization inputs={[value]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: null}],
+  sequentialRenders: [
+    {value: null},
+    {value: null},
+    {value: 42},
+    {value: 42},
+    {value: null},
+    {value: 42},
+    {value: null},
+    {value: 42},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import { useMemo, useState } from "react";
+import { ValidateMemoization, identity } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { value } = t0;
+  let t1;
+  bb0: {
+    if (value == null) {
+      t1 = null;
+      break bb0;
+    }
+
+    try {
+      let t3;
+      if ($[0] !== value) {
+        t3 = { value };
+        $[0] = value;
+        $[1] = t3;
+      } else {
+        t3 = $[1];
+      }
+      t1 = t3;
+    } catch (t2) {
+      t1 = null;
+    }
+  }
+  const result = t1;
+  let t2;
+  if ($[2] !== value) {
+    t2 = [value];
+    $[2] = value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== result || $[5] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={result} />;
+    $[4] = result;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: null }],
+  sequentialRenders: [
+    { value: null },
+    { value: null },
+    { value: 42 },
+    { value: 42 },
+    { value: null },
+    { value: 42 },
+    { value: null },
+    { value: 42 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[null],"output":"[[ cyclic ref *2 ]]"}</div>
+<div>{"inputs":[null],"output":"[[ cyclic ref *2 ]]"}</div>
+<div>{"inputs":[42],"output":{"value":42}}</div>
+<div>{"inputs":[42],"output":{"value":42}}</div>
+<div>{"inputs":[null],"output":"[[ cyclic ref *2 ]]"}</div>
+<div>{"inputs":[42],"output":{"value":42}}</div>
+<div>{"inputs":[null],"output":"[[ cyclic ref *2 ]]"}</div>
+<div>{"inputs":[42],"output":{"value":42}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.js
new file mode 100644
index 00000000000..412e6edd6d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.js
@@ -0,0 +1,32 @@
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+import {useMemo, useState} from 'react';
+import {ValidateMemoization, identity} from 'shared-runtime';
+
+function Component({value}) {
+  const result = useMemo(() => {
+    if (value == null) {
+      return null;
+    }
+    try {
+      return {value};
+    } catch (e) {
+      return null;
+    }
+  }, [value]);
+  return <ValidateMemoization inputs={[value]} output={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: null}],
+  sequentialRenders: [
+    {value: null},
+    {value: null},
+    {value: 42},
+    {value: 42},
+    {value: null},
+    {value: 42},
+    {value: null},
+    {value: 42},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.expect.md
new file mode 100644
index 00000000000..acb3b72e3a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.expect.md
@@ -0,0 +1,118 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {
+  makeObject_Primitives,
+  mutate,
+  Stringify,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({cond}) {
+  const memoized = useMemo(() => {
+    const value = makeObject_Primitives();
+    if (cond) {
+      return value;
+    } else {
+      mutate(value);
+      return value;
+    }
+  }, [cond]);
+  return <ValidateMemoization inputs={[cond]} output={memoized} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+  sequentialRenders: [
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import {
+  makeObject_Primitives,
+  mutate,
+  Stringify,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { cond } = t0;
+  let t1;
+  if ($[0] !== cond) {
+    const value = makeObject_Primitives();
+    if (cond) {
+      t1 = value;
+    } else {
+      mutate(value);
+      t1 = value;
+    }
+    $[0] = cond;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const memoized = t1;
+  let t2;
+  if ($[2] !== cond) {
+    t2 = [cond];
+    $[2] = cond;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== memoized || $[5] !== t2) {
+    t3 = <ValidateMemoization inputs={t2} output={memoized} />;
+    $[4] = memoized;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false }],
+  sequentialRenders: [
+    { cond: false },
+    { cond: false },
+    { cond: true },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+    { cond: false },
+    { cond: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
+<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
+<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.js
new file mode 100644
index 00000000000..d3816610771
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.js
@@ -0,0 +1,35 @@
+import {useMemo} from 'react';
+import {
+  makeObject_Primitives,
+  mutate,
+  Stringify,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({cond}) {
+  const memoized = useMemo(() => {
+    const value = makeObject_Primitives();
+    if (cond) {
+      return value;
+    } else {
+      mutate(value);
+      return value;
+    }
+  }, [cond]);
+  return <ValidateMemoization inputs={[cond]} output={memoized} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+  sequentialRenders: [
+    {cond: false},
+    {cond: false},
+    {cond: true},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+    {cond: false},
+    {cond: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md
new file mode 100644
index 00000000000..19102267cc1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo:false @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const item = props.item;
+  const thumbnails = [];
+  const baseVideos = getBaseVideos(item);
+  useMemo(() => {
+    baseVideos.forEach(video => {
+      const baseVideo = video.hasBaseVideo;
+      if (Boolean(baseVideo)) {
+        thumbnails.push({extraVideo: true});
+      }
+    });
+  });
+  return <FlatList baseVideos={baseVideos} items={thumbnails} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo:false @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const $ = _c(6);
+  const item = props.item;
+  let baseVideos;
+  let thumbnails;
+  if ($[0] !== item) {
+    thumbnails = [];
+    baseVideos = getBaseVideos(item);
+
+    baseVideos.forEach((video) => {
+      const baseVideo = video.hasBaseVideo;
+      if (Boolean(baseVideo)) {
+        thumbnails.push({ extraVideo: true });
+      }
+    });
+    $[0] = item;
+    $[1] = baseVideos;
+    $[2] = thumbnails;
+  } else {
+    baseVideos = $[1];
+    thumbnails = $[2];
+  }
+  let t0;
+  if ($[3] !== baseVideos || $[4] !== thumbnails) {
+    t0 = <FlatList baseVideos={baseVideos} items={thumbnails} />;
+    $[3] = baseVideos;
+    $[4] = thumbnails;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js
new file mode 100644
index 00000000000..0a4bbac2e08
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js
@@ -0,0 +1,15 @@
+// @validateNoVoidUseMemo:false @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const item = props.item;
+  const thumbnails = [];
+  const baseVideos = getBaseVideos(item);
+  useMemo(() => {
+    baseVideos.forEach(video => {
+      const baseVideo = video.hasBaseVideo;
+      if (Boolean(baseVideo)) {
+        thumbnails.push({extraVideo: true});
+      }
+    });
+  });
+  return <FlatList baseVideos={baseVideos} items={thumbnails} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.expect.md
new file mode 100644
index 00000000000..496d61df9d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.expect.md
@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+import {useState as useReactState} from 'react';
+
+function Component() {
+  const [state, setState] = useReactState(0);
+
+  const onClick = () => {
+    setState(s => s + 1);
+  };
+
+  return (
+    <>
+      Count {state}
+      <button onClick={onClick}>Increment</button>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useState as useReactState } from "react";
+
+function Component() {
+  const $ = _c(4);
+  const [state, setState] = useReactState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(_temp);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <button onClick={onClick}>Increment</button>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== state) {
+    t2 = (
+      <>
+        Count {state}
+        {t1}
+      </>
+    );
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(s) {
+  return s + 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) Count 0<button>Increment</button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.js
new file mode 100644
index 00000000000..66480af4a06
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/resolve-react-hooks-based-on-import-name.js
@@ -0,0 +1,21 @@
+import {useState as useReactState} from 'react';
+
+function Component() {
+  const [state, setState] = useReactState(0);
+
+  const onClick = () => {
+    setState(s => s + 1);
+  };
+
+  return (
+    <>
+      Count {state}
+      <button onClick={onClick}>Increment</button>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-array-pattern.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-array-pattern.expect.md
new file mode 100644
index 00000000000..aece9665c92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-array-pattern.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(foo, ...[bar]) {
+  return [foo, bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['foo', ['bar', 'baz']],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(foo, ...t0) {
+  const $ = _c(3);
+  const [bar] = t0;
+  let t1;
+  if ($[0] !== bar || $[1] !== foo) {
+    t1 = [foo, bar];
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["foo", ["bar", "baz"]],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo",["bar","baz"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-array-pattern.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-array-pattern.js
new file mode 100644
index 00000000000..50fb6fdf4c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-array-pattern.js
@@ -0,0 +1,8 @@
+function Component(foo, ...[bar]) {
+  return [foo, bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['foo', ['bar', 'baz']],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-identifier.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-identifier.expect.md
new file mode 100644
index 00000000000..3681e9c4699
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-identifier.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(foo, ...bar) {
+  return [foo, bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['foo', 'bar', 'baz'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(foo, ...t0) {
+  const $ = _c(3);
+  const bar = t0;
+  let t1;
+  if ($[0] !== bar || $[1] !== foo) {
+    t1 = [foo, bar];
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["foo", "bar", "baz"],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo",["bar","baz"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-identifier.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-identifier.js
new file mode 100644
index 00000000000..2d639b7458f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-identifier.js
@@ -0,0 +1,8 @@
+function Component(foo, ...bar) {
+  return [foo, bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['foo', 'bar', 'baz'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-object-spread-pattern.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-object-spread-pattern.expect.md
new file mode 100644
index 00000000000..3e66b200411
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-object-spread-pattern.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function Component(foo, ...{bar}) {
+  return [foo, bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['foo', {bar: 'bar'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(foo, ...t0) {
+  const $ = _c(3);
+  const { bar } = t0;
+  let t1;
+  if ($[0] !== bar || $[1] !== foo) {
+    t1 = [foo, bar];
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["foo", { bar: "bar" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo",null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-object-spread-pattern.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-object-spread-pattern.js
new file mode 100644
index 00000000000..8aedd82550b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rest-param-with-object-spread-pattern.js
@@ -0,0 +1,8 @@
+function Component(foo, ...{bar}) {
+  return [foo, bar];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['foo', {bar: 'bar'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-conditional.expect.md
new file mode 100644
index 00000000000..4749ee84e40
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-conditional.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  if (a == null) {
+    return null;
+  } else {
+    return b;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b) {
+  if (a == null) {
+    return null;
+  } else {
+    return b;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-conditional.js
new file mode 100644
index 00000000000..424319b0656
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-conditional.js
@@ -0,0 +1,13 @@
+function foo(a, b) {
+  if (a == null) {
+    return null;
+  } else {
+    return b;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback-structure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback-structure.expect.md
new file mode 100644
index 00000000000..56dffd3c8d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback-structure.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+import {useRef} from 'react';
+
+component Foo(cond: boolean, cond2: boolean) {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  if (cond) return [s];
+  else if (cond2) return {s};
+  else return {s: [s]};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: false, cond2: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+
+import { useRef } from "react";
+
+function Foo(t0) {
+  const $ = _c(4);
+  const { cond, cond2 } = t0;
+  const ref = useRef();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => ref.current;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const s = t1;
+
+  if (cond) {
+    let t2;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = [s];
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    return t2;
+  } else {
+    if (cond2) {
+      let t2;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = { s };
+        $[2] = t2;
+      } else {
+        t2 = $[2];
+      }
+      return t2;
+    } else {
+      let t2;
+      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = { s: [s] };
+        $[3] = t2;
+      } else {
+        t2 = $[3];
+      }
+      return t2;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ cond: false, cond2: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"s":["[[ function params=0 ]]"]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback-structure.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback-structure.js
new file mode 100644
index 00000000000..e37acbde348
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback-structure.js
@@ -0,0 +1,20 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+import {useRef} from 'react';
+
+component Foo(cond: boolean, cond2: boolean) {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  if (cond) return [s];
+  else if (cond2) return {s};
+  else return {s: [s]};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{cond: false, cond2: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
new file mode 100644
index 00000000000..ed1dfa39ea5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+import {useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+
+import { useRef } from "react";
+
+function Foo() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => ref.current;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const s = t0;
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
new file mode 100644
index 00000000000..f1a45ebc4ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
@@ -0,0 +1,18 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+import {useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-undefined.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-undefined.expect.md
new file mode 100644
index 00000000000..1a2e5f37e8c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-undefined.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  if (props.cond) {
+    return undefined;
+  }
+  return props.value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  if (props.cond) {
+    return;
+  }
+  return props.value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-undefined.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-undefined.js
new file mode 100644
index 00000000000..7192e889431
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-undefined.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  if (props.cond) {
+    return undefined;
+  }
+  return props.value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reverse-postorder.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reverse-postorder.expect.md
new file mode 100644
index 00000000000..98f2cd2190c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reverse-postorder.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x;
+  if (props.cond) {
+    switch (props.test) {
+      case 0: {
+        x = props.v0;
+        break;
+      }
+      case 1: {
+        x = props.v1;
+        break;
+      }
+      case 2: {
+      }
+      default: {
+        x = props.v2;
+      }
+    }
+  } else {
+    if (props.cond2) {
+      x = props.b;
+    } else {
+      x = props.c;
+    }
+  }
+  x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  if (props.cond) {
+    bb0: switch (props.test) {
+      case 0: {
+        break bb0;
+      }
+      case 1: {
+        break bb0;
+      }
+      case 2:
+      default:
+    }
+  } else {
+    if (props.cond2) {
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reverse-postorder.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reverse-postorder.js
new file mode 100644
index 00000000000..32b64e73197
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reverse-postorder.js
@@ -0,0 +1,33 @@
+function Component(props) {
+  let x;
+  if (props.cond) {
+    switch (props.test) {
+      case 0: {
+        x = props.v0;
+        break;
+      }
+      case 1: {
+        x = props.v1;
+        break;
+      }
+      case 2: {
+      }
+      default: {
+        x = props.v2;
+      }
+    }
+  } else {
+    if (props.cond2) {
+      x = props.b;
+    } else {
+      x = props.c;
+    }
+  }
+  x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rewrite-phis-in-lambda-capture-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rewrite-phis-in-lambda-capture-context.expect.md
new file mode 100644
index 00000000000..0c66dee6a85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rewrite-phis-in-lambda-capture-context.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function Component() {
+  const x = 4;
+
+  const get4 = () => {
+    while (bar()) {
+      if (baz) {
+        bar();
+      }
+    }
+    return () => x;
+  };
+
+  return get4;
+}
+
+```
+
+## Code
+
+```javascript
+function Component() {
+  const get4 = _temp2;
+  return get4;
+}
+function _temp2() {
+  while (bar()) {
+    if (baz) {
+      bar();
+    }
+  }
+  return _temp;
+}
+function _temp() {
+  return 4;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rewrite-phis-in-lambda-capture-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rewrite-phis-in-lambda-capture-context.js
new file mode 100644
index 00000000000..9d6fec2f61e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rewrite-phis-in-lambda-capture-context.js
@@ -0,0 +1,14 @@
+function Component() {
+  const x = 4;
+
+  const get4 = () => {
+    while (bar()) {
+      if (baz) {
+        bar();
+      }
+    }
+    return () => x;
+  };
+
+  return get4;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-locals-named-like-hooks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-locals-named-like-hooks.expect.md
new file mode 100644
index 00000000000..002bc6ee89b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-locals-named-like-hooks.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let useFeature = makeObject_Primitives();
+  let x;
+  if (useFeature) {
+    x = [useFeature + useFeature].push(-useFeature);
+  }
+  let y = useFeature;
+  let z = useFeature.useProperty;
+  return (
+    <Stringify val={useFeature}>
+      {x}
+      {y}
+      {z}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  const useFeature = makeObject_Primitives();
+  let x;
+  if (useFeature) {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = [useFeature + useFeature].push(-useFeature);
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    x = t0;
+  }
+
+  const y = useFeature;
+  const z = useFeature.useProperty;
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <Stringify val={useFeature}>
+        {x}
+        {y}
+        {z}
+      </Stringify>
+    );
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"val":{"a":0,"b":"value1","c":true},"children":[2,"[[ cyclic ref *1 ]]",null]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-locals-named-like-hooks.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-locals-named-like-hooks.js
new file mode 100644
index 00000000000..8715db07ece
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-locals-named-like-hooks.js
@@ -0,0 +1,23 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let useFeature = makeObject_Primitives();
+  let x;
+  if (useFeature) {
+    x = [useFeature + useFeature].push(-useFeature);
+  }
+  let y = useFeature;
+  let z = useFeature.useProperty;
+  return (
+    <Stringify val={useFeature}>
+      {x}
+      {y}
+      {z}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-props-named-like-hooks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-props-named-like-hooks.expect.md
new file mode 100644
index 00000000000..746e048b432
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-props-named-like-hooks.expect.md
@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component({useFeature}) {
+  let x;
+  if (useFeature) {
+    x = [useFeature + useFeature].push(-useFeature);
+  }
+  let y = useFeature;
+  let z = useFeature.useProperty;
+  return (
+    <Stringify val={useFeature}>
+      {x}
+      {y}
+      {z}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{useFeature: {useProperty: true}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(8);
+  const { useFeature } = t0;
+  let x;
+  if (useFeature) {
+    const t1 = useFeature + useFeature;
+    let t2;
+    if ($[0] !== t1 || $[1] !== useFeature) {
+      t2 = [t1].push(-useFeature);
+      $[0] = t1;
+      $[1] = useFeature;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    x = t2;
+  }
+
+  const y = useFeature;
+  const z = useFeature.useProperty;
+  let t1;
+  if ($[3] !== useFeature || $[4] !== x || $[5] !== y || $[6] !== z) {
+    t1 = (
+      <Stringify val={useFeature}>
+        {x}
+        {y}
+        {z}
+      </Stringify>
+    );
+    $[3] = useFeature;
+    $[4] = x;
+    $[5] = y;
+    $[6] = z;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ useFeature: { useProperty: true } }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"val":{"useProperty":true},"children":[2,"[[ cyclic ref *1 ]]",true]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-props-named-like-hooks.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-props-named-like-hooks.js
new file mode 100644
index 00000000000..2499de46ed3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/allow-props-named-like-hooks.js
@@ -0,0 +1,22 @@
+import {Stringify} from 'shared-runtime';
+
+function Component({useFeature}) {
+  let x;
+  if (useFeature) {
+    x = [useFeature + useFeature].push(-useFeature);
+  }
+  let y = useFeature;
+  let z = useFeature.useProperty;
+  return (
+    <Stringify val={useFeature}>
+      {x}
+      {y}
+      {z}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{useFeature: {useProperty: true}}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.expect.md
new file mode 100644
index 00000000000..7371cda580f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// 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} />;
+});
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.bail.rules-of-hooks-3d692676194b.ts:8:4
+   6 | const ComponentWithHookInsideCallback = React.forwardRef((props, ref) => {
+   7 |   useEffect(() => {
+>  8 |     useHookInsideCallback();
+     |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   });
+  10 |   return <button {...props} ref={ref} />;
+  11 | });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.js
new file mode 100644
index 00000000000..4dfe7030955
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.js
@@ -0,0 +1,11 @@
+// @skip
+// Unsupported input
+
+// 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} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.expect.md
new file mode 100644
index 00000000000..e4f2c1e7a2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// 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} />;
+});
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.bail.rules-of-hooks-8503ca76d6f8.ts:8:4
+   6 | const ComponentWithHookInsideCallback = React.memo(props => {
+   7 |   useEffect(() => {
+>  8 |     useHookInsideCallback();
+     |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   });
+  10 |   return <button {...props} />;
+  11 | });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.js
new file mode 100644
index 00000000000..810aa776731
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.js
@@ -0,0 +1,11 @@
+// @skip
+// Unsupported input
+
+// 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} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.expect.md
new file mode 100644
index 00000000000..e53fc3c866c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // This is a violation of using a hook as a normal value rule:
+  const getUser = props.cond ? useGetUser : emptyFunction;
+
+  // Ideally we would report a "conditional hook call" error here.
+  // It's an unconditional call, but the value may or may not be a hook.
+  // TODO: report a conditional hook call error here
+  return getUser();
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-call-phi-possibly-hook.ts:3:31
+  1 | function Component(props) {
+  2 |   // This is a violation of using a hook as a normal value rule:
+> 3 |   const getUser = props.cond ? useGetUser : emptyFunction;
+    |                                ^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  4 |
+  5 |   // Ideally we would report a "conditional hook call" error here.
+  6 |   // It's an unconditional call, but the value may or may not be a hook.
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-call-phi-possibly-hook.ts:3:18
+  1 | function Component(props) {
+  2 |   // This is a violation of using a hook as a normal value rule:
+> 3 |   const getUser = props.cond ? useGetUser : emptyFunction;
+    |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  4 |
+  5 |   // Ideally we would report a "conditional hook call" error here.
+  6 |   // It's an unconditional call, but the value may or may not be a hook.
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-call-phi-possibly-hook.ts:8:9
+   6 |   // It's an unconditional call, but the value may or may not be a hook.
+   7 |   // TODO: report a conditional hook call error here
+>  8 |   return getUser();
+     |          ^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.js
new file mode 100644
index 00000000000..94f98d661ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.js
@@ -0,0 +1,9 @@
+function Component(props) {
+  // This is a violation of using a hook as a normal value rule:
+  const getUser = props.cond ? useGetUser : emptyFunction;
+
+  // Ideally we would report a "conditional hook call" error here.
+  // It's an unconditional call, but the value may or may not be a hook.
+  // TODO: report a conditional hook call error here
+  return getUser();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.expect.md
new file mode 100644
index 00000000000..2282fd64469
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const useFoo = makeObject_Primitives();
+  if (props.cond) {
+    useFoo();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-conditionally-call-local-named-like-hook.ts:6:4
+  4 |   const useFoo = makeObject_Primitives();
+  5 |   if (props.cond) {
+> 6 |     useFoo();
+    |     ^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   }
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.js
new file mode 100644
index 00000000000..baa34decbd4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.js
@@ -0,0 +1,8 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const useFoo = makeObject_Primitives();
+  if (props.cond) {
+    useFoo();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.expect.md
new file mode 100644
index 00000000000..1c547061d6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component({cond, useFoo}) {
+  if (cond) {
+    useFoo();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-conditionally-call-prop-named-like-hook.ts:3:4
+  1 | function Component({cond, useFoo}) {
+  2 |   if (cond) {
+> 3 |     useFoo();
+    |     ^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  4 |   }
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.js
new file mode 100644
index 00000000000..161c3728285
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.js
@@ -0,0 +1,5 @@
+function Component({cond, useFoo}) {
+  if (cond) {
+    useFoo();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.expect.md
new file mode 100644
index 00000000000..abc3600121b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const local = makeObject_Primitives();
+  if (props.cond) {
+    local.useFoo();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-conditionally-methodcall-hooklike-property-of-local.ts:6:4
+  4 |   const local = makeObject_Primitives();
+  5 |   if (props.cond) {
+> 6 |     local.useFoo();
+    |     ^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   }
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.js
new file mode 100644
index 00000000000..f03621dd632
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.js
@@ -0,0 +1,8 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const local = makeObject_Primitives();
+  if (props.cond) {
+    local.useFoo();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.expect.md
new file mode 100644
index 00000000000..9ccfcf8e01d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const local = makeObject_Primitives();
+  if (props.cond) {
+    const foo = local.useFoo;
+    foo();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-condtionally-call-hooklike-property-of-local.ts:7:4
+   5 |   if (props.cond) {
+   6 |     const foo = local.useFoo;
+>  7 |     foo();
+     |     ^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.js
new file mode 100644
index 00000000000..19355b7ca86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.js
@@ -0,0 +1,9 @@
+import {makeObject_Primitives} from 'shared-runtime';
+
+function Component(props) {
+  const local = makeObject_Primitives();
+  if (props.cond) {
+    const foo = local.useFoo;
+    foo();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.expect.md
new file mode 100644
index 00000000000..3f4df522513
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component() {
+  const someFunction = useContext(FooContext);
+  const useOhItsNamedLikeAHookNow = someFunction;
+  useOhItsNamedLikeAHookNow();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+
+error.invalid-dynamic-hook-via-hooklike-local.ts:4:2
+  2 |   const someFunction = useContext(FooContext);
+  3 |   const useOhItsNamedLikeAHookNow = someFunction;
+> 4 |   useOhItsNamedLikeAHookNow();
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.js
new file mode 100644
index 00000000000..ace0c6b63a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.js
@@ -0,0 +1,5 @@
+function Component() {
+  const someFunction = useContext(FooContext);
+  const useOhItsNamedLikeAHookNow = someFunction;
+  useOhItsNamedLikeAHookNow();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.expect.md
new file mode 100644
index 00000000000..bc8ed3be9a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  if (props.cond) {
+    return null;
+  }
+  return useHook();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-after-early-return.ts:5:9
+  3 |     return null;
+  4 |   }
+> 5 |   return useHook();
+    |          ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  6 | }
+  7 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.js
new file mode 100644
index 00000000000..34a277307f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  if (props.cond) {
+    return null;
+  }
+  return useHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.expect.md
new file mode 100644
index 00000000000..f1a05f56e28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const x = props.cond ? (useFoo ? 1 : 2) : 3;
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-hook-as-conditional-test.ts:2:26
+  1 | function Component(props) {
+> 2 |   const x = props.cond ? (useFoo ? 1 : 2) : 3;
+    |                           ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  3 |   return x;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.js
new file mode 100644
index 00000000000..08ed8705898
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.js
@@ -0,0 +1,4 @@
+function Component(props) {
+  const x = props.cond ? (useFoo ? 1 : 2) : 3;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.expect.md
new file mode 100644
index 00000000000..0a19c2bb184
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+function Component({useFoo}) {
+  useFoo();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+
+error.invalid-hook-as-prop.ts:2:2
+  1 | function Component({useFoo}) {
+> 2 |   useFoo();
+    |   ^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+  3 | }
+  4 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.js
new file mode 100644
index 00000000000..829f84ad130
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.js
@@ -0,0 +1,3 @@
+function Component({useFoo}) {
+  useFoo();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.expect.md
new file mode 100644
index 00000000000..84db054148e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let i = 0;
+  for (let x = 0; useHook(x) < 10; useHook(i), x++) {
+    i += useHook(x);
+  }
+  return i;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-for.ts:4:9
+  2 |   let i = 0;
+  3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
+> 4 |     i += useHook(x);
+    |          ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  5 |   }
+  6 |   return i;
+  7 | }
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-for.ts:3:35
+  1 | function Component(props) {
+  2 |   let i = 0;
+> 3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
+    |                                    ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  4 |     i += useHook(x);
+  5 |   }
+  6 |   return i;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.js
new file mode 100644
index 00000000000..af80a2c460b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  let i = 0;
+  for (let x = 0; useHook(x) < 10; useHook(i), x++) {
+    i += useHook(x);
+  }
+  return i;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.expect.md
new file mode 100644
index 00000000000..50a61407b0d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function useFoo({data}) {
+  const useMedia = useVideoPlayer();
+  const foo = useMedia();
+  return foo;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+
+error.invalid-hook-from-hook-return.ts:3:14
+  1 | function useFoo({data}) {
+  2 |   const useMedia = useVideoPlayer();
+> 3 |   const foo = useMedia();
+    |               ^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+  4 |   return foo;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.js
new file mode 100644
index 00000000000..de5718e341a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.js
@@ -0,0 +1,5 @@
+function useFoo({data}) {
+  const useMedia = useVideoPlayer();
+  const foo = useMedia();
+  return foo;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.expect.md
new file mode 100644
index 00000000000..3d061dce07c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function useFoo({data}) {
+  const player = useVideoPlayer();
+  const foo = player.useMedia();
+  return foo;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+
+error.invalid-hook-from-property-of-other-hook.ts:3:14
+  1 | function useFoo({data}) {
+  2 |   const player = useVideoPlayer();
+> 3 |   const foo = player.useMedia();
+    |               ^^^^^^^^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+  4 |   return foo;
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.js
new file mode 100644
index 00000000000..41f4ac8ae5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.js
@@ -0,0 +1,5 @@
+function useFoo({data}) {
+  const player = useVideoPlayer();
+  const foo = player.useMedia();
+  return foo;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.expect.md
new file mode 100644
index 00000000000..a5cd56f5704
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+  } else {
+    x = useHook();
+  }
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-if-alternate.ts:5:8
+  3 |   if (props.cond) {
+  4 |   } else {
+> 5 |     x = useHook();
+    |         ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  6 |   }
+  7 |   return x;
+  8 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.js
new file mode 100644
index 00000000000..0cbb190a373
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.js
@@ -0,0 +1,8 @@
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+  } else {
+    x = useHook();
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.expect.md
new file mode 100644
index 00000000000..000fd452a5b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = useHook();
+  }
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-if-consequent.ts:4:8
+  2 |   let x = null;
+  3 |   if (props.cond) {
+> 4 |     x = useHook();
+    |         ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  5 |   }
+  6 |   return x;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.js
new file mode 100644
index 00000000000..f57b0731f92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = useHook();
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.expect.md
new file mode 100644
index 00000000000..117f5c75d85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function Component() {
+  'use memo';
+  const f = () => {
+    const x = {
+      outer() {
+        const g = () => {
+          const y = {
+            inner() {
+              return useFoo();
+            },
+          };
+          return y;
+        };
+      },
+    };
+    return x;
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid-hook-in-nested-function-expression-object-expression.ts:10:21
+   8 |           const y = {
+   9 |             inner() {
+> 10 |               return useFoo();
+     |                      ^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  11 |             },
+  12 |           };
+  13 |           return y;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.js
new file mode 100644
index 00000000000..bfe82523a3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.js
@@ -0,0 +1,19 @@
+// @compilationMode:"infer"
+function Component() {
+  'use memo';
+  const f = () => {
+    const x = {
+      outer() {
+        const g = () => {
+          const y = {
+            inner() {
+              return useFoo();
+            },
+          };
+          return y;
+        };
+      },
+    };
+    return x;
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.expect.md
new file mode 100644
index 00000000000..8a2addbd307
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @compilationMode:"infer"
+function Component() {
+  'use memo';
+  const x = {
+    outer() {
+      const y = {
+        inner() {
+          return useFoo();
+        },
+      };
+      return y;
+    },
+  };
+  return x;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid-hook-in-nested-object-method.ts:8:17
+   6 |       const y = {
+   7 |         inner() {
+>  8 |           return useFoo();
+     |                  ^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |         },
+  10 |       };
+  11 |       return y;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.js
new file mode 100644
index 00000000000..779cad41f9e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.js
@@ -0,0 +1,15 @@
+// @compilationMode:"infer"
+function Component() {
+  'use memo';
+  const x = {
+    outer() {
+      const y = {
+        inner() {
+          return useFoo();
+        },
+      };
+      return y;
+    },
+  };
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.expect.md
new file mode 100644
index 00000000000..8a32aebf40a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component() {
+  const {result} = Module.useConditionalHook?.() ?? {};
+  return result;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-optional-methodcall.ts:2:19
+  1 | function Component() {
+> 2 |   const {result} = Module.useConditionalHook?.() ?? {};
+    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  3 |   return result;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.js
new file mode 100644
index 00000000000..ede919a64a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.js
@@ -0,0 +1,4 @@
+function Component() {
+  const {result} = Module.useConditionalHook?.() ?? {};
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.expect.md
new file mode 100644
index 00000000000..b9ea596f281
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component() {
+  const {result} = Module?.useConditionalHook() ?? {};
+  return result;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-optional-property.ts:2:19
+  1 | function Component() {
+> 2 |   const {result} = Module?.useConditionalHook() ?? {};
+    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  3 |   return result;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.js
new file mode 100644
index 00000000000..0b1d0d67562
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.js
@@ -0,0 +1,4 @@
+function Component() {
+  const {result} = Module?.useConditionalHook() ?? {};
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.expect.md
new file mode 100644
index 00000000000..046df4a91af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+function Component() {
+  const {result} = useConditionalHook?.() ?? {};
+  return result;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-hook-optionalcall.ts:2:19
+  1 | function Component() {
+> 2 |   const {result} = useConditionalHook?.() ?? {};
+    |                    ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  3 |   return result;
+  4 | }
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.js
new file mode 100644
index 00000000000..589de67193f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.js
@@ -0,0 +1,4 @@
+function Component() {
+  const {result} = useConditionalHook?.() ?? {};
+  return result;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.expect.md
new file mode 100644
index 00000000000..945517a8169
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let y;
+  props.cond ? (y = useFoo) : null;
+  return y();
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-hook-reassigned-in-conditional.ts:3:20
+  1 | function Component(props) {
+  2 |   let y;
+> 3 |   props.cond ? (y = useFoo) : null;
+    |                     ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  4 |   return y();
+  5 | }
+  6 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-hook-reassigned-in-conditional.ts:3:16
+  1 | function Component(props) {
+  2 |   let y;
+> 3 |   props.cond ? (y = useFoo) : null;
+    |                 ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  4 |   return y();
+  5 | }
+  6 |
+
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+
+error.invalid-hook-reassigned-in-conditional.ts:4:9
+  2 |   let y;
+  3 |   props.cond ? (y = useFoo) : null;
+> 4 |   return y();
+    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+  5 | }
+  6 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.js
new file mode 100644
index 00000000000..5401adf31d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  let y;
+  props.cond ? (y = useFoo) : null;
+  return y();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.expect.md
new file mode 100644
index 00000000000..d7e3408dfc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHookInLoops() {
+  while (a) {
+    useHook1();
+    if (b) return;
+    useHook2();
+  }
+  while (c) {
+    useHook3();
+    if (d) return;
+    useHook4();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 4 errors:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-1b9527f967f3.ts:7:4
+   5 | function useHookInLoops() {
+   6 |   while (a) {
+>  7 |     useHook1();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |     if (b) return;
+   9 |     useHook2();
+  10 |   }
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-1b9527f967f3.ts:9:4
+   7 |     useHook1();
+   8 |     if (b) return;
+>  9 |     useHook2();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  10 |   }
+  11 |   while (c) {
+  12 |     useHook3();
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-1b9527f967f3.ts:12:4
+  10 |   }
+  11 |   while (c) {
+> 12 |     useHook3();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  13 |     if (d) return;
+  14 |     useHook4();
+  15 |   }
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-1b9527f967f3.ts:14:4
+  12 |     useHook3();
+  13 |     if (d) return;
+> 14 |     useHook4();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  15 |   }
+  16 | }
+  17 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.js
new file mode 100644
index 00000000000..0522e7c9af2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.js
@@ -0,0 +1,16 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHookInLoops() {
+  while (a) {
+    useHook1();
+    if (b) return;
+    useHook2();
+  }
+  while (c) {
+    useHook3();
+    if (d) return;
+    useHook4();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.expect.md
new file mode 100644
index 00000000000..bbc3f16657b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    useConditionalHook();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-2aabd222fc6a.ts:7:4
+   5 | function ComponentWithConditionalHook() {
+   6 |   if (cond) {
+>  7 |     useConditionalHook();
+     |     ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.js
new file mode 100644
index 00000000000..67e02f0d8d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.js
@@ -0,0 +1,9 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    useConditionalHook();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.expect.md
new file mode 100644
index 00000000000..6f0547a6007
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useLabeledBlock() {
+  label: {
+    if (a) break label;
+    useHook();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-49d341e5d68f.ts:8:4
+   6 |   label: {
+   7 |     if (a) break label;
+>  8 |     useHook();
+     |     ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   }
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.js
new file mode 100644
index 00000000000..c2a04744db7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.js
@@ -0,0 +1,10 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useLabeledBlock() {
+  label: {
+    if (a) break label;
+    useHook();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.expect.md
new file mode 100644
index 00000000000..282a4d4618c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithHookInsideLoop() {
+  while (cond) {
+    useHookInsideLoop();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-79128a755612.ts:7:4
+   5 | function ComponentWithHookInsideLoop() {
+   6 |   while (cond) {
+>  7 |     useHookInsideLoop();
+     |     ^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.js
new file mode 100644
index 00000000000..22d89c85fd2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.js
@@ -0,0 +1,9 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithHookInsideLoop() {
+  while (cond) {
+    useHookInsideLoop();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.expect.md
new file mode 100644
index 00000000000..1a725bf09eb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  if (a) return;
+  if (b) {
+    console.log('true');
+  } else {
+    console.log('false');
+  }
+  useState();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-9718e30b856c.ts:12:2
+  10 |     console.log('false');
+  11 |   }
+> 12 |   useState();
+     |   ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  13 | }
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.js
new file mode 100644
index 00000000000..7531fa438d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.js
@@ -0,0 +1,13 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  if (a) return;
+  if (b) {
+    console.log('true');
+  } else {
+    console.log('false');
+  }
+  useState();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.expect.md
new file mode 100644
index 00000000000..d36b79fd91b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  a && useHook1();
+  b && useHook2();
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-9bf17c174134.ts:6:7
+  4 | // This *must* be invalid.
+  5 | function useHook() {
+> 6 |   a && useHook1();
+    |        ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   b && useHook2();
+  8 | }
+  9 |
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-9bf17c174134.ts:7:7
+  5 | function useHook() {
+  6 |   a && useHook1();
+> 7 |   b && useHook2();
+    |        ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.js
new file mode 100644
index 00000000000..8bb52ccf0e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.js
@@ -0,0 +1,8 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  a && useHook1();
+  b && useHook2();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.expect.md
new file mode 100644
index 00000000000..c29436a1cef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithTernaryHook() {
+  cond ? useTernaryHook() : null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-b4dcda3d60ed.ts:6:9
+  4 | // This *must* be invalid.
+  5 | function ComponentWithTernaryHook() {
+> 6 |   cond ? useTernaryHook() : null;
+    |          ^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.js
new file mode 100644
index 00000000000..a6999ffe044
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.js
@@ -0,0 +1,7 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithTernaryHook() {
+  cond ? useTernaryHook() : null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.expect.md
new file mode 100644
index 00000000000..8d7d38f404b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  if (a) return;
+  useState();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-c906cace44e9.ts:7:2
+  5 | function useHook() {
+  6 |   if (a) return;
+> 7 |   useState();
+    |   ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  8 | }
+  9 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.js
new file mode 100644
index 00000000000..6ec7d91cb65
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.js
@@ -0,0 +1,8 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  if (a) return;
+  useState();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.expect.md
new file mode 100644
index 00000000000..30753847a06
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function normalFunctionWithConditionalHook() {
+  if (cond) {
+    useHookInsideNormalFunction();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-d740d54e9c21.ts:7:4
+   5 | function normalFunctionWithConditionalHook() {
+   6 |   if (cond) {
+>  7 |     useHookInsideNormalFunction();
+     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.js
new file mode 100644
index 00000000000..5654baaebb9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.js
@@ -0,0 +1,9 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function normalFunctionWithConditionalHook() {
+  if (cond) {
+    useHookInsideNormalFunction();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.expect.md
new file mode 100644
index 00000000000..19a99ca07c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHookInLoops() {
+  while (a) {
+    useHook1();
+    if (b) continue;
+    useHook2();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-d85c144bdf40.ts:7:4
+   5 | function useHookInLoops() {
+   6 |   while (a) {
+>  7 |     useHook1();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |     if (b) continue;
+   9 |     useHook2();
+  10 |   }
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-d85c144bdf40.ts:9:4
+   7 |     useHook1();
+   8 |     if (b) continue;
+>  9 |     useHook2();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  10 |   }
+  11 | }
+  12 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.js
new file mode 100644
index 00000000000..34df06aa36c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.js
@@ -0,0 +1,11 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHookInLoops() {
+  while (a) {
+    useHook1();
+    if (b) continue;
+    useHook2();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.expect.md
new file mode 100644
index 00000000000..52d60f6df0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHookWithConditionalHook() {
+  if (cond) {
+    useConditionalHook();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-ea7c2fb545a9.ts:7:4
+   5 | function useHookWithConditionalHook() {
+   6 |   if (cond) {
+>  7 |     useConditionalHook();
+     |     ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |   }
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.js
new file mode 100644
index 00000000000..bad7d009a0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.js
@@ -0,0 +1,9 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHookWithConditionalHook() {
+  if (cond) {
+    useConditionalHook();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.expect.md
new file mode 100644
index 00000000000..4583ede479a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  if (b) {
+    console.log('true');
+  } else {
+    console.log('false');
+  }
+  if (a) return;
+  useState();
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-f3d6c5e9c83d.ts:12:2
+  10 |   }
+  11 |   if (a) return;
+> 12 |   useState();
+     |   ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  13 | }
+  14 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.js
new file mode 100644
index 00000000000..156b68e52d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.js
@@ -0,0 +1,13 @@
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  if (b) {
+    console.log('true');
+  } else {
+    console.log('false');
+  }
+  if (a) return;
+  useState();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.expect.md
new file mode 100644
index 00000000000..52c929f8470
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// 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();
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-f69800950ff0.ts:6:20
+  4 | // This *must* be invalid.
+  5 | function useHook({bar}) {
+> 6 |   let foo1 = bar && useState();
+    |                     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |   let foo2 = bar || useState();
+  8 |   let foo3 = bar ?? useState();
+  9 | }
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-f69800950ff0.ts:7:20
+   5 | function useHook({bar}) {
+   6 |   let foo1 = bar && useState();
+>  7 |   let foo2 = bar || useState();
+     |                     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   8 |   let foo3 = bar ?? useState();
+   9 | }
+  10 |
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+error.invalid-rules-of-hooks-f69800950ff0.ts:8:20
+   6 |   let foo1 = bar && useState();
+   7 |   let foo2 = bar || useState();
+>  8 |   let foo3 = bar ?? useState();
+     |                     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 | }
+  10 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.js
new file mode 100644
index 00000000000..bf9c3f2fa73
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.js
@@ -0,0 +1,9 @@
+// Expected to fail
+
+// 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();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.expect.md
new file mode 100644
index 00000000000..e2e8668921c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function createHook() {
+  return function useHookWithConditionalHook() {
+    if (cond) {
+      useConditionalHook();
+    }
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.ts:6:6
+  4 |   return function useHookWithConditionalHook() {
+  5 |     if (cond) {
+> 6 |       useConditionalHook();
+    |       ^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |     }
+  8 |   };
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.js
new file mode 100644
index 00000000000..5b995729713
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.js
@@ -0,0 +1,9 @@
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function createHook() {
+  return function useHookWithConditionalHook() {
+    if (cond) {
+      useConditionalHook();
+    }
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.expect.md
new file mode 100644
index 00000000000..7474867501f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function createComponent() {
+  return function ComponentWithHookInsideCallback() {
+    useEffect(() => {
+      useHookInsideCallback();
+    });
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid.invalid-rules-of-hooks-0de1224ce64b.ts:6:6
+  4 |   return function ComponentWithHookInsideCallback() {
+  5 |     useEffect(() => {
+> 6 |       useHookInsideCallback();
+    |       ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |     });
+  8 |   };
+  9 | }
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call useEffect within a function expression.
+
+error.invalid.invalid-rules-of-hooks-0de1224ce64b.ts:5:4
+  3 | function createComponent() {
+  4 |   return function ComponentWithHookInsideCallback() {
+> 5 |     useEffect(() => {
+    |     ^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  6 |       useHookInsideCallback();
+  7 |     });
+  8 |   };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.js
new file mode 100644
index 00000000000..24a8f427a15
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.js
@@ -0,0 +1,9 @@
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function createComponent() {
+  return function ComponentWithHookInsideCallback() {
+    useEffect(() => {
+      useHookInsideCallback();
+    });
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.expect.md
new file mode 100644
index 00000000000..49994cf800c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function createComponent() {
+  return function ComponentWithHookInsideCallback() {
+    function handleClick() {
+      useState();
+    }
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call useState within a function expression.
+
+error.invalid.invalid-rules-of-hooks-449a37146a83.ts:6:6
+  4 |   return function ComponentWithHookInsideCallback() {
+  5 |     function handleClick() {
+> 6 |       useState();
+    |       ^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |     }
+  8 |   };
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.js
new file mode 100644
index 00000000000..af1be61e595
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.js
@@ -0,0 +1,9 @@
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function createComponent() {
+  return function ComponentWithHookInsideCallback() {
+    function handleClick() {
+      useState();
+    }
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.expect.md
new file mode 100644
index 00000000000..734ec721a50
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function ComponentWithHookInsideCallback() {
+  function handleClick() {
+    useState();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call useState within a function expression.
+
+error.invalid.invalid-rules-of-hooks-76a74b4666e9.ts:5:4
+  3 | function ComponentWithHookInsideCallback() {
+  4 |   function handleClick() {
+> 5 |     useState();
+    |     ^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  6 |   }
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.js
new file mode 100644
index 00000000000..e0882b91264
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.js
@@ -0,0 +1,7 @@
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function ComponentWithHookInsideCallback() {
+  function handleClick() {
+    useState();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.expect.md
new file mode 100644
index 00000000000..04a3f938b2f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function createComponent() {
+  return function ComponentWithConditionalHook() {
+    if (cond) {
+      useConditionalHook();
+    }
+  };
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid.invalid-rules-of-hooks-d842d36db450.ts:6:6
+  4 |   return function ComponentWithConditionalHook() {
+  5 |     if (cond) {
+> 6 |       useConditionalHook();
+    |       ^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  7 |     }
+  8 |   };
+  9 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.js
new file mode 100644
index 00000000000..724407faf8b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.js
@@ -0,0 +1,9 @@
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function createComponent() {
+  return function ComponentWithConditionalHook() {
+    if (cond) {
+      useConditionalHook();
+    }
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.expect.md
new file mode 100644
index 00000000000..8ff30bfd2de
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function ComponentWithHookInsideCallback() {
+  useEffect(() => {
+    useHookInsideCallback();
+  });
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid.invalid-rules-of-hooks-d952b82c2597.ts:5:4
+  3 | function ComponentWithHookInsideCallback() {
+  4 |   useEffect(() => {
+> 5 |     useHookInsideCallback();
+    |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  6 |   });
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.js
new file mode 100644
index 00000000000..17ecd3a3d35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.js
@@ -0,0 +1,7 @@
+// Invalid because it's a common misunderstanding.
+// We *could* make it valid but the runtime error could be confusing.
+function ComponentWithHookInsideCallback() {
+  useEffect(() => {
+    useHookInsideCallback();
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0592bd574811.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0592bd574811.expect.md
new file mode 100644
index 00000000000..b75e2a5da59
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0592bd574811.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Regression test for some internal code.
+// This shows how the "callback rule" is more relaxed,
+// and doesn't kick in unless we're confident we're in
+// a component or a hook.
+function makeListener(instance) {
+  each(pixelsWithInferredEvents, pixel => {
+    if (useExtendedSelector(pixel.id) && extendedButton) {
+      foo();
+    }
+  });
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Regression test for some internal code.
+// This shows how the "callback rule" is more relaxed,
+// and doesn't kick in unless we're confident we're in
+// a component or a hook.
+function makeListener(instance) {
+  each(pixelsWithInferredEvents, (pixel) => {
+    if (useExtendedSelector(pixel.id) && extendedButton) {
+      foo();
+    }
+  });
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0592bd574811.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0592bd574811.js
new file mode 100644
index 00000000000..c062150b639
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0592bd574811.js
@@ -0,0 +1,12 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// Regression test for some internal code.
+// This shows how the "callback rule" is more relaxed,
+// and doesn't kick in unless we're confident we're in
+// a component or a hook.
+function makeListener(instance) {
+  each(pixelsWithInferredEvents, pixel => {
+    if (useExtendedSelector(pixel.id) && extendedButton) {
+      foo();
+    }
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.expect.md
new file mode 100644
index 00000000000..bc310acc094
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.expect.md
@@ -0,0 +1,28 @@
+
+## Input
+
+```javascript
+// Valid because exceptions abort rendering
+function RegressionTest() {
+  if (page == null) {
+    throw new Error('oh no!');
+  }
+  useState();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because exceptions abort rendering
+function RegressionTest() {
+  if (page == null) {
+    throw new Error("oh no!");
+  }
+
+  useState();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.js
new file mode 100644
index 00000000000..319b38c642b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-0e2214abc294.js
@@ -0,0 +1,7 @@
+// Valid because exceptions abort rendering
+function RegressionTest() {
+  if (page == null) {
+    throw new Error('oh no!');
+  }
+  useState();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-1ff6c3fbbc94.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-1ff6c3fbbc94.expect.md
new file mode 100644
index 00000000000..d84e26368f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-1ff6c3fbbc94.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because components can use hooks.
+function ComponentWithHook() {
+  useHook();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because components can use hooks.
+function ComponentWithHook() {
+  useHook();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-1ff6c3fbbc94.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-1ff6c3fbbc94.js
new file mode 100644
index 00000000000..d0a47a7001d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-1ff6c3fbbc94.js
@@ -0,0 +1,4 @@
+// Valid because components can use hooks.
+function ComponentWithHook() {
+  useHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-23dc7fffde57.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-23dc7fffde57.expect.md
new file mode 100644
index 00000000000..4bcb4dee570
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-23dc7fffde57.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  return useHook1() + useHook2();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  return useHook1() + useHook2();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-23dc7fffde57.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-23dc7fffde57.js
new file mode 100644
index 00000000000..c1356a4b6d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-23dc7fffde57.js
@@ -0,0 +1,4 @@
+// Valid because hooks can call hooks.
+function useHook() {
+  return useHook1() + useHook2();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2bec02ac982b.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2bec02ac982b.expect.md
new file mode 100644
index 00000000000..e0c6871e198
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2bec02ac982b.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because hooks can call hooks.
+function createHook() {
+  return function useHook() {
+    useHook1();
+    useHook2();
+  };
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because hooks can call hooks.
+function createHook() {
+  return function useHook() {
+    useHook1();
+    useHook2();
+  };
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2bec02ac982b.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2bec02ac982b.js
new file mode 100644
index 00000000000..e4ff95bfe41
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2bec02ac982b.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because hooks can call hooks.
+function createHook() {
+  return function useHook() {
+    useHook1();
+    useHook2();
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.expect.md
new file mode 100644
index 00000000000..6db60d1c8b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  useState() && a;
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  useState() && a;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.js
new file mode 100644
index 00000000000..6936266e585
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-2e405c78cb80.js
@@ -0,0 +1,4 @@
+// Valid because hooks can call hooks.
+function useHook() {
+  useState() && a;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-33a6e23edac1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-33a6e23edac1.expect.md
new file mode 100644
index 00000000000..a65b46afa2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-33a6e23edac1.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because hooks can use hooks.
+function createHook() {
+  return function useHookWithHook() {
+    useHook();
+  };
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because hooks can use hooks.
+function createHook() {
+  return function useHookWithHook() {
+    useHook();
+  };
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-33a6e23edac1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-33a6e23edac1.js
new file mode 100644
index 00000000000..3a7ee7b034c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-33a6e23edac1.js
@@ -0,0 +1,7 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because hooks can use hooks.
+function createHook() {
+  return function useHookWithHook() {
+    useHook();
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-347b0dae66f1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-347b0dae66f1.expect.md
new file mode 100644
index 00000000000..6d270fd527a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-347b0dae66f1.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because functions can call functions.
+function normalFunctionWithNormalFunction() {
+  doSomething();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because functions can call functions.
+function normalFunctionWithNormalFunction() {
+  doSomething();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-347b0dae66f1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-347b0dae66f1.js
new file mode 100644
index 00000000000..536b7976425
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-347b0dae66f1.js
@@ -0,0 +1,4 @@
+// Valid because functions can call functions.
+function normalFunctionWithNormalFunction() {
+  doSomething();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-485bf041f55f.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-485bf041f55f.expect.md
new file mode 100644
index 00000000000..779a2f9956b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-485bf041f55f.expect.md
@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+// Valid because functions can call functions.
+function functionThatStartsWithUseButIsntAHook() {
+  if (cond) {
+    userFetch();
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because functions can call functions.
+function functionThatStartsWithUseButIsntAHook() {
+  if (cond) {
+    userFetch();
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-485bf041f55f.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-485bf041f55f.js
new file mode 100644
index 00000000000..d306ae5606e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-485bf041f55f.js
@@ -0,0 +1,6 @@
+// Valid because functions can call functions.
+function functionThatStartsWithUseButIsntAHook() {
+  if (cond) {
+    userFetch();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-4f6c78a14bf7.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-4f6c78a14bf7.expect.md
new file mode 100644
index 00000000000..43f76c9428a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-4f6c78a14bf7.expect.md
@@ -0,0 +1,22 @@
+
+## Input
+
+```javascript
+// Valid although unconditional return doesn't make sense and would fail other rules.
+// We could make it invalid but it doesn't matter.
+function useUnreachable() {
+  return;
+  useHook();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid although unconditional return doesn't make sense and would fail other rules.
+// We could make it invalid but it doesn't matter.
+function useUnreachable() {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-4f6c78a14bf7.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-4f6c78a14bf7.js
new file mode 100644
index 00000000000..a312b30ff7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-4f6c78a14bf7.js
@@ -0,0 +1,6 @@
+// Valid although unconditional return doesn't make sense and would fail other rules.
+// We could make it invalid but it doesn't matter.
+function useUnreachable() {
+  return;
+  useHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.expect.md
new file mode 100644
index 00000000000..7f1bb046d16
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// Valid because the neither the condition nor the loop affect the hook call.
+function App(props) {
+  const someObject = {propA: true};
+  for (const propName in someObject) {
+    if (propName === true) {
+    } else {
+    }
+  }
+  const [myState, setMyState] = useState(null);
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because the neither the condition nor the loop affect the hook call.
+function App(props) {
+  const someObject = { propA: true };
+  for (const propName in someObject) {
+    if (propName === true) {
+    }
+  }
+
+  useState(null);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.js
new file mode 100644
index 00000000000..e28a6626907
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-69521d94fa03.js
@@ -0,0 +1,10 @@
+// Valid because the neither the condition nor the loop affect the hook call.
+function App(props) {
+  const someObject = {propA: true};
+  for (const propName in someObject) {
+    if (propName === true) {
+    } else {
+    }
+  }
+  const [myState, setMyState] = useState(null);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-7e52f5eec669.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-7e52f5eec669.expect.md
new file mode 100644
index 00000000000..8f59bcc9df8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-7e52f5eec669.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because components can call functions.
+function ComponentWithNormalFunction() {
+  doSomething();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because components can call functions.
+function ComponentWithNormalFunction() {
+  doSomething();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-7e52f5eec669.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-7e52f5eec669.js
new file mode 100644
index 00000000000..7e30058715a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-7e52f5eec669.js
@@ -0,0 +1,4 @@
+// Valid because components can call functions.
+function ComponentWithNormalFunction() {
+  doSomething();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-844a496db20b.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-844a496db20b.expect.md
new file mode 100644
index 00000000000..1585d8cce8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-844a496db20b.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because hooks can use hooks.
+function useHookWithHook() {
+  useHook();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because hooks can use hooks.
+function useHookWithHook() {
+  useHook();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-844a496db20b.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-844a496db20b.js
new file mode 100644
index 00000000000..e2073c19e14
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-844a496db20b.js
@@ -0,0 +1,4 @@
+// Valid because hooks can use hooks.
+function useHookWithHook() {
+  useHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-8f1c2c3f71c9.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-8f1c2c3f71c9.expect.md
new file mode 100644
index 00000000000..04eef9c50f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-8f1c2c3f71c9.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because components can use hooks.
+function createComponentWithHook() {
+  return function ComponentWithHook() {
+    useHook();
+  };
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because components can use hooks.
+function createComponentWithHook() {
+  return function ComponentWithHook() {
+    useHook();
+  };
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-8f1c2c3f71c9.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-8f1c2c3f71c9.js
new file mode 100644
index 00000000000..f9dcb240c41
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-8f1c2c3f71c9.js
@@ -0,0 +1,7 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// Valid because components can use hooks.
+function createComponentWithHook() {
+  return function ComponentWithHook() {
+    useHook();
+  };
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-93dc5d5e538a.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-93dc5d5e538a.expect.md
new file mode 100644
index 00000000000..701d0a89bf9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-93dc5d5e538a.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// Valid because the loop doesn't change the order of hooks calls.
+function RegressionTest() {
+  const res = [];
+  const additionalCond = true;
+  for (let i = 0; i !== 10 && additionalCond; ++i) {
+    res.push(i);
+  }
+  React.useLayoutEffect(() => {});
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because the loop doesn't change the order of hooks calls.
+function RegressionTest() {
+  const res = [];
+
+  for (let i = 0; i !== 10 && true; ++i) {
+    res.push(i);
+  }
+
+  React.useLayoutEffect(_temp);
+}
+function _temp() {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-93dc5d5e538a.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-93dc5d5e538a.js
new file mode 100644
index 00000000000..7c6908bc139
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-93dc5d5e538a.js
@@ -0,0 +1,9 @@
+// Valid because the loop doesn't change the order of hooks calls.
+function RegressionTest() {
+  const res = [];
+  const additionalCond = true;
+  for (let i = 0; i !== 10 && additionalCond; ++i) {
+    res.push(i);
+  }
+  React.useLayoutEffect(() => {});
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md
new file mode 100644
index 00000000000..24b58ceff6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// 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} />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Valid because hooks can be used in anonymous function arguments to
+// forwardRef.
+const FancyButton = React.forwardRef(function (props, ref) {
+  const $ = _c(3);
+  useHook();
+  let t0;
+  if ($[0] !== props || $[1] !== ref) {
+    t0 = <button {...props} ref={ref} />;
+    $[0] = props;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.js
new file mode 100644
index 00000000000..2ce6adcaa64
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.js
@@ -0,0 +1,6 @@
+// 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} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9d7879272ff6.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9d7879272ff6.expect.md
new file mode 100644
index 00000000000..ae50157e095
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9d7879272ff6.expect.md
@@ -0,0 +1,21 @@
+
+## Input
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  return useHook1(useHook2());
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  return useHook1(useHook2());
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9d7879272ff6.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9d7879272ff6.js
new file mode 100644
index 00000000000..1c16d086bfa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9d7879272ff6.js
@@ -0,0 +1,4 @@
+// Valid because hooks can call hooks.
+function useHook() {
+  return useHook1(useHook2());
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c1e8c7f4c191.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c1e8c7f4c191.expect.md
new file mode 100644
index 00000000000..23705106a3e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c1e8c7f4c191.expect.md
@@ -0,0 +1,282 @@
+
+## Input
+
+```javascript
+// Is valid but hard to compute by brute-forcing
+function MyComponent() {
+  // 40 conditions
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+
+  // 10 hooks
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+}
+
+```
+
+## Code
+
+```javascript
+// Is valid but hard to compute by brute-forcing
+function MyComponent() {
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  if (c) {
+  }
+
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c1e8c7f4c191.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c1e8c7f4c191.js
new file mode 100644
index 00000000000..e19bdb95830
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c1e8c7f4c191.js
@@ -0,0 +1,136 @@
+// Is valid but hard to compute by brute-forcing
+function MyComponent() {
+  // 40 conditions
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+  if (c) {
+  } else {
+  }
+
+  // 10 hooks
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+  useHook();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.expect.md
new file mode 100644
index 00000000000..e24bc84644f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.expect.md
@@ -0,0 +1,23 @@
+
+## Input
+
+```javascript
+// Regression test for incorrectly flagged valid code.
+function RegressionTest() {
+  const foo = cond ? a : b;
+  useState();
+}
+
+```
+
+## Code
+
+```javascript
+// Regression test for incorrectly flagged valid code.
+function RegressionTest() {
+  cond ? a : b;
+  useState();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.js
new file mode 100644
index 00000000000..8ac4448fda6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-c5d1f3143c4c.js
@@ -0,0 +1,5 @@
+// Regression test for incorrectly flagged valid code.
+function RegressionTest() {
+  const foo = cond ? a : b;
+  useState();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-cfdfe5572fc7.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-cfdfe5572fc7.expect.md
new file mode 100644
index 00000000000..50fb6486c92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-cfdfe5572fc7.expect.md
@@ -0,0 +1,23 @@
+
+## Input
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  useHook1();
+  useHook2();
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because hooks can call hooks.
+function useHook() {
+  useHook1();
+  useHook2();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-cfdfe5572fc7.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-cfdfe5572fc7.js
new file mode 100644
index 00000000000..2ab771dc310
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-cfdfe5572fc7.js
@@ -0,0 +1,5 @@
+// Valid because hooks can call hooks.
+function useHook() {
+  useHook1();
+  useHook2();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.expect.md
new file mode 100644
index 00000000000..dc7e23c859c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled
+// Valid because they're not matching use[A-Z].
+fooState();
+_use();
+_useState();
+use_hook();
+// also valid because it's not matching the PascalCase namespace
+jest.useFakeTimer();
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled
+// Valid because they're not matching use[A-Z].
+fooState();
+_use();
+_useState();
+use_hook();
+// also valid because it's not matching the PascalCase namespace
+jest.useFakeTimer();
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.js
new file mode 100644
index 00000000000..eeb8fc549d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-df4d750736f3.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled
+// Valid because they're not matching use[A-Z].
+fooState();
+_use();
+_useState();
+use_hook();
+// also valid because it's not matching the PascalCase namespace
+jest.useFakeTimer();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-dfde14171fcd.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-dfde14171fcd.expect.md
new file mode 100644
index 00000000000..4dcc14502bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-dfde14171fcd.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled
+// Valid because classes can call functions.
+// We don't consider these to be hooks.
+class C {
+  m() {
+    this.useHook();
+    super.useHook();
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled
+// Valid because classes can call functions.
+// We don't consider these to be hooks.
+class C {
+  m() {
+    this.useHook();
+    super.useHook();
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-dfde14171fcd.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-dfde14171fcd.js
new file mode 100644
index 00000000000..a301da630c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-dfde14171fcd.js
@@ -0,0 +1,9 @@
+// @expectNothingCompiled
+// Valid because classes can call functions.
+// We don't consider these to be hooks.
+class C {
+  m() {
+    this.useHook();
+    super.useHook();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e5dd6caf4084.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e5dd6caf4084.expect.md
new file mode 100644
index 00000000000..16fb57452a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e5dd6caf4084.expect.md
@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e5dd6caf4084.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e5dd6caf4084.js
new file mode 100644
index 00000000000..7f42ef2dcef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e5dd6caf4084.js
@@ -0,0 +1,6 @@
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e66a744cffbe.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e66a744cffbe.expect.md
new file mode 100644
index 00000000000..d92eb7834ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e66a744cffbe.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// Valid because hooks can be used in anonymous function arguments to
+// forwardRef.
+const FancyButton = forwardRef(function (props, ref) {
+  useHook();
+  return <button {...props} ref={ref} />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Valid because hooks can be used in anonymous function arguments to
+// forwardRef.
+const FancyButton = forwardRef(function (props, ref) {
+  const $ = _c(3);
+  useHook();
+  let t0;
+  if ($[0] !== props || $[1] !== ref) {
+    t0 = <button {...props} ref={ref} />;
+    $[0] = props;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e66a744cffbe.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e66a744cffbe.js
new file mode 100644
index 00000000000..4895da63dde
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-e66a744cffbe.js
@@ -0,0 +1,6 @@
+// Valid because hooks can be used in anonymous function arguments to
+// forwardRef.
+const FancyButton = forwardRef(function (props, ref) {
+  useHook();
+  return <button {...props} ref={ref} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-eacfcaa6ef89.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-eacfcaa6ef89.expect.md
new file mode 100644
index 00000000000..682b97b0d38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-eacfcaa6ef89.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// Valid because hooks can be used in anonymous function arguments to
+// memo.
+const MemoizedFunction = memo(function (props) {
+  useHook();
+  return <button {...props} />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Valid because hooks can be used in anonymous function arguments to
+// memo.
+const MemoizedFunction = memo(function (props) {
+  const $ = _c(2);
+  useHook();
+  let t0;
+  if ($[0] !== props) {
+    t0 = <button {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-eacfcaa6ef89.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-eacfcaa6ef89.js
new file mode 100644
index 00000000000..0d26eb583fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-eacfcaa6ef89.js
@@ -0,0 +1,6 @@
+// Valid because hooks can be used in anonymous function arguments to
+// memo.
+const MemoizedFunction = memo(function (props) {
+  useHook();
+  return <button {...props} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-fe6042f7628b.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-fe6042f7628b.expect.md
new file mode 100644
index 00000000000..ec0ebb5fb10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-fe6042f7628b.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// 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);
+  }
+});
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @compilationMode:"infer"
+// 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);
+  }
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-fe6042f7628b.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-fe6042f7628b.js
new file mode 100644
index 00000000000..95a724663a4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-fe6042f7628b.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @compilationMode:"infer"
+// 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);
+  }
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af.expect.md
new file mode 100644
index 00000000000..300fe4c1819
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// Valid -- this is a regression test.
+jest.useFakeTimers();
+beforeEach(() => {
+  jest.useRealTimers();
+});
+
+```
+
+## Code
+
+```javascript
+// @skip
+// Unsupported input
+
+// Valid -- this is a regression test.
+jest.useFakeTimers();
+beforeEach(() => {
+  jest.useRealTimers();
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af.js
new file mode 100644
index 00000000000..21d1a7d252b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af.js
@@ -0,0 +1,8 @@
+// @skip
+// Unsupported input
+
+// Valid -- this is a regression test.
+jest.useFakeTimers();
+beforeEach(() => {
+  jest.useRealTimers();
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c.expect.md
new file mode 100644
index 00000000000..706686c7aef
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// Valid because hooks can be used in anonymous function arguments to
+// React.memo.
+const MemoizedFunction = React.memo(props => {
+  useHook();
+  return <button {...props} />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @skip
+// Unsupported input
+
+// Valid because hooks can be used in anonymous function arguments to
+// React.memo.
+const MemoizedFunction = React.memo((props) => {
+  const $ = _c(2);
+  useHook();
+  let t0;
+  if ($[0] !== props) {
+    t0 = <button {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c.js
new file mode 100644
index 00000000000..287731f86af
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c.js
@@ -0,0 +1,9 @@
+// @skip
+// Unsupported input
+
+// Valid because hooks can be used in anonymous function arguments to
+// React.memo.
+const MemoizedFunction = React.memo(props => {
+  useHook();
+  return <button {...props} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb.expect.md
new file mode 100644
index 00000000000..bc22e25e136
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb.expect.md
@@ -0,0 +1,160 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// Valid because the neither the conditions before or after the hook affect the hook call
+// Failed prior to implementing BigInt because pathsFromStartToEnd and allPathsFromStartToEnd were too big and had rounding errors
+const useSomeHook = () => {};
+
+const SomeName = () => {
+  const filler = FILLER ?? FILLER ?? FILLER;
+  const filler2 = FILLER ?? FILLER ?? FILLER;
+  const filler3 = FILLER ?? FILLER ?? FILLER;
+  const filler4 = FILLER ?? FILLER ?? FILLER;
+  const filler5 = FILLER ?? FILLER ?? FILLER;
+  const filler6 = FILLER ?? FILLER ?? FILLER;
+  const filler7 = FILLER ?? FILLER ?? FILLER;
+  const filler8 = FILLER ?? FILLER ?? FILLER;
+
+  useSomeHook();
+
+  if (anyConditionCanEvenBeFalse) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+    </React.Fragment>
+  );
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @skip
+// Unsupported input
+
+// Valid because the neither the conditions before or after the hook affect the hook call
+// Failed prior to implementing BigInt because pathsFromStartToEnd and allPathsFromStartToEnd were too big and had rounding errors
+const useSomeHook = () => {};
+
+const SomeName = () => {
+  const $ = _c(1);
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+  (FILLER ?? FILLER, FILLER) ?? FILLER;
+
+  useSomeHook();
+
+  if (anyConditionCanEvenBeFalse) {
+    return null;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <React.Fragment>
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+        {FILLER ? FILLER : FILLER}
+      </React.Fragment>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb.js
new file mode 100644
index 00000000000..d2523911c3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb.js
@@ -0,0 +1,70 @@
+// @skip
+// Unsupported input
+
+// Valid because the neither the conditions before or after the hook affect the hook call
+// Failed prior to implementing BigInt because pathsFromStartToEnd and allPathsFromStartToEnd were too big and had rounding errors
+const useSomeHook = () => {};
+
+const SomeName = () => {
+  const filler = FILLER ?? FILLER ?? FILLER;
+  const filler2 = FILLER ?? FILLER ?? FILLER;
+  const filler3 = FILLER ?? FILLER ?? FILLER;
+  const filler4 = FILLER ?? FILLER ?? FILLER;
+  const filler5 = FILLER ?? FILLER ?? FILLER;
+  const filler6 = FILLER ?? FILLER ?? FILLER;
+  const filler7 = FILLER ?? FILLER ?? FILLER;
+  const filler8 = FILLER ?? FILLER ?? FILLER;
+
+  useSomeHook();
+
+  if (anyConditionCanEvenBeFalse) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+      {FILLER ? FILLER : FILLER}
+    </React.Fragment>
+  );
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.expect.md
new file mode 100644
index 00000000000..bfab4aab230
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+const whatever = function useHook() {
+  useState();
+};
+const useHook1 = () => {
+  useState();
+};
+let useHook2 = () => useState();
+useHook2 = () => {
+  useState();
+};
+({
+  useHook: () => {
+    useState();
+  },
+});
+({
+  useHook() {
+    useState();
+  },
+});
+const {
+  useHook3 = () => {
+    useState();
+  },
+} = {};
+({
+  useHook = () => {
+    useState();
+  },
+} = {});
+Namespace.useHook = () => {
+  useState();
+};
+
+```
+
+## Code
+
+```javascript
+// @skip
+// Unsupported input
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+
+const whatever = function useHook() {
+  useState();
+};
+
+const useHook1 = () => {
+  useState();
+};
+
+let useHook2 = () => {
+  return useState();
+};
+useHook2 = () => {
+  useState();
+};
+
+({
+  useHook: () => {
+    useState();
+  },
+});
+({
+  useHook() {
+    useState();
+  },
+});
+const {
+  useHook3 = () => {
+    useState();
+  },
+} = {};
+({
+  useHook = () => {
+    useState();
+  },
+} = {});
+Namespace.useHook = () => {
+  useState();
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.js
new file mode 100644
index 00000000000..b822679960d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e.js
@@ -0,0 +1,40 @@
+// @skip
+// Unsupported input
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+const whatever = function useHook() {
+  useState();
+};
+const useHook1 = () => {
+  useState();
+};
+let useHook2 = () => useState();
+useHook2 = () => {
+  useState();
+};
+({
+  useHook: () => {
+    useState();
+  },
+});
+({
+  useHook() {
+    useState();
+  },
+});
+const {
+  useHook3 = () => {
+    useState();
+  },
+} = {};
+({
+  useHook = () => {
+    useState();
+  },
+} = {});
+Namespace.useHook = () => {
+  useState();
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f.expect.md
new file mode 100644
index 00000000000..7ad96749bf9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// 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} />;
+});
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @skip
+// Unsupported input
+
+// Valid because hooks can be used in anonymous arrow-function arguments
+// to forwardRef.
+const FancyButton = React.forwardRef((props, ref) => {
+  const $ = _c(3);
+  useHook();
+  let t0;
+  if ($[0] !== props || $[1] !== ref) {
+    t0 = <button {...props} ref={ref} />;
+    $[0] = props;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f.js
new file mode 100644
index 00000000000..538de2970a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f.js
@@ -0,0 +1,9 @@
+// @skip
+// Unsupported input
+
+// 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} />;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.expect.md
new file mode 100644
index 00000000000..06190913b5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.expect.md
@@ -0,0 +1,101 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// Currently invalid.
+// These are variations capturing the current heuristic--
+// we only allow hooks in PascalCase or useFoo functions.
+// We *could* make some of these valid. But before doing it,
+// consider specific cases documented above that contain reasoning.
+function a() {
+  useState();
+}
+const whatever = function b() {
+  useState();
+};
+const c = () => {
+  useState();
+};
+let d = () => useState();
+e = () => {
+  useState();
+};
+({
+  f: () => {
+    useState();
+  },
+});
+({
+  g() {
+    useState();
+  },
+});
+const {
+  j = () => {
+    useState();
+  },
+} = {};
+({
+  k = () => {
+    useState();
+  },
+} = {});
+
+```
+
+## Code
+
+```javascript
+// @skip
+// Unsupported input
+
+// Currently invalid.
+// These are variations capturing the current heuristic--
+// we only allow hooks in PascalCase or useFoo functions.
+// We *could* make some of these valid. But before doing it,
+// consider specific cases documented above that contain reasoning.
+function a() {
+  useState();
+}
+
+const whatever = function b() {
+  useState();
+};
+
+const c = () => {
+  useState();
+};
+
+let d = () => {
+  return useState();
+};
+e = () => {
+  useState();
+};
+
+({
+  f: () => {
+    useState();
+  },
+});
+({
+  g() {
+    useState();
+  },
+});
+const {
+  j = () => {
+    useState();
+  },
+} = {};
+({
+  k = () => {
+    useState();
+  },
+} = {});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.js
new file mode 100644
index 00000000000..1dc8f5971c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460.js
@@ -0,0 +1,41 @@
+// @skip
+// Unsupported input
+
+// Currently invalid.
+// These are variations capturing the current heuristic--
+// we only allow hooks in PascalCase or useFoo functions.
+// We *could* make some of these valid. But before doing it,
+// consider specific cases documented above that contain reasoning.
+function a() {
+  useState();
+}
+const whatever = function b() {
+  useState();
+};
+const c = () => {
+  useState();
+};
+let d = () => useState();
+e = () => {
+  useState();
+};
+({
+  f: () => {
+    useState();
+  },
+});
+({
+  g() {
+    useState();
+  },
+});
+const {
+  j = () => {
+    useState();
+  },
+} = {};
+({
+  k = () => {
+    useState();
+  },
+} = {});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.expect.md
new file mode 100644
index 00000000000..57f0fa6e7a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// 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>;
+});
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+todo.error.invalid-rules-of-hooks-368024110a58.ts:8:4
+   6 | const FancyButton = forwardRef(function (props, ref) {
+   7 |   if (props.fancy) {
+>  8 |     useCustomHook();
+     |     ^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   }
+  10 |   return <button ref={ref}>{props.children}</button>;
+  11 | });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.js
new file mode 100644
index 00000000000..f2506d1d6e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.js
@@ -0,0 +1,11 @@
+// @skip
+// Passed but should have failed
+
+// 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>;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md
new file mode 100644
index 00000000000..520a8e4097d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// 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>;
+});
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+todo.error.invalid-rules-of-hooks-8566f9a360e2.ts:8:4
+   6 | const MemoizedButton = memo(function (props) {
+   7 |   if (props.fancy) {
+>  8 |     useCustomHook();
+     |     ^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   }
+  10 |   return <button>{props.children}</button>;
+  11 | });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.js
new file mode 100644
index 00000000000..2c14f8d2e48
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.js
@@ -0,0 +1,11 @@
+// @skip
+// Passed but should have failed
+
+// 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>;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md
new file mode 100644
index 00000000000..acd4ff9395f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    Namespace.useConditionalHook();
+  }
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+todo.error.invalid-rules-of-hooks-a0058f0b446d.ts:8:4
+   6 | function ComponentWithConditionalHook() {
+   7 |   if (cond) {
+>  8 |     Namespace.useConditionalHook();
+     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   }
+  10 | }
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.js
new file mode 100644
index 00000000000..5fb838f90bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.js
@@ -0,0 +1,10 @@
+// @skip
+// Passed but should have failed
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    Namespace.useConditionalHook();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md
new file mode 100644
index 00000000000..8f2783f9690
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// 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>;
+});
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+todo.error.rules-of-hooks-27c18dc8dad2.ts:8:4
+   6 | const FancyButton = React.forwardRef((props, ref) => {
+   7 |   if (props.fancy) {
+>  8 |     useCustomHook();
+     |     ^^^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   }
+  10 |   return <button ref={ref}>{props.children}</button>;
+  11 | });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.js
new file mode 100644
index 00000000000..160f419f68e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.js
@@ -0,0 +1,11 @@
+// @skip
+// Unsupported input
+
+// 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>;
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md
new file mode 100644
index 00000000000..343c51787e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// 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);
+  }
+});
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+todo.error.rules-of-hooks-d0935abedc42.ts:8:4
+   6 | React.unknownFunction((foo, bar) => {
+   7 |   if (foo) {
+>  8 |     useNotAHook(bar);
+     |     ^^^^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+   9 |   }
+  10 | });
+  11 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.js
new file mode 100644
index 00000000000..0c442c7502c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.js
@@ -0,0 +1,10 @@
+// @skip
+// Unsupported input
+
+// 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);
+  }
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md
new file mode 100644
index 00000000000..a9960ad44dd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @skip
+// Unsupported input
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  try {
+    f();
+    useState();
+  } catch {}
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+todo.error.rules-of-hooks-e29c874aa913.ts:9:4
+   7 |   try {
+   8 |     f();
+>  9 |     useState();
+     |     ^^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  10 |   } catch {}
+  11 | }
+  12 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.js
new file mode 100644
index 00000000000..4ac23479231
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.js
@@ -0,0 +1,11 @@
+// @skip
+// Unsupported input
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook() {
+  try {
+    f();
+    useState();
+  } catch {}
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.expect.md
new file mode 100644
index 00000000000..b1f8550330d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// 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();
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// 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();
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.js
new file mode 100644
index 00000000000..e1a391a45f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8.js
@@ -0,0 +1,14 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// 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();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c.expect.md
new file mode 100644
index 00000000000..223984b16da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// This is a false positive (it's valid) that unfortunately
+// we cannot avoid. Prefer to rename it to not start with "use"
+class Foo extends Component {
+  render() {
+    if (cond) {
+      FooStore.useFeatureFlag();
+    }
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// This is a false positive (it's valid) that unfortunately
+// we cannot avoid. Prefer to rename it to not start with "use"
+class Foo extends Component {
+  render() {
+    if (cond) {
+      FooStore.useFeatureFlag();
+    }
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c.js
new file mode 100644
index 00000000000..42172c4a290
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c.js
@@ -0,0 +1,12 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// This is a false positive (it's valid) that unfortunately
+// we cannot avoid. Prefer to rename it to not start with "use"
+class Foo extends Component {
+  render() {
+    if (cond) {
+      FooStore.useFeatureFlag();
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7.expect.md
new file mode 100644
index 00000000000..00cdc933008
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// 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: '/',
+});
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// 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: "/",
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7.js
new file mode 100644
index 00000000000..bf1818fcd05
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7.js
@@ -0,0 +1,15 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+// 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: '/',
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.expect.md
new file mode 100644
index 00000000000..841e00a8de9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  useHook() {
+    useState();
+  }
+});
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  useHook() {
+    useState();
+  }
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.js
new file mode 100644
index 00000000000..b19cc404619
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  useHook() {
+    useState();
+  }
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa.expect.md
new file mode 100644
index 00000000000..2f576bb9614
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// These are neither functions nor hooks.
+function _normalFunctionWithHook() {
+  useHookInsideNormalFunction();
+}
+function _useNotAHook() {
+  useHookInsideNormalFunction();
+}
+
+```
+
+## Code
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// These are neither functions nor hooks.
+function _normalFunctionWithHook() {
+  useHookInsideNormalFunction();
+}
+
+function _useNotAHook() {
+  useHookInsideNormalFunction();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa.js
new file mode 100644
index 00000000000..c14619352d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa.js
@@ -0,0 +1,10 @@
+// @skip
+// Passed but should have failed
+
+// These are neither functions nor hooks.
+function _normalFunctionWithHook() {
+  useHookInsideNormalFunction();
+}
+function _useNotAHook() {
+  useHookInsideNormalFunction();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.expect.md
new file mode 100644
index 00000000000..abc4a6e3115
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class ClassComponentWithHook extends React.Component {
+  render() {
+    React.useState();
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class ClassComponentWithHook extends React.Component {
+  render() {
+    React.useState();
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.js
new file mode 100644
index 00000000000..33772904be8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class ClassComponentWithHook extends React.Component {
+  render() {
+    React.useState();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1.expect.md
new file mode 100644
index 00000000000..ac850326cd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class ClassComponentWithFeatureFlag extends React.Component {
+  render() {
+    if (foo) {
+      useFeatureFlag();
+    }
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class ClassComponentWithFeatureFlag extends React.Component {
+  render() {
+    if (foo) {
+      useFeatureFlag();
+    }
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1.js
new file mode 100644
index 00000000000..ceba22aab5c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1.js
@@ -0,0 +1,10 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class ClassComponentWithFeatureFlag extends React.Component {
+  render() {
+    if (foo) {
+      useFeatureFlag();
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.expect.md
new file mode 100644
index 00000000000..ea4618a3ae5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  h = () => {
+    useState();
+  };
+});
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  h = () => {
+    useState();
+  };
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.js
new file mode 100644
index 00000000000..85becd79c0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  h = () => {
+    useState();
+  };
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0.expect.md
new file mode 100644
index 00000000000..403e200dd61
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// This is invalid because "use"-prefixed functions used in named
+// functions are assumed to be hooks.
+React.unknownFunction(function notAComponent(foo, bar) {
+  useProbablyAHook(bar);
+});
+
+```
+
+## Code
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// This is invalid because "use"-prefixed functions used in named
+// functions are assumed to be hooks.
+React.unknownFunction(function notAComponent(foo, bar) {
+  useProbablyAHook(bar);
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0.js
new file mode 100644
index 00000000000..d293f5d5538
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0.js
@@ -0,0 +1,8 @@
+// @skip
+// Passed but should have failed
+
+// This is invalid because "use"-prefixed functions used in named
+// functions are assumed to be hooks.
+React.unknownFunction(function notAComponent(foo, bar) {
+  useProbablyAHook(bar);
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e.expect.md
new file mode 100644
index 00000000000..b02d4618abf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class C {
+  m() {
+    This.useHook();
+    Super.useHook();
+  }
+}
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class C {
+  m() {
+    This.useHook();
+    Super.useHook();
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e.js
new file mode 100644
index 00000000000..1ffb432d2fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e.js
@@ -0,0 +1,9 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+class C {
+  m() {
+    This.useHook();
+    Super.useHook();
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676.expect.md
new file mode 100644
index 00000000000..d9eaea70048
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// Currently invalid because it violates the convention and removes the "taint"
+// from a hook. We *could* make it valid to avoid some false positives but let's
+// ensure that we don't break the "renderItem" and "normalFunctionWithConditionalHook"
+// cases which must remain invalid.
+function normalFunctionWithHook() {
+  useHookInsideNormalFunction();
+}
+
+```
+
+## Code
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// Currently invalid because it violates the convention and removes the "taint"
+// from a hook. We *could* make it valid to avoid some false positives but let's
+// ensure that we don't break the "renderItem" and "normalFunctionWithConditionalHook"
+// cases which must remain invalid.
+function normalFunctionWithHook() {
+  useHookInsideNormalFunction();
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676.js
new file mode 100644
index 00000000000..20433257b91
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676.js
@@ -0,0 +1,10 @@
+// @skip
+// Passed but should have failed
+
+// Currently invalid because it violates the convention and removes the "taint"
+// from a hook. We *could* make it valid to avoid some false positives but let's
+// ensure that we don't break the "renderItem" and "normalFunctionWithConditionalHook"
+// cases which must remain invalid.
+function normalFunctionWithHook() {
+  useHookInsideNormalFunction();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.expect.md
new file mode 100644
index 00000000000..6df2619e7c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  i() {
+    useState();
+  }
+});
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  i() {
+    useState();
+  }
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.js
new file mode 100644
index 00000000000..40f21937a57
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  i() {
+    useState();
+  }
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.expect.md
new file mode 100644
index 00000000000..44874e70dd0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @skip
+// Passed but should have failed
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function renderItem() {
+  useState();
+}
+
+function List(props) {
+  return props.items.map(renderItem);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @skip
+// Passed but should have failed
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function renderItem() {
+  useState();
+}
+
+function List(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map(renderItem);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.js
new file mode 100644
index 00000000000..49994907205
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8.js
@@ -0,0 +1,12 @@
+// @skip
+// Passed but should have failed
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function renderItem() {
+  useState();
+}
+
+function List(props) {
+  return props.items.map(renderItem);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.expect.md
new file mode 100644
index 00000000000..5f826b97097
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  useHook = () => {
+    useState();
+  };
+});
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  useHook = () => {
+    useState();
+  };
+});
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.js
new file mode 100644
index 00000000000..adf9e800023
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3.js
@@ -0,0 +1,8 @@
+// @expectNothingCompiled @skip
+// Passed but should have failed
+
+(class {
+  useHook = () => {
+    useState();
+  };
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-f6f37b63b2d4 b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-f6f37b63b2d4
new file mode 100644
index 00000000000..3fdc56a900a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.invalid.invalid-rules-of-hooks-f6f37b63b2d4
@@ -0,0 +1,8 @@
+// @skip
+// Passed but should have failed
+
+Hook.useState();
+Hook._useState();
+Hook.use42();
+Hook.useHook();
+Hook.use_hook();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare-maybe-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare-maybe-frozen.expect.md
new file mode 100644
index 00000000000..1201a9a7374
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare-maybe-frozen.expect.md
@@ -0,0 +1,129 @@
+
+## Input
+
+```javascript
+// note: comments are for the ideal scopes, not what is currently
+// emitted
+function foo(props) {
+  // scope 0: deps=[props.a] decl=[x] reassign=none
+  let x = [];
+  x.push(props.a);
+
+  // scope 1: deps=[x] decl=[header] reassign=none
+  const header = props.showHeader ? <div>{x}</div> : null;
+
+  // scope 2:
+  // deps=[x, props.b, props.c]
+  // decl=none
+  // reassign=[x]
+  const y = [x]; // y depends on the earlier x
+  x = []; // x reassigned
+  y.push(props.b); // interleaved mutation of x/y
+  x.push(props.c); // interleaved mutation
+
+  // scope 3 ...
+  const content = (
+    <div>
+      {x}
+      {y}
+    </div>
+  );
+
+  // scope 4 ...
+  return (
+    <>
+      {header}
+      {content}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // note: comments are for the ideal scopes, not what is currently
+// emitted
+function foo(props) {
+  const $ = _c(16);
+  let x;
+  if ($[0] !== props.a) {
+    x = [];
+    x.push(props.a);
+    $[0] = props.a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== props.showHeader || $[3] !== x) {
+    t0 = props.showHeader ? <div>{x}</div> : null;
+    $[2] = props.showHeader;
+    $[3] = x;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const header = t0;
+  let y;
+  if ($[5] !== props.b || $[6] !== props.c || $[7] !== x) {
+    y = [x];
+    x = [];
+    y.push(props.b);
+    x.push(props.c);
+    $[5] = props.b;
+    $[6] = props.c;
+    $[7] = x;
+    $[8] = y;
+    $[9] = x;
+  } else {
+    y = $[8];
+    x = $[9];
+  }
+  let t1;
+  if ($[10] !== x || $[11] !== y) {
+    t1 = (
+      <div>
+        {x}
+        {y}
+      </div>
+    );
+    $[10] = x;
+    $[11] = y;
+    $[12] = t1;
+  } else {
+    t1 = $[12];
+  }
+  const content = t1;
+  let t2;
+  if ($[13] !== content || $[14] !== header) {
+    t2 = (
+      <>
+        {header}
+        {content}
+      </>
+    );
+    $[13] = content;
+    $[14] = header;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare-maybe-frozen.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare-maybe-frozen.js
new file mode 100644
index 00000000000..39fa206a33b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare-maybe-frozen.js
@@ -0,0 +1,41 @@
+// note: comments are for the ideal scopes, not what is currently
+// emitted
+function foo(props) {
+  // scope 0: deps=[props.a] decl=[x] reassign=none
+  let x = [];
+  x.push(props.a);
+
+  // scope 1: deps=[x] decl=[header] reassign=none
+  const header = props.showHeader ? <div>{x}</div> : null;
+
+  // scope 2:
+  // deps=[x, props.b, props.c]
+  // decl=none
+  // reassign=[x]
+  const y = [x]; // y depends on the earlier x
+  x = []; // x reassigned
+  y.push(props.b); // interleaved mutation of x/y
+  x.push(props.c); // interleaved mutation
+
+  // scope 3 ...
+  const content = (
+    <div>
+      {x}
+      {y}
+    </div>
+  );
+
+  // scope 4 ...
+  return (
+    <>
+      {header}
+      {content}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare.expect.md
new file mode 100644
index 00000000000..cf551aa96ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare.expect.md
@@ -0,0 +1,124 @@
+
+## Input
+
+```javascript
+// note: comments are for the ideal scopes, not what is currently
+// emitted
+function foo(props) {
+  // scope 0: deps=[props.a] decl=[x] reassign=none
+  let x = [];
+  x.push(props.a);
+
+  // scope 1: deps=[x] decl=[header] reassign=none
+  const header = <div>{x}</div>;
+
+  // scope 2:
+  // deps=[x, props.b, props.c]
+  // decl=none
+  // reassign=[x]
+  const y = [x]; // y depends on the earlier x
+  x = []; // x reassigned
+  y.push(props.b); // interleaved mutation of x/y
+  x.push(props.c); // interleaved mutation
+
+  // scope 3 ...
+  const content = (
+    <div>
+      {x}
+      {y}
+    </div>
+  );
+
+  // scope 4 ...
+  return (
+    <>
+      {header}
+      {content}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // note: comments are for the ideal scopes, not what is currently
+// emitted
+function foo(props) {
+  const $ = _c(14);
+  let t0;
+  let x;
+  if ($[0] !== props.a) {
+    x = [];
+    x.push(props.a);
+    t0 = <div>{x}</div>;
+    $[0] = props.a;
+    $[1] = t0;
+    $[2] = x;
+  } else {
+    t0 = $[1];
+    x = $[2];
+  }
+  const header = t0;
+  let y;
+  if ($[3] !== props.b || $[4] !== props.c || $[5] !== x) {
+    y = [x];
+    x = [];
+    y.push(props.b);
+    x.push(props.c);
+    $[3] = props.b;
+    $[4] = props.c;
+    $[5] = x;
+    $[6] = y;
+    $[7] = x;
+  } else {
+    y = $[6];
+    x = $[7];
+  }
+  let t1;
+  if ($[8] !== x || $[9] !== y) {
+    t1 = (
+      <div>
+        {x}
+        {y}
+      </div>
+    );
+    $[8] = x;
+    $[9] = y;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const content = t1;
+  let t2;
+  if ($[11] !== content || $[12] !== header) {
+    t2 = (
+      <>
+        {header}
+        {content}
+      </>
+    );
+    $[11] = content;
+    $[12] = header;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare.js
new file mode 100644
index 00000000000..582afef3990
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/same-variable-as-dep-and-redeclare.js
@@ -0,0 +1,41 @@
+// note: comments are for the ideal scopes, not what is currently
+// emitted
+function foo(props) {
+  // scope 0: deps=[props.a] decl=[x] reassign=none
+  let x = [];
+  x.push(props.a);
+
+  // scope 1: deps=[x] decl=[header] reassign=none
+  const header = <div>{x}</div>;
+
+  // scope 2:
+  // deps=[x, props.b, props.c]
+  // decl=none
+  // reassign=[x]
+  const y = [x]; // y depends on the earlier x
+  x = []; // x reassigned
+  y.push(props.b); // interleaved mutation of x/y
+  x.push(props.c); // interleaved mutation
+
+  // scope 3 ...
+  const content = (
+    <div>
+      {x}
+      {y}
+    </div>
+  );
+
+  // scope 4 ...
+  return (
+    <>
+      {header}
+      {content}
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/script-source-type.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/script-source-type.expect.md
new file mode 100644
index 00000000000..891a0fb0dde
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/script-source-type.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @script
+const React = require('react');
+
+function Component(props) {
+  return <div>{props.name}</div>;
+}
+
+// To work with snap evaluator
+exports = {
+  FIXTURE_ENTRYPOINT: {
+    fn: Component,
+    params: [{name: 'React Compiler'}],
+  },
+};
+
+```
+
+## Code
+
+```javascript
+const { c: _c } = require("react/compiler-runtime"); // @script
+const React = require("react");
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = <div>{props.name}</div>;
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+// To work with snap evaluator
+exports = {
+  FIXTURE_ENTRYPOINT: {
+    fn: Component,
+    params: [{ name: "React Compiler" }],
+  },
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>React Compiler</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/script-source-type.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/script-source-type.js
new file mode 100644
index 00000000000..604f0d96187
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/script-source-type.js
@@ -0,0 +1,14 @@
+// @script
+const React = require('react');
+
+function Component(props) {
+  return <div>{props.name}</div>;
+}
+
+// To work with snap evaluator
+exports = {
+  FIXTURE_ENTRYPOINT: {
+    fn: Component,
+    params: [{name: 'React Compiler'}],
+  },
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequence-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequence-expression.expect.md
new file mode 100644
index 00000000000..56b46d24bc0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequence-expression.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function sequence(props) {
+  let x = (null, Math.max(1, 2), foo());
+  while ((foo(), true)) {
+    x = (foo(), 2);
+  }
+  return x;
+}
+
+function foo() {}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function sequence(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (Math.max(1, 2), foo());
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let x = t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    while ((foo(), true)) {
+      x = (foo(), 2);
+    }
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+function foo() {}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequence-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequence-expression.js
new file mode 100644
index 00000000000..fd14490f007
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequence-expression.js
@@ -0,0 +1,9 @@
+function sequence(props) {
+  let x = (null, Math.max(1, 2), foo());
+  while ((foo(), true)) {
+    x = (foo(), 2);
+  }
+  return x;
+}
+
+function foo() {}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.expect.md
new file mode 100644
index 00000000000..4595caec0d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.expect.md
@@ -0,0 +1,128 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(statusName) {
+  const {status, text} = foo(statusName);
+  const {bg, color} = getStyles(status);
+  return (
+    <div className={identity(bg)}>
+      <span className={identity(color)}>{[text]}</span>
+    </div>
+  );
+}
+
+function foo(name) {
+  return {
+    status: `<status>`,
+    text: `${name}!`,
+  };
+}
+
+function getStyles(status) {
+  return {
+    bg: '#eee8d5',
+    color: '#657b83',
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['Mofei'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(statusName) {
+  const $ = _c(12);
+  let t0;
+  let t1;
+  let text;
+  if ($[0] !== statusName) {
+    const { status, text: t2 } = foo(statusName);
+    text = t2;
+    const { bg, color } = getStyles(status);
+    t1 = identity(bg);
+    t0 = identity(color);
+    $[0] = statusName;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = text;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+    text = $[3];
+  }
+  let t2;
+  if ($[4] !== text) {
+    t2 = [text];
+    $[4] = text;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== t0 || $[7] !== t2) {
+    t3 = <span className={t0}>{t2}</span>;
+    $[6] = t0;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== t1 || $[10] !== t3) {
+    t4 = <div className={t1}>{t3}</div>;
+    $[9] = t1;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+}
+
+function foo(name) {
+  const $ = _c(2);
+
+  const t0 = `${name}!`;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = { status: "<status>", text: t0 };
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function getStyles(status) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { bg: "#eee8d5", color: "#657b83" };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["Mofei"],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="#eee8d5"><span class="#657b83">Mofei!</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.js
new file mode 100644
index 00000000000..ff705196f22
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-assignment-to-scope-declarations.js
@@ -0,0 +1,30 @@
+import {identity} from 'shared-runtime';
+
+function Component(statusName) {
+  const {status, text} = foo(statusName);
+  const {bg, color} = getStyles(status);
+  return (
+    <div className={identity(bg)}>
+      <span className={identity(color)}>{[text]}</span>
+    </div>
+  );
+}
+
+function foo(name) {
+  return {
+    status: `<status>`,
+    text: `${name}!`,
+  };
+}
+
+function getStyles(status) {
+  return {
+    bg: '#eee8d5',
+    color: '#657b83',
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['Mofei'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.expect.md
new file mode 100644
index 00000000000..0f279891d33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.expect.md
@@ -0,0 +1,132 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(statusName) {
+  // status is local, text is a scope declaration
+  const {status, text} = foo(statusName);
+  // color is local, font is a scope declaration
+  const {color, font} = getStyles(status);
+  // bg is a declaration
+  const bg = identity(color);
+  return (
+    <div className={bg}>
+      <span className={font}>{[text]}</span>
+    </div>
+  );
+}
+function foo(name) {
+  return {
+    status: `<status>`,
+    text: `${name}!`,
+  };
+}
+
+function getStyles(status) {
+  return {
+    font: 'comic-sans',
+    color: '#657b83',
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['Sathya'],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(statusName) {
+  const $ = _c(12);
+  let font;
+  let t0;
+  let text;
+  if ($[0] !== statusName) {
+    const { status, text: t1 } = foo(statusName);
+    text = t1;
+    const { color, font: t2 } = getStyles(status);
+    font = t2;
+    t0 = identity(color);
+    $[0] = statusName;
+    $[1] = font;
+    $[2] = t0;
+    $[3] = text;
+  } else {
+    font = $[1];
+    t0 = $[2];
+    text = $[3];
+  }
+  const bg = t0;
+  let t1;
+  if ($[4] !== text) {
+    t1 = [text];
+    $[4] = text;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== font || $[7] !== t1) {
+    t2 = <span className={font}>{t1}</span>;
+    $[6] = font;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== bg || $[10] !== t2) {
+    t3 = <div className={bg}>{t2}</div>;
+    $[9] = bg;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+}
+
+function foo(name) {
+  const $ = _c(2);
+
+  const t0 = `${name}!`;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = { status: "<status>", text: t0 };
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function getStyles(status) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { font: "comic-sans", color: "#657b83" };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["Sathya"],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="#657b83"><span class="comic-sans">Sathya!</span></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.js
new file mode 100644
index 00000000000..80ebefaef99
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequential-destructuring-both-mixed-local-and-scope-declaration.js
@@ -0,0 +1,33 @@
+import {identity} from 'shared-runtime';
+
+function Component(statusName) {
+  // status is local, text is a scope declaration
+  const {status, text} = foo(statusName);
+  // color is local, font is a scope declaration
+  const {color, font} = getStyles(status);
+  // bg is a declaration
+  const bg = identity(color);
+  return (
+    <div className={bg}>
+      <span className={font}>{[text]}</span>
+    </div>
+  );
+}
+function foo(name) {
+  return {
+    status: `<status>`,
+    text: `${name}!`,
+  };
+}
+
+function getStyles(status) {
+  return {
+    font: 'comic-sans',
+    color: '#657b83',
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['Sathya'],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequentially-constant-progagatable-if-test-conditions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequentially-constant-progagatable-if-test-conditions.expect.md
new file mode 100644
index 00000000000..f4915cc3486
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequentially-constant-progagatable-if-test-conditions.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+function Component() {
+  let a = 1;
+
+  let b;
+  if (a === 1) {
+    b = true;
+  } else {
+    b = false;
+  }
+
+  let c;
+  if (b) {
+    c = 'hello';
+  } else {
+    c = null;
+  }
+
+  let d;
+  if (c === 'hello') {
+    d = 42.0;
+  } else {
+    d = 42.001;
+  }
+
+  let e;
+  if (d === 42.0) {
+    e = 'ok';
+  } else {
+    e = 'nope';
+  }
+
+  // should constant-propagate to "ok"
+  return e;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function Component() {
+  return "ok";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "ok"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequentially-constant-progagatable-if-test-conditions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequentially-constant-progagatable-if-test-conditions.js
new file mode 100644
index 00000000000..ab08df20103
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/sequentially-constant-progagatable-if-test-conditions.js
@@ -0,0 +1,40 @@
+function Component() {
+  let a = 1;
+
+  let b;
+  if (a === 1) {
+    b = true;
+  } else {
+    b = false;
+  }
+
+  let c;
+  if (b) {
+    c = 'hello';
+  } else {
+    c = null;
+  }
+
+  let d;
+  if (c === 'hello') {
+    d = 42.0;
+  } else {
+    d = 42.001;
+  }
+
+  let e;
+  if (d === 42.0) {
+    e = 'ok';
+  } else {
+    e = 'nope';
+  }
+
+  // should constant-propagate to "ok"
+  return e;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/shapes-object-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/shapes-object-key.expect.md
new file mode 100644
index 00000000000..e491eb6c69d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/shapes-object-key.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({a, b}) {
+  const obj = {a};
+  arrayPush(Object.keys(obj), b);
+  return obj;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 3}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(2);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const obj = t1;
+  arrayPush(Object.keys(obj), b);
+  return obj;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ a: 2, b: 3 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/shapes-object-key.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/shapes-object-key.ts
new file mode 100644
index 00000000000..9dbaac79c6b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/shapes-object-key.ts
@@ -0,0 +1,11 @@
+import {arrayPush} from 'shared-runtime';
+
+function useFoo({a, b}) {
+  const obj = {a};
+  arrayPush(Object.keys(obj), b);
+  return obj;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{a: 2, b: 3}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-annotation-mode.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-annotation-mode.expect.md
new file mode 100644
index 00000000000..bed1b9e6015
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-annotation-mode.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @gating @panicThreshold:"none" @compilationMode:"annotation"
+let someGlobal = 'joe';
+
+function Component() {
+  'use forget';
+  someGlobal = 'wat';
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @gating @panicThreshold:"none" @compilationMode:"annotation"
+let someGlobal = "joe";
+
+function Component() {
+  "use forget";
+  someGlobal = "wat";
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-annotation-mode.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-annotation-mode.js
new file mode 100644
index 00000000000..8d0264cd17b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-annotation-mode.js
@@ -0,0 +1,13 @@
+// @gating @panicThreshold:"none" @compilationMode:"annotation"
+let someGlobal = 'joe';
+
+function Component() {
+  'use forget';
+  someGlobal = 'wat';
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-infer-mode.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-infer-mode.expect.md
new file mode 100644
index 00000000000..36b91bcf2bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-infer-mode.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @gating @panicThreshold:"none" @compilationMode:"infer"
+let someGlobal = 'joe';
+
+function Component() {
+  someGlobal = 'wat';
+  return <div>{someGlobal}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @gating @panicThreshold:"none" @compilationMode:"infer"
+let someGlobal = "joe";
+
+function Component() {
+  someGlobal = "wat";
+  return <div>{someGlobal}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>wat</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-infer-mode.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-infer-mode.js
new file mode 100644
index 00000000000..1de4cb44903
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/should-bailout-without-compilation-infer-mode.js
@@ -0,0 +1,12 @@
+// @gating @panicThreshold:"none" @compilationMode:"infer"
+let someGlobal = 'joe';
+
+function Component() {
+  someGlobal = 'wat';
+  return <div>{someGlobal}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md
new file mode 100644
index 00000000000..8e4e6a61e62
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function mutate() {}
+function foo() {
+  let a = {};
+  let b = {};
+  let c = {};
+  a = b;
+  b = c;
+  c = a;
+  mutate(a, b);
+  return c;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function mutate() {}
+function foo() {
+  const $ = _c(2);
+  let a;
+  let c;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let b = {};
+    c = {};
+    a = b;
+    b = c;
+    c = a;
+    mutate(a, b);
+    $[0] = c;
+    $[1] = a;
+  } else {
+    c = $[0];
+    a = $[1];
+  }
+  return c;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.js
new file mode 100644
index 00000000000..f57584af694
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.js
@@ -0,0 +1,11 @@
+function mutate() {}
+function foo() {
+  let a = {};
+  let b = {};
+  let c = {};
+  a = b;
+  b = c;
+  c = a;
+  mutate(a, b);
+  return c;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-function-1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-function-1.expect.md
new file mode 100644
index 00000000000..586b610399e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-function-1.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = function (a) {
+    a.foo();
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function component() {
+  const x = _temp;
+  return x;
+}
+function _temp(a) {
+  a.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=1 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-function-1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-function-1.js
new file mode 100644
index 00000000000..e110280973d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-function-1.js
@@ -0,0 +1,12 @@
+function component() {
+  let x = function (a) {
+    a.foo();
+  };
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-scope.expect.md
new file mode 100644
index 00000000000..7a265b2943e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-scope.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function foo(a) {
+  const x = [a.b];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== a.b) {
+    t0 = [a.b];
+    $[0] = a.b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-scope.js
new file mode 100644
index 00000000000..e92437b0a25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-scope.js
@@ -0,0 +1,10 @@
+function foo(a) {
+  const x = [a.b];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple.expect.md
new file mode 100644
index 00000000000..3feb58dadde
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function foo(x, y) {
+  const $ = _c(4);
+  if (x) {
+    let t0;
+    if ($[0] !== y) {
+      t0 = foo(false, y);
+      $[0] = y;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+
+  const t0 = y * 10;
+  let t1;
+  if ($[2] !== t0) {
+    t1 = [t0];
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple.js
new file mode 100644
index 00000000000..e8049531347
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple.js
@@ -0,0 +1,6 @@
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.expect.md
new file mode 100644
index 00000000000..accf3475a71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled
+import {c as useMemoCache} from 'react/compiler-runtime';
+
+function Component(props) {
+  const $ = useMemoCache();
+  let x;
+  if ($[0] === undefined) {
+    x = [props.value];
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled
+import { c as useMemoCache } from "react/compiler-runtime";
+
+function Component(props) {
+  const $ = useMemoCache();
+  let x;
+  if ($[0] === undefined) {
+    x = [props.value];
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.js
new file mode 100644
index 00000000000..2ef71aca582
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/skip-useMemoCache.js
@@ -0,0 +1,19 @@
+// @expectNothingCompiled
+import {c as useMemoCache} from 'react/compiler-runtime';
+
+function Component(props) {
+  const $ = useMemoCache();
+  let x;
+  if ($[0] === undefined) {
+    x = [props.value];
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-arrayexpression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-arrayexpression.expect.md
new file mode 100644
index 00000000000..05dbdcbc049
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-arrayexpression.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = 1;
+  const b = 2;
+  const x = [a, b];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [1, 2];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-arrayexpression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-arrayexpression.js
new file mode 100644
index 00000000000..80b371d7f1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-arrayexpression.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const a = 1;
+  const b = 2;
+  const x = [a, b];
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx-2.expect.md
new file mode 100644
index 00000000000..fa78e6d7b03
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx-2.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @Pass runMutableRangeAnalysis
+function foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  foo(a, b);
+  if (foo()) {
+    let _ = <div a={a} />;
+  }
+  foo(a, b);
+  return <div a={a} b={b} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @Pass runMutableRangeAnalysis
+function foo() {}
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = [];
+    const b = {};
+    foo(a, b);
+    if (foo()) {
+    }
+    foo(a, b);
+    t0 = <div a={a} b={b} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx-2.js
new file mode 100644
index 00000000000..6d1ad38ab34
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx-2.js
@@ -0,0 +1,13 @@
+// @Pass runMutableRangeAnalysis
+function foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  foo(a, b);
+  if (foo()) {
+    let _ = <div a={a} />;
+  }
+  foo(a, b);
+  return <div a={a} b={b} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx.expect.md
new file mode 100644
index 00000000000..c8fa82b4469
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  foo(a, b);
+  let _ = <div a={a} />;
+  foo(a, b);
+  return <div a={a} b={b} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {}
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = [];
+    const b = {};
+    foo(a, b);
+    foo(a, b);
+    t0 = <div a={a} b={b} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx.js
new file mode 100644
index 00000000000..3e95b19d453
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-call-jsx.js
@@ -0,0 +1,10 @@
+function foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  foo(a, b);
+  let _ = <div a={a} />;
+  foo(a, b);
+  return <div a={a} b={b} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md
new file mode 100644
index 00000000000..c39b85e5ba6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md
@@ -0,0 +1,93 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  const values = [];
+  const y = props.a || props.b;
+  values.push(y);
+  if (props.c) {
+    x = 1;
+  }
+  values.push(x);
+  if (props.d) {
+    x = 2;
+  }
+  values.push(x);
+  return values;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1, c: true, d: true}],
+  sequentialRenders: [
+    {a: 0, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: false, d: true},
+    {a: 4, b: 1, c: false, d: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(7);
+  let x = 0;
+  let values;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.c ||
+    $[3] !== props.d ||
+    $[4] !== x
+  ) {
+    values = [];
+    const y = props.a || props.b;
+    values.push(y);
+    if (props.c) {
+      x = 1;
+    }
+
+    values.push(x);
+    if (props.d) {
+      x = 2;
+    }
+
+    values.push(x);
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.c;
+    $[3] = props.d;
+    $[4] = x;
+    $[5] = values;
+    $[6] = x;
+  } else {
+    values = $[5];
+    x = $[6];
+  }
+  return values;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 1, c: true, d: true }],
+  sequentialRenders: [
+    { a: 0, b: 1, c: true, d: true },
+    { a: 4, b: 1, c: true, d: true },
+    { a: 4, b: 1, c: false, d: true },
+    { a: 4, b: 1, c: false, d: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,1,2]
+[4,1,2]
+[4,0,2]
+[4,0,0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.js
new file mode 100644
index 00000000000..8d5a4e2ee91
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.js
@@ -0,0 +1,26 @@
+function Component(props) {
+  let x = 0;
+  const values = [];
+  const y = props.a || props.b;
+  values.push(y);
+  if (props.c) {
+    x = 1;
+  }
+  values.push(x);
+  if (props.d) {
+    x = 2;
+  }
+  values.push(x);
+  return values;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 1, c: true, d: true}],
+  sequentialRenders: [
+    {a: 0, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: true, d: true},
+    {a: 4, b: 1, c: false, d: true},
+    {a: 4, b: 1, c: false, d: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-multiple-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-multiple-if.expect.md
new file mode 100644
index 00000000000..02bf76bb765
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-multiple-if.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  let y = 2;
+  if (y === 2) {
+    x = 3;
+  }
+
+  if (y === 3) {
+    x = 5;
+  }
+  y = x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-multiple-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-multiple-if.js
new file mode 100644
index 00000000000..a6e92cc03b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-multiple-if.js
@@ -0,0 +1,18 @@
+function foo() {
+  let x = 1;
+  let y = 2;
+  if (y === 2) {
+    x = 3;
+  }
+
+  if (y === 3) {
+    x = 5;
+  }
+  y = x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-single-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-single-if.expect.md
new file mode 100644
index 00000000000..5d99b6c1f0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-single-if.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  let y = 2;
+  if (y === 2) {
+    x = 3;
+  }
+
+  y = x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-single-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-single-if.js
new file mode 100644
index 00000000000..b7d5d54b17c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-complex-single-if.js
@@ -0,0 +1,15 @@
+function foo() {
+  let x = 1;
+  let y = 2;
+  if (y === 2) {
+    x = 3;
+  }
+
+  y = x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-of.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-of.expect.md
new file mode 100644
index 00000000000..d22df11c5d8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-of.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function foo(cond) {
+  let items = [];
+  for (const item of items) {
+    let y = 0;
+    if (cond) {
+      y = 1;
+    }
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(cond) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const items = t0;
+  for (const item of items) {
+    if (cond) {
+    }
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-of.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-of.js
new file mode 100644
index 00000000000..82f7b14fe61
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-of.js
@@ -0,0 +1,16 @@
+function foo(cond) {
+  let items = [];
+  for (const item of items) {
+    let y = 0;
+    if (cond) {
+      y = 1;
+    }
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-trivial-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-trivial-update.expect.md
new file mode 100644
index 00000000000..3707b290a68
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-trivial-update.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  for (let i = 0; i < 10; /* update is intentally a single identifier */ i) {
+    x += 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  let x = 1;
+  for (const i = 0; true; 0) {
+    x = x + 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-trivial-update.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-trivial-update.js
new file mode 100644
index 00000000000..fc77fbe5d58
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for-trivial-update.js
@@ -0,0 +1,13 @@
+function foo() {
+  let x = 1;
+  for (let i = 0; i < 10; /* update is intentally a single identifier */ i) {
+    x += 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for.expect.md
new file mode 100644
index 00000000000..de1104946cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  for (let i = 0; i < 10; i++) {
+    x += 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  let x = 1;
+  for (let i = 0; i < 10; i++) {
+    x = x + 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 11
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for.js
new file mode 100644
index 00000000000..dcc6165510b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-for.js
@@ -0,0 +1,13 @@
+function foo() {
+  let x = 1;
+  for (let i = 0; i < 10; i++) {
+    x += 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-if-else.expect.md
new file mode 100644
index 00000000000..73eb942715c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-if-else.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  let y = 2;
+
+  if (y) {
+    let z = x + y;
+  } else {
+    let z = x;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-if-else.js
new file mode 100644
index 00000000000..6ccb6fd24db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-if-else.js
@@ -0,0 +1,16 @@
+function foo() {
+  let x = 1;
+  let y = 2;
+
+  if (y) {
+    let z = x + y;
+  } else {
+    let z = x;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md
new file mode 100644
index 00000000000..1f83da465ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  let y;
+  if (props.p0) {
+    x.push(props.p1);
+    y = x;
+  }
+  return (
+    <Stringify>
+      {x}
+      {y}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{p0: false, p1: 2}],
+  sequentialRenders: [
+    {p0: false, p1: 2},
+    {p0: false, p1: 2},
+    {p0: true, p1: 2},
+    {p0: true, p1: 3},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1) {
+    const x = [];
+    let y;
+    if (props.p0) {
+      x.push(props.p1);
+      y = x;
+    }
+    t0 = (
+      <Stringify>
+        {x}
+        {y}
+      </Stringify>
+    );
+    $[0] = props.p0;
+    $[1] = props.p1;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ p0: false, p1: 2 }],
+  sequentialRenders: [
+    { p0: false, p1: 2 },
+    { p0: false, p1: 2 },
+    { p0: true, p1: 2 },
+    { p0: true, p1: 3 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"children":[[],null]}</div>
+<div>{"children":[[],null]}</div>
+<div>{"children":[[2],"[[ cyclic ref *2 ]]"]}</div>
+<div>{"children":[[3],"[[ cyclic ref *2 ]]"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.js
new file mode 100644
index 00000000000..54d48922579
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.js
@@ -0,0 +1,27 @@
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  let x = [];
+  let y;
+  if (props.p0) {
+    x.push(props.p1);
+    y = x;
+  }
+  return (
+    <Stringify>
+      {x}
+      {y}
+    </Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{p0: false, p1: 2}],
+  sequentialRenders: [
+    {p0: false, p1: 2},
+    {p0: false, p1: 2},
+    {p0: true, p1: 2},
+    {p0: true, p1: 3},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-multiple-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-multiple-phis.expect.md
new file mode 100644
index 00000000000..e606507c9c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-multiple-phis.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = 0;
+  if (true) {
+    if (true) {
+      x = a;
+    } else {
+      x = b;
+    }
+    x;
+  } else {
+    if (true) {
+      x = c;
+    } else {
+      x = d;
+    }
+    x;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c, d) {
+  let x;
+
+  x = a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-multiple-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-multiple-phis.js
new file mode 100644
index 00000000000..26fd48e9714
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-multiple-phis.js
@@ -0,0 +1,25 @@
+function foo(a, b, c, d) {
+  let x = 0;
+  if (true) {
+    if (true) {
+      x = a;
+    } else {
+      x = b;
+    }
+    x;
+  } else {
+    if (true) {
+      x = c;
+    } else {
+      x = d;
+    }
+    x;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-loops-no-reassign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-loops-no-reassign.expect.md
new file mode 100644
index 00000000000..0cfbecf74a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-loops-no-reassign.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @xonly
+function foo(a, b, c) {
+  let x = 0;
+  while (a) {
+    while (b) {
+      while (c) {
+        x + 1;
+      }
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @xonly
+function foo(a, b, c) {
+  while (a) {
+    while (b) {
+      while (c) {}
+    }
+  }
+  return 0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-loops-no-reassign.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-loops-no-reassign.js
new file mode 100644
index 00000000000..5927e8202b5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-loops-no-reassign.js
@@ -0,0 +1,18 @@
+// @xonly
+function foo(a, b, c) {
+  let x = 0;
+  while (a) {
+    while (b) {
+      while (c) {
+        x + 1;
+      }
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-phi.expect.md
new file mode 100644
index 00000000000..1c12a4842fc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-phi.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = a;
+  if (b) {
+    if (c) {
+      x = c;
+    }
+    // TODO: move the return to the end of the function
+    return x;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  let x = a;
+  if (b) {
+    if (c) {
+      x = c;
+    }
+    return x;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-phi.js
new file mode 100644
index 00000000000..0d2778f9980
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-phi.js
@@ -0,0 +1,16 @@
+function foo(a, b, c) {
+  let x = a;
+  if (b) {
+    if (c) {
+      x = c;
+    }
+    // TODO: move the return to the end of the function
+    return x;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-reassignment.expect.md
new file mode 100644
index 00000000000..cad332654f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-reassignment.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d, e) {
+  let x = null;
+  if (a) {
+    x = b;
+  } else {
+    if (c) {
+      x = d;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c, d, e) {
+  let x = null;
+  if (a) {
+    x = b;
+  } else {
+    if (c) {
+      x = d;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-reassignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-reassignment.js
new file mode 100644
index 00000000000..fd4d0df7e4b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-nested-partial-reassignment.js
@@ -0,0 +1,17 @@
+function foo(a, b, c, d, e) {
+  let x = null;
+  if (a) {
+    x = b;
+  } else {
+    if (c) {
+      x = d;
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-newexpression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-newexpression.expect.md
new file mode 100644
index 00000000000..d74d63082e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-newexpression.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  let c = new Foo(a, b);
+  return c;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {}
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = [];
+    const b = {};
+    t0 = new Foo(a, b);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const c = t0;
+  return c;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-newexpression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-newexpression.js
new file mode 100644
index 00000000000..0f2d6972e8d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-newexpression.js
@@ -0,0 +1,8 @@
+function Foo() {}
+
+function Component(props) {
+  const a = [];
+  const b = {};
+  let c = new Foo(a, b);
+  return c;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-non-empty-initializer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-non-empty-initializer.expect.md
new file mode 100644
index 00000000000..7266c547c23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-non-empty-initializer.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  let x = [];
+  if (a) {
+    x = 1;
+  }
+
+  let y = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a, b) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let x = t0;
+  if (a) {
+    x = 1;
+  }
+
+  const y = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-non-empty-initializer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-non-empty-initializer.js
new file mode 100644
index 00000000000..0de9e798ee7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-non-empty-initializer.js
@@ -0,0 +1,15 @@
+function foo(a, b) {
+  let x = [];
+  if (a) {
+    x = 1;
+  }
+
+  let y = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression-phi.expect.md
new file mode 100644
index 00000000000..c12774a62d2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression-phi.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  let y = 2;
+
+  if (x > 1) {
+    x = 2;
+  } else {
+    y = 3;
+  }
+
+  let t = {x: x, y: y};
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { x: 1, y: 3 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const t = t0;
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":1,"y":3}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression-phi.js
new file mode 100644
index 00000000000..cc69a01ea5f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression-phi.js
@@ -0,0 +1,19 @@
+function foo() {
+  let x = 1;
+  let y = 2;
+
+  if (x > 1) {
+    x = 2;
+  } else {
+    y = 3;
+  }
+
+  let t = {x: x, y: y};
+  return t;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression.expect.md
new file mode 100644
index 00000000000..66261559de1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const a = 1;
+  const b = 2;
+  const x = {a: a, b: b};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { a: 1, b: 2 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression.js
new file mode 100644
index 00000000000..522b5334f29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-objectexpression.js
@@ -0,0 +1,12 @@
+function Component(props) {
+  const a = 1;
+  const b = 2;
+  const x = {a: a, b: b};
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md
new file mode 100644
index 00000000000..7e6f28953c3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function foo(a) {
+  const b = {};
+  const x = b;
+  if (a) {
+    let y = {};
+    x.y = y;
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  mutate(b); // aliases x, y & z
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== a) {
+    const b = {};
+    x = b;
+    if (a) {
+      const y = {};
+      x.y = y;
+    } else {
+      const z = {};
+      x.z = z;
+    }
+
+    mutate(b);
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.js
new file mode 100644
index 00000000000..8c06f8e61b0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.js
@@ -0,0 +1,13 @@
+function foo(a) {
+  const b = {};
+  const x = b;
+  if (a) {
+    let y = {};
+    x.y = y;
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  mutate(b); // aliases x, y & z
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-if.expect.md
new file mode 100644
index 00000000000..a2e2948c436
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-if.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+function foo(a) {
+  const x = {};
+  if (a) {
+    let y = {};
+    x.y = y;
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== a) {
+    x = {};
+    if (a) {
+      let t0;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {};
+        $[2] = t0;
+      } else {
+        t0 = $[2];
+      }
+      const y = t0;
+      x.y = y;
+    } else {
+      let t0;
+      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {};
+        $[3] = t0;
+      } else {
+        t0 = $[3];
+      }
+      const z = t0;
+      x.z = z;
+    }
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-if.js
new file mode 100644
index 00000000000..2ca6c0a3e20
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-if.js
@@ -0,0 +1,17 @@
+function foo(a) {
+  const x = {};
+  if (a) {
+    let y = {};
+    x.y = y;
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md
new file mode 100644
index 00000000000..d303dedec28
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function foo(a) {
+  const x = {};
+  if (a) {
+    let y = {};
+    x.y = y;
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  mutate(x);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a) {
+  const $ = _c(2);
+  let x;
+  if ($[0] !== a) {
+    x = {};
+    if (a) {
+      const y = {};
+      x.y = y;
+    } else {
+      const z = {};
+      x.z = z;
+    }
+
+    mutate(x);
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.js
new file mode 100644
index 00000000000..5b9d993aee4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.js
@@ -0,0 +1,12 @@
+function foo(a) {
+  const x = {};
+  if (a) {
+    let y = {};
+    x.y = y;
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  mutate(x);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-inside-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-inside-if.expect.md
new file mode 100644
index 00000000000..d1e674369ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-inside-if.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function foo(a) {
+  const x = {};
+  if (a) {
+    let y = {};
+    x.y = y;
+    mutate(y); // aliases x & y, but not z
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(a) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== a) {
+    x = {};
+    if (a) {
+      const y = {};
+      x.y = y;
+      mutate(y);
+    } else {
+      let t0;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {};
+        $[2] = t0;
+      } else {
+        t0 = $[2];
+      }
+      const z = t0;
+      x.z = z;
+    }
+    $[0] = a;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-inside-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-inside-if.js
new file mode 100644
index 00000000000..accbea2f51e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-inside-if.js
@@ -0,0 +1,12 @@
+function foo(a) {
+  const x = {};
+  if (a) {
+    let y = {};
+    x.y = y;
+    mutate(y); // aliases x & y, but not z
+  } else {
+    let z = {};
+    x.z = z;
+  }
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md
new file mode 100644
index 00000000000..b9f5516739b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function foo() {
+  const a = {};
+  const x = a;
+
+  const y = {};
+  y.x = x;
+
+  mutate(a); // y & x are aliased to a
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = {};
+    const x = a;
+    y = {};
+    y.x = x;
+
+    mutate(a);
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.js
new file mode 100644
index 00000000000..ef6e62dee0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.js
@@ -0,0 +1,10 @@
+function foo() {
+  const a = {};
+  const x = a;
+
+  const y = {};
+  y.x = x;
+
+  mutate(a); // y & x are aliased to a
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md
new file mode 100644
index 00000000000..a971c4dcf45
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = [];
+  const y = {x: x};
+  y.x.push([]);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    y = { x };
+    y.x.push([]);
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":[[]]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.js
new file mode 100644
index 00000000000..0a8fb0f487a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.js
@@ -0,0 +1,12 @@
+function foo() {
+  const x = [];
+  const y = {x: x};
+  y.x.push([]);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md
new file mode 100644
index 00000000000..3709a298cb6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = [];
+  const y = {};
+  y.x = x;
+  mutate(x);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    y = {};
+    y.x = x;
+    mutate(x);
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.js
new file mode 100644
index 00000000000..e552c1570ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.js
@@ -0,0 +1,7 @@
+function foo() {
+  const x = [];
+  const y = {};
+  y.x = x;
+  mutate(x);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md
new file mode 100644
index 00000000000..f01d01f63bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function foo() {
+  const a = {};
+  const y = a;
+  const x = [];
+
+  y.x = x;
+
+  mutate(a); // y & x are aliased to a
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const a = {};
+    y = a;
+    const x = [];
+
+    y.x = x;
+
+    mutate(a);
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.js
new file mode 100644
index 00000000000..e219836c308
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.js
@@ -0,0 +1,10 @@
+function foo() {
+  const a = {};
+  const y = a;
+  const x = [];
+
+  y.x = x;
+
+  mutate(a); // y & x are aliased to a
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md
new file mode 100644
index 00000000000..46f974ef429
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = [];
+  const y = {};
+  y.x = x;
+  mutate(y);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    y = {};
+    y.x = x;
+    mutate(y);
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.js
new file mode 100644
index 00000000000..4058e82f852
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.js
@@ -0,0 +1,7 @@
+function foo() {
+  const x = [];
+  const y = {};
+  y.x = x;
+  mutate(y);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md
new file mode 100644
index 00000000000..565313fc0d9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = [];
+  const y = {};
+  y.x = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let y;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = [];
+    y = {};
+    y.x = x;
+    $[0] = y;
+  } else {
+    y = $[0];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":[]}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.js
new file mode 100644
index 00000000000..866a3d4f6ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.js
@@ -0,0 +1,12 @@
+function foo() {
+  const x = [];
+  const y = {};
+  y.x = x;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign-in-rval.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign-in-rval.expect.md
new file mode 100644
index 00000000000..1457ad3fa26
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign-in-rval.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// Forget should call the original x (x = foo()) to compute result
+function Component() {
+  let x = foo();
+  let result = x((x = bar()), 5);
+  return [result, x];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // Forget should call the original x (x = foo()) to compute result
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let x = foo();
+    const result = x((x = bar()), 5);
+    t0 = [result, x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign-in-rval.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign-in-rval.js
new file mode 100644
index 00000000000..9126165e598
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign-in-rval.js
@@ -0,0 +1,6 @@
+// Forget should call the original x (x = foo()) to compute result
+function Component() {
+  let x = foo();
+  let result = x((x = bar()), 5);
+  return [result, x];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign.expect.md
new file mode 100644
index 00000000000..27682eed443
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function foo(a, b, c) {
+  let x = 0;
+  x = a;
+  x = b;
+  x = c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c) {
+  let x;
+
+  x = c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign.js
new file mode 100644
index 00000000000..92e747289ac
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-reassign.js
@@ -0,0 +1,13 @@
+function foo(a, b, c) {
+  let x = 0;
+  x = a;
+  x = b;
+  x = c;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md
new file mode 100644
index 00000000000..c6c7489a4e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55,"joe"]
+[55,"joe"]
+[3,"joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.js
new file mode 100644
index 00000000000..4f7e4163e39
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.js
@@ -0,0 +1,19 @@
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.expect.md
new file mode 100644
index 00000000000..693b94d886c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.cond || $[3] !== props.foo) {
+    props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
+    $[2] = props.cond;
+    $[3] = props.foo;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.js
new file mode 100644
index 00000000000..3d2f7f86e48
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.js
@@ -0,0 +1,16 @@
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? (({x} = {x: {}}), ([x] = [[]]), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md
new file mode 100644
index 00000000000..283e55630b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    props.cond ? ((x = []), x.push(props.foo)) : null;
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55,"joe"]
+[55,"joe"]
+[3,"joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.js
new file mode 100644
index 00000000000..7016a5bf07e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.js
@@ -0,0 +1,19 @@
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.expect.md
new file mode 100644
index 00000000000..97cfa052aff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.cond || $[3] !== props.foo) {
+    props.cond ? ((x = []), x.push(props.foo)) : null;
+    $[2] = props.cond;
+    $[3] = props.foo;
+    $[4] = x;
+  } else {
+    x = $[4];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.js
new file mode 100644
index 00000000000..6057fcbb35c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.js
@@ -0,0 +1,16 @@
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond ? ((x = {}), (x = []), x.push(props.foo)) : null;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md
new file mode 100644
index 00000000000..1c4b48cb7c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+import {arrayPush} from 'shared-runtime';
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  arrayPush(x, 4);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { arrayPush } from "shared-runtime";
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar));
+    arrayPush(x, 4);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55,4]
+[55,4]
+[3,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.js
new file mode 100644
index 00000000000..c2829b33e6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.js
@@ -0,0 +1,20 @@
+import {arrayPush} from 'shared-runtime';
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  arrayPush(x, 4);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.expect.md
new file mode 100644
index 00000000000..58723f9fa0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(props) {
+  const $ = _c(6);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if ($[2] !== props.bar || $[3] !== props.cond || $[4] !== props.foo) {
+    props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar));
+    $[2] = props.bar;
+    $[3] = props.cond;
+    $[4] = props.foo;
+    $[5] = x;
+  } else {
+    x = $[5];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ cond: false, foo: 2, bar: 55 }],
+  sequentialRenders: [
+    { cond: false, foo: 2, bar: 55 },
+    { cond: false, foo: 3, bar: 55 },
+    { cond: true, foo: 3, bar: 55 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) [55]
+[55]
+[3]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.js
new file mode 100644
index 00000000000..7e34aa5683f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.js
@@ -0,0 +1,18 @@
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  props.cond
+    ? ((x = {}), (x = []), x.push(props.foo))
+    : ((x = []), (x = []), x.push(props.bar));
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{cond: false, foo: 2, bar: 55}],
+  sequentialRenders: [
+    {cond: false, foo: 2, bar: 55},
+    {cond: false, foo: 3, bar: 55},
+    {cond: true, foo: 3, bar: 55},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md
new file mode 100644
index 00000000000..9f1e21d7c74
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  } else {
+    x = [];
+    x = [];
+    x.push(props.bar);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    if (props.cond) {
+      x = [];
+      x.push(props.foo);
+    } else {
+      x = [];
+      x.push(props.bar);
+    }
+
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ bar: "bar", foo: "foo", cond: true }],
+  sequentialRenders: [
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","joe"]
+["foo","joe"]
+["bar","joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.js
new file mode 100644
index 00000000000..3e7078cfc79
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.js
@@ -0,0 +1,27 @@
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  } else {
+    x = [];
+    x = [];
+    x.push(props.bar);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md
new file mode 100644
index 00000000000..81cc777522b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let {x} = {x: []};
+  x.push(props.bar);
+  if (props.cond) {
+    ({x} = {x: {}});
+    ({x} = {x: []});
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    ({ x } = { x: [] });
+    x.push(props.bar);
+    if (props.cond) {
+      ({ x } = { x: [] });
+      x.push(props.foo);
+    }
+
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ bar: "bar", foo: "foo", cond: true }],
+  sequentialRenders: [
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","joe"]
+["foo","joe"]
+["bar","joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.js
new file mode 100644
index 00000000000..a72e15eebaf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.js
@@ -0,0 +1,23 @@
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let {x} = {x: []};
+  x.push(props.bar);
+  if (props.cond) {
+    ({x} = {x: {}});
+    ({x} = {x: []});
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring.expect.md
new file mode 100644
index 00000000000..b42e3af2a87
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  let {x} = {x: []};
+  x.push(props.bar);
+  if (props.cond) {
+    ({x} = {x: {}});
+    ({x} = {x: []});
+    x.push(props.foo);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar) {
+    ({ x } = { x: [] });
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if (props.cond) {
+    if ($[2] !== props.foo) {
+      ({ x } = { x: [] });
+      x.push(props.foo);
+      $[2] = props.foo;
+      $[3] = x;
+    } else {
+      x = $[3];
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring.js
new file mode 100644
index 00000000000..2f322ba9da5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring.js
@@ -0,0 +1,16 @@
+function foo(props) {
+  let {x} = {x: []};
+  x.push(props.bar);
+  if (props.cond) {
+    ({x} = {x: {}});
+    ({x} = {x: []});
+    x.push(props.foo);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md
new file mode 100644
index 00000000000..f48cec2c238
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate } from "shared-runtime";
+
+function useFoo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
+    x = [];
+    x.push(props.bar);
+    if (props.cond) {
+      x = [];
+      x.push(props.foo);
+    }
+
+    mutate(x);
+    $[0] = props.bar;
+    $[1] = props.cond;
+    $[2] = props.foo;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ bar: "bar", foo: "foo", cond: true }],
+  sequentialRenders: [
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: true },
+    { bar: "bar", foo: "foo", cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","joe"]
+["foo","joe"]
+["bar","joe"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.js
new file mode 100644
index 00000000000..a4d22684f24
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.js
@@ -0,0 +1,23 @@
+import {mutate} from 'shared-runtime';
+
+function useFoo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  }
+  mutate(x);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{bar: 'bar', foo: 'foo', cond: true}],
+  sequentialRenders: [
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: true},
+    {bar: 'bar', foo: 'foo', cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming.expect.md
new file mode 100644
index 00000000000..a32a551f434
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.bar) {
+    x = [];
+    x.push(props.bar);
+    $[0] = props.bar;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  if (props.cond) {
+    if ($[2] !== props.foo) {
+      x = [];
+      x.push(props.foo);
+      $[2] = props.foo;
+      $[3] = x;
+    } else {
+      x = $[3];
+    }
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming.js
new file mode 100644
index 00000000000..c95c47382a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming.js
@@ -0,0 +1,16 @@
+function foo(props) {
+  let x = [];
+  x.push(props.bar);
+  if (props.cond) {
+    x = {};
+    x = [];
+    x.push(props.foo);
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-return.expect.md
new file mode 100644
index 00000000000..07809bbab72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-return.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  if (x === 1) {
+    x = 2;
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  return 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-return.js
new file mode 100644
index 00000000000..e5e8fd46e29
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-return.js
@@ -0,0 +1,14 @@
+function foo() {
+  let x = 1;
+  if (x === 1) {
+    x = 2;
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-shadowing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-shadowing.expect.md
new file mode 100644
index 00000000000..3fd22389f59
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-shadowing.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function log() {}
+
+function Foo(cond) {
+  let str = '';
+  if (cond) {
+    let str = 'other test';
+    log(str);
+  } else {
+    str = 'fallthrough test';
+  }
+  log(str);
+}
+
+```
+
+## Code
+
+```javascript
+function log() {}
+
+function Foo(cond) {
+  let str = "";
+  if (cond) {
+    log("other test");
+  } else {
+    str = "fallthrough test";
+  }
+
+  log(str);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-shadowing.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-shadowing.js
new file mode 100644
index 00000000000..7838af002a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-shadowing.js
@@ -0,0 +1,12 @@
+function log() {}
+
+function Foo(cond) {
+  let str = '';
+  if (cond) {
+    let str = 'other test';
+    log(str);
+  } else {
+    str = 'fallthrough test';
+  }
+  log(str);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-sibling-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-sibling-phis.expect.md
new file mode 100644
index 00000000000..56c289e9d07
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-sibling-phis.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  let x = 0;
+  if (true) {
+    if (true) {
+      x = a;
+    } else {
+      x = b;
+    }
+    x;
+  } else {
+    if (true) {
+      x = c;
+    } else {
+      x = d;
+    }
+    x;
+  }
+  // note: intentionally no phi here so that there are two distinct phis above
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c, d) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-sibling-phis.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-sibling-phis.js
new file mode 100644
index 00000000000..e278cfce7b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-sibling-phis.js
@@ -0,0 +1,25 @@
+function foo(a, b, c, d) {
+  let x = 0;
+  if (true) {
+    if (true) {
+      x = a;
+    } else {
+      x = b;
+    }
+    x;
+  } else {
+    if (true) {
+      x = c;
+    } else {
+      x = d;
+    }
+    x;
+  }
+  // note: intentionally no phi here so that there are two distinct phis above
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple-phi.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple-phi.expect.md
new file mode 100644
index 00000000000..3c768d23f4e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple-phi.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function foo() {
+  let y = 2;
+
+  if (y > 1) {
+    y = 1;
+  } else {
+    y = 2;
+  }
+
+  let x = y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple-phi.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple-phi.js
new file mode 100644
index 00000000000..19e81efe56f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple-phi.js
@@ -0,0 +1,17 @@
+function foo() {
+  let y = 2;
+
+  if (y > 1) {
+    y = 1;
+  } else {
+    y = 2;
+  }
+
+  let x = y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple.expect.md
new file mode 100644
index 00000000000..79187dcb448
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  let y = 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple.js
new file mode 100644
index 00000000000..9aa30882141
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-simple.js
@@ -0,0 +1,10 @@
+function foo() {
+  let x = 1;
+  let y = 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-single-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-single-if.expect.md
new file mode 100644
index 00000000000..ed0fa8a69e5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-single-if.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  let y = 2;
+
+  if (y) {
+    let z = x + y;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-single-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-single-if.js
new file mode 100644
index 00000000000..a9a5e4d70a9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-single-if.js
@@ -0,0 +1,14 @@
+function foo() {
+  let x = 1;
+  let y = 2;
+
+  if (y) {
+    let z = x + y;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-switch.expect.md
new file mode 100644
index 00000000000..48a765d3f36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-switch.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+
+  switch (x) {
+    case 1: {
+      x = x + 1;
+      break;
+    }
+    case 2: {
+      x = x + 2;
+      break;
+    }
+    default: {
+      x = x + 3;
+    }
+  }
+
+  let y = x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  bb0: switch (1) {
+    case 1: {
+      break bb0;
+    }
+    case 2: {
+      break bb0;
+    }
+    default:
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-switch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-switch.js
new file mode 100644
index 00000000000..5e14393d036
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-switch.js
@@ -0,0 +1,25 @@
+function foo() {
+  let x = 1;
+
+  switch (x) {
+    case 1: {
+      x = x + 1;
+      break;
+    }
+    case 2: {
+      x = x + 2;
+      break;
+    }
+    default: {
+      x = x + 3;
+    }
+  }
+
+  let y = x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-throw.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-throw.expect.md
new file mode 100644
index 00000000000..61c139468c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-throw.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  if (x === 1) {
+    x = 2;
+  }
+  throw x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  throw 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: exception) undefined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-throw.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-throw.js
new file mode 100644
index 00000000000..435b5490287
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-throw.js
@@ -0,0 +1,13 @@
+function foo() {
+  let x = 1;
+  if (x === 1) {
+    x = 2;
+  }
+  throw x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while-no-reassign.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while-no-reassign.expect.md
new file mode 100644
index 00000000000..5b3eb80b6c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while-no-reassign.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x + 1;
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  while (true) {}
+  return 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while-no-reassign.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while-no-reassign.js
new file mode 100644
index 00000000000..f6e3cd693a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while-no-reassign.js
@@ -0,0 +1,14 @@
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x + 1;
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while.expect.md
new file mode 100644
index 00000000000..63ce1665e2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x = x + 1;
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x = x + 1;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 10
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while.js
new file mode 100644
index 00000000000..4ea62f2d13f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-while.js
@@ -0,0 +1,14 @@
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x = x + 1;
+  }
+
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.expect.md
new file mode 100644
index 00000000000..48a0a92be70
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+function Component() {
+  const $ = _c(4);
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      setState(e.target.value);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      log(ref.current.value);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[2] !== state) {
+    t2 = <input value={state} onChange={onChange} ref={ref} />;
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.js
new file mode 100644
index 00000000000..d9fba0f3903
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.js
@@ -0,0 +1,12 @@
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.expect.md
new file mode 100644
index 00000000000..80884d84530
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known setState call allows us to infer this as an event handler
+    // and prune it
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+function Component() {
+  const $ = _c(4);
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      setState(e.target.value);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      log(ref.current.value);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[2] !== state) {
+    t2 = <CustomInput value={state} onChange={onChange} ref={ref} />;
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.js
new file mode 100644
index 00000000000..c67f026c040
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.js
@@ -0,0 +1,14 @@
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known setState call allows us to infer this as an event handler
+    // and prune it
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.expect.md
new file mode 100644
index 00000000000..ccfdccb2888
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const [, startTransition] = useTransition();
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known startTransition call allows us to infer this as an event handler
+    // and prune it
+    startTransition(() => {
+      setState.call(null, e.target.value);
+    });
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+function Component() {
+  const $ = _c(4);
+  const [, startTransition] = useTransition();
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      startTransition(() => {
+        setState.call(null, e.target.value);
+      });
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      log(ref.current.value);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[2] !== state) {
+    t2 = <CustomInput value={state} onChange={onChange} ref={ref} />;
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.js
new file mode 100644
index 00000000000..f6f6f3914dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.js
@@ -0,0 +1,17 @@
+// @enableOptimizeForSSR
+function Component() {
+  const [, startTransition] = useTransition();
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known startTransition call allows us to infer this as an event handler
+    // and prune it
+    startTransition(() => {
+      setState.call(null, e.target.value);
+    });
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.expect.md
new file mode 100644
index 00000000000..780e1f3963c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+const initializer = x => x;
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0, initializer);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+
+import { useReducer } from "react";
+
+const initializer = (x) => {
+  return x;
+};
+
+function Component() {
+  const $ = _c(4);
+  const [state, dispatch] = useReducer(_temp, 0, initializer);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      dispatch(e.target.value);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      log(ref.current.value);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[2] !== state) {
+    t2 = <input value={state} onChange={onChange} ref={ref} />;
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(_, next) {
+  return next;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.js
new file mode 100644
index 00000000000..91844def22d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.js
@@ -0,0 +1,17 @@
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+const initializer = x => x;
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0, initializer);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.expect.md
new file mode 100644
index 00000000000..3c48b27f861
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+
+import { useReducer } from "react";
+
+function Component() {
+  const $ = _c(4);
+  const [state, dispatch] = useReducer(_temp, 0);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (e) => {
+      dispatch(e.target.value);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      log(ref.current.value);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[2] !== state) {
+    t2 = <input value={state} onChange={onChange} ref={ref} />;
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(_, next) {
+  return next;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.js
new file mode 100644
index 00000000000..4223ebe4f55
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.js
@@ -0,0 +1,15 @@
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md
new file mode 100644
index 00000000000..6625f0153e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  let Component;
+  if (props.cond) {
+    Component = createComponent();
+  } else {
+    Component = DefaultComponent;
+  }
+  return <Component />;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  let Component;
+  if (props.cond) {
+    Component = createComponent();
+  } else {
+    Component = DefaultComponent;
+  }
+  return <Component />;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":221},"end":{"line":9,"column":19,"index":230},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":143},"end":{"line":5,"column":33,"index":160},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":10,"column":1,"index":236},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"fnName":"Example","memoSlots":3,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js
new file mode 100644
index 00000000000..1022cc9d575
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js
@@ -0,0 +1,10 @@
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  let Component;
+  if (props.cond) {
+    Component = createComponent();
+  } else {
+    Component = DefaultComponent;
+  }
+  return <Component />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md
new file mode 100644
index 00000000000..c6441bc4cb1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = createComponent();
+  return <Component />;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = createComponent();
+  return <Component />;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":139},"end":{"line":4,"column":19,"index":148},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":110},"end":{"line":3,"column":37,"index":127},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":5,"column":1,"index":154},"filename":"invalid-dynamically-construct-component-in-render.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js
new file mode 100644
index 00000000000..8992b8bf7c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js
@@ -0,0 +1,5 @@
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = createComponent();
+  return <Component />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md
new file mode 100644
index 00000000000..0882c4a1003
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  function Component() {
+    return <div />;
+  }
+  return <Component />;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  function Component() {
+    return <div />;
+  }
+  return <Component />;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":149},"end":{"line":6,"column":19,"index":158},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":92},"end":{"line":5,"column":3,"index":138},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":7,"column":1,"index":164},"filename":"invalid-dynamically-constructed-component-function.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js
new file mode 100644
index 00000000000..123fb043eb1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js
@@ -0,0 +1,7 @@
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  function Component() {
+    return <div />;
+  }
+  return <Component />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md
new file mode 100644
index 00000000000..707a0a95850
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = props.foo.bar();
+  return <Component />;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = props.foo.bar();
+  return <Component />;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":137},"end":{"line":4,"column":19,"index":146},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":110},"end":{"line":3,"column":35,"index":125},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":5,"column":1,"index":152},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"fnName":"Example","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js
new file mode 100644
index 00000000000..7392c74adcc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js
@@ -0,0 +1,5 @@
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = props.foo.bar();
+  return <Component />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md
new file mode 100644
index 00000000000..2607ef63d8d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = new ComponentFactory();
+  return <Component />;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = new ComponentFactory();
+  return <Component />;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":144},"end":{"line":4,"column":19,"index":153},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":110},"end":{"line":3,"column":42,"index":132},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":5,"column":1,"index":159},"filename":"invalid-dynamically-constructed-component-new.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js
new file mode 100644
index 00000000000..4b4e3f7f024
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js
@@ -0,0 +1,5 @@
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
+function Example(props) {
+  const Component = new ComponentFactory();
+  return <Component />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md
new file mode 100644
index 00000000000..31bb71ca029
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function foo() {
+  const x = {};
+  const y = foo(x);
+  y.mutate();
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    const y = foo(x);
+    y.mutate();
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.js
new file mode 100644
index 00000000000..461e9e1656e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.js
@@ -0,0 +1,6 @@
+function foo() {
+  const x = {};
+  const y = foo(x);
+  y.mutate();
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md
new file mode 100644
index 00000000000..2d7b0d455ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Foo() {
+  const x = {};
+  const y = new Foo(x);
+  y.mutate();
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    const y = new Foo(x);
+    y.mutate();
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.js
new file mode 100644
index 00000000000..a4032d7e06b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.js
@@ -0,0 +1,6 @@
+function Foo() {
+  const x = {};
+  const y = new Foo(x);
+  y.mutate();
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-global-propertyload-case-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-global-propertyload-case-test.expect.md
new file mode 100644
index 00000000000..0134806f037
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-global-propertyload-case-test.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  switch (props.value) {
+    case Global.Property: {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  switch (props.value) {
+    case Global.Property: {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-global-propertyload-case-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-global-propertyload-case-test.js
new file mode 100644
index 00000000000..79e27070537
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-global-propertyload-case-test.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  switch (props.value) {
+    case Global.Property: {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md
new file mode 100644
index 00000000000..2822ee39eb6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case 1: {
+      break;
+    }
+    case true: {
+      x.push(props.p2);
+      y = [];
+    }
+    default: {
+      break;
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(8);
+  let t0;
+  let y;
+  if ($[0] !== props.p0 || $[1] !== props.p2) {
+    const x = [];
+    bb0: switch (props.p0) {
+      case 1: {
+        break bb0;
+      }
+      case true: {
+        x.push(props.p2);
+        let t1;
+        if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = [];
+          $[4] = t1;
+        } else {
+          t1 = $[4];
+        }
+        y = t1;
+      }
+      default: {
+        break bb0;
+      }
+      case false: {
+        y = x;
+      }
+    }
+    t0 = <Component data={x} />;
+    $[0] = props.p0;
+    $[1] = props.p2;
+    $[2] = t0;
+    $[3] = y;
+  } else {
+    t0 = $[2];
+    y = $[3];
+  }
+  const child = t0;
+  y.push(props.p4);
+  let t1;
+  if ($[5] !== child || $[6] !== y) {
+    t1 = <Component data={y}>{child}</Component>;
+    $[5] = child;
+    $[6] = y;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.js
new file mode 100644
index 00000000000..97326e36d88
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.js
@@ -0,0 +1,23 @@
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case 1: {
+      break;
+    }
+    case true: {
+      x.push(props.p2);
+      y = [];
+    }
+    default: {
+      break;
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-fallthrough.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-fallthrough.expect.md
new file mode 100644
index 00000000000..6fd911c4327
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-fallthrough.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+function foo(x) {
+  let y;
+  switch (x) {
+    case 0: {
+      y = 0;
+    }
+    case 1: {
+      y = 1;
+    }
+    case 2: {
+      break;
+    }
+    case 3: {
+      y = 3;
+      break;
+    }
+    case 4: {
+      y = 4;
+    }
+    case 5: {
+      y = 5;
+    }
+    default: {
+      y = 0;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(x) {
+  bb0: switch (x) {
+    case 0:
+    case 1:
+    case 2: {
+      break bb0;
+    }
+    case 3: {
+      break bb0;
+    }
+    case 4:
+    case 5:
+    default:
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-fallthrough.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-fallthrough.js
new file mode 100644
index 00000000000..089cb11ced6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-fallthrough.js
@@ -0,0 +1,33 @@
+function foo(x) {
+  let y;
+  switch (x) {
+    case 0: {
+      y = 0;
+    }
+    case 1: {
+      y = 1;
+    }
+    case 2: {
+      break;
+    }
+    case 3: {
+      y = 3;
+      break;
+    }
+    case 4: {
+      y = 4;
+    }
+    case 5: {
+      y = 5;
+    }
+    default: {
+      y = 0;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-only-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-only-default.expect.md
new file mode 100644
index 00000000000..bfc3e86db21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-only-default.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+function Component({kind, ...props}) {
+  switch (kind) {
+    default:
+      return <Stringify {...props} />;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{kind: 'foo', a: 1, b: true, c: 'sathya'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(5);
+  let kind;
+  let props;
+  if ($[0] !== t0) {
+    ({ kind, ...props } = t0);
+    $[0] = t0;
+    $[1] = kind;
+    $[2] = props;
+  } else {
+    kind = $[1];
+    props = $[2];
+  }
+  switch (kind) {
+    default: {
+      let t1;
+      if ($[3] !== props) {
+        t1 = <Stringify {...props} />;
+        $[3] = props;
+        $[4] = t1;
+      } else {
+        t1 = $[4];
+      }
+      return t1;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ kind: "foo", a: 1, b: true, c: "sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"a":1,"b":true,"c":"sathya"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-only-default.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-only-default.js
new file mode 100644
index 00000000000..5a20c7ee890
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-with-only-default.js
@@ -0,0 +1,13 @@
+import {Stringify} from 'shared-runtime';
+
+function Component({kind, ...props}) {
+  switch (kind) {
+    default:
+      return <Stringify {...props} />;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{kind: 'foo', a: 1, b: true, c: 'sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md
new file mode 100644
index 00000000000..cf76c252787
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case true: {
+      x.push(props.p2);
+      x.push(props.p3);
+      y = [];
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(8);
+  let t0;
+  let y;
+  if ($[0] !== props.p0 || $[1] !== props.p2 || $[2] !== props.p3) {
+    const x = [];
+    switch (props.p0) {
+      case true: {
+        x.push(props.p2);
+        x.push(props.p3);
+      }
+      case false: {
+        y = x;
+      }
+    }
+    t0 = <Component data={x} />;
+    $[0] = props.p0;
+    $[1] = props.p2;
+    $[2] = props.p3;
+    $[3] = t0;
+    $[4] = y;
+  } else {
+    t0 = $[3];
+    y = $[4];
+  }
+  const child = t0;
+  y.push(props.p4);
+  let t1;
+  if ($[5] !== child || $[6] !== y) {
+    t1 = <Component data={y}>{child}</Component>;
+    $[5] = child;
+    $[6] = y;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.js
new file mode 100644
index 00000000000..2ff19a4c76d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.js
@@ -0,0 +1,18 @@
+function Component(props) {
+  let x = [];
+  let y;
+  switch (props.p0) {
+    case true: {
+      x.push(props.p2);
+      x.push(props.p3);
+      y = [];
+    }
+    case false: {
+      y = x;
+      break;
+    }
+  }
+  const child = <Component data={x} />;
+  y.push(props.p4);
+  return <Component data={y}>{child}</Component>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.expect.md
new file mode 100644
index 00000000000..d52a7713bb8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const user = useFragment(
+    graphql`
+      fragment F on User {
+        name
+      }
+    `,
+    props.user
+  );
+  return user.name;
+}
+
+```
+
+## Code
+
+```javascript
+import { useFragment } from "shared-runtime";
+
+function Component(props) {
+  const user = useFragment(
+    graphql`
+      fragment F on User {
+        name
+      }
+    `,
+    props.user,
+  );
+  return user.name;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.js
new file mode 100644
index 00000000000..dbcd2b6d218
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-in-hook.js
@@ -0,0 +1,13 @@
+import {useFragment} from 'shared-runtime';
+
+function Component(props) {
+  const user = useFragment(
+    graphql`
+      fragment F on User {
+        name
+      }
+    `,
+    props.user
+  );
+  return user.name;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.expect.md
new file mode 100644
index 00000000000..3993926f9f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function component() {
+  let t = graphql`
+    fragment F on T {
+      id
+    }
+  `;
+
+  return t;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = graphql`
+      fragment F on T {
+        id
+      }
+    `;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const t = t0;
+  return t;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.js
new file mode 100644
index 00000000000..7126e331f8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/tagged-template-literal.js
@@ -0,0 +1,9 @@
+function component() {
+  let t = graphql`
+    fragment F on T {
+      id
+    }
+  `;
+
+  return t;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.expect.md
new file mode 100644
index 00000000000..6c81defa1b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @target="donotuse_meta_internal"
+
+function Component() {
+  return <div>Hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @target="donotuse_meta_internal"
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello world</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.js
new file mode 100644
index 00000000000..02f71b841c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag-meta-internal.js
@@ -0,0 +1,11 @@
+// @target="donotuse_meta_internal"
+
+function Component() {
+  return <div>Hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag.expect.md
new file mode 100644
index 00000000000..b27b786d578
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @target="18"
+
+function Component() {
+  return <div>Hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @target="18"
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello world</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello world</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag.js
new file mode 100644
index 00000000000..5319d28f0ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/target-flag.js
@@ -0,0 +1,11 @@
+// @target="18"
+
+function Component() {
+  return <div>Hello world</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.expect.md
new file mode 100644
index 00000000000..cdc9738d657
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function componentA(props) {
+  let t = `hello ${props.a}, ${props.b}!`;
+  t += ``;
+  return t;
+}
+
+function componentB(props) {
+  let x = useFoo(`hello ${props.a}`);
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+function componentA(props) {
+  let t = `hello ${props.a}, ${props.b}!`;
+  t = t + "";
+  return t;
+}
+
+function componentB(props) {
+  const x = useFoo(`hello ${props.a}`);
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.js
new file mode 100644
index 00000000000..512dfb7ff88
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/template-literal.js
@@ -0,0 +1,10 @@
+function componentA(props) {
+  let t = `hello ${props.a}, ${props.b}!`;
+  t += ``;
+  return t;
+}
+
+function componentB(props) {
+  let x = useFoo(`hello ${props.a}`);
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-accessed-outside-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-accessed-outside-scope.expect.md
new file mode 100644
index 00000000000..0ea366c1617
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-accessed-outside-scope.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  let x = props;
+  return [x, maybeMutate(maybeMutable)];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  let t1;
+  if ($[0] !== props) {
+    const maybeMutable = new MaybeMutable();
+    const x = props;
+    t0 = x;
+    t1 = maybeMutate(maybeMutable);
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t0 || $[4] !== t1) {
+    t2 = [t0, t1];
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-accessed-outside-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-accessed-outside-scope.js
new file mode 100644
index 00000000000..b73a016883f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-accessed-outside-scope.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  let x = props;
+  return [x, maybeMutate(maybeMutable)];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-at-start-of-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-at-start-of-value-block.expect.md
new file mode 100644
index 00000000000..181829b522c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-at-start-of-value-block.expect.md
@@ -0,0 +1,32 @@
+
+## Input
+
+```javascript
+function component(props) {
+  // NOTE: the temporary for the leading space was previously dropped
+  const x = isMenuShown ? <Bar> {props.a ? props.b : props.c}</Bar> : null;
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = isMenuShown ? <Bar> {props.a ? props.b : props.c}</Bar> : null;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-at-start-of-value-block.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-at-start-of-value-block.js
new file mode 100644
index 00000000000..a88ea2680f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-at-start-of-value-block.js
@@ -0,0 +1,5 @@
+function component(props) {
+  // NOTE: the temporary for the leading space was previously dropped
+  const x = isMenuShown ? <Bar> {props.a ? props.b : props.c}</Bar> : null;
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-property-load-accessed-outside-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-property-load-accessed-outside-scope.expect.md
new file mode 100644
index 00000000000..1aebc80b273
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-property-load-accessed-outside-scope.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  let x = props.value;
+  return [x, maybeMutate(maybeMutable)];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  let t1;
+  if ($[0] !== props.value) {
+    const maybeMutable = new MaybeMutable();
+    const x = props.value;
+    t0 = x;
+    t1 = maybeMutate(maybeMutable);
+    $[0] = props.value;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== t0 || $[4] !== t1) {
+    t2 = [t0, t1];
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-property-load-accessed-outside-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-property-load-accessed-outside-scope.js
new file mode 100644
index 00000000000..54eb92d5408
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/temporary-property-load-accessed-outside-scope.js
@@ -0,0 +1,5 @@
+function Component(props) {
+  const maybeMutable = new MaybeMutable();
+  let x = props.value;
+  return [x, maybeMutate(maybeMutable)];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-assignment-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-assignment-expression.expect.md
new file mode 100644
index 00000000000..358859a43ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-assignment-expression.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function ternary(props) {
+  let x = 0;
+  const y = props.a ? (x = 1) : (x = 2);
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ternary,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function ternary(props) {
+  let x;
+  const y = props.a ? (x = 1) : (x = 2);
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ternary,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-assignment-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-assignment-expression.js
new file mode 100644
index 00000000000..3e59315e5ee
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-assignment-expression.js
@@ -0,0 +1,11 @@
+function ternary(props) {
+  let x = 0;
+  const y = props.a ? (x = 1) : (x = 2);
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ternary,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.expect.md
new file mode 100644
index 00000000000..6e99be2e6f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function ternary(props) {
+  const a = props.a && props.b ? props.c || props.d : (props.e ?? props.f);
+  const b = props.a ? (props.b && props.c ? props.d : props.e) : props.f;
+  return a ? b : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ternary,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function ternary(props) {
+  const a = props.a && props.b ? props.c || props.d : (props.e ?? props.f);
+  const b = props.a ? (props.b && props.c ? props.d : props.e) : props.f;
+  return a ? b : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ternary,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.js
new file mode 100644
index 00000000000..2a39d90bbcd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-expression.js
@@ -0,0 +1,11 @@
+function ternary(props) {
+  const a = props.a && props.b ? props.c || props.d : (props.e ?? props.f);
+  const b = props.a ? (props.b && props.c ? props.d : props.e) : props.f;
+  return a ? b : null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: ternary,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/timers.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/timers.expect.md
new file mode 100644
index 00000000000..0cb2a346fca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/timers.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const start = performance.now();
+  const now = Date.now();
+  const time = performance.now() - start;
+  return (
+    <div>
+      rendering took {time} at {now}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  const start = performance.now();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = Date.now();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const now = t0;
+  const time = performance.now() - start;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <div>
+        rendering took
+        {time} at {now}
+      </div>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/timers.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/timers.js
new file mode 100644
index 00000000000..eb226b89a87
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/timers.js
@@ -0,0 +1,10 @@
+function Component(props) {
+  const start = performance.now();
+  const now = Date.now();
+  const time = performance.now() - start;
+  return (
+    <div>
+      rendering took {time} at {now}
+    </div>
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md
new file mode 100644
index 00000000000..446beadb3ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = {};
+  // onChange should be inferred as immutable, because the value
+  // it captures (`x`) is frozen by the time the function is referenced
+  const onChange = e => {
+    maybeMutate(x, e.target.value);
+  };
+  if (props.cond) {
+    <div>{x}</div>;
+  }
+  // ideally this call would be outside the memoization block for `x`
+  onChange();
+  return <Foo value={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.cond) {
+    const x = {};
+    const onChange = (e) => {
+      maybeMutate(x, e.target.value);
+    };
+    if (props.cond) {
+    }
+    onChange();
+    t0 = <Foo value={x} />;
+    $[0] = props.cond;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.js
new file mode 100644
index 00000000000..865f3cc44df
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  let x = {};
+  // onChange should be inferred as immutable, because the value
+  // it captures (`x`) is frozen by the time the function is referenced
+  const onChange = e => {
+    maybeMutate(x, e.target.value);
+  };
+  if (props.cond) {
+    <div>{x}</div>;
+  }
+  // ideally this call would be outside the memoization block for `x`
+  onChange();
+  return <Foo value={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-load-cached.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-load-cached.expect.md
new file mode 100644
index 00000000000..a2a0e3bef9b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-load-cached.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+import {makeArray} from 'shared-runtime';
+
+/**
+ * Here, we don't need to memoize Stringify as it is a read off of a global.
+ * TODO: in PropagateScopeDeps (hir), we should produce a sidemap of global rvals
+ * and avoid adding them to `temporariesUsedOutsideDefiningScope`.
+ */
+function Component({num}: {num: number}) {
+  const arr = makeArray(num);
+  return <Stringify value={arr.push(num)}></Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{num: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+import { makeArray } from "shared-runtime";
+
+/**
+ * Here, we don't need to memoize Stringify as it is a read off of a global.
+ * TODO: in PropagateScopeDeps (hir), we should produce a sidemap of global rvals
+ * and avoid adding them to `temporariesUsedOutsideDefiningScope`.
+ */
+function Component(t0) {
+  const $ = _c(6);
+  const { num } = t0;
+  let T0;
+  let t1;
+  if ($[0] !== num) {
+    const arr = makeArray(num);
+    T0 = Stringify;
+    t1 = arr.push(num);
+    $[0] = num;
+    $[1] = T0;
+    $[2] = t1;
+  } else {
+    T0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== T0 || $[4] !== t1) {
+    t2 = <T0 value={t1} />;
+    $[3] = T0;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ num: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":2}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-load-cached.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-load-cached.tsx
new file mode 100644
index 00000000000..ff000fd8669
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-load-cached.tsx
@@ -0,0 +1,17 @@
+import {Stringify} from 'shared-runtime';
+import {makeArray} from 'shared-runtime';
+
+/**
+ * Here, we don't need to memoize Stringify as it is a read off of a global.
+ * TODO: in PropagateScopeDeps (hir), we should produce a sidemap of global rvals
+ * and avoid adding them to `temporariesUsedOutsideDefiningScope`.
+ */
+function Component({num}: {num: number}) {
+  const arr = makeArray(num);
+  return <Stringify value={arr.push(num)}></Stringify>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{num: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-property-load-cached.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-property-load-cached.expect.md
new file mode 100644
index 00000000000..058f5ab0a98
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-property-load-cached.expect.md
@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import * as SharedRuntime from 'shared-runtime';
+import {makeArray} from 'shared-runtime';
+
+/**
+ * Here, we don't need to memoize SharedRuntime.Stringify as it is a PropertyLoad
+ * off of a global.
+ * TODO: in PropagateScopeDeps (hir), we should produce a sidemap of global rvals
+ * and avoid adding them to `temporariesUsedOutsideDefiningScope`.
+ */
+function Component({num}: {num: number}) {
+  const arr = makeArray(num);
+  return (
+    <SharedRuntime.Stringify value={arr.push(num)}></SharedRuntime.Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{num: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as SharedRuntime from "shared-runtime";
+import { makeArray } from "shared-runtime";
+
+/**
+ * Here, we don't need to memoize SharedRuntime.Stringify as it is a PropertyLoad
+ * off of a global.
+ * TODO: in PropagateScopeDeps (hir), we should produce a sidemap of global rvals
+ * and avoid adding them to `temporariesUsedOutsideDefiningScope`.
+ */
+function Component(t0) {
+  const $ = _c(6);
+  const { num } = t0;
+  let T0;
+  let t1;
+  if ($[0] !== num) {
+    const arr = makeArray(num);
+    T0 = SharedRuntime.Stringify;
+    t1 = arr.push(num);
+    $[0] = num;
+    $[1] = T0;
+    $[2] = t1;
+  } else {
+    T0 = $[1];
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== T0 || $[4] !== t1) {
+    t2 = <T0 value={t1} />;
+    $[3] = T0;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ num: 2 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":2}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-property-load-cached.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-property-load-cached.tsx
new file mode 100644
index 00000000000..be9f3e7ab9c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-global-property-load-cached.tsx
@@ -0,0 +1,20 @@
+import * as SharedRuntime from 'shared-runtime';
+import {makeArray} from 'shared-runtime';
+
+/**
+ * Here, we don't need to memoize SharedRuntime.Stringify as it is a PropertyLoad
+ * off of a global.
+ * TODO: in PropagateScopeDeps (hir), we should produce a sidemap of global rvals
+ * and avoid adding them to `temporariesUsedOutsideDefiningScope`.
+ */
+function Component({num}: {num: number}) {
+  const arr = makeArray(num);
+  return (
+    <SharedRuntime.Stringify value={arr.push(num)}></SharedRuntime.Stringify>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{num: 2}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.expect.md
new file mode 100644
index 00000000000..b4aec392e1a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.expect.md
@@ -0,0 +1,110 @@
+
+## Input
+
+```javascript
+import {useIdentity, ValidateMemoization} from 'shared-runtime';
+
+/**
+ * Fixture for granular iterator semantics:
+ * 1. ConditionallyMutate the iterator itself, depending on whether the iterator
+ *    is a mutable iterator.
+ * 2. Capture effect on elements within the iterator.
+ */
+function Validate({x, input}) {
+  'use no memo';
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={x[0]} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[input]}
+        output={x[1]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+function useFoo(input) {
+  'use memo';
+  /**
+   * We should be able to memoize {} separately from `x`.
+   */
+  const x = Array.from([{}]);
+  useIdentity();
+  x.push([input]);
+  return <Validate x={x} input={input} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useIdentity, ValidateMemoization } from "shared-runtime";
+
+/**
+ * Fixture for granular iterator semantics:
+ * 1. ConditionallyMutate the iterator itself, depending on whether the iterator
+ *    is a mutable iterator.
+ * 2. Capture effect on elements within the iterator.
+ */
+function Validate({ x, input }) {
+  "use no memo";
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={x[0]} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[input]}
+        output={x[1]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+function useFoo(input) {
+  "use memo";
+  const $ = _c(6);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [{}];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = Array.from(t0);
+  useIdentity();
+  let t1;
+  if ($[1] !== input) {
+    t1 = [input];
+    $[1] = input;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  x.push(t1);
+  let t2;
+  if ($[3] !== input || $[4] !== x) {
+    t2 = <Validate x={x} input={input} />;
+    $[3] = input;
+    $[4] = x;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[],"output":{}}</div><div>{"inputs":[1],"output":[1]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.js
new file mode 100644
index 00000000000..3e24d0b5b2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.js
@@ -0,0 +1,36 @@
+import {useIdentity, ValidateMemoization} from 'shared-runtime';
+
+/**
+ * Fixture for granular iterator semantics:
+ * 1. ConditionallyMutate the iterator itself, depending on whether the iterator
+ *    is a mutable iterator.
+ * 2. Capture effect on elements within the iterator.
+ */
+function Validate({x, input}) {
+  'use no memo';
+  return (
+    <>
+      <ValidateMemoization inputs={[]} output={x[0]} onlyCheckCompiled={true} />
+      <ValidateMemoization
+        inputs={[input]}
+        output={x[1]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+function useFoo(input) {
+  'use memo';
+  /**
+   * We should be able to memoize {} separately from `x`.
+   */
+  const x = Array.from([{}]);
+  useIdentity();
+  x.push([input]);
+  return <Validate x={x} input={input} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [1],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md
new file mode 100644
index 00000000000..7bc1e49069b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+const SCALE = 2;
+function Component(props) {
+  const {[props.name]: value} = props;
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+
+todo.error.object-pattern-computed-key.ts:5:9
+  3 | const SCALE = 2;
+  4 | function Component(props) {
+> 5 |   const {[props.name]: value} = props;
+    |          ^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+  6 |   return value;
+  7 | }
+  8 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.js
new file mode 100644
index 00000000000..9a3d13bd0a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.js
@@ -0,0 +1,12 @@
+import {identity} from 'shared-runtime';
+
+const SCALE = 2;
+function Component(props) {
+  const {[props.name]: value} = props;
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Sathya'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md
new file mode 100644
index 00000000000..7ac6486b470
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const [foo, bar] = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const [foo, bar] = useContext(MyContext);
+  let t0;
+  if ($[0] !== bar || $[1] !== foo) {
+    t0 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.js
new file mode 100644
index 00000000000..387c30cdc1e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-array-destructuring.js
@@ -0,0 +1,5 @@
+// @lowerContextAccess
+function App() {
+  const [foo, bar] = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md
new file mode 100644
index 00000000000..3eac66304be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const context = useContext(MyContext);
+  const {foo} = context;
+  const {bar} = context;
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const context = useContext(MyContext);
+  const { foo } = context;
+  const { bar } = context;
+  let t0;
+  if ($[0] !== bar || $[1] !== foo) {
+    t0 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.js
new file mode 100644
index 00000000000..e7b106e9db8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-destructure-multiple.js
@@ -0,0 +1,7 @@
+// @lowerContextAccess
+function App() {
+  const context = useContext(MyContext);
+  const {foo} = context;
+  const {bar} = context;
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md
new file mode 100644
index 00000000000..4cca8b19d95
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const context = useContext(MyContext);
+  const [foo] = context;
+  const {bar} = context;
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const context = useContext(MyContext);
+  const [foo] = context;
+  const { bar } = context;
+  let t0;
+  if ($[0] !== bar || $[1] !== foo) {
+    t0 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.js
new file mode 100644
index 00000000000..fa511732e3f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-mixed-array-obj.js
@@ -0,0 +1,7 @@
+// @lowerContextAccess
+function App() {
+  const context = useContext(MyContext);
+  const [foo] = context;
+  const {bar} = context;
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md
new file mode 100644
index 00000000000..f5a39166269
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const {
+    joe: {foo},
+    bar,
+  } = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const { joe: t0, bar } = useContext(MyContext);
+  const { foo } = t0;
+  let t1;
+  if ($[0] !== bar || $[1] !== foo) {
+    t1 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.js
new file mode 100644
index 00000000000..89a7ccd7db4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-nested-destructuring.js
@@ -0,0 +1,8 @@
+// @lowerContextAccess
+function App() {
+  const {
+    joe: {foo},
+    bar,
+  } = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md
new file mode 100644
index 00000000000..0888d67b2aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @lowerContextAccess
+function App() {
+  const context = useContext(MyContext);
+  const foo = context.foo;
+  const bar = context.bar;
+  return <Bar foo={foo} bar={bar} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @lowerContextAccess
+function App() {
+  const $ = _c(3);
+  const context = useContext(MyContext);
+  const foo = context.foo;
+  const bar = context.bar;
+  let t0;
+  if ($[0] !== bar || $[1] !== foo) {
+    t0 = <Bar foo={foo} bar={bar} />;
+    $[0] = bar;
+    $[1] = foo;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.js
new file mode 100644
index 00000000000..a055114c1ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.lower-context-access-property-load.js
@@ -0,0 +1,7 @@
+// @lowerContextAccess
+function App() {
+  const context = useContext(MyContext);
+  const foo = context.foo;
+  const bar = context.bar;
+  return <Bar foo={foo} bar={bar} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.memoize-loops-that-produce-memoizeable-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.memoize-loops-that-produce-memoizeable-values.expect.md
new file mode 100644
index 00000000000..c7c8dfff90a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.memoize-loops-that-produce-memoizeable-values.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function useHook(nodeID, condition) {
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  // (2) Instead we can create a scope around the loop since the loop produces an escaping value
+  let value;
+  for (const key of Object.keys(node?.fields ?? {})) {
+    if (condition) {
+      // (1) We currently create a scope just for this instruction, then later prune the scope because
+      // it's inside a loop
+      value = new Class(node.fields?.[field]);
+      break;
+    }
+  }
+  return value;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useHook(nodeID, condition) {
+  const $ = _c(6);
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  let value;
+  let t0;
+  if ($[0] !== node?.fields) {
+    t0 = Object.keys(node?.fields ?? {});
+    $[0] = node?.fields;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  if ($[2] !== condition || $[3] !== node || $[4] !== t0) {
+    for (const key of t0) {
+      if (condition) {
+        value = new Class(node.fields?.[field]);
+        break;
+      }
+    }
+    $[2] = condition;
+    $[3] = node;
+    $[4] = t0;
+    $[5] = value;
+  } else {
+    value = $[5];
+  }
+  return value;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.memoize-loops-that-produce-memoizeable-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.memoize-loops-that-produce-memoizeable-values.js
new file mode 100644
index 00000000000..0a70976a084
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.memoize-loops-that-produce-memoizeable-values.js
@@ -0,0 +1,16 @@
+function useHook(nodeID, condition) {
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  // (2) Instead we can create a scope around the loop since the loop produces an escaping value
+  let value;
+  for (const key of Object.keys(node?.fields ?? {})) {
+    if (condition) {
+      // (1) We currently create a scope just for this instruction, then later prune the scope because
+      // it's inside a loop
+      value = new Class(node.fields?.[field]);
+      break;
+    }
+  }
+  return value;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.unnecessary-lambda-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.unnecessary-lambda-memoization.expect.md
new file mode 100644
index 00000000000..4bd0867ab77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.unnecessary-lambda-memoization.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const data = useFreeze(); // assume this returns {items: Array<{...}>}
+  // In this call `data` and `data.items` have a read effect *and* the lambda itself
+  // is readonly (it doesn't capture ony mutable references). Further, we ca
+  // theoretically determine that the lambda doesn't need to be memoized, since
+  // data.items is an Array and Array.prototype.map does not capture its input (callback)
+  // in the return value.
+  // An observation is that even without knowing the exact type of `data`, if we know
+  // that it is a plain, readonly javascript object, then we can infer that any `.map()`
+  // calls *must* be Array.prototype.map (or else they are a runtime error), since no
+  // other builtin has a .map() function.
+  const items = data.items.map(item => <Item item={item} />);
+  return <div>{items}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  const data = useFreeze();
+  let t0;
+  if ($[0] !== data.items) {
+    t0 = data.items.map(_temp);
+    $[0] = data.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const items = t0;
+  let t1;
+  if ($[2] !== items) {
+    t1 = <div>{items}</div>;
+    $[2] = items;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+function _temp(item) {
+  return <Item item={item} />;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.unnecessary-lambda-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.unnecessary-lambda-memoization.js
new file mode 100644
index 00000000000..d5782638024
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.unnecessary-lambda-memoization.js
@@ -0,0 +1,14 @@
+function Component(props) {
+  const data = useFreeze(); // assume this returns {items: Array<{...}>}
+  // In this call `data` and `data.items` have a read effect *and* the lambda itself
+  // is readonly (it doesn't capture ony mutable references). Further, we ca
+  // theoretically determine that the lambda doesn't need to be memoized, since
+  // data.items is an Array and Array.prototype.map does not capture its input (callback)
+  // in the return value.
+  // An observation is that even without knowing the exact type of `data`, if we know
+  // that it is a plain, readonly javascript object, then we can infer that any `.map()`
+  // calls *must* be Array.prototype.map (or else they are a runtime error), since no
+  // other builtin has a .map() function.
+  const items = data.items.map(item => <Item item={item} />);
+  return <div>{items}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-capitalized-fn-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-capitalized-fn-call.expect.md
new file mode 100644
index 00000000000..b11be5668d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-capitalized-fn-call.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validateNoCapitalizedCalls @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+const CapitalizedCall = require('shared-runtime').sum;
+
+function Component({prop1, bar}) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+    fire(foo());
+    fire(bar());
+  });
+
+  return CapitalizedCall();
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime"; // @validateNoCapitalizedCalls @enableFire @panicThreshold:"none"
+import { fire } from "react";
+const CapitalizedCall = require("shared-runtime").sum;
+
+function Component(t0) {
+  const { prop1, bar } = t0;
+  const foo = () => {
+    console.log(prop1);
+  };
+  const t1 = useFire(foo);
+  const t2 = useFire(bar);
+
+  useEffect(() => {
+    t1(prop1);
+    t1();
+    t2();
+  });
+  return CapitalizedCall();
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-capitalized-fn-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-capitalized-fn-call.js
new file mode 100644
index 00000000000..bd9715e91a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-capitalized-fn-call.js
@@ -0,0 +1,16 @@
+// @validateNoCapitalizedCalls @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+const CapitalizedCall = require('shared-runtime').sum;
+
+function Component({prop1, bar}) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+    fire(foo());
+    fire(bar());
+  });
+
+  return CapitalizedCall();
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-eslint-suppressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-eslint-suppressions.expect.md
new file mode 100644
index 00000000000..99774bdd3e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-eslint-suppressions.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {useRef} from 'react';
+
+function Component({props, bar}) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    fire(foo());
+    fire(bar());
+  });
+
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = 'bad';
+  return <button ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime"; // @enableFire @panicThreshold:"none"
+import { useRef } from "react";
+
+function Component(t0) {
+  const { props, bar } = t0;
+  const foo = () => {
+    console.log(props);
+  };
+  const t1 = useFire(foo);
+  const t2 = useFire(bar);
+
+  useEffect(() => {
+    t1(props);
+    t1();
+    t2();
+  });
+
+  const ref = useRef(null);
+
+  ref.current = "bad";
+  return <button ref={ref} />;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-eslint-suppressions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-eslint-suppressions.js
new file mode 100644
index 00000000000..be89a6d3b92
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-eslint-suppressions.js
@@ -0,0 +1,18 @@
+// @enableFire @panicThreshold:"none"
+import {useRef} from 'react';
+
+function Component({props, bar}) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    fire(foo());
+    fire(bar());
+  });
+
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = 'bad';
+  return <button ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-preserve-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-preserve-memo.expect.md
new file mode 100644
index 00000000000..1a22df29410
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-preserve-memo.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+import {sum} from 'shared-runtime';
+
+function Component({prop1, bar}) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+    fire(foo());
+    fire(bar());
+  });
+
+  return useMemo(() => sum(bar), []);
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableFire @panicThreshold:"none"
+import { fire } from "react";
+import { sum } from "shared-runtime";
+
+function Component(t0) {
+  const { prop1, bar } = t0;
+  const foo = () => {
+    console.log(prop1);
+  };
+  const t1 = useFire(foo);
+  const t2 = useFire(bar);
+
+  useEffect(() => {
+    t1(prop1);
+    t1();
+    t2();
+  });
+  return useMemo(() => sum(bar), []);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-preserve-memo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-preserve-memo.js
new file mode 100644
index 00000000000..4ba2de0eb15
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-preserve-memo.js
@@ -0,0 +1,16 @@
+// @validatePreserveExistingMemoizationGuarantees @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+import {sum} from 'shared-runtime';
+
+function Component({prop1, bar}) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+    fire(foo());
+    fire(bar());
+  });
+
+  return useMemo(() => sum(bar), []);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-prop-write.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-prop-write.expect.md
new file mode 100644
index 00000000000..0f1d745537d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-prop-write.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+function Component({prop1}) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+  });
+  prop1.value += 1;
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime"; // @enableFire @panicThreshold:"none"
+import { fire } from "react";
+
+function Component(t0) {
+  const { prop1 } = t0;
+  const foo = () => {
+    console.log(prop1);
+  };
+  const t1 = useFire(foo);
+
+  useEffect(() => {
+    t1(prop1);
+  });
+  prop1.value = prop1.value + 1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-prop-write.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-prop-write.js
new file mode 100644
index 00000000000..6b250a16924
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-prop-write.js
@@ -0,0 +1,12 @@
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+function Component({prop1}) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+  });
+  prop1.value += 1;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md
new file mode 100644
index 00000000000..b55526e9211
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @flow @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+import {print} from 'shared-runtime';
+
+component Component(prop1, ref) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+    bar();
+    fire(foo());
+  });
+
+  print(ref.current);
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime";
+import { fire } from "react";
+import { print } from "shared-runtime";
+
+const Component = React.forwardRef(Component_withRef);
+function Component_withRef(t0, ref) {
+  const { prop1 } = t0;
+  const foo = () => {
+    console.log(prop1);
+  };
+  const t1 = useFire(foo);
+  useEffect(() => {
+    t1(prop1);
+    bar();
+    t1();
+  });
+  print(ref.current);
+  return null;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.js
new file mode 100644
index 00000000000..1dcb5b5c47d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.js
@@ -0,0 +1,17 @@
+// @flow @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+import {print} from 'shared-runtime';
+
+component Component(prop1, ref) {
+  const foo = () => {
+    console.log(prop1);
+  };
+  useEffect(() => {
+    fire(foo(prop1));
+    bar();
+    fire(foo());
+  });
+
+  print(ref.current);
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md
new file mode 100644
index 00000000000..e823939d3ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * In practice, we expect to surface these as actionable errors to the user, in
+ * the same way that invalid `fire` calls error.
+ */
+function Component({prop1}) {
+  const foo = () => {
+    try {
+      console.log(prop1);
+    } finally {
+      console.log('jbrown215');
+    }
+  };
+  useEffect(() => {
+    fire(foo());
+  });
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: [Fire] Untransformed reference to compiler-required feature.
+
+Either remove this `fire` call or ensure it is successfully transformed by the compiler Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (11:4).
+
+error.todo-syntax.ts:18:4
+  16 |   };
+  17 |   useEffect(() => {
+> 18 |     fire(foo());
+     |     ^^^^ Untransformed `fire` call
+  19 |   });
+  20 | }
+  21 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.js
new file mode 100644
index 00000000000..52c224e3219
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.js
@@ -0,0 +1,20 @@
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * In practice, we expect to surface these as actionable errors to the user, in
+ * the same way that invalid `fire` calls error.
+ */
+function Component({prop1}) {
+  const foo = () => {
+    try {
+      console.log(prop1);
+    } finally {
+      console.log('jbrown215');
+    }
+  };
+  useEffect(() => {
+    fire(foo());
+  });
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md
new file mode 100644
index 00000000000..751c9ec21c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+console.log(fire == null);
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: [Fire] Untransformed reference to compiler-required feature.
+
+Either remove this `fire` call or ensure it is successfully transformed by the compiler.
+
+error.untransformed-fire-reference.ts:4:12
+  2 | import {fire} from 'react';
+  3 |
+> 4 | console.log(fire == null);
+    |             ^^^^ Untransformed `fire` call
+  5 |
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.js
new file mode 100644
index 00000000000..afeead08120
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.js
@@ -0,0 +1,4 @@
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+console.log(fire == null);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md
new file mode 100644
index 00000000000..38a27d84780
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * TODO: we should eventually distinguish between `use no memo` and `use no
+ * compiler` directives. The former should be used to *only* disable memoization
+ * features.
+ */
+function Component({props, bar}) {
+  'use no memo';
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    fire(foo());
+    fire(bar());
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: [Fire] Untransformed reference to compiler-required feature.
+
+Either remove this `fire` call or ensure it is successfully transformed by the compiler.
+
+error.use-no-memo.ts:15:4
+  13 |   };
+  14 |   useEffect(() => {
+> 15 |     fire(foo(props));
+     |     ^^^^ Untransformed `fire` call
+  16 |     fire(foo());
+  17 |     fire(bar());
+  18 |   });
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.js
new file mode 100644
index 00000000000..685309a2502
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.js
@@ -0,0 +1,21 @@
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * TODO: we should eventually distinguish between `use no memo` and `use no
+ * compiler` directives. The former should be used to *only* disable memoization
+ * features.
+ */
+function Component({props, bar}) {
+  'use no memo';
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    fire(foo());
+    fire(bar());
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md
new file mode 100644
index 00000000000..3caeef386f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {useRef, AUTODEPS} from 'react';
+import {useSpecialEffect} from 'shared-runtime';
+
+/**
+ * The retry pipeline disables memoization features, which means we need to
+ * provide an alternate implementation of effect dependencies which does not
+ * rely on memoization.
+ */
+function useFoo({cond}) {
+  const ref = useRef();
+  const derived = cond ? ref.current : makeObject();
+  useSpecialEffect(
+    () => {
+      log(derived);
+    },
+    [derived],
+    AUTODEPS
+  );
+  return ref;
+}
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import { useRef, AUTODEPS } from "react";
+import { useSpecialEffect } from "shared-runtime";
+
+/**
+ * The retry pipeline disables memoization features, which means we need to
+ * provide an alternate implementation of effect dependencies which does not
+ * rely on memoization.
+ */
+function useFoo(t0) {
+  const { cond } = t0;
+  const ref = useRef();
+  const derived = cond ? ref.current : makeObject();
+  useSpecialEffect(
+    () => {
+      log(derived);
+    },
+
+    [derived],
+    [derived],
+  );
+  return ref;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js
new file mode 100644
index 00000000000..75d81865018
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js
@@ -0,0 +1,21 @@
+// @inferEffectDependencies @panicThreshold:"none"
+import {useRef, AUTODEPS} from 'react';
+import {useSpecialEffect} from 'shared-runtime';
+
+/**
+ * The retry pipeline disables memoization features, which means we need to
+ * provide an alternate implementation of effect dependencies which does not
+ * rely on memoization.
+ */
+function useFoo({cond}) {
+  const ref = useRef();
+  const derived = cond ? ref.current : makeObject();
+  useSpecialEffect(
+    () => {
+      log(derived);
+    },
+    [derived],
+    AUTODEPS
+  );
+  return ref;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md
new file mode 100644
index 00000000000..06268ea8541
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * Compilation of this file should succeed.
+ */
+function NonFireComponent({prop1}) {
+  /**
+   * This component bails out but does not use fire
+   */
+  const foo = () => {
+    try {
+      console.log(prop1);
+    } finally {
+      console.log('jbrown215');
+    }
+  };
+  useEffect(() => {
+    foo();
+  });
+}
+
+function FireComponent(props) {
+  /**
+   * This component uses fire and compiles successfully
+   */
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire @panicThreshold:"none"
+import { fire } from "react";
+
+/**
+ * Compilation of this file should succeed.
+ */
+function NonFireComponent({ prop1 }) {
+  /**
+   * This component bails out but does not use fire
+   */
+  const foo = () => {
+    try {
+      console.log(prop1);
+    } finally {
+      console.log("jbrown215");
+    }
+  };
+  useEffect(() => {
+    foo();
+  });
+}
+
+function FireComponent(props) {
+  const $ = _c(3);
+
+  const foo = _temp;
+  const t0 = useFire(foo);
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = () => {
+      t0(props);
+    };
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1);
+  return null;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.js
new file mode 100644
index 00000000000..e11ab6b6de8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.js
@@ -0,0 +1,35 @@
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * Compilation of this file should succeed.
+ */
+function NonFireComponent({prop1}) {
+  /**
+   * This component bails out but does not use fire
+   */
+  const foo = () => {
+    try {
+      console.log(prop1);
+    } finally {
+      console.log('jbrown215');
+    }
+  };
+  useEffect(() => {
+    foo();
+  });
+}
+
+function FireComponent(props) {
+  /**
+   * This component uses fire and compiles successfully
+   */
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-validate-conditional-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-validate-conditional-hook.expect.md
new file mode 100644
index 00000000000..0b0be812791
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-validate-conditional-hook.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire, useEffect} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * When @enableFire is specified, retry compilation with validation passes (e.g.
+ * hook usage) disabled
+ */
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+
+  if (props.cond) {
+    useEffect(() => {
+      fire(foo(props));
+    });
+  }
+
+  return <Stringify />;
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime"; // @enableFire @panicThreshold:"none"
+import { fire, useEffect } from "react";
+import { Stringify } from "shared-runtime";
+
+/**
+ * When @enableFire is specified, retry compilation with validation passes (e.g.
+ * hook usage) disabled
+ */
+function Component(props) {
+  const foo = _temp;
+
+  if (props.cond) {
+    const t0 = useFire(foo);
+    useEffect(() => {
+      t0(props);
+    });
+  }
+  return <Stringify />;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-validate-conditional-hook.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-validate-conditional-hook.js
new file mode 100644
index 00000000000..602f121ad7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-validate-conditional-hook.js
@@ -0,0 +1,21 @@
+// @enableFire @panicThreshold:"none"
+import {fire, useEffect} from 'react';
+import {Stringify} from 'shared-runtime';
+
+/**
+ * When @enableFire is specified, retry compilation with validation passes (e.g.
+ * hook usage) disabled
+ */
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+
+  if (props.cond) {
+    useEffect(() => {
+      fire(foo(props));
+    });
+  }
+
+  return <Stringify />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md
new file mode 100644
index 00000000000..36146cff00f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
+import { fire } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  const foo = _temp;
+  const t0 = useFire(foo);
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = () => {
+      t0(props);
+    };
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1);
+  return null;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.js
new file mode 100644
index 00000000000..2f7a72e4eed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/basic.js
@@ -0,0 +1,13 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md
new file mode 100644
index 00000000000..de003f7007f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    function nested() {
+      function nestedAgain() {
+        function nestedThrice() {
+          fire(foo(props));
+        }
+        nestedThrice();
+      }
+      nestedAgain();
+    }
+    nested();
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
+import { fire } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  const foo = _temp;
+  const t0 = useFire(foo);
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = () => {
+      const nested = function nested() {
+        const nestedAgain = function nestedAgain() {
+          const nestedThrice = function nestedThrice() {
+            t0(props);
+          };
+
+          nestedThrice();
+        };
+
+        nestedAgain();
+      };
+
+      nested();
+    };
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1);
+  return null;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.js
new file mode 100644
index 00000000000..b056c3f53a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/deep-scope.js
@@ -0,0 +1,22 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    function nested() {
+      function nestedAgain() {
+        function nestedThrice() {
+          fire(foo(props));
+        }
+        nestedThrice();
+      }
+      nestedAgain();
+    }
+    nested();
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md
new file mode 100644
index 00000000000..1eb6bf66e96
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    function nested() {
+      fire(foo(props));
+      foo(props);
+    }
+
+    nested();
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+All uses of foo must be either used with a fire() call in this effect or not used with a fire() call at all. foo was used with fire() on line 10:10 in this effect.
+
+error.invalid-mix-fire-and-no-fire.ts:11:6
+   9 |     function nested() {
+  10 |       fire(foo(props));
+> 11 |       foo(props);
+     |       ^^^ Cannot compile `fire`
+  12 |     }
+  13 |
+  14 |     nested();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.js
new file mode 100644
index 00000000000..ee2f915a34e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-mix-fire-and-no-fire.js
@@ -0,0 +1,18 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    function nested() {
+      fire(foo(props));
+      foo(props);
+    }
+
+    nested();
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md
new file mode 100644
index 00000000000..c519d43fb41
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component({bar, baz}) {
+  const foo = () => {
+    console.log(bar, baz);
+  };
+  useEffect(() => {
+    fire(foo(bar), baz);
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+fire() can only take in a single call expression as an argument but received multiple arguments.
+
+error.invalid-multiple-args.ts:9:4
+   7 |   };
+   8 |   useEffect(() => {
+>  9 |     fire(foo(bar), baz);
+     |     ^^^^^^^^^^^^^^^^^^^ Cannot compile `fire`
+  10 |   });
+  11 |
+  12 |   return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.js
new file mode 100644
index 00000000000..980b0dfcb5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-multiple-args.js
@@ -0,0 +1,13 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component({bar, baz}) {
+  const foo = () => {
+    console.log(bar, baz);
+  };
+  useEffect(() => {
+    fire(foo(bar), baz);
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md
new file mode 100644
index 00000000000..2e767c3c71e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @enable
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    useEffect(() => {
+      function nested() {
+        fire(foo(props));
+      }
+
+      nested();
+    });
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call useEffect within a function expression.
+
+error.invalid-nested-use-effect.ts:9:4
+   7 |   };
+   8 |   useEffect(() => {
+>  9 |     useEffect(() => {
+     |     ^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+  10 |       function nested() {
+  11 |         fire(foo(props));
+  12 |       }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.js
new file mode 100644
index 00000000000..16f24257244
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.js
@@ -0,0 +1,19 @@
+// @enable
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    useEffect(() => {
+      function nested() {
+        fire(foo(props));
+      }
+
+      nested();
+    });
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md
new file mode 100644
index 00000000000..40c4bc5394d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(props);
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+`fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed.
+
+error.invalid-not-call.ts:9:4
+   7 |   };
+   8 |   useEffect(() => {
+>  9 |     fire(props);
+     |     ^^^^^^^^^^^ Cannot compile `fire`
+  10 |   });
+  11 |
+  12 |   return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.js
new file mode 100644
index 00000000000..3d1ae3658fd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-not-call.js
@@ -0,0 +1,13 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(props);
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md
new file mode 100644
index 00000000000..cdb0726f2e1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire, useCallback} from 'react';
+
+function Component({props, bar}) {
+  const foo = () => {
+    console.log(props);
+  };
+  fire(foo(props));
+
+  useCallback(() => {
+    fire(foo(props));
+  }, [foo, props]);
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot compile `fire`
+
+Cannot use `fire` outside of a useEffect function.
+
+error.invalid-outside-effect.ts:8:2
+   6 |     console.log(props);
+   7 |   };
+>  8 |   fire(foo(props));
+     |   ^^^^ Cannot compile `fire`
+   9 |
+  10 |   useCallback(() => {
+  11 |     fire(foo(props));
+
+Error: Cannot compile `fire`
+
+Cannot use `fire` outside of a useEffect function.
+
+error.invalid-outside-effect.ts:11:4
+   9 |
+  10 |   useCallback(() => {
+> 11 |     fire(foo(props));
+     |     ^^^^ Cannot compile `fire`
+  12 |   }, [foo, props]);
+  13 |
+  14 |   return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.js
new file mode 100644
index 00000000000..8ac9be6d764
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-outside-effect.js
@@ -0,0 +1,15 @@
+// @enableFire
+import {fire, useCallback} from 'react';
+
+function Component({props, bar}) {
+  const foo = () => {
+    console.log(props);
+  };
+  fire(foo(props));
+
+  useCallback(() => {
+    fire(foo(props));
+  }, [foo, props]);
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md
new file mode 100644
index 00000000000..d82f1ee1b22
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+
+  const deps = [foo, props];
+
+  useEffect(() => {
+    fire(foo(props));
+  }, deps);
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+You must use an array literal for an effect dependency array when that effect uses `fire()`.
+
+error.invalid-rewrite-deps-no-array-literal.ts:13:5
+  11 |   useEffect(() => {
+  12 |     fire(foo(props));
+> 13 |   }, deps);
+     |      ^^^^ Cannot compile `fire`
+  14 |
+  15 |   return null;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.js
new file mode 100644
index 00000000000..b82f735425e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-no-array-literal.js
@@ -0,0 +1,16 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+
+  const deps = [foo, props];
+
+  useEffect(() => {
+    fire(foo(props));
+  }, deps);
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md
new file mode 100644
index 00000000000..a8418136302
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+
+  const deps = [foo, props];
+
+  useEffect(
+    () => {
+      fire(foo(props));
+    },
+    ...deps
+  );
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+You must use an array literal for an effect dependency array when that effect uses `fire()`.
+
+error.invalid-rewrite-deps-spread.ts:15:7
+  13 |       fire(foo(props));
+  14 |     },
+> 15 |     ...deps
+     |        ^^^^ Cannot compile `fire`
+  16 |   );
+  17 |
+  18 |   return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.js
new file mode 100644
index 00000000000..27d1de4f463
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-rewrite-deps-spread.js
@@ -0,0 +1,19 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+
+  const deps = [foo, props];
+
+  useEffect(
+    () => {
+      fire(foo(props));
+    },
+    ...deps
+  );
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md
new file mode 100644
index 00000000000..dcd302bbe10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(...foo);
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+fire() can only take in a single call expression as an argument but received a spread argument.
+
+error.invalid-spread.ts:9:4
+   7 |   };
+   8 |   useEffect(() => {
+>  9 |     fire(...foo);
+     |     ^^^^^^^^^^^^ Cannot compile `fire`
+  10 |   });
+  11 |
+  12 |   return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.js
new file mode 100644
index 00000000000..68e317588bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-spread.js
@@ -0,0 +1,13 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(...foo);
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md
new file mode 100644
index 00000000000..67410297f30
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(props.foo());
+  });
+
+  return null;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot compile `fire`
+
+`fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed.
+
+error.todo-method.ts:9:4
+   7 |   };
+   8 |   useEffect(() => {
+>  9 |     fire(props.foo());
+     |     ^^^^^^^^^^^^^^^^^ Cannot compile `fire`
+  10 |   });
+  11 |
+  12 |   return null;
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.js
new file mode 100644
index 00000000000..c75622ca5e7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.todo-method.js
@@ -0,0 +1,13 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(props.foo());
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/hook-guard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/hook-guard.expect.md
new file mode 100644
index 00000000000..d94cce55884
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/hook-guard.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @enableFire @enableEmitHookGuards
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { $dispatcherGuard } from "react-compiler-runtime";
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire @enableEmitHookGuards
+import { fire } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  try {
+    $dispatcherGuard(0);
+    const foo = _temp;
+    const t0 = (function () {
+      try {
+        $dispatcherGuard(2);
+        return useFire(foo);
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+    let t1;
+    if ($[0] !== props || $[1] !== t0) {
+      t1 = () => {
+        t0(props);
+      };
+      $[0] = props;
+      $[1] = t0;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    (function () {
+      try {
+        $dispatcherGuard(2);
+        return useEffect(t1);
+      } finally {
+        $dispatcherGuard(3);
+      }
+    })();
+    return null;
+  } finally {
+    $dispatcherGuard(1);
+  }
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/hook-guard.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/hook-guard.js
new file mode 100644
index 00000000000..bc0b1a2d7ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/hook-guard.js
@@ -0,0 +1,13 @@
+// @enableFire @enableEmitHookGuards
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md
new file mode 100644
index 00000000000..796c4397eec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    function nested() {
+      fire(foo(props));
+      function innerNested() {
+        fire(foo(props));
+      }
+    }
+
+    nested();
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
+import { fire } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  const foo = _temp;
+  const t0 = useFire(foo);
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = () => {
+      t0(props);
+      const nested = function nested() {
+        t0(props);
+      };
+
+      nested();
+    };
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1);
+  return null;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.js
new file mode 100644
index 00000000000..54410680e63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/multiple-scope.js
@@ -0,0 +1,21 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    function nested() {
+      fire(foo(props));
+      function innerNested() {
+        fire(foo(props));
+      }
+    }
+
+    nested();
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md
new file mode 100644
index 00000000000..e528823550f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    fire(foo(props));
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
+import { fire } from "react";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props) {
+    t0 = () => {
+      console.log(props);
+    };
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const foo = t0;
+  const t1 = useFire(foo);
+  let t2;
+  if ($[2] !== props || $[3] !== t1) {
+    t2 = () => {
+      t1(props);
+      t1(props);
+    };
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t2);
+  return null;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.js
new file mode 100644
index 00000000000..14e1cb06b1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repeated-calls.js
@@ -0,0 +1,14 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = () => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+    fire(foo(props));
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repro-dont-add-hook-guards-on-retry.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repro-dont-add-hook-guards-on-retry.expect.md
new file mode 100644
index 00000000000..75c46e196ea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repro-dont-add-hook-guards-on-retry.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @flow @enableEmitHookGuards @panicThreshold:"none" @enableFire
+import {useEffect, fire} from 'react';
+
+function Component(props, useDynamicHook) {
+  'use memo';
+  useDynamicHook();
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return <div>hello world</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { useFire } from "react/compiler-runtime";
+import { useEffect, fire } from "react";
+
+function Component(props, useDynamicHook) {
+  "use memo";
+
+  useDynamicHook();
+  const foo = _temp;
+  const t0 = useFire(foo);
+
+  useEffect(() => {
+    t0(props);
+  });
+  return <div>hello world</div>;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repro-dont-add-hook-guards-on-retry.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repro-dont-add-hook-guards-on-retry.js
new file mode 100644
index 00000000000..5fc11c9a823
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/repro-dont-add-hook-guards-on-retry.js
@@ -0,0 +1,15 @@
+// @flow @enableEmitHookGuards @panicThreshold:"none" @enableFire
+import {useEffect, fire} from 'react';
+
+function Component(props, useDynamicHook) {
+  'use memo';
+  useDynamicHook();
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+
+  return <div>hello world</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.expect.md
new file mode 100644
index 00000000000..e569536ad3a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  }, [foo, props]);
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
+import { fire } from "react";
+
+function Component(props) {
+  const $ = _c(4);
+  const foo = _temp;
+  const t0 = useFire(foo);
+  let t1;
+  let t2;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = () => {
+      t0(props);
+    };
+    t2 = [t0, props];
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  return null;
+}
+function _temp(props_0) {
+  console.log(props_0);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.js
new file mode 100644
index 00000000000..ad1af704c1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/rewrite-deps.js
@@ -0,0 +1,13 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  const foo = props => {
+    console.log(props);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  }, [foo, props]);
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md
new file mode 100644
index 00000000000..92dbf9843ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.expect.md
@@ -0,0 +1,80 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component({bar, baz}) {
+  const foo = () => {
+    console.log(bar);
+  };
+  useEffect(() => {
+    fire(foo(bar));
+    fire(baz(bar));
+  });
+
+  useEffect(() => {
+    fire(foo(bar));
+  });
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
+import { fire } from "react";
+
+function Component(t0) {
+  const $ = _c(9);
+  const { bar, baz } = t0;
+  let t1;
+  if ($[0] !== bar) {
+    t1 = () => {
+      console.log(bar);
+    };
+    $[0] = bar;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const foo = t1;
+  const t2 = useFire(foo);
+  const t3 = useFire(baz);
+  let t4;
+  if ($[2] !== bar || $[3] !== t2 || $[4] !== t3) {
+    t4 = () => {
+      t2(bar);
+      t3(bar);
+    };
+    $[2] = bar;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  useEffect(t4);
+  let t5;
+  if ($[6] !== bar || $[7] !== t2) {
+    t5 = () => {
+      t2(bar);
+    };
+    $[6] = bar;
+    $[7] = t2;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  useEffect(t5);
+  return null;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.js
new file mode 100644
index 00000000000..5cb51e9bd3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/shared-hook-calls.js
@@ -0,0 +1,18 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component({bar, baz}) {
+  const foo = () => {
+    console.log(bar);
+  };
+  useEffect(() => {
+    fire(foo(bar));
+    fire(baz(bar));
+  });
+
+  useEffect(() => {
+    fire(foo(bar));
+  });
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/use-effect-no-args-no-op.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/use-effect-no-args-no-op.expect.md
new file mode 100644
index 00000000000..f482ac44ddd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/use-effect-no-args-no-op.expect.md
@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  useEffect();
+
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+// @enableFire
+import { fire } from "react";
+
+function Component(props) {
+  useEffect();
+  return null;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/use-effect-no-args-no-op.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/use-effect-no-args-no-op.js
new file mode 100644
index 00000000000..731c45df677
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/use-effect-no-args-no-op.js
@@ -0,0 +1,8 @@
+// @enableFire
+import {fire} from 'react';
+
+function Component(props) {
+  useEffect();
+
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-alias-fields.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-alias-fields.expect.md
new file mode 100644
index 00000000000..274cc5c3167
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-alias-fields.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = {};
+  let p = {};
+  let q = {};
+  let y = {};
+
+  x.y = y;
+  p.y = x.y;
+  q.y = p.y;
+
+  mutate(q);
+}
+
+```
+
+## Code
+
+```javascript
+function component() {
+  const x = {};
+  const p = {};
+  const q = {};
+  const y = {};
+
+  x.y = y;
+  p.y = x.y;
+  q.y = p.y;
+
+  mutate(q);
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-alias-fields.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-alias-fields.js
new file mode 100644
index 00000000000..a06e29f867d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-alias-fields.js
@@ -0,0 +1,12 @@
+function component() {
+  let x = {};
+  let p = {};
+  let q = {};
+  let y = {};
+
+  x.y = y;
+  p.y = x.y;
+  q.y = p.y;
+
+  mutate(q);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-array.expect.md
new file mode 100644
index 00000000000..1cd97874c37
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-array.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+const {mutate} = require('shared-runtime');
+
+function Component(props) {
+  const x = {};
+  const y = {};
+  const items = [x, y];
+  items.pop();
+  <div>{items}</div>; // note: enablePreserveExistingMemoizationGuarantees only visits function expressions, not arrays, so this doesn't freeze x/y
+  mutate(y); // ok! not part of `items` anymore bc of items.pop()
+  return [x, y, items];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+const { mutate } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = {};
+    const y = {};
+    const items = [x, y];
+    items.pop();
+    mutate(y);
+    t0 = [x, y, items];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},{"wat0":"joe"},["[[ cyclic ref *1 ]]"]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-array.js
new file mode 100644
index 00000000000..6a35431cc32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-array.js
@@ -0,0 +1,17 @@
+// @enablePreserveExistingMemoizationGuarantees
+const {mutate} = require('shared-runtime');
+
+function Component(props) {
+  const x = {};
+  const y = {};
+  const items = [x, y];
+  items.pop();
+  <div>{items}</div>; // note: enablePreserveExistingMemoizationGuarantees only visits function expressions, not arrays, so this doesn't freeze x/y
+  mutate(y); // ok! not part of `items` anymore bc of items.pop()
+  return [x, y, items];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-function-expressions.expect.md
new file mode 100644
index 00000000000..107833dad98
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-function-expressions.expect.md
@@ -0,0 +1,90 @@
+
+## Input
+
+```javascript
+// @enableTransitivelyFreezeFunctionExpressions
+function Component(props) {
+  const {data, loadNext, isLoadingNext} =
+    usePaginationFragment(props.key).items ?? [];
+
+  const loadMoreWithTiming = () => {
+    if (data.length === 0) {
+      return;
+    }
+    loadNext();
+  };
+
+  useEffect(() => {
+    if (isLoadingNext) {
+      return;
+    }
+    loadMoreWithTiming();
+  }, [isLoadingNext, loadMoreWithTiming]);
+
+  const items = data.map(x => x);
+
+  return items;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTransitivelyFreezeFunctionExpressions
+function Component(props) {
+  const $ = _c(9);
+  const { data, loadNext, isLoadingNext } =
+    usePaginationFragment(props.key).items ?? [];
+  let t0;
+  if ($[0] !== data.length || $[1] !== loadNext) {
+    t0 = () => {
+      if (data.length === 0) {
+        return;
+      }
+
+      loadNext();
+    };
+    $[0] = data.length;
+    $[1] = loadNext;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const loadMoreWithTiming = t0;
+  let t1;
+  let t2;
+  if ($[3] !== isLoadingNext || $[4] !== loadMoreWithTiming) {
+    t1 = () => {
+      if (isLoadingNext) {
+        return;
+      }
+      loadMoreWithTiming();
+    };
+    t2 = [isLoadingNext, loadMoreWithTiming];
+    $[3] = isLoadingNext;
+    $[4] = loadMoreWithTiming;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[7] !== data) {
+    t3 = data.map(_temp);
+    $[7] = data;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const items = t3;
+  return items;
+}
+function _temp(x) {
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-function-expressions.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-function-expressions.js
new file mode 100644
index 00000000000..d0fa265fa7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transitive-freeze-function-expressions.js
@@ -0,0 +1,23 @@
+// @enableTransitivelyFreezeFunctionExpressions
+function Component(props) {
+  const {data, loadNext, isLoadingNext} =
+    usePaginationFragment(props.key).items ?? [];
+
+  const loadMoreWithTiming = () => {
+    if (data.length === 0) {
+      return;
+    }
+    loadNext();
+  };
+
+  useEffect(() => {
+    if (isLoadingNext) {
+      return;
+    }
+    loadMoreWithTiming();
+  }, [isLoadingNext, loadMoreWithTiming]);
+
+  const items = data.map(x => x);
+
+  return items;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/trivial.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/trivial.expect.md
new file mode 100644
index 00000000000..f350c911fc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/trivial.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+function foo(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/trivial.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/trivial.js
new file mode 100644
index 00000000000..34d913c363b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/trivial.js
@@ -0,0 +1,9 @@
+function foo(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md
new file mode 100644
index 00000000000..b90d072ced8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let y;
+  let x = [];
+  try {
+    // throws x
+    throwInput(x);
+  } catch (e) {
+    // e = x
+    y = e; // y = x
+  }
+  y.push(null);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    let y;
+    x = [];
+    try {
+      throwInput(x);
+    } catch (t0) {
+      const e = t0;
+
+      y = e;
+    }
+
+    y.push(null);
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.js
new file mode 100644
index 00000000000..58df3967b36
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.js
@@ -0,0 +1,20 @@
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let y;
+  let x = [];
+  try {
+    // throws x
+    throwInput(x);
+  } catch (e) {
+    // e = x
+    y = e; // y = x
+  }
+  y.push(null);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md
new file mode 100644
index 00000000000..522325e2311
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = props.default;
+  try {
+  } catch (e) {
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{default: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const x = props.default;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ default: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.js
new file mode 100644
index 00000000000..d574fb57fc5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.js
@@ -0,0 +1,13 @@
+function Component(props) {
+  let x = props.default;
+  try {
+  } catch (e) {
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{default: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md
new file mode 100644
index 00000000000..2c27360c9fe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md
@@ -0,0 +1,100 @@
+
+## Input
+
+```javascript
+import {mutate, setProperty, throwErrorWithMessageIf} from 'shared-runtime';
+
+function useFoo({value, cond}) {
+  let y = [value];
+  let x = {cond};
+
+  try {
+    mutate(x);
+    throwErrorWithMessageIf(x.cond, 'error');
+  } catch {
+    setProperty(x, 'henderson');
+    return x;
+  }
+  setProperty(x, 'nevada');
+  y.push(x);
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 4, cond: true}],
+  sequentialRenders: [
+    {value: 4, cond: true},
+    {value: 5, cond: true},
+    {value: 5, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { mutate, setProperty, throwErrorWithMessageIf } from "shared-runtime";
+
+function useFoo(t0) {
+  const $ = _c(6);
+  const { value, cond } = t0;
+  let t1;
+  let y;
+  if ($[0] !== cond || $[1] !== value) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      y = [value];
+      let x;
+      if ($[4] !== cond) {
+        x = { cond };
+        try {
+          mutate(x);
+          throwErrorWithMessageIf(x.cond, "error");
+        } catch {
+          setProperty(x, "henderson");
+          t1 = x;
+          break bb0;
+        }
+
+        setProperty(x, "nevada");
+        $[4] = cond;
+        $[5] = x;
+      } else {
+        x = $[5];
+      }
+      y.push(x);
+    }
+    $[0] = cond;
+    $[1] = value;
+    $[2] = t1;
+    $[3] = y;
+  } else {
+    t1 = $[2];
+    y = $[3];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: 4, cond: true }],
+  sequentialRenders: [
+    { value: 4, cond: true },
+    { value: 5, cond: true },
+    { value: 5, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"cond":true,"wat0":"joe","wat1":"henderson"}
+{"cond":true,"wat0":"joe","wat1":"henderson"}
+[5,{"cond":false,"wat0":"joe","wat1":"nevada"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.ts
new file mode 100644
index 00000000000..d0ee4788c23
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.ts
@@ -0,0 +1,28 @@
+import {mutate, setProperty, throwErrorWithMessageIf} from 'shared-runtime';
+
+function useFoo({value, cond}) {
+  let y = [value];
+  let x = {cond};
+
+  try {
+    mutate(x);
+    throwErrorWithMessageIf(x.cond, 'error');
+  } catch {
+    setProperty(x, 'henderson');
+    return x;
+  }
+  setProperty(x, 'nevada');
+  y.push(x);
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: 4, cond: true}],
+  sequentialRenders: [
+    {value: 4, cond: true},
+    {value: 5, cond: true},
+    {value: 5, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-maybe-null-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-maybe-null-dependency.expect.md
new file mode 100644
index 00000000000..52b359839f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-maybe-null-dependency.expect.md
@@ -0,0 +1,78 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject: {value: {inner: number}} | null) {
+  const y = [];
+  try {
+    y.push(identity(maybeNullObject.value.inner));
+  } catch {
+    y.push('null');
+  }
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [null],
+  sequentialRenders: [null, {value: 2}, {value: 3}, null],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject) {
+  const $ = _c(4);
+  let y;
+  if ($[0] !== maybeNullObject) {
+    y = [];
+    try {
+      let t0;
+      if ($[2] !== maybeNullObject.value.inner) {
+        t0 = identity(maybeNullObject.value.inner);
+        $[2] = maybeNullObject.value.inner;
+        $[3] = t0;
+      } else {
+        t0 = $[3];
+      }
+      y.push(t0);
+    } catch {
+      y.push("null");
+    }
+    $[0] = maybeNullObject;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [null],
+  sequentialRenders: [null, { value: 2 }, { value: 3 }, null],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["null"]
+[null]
+[null]
+["null"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-maybe-null-dependency.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-maybe-null-dependency.ts
new file mode 100644
index 00000000000..555ace19405
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-maybe-null-dependency.ts
@@ -0,0 +1,22 @@
+import {identity} from 'shared-runtime';
+
+/**
+ * Not safe to hoist read of maybeNullObject.value.inner outside of the
+ * try-catch block, as that might throw
+ */
+function useFoo(maybeNullObject: {value: {inner: number}} | null) {
+  const y = [];
+  try {
+    y.push(identity(maybeNullObject.value.inner));
+  } catch {
+    y.push('null');
+  }
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [null],
+  sequentialRenders: [null, {value: 2}, {value: 3}, null],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md
new file mode 100644
index 00000000000..cab72226d27
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+const {shallowCopy, throwErrorWithMessage} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  try {
+    x.push(throwErrorWithMessage('oops'));
+  } catch {
+    x.push(shallowCopy({a: props.a}));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { shallowCopy, throwErrorWithMessage } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(5);
+  let x;
+  if ($[0] !== props) {
+    x = [];
+    try {
+      let t0;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = throwErrorWithMessage("oops");
+        $[2] = t0;
+      } else {
+        t0 = $[2];
+      }
+      x.push(t0);
+    } catch {
+      let t0;
+      if ($[3] !== props.a) {
+        t0 = shallowCopy({ a: props.a });
+        $[3] = props.a;
+        $[4] = t0;
+      } else {
+        t0 = $[4];
+      }
+      x.push(t0);
+    }
+    $[0] = props;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{"a":1}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.js
new file mode 100644
index 00000000000..71764a82445
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.js
@@ -0,0 +1,16 @@
+const {shallowCopy, throwErrorWithMessage} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  try {
+    x.push(throwErrorWithMessage('oops'));
+  } catch {
+    x.push(shallowCopy({a: props.a}));
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md
new file mode 100644
index 00000000000..61eb45f84ab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = props.default;
+  try {
+    // note: has to be a primitive, we want an instruction that cannot throw
+    // to ensure there is no maybe-throw terminal
+    const y = 42;
+    return y;
+  } catch (e) {
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{default: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x;
+  return 42;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ default: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.js
new file mode 100644
index 00000000000..2a0c831868b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.js
@@ -0,0 +1,17 @@
+function Component(props) {
+  let x = props.default;
+  try {
+    // note: has to be a primitive, we want an instruction that cannot throw
+    // to ensure there is no maybe-throw terminal
+    const y = 42;
+    return y;
+  } catch (e) {
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{default: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md
new file mode 100644
index 00000000000..c09c6707dbf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = props.default;
+  const y = 42;
+  try {
+    // note: this constant propagates so that we know
+    // the handler is unreachable
+    return y;
+  } catch (e) {
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{default: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x;
+  return 42;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ default: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.js
new file mode 100644
index 00000000000..4f562212ec7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.js
@@ -0,0 +1,17 @@
+function Component(props) {
+  let x = props.default;
+  const y = 42;
+  try {
+    // note: this constant propagates so that we know
+    // the handler is unreachable
+    return y;
+  } catch (e) {
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{default: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch-escaping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch-escaping.expect.md
new file mode 100644
index 00000000000..5e57a460181
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch-escaping.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(3);
+  let x;
+  if ($[0] !== props.e || $[1] !== props.y) {
+    try {
+      const y = [];
+      y.push(props.y);
+      throwInput(y);
+    } catch (t0) {
+      const e = t0;
+      e.push(props.e);
+      x = e;
+    }
+    $[0] = props.e;
+    $[1] = props.y;
+    $[2] = x;
+  } else {
+    x = $[2];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: "foo", e: "bar" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","bar"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch-escaping.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch-escaping.js
new file mode 100644
index 00000000000..a4bf4699ec9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch-escaping.js
@@ -0,0 +1,19 @@
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    x = e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch.expect.md
new file mode 100644
index 00000000000..921d657e160
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    return e;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.e || $[1] !== props.y) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      try {
+        const y = [];
+        y.push(props.y);
+        throwInput(y);
+      } catch (t1) {
+        const e = t1;
+        e.push(props.e);
+        t0 = e;
+        break bb0;
+      }
+    }
+    $[0] = props.e;
+    $[1] = props.y;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ y: "foo", e: "bar" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["foo","bar"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch.js
new file mode 100644
index 00000000000..48df48c4546
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-value-modified-in-catch.js
@@ -0,0 +1,18 @@
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  try {
+    const y = [];
+    y.push(props.y);
+    throwInput(y);
+  } catch (e) {
+    e.push(props.e);
+    return e;
+  }
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{y: 'foo', e: 'bar'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-catch-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-catch-param.expect.md
new file mode 100644
index 00000000000..562c0bc1c86
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-catch-param.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x = [];
+  try {
+    // foo could throw its argument...
+    throwInput(x);
+  } catch (e) {
+    // ... in which case this could be mutating `x`!
+    e.push(null);
+    return e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      try {
+        throwInput(x);
+      } catch (t1) {
+        const e = t1;
+        e.push(null);
+        t0 = e;
+        break bb0;
+      }
+    }
+    $[0] = t0;
+    $[1] = x;
+  } else {
+    t0 = $[0];
+    x = $[1];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-catch-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-catch-param.js
new file mode 100644
index 00000000000..8120d25f771
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-catch-param.js
@@ -0,0 +1,19 @@
+const {throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x = [];
+  try {
+    // foo could throw its argument...
+    throwInput(x);
+  } catch (e) {
+    // ... in which case this could be mutating `x`!
+    e.push(null);
+    return e;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-return.expect.md
new file mode 100644
index 00000000000..71a59aba2f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-return.expect.md
@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+const {shallowCopy, throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x = [];
+  try {
+    const y = shallowCopy({});
+    if (y == null) {
+      return;
+    }
+    x.push(throwInput(y));
+  } catch {
+    return null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { shallowCopy, throwInput } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      x = [];
+      try {
+        const y = shallowCopy({});
+        if (y == null) {
+          t0 = undefined;
+          break bb0;
+        }
+
+        x.push(throwInput(y));
+      } catch {
+        t0 = null;
+        break bb0;
+      }
+    }
+    $[0] = t0;
+    $[1] = x;
+  } else {
+    t0 = $[0];
+    x = $[1];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-return.js
new file mode 100644
index 00000000000..c5226de9beb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-with-return.js
@@ -0,0 +1,20 @@
+const {shallowCopy, throwInput} = require('shared-runtime');
+
+function Component(props) {
+  let x = [];
+  try {
+    const y = shallowCopy({});
+    if (y == null) {
+      return;
+    }
+    x.push(throwInput(y));
+  } catch {
+    return null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.expect.md
new file mode 100644
index 00000000000..e8f6af8d582
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+import {throwInput} from 'shared-runtime';
+
+function Component(props) {
+  const callback = () => {
+    try {
+      throwInput([props.value]);
+    } catch (e) {
+      return e;
+    }
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { throwInput } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const callback = () => {
+      try {
+        throwInput([props.value]);
+      } catch (t1) {
+        const e = t1;
+        return e;
+      }
+    };
+    t0 = callback();
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.js
new file mode 100644
index 00000000000..e6b16357685
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.js
@@ -0,0 +1,17 @@
+import {throwInput} from 'shared-runtime';
+
+function Component(props) {
+  const callback = () => {
+    try {
+      throwInput([props.value]);
+    } catch (e) {
+      return e;
+    }
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression.expect.md
new file mode 100644
index 00000000000..5f55ec61429
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const callback = () => {
+    try {
+      return [];
+    } catch (e) {
+      return;
+    }
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  const callback = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = callback();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  try {
+    return [];
+  } catch (t0) {
+    return;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression.js
new file mode 100644
index 00000000000..bd1acf10ffa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression.js
@@ -0,0 +1,15 @@
+function Component(props) {
+  const callback = () => {
+    try {
+      return [];
+    } catch (e) {
+      return;
+    }
+  };
+  return callback();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md
new file mode 100644
index 00000000000..2b4fab6fefb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+const {throwErrorWithMessage, shallowCopy} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  try {
+    x.push(throwErrorWithMessage('oops'));
+  } catch {
+    x.push(shallowCopy({}));
+  }
+  x.push(props.value); // extend the mutable range to include the try/catch
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { throwErrorWithMessage, shallowCopy } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== props.value) {
+    x = [];
+    try {
+      let t0;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = throwErrorWithMessage("oops");
+        $[2] = t0;
+      } else {
+        t0 = $[2];
+      }
+      x.push(t0);
+    } catch {
+      let t0;
+      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = shallowCopy({});
+        $[3] = t0;
+      } else {
+        t0 = $[3];
+      }
+      x.push(t0);
+    }
+
+    x.push(props.value);
+    $[0] = props.value;
+    $[1] = x;
+  } else {
+    x = $[1];
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},null]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.js
new file mode 100644
index 00000000000..edbb1659339
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.js
@@ -0,0 +1,17 @@
+const {throwErrorWithMessage, shallowCopy} = require('shared-runtime');
+
+function Component(props) {
+  const x = [];
+  try {
+    x.push(throwErrorWithMessage('oops'));
+  } catch {
+    x.push(shallowCopy({}));
+  }
+  x.push(props.value); // extend the mutable range to include the try/catch
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.expect.md
new file mode 100644
index 00000000000..388ab73746f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+import {throwInput} from 'shared-runtime';
+
+function Component(props) {
+  const object = {
+    foo() {
+      try {
+        throwInput([props.value]);
+      } catch (e) {
+        return e;
+      }
+    },
+  };
+  return object.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { throwInput } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    const object = {
+      foo() {
+        try {
+          throwInput([props.value]);
+        } catch (t1) {
+          const e = t1;
+          return e;
+        }
+      },
+    };
+    t0 = object.foo();
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.js
new file mode 100644
index 00000000000..8088dcf1e97
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.js
@@ -0,0 +1,19 @@
+import {throwInput} from 'shared-runtime';
+
+function Component(props) {
+  const object = {
+    foo() {
+      try {
+        throwInput([props.value]);
+      } catch (e) {
+        return e;
+      }
+    },
+  };
+  return object.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method.expect.md
new file mode 100644
index 00000000000..45f525eb156
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const object = {
+    foo() {
+      try {
+        return [];
+      } catch (e) {
+        return;
+      }
+    },
+  };
+  return object.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const object = {
+      foo() {
+        try {
+          return [];
+        } catch (t1) {
+          return;
+        }
+      },
+    };
+    t0 = object.foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) []
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method.js
new file mode 100644
index 00000000000..d2e95e60803
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method.js
@@ -0,0 +1,17 @@
+function Component(props) {
+  const object = {
+    foo() {
+      try {
+        return [];
+      } catch (e) {
+        return;
+      }
+    },
+  };
+  return object.foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch.expect.md
new file mode 100644
index 00000000000..73aad884b2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+const {throwErrorWithMessage} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  try {
+    x = throwErrorWithMessage('oops');
+  } catch {
+    x = null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const { throwErrorWithMessage } = require("shared-runtime");
+
+function Component(props) {
+  const $ = _c(1);
+  let x;
+  try {
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = throwErrorWithMessage("oops");
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    x = t0;
+  } catch {
+    x = null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch.js
new file mode 100644
index 00000000000..13202dc9acf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch.js
@@ -0,0 +1,16 @@
+const {throwErrorWithMessage} = require('shared-runtime');
+
+function Component(props) {
+  let x;
+  try {
+    x = throwErrorWithMessage('oops');
+  } catch {
+    x = null;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.expect.md
new file mode 100644
index 00000000000..505224cf9ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+type Status = 'pending' | 'success' | 'error';
+
+const StatusIndicator = ({status}: {status: Status}) => {
+  return <div className={`status-${status}`}>Status: {status}</div>;
+};
+
+const Component = ({status = 'pending' as Status}) => {
+  return <StatusIndicator status={status} />;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+type Status = "pending" | "success" | "error";
+
+const StatusIndicator = (t0) => {
+  const $ = _c(3);
+  const { status } = t0;
+  const t1 = `status-${status}`;
+  let t2;
+  if ($[0] !== status || $[1] !== t1) {
+    t2 = <div className={t1}>Status: {status}</div>;
+    $[0] = status;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+};
+
+const Component = (t0) => {
+  const $ = _c(2);
+  const { status: t1 } = t0;
+  const status = t1 === undefined ? ("pending" as Status) : t1;
+  let t2;
+  if ($[0] !== status) {
+    t2 = <StatusIndicator status={status} />;
+    $[0] = status;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  return t2;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ status: "success" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="status-success">Status: success</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.tsx
new file mode 100644
index 00000000000..715efd5bdc8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.tsx
@@ -0,0 +1,14 @@
+type Status = 'pending' | 'success' | 'error';
+
+const StatusIndicator = ({status}: {status: Status}) => {
+  return <div className={`status-${status}`}>Status: {status}</div>;
+};
+
+const Component = ({status = 'pending' as Status}) => {
+  return <StatusIndicator status={status} />;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.expect.md
new file mode 100644
index 00000000000..bb31427d081
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  enum Bool {
+    True = "true",
+    False = "false",
+  }
+
+  let bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  let t0;
+  if ($[0] !== bool) {
+    t0 = <div>{bool}</div>;
+    $[0] = bool;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>true</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.tsx
new file mode 100644
index 00000000000..7fcec79259c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-enum-inline.tsx
@@ -0,0 +1,17 @@
+function Component(props) {
+  enum Bool {
+    True = 'true',
+    False = 'false',
+  }
+
+  let bool: Bool = Bool.False;
+  if (props.value) {
+    bool = Bool.True;
+  }
+  return <div>{bool}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md
new file mode 100644
index 00000000000..b80c0370f79
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function id<T>(x: T): T {
+  return x;
+}
+
+export function Component<T = string>({fn = id<T>}: {fn?: (x: T) => T}) {
+  const value = fn('hi' as T);
+  return <div>{String(value)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function id(x) {
+  return x;
+}
+
+export function Component(t0) {
+  const $ = _c(4);
+  const { fn: t1 } = t0;
+  const fn = t1 === undefined ? id : t1;
+  let t2;
+  if ($[0] !== fn) {
+    t2 = fn("hi" as T);
+    $[0] = fn;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const value = t2;
+  const t3 = String(value);
+  let t4;
+  if ($[2] !== t3) {
+    t4 = <div>{t3}</div>;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>hi</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx
new file mode 100644
index 00000000000..6382962edda
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx
@@ -0,0 +1,13 @@
+function id<T>(x: T): T {
+  return x;
+}
+
+export function Component<T = string>({fn = id<T>}: {fn?: (x: T) => T}) {
+  const value = fn('hi' as T);
+  return <div>{String(value)}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-expression.expect.md
new file mode 100644
index 00000000000..8400a135b6f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-expression.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+import {identity, invoke} from 'shared-runtime';
+
+function Test() {
+  const str = invoke(identity<string>, 'test');
+  return str;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, invoke } from "shared-runtime";
+
+function Test() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = invoke(identity, "test");
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const str = t0;
+  return str;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "test"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-expression.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-expression.tsx
new file mode 100644
index 00000000000..373d0057476
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-expression.tsx
@@ -0,0 +1,11 @@
+import {identity, invoke} from 'shared-runtime';
+
+function Test() {
+  const str = invoke(identity<string>, 'test');
+  return str;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md
new file mode 100644
index 00000000000..4b8096f702a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ['default', 'light'],
+  ['dark', 'dark'],
+]);
+
+export const Component = ({theme = THEME_MAP.get('default')!}) => {
+  return <div className={`theme-${theme}`}>User preferences</div>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ["default", "light"],
+  ["dark", "dark"],
+]);
+
+export const Component = (t0) => {
+  const $ = _c(2);
+  const { theme: t1 } = t0;
+  const theme = t1 === undefined ? THEME_MAP.get("default") : t1;
+  const t2 = `theme-${theme}`;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = <div className={t2}>User preferences</div>;
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  return t3;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ status: "success" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div class="theme-light">User preferences</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx
new file mode 100644
index 00000000000..43a24622c5b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx
@@ -0,0 +1,14 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ['default', 'light'],
+  ['dark', 'dark'],
+]);
+
+export const Component = ({theme = THEME_MAP.get('default')!}) => {
+  return <div className={`theme-${theme}`}>User preferences</div>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-declaration.expect.md
new file mode 100644
index 00000000000..ba51a221a66
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-declaration.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  type User = {name: string};
+  const user: User = {name: props.name};
+  return user;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Mofei'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = { name: props.name };
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const user = t0;
+  return user;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Mofei" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"name":"Mofei"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-declaration.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-declaration.ts
new file mode 100644
index 00000000000..f16f5567600
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-declaration.ts
@@ -0,0 +1,10 @@
+function Component(props) {
+  type User = {name: string};
+  const user: User = {name: props.name};
+  return user;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Mofei'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation.expect.md
new file mode 100644
index 00000000000..cbde3c79e6a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsParamAnnotation() {
+  type Foo = Bar;
+  const fun = (f: Foo) => {
+    console.log(f);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsParamAnnotation,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsParamAnnotation() {
+  const fun = _temp;
+
+  fun("hello, world");
+}
+function _temp(f) {
+  console.log(f);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsParamAnnotation,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['hello, world']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation.ts
new file mode 100644
index 00000000000..f25db943af6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation.ts
@@ -0,0 +1,14 @@
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsParamAnnotation() {
+  type Foo = Bar;
+  const fun = (f: Foo) => {
+    console.log(f);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsParamAnnotation,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation_.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation_.flow.expect.md
new file mode 100644
index 00000000000..391dda8857c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation_.flow.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsAnnotation() {
+  type Foo = Bar;
+  const fun = (f: Foo) => {
+    console.log(f);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsAnnotation,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+type Bar = string;
+function TypeAliasUsedAsAnnotation() {
+  const fun = _temp;
+
+  fun("hello, world");
+}
+function _temp(f) {
+  console.log(f);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsAnnotation,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['hello, world']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation_.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation_.flow.js
new file mode 100644
index 00000000000..dd2e0a714a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-annotation_.flow.js
@@ -0,0 +1,14 @@
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsAnnotation() {
+  type Foo = Bar;
+  const fun = (f: Foo) => {
+    console.log(f);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsAnnotation,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation.expect.md
new file mode 100644
index 00000000000..7b887181a72
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsVariableAnnotation() {
+  type Foo = Bar;
+  const fun = f => {
+    let g: Foo = f;
+    console.log(g);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsVariableAnnotation,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsVariableAnnotation() {
+  const fun = _temp;
+
+  fun("hello, world");
+}
+function _temp(f) {
+  const g = f;
+  console.log(g);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsVariableAnnotation,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['hello, world']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation.ts
new file mode 100644
index 00000000000..7c5b7a269a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation.ts
@@ -0,0 +1,15 @@
+// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsVariableAnnotation() {
+  type Foo = Bar;
+  const fun = f => {
+    let g: Foo = f;
+    console.log(g);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsVariableAnnotation,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation_.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation_.flow.expect.md
new file mode 100644
index 00000000000..2afeca1f8ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation_.flow.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsAnnotation() {
+  type Foo = Bar;
+  const fun = f => {
+    let g: Foo = f;
+    console.log(g);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsAnnotation,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+type Bar = string;
+function TypeAliasUsedAsAnnotation() {
+  const fun = _temp;
+
+  fun("hello, world");
+}
+function _temp(f) {
+  const g = f;
+  console.log(g);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsAnnotation,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: ['hello, world']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation_.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation_.flow.js
new file mode 100644
index 00000000000..037dbf57041
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias-used-as-variable-annotation_.flow.js
@@ -0,0 +1,15 @@
+// @flow @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions
+type Bar = string;
+function TypeAliasUsedAsAnnotation() {
+  type Foo = Bar;
+  const fun = f => {
+    let g: Foo = f;
+    console.log(g);
+  };
+  fun('hello, world');
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: TypeAliasUsedAsAnnotation,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias.flow.expect.md
new file mode 100644
index 00000000000..889236825bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias.flow.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @flow
+function Component(props) {
+  type User = {name: string};
+  const user: User = {name: props.name};
+  return user;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Mofei'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = { name: props.name };
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const user = t0;
+  return user;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Mofei" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"name":"Mofei"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias.flow.js
new file mode 100644
index 00000000000..f5bf36c49fc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-alias.flow.js
@@ -0,0 +1,11 @@
+// @flow
+function Component(props) {
+  type User = {name: string};
+  const user: User = {name: props.name};
+  return user;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{name: 'Mofei'}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/todo_type-annotations-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/todo_type-annotations-props.expect.md
new file mode 100644
index 00000000000..49fe4439ae6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/todo_type-annotations-props.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enableUseTypeAnnotations
+function useArray(items: Array<number>) {
+  // With type information we know that the callback cannot escape
+  // and does not need to be memoized, only the result needs to be
+  // memoized:
+  return items.filter(x => x !== 0);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useArray,
+  params: [[1, 0, 2, 0, 3, 0, 42]],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableUseTypeAnnotations
+function useArray(items) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== items) {
+    t0 = items.filter(_temp);
+    $[0] = items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function _temp(x) {
+  return x !== 0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useArray,
+  params: [[1, 0, 2, 0, 3, 0, 42]],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,2,3,42]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/todo_type-annotations-props.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/todo_type-annotations-props.ts
new file mode 100644
index 00000000000..369358572bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/todo_type-annotations-props.ts
@@ -0,0 +1,12 @@
+// @enableUseTypeAnnotations
+function useArray(items: Array<number>) {
+  // With type information we know that the callback cannot escape
+  // and does not need to be memoized, only the result needs to be
+  // memoized:
+  return items.filter(x => x !== 0);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useArray,
+  params: [[1, 0, 2, 0, 3, 0, 42]],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array.expect.md
new file mode 100644
index 00000000000..92979ecd95b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @enableUseTypeAnnotations
+function Component(props: {id: number}) {
+  const x = makeArray(props.id) as number[];
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableUseTypeAnnotations
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.id) {
+    t0 = makeArray(props.id);
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0 as number[];
+  let t1;
+  if ($[2] !== x) {
+    t1 = x.at(0);
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const y = t1;
+  return y;
+}
+
+function makeArray(x) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array.ts
new file mode 100644
index 00000000000..9c31e2c1184
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array.ts
@@ -0,0 +1,15 @@
+// @enableUseTypeAnnotations
+function Component(props: {id: number}) {
+  const x = makeArray(props.id) as number[];
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array_.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array_.flow.expect.md
new file mode 100644
index 00000000000..3229d69907c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array_.flow.expect.md
@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @flow @enableUseTypeAnnotations
+import {identity, makeArray} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = (makeArray(props.id): Array<number>);
+  const y = x.at(0);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, makeArray } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.id) {
+    t0 = makeArray(props.id);
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = (t0: Array<number>);
+  let t1;
+  if ($[2] !== x) {
+    t1 = x.at(0);
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const y = t1;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array_.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array_.flow.js
new file mode 100644
index 00000000000..b8e30437479
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-array_.flow.js
@@ -0,0 +1,13 @@
+// @flow @enableUseTypeAnnotations
+import {identity, makeArray} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = (makeArray(props.id): Array<number>);
+  const y = x.at(0);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number.expect.md
new file mode 100644
index 00000000000..f4b2e45d965
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = identity(props.id);
+  const y = x as number;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableUseTypeAnnotations
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const x = identity(props.id);
+  const y = x as number;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number.ts
new file mode 100644
index 00000000000..32698294d4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number.ts
@@ -0,0 +1,13 @@
+// @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = identity(props.id);
+  const y = x as number;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number_.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number_.flow.expect.md
new file mode 100644
index 00000000000..5c4adf87341
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number_.flow.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @flow @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = identity(props.id);
+  const y = (x: number);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const x = identity(props.id);
+  const y = (x: number);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number_.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number_.flow.js
new file mode 100644
index 00000000000..0d2ded28255
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-as-number_.flow.js
@@ -0,0 +1,13 @@
+// @flow @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = identity(props.id);
+  const y = (x: number);
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.expect.md
new file mode 100644
index 00000000000..d0083f3c3ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @enableUseTypeAnnotations
+function Component(props: {id: number}) {
+  const x = makeArray(props.id) satisfies number[];
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableUseTypeAnnotations
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.id) {
+    t0 = makeArray(props.id);
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0 satisfies number[];
+  let t1;
+  if ($[2] !== x) {
+    t1 = x.at(0);
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const y = t1;
+  return y;
+}
+
+function makeArray(x) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.ts
new file mode 100644
index 00000000000..5024055c109
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-array.ts
@@ -0,0 +1,15 @@
+// @enableUseTypeAnnotations
+function Component(props: {id: number}) {
+  const x = makeArray(props.id) satisfies number[];
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.expect.md
new file mode 100644
index 00000000000..0819456dc1b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = identity(props.id);
+  const y = x satisfies number;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enableUseTypeAnnotations
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const x = identity(props.id);
+  const y = x satisfies number;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.ts
new file mode 100644
index 00000000000..2f4ea6222e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-satisfies-number.ts
@@ -0,0 +1,13 @@
+// @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x = identity(props.id);
+  const y = x satisfies number;
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.expect.md
new file mode 100644
index 00000000000..fc829218f5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+// @enableUseTypeAnnotations
+function Component(props: {id: number}) {
+  const x: number[] = makeArray(props.id);
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableUseTypeAnnotations
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.id) {
+    const x = makeArray(props.id);
+    t0 = x.at(0);
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const y = t0;
+  return y;
+}
+
+function makeArray(x) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.ts
new file mode 100644
index 00000000000..da1b8f6d446
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.ts
@@ -0,0 +1,15 @@
+// @enableUseTypeAnnotations
+function Component(props: {id: number}) {
+  const x: number[] = makeArray(props.id);
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.expect.md
new file mode 100644
index 00000000000..5058015fd32
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+// @flow @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x: Array<number> = makeArray(props.id);
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.id) {
+    const x = makeArray(props.id);
+    t0 = x.at(0);
+    $[0] = props.id;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const y = t0;
+  return y;
+}
+
+function makeArray(x) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ id: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 42
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.js
new file mode 100644
index 00000000000..fbeacfa6a9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.js
@@ -0,0 +1,17 @@
+// @flow @enableUseTypeAnnotations
+import {identity} from 'shared-runtime';
+
+function Component(props: {id: number}) {
+  const x: Array<number> = makeArray(props.id);
+  const y = x.at(0);
+  return y;
+}
+
+function makeArray<T>(x: T): Array<T> {
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{id: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-args-test-binary-operator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-args-test-binary-operator.expect.md
new file mode 100644
index 00000000000..2c702509a24
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-args-test-binary-operator.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  if (a > b) {
+    let m = {};
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function component(a, b) {
+  if (a > b) {
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-args-test-binary-operator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-args-test-binary-operator.js
new file mode 100644
index 00000000000..ad84c9ed457
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-args-test-binary-operator.js
@@ -0,0 +1,11 @@
+function component(a, b) {
+  if (a > b) {
+    let m = {};
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-binary-operator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-binary-operator.expect.md
new file mode 100644
index 00000000000..a3e5be659bd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-binary-operator.expect.md
@@ -0,0 +1,26 @@
+
+## Input
+
+```javascript
+function component() {
+  let a = some();
+  let b = someOther();
+  if (a > b) {
+    let m = {};
+  }
+}
+
+```
+
+## Code
+
+```javascript
+function component() {
+  const a = some();
+  const b = someOther();
+  if (a > b) {
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-binary-operator.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-binary-operator.js
new file mode 100644
index 00000000000..f04edcef6cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-binary-operator.js
@@ -0,0 +1,7 @@
+function component() {
+  let a = some();
+  let b = someOther();
+  if (a > b) {
+    let m = {};
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-cast-expression.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-cast-expression.flow.expect.md
new file mode 100644
index 00000000000..fb256864d73
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-cast-expression.flow.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @flow
+type Foo = {bar: string};
+function Component(props) {
+  const x = {bar: props.bar};
+  const y = (x: Foo);
+  y.bar = 'hello';
+  const z = (y: Foo);
+  return z;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+type Foo = { bar: string };
+function Component(props) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== props.bar) {
+    const x = { bar: props.bar };
+    y = (x: Foo);
+    y.bar = "hello";
+    $[0] = props.bar;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  const z = (y: Foo);
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-cast-expression.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-cast-expression.flow.js
new file mode 100644
index 00000000000..29f44d4b0d6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-cast-expression.flow.js
@@ -0,0 +1,14 @@
+// @flow
+type Foo = {bar: string};
+function Component(props) {
+  const x = {bar: props.bar};
+  const y = (x: Foo);
+  y.bar = 'hello';
+  const z = (y: Foo);
+  return z;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-field-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-field-load.expect.md
new file mode 100644
index 00000000000..432016187da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-field-load.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = {t: 1};
+  let p = x.t;
+  return p;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { t: 1 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const p = x.t;
+  return p;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-field-load.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-field-load.js
new file mode 100644
index 00000000000..67e24e417e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-field-load.js
@@ -0,0 +1,11 @@
+function component() {
+  let x = {t: 1};
+  let p = x.t;
+  return p;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.expect.md
new file mode 100644
index 00000000000..ab584c11590
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.expect.md
@@ -0,0 +1,136 @@
+
+## Input
+
+```javascript
+import {useIdentity, ValidateMemoization} from 'shared-runtime';
+
+/**
+ * Fixture to assert that we can infer the type and effects of an array created
+ * with `Array.from`.
+ */
+function Validate({x, val1, val2}) {
+  'use no memo';
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[val1]}
+        output={x[0]}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[val2]}
+        output={x[1]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+function useFoo({val1, val2}) {
+  'use memo';
+  const x = Array.from([]);
+  useIdentity();
+  x.push([val1]);
+  x.push([val2]);
+  return <Validate x={x} val1={val1} val2={val2} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{val1: 1, val2: 2}],
+  params: [
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 3},
+    {val1: 4, val2: 2},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useIdentity, ValidateMemoization } from "shared-runtime";
+
+/**
+ * Fixture to assert that we can infer the type and effects of an array created
+ * with `Array.from`.
+ */
+function Validate({ x, val1, val2 }) {
+  "use no memo";
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[val1]}
+        output={x[0]}
+        onlyCheckCompiled={true}
+      />
+
+      <ValidateMemoization
+        inputs={[val2]}
+        output={x[1]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+function useFoo(t0) {
+  "use memo";
+  const $ = _c(9);
+  const { val1, val2 } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const x = Array.from(t1);
+  useIdentity();
+  let t2;
+  if ($[1] !== val1) {
+    t2 = [val1];
+    $[1] = val1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  x.push(t2);
+  let t3;
+  if ($[3] !== val2) {
+    t3 = [val2];
+    $[3] = val2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  x.push(t3);
+  let t4;
+  if ($[5] !== val1 || $[6] !== val2 || $[7] !== x) {
+    t4 = <Validate x={x} val1={val1} val2={val2} />;
+    $[5] = val1;
+    $[6] = val2;
+    $[7] = x;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ val1: 1, val2: 2 }],
+  params: [
+    { val1: 1, val2: 2 },
+    { val1: 1, val2: 2 },
+    { val1: 1, val2: 3 },
+    { val1: 4, val2: 2 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[1],"output":[1]}</div><div>{"inputs":[2],"output":[2]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.js
new file mode 100644
index 00000000000..dfd4e0e0f19
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.js
@@ -0,0 +1,42 @@
+import {useIdentity, ValidateMemoization} from 'shared-runtime';
+
+/**
+ * Fixture to assert that we can infer the type and effects of an array created
+ * with `Array.from`.
+ */
+function Validate({x, val1, val2}) {
+  'use no memo';
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[val1]}
+        output={x[0]}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[val2]}
+        output={x[1]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+function useFoo({val1, val2}) {
+  'use memo';
+  const x = Array.from([]);
+  useIdentity();
+  x.push([val1]);
+  x.push([val2]);
+  return <Validate x={x} val1={val1} val2={val2} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{val1: 1, val2: 2}],
+  params: [
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 3},
+    {val1: 4, val2: 2},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log-default-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log-default-import.expect.md
new file mode 100644
index 00000000000..dd2eebb606c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log-default-import.expect.md
@@ -0,0 +1,143 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+import typedLog from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  typedLog(item1, item2);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={item1} />
+      <ValidateMemoization inputs={[b]} output={item2} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+import typedLog from "shared-runtime";
+
+export function Component(t0) {
+  const $ = _c(17);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const item1 = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = { b };
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const item2 = t2;
+  typedLog(item1, item2);
+  let t3;
+  if ($[4] !== a) {
+    t3 = [a];
+    $[4] = a;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== item1 || $[7] !== t3) {
+    t4 = <ValidateMemoization inputs={t3} output={item1} />;
+    $[6] = item1;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== b) {
+    t5 = [b];
+    $[9] = b;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== item2 || $[12] !== t5) {
+    t6 = <ValidateMemoization inputs={t5} output={item2} />;
+    $[11] = item2;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t4 || $[15] !== t6) {
+    t7 = (
+      <>
+        {t4}
+        {t6}
+      </>
+    );
+    $[14] = t4;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  return t7;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 1, b: 2 },
+    { a: 2, b: 2 },
+    { a: 3, b: 2 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[1],"output":{"b":1}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[2],"output":{"a":2}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[3],"output":{"a":3}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+logs: [{ a: 0 },{ b: 0 },{ a: 1 },{ b: 0 },{ a: 1 },{ b: 1 },{ a: 1 },{ b: 2 },{ a: 2 },{ b: 2 },{ a: 3 },{ b: 2 },{ a: 0 },{ b: 0 }]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log-default-import.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log-default-import.tsx
new file mode 100644
index 00000000000..ec5dcf41e00
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log-default-import.tsx
@@ -0,0 +1,30 @@
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+import typedLog from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  typedLog(item1, item2);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={item1} />
+      <ValidateMemoization inputs={[b]} output={item2} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log.expect.md
new file mode 100644
index 00000000000..ba4c4fe2249
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log.expect.md
@@ -0,0 +1,141 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {typedLog, ValidateMemoization} from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  typedLog(item1, item2);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={item1} />
+      <ValidateMemoization inputs={[b]} output={item2} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { typedLog, ValidateMemoization } from "shared-runtime";
+
+export function Component(t0) {
+  const $ = _c(17);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const item1 = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = { b };
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const item2 = t2;
+  typedLog(item1, item2);
+  let t3;
+  if ($[4] !== a) {
+    t3 = [a];
+    $[4] = a;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== item1 || $[7] !== t3) {
+    t4 = <ValidateMemoization inputs={t3} output={item1} />;
+    $[6] = item1;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== b) {
+    t5 = [b];
+    $[9] = b;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== item2 || $[12] !== t5) {
+    t6 = <ValidateMemoization inputs={t5} output={item2} />;
+    $[11] = item2;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t4 || $[15] !== t6) {
+    t7 = (
+      <>
+        {t4}
+        {t6}
+      </>
+    );
+    $[14] = t4;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  return t7;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 1, b: 2 },
+    { a: 2, b: 2 },
+    { a: 3, b: 2 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[1],"output":{"b":1}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[2],"output":{"a":2}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[3],"output":{"a":3}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+logs: [{ a: 0 },{ b: 0 },{ a: 1 },{ b: 0 },{ a: 1 },{ b: 1 },{ a: 1 },{ b: 2 },{ a: 2 },{ b: 2 },{ a: 3 },{ b: 2 },{ a: 0 },{ b: 0 }]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log.tsx
new file mode 100644
index 00000000000..5fb53d9ca85
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-log.tsx
@@ -0,0 +1,29 @@
+import {useMemo} from 'react';
+import {typedLog, ValidateMemoization} from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  typedLog(item1, item2);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={item1} />
+      <ValidateMemoization inputs={[b]} output={item2} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture-namespace-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture-namespace-import.expect.md
new file mode 100644
index 00000000000..1de8d9a170d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture-namespace-import.expect.md
@@ -0,0 +1,177 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import * as SharedRuntime from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  const items = useMemo(() => {
+    const items = [];
+    SharedRuntime.typedArrayPush(items, item1);
+    SharedRuntime.typedArrayPush(items, item2);
+    return items;
+  }, [item1, item2]);
+
+  return (
+    <>
+      <SharedRuntime.ValidateMemoization inputs={[a]} output={items[0]} />
+      <SharedRuntime.ValidateMemoization inputs={[b]} output={items[1]} />
+      <SharedRuntime.ValidateMemoization inputs={[a, b]} output={items} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import * as SharedRuntime from "shared-runtime";
+
+export function Component(t0) {
+  const $ = _c(27);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const item1 = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = { b };
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const item2 = t2;
+  let items;
+  if ($[4] !== item1 || $[5] !== item2) {
+    items = [];
+    SharedRuntime.typedArrayPush(items, item1);
+    SharedRuntime.typedArrayPush(items, item2);
+    $[4] = item1;
+    $[5] = item2;
+    $[6] = items;
+  } else {
+    items = $[6];
+  }
+  const items_0 = items;
+  let t3;
+  if ($[7] !== a) {
+    t3 = [a];
+    $[7] = a;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== items_0[0] || $[10] !== t3) {
+    t4 = <SharedRuntime.ValidateMemoization inputs={t3} output={items_0[0]} />;
+    $[9] = items_0[0];
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== b) {
+    t5 = [b];
+    $[12] = b;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== items_0[1] || $[15] !== t5) {
+    t6 = <SharedRuntime.ValidateMemoization inputs={t5} output={items_0[1]} />;
+    $[14] = items_0[1];
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== a || $[18] !== b) {
+    t7 = [a, b];
+    $[17] = a;
+    $[18] = b;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== items_0 || $[21] !== t7) {
+    t8 = <SharedRuntime.ValidateMemoization inputs={t7} output={items_0} />;
+    $[20] = items_0;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== t4 || $[24] !== t6 || $[25] !== t8) {
+    t9 = (
+      <>
+        {t4}
+        {t6}
+        {t8}
+      </>
+    );
+    $[23] = t4;
+    $[24] = t6;
+    $[25] = t8;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  return t9;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 1, b: 2 },
+    { a: 2, b: 2 },
+    { a: 3, b: 2 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div><div>{"inputs":[0,0],"output":[{"a":0},{"b":0}]}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[0],"output":{"b":0}}</div><div>{"inputs":[1,0],"output":[{"a":1},{"b":0}]}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[1],"output":{"b":1}}</div><div>{"inputs":[1,1],"output":[{"a":1},{"b":1}]}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[2],"output":{"b":2}}</div><div>{"inputs":[1,2],"output":[{"a":1},{"b":2}]}</div>
+<div>{"inputs":[2],"output":{"a":2}}</div><div>{"inputs":[2],"output":{"b":2}}</div><div>{"inputs":[2,2],"output":[{"a":2},{"b":2}]}</div>
+<div>{"inputs":[3],"output":{"a":3}}</div><div>{"inputs":[2],"output":{"b":2}}</div><div>{"inputs":[3,2],"output":[{"a":3},{"b":2}]}</div>
+<div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div><div>{"inputs":[0,0],"output":[{"a":0},{"b":0}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture-namespace-import.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture-namespace-import.tsx
new file mode 100644
index 00000000000..6479df9a5a8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture-namespace-import.tsx
@@ -0,0 +1,35 @@
+import {useMemo} from 'react';
+import * as SharedRuntime from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  const items = useMemo(() => {
+    const items = [];
+    SharedRuntime.typedArrayPush(items, item1);
+    SharedRuntime.typedArrayPush(items, item2);
+    return items;
+  }, [item1, item2]);
+
+  return (
+    <>
+      <SharedRuntime.ValidateMemoization inputs={[a]} output={items[0]} />
+      <SharedRuntime.ValidateMemoization inputs={[b]} output={items[1]} />
+      <SharedRuntime.ValidateMemoization inputs={[a, b]} output={items} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture.expect.md
new file mode 100644
index 00000000000..a3b34b0274a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture.expect.md
@@ -0,0 +1,177 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {typedArrayPush, ValidateMemoization} from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  const items = useMemo(() => {
+    const items = [];
+    typedArrayPush(items, item1);
+    typedArrayPush(items, item2);
+    return items;
+  }, [item1, item2]);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={items[0]} />
+      <ValidateMemoization inputs={[b]} output={items[1]} />
+      <ValidateMemoization inputs={[a, b]} output={items} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { typedArrayPush, ValidateMemoization } from "shared-runtime";
+
+export function Component(t0) {
+  const $ = _c(27);
+  const { a, b } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = { a };
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const item1 = t1;
+  let t2;
+  if ($[2] !== b) {
+    t2 = { b };
+    $[2] = b;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const item2 = t2;
+  let items;
+  if ($[4] !== item1 || $[5] !== item2) {
+    items = [];
+    typedArrayPush(items, item1);
+    typedArrayPush(items, item2);
+    $[4] = item1;
+    $[5] = item2;
+    $[6] = items;
+  } else {
+    items = $[6];
+  }
+  const items_0 = items;
+  let t3;
+  if ($[7] !== a) {
+    t3 = [a];
+    $[7] = a;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== items_0[0] || $[10] !== t3) {
+    t4 = <ValidateMemoization inputs={t3} output={items_0[0]} />;
+    $[9] = items_0[0];
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== b) {
+    t5 = [b];
+    $[12] = b;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== items_0[1] || $[15] !== t5) {
+    t6 = <ValidateMemoization inputs={t5} output={items_0[1]} />;
+    $[14] = items_0[1];
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== a || $[18] !== b) {
+    t7 = [a, b];
+    $[17] = a;
+    $[18] = b;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== items_0 || $[21] !== t7) {
+    t8 = <ValidateMemoization inputs={t7} output={items_0} />;
+    $[20] = items_0;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== t4 || $[24] !== t6 || $[25] !== t8) {
+    t9 = (
+      <>
+        {t4}
+        {t6}
+        {t8}
+      </>
+    );
+    $[23] = t4;
+    $[24] = t6;
+    $[25] = t8;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  return t9;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 1, b: 2 },
+    { a: 2, b: 2 },
+    { a: 3, b: 2 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div><div>{"inputs":[0,0],"output":[{"a":0},{"b":0}]}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[0],"output":{"b":0}}</div><div>{"inputs":[1,0],"output":[{"a":1},{"b":0}]}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[1],"output":{"b":1}}</div><div>{"inputs":[1,1],"output":[{"a":1},{"b":1}]}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[2],"output":{"b":2}}</div><div>{"inputs":[1,2],"output":[{"a":1},{"b":2}]}</div>
+<div>{"inputs":[2],"output":{"a":2}}</div><div>{"inputs":[2],"output":{"b":2}}</div><div>{"inputs":[2,2],"output":[{"a":2},{"b":2}]}</div>
+<div>{"inputs":[3],"output":{"a":3}}</div><div>{"inputs":[2],"output":{"b":2}}</div><div>{"inputs":[3,2],"output":[{"a":3},{"b":2}]}</div>
+<div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div><div>{"inputs":[0,0],"output":[{"a":0},{"b":0}]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture.tsx
new file mode 100644
index 00000000000..3afef5439be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-store-capture.tsx
@@ -0,0 +1,35 @@
+import {useMemo} from 'react';
+import {typedArrayPush, ValidateMemoization} from 'shared-runtime';
+
+export function Component({a, b}) {
+  const item1 = useMemo(() => ({a}), [a]);
+  const item2 = useMemo(() => ({b}), [b]);
+  const items = useMemo(() => {
+    const items = [];
+    typedArrayPush(items, item1);
+    typedArrayPush(items, item2);
+    return items;
+  }, [item1, item2]);
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a]} output={items[0]} />
+      <ValidateMemoization inputs={[b]} output={items[1]} />
+      <ValidateMemoization inputs={[a, b]} output={items} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-tagged-template-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-tagged-template-expression.expect.md
new file mode 100644
index 00000000000..03bfef9fb2e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-tagged-template-expression.expect.md
@@ -0,0 +1,106 @@
+
+## Input
+
+```javascript
+import {graphql} from 'shared-runtime';
+
+export function Component({a, b}) {
+  const fragment = graphql`
+    fragment Foo on User {
+      name
+    }
+  `;
+  return <div>{fragment}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { graphql } from "shared-runtime";
+
+export function Component(t0) {
+  const $ = _c(1);
+  const fragment = graphql`
+    fragment Foo on User {
+      name
+    }
+  `;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{fragment}</div>;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 1, b: 2 },
+    { a: 2, b: 2 },
+    { a: 3, b: 2 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>
+    fragment Foo on User {
+      name
+    }
+  </div>
+<div>
+    fragment Foo on User {
+      name
+    }
+  </div>
+<div>
+    fragment Foo on User {
+      name
+    }
+  </div>
+<div>
+    fragment Foo on User {
+      name
+    }
+  </div>
+<div>
+    fragment Foo on User {
+      name
+    }
+  </div>
+<div>
+    fragment Foo on User {
+      name
+    }
+  </div>
+<div>
+    fragment Foo on User {
+      name
+    }
+  </div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-tagged-template-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-tagged-template-expression.js
new file mode 100644
index 00000000000..872d6b8f6fd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-tagged-template-expression.js
@@ -0,0 +1,24 @@
+import {graphql} from 'shared-runtime';
+
+export function Component({a, b}) {
+  const fragment = graphql`
+    fragment Foo on User {
+      name
+    }
+  `;
+  return <div>{fragment}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md
new file mode 100644
index 00000000000..0ea9172e85e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = {u: makeSomePrimitive(), v: makeSomePrimitive()};
+  let u = x.u;
+  let v = x.v;
+  if (u > v) {
+  }
+
+  let y = x.u;
+  let z = x.v;
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { u: makeSomePrimitive(), v: makeSomePrimitive() };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  const u = x.u;
+  const v = x.v;
+  if (u > v) {
+  }
+
+  const z = x.v;
+  return z;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.js
new file mode 100644
index 00000000000..9ae3ad79537
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.js
@@ -0,0 +1,11 @@
+function component() {
+  let x = {u: makeSomePrimitive(), v: makeSomePrimitive()};
+  let u = x.u;
+  let v = x.v;
+  if (u > v) {
+  }
+
+  let y = x.u;
+  let z = x.v;
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-store.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-store.expect.md
new file mode 100644
index 00000000000..57bd6c7abf1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-store.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = {};
+  let q = {};
+  x.t = q;
+  let z = x.t;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    const q = {};
+    x.t = q;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  const z = x.t;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-store.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-store.js
new file mode 100644
index 00000000000..0e98a6c0446
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-store.js
@@ -0,0 +1,13 @@
+function component() {
+  let x = {};
+  let q = {};
+  x.t = q;
+  let z = x.t;
+  return z;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-polymorphic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-polymorphic.expect.md
new file mode 100644
index 00000000000..f49cc73b293
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-polymorphic.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function component() {
+  let p = makePrimitive();
+  p + p; // infer p as primitive
+  let o = {};
+
+  let x = {};
+
+  x.t = p; // infer x.t as primitive
+  let z = x.t;
+
+  x.t = o; // generalize x.t
+  let y = x.t;
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  const p = makePrimitive();
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const o = {};
+    x = {};
+
+    x.t = p;
+
+    x.t = o;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  const y = x.t;
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-polymorphic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-polymorphic.js
new file mode 100644
index 00000000000..3246ea5693a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-polymorphic.js
@@ -0,0 +1,14 @@
+function component() {
+  let p = makePrimitive();
+  p + p; // infer p as primitive
+  let o = {};
+
+  let x = {};
+
+  x.t = p; // infer x.t as primitive
+  let z = x.t;
+
+  x.t = o; // generalize x.t
+  let y = x.t;
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-primitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-primitive.expect.md
new file mode 100644
index 00000000000..86d8fee71c7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-primitive.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = 1;
+  let y = 2;
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+function component() {
+  return 2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 2
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-primitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-primitive.js
new file mode 100644
index 00000000000..b32ed2b12a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-primitive.js
@@ -0,0 +1,12 @@
+function component() {
+  let x = 1;
+  let y = 2;
+
+  return y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-return-type-inference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-return-type-inference.expect.md
new file mode 100644
index 00000000000..0a111317b1a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-return-type-inference.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function component() {
+  let x = foo();
+  let y = foo();
+  if (x > y) {
+    let z = {};
+  }
+
+  let z = foo();
+  return z;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component() {
+  const $ = _c(1);
+  const x = foo();
+  const y = foo();
+  if (x > y) {
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const z_0 = t0;
+  return z_0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-return-type-inference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-return-type-inference.js
new file mode 100644
index 00000000000..1b07b987f35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-return-type-inference.js
@@ -0,0 +1,10 @@
+function component() {
+  let x = foo();
+  let y = foo();
+  if (x > y) {
+    let z = {};
+  }
+
+  let z = foo();
+  return z;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md
new file mode 100644
index 00000000000..399be048d55
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md
@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function component(a) {
+  let t = {t: a};
+  let z = +t.t;
+  let q = -t.t;
+  let p = void t.t;
+  let n = delete t.t;
+  let m = !t.t;
+  let e = ~t.t;
+  let f = typeof t.t;
+  return {z, p, q, n, m, e, f};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+function component(a) {
+  const $ = _c(8);
+  const t = { t: a };
+  const z = +t.t;
+  const q = -t.t;
+  const p = void t.t;
+  const n = delete t.t;
+  const m = !t.t;
+  const e = ~t.t;
+  const f = typeof t.t;
+  let t0;
+  if (
+    $[0] !== e ||
+    $[1] !== f ||
+    $[2] !== m ||
+    $[3] !== n ||
+    $[4] !== p ||
+    $[5] !== q ||
+    $[6] !== z
+  ) {
+    t0 = { z, p, q, n, m, e, f };
+    $[0] = e;
+    $[1] = f;
+    $[2] = m;
+    $[3] = n;
+    $[4] = p;
+    $[5] = q;
+    $[6] = z;
+    $[7] = t0;
+  } else {
+    t0 = $[7];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js
new file mode 100644
index 00000000000..a367653dfd9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js
@@ -0,0 +1,18 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+function component(a) {
+  let t = {t: a};
+  let z = +t.t;
+  let q = -t.t;
+  let p = void t.t;
+  let n = delete t.t;
+  let m = !t.t;
+  let e = ~t.t;
+  let f = typeof t.t;
+  return {z, p, q, n, m, e, f};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.expect.md
new file mode 100644
index 00000000000..a55ca6e3713
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @panicThreshold:"none" @validateExhaustiveMemoizationDependencies:false
+
+// unclosed disable rule should affect all components
+/* eslint-disable react-hooks/rules-of-hooks */
+
+function ValidComponent1(props) {
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent2(props) {
+  return <div>{props.greeting}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+// @panicThreshold:"none" @validateExhaustiveMemoizationDependencies:false
+
+// unclosed disable rule should affect all components
+/* eslint-disable react-hooks/rules-of-hooks */
+
+function ValidComponent1(props) {
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent2(props) {
+  return <div>{props.greeting}</div>;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.js
new file mode 100644
index 00000000000..98308be1f82
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unclosed-eslint-suppression-skips-all-components.js
@@ -0,0 +1,12 @@
+// @panicThreshold:"none" @validateExhaustiveMemoizationDependencies:false
+
+// unclosed disable rule should affect all components
+/* eslint-disable react-hooks/rules-of-hooks */
+
+function ValidComponent1(props) {
+  return <div>Hello World!</div>;
+}
+
+function ValidComponent2(props) {
+  return <div>{props.greeting}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unconditional-break-label.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unconditional-break-label.expect.md
new file mode 100644
index 00000000000..af87051552c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unconditional-break-label.expect.md
@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+function foo(a) {
+  let x = 0;
+  bar: {
+    x = 1;
+    break bar;
+  }
+  return a + x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a) {
+  return a + 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unconditional-break-label.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unconditional-break-label.js
new file mode 100644
index 00000000000..d53a5556a1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unconditional-break-label.js
@@ -0,0 +1,14 @@
+function foo(a) {
+  let x = 0;
+  bar: {
+    x = 1;
+    break bar;
+  }
+  return a + x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/uninitialized-declaration-in-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/uninitialized-declaration-in-reactive-scope.expect.md
new file mode 100644
index 00000000000..1b6c9c01c42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/uninitialized-declaration-in-reactive-scope.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = mutate();
+  let y;
+  foo(x);
+  return [y, x];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const x = mutate();
+    let y;
+    foo(x);
+    t0 = [y, x];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/uninitialized-declaration-in-reactive-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/uninitialized-declaration-in-reactive-scope.js
new file mode 100644
index 00000000000..720542611f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/uninitialized-declaration-in-reactive-scope.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  let x = mutate();
+  let y;
+  foo(x);
+  return [y, x];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unknown-hooks-do-not-assert.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unknown-hooks-do-not-assert.expect.md
new file mode 100644
index 00000000000..37cc3404639
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unknown-hooks-do-not-assert.expect.md
@@ -0,0 +1,27 @@
+
+## Input
+
+```javascript
+// Forget currently bails out when it detects a potential mutation (Effect.Mutate)
+// to an immutable value. This should not apply to unknown / untyped hooks.
+function Component(props) {
+  const x = useUnknownHook1(props);
+  const y = useUnknownHook2(x);
+  return y;
+}
+
+```
+
+## Code
+
+```javascript
+// Forget currently bails out when it detects a potential mutation (Effect.Mutate)
+// to an immutable value. This should not apply to unknown / untyped hooks.
+function Component(props) {
+  const x = useUnknownHook1(props);
+  const y = useUnknownHook2(x);
+  return y;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unknown-hooks-do-not-assert.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unknown-hooks-do-not-assert.js
new file mode 100644
index 00000000000..1de2e090270
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unknown-hooks-do-not-assert.js
@@ -0,0 +1,7 @@
+// Forget currently bails out when it detects a potential mutation (Effect.Mutate)
+// to an immutable value. This should not apply to unknown / untyped hooks.
+function Component(props) {
+  const x = useUnknownHook1(props);
+  const y = useUnknownHook2(x);
+  return y;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-loop.expect.md
new file mode 100644
index 00000000000..1bb02c3ee7d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-loop.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+function useHook(end) {
+  const log = [];
+  for (let i = 0; i < end + 1; i++) {
+    log.push(`${i} @A`);
+    bb0: {
+      if (i === end) {
+        break;
+      }
+      log.push(`${i} @B`);
+    }
+    log.push(`${i} @C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useHook(end) {
+  const $ = _c(2);
+  let log;
+  if ($[0] !== end) {
+    log = [];
+    for (let i = 0; i < end + 1; i++) {
+      log.push(`${i} @A`);
+
+      if (i === end) {
+        break;
+      }
+
+      log.push(`${i} @B`);
+
+      log.push(`${i} @C`);
+    }
+    $[0] = end;
+    $[1] = log;
+  } else {
+    log = $[1];
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["0 @A","0 @B","0 @C","1 @A"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-loop.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-loop.ts
new file mode 100644
index 00000000000..9d3ac383b99
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-loop.ts
@@ -0,0 +1,19 @@
+function useHook(end) {
+  const log = [];
+  for (let i = 0; i < end + 1; i++) {
+    log.push(`${i} @A`);
+    bb0: {
+      if (i === end) {
+        break;
+      }
+      log.push(`${i} @B`);
+    }
+    log.push(`${i} @C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [1],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.expect.md
new file mode 100644
index 00000000000..e95538ff52f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+import {CONST_STRING0} from 'shared-runtime';
+
+function useHook(cond) {
+  const log = [];
+  switch (CONST_STRING0) {
+    case CONST_STRING0:
+      log.push(`@A`);
+      bb0: {
+        if (cond) {
+          break;
+        }
+        log.push(`@B`);
+      }
+      log.push(`@C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [true],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { CONST_STRING0 } from "shared-runtime";
+
+function useHook(cond) {
+  const $ = _c(2);
+  let log;
+  if ($[0] !== cond) {
+    log = [];
+    bb0: switch (CONST_STRING0) {
+      case CONST_STRING0: {
+        log.push("@A");
+
+        if (cond) {
+          break bb0;
+        }
+
+        log.push("@B");
+
+        log.push("@C");
+      }
+    }
+    $[0] = cond;
+    $[1] = log;
+  } else {
+    log = $[1];
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [true],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["@A"]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.ts
new file mode 100644
index 00000000000..01ec2f6cfc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unlabeled-break-within-label-switch.ts
@@ -0,0 +1,22 @@
+import {CONST_STRING0} from 'shared-runtime';
+
+function useHook(cond) {
+  const log = [];
+  switch (CONST_STRING0) {
+    case CONST_STRING0:
+      log.push(`@A`);
+      bb0: {
+        if (cond) {
+          break;
+        }
+        log.push(`@B`);
+      }
+      log.push(`@C`);
+  }
+  return log;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useHook,
+  params: [true],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.expect.md
new file mode 100644
index 00000000000..72b0eeda848
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+import {mutate, useNoAlias} from 'shared-runtime';
+
+function Component(props) {
+  // Here `x` cannot be memoized bc its mutable range spans a hook call:
+  const x = [];
+  useNoAlias();
+  mutate(x);
+
+  // However, `x` is non-reactive. It cannot semantically change, so we
+  // exclude it as a dependency of the JSX element:
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { mutate, useNoAlias } from "shared-runtime";
+
+function Component(props) {
+  const x = [];
+  useNoAlias();
+  mutate(x);
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>joe</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.js
new file mode 100644
index 00000000000..69885a8db4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.js
@@ -0,0 +1,17 @@
+import {mutate, useNoAlias} from 'shared-runtime';
+
+function Component(props) {
+  // Here `x` cannot be memoized bc its mutable range spans a hook call:
+  const x = [];
+  useNoAlias();
+  mutate(x);
+
+  // However, `x` is non-reactive. It cannot semantically change, so we
+  // exclude it as a dependency of the JSX element:
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.expect.md
new file mode 100644
index 00000000000..4ae1fb6e22c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  const [x, unused, y] = props.a;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(props) {
+  const [x, , y] = props.a;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.js
new file mode 100644
index 00000000000..463ccb2ee6d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-middle-element.js
@@ -0,0 +1,10 @@
+function foo(props) {
+  const [x, unused, y] = props.a;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-rest-element.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-rest-element.expect.md
new file mode 100644
index 00000000000..9dfe2900fcb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-rest-element.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  const [x, y, ...z] = props.a;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(props) {
+  const [x, y] = props.a;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-rest-element.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-rest-element.js
new file mode 100644
index 00000000000..6b06b947f87
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-array-rest-element.js
@@ -0,0 +1,10 @@
+function foo(props) {
+  const [x, y, ...z] = props.a;
+  return x + y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-conditional.expect.md
new file mode 100644
index 00000000000..9857df1d2cb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-conditional.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  (x = 1) && (x = 2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x;
+  ((x = 1), 1) && (x = 2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-conditional.js
new file mode 100644
index 00000000000..df923676a5a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-conditional.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  let x = 0;
+  (x = 1) && (x = 2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical-assigned-to-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical-assigned-to-variable.expect.md
new file mode 100644
index 00000000000..f5a49dd2403
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical-assigned-to-variable.expect.md
@@ -0,0 +1,26 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // unused!
+  const obj = makeObject();
+  const obj2 = makeObject();
+  const _ = (obj.a ?? obj2.b) || props.c;
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const obj = makeObject();
+  const obj2 = makeObject();
+  (obj.a ?? obj2.b) || props.c;
+  return null;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical-assigned-to-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical-assigned-to-variable.js
new file mode 100644
index 00000000000..509d7069cd4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical-assigned-to-variable.js
@@ -0,0 +1,7 @@
+function Component(props) {
+  // unused!
+  const obj = makeObject();
+  const obj2 = makeObject();
+  const _ = (obj.a ?? obj2.b) || props.c;
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical.expect.md
new file mode 100644
index 00000000000..0e27157bd7a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let x = 0;
+  props.cond ? (x = 1) : (x = 2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  let x;
+  props.cond ? (x = 1) : (x = 2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical.js
new file mode 100644
index 00000000000..f46df777641
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-logical.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  let x = 0;
+  props.cond ? (x = 1) : (x = 2);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element-with-rest.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element-with-rest.expect.md
new file mode 100644
index 00000000000..b41c310a385
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element-with-rest.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  // can't remove `unused` since it affects which properties are copied into `rest`
+  const {unused, ...rest} = props.a;
+  return rest;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo(props) {
+  const $ = _c(2);
+  let rest;
+  if ($[0] !== props.a) {
+    const { unused, ...t0 } = props.a;
+    rest = t0;
+    $[0] = props.a;
+    $[1] = rest;
+  } else {
+    rest = $[1];
+  }
+  return rest;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element-with-rest.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element-with-rest.js
new file mode 100644
index 00000000000..b63f26746fc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element-with-rest.js
@@ -0,0 +1,11 @@
+function Foo(props) {
+  // can't remove `unused` since it affects which properties are copied into `rest`
+  const {unused, ...rest} = props.a;
+  return rest;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element.expect.md
new file mode 100644
index 00000000000..76f456caa2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Foo(props) {
+  const {x, y, ...z} = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function Foo(props) {
+  const { x } = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element.js
new file mode 100644
index 00000000000..39eb8bc4161
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-object-element.js
@@ -0,0 +1,10 @@
+function Foo(props) {
+  const {x, y, ...z} = props.a;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-optional-method-assigned-to-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-optional-method-assigned-to-variable.expect.md
new file mode 100644
index 00000000000..ca0a6c9433b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-optional-method-assigned-to-variable.expect.md
@@ -0,0 +1,24 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // unused!
+  const obj = makeObject();
+  const _ = obj.a?.b?.(props.c);
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const obj = makeObject();
+  obj.a?.b?.(props.c);
+  return null;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-optional-method-assigned-to-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-optional-method-assigned-to-variable.js
new file mode 100644
index 00000000000..250da966e12
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-optional-method-assigned-to-variable.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  // unused!
+  const obj = makeObject();
+  const _ = obj.a?.b?.(props.c);
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-ternary-assigned-to-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-ternary-assigned-to-variable.expect.md
new file mode 100644
index 00000000000..374d8d91035
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-ternary-assigned-to-variable.expect.md
@@ -0,0 +1,24 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  // unused!
+  const obj = makeObject();
+  const _ = obj.a ? props.b : props.c;
+  return null;
+}
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  const obj = makeObject();
+  obj.a ? props.b : props.c;
+  return null;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-ternary-assigned-to-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-ternary-assigned-to-variable.js
new file mode 100644
index 00000000000..957a723f57f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unused-ternary-assigned-to-variable.js
@@ -0,0 +1,6 @@
+function Component(props) {
+  // unused!
+  const obj = makeObject();
+  const _ = obj.a ? props.b : props.c;
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-constant-propagation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-constant-propagation.expect.md
new file mode 100644
index 00000000000..7ee891e9d0f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-constant-propagation.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component() {
+  let a = 0;
+  const b = a++;
+  const c = ++a;
+  const d = a--;
+  const e = --a;
+  return {a, b, c, d, e};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { a: 0, b: 0, c: 2, d: 2, e: 0 };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":0,"c":2,"d":2,"e":0}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-constant-propagation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-constant-propagation.js
new file mode 100644
index 00000000000..6ffa17c4005
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-constant-propagation.js
@@ -0,0 +1,14 @@
+function Component() {
+  let a = 0;
+  const b = a++;
+  const c = ++a;
+  const d = a--;
+  const e = --a;
+  return {a, b, c, d, e};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-in-sequence.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-in-sequence.expect.md
new file mode 100644
index 00000000000..cc6cfb27c77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-in-sequence.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let a = props.x;
+  let b;
+  let c;
+  let d;
+  if (props.cond) {
+    d = ((b = a), a++, (c = a), ++a);
+  }
+  return [a, b, c, d];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 2, cond: true}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(5);
+  let a = props.x;
+  let b;
+  let c;
+  let d;
+  if (props.cond) {
+    d = ((b = a), a++, (c = a), ++a);
+  }
+  let t0;
+  if ($[0] !== a || $[1] !== b || $[2] !== c || $[3] !== d) {
+    t0 = [a, b, c, d];
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = d;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 2, cond: true }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [4,2,3,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-in-sequence.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-in-sequence.js
new file mode 100644
index 00000000000..c377795ccb4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-in-sequence.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  let a = props.x;
+  let b;
+  let c;
+  let d;
+  if (props.cond) {
+    d = ((b = a), a++, (c = a), ++a);
+  }
+  return [a, b, c, d];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 2, cond: true}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-1.expect.md
new file mode 100644
index 00000000000..48eb49e73d0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-1.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+function Component({a: a, b: [b], c: {c}}) {
+  let d = a++;
+  let e = ++a;
+  let f = b--;
+  let g = --b;
+  let h = c++;
+  let i = --c;
+  return [a, b, c, d, e, f, g, h, i];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: [3], c: {c: 4}}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(10);
+  let { a, b: t1, c: t2 } = t0;
+  let [b] = t1;
+  let { c } = t2;
+  const d = a++;
+  const e = ++a;
+  const f = b--;
+  const g = --b;
+  const h = c++;
+  const i = --c;
+  let t3;
+  if (
+    $[0] !== a ||
+    $[1] !== b ||
+    $[2] !== c ||
+    $[3] !== d ||
+    $[4] !== e ||
+    $[5] !== f ||
+    $[6] !== g ||
+    $[7] !== h ||
+    $[8] !== i
+  ) {
+    t3 = [a, b, c, d, e, f, g, h, i];
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = d;
+    $[4] = e;
+    $[5] = f;
+    $[6] = g;
+    $[7] = h;
+    $[8] = i;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 2, b: [3], c: { c: 4 } }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [4,1,4,2,4,3,1,4,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-1.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-1.js
new file mode 100644
index 00000000000..90d60575844
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-1.js
@@ -0,0 +1,15 @@
+function Component({a: a, b: [b], c: {c}}) {
+  let d = a++;
+  let e = ++a;
+  let f = b--;
+  let g = --b;
+  let h = c++;
+  let i = --c;
+  return [a, b, c, d, e, f, g, h, i];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 2, b: [3], c: {c: 4}}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-2.expect.md
new file mode 100644
index 00000000000..b9f70316c81
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-2.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+function Component(a) {
+  let d = a++;
+  let e = ++a;
+  return [a, d, e];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [2],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(a) {
+  const $ = _c(4);
+  const d = a++;
+  const e = ++a;
+  let t0;
+  if ($[0] !== a || $[1] !== d || $[2] !== e) {
+    t0 = [a, d, e];
+    $[0] = a;
+    $[1] = d;
+    $[2] = e;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [2],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [4,2,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-2.js
new file mode 100644
index 00000000000..b86519477c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-2.js
@@ -0,0 +1,11 @@
+function Component(a) {
+  let d = a++;
+  let e = ++a;
+  return [a, d, e];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [2],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-3.expect.md
new file mode 100644
index 00000000000..5e65530da25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-3.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component({c}) {
+  let h = c++;
+  let i = --c;
+  return [c, h, i];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{c: 4}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(4);
+  let { c } = t0;
+  const h = c++;
+  const i = --c;
+  let t1;
+  if ($[0] !== c || $[1] !== h || $[2] !== i) {
+    t1 = [c, h, i];
+    $[0] = c;
+    $[1] = h;
+    $[2] = i;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ c: 4 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [4,4,4]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-3.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-3.js
new file mode 100644
index 00000000000..180dab5fe98
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-3.js
@@ -0,0 +1,11 @@
+function Component({c}) {
+  let h = c++;
+  let i = --c;
+  return [c, h, i];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{c: 4}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-4.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-4.expect.md
new file mode 100644
index 00000000000..1b786c7b663
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-4.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Component([b]) {
+  let f = b--;
+  let g = --b;
+  return [b, f, g];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [[3]],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(t0) {
+  const $ = _c(4);
+  let [b] = t0;
+  const f = b--;
+  const g = --b;
+  let t1;
+  if ($[0] !== b || $[1] !== f || $[2] !== g) {
+    t1 = [b, f, g];
+    $[0] = b;
+    $[1] = f;
+    $[2] = g;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [[3]],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,3,1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-4.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-4.js
new file mode 100644
index 00000000000..c4c75e460dc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression-on-function-parameter-4.js
@@ -0,0 +1,11 @@
+function Component([b]) {
+  let f = b--;
+  let g = --b;
+  return [b, f, g];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [[3]],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression.expect.md
new file mode 100644
index 00000000000..7f9157eb9c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function foo(props: {x: number}) {
+  let x = props.x;
+  let y = x++;
+  let z = x--;
+  return {x, y, z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{x: 1}],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo(props) {
+  const $ = _c(4);
+  let x = props.x;
+  const y = x++;
+  const z = x--;
+  let t0;
+  if ($[0] !== x || $[1] !== y || $[2] !== z) {
+    t0 = { x, y, z };
+    $[0] = x;
+    $[1] = y;
+    $[2] = z;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{ x: 1 }],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) {"x":1,"y":1,"z":2}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression.ts
new file mode 100644
index 00000000000..4822e965050
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-expression.ts
@@ -0,0 +1,12 @@
+function foo(props: {x: number}) {
+  let x = props.x;
+  let y = x++;
+  let z = x--;
+  return {x, y, z};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: [{x: 1}],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-global-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-global-in-callback.expect.md
new file mode 100644
index 00000000000..a250ce4a10c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-global-in-callback.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+let renderCount = 0;
+function Foo() {
+  const cb = () => {
+    renderCount += 1;
+    return renderCount;
+  };
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+let renderCount = 0;
+function Foo() {
+  const $ = _c(1);
+  const cb = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Stringify cb={cb} shouldInvokeFns={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  renderCount = renderCount + 1;
+  return renderCount;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"cb":{"kind":"Function","result":1},"shouldInvokeFns":true}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-global-in-callback.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-global-in-callback.tsx
new file mode 100644
index 00000000000..7bf6d5e3e42
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/update-global-in-callback.tsx
@@ -0,0 +1,15 @@
+import {Stringify} from 'shared-runtime';
+
+let renderCount = 0;
+function Foo() {
+  const cb = () => {
+    renderCount += 1;
+    return renderCount;
+  };
+  return <Stringify cb={cb} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.expect.md
new file mode 100644
index 00000000000..da6b14a0c97
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function component() {
+  const [count, setCount] = useState(0);
+  const increment = useCallback(() => setCount(count + 1));
+
+  return <Foo onClick={increment}></Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+function component() {
+  const $ = _c(4);
+  const [count, setCount] = useState(0);
+  let t0;
+  if ($[0] !== count) {
+    t0 = () => setCount(count + 1);
+    $[0] = count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const increment = t0;
+  let t1;
+  if ($[2] !== increment) {
+    t1 = <Foo onClick={increment} />;
+    $[2] = increment;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.js
new file mode 100644
index 00000000000..89b87f2d591
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-callback-simple.js
@@ -0,0 +1,7 @@
+// @validateExhaustiveMemoizationDependencies:false
+function component() {
+  const [count, setCount] = useState(0);
+  const increment = useCallback(() => setCount(count + 1));
+
+  return <Foo onClick={increment}></Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.expect.md
new file mode 100644
index 00000000000..a2da26811f6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.expect.md
@@ -0,0 +1,126 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+/**
+ * Example of a function expression whose return value shouldn't have
+ * a "freeze" effect on all operands.
+ *
+ * This is because the function expression is passed to `useEffect` and
+ * thus is not a render function. `cleanedUp` is also created within
+ * the effect and is not a render variable.
+ */
+function Component({prop}) {
+  const [cleanupCount, setCleanupCount] = useState(0);
+
+  useEffect(() => {
+    let cleanedUp = false;
+    setTimeout(() => {
+      if (!cleanedUp) {
+        cleanedUp = true;
+        setCleanupCount(c => c + 1);
+      }
+    }, 0);
+    // This return value should not have freeze effects
+    // on its operands
+    return () => {
+      if (!cleanedUp) {
+        cleanedUp = true;
+        setCleanupCount(c => c + 1);
+      }
+    };
+  }, [prop]);
+  return <div>{cleanupCount}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: 5}],
+  sequentialRenders: [{prop: 5}, {prop: 5}, {prop: 6}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+/**
+ * Example of a function expression whose return value shouldn't have
+ * a "freeze" effect on all operands.
+ *
+ * This is because the function expression is passed to `useEffect` and
+ * thus is not a render function. `cleanedUp` is also created within
+ * the effect and is not a render variable.
+ */
+function Component(t0) {
+  const $ = _c(5);
+  const { prop } = t0;
+  const [cleanupCount, setCleanupCount] = useState(0);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      let cleanedUp = false;
+      setTimeout(
+        () => {
+          if (!cleanedUp) {
+            cleanedUp = true;
+            setCleanupCount(_temp);
+          }
+        },
+
+        0,
+      );
+      return () => {
+        if (!cleanedUp) {
+          cleanedUp = true;
+          setCleanupCount(_temp2);
+        }
+      };
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== prop) {
+    t2 = [prop];
+    $[1] = prop;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== cleanupCount) {
+    t3 = <div>{cleanupCount}</div>;
+    $[3] = cleanupCount;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+function _temp2(c_0) {
+  return c_0 + 1;
+}
+function _temp(c) {
+  return c + 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prop: 5 }],
+  sequentialRenders: [{ prop: 5 }, { prop: 5 }, { prop: 6 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>0</div>
+<div>0</div>
+<div>1</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.js
new file mode 100644
index 00000000000..9910461613e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-effect-cleanup-reassigns.js
@@ -0,0 +1,38 @@
+import {useEffect, useState} from 'react';
+
+/**
+ * Example of a function expression whose return value shouldn't have
+ * a "freeze" effect on all operands.
+ *
+ * This is because the function expression is passed to `useEffect` and
+ * thus is not a render function. `cleanedUp` is also created within
+ * the effect and is not a render variable.
+ */
+function Component({prop}) {
+  const [cleanupCount, setCleanupCount] = useState(0);
+
+  useEffect(() => {
+    let cleanedUp = false;
+    setTimeout(() => {
+      if (!cleanedUp) {
+        cleanedUp = true;
+        setCleanupCount(c => c + 1);
+      }
+    }, 0);
+    // This return value should not have freeze effects
+    // on its operands
+    return () => {
+      if (!cleanedUp) {
+        cleanedUp = true;
+        setCleanupCount(c => c + 1);
+      }
+    };
+  }, [prop]);
+  return <div>{cleanupCount}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: 5}],
+  sequentialRenders: [{prop: 5}, {prop: 5}, {prop: 6}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.expect.md
new file mode 100644
index 00000000000..2068971957c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @outputMode:"lint"
+
+function Foo() {
+  'use memo';
+  return <button onClick={() => alert('hello!')}>Click me!</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @outputMode:"lint"
+
+function Foo() {
+  "use memo";
+  return <button onClick={() => alert("hello!")}>Click me!</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <button>Click me!</button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.js
new file mode 100644
index 00000000000..b12668f15ae
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.js
@@ -0,0 +1,11 @@
+// @outputMode:"lint"
+
+function Foo() {
+  'use memo';
+  return <button onClick={() => alert('hello!')}>Click me!</button>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.expect.md
new file mode 100644
index 00000000000..b9e7e1bfe10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  'use memo';
+  let x = [props.foo];
+  return <div x={x}>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  "use memo";
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.foo) {
+    const x = [props.foo];
+    t0 = <div x={x}>"foo"</div>;
+    $[0] = props.foo;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 1 }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div x="1">"foo"</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.js
new file mode 100644
index 00000000000..5292c92578d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  'use memo';
+  let x = [props.foo];
+  return <div x={x}>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-module-level.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-module-level.expect.md
new file mode 100644
index 00000000000..27ef8917f98
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-module-level.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+'use no forget';
+
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+
+```
+
+## Code
+
+```javascript
+"use no forget";
+
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-module-level.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-module-level.js
new file mode 100644
index 00000000000..ea5340d97f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-module-level.js
@@ -0,0 +1,8 @@
+'use no forget';
+
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.expect.md
new file mode 100644
index 00000000000..22386c5205a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+const useControllableState = options => {};
+function NoopComponent() {}
+
+function Component() {
+  'use no forget';
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = 'bad';
+  return <button ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+const useControllableState = (options) => {};
+function NoopComponent() {}
+
+function Component() {
+  "use no forget";
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = "bad";
+  return <button ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.js
new file mode 100644
index 00000000000..af490aae65b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.js
@@ -0,0 +1,17 @@
+import {useRef} from 'react';
+
+const useControllableState = options => {};
+function NoopComponent() {}
+
+function Component() {
+  'use no forget';
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = 'bad';
+  return <button ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.expect.md
new file mode 100644
index 00000000000..ed0518da4ad
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.expect.md
@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+function Component() {
+  'use no forget';
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = 'bad';
+  return <button ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function Component() {
+  "use no forget";
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = "bad";
+  return <button ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.js
new file mode 100644
index 00000000000..d5e0301fd54
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.js
@@ -0,0 +1,14 @@
+import {useRef} from 'react';
+
+function Component() {
+  'use no forget';
+  const ref = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  ref.current = 'bad';
+  return <button ref={ref} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md
new file mode 100644
index 00000000000..da77446a4f7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled
+function Component() {
+  'use no forget';
+  return <div>Hello World</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled
+function Component() {
+  "use no forget";
+  return <div>Hello World</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello World</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js
new file mode 100644
index 00000000000..0361c5efe8e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js
@@ -0,0 +1,11 @@
+// @expectNothingCompiled
+function Component() {
+  'use no forget';
+  return <div>Hello World</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-level.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-level.expect.md
new file mode 100644
index 00000000000..09fa0e0cb7b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-level.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+'use no memo';
+
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+
+```
+
+## Code
+
+```javascript
+"use no memo";
+
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-level.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-level.js
new file mode 100644
index 00000000000..e3913169a2a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-level.js
@@ -0,0 +1,8 @@
+'use no memo';
+
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-scope-usememo-function-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-scope-usememo-function-scope.expect.md
new file mode 100644
index 00000000000..375a38664e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-scope-usememo-function-scope.expect.md
@@ -0,0 +1,29 @@
+
+## Input
+
+```javascript
+// @compilationMode:"all"
+'use no memo';
+
+function TestComponent({x}) {
+  'use memo';
+  return <Button>{x}</Button>;
+}
+
+```
+
+## Code
+
+```javascript
+// @compilationMode:"all"
+"use no memo";
+
+function TestComponent({ x }) {
+  "use memo";
+  return <Button>{x}</Button>;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-scope-usememo-function-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-scope-usememo-function-scope.js
new file mode 100644
index 00000000000..21eec7ab2ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-module-scope-usememo-function-scope.js
@@ -0,0 +1,7 @@
+// @compilationMode:"all"
+'use no memo';
+
+function TestComponent({x}) {
+  'use memo';
+  return <Button>{x}</Button>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.expect.md
new file mode 100644
index 00000000000..dff0f514f9d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @expectNothingCompiled
+function Component(props) {
+  'use no memo';
+  let x = [props.foo];
+  return <div x={x}>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+// @expectNothingCompiled
+function Component(props) {
+  "use no memo";
+  let x = [props.foo];
+  return <div x={x}>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ foo: 1 }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div x="1">"foo"</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.js
new file mode 100644
index 00000000000..fb370a29bf2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.js
@@ -0,0 +1,12 @@
+// @expectNothingCompiled
+function Component(props) {
+  'use no memo';
+  let x = [props.foo];
+  return <div x={x}>"foo"</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{foo: 1}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-call-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-call-expression.expect.md
new file mode 100644
index 00000000000..dad37e7dfd9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-call-expression.expect.md
@@ -0,0 +1,128 @@
+
+## Input
+
+```javascript
+import {ValidateMemoization} from 'shared-runtime';
+import {use, useMemo} from 'react';
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  return (
+    <FooContext.Provider value={props.value}>
+      <Inner />
+    </FooContext.Provider>
+  );
+}
+
+function Inner(props) {
+  const input = use(FooContext);
+  const output = useMemo(() => [input], [input]);
+  return <ValidateMemoization inputs={[input]} output={output} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: null},
+    {value: 42},
+    {value: 42},
+    {value: null},
+    {value: null},
+    {value: 42},
+    {value: null},
+    {value: 42},
+    {value: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { ValidateMemoization } from "shared-runtime";
+import { use, useMemo } from "react";
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Inner />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.value) {
+    t1 = <FooContext.Provider value={props.value}>{t0}</FooContext.Provider>;
+    $[1] = props.value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Inner(props) {
+  const $ = _c(7);
+  const input = use(FooContext);
+  let t0;
+  if ($[0] !== input) {
+    t0 = [input];
+    $[0] = input;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const output = t0;
+  let t1;
+  if ($[2] !== input) {
+    t1 = [input];
+    $[2] = input;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== output || $[5] !== t1) {
+    t2 = <ValidateMemoization inputs={t1} output={output} />;
+    $[4] = output;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: null },
+    { value: 42 },
+    { value: 42 },
+    { value: null },
+    { value: null },
+    { value: 42 },
+    { value: null },
+    { value: 42 },
+    { value: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-call-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-call-expression.js
new file mode 100644
index 00000000000..724c4824de0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-call-expression.js
@@ -0,0 +1,33 @@
+import {ValidateMemoization} from 'shared-runtime';
+import {use, useMemo} from 'react';
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  return (
+    <FooContext.Provider value={props.value}>
+      <Inner />
+    </FooContext.Provider>
+  );
+}
+
+function Inner(props) {
+  const input = use(FooContext);
+  const output = useMemo(() => [input], [input]);
+  return <ValidateMemoization inputs={[input]} output={output} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: null},
+    {value: 42},
+    {value: 42},
+    {value: null},
+    {value: null},
+    {value: 42},
+    {value: null},
+    {value: 42},
+    {value: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-conditional.expect.md
new file mode 100644
index 00000000000..ab645e81e33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-conditional.expect.md
@@ -0,0 +1,149 @@
+
+## Input
+
+```javascript
+import {ValidateMemoization} from 'shared-runtime';
+import {use, useMemo} from 'react';
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  return (
+    <FooContext.Provider value={props.value}>
+      <Inner cond={props.cond} />
+    </FooContext.Provider>
+  );
+}
+
+function Inner(props) {
+  let input = null;
+  if (props.cond) {
+    input = use(FooContext);
+  }
+  const output = useMemo(() => [input], [input]);
+  return <ValidateMemoization inputs={[input]} output={output} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: 42}],
+  sequentialRenders: [
+    // change cond true->false
+    {cond: true, value: 42},
+    {cond: false, value: 42},
+
+    // change value
+    {cond: false, value: null},
+    {cond: false, value: 42},
+
+    // change cond false->true
+    {cond: true, value: 42},
+
+    // change cond true->false, change unobserved value, change cond false->true
+    {cond: false, value: 42},
+    {cond: false, value: null},
+    {cond: true, value: 42},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { ValidateMemoization } from "shared-runtime";
+import { use, useMemo } from "react";
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.cond) {
+    t0 = <Inner cond={props.cond} />;
+    $[0] = props.cond;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== props.value || $[3] !== t0) {
+    t1 = <FooContext.Provider value={props.value}>{t0}</FooContext.Provider>;
+    $[2] = props.value;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+function Inner(props) {
+  const $ = _c(7);
+  let input = null;
+  if (props.cond) {
+    input = use(FooContext);
+  }
+
+  input;
+  let t0;
+  if ($[0] !== input) {
+    t0 = [input];
+    $[0] = input;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const output = t0;
+  let t1;
+  if ($[2] !== input) {
+    t1 = [input];
+    $[2] = input;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== output || $[5] !== t1) {
+    t2 = <ValidateMemoization inputs={t1} output={output} />;
+    $[4] = output;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, value: 42 }],
+  sequentialRenders: [
+    // change cond true->false
+    { cond: true, value: 42 },
+    { cond: false, value: 42 },
+
+    // change value
+    { cond: false, value: null },
+    { cond: false, value: 42 },
+
+    // change cond false->true
+    { cond: true, value: 42 },
+
+    // change cond true->false, change unobserved value, change cond false->true
+    { cond: false, value: 42 },
+    { cond: false, value: null },
+    { cond: true, value: 42 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-conditional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-conditional.js
new file mode 100644
index 00000000000..1d604758aec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-conditional.js
@@ -0,0 +1,42 @@
+import {ValidateMemoization} from 'shared-runtime';
+import {use, useMemo} from 'react';
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  return (
+    <FooContext.Provider value={props.value}>
+      <Inner cond={props.cond} />
+    </FooContext.Provider>
+  );
+}
+
+function Inner(props) {
+  let input = null;
+  if (props.cond) {
+    input = use(FooContext);
+  }
+  const output = useMemo(() => [input], [input]);
+  return <ValidateMemoization inputs={[input]} output={output} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, value: 42}],
+  sequentialRenders: [
+    // change cond true->false
+    {cond: true, value: 42},
+    {cond: false, value: 42},
+
+    // change value
+    {cond: false, value: null},
+    {cond: false, value: 42},
+
+    // change cond false->true
+    {cond: true, value: 42},
+
+    // change cond true->false, change unobserved value, change cond false->true
+    {cond: false, value: 42},
+    {cond: false, value: null},
+    {cond: true, value: 42},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-method-call.expect.md
new file mode 100644
index 00000000000..5eea8e6e195
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-method-call.expect.md
@@ -0,0 +1,130 @@
+
+## Input
+
+```javascript
+import {ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+import * as React from 'react';
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  return (
+    <FooContext.Provider value={props.value}>
+      <Inner />
+    </FooContext.Provider>
+  );
+}
+
+function Inner(props) {
+  const input = React.use(FooContext);
+  const output = useMemo(() => [input], [input]);
+  return <ValidateMemoization inputs={[input]} output={output} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: null},
+    {value: 42},
+    {value: 42},
+    {value: null},
+    {value: null},
+    {value: 42},
+    {value: null},
+    {value: 42},
+    {value: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { ValidateMemoization } from "shared-runtime";
+import { useMemo } from "react";
+import * as React from "react";
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <Inner />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.value) {
+    t1 = <FooContext.Provider value={props.value}>{t0}</FooContext.Provider>;
+    $[1] = props.value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+function Inner(props) {
+  const $ = _c(7);
+  const input = React.use(FooContext);
+  let t0;
+  if ($[0] !== input) {
+    t0 = [input];
+    $[0] = input;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const output = t0;
+  let t1;
+  if ($[2] !== input) {
+    t1 = [input];
+    $[2] = input;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== output || $[5] !== t1) {
+    t2 = <ValidateMemoization inputs={t1} output={output} />;
+    $[4] = output;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+  sequentialRenders: [
+    { value: null },
+    { value: 42 },
+    { value: 42 },
+    { value: null },
+    { value: null },
+    { value: 42 },
+    { value: null },
+    { value: 42 },
+    { value: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
+<div>{"inputs":[42],"output":[42]}</div>
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-method-call.js
new file mode 100644
index 00000000000..984070b381b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-operator-method-call.js
@@ -0,0 +1,34 @@
+import {ValidateMemoization} from 'shared-runtime';
+import {useMemo} from 'react';
+import * as React from 'react';
+
+const FooContext = React.createContext(null);
+function Component(props) {
+  return (
+    <FooContext.Provider value={props.value}>
+      <Inner />
+    </FooContext.Provider>
+  );
+}
+
+function Inner(props) {
+  const input = React.use(FooContext);
+  const output = useMemo(() => [input], [input]);
+  return <ValidateMemoization inputs={[input]} output={output} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+  sequentialRenders: [
+    {value: null},
+    {value: 42},
+    {value: 42},
+    {value: null},
+    {value: null},
+    {value: 42},
+    {value: null},
+    {value: 42},
+    {value: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md
new file mode 100644
index 00000000000..b362e307cf2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import {useActionState} from 'react';
+
+function Component() {
+  const [actionState, dispatchAction] = useActionState();
+  const onSubmitAction = () => {
+    dispatchAction();
+  };
+  return <Foo onSubmitAction={onSubmitAction} />;
+}
+
+function Foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useActionState } from "react";
+
+function Component() {
+  const $ = _c(1);
+  const [, dispatchAction] = useActionState();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onSubmitAction = () => {
+      dispatchAction();
+    };
+    t0 = <Foo onSubmitAction={onSubmitAction} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+function Foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.js
new file mode 100644
index 00000000000..af1a6440958
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.js
@@ -0,0 +1,16 @@
+import {useActionState} from 'react';
+
+function Component() {
+  const [actionState, dispatchAction] = useActionState();
+  const onSubmitAction = () => {
+    dispatchAction();
+  };
+  return <Foo onSubmitAction={onSubmitAction} />;
+}
+
+function Foo() {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.expect.md
new file mode 100644
index 00000000000..b943c7dacbd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @enableTransitivelyFreezeFunctionExpressions:false
+import {useCallback} from 'react';
+import {
+  identity,
+  logValue,
+  makeObject_Primitives,
+  useHook,
+} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+
+  useHook();
+
+  const log = () => {
+    logValue(object);
+  };
+
+  const onClick = useCallback(() => {
+    log();
+  }, [log]);
+
+  identity(object);
+
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @enableTransitivelyFreezeFunctionExpressions:false
+import { useCallback } from "react";
+import {
+  identity,
+  logValue,
+  makeObject_Primitives,
+  useHook,
+} from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(2);
+  const object = makeObject_Primitives();
+
+  useHook();
+
+  const log = () => {
+    logValue(object);
+  };
+
+  const onClick = () => {
+    log();
+  };
+
+  identity(object);
+  let t0;
+  if ($[0] !== onClick) {
+    t0 = <div onClick={onClick} />;
+    $[0] = onClick;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.js
new file mode 100644
index 00000000000..6027076d643
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.js
@@ -0,0 +1,31 @@
+// @enablePreserveExistingMemoizationGuarantees:false @enableTransitivelyFreezeFunctionExpressions:false
+import {useCallback} from 'react';
+import {
+  identity,
+  logValue,
+  makeObject_Primitives,
+  useHook,
+} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+
+  useHook();
+
+  const log = () => {
+    logValue(object);
+  };
+
+  const onClick = useCallback(() => {
+    log();
+  }, [log]);
+
+  identity(object);
+
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-preserve-memoization.expect.md
new file mode 100644
index 00000000000..1822e39b604
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-preserve-memoization.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {
+  identity,
+  logValue,
+  makeObject_Primitives,
+  useHook,
+} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+
+  useHook();
+
+  const log = () => {
+    logValue(object);
+  };
+
+  const onClick = useCallback(() => {
+    log();
+  }, [log]);
+
+  identity(object);
+
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+import {
+  identity,
+  logValue,
+  makeObject_Primitives,
+  useHook,
+} from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const object = t0;
+
+  useHook();
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      logValue(object);
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const log = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      log();
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const onClick = t2;
+
+  identity(object);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <div onClick={onClick} />;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-preserve-memoization.js
new file mode 100644
index 00000000000..0f46021c158
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-preserve-memoization.js
@@ -0,0 +1,31 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {
+  identity,
+  logValue,
+  makeObject_Primitives,
+  useHook,
+} from 'shared-runtime';
+
+function Component(props) {
+  const object = makeObject_Primitives();
+
+  useHook();
+
+  const log = () => {
+    logValue(object);
+  };
+
+  const onClick = useCallback(() => {
+    log();
+  }, [log]);
+
+  identity(object);
+
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-dont-preserve-memoization-guarantee.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-dont-preserve-memoization-guarantee.expect.md
new file mode 100644
index 00000000000..ea6e43029ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-dont-preserve-memoization-guarantee.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+  useHook();
+  const callback = useCallback(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+  }, [props.value]);
+
+  mutate(free, part);
+  return callback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useCallback } from "react";
+import {
+  identity,
+  makeObject_Primitives,
+  mutate,
+  useHook,
+} from "shared-runtime";
+
+function Component(props) {
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+  useHook();
+  const callback = () => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+  };
+
+  mutate(free, part);
+  return callback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-dont-preserve-memoization-guarantee.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-dont-preserve-memoization-guarantee.js
new file mode 100644
index 00000000000..c0984e32193
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-dont-preserve-memoization-guarantee.js
@@ -0,0 +1,23 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useCallback} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+  useHook();
+  const callback = useCallback(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+  }, [props.value]);
+
+  mutate(free, part);
+  return callback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-preserve-memoization-guarantee.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-preserve-memoization-guarantee.expect.md
new file mode 100644
index 00000000000..16169a74d71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-preserve-memoization-guarantee.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+  useHook();
+  const callback = useCallback(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+  }, [props.value, free, part]);
+  mutate(free, part);
+  return callback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+import {
+  identity,
+  makeObject_Primitives,
+  mutate,
+  useHook,
+} from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const free = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = makeObject_Primitives();
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const free2 = t1;
+  const part = free2.part;
+  useHook();
+  let t2;
+  if ($[2] !== props.value) {
+    t2 = () => {
+      const x = makeObject_Primitives();
+      x.value = props.value;
+      mutate(x, free, part);
+    };
+    $[2] = props.value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const callback = t2;
+
+  mutate(free, part);
+  return callback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-preserve-memoization-guarantee.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-preserve-memoization-guarantee.js
new file mode 100644
index 00000000000..e9d11525e2c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-maybe-modify-free-variable-preserve-memoization-guarantee.js
@@ -0,0 +1,22 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+  useHook();
+  const callback = useCallback(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+  }, [props.value, free, part]);
+  mutate(free, part);
+  return callback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md
new file mode 100644
index 00000000000..12eee85f66b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  const onReset = useCallback(() => {
+    ref.current.inner = null;
+  });
+
+  return <input onChange={onChange} onReset={onReset} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useCallback, useRef } from "react";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { inner: null };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const ref = useRef(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (event) => {
+      ref.current.inner = event.target.value;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onChange = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      ref.current.inner = null;
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const onReset = t2;
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <input onChange={onChange} onReset={onReset} />;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.js
new file mode 100644
index 00000000000..b2876e98336
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.js
@@ -0,0 +1,23 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  const onReset = useCallback(() => {
+    ref.current.inner = null;
+  });
+
+  return <input onChange={onChange} onReset={onReset} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md
new file mode 100644
index 00000000000..e1427437ce8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <A r={s} />;
+}
+
+component A(r: mixed) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useRef } from "react";
+
+function Foo() {
+  const $ = _c(2);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => ref.current;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const s = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <A r={s} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function A(t0) {
+  const $ = _c(1);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div />;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js
new file mode 100644
index 00000000000..9fefa503203
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js
@@ -0,0 +1,21 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <A r={s} />;
+}
+
+component A(r: mixed) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md
new file mode 100644
index 00000000000..864c746fcc0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useCallback, useRef } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { inner: null };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const ref = useRef(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (event) => {
+      ref.current.inner = event.target.value;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onChange = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <input onChange={onChange} />;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.js
new file mode 100644
index 00000000000..3cd5d56fcbc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.js
@@ -0,0 +1,19 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md
new file mode 100644
index 00000000000..77dbb0dcd51
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {useCallback, useRef} from 'react';
+
+// Identical to useCallback-set-ref-nested-property-preserve-memoization,
+// but with a different set of compiler flags
+function Component({}) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useRef } from "react";
+
+// Identical to useCallback-set-ref-nested-property-preserve-memoization,
+// but with a different set of compiler flags
+function Component(t0) {
+  const $ = _c(3);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { inner: null };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const ref = useRef(t1);
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (event) => {
+      ref.current.inner = event.target.value;
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const onChange = t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <input onChange={onChange} />;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.js
new file mode 100644
index 00000000000..af82281ef0b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.js
@@ -0,0 +1,20 @@
+import {useCallback, useRef} from 'react';
+
+// Identical to useCallback-set-ref-nested-property-preserve-memoization,
+// but with a different set of compiler flags
+function Component({}) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md
new file mode 100644
index 00000000000..43d6f1d712a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useCallback, useRef } from "react";
+
+function Component(props) {
+  const $ = _c(2);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (event) => {
+      ref.current = event.target.value;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <input onChange={onChange} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.js
new file mode 100644
index 00000000000..124a1f79095
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.js
@@ -0,0 +1,19 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md
new file mode 100644
index 00000000000..43d6f1d712a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useCallback, useRef } from "react";
+
+function Component(props) {
+  const $ = _c(2);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (event) => {
+      ref.current = event.target.value;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onChange = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <input onChange={onChange} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.js
new file mode 100644
index 00000000000..124a1f79095
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.js
@@ -0,0 +1,19 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef(null);
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current = event.target.value;
+  });
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.expect.md
new file mode 100644
index 00000000000..0525a0f7cdd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+import {useContext} from 'react';
+import {mutate} from 'shared-runtime';
+
+const FooContext = React.createContext({current: null});
+
+function Component(props) {
+  const Foo = useContext(FooContext);
+  // This callback can be memoized because we aren't 100% positive that
+  // `mutate()` actually mutates, so we optimistically assume it doesn't
+  // Its range doesn't get entagled w the useContext call so we're able
+  // to create a reactive scope and memoize it.
+  const onClick = () => {
+    mutate(Foo.current);
+  };
+  return <div onClick={onClick}>{props.children}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { useContext } from "react";
+import { mutate } from "shared-runtime";
+
+const FooContext = React.createContext({ current: null });
+
+function Component(props) {
+  const $ = _c(5);
+  const Foo = useContext(FooContext);
+  let t0;
+  if ($[0] !== Foo.current) {
+    t0 = () => {
+      mutate(Foo.current);
+    };
+    $[0] = Foo.current;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[2] !== onClick || $[3] !== props.children) {
+    t1 = <div onClick={onClick}>{props.children}</div>;
+    $[2] = onClick;
+    $[3] = props.children;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ children: <div>Hello</div> }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>Hello</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.js
new file mode 100644
index 00000000000..99a8fa74969
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-maybe-mutate-context-in-callback.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import {mutate} from 'shared-runtime';
+
+const FooContext = React.createContext({current: null});
+
+function Component(props) {
+  const Foo = useContext(FooContext);
+  // This callback can be memoized because we aren't 100% positive that
+  // `mutate()` actually mutates, so we optimistically assume it doesn't
+  // Its range doesn't get entagled w the useContext call so we're able
+  // to create a reactive scope and memoize it.
+  const onClick = () => {
+    mutate(Foo.current);
+  };
+  return <div onClick={onClick}>{props.children}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.expect.md
new file mode 100644
index 00000000000..84f25ec2577
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+import {createContext, useContext} from 'react';
+import {Stringify} from 'shared-runtime';
+
+const FooContext = createContext({current: true});
+
+function Component(props) {
+  const foo = useContext(FooContext);
+
+  const getValue = () => {
+    if (foo.current) {
+      return {};
+    } else {
+      return null;
+    }
+  };
+  const value = getValue();
+
+  return <Stringify value={value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Stringify } from "shared-runtime";
+
+const FooContext = createContext({ current: true });
+
+function Component(props) {
+  const $ = _c(4);
+  const foo = useContext(FooContext);
+  let t0;
+  if ($[0] !== foo.current) {
+    const getValue = () => {
+      if (foo.current) {
+        return {};
+      } else {
+        return null;
+      }
+    };
+    t0 = getValue();
+    $[0] = foo.current;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const value = t0;
+  let t1;
+  if ($[2] !== value) {
+    t1 = <Stringify value={value} />;
+    $[2] = value;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.js
new file mode 100644
index 00000000000..06655ed51b6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.js
@@ -0,0 +1,24 @@
+import {createContext, useContext} from 'react';
+import {Stringify} from 'shared-runtime';
+
+const FooContext = createContext({current: true});
+
+function Component(props) {
+  const foo = useContext(FooContext);
+
+  const getValue = () => {
+    if (foo.current) {
+      return {};
+    } else {
+      return null;
+    }
+  };
+  const value = getValue();
+
+  return <Stringify value={value} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.expect.md
new file mode 100644
index 00000000000..e805b7f400e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.expect.md
@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+import {createContext, useContext} from 'react';
+
+const FooContext = createContext({current: null});
+
+function Component(props) {
+  const foo = useContext(FooContext);
+  // This function should be memoized since it is only reading the context value
+  const onClick = () => {
+    console.log(foo.current);
+  };
+  return <div onClick={onClick}>{props.children}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+
+const FooContext = createContext({ current: null });
+
+function Component(props) {
+  const $ = _c(5);
+  const foo = useContext(FooContext);
+  let t0;
+  if ($[0] !== foo.current) {
+    t0 = () => {
+      console.log(foo.current);
+    };
+    $[0] = foo.current;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[2] !== onClick || $[3] !== props.children) {
+    t1 = <div onClick={onClick}>{props.children}</div>;
+    $[2] = onClick;
+    $[3] = props.children;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ children: <div>Hello</div> }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div><div>Hello</div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.js
new file mode 100644
index 00000000000..6d3b177905d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback.js
@@ -0,0 +1,17 @@
+import {createContext, useContext} from 'react';
+
+const FooContext = createContext({current: null});
+
+function Component(props) {
+  const foo = useContext(FooContext);
+  // This function should be memoized since it is only reading the context value
+  const onClick = () => {
+    console.log(foo.current);
+  };
+  return <div onClick={onClick}>{props.children}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{children: <div>Hello</div>}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md
new file mode 100644
index 00000000000..5822cc5149e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md
@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const dispatch = useDispatch();
+  useFreeze(dispatch);
+
+  // onUpdate should be memoized even though it doesn't
+  // flow into the return value
+  const onUpdate = () => {
+    dispatch({kind: 'update'});
+  };
+
+  useEffect(() => {
+    onUpdate();
+  }, [onUpdate]);
+
+  return <div />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(6);
+  const dispatch = useDispatch();
+  useFreeze(dispatch);
+  let t0;
+  if ($[0] !== dispatch) {
+    t0 = () => {
+      dispatch({ kind: "update" });
+    };
+    $[0] = dispatch;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onUpdate = t0;
+  let t1;
+  let t2;
+  if ($[2] !== onUpdate) {
+    t1 = () => {
+      onUpdate();
+    };
+    t2 = [onUpdate];
+    $[2] = onUpdate;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <div />;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.js
new file mode 100644
index 00000000000..693ac660e18
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.js
@@ -0,0 +1,16 @@
+function Component(props) {
+  const dispatch = useDispatch();
+  useFreeze(dispatch);
+
+  // onUpdate should be memoized even though it doesn't
+  // flow into the return value
+  const onUpdate = () => {
+    dispatch({kind: 'update'});
+  };
+
+  useEffect(() => {
+    onUpdate();
+  }, [onUpdate]);
+
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-external-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-external-mutate.expect.md
new file mode 100644
index 00000000000..62e932cda10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-external-mutate.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+let x = {a: 42};
+
+function Component(props) {
+  useEffect(() => {
+    x.a = 10;
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { useEffect } from "react";
+
+let x = { a: 42 };
+
+function Component(props) {
+  useEffect(_temp);
+}
+function _temp() {
+  x.a = 10;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-external-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-external-mutate.js
new file mode 100644
index 00000000000..4cbc6b44e4d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-external-mutate.js
@@ -0,0 +1,14 @@
+import {useEffect} from 'react';
+
+let x = {a: 42};
+
+function Component(props) {
+  useEffect(() => {
+    x.a = 10;
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-global-pruned.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-global-pruned.expect.md
new file mode 100644
index 00000000000..0a78a544b8b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-global-pruned.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+function someGlobal() {}
+function useFoo() {
+  const fn = React.useMemo(
+    () =>
+      function () {
+        someGlobal();
+      },
+    []
+  );
+  useEffect(() => {
+    fn();
+  }, [fn]);
+
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from "react";
+
+function someGlobal() {}
+function useFoo() {
+  const $ = _c(2);
+  const fn = _temp;
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      fn();
+    };
+    t1 = [fn];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  return null;
+}
+function _temp() {
+  someGlobal();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-global-pruned.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-global-pruned.js
new file mode 100644
index 00000000000..5f91815991f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-global-pruned.js
@@ -0,0 +1,23 @@
+import {useEffect} from 'react';
+
+function someGlobal() {}
+function useFoo() {
+  const fn = React.useMemo(
+    () =>
+      function () {
+        someGlobal();
+      },
+    []
+  );
+  useEffect(() => {
+    fn();
+  }, [fn]);
+
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-method-call.expect.md
new file mode 100644
index 00000000000..638ea42aa5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-method-call.expect.md
@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+let x = {};
+function Component() {
+  React.useEffect(() => {
+    x.foo = 1;
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+let x = {};
+function Component() {
+  React.useEffect(_temp);
+}
+function _temp() {
+  x.foo = 1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-method-call.js
new file mode 100644
index 00000000000..c536fbe9058
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-method-call.js
@@ -0,0 +1,11 @@
+let x = {};
+function Component() {
+  React.useEffect(() => {
+    x.foo = 1;
+  });
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-namespace-pruned.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-namespace-pruned.expect.md
new file mode 100644
index 00000000000..f3fb51cc58b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-namespace-pruned.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+import * as React from 'react';
+
+function someGlobal() {}
+function useFoo() {
+  const fn = React.useMemo(
+    () =>
+      function () {
+        someGlobal();
+      },
+    []
+  );
+  React.useEffect(() => {
+    fn();
+  }, [fn]);
+
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+
+function someGlobal() {}
+function useFoo() {
+  const $ = _c(2);
+  const fn = _temp;
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      fn();
+    };
+    t1 = [fn];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  React.useEffect(t0, t1);
+  return null;
+}
+function _temp() {
+  someGlobal();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-namespace-pruned.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-namespace-pruned.js
new file mode 100644
index 00000000000..67f561b5ed3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-namespace-pruned.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+function someGlobal() {}
+function useFoo() {
+  const fn = React.useMemo(
+    () =>
+      function () {
+        someGlobal();
+      },
+    []
+  );
+  React.useEffect(() => {
+    fn();
+  }, [fn]);
+
+  return null;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md
new file mode 100644
index 00000000000..0cce42e97a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+// @enableTransitivelyFreezeFunctionExpressions:false
+
+function Component(props) {
+  const item = useMutable(props.itemId);
+  const dispatch = useDispatch();
+  useFreeze(dispatch);
+
+  const exit = useCallback(() => {
+    dispatch(createExitAction());
+  }, [dispatch]);
+
+  useEffect(() => {
+    const cleanup = GlobalEventEmitter.addListener('onInput', () => {
+      if (item.value) {
+        exit();
+      }
+    });
+    return () => cleanup.remove();
+  }, [exit, item]);
+
+  maybeMutate(item);
+
+  return <div />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableTransitivelyFreezeFunctionExpressions:false
+
+function Component(props) {
+  const $ = _c(7);
+  const item = useMutable(props.itemId);
+  const dispatch = useDispatch();
+  useFreeze(dispatch);
+  let t0;
+  if ($[0] !== dispatch) {
+    t0 = () => {
+      dispatch(createExitAction());
+    };
+    $[0] = dispatch;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const exit = t0;
+  let t1;
+  let t2;
+  if ($[2] !== exit || $[3] !== item) {
+    t1 = () => {
+      const cleanup = GlobalEventEmitter.addListener("onInput", () => {
+        if (item.value) {
+          exit();
+        }
+      });
+      return () => cleanup.remove();
+    };
+    t2 = [exit, item];
+    $[2] = exit;
+    $[3] = item;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  useEffect(t1, t2);
+
+  maybeMutate(item);
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <div />;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.js
new file mode 100644
index 00000000000..73c3d73688e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.js
@@ -0,0 +1,24 @@
+// @enableTransitivelyFreezeFunctionExpressions:false
+
+function Component(props) {
+  const item = useMutable(props.itemId);
+  const dispatch = useDispatch();
+  useFreeze(dispatch);
+
+  const exit = useCallback(() => {
+    dispatch(createExitAction());
+  }, [dispatch]);
+
+  useEffect(() => {
+    const cleanup = GlobalEventEmitter.addListener('onInput', () => {
+      if (item.value) {
+        exit();
+      }
+    });
+    return () => cleanup.remove();
+  }, [exit, item]);
+
+  maybeMutate(item);
+
+  return <div />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.expect.md
new file mode 100644
index 00000000000..f6de477ff12
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState('hello');
+  useEffect(() => {
+    setState('goodbye');
+  }, []);
+
+  return <div>{state}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+
+function Component() {
+  const $ = _c(4);
+  const [state, setState] = useState("hello");
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState("goodbye");
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[2] !== state) {
+    t2 = <div>{state}</div>;
+    $[2] = state;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>goodbye</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.js
new file mode 100644
index 00000000000..986f037bf6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-snap-test.js
@@ -0,0 +1,15 @@
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState('hello');
+  useEffect(() => {
+    setState('goodbye');
+  }, []);
+
+  return <div>{state}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useImperativeHandle-ref-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useImperativeHandle-ref-mutate.expect.md
new file mode 100644
index 00000000000..d8f1a9ff20d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useImperativeHandle-ref-mutate.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @flow
+
+import {useImperativeHandle, useRef} from 'react';
+
+component Component(prop: number) {
+  const ref1 = useRef(null);
+  const ref2 = useRef(1);
+  useImperativeHandle(ref1, () => {
+    const precomputed = prop + ref2.current;
+    return {
+      foo: () => prop + ref2.current + precomputed,
+    };
+  }, [prop]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+
+import { useImperativeHandle, useRef } from "react";
+
+function Component(t0) {
+  const $ = _c(3);
+  const { prop } = t0;
+  const ref1 = useRef(null);
+  const ref2 = useRef(1);
+  let t1;
+  let t2;
+  if ($[0] !== prop) {
+    t1 = () => {
+      const precomputed = prop + ref2.current;
+      return { foo: () => prop + ref2.current + precomputed };
+    };
+    t2 = [prop];
+    $[0] = prop;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useImperativeHandle(ref1, t1, t2);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ prop: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useImperativeHandle-ref-mutate.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useImperativeHandle-ref-mutate.js
new file mode 100644
index 00000000000..63d090ddd81
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useImperativeHandle-ref-mutate.js
@@ -0,0 +1,19 @@
+// @flow
+
+import {useImperativeHandle, useRef} from 'react';
+
+component Component(prop: number) {
+  const ref1 = useRef(null);
+  const ref2 = useRef(1);
+  useImperativeHandle(ref1, () => {
+    const precomputed = prop + ref2.current;
+    return {
+      foo: () => prop + ref2.current + precomputed,
+    };
+  }, [prop]);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prop: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-arrow-implicit-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-arrow-implicit-return.expect.md
new file mode 100644
index 00000000000..df3dae1d83a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-arrow-implicit-return.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => computeValue(), []);
+  return <div>{value}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo
+function Component() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = computeValue();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const value = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{value}</div>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-arrow-implicit-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-arrow-implicit-return.js
new file mode 100644
index 00000000000..0ea121430d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-arrow-implicit-return.js
@@ -0,0 +1,5 @@
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => computeValue(), []);
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-empty-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-empty-return.expect.md
new file mode 100644
index 00000000000..7be708ef501
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-empty-return.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => {
+    return;
+  }, []);
+  return <div>{value}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>{undefined}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-empty-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-empty-return.js
new file mode 100644
index 00000000000..7985884d565
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-empty-return.js
@@ -0,0 +1,7 @@
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => {
+    return;
+  }, []);
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-explicit-null-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-explicit-null-return.expect.md
new file mode 100644
index 00000000000..d35213b0080
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-explicit-null-return.expect.md
@@ -0,0 +1,34 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => {
+    return null;
+  }, []);
+  return <div>{value}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>{null}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-explicit-null-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-explicit-null-return.js
new file mode 100644
index 00000000000..9b0a1a8253d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-explicit-null-return.js
@@ -0,0 +1,7 @@
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => {
+    return null;
+  }, []);
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-if-else-multiple-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-if-else-multiple-return.expect.md
new file mode 100644
index 00000000000..40642ebb2d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-if-else-multiple-return.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    if (props.cond) {
+      return makeObject(props.a);
+    }
+    return makeObject(props.b);
+  });
+  return x;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  bb0: {
+    if (props.cond) {
+      let t1;
+      if ($[0] !== props.a) {
+        t1 = makeObject(props.a);
+        $[0] = props.a;
+        $[1] = t1;
+      } else {
+        t1 = $[1];
+      }
+      t0 = t1;
+      break bb0;
+    }
+    let t1;
+    if ($[2] !== props.b) {
+      t1 = makeObject(props.b);
+      $[2] = props.b;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    t0 = t1;
+  }
+  const x = t0;
+  return x;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-if-else-multiple-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-if-else-multiple-return.js
new file mode 100644
index 00000000000..ba5ab1cb2f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-if-else-multiple-return.js
@@ -0,0 +1,10 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    if (props.cond) {
+      return makeObject(props.a);
+    }
+    return makeObject(props.b);
+  });
+  return x;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-independently-memoizeable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-independently-memoizeable.expect.md
new file mode 100644
index 00000000000..c433cd2dfca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-independently-memoizeable.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const [a, b] = useMemo(() => {
+    const items = [];
+    const a = makeObject(props.a);
+    const b = makeObject(props.b);
+    return [a, b];
+  });
+  return [a, b];
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const $ = _c(10);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = makeObject(props.a);
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const a = t0;
+  let t1;
+  if ($[2] !== props.b) {
+    t1 = makeObject(props.b);
+    $[2] = props.b;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const b = t1;
+  let t2;
+  if ($[4] !== a || $[5] !== b) {
+    t2 = [a, b];
+    $[4] = a;
+    $[5] = b;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const [a_0, b_0] = t2;
+  let t3;
+  if ($[7] !== a_0 || $[8] !== b_0) {
+    t3 = [a_0, b_0];
+    $[7] = a_0;
+    $[8] = b_0;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-independently-memoizeable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-independently-memoizeable.js
new file mode 100644
index 00000000000..a557a278197
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-independently-memoizeable.js
@@ -0,0 +1,10 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const [a, b] = useMemo(() => {
+    const items = [];
+    const a = makeObject(props.a);
+    const b = makeObject(props.b);
+    return [a, b];
+  });
+  return [a, b];
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inlining-block-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inlining-block-return.expect.md
new file mode 100644
index 00000000000..45911b4219b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inlining-block-return.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+function component(a, b) {
+  let x = useMemo(() => {
+    if (a) {
+      return {b};
+    }
+  }, [a, b]);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a, b) {
+  const $ = _c(2);
+  let t0;
+  bb0: {
+    if (a) {
+      let t1;
+      if ($[0] !== b) {
+        t1 = { b };
+        $[0] = b;
+        $[1] = t1;
+      } else {
+        t1 = $[1];
+      }
+      t0 = t1;
+      break bb0;
+    }
+    t0 = undefined;
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inlining-block-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inlining-block-return.js
new file mode 100644
index 00000000000..0048e2cb6c9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inlining-block-return.js
@@ -0,0 +1,14 @@
+function component(a, b) {
+  let x = useMemo(() => {
+    if (a) {
+      return {b};
+    }
+  }, [a, b]);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inverted-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inverted-if.expect.md
new file mode 100644
index 00000000000..87784e39841
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inverted-if.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    label: {
+      if (props.cond) {
+        break label;
+      }
+      return props.a;
+    }
+    return props.b;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  let t0;
+  bb0: {
+    bb1: {
+      if (props.cond) {
+        break bb1;
+      }
+
+      t0 = props.a;
+      break bb0;
+    }
+
+    t0 = props.b;
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inverted-if.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inverted-if.js
new file mode 100644
index 00000000000..baecabc252b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-inverted-if.js
@@ -0,0 +1,19 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    label: {
+      if (props.cond) {
+        break label;
+      }
+      return props.a;
+    }
+    return props.b;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-labeled-statement-unconditional-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-labeled-statement-unconditional-return.expect.md
new file mode 100644
index 00000000000..e4725740624
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-labeled-statement-unconditional-return.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    label: {
+      return props.value;
+    }
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = props.value;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-labeled-statement-unconditional-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-labeled-statement-unconditional-return.js
new file mode 100644
index 00000000000..85c63f7470c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-labeled-statement-unconditional-return.js
@@ -0,0 +1,15 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    label: {
+      return props.value;
+    }
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-logical.expect.md
new file mode 100644
index 00000000000..aa195e650a6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-logical.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => props.a && props.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = props.a && props.b;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-logical.js
new file mode 100644
index 00000000000..1f05ae7d6a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-logical.js
@@ -0,0 +1,11 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => props.a && props.b);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-dont-preserve-memoization-guarantees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-dont-preserve-memoization-guarantees.expect.md
new file mode 100644
index 00000000000..b7f36a1aa9f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-dont-preserve-memoization-guarantees.expect.md
@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  // With the feature disabled these variables are inferred as being mutated inside the useMemo block
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+
+  // This causes their range to extend to include this hook call, and in turn for the memoization to be pruned
+  useHook();
+  const object = useMemo(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+    return x;
+  }, [props.value]);
+
+  identity(free);
+  identity(part);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+import {
+  identity,
+  makeObject_Primitives,
+  mutate,
+  useHook,
+} from "shared-runtime";
+
+function Component(props) {
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+
+  useHook();
+
+  const x = makeObject_Primitives();
+  x.value = props.value;
+  mutate(x, free, part);
+  const object = x;
+
+  identity(free);
+  identity(part);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true,"value":42,"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-dont-preserve-memoization-guarantees.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-dont-preserve-memoization-guarantees.js
new file mode 100644
index 00000000000..31617484664
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-dont-preserve-memoization-guarantees.js
@@ -0,0 +1,28 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  // With the feature disabled these variables are inferred as being mutated inside the useMemo block
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+
+  // This causes their range to extend to include this hook call, and in turn for the memoization to be pruned
+  useHook();
+  const object = useMemo(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+    return x;
+  }, [props.value]);
+
+  identity(free);
+  identity(part);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-preserve-memoization-guarantees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-preserve-memoization-guarantees.expect.md
new file mode 100644
index 00000000000..a9207d39203
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-preserve-memoization-guarantees.expect.md
@@ -0,0 +1,99 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  // With the feature enabled these variables are inferred as frozen as of
+  // the useMemo call
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+
+  // Thus their mutable range ends prior to this hook call, and both the above
+  // values and the useMemo block value can be memoized
+  useHook();
+
+  const object = useMemo(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+    return x;
+  }, [props.value, free, part]);
+
+  // These calls should be inferred as non-mutating due to the above freeze inference
+  identity(free);
+  identity(part);
+
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import {
+  identity,
+  makeObject_Primitives,
+  mutate,
+  useHook,
+} from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const free = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = makeObject_Primitives();
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const free2 = t1;
+  const part = free2.part;
+
+  useHook();
+  let x;
+  if ($[2] !== props.value) {
+    x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+    $[2] = props.value;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  const object = x;
+
+  identity(free);
+  identity(part);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true,"value":42,"wat0":"joe"}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-preserve-memoization-guarantees.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-preserve-memoization-guarantees.js
new file mode 100644
index 00000000000..4647e8845ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-mabye-modified-free-variable-preserve-memoization-guarantees.js
@@ -0,0 +1,33 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate, useHook} from 'shared-runtime';
+
+function Component(props) {
+  // With the feature enabled these variables are inferred as frozen as of
+  // the useMemo call
+  const free = makeObject_Primitives();
+  const free2 = makeObject_Primitives();
+  const part = free2.part;
+
+  // Thus their mutable range ends prior to this hook call, and both the above
+  // values and the useMemo block value can be memoized
+  useHook();
+
+  const object = useMemo(() => {
+    const x = makeObject_Primitives();
+    x.value = props.value;
+    mutate(x, free, part);
+    return x;
+  }, [props.value, free, part]);
+
+  // These calls should be inferred as non-mutating due to the above freeze inference
+  identity(free);
+  identity(part);
+
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md
new file mode 100644
index 00000000000..ac8c52187ed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const object = useMemo(() => makeObject_Primitives(), []);
+  identity(object);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
+import { useMemo } from "react";
+import { identity, makeObject_Primitives, mutate } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  let object;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    object = makeObject_Primitives();
+    identity(object);
+    $[0] = object;
+  } else {
+    object = $[0];
+  }
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.js
new file mode 100644
index 00000000000..01ebbbbcbbe
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.js
@@ -0,0 +1,14 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const object = useMemo(() => makeObject_Primitives(), []);
+  identity(object);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-preserve-memoization-guarantees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-preserve-memoization-guarantees.expect.md
new file mode 100644
index 00000000000..7eddc14c796
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-preserve-memoization-guarantees.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const object = useMemo(() => makeObject_Primitives(), []);
+  identity(object);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+import { identity, makeObject_Primitives, mutate } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeObject_Primitives();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const object = t0;
+  identity(object);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) {"a":0,"b":"value1","c":true}
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-preserve-memoization-guarantees.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-preserve-memoization-guarantees.js
new file mode 100644
index 00000000000..acd744f76b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-preserve-memoization-guarantees.js
@@ -0,0 +1,14 @@
+// @enablePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+import {identity, makeObject_Primitives, mutate} from 'shared-runtime';
+
+function Component(props) {
+  const object = useMemo(() => makeObject_Primitives(), []);
+  identity(object);
+  return object;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md
new file mode 100644
index 00000000000..cb6282de291
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component(props) {
+  const x = useMemo(() => {
+    let y = [];
+    if (props.cond) {
+      y.push(props.a);
+    }
+    if (props.cond2) {
+      return y;
+    }
+    y.push(props.b);
+    return y;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2, cond2: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if (
+    $[0] !== props.a ||
+    $[1] !== props.b ||
+    $[2] !== props.cond ||
+    $[3] !== props.cond2
+  ) {
+    bb0: {
+      const y = [];
+      if (props.cond) {
+        y.push(props.a);
+      }
+
+      if (props.cond2) {
+        t0 = y;
+        break bb0;
+      }
+
+      y.push(props.b);
+      t0 = y;
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = props.cond2;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 1, b: 2, cond2: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [2]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.js
new file mode 100644
index 00000000000..b51cc5fb5f1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.js
@@ -0,0 +1,22 @@
+// @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+
+function Component(props) {
+  const x = useMemo(() => {
+    let y = [];
+    if (props.cond) {
+      y.push(props.a);
+    }
+    if (props.cond2) {
+      return y;
+    }
+    y.push(props.b);
+    return y;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 1, b: 2, cond2: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-returns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-returns.expect.md
new file mode 100644
index 00000000000..0fa2700721b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-returns.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo
+function Component({items}) {
+  const value = useMemo(() => {
+    for (let item of items) {
+      if (item.match) return item;
+    }
+    return null;
+  }, [items]);
+  return <div>{value}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo
+function Component(t0) {
+  const $ = _c(2);
+  const { items } = t0;
+  let t1;
+  bb0: {
+    for (const item of items) {
+      if (item.match) {
+        t1 = item;
+        break bb0;
+      }
+    }
+
+    t1 = null;
+  }
+  const value = t1;
+  let t2;
+  if ($[0] !== value) {
+    t2 = <div>{value}</div>;
+    $[0] = value;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-returns.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-returns.js
new file mode 100644
index 00000000000..dce32663f1c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-returns.js
@@ -0,0 +1,10 @@
+// @validateNoVoidUseMemo
+function Component({items}) {
+  const value = useMemo(() => {
+    for (let item of items) {
+      if (item.match) return item;
+    }
+    return null;
+  }, [items]);
+  return <div>{value}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md
new file mode 100644
index 00000000000..4d1cc124006
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md
@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender:false @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function Component() {
+  const x = useMemo(makeArray, []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInRender:false @enablePreserveExistingMemoizationGuarantees:false
+import { useMemo } from "react";
+import { makeArray } from "shared-runtime";
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeArray();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts
new file mode 100644
index 00000000000..20a377c4749
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts
@@ -0,0 +1,13 @@
+// @validateNoSetStateInRender:false @enablePreserveExistingMemoizationGuarantees:false
+import {useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function Component() {
+  const x = useMemo(makeArray, []);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md
new file mode 100644
index 00000000000..0d265a7c296
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    if (props.cond) {
+      if (props.cond) {
+        return props.value;
+      }
+    }
+  }, [props.cond]);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  let t0;
+  bb0: {
+    if (props.cond) {
+      if (props.cond) {
+        t0 = props.value;
+        break bb0;
+      }
+    }
+    t0 = undefined;
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js
new file mode 100644
index 00000000000..02890978ad1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js
@@ -0,0 +1,17 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    if (props.cond) {
+      if (props.cond) {
+        return props.value;
+      }
+    }
+  }, [props.cond]);
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved-nomemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved-nomemo.expect.md
new file mode 100644
index 00000000000..d67a7aafa43
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved-nomemo.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @disableMemoizationForDebugging
+import {useMemo} from 'react';
+
+function Component({a}) {
+  let x = useMemo(() => [a], []);
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 42}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @disableMemoizationForDebugging
+import { useMemo } from "react";
+
+function Component(t0) {
+  const $ = _c(5);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a || true) {
+    t1 = () => [a];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel") || true) {
+    t2 = [];
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const x = useMemo(t1, t2);
+  let t3;
+  if ($[3] !== x || true) {
+    t3 = <div>{x}</div>;
+    $[3] = x;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 42 }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved-nomemo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved-nomemo.js
new file mode 100644
index 00000000000..e05d1cc8606
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved-nomemo.js
@@ -0,0 +1,13 @@
+// @disableMemoizationForDebugging
+import {useMemo} from 'react';
+
+function Component({a}) {
+  let x = useMemo(() => [a], []);
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 42}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved.expect.md
new file mode 100644
index 00000000000..c1ea3343a03
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingManualUseMemo
+import {useMemo} from 'react';
+
+function Component({a}) {
+  let x = useMemo(() => [a], []);
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 42}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingManualUseMemo
+import { useMemo } from "react";
+
+function Component(t0) {
+  const $ = _c(5);
+  const { a } = t0;
+  let t1;
+  if ($[0] !== a) {
+    t1 = () => [a];
+    $[0] = a;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const x = useMemo(t1, t2);
+  let t3;
+  if ($[3] !== x) {
+    t3 = <div>{x}</div>;
+    $[3] = x;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 42 }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>42</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved.js
new file mode 100644
index 00000000000..304635d6392
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple-preserved.js
@@ -0,0 +1,13 @@
+// @enablePreserveExistingManualUseMemo
+import {useMemo} from 'react';
+
+function Component({a}) {
+  let x = useMemo(() => [a], []);
+  return <div>{x}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 42}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.expect.md
new file mode 100644
index 00000000000..301d9860f33
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let x = useMemo(() => [a], [a]);
+  return <Foo x={x}></Foo>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== a) {
+    t0 = [a];
+    $[0] = a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const x = t0;
+  let t1;
+  if ($[2] !== x) {
+    t1 = <Foo x={x} />;
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.js
new file mode 100644
index 00000000000..a680d099be8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-simple.js
@@ -0,0 +1,4 @@
+function component(a) {
+  let x = useMemo(() => [a], [a]);
+  return <Foo x={x}></Foo>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-no-fallthrough.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-no-fallthrough.expect.md
new file mode 100644
index 00000000000..8f1d7a7e065
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-no-fallthrough.expect.md
@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    switch (props.key) {
+      case 'key': {
+        return props.value;
+      }
+      default: {
+        return props.defaultValue;
+      }
+    }
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  let t0;
+  bb0: switch (props.key) {
+    case "key": {
+      t0 = props.value;
+      break bb0;
+    }
+    default: {
+      t0 = props.defaultValue;
+    }
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-no-fallthrough.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-no-fallthrough.js
new file mode 100644
index 00000000000..e2a60ab6baf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-no-fallthrough.js
@@ -0,0 +1,20 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    switch (props.key) {
+      case 'key': {
+        return props.value;
+      }
+      default: {
+        return props.defaultValue;
+      }
+    }
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-return.expect.md
new file mode 100644
index 00000000000..c9001a56374
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-return.expect.md
@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    let y;
+    switch (props.switch) {
+      case 'foo': {
+        return 'foo';
+      }
+      case 'bar': {
+        y = 'bar';
+        break;
+      }
+      default: {
+        y = props.y;
+      }
+    }
+    return y;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  let t0;
+  bb0: {
+    let y;
+    bb1: switch (props.switch) {
+      case "foo": {
+        t0 = "foo";
+        break bb0;
+      }
+      case "bar": {
+        y = "bar";
+        break bb1;
+      }
+      default: {
+        y = props.y;
+      }
+    }
+    t0 = y;
+  }
+  const x = t0;
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-return.js
new file mode 100644
index 00000000000..a55a487d9b7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-switch-return.js
@@ -0,0 +1,26 @@
+// @validateExhaustiveMemoizationDependencies:false
+function Component(props) {
+  const x = useMemo(() => {
+    let y;
+    switch (props.switch) {
+      case 'foo': {
+        return 'foo';
+      }
+      case 'bar': {
+        y = 'bar';
+        break;
+      }
+      default: {
+        y = props.y;
+      }
+    }
+    return y;
+  });
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md
new file mode 100644
index 00000000000..783ad2c12fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+function Component(props) {
+  return (
+    useMemo(() => {
+      return [props.value];
+    }) || []
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 1}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import { useMemo } from "react";
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = (() => [props.value])() || [];
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 1 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js
new file mode 100644
index 00000000000..01a7b6b25e3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js
@@ -0,0 +1,14 @@
+// @enablePreserveExistingMemoizationGuarantees:false @validateExhaustiveMemoizationDependencies:false
+import {useMemo} from 'react';
+function Component(props) {
+  return (
+    useMemo(() => {
+      return [props.value];
+    }) || []
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 1}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.expect.md
new file mode 100644
index 00000000000..392ff267a26
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+import {useReducer} from 'react';
+
+function f() {
+  const [state, dispatch] = useReducer();
+
+  const onClick = () => {
+    dispatch();
+  };
+
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useReducer } from "react";
+
+function f() {
+  const $ = _c(1);
+  const [, dispatch] = useReducer();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onClick = () => {
+      dispatch();
+    };
+    t0 = <div onClick={onClick} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.js
new file mode 100644
index 00000000000..19bbe8abc5e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useReducer-returned-dispatcher-is-non-reactive.js
@@ -0,0 +1,17 @@
+import {useReducer} from 'react';
+
+function f() {
+  const [state, dispatch] = useReducer();
+
+  const onClick = () => {
+    dispatch();
+  };
+
+  return <div onClick={onClick} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: f,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-and-other-hook-unpruned-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-and-other-hook-unpruned-dependency.expect.md
new file mode 100644
index 00000000000..27dcf877e0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-and-other-hook-unpruned-dependency.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+import {useState} from 'react'; // @enableChangeDetectionForDebugging
+
+function useOther(x) {
+  return x;
+}
+
+function Component(props) {
+  const w = f(props.x);
+  const z = useOther(w);
+  const [x, _] = useState(z);
+  return <div>{x}</div>;
+}
+
+function f(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { $structuralCheck } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react"; // @enableChangeDetectionForDebugging
+
+function useOther(x) {
+  return x;
+}
+
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  {
+    t0 = f(props.x);
+    let condition = $[0] !== props.x;
+    if (!condition) {
+      let old$t0 = $[1];
+      $structuralCheck(old$t0, t0, "t0", "Component", "cached", "(8:8)");
+    }
+    $[0] = props.x;
+    $[1] = t0;
+    if (condition) {
+      t0 = f(props.x);
+      $structuralCheck($[1], t0, "t0", "Component", "recomputed", "(8:8)");
+      t0 = $[1];
+    }
+  }
+  const w = t0;
+  const z = useOther(w);
+  const [x] = useState(z);
+  let t1;
+  {
+    t1 = <div>{x}</div>;
+    let condition = $[2] !== x;
+    if (!condition) {
+      let old$t1 = $[3];
+      $structuralCheck(old$t1, t1, "t1", "Component", "cached", "(11:11)");
+    }
+    $[2] = x;
+    $[3] = t1;
+    if (condition) {
+      t1 = <div>{x}</div>;
+      $structuralCheck($[3], t1, "t1", "Component", "recomputed", "(11:11)");
+      t1 = $[3];
+    }
+  }
+  return t1;
+}
+
+function f(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 42 }],
+  isComponent: true,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-and-other-hook-unpruned-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-and-other-hook-unpruned-dependency.js
new file mode 100644
index 00000000000..8c0d31bc599
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-and-other-hook-unpruned-dependency.js
@@ -0,0 +1,22 @@
+import {useState} from 'react'; // @enableChangeDetectionForDebugging
+
+function useOther(x) {
+  return x;
+}
+
+function Component(props) {
+  const w = f(props.x);
+  const z = useOther(w);
+  const [x, _] = useState(z);
+  return <div>{x}</div>;
+}
+
+function f(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.expect.md
new file mode 100644
index 00000000000..99abce51223
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @enableChangeDetectionForDebugging
+import {useState} from 'react';
+
+function Component(props) {
+  const [x, _] = useState(f(props.x));
+  return <div>{x}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { $structuralCheck } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @enableChangeDetectionForDebugging
+import { useState } from "react";
+
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = f(props.x);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [x] = useState(t0);
+  let t1;
+  {
+    t1 = <div>{x}</div>;
+    let condition = $[1] !== x;
+    if (!condition) {
+      let old$t1 = $[2];
+      $structuralCheck(old$t1, t1, "t1", "Component", "cached", "(6:6)");
+    }
+    $[1] = x;
+    $[2] = t1;
+    if (condition) {
+      t1 = <div>{x}</div>;
+      $structuralCheck($[2], t1, "t1", "Component", "recomputed", "(6:6)");
+      t1 = $[2];
+    }
+  }
+  return t1;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.js
new file mode 100644
index 00000000000..26b04696315
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.js
@@ -0,0 +1,7 @@
+// @enableChangeDetectionForDebugging
+import {useState} from 'react';
+
+function Component(props) {
+  const [x, _] = useState(f(props.x));
+  return <div>{x}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-unpruned-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-unpruned-dependency.expect.md
new file mode 100644
index 00000000000..28d3e333594
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-unpruned-dependency.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+import {useState} from 'react'; // @enableChangeDetectionForDebugging
+
+function Component(props) {
+  const w = f(props.x);
+  const [x, _] = useState(w);
+  return (
+    <div>
+      {x}
+      {w}
+    </div>
+  );
+}
+
+function f(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { $structuralCheck } from "react-compiler-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react"; // @enableChangeDetectionForDebugging
+
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  {
+    t0 = f(props.x);
+    let condition = $[0] !== props.x;
+    if (!condition) {
+      let old$t0 = $[1];
+      $structuralCheck(old$t0, t0, "t0", "Component", "cached", "(4:4)");
+    }
+    $[0] = props.x;
+    $[1] = t0;
+    if (condition) {
+      t0 = f(props.x);
+      $structuralCheck($[1], t0, "t0", "Component", "recomputed", "(4:4)");
+      t0 = $[1];
+    }
+  }
+  const w = t0;
+  const [x] = useState(w);
+  let t1;
+  {
+    t1 = (
+      <div>
+        {x}
+        {w}
+      </div>
+    );
+    let condition = $[2] !== w || $[3] !== x;
+    if (!condition) {
+      let old$t1 = $[4];
+      $structuralCheck(old$t1, t1, "t1", "Component", "cached", "(7:10)");
+    }
+    $[2] = w;
+    $[3] = x;
+    $[4] = t1;
+    if (condition) {
+      t1 = (
+        <div>
+          {x}
+          {w}
+        </div>
+      );
+      $structuralCheck($[4], t1, "t1", "Component", "recomputed", "(7:10)");
+      t1 = $[4];
+    }
+  }
+  return t1;
+}
+
+function f(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 42 }],
+  isComponent: true,
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-unpruned-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-unpruned-dependency.js
new file mode 100644
index 00000000000..2643aab3ab5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-unpruned-dependency.js
@@ -0,0 +1,22 @@
+import {useState} from 'react'; // @enableChangeDetectionForDebugging
+
+function Component(props) {
+  const w = f(props.x);
+  const [x, _] = useState(w);
+  return (
+    <div>
+      {x}
+      {w}
+    </div>
+  );
+}
+
+function f(x) {
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 42}],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md
new file mode 100644
index 00000000000..8e9d259fa71
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useEffect(() => {
+    const {height} = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  return tooltipHeight;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Tooltip,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @outputMode:"lint"
+import { useState, useRef, useEffect } from "react";
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  return tooltipHeight;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Tooltip,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) Cannot read properties of null (reading 'getBoundingClientRect')
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js
new file mode 100644
index 00000000000..88201926788
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js
@@ -0,0 +1,19 @@
+// @validateNoSetStateInEffects @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useEffect(() => {
+    const {height} = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  return tooltipHeight;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Tooltip,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md
new file mode 100644
index 00000000000..845711d24be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useLayoutEffect} from 'react';
+
+function Component() {
+  const ref = useRef({size: 5});
+  const [computedSize, setComputedSize] = useState(0);
+
+  useLayoutEffect(() => {
+    setComputedSize(ref.current.size * 10);
+  }, []);
+
+  return computedSize;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import { useState, useRef, useLayoutEffect } from "react";
+
+function Component() {
+  const ref = useRef({ size: 5 });
+  const [computedSize, setComputedSize] = useState(0);
+
+  useLayoutEffect(() => {
+    setComputedSize(ref.current.size * 10);
+  }, []);
+
+  return computedSize;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 50
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js
new file mode 100644
index 00000000000..c6903f89332
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js
@@ -0,0 +1,18 @@
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useLayoutEffect} from 'react';
+
+function Component() {
+  const ref = useRef({size: 5});
+  const [computedSize, setComputedSize] = useState(0);
+
+  useLayoutEffect(() => {
+    setComputedSize(ref.current.size * 10);
+  }, []);
+
+  return computedSize;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md
new file mode 100644
index 00000000000..269bda83ce9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Component() {
+  const ref = useRef([1, 2, 3, 4, 5]);
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const index = 2;
+    setValue(ref.current[index]);
+  }, []);
+
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import { useState, useRef, useEffect } from "react";
+
+function Component() {
+  const ref = useRef([1, 2, 3, 4, 5]);
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const index = 2;
+    setValue(ref.current[index]);
+  }, []);
+
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 3
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js
new file mode 100644
index 00000000000..a5cfd5c2b2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js
@@ -0,0 +1,19 @@
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Component() {
+  const ref = useRef([1, 2, 3, 4, 5]);
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const index = 2;
+    setValue(ref.current[index]);
+  }, []);
+
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md
new file mode 100644
index 00000000000..ce186bcddf4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    function getBoundingRect(ref) {
+      if (ref.current) {
+        return ref.current.getBoundingClientRect?.()?.width ?? 100;
+      }
+      return 100;
+    }
+
+    setWidth(getBoundingRect(ref));
+  }, []);
+
+  return width;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import { useState, useRef, useEffect } from "react";
+
+function Component() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    function getBoundingRect(ref_0) {
+      if (ref_0.current) {
+        return ref_0.current.getBoundingClientRect?.()?.width ?? 100;
+      }
+      return 100;
+    }
+
+    setWidth(getBoundingRect(ref));
+  }, []);
+
+  return width;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 100
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js
new file mode 100644
index 00000000000..8b92e7c5fd0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js
@@ -0,0 +1,25 @@
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Component() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    function getBoundingRect(ref) {
+      if (ref.current) {
+        return ref.current.getBoundingClientRect?.()?.width ?? 100;
+      }
+      return 100;
+    }
+
+    setWidth(getBoundingRect(ref));
+  }, []);
+
+  return width;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md
new file mode 100644
index 00000000000..6570731d290
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md
@@ -0,0 +1,103 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Component({x, y}) {
+  const previousXRef = useRef(null);
+  const previousYRef = useRef(null);
+
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const previousX = previousXRef.current;
+    previousXRef.current = x;
+    const previousY = previousYRef.current;
+    previousYRef.current = y;
+    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+      const data = load({x, y});
+      setData(data);
+    }
+  }, [x, y]);
+
+  return data;
+}
+
+function areEqual(a, b) {
+  return a === b;
+}
+
+function load({x, y}) {
+  return x * y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 0, y: 0}],
+  sequentialRenders: [
+    {x: 0, y: 0},
+    {x: 1, y: 0},
+    {x: 1, y: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
+import { useState, useRef, useEffect } from "react";
+
+function Component({ x, y }) {
+  const previousXRef = useRef(null);
+  const previousYRef = useRef(null);
+
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const previousX = previousXRef.current;
+    previousXRef.current = x;
+    const previousY = previousYRef.current;
+    previousYRef.current = y;
+    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+      const data_0 = load({ x, y });
+      setData(data_0);
+    }
+  }, [x, y]);
+
+  return data;
+}
+
+function areEqual(a, b) {
+  return a === b;
+}
+
+function load({ x, y }) {
+  return x * y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 0, y: 0 }],
+  sequentialRenders: [
+    { x: 0, y: 0 },
+    { x: 1, y: 0 },
+    { x: 1, y: 1 },
+  ],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":182},"end":{"line":22,"column":1,"index":650},"filename":"valid-setState-in-useEffect-controlled-by-ref-value.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":1,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) 0
+0
+1
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js
new file mode 100644
index 00000000000..4e884e1c65d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js
@@ -0,0 +1,40 @@
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
+import {useState, useRef, useEffect} from 'react';
+
+function Component({x, y}) {
+  const previousXRef = useRef(null);
+  const previousYRef = useRef(null);
+
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const previousX = previousXRef.current;
+    previousXRef.current = x;
+    const previousY = previousYRef.current;
+    previousYRef.current = y;
+    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+      const data = load({x, y});
+      setData(data);
+    }
+  }, [x, y]);
+
+  return data;
+}
+
+function areEqual(a, b) {
+  return a === b;
+}
+
+function load({x, y}) {
+  return x * y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 0, y: 0}],
+  sequentialRenders: [
+    {x: 0, y: 0},
+    {x: 1, y: 0},
+    {x: 1, y: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
new file mode 100644
index 00000000000..da69a338f8a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    const f = () => {
+      setState();
+    };
+    setTimeout(() => f(), 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    const f = () => {
+      setState();
+    };
+    setTimeout(() => f(), 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
new file mode 100644
index 00000000000..f5255fd4b50
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
@@ -0,0 +1,18 @@
+// @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    const f = () => {
+      setState();
+    };
+    setTimeout(() => f(), 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
new file mode 100644
index 00000000000..7a5718a1710
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setTimeout(setState, 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setTimeout(setState, 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
new file mode 100644
index 00000000000..68f5da981fc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
@@ -0,0 +1,15 @@
+// @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setTimeout(setState, 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.expect.md
new file mode 100644
index 00000000000..d426c74a2da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.expect.md
@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
+import {useEffect, useEffectEvent, useState} from 'react';
+
+const shouldSetState = false;
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(10);
+  });
+  useEffect(() => {
+    setTimeout(effectEvent, 10);
+  });
+
+  const effectEventWithTimeout = useEffectEvent(() => {
+    setTimeout(() => {
+      setState(20);
+    }, 10);
+  });
+  useEffect(() => {
+    effectEventWithTimeout();
+  }, []);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
+import { useEffect, useEffectEvent, useState } from "react";
+
+const shouldSetState = false;
+
+function Component() {
+  const $ = _c(7);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setState(10);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const effectEvent = useEffectEvent(t0);
+  let t1;
+  if ($[1] !== effectEvent) {
+    t1 = () => {
+      setTimeout(effectEvent, 10);
+    };
+    $[1] = effectEvent;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1);
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setTimeout(() => {
+        setState(20);
+      }, 10);
+    };
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const effectEventWithTimeout = useEffectEvent(t2);
+  let t3;
+  if ($[4] !== effectEventWithTimeout) {
+    t3 = () => {
+      effectEventWithTimeout();
+    };
+    $[4] = effectEventWithTimeout;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = [];
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  useEffect(t3, t4);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":164},"end":{"line":24,"column":1,"index":551},"filename":"valid-setState-in-useEffect-via-useEffectEvent-listener.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":5,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) (0 , _react.useEffectEvent) is not a function
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.js
new file mode 100644
index 00000000000..e2ebd7f58e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-listener.js
@@ -0,0 +1,29 @@
+// @validateNoSetStateInEffects @loggerTestOnly @compilationMode:"infer"
+import {useEffect, useEffectEvent, useState} from 'react';
+
+const shouldSetState = false;
+
+function Component() {
+  const [state, setState] = useState(0);
+  const effectEvent = useEffectEvent(() => {
+    setState(10);
+  });
+  useEffect(() => {
+    setTimeout(effectEvent, 10);
+  });
+
+  const effectEventWithTimeout = useEffectEvent(() => {
+    setTimeout(() => {
+      setState(20);
+    }, 10);
+  });
+  useEffect(() => {
+    effectEventWithTimeout();
+  }, []);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.expect.md
new file mode 100644
index 00000000000..f24c39c678d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.expect.md
@@ -0,0 +1,192 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
+import {useState, useRef, useEffect, useEffectEvent} from 'react';
+
+function Component({x, y}) {
+  const previousXRef = useRef(null);
+  const previousYRef = useRef(null);
+
+  const [data, setData] = useState(null);
+
+  const effectEvent = useEffectEvent(() => {
+    const data = load({x, y});
+    setData(data);
+  });
+
+  useEffect(() => {
+    const previousX = previousXRef.current;
+    previousXRef.current = x;
+    const previousY = previousYRef.current;
+    previousYRef.current = y;
+    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+      effectEvent();
+    }
+  }, [x, y]);
+
+  const effectEvent2 = useEffectEvent((xx, yy) => {
+    const previousX = previousXRef.current;
+    previousXRef.current = xx;
+    const previousY = previousYRef.current;
+    previousYRef.current = yy;
+    if (!areEqual(xx, previousX) || !areEqual(yy, previousY)) {
+      const data = load({x: xx, y: yy});
+      setData(data);
+    }
+  });
+
+  useEffect(() => {
+    effectEvent2(x, y);
+  }, [x, y]);
+
+  return data;
+}
+
+function areEqual(a, b) {
+  return a === b;
+}
+
+function load({x, y}) {
+  return x * y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 0, y: 0}],
+  sequentialRenders: [
+    {x: 0, y: 0},
+    {x: 1, y: 0},
+    {x: 1, y: 1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
+import { useState, useRef, useEffect, useEffectEvent } from "react";
+
+function Component(t0) {
+  const $ = _c(18);
+  const { x, y } = t0;
+  const previousXRef = useRef(null);
+  const previousYRef = useRef(null);
+
+  const [data, setData] = useState(null);
+  let t1;
+  if ($[0] !== x || $[1] !== y) {
+    t1 = () => {
+      const data_0 = load({ x, y });
+      setData(data_0);
+    };
+    $[0] = x;
+    $[1] = y;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const effectEvent = useEffectEvent(t1);
+  let t2;
+  if ($[3] !== effectEvent || $[4] !== x || $[5] !== y) {
+    t2 = () => {
+      const previousX = previousXRef.current;
+      previousXRef.current = x;
+      const previousY = previousYRef.current;
+      previousYRef.current = y;
+      if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+        effectEvent();
+      }
+    };
+    $[3] = effectEvent;
+    $[4] = x;
+    $[5] = y;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== x || $[8] !== y) {
+    t3 = [x, y];
+    $[7] = x;
+    $[8] = y;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = (xx, yy) => {
+      const previousX_0 = previousXRef.current;
+      previousXRef.current = xx;
+      const previousY_0 = previousYRef.current;
+      previousYRef.current = yy;
+      if (!areEqual(xx, previousX_0) || !areEqual(yy, previousY_0)) {
+        const data_1 = load({ x: xx, y: yy });
+        setData(data_1);
+      }
+    };
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const effectEvent2 = useEffectEvent(t4);
+  let t5;
+  if ($[11] !== effectEvent2 || $[12] !== x || $[13] !== y) {
+    t5 = () => {
+      effectEvent2(x, y);
+    };
+    $[11] = effectEvent2;
+    $[12] = x;
+    $[13] = y;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== x || $[16] !== y) {
+    t6 = [x, y];
+    $[15] = x;
+    $[16] = y;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  useEffect(t5, t6);
+  return data;
+}
+
+function areEqual(a, b) {
+  return a === b;
+}
+
+function load({ x, y }) {
+  return x * y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 0, y: 0 }],
+  sequentialRenders: [
+    { x: 0, y: 0 },
+    { x: 1, y: 0 },
+    { x: 1, y: 1 },
+  ],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":179},"end":{"line":41,"column":1,"index":1116},"filename":"valid-setState-in-useEffect-via-useEffectEvent-with-ref.ts"},"fnName":"Component","memoSlots":18,"memoBlocks":6,"memoValues":6,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) [[ (exception in render) TypeError: (0 , _react.useEffectEvent) is not a function ]]
+[[ (exception in render) TypeError: (0 , _react.useEffectEvent) is not a function ]]
+[[ (exception in render) TypeError: (0 , _react.useEffectEvent) is not a function ]]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.js
new file mode 100644
index 00000000000..1436edf290b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-via-useEffectEvent-with-ref.js
@@ -0,0 +1,59 @@
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
+import {useState, useRef, useEffect, useEffectEvent} from 'react';
+
+function Component({x, y}) {
+  const previousXRef = useRef(null);
+  const previousYRef = useRef(null);
+
+  const [data, setData] = useState(null);
+
+  const effectEvent = useEffectEvent(() => {
+    const data = load({x, y});
+    setData(data);
+  });
+
+  useEffect(() => {
+    const previousX = previousXRef.current;
+    previousXRef.current = x;
+    const previousY = previousYRef.current;
+    previousYRef.current = y;
+    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+      effectEvent();
+    }
+  }, [x, y]);
+
+  const effectEvent2 = useEffectEvent((xx, yy) => {
+    const previousX = previousXRef.current;
+    previousXRef.current = xx;
+    const previousY = previousYRef.current;
+    previousYRef.current = yy;
+    if (!areEqual(xx, previousX) || !areEqual(yy, previousY)) {
+      const data = load({x: xx, y: yy});
+      setData(data);
+    }
+  });
+
+  useEffect(() => {
+    effectEvent2(x, y);
+  }, [x, y]);
+
+  return data;
+}
+
+function areEqual(a, b) {
+  return a === b;
+}
+
+function load({x, y}) {
+  return x * y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: 0, y: 0}],
+  sequentialRenders: [
+    {x: 0, y: 0},
+    {x: 1, y: 0},
+    {x: 1, y: 1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md
new file mode 100644
index 00000000000..9a926dc2231
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useLayoutEffect} from 'react';
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const {height} = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  return tooltipHeight;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Tooltip,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import { useState, useRef, useLayoutEffect } from "react";
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  return tooltipHeight;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Tooltip,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: exception) Cannot read properties of null (reading 'getBoundingClientRect')
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js
new file mode 100644
index 00000000000..b41b2c1e7ce
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js
@@ -0,0 +1,19 @@
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
+import {useState, useRef, useLayoutEffect} from 'react';
+
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const {height} = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+
+  return tooltipHeight;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Tooltip,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md
new file mode 100644
index 00000000000..d44f098f897
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md
@@ -0,0 +1,98 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender @enableAssumeHooksFollowRulesOfReact
+function Component(props) {
+  const logEvent = useLogging(props.appId);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // onSubmit gets the same mutable range as `logEvent`, since that is called
+  // later. however, our validation uses direct aliasing to track function
+  // expressions which are invoked, and understands that this function isn't
+  // called during render:
+  const onSubmit = errorEvent => {
+    logEvent(errorEvent);
+    setCurrentStep(1);
+  };
+
+  switch (currentStep) {
+    case 0:
+      return <OtherComponent data={{foo: 'bar'}} />;
+    case 1:
+      return <OtherComponent data={{foo: 'joe'}} onSubmit={onSubmit} />;
+    default:
+      // 1. logEvent's mutable range is extended to this instruction
+      logEvent('Invalid step');
+      return <OtherComponent data={null} />;
+  }
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInRender @enableAssumeHooksFollowRulesOfReact
+function Component(props) {
+  const $ = _c(7);
+  const logEvent = useLogging(props.appId);
+  const [currentStep, setCurrentStep] = useState(0);
+  let t0;
+  if ($[0] !== logEvent) {
+    t0 = (errorEvent) => {
+      logEvent(errorEvent);
+      setCurrentStep(1);
+    };
+    $[0] = logEvent;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const onSubmit = t0;
+
+  switch (currentStep) {
+    case 0: {
+      let t1;
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = <OtherComponent data={{ foo: "bar" }} />;
+        $[2] = t1;
+      } else {
+        t1 = $[2];
+      }
+      return t1;
+    }
+    case 1: {
+      let t1;
+      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = { foo: "joe" };
+        $[3] = t1;
+      } else {
+        t1 = $[3];
+      }
+      let t2;
+      if ($[4] !== onSubmit) {
+        t2 = <OtherComponent data={t1} onSubmit={onSubmit} />;
+        $[4] = onSubmit;
+        $[5] = t2;
+      } else {
+        t2 = $[5];
+      }
+      return t2;
+    }
+    default: {
+      logEvent("Invalid step");
+      let t1;
+      if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = <OtherComponent data={null} />;
+        $[6] = t1;
+      } else {
+        t1 = $[6];
+      }
+      return t1;
+    }
+  }
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.js
new file mode 100644
index 00000000000..a1367e55322
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.js
@@ -0,0 +1,25 @@
+// @validateNoSetStateInRender @enableAssumeHooksFollowRulesOfReact
+function Component(props) {
+  const logEvent = useLogging(props.appId);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // onSubmit gets the same mutable range as `logEvent`, since that is called
+  // later. however, our validation uses direct aliasing to track function
+  // expressions which are invoked, and understands that this function isn't
+  // called during render:
+  const onSubmit = errorEvent => {
+    logEvent(errorEvent);
+    setCurrentStep(1);
+  };
+
+  switch (currentStep) {
+    case 0:
+      return <OtherComponent data={{foo: 'bar'}} />;
+    case 1:
+      return <OtherComponent data={{foo: 'joe'}} onSubmit={onSubmit} />;
+    default:
+      // 1. logEvent's mutable range is extended to this instruction
+      logEvent('Invalid step');
+      return <OtherComponent data={null} />;
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.expect.md
new file mode 100644
index 00000000000..921bc0a6951
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.expect.md
@@ -0,0 +1,81 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInRender
+import {useState} from 'react';
+
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  const bar = () => {
+    if (props.cond) {
+      // This call is now conditional, so this should pass validation
+      foo();
+    }
+  };
+
+  const baz = () => {
+    bar();
+  };
+  baz();
+
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInRender
+import { useState } from "react";
+
+function Component(props) {
+  const $ = _c(2);
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  const bar = () => {
+    if (props.cond) {
+      foo();
+    }
+  };
+
+  const baz = () => {
+    bar();
+  };
+
+  baz();
+  let t0;
+  if ($[0] !== x) {
+    t0 = [x];
+    $[0] = x;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [0]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.js
new file mode 100644
index 00000000000..6522fefb093
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-unconditional-lambda-which-conditionally-sets-state-ok.js
@@ -0,0 +1,29 @@
+// @validateNoSetStateInRender
+import {useState} from 'react';
+
+function Component(props) {
+  const [x, setX] = useState(0);
+
+  const foo = () => {
+    setX(1);
+  };
+
+  const bar = () => {
+    if (props.cond) {
+      // This call is now conditional, so this should pass validation
+      foo();
+    }
+  };
+
+  const baz = () => {
+    bar();
+  };
+  baz();
+
+  return [x];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: false}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/value-block-mutates-outer-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/value-block-mutates-outer-value.expect.md
new file mode 100644
index 00000000000..7d67cce387e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/value-block-mutates-outer-value.expect.md
@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+import {makeArray, useHook} from 'shared-runtime';
+
+/**
+ * Here, the cond ? [...] : defaultList value block produces two
+ * new values (each with its own scope):
+ *   $0 = ["text"]
+ *   $1 = { text: $0 }
+ * The same value block also mutates customList, so it must be
+ * merged with the scope producing customList
+ */
+function Foo({defaultList, cond}) {
+  const comparator = (a, b) => a - b;
+  useHook();
+  const customList = makeArray(1, 5, 2);
+  useHook();
+  const result = cond
+    ? [...customList.sort(comparator), {text: ['text']}]
+    : defaultList;
+
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{defaultList: [2, 4], cond: true}],
+};
+
+```
+
+## Code
+
+```javascript
+import { makeArray, useHook } from "shared-runtime";
+
+/**
+ * Here, the cond ? [...] : defaultList value block produces two
+ * new values (each with its own scope):
+ *   $0 = ["text"]
+ *   $1 = { text: $0 }
+ * The same value block also mutates customList, so it must be
+ * merged with the scope producing customList
+ */
+function Foo(t0) {
+  const { defaultList, cond } = t0;
+  const comparator = _temp;
+  useHook();
+  const customList = makeArray(1, 5, 2);
+  useHook();
+  const result = cond
+    ? [...customList.sort(comparator), { text: ["text"] }]
+    : defaultList;
+  return result;
+}
+function _temp(a, b) {
+  return a - b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ defaultList: [2, 4], cond: true }],
+};
+
+```
+      
+### Eval output
+(kind: ok) [1,2,5,{"text":["text"]}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/value-block-mutates-outer-value.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/value-block-mutates-outer-value.ts
new file mode 100644
index 00000000000..1527843a554
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/value-block-mutates-outer-value.ts
@@ -0,0 +1,26 @@
+import {makeArray, useHook} from 'shared-runtime';
+
+/**
+ * Here, the cond ? [...] : defaultList value block produces two
+ * new values (each with its own scope):
+ *   $0 = ["text"]
+ *   $1 = { text: $0 }
+ * The same value block also mutates customList, so it must be
+ * merged with the scope producing customList
+ */
+function Foo({defaultList, cond}) {
+  const comparator = (a, b) => a - b;
+  useHook();
+  const customList = makeArray(1, 5, 2);
+  useHook();
+  const result = cond
+    ? [...customList.sort(comparator), {text: ['text']}]
+    : defaultList;
+
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{defaultList: [2, 4], cond: true}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakmap-constructor.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakmap-constructor.expect.md
new file mode 100644
index 00000000000..a6def457a41
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakmap-constructor.expect.md
@@ -0,0 +1,200 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b, c}) {
+  const map = new WeakMap();
+  const mapAlias = map.set(a, 0);
+  mapAlias.set(c, 0);
+
+  const hasB = map.has(b);
+
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={map}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={mapAlias}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[b]}
+        output={[hasB]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+const v1 = {value: 1};
+const v2 = {value: 2};
+const v3 = {value: 3};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: v1, b: v1, c: v1}],
+  sequentialRenders: [
+    {a: v1, b: v1, c: v1},
+    {a: v2, b: v1, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v1, b: v2, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v1, b: v1, c: v1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(27);
+  const { a, b, c } = t0;
+  let map;
+  let mapAlias;
+  if ($[0] !== a || $[1] !== c) {
+    map = new WeakMap();
+    mapAlias = map.set(a, 0);
+    mapAlias.set(c, 0);
+    $[0] = a;
+    $[1] = c;
+    $[2] = map;
+    $[3] = mapAlias;
+  } else {
+    map = $[2];
+    mapAlias = $[3];
+  }
+
+  const hasB = map.has(b);
+  let t1;
+  if ($[4] !== a || $[5] !== c) {
+    t1 = [a, c];
+    $[4] = a;
+    $[5] = c;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== map || $[8] !== t1) {
+    t2 = (
+      <ValidateMemoization inputs={t1} output={map} onlyCheckCompiled={true} />
+    );
+    $[7] = map;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== a || $[11] !== c) {
+    t3 = [a, c];
+    $[10] = a;
+    $[11] = c;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== mapAlias || $[14] !== t3) {
+    t4 = (
+      <ValidateMemoization
+        inputs={t3}
+        output={mapAlias}
+        onlyCheckCompiled={true}
+      />
+    );
+    $[13] = mapAlias;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== b) {
+    t5 = [b];
+    $[16] = b;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== hasB) {
+    t6 = [hasB];
+    $[18] = hasB;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== t5 || $[21] !== t6) {
+    t7 = (
+      <ValidateMemoization inputs={t5} output={t6} onlyCheckCompiled={true} />
+    );
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[23] !== t2 || $[24] !== t4 || $[25] !== t7) {
+    t8 = (
+      <>
+        {t2}
+        {t4}
+        {t7}
+      </>
+    );
+    $[23] = t2;
+    $[24] = t4;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
+}
+
+const v1 = { value: 1 };
+const v2 = { value: 2 };
+const v3 = { value: 3 };
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: v1, b: v1, c: v1 }],
+  sequentialRenders: [
+    { a: v1, b: v1, c: v1 },
+    { a: v2, b: v1, c: v1 },
+    { a: v1, b: v1, c: v1 },
+    { a: v1, b: v2, c: v1 },
+    { a: v1, b: v1, c: v1 },
+    { a: v3, b: v3, c: v1 },
+    { a: v3, b: v3, c: v1 },
+    { a: v1, b: v1, c: v1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":2},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":2},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":2}],"output":[false]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3}],"output":[true]}</div>
+<div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3}],"output":[true]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakmap-constructor.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakmap-constructor.js
new file mode 100644
index 00000000000..d005c9f271d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakmap-constructor.js
@@ -0,0 +1,48 @@
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b, c}) {
+  const map = new WeakMap();
+  const mapAlias = map.set(a, 0);
+  mapAlias.set(c, 0);
+
+  const hasB = map.has(b);
+
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={map}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={mapAlias}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[b]}
+        output={[hasB]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+const v1 = {value: 1};
+const v2 = {value: 2};
+const v3 = {value: 3};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: v1, b: v1, c: v1}],
+  sequentialRenders: [
+    {a: v1, b: v1, c: v1},
+    {a: v2, b: v1, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v1, b: v2, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v1, b: v1, c: v1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakset-constructor.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakset-constructor.expect.md
new file mode 100644
index 00000000000..94e0c7f0554
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakset-constructor.expect.md
@@ -0,0 +1,200 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b, c}) {
+  const set = new WeakSet();
+  const setAlias = set.add(a);
+  setAlias.add(c);
+
+  const hasB = set.has(b);
+
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={set}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={setAlias}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[b]}
+        output={[hasB]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+const v1 = {value: 1};
+const v2 = {value: 2};
+const v3 = {value: 3};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: v1, b: v1, c: v1}],
+  sequentialRenders: [
+    {a: v1, b: v1, c: v1},
+    {a: v2, b: v1, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v1, b: v2, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v1, b: v1, c: v1},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(27);
+  const { a, b, c } = t0;
+  let set;
+  let setAlias;
+  if ($[0] !== a || $[1] !== c) {
+    set = new WeakSet();
+    setAlias = set.add(a);
+    setAlias.add(c);
+    $[0] = a;
+    $[1] = c;
+    $[2] = set;
+    $[3] = setAlias;
+  } else {
+    set = $[2];
+    setAlias = $[3];
+  }
+
+  const hasB = set.has(b);
+  let t1;
+  if ($[4] !== a || $[5] !== c) {
+    t1 = [a, c];
+    $[4] = a;
+    $[5] = c;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== set || $[8] !== t1) {
+    t2 = (
+      <ValidateMemoization inputs={t1} output={set} onlyCheckCompiled={true} />
+    );
+    $[7] = set;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== a || $[11] !== c) {
+    t3 = [a, c];
+    $[10] = a;
+    $[11] = c;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== setAlias || $[14] !== t3) {
+    t4 = (
+      <ValidateMemoization
+        inputs={t3}
+        output={setAlias}
+        onlyCheckCompiled={true}
+      />
+    );
+    $[13] = setAlias;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== b) {
+    t5 = [b];
+    $[16] = b;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== hasB) {
+    t6 = [hasB];
+    $[18] = hasB;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== t5 || $[21] !== t6) {
+    t7 = (
+      <ValidateMemoization inputs={t5} output={t6} onlyCheckCompiled={true} />
+    );
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[23] !== t2 || $[24] !== t4 || $[25] !== t7) {
+    t8 = (
+      <>
+        {t2}
+        {t4}
+        {t7}
+      </>
+    );
+    $[23] = t2;
+    $[24] = t4;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
+}
+
+const v1 = { value: 1 };
+const v2 = { value: 2 };
+const v3 = { value: 3 };
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: v1, b: v1, c: v1 }],
+  sequentialRenders: [
+    { a: v1, b: v1, c: v1 },
+    { a: v2, b: v1, c: v1 },
+    { a: v1, b: v1, c: v1 },
+    { a: v1, b: v2, c: v1 },
+    { a: v1, b: v1, c: v1 },
+    { a: v3, b: v3, c: v1 },
+    { a: v3, b: v3, c: v1 },
+    { a: v1, b: v1, c: v1 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":2},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":2},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":2}],"output":[false]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
+<div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3}],"output":[true]}</div>
+<div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3},{"value":1}],"output":{}}</div><div>{"inputs":[{"value":3}],"output":[true]}</div>
+<div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1},"[[ cyclic ref *2 ]]"],"output":{}}</div><div>{"inputs":[{"value":1}],"output":[true]}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakset-constructor.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakset-constructor.js
new file mode 100644
index 00000000000..9114233812e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/weakset-constructor.js
@@ -0,0 +1,48 @@
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
+function Component({a, b, c}) {
+  const set = new WeakSet();
+  const setAlias = set.add(a);
+  setAlias.add(c);
+
+  const hasB = set.has(b);
+
+  return (
+    <>
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={set}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[a, c]}
+        output={setAlias}
+        onlyCheckCompiled={true}
+      />
+      <ValidateMemoization
+        inputs={[b]}
+        output={[hasB]}
+        onlyCheckCompiled={true}
+      />
+    </>
+  );
+}
+
+const v1 = {value: 1};
+const v2 = {value: 2};
+const v3 = {value: 3};
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: v1, b: v1, c: v1}],
+  sequentialRenders: [
+    {a: v1, b: v1, c: v1},
+    {a: v2, b: v1, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v1, b: v2, c: v1},
+    {a: v1, b: v1, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v3, b: v3, c: v1},
+    {a: v1, b: v1, c: v1},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-break.expect.md
new file mode 100644
index 00000000000..5bf84d4f248
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-break.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  while (a) {
+    break;
+  }
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b) {
+  while (a) {
+    break;
+  }
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-break.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-break.js
new file mode 100644
index 00000000000..cfa2d5f190e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-break.js
@@ -0,0 +1,12 @@
+function foo(a, b) {
+  while (a) {
+    break;
+  }
+  return b;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-conditional-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-conditional-continue.expect.md
new file mode 100644
index 00000000000..2fe3ec5f877
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-conditional-continue.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+function foo(a, b, c, d) {
+  while (a) {
+    if (b) {
+      continue;
+    }
+    c();
+    continue;
+  }
+  d();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b, c, d) {
+  while (a) {
+    if (b) {
+      continue;
+    }
+
+    c();
+  }
+
+  d();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-conditional-continue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-conditional-continue.js
new file mode 100644
index 00000000000..58f9db56018
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-conditional-continue.js
@@ -0,0 +1,16 @@
+function foo(a, b, c, d) {
+  while (a) {
+    if (b) {
+      continue;
+    }
+    c();
+    continue;
+  }
+  d();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-logical.expect.md
new file mode 100644
index 00000000000..8e59f912e58
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-logical.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function foo(props) {
+  let x = 0;
+  while (x > props.min && x < props.max) {
+    x *= 2;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(props) {
+  let x = 0;
+  while (x > props.min && x < props.max) {
+    x = x * 2;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-logical.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-logical.js
new file mode 100644
index 00000000000..9fe4c9f34e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-logical.js
@@ -0,0 +1,13 @@
+function foo(props) {
+  let x = 0;
+  while (x > props.min && x < props.max) {
+    x *= 2;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-property.expect.md
new file mode 100644
index 00000000000..68b261e0974
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-property.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+function foo(a, b) {
+  let x = 0;
+  while (a.b.c) {
+    x += b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
+
+```
+
+## Code
+
+```javascript
+function foo(a, b) {
+  let x = 0;
+  while (a.b.c) {
+    x = x + b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ["TodoAdd"],
+  isComponent: "TodoAdd",
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-property.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-property.js
new file mode 100644
index 00000000000..a004567f1d5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-property.js
@@ -0,0 +1,13 @@
+function foo(a, b) {
+  let x = 0;
+  while (a.b.c) {
+    x += b;
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: foo,
+  params: ['TodoAdd'],
+  isComponent: 'TodoAdd',
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md
new file mode 100644
index 00000000000..033c7b0d98f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component() {
+  const queue = [1, 2, 3];
+  let value = 0;
+  let sum = 0;
+  while ((value = queue.pop()) != null) {
+    sum += value;
+  }
+  return sum;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component() {
+  const queue = [1, 2, 3];
+  let value;
+  let sum = 0;
+  while ((value = queue.pop()) != null) {
+    sum = sum + value;
+  }
+  return sum;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 6
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js
new file mode 100644
index 00000000000..3af11ed453c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js
@@ -0,0 +1,15 @@
+// @enablePreserveExistingMemoizationGuarantees:false
+function Component() {
+  const queue = [1, 2, 3];
+  let value = 0;
+  let sum = 0;
+  while ((value = queue.pop()) != null) {
+    sum += value;
+  }
+  return sum;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/tsconfig.json b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/tsconfig.json
new file mode 100644
index 00000000000..7c51d213ede
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/tsconfig.json
@@ -0,0 +1,36 @@
+// Custom tsconfig for IDE integration of fixture files.
+// Note that noEmit is set, as we actually rely on snap and sprout
+// to transform these files.
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noImplicitAny": false,
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "noUnusedLocals": false,
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "paths": {
+      // Editor integration for sprout shared runtime files
+      "shared-runtime": ["../../../../snap/src/sprout/shared-runtime.ts"]
+    },
+    "verbatimModuleSyntax": true,
+    "module": "ESNext",
+    "allowSyntheticDefaultImports": true,
+    "moduleDetection": "force"
+
+  },
+  "include": [
+    "./compiler/**/*.js",
+    "./compiler/**/*.mjs",
+    "./compiler/**/*.cjs",
+    "./compiler/**/*.ts",
+    "./compiler/**/*.mts",
+    "./compiler/**/*.cts",
+    "./compiler/**/*.jsx",
+    "./compiler/**/*.tsx"
+  ]
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts
new file mode 100644
index 00000000000..0ee50a0e761
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {parseConfigPragmaForTests, validateEnvironmentConfig} from '..';
+import {defaultOptions} from '../Entrypoint';
+
+describe('parseConfigPragmaForTests()', () => {
+  it('parses flags in various forms', () => {
+    const defaultConfig = validateEnvironmentConfig({});
+
+    // Validate defaults first to make sure that the parser is getting the value from the pragma,
+    // and not just missing it and getting the default value
+    expect(defaultConfig.enableUseTypeAnnotations).toBe(false);
+    expect(defaultConfig.validateNoSetStateInEffects).toBe(false);
+    expect(defaultConfig.validateNoSetStateInRender).toBe(true);
+
+    const config = parseConfigPragmaForTests(
+      '@enableUseTypeAnnotations @validateNoSetStateInEffects:true @validateNoSetStateInRender:false',
+      {compilationMode: defaultOptions.compilationMode},
+    );
+    expect(config).toEqual({
+      ...defaultOptions,
+      panicThreshold: 'all_errors',
+      environment: {
+        ...defaultOptions.environment,
+        enableUseTypeAnnotations: true,
+        validateNoSetStateInEffects: true,
+        validateNoSetStateInRender: false,
+        enableResetCacheOnSourceFileChanges: false,
+      },
+    });
+  });
+});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/test-utils/validateNoUseBeforeDefine.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/test-utils/validateNoUseBeforeDefine.ts
new file mode 100644
index 00000000000..834741ac282
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/test-utils/validateNoUseBeforeDefine.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-ignore-line
+import {Linter} from '../../../node_modules/eslint/lib/linter';
+// @ts-ignore-line
+import * as HermesESLint from 'hermes-eslint';
+// @ts-ignore-line
+import {NoUseBeforeDefineRule} from '../..';
+
+const ESLINT_CONFIG: Linter.Config = {
+  parser: 'hermes-eslint',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  rules: {
+    'custom-no-use-before-define': [
+      'error',
+      {variables: false, functions: false},
+    ],
+  },
+};
+
+/**
+ * Post-codegen pass to validate that the generated code does not introduce bugs.
+ * Note that the compiler currently incorrectly reorders code in some cases: this
+ * step detects this using ESLint's no-use-before-define rule at its strictest
+ * setting.
+ */
+export default function validateNoUseBeforeDefine(
+  source: string,
+): Array<{line: number; column: number; message: string}> | null {
+  const linter = new Linter();
+  linter.defineParser('hermes-eslint', HermesESLint);
+  linter.defineRule('custom-no-use-before-define', NoUseBeforeDefineRule);
+  return linter.verify(source, ESLINT_CONFIG);
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/index.ts b/compiler/packages/babel-plugin-react-compiler/src/index.ts
new file mode 100644
index 00000000000..ca5b6534301
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/index.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {runBabelPluginReactCompiler} from './Babel/RunReactCompilerBabelPlugin';
+export {
+  CompilerError,
+  CompilerErrorDetail,
+  CompilerDiagnostic,
+  CompilerSuggestionOperation,
+  ErrorSeverity,
+  ErrorCategory,
+  LintRules,
+  LintRulePreset,
+  type CompilerErrorDetailOptions,
+  type CompilerDiagnosticOptions,
+  type CompilerDiagnosticDetail,
+  type LintRule,
+} from './CompilerError';
+export {
+  compileFn as compile,
+  compileProgram,
+  parsePluginOptions,
+  OPT_OUT_DIRECTIVES,
+  OPT_IN_DIRECTIVES,
+  ProgramContext,
+  tryFindDirectiveEnablingMemoization as findDirectiveEnablingMemoization,
+  findDirectiveDisablingMemoization,
+  defaultOptions,
+  type CompilerPipelineValue,
+  type Logger,
+  type LoggerEvent,
+  type PluginOptions,
+  type AutoDepsDecorationsEvent,
+  type CompileSuccessEvent,
+} from './Entrypoint';
+export {
+  Effect,
+  ValueKind,
+  ValueReason,
+  printHIR,
+  printFunctionWithOutlined,
+  validateEnvironmentConfig,
+  type EnvironmentConfig,
+  type ExternalFunction,
+  type Hook,
+  type SourceLocation,
+} from './HIR';
+export {
+  printReactiveFunction,
+  printReactiveFunctionWithOutlined,
+} from './ReactiveScopes';
+export {parseConfigPragmaForTests} from './Utils/TestUtils';
+declare global {
+  // @internal
+  let __DEV__: boolean | null | undefined;
+}
+
+import BabelPluginReactCompiler from './Babel/BabelPlugin';
+export default BabelPluginReactCompiler;
diff --git a/compiler/packages/babel-plugin-react-compiler/tsconfig.json b/compiler/packages/babel-plugin-react-compiler/tsconfig.json
new file mode 100644
index 00000000000..f2f1eb55351
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "Bundler",
+    "rootDir": "src",
+    "noEmit": true,
+    "jsx": "react-jsxdev",
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "stripInternal": true,
+    "useUnknownInCatchVariables": true,
+    "target": "ES2015",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+    "removeComments": true,
+    "declaration": true,
+  },
+  "exclude": [
+    "node_modules",
+    "src/__tests__/fixtures"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ],
+  "ts-node": {
+    "transpileOnly": true,
+    // these options are overrides used only by ts-node
+    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
+    "compilerOptions": {
+      "module": "NodeNext",
+      "moduleResolution": "NodeNext",
+    }
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/tsup.config.ts b/compiler/packages/babel-plugin-react-compiler/tsup.config.ts
new file mode 100644
index 00000000000..dde9525256d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/tsup.config.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig} from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  external: ['@babel/types'],
+  splitting: false,
+  sourcemap: false,
+  dts: false,
+  bundle: true,
+  format: 'cjs',
+  platform: 'node',
+  target: 'es2015',
+  banner: {
+    js: `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */`,
+  },
+});
diff --git a/compiler/packages/eslint-plugin-react-compiler/README.md b/compiler/packages/eslint-plugin-react-compiler/README.md
new file mode 100644
index 00000000000..3bf175f85e8
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/README.md
@@ -0,0 +1,63 @@
+# eslint-plugin-react-compiler
+
+ESLint plugin surfacing problematic React code found by the React compiler.
+
+## Installation
+
+You'll first need to install [ESLint](https://eslint.org/):
+
+```sh
+npm i eslint --save-dev
+```
+
+Next, install `eslint-plugin-react-compiler`:
+
+```sh
+npm install eslint-plugin-react-compiler --save-dev
+```
+
+## Usage
+
+### Flat config
+
+Edit your eslint 8+ config (for example `eslint.config.mjs`) with the recommended configuration:
+
+```diff
++ import reactCompiler from "eslint-plugin-react-compiler"
+import react from "eslint-plugin-react"
+
+export default [
+    // Your existing config
+    { ...pluginReact.configs.flat.recommended, settings: { react: { version: "detect" } } },
++   reactCompiler.configs.recommended    
+]
+```
+
+### Legacy config (`.eslintrc`)
+
+Add `react-compiler` to the plugins section of your configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+    "plugins": [
+        "react-compiler"
+    ]
+}
+```
+
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+    "rules": {
+        "react-compiler/react-compiler": "error"
+    }
+}
+```
+
+## Rules
+
+<!-- begin auto-generated rules list -->
+TODO: Run eslint-doc-generator to generate the rules list.
+<!-- end auto-generated rules list -->
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
new file mode 100644
index 00000000000..f89b049d100
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no impure function calls rule',
+  allRules[getRuleForCategory(ErrorCategory.Purity).name].rule,
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'Known impure function calls are caught',
+        code: normalizeIndent`
+      function Component() {
+        const date = Date.now();
+        const now = performance.now();
+        const rand = Math.random();
+        return <Foo date={date} now={now} rand={rand} />;
+      }
+    `,
+        errors: [
+          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot call impure function during render'),
+        ],
+      },
+    ],
+  },
+);
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/InvalidHooksRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/InvalidHooksRule-test.ts
new file mode 100644
index 00000000000..1fd88935575
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/InvalidHooksRule-test.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'rules-of-hooks',
+  allRules[getRuleForCategory(ErrorCategory.Hooks).name].rule,
+  {
+    valid: [
+      {
+        name: 'Basic example',
+        code: normalizeIndent`
+        function Component() {
+          useHook();
+          return <div>Hello world</div>;
+        }
+      `,
+      },
+      {
+        name: 'Violation with Flow suppression',
+        code: `
+      // Valid since error already suppressed with flow.
+      function useHook() {
+        if (cond) {
+          // $FlowFixMe[react-rule-hook]
+          useConditionalHook();
+        }
+      }
+    `,
+      },
+      {
+        // OK because invariants are only meant for the compiler team's consumption
+        name: '[Invariant] Defined after use',
+        code: normalizeIndent`
+        function Component(props) {
+          let y = function () {
+            m(x);
+          };
+
+          let x = { a };
+          m(x);
+          return y;
+        }
+      `,
+      },
+      {
+        name: "Classes don't throw",
+        code: normalizeIndent`
+        class Foo {
+          #bar() {}
+        }
+      `,
+      },
+    ],
+    invalid: [
+      {
+        name: 'Simple violation',
+        code: normalizeIndent`
+      function useConditional() {
+        if (cond) {
+          useConditionalHook();
+        }
+      }
+    `,
+        errors: [
+          makeTestCaseError(
+            'Hooks must always be called in a consistent order',
+          ),
+        ],
+      },
+      {
+        name: 'Multiple diagnostics within the same function are surfaced',
+        code: normalizeIndent`
+        function useConditional() {
+          cond ?? useConditionalHook();
+          props.cond && useConditionalHook();
+          return <div>Hello world</div>;
+        }`,
+        errors: [
+          makeTestCaseError(
+            'Hooks must always be called in a consistent order',
+          ),
+          makeTestCaseError(
+            'Hooks must always be called in a consistent order',
+          ),
+        ],
+      },
+    ],
+  },
+);
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoAmbiguousJsxRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoAmbiguousJsxRule-test.ts
new file mode 100644
index 00000000000..bb6f4b93b88
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoAmbiguousJsxRule-test.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no ambiguous JSX rule',
+  allRules[getRuleForCategory(ErrorCategory.ErrorBoundaries).name].rule,
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'JSX in try blocks are warned against',
+        code: normalizeIndent`
+      function Component(props) {
+        let el;
+        try {
+          el = <Child />;
+        } catch {
+          return null;
+        }
+        return el;
+      }
+    `,
+        errors: [makeTestCaseError('Avoid constructing JSX within try/catch')],
+      },
+    ],
+  },
+);
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoCapitalizedCallsRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoCapitalizedCallsRule-test.ts
new file mode 100644
index 00000000000..5b45a70fa1d
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoCapitalizedCallsRule-test.ts
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no-capitalized-calls',
+  allRules[getRuleForCategory(ErrorCategory.CapitalizedCalls).name].rule,
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'Simple violation',
+        code: normalizeIndent`
+        import Child from './Child';
+        function Component() {
+          return <>
+            {Child()}
+          </>;
+        }
+      `,
+        errors: [
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
+        ],
+      },
+      {
+        name: 'Method call violation',
+        code: normalizeIndent`
+        import myModule from './MyModule';
+        function Component() {
+          return <>
+            {myModule.Child()}
+          </>;
+        }
+      `,
+        errors: [
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
+        ],
+      },
+      {
+        name: 'Multiple diagnostics within the same function are surfaced',
+        code: normalizeIndent`
+        import Child1 from './Child1';
+        import MyModule from './MyModule';
+        function Component() {
+          return <>
+            {Child1()}
+            {MyModule.Child2()}
+          </>;
+        }`,
+        errors: [
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
+        ],
+      },
+    ],
+  },
+);
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts
new file mode 100644
index 00000000000..9953c8c2136
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no ref access in render rule',
+  allRules[getRuleForCategory(ErrorCategory.Refs).name].rule,
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'validate against simple ref access in render',
+        code: normalizeIndent`
+      function Component(props) {
+        const ref = useRef(null);
+        const value = ref.current;
+        return value;
+      }
+    `,
+        errors: [makeTestCaseError('Cannot access refs during render')],
+      },
+    ],
+  },
+);
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts
new file mode 100644
index 00000000000..e0063bc0a2c
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {
+  normalizeIndent,
+  testRule,
+  makeTestCaseError,
+  TestRecommendedRules,
+} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule('plugin-recommended', TestRecommendedRules, {
+  valid: [
+    {
+      name: 'Basic example with component syntax',
+      code: normalizeIndent`
+        export default component HelloWorld(
+          text: string = 'Hello!',
+          onClick: () => void,
+        ) {
+          return <div onClick={onClick}>{text}</div>;
+        }
+      `,
+    },
+
+    {
+      // OK because invariants are only meant for the compiler team's consumption
+      name: '[Invariant] Defined after use',
+      code: normalizeIndent`
+            function Component(props) {
+              let y = function () {
+                m(x);
+              };
+    
+              let x = { a };
+              m(x);
+              return y;
+            }
+          `,
+    },
+    {
+      name: "Classes don't throw",
+      code: normalizeIndent`
+            class Foo {
+              #bar() {}
+            }
+          `,
+    },
+  ],
+  invalid: [
+    {
+      // TODO: actually return multiple diagnostics in this case
+      name: 'Multiple diagnostic kinds from the same function are surfaced',
+      code: normalizeIndent`
+        import Child from './Child';
+        function Component() {
+          const result = cond ?? useConditionalHook();
+          return <>
+            {Child(result)}
+          </>;
+        }
+      `,
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: 'Multiple diagnostics within the same file are surfaced',
+      code: normalizeIndent`
+        function useConditional1() {
+          'use memo';
+          return cond ?? useConditionalHook();
+        }
+        function useConditional2(props) {
+          'use memo';
+          return props.cond && useConditionalHook();
+        }`,
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: "'use no forget' does not disable eslint rule",
+      code: normalizeIndent`
+        let count = 0;
+        function Component() {
+          'use no forget';
+          return cond ?? useConditionalHook();
+
+        }
+      `,
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: 'Multiple non-fatal useMemo diagnostics are surfaced',
+      code: normalizeIndent`
+      import {useMemo, useState} from 'react';
+      
+      function Component({item, cond}) {
+        const [prevItem, setPrevItem] = useState(item);
+        const [state, setState] = useState(0);
+        
+        useMemo(() => {
+          if (cond) {
+            setPrevItem(item);
+            setState(0);
+          }
+        }, [cond, item, init]);
+            
+        return <Child x={state} />;
+        }`,
+      errors: [
+        makeTestCaseError('useMemo() callbacks must return a value'),
+        makeTestCaseError(
+          'Calling setState from useMemo may trigger an infinite loop',
+        ),
+        makeTestCaseError(
+          'Calling setState from useMemo may trigger an infinite loop',
+        ),
+      ],
+    },
+    {
+      name: 'Pipeline errors are reported',
+      code: normalizeIndent`
+            import useMyEffect from 'useMyEffect';
+            import {AUTODEPS} from 'react';
+            function Component({a}) {
+              'use no memo';
+              useMyEffect(() => console.log(a.b), AUTODEPS);
+              return <div>Hello world</div>;
+            }
+          `,
+      options: [
+        {
+          environment: {
+            inferEffectDependencies: [
+              {
+                function: {
+                  source: 'useMyEffect',
+                  importSpecifierName: 'default',
+                },
+                autodepsIndex: 1,
+              },
+            ],
+          },
+        },
+      ],
+      errors: [
+        {
+          message: /Cannot infer dependencies of this effect/,
+        },
+      ],
+    },
+  ],
+});
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts
new file mode 100644
index 00000000000..87baf724e12
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRuleTypescript-test.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {RuleTester} from 'eslint';
+import {
+  CompilerTestCases,
+  normalizeIndent,
+  TestRecommendedRules,
+} from './shared-utils';
+
+const tests: CompilerTestCases = {
+  valid: [
+    {
+      name: 'Basic example',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function Button(props) {
+          return null;
+        }
+      `,
+    },
+    {
+      name: 'Repro for hooks as normal values',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function Button(props) {
+          const scrollview = React.useRef<ScrollView>(null);
+          return <Button thing={scrollview} />;
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'Mutating useState value',
+      filename: 'test.tsx',
+      code: `
+        import { useState } from 'react';
+        function Component(props) {
+          // typescript syntax that hermes-parser doesn't understand yet
+          const x: \`foo\${1}\` = 'foo1';
+          const [state, setState] = useState({a: 0});
+          state.a = 1;
+          return <div>{props.foo}</div>;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying a value returned from 'useState\(\)'/,
+          line: 7,
+        },
+      ],
+    },
+  ],
+};
+
+const eslintTester = new RuleTester({
+  // @ts-ignore[2353] - outdated types
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+eslintTester.run('react-compiler', TestRecommendedRules, tests);
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/shared-utils.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/shared-utils.ts
new file mode 100644
index 00000000000..b0523f522c9
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/shared-utils.ts
@@ -0,0 +1,76 @@
+import {RuleTester as ESLintTester, Rule} from 'eslint';
+import {type ErrorCategory} from 'babel-plugin-react-compiler/src/CompilerError';
+import escape from 'regexp.escape';
+import {configs} from '../src/index';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+export function normalizeIndent(strings: TemplateStringsArray): string {
+  const codeLines = strings[0].split('\n');
+  const leftPadding = codeLines[1].match(/\s+/)![0];
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+export type CompilerTestCases = {
+  valid: ESLintTester.ValidTestCase[];
+  invalid: ESLintTester.InvalidTestCase[];
+};
+
+export function makeTestCaseError(reason: string): ESLintTester.TestCaseError {
+  return {
+    message: new RegExp(escape(reason)),
+  };
+}
+
+export function testRule(
+  name: string,
+  rule: Rule.RuleModule,
+  tests: {
+    valid: ESLintTester.ValidTestCase[];
+    invalid: ESLintTester.InvalidTestCase[];
+  },
+): void {
+  const eslintTester = new ESLintTester({
+    // @ts-ignore[2353] - outdated types
+    parser: require.resolve('hermes-eslint'),
+    parserOptions: {
+      ecmaVersion: 2015,
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    },
+  });
+
+  eslintTester.run(name, rule, tests);
+}
+
+/**
+ * Aggregates all recommended rules from the plugin.
+ */
+export const TestRecommendedRules: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow capitalized function calls',
+      category: 'Possible Errors',
+      recommended: true,
+    },
+    // validation is done at runtime with zod
+    schema: [{type: 'object', additionalProperties: true}],
+  },
+  create(context) {
+    for (const ruleConfig of Object.values(
+      configs.recommended.plugins['react-compiler'].rules,
+    )) {
+      const listener = ruleConfig.rule.create(context);
+      if (Object.entries(listener).length !== 0) {
+        throw new Error('TODO: handle rules that return listeners to eslint');
+      }
+    }
+    return {};
+  },
+};
+
+test('no test', () => {});
diff --git a/compiler/packages/eslint-plugin-react-compiler/babel.config.js b/compiler/packages/eslint-plugin-react-compiler/babel.config.js
new file mode 100644
index 00000000000..9be68a85b7f
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/babel.config.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  plugins: [
+    ['@babel/plugin-transform-private-property-in-object', {loose: true}],
+    ['@babel/plugin-transform-class-properties', {loose: true}],
+  ],
+};
diff --git a/compiler/packages/eslint-plugin-react-compiler/package.json b/compiler/packages/eslint-plugin-react-compiler/package.json
new file mode 100644
index 00000000000..3dd77d0e8bf
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "eslint-plugin-react-compiler",
+  "version": "0.0.0-experimental-9ed098e-20240725",
+  "description": "ESLint plugin to display errors found by the React compiler.",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "test": "jest",
+    "watch": "yarn build --watch"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/parser": "^7.24.4",
+    "hermes-parser": "^0.25.1",
+    "zod": "^3.25.0 || ^4.0.0",
+    "zod-validation-error": "^3.5.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/types": "^7.26.0",
+    "@types/eslint": "^8.56.12",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^20.2.5",
+    "babel-jest": "^29.0.3",
+    "eslint": "8.57.0",
+    "hermes-eslint": "^0.25.1",
+    "jest": "^29.5.0",
+    "regexp.escape": "^2.0.1"
+  },
+  "engines": {
+    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+  },
+  "peerDependencies": {
+    "eslint": ">=7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/eslint-plugin-react-compiler"
+  },
+  "license": "MIT"
+}
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/index.ts b/compiler/packages/eslint-plugin-react-compiler/src/index.ts
new file mode 100644
index 00000000000..3f0c7bcdcb0
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/src/index.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {type Linter} from 'eslint';
+import {
+  allRules,
+  mapErrorSeverityToESlint,
+  recommendedRules,
+} from './rules/ReactCompilerRule';
+
+const meta = {
+  name: 'eslint-plugin-react-compiler',
+};
+
+const configs = {
+  recommended: {
+    plugins: {
+      'react-compiler': {
+        rules: allRules,
+      },
+    },
+    rules: Object.fromEntries(
+      Object.entries(recommendedRules).map(([name, ruleConfig]) => {
+        return [
+          'react-compiler/' + name,
+          mapErrorSeverityToESlint(ruleConfig.severity),
+        ];
+      }),
+    ) as Record<string, Linter.StringSeverity>,
+  },
+};
+
+const rules = Object.fromEntries(
+  Object.entries(allRules).map(([name, {rule}]) => [name, rule]),
+);
+
+export {configs, rules, meta};
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
new file mode 100644
index 00000000000..8f41b3afaba
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {SourceLocation as BabelSourceLocation} from '@babel/types';
+import {
+  CompilerDiagnosticOptions,
+  CompilerErrorDetailOptions,
+  CompilerSuggestionOperation,
+} from 'babel-plugin-react-compiler/src';
+import type {Linter, Rule} from 'eslint';
+import runReactCompiler, {RunCacheEntry} from '../shared/RunReactCompiler';
+import {
+  ErrorSeverity,
+  LintRulePreset,
+  LintRules,
+  type LintRule,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+
+function assertExhaustive(_: never, errorMsg: string): never {
+  throw new Error(errorMsg);
+}
+
+function makeSuggestions(
+  detail: CompilerErrorDetailOptions | CompilerDiagnosticOptions,
+): Array<Rule.SuggestionReportDescriptor> {
+  const suggest: Array<Rule.SuggestionReportDescriptor> = [];
+  if (Array.isArray(detail.suggestions)) {
+    for (const suggestion of detail.suggestions) {
+      switch (suggestion.op) {
+        case CompilerSuggestionOperation.InsertBefore:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.insertTextBeforeRange(
+                suggestion.range,
+                suggestion.text,
+              );
+            },
+          });
+          break;
+        case CompilerSuggestionOperation.InsertAfter:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.insertTextAfterRange(
+                suggestion.range,
+                suggestion.text,
+              );
+            },
+          });
+          break;
+        case CompilerSuggestionOperation.Replace:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.replaceTextRange(suggestion.range, suggestion.text);
+            },
+          });
+          break;
+        case CompilerSuggestionOperation.Remove:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.removeRange(suggestion.range);
+            },
+          });
+          break;
+        default:
+          assertExhaustive(suggestion, 'Unhandled suggestion operation');
+      }
+    }
+  }
+  return suggest;
+}
+
+function getReactCompilerResult(context: Rule.RuleContext): RunCacheEntry {
+  // Compat with older versions of eslint
+  const sourceCode = context.sourceCode ?? context.getSourceCode();
+  const filename = context.filename ?? context.getFilename();
+  const userOpts = context.options[0] ?? {};
+
+  const results = runReactCompiler({
+    sourceCode,
+    filename,
+    userOpts,
+  });
+
+  return results;
+}
+
+function hasFlowSuppression(
+  program: RunCacheEntry,
+  nodeLoc: BabelSourceLocation,
+  suppressions: Array<string>,
+): boolean {
+  for (const commentNode of program.flowSuppressions) {
+    if (
+      suppressions.includes(commentNode.code) &&
+      commentNode.line === nodeLoc.start.line - 1
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function makeRule(rule: LintRule): Rule.RuleModule {
+  const create = (context: Rule.RuleContext): Rule.RuleListener => {
+    const result = getReactCompilerResult(context);
+
+    for (const event of result.events) {
+      if (event.kind === 'CompileError') {
+        const detail = event.detail;
+        if (detail.category === rule.category) {
+          const loc = detail.primaryLocation();
+          if (loc == null || typeof loc === 'symbol') {
+            continue;
+          }
+          if (
+            hasFlowSuppression(result, loc, [
+              'react-rule-hook',
+              'react-rule-unsafe-ref',
+            ])
+          ) {
+            // If Flow already caught this error, we don't need to report it again.
+            continue;
+          }
+          /*
+           * TODO: if multiple rules report the same linter category,
+           * we should deduplicate them with a "reported" set
+           */
+          context.report({
+            message: detail.printErrorMessage(result.sourceCode, {
+              eslint: true,
+            }),
+            loc,
+            suggest: makeSuggestions(detail.options),
+          });
+        }
+      }
+    }
+    return {};
+  };
+
+  return {
+    meta: {
+      type: 'problem',
+      docs: {
+        description: rule.description,
+        recommended: rule.preset === LintRulePreset.Recommended,
+      },
+      fixable: 'code',
+      hasSuggestions: true,
+      // validation is done at runtime with zod
+      schema: [{type: 'object', additionalProperties: true}],
+    },
+    create,
+  };
+}
+
+type RulesConfig = {
+  [name: string]: {rule: Rule.RuleModule; severity: ErrorSeverity};
+};
+
+export const allRules: RulesConfig = LintRules.reduce((acc, rule) => {
+  acc[rule.name] = {rule: makeRule(rule), severity: rule.severity};
+  return acc;
+}, {} as RulesConfig);
+
+export const recommendedRules: RulesConfig = LintRules.filter(
+  rule => rule.preset === LintRulePreset.Recommended,
+).reduce((acc, rule) => {
+  acc[rule.name] = {rule: makeRule(rule), severity: rule.severity};
+  return acc;
+}, {} as RulesConfig);
+
+export const recommendedLatestRules: RulesConfig = LintRules.filter(
+  rule =>
+    rule.preset === LintRulePreset.Recommended ||
+    rule.preset === LintRulePreset.RecommendedLatest,
+).reduce((acc, rule) => {
+  acc[rule.name] = {rule: makeRule(rule), severity: rule.severity};
+  return acc;
+}, {} as RulesConfig);
+
+export function mapErrorSeverityToESlint(
+  severity: ErrorSeverity,
+): Linter.StringSeverity {
+  switch (severity) {
+    case ErrorSeverity.Error: {
+      return 'error';
+    }
+    case ErrorSeverity.Warning: {
+      return 'warn';
+    }
+    case ErrorSeverity.Hint:
+    case ErrorSeverity.Off: {
+      return 'off';
+    }
+    default: {
+      assertExhaustive(severity, `Unhandled severity: ${severity}`);
+    }
+  }
+}
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts b/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts
new file mode 100644
index 00000000000..aa55c64237e
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {transformFromAstSync} from '@babel/core';
+import {parse as babelParse} from '@babel/parser';
+import {File} from '@babel/types';
+import BabelPluginReactCompiler, {
+  parsePluginOptions,
+  validateEnvironmentConfig,
+  type PluginOptions,
+} from 'babel-plugin-react-compiler/src';
+import {Logger, LoggerEvent} from 'babel-plugin-react-compiler/src/Entrypoint';
+import type {SourceCode} from 'eslint';
+// @ts-expect-error: no types available
+import * as HermesParser from 'hermes-parser';
+import {isDeepStrictEqual} from 'util';
+import type {ParseResult} from '@babel/parser';
+
+const COMPILER_OPTIONS: PluginOptions = {
+  outputMode: 'lint',
+  panicThreshold: 'none',
+  // Don't emit errors on Flow suppressions--Flow already gave a signal
+  flowSuppressions: false,
+  environment: validateEnvironmentConfig({
+    validateRefAccessDuringRender: true,
+    validateNoSetStateInRender: true,
+    validateNoSetStateInEffects: true,
+    validateNoJSXInTryStatements: true,
+    validateNoImpureFunctionsInRender: true,
+    validateStaticComponents: true,
+    validateNoFreezingKnownMutableFunctions: true,
+    validateNoVoidUseMemo: true,
+    // TODO: remove, this should be in the type system
+    validateNoCapitalizedCalls: [],
+    validateHooksUsage: true,
+    validateNoDerivedComputationsInEffects: true,
+  }),
+};
+
+export type RunCacheEntry = {
+  sourceCode: string;
+  filename: string;
+  userOpts: PluginOptions;
+  flowSuppressions: Array<{line: number; code: string}>;
+  events: Array<LoggerEvent>;
+};
+
+type RunParams = {
+  sourceCode: SourceCode;
+  filename: string;
+  userOpts: PluginOptions;
+};
+const FLOW_SUPPRESSION_REGEX = /\$FlowFixMe\[([^\]]*)\]/g;
+
+function getFlowSuppressions(
+  sourceCode: SourceCode,
+): Array<{line: number; code: string}> {
+  const comments = sourceCode.getAllComments();
+  const results: Array<{line: number; code: string}> = [];
+
+  for (const commentNode of comments) {
+    const matches = commentNode.value.matchAll(FLOW_SUPPRESSION_REGEX);
+    for (const match of matches) {
+      if (match.index != null && commentNode.loc != null) {
+        const code = match[1];
+        results.push({
+          line: commentNode.loc!.end.line,
+          code,
+        });
+      }
+    }
+  }
+  return results;
+}
+
+function runReactCompilerImpl({
+  sourceCode,
+  filename,
+  userOpts,
+}: RunParams): RunCacheEntry {
+  // Compat with older versions of eslint
+  const options: PluginOptions = parsePluginOptions({
+    ...COMPILER_OPTIONS,
+    ...userOpts,
+    environment: {
+      ...COMPILER_OPTIONS.environment,
+      ...userOpts.environment,
+    },
+  });
+  const results: RunCacheEntry = {
+    sourceCode: sourceCode.text,
+    filename,
+    userOpts,
+    flowSuppressions: [],
+    events: [],
+  };
+  const userLogger: Logger | null = options.logger;
+  options.logger = {
+    logEvent: (eventFilename, event): void => {
+      userLogger?.logEvent(eventFilename, event);
+      results.events.push(event);
+    },
+  };
+
+  try {
+    options.environment = validateEnvironmentConfig(options.environment ?? {});
+  } catch (err: unknown) {
+    options.logger?.logEvent(filename, err as LoggerEvent);
+  }
+
+  let babelAST: ParseResult<File> | null = null;
+  if (filename.endsWith('.tsx') || filename.endsWith('.ts')) {
+    try {
+      babelAST = babelParse(sourceCode.text, {
+        sourceFilename: filename,
+        sourceType: 'unambiguous',
+        plugins: ['typescript', 'jsx'],
+      });
+    } catch {
+      /* empty */
+    }
+  } else {
+    try {
+      babelAST = HermesParser.parse(sourceCode.text, {
+        babel: true,
+        enableExperimentalComponentSyntax: true,
+        sourceFilename: filename,
+        sourceType: 'module',
+      });
+    } catch {
+      /* empty */
+    }
+  }
+
+  if (babelAST != null) {
+    results.flowSuppressions = getFlowSuppressions(sourceCode);
+    try {
+      transformFromAstSync(babelAST, sourceCode.text, {
+        filename,
+        highlightCode: false,
+        retainLines: true,
+        plugins: [[BabelPluginReactCompiler, options]],
+        sourceType: 'module',
+        configFile: false,
+        babelrc: false,
+      });
+    } catch (err) {
+      /* errors handled by injected logger */
+    }
+  }
+
+  return results;
+}
+
+const SENTINEL = Symbol();
+
+// Array backed LRU cache -- should be small < 10 elements
+class LRUCache<K, T> {
+  // newest at headIdx, then headIdx + 1, ..., tailIdx
+  #values: Array<[K, T | Error] | [typeof SENTINEL, void]>;
+  #headIdx: number = 0;
+
+  constructor(size: number) {
+    this.#values = new Array(size).fill(SENTINEL);
+  }
+
+  // gets a value and sets it as "recently used"
+  get(key: K): T | null {
+    let idx = this.#values.findIndex(entry => entry[0] === key);
+    // If found, move to front
+    if (idx === this.#headIdx) {
+      return this.#values[this.#headIdx][1] as T;
+    } else if (idx < 0) {
+      return null;
+    }
+
+    const entry: [K, T] = this.#values[idx] as [K, T];
+
+    const len = this.#values.length;
+    for (let i = 0; i < Math.min(idx, len - 1); i++) {
+      this.#values[(this.#headIdx + i + 1) % len] =
+        this.#values[(this.#headIdx + i) % len];
+    }
+    this.#values[this.#headIdx] = entry;
+    return entry[1];
+  }
+  push(key: K, value: T): void {
+    this.#headIdx =
+      (this.#headIdx - 1 + this.#values.length) % this.#values.length;
+    this.#values[this.#headIdx] = [key, value];
+  }
+}
+const cache = new LRUCache<string, RunCacheEntry>(10);
+
+export default function runReactCompiler({
+  sourceCode,
+  filename,
+  userOpts,
+}: RunParams): RunCacheEntry {
+  const entry = cache.get(filename);
+  if (
+    entry != null &&
+    entry.sourceCode === sourceCode.text &&
+    isDeepStrictEqual(entry.userOpts, userOpts)
+  ) {
+    return entry;
+  } else if (entry != null) {
+    if (process.env['DEBUG']) {
+      console.log(
+        `Cache hit for ${filename}, but source code or options changed, recomputing`,
+      );
+    }
+  }
+
+  const runEntry = runReactCompilerImpl({
+    sourceCode,
+    filename,
+    userOpts,
+  });
+  // If we have a cache entry, we can update it
+  if (entry != null) {
+    Object.assign(entry, runEntry);
+  } else {
+    cache.push(filename, runEntry);
+  }
+  return {...runEntry};
+}
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/types/hermes-eslint.d.ts b/compiler/packages/eslint-plugin-react-compiler/src/types/hermes-eslint.d.ts
new file mode 100644
index 00000000000..280b1e1e00a
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/src/types/hermes-eslint.d.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// v0.17.1
+declare module 'hermes-eslint' {
+  // https://fburl.com/2vikhmaa
+  type ParseForESLintOptions = {
+    /**
+     * Whether the whole script is executed under node.js environment.
+     * When enabled, the scope manager adds a function scope immediately following the global scope.
+     * Defaults to `false`.
+     */
+    globalReturn: boolean;
+
+    /**
+     * The identifier that's used for JSX Element creation (after transpilation).
+     * This should not be a member expression - just the root identifier (i.e. use "React" instead of "React.createElement").
+     *
+     * To use the new global JSX transform function, you can explicitly set this to `null`.
+     *
+     * Defaults to `"React"`.
+     */
+    jsxPragma: string | null;
+
+    /**
+     * The identifier that's used for JSX fragment elements (after transpilation).
+     * If `null`, assumes transpilation will always use a member on `jsxFactory` (i.e. React.Fragment).
+     * This should not be a member expression - just the root identifier (i.e. use "h" instead of "h.Fragment").
+     * Defaults to `null`.
+     */
+    jsxFragmentName: string | null;
+
+    /**
+     * The source type of the script.
+     */
+    sourceType: 'script' | 'module';
+
+    /**
+     * Ignore <fbt /> JSX elements when adding references to the module-level `React` variable.
+     * FBT is JSX that's transformed to non-JSX and thus references differently
+     *
+     * https://facebook.github.io/fbt/
+     */
+    fbt: boolean;
+
+    /**
+     * Support experimental component syntax
+     *
+     * Defaults to `true`.
+     */
+    enableExperimentalComponentSyntax?: boolean;
+  };
+  export function parse(code: string, options?: Partial<ParseForESLintOptions>);
+}
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/types/hermes-parser.d.ts b/compiler/packages/eslint-plugin-react-compiler/src/types/hermes-parser.d.ts
new file mode 100644
index 00000000000..b624caf19c5
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/src/types/hermes-parser.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// v0.17.1
+declare module 'hermes-parser' {
+  type HermesParserOptions = {
+    allowReturnOutsideFunction?: boolean;
+    babel?: boolean;
+    flow?: 'all' | 'detect';
+    enableExperimentalComponentSyntax?: boolean;
+    sourceFilename?: string;
+    sourceType?: 'module' | 'script' | 'unambiguous';
+    tokens?: boolean;
+  };
+  export function parse(code: string, options: Partial<HermesParserOptions>);
+}
diff --git a/compiler/packages/eslint-plugin-react-compiler/tsconfig.json b/compiler/packages/eslint-plugin-react-compiler/tsconfig.json
new file mode 100644
index 00000000000..bbc891773f1
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "Bundler",
+    "rootDir": "../",
+    "noEmit": true,
+    "jsx": "react-jsxdev",
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "target": "ES2015",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+    "sourceMap": false,
+    "removeComments": true
+  },
+  "exclude": ["node_modules", "./src/types/*"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts
new file mode 100644
index 00000000000..716c2ffff35
--- /dev/null
+++ b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig} from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  external: [
+    '@babel/core',
+    'hermes-parser',
+    'zod',
+    'zod/v4',
+    'zod-validation-error',
+    'zod-validation-error/v4',
+  ],
+  splitting: false,
+  sourcemap: false,
+  dts: false,
+  bundle: true,
+  format: 'cjs',
+  platform: 'node',
+  banner: {
+    js: `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+"use no memo";`,
+  },
+});
diff --git a/compiler/packages/make-read-only-util/.gitignore b/compiler/packages/make-read-only-util/.gitignore
new file mode 100644
index 00000000000..bf015247b5d
--- /dev/null
+++ b/compiler/packages/make-read-only-util/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+tsconfig.tsbuildinfo
diff --git a/compiler/packages/make-read-only-util/README.md b/compiler/packages/make-read-only-util/README.md
new file mode 100644
index 00000000000..5d841dc72c7
--- /dev/null
+++ b/compiler/packages/make-read-only-util/README.md
@@ -0,0 +1,5 @@
+Utility package to track mutations to objects marked as "read-only".
+Available commands:
+
+- yarn build
+- yarn test
diff --git a/compiler/packages/make-read-only-util/jest.config.js b/compiler/packages/make-read-only-util/jest.config.js
new file mode 100644
index 00000000000..a0d48ac341b
--- /dev/null
+++ b/compiler/packages/make-read-only-util/jest.config.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
diff --git a/compiler/packages/make-read-only-util/package.json b/compiler/packages/make-read-only-util/package.json
new file mode 100644
index 00000000000..20a4643cd52
--- /dev/null
+++ b/compiler/packages/make-read-only-util/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "make-read-only-util",
+  "version": "0.0.1",
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "test": "jest src",
+    "watch": "yarn build --watch"
+  },
+  "dependencies": {
+    "invariant": "^2.2.4",
+    "pretty-format": "^24"
+  },
+  "devDependencies": {
+    "@types/invariant": "^2.2.35",
+    "@types/jest": "^28.1.6",
+    "@types/node": "^20.2.5",
+    "jest": "^28.1.3",
+    "ts-jest": "^28.0.7",
+    "ts-node": "^10.9.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/make-read-only-util"
+  }
+}
diff --git a/compiler/packages/make-read-only-util/src/__tests__/makeReadOnly-test.ts b/compiler/packages/make-read-only-util/src/__tests__/makeReadOnly-test.ts
new file mode 100644
index 00000000000..e4b4e61deee
--- /dev/null
+++ b/compiler/packages/make-read-only-util/src/__tests__/makeReadOnly-test.ts
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import buildMakeReadOnly from '../makeReadOnly';
+
+describe('makeReadOnly', () => {
+  let logger: jest.Func;
+  let makeReadOnly: <T>(value: T, source: string) => T;
+
+  beforeEach(() => {
+    logger = jest.fn();
+    makeReadOnly = buildMakeReadOnly(logger, []);
+  });
+
+  describe('Tracking mutations', () => {
+    it('can be called with all primitives', () => {
+      const a = 5;
+      const b = true;
+      const c = null;
+      expect(makeReadOnly(a, 'test1')).toBe(a);
+      expect(makeReadOnly(b, 'test1')).toBe(b);
+      expect(makeReadOnly(c, 'test1')).toBe(c);
+    });
+
+    it('retains referential equality', () => {
+      const valA = {};
+      const valB = {a: valA, _: valA};
+      const o = {a: valA, b: valB, c: 'c'};
+      expect(makeReadOnly(o, 'test2')).toBe(o);
+      expect(makeReadOnly(o.a, 'test2')).toBe(valA);
+      expect(makeReadOnly(o.b, 'test2')).toBe(valB);
+      expect(makeReadOnly(o.b.a, 'test2')).toBe(valA);
+      expect(makeReadOnly(o.b._, 'test2')).toBe(valA);
+      expect(makeReadOnly(o.c, 'test2')).toBe('c');
+    });
+
+    it('deals with cyclic references', () => {
+      const o: any = {};
+      o.self_ref = o;
+      expect(makeReadOnly(o, 'test3')).toBe(o);
+      expect(makeReadOnly(o.self_ref, 'test3')).toBe(o);
+    });
+    it('logs direct interior mutability', () => {
+      const o = {a: 0};
+      makeReadOnly(o, 'test4');
+      o.a = 42;
+      expect(logger).toBeCalledWith('FORGET_MUTATE_IMMUT', 'test4', 'a', 42);
+    });
+
+    it('tracks changes to known RO properties', () => {
+      const o: any = {a: {}};
+      makeReadOnly(o, 'test5');
+      o.a = 42;
+      expect(logger).toBeCalledWith('FORGET_MUTATE_IMMUT', 'test5', 'a', 42);
+      expect(o.a).toBe(42);
+      const newVal = {x: 0};
+      o.a = newVal;
+      expect(logger).toBeCalledWith(
+        'FORGET_MUTATE_IMMUT',
+        'test5',
+        'a',
+        newVal,
+      );
+      expect(o.a).toBe(newVal);
+    });
+
+    it('logs aliased mutations', () => {
+      const o: any = {a: {x: 4}};
+
+      const alias = o;
+      makeReadOnly(o, 'test6');
+      const newVal = {};
+      alias.a = newVal;
+      expect(logger).toBeCalledWith(
+        'FORGET_MUTATE_IMMUT',
+        'test6',
+        'a',
+        newVal,
+      );
+      expect(o.a).toBe(newVal);
+    });
+
+    it('logs transitive interior mutability', () => {
+      const o: any = {a: {x: 0}};
+      makeReadOnly(o, 'test7');
+      o.a.x = 42;
+      expect(logger).toBeCalledWith('FORGET_MUTATE_IMMUT', 'test7', 'x', 42);
+    });
+
+    describe('todo', () => {
+      it('does not track newly added or deleted vals if makeReadOnly is only called once', () => {
+        // this is a limitation of the current "proxy" approach,
+        // which overwrites object properties with getters and setters
+        const x: any = {a: {}};
+        makeReadOnly(x, 'test8');
+
+        delete x.a;
+        x.b = 0;
+        expect(logger).toBeCalledTimes(0);
+      });
+      it('does not log aliased indirect mutations', () => {
+        // this could be easily implemented by making caching eager
+        const innerObj = {x: 0};
+        const o = {a: innerObj};
+        makeReadOnly(o, 'test9');
+        innerObj.x = 42;
+        expect(o.a.x).toBe(42);
+
+        const o1 = {a: {x: 0}};
+        const innerObj1 = o1.a;
+        makeReadOnly(o1, 'test9');
+        innerObj1.x = 42;
+
+        expect(o1.a.x).toBe(42);
+        expect(logger).toBeCalledTimes(0);
+      });
+
+      it('does not track objects with getter/setters', () => {
+        let backedX: string | null = null;
+        const o = {
+          set val(val: string | null) {
+            backedX = val;
+          },
+          get val(): string | null {
+            return backedX;
+          },
+        };
+        expect(makeReadOnly(o, 'test10')).toBe(o);
+        expect(makeReadOnly(o.val, 'test10')).toBe(null);
+
+        o.val = '40';
+        expect(logger).toBeCalledTimes(0);
+      });
+    });
+  });
+
+  describe('Tracking adding or deleting properties', () => {
+    it('tracks new properties added between calls to makeReadOnly', () => {
+      const o: any = {};
+      makeReadOnly(o, 'test11');
+      o.a = 'new value';
+      makeReadOnly(o, 'test11');
+      expect(logger).toBeCalledWith('FORGET_ADD_PROP_IMMUT', 'test11', 'a');
+    });
+    it('tracks properties deleted between calls to makeReadOnly', () => {
+      const o: any = {a: 0};
+      makeReadOnly(o, 'test12');
+      delete o.a;
+      makeReadOnly(o, 'test12');
+      expect(logger).toBeCalledWith('FORGET_DELETE_PROP_IMMUT', 'test12', 'a');
+    });
+
+    // it("tracks properties deleted and re-added between calls to makeReadOnly", () => {
+    //   const o: any = { a: 0 };
+    //   makeReadOnly(o);
+    //   delete o.a;
+    //   o.a = {};
+    //   makeReadOnly(o);
+    //   expect(logger).toBeCalledWith("FORGET_CHANGE_PROP_IMMUT", "a");
+    // });
+  });
+});
diff --git a/compiler/packages/make-read-only-util/src/makeReadOnly.ts b/compiler/packages/make-read-only-util/src/makeReadOnly.ts
new file mode 100644
index 00000000000..1e09977ad1a
--- /dev/null
+++ b/compiler/packages/make-read-only-util/src/makeReadOnly.ts
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+type ROViolationType =
+  | 'FORGET_MUTATE_IMMUT'
+  | 'FORGET_DELETE_PROP_IMMUT'
+  | 'FORGET_CHANGE_PROP_IMMUT'
+  | 'FORGET_ADD_PROP_IMMUT';
+type ROViolationLogger = (
+  violation: ROViolationType,
+  source: string,
+  key: string,
+  value?: any,
+) => void;
+
+/**
+ * Represents a "proxy" of a read-only object property
+ *   savedVal: underlying "source of truth" for a property value
+ *   getter: hack, this lets us check whether we have already saved this property
+ * */
+type SavedEntry = {
+  savedVal: unknown;
+  getter: () => unknown;
+};
+type SavedROObject = Map<string, SavedEntry>;
+type SavedROObjects = WeakMap<Object, SavedROObject>;
+
+// Utility functions
+function isWriteable(desc: PropertyDescriptor) {
+  return (desc.writable || desc.set) && desc.configurable;
+}
+
+function getOrInsertDefault(
+  m: SavedROObjects,
+  k: object,
+): {existed: boolean; entry: SavedROObject} {
+  const entry = m.get(k);
+  if (entry) {
+    return {existed: true, entry};
+  } else {
+    const newEntry: SavedROObject = new Map();
+    m.set(k, newEntry);
+    return {existed: false, entry: newEntry};
+  }
+}
+
+function buildMakeReadOnly(
+  logger: ROViolationLogger,
+  skippedClasses: string[],
+): <T>(val: T, source: string) => T {
+  // All saved proxys
+  const savedROObjects: SavedROObjects = new WeakMap();
+
+  // Overwrites an object property with its proxy and saves its original value
+  function addProperty(
+    obj: Object,
+    source: string,
+    key: string,
+    prop: PropertyDescriptor,
+    savedEntries: Map<string, SavedEntry>,
+  ) {
+    const proxy: PropertyDescriptor & {get(): unknown} = {
+      get() {
+        // read from backing cache entry
+        return makeReadOnly(savedEntries.get(key)!.savedVal, source);
+      },
+      set(newVal: unknown) {
+        logger('FORGET_MUTATE_IMMUT', source, key, newVal);
+        // update backing cache entry
+        savedEntries.get(key)!.savedVal = newVal;
+      },
+    };
+    if (prop.configurable != null) {
+      proxy.configurable = prop.configurable;
+    }
+    if (prop.enumerable != null) {
+      proxy.enumerable = prop.enumerable;
+    }
+
+    savedEntries.set(key, {savedVal: (obj as any)[key], getter: proxy.get});
+    Object.defineProperty(obj, key, proxy);
+  }
+
+  // Changes an object to be read-only, returns its input
+  function makeReadOnly<T>(o: T, source: string): T {
+    if (typeof o !== 'object' || o == null) {
+      return o;
+    } else if (
+      o.constructor?.name != null &&
+      skippedClasses.includes(o.constructor.name)
+    ) {
+      return o;
+    }
+
+    const {existed, entry: cache} = getOrInsertDefault(savedROObjects, o);
+
+    for (const [k, entry] of cache.entries()) {
+      const currentProp = Object.getOwnPropertyDescriptor(o, k);
+      if (currentProp && !isWriteable(currentProp)) {
+        continue;
+      }
+      const currentPropGetter = currentProp?.get;
+      const cachedGetter = entry.getter;
+
+      if (currentPropGetter !== cachedGetter) {
+        // cache is currently holding an old property
+        //  - it may have been deleted
+        //  - it may have been deleted + re-set
+        //    (meaning that new value is not proxied,
+        //     and the current proxied value is stale)
+        cache.delete(k);
+        if (!currentProp) {
+          logger('FORGET_DELETE_PROP_IMMUT', source, k);
+        } else if (currentProp) {
+          logger('FORGET_CHANGE_PROP_IMMUT', source, k);
+          addProperty(o, source, k, currentProp, cache);
+        }
+      }
+    }
+    for (const [k, prop] of Object.entries(
+      Object.getOwnPropertyDescriptors(o),
+    )) {
+      if (!cache.has(k) && isWriteable(prop)) {
+        if (
+          prop.hasOwnProperty('set') ||
+          prop.hasOwnProperty('get') ||
+          k === 'current'
+        ) {
+          // - we currently don't handle accessor properties
+          // - we currently have no other way of checking whether an object
+          // is a `ref` (i.e. returned by useRef).
+          continue;
+        }
+
+        if (existed) {
+          logger('FORGET_ADD_PROP_IMMUT', source, k);
+        }
+        addProperty(o, source, k, prop, cache);
+      }
+    }
+    return o;
+  }
+
+  return makeReadOnly;
+}
+
+export default buildMakeReadOnly;
diff --git a/compiler/packages/make-read-only-util/tsconfig.json b/compiler/packages/make-read-only-util/tsconfig.json
new file mode 100644
index 00000000000..857f8682cb2
--- /dev/null
+++ b/compiler/packages/make-read-only-util/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist",
+    "jsx": "react-jsxdev",
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "target": "ES2015",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+    "sourceMap": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/compiler/packages/make-read-only-util/tsup.config.ts b/compiler/packages/make-read-only-util/tsup.config.ts
new file mode 100644
index 00000000000..ffef80abba2
--- /dev/null
+++ b/compiler/packages/make-read-only-util/tsup.config.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig} from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/makeReadOnly.ts'],
+  outDir: './dist',
+  splitting: false,
+  sourcemap: true,
+  dts: false,
+  bundle: true,
+  format: 'cjs',
+  platform: 'browser',
+  target: 'es2015',
+  banner: {
+    js: `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+"use no memo";`,
+  },
+});
diff --git a/compiler/packages/react-compiler-healthcheck/package.json b/compiler/packages/react-compiler-healthcheck/package.json
new file mode 100644
index 00000000000..5c3d2f412d9
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-compiler-healthcheck",
+  "version": "0.0.0-experimental-ab3118d-20240725",
+  "description": "Health check script to test violations of the rules of react.",
+  "bin": {
+    "react-compiler-healthcheck": "dist/index.js"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "test": "echo 'no tests'",
+    "watch": "yarn build --watch"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/parser": "^7.24.4",
+    "chalk": "4",
+    "fast-glob": "^3.3.2",
+    "ora": "5.4.1",
+    "yargs": "^17.7.2",
+    "zod": "^3.25.0 || ^4.0.0",
+    "zod-validation-error": "^3.5.0 || ^4.0.0"
+  },
+  "devDependencies": {},
+  "engines": {
+    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/react-compiler-healthcheck"
+  }
+}
diff --git a/compiler/packages/react-compiler-healthcheck/src/checks/libraryCompat.ts b/compiler/packages/react-compiler-healthcheck/src/checks/libraryCompat.ts
new file mode 100644
index 00000000000..4324031cc32
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/src/checks/libraryCompat.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import chalk from 'chalk';
+import {config} from '../config';
+
+const packageJsonRE = /package\.json$/;
+const knownIncompatibleLibrariesUsage = new Set();
+
+export default {
+  run(source: string, path: string): void {
+    if (packageJsonRE.exec(path) !== null) {
+      const contents = JSON.parse(source);
+      const deps = contents.dependencies;
+      if (deps != null) {
+        for (const library of config.knownIncompatibleLibraries) {
+          if (Object.hasOwn(deps, library)) {
+            knownIncompatibleLibrariesUsage.add(library);
+          }
+        }
+      }
+    }
+  },
+
+  report(): void {
+    if (knownIncompatibleLibrariesUsage.size > 0) {
+      console.log(chalk.red(`Found the following incompatible libraries:`));
+      for (const library of knownIncompatibleLibrariesUsage) {
+        console.log(library);
+      }
+    } else {
+      console.log(chalk.green(`Found no usage of incompatible libraries.`));
+    }
+  },
+};
diff --git a/compiler/packages/react-compiler-healthcheck/src/checks/reactCompiler.ts b/compiler/packages/react-compiler-healthcheck/src/checks/reactCompiler.ts
new file mode 100644
index 00000000000..4e1a193e53a
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/src/checks/reactCompiler.ts
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {transformFromAstSync} from '@babel/core';
+import * as BabelParser from '@babel/parser';
+import BabelPluginReactCompiler, {
+  ErrorSeverity,
+  type CompilerErrorDetailOptions,
+  type PluginOptions,
+} from 'babel-plugin-react-compiler/src';
+import {LoggerEvent as RawLoggerEvent} from 'babel-plugin-react-compiler/src/Entrypoint';
+import chalk from 'chalk';
+
+type LoggerEvent = RawLoggerEvent & {filename: string | null};
+
+const SucessfulCompilation: Array<LoggerEvent> = [];
+const ActionableFailures: Array<LoggerEvent> = [];
+const OtherFailures: Array<LoggerEvent> = [];
+
+const logger = {
+  logEvent(filename: string | null, rawEvent: RawLoggerEvent) {
+    const event = {...rawEvent, filename};
+    switch (event.kind) {
+      case 'CompileSuccess': {
+        SucessfulCompilation.push(event);
+        return;
+      }
+      case 'CompileError': {
+        if (isActionableDiagnostic(event.detail)) {
+          ActionableFailures.push(event);
+          return;
+        }
+        OtherFailures.push(event);
+        return;
+      }
+      case 'CompileDiagnostic':
+      case 'PipelineError':
+        OtherFailures.push(event);
+        return;
+    }
+  },
+};
+
+const COMPILER_OPTIONS: PluginOptions = {
+  noEmit: true,
+  compilationMode: 'infer',
+  panicThreshold: 'critical_errors',
+  logger,
+};
+
+function isActionableDiagnostic(detail: CompilerErrorDetailOptions) {
+  switch (detail.severity) {
+    case ErrorSeverity.InvalidReact:
+    case ErrorSeverity.InvalidJS:
+      return true;
+    case ErrorSeverity.InvalidConfig:
+    case ErrorSeverity.Invariant:
+    case ErrorSeverity.CannotPreserveMemoization:
+    case ErrorSeverity.Todo:
+      return false;
+    default:
+      throw new Error(`Unhandled error severity \`${detail.severity}\``);
+  }
+}
+
+function runBabelPluginReactCompiler(
+  text: string,
+  file: string,
+  language: 'flow' | 'typescript',
+  options: PluginOptions | null,
+): BabelCore.BabelFileResult {
+  const ast = BabelParser.parse(text, {
+    sourceFilename: file,
+    plugins: [language, 'jsx'],
+    sourceType: 'module',
+  });
+  const result = transformFromAstSync(ast, text, {
+    filename: file,
+    highlightCode: false,
+    retainLines: true,
+    plugins: [[BabelPluginReactCompiler, options]],
+    sourceType: 'module',
+    configFile: false,
+    babelrc: false,
+  });
+  if (result?.code == null) {
+    throw new Error(
+      `Expected BabelPluginReactForget to codegen successfully, got: ${result}`,
+    );
+  }
+  return result;
+}
+
+function compile(sourceCode: string, filename: string) {
+  try {
+    runBabelPluginReactCompiler(
+      sourceCode,
+      filename,
+      'typescript',
+      COMPILER_OPTIONS,
+    );
+  } catch {}
+}
+
+const JsFileExtensionRE = /(js|ts|jsx|tsx)$/;
+
+/**
+ * Counts unique source locations (filename + function definition location)
+ * in source.
+ * The compiler currently occasionally emits multiple error events for a
+ * single file (e.g. to report multiple rules of react violations in the
+ * same pass).
+ * TODO: enable non-destructive `CompilerDiagnostic` logging in dev mode,
+ * and log a "CompilationStart" event for every function we begin processing.
+ */
+function countUniqueLocInEvents(events: Array<LoggerEvent>): number {
+  const seenLocs = new Set<string>();
+  let count = 0;
+  for (const e of events) {
+    if (e.filename != null && e.fnLoc != null) {
+      seenLocs.add(`${e.filename}:${e.fnLoc.start}:${e.fnLoc.end}`);
+    } else {
+      // failed to dedup due to lack of source locations
+      count++;
+    }
+  }
+  return count + seenLocs.size;
+}
+
+export default {
+  run(source: string, path: string): void {
+    if (JsFileExtensionRE.exec(path) !== null) {
+      compile(source, path);
+    }
+  },
+
+  report(): void {
+    const totalComponents =
+      SucessfulCompilation.length +
+      countUniqueLocInEvents(OtherFailures) +
+      countUniqueLocInEvents(ActionableFailures);
+    console.log(
+      chalk.green(
+        `Successfully compiled ${SucessfulCompilation.length} out of ${totalComponents} components.`,
+      ),
+    );
+  },
+};
diff --git a/compiler/packages/react-compiler-healthcheck/src/checks/strictMode.ts b/compiler/packages/react-compiler-healthcheck/src/checks/strictMode.ts
new file mode 100644
index 00000000000..ad5f4bf73b3
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/src/checks/strictMode.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import chalk from 'chalk';
+
+const JsFileExtensionRE = /(js|ts|jsx|tsx)$/;
+const NextConfigFileRE = /^next\.config\.(js|mjs)$/;
+const StrictModeRE = /<(React\.StrictMode|StrictMode)>/;
+const NextStrictModeRE = /reactStrictMode:\s*true/;
+let StrictModeUsage = false;
+
+export default {
+  run(source: string, path: string): void {
+    if (StrictModeUsage) {
+      return;
+    }
+
+    if (NextConfigFileRE.exec(path) !== null) {
+      StrictModeUsage = NextStrictModeRE.exec(source) !== null;
+    } else if (JsFileExtensionRE.exec(path) !== null) {
+      StrictModeUsage = StrictModeRE.exec(source) !== null;
+    }
+  },
+
+  report(): void {
+    if (StrictModeUsage) {
+      console.log(chalk.green('StrictMode usage found.'));
+    } else {
+      console.log(chalk.red('StrictMode usage not found.'));
+    }
+  },
+};
diff --git a/compiler/packages/react-compiler-healthcheck/src/config.ts b/compiler/packages/react-compiler-healthcheck/src/config.ts
new file mode 100644
index 00000000000..f279bc5d220
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/src/config.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const config = {
+  knownIncompatibleLibraries: [
+    'mobx-react',
+    'mobx-react-lite',
+    '@risingstack/react-easy-state',
+  ],
+};
diff --git a/compiler/packages/react-compiler-healthcheck/src/index.ts b/compiler/packages/react-compiler-healthcheck/src/index.ts
new file mode 100644
index 00000000000..548a373477b
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/src/index.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {glob} from 'fast-glob';
+import * as fs from 'fs/promises';
+import ora from 'ora';
+import yargs from 'yargs/yargs';
+import libraryCompatCheck from './checks/libraryCompat';
+import reactCompilerCheck from './checks/reactCompiler';
+import strictModeCheck from './checks/strictMode';
+
+async function main() {
+  const argv = yargs(process.argv.slice(2))
+    .scriptName('healthcheck')
+    .usage('$ npx healthcheck <src>')
+    .option('src', {
+      description: 'glob expression matching src files to compile',
+      type: 'string',
+      default: '**/+(*.{js,mjs,jsx,ts,tsx}|package.json)',
+    })
+    .parseSync();
+
+  const spinner = ora('Checking').start();
+  let src = argv.src;
+
+  const globOptions = {
+    onlyFiles: true,
+    ignore: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/tests/**',
+      '**/__tests__/**',
+      '**/__mocks__/**',
+      '**/__e2e__/**',
+    ],
+  };
+
+  for (const path of await glob(src, globOptions)) {
+    const source = await fs.readFile(path, 'utf-8');
+    spinner.text = `Checking ${path}`;
+    reactCompilerCheck.run(source, path);
+    strictModeCheck.run(source, path);
+    libraryCompatCheck.run(source, path);
+  }
+  spinner.stop();
+
+  reactCompilerCheck.report();
+  strictModeCheck.report();
+  libraryCompatCheck.report();
+}
+
+main();
diff --git a/compiler/packages/react-compiler-healthcheck/tsconfig.json b/compiler/packages/react-compiler-healthcheck/tsconfig.json
new file mode 100644
index 00000000000..37f76b276fd
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "Bundler",
+    "rootDir": "../",
+    "noEmit": true,
+    "jsx": "react-jsxdev",
+    "lib": ["ES2022"],
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "target": "ES2015",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts"],
+}
diff --git a/compiler/packages/react-compiler-healthcheck/tsup.config.ts b/compiler/packages/react-compiler-healthcheck/tsup.config.ts
new file mode 100644
index 00000000000..7d2c738dc71
--- /dev/null
+++ b/compiler/packages/react-compiler-healthcheck/tsup.config.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig} from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  external: [
+    '@babel/core',
+    '@babel/parser',
+    'chalk',
+    'fast-glob',
+    'ora',
+    'yargs',
+    'zod',
+    'zod/v4',
+    'zod-validation-error',
+    'zod-validation-error/v4',
+  ],
+  splitting: false,
+  sourcemap: false,
+  dts: false,
+  bundle: true,
+  format: 'cjs',
+  platform: 'node',
+  banner: {
+    js: `#!/usr/bin/env node
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+"use no memo";`,
+  },
+});
diff --git a/compiler/packages/react-compiler-runtime/README.md b/compiler/packages/react-compiler-runtime/README.md
new file mode 100644
index 00000000000..8f650f962dc
--- /dev/null
+++ b/compiler/packages/react-compiler-runtime/README.md
@@ -0,0 +1,5 @@
+# react-compiler-runtime
+
+Backwards compatible shim for runtime APIs used by React Compiler. Primarily meant for React versions prior to 19, but it will also work on > 19.
+
+See also https://github.com/reactwg/react-compiler/discussions/6.
diff --git a/compiler/packages/react-compiler-runtime/package.json b/compiler/packages/react-compiler-runtime/package.json
new file mode 100644
index 00000000000..60a192b0a7c
--- /dev/null
+++ b/compiler/packages/react-compiler-runtime/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "react-compiler-runtime",
+  "version": "0.0.1",
+  "description": "Runtime for React Compiler",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "test": "echo 'no tests'",
+    "watch": "yarn build --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/react-compiler-runtime"
+  }
+}
diff --git a/compiler/packages/react-compiler-runtime/src/index.ts b/compiler/packages/react-compiler-runtime/src/index.ts
new file mode 100644
index 00000000000..bdaface961e
--- /dev/null
+++ b/compiler/packages/react-compiler-runtime/src/index.ts
@@ -0,0 +1,417 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+
+const {useRef, useEffect, isValidElement} = React;
+const ReactSecretInternals =
+  //@ts-ignore
+  React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ??
+  //@ts-ignore
+  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+type MemoCache = Array<number | typeof $empty>;
+
+const $empty = Symbol.for('react.memo_cache_sentinel');
+
+// Re-export React.c if present, otherwise fallback to the userspace polyfill for versions of React
+// < 19.
+export const c =
+  // @ts-expect-error
+  typeof React.__COMPILER_RUNTIME?.c === 'function'
+    ? // @ts-expect-error
+      React.__COMPILER_RUNTIME.c
+    : function c(size: number) {
+        return React.useMemo<Array<unknown>>(() => {
+          const $ = new Array(size);
+          for (let ii = 0; ii < size; ii++) {
+            $[ii] = $empty;
+          }
+          // This symbol is added to tell the react devtools that this array is from
+          // useMemoCache.
+          // @ts-ignore
+          $[$empty] = true;
+          return $;
+        }, []);
+      };
+
+const LazyGuardDispatcher: {[key: string]: (...args: Array<any>) => any} = {};
+[
+  'readContext',
+  'useCallback',
+  'useContext',
+  'useEffect',
+  'useImperativeHandle',
+  'useInsertionEffect',
+  'useLayoutEffect',
+  'useMemo',
+  'useReducer',
+  'useRef',
+  'useState',
+  'useDebugValue',
+  'useDeferredValue',
+  'useTransition',
+  'useMutableSource',
+  'useSyncExternalStore',
+  'useId',
+  'unstable_isNewReconciler',
+  'getCacheSignal',
+  'getCacheForType',
+  'useCacheRefresh',
+].forEach(name => {
+  LazyGuardDispatcher[name] = () => {
+    throw new Error(
+      `[React] Unexpected React hook call (${name}) from a React compiled function. ` +
+        "Check that all hooks are called directly and named according to convention ('use[A-Z]') ",
+    );
+  };
+});
+
+let originalDispatcher: unknown = null;
+
+// Allow guards are not emitted for useMemoCache
+LazyGuardDispatcher['useMemoCache'] = (count: number) => {
+  if (originalDispatcher == null) {
+    throw new Error(
+      'React Compiler internal invariant violation: unexpected null dispatcher',
+    );
+  } else {
+    return (originalDispatcher as any).useMemoCache(count);
+  }
+};
+
+enum GuardKind {
+  PushGuardContext = 0,
+  PopGuardContext = 1,
+  PushExpectHook = 2,
+  PopExpectHook = 3,
+}
+
+function setCurrent(newDispatcher: any) {
+  ReactSecretInternals.ReactCurrentDispatcher.current = newDispatcher;
+  return ReactSecretInternals.ReactCurrentDispatcher.current;
+}
+
+const guardFrames: Array<unknown> = [];
+
+/**
+ * When `enableEmitHookGuards` is set, this does runtime validation
+ * of the no-conditional-hook-calls rule.
+ * As React Compiler needs to statically understand which calls to move out of
+ * conditional branches (i.e. React Compiler cannot memoize the results of hook
+ * calls), its understanding of "the rules of React" are more restrictive.
+ * This validation throws on unsound inputs at runtime.
+ *
+ * Components should only be invoked through React as React Compiler could memoize
+ * the call to AnotherComponent, introducing conditional hook calls in its
+ * compiled output.
+ * ```js
+ * function Invalid(props) {
+ *  const myJsx = AnotherComponent(props);
+ *  return <div> { myJsx } </div>;
+ * }
+ *
+ * Hooks must be named as hooks.
+ * ```js
+ * const renamedHook = useState;
+ * function Invalid() {
+ *   const [state, setState] = renamedHook(0);
+ * }
+ * ```
+ *
+ * Hooks must be directly called.
+ * ```
+ * function call(fn) {
+ *  return fn();
+ * }
+ * function Invalid() {
+ *   const result = call(useMyHook);
+ * }
+ * ```
+ */
+export function $dispatcherGuard(kind: GuardKind) {
+  const curr = ReactSecretInternals.ReactCurrentDispatcher.current;
+  if (kind === GuardKind.PushGuardContext) {
+    // Push before checking invariant or errors
+    guardFrames.push(curr);
+
+    if (guardFrames.length === 1) {
+      // save if we're the first guard on the stack
+      originalDispatcher = curr;
+    }
+
+    if (curr === LazyGuardDispatcher) {
+      throw new Error(
+        `[React] Unexpected call to custom hook or component from a React compiled function. ` +
+          "Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') " +
+          'and (2) components are returned as JSX instead of being directly invoked.',
+      );
+    }
+    setCurrent(LazyGuardDispatcher);
+  } else if (kind === GuardKind.PopGuardContext) {
+    // Pop before checking invariant or errors
+    const lastFrame = guardFrames.pop();
+
+    if (lastFrame == null) {
+      throw new Error(
+        'React Compiler internal error: unexpected null in guard stack',
+      );
+    }
+    if (guardFrames.length === 0) {
+      originalDispatcher = null;
+    }
+    setCurrent(lastFrame);
+  } else if (kind === GuardKind.PushExpectHook) {
+    // ExpectHooks could be nested, so we save the current dispatcher
+    // for the matching PopExpectHook to restore.
+    guardFrames.push(curr);
+    setCurrent(originalDispatcher);
+  } else if (kind === GuardKind.PopExpectHook) {
+    const lastFrame = guardFrames.pop();
+    if (lastFrame == null) {
+      throw new Error(
+        'React Compiler internal error: unexpected null in guard stack',
+      );
+    }
+    setCurrent(lastFrame);
+  } else {
+    throw new Error('React Compiler internal error: unreachable block' + kind);
+  }
+}
+
+export function $reset($: MemoCache) {
+  for (let ii = 0; ii < $.length; ii++) {
+    $[ii] = $empty;
+  }
+}
+
+export function $makeReadOnly() {
+  throw new Error('TODO: implement $makeReadOnly in react-compiler-runtime');
+}
+
+/**
+ * Instrumentation to count rerenders in React components
+ */
+export const renderCounterRegistry: Map<
+  string,
+  Set<{count: number}>
+> = new Map();
+export function clearRenderCounterRegistry() {
+  for (const counters of renderCounterRegistry.values()) {
+    counters.forEach(counter => {
+      counter.count = 0;
+    });
+  }
+}
+
+function registerRenderCounter(name: string, val: {count: number}) {
+  let counters = renderCounterRegistry.get(name);
+  if (counters == null) {
+    counters = new Set();
+    renderCounterRegistry.set(name, counters);
+  }
+  counters.add(val);
+}
+
+function removeRenderCounter(name: string, val: {count: number}): void {
+  const counters = renderCounterRegistry.get(name);
+  if (counters == null) {
+    return;
+  }
+  counters.delete(val);
+}
+
+export function useRenderCounter(name: string): void {
+  const val = useRef<{count: number}>(null);
+
+  if (val.current != null) {
+    val.current.count += 1;
+  }
+  useEffect(() => {
+    // Not counting initial render shouldn't be a problem
+    if (val.current == null) {
+      const counter = {count: 0};
+      registerRenderCounter(name, counter);
+      // @ts-ignore
+      val.current = counter;
+    }
+    return () => {
+      if (val.current !== null) {
+        removeRenderCounter(name, val.current);
+      }
+    };
+  });
+}
+
+const seenErrors = new Set();
+
+export function $structuralCheck(
+  oldValue: any,
+  newValue: any,
+  variableName: string,
+  fnName: string,
+  kind: string,
+  loc: string,
+): void {
+  function error(l: string, r: string, path: string, depth: number) {
+    const str = `${fnName}:${loc} [${kind}] ${variableName}${path} changed from ${l} to ${r} at depth ${depth}`;
+    if (seenErrors.has(str)) {
+      return;
+    }
+    seenErrors.add(str);
+    console.error(str);
+  }
+  const depthLimit = 2;
+  function recur(oldValue: any, newValue: any, path: string, depth: number) {
+    if (depth > depthLimit) {
+      return;
+    } else if (oldValue === newValue) {
+      return;
+    } else if (typeof oldValue !== typeof newValue) {
+      error(`type ${typeof oldValue}`, `type ${typeof newValue}`, path, depth);
+    } else if (typeof oldValue === 'object') {
+      const oldArray = Array.isArray(oldValue);
+      const newArray = Array.isArray(newValue);
+      if (oldValue === null && newValue !== null) {
+        error('null', `type ${typeof newValue}`, path, depth);
+      } else if (newValue === null) {
+        error(`type ${typeof oldValue}`, 'null', path, depth);
+      } else if (oldValue instanceof Map) {
+        if (!(newValue instanceof Map)) {
+          error(`Map instance`, `other value`, path, depth);
+        } else if (oldValue.size !== newValue.size) {
+          error(
+            `Map instance with size ${oldValue.size}`,
+            `Map instance with size ${newValue.size}`,
+            path,
+            depth,
+          );
+        } else {
+          for (const [k, v] of oldValue) {
+            if (!newValue.has(k)) {
+              error(
+                `Map instance with key ${k}`,
+                `Map instance without key ${k}`,
+                path,
+                depth,
+              );
+            } else {
+              recur(v, newValue.get(k), `${path}.get(${k})`, depth + 1);
+            }
+          }
+        }
+      } else if (newValue instanceof Map) {
+        error('other value', `Map instance`, path, depth);
+      } else if (oldValue instanceof Set) {
+        if (!(newValue instanceof Set)) {
+          error(`Set instance`, `other value`, path, depth);
+        } else if (oldValue.size !== newValue.size) {
+          error(
+            `Set instance with size ${oldValue.size}`,
+            `Set instance with size ${newValue.size}`,
+            path,
+            depth,
+          );
+        } else {
+          for (const v of newValue) {
+            if (!oldValue.has(v)) {
+              error(
+                `Set instance without element ${v}`,
+                `Set instance with element ${v}`,
+                path,
+                depth,
+              );
+            }
+          }
+        }
+      } else if (newValue instanceof Set) {
+        error('other value', `Set instance`, path, depth);
+      } else if (oldArray || newArray) {
+        if (oldArray !== newArray) {
+          error(
+            `type ${oldArray ? 'array' : 'object'}`,
+            `type ${newArray ? 'array' : 'object'}`,
+            path,
+            depth,
+          );
+        } else if (oldValue.length !== newValue.length) {
+          error(
+            `array with length ${oldValue.length}`,
+            `array with length ${newValue.length}`,
+            path,
+            depth,
+          );
+        } else {
+          for (let ii = 0; ii < oldValue.length; ii++) {
+            recur(oldValue[ii], newValue[ii], `${path}[${ii}]`, depth + 1);
+          }
+        }
+      } else if (isValidElement(oldValue) || isValidElement(newValue)) {
+        if (isValidElement(oldValue) !== isValidElement(newValue)) {
+          error(
+            `type ${isValidElement(oldValue) ? 'React element' : 'object'}`,
+            `type ${isValidElement(newValue) ? 'React element' : 'object'}`,
+            path,
+            depth,
+          );
+        } else if (oldValue.type !== newValue.type) {
+          error(
+            `React element of type ${oldValue.type}`,
+            `React element of type ${newValue.type}`,
+            path,
+            depth,
+          );
+        } else {
+          recur(
+            oldValue.props,
+            newValue.props,
+            `[props of ${path}]`,
+            depth + 1,
+          );
+        }
+      } else {
+        for (const key in newValue) {
+          if (!(key in oldValue)) {
+            error(
+              `object without key ${key}`,
+              `object with key ${key}`,
+              path,
+              depth,
+            );
+          }
+        }
+        for (const key in oldValue) {
+          if (!(key in newValue)) {
+            error(
+              `object with key ${key}`,
+              `object without key ${key}`,
+              path,
+              depth,
+            );
+          } else {
+            recur(oldValue[key], newValue[key], `${path}.${key}`, depth + 1);
+          }
+        }
+      }
+    } else if (typeof oldValue === 'function') {
+      // Bail on functions for now
+      return;
+    } else if (isNaN(oldValue) || isNaN(newValue)) {
+      if (isNaN(oldValue) !== isNaN(newValue)) {
+        error(
+          `${isNaN(oldValue) ? 'NaN' : 'non-NaN value'}`,
+          `${isNaN(newValue) ? 'NaN' : 'non-NaN value'}`,
+          path,
+          depth,
+        );
+      }
+    } else if (oldValue !== newValue) {
+      error(oldValue, newValue, path, depth);
+    }
+  }
+  recur(oldValue, newValue, '', 0);
+}
diff --git a/compiler/packages/react-compiler-runtime/tsconfig.json b/compiler/packages/react-compiler-runtime/tsconfig.json
new file mode 100644
index 00000000000..da95ee20452
--- /dev/null
+++ b/compiler/packages/react-compiler-runtime/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "outDir": "dist",
+    "jsx": "react-jsxdev",
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "target": "ES2015",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+    "sourceMap": true,
+    "removeComments": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/compiler/packages/react-compiler-runtime/tsup.config.ts b/compiler/packages/react-compiler-runtime/tsup.config.ts
new file mode 100644
index 00000000000..30a7f9da96f
--- /dev/null
+++ b/compiler/packages/react-compiler-runtime/tsup.config.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig} from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  external: ['react'],
+  splitting: false,
+  sourcemap: true,
+  dts: false,
+  bundle: true,
+  format: 'cjs',
+  platform: 'node',
+  target: 'es2015',
+  banner: {
+    js: `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+"use no memo";`,
+  },
+});
diff --git a/compiler/packages/react-forgive/.vscode-test.mjs b/compiler/packages/react-forgive/.vscode-test.mjs
new file mode 100644
index 00000000000..738bfc71b9c
--- /dev/null
+++ b/compiler/packages/react-forgive/.vscode-test.mjs
@@ -0,0 +1,3 @@
+import {defineConfig} from '@vscode/test-cli';
+
+export default defineConfig({files: 'dist/test/**/*.test.js'});
diff --git a/compiler/packages/react-forgive/.vscodeignore b/compiler/packages/react-forgive/.vscodeignore
new file mode 100644
index 00000000000..9ef76302ed5
--- /dev/null
+++ b/compiler/packages/react-forgive/.vscodeignore
@@ -0,0 +1,5 @@
+**/node_modules
+client
+server
+scripts
+.vscode-test.mjs
diff --git a/compiler/packages/react-forgive/.yarnrc b/compiler/packages/react-forgive/.yarnrc
new file mode 100644
index 00000000000..123ac74a0a3
--- /dev/null
+++ b/compiler/packages/react-forgive/.yarnrc
@@ -0,0 +1 @@
+ignore-engines true
diff --git a/compiler/packages/react-forgive/LICENSE b/compiler/packages/react-forgive/LICENSE
new file mode 100644
index 00000000000..b93be90515c
--- /dev/null
+++ b/compiler/packages/react-forgive/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+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/compiler/packages/react-forgive/client/package.json b/compiler/packages/react-forgive/client/package.json
new file mode 100644
index 00000000000..a975439726f
--- /dev/null
+++ b/compiler/packages/react-forgive/client/package.json
@@ -0,0 +1,22 @@
+{
+  "private": "true",
+  "name": "react-forgive-client",
+  "version": "0.0.0",
+  "description": "Experimental LSP client",
+  "license": "MIT",
+  "scripts": {
+    "build": "echo 'no build'",
+    "test": "echo 'no tests'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/react-forgive"
+  },
+  "dependencies": {
+    "vscode-languageclient": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.95.0"
+  }
+}
diff --git a/compiler/packages/react-forgive/client/src/autodeps.ts b/compiler/packages/react-forgive/client/src/autodeps.ts
new file mode 100644
index 00000000000..ed41b34dcb7
--- /dev/null
+++ b/compiler/packages/react-forgive/client/src/autodeps.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as vscode from 'vscode';
+import {
+  LanguageClient,
+  RequestType,
+  type Position,
+} from 'vscode-languageclient/node';
+import {positionLiteralToVSCodePosition, positionsToRange} from './mapping';
+
+export type AutoDepsDecorationsLSPEvent = {
+  useEffectCallExpr: [Position, Position];
+  decorations: Array<[Position, Position]>;
+};
+
+export interface AutoDepsDecorationsParams {
+  position: Position;
+}
+
+export namespace AutoDepsDecorationsRequest {
+  export const type = new RequestType<
+    AutoDepsDecorationsParams,
+    AutoDepsDecorationsLSPEvent | null,
+    void
+  >('react/autodeps_decorations');
+}
+
+const inferredEffectDepDecoration =
+  vscode.window.createTextEditorDecorationType({
+    // TODO: make configurable?
+    borderColor: new vscode.ThemeColor('diffEditor.move.border'),
+    borderStyle: 'solid',
+    borderWidth: '0 0 4px 0',
+  });
+
+let currentlyDecoratedAutoDepFnLoc: vscode.Range | null = null;
+export function getCurrentlyDecoratedAutoDepFnLoc(): vscode.Range | null {
+  return currentlyDecoratedAutoDepFnLoc;
+}
+export function setCurrentlyDecoratedAutoDepFnLoc(range: vscode.Range): void {
+  currentlyDecoratedAutoDepFnLoc = range;
+}
+export function clearCurrentlyDecoratedAutoDepFnLoc(): void {
+  currentlyDecoratedAutoDepFnLoc = null;
+}
+
+let decorationRequestId = 0;
+export type AutoDepsDecorationsOptions = {
+  shouldUpdateCurrent: boolean;
+};
+export function requestAutoDepsDecorations(
+  client: LanguageClient,
+  position: vscode.Position,
+  options: AutoDepsDecorationsOptions,
+) {
+  const id = ++decorationRequestId;
+  client
+    .sendRequest(AutoDepsDecorationsRequest.type, {position})
+    .then(response => {
+      if (response !== null) {
+        const {
+          decorations,
+          useEffectCallExpr: [start, end],
+        } = response;
+        // Maintain ordering
+        if (decorationRequestId === id) {
+          if (options.shouldUpdateCurrent) {
+            setCurrentlyDecoratedAutoDepFnLoc(positionsToRange(start, end));
+          }
+          drawInferredEffectDepDecorations(decorations);
+        }
+      } else {
+        clearCurrentlyDecoratedAutoDepFnLoc();
+        clearDecorations(inferredEffectDepDecoration);
+      }
+    });
+}
+
+export function drawInferredEffectDepDecorations(
+  decorations: Array<[Position, Position]>,
+): void {
+  const decorationOptions = decorations.map(([start, end]) => {
+    return {
+      range: new vscode.Range(
+        positionLiteralToVSCodePosition(start),
+        positionLiteralToVSCodePosition(end),
+      ),
+      hoverMessage: 'Inferred as an effect dependency',
+    };
+  });
+  vscode.window.activeTextEditor?.setDecorations(
+    inferredEffectDepDecoration,
+    decorationOptions,
+  );
+}
+
+export function clearDecorations(
+  decorationType: vscode.TextEditorDecorationType,
+) {
+  vscode.window.activeTextEditor?.setDecorations(decorationType, []);
+}
diff --git a/compiler/packages/react-forgive/client/src/colors.ts b/compiler/packages/react-forgive/client/src/colors.ts
new file mode 100644
index 00000000000..8989aa1c62c
--- /dev/null
+++ b/compiler/packages/react-forgive/client/src/colors.ts
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+type RGB = [number, number, number];
+
+const int = Math.floor;
+
+export class Color {
+  constructor(
+    private r: number,
+    private g: number,
+    private b: number,
+  ) {}
+
+  toAlphaString(a: number) {
+    return this.toCssString(a);
+  }
+  toString() {
+    return this.toCssString(1);
+  }
+
+  /**
+   * Adjust the color by a multiplier to lighten (`> 1.0`) or darken (`< 1.0`) the color. Returns a new
+   * instance.
+   */
+  adjusted(mult: number) {
+    const adjusted = Color.redistribute([
+      this.r * mult,
+      this.g * mult,
+      this.b * mult,
+    ]);
+    return new Color(...adjusted);
+  }
+
+  private toCssString(a: number) {
+    return `rgba(${this.r},${this.g},${this.b},${a})`;
+  }
+  /**
+   * Redistributes rgb, maintaing hue until its clamped.
+   * https://stackoverflow.com/a/141943
+   */
+  private static redistribute([r, g, b]: RGB): RGB {
+    const threshold = 255.999;
+    const max = Math.max(r, g, b);
+    if (max <= threshold) {
+      return [int(r), int(g), int(b)];
+    }
+    const total = r + g + b;
+    if (total >= 3 * threshold) {
+      return [int(threshold), int(threshold), int(threshold)];
+    }
+    const x = (3 * threshold - total) / (3 * max - total);
+    const gray = threshold - x * max;
+    return [int(gray + x * r), int(gray + x * g), int(gray + x * b)];
+  }
+}
+
+export const BLACK = new Color(0, 0, 0);
+export const WHITE = new Color(255, 255, 255);
+
+const COLOR_POOL = [
+  new Color(249, 65, 68),
+  new Color(243, 114, 44),
+  new Color(248, 150, 30),
+  new Color(249, 132, 74),
+  new Color(249, 199, 79),
+  new Color(144, 190, 109),
+  new Color(67, 170, 139),
+  new Color(77, 144, 142),
+  new Color(87, 117, 144),
+  new Color(39, 125, 161),
+];
+
+export function getColorFor(index: number): Color {
+  return COLOR_POOL[Math.abs(index) % COLOR_POOL.length]!;
+}
diff --git a/compiler/packages/react-forgive/client/src/extension.ts b/compiler/packages/react-forgive/client/src/extension.ts
new file mode 100644
index 00000000000..e9938c388a0
--- /dev/null
+++ b/compiler/packages/react-forgive/client/src/extension.ts
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+import {
+  LanguageClient,
+  LanguageClientOptions,
+  type Position,
+  ServerOptions,
+  TransportKind,
+} from 'vscode-languageclient/node';
+import {positionLiteralToVSCodePosition} from './mapping';
+import {
+  getCurrentlyDecoratedAutoDepFnLoc,
+  requestAutoDepsDecorations,
+} from './autodeps';
+
+let client: LanguageClient;
+
+export function activate(context: vscode.ExtensionContext) {
+  const serverModule = context.asAbsolutePath(path.join('dist', 'server.js'));
+  const documentSelector = [
+    {scheme: 'file', language: 'javascriptreact'},
+    {scheme: 'file', language: 'typescriptreact'},
+  ];
+
+  // If the extension is launched in debug mode then the debug server options are used
+  // Otherwise the run options are used
+  const serverOptions: ServerOptions = {
+    run: {
+      module: serverModule,
+      transport: TransportKind.ipc,
+    },
+    debug: {
+      module: serverModule,
+      transport: TransportKind.ipc,
+    },
+  };
+
+  const clientOptions: LanguageClientOptions = {
+    documentSelector,
+    progressOnInitialization: true,
+  };
+
+  // Create the language client and start the client.
+  try {
+    client = new LanguageClient(
+      'react-forgive',
+      'React Analyzer',
+      serverOptions,
+      clientOptions,
+    );
+  } catch {
+    vscode.window.showErrorMessage(
+      `React Analyzer couldn't be started. See the output channel for details.`,
+    );
+    return;
+  }
+
+  vscode.languages.registerHoverProvider(documentSelector, {
+    provideHover(_document, position, _token) {
+      requestAutoDepsDecorations(client, position, {shouldUpdateCurrent: true});
+      return null;
+    },
+  });
+
+  vscode.workspace.onDidChangeTextDocument(async _e => {
+    const currentlyDecoratedAutoDepFnLoc = getCurrentlyDecoratedAutoDepFnLoc();
+    if (currentlyDecoratedAutoDepFnLoc !== null) {
+      requestAutoDepsDecorations(client, currentlyDecoratedAutoDepFnLoc.start, {
+        shouldUpdateCurrent: false,
+      });
+    }
+  });
+
+  vscode.commands.registerCommand(
+    'react.requestAutoDepsDecorations',
+    (position: Position) => {
+      requestAutoDepsDecorations(
+        client,
+        positionLiteralToVSCodePosition(position),
+        {shouldUpdateCurrent: true},
+      );
+    },
+  );
+
+  client.registerProposedFeatures();
+  client.start();
+}
+
+export function deactivate(): Thenable<void> | undefined {
+  if (client !== undefined) {
+    return client.stop();
+  }
+  return;
+}
diff --git a/compiler/packages/react-forgive/client/src/mapping.ts b/compiler/packages/react-forgive/client/src/mapping.ts
new file mode 100644
index 00000000000..3ec01ef8f62
--- /dev/null
+++ b/compiler/packages/react-forgive/client/src/mapping.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as vscode from 'vscode';
+import {Position} from 'vscode-languageclient/node';
+
+export function positionLiteralToVSCodePosition(
+  position: Position,
+): vscode.Position {
+  return new vscode.Position(position.line, position.character);
+}
+
+export function positionsToRange(start: Position, end: Position): vscode.Range {
+  return new vscode.Range(
+    positionLiteralToVSCodePosition(start),
+    positionLiteralToVSCodePosition(end),
+  );
+}
diff --git a/compiler/packages/react-forgive/client/yarn.lock b/compiler/packages/react-forgive/client/yarn.lock
new file mode 100644
index 00000000000..b96751788c7
--- /dev/null
+++ b/compiler/packages/react-forgive/client/yarn.lock
@@ -0,0 +1,59 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/vscode@^1.95.0":
+  version "1.96.0"
+  resolved "https://registry.yarnpkg.com/@types/vscode/-/vscode-1.96.0.tgz#3181004bf25d71677ae4aacdd7605a3fd7edf08e"
+  integrity sha512-qvZbSZo+K4ZYmmDuaodMbAa67Pl6VDQzLKFka6rq+3WUTY4Kro7Bwoi0CuZLO/wema0ygcmpwow7zZfPJTs5jg==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+minimatch@^5.1.0:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+semver@^7.3.7:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+vscode-jsonrpc@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz#f43dfa35fb51e763d17cd94dcca0c9458f35abf9"
+  integrity sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==
+
+vscode-languageclient@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/vscode-languageclient/-/vscode-languageclient-9.0.1.tgz#cdfe20267726c8d4db839dc1e9d1816e1296e854"
+  integrity sha512-JZiimVdvimEuHh5olxhxkht09m3JzUGwggb5eRUkzzJhZ2KjCN0nh55VfiED9oez9DyF8/fz1g1iBV3h+0Z2EA==
+  dependencies:
+    minimatch "^5.1.0"
+    semver "^7.3.7"
+    vscode-languageserver-protocol "3.17.5"
+
+vscode-languageserver-protocol@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz#864a8b8f390835572f4e13bd9f8313d0e3ac4bea"
+  integrity sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==
+  dependencies:
+    vscode-jsonrpc "8.2.0"
+    vscode-languageserver-types "3.17.5"
+
+vscode-languageserver-types@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz#3273676f0cf2eab40b3f44d085acbb7f08a39d8a"
+  integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==
diff --git a/compiler/packages/react-forgive/package.json b/compiler/packages/react-forgive/package.json
new file mode 100644
index 00000000000..fc7d71095c5
--- /dev/null
+++ b/compiler/packages/react-forgive/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "react-forgive",
+  "displayName": "React Analyzer",
+  "description": "React LSP",
+  "license": "MIT",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/react-forgive"
+  },
+  "categories": [
+    "Programming Languages"
+  ],
+  "keywords": [
+    "react",
+    "react analyzer",
+    "react compiler"
+  ],
+  "publisher": "Meta",
+  "engines": {
+    "vscode": "^1.96.0"
+  },
+  "activationEvents": [
+    "onLanguage:javascriptreact",
+    "onLanguage:typescriptreact"
+  ],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "react-forgive.toggleAll",
+        "title": "React Analyzer: Toggle on/off"
+      }
+    ]
+  },
+  "scripts": {
+    "build": "yarn run compile",
+    "build:compiler": "yarn workspace babel-plugin-react-compiler build --dts",
+    "compile": "rimraf dist && concurrently -n server,client \"scripts/build.mjs -t server\" \"scripts/build.mjs -t client\"",
+    "dev": "yarn run package && yarn run install-ext",
+    "install-ext": "code --install-extension react-forgive-0.0.0.vsix",
+    "lint": "echo 'no tests'",
+    "package": "rm -f react-forgive-0.0.0.vsix && vsce package --yarn",
+    "postinstall": "cd client && yarn install && cd ../server && yarn install && cd ..",
+    "pretest": "yarn run build:compiler && yarn run compile && yarn run lint",
+    "test": "vscode-test",
+    "vscode:prepublish": "yarn run compile",
+    "watch": "scripts/build.mjs --watch"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^20",
+    "@types/vscode": "^1.96.0",
+    "@vscode/test-cli": "^0.0.10",
+    "@vscode/test-electron": "^2.4.1",
+    "eslint": "^9.13.0",
+    "mocha": "^11.0.1",
+    "typescript-eslint": "^8.16.0",
+    "yargs": "^17.7.2"
+  }
+}
diff --git a/compiler/packages/react-forgive/scripts/build.mjs b/compiler/packages/react-forgive/scripts/build.mjs
new file mode 100755
index 00000000000..5fc8828e6e7
--- /dev/null
+++ b/compiler/packages/react-forgive/scripts/build.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as esbuild from 'esbuild';
+import yargs from 'yargs';
+import * as Server from './server.mjs';
+import * as Client from './client.mjs';
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const argv = yargs(process.argv.slice(2))
+  .choices('t', ['client', 'server'])
+  .options('w', {
+    alias: 'watch',
+    default: false,
+    type: 'boolean',
+  })
+  .parse();
+
+async function main() {
+  if (argv.w) {
+    const serverCtx = await esbuild.context(Server.config);
+    const clientCtx = await esbuild.context(Client.config);
+    await Promise.all([serverCtx.watch(), clientCtx.watch()]);
+    console.log('watching for changes...');
+  } else {
+    switch (argv.t) {
+      case 'server': {
+        await esbuild.build({
+          sourcemap: IS_DEV,
+          minify: IS_DEV === false,
+          ...Server.config,
+        });
+        break;
+      }
+      case 'client': {
+        await esbuild.build({
+          sourcemap: IS_DEV,
+          minify: IS_DEV === false,
+          ...Client.config,
+        });
+        break;
+      }
+    }
+  }
+}
+
+main();
diff --git a/compiler/packages/react-forgive/scripts/client.mjs b/compiler/packages/react-forgive/scripts/client.mjs
new file mode 100644
index 00000000000..9a8987061b3
--- /dev/null
+++ b/compiler/packages/react-forgive/scripts/client.mjs
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const entryPoint = path.join(__dirname, '../client/src/extension.ts');
+export const outfile = path.join(__dirname, '../dist/extension.js');
+export const config = {
+  entryPoints: [entryPoint],
+  outfile,
+  bundle: true,
+  external: ['vscode'],
+  format: 'cjs',
+  platform: 'node',
+  banner: {
+    js: `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+`,
+  },
+};
diff --git a/compiler/packages/react-forgive/scripts/server.mjs b/compiler/packages/react-forgive/scripts/server.mjs
new file mode 100644
index 00000000000..e6d120e341a
--- /dev/null
+++ b/compiler/packages/react-forgive/scripts/server.mjs
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const entryPoint = path.join(__dirname, '../server/src/index.ts');
+export const outfile = path.join(__dirname, '../dist/server.js');
+export const config = {
+  entryPoints: [entryPoint],
+  outfile,
+  bundle: true,
+  external: ['vscode'],
+  format: 'cjs',
+  platform: 'node',
+  banner: {
+    js: `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+`,
+  },
+};
diff --git a/compiler/packages/react-forgive/server/package.json b/compiler/packages/react-forgive/server/package.json
new file mode 100644
index 00000000000..c9125860720
--- /dev/null
+++ b/compiler/packages/react-forgive/server/package.json
@@ -0,0 +1,25 @@
+{
+  "private": "true",
+  "name": "react-forgive-server",
+  "version": "0.0.0",
+  "description": "Experimental LSP server",
+  "license": "MIT",
+  "scripts": {
+    "build": "rimraf dist && rollup --config --bundleConfigAsCjs",
+    "test": "echo 'no tests'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/react-forgive"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/parser": "^7.26.0",
+    "@babel/plugin-syntax-typescript": "^7.25.9",
+    "@babel/types": "^7.26.0",
+    "prettier": "^3.3.3",
+    "vscode-languageserver": "^9.0.1",
+    "vscode-languageserver-textdocument": "^1.0.12"
+  }
+}
diff --git a/compiler/packages/react-forgive/server/src/compiler/compat.ts b/compiler/packages/react-forgive/server/src/compiler/compat.ts
new file mode 100644
index 00000000000..f467f70ba13
--- /dev/null
+++ b/compiler/packages/react-forgive/server/src/compiler/compat.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {type SourceLocation} from 'babel-plugin-react-compiler';
+import {type Range} from 'vscode-languageserver';
+
+export function babelLocationToRange(loc: SourceLocation): Range | null {
+  if (typeof loc === 'symbol') {
+    return null;
+  }
+  return {
+    start: {line: loc.start.line - 1, character: loc.start.column},
+    end: {line: loc.end.line - 1, character: loc.end.column},
+  };
+}
+
+/**
+ * Refine range to only the first character.
+ */
+export function getRangeFirstCharacter(range: Range): Range {
+  return {
+    start: range.start,
+    end: range.start,
+  };
+}
diff --git a/compiler/packages/react-forgive/server/src/compiler/index.ts b/compiler/packages/react-forgive/server/src/compiler/index.ts
new file mode 100644
index 00000000000..b474253f71e
--- /dev/null
+++ b/compiler/packages/react-forgive/server/src/compiler/index.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {parseAsync, transformFromAstAsync} from '@babel/core';
+import BabelPluginReactCompiler, {
+  type PluginOptions,
+} from 'babel-plugin-react-compiler';
+import * as babelParser from 'prettier/plugins/babel.js';
+import estreeParser from 'prettier/plugins/estree';
+import * as typescriptParser from 'prettier/plugins/typescript';
+import * as prettier from 'prettier/standalone';
+
+export let lastResult: BabelCore.BabelFileResult | null = null;
+
+type CompileOptions = {
+  text: string;
+  file: string;
+  options: PluginOptions | null;
+};
+export async function compile({
+  text,
+  file,
+  options,
+}: CompileOptions): Promise<BabelCore.BabelFileResult | null> {
+  const ast = await parseAsync(text, {
+    sourceFileName: file,
+    parserOpts: {
+      plugins: ['typescript', 'jsx'],
+    },
+    sourceType: 'module',
+    configFile: false,
+    babelrc: false,
+  });
+  if (ast == null) {
+    return null;
+  }
+  const plugins =
+    options != null
+      ? [[BabelPluginReactCompiler, options]]
+      : [[BabelPluginReactCompiler]];
+  const result = await transformFromAstAsync(ast, text, {
+    filename: file,
+    highlightCode: false,
+    retainLines: true,
+    plugins,
+    sourceType: 'module',
+    sourceFileName: file,
+    configFile: false,
+    babelrc: false,
+  });
+  if (result?.code == null) {
+    throw new Error(
+      `Expected BabelPluginReactCompiler to compile successfully, got ${result}`,
+    );
+  }
+  result.code = await prettier.format(result.code, {
+    semi: false,
+    parser: 'babel-ts',
+    plugins: [babelParser, estreeParser, typescriptParser],
+  });
+  if (result.code != null) {
+    lastResult = result;
+  }
+  return result;
+}
diff --git a/compiler/packages/react-forgive/server/src/index.ts b/compiler/packages/react-forgive/server/src/index.ts
new file mode 100644
index 00000000000..7552337cbc7
--- /dev/null
+++ b/compiler/packages/react-forgive/server/src/index.ts
@@ -0,0 +1,253 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {TextDocument} from 'vscode-languageserver-textdocument';
+import {
+  CodeAction,
+  CodeActionKind,
+  CodeLens,
+  Command,
+  createConnection,
+  type InitializeParams,
+  type InitializeResult,
+  Position,
+  ProposedFeatures,
+  TextDocuments,
+  TextDocumentSyncKind,
+} from 'vscode-languageserver/node';
+import {compile, lastResult} from './compiler';
+import {
+  type CompileSuccessEvent,
+  type LoggerEvent,
+  type PluginOptions,
+  defaultOptions,
+} from 'babel-plugin-react-compiler';
+import {babelLocationToRange, getRangeFirstCharacter} from './compiler/compat';
+import {
+  type AutoDepsDecorationsLSPEvent,
+  AutoDepsDecorationsRequest,
+  mapCompilerEventToLSPEvent,
+} from './requests/autodepsdecorations';
+import {
+  isPositionWithinRange,
+  isRangeWithinRange,
+  Range,
+  sourceLocationToRange,
+} from './utils/range';
+
+const SUPPORTED_LANGUAGE_IDS = new Set([
+  'javascript',
+  'javascriptreact',
+  'typescript',
+  'typescriptreact',
+]);
+
+const connection = createConnection(ProposedFeatures.all);
+const documents = new TextDocuments(TextDocument);
+
+let compilerOptions: PluginOptions | null = null;
+let compiledFns: Set<CompileSuccessEvent> = new Set();
+let autoDepsDecorations: Array<AutoDepsDecorationsLSPEvent> = [];
+let codeActionEvents: Array<CodeActionLSPEvent> = [];
+
+type CodeActionLSPEvent = {
+  title: string;
+  kind: CodeActionKind;
+  newText: string;
+  anchorRange: Range;
+  editRange: {start: Position; end: Position};
+};
+
+connection.onInitialize((_params: InitializeParams) => {
+  compilerOptions = defaultOptions;
+  compilerOptions = {
+    ...compilerOptions,
+    environment: {
+      ...compilerOptions.environment,
+      inferEffectDependencies: [
+        {
+          function: {
+            importSpecifierName: 'useEffect',
+            source: 'react',
+          },
+          autodepsIndex: 1,
+        },
+        {
+          function: {
+            importSpecifierName: 'useSpecialEffect',
+            source: 'shared-runtime',
+          },
+          autodepsIndex: 2,
+        },
+        {
+          function: {
+            importSpecifierName: 'default',
+            source: 'useEffectWrapper',
+          },
+          autodepsIndex: 1,
+        },
+      ],
+    },
+    logger: {
+      logEvent(_filename: string | null, event: LoggerEvent) {
+        connection.console.info(`Received event: ${event.kind}`);
+        connection.console.debug(JSON.stringify(event, null, 2));
+        if (event.kind === 'CompileSuccess') {
+          compiledFns.add(event);
+        }
+        if (event.kind === 'AutoDepsDecorations') {
+          autoDepsDecorations.push(mapCompilerEventToLSPEvent(event));
+        }
+        if (event.kind === 'AutoDepsEligible') {
+          const depArrayLoc = sourceLocationToRange(event.depArrayLoc);
+          codeActionEvents.push({
+            title: 'Use React Compiler inferred dependency array',
+            kind: CodeActionKind.QuickFix,
+            newText: '',
+            anchorRange: sourceLocationToRange(event.fnLoc),
+            editRange: {start: depArrayLoc[0], end: depArrayLoc[1]},
+          });
+        }
+      },
+    },
+  };
+  const result: InitializeResult = {
+    capabilities: {
+      textDocumentSync: TextDocumentSyncKind.Full,
+      codeLensProvider: {resolveProvider: true},
+      codeActionProvider: {resolveProvider: true},
+    },
+  };
+  return result;
+});
+
+connection.onInitialized(() => {
+  connection.console.log('initialized');
+});
+
+documents.onDidChangeContent(async event => {
+  connection.console.info(`Compiling: ${event.document.uri}`);
+  resetState();
+  if (SUPPORTED_LANGUAGE_IDS.has(event.document.languageId)) {
+    const text = event.document.getText();
+    try {
+      await compile({
+        text,
+        file: event.document.uri,
+        options: compilerOptions,
+      });
+    } catch (err) {
+      connection.console.error('Failed to compile');
+      if (err instanceof Error) {
+        connection.console.error(err.stack ?? err.message);
+      } else {
+        connection.console.error(JSON.stringify(err, null, 2));
+      }
+    }
+  }
+});
+
+connection.onDidChangeWatchedFiles(change => {
+  resetState();
+  connection.console.log(
+    change.changes.map(c => `File changed: ${c.uri}`).join('\n'),
+  );
+});
+
+connection.onCodeLens(params => {
+  connection.console.info(`Handling codelens for: ${params.textDocument.uri}`);
+  if (compiledFns.size === 0) {
+    return;
+  }
+  const lenses: Array<CodeLens> = [];
+  for (const compiled of compiledFns) {
+    if (compiled.fnLoc != null) {
+      const fnLoc = babelLocationToRange(compiled.fnLoc);
+      if (fnLoc === null) continue;
+      const lens = CodeLens.create(
+        getRangeFirstCharacter(fnLoc),
+        compiled.fnLoc,
+      );
+      if (lastResult?.code != null) {
+        lens.command = {
+          title: 'Optimized by React Compiler',
+          command: 'todo',
+        };
+      }
+      lenses.push(lens);
+    }
+  }
+  return lenses;
+});
+
+connection.onCodeLensResolve(lens => {
+  connection.console.info(`Resolving codelens for: ${JSON.stringify(lens)}`);
+  if (lastResult?.code != null) {
+    connection.console.log(lastResult.code);
+  }
+  return lens;
+});
+
+connection.onCodeAction(params => {
+  const codeActions: Array<CodeAction> = [];
+  for (const codeActionEvent of codeActionEvents) {
+    if (
+      isRangeWithinRange(
+        [params.range.start, params.range.end],
+        codeActionEvent.anchorRange,
+      )
+    ) {
+      const codeAction = CodeAction.create(
+        codeActionEvent.title,
+        {
+          changes: {
+            [params.textDocument.uri]: [
+              {
+                newText: codeActionEvent.newText,
+                range: codeActionEvent.editRange,
+              },
+            ],
+          },
+        },
+        codeActionEvent.kind,
+      );
+      // After executing a codeaction, we want to draw autodep decorations again
+      codeAction.command = Command.create(
+        'Request autodeps decorations',
+        'react.requestAutoDepsDecorations',
+        codeActionEvent.anchorRange[0],
+      );
+      codeActions.push(codeAction);
+    }
+  }
+  return codeActions;
+});
+
+/**
+ * The client can request the server to compute autodeps decorations based on a currently selected
+ * position if the selected position is within an autodep eligible function call.
+ */
+connection.onRequest(AutoDepsDecorationsRequest.type, async params => {
+  const position = params.position;
+  for (const decoration of autoDepsDecorations) {
+    if (isPositionWithinRange(position, decoration.useEffectCallExpr)) {
+      return decoration;
+    }
+  }
+  return null;
+});
+
+function resetState() {
+  connection.console.debug('Clearing state');
+  compiledFns.clear();
+  autoDepsDecorations = [];
+  codeActionEvents = [];
+}
+
+documents.listen(connection);
+connection.listen();
+connection.console.info(`React Analyzer running in node ${process.version}`);
diff --git a/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts b/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts
new file mode 100644
index 00000000000..c9c9e8ca013
--- /dev/null
+++ b/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {type AutoDepsDecorationsEvent} from 'babel-plugin-react-compiler';
+import {type Position} from 'vscode-languageserver-textdocument';
+import {RequestType} from 'vscode-languageserver/node';
+import {type Range, sourceLocationToRange} from '../utils/range';
+
+export type AutoDepsDecorationsLSPEvent = {
+  useEffectCallExpr: Range;
+  decorations: Array<Range>;
+};
+export interface AutoDepsDecorationsParams {
+  position: Position;
+}
+export namespace AutoDepsDecorationsRequest {
+  export const type = new RequestType<
+    AutoDepsDecorationsParams,
+    AutoDepsDecorationsLSPEvent,
+    void
+  >('react/autodeps_decorations');
+}
+
+export function mapCompilerEventToLSPEvent(
+  event: AutoDepsDecorationsEvent,
+): AutoDepsDecorationsLSPEvent {
+  return {
+    useEffectCallExpr: sourceLocationToRange(event.fnLoc),
+    decorations: event.decorations.map(sourceLocationToRange),
+  };
+}
diff --git a/compiler/packages/react-forgive/server/src/utils/range.ts b/compiler/packages/react-forgive/server/src/utils/range.ts
new file mode 100644
index 00000000000..5c164667c4f
--- /dev/null
+++ b/compiler/packages/react-forgive/server/src/utils/range.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as t from '@babel/types';
+import {type Position} from 'vscode-languageserver/node';
+
+export type Range = [Position, Position];
+
+export function isPositionWithinRange(
+  position: Position,
+  [start, end]: Range,
+): boolean {
+  return position.line >= start.line && position.line <= end.line;
+}
+
+export function isRangeWithinRange(aRange: Range, bRange: Range): boolean {
+  const startComparison = comparePositions(aRange[0], bRange[0]);
+  const endComparison = comparePositions(aRange[1], bRange[1]);
+  return startComparison >= 0 && endComparison <= 0;
+}
+
+function comparePositions(a: Position, b: Position): number {
+  const lineComparison = a.line - b.line;
+  if (lineComparison === 0) {
+    return a.character - b.character;
+  } else {
+    return lineComparison;
+  }
+}
+
+export function sourceLocationToRange(
+  loc: t.SourceLocation,
+): [Position, Position] {
+  return [
+    {line: loc.start.line - 1, character: loc.start.column},
+    {line: loc.end.line - 1, character: loc.end.column},
+  ];
+}
diff --git a/compiler/packages/react-forgive/server/tsconfig.json b/compiler/packages/react-forgive/server/tsconfig.json
new file mode 100644
index 00000000000..52efba4ebe5
--- /dev/null
+++ b/compiler/packages/react-forgive/server/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "Bundler",
+    "rootDir": "../../..",
+    "noEmit": true,
+    "jsx": "react-jsxdev",
+    "target": "ES2015",
+    "sourceMap": false,
+    "removeComments": true,
+  },
+  "exclude": ["node_modules", ".vscode-test"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/compiler/packages/react-forgive/server/yarn.lock b/compiler/packages/react-forgive/server/yarn.lock
new file mode 100644
index 00000000000..ee346ce7d3a
--- /dev/null
+++ b/compiler/packages/react-forgive/server/yarn.lock
@@ -0,0 +1,326 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.3.tgz#99488264a56b2aded63983abd6a417f03b92ed02"
+  integrity sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==
+
+"@babel/core@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
+  integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.26.0"
+    "@babel/generator" "^7.26.0"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.0"
+    "@babel/parser" "^7.26.0"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.26.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@^7.26.0", "@babel/generator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.3.tgz#ab8d4360544a425c90c248df7059881f4b2ce019"
+  integrity sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==
+  dependencies:
+    "@babel/parser" "^7.26.3"
+    "@babel/types" "^7.26.3"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-compilation-targets@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875"
+  integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==
+  dependencies:
+    "@babel/compat-data" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-plugin-utils@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46"
+  integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helpers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
+  integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.0"
+
+"@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+  dependencies:
+    "@babel/types" "^7.26.3"
+
+"@babel/plugin-syntax-typescript@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/traverse@^7.25.9":
+  version "7.26.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.4.tgz#ac3a2a84b908dde6d463c3bfa2c5fdc1653574bd"
+  integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.3"
+    "@babel/parser" "^7.26.3"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.3"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+browserslist@^4.24.0:
+  version "4.24.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.3.tgz#5fc2725ca8fb3c1432e13dac278c7cc103e026d2"
+  integrity sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==
+  dependencies:
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
+
+caniuse-lite@^1.0.30001688:
+  version "1.0.30001690"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz#f2d15e3aaf8e18f76b2b8c1481abde063b8104c8"
+  integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+debug@^4.1.0, debug@^4.3.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+electron-to-chromium@^1.5.73:
+  version "1.5.74"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz#cb886b504a6467e4c00bea3317edb38393c53413"
+  integrity sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==
+
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+globals@^11.1.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==
+
+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==
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+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"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
+picocolors@^1.0.0, picocolors@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+prettier@^3.3.3:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
+  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
+
+vscode-jsonrpc@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz#f43dfa35fb51e763d17cd94dcca0c9458f35abf9"
+  integrity sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==
+
+vscode-languageserver-protocol@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz#864a8b8f390835572f4e13bd9f8313d0e3ac4bea"
+  integrity sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==
+  dependencies:
+    vscode-jsonrpc "8.2.0"
+    vscode-languageserver-types "3.17.5"
+
+vscode-languageserver-textdocument@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz#457ee04271ab38998a093c68c2342f53f6e4a631"
+  integrity sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==
+
+vscode-languageserver-types@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz#3273676f0cf2eab40b3f44d085acbb7f08a39d8a"
+  integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==
+
+vscode-languageserver@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz#500aef82097eb94df90d008678b0b6b5f474015b"
+  integrity sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==
+  dependencies:
+    vscode-languageserver-protocol "3.17.5"
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
diff --git a/compiler/packages/react-forgive/tsconfig.json b/compiler/packages/react-forgive/tsconfig.json
new file mode 100644
index 00000000000..6aeffaeb354
--- /dev/null
+++ b/compiler/packages/react-forgive/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "rootDir": "../",
+    "noEmit": true,
+    "jsx": "react-jsxdev",
+    "lib": ["ES2022"],
+
+    "target": "ES2022",
+    "importsNotUsedAsValues": "remove",
+  },
+  "exclude": ["node_modules"],
+  "include": ["server/src/**/*.ts", "client/src/**/*.ts"],
+}
diff --git a/compiler/packages/react-mcp-server/README.md b/compiler/packages/react-mcp-server/README.md
new file mode 100644
index 00000000000..ec4f398942d
--- /dev/null
+++ b/compiler/packages/react-mcp-server/README.md
@@ -0,0 +1,22 @@
+# React MCP Server (experimental)
+
+An experimental MCP Server for React.
+
+## Development
+
+First, add this file if you're using Claude Desktop: `code ~/Library/Application\ Support/Claude/claude_desktop_config.json`. Copy the absolute path from `which node` and from `react/compiler/react-mcp-server/dist/index.js` and paste, for example:
+
+```json
+{
+  "mcpServers": {
+    "react": {
+      "command": "/Users/<username>/.asdf/shims/node",
+      "args": [
+        "/Users/<username>/code/react/compiler/packages/react-mcp-server/dist/index.js"
+      ]
+    }
+  }
+}
+```
+
+Next, run `yarn workspace react-mcp-server watch` from the `react/compiler` directory and make changes as needed. You will need to restart Claude everytime you want to try your changes.
diff --git a/compiler/packages/react-mcp-server/package.json b/compiler/packages/react-mcp-server/package.json
new file mode 100644
index 00000000000..07dc378de12
--- /dev/null
+++ b/compiler/packages/react-mcp-server/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "react-mcp-server",
+  "version": "0.0.0",
+  "description": "React MCP Server (experimental)",
+  "bin": {
+    "react-mcp-server": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "test": "echo 'no tests'",
+    "dev": "concurrently --kill-others -n build,inspect \"yarn run watch\" \"wait-on dist/index.js && yarn run inspect\"",
+    "inspect": "npx @modelcontextprotocol/inspector node dist/index.js",
+    "watch": "yarn build --watch"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/parser": "^7.26",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.27.1",
+    "@modelcontextprotocol/sdk": "^1.9.0",
+    "algoliasearch": "^5.23.3",
+    "cheerio": "^1.0.0",
+    "html-to-text": "^9.0.5",
+    "prettier": "^3.3.3",
+    "puppeteer": "^24.7.2",
+    "zod": "^3.25.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@types/html-to-text": "^9.0.4",
+    "@types/jest": "^29.5.14",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.3.2"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/react-mcp-server"
+  }
+}
diff --git a/compiler/packages/react-mcp-server/src/compiler/index.ts b/compiler/packages/react-mcp-server/src/compiler/index.ts
new file mode 100644
index 00000000000..96af7a182bd
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/compiler/index.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {parseAsync, transformFromAstAsync} from '@babel/core';
+import BabelPluginReactCompiler, {
+  type PluginOptions,
+} from 'babel-plugin-react-compiler/src';
+import * as prettier from 'prettier';
+
+export let lastResult: BabelCore.BabelFileResult | null = null;
+
+export type PrintedCompilerPipelineValue =
+  | {
+      kind: 'hir';
+      name: string;
+      fnName: string | null;
+      value: string;
+    }
+  | {kind: 'reactive'; name: string; fnName: string | null; value: string}
+  | {kind: 'debug'; name: string; fnName: string | null; value: string};
+
+type CompileOptions = {
+  text: string;
+  file: string;
+  options: PluginOptions | null;
+};
+export async function compile({
+  text,
+  file,
+  options,
+}: CompileOptions): Promise<BabelCore.BabelFileResult> {
+  const ast = await parseAsync(text, {
+    sourceFileName: file,
+    parserOpts: {
+      plugins: ['typescript', 'jsx'],
+    },
+    sourceType: 'module',
+  });
+  if (ast == null) {
+    throw new Error('Could not parse');
+  }
+  const plugins =
+    options != null
+      ? [[BabelPluginReactCompiler, options]]
+      : [[BabelPluginReactCompiler]];
+  const result = await transformFromAstAsync(ast, text, {
+    filename: file,
+    highlightCode: false,
+    retainLines: true,
+    plugins,
+    sourceType: 'module',
+    sourceFileName: file,
+  });
+  if (result?.code == null) {
+    throw new Error(
+      `Expected BabelPluginReactCompiler to compile successfully, got ${result}`,
+    );
+  }
+  try {
+    result.code = await prettier.format(result.code, {
+      semi: false,
+      parser: 'babel-ts',
+    });
+    if (result.code != null) {
+      lastResult = result;
+    }
+  } catch (err) {
+    // If prettier failed just log, no need to crash
+    console.error(err);
+  }
+  return result;
+}
diff --git a/compiler/packages/react-mcp-server/src/index.ts b/compiler/packages/react-mcp-server/src/index.ts
new file mode 100644
index 00000000000..e5bd794107d
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/index.ts
@@ -0,0 +1,497 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js';
+import {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js';
+import {z} from 'zod/v4';
+import {compile, type PrintedCompilerPipelineValue} from './compiler';
+import {
+  CompilerPipelineValue,
+  printReactiveFunctionWithOutlined,
+  printFunctionWithOutlined,
+  PluginOptions,
+  SourceLocation,
+} from 'babel-plugin-react-compiler/src';
+import * as cheerio from 'cheerio';
+import {queryAlgolia} from './utils/algolia';
+import assertExhaustive from './utils/assertExhaustive';
+import {convert} from 'html-to-text';
+import {measurePerformance} from './tools/runtimePerf';
+import {parseReactComponentTree} from './tools/componentTree';
+
+function calculateMean(values: number[]): string {
+  return values.length > 0
+    ? values.reduce((acc, curr) => acc + curr, 0) / values.length + 'ms'
+    : 'could not collect';
+}
+
+const server = new McpServer({
+  name: 'React',
+  version: '0.0.0',
+});
+
+server.tool(
+  'query-react-dev-docs',
+  'This tool lets you search for official docs from react.dev. This always has the most up to date information on React. You can look for documentation on APIs such as <ViewTransition>, <Activity>, and hooks like useOptimistic, useSyncExternalStore, useTransition, and more. Whenever you think hard about React, use this tool to get more information before proceeding.',
+  {
+    query: z.string(),
+  },
+  async ({query}) => {
+    try {
+      const pages = await queryAlgolia(query);
+      if (pages.length === 0) {
+        return {
+          content: [{type: 'text' as const, text: `No results`}],
+        };
+      }
+      const content = pages.map(html => {
+        const $ = cheerio.load(html);
+        // react.dev should always have at least one <article> with the main content
+        const article = $('article').html();
+        if (article != null) {
+          return {
+            type: 'text' as const,
+            text: convert(article),
+          };
+        } else {
+          return {
+            type: 'text' as const,
+            // Fallback to converting the whole page to text.
+            text: convert($.html()),
+          };
+        }
+      });
+      return {
+        content,
+      };
+    } catch (err) {
+      return {
+        isError: true,
+        content: [{type: 'text' as const, text: `Error: ${err.stack}`}],
+      };
+    }
+  },
+);
+
+server.tool(
+  'compile',
+  `Compile code with React Compiler. This tool will return the compiled output, which is automatically memoized React components and hooks, written in JavaScript or TypeScript. You can run this tool whenever you want to check if some React code will compile successfully. You can also run this tool every time you make a suggestion to code, to see how it affects the compiled output. If the compiler returns a diagnostic message, you should read the diagnostic message and try to fix the code and run the compiler again to verify. After compiling code successfully, you should run it through the review-react-runtime to verify the compiled code is faster than the original.
+
+  <bailouts>
+  When you encounter a bailout or diagnostic message, first think and try to understand where the error is coming from. You can use tools such as puppeteer if available to browse the documentation links provided in the diagnostic, and then read that information to understand the error in more detail. You can propose fixes after doing so.
+
+  This is a non-exhaustive list of bailouts where you should take specific actions:
+  - React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved: fix this by first removing the manual memo (useMemo/useCallback) and then try compiling again. use the review-react-runtime tool to verify that the compiled code can run without crashing. if it crashes, the original code likely breaks the Rules of React and so cannot be safely compiled.
+  </bailouts>
+  `,
+  {
+    text: z.string(),
+    passName: z.enum(['HIR', 'ReactiveFunction', 'All', '@DEBUG']).optional(),
+  },
+  async ({text, passName}) => {
+    const pipelinePasses = new Map<
+      string,
+      Array<PrintedCompilerPipelineValue>
+    >();
+    const recordPass: (
+      result: PrintedCompilerPipelineValue,
+    ) => void = result => {
+      const entry = pipelinePasses.get(result.name);
+      if (Array.isArray(entry)) {
+        entry.push(result);
+      } else {
+        pipelinePasses.set(result.name, [result]);
+      }
+    };
+    const logIR = (result: CompilerPipelineValue): void => {
+      switch (result.kind) {
+        case 'ast': {
+          break;
+        }
+        case 'hir': {
+          recordPass({
+            kind: 'hir',
+            fnName: result.value.id,
+            name: result.name,
+            value: printFunctionWithOutlined(result.value),
+          });
+          break;
+        }
+        case 'reactive': {
+          recordPass({
+            kind: 'reactive',
+            fnName: result.value.id,
+            name: result.name,
+            value: printReactiveFunctionWithOutlined(result.value),
+          });
+          break;
+        }
+        case 'debug': {
+          recordPass({
+            kind: 'debug',
+            fnName: null,
+            name: result.name,
+            value: result.value,
+          });
+          break;
+        }
+        default: {
+          assertExhaustive(result, `Unhandled result ${result}`);
+        }
+      }
+    };
+    const errors: Array<{message: string; loc: SourceLocation | null}> = [];
+    const compilerOptions: PluginOptions = {
+      panicThreshold: 'none',
+      logger: {
+        debugLogIRs: logIR,
+        logEvent: (_filename, event): void => {
+          if (event.kind === 'CompileError') {
+            const detail = event.detail;
+            const loc =
+              detail.loc == null || typeof detail.loc == 'symbol'
+                ? event.fnLoc
+                : detail.loc;
+            errors.push({
+              message: detail.reason,
+              loc,
+            });
+          }
+        },
+      },
+    };
+    try {
+      const result = await compile({
+        text,
+        file: 'anonymous.tsx',
+        options: compilerOptions,
+      });
+      if (result.code == null) {
+        return {
+          isError: true,
+          content: [{type: 'text' as const, text: 'Error: Could not compile'}],
+        };
+      }
+      const requestedPasses: Array<{type: 'text'; text: string}> = [];
+      if (passName != null) {
+        switch (passName) {
+          case 'All': {
+            const hir = pipelinePasses.get('PropagateScopeDependenciesHIR');
+            if (hir !== undefined) {
+              for (const pipelineValue of hir) {
+                requestedPasses.push({
+                  type: 'text' as const,
+                  text: pipelineValue.value,
+                });
+              }
+            }
+            const reactiveFunc = pipelinePasses.get('PruneHoistedContexts');
+            if (reactiveFunc !== undefined) {
+              for (const pipelineValue of reactiveFunc) {
+                requestedPasses.push({
+                  type: 'text' as const,
+                  text: pipelineValue.value,
+                });
+              }
+            }
+            break;
+          }
+          case 'HIR': {
+            // Last pass before HIR -> ReactiveFunction
+            const requestedPass = pipelinePasses.get(
+              'PropagateScopeDependenciesHIR',
+            );
+            if (requestedPass !== undefined) {
+              for (const pipelineValue of requestedPass) {
+                requestedPasses.push({
+                  type: 'text' as const,
+                  text: pipelineValue.value,
+                });
+              }
+            } else {
+              console.error(`Could not find requested pass ${passName}`);
+            }
+            break;
+          }
+          case 'ReactiveFunction': {
+            // Last pass
+            const requestedPass = pipelinePasses.get('PruneHoistedContexts');
+            if (requestedPass !== undefined) {
+              for (const pipelineValue of requestedPass) {
+                requestedPasses.push({
+                  type: 'text' as const,
+                  text: pipelineValue.value,
+                });
+              }
+            } else {
+              console.error(`Could not find requested pass ${passName}`);
+            }
+            break;
+          }
+          case '@DEBUG': {
+            for (const [, pipelinePass] of pipelinePasses) {
+              for (const pass of pipelinePass) {
+                requestedPasses.push({
+                  type: 'text' as const,
+                  text: `${pass.name}\n\n${pass.value}`,
+                });
+              }
+            }
+            break;
+          }
+          default: {
+            assertExhaustive(
+              passName,
+              `Unhandled passName option: ${passName}`,
+            );
+          }
+        }
+        const requestedPass = pipelinePasses.get(passName);
+        if (requestedPass !== undefined) {
+          for (const pipelineValue of requestedPass) {
+            if (pipelineValue.name === passName) {
+              requestedPasses.push({
+                type: 'text' as const,
+                text: pipelineValue.value,
+              });
+            }
+          }
+        }
+      }
+      if (errors.length > 0) {
+        return {
+          content: errors.map(err => {
+            return {
+              type: 'text' as const,
+              text:
+                err.loc === null || typeof err.loc === 'symbol'
+                  ? `React Compiler bailed out:\n\n${err.message}`
+                  : `React Compiler bailed out:\n\n${err.message}@${err.loc.start.line}:${err.loc.end.line}`,
+            };
+          }),
+        };
+      }
+      return {
+        content: [
+          {type: 'text' as const, text: result.code},
+          ...requestedPasses,
+        ],
+      };
+    } catch (err) {
+      return {
+        isError: true,
+        content: [{type: 'text' as const, text: `Error: ${err.stack}`}],
+      };
+    }
+  },
+);
+
+server.tool(
+  'review-react-runtime',
+  `Run this tool every time you propose a performance related change to verify if your suggestion actually improves performance.
+
+  <requirements>
+  This tool has some requirements on the code input:
+  - The react code that is passed into this tool MUST contain an App functional component without arrow function.
+  - DO NOT export anything since we can't parse export syntax with this tool.
+  - Only import React from 'react' and use all hooks and imports using the React. prefix like React.useState and React.useEffect
+  </requirements>
+
+  <goals>
+  - LCP - loading speed: good ≤ 2.5 s, needs-improvement 2.5-4 s, poor > 4 s
+  - INP - input responsiveness: good ≤ 200 ms, needs-improvement 200-500 ms, poor > 500 ms
+  - CLS - visual stability: good ≤ 0.10, needs-improvement 0.10-0.25, poor > 0.25
+  - (Optional: FCP ≤ 1.8 s, TTFB ≤ 0.8 s)
+  </goals>
+
+  <evaluation>
+  Classify each metric with the thresholds above. Identify the worst category in the order poor > needs-improvement > good.
+  </evaluation>
+
+  <iterate>
+  (repeat until every metric is good or two consecutive cycles show no gain)
+  - Always run the tool once on the original code before any modification
+  - Run the tool again after making the modification, and apply one focused change based on the failing metric plus React-specific guidance:
+    - LCP: lazy-load off-screen images, inline critical CSS, preconnect, use React.lazy + Suspense for below-the-fold modules. if the user requests for it, use React Server Components for static content (Server Components).
+    - INP: wrap non-critical updates in useTransition, avoid calling setState inside useEffect.
+    - CLS: reserve space via explicit width/height or aspect-ratio, keep stable list keys, use fixed-size skeleton loaders, animate only transform/opacity, avoid inserting ads or banners without placeholders.
+  - Compare the results of your modified code compared to the original to verify that your changes have improved performance.
+  </iterate>
+  `,
+  {
+    text: z.string(),
+    iterations: z.number().optional().default(2),
+  },
+  async ({text, iterations}) => {
+    try {
+      const results = await measurePerformance(text, iterations);
+      const formattedResults = `
+# React Component Performance Results
+
+## Mean Render Time
+${calculateMean(results.renderTime)}
+
+## Mean Web Vitals
+- Cumulative Layout Shift (CLS): ${calculateMean(results.webVitals.cls)}
+- Largest Contentful Paint (LCP): ${calculateMean(results.webVitals.lcp)}
+- Interaction to Next Paint (INP): ${calculateMean(results.webVitals.inp)}
+
+## Mean React Profiler
+- Actual Duration: ${calculateMean(results.reactProfiler.actualDuration)}
+- Base Duration: ${calculateMean(results.reactProfiler.baseDuration)}
+`;
+
+      return {
+        content: [
+          {
+            type: 'text' as const,
+            text: formattedResults,
+          },
+        ],
+      };
+    } catch (error) {
+      return {
+        isError: true,
+        content: [
+          {
+            type: 'text' as const,
+            text: `Error measuring performance: ${error.message}\n\n${error.stack}`,
+          },
+        ],
+      };
+    }
+  },
+);
+
+server.tool(
+  'parse-react-component-tree',
+  `
+  This tool gets the component tree of a React App.
+  passing in a url will attempt to connect to the browser and get the current state of the component tree. If no url is passed in,
+  the default url will be used (http://localhost:3000).
+
+  <requirements>
+  - The url should be a full url with the protocol (http:// or https://) and the domain name (e.g. localhost:3000).
+  - Also the user should be running a Chrome browser running on debug mode on port 9222. If you receive an error message, advise the user to run
+  the following comand in the terminal:
+  MacOS: "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome"
+  Windows: "chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\temp\chrome"
+  </requirements>
+  `,
+  {
+    url: z.string().optional().default('http://localhost:3000'),
+  },
+  async ({url}) => {
+    try {
+      const componentTree = await parseReactComponentTree(url);
+
+      return {
+        content: [
+          {
+            type: 'text' as const,
+            text: componentTree,
+          },
+        ],
+      };
+    } catch (err) {
+      return {
+        isError: true,
+        content: [{type: 'text' as const, text: `Error: ${err.stack}`}],
+      };
+    }
+  },
+);
+
+server.prompt('review-react-code', () => ({
+  messages: [
+    {
+      role: 'assistant',
+      content: {
+        type: 'text',
+        text: `
+## Role
+You are a React assistant that helps users write more efficient and optimizable React code. You specialize in identifying patterns that enable React Compiler to automatically apply optimizations, reducing unnecessary re-renders and improving application performance.
+
+## Follow these guidelines in all code you produce and suggest
+Use functional components with Hooks: Do not generate class components or use old lifecycle methods. Manage state with useState or useReducer, and side effects with useEffect (or related Hooks). Always prefer functions and Hooks for any new component logic.
+
+Keep components pure and side-effect-free during rendering: Do not produce code that performs side effects (like subscriptions, network requests, or modifying external variables) directly inside the component's function body. Such actions should be wrapped in useEffect or performed in event handlers. Ensure your render logic is a pure function of props and state.
+
+Respect one-way data flow: Pass data down through props and avoid any global mutations. If two components need to share data, lift that state up to a common parent or use React Context, rather than trying to sync local state or use external variables.
+
+Never mutate state directly: Always generate code that updates state immutably. For example, use spread syntax or other methods to create new objects/arrays when updating state. Do not use assignments like state.someValue = ... or array mutations like array.push() on state variables. Use the state setter (setState from useState, etc.) to update state.
+
+Accurately use useEffect and other effect Hooks: whenever you think you could useEffect, think and reason harder to avoid it. useEffect is primarily only used for synchronization, for example synchronizing React with some external state. IMPORTANT - Don't setState (the 2nd value returned by useState) within a useEffect as that will degrade performance. When writing effects, include all necessary dependencies in the dependency array. Do not suppress ESLint rules or omit dependencies that the effect's code uses. Structure the effect callbacks to handle changing values properly (e.g., update subscriptions on prop changes, clean up on unmount or dependency change). If a piece of logic should only run in response to a user action (like a form submission or button click), put that logic in an event handler, not in a useEffect. Where possible, useEffects should return a cleanup function.
+
+Follow the Rules of Hooks: Ensure that any Hooks (useState, useEffect, useContext, custom Hooks, etc.) are called unconditionally at the top level of React function components or other Hooks. Do not generate code that calls Hooks inside loops, conditional statements, or nested helper functions. Do not call Hooks in non-component functions or outside the React component rendering context.
+
+Use refs only when necessary: Avoid using useRef unless the task genuinely requires it (such as focusing a control, managing an animation, or integrating with a non-React library). Do not use refs to store application state that should be reactive. If you do use refs, never write to or read from ref.current during the rendering of a component (except for initial setup like lazy initialization). Any ref usage should not affect the rendered output directly.
+
+Prefer composition and small components: Break down UI into small, reusable components rather than writing large monolithic components. The code you generate should promote clarity and reusability by composing components together. Similarly, abstract repetitive logic into custom Hooks when appropriate to avoid duplicating code.
+
+Optimize for concurrency: Assume React may render your components multiple times for scheduling purposes (especially in development with Strict Mode). Write code that remains correct even if the component function runs more than once. For instance, avoid side effects in the component body and use functional state updates (e.g., setCount(c => c + 1)) when updating state based on previous state to prevent race conditions. Always include cleanup functions in effects that subscribe to external resources. Don't write useEffects for "do this when this changes" side-effects. This ensures your generated code will work with React's concurrent rendering features without issues.
+
+Optimize to reduce network waterfalls - Use parallel data fetching wherever possible (e.g., start multiple requests at once rather than one after another). Leverage Suspense for data loading and keep requests co-located with the component that needs the data. In a server-centric approach, fetch related data together in a single request on the server side (using Server Components, for example) to reduce round trips. Also, consider using caching layers or global fetch management to avoid repeating identical requests.
+
+Rely on React Compiler - useMemo, useCallback, and React.memo can be omitted if React Compiler is enabled. Avoid premature optimization with manual memoization. Instead, focus on writing clear, simple components with direct data flow and side-effect-free render functions. Let the React Compiler handle tree-shaking, inlining, and other performance enhancements to keep your code base simpler and more maintainable.
+
+Design for a good user experience - Provide clear, minimal, and non-blocking UI states. When data is loading, show lightweight placeholders (e.g., skeleton screens) rather than intrusive spinners everywhere. Handle errors gracefully with a dedicated error boundary or a friendly inline message. Where possible, render partial data as it becomes available rather than making the user wait for everything. Suspense allows you to declare the loading states in your component tree in a natural way, preventing “flash” states and improving perceived performance.
+
+Server Components - Shift data-heavy logic to the server whenever possible. Break up the more static parts of the app into server components. Break up data fetching into server components. Only client components (denoted by the 'use client' top level directive) need interactivity. By rendering parts of your UI on the server, you reduce the client-side JavaScript needed and avoid sending unnecessary data over the wire. Use Server Components to prefetch and pre-render data, allowing faster initial loads and smaller bundle sizes. This also helps manage or eliminate certain waterfalls by resolving data on the server before streaming the HTML (and partial React tree) to the client.
+
+## Available Tools
+- 'docs': Look up documentation from react.dev. Returns text as a string.
+- 'compile': Run the user's code through React Compiler. Returns optimized JS/TS code with potential diagnostics.
+
+## Process
+1. Analyze the user's code for optimization opportunities:
+   - Check for React anti-patterns that prevent compiler optimization
+   - Identify unnecessary manual optimizations (useMemo, useCallback, React.memo) that the compiler can handle
+   - Look for component structure issues that limit compiler effectiveness
+   - Think about each suggestion you are making and consult React docs using the docs://{query} resource for best practices
+
+2. Use React Compiler to verify optimization potential:
+   - Run the code through the compiler and analyze the output
+   - You can run the compiler multiple times to verify your work
+   - Check for successful optimization by looking for const $ = _c(n) cache entries, where n is an integer
+   - Identify bailout messages that indicate where code could be improved
+   - Compare before/after optimization potential
+
+3. Provide actionable guidance:
+   - Explain specific code changes with clear reasoning
+   - Show before/after examples when suggesting changes
+   - Include compiler results to demonstrate the impact of optimizations
+   - Only suggest changes that meaningfully improve optimization potential
+
+## Optimization Guidelines
+- Avoid mutation of values that are memoized by the compiler
+- State updates should be structured to enable granular updates
+- Side effects should be isolated and dependencies clearly defined
+- The compiler automatically inserts memoization, so manually added useMemo/useCallback/React.memo can often be removed
+
+## Understanding Compiler Output
+- Successful optimization adds import { c as _c } from "react/compiler-runtime";
+- Successful optimization initializes a constant sized cache with const $ = _c(n), where n is the size of the cache as an integer
+- When suggesting changes, try to increase or decrease the number of cached expressions (visible in const $ = _c(n))
+  - Increase: more memoization coverage
+  - Decrease: if there are unnecessary dependencies, less dependencies mean less re-rendering
+`,
+      },
+    },
+  ],
+}));
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error('React Compiler MCP Server running on stdio');
+}
+
+main().catch(error => {
+  console.error('Fatal error in main():', error);
+  process.exit(1);
+});
diff --git a/compiler/packages/react-mcp-server/src/tools/componentTree.ts b/compiler/packages/react-mcp-server/src/tools/componentTree.ts
new file mode 100644
index 00000000000..a124066a942
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/tools/componentTree.ts
@@ -0,0 +1,38 @@
+import puppeteer from 'puppeteer';
+
+export async function parseReactComponentTree(url: string): Promise<string> {
+  try {
+    const browser = await puppeteer.connect({
+      browserURL: 'http://127.0.0.1:9222',
+      defaultViewport: null,
+    });
+
+    const pages = await browser.pages();
+
+    let localhostPage = null;
+    for (const page of pages) {
+      const pageUrl = await page.url();
+
+      if (pageUrl.startsWith(url)) {
+        localhostPage = page;
+        break;
+      }
+    }
+
+    if (localhostPage) {
+      const componentTree = await localhostPage.evaluate(() => {
+        return (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces
+          .get(1)
+          .__internal_only_getComponentTree();
+      });
+
+      return componentTree;
+    } else {
+      throw new Error(
+        `Could not open the page at ${url}. Is your server running?`,
+      );
+    }
+  } catch (error) {
+    throw new Error('Failed extract component tree' + error);
+  }
+}
diff --git a/compiler/packages/react-mcp-server/src/tools/runtimePerf.ts b/compiler/packages/react-mcp-server/src/tools/runtimePerf.ts
new file mode 100644
index 00000000000..30badc833d6
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/tools/runtimePerf.ts
@@ -0,0 +1,285 @@
+import * as babel from '@babel/core';
+import puppeteer from 'puppeteer';
+// @ts-ignore
+import * as babelPresetTypescript from '@babel/preset-typescript';
+// @ts-ignore
+import * as babelPresetEnv from '@babel/preset-env';
+// @ts-ignore
+import * as babelPresetReact from '@babel/preset-react';
+
+type PerformanceResults = {
+  renderTime: number[];
+  webVitals: {
+    cls: number[];
+    lcp: number[];
+    inp: number[];
+    fid: number[];
+    ttfb: number[];
+  };
+  reactProfiler: {
+    id: number[];
+    phase: number[];
+    actualDuration: number[];
+    baseDuration: number[];
+    startTime: number[];
+    commitTime: number[];
+  };
+  error: Error | null;
+};
+
+type EvaluationResults = {
+  renderTime: number | null;
+  webVitals: {
+    cls: number | null;
+    lcp: number | null;
+    inp: number | null;
+    fid: number | null;
+    ttfb: number | null;
+  };
+  reactProfiler: {
+    id: number | null;
+    phase: number | null;
+    actualDuration: number | null;
+    baseDuration: number | null;
+    startTime: number | null;
+    commitTime: number | null;
+  };
+  error: Error | null;
+};
+
+function delay(time: number) {
+  return new Promise(function (resolve) {
+    setTimeout(resolve, time);
+  });
+}
+
+export async function measurePerformance(
+  code: string,
+  iterations: number,
+): Promise<PerformanceResults> {
+  const babelOptions: babel.TransformOptions = {
+    filename: 'anonymous.tsx',
+    configFile: false,
+    babelrc: false,
+    presets: [babelPresetTypescript, babelPresetEnv, babelPresetReact],
+  };
+
+  const parsed = await babel.parseAsync(code, babelOptions);
+  if (!parsed) {
+    throw new Error('Failed to parse code');
+  }
+
+  const transformResult = await babel.transformFromAstAsync(parsed, undefined, {
+    ...babelOptions,
+    plugins: [
+      () => ({
+        visitor: {
+          ImportDeclaration(
+            path: babel.NodePath<babel.types.ImportDeclaration>,
+          ) {
+            const value = path.node.source.value;
+            if (value === 'react' || value === 'react-dom') {
+              path.remove();
+            }
+          },
+        },
+      }),
+    ],
+  });
+
+  const transpiled = transformResult?.code || undefined;
+  if (!transpiled) {
+    throw new Error('Failed to transpile code');
+  }
+
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+  await page.setViewport({width: 1280, height: 720});
+  const html = buildHtml(transpiled);
+
+  let performanceResults: PerformanceResults = {
+    renderTime: [],
+    webVitals: {
+      cls: [],
+      lcp: [],
+      inp: [],
+      fid: [],
+      ttfb: [],
+    },
+    reactProfiler: {
+      id: [],
+      phase: [],
+      actualDuration: [],
+      baseDuration: [],
+      startTime: [],
+      commitTime: [],
+    },
+    error: null,
+  };
+
+  for (let ii = 0; ii < iterations; ii++) {
+    await page.setContent(html, {waitUntil: 'networkidle0'});
+    await page.waitForFunction(
+      'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)',
+    );
+
+    // ui chaos monkey
+    const selectors = await page.evaluate(() => {
+      window.__INTERACTABLE_SELECTORS__ = [];
+      const elements = Array.from(document.querySelectorAll('a')).concat(
+        Array.from(document.querySelectorAll('button')),
+      );
+      for (const el of elements) {
+        window.__INTERACTABLE_SELECTORS__.push(el.tagName.toLowerCase());
+      }
+      return window.__INTERACTABLE_SELECTORS__;
+    });
+
+    await Promise.all(
+      selectors.map(async (selector: string) => {
+        try {
+          await page.click(selector);
+        } catch (e) {
+          console.log(`warning: Could not click ${selector}: ${e.message}`);
+        }
+      }),
+    );
+    await delay(500);
+
+    // Visit a new page for 1s to background the current page so that WebVitals can finish being calculated
+    const tempPage = await browser.newPage();
+    await tempPage.evaluate(() => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(true);
+        }, 1000);
+      });
+    });
+    await tempPage.close();
+
+    const evaluationResult: EvaluationResults = await page.evaluate(() => {
+      return (window as any).__RESULT__;
+    });
+
+    if (evaluationResult.renderTime !== null) {
+      performanceResults.renderTime.push(evaluationResult.renderTime);
+    }
+
+    const webVitalMetrics = ['cls', 'lcp', 'inp', 'fid', 'ttfb'] as const;
+    for (const metric of webVitalMetrics) {
+      if (evaluationResult.webVitals[metric] !== null) {
+        performanceResults.webVitals[metric].push(
+          evaluationResult.webVitals[metric],
+        );
+      }
+    }
+
+    const profilerMetrics = [
+      'id',
+      'phase',
+      'actualDuration',
+      'baseDuration',
+      'startTime',
+      'commitTime',
+    ] as const;
+    for (const metric of profilerMetrics) {
+      if (evaluationResult.reactProfiler[metric] !== null) {
+        performanceResults.reactProfiler[metric].push(
+          evaluationResult.reactProfiler[metric],
+        );
+      }
+    }
+
+    performanceResults.error = evaluationResult.error;
+  }
+
+  await browser.close();
+
+  return performanceResults;
+}
+
+function buildHtml(transpiled: string) {
+  const html = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>React Performance Test</title>
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/web-vitals@3.0.0/dist/web-vitals.iife.js"></script>
+  <style>
+    body { margin: 0; }
+    #root { padding: 20px; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    window.__RESULT__ = {
+      renderTime: null,
+      webVitals: {},
+      reactProfiler: {},
+      error: null,
+    };
+
+    webVitals.onCLS(({value}) => { window.__RESULT__.webVitals.cls = value; });
+    webVitals.onLCP(({value}) => { window.__RESULT__.webVitals.lcp = value; });
+    webVitals.onINP(({value}) => { window.__RESULT__.webVitals.inp = value; });
+    webVitals.onFID(({value}) => { window.__RESULT__.webVitals.fid = value; });
+    webVitals.onTTFB(({value}) => { window.__RESULT__.webVitals.ttfb = value; });
+
+    try {
+      ${transpiled}
+
+      window.App = App;
+
+      // Render the component to the DOM with profiling
+      const AppComponent = window.App || (() => React.createElement('div', null, 'No App component exported'));
+
+      const root = ReactDOM.createRoot(document.getElementById('root'), {
+        onUncaughtError: (error, errorInfo) => {
+          window.__RESULT__.error = error;
+        }
+      });
+
+      const renderStart = performance.now()
+
+      root.render(
+        React.createElement(React.Profiler, {
+          id: 'App',
+          onRender: (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+            window.__RESULT__.reactProfiler.id = id;
+            window.__RESULT__.reactProfiler.phase = phase;
+            window.__RESULT__.reactProfiler.actualDuration = actualDuration;
+            window.__RESULT__.reactProfiler.baseDuration = baseDuration;
+            window.__RESULT__.reactProfiler.startTime = startTime;
+            window.__RESULT__.reactProfiler.commitTime = commitTime;
+          }
+        }, React.createElement(AppComponent))
+      );
+
+      const renderEnd = performance.now();
+
+      window.__RESULT__.renderTime = renderEnd - renderStart;
+    } catch (error) {
+      console.error('Error rendering component:', error);
+      window.__RESULT__.error = error;
+    }
+  </script>
+  <script>
+    window.onerror = function(message, url, lineNumber) {
+      const formattedMessage = message + '@' + lineNumber;
+      if (window.__RESULT__.error && window.__RESULT__.error.message != null) {
+        window.__RESULT__.error = window.__RESULT__.error + '\n\n' + formattedMessage;
+      } else {
+        window.__RESULT__.error = message + formattedMessage;
+      }
+    };
+  </script>
+</body>
+</html>
+`;
+
+  return html;
+}
diff --git a/compiler/packages/react-mcp-server/src/types/algolia.ts b/compiler/packages/react-mcp-server/src/types/algolia.ts
new file mode 100644
index 00000000000..1921dd3f718
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/types/algolia.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// https://github.com/algolia/docsearch/blob/15ebcba606b281aa0dddc4ccb8feb19d396bf79e/packages/docsearch-react/src/types/DocSearchHit.ts
+type ContentType =
+  | 'content'
+  | 'lvl0'
+  | 'lvl1'
+  | 'lvl2'
+  | 'lvl3'
+  | 'lvl4'
+  | 'lvl5'
+  | 'lvl6';
+
+interface DocSearchHitAttributeHighlightResult {
+  value: string;
+  matchLevel: 'full' | 'none' | 'partial';
+  matchedWords: string[];
+  fullyHighlighted?: boolean;
+}
+
+interface DocSearchHitHighlightResultHierarchy {
+  lvl0: DocSearchHitAttributeHighlightResult;
+  lvl1: DocSearchHitAttributeHighlightResult;
+  lvl2: DocSearchHitAttributeHighlightResult;
+  lvl3: DocSearchHitAttributeHighlightResult;
+  lvl4: DocSearchHitAttributeHighlightResult;
+  lvl5: DocSearchHitAttributeHighlightResult;
+  lvl6: DocSearchHitAttributeHighlightResult;
+}
+
+interface DocSearchHitHighlightResult {
+  content: DocSearchHitAttributeHighlightResult;
+  hierarchy: DocSearchHitHighlightResultHierarchy;
+  hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
+}
+
+interface DocSearchHitAttributeSnippetResult {
+  value: string;
+  matchLevel: 'full' | 'none' | 'partial';
+}
+
+interface DocSearchHitSnippetResult {
+  content: DocSearchHitAttributeSnippetResult;
+  hierarchy: DocSearchHitHighlightResultHierarchy;
+  hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
+}
+
+export declare type DocSearchHit = {
+  objectID: string;
+  content: string | null;
+  url: string;
+  url_without_anchor: string;
+  type: ContentType;
+  anchor: string | null;
+  hierarchy: {
+    lvl0: string;
+    lvl1: string;
+    lvl2: string | null;
+    lvl3: string | null;
+    lvl4: string | null;
+    lvl5: string | null;
+    lvl6: string | null;
+  };
+  _highlightResult: DocSearchHitHighlightResult;
+  _snippetResult: DocSearchHitSnippetResult;
+  _rankingInfo?: {
+    promoted: boolean;
+    nbTypos: number;
+    firstMatchedWord: number;
+    proximityDistance?: number;
+    geoDistance: number;
+    geoPrecision?: number;
+    nbExactWords: number;
+    words: number;
+    filters: number;
+    userScore: number;
+    matchedGeoLocation?: {
+      lat: number;
+      lng: number;
+      distance: number;
+    };
+  };
+  _distinctSeqID?: number;
+  __autocomplete_indexName?: string;
+  __autocomplete_queryID?: string;
+  __autocomplete_algoliaCredentials?: {
+    appId: string;
+    apiKey: string;
+  };
+  __autocomplete_id?: number;
+};
+
+export type InternalDocSearchHit = DocSearchHit & {
+  __docsearch_parent: InternalDocSearchHit | null;
+};
diff --git a/compiler/packages/react-mcp-server/src/utils/algolia.ts b/compiler/packages/react-mcp-server/src/utils/algolia.ts
new file mode 100644
index 00000000000..cfc08022db9
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/utils/algolia.ts
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {DocSearchHit, InternalDocSearchHit} from '../types/algolia';
+import {liteClient, type Hit, type SearchResponse} from 'algoliasearch/lite';
+
+// https://github.com/reactjs/react.dev/blob/55986965fbf69c2584040039c9586a01bd54eba7/src/siteConfig.js#L15-L19
+const ALGOLIA_CONFIG = {
+  appId: '1FCF9AYYAT',
+  apiKey: '1b7ad4e1c89e645e351e59d40544eda1',
+  indexName: 'beta-react',
+};
+
+export const ALGOLIA_CLIENT = liteClient(
+  ALGOLIA_CONFIG.appId,
+  ALGOLIA_CONFIG.apiKey,
+);
+
+export function printHierarchy(
+  hit: DocSearchHit | InternalDocSearchHit,
+): string {
+  let val = `${hit.hierarchy.lvl0} > ${hit.hierarchy.lvl1}`;
+  if (hit.hierarchy.lvl2 != null) {
+    val = val.concat(` > ${hit.hierarchy.lvl2}`);
+  }
+  if (hit.hierarchy.lvl3 != null) {
+    val = val.concat(` > ${hit.hierarchy.lvl3}`);
+  }
+  if (hit.hierarchy.lvl4 != null) {
+    val = val.concat(` > ${hit.hierarchy.lvl4}`);
+  }
+  if (hit.hierarchy.lvl5 != null) {
+    val = val.concat(` > ${hit.hierarchy.lvl5}`);
+  }
+  if (hit.hierarchy.lvl6 != null) {
+    val = val.concat(` > ${hit.hierarchy.lvl6}`);
+  }
+  return val;
+}
+
+export async function queryAlgolia(
+  message: string | Array<string>,
+): Promise<Array<string>> {
+  const {results} = await ALGOLIA_CLIENT.search<DocSearchHit>({
+    requests: [
+      {
+        query: Array.isArray(message) ? message.join('\n') : message,
+        indexName: ALGOLIA_CONFIG.indexName,
+        attributesToRetrieve: [
+          'hierarchy.lvl0',
+          'hierarchy.lvl1',
+          'hierarchy.lvl2',
+          'hierarchy.lvl3',
+          'hierarchy.lvl4',
+          'hierarchy.lvl5',
+          'hierarchy.lvl6',
+          'content',
+          'url',
+        ],
+        attributesToSnippet: [
+          `hierarchy.lvl1:10`,
+          `hierarchy.lvl2:10`,
+          `hierarchy.lvl3:10`,
+          `hierarchy.lvl4:10`,
+          `hierarchy.lvl5:10`,
+          `hierarchy.lvl6:10`,
+          `content:10`,
+        ],
+        snippetEllipsisText: '…',
+        hitsPerPage: 30,
+        attributesToHighlight: [
+          'hierarchy.lvl0',
+          'hierarchy.lvl1',
+          'hierarchy.lvl2',
+          'hierarchy.lvl3',
+          'hierarchy.lvl4',
+          'hierarchy.lvl5',
+          'hierarchy.lvl6',
+          'content',
+        ],
+      },
+    ],
+  });
+  const firstResult = results[0] as SearchResponse<DocSearchHit>;
+  const {hits} = firstResult;
+  const deduped = new Map();
+  for (const hit of hits) {
+    // drop hashes to dedupe properly
+    const u = new URL(hit.url);
+    if (deduped.has(u.pathname)) {
+      continue;
+    }
+    deduped.set(u.pathname, hit);
+  }
+  const pages: Array<string | null> = await Promise.all(
+    Array.from(deduped.values()).map(hit => {
+      return fetch(hit.url, {
+        headers: {
+          'User-Agent':
+            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36',
+        },
+      }).then(res => {
+        if (res.ok === true) {
+          return res.text();
+        } else {
+          console.error(
+            `Could not fetch docs: ${res.status} ${res.statusText}`,
+          );
+          return null;
+        }
+      });
+    }),
+  );
+  return pages.filter(page => page !== null);
+}
diff --git a/compiler/packages/react-mcp-server/src/utils/assertExhaustive.ts b/compiler/packages/react-mcp-server/src/utils/assertExhaustive.ts
new file mode 100644
index 00000000000..2adfffa8d7e
--- /dev/null
+++ b/compiler/packages/react-mcp-server/src/utils/assertExhaustive.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Trigger an exhaustiveness check in TypeScript and throw at runtime.
+ */
+export default function assertExhaustive(_: never, errorMsg: string): never {
+  throw new Error(errorMsg);
+}
diff --git a/compiler/packages/react-mcp-server/todo.md b/compiler/packages/react-mcp-server/todo.md
new file mode 100644
index 00000000000..a7f0af9adbe
--- /dev/null
+++ b/compiler/packages/react-mcp-server/todo.md
@@ -0,0 +1,5 @@
+TODO
+
+- [ ] If code doesnt compile, read diagnostics and try again
+- [ ] Provide detailed examples in assistant prompt (use another LLM to generate good prompts, iterate from there)
+- [ ] Provide more tools for working with HIR/AST (eg so we can prompt it to try and optimize code via HIR, which it can then translate back into user code changes)
diff --git a/compiler/packages/react-mcp-server/tsconfig.json b/compiler/packages/react-mcp-server/tsconfig.json
new file mode 100644
index 00000000000..0de3a4a6151
--- /dev/null
+++ b/compiler/packages/react-mcp-server/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "rootDir": "../",
+    "noEmit": true,
+    "jsx": "react-jsxdev",
+    "lib": ["ES2022"],
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "target": "ES2022",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts"],
+}
diff --git a/compiler/packages/react-mcp-server/tsup.config.ts b/compiler/packages/react-mcp-server/tsup.config.ts
new file mode 100644
index 00000000000..820410e20f6
--- /dev/null
+++ b/compiler/packages/react-mcp-server/tsup.config.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig} from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  external: [],
+  splitting: false,
+  sourcemap: false,
+  dts: false,
+  bundle: true,
+  format: 'cjs',
+  platform: 'node',
+  target: 'es2022',
+  banner: {
+    js: `#!/usr/bin/env node
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */`,
+  },
+});
diff --git a/compiler/packages/snap/package.json b/compiler/packages/snap/package.json
new file mode 100644
index 00000000000..085422ab830
--- /dev/null
+++ b/compiler/packages/snap/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "snap",
+  "version": "0.0.1",
+  "public": false,
+  "description": "Snapshot testing CLI tool",
+  "main": "dist/main.js",
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "postinstall": "./scripts/link-react-compiler-runtime.sh && perl -p -i -e 's/react\\.element/react.transitional.element/' ../../node_modules/fbt/lib/FbtReactUtil.js && perl -p -i -e 's/didWarnAboutUsingAct = false;/didWarnAboutUsingAct = true;/' ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js",
+    "build": "rimraf dist && concurrently -n snap,runtime \"tsc --build\" \"yarn --silent workspace react-compiler-runtime build\"",
+    "snap": "node dist/main.js",
+    "test": "echo 'no tests'",
+    "prettier": "prettier --write 'src/**/*.ts'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react.git",
+    "directory": "compiler/packages/snap"
+  },
+  "dependencies": {
+    "@babel/code-frame": "^7.22.5",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/preset-flow": "^7.7.4",
+    "@babel/preset-typescript": "^7.26.0",
+    "@parcel/watcher": "^2.1.0",
+    "@testing-library/react": "^13.4.0",
+    "babel-plugin-idx": "^3.0.3",
+    "babel-plugin-syntax-hermes-parser": "^0.25.1",
+    "chalk": "4",
+    "fbt": "^1.0.2",
+    "glob": "^10.3.10",
+    "hermes-parser": "^0.25.1",
+    "jsdom": "^22.1.0",
+    "react": "0.0.0-experimental-4beb1fd8-20241118",
+    "react-dom": "0.0.0-experimental-4beb1fd8-20241118",
+    "readline": "^1.3.0",
+    "yargs": "^17.7.1",
+    "zod": "^3.25.0 || ^4.0.0",
+    "zod-validation-error": "^3.5.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/parser": "^7.20.15",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/traverse": "^7.19.1",
+    "@types/babel__code-frame": "^7.0.6",
+    "@types/fbt": "^1.0.4",
+    "@types/glob": "^8.1.0",
+    "@types/node": "^18.7.18",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "object-assign": "^4.1.1"
+  },
+  "resolutions": {
+    "./**/@babel/parser": "7.7.4",
+    "./**/@babel/types": "7.7.4",
+    "@babel/preset-flow": "7.22.5"
+  }
+}
diff --git a/compiler/packages/snap/scripts/link-react-compiler-runtime.sh b/compiler/packages/snap/scripts/link-react-compiler-runtime.sh
new file mode 100755
index 00000000000..83a30d41d7c
--- /dev/null
+++ b/compiler/packages/snap/scripts/link-react-compiler-runtime.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+yarn --silent workspace react-compiler-runtime link
+yarn --silent workspace snap link react-compiler-runtime
diff --git a/compiler/packages/snap/src/SproutTodoFilter.ts b/compiler/packages/snap/src/SproutTodoFilter.ts
new file mode 100644
index 00000000000..531c3cf27f6
--- /dev/null
+++ b/compiler/packages/snap/src/SproutTodoFilter.ts
@@ -0,0 +1,499 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const skipFilter = new Set([
+  /**
+   * Observable different in logging between Forget and non-Forget
+   */
+  'early-return-no-declarations-reassignments-dependencies',
+
+  /**
+   * Category A:
+   * Tests with 0 parameters and 0 refs to external values
+   */
+  // TODO: fix invalid .set call
+  'assignment-variations-complex-lvalue-array',
+  // TODO: uses jsx (requires React)
+  'sketchy-code-rules-of-hooks',
+  // TODO: fix infinite loop
+  'ssa-for-trivial-update',
+  // TODO: fix infinite loop
+  'ssa-while-no-reassign',
+
+  /**
+   * Category B:
+   * Tests with at least one param and 0 refs to external values
+   */
+  'bug.useMemo-deps-array-not-cleared',
+  'capture_mutate-across-fns',
+  'capture-indirect-mutate-alias',
+  'capturing-arrow-function-1',
+  'capturing-func-mutate-3',
+  'capturing-func-mutate-nested',
+  'capturing-function-1',
+  'capturing-function-alias-computed-load',
+  'capturing-function-decl',
+  'capturing-function-skip-computed-path',
+  'capturing-function-within-block',
+  'capturing-member-expr',
+  'capturing-nested-member-call',
+  'capturing-nested-member-expr-in-nested-func',
+  'capturing-nested-member-expr',
+  'capturing-variable-in-nested-block',
+  'capturing-variable-in-nested-function',
+  'complex-while',
+  'component',
+  'cond-deps-conditional-member-expr',
+  'conditional-break-labeled',
+  'propagate-scope-deps-hir-fork/conditional-break-labeled',
+  'conditional-set-state-in-render',
+  'constant-computed',
+  'constant-propagation-phi',
+  'debugger-memoized',
+  'debugger',
+  'declare-reassign-variable-in-closure',
+  'delete-computed-property',
+  'delete-property',
+  'dependencies-outputs',
+  'dependencies',
+  'destructure-direct-reassignment',
+  'destructuring-array-default',
+  'destructuring-array-param-default',
+  'destructuring-assignment-array-default',
+  'destructuring-assignment',
+  'destructuring-object-default',
+  'destructuring-object-param-default',
+  'destructuring',
+  'disable-jsx-memoization',
+  'do-while-break',
+  'do-while-compound-test',
+  'dominator',
+  'early-return',
+  'escape-analysis-destructured-rest-element',
+  'escape-analysis-jsx-child',
+  'escape-analysis-logical',
+  'escape-analysis-non-escaping-interleaved-allocating-dependency',
+  'escape-analysis-non-escaping-interleaved-allocating-nested-dependency',
+  'escape-analysis-non-escaping-interleaved-primitive-dependency',
+  'escape-analysis-not-conditional-test',
+  'escape-analysis-not-if-test',
+  'escape-analysis-not-switch-case',
+  'escape-analysis-not-switch-test',
+  'expression-with-assignment-dynamic',
+  'extend-scopes-if',
+  'fbt/fbt-params',
+  'for-empty-update-with-continue',
+  'for-empty-update',
+  'for-logical',
+  'for-return',
+  'function-declaration-simple',
+  'function-param-assignment-pattern',
+  'globals-Boolean',
+  'globals-Number',
+  'globals-String',
+  'holey-array-pattern-dce-2',
+  'holey-array-pattern-dce',
+  'holey-array',
+  'independently-memoize-object-property',
+  'inverted-if-else',
+  'inverted-if',
+  'jsx-empty-expression',
+  'jsx-fragment',
+  'jsx-namespaced-name',
+  'lambda-mutated-non-reactive-to-reactive',
+  'lambda-mutated-ref-non-reactive',
+  'logical-expression-object',
+  'logical-expression',
+  'nested-function-shadowed-identifiers',
+  'nonoptional-load-from-optional-memberexpr',
+  'object-computed-access-assignment',
+  'object-expression-string-literal-key',
+  'object-literal-spread-element',
+  'object-pattern-params',
+  'optional-member-expression-chain',
+  'overlapping-scopes-interleaved-by-terminal',
+  'overlapping-scopes-interleaved',
+  'overlapping-scopes-shadowed',
+  'overlapping-scopes-shadowing-within-block',
+  'overlapping-scopes-while',
+  'overlapping-scopes-within-block',
+  'prop-capturing-function-1',
+  'reactive-scopes-if',
+  'reactive-scopes',
+  'reactivity-analysis-interleaved-reactivity',
+  'reassign-object-in-context',
+  'reassignment-separate-scopes',
+  'return-conditional',
+  'return-undefined',
+  'reverse-postorder',
+  'same-variable-as-dep-and-redeclare-maybe-frozen',
+  'same-variable-as-dep-and-redeclare',
+  'simple-scope',
+  'ssa-arrayexpression',
+  'ssa-for-of',
+  'ssa-multiple-phis',
+  'ssa-nested-loops-no-reassign',
+  'ssa-nested-partial-phi',
+  'ssa-nested-partial-reassignment',
+  'ssa-non-empty-initializer',
+  'ssa-objectexpression',
+  'ssa-property-alias-if',
+  'ssa-reassign',
+  'ssa-renaming-via-destructuring',
+  'ssa-renaming',
+  'ssa-sibling-phis',
+  'switch-with-fallthrough',
+  'ternary-assignment-expression',
+  'ternary-expression',
+  'trivial',
+  'type-args-test-binary-operator',
+  'type-cast-expression.flow',
+  'unary-expr',
+  'unconditional-break-label',
+  'unused-array-middle-element',
+  'unused-array-rest-element',
+  'unused-conditional',
+  'unused-logical',
+  'unused-object-element-with-rest',
+  'unused-object-element',
+  'useMemo-inlining-block-return',
+  'useMemo-inverted-if',
+  'useMemo-labeled-statement-unconditional-return',
+  'useMemo-logical',
+  'useMemo-nested-ifs',
+  'useMemo-switch-no-fallthrough',
+  'useMemo-switch-return',
+  'while-break',
+  'while-conditional-continue',
+  'while-logical',
+  'while-property',
+  'validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid',
+  // Category B with multiple entrypoints,
+  'conditional-break',
+
+  /**
+   * Category C:
+   * Tests with at 0 params and at least one ref to external values
+   */
+  'alias-capture-in-method-receiver',
+  'alias-nested-member-path-mutate',
+  'concise-arrow-expr',
+  'const-propagation-into-function-expression-global',
+  'lambda-mutate-shadowed-object',
+  'fbt/lambda-with-fbt',
+  'recursive-function-expr',
+  'ref-current-aliased-no-added-to-dep',
+  'ref-current-field-not-added-to-dep',
+  'ref-current-not-added-to-dep',
+  'ref-current-optional-field-no-added-to-dep',
+  'ref-current-write-not-added-to-dep',
+  'rewrite-phis-in-lambda-capture-context',
+  'sketchy-code-exhaustive-deps',
+  'ssa-property-alias-mutate',
+  'ssa-property-mutate-2',
+  'ssa-property-mutate-alias',
+  'ssa-property-mutate',
+  'ssa-reassign-in-rval',
+  'store-via-call',
+  'store-via-new',
+  'tagged-template-literal',
+  'transitive-alias-fields',
+  'type-binary-operator',
+  'type-test-field-load-binary-op',
+  'type-test-polymorphic',
+  'type-test-return-type-inference',
+  'use-callback-simple',
+  // defines two functions
+  'simple-alias',
+
+  /**
+   * Category D:
+   * Tests with one or more params, with external references.
+   */
+  'alias-computed-load',
+  'allocating-primitive-as-dep',
+  'allow-passing-refs-as-props',
+  'array-at-closure',
+  'array-at-effect',
+  'array-at-mutate-after-capture',
+  'array-join',
+  'array-push-effect',
+  'assignment-in-nested-if',
+  'await-side-effecting-promise',
+  'await',
+  'builtin-jsx-tag-lowered-between-mutations',
+  'call-args-assignment',
+  'call-args-destructuring-assignment',
+  'call-with-independently-memoizable-arg',
+  'capture-param-mutate',
+  'capturing-function-conditional-capture-mutate',
+  'capturing-function-member-expr-arguments',
+  'capturing-function-member-expr-call',
+  'codegen-emit-imports-same-source',
+  'codegen-emit-make-read-only',
+  'computed-call-spread',
+  'computed-load-primitive-as-dependency',
+  'destructuring-mixed-scope-declarations-and-locals',
+  'destructuring-property-inference',
+  'do-while-conditional-break',
+  'do-while-early-unconditional-break',
+  'fbt/fbt-params-complex-param-value',
+  'function-expression-captures-value-later-frozen-jsx',
+  'function-expression-maybe-mutates-hook-return-value',
+  'function-expression-with-store-to-parameter',
+  'global-jsx-tag-lowered-between-mutations',
+  'hook-inside-logical-expression',
+  'immutable-hooks',
+  'inadvertent-mutability-readonly-class',
+  'inadvertent-mutability-readonly-lambda',
+  'infer-computed-delete',
+  'infer-property-delete',
+  'inner-memo-value-not-promoted-to-outer-scope-dynamic',
+  'inner-memo-value-not-promoted-to-outer-scope-static',
+  'issue852',
+  'jsx-member-expression-tag-grouping',
+  'jsx-member-expression',
+  'jsx-spread',
+  'lambda-capture-returned-alias',
+  'method-call-computed',
+  'method-call-fn-call',
+  'nested-optional-member-expr',
+  'nested-scopes-hook-call',
+  'new-spread',
+  'obj-literal-cached-in-if-else',
+  'obj-literal-mutated-after-if-else',
+  'obj-mutated-after-if-else-with-alias',
+  'obj-mutated-after-if-else',
+  'obj-mutated-after-nested-if-else-with-alias',
+  'object-properties',
+  'optional-call-chained',
+  'optional-call-logical',
+  'optional-call-simple',
+  'optional-call-with-independently-memoizable-arg',
+  'optional-call-with-optional-property-load',
+  'optional-call',
+  'optional-computed-load-static',
+  'optional-computed-member-expression',
+  'optional-member-expression-call-as-property',
+  'optional-member-expression-with-optional-member-expr-as-property',
+  'optional-member-expression',
+  'optional-method-call',
+  'optional-receiver-method-call',
+  'optional-receiver-optional-method',
+  'primitive-alias-mutate',
+  'primitive-as-dep',
+  'property-assignment',
+  'property-call-spread',
+  'reactive-dependencies-non-optional-properties-inside-optional-chain',
+  'reactivity-analysis-reactive-via-mutation-of-computed-load',
+  'reactivity-analysis-reactive-via-mutation-of-property-load',
+  'reassigned-phi-in-returned-function-expression',
+  'reassignment-conditional',
+  'reassignment',
+  'ref-current-aliased-not-added-to-dep-2',
+  'ref-current-not-added-to-dep-2',
+  'ref-in-effect',
+  'regexp-literal',
+  'remove-memoization-kitchen-sink',
+  'repro-reassign-to-variable-without-mutable-range',
+  'repro-scope-missing-mutable-range',
+  'repro',
+  'simple',
+  'ssa-property-alias-alias-mutate-if',
+  'ssa-property-alias-mutate-if',
+  'ssa-property-alias-mutate-inside-if',
+  'switch-global-propertyload-case-test',
+  'switch-non-final-default',
+  'switch',
+  'tagged-template-in-hook',
+  'temporary-accessed-outside-scope',
+  'temporary-at-start-of-value-block',
+  'temporary-property-load-accessed-outside-scope',
+  'timers',
+  'todo-function-expression-captures-value-later-frozen',
+  'uninitialized-declaration-in-reactive-scope',
+  'unknown-hooks-do-not-assert',
+  'unused-logical-assigned-to-variable',
+  'unused-optional-method-assigned-to-variable',
+  'unused-ternary-assigned-to-variable',
+  'useEffect-arg-memoized',
+  'useEffect-nested-lambdas',
+  'useMemo-if-else-multiple-return',
+  'useMemo-independently-memoizeable',
+  'useMemo-named-function',
+  'useMemo-return-empty',
+  'useMemo-simple',
+  'use-no-forget-module-level',
+  'use-no-memo-module-level',
+  // defines multiple functions
+  'alias-while',
+  'babel-existing-react-import',
+  'babel-existing-react-kitchensink-import',
+  'call',
+  'codegen-instrument-forget-test',
+  'conditional-on-mutable',
+  'constructor',
+  'frozen-after-alias',
+  'hook-call',
+  'hooks-freeze-arguments',
+  'hooks-freeze-possibly-mutable-arguments',
+  'independent-across-if',
+  'independent',
+  'interdependent-across-if',
+  'interdependent',
+  'mutable-liverange-loop',
+  'sequence-expression',
+  'ssa-call-jsx-2',
+  'ssa-call-jsx',
+  'ssa-newexpression',
+  'ssa-shadowing',
+  'template-literal',
+
+  // works, but appears differently when printing
+  // due to optional function argument
+  'nested-function-with-param-as-captured-dep',
+  'deeply-nested-function-expressions-with-params',
+
+  // TODO: we should be able to support these
+  'readonly-object-method-calls',
+  'readonly-object-method-calls-mutable-lambda',
+  'preserve-memo-validation/useMemo-with-refs.flow',
+
+  // TODO: we probably want to always skip these
+  'rules-of-hooks/rules-of-hooks-0592bd574811',
+  'rules-of-hooks/rules-of-hooks-0e2214abc294',
+  'rules-of-hooks/rules-of-hooks-1ff6c3fbbc94',
+  'rules-of-hooks/rules-of-hooks-23dc7fffde57',
+  'rules-of-hooks/rules-of-hooks-2bec02ac982b',
+  'rules-of-hooks/rules-of-hooks-2e405c78cb80',
+  'rules-of-hooks/rules-of-hooks-33a6e23edac1',
+  'rules-of-hooks/rules-of-hooks-347b0dae66f1',
+  'rules-of-hooks/rules-of-hooks-485bf041f55f',
+  'rules-of-hooks/rules-of-hooks-4f6c78a14bf7',
+  'rules-of-hooks/rules-of-hooks-7e52f5eec669',
+  'rules-of-hooks/rules-of-hooks-844a496db20b',
+  'rules-of-hooks/rules-of-hooks-8f1c2c3f71c9',
+  'rules-of-hooks/rules-of-hooks-9a47e97b5d13',
+  'rules-of-hooks/rules-of-hooks-9d7879272ff6',
+  'rules-of-hooks/rules-of-hooks-c1e8c7f4c191',
+  'rules-of-hooks/rules-of-hooks-c5d1f3143c4c',
+  'rules-of-hooks/rules-of-hooks-cfdfe5572fc7',
+  'rules-of-hooks/rules-of-hooks-df4d750736f3',
+  'rules-of-hooks/rules-of-hooks-dfde14171fcd',
+  'rules-of-hooks/rules-of-hooks-e5dd6caf4084',
+  'rules-of-hooks/rules-of-hooks-e66a744cffbe',
+  'rules-of-hooks/rules-of-hooks-eacfcaa6ef89',
+  'rules-of-hooks/rules-of-hooks-fe6042f7628b',
+  'infer-function-assignment',
+  'infer-functions-component-with-jsx',
+  'infer-function-forwardRef',
+  'infer-function-React-memo',
+  'infer-functions-component-with-hook-call',
+  'infer-functions-component-with-jsx',
+  'infer-functions-hook-with-hook-call',
+  'infer-functions-hook-with-jsx',
+  'infer-function-expression-component',
+  'infer-skip-components-without-hooks-or-jsx',
+  'class-component-with-render-helper',
+  'fbt/fbtparam-with-jsx-element-content',
+  'fbt/fbtparam-text-must-use-expression-container',
+  'fbt/fbtparam-with-jsx-fragment-value',
+  'todo.useContext-mutate-context-in-callback',
+  'loop-unused-let',
+  'reanimated-no-memo-arg',
+  'reanimated-shared-value-writes',
+
+  'userspace-use-memo-cache',
+  'transitive-freeze-function-expressions',
+
+  // nothing to compile/run
+  'gating/repro-no-gating-import-without-compiled-functions',
+
+  // TODOs
+  'rules-of-hooks/todo.bail.rules-of-hooks-279ac76f53af',
+  'rules-of-hooks/todo.bail.rules-of-hooks-28a78701970c',
+  'rules-of-hooks/todo.bail.rules-of-hooks-3d692676194b',
+  'rules-of-hooks/todo.bail.rules-of-hooks-6949b255e7eb',
+  'rules-of-hooks/todo.bail.rules-of-hooks-8503ca76d6f8',
+  'rules-of-hooks/todo.bail.rules-of-hooks-e0a5db3ae21e',
+  'rules-of-hooks/todo.bail.rules-of-hooks-e9f9bac89f8f',
+  'rules-of-hooks/todo.bail.rules-of-hooks-fadd52c1e460',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-0a1dbff27ba0',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-0de1224ce64b',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-191029ac48c8',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-206e2811c87c',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-28a7111f56a7',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-2c51251df67a',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-449a37146a83',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-5a7ac9a6e8fa',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-76a74b4666e9',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-8303403b8e4c',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-99b5c750d1d1',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-9c79feec4b9b',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-a63fd4f9dcc0',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-acb56658fe7e',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-c59788ef5676',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-d842d36db450',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-d952b82c2597',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-ddeca9708b63',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e675f0a672d8',
+  'rules-of-hooks/todo.invalid.invalid-rules-of-hooks-e69ffce323c3',
+  'todo.unnecessary-lambda-memoization',
+  'rules-of-hooks/rules-of-hooks-93dc5d5e538a',
+  'rules-of-hooks/rules-of-hooks-69521d94fa03',
+
+  // false positives
+  'invalid-jsx-lowercase-localvar',
+
+  // bugs
+  'inner-function/nullable-objects/bug-invalid-array-map-manual',
+  'bug-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr',
+  `bug-capturing-func-maybealias-captured-mutate`,
+  'bug-aliased-capture-aliased-mutate',
+  'bug-aliased-capture-mutate',
+  'bug-functiondecl-hoisting',
+  'bug-type-inference-control-flow',
+  'fbt/bug-fbt-plural-multiple-function-calls',
+  'fbt/bug-fbt-plural-multiple-mixed-call-tag',
+  'bug-invalid-phi-as-dependency',
+  'bug-ref-prefix-postfix-operator',
+
+  // 'react-compiler-runtime' not yet supported
+  'flag-enable-emit-hook-guards',
+  'fast-refresh-refresh-on-const-changes-dev',
+  'useState-pruned-dependency-change-detect',
+  'useState-unpruned-dependency',
+  'useState-and-other-hook-unpruned-dependency',
+  'change-detect-reassign',
+
+  // Depends on external functions
+  'idx-method-no-outlining-wildcard',
+  'idx-method-no-outlining',
+  'target-flag-meta-internal',
+
+  // needs to be executed as a module
+  'meta-property',
+
+  // needs context lowering support in React
+  'todo.lower-context-access-property-load',
+  'todo.lower-context-access-nested-destructuring',
+  'todo.lower-context-access-mixed-array-obj',
+  'todo.lower-context-access-destructure-multiple',
+  'todo.lower-context-access-array-destructuring',
+  'lower-context-selector-simple',
+  'lower-context-acess-multiple',
+  'bug-separate-memoization-due-to-callback-capturing',
+
+  // SSR optimization rewrites files in a way that causes differences or warnings
+  'ssr/optimize-ssr',
+  'ssr/ssr-use-reducer',
+  'ssr/ssr-use-reducer-initializer',
+  'ssr/infer-event-handlers-from-setState',
+  'ssr/infer-event-handlers-from-startTransition',
+]);
+
+export default skipFilter;
diff --git a/compiler/packages/snap/src/compiler.ts b/compiler/packages/snap/src/compiler.ts
new file mode 100644
index 00000000000..1ad2b81ef32
--- /dev/null
+++ b/compiler/packages/snap/src/compiler.ts
@@ -0,0 +1,389 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type * as BabelCore from '@babel/core';
+import {transformFromAstSync} from '@babel/core';
+
+import * as BabelParser from '@babel/parser';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import type {
+  Logger,
+  LoggerEvent,
+  PluginOptions,
+  CompilerReactTarget,
+  CompilerPipelineValue,
+} from 'babel-plugin-react-compiler/src/Entrypoint';
+import type {
+  Effect,
+  ValueKind,
+  ValueReason,
+} from 'babel-plugin-react-compiler/src/HIR';
+import type {parseConfigPragmaForTests as ParseConfigPragma} from 'babel-plugin-react-compiler/src/Utils/TestUtils';
+import * as HermesParser from 'hermes-parser';
+import invariant from 'invariant';
+import path from 'path';
+import prettier from 'prettier';
+import SproutTodoFilter from './SproutTodoFilter';
+import {isExpectError} from './fixture-utils';
+import {makeSharedRuntimeTypeProvider} from './sprout/shared-runtime-type-provider';
+
+export function parseLanguage(source: string): 'flow' | 'typescript' {
+  return source.indexOf('@flow') !== -1 ? 'flow' : 'typescript';
+}
+
+export function parseSourceType(source: string): 'script' | 'module' {
+  return source.indexOf('@script') !== -1 ? 'script' : 'module';
+}
+
+/**
+ * Parse react compiler plugin + environment options from test fixture. Note
+ * that although this primarily uses `Environment:parseConfigPragma`, it also
+ * has test fixture specific (i.e. not applicable to playground) parsing logic.
+ */
+function makePluginOptions(
+  firstLine: string,
+  parseConfigPragmaFn: typeof ParseConfigPragma,
+  debugIRLogger: (value: CompilerPipelineValue) => void,
+  EffectEnum: typeof Effect,
+  ValueKindEnum: typeof ValueKind,
+  ValueReasonEnum: typeof ValueReason,
+): {
+  options: PluginOptions;
+  loggerTestOnly: boolean;
+  logs: Array<{filename: string | null; event: LoggerEvent}>;
+} {
+  // TODO(@mofeiZ) rewrite snap fixtures to @validatePreserveExistingMemo:false
+  let validatePreserveExistingMemoizationGuarantees = false;
+  let target: CompilerReactTarget = '19';
+
+  /**
+   * Snap currently runs all fixtures without `validatePreserveExistingMemo` as
+   * most fixtures are interested in compilation output, not whether the
+   * compiler was able to preserve existing memo.
+   *
+   * TODO: flip the default. `useMemo` is rare in test fixtures -- fixtures that
+   * use useMemo should be explicit about whether this flag is enabled
+   */
+  if (firstLine.includes('@validatePreserveExistingMemoizationGuarantees')) {
+    validatePreserveExistingMemoizationGuarantees = true;
+  }
+
+  const loggerTestOnly = firstLine.includes('@loggerTestOnly');
+  const logs: Array<{filename: string | null; event: LoggerEvent}> = [];
+  const logger: Logger = {
+    logEvent: (filename, event) => {
+      logs.push({filename, event});
+    },
+    debugLogIRs: debugIRLogger,
+  };
+
+  const config = parseConfigPragmaFn(firstLine, {compilationMode: 'all'});
+  const options = {
+    ...config,
+    environment: {
+      ...config.environment,
+      moduleTypeProvider: makeSharedRuntimeTypeProvider({
+        EffectEnum,
+        ValueKindEnum,
+        ValueReasonEnum,
+      }),
+      assertValidMutableRanges: true,
+      validatePreserveExistingMemoizationGuarantees,
+    },
+    logger,
+    enableReanimatedCheck: false,
+    target,
+  };
+  return {options, loggerTestOnly, logs};
+}
+
+export function parseInput(
+  input: string,
+  filename: string,
+  language: 'flow' | 'typescript',
+  sourceType: 'module' | 'script',
+): BabelCore.types.File {
+  // Extract the first line to quickly check for custom test directives
+  if (language === 'flow') {
+    return HermesParser.parse(input, {
+      babel: true,
+      flow: 'all',
+      sourceFilename: filename,
+      sourceType,
+      enableExperimentalComponentSyntax: true,
+    });
+  } else {
+    return BabelParser.parse(input, {
+      sourceFilename: filename,
+      plugins: ['typescript', 'jsx'],
+      sourceType,
+    });
+  }
+}
+
+function getEvaluatorPresets(
+  language: 'typescript' | 'flow',
+): Array<BabelCore.PluginItem> {
+  const presets: Array<BabelCore.PluginItem> = [
+    {
+      plugins: [
+        'babel-plugin-fbt',
+        'babel-plugin-fbt-runtime',
+        'babel-plugin-idx',
+      ],
+    },
+  ];
+  presets.push(
+    language === 'typescript'
+      ? [
+          '@babel/preset-typescript',
+          {
+            /**
+             * onlyRemoveTypeImports needs to be set as fbt imports
+             * would otherwise be removed by this pass.
+             * https://github.com/facebook/fbt/issues/49
+             * https://github.com/facebook/sfbt/issues/72
+             * https://dev.to/retyui/how-to-add-support-typescript-for-fbt-an-internationalization-framework-3lo0
+             */
+            onlyRemoveTypeImports: true,
+          },
+        ]
+      : '@babel/preset-flow',
+  );
+
+  presets.push({
+    plugins: ['@babel/plugin-syntax-jsx'],
+  });
+  presets.push(
+    ['@babel/preset-react', {throwIfNamespace: false}],
+    {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+    {
+      plugins: [
+        function BabelPluginRewriteRequirePath() {
+          return {
+            visitor: {
+              CallExpression(path: NodePath<t.CallExpression>) {
+                const {callee} = path.node;
+                if (callee.type === 'Identifier' && callee.name === 'require') {
+                  const arg = path.node.arguments[0];
+                  if (arg.type === 'StringLiteral') {
+                    // rewrite to use relative import as eval happens in
+                    // sprout/evaluator.ts
+                    if (arg.value === 'shared-runtime') {
+                      arg.value = './shared-runtime';
+                    } else if (arg.value === 'ReactForgetFeatureFlag') {
+                      arg.value = './ReactForgetFeatureFlag';
+                    } else if (arg.value === 'useEffectWrapper') {
+                      arg.value = './useEffectWrapper';
+                    }
+                  }
+                }
+              },
+            },
+          };
+        },
+      ],
+    },
+  );
+  return presets;
+}
+async function format(
+  inputCode: string,
+  language: 'typescript' | 'flow',
+): Promise<string> {
+  return await prettier.format(inputCode, {
+    semi: true,
+    parser: language === 'typescript' ? 'babel-ts' : 'flow',
+  });
+}
+const TypescriptEvaluatorPresets = getEvaluatorPresets('typescript');
+const FlowEvaluatorPresets = getEvaluatorPresets('flow');
+
+export type TransformResult = {
+  forgetOutput: string;
+  logs: string | null;
+  evaluatorCode: {
+    original: string;
+    forget: string;
+  } | null;
+};
+
+export async function transformFixtureInput(
+  input: string,
+  fixturePath: string,
+  parseConfigPragmaFn: typeof ParseConfigPragma,
+  plugin: BabelCore.PluginObj,
+  includeEvaluator: boolean,
+  debugIRLogger: (value: CompilerPipelineValue) => void,
+  EffectEnum: typeof Effect,
+  ValueKindEnum: typeof ValueKind,
+  ValueReasonEnum: typeof ValueReason,
+): Promise<{kind: 'ok'; value: TransformResult} | {kind: 'err'; msg: string}> {
+  // Extract the first line to quickly check for custom test directives
+  const firstLine = input.substring(0, input.indexOf('\n'));
+
+  const language = parseLanguage(firstLine);
+  const sourceType = parseSourceType(firstLine);
+  // Preserve file extension as it determines typescript's babel transform
+  // mode (e.g. stripping types, parsing rules for brackets)
+  const filename =
+    path.basename(fixturePath) + (language === 'typescript' ? '.ts' : '');
+  const inputAst = parseInput(input, filename, language, sourceType);
+  // Give babel transforms an absolute path as relative paths get prefixed
+  // with `cwd`, which is different across machines
+  const virtualFilepath = '/' + filename;
+
+  const presets =
+    language === 'typescript'
+      ? TypescriptEvaluatorPresets
+      : FlowEvaluatorPresets;
+
+  /**
+   * Get Forget compiled code
+   */
+  const {options, loggerTestOnly, logs} = makePluginOptions(
+    firstLine,
+    parseConfigPragmaFn,
+    debugIRLogger,
+    EffectEnum,
+    ValueKindEnum,
+    ValueReasonEnum,
+  );
+  const forgetResult = transformFromAstSync(inputAst, input, {
+    filename: virtualFilepath,
+    highlightCode: false,
+    retainLines: true,
+    compact: true,
+    plugins: [
+      [plugin, options],
+      'babel-plugin-fbt',
+      'babel-plugin-fbt-runtime',
+      'babel-plugin-idx',
+    ],
+    sourceType: 'module',
+    ast: includeEvaluator,
+    cloneInputAst: includeEvaluator,
+    configFile: false,
+    babelrc: false,
+  });
+  invariant(
+    forgetResult?.code != null,
+    'Expected BabelPluginReactForget to codegen successfully.',
+  );
+  const forgetCode = forgetResult.code;
+  let evaluatorCode = null;
+
+  if (
+    includeEvaluator &&
+    !SproutTodoFilter.has(fixturePath) &&
+    !isExpectError(filename)
+  ) {
+    let forgetEval: string;
+    try {
+      invariant(
+        forgetResult?.ast != null,
+        'Expected BabelPluginReactForget ast.',
+      );
+      const result = transformFromAstSync(forgetResult.ast, forgetCode, {
+        presets,
+        filename: virtualFilepath,
+        configFile: false,
+        babelrc: false,
+      });
+      if (result?.code == null) {
+        return {
+          kind: 'err',
+          msg: 'Unexpected error in forget transform pipeline - no code emitted',
+        };
+      } else {
+        forgetEval = result.code;
+      }
+    } catch (e) {
+      return {
+        kind: 'err',
+        msg: 'Unexpected error in Forget transform pipeline: ' + e.message,
+      };
+    }
+
+    /**
+     * Get evaluator code for source (no Forget)
+     */
+    let originalEval: string;
+    try {
+      const result = transformFromAstSync(inputAst, input, {
+        presets,
+        filename: virtualFilepath,
+        configFile: false,
+        babelrc: false,
+      });
+
+      if (result?.code == null) {
+        return {
+          kind: 'err',
+          msg: 'Unexpected error in non-forget transform pipeline - no code emitted',
+        };
+      } else {
+        originalEval = result.code;
+      }
+    } catch (e) {
+      return {
+        kind: 'err',
+        msg: 'Unexpected error in non-forget transform pipeline: ' + e.message,
+      };
+    }
+    evaluatorCode = {
+      forget: forgetEval,
+      original: originalEval,
+    };
+  }
+  const forgetOutput = await format(forgetCode, language);
+  let formattedLogs = null;
+  if (loggerTestOnly && logs.length !== 0) {
+    formattedLogs = logs
+      .map(({event}) => {
+        return JSON.stringify(event, (key, value) => {
+          if (
+            key === 'detail' &&
+            value != null &&
+            typeof value.serialize === 'function'
+          ) {
+            return value.serialize();
+          }
+          return value;
+        });
+      })
+      .join('\n');
+  }
+  const expectNothingCompiled =
+    firstLine.indexOf('@expectNothingCompiled') !== -1;
+  const successFailures = logs.filter(
+    log =>
+      log.event.kind === 'CompileSuccess' || log.event.kind === 'CompileError',
+  );
+  if (successFailures.length === 0 && !expectNothingCompiled) {
+    return {
+      kind: 'err',
+      msg: 'No success/failure events, add `// @expectNothingCompiled` to the first line if this is expected',
+    };
+  } else if (successFailures.length !== 0 && expectNothingCompiled) {
+    return {
+      kind: 'err',
+      msg: 'Expected nothing to be compiled (from `// @expectNothingCompiled`), but some functions compiled or errored',
+    };
+  }
+  return {
+    kind: 'ok',
+    value: {
+      forgetOutput,
+      logs: formattedLogs,
+      evaluatorCode,
+    },
+  };
+}
diff --git a/compiler/packages/snap/src/constants.ts b/compiler/packages/snap/src/constants.ts
new file mode 100644
index 00000000000..066b6b950a2
--- /dev/null
+++ b/compiler/packages/snap/src/constants.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import path from 'path';
+
+// We assume this is run from `babel-plugin-react-compiler`
+export const PROJECT_ROOT = path.normalize(
+  path.join(process.cwd(), '..', 'babel-plugin-react-compiler'),
+);
+
+export const PROJECT_SRC = path.normalize(
+  path.join(PROJECT_ROOT, 'dist', 'index.js'),
+);
+export const PRINT_HIR_IMPORT = 'printFunctionWithOutlined';
+export const PRINT_REACTIVE_IR_IMPORT = 'printReactiveFunction';
+export const PARSE_CONFIG_PRAGMA_IMPORT = 'parseConfigPragmaForTests';
+export const FIXTURES_PATH = path.join(
+  PROJECT_ROOT,
+  'src',
+  '__tests__',
+  'fixtures',
+  'compiler',
+);
+export const SNAPSHOT_EXTENSION = '.expect.md';
diff --git a/compiler/packages/snap/src/fixture-utils.ts b/compiler/packages/snap/src/fixture-utils.ts
new file mode 100644
index 00000000000..29f7d4ddfbb
--- /dev/null
+++ b/compiler/packages/snap/src/fixture-utils.ts
@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import fs from 'fs/promises';
+import * as glob from 'glob';
+import path from 'path';
+import {FIXTURES_PATH, SNAPSHOT_EXTENSION} from './constants';
+
+const INPUT_EXTENSIONS = [
+  '.js',
+  '.cjs',
+  '.mjs',
+  '.ts',
+  '.cts',
+  '.mts',
+  '.jsx',
+  '.tsx',
+];
+
+export type TestFilter = {
+  paths: Array<string>;
+};
+
+function stripExtension(filename: string, extensions: Array<string>): string {
+  for (const ext of extensions) {
+    if (filename.endsWith(ext)) {
+      return filename.slice(0, -ext.length);
+    }
+  }
+  return filename;
+}
+
+export function getBasename(fixture: TestFixture): string {
+  return stripExtension(path.basename(fixture.inputPath), INPUT_EXTENSIONS);
+}
+export function isExpectError(fixture: TestFixture | string): boolean {
+  const basename = typeof fixture === 'string' ? fixture : getBasename(fixture);
+  return basename.startsWith('error.') || basename.startsWith('todo.error');
+}
+
+export type TestFixture =
+  | {
+      fixturePath: string;
+      input: string | null;
+      inputPath: string;
+      snapshot: string | null;
+      snapshotPath: string;
+    }
+  | {
+      fixturePath: string;
+      input: null;
+      inputPath: string;
+      snapshot: string;
+      snapshotPath: string;
+    };
+
+async function readInputFixtures(
+  rootDir: string,
+  filter: TestFilter | null,
+): Promise<Map<string, {value: string; filepath: string}>> {
+  let inputFiles: Array<string>;
+  if (filter == null) {
+    inputFiles = glob.sync(`**/*{${INPUT_EXTENSIONS.join(',')}}`, {
+      cwd: rootDir,
+    });
+  } else {
+    inputFiles = (
+      await Promise.all(
+        filter.paths.map(pattern => {
+          // If the pattern already has an extension other than .expect.md,
+          // search for the pattern directly. Otherwise, search for the
+          // pattern with the expected input extensions added.
+          // Eg
+          // `alias-while` => search for `alias-while{.js,.jsx,.ts,.tsx}`
+          // `alias-while.js` => search as-is
+          // `alias-while.expect.md` => search for `alias-while{.js,.jsx,.ts,.tsx}`
+          const patternWithoutExt = stripExtension(pattern, [
+            ...INPUT_EXTENSIONS,
+            SNAPSHOT_EXTENSION,
+          ]);
+          const hasExtension = pattern !== patternWithoutExt;
+          const globPattern =
+            hasExtension && !pattern.endsWith(SNAPSHOT_EXTENSION)
+              ? pattern
+              : `${patternWithoutExt}{${INPUT_EXTENSIONS.join(',')}}`;
+          return glob.glob(globPattern, {
+            cwd: rootDir,
+          });
+        }),
+      )
+    ).flat();
+  }
+  const inputs: Array<Promise<[string, {value: string; filepath: string}]>> =
+    [];
+  for (const filePath of inputFiles) {
+    // Do not include extensions in unique identifier for fixture
+    const partialPath = stripExtension(filePath, INPUT_EXTENSIONS);
+    inputs.push(
+      fs.readFile(path.join(rootDir, filePath), 'utf8').then(input => {
+        return [
+          partialPath,
+          {
+            value: input,
+            filepath: filePath,
+          },
+        ];
+      }),
+    );
+  }
+  return new Map(await Promise.all(inputs));
+}
+async function readOutputFixtures(
+  rootDir: string,
+  filter: TestFilter | null,
+): Promise<Map<string, string>> {
+  let outputFiles: Array<string>;
+  if (filter == null) {
+    outputFiles = glob.sync(`**/*${SNAPSHOT_EXTENSION}`, {
+      cwd: rootDir,
+    });
+  } else {
+    outputFiles = (
+      await Promise.all(
+        filter.paths.map(pattern => {
+          // Strip all extensions and find matching .expect.md files
+          const basenameWithoutExt = stripExtension(pattern, [
+            ...INPUT_EXTENSIONS,
+            SNAPSHOT_EXTENSION,
+          ]);
+          return glob.glob(`${basenameWithoutExt}${SNAPSHOT_EXTENSION}`, {
+            cwd: rootDir,
+          });
+        }),
+      )
+    ).flat();
+  }
+  const outputs: Array<Promise<[string, string]>> = [];
+  for (const filePath of outputFiles) {
+    // Do not include extensions in unique identifier for fixture
+    const partialPath = stripExtension(filePath, [SNAPSHOT_EXTENSION]);
+
+    const outputPath = path.join(rootDir, filePath);
+    const output: Promise<[string, string]> = fs
+      .readFile(outputPath, 'utf8')
+      .then(output => {
+        return [partialPath, output];
+      });
+    outputs.push(output);
+  }
+  return new Map(await Promise.all(outputs));
+}
+
+export async function getFixtures(
+  filter: TestFilter | null,
+): Promise<Map<string, TestFixture>> {
+  const inputs = await readInputFixtures(FIXTURES_PATH, filter);
+  const outputs = await readOutputFixtures(FIXTURES_PATH, filter);
+
+  const fixtures: Map<string, TestFixture> = new Map();
+  for (const [partialPath, {value, filepath}] of inputs) {
+    const output = outputs.get(partialPath) ?? null;
+    fixtures.set(partialPath, {
+      fixturePath: partialPath,
+      input: value,
+      inputPath: filepath,
+      snapshot: output,
+      snapshotPath: path.join(FIXTURES_PATH, partialPath) + SNAPSHOT_EXTENSION,
+    });
+  }
+
+  for (const [partialPath, output] of outputs) {
+    if (!fixtures.has(partialPath)) {
+      fixtures.set(partialPath, {
+        fixturePath: partialPath,
+        input: null,
+        inputPath: 'none',
+        snapshot: output,
+        snapshotPath:
+          path.join(FIXTURES_PATH, partialPath) + SNAPSHOT_EXTENSION,
+      });
+    }
+  }
+  return fixtures;
+}
diff --git a/compiler/packages/snap/src/main.ts b/compiler/packages/snap/src/main.ts
new file mode 100644
index 00000000000..9e5ab53e5c6
--- /dev/null
+++ b/compiler/packages/snap/src/main.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {fork} from 'child_process';
+import invariant from 'invariant';
+import process from 'process';
+import * as readline from 'readline';
+import {hideBin} from 'yargs/helpers';
+
+readline.emitKeypressEvents(process.stdin);
+
+if (process.stdin.isTTY) {
+  process.stdin.setRawMode(true);
+}
+
+process.stdin.on('keypress', function (_, key) {
+  if (key && key.name === 'c' && key.ctrl) {
+    // handle sigint
+    if (childProc) {
+      console.log('Interrupted!!');
+      childProc.kill('SIGINT');
+      childProc.unref();
+      process.exit(-1);
+    }
+  }
+});
+
+const childProc = fork(require.resolve('./runner.js'), hideBin(process.argv), {
+  // for some reason, keypress events aren't sent to handlers in both processes
+  // when we `inherit` stdin.
+  // pipe stdout and stderr so we can silence child process after parent exits
+  stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
+  // forward existing env variables, like `NODE_OPTIONS` which VSCode uses to attach
+  // its debugger
+  env: {...process.env, FORCE_COLOR: 'true'},
+});
+
+invariant(
+  childProc.stdin && childProc.stdout && childProc.stderr,
+  'Expected forked process to have piped stdio',
+);
+process.stdin.pipe(childProc.stdin);
+childProc.stdout.pipe(process.stdout);
+childProc.stderr.pipe(process.stderr);
+
+childProc.on('exit', code => {
+  process.exit(code ?? -1);
+});
diff --git a/compiler/packages/snap/src/reporter.ts b/compiler/packages/snap/src/reporter.ts
new file mode 100644
index 00000000000..9f7d1d9a507
--- /dev/null
+++ b/compiler/packages/snap/src/reporter.ts
@@ -0,0 +1,189 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import chalk from 'chalk';
+import fs from 'fs';
+import invariant from 'invariant';
+import {diff} from 'jest-diff';
+import path from 'path';
+
+function wrapWithTripleBackticks(s: string, ext: string | null = null): string {
+  return `\`\`\`${ext ?? ''}
+${s}
+\`\`\``;
+}
+const SPROUT_SEPARATOR = '\n### Eval output\n';
+
+export function writeOutputToString(
+  input: string,
+  compilerOutput: string | null,
+  evaluatorOutput: string | null,
+  logs: string | null,
+  errorMessage: string | null,
+) {
+  // leading newline intentional
+  let result = `
+## Input
+
+${wrapWithTripleBackticks(input, 'javascript')}
+`; // trailing newline + space internional
+
+  if (compilerOutput != null) {
+    result += `
+## Code
+
+${wrapWithTripleBackticks(compilerOutput, 'javascript')}
+`;
+  } else {
+    result += '\n';
+  }
+
+  if (logs != null) {
+    result += `
+## Logs
+
+${wrapWithTripleBackticks(logs, null)}
+`;
+  }
+
+  if (errorMessage != null) {
+    result += `
+## Error
+
+${wrapWithTripleBackticks(errorMessage.replace(/^\/.*?:\s/, ''))}
+          \n`;
+  }
+  result += `      `;
+  if (evaluatorOutput != null) {
+    result += SPROUT_SEPARATOR + evaluatorOutput;
+  }
+  return result;
+}
+
+export type TestResult = {
+  actual: string | null; // null == input did not exist
+  expected: string | null; // null == output did not exist
+  outputPath: string;
+  unexpectedError: string | null;
+};
+export type TestResults = Map<string, TestResult>;
+
+/**
+ * Update the fixtures directory given the compilation results
+ */
+export async function update(results: TestResults): Promise<void> {
+  let deleted = 0;
+  let updated = 0;
+  let created = 0;
+  const failed = [];
+  for (const [basename, result] of results) {
+    if (result.unexpectedError != null) {
+      console.log(
+        chalk.red.inverse.bold(' FAILED ') + ' ' + chalk.dim(basename),
+      );
+      failed.push([basename, result.unexpectedError]);
+    } else if (result.actual == null) {
+      // Input was deleted but the expect file still existed, remove it
+      console.log(
+        chalk.red.inverse.bold(' REMOVE ') + ' ' + chalk.dim(basename),
+      );
+      try {
+        fs.unlinkSync(result.outputPath);
+        console.log(' remove  ' + result.outputPath);
+        deleted++;
+      } catch (e) {
+        console.error(
+          '[Snap tester error]: failed to remove ' + result.outputPath,
+        );
+        failed.push([basename, result.unexpectedError]);
+      }
+    } else if (result.actual !== result.expected) {
+      // Expected output has changed
+      console.log(
+        chalk.blue.inverse.bold(' UPDATE ') + ' ' + chalk.dim(basename),
+      );
+      try {
+        fs.writeFileSync(result.outputPath, result.actual, 'utf8');
+      } catch (e) {
+        if (e?.code === 'ENOENT') {
+          // May have failed to create nested dir, so make a directory and retry
+          fs.mkdirSync(path.dirname(result.outputPath), {recursive: true});
+          fs.writeFileSync(result.outputPath, result.actual, 'utf8');
+        }
+      }
+      if (result.expected == null) {
+        created++;
+      } else {
+        updated++;
+      }
+    } else {
+      // Expected output is current
+      console.log(
+        chalk.green.inverse.bold('  OKAY  ') + ' ' + chalk.dim(basename),
+      );
+    }
+  }
+  console.log(
+    `${deleted} Deleted, ${created} Created, ${updated} Updated, ${failed.length} Failed`,
+  );
+  for (const [basename, errorMsg] of failed) {
+    console.log(`${chalk.red.bold('Fail:')} ${basename}\n${errorMsg}`);
+  }
+}
+
+/**
+ * Report test results to the user
+ * @returns boolean indicatig whether all tests passed
+ */
+export function report(results: TestResults): boolean {
+  const failures: Array<[string, TestResult]> = [];
+  for (const [basename, result] of results) {
+    if (result.actual === result.expected && result.unexpectedError == null) {
+      console.log(
+        chalk.green.inverse.bold(' PASS ') + ' ' + chalk.dim(basename),
+      );
+    } else {
+      console.log(chalk.red.inverse.bold(' FAIL ') + ' ' + chalk.dim(basename));
+      failures.push([basename, result]);
+    }
+  }
+
+  if (failures.length !== 0) {
+    console.log('\n' + chalk.red.bold('Failures:') + '\n');
+
+    for (const [basename, result] of failures) {
+      console.log(chalk.red.bold('FAIL:') + ' ' + basename);
+      if (result.unexpectedError != null) {
+        console.log(
+          ` >> Unexpected error during test: \n${result.unexpectedError}`,
+        );
+      } else {
+        if (result.expected == null) {
+          invariant(result.actual != null, '[Tester] Internal failure.');
+          console.log(
+            chalk.red('[ expected fixture output is absent ]') + '\n',
+          );
+        } else if (result.actual == null) {
+          invariant(result.expected != null, '[Tester] Internal failure.');
+          console.log(
+            chalk.red(`[ fixture input for ${result.outputPath} is absent ]`) +
+              '\n',
+          );
+        } else {
+          console.log(diff(result.expected, result.actual) + '\n');
+        }
+      }
+    }
+  }
+
+  console.log(
+    `${results.size} Tests, ${results.size - failures.length} Passed, ${
+      failures.length
+    } Failed`,
+  );
+  return failures.length === 0;
+}
diff --git a/compiler/packages/snap/src/runner-watch.ts b/compiler/packages/snap/src/runner-watch.ts
new file mode 100644
index 00000000000..c29a2985153
--- /dev/null
+++ b/compiler/packages/snap/src/runner-watch.ts
@@ -0,0 +1,451 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import watcher from '@parcel/watcher';
+import path from 'path';
+import ts from 'typescript';
+import {FIXTURES_PATH, PROJECT_ROOT} from './constants';
+import {TestFilter, getFixtures} from './fixture-utils';
+import {execSync} from 'child_process';
+
+export function watchSrc(
+  onStart: () => void,
+  onComplete: (isSuccess: boolean) => void,
+): ts.WatchOfConfigFile<ts.SemanticDiagnosticsBuilderProgram> {
+  const configPath = ts.findConfigFile(
+    /*searchPath*/ PROJECT_ROOT,
+    ts.sys.fileExists,
+    'tsconfig.json',
+  );
+  if (!configPath) {
+    throw new Error("Could not find a valid 'tsconfig.json'.");
+  }
+  const createProgram = ts.createSemanticDiagnosticsBuilderProgram;
+  const host = ts.createWatchCompilerHost(
+    configPath,
+    undefined,
+    ts.sys,
+    createProgram,
+    () => {}, // we manually report errors in afterProgramCreate
+    () => {}, // we manually report watch status
+  );
+
+  const origCreateProgram = host.createProgram;
+  host.createProgram = (rootNames, options, host, oldProgram) => {
+    onStart();
+    return origCreateProgram(rootNames, options, host, oldProgram);
+  };
+  host.afterProgramCreate = program => {
+    /**
+     * Avoid calling original postProgramCreate because it always emits tsc
+     * compilation output
+     */
+
+    // syntactic diagnostics refer to javascript syntax
+    const errors = program
+      .getSyntacticDiagnostics()
+      .filter(diag => diag.category === ts.DiagnosticCategory.Error);
+    // semantic diagnostics refer to typescript semantics
+    errors.push(
+      ...program
+        .getSemanticDiagnostics()
+        .filter(diag => diag.category === ts.DiagnosticCategory.Error),
+    );
+
+    if (errors.length > 0) {
+      for (const diagnostic of errors) {
+        let fileLoc: string;
+        if (diagnostic.file) {
+          // https://github.com/microsoft/TypeScript/blob/ddd5084659c423f4003d2176e12d879b6a5bcf30/src/compiler/program.ts#L663-L674
+          const {line, character} = ts.getLineAndCharacterOfPosition(
+            diagnostic.file,
+            diagnostic.start!,
+          );
+          const fileName = path.relative(
+            ts.sys.getCurrentDirectory(),
+            diagnostic.file.fileName,
+          );
+          fileLoc = `${fileName}:${line + 1}:${character + 1} - `;
+        } else {
+          fileLoc = '';
+        }
+        console.error(
+          `${fileLoc}error TS${diagnostic.code}:`,
+          ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
+        );
+      }
+      console.error(
+        `Compilation failed (${errors.length} ${
+          errors.length > 1 ? 'errors' : 'error'
+        }).\n`,
+      );
+    }
+
+    const isSuccess = errors.length === 0;
+    onComplete(isSuccess);
+  };
+
+  // `createWatchProgram` creates an initial program, watches files, and updates
+  // the program over time.
+  return ts.createWatchProgram(host);
+}
+
+/**
+ * Watch mode helpers
+ */
+export enum RunnerAction {
+  Test = 'Test',
+  Update = 'Update',
+}
+
+type RunnerMode = {
+  action: RunnerAction;
+  filter: boolean;
+};
+
+export type RunnerState = {
+  // Monotonically increasing integer to describe the 'version' of the compiler.
+  // This is passed to `compile()` when compiling, so that the worker knows when
+  // to reset its module cache (compared to using its cached compiler version)
+  compilerVersion: number;
+  isCompilerBuildValid: boolean;
+  // timestamp of the last update
+  lastUpdate: number;
+  mode: RunnerMode;
+  filter: TestFilter | null;
+  debug: boolean;
+  // Input mode for interactive pattern entry
+  inputMode: 'none' | 'pattern';
+  inputBuffer: string;
+  // Autocomplete state
+  allFixtureNames: Array<string>;
+  matchingFixtures: Array<string>;
+  selectedIndex: number;
+  // Track last run status of each fixture (for autocomplete suggestions)
+  fixtureLastRunStatus: Map<string, 'pass' | 'fail'>;
+};
+
+function subscribeFixtures(
+  state: RunnerState,
+  onChange: (state: RunnerState) => void,
+) {
+  // Watch the fixtures directory for changes
+  watcher.subscribe(FIXTURES_PATH, async (err, _events) => {
+    if (err) {
+      console.error(err);
+      process.exit(1);
+    }
+    // Try to ignore changes that occurred as a result of our explicitly updating
+    // fixtures in update().
+    // Currently keeps a timestamp of last known changes, and ignore events that occurred
+    // around that timestamp.
+    const isRealUpdate = performance.now() - state.lastUpdate > 5000;
+    if (isRealUpdate) {
+      // Fixtures changed, re-run tests
+      state.mode.action = RunnerAction.Test;
+      onChange(state);
+    }
+  });
+}
+
+function subscribeTsc(
+  state: RunnerState,
+  onChange: (state: RunnerState) => void,
+) {
+  // Run TS in incremental watch mode
+  watchSrc(
+    function onStart() {
+      // Notify the user when compilation starts but don't clear the screen yet
+      console.log('\nCompiling...');
+    },
+    isTypecheckSuccess => {
+      let isCompilerBuildValid = false;
+      if (isTypecheckSuccess) {
+        try {
+          execSync('yarn build', {cwd: PROJECT_ROOT});
+          console.log('Built compiler successfully with tsup');
+          isCompilerBuildValid = true;
+        } catch (e) {
+          console.warn('Failed to build compiler with tsup:', e);
+        }
+      }
+      // Bump the compiler version after a build finishes
+      // and re-run tests
+      if (isCompilerBuildValid) {
+        state.compilerVersion++;
+      }
+      state.isCompilerBuildValid = isCompilerBuildValid;
+      state.mode.action = RunnerAction.Test;
+      onChange(state);
+    },
+  );
+}
+
+/**
+ * Levenshtein edit distance between two strings
+ */
+function editDistance(a: string, b: string): number {
+  const m = a.length;
+  const n = b.length;
+
+  // Create a 2D array for memoization
+  const dp: number[][] = Array.from({length: m + 1}, () =>
+    Array(n + 1).fill(0),
+  );
+
+  // Base cases
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+
+  // Fill in the rest
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1];
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+      }
+    }
+  }
+
+  return dp[m][n];
+}
+
+function filterFixtures(
+  allNames: Array<string>,
+  pattern: string,
+): Array<string> {
+  if (pattern === '') {
+    return allNames;
+  }
+  const lowerPattern = pattern.toLowerCase();
+  const matches = allNames.filter(name =>
+    name.toLowerCase().includes(lowerPattern),
+  );
+  // Sort by edit distance (lower = better match)
+  matches.sort((a, b) => {
+    const distA = editDistance(lowerPattern, a.toLowerCase());
+    const distB = editDistance(lowerPattern, b.toLowerCase());
+    return distA - distB;
+  });
+  return matches;
+}
+
+const MAX_DISPLAY = 15;
+
+function renderAutocomplete(state: RunnerState): void {
+  // Clear terminal
+  console.log('\u001Bc');
+
+  // Show current input
+  console.log(`Pattern: ${state.inputBuffer}`);
+  console.log('');
+
+  // Get current filter pattern if active
+  const currentFilterPattern =
+    state.mode.filter && state.filter ? state.filter.paths[0] : null;
+
+  // Show matching fixtures (limit to MAX_DISPLAY)
+  const toShow = state.matchingFixtures.slice(0, MAX_DISPLAY);
+
+  toShow.forEach((name, i) => {
+    const isSelected = i === state.selectedIndex;
+    const matchesCurrentFilter =
+      currentFilterPattern != null &&
+      name.toLowerCase().includes(currentFilterPattern.toLowerCase());
+
+    let prefix: string;
+    if (isSelected) {
+      prefix = '> ';
+    } else if (matchesCurrentFilter) {
+      prefix = '* ';
+    } else {
+      prefix = '  ';
+    }
+    console.log(`${prefix}${name}`);
+  });
+
+  if (state.matchingFixtures.length > MAX_DISPLAY) {
+    console.log(
+      `  ... and ${state.matchingFixtures.length - MAX_DISPLAY} more`,
+    );
+  }
+
+  console.log('');
+  console.log('↑/↓/Tab navigate | Enter select | Esc cancel');
+}
+
+function subscribeKeyEvents(
+  state: RunnerState,
+  onChange: (state: RunnerState) => void,
+) {
+  process.stdin.on('keypress', async (str, key) => {
+    // Handle input mode (pattern entry with autocomplete)
+    if (state.inputMode !== 'none') {
+      if (key.name === 'return') {
+        // Enter pressed - use selected fixture or typed text
+        let pattern: string;
+        if (
+          state.selectedIndex >= 0 &&
+          state.selectedIndex < state.matchingFixtures.length
+        ) {
+          pattern = state.matchingFixtures[state.selectedIndex];
+        } else {
+          pattern = state.inputBuffer.trim();
+        }
+
+        state.inputMode = 'none';
+        state.inputBuffer = '';
+        state.allFixtureNames = [];
+        state.matchingFixtures = [];
+        state.selectedIndex = -1;
+
+        if (pattern !== '') {
+          state.filter = {paths: [pattern]};
+          state.mode.filter = true;
+          state.mode.action = RunnerAction.Test;
+          onChange(state);
+        }
+        return;
+      } else if (key.name === 'escape') {
+        // Cancel input mode
+        state.inputMode = 'none';
+        state.inputBuffer = '';
+        state.allFixtureNames = [];
+        state.matchingFixtures = [];
+        state.selectedIndex = -1;
+        // Redraw normal UI
+        onChange(state);
+        return;
+      } else if (key.name === 'up' || (key.name === 'tab' && key.shift)) {
+        // Navigate up in autocomplete list
+        if (state.matchingFixtures.length > 0) {
+          if (state.selectedIndex <= 0) {
+            state.selectedIndex =
+              Math.min(state.matchingFixtures.length, MAX_DISPLAY) - 1;
+          } else {
+            state.selectedIndex--;
+          }
+          renderAutocomplete(state);
+        }
+        return;
+      } else if (key.name === 'down' || (key.name === 'tab' && !key.shift)) {
+        // Navigate down in autocomplete list
+        if (state.matchingFixtures.length > 0) {
+          const maxIndex =
+            Math.min(state.matchingFixtures.length, MAX_DISPLAY) - 1;
+          if (state.selectedIndex >= maxIndex) {
+            state.selectedIndex = 0;
+          } else {
+            state.selectedIndex++;
+          }
+          renderAutocomplete(state);
+        }
+        return;
+      } else if (key.name === 'backspace') {
+        if (state.inputBuffer.length > 0) {
+          state.inputBuffer = state.inputBuffer.slice(0, -1);
+          state.matchingFixtures = filterFixtures(
+            state.allFixtureNames,
+            state.inputBuffer,
+          );
+          state.selectedIndex = -1;
+          renderAutocomplete(state);
+        }
+        return;
+      } else if (str && !key.ctrl && !key.meta) {
+        // Regular character - accumulate, filter, and render
+        state.inputBuffer += str;
+        state.matchingFixtures = filterFixtures(
+          state.allFixtureNames,
+          state.inputBuffer,
+        );
+        state.selectedIndex = -1;
+        renderAutocomplete(state);
+        return;
+      }
+      return; // Ignore other keys in input mode
+    }
+
+    // Normal mode keypress handling
+    if (key.name === 'u') {
+      // u => update fixtures
+      state.mode.action = RunnerAction.Update;
+    } else if (key.name === 'q') {
+      process.exit(0);
+    } else if (key.name === 'a') {
+      // a => exit filter mode and run all tests
+      state.mode.filter = false;
+      state.filter = null;
+      state.mode.action = RunnerAction.Test;
+    } else if (key.name === 'd') {
+      // d => toggle debug logging
+      state.debug = !state.debug;
+      state.mode.action = RunnerAction.Test;
+    } else if (key.name === 'p') {
+      // p => enter pattern input mode with autocomplete
+      state.inputMode = 'pattern';
+      state.inputBuffer = '';
+
+      // Load all fixtures for autocomplete
+      const fixtures = await getFixtures(null);
+      state.allFixtureNames = Array.from(fixtures.keys()).sort();
+      // Show failed fixtures first when no pattern entered
+      const failedFixtures = Array.from(state.fixtureLastRunStatus.entries())
+        .filter(([_, status]) => status === 'fail')
+        .map(([name]) => name)
+        .sort();
+      state.matchingFixtures =
+        failedFixtures.length > 0 ? failedFixtures : state.allFixtureNames;
+      state.selectedIndex = -1;
+
+      renderAutocomplete(state);
+      return; // Don't trigger onChange yet
+    } else {
+      // any other key re-runs tests
+      state.mode.action = RunnerAction.Test;
+    }
+    onChange(state);
+  });
+}
+
+export async function makeWatchRunner(
+  onChange: (state: RunnerState) => void,
+  debugMode: boolean,
+  initialPattern?: string,
+): Promise<void> {
+  // Determine initial filter state
+  let filter: TestFilter | null = null;
+  let filterEnabled = false;
+
+  if (initialPattern) {
+    filter = {paths: [initialPattern]};
+    filterEnabled = true;
+  }
+
+  const state: RunnerState = {
+    compilerVersion: 0,
+    isCompilerBuildValid: false,
+    lastUpdate: -1,
+    mode: {
+      action: RunnerAction.Test,
+      filter: filterEnabled,
+    },
+    filter,
+    debug: debugMode,
+    inputMode: 'none',
+    inputBuffer: '',
+    allFixtureNames: [],
+    matchingFixtures: [],
+    selectedIndex: -1,
+    fixtureLastRunStatus: new Map(),
+  };
+
+  subscribeTsc(state, onChange);
+  subscribeFixtures(state, onChange);
+  subscribeKeyEvents(state, onChange);
+}
diff --git a/compiler/packages/snap/src/runner-worker.ts b/compiler/packages/snap/src/runner-worker.ts
new file mode 100644
index 00000000000..554348534e3
--- /dev/null
+++ b/compiler/packages/snap/src/runner-worker.ts
@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {codeFrameColumns} from '@babel/code-frame';
+import type {PluginObj} from '@babel/core';
+import type {parseConfigPragmaForTests as ParseConfigPragma} from 'babel-plugin-react-compiler/src/Utils/TestUtils';
+import type {printFunctionWithOutlined as PrintFunctionWithOutlined} from 'babel-plugin-react-compiler/src/HIR/PrintHIR';
+import type {printReactiveFunctionWithOutlined as PrintReactiveFunctionWithOutlined} from 'babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction';
+import {TransformResult, transformFixtureInput} from './compiler';
+import {
+  PARSE_CONFIG_PRAGMA_IMPORT,
+  PRINT_HIR_IMPORT,
+  PRINT_REACTIVE_IR_IMPORT,
+  PROJECT_SRC,
+} from './constants';
+import {TestFixture, getBasename, isExpectError} from './fixture-utils';
+import {TestResult, writeOutputToString} from './reporter';
+import {runSprout} from './sprout';
+import type {
+  CompilerPipelineValue,
+  Effect,
+  ValueKind,
+  ValueReason,
+} from 'babel-plugin-react-compiler/src';
+import chalk from 'chalk';
+
+const originalConsoleError = console.error;
+
+// Try to avoid clearing the entire require cache, which (as of this PR)
+// contains ~1250 files. This assumes that no dependencies have global caches
+// that may need to be invalidated across Forget reloads.
+const invalidationSubpath = 'packages/babel-plugin-react-compiler/dist';
+let version: number | null = null;
+export function clearRequireCache() {
+  Object.keys(require.cache).forEach(function (path) {
+    if (path.includes(invalidationSubpath)) {
+      delete require.cache[path];
+    }
+  });
+}
+
+async function compile(
+  input: string,
+  fixturePath: string,
+  compilerVersion: number,
+  shouldLog: boolean,
+  includeEvaluator: boolean,
+): Promise<{
+  error: string | null;
+  compileResult: TransformResult | null;
+}> {
+  const seenConsoleErrors: Array<string> = [];
+  console.error = (...messages: Array<string>) => {
+    seenConsoleErrors.push(...messages);
+  };
+  if (version !== null && compilerVersion !== version) {
+    clearRequireCache();
+  }
+  version = compilerVersion;
+
+  let compileResult: TransformResult | null = null;
+  let error: string | null = null;
+  try {
+    const importedCompilerPlugin = require(PROJECT_SRC) as Record<
+      string,
+      unknown
+    >;
+
+    // NOTE: we intentionally require lazily here so that we can clear the require cache
+    // and load fresh versions of the compiler when `compilerVersion` changes.
+    const BabelPluginReactCompiler = importedCompilerPlugin[
+      'default'
+    ] as PluginObj;
+    const EffectEnum = importedCompilerPlugin['Effect'] as typeof Effect;
+    const ValueKindEnum = importedCompilerPlugin[
+      'ValueKind'
+    ] as typeof ValueKind;
+    const ValueReasonEnum = importedCompilerPlugin[
+      'ValueReason'
+    ] as typeof ValueReason;
+    const printFunctionWithOutlined = importedCompilerPlugin[
+      PRINT_HIR_IMPORT
+    ] as typeof PrintFunctionWithOutlined;
+    const printReactiveFunctionWithOutlined = importedCompilerPlugin[
+      PRINT_REACTIVE_IR_IMPORT
+    ] as typeof PrintReactiveFunctionWithOutlined;
+    const parseConfigPragmaForTests = importedCompilerPlugin[
+      PARSE_CONFIG_PRAGMA_IMPORT
+    ] as typeof ParseConfigPragma;
+
+    let lastLogged: string | null = null;
+    const debugIRLogger = shouldLog
+      ? (value: CompilerPipelineValue) => {
+          let printed: string;
+          switch (value.kind) {
+            case 'hir':
+              printed = printFunctionWithOutlined(value.value);
+              break;
+            case 'reactive':
+              printed = printReactiveFunctionWithOutlined(value.value);
+              break;
+            case 'debug':
+              printed = value.value;
+              break;
+            case 'ast':
+              // skip printing ast as we already write fixture output JS
+              printed = '(ast)';
+              break;
+          }
+
+          if (printed !== lastLogged) {
+            lastLogged = printed;
+            console.log(`${chalk.green(value.name)}:\n ${printed}\n`);
+          } else {
+            console.log(`${chalk.blue(value.name)}: (no change)\n`);
+          }
+        }
+      : () => {};
+
+    // only try logging if we filtered out all but one fixture,
+    // since console log order is non-deterministic
+    const result = await transformFixtureInput(
+      input,
+      fixturePath,
+      parseConfigPragmaForTests,
+      BabelPluginReactCompiler,
+      includeEvaluator,
+      debugIRLogger,
+      EffectEnum,
+      ValueKindEnum,
+      ValueReasonEnum,
+    );
+
+    if (result.kind === 'err') {
+      error = result.msg;
+    } else {
+      compileResult = result.value;
+    }
+  } catch (e) {
+    if (shouldLog) {
+      console.error(e.stack);
+    }
+    error = e.message.replace(/\u001b[^m]*m/g, '');
+  }
+
+  // Promote console errors so they can be recorded in fixture output
+  for (const consoleError of seenConsoleErrors) {
+    if (error != null) {
+      error = `${error}\n\n${consoleError}`;
+    } else {
+      error = `ConsoleError: ${consoleError}`;
+    }
+  }
+  console.error = originalConsoleError;
+
+  return {
+    error,
+    compileResult,
+  };
+}
+
+export async function transformFixture(
+  fixture: TestFixture,
+  compilerVersion: number,
+  shouldLog: boolean,
+  includeEvaluator: boolean,
+): Promise<TestResult> {
+  const {input, snapshot: expected, snapshotPath: outputPath} = fixture;
+  const basename = getBasename(fixture);
+  const expectError = isExpectError(fixture);
+
+  // Input will be null if the input file did not exist, in which case the output file
+  // is stale
+  if (input === null) {
+    return {
+      outputPath,
+      actual: null,
+      expected,
+      unexpectedError: null,
+    };
+  }
+  const {compileResult, error} = await compile(
+    input,
+    fixture.fixturePath,
+    compilerVersion,
+    shouldLog,
+    includeEvaluator,
+  );
+
+  let unexpectedError: string | null = null;
+  if (expectError) {
+    if (error === null) {
+      unexpectedError = `Expected an error to be thrown for fixture: \`${basename}\`, remove the 'error.' prefix if an error is not expected.`;
+    }
+  } else {
+    if (error !== null) {
+      unexpectedError = `Expected fixture \`${basename}\` to succeed but it failed with error:\n\n${error}`;
+    } else if (compileResult == null) {
+      unexpectedError = `Expected output for fixture \`${basename}\`.`;
+    }
+  }
+
+  const snapOutput: string | null = compileResult?.forgetOutput ?? null;
+  let sproutOutput: string | null = null;
+  if (compileResult?.evaluatorCode != null) {
+    const sproutResult = runSprout(
+      compileResult.evaluatorCode.original,
+      compileResult.evaluatorCode.forget,
+    );
+    if (sproutResult.kind === 'invalid') {
+      unexpectedError ??= '';
+      unexpectedError += `\n\n${sproutResult.value}`;
+    } else {
+      sproutOutput = sproutResult.value;
+    }
+  } else if (!includeEvaluator && expected != null) {
+    sproutOutput = expected.split('\n### Eval output\n')[1];
+  }
+
+  const actualOutput = writeOutputToString(
+    input,
+    snapOutput,
+    sproutOutput,
+    compileResult?.logs ?? null,
+    error,
+  );
+
+  return {
+    outputPath,
+    actual: actualOutput,
+    expected,
+    unexpectedError,
+  };
+}
diff --git a/compiler/packages/snap/src/runner.ts b/compiler/packages/snap/src/runner.ts
new file mode 100644
index 00000000000..21320048eb2
--- /dev/null
+++ b/compiler/packages/snap/src/runner.ts
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Worker} from 'jest-worker';
+import {cpus} from 'os';
+import process from 'process';
+import * as readline from 'readline';
+import ts from 'typescript';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
+import {PROJECT_ROOT} from './constants';
+import {TestFilter, getFixtures} from './fixture-utils';
+import {TestResult, TestResults, report, update} from './reporter';
+import {
+  RunnerAction,
+  RunnerState,
+  makeWatchRunner,
+  watchSrc,
+} from './runner-watch';
+import * as runnerWorker from './runner-worker';
+import {execSync} from 'child_process';
+
+const WORKER_PATH = require.resolve('./runner-worker.js');
+const NUM_WORKERS = cpus().length - 1;
+
+readline.emitKeypressEvents(process.stdin);
+
+type RunnerOptions = {
+  sync: boolean;
+  workerThreads: boolean;
+  watch: boolean;
+  update: boolean;
+  pattern?: string;
+  debug: boolean;
+};
+
+const opts: RunnerOptions = yargs
+  .boolean('sync')
+  .describe(
+    'sync',
+    'Run compiler in main thread (instead of using worker threads or subprocesses). Defaults to false.',
+  )
+  .default('sync', false)
+  .boolean('worker-threads')
+  .describe(
+    'worker-threads',
+    'Run compiler in worker threads (instead of subprocesses). Defaults to true.',
+  )
+  .default('worker-threads', true)
+  .boolean('watch')
+  .describe('watch', 'Run compiler in watch mode, re-running after changes')
+  .alias('w', 'watch')
+  .default('watch', false)
+  .boolean('update')
+  .alias('u', 'update')
+  .describe('update', 'Update fixtures')
+  .default('update', false)
+  .string('pattern')
+  .alias('p', 'pattern')
+  .describe(
+    'pattern',
+    'Optional glob pattern to filter fixtures (e.g., "error.*", "use-memo")',
+  )
+  .boolean('debug')
+  .alias('d', 'debug')
+  .describe('debug', 'Enable debug logging to print HIR for each pass')
+  .default('debug', false)
+  .help('help')
+  .strict()
+  .parseSync(hideBin(process.argv)) as RunnerOptions;
+
+/**
+ * Do a test run and return the test results
+ */
+async function runFixtures(
+  worker: Worker & typeof runnerWorker,
+  filter: TestFilter | null,
+  compilerVersion: number,
+  debug: boolean,
+  requireSingleFixture: boolean,
+): Promise<TestResults> {
+  // We could in theory be fancy about tracking the contents of the fixtures
+  // directory via our file subscription, but it's simpler to just re-read
+  // the directory each time.
+  const fixtures = await getFixtures(filter);
+  const isOnlyFixture = filter !== null && fixtures.size === 1;
+  const shouldLog = debug && (!requireSingleFixture || isOnlyFixture);
+
+  let entries: Array<[string, TestResult]>;
+  if (!opts.sync) {
+    // Note: promise.all to ensure parallelism when enabled
+    const work: Array<Promise<[string, TestResult]>> = [];
+    for (const [fixtureName, fixture] of fixtures) {
+      work.push(
+        worker
+          .transformFixture(fixture, compilerVersion, shouldLog, true)
+          .then(result => [fixtureName, result]),
+      );
+    }
+
+    entries = await Promise.all(work);
+  } else {
+    entries = [];
+    for (const [fixtureName, fixture] of fixtures) {
+      let output = await runnerWorker.transformFixture(
+        fixture,
+        compilerVersion,
+        shouldLog,
+        true,
+      );
+      entries.push([fixtureName, output]);
+    }
+  }
+
+  return new Map(entries);
+}
+
+// Callback to re-run tests after some change
+async function onChange(
+  worker: Worker & typeof runnerWorker,
+  state: RunnerState,
+) {
+  const {compilerVersion, isCompilerBuildValid, mode, filter, debug} = state;
+  if (isCompilerBuildValid) {
+    const start = performance.now();
+
+    // console.clear() only works when stdout is connected to a TTY device.
+    // we're currently piping stdout (see main.ts), so let's do a 'hack'
+    console.log('\u001Bc');
+
+    // we don't clear console after this point, since
+    // it may contain debug console logging
+    const results = await runFixtures(
+      worker,
+      mode.filter ? filter : null,
+      compilerVersion,
+      debug,
+      true, // requireSingleFixture in watch mode
+    );
+    const end = performance.now();
+
+    // Track fixture status for autocomplete suggestions
+    for (const [basename, result] of results) {
+      const failed =
+        result.actual !== result.expected || result.unexpectedError != null;
+      state.fixtureLastRunStatus.set(basename, failed ? 'fail' : 'pass');
+    }
+
+    if (mode.action === RunnerAction.Update) {
+      update(results);
+      state.lastUpdate = end;
+    } else {
+      report(results);
+    }
+    console.log(`Completed in ${Math.floor(end - start)} ms`);
+  } else {
+    console.error(
+      `${mode}: Found errors in Forget source code, skipping test fixtures.`,
+    );
+  }
+  console.log(
+    '\n' +
+      (mode.filter
+        ? `Current mode = FILTER, pattern = "${filter?.paths[0] ?? ''}".`
+        : 'Current mode = NORMAL, run all test fixtures.') +
+      '\nWaiting for input or file changes...\n' +
+      'u     - update all fixtures\n' +
+      `d     - toggle (turn ${debug ? 'off' : 'on'}) debug logging\n` +
+      'p     - enter pattern to filter fixtures\n' +
+      (mode.filter ? 'a     - run all tests (exit filter mode)\n' : '') +
+      'q     - quit\n' +
+      '[any] - rerun tests\n',
+  );
+}
+
+/**
+ * Runs the compiler in watch or single-execution mode
+ */
+export async function main(opts: RunnerOptions): Promise<void> {
+  const worker: Worker & typeof runnerWorker = new Worker(WORKER_PATH, {
+    enableWorkerThreads: opts.workerThreads,
+    numWorkers: NUM_WORKERS,
+  }) as any;
+  worker.getStderr().pipe(process.stderr);
+  worker.getStdout().pipe(process.stdout);
+
+  // Check if watch mode should be enabled
+  const shouldWatch = opts.watch;
+
+  if (shouldWatch) {
+    makeWatchRunner(state => onChange(worker, state), opts.debug, opts.pattern);
+    if (opts.pattern) {
+      /**
+       * Warm up wormers when in watch mode. Loading the Forget babel plugin
+       * and all of its transitive dependencies takes 1-3s (per worker) on a M1.
+       * As jest-worker dispatches tasks using a round-robin strategy, we can
+       * avoid an additional 1-3s wait on the first num_workers runs by warming
+       * up workers eagerly.
+       */
+      for (let i = 0; i < NUM_WORKERS - 1; i++) {
+        worker.transformFixture(
+          {
+            fixturePath: 'tmp',
+            snapshotPath: './tmp.expect.md',
+            inputPath: './tmp.js',
+            input: `
+            function Foo(props) {
+              return identity(props);
+            }
+            `,
+            snapshot: null,
+          },
+          0,
+          false,
+          false,
+        );
+      }
+    }
+  } else {
+    // Non-watch mode. For simplicity we re-use the same watchSrc() function.
+    // After the first build completes run tests and exit
+    const tsWatch: ts.WatchOfConfigFile<ts.SemanticDiagnosticsBuilderProgram> =
+      watchSrc(
+        () => {},
+        async (isTypecheckSuccess: boolean) => {
+          let isSuccess = false;
+          if (!isTypecheckSuccess) {
+            console.error(
+              'Found typescript errors in Forget source code, skipping test fixtures.',
+            );
+          } else {
+            try {
+              execSync('yarn build', {cwd: PROJECT_ROOT});
+              console.log('Built compiler successfully with tsup');
+
+              // Determine which filter to use
+              let testFilter: TestFilter | null = null;
+              if (opts.pattern) {
+                testFilter = {
+                  paths: [opts.pattern],
+                };
+              }
+
+              const results = await runFixtures(
+                worker,
+                testFilter,
+                0,
+                opts.debug,
+                false, // no requireSingleFixture in non-watch mode
+              );
+              if (opts.update) {
+                update(results);
+                isSuccess = true;
+              } else {
+                isSuccess = report(results);
+              }
+            } catch (e) {
+              console.warn('Failed to build compiler with tsup:', e);
+            }
+          }
+          tsWatch?.close();
+          await worker.end();
+          process.exit(isSuccess ? 0 : 1);
+        },
+      );
+  }
+}
+
+main(opts).catch(error => console.error(error));
diff --git a/compiler/packages/snap/src/sprout/README.md b/compiler/packages/snap/src/sprout/README.md
new file mode 100644
index 00000000000..1499c2f71f6
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/README.md
@@ -0,0 +1,80 @@
+## Sprout 🌱
+React Forget test framework that executes compiler fixtures.
+
+Currently, Sprout runs each fixture with a known set of inputs and annotations. Sprout compares execution outputs (i.e. return values and console logs) of original source code and the corresponding Forget-transformed version.
+We hope to add fuzzing capabilities to Sprout, synthesizing sets of program inputs based on type and/or effect annotations.
+
+Sprout is now enabled for all fixtures! If Sprout cannot execute your fixture due to some technical limitations, add your fixture to [`SproutTodoFilter.ts`](./src/SproutTodoFilter.ts) with a comment explaining why.
+
+### Sprout CLI
+Sprout is now run as a part of snap, except when in filter mode.
+
+### Adding fixtures to Sprout
+
+#### 1. Annotate fixtures.
+Each fixture test executed by Sprout needs to export const `FIXTURE_ENTRYPOINT` object with the following type signature.
+
+```js
+type FixtureEntrypoint<T> = {
+  // function to be invoked
+  fn: ((...params: Array<T>) => any),
+  // params to pass to fn
+  // (if `fn` is a react component, this should be an array
+  // with exactly one element -- props)
+  params: Array<T>,
+}
+```
+
+Example:
+```js
+// test.js
+function MyComponent(props) {
+  return <div>{props.a + props.b}</div>;
+}
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyComponent,
+  params: [{a: "hello ", b: "world"}],
+};
+```
+
+#### 2. Import / define helper functions.
+
+- Prefer importing helper functions for readability and simplicity.
+- Fixtures that require helper functions with specific types or mutability can define their own within the same fixture file.
+
+```js
+// test.js
+import { addOne } from 'shared-runtime';
+
+function customHelper(val1, val2) {
+  // This directive is important, as helper functions don't
+  // always follow the rules of React.
+  "use no forget";
+  // ...
+}
+
+// ...
+```
+
+#### Notes
+- If your fixture needs to import from an external module, we currently only support importing from `react` (see Milestones todo list).
+
+- Any fixture can use React hooks, but they need to be first imported. We may later enforce that only `isComponent: true` fixtures can use React hooks.
+    ```ts
+    import {useState} from 'react';
+    ```
+
+- If your fixture wants to export multiple functions to Sprout to run, please split up the fixture into multiple files (e.g. `test-case-1`, `test-case-2`, etc).
+
+- Sprout currently runs each fixture in an iife to prevent variable collisions, but it does not run fixtures in isolation. Please do not mutate any external state in fixtures.
+
+- Sprout does not run fixtures listed in [`SproutTodoFilter.ts`](./src/SproutTodoFilter.ts), even in filter mode.
+
+### Milestones:
+- [✅] Render fixtures with React runtime / `testing-library/react`.
+- [✅] Make Sprout CLI -runnable and report results in process exit code.
+- [✅] Enable Sprout by default and run it in the Github Actions pipeline.
+- [🚧] Make all existing test fixtures Sprout compatible (see `SproutTodoFilter.ts`). This involves each fixture being annotated with `FIXTURE_ENTRYPOINT` and using shared functions and/or defining its own helpers.
+  - 77 done, ~410 to go
+- [✅] *(optional)* Store Sprout output as snapshot files. i.e. each fixture could have a `fixture.js`, `fixture.snap.md`, and `fixture.sprout.md`.
+- [✅] Add support for `fbt`.
diff --git a/compiler/packages/snap/src/sprout/ReactForgetFeatureFlag.ts b/compiler/packages/snap/src/sprout/ReactForgetFeatureFlag.ts
new file mode 100644
index 00000000000..48b0abd1803
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/ReactForgetFeatureFlag.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function isForgetEnabled_Fixtures(): boolean {
+  return true;
+}
diff --git a/compiler/packages/snap/src/sprout/evaluator.ts b/compiler/packages/snap/src/sprout/evaluator.ts
new file mode 100644
index 00000000000..ba44f01b0aa
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/evaluator.ts
@@ -0,0 +1,310 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {render} from '@testing-library/react';
+import {JSDOM} from 'jsdom';
+import React, {MutableRefObject} from 'react';
+import util from 'util';
+import {z} from 'zod/v4';
+import {fromZodError} from 'zod-validation-error/v4';
+import {initFbt, toJSON} from './shared-runtime';
+
+/**
+ * Set up the global environment for JSDOM tests.
+ * This is a hack to let us share code and setup between the test
+ * and runner environments. As an alternative, we could evaluate all setup
+ * in the jsdom test environment (which provides more isolation), but that
+ * may be slower.
+ */
+const {window: testWindow} = new JSDOM(undefined);
+(globalThis as any).document = testWindow.document;
+(globalThis as any).window = testWindow.window;
+(globalThis as any).React = React;
+(globalThis as any).render = render;
+initFbt();
+
+(globalThis as any).placeholderFn = function (..._args: Array<any>) {
+  throw new Error('Fixture not implemented!');
+};
+export type EvaluatorResult = {
+  kind: 'ok' | 'exception' | 'UnexpectedError';
+  value: string;
+  logs: Array<string>;
+};
+
+/**
+ * Define types and schemas for fixture entrypoint
+ */
+const EntrypointSchema = z.strictObject({
+  fn: z.union([z.function(), z.object({})]),
+  params: z.array(z.any()),
+
+  // DEPRECATED, unused
+  isComponent: z.optional(z.boolean()),
+
+  // if enabled, the `fn` is assumed to be a component and this is assumed
+  // to be an array of props. the component is mounted once and rendered
+  // once per set of props in this array.
+  sequentialRenders: z.optional(z.nullable(z.array(z.any()))).default(null),
+});
+const ExportSchema = z.object({
+  FIXTURE_ENTRYPOINT: EntrypointSchema,
+});
+
+const NO_ERROR_SENTINEL = Symbol();
+/**
+ * Wraps WrapperTestComponent in an error boundary to simplify re-rendering
+ * when an exception is thrown.
+ * A simpler alternative may be to re-mount test components manually.
+ */
+class WrapperTestComponentWithErrorBoundary extends React.Component<
+  {fn: any; params: Array<any>},
+  {errorFromLastRender: any}
+> {
+  /**
+   * Limit retries of the child component by caching seen errors.
+   */
+  propsErrorMap: Map<any, any>;
+  lastProps: any | null;
+  // lastProps: object | null;
+  constructor(props: any) {
+    super(props);
+    this.lastProps = null;
+    this.propsErrorMap = new Map<any, any>();
+    this.state = {
+      errorFromLastRender: NO_ERROR_SENTINEL,
+    };
+  }
+  static getDerivedStateFromError(error: any) {
+    // Reschedule a second render that immediately returns the cached error
+    return {errorFromLastRender: error};
+  }
+  override componentDidUpdate() {
+    if (this.state.errorFromLastRender !== NO_ERROR_SENTINEL) {
+      // Reschedule a third render that immediately returns the cached error
+      this.setState({errorFromLastRender: NO_ERROR_SENTINEL});
+    }
+  }
+  override render() {
+    if (
+      this.state.errorFromLastRender !== NO_ERROR_SENTINEL &&
+      this.props === this.lastProps
+    ) {
+      /**
+       * The last render errored, cache the error message to avoid running the
+       * test fixture more than once
+       */
+      const errorMsg = `[[ (exception in render) ${this.state.errorFromLastRender?.toString()} ]]`;
+      this.propsErrorMap.set(this.lastProps, errorMsg);
+      return errorMsg;
+    }
+    this.lastProps = this.props;
+    const cachedError = this.propsErrorMap.get(this.props);
+    if (cachedError != null) {
+      return cachedError;
+    }
+    return React.createElement(WrapperTestComponent, this.props);
+  }
+}
+
+function WrapperTestComponent(props: {fn: any; params: Array<any>}) {
+  const result = props.fn(...props.params);
+  // Hacky solution to determine whether the fixture returned jsx (which
+  // needs to passed through to React's runtime as-is) or a non-jsx value
+  // (which should be converted to a string).
+  if (typeof result === 'object' && result != null && '$$typeof' in result) {
+    return result;
+  } else {
+    return toJSON(result);
+  }
+}
+
+function renderComponentSequentiallyForEachProps(
+  fn: any,
+  sequentialRenders: Array<any>,
+): string {
+  if (sequentialRenders.length === 0) {
+    throw new Error(
+      'Expected at least one set of props when using `sequentialRenders`',
+    );
+  }
+  const initialProps = sequentialRenders[0]!;
+  const results = [];
+  const {rerender, container} = render(
+    React.createElement(WrapperTestComponentWithErrorBoundary, {
+      fn,
+      params: [initialProps],
+    }),
+  );
+  results.push(container.innerHTML);
+
+  for (let i = 1; i < sequentialRenders.length; i++) {
+    rerender(
+      React.createElement(WrapperTestComponentWithErrorBoundary, {
+        fn,
+        params: [sequentialRenders[i]],
+      }),
+    );
+    results.push(container.innerHTML);
+  }
+  return results.join('\n');
+}
+
+type FixtureEvaluatorResult = Omit<EvaluatorResult, 'logs'>;
+(globalThis as any).evaluateFixtureExport = function (
+  exports: unknown,
+): FixtureEvaluatorResult {
+  const parsedExportResult = ExportSchema.safeParse(exports);
+  if (!parsedExportResult.success) {
+    const exportDetail =
+      typeof exports === 'object' && exports != null
+        ? `object ${util.inspect(exports)}`
+        : `${exports}`;
+    return {
+      kind: 'UnexpectedError',
+      value: `${fromZodError(parsedExportResult.error)}\nFound ` + exportDetail,
+    };
+  }
+  const entrypoint = parsedExportResult.data.FIXTURE_ENTRYPOINT;
+  if (entrypoint.sequentialRenders !== null) {
+    const result = renderComponentSequentiallyForEachProps(
+      entrypoint.fn,
+      entrypoint.sequentialRenders,
+    );
+
+    return {
+      kind: 'ok',
+      value: result ?? 'null',
+    };
+  } else if (typeof entrypoint.fn === 'object') {
+    // Try to run fixture as a react component. This is necessary because not
+    // all components are functions (some are ForwardRef or Memo objects).
+    const result = render(
+      React.createElement(entrypoint.fn as any, entrypoint.params[0]),
+    ).container.innerHTML;
+
+    return {
+      kind: 'ok',
+      value: result ?? 'null',
+    };
+  } else {
+    const result = render(React.createElement(WrapperTestComponent, entrypoint))
+      .container.innerHTML;
+
+    return {
+      kind: 'ok',
+      value: result ?? 'null',
+    };
+  }
+};
+
+export function doEval(source: string): EvaluatorResult {
+  'use strict';
+
+  const originalConsole = globalThis.console;
+  const logs: Array<string> = [];
+  const mockedLog = (...args: Array<any>) => {
+    logs.push(
+      `${args.map(arg => {
+        if (arg instanceof Error) {
+          return arg.toString();
+        } else {
+          return util.inspect(arg);
+        }
+      })}`,
+    );
+  };
+
+  (globalThis.console as any) = {
+    info: mockedLog,
+    log: mockedLog,
+    warn: mockedLog,
+    error: (...args: Array<any>) => {
+      if (
+        typeof args[0] === 'string' &&
+        args[0].includes('ReactDOMTestUtils.act` is deprecated')
+      ) {
+        // remove this once @testing-library/react is upgraded to React 19.
+        return;
+      }
+
+      const stack = new Error().stack?.split('\n', 5) ?? [];
+      for (const stackFrame of stack) {
+        // React warns on exceptions thrown during render, we avoid printing
+        // here to reduce noise in test fixture outputs.
+        if (
+          (stackFrame.includes('at logCaughtError') &&
+            stackFrame.includes('react-dom-client.development.js')) ||
+          (stackFrame.includes('at defaultOnRecoverableError') &&
+            stackFrame.includes('react-dom-client.development.js'))
+        ) {
+          return;
+        }
+      }
+      mockedLog(...args);
+    },
+    table: mockedLog,
+    trace: () => {},
+  };
+  try {
+    // source needs to be evaluated in the same scope as invoke
+    const evalResult: any = eval(`
+    (() => {
+      // Exports should be overwritten by source
+      let exports = {
+        FIXTURE_ENTRYPOINT: {
+          fn: globalThis.placeholderFn,
+          params: [],
+        },
+      };
+      let reachedInvoke = false;
+      try {
+        // run in an iife to avoid naming collisions
+        (() => {${source}})();
+        reachedInvoke = true;
+        if (exports.FIXTURE_ENTRYPOINT?.fn === globalThis.placeholderFn) {
+          return {
+            kind: "exception",
+            value: "Fixture not implemented",
+          };
+        }
+        return evaluateFixtureExport(exports);
+      } catch (e) {
+        if (!reachedInvoke) {
+          return {
+            kind: "UnexpectedError",
+            value: e.message,
+          };
+        } else {
+          return {
+            kind: "exception",
+            value: e.message,
+          };
+        }
+      }
+    })()`);
+
+    const result = {
+      ...evalResult,
+      logs,
+    };
+    return result;
+  } catch (e) {
+    // syntax errors will cause the eval to throw and bubble up here
+    return {
+      kind: 'UnexpectedError',
+      value:
+        'Unexpected error during eval, possible syntax error?\n' +
+        e.message +
+        '\n\nsource:\n' +
+        source,
+      logs,
+    };
+  } finally {
+    globalThis.console = originalConsole;
+  }
+}
diff --git a/compiler/packages/snap/src/sprout/index.ts b/compiler/packages/snap/src/sprout/index.ts
new file mode 100644
index 00000000000..04748bed28f
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/index.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {EvaluatorResult, doEval} from './evaluator';
+
+export type SproutResult =
+  | {kind: 'success'; value: string}
+  | {kind: 'invalid'; value: string};
+
+function stringify(result: EvaluatorResult): string {
+  return `(kind: ${result.kind}) ${result.value}${
+    result.logs.length > 0 ? `\nlogs: [${result.logs.toString()}]` : ''
+  }`;
+}
+function makeError(description: string, value: string): SproutResult {
+  return {
+    kind: 'invalid',
+    value: description + '\n' + value,
+  };
+}
+function logsEqual(a: Array<string>, b: Array<string>) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((val, idx) => val === b[idx]);
+}
+export function runSprout(
+  originalCode: string,
+  forgetCode: string,
+): SproutResult {
+  let forgetResult;
+  try {
+    (globalThis as any).__SNAP_EVALUATOR_MODE = 'forget';
+    forgetResult = doEval(forgetCode);
+  } catch (e) {
+    throw e;
+  } finally {
+    (globalThis as any).__SNAP_EVALUATOR_MODE = undefined;
+  }
+  if (forgetResult.kind === 'UnexpectedError') {
+    return makeError('Unexpected error in Forget runner', forgetResult.value);
+  }
+  if (originalCode.indexOf('@disableNonForgetInSprout') === -1) {
+    const nonForgetResult = doEval(originalCode);
+
+    if (nonForgetResult.kind === 'UnexpectedError') {
+      return makeError(
+        'Unexpected error in non-forget runner',
+        nonForgetResult.value,
+      );
+    } else if (
+      forgetResult.kind !== nonForgetResult.kind ||
+      forgetResult.value !== nonForgetResult.value ||
+      !logsEqual(forgetResult.logs, nonForgetResult.logs)
+    ) {
+      return makeError(
+        'Found differences in evaluator results',
+        `Non-forget (expected):
+${stringify(nonForgetResult)}
+Forget:
+${stringify(forgetResult)}
+`,
+      );
+    }
+  }
+  return {
+    kind: 'success',
+    value: stringify(forgetResult),
+  };
+}
diff --git a/compiler/packages/snap/src/sprout/shared-runtime-type-provider.ts b/compiler/packages/snap/src/sprout/shared-runtime-type-provider.ts
new file mode 100644
index 00000000000..b01a204e78b
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/shared-runtime-type-provider.ts
@@ -0,0 +1,281 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {
+  Effect,
+  ValueKind,
+  ValueReason,
+} from 'babel-plugin-react-compiler/src';
+import type {TypeConfig} from 'babel-plugin-react-compiler/src/HIR/TypeSchema';
+
+export function makeSharedRuntimeTypeProvider({
+  EffectEnum,
+  ValueKindEnum,
+  ValueReasonEnum,
+}: {
+  EffectEnum: typeof Effect;
+  ValueKindEnum: typeof ValueKind;
+  ValueReasonEnum: typeof ValueReason;
+}) {
+  return function sharedRuntimeTypeProvider(
+    moduleName: string,
+  ): TypeConfig | null {
+    if (moduleName === 'shared-runtime') {
+      return {
+        kind: 'object',
+        properties: {
+          default: {
+            kind: 'function',
+            calleeEffect: EffectEnum.Read,
+            positionalParams: [],
+            restParam: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Primitive'},
+            returnValueKind: ValueKindEnum.Primitive,
+          },
+          graphql: {
+            kind: 'function',
+            calleeEffect: EffectEnum.Read,
+            positionalParams: [],
+            restParam: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Primitive'},
+            returnValueKind: ValueKindEnum.Primitive,
+          },
+          typedArrayPush: {
+            kind: 'function',
+            calleeEffect: EffectEnum.Read,
+            positionalParams: [EffectEnum.Store, EffectEnum.Capture],
+            restParam: EffectEnum.Capture,
+            returnType: {kind: 'type', name: 'Primitive'},
+            returnValueKind: ValueKindEnum.Primitive,
+          },
+          typedLog: {
+            kind: 'function',
+            calleeEffect: EffectEnum.Read,
+            positionalParams: [],
+            restParam: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Primitive'},
+            returnValueKind: ValueKindEnum.Primitive,
+          },
+          useFreeze: {
+            kind: 'hook',
+            returnType: {kind: 'type', name: 'Any'},
+          },
+          useFragment: {
+            kind: 'hook',
+            returnType: {kind: 'type', name: 'MixedReadonly'},
+            noAlias: true,
+          },
+          useNoAlias: {
+            kind: 'hook',
+            returnType: {kind: 'type', name: 'Any'},
+            returnValueKind: ValueKindEnum.Mutable,
+            noAlias: true,
+          },
+          typedIdentity: {
+            kind: 'function',
+            positionalParams: [EffectEnum.Read],
+            restParam: null,
+            calleeEffect: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            returnValueKind: ValueKindEnum.Mutable,
+            aliasing: {
+              receiver: '@receiver',
+              params: ['@value'],
+              rest: null,
+              returns: '@return',
+              temporaries: [],
+              effects: [{kind: 'Assign', from: '@value', into: '@return'}],
+            },
+          },
+          typedAssign: {
+            kind: 'function',
+            positionalParams: [EffectEnum.Read],
+            restParam: null,
+            calleeEffect: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            returnValueKind: ValueKindEnum.Mutable,
+            aliasing: {
+              receiver: '@receiver',
+              params: ['@value'],
+              rest: null,
+              returns: '@return',
+              temporaries: [],
+              effects: [{kind: 'Assign', from: '@value', into: '@return'}],
+            },
+          },
+          typedAlias: {
+            kind: 'function',
+            positionalParams: [EffectEnum.Read],
+            restParam: null,
+            calleeEffect: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            returnValueKind: ValueKindEnum.Mutable,
+            aliasing: {
+              receiver: '@receiver',
+              params: ['@value'],
+              rest: null,
+              returns: '@return',
+              temporaries: [],
+              effects: [
+                {
+                  kind: 'Create',
+                  into: '@return',
+                  value: ValueKindEnum.Mutable,
+                  reason: ValueReasonEnum.KnownReturnSignature,
+                },
+                {kind: 'Alias', from: '@value', into: '@return'},
+              ],
+            },
+          },
+          typedCapture: {
+            kind: 'function',
+            positionalParams: [EffectEnum.Read],
+            restParam: null,
+            calleeEffect: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Array'},
+            returnValueKind: ValueKindEnum.Mutable,
+            aliasing: {
+              receiver: '@receiver',
+              params: ['@value'],
+              rest: null,
+              returns: '@return',
+              temporaries: [],
+              effects: [
+                {
+                  kind: 'Create',
+                  into: '@return',
+                  value: ValueKindEnum.Mutable,
+                  reason: ValueReasonEnum.KnownReturnSignature,
+                },
+                {kind: 'Capture', from: '@value', into: '@return'},
+              ],
+            },
+          },
+          typedCreateFrom: {
+            kind: 'function',
+            positionalParams: [EffectEnum.Read],
+            restParam: null,
+            calleeEffect: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            returnValueKind: ValueKindEnum.Mutable,
+            aliasing: {
+              receiver: '@receiver',
+              params: ['@value'],
+              rest: null,
+              returns: '@return',
+              temporaries: [],
+              effects: [{kind: 'CreateFrom', from: '@value', into: '@return'}],
+            },
+          },
+          typedMutate: {
+            kind: 'function',
+            positionalParams: [EffectEnum.Read, EffectEnum.Capture],
+            restParam: null,
+            calleeEffect: EffectEnum.Store,
+            returnType: {kind: 'type', name: 'Primitive'},
+            returnValueKind: ValueKindEnum.Primitive,
+            aliasing: {
+              receiver: '@receiver',
+              params: ['@object', '@value'],
+              rest: null,
+              returns: '@return',
+              temporaries: [],
+              effects: [
+                {
+                  kind: 'Create',
+                  into: '@return',
+                  value: ValueKindEnum.Primitive,
+                  reason: ValueReasonEnum.KnownReturnSignature,
+                },
+                {kind: 'Mutate', value: '@object'},
+                {kind: 'Capture', from: '@value', into: '@object'},
+              ],
+            },
+          },
+        },
+      };
+    } else if (moduleName === 'ReactCompilerKnownIncompatibleTest') {
+      /**
+       * Fake module used for testing validation of known incompatible
+       * API validation
+       */
+      return {
+        kind: 'object',
+        properties: {
+          useKnownIncompatible: {
+            kind: 'hook',
+            positionalParams: [],
+            restParam: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            knownIncompatible: `useKnownIncompatible is known to be incompatible`,
+          },
+          useKnownIncompatibleIndirect: {
+            kind: 'hook',
+            positionalParams: [],
+            restParam: EffectEnum.Read,
+            returnType: {
+              kind: 'object',
+              properties: {
+                incompatible: {
+                  kind: 'function',
+                  positionalParams: [],
+                  restParam: EffectEnum.Read,
+                  calleeEffect: EffectEnum.Read,
+                  returnType: {kind: 'type', name: 'Any'},
+                  returnValueKind: ValueKindEnum.Mutable,
+                  knownIncompatible: `useKnownIncompatibleIndirect returns an incompatible() function that is known incompatible`,
+                },
+              },
+            },
+          },
+          knownIncompatible: {
+            kind: 'function',
+            positionalParams: [],
+            restParam: EffectEnum.Read,
+            calleeEffect: EffectEnum.Read,
+            returnType: {kind: 'type', name: 'Any'},
+            returnValueKind: ValueKindEnum.Mutable,
+            knownIncompatible: `useKnownIncompatible is known to be incompatible`,
+          },
+        },
+      };
+    } else if (moduleName === 'ReactCompilerTest') {
+      /**
+       * Fake module used for testing validation that type providers return hook
+       * types for hook names and non-hook types for non-hook names
+       */
+      return {
+        kind: 'object',
+        properties: {
+          useHookNotTypedAsHook: {
+            kind: 'type',
+            name: 'Any',
+          },
+          notAhookTypedAsHook: {
+            kind: 'hook',
+            returnType: {kind: 'type', name: 'Any'},
+          },
+        },
+      };
+    } else if (moduleName === 'useDefaultExportNotTypedAsHook') {
+      /**
+       * Fake module used for testing validation that type providers return hook
+       * types for hook names and non-hook types for non-hook names
+       */
+      return {
+        kind: 'object',
+        properties: {
+          default: {
+            kind: 'type',
+            name: 'Any',
+          },
+        },
+      };
+    }
+    return null;
+  };
+}
diff --git a/compiler/packages/snap/src/sprout/shared-runtime.ts b/compiler/packages/snap/src/sprout/shared-runtime.ts
new file mode 100644
index 00000000000..f37ca827090
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/shared-runtime.ts
@@ -0,0 +1,424 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {IntlVariations, IntlViewerContext, init} from 'fbt';
+import React, {FunctionComponent} from 'react';
+
+/**
+ * This file is meant for use by `runner-evaluator` and fixture tests.
+ *
+ * Any fixture test can import constants or functions exported here.
+ * However, the import path must be the relative path from `runner-evaluator`
+ * (which calls `eval` on each fixture) to this file.
+ *
+ * ```js
+ * // test.js
+ * import {CONST_STRING0} from './shared-runtime';
+ *
+ * // ...
+ * ```
+ */
+
+export type StringKeyedObject = {[key: string]: unknown};
+
+export const CONST_STRING0 = 'global string 0';
+export const CONST_STRING1 = 'global string 1';
+export const CONST_STRING2 = 'global string 2';
+
+export const CONST_NUMBER0 = 0;
+export const CONST_NUMBER1 = 1;
+export const CONST_NUMBER2 = 2;
+
+export const CONST_TRUE = true;
+export const CONST_FALSE = false;
+
+export function initFbt(): void {
+  const viewerContext: IntlViewerContext = {
+    GENDER: IntlVariations.GENDER_UNKNOWN,
+    locale: 'en_US',
+  };
+
+  init({
+    translations: {},
+    hooks: {
+      getViewerContext: () => viewerContext,
+    },
+  });
+}
+
+export function mutate(arg: any): void {
+  // don't mutate primitive
+  if (arg == null || typeof arg !== 'object') {
+    return;
+  } else if (Array.isArray(arg)) {
+    arg.push('joe');
+  }
+
+  let count: number = 0;
+  let key;
+  while (true) {
+    key = 'wat' + count;
+    if (!Object.hasOwn(arg, key)) {
+      arg[key] = 'joe';
+      return;
+    }
+    count++;
+  }
+}
+
+export function mutateAndReturn<T>(arg: T): T {
+  mutate(arg);
+  return arg;
+}
+
+export function mutateAndReturnNewValue<T>(arg: T): string {
+  mutate(arg);
+  return 'hello!';
+}
+
+export function setProperty(arg: any, property: any): void {
+  // don't mutate primitive
+  if (arg == null || typeof arg !== 'object') {
+    return arg;
+  }
+
+  let count: number = 0;
+  let key;
+  while (true) {
+    key = 'wat' + count;
+    if (!Object.hasOwn(arg, key)) {
+      arg[key] = property;
+      return arg;
+    }
+    count++;
+  }
+}
+
+export function setPropertyByKey<
+  T,
+  TKey extends keyof T,
+  TProperty extends T[TKey],
+>(arg: T, key: TKey, property: TProperty): T {
+  arg[key] = property;
+  return arg;
+}
+
+export function arrayPush<T>(arr: Array<T>, ...values: Array<T>): Array<T> {
+  arr.push(...values);
+  return arr;
+}
+
+export function graphql(value: string): string {
+  return value;
+}
+
+export function identity<T>(x: T): T {
+  return x;
+}
+
+export function getNumber(): number {
+  return 4;
+}
+
+export function getNull(): null {
+  return null;
+}
+
+export function getTrue(): true {
+  return true;
+}
+
+export function getFalse(): false {
+  return false;
+}
+
+export function calculateExpensiveNumber(x: number): number {
+  return x;
+}
+
+/**
+ * Functions that do not mutate their parameters
+ */
+export function shallowCopy<T extends object>(obj: T): T {
+  return Object.assign({}, obj);
+}
+
+export function makeObject_Primitives(): StringKeyedObject {
+  return {a: 0, b: 'value1', c: true};
+}
+
+export function makeArray<T>(...values: Array<T>): Array<T> {
+  return [...values];
+}
+
+export function addOne(value: number): number {
+  return value + 1;
+}
+
+/*
+ * Alias console.log, as it is defined as a global and may have
+ * different compiler handling than unknown functions
+ */
+export function print(...args: Array<unknown>): void {
+  console.log(...args);
+}
+
+export function sum(...args: Array<number>): number {
+  return args.reduce((result, arg) => result + arg, 0);
+}
+
+export function throwErrorWithMessage(message: string): never {
+  throw new Error(message);
+}
+
+export function throwInput(x: object): never {
+  throw x;
+}
+
+export function throwErrorWithMessageIf(cond: boolean, message: string): void {
+  if (cond) {
+    throw new Error(message);
+  }
+}
+
+export function logValue<T>(value: T): void {
+  console.log(value);
+}
+
+export function useHook(): object {
+  return makeObject_Primitives();
+}
+
+const noAliasObject = Object.freeze({});
+export function useNoAlias(..._args: Array<any>): object {
+  return noAliasObject;
+}
+
+export function useIdentity<T>(arg: T): T {
+  return arg;
+}
+
+export function invoke<T extends Array<any>, ReturnType>(
+  fn: (...input: T) => ReturnType,
+  ...params: T
+): ReturnType {
+  return fn(...params);
+}
+
+export function conditionalInvoke<T extends Array<any>, ReturnType>(
+  shouldInvoke: boolean,
+  fn: (...input: T) => ReturnType,
+  ...params: T
+): ReturnType | null {
+  if (shouldInvoke) {
+    return fn(...params);
+  } else {
+    return null;
+  }
+}
+
+/**
+ * React Components
+ */
+export function Text(props: {
+  value: string;
+  children?: Array<React.ReactNode>;
+}): React.ReactElement {
+  return React.createElement('div', null, props.value, props.children);
+}
+
+export function StaticText1(props: {
+  children?: Array<React.ReactNode>;
+}): React.ReactElement {
+  return React.createElement('div', null, 'StaticText1', props.children);
+}
+
+export function StaticText2(props: {
+  children?: Array<React.ReactNode>;
+}): React.ReactElement {
+  return React.createElement('div', null, 'StaticText2', props.children);
+}
+
+export function RenderPropAsChild(props: {
+  items: Array<() => React.ReactNode>;
+}): React.ReactElement {
+  return React.createElement(
+    'div',
+    null,
+    'HigherOrderComponent',
+    props.items.map(item => item()),
+  );
+}
+
+export function Stringify(props: any): React.ReactElement {
+  return React.createElement(
+    'div',
+    null,
+    toJSON(props, props?.shouldInvokeFns),
+  );
+}
+export function Throw() {
+  throw new Error();
+}
+
+export function ValidateMemoization({
+  inputs,
+  output: rawOutput,
+  onlyCheckCompiled = false,
+}: {
+  inputs: Array<any>;
+  output: any;
+  onlyCheckCompiled?: boolean;
+}): React.ReactElement {
+  'use no forget';
+  // Wrap rawOutput as it might be a function, which useState would invoke.
+  const output = {value: rawOutput};
+  const [previousInputs, setPreviousInputs] = React.useState(inputs);
+  const [previousOutput, setPreviousOutput] = React.useState(output);
+  if (
+    !onlyCheckCompiled ||
+    (onlyCheckCompiled &&
+      (globalThis as any).__SNAP_EVALUATOR_MODE === 'forget')
+  ) {
+    if (
+      inputs.length !== previousInputs.length ||
+      inputs.some((item, i) => item !== previousInputs[i])
+    ) {
+      // Some input changed, we expect the output to change
+      setPreviousInputs(inputs);
+      setPreviousOutput(output);
+    } else if (output.value !== previousOutput.value) {
+      // Else output should be stable
+      throw new Error('Output identity changed but inputs did not');
+    }
+  }
+  return React.createElement(Stringify, {inputs, output: rawOutput});
+}
+
+export function createHookWrapper<TProps, TRet>(
+  useMaybeHook: (props: TProps) => TRet,
+): FunctionComponent<TProps> {
+  return function Component(props: TProps): React.ReactElement {
+    const result = useMaybeHook(props);
+    return Stringify({
+      result: result,
+      shouldInvokeFns: true,
+    });
+  };
+}
+
+// helper functions
+export function toJSON(value: any, invokeFns: boolean = false): string {
+  const seen = new Map();
+
+  return JSON.stringify(value, (_key: string, val: any) => {
+    if (typeof val === 'function') {
+      if (val.length === 0 && invokeFns) {
+        return {
+          kind: 'Function',
+          result: val(),
+        };
+      } else {
+        return `[[ function params=${val.length} ]]`;
+      }
+    } else if (typeof val === 'object') {
+      let id = seen.get(val);
+      if (id != null) {
+        return `[[ cyclic ref *${id} ]]`;
+      } else if (val instanceof Map) {
+        return {
+          kind: 'Map',
+          value: Array.from(val.entries()),
+        };
+      } else if (val instanceof Set) {
+        return {
+          kind: 'Set',
+          value: Array.from(val.values()),
+        };
+      }
+      seen.set(val, seen.size);
+    }
+    return val;
+  });
+}
+export class Builder {
+  vals: Array<any> = [];
+  static makeBuilder(isNull: boolean, ...args: Array<any>): Builder | null {
+    if (isNull) {
+      return null;
+    } else {
+      const builder = new Builder();
+      builder.push(...args);
+      return builder;
+    }
+  }
+  push(...args: Array<any>): Builder {
+    this.vals.push(...args);
+    return this;
+  }
+}
+
+export const ObjectWithHooks = {
+  useFoo(): number {
+    return 0;
+  },
+  useMakeArray(): Array<number> {
+    return [1, 2, 3];
+  },
+  useIdentity<T>(arg: T): T {
+    return arg;
+  },
+};
+
+export function useFragment(..._args: Array<any>): object {
+  return {
+    a: [1, 2, 3],
+    b: {c: {d: 4}},
+  };
+}
+
+export function useSpecialEffect(
+  fn: () => any,
+  _secondArg: any,
+  deps: Array<any>,
+) {
+  React.useEffect(fn, deps);
+}
+
+export function typedArrayPush<T>(array: Array<T>, item: T): void {
+  array.push(item);
+}
+
+export function typedLog(...values: Array<any>): void {
+  console.log(...values);
+}
+
+export function typedIdentity<T>(value: T): T {
+  return value;
+}
+
+export function typedAssign<T>(x: T): T {
+  return x;
+}
+
+export function typedAlias<T>(x: T): T {
+  return x;
+}
+
+export function typedCapture<T>(x: T): Array<T> {
+  return [x];
+}
+
+export function typedCreateFrom<T>(array: Array<T>): T {
+  return array[0];
+}
+
+export function typedMutate(x: any, v: any = null): void {
+  x.property = v;
+}
+
+export default typedLog;
diff --git a/compiler/packages/snap/src/sprout/useEffectWrapper.ts b/compiler/packages/snap/src/sprout/useEffectWrapper.ts
new file mode 100644
index 00000000000..b1589dac407
--- /dev/null
+++ b/compiler/packages/snap/src/sprout/useEffectWrapper.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is used to test the effect auto-deps configuration, which
+ * allows you to specify functions that should have dependencies added to
+ * callsites.
+ */
+import {useEffect} from 'react';
+
+export default function useEffectWrapper(f: () => void | (() => void)): void {
+  useEffect(() => {
+    f();
+  }, [f]);
+}
diff --git a/compiler/packages/snap/src/types.d.ts b/compiler/packages/snap/src/types.d.ts
new file mode 100644
index 00000000000..b624caf19c5
--- /dev/null
+++ b/compiler/packages/snap/src/types.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// v0.17.1
+declare module 'hermes-parser' {
+  type HermesParserOptions = {
+    allowReturnOutsideFunction?: boolean;
+    babel?: boolean;
+    flow?: 'all' | 'detect';
+    enableExperimentalComponentSyntax?: boolean;
+    sourceFilename?: string;
+    sourceType?: 'module' | 'script' | 'unambiguous';
+    tokens?: boolean;
+  };
+  export function parse(code: string, options: Partial<HermesParserOptions>);
+}
diff --git a/compiler/packages/snap/tsconfig.json b/compiler/packages/snap/tsconfig.json
new file mode 100644
index 00000000000..668e8145646
--- /dev/null
+++ b/compiler/packages/snap/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "outDir": "dist",
+    "jsx": "react-jsxdev",
+    "lib": ["ES2022"],
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": false,
+    "target": "ES2015",
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+    "sourceMap": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts"],
+}
diff --git a/compiler/scripts/anonymize.js b/compiler/scripts/anonymize.js
new file mode 100644
index 00000000000..278e582c101
--- /dev/null
+++ b/compiler/scripts/anonymize.js
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 fs = require('fs');
+const HermesParser = require('hermes-parser');
+const BabelParser = require('@babel/parser');
+const BabelCore = require('@babel/core');
+const invariant = require('invariant');
+const {argv, stdin} = require('process');
+const prettier = require('prettier');
+const {JSXText} = require('hermes-parser/dist/generated/ESTreeVisitorKeys');
+
+function runPlugin(text, file, language) {
+  let ast;
+  if (language === 'flow') {
+    ast = HermesParser.parse(text, {
+      babel: true,
+      flow: 'all',
+      sourceFilename: file,
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    });
+  } else {
+    ast = BabelParser.parse(text, {
+      sourceFilename: file,
+      plugins: ['typescript', 'jsx'],
+      sourceType: 'module',
+    });
+  }
+  const result = BabelCore.transformFromAstSync(ast, text, {
+    ast: false,
+    filename: file,
+    highlightCode: false,
+    retainLines: true,
+    plugins: [[AnonymizePlugin]],
+    sourceType: 'module',
+    configFile: false,
+    babelrc: false,
+  });
+  invariant(
+    result?.code != null,
+    `Expected BabelPluginReactForget to codegen successfully, got: ${result}`
+  );
+  return result.code;
+}
+
+async function format(code, language) {
+  return await prettier.format(code, {
+    semi: true,
+    parser: language === 'typescript' ? 'babel-ts' : 'flow',
+  });
+}
+
+const TAG_NAMES = new Set([
+  'a',
+  'body',
+  'button',
+  'div',
+  'form',
+  'head',
+  'html',
+  'input',
+  'label',
+  'select',
+  'span',
+  'textarea',
+
+  // property/attribute names
+  'value',
+  'checked',
+  'onClick',
+  'onSubmit',
+  'name',
+]);
+
+const BUILTIN_HOOKS = new Set([
+  'useContext',
+  'useEffect',
+  'useInsertionEffect',
+  'useLayoutEffect',
+  'useReducer',
+  'useState',
+]);
+
+const GLOBALS = new Set([
+  'String',
+  'Object',
+  'Function',
+  'Number',
+  'RegExp',
+  'Date',
+  'Error',
+  'Function',
+  'TypeError',
+  'RangeError',
+  'ReferenceError',
+  'SyntaxError',
+  'URIError',
+  'EvalError',
+  'Boolean',
+  'DataView',
+  'Float32Array',
+  'Float64Array',
+  'Int8Array',
+  'Int16Array',
+  'Int32Array',
+  'Map',
+  'Set',
+  'WeakMap',
+  'Uint8Array',
+  'Uint8ClampedArray',
+  'Uint16Array',
+  'Uint32Array',
+  'ArrayBuffer',
+  'JSON',
+  'parseFloat',
+  'parseInt',
+  'console',
+  'isNaN',
+  'eval',
+  'isFinite',
+  'encodeURI',
+  'decodeURI',
+  'encodeURIComponent',
+  'decodeURIComponent',
+
+  // common method/property names of globals
+  'map',
+  'push',
+  'at',
+  'filter',
+  'slice',
+  'splice',
+  'add',
+  'get',
+  'set',
+  'has',
+  'size',
+  'length',
+  'toString',
+]);
+
+function AnonymizePlugin(_babel) {
+  let index = 0;
+  const identifiers = new Map();
+  const literals = new Map();
+  return {
+    name: 'anonymize',
+    visitor: {
+      JSXNamespacedName(path) {
+        throw error('TODO: handle JSXNamedspacedName');
+      },
+      JSXIdentifier(path) {
+        const name = path.node.name;
+        if (TAG_NAMES.has(name)) {
+          return;
+        }
+        let nextName = identifiers.get(name);
+        if (nextName == null) {
+          const isCapitalized =
+            name.slice(0, 1).toUpperCase() === name.slice(0, 1);
+          nextName = isCapitalized
+            ? `Component${(index++).toString(16).toUpperCase()}`
+            : `c${(index++).toString(16)}`;
+          identifiers.set(name, nextName);
+        }
+        path.node.name = nextName;
+      },
+      Identifier(path) {
+        const name = path.node.name;
+        if (BUILTIN_HOOKS.has(name) || GLOBALS.has(name)) {
+          return;
+        }
+        let nextName = identifiers.get(name);
+        if (nextName == null) {
+          const isCapitalized =
+            name.slice(0, 1).toUpperCase() === name.slice(0, 1);
+          const prefix = isCapitalized ? 'V' : 'v';
+          nextName = `${prefix}${(index++).toString(16)}`;
+          if (name.startsWith('use')) {
+            nextName =
+              'use' + nextName.slice(0, 1).toUpperCase() + nextName.slice(1);
+          }
+          identifiers.set(name, nextName);
+        }
+        path.node.name = nextName;
+      },
+      JSXText(path) {
+        const value = path.node.value;
+        let nextValue = literals.get(value);
+        if (nextValue == null) {
+          let string = '';
+          while (string.length < value.length) {
+            string += String.fromCharCode(Math.round(Math.random() * 25) + 97);
+          }
+          nextValue = string;
+          literals.set(value, nextValue);
+        }
+        path.node.value = nextValue;
+      },
+      StringLiteral(path) {
+        const value = path.node.value;
+        let nextValue = literals.get(value);
+        if (nextValue == null) {
+          let string = '';
+          while (string.length < value.length) {
+            string += String.fromCharCode(Math.round(Math.random() * 58) + 65);
+          }
+          nextValue = string;
+          literals.set(value, nextValue);
+        }
+        path.node.value = nextValue;
+      },
+      NumericLiteral(path) {
+        const value = path.node.value;
+        let nextValue = literals.get(value);
+        if (nextValue == null) {
+          nextValue = Number.isInteger(value)
+            ? Math.round(Math.random() * Number.MAX_SAFE_INTEGER)
+            : Math.random() * Number.MAX_VALUE;
+          literals.set(value, nextValue);
+        }
+        path.node.value = nextValue;
+      },
+    },
+  };
+}
+
+let file;
+let text;
+if (argv.length >= 3) {
+  file = argv[2];
+  text = fs.readFileSync(file, 'utf8');
+} else {
+  // read from stdin
+  file = 'stdin.js';
+  text = fs.readFileSync(stdin.fd, 'utf8');
+}
+const language =
+  file.endsWith('.ts') || file.endsWith('.tsx') ? 'typescript' : 'flow';
+const result = runPlugin(text, file, language);
+format(result, language).then(formatted => {
+  console.log(formatted);
+});
diff --git a/compiler/scripts/build-eslint-docs.js b/compiler/scripts/build-eslint-docs.js
new file mode 100644
index 00000000000..f4e411590e8
--- /dev/null
+++ b/compiler/scripts/build-eslint-docs.js
@@ -0,0 +1,34 @@
+const ReactCompiler = require('../packages/babel-plugin-react-compiler/dist');
+
+const combinedRules = [
+  {
+    name: 'rules-of-hooks',
+    recommended: true,
+    description:
+      'Validates that components and hooks follow the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks)',
+  },
+  {
+    name: 'exhaustive-deps',
+    recommended: true,
+    description:
+      'Validates that hooks which accept dependency arrays (`useMemo()`, `useCallback()`, `useEffect()`, etc) ' +
+      'list all referenced variables in their dependency array. Referencing a value without including it in the ' +
+      'dependency array can lead to stale UI or callbacks.',
+  },
+  ...ReactCompiler.LintRules,
+];
+
+const printed = combinedRules
+  .filter(
+    ruleConfig => ruleConfig.rule.recommended && ruleConfig.severity !== 'Off'
+  )
+  .map(ruleConfig => {
+    return `
+## \`react-hooks/${ruleConfig.rule.name}\`
+
+${ruleConfig.rule.description}
+    `.trim();
+  })
+  .join('\n\n');
+
+console.log(printed);
diff --git a/compiler/scripts/copyright.js b/compiler/scripts/copyright.js
new file mode 100644
index 00000000000..0a5ef2e29ae
--- /dev/null
+++ b/compiler/scripts/copyright.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 fs = require('fs');
+const glob = require('glob');
+
+const META_COPYRIGHT_COMMENT_BLOCK =
+  `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */`.trim() + '\n\n';
+
+const files = glob.sync('**/*.{js,ts,tsx,jsx,rs}', {
+  ignore: [
+    '**/dist/**',
+    '**/node_modules/**',
+    '**/tests/fixtures/**',
+    '**/__tests__/fixtures/**',
+  ],
+});
+
+const updatedFiles = new Map();
+let hasErrors = false;
+files.forEach(file => {
+  try {
+    const result = processFile(file);
+    if (result != null) {
+      updatedFiles.set(file, result);
+    }
+  } catch (e) {
+    console.error(e);
+    hasErrors = true;
+  }
+});
+if (hasErrors) {
+  console.error('Update failed');
+  process.exit(1);
+} else {
+  for (const [file, source] of updatedFiles) {
+    fs.writeFileSync(file, source, 'utf8');
+  }
+  console.log('Update complete');
+}
+
+function processFile(file) {
+  if (fs.lstatSync(file).isDirectory()) {
+    return;
+  }
+  let source = fs.readFileSync(file, 'utf8');
+
+  if (source.indexOf(META_COPYRIGHT_COMMENT_BLOCK) === 0) {
+    return null;
+  }
+  if (/^\/\*\*/.test(source)) {
+    source = source.replace(/\/\*\*[^\/]+\/\s+/, META_COPYRIGHT_COMMENT_BLOCK);
+  } else {
+    source = `${META_COPYRIGHT_COMMENT_BLOCK}${source}`;
+  }
+  return source;
+}
diff --git a/compiler/scripts/enable-feature-flag.js b/compiler/scripts/enable-feature-flag.js
new file mode 100755
index 00000000000..f51c5b48417
--- /dev/null
+++ b/compiler/scripts/enable-feature-flag.js
@@ -0,0 +1,347 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 fs = require('fs');
+const path = require('path');
+const {execSync} = require('child_process');
+const yargs = require('yargs/yargs');
+const {hideBin} = require('yargs/helpers');
+
+// Constants
+const COMPILER_ROOT = path.resolve(__dirname, '..');
+const ENVIRONMENT_TS_PATH = path.join(
+  COMPILER_ROOT,
+  'packages/babel-plugin-react-compiler/src/HIR/Environment.ts'
+);
+const FIXTURES_PATH = path.join(
+  COMPILER_ROOT,
+  'packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler'
+);
+const FIXTURE_EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
+
+/**
+ * Parse command line arguments
+ */
+function parseArgs() {
+  const argv = yargs(hideBin(process.argv))
+    .usage('Usage: $0 <flag-name>')
+    .command('$0 <flag-name>', 'Enable a feature flag by default', yargs => {
+      yargs.positional('flag-name', {
+        describe: 'Name of the feature flag to enable',
+        type: 'string',
+      });
+    })
+    .example(
+      '$0 validateExhaustiveMemoizationDependencies',
+      'Enable the validateExhaustiveMemoizationDependencies flag'
+    )
+    .help('h')
+    .alias('h', 'help')
+    .strict()
+    .parseSync();
+
+  return argv['flag-name'];
+}
+
+/**
+ * Enable a feature flag in Environment.ts by changing default(false) to default(true)
+ */
+function enableFlagInEnvironment(flagName) {
+  console.log(`\nEnabling flag "${flagName}" in Environment.ts...`);
+
+  const content = fs.readFileSync(ENVIRONMENT_TS_PATH, 'utf8');
+
+  // Check if the flag exists with default(false)
+  const flagPatternFalse = new RegExp(
+    `(${escapeRegex(flagName)}:\\s*z\\.boolean\\(\\)\\.default\\()false(\\))`,
+    'g'
+  );
+
+  if (!flagPatternFalse.test(content)) {
+    // Check if flag exists at all
+    const flagExistsPattern = new RegExp(
+      `${escapeRegex(flagName)}:\\s*z\\.boolean\\(\\)`,
+      'g'
+    );
+    if (flagExistsPattern.test(content)) {
+      // Check if it's already true
+      const flagPatternTrue = new RegExp(
+        `${escapeRegex(flagName)}:\\s*z\\.boolean\\(\\)\\.default\\(true\\)`,
+        'g'
+      );
+      if (flagPatternTrue.test(content)) {
+        console.error(`Error: Flag "${flagName}" already has default(true)`);
+        process.exit(1);
+      }
+      console.error(
+        `Error: Flag "${flagName}" exists but doesn't have default(false)`
+      );
+      process.exit(1);
+    }
+    console.error(`Error: Flag "${flagName}" not found in Environment.ts`);
+    process.exit(1);
+  }
+
+  // Perform the replacement
+  const newContent = content.replace(flagPatternFalse, '$1true$2');
+
+  // Verify the replacement worked
+  if (content === newContent) {
+    console.error(`Error: Failed to replace flag "${flagName}"`);
+    process.exit(1);
+  }
+
+  fs.writeFileSync(ENVIRONMENT_TS_PATH, newContent, 'utf8');
+  console.log(`Successfully enabled "${flagName}" in Environment.ts`);
+}
+
+/**
+ * Helper to escape regex special characters
+ */
+function escapeRegex(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Run yarn snap and capture output
+ */
+function runTests() {
+  console.log('\nRunning test suite (yarn snap)...');
+
+  try {
+    const output = execSync('yarn snap', {
+      cwd: COMPILER_ROOT,
+      encoding: 'utf8',
+      stdio: 'pipe',
+      maxBuffer: 10 * 1024 * 1024, // 10MB buffer
+    });
+    return {success: true, output};
+  } catch (error) {
+    // yarn snap exits with code 1 when tests fail, which throws an error
+    return {success: false, output: error.stdout || error.message};
+  }
+}
+
+/**
+ * Parse failing test names from test output
+ */
+function parseFailingTests(output) {
+  const failingTests = [];
+
+  // Look for lines that contain "FAIL:" followed by the test name
+  // Format: "FAIL: test-name" or with ANSI codes
+  const lines = output.split('\n');
+  for (const line of lines) {
+    // Remove ANSI codes for easier parsing
+    const cleanLine = line.replace(/\x1b\[[0-9;]*m/g, '');
+
+    // Match "FAIL: test-name"
+    const match = cleanLine.match(/^FAIL:\s*(.+)$/);
+    if (match) {
+      failingTests.push(match[1].trim());
+    }
+  }
+
+  return failingTests;
+}
+
+/**
+ * Find the fixture file for a given test name
+ */
+function findFixtureFile(testName) {
+  const basePath = path.join(FIXTURES_PATH, testName);
+
+  for (const ext of FIXTURE_EXTENSIONS) {
+    const filePath = basePath + ext;
+    if (fs.existsSync(filePath)) {
+      return filePath;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Add pragma to disable the feature flag in a fixture file
+ */
+function addPragmaToFixture(filePath, flagName) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const lines = content.split('\n');
+
+  if (lines.length === 0) {
+    console.warn(`Warning: Empty file ${filePath}`);
+    return false;
+  }
+
+  const firstLine = lines[0];
+  const pragma = `@${flagName}:false`;
+
+  // Check if pragma already exists
+  if (firstLine.includes(pragma)) {
+    return false; // Already has the pragma
+  }
+
+  // Check if first line is a single-line comment
+  if (firstLine.trim().startsWith('//')) {
+    // Append pragma to existing comment
+    lines[0] = firstLine + ' ' + pragma;
+  } else if (firstLine.trim().startsWith('/*')) {
+    // Multi-line comment - insert new line before it
+    lines.unshift('// ' + pragma);
+  } else {
+    // No comment - insert new comment as first line
+    lines.unshift('// ' + pragma);
+  }
+
+  fs.writeFileSync(filePath, lines.join('\n'), 'utf8');
+  return true;
+}
+
+/**
+ * Update snapshot files
+ */
+function updateSnapshots() {
+  console.log('\nUpdating snapshots (yarn snap -u)...');
+
+  try {
+    execSync('yarn snap -u', {
+      cwd: COMPILER_ROOT,
+      encoding: 'utf8',
+      stdio: 'pipe',
+      maxBuffer: 10 * 1024 * 1024,
+    });
+    console.log('Snapshots updated successfully');
+    return true;
+  } catch (error) {
+    console.error('Error updating snapshots:', error.message);
+    return false;
+  }
+}
+
+/**
+ * Verify all tests pass
+ */
+function verifyAllTestsPass() {
+  console.log('\nRunning final verification (yarn snap)...');
+
+  const {success, output} = runTests();
+
+  // Parse summary line: "N Tests, N Passed, N Failed"
+  const summaryMatch = output.match(
+    /(\d+)\s+Tests,\s+(\d+)\s+Passed,\s+(\d+)\s+Failed/
+  );
+
+  if (summaryMatch) {
+    const [, total, passed, failed] = summaryMatch;
+    console.log(
+      `\nTest Results: ${total} Tests, ${passed} Passed, ${failed} Failed`
+    );
+
+    if (failed === '0') {
+      console.log('All tests passed!');
+      return true;
+    } else {
+      console.error(`${failed} tests still failing`);
+      const failingTests = parseFailingTests(output);
+      if (failingTests.length > 0) {
+        console.error('\nFailing tests:');
+        failingTests.forEach(test => console.error(`  - ${test}`));
+      }
+      return false;
+    }
+  }
+
+  return success;
+}
+
+/**
+ * Main function
+ */
+async function main() {
+  const flagName = parseArgs();
+
+  console.log(`\nEnabling flag: '${flagName}'`);
+
+  try {
+    // Step 1: Enable flag in Environment.ts
+    enableFlagInEnvironment(flagName);
+
+    // Step 2: Run tests to find failures
+    const {output} = runTests();
+    const failingTests = parseFailingTests(output);
+
+    console.log(`\nFound ${failingTests.length} failing tests`);
+
+    if (failingTests.length === 0) {
+      console.log('No failing tests! Feature flag enabled successfully.');
+      process.exit(0);
+    }
+
+    // Step 3: Add pragma to each failing fixture
+    console.log(`\nAdding '@${flagName}:false' pragma to failing fixtures...`);
+
+    const notFound = [];
+    let notFoundCount = 0;
+
+    for (const testName of failingTests) {
+      const fixturePath = findFixtureFile(testName);
+
+      if (!fixturePath) {
+        console.warn(`Could not find fixture file for: ${testName}`);
+        notFound.push(fixturePath);
+        continue;
+      }
+
+      const updated = addPragmaToFixture(fixturePath, flagName);
+      if (updated) {
+        updatedCount++;
+        console.log(`  Updated: ${testName}`);
+      }
+    }
+
+    console.log(
+      `\nSummary: Updated ${updatedCount} fixtures, ${notFoundCount} not found`
+    );
+
+    if (notFoundCount.length !== 0) {
+      console.error(
+        '\nFailed to update snapshots, could not find:\n' + notFound.join('\n')
+      );
+      process.exit(1);
+    }
+
+    // Step 4: Update snapshots
+    if (!updateSnapshots()) {
+      console.error('\nFailed to update snapshots');
+      process.exit(1);
+    }
+
+    // Step 5: Verify all tests pass
+    if (!verifyAllTestsPass()) {
+      console.error('\nVerification failed: Some tests are still failing');
+      process.exit(1);
+    }
+
+    console.log('\nSuccess! Feature flag enabled and all tests passing.');
+    console.log(`\nSummary:`);
+    console.log(`  - Enabled "${flagName}" in Environment.ts`);
+    console.log(`  - Updated ${updatedCount} fixture files with pragma`);
+    console.log(`  - All tests passing`);
+
+    process.exit(0);
+  } catch (error) {
+    console.error('\nFatal error:', error.message);
+    console.error(error.stack);
+    process.exit(1);
+  }
+}
+
+// Run the script
+main();
diff --git a/compiler/scripts/hash.sh b/compiler/scripts/hash.sh
new file mode 100755
index 00000000000..2d454af67db
--- /dev/null
+++ b/compiler/scripts/hash.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+# Hashes JS files in the provided directory to create a cache-breaker
+
+find $1 -name '*.js' | sort | xargs shasum | shasum | awk '{ print $1 }'
diff --git a/compiler/scripts/release/ci-npmrc b/compiler/scripts/release/ci-npmrc
new file mode 100644
index 00000000000..ae643592e76
--- /dev/null
+++ b/compiler/scripts/release/ci-npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
diff --git a/compiler/scripts/release/prompt-for-otp.js b/compiler/scripts/release/prompt-for-otp.js
new file mode 100644
index 00000000000..3cb1e419c78
--- /dev/null
+++ b/compiler/scripts/release/prompt-for-otp.js
@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const prompt = require('prompt-promise');
+
+const run = async () => {
+  while (true) {
+    const otp = await prompt('NPM 2-factor auth code: ');
+    prompt.done();
+    if (otp) {
+      return otp;
+    } else {
+      console.error('\nTwo-factor auth is required to publish.');
+      // (Ask again.)
+    }
+  }
+};
+
+module.exports = run;
diff --git a/compiler/scripts/release/publish.js b/compiler/scripts/release/publish.js
new file mode 100755
index 00000000000..4ff332d300a
--- /dev/null
+++ b/compiler/scripts/release/publish.js
@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ora = require('ora');
+const path = require('path');
+const yargs = require('yargs');
+const {hashElement} = require('folder-hash');
+const promptForOTP = require('./prompt-for-otp');
+const {PUBLISHABLE_PACKAGES} = require('./shared/packages');
+const {
+  execHelper,
+  getDateStringForCommit,
+  spawnHelper,
+} = require('./shared/utils');
+const {buildPackages} = require('./shared/build-packages');
+const {readJson, writeJson} = require('fs-extra');
+
+/**
+ * Script for publishing PUBLISHABLE_PACKAGES to npm. By default, this runs in tarball mode, meaning
+ * the script will only print out what the contents of the files included in the npm tarball would
+ * be.
+ *
+ * Please run this first (ie `yarn npm:publish`) and double check the contents of the files that
+ * will be pushed to npm.
+ *
+ * If it looks good, you can run `yarn npm:publish --for-real` to really publish to npm. You must
+ * have 2FA enabled first and the script will prompt you to enter a 2FA code before proceeding.
+ * There's a small annoying delay before the packages are actually pushed to give you time to panic
+ * cancel. In this mode, we will bump the version field of each package's package.json, and git
+ * commit it. Then, the packages will be published to npm.
+ *
+ * Optionally, you can add the `--debug` flag to `yarn npm:publish --debug --for-real` to run all
+ * steps, but the final npm publish step will have the `--dry-run` flag added to it. This will make
+ * the command only report what it would have done, instead of actually publishing to npm.
+ */
+async function main() {
+  const argv = yargs(process.argv.slice(2))
+    .option('packages', {
+      description: 'which packages to publish, defaults to all',
+      choices: PUBLISHABLE_PACKAGES,
+      default: PUBLISHABLE_PACKAGES,
+    })
+    .option('for-real', {
+      alias: 'frfr',
+      description:
+        'whether to publish to npm (npm publish) or dryrun (npm publish --dry-run)',
+      type: 'boolean',
+      default: false,
+    })
+    .option('debug', {
+      description:
+        'If enabled, will always run npm commands in dry run mode irregardless of the for-real flag',
+      type: 'boolean',
+      default: false,
+    })
+    .option('ci', {
+      description: 'Publish packages via CI',
+      type: 'boolean',
+      default: false,
+    })
+    .option('tag', {
+      description: 'Tag to publish to npm',
+      type: 'choices',
+      choices: ['experimental', 'beta', 'rc', 'latest'],
+      default: 'experimental',
+    })
+    .option('tag-version', {
+      description:
+        'Optional tag version to append to tag name, eg `1` becomes 0.0.0-rc.1',
+      type: 'number',
+      default: null,
+    })
+    .option('version-name', {
+      description: 'Version name',
+      type: 'string',
+      default: '0.0.0',
+    })
+    .help('help')
+    .strict()
+    .parseSync();
+
+  if (argv.debug === false) {
+    const currBranchName = await execHelper('git rev-parse --abbrev-ref HEAD');
+    const isPristine = (await execHelper('git status --porcelain')) === '';
+    if (currBranchName !== 'main' || isPristine === false) {
+      throw new Error(
+        'This script must be run from the `main` branch with no uncommitted changes'
+      );
+    }
+  }
+
+  let pkgNames = argv.packages;
+  if (Array.isArray(argv.packages) === false) {
+    pkgNames = [argv.packages];
+  }
+  const spinner = ora(
+    `Preparing to publish ${argv.versionName}@${argv.tag} ${
+      argv.forReal === true ? '(for real)' : '(dry run)'
+    } [debug=${argv.debug}]`
+  ).info();
+
+  await buildPackages(pkgNames);
+
+  if (argv.forReal === false) {
+    spinner.info('Dry run: Report tarball contents');
+    for (const pkgName of pkgNames) {
+      console.log(`\n========== ${pkgName} ==========\n`);
+      spinner.start(`Running npm pack --dry-run\n`);
+      try {
+        await spawnHelper('npm', ['pack', '--dry-run'], {
+          cwd: path.resolve(__dirname, `../../packages/${pkgName}`),
+          stdio: 'inherit',
+        });
+      } catch (e) {
+        spinner.fail(e.toString());
+        throw e;
+      }
+      spinner.stop(`Successfully packed ${pkgName} (dry run)`);
+    }
+    spinner.succeed(
+      'Please confirm contents of packages before publishing. You can run this command again with --for-real to publish to npm'
+    );
+  }
+
+  if (argv.forReal === true) {
+    const commit = await execHelper(
+      'git show -s --no-show-signature --format=%h',
+      {
+        cwd: path.resolve(__dirname, '..'),
+      }
+    );
+    const dateString = await getDateStringForCommit(commit);
+    const otp =
+      argv.ci === false && argv.debug === false ? await promptForOTP() : null;
+    const {hash} = await hashElement(path.resolve(__dirname, '../..'), {
+      encoding: 'hex',
+      folders: {exclude: ['node_modules']},
+      files: {exclude: ['.DS_Store']},
+    });
+    const truncatedHash = hash.slice(0, 7);
+    let newVersion;
+    if (argv.tag === 'latest') {
+      newVersion = argv.versionName;
+    } else {
+      newVersion =
+        argv.tagVersion == null || argv.tagVersion === ''
+          ? `${argv.versionName}-${argv.tag}`
+          : `${argv.versionName}-${argv.tag}.${argv.tagVersion}`;
+    }
+    if (argv.tag === 'experimental' || argv.tag === 'beta') {
+      newVersion = `${newVersion}-${truncatedHash}-${dateString}`;
+    }
+
+    for (const pkgName of pkgNames) {
+      const pkgDir = path.resolve(__dirname, `../../packages/${pkgName}`);
+      const pkgJsonPath = path.resolve(
+        __dirname,
+        `../../packages/${pkgName}/package.json`
+      );
+
+      spinner.start(`Writing package.json for ${pkgName}@${newVersion}`);
+      await writeJson(
+        pkgJsonPath,
+        {
+          ...(await readJson(pkgJsonPath)),
+          version: newVersion,
+        },
+        {spaces: 2}
+      );
+      spinner.succeed(`Wrote package.json for ${pkgName}@${newVersion}`);
+
+      console.log(`\n========== ${pkgName} ==========\n`);
+      spinner.start(`Publishing ${pkgName}@${newVersion} to npm\n`);
+
+      let opts = [];
+      if (argv.debug === true) {
+        opts.push('--dry-run');
+      }
+      if (otp != null) {
+        opts.push(`--otp=${otp}`);
+      }
+
+      opts.push(`--tag=${argv.tag}`);
+
+      try {
+        await spawnHelper(
+          'npm',
+          ['publish', ...opts, '--registry=https://registry.npmjs.org'],
+          {
+            cwd: pkgDir,
+            stdio: 'inherit',
+          }
+        );
+        console.log('\n');
+      } catch (e) {
+        spinner.fail(e.toString());
+        throw e;
+      }
+      spinner.succeed(`Successfully published ${pkgName} to npm`);
+
+      spinner.start('Pushing tags to npm');
+      if (typeof argv.tag === 'string') {
+        try {
+          let opts = ['dist-tag', 'add', `${pkgName}@${newVersion}`, argv.tag];
+          if (otp != null) {
+            opts.push(`--otp=${otp}`);
+          }
+          if (argv.debug === true) {
+            spinner.info(`dry-run: npm ${opts.join(' ')}`);
+          } else {
+            await spawnHelper('npm', opts, {
+              cwd: pkgDir,
+              stdio: 'inherit',
+            });
+          }
+        } catch (e) {
+          spinner.fail(e.toString());
+          throw e;
+        }
+        spinner.succeed(
+          `Successfully pushed dist-tag ${argv.tag} for ${pkgName} to npm`
+        );
+      }
+    }
+
+    console.log('\n\n✅ All done');
+  }
+}
+
+main();
diff --git a/compiler/scripts/release/shared/build-packages.js b/compiler/scripts/release/shared/build-packages.js
new file mode 100644
index 00000000000..0a5ac1f5c2b
--- /dev/null
+++ b/compiler/scripts/release/shared/build-packages.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const ora = require('ora');
+const {execHelper} = require('./utils');
+
+async function buildPackages(pkgNames) {
+  const spinner = ora(`Building packages`).info();
+  for (const pkgName of pkgNames) {
+    const command = `NODE_ENV=production yarn workspace ${pkgName} run build --dts`;
+    spinner.start(`Running: ${command}\n`);
+    try {
+      await execHelper(command);
+    } catch (e) {
+      spinner.fail(e.toString());
+      throw e;
+    }
+    spinner.succeed(`Successfully built ${pkgName}`);
+  }
+  spinner.stop();
+}
+
+module.exports = {
+  buildPackages,
+};
diff --git a/compiler/scripts/release/shared/packages.js b/compiler/scripts/release/shared/packages.js
new file mode 100644
index 00000000000..235ba0f1ddb
--- /dev/null
+++ b/compiler/scripts/release/shared/packages.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const PUBLISHABLE_PACKAGES = [
+  'babel-plugin-react-compiler',
+  'react-compiler-healthcheck',
+  'react-compiler-runtime',
+];
+
+module.exports = {
+  PUBLISHABLE_PACKAGES,
+};
diff --git a/compiler/scripts/release/shared/utils.js b/compiler/scripts/release/shared/utils.js
new file mode 100644
index 00000000000..bda2d28c032
--- /dev/null
+++ b/compiler/scripts/release/shared/utils.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const cp = require('child_process');
+const util = require('util');
+
+function execHelper(command, options, streamStdout = false) {
+  return new Promise((resolve, reject) => {
+    const proc = cp.exec(command, options, (error, stdout) =>
+      error ? reject(error) : resolve(stdout.trim())
+    );
+    if (streamStdout) {
+      proc.stdout.pipe(process.stdout);
+    }
+  });
+}
+
+function _spawn(command, args, options, cb) {
+  const child = cp.spawn(command, args, options);
+  child.on('close', exitCode => {
+    cb(null, exitCode);
+  });
+  return child;
+}
+const spawnHelper = util.promisify(_spawn);
+
+async function getDateStringForCommit(commit) {
+  let dateString = await execHelper(
+    `git show -s --no-show-signature --format=%cd --date=format:%Y%m%d ${commit}`
+  );
+
+  // On CI environment, this string is wrapped with quotes '...'s
+  if (dateString.startsWith("'")) {
+    dateString = dateString.slice(1, 9);
+  }
+
+  return dateString;
+}
+
+module.exports = {
+  execHelper,
+  spawnHelper,
+  getDateStringForCommit,
+};
diff --git a/compiler/scripts/update-commit-message.js b/compiler/scripts/update-commit-message.js
new file mode 100644
index 00000000000..7cda9547ecc
--- /dev/null
+++ b/compiler/scripts/update-commit-message.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * INSTALLATION:
+ *   - `$ npm install octokit
+ *   - Get a token from https://github.com/settings/tokens for use in the command below,
+ *     set the token value as the GITHUB_AUTH_TOKEN environment variable
+ *
+ *  USAGE:
+ *   - $ GITHUB_AUTH_TOKEN="..." git filter-branch -f --msg-filter "node update-commit-message.js" 2364096862b72cf4d801ef2008c54252335a2df9..HEAD
+ */
+
+const {Octokit, App} = require('octokit');
+const fs = require('fs');
+
+const OWNER = 'facebook';
+const REPO = 'react-forget';
+const octokit = new Octokit({auth: process.env.GITHUB_AUTH_TOKEN});
+
+const fetchPullRequest = async pullNumber => {
+  const response = await octokit.request(
+    'GET /repos/{owner}/{repo}/pulls/{pull_number}',
+    {
+      owner: OWNER,
+      repo: REPO,
+      pull_number: pullNumber,
+      headers: {
+        'X-GitHub-Api-Version': '2022-11-28',
+      },
+    }
+  );
+  return {body: response.data.body, title: response.data.title};
+};
+
+function formatCommitMessage(str) {
+  let formattedStr = '';
+  let line = '';
+
+  const trim = str.replace(/(\r\n|\n|\r)/gm, ' ').trim();
+  if (!trim) {
+    return '';
+  }
+
+  // Split the string into words
+  const words = trim.split(' ');
+  // Iterate over each word
+  for (let i = 0; i < words.length; i++) {
+    // If adding the next word doesn't exceed the line length limit, add it to the line
+    if ((line + words[i]).length <= 80) {
+      line += words[i] + ' ';
+    } else {
+      // Otherwise, add the line to the formatted string and start a new line
+      formattedStr += line + '\n';
+      line = words[i] + ' ';
+    }
+  }
+  // Add the last line to the formatted string
+  formattedStr += line;
+  return formattedStr;
+}
+
+function filterMsg(response) {
+  const {body, title} = response;
+
+  const msgs = body.split('\n\n').flatMap(x => x.split('\r\n'));
+
+  const newMessage = [];
+
+  // Add title
+  msgs.unshift(title);
+
+  for (const msg of msgs) {
+    // remove "Stack from [ghstack] blurb"
+    if (msg.startsWith('Stack from ')) {
+      continue;
+    }
+
+    // remove "* #1234"
+    if (msg.startsWith('* #')) {
+      continue;
+    }
+
+    // remove "* __->__ #1234"
+    if (msg.startsWith('* __')) {
+      continue;
+    }
+
+    const formattedStr = formatCommitMessage(msg);
+    if (!formattedStr) {
+      continue;
+    }
+    newMessage.push(formattedStr);
+  }
+
+  const updatedMsg = newMessage.join('\n\n');
+  return updatedMsg;
+}
+
+function parsePullRequestNumber(text) {
+  if (!text) {
+    return null;
+  }
+  const ghstackUrlRegex =
+    /https:\/\/github\.com\/[\w.-]+\/[\w.-]+\/pull\/(\d+)/;
+  const ghstackMatch = text.match(ghstackUrlRegex);
+  if (ghstackMatch) {
+    return ghstackMatch[1];
+  }
+  const firstLine = text.split('\n').filter(text => text.trim().length > 0)[0];
+  if (firstLine == null) {
+    return null;
+  }
+  const prNumberRegex = /\(#(\d{3,})\)\s*$/;
+  const prNumberMatch = firstLine.match(prNumberRegex);
+  if (prNumberMatch) {
+    return prNumberMatch[1];
+  }
+  return null;
+}
+
+async function main() {
+  const data = fs.readFileSync(0, 'utf-8');
+  const pr = parsePullRequestNumber(data);
+
+  if (pr) {
+    try {
+      const response = await fetchPullRequest(pr);
+      if (!response.body) {
+        console.log(data);
+        return;
+      }
+      const newMessage = filterMsg(response);
+      console.log(newMessage);
+      return;
+    } catch (e) {
+      console.log(data);
+      return;
+    }
+  }
+
+  console.log(data);
+}
+
+main();
diff --git a/compiler/yarn.lock b/compiler/yarn.lock
new file mode 100644
index 00000000000..764200c2ce9
--- /dev/null
+++ b/compiler/yarn.lock
@@ -0,0 +1,11521 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
+"@algolia/client-abtesting@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.23.4.tgz"
+  integrity sha512-WIMT2Kxy+FFWXWQxIU8QgbTioL+SGE24zhpj0kipG4uQbzXwONaWt7ffaYLjfge3gcGSgJVv+1VlahVckafluQ==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/client-analytics@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.23.4.tgz"
+  integrity sha512-4B9gChENsQA9kFmFlb+x3YhBz2Gx3vSsm81FHI1yJ3fn2zlxREHmfrjyqYoMunsU7BybT/o5Nb7ccCbm/vfseA==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/client-common@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.23.4.tgz"
+  integrity sha512-bsj0lwU2ytiWLtl7sPunr+oLe+0YJql9FozJln5BnIiqfKOaseSDdV42060vUy+D4373f2XBI009K/rm2IXYMA==
+
+"@algolia/client-insights@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.23.4.tgz"
+  integrity sha512-XSCtAYvJ/hnfDHfRVMbBH0dayR+2ofVZy3jf5qyifjguC6rwxDsSdQvXpT0QFVyG+h8UPGtDhMPoUIng4wIcZA==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/client-personalization@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.23.4.tgz"
+  integrity sha512-l/0QvqgRFFOf7BnKSJ3myd1WbDr86ftVaa3PQwlsNh7IpIHmvVcT83Bi5zlORozVGMwaKfyPZo6O48PZELsOeA==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/client-query-suggestions@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.23.4.tgz"
+  integrity sha512-TB0htrDgVacVGtPDyENoM6VIeYqR+pMsDovW94dfi2JoaRxfqu/tYmLpvgWcOknP6wLbr8bA+G7t/NiGksNAwQ==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/client-search@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.23.4.tgz"
+  integrity sha512-uBGo6KwUP6z+u6HZWRui8UJClS7fgUIAiYd1prUqCbkzDiCngTOzxaJbEvrdkK0hGCQtnPDiuNhC5MhtVNN4Eg==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/ingestion@1.23.4":
+  version "1.23.4"
+  resolved "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.23.4.tgz"
+  integrity sha512-Si6rFuGnSeEUPU9QchYvbknvEIyCRK7nkeaPVQdZpABU7m4V/tsiWdHmjVodtx3h20VZivJdHeQO9XbHxBOcCw==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/monitoring@1.23.4":
+  version "1.23.4"
+  resolved "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.23.4.tgz"
+  integrity sha512-EXGoVVTshraqPJgr5cMd1fq7Jm71Ew6MpGCEaxI5PErBpJAmKdtjRIzs6JOGKHRaWLi+jdbJPYc2y8RN4qcx5Q==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/recommend@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.23.4.tgz"
+  integrity sha512-1t6glwKVCkjvBNlng2itTf8fwaLSqkL4JaMENgR3WTGR8mmW2akocUy/ZYSQcG4TcR7qu4zW2UMGAwLoWoflgQ==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+"@algolia/requester-browser-xhr@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.23.4.tgz"
+  integrity sha512-UUuizcgc5+VSY8hqzDFVdJ3Wcto03lpbFRGPgW12pHTlUQHUTADtIpIhkLLOZRCjXmCVhtr97Z+eR6LcRYXa3Q==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+
+"@algolia/requester-fetch@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.23.4.tgz"
+  integrity sha512-UhDg6elsek6NnV5z4VG1qMwR6vbp+rTMBEnl/v4hUyXQazU+CNdYkl++cpdmLwGI/7nXc28xtZiL90Es3I7viQ==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+
+"@algolia/requester-node-http@5.23.4":
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.23.4.tgz"
+  integrity sha512-jXGzGBRUS0oywQwnaCA6mMDJO7LoC3dYSLsyNfIqxDR4SNGLhtg3je0Y31lc24OA4nYyKAYgVLtjfrpcpsWShg==
+  dependencies:
+    "@algolia/client-common" "5.23.4"
+
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/code-frame@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz"
+  integrity sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==
+  dependencies:
+    "@babel/highlight" "^7.22.5"
+
+"@babel/code-frame@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be"
+  integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.27.1"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
+"@babel/code-frame@^7.5.5":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz"
+  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+  dependencies:
+    "@babel/highlight" "^7.24.7"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz"
+  integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==
+
+"@babel/compat-data@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.27.1.tgz#db7cf122745e0a332c44e847ddc4f5e5221a43f6"
+  integrity sha512-Q+E+rd/yBzNQhXkG+zQnF58e4zoZfBedaxwzPmicKsiK3nt8iJYrSrDbjwFFDGC4f+rPafqRaPH6TsDoSvMf7A==
+
+"@babel/core@^7.0.0", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.19.1", "@babel/core@^7.24.4":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz"
+  integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.26.0"
+    "@babel/generator" "^7.26.0"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.0"
+    "@babel/parser" "^7.26.0"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.26.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/core@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.2.0.tgz"
+  integrity sha512-7pvAdC4B+iKjFFp9Ztj0QgBndJ++qaMeonT185wAqUnhipw8idm9Rv1UMyBuKtYjfl6ORNkgEgcsYLfHX/GpLw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.2.0"
+    "@babel/helpers" "^7.2.0"
+    "@babel/parser" "^7.2.0"
+    "@babel/template" "^7.1.2"
+    "@babel/traverse" "^7.1.6"
+    "@babel/types" "^7.2.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.10"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@^7.23.9":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.27.1.tgz#89de51e86bd12246003e3524704c49541b16c3e6"
+  integrity sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.27.1"
+    "@babel/helper-compilation-targets" "^7.27.1"
+    "@babel/helper-module-transforms" "^7.27.1"
+    "@babel/helpers" "^7.27.1"
+    "@babel/parser" "^7.27.1"
+    "@babel/template" "^7.27.1"
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/core@^7.26.0":
+  version "7.26.10"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz"
+  integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.10"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.10"
+    "@babel/parser" "^7.26.10"
+    "@babel/template" "^7.26.9"
+    "@babel/traverse" "^7.26.10"
+    "@babel/types" "^7.26.10"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@7.2.0", "@babel/generator@^7.0.0":
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.2.0.tgz"
+  integrity sha512-BA75MVfRlFQG2EZgFYIwyT1r6xSkwfP2bdkY/kLZusEYWiJs4xCowab/alaEaT0wSvmVuXGqiefeBlP+7V1yKg==
+  dependencies:
+    "@babel/types" "^7.2.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+"@babel/generator@^7.2.0", "@babel/generator@^7.26.0", "@babel/generator@^7.26.10", "@babel/generator@^7.26.3", "@babel/generator@^7.27.0", "@babel/generator@^7.7.2", "@babel/generator@^7.7.4":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz"
+  integrity sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==
+  dependencies:
+    "@babel/parser" "^7.27.0"
+    "@babel/types" "^7.27.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/generator@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.27.1.tgz#862d4fad858f7208edd487c28b58144036b76230"
+  integrity sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==
+  dependencies:
+    "@babel/parser" "^7.27.1"
+    "@babel/types" "^7.27.1"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-annotate-as-pure@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.1.tgz#4345d81a9a46a6486e24d069469f13e60445c05d"
+  integrity sha512-WnuuDILl9oOBbKnb4L+DyODx7iC47XfzmNCpTttFsSp6hTG7XZxu60+4IO+2/hPfcGOoKbFiwoI/+zwARbNQow==
+  dependencies:
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9", "@babel/helper-compilation-targets@^7.26.5":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.0.tgz"
+  integrity sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==
+  dependencies:
+    "@babel/compat-data" "^7.26.8"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-compilation-targets@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.1.tgz#eac1096c7374f161e4f33fc8ae38f4ddf122087a"
+  integrity sha512-2YaDd/Rd9E598B5+WIc8wJPmWETiiJXFYVE60oX8FDohv7rAUU3CQj+A1MgeEmcsk2+dQuEjIe/GDvig0SqL4g==
+  dependencies:
+    "@babel/compat-data" "^7.27.1"
+    "@babel/helper-validator-option" "^7.27.1"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.25.9", "@babel/helper-create-class-features-plugin@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.0.tgz"
+  integrity sha512-vSGCvMecvFCd/BdpGlhpXYNhhC4ccxyvQWpbGL4CWbvfEoLFWUZuSuf7s9Aw70flgQF+6vptvgK2IfOnKlRmBg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.27.0"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz#5bee4262a6ea5ddc852d0806199eb17ca3de9281"
+  integrity sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.27.1"
+    "@babel/helper-member-expression-to-functions" "^7.27.1"
+    "@babel/helper-optimise-call-expression" "^7.27.1"
+    "@babel/helper-replace-supers" "^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1"
+    "@babel/traverse" "^7.27.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.27.0.tgz"
+  integrity sha512-fO8l08T76v48BhpNRW/nQ0MxfnSdoSKUJBMjubOAYffsVuGG5qOfMq7N6Es7UJvi7Y8goXXo07EfcHZXDPuELQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    regexpu-core "^6.2.0"
+    semver "^6.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.6.3", "@babel/helper-define-polyfill-provider@^0.6.4":
+  version "0.6.4"
+  resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.4.tgz"
+  integrity sha512-jljfR1rGnXXNWnmQg2K3+bvhkxB51Rl32QRaOTuwwjviGrHzIbSc8+x9CpraDtbT7mfyjXObULP4w/adunNwAw==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz#4b31ba9551d1f90781ba83491dd59cf9b269f7d9"
+  integrity sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==
+  dependencies:
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-function-name@^7.7.4":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz#75f1e1725742f39ac6584ee0b16d94513da38dd2"
+  integrity sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==
+  dependencies:
+    "@babel/template" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-member-expression-to-functions@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz#ea1211276be93e798ce19037da6f06fbb994fa44"
+  integrity sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-imports@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz#7ef769a323e2655e126673bb6d2d6913bbead204"
+  integrity sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-module-transforms@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz"
+  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.2"
+    "@babel/types" "^7.21.2"
+
+"@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.27.1.tgz#e1663b8b71d2de948da5c4fb2a20ca4f3ec27a6f"
+  integrity sha512-9yHn519/8KvTU5BjTVEEeIM3w9/2yXNKoD82JifINImhpKkARMJKPP59kLo+BafpdN5zgNeIcS4jsGDmd3l58g==
+  dependencies:
+    "@babel/helper-module-imports" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+    "@babel/traverse" "^7.27.1"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz#c65221b61a643f3e62705e5dd2b5f115e35f9200"
+  integrity sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==
+  dependencies:
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
+
+"@babel/helper-plugin-utils@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
+"@babel/helper-plugin-utils@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz#ddb2f876534ff8013e6c2b299bf4d39b3c51d44c"
+  integrity sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==
+
+"@babel/helper-remap-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz"
+  integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-wrap-function" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-replace-supers@^7.25.9", "@babel/helper-replace-supers@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
+
+"@babel/helper-replace-supers@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz#b1ed2d634ce3bdb730e4b52de30f8cccfd692bc0"
+  integrity sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.27.1"
+    "@babel/helper-optimise-call-expression" "^7.27.1"
+    "@babel/traverse" "^7.27.1"
+
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+  dependencies:
+    "@babel/types" "^7.20.2"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz#62bb91b3abba8c7f1fec0252d9dbea11b3ee7a56"
+  integrity sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-split-export-declaration@^7.18.6", "@babel/helper-split-export-declaration@^7.7.4":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz"
+  integrity sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==
+  dependencies:
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.19.1", "@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-identifier@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz"
+  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/helper-validator-option@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz"
+  integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helper-validator-option@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz#fa52f5b1e7db1ab049445b421c4471303897702f"
+  integrity sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==
+
+"@babel/helper-wrap-function@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz"
+  integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helpers@^7.2.0":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz"
+  integrity sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
+"@babel/helpers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz"
+  integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.0"
+
+"@babel/helpers@^7.26.10":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz"
+  integrity sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==
+  dependencies:
+    "@babel/template" "^7.27.0"
+    "@babel/types" "^7.27.0"
+
+"@babel/helpers@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.27.1.tgz#ffc27013038607cdba3288e692c3611c06a18aa4"
+  integrity sha512-FCvFTm0sWV8Fxhpp2McP5/W53GPllQ9QeQ7SiqGWjMf/LVG07lFa5+pgK05IRhVwtvafT22KF+ZSnM9I545CvQ==
+  dependencies:
+    "@babel/template" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/highlight@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz"
+  integrity sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.5"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz"
+  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.2.0", "@babel/parser@^7.20.15", "@babel/parser@^7.26", "@babel/parser@^7.26.0", "@babel/parser@^7.26.10", "@babel/parser@^7.26.3", "@babel/parser@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz"
+  integrity sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==
+  dependencies:
+    "@babel/types" "^7.27.0"
+
+"@babel/parser@^7.20.7":
+  version "7.21.2"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz"
+  integrity sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==
+
+"@babel/parser@^7.23.9", "@babel/parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.27.1.tgz#c55d5bed74449d1223701f1869b9ee345cc94cc9"
+  integrity sha512-I0dZ3ZpCrJ1c04OqlNsQcKiZlsrXf/kkE4FXzID9rIOYICsAbA8mMDzhW/luRNAHdCNt7os/u8wenklZDlUVUQ==
+  dependencies:
+    "@babel/types" "^7.27.1"
+
+"@babel/parser@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz"
+  integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
+
+"@babel/parser@^7.7.4":
+  version "7.21.4"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz"
+  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz"
+  integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz"
+  integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz"
+  integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz"
+  integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz"
+  integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.0.0", "@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-flow@^7.18.6", "@babel/plugin-syntax-flow@^7.7.4":
+  version "7.21.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.21.4.tgz"
+  integrity sha512-l9xd3N+XG4fZRxEP3vXdK6RW7vN1Uf5dxzRC/09wV86wqZ/YYQooBIGNsiRdfNR3/q2/5pPzV4B54J/9ctX5jw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-syntax-flow@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz"
+  integrity sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-assertions@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz"
+  integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-attributes@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz"
+  integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.0.0":
+  version "7.21.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz"
+  integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.25.9", "@babel/plugin-syntax-jsx@^7.7.2":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-jsx@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz#2f9beb5eff30fa507c5532d107daac7b888fa34c"
+  integrity sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.27.1"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.0.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.2.0", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.0.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.0.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.18.6", "@babel/plugin-syntax-typescript@^7.25.9", "@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-typescript@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz#5147d29066a793450f220c63fa3a9431b7e6dd18"
+  integrity sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.27.1"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz"
+  integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-async-generator-functions@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz"
+  integrity sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+    "@babel/traverse" "^7.26.8"
+
+"@babel/plugin-transform-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz"
+  integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+
+"@babel/plugin-transform-block-scoped-functions@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz"
+  integrity sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-block-scoping@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz"
+  integrity sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-block-scoping@^7.25.9":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.27.0.tgz"
+  integrity sha512-u1jGphZ8uDI2Pj/HJj6YQ6XQLZCNjOlprjxB5SVz6rq2T6SwAR+CdrWK0CP7F+9rDVMXdB0+r6Am5G5aobOjAQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-class-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz"
+  integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-static-block@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz"
+  integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-classes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz"
+  integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz"
+  integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/template" "^7.25.9"
+
+"@babel/plugin-transform-destructuring@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz"
+  integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dotall-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz"
+  integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-keys@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz"
+  integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz"
+  integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dynamic-import@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz"
+  integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-exponentiation-operator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz"
+  integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-export-namespace-from@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz"
+  integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-flow-strip-types@^7.2.0":
+  version "7.21.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.21.0.tgz"
+  integrity sha512-FlFA2Mj87a6sDkW4gfGrQQqwY/dLlBAyJa2dJEZ+FHXUVHBflO2wyKvg+OOEzXfrKYIa4HWl0mgmbCzt0cMb7w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-flow" "^7.18.6"
+
+"@babel/plugin-transform-flow-strip-types@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz"
+  integrity sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-flow" "^7.22.5"
+
+"@babel/plugin-transform-for-of@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz"
+  integrity sha512-Hry8AusVm8LW5BVFgiyUReuoGzPUpdHQQqJY5bZnbbf+ngOHWuCuYFKw/BqaaWlvEUrF91HMhDtEaI1hZzNbLg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-function-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz"
+  integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-json-strings@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz"
+  integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz"
+  integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-logical-assignment-operators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz"
+  integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-member-expression-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz"
+  integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-amd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz"
+  integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-commonjs@^7.18.6", "@babel/plugin-transform-modules-commonjs@^7.25.9", "@babel/plugin-transform-modules-commonjs@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-commonjs@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.27.1.tgz#8e44ed37c2787ecc23bdc367f49977476614e832"
+  integrity sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.27.1"
+    "@babel/helper-plugin-utils" "^7.27.1"
+
+"@babel/plugin-transform-modules-commonjs@^7.8.3":
+  version "7.21.2"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz"
+  integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-simple-access" "^7.20.2"
+
+"@babel/plugin-transform-modules-systemjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz"
+  integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-modules-umd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz"
+  integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz"
+  integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-new-target@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz"
+  integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-nullish-coalescing-operator@^7.26.6":
+  version "7.26.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz"
+  integrity sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-numeric-separator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz"
+  integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-object-rest-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz"
+  integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+
+"@babel/plugin-transform-object-super@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz"
+  integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+
+"@babel/plugin-transform-optional-catch-binding@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz"
+  integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz"
+  integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-parameters@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz"
+  integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-methods@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz"
+  integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-property-in-object@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz"
+  integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-property-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz"
+  integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-display-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz"
+  integrity sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx-development@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz"
+  integrity sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz"
+  integrity sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/plugin-transform-react-pure-annotations@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz"
+  integrity sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-regenerator@^7.25.9":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.27.0.tgz"
+  integrity sha512-LX/vCajUJQDqE7Aum/ELUMZAY19+cDpghxrnyt5I1tV6X5PyC86AOoWXWFYFeIvauyeSA6/ktn4tQVn/3ZifsA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-regexp-modifiers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz"
+  integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-reserved-words@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz"
+  integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-shorthand-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz"
+  integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz"
+  integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-sticky-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz"
+  integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-template-literals@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz"
+  integrity sha512-OmGDL5/J0CJPJZTHZbi2XpO0tyT2Ia7fzpW5GURwdtp2X3fMmN8au/ej6peC/T33/+CRiIpA8Krse8hFGVmT5Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-typeof-symbol@^7.26.7":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.0.tgz"
+  integrity sha512-+LLkxA9rKJpNoGsbLnAgOCdESl73vwYn+V6b+5wHbrE7OGKVDPHIQvbFSzqE6rwqaCw2RE+zdJrlLkcf8YOA0w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-typescript@^7.25.9", "@babel/plugin-transform-typescript@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.27.0.tgz"
+  integrity sha512-fRGGjO2UEGPjvEcyAZXRXAS8AfdaQoq7HnxAbJoAoW10B9xOKesmmndJv+Sym2a+9FHWZ9KbyyLCe9s0Sn5jtg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.27.0"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-syntax-typescript" "^7.25.9"
+
+"@babel/plugin-transform-typescript@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.27.1.tgz#d3bb65598bece03f773111e88cc4e8e5070f1140"
+  integrity sha512-Q5sT5+O4QUebHdbwKedFBEwRLb02zJ7r4A5Gg2hUoLuU3FjdMcyqcywqUrLCaDsFCxzokf7u9kuy7qz51YUuAg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.27.1"
+    "@babel/helper-create-class-features-plugin" "^7.27.1"
+    "@babel/helper-plugin-utils" "^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1"
+    "@babel/plugin-syntax-typescript" "^7.27.1"
+
+"@babel/plugin-transform-unicode-escapes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz"
+  integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-property-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz"
+  integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz"
+  integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz"
+  integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/preset-env@^7.22.4", "@babel/preset-env@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.9.tgz"
+  integrity sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==
+  dependencies:
+    "@babel/compat-data" "^7.26.8"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.9"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.9"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.9"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions" "^7.26.0"
+    "@babel/plugin-syntax-import-attributes" "^7.26.0"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.26.8"
+    "@babel/plugin-transform-async-to-generator" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.26.5"
+    "@babel/plugin-transform-block-scoping" "^7.25.9"
+    "@babel/plugin-transform-class-properties" "^7.25.9"
+    "@babel/plugin-transform-class-static-block" "^7.26.0"
+    "@babel/plugin-transform-classes" "^7.25.9"
+    "@babel/plugin-transform-computed-properties" "^7.25.9"
+    "@babel/plugin-transform-destructuring" "^7.25.9"
+    "@babel/plugin-transform-dotall-regex" "^7.25.9"
+    "@babel/plugin-transform-duplicate-keys" "^7.25.9"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-dynamic-import" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
+    "@babel/plugin-transform-export-namespace-from" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.26.9"
+    "@babel/plugin-transform-function-name" "^7.25.9"
+    "@babel/plugin-transform-json-strings" "^7.25.9"
+    "@babel/plugin-transform-literals" "^7.25.9"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.25.9"
+    "@babel/plugin-transform-modules-amd" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.9"
+    "@babel/plugin-transform-modules-umd" "^7.25.9"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-new-target" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.26.6"
+    "@babel/plugin-transform-numeric-separator" "^7.25.9"
+    "@babel/plugin-transform-object-rest-spread" "^7.25.9"
+    "@babel/plugin-transform-object-super" "^7.25.9"
+    "@babel/plugin-transform-optional-catch-binding" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+    "@babel/plugin-transform-private-methods" "^7.25.9"
+    "@babel/plugin-transform-private-property-in-object" "^7.25.9"
+    "@babel/plugin-transform-property-literals" "^7.25.9"
+    "@babel/plugin-transform-regenerator" "^7.25.9"
+    "@babel/plugin-transform-regexp-modifiers" "^7.26.0"
+    "@babel/plugin-transform-reserved-words" "^7.25.9"
+    "@babel/plugin-transform-shorthand-properties" "^7.25.9"
+    "@babel/plugin-transform-spread" "^7.25.9"
+    "@babel/plugin-transform-sticky-regex" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.26.8"
+    "@babel/plugin-transform-typeof-symbol" "^7.26.7"
+    "@babel/plugin-transform-unicode-escapes" "^7.25.9"
+    "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.11.0"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.40.0"
+    semver "^6.3.1"
+
+"@babel/preset-flow@^7.7.4":
+  version "7.22.5"
+  resolved "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.22.5.tgz"
+  integrity sha512-ta2qZ+LSiGCrP5pgcGt8xMnnkXQrq8Sa4Ulhy06BOlF5QbLw9q5hIx7bn5MrsvyTGAfh6kTOo07Q+Pfld/8Y5Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    "@babel/plugin-transform-flow-strip-types" "^7.22.5"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.18.6":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.26.3.tgz"
+  integrity sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-transform-react-display-name" "^7.25.9"
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+    "@babel/plugin-transform-react-jsx-development" "^7.25.9"
+    "@babel/plugin-transform-react-pure-annotations" "^7.25.9"
+
+"@babel/preset-typescript@^7.18.6":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.0.tgz"
+  integrity sha512-vxaPFfJtHhgeOVXRKuHpHPAOgymmy8V8I65T1q53R7GCZlefKeCaTyDs3zOPHTTbmquvNlQYC5klEvWsBAtrBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
+    "@babel/plugin-transform-typescript" "^7.27.0"
+
+"@babel/preset-typescript@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz"
+  integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-typescript" "^7.25.9"
+
+"@babel/preset-typescript@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz#190742a6428d282306648a55b0529b561484f912"
+  integrity sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.27.1"
+    "@babel/helper-validator-option" "^7.27.1"
+    "@babel/plugin-syntax-jsx" "^7.27.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.27.1"
+    "@babel/plugin-transform-typescript" "^7.27.1"
+
+"@babel/register@^7.0.0":
+  version "7.21.0"
+  resolved "https://registry.npmjs.org/@babel/register/-/register-7.21.0.tgz"
+  integrity sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.5"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.21.0":
+  version "7.22.3"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz"
+  integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/template@^7.1.2", "@babel/template@^7.18.10", "@babel/template@^7.25.9", "@babel/template@^7.26.9", "@babel/template@^7.27.0", "@babel/template@^7.3.3":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz"
+  integrity sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/parser" "^7.27.0"
+    "@babel/types" "^7.27.0"
+
+"@babel/template@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/template@^7.24.7", "@babel/template@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.1.tgz#b9e4f55c17a92312774dfbdde1b3c01c547bbae2"
+  integrity sha512-Fyo3ghWMqkHHpHQCoBs2VnYjR4iWFFjguTDEqA5WgZDOrFesVjMhMM2FSqTKSoUSDO1VQtavj8NFpdRBEvJTtg==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/parser" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.1", "@babel/traverse@^7.25.9", "@babel/traverse@^7.26.10", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.8", "@babel/traverse@^7.27.0":
+  version "7.27.0"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz"
+  integrity sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.27.0"
+    "@babel/parser" "^7.27.0"
+    "@babel/template" "^7.27.0"
+    "@babel/types" "^7.27.0"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.19.0", "@babel/traverse@^7.21.2":
+  version "7.26.4"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz"
+  integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.3"
+    "@babel/parser" "^7.26.3"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.3"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.2.0", "@babel/traverse@^7.7.2":
+  version "7.7.4"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz"
+  integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.4"
+    "@babel/helper-function-name" "^7.7.4"
+    "@babel/helper-split-export-declaration" "^7.7.4"
+    "@babel/parser" "^7.7.4"
+    "@babel/types" "^7.7.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/traverse@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.27.1.tgz#4db772902b133bbddd1c4f7a7ee47761c1b9f291"
+  integrity sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.27.1"
+    "@babel/parser" "^7.27.1"
+    "@babel/template" "^7.27.1"
+    "@babel/types" "^7.27.1"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@7.26.3", "@babel/types@^7.0.0", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.2.2", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.2", "@babel/types@^7.24.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.10", "@babel/types@^7.26.3", "@babel/types@^7.27.0", "@babel/types@^7.27.1", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.4":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@colors/colors@1.6.0", "@colors/colors@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz"
+  integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==
+
+"@cspotcode/source-map-support@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"
+  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
+  dependencies:
+    "@jridgewell/trace-mapping" "0.3.9"
+
+"@dabh/diagnostics@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz"
+  integrity sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==
+  dependencies:
+    colorspace "1.1.x"
+    enabled "2.0.x"
+    kuler "^2.0.0"
+
+"@esbuild/aix-ppc64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz#499600c5e1757a524990d5d92601f0ac3ce87f64"
+  integrity sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==
+
+"@esbuild/android-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.0.tgz#b9b8231561a1dfb94eb31f4ee056b92a985c324f"
+  integrity sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==
+
+"@esbuild/android-arm@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.0.tgz#ca6e7888942505f13e88ac9f5f7d2a72f9facd2b"
+  integrity sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==
+
+"@esbuild/android-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.0.tgz#e765ea753bac442dfc9cb53652ce8bd39d33e163"
+  integrity sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==
+
+"@esbuild/darwin-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.0.tgz"
+  integrity sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==
+
+"@esbuild/darwin-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.0.tgz#91979d98d30ba6e7d69b22c617cc82bdad60e47a"
+  integrity sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==
+
+"@esbuild/freebsd-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.0.tgz#b97e97073310736b430a07b099d837084b85e9ce"
+  integrity sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==
+
+"@esbuild/freebsd-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.0.tgz#f3b694d0da61d9910ec7deff794d444cfbf3b6e7"
+  integrity sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==
+
+"@esbuild/linux-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.0.tgz#f921f699f162f332036d5657cad9036f7a993f73"
+  integrity sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==
+
+"@esbuild/linux-arm@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.0.tgz#cc49305b3c6da317c900688995a4050e6cc91ca3"
+  integrity sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==
+
+"@esbuild/linux-ia32@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.0.tgz#3e0736fcfab16cff042dec806247e2c76e109e19"
+  integrity sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==
+
+"@esbuild/linux-loong64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.0.tgz#ea2bf730883cddb9dfb85124232b5a875b8020c7"
+  integrity sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==
+
+"@esbuild/linux-mips64el@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.0.tgz#4cababb14eede09248980a2d2d8b966464294ff1"
+  integrity sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==
+
+"@esbuild/linux-ppc64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.0.tgz#8860a4609914c065373a77242e985179658e1951"
+  integrity sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==
+
+"@esbuild/linux-riscv64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.0.tgz#baf26e20bb2d38cfb86ee282dff840c04f4ed987"
+  integrity sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==
+
+"@esbuild/linux-s390x@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.0.tgz#8323afc0d6cb1b6dc6e9fd21efd9e1542c3640a4"
+  integrity sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==
+
+"@esbuild/linux-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz#08fcf60cb400ed2382e9f8e0f5590bac8810469a"
+  integrity sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==
+
+"@esbuild/netbsd-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.0.tgz#935c6c74e20f7224918fbe2e6c6fe865b6c6ea5b"
+  integrity sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==
+
+"@esbuild/netbsd-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.0.tgz#414677cef66d16c5a4d210751eb2881bb9c1b62b"
+  integrity sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==
+
+"@esbuild/openbsd-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.0.tgz#8fd55a4d08d25cdc572844f13c88d678c84d13f7"
+  integrity sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==
+
+"@esbuild/openbsd-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.0.tgz#0c48ddb1494bbc2d6bcbaa1429a7f465fa1dedde"
+  integrity sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==
+
+"@esbuild/sunos-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.0.tgz#86ff9075d77962b60dd26203d7352f92684c8c92"
+  integrity sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==
+
+"@esbuild/win32-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.0.tgz#849c62327c3229467f5b5cd681bf50588442e96c"
+  integrity sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==
+
+"@esbuild/win32-ia32@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.0.tgz#f62eb480cd7cca088cb65bb46a6db25b725dc079"
+  integrity sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==
+
+"@esbuild/win32-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.0.tgz#c8e119a30a7c8d60b9d2e22d2073722dde3b710b"
+  integrity sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==
+
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.10.0":
+  version "4.11.1"
+  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.1.tgz"
+  integrity sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==
+
+"@eslint-community/regexpp@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
+"@eslint/config-array@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz"
+  integrity sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==
+  dependencies:
+    "@eslint/object-schema" "^2.1.5"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/core@^0.9.0":
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/@eslint/core/-/core-0.9.1.tgz"
+  integrity sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==
+  dependencies:
+    "@types/json-schema" "^7.0.15"
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/eslintrc@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz"
+  integrity sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^10.0.1"
+    globals "^14.0.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
+
+"@eslint/js@9.17.0", "@eslint/js@^9.13.0":
+  version "9.17.0"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-9.17.0.tgz"
+  integrity sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==
+
+"@eslint/object-schema@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz"
+  integrity sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==
+
+"@eslint/plugin-kit@^0.2.3":
+  version "0.2.4"
+  resolved "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz"
+  integrity sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==
+  dependencies:
+    levn "^0.4.1"
+
+"@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
+  version "9.3.0"
+  resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz"
+  integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
+
+"@hapi/topo@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz"
+  integrity sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
+"@humanfs/core@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz"
+  integrity sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==
+
+"@humanfs/node@^0.16.6":
+  version "0.16.6"
+  resolved "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz"
+  integrity sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==
+  dependencies:
+    "@humanfs/core" "^0.19.1"
+    "@humanwhocodes/retry" "^0.3.0"
+
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz"
+  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
+
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
+"@humanwhocodes/retry@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz"
+  integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
+
+"@humanwhocodes/retry@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz"
+  integrity sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/console/-/console-28.1.3.tgz"
+  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+
+"@jest/console@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/console/-/console-29.0.3.tgz"
+  integrity sha512-cGg0r+klVHSYnfE977S9wmpuQ9L+iYuYgL+5bPXiUlUynLLYunRxswEmhBzvrSKGof5AKiHuTTmUKAqRcDY9dg==
+  dependencies:
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.0.3"
+    jest-util "^29.0.3"
+    slash "^3.0.0"
+
+"@jest/console@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/console/-/console-29.5.0.tgz"
+  integrity sha512-NEpkObxPwyw/XxZVLPmAGKE89IQRp4puc6IQRPru6JKd1M3fW9v1xM1AnzIJE65hbCkzQAdnL8P47e9hzhiYLQ==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+    slash "^3.0.0"
+
+"@jest/console@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.7.0.tgz#cd4822dbdb84529265c5a2bdb529a3c9cc950ffc"
+  integrity sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    slash "^3.0.0"
+
+"@jest/core@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/core/-/core-28.1.3.tgz"
+  integrity sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/reporters" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^28.1.3"
+    jest-config "^28.1.3"
+    jest-haste-map "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.3"
+    jest-resolve-dependencies "^28.1.3"
+    jest-runner "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    jest-watcher "^28.1.3"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/core@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/core/-/core-29.0.3.tgz"
+  integrity sha512-1d0hLbOrM1qQE3eP3DtakeMbKTcXiXP3afWxqz103xPyddS2NhnNghS7MaXx1dcDt4/6p4nlhmeILo2ofgi8cQ==
+  dependencies:
+    "@jest/console" "^29.0.3"
+    "@jest/reporters" "^29.0.3"
+    "@jest/test-result" "^29.0.3"
+    "@jest/transform" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.0.0"
+    jest-config "^29.0.3"
+    jest-haste-map "^29.0.3"
+    jest-message-util "^29.0.3"
+    jest-regex-util "^29.0.0"
+    jest-resolve "^29.0.3"
+    jest-resolve-dependencies "^29.0.3"
+    jest-runner "^29.0.3"
+    jest-runtime "^29.0.3"
+    jest-snapshot "^29.0.3"
+    jest-util "^29.0.3"
+    jest-validate "^29.0.3"
+    jest-watcher "^29.0.3"
+    micromatch "^4.0.4"
+    pretty-format "^29.0.3"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/core@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/core/-/core-29.5.0.tgz"
+  integrity sha512-28UzQc7ulUrOQw1IsN/kv1QES3q2kkbl/wGslyhAclqZ/8cMdB5M68BffkIdSJgKBUt50d3hbwJ92XESlE7LiQ==
+  dependencies:
+    "@jest/console" "^29.5.0"
+    "@jest/reporters" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.5.0"
+    jest-config "^29.5.0"
+    jest-haste-map "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.5.0"
+    jest-resolve-dependencies "^29.5.0"
+    jest-runner "^29.5.0"
+    jest-runtime "^29.5.0"
+    jest-snapshot "^29.5.0"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    jest-watcher "^29.5.0"
+    micromatch "^4.0.4"
+    pretty-format "^29.5.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/core@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.7.0.tgz#b6cccc239f30ff36609658c5a5e2291757ce448f"
+  integrity sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/reporters" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.7.0"
+    jest-config "^29.7.0"
+    jest-haste-map "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-resolve-dependencies "^29.7.0"
+    jest-runner "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    jest-watcher "^29.7.0"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/diff-sequences@30.0.1":
+  version "30.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/diff-sequences/-/diff-sequences-30.0.1.tgz#0ededeae4d071f5c8ffe3678d15f3a1be09156be"
+  integrity sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==
+
+"@jest/environment@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/environment/-/environment-28.1.3.tgz"
+  integrity sha512-1bf40cMFTEkKyEf585R9Iz1WayDjHoHqvts0XFYEqyKM3cFWDpeMoqKKTAF9LSYQModPUlh8FKptoM2YcMWAXA==
+  dependencies:
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    jest-mock "^28.1.3"
+
+"@jest/environment@^29.0.3", "@jest/environment@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz"
+  integrity sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==
+  dependencies:
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
+
+"@jest/environment@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/environment/-/environment-29.5.0.tgz"
+  integrity sha512-5FXw2+wD29YU1d4I2htpRX7jYnAyTRjP2CsXQdo9SAM8g3ifxWPSV0HnClSn71xwctr0U3oZIIH+dtbfmnbXVQ==
+  dependencies:
+    "@jest/fake-timers" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    jest-mock "^29.5.0"
+
+"@jest/expect-utils@30.0.5":
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-30.0.5.tgz#9d42e4b8bc80367db30abc6c42b2cb14073f66fc"
+  integrity sha512-F3lmTT7CXWYywoVUGTCmom0vXq3HTTkaZyTAzIy+bXSBizB7o5qzlC9VCtq0arOa8GqmNsbg/cE9C6HLn7Szew==
+  dependencies:
+    "@jest/get-type" "30.0.1"
+
+"@jest/expect-utils@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-28.1.3.tgz"
+  integrity sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==
+  dependencies:
+    jest-get-type "^28.0.2"
+
+"@jest/expect-utils@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.0.3.tgz"
+  integrity sha512-i1xUkau7K/63MpdwiRqaxgZOjxYs4f0WMTGJnYwUKubsNRZSeQbLorS7+I4uXVF9KQ5r61BUPAUMZ7Lf66l64Q==
+  dependencies:
+    jest-get-type "^29.0.0"
+
+"@jest/expect-utils@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.5.0.tgz"
+  integrity sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg==
+  dependencies:
+    jest-get-type "^29.4.3"
+
+"@jest/expect-utils@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
+  integrity sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==
+  dependencies:
+    jest-get-type "^29.6.3"
+
+"@jest/expect@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/expect/-/expect-28.1.3.tgz"
+  integrity sha512-lzc8CpUbSoE4dqT0U+g1qODQjBRHPpCPXissXD4mS9+sWQdmmpeJ9zSH1rS1HEkrsMN0fb7nKrJ9giAR1d3wBw==
+  dependencies:
+    expect "^28.1.3"
+    jest-snapshot "^28.1.3"
+
+"@jest/expect@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/expect/-/expect-29.0.3.tgz"
+  integrity sha512-6W7K+fsI23FQ01H/BWccPyDZFrnU9QlzDcKOjrNVU5L8yUORFAJJIpmyxWPW70+X624KUNqzZwPThPMX28aXEQ==
+  dependencies:
+    expect "^29.0.3"
+    jest-snapshot "^29.0.3"
+
+"@jest/expect@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/expect/-/expect-29.5.0.tgz"
+  integrity sha512-PueDR2HGihN3ciUNGr4uelropW7rqUfTiOn+8u0leg/42UhblPxHkfoh0Ruu3I9Y1962P3u2DY4+h7GVTSVU6g==
+  dependencies:
+    expect "^29.5.0"
+    jest-snapshot "^29.5.0"
+
+"@jest/expect@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.7.0.tgz#76a3edb0cb753b70dfbfe23283510d3d45432bf2"
+  integrity sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==
+  dependencies:
+    expect "^29.7.0"
+    jest-snapshot "^29.7.0"
+
+"@jest/fake-timers@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-28.1.3.tgz"
+  integrity sha512-D/wOkL2POHv52h+ok5Oj/1gOG9HSywdoPtFsRCUmlCILXNn5eIWmcnd3DIiWlJnpGvQtmajqBP95Ei0EimxfLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@sinonjs/fake-timers" "^9.1.2"
+    "@types/node" "*"
+    jest-message-util "^28.1.3"
+    jest-mock "^28.1.3"
+    jest-util "^28.1.3"
+
+"@jest/fake-timers@^29.0.3", "@jest/fake-timers@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz"
+  integrity sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.7.0"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
+
+"@jest/fake-timers@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.5.0.tgz"
+  integrity sha512-9ARvuAAQcBwDAqOnglWq2zwNIRUDtk/SCkp/ToGEhFv5r86K21l+VEs0qNTaXtyiY0lEePl3kylijSYJQqdbDg==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.5.0"
+    jest-mock "^29.5.0"
+    jest-util "^29.5.0"
+
+"@jest/get-type@30.0.1":
+  version "30.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/get-type/-/get-type-30.0.1.tgz#0d32f1bbfba511948ad247ab01b9007724fc9f52"
+  integrity sha512-AyYdemXCptSRFirI5EPazNxyPwAL0jXt3zceFjaj8NFiKP9pOi0bfXonf6qkf82z2t3QWPeLCWWw4stPBzctLw==
+
+"@jest/globals@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/globals/-/globals-28.1.3.tgz"
+  integrity sha512-XFU4P4phyryCXu1pbcqMO0GSQcYe1IsalYCDzRNyhetyeyxMcIxa11qPNDpVNLeretItNqEmYYQn1UYz/5x1NA==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/expect" "^28.1.3"
+    "@jest/types" "^28.1.3"
+
+"@jest/globals@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/globals/-/globals-29.0.3.tgz"
+  integrity sha512-YqGHT65rFY2siPIHHFjuCGUsbzRjdqkwbat+Of6DmYRg5shIXXrLdZoVE/+TJ9O1dsKsFmYhU58JvIbZRU1Z9w==
+  dependencies:
+    "@jest/environment" "^29.0.3"
+    "@jest/expect" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    jest-mock "^29.0.3"
+
+"@jest/globals@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/globals/-/globals-29.5.0.tgz"
+  integrity sha512-S02y0qMWGihdzNbUiqSAiKSpSozSuHX5UYc7QbnHP+D9Lyw8DgGGCinrN9uSuHPeKgSSzvPom2q1nAtBvUsvPQ==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/expect" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    jest-mock "^29.5.0"
+
+"@jest/globals@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.7.0.tgz#8d9290f9ec47ff772607fa864ca1d5a2efae1d4d"
+  integrity sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/expect" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    jest-mock "^29.7.0"
+
+"@jest/pattern@30.0.1":
+  version "30.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/pattern/-/pattern-30.0.1.tgz#d5304147f49a052900b4b853dedb111d080e199f"
+  integrity sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==
+  dependencies:
+    "@types/node" "*"
+    jest-regex-util "30.0.1"
+
+"@jest/reporters@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/reporters/-/reporters-28.1.3.tgz"
+  integrity sha512-JuAy7wkxQZVNU/V6g9xKzCGC5LVXx9FDcABKsSXp5MiKPEE2144a/vXTEDoyzjUpZKfVwp08Wqg5A4WfTMAzjg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@jridgewell/trace-mapping" "^0.3.13"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    jest-worker "^28.1.3"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/reporters@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/reporters/-/reporters-29.0.3.tgz"
+  integrity sha512-3+QU3d4aiyOWfmk1obDerie4XNCaD5Xo1IlKNde2yGEi02WQD+ZQD0i5Hgqm1e73sMV7kw6pMlCnprtEwEVwxw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.0.3"
+    "@jest/test-result" "^29.0.3"
+    "@jest/transform" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.0.3"
+    jest-util "^29.0.3"
+    jest-worker "^29.0.3"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/reporters@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/reporters/-/reporters-29.5.0.tgz"
+  integrity sha512-D05STXqj/M8bP9hQNSICtPqz97u7ffGzZu+9XLucXhkOFBqKcXe04JLZOgIekOxdb73MAoBUFnqvf7MCpKk5OA==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+    jest-worker "^29.5.0"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/reporters@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.7.0.tgz#04b262ecb3b8faa83b0b3d321623972393e8f4c7"
+  integrity sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^6.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    jest-worker "^29.7.0"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/schemas@30.0.5":
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-30.0.5.tgz#7bdf69fc5a368a5abdb49fd91036c55225846473"
+  integrity sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==
+  dependencies:
+    "@sinclair/typebox" "^0.34.0"
+
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/schemas@^29.0.0":
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/@jest/schemas/-/schemas-29.0.0.tgz"
+  integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/schemas@^29.4.3":
+  version "29.4.3"
+  resolved "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz"
+  integrity sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==
+  dependencies:
+    "@sinclair/typebox" "^0.25.16"
+
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
+"@jest/source-map@^28.1.2":
+  version "28.1.2"
+  resolved "https://registry.npmjs.org/@jest/source-map/-/source-map-28.1.2.tgz"
+  integrity sha512-cV8Lx3BeStJb8ipPHnqVw/IM2VCMWO3crWZzYodSIkxXnRcXJipCdx1JCK0K5MsJJouZQTH73mzf4vgxRaH9ww==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.13"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/source-map@^29.0.0":
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/@jest/source-map/-/source-map-29.0.0.tgz"
+  integrity sha512-nOr+0EM8GiHf34mq2GcJyz/gYFyLQ2INDhAylrZJ9mMWoW21mLBfZa0BUVPPMxVYrLjeiRe2Z7kWXOGnS0TFhQ==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.15"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/source-map@^29.4.3":
+  version "29.4.3"
+  resolved "https://registry.npmjs.org/@jest/source-map/-/source-map-29.4.3.tgz"
+  integrity sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.15"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/source-map@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.3.tgz#d90ba772095cf37a34a5eb9413f1b562a08554c4"
+  integrity sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/test-result@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/test-result/-/test-result-28.1.3.tgz"
+  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/test-result/-/test-result-29.0.3.tgz"
+  integrity sha512-vViVnQjCgTmbhDKEonKJPtcFe9G/CJO4/Np4XwYJah+lF2oI7KKeRp8t1dFvv44wN2NdbDb/qC6pi++Vpp0Dlg==
+  dependencies:
+    "@jest/console" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/test-result/-/test-result-29.5.0.tgz"
+  integrity sha512-fGl4rfitnbfLsrfx1uUpDEESS7zM8JdgZgOCQuxQvL1Sn/I6ijeAVQWGfXI9zb1i9Mzo495cIpVZhA0yr60PkQ==
+  dependencies:
+    "@jest/console" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.7.0.tgz#8db9a80aa1a097bb2262572686734baed9b1657c"
+  integrity sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-28.1.3.tgz"
+  integrity sha512-NIMPEqqa59MWnDi1kvXXpYbqsfQmSJsIbnd85mdVGkiDfQ9WQQTXOLsvISUfonmnBT+w85WEgneCigEEdHDFxw==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    slash "^3.0.0"
+
+"@jest/test-sequencer@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.0.3.tgz"
+  integrity sha512-Hf4+xYSWZdxTNnhDykr8JBs0yBN/nxOXyUQWfotBUqqy0LF9vzcFB0jm/EDNZCx587znLWTIgxcokW7WeZMobQ==
+  dependencies:
+    "@jest/test-result" "^29.0.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.3"
+    slash "^3.0.0"
+
+"@jest/test-sequencer@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.5.0.tgz"
+  integrity sha512-yPafQEcKjkSfDXyvtgiV4pevSeyuA6MQr6ZIdVkWJly9vkqjnFfcfhRQqpD5whjoU8EORki752xQmjaqoFjzMQ==
+  dependencies:
+    "@jest/test-result" "^29.5.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    slash "^3.0.0"
+
+"@jest/test-sequencer@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz#6cef977ce1d39834a3aea887a1726628a6f072ce"
+  integrity sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==
+  dependencies:
+    "@jest/test-result" "^29.7.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    slash "^3.0.0"
+
+"@jest/transform@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/transform/-/transform-28.1.3.tgz"
+  integrity sha512-u5dT5di+oFI6hfcLOHGTAfmUxFRrjK+vnaP0kkVow9Md/M7V/MxqQMOz/VV25UZO8pzeA9PjfTpOu6BDuwSPQA==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^28.1.3"
+    "@jridgewell/trace-mapping" "^0.3.13"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    jest-regex-util "^28.0.2"
+    jest-util "^28.1.3"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.1"
+
+"@jest/transform@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@jest/transform/-/transform-29.0.3.tgz"
+  integrity sha512-C5ihFTRYaGDbi/xbRQRdbo5ddGtI4VSpmL6AIcZxdhwLbXMa7PcXxxqyI91vGOFHnn5aVM3WYnYKCHEqmLVGzg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.0.3"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.3"
+    jest-regex-util "^29.0.0"
+    jest-util "^29.0.3"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.1"
+
+"@jest/transform@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/transform/-/transform-29.5.0.tgz"
+  integrity sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.5.0"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    jest-regex-util "^29.4.3"
+    jest-util "^29.5.0"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.2"
+
+"@jest/transform@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.7.0.tgz#df2dd9c346c7d7768b8a06639994640c642e284c"
+  integrity sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.6.3"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-util "^29.7.0"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.2"
+
+"@jest/types@30.0.5":
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-30.0.5.tgz#29a33a4c036e3904f1cfd94f6fe77f89d2e1cc05"
+  integrity sha512-aREYa3aku9SSnea4aX6bhKn4bgv3AXkgijoQgbYV3yvbiGt6z+MQ85+6mIhx9DsKW2BuB/cLR/A+tcMThx+KLQ==
+  dependencies:
+    "@jest/pattern" "30.0.1"
+    "@jest/schemas" "30.0.5"
+    "@types/istanbul-lib-coverage" "^2.0.6"
+    "@types/istanbul-reports" "^3.0.4"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.33"
+    chalk "^4.1.2"
+
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz"
+  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"
+
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jest/types@^29.0.3", "@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jest/types@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz"
+  integrity sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==
+  dependencies:
+    "@jest/schemas" "^29.4.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3", "@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.14"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@0.3.9":
+  version "0.3.9"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.13":
+  version "0.3.18"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
+"@modelcontextprotocol/sdk@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.9.0.tgz"
+  integrity sha512-Jq2EUCQpe0iyO5FGpzVYDNFR6oR53AIrwph9yWl7uSc7IWUMsrmpmSaTGra5hQNunXpM+9oit85p924jWuHzUA==
+  dependencies:
+    content-type "^1.0.5"
+    cors "^2.8.5"
+    cross-spawn "^7.0.3"
+    eventsource "^3.0.2"
+    express "^5.0.1"
+    express-rate-limit "^7.5.0"
+    pkce-challenge "^5.0.0"
+    raw-body "^3.0.0"
+    zod "^3.23.8"
+    zod-to-json-schema "^3.24.1"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@parcel/watcher@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.1.0.tgz"
+  integrity sha512-8s8yYjd19pDSsBpbkOHnT6Z2+UJSuLQx61pCFM0s5wSRvKCEMDjd/cHY3/GI1szHIWbpXpsJdg3V6ISGGx9xDw==
+  dependencies:
+    is-glob "^4.0.3"
+    micromatch "^4.0.5"
+    node-addon-api "^3.2.1"
+    node-gyp-build "^4.3.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@puppeteer/browsers@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.10.2.tgz"
+  integrity sha512-i4Ez+s9oRWQbNjtI/3+jxr7OH508mjAKvza0ekPJem0ZtmsYHP3B5dq62+IaBHKaGCOuqJxXzvFLUhJvQ6jtsQ==
+  dependencies:
+    debug "^4.4.0"
+    extract-zip "^2.0.1"
+    progress "^2.0.3"
+    proxy-agent "^6.5.0"
+    semver "^7.7.1"
+    tar-fs "^3.0.8"
+    yargs "^17.7.2"
+
+"@rollup/rollup-android-arm-eabi@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.9.tgz#661a45a4709c70e59e596ec78daa9cb8b8d27604"
+  integrity sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA==
+
+"@rollup/rollup-android-arm64@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.9.tgz#128fe8dd510d880cf98b4cb6c7add326815a0c4b"
+  integrity sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg==
+
+"@rollup/rollup-darwin-arm64@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz"
+  integrity sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==
+
+"@rollup/rollup-darwin-x64@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz#c2fe3d85fffe47f0ed0f076b3563ada22c8af19c"
+  integrity sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==
+
+"@rollup/rollup-freebsd-arm64@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.9.tgz#d95bd8f6eaaf829781144fc8bd2d5d71d9f6a9f5"
+  integrity sha512-2lzjQPJbN5UnHm7bHIUKFMulGTQwdvOkouJDpPysJS+QFBGDJqcfh+CxxtG23Ik/9tEvnebQiylYoazFMAgrYw==
+
+"@rollup/rollup-freebsd-x64@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.9.tgz#c3576c6011656e4966ded29f051edec636b44564"
+  integrity sha512-SLl0hi2Ah2H7xQYd6Qaiu01kFPzQ+hqvdYSoOtHYg/zCIFs6t8sV95kaoqjzjFwuYQLtOI0RZre/Ke0nPaQV+g==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.9.tgz#48c87d0dee4f8dc9591a416717f91b4a89d77e3d"
+  integrity sha512-88I+D3TeKItrw+Y/2ud4Tw0+3CxQ2kLgu3QvrogZ0OfkmX/DEppehus7L3TS2Q4lpB+hYyxhkQiYPJ6Mf5/dPg==
+
+"@rollup/rollup-linux-arm-musleabihf@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.9.tgz#f4c4e7c03a7767f2e5aa9d0c5cfbf5c0f59f2d41"
+  integrity sha512-3qyfWljSFHi9zH0KgtEPG4cBXHDFhwD8kwg6xLfHQ0IWuH9crp005GfoUUh/6w9/FWGBwEHg3lxK1iHRN1MFlA==
+
+"@rollup/rollup-linux-arm64-gnu@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz#1015c9d07a99005025d13b8622b7600029d0b52f"
+  integrity sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==
+
+"@rollup/rollup-linux-arm64-musl@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz#8f895eb5577748fc75af21beae32439626e0a14c"
+  integrity sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==
+
+"@rollup/rollup-linux-loongarch64-gnu@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.9.tgz#c9cd5dbbdc6b3ca4dbeeb0337498cf31949004a0"
+  integrity sha512-dRAgTfDsn0TE0HI6cmo13hemKpVHOEyeciGtvlBTkpx/F65kTvShtY/EVyZEIfxFkV5JJTuQ9tP5HGBS0hfxIg==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.9.tgz#7ebb5b4441faa17843a210f7d0583a20c93b40e4"
+  integrity sha512-PHcNOAEhkoMSQtMf+rJofwisZqaU8iQ8EaSps58f5HYll9EAY5BSErCZ8qBDMVbq88h4UxaNPlbrKqfWP8RfJA==
+
+"@rollup/rollup-linux-riscv64-gnu@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.9.tgz#10f5d7349fbd2fe78f9e36ecc90aab3154435c8d"
+  integrity sha512-Z2i0Uy5G96KBYKjeQFKbbsB54xFOL5/y1P5wNBsbXB8yE+At3oh0DVMjQVzCJRJSfReiB2tX8T6HUFZ2k8iaKg==
+
+"@rollup/rollup-linux-s390x-gnu@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.9.tgz#196347d2fa20593ab09d0b7e2589fb69bdf742c6"
+  integrity sha512-U+5SwTMoeYXoDzJX5dhDTxRltSrIax8KWwfaaYcynuJw8mT33W7oOgz0a+AaXtGuvhzTr2tVKh5UO8GVANTxyQ==
+
+"@rollup/rollup-linux-x64-gnu@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz#7193cbd8d128212b8acda37e01b39d9e96259ef8"
+  integrity sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==
+
+"@rollup/rollup-linux-x64-musl@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz#29a6867278ca0420b891574cfab98ecad70c59d1"
+  integrity sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==
+
+"@rollup/rollup-win32-arm64-msvc@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz#89427dcac0c8e3a6d32b13a03a296a275d0de9a9"
+  integrity sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==
+
+"@rollup/rollup-win32-ia32-msvc@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.9.tgz#ecb9711ba2b6d2bf6ee51265abe057ab90913deb"
+  integrity sha512-KB48mPtaoHy1AwDNkAJfHXvHp24H0ryZog28spEs0V48l3H1fr4i37tiyHsgKZJnCmvxsbATdZGBpbmxTE3a9w==
+
+"@rollup/rollup-win32-x64-msvc@4.34.9":
+  version "4.34.9"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz#1973871850856ae72bc678aeb066ab952330e923"
+  integrity sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==
+
+"@selderee/plugin-htmlparser2@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz"
+  integrity sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==
+  dependencies:
+    domhandler "^5.0.3"
+    selderee "^0.11.0"
+
+"@sideway/address@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz"
+  integrity sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
+"@sideway/formula@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz"
+  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
+
+"@sideway/pinpoint@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz"
+  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
+
+"@sinclair/typebox@^0.24.1":
+  version "0.24.42"
+  resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.42.tgz"
+  integrity sha512-d+2AtrHGyWek2u2ITF0lHRIv6Tt7X0dEHW+0rP+5aDCEjC3fiN2RBjrLD0yU0at52BcZbRGxLbAtXiR0hFCjYw==
+
+"@sinclair/typebox@^0.25.16":
+  version "0.25.24"
+  resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz"
+  integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
+
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
+
+"@sinclair/typebox@^0.34.0":
+  version "0.34.38"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.34.38.tgz#2365df7c23406a4d79413a766567bfbca708b49d"
+  integrity sha512-HpkxMmc2XmZKhvaKIZZThlHmx1L0I/V1hWK1NubtlFnr6ZqdiOpV72TKudZUNQjZNsyDBay72qFEhEvb+bcwcA==
+
+"@sinonjs/commons@^1.7.0":
+  version "1.8.3"
+  resolved "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz"
+  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/commons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz"
+  integrity sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^10.0.2":
+  version "10.2.0"
+  resolved "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.2.0.tgz"
+  integrity sha512-OPwQlEdg40HAj5KNF8WW6q2KG4Z+cBCZb3m4ninfTZKaBmbIJodviQsDBoYMPHkOyJJMHnOJo5j2+LKDOhOACg==
+  dependencies:
+    "@sinonjs/commons" "^3.0.0"
+
+"@sinonjs/fake-timers@^9.1.2":
+  version "9.1.2"
+  resolved "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz"
+  integrity sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@testing-library/dom@^8.5.0":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz"
+  integrity sha512-oEvsm2B/WtcHKE+IcEeeCqNU/ltFGaVyGbpcm4g/2ytuT49jrlH9x5qRKL/H3A6yfM4YAbSbC0ceT5+9CEXnLg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
+"@testing-library/react@^13.4.0":
+  version "13.4.0"
+  resolved "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz"
+  integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
+
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+
+"@tootallnate/quickjs-emscripten@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz"
+  integrity sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==
+
+"@tsconfig/node10@^1.0.7":
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz"
+  integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
+
+"@tsconfig/node12@^1.0.7":
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz"
+  integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
+
+"@tsconfig/node14@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz"
+  integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
+
+"@tsconfig/node16@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz"
+  integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
+
+"@tsconfig/node18-strictest@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@tsconfig/node18-strictest/-/node18-strictest-1.0.0.tgz"
+  integrity sha512-bOuNKwO4Fzbt+Su5wqI9zNHwx5C25gLnutwVQA1sBZk0cW8UjVPVcwzIUhJIIJDUx7zDEbAwdCD2HfvIsV8dYg==
+
+"@tsconfig/strictest@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@tsconfig/strictest/-/strictest-2.0.5.tgz"
+  integrity sha512-ec4tjL2Rr0pkZ5hww65c+EEPYwxOi4Ryv+0MtjeaSQRJyq322Q27eOQiFbuNgw2hpL4hB1/W/HBGk3VKS43osg==
+
+"@types/aria-query@^4.2.0":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz"
+  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
+
+"@types/babel__code-frame@^7.0.6":
+  version "7.0.6"
+  resolved "https://registry.npmjs.org/@types/babel__code-frame/-/babel__code-frame-7.0.6.tgz"
+  integrity sha512-Anitqkl3+KrzcW2k77lRlg/GfLZLWXBuNgbEcIOU6M92yw42vsd3xV/Z/yAHEj8m+KUjL6bWOVOFqX8PFPJ4LA==
+
+"@types/babel__core@^7.1.14":
+  version "7.1.19"
+  resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.19.tgz"
+  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+  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.4"
+  resolved "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.18.2"
+  resolved "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.2.tgz"
+  integrity sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/eslint@^8.56.12":
+  version "8.56.12"
+  resolved "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz"
+  integrity sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/estree@*":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
+"@types/estree@1.0.6", "@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/fbt@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@types/fbt/-/fbt-1.0.4.tgz"
+  integrity sha512-KBaaLu4hEIBaCyQ3L2KP6JujD+tmMuPZ10YpgmGgqMaM8TESYR2TOJNvG+GYiWUhGkp38Y+62VZ1wJ97MPvt+A==
+  dependencies:
+    "@types/react" "*"
+
+"@types/glob@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz"
+  integrity sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==
+  dependencies:
+    "@types/minimatch" "^5.1.2"
+    "@types/node" "*"
+
+"@types/graceful-fs@^4.1.3":
+  version "4.1.5"
+  resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
+  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/html-to-text@^9.0.4":
+  version "9.0.4"
+  resolved "https://registry.npmjs.org/@types/html-to-text/-/html-to-text-9.0.4.tgz"
+  integrity sha512-pUY3cKH/Nm2yYrEmDlPR1mR7yszjGx4DrwPjQ702C4/D5CwHuZTgZdIdwPkRbcuhs7BAh2L5rg3CL5cbRiGTCQ==
+
+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-coverage@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
+  integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz"
+  integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/istanbul-reports@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz#0f03e3d2f670fbdac586e34b433783070cc16f54"
+  integrity sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^28.1.6":
+  version "28.1.8"
+  resolved "https://registry.npmjs.org/@types/jest/-/jest-28.1.8.tgz"
+  integrity sha512-8TJkV++s7B6XqnDrzR1m/TT0A0h948Pnl/097veySPN67VRAgQ4gZ7n2KfJo2rVq6njQjdxU3GCCyDvAeuHoiw==
+  dependencies:
+    expect "^28.0.0"
+    pretty-format "^28.0.0"
+
+"@types/jest@^29.0.3":
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/@types/jest/-/jest-29.0.3.tgz"
+  integrity sha512-F6ukyCTwbfsEX5F2YmVYmM5TcTHy1q9P5rWlRbrk56KyMh3v9xRGUO3aa8+SkvMi0SHXtASJv1283enXimC0Og==
+  dependencies:
+    expect "^29.0.0"
+    pretty-format "^29.0.0"
+
+"@types/jest@^29.5.14":
+  version "29.5.14"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.14.tgz#2b910912fa1d6856cadcd0c1f95af7df1d6049e5"
+  integrity sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==
+  dependencies:
+    expect "^29.0.0"
+    pretty-format "^29.0.0"
+
+"@types/jest@^30.0.0":
+  version "30.0.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-30.0.0.tgz#5e85ae568006712e4ad66f25433e9bdac8801f1d"
+  integrity sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==
+  dependencies:
+    expect "^30.0.0"
+    pretty-format "^30.0.0"
+
+"@types/jsdom@^20.0.0":
+  version "20.0.0"
+  resolved "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.0.tgz"
+  integrity sha512-YfAchFs0yM1QPDrLm2VHe+WHGtqms3NXnXAMolrgrVP6fgBHHXy1ozAbo/dFtPNtZC/m66bPiCTWYmqp1F14gA==
+  dependencies:
+    "@types/node" "*"
+    "@types/tough-cookie" "*"
+    parse5 "^7.0.0"
+
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.15":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/minimatch@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz"
+  integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
+
+"@types/mocha@^10.0.10", "@types/mocha@^10.0.2":
+  version "10.0.10"
+  resolved "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.10.tgz"
+  integrity sha512-xPyYSz1cMPnJQhl0CLMH68j3gprKZaTjG3s5Vi+fDgx+uhG9NOXwbVt52eFS8ECyXhyKcjDLCBEqBExKuiZb7Q==
+
+"@types/node@*", "@types/node@^18.7.18":
+  version "18.7.19"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.7.19.tgz"
+  integrity sha512-Sq1itGUKUX1ap7GgZlrzdBydjbsJL/NSQt/4wkAxUJ7/OS5c2WkoN6WSpWc2Yc5wtKMZOUA0VCs/j2XJadN3HA==
+
+"@types/node@^20":
+  version "20.17.10"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz"
+  integrity sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==
+  dependencies:
+    undici-types "~6.19.2"
+
+"@types/node@^20.2.5":
+  version "20.2.5"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz"
+  integrity sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==
+
+"@types/prettier@^2.1.5":
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.0.tgz"
+  integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react-dom@^18.0.0":
+  version "18.0.6"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.21"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz"
+  integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/semver@^7.5.0":
+  version "7.5.8"
+  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
+"@types/stack-utils@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz"
+  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+
+"@types/stack-utils@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
+  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+
+"@types/tough-cookie@*":
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz"
+  integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
+
+"@types/triple-beam@^1.3.2":
+  version "1.3.5"
+  resolved "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz"
+  integrity sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==
+
+"@types/vscode@^1.96.0":
+  version "1.96.0"
+  resolved "https://registry.npmjs.org/@types/vscode/-/vscode-1.96.0.tgz"
+  integrity sha512-qvZbSZo+K4ZYmmDuaodMbAa67Pl6VDQzLKFka6rq+3WUTY4Kro7Bwoi0CuZLO/wema0ygcmpwow7zZfPJTs5jg==
+
+"@types/yargs-parser@*":
+  version "21.0.0"
+  resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz"
+  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+
+"@types/yargs@^13.0.0":
+  version "13.0.12"
+  resolved "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.12.tgz"
+  integrity sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^17.0.33":
+  version "17.0.33"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.33.tgz#8c32303da83eec050a84b3c7ae7b9f922d13e32d"
+  integrity sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^17.0.8":
+  version "17.0.13"
+  resolved "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.13.tgz"
+  integrity sha512-9sWaruZk2JGxIQU+IhI1fhPYRcQ0UuTNuKuCW9bR5fp7qi2Llf7WDzNa17Cy7TKnh3cdxDOiyTu6gaLS0eDatg==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yauzl@^2.9.1":
+  version "2.10.3"
+  resolved "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz"
+  integrity sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==
+  dependencies:
+    "@types/node" "*"
+
+"@typescript-eslint/eslint-plugin@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.1.tgz"
+  integrity sha512-Ncvsq5CT3Gvh+uJG0Lwlho6suwDfUXH0HztslDf5I+F2wAFAZMRwYLEorumpKLzmO2suAXZ/td1tBg4NZIi9CQ==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.18.1"
+    "@typescript-eslint/type-utils" "8.18.1"
+    "@typescript-eslint/utils" "8.18.1"
+    "@typescript-eslint/visitor-keys" "8.18.1"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/eslint-plugin@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz"
+  integrity sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "7.4.0"
+    "@typescript-eslint/type-utils" "7.4.0"
+    "@typescript-eslint/utils" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/eslint-plugin@^8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.7.0.tgz"
+  integrity sha512-RIHOoznhA3CCfSTFiB6kBGLQtB/sox+pJ6jeFu6FxJvqL8qRxq/FfGO/UhsGgQM9oGdXkV4xUgli+dt26biB6A==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.7.0"
+    "@typescript-eslint/type-utils" "8.7.0"
+    "@typescript-eslint/utils" "8.7.0"
+    "@typescript-eslint/visitor-keys" "8.7.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/parser@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.18.1.tgz"
+  integrity sha512-rBnTWHCdbYM2lh7hjyXqxk70wvon3p2FyaniZuey5TrcGBpfhVp0OxOa6gxr9Q9YhZFKyfbEnxc24ZnVbbUkCA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.18.1"
+    "@typescript-eslint/types" "8.18.1"
+    "@typescript-eslint/typescript-estree" "8.18.1"
+    "@typescript-eslint/visitor-keys" "8.18.1"
+    debug "^4.3.4"
+
+"@typescript-eslint/parser@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.4.0.tgz"
+  integrity sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.4.0"
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/typescript-estree" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/parser@^8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.7.0.tgz"
+  integrity sha512-lN0btVpj2unxHlNYLI//BQ7nzbMJYBVQX5+pbNXvGYazdlgYonMn4AhhHifQ+J4fGRYA/m1DjaQjx+fDetqBOQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.7.0"
+    "@typescript-eslint/types" "8.7.0"
+    "@typescript-eslint/typescript-estree" "8.7.0"
+    "@typescript-eslint/visitor-keys" "8.7.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz"
+  integrity sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==
+  dependencies:
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+
+"@typescript-eslint/scope-manager@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.18.1.tgz"
+  integrity sha512-HxfHo2b090M5s2+/9Z3gkBhI6xBH8OJCFjH9MhQ+nnoZqxU3wNxkLT+VWXWSFWc3UF3Z+CfPAyqdCTdoXtDPCQ==
+  dependencies:
+    "@typescript-eslint/types" "8.18.1"
+    "@typescript-eslint/visitor-keys" "8.18.1"
+
+"@typescript-eslint/scope-manager@8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.7.0.tgz"
+  integrity sha512-87rC0k3ZlDOuz82zzXRtQ7Akv3GKhHs0ti4YcbAJtaomllXoSO8hi7Ix3ccEvCd824dy9aIX+j3d2UMAfCtVpg==
+  dependencies:
+    "@typescript-eslint/types" "8.7.0"
+    "@typescript-eslint/visitor-keys" "8.7.0"
+
+"@typescript-eslint/type-utils@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz"
+  integrity sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.4.0"
+    "@typescript-eslint/utils" "7.4.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/type-utils@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.18.1.tgz"
+  integrity sha512-jAhTdK/Qx2NJPNOTxXpMwlOiSymtR2j283TtPqXkKBdH8OAMmhiUfP0kJjc/qSE51Xrq02Gj9NY7MwK+UxVwHQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "8.18.1"
+    "@typescript-eslint/utils" "8.18.1"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/type-utils@8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.7.0.tgz"
+  integrity sha512-tl0N0Mj3hMSkEYhLkjREp54OSb/FI6qyCzfiiclvJvOqre6hsZTGSnHtmFLDU8TIM62G7ygEa1bI08lcuRwEnQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "8.7.0"
+    "@typescript-eslint/utils" "8.7.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/types@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.4.0.tgz"
+  integrity sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==
+
+"@typescript-eslint/types@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.18.1.tgz"
+  integrity sha512-7uoAUsCj66qdNQNpH2G8MyTFlgerum8ubf21s3TSM3XmKXuIn+H2Sifh/ES2nPOPiYSRJWAk0fDkW0APBWcpfw==
+
+"@typescript-eslint/types@8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.7.0.tgz"
+  integrity sha512-LLt4BLHFwSfASHSF2K29SZ+ZCsbQOM+LuarPjRUuHm+Qd09hSe3GCeaQbcCr+Mik+0QFRmep/FyZBO6fJ64U3w==
+
+"@typescript-eslint/typescript-estree@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz"
+  integrity sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==
+  dependencies:
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/typescript-estree@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.18.1.tgz"
+  integrity sha512-z8U21WI5txzl2XYOW7i9hJhxoKKNG1kcU4RzyNvKrdZDmbjkmLBo8bgeiOJmA06kizLI76/CCBAAGlTlEeUfyg==
+  dependencies:
+    "@typescript-eslint/types" "8.18.1"
+    "@typescript-eslint/visitor-keys" "8.18.1"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/typescript-estree@8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.7.0.tgz"
+  integrity sha512-MC8nmcGHsmfAKxwnluTQpNqceniT8SteVwd2voYlmiSWGOtjvGXdPl17dYu2797GVscK30Z04WRM28CrKS9WOg==
+  dependencies:
+    "@typescript-eslint/types" "8.7.0"
+    "@typescript-eslint/visitor-keys" "8.7.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/utils@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.4.0.tgz"
+  integrity sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "7.4.0"
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/typescript-estree" "7.4.0"
+    semver "^7.5.4"
+
+"@typescript-eslint/utils@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.18.1.tgz"
+  integrity sha512-8vikiIj2ebrC4WRdcAdDcmnu9Q/MXXwg+STf40BVfT8exDqBCUPdypvzcUPxEqRGKg9ALagZ0UWcYCtn+4W2iQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.18.1"
+    "@typescript-eslint/types" "8.18.1"
+    "@typescript-eslint/typescript-estree" "8.18.1"
+
+"@typescript-eslint/utils@8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.7.0.tgz"
+  integrity sha512-ZbdUdwsl2X/s3CiyAu3gOlfQzpbuG3nTWKPoIvAu1pu5r8viiJvv2NPN2AqArL35NCYtw/lrPPfM4gxrMLNLPw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.7.0"
+    "@typescript-eslint/types" "8.7.0"
+    "@typescript-eslint/typescript-estree" "8.7.0"
+
+"@typescript-eslint/visitor-keys@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz"
+  integrity sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==
+  dependencies:
+    "@typescript-eslint/types" "7.4.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@typescript-eslint/visitor-keys@8.18.1":
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.18.1.tgz"
+  integrity sha512-Vj0WLm5/ZsD013YeUKn+K0y8p1M0jPpxOkKdbD1wB0ns53a5piVY02zjf072TblEweAbcYiFiPoSMF3kp+VhhQ==
+  dependencies:
+    "@typescript-eslint/types" "8.18.1"
+    eslint-visitor-keys "^4.2.0"
+
+"@typescript-eslint/visitor-keys@8.7.0":
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.7.0.tgz"
+  integrity sha512-b1tx0orFCCh/THWPQa2ZwWzvOeyzzp36vkJYOpVg0u8UVOIsfVrnuC9FqAw9gRKn+rG2VmWQ/zDJZzkxUnj/XQ==
+  dependencies:
+    "@typescript-eslint/types" "8.7.0"
+    eslint-visitor-keys "^3.4.3"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
+"@vscode/test-cli@^0.0.10":
+  version "0.0.10"
+  resolved "https://registry.npmjs.org/@vscode/test-cli/-/test-cli-0.0.10.tgz"
+  integrity sha512-B0mMH4ia+MOOtwNiLi79XhA+MLmUItIC8FckEuKrVAVriIuSWjt7vv4+bF8qVFiNFe4QRfzPaIZk39FZGWEwHA==
+  dependencies:
+    "@types/mocha" "^10.0.2"
+    c8 "^9.1.0"
+    chokidar "^3.5.3"
+    enhanced-resolve "^5.15.0"
+    glob "^10.3.10"
+    minimatch "^9.0.3"
+    mocha "^10.2.0"
+    supports-color "^9.4.0"
+    yargs "^17.7.2"
+
+"@vscode/test-electron@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/@vscode/test-electron/-/test-electron-2.4.1.tgz"
+  integrity sha512-Gc6EdaLANdktQ1t+zozoBVRynfIsMKMc94Svu1QreOBC8y76x4tvaK32TljrLi1LI2+PK58sDVbL7ALdqf3VRQ==
+  dependencies:
+    http-proxy-agent "^7.0.2"
+    https-proxy-agent "^7.0.5"
+    jszip "^3.10.1"
+    ora "^7.0.1"
+    semver "^7.6.2"
+
+abab@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+accepts@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz"
+  integrity sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==
+  dependencies:
+    mime-types "^3.0.0"
+    negotiator "^1.0.0"
+
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn-walk@^8.1.1:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.14.0:
+  version "8.14.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
+acorn@^8.4.1, acorn@^8.7.1:
+  version "8.8.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+acorn@^8.9.0:
+  version "8.11.2"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+agent-base@^7.1.0, agent-base@^7.1.2:
+  version "7.1.3"
+  resolved "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz"
+  integrity sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+algoliasearch@^5.23.3:
+  version "5.23.4"
+  resolved "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.23.4.tgz"
+  integrity sha512-QzAKFHl3fm53s44VHrTdEo0TkpL3XVUYQpnZy1r6/EHvMAyIg+O4hwprzlsNmcCHTNyVcF2S13DAUn7XhkC6qg==
+  dependencies:
+    "@algolia/client-abtesting" "5.23.4"
+    "@algolia/client-analytics" "5.23.4"
+    "@algolia/client-common" "5.23.4"
+    "@algolia/client-insights" "5.23.4"
+    "@algolia/client-personalization" "5.23.4"
+    "@algolia/client-query-suggestions" "5.23.4"
+    "@algolia/client-search" "5.23.4"
+    "@algolia/ingestion" "1.23.4"
+    "@algolia/monitoring" "1.23.4"
+    "@algolia/recommend" "5.23.4"
+    "@algolia/requester-browser-xhr" "5.23.4"
+    "@algolia/requester-fetch" "5.23.4"
+    "@algolia/requester-node-http" "5.23.4"
+
+ansi-colors@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-regex@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz"
+  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0, ansi-styles@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@^3.0.3:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+args@5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/args/-/args-5.0.3.tgz"
+  integrity sha512-h6k/zfFgusnv3i5TU08KQkVKuCPBtL/PWQbWkHUxvJrZ2nAyeaUupneemcrgn1xmqxPQsPIzwkUhOpoqPDRZuA==
+  dependencies:
+    camelcase "5.0.0"
+    chalk "2.4.2"
+    leven "2.1.0"
+    mri "1.1.4"
+
+aria-query@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.0.2.tgz"
+  integrity sha512-eigU3vhqSO+Z8BKDnVLN/ompjhf3pYzecKXz8+whRy+9gZu8n1TCGfwzQUUPnqdHl9ax1Hr9031orZ+UOEYr7Q==
+
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
+ast-types@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz"
+  integrity sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==
+  dependencies:
+    tslib "^2.0.1"
+
+async-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-function/-/async-function-1.0.0.tgz#509c9fca60eaf85034c6829838188e4e4c8ffb2b"
+  integrity sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==
+
+async@^3.2.3:
+  version "3.2.6"
+  resolved "https://registry.npmjs.org/async/-/async-3.2.6.tgz"
+  integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axios@^1.6.1:
+  version "1.7.4"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz"
+  integrity sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+b4a@^1.6.4:
+  version "1.6.7"
+  resolved "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz"
+  integrity sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==
+
+babel-jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.3.tgz"
+  integrity sha512-epUaPOEWMk3cWX0M/sPvCHHCe9fMFAa/9hXEgKP8nFfNl/jlGkE9ucq9NqkZGXLDduCJYS0UvSlPUwC0S+rH6Q==
+  dependencies:
+    "@jest/transform" "^28.1.3"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^28.1.3"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-jest@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-29.0.3.tgz"
+  integrity sha512-ApPyHSOhS/sVzwUOQIWJmdvDhBsMG01HX9z7ogtkp1TToHGGUWFlnXJUIzCgKPSfiYLn3ibipCYzsKSURHEwLg==
+  dependencies:
+    "@jest/transform" "^29.0.3"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.0.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-jest@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz"
+  integrity sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==
+  dependencies:
+    "@jest/transform" "^29.5.0"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.5.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.7.0.tgz#f4369919225b684c56085998ac63dbd05be020d5"
+  integrity sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==
+  dependencies:
+    "@jest/transform" "^29.7.0"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.6.3"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-plugin-fbt-runtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/babel-plugin-fbt-runtime/-/babel-plugin-fbt-runtime-1.0.0.tgz"
+  integrity sha512-gML1rXqIfc+sDf1DWxu1WJjmotBYr6f9vjKwOoetuOukM1o3mTKNAeBFGEYu7iBACkuaXpIi++qW8/URgHnduQ==
+  dependencies:
+    "@babel/core" "^7.0.0"
+    invariant "^2.2.4"
+
+babel-plugin-fbt@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/babel-plugin-fbt/-/babel-plugin-fbt-1.0.0.tgz"
+  integrity sha512-Tjpkrt4JJLgtS+x6HzkWdOguH+Pb+pzJmSkBmHIWrjf3x9Pf+xFcQUdAbpDKOtRPgu6QyI9DtDulw0sbgdfYdg==
+  dependencies:
+    "@babel/core" "^7.0.0"
+    "@babel/generator" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.2.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.8.3"
+    "@babel/register" "^7.0.0"
+    "@babel/types" "^7.2.2"
+    fb-babel-plugin-utils "^0.13.0"
+    flow-enums-runtime "^0.0.4"
+    glob "^7.1.6"
+    invariant "^2.2.4"
+    jest-docblock "^26.0.0"
+    nullthrows "^1.1.1"
+    yargs "^15.3.1"
+
+babel-plugin-idx@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/babel-plugin-idx/-/babel-plugin-idx-3.0.3.tgz"
+  integrity sha512-05baCoIGsvZJKemq6KQ4KVFlweEpY4aSY56wk3W781JxCNW3u0KfBElBt26/cPZbHkjF1mnwGIOlFY+9I/VOZA==
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.3.tgz"
+  integrity sha512-Ys3tUKAmfnkRUpPdpa98eYrAR0nV+sSFUZZEGuQ2EbFd1y4SOLtD5QDNHAq+bb9a+bbXvYQC4b+ID/THIMcU6Q==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-jest-hoist@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz"
+  integrity sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-jest-hoist@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz"
+  integrity sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.13"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.13.tgz"
+  integrity sha512-3sX/eOms8kd3q2KZ6DAhKPc0dgm525Gqq5NtWKZ7QYYZEv57OQ54KtblzJzH1lQF/eQxO8KjWGIK9IPUJNus5g==
+  dependencies:
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.4"
+    semver "^6.3.1"
+
+babel-plugin-polyfill-corejs3@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz"
+  integrity sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    core-js-compat "^3.40.0"
+
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.4"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.4.tgz"
+  integrity sha512-7gD3pRadPrbjhjLyxebmx/WrFYcuSjZ0XbdUujQMZ/fcE9oeewk2U/7PCvez84UeuK3oSjmPZ0Ch0dlupQvGzw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.4"
+
+babel-plugin-syntax-hermes-parser@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.25.1.tgz"
+  integrity sha512-IVNpGzboFLfXZUAwkLFcI/bnqVbwky0jP3eBno4HKtqvQJAHBLdgxiG6lQ4to0+Q/YCN3PO0od5NZwIKyY4REQ==
+  dependencies:
+    hermes-parser "0.25.1"
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-28.1.3.tgz"
+  integrity sha512-L+fupJvlWAHbQfn74coNX3zf60LXMJsezNvvx8eIh7iOR1luJ1poxYgQk1F8PYtNq/6QODDHCqsSnTFSWC491A==
+  dependencies:
+    babel-plugin-jest-hoist "^28.1.3"
+    babel-preset-current-node-syntax "^1.0.0"
+
+babel-preset-jest@^29.0.2, babel-preset-jest@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz"
+  integrity sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==
+  dependencies:
+    babel-plugin-jest-hoist "^29.6.3"
+    babel-preset-current-node-syntax "^1.0.0"
+
+babel-preset-jest@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz"
+  integrity sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==
+  dependencies:
+    babel-plugin-jest-hoist "^29.5.0"
+    babel-preset-current-node-syntax "^1.0.0"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+bare-events@^2.2.0, bare-events@^2.5.4:
+  version "2.5.4"
+  resolved "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz"
+  integrity sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==
+
+bare-fs@^4.0.1:
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/bare-fs/-/bare-fs-4.1.3.tgz"
+  integrity sha512-OeEZYIg+2qepaWLyphaOXHAHKo3xkM8y3BeGAvHdMN8GNWvEAU1Yw6rYpGzu/wDDbKxgEjVeVDpgGhDzaeMpjg==
+  dependencies:
+    bare-events "^2.5.4"
+    bare-path "^3.0.0"
+    bare-stream "^2.6.4"
+
+bare-os@^3.0.1:
+  version "3.6.1"
+  resolved "https://registry.npmjs.org/bare-os/-/bare-os-3.6.1.tgz"
+  integrity sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==
+
+bare-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz"
+  integrity sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==
+  dependencies:
+    bare-os "^3.0.1"
+
+bare-stream@^2.6.4:
+  version "2.6.5"
+  resolved "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.5.tgz"
+  integrity sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==
+  dependencies:
+    streamx "^2.21.0"
+
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+basic-ftp@^5.0.2:
+  version "5.0.5"
+  resolved "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz"
+  integrity sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==
+
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+bl@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
+bl@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz"
+  integrity sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==
+  dependencies:
+    buffer "^6.0.3"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
+body-parser@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz"
+  integrity sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==
+  dependencies:
+    bytes "^3.1.2"
+    content-type "^1.0.5"
+    debug "^4.4.0"
+    http-errors "^2.0.0"
+    iconv-lite "^0.6.3"
+    on-finished "^2.4.1"
+    qs "^6.14.0"
+    raw-body "^3.0.0"
+    type-is "^2.0.0"
+
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
+browser-stdout@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz"
+  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
+
+browserslist@^4.24.0, browserslist@^4.24.4:
+  version "4.24.4"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz"
+  integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
+  dependencies:
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
+
+bs-logger@0.x, bs-logger@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
+  integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
+bundle-require@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/bundle-require/-/bundle-require-5.1.0.tgz"
+  integrity sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==
+  dependencies:
+    load-tsconfig "^0.2.3"
+
+bytes@3.1.2, bytes@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+c8@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/c8/-/c8-9.1.0.tgz"
+  integrity sha512-mBWcT5iqNir1zIkzSPyI3NCR9EZCVI3WUD+AVO17MVWTSFNyUueXE82qTeampNtTr+ilN/5Ua3j24LgbCKjDVg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@istanbuljs/schema" "^0.1.3"
+    find-up "^5.0.0"
+    foreground-child "^3.1.1"
+    istanbul-lib-coverage "^3.2.0"
+    istanbul-lib-report "^3.0.1"
+    istanbul-reports "^3.1.6"
+    test-exclude "^6.0.0"
+    v8-to-istanbul "^9.0.0"
+    yargs "^17.7.2"
+    yargs-parser "^21.1.1"
+
+cac@^6.7.14:
+  version "6.7.14"
+  resolved "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.7, call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz"
+  integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    get-intrinsic "^1.3.0"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz"
+  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
+
+camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelcase@^6.0.0, camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-lite@^1.0.30001688:
+  version "1.0.30001715"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001715.tgz"
+  integrity sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw==
+
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
+  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"
+
+chalk@4, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^5.0.0, chalk@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz"
+  integrity sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
+cheerio-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz"
+  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
+  dependencies:
+    boolbase "^1.0.0"
+    css-select "^5.1.0"
+    css-what "^6.1.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+
+cheerio@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz"
+  integrity sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==
+  dependencies:
+    cheerio-select "^2.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    encoding-sniffer "^0.2.0"
+    htmlparser2 "^9.1.0"
+    parse5 "^7.1.2"
+    parse5-htmlparser2-tree-adapter "^7.0.0"
+    parse5-parser-stream "^7.1.2"
+    undici "^6.19.5"
+    whatwg-mimetype "^4.0.0"
+
+chokidar@^3.5.3:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chokidar@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz"
+  integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
+  dependencies:
+    readdirp "^4.0.1"
+
+chromium-bidi@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-4.1.1.tgz"
+  integrity sha512-biR7t4vF3YluE6RlMSk9IWk+b9U+WWyzHp+N2pL9vRTk+UXHYRTVp7jTK58ZNzMLBgoLMHY4QyJMbeuw3eKxqg==
+  dependencies:
+    mitt "^3.0.1"
+    zod "^3.24.1"
+
+ci-info@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.4.0.tgz"
+  integrity sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==
+
+ci-info@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.3.0.tgz#c39b1013f8fdbd28cd78e62318357d02da160cd7"
+  integrity sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==
+
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
+
+cli-color@~0.1.6:
+  version "0.1.7"
+  resolved "https://registry.npmjs.org/cli-color/-/cli-color-0.1.7.tgz"
+  integrity sha512-xNaQxWYgI6DD4xIJLn8GY2zDZVbrN0vsU1fEbDNAHZRyceWhpj7A08mYcG1AY92q1Aw0geYkVfiAcEYIZtuTSg==
+  dependencies:
+    es5-ext "0.8.x"
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-cursor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz"
+  integrity sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==
+  dependencies:
+    restore-cursor "^4.0.0"
+
+cli-spinners@^2.5.0, cli-spinners@^2.9.0:
+  version "2.9.2"
+  resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz"
+  integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
+
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
+color-convert@^1.9.0, color-convert@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^1.6.0:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.1.3:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
+colorspace@1.1.x:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz"
+  integrity sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==
+  dependencies:
+    color "^3.1.3"
+    text-hex "1.0.x"
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^2.9.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+concurrently@^7.4.0:
+  version "7.6.0"
+  resolved "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz"
+  integrity sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==
+  dependencies:
+    chalk "^4.1.0"
+    date-fns "^2.29.1"
+    lodash "^4.17.21"
+    rxjs "^7.0.0"
+    shell-quote "^1.7.3"
+    spawn-command "^0.0.2-1"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
+
+consola@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/consola/-/consola-3.4.0.tgz"
+  integrity sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==
+
+content-disposition@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz"
+  integrity sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0:
+  version "1.8.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cookie-signature@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz"
+  integrity sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==
+
+cookie@^0.7.1:
+  version "0.7.2"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz"
+  integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==
+
+core-js-compat@^3.40.0:
+  version "3.41.0"
+  resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.41.0.tgz"
+  integrity sha512-RFsU9LySVue9RTwdDVX/T0e2Y6jRYWXERKElIjpuEOEnxaXffI0X7RUwVzfYLfzuLXSNJDYoRYUAmRUcyln20A==
+  dependencies:
+    browserslist "^4.24.4"
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cors@^2.8.5:
+  version "2.8.5"
+  resolved "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz"
+  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
+  dependencies:
+    object-assign "^4"
+    vary "^1"
+
+cosmiconfig@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz"
+  integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
+create-jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/create-jest/-/create-jest-29.7.0.tgz#a355c5b3cb1e1af02ba177fe7afd7feee49a5320"
+  integrity sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-config "^29.7.0"
+    jest-util "^29.7.0"
+    prompts "^2.0.1"
+
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cross-spawn@^7.0.6:
+  version "7.0.6"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+cssstyle@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz"
+  integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==
+  dependencies:
+    rrweb-cssom "^0.6.0"
+
+csstype@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
+data-uri-to-buffer@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz"
+  integrity sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==
+
+data-urls@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz"
+  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
+  dependencies:
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+
+data-urls@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz"
+  integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==
+  dependencies:
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^12.0.0"
+
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+date-fns@^2.29.1:
+  version "2.30.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.5, debug@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
+decamelize@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz"
+  integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
+
+decimal.js@^10.3.1:
+  version "10.4.1"
+  resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.1.tgz"
+  integrity sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw==
+
+decimal.js@^10.4.3:
+  version "10.4.3"
+  resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+
+dedent@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.6.0.tgz#79d52d6389b1ffa67d2bcef59ba51847a9d503b2"
+  integrity sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
+deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+defaults@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz"
+  integrity sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
+  dependencies:
+    clone "^1.0.2"
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+degenerator@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz"
+  integrity sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==
+  dependencies:
+    ast-types "^0.13.4"
+    escodegen "^2.1.0"
+    esprima "^4.0.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+depd@2.0.0, depd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz"
+  integrity sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
+devtools-protocol@0.0.1425554:
+  version "0.0.1425554"
+  resolved "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1425554.tgz"
+  integrity sha512-uRfxR6Nlzdzt0ihVIkV+sLztKgs7rgquY/Mhcv1YNCWDh5IZgl5mnn2aeEnW5stYTE0wwiF4RYVz8eMEpV1SEw==
+
+diff-sequences@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-28.1.1.tgz"
+  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
+
+diff-sequences@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.0.0.tgz"
+  integrity sha512-7Qe/zd1wxSDL4D/X/FPjOMB+ZMDt71W94KYaq05I2l0oQqgXgs7s4ftYYmV38gBSrPz2vcygxfs1xn0FT+rKNA==
+
+diff-sequences@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz"
+  integrity sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==
+
+diff-sequences@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
+  integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
+
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
+diff@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz"
+  integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
+
+difflib@~0.2.1:
+  version "0.2.4"
+  resolved "https://registry.npmjs.org/difflib/-/difflib-0.2.4.tgz"
+  integrity sha512-9YVwmMb0wQHQNr5J9m6BSj6fk4pfGITGQOOs+D9Fl+INODWFOfvhIU1hNv6GgR1RBoC/9NJcwu77zShxV0kT7w==
+  dependencies:
+    heap ">= 0.2.0"
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-accessibility-api@^0.5.9:
+  version "0.5.14"
+  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz"
+  integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
+
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domexception@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz"
+  integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
+  dependencies:
+    webidl-conversions "^7.0.0"
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1, domutils@^3.1.0:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz"
+  integrity sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
+dreamopt@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/dreamopt/-/dreamopt-0.6.0.tgz"
+  integrity sha512-KRJa47iBEK0y6ZtgCgy2ykuvMT8c9gj3ua9Dv7vCkclFJJeH2FjhGY2xO5qBoWGahsjCGMlk4Cq9wJYeWxuYhQ==
+  dependencies:
+    wordwrap ">=0.0.2"
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+ejs@^3.1.10:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
+  dependencies:
+    jake "^10.8.5"
+
+electron-to-chromium@^1.5.73:
+  version "1.5.143"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.143.tgz"
+  integrity sha512-QqklJMOFBMqe46k8iIOwA9l2hz57V2OKMmP5eSWcUvwx+mASAsbU+wkF1pHjn9ZVSBPrsYWr4/W/95y5SwYg2g==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
+emittery@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz"
+  integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
+
+emoji-regex@^10.2.1:
+  version "10.4.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+enabled@2.0.x:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz"
+  integrity sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==
+
+encodeurl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+encoding-sniffer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz"
+  integrity sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==
+  dependencies:
+    iconv-lite "^0.6.3"
+    whatwg-encoding "^3.1.1"
+
+end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^5.15.0:
+  version "5.18.0"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz"
+  integrity sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+entities@^4.2.0, entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+entities@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
+env-paths@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.9:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.24.0.tgz#c44732d2beb0acc1ed60df840869e3106e7af328"
+  integrity sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.3.0"
+    get-proto "^1.0.1"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.2.1"
+    is-set "^2.0.3"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.1"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.4"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    stop-iteration-iterator "^1.1.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.19"
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
+es5-ext@0.8.x:
+  version "0.8.2"
+  resolved "https://registry.npmjs.org/es5-ext/-/es5-ext-0.8.2.tgz"
+  integrity sha512-H19ompyhnKiBdjHR1DPHvf5RHgHPmJaY9JNzFGbMbPgdsUkvnUCN1Ke8J4Y0IMyTwFM2M9l4h2GoHwzwpSmXbA==
+
+esbuild@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz"
+  integrity sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.25.0"
+    "@esbuild/android-arm" "0.25.0"
+    "@esbuild/android-arm64" "0.25.0"
+    "@esbuild/android-x64" "0.25.0"
+    "@esbuild/darwin-arm64" "0.25.0"
+    "@esbuild/darwin-x64" "0.25.0"
+    "@esbuild/freebsd-arm64" "0.25.0"
+    "@esbuild/freebsd-x64" "0.25.0"
+    "@esbuild/linux-arm" "0.25.0"
+    "@esbuild/linux-arm64" "0.25.0"
+    "@esbuild/linux-ia32" "0.25.0"
+    "@esbuild/linux-loong64" "0.25.0"
+    "@esbuild/linux-mips64el" "0.25.0"
+    "@esbuild/linux-ppc64" "0.25.0"
+    "@esbuild/linux-riscv64" "0.25.0"
+    "@esbuild/linux-s390x" "0.25.0"
+    "@esbuild/linux-x64" "0.25.0"
+    "@esbuild/netbsd-arm64" "0.25.0"
+    "@esbuild/netbsd-x64" "0.25.0"
+    "@esbuild/openbsd-arm64" "0.25.0"
+    "@esbuild/openbsd-x64" "0.25.0"
+    "@esbuild/sunos-x64" "0.25.0"
+    "@esbuild/win32-arm64" "0.25.0"
+    "@esbuild/win32-ia32" "0.25.0"
+    "@esbuild/win32-x64" "0.25.0"
+
+escalade@^3.1.1, escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
+  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+escodegen@^2.0.0, escodegen@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-scope@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz"
+  integrity sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint-visitor-keys@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz"
+  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
+
+eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-visitor-keys@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz"
+  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
+
+eslint@8.57.0:
+  version "8.57.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+eslint@^8.57.1:
+  version "8.57.1"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+eslint@^9.13.0:
+  version "9.17.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-9.17.0.tgz"
+  integrity sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.12.1"
+    "@eslint/config-array" "^0.19.0"
+    "@eslint/core" "^0.9.0"
+    "@eslint/eslintrc" "^3.2.0"
+    "@eslint/js" "9.17.0"
+    "@eslint/plugin-kit" "^0.2.3"
+    "@humanfs/node" "^0.16.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@humanwhocodes/retry" "^0.4.1"
+    "@types/estree" "^1.0.6"
+    "@types/json-schema" "^7.0.15"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.6"
+    debug "^4.3.2"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^8.2.0"
+    eslint-visitor-keys "^4.2.0"
+    espree "^10.3.0"
+    esquery "^1.5.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^8.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+
+espree@^10.0.1, espree@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz"
+  integrity sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==
+  dependencies:
+    acorn "^8.14.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.2.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+eventsource-parser@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.1.tgz"
+  integrity sha512-VARTJ9CYeuQYb0pZEPbzi740OWFgpHe7AYJ2WFZVnUDUQp5Dk2yJUgF36YsZ81cOyxT0QxmXD2EQpapAouzWVA==
+
+eventsource@^3.0.2:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/eventsource/-/eventsource-3.0.6.tgz"
+  integrity sha512-l19WpE2m9hSuyP06+FbuUUf1G+R0SFLrtQfbRb9PRr+oimOfxQhgGCbVaXg5IvZyyTThJsxh6L/srkMiCeBPDA==
+  dependencies:
+    eventsource-parser "^3.0.1"
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz"
+  integrity sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+expect@^28.0.0, expect@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/expect/-/expect-28.1.3.tgz"
+  integrity sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==
+  dependencies:
+    "@jest/expect-utils" "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+
+expect@^29.0.0, expect@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/expect/-/expect-29.0.3.tgz"
+  integrity sha512-t8l5DTws3212VbmPL+tBFXhjRHLmctHB0oQbL8eUc6S7NzZtYUhycrFO9mkxA0ZUC6FAWdNi7JchJSkODtcu1Q==
+  dependencies:
+    "@jest/expect-utils" "^29.0.3"
+    jest-get-type "^29.0.0"
+    jest-matcher-utils "^29.0.3"
+    jest-message-util "^29.0.3"
+    jest-util "^29.0.3"
+
+expect@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/expect/-/expect-29.5.0.tgz"
+  integrity sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==
+  dependencies:
+    "@jest/expect-utils" "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+
+expect@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.7.0.tgz#578874590dcb3214514084c08115d8aee61e11bc"
+  integrity sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==
+  dependencies:
+    "@jest/expect-utils" "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+
+expect@^30.0.0:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-30.0.5.tgz#c23bf193c5e422a742bfd2990ad990811de41a5a"
+  integrity sha512-P0te2pt+hHI5qLJkIR+iMvS+lYUZml8rKKsohVHAGY+uClp9XVbdyYNJOIjSRpHVp8s8YqxJCiHUkSYZGr8rtQ==
+  dependencies:
+    "@jest/expect-utils" "30.0.5"
+    "@jest/get-type" "30.0.1"
+    jest-matcher-utils "30.0.5"
+    jest-message-util "30.0.5"
+    jest-mock "30.0.5"
+    jest-util "30.0.5"
+
+express-rate-limit@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.0.tgz"
+  integrity sha512-eB5zbQh5h+VenMPM3fh+nw1YExi5nMr6HUCR62ELSP11huvxm/Uir1H1QEyTkk5QX6A58pX6NmaTMceKZ0Eodg==
+
+express@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/express/-/express-5.1.0.tgz"
+  integrity sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==
+  dependencies:
+    accepts "^2.0.0"
+    body-parser "^2.2.0"
+    content-disposition "^1.0.0"
+    content-type "^1.0.5"
+    cookie "^0.7.1"
+    cookie-signature "^1.2.1"
+    debug "^4.4.0"
+    encodeurl "^2.0.0"
+    escape-html "^1.0.3"
+    etag "^1.8.1"
+    finalhandler "^2.1.0"
+    fresh "^2.0.0"
+    http-errors "^2.0.0"
+    merge-descriptors "^2.0.0"
+    mime-types "^3.0.0"
+    on-finished "^2.4.1"
+    once "^1.4.0"
+    parseurl "^1.3.3"
+    proxy-addr "^2.0.7"
+    qs "^6.14.0"
+    range-parser "^1.2.1"
+    router "^2.2.0"
+    send "^1.1.0"
+    serve-static "^2.2.0"
+    statuses "^2.0.1"
+    type-is "^2.0.1"
+    vary "^1.1.2"
+
+extract-zip@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-fifo@^1.2.0, fast-fifo@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz"
+  integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
+
+fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+fb-babel-plugin-utils@^0.13.0:
+  version "0.13.1"
+  resolved "https://registry.npmjs.org/fb-babel-plugin-utils/-/fb-babel-plugin-utils-0.13.1.tgz"
+  integrity sha512-AxAr7ut7v4fzHp5VETGxcDUPmRup5H7bkMNNfxaRunS3jzm2rOS5NLvCPCDnnQIiI6AB0x2GrOx/eIcAOVJAAA==
+  dependencies:
+    "@babel/core" "^7.0.0"
+    "@babel/generator" "^7.0.0"
+    "@babel/parser" "^7.7.4"
+    "@babel/plugin-syntax-class-properties" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.7.4"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
+    json-diff "^0.5.4"
+
+fb-watchman@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz"
+  integrity sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==
+  dependencies:
+    bser "2.1.1"
+
+fbt@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/fbt/-/fbt-1.0.2.tgz"
+  integrity sha512-vWIasrcX34OW2EWohjrAQM0jpJBH2FjqxW9XrQd38xhtBVXWaks34ePWBSHO3QEShmirRx6kwJNZJrofsHjvlw==
+  dependencies:
+    invariant "^2.2.4"
+
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz"
+  integrity sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==
+  dependencies:
+    pend "~1.2.0"
+
+fdir@^6.4.3:
+  version "6.4.3"
+  resolved "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz"
+  integrity sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==
+
+fecha@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz"
+  integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
+  dependencies:
+    flat-cache "^4.0.0"
+
+filelist@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+  integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+  dependencies:
+    minimatch "^5.0.1"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.0.tgz"
+  integrity sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==
+  dependencies:
+    debug "^4.4.0"
+    encodeurl "^2.0.0"
+    escape-html "^1.0.3"
+    on-finished "^2.4.1"
+    parseurl "^1.3.3"
+    statuses "^2.0.1"
+
+find-cache-dir@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
+
+find-node-modules@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/find-node-modules/-/find-node-modules-2.1.3.tgz"
+  integrity sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==
+  dependencies:
+    findup-sync "^4.0.0"
+    merge "^2.1.1"
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+findup-sync@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz"
+  integrity sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^4.0.0"
+    micromatch "^4.0.2"
+    resolve-dir "^1.0.1"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.4"
+
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+flatted@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz"
+  integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
+
+flow-enums-runtime@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.npmjs.org/flow-enums-runtime/-/flow-enums-runtime-0.0.4.tgz"
+  integrity sha512-kkJ/ABZb4rhyFw05yCWdcA1K2uW7ddYzz9zVNJp5kRX3BzsIynB4f0E4oLlf+zgDLErj9FwGda1qEAmhnRNXPQ==
+
+fn.name@1.x.x:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz"
+  integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
+
+folder-hash@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/folder-hash/-/folder-hash-4.0.4.tgz"
+  integrity sha512-zEyYH+UsHEfJJcCRSf9ai5I4CTZwZ8ObONRuEI5hcEmJY5pS0FUWKruX9mMnYJrgC7MlPFDYnGsK1R+WFYjLlQ==
+  dependencies:
+    debug "^4.3.3"
+    minimatch "~5.1.2"
+
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+for-each@^0.3.3, for-each@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
+  integrity sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==
+  dependencies:
+    is-callable "^1.2.7"
+
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+foreground-child@^3.1.1:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz"
+  integrity sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==
+
+fs-extra@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz"
+  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
+get-uri@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.npmjs.org/get-uri/-/get-uri-6.0.4.tgz"
+  integrity sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==
+  dependencies:
+    basic-ftp "^5.0.2"
+    data-uri-to-buffer "^6.0.2"
+    debug "^4.3.4"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@^10.3.10:
+  version "10.3.10"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.5"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry "^1.10.1"
+
+glob@^10.4.5:
+  version "10.4.5"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^11.0.0:
+  version "11.0.1"
+  resolved "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz"
+  integrity sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^4.0.1"
+    minimatch "^10.0.0"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^2.0.0"
+
+glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+  version "7.2.3"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz"
+  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.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz"
+  integrity sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.19.0:
+  version "13.20.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz"
+  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
+
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+gopd@^1.0.1, gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
+has-bigints@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
+  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
+has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+"heap@>= 0.2.0":
+  version "0.2.7"
+  resolved "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz"
+  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
+
+hermes-eslint@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/hermes-eslint/-/hermes-eslint-0.25.1.tgz"
+  integrity sha512-nPz9+oyejT1zsIwoJ2pWdUvLcN1i+tbaWCOD8PpNBYQtnHXaPXImZp/6zZHnm3bo/DoFcAgh8+SNcxLFxh7m/A==
+  dependencies:
+    esrecurse "^4.3.0"
+    hermes-estree "0.25.1"
+    hermes-parser "0.25.1"
+
+hermes-estree@0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz"
+  integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==
+
+hermes-estree@0.26.0:
+  version "0.26.0"
+  resolved "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.26.0.tgz"
+  integrity sha512-If1T7lhfXnGlVLbnsmwerNB5cyJm2oIE8TN1UKEq6/OUX1nOGUhjXMpqAwZ1wkkn9Brda0VRyJEWOGT2GgVcAQ==
+
+hermes-parser@0.25.1, hermes-parser@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz"
+  integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==
+  dependencies:
+    hermes-estree "0.25.1"
+
+hermes-parser@0.26.0:
+  version "0.26.0"
+  resolved "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.26.0.tgz"
+  integrity sha512-fWT40jJ/BtlzuyiiQS7lzNIlB5h6flVZoN8Jn8v5l987HL5dK9s+/4+py0FaBmeIEROC2zxt5qMLwXFTPLQ7BA==
+  dependencies:
+    hermes-estree "0.26.0"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz"
+  integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
+  dependencies:
+    parse-passwd "^1.0.0"
+
+html-encoding-sniffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz"
+  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
+  dependencies:
+    whatwg-encoding "^2.0.0"
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-to-text@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz"
+  integrity sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==
+  dependencies:
+    "@selderee/plugin-htmlparser2" "^0.11.0"
+    deepmerge "^4.3.1"
+    dom-serializer "^2.0.0"
+    htmlparser2 "^8.0.2"
+    selderee "^0.11.0"
+
+htmlparser2@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
+htmlparser2@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz"
+  integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
+http-errors@2.0.0, http-errors@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+  dependencies:
+    "@tootallnate/once" "2"
+    agent-base "6"
+    debug "4"
+
+http-proxy-agent@^7.0.0, http-proxy-agent@^7.0.1, http-proxy-agent@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz"
+  integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
+  dependencies:
+    agent-base "^7.1.0"
+    debug "^4.3.4"
+
+https-proxy-agent@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+https-proxy-agent@^7.0.5, https-proxy-agent@^7.0.6:
+  version "7.0.6"
+  resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz"
+  integrity sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==
+  dependencies:
+    agent-base "^7.1.2"
+    debug "4"
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.6.3, iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+ieee754@^1.1.13, ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+ignore@^5.2.4:
+  version "5.3.1"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+
+ignore@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
+import-fresh@^3.2.1, import-fresh@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-local@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@^1.3.4:
+  version "1.3.8"
+  resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+ip-address@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz"
+  integrity sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==
+  dependencies:
+    jsbn "1.1.0"
+    sprintf-js "^1.1.3"
+
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-async-function@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.1.1.tgz#3e69018c8e04e73b738793d020bfe884b9fd3523"
+  integrity sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==
+  dependencies:
+    async-function "^1.0.0"
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.2.tgz#7067f47709809a393c71ff5bb3e135d8a9215d9e"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
+is-generator-function@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
+  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.0"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
+is-interactive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz"
+  integrity sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==
+
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-promise@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz"
+  integrity sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==
+
+is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
+is-unicode-supported@^1.1.0, is-unicode-supported@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz"
+  integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2, is-weakref@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.1.tgz#eea430182be8d64174bd96bffbc46f21bf3f9293"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-weakset@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-windows@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz"
+  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-instrument@^6.0.0:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz#fa15401df6c15874bcb2105f773325d78c666765"
+  integrity sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==
+  dependencies:
+    "@babel/core" "^7.23.9"
+    "@babel/parser" "^7.23.9"
+    "@istanbuljs/schema" "^0.1.3"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^7.5.4"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-report@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz"
+  integrity sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^4.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+istanbul-reports@^3.1.6:
+  version "3.1.7"
+  resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz"
+  integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jackspeak@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.0.tgz"
+  integrity sha512-9DDdhb5j6cpeitCbvLO7n7J4IxnbM6hoF6O1g4HQ5TfhvvKN8ywDM7668ZhMHRqVmxqhps/F6syWK2KcPxYlkw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+
+jake@^10.8.5:
+  version "10.9.2"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.9.2.tgz#6ae487e6a69afec3a5e167628996b59f35ae2b7f"
+  integrity sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.4"
+    minimatch "^3.1.2"
+
+jest-changed-files@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-28.1.3.tgz"
+  integrity sha512-esaOfUWJXk2nfZt9SPyC8gA1kNfdKLkQWyzsMlqq8msYSlNKfmZxfRgZn4Cd4MGVUF+7v6dBs0d5TOAKa7iIiA==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
+jest-changed-files@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.0.0.tgz"
+  integrity sha512-28/iDMDrUpGoCitTURuDqUzWQoWmOmOKOFST1mi2lwh62X4BFf6khgH3uSuo1e49X/UDjuApAj3w0wLOex4VPQ==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
+jest-changed-files@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.5.0.tgz"
+  integrity sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
+jest-changed-files@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"
+  integrity sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==
+  dependencies:
+    execa "^5.0.0"
+    jest-util "^29.7.0"
+    p-limit "^3.1.0"
+
+jest-circus@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-circus/-/jest-circus-28.1.3.tgz"
+  integrity sha512-cZ+eS5zc79MBwt+IhQhiEp0OeBddpc1n8MBo1nMB8A7oPMKEO+Sre+wHaLJexQUj9Ya/8NOBY0RESUgYjB6fow==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/expect" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^28.1.3"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    p-limit "^3.1.0"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-circus@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-circus/-/jest-circus-29.0.3.tgz"
+  integrity sha512-QeGzagC6Hw5pP+df1+aoF8+FBSgkPmraC1UdkeunWh0jmrp7wC0Hr6umdUAOELBQmxtKAOMNC3KAdjmCds92Zg==
+  dependencies:
+    "@jest/environment" "^29.0.3"
+    "@jest/expect" "^29.0.3"
+    "@jest/test-result" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.0.3"
+    jest-matcher-utils "^29.0.3"
+    jest-message-util "^29.0.3"
+    jest-runtime "^29.0.3"
+    jest-snapshot "^29.0.3"
+    jest-util "^29.0.3"
+    p-limit "^3.1.0"
+    pretty-format "^29.0.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-circus@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-circus/-/jest-circus-29.5.0.tgz"
+  integrity sha512-gq/ongqeQKAplVxqJmbeUOJJKkW3dDNPY8PjhJ5G0lBRvu0e3EWGxGy5cI4LAGA7gV2UHCtWBI4EMXK8c9nQKA==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/expect" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.5.0"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-runtime "^29.5.0"
+    jest-snapshot "^29.5.0"
+    jest-util "^29.5.0"
+    p-limit "^3.1.0"
+    pretty-format "^29.5.0"
+    pure-rand "^6.0.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-circus@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.7.0.tgz#b6817a45fcc835d8b16d5962d0c026473ee3668a"
+  integrity sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/expect" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^1.0.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.7.0"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    p-limit "^3.1.0"
+    pretty-format "^29.7.0"
+    pure-rand "^6.0.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-cli@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-cli/-/jest-cli-28.1.3.tgz"
+  integrity sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==
+  dependencies:
+    "@jest/core" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-cli@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-cli/-/jest-cli-29.0.3.tgz"
+  integrity sha512-aUy9Gd/Kut1z80eBzG10jAn6BgS3BoBbXyv+uXEqBJ8wnnuZ5RpNfARoskSrTIy1GY4a8f32YGuCMwibtkl9CQ==
+  dependencies:
+    "@jest/core" "^29.0.3"
+    "@jest/test-result" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^29.0.3"
+    jest-util "^29.0.3"
+    jest-validate "^29.0.3"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-cli@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-cli/-/jest-cli-29.5.0.tgz"
+  integrity sha512-L1KcP1l4HtfwdxXNFCL5bmUbLQiKrakMUriBEcc1Vfz6gx31ORKdreuWvmQVBit+1ss9NNR3yxjwfwzZNdQXJw==
+  dependencies:
+    "@jest/core" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^29.5.0"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-cli@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.7.0.tgz#5592c940798e0cae677eec169264f2d839a37995"
+  integrity sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==
+  dependencies:
+    "@jest/core" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    create-jest "^29.7.0"
+    exit "^0.1.2"
+    import-local "^3.0.2"
+    jest-config "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    yargs "^17.3.1"
+
+jest-config@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-config/-/jest-config-28.1.3.tgz"
+  integrity sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    babel-jest "^28.1.3"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^28.1.3"
+    jest-environment-node "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.3"
+    jest-runner "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-config@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-config/-/jest-config-29.0.3.tgz"
+  integrity sha512-U5qkc82HHVYe3fNu2CRXLN4g761Na26rWKf7CjM8LlZB3In1jadEkZdMwsE37rd9RSPV0NfYaCjHdk/gu3v+Ew==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    babel-jest "^29.0.3"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.0.3"
+    jest-environment-node "^29.0.3"
+    jest-get-type "^29.0.0"
+    jest-regex-util "^29.0.0"
+    jest-resolve "^29.0.3"
+    jest-runner "^29.0.3"
+    jest-util "^29.0.3"
+    jest-validate "^29.0.3"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.0.3"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-config@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-config/-/jest-config-29.5.0.tgz"
+  integrity sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    babel-jest "^29.5.0"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.5.0"
+    jest-environment-node "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.5.0"
+    jest-runner "^29.5.0"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.5.0"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-config@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.7.0.tgz#bcbda8806dbcc01b1e316a46bb74085a84b0245f"
+  integrity sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    babel-jest "^29.7.0"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.7.0"
+    jest-environment-node "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-runner "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@30.0.5:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-30.0.5.tgz#b40f81e0c0d13e5b81c4d62b0d0dfa6a524ee0fd"
+  integrity sha512-1UIqE9PoEKaHcIKvq2vbibrCog4Y8G0zmOxgQUVEiTqwR5hJVMCoDsN1vFvI5JvwD37hjueZ1C4l2FyGnfpE0A==
+  dependencies:
+    "@jest/diff-sequences" "30.0.1"
+    "@jest/get-type" "30.0.1"
+    chalk "^4.1.2"
+    pretty-format "30.0.5"
+
+jest-diff@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-28.1.3.tgz"
+  integrity sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
+jest-diff@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-29.0.3.tgz"
+  integrity sha512-+X/AIF5G/vX9fWK+Db9bi9BQas7M9oBME7egU7psbn4jlszLFCu0dW63UgeE6cs/GANq4fLaT+8sGHQQ0eCUfg==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.0.0"
+    jest-get-type "^29.0.0"
+    pretty-format "^29.0.3"
+
+jest-diff@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-29.5.0.tgz"
+  integrity sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.4.3"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
+
+jest-diff@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
+  integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.6.3"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-docblock@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-28.1.1.tgz"
+  integrity sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-docblock@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.0.0.tgz"
+  integrity sha512-s5Kpra/kLzbqu9dEjov30kj1n4tfu3e7Pl8v+f8jOkeWNqM6Ds8jRaJfZow3ducoQUrf2Z4rs2N5S3zXnb83gw==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-docblock@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.4.3.tgz"
+  integrity sha512-fzdTftThczeSD9nZ3fzA/4KkHtnmllawWrXO69vtI+L9WjEIuXWs4AmyME7lN5hU7dB0sHhuPfcKofRsUb/2Fg==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-docblock@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.7.0.tgz#8fddb6adc3cdc955c93e2a87f61cfd350d5d119a"
+  integrity sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-each/-/jest-each-28.1.3.tgz"
+  integrity sha512-arT1z4sg2yABU5uogObVPvSlSMQlDA48owx07BDPAiasW0yYpYHYOo4HHLz9q0BVzDVU4hILFjzJw0So9aCL/g==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    chalk "^4.0.0"
+    jest-get-type "^28.0.2"
+    jest-util "^28.1.3"
+    pretty-format "^28.1.3"
+
+jest-each@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-each/-/jest-each-29.0.3.tgz"
+  integrity sha512-wILhZfESURHHBNvPMJ0lZlYZrvOQJxAo3wNHi+ycr90V7M+uGR9Gh4+4a/BmaZF0XTyZsk4OiYEf3GJN7Ltqzg==
+  dependencies:
+    "@jest/types" "^29.0.3"
+    chalk "^4.0.0"
+    jest-get-type "^29.0.0"
+    jest-util "^29.0.3"
+    pretty-format "^29.0.3"
+
+jest-each@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-each/-/jest-each-29.5.0.tgz"
+  integrity sha512-HM5kIJ1BTnVt+DQZ2ALp3rzXEl+g726csObrW/jpEGl+CDSSQpOJJX2KE/vEg8cxcMXdyEPu6U4QX5eruQv5hA==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.4.3"
+    jest-util "^29.5.0"
+    pretty-format "^29.5.0"
+
+jest-each@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.7.0.tgz#162a9b3f2328bdd991beaabffbb74745e56577d1"
+  integrity sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    jest-get-type "^29.6.3"
+    jest-util "^29.7.0"
+    pretty-format "^29.7.0"
+
+jest-environment-jsdom@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.0.3.tgz"
+  integrity sha512-KIGvpm12c71hoYTjL4wC2c8K6KfhOHJqJtaHc1IApu5rG047YWZoEP13BlbucWfzGISBrmli8KFqdhdQEa8Wnw==
+  dependencies:
+    "@jest/environment" "^29.0.3"
+    "@jest/fake-timers" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/jsdom" "^20.0.0"
+    "@types/node" "*"
+    jest-mock "^29.0.3"
+    jest-util "^29.0.3"
+    jsdom "^20.0.0"
+
+jest-environment-node@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-28.1.3.tgz"
+  integrity sha512-ugP6XOhEpjAEhGYvp5Xj989ns5cB1K6ZdjBYuS30umT4CQEETaxSiPcZ/E1kFktX4GkrcM4qu07IIlDYX1gp+A==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    jest-mock "^28.1.3"
+    jest-util "^28.1.3"
+
+jest-environment-node@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.0.3.tgz"
+  integrity sha512-cdZqRCnmIlTXC+9vtvmfiY/40Cj6s2T0czXuq1whvQdmpzAnj4sbqVYuZ4zFHk766xTTJ+Ij3uUqkk8KCfXoyg==
+  dependencies:
+    "@jest/environment" "^29.0.3"
+    "@jest/fake-timers" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    jest-mock "^29.0.3"
+    jest-util "^29.0.3"
+
+jest-environment-node@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.5.0.tgz"
+  integrity sha512-ExxuIK/+yQ+6PRGaHkKewYtg6hto2uGCgvKdb2nfJfKXgZ17DfXjvbZ+jA1Qt9A8EQSfPnt5FKIfnOO3u1h9qw==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/fake-timers" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    jest-mock "^29.5.0"
+    jest-util "^29.5.0"
+
+jest-environment-node@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.7.0.tgz#0b93e111dda8ec120bc8300e6d1fb9576e164376"
+  integrity sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
+
+jest-get-type@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz"
+  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
+
+jest-get-type@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.0.0.tgz"
+  integrity sha512-83X19z/HuLKYXYHskZlBAShO7UfLFXu/vWajw9ZNJASN32li8yHMaVGAQqxFW1RCFOkB7cubaL6FaJVQqqJLSw==
+
+jest-get-type@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz"
+  integrity sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==
+
+jest-get-type@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
+  integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
+
+jest-haste-map@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-28.1.3.tgz"
+  integrity sha512-3S+RQWDXccXDKSWnkHa/dPwt+2qwA8CJzR61w3FoYCvoo3Pn8tvGcysmMF0Bj0EX5RYvAI2EIvC57OmotfdtKA==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^28.0.2"
+    jest-util "^28.1.3"
+    jest-worker "^28.1.3"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-haste-map@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.0.3.tgz"
+  integrity sha512-uMqR99+GuBHo0RjRhOE4iA6LmsxEwRdgiIAQgMU/wdT2XebsLDz5obIwLZm/Psj+GwSEQhw9AfAVKGYbh2G55A==
+  dependencies:
+    "@jest/types" "^29.0.3"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.0.0"
+    jest-util "^29.0.3"
+    jest-worker "^29.0.3"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-haste-map@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.5.0.tgz"
+  integrity sha512-IspOPnnBro8YfVYSw6yDRKh/TiCdRngjxeacCps1cQ9cgVN6+10JUcuJ1EabrgYLOATsIAigxA0rLR9x/YlrSA==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.4.3"
+    jest-util "^29.5.0"
+    jest-worker "^29.5.0"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-haste-map@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.7.0.tgz#3c2396524482f5a0506376e6c858c3bbcc17b104"
+  integrity sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.6.3"
+    jest-util "^29.7.0"
+    jest-worker "^29.7.0"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-leak-detector@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-28.1.3.tgz"
+  integrity sha512-WFVJhnQsiKtDEo5lG2mM0v40QWnBM+zMdHHyJs8AWZ7J0QZJS59MsyKeJHWhpBZBH32S48FOVvGyOFT1h0DlqA==
+  dependencies:
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
+jest-leak-detector@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.0.3.tgz"
+  integrity sha512-YfW/G63dAuiuQ3QmQlh8hnqLDe25WFY3eQhuc/Ev1AGmkw5zREblTh7TCSKLoheyggu6G9gxO2hY8p9o6xbaRQ==
+  dependencies:
+    jest-get-type "^29.0.0"
+    pretty-format "^29.0.3"
+
+jest-leak-detector@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.5.0.tgz"
+  integrity sha512-u9YdeeVnghBUtpN5mVxjID7KbkKE1QU4f6uUwuxiY0vYRi9BUCLKlPEZfDGR67ofdFmDz9oPAy2G92Ujrntmow==
+  dependencies:
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
+
+jest-leak-detector@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz#5b7ec0dadfdfec0ca383dc9aa016d36b5ea4c728"
+  integrity sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==
+  dependencies:
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-matcher-utils@30.0.5:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-30.0.5.tgz#dff3334be58faea4a5e1becc228656fbbfc2467d"
+  integrity sha512-uQgGWt7GOrRLP1P7IwNWwK1WAQbq+m//ZY0yXygyfWp0rJlksMSLQAA4wYQC3b6wl3zfnchyTx+k3HZ5aPtCbQ==
+  dependencies:
+    "@jest/get-type" "30.0.1"
+    chalk "^4.1.2"
+    jest-diff "30.0.5"
+    pretty-format "30.0.5"
+
+jest-matcher-utils@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz"
+  integrity sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^28.1.3"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
+jest-matcher-utils@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.0.3.tgz"
+  integrity sha512-RsR1+cZ6p1hDV4GSCQTg+9qjeotQCgkaleIKLK7dm+U4V/H2bWedU3RAtLm8+mANzZ7eDV33dMar4pejd7047w==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.0.3"
+    jest-get-type "^29.0.0"
+    pretty-format "^29.0.3"
+
+jest-matcher-utils@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz"
+  integrity sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.5.0"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
+
+jest-matcher-utils@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
+  integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-message-util@30.0.5:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-30.0.5.tgz#dd12ffec91dd3fa6a59cbd538a513d8e239e070c"
+  integrity sha512-NAiDOhsK3V7RU0Aa/HnrQo+E4JlbarbmI3q6Pi4KcxicdtjV82gcIUrejOtczChtVQR4kddu1E1EJlW6EN9IyA==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@jest/types" "30.0.5"
+    "@types/stack-utils" "^2.0.3"
+    chalk "^4.1.2"
+    graceful-fs "^4.2.11"
+    micromatch "^4.0.8"
+    pretty-format "30.0.5"
+    slash "^3.0.0"
+    stack-utils "^2.0.6"
+
+jest-message-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz"
+  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.1.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-message-util@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.0.3.tgz"
+  integrity sha512-7T8JiUTtDfppojosORAflABfLsLKMLkBHSWkjNQrjIltGoDzNGn7wEPOSfjqYAGTYME65esQzMJxGDjuLBKdOg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.0.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.0.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-message-util@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.5.0.tgz"
+  integrity sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.5.0"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.5.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-message-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz"
+  integrity sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.6.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@30.0.5:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-30.0.5.tgz#ef437e89212560dd395198115550085038570bdd"
+  integrity sha512-Od7TyasAAQX/6S+QCbN6vZoWOMwlTtzzGuxJku1GhGanAjz9y+QsQkpScDmETvdc9aSXyJ/Op4rhpMYBWW91wQ==
+  dependencies:
+    "@jest/types" "30.0.5"
+    "@types/node" "*"
+    jest-util "30.0.5"
+
+jest-mock@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-mock/-/jest-mock-28.1.3.tgz"
+  integrity sha512-o3J2jr6dMMWYVH4Lh/NKmDXdosrsJgi4AviS8oXLujcjpCMBb1FMsblDnOXKZKfSiHLxYub1eS0IHuRXsio9eA==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+
+jest-mock@^29.0.3, jest-mock@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz"
+  integrity sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-util "^29.7.0"
+
+jest-mock@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-mock/-/jest-mock-29.5.0.tgz"
+  integrity sha512-GqOzvdWDE4fAV2bWQLQCkujxYWL7RxjCnj71b5VhDAGOevB3qj3Ovg26A5NI84ZpODxyzaozXLOh2NCgkbvyaw==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    jest-util "^29.5.0"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@30.0.1:
+  version "30.0.1"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-30.0.1.tgz#f17c1de3958b67dfe485354f5a10093298f2a49b"
+  integrity sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==
+
+jest-regex-util@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-28.0.2.tgz"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
+jest-regex-util@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.0.0.tgz"
+  integrity sha512-BV7VW7Sy0fInHWN93MMPtlClweYv2qrSCwfeFWmpribGZtQPWNvRSq9XOVgOEjU1iBGRKXUZil0o2AH7Iy9Lug==
+
+jest-regex-util@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.4.3.tgz"
+  integrity sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==
+
+jest-regex-util@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.6.3.tgz#4a556d9c776af68e1c5f48194f4d0327d24e8a52"
+  integrity sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==
+
+jest-resolve-dependencies@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.3.tgz"
+  integrity sha512-qa0QO2Q0XzQoNPouMbCc7Bvtsem8eQgVPNkwn9LnS+R2n8DaVDPL/U1gngC0LTl1RYXJU0uJa2BMC2DbTfFrHA==
+  dependencies:
+    jest-regex-util "^28.0.2"
+    jest-snapshot "^28.1.3"
+
+jest-resolve-dependencies@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.0.3.tgz"
+  integrity sha512-KzuBnXqNvbuCdoJpv8EanbIGObk7vUBNt/PwQPPx2aMhlv/jaXpUJsqWYRpP/0a50faMBY7WFFP8S3/CCzwfDw==
+  dependencies:
+    jest-regex-util "^29.0.0"
+    jest-snapshot "^29.0.3"
+
+jest-resolve-dependencies@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.5.0.tgz"
+  integrity sha512-sjV3GFr0hDJMBpYeUuGduP+YeCRbd7S/ck6IvL3kQ9cpySYKqcqhdLLC2rFwrcL7tz5vYibomBrsFYWkIGGjOg==
+  dependencies:
+    jest-regex-util "^29.4.3"
+    jest-snapshot "^29.5.0"
+
+jest-resolve-dependencies@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.7.0.tgz#1b04f2c095f37fc776ff40803dc92921b1e88428"
+  integrity sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==
+  dependencies:
+    jest-regex-util "^29.6.3"
+    jest-snapshot "^29.7.0"
+
+jest-resolve@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-28.1.3.tgz"
+  integrity sha512-Z1W3tTjE6QaNI90qo/BJpfnvpxtaFTFw5CDgwpyE/Kz8U/06N1Hjf4ia9quUhCh39qIGWF1ZuxFiBiJQwSEYKQ==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-resolve@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.0.3.tgz"
+  integrity sha512-toVkia85Y/BPAjJasTC9zIPY6MmVXQPtrCk8SmiheC4MwVFE/CMFlOtMN6jrwPMC6TtNh8+sTMllasFeu1wMPg==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.3"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.0.3"
+    jest-validate "^29.0.3"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-resolve@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.5.0.tgz"
+  integrity sha512-1TzxJ37FQq7J10jPtQjcc+MkCkE3GBpBecsSUWJ0qZNJpmg6m0D9/7II03yJulm3H/fvVjgqLh/k2eYg+ui52w==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
+
+jest-resolve@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.7.0.tgz#64d6a8992dd26f635ab0c01e5eef4399c6bcbc30"
+  integrity sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
+
+jest-runner@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-runner/-/jest-runner-28.1.3.tgz"
+  integrity sha512-GkMw4D/0USd62OVO0oEgjn23TM+YJa2U2Wu5zz9xsQB1MxWKDOlrnykPxnMsN0tnJllfLPinHTka61u0QhaxBA==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/environment" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    graceful-fs "^4.2.9"
+    jest-docblock "^28.1.1"
+    jest-environment-node "^28.1.3"
+    jest-haste-map "^28.1.3"
+    jest-leak-detector "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-resolve "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-util "^28.1.3"
+    jest-watcher "^28.1.3"
+    jest-worker "^28.1.3"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runner@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-runner/-/jest-runner-29.0.3.tgz"
+  integrity sha512-Usu6VlTOZlCZoNuh3b2Tv/yzDpKqtiNAetG9t3kJuHfUyVMNW7ipCCJOUojzKkjPoaN7Bl1f7Buu6PE0sGpQxw==
+  dependencies:
+    "@jest/console" "^29.0.3"
+    "@jest/environment" "^29.0.3"
+    "@jest/test-result" "^29.0.3"
+    "@jest/transform" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.0.0"
+    jest-environment-node "^29.0.3"
+    jest-haste-map "^29.0.3"
+    jest-leak-detector "^29.0.3"
+    jest-message-util "^29.0.3"
+    jest-resolve "^29.0.3"
+    jest-runtime "^29.0.3"
+    jest-util "^29.0.3"
+    jest-watcher "^29.0.3"
+    jest-worker "^29.0.3"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runner@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-runner/-/jest-runner-29.5.0.tgz"
+  integrity sha512-m7b6ypERhFghJsslMLhydaXBiLf7+jXy8FwGRHO3BGV1mcQpPbwiqiKUR2zU2NJuNeMenJmlFZCsIqzJCTeGLQ==
+  dependencies:
+    "@jest/console" "^29.5.0"
+    "@jest/environment" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.4.3"
+    jest-environment-node "^29.5.0"
+    jest-haste-map "^29.5.0"
+    jest-leak-detector "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-resolve "^29.5.0"
+    jest-runtime "^29.5.0"
+    jest-util "^29.5.0"
+    jest-watcher "^29.5.0"
+    jest-worker "^29.5.0"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runner@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.7.0.tgz#809af072d408a53dcfd2e849a4c976d3132f718e"
+  integrity sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/environment" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.7.0"
+    jest-environment-node "^29.7.0"
+    jest-haste-map "^29.7.0"
+    jest-leak-detector "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-resolve "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-util "^29.7.0"
+    jest-watcher "^29.7.0"
+    jest-worker "^29.7.0"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runtime@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-runtime/-/jest-runtime-28.1.3.tgz"
+  integrity sha512-NU+881ScBQQLc1JHG5eJGU7Ui3kLKrmwCPPtYsJtBykixrM2OhVQlpMmFWJjMyDfdkGgBMNjXCGB/ebzsgNGQw==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/globals" "^28.1.3"
+    "@jest/source-map" "^28.1.2"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-mock "^28.1.3"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-runtime@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.0.3.tgz"
+  integrity sha512-12gZXRQ7ozEeEHKTY45a+YLqzNDR/x4c//X6AqwKwKJPpWM8FY4vwn4VQJOcLRS3Nd1fWwgP7LU4SoynhuUMHQ==
+  dependencies:
+    "@jest/environment" "^29.0.3"
+    "@jest/fake-timers" "^29.0.3"
+    "@jest/globals" "^29.0.3"
+    "@jest/source-map" "^29.0.0"
+    "@jest/test-result" "^29.0.3"
+    "@jest/transform" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.3"
+    jest-message-util "^29.0.3"
+    jest-mock "^29.0.3"
+    jest-regex-util "^29.0.0"
+    jest-resolve "^29.0.3"
+    jest-snapshot "^29.0.3"
+    jest-util "^29.0.3"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-runtime@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.5.0.tgz"
+  integrity sha512-1Hr6Hh7bAgXQP+pln3homOiEZtCDZFqwmle7Ew2j8OlbkIu6uE3Y/etJQG8MLQs3Zy90xrp2C0BRrtPHG4zryw==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/fake-timers" "^29.5.0"
+    "@jest/globals" "^29.5.0"
+    "@jest/source-map" "^29.4.3"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-mock "^29.5.0"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.5.0"
+    jest-snapshot "^29.5.0"
+    jest-util "^29.5.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-runtime@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.7.0.tgz#efecb3141cf7d3767a3a0cc8f7c9990587d3d817"
+  integrity sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/globals" "^29.7.0"
+    "@jest/source-map" "^29.6.3"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-mock "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-snapshot@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-28.1.3.tgz"
+  integrity sha512-4lzMgtiNlc3DU/8lZfmqxN3AYD6GGLbl+72rdBpXvcV+whX7mDrREzkPdp2RnmfIiWBg1YbuFSkXduF2JcafJg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^28.1.3"
+    graceful-fs "^4.2.9"
+    jest-diff "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-haste-map "^28.1.3"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    natural-compare "^1.4.0"
+    pretty-format "^28.1.3"
+    semver "^7.3.5"
+
+jest-snapshot@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.0.3.tgz"
+  integrity sha512-52q6JChm04U3deq+mkQ7R/7uy7YyfVIrebMi6ZkBoDJ85yEjm/sJwdr1P0LOIEHmpyLlXrxy3QP0Zf5J2kj0ew==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.0.3"
+    "@jest/transform" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.0.3"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.0.3"
+    jest-get-type "^29.0.0"
+    jest-haste-map "^29.0.3"
+    jest-matcher-utils "^29.0.3"
+    jest-message-util "^29.0.3"
+    jest-util "^29.0.3"
+    natural-compare "^1.4.0"
+    pretty-format "^29.0.3"
+    semver "^7.3.5"
+
+jest-snapshot@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.5.0.tgz"
+  integrity sha512-x7Wolra5V0tt3wRs3/ts3S6ciSQVypgGQlJpz2rsdQYoUKxMxPNaoHMGJN6qAuPJqS+2iQ1ZUn5kl7HCyls84g==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.5.0"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+    natural-compare "^1.4.0"
+    pretty-format "^29.5.0"
+    semver "^7.3.5"
+
+jest-snapshot@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.7.0.tgz#c2c574c3f51865da1bb329036778a69bf88a6be5"
+  integrity sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.7.0"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    natural-compare "^1.4.0"
+    pretty-format "^29.7.0"
+    semver "^7.5.3"
+
+jest-util@30.0.5:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-30.0.5.tgz#035d380c660ad5f1748dff71c4105338e05f8669"
+  integrity sha512-pvyPWssDZR0FlfMxCBoc0tvM8iUEskaRFALUtGQYzVEAqisAztmy+R8LnU14KT4XA0H/a5HMVTXat1jLne010g==
+  dependencies:
+    "@jest/types" "30.0.5"
+    "@types/node" "*"
+    chalk "^4.1.2"
+    ci-info "^4.2.0"
+    graceful-fs "^4.2.11"
+    picomatch "^4.0.2"
+
+jest-util@^28.0.0, jest-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-util@^29.0.0, jest-util@^29.0.3, jest-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz"
+  integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-util@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz"
+  integrity sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-validate/-/jest-validate-28.1.3.tgz"
+  integrity sha512-SZbOGBWEsaTxBGCOpsRWlXlvNkvTkY0XxRfh7zYmvd8uL5Qzyg0CHAXiXKROflh801quA6+/DsT4ODDthOC/OA==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^28.0.2"
+    leven "^3.1.0"
+    pretty-format "^28.1.3"
+
+jest-validate@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-validate/-/jest-validate-29.0.3.tgz"
+  integrity sha512-OebiqqT6lK8cbMPtrSoS3aZP4juID762lZvpf1u+smZnwTEBCBInan0GAIIhv36MxGaJvmq5uJm7dl5gVt+Zrw==
+  dependencies:
+    "@jest/types" "^29.0.3"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.0.0"
+    leven "^3.1.0"
+    pretty-format "^29.0.3"
+
+jest-validate@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-validate/-/jest-validate-29.5.0.tgz"
+  integrity sha512-pC26etNIi+y3HV8A+tUGr/lph9B18GnzSRAkPaaZJIE1eFdiYm6/CewuiJQ8/RlfHd1u/8Ioi8/sJ+CmbA+zAQ==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.4.3"
+    leven "^3.1.0"
+    pretty-format "^29.5.0"
+
+jest-validate@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
+  integrity sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.6.3"
+    leven "^3.1.0"
+    pretty-format "^29.7.0"
+
+jest-watcher@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-watcher/-/jest-watcher-28.1.3.tgz"
+  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.1.3"
+    string-length "^4.0.1"
+
+jest-watcher@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.0.3.tgz"
+  integrity sha512-tQX9lU91A+9tyUQKUMp0Ns8xAcdhC9fo73eqA3LFxP2bSgiF49TNcc+vf3qgGYYK9qRjFpXW9+4RgF/mbxyOOw==
+  dependencies:
+    "@jest/test-result" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^29.0.3"
+    string-length "^4.0.1"
+
+jest-watcher@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.5.0.tgz"
+  integrity sha512-KmTojKcapuqYrKDpRwfqcQ3zjMlwu27SYext9pt4GlF5FUgB+7XE1mcCnSm6a4uUpFyQIkb6ZhzZvHl+jiBCiA==
+  dependencies:
+    "@jest/test-result" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.5.0"
+    string-length "^4.0.1"
+
+jest-watcher@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.7.0.tgz#7810d30d619c3a62093223ce6bb359ca1b28a2f2"
+  integrity sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==
+  dependencies:
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.7.0"
+    string-length "^4.0.1"
+
+jest-worker@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz"
+  integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest-worker@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-29.0.3.tgz"
+  integrity sha512-Tl/YWUugQOjoTYwjKdfJWkSOfhufJHO5LhXTSZC3TRoQKO+fuXnZAdoXXBlpLXKGODBL3OvdUasfDD4PcMe6ng==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest-worker@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz"
+  integrity sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==
+  dependencies:
+    "@types/node" "*"
+    jest-util "^29.5.0"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest-worker@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.7.0.tgz#acad073acbbaeb7262bd5389e1bcf43e10058d4a"
+  integrity sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==
+  dependencies:
+    "@types/node" "*"
+    jest-util "^29.7.0"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/jest/-/jest-28.1.3.tgz"
+  integrity sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==
+  dependencies:
+    "@jest/core" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    import-local "^3.0.2"
+    jest-cli "^28.1.3"
+
+jest@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/jest/-/jest-29.0.3.tgz"
+  integrity sha512-ElgUtJBLgXM1E8L6K1RW1T96R897YY/3lRYqq9uVcPWtP2AAl/nQ16IYDh/FzQOOQ12VEuLdcPU83mbhG2C3PQ==
+  dependencies:
+    "@jest/core" "^29.0.3"
+    "@jest/types" "^29.0.3"
+    import-local "^3.0.2"
+    jest-cli "^29.0.3"
+
+jest@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/jest/-/jest-29.5.0.tgz"
+  integrity sha512-juMg3he2uru1QoXX078zTa7pO85QyB9xajZc6bU+d9yEGwrKX6+vGmJQ3UdVZsvTEUARIdObzH68QItim6OSSQ==
+  dependencies:
+    "@jest/core" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    import-local "^3.0.2"
+    jest-cli "^29.5.0"
+
+jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.7.0.tgz#994676fc24177f088f1c5e3737f5697204ff2613"
+  integrity sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==
+  dependencies:
+    "@jest/core" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    import-local "^3.0.2"
+    jest-cli "^29.7.0"
+
+joi@^17.11.0:
+  version "17.13.1"
+  resolved "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz"
+  integrity sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==
+  dependencies:
+    "@hapi/hoek" "^9.3.0"
+    "@hapi/topo" "^5.1.0"
+    "@sideway/address" "^4.1.5"
+    "@sideway/formula" "^3.0.1"
+    "@sideway/pinpoint" "^2.0.0"
+
+joycon@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz"
+  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsbn@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz"
+  integrity sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
+
+jsdom@^20.0.0:
+  version "20.0.0"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-20.0.0.tgz"
+  integrity sha512-x4a6CKCgx00uCmP+QakBDFXwjAJ69IkkIWHmtmjd3wvXPcdOS44hfX2vqkOQrVrq8l9DhNNADZRXaCEWvgXtVA==
+  dependencies:
+    abab "^2.0.6"
+    acorn "^8.7.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.2"
+    decimal.js "^10.3.1"
+    domexception "^4.0.0"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "^7.0.0"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^3.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+    ws "^8.8.0"
+    xml-name-validator "^4.0.0"
+
+jsdom@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz"
+  integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==
+  dependencies:
+    abab "^2.0.6"
+    cssstyle "^3.0.0"
+    data-urls "^4.0.0"
+    decimal.js "^10.4.3"
+    domexception "^4.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.4"
+    parse5 "^7.1.2"
+    rrweb-cssom "^0.6.0"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^12.0.1"
+    ws "^8.13.0"
+    xml-name-validator "^4.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+json-diff@^0.5.4:
+  version "0.5.5"
+  resolved "https://registry.npmjs.org/json-diff/-/json-diff-0.5.5.tgz"
+  integrity sha512-B2RSfPv8Y5iqm6/9aKC3cOhXPzjYupKDpGuqT5py9NRulL8J0UoB/zKXUo70xBsuxPcIFgtsGgEdXLrNp0GL7w==
+  dependencies:
+    cli-color "~0.1.6"
+    difflib "~0.2.1"
+    dreamopt "~0.6.0"
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^2.1.0, json5@^2.2.1, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
+  integrity sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jszip@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
+keypress@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/keypress/-/keypress-0.2.1.tgz"
+  integrity sha512-HjorDJFNhnM4SicvaUXac0X77NiskggxJdesG72+O5zBKpSqKFCrqmndKVqpu3pFqkla0St6uGk8Ju0sCurrmg==
+
+keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
+kuler@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz"
+  integrity sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==
+
+leac@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz"
+  integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==
+
+leven@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz"
+  integrity sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
+lilconfig@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+load-tsconfig@^0.2.3:
+  version "0.2.5"
+  resolved "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.5.tgz"
+  integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.memoize@4.x, lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
+lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-symbols@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
+  dependencies:
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
+
+log-symbols@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz"
+  integrity sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==
+  dependencies:
+    chalk "^5.0.0"
+    is-unicode-supported "^1.1.0"
+
+logform@^2.6.0, logform@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz"
+  integrity sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==
+  dependencies:
+    "@colors/colors" "1.6.0"
+    "@types/triple-beam" "^1.3.2"
+    fecha "^4.2.0"
+    ms "^2.1.1"
+    safe-stable-stringify "^2.3.1"
+    triple-beam "^1.3.0"
+
+loose-envify@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+lru-cache@^11.0.0:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-11.1.0.tgz"
+  integrity sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==
+
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+lru-cache@^7.14.1:
+  version "7.18.3"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz"
+  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
+
+"lru-cache@^9.1.1 || ^10.0.0":
+  version "10.2.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz"
+  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
+
+make-dir@^2.0.0, make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz"
+  integrity sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==
+  dependencies:
+    semver "^7.5.3"
+
+make-error@1.x, make-error@^1.1.1, make-error@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+media-typer@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz"
+  integrity sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==
+
+merge-descriptors@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz"
+  integrity sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+merge@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz"
+  integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
+
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-db@^1.54.0:
+  version "1.54.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz"
+  integrity sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime-types@^3.0.0, mime-types@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz"
+  integrity sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==
+  dependencies:
+    mime-db "^1.54.0"
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+minimatch@9.0.3, minimatch@^9.0.1:
+  version "9.0.3"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz"
+  integrity sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^5.0.1, minimatch@^5.1.6, minimatch@~5.1.2:
+  version "5.1.6"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.3, minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
+  version "7.0.4"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz"
+  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+
+minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
+mkdirp@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz"
+  integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
+
+mocha@^10.2.0:
+  version "10.8.2"
+  resolved "https://registry.npmjs.org/mocha/-/mocha-10.8.2.tgz"
+  integrity sha512-VZlYo/WE8t1tstuRmqgeyBgCbJc/lEdopaa+axcKzTBJ+UIdlAB9XnmvTCAH4pwR4ElNInaedhEBmZD8iCSVEg==
+  dependencies:
+    ansi-colors "^4.1.3"
+    browser-stdout "^1.3.1"
+    chokidar "^3.5.3"
+    debug "^4.3.5"
+    diff "^5.2.0"
+    escape-string-regexp "^4.0.0"
+    find-up "^5.0.0"
+    glob "^8.1.0"
+    he "^1.2.0"
+    js-yaml "^4.1.0"
+    log-symbols "^4.1.0"
+    minimatch "^5.1.6"
+    ms "^2.1.3"
+    serialize-javascript "^6.0.2"
+    strip-json-comments "^3.1.1"
+    supports-color "^8.1.1"
+    workerpool "^6.5.1"
+    yargs "^16.2.0"
+    yargs-parser "^20.2.9"
+    yargs-unparser "^2.0.0"
+
+mocha@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.npmjs.org/mocha/-/mocha-11.0.1.tgz"
+  integrity sha512-+3GkODfsDG71KSCQhc4IekSW+ItCK/kiez1Z28ksWvYhKXV/syxMlerR/sC7whDp7IyreZ4YxceMLdTs5hQE8A==
+  dependencies:
+    ansi-colors "^4.1.3"
+    browser-stdout "^1.3.1"
+    chokidar "^3.5.3"
+    debug "^4.3.5"
+    diff "^5.2.0"
+    escape-string-regexp "^4.0.0"
+    find-up "^5.0.0"
+    glob "^10.4.5"
+    he "^1.2.0"
+    js-yaml "^4.1.0"
+    log-symbols "^4.1.0"
+    minimatch "^5.1.6"
+    ms "^2.1.3"
+    serialize-javascript "^6.0.2"
+    strip-json-comments "^3.1.1"
+    supports-color "^8.1.1"
+    workerpool "^6.5.1"
+    yargs "^16.2.0"
+    yargs-parser "^20.2.9"
+    yargs-unparser "^2.0.0"
+
+mri@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/mri/-/mri-1.1.4.tgz"
+  integrity sha512-6y7IjGPm8AzlvoUrwAaw1tLnUBudaS3752vcd8JtrpGGQn+rXIe63LFVHm/YMwtqAuh+LJPCFdlLYPWM1nYn6w==
+
+ms@^2.1.1, ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+native-or-another@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/native-or-another/-/native-or-another-2.0.0.tgz"
+  integrity sha512-rDE50rrX/PSk2StV5EnwpRk35TENl4I4ZsSGZsMJufLdAJ1P4YzNwVf5UOhjQodwz+RdTP9eZSG7FiqnoY25nA==
+  dependencies:
+    native-or-bluebird "^1.1.2"
+
+native-or-bluebird@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz"
+  integrity sha512-0SH8UubxDfe382eYiwmd12qxAbiWGzlGZv6CkMA+DPojWa/Y0oH4hE0lRtFfFgJmPQFyKXeB8XxPbZz6TvvKaQ==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+negotiator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz"
+  integrity sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==
+
+netmask@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz"
+  integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==
+
+node-addon-api@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz"
+  integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==
+
+node-gyp-build@^4.3.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz"
+  integrity sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+npm-dts@^1.3.13:
+  version "1.3.13"
+  resolved "https://registry.npmjs.org/npm-dts/-/npm-dts-1.3.13.tgz"
+  integrity sha512-k1G0x0aIN8Wc0KyEZe2zAvBQqPi2NMBTg0fanEUhmBkynvb/KLy+J8F3ozyPGW1sAdnjaSHfCe1hd/X/IaD4Fw==
+  dependencies:
+    args "5.0.3"
+    find-node-modules "2.1.3"
+    mkdirp "3.0.1"
+    npm-run "5.0.1"
+    rimraf "6.0.1"
+    tmp "0.2.3"
+    winston "3.13.1"
+
+npm-path@^2.0.2, npm-path@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/npm-path/-/npm-path-2.0.4.tgz"
+  integrity sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==
+  dependencies:
+    which "^1.2.10"
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+npm-run@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/npm-run/-/npm-run-5.0.1.tgz"
+  integrity sha512-s7FyRpHUgaJfzkRgOnevX8rAWWsv1dofY1XS7hliWCF6LSQh+HtDfBvpigPS1krLvXw+Fi17CYMY8mUtblnyWw==
+  dependencies:
+    minimist "^1.2.0"
+    npm-path "^2.0.4"
+    npm-which "^3.0.1"
+    serializerr "^1.0.3"
+
+npm-which@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/npm-which/-/npm-which-3.0.1.tgz"
+  integrity sha512-CM8vMpeFQ7MAPin0U3wzDhSGV0hMHNwHU0wjo402IVizPDrs45jSfSuoC+wThevY88LQti8VvaAnqYAeVy3I1A==
+  dependencies:
+    commander "^2.9.0"
+    npm-path "^2.0.2"
+    which "^1.2.10"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+nullthrows@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz"
+  integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
+
+nwsapi@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz"
+  integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
+
+nwsapi@^2.2.4:
+  version "2.2.7"
+  resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz"
+  integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
+
+object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-inspect@^1.13.3, object-inspect@^1.13.4:
+  version "1.13.4"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+on-finished@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+one-time@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz"
+  integrity sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==
+  dependencies:
+    fn.name "1.x.x"
+
+onetime@^5.1.0, onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+
+ora@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz"
+  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
+  dependencies:
+    bl "^4.1.0"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.5.0"
+    is-interactive "^1.0.0"
+    is-unicode-supported "^0.1.0"
+    log-symbols "^4.1.0"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
+ora@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/ora/-/ora-7.0.1.tgz"
+  integrity sha512-0TUxTiFJWv+JnjWm4o9yvuskpEJLXTcng8MJuKd+SzAzp2o+OP3HWqNhB4OdJRt1Vsd9/mR0oyaEYlOnL7XIRw==
+  dependencies:
+    chalk "^5.3.0"
+    cli-cursor "^4.0.0"
+    cli-spinners "^2.9.0"
+    is-interactive "^2.0.0"
+    is-unicode-supported "^1.3.0"
+    log-symbols "^5.1.0"
+    stdin-discarder "^0.1.0"
+    string-width "^6.1.0"
+    strip-ansi "^7.1.0"
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
+p-limit@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2, p-limit@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+pac-proxy-agent@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz"
+  integrity sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==
+  dependencies:
+    "@tootallnate/quickjs-emscripten" "^0.23.0"
+    agent-base "^7.1.2"
+    debug "^4.3.4"
+    get-uri "^6.0.1"
+    http-proxy-agent "^7.0.0"
+    https-proxy-agent "^7.0.6"
+    pac-resolver "^7.0.1"
+    socks-proxy-agent "^8.0.5"
+
+pac-resolver@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz"
+  integrity sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==
+  dependencies:
+    degenerator "^5.0.0"
+    netmask "^2.0.2"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+pako@~1.0.2:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz"
+  integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
+
+parse5-htmlparser2-tree-adapter@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz"
+  integrity sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==
+  dependencies:
+    domhandler "^5.0.3"
+    parse5 "^7.0.0"
+
+parse5-parser-stream@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz"
+  integrity sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==
+  dependencies:
+    parse5 "^7.0.0"
+
+parse5@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz"
+  integrity sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==
+  dependencies:
+    entities "^4.4.0"
+
+parse5@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
+parseley@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz"
+  integrity sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==
+  dependencies:
+    leac "^0.6.0"
+    peberminta "^0.9.0"
+
+parseurl@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
+  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz"
+  integrity sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
+  dependencies:
+    lru-cache "^9.1.1 || ^10.0.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-scurry@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz"
+  integrity sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==
+  dependencies:
+    lru-cache "^11.0.0"
+    minipass "^7.1.2"
+
+path-to-regexp@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz"
+  integrity sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+peberminta@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz"
+  integrity sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz"
+  integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
+
+picocolors@^1.0.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+pirates@^4.0.4, pirates@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkce-challenge@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz"
+  integrity sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+  dependencies:
+    find-up "^3.0.0"
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+possible-typed-array-names@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
+  integrity sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==
+
+postcss-load-config@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz"
+  integrity sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==
+  dependencies:
+    lilconfig "^3.1.1"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier-plugin-hermes-parser@0.26.0, prettier-plugin-hermes-parser@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.npmjs.org/prettier-plugin-hermes-parser/-/prettier-plugin-hermes-parser-0.26.0.tgz"
+  integrity sha512-ajjlx/0OQ+lcZQEnKEUDU7Srr9vw1OoMO6qZDIYmck1u7j9STiCStqb3RG1vE7FripXYAhquuI+oYG8BCTNC4g==
+  dependencies:
+    hermes-estree "0.26.0"
+    hermes-parser "0.26.0"
+    prettier-plugin-hermes-parser "0.26.0"
+
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
+pretty-format@30.0.5, pretty-format@^30.0.0:
+  version "30.0.5"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-30.0.5.tgz#e001649d472800396c1209684483e18a4d250360"
+  integrity sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==
+  dependencies:
+    "@jest/schemas" "30.0.5"
+    ansi-styles "^5.2.0"
+    react-is "^18.3.1"
+
+pretty-format@^24:
+  version "24.9.0"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz"
+  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"
+
+pretty-format@^27.0.2:
+  version "27.5.1"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
+pretty-format@^28.0.0, pretty-format@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-format@^29.0.0, pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-format@^29.0.3:
+  version "29.0.3"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.0.3.tgz"
+  integrity sha512-cHudsvQr1K5vNVLbvYF/nv3Qy/F/BcEKxGuIeMiVMRHxPOO1RxXooP8g/ZrwAp7Dx+KdMZoOc7NxLHhMrP2f9Q==
+  dependencies:
+    "@jest/schemas" "^29.0.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-format@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz"
+  integrity sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==
+  dependencies:
+    "@jest/schemas" "^29.4.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+progress@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+prompt-promise@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/prompt-promise/-/prompt-promise-1.0.3.tgz"
+  integrity sha512-xIbGSzK59hFiwn9kmD0Cki4igpUqTVx7c6D8lqZoENAZyTwxhMhh/QleHWoRFVVusi7CTj/ByHP3N+2EmkhKIA==
+  dependencies:
+    keypress "~0.2.1"
+    native-or-another "~2.0.0"
+
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+protochain@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/protochain/-/protochain-1.0.5.tgz"
+  integrity sha512-4hDwFSX50C4NE6f/6zg8EPr/WLPTkFPUtG0ulWZu6bwzV2hmb50fpdQLr0HiKBAUehapaFpItzWoCLjraLJhUA==
+
+proxy-addr@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+proxy-agent@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz"
+  integrity sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==
+  dependencies:
+    agent-base "^7.1.2"
+    debug "^4.3.4"
+    http-proxy-agent "^7.0.1"
+    https-proxy-agent "^7.0.6"
+    lru-cache "^7.14.1"
+    pac-proxy-agent "^7.1.0"
+    proxy-from-env "^1.1.0"
+    socks-proxy-agent "^8.0.5"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+psl@^1.1.33:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
+
+pump@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz"
+  integrity sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+punycode@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+
+puppeteer-core@24.7.2:
+  version "24.7.2"
+  resolved "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.7.2.tgz"
+  integrity sha512-P9pZyTmJqKODFCnkZgemCpoFA4LbAa8+NumHVQKyP5X9IgdNS1ZnAnIh1sMAwhF8/xEUGf7jt+qmNLlKieFw1Q==
+  dependencies:
+    "@puppeteer/browsers" "2.10.2"
+    chromium-bidi "4.1.1"
+    debug "^4.4.0"
+    devtools-protocol "0.0.1425554"
+    typed-query-selector "^2.12.0"
+    ws "^8.18.1"
+
+puppeteer@^24.7.2:
+  version "24.7.2"
+  resolved "https://registry.npmjs.org/puppeteer/-/puppeteer-24.7.2.tgz"
+  integrity sha512-ifYqoY6wGs0yZeFuFPn8BE9FhuveXkarF+eO18I2e/axdoCh4Qh1AE+qXdJBhdaeoPt6eRNTY4Dih29Jbq8wow==
+  dependencies:
+    "@puppeteer/browsers" "2.10.2"
+    chromium-bidi "4.1.1"
+    cosmiconfig "^9.0.0"
+    devtools-protocol "0.0.1425554"
+    puppeteer-core "24.7.2"
+    typed-query-selector "^2.12.0"
+
+pure-rand@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.2.tgz"
+  integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
+
+qs@^6.14.0:
+  version "6.14.0"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz"
+  integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==
+  dependencies:
+    side-channel "^1.1.0"
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+range-parser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz"
+  integrity sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.6.3"
+    unpipe "1.0.0"
+
+react-dom@0.0.0-experimental-4beb1fd8-20241118:
+  version "0.0.0-experimental-4beb1fd8-20241118"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-experimental-4beb1fd8-20241118.tgz"
+  integrity sha512-/Gs2N/6hiuwqf2uuJ3UN/PWxpIncbuY7XY/IynlB2oNpopeV+x1MMXfNdse8TiPkpgg9aw+VUfQUlLPC52bKiQ==
+  dependencies:
+    scheduler "0.0.0-experimental-4beb1fd8-20241118"
+
+react-is@0.0.0-experimental-4beb1fd8-20241118:
+  version "0.0.0-experimental-4beb1fd8-20241118"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-0.0.0-experimental-4beb1fd8-20241118.tgz"
+  integrity sha512-7JE3PtW4zpMYdp1bTXKNmz2t0jzaqc3frMWbvbuZmhif5ndtYx5oCGhfnbm6S5ZeTNKe4GXsN5D73QtZClfepQ==
+
+react-is@^16.8.4:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-is@^18.0.0, react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react@0.0.0-experimental-4beb1fd8-20241118:
+  version "0.0.0-experimental-4beb1fd8-20241118"
+  resolved "https://registry.npmjs.org/react/-/react-0.0.0-experimental-4beb1fd8-20241118.tgz"
+  integrity sha512-SojDx9IQZXRbze+BNoLRiBDblVTMRebpOZyU2QyRk4ptJob78QiROi58uuE7yxrFMDQN4kBl6tqYkSwQaIM2nQ==
+
+readable-stream@^3.4.0, readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  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"
+
+readdirp@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz"
+  integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+readline@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz"
+  integrity sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==
+
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
+regenerate-unicode-properties@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regexp.escape@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexp.escape/-/regexp.escape-2.0.1.tgz#09e4beef9d202dbd739868f3818223f977cf91da"
+  integrity sha512-JItRb4rmyTzmERBkAf6J87LjDPy/RscIwmaJQ3gsFlAzrmZbZU8LwBw5IydFZXW9hqpgbPlGbMhtpqtuAhMgtg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    for-each "^0.3.3"
+    safe-regex-test "^1.0.3"
+
+regexp.prototype.flags@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
+regexpu-core@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz"
+  integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.12.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+regjsparser@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz"
+  integrity sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==
+  dependencies:
+    jsesc "~3.0.2"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz"
+  integrity sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+
+resolve.exports@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz"
+  integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
+
+resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3.2:
+  version "1.22.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+restore-cursor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz"
+  integrity sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@6.0.1, rimraf@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-6.0.1.tgz"
+  integrity sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==
+  dependencies:
+    glob "^11.0.0"
+    package-json-from-dist "^1.0.0"
+
+rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup@^4.34.8:
+  version "4.34.9"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-4.34.9.tgz"
+  integrity sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==
+  dependencies:
+    "@types/estree" "1.0.6"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.34.9"
+    "@rollup/rollup-android-arm64" "4.34.9"
+    "@rollup/rollup-darwin-arm64" "4.34.9"
+    "@rollup/rollup-darwin-x64" "4.34.9"
+    "@rollup/rollup-freebsd-arm64" "4.34.9"
+    "@rollup/rollup-freebsd-x64" "4.34.9"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.34.9"
+    "@rollup/rollup-linux-arm-musleabihf" "4.34.9"
+    "@rollup/rollup-linux-arm64-gnu" "4.34.9"
+    "@rollup/rollup-linux-arm64-musl" "4.34.9"
+    "@rollup/rollup-linux-loongarch64-gnu" "4.34.9"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.34.9"
+    "@rollup/rollup-linux-riscv64-gnu" "4.34.9"
+    "@rollup/rollup-linux-s390x-gnu" "4.34.9"
+    "@rollup/rollup-linux-x64-gnu" "4.34.9"
+    "@rollup/rollup-linux-x64-musl" "4.34.9"
+    "@rollup/rollup-win32-arm64-msvc" "4.34.9"
+    "@rollup/rollup-win32-ia32-msvc" "4.34.9"
+    "@rollup/rollup-win32-x64-msvc" "4.34.9"
+    fsevents "~2.3.2"
+
+router@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/router/-/router-2.2.0.tgz"
+  integrity sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==
+  dependencies:
+    debug "^4.4.0"
+    depd "^2.0.0"
+    is-promise "^4.0.0"
+    parseurl "^1.3.3"
+    path-to-regexp "^8.0.0"
+
+rrweb-cssom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz"
+  integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rxjs@^7.0.0, rxjs@^7.8.1:
+  version "7.8.1"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-buffer@5.2.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.3, safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
+safe-stable-stringify@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz"
+  integrity sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==
+
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
+  dependencies:
+    xmlchars "^2.2.0"
+
+scheduler@0.0.0-experimental-4beb1fd8-20241118:
+  version "0.0.0-experimental-4beb1fd8-20241118"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-experimental-4beb1fd8-20241118.tgz"
+  integrity sha512-b7GQktevD5BPcS+R5qY5se5oX4b8AHQyebWswGZBdLCmElIwR3Q+RO5EgsLOA4t5D3/TDjLm58CQG16uEB5rMA==
+
+selderee@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz"
+  integrity sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==
+  dependencies:
+    parseley "^0.12.0"
+
+semver@7.x, semver@^7.3.5:
+  version "7.3.7"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^5.4.1, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.5.3, semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.6.0, semver@^7.6.2:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+semver@^7.7.1:
+  version "7.7.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz"
+  integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
+
+send@^1.1.0, send@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/send/-/send-1.2.0.tgz"
+  integrity sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==
+  dependencies:
+    debug "^4.3.5"
+    encodeurl "^2.0.0"
+    escape-html "^1.0.3"
+    etag "^1.8.1"
+    fresh "^2.0.0"
+    http-errors "^2.0.0"
+    mime-types "^3.0.1"
+    ms "^2.1.3"
+    on-finished "^2.4.1"
+    range-parser "^1.2.1"
+    statuses "^2.0.1"
+
+serialize-javascript@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+serializerr@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/serializerr/-/serializerr-1.0.3.tgz"
+  integrity sha512-yXUlHj0fjbndhACj2XWtIH5eJv7b/uadyl7CJA8b9wL5mIKm+g0/sL7rDzEmjC+k5y8ggcaP8i049F4FxA0U9Q==
+  dependencies:
+    protochain "^1.0.5"
+
+serve-static@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz"
+  integrity sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==
+  dependencies:
+    encodeurl "^2.0.0"
+    escape-html "^1.0.3"
+    parseurl "^1.3.3"
+    send "^1.2.0"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
+  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
+
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+smart-buffer@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
+socks-proxy-agent@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz"
+  integrity sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==
+  dependencies:
+    agent-base "^7.1.2"
+    debug "^4.3.4"
+    socks "^2.8.3"
+
+socks@^2.8.3:
+  version "2.8.4"
+  resolved "https://registry.npmjs.org/socks/-/socks-2.8.4.tgz"
+  integrity sha512-D3YaD0aRxR3mEcqnidIs7ReYJFVzWdd6fXJYUM8ixcQcJRGTka/b3saV0KflYhyVJXKhb947GndU35SxYNResQ==
+  dependencies:
+    ip-address "^9.0.5"
+    smart-buffer "^4.2.0"
+
+source-map-support@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-support@^0.5.16:
+  version "0.5.21"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz"
+  integrity sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==
+
+sprintf-js@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz"
+  integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+stack-trace@0.0.x:
+  version "0.0.10"
+  resolved "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz"
+  integrity sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==
+
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stack-utils@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+statuses@2.0.1, statuses@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+stdin-discarder@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz"
+  integrity sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==
+  dependencies:
+    bl "^5.0.0"
+
+stop-iteration-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
+  integrity sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==
+  dependencies:
+    es-errors "^1.3.0"
+    internal-slot "^1.1.0"
+
+streamx@^2.15.0, streamx@^2.21.0:
+  version "2.22.0"
+  resolved "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz"
+  integrity sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==
+  dependencies:
+    fast-fifo "^1.3.2"
+    text-decoder "^1.1.0"
+  optionalDependencies:
+    bare-events "^2.2.0"
+
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string-width@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-6.1.0.tgz"
+  integrity sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^10.2.1"
+    strip-ansi "^7.0.1"
+
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0, supports-color@^8.1.0, supports-color@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz"
+  integrity sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==
+
+supports-hyperlinks@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz"
+  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+tar-fs@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz"
+  integrity sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==
+  dependencies:
+    pump "^3.0.0"
+    tar-stream "^3.1.5"
+  optionalDependencies:
+    bare-fs "^4.0.1"
+    bare-path "^3.0.0"
+
+tar-stream@^3.1.5:
+  version "3.1.7"
+  resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz"
+  integrity sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==
+  dependencies:
+    b4a "^1.6.4"
+    fast-fifo "^1.2.0"
+    streamx "^2.15.0"
+
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+text-decoder@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz"
+  integrity sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==
+  dependencies:
+    b4a "^1.6.4"
+
+text-hex@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz"
+  integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+tinyexec@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz"
+  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
+
+tinyglobby@^0.2.11:
+  version "0.2.12"
+  resolved "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz"
+  integrity sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==
+  dependencies:
+    fdir "^6.4.3"
+    picomatch "^4.0.2"
+
+tmp@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz"
+  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tough-cookie@^4.0.0, tough-cookie@^4.1.2:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz"
+  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
+  dependencies:
+    punycode "^2.1.1"
+
+tr46@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz"
+  integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==
+  dependencies:
+    punycode "^2.3.0"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz"
+  integrity sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==
+
+triple-beam@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz"
+  integrity sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==
+
+ts-api-utils@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz"
+  integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
+
+ts-api-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+ts-jest@^28.0.7:
+  version "28.0.8"
+  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-28.0.8.tgz"
+  integrity sha512-5FaG0lXmRPzApix8oFG8RKjAz4ehtm8yMKOTy5HX3fY6W8kmvOrmcY0hKDElW52FJov+clhUbrKAqofnj4mXTg==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^28.0.0"
+    json5 "^2.2.1"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
+ts-jest@^29.1.1:
+  version "29.1.1"
+  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.1.tgz"
+  integrity sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^29.0.0"
+    json5 "^2.2.3"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "^7.5.3"
+    yargs-parser "^21.0.1"
+
+ts-jest@^29.3.2:
+  version "29.3.2"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.3.2.tgz#0576cdf0a507f811fe73dcd16d135ce89f8156cb"
+  integrity sha512-bJJkrWc6PjFVz5g2DGCNUo8z7oFEYaz1xP1NpeDU7KNLMWPpEyV8Chbpkn8xjzgRDpQhnGMyvyldoL7h8JXyug==
+  dependencies:
+    bs-logger "^0.2.6"
+    ejs "^3.1.10"
+    fast-json-stable-stringify "^2.1.0"
+    jest-util "^29.0.0"
+    json5 "^2.2.3"
+    lodash.memoize "^4.1.2"
+    make-error "^1.3.6"
+    semver "^7.7.1"
+    type-fest "^4.39.1"
+    yargs-parser "^21.1.1"
+
+ts-node@^10.9.2:
+  version "10.9.2"
+  resolved "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz"
+  integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
+  dependencies:
+    "@cspotcode/source-map-support" "^0.8.0"
+    "@tsconfig/node10" "^1.0.7"
+    "@tsconfig/node12" "^1.0.7"
+    "@tsconfig/node14" "^1.0.0"
+    "@tsconfig/node16" "^1.0.2"
+    acorn "^8.4.1"
+    acorn-walk "^8.1.1"
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    v8-compile-cache-lib "^3.0.1"
+    yn "3.1.1"
+
+tslib@^2.0.1, tslib@^2.1.0:
+  version "2.5.2"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz"
+  integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
+
+tsup@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/tsup/-/tsup-8.4.0.tgz"
+  integrity sha512-b+eZbPCjz10fRryaAA7C8xlIHnf8VnsaRqydheLIqwG/Mcpfk8Z5zp3HayX7GaTygkigHl5cBUs+IhcySiIexQ==
+  dependencies:
+    bundle-require "^5.1.0"
+    cac "^6.7.14"
+    chokidar "^4.0.3"
+    consola "^3.4.0"
+    debug "^4.4.0"
+    esbuild "^0.25.0"
+    joycon "^3.1.1"
+    picocolors "^1.1.1"
+    postcss-load-config "^6.0.1"
+    resolve-from "^5.0.0"
+    rollup "^4.34.8"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.35.0"
+    tinyexec "^0.3.2"
+    tinyglobby "^0.2.11"
+    tree-kill "^1.2.2"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+type-fest@^4.39.1:
+  version "4.40.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.40.1.tgz#d78a09f08dd1081a434dd377967650cfd565401d"
+  integrity sha512-9YvLNnORDpI+vghLU/Nf+zSv0kL47KbVJ1o3sKgoTefl6i+zebxbiDQWoe/oWWqPhIgQdRZRT1KA9sCPL810SA==
+
+type-is@^2.0.0, type-is@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz"
+  integrity sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==
+  dependencies:
+    content-type "^1.0.5"
+    media-typer "^1.1.0"
+    mime-types "^3.0.0"
+
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
+typed-query-selector@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz"
+  integrity sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==
+
+typescript-eslint@^8.16.0:
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.18.1.tgz"
+  integrity sha512-Mlaw6yxuaDEPQvb/2Qwu3/TfgeBHy9iTJ3mTwe7OvpPmF6KPQjVOfGyEJpPv6Ez2C34OODChhXrzYw/9phI0MQ==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "8.18.1"
+    "@typescript-eslint/parser" "8.18.1"
+    "@typescript-eslint/utils" "8.18.1"
+
+typescript@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz"
+  integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
+
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
+undici@^6.19.5:
+  version "6.21.2"
+  resolved "https://registry.npmjs.org/undici/-/undici-6.21.2.tgz"
+  integrity sha512-uROZWze0R0itiAKVPsYhFov9LxrPMHLMEQFszeI2gCN6bnIIZ8twzBCJcN2LJrBBLfrP0t1FW0g+JmKVl8Vk1g==
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz"
+  integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz"
+  integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+update-browserslist-db@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz"
+  integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+v8-compile-cache-lib@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"
+  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
+
+v8-to-istanbul@^9.0.0:
+  version "9.3.0"
+  resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz"
+  integrity sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^2.0.0"
+
+v8-to-istanbul@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+
+vary@^1, vary@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz"
+  integrity sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==
+  dependencies:
+    xml-name-validator "^4.0.0"
+
+w3c-xmlserializer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz"
+  integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==
+  dependencies:
+    xml-name-validator "^4.0.0"
+
+wait-on@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz"
+  integrity sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==
+  dependencies:
+    axios "^1.6.1"
+    joi "^17.11.0"
+    lodash "^4.17.21"
+    minimist "^1.2.8"
+    rxjs "^7.8.1"
+
+walker@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz"
+  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
+  dependencies:
+    defaults "^1.0.3"
+
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
+whatwg-encoding@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz"
+  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
+  dependencies:
+    iconv-lite "0.6.3"
+
+whatwg-encoding@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz"
+  integrity sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==
+  dependencies:
+    iconv-lite "0.6.3"
+
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
+whatwg-mimetype@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz"
+  integrity sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==
+
+whatwg-url@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz"
+  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
+  dependencies:
+    tr46 "^3.0.0"
+    webidl-conversions "^7.0.0"
+
+whatwg-url@^12.0.0, whatwg-url@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz"
+  integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==
+  dependencies:
+    tr46 "^4.1.1"
+    webidl-conversions "^7.0.0"
+
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz"
+  integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
+
+which-typed-array@^1.1.16, which-typed-array@^1.1.19:
+  version "1.1.19"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.19.tgz#df03842e870b6b88e117524a4b364b6fc689f956"
+  integrity sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    for-each "^0.3.5"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
+which@^1.2.10, which@^1.2.14:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+winston-transport@^4.7.0:
+  version "4.9.0"
+  resolved "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz"
+  integrity sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==
+  dependencies:
+    logform "^2.7.0"
+    readable-stream "^3.6.2"
+    triple-beam "^1.3.0"
+
+winston@3.13.1:
+  version "3.13.1"
+  resolved "https://registry.npmjs.org/winston/-/winston-3.13.1.tgz"
+  integrity sha512-SvZit7VFNvXRzbqGHsv5KSmgbEYR5EiQfDAL9gxYkRqa934Hnk++zze0wANKtMHcy/gI4W/3xmSDwlhf865WGw==
+  dependencies:
+    "@colors/colors" "^1.6.0"
+    "@dabh/diagnostics" "^2.0.2"
+    async "^3.2.3"
+    is-stream "^2.0.0"
+    logform "^2.6.0"
+    one-time "^1.0.0"
+    readable-stream "^3.4.0"
+    safe-stable-stringify "^2.3.1"
+    stack-trace "0.0.x"
+    triple-beam "^1.3.0"
+    winston-transport "^4.7.0"
+
+wordwrap@>=0.0.2:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
+
+workerpool@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.5.1.tgz"
+  integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^4.0.1, write-file-atomic@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz"
+  integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
+ws@^8.13.0, ws@^8.18.1, ws@^8.8.0:
+  version "8.18.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz"
+  integrity sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==
+
+xml-name-validator@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz"
+  integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^20.2.2, yargs-parser@^20.2.9:
+  version "20.2.9"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs-parser@^21.0.1, yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs-unparser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz"
+  integrity sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==
+  dependencies:
+    camelcase "^6.0.0"
+    decamelize "^4.0.0"
+    flat "^5.0.2"
+    is-plain-obj "^2.1.0"
+
+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.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 "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yargs@^17.3.1, yargs@^17.7.1, yargs@^17.7.2:
+  version "17.7.2"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz"
+  integrity sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod-to-json-schema@^3.24.1:
+  version "3.24.5"
+  resolved "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz"
+  integrity sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==
+
+"zod-validation-error@^3.5.0 || ^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918"
+  integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==
+
+zod@^3.23.8, zod@^3.24.1:
+  version "3.24.3"
+  resolved "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz"
+  integrity sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==
+
+"zod@^3.25.0 || ^4.0.0":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0"
+  integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==
diff --git a/dangerfile.js b/dangerfile.js
new file mode 100644
index 00000000000..d60da35b586
--- /dev/null
+++ b/dangerfile.js
@@ -0,0 +1,282 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+// Hi, if this is your first time editing/reading a Dangerfile, here's a summary:
+// It's a JS runtime which helps you provide continuous feedback inside GitHub.
+//
+// You can see the docs here: http://danger.systems/js/
+//
+// If you want to test changes Danger, I'd recommend checking out an existing PR
+// and then running the `danger pr` command.
+//
+// You'll need a GitHub token, you can re-use this one:
+//
+//  0a7d5c3cad9a6dbec2d9 9a5222cf49062a4c1ef7
+//
+// (Just remove the space)
+//
+// So, for example:
+//
+// `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
+
+const {markdown, danger, warn} = require('danger');
+const {promisify} = require('util');
+const glob = promisify(require('glob'));
+const gzipSize = require('gzip-size');
+const {writeFileSync} = require('fs');
+
+const {readFileSync, statSync} = require('fs');
+
+const BASE_DIR = 'base-build';
+const HEAD_DIR = 'build';
+
+const CRITICAL_THRESHOLD = 0.02;
+const SIGNIFICANCE_THRESHOLD = 0.002;
+const CRITICAL_ARTIFACT_PATHS = new Set([
+  // We always report changes to these bundles, even if the change is
+  // insignificant or non-existent.
+  'oss-stable/react-dom/cjs/react-dom.production.js',
+  'oss-stable/react-dom/cjs/react-dom-client.production.js',
+  'oss-experimental/react-dom/cjs/react-dom.production.js',
+  'oss-experimental/react-dom/cjs/react-dom-client.production.js',
+  'facebook-www/ReactDOM-prod.classic.js',
+  'facebook-www/ReactDOM-prod.modern.js',
+]);
+
+const kilobyteFormatter = new Intl.NumberFormat('en', {
+  style: 'unit',
+  unit: 'kilobyte',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+function kbs(bytes) {
+  return kilobyteFormatter.format(bytes / 1000);
+}
+
+const percentFormatter = new Intl.NumberFormat('en', {
+  style: 'percent',
+  signDisplay: 'exceptZero',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+function change(decimal) {
+  if (decimal === Infinity) {
+    return 'New file';
+  }
+  if (decimal === -1) {
+    return 'Deleted';
+  }
+  if (decimal < 0.0001) {
+    return '=';
+  }
+  return percentFormatter.format(decimal);
+}
+
+const header = `
+  | Name | +/- | Base | Current | +/- gzip | Base gzip | Current gzip |
+  | ---- | --- | ---- | ------- | -------- | --------- | ------------ |`;
+
+function row(result, baseSha, headSha) {
+  const diffViewUrl = `https://react-builds.vercel.app/commits/${headSha}/files/${result.path}?compare=${baseSha}`;
+  const rowArr = [
+    `| [${result.path}](${diffViewUrl})`,
+    `**${change(result.change)}**`,
+    `${kbs(result.baseSize)}`,
+    `${kbs(result.headSize)}`,
+    `${change(result.changeGzip)}`,
+    `${kbs(result.baseSizeGzip)}`,
+    `${kbs(result.headSizeGzip)}`,
+  ];
+  return rowArr.join(' | ');
+}
+
+(async function () {
+  // Use git locally to grab the commit which represents the place
+  // where the branches differ
+
+  const upstreamRepo = danger.github.pr.base.repo.full_name;
+  if (upstreamRepo !== 'facebook/react') {
+    // Exit unless we're running in the main repo
+    return;
+  }
+
+  let headSha;
+  let baseSha;
+  try {
+    headSha = String(readFileSync(HEAD_DIR + '/COMMIT_SHA')).trim();
+    baseSha = String(readFileSync(BASE_DIR + '/COMMIT_SHA')).trim();
+  } catch {
+    warn(
+      "Failed to read build artifacts. It's possible a build configuration " +
+        'has changed upstream. Try pulling the latest changes from the ' +
+        'main branch.'
+    );
+    return;
+  }
+
+  // Disable sizeBot in a Devtools Pull Request. Because that doesn't affect production bundle size.
+  const commitFiles = [
+    ...danger.git.created_files,
+    ...danger.git.deleted_files,
+    ...danger.git.modified_files,
+  ];
+  if (
+    commitFiles.every(filename => filename.includes('packages/react-devtools'))
+  )
+    return;
+
+  const resultsMap = new Map();
+
+  // Find all the head (current) artifacts paths.
+  const headArtifactPaths = await glob('**/*.js', {cwd: 'build'});
+  for (const artifactPath of headArtifactPaths) {
+    try {
+      // This will throw if there's no matching base artifact
+      const baseSize = statSync(BASE_DIR + '/' + artifactPath).size;
+      const baseSizeGzip = gzipSize.fileSync(BASE_DIR + '/' + artifactPath);
+
+      const headSize = statSync(HEAD_DIR + '/' + artifactPath).size;
+      const headSizeGzip = gzipSize.fileSync(HEAD_DIR + '/' + artifactPath);
+      resultsMap.set(artifactPath, {
+        path: artifactPath,
+        headSize,
+        headSizeGzip,
+        baseSize,
+        baseSizeGzip,
+        change: (headSize - baseSize) / baseSize,
+        changeGzip: (headSizeGzip - baseSizeGzip) / baseSizeGzip,
+      });
+    } catch {
+      // There's no matching base artifact. This is a new file.
+      const baseSize = 0;
+      const baseSizeGzip = 0;
+      const headSize = statSync(HEAD_DIR + '/' + artifactPath).size;
+      const headSizeGzip = gzipSize.fileSync(HEAD_DIR + '/' + artifactPath);
+      resultsMap.set(artifactPath, {
+        path: artifactPath,
+        headSize,
+        headSizeGzip,
+        baseSize,
+        baseSizeGzip,
+        change: Infinity,
+        changeGzip: Infinity,
+      });
+    }
+  }
+
+  // Check for base artifacts that were deleted in the head.
+  const baseArtifactPaths = await glob('**/*.js', {cwd: 'base-build'});
+  for (const artifactPath of baseArtifactPaths) {
+    if (!resultsMap.has(artifactPath)) {
+      const baseSize = statSync(BASE_DIR + '/' + artifactPath).size;
+      const baseSizeGzip = gzipSize.fileSync(BASE_DIR + '/' + artifactPath);
+      const headSize = 0;
+      const headSizeGzip = 0;
+      resultsMap.set(artifactPath, {
+        path: artifactPath,
+        headSize,
+        headSizeGzip,
+        baseSize,
+        baseSizeGzip,
+        change: -1,
+        changeGzip: -1,
+      });
+    }
+  }
+
+  const results = Array.from(resultsMap.values());
+  results.sort((a, b) => b.change - a.change);
+
+  let criticalResults = [];
+  for (const artifactPath of CRITICAL_ARTIFACT_PATHS) {
+    const result = resultsMap.get(artifactPath);
+    if (result === undefined) {
+      throw new Error(
+        'Missing expected bundle. If this was an intentional change to the ' +
+          'build configuration, update Dangerfile.js accordingly: ' +
+          artifactPath
+      );
+    }
+    criticalResults.push(row(result, baseSha, headSha));
+  }
+
+  let significantResults = [];
+  for (const result of results) {
+    // If result exceeds critical threshold, add to top section.
+    if (
+      (result.change > CRITICAL_THRESHOLD ||
+        0 - result.change > CRITICAL_THRESHOLD ||
+        // New file
+        result.change === Infinity ||
+        // Deleted file
+        result.change === -1) &&
+      // Skip critical artifacts. We added those earlier, in a fixed order.
+      !CRITICAL_ARTIFACT_PATHS.has(result.path)
+    ) {
+      criticalResults.push(row(result, baseSha, headSha));
+    }
+
+    // Do the same for results that exceed the significant threshold. These
+    // will go into the bottom, collapsed section. Intentionally including
+    // critical artifacts in this section, too.
+    if (
+      result.change > SIGNIFICANCE_THRESHOLD ||
+      0 - result.change > SIGNIFICANCE_THRESHOLD ||
+      result.change === Infinity ||
+      result.change === -1
+    ) {
+      significantResults.push(row(result, baseSha, headSha));
+    }
+  }
+
+  const message = `
+Comparing: ${baseSha}...${headSha}
+
+## Critical size changes
+
+Includes critical production bundles, as well as any change greater than ${
+    CRITICAL_THRESHOLD * 100
+  }%:
+
+${header}
+${criticalResults.join('\n')}
+
+## Significant size changes
+
+Includes any change greater than ${SIGNIFICANCE_THRESHOLD * 100}%:
+
+${
+  significantResults.length > 0
+    ? `
+<details>
+<summary>Expand to show</summary>
+${header}
+${significantResults.join('\n')}
+</details>
+`
+    : '(No significant changes)'
+}
+`;
+
+  // GitHub comments are limited to 65536 characters.
+  if (message.length > 65536) {
+    // Make message available as an artifact
+    writeFileSync('sizebot-message.md', message);
+    markdown(
+      'The size diff is too large to display in a single comment. ' +
+        `The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.`
+    );
+  } else {
+    markdown(message);
+  }
+})();
diff --git a/docs/404.md b/docs/404.md
deleted file mode 100644
index 6d4039fb3d4..00000000000
--- a/docs/404.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: single
-title: Page Not Found
----
-
-We couldn't find what you were looking for.
-
-Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
diff --git a/docs/Gemfile b/docs/Gemfile
deleted file mode 100644
index 4b8734cff73..00000000000
--- a/docs/Gemfile
+++ /dev/null
@@ -1,21 +0,0 @@
-source 'https://rubygems.org'
-
-gem 'rake'
-
-# jekyll, which builds it all
-gem 'jekyll', '~>1.3.0'
-
-# JSON
-gem 'json'
-
-# SASS for CSS
-gem 'sass'
-
-# For `rake watch`
-gem 'rb-fsevent'
-
-# Redcarpet for Markdown
-gem 'redcarpet'
-
-# For markdown header cleanup
-gem 'sanitize'
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
deleted file mode 100644
index 2324fda47fa..00000000000
--- a/docs/Gemfile.lock
+++ /dev/null
@@ -1,61 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    classifier (1.3.3)
-      fast-stemmer (>= 1.0.0)
-    colorator (0.1)
-    commander (4.1.5)
-      highline (~> 1.6.11)
-    fast-stemmer (1.0.2)
-    ffi (1.9.3)
-    highline (1.6.20)
-    jekyll (1.3.0)
-      classifier (~> 1.3)
-      colorator (~> 0.1)
-      commander (~> 4.1.3)
-      liquid (~> 2.5.2)
-      listen (~> 1.3)
-      maruku (~> 0.6.0)
-      pygments.rb (~> 0.5.0)
-      redcarpet (~> 2.3.0)
-      safe_yaml (~> 0.9.7)
-    json (1.8.1)
-    liquid (2.5.4)
-    listen (1.3.1)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      rb-kqueue (>= 0.2)
-    maruku (0.6.1)
-      syntax (>= 1.0.0)
-    mini_portile (0.5.2)
-    nokogiri (1.6.0)
-      mini_portile (~> 0.5.0)
-    posix-spawn (0.3.6)
-    pygments.rb (0.5.4)
-      posix-spawn (~> 0.3.6)
-      yajl-ruby (~> 1.1.0)
-    rake (10.1.0)
-    rb-fsevent (0.9.3)
-    rb-inotify (0.9.2)
-      ffi (>= 0.5.0)
-    rb-kqueue (0.2.0)
-      ffi (>= 0.5.0)
-    redcarpet (2.3.0)
-    safe_yaml (0.9.7)
-    sanitize (2.0.6)
-      nokogiri (>= 1.4.4)
-    sass (3.2.12)
-    syntax (1.0.0)
-    yajl-ruby (1.1.0)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  jekyll (~> 1.3.0)
-  json
-  rake
-  rb-fsevent
-  redcarpet
-  sanitize
-  sass
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 48b36c390ed..00000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# React Documentation & Website
-
-We use [Jekyll](http://jekyllrb.com/) to build the site using ([mostly](http://zpao.com/posts/adding-line-highlights-to-markdown-code-fences/)) Markdown, and we host it by pushing HTML to [GitHub Pages](http://pages.github.com/).
-
-## Installation
-
-If you are working on the site, you will want to install and run a local copy of it.
-
-### Dependencies
-
-In order to use Jekyll, you will need to have Ruby installed.
-
- - [Ruby](http://www.ruby-lang.org/) (version >= 1.8.7)
- - [RubyGems](http://rubygems.org/) (version >= 1.3.7)
- - [Bundler](http://gembundler.com/)
-
-Mac OS X comes pre-installed with Ruby, but you may need to update RubyGems (via `gem update --system`).
-Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby.
-Once you have RubyGems and installed Bundler (via `gem install bundler`), use it to install the dependencies:
-
-```sh
-$ cd react/docs
-$ bundle install # Might need sudo.
-$ npm install # Might need sudo.
-```
-
-### Instructions
-
-The site requires React, so first make sure you've built the project (via `grunt`).
-
-Use Jekyll to serve the website locally (by default, at `http://localhost:4000`):
-
-```sh
-$ cd react/docs
-$ rake
-$ jekyll serve -w
-$ open http://localhost:4000/react/
-```
-
-We use [SASS](http://sass-lang.com/) (with [Bourbon](http://bourbon.io/)) for our CSS, and we use JSX to transform some of our JS.
-If you only want to modify the HTML or Markdown, you do not have to do anything because we package pre-compiled copies of the CSS and JS.
-If you want to modify the CSS or JS, use [Rake](http://rake.rubyforge.org/) to compile them:
-
-```sh
-$ cd react/docs
-$ rake watch # Automatically compiles as needed.
-# rake         Manually compile CSS and JS.
-# rake css     Manually compile CSS, only.
-# rake js      Manually compile JS, only.
-```
-
-## Afterthoughts
-
-### Updating `facebook.github.io/react`
-
-The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there you can check it in.
-
-**Note:** This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository.
-
-### Removing the Jekyll / Ruby Dependency
-
-In an ideal world, we would not be adding a Ruby dependency on part of our project. We would like to move towards a point where we are using React to render the website.
diff --git a/docs/Rakefile b/docs/Rakefile
deleted file mode 100644
index f10e317902b..00000000000
--- a/docs/Rakefile
+++ /dev/null
@@ -1,37 +0,0 @@
-require('rubygems')
-require('json')
-require('yaml')
-
-desc "generate css from sass"
-task :css do
-  system "sass --style=compressed _css/react.scss css/react.css"
-end
-
-desc "generate js from jsx"
-task :js do
-  system "../bin/jsx _js js"
-end
-
-desc "watch css & js"
-task :watch do
-  Process.spawn "sass --style=compressed --watch _css/react.scss:css/react.css"
-  Process.spawn "../bin/jsx --watch _js js"
-  Process.waitall
-end
-
-desc "update version to match ../package.json"
-task :update_version do
-  react_version = JSON.parse(File.read('../package.json'))['version']
-  site_config = YAML.load_file('_config.yml')
-  if site_config['react_version'] != react_version
-    site_config['react_version'] = react_version
-    File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
-  end
-end
-
-desc "build into ../../react-gh-pages"
-task :release => [:update_version, :default] do
-  system "jekyll build -d ../../react-gh-pages"
-end
-
-task :default => [:css, :js]
diff --git a/docs/_config.yml b/docs/_config.yml
deleted file mode 100644
index 630e3f862e2..00000000000
--- a/docs/_config.yml
+++ /dev/null
@@ -1,21 +0,0 @@
----
-baseurl: "/react"
-url: http://facebook.github.io
-permalink: "/blog/:year/:month/:day/:title.html"
-exclude:
-- Gemfile
-- Gemfile.lock
-- README.md
-- Rakefile
-redcarpet:
-  extensions:
-  - fenced_code_blocks
-pygments: true
-name: React
-markdown: redcarpet
-react_version: 0.11.1
-description: A JavaScript library for building user interfaces
-relative_permalinks: true
-paginate: 5
-paginate_path: "/blog/page:num/"
-timezone: America/Los_Angeles
diff --git a/docs/_css/_solarized.scss b/docs/_css/_solarized.scss
deleted file mode 100644
index a2e223987d0..00000000000
--- a/docs/_css/_solarized.scss
+++ /dev/null
@@ -1,173 +0,0 @@
-html * {
-  color-profile: sRGB;
-  rendering-intent: auto;
-}
-  .cm-s-solarized-light {
-    background-color: #f8f5ec;
-    color: #637c84;
-  }
-  .cm-s-solarized-light .emphasis {
-    font-weight: bold;
-  }
-  .cm-s-solarized-light .dotted {
-    border-bottom: 1px dotted #cb4b16;
-  }
-  .cm-s-solarized-light .CodeMirror-gutter {
-    background-color: #eee8d5;
-    border-right: 3px solid #eee8d5;
-  }
-  .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
-    color: #93a1a1;
-  }
-  .cm-s-solarized-light .CodeMirror-cursor {
-    border-left-color: #002b36 !important;
-  }
-  .cm-s-solarized-light .CodeMirror-matchingbracket {
-    color: #002b36;
-    background-color: #eee8d5;
-    box-shadow: 0 0 10px #eee8d5;
-    font-weight: bold;
-  }
-  .cm-s-solarized-light .CodeMirror-nonmatchingbracket {
-    color: #002b36;
-    background-color: #eee8d5;
-    box-shadow: 0 0 10px #eee8d5;
-    font-weight: bold;
-    color: #dc322f;
-    border-bottom: 1px dotted #cb4b16;
-  }
-  .cm-s-solarized-light span.cm-keyword {
-    color: #268bd2;
-  }
-  .cm-s-solarized-light span.cm-atom {
-    color: #2aa198;
-  }
-  .cm-s-solarized-light span.cm-number {
-    color: #586e75;
-  }
-  .cm-s-solarized-light span.cm-def {
-    color: #637c84;
-  }
-  .cm-s-solarized-light span.cm-variable {
-    color: #637c84;
-  }
-  .cm-s-solarized-light span.cm-variable-2 {
-    color: #b58900;
-  }
-  .cm-s-solarized-light span.cm-variable-3 {
-    color: #cb4b16;
-  }
-  .cm-s-solarized-light span.cm-comment {
-    color: #93a1a1;
-  }
-  .cm-s-solarized-light span.cm-property {
-    color: #637c84;
-  }
-  .cm-s-solarized-light span.cm-operator {
-    color: #657b83;
-  }
-  .cm-s-solarized-light span.cm-string {
-    color: #36958e;
-  }
-  .cm-s-solarized-light span.cm-error {
-    font-weight: bold;
-    border-bottom: 1px dotted #cb4b16;
-  }
-  .cm-s-solarized-light span.cm-bracket {
-    color: #cb4b16;
-  }
-  .cm-s-solarized-light span.cm-tag {
-    color: #657b83;
-  }
-  .cm-s-solarized-light span.cm-attribute {
-    color: #586e75;
-    font-weight: bold;
-  }
-  .cm-s-solarized-light span.cm-meta {
-    color: #268bd2;
-  }
-  .cm-s-solarized-dark {
-    background-color: #002b36;
-    color: #839496;
-  }
-  .cm-s-solarized-dark .emphasis {
-    font-weight: bold;
-  }
-  .cm-s-solarized-dark .dotted {
-    border-bottom: 1px dotted #cb4b16;
-  }
-  .cm-s-solarized-dark .CodeMirror-gutter {
-    background-color: #073642;
-    border-right: 3px solid #073642;
-  }
-  .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
-    color: #586e75;
-  }
-  .cm-s-solarized-dark .CodeMirror-cursor {
-    border-left-color: #fdf6e3 !important;
-  }
-  .cm-s-solarized-dark .CodeMirror-matchingbracket {
-    color: #fdf6e3;
-    background-color: #073642;
-    box-shadow: 0 0 10px #073642;
-    font-weight: bold;
-  }
-  .cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
-    color: #fdf6e3;
-    background-color: #073642;
-    box-shadow: 0 0 10px #073642;
-    font-weight: bold;
-    color: #dc322f;
-    border-bottom: 1px dotted #cb4b16;
-  }
-  .cm-s-solarized-dark span.cm-keyword {
-    color: #839496;
-    font-weight: bold;
-  }
-  .cm-s-solarized-dark span.cm-atom {
-    color: #2aa198;
-  }
-  .cm-s-solarized-dark span.cm-number {
-    color: #93a1a1;
-  }
-  .cm-s-solarized-dark span.cm-def {
-    color: #268bd2;
-  }
-  .cm-s-solarized-dark span.cm-variable {
-    color: #cb4b16;
-  }
-  .cm-s-solarized-dark span.cm-variable-2 {
-    color: #cb4b16;
-  }
-  .cm-s-solarized-dark span.cm-variable-3 {
-    color: #cb4b16;
-  }
-  .cm-s-solarized-dark span.cm-comment {
-    color: #586e75;
-  }
-  .cm-s-solarized-dark span.cm-property {
-    color: #b58900;
-  }
-  .cm-s-solarized-dark span.cm-operator {
-    color: #839496;
-  }
-  .cm-s-solarized-dark span.cm-string {
-    color: #6c71c4;
-  }
-  .cm-s-solarized-dark span.cm-error {
-    font-weight: bold;
-    border-bottom: 1px dotted #cb4b16;
-  }
-  .cm-s-solarized-dark span.cm-bracket {
-    color: #cb4b16;
-  }
-  .cm-s-solarized-dark span.cm-tag {
-    color: #839496;
-  }
-  .cm-s-solarized-dark span.cm-attribute {
-    color: #93a1a1;
-    font-weight: bold;
-  }
-  .cm-s-solarized-dark span.cm-meta {
-    color: #268bd2;
-  }
diff --git a/docs/_css/_typography.scss b/docs/_css/_typography.scss
deleted file mode 100644
index 2b61ea706b2..00000000000
--- a/docs/_css/_typography.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-@import 'variables.scss';
-
-$textColor: $mediumColor;
-$textColorLight: lighten($textColor, 20%);
-
-html {
-  font-family: $helvetica;
-  font-family: proxima-nova, $helvetica;
-  color: $textColor;
-  line-height: 1.28;
-}
-
-p {
-  margin: 0 0 10px;
-}
-
-.subHeader {
-  font-size: 21px;
-  font-weight: 200;
-  line-height: 30px;
-  margin-bottom: 10px;
-}
-
-em {
-  font-style: italic;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 10px 0;
-  font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  color: inherit;
-  text-rendering: optimizelegibility;
-}
-
-h1 small,
-h2 small,
-h3 small,
-h4 small,
-h5 small,
-h6 small {
-  font-weight: normal;
-  color: $textColorLight
-}
-
-h1,
-h2,
-h3 {
-  line-height: 40px;
-}
-
-h1 {
-  font-size: 39px;
-}
-
-h2 {
-  font-size: 31px;
-}
-
-h3 {
-  font-size: 23px;
-}
-
-h4 {
-  font-size: 17px;
-}
-
-h5 {
-  font-size: 14px;
-}
-
-h6 {
-  font-size: 11px;
-}
-
-h1 small {
-  font-size: 24px;
-}
-
-h2 small {
-  font-size: 18px;
-}
-
-h3 small {
-  font-size: 16px;
-}
-
-h4 small {
-  font-size: 14px;
-}
-
-ul,
-ol {
-  margin: 0 0 10px 25px;
-  padding: 0;
-}
-
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin-bottom: 0;
-}
-
-li {
-  line-height: 20px;
-}
-
-
-
-a {
-  color: $linkColor;
-  text-decoration: none;
-  &:hover,
-  &:focus {
-    color: $linkInteract;
-    text-decoration: underline;
-  }
-  &:focus {
-    outline: thin dotted #333;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-}
-.center {
-  text-align: center;
-}
diff --git a/docs/_css/_variables.scss b/docs/_css/_variables.scss
deleted file mode 100644
index 8cc217f85fe..00000000000
--- a/docs/_css/_variables.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$primary: #cc7a6f;
-$linkColor: darken($primary, 9%);
-$linkInteract: darken($linkColor, 9%);
-$pageBg: #f9f9f9;
-
-$lightColor: #e9e9e9;
-$mediumestColor: #666;
-$mediumColor: #484848;
-$darkColor: #2d2d2d;
-$darkestColor: #222222;
-$blueColor: #61dafb;
-$orangeColor: complement($blueColor);
-
-$lightTextColor: #fafafa;
-$mediumTextColor: #aaa;
-$darkTextColor: $mediumColor;
-
-$buttonBlueTop: #77a3d2;
-$buttonBlueBottom: #4783c2;
-$buttonGreyTop: #9a9a9a;
-$buttonGreyBottom: #646464;
-
diff --git a/docs/_css/bourbon/_bourbon-deprecated-upcoming.scss b/docs/_css/bourbon/_bourbon-deprecated-upcoming.scss
deleted file mode 100644
index 5332496d82e..00000000000
--- a/docs/_css/bourbon/_bourbon-deprecated-upcoming.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//************************************************************************//
-// These mixins/functions are deprecated
-// They will be removed in the next MAJOR version release
-//************************************************************************//
-@mixin box-shadow ($shadows...) {
-  @include prefixer(box-shadow, $shadows, spec);
-  @warn "box-shadow is deprecated and will be removed in the next major version release";
-}
-
-@mixin background-size ($lengths...) {
-  @include prefixer(background-size, $lengths, spec);
-  @warn "background-size is deprecated and will be removed in the next major version release";
-}
diff --git a/docs/_css/bourbon/_bourbon.scss b/docs/_css/bourbon/_bourbon.scss
deleted file mode 100644
index 53fbca877f0..00000000000
--- a/docs/_css/bourbon/_bourbon.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-// Custom Helpers
-@import "helpers/deprecated-webkit-gradient";
-@import "helpers/gradient-positions-parser";
-@import "helpers/linear-positions-parser";
-@import "helpers/radial-arg-parser";
-@import "helpers/radial-positions-parser";
-@import "helpers/render-gradients";
-@import "helpers/shape-size-stripper";
-
-// Custom Functions
-@import "functions/compact";
-@import "functions/flex-grid";
-@import "functions/grid-width";
-@import "functions/linear-gradient";
-@import "functions/modular-scale";
-@import "functions/px-to-em";
-@import "functions/radial-gradient";
-@import "functions/tint-shade";
-@import "functions/transition-property-name";
-
-// CSS3 Mixins
-@import "css3/animation";
-@import "css3/appearance";
-@import "css3/backface-visibility";
-@import "css3/background";
-@import "css3/background-image";
-@import "css3/border-image";
-@import "css3/border-radius";
-@import "css3/box-sizing";
-@import "css3/columns";
-@import "css3/flex-box";
-@import "css3/font-face";
-@import "css3/hidpi-media-query";
-@import "css3/image-rendering";
-@import "css3/inline-block";
-@import "css3/keyframes";
-@import "css3/linear-gradient";
-@import "css3/perspective";
-@import "css3/radial-gradient";
-@import "css3/transform";
-@import "css3/transition";
-@import "css3/user-select";
-@import "css3/placeholder";
-
-// Addons & other mixins
-@import "addons/button";
-@import "addons/clearfix";
-@import "addons/font-family";
-@import "addons/hide-text";
-@import "addons/html5-input-types";
-@import "addons/position";
-@import "addons/prefixer";
-@import "addons/retina-image";
-@import "addons/size";
-@import "addons/timing-functions";
-@import "addons/triangle";
-
-// Soon to be deprecated Mixins
-@import "bourbon-deprecated-upcoming";
diff --git a/docs/_css/bourbon/addons/_button.scss b/docs/_css/bourbon/addons/_button.scss
deleted file mode 100644
index 3ae393c090f..00000000000
--- a/docs/_css/bourbon/addons/_button.scss
+++ /dev/null
@@ -1,273 +0,0 @@
-@mixin button ($style: simple, $base-color: #4294f0) {
-
-  @if type-of($style) == color {
-    $base-color: $style;
-    $style: simple;
-  }
-
-  // Grayscale button
-  @if $base-color == grayscale($base-color) {
-    @if $style == simple {
-      @include simple($base-color, $grayscale: true);
-    }
-
-    @else if $style == shiny {
-      @include shiny($base-color, $grayscale: true);
-    }
-
-    @else if $style == pill {
-      @include pill($base-color, $grayscale: true);
-    }
-  }
-
-  // Colored button
-  @else {
-    @if $style == simple {
-      @include simple($base-color);
-    }
-
-    @else if $style == shiny {
-      @include shiny($base-color);
-    }
-
-    @else if $style == pill {
-      @include pill($base-color);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-
-// Simple Button
-//************************************************************************//
-@mixin simple($base-color, $grayscale: false) {
-  $color:         hsl(0, 0, 100%);
-  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
-  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
-  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
-  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
-
-  @if lightness($base-color) > 70% {
-    $color:       hsl(0, 0, 20%);
-    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
-  }
-
-  @if $grayscale == true {
-    $border:        grayscale($border);
-    $inset-shadow:  grayscale($inset-shadow);
-    $stop-gradient: grayscale($stop-gradient);
-    $text-shadow:   grayscale($text-shadow);
-  }
-
-  border: 1px solid $border;
-  border-radius: 3px;
-  box-shadow: inset 0 1px 0 0 $inset-shadow;
-  color: $color;
-  display: inline-block;
-  font-size: 11px;
-  font-weight: bold;
-  @include linear-gradient ($base-color, $stop-gradient);
-  padding: 7px 18px;
-  text-decoration: none;
-  text-shadow: 0 1px 0 $text-shadow;
-  background-clip: padding-box;
-
-  &:hover:not(:disabled) {
-    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
-    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
-    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
-
-    @if $grayscale == true {
-      $base-color-hover:    grayscale($base-color-hover);
-      $inset-shadow-hover:  grayscale($inset-shadow-hover);
-      $stop-gradient-hover: grayscale($stop-gradient-hover);
-    }
-
-    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
-    cursor: pointer;
-    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
-  }
-
-  &:active:not(:disabled) {
-    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
-    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
-
-    @if $grayscale == true {
-      $border-active:       grayscale($border-active);
-      $inset-shadow-active: grayscale($inset-shadow-active);
-    }
-
-    border: 1px solid $border-active;
-    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
-  }
-}
-
-
-// Shiny Button
-//************************************************************************//
-@mixin shiny($base-color, $grayscale: false) {
-  $color:         hsl(0, 0, 100%);
-  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
-  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
-  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
-  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
-  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
-  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
-  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
-
-  @if lightness($base-color) > 70% {
-    $color:       hsl(0, 0, 20%);
-    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
-  }
-
-  @if $grayscale == true {
-    $border:        grayscale($border);
-    $border-bottom: grayscale($border-bottom);
-    $fourth-stop:   grayscale($fourth-stop);
-    $inset-shadow:  grayscale($inset-shadow);
-    $second-stop:   grayscale($second-stop);
-    $text-shadow:   grayscale($text-shadow);
-    $third-stop:    grayscale($third-stop);
-  }
-
-  border: 1px solid $border;
-  border-bottom: 1px solid $border-bottom;
-  border-radius: 5px;
-  box-shadow: inset 0 1px 0 0 $inset-shadow;
-  color: $color;
-  display: inline-block;
-  font-size: 14px;
-  font-weight: bold;
-  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 8px 20px;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: 0 -1px 1px $text-shadow;
-
-  &:hover:not(:disabled) {
-    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
-    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
-    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
-    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
-
-    @if $grayscale == true {
-      $first-stop-hover:  grayscale($first-stop-hover);
-      $second-stop-hover: grayscale($second-stop-hover);
-      $third-stop-hover:  grayscale($third-stop-hover);
-      $fourth-stop-hover: grayscale($fourth-stop-hover);
-    }
-
-    cursor: pointer;
-    @include linear-gradient(top, $first-stop-hover  0%,
-                                  $second-stop-hover 50%,
-                                  $third-stop-hover  50%,
-                                  $fourth-stop-hover 100%);
-  }
-
-  &:active:not(:disabled) {
-    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
-
-    @if $grayscale == true {
-      $inset-shadow-active: grayscale($inset-shadow-active);
-    }
-
-    box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
-  }
-}
-
-
-// Pill Button
-//************************************************************************//
-@mixin pill($base-color, $grayscale: false) {
-  $color:         hsl(0, 0, 100%);
-  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
-  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
-  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
-  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
-  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
-  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
-
-  @if lightness($base-color) > 70% {
-    $color:       hsl(0, 0, 20%);
-    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
-  }
-
-  @if $grayscale == true {
-    $border-bottom: grayscale($border-bottom);
-    $border-sides:  grayscale($border-sides);
-    $border-top:    grayscale($border-top);
-    $inset-shadow:  grayscale($inset-shadow);
-    $stop-gradient: grayscale($stop-gradient);
-    $text-shadow:   grayscale($text-shadow);
-  }
-
-  border: 1px solid $border-top;
-  border-color: $border-top $border-sides $border-bottom;
-  border-radius: 16px;
-  box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
-  color: $color;
-  display: inline-block;
-  font-size: 11px;
-  font-weight: normal;
-  line-height: 1;
-  @include linear-gradient ($base-color, $stop-gradient);
-  padding: 5px 16px;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: 0 -1px 1px $text-shadow;
-  background-clip: padding-box;
-
-  &:hover:not(:disabled) {
-    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
-    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
-    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
-    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
-    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
-    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
-    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
-
-    @if $grayscale == true {
-      $base-color-hover:    grayscale($base-color-hover);
-      $border-bottom:       grayscale($border-bottom);
-      $border-sides:        grayscale($border-sides);
-      $border-top:          grayscale($border-top);
-      $inset-shadow-hover:  grayscale($inset-shadow-hover);
-      $stop-gradient-hover: grayscale($stop-gradient-hover);
-      $text-shadow-hover:   grayscale($text-shadow-hover);
-    }
-
-    border: 1px solid $border-top;
-    border-color: $border-top $border-sides $border-bottom;
-    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
-    cursor: pointer;
-    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
-    text-shadow: 0 -1px 1px $text-shadow-hover;
-    background-clip: padding-box;
-  }
-
-  &:active:not(:disabled) {
-    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
-    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
-    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
-    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
-    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
-
-    @if $grayscale == true {
-      $active-color:         grayscale($active-color);
-      $border-active:        grayscale($border-active);
-      $border-bottom-active: grayscale($border-bottom-active);
-      $inset-shadow-active:  grayscale($inset-shadow-active);
-      $text-shadow-active:   grayscale($text-shadow-active);
-    }
-
-    background: $active-color;
-    border: 1px solid $border-active;
-    border-bottom: 1px solid $border-bottom-active;
-    box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
-    text-shadow: 0 -1px 1px $text-shadow-active;
-  }
-}
diff --git a/docs/_css/bourbon/addons/_clearfix.scss b/docs/_css/bourbon/addons/_clearfix.scss
deleted file mode 100644
index ca9903cf02e..00000000000
--- a/docs/_css/bourbon/addons/_clearfix.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// Micro clearfix provides an easy way to contain floats without adding additional markup
-//
-// Example usage:
-//
-//    // Contain all floats within .wrapper
-//    .wrapper {
-//      @include clearfix;
-//      .content,
-//      .sidebar {
-//        float : left;
-//      }
-//    }
-
-@mixin clearfix {
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-
-  &:after {
-    clear: both;
-  }
-}
-
-// Acknowledgements
-// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
diff --git a/docs/_css/bourbon/addons/_font-family.scss b/docs/_css/bourbon/addons/_font-family.scss
deleted file mode 100644
index df8a80ddfcf..00000000000
--- a/docs/_css/bourbon/addons/_font-family.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
-$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
-$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
-$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
-$verdana: Verdana, Geneva, sans-serif;
diff --git a/docs/_css/bourbon/addons/_hide-text.scss b/docs/_css/bourbon/addons/_hide-text.scss
deleted file mode 100644
index 68d4bf86cb2..00000000000
--- a/docs/_css/bourbon/addons/_hide-text.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin hide-text {
-  color:            transparent;
-  font:             0/0 a;
-  text-shadow:      none;
-}
diff --git a/docs/_css/bourbon/addons/_html5-input-types.scss b/docs/_css/bourbon/addons/_html5-input-types.scss
deleted file mode 100644
index b184382d910..00000000000
--- a/docs/_css/bourbon/addons/_html5-input-types.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-//************************************************************************//
-// Generate a variable ($all-text-inputs) with a list of all html5
-// input types that have a text-based input, excluding textarea.
-// http://diveintohtml5.org/forms.html
-//************************************************************************//
-$inputs-list: 'input[type="email"]',
-              'input[type="number"]',
-              'input[type="password"]',
-              'input[type="search"]',
-              'input[type="tel"]',
-              'input[type="text"]',
-              'input[type="url"]',
-
-              // Webkit & Gecko may change the display of these in the future
-              'input[type="color"]',
-              'input[type="date"]',
-              'input[type="datetime"]',
-              'input[type="datetime-local"]',
-              'input[type="month"]',
-              'input[type="time"]',
-              'input[type="week"]';
-
-$unquoted-inputs-list: ();
-@each $input-type in $inputs-list {
-  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
-}
-
-$all-text-inputs: $unquoted-inputs-list;
-
-
-// Hover Pseudo-class
-//************************************************************************//
-$all-text-inputs-hover: ();
-@each $input-type in $unquoted-inputs-list {
-      $input-type-hover: $input-type + ":hover";
-      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
-}
-
-// Focus Pseudo-class
-//************************************************************************//
-$all-text-inputs-focus: ();
-@each $input-type in $unquoted-inputs-list {
-      $input-type-focus: $input-type + ":focus";
-      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
-}
-
-// You must use interpolation on the variable:
-// #{$all-text-inputs}
-// #{$all-text-inputs-hover}
-// #{$all-text-inputs-focus}
-
-// Example
-//************************************************************************//
-//   #{$all-text-inputs}, textarea {
-//     border: 1px solid red;
-//   }
diff --git a/docs/_css/bourbon/addons/_position.scss b/docs/_css/bourbon/addons/_position.scss
deleted file mode 100644
index faad1cae50a..00000000000
--- a/docs/_css/bourbon/addons/_position.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@mixin position ($position: relative, $coordinates: 0 0 0 0) {
-
-  @if type-of($position) == list {
-    $coordinates: $position;
-    $position: relative;
-  }
-
-  $top: nth($coordinates, 1);
-  $right: nth($coordinates, 2);
-  $bottom: nth($coordinates, 3);
-  $left: nth($coordinates, 4);
-
-  position: $position;
-
-  @if $top == auto {
-    top: $top;
-  }
-  @else if not(unitless($top)) {
-    top: $top;
-  }
-
-  @if $right == auto {
-    right: $right;
-  }
-  @else if not(unitless($right)) {
-    right: $right;
-  }
-
-  @if $bottom == auto {
-    bottom: $bottom;
-  }
-  @else if not(unitless($bottom)) {
-    bottom: $bottom;
-  }
-
-  @if $left == auto {
-    left: $left;
-  }
-  @else if not(unitless($left)) {
-    left: $left;
-  }
-}
diff --git a/docs/_css/bourbon/addons/_prefixer.scss b/docs/_css/bourbon/addons/_prefixer.scss
deleted file mode 100644
index 6bfd23a1dd5..00000000000
--- a/docs/_css/bourbon/addons/_prefixer.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-//************************************************************************//
-// Example: @include prefixer(border-radius, $radii, webkit ms spec);
-//************************************************************************//
-$prefix-for-webkit:    true !default;
-$prefix-for-mozilla:   true !default;
-$prefix-for-microsoft: true !default;
-$prefix-for-opera:     true !default;
-$prefix-for-spec:      true !default; // required for keyframe mixin
-
-@mixin prefixer ($property, $value, $prefixes) {
-  @each $prefix in $prefixes {
-    @if $prefix == webkit {
-      @if $prefix-for-webkit {
-        -webkit-#{$property}: $value;
-      }
-    }
-    @else if $prefix == moz {
-      @if $prefix-for-mozilla {
-        -moz-#{$property}: $value;
-      }
-    }
-    @else if $prefix == ms {
-      @if $prefix-for-microsoft {
-        -ms-#{$property}: $value;
-      }
-    }
-    @else if $prefix == o {
-      @if $prefix-for-opera {
-        -o-#{$property}: $value;
-      }
-    }
-    @else if $prefix == spec {
-      @if $prefix-for-spec {
-        #{$property}: $value;
-      }
-    }
-    @else  {
-      @warn "Unrecognized prefix: #{$prefix}";
-    }
-  }
-}
-
-@mixin disable-prefix-for-all() {
-  $prefix-for-webkit:    false;
-  $prefix-for-mozilla:   false;
-  $prefix-for-microsoft: false;
-  $prefix-for-opera:     false;
-  $prefix-for-spec:      false;
-}
diff --git a/docs/_css/bourbon/addons/_retina-image.scss b/docs/_css/bourbon/addons/_retina-image.scss
deleted file mode 100644
index ed300715e43..00000000000
--- a/docs/_css/bourbon/addons/_retina-image.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
-  @if $asset-pipeline {
-    background-image: image_url($filename + "." + $extension);
-  }
-  @else {
-    background-image: url($filename + "." + $extension);
-  }
-
-  @include hidpi {
-
-    @if $asset-pipeline {
-      @if $retina-filename {
-        background-image: image_url($retina-filename + "." + $extension);
-      }
-      @else {
-        background-image: image_url($filename + "@2x" + "." + $extension);
-      }
-    }
-
-    @else {
-      @if $retina-filename {
-        background-image: url($retina-filename + "." + $extension);
-      }
-      @else {
-        background-image: url($filename + "@2x" + "." + $extension);
-      }
-    }
-
-    background-size: $background-size;
-
-  }
-}
diff --git a/docs/_css/bourbon/addons/_size.scss b/docs/_css/bourbon/addons/_size.scss
deleted file mode 100644
index 342e41b79f1..00000000000
--- a/docs/_css/bourbon/addons/_size.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@mixin size($size) {
-  @if length($size) == 1 {
-    @if $size == auto {
-      width:  $size;
-      height: $size;
-    }
-
-    @else if unitless($size) {
-      width:  $size + px;
-      height: $size + px;
-    }
-
-    @else if not(unitless($size)) {
-      width:  $size;
-      height: $size;
-    }
-  }
-
-  // Width x Height
-  @if length($size) == 2 {
-    $width:  nth($size, 1);
-    $height: nth($size, 2);
-
-    @if $width == auto {
-      width: $width;
-    }
-    @else if not(unitless($width)) {
-      width: $width;
-    }
-    @else if unitless($width) {
-      width: $width + px;
-    }
-
-    @if $height == auto {
-      height: $height;
-    }
-    @else if not(unitless($height)) {
-      height: $height;
-    }
-    @else if unitless($height) {
-      height: $height + px;
-    }
-  }
-}
diff --git a/docs/_css/bourbon/addons/_timing-functions.scss b/docs/_css/bourbon/addons/_timing-functions.scss
deleted file mode 100644
index 51b24109149..00000000000
--- a/docs/_css/bourbon/addons/_timing-functions.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
-// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
-
-// EASE IN
-$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
-$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
-$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
-$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
-$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
-$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
-$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
-$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
-
-// EASE OUT
-$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
-$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
-$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
-$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
-$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
-$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
-$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
-$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
-
-// EASE IN OUT
-$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
-$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
-$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
-$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
-$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
-$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
-$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/docs/_css/bourbon/addons/_triangle.scss b/docs/_css/bourbon/addons/_triangle.scss
deleted file mode 100644
index 0e02aca2ca5..00000000000
--- a/docs/_css/bourbon/addons/_triangle.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@mixin triangle ($size, $color, $direction) {
-  height: 0;
-  width: 0;
-
-  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
-    border-color: transparent;
-    border-style: solid;
-    border-width: $size / 2;
-
-    @if $direction == up {
-      border-bottom-color: $color;
-
-    } @else if $direction == right {
-      border-left-color:   $color;
-
-    } @else if $direction == down {
-      border-top-color:    $color;
-
-    } @else if $direction == left {
-      border-right-color:  $color;
-    }
-  }
-
-  @else if ($direction == up-right) or ($direction == up-left) {
-    border-top: $size solid $color;
-
-    @if $direction == up-right {
-      border-left:  $size solid transparent;
-
-    } @else if $direction == up-left {
-      border-right: $size solid transparent;
-    }
-  }
-
-  @else if ($direction == down-right) or ($direction == down-left) {
-    border-bottom: $size solid $color;
-
-    @if $direction == down-right {
-      border-left:  $size solid transparent;
-
-    } @else if $direction == down-left {
-      border-right: $size solid transparent;
-    }
-  }
-}
diff --git a/docs/_css/bourbon/css3/_animation.scss b/docs/_css/bourbon/css3/_animation.scss
deleted file mode 100644
index 08c3dbf157c..00000000000
--- a/docs/_css/bourbon/css3/_animation.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
-// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
-
-// Official animation shorthand property.
-@mixin animation ($animations...) {
-  @include prefixer(animation, $animations, webkit moz spec);
-}
-
-// Individual Animation Properties
-@mixin animation-name ($names...) {
-  @include prefixer(animation-name, $names, webkit moz spec);
-}
-
-
-@mixin animation-duration ($times...) {
-  @include prefixer(animation-duration, $times, webkit moz spec);
-}
-
-
-@mixin animation-timing-function ($motions...) {
-// ease | linear | ease-in | ease-out | ease-in-out
-  @include prefixer(animation-timing-function, $motions, webkit moz spec);
-}
-
-
-@mixin animation-iteration-count ($values...) {
-// infinite | <number>
-  @include prefixer(animation-iteration-count, $values, webkit moz spec);
-}
-
-
-@mixin animation-direction ($directions...) {
-// normal | alternate
-  @include prefixer(animation-direction, $directions, webkit moz spec);
-}
-
-
-@mixin animation-play-state ($states...) {
-// running | paused
-  @include prefixer(animation-play-state, $states, webkit moz spec);
-}
-
-
-@mixin animation-delay ($times...) {
-  @include prefixer(animation-delay, $times, webkit moz spec);
-}
-
-
-@mixin animation-fill-mode ($modes...) {
-// none | forwards | backwards | both
-  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
-}
diff --git a/docs/_css/bourbon/css3/_appearance.scss b/docs/_css/bourbon/css3/_appearance.scss
deleted file mode 100644
index 3eb16e45de7..00000000000
--- a/docs/_css/bourbon/css3/_appearance.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin appearance ($value) {
-  @include prefixer(appearance, $value, webkit moz ms o spec);
-}
diff --git a/docs/_css/bourbon/css3/_backface-visibility.scss b/docs/_css/bourbon/css3/_backface-visibility.scss
deleted file mode 100644
index 1161fe60dd1..00000000000
--- a/docs/_css/bourbon/css3/_backface-visibility.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-//************************************************************************//
-// Backface-visibility mixin
-//************************************************************************//
-@mixin backface-visibility($visibility) {
-  @include prefixer(backface-visibility, $visibility, webkit spec);
-}
diff --git a/docs/_css/bourbon/css3/_background-image.scss b/docs/_css/bourbon/css3/_background-image.scss
deleted file mode 100644
index 17016b91b9c..00000000000
--- a/docs/_css/bourbon/css3/_background-image.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-//************************************************************************//
-// Background-image property for adding multiple background images with
-// gradients, or for stringing multiple gradients together.
-//************************************************************************//
-
-@mixin background-image($images...) {
-  background-image: _add-prefix($images, webkit);
-  background-image: _add-prefix($images);
-}
-
-@function _add-prefix($images, $vendor: false) {
-  $images-prefixed: ();
-  $gradient-positions: false;
-  @for $i from 1 through length($images) {
-    $type: type-of(nth($images, $i)); // Get type of variable - List or String
-
-    // If variable is a list - Gradient
-    @if $type == list {
-      $gradient-type: nth(nth($images, $i), 1); // linear or radial
-      $gradient-pos: null;
-      $gradient-args: null;
-
-      @if ($gradient-type == linear) or ($gradient-type == radial) {
-        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
-        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
-      }
-      @else {
-        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
-      }
-
-      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
-      $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
-      $images-prefixed: append($images-prefixed, $gradient, comma);
-    }
-    // If variable is a string - Image
-    @else if $type == string {
-      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
-    }
-  }
-  @return $images-prefixed;
-}
-
-//Examples:
-  //@include background-image(linear-gradient(top, orange, red));
-  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
-  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
-  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
-  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
diff --git a/docs/_css/bourbon/css3/_background.scss b/docs/_css/bourbon/css3/_background.scss
deleted file mode 100644
index 766d5d32247..00000000000
--- a/docs/_css/bourbon/css3/_background.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-//************************************************************************//
-// Background property for adding multiple backgrounds using shorthand
-// notation.
-//************************************************************************//
-
-@mixin background(
-  $background-1       , $background-2: false,
-  $background-3: false, $background-4: false,
-  $background-5: false, $background-6: false,
-  $background-7: false, $background-8: false,
-  $background-9: false, $background-10: false,
-  $fallback: false
-) {
-  $backgrounds: compact($background-1, $background-2,
-                $background-3, $background-4,
-                $background-5, $background-6,
-                $background-7, $background-8,
-                $background-9, $background-10);
-
-  $fallback-color: false;
-  @if (type-of($fallback) == color) or ($fallback == "transparent") {
-    $fallback-color: $fallback;
-  }
-  @else {
-    $fallback-color: _extract-background-color($backgrounds);
-  }
-
-  @if $fallback-color {
-    background-color: $fallback-color;
-  }
-  background: _background-add-prefix($backgrounds, webkit);
-  background: _background-add-prefix($backgrounds);
-}
-
-@function _extract-background-color($backgrounds) {
-  $final-bg-layer: nth($backgrounds, length($backgrounds));
-  @if type-of($final-bg-layer) == list {
-    @for $i from 1 through length($final-bg-layer) {
-      $value: nth($final-bg-layer, $i);
-      @if type-of($value) == color {
-        @return $value;
-      }
-    }
-  }
-  @return false;
-}
-
-@function _background-add-prefix($backgrounds, $vendor: false) {
-  $backgrounds-prefixed: ();
-
-  @for $i from 1 through length($backgrounds) {
-    $shorthand: nth($backgrounds, $i); // Get member for current index
-    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
-
-    // If shorthand is a list (gradient)
-    @if $type == list {
-      $first-member: nth($shorthand, 1); // Get first member of shorthand
-
-      // Linear Gradient
-      @if index(linear radial, nth($first-member, 1)) {
-        $gradient-type: nth($first-member, 1); // linear || radial
-        $gradient-args:      false;
-        $gradient-positions: false;
-        $shorthand-start:    false;
-        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
-          $gradient-positions: nth($first-member, 2);
-          $gradient-args:      nth($first-member, 3);
-          $shorthand-start: 2;
-        }
-        @else { // Linear gradient only - lg(red,orange),...
-          $gradient-positions: nth($shorthand, 2);
-          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
-        }
-
-        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
-        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
-
-        // Append any additional shorthand args to gradient
-        @if $shorthand-start {
-          @for $j from $shorthand-start through length($shorthand) {
-            $gradient: join($gradient, nth($shorthand, $j), space);
-          }
-        }
-        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
-      }
-      // Image with additional properties
-      @else {
-        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
-      }
-    }
-    // If shorthand is a simple string (color or image)
-    @else if $type == string {
-      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
-    }
-  }
-  @return $backgrounds-prefixed;
-}
-
-//Examples:
-  //@include background(linear-gradient(top, orange, red));
-  //@include background(radial-gradient(circle at 40% 40%, orange, red));
-  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
-  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
diff --git a/docs/_css/bourbon/css3/_border-image.scss b/docs/_css/bourbon/css3/_border-image.scss
deleted file mode 100644
index 1fff212df8a..00000000000
--- a/docs/_css/bourbon/css3/_border-image.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@mixin border-image($images) {
-  -webkit-border-image: _border-add-prefix($images, webkit);
-     -moz-border-image: _border-add-prefix($images, moz);
-       -o-border-image: _border-add-prefix($images, o);
-          border-image: _border-add-prefix($images);
-}
-
-@function _border-add-prefix($images, $vendor: false) {
-  $border-image: null;
-  $images-type:  type-of(nth($images, 1));
-  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
-
-  // If input is a gradient
-  @if $images-type == string {
-    @if ($first-var == "linear") or ($first-var == "radial") {
-      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
-      $gradient-pos:  nth($images, 2);           // Get gradient position
-      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
-      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
-      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
-    }
-    // If input is a URL
-    @else {
-      $border-image: $images;
-    }
-  }
-  // If input is gradient or url + additional args
-  @else if $images-type == list {
-    $type: type-of(nth($images, 1));           // Get type of variable - List or String
-
-    // If variable is a list - Gradient
-    @if $type == list {
-      $gradient: nth($images, 1);
-      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
-      $gradient-pos:  nth($gradient, 2);           // Get gradient position
-      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
-      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
-      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
-
-      @for $i from 2 through length($images) {
-        $border-image: append($border-image, nth($images, $i));
-      }
-    }
-  }
-  @return $border-image;
-}
-
-//Examples:
-// @include border-image(url("image.png"));
-// @include border-image(url("image.png") 20 stretch);
-// @include border-image(linear-gradient(45deg, orange, yellow));
-// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
-// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
-// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
-
diff --git a/docs/_css/bourbon/css3/_border-radius.scss b/docs/_css/bourbon/css3/_border-radius.scss
deleted file mode 100644
index 7c171901090..00000000000
--- a/docs/_css/bourbon/css3/_border-radius.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-//************************************************************************//
-// Shorthand Border-radius mixins
-//************************************************************************//
-@mixin border-top-radius($radii) {
-  @include prefixer(border-top-left-radius, $radii, spec);
-  @include prefixer(border-top-right-radius, $radii, spec);
-}
-
-@mixin border-bottom-radius($radii) {
-  @include prefixer(border-bottom-left-radius, $radii, spec);
-  @include prefixer(border-bottom-right-radius, $radii, spec);
-}
-
-@mixin border-left-radius($radii) {
-  @include prefixer(border-top-left-radius, $radii, spec);
-  @include prefixer(border-bottom-left-radius, $radii, spec);
-}
-
-@mixin border-right-radius($radii) {
-  @include prefixer(border-top-right-radius, $radii, spec);
-  @include prefixer(border-bottom-right-radius, $radii, spec);
-}
diff --git a/docs/_css/bourbon/css3/_box-sizing.scss b/docs/_css/bourbon/css3/_box-sizing.scss
deleted file mode 100644
index f07e1d412e3..00000000000
--- a/docs/_css/bourbon/css3/_box-sizing.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@mixin box-sizing ($box) {
-//  content-box | border-box | inherit
-  @include prefixer(box-sizing, $box, webkit moz spec);
-}
diff --git a/docs/_css/bourbon/css3/_columns.scss b/docs/_css/bourbon/css3/_columns.scss
deleted file mode 100644
index 42274a4eebb..00000000000
--- a/docs/_css/bourbon/css3/_columns.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@mixin columns($arg: auto) {
-// <column-count> || <column-width>
-  @include prefixer(columns, $arg, webkit moz spec);
-}
-
-@mixin column-count($int: auto) {
-// auto || integer
-  @include prefixer(column-count, $int, webkit moz spec);
-}
-
-@mixin column-gap($length: normal) {
-// normal || length
-  @include prefixer(column-gap, $length, webkit moz spec);
-}
-
-@mixin column-fill($arg: auto) {
-// auto || length
-  @include prefixer(columns-fill, $arg, webkit moz spec);
-}
-
-@mixin column-rule($arg) {
-// <border-width> || <border-style> || <color>
-  @include prefixer(column-rule, $arg, webkit moz spec);
-}
-
-@mixin column-rule-color($color) {
-  @include prefixer(column-rule-color, $color, webkit moz spec);
-}
-
-@mixin column-rule-style($style: none) {
-// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-  @include prefixer(column-rule-style, $style, webkit moz spec);
-}
-
-@mixin column-rule-width ($width: none) {
-  @include prefixer(column-rule-width, $width, webkit moz spec);
-}
-
-@mixin column-span($arg: none) {
-// none || all
-  @include prefixer(column-span, $arg, webkit moz spec);
-}
-
-@mixin column-width($length: auto) {
-// auto || length
-  @include prefixer(column-width, $length, webkit moz spec);
-}
diff --git a/docs/_css/bourbon/css3/_flex-box.scss b/docs/_css/bourbon/css3/_flex-box.scss
deleted file mode 100644
index 3e741e66966..00000000000
--- a/docs/_css/bourbon/css3/_flex-box.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// CSS3 Flexible Box Model and property defaults
-
-// Custom shorthand notation for flexbox
-@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
-  @include display-box;
-  @include box-orient($orient);
-  @include box-pack($pack);
-  @include box-align($align);
-}
-
-@mixin display-box {
-  display: -webkit-box;
-  display: -moz-box;
-  display: box;
-}
-
-@mixin box-orient($orient: inline-axis) {
-// horizontal|vertical|inline-axis|block-axis|inherit
-  @include prefixer(box-orient, $orient, webkit moz spec);
-}
-
-@mixin box-pack($pack: start) {
-// start|end|center|justify
-  @include prefixer(box-pack, $pack, webkit moz spec);
-}
-
-@mixin box-align($align: stretch) {
-// start|end|center|baseline|stretch
-  @include prefixer(box-align, $align, webkit moz spec);
-}
-
-@mixin box-direction($direction: normal) {
-// normal|reverse|inherit
-  @include prefixer(box-direction, $direction, webkit moz spec);
-}
-
-@mixin box-lines($lines: single) {
-// single|multiple
-  @include prefixer(box-lines, $lines, webkit moz spec);
-}
-
-@mixin box-ordinal-group($int: 1) {
-  @include prefixer(box-ordinal-group, $int, webkit moz spec);
-}
-
-@mixin box-flex($value: 0.0) {
-  @include prefixer(box-flex, $value, webkit moz spec);
-}
-
-@mixin box-flex-group($int: 1) {
-  @include prefixer(box-flex-group, $int, webkit moz spec);
-}
diff --git a/docs/_css/bourbon/css3/_font-face.scss b/docs/_css/bourbon/css3/_font-face.scss
deleted file mode 100644
index 029ee8fe88c..00000000000
--- a/docs/_css/bourbon/css3/_font-face.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
-
-@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
-  @font-face {
-    font-family: $font-family;
-    font-weight: $weight;
-    font-style: $style;
-
-    @if $asset-pipeline == true {
-      src: font-url('#{$file-path}.eot');
-      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
-           font-url('#{$file-path}.woff')                format('woff'),
-           font-url('#{$file-path}.ttf')                 format('truetype'),
-           font-url('#{$file-path}.svg##{$font-family}') format('svg');
-    } @else {
-      src: url('#{$file-path}.eot');
-      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
-           url('#{$file-path}.woff')                     format('woff'),
-           url('#{$file-path}.ttf')                      format('truetype'),
-           url('#{$file-path}.svg##{$font-family}')      format('svg');
-    }
-  }
-}
diff --git a/docs/_css/bourbon/css3/_hidpi-media-query.scss b/docs/_css/bourbon/css3/_hidpi-media-query.scss
deleted file mode 100644
index 111e4009b5a..00000000000
--- a/docs/_css/bourbon/css3/_hidpi-media-query.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
-@mixin hidpi($ratio: 1.3) {
-  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
-  only screen and (min--moz-device-pixel-ratio: $ratio),
-  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
-  only screen and (min-resolution: #{round($ratio*96)}dpi),
-  only screen and (min-resolution: #{$ratio}dppx) {
-    @content;
-  }
-}
diff --git a/docs/_css/bourbon/css3/_image-rendering.scss b/docs/_css/bourbon/css3/_image-rendering.scss
deleted file mode 100644
index abc7ee1aa47..00000000000
--- a/docs/_css/bourbon/css3/_image-rendering.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@mixin image-rendering ($mode:optimizeQuality) {
-
-  @if ($mode == optimize-contrast) {
-      image-rendering: -moz-crisp-edges;
-      image-rendering: -o-crisp-edges;
-      image-rendering: -webkit-optimize-contrast;
-      image-rendering: optimize-contrast;
-  }
-
-  @else {
-      image-rendering: $mode;
-  }
-}
diff --git a/docs/_css/bourbon/css3/_inline-block.scss b/docs/_css/bourbon/css3/_inline-block.scss
deleted file mode 100644
index 3272a0010b3..00000000000
--- a/docs/_css/bourbon/css3/_inline-block.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Legacy support for inline-block in IE7 (maybe IE6)
-@mixin inline-block {
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-}
diff --git a/docs/_css/bourbon/css3/_keyframes.scss b/docs/_css/bourbon/css3/_keyframes.scss
deleted file mode 100644
index dca61f2a074..00000000000
--- a/docs/_css/bourbon/css3/_keyframes.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
-@mixin keyframes($name) {
-  $original-prefix-for-webkit:    $prefix-for-webkit;
-  $original-prefix-for-mozilla:   $prefix-for-mozilla;
-  $original-prefix-for-microsoft: $prefix-for-microsoft;
-  $original-prefix-for-opera:     $prefix-for-opera;
-  $original-prefix-for-spec:      $prefix-for-spec;
-
-  @if $original-prefix-for-webkit {
-    @include disable-prefix-for-all();
-    $prefix-for-webkit: true;
-    @-webkit-keyframes #{$name} {
-      @content;
-    }
-  }
-  @if $original-prefix-for-mozilla {
-    @include disable-prefix-for-all();
-    $prefix-for-mozilla: true;
-    @-moz-keyframes #{$name} {
-      @content;
-    }
-  }
-  @if $original-prefix-for-opera {
-    @include disable-prefix-for-all();
-    $prefix-for-opera: true;
-    @-o-keyframes #{$name} {
-      @content;
-    }
-  }
-  @if $original-prefix-for-spec {
-    @include disable-prefix-for-all();
-    $prefix-for-spec: true;
-    @keyframes #{$name} {
-      @content;
-    }
-  }
-
-  $prefix-for-webkit:    $original-prefix-for-webkit;
-  $prefix-for-mozilla:   $original-prefix-for-mozilla;
-  $prefix-for-microsoft: $original-prefix-for-microsoft;
-  $prefix-for-opera:     $original-prefix-for-opera;
-  $prefix-for-spec:      $original-prefix-for-spec;
-}
diff --git a/docs/_css/bourbon/css3/_linear-gradient.scss b/docs/_css/bourbon/css3/_linear-gradient.scss
deleted file mode 100644
index d5b687b00cb..00000000000
--- a/docs/_css/bourbon/css3/_linear-gradient.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@mixin linear-gradient($pos, $G1, $G2: false,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false,
-                       $deprecated-pos1: left top,
-                       $deprecated-pos2: left bottom,
-                       $fallback: false) {
-  // Detect what type of value exists in $pos
-  $pos-type: type-of(nth($pos, 1));
-  $pos-spec: null;
-  $pos-degree: null;
-
-  // If $pos is missing from mixin, reassign vars and add default position
-  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
-    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
-     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-     $pos: null;
-  }
-
-  @if $pos {
-    $positions: _linear-positions-parser($pos);
-    $pos-degree: nth($positions, 1);
-    $pos-spec:   nth($positions, 2);
-  }
-
-  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-  // Set $G1 as the default fallback color
-  $fallback-color: nth($G1, 1);
-
-  // If $fallback is a color use that color as the fallback color
-  @if (type-of($fallback) == color) or ($fallback == "transparent") {
-    $fallback-color: $fallback;
-  }
-
-  background-color: $fallback-color;
-  background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
-  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
-  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
-}
diff --git a/docs/_css/bourbon/css3/_perspective.scss b/docs/_css/bourbon/css3/_perspective.scss
deleted file mode 100644
index 0e4deb80f3c..00000000000
--- a/docs/_css/bourbon/css3/_perspective.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@mixin perspective($depth: none) {
-  // none | <length>
-  @include prefixer(perspective, $depth, webkit moz spec);
-}
-
-@mixin perspective-origin($value: 50% 50%) {
-  @include prefixer(perspective-origin, $value, webkit moz spec);
-}
diff --git a/docs/_css/bourbon/css3/_placeholder.scss b/docs/_css/bourbon/css3/_placeholder.scss
deleted file mode 100644
index 22fd92b4f23..00000000000
--- a/docs/_css/bourbon/css3/_placeholder.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-$placeholders: '-webkit-input-placeholder',
-               '-moz-placeholder',
-               '-ms-input-placeholder';
-
-@mixin placeholder {
-  @each $placeholder in $placeholders {
-    @if $placeholder == "-webkit-input-placeholder" {
-      &::#{$placeholder} {
-        @content;
-      }
-    }
-    @else if $placeholder == "-moz-placeholder" {
-      // FF 18-
-      &:#{$placeholder} {
-        @content;
-      }
-
-      // FF 19+
-      &::#{$placeholder} {
-        @content;
-      }
-    }
-    @else {
-      &:#{$placeholder} {
-        @content;
-      }
-    }
-  }
-}
diff --git a/docs/_css/bourbon/css3/_radial-gradient.scss b/docs/_css/bourbon/css3/_radial-gradient.scss
deleted file mode 100644
index e87b45a5a1a..00000000000
--- a/docs/_css/bourbon/css3/_radial-gradient.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-// Requires Sass 3.1+
-@mixin radial-gradient($G1,        $G2,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false,
-                       $pos: null,
-                       $shape-size: null,
-                       $deprecated-pos1: center center,
-                       $deprecated-pos2: center center,
-                       $deprecated-radius1: 0,
-                       $deprecated-radius2: 460,
-                       $fallback: false) {
-
-  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
-  $G1:  nth($data, 1);
-  $G2:  nth($data, 2);
-  $pos: nth($data, 3);
-  $shape-size: nth($data, 4);
-
-  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-  // Strip deprecated cover/contain for spec
-  $shape-size-spec: _shape-size-stripper($shape-size);
-
-  // Set $G1 as the default fallback color
-  $first-color: nth($full, 1);
-  $fallback-color: nth($first-color, 1);
-
-  @if (type-of($fallback) == color) or ($fallback == "transparent") {
-    $fallback-color: $fallback;
-  }
-
-  // Add Commas and spaces
-  $shape-size: if($shape-size, '#{$shape-size}, ', null);
-  $pos:        if($pos, '#{$pos}, ', null);
-  $pos-spec:   if($pos, 'at #{$pos}', null);
-  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
-
-  background-color:  $fallback-color;
-  background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
-  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
-  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
-}
diff --git a/docs/_css/bourbon/css3/_transform.scss b/docs/_css/bourbon/css3/_transform.scss
deleted file mode 100644
index 8cc35963d55..00000000000
--- a/docs/_css/bourbon/css3/_transform.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin transform($property: none) {
-//  none | <transform-function>
-  @include prefixer(transform, $property, webkit moz ms o spec);
-}
-
-@mixin transform-origin($axes: 50%) {
-// x-axis - left | center | right  | length | %
-// y-axis - top  | center | bottom | length | %
-// z-axis -                          length
-  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
-}
-
-@mixin transform-style ($style: flat) {
-  @include prefixer(transform-style, $style, webkit moz ms o spec);
-}
diff --git a/docs/_css/bourbon/css3/_transition.scss b/docs/_css/bourbon/css3/_transition.scss
deleted file mode 100644
index 180cde6c8a4..00000000000
--- a/docs/_css/bourbon/css3/_transition.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
-// Example: @include transition (all, 2.0s, ease-in-out);
-//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
-//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
-
-@mixin transition ($properties...) {
-  @if length($properties) >= 1 {
-    @include prefixer(transition, $properties, webkit moz spec);
-  }
-
-  @else {
-    $properties: all 0.15s ease-out 0;
-    @include prefixer(transition, $properties, webkit moz spec);
-  }
-}
-
-@mixin transition-property ($properties...) {
-   -webkit-transition-property: transition-property-names($properties, 'webkit');
-      -moz-transition-property: transition-property-names($properties, 'moz');
-           transition-property: transition-property-names($properties, false);
-}
-
-@mixin transition-duration ($times...) {
-  @include prefixer(transition-duration, $times, webkit moz spec);
-}
-
-@mixin transition-timing-function ($motions...) {
-// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-  @include prefixer(transition-timing-function, $motions, webkit moz spec);
-}
-
-@mixin transition-delay ($times...) {
-  @include prefixer(transition-delay, $times, webkit moz spec);
-}
diff --git a/docs/_css/bourbon/css3/_user-select.scss b/docs/_css/bourbon/css3/_user-select.scss
deleted file mode 100644
index 1380aa8baa9..00000000000
--- a/docs/_css/bourbon/css3/_user-select.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin user-select($arg: none) {
-  @include prefixer(user-select, $arg, webkit moz ms spec);
-}
diff --git a/docs/_css/bourbon/functions/_compact.scss b/docs/_css/bourbon/functions/_compact.scss
deleted file mode 100644
index 871500e3394..00000000000
--- a/docs/_css/bourbon/functions/_compact.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Remove `false` values from a list
-
-@function compact($vars...) {
-  $list: ();
-  @each $var in $vars {
-    @if $var {
-      $list: append($list, $var, comma);
-    }
-  }
-  @return $list;
-}
diff --git a/docs/_css/bourbon/functions/_flex-grid.scss b/docs/_css/bourbon/functions/_flex-grid.scss
deleted file mode 100644
index 3bbd8665732..00000000000
--- a/docs/_css/bourbon/functions/_flex-grid.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// Flexible grid
-@function flex-grid($columns, $container-columns: $fg-max-columns) {
-  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
-  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
-  @return percentage($width / $container-width);
-}
-
-// Flexible gutter
-@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
-  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
-  @return percentage($gutter / $container-width);
-}
-
-// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
-// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
-//
-// The calculation presumes that your column structure will be missing the last gutter:
-//
-//   -- column -- gutter -- column -- gutter -- column
-//
-//  $fg-column: 60px;             // Column Width
-//  $fg-gutter: 25px;             // Gutter Width
-//  $fg-max-columns: 12;          // Total Columns For Main Container
-//
-//  div {
-//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
-//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
-//
-//    p {
-//      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
-//      float: left;
-//      margin: flex-gutter(4);  // returns (25px / 315px) = 7.936508%;
-//    }
-//
-//    blockquote {
-//      float: left;
-//      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
-//    }
-//  }
\ No newline at end of file
diff --git a/docs/_css/bourbon/functions/_grid-width.scss b/docs/_css/bourbon/functions/_grid-width.scss
deleted file mode 100644
index 8e63d83d602..00000000000
--- a/docs/_css/bourbon/functions/_grid-width.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@function grid-width($n) {
-  @return $n * $gw-column + ($n - 1) * $gw-gutter;
-}
-
-// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
-//
-//  $gw-column: 100px;         // Column Width
-//  $gw-gutter: 40px;          // Gutter Width
-//
-//  div {
-//    width: grid-width(4);    // returns 520px;
-//    margin-left: $gw-gutter; // returns 40px;
-//  }
diff --git a/docs/_css/bourbon/functions/_linear-gradient.scss b/docs/_css/bourbon/functions/_linear-gradient.scss
deleted file mode 100644
index c8454d83f08..00000000000
--- a/docs/_css/bourbon/functions/_linear-gradient.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@function linear-gradient($pos, $gradients...) {
-  $type: linear;
-  $pos-type: type-of(nth($pos, 1));
-
-  // if $pos doesn't exist, fix $gradient
-  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
-    $gradients: zip($pos $gradients);
-    $pos: false;
-  }
-
-  $type-gradient: $type, $pos, $gradients;
-  @return $type-gradient;
-}
diff --git a/docs/_css/bourbon/functions/_modular-scale.scss b/docs/_css/bourbon/functions/_modular-scale.scss
deleted file mode 100644
index dddccb52241..00000000000
--- a/docs/_css/bourbon/functions/_modular-scale.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@function modular-scale($value, $increment, $ratio) {
-  @if $increment > 0 {
-    @for $i from 1 through $increment {
-      $value: ($value * $ratio);
-    }
-  }
-
-  @if $increment < 0 {
-    $increment: abs($increment);
-    @for $i from 1 through $increment {
-      $value: ($value / $ratio);
-    }
-  }
-
-  @return $value;
-}
-
-//  div {
-//                     Increment Up GR with positive value
-//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
-//
-//                     Increment Down GR with negative value
-//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
-//
-//                     Can be used with ceil(round up) or floor(round down)
-//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
-//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
-//  }
-//
-// modularscale.com
-
-@function golden-ratio($value, $increment) {
-  @return modular-scale($value, $increment, 1.618)
-}
-
-//  div {
-//    font-size: golden-ratio(14px, 1); // returns: 22.652px
-//  }
-//
-// goldenratiocalculator.com
diff --git a/docs/_css/bourbon/functions/_px-to-em.scss b/docs/_css/bourbon/functions/_px-to-em.scss
deleted file mode 100644
index 2eb1031c60e..00000000000
--- a/docs/_css/bourbon/functions/_px-to-em.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Convert pixels to ems
-// eg. for a relational value of 12px write em(12) when the parent is 16px
-// if the parent is another value say 24px write em(12, 24)
-
-@function em($pxval, $base: 16) {
-  @return ($pxval / $base) * 1em;
-}
-
diff --git a/docs/_css/bourbon/functions/_radial-gradient.scss b/docs/_css/bourbon/functions/_radial-gradient.scss
deleted file mode 100644
index 75584060d2a..00000000000
--- a/docs/_css/bourbon/functions/_radial-gradient.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// This function is required and used by the background-image mixin.
-@function radial-gradient($G1,        $G2,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false,
-                       $pos: null,
-                       $shape-size: null) {
-
-  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
-  $G1:  nth($data, 1);
-  $G2:  nth($data, 2);
-  $pos: nth($data, 3);
-  $shape-size: nth($data, 4);
-
-  $type: radial;
-  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-  $type-gradient: $type, $shape-size $pos, $gradient;
-  @return $type-gradient;
-}
-
-
diff --git a/docs/_css/bourbon/functions/_tint-shade.scss b/docs/_css/bourbon/functions/_tint-shade.scss
deleted file mode 100644
index f7172004ac6..00000000000
--- a/docs/_css/bourbon/functions/_tint-shade.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Add percentage of white to a color
-@function tint($color, $percent){
-  @return mix(white, $color, $percent);
-}
-
-// Add percentage of black to a color
-@function shade($color, $percent){
-  @return mix(black, $color, $percent);
-}
diff --git a/docs/_css/bourbon/functions/_transition-property-name.scss b/docs/_css/bourbon/functions/_transition-property-name.scss
deleted file mode 100644
index 54cd4228112..00000000000
--- a/docs/_css/bourbon/functions/_transition-property-name.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Return vendor-prefixed property names if appropriate
-// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
-//************************************************************************//
-@function transition-property-names($props, $vendor: false) {
-	$new-props: ();
-	
-	@each $prop in $props {
-		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
-	}
-
-	@return $new-props;
-}
-
-@function transition-property-name($prop, $vendor: false) {
-	// put other properties that need to be prefixed here aswell
-	@if $vendor and $prop == transform {
-		@return unquote('-'+$vendor+'-'+$prop);
-	}
-	@else {
-		@return $prop;
-	}
-}
\ No newline at end of file
diff --git a/docs/_css/bourbon/helpers/_deprecated-webkit-gradient.scss b/docs/_css/bourbon/helpers/_deprecated-webkit-gradient.scss
deleted file mode 100644
index cd17e2832da..00000000000
--- a/docs/_css/bourbon/helpers/_deprecated-webkit-gradient.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// Render Deprecated Webkit Gradient - Linear || Radial
-//************************************************************************//
-@function _deprecated-webkit-gradient($type,
-                                     $deprecated-pos1, $deprecated-pos2,
-                                     $full,
-                                     $deprecated-radius1: false, $deprecated-radius2: false) {
-  $gradient-list: ();
-  $gradient: false;
-  $full-length: length($full);
-  $percentage: false;
-  $gradient-type: $type;
-
-  @for $i from 1 through $full-length {
-    $gradient: nth($full, $i);
-
-    @if length($gradient) == 2 {
-      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
-      $gradient-list: join($gradient-list, $color-stop, comma);
-    }
-    @else if $gradient != null {
-      @if $i == $full-length {
-        $percentage: 100%;
-      }
-      @else {
-        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
-      }
-      $color-stop: color-stop(unquote($percentage), $gradient);
-      $gradient-list: join($gradient-list, $color-stop, comma);
-    }
-  }
-
-  @if $type == radial {
-    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
-  }
-  @else if $type == linear {
-    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
-  }
-  @return $gradient;
-}
diff --git a/docs/_css/bourbon/helpers/_gradient-positions-parser.scss b/docs/_css/bourbon/helpers/_gradient-positions-parser.scss
deleted file mode 100644
index 07d30b6cf95..00000000000
--- a/docs/_css/bourbon/helpers/_gradient-positions-parser.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@function _gradient-positions-parser($gradient-type, $gradient-positions) {
-  @if $gradient-positions
-  and ($gradient-type == linear)
-  and (type-of($gradient-positions) != color) {
-    $gradient-positions: _linear-positions-parser($gradient-positions);
-  }
-  @else if $gradient-positions
-  and ($gradient-type == radial)
-  and (type-of($gradient-positions) != color) {
-    $gradient-positions: _radial-positions-parser($gradient-positions);
-  }
-  @return $gradient-positions;
-}
diff --git a/docs/_css/bourbon/helpers/_linear-positions-parser.scss b/docs/_css/bourbon/helpers/_linear-positions-parser.scss
deleted file mode 100644
index d26383edce1..00000000000
--- a/docs/_css/bourbon/helpers/_linear-positions-parser.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@function _linear-positions-parser($pos) {
-  $type: type-of(nth($pos, 1));
-  $spec: null;
-  $degree: null;
-  $side: null;
-  $corner: null;
-  $length: length($pos);
-  // Parse Side and corner positions
-  @if ($length > 1) {
-    @if nth($pos, 1) == "to" { // Newer syntax
-      $side: nth($pos, 2);
-
-      @if $length == 2 { // eg. to top
-        // Swap for backwards compatability
-        $degree: _position-flipper(nth($pos, 2));
-      }
-      @else if $length == 3 { // eg. to top left
-        $corner: nth($pos, 3);
-      }
-    }
-    @else if $length == 2 { // Older syntax ("top left")
-      $side: _position-flipper(nth($pos, 1));
-      $corner: _position-flipper(nth($pos, 2));
-    }
-
-    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
-      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
-    }
-    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
-      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
-    }
-    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
-      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
-    }
-    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
-      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
-    }
-    $spec: to $side $corner;
-  }
-  @else if $length == 1 {
-    // Swap for backwards compatability
-    @if $type == string {
-      $degree: $pos;
-      $spec: to _position-flipper($pos);
-    }
-    @else {
-      $degree: -270 - $pos; //rotate the gradient opposite from spec
-      $spec: $pos;
-    }
-  }
-  $degree: unquote($degree + ",");
-  $spec:   unquote($spec + ",");
-  @return $degree $spec;
-}
-
-@function _position-flipper($pos) {
- @return if($pos == left, right, null)
-         if($pos == right, left, null)
-         if($pos == top, bottom, null)
-         if($pos == bottom, top, null);
-}
diff --git a/docs/_css/bourbon/helpers/_radial-arg-parser.scss b/docs/_css/bourbon/helpers/_radial-arg-parser.scss
deleted file mode 100644
index 3466695bdfb..00000000000
--- a/docs/_css/bourbon/helpers/_radial-arg-parser.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
-  @each $value in $G1, $G2 {
-    $first-val: nth($value, 1);
-    $pos-type:  type-of($first-val);
-    $spec-at-index: null;
-
-    // Determine if spec was passed to mixin
-    @if type-of($value) == list {
-      $spec-at-index: if(index($value, at), index($value, at), false);
-    }
-    @if $spec-at-index {
-      @if $spec-at-index > 1 {
-        @for $i from 1 through ($spec-at-index - 1) {
-          $shape-size: $shape-size nth($value, $i);
-        }
-        @for $i from ($spec-at-index + 1) through length($value) {
-          $pos: $pos nth($value, $i);
-        }
-      }
-      @else if $spec-at-index == 1 {
-        @for $i from ($spec-at-index + 1) through length($value) {
-          $pos: $pos nth($value, $i);
-        }
-      }
-      $G1: false;
-    }
-
-    // If not spec calculate correct values
-    @else {
-      @if ($pos-type != color) or ($first-val != "transparent") {
-        @if ($pos-type == number)
-        or ($first-val == "center")
-        or ($first-val == "top")
-        or ($first-val == "right")
-        or ($first-val == "bottom")
-        or ($first-val == "left") {
-
-          $pos: $value;
-
-          @if $pos == $G1 {
-            $G1: false;
-          }
-        }
-
-        @else if
-           ($first-val == "ellipse")
-        or ($first-val == "circle")
-        or ($first-val == "closest-side")
-        or ($first-val == "closest-corner")
-        or ($first-val == "farthest-side")
-        or ($first-val == "farthest-corner")
-        or ($first-val == "contain")
-        or ($first-val == "cover") {
-
-          $shape-size: $value;
-
-          @if $value == $G1 {
-            $G1: false;
-          }
-
-          @else if $value == $G2 {
-            $G2: false;
-          }
-        }
-      }
-    }
-  }
-  @return $G1, $G2, $pos, $shape-size;
-}
diff --git a/docs/_css/bourbon/helpers/_radial-positions-parser.scss b/docs/_css/bourbon/helpers/_radial-positions-parser.scss
deleted file mode 100644
index 6a5b4777781..00000000000
--- a/docs/_css/bourbon/helpers/_radial-positions-parser.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@function _radial-positions-parser($gradient-pos) {
-  $shape-size: nth($gradient-pos, 1);
-  $pos:        nth($gradient-pos, 2);
-  $shape-size-spec: _shape-size-stripper($shape-size);
-
-  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
-             unquote(if($shape-size, "#{$shape-size},", null));
-  $pos-spec: if($pos, "at #{$pos}", null);
-
-  $spec: "#{$shape-size-spec} #{$pos-spec}";
-
-  // Add comma
-  @if ($spec != '  ') {
-    $spec: "#{$spec},"
-  }
-
-  @return $pre-spec $spec;
-}
diff --git a/docs/_css/bourbon/helpers/_render-gradients.scss b/docs/_css/bourbon/helpers/_render-gradients.scss
deleted file mode 100644
index 5765676838d..00000000000
--- a/docs/_css/bourbon/helpers/_render-gradients.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// User for linear and radial gradients within background-image or border-image properties
-
-@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
-  $pre-spec: null;
-  $spec: null;
-  $vendor-gradients: null;
-  @if $gradient-type == linear {
-    @if $gradient-positions {
-      $pre-spec: nth($gradient-positions, 1);
-      $spec:     nth($gradient-positions, 2);
-    }
-  }
-  @else if $gradient-type == radial {
-    $pre-spec: nth($gradient-positions, 1);
-    $spec:     nth($gradient-positions, 2);
-  }
-
-  @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
-  }
-  @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
-  }
-  @return $vendor-gradients;
-}
diff --git a/docs/_css/bourbon/helpers/_shape-size-stripper.scss b/docs/_css/bourbon/helpers/_shape-size-stripper.scss
deleted file mode 100644
index ee5eda42205..00000000000
--- a/docs/_css/bourbon/helpers/_shape-size-stripper.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@function _shape-size-stripper($shape-size) {
-  $shape-size-spec: null;
-  @each $value in $shape-size {
-    @if ($value == "cover") or ($value == "contain") {
-      $value: null;
-    }
-    $shape-size-spec: "#{$shape-size-spec} #{$value}";
-  }
-  @return $shape-size-spec;
-}
diff --git a/docs/_css/react.scss b/docs/_css/react.scss
deleted file mode 100644
index ce8c3da220c..00000000000
--- a/docs/_css/react.scss
+++ /dev/null
@@ -1,791 +0,0 @@
-@import 'bourbon/bourbon';
-@import '_variables';
-@import '_typography';
-@import '_solarized';
-
-@mixin code-typography {
-  font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
-  font-size: 0.8em;
-  line-height: 1.5;
-}
-
-$skinnyContentWidth: 650px;
-$contentWidth: 920px;
-$contentPadding: 20px;
-$columnWidth: 280px;
-$columnGutter: 40px;
-$twoColumnWidth: 2 * $columnWidth + $columnGutter;
-$navHeight: 50px;
-
-
-
-// basic reset
-* {
-  @include box-sizing(border-box);
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  background: $pageBg;
-}
-
-
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}
-
-
-.container {
-  padding-top: $navHeight;
-  min-width: $contentWidth + (2 * $contentPadding);
-}
-
-.wrap {
-  width: $contentWidth + (2 * $contentPadding);
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.skinnyWrap {
-  width: $skinnyContentWidth + (2 * $contentPadding);
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-hr {
-  height: 0;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #eee;
-}
-
-ul,
-li {
-  margin-left: 20px;
-}
-
-// Make header navigation linkable and on the screen. Used in documentation and
-// blog posts.
-h1, h2, h3, h4, h5, h6 {
-  .anchor {
-    margin-top: -$navHeight;
-    position: absolute;
-  }
-
-  &:hover .hash-link {
-    display: inline;
-  }
-}
-.hash-link {
-  color: $mediumTextColor;
-  display: none;
-}
-
-// Main Nav
-
-.nav-main {
-  @include clearfix;
-  background: $darkestColor;
-  color: $lightTextColor;
-  position: fixed;
-  top: 0;
-  height: $navHeight;
-  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
-  width: 100%;
-  z-index: 100;
-
-  a {
-    color: $lightColor;
-    text-decoration: none;
-  }
-
-  .nav-site {
-    float: right;
-    margin: 0;
-
-    li {
-      margin: 0;
-    }
-
-    a {
-      padding: 0 8px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      line-height: $navHeight;
-      display: inline-block;
-      height: $navHeight;
-      color: $mediumTextColor;
-
-      &:hover {
-        color: $lightTextColor;
-      }
-
-      &.active {
-        color: $lightTextColor;
-        border-bottom: 3px solid $primary;
-        background: #333;
-      }
-    }
-  }
-
-  .nav-home {
-    color: #00d8ff;
-    font-size: 24px;
-    line-height: $navHeight;
-  }
-
-  .nav-logo {
-    @include retina-image('../img/logo_small', 38px 38px);
-    vertical-align: middle;
-  }
-
-  ul {
-    display: inline;
-  }
-
-  li {
-    display: inline;
-  }
-}
-
-// Hero!
-
-.hero {
-  height: 300px;
-  // background: $darkColor url(../img/header.png) no-repeat center;
-  background: $darkColor;
-  padding-top: 50px;
-  color: $lightColor;
-  font-weight: 300;
-
-  .text {
-    font-size: 64px;
-    text-align: center;
-  }
-
-  .minitext {
-    font-size: 16px;
-    text-align: center;
-    text-transform: uppercase;
-  }
-
-  strong {
-    color: $blueColor;
-    font-weight: 400;
-  }
-}
-
-.buttons-unit {
-  margin-top: 60px;
-  text-align: center;
-
-  a {
-    color: $blueColor;
-  }
-
-  .button {
-    font-size: 24px;
-    background: $primary;
-    color: $lightTextColor;
-
-    &:active {
-      background: darken($primary, 5%);
-    }
-  }
-}
-
-// Downloads
-
-.buttons-unit.downloads {
-  margin: 30px 0;
-}
-
-// Docs Nav
-
-.nav-docs {
-  color: $darkColor;
-  font-size: 14px;
-  // position: fixed;
-  float: left;
-  width: 210px;
-
-  ul {
-    list-style: none;
-    margin: 0;
-  }
-  ul ul {
-    margin: 6px 0 0 20px;
-  }
-  li {
-    line-height: 16px;
-    margin: 0 0 6px;
-  }
-  h3 {
-    text-transform: uppercase;
-    font-size: 14px;
-  }
-  a {
-    color: $mediumestColor;
-    display: block;
-
-    &:hover {
-      text-decoration: none;
-      color: $primary;
-    }
-
-    &.active {
-      color: $primary;
-    }
-  }
-
-  .nav-docs-section {
-    border-bottom: 1px solid #ccc;
-    border-top: 1px solid #eee;
-    padding: 12px 0;
-
-    &:first-child {
-       padding-top: 0;
-       border-top: 0;
-    }
-
-    &:last-child {
-      padding-bottom: 0;
-      border-bottom: 0;
-    }
-  }
-
-}
-
-.nav-blog {
-  li {
-    margin-bottom: 5px;
-  }
-}
-
-// Home Page specifics
-
-.home-section {
-  margin: 50px 0;
-}
-
-.home-divider {
-  border-top-color: #bbb;
-  margin: 0 auto;
-  width: 400px;
-}
-
-.marketing-row {
-  @include clearfix;
-  margin: 50px 0;
-}
-
-.marketing-col {
-  float: left;
-  margin-left: 40px;
-  width: $columnWidth;
-
-  h3 {
-    color: $darkColor;
-    font-size: 24px;
-    font-weight: normal;
-    text-transform: uppercase;
-  }
-  p {
-    font-size: 16px;
-  }
-}
-
-.marketing-col:first-child {
-  margin-left: 0;
-}
-
-#examples h3, .home-presentation h3 {
-  color: $darkColor;
-  font-size: 24px;
-  font-weight: normal;
-  margin-bottom: 5px;
-}
-
-#examples {
-  p {
-    margin: 0 0 25px 0;
-    max-width: $twoColumnWidth;
-  }
-
-  .example {
-    margin-top: 60px;
-  }
-
-  #todoExample {
-    font-size: 14px;
-    ul {
-      list-style-type: square;
-      margin: 0 0 10px 0;
-    }
-    input {
-      border: 1px solid #ccc;
-      font: 14px proxima-nova, $helvetica;
-      padding: 3px;
-      width: 150px;
-    }
-    button {
-      font: 14px proxima-nova, $helvetica;
-      margin-left: 5px;
-      padding: 4px 10px;
-    }
-  }
-
-  #markdownExample {
-    textarea {
-      border: 1px solid #ccc;
-      font: 14px proxima-nova, $helvetica;
-      margin-bottom: 10px;
-      padding: 5px;
-    }
-  }
-}
-
-.home-bottom-section {
-  margin-bottom: 100px;
-}
-
-.docs-nextprev {
-  @include clearfix;
-}
-
-.docs-prev {
-  float: left;
-}
-
-.docs-next {
-  float: right;
-}
-
-footer {
-  font-size: 13px;
-  font-weight: 600;
-  margin-top: 36px;
-  margin-bottom: 18px;
-  overflow: auto;
-}
-
-section.black content {
-  padding-bottom: 18px;
-}
-
-/**
- * Blog
- */
-
-.blogContent {
-  @include clearfix;
-
-  padding-top: 20px;
-
-  blockquote {
-    padding: 5px 15px;
-    margin: 20px 0;
-    background-color: #f8f5ec;
-    border-left: 5px solid #f7ebc6;
-  }
-
-}
-
-/**
- * Docs
- */
-
-.documentationContent {
-  @include clearfix;
-
-  .subHeader {
-    font-size: 24px;
-  }
-
-
-  // H2s form documentation topic dividers. Extra space helps.
-  h2 {
-    margin-top: 30px;
-  }
-
-  padding-top: 20px;
-
-  // Make a notice box out of blockquotes in the documentation:
-  blockquote {
-      padding: 15px 30px 15px 15px;
-      margin: 20px 0;
-      background-color: rgba(204, 122, 111, 0.09999999999999998);
-      border-left: 5px solid rgba(191, 87, 73, 0.19999999999999996);
-    h4 {
-      margin-top: 0;
-    }
-    p {
-      margin-bottom: 0;
-    }
-    // Treat first child as the title - promote to H4.
-    p:first-child {
-      font-weight: bold;
-      font-size: 17.5px;
-      line-height: 20px;
-      margin-top: 0;
-      text-rendering: optimizelegibility;
-    }
-  }
-}
-
-.docs-prevnext {
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
-/* JSX Compiler */
-
-.jsxCompiler {
-  margin: 0 auto;
-  padding-top: 20px;
-  width: 1220px;
-
-  label.compiler-option {
-    display: block;
-    margin-top: 5px;
-  }
-
-  #jsxCompiler {
-    margin-top: 20px;
-  }
-
-  .playgroundPreview {
-    padding: 0;
-    width: 600px;
-
-    pre {
-      @include code-typography;
-    }
-  }
-
-  .playgroundError {
-    // The compiler view kills padding in order to render the CodeMirror code
-    // more nicely. For the error view, put a padding back
-    padding: 15px 20px;
-  }
-}
-
-/* Button */
-
-.button {
-  @include background(linear-gradient($buttonGreyTop, $buttonGreyBottom));
-  // border: 1px solid $darkestColor;
-  border-radius: 4px;
-  padding: 8px 16px;
-  font-size: 18px;
-  font-weight: 400;
-  margin: 0 12px;
-  // word-spacing: -2px;
-  // letter-spacing: 1px;
-  display: inline-block;
-  color: $lightTextColor;
-  text-decoration: none;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-}
-
-.hero {
-  .button {
-    box-shadow: 1px 3px 3px rgba(0, 0, 0, .3);
-  }
-}
-
-.button.blue {
-  @include background(linear-gradient($buttonBlueTop, $buttonBlueBottom));
-}
-
-
-/* Row */
-
-.row {
-  padding-bottom: 4px;
-}
-
-.row .span4 {
-  width: 33.33%;
-  display: table-cell;
-}
-
-.row .span8 {
-  width: 66.66%;
-  display: table-cell;
-}
-
-.row .span6 {
-  width: 50%;
-  display: table-cell;
-}
-
-
-/* Content */
-
-p {
-  margin: 10px 0;
-}
-
-.highlight {
-  padding: 10px;
-  margin-bottom: 20px;
-}
-
-figure {
-  text-align: center;
-}
-
-.inner-content {
-  float: right;
-  width: $skinnyContentWidth;
-}
-
-.nosidebar .inner-content {
-  float: none;
-  margin: 0 auto;
-}
-
-h1 {
-  // Contains .edit-page-link
-  @include clearfix;
-}
-
-.edit-page-link {
-  float: right;
-  font-size: 16px;
-  font-weight: normal;
-  line-height: 20px;
-  margin-top: 17px;
-}
-
-/* Blog */
-
-.post-list-item + .post-list-item {
-  margin-top: 60px;
-}
-
-/* CodeMirror */
-
-div.CodeMirror pre, div.CodeMirror-linenumber, code {
-  @include code-typography;
-}
-
-div.CodeMirror-linenumber:after {
-  content: '.';
-}
-
-.CodeMirror, div.CodeMirror-gutters, div.highlight {
-  border: none;
-}
-
-/* hide the cursor. Mostly used when code's in plain JS */
-.CodeMirror-readonly div.CodeMirror-cursor {
-  visibility: hidden;
-}
-
-small code,
-li code,
-p code {
-  color: #555;
-  background-color: rgba(0, 0, 0, .04);
-  padding: 1px 3px;
-}
-
-.cm-s-default span.cm-string-2 {
-  color: inherit;
-}
-
-.playground {
-  @include clearfix;
-}
-
-.playground-tab {
-  border-bottom: none !important;
-  border-radius: 3px 3px 0 0;
-  padding: 6px 8px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #c2c0bc;
-  background-color: #f1ede4;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.playgroundCode,
-.playground-tab,
-.playgroundPreview {
-  border: 1px solid rgba(16,16,16,0.1);
-}
-
-.playground-tab-active {
-  color: $darkestColor;
-}
-
-.playgroundCode {
-  border-radius: 0 3px 3px 3px;
-  float: left;
-  overflow: hidden;
-  width: $twoColumnWidth;
-}
-
-.playgroundPreview {
-  background-color: white;
-  border-radius: 3px;
-  float: right;
-  padding: 15px 20px;
-  width: $columnWidth;
-}
-
-.playgroundError {
-  color: darken($primary, 5%);
-  font-size: 15px;
-}
-
-.MarkdownEditor textarea {
-  width: 100%;
-  height: 100px
-}
-
-.hll {
-  background-color: #f7ebc6;
-  border-left: 5px solid #f7d87c;
-  display: block;
-  margin-left: -14px;
-  margin-right: -14px;
-  padding-left: 9px;
-}
-
-/* CodeMirror doesn't support <jsx> syntax. Instead of highlighting it
-   as error, just ignore it */
-.highlight .javascript .err {
-  background-color: transparent;
-  color: inherit;
-}
-
-.highlight {
-  position: relative;
-  margin-bottom: 14px;
-  padding: 30px 14px 14px;
-  border: none;
-  border-radius: 0;
-  overflow: auto;
-}
-
-
-.highlight pre {
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  background-color: transparent;
-  border: 0;
-}
-
-.highlight pre code {
-  /* Respect line-height defined in <code> styles above */
-  display: block;
-
-  /* Cancel out styles for `li code` in case we have a <pre> within an <li>. */
-  background: none;
-  padding: 0;
-}
-
-.highlight pre .lineno {
-  display: inline-block;
-  width: 22px;
-  padding-right: 5px;
-  margin-right: 10px;
-  color: #bebec5;
-  text-align: right;
-}
-
-/* Echo out a label for the example */
-
-.highlight:after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  padding: 3px 7px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #c2c0bc;
-  background-color: #f1ede4;
-  content: "Code";
-}
-
-.downloadCenter {
-  text-align: center;
-  margin-top: 20px;
-  margin-bottom: 25px;
-}
-
-.downloadSection:hover {
-  text-decoration: none !important;
-}
-
-@media screen and (max-width: 960px) {
-  .nav-main {
-    position: static;
-  }
-  .container {
-    padding-top: 0;
-  }
-}
-
-.post {
-  margin-bottom: 30px;
-}
-
-.pagination {
-  margin-bottom: 30px;
-
-  /* Trick to get the wrapper to expand to fit floating elements */
-  width: 100%;
-  overflow: hidden;
-
-  .next {
-    float: right;
-  }
-}
-
-// Twitter embeds. Need to !important because they inline margin on the iframe.
-div[data-twttr-id] iframe {
-  margin: 10px auto !important;
-}
-
-/* Acknowledgements */
-
-.three-column {
-  @include clearfix;
-}
-
-.three-column > ul {
-  float: left;
-  margin-left: 30px;
-  width: 190px;
-}
-
-.three-column > ul:first-child {
-  margin-left: 20px;
-}
diff --git a/docs/_data/nav_docs.yml b/docs/_data/nav_docs.yml
deleted file mode 100644
index 7eb71491c8d..00000000000
--- a/docs/_data/nav_docs.yml
+++ /dev/null
@@ -1,85 +0,0 @@
-- title: Quick Start
-  items:
-  - id: getting-started
-    title: Getting Started
-  - id: tutorial
-    title: Tutorial
-  - id: thinking-in-react
-    title: Thinking in React
-- title: Community Resources
-  items:
-  - id: videos
-    title: Videos
-  - id: complementary-tools
-    title: Complementary Tools
-  - id: examples
-    title: Examples
-- title: Guides
-  items:
-  - id: why-react
-    title: Why React?
-  - id: displaying-data
-    title: Displaying Data
-    subitems:
-    - id: jsx-in-depth
-      title: JSX in Depth
-    - id: jsx-gotchas
-      title: JSX Gotchas
-  - id: interactivity-and-dynamic-uis
-    title: Interactivity and Dynamic UIs
-  - id: multiple-components
-    title: Multiple Components
-  - id: reusable-components
-    title: Reusable Components
-  - id: forms
-    title: Forms
-  - id: working-with-the-browser
-    title: Working With the Browser
-    subitems:
-    - id: more-about-refs
-      title: More About Refs
-  - id: tooling-integration
-    title: Tooling Integration
-  - id: addons
-    title: Add-Ons
-    subitems:
-    - id: animation
-      title: Animation
-    - id: two-way-binding-helpers
-      title: Two-Way Binding Helpers
-    - id: class-name-manipulation
-      title: Class Name Manipulation
-    - id: test-utils
-      title: Test Utilities
-    - id: clone-with-props
-      title: Cloning Components
-    - id: update
-      title: Immutability Helpers
-    - id: pure-render-mixin
-      title: PureRenderMixin
-    - id: perf
-      title: Performance Tools
-- title: Reference
-  items:
-  - id: top-level-api
-    title: Top-Level API
-  - id: component-api
-    title: Component API
-  - id: component-specs
-    title: Component Specs and Lifecycle
-  - id: tags-and-attributes
-    title: Supported Tags and Attributes
-  - id: events
-    title: Event System
-  - id: dom-differences
-    title: DOM Differences
-  - id: special-non-dom-attributes
-    title: Special Non-DOM Attributes
-  - id: reconciliation
-    title: Reconciliation
-- title: Flux
-  items:
-  - id: flux-overview
-    title: Flux Overview
-  - id: flux-todo-list
-    title: Flux TodoMVC Tutorial
diff --git a/docs/_data/nav_tips.yml b/docs/_data/nav_tips.yml
deleted file mode 100644
index 8299f6ea399..00000000000
--- a/docs/_data/nav_tips.yml
+++ /dev/null
@@ -1,36 +0,0 @@
-- title: Tips
-  items:
-  - id: introduction
-    title: Introduction
-  - id: inline-styles
-    title: Inline Styles
-  - id: if-else-in-JSX
-    title: If-Else in JSX
-  - id: self-closing-tag
-    title: Self-Closing Tag
-  - id: maximum-number-of-jsx-root-nodes
-    title: Maximum Number of JSX Root Nodes
-  - id: style-props-value-px
-    title: Shorthand for Specifying Pixel Values in style props
-  - id: children-props-type
-    title: Type of the Children props
-  - id: controlled-input-null-value
-    title: Value of null for Controlled Input
-  - id: componentWillReceiveProps-not-triggered-after-mounting
-    title: componentWillReceiveProps Not Triggered After Mounting
-  - id: props-in-getInitialState-as-anti-pattern
-    title: Props in getInitialState Is an Anti-Pattern
-  - id: dom-event-listeners
-    title: DOM Event Listeners in a Component
-  - id: initial-ajax
-    title: Load Initial Data via AJAX
-  - id: false-in-jsx
-    title: False in JSX
-  - id: communicate-between-components
-    title: Communicate Between Components
-  - id: expose-component-functions
-    title: Expose Component Functions
-  - id: references-to-components
-    title: References to Components
-  - id: children-undefined
-    title: this.props.children undefined
diff --git a/docs/_includes/blog_post.html b/docs/_includes/blog_post.html
deleted file mode 100644
index 4fb6231c991..00000000000
--- a/docs/_includes/blog_post.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
-<p class="meta">{{ page.date | date_to_string }} by {{ page.author }}</p>
-
-<div id="post">
-{% if content != '' %}
-  {{ page.excerpt }}
-{% else %}
-  {{ page.content }}
-{% endif %}
-</div>
diff --git a/docs/_includes/nav_blog.html b/docs/_includes/nav_blog.html
deleted file mode 100644
index 75ff77e50eb..00000000000
--- a/docs/_includes/nav_blog.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="nav-docs nav-blog">
-  <div class="nav-docs-section">
-    <h3>Recent posts</h3>
-    <ul>
-      {% for post in site.posts limit:10 %}
-        <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
-      {% endfor %}
-      <li><a href="/react/blog/all.html">All posts ...</a></li>
-    </ul>
-  </div>
-</div>
diff --git a/docs/_includes/nav_docs.html b/docs/_includes/nav_docs.html
deleted file mode 100644
index a66b822bcea..00000000000
--- a/docs/_includes/nav_docs.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="nav-docs">
-  <!-- Docs Nav -->
-  {% for section in site.data.nav_docs %}
-    <div class="nav-docs-section">
-      <h3>{{ section.title }}</h3>
-      <ul>
-        {% for item in section.items %}
-          <li>
-            <a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
-              {{ item.title }}
-            </a>
-            {% if item.subitems %}
-              <ul>
-                {% for subitem in item.subitems %}
-                  <li>
-                    <a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
-                      {{ subitem.title }}
-                    </a>
-                  </li>
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endfor %}
-
-  <!-- Tips Nav -->
-  {% for section in site.data.nav_tips %}
-    <div class="nav-docs-section">
-      <h3>{{ section.title }}</h3>
-      <ul>
-        {% for item in section.items %}
-          <li>
-            <a href="/react/tips/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endfor %}
-</div>
diff --git a/docs/_js/es5-sham.min.js b/docs/_js/es5-sham.min.js
deleted file mode 100644
index 033c27a3fd8..00000000000
--- a/docs/_js/es5-sham.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}});
-//# sourceMappingURL=es5-sham.map
\ No newline at end of file
diff --git a/docs/_js/es5-shim.min.js b/docs/_js/es5-shim.min.js
deleted file mode 100644
index 50502e0548b..00000000000
--- a/docs/_js/es5-shim.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5",definition)}else{definition()}})(function(){if(parseInt("08")!==8){parseInt=function(origParseInt){var hexRegex=/^0[xX]/;return function parseIntES5(str,radix){str=String(str).trim();if(!+radix){radix=hexRegex.test(str)?16:10}return origParseInt(str,radix)}}(parseInt)}function Empty(){}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError("Function.prototype.bind called on incompatible "+target)}var args=_Array_slice_.call(arguments,1);var binder=function(){if(this instanceof bound){var result=target.apply(this,args.concat(_Array_slice_.call(arguments)));if(Object(result)===result){return result}return this}else{return target.apply(that,args.concat(_Array_slice_.call(arguments)))}};var boundLength=Math.max(0,target.length-args.length);var boundArgs=[];for(var i=0;i<boundLength;i++){boundArgs.push("$"+i)}var bound=Function("binder","return function("+boundArgs.join(",")+"){return binder.apply(this,arguments)}")(binder);if(target.prototype){Empty.prototype=target.prototype;bound.prototype=new Empty;Empty.prototype=null}return bound}}var call=Function.prototype.call;var prototypeOfArray=Array.prototype;var prototypeOfObject=Object.prototype;var _Array_slice_=prototypeOfArray.slice;var _toString=call.bind(prototypeOfObject.toString);var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if([1,2].splice(0).length!=2){var array_splice=Array.prototype.splice;var array_push=Array.prototype.push;var array_unshift=Array.prototype.unshift;if(function(){function makeArray(l){var a=[];while(l--){a.unshift(l)}return a}var array=[],lengthBefore;array.splice.bind(array,0,0).apply(null,makeArray(20));array.splice.bind(array,0,0).apply(null,makeArray(26));lengthBefore=array.length;array.splice(5,0,"XXX");if(lengthBefore+1==array.length){return true}}()){Array.prototype.splice=function(start,deleteCount){if(!arguments.length){return[]}else{return array_splice.apply(this,[start===void 0?0:start,deleteCount===void 0?this.length-start:deleteCount].concat(_Array_slice_.call(arguments,2)))}}}else{Array.prototype.splice=function(start,deleteCount){var result,args=_Array_slice_.call(arguments,2),addElementsCount=args.length;if(!arguments.length){return[]}if(start===void 0){start=0}if(deleteCount===void 0){deleteCount=this.length-start}if(addElementsCount>0){if(deleteCount<=0){if(start==this.length){array_push.apply(this,args);return[]}if(start==0){array_unshift.apply(this,args);return[]}}result=_Array_slice_.call(this,start,start+deleteCount);args.push.apply(args,_Array_slice_.call(this,start+deleteCount,this.length));args.unshift.apply(args,_Array_slice_.call(this,0,start));args.unshift(0,this.length);array_splice.apply(this,args);return result}return array_splice.call(this,start,deleteCount)}}}if([].unshift(0)!=1){var array_unshift=Array.prototype.unshift;Array.prototype.unshift=function(){array_unshift.apply(this,arguments);return this.length}}if(!Array.isArray){Array.isArray=function isArray(obj){return _toString(obj)=="[object Array]"}}var boxedString=Object("a"),splitString=boxedString[0]!="a"||!(0 in boxedString);var boxedForEach=true;if(Array.prototype.forEach){Array.prototype.forEach.call("foo",function(item,i,obj){if(typeof obj!=="object")boxedForEach=false})}if(!Array.prototype.forEach||!boxedForEach){Array.prototype.forEach=function forEach(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,thisp=arguments[1],i=-1,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError}while(++i<length){if(i in self){fun.call(thisp,self[i],i,object)}}}}if(!Array.prototype.map){Array.prototype.map=function map(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,result=Array(length),thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self)result[i]=fun.call(thisp,self[i],i,object)}return result}}if(!Array.prototype.filter){Array.prototype.filter=function filter(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,result=[],value,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self){value=self[i];if(fun.call(thisp,value,i,object)){result.push(value)}}}return result}}if(!Array.prototype.every){Array.prototype.every=function every(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self&&!fun.call(thisp,self[i],i,object)){return false}}return true}}if(!Array.prototype.some){Array.prototype.some=function some(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self&&fun.call(thisp,self[i],i,object)){return true}}return false}}if(!Array.prototype.reduce){Array.prototype.reduce=function reduce(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduce of empty array with no initial value")}var i=0;var result;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i++];break}if(++i>=length){throw new TypeError("reduce of empty array with no initial value")}}while(true)}for(;i<length;i++){if(i in self){result=fun.call(void 0,result,self[i],i,object)}}return result}}if(!Array.prototype.reduceRight){Array.prototype.reduceRight=function reduceRight(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduceRight of empty array with no initial value")}var result,i=length-1;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i--];break}if(--i<0){throw new TypeError("reduceRight of empty array with no initial value")}}while(true)}if(i<0){return result}do{if(i in this){result=fun.call(void 0,result,self[i],i,object)}}while(i--);return result}}if(!Array.prototype.indexOf||[0,1].indexOf(1,2)!=-1){Array.prototype.indexOf=function indexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=0;if(arguments.length>1){i=toInteger(arguments[1])}i=i>=0?i:Math.max(0,length+i);for(;i<length;i++){if(i in self&&self[i]===sought){return i}}return-1}}if(!Array.prototype.lastIndexOf||[0,1].lastIndexOf(0,-3)!=-1){Array.prototype.lastIndexOf=function lastIndexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=length-1;if(arguments.length>1){i=Math.min(i,toInteger(arguments[1]))}i=i>=0?i:length-Math.abs(i);for(;i>=0;i--){if(i in self&&sought===self[i]){return i}}return-1}}if(!Object.keys){var hasDontEnumBug=true,dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],dontEnumsLength=dontEnums.length;for(var key in{toString:null}){hasDontEnumBug=false}Object.keys=function keys(object){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError("Object.keys called on a non-object")}var keys=[];for(var name in object){if(owns(object,name)){keys.push(name)}}if(hasDontEnumBug){for(var i=0,ii=dontEnumsLength;i<ii;i++){var dontEnum=dontEnums[i];if(owns(object,dontEnum)){keys.push(dontEnum)}}}return keys}}var negativeDate=-621987552e5,negativeYearString="-000001";if(!Date.prototype.toISOString||new Date(negativeDate).toISOString().indexOf(negativeYearString)===-1){Date.prototype.toISOString=function toISOString(){var result,length,value,year,month;if(!isFinite(this)){throw new RangeError("Date.prototype.toISOString called on non-finite value.")}year=this.getUTCFullYear();month=this.getUTCMonth();year+=Math.floor(month/12);month=(month%12+12)%12;result=[month+1,this.getUTCDate(),this.getUTCHours(),this.getUTCMinutes(),this.getUTCSeconds()];year=(year<0?"-":year>9999?"+":"")+("00000"+Math.abs(year)).slice(0<=year&&year<=9999?-4:-6);length=result.length;while(length--){value=result[length];if(value<10){result[length]="0"+value}}return year+"-"+result.slice(0,2).join("-")+"T"+result.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+"Z"}}var dateToJSONIsSupported=false;try{dateToJSONIsSupported=Date.prototype.toJSON&&new Date(NaN).toJSON()===null&&new Date(negativeDate).toJSON().indexOf(negativeYearString)!==-1&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(e){}if(!dateToJSONIsSupported){Date.prototype.toJSON=function toJSON(key){var o=Object(this),tv=toPrimitive(o),toISO;if(typeof tv==="number"&&!isFinite(tv)){return null}toISO=o.toISOString;if(typeof toISO!="function"){throw new TypeError("toISOString property is not callable")}return toISO.call(o)}}if(!Date.parse||"Date.parse is buggy"){Date=function(NativeDate){function Date(Y,M,D,h,m,s,ms){var length=arguments.length;if(this instanceof NativeDate){var date=length==1&&String(Y)===Y?new NativeDate(Date.parse(Y)):length>=7?new NativeDate(Y,M,D,h,m,s,ms):length>=6?new NativeDate(Y,M,D,h,m,s):length>=5?new NativeDate(Y,M,D,h,m):length>=4?new NativeDate(Y,M,D,h):length>=3?new NativeDate(Y,M,D):length>=2?new NativeDate(Y,M):length>=1?new NativeDate(Y):new NativeDate;date.constructor=Date;return date}return NativeDate.apply(this,arguments)}var isoDateExpression=new RegExp("^"+"(\\d{4}|[+-]\\d{6})"+"(?:-(\\d{2})"+"(?:-(\\d{2})"+"(?:"+"T(\\d{2})"+":(\\d{2})"+"(?:"+":(\\d{2})"+"(?:(\\.\\d{1,}))?"+")?"+"("+"Z|"+"(?:"+"([-+])"+"(\\d{2})"+":(\\d{2})"+")"+")?)?)?)?"+"$");var months=[0,31,59,90,120,151,181,212,243,273,304,334,365];function dayFromMonth(year,month){var t=month>1?1:0;return months[month]+Math.floor((year-1969+t)/4)-Math.floor((year-1901+t)/100)+Math.floor((year-1601+t)/400)+365*(year-1970)}function toUTC(t){return Number(new NativeDate(1970,0,1,0,0,0,t))}for(var key in NativeDate){Date[key]=NativeDate[key]}Date.now=NativeDate.now;Date.UTC=NativeDate.UTC;Date.prototype=NativeDate.prototype;Date.prototype.constructor=Date;Date.parse=function parse(string){var match=isoDateExpression.exec(string);if(match){var year=Number(match[1]),month=Number(match[2]||1)-1,day=Number(match[3]||1)-1,hour=Number(match[4]||0),minute=Number(match[5]||0),second=Number(match[6]||0),millisecond=Math.floor(Number(match[7]||0)*1e3),isLocalTime=Boolean(match[4]&&!match[8]),signOffset=match[9]==="-"?1:-1,hourOffset=Number(match[10]||0),minuteOffset=Number(match[11]||0),result;if(hour<(minute>0||second>0||millisecond>0?24:25)&&minute<60&&second<60&&millisecond<1e3&&month>-1&&month<12&&hourOffset<24&&minuteOffset<60&&day>-1&&day<dayFromMonth(year,month+1)-dayFromMonth(year,month)){result=((dayFromMonth(year,month)+day)*24+hour+hourOffset*signOffset)*60;result=((result+minute+minuteOffset*signOffset)*60+second)*1e3+millisecond;if(isLocalTime){result=toUTC(result)}if(-864e13<=result&&result<=864e13){return result}}return NaN}return NativeDate.parse.apply(this,arguments)};return Date}(Date)}if(!Date.now){Date.now=function now(){return(new Date).getTime()}}if(!Number.prototype.toFixed||8e-5.toFixed(3)!=="0.000"||.9.toFixed(0)==="0"||1.255.toFixed(2)!=="1.25"||0xde0b6b3a7640080.toFixed(0)!=="1000000000000000128"){(function(){var base,size,data,i;base=1e7;size=6;data=[0,0,0,0,0,0];function multiply(n,c){var i=-1;while(++i<size){c+=n*data[i];data[i]=c%base;c=Math.floor(c/base)}}function divide(n){var i=size,c=0;while(--i>=0){c+=data[i];data[i]=Math.floor(c/n);c=c%n*base}}function toString(){var i=size;var s="";while(--i>=0){if(s!==""||i===0||data[i]!==0){var t=String(data[i]);if(s===""){s=t}else{s+="0000000".slice(0,7-t.length)+t}}}return s}function pow(x,n,acc){return n===0?acc:n%2===1?pow(x,n-1,acc*x):pow(x*x,n/2,acc)}function log(x){var n=0;while(x>=4096){n+=12;x/=4096}while(x>=2){n+=1;x/=2}return n}Number.prototype.toFixed=function(fractionDigits){var f,x,s,m,e,z,j,k;f=Number(fractionDigits);f=f!==f?0:Math.floor(f);if(f<0||f>20){throw new RangeError("Number.toFixed called with invalid number of decimals")}x=Number(this);if(x!==x){return"NaN"}if(x<=-1e21||x>=1e21){return String(x)}s="";if(x<0){s="-";x=-x}m="0";if(x>1e-21){e=log(x*pow(2,69,1))-69;z=e<0?x*pow(2,-e,1):x/pow(2,e,1);z*=4503599627370496;e=52-e;if(e>0){multiply(0,z);j=f;while(j>=7){multiply(1e7,0);j-=7}multiply(pow(10,j,1),0);j=e-1;while(j>=23){divide(1<<23);j-=23}divide(1<<j);multiply(1,1);divide(2);m=toString()}else{multiply(0,z);multiply(1<<-e,0);m=toString()+"0.00000000000000000000".slice(2,2+f)}}if(f>0){k=m.length;if(k<=f){m=s+"0.0000000000000000000".slice(0,f-k+2)+m}else{m=s+m.slice(0,k-f)+"."+m.slice(k-f)}}else{m=s+m}return m}})()}var string_split=String.prototype.split;if("ab".split(/(?:ab)*/).length!==2||".".split(/(.?)(.?)/).length!==4||"tesst".split(/(s)*/)[1]==="t"||"".split(/.?/).length||".".split(/()()/).length>1){(function(){var compliantExecNpcg=/()??/.exec("")[1]===void 0;String.prototype.split=function(separator,limit){var string=this;if(separator===void 0&&limit===0)return[];if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return string_split.apply(this,arguments)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;string+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===void 0?-1>>>0:limit>>>0;while(match=separator.exec(string)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(string.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i<arguments.length-2;i++){if(arguments[i]===void 0){match[i]=void 0}}})}if(match.length>1&&match.index<string.length){Array.prototype.push.apply(output,match.slice(1))}lastLength=match[0].length;lastLastIndex=lastIndex;if(output.length>=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===string.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(string.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output}})()}else if("0".split(void 0,0).length){String.prototype.split=function(separator,limit){if(separator===void 0&&limit===0)return[];return string_split.apply(this,arguments)}}if("".substr&&"0b".substr(-1)!=="b"){var string_substr=String.prototype.substr;String.prototype.substr=function(start,length){return string_substr.call(this,start<0?(start=this.length+start)<0?0:start:start,length)}}var ws="	\n\f\r \xa0\u1680\u180e\u2000\u2001\u2002\u2003"+"\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028"+"\u2029\ufeff";if(!String.prototype.trim||ws.trim()){ws="["+ws+"]";var trimBeginRegexp=new RegExp("^"+ws+ws+"*"),trimEndRegexp=new RegExp(ws+ws+"*$");String.prototype.trim=function trim(){if(this===void 0||this===null){throw new TypeError("can't convert "+this+" to object")}return String(this).replace(trimBeginRegexp,"").replace(trimEndRegexp,"")}}function toInteger(n){n=+n;if(n!==n){n=0}else if(n!==0&&n!==1/0&&n!==-(1/0)){n=(n>0||-1)*Math.floor(Math.abs(n))}return n}function isPrimitive(input){var type=typeof input;return input===null||type==="undefined"||type==="boolean"||type==="number"||type==="string"}function toPrimitive(input){var val,valueOf,toString;if(isPrimitive(input)){return input}valueOf=input.valueOf;if(typeof valueOf==="function"){val=valueOf.call(input);if(isPrimitive(val)){return val}}toString=input.toString;if(typeof toString==="function"){val=toString.call(input);if(isPrimitive(val)){return val}}throw new TypeError}var toObject=function(o){if(o==null){throw new TypeError("can't convert "+o+" to object")}return Object(o)}});
-//# sourceMappingURL=es5-shim.map
\ No newline at end of file
diff --git a/docs/_js/examples/hello.js b/docs/_js/examples/hello.js
deleted file mode 100644
index 040a04ac45c..00000000000
--- a/docs/_js/examples/hello.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-var HELLO_COMPONENT = "\
-/** @jsx React.DOM */\n\
-var HelloMessage = React.createClass({\n\
-  render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
-  }\n\
-});\n\
-\n\
-React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
-";
-
-React.renderComponent(
-  <ReactPlayground codeText={HELLO_COMPONENT} />,
-  document.getElementById('helloExample')
-);
diff --git a/docs/_js/examples/markdown.js b/docs/_js/examples/markdown.js
deleted file mode 100644
index 7ea69a61477..00000000000
--- a/docs/_js/examples/markdown.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-var MARKDOWN_COMPONENT = "\
-/** @jsx React.DOM */\n\
-\n\
-var converter = new Showdown.converter();\n\
-\n\
-var MarkdownEditor = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {value: 'Type some *markdown* here!'};\n\
-  },\n\
-  handleChange: function() {\n\
-    this.setState({value: this.refs.textarea.getDOMNode().value});\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div className=\"MarkdownEditor\">\n\
-        <h3>Input</h3>\n\
-        <textarea\n\
-          onChange={this.handleChange}\n\
-          ref=\"textarea\"\n\
-          defaultValue={this.state.value} />\n\
-        <h3>Output</h3>\n\
-        <div\n\
-          className=\"content\"\n\
-          dangerouslySetInnerHTML={{\n\
-            __html: converter.makeHtml(this.state.value)\n\
-          }}\n\
-        />\n\
-      </div>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
-React.renderComponent(<MarkdownEditor />, mountNode);\
-";
-
-React.renderComponent(
-  <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
-  document.getElementById('markdownExample')
-);
diff --git a/docs/_js/examples/timer.js b/docs/_js/examples/timer.js
deleted file mode 100644
index 00e60f95912..00000000000
--- a/docs/_js/examples/timer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-var TIMER_COMPONENT = "\
-/** @jsx React.DOM */\n\
-var Timer = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {secondsElapsed: 0};\n\
-  },\n\
-  tick: function() {\n\
-    this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
-  },\n\
-  componentDidMount: function() {\n\
-    this.interval = setInterval(this.tick, 1000);\n\
-  },\n\
-  componentWillUnmount: function() {\n\
-    clearInterval(this.interval);\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
-React.renderComponent(<Timer />, mountNode);\
-";
-
-React.renderComponent(
-  <ReactPlayground codeText={TIMER_COMPONENT} />,
-  document.getElementById('timerExample')
-);
diff --git a/docs/_js/examples/todo.js b/docs/_js/examples/todo.js
deleted file mode 100644
index ebc08d5f50a..00000000000
--- a/docs/_js/examples/todo.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-var TODO_COMPONENT = "\
-/** @jsx React.DOM */\n\
-var TodoList = React.createClass({\n\
-  render: function() {\n\
-    var createItem = function(itemText) {\n\
-      return <li>{itemText}</li>;\n\
-    };\n\
-    return <ul>{this.props.items.map(createItem)}</ul>;\n\
-  }\n\
-});\n\
-var TodoApp = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {items: [], text: ''};\n\
-  },\n\
-  onChange: function(e) {\n\
-    this.setState({text: e.target.value});\n\
-  },\n\
-  handleSubmit: function(e) {\n\
-    e.preventDefault();\n\
-    var nextItems = this.state.items.concat([this.state.text]);\n\
-    var nextText = '';\n\
-    this.setState({items: nextItems, text: nextText});\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div>\n\
-        <h3>TODO</h3>\n\
-        <TodoList items={this.state.items} />\n\
-        <form onSubmit={this.handleSubmit}>\n\
-          <input onChange={this.onChange} value={this.state.text} />\n\
-          <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
-        </form>\n\
-      </div>\n\
-    );\n\
-  }\n\
-});\n\
-React.renderComponent(<TodoApp />, mountNode);\
-";
-
-React.renderComponent(
-  <ReactPlayground codeText={TODO_COMPONENT} />,
-  document.getElementById('todoExample')
-);
diff --git a/docs/_js/html-jsx-lib.js b/docs/_js/html-jsx-lib.js
deleted file mode 100644
index 02b36bcf1f8..00000000000
--- a/docs/_js/html-jsx-lib.js
+++ /dev/null
@@ -1,482 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * This is a very simple HTML to JSX converter. It turns out that browsers 
- * have good HTML parsers (who would have thought?) so we utilise this by 
- * inserting the HTML into a temporary DOM node, and then do a breadth-first
- * traversal of the resulting DOM tree.
- */
-;(function(global) {
-  'use strict';
-  
-  // https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
-  var NODE_TYPE = {
-    ELEMENT: 1,
-    TEXT: 3,
-    COMMENT: 8
-  };
-  var ATTRIBUTE_MAPPING = {
-    'for': 'htmlFor',
-    'class': 'className'
-  };
-
-  /**
-   * Repeats a string a certain number of times.
-   * Also: the future is bright and consists of native string repetition:
-   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
-   *
-   * @param {string} string  String to repeat
-   * @param {number} times   Number of times to repeat string. Integer.
-   * @see http://jsperf.com/string-repeater/2 
-   */
-  function repeatString(string, times) {
-    if (times === 1) {
-      return string;
-    }
-    if (times < 0) { throw new Error(); }
-    var repeated = '';
-    while (times) {
-      if (times & 1) {
-        repeated += string;
-      }
-      if (times >>= 1) {
-        string += string;
-      }
-    }
-    return repeated;
-  }
-
-  /**
-   * Determine if the string ends with the specified substring.
-   *
-   * @param {string} haystack String to search in
-   * @param {string} needle   String to search for
-   * @return {boolean}
-   */
-  function endsWith(haystack, needle) {
-    return haystack.slice(-needle.length) === needle;
-  }
-
-  /**
-   * Trim the specified substring off the string. If the string does not end 
-   * with the specified substring, this is a no-op.
-   *
-   * @param {string} haystack String to search in
-   * @param {string} needle   String to search for
-   * @return {string}
-   */
-  function trimEnd(haystack, needle) {
-    return endsWith(haystack, needle)
-      ? haystack.slice(0, -needle.length)
-      : haystack;
-  }
-
-  /**
-   * Convert a hyphenated string to camelCase.
-   */
-  function hyphenToCamelCase(string) {
-    return string.replace(/-(.)/g, function(match, chr) {
-      return chr.toUpperCase();
-    });
-  }
-
-  /**
-   * Determines if the specified string consists entirely of whitespace.
-   */
-  function isEmpty(string) {
-     return !/[^\s]/.test(string);
-  }
-
-  /**
-   * Determines if the specified string consists entirely of numeric characters.
-   */
-  function isNumeric(input) {
-    return input !== undefined 
-      && input !== null 
-      && (typeof input === 'number' || parseInt(input, 10) == input);
-  }
-
-  var HTMLtoJSX = function(config) {
-    this.config = config || {};
-
-    if (this.config.createClass === undefined) {
-      this.config.createClass = true;
-    }
-    if (!this.config.indent) {
-      this.config.indent = '  ';  
-    }
-    if (!this.config.outputClassName) {
-      this.config.outputClassName = 'NewComponent';
-    }
-  };
-  HTMLtoJSX.prototype = {
-    /**
-     * Reset the internal state of the converter
-     */
-    reset: function() {
-      this.output = '';
-      this.level = 0;
-    },
-    /**
-     * Main entry point to the converter. Given the specified HTML, returns a
-     * JSX object representing it.
-     * @param {string} html HTML to convert
-     * @return {string} JSX
-     */
-    convert: function(html) {
-      this.reset();
-
-      // It turns out browsers have good HTML parsers (imagine that). 
-      // Let's take advantage of it.
-      var containerEl = document.createElement('div');
-      containerEl.innerHTML = '\n' + this._cleanInput(html) + '\n';
-
-      if (this.config.createClass) {
-        if (this.config.outputClassName) {
-          this.output = 'var ' + this.config.outputClassName + ' = React.createClass({\n';
-        } else {
-          this.output = 'React.createClass({\n';
-        }
-        this.output += this.config.indent + 'render: function() {' + "\n";
-        this.output += this.config.indent + this.config.indent + 'return (\n';
-      }
-
-      if (this._onlyOneTopLevel(containerEl)) {
-        // Only one top-level element, the component can return it directly
-        // No need to actually visit the container element
-        this._traverse(containerEl);
-      } else {
-        // More than one top-level element, need to wrap the whole thing in a 
-        // container.
-        this.output += this.config.indent + this.config.indent + this.config.indent;
-        this.level++;
-        this._visit(containerEl);
-      }
-      this.output = this.output.trim() + '\n';
-      if (this.config.createClass) {
-        this.output += this.config.indent + this.config.indent + ');\n';
-        this.output += this.config.indent + '}\n';
-        this.output += '});';
-      }
-      return this.output;
-    },
-
-    /**
-     * Cleans up the specified HTML so it's in a format acceptable for 
-     * converting.
-     *
-     * @param {string} html HTML to clean
-     * @return {string} Cleaned HTML
-     */
-    _cleanInput: function(html) {
-      // Remove unnecessary whitespace
-      html = html.trim();
-      // Ugly method to strip script tags. They can wreak havoc on the DOM nodes
-      // so let's not even put them in the DOM.
-      html = html.replace(/<script(.*?)<\/script>/g, '');
-      return html;
-    },
-
-    /**
-     * Determines if there's only one top-level node in the DOM tree. That is,
-     * all the HTML is wrapped by a single HTML tag.
-     *
-     * @param {DOMElement} containerEl Container element
-     * @return {boolean}
-     */
-    _onlyOneTopLevel: function(containerEl) {
-      // Only a single child element
-      if (
-        containerEl.childNodes.length === 1 
-        && containerEl.childNodes[0].nodeType === NODE_TYPE.ELEMENT
-      ) {
-        return true;
-      }
-      // Only one element, and all other children are whitespace
-      var foundElement = false;
-      for (var i = 0, count = containerEl.childNodes.length; i < count; i++) {
-        var child = containerEl.childNodes[i];
-        if (child.nodeType === NODE_TYPE.ELEMENT) {
-          if (foundElement) {
-            // Encountered an element after already encountering another one
-            // Therefore, more than one element at root level
-            return false;
-          } else {
-            foundElement = true;
-          }
-        } else if (child.nodeType === NODE_TYPE.TEXT && !isEmpty(child.textContent)) {
-          // Contains text content
-          return false;
-        }
-      }
-      return true;
-    },
-
-    /**
-     * Gets a newline followed by the correct indentation for the current
-     * nesting level
-     *
-     * @return {string}
-     */
-    _getIndentedNewline: function() {
-      return '\n' + repeatString(this.config.indent, this.level + 2);
-    },
-
-    /**
-     * Handles processing the specified node
-     * 
-     * @param {Node} node
-     */
-    _visit: function(node) {
-      this._beginVisit(node);
-      this._traverse(node);
-      this._endVisit(node);
-    },
-
-    /**
-     * Traverses all the children of the specified node
-     *
-     * @param {Node} node
-     */
-    _traverse: function(node) {
-      this.level++;
-      for (var i = 0, count = node.childNodes.length; i < count; i++) {
-        this._visit(node.childNodes[i]);
-      }
-      this.level--;
-    },
-
-    /**
-     * Handle pre-visit behaviour for the specified node.
-     *
-     * @param {Node} node
-     */
-    _beginVisit: function(node) {
-      switch (node.nodeType) {
-        case NODE_TYPE.ELEMENT:
-          this._beginVisitElement(node);
-          break;
-
-        case NODE_TYPE.TEXT:
-          this._visitText(node);
-          break;
-
-        case NODE_TYPE.COMMENT:
-          this._visitComment(node);
-          break;
-
-        default:
-          console.warn('Unrecognised node type: ' + node.nodeType);
-      }
-    },
-
-    /**
-     * Handles post-visit behaviour for the specified node.
-     *
-     * @param {Node} node
-     */
-    _endVisit: function(node) {
-      switch (node.nodeType) {
-        case NODE_TYPE.ELEMENT:
-          this._endVisitElement(node);
-          break;
-        // No ending tags required for these types
-        case NODE_TYPE.TEXT:
-        case NODE_TYPE.COMMENT:
-          break;
-      }
-    },
-
-    /**
-     * Handles pre-visit behaviour for the specified element node
-     *
-     * @param {DOMElement} node
-     */
-    _beginVisitElement: function(node) {
-      var tagName = node.tagName.toLowerCase();
-      var attributes = [];
-      for (var i = 0, count = node.attributes.length; i < count; i++) {
-        attributes.push(this._getElementAttribute(node, node.attributes[i]));
-      }
-
-      this.output += '<' + tagName;
-      if (attributes.length > 0) {
-        this.output += ' ' + attributes.join(' ');
-      }
-      if (node.firstChild) {
-        this.output += '>';
-      }
-    },
-
-    /**
-     * Handles post-visit behaviour for the specified element node
-     *
-     * @param {Node} node
-     */
-    _endVisitElement: function(node) {
-      // De-indent a bit
-      // TODO: It's inefficient to do it this way :/
-      this.output = trimEnd(this.output, this.config.indent);
-      if (node.firstChild) {
-        this.output += '</' + node.tagName.toLowerCase() + '>';
-      } else {
-        this.output += ' />';
-      }
-    },
-
-    /**
-     * Handles processing of the specified text node
-     *
-     * @param {TextNode} node
-     */
-    _visitText: function(node) {
-      var text = node.textContent;
-      // If there's a newline in the text, adjust the indent level
-      if (text.indexOf('\n') > -1) {
-        text = node.textContent.replace(/\n\s*/g, this._getIndentedNewline());
-      }
-      this.output += text;
-    },
-
-    /**
-     * Handles processing of the specified text node
-     *
-     * @param {Text} node
-     */
-    _visitComment: function(node) {
-      // Do not render the comment
-      // Since we remove comments, we also need to remove the next line break so we
-      // don't end up with extra whitespace after every comment
-      //if (node.nextSibling && node.nextSibling.nodeType === NODE_TYPE.TEXT) {
-      //  node.nextSibling.textContent = node.nextSibling.textContent.replace(/\n\s*/, '');
-      //}
-      this.output += '{/*' + node.textContent.replace('*/', '* /') + '*/}';
-    },
-
-    /**
-     * Gets a JSX formatted version of the specified attribute from the node
-     *
-     * @param {DOMElement} node
-     * @param {object}     attribute
-     * @return {string}
-     */
-    _getElementAttribute: function(node, attribute) {
-      switch (attribute.name) {
-        case 'style':
-          return this._getStyleAttribute(attribute.value);
-        default:
-          var name = ATTRIBUTE_MAPPING[attribute.name] || attribute.name;
-          var result = name + '=';
-          // Numeric values should be output as {123} not "123"
-          if (isNumeric(attribute.value)) {
-            result += '{' + attribute.value + '}';
-          } else {
-            result += '"' + attribute.value.replace('"', '&quot;') + '"';
-          }
-          return result;
-      }
-    },
-
-    /**
-     * Gets a JSX formatted version of the specified element styles
-     *
-     * @param {string} styles
-     * @return {string}
-     */
-    _getStyleAttribute: function(styles) {
-      var jsxStyles = new StyleParser(styles).toJSXString();
-      return 'style={{' + jsxStyles + '}}';
-    }
-  };
-
-  /**
-   * Handles parsing of inline styles
-   * 
-   * @param {string} rawStyle Raw style attribute
-   * @constructor
-   */
-  var StyleParser = function(rawStyle) {
-    this.parse(rawStyle);
-  };
-  StyleParser.prototype = {
-    /**
-     * Parse the specified inline style attribute value
-     * @param {string} rawStyle Raw style attribute
-     */
-    parse: function(rawStyle) {
-      this.styles = {};
-      rawStyle.split(';').forEach(function(style) {
-        style = style.trim();
-        var firstColon = style.indexOf(':');
-        var key = style.substr(0, firstColon);
-        var value = style.substr(firstColon + 1).trim();
-        if (key !== '') {
-          this.styles[key] = value;  
-        }
-      }, this);
-    },
-
-    /**
-     * Convert the style information represented by this parser into a JSX
-     * string
-     *
-     * @return {string}
-     */
-    toJSXString: function() {
-      var output = [];
-      for (var key in this.styles) {
-        if (!this.styles.hasOwnProperty(key)) {
-          continue;
-        }
-        output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(this.styles[key]));
-      }
-      return output.join(', ');
-    },
-
-    /**
-     * Convert the CSS style key to a JSX style key
-     *
-     * @param {string} key CSS style key
-     * @return {string} JSX style key
-     */
-    toJSXKey: function(key) {
-      return hyphenToCamelCase(key);
-    },
-
-    /**
-     * Convert the CSS style value to a JSX style value
-     *
-     * @param {string} value CSS style value
-     * @return {string} JSX style value
-     */
-    toJSXValue: function(value) {
-      if (isNumeric(value)) {
-        // If numeric, no quotes
-        return value;
-      } else if (endsWith(value, 'px')) {
-        // "500px" -> 500
-        return trimEnd(value, 'px');
-      } else {
-        // Proably a string, wrap it in quotes
-        return '\'' + value.replace(/'/g, '"') + '\'';
-      }
-    }
-  };
-
-  // Expose public API
-  global.HTMLtoJSX = HTMLtoJSX;
-}(window));
\ No newline at end of file
diff --git a/docs/_js/html-jsx.js b/docs/_js/html-jsx.js
deleted file mode 100644
index ea9b9d698ce..00000000000
--- a/docs/_js/html-jsx.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-/**
- * This is a web interface for the HTML to JSX converter contained in 
- * `html-jsx-lib.js`.
- */
-;(function() {
-
-var HELLO_COMPONENT = "\
-<!-- Hello world -->\n\
-<div class=\"awesome\" style=\"border: 1px solid red\">\n\
-  <label for=\"name\">Enter your name: </label>\n\
-  <input type=\"text\" id=\"name\" />\n\
-</div>\n\
-<p>Enter your HTML here</p>\
-";
-
-  var HTMLtoJSXComponent = React.createClass({
-    getInitialState: function() {
-      return {
-        outputClassName: 'NewComponent',
-        createClass: true
-      };
-    },
-    onReactClassNameChange: function(evt) {
-      this.setState({ outputClassName: evt.target.value });
-    },
-    onCreateClassChange: function(evt) {
-      this.setState({ createClass: evt.target.checked });
-    },
-    setInput: function(input) {
-      this.setState({ input: input });
-      this.convertToJsx();
-    },
-    convertToJSX: function(input) {
-      var converter = new HTMLtoJSX({
-        outputClassName: this.state.outputClassName,
-        createClass: this.state.createClass
-      });
-      return converter.convert(input);
-    },
-  	render: function() {
-      return (
-        <div>
-          <div id="options">
-            <label>
-              <input
-                type="checkbox"
-                checked={this.state.createClass}
-                onChange={this.onCreateClassChange} />
-                Create class
-            </label>
-            <label style={{display: this.state.createClass ? '' : 'none'}}>
-              ·
-              Class name:
-              <input
-                type="text"
-                value={this.state.outputClassName}
-                onChange={this.onReactClassNameChange} />
-            </label>
-          </div>
-          <ReactPlayground
-            codeText={HELLO_COMPONENT}
-            renderCode={true}
-            transformer={this.convertToJSX}
-            />
-        </div>
-      );
-    }
-  });
-
-  React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
-}());
\ No newline at end of file
diff --git a/docs/_js/html5shiv.min.js b/docs/_js/html5shiv.min.js
deleted file mode 100644
index dcf351c867e..00000000000
--- a/docs/_js/html5shiv.min.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
-*/
-(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
-a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
-c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
-"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
-for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
diff --git a/docs/_js/jsx-compiler.js b/docs/_js/jsx-compiler.js
deleted file mode 100644
index 99cf318ce76..00000000000
--- a/docs/_js/jsx-compiler.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-var HELLO_COMPONENT = "\
-/** @jsx React.DOM */\n\
-var HelloMessage = React.createClass({\n\
-  render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
-  }\n\
-});\n\
-\n\
-React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
-";
-
-function transformer(harmony, code) {
-  return JSXTransformer.transform(code, {harmony: harmony}).code;
-}
-
-var CompilerPlayground = React.createClass({
-  getInitialState: function() {
-    return {harmony: false};
-  },
-  handleHarmonyChange: function(e) {
-    this.setState({harmony: e.target.checked});
-  },
-  render: function() {
-    return (
-      <div>
-        <ReactPlayground
-          codeText={HELLO_COMPONENT}
-          renderCode={true}
-          transformer={transformer.bind(null, this.state.harmony)}
-          showCompiledJSTab={false}
-        />
-        <label className="compiler-option">
-          <input
-            type="checkbox"
-            onChange={this.handleHarmonyChange}
-            checked={this.state.harmony} />{' '}
-          Enable ES6 transforms (<code>--harmony</code>)
-        </label>
-      </div>
-    );
-  },
-});
-React.renderComponent(
-  <CompilerPlayground />,
-  document.getElementById('jsxCompiler')
-);
diff --git a/docs/_js/live_editor.js b/docs/_js/live_editor.js
deleted file mode 100644
index 477db9c8565..00000000000
--- a/docs/_js/live_editor.js
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-
-var IS_MOBILE = (
-  navigator.userAgent.match(/Android/i)
-    || navigator.userAgent.match(/webOS/i)
-    || navigator.userAgent.match(/iPhone/i)
-    || navigator.userAgent.match(/iPad/i)
-    || navigator.userAgent.match(/iPod/i)
-    || navigator.userAgent.match(/BlackBerry/i)
-    || navigator.userAgent.match(/Windows Phone/i)
-);
-
-var CodeMirrorEditor = React.createClass({
-  componentDidMount: function() {
-    if (IS_MOBILE) return;
-
-    this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
-      mode: 'javascript',
-      lineNumbers: false,
-      lineWrapping: true,
-      smartIndent: false,  // javascript mode does bad things with jsx indents
-      matchBrackets: true,
-      theme: 'solarized-light',
-      readOnly: this.props.readOnly
-    });
-    this.editor.on('change', this.handleChange);
-  },
-
-  componentDidUpdate: function() {
-    if (this.props.readOnly) {
-      this.editor.setValue(this.props.codeText);
-    }
-  },
-
-  handleChange: function() {
-    if (!this.props.readOnly) {
-      this.props.onChange && this.props.onChange(this.editor.getValue());
-    }
-  },
-
-  render: function() {
-    // wrap in a div to fully contain CodeMirror
-    var editor;
-
-    if (IS_MOBILE) {
-      editor = <pre style={{overflow: 'scroll'}}>{this.props.codeText}</pre>;
-    } else {
-      editor = <textarea ref="editor" defaultValue={this.props.codeText} />;
-    }
-
-    return (
-      <div style={this.props.style} className={this.props.className}>
-        {editor}
-      </div>
-    );
-  }
-});
-
-var selfCleaningTimeout = {
-  componentDidUpdate: function() {
-    clearTimeout(this.timeoutID);
-  },
-
-  setTimeout: function() {
-    clearTimeout(this.timeoutID);
-    this.timeoutID = setTimeout.apply(null, arguments);
-  }
-};
-
-var ReactPlayground = React.createClass({
-  mixins: [selfCleaningTimeout],
-
-  MODES: {JSX: 'JSX', JS: 'JS'}, //keyMirror({JSX: true, JS: true}),
-
-  propTypes: {
-    codeText: React.PropTypes.string.isRequired,
-    transformer: React.PropTypes.func,
-    renderCode: React.PropTypes.bool,
-  },
-
-  getDefaultProps: function() {
-    return {
-      transformer: function(code) {
-        return JSXTransformer.transform(code).code;
-      },
-      showCompiledJSTab: true
-    };
-  },
-
-  getInitialState: function() {
-    return {
-      mode: this.MODES.JSX,
-      code: this.props.codeText,
-    };
-  },
-
-  handleCodeChange: function(value) {
-    this.setState({code: value});
-    this.executeCode();
-  },
-
-  handleCodeModeSwitch: function(mode) {
-    this.setState({mode: mode});
-  },
-
-  compileCode: function() {
-    return this.props.transformer(this.state.code);
-  },
-
-  render: function() {
-    var isJS = this.state.mode === this.MODES.JS;
-    var compiledCode = '';
-    try {
-      compiledCode = this.compileCode();
-    } catch (err) {}
-
-    var JSContent =
-      <CodeMirrorEditor
-        key="js"
-        className="playgroundStage CodeMirror-readonly"
-        onChange={this.handleCodeChange}
-        codeText={compiledCode}
-        readOnly={true}
-      />;
-
-    var JSXContent =
-      <CodeMirrorEditor
-        key="jsx"
-        onChange={this.handleCodeChange}
-        className="playgroundStage"
-        codeText={this.state.code}
-      />;
-
-    var JSXTabClassName =
-      'playground-tab' + (isJS ? '' : ' playground-tab-active');
-    var JSTabClassName =
-      'playground-tab' + (isJS ? ' playground-tab-active' : '');
-
-    var JSTab =
-      <div
-        className={JSTabClassName}
-        onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JS)}>
-          Compiled JS
-      </div>;
-
-    var JSXTab =
-      <div
-        className={JSXTabClassName}
-        onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JSX)}>
-          Live JSX Editor
-      </div>
-
-    return (
-      <div className="playground">
-        <div>
-          {JSXTab}
-          {this.props.showCompiledJSTab && JSTab}
-        </div>
-        <div className="playgroundCode">
-          {isJS ? JSContent : JSXContent}
-        </div>
-        <div className="playgroundPreview">
-          <div ref="mount" />
-        </div>
-      </div>
-    );
-  },
-
-  componentDidMount: function() {
-    this.executeCode();
-  },
-
-  componentDidUpdate: function(prevProps, prevState) {
-    // execute code only when the state's not being updated by switching tab
-    // this avoids re-displaying the error, which comes after a certain delay
-    if (this.props.transformer !== prevProps.transformer ||
-        this.state.code !== prevState.code) {
-      this.executeCode();
-    }
-  },
-
-  executeCode: function() {
-    var mountNode = this.refs.mount.getDOMNode();
-
-    try {
-      React.unmountComponentAtNode(mountNode);
-    } catch (e) { }
-
-    try {
-      var compiledCode = this.compileCode();
-      if (this.props.renderCode) {
-        React.renderComponent(
-          <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
-          mountNode
-        );
-      } else {
-        eval(compiledCode);
-      }
-    } catch (err) {
-      this.setTimeout(function() {
-        React.renderComponent(
-          <div className="playgroundError">{err.toString()}</div>,
-          mountNode
-        );
-      }, 500);
-    }
-  }
-});
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
deleted file mode 100644
index 08997f1c8b5..00000000000
--- a/docs/_layouts/default.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE]><![endif]-->
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>React | {{ page.title }}</title>
-  <meta name="viewport" content="width=device-width">
-  <meta property="og:title" content="React | {{ page.title }}">
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="http://facebook.github.io/react{{ page.url }}">
-  <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
-  <meta property="og:description" content="A JavaScript library for building user interfaces">
-  <meta property="fb:app_id" content="623268441017527">
-
-  <link rel="shortcut icon" href="/react/favicon.ico">
-  <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
-
-  <link rel="stylesheet" href="/react/css/syntax.css">
-  <link rel="stylesheet" href="/react/css/codemirror.css">
-  <link rel="stylesheet" href="/react/css/react.css">
-
-  <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
-  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-
-  <!--[if lte IE 8]>
-  <script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
-  <script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
-  <script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
-  <![endif]-->
-  <script type="text/javascript" src="/react/js/codemirror.js"></script>
-  <script type="text/javascript" src="/react/js/javascript.js"></script>
-  <script type="text/javascript" src="/react/js/react.js"></script>
-  <script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
-  <script type="text/javascript" src="/react/js/live_editor.js"></script>
-  <script type="text/javascript" src="/react/js/showdown.js"></script>
-</head>
-<body>
-
-  <div class="container">
-
-    <div class="nav-main">
-      <div class="wrap">
-        <a class="nav-home" href="/react/index.html">
-          <img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
-          React
-        </a>
-        <ul class="nav-site">
-          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>docs</a></li>
-          <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li>
-          <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li>
-          <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li>
-          <li><a href="http://github.com/facebook/react">github</a>
-        </ul>
-      </div>
-    </div>
-
-    {% if page.id == 'home' %}
-    <div class="hero">
-      <div class="wrap">
-        <div class="text"><strong>React</strong></div>
-        <div class="minitext">
-          A JavaScript library for building user interfaces
-        </div>
-
-        <div class="buttons-unit">
-          <a href="/react/docs/getting-started.html" class="button">Get Started</a>
-          <a href="/react/downloads.html" class="button">Download React v{{site.react_version}}</a>
-        </div>
-      </div>
-    </div>
-    {% endif %}
-
-    {{ content }}
-
-    <footer class="wrap">
-      <div class="left">
-        A Facebook &amp; Instagram collaboration.<br>
-        <a href="/react/acknowledgements.html">Acknowledgements</a>
-      </div>
-      <div class="right">&copy; 2014 Facebook Inc.</div>
-    </footer>
-  </div>
-  <div id="fb-root"></div>
-
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-    ga('create', 'UA-41298772-1', 'facebook.github.io');
-    ga('send', 'pageview');
-
-    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
-
-    (function(d, s, id) {
-      var js, fjs = d.getElementsByTagName(s)[0];
-      if (d.getElementById(id)) return;
-      js = d.createElement(s); js.id = id;
-      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
-      fjs.parentNode.insertBefore(js, fjs);
-    }(document, 'script', 'facebook-jssdk'));
-  </script>
-</body>
-</html>
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
deleted file mode 100644
index f5bca3674b9..00000000000
--- a/docs/_layouts/docs.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: default
-sectionid: docs
----
-
-<section class="content wrap documentationContent">
-  {% include nav_docs.html %}
-
-  <div class="inner-content">
-    <h1>
-      {{ page.title }}
-      <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
-    </h1>
-    <div class="subHeader">{{ page.description }}</div>
-
-    {{ content }}
-
-    <div class="docs-prevnext">
-      {% if page.prev %}
-        <a class="docs-prev" href="/react/docs/{{ page.prev }}">&larr; Prev</a>
-      {% endif %}
-      {% if page.next %}
-        <a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
-      {% endif %}
-    </div>
-  </div>
-</section>
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
deleted file mode 100644
index bb172b22bb5..00000000000
--- a/docs/_layouts/page.html
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: default
----
-
-<section class="content wrap">
-  {{ content }}
-</section>
diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
deleted file mode 100644
index 5f7788bad81..00000000000
--- a/docs/_layouts/post.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-layout: default
-sectionid: blog
----
-
-<section class="content wrap blogContent">
-  {% include nav_blog.html %}
-  <div class="inner-content">
-    <h1>{{ page.title }}</h1>
-    <p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
-
-    <hr>
-
-    <div class="post">
-      {{ content }}
-    </div>
-
-    <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
-  </div>
-</section>
diff --git a/docs/_layouts/redirect.html b/docs/_layouts/redirect.html
deleted file mode 100644
index c24f8174849..00000000000
--- a/docs/_layouts/redirect.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; {{ page.destination }}">
-</head>
-<body></body>
-</html>
diff --git a/docs/_layouts/single.html b/docs/_layouts/single.html
deleted file mode 100644
index deb7170943f..00000000000
--- a/docs/_layouts/single.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-layout: default
----
-
-<section class="content wrap documentationContent nosidebar">
-  <div class="inner-content">
-    <h1>{{ page.title }}</h1>
-    <div class="subHeader">{{ page.description }}</div>
-    {{ content }}
-
-    <div class="docs-prevnext">
-      {% if page.prev %}
-        <a class="docs-prev" href="/react/docs/{{ page.prev }}">&larr; Prev</a>
-      {% endif %}
-      {% if page.next %}
-        <a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
-      {% endif %}
-    </div>
-  </div>
-</section>
diff --git a/docs/_layouts/tips.html b/docs/_layouts/tips.html
deleted file mode 100644
index 9339bb995fb..00000000000
--- a/docs/_layouts/tips.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-layout: default
-sectionid: tips
----
-
-<section class="content wrap documentationContent">
-  {% include nav_docs.html %}
-
-  <div class="inner-content">
-    <h1>{{ page.title }}</h1>
-    <div class="subHeader">{{ page.description }}</div>
-    {{ content }}
-
-    <div class="docs-prevnext">
-      {% if page.prev %}
-        <a class="docs-prev" href="/react/tips/{{ page.prev }}">&larr; Prev</a>
-      {% endif %}
-      {% if page.next %}
-        <a class="docs-next" href="/react/tips/{{ page.next }}">Next &rarr;</a>
-      {% endif %}
-    </div>
-  </div>
-</section>
diff --git a/docs/_plugins/header_links.rb b/docs/_plugins/header_links.rb
deleted file mode 100644
index 1172bde484f..00000000000
--- a/docs/_plugins/header_links.rb
+++ /dev/null
@@ -1,17 +0,0 @@
-require 'redcarpet'
-require 'sanitize'
-
-# Simple converter that is probably better than RedCarpet's built in TOC id
-# generator (which ends up with things lik id="toc_1"... terrible).
-
-class Redcarpet::Render::HTML
-  def header(title, level)
-    clean_title = Sanitize.clean(title)
-      .downcase
-      .gsub(/\s+/, "-")
-      .gsub(/[^A-Za-z0-9\-_.]/, "")
-
-    return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
-  end
-end
-
diff --git a/docs/_plugins/highlight_lines.rb b/docs/_plugins/highlight_lines.rb
deleted file mode 100644
index f0e274985a4..00000000000
--- a/docs/_plugins/highlight_lines.rb
+++ /dev/null
@@ -1,39 +0,0 @@
-# Replace Jekyll's handling of the Redcarpet code_block (which already adds
-# support for highlighting, but needs support for the very non-standard
-# "code fences with line highlights" extension).
-# Since this is currently depending on Redcarpet to cooperate, we are going to
-# be naive, and only allow line highlighting when a language is specified. If
-# you don't want any syntax highlighting but want to highlight lines, then you
-# need to specify text as your language, like:
-# ```text{4}
-
-
-module Jekyll
-  module Converters
-    class Markdown
-      class RedcarpetParser
-        module WithPygments
-          def block_code(code, lang)
-            require 'pygments'
-            lang_parts = lang && lang.split('{')
-            lang = lang_parts && !lang_parts[0].empty? && lang_parts[0] || 'text'
-            hl_lines = ''
-            if lang_parts && lang_parts.size >= 2
-              hl_lines = lang_parts[1].gsub(/[{}]/, '').split(',').map do |ln|
-                if matches = /(\d+)-(\d+)/.match(ln)
-                  ln = Range.new(matches[1], matches[2]).to_a.join(' ')
-                end
-                ln
-              end.join(' ')
-            end
-            output = add_code_tags(
-              Pygments.highlight(code, :lexer => lang,
-                                 :options => { :encoding => 'utf-8', :hl_lines => hl_lines }),
-              lang
-            )
-          end
-        end
-      end
-    end
-  end
-end
diff --git a/docs/_posts/2013-06-02-jsfiddle-integration.md b/docs/_posts/2013-06-02-jsfiddle-integration.md
deleted file mode 100644
index 3dbb0547737..00000000000
--- a/docs/_posts/2013-06-02-jsfiddle-integration.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: JSFiddle Integration
-layout: post
-author: Christopher Chedeau
----
-
-[JSFiddle](http://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
-
-
-<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
diff --git a/docs/_posts/2013-06-05-why-react.md b/docs/_posts/2013-06-05-why-react.md
deleted file mode 100644
index 07f02e1ef9a..00000000000
--- a/docs/_posts/2013-06-05-why-react.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Why did we build React?
-layout: post
-author: Pete Hunt
----
-
-There are a lot of JavaScript MVC frameworks out there. Why did we build React
-and why would you want to use it?
-
-## React isn't an MVC framework.
-
-React is a library for building composable user interfaces. It encourages
-the creation of reusable UI components which present data that changes over
-time.
-
-## React doesn't use templates.
-
-Traditionally, web application UIs are built using templates or HTML directives.
-These templates dictate the full set of abstractions that you are allowed to use
-to build your UI.
-
-React approaches building user interfaces differently by breaking them into
-**components**. This means React uses a real, full featured programming language
-to render views, which we see as an advantage over templates for a few reasons:
-
-- **JavaScript is a flexible, powerful programming language** with the ability
-  to build abstractions. This is incredibly important in large applications.
-- By unifying your markup with its corresponding view logic, React can actually
-  make views **easier to extend and maintain**.
-- By baking an understanding of markup and content into JavaScript, there's
-  **no manual string concatenation** and therefore less surface area for XSS
-  vulnerabilities.
-
-We've also created [JSX](/react/docs/jsx-in-depth.html), an optional syntax
-extension, in case you prefer the readability of HTML to raw JavaScript.
-
-## Reactive updates are dead simple.
-
-React really shines when your data changes over time.
-
-In a traditional JavaScript application, you need to look at what data changed
-and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
-which provides a declarative interface via directives and data binding [requires
-a linking function to manually update DOM nodes](http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
-
-React takes a different approach.
-
-When your component is first initialized, the `render` method is called,
-generating a lightweight representation of your view. From that representation,
-a string of markup is produced, and injected into the document. When your data
-changes, the `render` method is called again. In order to perform updates as
-efficiently as possible, we diff the return value from the previous call to
-`render` with the new one, and generate a minimal set of changes to be applied
-to the DOM.
-
-> The data returned from `render` is neither a string nor a DOM node -- it's a
-> lightweight description of what the DOM should look like.
-
-We call this process **reconciliation**. Check out
-[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of
-reconciliation in action.
-
-Because this re-render is so fast (around 1ms for TodoMVC), the developer
-doesn't need to explicitly specify data bindings. We've found this approach
-makes it easier to build apps.
-
-## HTML is just the beginning.
-
-Because React has its own lightweight representation of the document, we can do
-some pretty cool things with it:
-
-- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
-- Instagram is a "single page" web app built entirely with React and
-  `Backbone.Router`. Designers regularly contribute React code with JSX.
-- We've built internal prototypes that run React apps in a web worker and use
-  React to drive **native iOS views** via an Objective-C bridge.
-- You can run React
-  [on the server](http://github.com/petehunt/react-server-rendering-example)
-  for SEO, performance, code sharing and overall flexibility.
-- Events behave in a consistent, standards-compliant way in all browsers
-  (including IE8) and automatically use
-  [event delegation](http://davidwalsh.name/event-delegate).
-
-Head on over to [facebook.github.io/react](/react) to check out what we have
-built. Our documentation is geared towards building apps with the framework,
-but if you are interested in the nuts and bolts
-[get in touch](/react/support.html) with us!
-
-Thanks for reading!
diff --git a/docs/_posts/2013-06-12-community-roundup.md b/docs/_posts/2013-06-12-community-roundup.md
deleted file mode 100644
index d37e3b13514..00000000000
--- a/docs/_posts/2013-06-12-community-roundup.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: "Community Round-up #1"
-layout: post
-author: Vjeux
----
-
-React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
-
-## Khan Academy Question Editor
-
-It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Ben wrote about his experience using React:
-
-> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
->
-> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
-> <figure>[![](/react/img/blog/khan-academy-editor.png)](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)</figure>
->
-> [Read the full post...](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
-
-## Pimp my Backbone.View (by replacing it with React)
-
-[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
-
-> React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.
->
-> As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.
->
-> The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.
->
-> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html)
-
-## Using facebook's React with require.js
-
-[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.
-
-> I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.
->
-> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html)
-
-## Origins of React
-
-[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
-
-> React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
->
-> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
->
-> [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
diff --git a/docs/_posts/2013-06-19-community-roundup-2.md b/docs/_posts/2013-06-19-community-roundup-2.md
deleted file mode 100644
index 57b322e1cc7..00000000000
--- a/docs/_posts/2013-06-19-community-roundup-2.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: "Community Round-up #2"
-layout: post
-author: Vjeux
----
-
-Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
-
-## Some quick thoughts on React
-
-[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
-
-> I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.
->
-> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.
->
-> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.
->
-> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.
->
-> [Read the full post...](http://www.andrewgreig.com/637/)
-
-## React and Socket.IO Chat Application
-
-[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
-
-> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
-> <figure>[![](/react/img/blog/chatapp.png)](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
->
-> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
-
-## React and Other Frameworks
-
-[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
-
-> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]
->
-> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
->
-> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
-
-In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
-
-## Web Components: React & x-tags
-
-Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
-
-> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
-> <figure>[![](/react/img/blog/xreact.png)](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)</figure>
->
-> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
-
-## React TodoMVC Example
-
-[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
-
-> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.
->
-> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
-> <figure>[![](/react/img/blog/todomvc.png)](http://todomvc.com/labs/architecture-examples/react/)</figure>
->
-> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
-
-## JSX is not HTML
-
-Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
-
-  - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html)
-  - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html)
-  - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html)
-  - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html)
diff --git a/docs/_posts/2013-06-21-react-v0-3-3.md b/docs/_posts/2013-06-21-react-v0-3-3.md
deleted file mode 100644
index 668c83de1a6..00000000000
--- a/docs/_posts/2013-06-21-react-v0-3-3.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: "React v0.3.3"
-layout: post
-author: Paul O'Shannessy
----
-
-We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
-
-
-## react-tools
-
-* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
-* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
-* Freeze our esprima dependency.
-
-
-## React
-
-* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
-
-
-## JSXTransformer
-
-* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
diff --git a/docs/_posts/2013-06-27-community-roundup-3.md b/docs/_posts/2013-06-27-community-roundup-3.md
deleted file mode 100644
index 7ee8a33116c..00000000000
--- a/docs/_posts/2013-06-27-community-roundup-3.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Community Round-up #3"
-layout: post
-author: Vjeux
----
-
-The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
-
-## Moving From Backbone To React
-
-[Clay Allsopp](http://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
-
-> [<img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
->
-> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
->
-> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
->
-> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
-
-## Grunt Task for JSX
-
-[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
-
-> Grunt task for compiling Facebook React's .jsx templates into .js
->
-> ```javascript
-grunt.initConfig({
-  react: {
-    app: {
-      options: { extension: 'js' },
-      files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
-```
->
-> It also works great with `grunt-browserify`!
->
-> ```javascript
-browserify: {
-  options: {
-    transform: [ require('grunt-react').browserify ]
-  },
-  app: {
-    src: 'path/to/source/main.js',
-    dest: 'path/to/target/output.js'
-```
->
-> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
-
-## Backbone/Handlebars Nested Views
-
-[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
-
-> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
->
-> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
->
-> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
->
-> [Read the full post...](http://joelburget.com/react/)
-
-## JSRomandie Meetup
-
-[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
-
-<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
-
-## CoffeeScript integration
-
-[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
-
-> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
->
-> ```javascript
-{div, h3, textarea} = React.DOM
-(div {className: 'MarkdownEditor'}, [
-  (h3 {}, 'Input'),
-  (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
-    @state.value
-  )
-])
-```
->
-> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
-
-## Tutorial in Plain Javascript
-
-We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain Javascript.
-
-> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
->
-> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)
diff --git a/docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md b/docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md
deleted file mode 100644
index 9a5735f7007..00000000000
--- a/docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: "New in React v0.4: Autobind by Default"
-layout: post
-author: Paul O'Shannessy
----
-
-React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
-
-
-## What is React.autoBind?
-
-If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](http://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
-
-Before we launched React, we would write this:
-
-```js{4}
-React.createClass({
-  onClick: function(event) {/* do something with this */},
-  render: function() {
-    return <button onClick={this.onClick.bind(this)} />;
-  }
-});
-```
-
-We wrote `React.autoBind` as a way to cache the function creation and save on memory usage. Since `render` can get called multiple times, if you used `this.onClick.bind(this)` you would actually create a new function on each pass. With React v0.3 you were able to write this instead:
-
-```js{2,4}
-React.createClass({
-  onClick: React.autoBind(function(event) {/* do something with this */}),
-  render: function() {
-    return <button onClick={this.onClick} />;
-  }
-});
-```
-
-
-## What's Changing in v0.4?
-
-After using `React.autoBind` for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within `React.createClass` will already be bound to the correct instance.
-
-Starting with v0.4 you can just write this:
-
-```js{2,4}
-React.createClass({
-  onClick: function(event) {/* do something with this */},
-  render: function() {
-    return <button onClick={this.onClick} />;
-  }
-});
-```
-
-For v0.4 we will simply be making `React.autoBind` a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.
diff --git a/docs/_posts/2013-07-03-community-roundup-4.md b/docs/_posts/2013-07-03-community-roundup-4.md
deleted file mode 100644
index 62e56c569df..00000000000
--- a/docs/_posts/2013-07-03-community-roundup-4.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: "Community Round-up #4"
-layout: post
-author: Vjeux
----
-
-React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
-
-## Khan Academy
-
-[Ben Kamens](http://bjk5.com/) explains how [Ben Alpert](http://benalpert.com/) and [Joel Burget](http://joelburget.com/) are promoting React inside of [Khan Academy](https://www.khanacademy.org/). They now have three projects in the works using React.
-
-> Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.
->
-> "The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"
->
-> [Read the full post...](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
-
-The best part is the demo of how React reconciliation process makes live editing more user-friendly.
-
-> Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
-> <figure>[<img src="/react/img/blog/monkeys.gif" width="70%" />](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)</figure>
-
-## React Snippets
-
-Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/react/docs/reusable-components.html) and [Lifecycle Methods](/react/docs/working-with-the-browser.html).
-
-> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
->
->  * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
->
-> [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
->
->  * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
->  * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
->
-> [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
->
-> * [Gist](https://gist.github.com/zpao/5686416): The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
-> * [Gist](https://gist.github.com/petehunt/5687230): This example is doing everything -- including the IO -- inside of a single React component.
-> * [Gist](https://gist.github.com/petehunt/5687276): One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
->
-> [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
->
-> * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
-
-## Introduction to React Screencast
-
-[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
-
-<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
-
-## Snake in React
-
-[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
-
-> [Check the source on Github](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
-> <figure>[![](/react/img/blog/snake.png)](http://tomocchino.github.io/react-snake/)</figure>
diff --git a/docs/_posts/2013-07-11-react-v0-4-prop-validation-and-default-values.md b/docs/_posts/2013-07-11-react-v0-4-prop-validation-and-default-values.md
deleted file mode 100644
index b2898fd3f41..00000000000
--- a/docs/_posts/2013-07-11-react-v0-4-prop-validation-and-default-values.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: "New in React v0.4: Prop Validation and Default Values"
-layout: post
-author: Paul O'Shannessy
----
-
-Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
-
-
-## Validation
-
-Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast.
-
-React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
-
-```js
-React.createClass({
-  propTypes: {
-    // An optional string prop named "description".
-    description: React.PropTypes.string,
-
-    // A required enum prop named "category".
-    category: React.PropTypes.oneOf(['News','Photos']).isRequired,
-
-    // A prop named "dialog" that requires an instance of Dialog.
-    dialog: React.PropTypes.instanceOf(Dialog).isRequired
-  },
-  ...
-});
-```
-
-
-## Default Values
-
-One common pattern we've seen with our React code is to do something like this:
-
-```js
-React.createClass({
-  render: function() {
-    var value = this.props.value || 'default value';
-    return <div>{value}</div>;
-  }
-});
-```
-
-Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
-
-```js
-React.createClass({
-  getDefaultProps: function() {
-    return {
-      value: 'default value'
-    };
-  }
-  ...
-});
-```
-
-We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it.
-
-- - -
-
-Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.
diff --git a/docs/_posts/2013-07-17-react-v0-4-0.md b/docs/_posts/2013-07-17-react-v0-4-0.md
deleted file mode 100644
index b2a11fcdad0..00000000000
--- a/docs/_posts/2013-07-17-react-v0-4-0.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: "React v0.4.0"
-layout: post
-author: Paul O'Shannessy
----
-
-Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
-
-
-This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](http://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
-
-React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
-
-When you're ready, [go download it](/react/downloads.html)!
-
-
-### React
-
-* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
-* Support for more DOM elements and attributes (e.g., `<canvas>`)
-* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
-* We've implemented an improved synthetic event system that conforms to the W3C spec.
-* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
-
-### JSX
-
-* Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
-* Children are now transformed directly into arguments instead of being wrapped in an array
-  E.g. `<div><Component1/><Component2/></div>` is transformed into `React.DOM.div(null, Component1(null), Component2(null))`.
-  Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
-  If you were using React without JSX previously, your code should still work.
-
-### react-tools
-
-* Fixed a number of bugs when transforming directories
-* No longer re-write `require()`s to be relative unless specified
diff --git a/docs/_posts/2013-07-23-community-roundup-5.md b/docs/_posts/2013-07-23-community-roundup-5.md
deleted file mode 100644
index 87aa8338e04..00000000000
--- a/docs/_posts/2013-07-23-community-roundup-5.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: "Community Round-up #5"
-layout: post
-author: Vjeux
----
-
-We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
-
-## Cross-browser onChange
-
-[Ben Alpert](http://benalpert.com/) from [Khan Academy](https://www.khanacademy.org/) worked on a cross-browser implementation of `onChange` event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.
-
-> First off, what is the input event? If you have an `<input>` element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.
->
-> Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using `setTimeout(fn, 0)` or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).
->
-> [Read the full post...](http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html)
-
-
-## React Samples
-
-Learning a new library is always easier when you have working examples you can play with. [jwh](https://github.com/jhw) put many of them on his [react-samples Github repo](https://github.com/jhw/react-samples).
-
-> Some simple examples with Facebook's React framework
->
-> * Bootstrap action bar, modal and table [#1](https://rawgithub.com/jhw/react-samples/master/html/actionbar.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html)
-> * Comments [#1](https://rawgithub.com/jhw/react-samples/master/html/comments1.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/comments2.html)
-> * Data Table [#1](https://rawgithub.com/jhw/react-samples/master/html/datatable.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/datatable2.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/datatable3.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/datatable4.html),
-> [#5](https://rawgithub.com/jhw/react-samples/master/html/datatable5.html)
-> * Filter Bar [#1](https://rawgithub.com/jhw/react-samples/master/html/filterbar.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html),
-> [#5](https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html)
-> * Fundoo Rating [#1](https://rawgithub.com/jhw/react-samples/master/html/fundoo.html)
-> * Line Char: [#1](https://rawgithub.com/jhw/react-samples/master/html/linechart.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/linechart2.html)
-> * Multi tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/multitabs.html)
-> * Select [#1](https://rawgithub.com/jhw/react-samples/master/html/select.html)
-> * Simple Tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html)
-> * Toggle [#1](https://rawgithub.com/jhw/react-samples/master/html/toggle.html)
-
-
-## React Chosen Wrapper
-
-[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](http://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
-
-```javascript
-React.renderComponent(
-  <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
-    <option value="Facebook">Facebook</option>
-    <option value="Harvest">Harvest</option>
-  </Chosen>
-, document.body);
-```
-
-
-## JSX and ES6 Template Strings
-
-[Domenic Denicola](http://domenicdenicola.com/) wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.
-
-<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
-
-
-## React Presentation
-
-[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke), React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.
-
-<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## Docs
-
-[Pete Hunt](http://www.petehunt.net/) rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.
-
-> Guides
->
-> * [Why React?](/react/docs/why-react.html)
-> * [Displaying Data](/react/docs/displaying-data.html)
->   * [JSX in Depth](/react/docs/jsx-in-depth.html)
->   * [JSX Gotchas](/react/docs/jsx-gotchas.html)
-> * [Interactivity and Dynamic UIs](/react/docs/interactivity-and-dynamic-uis.html)
-> * [Multiple Components](/react/docs/multiple-components.html)
-> * [Reusable Components](/react/docs/reusable-components.html)
-> * [Forms](/react/docs/forms.html)
-> * [Working With the Browser](/react/docs/working-with-the-browser.html)
->   * [More About Refs](/react/docs/more-about-refs.html)
-> * [Tooling integration](/react/docs/tooling-integration.html)
-> * [Reference](/react/docs/top-level-api.html)
diff --git a/docs/_posts/2013-07-26-react-v0-4-1.md b/docs/_posts/2013-07-26-react-v0-4-1.md
deleted file mode 100644
index 7111e0e80ef..00000000000
--- a/docs/_posts/2013-07-26-react-v0-4-1.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: "React v0.4.1"
-layout: post
-author: Paul O'Shannessy
----
-
-React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
-
-
-## React
-
-* `setState` callbacks are now executed in the scope of your component.
-* `click` events now work on Mobile Safari.
-* Prevent a potential error in event handling if `Object.prototype` is extended.
-* Don't set DOM attributes to the string `"undefined"` on update when previously defined.
-* Improved support for `<iframe>` attributes.
-* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
-
-
-## JSXTransformer
-
-* Improved environment detection so it can be run in a non-browser environment.
-
-
-[Download it now!](/react/downloads.html)
diff --git a/docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md b/docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md
deleted file mode 100644
index 608da381ced..00000000000
--- a/docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "Use React and JSX in Ruby on Rails"
-layout: post
-author: Paul O'Shannessy
----
-
-Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
-
-
-This gem has 2 primary purposes:
-
-1. To package `react.js` in a way that's easy to use and easy to update.
-2. To allow you to write JSX without an external build step to transform that into JS.
-
-
-## Packaging react.js
-
-To make `react.js` available for use client-side, simply add `react` to your manifest, and declare the variant you'd like to use in your environment. When you use `:production`, the minified and optimized `react.min.js` will be used instead of the development version. For example:
-
-```ruby
-# config/environments/development.rb
-
-MyApp::Application.configure do
-  config.react.variant = :development
-  # use :production in production.rb
-end
-```
-
-```js
-// app/assets/javascript/application.js
-
-//= require react
-```
-
-
-## Writing JSX
-
-When you name your file with `myfile.js.jsx`, `react-rails` will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
-
-```js
-/** @jsx React.DOM */
-React.renderComponent(<MyComponent/>, document.body)
-```
-
-
-## Asset Pipeline
-
-`react-rails` takes advantage of the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) that was introduced in Rails 3.1. A very important part of that pipeline is the `assets:precompile` Rake task. `react-rails` will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
-
-
-## Installation
-
-Installation follows the same process you're familiar with. You can install it globally with `gem install react-rails`, though we suggest you add the dependency to your `Gemfile` directly.
-
diff --git a/docs/_posts/2013-08-05-community-roundup-6.md b/docs/_posts/2013-08-05-community-roundup-6.md
deleted file mode 100644
index a038136b565..00000000000
--- a/docs/_posts/2013-08-05-community-roundup-6.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: "Community Round-up #6"
-layout: post
-author: Vjeux
----
-
-This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.
-
-## React Game Tutorial
-
-[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
-<figure>[![](/react/img/blog/dog-tutorial.png)](https://rawgithub.com/calebcassel/react-demo/master/part1.html)</figure>
-
-
-## Reactify
-
-[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files.
-
-> Browserify v2 transform for `text/jsx`. Basic usage is:
->
-> ```
-% browserify -t reactify main.jsx
-```
->
-> `reactify` transform activates for files with either `.jsx` extension or `/** @jsx React.DOM */` pragma as a first line for any `.js` file.
->
-> [Check it out on Github...](https://github.com/andreypopp/reactify)
-
-
-
-## React Integration with Este
-
-[Daniel Steigerwald](http://daniel.steigerwald.cz/) is now using React within [Este](https://github.com/steida/este), which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
-
-```coffeescript
-este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
-  render: ->
-    @div [
-      este.demos.react.todoList 'items': @state['items']
-      if @state['items'].length
-        @p "#{@state['items'].length} items."
-      @form 'onSubmit': @onFormSubmit, [
-        @input
-          'onChange': @onChange
-          'value': @state['text']
-          'autoFocus': true
-          'ref': 'textInput'
-        @button "Add ##{@state['items'].length + 1}"
-      ]
-    ]
-```
-
-[Check it out on Github...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)
-
-
-## React Stylus Boilerplate
-
-[Zaim Bakar](http://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
-
-> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
-> 
-> - Very minimal HTML boilerplate
-> - Uses Stylus, with nib included
-> - Uses two build targets:
->   - `grunt build` to compile JSX and Stylus into a development build
->   - `grunt dist` to minify and optimize the development build for production
->
-> [Check it out on Github...](https://github.com/zaim/react-stylus-boilerplate)
-
-
-## WebFUI
-
-[Conrad Barski](http://lisperati.com/), author of the popular book [Land of Lisp](http://landoflisp.com/), wants to use React for his ClojureScript library called [WebFUI](https://github.com/drcode/webfui).
-
-> I'm the author of "[Land of Lisp](http://landoflisp.com/)" and I love your framework. I built a somewhat similar framework a year ago [WebFUI](https://github.com/drcode/webfui) aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)
->
-> Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
-<figure>[![](/react/img/blog/landoflisp.png)](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)</figure>
->
-> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)
diff --git a/docs/_posts/2013-08-19-use-react-and-jsx-in-python-applications.md b/docs/_posts/2013-08-19-use-react-and-jsx-in-python-applications.md
deleted file mode 100644
index 8dd9ac6f6b9..00000000000
--- a/docs/_posts/2013-08-19-use-react-and-jsx-in-python-applications.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: "Use React and JSX in Python Applications"
-layout: post
-author: Kunal Mehta
----
-
-Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
-
-## Usage
-
-Transform your JSX files via the provided `jsx` module:
-
-```python
-from react import jsx
-
-# For multiple paths, use the JSXTransformer class.
-transformer = jsx.JSXTransformer()
-for jsx_path, js_path in my_paths:
-    transformer.transform(jsx_path, js_path)
-
-# For a single file, you can use a shortcut method.
-jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
-```
-
-For full paths to React files, use the `source` module:
-
-```python
-from react import source
-
-# path_for raises IOError if the file doesn't exist.
-react_js = source.path_for('react.min.js')
-```
-
-## Django
-
-PyReact includes a JSX compiler for [django-pipeline](https://github.com/cyberdelia/django-pipeline). Add it to your project's pipeline settings like this:
-
-```python
-PIPELINE_COMPILERS = (
-  'react.utils.pipeline.JSXCompiler',
-)
-```
-
-## Installation
-
-PyReact is hosted on PyPI, and can be installed with `pip`:
-
-    $ pip install PyReact
-
-Alternatively, add it into your `requirements` file:
-
-    PyReact==0.1.1
-
-**Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/).
-
-For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)!
diff --git a/docs/_posts/2013-08-26-community-roundup-7.md b/docs/_posts/2013-08-26-community-roundup-7.md
deleted file mode 100644
index b75b02c25f9..00000000000
--- a/docs/_posts/2013-08-26-community-roundup-7.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: "Community Round-up #7"
-layout: post
-author: Vjeux
----
-
-It's been three months since we open sourced React and it is going well. Some stats so far:
-
-* 114 285 unique visitors on this website
-* [1933 stars](https://github.com/facebook/react/stargazers) and [210 forks](https://github.com/facebook/react/network/members)
-* [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
-* [76 Github projects using React](https://gist.github.com/vjeux/6335762)
-* [30 contributors](https://github.com/facebook/react/graphs/contributors)
-* [15 blog posts](http://facebook.github.io/react/blog/)
-* 2 early adopters: [Khan Academy](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
-
-
-## Wolfenstein Rendering Engine Ported to React
-
-[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
-<figure>[![](/react/img/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)</figure>
-
-
-## React & Meteor
-
-[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
-
-> This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
->
-> The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.
->
->```javascript
->var MyComponent = React.createClass({
->  mixins: [MeteorMixin],
->
->  getMeteorState: function() {
->    return { foo: Session.get('foo') };
->  },
->
->  render: function() {
->    return <div>{this.state.foo}</div>;
->  }
->});
->```
->
-> Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.
->
-> [Read more ...](https://github.com/benjamn/meteor-react)
-
-## React Page
-
-[Jordan Walke](https://github.com/jordwalke) implemented a complete React project creator called [react-page](https://github.com/facebook/react-page/). It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
-
-> Easy Application Development with React JavaScript
-> <figure>[![](/react/img/blog/react-page.png)](https://github.com/facebook/react-page/)</figure>
->
-> **Why Server Rendering?**
->
-> * Faster initial page speed:
->   * Markup displayed before downloading large JavaScript.
->   * Markup can be generated more quickly on a fast server than low power client devices.
-> * Faster Development and Prototyping:
->   * Instantly refresh your app without waiting for any watch scripts or bundlers.
-> * Easy deployment of static content pages/blogs: just archive using recursive wget.
-> * SEO benefits of indexability and perf.
->
-> **How Does Server Rendering Work?**
->
-> * `react-page` computes page markup on the server, sends it to the client so the user can see it quickly.
-> * The corresponding JavaScript is then packaged and sent.
-> * The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
-> * From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.
->
-> [Try it out ...](https://github.com/facebook/react-page/)
diff --git a/docs/_posts/2013-09-24-community-roundup-8.md b/docs/_posts/2013-09-24-community-roundup-8.md
deleted file mode 100644
index eb7c52f725d..00000000000
--- a/docs/_posts/2013-09-24-community-roundup-8.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: "Community Round-up #8"
-layout: post
-author: Vjeux
----
-
-A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.
-
-First, we are organizing a [React Hackathon](http://reactjshack-a-thon.splashthat.com/) in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!
-
-We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on [StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) using the tag [[reactjs]](http://stackoverflow.com/questions/tagged/reactjs). Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.
-
-## Javascript Jabber
-
-[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) were interviewed on [Javascript Jabber](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) for an hour.  They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.
-
-> **PETE:**  So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it's like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you've registered and we reset the whole page and then we redraw the entire page. If you're writing a server-rendered app, handling updates is really easy because you hit the refresh button and you're pretty much guaranteed to get what you expect.
->
-> **MERRICK:**  That's true. You don't get into these odd states.
->
-> **PETE:**  Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we'll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.
->
-> Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn't part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Ben Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.
->
-> [Read the full conversation ...](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
-
-
-## JSXTransformer Trick
-
-While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.
-
-<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform(&quot;/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */&quot; + element.innerHTML).code</p>&mdash; Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-
-
-## Remarkable React
-
-[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writting _active apps_ using the DOM API and shows how React handles it.
-
-> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
->
-> You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)
->
-> Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the `requestAnimationFrame()`.
->
-> What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.
->
-> The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example `e.target` works, no need to look for the event object or checking whether it's `e.target` or `e.srcElement` (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event `<input onChange>` fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.
->
-> The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.
->
-> [Read More ...](http://www.phpied.com/remarkable-react/)
-
-
-## Markdown in React
-
-[Ben Alpert](http://benalpert.com/) converted [marked](https://github.com/chjj/marked), a Markdown Javascript implementation, in React: [marked-react](https://github.com/spicyj/marked-react). Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to `escape` will not introduce an XSS vulnerability.
-<figure>[![](/react/img/blog/markdown_refactor.png)](https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457)</figure>
-
-
-## Unite from BugBusters
-
-[Renault John Lecoultre](https://twitter.com/renajohn) wrote [Unite](https://www.bugbuster.com/), an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
-<figure>[![](/react/img/blog/unite.png)](https://unite.bugbuster.com/)</figure>
-
-## #reactjs IRC Logs
-
-[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/docs/_posts/2013-10-16-react-v0.5.0.md b/docs/_posts/2013-10-16-react-v0.5.0.md
deleted file mode 100644
index aab495f118b..00000000000
--- a/docs/_posts/2013-10-16-react-v0.5.0.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: "React v0.5"
-layout: post
-author: Paul O'Shannessy
----
-
-This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
-
-The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
-
-The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/react/docs/addons.html).
-
-## Thanks to Our Community
-
-We added *22 new people* to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our `AUTHORS` file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
-
-It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
-
-
-## Changelog
-
-### React
-
-* Memory usage improvements - reduced allocations in core which will help with GC pauses
-* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
-* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
-* Support for Selection events.
-* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
-* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
-* Support for additional SVG properties (`rx`, `ry`).
-* Support for using `getInitialState` and `getDefaultProps` in mixins.
-* Support mounting into iframes.
-* Bug fixes for controlled form components.
-* Bug fixes for SVG element creation.
-* Added `React.version`.
-* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
-* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
-* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
-* Began laying down work for refined performance analysis.
-* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
-* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
-
-### React with Addons (New!)
-
-* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](/react/docs/addons.html).
-
-### JSX
-
-* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
-* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
-* Improved compatibility for Windows
-* Improved support for maintaining line numbers when transforming.
diff --git a/docs/_posts/2013-10-29-react-v0-5-1.md b/docs/_posts/2013-10-29-react-v0-5-1.md
deleted file mode 100644
index dcc8a2e3d88..00000000000
--- a/docs/_posts/2013-10-29-react-v0-5-1.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: "React v0.5.1"
-layout: post
-author: Paul O'Shannessy
----
-
-This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Ben Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
-
-## Changelog
-
-### React
-
-* Fixed bug with `<input type="range">` and selection events.
-* Fixed bug with selection and focus.
-* Made it possible to unmount components from the document root.
-* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
-
-### React with Addons
-
-* Fixed bug with transition and animation event detection.
-
-[1]: https://github.com/spicyj
-[2]: https://github.com/andreypopp
-[3]: https://github.com/lrowe
-
diff --git a/docs/_posts/2013-10-3-community-roundup-9.md b/docs/_posts/2013-10-3-community-roundup-9.md
deleted file mode 100644
index 46accfa62c5..00000000000
--- a/docs/_posts/2013-10-3-community-roundup-9.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: "Community Round-up #9"
-layout: post
-author: Vjeux
----
-
-We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
-
-![](/react/img/blog/react-hackathon.jpg)
-
-
-## React Hackathon Winner
-
-[Alex Swan](http://bold-it.com/) implemented [Qu.izti.me](http://qu.izti.me/), a multi-player quiz game. It is real-time via Web Socket and mobile friendly.
-
-> The game itself is pretty simple. People join the "room" by going to [http://qu.izti.me](http://qu.izti.me/) on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.
->
-> In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
-><figure>[![](/react/img/blog/quiztime.png)](http://bold-it.com/javascript/facebook-react-example/)</figure>
->
-> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
-
-## JSConf EU Talk: Rethinking Best Practices
-
-[Pete Hunt](http://www.petehunt.net/) presented React at JSConf EU. He covers three controversial design decisions of React:
-
-1. Build **components**, not templates
-2. Re-render the whole app on every update
-3. Virtual DOM
-
-The video will be available soon on the [JSConf EU website](http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html), but in the meantime, here are Pete's slides:
-
-<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
-
-
-## Pump - Clojure bindings for React
-
-[Alexander Solovyov](http://solovyov.net/) has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
-
-```ruby
-(ns your.app
-  (:require-macros [pump.def-macros :refer [defr]])
-  (:require [pump.core]))
-
-(defr Component
-  :get-initial-state #(identity {:some-value ""})
-
-  [component props state]
-
-  [:div {:class-name "test"} "hello"])
-```
-
-[Check it out on GitHub...](https://github.com/piranha/pump)
-
-
-## JSXHint
-
-[Todd Kennedy](http://blog.selfassembled.org/) working at [Cond&eacute; Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
-
-> A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
->
-> ```
-npm install -g jsxhint
-```
->
-> [Check it out on GitHub...](https://github.com/CondeNast/JSXHint)
-
-
-## Turbo React
-
-[Ross Allen](https://twitter.com/ssorallen) working at [Mesosphere](http://mesosphere.io/) combined [Turbolinks](https://github.com/rails/turbolinks/), a library used by Ruby on Rails to speed up page transition, and React.
-
-> "Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
->
-> The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
->
-> With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
-><figure>[![](/react/img/blog/turboreact.png)](https://turbo-react.herokuapp.com/)</figure>
->
-> [Check out the demo...](https://turbo-react.herokuapp.com/)
-
-
-## Reactive Table
-
-[Stoyan Stefanov](http://www.phpied.com/) continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.
-
-> React is all about components. So let's build one.
->
-> Let's call it Table (to avoid any confusion what the component is about).
->
-> ```javascript
-var Table = React.createClass({
-  /*stuff goeth here*/
-});
-```
->
-> You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.
->
-> [Read the full article...](http://www.phpied.com/reactive-table/)
-
diff --git a/docs/_posts/2013-11-05-thinking-in-react.md b/docs/_posts/2013-11-05-thinking-in-react.md
deleted file mode 100644
index aa2fb4b4390..00000000000
--- a/docs/_posts/2013-11-05-thinking-in-react.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: "Thinking in React"
-layout: post
-author: Pete Hunt
----
-
-React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It's scaled very well for us at Facebook and Instagram.
-
-One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.
-
-## Start with a mock
-
-Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:
-
-![Mockup](/react/img/blog/thinking-in-react-mock.png)
-
-Our JSON API returns some data that looks like this:
-
-```
-[
-  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
-  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
-  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
-  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
-  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
-  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
-];
-```
-
-## Step 1: break the UI into a component hierarchy
-
-The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
-
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
-
-Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
-
-![Component diagram](/react/img/blog/thinking-in-react-components.png)
-
-You'll see here that we have five components in our simple app. I've italicized the data each component represents.
-
-  1. **`FilterableProductTable` (orange):** contains the entirety of the example
-  2. **`SearchBar` (blue):** receives all *user input*
-  3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input*
-  4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category*
-  5. **`ProductRow` (red):** displays a row for each *product*
-
-If you look at `ProductTable` you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own `ProductTableHeader` component.
-
-Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:
-
-  * `FilterableProductTable`
-    * `SearchBar`
-    * `ProductTable`
-      * `ProductCategoryRow`
-      * `ProductRow`
-
-## Step 2: Build a static version in React
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
-
-To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using *props*. *props* are a way of passing data from parent to child. If you're familiar with the concept of *state*, **don't use state at all** to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.
-
-You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.
-
-At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
-
-Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
-
-### A brief interlude: props vs state
-
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
-
-## Step 3: Identify the minimal (but complete) representation of UI state
-
-To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
-
-To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.
-
-Think of all of the pieces of data in our example application. We have:
-
-  * The original list of products
-  * The search text the user has entered
-  * The value of the checkbox
-  * The filtered list of products
-
-Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:
-
-  1. Is it passed in from a parent via props? If so, it probably isn't state.
-  2. Does it change over time? If not, it probably isn't state.
-  3. Can you compute it based on any other state or props in your component? If so, it's not state.
-
-The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
-
-So finally, our state is:
-
-  * The search text the user has entered
-  * The value of the checkbox
-
-## Step 4: Identify where your state should live
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
-
-Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
-
-For each piece of state in your application:
-
-  * Identify every component that renders something based on that state.
-  * Find a common owner component (a single component above all the components that need the state in the hierarchy).
-  * Either the common owner or another component higher up in the hierarchy should own the state.
-  * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
-
-Let's run through this strategy for our application:
-
-  * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
-  * The common owner component is `FilterableProductTable`.
-  * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
-
-Cool, so we've decided that our state lives in `FilterableProductTable`. First, add a `getInitialState()` method to `FilterableProductTable` that returns `{filterText: '', inStockOnly: false}` to reflect the initial state of your application. Then pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
-
-You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see the data table is updated correctly.
-
-## Step 5: Add inverse data flow
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
-
-React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called `ReactLink` to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.
-
-If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
-
-Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass a callback to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. And the callback passed by `FilterableProductTable` will call `setState()` and the app will be updated.
-
-Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.
-
-## And that's it
-
-Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)
diff --git a/docs/_posts/2013-11-06-community-roundup-10.md b/docs/_posts/2013-11-06-community-roundup-10.md
deleted file mode 100644
index fa83a4745cb..00000000000
--- a/docs/_posts/2013-11-06-community-roundup-10.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: "Community Round-up #10"
-layout: post
-author: Vjeux
----
-
-This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.
-
-The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.
-
-## Khan Academy - Officially moving to React
-
-[Joel Burget](http://joelburget.com/) announced at Hack Reactor that new front-end code at Khan Academy should be written in React!
-
-> How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren't looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.
->
-> Since the first React checkin on June 5, we've somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that's a lot of code - but also really exciting that it was picked up so quickly.
->
-> We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.
->
-> I'm excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We're trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we've done is introduce more fragmentation. We won't be gratuitously updating working code (if it ain't broke, don't fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.
->
-> [Read the full article](http://joelburget.com/backbone-to-react/)
-
-
-## React: Rethinking best practices
-
-[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
-
-<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## Server-side React with PHP
-
-[Stoyan Stefanov](http://www.phpied.com/)'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.
-
-> This post is an initial hack to have React components render server-side in PHP.
->
-> - Problem: Build web UIs
-> - Solution: React
-> - Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)
-> - Solution: [React page](https://github.com/facebook/react-page) to render the first view
-> - Problem: Can't host node.js apps / I have tons of PHP code
-> - Solution: Use PHP then!
->
-> [**Read part 1 ...**](http://www.phpied.com/server-side-react-with-php/)
->
-> [**Read part 2 ...**](http://www.phpied.com/server-side-react-with-php-part-2/)
->
-> Rendered markup on the server:
-> <figure>[![](/react/img/blog/react-php.png)](http://www.phpied.com/server-side-react-with-php-part-2/)</figure>
-
-
-## TodoMVC Benchmarks
-
-Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
-
-- **AngularJS:** 4043ms
-- **AngularJSPerf:** 3227ms
-- **BackboneJS:** 1874ms
-- **EmberJS:** 6822ms
-- **jQuery:** 14628ms
-- **React:** 2864ms
-- **VanillaJS:** 5567ms
-
-[Try it yourself!](http://www.petehunt.net/react/tastejs/benchmark.html)
-
-Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.
-
-Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:
-
-```javascript
-/**
- * This is a completely optional performance enhancement that you can implement
- * on any React component. If you were to delete this method the app would still
- * work correctly (and still be very performant!), we just use it as an example
- * of how little code it takes to get an order of magnitude performance improvement.
- */
-shouldComponentUpdate: function (nextProps, nextState) {
-  return (
-    nextProps.todo.id !== this.props.todo.id ||
-    nextProps.todo !== this.props.todo ||
-    nextProps.editing !== this.props.editing ||
-    nextState.editText !== this.state.editText
-  );
-},
-```
-
-By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.
-
-The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.
-
-## Guess the filter
-
-[Connor McSheffrey](http://conr.me) implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
-<figure>[![](/react/img/blog/guess_filter.jpg)](http://guessthefilter.com/)</figure>
-
-
-## React vs FruitMachine
-
-[Andrew Betts](http://trib.tv/), director of the [Financial Times Labs](http://labs.ft.com/), posted an article comparing [FruitMachine](https://github.com/ftlabs/fruitmachine) and React.
-
-> Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We're graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.
->
-> [Read the full article...](http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/)
-
-Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.
-
-## React Brunch
-
-[Matthew McCray](http://elucidata.net/) implemented [react-brunch](https://npmjs.org/package/react-brunch), a JSX compilation step for [Brunch](http://brunch.io/).
-
-> Adds React support to brunch by automatically compiling `*.jsx` files.
->
-> You can configure react-brunch to automatically insert a react header (`/** @jsx React.DOM */`) into all `*.jsx` files. Disabled by default.
->
-> Install the plugin via npm with `npm install --save react-brunch`.
->
-> [Read more...](https://npmjs.org/package/react-brunch)
-
-## Random Tweet
-
-I'm going to start adding a tweet at the end of each round-up. We'll start with this one:
-
-<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
diff --git a/docs/_posts/2013-11-18-community-roundup-11.md b/docs/_posts/2013-11-18-community-roundup-11.md
deleted file mode 100644
index b7779b3bd46..00000000000
--- a/docs/_posts/2013-11-18-community-roundup-11.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: "Community Round-up #11"
-layout: post
-author: Vjeux
----
-
-This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
-
-## Super VanJS 2013 Talk
-
-[Steve Luscher](https://github.com/steveluscher) working at [LeanPub](https://leanpub.com/) made a 30 min talk at [Super VanJS](https://twitter.com/vanjs). He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.
-
-<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## React Tips
-
-[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](http://facebook.github.io/react/tips/introduction.html)!
-
-- [Inline Styles](http://facebook.github.io/react/tips/inline-styles.html)
-- [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)
-- [Self-Closing Tag](http://facebook.github.io/react/tips/self-closing-tag.html)
-- [Maximum Number of JSX Root Nodes](http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html)
-- [Shorthand for Specifying Pixel Values in style props](http://facebook.github.io/react/tips/style-props-value-px.html)
-- [Type of the Children props](http://facebook.github.io/react/tips/children-props-type.html)
-- [Value of null for Controlled Input](http://facebook.github.io/react/tips/controlled-input-null-value.html)
-- [`componentWillReceiveProps` Not Triggered After Mounting](http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
-- [Props in getInitialState Is an Anti-Pattern](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)
-- [DOM Event Listeners in a Component](http://facebook.github.io/react/tips/dom-event-listeners.html)
-- [Load Initial Data via AJAX](http://facebook.github.io/react/tips/initial-ajax.html)
-- [False in JSX](http://facebook.github.io/react/tips/false-in-jsx.html)
-
-
-## Intro to the React Framework
-
-[Pavan Podila](http://blog.pixelingene.com/) wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.
-
-> Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
-<figure>[![](/react/img/blog/tutsplus.png)](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)</figure>
->
-> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
-
-
-## 140-characters textarea
-
-[Brian Kim](https://github.com/brainkim) wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.
-
-<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
-<script async src="//codepen.io/assets/embed/ei.js"></script>
-
-
-## Genesis Skeleton
-
-[Eric Clemmons](http://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
-<figure>[![](/react/img/blog/genesis_skeleton.png)](http://genesis-skeleton.com/)</figure>
-
-
-## AgFlow Talk
-
-[Robert Zaremba](http://rz.scale-it.pl/) working on [AgFlow](http://www.agflow.com/) recently talked in Poland about React.
-
-> In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.
->
-> During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!
->
-> [Read the full article...](http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html)
-
-<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
-
-
-## JSX
-
-[Todd Kennedy](http://tck.io/) working at Cond&eacute; Nast wrote [JSXHint](https://github.com/CondeNast/JSXHint) and explains in a blog post his perspective on JSX.
-
-> Lets start with the elephant in the room: JSX?
-> Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.
->
-> Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.
->
-> [Read the full article...](http://tck.io/posts/jsxhint_and_react.html)
-
-
-## Photo Gallery
-
-[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
-<figure>[![](/react/img/blog/xoxo2013.png)](http://photos.miekd.com/xoxo2013/)</figure>
-
-
-## Random Tweet
-
-<img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
-<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>&mdash; Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div>
\ No newline at end of file
diff --git a/docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md b/docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md
deleted file mode 100644
index f59462f2399..00000000000
--- a/docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: "React v0.5.2, v0.4.2"
-layout: post
-author: Paul O'Shannessy
----
-
-Today we're releasing an update to address a potential XSS vulnerability that can	 arise when using user data as a `key`. Typically "safe" data is used for a `key`, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
-
-This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.
-
-Updated versions are available for immediate download via npm, bower, and on our [download page][download].
-
-We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.
-
-While we've encouraged responsible disclosure as part of [Facebook's whitehat bounty program][bounty] since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has [an excellent policy][ember] which we may use as our model.
-
-You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
-
-[download]: http://facebook.github.io/react/downloads.html
-[bounty]: https://www.facebook.com/whitehat/
-[ember]: http://emberjs.com/security/
-[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU
-
diff --git a/docs/_posts/2013-12-19-react-v0.8.0.md b/docs/_posts/2013-12-19-react-v0.8.0.md
deleted file mode 100644
index 7c32d1de391..00000000000
--- a/docs/_posts/2013-12-19-react-v0.8.0.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: "React v0.8"
-layout: post
-author: Paul O'Shannessy
----
-
-I'll start by answering the obvious question:
-
-> What happened to 0.6 and 0.7?
-
-It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our `react-tools` module which includes React, but when browserifying that ends up packaging all of `esprima` and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.
-
-We talked with [Jeff Barczewski][jeff] who was the owner of the `react` module on npm. He was kind enough to transition ownership to us and release his package under a different name: `autoflow`. I encourage you to [check it out][autoflow] if you're writing a lot of asynchronous code. In order to not break all of `react`'s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our `react` module like you would use the previous package.
-
-In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.
-
-We hope that by releasing `react` on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!
-
-
-## Changelog
-
-### React
-
-* Added support for more attributes:
-  * `rows` & `cols` for `<textarea>`
-  * `defer` & `async` for `<script>`
-  * `loop` for `<audio>` & `<video>`
-  * `autoCorrect` for form fields (a non-standard attribute only supported by mobile WebKit)
-* Improved error messages
-* Fixed Selection events in IE11
-* Added `onContextMenu` events
-
-### React with Addons
-
-* Fixed bugs with TransitionGroup when children were undefined
-* Added support for `onTransition`
-
-### react-tools
-
-* Upgraded `jstransform` and `esprima-fb`
-
-### JSXTransformer
-
-* Added support for use in IE8
-* Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
-
-[jeff]: https://github.com/jeffbski
-[autoflow]: https://github.com/jeffbski/autoflow
diff --git a/docs/_posts/2013-12-23-community-roundup-12.md b/docs/_posts/2013-12-23-community-roundup-12.md
deleted file mode 100644
index 4710cb94ac0..00000000000
--- a/docs/_posts/2013-12-23-community-roundup-12.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: "Community Round-up #12"
-layout: post
-author: Vjeux
----
-
-React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/react/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](http://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
-
-## The Future of Javascript MVC
-
-[David Nolen](http://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
-
-> We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
->
-> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
->
-> A whole lot.
-> <figure>[![](/react/img/blog/om-backbone.png)](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
->
-> [Read the full article...](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
-
-
-
-## Scroll Position with React
-
-Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
-
-> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
->
-> ```
-componentWillUpdate: function() {
-  var node = this.getDOMNode();
-  this.shouldScrollBottom =
-    (node.scrollTop + node.offsetHeight) === node.scrollHeight;
-},
-componentDidUpdate: function() {
-  if (this.shouldScrollBottom) {
-    var node = this.getDOMNode();
-    node.scrollTop = node.scrollHeight
-  }
-},
-```
->
-> [Check out the blog article...](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html)
-
-
-## Lights Out
-
-React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](http://facebook.github.io/react/docs/animation.html) to implement animations.
-<figure>[![](/react/img/blog/lights-out.png)](http://chenglou.github.io/react-lights-out/)</figure>
-
-[Try it out!](http://chenglou.github.io/react-lights-out/)
-
-
-## Reactive Table Bookmarklet
-
-[Stoyan Stefanov](http://www.phpied.com/) wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
-<figure>[![](/react/img/blog/reactive-bookmarklet.png)](http://www.phpied.com/reactivetable-bookmarklet/)</figure>
-
-[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
-
-
-## MontageJS Tutorial in React
-
-[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-[View the source on JSFiddle...](http://jsfiddle.net/ssorallen/fEsYt/)
-
-## Writing Good React Components
-
-[William Högman Rudenmalm](http://blog.whn.se/) wrote an article on how to write good React components. This is full of good advice.
-
-> The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
->
-> The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.
->
-> You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.
->
-> [Read the full article ...](http://blog.whn.se/post/69621609605/writing-good-react-components)
-
-
-## Hoodie React TodoMVC
-
-[Sven Lito](http://svenlito.com/) integrated the React TodoMVC example within an [Hoodie](http://hood.ie/) web app environment. This should let you get started using Hoodie and React.
-
-```
-hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
-```
-
-[Check out on GitHub...](https://github.com/hoodiehq/hoodie-react-todomvc)
-
-## JSX Compiler
-
-Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
-<figure>[![](/react/img/blog/jsx-compiler.png)](http://facebook.github.io/react/jsx-compiler.html)</figure>
-
-[Try it out!](http://facebook.github.io/react/jsx-compiler.html)
-
-
-
-## Random Tweet
-
-<center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>
diff --git a/docs/_posts/2013-12-30-community-roundup-13.md b/docs/_posts/2013-12-30-community-roundup-13.md
deleted file mode 100644
index 21197470312..00000000000
--- a/docs/_posts/2013-12-30-community-roundup-13.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: "Community Round-up #13"
-layout: post
-author: Vjeux
----
-
-Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
-
-
-## React Touch
-
-[Pete Hunt](http://www.petehunt.net/) wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.
-
-<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
-
-[Try out the demos!](http://petehunt.github.io/react-touch/)
-
-
-## Introduction to React
-
-[Stoyan Stefanov](http://www.phpied.com/) talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## JSX: E4X The Good Parts
-
-JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.
-
-> E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.
->
-> **Historical Context**
->
-> E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.
->
-> [Continue reading ...](http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html)
-
-
-## React + Socket.io
-
-[Geert Pasteels](http://enome.be/nl) made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!
-
-```javascript
-changeHandler: function (data) {
-  if (!_.isEqual(data.state, this.state) && this.path === data.path) {
-    this.setState(data.state);
-  }
-},
-componentDidMount: function (root) {
-  this.path = utils.nodePath(root);
-  socket.on('component-change', this.changeHandler);
-},
-componentWillUpdate: function (props, state) {
-  socket.emit('component-change', { path: this.path, state: state });
-},
-componentWillUnmount: function () {
-  socket.removeListener('component-change', this.change);
-}
-```
-
-[Check it out on GitHub...](https://github.com/Enome/react.io)
-
-
-## cssobjectify
-
-[Andrey Popp](http://andreypopp.com/) implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.
-
-```javascript
-/* style.css */
-MyComponent {
-  font-size: 12px;
-  background-color: red;
-}
-
-/* myapp.js */
-var React = require('react-tools/build/modules/React');
-var Styles = require('./styles.css');
-
-var MyComponent = React.createClass({
-  render: function() {
-    return (
-      <div style={Styles.MyComponent}>
-        Hello, world!
-      </div>
-    )
-  }
-});
-```
-
-[Check it out on GitHub...](https://github.com/andreypopp/cssobjectify)
-
-
-## ngReact
-
-[David Chang](http://davidandsuzi.com/) working at [HasOffer](http://www.hasoffers.com/) wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.
-
-> Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
-> <figure>[![](/react/img/blog/ngreact.png)](http://davidandsuzi.com/ngreact-react-components-in-angular/)</figure>
->
-> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
-
-
-## vim-jsx
-
-[Max Wang](https://github.com/mxw) made a vim syntax highlighting and indentation plugin for vim.
-
-> Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.
->
-> This bundle requires pangloss's [vim-javascript](https://github.com/pangloss/vim-javascript) syntax highlighting.
->
-> Vim support for inline XML in JS is remarkably similar to the same for PHP.
->
-> [View on GitHub...](https://github.com/mxw/vim-jsx)
-
-
-## Random Tweet
-
-<center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>&mdash; Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center>
-
diff --git a/docs/_posts/2014-01-02-react-chrome-developer-tools.md b/docs/_posts/2014-01-02-react-chrome-developer-tools.md
deleted file mode 100644
index 69265f5ddea..00000000000
--- a/docs/_posts/2014-01-02-react-chrome-developer-tools.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: "React Chrome Developer Tools"
-layout: post
-author: Sebastian Markbåge
----
-
-With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
-
-You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.
-
-Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.
-
-When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
-<figure>[![](/react/img/blog/react-dev-tools.jpg)](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)</figure>
-
-We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept [pull requests on GitHub](https://github.com/facebook/react-devtools).
-
diff --git a/docs/_posts/2014-01-06-community-roundup-14.md b/docs/_posts/2014-01-06-community-roundup-14.md
deleted file mode 100644
index d440daeaf24..00000000000
--- a/docs/_posts/2014-01-06-community-roundup-14.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: "Community Round-up #14"
-layout: post
-author: Vjeux
----
-
-The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
-
-## React Baseline
-
-React is only one-piece of your web application stack. [Mark Lussier](https://github.com/intabulas) shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.
-
-> As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github
->
-> I encourage you to fork, and make it right and submit a pull request!
->
-> My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
->
-> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
-
-
-## Animal Sounds
-
-[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
-<figure>[![](/react/img/blog/animal-sounds.jpg)](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)</figure>
-
-[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
-
-
-## React Rails Tutorial
-
-[Selem Delul](http://selem.im) bundled the [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
-
-> ```
-git clone https://github.com/necrodome/react-rails-tutorial
-cd react-rails-tutorial
-bundle install
-rake db:migrate
-rails s
-```
-> Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!
->
-> [View on GitHub...](https://github.com/necrodome/react-rails-tutorial)
-
-## Mixing with Backbone
-
-[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
-
-
-## React Infinite Scroll
-
-[Guillaume Rivals](https://twitter.com/guillaumervls) implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
-
-```javascript
-<InfiniteScroll
-  pageStart={0}
-  loadMore={loadFunc}
-  hasMore={true || false}
-  loader={<div className="loader">Loading ...</div>}>
-  {items} // <-- This is the "stuff" you want to load
-</InfiniteScroll>
-```
-
-[Try it out on GitHub!](https://github.com/guillaumervls/react-infinite-scroll)
-
-
-## Web Components Style
-
-[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-
-## React vs Angular
-
-React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31/react-vs-angular/) wrote an opinionated post on the subject.
-
-> First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.
->
-> I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.
->
-> [Read the full post...](http://skulbuny.com/2013/10/31/react-vs-angular/)
-
-
-
-## Random Tweet
-
-<div><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I&#39;ve looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>&mdash; Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></div>
diff --git a/docs/_posts/2014-02-05-community-roundup-15.md b/docs/_posts/2014-02-05-community-roundup-15.md
deleted file mode 100644
index 8e0d4a1605f..00000000000
--- a/docs/_posts/2014-02-05-community-roundup-15.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: "Community Round-up #15"
-layout: post
-author: Jonas Gebhardt
----
-
-Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
-
-In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
-
-## "React: Another Level of Indirection"
-To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnormand)) of [LispCast](http://lispcast.com) makes the case for [React from a general functional programming standpoint](http://www.lispcast.com/react-another-level-of-indirection) and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".
-
-> The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.
->
-> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
-
-## Reagent: Minimalistic React for ClojureScript
-Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
-
-> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
->
-> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
->
-> [Check it out on Github...](http://holmsand.github.io/reagent/)
-
-
-## Functional DOM programming
-
-React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt ([@floydophone](https://twitter.com/floydophone)) explores how one would go about [writing web apps in a functional manner](https://medium.com/p/67d81637d43). Spoiler alert:
-
-> This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.
->
-> [Read the full post...](https://medium.com/p/67d81637d43)
-
-Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
-
-
-
-## Kioo: Separating markup and logic
-[Creighton Kirkendall](https://github.com/ckirkendall) created [Kioo](https://github.com/ckirkendall/kioo), which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.
-
-A basic example from github:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <body>
-    <header>
-      <h1>Header placeholder</h1>
-      <ul id="navigation">
-        <li class="nav-item"><a href="#">Placeholder</a></li>
-      </ul>
-    </header>
-    <div class="content">place holder</div>
-  </body>
-</html>
-```
-
-```clojure
-...
-
-(defn my-nav-item [[caption func]]
-  (kioo/component "main.html" [:.nav-item]
-    {[:a] (do-> (content caption)
-                (set-attr :onClick func))}))
-
-(defn my-header [heading nav-elms]
-  (kioo/component "main.html" [:header]
-    {[:h1] (content heading)
-     [:ul] (content (map my-nav-item nav-elms))}))
-
-(defn my-page [data]
-  (kioo/component "main.html"
-    {[:header] (substitute (my-header (:heading data)
-                                      (:navigation data)))
-     [:.content] (content (:content data))}))
-
-(def app-state (atom {:heading    "main"
-                      :content    "Hello World"
-                      :navigation [["home" #(js/alert %)]
-                                   ["next" #(js/alert %)]]}))
-
-(om/root app-state my-page (.-body js/document))
-```
-
-## Om
-
-In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com/tcoupland)) of InfoQ provides a nice summary of recent developments around Om ("[Om: Enhancing Facebook's React with Immutability](http://www.infoq.com/news/2014/01/om-react)").
-
-> David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.
->
-> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)
-
-### A slice of React, ClojureScript and Om
-
-Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrote part of the [React tutorial in both ClojureScript and Om](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html), along with short, helpful explanations.
-
-> React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.
->
-> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html)
-
-In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om.
-
-[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
-
-### Time Travel: Implementing undo in Om
-David Nolen shows how to leverage immutable data structures to [add global undo](http://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
-
-### A Step-by-Step Om Walkthrough
-
-[Josh Lehman](http://www.joshlehman.me) took the time to create an extensive [step-by-step walkthrough](http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/) of the React tutorial in Om. The well-documented source is on [github](https://github.com/jalehman/omtut-starter).
-
-### Omkara
-
-[brendanyounger](https://github.com/brendanyounger) created [omkara](https://github.com/brendanyounger/omkara), a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.
-
-### Om Experience Report
-Adam Solove ([@asolove](https://twitter.com/asolove/)) [dives a little deeper into Om, React and ClojureScript](http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html). He shares some helpful tips he gathered while building his [CartoCrayon](https://github.com/asolove/carto-crayon) prototype.
-
-## Not-so-random Tweet
-
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
diff --git a/docs/_posts/2014-02-15-community-roundup-16.md b/docs/_posts/2014-02-15-community-roundup-16.md
deleted file mode 100644
index 02ec66cc41b..00000000000
--- a/docs/_posts/2014-02-15-community-roundup-16.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: "Community Round-up #16"
-layout: post
-author: Jonas Gebhardt
----
-
-There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
-
-
-## React in a nutshell
-Got five minutes to pitch React to your coworkers? John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) put together [this excellent and refreshing slideshow](http://slid.es/johnlynch/reactjs):
-
-<iframe src="//slid.es/johnlynch/reactjs/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
-
-
-## React's diff algorithm
-
-React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[![](/react/img/blog/react-diff-tree.png)](http://calendar.perfplanet.com/2013/diff/)</figure>
-
-While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitter.com/MatthewEsch)) created [this project](https://github.com/Matt-Esch/virtual-dom), which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.
-
-
-
-
-## Many, many new introductions to React!
-
-
-
-James Padosley wrote a short post on the basics (and merits) of React: [What is React?](http://james.padolsey.com/javascript/what-is-react/)
-> What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.
-
-> [Read the full post...](http://james.padolsey.com/javascript/what-is-react/)
-
-Taylor Lapeyre ([@taylorlapeyre](https://twitter.com/taylorlapeyre)) wrote another nice [introduction to React](http://words.taylorlapeyre.me/an-introduction-to-react).
-
-> React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.
-
-> [Read the full post...](http://words.taylorlapeyre.me/an-introduction-to-react)
-
-
-[This "Deep explanation for newbies"](http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs) by [@ProJavaScript](https://twitter.com/ProJavaScript) explains how to get started building a React game without using the optional JSX syntax.
-
-### React around the world
-
-It's great to see the React community expand internationally. [This site](http://habrahabr.ru/post/189230/) features a React introduction in Russian.
-
-### React tutorial series
-
-[Christopher Pitt](https://medium.com/@followchrisp) explains [React Components](https://medium.com/react-tutorials/828c397e3dc8) and [React Properties](https://medium.com/react-tutorials/ef11cd55caa0). The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the [other posts in his React Tutorial series](https://medium.com/react-tutorials), e.g. on using [React + Backbone Model](https://medium.com/react-tutorials/8aaec65a546c) and [React + Backbone Router](https://medium.com/react-tutorials/c00be0cf1592).
-
-### Beginner tutorial: Implementing the board game Go
-
-[Chris LaRose](http://cjlarose.com/) walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his [tutorial](http://cjlarose.com/2014/01/09/react-board-game-tutorial.html) or go straight to the [code](https://github.com/cjlarose/react-go).
-
-### Egghead.io video tutorials
-
-Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube.com/watch?v=5yvFLrt7N8M)]
-
-### "React: Finally, a great server/client web stack"
-
-Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on what makes React perfect for server rendering:
-
-> [...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]
-
-> What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.
-
-> [Read the full post...](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/)
-
-## Building a complex React component
-[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[![](/react/img/blog/resistance-calculator.png)](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
-
-
-
-## Random Tweets
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>&mdash; Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>&mdash; Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>&mdash; andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>&mdash; julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
-</p>&mdash; Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
diff --git a/docs/_posts/2014-02-16-react-v0.9-rc1.md b/docs/_posts/2014-02-16-react-v0.9-rc1.md
deleted file mode 100644
index bee75e5fb2f..00000000000
--- a/docs/_posts/2014-02-16-react-v0.9-rc1.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: React v0.9 RC
-layout: post
-author: Ben Alpert
----
-
-We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.
-
-The release candidate is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.9.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.9.0-rc1.min.js>
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.9.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.9.0-rc1.min.js>
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.9.0-rc1.js>
-
-We've also published version `0.9.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
-
-## Upgrade Notes
-
-In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
-
-```html
-<div>
-  Monkeys:
-  {listOfMonkeys} {submitButton}
-</div>
-```
-
-In v0.8 and below, it was transformed to the following:
-
-```javascript
-React.DOM.div(null,
-  " Monkeys: ",
-  listOfMonkeys, submitButton
-)
-```
-
-In v0.9, it will be transformed to this JS instead:
-
-```javascript{2,3}
-React.DOM.div(null,
-  "Monkeys:",
-  listOfMonkeys, " ", submitButton
-)
-```
-
-We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
-
-In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
-- On mouse wheel events, `deltaY` is no longer negated
-- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
-- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
-- `this.context` on components is now reserved for internal use by React
-
-#### New Features
-
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
-- Added a new tool for profiling React components and identifying places where defining `shouldComponentUpdate` can give performance improvements
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
-- Added support for more attributes:
-  - `noValidate` and `formNoValidate` for forms
-  - `property` for Open Graph `<meta>` tags
-  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
-  - `scope` for screen readers
-  - `span` for `<colgroup>` tags
-- Added support for defining `propTypes` in mixins
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
-- Added support for `statics` on component spec for static component methods
-- On all events, `.currentTarget` is now properly set
-- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
-- On clipboard events, `.clipboardData` is now polyfilled in IE
-- On drag events, `.dataTransfer` is now present
-- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
-- Added support for `onLoad` and `onError` on `<img>` elements
-- Added support for `onReset` on `<form>` elements
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
-
-#### Bug Fixes
-
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
-- Fixed a case where nesting top-level components would throw an error when updating
-- Passing an invalid or misspelled propTypes type now throws an error
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
-- On composition events, `.data` is now properly normalized in IE9 and IE10
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
-- Fixed a memory leak when `renderComponentToString` would store event handlers
-- Fixed an error that could be thrown when removing form elements during a click handler
-- `key` values containing `.` are now supported
-- Shortened `data-reactid` values for performance
-- Components now always remount when the `key` property changes
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
-- General performance fixes, memory optimizations, improvements to warnings and error messages
-
-### React with Addons
-
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
-- Performance optimizations for CSSTransitionGroup
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
-
-### JSX Compiler and react-tools Package
-
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
-- `JSXTransformer` now uses source maps automatically in modern browsers
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
diff --git a/docs/_posts/2014-02-20-react-v0.9.md b/docs/_posts/2014-02-20-react-v0.9.md
deleted file mode 100644
index 95c6aa9e1d0..00000000000
--- a/docs/_posts/2014-02-20-react-v0.9.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: React v0.9
-layout: post
-author: Ben Alpert
----
-
-I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!
-
-Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.
-
-As always, the release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.9.0.js>  
-  Minified build for production: <http://fb.me/react-0.9.0.min.js>
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.9.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.9.0.min.js>
-* **In-Browser JSX Transformer**  
-  <http://fb.me/JSXTransformer-0.9.0.js>
-
-We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-## What’s New?
-
-This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
-
-We've also added to the add-ons build [React.addons.TestUtils](/react/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
-
-We've also made several other improvements and a few breaking changes; the full changelog is provided below.
-
-## JSX Whitespace
-
-In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
-
-```html
-<div>
-  Monkeys:
-  {listOfMonkeys} {submitButton}
-</div>
-```
-
-In v0.8 and below, it was transformed to the following:
-
-```javascript
-React.DOM.div(null,
-  " Monkeys: ",
-  listOfMonkeys, submitButton
-)
-```
-
-In v0.9, it will be transformed to this JS instead:
-
-```javascript{2,3}
-React.DOM.div(null,
-  "Monkeys:",
-  listOfMonkeys, " ", submitButton
-)
-```
-
-We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
-
-In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
-- On mouse wheel events, `deltaY` is no longer negated
-- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)
-- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
-- `this.context` on components is now reserved for internal use by React
-
-#### New Features
-
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
-- Added support for more attributes:
-  - `crossOrigin` for CORS requests
-  - `download` and `hrefLang` for `<a>` tags
-  - `mediaGroup` and `muted` for `<audio>` and `<video>` tags
-  - `noValidate` and `formNoValidate` for forms
-  - `property` for Open Graph `<meta>` tags
-  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
-  - `scope` for screen readers
-  - `span` for `<colgroup>` tags
-- Added support for defining `propTypes` in mixins
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
-- Added support for `statics` on component spec for static component methods
-- On all events, `.currentTarget` is now properly set
-- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
-- On clipboard events, `.clipboardData` is now polyfilled in IE
-- On drag events, `.dataTransfer` is now present
-- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
-- Added support for `onLoad` and `onError` on `<img>` elements
-- Added support for `onReset` on `<form>` elements
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
-
-#### Bug Fixes
-
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
-- Fixed a case where nesting top-level components would throw an error when updating
-- Passing an invalid or misspelled propTypes type now throws an error
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
-- On composition events, `.data` is now properly normalized in IE9 and IE10
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
-- Fixed a memory leak when `renderComponentToString` would store event handlers
-- Fixed an error that could be thrown when removing form elements during a click handler
-- Boolean attributes such as `disabled` are rendered without a value (previously `disabled="true"`, now simply `disabled`)
-- `key` values containing `.` are now supported
-- Shortened `data-reactid` values for performance
-- Components now always remount when the `key` property changes
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
-- General performance fixes, memory optimizations, improvements to warnings and error messages
-
-### React with Addons
-
-- `React.addons.TestUtils` was added to help write unit tests
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
-- Performance optimizations for CSSTransitionGroup
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
-
-### JSX Compiler and react-tools Package
-
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
-- `JSXTransformer` now uses source maps automatically in modern browsers
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
diff --git a/docs/_posts/2014-02-24-community-roundup-17.md b/docs/_posts/2014-02-24-community-roundup-17.md
deleted file mode 100644
index ec2d98f8a3e..00000000000
--- a/docs/_posts/2014-02-24-community-roundup-17.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: "Community Round-up #17"
-layout: post
-author: Jonas Gebhardt
----
-
-
-It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
-
-## React in the Real World
-
-### Facebook Lookback video editor
-Large parts of Facebook's web frontend are already powered by React. The recently released Facebook [Lookback video and its corresponding editor](https://www.facebook.com/lookback/edit/) are great examples of a complex, real-world React app.
-
-### Russia's largest bank is now powered by React
-Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
-
-### Relato
-[Relato](http://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it's super fast!
-
-### Makona Editor
-
- John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
-<figure>[![](/react/img/blog/makona-editor.png)](http://johnthethird.github.io/makona-editor/)</figure>
-
-### Create Chrome extensions using React
-React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
-
-
-### Twitter Streaming Client
-
-Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a simple [twitter streaming client using node, socket.io and React](http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/).
-
-
-### Sproutsheet
-
-[Sproutsheet](http://sproutsheet.com/) is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.
-
-### Instant Domain Search
-[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
-
-
-### SVG-based graphical node editor
-[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](http://forresto.github.io/prototyping/react/) in React.
- <figure>[![](/react/img/blog/react-svg-fbp.png)](http://forresto.github.io/prototyping/react/)</figure>
-
-
-### Ultimate Tic-Tac-Toe Game in React
-Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](http://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
-
-
-
-### ReactJS Gallery
-
-[Emanuele Rampichini](https://github.com/lele85)'s [ReactJS Gallery](https://github.com/lele85/ReactGallery) is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.
-
-Emanuele shared this awesome demo video with us:
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
-
-
-
-## React Components
-
-
-### Table Sorter
-[Table Sorter](http://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
-
-### Static-search
-
-Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search indexer](https://github.com/dchest/static-search) in Go, along with a [React-based web front-end](http://www.codingrobots.com/search/) that consumes search result via JSON.
-
-### Lorem Ipsum component
-
-[Martin Andert](https://github.com/martinandert) created [react-lorem-component](https://github.com/martinandert/react-lorem-component), a simple component for all your placeholding needs.
-
-### Input with placeholder shim
-[react-input=placeholder](https://github.com/enigma-io/react-input-placeholder) by [enigma-io](https://github.com/enigma-io) is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
-
-### diContainer
-
-[dicontainer](https://github.com/SpektrumFM/dicontainer) provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.
-
-
-## React server rendering
-
-Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](http://twitter.com/hichaelmart)) walks through the necessary steps.
-
-Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
-
-
-
-## Random Tweet
-
-<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
diff --git a/docs/_posts/2014-03-14-community-roundup-18.md b/docs/_posts/2014-03-14-community-roundup-18.md
deleted file mode 100644
index 275c8fc307d..00000000000
--- a/docs/_posts/2014-03-14-community-roundup-18.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: "Community Round-up #18"
-layout: post
-author: Jonas Gebhardt
----
-
-In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
-
-## "Little framework BIG splash"
-
-Let's start with yet another refreshing introduction to React: Craig Savolainen ([@maedhr](https://twitter.com/maedhr)) walks through some first steps, demonstrating [how to build a Google Maps component](http://infinitemonkeys.influitive.com/little-framework-big-splash) using React.
-
-## Architecting your app with react
-
-Brandon Konkle ([@bkonkle](https://twitter.com/bkonkle))
-[Architecting your app with react](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
-We're looking forward to part 2!
-
-> React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.
->
-> [Read the full article...](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
-
-## React vs. async DOM manipulation
-
-Eliseu Monar ([@eliseumds](https://twitter.com/eliseumds))'s post "[ReactJS vs async concurrent rendering](http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering)" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.
-
-
-
-## React, Scala and the Play Framework
-[Matthias Nehlsen](http://matthiasnehlsen.com/) wrote a detailed introductory piece on [React and the Play Framework](http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/), including a helpful architectural diagram of a typical React app.
-
-Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.
-
-In [another article](http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/), he walks us through the process of using React with scala.js to implement app-wide undo functionality.
-
-Also check out his [talk](http://m.ustream.tv/recorded/42780242) at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.
-
-## React and Backbone
-
-The folks over at [Venmo](https://venmo.com/) are using React in conjunction with Backbone.
-Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detailed piece](http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html) about why React and Backbone are "a fantastic pairing".
-
-## React vs. Ember
-
-Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
-
-
-## React and plain old HTML
-
-Daniel Lo Nigro ([@Daniel15](https://twitter.com/Daniel15)) created [React-Magic](https://github.com/reactjs/react-magic), which leverages React to ajaxify plain old html pages and even [allows CSS transitions between pageloads](http://stuff.dan.cx/facebook/react-hacks/magic/red.php).
-
-> React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.
->
-> [Check out the project on GitHub...](https://github.com/reactjs/react-magic)
-
-On a related note, [Reactize](https://turbo-react.herokuapp.com/) by Ross Allen ([@ssorallen](https://twitter.com/ssorallen)) is a similarly awesome project: A wrapper for Rails' [Turbolinks](https://github.com/rails/turbolinks/), which seems to have inspired John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) to then create [a server-rendered version using the JSX transformer in Rails middleware](http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/).
-
-## React and Object.observe
-Check out [François de Campredon](https://github.com/fdecampredon)'s implementation of [TodoMVC based on React and ES6's Object.observe](https://github.com/fdecampredon/react-observe-todomvc/).
-
-
-## React and Angular
-
-Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [explains why he "decided to go with React instead of Angular.js"](https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE).
-
-### ng-React Update
-
-[David Chang](https://github.com/davidchang) works through some performance improvements of his [ngReact](https://github.com/davidchang/ngReact) project. His post ["ng-React Update - React 0.9 and Angular Track By"](http://davidandsuzi.com/ngreact-update/) includes some helpful advice on boosting render performance for Angular components.
-
-> Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.
->
-> That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.
->
->[Read the full post...](http://davidandsuzi.com/ngreact-update/)
-
-
-React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
-
-## React and Web Components
-
-Jonathan Krause ([@jonykrause](https://twitter.com/jonykrause)) offers his thoughts regarding [parallels between React and Web Components](http://jonykrau.se/posts/the-value-of-react), highlighting the value of React's ability to render pages on the server practically for free.
-
-## Immutable React
-
-[Peter Hausel](http://pk11.kinja.com/) shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to [mori](https://npmjs.org/package/mori)), really taking advantage of the framework's one-way reactive data binding:
-
-> Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.
-
-> [Read the full post](http://tech.kinja.com/immutable-react-1495205675)
-
-
-## D3 and React
-
-[Ben Smith](http://10consulting.com/) built some great SVG-based charting components using a little less of D3 and a little more of React: [D3 and React - the future of charting components?](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)
-
-## Om and React
-Josh Haberman ([@joshhaberman](https://twitter.com/JoshHaberman)) discusses performance differences between React, Om and traditional MVC frameworks in "[A closer look at OM vs React performance](http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html)".
-
-Speaking of Om: [Omchaya](https://github.com/sgrove/omchaya) by Sean Grove ([@sgrove](https://twitter.com/sgrove)) is a neat Cljs/Om example project.
-
-
-## Random Tweets
-
-<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
diff --git a/docs/_posts/2014-03-19-react-v0.10-rc1.md b/docs/_posts/2014-03-19-react-v0.10-rc1.md
deleted file mode 100644
index 92cd75eb916..00000000000
--- a/docs/_posts/2014-03-19-react-v0.10-rc1.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: React v0.10 RC
-layout: post
-author: Paul O’Shannessy
----
-
-[v0.9 has only been out for a month](http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
-
-The release candidate is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.10.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.10.0-rc1.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.10.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.10.0-rc1.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.10.0-rc1.js>
-
-We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
-
-## Clone On Mount
-
-The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
-
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
-
-Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
-
-```js
-// This is a common pattern. However instance here really refers to a
-// "descriptor", not necessarily the mounted instance.
-var instance = <MyComponent/>;
-React.renderComponent(instance);
-// ...
-instance.setProps(...);
-
-// The change here is very simple. The return value of renderComponent will be
-// the mounted instance.
-var instance = React.renderComponent(<MyComponent/>)
-// ...
-instance.setProps(...);
-```
-
-These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
-
-The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
-
-## Changelog
-
-### React Core
-
-#### New Features
-* Added warnings to help migrate towards descriptors
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
-* Added support for more attributes:
-  * `srcSet` for `<img>` to specify images at different pixel ratios
-  * `textAnchor` for SVG
-
-#### Bug Fixes
-* Ensure all void elements don’t insert a closing tag into the markup.
-* Ensure `className={false}` behaves consistently
-* Ensure `this.refs` is defined, even if no refs are specified.
-
-### Addons
-
-* `update` function to deal with immutable data. [Read the docs](/react/docs/update.html)
-
-### react-tools
-* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
diff --git a/docs/_posts/2014-03-21-react-v0.10.md b/docs/_posts/2014-03-21-react-v0.10.md
deleted file mode 100644
index 0bcda6277c8..00000000000
--- a/docs/_posts/2014-03-21-react-v0.10.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: React v0.10
-layout: post
-author: Paul O’Shannessy
----
-
-Hot on the heels of the [release candidate earlier this week](/react/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
-
-The release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.10.0.js>  
-  Minified build for production: <http://fb.me/react-0.10.0.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.10.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.10.0.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.10.0.js>
-
-We've also published version `0.10.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
-
-## Clone On Mount
-
-The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
-
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
-
-Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
-
-```js
-// This is a common pattern. However instance here really refers to a
-// "descriptor", not necessarily the mounted instance.
-var instance = <MyComponent/>;
-React.renderComponent(instance);
-// ...
-instance.setProps(...);
-
-// The change here is very simple. The return value of renderComponent will be
-// the mounted instance.
-var instance = React.renderComponent(<MyComponent/>)
-// ...
-instance.setProps(...);
-```
-
-These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
-
-The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
-
-## Changelog
-
-### React Core
-
-#### New Features
-* Added warnings to help migrate towards descriptors
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
-* Added support for more attributes:
-  * `srcSet` for `<img>` to specify images at different pixel ratios
-  * `textAnchor` for SVG
-
-#### Bug Fixes
-* Ensure all void elements don’t insert a closing tag into the markup.
-* Ensure `className={false}` behaves consistently
-* Ensure `this.refs` is defined, even if no refs are specified.
-
-### Addons
-
-* `update` function to deal with immutable data. [Read the docs](/react/docs/update.html)
-
-### react-tools
-* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
-
diff --git a/docs/_posts/2014-03-28-the-road-to-1.0.md b/docs/_posts/2014-03-28-the-road-to-1.0.md
deleted file mode 100644
index bf21a7659b3..00000000000
--- a/docs/_posts/2014-03-28-the-road-to-1.0.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: The Road to 1.0
-layout: post
-author: Paul O'Shannessy
----
-
-When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.
-
-Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.
-
-## Descriptors
-
-The first part of this is what we're calling "descriptors". I talked about this briefly in our [v0.10 announcements][v0.10]. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. `React.DOM.div()`, `MyComponent()`) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.
-
-We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.
-
-## API Cleanup
-
-This is really connected to everything. We want to keep the API as simple as possible and help developers [fall into the pit of success][pitofsuccess]. Enabling bad patterns with bad APIs is not success.
-
-## ES6
-
-Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling `React.createClass(...)` isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:
-
-```js
-class MyComponent extends React.Component {
-  render() {
-    ...
-  }
-}
-```
-
-There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The `jsx` executable we ship with `react-tools` already supports transforming many parts of ES6 into code that will run on older browsers.
-
-## Context
-
-While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
-
-## Addons
-
-As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".
-
-## Browser Support
-
-As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.
-
-## Animations
-
-Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.
-
-## Miscellaneous
-
-There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
-
-[v0.10]: http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html
-[pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
-[projects]: https://github.com/facebook/react/wiki/Projects
diff --git a/docs/_posts/2014-04-04-reactnet.md b/docs/_posts/2014-04-04-reactnet.md
deleted file mode 100644
index 84f252c32dd..00000000000
--- a/docs/_posts/2014-04-04-reactnet.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Use React and JSX in ASP.NET MVC"
-layout: post
-author: Daniel Lo Nigro
----
-
-Today we're happy to announce the initial release of
-[ReactJS.NET](http://reactjs.net/), which makes it easier to use React and JSX
-in .NET applications, focusing specifically on ASP.NET MVC web applications.
-It has several purposes:
-
- - On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
-   will be compiled and cached server-side.
-
-   ```html
-   <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
-   ```
- - JSX to JavaScript compilation via popular minification/combination libraries
-   (Cassette and ASP.NET Bundling and Minification). This is suggested for
-   production websites.
- - Server-side component rendering to make your initial render super fast.
-
-Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
-Web Forms applications as well as non-web applications (for example, in build
-scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
-on support for Linux and Mac OS X via Mono as well.
-
-Installation
-------------
-ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
-package manager console or search NuGet for "React" to install it.
-[See the documentation](http://reactjs.net/docs) for more information. The
-GitHub project contains
-[a sample website](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4)
-demonstrating all of the features.
-
-Let us know what you think, and feel free to send through any feedback and
-report bugs [on GitHub](https://github.com/reactjs/React.NET).
diff --git a/docs/_posts/2014-05-06-flux.md b/docs/_posts/2014-05-06-flux.md
deleted file mode 100644
index a852ab380dc..00000000000
--- a/docs/_posts/2014-05-06-flux.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: "Flux: An Application Architecture for React"
-layout: post
-author: Bill Fisher and Jing Chen
----
-
-We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React.  Check out the video here:
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
-
-To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.
-
-In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.
-
-When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
-
-Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/react/tree/master/examples/todomvc-flux) is available, along with more [detailed documentation](http://facebook.github.io/react/docs/flux-overview.html) and a [tutorial](http://facebook.github.io/react/docs/flux-todo-list.html). Look for more examples to come in the future.
diff --git a/docs/_posts/2014-05-29-one-year-of-open-source-react.md b/docs/_posts/2014-05-29-one-year-of-open-source-react.md
deleted file mode 100644
index 3447da00eb5..00000000000
--- a/docs/_posts/2014-05-29-one-year-of-open-source-react.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: "One Year of Open-Source React"
-layout: post
-author: Cheng Lou
----
-
-Today marks the one-year open-source anniversary of React.
-
-It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
-
-Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
-
-Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.
-
-Here’s to another year!
diff --git a/docs/_posts/2014-06-27-community-roundup-19.md b/docs/_posts/2014-06-27-community-roundup-19.md
deleted file mode 100644
index 165a72cdf03..00000000000
--- a/docs/_posts/2014-06-27-community-roundup-19.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Community Round-up #19"
-layout: post
-author: Cheng Lou
----
-
-## React Meetups!
-Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in [San Francisco](http://www.meetup.com/ReactJS-San-Francisco/) (courtesy of [Telmate](http://www.telmate.com)), and one in [London](http://www.meetup.com/London-React-User-Group/) (courtesy of [Stuart Harris](http://www.meetup.com/London-React-User-Group/members/105837542/), [Cain Ullah](http://www.meetup.com/London-React-User-Group/members/15509971/) and [Zoe Merchant](http://www.meetup.com/London-React-User-Group/members/137058242/)). These two events have been big successes; a second one in London is [already planned](http://www.meetup.com/London-React-User-Group/events/191406572/).
-
-If you don't live near San Francisco or London, why not start one in your community?
-
-## Complementary Tools
-In case you haven't seen it, we've consolidated the tooling solution around React on [this wiki page](https://github.com/facebook/react/wiki/Complementary-Tools). Some of the notable recent entries include:
-
-- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
-
-- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](http://react-bootstrap.github.io/components.html) features live-editable demos.
-
-- [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
-
-These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!
-
-## React in Interesting Places
-
-The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like [Bruce Hauman](http://rigsomelight.com)'s [Flappy Bird ClojureScript port](http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html), whose interactive programming has been made possible through React:
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
-
-And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
-
-[![](/react/img/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)
-
-Give us a shoutout on IRC or [React Google Groups](https://groups.google.com/forum/#!forum/reactjs) if you've used React in some Interesting places.
-
-## Even More People Using React
-
-### Prismatic
-[Prismatic](http://getprismatic.com/home) recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, [Om](https://github.com/swannodette/om). They detailed their very positive experience [here](http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/).
-
-> Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.
-
-### Adobe Brackets
-[Kevin Dangoor](http://www.kevindangoor.com) works on [Brackets](http://brackets.io/?lang=en), the open-source code editor. After writing [his first impression on React](http://www.kevindangoor.com/2014/05/simplifying-code-with-react/), he followed up with another insightful [article](http://www.kevindangoor.com/2014/05/react-in-brackets/) on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.
-
-> We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.
-
-### Storehouse
-[Storehouse](https://www.storehouse.co) (Apple Design Award 2014)'s web presence is build with React. Here's [an example story](https://www.storehouse.co/stories/y2ad-mexico-city-clouds). Congratulations on the award!
-
-### Vim Awesome
-[Vim Awesome](http://vimawesome.com), an open-source Vim plugins directory built on React, was just launched. Be sure to [check out the source code](https://github.com/divad12/vim-awesome) if you're curious to see an example of how to build a small single-page React app.
-
-## Random Tweets
-
-<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we&#39;ve been doing JS frameworks wrong until now. React makes me happy.</p>&mdash; Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
diff --git a/docs/_posts/2014-07-13-react-v0.11-rc1.md b/docs/_posts/2014-07-13-react-v0.11-rc1.md
deleted file mode 100644
index 17417196a6f..00000000000
--- a/docs/_posts/2014-07-13-react-v0.11-rc1.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: React v0.11 RC
-layout: post
-author: Paul O’Shannessy
----
-
-It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
-
-The release candidate is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.11.0-rc1.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.0-rc1.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.0-rc1.js>
-
-We've also published version `0.11.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
-
-
-## `getDefaultProps`
-
-Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
-
-
-## Rendering to `null`
-
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
-
-```js
-// Before
-render: function() {
-  if (!this.state.visible) {
-    return <span/>;
-  }
-  // ...
-}
-
-// After
-render: function() {
-  if (!this.state.visible) {
-    return null;
-  }
-  // ...
-}
-```
-
-
-## JSX Namespacing
-
-Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
-
-```js
-// Before
-var UI = require('UI');
-var UILayout = UI.Layout;
-var UIButton = UI.Button;
-var UILabel = UI.Label;
-
-render: function() {
-  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
-}
-
-// After
-var UI = require('UI');
-
-render: function() {
-  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
-}
-```
-
-
-## Improved keyboard event normalization
-
-Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
-
-```js
-handleKeyDown: function(e) {
-  if (e.key === 'Enter') {
-    // Handle enter key
-  } else if (e.key === ' ') {
-    // Handle spacebar
-  } else if (e.key === 'ArrowLeft') {
-    // Handle left arrow
-  }
-},
-```
-
-Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-* `getDefaultProps()` is now called once per class and shared across all instances
-
-#### New Features
-* Rendering to `null`
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
-* New normalized `onBeforeInput` event
-* `React.Children.count` has been added as a helper for counting the number of children
-
-#### Bug Fixes
-
-* Re-renders are batched in more cases
-* Events: `e.view` properly normalized
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
-* Improved SVG support
-  * Changing `className` on a mounted SVG component now works correctly
-  * Added support for elements `mask` and `tspan`
-  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
-* Added explicit warning when missing polyfills
-
-### React With Addons
-* PureRenderMixin
-* Perf: a new set of tools to help with performance analysis
-* Update: New `$apply` command to transform values
-* TransitionGroup bug fixes with null elements, Android
-
-### React NPM Module
-* Now includes the pre-built packages under `dist/`.
-* `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX
-* Added support for namespaces, eg `<Components.Checkbox />`
-* JSXTransformer
-  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
-  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
-  * Fixed a bug preventing sourcemaps from working in Firefox
-
-### React Tools Module
-* Improved readme with usage and API information
-* Improved ES6 transforms available with `--harmony` option
-* Added `--source-map-inline` option to the `jsx` executable
-* New `transformWithDetails` API which gives access to the raw sourcemap data
-
-
diff --git a/docs/_posts/2014-07-17-react-v0.11.md b/docs/_posts/2014-07-17-react-v0.11.md
deleted file mode 100644
index 10e305c727f..00000000000
--- a/docs/_posts/2014-07-17-react-v0.11.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: React v0.11
-layout: post
-author: Paul O’Shannessy
----
-
-**Update:** We missed a few important changes in our initial post and changelog. We've updated this post with details about [Descriptors](#descriptors) and [Prop Type Validation](#prop-type-validation).
-
-- - -
-
-We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using `jsx --harmony`, fixed a small regression with `statics`, and made sure we actually exposed the new API we said we were shipping: `React.Children.count`.
-
-
-This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
-
-The release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.0.js>  
-  Minified build for production: <http://fb.me/react-0.11.0.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.0.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.0.js>
-
-We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
-
-
-## `getDefaultProps`
-
-Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
-
-
-## Rendering to `null`
-
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
-
-```js
-// Before
-render: function() {
-  if (!this.state.visible) {
-    return <span/>;
-  }
-  // ...
-}
-
-// After
-render: function() {
-  if (!this.state.visible) {
-    return null;
-  }
-  // ...
-}
-```
-
-
-## JSX Namespacing
-
-Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
-
-```js
-// Before
-var UI = require('UI');
-var UILayout = UI.Layout;
-var UIButton = UI.Button;
-var UILabel = UI.Label;
-
-render: function() {
-  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
-}
-
-// After
-var UI = require('UI');
-
-render: function() {
-  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
-}
-```
-
-
-## Improved keyboard event normalization
-
-Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
-
-```js
-handleKeyDown: function(e) {
-  if (e.key === 'Enter') {
-    // Handle enter key
-  } else if (e.key === ' ') {
-    // Handle spacebar
-  } else if (e.key === 'ArrowLeft') {
-    // Handle left arrow
-  }
-},
-```
-
-Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
-
-## Descriptors
-
-In our [v0.10 release notes](http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
-
-Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.
-
-## Prop Type Validation
-
-Previously `React.PropTypes` validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply `console.log` your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (*not throw*) an `Error` object. We then log the `error.message` property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an `Error` with your message instead.
-
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-* `getDefaultProps()` is now called once per class and shared across all instances
-* `MyComponent()` now returns a descriptor, not an instance
-* `React.isValidComponent` and `React.PropTypes.component` validate *descriptors*, not component instances.
-* Custom `propType` validators should return an `Error` instead of logging directly
-
-#### New Features
-* Rendering to `null`
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
-* New normalized `onBeforeInput` event
-* `React.Children.count` has been added as a helper for counting the number of children
-
-#### Bug Fixes
-
-* Re-renders are batched in more cases
-* Events: `e.view` properly normalized
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
-* Improved SVG support
-  * Changing `className` on a mounted SVG component now works correctly
-  * Added support for elements `mask` and `tspan`
-  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
-* Added explicit warning when missing polyfills
-
-### React With Addons
-* PureRenderMixin: a mixin which helps optimize "pure" components
-* Perf: a new set of tools to help with performance analysis
-* Update: New `$apply` command to transform values
-* TransitionGroup bug fixes with null elements, Android
-
-### React NPM Module
-* Now includes the pre-built packages under `dist/`.
-* `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX
-* Added support for namespaces, eg `<Components.Checkbox />`
-* JSXTransformer
-  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
-  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
-  * Fixed a bug preventing sourcemaps from working in Firefox
-
-### React Tools Module
-* Improved readme with usage and API information
-* Improved ES6 transforms available with `--harmony` option
-* Added `--source-map-inline` option to the `jsx` executable
-* New `transformWithDetails` API which gives access to the raw sourcemap data
diff --git a/docs/_posts/2014-07-25-react-v0.11.1.md b/docs/_posts/2014-07-25-react-v0.11.1.md
deleted file mode 100644
index c241b3361ee..00000000000
--- a/docs/_posts/2014-07-25-react-v0.11.1.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: React v0.11.1
-layout: post
-author: Paul O’Shannessy
----
-
-Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.
-
-The first of these is the most major and resulted in a regression with the use of `setState` inside `componentWillMount` when using React on the server. These `setState` calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as `document` is not defined.
-
-There are several fixes we're including in v0.11.1 that are focused around the newly supported `event.getModifierState()` function. We made some adjustments to improve this cross-browser standardization.
-
-The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.
-
-We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around [Descriptors](/react/blog/2014/07/17/react-v0.11.html#descriptors) and [Prop Type Validation](/react/blog/2014/07/17/react-v0.11.html#prop-type-validation).
-
-The release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.1.js>  
-  Minified build for production: <http://fb.me/react-0.11.1.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.1.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.1.js>
-
-We've also published version `0.11.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
-
-## Changelog
-
-### React Core
-
-#### Bug Fixes
-* `setState` can be called inside `componentWillMount` in non-DOM environments
-* `SyntheticMouseEvent.getEventModifierState` correctly renamed to `getModifierState`
-* `getModifierState` correctly returns a `boolean`
-* `getModifierState` is now correctly case sensitive
-* Empty Text node used in IE8 `innerHTML` workaround is now removed, fixing rerendering in certain cases
-
-### JSXTransformer
-* Fix duplicate variable declaration (caused issues in some browsers)
diff --git a/docs/_posts/2014-07-28-community-roundup-20.md b/docs/_posts/2014-07-28-community-roundup-20.md
deleted file mode 100644
index 5c46bc16186..00000000000
--- a/docs/_posts/2014-07-28-community-roundup-20.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: "Community Round-up #20"
-layout: post
-author: Lou Husson
----
-
-It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
-
-## Atom moves to React
-
-[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
-
-[<img src="http://blog.atom.io/img/posts/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
-
-
-## Why Does React Scale?
-
-At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014).
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
-
-
-## Live Editing
-
-One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](http://gaearon.github.io/react-hot-loader/)!
-
-<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
-
-## ReactIntl Mixin by Yahoo
-
-There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an  [internationalization mixin](https://github.com/yahoo/react-intl). It's great to see them getting excited about React and contributing back to the community.
-
-```javascript
-var MyComponent = React.createClass({
-  mixins: [ReactIntlMixin],
-  render: function() {
-    return (
-      <div>
-        <p>{this.intlDate(1390518044403, { hour: 'numeric', minute: 'numeric' })}</p>
-        <p>{this.intlNumber(400, { style: 'percent' })}</p>
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <MyComponent locales={['fr-FR']} />,
-  document.getElementById('example')
-);
-```
-
-## Thinking and Learning React
-
-Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post [“Thinking and Learning React.js”](http://icelab.com.au/articles/thinking-and-learning-reactjs/) to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations. 
-
-
-## London React Meetup
-
-If you missed the last [London React Meetup](http://www.meetup.com/London-React-User-Group/events/191406572/), the video is available, with lots of great content. 
-
-- What's new in React 0.11 and how to improve performance by guaranteeing immutability
-- State handling in React with Morearty.JS
-- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
-- Building an isomorphic, real-time to-do list with moped and node.js
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
-
-In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
-
-
-## Using React and KendoUI Together
-
-One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/).
-
-<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/react/img/blog/kendoui.png" /></a></figure>
-
-
-## Acorn JSX
-
-Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a [JSX parser](https://github.com/RReverser/acorn-jsx) that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
-
-
-## ReactScriptLoader
-
-Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script.
-
-```javascript
-var Foo = React.createClass({
-  mixins: [ReactScriptLoaderMixin],
-  getScriptURL: function() {
-    return 'http://d3js.org/d3.v3.min.js';
-  },
-  getInitialState: function() {
-    return { scriptLoading: true, scriptLoadError: false };
-  },
-  onScriptLoaded: function() {
-    this.setState({scriptLoading: false});
-  },
-  onScriptError: function() {
-    this.setState({scriptLoading: false, scriptLoadError: true});
-  },
-  render: function() {
-    var message = 
-      this.state.scriptLoading ? 'Loading script...' :
-      this.state.scriptLoadError ? 'Loading failed' :
-      'Loading succeeded';
-    return <span>{message}</span>;
-  }
-});
-```
-
-## Random Tweet
-
-<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>&mdash; Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
-
diff --git a/docs/_posts/2014-07-30-flux-actions-and-the-dispatcher.md b/docs/_posts/2014-07-30-flux-actions-and-the-dispatcher.md
deleted file mode 100644
index 7075b900dcc..00000000000
--- a/docs/_posts/2014-07-30-flux-actions-and-the-dispatcher.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: "Flux: Actions and the Dispatcher"
-layout: post
-author: Bill Fisher
----
-
-Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow.  We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](http://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](http://facebook.github.io/flux/docs/todo-list.html).
-
-Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](http://facebook.github.io/flux/), we've now open sourced the same [dispatcher](http://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
-
-
-Where the Dispatcher Fits in the Flux Data Flow
------------------------------------------------
-
-The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each _store_ registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.
-
-
-Actions and ActionCreators
---------------------------
-
-When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an _action_ — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.
-
-Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
-
-Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
-
-<img src="/react/img/blog/flux-diagram.png" style="width: 100%;" />
-
-
-Why We Need a Dispatcher
-------------------------
-
-As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.  
-
-The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.
-
-Further, the waitFor() method may be used in different ways for different actions, within the same store's callback.  In one case, Store A might need to wait for Store B.  But in another case, it might need to wait for Store C.  Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.
-
-Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.
-
-
-Example Chat App
-----------------
-
-Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
-
-We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!
diff --git a/docs/acknowledgements.md b/docs/acknowledgements.md
deleted file mode 100644
index 298b4e57df5..00000000000
--- a/docs/acknowledgements.md
+++ /dev/null
@@ -1,196 +0,0 @@
----
-id: acknowledgements
-title: Acknowledgements
-layout: single
----
-
-We'd like to thank all of our contributors:
-
-<div class="three-column">
-  <ul>
-    <li>Adam Krebs</li>
-    <li>Adam Solove</li>
-    <li>Alan deLevie</li>
-    <li>Alex Zelenskiy</li>
-    <li>Alexander Solovyov</li>
-    <li>Andreas Svensson</li>
-    <li>Andrew Davey</li>
-    <li>Andrew Zich</li>
-    <li>Andrey Popp</li>
-    <li>Anthony van der Hoorn</li>
-    <li>Ayman Osman</li>
-    <li>Ben Alpert</li>
-    <li>Ben Newman</li>
-    <li>Ben Ripkens</li>
-    <li>Bill Fisher</li>
-    <li>Bob Eagan</li>
-    <li>Bojan Mihelac</li>
-    <li>Brandon Bloom</li>
-    <li>Brian Cooke</li>
-    <li>Brian Kim</li>
-    <li>Brian Reavis</li>
-    <li>Brian Rue</li>
-    <li>Cam Spiers</li>
-    <li>Cassus Adam Banko</li>
-    <li>Cat Chen</li>
-    <li>Cheng Lou</li>
-    <li>Christian Roman</li>
-    <li>Christoph Pojer</li>
-    <li>Christopher Monsanto</li>
-    <li>Clay Allsopp</li>
-    <li>Connor McSheffrey</li>
-    <li>Dan Schafer</li>
-    <li>Daniel Gasienica</li>
-    <li>Daniel Lo Nigro</li>
-    <li>Daniel Miladinov</li>
-    <li>Daniel Schonfeld</li>
-    <li>Danny Ben-David</li>
-    <li>Daryl Lau</li>
-    <li>David Hellsing</li>
-    <li>David Hu</li>
-    <li>Devon Blandin</li>
-    <li>Dmitry Mazuro</li>
-    <li>Dustin Getz</li>
-    <li>Enguerran</li>
-    <li>Eric Clemmons</li>
-    <li>Eric Florenzano</li>
-    <li>Eric Schoffstall</li>
-    <li>Evan Coonrod</li>
-    <li>Fabio M. Costa</li>
-    <li>Felipe Oliveira Carvalho</li>
-    <li>Felix Kling</li>
-    <li>Fernando Correia</li>
-    <li>François-Xavier Bois</li>
-    <li>Fred Zhao</li>
-    <li>G Scott Olson</li>
-    <li>Geert Pasteels</li>
-    <li>Geert-Jan Brits</li>
-    <li>George A Sisco III</li>
-    <li>Gilbert</li>
-    <li>Greg Hurrell</li>
-  </ul>
-  <ul>
-    <li>Greg Roodt</li>
-    <li>Guangqiang Dong</li>
-    <li>Guido Bouman</li>
-    <li>Harry Hull</li>
-    <li>Harshad Sabne</li>
-    <li>Hendrik Swanepoel</li>
-    <li>Hugo Jobling</li>
-    <li>Ian Obermiller</li>
-    <li>Ingvar Stepanyan</li>
-    <li>Irae Carvalho</li>
-    <li>Isaac Salier-Hellendag</li>
-    <li>Ivan Kozik</li>
-    <li>Jaime Mingo</li>
-    <li>Jakub Malinowski</li>
-    <li>James Brantly</li>
-    <li>James Ide</li>
-    <li>Jamie Wong</li>
-    <li>Jamison Dance</li>
-    <li>Jan Kassens</li>
-    <li>Jared Forsyth</li>
-    <li>Jason Bonta</li>
-    <li>Jason Trill</li>
-    <li>Jean Lauliac</li>
-    <li>Jeff Barczewski</li>
-    <li>Jeff Carpenter</li>
-    <li>Jeff Morrison</li>
-    <li>Jeff Welch</li>
-    <li>Jeffrey Lin</li>
-    <li>Jignesh Kakadiya</li>
-    <li>Jing Chen</li>
-    <li>Johannes Baiter</li>
-    <li>John Watson</li>
-    <li>Jon Beebe</li>
-    <li>Jonas Enlund</li>
-    <li>Jonas Gebhardt</li>
-    <li>Jonathan Hsu</li>
-    <li>Jordan Walke</li>
-    <li>Josh Bassett</li>
-    <li>Josh Duck</li>
-    <li>Josh Yudaken</li>
-    <li>Joshua Ma</li>
-    <li>Julen Ruiz Aizpuru</li>
-    <li>Jun Wu</li>
-    <li>Juraj Dudak</li>
-    <li>Justin Jaffray</li>
-    <li>Karl Mikkelsen</li>
-    <li>Keito Uchiyama</li>
-    <li>Kit Randel</li>
-    <li>Kunal Mehta</li>
-    <li>Kyle Mathews</li>
-    <li>Laurence Rowe</li>
-    <li>Levi McCallum</li>
-    <li>Lily</li>
-    <li>Logan Allen</li>
-    <li>Luigy Leon</li>
-    <li>Marcin Kwiatkowski</li>
-    <li>Marcin Szczepanski</li>
-    <li>Mariano Desanze</li>
-    <li>Mark Richardson</li>
-  </ul>
-  <ul>
-    <li>Marshall Roch</li>
-    <li>Martin Andert</li>
-    <li>Martin Konicek</li>
-    <li>Mathieu M-Gosselin</li>
-    <li>Matt Harrison</li>
-    <li>Matthew Dapena-Tretter</li>
-    <li>Matti Nelimarkka</li>
-    <li>Michal Srb</li>
-    <li>Mouad Debbar</li>
-    <li>Nadeesha Cabral</li>
-    <li>Nate Hunzaker</li>
-    <li>Nicholas Bergson-Shilcock</li>
-    <li>Nick Gavalas</li>
-    <li>Nick Thompson</li>
-    <li>Niklas Boström</li>
-    <li>Owen Coutts</li>
-    <li>Pascal Hartig</li>
-    <li>Paul O’Shannessy</li>
-    <li>Paul Seiffert</li>
-    <li>Paul Shen</li>
-    <li>Pete Hunt</li>
-    <li>Peter Cottle</li>
-    <li>Petri Lievonen</li>
-    <li>Pieter Vanderwerff</li>
-    <li>Rajiv Tirumalareddy</li>
-    <li>Randall Randall</li>
-    <li>Ray</li>
-    <li>Richard D. Worth</li>
-    <li>Richard Feldman</li>
-    <li>Richard Livesey</li>
-    <li>Ryan Seddon</li>
-    <li>Sahat Yalkabov</li>
-    <li>Sander Spies</li>
-    <li>Sean Kinsey</li>
-    <li>Sebastian Markbåge</li>
-    <li>Shaun Trennery</li>
-    <li>Simon Højberg</li>
-    <li>Stefan Dombrowski</li>
-    <li>Stephen Murphy</li>
-    <li>Stoyan Stefanov</li>
-    <li>Sundeep Malladi</li>
-    <li>Sven Helmberger</li>
-    <li>Thomas Aylott</li>
-    <li>Thomas Boyt</li>
-    <li>Thomas Shaddox</li>
-    <li>Thomas Shafer</li>
-    <li>Timothy Yung</li>
-    <li>Tom Haggie</li>
-    <li>Tom Occhino</li>
-    <li>Ville Immonen</li>
-    <li>Vjeux</li>
-    <li>Volkan Unsal</li>
-    <li>Wayne Larsen</li>
-    <li>Wincent Colaiuta</li>
-    <li>Yuriy Dybskiy</li>
-    <li>Yuval Dekel</li>
-    <li>Zach Bruggeman</li>
-    <li>davidxi</li>
-    <li>imagentleman</li>
-  </ul>
-</div>
-
-In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.org/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.
diff --git a/docs/blog/all.html b/docs/blog/all.html
deleted file mode 100644
index 553ea254fd5..00000000000
--- a/docs/blog/all.html
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Blog
-layout: default
-sectionid: blog
-id: all-posts
----
-
-<section class="content wrap documentationContent nosidebar">
-  <div class="inner-content">
-    <h1>All Posts</h1>
-    {% for page in site.posts %}
-      <p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
-    {% endfor %}
-  </div>
-</section>
diff --git a/docs/blog/index.html b/docs/blog/index.html
deleted file mode 100644
index 5e71fe617f9..00000000000
--- a/docs/blog/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Blog
-layout: default
-sectionid: blog
----
-
-<section class="content wrap blogContent">
-  {% include nav_blog.html %}
-  <div class="inner-content">
-    {% for page in paginator.posts %}
-      <div class="post-list-item">
-        <h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
-        <p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
-        <hr />
-        <div class="post">
-         {{ page.content }}
-        </div>
-      </div>
-    {% endfor %}
-
-    <div class="pagination">
-      {% if paginator.previous_page %}
-        <a href="/react{{ paginator.previous_page_path }}" class="previous">
-          &laquo; Previous Page
-        </a>
-      {% endif %}
-      {% if paginator.next_page %}
-        <a href="/react{{ paginator.next_page_path }}" class="next">
-          Next Page &raquo;
-        </a>
-      {% endif %}
-    </div>
-  </div>
-</section>
diff --git a/docs/css/codemirror.css b/docs/css/codemirror.css
deleted file mode 100644
index 9113866392e..00000000000
--- a/docs/css/codemirror.css
+++ /dev/null
@@ -1,239 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-}
-.CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 14px 0; /* Vertical padding around content */
-}
-.CodeMirror pre {
-  padding: 0 14px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-}
-
-/* CURSOR */
-
-.CodeMirror div.CodeMirror-cursor {
-  border-left: 1px solid black;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
-  width: auto;
-  border: 0;
-  background: transparent;
-  background: rgba(0, 200, 0, .4);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
-}
-/* Kludge to turn off filter in ie9+, which also accepts rgba */
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) {
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-/* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable {color: black;}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-property {color: black;}
-.cm-s-default .cm-operator {color: black;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-error {color: #f00;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-emstrong {font-style: italic; font-weight: bold;}
-.cm-link {text-decoration: underline;}
-
-.cm-invalidchar {color: #f00;}
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  line-height: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.CodeMirror-scroll {
-  /* 30px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
-  margin-bottom: -30px; margin-right: -30px;
-  padding-bottom: 30px; padding-right: 30px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-}
-.CodeMirror-sizer {
-  position: relative;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actuall scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-}
-.CodeMirror-vscrollbar {
-  right: 0; top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
-  z-index: 6;
-}
-
-.CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
-  height: 100%;
-  z-index: 3;
-}
-.CodeMirror-gutter {
-  height: 100%;
-  display: inline-block;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
-}
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-
-.CodeMirror-lines {
-  cursor: text;
-}
-.CodeMirror pre {
-  /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-}
-.CodeMirror-wrap pre {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  overflow: auto;
-}
-
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%; height: 0px;
-  overflow: hidden;
-  visibility: hidden;
-}
-.CodeMirror-measure pre { position: static; }
-
-.CodeMirror div.CodeMirror-cursor {
-  position: absolute;
-  visibility: hidden;
-  border-right: none;
-  width: 0;
-}
-.CodeMirror-focused div.CodeMirror-cursor {
-  visibility: visible;
-}
-
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-
-.cm-searching {
-  background: #ffa;
-  background: rgba(255, 255, 0, .4);
-}
-
-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursor {
-    visibility: hidden;
-  }
-}
diff --git a/docs/css/main.css b/docs/css/main.css
deleted file mode 100755
index ffd4641819c..00000000000
--- a/docs/css/main.css
+++ /dev/null
@@ -1,165 +0,0 @@
-/*****************************************************************************/
-/*
-/* Common
-/*
-/*****************************************************************************/
-
-/* Global Reset */
-* {
-  margin: 0;
-  padding: 0;
-}
-
-html, body { height: 100%; }
-
-body {
-  background-color: #FFF;
-  font: 13.34px Helvetica, Arial, sans-serif;
-  font-size: small;
-  text-align: center;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: 100%; }
-
-h1 { margin-bottom: 1em; }
-p { margin: 1em 0; }
-
-a         { color: #00a; }
-a:hover   { color: #000; }
-a:visited { color: #a0a; }
-
-table {
-  font-size: inherit;
-  font: 100%;
-}
-
-/*****************************************************************************/
-/*
-/* Home
-/*
-/*****************************************************************************/
-ul.posts {
-  list-style-type: none;
-  margin-bottom: 2em;
-}
-
-ul.posts li {
-  line-height: 1.75em;
-}
-
-ul.posts span {
-  color: #aaa;
-  font-family: Monaco, "Courier New", monospace;
-  font-size: 80%;
-}
-
-/*****************************************************************************/
-/*
-/* Site
-/*
-/*****************************************************************************/
-
-.site {
-  font-size: 115%;
-  text-align: justify;
-  width: 42em;
-  margin: 3em auto 2em;
-  line-height: 1.5em;
-}
-
-.site .header a {
-  font-weight: bold;
-  text-decoration: none;
-}
-
-.site .header h1.title {
-  display: inline-block;
-  margin-bottom: 2em;
-}
-
-.site .header h1.title a {
-  color: #a00;
-}
-
-.site .header h1.title a:hover {
-  color: #000;
-}
-
-.site .header a.extra {
-  color: #aaa;
-  margin-left: 1em;
-}
-
-.site .header a.extra:hover {
-  color: #000;
-}
-
-.site .meta {
-  color: #aaa;
-}
-
-.site .footer {
-  font-size: 80%;
-  color: #666;
-  border-top: 4px solid #eee;
-  margin-top: 2em;
-  overflow: hidden;
-}
-
-.site .footer .contact {
-  float: left;
-  margin-right: 3em;
-}
-
-.site .footer .contact a {
-  color: #8085C1;
-}
-
-.site .footer .rss {
-  margin-top: 1.1em;
-  margin-right: -.2em;
-  float: right;
-}
-
-.site .footer .rss img {
-  border: 0;
-}
-
-/*****************************************************************************/
-/*
-/* Posts
-/*
-/*****************************************************************************/
-
-/* standard */
-#post pre {
-  border: 1px solid #ddd;
-  background-color: #eef;
-  padding: 0 .4em;
-}
-
-#post ul, #post ol {
-  margin-left: 1.35em;
-}
-
-#post code {
-  border: 1px solid #ddd;
-  background-color: #eef;
-  padding: 0 .2em;
-}
-
-#post pre code {
-  border: none;
-}
-
-/* terminal */
-#post pre.terminal {
-  border: 1px solid #000;
-  background-color: #333;
-  color: #FFF;
-}
-
-#post pre.terminal code {
-  background-color: #333;
-}
\ No newline at end of file
diff --git a/docs/css/syntax.css b/docs/css/syntax.css
deleted file mode 100644
index 2728fc0edce..00000000000
--- a/docs/css/syntax.css
+++ /dev/null
@@ -1,409 +0,0 @@
-.highlight pre code {
-  color: #637c84;
-}
-
-.highlight {
-  color: #333333;
-  background: #f8f5ec;
-}
-
-.highlight .c {
-  color: #93a1a1;
-}
-
-
-.highlight .g {
-  color: #637c84;
-}
-
-/* Generic */
-
-.highlight .k {
-  color: #859900;
-}
-
-/* Keyword */
-
-.highlight .l {
-  color: #637c84;
-}
-
-/* Literal */
-
-.highlight .n {
-  color: #637c84;
-}
-
-/* Name */
-
-.highlight .o {
-  color: #859900;
-}
-
-/* Operator */
-
-.highlight .x {
-  color: #cc7a6f;
-}
-
-/* Other */
-
-.highlight .p {
-  color: #637c84;
-}
-
-/* Punctuation */
-
-.highlight .cm {
-  color: #93a1a1;
-}
-
-/* Comment.Multiline */
-
-.highlight .cp {
-  color: #859900;
-}
-
-/* Comment.Preproc */
-
-.highlight .c1 {
-  color: #93a1a1;
-}
-
-/* Comment.Single */
-
-.highlight .cs {
-  color: #859900;
-}
-
-/* Comment.Special */
-
-.highlight .gd {
-  color: #36958e;
-}
-
-/* Generic.Deleted */
-
-.highlight .ge {
-  font-style: italic;
-  color: #637c84;
-}
-
-/* Generic.Emph */
-
-.highlight .gr {
-  color: #dc322f;
-}
-
-/* Generic.Error */
-
-.highlight .gh {
-  color: #cc7a6f;
-}
-
-/* Generic.Heading */
-
-.highlight .gi {
-  color: #859900;
-}
-
-/* Generic.Inserted */
-
-.highlight .go {
-  color: #637c84;
-}
-
-/* Generic.Output */
-
-.highlight .gp {
-  color: #637c84;
-}
-
-/* Generic.Prompt */
-
-.highlight .gs {
-  font-weight: bold;
-  color: #637c84;
-}
-
-/* Generic.Strong */
-
-.highlight .gu {
-  color: #cc7a6f;
-}
-
-/* Generic.Subheading */
-
-.highlight .gt {
-  color: #637c84;
-}
-
-/* Generic.Traceback */
-
-.highlight .kc {
-  color: #cc7a6f;
-}
-
-/* Keyword.Constant */
-
-.highlight .kd {
-  color: #268bd2;
-}
-
-/* Keyword.Declaration */
-
-.highlight .kn {
-  color: #859900;
-}
-
-/* Keyword.Namespace */
-
-.highlight .kp {
-  color: #859900;
-}
-
-/* Keyword.Pseudo */
-
-.highlight .kr {
-  color: #268bd2;
-}
-
-/* Keyword.Reserved */
-
-.highlight .kt {
-  color: #dc322f;
-}
-
-/* Keyword.Type */
-
-.highlight .ld {
-  color: #637c84;
-}
-
-/* Literal.Date */
-
-.highlight .m {
-  color: #36958e;
-}
-
-/* Literal.Number */
-
-.highlight .s {
-  color: #36958e;
-}
-
-/* Literal.String */
-
-.highlight .na {
-  color: #637c84;
-}
-
-/* Name.Attribute */
-
-.highlight .nb {
-  color: #b58900;
-}
-
-/* Name.Builtin */
-
-.highlight .nc {
-  color: #268bd2;
-}
-
-/* Name.Class */
-
-.highlight .no {
-  color: #cc7a6f;
-}
-
-/* Name.Constant */
-
-.highlight .nd {
-  color: #268bd2;
-}
-
-/* Name.Decorator */
-
-.highlight .ni {
-  color: #cc7a6f;
-}
-
-/* Name.Entity */
-
-.highlight .ne {
-  color: #cc7a6f;
-}
-
-/* Name.Exception */
-
-.highlight .nf {
-  color: #268bd2;
-}
-
-/* Name.Function */
-
-.highlight .nl {
-  color: #637c84;
-}
-
-/* Name.Label */
-
-.highlight .nn {
-  color: #637c84;
-}
-
-/* Name.Namespace */
-
-.highlight .nx {
-  color: #637c84;
-}
-
-/* Name.Other */
-
-.highlight .py {
-  color: #637c84;
-}
-
-/* Name.Property */
-
-.highlight .nt {
-  color: #268bd2;
-}
-
-/* Name.Tag */
-
-.highlight .nv {
-  color: #268bd2;
-}
-
-/* Name.Variable */
-
-.highlight .ow {
-  color: #859900;
-}
-
-/* Operator.Word */
-
-.highlight .w {
-  color: #637c84;
-}
-
-/* Text.Whitespace */
-
-.highlight .mf {
-  color: #36958e;
-}
-
-/* Literal.Number.Float */
-
-.highlight .mh {
-  color: #36958e;
-}
-
-/* Literal.Number.Hex */
-
-.highlight .mi {
-  color: #36958e;
-}
-
-/* Literal.Number.Integer */
-
-.highlight .mo {
-  color: #36958e;
-}
-
-/* Literal.Number.Oct */
-
-.highlight .sb {
-  color: #93a1a1;
-}
-
-/* Literal.String.Backtick */
-
-.highlight .sc {
-  color: #36958e;
-}
-
-/* Literal.String.Char */
-
-.highlight .sd {
-  color: #637c84;
-}
-
-/* Literal.String.Doc */
-
-.highlight .s2 {
-  color: #36958e;
-}
-
-/* Literal.String.Double */
-
-.highlight .se {
-  color: #cc7a6f;
-}
-
-/* Literal.String.Escape */
-
-.highlight .sh {
-  color: #637c84;
-}
-
-/* Literal.String.Heredoc */
-
-.highlight .si {
-  color: #36958e;
-}
-
-/* Literal.String.Interpol */
-
-.highlight .sx {
-  color: #36958e;
-}
-
-/* Literal.String.Other */
-
-.highlight .sr {
-  color: #dc322f;
-}
-
-/* Literal.String.Regex */
-
-.highlight .s1 {
-  color: #36958e;
-}
-
-/* Literal.String.Single */
-
-.highlight .ss {
-  color: #36958e;
-}
-
-/* Literal.String.Symbol */
-
-.highlight .bp {
-  color: #268bd2;
-}
-
-/* Name.Builtin.Pseudo */
-
-.highlight .vc {
-  color: #268bd2;
-}
-
-/* Name.Variable.Class */
-
-.highlight .vg {
-  color: #268bd2;
-}
-
-/* Name.Variable.Global */
-
-.highlight .vi {
-  color: #268bd2;
-}
-
-/* Name.Variable.Instance */
-
-.highlight .il {
-  color: #36958e;
-}
diff --git a/docs/docs/01-why-react.md b/docs/docs/01-why-react.md
deleted file mode 100644
index 0968b729064..00000000000
--- a/docs/docs/01-why-react.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-id: why-react
-title: Why React?
-layout: docs
-permalink: why-react.html
-next: displaying-data.html
----
-React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
-
-We built React to solve one problem: **building large applications with data that changes over time**. To do this, React uses two main ideas.
-
-### Simple
-
-Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
-
-### Declarative
-
-When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
-
-## Build Composable Components
-
-React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
-
-## Give It Five Minutes
-
-React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
-
-## Learn More
-
-You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).
diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md
deleted file mode 100644
index 44e92ef7161..00000000000
--- a/docs/docs/01-why-react.zh-CN.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-id: why-react-zh-CN
-title: 为什么使用 React?
-layout: docs
-permalink: why-react-zh-CN.html
-next: displaying-data.html
----
-
-React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
-
-我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。
-
-### 简单
-
-仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
-
-### 表达能力 (Declarative)
-
-当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。
-
-## 构建可组合的组件
-
-React 都是关于构建可复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。
-
-## 给它5分钟的时间
-
-React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](http://37signals.com/svn/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
-
-## 了解更多
-
-你可以从这篇[博客](http://facebook.github.io/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
-
-
diff --git a/docs/docs/02-displaying-data.md b/docs/docs/02-displaying-data.md
deleted file mode 100644
index 6e9966711bf..00000000000
--- a/docs/docs/02-displaying-data.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: displaying-data
-title: Displaying Data
-layout: docs
-permalink: displaying-data.html
-prev: why-react.html
-next: jsx-in-depth.html
----
-
-The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
-
-
-## Getting Started
-
-Let's look at a really simple example. Create a `hello-react.html` file with the following code:
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Hello React</title>
-    <script src="http://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
-  </head>
-  <body>
-    <div id="example"></div>
-    <script type="text/jsx">
-
-      // ** Your code goes here! **
-
-    </script>
-  </body>
-</html>
-```
-
-For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
-
-```javascript
-/** @jsx React.DOM */
-
-var HelloWorld = React.createClass({
-  render: function() {
-    return (
-      <p>
-        Hello, <input type="text" placeholder="Your name here" />!
-        It is {this.props.date.toTimeString()}
-      </p>
-    );
-  }
-});
-
-setInterval(function() {
-  React.renderComponent(
-    <HelloWorld date={new Date()} />,
-    document.getElementById('example')
-  );
-}, 500);
-```
-
-
-## Reactive Updates
-
-Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
-
-The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. **It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.**
-
-The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**.
-
-
-## Components are Just Like Functions
-
-React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
-
-> Note:
->
-> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root.
-
-
-## JSX Syntax
-
-We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
-
-We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, **optional** HTML-like syntax for the function calls that generate markup called JSX.
-
-**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `<a href="http://facebook.github.io/react/">Hello React!</a>`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
-
-JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
-
-JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
-
-The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package.
diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md
deleted file mode 100644
index 595c0c5fec7..00000000000
--- a/docs/docs/02.1-jsx-in-depth.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-id: jsx-in-depth
-title: JSX in Depth
-layout: docs
-permalink: jsx-in-depth.html
-prev: displaying-data.html
-next: jsx-gotchas.html
----
-
-JSX is a JavaScript XML syntax transform recommended for use
-with React.
-
-> Note:
->
-> Don't forget the `/** @jsx React.DOM */` pragma at the beginning of your file! This tells JSX to process the file for React.
->
-> If you don't include the pragma, your source will remain untouched, so it's safe to run the JSX transformer on all JS files in your codebase if you want to.
-
-## Why JSX?
-
-React works out of the box without JSX. Simply construct your markup using the
-functions on `React.DOM`. For example, here's how to construct a simple link:
-
-```javascript
-var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
-```
-
-We recommend using JSX for many reasons:
-
-* It's easier to visualize the structure of the DOM.
-* Designers are more comfortable making changes.
-* It's familiar for those who have used MXML or XAML.
-
-
-## The Transform
-
-JSX transforms from an XML-like syntax into native JavaScript. XML elements and
-attributes are transformed into function calls and objects, respectively.
-
-```javascript
-var Nav;
-// Input (JSX):
-var app = <Nav color="blue" />;
-// Output (JS):
-var app = Nav({color:"blue"});
-```
-
-Notice that in order to use `<Nav />`, the `Nav` variable must be in scope.
-
-JSX also allows specifying children using XML syntax:
-
-```javascript
-var Nav, Profile;
-// Input (JSX):
-var app = <Nav color="blue"><Profile>click</Profile></Nav>;
-// Output (JS):
-var app = Nav({color:"blue"}, Profile(null, "click"));
-```
-
-Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
-desugars into native JavaScript, and the 
-[HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
-JSX.
-
-If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows
-how to setup compilation.
-
-> Note:
->
-> Details about the code transform are given here to increase understanding, but
-> your code should not rely on these implementation details.
-
-
-## React and JSX
-
-React and JSX are independent technologies, but JSX was primarily built with
-React in mind. The two valid uses of JSX are:
-
-* To construct instances of React DOM components (`React.DOM.*`).
-* To construct instances of composite components created with
-  `React.createClass()`.
-
-### React DOM Components
-
-To construct a `<div>` is to create a variable that refers to `React.DOM.div`.
-
-```javascript
-var div = React.DOM.div;
-var app = <div className="appClass">Hello, React!</div>;
-```
-
-### React Composite Components
-
-To construct an instance of a composite component, create a variable that
-references the class.
-
-```javascript
-var MyComponent = React.createClass({/*...*/});
-var app = <MyComponent someProperty={true} />;
-```
-
-JSX will infer the component's name from the variable assignment and specify
-the class's [displayName](/react/docs/component-specs.html#displayName) accordingly.
-
-See [Multiple Components](/react/docs/multiple-components.html) to learn more about using composite components.
-
-> Note:
->
-> Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged
-> as XML attribute names. Instead, React DOM components expect attributes like
-> `className` and `htmlFor`, respectively.
-
-## DOM Convenience
-
-Having to define variables for every type of DOM element can get tedious
-(e.g. `var div, span, h1, h2, ...`). JSX provides a convenience to address this
-problem by allowing you to specify a variable in an `@jsx` docblock field. JSX
-will use that field to find DOM components.
-
-```javascript
-/**
- * @jsx React.DOM
- */
-var Nav;
-// Input (JSX):
-var tree = <Nav><span /></Nav>;
-// Output (JS):
-var tree = Nav(null, React.DOM.span(null));
-```
-
-> Remember:
->
-> JSX simply transforms elements into function calls and has no notion of the
-> DOM. The docblock parameter is only a convenience to resolve the most commonly
-> used elements. In general, JSX has no notion of the DOM.
-
-## JavaScript Expressions
-
-### Attribute Expressions
-
-To use a JavaScript expression as an attribute value, wrap the expression in a
-pair of curly braces (`{}`) instead of quotes (`""`).
-
-```javascript
-// Input (JSX):
-var person = <Person name={window.isLoggedIn ? window.name : ''} />;
-// Output (JS):
-var person = Person({name: window.isLoggedIn ? window.name : ''});
-```
-
-### Child Expressions
-
-Likewise, JavaScript expressions may be used to express children:
-
-```javascript
-// Input (JSX):
-var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
-// Output (JS):
-var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null));
-```
-
-### Comments
-
-It's easy to add comments within your JSX; they're just JS expressions. You just need to be careful to put `{}` around the comments when you are within the children section of a tag.
-
-```javascript
-var content = (
-  <Nav>
-    {/* child comment, put {} around */}
-    <Person
-      /* multi
-         line
-         comment */
-      name={window.isLoggedIn ? window.name : ''} // end of line comment
-    />
-  </Nav>
-);
-```
-
-
-## Prior Work
-
-JSX is similar to several other JavaScript embedded XML language
-proposals/projects. Some of the features of JSX that distinguish it from similar
-efforts include:
-
-* JSX is a simple syntactic transform.
-* JSX neither provides nor requires a runtime library.
-* JSX does not alter or add to the semantics of JavaScript.
-
-JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
diff --git a/docs/docs/02.2-jsx-gotchas.md b/docs/docs/02.2-jsx-gotchas.md
deleted file mode 100644
index 21074dd2f22..00000000000
--- a/docs/docs/02.2-jsx-gotchas.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-id: jsx-gotchas
-title: JSX Gotchas
-layout: docs
-permalink: jsx-gotchas.html
-prev: jsx-in-depth.html
-next: interactivity-and-dynamic-uis.html
----
-
-JSX looks like HTML but there are some important differences you may run into.
-
-> Note:
->
-> For DOM differences, such as the inline `style` attribute, check [here](/react/docs/dom-differences.html).
-
-## HTML Entities
-
-You can insert HTML entities within literal text in JSX:
-
-```javascript
-<div>First &middot; Second</div>
-```
-
-If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
-
-```javascript
-// Bad: It displays "First &middot; Second"
-<div>{'First &middot; Second'}</div>
-```
-
-There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
-
-```javascript
-<div>{'First · Second'}</div>
-```
-
-A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
-
-```javascript
-<div>{'First \u00b7 Second'}</div>
-<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
-```
-
-You can use mixed arrays with strings and JSX elements.
-
-```javascript
-<div>{['First ', <span>&middot;</span>, ' Second']}</div>
-```
-
-As a last resort, you always have the ability to insert raw HTML.
-
-```javascript
-<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
-```
-
-
-## Custom HTML Attributes
-
-If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`.
-
-```javascript
-<div data-custom-attribute="foo" />
-```
-
-[Web Accessibility](http://www.w3.org/WAI/intro/aria) attributes starting with `aria-` will be rendered properly.
-
-```javascript
-<div aria-hidden={true} />
-```
diff --git a/docs/docs/03-interactivity-and-dynamic-uis.md b/docs/docs/03-interactivity-and-dynamic-uis.md
deleted file mode 100644
index 754a32943bf..00000000000
--- a/docs/docs/03-interactivity-and-dynamic-uis.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-id: interactivity-and-dynamic-uis
-title: Interactivity and Dynamic UIs
-layout: docs
-permalink: interactivity-and-dynamic-uis.html
-prev: jsx-gotchas.html
-next: multiple-components.html
----
-
-You've already [learned how to display data](/react/docs/displaying-data.html) with React. Now let's look at how to make our UIs interactive.
-
-
-## A Simple Example
-
-```javascript
-/** @jsx React.DOM */
-
-var LikeButton = React.createClass({
-  getInitialState: function() {
-    return {liked: false};
-  },
-  handleClick: function(event) {
-    this.setState({liked: !this.state.liked});
-  },
-  render: function() {
-    var text = this.state.liked ? 'like' : 'unlike';
-    return (
-      <p onClick={this.handleClick}>
-        You {text} this. Click to toggle.
-      </p>
-    );
-  }
-});
-
-React.renderComponent(
-  <LikeButton />,
-  document.getElementById('example')
-);
-```
-
-
-## Event Handling and Synthetic Events
-
-With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
-
-If you'd like to use React on a touch device such as a phone or tablet, simply call `React.initializeTouchEvents(true);` to enable touch event handling.
-
-
-## Under the Hood: Autobinding and Event Delegation
-
-Under the hood React does a few things to keep your code performant and easy to understand.
-
-**Autobinding:** When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
-
-**Event delegation:** React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
-
-
-## Components are Just State Machines
-
-React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.
-
-In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
-
-
-## How State Works
-
-A common way to inform React of a data change is by calling `setState(data, callback)`. This method merges `data` into `this.state` and re-renders the component. When the component finishes re-rendering, the optional `callback` is called. Most of the time you'll never need to provide a `callback` since React will take care of keeping your UI up-to-date for you.
-
-
-## What Components Should Have State?
-
-Most of your components should simply take some data from `props` and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
-
-**Try to keep as many of your components as possible stateless.** By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.
-
-A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via `props`. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
-
-
-## What *Should* Go in State?
-
-**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.
-
-## What *Shouldn’t* Go in State?
-
-`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:
-
-* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.
-* **React components:** Build them in `render()` based on underlying props and state.
-* **Duplicated data from props:** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values.
diff --git a/docs/docs/04-multiple-components.md b/docs/docs/04-multiple-components.md
deleted file mode 100644
index 85cefffff63..00000000000
--- a/docs/docs/04-multiple-components.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-id: multiple-components
-title: Multiple Components
-layout: docs
-permalink: multiple-components.html
-prev: interactivity-and-dynamic-uis.html
-next: reusable-components.html
----
-
-So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
-
-
-## Motivation: Separation of Concerns
-
-By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
-
-
-## Composition Example
-
-Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
-
-```javascript
-/** @jsx React.DOM */
-
-var Avatar = React.createClass({
-  render: function() {
-    return (
-      <div>
-        <ProfilePic username={this.props.username} />
-        <ProfileLink username={this.props.username} />
-      </div>
-    );
-  }
-});
-
-var ProfilePic = React.createClass({
-  render: function() {
-    return (
-      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
-    );
-  }
-});
-
-var ProfileLink = React.createClass({
-  render: function() {
-    return (
-      <a href={'http://www.facebook.com/' + this.props.username}>
-        {this.props.username}
-      </a>
-    );
-  }
-});
-
-React.renderComponent(
-  <Avatar username="pwh" />,
-  document.getElementById('example')
-);
-```
-
-
-## Ownership
-
-In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.
-
-It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
-
-
-## Children
-
-When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:
-
-```javascript
-<Parent><Child /></Parent>
-```
-
-`Parent` can read its children by accessing the special `this.props.children` prop. **`this.props.children` is an opaque data structure:** use the [React.Children utilities](/react/docs/top-level-api.html#react.children) to manipulate them.
-
-
-### Child Reconciliation
-
-**Reconciliation is the process by which React updates the DOM with each new render pass.** In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:
-
-```html
-// Render Pass 1
-<Card>
-  <p>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</Card>
-// Render Pass 2
-<Card>
-  <p>Paragraph 2</p>
-</Card>
-```
-
-Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
-
-
-### Stateful Children
-
-For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
-
-In most cases, this can be sidestepped by hiding elements instead of destroying them:
-
-```html
-// Render Pass 1
-<Card>
-  <p>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</Card>
-// Render Pass 2
-<Card>
-  <p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</Card>
-```
-
-
-### Dynamic Children
-
-The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
-
-```javascript
-  render: function() {
-    var results = this.props.results;
-    return (
-      <ol>
-        {results.map(function(result) {
-          return <li key={result.id}>{result.text}</li>;
-        })}
-      </ol>
-    );
-  }
-```
-
-When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).
-
-You can also key children by passing an object. The object keys will be used as `key` for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order **except** for properties that can be parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:
-
-```javascript
-  render: function() {
-    var items = {};
-    
-    this.props.results.forEach(function(result) {
-      // If result.id can look like a number (consider short hashes), then
-      // object iteration order is not guaranteed. In this case, we add a prefix
-      // to ensure the keys are strings.
-      items['result-' + result.id] = <li>{result.text}</li>;
-    });
-    
-    return (
-      <ol>
-        {items}
-      </ol>
-    );
-  }
-```
-
-## Data Flow
-
-In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
-
-
-## A Note on Performance
-
-You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection.
-
-However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](/react/docs/component-specs.html) for more information.
-
-> Note:
->
-> If `shouldComponentUpdate()` returns false when data has actually changed, React can't keep your UI in sync. Be sure you know what you're doing while using it, and only use this function when you have a noticeable performance problem. Don't underestimate how fast JavaScript is relative to the DOM.
diff --git a/docs/docs/05-reusable-components.md b/docs/docs/05-reusable-components.md
deleted file mode 100644
index ceb830b96c8..00000000000
--- a/docs/docs/05-reusable-components.md
+++ /dev/null
@@ -1,194 +0,0 @@
----
-id: reusable-components
-title: Reusable Components
-layout: docs
-permalink: reusable-components.html
-prev: multiple-components.html
-next: forms.html
----
-
-When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
-
-
-## Prop Validation
-
-As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify `propTypes`. `React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons `propTypes` is only checked in development mode. Here is an example documenting the different validators provided:
-
-```javascript
-React.createClass({
-  propTypes: {
-    // You can declare that a prop is a specific JS primitive. By default, these
-    // are all optional.
-    optionalArray: React.PropTypes.array,
-    optionalBool: React.PropTypes.bool,
-    optionalFunc: React.PropTypes.func,
-    optionalNumber: React.PropTypes.number,
-    optionalObject: React.PropTypes.object,
-    optionalString: React.PropTypes.string,
-
-    // Anything that can be rendered: numbers, strings, components or an array
-    // containing these types.
-    optionalRenderable: React.PropTypes.renderable,
-
-    // A React component.
-    optionalComponent: React.PropTypes.component,
-
-    // You can also declare that a prop is an instance of a class. This uses
-    // JS's instanceof operator.
-    optionalMessage: React.PropTypes.instanceOf(Message),
-
-    // You can ensure that your prop is limited to specific values by treating
-    // it as an enum.
-    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
-
-    // An object that could be one of many types
-    optionalUnion: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
-      React.PropTypes.instanceOf(Message)
-    ]),
-
-    // An array of a certain type
-    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
-
-    // An object with property values of a certain type
-    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
-
-    // An object taking on a particular shape
-    optionalObjectWithShape: React.PropTypes.shape({
-      color: React.PropTypes.string,
-      fontSize: React.PropTypes.number
-    }),
-
-    // You can chain any of the above with `isRequired` to make sure a warning
-    // is shown if the prop isn't provided.
-    requiredFunc: React.PropTypes.func.isRequired,
-
-    // A value of any data type
-    requiredAny: React.PropTypes.any.isRequired,
-
-    // You can also specify a custom validator. It should return an Error
-    // object if the validation fails. Don't `console.warn` or throw, as this
-    // won't work inside `oneOfType`.
-    customProp: function(props, propName, componentName) {
-      if (!/matchme/.test(props[propName])) {
-        return new Error('Validation failed!');
-      }
-    }
-  },
-  /* ... */
-});
-```
-
-
-## Default Prop Values
-
-React lets you define default values for your `props` in a very declarative way:
-
-```javascript
-var ComponentWithDefaultProps = React.createClass({
-  getDefaultProps: function() {
-    return {
-      value: 'default value'
-    };
-  }
-  /* ... */
-});
-```
-
-The result of `getDefaultProps()` will be cached and used to ensure that `this.props.value` will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.
-
-
-## Transferring Props: A Shortcut
-
-A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
-
-```javascript
-/** @jsx React.DOM */
-
-var CheckLink = React.createClass({
-  render: function() {
-    // transferPropsTo() will take any props passed to CheckLink
-    // and copy them to <a>
-    return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
-  }
-});
-
-React.renderComponent(
-  <CheckLink href="javascript:alert('Hello, world!');">
-    Click here!
-  </CheckLink>,
-  document.getElementById('example')
-);
-```
-
-## Single Child
-
-With `React.PropTypes.component` you can specify that only a single child can be passed to
-a component as children.
-
-```javascript
-var MyComponent = React.createClass({
-  propTypes: {
-    children: React.PropTypes.component.isRequired
-  },
-
-  render: function() {
-    return
-      <div>
-        {this.props.children} // This must be exactly one element or it will throw.
-      </div>;
-  }
-
-});
-```
-
-## Mixins
-
-Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
-
-One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
-
-```javascript
-/** @jsx React.DOM */
-
-var SetIntervalMixin = {
-  componentWillMount: function() {
-    this.intervals = [];
-  },
-  setInterval: function() {
-    this.intervals.push(setInterval.apply(null, arguments));
-  },
-  componentWillUnmount: function() {
-    this.intervals.map(clearInterval);
-  }
-};
-
-var TickTock = React.createClass({
-  mixins: [SetIntervalMixin], // Use the mixin
-  getInitialState: function() {
-    return {seconds: 0};
-  },
-  componentDidMount: function() {
-    this.setInterval(this.tick, 1000); // Call a method on the mixin
-  },
-  tick: function() {
-    this.setState({seconds: this.state.seconds + 1});
-  },
-  render: function() {
-    return (
-      <p>
-        React has been running for {this.state.seconds} seconds.
-      </p>
-    );
-  }
-});
-
-React.renderComponent(
-  <TickTock />,
-  document.getElementById('example')
-);
-```
-
-A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.
-
diff --git a/docs/docs/06-forms.md b/docs/docs/06-forms.md
deleted file mode 100644
index 8cea0db813e..00000000000
--- a/docs/docs/06-forms.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-id: forms
-title: Forms
-layout: docs
-permalink: forms.html
-prev: reusable-components.html
-next: working-with-the-browser.html
----
-
-Form components such as `<input>`, `<textarea>`, and `<option>` differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.
-
-For information on events on `<form>` see [Form Events](/react/docs/events.html#form-events).
-
-## Interactive Props
-
-Form components support a few props that are affected via user interactions:
-
-* `value`, supported by `<input>` and `<textarea>` components.
-* `checked`, supported by `<input>` components of type `checkbox` or `radio`.
-* `selected`, supported by `<option>` components.
-
-In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
-
-Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
-
-* The `value` of `<input>` or `<textarea>` changes.
-* The `checked` state of `<input>` changes.
-* The `selected` state of `<option>` changes.
-
-Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
-
-
-## Controlled Components
-
-An `<input>` with `value` set is a *controlled* component. In a controlled `<input>`, the value of the rendered element will always reflect the `value` prop. For example:
-
-```javascript
-  render: function() {
-    return <input type="text" value="Hello!" />;
-  }
-```
-
-This will render an input that always has a value of `Hello!`. Any user input will have no effect on the rendered element because React has declared the value to be `Hello!`. If you wanted to update the value in response to user input, you could use the `onChange` event:
-
-```javascript
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(event) {
-    this.setState({value: event.target.value});
-  },
-  render: function() {
-    var value = this.state.value;
-    return <input type="text" value={value} onChange={this.handleChange} />;
-  }
-```
-
-In this example, we are simply accepting the newest value provided by the user and updating the `value` prop of the `<input>` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:
-
-```javascript
-  handleChange: function(event) {
-    this.setState({value: event.target.value.substr(0, 140)});
-  }
-```
-
-This would accept user input but truncate the value to the first 140 characters.
-
-
-## Uncontrolled Components
-
-An `<input>` that does not supply a `value` (or sets it to `null`) is an *uncontrolled* component. In an uncontrolled `<input>`, the value of the rendered element will reflect the user's input. For example:
-
-```javascript
-  render: function() {
-    return <input type="text" />;
-  }
-```
-
-This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.
-
-If you want to initialize the component with a non-empty value, you can supply a `defaultValue` prop. For example:
-
-```javascript
-  render: function() {
-    return <input type="text" defaultValue="Hello!" />;
-  }
-```
-
-This example will function much like the **Controlled Components** example above.
-
-Likewise, `<input>` supports `defaultChecked` and `<select>` supports `defaultValue`.
-
-
-## Advanced Topics
-
-
-### Why Controlled Components?
-
-Using form components such as `<input>` in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
-
-```html
-  <input type="text" name="title" value="Untitled" />
-```
-
-This renders an input *initialized* with the value, `Untitled`. When the user updates the input, the node's value *property* will change. However, `node.getAttribute('value')` will still return the value used at initialization time, `Untitled`.
-
-Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:
-
-```javascript
-  render: function() {
-    return <input type="text" name="title" value="Untitled" />;
-  }
-```
-
-Since this method describes the view at any point in time, the value of the text input should *always* be `Untitled`.
-
-
-### Why Textarea Value?
-
-In HTML, the value of `<textarea>` is usually set using its children:
-
-```html
-  <!-- counterexample: DO NOT DO THIS! -->
-  <textarea name="description">This is the description.</textarea>
-```
-
-For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use `\n` if we want newlines. In a world where we have `value` and `defaultValue`, it is ambiguous what role children play. For this reason, you should not use children when setting `<textarea>` values:
-
-```javascript
-  <textarea name="description" value="This is a description." />
-```
-
-If you *do* decide to use children, they will behave like `defaultValue`.
-
-
-### Why Select Value?
-
-The selected `<option>` in an HTML `<select>` is normally specified through that option's `selected` attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:
-
-```javascript
-  <select value="B">
-    <option value="A">Apple</option>
-    <option value="B">Banana</option>
-    <option value="C">Cranberry</option>
-  </select>
-```
-
-To make an uncontrolled component, `defaultValue` is used instead.
diff --git a/docs/docs/07-working-with-the-browser.md b/docs/docs/07-working-with-the-browser.md
deleted file mode 100644
index 565d824280b..00000000000
--- a/docs/docs/07-working-with-the-browser.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-id: working-with-the-browser
-title: Working With the Browser
-layout: docs
-permalink: working-with-the-browser.html
-prev: forms.html
-next: more-about-refs.html
----
-
-React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
-
-
-## The Virtual DOM
-
-React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods return a *description* of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.
-
-Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and in a performant way cross-browser. You can even use some HTML5 events in IE8!
-
-Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
-
-
-## Refs and getDOMNode()
-
-To interact with the browser, you'll need a reference to a DOM node. Every mounted React component has a `getDOMNode()` function which you can call to get a reference to it.
-
-> Note:
->
-> `getDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `getDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
-
-In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use refs to refer to a component you own. They work like this:
-
-```javascript
-/** @jsx React.DOM */
-
-var MyComponent = React.createClass({
-  handleClick: function() {
-    // Explicitly focus the text input using the raw DOM API.
-    this.refs.myTextInput.getDOMNode().focus();
-  },
-  render: function() {
-    // The ref attribute adds a reference to the component to
-    // this.refs when the component is mounted.
-    return (
-      <div>
-        <input type="text" ref="myTextInput" />
-        <input
-          type="button"
-          value="Focus the text input"
-          onClick={this.handleClick}
-        />
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <MyComponent />,
-  document.getElementById('example')
-);
-```
-
-
-## More About Refs
-
-To learn more about refs, including ways to use them effectively, see our [more about refs](/react/docs/more-about-refs.html) documentation.
-
-
-## Component Lifecycle
-
-Components have three main parts of their lifecycle:
-
-* **Mounting:** A component is being inserted into the DOM.
-* **Updating:** A component is being re-rendered to determine if the DOM should be updated.
-* **Unmounting:** A component is being removed from the DOM.
-
-React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
-
-
-### Mounting
-
-* `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
-* `componentWillMount()` is invoked immediately before mounting occurs.
-* `componentDidMount()` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
-
-
-### Updating
-
-* `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
-* `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
-* `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
-* `componentDidUpdate(object prevProps, object prevState)` is invoked immediately after updating occurs.
-
-
-### Unmounting
-
-* `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
-
-
-### Mounted Methods
-
-_Mounted_ composite components also support the following methods:
-
-* `getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
-* `forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
-
-
-## Browser Support and Polyfills
-
-At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing `+new Date()`, we can just write `Date.now()`. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.
-
-In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like [es5-shim](https://github.com/kriskowal/es5-shim).
-
-
-### Polyfills Needed to Support Older Browsers
-
-`es5-shim.js` from [kriskowal's es5-shim](https://github.com/kriskowal/es5-shim) provides the following that React needs:
-
-* `Array.isArray`
-* `Array.prototype.every`
-* `Array.prototype.forEach`
-* `Array.prototype.indexOf`
-* `Array.prototype.map`
-* `Date.now`
-* `Function.prototype.bind`
-* `Object.keys`
-* `String.prototype.split`
-* `String.prototype.trim`
-
-`es5-sham.js`, also from [kriskowal's es5-shim](https://github.com/kriskowal/es5-shim), provides the following that React needs:
-
-* `Object.create`
-* `Object.freeze`
-
-The unminified build of React needs the following from [paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill).
-
-* `console.*`
-
-When using HTML5 elements in IE8 including `<section>`, `<article>`, `<nav>`, `<header>`, and `<footer>`, it's also necessary to include [html5shiv](https://github.com/aFarkas/html5shiv) or a similar script.
-
-
-### Cross-browser Issues
-
-Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround for.
-
-
-#### onScroll event on IE8
-
-On IE8 the `onScroll` event doesn't bubble and IE8 doesn't have an API to define handlers to the capturing phase of an event, meaning there is no way for React to listen to these events.
-Currently a handler to this event is ignored on IE8.
-
-See the [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) GitHub issue for more information.
diff --git a/docs/docs/07.1-more-about-refs.md b/docs/docs/07.1-more-about-refs.md
deleted file mode 100644
index fa92805def2..00000000000
--- a/docs/docs/07.1-more-about-refs.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-id: more-about-refs
-title: More About Refs
-layout: docs
-permalink: more-about-refs.html
-prev: working-with-the-browser.html
-next: tooling-integration.html
----
-After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent `props` are sent to each child that is output from `render()`. However there are a few cases, where it still might be necessary or beneficial.
-
-Consider the case when you wish to tell an `<input />` element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, `''`.
-
-```javascript
-  var App = React.createClass({
-    getInitialState: function() {
-      return {userInput: ''};
-    },
-    handleChange: function(e) {
-      this.setState({userInput: e.target.value});
-    },
-    clearAndFocusInput: function() {
-      this.setState({userInput: ''}); // Clear the input
-      // We wish to focus the <input /> now!
-    },
-    render: function() {
-      return (
-        <div>
-          <div onClick={this.clearAndFocusInput}>
-            Click to Focus and Reset
-          </div>
-          <input
-            value={this.state.userInput}
-            onChange={this.handleChange}
-          />
-        </div>
-      );
-    }
-  });
-```
-
-
-Notice how, in this example, we want to "tell" the input something - something that it cannot infer from its props over time. In this case we want to "tell" it that it should now become focused. However, there are some challenges. What is returned from `render()` is not your actual composition of "child" components, it is merely a *description* of the children at a particular instance in time - a snapshot, if you will.
-
-> Note:
->
-> Remember, what you return from `render()` is not your *actual* rendered children instances. What you return from `render()` is merely a *description* of the children instances in your component's sub-hierarchy at a particular moment in time.
-
-
-This means that you should never "hold onto" something that you return from `render()` and then expect it to be anything meaningful.
-
-```javascript
-  // counterexample: DO NOT DO THIS!
-  render: function() {
-    var myInput = <input />;          // I'm going to try to call methods on this
-    this.rememberThisInput = myInput; // input at some point in the future! YAY!
-    return (
-      <div>
-        <div>...</div>
-        {myInput}
-      </div>
-    );
-  }
-```
-
-In this counterexample, the `<input />` is merely a *description* of an `<input />`. This description is used to create a *real* **backing instance** for the `<input />`.
-
-So how do we talk to the *real* backing instance of the input?
-
-## The ref Attribute
-
-React supports a very special property that you can attach to any component that is output from `render()`. This special property allows you to refer to the corresponding **backing instance** of anything returned from `render()`. It is always guaranteed to be the proper instance, at any point in time.
-
-It's as simple as:
-
-1. Assign a `ref` attribute to anything returned from `render` such as:
-
-  ```html
-  <input ref="myInput" />
-  ```
-
-2. In some other code (typically event handler code), access the **backing instance** via `this.refs` as in:
-
-  ```javascript
-  this.refs.myInput
-  ```
-
-  You can access the component's DOM node directly by calling `this.refs.myInput.getDOMNode()`.
-
-## Completing the Example
-
-```javascript
-  var App = React.createClass({
-    getInitialState: function() {
-      return {userInput: ''};
-    },
-    handleChange: function(e) {
-      this.setState({userInput: e.target.value});
-    },
-    clearAndFocusInput: function() {
-      // Clear the input
-      this.setState({userInput: ''}, function() {
-        // This code executes after the component is re-rendered
-        this.refs.theInput.getDOMNode().focus();   // Boom! Focused!
-      });
-    },
-    render: function() {
-      return (
-        <div>
-          <div onClick={this.clearAndFocusInput}>
-            Click to Focus and Reset
-          </div>
-          <input
-            ref="theInput"
-            value={this.state.userInput}
-            onChange={this.handleChange}
-          />
-        </div>
-      );
-    }
-  });
-```
-
-In this example, our render function returns a description of an `<input />` instance. But the true instance is accessed via `this.refs.theInput`. As long as a child component with `ref="theInput"` is returned from render, `this.refs.theInput` will access the proper instance. This even works on higher level (non-DOM) components such as `<Typeahead ref="myTypeahead" />`.
-
-
-## Summary
-
-Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive `props` and `state`. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save `ref`s for use cases that are inherently non-reactive.
-
-### Benefits:
-
-- You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`).
-- Performing DOM measurements almost always requires reaching out to a "native" component such as `<input />` and accessing its underlying DOM node via `this.refs.myInput.getDOMNode()`. Refs are one of the only practical ways of doing this reliably.
-- Refs are automatically book-kept for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).
-
-### Cautions:
-
-- *Never* access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack.
-- If you want to preserve Google Closure Compiler Crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref="myRefString"`.
-- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where `state` should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to "make things happen" – instead, the data flow will usually accomplish your goal.
diff --git a/docs/docs/08-tooling-integration.md b/docs/docs/08-tooling-integration.md
deleted file mode 100644
index 93416d301cc..00000000000
--- a/docs/docs/08-tooling-integration.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-id: tooling-integration
-title: Tooling Integration
-layout: docs
-permalink: tooling-integration.html
-prev: more-about-refs.html
-next: addons.html
----
-
-Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
-
-## React
-
-### CDN-hosted React
-
-We provide CDN-hosted versions of React [on our download page](/react/downloads.html). These prebuilt files use the UMD module format. Dropping them in with a simple `<script>` tag will inject a `React` global into your environment. It should also work out-of-the-box in CommonJS and AMD environments.
-
-
-### Using master
-
-We have instructions for building from `master` [in our GitHub repository](https://github.com/facebook/react). We build a tree of CommonJS modules under `build/modules` which you can drop into any environment or packaging tool that supports CommonJS.
-
-## JSX
-
-### In-browser JSX Transform
-
-If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer. Be sure to include the `/** @jsx React.DOM */` comment as well, otherwise the transformer will not run the transforms.
-
-> Note:
->
-> The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.
-
-
-### Productionizing: Precompiled JSX
-
-If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`. Run `jsx --help` for more information on how to use this tool.
-
-
-### Helpful Open-Source Projects
-
-The open-source community has built tools that integrate JSX with several editors and build systems. See [JSX integrations](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations) for the full list.
diff --git a/docs/docs/09-addons.md b/docs/docs/09-addons.md
deleted file mode 100644
index 33aca262a5f..00000000000
--- a/docs/docs/09-addons.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: addons
-title: Add-ons
-layout: docs
-permalink: addons.html
-prev: tooling-integration.html
-next: animation.html
----
-
-`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:
-
-- [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
-- [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.
-- [`classSet`](class-name-manipulation.html), for manipulating the DOM `class` string a bit more cleanly.
-- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
-- [`cloneWithProps`](clone-with-props.html), to make shallow copies of React components and change their props.
-- [`update`](update.html), a helper function that makes dealing with immutable data in JavaScript easier.
-
-The add-ons below are in the development (unminified) version of React only:
-
-- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
-- [`Perf`](perf.html), for measuring performance and giving you hint where to optimize.
-
-To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
diff --git a/docs/docs/09.1-animation.md b/docs/docs/09.1-animation.md
deleted file mode 100644
index f310a13f508..00000000000
--- a/docs/docs/09.1-animation.md
+++ /dev/null
@@ -1,154 +0,0 @@
----
-id: animation
-title: Animation
-layout: docs
-permalink: animation.html
-prev: addons.html
-next: two-way-binding-helpers.html
----
-
-React provides a `ReactTransitionGroup` addon component as a low-level API for animation, and a `ReactCSSTransitionGroup` for easily implementing basic CSS animations and transitions.
-
-## High-level API: `ReactCSSTransitionGroup`
-
-`ReactCSSTransitionGroup` is based on `ReactTransitionGroup` and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
-
-### Getting Started
-
-`ReactCSSTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
-
-```javascript{30-32}
-/** @jsx React.DOM */
-
-var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
-
-var TodoList = React.createClass({
-  getInitialState: function() {
-    return {items: ['hello', 'world', 'click', 'me']};
-  },
-  handleAdd: function() {
-    var newItems =
-      this.state.items.concat([prompt('Enter some text')]);
-    this.setState({items: newItems});
-  },
-  handleRemove: function(i) {
-    var newItems = this.state.items;
-    newItems.splice(i, 1);
-    this.setState({items: newItems});
-  },
-  render: function() {
-    var items = this.state.items.map(function(item, i) {
-      return (
-        <div key={item} onClick={this.handleRemove.bind(this, i)}>
-          {item}
-        </div>
-      );
-    }.bind(this));
-    return (
-      <div>
-        <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example">
-          {items}
-        </ReactCSSTransitionGroup>
-      </div>
-    );
-  }
-});
-```
-
-In this component, when a new item is added to `ReactCSSTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
-
-You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
-
-```css
-.example-enter {
-  opacity: 0.01;
-  transition: opacity .5s ease-in;
-}
-
-.example-enter.example-enter-active {
-  opacity: 1;
-}
-```
-
-You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactCSSTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:
-
-```css
-.example-leave {
-  opacity: 1;
-  transition: opacity .5s ease-in;
-}
-
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-```
-
-### Animating One or Zero Items
-
-Although in the example above we rendered a list of items into `ReactCSSTransitionGroup`, the children of `ReactCSSTransitionGroup` can be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element, with the new element animating in while the current animates out. For example, we can implement a simple image carousel like this:
-
-```javascript{12-14}
-/** @jsx React.DOM */
-
-var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
-
-var ImageCarousel = React.createClass({
-  propTypes: {
-    imageSrc: React.PropTypes.string.isRequired
-  },
-  render: function() {
-    return (
-      <div>
-        <ReactCSSTransitionGroup transitionName="carousel">
-          <img src={this.props.imageSrc} key={this.props.imageSrc} />
-        </ReactCSSTransitionGroup>
-      </div>
-    );
-  }
-});
-```
-
-> Note:
->
-> You must provide [the `key` attribute](/react/docs/multiple-components.html#dynamic-children) for all children of `ReactCSSTransitionGroup`, even if rendering a single item. This is how React will determine which children have entered, left, or stayed.
-
-### Disabling Animations
-
-You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactCSSTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactCSSTransitionGroup` to disable these animations.
-
-> Note:
->
-> When using `ReactCSSTransitionGroup`, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level `ReactTransitionGroup` API which provides the hooks you need to do custom transitions.
-
-## Low-level API: `ReactTransitionGroup`
-
-`ReactTransitionGroup` is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
-
-### `componentWillEnter(callback)`
-
-This is called at the same time as `componentDidMount()` for components added to an existing `TransitionGroup`. It will block other animations from occurring until `callback` is called. It will not be called on the initial render of a `TransitionGroup`.
-
-### `componentDidEnter()`
-
-This is called after the `callback` function that was passed to `componentWillEnter` is called.
-
-### `componentWillLeave(callback)`
-
-This is called when the child has been removed from the `ReactTransitionGroup`. Though the child has been removed, `ReactTransitionGroup` will keep it in the DOM until `callback` is called.
-
-### `componentDidLeave()`
-
-This is called when the `willLeave` `callback` is called (at the same time as `componentWillUnmount`).
-
-### Rendering a Different Component
-
-By default `ReactTransitionGroup` renders as a `span`. You can change this behavior by providing a `component` prop. For example, here's how you would render a `<ul>`:
-
-```javascript{1}
-<ReactTransitionGroup component={React.DOM.ul}>
-  ...
-</ReactTransitionGroup>
-```
-
-Every DOM component is under `React.DOM`. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
diff --git a/docs/docs/09.2-form-input-binding-sugar.md b/docs/docs/09.2-form-input-binding-sugar.md
deleted file mode 100644
index 29317f71dca..00000000000
--- a/docs/docs/09.2-form-input-binding-sugar.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-id: two-way-binding-helpers
-title: Two-Way Binding Helpers
-layout: docs
-permalink: two-way-binding-helpers.html
-prev: animation.html
-next: class-name-manipulation.html
----
-
-`ReactLink` is an easy way to express two-way binding with React. 
-
-> Note:
->
-> If you're new to the framework, note that `ReactLink` is not needed for most applications and should be used cautiously.
-
-In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
-
-However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
-
-In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](/react/docs/forms.html) for more information.
-
-Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `ReactLink`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
-
-> Note:
->
-> ReactLink is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
-
-## ReactLink: Before and After
-
-Here's a simple form example without using `ReactLink`:
-
-```javascript
-/** @jsx React.DOM */
-
-var NoLink = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(event) {
-    this.setState({value: event.target.value});
-  },
-  render: function() {
-    var value = this.state.value;
-    return <input type="text" value={value} onChange={this.handleChange} />;
-  }
-});
-```
-
-This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use `ReactLink` to save us some typing:
-
-```javascript{4,9}
-/** @jsx React.DOM */
-
-var WithLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    return <input type="text" valueLink={this.linkState('value')} />;
-  }
-});
-```
-
-`LinkedStateMixin` adds a method to your React component called `linkState()`. `linkState()` returns a `ReactLink` object which contains the current value of the React state and a callback to change it.
-
-`ReactLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
-
-Note that `<input>` supports ReactLink for both `value` and `checked`.
-
-## Under the Hood
-
-There are two sides to `ReactLink`: the place where you create the `ReactLink` instance and the place where you use it. To prove how simple `ReactLink` is, let's rewrite each side separately to be more explicit.
-
-### ReactLink Without LinkedStateMixin
-
-```javascript{7-9,11-14}
-/** @jsx React.DOM */
-
-var WithoutMixin = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(newValue) {
-    this.setState({value: newValue});
-  },
-  render: function() {
-    var valueLink = {
-      value: this.state.value,
-      requestChange: this.handleChange
-    };
-    return <input type="text" valueLink={valueLink} />;
-  }
-});
-```
-
-As you can see, `ReactLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
-
-### ReactLink Without valueLink
-
-```javascript
-/** @jsx React.DOM */
-
-var WithoutLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    var valueLink = this.linkState('value');
-    var handleChange = function(e) {
-      valueLink.requestChange(e.target.value);
-    };
-    return <input type="text" value={valueLink.value} onChange={handleChange} />;
-  }
-});
-```
-
-The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!
diff --git a/docs/docs/09.3-class-name-manipulation.md b/docs/docs/09.3-class-name-manipulation.md
deleted file mode 100644
index ca2e1fdee00..00000000000
--- a/docs/docs/09.3-class-name-manipulation.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-id: class-name-manipulation
-title: Class Name Manipulation
-layout: docs
-permalink: class-name-manipulation.html
-prev: two-way-binding-helpers.html
-next: test-utils.html
----
-
-`classSet()` is a neat utility for easily manipulating the DOM `class` string.
-
-Here's a common scenario and its solution without `classSet()`:
-
-```javascript
-// inside some `<Message />` React component
-render: function() {
-  var classString = 'message';
-  if (this.props.isImportant) {
-    classString += ' message-important';
-  }
-  if (this.props.isRead) {
-    classString += ' message-read';
-  }
-  // 'message message-important message-read'
-  return <div className={classString}>Great, I'll be there.</div>;
-}
-```
-
-This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. `classSet()` solves this problem:
-
-```javascript
-render: function() {
-  var cx = React.addons.classSet;
-  var classes = cx({
-    'message': true,
-    'message-important': this.props.isImportant,
-    'message-read': this.props.isRead
-  });
-  // same final string, but much cleaner
-  return <div className={classes}>Great, I'll be there.</div>;
-}
-```
-
-When using `classSet()`, pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.
-
-No more hacky string concatenations!
diff --git a/docs/docs/09.4-test-utils.md b/docs/docs/09.4-test-utils.md
deleted file mode 100644
index dd06f91092f..00000000000
--- a/docs/docs/09.4-test-utils.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-id: test-utils
-title: Test Utilities
-layout: docs
-permalink: test-utils.html
-prev: class-name-manipulation.html
-next: clone-with-props.html
----
-
-`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](http://facebook.github.io/jest/)).
-
-### Simulate
-
-```javascript
-Simulate.{eventName}(DOMElement element, object eventData)
-```
-
-Simulate an event dispatch on a DOM node with optional `eventData` event data. **This is possibly the single most useful utility in `ReactTestUtils`.**
-
-Example usage:
-
-```javascript
-var node = this.refs.input.getDOMNode();
-React.addons.TestUtils.Simulate.click(node);
-React.addons.TestUtils.Simulate.change(node);
-React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
-```
-
-`Simulate` has a method for every event that React understands.
-
-### renderIntoDocument
-
-```javascript
-ReactComponent renderIntoDocument(ReactComponent instance)
-```
-
-Render a component into a detached DOM node in the document. **This function requires a DOM.**
-
-### mockComponent
-
-```javascript
-object mockComponent(function componentClass, string? tagName)
-```
-
-Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
-
-### isComponentOfType
-
-```javascript
-boolean isComponentOfType(ReactComponent instance, function componentClass)
-```
-
-Returns true if `instance` is an instance of a React `componentClass`.
-
-### isDOMComponent
-
-```javascript
-boolean isDOMComponent(ReactComponent instance)
-```
-
-Returns true if `instance` is a DOM component (such as a `<div>` or `<span>`).
-
-### isCompositeComponent
-
-```javascript
-boolean isCompositeComponent(ReactComponent instance)`
-```
-
-Returns true if `instance` is a composite component (created with `React.createClass()`)
-
-### isCompositeComponentWithType
-
-```javascript
-boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
-```
-
-The combination of `isComponentOfType()` and `isCompositeComponent()`.
-
-### isTextComponent
-
-```javascript
-boolean isTextComponent(ReactComponent instance)
-```
-
-Returns true if `instance` is a plain text component.
-
-### findAllInRenderedTree
-
-```javascript
-array findAllInRenderedTree(ReactComponent tree, function test)
-```
-
-Traverse all components in `tree` and accumulate all components where `test(component)` is true. This is not that useful on its own, but it's used as a primitive for other test utils.
-
-### scryRenderedDOMComponentsWithClass
-
-```javascript
-array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
-```
-
-Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.
-
-### findRenderedDOMComponentWithClass
-
-```javascript
-ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
-```
-
-Like `scryRenderedDOMComponentsWithClass()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
-
-### scryRenderedDOMComponentsWithTag
-
-```javascript
-array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
-```
-
-Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.
-
-### findRenderedDOMComponentWithTag
-
-```javascript
-ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
-```
-
-Like `scryRenderedDOMComponentsWithTag()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
-
-### scryRenderedComponentsWithType
-
-```javascript
-array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
-```
-
-Finds all instances of components with type equal to `componentClass`.
-
-### findRenderedComponentWithType
-
-```javascript
-ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
-```
-
-Same as `scryRenderedComponentsWithType()` but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
diff --git a/docs/docs/09.5-clone-with-props.md b/docs/docs/09.5-clone-with-props.md
deleted file mode 100644
index 0d466adf4a2..00000000000
--- a/docs/docs/09.5-clone-with-props.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-id: clone-with-props
-title: Cloning Components
-layout: docs
-permalink: clone-with-props.html
-prev: test-utils.html
-next: update.html
----
-
-In rare situations a component may want to change the props of a component that it doesn't own (like changing the `className` of a component passed as `this.props.children`). Other times it may want to make multiple copies of a component passed to it. `cloneWithProps()` makes this possible.
-
-#### `ReactComponent React.addons.cloneWithProps(ReactComponent component, object? extraProps)`
-
-Do a shallow copy of `component` and merge any props provided by `extraProps`. Props are merged in the same manner as [`transferPropsTo()`](/react/docs/component-api.html#transferpropsto), so props like `className` will be merged intelligently.
diff --git a/docs/docs/09.6-update.md b/docs/docs/09.6-update.md
deleted file mode 100644
index 5348f963140..00000000000
--- a/docs/docs/09.6-update.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-id: update
-title: Immutability Helpers
-layout: docs
-permalink: update.html
-prev: clone-with-props.html
-next: pure-render-mixin.html
----
-
-React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast `shouldComponentUpdate()` method to significantly speed up your app.
-
-Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented.
-
-## The main idea
-
-If you mutate data like this:
-
-```js
-myData.x.y.z = 7;
-// or...
-myData.a.b.push(9);
-```
-
-you have no way of determining which data has changed since the previous copy is overriden. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
-
-```js
-var newData = deepCopy(myData);
-newData.x.y.z = 7;
-newData.a.b.push(9);
-```
-
-Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome:
-
-```js
-var newData = extend(myData, {
-  x: extend(myData.x, {
-    y: extend(myData.x.y, {z: 7}),
-  }),
-  a: extend(myData.a, {b: myData.a.b.concat(9)})
-});
-```
-
-While this is fairly performant (since it only shallow copies `log n` objects and reuses the rest), it's a big pain to write. Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs.
-
-`update()` provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:
-
-```js
-var newData = React.addons.update(myData, {
-  x: {y: {z: {$set: 7}}},
-  a: {b: {$push: [9]}}
-});
-```
-
-While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
-
-The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.
-
-## Available commands
-
-  * `{$push: array}` `push()` all the items in `array` on the target.
-  * `{$unshift: array}` `unshift()` all the items in `array` on the target.
-  * `{$splice: array of arrays}` for each item in `array()` call `splice()` on the target with the parameters provided by the item.
-  * `{$set: any}` replace the target entirely.
-  * `{$merge: object}` merge the keys of `object` with the target.
-  * `{$apply: function}` passes in the current value to the function and updates it with the new returned value.
-
-## Examples
-
-### Simple push
-
-```js
-var initialArray = [1, 2, 3];
-var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
-```
-`initialArray` is still `[1, 2, 3]`.
-
-### Nested collections
-
-```js
-var collection = [1, 2, {a: [12, 17, 15]}];
-var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
-// => [1, 2, {a: [12, 13, 14, 15]}]
-```
-This accesses `collection`'s index `2`, key `a`, and does a splice of one item starting from index `1` (to remove `17`) while inserting `13` and `14`.
-
-### Updating a value based on its current one
-
-```js
-var obj = {a: 5, b: 3};
-var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
-// => {a: 5, b: 6}
-// This is equivalent, but gets verbose for deeply nested collections:
-var newObj2 = update(obj, {b: {$set: obj.b * 2}});
-```
-
-### (Shallow) merge
-
-```js
-var obj = {a: 5, b: 3};
-var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
-```
diff --git a/docs/docs/09.7-pure-render-mixin.md b/docs/docs/09.7-pure-render-mixin.md
deleted file mode 100644
index 5f2f5f8852f..00000000000
--- a/docs/docs/09.7-pure-render-mixin.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-id: pure-render-mixin
-title: PureRenderMixin
-layout: docs
-permalink: pure-render-mixin.html
-prev: update.html
-next: perf.html
----
-
-If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this mixin for a performance boost in some cases.
-
-Example:
-
-```js
-var PureRenderMixin = require('react').addons.PureRenderMixin;
-React.createClass({
-  mixins: [PureRenderMixin],
-
-  render: function() {
-    return <div className={this.props.className}>foo</div>;
-  }
-});
-```
-
-Under the hood, the mixin implements [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate), in which it compares the current props and state with the next ones and returns `false` if the equalities pass.
-
-> Note:
->
-> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed.
->
-> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
diff --git a/docs/docs/09.8-perf.md b/docs/docs/09.8-perf.md
deleted file mode 100644
index 74bc71634a7..00000000000
--- a/docs/docs/09.8-perf.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-id: perf
-title: Performance Tools
-layout: docs
-permalink: perf.html
-prev: pure-render-mixin.html
----
-
-React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) hook where you can add optimization hints to React's diff algorithm.
-
-In addition to giving you an overview of your app's overall performance, ReactPerf is a profiling tool that tells you exactly where you need to put these hooks.
-
-> Note:
->
-> The dev build of React is slower than the prod build, due to all the extra logic for providing, for example, React's friendly console warnings (stripped away in the prod build). Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
-
-## General API
-
-The `Perf` object documented here is exposed as `React.addons.Perf` when using the `react-with-addons.js` build in development mode.
-
-### `Perf.start()` and `Perf.stop()`
-Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
-
-### `Perf.printInclusive(measurements)`
-Prints the overall time taken. If no argument's passed, defaults to all the measurements from the last recording. This prints a nicely formatted table in the console, like so:
-
-![](/react/img/docs/perf-inclusive.png)
-
-### `Perf.printExclusive(measurements)`
-"Exclusive" times don't include the times taken to mount the components: processing props, `getInitialState`, call `componentWillMount` and `componentDidMount`, etc.
-
-![](/react/img/docs/perf-exclusive.png)
-
-### `Perf.printWasted(measurements)`
-
-**The most useful part of the profiler**.
-
-"Wasted" time is spent on components that didn't actually render anything, e.g. the render stayed the same, so the DOM wasn't touched.
-
-![](/react/img/docs/perf-wasted.png)
-
-### `Perf.printDOM(measurements)`
-Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
-
-![](/react/img/docs/perf-dom.png)
-
-## Advanced API
-
-The above print methods use `Perf.getLastMeasurements()` to pretty-print the result.
-
-### `Perf.getLastMeasurements()`
-Get the measurements array from the last start-stop session. The array contains objects, each of which looks like this:
-
-```js
-{
-  // The term "inclusive" and "exclusive" are explained below
-  "exclusive": {},
-  // '.0.0' is the React ID of the node
-  "inclusive": {".0.0": 0.0670000008540228, ".0": 0.3259999939473346},
-  "render": {".0": 0.036999990697950125, ".0.0": 0.010000003385357559},
-  // Number of instances
-  "counts": {".0": 1, ".0.0": 1},
-  // DOM touches
-  "writes": {},
-  // Extra debugging info
-  "displayNames": {
-    ".0": {"current": "App", "owner": "<root>"},
-    ".0.0": {"current": "Box", "owner": "App"}
-  },
-  "totalTime": 0.48499999684281647
-}
-```
diff --git a/docs/docs/complementary-tools.md b/docs/docs/complementary-tools.md
deleted file mode 100644
index 6bd66d055ea..00000000000
--- a/docs/docs/complementary-tools.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-id: complementary-tools
-title: Complementary Tools
-layout: docs
-permalink: complementary-tools.html
-prev: videos.html
-next: examples.html
----
-
-This page has moved to the [GitHub wiki](https://github.com/facebook/react/wiki/Complementary-Tools).
diff --git a/docs/docs/examples.md b/docs/docs/examples.md
deleted file mode 100644
index 82e8d39c99a..00000000000
--- a/docs/docs/examples.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-id: examples
-title: Examples
-layout: docs
-permalink: examples.html
-prev: complementary-tools.html
----
-
-### Production Apps
-
-* **[Instagram.com](http://instagram.com/)** is 100% built on React, both public site and internal tools.
-* **[Facebook.com](http://www.facebook.com/)**'s commenting interface, business management tools, [Lookback video editor](http://facebook.com/lookback/edit), page insights, and most, if not all, new JS development.
-* **[Khan Academy](http://khanacademy.org/)** uses React for most new JS development.
-* **[Sberbank](http://sberbank.ru/moscow/ru/person/)**, Russia's number one bank, is built with React.
-* **[The New York Times's 2014 Red Carpet Project](http://www.nytimes.com/interactive/2014/02/02/fashion/red-carpet-project.html?_r=0)** is built with React.
-
-### Sample Code
-
-* **[React starter kit](/react/downloads.html)** Includes several examples which you can [view online in our GitHub repository](https://github.com/facebook/react/tree/master/examples/).
-* **[React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master)** Goes step-by-step from a static HTML mock to an interactive email reader, written in just one hour!
-* **[React server rendering example](https://github.com/mhart/react-server-example)** Demonstrates how to use React's server rendering capabilities.
-
-### Open-Source Demos
-
-* **[TodoMVC](https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react/js)**
-* **[Khan Academy question editor](https://github.com/khan/perseus)** (Browse their GitHub account for many more production apps!)
-* **[github-issue-viewer](https://github.com/jaredly/github-issues-viewer)**
-* **[hn-react](https://github.com/prabirshrestha/hn-react)** Dead-simple Hacker News client.
diff --git a/docs/docs/flux-overview.md b/docs/docs/flux-overview.md
deleted file mode 100644
index e02339401b3..00000000000
--- a/docs/docs/flux-overview.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-id: flux-overview
-title: Flux Application Architecture
-layout: docs
-next: flux-todo-list.html
----
-
-Flux is the application architecture that Facebook uses for building client-side web applications.  It complements React's composable view components by utilizing a unidirectional data flow.  It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
-
-Flux applications have three major parts: the dispatcher, the stores, and the views (React components).  These should not be confused with Model-View-Controller.  Controllers do exist in a Flux application, but they are controller-views — views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children.  Additionally, actions — dispatcher helper methods — are often used to support a semantic dispatcher API.  It can be useful to think of them as a fourth part of the Flux update cycle.
-
-Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected. This works especially well with React's declarative programming style, which allows the store to send updates without specifying how to transition views between states.
-
-We originally set out to deal correctly with derived data: for example, we wanted to show an unread count for message threads while another view showed a list of threads, with the unread ones highlighted. This was difficult to handle with MVC — marking a single thread as read would update the thread model, and then also need to update the unread count model.  These dependencies and cascading updates often occur in a large MVC application, leading to a tangled weave of data flow and unpredictable results.
-
-Control is inverted with stores: the stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns. This also makes stores more testable than models, especially since stores have no direct setter methods like `setAsRead()`, but instead have only an input point for the payload, which is delivered through the dispatcher and originates with actions.
-
-
-## Structure and Data Flow
-
-Data in a Flux application flows in a single direction, in a cycle:
-
-<pre>
-Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+
-Ʌ                                                                                   |
-|                                                                                   V
-+-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+
-</pre>
-
-A unidirectional data flow is central to the Flux pattern, and in fact Flux takes its name from the Latin word for flow. In the above diagram, the dispatcher, stores and views are independent nodes with distinct inputs and outputs. The actions are simply discrete, semantic helper functions that facilitate passing data to the dispatcher. 
-
-All data flows through the dispatcher as a central hub.  Actions most often originate from user interactions with the views, and are nothing more than a call into the dispatcher.  The dispatcher then invokes the callbacks that the stores have registered with it, effectively dispatching the data payload contained in the actions to all stores.  Within their registered callbacks, stores determine which actions they are interested in, and respond accordingly.  The stores then emit a "change" event to alert the controller-views that a change to the data layer has occurred.  Controller-views listen for these events and retrieve data from the stores in an event handler.  The controller-views call their own `render()` method via `setState()` or `forceUpdate()`, updating themselves and all of their children.
-
-This structure allows us to reason easily about our application in a way that is reminiscent of functional reactive programming, or more specifically data-flow programming or flow-based programming, where data flows through the application in a single direction — there are no two-way bindings. Application state is maintained only in the stores, allowing the different parts of the application to remain highly decoupled. Where dependencies do occur between stores, they are kept in a strict hierarchy, with synchronous updates managed by the dispatcher. 
-
-We found that two-way data bindings led to cascading updates, where changing one object led to another object changing, which could also trigger more updates. As applications grew, these cascading updates made it very difficult to predict what would change as the result of one user interaction. When updates can only change data within a single round, the system as a whole becomes more predictable.
-
-Let's look at the various parts of the Flux update cycle up close. A good place to start is the dispatcher. 
-
-
-### A Single Dispatcher 
-
-The dispatcher is the central hub that manages all data flow in a Flux application. It is essentially a registry of callbacks into the stores. Each store registers itself and provides a callback. When the dispatcher responds to an action, all stores in the application are sent the data payload provided by the action via the callbacks in the registry. 
-
-As an application grows, the dispatcher becomes more vital, as it can manage dependencies between stores by invoking the registered callbacks in a specific order.  Stores can declaratively wait for other stores to finish updating, and then update themselves accordingly.
-
-
-### Stores 
-
-Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they are not instances of one object. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular __domain__ within the application. 
-
-For example, Facebook's [Lookback Video Editor](https://facebook.com/lookback/edit) utilized a TimeStore that kept track of the playback time position and the playback state. On the other hand, the same application's ImageStore kept track of a collection of images.  The TodoStore in our [TodoMVC example](https://github.com/facebook/react/tree/master/examples/todomvc-flux) is similar in that it manages a collection of to-do items.  A store exhibits characteristics of both a collection of models and a singleton model of a logical domain. 
-
-As mentioned above, a store registers itself with the dispatcher and provides it with a callback. This callback receives the action's data payload as a parameter. The payload contains a type attribute, identifying the action's type. Within the store's registered callback, a switch statement based on the action's type is used to interpret the payload and to provide the proper hooks into the store's internal methods. This allows an action to result in an update to the state of the store, via the dispatcher. After the stores are updated, they broadcast an event declaring that their state has changed, so the views may query the new state and update themselves. 
-
-
-### Views and Controller-Views 
- 
-React provides the kind of composable views we need for the view layer. Close to the top of the nested view hierarchy, a special kind of view listens for events that are broadcast by the stores that it depends on. One could call this a controller-view, as it provides the glue code to get the data from the stores and to pass this data down the chain of its descendants. We might have one of these controller-views governing any significant section of the page.  
-
-When it receives the event from the store, it first requests the new data it needs via the stores' public getter methods. It then calls its own `setState()` or `forceUpdate()` methods, causing its `render()` method and the `render()` method of all its descendants to run. 
-
-We often pass the entire state of the store down the chain of views in a single object, allowing different descendants to use what they need. In addition to keeping the controller-like behavior at the top of the hierarchy, and thus keeping our descendant views as functionally pure as possible, passing down the entire state of the store in a single object also has the effect of reducing the number of props we need to manage. 
-
-Occasionally we may need to add additional controller-views deeper in the hierarchy to keep components simple.  This might help us to better encapsulate a section of the hierarchy related to a specific  data domain.  Be aware, however, that controller-views deeper in the hierarchy can violate the singular flow of data by introducing a new, potentially conflicting entry point for the data flow.  In making the decision of whether to add a deep controller-view, balance the gain of simpler components against the complexity of multiple data updates flowing into the hierarchy at different points.  These multiple data updates can lead to odd effects, with React's render method getting invoked repeatedly by updates from different controller-views, potentially increasing the difficulty of debugging.
-
-
-### Actions 
-
-The dispatcher exposes a method that allows a view to trigger a dispatch to the stores, and to include a payload of data, or an action. The action construction may be wrapped into a semantic helper method which sends the payload to the dispatcher. For example, we may want to change the text of a to-do item in a to-do list application. We would create an action with a function signature like `updateText(todoId, newText)` in our `TodoActions` module. This method may be invoked from within our views' event handlers, so we can call it in response to a user action. This action method also adds the action type to the payload, so that when the payload is interpreted in the store, it can respond appropriately to a payload with a particular action type. In our example, this type might be named something like `TODO_UPDATE_TEXT`. 
-
-Actions may also come from other places, such as the server. This happens, for example, during data initialization. It may also happen when the server returns an error code or when the server has updates to provide to the application. We'll talk more about server actions in a future article. In this post we're only concerned with the basics of the data flow.
-
-
-### What About that Dispatcher? 
-
-As mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the `waitFor()` method within the Dispatcher class.  We did not need to use this method within the extremely simple [TodoMVC application](https://github.com/facebook/react/tree/master/examples/todomvc-flux), but we have included it [in the example dispatcher](https://github.com/facebook/react/blob/master/examples/todomvc-flux/js/dispatcher/Dispatcher.js#L110) as an example of what a dispatcher should be able to do in a larger, more complex application.
-
-Within the TodoStore's registered callback we could explicitly wait for any dependencies to first update before moving forward: 
-
-```javascript
-case 'TODO_CREATE': 
-  Dispatcher.waitFor([ 
-    PrependedTextStore.dispatcherIndex, 
-    YetAnotherStore.dispatcherIndex 
-  ], function() { 
-    TodoStore.create(PrependedTextStore.getText() + ' ' + action.text); 
-    TodoStore.emit('change'); 
-  }); 
-  break; 
-```
-
-The arguments for `waitFor()` are an array of dispatcher registry indexes, and a final callback to invoke after the callbacks at the given indexes have completed.  Thus the store that is invoking `waitFor()` can depend on the state of another store to inform how it should update its own state.
-
-A problem arises if we create circular dependencies. If Store A waits for Store B, and B waits for A, then we'll have a very bad situation on our hands. We'll need a more robust dispatcher that flags these circular dependencies with console errors, and this is not easily accomplished with promises. Unfortunately, that's a bit beyond the scope of this documentation. In the future we hope to cover how to build a more robust dispatcher and how to initialize, update, and save the state of the application with persistent data, like a web service API.
diff --git a/docs/docs/flux-todo-list.md b/docs/docs/flux-todo-list.md
deleted file mode 100644
index c69976ac9cd..00000000000
--- a/docs/docs/flux-todo-list.md
+++ /dev/null
@@ -1,601 +0,0 @@
----
-id: flux-todo-list
-title: Flux TodoMVC Tutorial
-layout: docs
-prev: flux-overview.html
----
-
-To demonstrate the Flux architecture with some example code, let's take on the classic TodoMVC application. The entire application is available in the React GitHub repo within the [todomvc-flux](https://github.com/facebook/react/tree/master/examples/todomvc-flux) example directory, but let's walk through the development of it a step at a time. 
-
-To begin, we'll need some boilerplate and get up and running with a module system. Node's module system, based on CommonJS, will fit the bill very nicely and we can build off of [react-boilerplate](https://github.com/petehunt/react-boilerplate) to get up and running quickly. Assuming you have npm installed, simply clone the react-boilerplate code from GitHub, and navigate into the resulting directory in Terminal (or whatever CLI application you like). Next run the npm scripts to get up and running: `npm install`, then `npm run build`, and lastly `npm start` to continuously build using Browserify.
-
-The TodoMVC example has all this built into it as well, but if you're starting with react-boilerplate make sure you edit your package.json file to match the file structure and dependencies described in the TodoMVC example's [package.json](https://github.com/facebook/react/tree/master/examples/todomvc-flux/package.json), or else your code won't match up with the explanations below. 
-
-
-Source Code Structure
---------------------- 
-The resulting index.js file may be used as the entry point into our app, but we'll put most of our code in a 'js' directory. Let's let Browserify do its thing, and now we'll open a new tab in Terminal (or a GUI file browser) to look at the directory. It should look something like this: 
-
-``` 
-myapp 
-  | 
-  + ... 
-  + js
-    |
-    + app.js
-    + bundle.js // generated by Browserify whenever we make changes. 
-  + index.html 
-  + ... 
-``` 
- 
-Next we'll dive into the js directory, and layout our application's primary directory structure: 
- 
-``` 
-myapp 
-  | 
-  + ... 
-  + js 
-    | 
-    + actions 
-    + components // all React components, both views and controller-views
-    + constants
-    + dispatcher 
-    + stores 
-    + app.js
-    + bundle.js
-  + index.html
-  + ...
-``` 
-
-Creating a Dispatcher 
---------------------- 
-
-Now we are ready to create a dispatcher. Here is an naive example of a Dispatcher class, written with JavaScript promises, polyfilled with Jake Archibald's [ES6-Promises](https://github.com/jakearchibald/ES6-Promises) module. 
-
-```javascript 
-var Promise = require('es6-promise').Promise;
-var merge = require('react/lib/merge');
-
-var _callbacks = [];
-var _promises = [];
-
-var Dispatcher = function() {};
-Dispatcher.prototype = merge(Dispatcher.prototype, {
-
-  /**
-   * Register a Store's callback so that it may be invoked by an action.
-   * @param {function} callback The callback to be registered.
-   * @return {number} The index of the callback within the _callbacks array.
-   */
-  register: function(callback) {
-    _callbacks.push(callback);
-    return _callbacks.length - 1; // index
-  },
-
-  /**
-   * dispatch
-   * @param  {object} payload The data from the action.
-   */
-  dispatch: function(payload) {
-    // First create array of promises for callbacks to reference.
-    var resolves = [];
-    var rejects = [];
-    _promises = _callbacks.map(function(_, i) {
-      return new Promise(function(resolve, reject) {
-        resolves[i] = resolve;
-        rejects[i] = reject;
-      });
-    });
-    // Dispatch to callbacks and resolve/reject promises.
-    _callbacks.forEach(function(callback, i) {
-      // Callback can return an obj, to resolve, or a promise, to chain.
-      // See waitFor() for why this might be useful.
-      Promise.resolve(callback(payload)).then(function() {
-        resolves[i](payload);
-      }, function() {
-        rejects[i](new Error('Dispatcher callback unsuccessful'));
-      });
-    });
-    _promises = [];
-  }
-}); 
- 
-module.exports = Dispatcher; 
-``` 
-
-The public API of this basic Dispatcher consists of only two methods: register() and dispatch(). We'll use register() within our stores to register each store's callback. We'll use dispatch() within our actions to trigger the invocation of the callbacks. 
-
-Now we are all set to create a dispatcher that is more specific to our app, which we'll call AppDispatcher. 
-
-```javascript 
-var Dispatcher = require('./Dispatcher');
-
-var merge = require('react/lib/merge');
-
-var AppDispatcher = merge(Dispatcher.prototype, {
-
-  /**
-   * A bridge function between the views and the dispatcher, marking the action
-   * as a view action.  Another variant here could be handleServerAction.
-   * @param  {object} action The data coming from the view.
-   */
-  handleViewAction: function(action) {
-    this.dispatch({
-      source: 'VIEW_ACTION',
-      action: action
-    });
-  }
-
-});
-
-module.exports = AppDispatcher;
-``` 
-
-Now we've created an implementation that is a bit more specific to our needs, with a helper function we can use in the actions coming from our views' event handlers. We might expand on this later to provide a separate helper for server updates, but for now this is all we need. 
-
-
-Creating Stores 
----------------- 
-
-We can use Node's EventEmitter to get started with a store. We need EventEmitter to broadcast the 'change' event to our controller-views. So let's take a look at what that looks like. I've omitted some of the code for the sake of brevity, but for the full version see [TodoStore.js](https://github.com/Facebook/react/blob/master/examples/todomvc-flux/js/stores/TodoStore.js) in the TodoMVC example code. 
-
-```javascript 
-var AppDispatcher = require('../dispatcher/AppDispatcher'); 
-var EventEmitter = require('events').EventEmitter; 
-var TodoConstants = require('../constants/TodoConstants'); 
-var merge = require('react/lib/merge'); 
- 
-var CHANGE_EVENT = 'change'; 
- 
-var _todos = {}; // collection of todo items 
- 
-/**
- * Create a TODO item. 
- * @param {string} text The content of the TODO 
- */ 
-function create(text) { 
-  // Using the current timestamp in place of a real id. 
-  var id = Date.now(); 
-  _todos[id] = { 
-    id: id, 
-    complete: false, 
-    text: text 
-  }; 
-} 
- 
-/** 
- * Delete a TODO item. 
- * @param {string} id 
- */ 
-function destroy(id) { 
-  delete _todos[id]; 
-} 
- 
-var TodoStore = merge(EventEmitter.prototype, { 
- 
-  /** 
-   * Get the entire collection of TODOs. 
-   * @return {object} 
-   */ 
-  getAll: function() { 
-    return _todos; 
-  }, 
-   
-  emitChange: function() { 
-    this.emit(CHANGE_EVENT); 
-  }, 
-   
-  /** 
-   * @param {function} callback 
-   */ 
-  addChangeListener: function(callback) { 
-    this.on(CHANGE_EVENT, callback); 
-  }, 
-  
-  /** 
-   * @param {function} callback 
-   */ 
-  removeChangeListener: function(callback) { 
-    this.removeListener(CHANGE_EVENT, callback); 
-  } 
-   
-  dispatcherIndex: AppDispatcher.register(function(payload) { 
-    var action = payload.action; 
-    var text; 
-   
-    switch(action.actionType) { 
-      case TodoConstants.TODO_CREATE: 
-        text = action.text.trim(); 
-        if (text !== '') { 
-          create(text); 
-          TodoStore.emitChange(); 
-        } 
-        break; 
-      
-      case TodoConstants.TODO_DESTROY: 
-        destroy(action.id); 
-        TodoStore.emitChange(); 
-        break; 
-      
-      // add more cases for other actionTypes, like TODO_UPDATE, etc. 
-    }
-    
-    return true; // No errors. Needed by promise in Dispatcher. 
-  }) 
-
-}); 
- 
-module.exports = TodoStore; 
-``` 
-
-There are a few important things to note in the above code. To start, we are maintaining a private data structure called _todos. This object contains all the individual to-do items. Because this variable lives outside the class, but within the closure of the module, it remains private — it cannot be directly changed from the outside. This helps us preserve a distinct input/output interface for the flow of data by making it impossible to update the store without using an action. 
- 
-Another important part is the registration of the store's callback with the dispatcher. We pass in our payload handling callback to the dispatcher and preserve the index that this store has in the dispatcher's registry. The callback function currently only handles two actionTypes, but later we can add as many as we need. 
- 
- 
-Listening to Changes with a Controller-View 
-------------------------------------------- 
- 
-We need a React component near the top of our component hierarchy to listen for changes in the store. In a larger app, we would have more of these listening components, perhaps one for every section of the page. In Facebook's Ads Creation Tool, we have many of these controller-like views, each governing a specific section of the UI. In the Lookback Video Editor, we only had two: one for the animated preview and one for the image selection interface. Here's one for our TodoMVC example. Again, this is slightly abbreviated, but for the full code you can take a look at the TodoMVC example's [TodoApp.react.js](https://github.com/facebook/react/blob/master/examples/todomvc-flux/js/components/TodoApp.react.js) 
- 
-```javascript
-/** @jsx React.DOM */ 
- 
-var Footer = require('./Footer.react'); 
-var Header = require('./Header.react'); 
-var MainSection = require('./MainSection.react'); 
-var React = require('react'); 
-var TodoStore = require('../stores/TodoStore'); 
- 
-function getTodoState() { 
-  return { 
-    allTodos: TodoStore.getAll() 
-  }; 
-} 
- 
-var TodoApp = React.createClass({ 
- 
-  getInitialState: function() { 
-    return getTodoState(); 
-  }, 
-  
-  componentDidMount: function() { 
-    TodoStore.addChangeListener(this._onChange); 
-  }, 
-  
-  componentWillUnmount: function() { 
-    TodoStore.removeChangeListener(this._onChange); 
-  }, 
- 
-  /**
-   * @return {object}
-   */
-  render: function() {
-  	return (
-      <div>
-        <Header />
-        <MainSection
-          allTodos={this.state.allTodos}
-          areAllComplete={this.state.areAllComplete}
-        />
-        <Footer allTodos={this.state.allTodos} />
-      </div>
-  	);
-  }, 
- 
-  _onChange: function() { 
-    this.setState(getTodoState()); 
-  } 
- 
-}); 
- 
-module.exports = TodoApp; 
-``` 
-
-Now we're in our familiar React territory, utilizing React's lifecycle methods. We set up the initial state of this controller-view in getInitialState(), register an event listener in componentDidMount(), and then clean up after ourselves within componentWillUnmount(). We render a containing div and pass down the collection of states we got from the TodoStore. 
-
-The Header component contains the primary text input for the application, but it does not need to know the state of the store. The MainSection and Footer do need this data, so we pass it down to them. 
-
-More Views 
----------- 
-At a high level, the React component hierarchy of the app looks like this: 
-
-```javascript
-<TodoApp> 
-  <Header> 
-    <TodoTextInput /> 
-  
-    <MainSection> 
-      <ul> 
-        <TodoItem /> 
-      </ul> 
-    </MainSection> 
-  
-</TodoApp> 
-``` 
-If a TodoItem is in edit mode, it will also render a TodoTextInput as a child. Let's take a look at how some of these components display the data they receive as props, and how they communicate through actions with the dispatcher. 
-The MainSection needs to iterate over the collection of to-do items it received from TodoApp to create the list of TodoItems. In the component's render() method, we can do that iteration like so: 
-
-```javascript
-var allTodos = this.props.allTodos; 
- 
-for (var key in allTodos) { 
-  todos.push(<TodoItem key={key} todo={allTodos[key]} />); 
-} 
- 
-return ( 
-  <section id="main"> 
-  <ul id="todo-list">{todos}</ul> 
-); 
-``` 
-Now each TodoItem can display it's own text, and perform actions utilizing it's own ID. Explaining all the different actions that a TodoItem can invoke in the TodoMVC example goes beyond the scope of this article, but let's just take a look at the action that deletes one of the to-do items. Here is an abbreviated version of the TodoItem: 
-
-```javascript
-/** @jsx React.DOM */ 
- 
-var React = require('react'); 
-var TodoActions = require('../actions/TodoActions'); 
-var TodoTextInput = require('./TodoTextInput.react'); 
- 
-var TodoItem = React.createClass({ 
- 
-  propTypes: { 
-    todo: React.PropTypes.object.isRequired 
-  }, 
- 
-  render: function() { 
-    var todo = this.props.todo; 
- 
-    return ( 
-      <li 
-        key={todo.id}> 
-        <label> 
-          {todo.text} 
-        </label> 
-        <button className="destroy" onClick={this._onDestroyClick} /> 
-      </li> 
-    ); 
-  }, 
- 
-  _onDestroyClick: function() { 
-    TodoActions.destroy(this.props.todo.id); 
-  } 
- 
-}); 
- 
-module.exports = TodoItem; 
-``` 
-
-With a destroy action available in our library of TodoActions, and a store ready to handle it, connecting the user's interaction with application state changes could not be simpler. We just wrap our onClick handler around the destroy action, provide it with the id, and we're done. Now the user can click the destroy button and kick off the Flux cycle to update the rest of the application. 
-
-Text input, on the other hand, is just a bit more complicated because we need to hang on to the state of the text input within the React component itself. Let's take a look at how TodoTextInput works. 
-
-As you'll see below, with every change to the input, React expects us to update the state of the component. So when we are finally ready to save the text inside the input, we will put the value held in the component's state in the action's payload. This is UI state, rather than application state, and keeping that distinction in mind is a good guide for where state should live. All application state should live in the store, while components occasionally hold on to UI state. Ideally, React components preserve as little state as possible. 
-
-Because TodoTextInput is being used in multiple places within our application, with different behaviors, we'll need to pass the onSave method in as a prop from the component's parent. This allows onSave to invoke different actions depending on where it is used. 
-
-```javascript
-/** @jsx React.DOM */ 
- 
-var React = require('react'); 
-var ReactPropTypes = React.PropTypes; 
- 
-var ENTER_KEY_CODE = 13; 
- 
-var TodoTextInput = React.createClass({ 
- 
-  propTypes: { 
-    className: ReactPropTypes.string, 
-    id: ReactPropTypes.string, 
-    placeholder: ReactPropTypes.string, 
-    onSave: ReactPropTypes.func.isRequired, 
-    value: ReactPropTypes.string 
-  }, 
- 
-  getInitialState: function() { 
-    return { 
-      value: this.props.value || '' 
-    }; 
-  },
- 
-  /** 
-   * @return {object} 
-   */ 
-  render: function() /*object*/ { 
-    return ( 
-      <input 
-        className={this.props.className} 
-        id={this.props.id} 
-        placeholder={this.props.placeholder} 
-        onBlur={this._save} 
-        onChange={this._onChange} 
-        onKeyDown={this._onKeyDown} 
-        value={this.state.value} 
-        autoFocus={true} 
-      /> 
-    ); 
-  }, 
- 
-  /** 
-   * Invokes the callback passed in as onSave, allowing this component to be 
-   * used in different ways. 
-   */ 
-  _save: function() { 
-    this.props.onSave(this.state.value); 
-    this.setState({ 
-      value: '' 
-    }); 
-  }, 
- 
-  /** 
-   * @param {object} event 
-   */ 
-  _onChange: function(/*object*/ event) { 
-    this.setState({ 
-      value: event.target.value 
-    }); 
-  }, 
- 
-  /** 
-   * @param {object} event 
-   */ 
-
-  _onKeyDown: function(event) { 
-    if (event.keyCode === ENTER_KEY_CODE) { 
-      this._save(); 
-    } 
-  } 
-
-}); 
- 
-module.exports = TodoTextInput; 
-``` 
-
-The Header passes in the onSave method as a prop to allow the TodoTextInput to create new 
-to-do items: 
-
-```javascript
-/** @jsx React.DOM */ 
- 
-var React = require('react'); 
-var TodoActions = require('../actions/TodoActions'); 
-var TodoTextInput = require('./TodoTextInput.react'); 
- 
-var Header = React.createClass({ 
- 
-  /**
-   * @return {object}
-   */
-  render: function() {
-    return (
-      <header id="header">
-        <h1>todos</h1>
-        <TodoTextInput
-          id="new-todo"
-          placeholder="What needs to be done?"
-          onSave={this._onSave}
-        />
-      </header>
-    );
-  }, 
- 
-  /**
-   * Event handler called within TodoTextInput.
-   * Defining this here allows TodoTextInput to be used in multiple places
-   * in different ways.
-   * @param {string} text
-   */
-  _onSave: function(text) {
-    TodoActions.create(text);
-  } 
- 
-}); 
- 
-module.exports = Header; 
-``` 
-
-In a different context, such as in editing mode for an existing to-do item, we might pass an onSave callback that invokes `TodoActions.update(text)` instead. 
-
-
-Creating Semantic Actions 
-------------------------- 
-
-Here is the basic code for the two actions we used above in our views: 
-
-```javascript 
-/** 
- * TodoActions 
- */ 
- 
-var AppDispatcher = require('../dispatcher/AppDispatcher');
-var TodoConstants = require('../constants/TodoConstants');
-
-var TodoActions = {
-
-  /**
-   * @param  {string} text
-   */
-  create: function(text) {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_CREATE,
-      text: text
-    });
-  }, 
- 
-  /**
-   * @param  {string} id
-   */
-  destroy: function(id) {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_DESTROY,
-      id: id
-    });
-  }, 
- 
-}; 
- 
-module.exports = TodoActions; 
-``` 
-
-As you can see, we really would not need to have the helpers AppDispatcher.handleViewAction() or TodoActions.create(). We could, in theory, call AppDispatcher.dispatch() directly and provide a payload. But as our application grows, having these helpers keeps the code clean and semantic. It's just a lot cleaner to write TodoActions.destroy(id) instead of writing a whole lot of things that our TodoItem shouldn't have to know about. 
-
-The payload produced by the TodoActions.create() will look like: 
-
-```javascript 
-{ 
-  source: 'VIEW_ACTION', 
-  action: { 
-    type: 'TODO_CREATE', 
-    text: 'Write blog post about Flux' 
-  } 
-} 
-``` 
-
-This payload is provided to the TodoStore through its registered callback. The TodoStore then broadcasts the 'change' event, and the MainSection responds by fetching the new collection of to-do items from the TodoStore and changing its state. This change in state causes the TodoApp component to call its own render() method, and the render() method of all of its descendents. 
-
-Start Me Up 
------------
-
-The bootstrap file of our application is app.js. It simply takes the TodoApp component and renders it in the root element of the application. 
- 
-```javascript
-/** @jsx React.DOM */ 
- 
-var React = require('react'); 
- 
-var TodoApp = require('./components/TodoApp.react'); 
- 
-React.renderComponent( 
-  <TodoApp />, 
-  document.getElementById('todoapp') 
-); 
-``` 
-
-Adding Dependency Management to the Dispatcher 
-----------------------------------------------
-
-As I said previously, our Dispatcher implementation is a bit naive. It's pretty good, but it will not suffice for most applications. We need a way to be able to manage dependencies between Stores. Let's add that functionality with a waitFor() method within the main body of the Dispatcher class. 
-
-We'll need another public method, waitFor(). Note that it returns a Promise that can in turn be returned from the Store callback.
-
-```javascript
-  /**
-   * @param  {array} promisesIndexes
-   * @param  {function} callback
-   */
-  waitFor: function(promiseIndexes, callback) {
-    var selectedPromises = promiseIndexes.map(function(index) {
-      return _promises[index];
-    });
-    return Promise.all(selectedPromises).then(callback);
-  }
-``` 
-
-Now within the TodoStore callback we can explicitly wait for any dependencies to first update before moving forward.  However, if Store A waits for Store B, and B waits for A, then a circular dependency will occur.  A more robust dispatcher is required to flag this scenario with warnings in the console.
-
-The Future of Flux 
------------------- 
-
-A lot of people ask if Facebook will release Flux as an open source framework. Really, Flux is just an architecture, not a framework.  But perhaps a Flux boilerplate project might make sense, if there is enough interest. Please let us know if you'd like to see us do this.
-
-Thanks for taking the time to read about how we build client-side applications at Facebook. We hope Flux proves as useful to you as it has to us.
diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md
deleted file mode 100644
index 956fb4cf800..00000000000
--- a/docs/docs/getting-started.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-id: getting-started
-title: Getting Started
-layout: docs
-next: tutorial.html
----
-
-## JSFiddle
-
-The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
-
- * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
- * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
-
-## Starter Kit
-
-Download the starter kit to get started.
-
-<div class="buttons-unit downloads">
-  <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
-    Download Starter Kit {{site.react_version}}
-  </a>
-</div>
-
-In the root directory of the starter kit, create a `helloworld.html` with the following contents.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="build/react.js"></script>
-    <script src="build/JSXTransformer.js"></script>
-  </head>
-  <body>
-    <div id="example"></div>
-    <script type="text/jsx">
-      /** @jsx React.DOM */
-      React.renderComponent(
-        <h1>Hello, world!</h1>,
-        document.getElementById('example')
-      );
-    </script>
-  </body>
-</html>
-```
-
-The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/react/docs/jsx-in-depth.html) to learn more about it. In order to translate it to vanilla JavaScript we use `<script type="text/jsx">` and include `JSXTransformer.js` to actually perform the transformation in the browser.
-
-### Separate File
-
-Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.
-
-```javascript
-/** @jsx React.DOM */
-React.renderComponent(
-  <h1>Hello, world!</h1>,
-  document.getElementById('example')
-);
-```
-Then reference it from `helloworld.html`:
-
-```html{10}
-<script type="text/jsx" src="src/helloworld.js"></script>
-```
-
-### Offline Transform
-
-First install the command-line tools (requires [npm](http://npmjs.org/)):
-
-```
-npm install -g react-tools
-```
-
-Then, translate your `src/helloworld.js` file to plain JavaScript:
-
-```
-jsx --watch src/ build/
-
-```
-
-The file `build/helloworld.js` is autogenerated whenever you make a change.
-
-```javascript{3}
-/** @jsx React.DOM */
-React.renderComponent(
-  React.DOM.h1(null, 'Hello, world!'),
-  document.getElementById('example')
-);
-```
-
-> Note:
->
-> The comment parser is very strict right now; in order for it to pick up the `@jsx` modifier, two conditions are required. The `@jsx` comment block must be the first comment on the file. The comment must start with `/**` (`/*` and `//` will not work). If the parser can't find the `@jsx` comment, it will output the file without transforming it.
-
-Update your HTML file as below:
-
-```html{6,10}
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Hello React!</title>
-    <script src="build/react.js"></script>
-    <!-- No need for JSXTransformer! -->
-  </head>
-  <body>
-    <div id="example"></div>
-    <script src="build/helloworld.js"></script>
-  </body>
-</html>
-```
-
-## Want CommonJS?
-
-If you want to use React with [browserify](http://browserify.org/), [webpack](http://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.org/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
-
-## Next Steps
-
-Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more. Good luck, and welcome!
diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md
deleted file mode 100644
index 2622874a420..00000000000
--- a/docs/docs/getting-started.zh-CN.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-id: getting-started-zh-CN
-title: 入门教程
-layout: docs
-next: tutorial.html
----
-
-## JSFiddle
-
-开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds
-
- * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
- * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
-
-## 入门教程包 (Starter Kit)
-
-开始先下载入门教程包
-
-<div class="buttons-unit downloads">
-  <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
-    下载入门教程 {{site.react_version}}
-  </a>
-</div>
-
-在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="build/react.js"></script>
-    <script src="build/JSXTransformer.js"></script>
-  </head>
-  <body>
-    <div id="example"></div>
-    <script type="text/jsx">
-      /** @jsx React.DOM */
-      React.renderComponent(
-        <h1>Hello, world!</h1>,
-        document.getElementById('example')
-      );
-    </script>
-  </body>
-</html>
-```
-
-在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/jsx">` 标签包裹着含有 JSX 的代码，然后引入 `JSXTransformer.js` 库来实现在浏览器里的代码转换。
-
-### 分离文件
-
-你的 React JSX 代码文件可以写在另外的文件里。新建下面的 `src/helloworld.js`。
-
-```javascript
-/** @jsx React.DOM */
-React.renderComponent(
-  <h1>Hello, world!</h1>,
-  document.getElementById('example')
-);
-```
-
-然后在 `helloworld.html` 引用该文件：
- 
-```html{10}
-<script type="text/jsx" src="src/helloworld.js"></script>
-```
-
-### 离线转换
-
-先安装命令行工具（依赖 [npm](http://npmjs.org/)）：
-
-```
-npm install -g react-tools
-```
-
-然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript:
-
-```
-jsx --watch src/ build/
-
-```
-
-只要你修改了， `build/helloworld.js` 文件会自动生成。
-
-```javascript{3}
-/** @jsx React.DOM */
-React.renderComponent(
-  React.DOM.h1(null, 'Hello, world!'),
-  document.getElementById('example')
-);
-```
-
-> 注意:
->
-> 目前注释解析器还是非常严格；为了让它能够找出 `@jsx` 修饰符，有两个限制是必须的。`@jsx` 注释块必须是代码文件第一个注释。注释必须以 `/**` (`/*` 和 `//` 不起作用) 开头。如果解析器找不到 `@jsx` 注释，它就不会转换代码，直接原样输出到文件。
-
-对照下面更新你的 HTML 代码
-
-```html{6,10}
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Hello React!</title>
-    <script src="build/react.js"></script>
-    <!-- No need for JSXTransformer! -->
-  </head>
-  <body>
-    <div id="example"></div>
-    <script src="build/helloworld.js"></script>
-  </body>
-</html>
-```
-
-## 想用 CommonJS？
-
-如果你想在一个模块系统里使用 React，[fork 我们的代码](http://github.com/facebook/react)， `npm install` 然后运行 `grunt`。一个漂亮的 CommonJS 模块集将会被生成。我们的 `jsx` 转换工具可以很轻松的集成到大部分打包系统里（不仅仅是 CommonJS）。
-
-## 下一步
-
-去看看[入门教程](/react/docs/tutorial.html)，然后学习其他在 `/examples` 目录里的示例代码。祝你好运，欢迎来到 React 的世界。
-
diff --git a/docs/docs/index.html b/docs/docs/index.html
deleted file mode 100644
index 4ea0787d5ec..00000000000
--- a/docs/docs/index.html
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: redirect
-destination: getting-started.html
----
diff --git a/docs/docs/ref-01-top-level-api.md b/docs/docs/ref-01-top-level-api.md
deleted file mode 100644
index 9a215b76ecb..00000000000
--- a/docs/docs/ref-01-top-level-api.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-id: top-level-api
-title: Top-Level API
-layout: docs
-permalink: top-level-api.html
-next: component-api.html
----
-
-## React
-
-`React` is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can `require()` it.
-
-
-### React.createClass
-
-```javascript
-function createClass(object specification)
-```
-
-Create a component given a specification. A component implements a `render` method which returns **one single** child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.
-
-For more information about the specification object, see [Component Specs and Lifecycle](/react/docs/component-specs.html).
-
-
-### React.renderComponent
-
-```javascript
-ReactComponent renderComponent(
-  ReactComponent component,
-  DOMElement container,
-  [function callback]
-)
-```
-
-Render a React component into the DOM in the supplied `container` and return a reference to the component.
-
-If the React component was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
-
-If the optional callback is provided, it will be executed after the component is rendered or updated.
-
-> Note:
->
-> `React.renderComponent()` replaces the contents of the container node you
-> pass in. In the future, it may be possible to insert a component to an
-> existing DOM node without overwriting the existing children.
-
-
-### React.unmountComponentAtNode
-
-```javascript
-boolean unmountComponentAtNode(DOMElement container)
-```
-
-Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
-
-
-### React.renderComponentToString
-
-```javascript
-string renderComponentToString(ReactComponent component)
-```
-
-Render a component to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
-
-If you call `React.renderComponent()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
-
-
-### React.renderComponentToStaticMarkup
-
-```javascript
-string renderComponentToStaticMarkup(ReactComponent component)
-```
-
-Similar to `renderComponentToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
-
-
-### React.DOM
-
-`React.DOM` provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the `/** @jsx React.DOM */` docblock.
-
-
-### React.PropTypes
-
-`React.PropTypes` includes types that can be used with a component's `propTypes` object to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](/react/docs/reusable-components.html).
-
-
-### React.initializeTouchEvents
-
-```javascript
-initializeTouchEvents(boolean shouldUseTouch)
-```
-
-Configure React's event system to handle touch events on mobile devices.
-
-
-### React.Children
-
-`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
-
-#### React.Children.map
-
-```javascript
-object React.Children.map(object children, function fn [, object context])
-```
-
-Invoke `fn` on every immediate child contained within `children` with `this` set to `context`. If `children` is a nested object or array it will be traversed: `fn` will never be passed the container objects. If children is `null` or `undefined` returns `null` or `undefined` rather than an empty object.
-
-#### React.Children.forEach
-
-```javascript
-React.Children.forEach(object children, function fn [, object context])
-```
-
-Like `React.Children.map()` but does not return an object.
-
-#### React.Children.count
-
-```javascript
-number React.Children.count(object children)
-```
-
-Return the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.
-
-#### React.Children.only
-
-```javascript
-object React.Children.only(object children)
-```
-
-Return the only child in `children`. Throws otherwise.
diff --git a/docs/docs/ref-02-component-api.md b/docs/docs/ref-02-component-api.md
deleted file mode 100644
index f2b5732d1c8..00000000000
--- a/docs/docs/ref-02-component-api.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-id: component-api
-title: Component API
-layout: docs
-permalink: component-api.html
-prev: top-level-api.html
-next: component-specs.html
----
-
-## ReactComponent
-
-Component classes created by `React.createClass()` return instances of `ReactComponent` when called. Most of the time when you're using React you're either creating or consuming these component objects.
-
-
-### setState
-
-```javascript
-setState(object nextState[, function callback])
-```
-
-Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.  In addition, you can supply an optional callback function that is executed once `setState` is completed and the component is re-rendered.
-
-> Notes:
->
-> *NEVER* mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
->
-> `setState()` does not immediately mutate `this.state` but creates a pending state transition. Accessing `this.state` after calling this method can potentially return the existing value.
->
-> There is no guarantee of synchronous operation of calls to `setState` and calls may be batched for performance gains.
->
-> `setState()` will always trigger a re-render unless conditional rendering logic is implemented in `shouldComponentUpdate()`. If mutable objects are being used and the logic cannot be implemented in `shouldComponentUpdate()`, calling `setState()` only when the new state differs from the previous state will avoid unnecessary re-renders.
-
-
-### replaceState
-
-```javascript
-replaceState(object nextState[, function callback])
-```
-
-Like `setState()` but deletes any pre-existing state keys that are not in nextState.
-
-
-### forceUpdate()
-
-```javascript
-forceUpdate([function callback])
-```
-
-If your `render()` method reads from something other than `this.props` or `this.state`, you'll need to tell React when it needs to re-run `render()` by calling `forceUpdate()`. You'll also need to call `forceUpdate()` if you mutate `this.state` directly.
-
-Calling `forceUpdate()` will cause `render()` to be called on the component and its children, but React will still only update the DOM if the markup changes.
-
-Normally you should try to avoid all uses of `forceUpdate()` and only read from `this.props` and `this.state` in `render()`. This makes your application much simpler and more efficient.
-
-
-### getDOMNode
-
-```javascript
-DOMElement getDOMNode()
-```
-
-If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When `render` returns `null` or `false`, `this.getDOMNode()` returns `null`.
-
-
-### isMounted()
-
-```javascript
-bool isMounted()
-```
-
-`isMounted()` returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to `setState()` or `forceUpdate()`.
-
-
-### transferPropsTo
-
-```javascript
-ReactComponent transferPropsTo(ReactComponent targetComponent)
-```
-
-Transfer properties from this component to a target component that have not already been set on the target component. After the props are updated, `targetComponent` is returned as a convenience. This function is useful when creating simple HTML-like components:
-
-```javascript
-var Avatar = React.createClass({
-  render: function() {
-    return this.transferPropsTo(
-      <img src={"/avatars/" + this.props.userId + ".png"} userId={null} />
-    );
-  }
-});
-
-// <Avatar userId={17} width={200} height={200} />
-```
-
-Properties that are specified directly on the target component instance (such as `src` and `userId` in the above example) will not be overwritten by `transferPropsTo`.
-
-> Note:
->
-> Use `transferPropsTo` with caution; it encourages tight coupling and makes it easy to accidentally introduce implicit dependencies between components. When in doubt, it's safer to explicitly copy the properties that you need onto the child component.
-
-
-### setProps
-
-```javascript
-setProps(object nextProps[, function callback])
-```
-
-When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `React.renderComponent()`.
-
-Though calling `React.renderComponent()` again on the same node is the preferred way to update a root-level component, you can also call `setProps()` to change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once `setProps` is completed and the component is re-rendered.
-
-> Note:
->
-> When possible, the declarative approach of calling `React.renderComponent()` again is preferred; it tends to make updates easier to reason about. (There's no significant performance difference between the two approaches.)
->
-> This method can only be called on a root-level component. That is, it's only available on the component passed directly to `React.renderComponent()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.
-
-
-### replaceProps
-
-```javascript
-replaceProps(object nextProps[, function callback])
-```
-
-Like `setProps()` but deletes any pre-existing props instead of merging the two objects.
diff --git a/docs/docs/ref-03-component-specs.md b/docs/docs/ref-03-component-specs.md
deleted file mode 100644
index 4d68915f31d..00000000000
--- a/docs/docs/ref-03-component-specs.md
+++ /dev/null
@@ -1,216 +0,0 @@
----
-id: component-specs
-title: Component Specs and Lifecycle
-layout: docs
-permalink: component-specs.html
-prev: component-api.html
-next: tags-and-attributes.html
----
-
-## Component Specifications
-
-When creating a component class by invoking `React.createClass()`, you should provide a specification object that contains a `render` method and can optionally contain other lifecycle methods described here.
-
-
-### render
-
-```javascript
-ReactComponent render()
-```
-
-The `render()` method is required.
-
-When called, it should examine `this.props` and `this.state` and return a single child component. This child component can be either a virtual representation of a native DOM component (such as `<div />` or `React.DOM.div()`) or another composite component that you've defined yourself.
-
-You can also return `null` or `false` to indicate that you don't want anything rendered. Behind the scenes, React renders a `<noscript>` tag to work with our current diffing algorithm. When returning `null` or `false`, `this.getDOMNode()` will return `null`.
-
-The `render()` function should be *pure*, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using `setTimeout`). If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes server rendering more practical and makes components easier to think about.
-
-
-### getInitialState
-
-```javascript
-object getInitialState()
-```
-
-Invoked once before the component is mounted. The return value will be used as the initial value of `this.state`.
-
-
-### getDefaultProps
-
-```javascript
-object getDefaultProps()
-```
-
-Invoked once and cached when the class is created. Values in the mapping will be set on `this.props` if that prop is not specified by the parent component (i.e. using an `in` check).
-
-This method is invoked before any instances are created and thus cannot rely on `this.props`. In addition, be aware that any complex objects returned by `getDefaultProps()` will be shared across instances, not copied.
-
-
-### propTypes
-
-```javascript
-object propTypes
-```
-
-The `propTypes` object allows you to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](/react/docs/reusable-components.html).
-
-
-### mixins
-
-```javascript
-array mixins
-```
-
-The `mixins` array allows you to use mixins to share behavior among multiple components. For more information about mixins, see [Reusable Components](/react/docs/reusable-components.html).
-
-
-### statics
-
-```javascript
-object statics
-```
-
-The `statics` object allows you to define static methods that can be called on the component class. For example:
-
-```javascript
-var MyComponent = React.createClass({
-  statics: {
-    customMethod: function(foo) {
-      return foo === 'bar';
-    }
-  },
-  render: function() {
-  }
-});
-
-MyComponent.customMethod('bar');  // true
-```
-
-Methods defined within this block are _static_, meaning that you can run them before any component instances are created, and the methods do not have access to the props or state of your components. If you want to check the value of props in a static method, have the caller pass in the props as an argument to the static method.
-
-
-### displayName
-
-```javascript
-string displayName
-```
-
-The `displayName` string is used in debugging messages. JSX sets this value automatically; see [JSX in Depth](/react/docs/jsx-in-depth.html#react-composite-components).
-
-
-## Lifecycle Methods
-
-Various methods are executed at specific points in a component's lifecycle.
-
-
-### Mounting: componentWillMount
-
-```javascript
-componentWillMount()
-```
-
-Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call `setState` within this method, `render()` will see the updated state and will be executed only once despite the state change.
-
-
-### Mounting: componentDidMount
-
-```javascript
-componentDidMount()
-```
-
-Invoked immediately after rendering occurs, only on the client (not on the server). At this point in the lifecycle, the component has a DOM representation which you can access via `this.getDOMNode()`.
-
-If you want to integrate with other JavaScript frameworks, set timers using `setTimeout` or `setInterval`, or send AJAX requests, perform those operations in this method.
-
-> Note:
->
-> Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling `this.getDOMNode()`.
-
-
-### Updating: componentWillReceiveProps
-
-```javascript
-componentWillReceiveProps(object nextProps)
-```
-
-Invoked when a component is receiving new props. This method is not called for the initial render.
-
-Use this as an opportunity to react to a prop transition before `render()` is called by updating the state using `this.setState()`. The old props can be accessed via `this.props`. Calling `this.setState()` within this function will not trigger an additional render.
-
-```javascript
-componentWillReceiveProps: function(nextProps) {
-  this.setState({
-    likesIncreasing: nextProps.likeCount > this.props.likeCount
-  });
-}
-```
-
-> Note:
->
-> There is no analogous method `componentWillReceiveState`. An incoming prop transition may cause a state change, but the opposite is not true. If you need to perform operations in response to a state change, use `componentWillUpdate`.
-
-
-### Updating: shouldComponentUpdate
-
-```javascript
-boolean shouldComponentUpdate(object nextProps, object nextState)
-```
-
-Invoked before rendering when new props or state are being received. This method is not called for the initial render or when `forceUpdate` is used.
-
-Use this as an opportunity to `return false` when you're certain that the
-transition to the new props and state will not require a component update.
-
-```javascript
-shouldComponentUpdate: function(nextProps, nextState) {
-  return nextProps.id !== this.props.id;
-}
-```
-
-If `shouldComponentUpdate` returns false, then `render()` will be completely skipped until the next state change. (In addition, `componentWillUpdate` and `componentDidUpdate` will not be called.)
-
-By default, `shouldComponentUpdate` always returns true to prevent subtle bugs when `state` is mutated in place, but if you are careful to always treat `state` as immutable and to read only from `props` and `state` in `render()` then you can override `shouldComponentUpdate` with an implementation that compares the old props and state to their replacements.
-
-If performance is a bottleneck, especially with dozens or hundreds of components, use `shouldComponentUpdate` to speed up your app.
-
-
-### Updating: componentWillUpdate
-
-```javascript
-componentWillUpdate(object nextProps, object nextState)
-```
-
-Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
-
-Use this as an opportunity to perform preparation before an update occurs.
-
-> Note:
->
-> You *cannot* use `this.setState()` in this method. If you need to update state in response to a prop change, use `componentWillReceiveProps` instead.
-
-
-### Updating: componentDidUpdate
-
-```javascript
-componentDidUpdate(object prevProps, object prevState)
-```
-
-Invoked immediately after updating occurs. This method is not called for the initial render.
-
-Use this as an opportunity to operate on the DOM when the component has been updated.
-
-> Note:
->
-> Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling `this.getDOMNode()`.
-
-
-### Unmounting: componentWillUnmount
-
-```javascript
-componentWillUnmount()
-```
-
-Invoked immediately before a component is unmounted from the DOM.
-
-Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in `componentDidMount`.
diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md
deleted file mode 100644
index 905c1a954de..00000000000
--- a/docs/docs/ref-04-tags-and-attributes.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-id: tags-and-attributes
-title: Tags and Attributes
-layout: docs
-permalink: tags-and-attributes.html
-prev: component-specs.html
-next: events.html
----
-
-## Supported Tags
-
-React attempts to support all common elements. If you need an element that isn't listed here, please file an issue.
-
-### HTML Elements
-
-The following HTML elements are supported:
-
-```
-a abbr address area article aside audio b base bdi bdo big blockquote body br
-button canvas caption cite code col colgroup data datalist dd del details dfn
-div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
-head header hr html i iframe img input ins kbd keygen label legend li link
-main map mark menu menuitem meta meter nav noscript object ol optgroup option
-output p param pre progress q rp rt ruby s samp script section select small
-source span strong style sub summary sup table tbody td textarea tfoot th
-thead time title tr track u ul var video wbr
-```
-
-### SVG elements
-
-The following SVG elements are supported:
-
-```
-circle defs ellipse g line linearGradient mask path pattern polygon polyline
-radialGradient rect stop svg text tspan
-```
-
-You may also be interested in [react-art](https://github.com/facebook/react-art), a drawing library for React that can render to Canvas, SVG, or VML (for IE8).
-
-
-## Supported Attributes
-
-React supports all `data-*` and `aria-*` attributes as well as every attribute in the following lists.
-
-> Note:
->
-> All attributes are camel-cased and the attributes `class` and `for` are `className` and `htmlFor`, respectively, to match the DOM API specification.
-
-For a list of events, see [Supported Events](/react/docs/events.html).
-
-### HTML Attributes
-
-These standard attributes are supported:
-
-```
-accept accessKey action allowFullScreen allowTransparency alt async
-autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked
-className cols colSpan content contentEditable contextMenu controls coords
-crossOrigin data dateTime defer dir disabled download draggable encType form
-formNoValidate frameBorder height hidden href hrefLang htmlFor httpEquiv icon
-id label lang list loop max maxLength mediaGroup method min multiple muted
-name noValidate pattern placeholder poster preload radioGroup readOnly rel
-required role rows rowSpan sandbox scope scrollLeft scrolling scrollTop
-seamless selected shape size span spellCheck src srcDoc srcSet start step
-style tabIndex target title type useMap value width wmode
-```
-
-In addition, the following non-standard attributes are supported:
-
-- `autoCapitalize autoCorrect` for Mobile Safari.
-- `property` for [Open Graph](http://ogp.me/) meta tags.
-- `itemProp itemScope itemType` for [HTML5 microdata](http://schema.org/docs/gs.html).
-
-There is also the React-specific attribute `dangerouslySetInnerHTML` ([more here](/react/docs/special-non-dom-attributes.html)), used for directly inserting HTML strings into a component.
-
-### SVG Attributes
-
-```
-cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform
-gradientUnits markerEnd markerMid markerStart offset opacity
-patternContentUnits patternUnits points preserveAspectRatio r rx ry
-spreadMethod stopColor stopOpacity stroke strokeDasharray strokeLinecap
-strokeOpacity strokeWidth textAnchor transform version viewBox x1 x2 x y1 y2 y
-```
diff --git a/docs/docs/ref-05-events.md b/docs/docs/ref-05-events.md
deleted file mode 100644
index 84a7abfb594..00000000000
--- a/docs/docs/ref-05-events.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-id: events
-title: Event System
-layout: docs
-permalink: events.html
-prev: tags-and-attributes.html
-next: dom-differences.html
----
-
-## SyntheticEvent
-
-Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers.
-
-If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. Every `SyntheticEvent` object has the following attributes:
-
-```javascript
-boolean bubbles
-boolean cancelable
-DOMEventTarget currentTarget
-boolean defaultPrevented
-Number eventPhase
-boolean isTrusted
-DOMEvent nativeEvent
-void preventDefault()
-void stopPropagation()
-DOMEventTarget target
-Date timeStamp
-String type
-```
-
-
-## Supported Events
-
-React normalizes events so that they have consistent properties across
-different browsers.
-
-
-### Clipboard Events
-
-Event names:
-
-```
-onCopy onCut onPaste
-```
-
-Properties:
-
-```javascript
-DOMDataTransfer clipboardData
-```
-
-
-### Keyboard Events
-
-Event names:
-
-```
-onKeyDown onKeyPress onKeyUp
-```
-
-Properties:
-
-```javascript
-boolean altKey
-Number charCode
-boolean ctrlKey
-function getModifierState(key)
-String key
-Number keyCode
-String locale
-Number location
-boolean metaKey
-boolean repeat
-boolean shiftKey
-Number which
-```
-
-
-### Focus Events
-
-Event names:
-
-```
-onFocus onBlur
-```
-
-Properties:
-
-```javascript
-DOMEventTarget relatedTarget
-```
-
-
-### Form Events
-
-Event names:
-
-```
-onChange onInput onSubmit
-```
-
-For more information about the onChange event, see [Forms](/react/docs/forms.html).
-
-
-### Mouse Events
-
-Event names:
-
-```
-onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
-onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
-onMouseMove onMouseOut onMouseOver onMouseUp
-```
-
-Properties: 
-
-```javascript
-boolean altKey
-Number button
-Number buttons
-Number clientX
-Number clientY
-boolean ctrlKey
-function getModifierState(key)
-boolean metaKey
-Number pageX
-Number pageY
-DOMEventTarget relatedTarget
-Number screenX
-Number screenY
-boolean shiftKey
-```
-
-
-### Touch events
-
-To enable touch events, call `React.initializeTouchEvents(true)` before
-rendering any component.
-
-Event names:
-
-```
-onTouchCancel onTouchEnd onTouchMove onTouchStart
-```
-
-Properties:
-
-```javascript
-boolean altKey
-DOMTouchList changedTouches
-boolean ctrlKey
-function getModifierState(key)
-boolean metaKey
-boolean shiftKey
-DOMTouchList targetTouches
-DOMTouchList touches
-```
-
-
-### UI Events
-
-Event names:
-
-```
-onScroll
-```
-
-Properties:
-
-```javascript
-Number detail
-DOMAbstractView view
-```
-
-
-### Wheel Events
-
-Event names:
-
-```
-onWheel
-```
-
-Properties:
-
-```javascript
-Number deltaMode
-Number deltaX
-Number deltaY
-Number deltaZ
-```
diff --git a/docs/docs/ref-06-dom-differences.md b/docs/docs/ref-06-dom-differences.md
deleted file mode 100644
index dcae0f872eb..00000000000
--- a/docs/docs/ref-06-dom-differences.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-id: dom-differences
-title: DOM Differences
-layout: docs
-permalink: dom-differences.html
-prev: events.html
-next: special-non-dom-attributes.html
----
-
-React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations.
-
-* All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. **However**, `data-*` and `aria-*` attributes [conform to the specs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) and should be lower-cased only.
-* The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes.
-* All event objects conform to the W3C spec, and all events (including submit) bubble correctly per the W3C spec. See [Event System](/react/docs/events.html) for more details.
-* The `onChange` event behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time. See [Forms](/react/docs/forms.html) for more details.
-* Form input attributes such as `value` and `checked`, as well as `textarea`. [More here](/react/docs/forms.html).
diff --git a/docs/docs/ref-07-special-non-dom-attributes.md b/docs/docs/ref-07-special-non-dom-attributes.md
deleted file mode 100644
index ae0b5e7c6a0..00000000000
--- a/docs/docs/ref-07-special-non-dom-attributes.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-id: special-non-dom-attributes
-title: Special Non-DOM Attributes
-layout: docs
-permalink: special-non-dom-attributes.html
-prev: dom-differences.html
-next: reconciliation.html
----
-
-Beside [DOM differences](/react/docs/dom-differences.html), React offers some attributes that simply don't exist in DOM.
-
-- `key`: an optional, unique identifier. When your component shuffles around during `render` passes, it might be destroyed and recreated due to the diff algorithm. Assigning it a key that persists makes sure the component stays. See more [here](/react/docs/multiple-components.html#dynamic-children).
-- `ref`: see [here](/react/docs/more-about-refs.html).
-- `dangerouslySetInnerHTML`: takes an object with the key `__html` and a DOM string as value. This is mainly for cooperating with DOM string manipulation libraries. Refer to the last example on the front page.
diff --git a/docs/docs/ref-08-reconciliation.md b/docs/docs/ref-08-reconciliation.md
deleted file mode 100644
index 3c6a2f879ed..00000000000
--- a/docs/docs/ref-08-reconciliation.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-id: reconciliation
-title: Reconciliation
-layout: docs
-permalink: reconciliation.html
-prev: special-non-dom-attributes.html
----
-
-React's key design decision is to make the API seem like it re-renders the whole app on every update. This makes writing applications a lot easier but is also an incredible challenge to make it tractable. This article explains how with powerful heuristics we managed to turn a O(n<sup>3</sup>) problem into a O(n) one.
-
-
-## Motivation
-
-Generating the minimum number of operations to transform one tree into another is a complex and well-studied problem. The [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of nodes in the tree.
-
-This means that displaying 1000 nodes would require in the order of one billion comparisons. This is far too expensive for our use case. To put this number in perspective, CPUs nowadays execute roughly 3 billion instruction per second. So even with the most performant implementation, we wouldn't be able to compute that diff in less than a second.
-
-Since an optimal algorithm is not tractable, we implement a non-optimal O(n) algorithm using heuristics based on two assumptions:
-
-1. Two components of the same class will generate similar trees and two components of different classes will generate different trees.
-2. It is possible to provide a unique key for elements that is stable across different renders.
-
-In practice, these assumptions are ridiculously fast for almost all practical use cases.
-
-
-## Pair-wise diff
-
-In order to do a tree diff, we first need to be able to diff two nodes. There are three different cases being handled.
-
-
-### Different Node Types
-
-If the node type is different, React is going to treat them as two different sub-trees, throw away the first one and build/insert the second one. 
-
-```xml
-renderA: <div />
-renderB: <span />
-=> [removeNode <div />], [insertNode <span />]
-```
-
-The same logic is used for custom components. If they are not of the same type, React is not going to even try at matching what they render. It is just going to remove the first one from the DOM and insert the second one.
-
-```xml
-renderA: <Header />
-renderB: <Content />
-=> [removeNode <Header />], [insertNode <Content />]
-```
-
-Having this high level knowledge is a very important aspect of why React diff algorithm is both fast and precise. It provides a good heuristic to quickly prune big parts of the tree and focus on parts likely to be similar.
-
-It is very unlikely that a `<Header>` element is going generate a DOM that is going to look like what a `<Content>` would generate. Instead of spending time trying to match those two structures, React just re-builds the tree from scratch.
-
-As a corollary, if there is a `<Header>` element at the same position in two consecutive renders, you would expect to see a very similar structure and it is worth exploring it.
-
-
-### DOM Nodes
-
-When comparing two DOM nodes, we look at the attributes of both and can decide which of them changed in linear time.
-
-```xml
-renderA: <div id="before" />
-renderB: <div id="after" />
-=> [replaceAttribute id "after"]
-```
-
-Instead of treating style as an opaque string, a key-value object is used instead. This lets us update only the properties that changed.
-
-```xml
-renderA: <div style={{'{{'}}color: 'red'}} />
-renderB: <div style={{'{{'}}fontWeight: 'bold'}} />
-=> [removeStyle color], [addStyle font-weight 'bold']
-```
-
-After the attributes have been updated, we recurse on all the children.
-
-
-### Custom Components
-
-We decided that the two custom components are the same. Since components are stateful, we cannot just use the new component and call it a day. React takes all the attributes from the new component and calls `component[Will/Did]ReceiveProps()` on the previous one.
-
-The previous component is now operational. Its `render()` method is called and the diff algorithm restarts with the new result and the previous result.
-
-
-## List-wise diff
-
-### Problematic Case
-
-In order to do children reconciliation, React adopts a very naive approach. It goes over both lists of children at the same time and generates a mutation whenever there's a difference.
-
-For example if you add an element at the end:
-
-```xml
-renderA: <div><span>first</span></div>
-renderB: <div><span>first</span><span>second</span></div>
-=> [insertNode <span>second</span>]
-```
-
-Inserting an element at the beginning is problematic. React is going to see that both nodes are spans and therefore run into a mutation mode.
-
-```xml
-renderA: <div><span>first</span></div>
-renderB: <div><span>second</span><span>first</span></div>
-=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
-```
-
-There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. [Levenshtein distance](http://en.wikipedia.org/wiki/Levenshtein_distance) can find the minimum using single element insertion, deletion and substitution in O(n<sup>2</sup>). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have much worse complexity.
-
-### Keys
-
-In order to solve this seemingly intractable issue, an optional attribute has been introduced. You can provide for each child a key that is going to be used to do the matching. If you specify a key, React is now able to find insertion, deletion, substitution and moves in O(n) using a hash table.
-
-
-```xml
-renderA: <div><span key="first">first</span></div>
-renderB: <div><span key="second">second</span><span key="first">first</span></div>
-=> [insertNode <span>second</span>]
-```
-
-In practice, finding a key is not really hard. Most of the time, the element you are going to display already have a unique id. When it is not the case, you can hash some parts of the content to generate an id. Remember that the id only has to be unique among its sibling, not globally unique.
-
-
-## Trade-offs
-
-It is important to remember that the reconciliation algorithm is an implementation detail. React could re-render the whole app on every action, the end-result would be the same. We are regularly refining the heuristics in order to make common use cases faster.
-
-In the current implementation, you can express the fact that a sub-tree has been moved between siblings, but you cannot tell that it has moved somewhere else. The algorithm will re-render that full sub-tree.
-
-Because we rely on two heuristics, if the assumptions behind them are not met, performance will suffer.
-
-1. The algorithm will not try to match sub-trees of different components classes. If you see yourself alternating between two components classes with very similar output, you may want to make it the same class. In practice, we haven't found this to be an issue.
-
-2. If you don't provide stable keys (by using Math.random() for example), all the sub-trees are going to be re-rendered every single time. By giving the users the choice to chose the key, they have the ability to shoot themselves in the foot.
-
diff --git a/docs/docs/reference.html b/docs/docs/reference.html
deleted file mode 100644
index 0d21cd16f4e..00000000000
--- a/docs/docs/reference.html
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: redirect
-destination: top-level-api.html
----
diff --git a/docs/docs/thinking-in-react.md b/docs/docs/thinking-in-react.md
deleted file mode 100644
index c8f1ac16568..00000000000
--- a/docs/docs/thinking-in-react.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-id: thinking-in-react
-title: Thinking in React
-layout: docs
-prev: tutorial.html
-next: videos.html
----
-
-This was originally a [blog post](/react/blog/2013/11/05/thinking-in-react.html) from the [official React blog](/react/blog).
-
-React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It's scaled very well for us at Facebook and Instagram.
-
-One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.
-
-## Start with a mock
-
-Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:
-
-![Mockup](/react/img/blog/thinking-in-react-mock.png)
-
-Our JSON API returns some data that looks like this:
-
-```
-[
-  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
-  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
-  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
-  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
-  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
-  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
-];
-```
-
-## Step 1: break the UI into a component hierarchy
-
-The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
-
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
-
-Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
-
-![Component diagram](/react/img/blog/thinking-in-react-components.png)
-
-You'll see here that we have five components in our simple app. I've italicized the data each component represents.
-
-  1. **`FilterableProductTable` (orange):** contains the entirety of the example
-  2. **`SearchBar` (blue):** receives all *user input*
-  3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input*
-  4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category*
-  5. **`ProductRow` (red):** displays a row for each *product*
-
-If you look at `ProductTable` you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own `ProductTableHeader` component.
-
-Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:
-
-  * `FilterableProductTable`
-    * `SearchBar`
-    * `ProductTable`
-      * `ProductCategoryRow`
-      * `ProductRow`
-
-## Step 2: Build a static version in React
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/n25pd/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
-
-To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using *props*. *props* are a way of passing data from parent to child. If you're familiar with the concept of *state*, **don't use state at all** to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.
-
-You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.
-
-At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
-
-Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
-
-### A brief interlude: props vs state
-
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
-
-## Step 3: Identify the minimal (but complete) representation of UI state
-
-To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
-
-To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.
-
-Think of all of the pieces of data in our example application. We have:
-
-  * The original list of products
-  * The search text the user has entered
-  * The value of the checkbox
-  * The filtered list of products
-
-Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:
-
-  1. Is it passed in from a parent via props? If so, it probably isn't state.
-  2. Does it change over time? If not, it probably isn't state.
-  3. Can you compute it based on any other state or props in your component? If so, it's not state.
-
-The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
-
-So finally, our state is:
-
-  * The search text the user has entered
-  * The value of the checkbox
-
-## Step 4: Identify where your state should live
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/t53sx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
-
-Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
-
-For each piece of state in your application:
-
-  * Identify every component that renders something based on that state.
-  * Find a common owner component (a single component above all the components that need the state in the hierarchy).
-  * Either the common owner or another component higher up in the hierarchy should own the state.
-  * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
-
-Let's run through this strategy for our application:
-
-  * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
-  * The common owner component is `FilterableProductTable`.
-  * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
-
-Cool, so we've decided that our state lives in `FilterableProductTable`. First, add a `getInitialState()` method to `FilterableProductTable` that returns `{filterText: '', inStockOnly: false}` to reflect the initial state of your application. Then pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
-
-You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see the data table is updated correctly.
-
-## Step 5: Add inverse data flow
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/F8H7p/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
-
-React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called `ReactLink` to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.
-
-If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
-
-Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass a callback to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. And the callback passed by `FilterableProductTable` will call `setState()` and the app will be updated.
-
-Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.
-
-## And that's it
-
-Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)
diff --git a/docs/docs/tutorial.md b/docs/docs/tutorial.md
deleted file mode 100644
index 9be7e427241..00000000000
--- a/docs/docs/tutorial.md
+++ /dev/null
@@ -1,689 +0,0 @@
----
-id: tutorial
-title: Tutorial
-layout: docs
-prev: getting-started.html
-next: thinking-in-react.html
----
-
-We'll be building a simple, but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.
-
-We'll provide:
-
-* A view of all of the comments
-* A form to submit a comment
-* Hooks for you to provide a custom backend
-
-It'll also have a few neat features:
-
-* **Optimistic commenting:** comments appear in the list before they're saved on the server so it feels fast.
-* **Live updates:** as other users comment we'll pop them into the comment view in real time
-* **Markdown formatting:** users can use Markdown to format their text
-
-### Want to skip all this and just see the source?
-
-[It's all on GitHub.](https://github.com/reactjs/react-tutorial)
-
-### Getting started
-
-For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:
-
-```html
-<!-- template.html -->
-<html>
-  <head>
-    <title>Hello React</title>
-    <script src="http://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
-    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
-  </head>
-  <body>
-    <div id="content"></div>
-    <script type="text/jsx">
-      /** @jsx React.DOM */
-      // The above declaration must remain intact at the top of the script.
-      // Your code here
-    </script>
-  </body>
-</html>
-```
-
-For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag.
-
-### Your first component
-
-React is all about modular, composable components. For our comment box example, we'll have the following component structure:
-
-```
-- CommentBox
-  - CommentList
-    - Comment
-  - CommentForm
-```
-
-Let's build the `CommentBox` component, which is just a simple `<div>`:
-
-```javascript
-// tutorial1.js
-var CommentBox = React.createClass({
-  render: function() {
-    return (
-      <div className="commentBox">
-        Hello, world! I am a CommentBox.
-      </div>
-    );
-  }
-});
-React.renderComponent(
-  <CommentBox />,
-  document.getElementById('content')
-);
-```
-
-#### JSX Syntax
-
-The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:
-
-```javascript
-// tutorial1-raw.js
-var CommentBox = React.createClass({displayName: 'CommentBox',
-  render: function() {
-    return (
-      React.DOM.div({className: "commentBox"},
-        "Hello, world! I am a CommentBox."
-      )
-    );
-  }
-});
-React.renderComponent(
-  CommentBox(null),
-  document.getElementById('content')
-);
-```
-
-Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the [JSX Syntax article](/react/docs/jsx-in-depth.html).
-
-#### What's going on
-
-We pass some methods in a JavaScript object to `React.createClass()` to create a new React component. The most important of these methods is called `render` which returns a tree of React components that will eventually render to HTML.
-
-The `<div>` tags are not actual DOM nodes; they are instantiations of React `div` components. You can think of these as markers or pieces of data that React knows how to handle. React is **safe**. We are not generating HTML strings so XSS protection is the default.
-
-You do not have to return basic HTML. You can return a tree of components that you (or someone else) built. This is what makes React **composable**: a key tenet of maintainable frontends.
-
-`React.renderComponent()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.
-
-## Composing components
-
-Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s:
-
-```javascript
-// tutorial2.js
-var CommentList = React.createClass({
-  render: function() {
-    return (
-      <div className="commentList">
-        Hello, world! I am a CommentList.
-      </div>
-    );
-  }
-});
-
-var CommentForm = React.createClass({
-  render: function() {
-    return (
-      <div className="commentForm">
-        Hello, world! I am a CommentForm.
-      </div>
-    );
-  }
-});
-```
-
-Next, update the `CommentBox` component to use its new friends:
-
-```javascript{6-8}
-// tutorial3.js
-var CommentBox = React.createClass({
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList />
-        <CommentForm />
-      </div>
-    );
-  }
-});
-```
-
-Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
-
-### Component Properties
-
-Let's create our third component, `Comment`. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the `CommentList`:
-
-```javascript{6-7}
-// tutorial4.js
-var CommentList = React.createClass({
-  render: function() {
-    return (
-      <div className="commentList">
-        <Comment author="Pete Hunt">This is one comment</Comment>
-        <Comment author="Jordan Walke">This is *another* comment</Comment>
-      </div>
-    );
-  }
-});
-```
-
-Note that we have passed some data from the parent `CommentList` component to the child `Comment` component as both XML-like children and attributes. Data passed from parent to child is called **props**, short for properties.
-
-### Using props
-
-Let's create the Comment component. It will read the data passed to it from the CommentList and render some markup:
-
-```javascript
-// tutorial5.js
-var Comment = React.createClass({
-  render: function() {
-    return (
-      <div className="comment">
-        <h2 className="commentAuthor">
-          {this.props.author}
-        </h2>
-        {this.props.children}
-      </div>
-    );
-  }
-});
-```
-
-By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on `this.props` and any nested elements as `this.props.children`.
-
-### Adding Markdown
-
-Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.
-
-First, add the third-party **Showdown** library to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):
-
-```html{7}
-<!-- template.html -->
-<head>
-  <title>Hello React</title>
-  <script src="http://fb.me/react-{{site.react_version}}.js"></script>
-  <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
-  <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
-</head>
-```
-
-Next, let's convert the comment text to Markdown and output it:
-
-```javascript{2,10}
-// tutorial6.js
-var converter = new Showdown.converter();
-var Comment = React.createClass({
-  render: function() {
-    return (
-      <div className="comment">
-        <h2 className="commentAuthor">
-          {this.props.author}
-        </h2>
-        {converter.makeHtml(this.props.children.toString())}
-      </div>
-    );
-  }
-});
-```
-
-All we're doing here is calling the Showdown library. We need to convert `this.props.children` from React's wrapped text to a raw string that Showdown will understand so we explicitly call `toString()`.
-
-But there's a problem! Our rendered comments look like this in the browser: "`<p>`This is `<em>`another`</em>` comment`</p>`". We want those tags to actually render as HTML.
-
-That's React protecting you from an XSS attack. There's a way to get around it but the framework warns you not to use it:
-
-```javascript{5,11}
-// tutorial7.js
-var converter = new Showdown.converter();
-var Comment = React.createClass({
-  render: function() {
-    var rawMarkup = converter.makeHtml(this.props.children.toString());
-    return (
-      <div className="comment">
-        <h2 className="commentAuthor">
-          {this.props.author}
-        </h2>
-        <span dangerouslySetInnerHTML={{"{{"}}__html: rawMarkup}} />
-      </div>
-    );
-  }
-});
-```
-
-This is a special API that intentionally makes it difficult to insert raw HTML, but for Showdown we'll take advantage of this backdoor.
-
-**Remember:** by using this feature you're relying on Showdown to be secure.
-
-### Hook up the data model
-
-So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:
-
-```javascript
-// tutorial8.js
-var data = [
-  {author: "Pete Hunt", text: "This is one comment"},
-  {author: "Jordan Walke", text: "This is *another* comment"}
-];
-```
-
-We need to get this data into `CommentList` in a modular way. Modify `CommentBox` and the `renderComponent()` call to pass this data into the `CommentList` via props:
-
-```javascript{7,15}
-// tutorial9.js
-var CommentBox = React.createClass({
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.props.data} />
-        <CommentForm />
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <CommentBox data={data} />,
-  document.getElementById('content')
-);
-```
-
-Now that the data is available in the `CommentList`, let's render the comments dynamically:
-
-```javascript{4-10,13}
-// tutorial10.js
-var CommentList = React.createClass({
-  render: function() {
-    var commentNodes = this.props.data.map(function (comment) {
-      return (
-        <Comment author={comment.author}>
-          {comment.text}
-        </Comment>
-      );
-    });
-    return (
-      <div className="commentList">
-        {commentNodes}
-      </div>
-    );
-  }
-});
-```
-
-That's it!
-
-### Fetching from the server
-
-Let's replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:
-
-```javascript{3}
-// tutorial11.js
-React.renderComponent(
-  <CommentBox url="comments.json" />,
-  document.getElementById('content')
-);
-```
-
-This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.
-
-### Reactive state
-
-So far, each component has rendered itself once based on its props. `props` are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mutable **state** to the component. `this.state` is private to the component and can be changed by calling `this.setState()`. When the state is updated, the component re-renders itself.
-
-`render()` methods are written declaratively as functions of `this.props` and `this.state`. The framework guarantees the UI is always consistent with the inputs.
-
-When the server fetches data, we will be changing the comment data we have. Let's add an array of comment data to the `CommentBox` component as its state:
-
-```javascript{3-5,10}
-// tutorial12.js
-var CommentBox = React.createClass({
-  getInitialState: function() {
-    return {data: []};
-  },
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data} />
-        <CommentForm />
-      </div>
-    );
-  }
-});
-```
-
-`getInitialState()` executes exactly once during the lifecycle of the component and sets up the initial state of the component.
-
-#### Updating state
-When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:
-
-```javascript
-// tutorial13.json
-[
-  {"author": "Pete Hunt", "text": "This is one comment"},
-  {"author": "Jordan Walke", "text": "This is *another* comment"}
-]
-```
-
-We'll use jQuery to help make an asynchronous request to the server.
-
-Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. The easiest way to do this is to run `python -m SimpleHTTPServer` in your application's directory.
-
-```javascript{6-17}
-// tutorial13.js
-var CommentBox = React.createClass({
-  getInitialState: function() {
-    return {data: []};
-  },
-  componentDidMount: function() {
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data} />
-        <CommentForm />
-      </div>
-    );
-  }
-});
-```
-
-Here, `componentDidMount` is a method called automatically by React when a component is rendered. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.
-
-```javascript{3,19-20,34}
-// tutorial14.js
-var CommentBox = React.createClass({
-  loadCommentsFromServer: function() {
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  getInitialState: function() {
-    return {data: []};
-  },
-  componentDidMount: function() {
-    this.loadCommentsFromServer();
-    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
-  },
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data} />
-        <CommentForm />
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <CommentBox url="comments.json" pollInterval={2000} />,
-  document.getElementById('content')
-);
-
-```
-
-All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 2 seconds after that. Try running this in your browser and changing the `comments.json` file; within 2 seconds, the changes will show!
-
-### Adding new comments
-
-Now it's time to build the form. Our `CommentForm` component should ask the user for their name and comment text and send a request to the server to save the comment.
-
-```javascript{5-9}
-// tutorial15.js
-var CommentForm = React.createClass({
-  render: function() {
-    return (
-      <form className="commentForm">
-        <input type="text" placeholder="Your name" />
-        <input type="text" placeholder="Say something..." />
-        <input type="submit" value="Post" />
-      </form>
-    );
-  }
-});
-```
-
-Let's make the form interactive. When the user submits the form, we should clear it, submit a request to the server, and refresh the list of comments. To start, let's listen for the form's submit event and clear it.
-
-```javascript{3-13,16-18}
-// tutorial16.js
-var CommentForm = React.createClass({
-  handleSubmit: function() {
-    var author = this.refs.author.getDOMNode().value.trim();
-    var text = this.refs.text.getDOMNode().value.trim();
-    if (!text || !author) {
-      return false;
-    }
-    // TODO: send request to the server
-    this.refs.author.getDOMNode().value = '';
-    this.refs.text.getDOMNode().value = '';
-    return false;
-  },
-  render: function() {
-    return (
-      <form className="commentForm" onSubmit={this.handleSubmit}>
-        <input type="text" placeholder="Your name" ref="author" />
-        <input type="text" placeholder="Say something..." ref="text" />
-        <input type="submit" value="Post" />
-      </form>
-    );
-  }
-});
-```
-
-##### Events
-
-React attaches event handlers to components using a camelCase naming convention. We attach an `onSubmit` handler to the form that clears the form fields when the form is submitted with valid input.
-
-We always return `false` from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call `preventDefault()` on it.)
-
-##### Refs
-
-We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the component. We can call `getDOMNode()` on a component to get the native browser DOM element.
-
-##### Callbacks as props
-
-When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in `CommentBox` since `CommentBox` owns the state that represents the list of comments.
-
-We need to pass data from the child component to its parent. We do this by passing a `callback` in props from parent to child:
-
-```javascript{15-17,30}
-// tutorial17.js
-var CommentBox = React.createClass({
-  loadCommentsFromServer: function() {
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  handleCommentSubmit: function(comment) {
-    // TODO: submit to the server and refresh the list
-  },
-  getInitialState: function() {
-    return {data: []};
-  },
-  componentDidMount: function() {
-    this.loadCommentsFromServer();
-    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
-  },
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data} />
-        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
-      </div>
-    );
-  }
-});
-```
-
-Let's call the callback from the `CommentForm` when the user submits the form:
-
-```javascript{6}
-// tutorial18.js
-var CommentForm = React.createClass({
-  handleSubmit: function() {
-    var author = this.refs.author.getDOMNode().value.trim();
-    var text = this.refs.text.getDOMNode().value.trim();
-    this.props.onCommentSubmit({author: author, text: text});
-    this.refs.author.getDOMNode().value = '';
-    this.refs.text.getDOMNode().value = '';
-    return false;
-  },
-  render: function() {
-    return (
-      <form className="commentForm" onSubmit={this.handleSubmit}>
-        <input type="text" placeholder="Your name" ref="author" />
-        <input type="text" placeholder="Say something..." ref="text" />
-        <input type="submit" value="Post" />
-      </form>
-    );
-  }
-});
-```
-
-Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:
-
-```javascript{16-27}
-// tutorial19.js
-var CommentBox = React.createClass({
-  loadCommentsFromServer: function() {
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  handleCommentSubmit: function(comment) {
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      type: 'POST',
-      data: comment,
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  getInitialState: function() {
-    return {data: []};
-  },
-  componentDidMount: function() {
-    this.loadCommentsFromServer();
-    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
-  },
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data} />
-        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
-      </div>
-    );
-  }
-});
-```
-
-### Optimization: optimistic updates
-
-Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.
-
-```javascript{16-18}
-// tutorial20.js
-var CommentBox = React.createClass({
-  loadCommentsFromServer: function() {
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  handleCommentSubmit: function(comment) {
-    var comments = this.state.data;
-    var newComments = comments.concat([comment]);
-    this.setState({data: newComments});
-    $.ajax({
-      url: this.props.url,
-      dataType: 'json',
-      type: 'POST',
-      data: comment,
-      success: function(data) {
-        this.setState({data: data});
-      }.bind(this),
-      error: function(xhr, status, err) {
-        console.error(this.props.url, status, err.toString());
-      }.bind(this)
-    });
-  },
-  getInitialState: function() {
-    return {data: []};
-  },
-  componentDidMount: function() {
-    this.loadCommentsFromServer();
-    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
-  },
-  render: function() {
-    return (
-      <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data} />
-        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
-      </div>
-    );
-  }
-});
-```
-
-### Congrats!
-
-You have just built a comment box in a few simple steps. Learn more about [why to use React](/react/docs/why-react.html), or dive into the [API reference](/react/docs/top-level-api.html) and start hacking! Good luck!
diff --git a/docs/docs/videos.md b/docs/docs/videos.md
deleted file mode 100644
index d9b8a3abf43..00000000000
--- a/docs/docs/videos.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-id: videos
-title: Videos
-layout: docs
-permalink: videos.html
-prev: thinking-in-react.html
-next: complementary-tools.html
----
-
-### Rethinking best practices - JSConf.eu
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
-
-"At Facebook and Instagram, we’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events." -- [Pete Hunt](http://www.petehunt.net/)
-
-
-### Thinking in react - tagtree.tv
-
-A [tagtree.tv](http://tagtree.tv/) video conveying the principles of [Thinking in React](/react/docs/thinking-in-react.html) while building a simple app
-<figure>[![](/react/img/docs/thinking-in-react-tagtree.png)](http://tagtree.tv/thinking-in-react)</figure>
-
-
-### Secrets of the Virtual DOM - MtnWest JS
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
-
-"In this talk I’ll be discussing why we built a virtual DOM, how it compares to other systems, and its relevance to the future of browser technologies." -- [Pete Hunt](http://www.petehunt.net/)
-
-
-### Going big with React ###
-
-"On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale."
-<figure>[![](https://i.vimeocdn.com/video/481670116_650.jpg)](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)</figure>
-
-
-### CodeWinds
-
-[Pete Hunt](http://www.petehunt.net/) talked with [Jeff Barczewski](http://jeff.barczewski.com/) about React in CodeWinds Episode 4.
-<figure>[![](/react/img/docs/codewinds-004.png)](http://codewinds.com/4)</figure>
-
-<table width="100%"><tr><td>
-02:08 - What is React and why use it?<br />
-03:08 - The symbiotic relationship of ClojureScript and React<br />
-04:54 - The history of React and why it was created<br />
-09:43 - Updating web page with React without using data binding<br />
-13:11 - Using the virtual DOM to change the browser DOM<br />
-13:57 - Programming with React, render targets HTML, canvas, other<br />
-16:45 - Working with designers. Contrasted with Ember and AngularJS<br />
-21:45 - JSX Compiler bridging HTML and React javascript<br />
-23:50 - Autobuilding JSX and in browser tools for React<br />
-24:50 - Tips and tricks to working with React, getting started<br />
-</td><td>
-27:17 - Rendering HTML on the server with Node.js. Rendering backends<br />
-29:20 - React evolved through survival of the fittest at Facebook<br />
-30:15 - Ideas for having state on server and client, using web sockets.<br />
-32:05 - React-multiuser - distributed shared mutable state using Firebase<br />
-33:03 - Better debugging with React using the state transitions, replaying events<br />
-34:08 - Differences from Web Components<br />
-34:25 - Notable companies using React<br />
-35:16 - Could a React backend plugin be created to target PDF?<br />
-36:30 - Future of React, what's next?<br />
-39:38 - Contributing and getting help<br />
-</td></tr></table>
-
-[Read the episode notes](http://codewinds.com/4)
-
-
-### JavaScript Jabber
-
-[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) talked about React in JavaScript Jabber 73.
-<figure>[![](/react/img/docs/javascript-jabber.png)](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content)</figure>
-
-<table width="100%"><tr><td>
-01:34 – Pete Hunt Introduction<br />
-02:45 – Jordan Walke Introduction<br />
-04:15 – React<br />
-06:38 – 60 Frames Per Second<br />
-09:34 – Data Binding<br />
-12:31 – Performance<br />
-17:39 – Diffing Algorithm<br />
-19:36 – DOM Manipulation
-</td><td>
-23:06 – Supporting node.js<br />
-24:03 – rendr<br />
-26:02 – JSX<br />
-30:31 – requestAnimationFrame<br />
-34:15 – React and Applications<br />
-38:12 – React Users Khan Academy<br />
-39:53 – Making it work
-</td></tr></table>
-
-[Read the full transcript](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
-
-### Introduction to React.js - Facebook Seattle
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
-
-By [Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke)
-
-### Developing User Interfaces With React - Super VanJS
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
-
-By [Steven Luscher](https://github.com/steveluscher)
-
-### Introduction to React - LAWebSpeed meetup
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
-
-by [Stoyan Stefanov](http://www.phpied.com/)
-
-### React, or how to make life simpler - FrontEnd Dev Conf '14
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
-
-**In Russian** by [Alexander Solovyov](http://solovyov.net/)
-
-### "Functional DOM programming" - Meteor DevShop 11
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
-
-### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
-
-<iframe width="650" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
diff --git a/docs/downloads.md b/docs/downloads.md
deleted file mode 100644
index accfa3cc36b..00000000000
--- a/docs/downloads.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-id: downloads
-title: Downloads
-layout: single
----
-Download the starter kit to get everything you need to
-[get started with React](/react/docs/getting-started.html). The starter kit includes React, the in-browser JSX transformer, and some simple example apps.
-
-<div class="buttons-unit downloads">
-  <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
-    Download Starter Kit {{site.react_version}}
-  </a>
-</div>
-
-## Development vs. Production Builds
-
-We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.
-
-If you're just starting out, make sure to use the development version.
-
-## Individual Downloads
-
-#### <a href="http://fb.me/react-{{site.react_version}}.js">React {{site.react_version}} (development)</a>
-The uncompressed, development version of React core with inline documentation.
-
-```html
-<script src="http://fb.me/react-{{site.react_version}}.js"></script>
-```
-
-#### <a href="http://fb.me/react-{{site.react_version}}.min.js">React {{site.react_version}} (production)</a>
-The compressed, production version of React core.
-
-```html
-<script src="http://fb.me/react-{{site.react_version}}.min.js"></script>
-```
-
-#### <a href="http://fb.me/react-with-addons-{{site.react_version}}.js">React with Add-Ons {{site.react_version}} (development)</a>
-The uncompressed, development version of React with [add-ons](/react/docs/addons.html).
-
-```html
-<script src="http://fb.me/react-with-addons-{{site.react_version}}.js"></script>
-```
-
-#### <a href="http://fb.me/react-with-addons-{{site.react_version}}.min.js">React with Add-Ons {{site.react_version}} (production)</a>
-The compressed, production version of React with [add-ons](/react/docs/addons.html).
-
-```html
-<script src="http://fb.me/react-with-addons-{{site.react_version}}.min.js"></script>
-```
-
-#### <a href="http://fb.me/JSXTransformer-{{site.react_version}}.js">JSX Transformer</a>
-The JSX transformer used to support [XML syntax](/react/docs/jsx-in-depth.html) in JavaScript.
-
-```html
-<script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
-```
-
-All scripts are also available via [CDNJS](http://cdnjs.com/libraries/react/).
-
-## npm
-
-To install the JSX transformer on your computer, run:
-
-```sh
-$ npm install -g react-tools
-```
-
-For more info about the `jsx` binary, see the [Getting Started](/react/docs/getting-started.html#offline-transform) guide.
-
-If you're using an npm-compatible packaging system like browserify or webpack, you can use the `react` package. After installing it using `npm install react` or adding `react` to `package.json`, you can use React:
-
-```js
-var React = require('react');
-React.renderComponent(...);
-```
-
-If you'd like to use any [add-ons](/react/docs/addons.html), use `var React = require('react/addons');` instead.
-
-**Note:** by default, React will be in development mode. To use React in production mode, set the environment variable `NODE_ENV` to `production`. A minifier that performs dead-code elimination such as [UglifyJS](https://github.com/mishoo/UglifyJS2) is recommended to completely remove the extra code present in development mode.
-
-## Bower
-
-```sh
-$ bower install --save react
-```
diff --git a/docs/downloads/react-0.10.0-rc1.zip b/docs/downloads/react-0.10.0-rc1.zip
deleted file mode 100644
index 2a0821d6907..00000000000
Binary files a/docs/downloads/react-0.10.0-rc1.zip and /dev/null differ
diff --git a/docs/downloads/react-0.10.0.zip b/docs/downloads/react-0.10.0.zip
deleted file mode 100644
index 8ceed03beb3..00000000000
Binary files a/docs/downloads/react-0.10.0.zip and /dev/null differ
diff --git a/docs/downloads/react-0.11.0-rc1.zip b/docs/downloads/react-0.11.0-rc1.zip
deleted file mode 100644
index e5bf3e08332..00000000000
Binary files a/docs/downloads/react-0.11.0-rc1.zip and /dev/null differ
diff --git a/docs/downloads/react-0.11.0.zip b/docs/downloads/react-0.11.0.zip
deleted file mode 100644
index 5952325adcb..00000000000
Binary files a/docs/downloads/react-0.11.0.zip and /dev/null differ
diff --git a/docs/downloads/react-0.11.1.zip b/docs/downloads/react-0.11.1.zip
deleted file mode 100644
index cb0529d4a6e..00000000000
Binary files a/docs/downloads/react-0.11.1.zip and /dev/null differ
diff --git a/docs/downloads/react-0.3.0.zip b/docs/downloads/react-0.3.0.zip
deleted file mode 100644
index aa771282892..00000000000
Binary files a/docs/downloads/react-0.3.0.zip and /dev/null differ
diff --git a/docs/downloads/react-0.3.1.zip b/docs/downloads/react-0.3.1.zip
deleted file mode 100644
index 3c1d4795c89..00000000000
Binary files a/docs/downloads/react-0.3.1.zip and /dev/null differ
diff --git a/docs/downloads/react-0.3.2.zip b/docs/downloads/react-0.3.2.zip
deleted file mode 100644
index bfba278c792..00000000000
Binary files a/docs/downloads/react-0.3.2.zip and /dev/null differ
diff --git a/docs/downloads/react-0.3.3.zip b/docs/downloads/react-0.3.3.zip
deleted file mode 100644
index cc5113b927f..00000000000
Binary files a/docs/downloads/react-0.3.3.zip and /dev/null differ
diff --git a/docs/downloads/react-0.4.0.zip b/docs/downloads/react-0.4.0.zip
deleted file mode 100644
index ebbcf6dfb7c..00000000000
Binary files a/docs/downloads/react-0.4.0.zip and /dev/null differ
diff --git a/docs/downloads/react-0.4.1.zip b/docs/downloads/react-0.4.1.zip
deleted file mode 100644
index a338e4a28df..00000000000
Binary files a/docs/downloads/react-0.4.1.zip and /dev/null differ
diff --git a/docs/downloads/react-0.4.2.zip b/docs/downloads/react-0.4.2.zip
deleted file mode 100644
index eb96fd76b3e..00000000000
Binary files a/docs/downloads/react-0.4.2.zip and /dev/null differ
diff --git a/docs/downloads/react-0.5.0.zip b/docs/downloads/react-0.5.0.zip
deleted file mode 100644
index 09859382f25..00000000000
Binary files a/docs/downloads/react-0.5.0.zip and /dev/null differ
diff --git a/docs/downloads/react-0.5.1.zip b/docs/downloads/react-0.5.1.zip
deleted file mode 100644
index 3ba306e58a3..00000000000
Binary files a/docs/downloads/react-0.5.1.zip and /dev/null differ
diff --git a/docs/downloads/react-0.5.2.zip b/docs/downloads/react-0.5.2.zip
deleted file mode 100644
index 1c633e97ace..00000000000
Binary files a/docs/downloads/react-0.5.2.zip and /dev/null differ
diff --git a/docs/downloads/react-0.8.0.zip b/docs/downloads/react-0.8.0.zip
deleted file mode 100644
index 12aac229d2a..00000000000
Binary files a/docs/downloads/react-0.8.0.zip and /dev/null differ
diff --git a/docs/downloads/react-0.9.0-rc1.zip b/docs/downloads/react-0.9.0-rc1.zip
deleted file mode 100644
index 6f67be6f471..00000000000
Binary files a/docs/downloads/react-0.9.0-rc1.zip and /dev/null differ
diff --git a/docs/extractCode.js b/docs/extractCode.js
deleted file mode 100644
index b5714e3cb0f..00000000000
--- a/docs/extractCode.js
+++ /dev/null
@@ -1,37 +0,0 @@
-var argv = require('optimist').argv;
-var fs = require('fs');
-
-var CODE_SAMPLE = /```[\S]+\s*[\s\S]*?```/g;
-var PARTS = /```[\S]+\s*\/\/\s+(.+?)\n([\s\S]*?)```/;
-
-function truncate(s, n) {
-    n = n || 256
-    if (s.length < n) {
-	return s;
-    }
-    return s.substring(0, n) + '...';
-}
-
-function main(dest, filenames) {
-    if (!dest) {
-	throw new Error('no dest provided');
-    }
-    filenames.map(function (filename) {
-	var content = fs.readFileSync(filename).toString('utf8');
-	var codeSamples = content.match(CODE_SAMPLE);
-
-	codeSamples.map(function (codeSample) {
-	    // Do a little jank preprocessing
-	    codeSample = codeSample.replace('<!--', '//').replace(' -->', '');
-	    var extracted = codeSample.match(PARTS);
-	    if (!extracted) {
-		throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample));
-	    }
-	    var filename = extracted[1];
-	    var content = extracted[2].replace(/\*\*/g, '');
-	    fs.writeFileSync(argv.dest + '/' + filename, content);
-	});
-    });
-}
-
-main(argv.dest, argv._);
\ No newline at end of file
diff --git a/docs/feed.xml b/docs/feed.xml
deleted file mode 100644
index ddd764e32a2..00000000000
--- a/docs/feed.xml
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: none
----
-<?xml version="1.0" encoding="UTF-8"?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-	<channel>
-		<title>{{ site.name }}</title>
-		<description>{{ site.description }}</description>
-		<link>{{ site.url }}{{ site.baseurl }}</link>
-		<atom:link href="{{ site.url }}{{ site.baseurl }}/feed.xml" rel="self" type="application/rss+xml" />
-		{% for post in site.posts limit:10 %}
-			<item>
-				<title>{{ post.title | xml_escape }}</title>
-				<description>{{ post.content | xml_escape }}</description>
-				<pubDate>{{ post.date | date_to_xmlschema }}</pubDate>
-				<link>{{ site.url }}{{ site.baseurl }}{{ post.url }}</link>
-				<guid isPermaLink="true">{{ site.url }}{{ site.baseurl }}{{ post.url }}</guid>
-			</item>
-		{% endfor %}
-	</channel>
-</rss>
diff --git a/docs/html-jsx.md b/docs/html-jsx.md
deleted file mode 100644
index b013b545984..00000000000
--- a/docs/html-jsx.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: default
-title: HTML to JSX
-id: html-jsx
----
-<div class="jsxCompiler">
-  <h1>HTML to JSX Compiler</h1>
-  <div id="jsxCompiler"></div>
-  <script src="js/html-jsx-lib.js"></script>
-  <script src="js/html-jsx.js"></script>
-</div>
diff --git a/docs/img/blog/animal-sounds.jpg b/docs/img/blog/animal-sounds.jpg
deleted file mode 100644
index b3d3780e1d3..00000000000
Binary files a/docs/img/blog/animal-sounds.jpg and /dev/null differ
diff --git a/docs/img/blog/chatapp.png b/docs/img/blog/chatapp.png
deleted file mode 100644
index 55edf29dd06..00000000000
Binary files a/docs/img/blog/chatapp.png and /dev/null differ
diff --git a/docs/img/blog/dog-tutorial.png b/docs/img/blog/dog-tutorial.png
deleted file mode 100644
index c949cedc7e3..00000000000
Binary files a/docs/img/blog/dog-tutorial.png and /dev/null differ
diff --git a/docs/img/blog/flux-diagram.png b/docs/img/blog/flux-diagram.png
deleted file mode 100644
index a15361493e6..00000000000
Binary files a/docs/img/blog/flux-diagram.png and /dev/null differ
diff --git a/docs/img/blog/genesis_skeleton.png b/docs/img/blog/genesis_skeleton.png
deleted file mode 100644
index 97f3447857d..00000000000
Binary files a/docs/img/blog/genesis_skeleton.png and /dev/null differ
diff --git a/docs/img/blog/guess_filter.jpg b/docs/img/blog/guess_filter.jpg
deleted file mode 100644
index cf295d0b274..00000000000
Binary files a/docs/img/blog/guess_filter.jpg and /dev/null differ
diff --git a/docs/img/blog/jsx-compiler.png b/docs/img/blog/jsx-compiler.png
deleted file mode 100644
index ec6248c1a47..00000000000
Binary files a/docs/img/blog/jsx-compiler.png and /dev/null differ
diff --git a/docs/img/blog/kendoui.png b/docs/img/blog/kendoui.png
deleted file mode 100644
index 2928dafb635..00000000000
Binary files a/docs/img/blog/kendoui.png and /dev/null differ
diff --git a/docs/img/blog/khan-academy-editor.png b/docs/img/blog/khan-academy-editor.png
deleted file mode 100644
index f0413939d79..00000000000
Binary files a/docs/img/blog/khan-academy-editor.png and /dev/null differ
diff --git a/docs/img/blog/landoflisp.png b/docs/img/blog/landoflisp.png
deleted file mode 100644
index 3b4c99fae49..00000000000
Binary files a/docs/img/blog/landoflisp.png and /dev/null differ
diff --git a/docs/img/blog/lights-out.png b/docs/img/blog/lights-out.png
deleted file mode 100644
index 702c80a3fbf..00000000000
Binary files a/docs/img/blog/lights-out.png and /dev/null differ
diff --git a/docs/img/blog/makona-editor.png b/docs/img/blog/makona-editor.png
deleted file mode 100644
index d537a293095..00000000000
Binary files a/docs/img/blog/makona-editor.png and /dev/null differ
diff --git a/docs/img/blog/markdown_refactor.png b/docs/img/blog/markdown_refactor.png
deleted file mode 100644
index 8d56be161b2..00000000000
Binary files a/docs/img/blog/markdown_refactor.png and /dev/null differ
diff --git a/docs/img/blog/monkeys.gif b/docs/img/blog/monkeys.gif
deleted file mode 100644
index 3da6185ce68..00000000000
Binary files a/docs/img/blog/monkeys.gif and /dev/null differ
diff --git a/docs/img/blog/ngreact.png b/docs/img/blog/ngreact.png
deleted file mode 100644
index 7dcd9a297b8..00000000000
Binary files a/docs/img/blog/ngreact.png and /dev/null differ
diff --git a/docs/img/blog/om-backbone.png b/docs/img/blog/om-backbone.png
deleted file mode 100644
index 9a910486db1..00000000000
Binary files a/docs/img/blog/om-backbone.png and /dev/null differ
diff --git a/docs/img/blog/propeller-logo.png b/docs/img/blog/propeller-logo.png
deleted file mode 100644
index 1573d715b29..00000000000
Binary files a/docs/img/blog/propeller-logo.png and /dev/null differ
diff --git a/docs/img/blog/quiztime.png b/docs/img/blog/quiztime.png
deleted file mode 100644
index fcb7d576f2b..00000000000
Binary files a/docs/img/blog/quiztime.png and /dev/null differ
diff --git a/docs/img/blog/react-dev-tools.jpg b/docs/img/blog/react-dev-tools.jpg
deleted file mode 100644
index 95d4baddbbe..00000000000
Binary files a/docs/img/blog/react-dev-tools.jpg and /dev/null differ
diff --git a/docs/img/blog/react-diff-tree.png b/docs/img/blog/react-diff-tree.png
deleted file mode 100644
index 6f3474a0206..00000000000
Binary files a/docs/img/blog/react-diff-tree.png and /dev/null differ
diff --git a/docs/img/blog/react-hackathon.jpg b/docs/img/blog/react-hackathon.jpg
deleted file mode 100644
index 3c3326611f4..00000000000
Binary files a/docs/img/blog/react-hackathon.jpg and /dev/null differ
diff --git a/docs/img/blog/react-page.png b/docs/img/blog/react-page.png
deleted file mode 100644
index e86aa01a958..00000000000
Binary files a/docs/img/blog/react-page.png and /dev/null differ
diff --git a/docs/img/blog/react-php.png b/docs/img/blog/react-php.png
deleted file mode 100644
index d341392e9d3..00000000000
Binary files a/docs/img/blog/react-php.png and /dev/null differ
diff --git a/docs/img/blog/react-svg-fbp.png b/docs/img/blog/react-svg-fbp.png
deleted file mode 100644
index 10095ae3d9f..00000000000
Binary files a/docs/img/blog/react-svg-fbp.png and /dev/null differ
diff --git a/docs/img/blog/reactive-bookmarklet.png b/docs/img/blog/reactive-bookmarklet.png
deleted file mode 100644
index abe0dcabb35..00000000000
Binary files a/docs/img/blog/reactive-bookmarklet.png and /dev/null differ
diff --git a/docs/img/blog/resistance-calculator.png b/docs/img/blog/resistance-calculator.png
deleted file mode 100644
index 8e04c5959e4..00000000000
Binary files a/docs/img/blog/resistance-calculator.png and /dev/null differ
diff --git a/docs/img/blog/snake.png b/docs/img/blog/snake.png
deleted file mode 100644
index 96d72b38aa9..00000000000
Binary files a/docs/img/blog/snake.png and /dev/null differ
diff --git a/docs/img/blog/steve_reverse.gif b/docs/img/blog/steve_reverse.gif
deleted file mode 100644
index a442fbbd9a6..00000000000
Binary files a/docs/img/blog/steve_reverse.gif and /dev/null differ
diff --git a/docs/img/blog/thinking-in-react-components.png b/docs/img/blog/thinking-in-react-components.png
deleted file mode 100644
index 4222a5071a5..00000000000
Binary files a/docs/img/blog/thinking-in-react-components.png and /dev/null differ
diff --git a/docs/img/blog/thinking-in-react-mock.png b/docs/img/blog/thinking-in-react-mock.png
deleted file mode 100644
index 9fae8d2dcae..00000000000
Binary files a/docs/img/blog/thinking-in-react-mock.png and /dev/null differ
diff --git a/docs/img/blog/todomvc.png b/docs/img/blog/todomvc.png
deleted file mode 100644
index 9c03bc0f622..00000000000
Binary files a/docs/img/blog/todomvc.png and /dev/null differ
diff --git a/docs/img/blog/turboreact.png b/docs/img/blog/turboreact.png
deleted file mode 100644
index 56cc61fde6a..00000000000
Binary files a/docs/img/blog/turboreact.png and /dev/null differ
diff --git a/docs/img/blog/tutsplus.png b/docs/img/blog/tutsplus.png
deleted file mode 100644
index a2c4600b75f..00000000000
Binary files a/docs/img/blog/tutsplus.png and /dev/null differ
diff --git a/docs/img/blog/unite.png b/docs/img/blog/unite.png
deleted file mode 100644
index faca5582dfd..00000000000
Binary files a/docs/img/blog/unite.png and /dev/null differ
diff --git a/docs/img/blog/wolfenstein_react.png b/docs/img/blog/wolfenstein_react.png
deleted file mode 100644
index dea32479425..00000000000
Binary files a/docs/img/blog/wolfenstein_react.png and /dev/null differ
diff --git a/docs/img/blog/xoxo2013.png b/docs/img/blog/xoxo2013.png
deleted file mode 100644
index 18c5350b31f..00000000000
Binary files a/docs/img/blog/xoxo2013.png and /dev/null differ
diff --git a/docs/img/blog/xreact.png b/docs/img/blog/xreact.png
deleted file mode 100644
index 59fbb6f22ae..00000000000
Binary files a/docs/img/blog/xreact.png and /dev/null differ
diff --git a/docs/img/docs/codewinds-004.png b/docs/img/docs/codewinds-004.png
deleted file mode 100644
index 192841b709b..00000000000
Binary files a/docs/img/docs/codewinds-004.png and /dev/null differ
diff --git a/docs/img/docs/javascript-jabber.png b/docs/img/docs/javascript-jabber.png
deleted file mode 100644
index 8765e9388e5..00000000000
Binary files a/docs/img/docs/javascript-jabber.png and /dev/null differ
diff --git a/docs/img/docs/perf-dom.png b/docs/img/docs/perf-dom.png
deleted file mode 100644
index 11c6f1070ea..00000000000
Binary files a/docs/img/docs/perf-dom.png and /dev/null differ
diff --git a/docs/img/docs/perf-exclusive.png b/docs/img/docs/perf-exclusive.png
deleted file mode 100644
index 7e2c0efd1af..00000000000
Binary files a/docs/img/docs/perf-exclusive.png and /dev/null differ
diff --git a/docs/img/docs/perf-inclusive.png b/docs/img/docs/perf-inclusive.png
deleted file mode 100644
index 2ca30a88340..00000000000
Binary files a/docs/img/docs/perf-inclusive.png and /dev/null differ
diff --git a/docs/img/docs/perf-wasted.png b/docs/img/docs/perf-wasted.png
deleted file mode 100644
index 2246dac5acd..00000000000
Binary files a/docs/img/docs/perf-wasted.png and /dev/null differ
diff --git a/docs/img/docs/thinking-in-react-tagtree.png b/docs/img/docs/thinking-in-react-tagtree.png
deleted file mode 100644
index 3d4db2d233b..00000000000
Binary files a/docs/img/docs/thinking-in-react-tagtree.png and /dev/null differ
diff --git a/docs/img/logo_og.png b/docs/img/logo_og.png
deleted file mode 100644
index b7b6e151bac..00000000000
Binary files a/docs/img/logo_og.png and /dev/null differ
diff --git a/docs/img/logo_small.png b/docs/img/logo_small.png
deleted file mode 100644
index eea1f6744ae..00000000000
Binary files a/docs/img/logo_small.png and /dev/null differ
diff --git a/docs/img/logo_small@2x.png b/docs/img/logo_small@2x.png
deleted file mode 100644
index 398e5df3f88..00000000000
Binary files a/docs/img/logo_small@2x.png and /dev/null differ
diff --git a/docs/img/noise.png b/docs/img/noise.png
deleted file mode 100644
index 372d1d9a120..00000000000
Binary files a/docs/img/noise.png and /dev/null differ
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 8f054324b8d..00000000000
--- a/docs/index.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-layout: page
-title: A JavaScript library for building user interfaces
-id: home
----
-
-<section class="light home-section">
-  <div class="marketing-row">
-    <div class="marketing-col">
-      <h3>Just the UI</h3>
-      <p>
-        Lots of people use React as the V in MVC.
-        Since React makes no assumptions about the rest of your technology stack,
-        it&apos;s easy to try it out on a small feature in an existing project.
-      </p>
-    </div>
-    <div class="marketing-col">
-      <h3>Virtual DOM</h3>
-      <p>
-        React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also
-        render on the server using Node.js &mdash; no heavy browser DOM required.
-      </p>
-    </div>
-    <div class="marketing-col">
-      <h3>Data flow</h3>
-      <p>
-        React implements one-way reactive data flow which reduces boilerplate and is
-        easier to reason about than traditional data binding.
-      </p>
-    </div>
-  </div>
-</section>
-<hr class="home-divider" />
-<section class="home-section">
-  <div id="examples">
-    <div class="example">
-      <h3>A Simple Component</h3>
-      <p>
-        React components implement a `render()` method that takes input data and
-        returns what to display. This example uses an XML-like syntax called
-        JSX. Input data that is passed into the component can be accessed by
-        `render()` via `this.props`.
-      </p>
-      <p>
-        <strong>JSX is optional and not required to use React.</strong> Try
-        clicking on "Compiled JS" to see the raw JavaScript code produced by
-        the JSX compiler.
-      </p>
-      <div id="helloExample"></div>
-    </div>
-    <div class="example">
-      <h3>A Stateful Component</h3>
-      <p>
-        In addition to taking input data (accessed via `this.props`), a
-        component can maintain internal state data (accessed via `this.state`).
-        When a component's state data changes, the rendered markup will be
-        updated by re-invoking `render()`.
-      </p>
-      <div id="timerExample"></div>
-    </div>
-    <div class="example">
-      <h3>An Application</h3>
-      <p>
-        Using `props` and `state`, we can put together a small Todo application.
-        This example uses `state` to track the current list of items as well as
-        the text that the user has entered. Although event handlers appear to be
-        rendered inline, they will be collected and implemented using event
-        delegation.
-      </p>
-      <div id="todoExample"></div>
-    </div>
-    <div class="example">
-      <h3>A Component Using External Plugins</h3>
-      <p>
-        React is flexible and provides hooks that allow you to interface with
-        other libraries and frameworks. This example uses Showdown, an external
-        Markdown library, to convert the textarea's value in real-time.
-      </p>
-      <div id="markdownExample"></div>
-    </div>
-  </div>
-  <script type="text/javascript" src="js/examples/hello.js"></script>
-  <script type="text/javascript" src="js/examples/timer.js"></script>
-  <script type="text/javascript" src="js/examples/todo.js"></script>
-  <script type="text/javascript" src="js/examples/markdown.js"></script>
-</section>
-<hr class="home-divider" />
-<section class="home-bottom-section">
-  <div class="buttons-unit">
-    <a href="docs/getting-started.html" class="button">Get Started</a>
-    <a href="downloads.html" class="button">Download React v{{site.react_version}}</a>
-  </div>
-</section>
diff --git a/docs/js/codemirror.js b/docs/js/codemirror.js
deleted file mode 100644
index 086f84151ee..00000000000
--- a/docs/js/codemirror.js
+++ /dev/null
@@ -1,6027 +0,0 @@
-// CodeMirror is the only global var we claim
-window.CodeMirror = (function() {
-  "use strict";
-
-  // BROWSER SNIFFING
-
-  // Crude, but necessary to handle a number of hard-to-feature-detect
-  // bugs and behavior differences.
-  var gecko = /gecko\/\d/i.test(navigator.userAgent);
-  // IE11 currently doesn't count as 'ie', since it has almost none of
-  // the same bugs as earlier versions. Use ie_gt10 to handle
-  // incompatibilities in that version.
-  var ie = /MSIE \d/.test(navigator.userAgent);
-  var ie_lt8 = ie && (document.documentMode == null || document.documentMode < 8);
-  var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
-  var ie_gt10 = /Trident\/([7-9]|\d{2,})\./.test(navigator.userAgent);
-  var webkit = /WebKit\//.test(navigator.userAgent);
-  var qtwebkit = webkit && /Qt\/\d+\.\d+/.test(navigator.userAgent);
-  var chrome = /Chrome\//.test(navigator.userAgent);
-  var opera = /Opera\//.test(navigator.userAgent);
-  var safari = /Apple Computer/.test(navigator.vendor);
-  var khtml = /KHTML\//.test(navigator.userAgent);
-  var mac_geLion = /Mac OS X 1\d\D([7-9]|\d\d)\D/.test(navigator.userAgent);
-  var mac_geMountainLion = /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent);
-  var phantom = /PhantomJS/.test(navigator.userAgent);
-
-  var ios = /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
-  // This is woefully incomplete. Suggestions for alternative methods welcome.
-  var mobile = ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
-  var mac = ios || /Mac/.test(navigator.platform);
-  var windows = /win/i.test(navigator.platform);
-
-  var opera_version = opera && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
-  if (opera_version) opera_version = Number(opera_version[1]);
-  if (opera_version && opera_version >= 15) { opera = false; webkit = true; }
-  // Some browsers use the wrong event properties to signal cmd/ctrl on OS X
-  var flipCtrlCmd = mac && (qtwebkit || opera && (opera_version == null || opera_version < 12.11));
-  var captureMiddleClick = gecko || (ie && !ie_lt9);
-
-  // Optimize some code when these features are not used
-  var sawReadOnlySpans = false, sawCollapsedSpans = false;
-
-  // CONSTRUCTOR
-
-  function CodeMirror(place, options) {
-    if (!(this instanceof CodeMirror)) return new CodeMirror(place, options);
-
-    this.options = options = options || {};
-    // Determine effective options based on given values and defaults.
-    for (var opt in defaults) if (!options.hasOwnProperty(opt) && defaults.hasOwnProperty(opt))
-      options[opt] = defaults[opt];
-    setGuttersForLineNumbers(options);
-
-    var docStart = typeof options.value == "string" ? 0 : options.value.first;
-    var display = this.display = makeDisplay(place, docStart);
-    display.wrapper.CodeMirror = this;
-    updateGutters(this);
-    if (options.autofocus && !mobile) focusInput(this);
-
-    this.state = {keyMaps: [],
-                  overlays: [],
-                  modeGen: 0,
-                  overwrite: false, focused: false,
-                  suppressEdits: false, pasteIncoming: false,
-                  draggingText: false,
-                  highlight: new Delayed()};
-
-    themeChanged(this);
-    if (options.lineWrapping)
-      this.display.wrapper.className += " CodeMirror-wrap";
-
-    var doc = options.value;
-    if (typeof doc == "string") doc = new Doc(options.value, options.mode);
-    operation(this, attachDoc)(this, doc);
-
-    // Override magic textarea content restore that IE sometimes does
-    // on our hidden textarea on reload
-    if (ie) setTimeout(bind(resetInput, this, true), 20);
-
-    registerEventHandlers(this);
-    // IE throws unspecified error in certain cases, when
-    // trying to access activeElement before onload
-    var hasFocus; try { hasFocus = (document.activeElement == display.input); } catch(e) { }
-    if (hasFocus || (options.autofocus && !mobile)) setTimeout(bind(onFocus, this), 20);
-    else onBlur(this);
-
-    operation(this, function() {
-      for (var opt in optionHandlers)
-        if (optionHandlers.propertyIsEnumerable(opt))
-          optionHandlers[opt](this, options[opt], Init);
-      for (var i = 0; i < initHooks.length; ++i) initHooks[i](this);
-    })();
-  }
-
-  // DISPLAY CONSTRUCTOR
-
-  function makeDisplay(place, docStart) {
-    var d = {};
-
-    var input = d.input = elt("textarea", null, null, "position: absolute; padding: 0; width: 1px; height: 1em; outline: none; font-size: 4px;");
-    if (webkit) input.style.width = "1000px";
-    else input.setAttribute("wrap", "off");
-    // if border: 0; -- iOS fails to open keyboard (issue #1287)
-    if (ios) input.style.border = "1px solid black";
-    input.setAttribute("autocorrect", "off"); input.setAttribute("autocapitalize", "off"); input.setAttribute("spellcheck", "false");
-
-    // Wraps and hides input textarea
-    d.inputDiv = elt("div", [input], null, "overflow: hidden; position: relative; width: 3px; height: 0px;");
-    // The actual fake scrollbars.
-    d.scrollbarH = elt("div", [elt("div", null, null, "height: 1px")], "CodeMirror-hscrollbar");
-    d.scrollbarV = elt("div", [elt("div", null, null, "width: 1px")], "CodeMirror-vscrollbar");
-    d.scrollbarFiller = elt("div", null, "CodeMirror-scrollbar-filler");
-    d.gutterFiller = elt("div", null, "CodeMirror-gutter-filler");
-    // DIVs containing the selection and the actual code
-    d.lineDiv = elt("div", null, "CodeMirror-code");
-    d.selectionDiv = elt("div", null, null, "position: relative; z-index: 1");
-    // Blinky cursor, and element used to ensure cursor fits at the end of a line
-    d.cursor = elt("div", "\u00a0", "CodeMirror-cursor");
-    // Secondary cursor, shown when on a 'jump' in bi-directional text
-    d.otherCursor = elt("div", "\u00a0", "CodeMirror-cursor CodeMirror-secondarycursor");
-    // Used to measure text size
-    d.measure = elt("div", null, "CodeMirror-measure");
-    // Wraps everything that needs to exist inside the vertically-padded coordinate system
-    d.lineSpace = elt("div", [d.measure, d.selectionDiv, d.lineDiv, d.cursor, d.otherCursor],
-                         null, "position: relative; outline: none");
-    // Moved around its parent to cover visible view
-    d.mover = elt("div", [elt("div", [d.lineSpace], "CodeMirror-lines")], null, "position: relative");
-    // Set to the height of the text, causes scrolling
-    d.sizer = elt("div", [d.mover], "CodeMirror-sizer");
-    // D is needed because behavior of elts with overflow: auto and padding is inconsistent across browsers
-    d.heightForcer = elt("div", null, null, "position: absolute; height: " + scrollerCutOff + "px; width: 1px;");
-    // Will contain the gutters, if any
-    d.gutters = elt("div", null, "CodeMirror-gutters");
-    d.lineGutter = null;
-    // Provides scrolling
-    d.scroller = elt("div", [d.sizer, d.heightForcer, d.gutters], "CodeMirror-scroll");
-    d.scroller.setAttribute("tabIndex", "-1");
-    // The element in which the editor lives.
-    d.wrapper = elt("div", [d.inputDiv, d.scrollbarH, d.scrollbarV,
-                            d.scrollbarFiller, d.gutterFiller, d.scroller], "CodeMirror");
-    // Work around IE7 z-index bug
-    if (ie_lt8) { d.gutters.style.zIndex = -1; d.scroller.style.paddingRight = 0; }
-    if (place.appendChild) place.appendChild(d.wrapper); else place(d.wrapper);
-
-    // Needed to hide big blue blinking cursor on Mobile Safari
-    if (ios) input.style.width = "0px";
-    if (!webkit) d.scroller.draggable = true;
-    // Needed to handle Tab key in KHTML
-    if (khtml) { d.inputDiv.style.height = "1px"; d.inputDiv.style.position = "absolute"; }
-    // Need to set a minimum width to see the scrollbar on IE7 (but must not set it on IE8).
-    else if (ie_lt8) d.scrollbarH.style.minWidth = d.scrollbarV.style.minWidth = "18px";
-
-    // Current visible range (may be bigger than the view window).
-    d.viewOffset = d.lastSizeC = 0;
-    d.showingFrom = d.showingTo = docStart;
-
-    // Used to only resize the line number gutter when necessary (when
-    // the amount of lines crosses a boundary that makes its width change)
-    d.lineNumWidth = d.lineNumInnerWidth = d.lineNumChars = null;
-    // See readInput and resetInput
-    d.prevInput = "";
-    // Set to true when a non-horizontal-scrolling widget is added. As
-    // an optimization, widget aligning is skipped when d is false.
-    d.alignWidgets = false;
-    // Flag that indicates whether we currently expect input to appear
-    // (after some event like 'keypress' or 'input') and are polling
-    // intensively.
-    d.pollingFast = false;
-    // Self-resetting timeout for the poller
-    d.poll = new Delayed();
-
-    d.cachedCharWidth = d.cachedTextHeight = null;
-    d.measureLineCache = [];
-    d.measureLineCachePos = 0;
-
-    // Tracks when resetInput has punted to just putting a short
-    // string instead of the (large) selection.
-    d.inaccurateSelection = false;
-
-    // Tracks the maximum line length so that the horizontal scrollbar
-    // can be kept static when scrolling.
-    d.maxLine = null;
-    d.maxLineLength = 0;
-    d.maxLineChanged = false;
-
-    // Used for measuring wheel scrolling granularity
-    d.wheelDX = d.wheelDY = d.wheelStartX = d.wheelStartY = null;
-
-    return d;
-  }
-
-  // STATE UPDATES
-
-  // Used to get the editor into a consistent state again when options change.
-
-  function loadMode(cm) {
-    cm.doc.mode = CodeMirror.getMode(cm.options, cm.doc.modeOption);
-    cm.doc.iter(function(line) {
-      if (line.stateAfter) line.stateAfter = null;
-      if (line.styles) line.styles = null;
-    });
-    cm.doc.frontier = cm.doc.first;
-    startWorker(cm, 100);
-    cm.state.modeGen++;
-    if (cm.curOp) regChange(cm);
-  }
-
-  function wrappingChanged(cm) {
-    if (cm.options.lineWrapping) {
-      cm.display.wrapper.className += " CodeMirror-wrap";
-      cm.display.sizer.style.minWidth = "";
-    } else {
-      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-wrap", "");
-      computeMaxLength(cm);
-    }
-    estimateLineHeights(cm);
-    regChange(cm);
-    clearCaches(cm);
-    setTimeout(function(){updateScrollbars(cm);}, 100);
-  }
-
-  function estimateHeight(cm) {
-    var th = textHeight(cm.display), wrapping = cm.options.lineWrapping;
-    var perLine = wrapping && Math.max(5, cm.display.scroller.clientWidth / charWidth(cm.display) - 3);
-    return function(line) {
-      if (lineIsHidden(cm.doc, line))
-        return 0;
-      else if (wrapping)
-        return (Math.ceil(line.text.length / perLine) || 1) * th;
-      else
-        return th;
-    };
-  }
-
-  function estimateLineHeights(cm) {
-    var doc = cm.doc, est = estimateHeight(cm);
-    doc.iter(function(line) {
-      var estHeight = est(line);
-      if (estHeight != line.height) updateLineHeight(line, estHeight);
-    });
-  }
-
-  function keyMapChanged(cm) {
-    var map = keyMap[cm.options.keyMap], style = map.style;
-    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-keymap-\S+/g, "") +
-      (style ? " cm-keymap-" + style : "");
-    if (cm.state.disableInput && !map.disableInput) resetInput(cm, true);
-    cm.state.disableInput = map.disableInput;
-  }
-
-  function themeChanged(cm) {
-    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-s-\S+/g, "") +
-      cm.options.theme.replace(/(^|\s)\s*/g, " cm-s-");
-    clearCaches(cm);
-  }
-
-  function guttersChanged(cm) {
-    updateGutters(cm);
-    regChange(cm);
-    setTimeout(function(){alignHorizontally(cm);}, 20);
-  }
-
-  function updateGutters(cm) {
-    var gutters = cm.display.gutters, specs = cm.options.gutters;
-    removeChildren(gutters);
-    for (var i = 0; i < specs.length; ++i) {
-      var gutterClass = specs[i];
-      var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
-      if (gutterClass == "CodeMirror-linenumbers") {
-        cm.display.lineGutter = gElt;
-        gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
-      }
-    }
-    gutters.style.display = i ? "" : "none";
-  }
-
-  function lineLength(doc, line) {
-    if (line.height == 0) return 0;
-    var len = line.text.length, merged, cur = line;
-    while (merged = collapsedSpanAtStart(cur)) {
-      var found = merged.find();
-      cur = getLine(doc, found.from.line);
-      len += found.from.ch - found.to.ch;
-    }
-    cur = line;
-    while (merged = collapsedSpanAtEnd(cur)) {
-      var found = merged.find();
-      len -= cur.text.length - found.from.ch;
-      cur = getLine(doc, found.to.line);
-      len += cur.text.length - found.to.ch;
-    }
-    return len;
-  }
-
-  function computeMaxLength(cm) {
-    var d = cm.display, doc = cm.doc;
-    d.maxLine = getLine(doc, doc.first);
-    d.maxLineLength = lineLength(doc, d.maxLine);
-    d.maxLineChanged = true;
-    doc.iter(function(line) {
-      var len = lineLength(doc, line);
-      if (len > d.maxLineLength) {
-        d.maxLineLength = len;
-        d.maxLine = line;
-      }
-    });
-  }
-
-  // Make sure the gutters options contains the element
-  // "CodeMirror-linenumbers" when the lineNumbers option is true.
-  function setGuttersForLineNumbers(options) {
-    var found = indexOf(options.gutters, "CodeMirror-linenumbers");
-    if (found == -1 && options.lineNumbers) {
-      options.gutters = options.gutters.concat(["CodeMirror-linenumbers"]);
-    } else if (found > -1 && !options.lineNumbers) {
-      options.gutters = options.gutters.slice(0);
-      options.gutters.splice(found, 1);
-    }
-  }
-
-  // SCROLLBARS
-
-  // Re-synchronize the fake scrollbars with the actual size of the
-  // content. Optionally force a scrollTop.
-  function updateScrollbars(cm) {
-    var d = cm.display, docHeight = cm.doc.height;
-    var totalHeight = docHeight + paddingVert(d);
-    d.sizer.style.minHeight = d.heightForcer.style.top = totalHeight + "px";
-    d.gutters.style.height = Math.max(totalHeight, d.scroller.clientHeight - scrollerCutOff) + "px";
-    var scrollHeight = Math.max(totalHeight, d.scroller.scrollHeight);
-    var needsH = d.scroller.scrollWidth > (d.scroller.clientWidth + 1);
-    var needsV = scrollHeight > (d.scroller.clientHeight + 1);
-    if (needsV) {
-      d.scrollbarV.style.display = "block";
-      d.scrollbarV.style.bottom = needsH ? scrollbarWidth(d.measure) + "px" : "0";
-      d.scrollbarV.firstChild.style.height =
-        (scrollHeight - d.scroller.clientHeight + d.scrollbarV.clientHeight) + "px";
-    } else {
-      d.scrollbarV.style.display = "";
-      d.scrollbarV.firstChild.style.height = "0";
-    }
-    if (needsH) {
-      d.scrollbarH.style.display = "block";
-      d.scrollbarH.style.right = needsV ? scrollbarWidth(d.measure) + "px" : "0";
-      d.scrollbarH.firstChild.style.width =
-        (d.scroller.scrollWidth - d.scroller.clientWidth + d.scrollbarH.clientWidth) + "px";
-    } else {
-      d.scrollbarH.style.display = "";
-      d.scrollbarH.firstChild.style.width = "0";
-    }
-    if (needsH && needsV) {
-      d.scrollbarFiller.style.display = "block";
-      d.scrollbarFiller.style.height = d.scrollbarFiller.style.width = scrollbarWidth(d.measure) + "px";
-    } else d.scrollbarFiller.style.display = "";
-    if (needsH && cm.options.coverGutterNextToScrollbar && cm.options.fixedGutter) {
-      d.gutterFiller.style.display = "block";
-      d.gutterFiller.style.height = scrollbarWidth(d.measure) + "px";
-      d.gutterFiller.style.width = d.gutters.offsetWidth + "px";
-    } else d.gutterFiller.style.display = "";
-
-    if (mac_geLion && scrollbarWidth(d.measure) === 0) {
-      d.scrollbarV.style.minWidth = d.scrollbarH.style.minHeight = mac_geMountainLion ? "18px" : "12px";
-      d.scrollbarV.style.pointerEvents = d.scrollbarH.style.pointerEvents = "none";
-    }
-  }
-
-  function visibleLines(display, doc, viewPort) {
-    var top = display.scroller.scrollTop, height = display.wrapper.clientHeight;
-    if (typeof viewPort == "number") top = viewPort;
-    else if (viewPort) {top = viewPort.top; height = viewPort.bottom - viewPort.top;}
-    top = Math.floor(top - paddingTop(display));
-    var bottom = Math.ceil(top + height);
-    return {from: lineAtHeight(doc, top), to: lineAtHeight(doc, bottom)};
-  }
-
-  // LINE NUMBERS
-
-  function alignHorizontally(cm) {
-    var display = cm.display;
-    if (!display.alignWidgets && (!display.gutters.firstChild || !cm.options.fixedGutter)) return;
-    var comp = compensateForHScroll(display) - display.scroller.scrollLeft + cm.doc.scrollLeft;
-    var gutterW = display.gutters.offsetWidth, l = comp + "px";
-    for (var n = display.lineDiv.firstChild; n; n = n.nextSibling) if (n.alignable) {
-      for (var i = 0, a = n.alignable; i < a.length; ++i) a[i].style.left = l;
-    }
-    if (cm.options.fixedGutter)
-      display.gutters.style.left = (comp + gutterW) + "px";
-  }
-
-  function maybeUpdateLineNumberWidth(cm) {
-    if (!cm.options.lineNumbers) return false;
-    var doc = cm.doc, last = lineNumberFor(cm.options, doc.first + doc.size - 1), display = cm.display;
-    if (last.length != display.lineNumChars) {
-      var test = display.measure.appendChild(elt("div", [elt("div", last)],
-                                                 "CodeMirror-linenumber CodeMirror-gutter-elt"));
-      var innerW = test.firstChild.offsetWidth, padding = test.offsetWidth - innerW;
-      display.lineGutter.style.width = "";
-      display.lineNumInnerWidth = Math.max(innerW, display.lineGutter.offsetWidth - padding);
-      display.lineNumWidth = display.lineNumInnerWidth + padding;
-      display.lineNumChars = display.lineNumInnerWidth ? last.length : -1;
-      display.lineGutter.style.width = display.lineNumWidth + "px";
-      return true;
-    }
-    return false;
-  }
-
-  function lineNumberFor(options, i) {
-    return String(options.lineNumberFormatter(i + options.firstLineNumber));
-  }
-  function compensateForHScroll(display) {
-    return getRect(display.scroller).left - getRect(display.sizer).left;
-  }
-
-  // DISPLAY DRAWING
-
-  function updateDisplay(cm, changes, viewPort, forced) {
-    var oldFrom = cm.display.showingFrom, oldTo = cm.display.showingTo, updated;
-    var visible = visibleLines(cm.display, cm.doc, viewPort);
-    for (var first = true;; first = false) {
-      var oldWidth = cm.display.scroller.clientWidth;
-      if (!updateDisplayInner(cm, changes, visible, forced)) break;
-      updated = true;
-      changes = [];
-      updateSelection(cm);
-      updateScrollbars(cm);
-      if (first && cm.options.lineWrapping && oldWidth != cm.display.scroller.clientWidth) {
-        forced = true;
-        continue;
-      }
-      forced = false;
-
-      // Clip forced viewport to actual scrollable area
-      if (viewPort)
-        viewPort = Math.min(cm.display.scroller.scrollHeight - cm.display.scroller.clientHeight,
-                            typeof viewPort == "number" ? viewPort : viewPort.top);
-      visible = visibleLines(cm.display, cm.doc, viewPort);
-      if (visible.from >= cm.display.showingFrom && visible.to <= cm.display.showingTo)
-        break;
-    }
-
-    if (updated) {
-      signalLater(cm, "update", cm);
-      if (cm.display.showingFrom != oldFrom || cm.display.showingTo != oldTo)
-        signalLater(cm, "viewportChange", cm, cm.display.showingFrom, cm.display.showingTo);
-    }
-    return updated;
-  }
-
-  // Uses a set of changes plus the current scroll position to
-  // determine which DOM updates have to be made, and makes the
-  // updates.
-  function updateDisplayInner(cm, changes, visible, forced) {
-    var display = cm.display, doc = cm.doc;
-    if (!display.wrapper.offsetWidth) {
-      display.showingFrom = display.showingTo = doc.first;
-      display.viewOffset = 0;
-      return;
-    }
-
-    // Bail out if the visible area is already rendered and nothing changed.
-    if (!forced && changes.length == 0 &&
-        visible.from > display.showingFrom && visible.to < display.showingTo)
-      return;
-
-    if (maybeUpdateLineNumberWidth(cm))
-      changes = [{from: doc.first, to: doc.first + doc.size}];
-    var gutterW = display.sizer.style.marginLeft = display.gutters.offsetWidth + "px";
-    display.scrollbarH.style.left = cm.options.fixedGutter ? gutterW : "0";
-
-    // Used to determine which lines need their line numbers updated
-    var positionsChangedFrom = Infinity;
-    if (cm.options.lineNumbers)
-      for (var i = 0; i < changes.length; ++i)
-        if (changes[i].diff && changes[i].from < positionsChangedFrom) { positionsChangedFrom = changes[i].from; }
-
-    var end = doc.first + doc.size;
-    var from = Math.max(visible.from - cm.options.viewportMargin, doc.first);
-    var to = Math.min(end, visible.to + cm.options.viewportMargin);
-    if (display.showingFrom < from && from - display.showingFrom < 20) from = Math.max(doc.first, display.showingFrom);
-    if (display.showingTo > to && display.showingTo - to < 20) to = Math.min(end, display.showingTo);
-    if (sawCollapsedSpans) {
-      from = lineNo(visualLine(doc, getLine(doc, from)));
-      while (to < end && lineIsHidden(doc, getLine(doc, to))) ++to;
-    }
-
-    // Create a range of theoretically intact lines, and punch holes
-    // in that using the change info.
-    var intact = [{from: Math.max(display.showingFrom, doc.first),
-                   to: Math.min(display.showingTo, end)}];
-    if (intact[0].from >= intact[0].to) intact = [];
-    else intact = computeIntact(intact, changes);
-    // When merged lines are present, we might have to reduce the
-    // intact ranges because changes in continued fragments of the
-    // intact lines do require the lines to be redrawn.
-    if (sawCollapsedSpans)
-      for (var i = 0; i < intact.length; ++i) {
-        var range = intact[i], merged;
-        while (merged = collapsedSpanAtEnd(getLine(doc, range.to - 1))) {
-          var newTo = merged.find().from.line;
-          if (newTo > range.from) range.to = newTo;
-          else { intact.splice(i--, 1); break; }
-        }
-      }
-
-    // Clip off the parts that won't be visible
-    var intactLines = 0;
-    for (var i = 0; i < intact.length; ++i) {
-      var range = intact[i];
-      if (range.from < from) range.from = from;
-      if (range.to > to) range.to = to;
-      if (range.from >= range.to) intact.splice(i--, 1);
-      else intactLines += range.to - range.from;
-    }
-    if (!forced && intactLines == to - from && from == display.showingFrom && to == display.showingTo) {
-      updateViewOffset(cm);
-      return;
-    }
-    intact.sort(function(a, b) {return a.from - b.from;});
-
-    // Avoid crashing on IE's "unspecified error" when in iframes
-    try {
-      var focused = document.activeElement;
-    } catch(e) {}
-    if (intactLines < (to - from) * .7) display.lineDiv.style.display = "none";
-    patchDisplay(cm, from, to, intact, positionsChangedFrom);
-    display.lineDiv.style.display = "";
-    if (focused && document.activeElement != focused && focused.offsetHeight) focused.focus();
-
-    var different = from != display.showingFrom || to != display.showingTo ||
-      display.lastSizeC != display.wrapper.clientHeight;
-    // This is just a bogus formula that detects when the editor is
-    // resized or the font size changes.
-    if (different) {
-      display.lastSizeC = display.wrapper.clientHeight;
-      startWorker(cm, 400);
-    }
-    display.showingFrom = from; display.showingTo = to;
-
-    display.gutters.style.height = "";
-    updateHeightsInViewport(cm);
-    updateViewOffset(cm);
-
-    return true;
-  }
-
-  function updateHeightsInViewport(cm) {
-    var display = cm.display;
-    var prevBottom = display.lineDiv.offsetTop;
-    for (var node = display.lineDiv.firstChild, height; node; node = node.nextSibling) if (node.lineObj) {
-      if (ie_lt8) {
-        var bot = node.offsetTop + node.offsetHeight;
-        height = bot - prevBottom;
-        prevBottom = bot;
-      } else {
-        var box = getRect(node);
-        height = box.bottom - box.top;
-      }
-      var diff = node.lineObj.height - height;
-      if (height < 2) height = textHeight(display);
-      if (diff > .001 || diff < -.001) {
-        updateLineHeight(node.lineObj, height);
-        var widgets = node.lineObj.widgets;
-        if (widgets) for (var i = 0; i < widgets.length; ++i)
-          widgets[i].height = widgets[i].node.offsetHeight;
-      }
-    }
-  }
-
-  function updateViewOffset(cm) {
-    var off = cm.display.viewOffset = heightAtLine(cm, getLine(cm.doc, cm.display.showingFrom));
-    // Position the mover div to align with the current virtual scroll position
-    cm.display.mover.style.top = off + "px";
-  }
-
-  function computeIntact(intact, changes) {
-    for (var i = 0, l = changes.length || 0; i < l; ++i) {
-      var change = changes[i], intact2 = [], diff = change.diff || 0;
-      for (var j = 0, l2 = intact.length; j < l2; ++j) {
-        var range = intact[j];
-        if (change.to <= range.from && change.diff) {
-          intact2.push({from: range.from + diff, to: range.to + diff});
-        } else if (change.to <= range.from || change.from >= range.to) {
-          intact2.push(range);
-        } else {
-          if (change.from > range.from)
-            intact2.push({from: range.from, to: change.from});
-          if (change.to < range.to)
-            intact2.push({from: change.to + diff, to: range.to + diff});
-        }
-      }
-      intact = intact2;
-    }
-    return intact;
-  }
-
-  function getDimensions(cm) {
-    var d = cm.display, left = {}, width = {};
-    for (var n = d.gutters.firstChild, i = 0; n; n = n.nextSibling, ++i) {
-      left[cm.options.gutters[i]] = n.offsetLeft;
-      width[cm.options.gutters[i]] = n.offsetWidth;
-    }
-    return {fixedPos: compensateForHScroll(d),
-            gutterTotalWidth: d.gutters.offsetWidth,
-            gutterLeft: left,
-            gutterWidth: width,
-            wrapperWidth: d.wrapper.clientWidth};
-  }
-
-  function patchDisplay(cm, from, to, intact, updateNumbersFrom) {
-    var dims = getDimensions(cm);
-    var display = cm.display, lineNumbers = cm.options.lineNumbers;
-    if (!intact.length && (!webkit || !cm.display.currentWheelTarget))
-      removeChildren(display.lineDiv);
-    var container = display.lineDiv, cur = container.firstChild;
-
-    function rm(node) {
-      var next = node.nextSibling;
-      if (webkit && mac && cm.display.currentWheelTarget == node) {
-        node.style.display = "none";
-        node.lineObj = null;
-      } else {
-        node.parentNode.removeChild(node);
-      }
-      return next;
-    }
-
-    var nextIntact = intact.shift(), lineN = from;
-    cm.doc.iter(from, to, function(line) {
-      if (nextIntact && nextIntact.to == lineN) nextIntact = intact.shift();
-      if (lineIsHidden(cm.doc, line)) {
-        if (line.height != 0) updateLineHeight(line, 0);
-        if (line.widgets && cur && cur.previousSibling) for (var i = 0; i < line.widgets.length; ++i) {
-          var w = line.widgets[i];
-          if (w.showIfHidden) {
-            var prev = cur.previousSibling;
-            if (/pre/i.test(prev.nodeName)) {
-              var wrap = elt("div", null, null, "position: relative");
-              prev.parentNode.replaceChild(wrap, prev);
-              wrap.appendChild(prev);
-              prev = wrap;
-            }
-            var wnode = prev.appendChild(elt("div", [w.node], "CodeMirror-linewidget"));
-            if (!w.handleMouseEvents) wnode.ignoreEvents = true;
-            positionLineWidget(w, wnode, prev, dims);
-          }
-        }
-      } else if (nextIntact && nextIntact.from <= lineN && nextIntact.to > lineN) {
-        // This line is intact. Skip to the actual node. Update its
-        // line number if needed.
-        while (cur.lineObj != line) cur = rm(cur);
-        if (lineNumbers && updateNumbersFrom <= lineN && cur.lineNumber)
-          setTextContent(cur.lineNumber, lineNumberFor(cm.options, lineN));
-        cur = cur.nextSibling;
-      } else {
-        // For lines with widgets, make an attempt to find and reuse
-        // the existing element, so that widgets aren't needlessly
-        // removed and re-inserted into the dom
-        if (line.widgets) for (var j = 0, search = cur, reuse; search && j < 20; ++j, search = search.nextSibling)
-          if (search.lineObj == line && /div/i.test(search.nodeName)) { reuse = search; break; }
-        // This line needs to be generated.
-        var lineNode = buildLineElement(cm, line, lineN, dims, reuse);
-        if (lineNode != reuse) {
-          container.insertBefore(lineNode, cur);
-        } else {
-          while (cur != reuse) cur = rm(cur);
-          cur = cur.nextSibling;
-        }
-
-        lineNode.lineObj = line;
-      }
-      ++lineN;
-    });
-    while (cur) cur = rm(cur);
-  }
-
-  function buildLineElement(cm, line, lineNo, dims, reuse) {
-    var built = buildLineContent(cm, line), lineElement = built.pre;
-    var markers = line.gutterMarkers, display = cm.display, wrap;
-
-    var bgClass = built.bgClass ? built.bgClass + " " + (line.bgClass || "") : line.bgClass;
-    if (!cm.options.lineNumbers && !markers && !bgClass && !line.wrapClass && !line.widgets)
-      return lineElement;
-
-    // Lines with gutter elements, widgets or a background class need
-    // to be wrapped again, and have the extra elements added to the
-    // wrapper div
-
-    if (reuse) {
-      reuse.alignable = null;
-      var isOk = true, widgetsSeen = 0, insertBefore = null;
-      for (var n = reuse.firstChild, next; n; n = next) {
-        next = n.nextSibling;
-        if (!/\bCodeMirror-linewidget\b/.test(n.className)) {
-          reuse.removeChild(n);
-        } else {
-          for (var i = 0; i < line.widgets.length; ++i) {
-            var widget = line.widgets[i];
-            if (widget.node == n.firstChild) {
-              if (!widget.above && !insertBefore) insertBefore = n;
-              positionLineWidget(widget, n, reuse, dims);
-              ++widgetsSeen;
-              break;
-            }
-          }
-          if (i == line.widgets.length) { isOk = false; break; }
-        }
-      }
-      reuse.insertBefore(lineElement, insertBefore);
-      if (isOk && widgetsSeen == line.widgets.length) {
-        wrap = reuse;
-        reuse.className = line.wrapClass || "";
-      }
-    }
-    if (!wrap) {
-      wrap = elt("div", null, line.wrapClass, "position: relative");
-      wrap.appendChild(lineElement);
-    }
-    // Kludge to make sure the styled element lies behind the selection (by z-index)
-    if (bgClass)
-      wrap.insertBefore(elt("div", null, bgClass + " CodeMirror-linebackground"), wrap.firstChild);
-    if (cm.options.lineNumbers || markers) {
-      var gutterWrap = wrap.insertBefore(elt("div", null, "CodeMirror-gutter-wrapper", "position: absolute; left: " +
-                                             (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px"),
-                                         lineElement);
-      if (cm.options.fixedGutter) (wrap.alignable || (wrap.alignable = [])).push(gutterWrap);
-      if (cm.options.lineNumbers && (!markers || !markers["CodeMirror-linenumbers"]))
-        wrap.lineNumber = gutterWrap.appendChild(
-          elt("div", lineNumberFor(cm.options, lineNo),
-              "CodeMirror-linenumber CodeMirror-gutter-elt",
-              "left: " + dims.gutterLeft["CodeMirror-linenumbers"] + "px; width: "
-              + display.lineNumInnerWidth + "px"));
-      if (markers)
-        for (var k = 0; k < cm.options.gutters.length; ++k) {
-          var id = cm.options.gutters[k], found = markers.hasOwnProperty(id) && markers[id];
-          if (found)
-            gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt", "left: " +
-                                       dims.gutterLeft[id] + "px; width: " + dims.gutterWidth[id] + "px"));
-        }
-    }
-    if (ie_lt8) wrap.style.zIndex = 2;
-    if (line.widgets && wrap != reuse) for (var i = 0, ws = line.widgets; i < ws.length; ++i) {
-      var widget = ws[i], node = elt("div", [widget.node], "CodeMirror-linewidget");
-      if (!widget.handleMouseEvents) node.ignoreEvents = true;
-      positionLineWidget(widget, node, wrap, dims);
-      if (widget.above)
-        wrap.insertBefore(node, cm.options.lineNumbers && line.height != 0 ? gutterWrap : lineElement);
-      else
-        wrap.appendChild(node);
-      signalLater(widget, "redraw");
-    }
-    return wrap;
-  }
-
-  function positionLineWidget(widget, node, wrap, dims) {
-    if (widget.noHScroll) {
-      (wrap.alignable || (wrap.alignable = [])).push(node);
-      var width = dims.wrapperWidth;
-      node.style.left = dims.fixedPos + "px";
-      if (!widget.coverGutter) {
-        width -= dims.gutterTotalWidth;
-        node.style.paddingLeft = dims.gutterTotalWidth + "px";
-      }
-      node.style.width = width + "px";
-    }
-    if (widget.coverGutter) {
-      node.style.zIndex = 5;
-      node.style.position = "relative";
-      if (!widget.noHScroll) node.style.marginLeft = -dims.gutterTotalWidth + "px";
-    }
-  }
-
-  // SELECTION / CURSOR
-
-  function updateSelection(cm) {
-    var display = cm.display;
-    var collapsed = posEq(cm.doc.sel.from, cm.doc.sel.to);
-    if (collapsed || cm.options.showCursorWhenSelecting)
-      updateSelectionCursor(cm);
-    else
-      display.cursor.style.display = display.otherCursor.style.display = "none";
-    if (!collapsed)
-      updateSelectionRange(cm);
-    else
-      display.selectionDiv.style.display = "none";
-
-    // Move the hidden textarea near the cursor to prevent scrolling artifacts
-    if (cm.options.moveInputWithCursor) {
-      var headPos = cursorCoords(cm, cm.doc.sel.head, "div");
-      var wrapOff = getRect(display.wrapper), lineOff = getRect(display.lineDiv);
-      display.inputDiv.style.top = Math.max(0, Math.min(display.wrapper.clientHeight - 10,
-                                                        headPos.top + lineOff.top - wrapOff.top)) + "px";
-      display.inputDiv.style.left = Math.max(0, Math.min(display.wrapper.clientWidth - 10,
-                                                         headPos.left + lineOff.left - wrapOff.left)) + "px";
-    }
-  }
-
-  // No selection, plain cursor
-  function updateSelectionCursor(cm) {
-    var display = cm.display, pos = cursorCoords(cm, cm.doc.sel.head, "div");
-    display.cursor.style.left = pos.left + "px";
-    display.cursor.style.top = pos.top + "px";
-    display.cursor.style.height = Math.max(0, pos.bottom - pos.top) * cm.options.cursorHeight + "px";
-    display.cursor.style.display = "";
-
-    if (pos.other) {
-      display.otherCursor.style.display = "";
-      display.otherCursor.style.left = pos.other.left + "px";
-      display.otherCursor.style.top = pos.other.top + "px";
-      display.otherCursor.style.height = (pos.other.bottom - pos.other.top) * .85 + "px";
-    } else { display.otherCursor.style.display = "none"; }
-  }
-
-  // Highlight selection
-  function updateSelectionRange(cm) {
-    var display = cm.display, doc = cm.doc, sel = cm.doc.sel;
-    var fragment = document.createDocumentFragment();
-    var clientWidth = display.lineSpace.offsetWidth, pl = paddingLeft(cm.display);
-
-    function add(left, top, width, bottom) {
-      if (top < 0) top = 0;
-      fragment.appendChild(elt("div", null, "CodeMirror-selected", "position: absolute; left: " + left +
-                               "px; top: " + top + "px; width: " + (width == null ? clientWidth - left : width) +
-                               "px; height: " + (bottom - top) + "px"));
-    }
-
-    function drawForLine(line, fromArg, toArg) {
-      var lineObj = getLine(doc, line);
-      var lineLen = lineObj.text.length;
-      var start, end;
-      function coords(ch, bias) {
-        return charCoords(cm, Pos(line, ch), "div", lineObj, bias);
-      }
-
-      iterateBidiSections(getOrder(lineObj), fromArg || 0, toArg == null ? lineLen : toArg, function(from, to, dir) {
-        var leftPos = coords(from, "left"), rightPos, left, right;
-        if (from == to) {
-          rightPos = leftPos;
-          left = right = leftPos.left;
-        } else {
-          rightPos = coords(to - 1, "right");
-          if (dir == "rtl") { var tmp = leftPos; leftPos = rightPos; rightPos = tmp; }
-          left = leftPos.left;
-          right = rightPos.right;
-        }
-        if (fromArg == null && from == 0) left = pl;
-        if (rightPos.top - leftPos.top > 3) { // Different lines, draw top part
-          add(left, leftPos.top, null, leftPos.bottom);
-          left = pl;
-          if (leftPos.bottom < rightPos.top) add(left, leftPos.bottom, null, rightPos.top);
-        }
-        if (toArg == null && to == lineLen) right = clientWidth;
-        if (!start || leftPos.top < start.top || leftPos.top == start.top && leftPos.left < start.left)
-          start = leftPos;
-        if (!end || rightPos.bottom > end.bottom || rightPos.bottom == end.bottom && rightPos.right > end.right)
-          end = rightPos;
-        if (left < pl + 1) left = pl;
-        add(left, rightPos.top, right - left, rightPos.bottom);
-      });
-      return {start: start, end: end};
-    }
-
-    if (sel.from.line == sel.to.line) {
-      drawForLine(sel.from.line, sel.from.ch, sel.to.ch);
-    } else {
-      var fromLine = getLine(doc, sel.from.line), toLine = getLine(doc, sel.to.line);
-      var singleVLine = visualLine(doc, fromLine) == visualLine(doc, toLine);
-      var leftEnd = drawForLine(sel.from.line, sel.from.ch, singleVLine ? fromLine.text.length : null).end;
-      var rightStart = drawForLine(sel.to.line, singleVLine ? 0 : null, sel.to.ch).start;
-      if (singleVLine) {
-        if (leftEnd.top < rightStart.top - 2) {
-          add(leftEnd.right, leftEnd.top, null, leftEnd.bottom);
-          add(pl, rightStart.top, rightStart.left, rightStart.bottom);
-        } else {
-          add(leftEnd.right, leftEnd.top, rightStart.left - leftEnd.right, leftEnd.bottom);
-        }
-      }
-      if (leftEnd.bottom < rightStart.top)
-        add(pl, leftEnd.bottom, null, rightStart.top);
-    }
-
-    removeChildrenAndAdd(display.selectionDiv, fragment);
-    display.selectionDiv.style.display = "";
-  }
-
-  // Cursor-blinking
-  function restartBlink(cm) {
-    if (!cm.state.focused) return;
-    var display = cm.display;
-    clearInterval(display.blinker);
-    var on = true;
-    display.cursor.style.visibility = display.otherCursor.style.visibility = "";
-    if (cm.options.cursorBlinkRate > 0)
-      display.blinker = setInterval(function() {
-        display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
-      }, cm.options.cursorBlinkRate);
-  }
-
-  // HIGHLIGHT WORKER
-
-  function startWorker(cm, time) {
-    if (cm.doc.mode.startState && cm.doc.frontier < cm.display.showingTo)
-      cm.state.highlight.set(time, bind(highlightWorker, cm));
-  }
-
-  function highlightWorker(cm) {
-    var doc = cm.doc;
-    if (doc.frontier < doc.first) doc.frontier = doc.first;
-    if (doc.frontier >= cm.display.showingTo) return;
-    var end = +new Date + cm.options.workTime;
-    var state = copyState(doc.mode, getStateBefore(cm, doc.frontier));
-    var changed = [], prevChange;
-    doc.iter(doc.frontier, Math.min(doc.first + doc.size, cm.display.showingTo + 500), function(line) {
-      if (doc.frontier >= cm.display.showingFrom) { // Visible
-        var oldStyles = line.styles;
-        line.styles = highlightLine(cm, line, state, true);
-        var ischange = !oldStyles || oldStyles.length != line.styles.length;
-        for (var i = 0; !ischange && i < oldStyles.length; ++i) ischange = oldStyles[i] != line.styles[i];
-        if (ischange) {
-          if (prevChange && prevChange.end == doc.frontier) prevChange.end++;
-          else changed.push(prevChange = {start: doc.frontier, end: doc.frontier + 1});
-        }
-        line.stateAfter = copyState(doc.mode, state);
-      } else {
-        processLine(cm, line.text, state);
-        line.stateAfter = doc.frontier % 5 == 0 ? copyState(doc.mode, state) : null;
-      }
-      ++doc.frontier;
-      if (+new Date > end) {
-        startWorker(cm, cm.options.workDelay);
-        return true;
-      }
-    });
-    if (changed.length)
-      operation(cm, function() {
-        for (var i = 0; i < changed.length; ++i)
-          regChange(this, changed[i].start, changed[i].end);
-      })();
-  }
-
-  // Finds the line to start with when starting a parse. Tries to
-  // find a line with a stateAfter, so that it can start with a
-  // valid state. If that fails, it returns the line with the
-  // smallest indentation, which tends to need the least context to
-  // parse correctly.
-  function findStartLine(cm, n, precise) {
-    var minindent, minline, doc = cm.doc;
-    var lim = precise ? -1 : n - (cm.doc.mode.innerMode ? 1000 : 100);
-    for (var search = n; search > lim; --search) {
-      if (search <= doc.first) return doc.first;
-      var line = getLine(doc, search - 1);
-      if (line.stateAfter && (!precise || search <= doc.frontier)) return search;
-      var indented = countColumn(line.text, null, cm.options.tabSize);
-      if (minline == null || minindent > indented) {
-        minline = search - 1;
-        minindent = indented;
-      }
-    }
-    return minline;
-  }
-
-  function getStateBefore(cm, n, precise) {
-    var doc = cm.doc, display = cm.display;
-    if (!doc.mode.startState) return true;
-    var pos = findStartLine(cm, n, precise), state = pos > doc.first && getLine(doc, pos-1).stateAfter;
-    if (!state) state = startState(doc.mode);
-    else state = copyState(doc.mode, state);
-    doc.iter(pos, n, function(line) {
-      processLine(cm, line.text, state);
-      var save = pos == n - 1 || pos % 5 == 0 || pos >= display.showingFrom && pos < display.showingTo;
-      line.stateAfter = save ? copyState(doc.mode, state) : null;
-      ++pos;
-    });
-    if (precise) doc.frontier = pos;
-    return state;
-  }
-
-  // POSITION MEASUREMENT
-
-  function paddingTop(display) {return display.lineSpace.offsetTop;}
-  function paddingVert(display) {return display.mover.offsetHeight - display.lineSpace.offsetHeight;}
-  function paddingLeft(display) {
-    var e = removeChildrenAndAdd(display.measure, elt("pre", null, null, "text-align: left")).appendChild(elt("span", "x"));
-    return e.offsetLeft;
-  }
-
-  function measureChar(cm, line, ch, data, bias) {
-    var dir = -1;
-    data = data || measureLine(cm, line);
-    if (data.crude) {
-      var left = data.left + ch * data.width;
-      return {left: left, right: left + data.width, top: data.top, bottom: data.bottom};
-    }
-
-    for (var pos = ch;; pos += dir) {
-      var r = data[pos];
-      if (r) break;
-      if (dir < 0 && pos == 0) dir = 1;
-    }
-    bias = pos > ch ? "left" : pos < ch ? "right" : bias;
-    if (bias == "left" && r.leftSide) r = r.leftSide;
-    else if (bias == "right" && r.rightSide) r = r.rightSide;
-    return {left: pos < ch ? r.right : r.left,
-            right: pos > ch ? r.left : r.right,
-            top: r.top,
-            bottom: r.bottom};
-  }
-
-  function findCachedMeasurement(cm, line) {
-    var cache = cm.display.measureLineCache;
-    for (var i = 0; i < cache.length; ++i) {
-      var memo = cache[i];
-      if (memo.text == line.text && memo.markedSpans == line.markedSpans &&
-          cm.display.scroller.clientWidth == memo.width &&
-          memo.classes == line.textClass + "|" + line.wrapClass)
-        return memo;
-    }
-  }
-
-  function clearCachedMeasurement(cm, line) {
-    var exists = findCachedMeasurement(cm, line);
-    if (exists) exists.text = exists.measure = exists.markedSpans = null;
-  }
-
-  function measureLine(cm, line) {
-    // First look in the cache
-    var cached = findCachedMeasurement(cm, line);
-    if (cached) return cached.measure;
-
-    // Failing that, recompute and store result in cache
-    var measure = measureLineInner(cm, line);
-    var cache = cm.display.measureLineCache;
-    var memo = {text: line.text, width: cm.display.scroller.clientWidth,
-                markedSpans: line.markedSpans, measure: measure,
-                classes: line.textClass + "|" + line.wrapClass};
-    if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
-    else cache.push(memo);
-    return measure;
-  }
-
-  function measureLineInner(cm, line) {
-    if (!cm.options.lineWrapping && line.text.length >= cm.options.crudeMeasuringFrom)
-      return crudelyMeasureLine(cm, line);
-
-    var display = cm.display, measure = emptyArray(line.text.length);
-    var pre = buildLineContent(cm, line, measure, true).pre;
-
-    // IE does not cache element positions of inline elements between
-    // calls to getBoundingClientRect. This makes the loop below,
-    // which gathers the positions of all the characters on the line,
-    // do an amount of layout work quadratic to the number of
-    // characters. When line wrapping is off, we try to improve things
-    // by first subdividing the line into a bunch of inline blocks, so
-    // that IE can reuse most of the layout information from caches
-    // for those blocks. This does interfere with line wrapping, so it
-    // doesn't work when wrapping is on, but in that case the
-    // situation is slightly better, since IE does cache line-wrapping
-    // information and only recomputes per-line.
-    if (ie && !ie_lt8 && !cm.options.lineWrapping && pre.childNodes.length > 100) {
-      var fragment = document.createDocumentFragment();
-      var chunk = 10, n = pre.childNodes.length;
-      for (var i = 0, chunks = Math.ceil(n / chunk); i < chunks; ++i) {
-        var wrap = elt("div", null, null, "display: inline-block");
-        for (var j = 0; j < chunk && n; ++j) {
-          wrap.appendChild(pre.firstChild);
-          --n;
-        }
-        fragment.appendChild(wrap);
-      }
-      pre.appendChild(fragment);
-    }
-
-    removeChildrenAndAdd(display.measure, pre);
-
-    var outer = getRect(display.lineDiv);
-    var vranges = [], data = emptyArray(line.text.length), maxBot = pre.offsetHeight;
-    // Work around an IE7/8 bug where it will sometimes have randomly
-    // replaced our pre with a clone at this point.
-    if (ie_lt9 && display.measure.first != pre)
-      removeChildrenAndAdd(display.measure, pre);
-
-    function measureRect(rect) {
-      var top = rect.top - outer.top, bot = rect.bottom - outer.top;
-      if (bot > maxBot) bot = maxBot;
-      if (top < 0) top = 0;
-      for (var i = vranges.length - 2; i >= 0; i -= 2) {
-        var rtop = vranges[i], rbot = vranges[i+1];
-        if (rtop > bot || rbot < top) continue;
-        if (rtop <= top && rbot >= bot ||
-            top <= rtop && bot >= rbot ||
-            Math.min(bot, rbot) - Math.max(top, rtop) >= (bot - top) >> 1) {
-          vranges[i] = Math.min(top, rtop);
-          vranges[i+1] = Math.max(bot, rbot);
-          break;
-        }
-      }
-      if (i < 0) { i = vranges.length; vranges.push(top, bot); }
-      return {left: rect.left - outer.left,
-              right: rect.right - outer.left,
-              top: i, bottom: null};
-    }
-    function finishRect(rect) {
-      rect.bottom = vranges[rect.top+1];
-      rect.top = vranges[rect.top];
-    }
-
-    for (var i = 0, cur; i < measure.length; ++i) if (cur = measure[i]) {
-      var node = cur, rect = null;
-      // A widget might wrap, needs special care
-      if (/\bCodeMirror-widget\b/.test(cur.className) && cur.getClientRects) {
-        if (cur.firstChild.nodeType == 1) node = cur.firstChild;
-        var rects = node.getClientRects();
-        if (rects.length > 1) {
-          rect = data[i] = measureRect(rects[0]);
-          rect.rightSide = measureRect(rects[rects.length - 1]);
-        }
-      }
-      if (!rect) rect = data[i] = measureRect(getRect(node));
-      if (cur.measureRight) rect.right = getRect(cur.measureRight).left - outer.left;
-      if (cur.leftSide) rect.leftSide = measureRect(getRect(cur.leftSide));
-    }
-    removeChildren(cm.display.measure);
-    for (var i = 0, cur; i < data.length; ++i) if (cur = data[i]) {
-      finishRect(cur);
-      if (cur.leftSide) finishRect(cur.leftSide);
-      if (cur.rightSide) finishRect(cur.rightSide);
-    }
-    return data;
-  }
-
-  function crudelyMeasureLine(cm, line) {
-    var copy = new Line(line.text.slice(0, 100), null);
-    if (line.textClass) copy.textClass = line.textClass;
-    var measure = measureLineInner(cm, copy);
-    var left = measureChar(cm, copy, 0, measure, "left");
-    var right = measureChar(cm, copy, 99, measure, "right");
-    return {crude: true, top: left.top, left: left.left, bottom: left.bottom, width: (right.right - left.left) / 100};
-  }
-
-  function measureLineWidth(cm, line) {
-    var hasBadSpan = false;
-    if (line.markedSpans) for (var i = 0; i < line.markedSpans; ++i) {
-      var sp = line.markedSpans[i];
-      if (sp.collapsed && (sp.to == null || sp.to == line.text.length)) hasBadSpan = true;
-    }
-    var cached = !hasBadSpan && findCachedMeasurement(cm, line);
-    if (cached || line.text.length >= cm.options.crudeMeasuringFrom)
-      return measureChar(cm, line, line.text.length, cached && cached.measure, "right").right;
-
-    var pre = buildLineContent(cm, line, null, true).pre;
-    var end = pre.appendChild(zeroWidthElement(cm.display.measure));
-    removeChildrenAndAdd(cm.display.measure, pre);
-    return getRect(end).right - getRect(cm.display.lineDiv).left;
-  }
-
-  function clearCaches(cm) {
-    cm.display.measureLineCache.length = cm.display.measureLineCachePos = 0;
-    cm.display.cachedCharWidth = cm.display.cachedTextHeight = null;
-    if (!cm.options.lineWrapping) cm.display.maxLineChanged = true;
-    cm.display.lineNumChars = null;
-  }
-
-  function pageScrollX() { return window.pageXOffset || (document.documentElement || document.body).scrollLeft; }
-  function pageScrollY() { return window.pageYOffset || (document.documentElement || document.body).scrollTop; }
-
-  // Context is one of "line", "div" (display.lineDiv), "local"/null (editor), or "page"
-  function intoCoordSystem(cm, lineObj, rect, context) {
-    if (lineObj.widgets) for (var i = 0; i < lineObj.widgets.length; ++i) if (lineObj.widgets[i].above) {
-      var size = widgetHeight(lineObj.widgets[i]);
-      rect.top += size; rect.bottom += size;
-    }
-    if (context == "line") return rect;
-    if (!context) context = "local";
-    var yOff = heightAtLine(cm, lineObj);
-    if (context == "local") yOff += paddingTop(cm.display);
-    else yOff -= cm.display.viewOffset;
-    if (context == "page" || context == "window") {
-      var lOff = getRect(cm.display.lineSpace);
-      yOff += lOff.top + (context == "window" ? 0 : pageScrollY());
-      var xOff = lOff.left + (context == "window" ? 0 : pageScrollX());
-      rect.left += xOff; rect.right += xOff;
-    }
-    rect.top += yOff; rect.bottom += yOff;
-    return rect;
-  }
-
-  // Context may be "window", "page", "div", or "local"/null
-  // Result is in "div" coords
-  function fromCoordSystem(cm, coords, context) {
-    if (context == "div") return coords;
-    var left = coords.left, top = coords.top;
-    // First move into "page" coordinate system
-    if (context == "page") {
-      left -= pageScrollX();
-      top -= pageScrollY();
-    } else if (context == "local" || !context) {
-      var localBox = getRect(cm.display.sizer);
-      left += localBox.left;
-      top += localBox.top;
-    }
-
-    var lineSpaceBox = getRect(cm.display.lineSpace);
-    return {left: left - lineSpaceBox.left, top: top - lineSpaceBox.top};
-  }
-
-  function charCoords(cm, pos, context, lineObj, bias) {
-    if (!lineObj) lineObj = getLine(cm.doc, pos.line);
-    return intoCoordSystem(cm, lineObj, measureChar(cm, lineObj, pos.ch, null, bias), context);
-  }
-
-  function cursorCoords(cm, pos, context, lineObj, measurement) {
-    lineObj = lineObj || getLine(cm.doc, pos.line);
-    if (!measurement) measurement = measureLine(cm, lineObj);
-    function get(ch, right) {
-      var m = measureChar(cm, lineObj, ch, measurement, right ? "right" : "left");
-      if (right) m.left = m.right; else m.right = m.left;
-      return intoCoordSystem(cm, lineObj, m, context);
-    }
-    function getBidi(ch, partPos) {
-      var part = order[partPos], right = part.level % 2;
-      if (ch == bidiLeft(part) && partPos && part.level < order[partPos - 1].level) {
-        part = order[--partPos];
-        ch = bidiRight(part) - (part.level % 2 ? 0 : 1);
-        right = true;
-      } else if (ch == bidiRight(part) && partPos < order.length - 1 && part.level < order[partPos + 1].level) {
-        part = order[++partPos];
-        ch = bidiLeft(part) - part.level % 2;
-        right = false;
-      }
-      if (right && ch == part.to && ch > part.from) return get(ch - 1);
-      return get(ch, right);
-    }
-    var order = getOrder(lineObj), ch = pos.ch;
-    if (!order) return get(ch);
-    var partPos = getBidiPartAt(order, ch);
-    var val = getBidi(ch, partPos);
-    if (bidiOther != null) val.other = getBidi(ch, bidiOther);
-    return val;
-  }
-
-  function PosWithInfo(line, ch, outside, xRel) {
-    var pos = new Pos(line, ch);
-    pos.xRel = xRel;
-    if (outside) pos.outside = true;
-    return pos;
-  }
-
-  // Coords must be lineSpace-local
-  function coordsChar(cm, x, y) {
-    var doc = cm.doc;
-    y += cm.display.viewOffset;
-    if (y < 0) return PosWithInfo(doc.first, 0, true, -1);
-    var lineNo = lineAtHeight(doc, y), last = doc.first + doc.size - 1;
-    if (lineNo > last)
-      return PosWithInfo(doc.first + doc.size - 1, getLine(doc, last).text.length, true, 1);
-    if (x < 0) x = 0;
-
-    for (;;) {
-      var lineObj = getLine(doc, lineNo);
-      var found = coordsCharInner(cm, lineObj, lineNo, x, y);
-      var merged = collapsedSpanAtEnd(lineObj);
-      var mergedPos = merged && merged.find();
-      if (merged && (found.ch > mergedPos.from.ch || found.ch == mergedPos.from.ch && found.xRel > 0))
-        lineNo = mergedPos.to.line;
-      else
-        return found;
-    }
-  }
-
-  function coordsCharInner(cm, lineObj, lineNo, x, y) {
-    var innerOff = y - heightAtLine(cm, lineObj);
-    var wrongLine = false, adjust = 2 * cm.display.wrapper.clientWidth;
-    var measurement = measureLine(cm, lineObj);
-
-    function getX(ch) {
-      var sp = cursorCoords(cm, Pos(lineNo, ch), "line",
-                            lineObj, measurement);
-      wrongLine = true;
-      if (innerOff > sp.bottom) return sp.left - adjust;
-      else if (innerOff < sp.top) return sp.left + adjust;
-      else wrongLine = false;
-      return sp.left;
-    }
-
-    var bidi = getOrder(lineObj), dist = lineObj.text.length;
-    var from = lineLeft(lineObj), to = lineRight(lineObj);
-    var fromX = getX(from), fromOutside = wrongLine, toX = getX(to), toOutside = wrongLine;
-
-    if (x > toX) return PosWithInfo(lineNo, to, toOutside, 1);
-    // Do a binary search between these bounds.
-    for (;;) {
-      if (bidi ? to == from || to == moveVisually(lineObj, from, 1) : to - from <= 1) {
-        var ch = x < fromX || x - fromX <= toX - x ? from : to;
-        var xDiff = x - (ch == from ? fromX : toX);
-        while (isExtendingChar.test(lineObj.text.charAt(ch))) ++ch;
-        var pos = PosWithInfo(lineNo, ch, ch == from ? fromOutside : toOutside,
-                              xDiff < 0 ? -1 : xDiff ? 1 : 0);
-        return pos;
-      }
-      var step = Math.ceil(dist / 2), middle = from + step;
-      if (bidi) {
-        middle = from;
-        for (var i = 0; i < step; ++i) middle = moveVisually(lineObj, middle, 1);
-      }
-      var middleX = getX(middle);
-      if (middleX > x) {to = middle; toX = middleX; if (toOutside = wrongLine) toX += 1000; dist = step;}
-      else {from = middle; fromX = middleX; fromOutside = wrongLine; dist -= step;}
-    }
-  }
-
-  var measureText;
-  function textHeight(display) {
-    if (display.cachedTextHeight != null) return display.cachedTextHeight;
-    if (measureText == null) {
-      measureText = elt("pre");
-      // Measure a bunch of lines, for browsers that compute
-      // fractional heights.
-      for (var i = 0; i < 49; ++i) {
-        measureText.appendChild(document.createTextNode("x"));
-        measureText.appendChild(elt("br"));
-      }
-      measureText.appendChild(document.createTextNode("x"));
-    }
-    removeChildrenAndAdd(display.measure, measureText);
-    var height = measureText.offsetHeight / 50;
-    if (height > 3) display.cachedTextHeight = height;
-    removeChildren(display.measure);
-    return height || 1;
-  }
-
-  function charWidth(display) {
-    if (display.cachedCharWidth != null) return display.cachedCharWidth;
-    var anchor = elt("span", "x");
-    var pre = elt("pre", [anchor]);
-    removeChildrenAndAdd(display.measure, pre);
-    var width = anchor.offsetWidth;
-    if (width > 2) display.cachedCharWidth = width;
-    return width || 10;
-  }
-
-  // OPERATIONS
-
-  // Operations are used to wrap changes in such a way that each
-  // change won't have to update the cursor and display (which would
-  // be awkward, slow, and error-prone), but instead updates are
-  // batched and then all combined and executed at once.
-
-  var nextOpId = 0;
-  function startOperation(cm) {
-    cm.curOp = {
-      // An array of ranges of lines that have to be updated. See
-      // updateDisplay.
-      changes: [],
-      forceUpdate: false,
-      updateInput: null,
-      userSelChange: null,
-      textChanged: null,
-      selectionChanged: false,
-      cursorActivity: false,
-      updateMaxLine: false,
-      updateScrollPos: false,
-      id: ++nextOpId
-    };
-    if (!delayedCallbackDepth++) delayedCallbacks = [];
-  }
-
-  function endOperation(cm) {
-    var op = cm.curOp, doc = cm.doc, display = cm.display;
-    cm.curOp = null;
-
-    if (op.updateMaxLine) computeMaxLength(cm);
-    if (display.maxLineChanged && !cm.options.lineWrapping && display.maxLine) {
-      var width = measureLineWidth(cm, display.maxLine);
-      display.sizer.style.minWidth = Math.max(0, width + 3 + scrollerCutOff) + "px";
-      display.maxLineChanged = false;
-      var maxScrollLeft = Math.max(0, display.sizer.offsetLeft + display.sizer.offsetWidth - display.scroller.clientWidth);
-      if (maxScrollLeft < doc.scrollLeft && !op.updateScrollPos)
-        setScrollLeft(cm, Math.min(display.scroller.scrollLeft, maxScrollLeft), true);
-    }
-    var newScrollPos, updated;
-    if (op.updateScrollPos) {
-      newScrollPos = op.updateScrollPos;
-    } else if (op.selectionChanged && display.scroller.clientHeight) { // don't rescroll if not visible
-      var coords = cursorCoords(cm, doc.sel.head);
-      newScrollPos = calculateScrollPos(cm, coords.left, coords.top, coords.left, coords.bottom);
-    }
-    if (op.changes.length || op.forceUpdate || newScrollPos && newScrollPos.scrollTop != null) {
-      updated = updateDisplay(cm, op.changes, newScrollPos && newScrollPos.scrollTop, op.forceUpdate);
-      if (cm.display.scroller.offsetHeight) cm.doc.scrollTop = cm.display.scroller.scrollTop;
-    }
-    if (!updated && op.selectionChanged) updateSelection(cm);
-    if (op.updateScrollPos) {
-      var top = Math.max(0, Math.min(display.scroller.scrollHeight - display.scroller.clientHeight, newScrollPos.scrollTop));
-      var left = Math.max(0, Math.min(display.scroller.scrollWidth - display.scroller.clientWidth, newScrollPos.scrollLeft));
-      display.scroller.scrollTop = display.scrollbarV.scrollTop = doc.scrollTop = top;
-      display.scroller.scrollLeft = display.scrollbarH.scrollLeft = doc.scrollLeft = left;
-      alignHorizontally(cm);
-      if (op.scrollToPos)
-        scrollPosIntoView(cm, clipPos(cm.doc, op.scrollToPos.from),
-                          clipPos(cm.doc, op.scrollToPos.to), op.scrollToPos.margin);
-    } else if (newScrollPos) {
-      scrollCursorIntoView(cm);
-    }
-    if (op.selectionChanged) restartBlink(cm);
-
-    if (cm.state.focused && op.updateInput)
-      resetInput(cm, op.userSelChange);
-
-    var hidden = op.maybeHiddenMarkers, unhidden = op.maybeUnhiddenMarkers;
-    if (hidden) for (var i = 0; i < hidden.length; ++i)
-      if (!hidden[i].lines.length) signal(hidden[i], "hide");
-    if (unhidden) for (var i = 0; i < unhidden.length; ++i)
-      if (unhidden[i].lines.length) signal(unhidden[i], "unhide");
-
-    var delayed;
-    if (!--delayedCallbackDepth) {
-      delayed = delayedCallbacks;
-      delayedCallbacks = null;
-    }
-    if (op.textChanged)
-      signal(cm, "change", cm, op.textChanged);
-    if (op.cursorActivity) signal(cm, "cursorActivity", cm);
-    if (delayed) for (var i = 0; i < delayed.length; ++i) delayed[i]();
-  }
-
-  // Wraps a function in an operation. Returns the wrapped function.
-  function operation(cm1, f) {
-    return function() {
-      var cm = cm1 || this, withOp = !cm.curOp;
-      if (withOp) startOperation(cm);
-      try { var result = f.apply(cm, arguments); }
-      finally { if (withOp) endOperation(cm); }
-      return result;
-    };
-  }
-  function docOperation(f) {
-    return function() {
-      var withOp = this.cm && !this.cm.curOp, result;
-      if (withOp) startOperation(this.cm);
-      try { result = f.apply(this, arguments); }
-      finally { if (withOp) endOperation(this.cm); }
-      return result;
-    };
-  }
-  function runInOp(cm, f) {
-    var withOp = !cm.curOp, result;
-    if (withOp) startOperation(cm);
-    try { result = f(); }
-    finally { if (withOp) endOperation(cm); }
-    return result;
-  }
-
-  function regChange(cm, from, to, lendiff) {
-    if (from == null) from = cm.doc.first;
-    if (to == null) to = cm.doc.first + cm.doc.size;
-    cm.curOp.changes.push({from: from, to: to, diff: lendiff});
-  }
-
-  // INPUT HANDLING
-
-  function slowPoll(cm) {
-    if (cm.display.pollingFast) return;
-    cm.display.poll.set(cm.options.pollInterval, function() {
-      readInput(cm);
-      if (cm.state.focused) slowPoll(cm);
-    });
-  }
-
-  function fastPoll(cm) {
-    var missed = false;
-    cm.display.pollingFast = true;
-    function p() {
-      var changed = readInput(cm);
-      if (!changed && !missed) {missed = true; cm.display.poll.set(60, p);}
-      else {cm.display.pollingFast = false; slowPoll(cm);}
-    }
-    cm.display.poll.set(20, p);
-  }
-
-  // prevInput is a hack to work with IME. If we reset the textarea
-  // on every change, that breaks IME. So we look for changes
-  // compared to the previous content instead. (Modern browsers have
-  // events that indicate IME taking place, but these are not widely
-  // supported or compatible enough yet to rely on.)
-  function readInput(cm) {
-    var input = cm.display.input, prevInput = cm.display.prevInput, doc = cm.doc, sel = doc.sel;
-    if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.state.disableInput) return false;
-    if (cm.state.pasteIncoming && cm.state.fakedLastChar) {
-      input.value = input.value.substring(0, input.value.length - 1);
-      cm.state.fakedLastChar = false;
-    }
-    var text = input.value;
-    if (text == prevInput && posEq(sel.from, sel.to)) return false;
-    if (ie && !ie_lt9 && cm.display.inputHasSelection === text) {
-      resetInput(cm, true);
-      return false;
-    }
-
-    var withOp = !cm.curOp;
-    if (withOp) startOperation(cm);
-    sel.shift = false;
-    var same = 0, l = Math.min(prevInput.length, text.length);
-    while (same < l && prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same;
-    var from = sel.from, to = sel.to;
-    var inserted = text.slice(same);
-    if (same < prevInput.length)
-      from = Pos(from.line, from.ch - (prevInput.length - same));
-    else if (cm.state.overwrite && posEq(from, to) && !cm.state.pasteIncoming)
-      to = Pos(to.line, Math.min(getLine(doc, to.line).text.length, to.ch + inserted.length));
-
-    var updateInput = cm.curOp.updateInput;
-    var changeEvent = {from: from, to: to, text: splitLines(inserted),
-                       origin: cm.state.pasteIncoming ? "paste" : "+input"};
-    makeChange(cm.doc, changeEvent, "end");
-    cm.curOp.updateInput = updateInput;
-    signalLater(cm, "inputRead", cm, changeEvent);
-    if (!cm.state.pasteIncoming && cm.options.electricChars &&
-        cm.options.smartIndent && sel.head.ch < 100) {
-      var electric = cm.getModeAt(sel.head).electricChars;
-      if (electric) for (var i = 0; i < electric.length; i++)
-        if (inserted.indexOf(electric.charAt(i)) > -1) {
-          indentLine(cm, sel.head.line, "smart");
-          break;
-        }
-    }
-
-    if (text.length > 1000 || text.indexOf("\n") > -1) input.value = cm.display.prevInput = "";
-    else cm.display.prevInput = text;
-    if (withOp) endOperation(cm);
-    cm.state.pasteIncoming = false;
-    return true;
-  }
-
-  function resetInput(cm, user) {
-    var minimal, selected, doc = cm.doc;
-    if (!posEq(doc.sel.from, doc.sel.to)) {
-      cm.display.prevInput = "";
-      minimal = hasCopyEvent &&
-        (doc.sel.to.line - doc.sel.from.line > 100 || (selected = cm.getSelection()).length > 1000);
-      var content = minimal ? "-" : selected || cm.getSelection();
-      cm.display.input.value = content;
-      if (cm.state.focused) selectInput(cm.display.input);
-      if (ie && !ie_lt9) cm.display.inputHasSelection = content;
-    } else if (user) {
-      cm.display.prevInput = cm.display.input.value = "";
-      if (ie && !ie_lt9) cm.display.inputHasSelection = null;
-    }
-    cm.display.inaccurateSelection = minimal;
-  }
-
-  function focusInput(cm) {
-    if (cm.options.readOnly != "nocursor" && (!mobile || document.activeElement != cm.display.input))
-      cm.display.input.focus();
-  }
-
-  function isReadOnly(cm) {
-    return cm.options.readOnly || cm.doc.cantEdit;
-  }
-
-  // EVENT HANDLERS
-
-  function registerEventHandlers(cm) {
-    var d = cm.display;
-    on(d.scroller, "mousedown", operation(cm, onMouseDown));
-    if (ie)
-      on(d.scroller, "dblclick", operation(cm, function(e) {
-        if (signalDOMEvent(cm, e)) return;
-        var pos = posFromMouse(cm, e);
-        if (!pos || clickInGutter(cm, e) || eventInWidget(cm.display, e)) return;
-        e_preventDefault(e);
-        var word = findWordAt(getLine(cm.doc, pos.line).text, pos);
-        extendSelection(cm.doc, word.from, word.to);
-      }));
-    else
-      on(d.scroller, "dblclick", function(e) { signalDOMEvent(cm, e) || e_preventDefault(e); });
-    on(d.lineSpace, "selectstart", function(e) {
-      if (!eventInWidget(d, e)) e_preventDefault(e);
-    });
-    // Gecko browsers fire contextmenu *after* opening the menu, at
-    // which point we can't mess with it anymore. Context menu is
-    // handled in onMouseDown for Gecko.
-    if (!captureMiddleClick) on(d.scroller, "contextmenu", function(e) {onContextMenu(cm, e);});
-
-    on(d.scroller, "scroll", function() {
-      if (d.scroller.clientHeight) {
-        setScrollTop(cm, d.scroller.scrollTop);
-        setScrollLeft(cm, d.scroller.scrollLeft, true);
-        signal(cm, "scroll", cm);
-      }
-    });
-    on(d.scrollbarV, "scroll", function() {
-      if (d.scroller.clientHeight) setScrollTop(cm, d.scrollbarV.scrollTop);
-    });
-    on(d.scrollbarH, "scroll", function() {
-      if (d.scroller.clientHeight) setScrollLeft(cm, d.scrollbarH.scrollLeft);
-    });
-
-    on(d.scroller, "mousewheel", function(e){onScrollWheel(cm, e);});
-    on(d.scroller, "DOMMouseScroll", function(e){onScrollWheel(cm, e);});
-
-    function reFocus() { if (cm.state.focused) setTimeout(bind(focusInput, cm), 0); }
-    on(d.scrollbarH, "mousedown", reFocus);
-    on(d.scrollbarV, "mousedown", reFocus);
-    // Prevent wrapper from ever scrolling
-    on(d.wrapper, "scroll", function() { d.wrapper.scrollTop = d.wrapper.scrollLeft = 0; });
-
-    var resizeTimer;
-    function onResize() {
-      if (resizeTimer == null) resizeTimer = setTimeout(function() {
-        resizeTimer = null;
-        // Might be a text scaling operation, clear size caches.
-        d.cachedCharWidth = d.cachedTextHeight = knownScrollbarWidth = null;
-        clearCaches(cm);
-        runInOp(cm, bind(regChange, cm));
-      }, 100);
-    }
-    on(window, "resize", onResize);
-    // Above handler holds on to the editor and its data structures.
-    // Here we poll to unregister it when the editor is no longer in
-    // the document, so that it can be garbage-collected.
-    function unregister() {
-      for (var p = d.wrapper.parentNode; p && p != document.body; p = p.parentNode) {}
-      if (p) setTimeout(unregister, 5000);
-      else off(window, "resize", onResize);
-    }
-    setTimeout(unregister, 5000);
-
-    on(d.input, "keyup", operation(cm, function(e) {
-      if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
-      if (e.keyCode == 16) cm.doc.sel.shift = false;
-    }));
-    on(d.input, "input", function() {
-      if (ie && !ie_lt9 && cm.display.inputHasSelection) cm.display.inputHasSelection = null;
-      fastPoll(cm);
-    });
-    on(d.input, "keydown", operation(cm, onKeyDown));
-    on(d.input, "keypress", operation(cm, onKeyPress));
-    on(d.input, "focus", bind(onFocus, cm));
-    on(d.input, "blur", bind(onBlur, cm));
-
-    function drag_(e) {
-      if (signalDOMEvent(cm, e) || cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))) return;
-      e_stop(e);
-    }
-    if (cm.options.dragDrop) {
-      on(d.scroller, "dragstart", function(e){onDragStart(cm, e);});
-      on(d.scroller, "dragenter", drag_);
-      on(d.scroller, "dragover", drag_);
-      on(d.scroller, "drop", operation(cm, onDrop));
-    }
-    on(d.scroller, "paste", function(e) {
-      if (eventInWidget(d, e)) return;
-      focusInput(cm);
-      fastPoll(cm);
-    });
-    on(d.input, "paste", function() {
-      // Workaround for webkit bug https://bugs.webkit.org/show_bug.cgi?id=90206
-      // Add a char to the end of textarea before paste occur so that
-      // selection doesn't span to the end of textarea.
-      if (webkit && !cm.state.fakedLastChar && !(new Date - cm.state.lastMiddleDown < 200)) {
-        var start = d.input.selectionStart, end = d.input.selectionEnd;
-        d.input.value += "$";
-        d.input.selectionStart = start;
-        d.input.selectionEnd = end;
-        cm.state.fakedLastChar = true;
-      }
-      cm.state.pasteIncoming = true;
-      fastPoll(cm);
-    });
-
-    function prepareCopy() {
-      if (d.inaccurateSelection) {
-        d.prevInput = "";
-        d.inaccurateSelection = false;
-        d.input.value = cm.getSelection();
-        selectInput(d.input);
-      }
-    }
-    on(d.input, "cut", prepareCopy);
-    on(d.input, "copy", prepareCopy);
-
-    // Needed to handle Tab key in KHTML
-    if (khtml) on(d.sizer, "mouseup", function() {
-        if (document.activeElement == d.input) d.input.blur();
-        focusInput(cm);
-    });
-  }
-
-  function eventInWidget(display, e) {
-    for (var n = e_target(e); n != display.wrapper; n = n.parentNode) {
-      if (!n || n.ignoreEvents || n.parentNode == display.sizer && n != display.mover) return true;
-    }
-  }
-
-  function posFromMouse(cm, e, liberal) {
-    var display = cm.display;
-    if (!liberal) {
-      var target = e_target(e);
-      if (target == display.scrollbarH || target == display.scrollbarH.firstChild ||
-          target == display.scrollbarV || target == display.scrollbarV.firstChild ||
-          target == display.scrollbarFiller || target == display.gutterFiller) return null;
-    }
-    var x, y, space = getRect(display.lineSpace);
-    // Fails unpredictably on IE[67] when mouse is dragged around quickly.
-    try { x = e.clientX; y = e.clientY; } catch (e) { return null; }
-    return coordsChar(cm, x - space.left, y - space.top);
-  }
-
-  var lastClick, lastDoubleClick;
-  function onMouseDown(e) {
-    if (signalDOMEvent(this, e)) return;
-    var cm = this, display = cm.display, doc = cm.doc, sel = doc.sel;
-    sel.shift = e.shiftKey;
-
-    if (eventInWidget(display, e)) {
-      if (!webkit) {
-        display.scroller.draggable = false;
-        setTimeout(function(){display.scroller.draggable = true;}, 100);
-      }
-      return;
-    }
-    if (clickInGutter(cm, e)) return;
-    var start = posFromMouse(cm, e);
-
-    switch (e_button(e)) {
-    case 3:
-      if (captureMiddleClick) onContextMenu.call(cm, cm, e);
-      return;
-    case 2:
-      if (webkit) cm.state.lastMiddleDown = +new Date;
-      if (start) extendSelection(cm.doc, start);
-      setTimeout(bind(focusInput, cm), 20);
-      e_preventDefault(e);
-      return;
-    }
-    // For button 1, if it was clicked inside the editor
-    // (posFromMouse returning non-null), we have to adjust the
-    // selection.
-    if (!start) {if (e_target(e) == display.scroller) e_preventDefault(e); return;}
-
-    if (!cm.state.focused) onFocus(cm);
-
-    var now = +new Date, type = "single";
-    if (lastDoubleClick && lastDoubleClick.time > now - 400 && posEq(lastDoubleClick.pos, start)) {
-      type = "triple";
-      e_preventDefault(e);
-      setTimeout(bind(focusInput, cm), 20);
-      selectLine(cm, start.line);
-    } else if (lastClick && lastClick.time > now - 400 && posEq(lastClick.pos, start)) {
-      type = "double";
-      lastDoubleClick = {time: now, pos: start};
-      e_preventDefault(e);
-      var word = findWordAt(getLine(doc, start.line).text, start);
-      extendSelection(cm.doc, word.from, word.to);
-    } else { lastClick = {time: now, pos: start}; }
-
-    var last = start;
-    if (cm.options.dragDrop && dragAndDrop && !isReadOnly(cm) && !posEq(sel.from, sel.to) &&
-        !posLess(start, sel.from) && !posLess(sel.to, start) && type == "single") {
-      var dragEnd = operation(cm, function(e2) {
-        if (webkit) display.scroller.draggable = false;
-        cm.state.draggingText = false;
-        off(document, "mouseup", dragEnd);
-        off(display.scroller, "drop", dragEnd);
-        if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {
-          e_preventDefault(e2);
-          extendSelection(cm.doc, start);
-          focusInput(cm);
-        }
-      });
-      // Let the drag handler handle this.
-      if (webkit) display.scroller.draggable = true;
-      cm.state.draggingText = dragEnd;
-      // IE's approach to draggable
-      if (display.scroller.dragDrop) display.scroller.dragDrop();
-      on(document, "mouseup", dragEnd);
-      on(display.scroller, "drop", dragEnd);
-      return;
-    }
-    e_preventDefault(e);
-    if (type == "single") extendSelection(cm.doc, clipPos(doc, start));
-
-    var startstart = sel.from, startend = sel.to, lastPos = start;
-
-    function doSelect(cur) {
-      if (posEq(lastPos, cur)) return;
-      lastPos = cur;
-
-      if (type == "single") {
-        extendSelection(cm.doc, clipPos(doc, start), cur);
-        return;
-      }
-
-      startstart = clipPos(doc, startstart);
-      startend = clipPos(doc, startend);
-      if (type == "double") {
-        var word = findWordAt(getLine(doc, cur.line).text, cur);
-        if (posLess(cur, startstart)) extendSelection(cm.doc, word.from, startend);
-        else extendSelection(cm.doc, startstart, word.to);
-      } else if (type == "triple") {
-        if (posLess(cur, startstart)) extendSelection(cm.doc, startend, clipPos(doc, Pos(cur.line, 0)));
-        else extendSelection(cm.doc, startstart, clipPos(doc, Pos(cur.line + 1, 0)));
-      }
-    }
-
-    var editorSize = getRect(display.wrapper);
-    // Used to ensure timeout re-tries don't fire when another extend
-    // happened in the meantime (clearTimeout isn't reliable -- at
-    // least on Chrome, the timeouts still happen even when cleared,
-    // if the clear happens after their scheduled firing time).
-    var counter = 0;
-
-    function extend(e) {
-      var curCount = ++counter;
-      var cur = posFromMouse(cm, e, true);
-      if (!cur) return;
-      if (!posEq(cur, last)) {
-        if (!cm.state.focused) onFocus(cm);
-        last = cur;
-        doSelect(cur);
-        var visible = visibleLines(display, doc);
-        if (cur.line >= visible.to || cur.line < visible.from)
-          setTimeout(operation(cm, function(){if (counter == curCount) extend(e);}), 150);
-      } else {
-        var outside = e.clientY < editorSize.top ? -20 : e.clientY > editorSize.bottom ? 20 : 0;
-        if (outside) setTimeout(operation(cm, function() {
-          if (counter != curCount) return;
-          display.scroller.scrollTop += outside;
-          extend(e);
-        }), 50);
-      }
-    }
-
-    function done(e) {
-      counter = Infinity;
-      e_preventDefault(e);
-      focusInput(cm);
-      off(document, "mousemove", move);
-      off(document, "mouseup", up);
-    }
-
-    var move = operation(cm, function(e) {
-      if (!ie && !e_button(e)) done(e);
-      else extend(e);
-    });
-    var up = operation(cm, done);
-    on(document, "mousemove", move);
-    on(document, "mouseup", up);
-  }
-
-  function gutterEvent(cm, e, type, prevent, signalfn) {
-    try { var mX = e.clientX, mY = e.clientY; }
-    catch(e) { return false; }
-    if (mX >= Math.floor(getRect(cm.display.gutters).right)) return false;
-    if (prevent) e_preventDefault(e);
-
-    var display = cm.display;
-    var lineBox = getRect(display.lineDiv);
-
-    if (mY > lineBox.bottom || !hasHandler(cm, type)) return e_defaultPrevented(e);
-    mY -= lineBox.top - display.viewOffset;
-
-    for (var i = 0; i < cm.options.gutters.length; ++i) {
-      var g = display.gutters.childNodes[i];
-      if (g && getRect(g).right >= mX) {
-        var line = lineAtHeight(cm.doc, mY);
-        var gutter = cm.options.gutters[i];
-        signalfn(cm, type, cm, line, gutter, e);
-        return e_defaultPrevented(e);
-      }
-    }
-  }
-
-  function contextMenuInGutter(cm, e) {
-    if (!hasHandler(cm, "gutterContextMenu")) return false;
-    return gutterEvent(cm, e, "gutterContextMenu", false, signal);
-  }
-
-  function clickInGutter(cm, e) {
-    return gutterEvent(cm, e, "gutterClick", true, signalLater);
-  }
-
-  // Kludge to work around strange IE behavior where it'll sometimes
-  // re-fire a series of drag-related events right after the drop (#1551)
-  var lastDrop = 0;
-
-  function onDrop(e) {
-    var cm = this;
-    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e) || (cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))))
-      return;
-    e_preventDefault(e);
-    if (ie) lastDrop = +new Date;
-    var pos = posFromMouse(cm, e, true), files = e.dataTransfer.files;
-    if (!pos || isReadOnly(cm)) return;
-    if (files && files.length && window.FileReader && window.File) {
-      var n = files.length, text = Array(n), read = 0;
-      var loadFile = function(file, i) {
-        var reader = new FileReader;
-        reader.onload = function() {
-          text[i] = reader.result;
-          if (++read == n) {
-            pos = clipPos(cm.doc, pos);
-            makeChange(cm.doc, {from: pos, to: pos, text: splitLines(text.join("\n")), origin: "paste"}, "around");
-          }
-        };
-        reader.readAsText(file);
-      };
-      for (var i = 0; i < n; ++i) loadFile(files[i], i);
-    } else {
-      // Don't do a replace if the drop happened inside of the selected text.
-      if (cm.state.draggingText && !(posLess(pos, cm.doc.sel.from) || posLess(cm.doc.sel.to, pos))) {
-        cm.state.draggingText(e);
-        // Ensure the editor is re-focused
-        setTimeout(bind(focusInput, cm), 20);
-        return;
-      }
-      try {
-        var text = e.dataTransfer.getData("Text");
-        if (text) {
-          var curFrom = cm.doc.sel.from, curTo = cm.doc.sel.to;
-          setSelection(cm.doc, pos, pos);
-          if (cm.state.draggingText) replaceRange(cm.doc, "", curFrom, curTo, "paste");
-          cm.replaceSelection(text, null, "paste");
-          focusInput(cm);
-        }
-      }
-      catch(e){}
-    }
-  }
-
-  function onDragStart(cm, e) {
-    if (ie && (!cm.state.draggingText || +new Date - lastDrop < 100)) { e_stop(e); return; }
-    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e)) return;
-
-    var txt = cm.getSelection();
-    e.dataTransfer.setData("Text", txt);
-
-    // Use dummy image instead of default browsers image.
-    // Recent Safari (~6.0.2) have a tendency to segfault when this happens, so we don't do it there.
-    if (e.dataTransfer.setDragImage && !safari) {
-      var img = elt("img", null, null, "position: fixed; left: 0; top: 0;");
-      img.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-      if (opera) {
-        img.width = img.height = 1;
-        cm.display.wrapper.appendChild(img);
-        // Force a relayout, or Opera won't use our image for some obscure reason
-        img._top = img.offsetTop;
-      }
-      e.dataTransfer.setDragImage(img, 0, 0);
-      if (opera) img.parentNode.removeChild(img);
-    }
-  }
-
-  function setScrollTop(cm, val) {
-    if (Math.abs(cm.doc.scrollTop - val) < 2) return;
-    cm.doc.scrollTop = val;
-    if (!gecko) updateDisplay(cm, [], val);
-    if (cm.display.scroller.scrollTop != val) cm.display.scroller.scrollTop = val;
-    if (cm.display.scrollbarV.scrollTop != val) cm.display.scrollbarV.scrollTop = val;
-    if (gecko) updateDisplay(cm, []);
-    startWorker(cm, 100);
-  }
-  function setScrollLeft(cm, val, isScroller) {
-    if (isScroller ? val == cm.doc.scrollLeft : Math.abs(cm.doc.scrollLeft - val) < 2) return;
-    val = Math.min(val, cm.display.scroller.scrollWidth - cm.display.scroller.clientWidth);
-    cm.doc.scrollLeft = val;
-    alignHorizontally(cm);
-    if (cm.display.scroller.scrollLeft != val) cm.display.scroller.scrollLeft = val;
-    if (cm.display.scrollbarH.scrollLeft != val) cm.display.scrollbarH.scrollLeft = val;
-  }
-
-  // Since the delta values reported on mouse wheel events are
-  // unstandardized between browsers and even browser versions, and
-  // generally horribly unpredictable, this code starts by measuring
-  // the scroll effect that the first few mouse wheel events have,
-  // and, from that, detects the way it can convert deltas to pixel
-  // offsets afterwards.
-  //
-  // The reason we want to know the amount a wheel event will scroll
-  // is that it gives us a chance to update the display before the
-  // actual scrolling happens, reducing flickering.
-
-  var wheelSamples = 0, wheelPixelsPerUnit = null;
-  // Fill in a browser-detected starting value on browsers where we
-  // know one. These don't have to be accurate -- the result of them
-  // being wrong would just be a slight flicker on the first wheel
-  // scroll (if it is large enough).
-  if (ie) wheelPixelsPerUnit = -.53;
-  else if (gecko) wheelPixelsPerUnit = 15;
-  else if (chrome) wheelPixelsPerUnit = -.7;
-  else if (safari) wheelPixelsPerUnit = -1/3;
-
-  function onScrollWheel(cm, e) {
-    var dx = e.wheelDeltaX, dy = e.wheelDeltaY;
-    if (dx == null && e.detail && e.axis == e.HORIZONTAL_AXIS) dx = e.detail;
-    if (dy == null && e.detail && e.axis == e.VERTICAL_AXIS) dy = e.detail;
-    else if (dy == null) dy = e.wheelDelta;
-
-    var display = cm.display, scroll = display.scroller;
-    // Quit if there's nothing to scroll here
-    if (!(dx && scroll.scrollWidth > scroll.clientWidth ||
-          dy && scroll.scrollHeight > scroll.clientHeight)) return;
-
-    // Webkit browsers on OS X abort momentum scrolls when the target
-    // of the scroll event is removed from the scrollable element.
-    // This hack (see related code in patchDisplay) makes sure the
-    // element is kept around.
-    if (dy && mac && webkit) {
-      for (var cur = e.target; cur != scroll; cur = cur.parentNode) {
-        if (cur.lineObj) {
-          cm.display.currentWheelTarget = cur;
-          break;
-        }
-      }
-    }
-
-    // On some browsers, horizontal scrolling will cause redraws to
-    // happen before the gutter has been realigned, causing it to
-    // wriggle around in a most unseemly way. When we have an
-    // estimated pixels/delta value, we just handle horizontal
-    // scrolling entirely here. It'll be slightly off from native, but
-    // better than glitching out.
-    if (dx && !gecko && !opera && wheelPixelsPerUnit != null) {
-      if (dy)
-        setScrollTop(cm, Math.max(0, Math.min(scroll.scrollTop + dy * wheelPixelsPerUnit, scroll.scrollHeight - scroll.clientHeight)));
-      setScrollLeft(cm, Math.max(0, Math.min(scroll.scrollLeft + dx * wheelPixelsPerUnit, scroll.scrollWidth - scroll.clientWidth)));
-      e_preventDefault(e);
-      display.wheelStartX = null; // Abort measurement, if in progress
-      return;
-    }
-
-    if (dy && wheelPixelsPerUnit != null) {
-      var pixels = dy * wheelPixelsPerUnit;
-      var top = cm.doc.scrollTop, bot = top + display.wrapper.clientHeight;
-      if (pixels < 0) top = Math.max(0, top + pixels - 50);
-      else bot = Math.min(cm.doc.height, bot + pixels + 50);
-      updateDisplay(cm, [], {top: top, bottom: bot});
-    }
-
-    if (wheelSamples < 20) {
-      if (display.wheelStartX == null) {
-        display.wheelStartX = scroll.scrollLeft; display.wheelStartY = scroll.scrollTop;
-        display.wheelDX = dx; display.wheelDY = dy;
-        setTimeout(function() {
-          if (display.wheelStartX == null) return;
-          var movedX = scroll.scrollLeft - display.wheelStartX;
-          var movedY = scroll.scrollTop - display.wheelStartY;
-          var sample = (movedY && display.wheelDY && movedY / display.wheelDY) ||
-            (movedX && display.wheelDX && movedX / display.wheelDX);
-          display.wheelStartX = display.wheelStartY = null;
-          if (!sample) return;
-          wheelPixelsPerUnit = (wheelPixelsPerUnit * wheelSamples + sample) / (wheelSamples + 1);
-          ++wheelSamples;
-        }, 200);
-      } else {
-        display.wheelDX += dx; display.wheelDY += dy;
-      }
-    }
-  }
-
-  function doHandleBinding(cm, bound, dropShift) {
-    if (typeof bound == "string") {
-      bound = commands[bound];
-      if (!bound) return false;
-    }
-    // Ensure previous input has been read, so that the handler sees a
-    // consistent view of the document
-    if (cm.display.pollingFast && readInput(cm)) cm.display.pollingFast = false;
-    var doc = cm.doc, prevShift = doc.sel.shift, done = false;
-    try {
-      if (isReadOnly(cm)) cm.state.suppressEdits = true;
-      if (dropShift) doc.sel.shift = false;
-      done = bound(cm) != Pass;
-    } finally {
-      doc.sel.shift = prevShift;
-      cm.state.suppressEdits = false;
-    }
-    return done;
-  }
-
-  function allKeyMaps(cm) {
-    var maps = cm.state.keyMaps.slice(0);
-    if (cm.options.extraKeys) maps.push(cm.options.extraKeys);
-    maps.push(cm.options.keyMap);
-    return maps;
-  }
-
-  var maybeTransition;
-  function handleKeyBinding(cm, e) {
-    // Handle auto keymap transitions
-    var startMap = getKeyMap(cm.options.keyMap), next = startMap.auto;
-    clearTimeout(maybeTransition);
-    if (next && !isModifierKey(e)) maybeTransition = setTimeout(function() {
-      if (getKeyMap(cm.options.keyMap) == startMap) {
-        cm.options.keyMap = (next.call ? next.call(null, cm) : next);
-        keyMapChanged(cm);
-      }
-    }, 50);
-
-    var name = keyName(e, true), handled = false;
-    if (!name) return false;
-    var keymaps = allKeyMaps(cm);
-
-    if (e.shiftKey) {
-      // First try to resolve full name (including 'Shift-'). Failing
-      // that, see if there is a cursor-motion command (starting with
-      // 'go') bound to the keyname without 'Shift-'.
-      handled = lookupKey("Shift-" + name, keymaps, function(b) {return doHandleBinding(cm, b, true);})
-             || lookupKey(name, keymaps, function(b) {
-                  if (typeof b == "string" ? /^go[A-Z]/.test(b) : b.motion)
-                    return doHandleBinding(cm, b);
-                });
-    } else {
-      handled = lookupKey(name, keymaps, function(b) { return doHandleBinding(cm, b); });
-    }
-
-    if (handled) {
-      e_preventDefault(e);
-      restartBlink(cm);
-      if (ie_lt9) { e.oldKeyCode = e.keyCode; e.keyCode = 0; }
-      signalLater(cm, "keyHandled", cm, name, e);
-    }
-    return handled;
-  }
-
-  function handleCharBinding(cm, e, ch) {
-    var handled = lookupKey("'" + ch + "'", allKeyMaps(cm),
-                            function(b) { return doHandleBinding(cm, b, true); });
-    if (handled) {
-      e_preventDefault(e);
-      restartBlink(cm);
-      signalLater(cm, "keyHandled", cm, "'" + ch + "'", e);
-    }
-    return handled;
-  }
-
-  var lastStoppedKey = null;
-  function onKeyDown(e) {
-    var cm = this;
-    if (!cm.state.focused) onFocus(cm);
-    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
-    if (ie && e.keyCode == 27) e.returnValue = false;
-    var code = e.keyCode;
-    // IE does strange things with escape.
-    cm.doc.sel.shift = code == 16 || e.shiftKey;
-    // First give onKeyEvent option a chance to handle this.
-    var handled = handleKeyBinding(cm, e);
-    if (opera) {
-      lastStoppedKey = handled ? code : null;
-      // Opera has no cut event... we try to at least catch the key combo
-      if (!handled && code == 88 && !hasCopyEvent && (mac ? e.metaKey : e.ctrlKey))
-        cm.replaceSelection("");
-    }
-  }
-
-  function onKeyPress(e) {
-    var cm = this;
-    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
-    var keyCode = e.keyCode, charCode = e.charCode;
-    if (opera && keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return;}
-    if (((opera && (!e.which || e.which < 10)) || khtml) && handleKeyBinding(cm, e)) return;
-    var ch = String.fromCharCode(charCode == null ? keyCode : charCode);
-    if (handleCharBinding(cm, e, ch)) return;
-    if (ie && !ie_lt9) cm.display.inputHasSelection = null;
-    fastPoll(cm);
-  }
-
-  function onFocus(cm) {
-    if (cm.options.readOnly == "nocursor") return;
-    if (!cm.state.focused) {
-      signal(cm, "focus", cm);
-      cm.state.focused = true;
-      if (cm.display.wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
-        cm.display.wrapper.className += " CodeMirror-focused";
-      if (!cm.curOp) {
-        resetInput(cm, true);
-        if (webkit) setTimeout(bind(resetInput, cm, true), 0); // Issue #1730
-      }
-    }
-    slowPoll(cm);
-    restartBlink(cm);
-  }
-  function onBlur(cm) {
-    if (cm.state.focused) {
-      signal(cm, "blur", cm);
-      cm.state.focused = false;
-      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-focused", "");
-    }
-    clearInterval(cm.display.blinker);
-    setTimeout(function() {if (!cm.state.focused) cm.doc.sel.shift = false;}, 150);
-  }
-
-  var detectingSelectAll;
-  function onContextMenu(cm, e) {
-    if (signalDOMEvent(cm, e, "contextmenu")) return;
-    var display = cm.display, sel = cm.doc.sel;
-    if (eventInWidget(display, e) || contextMenuInGutter(cm, e)) return;
-
-    var pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop;
-    if (!pos || opera) return; // Opera is difficult.
-
-    // Reset the current text selection only if the click is done outside of the selection
-    // and 'resetSelectionOnContextMenu' option is true.
-    var reset = cm.options.resetSelectionOnContextMenu;
-    if (reset && (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to)))
-      operation(cm, setSelection)(cm.doc, pos, pos);
-
-    var oldCSS = display.input.style.cssText;
-    display.inputDiv.style.position = "absolute";
-    display.input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.clientY - 5) +
-      "px; left: " + (e.clientX - 5) + "px; z-index: 1000; background: transparent; outline: none;" +
-      "border-width: 0; outline: none; overflow: hidden; opacity: .05; -ms-opacity: .05; filter: alpha(opacity=5);";
-    focusInput(cm);
-    resetInput(cm, true);
-    // Adds "Select all" to context menu in FF
-    if (posEq(sel.from, sel.to)) display.input.value = display.prevInput = " ";
-
-    function prepareSelectAllHack() {
-      if (display.input.selectionStart != null) {
-        var extval = display.input.value = "\u200b" + (posEq(sel.from, sel.to) ? "" : display.input.value);
-        display.prevInput = "\u200b";
-        display.input.selectionStart = 1; display.input.selectionEnd = extval.length;
-      }
-    }
-    function rehide() {
-      display.inputDiv.style.position = "relative";
-      display.input.style.cssText = oldCSS;
-      if (ie_lt9) display.scrollbarV.scrollTop = display.scroller.scrollTop = scrollPos;
-      slowPoll(cm);
-
-      // Try to detect the user choosing select-all
-      if (display.input.selectionStart != null) {
-        if (!ie || ie_lt9) prepareSelectAllHack();
-        clearTimeout(detectingSelectAll);
-        var i = 0, poll = function(){
-          if (display.prevInput == "\u200b" && display.input.selectionStart == 0)
-            operation(cm, commands.selectAll)(cm);
-          else if (i++ < 10) detectingSelectAll = setTimeout(poll, 500);
-          else resetInput(cm);
-        };
-        detectingSelectAll = setTimeout(poll, 200);
-      }
-    }
-
-    if (ie && !ie_lt9) prepareSelectAllHack();
-    if (captureMiddleClick) {
-      e_stop(e);
-      var mouseup = function() {
-        off(window, "mouseup", mouseup);
-        setTimeout(rehide, 20);
-      };
-      on(window, "mouseup", mouseup);
-    } else {
-      setTimeout(rehide, 50);
-    }
-  }
-
-  // UPDATING
-
-  var changeEnd = CodeMirror.changeEnd = function(change) {
-    if (!change.text) return change.to;
-    return Pos(change.from.line + change.text.length - 1,
-               lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0));
-  };
-
-  // Make sure a position will be valid after the given change.
-  function clipPostChange(doc, change, pos) {
-    if (!posLess(change.from, pos)) return clipPos(doc, pos);
-    var diff = (change.text.length - 1) - (change.to.line - change.from.line);
-    if (pos.line > change.to.line + diff) {
-      var preLine = pos.line - diff, lastLine = doc.first + doc.size - 1;
-      if (preLine > lastLine) return Pos(lastLine, getLine(doc, lastLine).text.length);
-      return clipToLen(pos, getLine(doc, preLine).text.length);
-    }
-    if (pos.line == change.to.line + diff)
-      return clipToLen(pos, lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0) +
-                       getLine(doc, change.to.line).text.length - change.to.ch);
-    var inside = pos.line - change.from.line;
-    return clipToLen(pos, change.text[inside].length + (inside ? 0 : change.from.ch));
-  }
-
-  // Hint can be null|"end"|"start"|"around"|{anchor,head}
-  function computeSelAfterChange(doc, change, hint) {
-    if (hint && typeof hint == "object") // Assumed to be {anchor, head} object
-      return {anchor: clipPostChange(doc, change, hint.anchor),
-              head: clipPostChange(doc, change, hint.head)};
-
-    if (hint == "start") return {anchor: change.from, head: change.from};
-
-    var end = changeEnd(change);
-    if (hint == "around") return {anchor: change.from, head: end};
-    if (hint == "end") return {anchor: end, head: end};
-
-    // hint is null, leave the selection alone as much as possible
-    var adjustPos = function(pos) {
-      if (posLess(pos, change.from)) return pos;
-      if (!posLess(change.to, pos)) return end;
-
-      var line = pos.line + change.text.length - (change.to.line - change.from.line) - 1, ch = pos.ch;
-      if (pos.line == change.to.line) ch += end.ch - change.to.ch;
-      return Pos(line, ch);
-    };
-    return {anchor: adjustPos(doc.sel.anchor), head: adjustPos(doc.sel.head)};
-  }
-
-  function filterChange(doc, change, update) {
-    var obj = {
-      canceled: false,
-      from: change.from,
-      to: change.to,
-      text: change.text,
-      origin: change.origin,
-      cancel: function() { this.canceled = true; }
-    };
-    if (update) obj.update = function(from, to, text, origin) {
-      if (from) this.from = clipPos(doc, from);
-      if (to) this.to = clipPos(doc, to);
-      if (text) this.text = text;
-      if (origin !== undefined) this.origin = origin;
-    };
-    signal(doc, "beforeChange", doc, obj);
-    if (doc.cm) signal(doc.cm, "beforeChange", doc.cm, obj);
-
-    if (obj.canceled) return null;
-    return {from: obj.from, to: obj.to, text: obj.text, origin: obj.origin};
-  }
-
-  // Replace the range from from to to by the strings in replacement.
-  // change is a {from, to, text [, origin]} object
-  function makeChange(doc, change, selUpdate, ignoreReadOnly) {
-    if (doc.cm) {
-      if (!doc.cm.curOp) return operation(doc.cm, makeChange)(doc, change, selUpdate, ignoreReadOnly);
-      if (doc.cm.state.suppressEdits) return;
-    }
-
-    if (hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange")) {
-      change = filterChange(doc, change, true);
-      if (!change) return;
-    }
-
-    // Possibly split or suppress the update based on the presence
-    // of read-only spans in its range.
-    var split = sawReadOnlySpans && !ignoreReadOnly && removeReadOnlyRanges(doc, change.from, change.to);
-    if (split) {
-      for (var i = split.length - 1; i >= 1; --i)
-        makeChangeNoReadonly(doc, {from: split[i].from, to: split[i].to, text: [""]});
-      if (split.length)
-        makeChangeNoReadonly(doc, {from: split[0].from, to: split[0].to, text: change.text}, selUpdate);
-    } else {
-      makeChangeNoReadonly(doc, change, selUpdate);
-    }
-  }
-
-  function makeChangeNoReadonly(doc, change, selUpdate) {
-    if (change.text.length == 1 && change.text[0] == "" && posEq(change.from, change.to)) return;
-    var selAfter = computeSelAfterChange(doc, change, selUpdate);
-    addToHistory(doc, change, selAfter, doc.cm ? doc.cm.curOp.id : NaN);
-
-    makeChangeSingleDoc(doc, change, selAfter, stretchSpansOverChange(doc, change));
-    var rebased = [];
-
-    linkedDocs(doc, function(doc, sharedHist) {
-      if (!sharedHist && indexOf(rebased, doc.history) == -1) {
-        rebaseHist(doc.history, change);
-        rebased.push(doc.history);
-      }
-      makeChangeSingleDoc(doc, change, null, stretchSpansOverChange(doc, change));
-    });
-  }
-
-  function makeChangeFromHistory(doc, type) {
-    if (doc.cm && doc.cm.state.suppressEdits) return;
-
-    var hist = doc.history;
-    var event = (type == "undo" ? hist.done : hist.undone).pop();
-    if (!event) return;
-
-    var anti = {changes: [], anchorBefore: event.anchorAfter, headBefore: event.headAfter,
-                anchorAfter: event.anchorBefore, headAfter: event.headBefore,
-                generation: hist.generation};
-    (type == "undo" ? hist.undone : hist.done).push(anti);
-    hist.generation = event.generation || ++hist.maxGeneration;
-
-    var filter = hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange");
-
-    for (var i = event.changes.length - 1; i >= 0; --i) {
-      var change = event.changes[i];
-      change.origin = type;
-      if (filter && !filterChange(doc, change, false)) {
-        (type == "undo" ? hist.done : hist.undone).length = 0;
-        return;
-      }
-
-      anti.changes.push(historyChangeFromChange(doc, change));
-
-      var after = i ? computeSelAfterChange(doc, change, null)
-                    : {anchor: event.anchorBefore, head: event.headBefore};
-      makeChangeSingleDoc(doc, change, after, mergeOldSpans(doc, change));
-      var rebased = [];
-
-      linkedDocs(doc, function(doc, sharedHist) {
-        if (!sharedHist && indexOf(rebased, doc.history) == -1) {
-          rebaseHist(doc.history, change);
-          rebased.push(doc.history);
-        }
-        makeChangeSingleDoc(doc, change, null, mergeOldSpans(doc, change));
-      });
-    }
-  }
-
-  function shiftDoc(doc, distance) {
-    function shiftPos(pos) {return Pos(pos.line + distance, pos.ch);}
-    doc.first += distance;
-    if (doc.cm) regChange(doc.cm, doc.first, doc.first, distance);
-    doc.sel.head = shiftPos(doc.sel.head); doc.sel.anchor = shiftPos(doc.sel.anchor);
-    doc.sel.from = shiftPos(doc.sel.from); doc.sel.to = shiftPos(doc.sel.to);
-  }
-
-  function makeChangeSingleDoc(doc, change, selAfter, spans) {
-    if (doc.cm && !doc.cm.curOp)
-      return operation(doc.cm, makeChangeSingleDoc)(doc, change, selAfter, spans);
-
-    if (change.to.line < doc.first) {
-      shiftDoc(doc, change.text.length - 1 - (change.to.line - change.from.line));
-      return;
-    }
-    if (change.from.line > doc.lastLine()) return;
-
-    // Clip the change to the size of this doc
-    if (change.from.line < doc.first) {
-      var shift = change.text.length - 1 - (doc.first - change.from.line);
-      shiftDoc(doc, shift);
-      change = {from: Pos(doc.first, 0), to: Pos(change.to.line + shift, change.to.ch),
-                text: [lst(change.text)], origin: change.origin};
-    }
-    var last = doc.lastLine();
-    if (change.to.line > last) {
-      change = {from: change.from, to: Pos(last, getLine(doc, last).text.length),
-                text: [change.text[0]], origin: change.origin};
-    }
-
-    change.removed = getBetween(doc, change.from, change.to);
-
-    if (!selAfter) selAfter = computeSelAfterChange(doc, change, null);
-    if (doc.cm) makeChangeSingleDocInEditor(doc.cm, change, spans, selAfter);
-    else updateDoc(doc, change, spans, selAfter);
-  }
-
-  function makeChangeSingleDocInEditor(cm, change, spans, selAfter) {
-    var doc = cm.doc, display = cm.display, from = change.from, to = change.to;
-
-    var recomputeMaxLength = false, checkWidthStart = from.line;
-    if (!cm.options.lineWrapping) {
-      checkWidthStart = lineNo(visualLine(doc, getLine(doc, from.line)));
-      doc.iter(checkWidthStart, to.line + 1, function(line) {
-        if (line == display.maxLine) {
-          recomputeMaxLength = true;
-          return true;
-        }
-      });
-    }
-
-    if (!posLess(doc.sel.head, change.from) && !posLess(change.to, doc.sel.head))
-      cm.curOp.cursorActivity = true;
-
-    updateDoc(doc, change, spans, selAfter, estimateHeight(cm));
-
-    if (!cm.options.lineWrapping) {
-      doc.iter(checkWidthStart, from.line + change.text.length, function(line) {
-        var len = lineLength(doc, line);
-        if (len > display.maxLineLength) {
-          display.maxLine = line;
-          display.maxLineLength = len;
-          display.maxLineChanged = true;
-          recomputeMaxLength = false;
-        }
-      });
-      if (recomputeMaxLength) cm.curOp.updateMaxLine = true;
-    }
-
-    // Adjust frontier, schedule worker
-    doc.frontier = Math.min(doc.frontier, from.line);
-    startWorker(cm, 400);
-
-    var lendiff = change.text.length - (to.line - from.line) - 1;
-    // Remember that these lines changed, for updating the display
-    regChange(cm, from.line, to.line + 1, lendiff);
-
-    if (hasHandler(cm, "change")) {
-      var changeObj = {from: from, to: to,
-                       text: change.text,
-                       removed: change.removed,
-                       origin: change.origin};
-      if (cm.curOp.textChanged) {
-        for (var cur = cm.curOp.textChanged; cur.next; cur = cur.next) {}
-        cur.next = changeObj;
-      } else cm.curOp.textChanged = changeObj;
-    }
-  }
-
-  function replaceRange(doc, code, from, to, origin) {
-    if (!to) to = from;
-    if (posLess(to, from)) { var tmp = to; to = from; from = tmp; }
-    if (typeof code == "string") code = splitLines(code);
-    makeChange(doc, {from: from, to: to, text: code, origin: origin}, null);
-  }
-
-  // POSITION OBJECT
-
-  function Pos(line, ch) {
-    if (!(this instanceof Pos)) return new Pos(line, ch);
-    this.line = line; this.ch = ch;
-  }
-  CodeMirror.Pos = Pos;
-
-  function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
-  function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
-  function cmp(a, b) {return a.line - b.line || a.ch - b.ch;}
-  function copyPos(x) {return Pos(x.line, x.ch);}
-
-  // SELECTION
-
-  function clipLine(doc, n) {return Math.max(doc.first, Math.min(n, doc.first + doc.size - 1));}
-  function clipPos(doc, pos) {
-    if (pos.line < doc.first) return Pos(doc.first, 0);
-    var last = doc.first + doc.size - 1;
-    if (pos.line > last) return Pos(last, getLine(doc, last).text.length);
-    return clipToLen(pos, getLine(doc, pos.line).text.length);
-  }
-  function clipToLen(pos, linelen) {
-    var ch = pos.ch;
-    if (ch == null || ch > linelen) return Pos(pos.line, linelen);
-    else if (ch < 0) return Pos(pos.line, 0);
-    else return pos;
-  }
-  function isLine(doc, l) {return l >= doc.first && l < doc.first + doc.size;}
-
-  // If shift is held, this will move the selection anchor. Otherwise,
-  // it'll set the whole selection.
-  function extendSelection(doc, pos, other, bias) {
-    if (doc.sel.shift || doc.sel.extend) {
-      var anchor = doc.sel.anchor;
-      if (other) {
-        var posBefore = posLess(pos, anchor);
-        if (posBefore != posLess(other, anchor)) {
-          anchor = pos;
-          pos = other;
-        } else if (posBefore != posLess(pos, other)) {
-          pos = other;
-        }
-      }
-      setSelection(doc, anchor, pos, bias);
-    } else {
-      setSelection(doc, pos, other || pos, bias);
-    }
-    if (doc.cm) doc.cm.curOp.userSelChange = true;
-  }
-
-  function filterSelectionChange(doc, anchor, head) {
-    var obj = {anchor: anchor, head: head};
-    signal(doc, "beforeSelectionChange", doc, obj);
-    if (doc.cm) signal(doc.cm, "beforeSelectionChange", doc.cm, obj);
-    obj.anchor = clipPos(doc, obj.anchor); obj.head = clipPos(doc, obj.head);
-    return obj;
-  }
-
-  // Update the selection. Last two args are only used by
-  // updateDoc, since they have to be expressed in the line
-  // numbers before the update.
-  function setSelection(doc, anchor, head, bias, checkAtomic) {
-    if (!checkAtomic && hasHandler(doc, "beforeSelectionChange") || doc.cm && hasHandler(doc.cm, "beforeSelectionChange")) {
-      var filtered = filterSelectionChange(doc, anchor, head);
-      head = filtered.head;
-      anchor = filtered.anchor;
-    }
-
-    var sel = doc.sel;
-    sel.goalColumn = null;
-    if (bias == null) bias = posLess(head, sel.head) ? -1 : 1;
-    // Skip over atomic spans.
-    if (checkAtomic || !posEq(anchor, sel.anchor))
-      anchor = skipAtomic(doc, anchor, bias, checkAtomic != "push");
-    if (checkAtomic || !posEq(head, sel.head))
-      head = skipAtomic(doc, head, bias, checkAtomic != "push");
-
-    if (posEq(sel.anchor, anchor) && posEq(sel.head, head)) return;
-
-    sel.anchor = anchor; sel.head = head;
-    var inv = posLess(head, anchor);
-    sel.from = inv ? head : anchor;
-    sel.to = inv ? anchor : head;
-
-    if (doc.cm)
-      doc.cm.curOp.updateInput = doc.cm.curOp.selectionChanged =
-        doc.cm.curOp.cursorActivity = true;
-
-    signalLater(doc, "cursorActivity", doc);
-  }
-
-  function reCheckSelection(cm) {
-    setSelection(cm.doc, cm.doc.sel.from, cm.doc.sel.to, null, "push");
-  }
-
-  function skipAtomic(doc, pos, bias, mayClear) {
-    var flipped = false, curPos = pos;
-    var dir = bias || 1;
-    doc.cantEdit = false;
-    search: for (;;) {
-      var line = getLine(doc, curPos.line);
-      if (line.markedSpans) {
-        for (var i = 0; i < line.markedSpans.length; ++i) {
-          var sp = line.markedSpans[i], m = sp.marker;
-          if ((sp.from == null || (m.inclusiveLeft ? sp.from <= curPos.ch : sp.from < curPos.ch)) &&
-              (sp.to == null || (m.inclusiveRight ? sp.to >= curPos.ch : sp.to > curPos.ch))) {
-            if (mayClear) {
-              signal(m, "beforeCursorEnter");
-              if (m.explicitlyCleared) {
-                if (!line.markedSpans) break;
-                else {--i; continue;}
-              }
-            }
-            if (!m.atomic) continue;
-            var newPos = m.find()[dir < 0 ? "from" : "to"];
-            if (posEq(newPos, curPos)) {
-              newPos.ch += dir;
-              if (newPos.ch < 0) {
-                if (newPos.line > doc.first) newPos = clipPos(doc, Pos(newPos.line - 1));
-                else newPos = null;
-              } else if (newPos.ch > line.text.length) {
-                if (newPos.line < doc.first + doc.size - 1) newPos = Pos(newPos.line + 1, 0);
-                else newPos = null;
-              }
-              if (!newPos) {
-                if (flipped) {
-                  // Driven in a corner -- no valid cursor position found at all
-                  // -- try again *with* clearing, if we didn't already
-                  if (!mayClear) return skipAtomic(doc, pos, bias, true);
-                  // Otherwise, turn off editing until further notice, and return the start of the doc
-                  doc.cantEdit = true;
-                  return Pos(doc.first, 0);
-                }
-                flipped = true; newPos = pos; dir = -dir;
-              }
-            }
-            curPos = newPos;
-            continue search;
-          }
-        }
-      }
-      return curPos;
-    }
-  }
-
-  // SCROLLING
-
-  function scrollCursorIntoView(cm) {
-    var coords = scrollPosIntoView(cm, cm.doc.sel.head, null, cm.options.cursorScrollMargin);
-    if (!cm.state.focused) return;
-    var display = cm.display, box = getRect(display.sizer), doScroll = null;
-    if (coords.top + box.top < 0) doScroll = true;
-    else if (coords.bottom + box.top > (window.innerHeight || document.documentElement.clientHeight)) doScroll = false;
-    if (doScroll != null && !phantom) {
-      var scrollNode = elt("div", "\u200b", null, "position: absolute; top: " +
-                           (coords.top - display.viewOffset) + "px; height: " +
-                           (coords.bottom - coords.top + scrollerCutOff) + "px; left: " +
-                           coords.left + "px; width: 2px;");
-      cm.display.lineSpace.appendChild(scrollNode);
-      scrollNode.scrollIntoView(doScroll);
-      cm.display.lineSpace.removeChild(scrollNode);
-    }
-  }
-
-  function scrollPosIntoView(cm, pos, end, margin) {
-    if (margin == null) margin = 0;
-    for (;;) {
-      var changed = false, coords = cursorCoords(cm, pos);
-      var endCoords = !end || end == pos ? coords : cursorCoords(cm, end);
-      var scrollPos = calculateScrollPos(cm, Math.min(coords.left, endCoords.left),
-                                         Math.min(coords.top, endCoords.top) - margin,
-                                         Math.max(coords.left, endCoords.left),
-                                         Math.max(coords.bottom, endCoords.bottom) + margin);
-      var startTop = cm.doc.scrollTop, startLeft = cm.doc.scrollLeft;
-      if (scrollPos.scrollTop != null) {
-        setScrollTop(cm, scrollPos.scrollTop);
-        if (Math.abs(cm.doc.scrollTop - startTop) > 1) changed = true;
-      }
-      if (scrollPos.scrollLeft != null) {
-        setScrollLeft(cm, scrollPos.scrollLeft);
-        if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) changed = true;
-      }
-      if (!changed) return coords;
-    }
-  }
-
-  function scrollIntoView(cm, x1, y1, x2, y2) {
-    var scrollPos = calculateScrollPos(cm, x1, y1, x2, y2);
-    if (scrollPos.scrollTop != null) setScrollTop(cm, scrollPos.scrollTop);
-    if (scrollPos.scrollLeft != null) setScrollLeft(cm, scrollPos.scrollLeft);
-  }
-
-  function calculateScrollPos(cm, x1, y1, x2, y2) {
-    var display = cm.display, snapMargin = textHeight(cm.display);
-    if (y1 < 0) y1 = 0;
-    var screen = display.scroller.clientHeight - scrollerCutOff, screentop = display.scroller.scrollTop, result = {};
-    var docBottom = cm.doc.height + paddingVert(display);
-    var atTop = y1 < snapMargin, atBottom = y2 > docBottom - snapMargin;
-    if (y1 < screentop) {
-      result.scrollTop = atTop ? 0 : y1;
-    } else if (y2 > screentop + screen) {
-      var newTop = Math.min(y1, (atBottom ? docBottom : y2) - screen);
-      if (newTop != screentop) result.scrollTop = newTop;
-    }
-
-    var screenw = display.scroller.clientWidth - scrollerCutOff, screenleft = display.scroller.scrollLeft;
-    x1 += display.gutters.offsetWidth; x2 += display.gutters.offsetWidth;
-    var gutterw = display.gutters.offsetWidth;
-    var atLeft = x1 < gutterw + 10;
-    if (x1 < screenleft + gutterw || atLeft) {
-      if (atLeft) x1 = 0;
-      result.scrollLeft = Math.max(0, x1 - 10 - gutterw);
-    } else if (x2 > screenw + screenleft - 3) {
-      result.scrollLeft = x2 + 10 - screenw;
-    }
-    return result;
-  }
-
-  function updateScrollPos(cm, left, top) {
-    cm.curOp.updateScrollPos = {scrollLeft: left == null ? cm.doc.scrollLeft : left,
-                                scrollTop: top == null ? cm.doc.scrollTop : top};
-  }
-
-  function addToScrollPos(cm, left, top) {
-    var pos = cm.curOp.updateScrollPos || (cm.curOp.updateScrollPos = {scrollLeft: cm.doc.scrollLeft, scrollTop: cm.doc.scrollTop});
-    var scroll = cm.display.scroller;
-    pos.scrollTop = Math.max(0, Math.min(scroll.scrollHeight - scroll.clientHeight, pos.scrollTop + top));
-    pos.scrollLeft = Math.max(0, Math.min(scroll.scrollWidth - scroll.clientWidth, pos.scrollLeft + left));
-  }
-
-  // API UTILITIES
-
-  function indentLine(cm, n, how, aggressive) {
-    var doc = cm.doc;
-    if (how == null) how = "add";
-    if (how == "smart") {
-      if (!cm.doc.mode.indent) how = "prev";
-      else var state = getStateBefore(cm, n);
-    }
-
-    var tabSize = cm.options.tabSize;
-    var line = getLine(doc, n), curSpace = countColumn(line.text, null, tabSize);
-    var curSpaceString = line.text.match(/^\s*/)[0], indentation;
-    if (!aggressive && !/\S/.test(line.text)) {
-      indentation = 0;
-      how = "not";
-    } else if (how == "smart") {
-      indentation = cm.doc.mode.indent(state, line.text.slice(curSpaceString.length), line.text);
-      if (indentation == Pass) {
-        if (!aggressive) return;
-        how = "prev";
-      }
-    }
-    if (how == "prev") {
-      if (n > doc.first) indentation = countColumn(getLine(doc, n-1).text, null, tabSize);
-      else indentation = 0;
-    } else if (how == "add") {
-      indentation = curSpace + cm.options.indentUnit;
-    } else if (how == "subtract") {
-      indentation = curSpace - cm.options.indentUnit;
-    } else if (typeof how == "number") {
-      indentation = curSpace + how;
-    }
-    indentation = Math.max(0, indentation);
-
-    var indentString = "", pos = 0;
-    if (cm.options.indentWithTabs)
-      for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t";}
-    if (pos < indentation) indentString += spaceStr(indentation - pos);
-
-    if (indentString != curSpaceString)
-      replaceRange(cm.doc, indentString, Pos(n, 0), Pos(n, curSpaceString.length), "+input");
-    else if (doc.sel.head.line == n && doc.sel.head.ch < curSpaceString.length)
-      setSelection(doc, Pos(n, curSpaceString.length), Pos(n, curSpaceString.length), 1);
-    line.stateAfter = null;
-  }
-
-  function changeLine(cm, handle, op) {
-    var no = handle, line = handle, doc = cm.doc;
-    if (typeof handle == "number") line = getLine(doc, clipLine(doc, handle));
-    else no = lineNo(handle);
-    if (no == null) return null;
-    if (op(line, no)) regChange(cm, no, no + 1);
-    else return null;
-    return line;
-  }
-
-  function findPosH(doc, pos, dir, unit, visually) {
-    var line = pos.line, ch = pos.ch, origDir = dir;
-    var lineObj = getLine(doc, line);
-    var possible = true;
-    function findNextLine() {
-      var l = line + dir;
-      if (l < doc.first || l >= doc.first + doc.size) return (possible = false);
-      line = l;
-      return lineObj = getLine(doc, l);
-    }
-    function moveOnce(boundToLine) {
-      var next = (visually ? moveVisually : moveLogically)(lineObj, ch, dir, true);
-      if (next == null) {
-        if (!boundToLine && findNextLine()) {
-          if (visually) ch = (dir < 0 ? lineRight : lineLeft)(lineObj);
-          else ch = dir < 0 ? lineObj.text.length : 0;
-        } else return (possible = false);
-      } else ch = next;
-      return true;
-    }
-
-    if (unit == "char") moveOnce();
-    else if (unit == "column") moveOnce(true);
-    else if (unit == "word" || unit == "group") {
-      var sawType = null, group = unit == "group";
-      for (var first = true;; first = false) {
-        if (dir < 0 && !moveOnce(!first)) break;
-        var cur = lineObj.text.charAt(ch) || "\n";
-        var type = isWordChar(cur) ? "w"
-          : !group ? null
-          : /\s/.test(cur) ? null
-          : "p";
-        if (sawType && sawType != type) {
-          if (dir < 0) {dir = 1; moveOnce();}
-          break;
-        }
-        if (type) sawType = type;
-        if (dir > 0 && !moveOnce(!first)) break;
-      }
-    }
-    var result = skipAtomic(doc, Pos(line, ch), origDir, true);
-    if (!possible) result.hitSide = true;
-    return result;
-  }
-
-  function findPosV(cm, pos, dir, unit) {
-    var doc = cm.doc, x = pos.left, y;
-    if (unit == "page") {
-      var pageSize = Math.min(cm.display.wrapper.clientHeight, window.innerHeight || document.documentElement.clientHeight);
-      y = pos.top + dir * (pageSize - (dir < 0 ? 1.5 : .5) * textHeight(cm.display));
-    } else if (unit == "line") {
-      y = dir > 0 ? pos.bottom + 3 : pos.top - 3;
-    }
-    for (;;) {
-      var target = coordsChar(cm, x, y);
-      if (!target.outside) break;
-      if (dir < 0 ? y <= 0 : y >= doc.height) { target.hitSide = true; break; }
-      y += dir * 5;
-    }
-    return target;
-  }
-
-  function findWordAt(line, pos) {
-    var start = pos.ch, end = pos.ch;
-    if (line) {
-      if ((pos.xRel < 0 || end == line.length) && start) --start; else ++end;
-      var startChar = line.charAt(start);
-      var check = isWordChar(startChar) ? isWordChar
-        : /\s/.test(startChar) ? function(ch) {return /\s/.test(ch);}
-        : function(ch) {return !/\s/.test(ch) && !isWordChar(ch);};
-      while (start > 0 && check(line.charAt(start - 1))) --start;
-      while (end < line.length && check(line.charAt(end))) ++end;
-    }
-    return {from: Pos(pos.line, start), to: Pos(pos.line, end)};
-  }
-
-  function selectLine(cm, line) {
-    extendSelection(cm.doc, Pos(line, 0), clipPos(cm.doc, Pos(line + 1, 0)));
-  }
-
-  // PROTOTYPE
-
-  // The publicly visible API. Note that operation(null, f) means
-  // 'wrap f in an operation, performed on its `this` parameter'
-
-  CodeMirror.prototype = {
-    constructor: CodeMirror,
-    focus: function(){window.focus(); focusInput(this); fastPoll(this);},
-
-    setOption: function(option, value) {
-      var options = this.options, old = options[option];
-      if (options[option] == value && option != "mode") return;
-      options[option] = value;
-      if (optionHandlers.hasOwnProperty(option))
-        operation(this, optionHandlers[option])(this, value, old);
-    },
-
-    getOption: function(option) {return this.options[option];},
-    getDoc: function() {return this.doc;},
-
-    addKeyMap: function(map, bottom) {
-      this.state.keyMaps[bottom ? "push" : "unshift"](map);
-    },
-    removeKeyMap: function(map) {
-      var maps = this.state.keyMaps;
-      for (var i = 0; i < maps.length; ++i)
-        if (maps[i] == map || (typeof maps[i] != "string" && maps[i].name == map)) {
-          maps.splice(i, 1);
-          return true;
-        }
-    },
-
-    addOverlay: operation(null, function(spec, options) {
-      var mode = spec.token ? spec : CodeMirror.getMode(this.options, spec);
-      if (mode.startState) throw new Error("Overlays may not be stateful.");
-      this.state.overlays.push({mode: mode, modeSpec: spec, opaque: options && options.opaque});
-      this.state.modeGen++;
-      regChange(this);
-    }),
-    removeOverlay: operation(null, function(spec) {
-      var overlays = this.state.overlays;
-      for (var i = 0; i < overlays.length; ++i) {
-        var cur = overlays[i].modeSpec;
-        if (cur == spec || typeof spec == "string" && cur.name == spec) {
-          overlays.splice(i, 1);
-          this.state.modeGen++;
-          regChange(this);
-          return;
-        }
-      }
-    }),
-
-    indentLine: operation(null, function(n, dir, aggressive) {
-      if (typeof dir != "string" && typeof dir != "number") {
-        if (dir == null) dir = this.options.smartIndent ? "smart" : "prev";
-        else dir = dir ? "add" : "subtract";
-      }
-      if (isLine(this.doc, n)) indentLine(this, n, dir, aggressive);
-    }),
-    indentSelection: operation(null, function(how) {
-      var sel = this.doc.sel;
-      if (posEq(sel.from, sel.to)) return indentLine(this, sel.from.line, how, true);
-      var e = sel.to.line - (sel.to.ch ? 0 : 1);
-      for (var i = sel.from.line; i <= e; ++i) indentLine(this, i, how);
-    }),
-
-    // Fetch the parser token for a given character. Useful for hacks
-    // that want to inspect the mode state (say, for completion).
-    getTokenAt: function(pos, precise) {
-      var doc = this.doc;
-      pos = clipPos(doc, pos);
-      var state = getStateBefore(this, pos.line, precise), mode = this.doc.mode;
-      var line = getLine(doc, pos.line);
-      var stream = new StringStream(line.text, this.options.tabSize);
-      while (stream.pos < pos.ch && !stream.eol()) {
-        stream.start = stream.pos;
-        var style = mode.token(stream, state);
-      }
-      return {start: stream.start,
-              end: stream.pos,
-              string: stream.current(),
-              className: style || null, // Deprecated, use 'type' instead
-              type: style || null,
-              state: state};
-    },
-
-    getTokenTypeAt: function(pos) {
-      pos = clipPos(this.doc, pos);
-      var styles = getLineStyles(this, getLine(this.doc, pos.line));
-      var before = 0, after = (styles.length - 1) / 2, ch = pos.ch;
-      if (ch == 0) return styles[2];
-      for (;;) {
-        var mid = (before + after) >> 1;
-        if ((mid ? styles[mid * 2 - 1] : 0) >= ch) after = mid;
-        else if (styles[mid * 2 + 1] < ch) before = mid + 1;
-        else return styles[mid * 2 + 2];
-      }
-    },
-
-    getModeAt: function(pos) {
-      var mode = this.doc.mode;
-      if (!mode.innerMode) return mode;
-      return CodeMirror.innerMode(mode, this.getTokenAt(pos).state).mode;
-    },
-
-    getHelper: function(pos, type) {
-      return this.getHelpers(pos, type)[0];
-    },
-
-    getHelpers: function(pos, type) {
-      var found = [];
-      if (!helpers.hasOwnProperty(type)) return helpers;
-      var help = helpers[type], mode = this.getModeAt(pos);
-      if (typeof mode[type] == "string") {
-        if (help[mode[type]]) found.push(help[mode[type]]);
-      } else if (mode[type]) {
-        for (var i = 0; i < mode[type].length; i++) {
-          var val = help[mode[type][i]];
-          if (val) found.push(val);
-        }
-      } else if (mode.helperType && help[mode.helperType]) {
-        found.push(help[mode.helperType]);
-      } else if (help[mode.name]) {
-        found.push(help[mode.name]);
-      }
-      for (var i = 0; i < help._global.length; i++) {
-        var cur = help._global[i];
-        if (cur.pred(mode, this) && indexOf(found, cur.val) == -1)
-          found.push(cur.val);
-      }
-      return found;
-    },
-
-    getStateAfter: function(line, precise) {
-      var doc = this.doc;
-      line = clipLine(doc, line == null ? doc.first + doc.size - 1: line);
-      return getStateBefore(this, line + 1, precise);
-    },
-
-    cursorCoords: function(start, mode) {
-      var pos, sel = this.doc.sel;
-      if (start == null) pos = sel.head;
-      else if (typeof start == "object") pos = clipPos(this.doc, start);
-      else pos = start ? sel.from : sel.to;
-      return cursorCoords(this, pos, mode || "page");
-    },
-
-    charCoords: function(pos, mode) {
-      return charCoords(this, clipPos(this.doc, pos), mode || "page");
-    },
-
-    coordsChar: function(coords, mode) {
-      coords = fromCoordSystem(this, coords, mode || "page");
-      return coordsChar(this, coords.left, coords.top);
-    },
-
-    lineAtHeight: function(height, mode) {
-      height = fromCoordSystem(this, {top: height, left: 0}, mode || "page").top;
-      return lineAtHeight(this.doc, height + this.display.viewOffset);
-    },
-    heightAtLine: function(line, mode) {
-      var end = false, last = this.doc.first + this.doc.size - 1;
-      if (line < this.doc.first) line = this.doc.first;
-      else if (line > last) { line = last; end = true; }
-      var lineObj = getLine(this.doc, line);
-      return intoCoordSystem(this, getLine(this.doc, line), {top: 0, left: 0}, mode || "page").top +
-        (end ? lineObj.height : 0);
-    },
-
-    defaultTextHeight: function() { return textHeight(this.display); },
-    defaultCharWidth: function() { return charWidth(this.display); },
-
-    setGutterMarker: operation(null, function(line, gutterID, value) {
-      return changeLine(this, line, function(line) {
-        var markers = line.gutterMarkers || (line.gutterMarkers = {});
-        markers[gutterID] = value;
-        if (!value && isEmpty(markers)) line.gutterMarkers = null;
-        return true;
-      });
-    }),
-
-    clearGutter: operation(null, function(gutterID) {
-      var cm = this, doc = cm.doc, i = doc.first;
-      doc.iter(function(line) {
-        if (line.gutterMarkers && line.gutterMarkers[gutterID]) {
-          line.gutterMarkers[gutterID] = null;
-          regChange(cm, i, i + 1);
-          if (isEmpty(line.gutterMarkers)) line.gutterMarkers = null;
-        }
-        ++i;
-      });
-    }),
-
-    addLineClass: operation(null, function(handle, where, cls) {
-      return changeLine(this, handle, function(line) {
-        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
-        if (!line[prop]) line[prop] = cls;
-        else if (new RegExp("(?:^|\\s)" + cls + "(?:$|\\s)").test(line[prop])) return false;
-        else line[prop] += " " + cls;
-        return true;
-      });
-    }),
-
-    removeLineClass: operation(null, function(handle, where, cls) {
-      return changeLine(this, handle, function(line) {
-        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
-        var cur = line[prop];
-        if (!cur) return false;
-        else if (cls == null) line[prop] = null;
-        else {
-          var found = cur.match(new RegExp("(?:^|\\s+)" + cls + "(?:$|\\s+)"));
-          if (!found) return false;
-          var end = found.index + found[0].length;
-          line[prop] = cur.slice(0, found.index) + (!found.index || end == cur.length ? "" : " ") + cur.slice(end) || null;
-        }
-        return true;
-      });
-    }),
-
-    addLineWidget: operation(null, function(handle, node, options) {
-      return addLineWidget(this, handle, node, options);
-    }),
-
-    removeLineWidget: function(widget) { widget.clear(); },
-
-    lineInfo: function(line) {
-      if (typeof line == "number") {
-        if (!isLine(this.doc, line)) return null;
-        var n = line;
-        line = getLine(this.doc, line);
-        if (!line) return null;
-      } else {
-        var n = lineNo(line);
-        if (n == null) return null;
-      }
-      return {line: n, handle: line, text: line.text, gutterMarkers: line.gutterMarkers,
-              textClass: line.textClass, bgClass: line.bgClass, wrapClass: line.wrapClass,
-              widgets: line.widgets};
-    },
-
-    getViewport: function() { return {from: this.display.showingFrom, to: this.display.showingTo};},
-
-    addWidget: function(pos, node, scroll, vert, horiz) {
-      var display = this.display;
-      pos = cursorCoords(this, clipPos(this.doc, pos));
-      var top = pos.bottom, left = pos.left;
-      node.style.position = "absolute";
-      display.sizer.appendChild(node);
-      if (vert == "over") {
-        top = pos.top;
-      } else if (vert == "above" || vert == "near") {
-        var vspace = Math.max(display.wrapper.clientHeight, this.doc.height),
-        hspace = Math.max(display.sizer.clientWidth, display.lineSpace.clientWidth);
-        // Default to positioning above (if specified and possible); otherwise default to positioning below
-        if ((vert == 'above' || pos.bottom + node.offsetHeight > vspace) && pos.top > node.offsetHeight)
-          top = pos.top - node.offsetHeight;
-        else if (pos.bottom + node.offsetHeight <= vspace)
-          top = pos.bottom;
-        if (left + node.offsetWidth > hspace)
-          left = hspace - node.offsetWidth;
-      }
-      node.style.top = top + "px";
-      node.style.left = node.style.right = "";
-      if (horiz == "right") {
-        left = display.sizer.clientWidth - node.offsetWidth;
-        node.style.right = "0px";
-      } else {
-        if (horiz == "left") left = 0;
-        else if (horiz == "middle") left = (display.sizer.clientWidth - node.offsetWidth) / 2;
-        node.style.left = left + "px";
-      }
-      if (scroll)
-        scrollIntoView(this, left, top, left + node.offsetWidth, top + node.offsetHeight);
-    },
-
-    triggerOnKeyDown: operation(null, onKeyDown),
-
-    execCommand: function(cmd) {return commands[cmd](this);},
-
-    findPosH: function(from, amount, unit, visually) {
-      var dir = 1;
-      if (amount < 0) { dir = -1; amount = -amount; }
-      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
-        cur = findPosH(this.doc, cur, dir, unit, visually);
-        if (cur.hitSide) break;
-      }
-      return cur;
-    },
-
-    moveH: operation(null, function(dir, unit) {
-      var sel = this.doc.sel, pos;
-      if (sel.shift || sel.extend || posEq(sel.from, sel.to))
-        pos = findPosH(this.doc, sel.head, dir, unit, this.options.rtlMoveVisually);
-      else
-        pos = dir < 0 ? sel.from : sel.to;
-      extendSelection(this.doc, pos, pos, dir);
-    }),
-
-    deleteH: operation(null, function(dir, unit) {
-      var sel = this.doc.sel;
-      if (!posEq(sel.from, sel.to)) replaceRange(this.doc, "", sel.from, sel.to, "+delete");
-      else replaceRange(this.doc, "", sel.from, findPosH(this.doc, sel.head, dir, unit, false), "+delete");
-      this.curOp.userSelChange = true;
-    }),
-
-    findPosV: function(from, amount, unit, goalColumn) {
-      var dir = 1, x = goalColumn;
-      if (amount < 0) { dir = -1; amount = -amount; }
-      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
-        var coords = cursorCoords(this, cur, "div");
-        if (x == null) x = coords.left;
-        else coords.left = x;
-        cur = findPosV(this, coords, dir, unit);
-        if (cur.hitSide) break;
-      }
-      return cur;
-    },
-
-    moveV: operation(null, function(dir, unit) {
-      var sel = this.doc.sel, target, goal;
-      if (sel.shift || sel.extend || posEq(sel.from, sel.to)) {
-        var pos = cursorCoords(this, sel.head, "div");
-        if (sel.goalColumn != null) pos.left = sel.goalColumn;
-        target = findPosV(this, pos, dir, unit);
-        if (unit == "page") addToScrollPos(this, 0, charCoords(this, target, "div").top - pos.top);
-        goal = pos.left;
-      } else {
-        target = dir < 0 ? sel.from : sel.to;
-      }
-      extendSelection(this.doc, target, target, dir);
-      if (goal != null) sel.goalColumn = goal;
-    }),
-
-    toggleOverwrite: function(value) {
-      if (value != null && value == this.state.overwrite) return;
-      if (this.state.overwrite = !this.state.overwrite)
-        this.display.cursor.className += " CodeMirror-overwrite";
-      else
-        this.display.cursor.className = this.display.cursor.className.replace(" CodeMirror-overwrite", "");
-    },
-    hasFocus: function() { return this.state.focused; },
-
-    scrollTo: operation(null, function(x, y) {
-      updateScrollPos(this, x, y);
-    }),
-    getScrollInfo: function() {
-      var scroller = this.display.scroller, co = scrollerCutOff;
-      return {left: scroller.scrollLeft, top: scroller.scrollTop,
-              height: scroller.scrollHeight - co, width: scroller.scrollWidth - co,
-              clientHeight: scroller.clientHeight - co, clientWidth: scroller.clientWidth - co};
-    },
-
-    scrollIntoView: operation(null, function(range, margin) {
-      if (range == null) range = {from: this.doc.sel.head, to: null};
-      else if (typeof range == "number") range = {from: Pos(range, 0), to: null};
-      else if (range.from == null) range = {from: range, to: null};
-      if (!range.to) range.to = range.from;
-      if (!margin) margin = 0;
-
-      var coords = range;
-      if (range.from.line != null) {
-        this.curOp.scrollToPos = {from: range.from, to: range.to, margin: margin};
-        coords = {from: cursorCoords(this, range.from),
-                  to: cursorCoords(this, range.to)};
-      }
-      var sPos = calculateScrollPos(this, Math.min(coords.from.left, coords.to.left),
-                                    Math.min(coords.from.top, coords.to.top) - margin,
-                                    Math.max(coords.from.right, coords.to.right),
-                                    Math.max(coords.from.bottom, coords.to.bottom) + margin);
-      updateScrollPos(this, sPos.scrollLeft, sPos.scrollTop);
-    }),
-
-    setSize: operation(null, function(width, height) {
-      function interpret(val) {
-        return typeof val == "number" || /^\d+$/.test(String(val)) ? val + "px" : val;
-      }
-      if (width != null) this.display.wrapper.style.width = interpret(width);
-      if (height != null) this.display.wrapper.style.height = interpret(height);
-      if (this.options.lineWrapping)
-        this.display.measureLineCache.length = this.display.measureLineCachePos = 0;
-      this.curOp.forceUpdate = true;
-    }),
-
-    operation: function(f){return runInOp(this, f);},
-
-    refresh: operation(null, function() {
-      var badHeight = this.display.cachedTextHeight == null;
-      clearCaches(this);
-      updateScrollPos(this, this.doc.scrollLeft, this.doc.scrollTop);
-      regChange(this);
-      if (badHeight) estimateLineHeights(this);
-    }),
-
-    swapDoc: operation(null, function(doc) {
-      var old = this.doc;
-      old.cm = null;
-      attachDoc(this, doc);
-      clearCaches(this);
-      resetInput(this, true);
-      updateScrollPos(this, doc.scrollLeft, doc.scrollTop);
-      signalLater(this, "swapDoc", this, old);
-      return old;
-    }),
-
-    getInputField: function(){return this.display.input;},
-    getWrapperElement: function(){return this.display.wrapper;},
-    getScrollerElement: function(){return this.display.scroller;},
-    getGutterElement: function(){return this.display.gutters;}
-  };
-  eventMixin(CodeMirror);
-
-  // OPTION DEFAULTS
-
-  var optionHandlers = CodeMirror.optionHandlers = {};
-
-  // The default configuration options.
-  var defaults = CodeMirror.defaults = {};
-
-  function option(name, deflt, handle, notOnInit) {
-    CodeMirror.defaults[name] = deflt;
-    if (handle) optionHandlers[name] =
-      notOnInit ? function(cm, val, old) {if (old != Init) handle(cm, val, old);} : handle;
-  }
-
-  var Init = CodeMirror.Init = {toString: function(){return "CodeMirror.Init";}};
-
-  // These two are, on init, called from the constructor because they
-  // have to be initialized before the editor can start at all.
-  option("value", "", function(cm, val) {
-    cm.setValue(val);
-  }, true);
-  option("mode", null, function(cm, val) {
-    cm.doc.modeOption = val;
-    loadMode(cm);
-  }, true);
-
-  option("indentUnit", 2, loadMode, true);
-  option("indentWithTabs", false);
-  option("smartIndent", true);
-  option("tabSize", 4, function(cm) {
-    loadMode(cm);
-    clearCaches(cm);
-    regChange(cm);
-  }, true);
-  option("specialChars", /[\t\u0000-\u0019\u00ad\u200b\u2028\u2029\ufeff]/g, function(cm, val) {
-    cm.options.specialChars = new RegExp(val.source + (val.test("\t") ? "" : "|\t"), "g");
-    cm.refresh();
-  }, true);
-  option("specialCharPlaceholder", defaultSpecialCharPlaceholder, function(cm) {cm.refresh();}, true);
-  option("electricChars", true);
-  option("rtlMoveVisually", !windows);
-  option("wholeLineUpdateBefore", true);
-
-  option("theme", "default", function(cm) {
-    themeChanged(cm);
-    guttersChanged(cm);
-  }, true);
-  option("keyMap", "default", keyMapChanged);
-  option("extraKeys", null);
-
-  option("onKeyEvent", null);
-  option("onDragEvent", null);
-
-  option("lineWrapping", false, wrappingChanged, true);
-  option("gutters", [], function(cm) {
-    setGuttersForLineNumbers(cm.options);
-    guttersChanged(cm);
-  }, true);
-  option("fixedGutter", true, function(cm, val) {
-    cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0";
-    cm.refresh();
-  }, true);
-  option("coverGutterNextToScrollbar", false, updateScrollbars, true);
-  option("lineNumbers", false, function(cm) {
-    setGuttersForLineNumbers(cm.options);
-    guttersChanged(cm);
-  }, true);
-  option("firstLineNumber", 1, guttersChanged, true);
-  option("lineNumberFormatter", function(integer) {return integer;}, guttersChanged, true);
-  option("showCursorWhenSelecting", false, updateSelection, true);
-
-  option("resetSelectionOnContextMenu", true);
-
-  option("readOnly", false, function(cm, val) {
-    if (val == "nocursor") {
-      onBlur(cm);
-      cm.display.input.blur();
-      cm.display.disabled = true;
-    } else {
-      cm.display.disabled = false;
-      if (!val) resetInput(cm, true);
-    }
-  });
-  option("dragDrop", true);
-
-  option("cursorBlinkRate", 530);
-  option("cursorScrollMargin", 0);
-  option("cursorHeight", 1);
-  option("workTime", 100);
-  option("workDelay", 100);
-  option("flattenSpans", true);
-  option("pollInterval", 100);
-  option("undoDepth", 40, function(cm, val){cm.doc.history.undoDepth = val;});
-  option("historyEventDelay", 500);
-  option("viewportMargin", 10, function(cm){cm.refresh();}, true);
-  option("maxHighlightLength", 10000, function(cm){loadMode(cm); cm.refresh();}, true);
-  option("crudeMeasuringFrom", 10000);
-  option("moveInputWithCursor", true, function(cm, val) {
-    if (!val) cm.display.inputDiv.style.top = cm.display.inputDiv.style.left = 0;
-  });
-
-  option("tabindex", null, function(cm, val) {
-    cm.display.input.tabIndex = val || "";
-  });
-  option("autofocus", null);
-
-  // MODE DEFINITION AND QUERYING
-
-  // Known modes, by name and by MIME
-  var modes = CodeMirror.modes = {}, mimeModes = CodeMirror.mimeModes = {};
-
-  CodeMirror.defineMode = function(name, mode) {
-    if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
-    if (arguments.length > 2) {
-      mode.dependencies = [];
-      for (var i = 2; i < arguments.length; ++i) mode.dependencies.push(arguments[i]);
-    }
-    modes[name] = mode;
-  };
-
-  CodeMirror.defineMIME = function(mime, spec) {
-    mimeModes[mime] = spec;
-  };
-
-  CodeMirror.resolveMode = function(spec) {
-    if (typeof spec == "string" && mimeModes.hasOwnProperty(spec)) {
-      spec = mimeModes[spec];
-    } else if (spec && typeof spec.name == "string" && mimeModes.hasOwnProperty(spec.name)) {
-      var found = mimeModes[spec.name];
-      spec = createObj(found, spec);
-      spec.name = found.name;
-    } else if (typeof spec == "string" && /^[\w\-]+\/[\w\-]+\+xml$/.test(spec)) {
-      return CodeMirror.resolveMode("application/xml");
-    }
-    if (typeof spec == "string") return {name: spec};
-    else return spec || {name: "null"};
-  };
-
-  CodeMirror.getMode = function(options, spec) {
-    var spec = CodeMirror.resolveMode(spec);
-    var mfactory = modes[spec.name];
-    if (!mfactory) return CodeMirror.getMode(options, "text/plain");
-    var modeObj = mfactory(options, spec);
-    if (modeExtensions.hasOwnProperty(spec.name)) {
-      var exts = modeExtensions[spec.name];
-      for (var prop in exts) {
-        if (!exts.hasOwnProperty(prop)) continue;
-        if (modeObj.hasOwnProperty(prop)) modeObj["_" + prop] = modeObj[prop];
-        modeObj[prop] = exts[prop];
-      }
-    }
-    modeObj.name = spec.name;
-    if (spec.helperType) modeObj.helperType = spec.helperType;
-    if (spec.modeProps) for (var prop in spec.modeProps)
-      modeObj[prop] = spec.modeProps[prop];
-
-    return modeObj;
-  };
-
-  CodeMirror.defineMode("null", function() {
-    return {token: function(stream) {stream.skipToEnd();}};
-  });
-  CodeMirror.defineMIME("text/plain", "null");
-
-  var modeExtensions = CodeMirror.modeExtensions = {};
-  CodeMirror.extendMode = function(mode, properties) {
-    var exts = modeExtensions.hasOwnProperty(mode) ? modeExtensions[mode] : (modeExtensions[mode] = {});
-    copyObj(properties, exts);
-  };
-
-  // EXTENSIONS
-
-  CodeMirror.defineExtension = function(name, func) {
-    CodeMirror.prototype[name] = func;
-  };
-  CodeMirror.defineDocExtension = function(name, func) {
-    Doc.prototype[name] = func;
-  };
-  CodeMirror.defineOption = option;
-
-  var initHooks = [];
-  CodeMirror.defineInitHook = function(f) {initHooks.push(f);};
-
-  var helpers = CodeMirror.helpers = {};
-  CodeMirror.registerHelper = function(type, name, value) {
-    if (!helpers.hasOwnProperty(type)) helpers[type] = CodeMirror[type] = {_global: []};
-    helpers[type][name] = value;
-  };
-  CodeMirror.registerGlobalHelper = function(type, name, predicate, value) {
-    CodeMirror.registerHelper(type, name, value);
-    helpers[type]._global.push({pred: predicate, val: value});
-  };
-
-  // UTILITIES
-
-  CodeMirror.isWordChar = isWordChar;
-
-  // MODE STATE HANDLING
-
-  // Utility functions for working with state. Exported because modes
-  // sometimes need to do this.
-  function copyState(mode, state) {
-    if (state === true) return state;
-    if (mode.copyState) return mode.copyState(state);
-    var nstate = {};
-    for (var n in state) {
-      var val = state[n];
-      if (val instanceof Array) val = val.concat([]);
-      nstate[n] = val;
-    }
-    return nstate;
-  }
-  CodeMirror.copyState = copyState;
-
-  function startState(mode, a1, a2) {
-    return mode.startState ? mode.startState(a1, a2) : true;
-  }
-  CodeMirror.startState = startState;
-
-  CodeMirror.innerMode = function(mode, state) {
-    while (mode.innerMode) {
-      var info = mode.innerMode(state);
-      if (!info || info.mode == mode) break;
-      state = info.state;
-      mode = info.mode;
-    }
-    return info || {mode: mode, state: state};
-  };
-
-  // STANDARD COMMANDS
-
-  var commands = CodeMirror.commands = {
-    selectAll: function(cm) {cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()));},
-    killLine: function(cm) {
-      var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
-      if (!sel && cm.getLine(from.line).length == from.ch)
-        cm.replaceRange("", from, Pos(from.line + 1, 0), "+delete");
-      else cm.replaceRange("", from, sel ? to : Pos(from.line), "+delete");
-    },
-    deleteLine: function(cm) {
-      var l = cm.getCursor().line;
-      cm.replaceRange("", Pos(l, 0), Pos(l), "+delete");
-    },
-    delLineLeft: function(cm) {
-      var cur = cm.getCursor();
-      cm.replaceRange("", Pos(cur.line, 0), cur, "+delete");
-    },
-    undo: function(cm) {cm.undo();},
-    redo: function(cm) {cm.redo();},
-    goDocStart: function(cm) {cm.extendSelection(Pos(cm.firstLine(), 0));},
-    goDocEnd: function(cm) {cm.extendSelection(Pos(cm.lastLine()));},
-    goLineStart: function(cm) {
-      cm.extendSelection(lineStart(cm, cm.getCursor().line));
-    },
-    goLineStartSmart: function(cm) {
-      var cur = cm.getCursor(), start = lineStart(cm, cur.line);
-      var line = cm.getLineHandle(start.line);
-      var order = getOrder(line);
-      if (!order || order[0].level == 0) {
-        var firstNonWS = Math.max(0, line.text.search(/\S/));
-        var inWS = cur.line == start.line && cur.ch <= firstNonWS && cur.ch;
-        cm.extendSelection(Pos(start.line, inWS ? 0 : firstNonWS));
-      } else cm.extendSelection(start);
-    },
-    goLineEnd: function(cm) {
-      cm.extendSelection(lineEnd(cm, cm.getCursor().line));
-    },
-    goLineRight: function(cm) {
-      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
-      cm.extendSelection(cm.coordsChar({left: cm.display.lineDiv.offsetWidth + 100, top: top}, "div"));
-    },
-    goLineLeft: function(cm) {
-      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
-      cm.extendSelection(cm.coordsChar({left: 0, top: top}, "div"));
-    },
-    goLineUp: function(cm) {cm.moveV(-1, "line");},
-    goLineDown: function(cm) {cm.moveV(1, "line");},
-    goPageUp: function(cm) {cm.moveV(-1, "page");},
-    goPageDown: function(cm) {cm.moveV(1, "page");},
-    goCharLeft: function(cm) {cm.moveH(-1, "char");},
-    goCharRight: function(cm) {cm.moveH(1, "char");},
-    goColumnLeft: function(cm) {cm.moveH(-1, "column");},
-    goColumnRight: function(cm) {cm.moveH(1, "column");},
-    goWordLeft: function(cm) {cm.moveH(-1, "word");},
-    goGroupRight: function(cm) {cm.moveH(1, "group");},
-    goGroupLeft: function(cm) {cm.moveH(-1, "group");},
-    goWordRight: function(cm) {cm.moveH(1, "word");},
-    delCharBefore: function(cm) {cm.deleteH(-1, "char");},
-    delCharAfter: function(cm) {cm.deleteH(1, "char");},
-    delWordBefore: function(cm) {cm.deleteH(-1, "word");},
-    delWordAfter: function(cm) {cm.deleteH(1, "word");},
-    delGroupBefore: function(cm) {cm.deleteH(-1, "group");},
-    delGroupAfter: function(cm) {cm.deleteH(1, "group");},
-    indentAuto: function(cm) {cm.indentSelection("smart");},
-    indentMore: function(cm) {cm.indentSelection("add");},
-    indentLess: function(cm) {cm.indentSelection("subtract");},
-    insertTab: function(cm) {cm.replaceSelection("\t", "end", "+input");},
-    defaultTab: function(cm) {
-      if (cm.somethingSelected()) cm.indentSelection("add");
-      else cm.replaceSelection("\t", "end", "+input");
-    },
-    transposeChars: function(cm) {
-      var cur = cm.getCursor(), line = cm.getLine(cur.line);
-      if (cur.ch > 0 && cur.ch < line.length - 1)
-        cm.replaceRange(line.charAt(cur.ch) + line.charAt(cur.ch - 1),
-                        Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1));
-    },
-    newlineAndIndent: function(cm) {
-      operation(cm, function() {
-        cm.replaceSelection("\n", "end", "+input");
-        cm.indentLine(cm.getCursor().line, null, true);
-      })();
-    },
-    toggleOverwrite: function(cm) {cm.toggleOverwrite();}
-  };
-
-  // STANDARD KEYMAPS
-
-  var keyMap = CodeMirror.keyMap = {};
-  keyMap.basic = {
-    "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown",
-    "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown",
-    "Delete": "delCharAfter", "Backspace": "delCharBefore", "Shift-Backspace": "delCharBefore",
-    "Tab": "defaultTab", "Shift-Tab": "indentAuto",
-    "Enter": "newlineAndIndent", "Insert": "toggleOverwrite"
-  };
-  // Note that the save and find-related commands aren't defined by
-  // default. Unknown commands are simply ignored.
-  keyMap.pcDefault = {
-    "Ctrl-A": "selectAll", "Ctrl-D": "deleteLine", "Ctrl-Z": "undo", "Shift-Ctrl-Z": "redo", "Ctrl-Y": "redo",
-    "Ctrl-Home": "goDocStart", "Alt-Up": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Down": "goDocEnd",
-    "Ctrl-Left": "goGroupLeft", "Ctrl-Right": "goGroupRight", "Alt-Left": "goLineStart", "Alt-Right": "goLineEnd",
-    "Ctrl-Backspace": "delGroupBefore", "Ctrl-Delete": "delGroupAfter", "Ctrl-S": "save", "Ctrl-F": "find",
-    "Ctrl-G": "findNext", "Shift-Ctrl-G": "findPrev", "Shift-Ctrl-F": "replace", "Shift-Ctrl-R": "replaceAll",
-    "Ctrl-[": "indentLess", "Ctrl-]": "indentMore",
-    fallthrough: "basic"
-  };
-  keyMap.macDefault = {
-    "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo",
-    "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goGroupLeft",
-    "Alt-Right": "goGroupRight", "Cmd-Left": "goLineStart", "Cmd-Right": "goLineEnd", "Alt-Backspace": "delGroupBefore",
-    "Ctrl-Alt-Backspace": "delGroupAfter", "Alt-Delete": "delGroupAfter", "Cmd-S": "save", "Cmd-F": "find",
-    "Cmd-G": "findNext", "Shift-Cmd-G": "findPrev", "Cmd-Alt-F": "replace", "Shift-Cmd-Alt-F": "replaceAll",
-    "Cmd-[": "indentLess", "Cmd-]": "indentMore", "Cmd-Backspace": "delLineLeft",
-    fallthrough: ["basic", "emacsy"]
-  };
-  keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;
-  keyMap.emacsy = {
-    "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown",
-    "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
-    "Ctrl-V": "goPageDown", "Shift-Ctrl-V": "goPageUp", "Ctrl-D": "delCharAfter", "Ctrl-H": "delCharBefore",
-    "Alt-D": "delWordAfter", "Alt-Backspace": "delWordBefore", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars"
-  };
-
-  // KEYMAP DISPATCH
-
-  function getKeyMap(val) {
-    if (typeof val == "string") return keyMap[val];
-    else return val;
-  }
-
-  function lookupKey(name, maps, handle) {
-    function lookup(map) {
-      map = getKeyMap(map);
-      var found = map[name];
-      if (found === false) return "stop";
-      if (found != null && handle(found)) return true;
-      if (map.nofallthrough) return "stop";
-
-      var fallthrough = map.fallthrough;
-      if (fallthrough == null) return false;
-      if (Object.prototype.toString.call(fallthrough) != "[object Array]")
-        return lookup(fallthrough);
-      for (var i = 0, e = fallthrough.length; i < e; ++i) {
-        var done = lookup(fallthrough[i]);
-        if (done) return done;
-      }
-      return false;
-    }
-
-    for (var i = 0; i < maps.length; ++i) {
-      var done = lookup(maps[i]);
-      if (done) return done != "stop";
-    }
-  }
-  function isModifierKey(event) {
-    var name = keyNames[event.keyCode];
-    return name == "Ctrl" || name == "Alt" || name == "Shift" || name == "Mod";
-  }
-  function keyName(event, noShift) {
-    if (opera && event.keyCode == 34 && event["char"]) return false;
-    var name = keyNames[event.keyCode];
-    if (name == null || event.altGraphKey) return false;
-    if (event.altKey) name = "Alt-" + name;
-    if (flipCtrlCmd ? event.metaKey : event.ctrlKey) name = "Ctrl-" + name;
-    if (flipCtrlCmd ? event.ctrlKey : event.metaKey) name = "Cmd-" + name;
-    if (!noShift && event.shiftKey) name = "Shift-" + name;
-    return name;
-  }
-  CodeMirror.lookupKey = lookupKey;
-  CodeMirror.isModifierKey = isModifierKey;
-  CodeMirror.keyName = keyName;
-
-  // FROMTEXTAREA
-
-  CodeMirror.fromTextArea = function(textarea, options) {
-    if (!options) options = {};
-    options.value = textarea.value;
-    if (!options.tabindex && textarea.tabindex)
-      options.tabindex = textarea.tabindex;
-    if (!options.placeholder && textarea.placeholder)
-      options.placeholder = textarea.placeholder;
-    // Set autofocus to true if this textarea is focused, or if it has
-    // autofocus and no other element is focused.
-    if (options.autofocus == null) {
-      var hasFocus = document.body;
-      // doc.activeElement occasionally throws on IE
-      try { hasFocus = document.activeElement; } catch(e) {}
-      options.autofocus = hasFocus == textarea ||
-        textarea.getAttribute("autofocus") != null && hasFocus == document.body;
-    }
-
-    function save() {textarea.value = cm.getValue();}
-    if (textarea.form) {
-      on(textarea.form, "submit", save);
-      // Deplorable hack to make the submit method do the right thing.
-      if (!options.leaveSubmitMethodAlone) {
-        var form = textarea.form, realSubmit = form.submit;
-        try {
-          var wrappedSubmit = form.submit = function() {
-            save();
-            form.submit = realSubmit;
-            form.submit();
-            form.submit = wrappedSubmit;
-          };
-        } catch(e) {}
-      }
-    }
-
-    textarea.style.display = "none";
-    var cm = CodeMirror(function(node) {
-      textarea.parentNode.insertBefore(node, textarea.nextSibling);
-    }, options);
-    cm.save = save;
-    cm.getTextArea = function() { return textarea; };
-    cm.toTextArea = function() {
-      save();
-      textarea.parentNode.removeChild(cm.getWrapperElement());
-      textarea.style.display = "";
-      if (textarea.form) {
-        off(textarea.form, "submit", save);
-        if (typeof textarea.form.submit == "function")
-          textarea.form.submit = realSubmit;
-      }
-    };
-    return cm;
-  };
-
-  // STRING STREAM
-
-  // Fed to the mode parsers, provides helper functions to make
-  // parsers more succinct.
-
-  // The character stream used by a mode's parser.
-  function StringStream(string, tabSize) {
-    this.pos = this.start = 0;
-    this.string = string;
-    this.tabSize = tabSize || 8;
-    this.lastColumnPos = this.lastColumnValue = 0;
-    this.lineStart = 0;
-  }
-
-  StringStream.prototype = {
-    eol: function() {return this.pos >= this.string.length;},
-    sol: function() {return this.pos == this.lineStart;},
-    peek: function() {return this.string.charAt(this.pos) || undefined;},
-    next: function() {
-      if (this.pos < this.string.length)
-        return this.string.charAt(this.pos++);
-    },
-    eat: function(match) {
-      var ch = this.string.charAt(this.pos);
-      if (typeof match == "string") var ok = ch == match;
-      else var ok = ch && (match.test ? match.test(ch) : match(ch));
-      if (ok) {++this.pos; return ch;}
-    },
-    eatWhile: function(match) {
-      var start = this.pos;
-      while (this.eat(match)){}
-      return this.pos > start;
-    },
-    eatSpace: function() {
-      var start = this.pos;
-      while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
-      return this.pos > start;
-    },
-    skipToEnd: function() {this.pos = this.string.length;},
-    skipTo: function(ch) {
-      var found = this.string.indexOf(ch, this.pos);
-      if (found > -1) {this.pos = found; return true;}
-    },
-    backUp: function(n) {this.pos -= n;},
-    column: function() {
-      if (this.lastColumnPos < this.start) {
-        this.lastColumnValue = countColumn(this.string, this.start, this.tabSize, this.lastColumnPos, this.lastColumnValue);
-        this.lastColumnPos = this.start;
-      }
-      return this.lastColumnValue - (this.lineStart ? countColumn(this.string, this.lineStart, this.tabSize) : 0);
-    },
-    indentation: function() {
-      return countColumn(this.string, null, this.tabSize) -
-        (this.lineStart ? countColumn(this.string, this.lineStart, this.tabSize) : 0);
-    },
-    match: function(pattern, consume, caseInsensitive) {
-      if (typeof pattern == "string") {
-        var cased = function(str) {return caseInsensitive ? str.toLowerCase() : str;};
-        var substr = this.string.substr(this.pos, pattern.length);
-        if (cased(substr) == cased(pattern)) {
-          if (consume !== false) this.pos += pattern.length;
-          return true;
-        }
-      } else {
-        var match = this.string.slice(this.pos).match(pattern);
-        if (match && match.index > 0) return null;
-        if (match && consume !== false) this.pos += match[0].length;
-        return match;
-      }
-    },
-    current: function(){return this.string.slice(this.start, this.pos);},
-    hideFirstChars: function(n, inner) {
-      this.lineStart += n;
-      try { return inner(); }
-      finally { this.lineStart -= n; }
-    }
-  };
-  CodeMirror.StringStream = StringStream;
-
-  // TEXTMARKERS
-
-  function TextMarker(doc, type) {
-    this.lines = [];
-    this.type = type;
-    this.doc = doc;
-  }
-  CodeMirror.TextMarker = TextMarker;
-  eventMixin(TextMarker);
-
-  TextMarker.prototype.clear = function() {
-    if (this.explicitlyCleared) return;
-    var cm = this.doc.cm, withOp = cm && !cm.curOp;
-    if (withOp) startOperation(cm);
-    if (hasHandler(this, "clear")) {
-      var found = this.find();
-      if (found) signalLater(this, "clear", found.from, found.to);
-    }
-    var min = null, max = null;
-    for (var i = 0; i < this.lines.length; ++i) {
-      var line = this.lines[i];
-      var span = getMarkedSpanFor(line.markedSpans, this);
-      if (span.to != null) max = lineNo(line);
-      line.markedSpans = removeMarkedSpan(line.markedSpans, span);
-      if (span.from != null)
-        min = lineNo(line);
-      else if (this.collapsed && !lineIsHidden(this.doc, line) && cm)
-        updateLineHeight(line, textHeight(cm.display));
-    }
-    if (cm && this.collapsed && !cm.options.lineWrapping) for (var i = 0; i < this.lines.length; ++i) {
-      var visual = visualLine(cm.doc, this.lines[i]), len = lineLength(cm.doc, visual);
-      if (len > cm.display.maxLineLength) {
-        cm.display.maxLine = visual;
-        cm.display.maxLineLength = len;
-        cm.display.maxLineChanged = true;
-      }
-    }
-
-    if (min != null && cm) regChange(cm, min, max + 1);
-    this.lines.length = 0;
-    this.explicitlyCleared = true;
-    if (this.atomic && this.doc.cantEdit) {
-      this.doc.cantEdit = false;
-      if (cm) reCheckSelection(cm);
-    }
-    if (withOp) endOperation(cm);
-  };
-
-  TextMarker.prototype.find = function(bothSides) {
-    var from, to;
-    for (var i = 0; i < this.lines.length; ++i) {
-      var line = this.lines[i];
-      var span = getMarkedSpanFor(line.markedSpans, this);
-      if (span.from != null || span.to != null) {
-        var found = lineNo(line);
-        if (span.from != null) from = Pos(found, span.from);
-        if (span.to != null) to = Pos(found, span.to);
-      }
-    }
-    if (this.type == "bookmark" && !bothSides) return from;
-    return from && {from: from, to: to};
-  };
-
-  TextMarker.prototype.changed = function() {
-    var pos = this.find(), cm = this.doc.cm;
-    if (!pos || !cm) return;
-    if (this.type != "bookmark") pos = pos.from;
-    var line = getLine(this.doc, pos.line);
-    clearCachedMeasurement(cm, line);
-    if (pos.line >= cm.display.showingFrom && pos.line < cm.display.showingTo) {
-      for (var node = cm.display.lineDiv.firstChild; node; node = node.nextSibling) if (node.lineObj == line) {
-        if (node.offsetHeight != line.height) updateLineHeight(line, node.offsetHeight);
-        break;
-      }
-      runInOp(cm, function() {
-        cm.curOp.selectionChanged = cm.curOp.forceUpdate = cm.curOp.updateMaxLine = true;
-      });
-    }
-  };
-
-  TextMarker.prototype.attachLine = function(line) {
-    if (!this.lines.length && this.doc.cm) {
-      var op = this.doc.cm.curOp;
-      if (!op.maybeHiddenMarkers || indexOf(op.maybeHiddenMarkers, this) == -1)
-        (op.maybeUnhiddenMarkers || (op.maybeUnhiddenMarkers = [])).push(this);
-    }
-    this.lines.push(line);
-  };
-  TextMarker.prototype.detachLine = function(line) {
-    this.lines.splice(indexOf(this.lines, line), 1);
-    if (!this.lines.length && this.doc.cm) {
-      var op = this.doc.cm.curOp;
-      (op.maybeHiddenMarkers || (op.maybeHiddenMarkers = [])).push(this);
-    }
-  };
-
-  var nextMarkerId = 0;
-
-  function markText(doc, from, to, options, type) {
-    if (options && options.shared) return markTextShared(doc, from, to, options, type);
-    if (doc.cm && !doc.cm.curOp) return operation(doc.cm, markText)(doc, from, to, options, type);
-
-    var marker = new TextMarker(doc, type);
-    if (options) copyObj(options, marker);
-    if (posLess(to, from) || posEq(from, to) && marker.clearWhenEmpty !== false)
-      return marker;
-    if (marker.replacedWith) {
-      marker.collapsed = true;
-      marker.replacedWith = elt("span", [marker.replacedWith], "CodeMirror-widget");
-      if (!options.handleMouseEvents) marker.replacedWith.ignoreEvents = true;
-    }
-    if (marker.collapsed) {
-      if (conflictingCollapsedRange(doc, from.line, from, to, marker) ||
-          from.line != to.line && conflictingCollapsedRange(doc, to.line, from, to, marker))
-        throw new Error("Inserting collapsed marker partially overlapping an existing one");
-      sawCollapsedSpans = true;
-    }
-
-    if (marker.addToHistory)
-      addToHistory(doc, {from: from, to: to, origin: "markText"},
-                   {head: doc.sel.head, anchor: doc.sel.anchor}, NaN);
-
-    var curLine = from.line, cm = doc.cm, updateMaxLine;
-    doc.iter(curLine, to.line + 1, function(line) {
-      if (cm && marker.collapsed && !cm.options.lineWrapping && visualLine(doc, line) == cm.display.maxLine)
-        updateMaxLine = true;
-      var span = {from: null, to: null, marker: marker};
-      if (curLine == from.line) span.from = from.ch;
-      if (curLine == to.line) span.to = to.ch;
-      if (marker.collapsed && curLine != from.line) updateLineHeight(line, 0);
-      addMarkedSpan(line, span);
-      ++curLine;
-    });
-    if (marker.collapsed) doc.iter(from.line, to.line + 1, function(line) {
-      if (lineIsHidden(doc, line)) updateLineHeight(line, 0);
-    });
-
-    if (marker.clearOnEnter) on(marker, "beforeCursorEnter", function() { marker.clear(); });
-
-    if (marker.readOnly) {
-      sawReadOnlySpans = true;
-      if (doc.history.done.length || doc.history.undone.length)
-        doc.clearHistory();
-    }
-    if (marker.collapsed) {
-      marker.id = ++nextMarkerId;
-      marker.atomic = true;
-    }
-    if (cm) {
-      if (updateMaxLine) cm.curOp.updateMaxLine = true;
-      if (marker.className || marker.title || marker.startStyle || marker.endStyle || marker.collapsed)
-        regChange(cm, from.line, to.line + 1);
-      if (marker.atomic) reCheckSelection(cm);
-    }
-    return marker;
-  }
-
-  // SHARED TEXTMARKERS
-
-  function SharedTextMarker(markers, primary) {
-    this.markers = markers;
-    this.primary = primary;
-    for (var i = 0, me = this; i < markers.length; ++i) {
-      markers[i].parent = this;
-      on(markers[i], "clear", function(){me.clear();});
-    }
-  }
-  CodeMirror.SharedTextMarker = SharedTextMarker;
-  eventMixin(SharedTextMarker);
-
-  SharedTextMarker.prototype.clear = function() {
-    if (this.explicitlyCleared) return;
-    this.explicitlyCleared = true;
-    for (var i = 0; i < this.markers.length; ++i)
-      this.markers[i].clear();
-    signalLater(this, "clear");
-  };
-  SharedTextMarker.prototype.find = function() {
-    return this.primary.find();
-  };
-
-  function markTextShared(doc, from, to, options, type) {
-    options = copyObj(options);
-    options.shared = false;
-    var markers = [markText(doc, from, to, options, type)], primary = markers[0];
-    var widget = options.replacedWith;
-    linkedDocs(doc, function(doc) {
-      if (widget) options.replacedWith = widget.cloneNode(true);
-      markers.push(markText(doc, clipPos(doc, from), clipPos(doc, to), options, type));
-      for (var i = 0; i < doc.linked.length; ++i)
-        if (doc.linked[i].isParent) return;
-      primary = lst(markers);
-    });
-    return new SharedTextMarker(markers, primary);
-  }
-
-  // TEXTMARKER SPANS
-
-  function getMarkedSpanFor(spans, marker) {
-    if (spans) for (var i = 0; i < spans.length; ++i) {
-      var span = spans[i];
-      if (span.marker == marker) return span;
-    }
-  }
-  function removeMarkedSpan(spans, span) {
-    for (var r, i = 0; i < spans.length; ++i)
-      if (spans[i] != span) (r || (r = [])).push(spans[i]);
-    return r;
-  }
-  function addMarkedSpan(line, span) {
-    line.markedSpans = line.markedSpans ? line.markedSpans.concat([span]) : [span];
-    span.marker.attachLine(line);
-  }
-
-  function markedSpansBefore(old, startCh, isInsert) {
-    if (old) for (var i = 0, nw; i < old.length; ++i) {
-      var span = old[i], marker = span.marker;
-      var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= startCh : span.from < startCh);
-      if (startsBefore || span.from == startCh && marker.type == "bookmark" && (!isInsert || !span.marker.insertLeft)) {
-        var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= startCh : span.to > startCh);
-        (nw || (nw = [])).push({from: span.from,
-                                to: endsAfter ? null : span.to,
-                                marker: marker});
-      }
-    }
-    return nw;
-  }
-
-  function markedSpansAfter(old, endCh, isInsert) {
-    if (old) for (var i = 0, nw; i < old.length; ++i) {
-      var span = old[i], marker = span.marker;
-      var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= endCh : span.to > endCh);
-      if (endsAfter || span.from == endCh && marker.type == "bookmark" && (!isInsert || span.marker.insertLeft)) {
-        var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= endCh : span.from < endCh);
-        (nw || (nw = [])).push({from: startsBefore ? null : span.from - endCh,
-                                to: span.to == null ? null : span.to - endCh,
-                                marker: marker});
-      }
-    }
-    return nw;
-  }
-
-  function stretchSpansOverChange(doc, change) {
-    var oldFirst = isLine(doc, change.from.line) && getLine(doc, change.from.line).markedSpans;
-    var oldLast = isLine(doc, change.to.line) && getLine(doc, change.to.line).markedSpans;
-    if (!oldFirst && !oldLast) return null;
-
-    var startCh = change.from.ch, endCh = change.to.ch, isInsert = posEq(change.from, change.to);
-    // Get the spans that 'stick out' on both sides
-    var first = markedSpansBefore(oldFirst, startCh, isInsert);
-    var last = markedSpansAfter(oldLast, endCh, isInsert);
-
-    // Next, merge those two ends
-    var sameLine = change.text.length == 1, offset = lst(change.text).length + (sameLine ? startCh : 0);
-    if (first) {
-      // Fix up .to properties of first
-      for (var i = 0; i < first.length; ++i) {
-        var span = first[i];
-        if (span.to == null) {
-          var found = getMarkedSpanFor(last, span.marker);
-          if (!found) span.to = startCh;
-          else if (sameLine) span.to = found.to == null ? null : found.to + offset;
-        }
-      }
-    }
-    if (last) {
-      // Fix up .from in last (or move them into first in case of sameLine)
-      for (var i = 0; i < last.length; ++i) {
-        var span = last[i];
-        if (span.to != null) span.to += offset;
-        if (span.from == null) {
-          var found = getMarkedSpanFor(first, span.marker);
-          if (!found) {
-            span.from = offset;
-            if (sameLine) (first || (first = [])).push(span);
-          }
-        } else {
-          span.from += offset;
-          if (sameLine) (first || (first = [])).push(span);
-        }
-      }
-    }
-    // Make sure we didn't create any zero-length spans
-    if (first) first = clearEmptySpans(first);
-    if (last && last != first) last = clearEmptySpans(last);
-
-    var newMarkers = [first];
-    if (!sameLine) {
-      // Fill gap with whole-line-spans
-      var gap = change.text.length - 2, gapMarkers;
-      if (gap > 0 && first)
-        for (var i = 0; i < first.length; ++i)
-          if (first[i].to == null)
-            (gapMarkers || (gapMarkers = [])).push({from: null, to: null, marker: first[i].marker});
-      for (var i = 0; i < gap; ++i)
-        newMarkers.push(gapMarkers);
-      newMarkers.push(last);
-    }
-    return newMarkers;
-  }
-
-  function clearEmptySpans(spans) {
-    for (var i = 0; i < spans.length; ++i) {
-      var span = spans[i];
-      if (span.from != null && span.from == span.to && span.marker.clearWhenEmpty !== false)
-        spans.splice(i--, 1);
-    }
-    if (!spans.length) return null;
-    return spans;
-  }
-
-  function mergeOldSpans(doc, change) {
-    var old = getOldSpans(doc, change);
-    var stretched = stretchSpansOverChange(doc, change);
-    if (!old) return stretched;
-    if (!stretched) return old;
-
-    for (var i = 0; i < old.length; ++i) {
-      var oldCur = old[i], stretchCur = stretched[i];
-      if (oldCur && stretchCur) {
-        spans: for (var j = 0; j < stretchCur.length; ++j) {
-          var span = stretchCur[j];
-          for (var k = 0; k < oldCur.length; ++k)
-            if (oldCur[k].marker == span.marker) continue spans;
-          oldCur.push(span);
-        }
-      } else if (stretchCur) {
-        old[i] = stretchCur;
-      }
-    }
-    return old;
-  }
-
-  function removeReadOnlyRanges(doc, from, to) {
-    var markers = null;
-    doc.iter(from.line, to.line + 1, function(line) {
-      if (line.markedSpans) for (var i = 0; i < line.markedSpans.length; ++i) {
-        var mark = line.markedSpans[i].marker;
-        if (mark.readOnly && (!markers || indexOf(markers, mark) == -1))
-          (markers || (markers = [])).push(mark);
-      }
-    });
-    if (!markers) return null;
-    var parts = [{from: from, to: to}];
-    for (var i = 0; i < markers.length; ++i) {
-      var mk = markers[i], m = mk.find();
-      for (var j = 0; j < parts.length; ++j) {
-        var p = parts[j];
-        if (posLess(p.to, m.from) || posLess(m.to, p.from)) continue;
-        var newParts = [j, 1];
-        if (posLess(p.from, m.from) || !mk.inclusiveLeft && posEq(p.from, m.from))
-          newParts.push({from: p.from, to: m.from});
-        if (posLess(m.to, p.to) || !mk.inclusiveRight && posEq(p.to, m.to))
-          newParts.push({from: m.to, to: p.to});
-        parts.splice.apply(parts, newParts);
-        j += newParts.length - 1;
-      }
-    }
-    return parts;
-  }
-
-  function extraLeft(marker) { return marker.inclusiveLeft ? -1 : 0; }
-  function extraRight(marker) { return marker.inclusiveRight ? 1 : 0; }
-
-  function compareCollapsedMarkers(a, b) {
-    var lenDiff = a.lines.length - b.lines.length;
-    if (lenDiff != 0) return lenDiff;
-    var aPos = a.find(), bPos = b.find();
-    var fromCmp = cmp(aPos.from, bPos.from) || extraLeft(a) - extraLeft(b);
-    if (fromCmp) return -fromCmp;
-    var toCmp = cmp(aPos.to, bPos.to) || extraRight(a) - extraRight(b);
-    if (toCmp) return toCmp;
-    return b.id - a.id;
-  }
-
-  function collapsedSpanAtSide(line, start) {
-    var sps = sawCollapsedSpans && line.markedSpans, found;
-    if (sps) for (var sp, i = 0; i < sps.length; ++i) {
-      sp = sps[i];
-      if (sp.marker.collapsed && (start ? sp.from : sp.to) == null &&
-          (!found || compareCollapsedMarkers(found, sp.marker) < 0))
-        found = sp.marker;
-    }
-    return found;
-  }
-  function collapsedSpanAtStart(line) { return collapsedSpanAtSide(line, true); }
-  function collapsedSpanAtEnd(line) { return collapsedSpanAtSide(line, false); }
-
-  function conflictingCollapsedRange(doc, lineNo, from, to, marker) {
-    var line = getLine(doc, lineNo);
-    var sps = sawCollapsedSpans && line.markedSpans;
-    if (sps) for (var i = 0; i < sps.length; ++i) {
-      var sp = sps[i];
-      if (!sp.marker.collapsed) continue;
-      var found = sp.marker.find(true);
-      var fromCmp = cmp(found.from, from) || extraLeft(sp.marker) - extraLeft(marker);
-      var toCmp = cmp(found.to, to) || extraRight(sp.marker) - extraRight(marker);
-      if (fromCmp >= 0 && toCmp <= 0 || fromCmp <= 0 && toCmp >= 0) continue;
-      if (fromCmp <= 0 && (cmp(found.to, from) || extraRight(sp.marker) - extraLeft(marker)) > 0 ||
-          fromCmp >= 0 && (cmp(found.from, to) || extraLeft(sp.marker) - extraRight(marker)) < 0)
-        return true;
-    }
-  }
-
-  function visualLine(doc, line) {
-    var merged;
-    while (merged = collapsedSpanAtStart(line))
-      line = getLine(doc, merged.find().from.line);
-    return line;
-  }
-
-  function lineIsHidden(doc, line) {
-    var sps = sawCollapsedSpans && line.markedSpans;
-    if (sps) for (var sp, i = 0; i < sps.length; ++i) {
-      sp = sps[i];
-      if (!sp.marker.collapsed) continue;
-      if (sp.from == null) return true;
-      if (sp.marker.replacedWith) continue;
-      if (sp.from == 0 && sp.marker.inclusiveLeft && lineIsHiddenInner(doc, line, sp))
-        return true;
-    }
-  }
-  function lineIsHiddenInner(doc, line, span) {
-    if (span.to == null) {
-      var end = span.marker.find().to, endLine = getLine(doc, end.line);
-      return lineIsHiddenInner(doc, endLine, getMarkedSpanFor(endLine.markedSpans, span.marker));
-    }
-    if (span.marker.inclusiveRight && span.to == line.text.length)
-      return true;
-    for (var sp, i = 0; i < line.markedSpans.length; ++i) {
-      sp = line.markedSpans[i];
-      if (sp.marker.collapsed && !sp.marker.replacedWith && sp.from == span.to &&
-          (sp.to == null || sp.to != span.from) &&
-          (sp.marker.inclusiveLeft || span.marker.inclusiveRight) &&
-          lineIsHiddenInner(doc, line, sp)) return true;
-    }
-  }
-
-  function detachMarkedSpans(line) {
-    var spans = line.markedSpans;
-    if (!spans) return;
-    for (var i = 0; i < spans.length; ++i)
-      spans[i].marker.detachLine(line);
-    line.markedSpans = null;
-  }
-
-  function attachMarkedSpans(line, spans) {
-    if (!spans) return;
-    for (var i = 0; i < spans.length; ++i)
-      spans[i].marker.attachLine(line);
-    line.markedSpans = spans;
-  }
-
-  // LINE WIDGETS
-
-  var LineWidget = CodeMirror.LineWidget = function(cm, node, options) {
-    if (options) for (var opt in options) if (options.hasOwnProperty(opt))
-      this[opt] = options[opt];
-    this.cm = cm;
-    this.node = node;
-  };
-  eventMixin(LineWidget);
-  function widgetOperation(f) {
-    return function() {
-      var withOp = !this.cm.curOp;
-      if (withOp) startOperation(this.cm);
-      try {var result = f.apply(this, arguments);}
-      finally {if (withOp) endOperation(this.cm);}
-      return result;
-    };
-  }
-  LineWidget.prototype.clear = widgetOperation(function() {
-    var ws = this.line.widgets, no = lineNo(this.line);
-    if (no == null || !ws) return;
-    for (var i = 0; i < ws.length; ++i) if (ws[i] == this) ws.splice(i--, 1);
-    if (!ws.length) this.line.widgets = null;
-    var aboveVisible = heightAtLine(this.cm, this.line) < this.cm.doc.scrollTop;
-    updateLineHeight(this.line, Math.max(0, this.line.height - widgetHeight(this)));
-    if (aboveVisible) addToScrollPos(this.cm, 0, -this.height);
-    regChange(this.cm, no, no + 1);
-  });
-  LineWidget.prototype.changed = widgetOperation(function() {
-    var oldH = this.height;
-    this.height = null;
-    var diff = widgetHeight(this) - oldH;
-    if (!diff) return;
-    updateLineHeight(this.line, this.line.height + diff);
-    var no = lineNo(this.line);
-    regChange(this.cm, no, no + 1);
-  });
-
-  function widgetHeight(widget) {
-    if (widget.height != null) return widget.height;
-    if (!widget.node.parentNode || widget.node.parentNode.nodeType != 1)
-      removeChildrenAndAdd(widget.cm.display.measure, elt("div", [widget.node], null, "position: relative"));
-    return widget.height = widget.node.offsetHeight;
-  }
-
-  function addLineWidget(cm, handle, node, options) {
-    var widget = new LineWidget(cm, node, options);
-    if (widget.noHScroll) cm.display.alignWidgets = true;
-    changeLine(cm, handle, function(line) {
-      var widgets = line.widgets || (line.widgets = []);
-      if (widget.insertAt == null) widgets.push(widget);
-      else widgets.splice(Math.min(widgets.length - 1, Math.max(0, widget.insertAt)), 0, widget);
-      widget.line = line;
-      if (!lineIsHidden(cm.doc, line) || widget.showIfHidden) {
-        var aboveVisible = heightAtLine(cm, line) < cm.doc.scrollTop;
-        updateLineHeight(line, line.height + widgetHeight(widget));
-        if (aboveVisible) addToScrollPos(cm, 0, widget.height);
-      }
-      return true;
-    });
-    return widget;
-  }
-
-  // LINE DATA STRUCTURE
-
-  // Line objects. These hold state related to a line, including
-  // highlighting info (the styles array).
-  var Line = CodeMirror.Line = function(text, markedSpans, estimateHeight) {
-    this.text = text;
-    attachMarkedSpans(this, markedSpans);
-    this.height = estimateHeight ? estimateHeight(this) : 1;
-  };
-  eventMixin(Line);
-  Line.prototype.lineNo = function() { return lineNo(this); };
-
-  function updateLine(line, text, markedSpans, estimateHeight) {
-    line.text = text;
-    if (line.stateAfter) line.stateAfter = null;
-    if (line.styles) line.styles = null;
-    if (line.order != null) line.order = null;
-    detachMarkedSpans(line);
-    attachMarkedSpans(line, markedSpans);
-    var estHeight = estimateHeight ? estimateHeight(line) : 1;
-    if (estHeight != line.height) updateLineHeight(line, estHeight);
-  }
-
-  function cleanUpLine(line) {
-    line.parent = null;
-    detachMarkedSpans(line);
-  }
-
-  // Run the given mode's parser over a line, update the styles
-  // array, which contains alternating fragments of text and CSS
-  // classes.
-  function runMode(cm, text, mode, state, f, forceToEnd) {
-    var flattenSpans = mode.flattenSpans;
-    if (flattenSpans == null) flattenSpans = cm.options.flattenSpans;
-    var curStart = 0, curStyle = null;
-    var stream = new StringStream(text, cm.options.tabSize), style;
-    if (text == "" && mode.blankLine) mode.blankLine(state);
-    while (!stream.eol()) {
-      if (stream.pos > cm.options.maxHighlightLength) {
-        flattenSpans = false;
-        if (forceToEnd) processLine(cm, text, state, stream.pos);
-        stream.pos = text.length;
-        style = null;
-      } else {
-        style = mode.token(stream, state);
-      }
-      if (!flattenSpans || curStyle != style) {
-        if (curStart < stream.start) f(stream.start, curStyle);
-        curStart = stream.start; curStyle = style;
-      }
-      stream.start = stream.pos;
-    }
-    while (curStart < stream.pos) {
-      // Webkit seems to refuse to render text nodes longer than 57444 characters
-      var pos = Math.min(stream.pos, curStart + 50000);
-      f(pos, curStyle);
-      curStart = pos;
-    }
-  }
-
-  function highlightLine(cm, line, state, forceToEnd) {
-    // A styles array always starts with a number identifying the
-    // mode/overlays that it is based on (for easy invalidation).
-    var st = [cm.state.modeGen];
-    // Compute the base array of styles
-    runMode(cm, line.text, cm.doc.mode, state, function(end, style) {
-      st.push(end, style);
-    }, forceToEnd);
-
-    // Run overlays, adjust style array.
-    for (var o = 0; o < cm.state.overlays.length; ++o) {
-      var overlay = cm.state.overlays[o], i = 1, at = 0;
-      runMode(cm, line.text, overlay.mode, true, function(end, style) {
-        var start = i;
-        // Ensure there's a token end at the current position, and that i points at it
-        while (at < end) {
-          var i_end = st[i];
-          if (i_end > end)
-            st.splice(i, 1, end, st[i+1], i_end);
-          i += 2;
-          at = Math.min(end, i_end);
-        }
-        if (!style) return;
-        if (overlay.opaque) {
-          st.splice(start, i - start, end, style);
-          i = start + 2;
-        } else {
-          for (; start < i; start += 2) {
-            var cur = st[start+1];
-            st[start+1] = cur ? cur + " " + style : style;
-          }
-        }
-      });
-    }
-
-    return st;
-  }
-
-  function getLineStyles(cm, line) {
-    if (!line.styles || line.styles[0] != cm.state.modeGen)
-      line.styles = highlightLine(cm, line, line.stateAfter = getStateBefore(cm, lineNo(line)));
-    return line.styles;
-  }
-
-  // Lightweight form of highlight -- proceed over this line and
-  // update state, but don't save a style array.
-  function processLine(cm, text, state, startAt) {
-    var mode = cm.doc.mode;
-    var stream = new StringStream(text, cm.options.tabSize);
-    stream.start = stream.pos = startAt || 0;
-    if (text == "" && mode.blankLine) mode.blankLine(state);
-    while (!stream.eol() && stream.pos <= cm.options.maxHighlightLength) {
-      mode.token(stream, state);
-      stream.start = stream.pos;
-    }
-  }
-
-  var styleToClassCache = {};
-  function interpretTokenStyle(style, builder) {
-    if (!style) return null;
-    for (;;) {
-      var lineClass = style.match(/(?:^|\s)line-(background-)?(\S+)/);
-      if (!lineClass) break;
-      style = style.slice(0, lineClass.index) + style.slice(lineClass.index + lineClass[0].length);
-      var prop = lineClass[1] ? "bgClass" : "textClass";
-      if (builder[prop] == null)
-        builder[prop] = lineClass[2];
-      else if (!(new RegExp("(?:^|\s)" + lineClass[2] + "(?:$|\s)")).test(builder[prop]))
-        builder[prop] += " " + lineClass[2];
-    }
-    return styleToClassCache[style] ||
-      (styleToClassCache[style] = "cm-" + style.replace(/ +/g, " cm-"));
-  }
-
-  function buildLineContent(cm, realLine, measure, copyWidgets) {
-    var merged, line = realLine, empty = true;
-    while (merged = collapsedSpanAtStart(line))
-      line = getLine(cm.doc, merged.find().from.line);
-
-    var builder = {pre: elt("pre"), col: 0, pos: 0,
-                   measure: null, measuredSomething: false, cm: cm,
-                   copyWidgets: copyWidgets};
-
-    do {
-      if (line.text) empty = false;
-      builder.measure = line == realLine && measure;
-      builder.pos = 0;
-      builder.addToken = builder.measure ? buildTokenMeasure : buildToken;
-      if ((ie || webkit) && cm.getOption("lineWrapping"))
-        builder.addToken = buildTokenSplitSpaces(builder.addToken);
-      var next = insertLineContent(line, builder, getLineStyles(cm, line));
-      if (measure && line == realLine && !builder.measuredSomething) {
-        measure[0] = builder.pre.appendChild(zeroWidthElement(cm.display.measure));
-        builder.measuredSomething = true;
-      }
-      if (next) line = getLine(cm.doc, next.to.line);
-    } while (next);
-
-    if (measure && !builder.measuredSomething && !measure[0])
-      measure[0] = builder.pre.appendChild(empty ? elt("span", "\u00a0") : zeroWidthElement(cm.display.measure));
-    if (!builder.pre.firstChild && !lineIsHidden(cm.doc, realLine))
-      builder.pre.appendChild(document.createTextNode("\u00a0"));
-
-    var order;
-    // Work around problem with the reported dimensions of single-char
-    // direction spans on IE (issue #1129). See also the comment in
-    // cursorCoords.
-    if (measure && (ie || ie_gt10) && (order = getOrder(line))) {
-      var l = order.length - 1;
-      if (order[l].from == order[l].to) --l;
-      var last = order[l], prev = order[l - 1];
-      if (last.from + 1 == last.to && prev && last.level < prev.level) {
-        var span = measure[builder.pos - 1];
-        if (span) span.parentNode.insertBefore(span.measureRight = zeroWidthElement(cm.display.measure),
-                                               span.nextSibling);
-      }
-    }
-
-    var textClass = builder.textClass ? builder.textClass + " " + (realLine.textClass || "") : realLine.textClass;
-    if (textClass) builder.pre.className = textClass;
-
-    signal(cm, "renderLine", cm, realLine, builder.pre);
-    return builder;
-  }
-
-  function defaultSpecialCharPlaceholder(ch) {
-    var token = elt("span", "\u2022", "cm-invalidchar");
-    token.title = "\\u" + ch.charCodeAt(0).toString(16);
-    return token;
-  }
-
-  function buildToken(builder, text, style, startStyle, endStyle, title) {
-    if (!text) return;
-    var special = builder.cm.options.specialChars;
-    if (!special.test(text)) {
-      builder.col += text.length;
-      var content = document.createTextNode(text);
-    } else {
-      var content = document.createDocumentFragment(), pos = 0;
-      while (true) {
-        special.lastIndex = pos;
-        var m = special.exec(text);
-        var skipped = m ? m.index - pos : text.length - pos;
-        if (skipped) {
-          content.appendChild(document.createTextNode(text.slice(pos, pos + skipped)));
-          builder.col += skipped;
-        }
-        if (!m) break;
-        pos += skipped + 1;
-        if (m[0] == "\t") {
-          var tabSize = builder.cm.options.tabSize, tabWidth = tabSize - builder.col % tabSize;
-          content.appendChild(elt("span", spaceStr(tabWidth), "cm-tab"));
-          builder.col += tabWidth;
-        } else {
-          var token = builder.cm.options.specialCharPlaceholder(m[0]);
-          content.appendChild(token);
-          builder.col += 1;
-        }
-      }
-    }
-    if (style || startStyle || endStyle || builder.measure) {
-      var fullStyle = style || "";
-      if (startStyle) fullStyle += startStyle;
-      if (endStyle) fullStyle += endStyle;
-      var token = elt("span", [content], fullStyle);
-      if (title) token.title = title;
-      return builder.pre.appendChild(token);
-    }
-    builder.pre.appendChild(content);
-  }
-
-  function buildTokenMeasure(builder, text, style, startStyle, endStyle) {
-    var wrapping = builder.cm.options.lineWrapping;
-    for (var i = 0; i < text.length; ++i) {
-      var ch = text.charAt(i), start = i == 0;
-      if (ch >= "\ud800" && ch < "\udbff" && i < text.length - 1) {
-        ch = text.slice(i, i + 2);
-        ++i;
-      } else if (i && wrapping && spanAffectsWrapping(text, i)) {
-        builder.pre.appendChild(elt("wbr"));
-      }
-      var old = builder.measure[builder.pos];
-      var span = builder.measure[builder.pos] =
-        buildToken(builder, ch, style,
-                   start && startStyle, i == text.length - 1 && endStyle);
-      if (old) span.leftSide = old.leftSide || old;
-      // In IE single-space nodes wrap differently than spaces
-      // embedded in larger text nodes, except when set to
-      // white-space: normal (issue #1268).
-      if (ie && wrapping && ch == " " && i && !/\s/.test(text.charAt(i - 1)) &&
-          i < text.length - 1 && !/\s/.test(text.charAt(i + 1)))
-        span.style.whiteSpace = "normal";
-      builder.pos += ch.length;
-    }
-    if (text.length) builder.measuredSomething = true;
-  }
-
-  function buildTokenSplitSpaces(inner) {
-    function split(old) {
-      var out = " ";
-      for (var i = 0; i < old.length - 2; ++i) out += i % 2 ? " " : "\u00a0";
-      out += " ";
-      return out;
-    }
-    return function(builder, text, style, startStyle, endStyle, title) {
-      return inner(builder, text.replace(/ {3,}/g, split), style, startStyle, endStyle, title);
-    };
-  }
-
-  function buildCollapsedSpan(builder, size, marker, ignoreWidget) {
-    var widget = !ignoreWidget && marker.replacedWith;
-    if (widget) {
-      if (builder.copyWidgets) widget = widget.cloneNode(true);
-      builder.pre.appendChild(widget);
-      if (builder.measure) {
-        if (size) {
-          builder.measure[builder.pos] = widget;
-        } else {
-          var elt = zeroWidthElement(builder.cm.display.measure);
-          if (marker.type == "bookmark" && !marker.insertLeft)
-            builder.measure[builder.pos] = builder.pre.appendChild(elt);
-          else if (builder.measure[builder.pos])
-            return;
-          else
-            builder.measure[builder.pos] = builder.pre.insertBefore(elt, widget);
-        }
-        builder.measuredSomething = true;
-      }
-    }
-    builder.pos += size;
-  }
-
-  // Outputs a number of spans to make up a line, taking highlighting
-  // and marked text into account.
-  function insertLineContent(line, builder, styles) {
-    var spans = line.markedSpans, allText = line.text, at = 0;
-    if (!spans) {
-      for (var i = 1; i < styles.length; i+=2)
-        builder.addToken(builder, allText.slice(at, at = styles[i]), interpretTokenStyle(styles[i+1], builder));
-      return;
-    }
-
-    var len = allText.length, pos = 0, i = 1, text = "", style;
-    var nextChange = 0, spanStyle, spanEndStyle, spanStartStyle, title, collapsed;
-    for (;;) {
-      if (nextChange == pos) { // Update current marker set
-        spanStyle = spanEndStyle = spanStartStyle = title = "";
-        collapsed = null; nextChange = Infinity;
-        var foundBookmarks = [];
-        for (var j = 0; j < spans.length; ++j) {
-          var sp = spans[j], m = sp.marker;
-          if (sp.from <= pos && (sp.to == null || sp.to > pos)) {
-            if (sp.to != null && nextChange > sp.to) { nextChange = sp.to; spanEndStyle = ""; }
-            if (m.className) spanStyle += " " + m.className;
-            if (m.startStyle && sp.from == pos) spanStartStyle += " " + m.startStyle;
-            if (m.endStyle && sp.to == nextChange) spanEndStyle += " " + m.endStyle;
-            if (m.title && !title) title = m.title;
-            if (m.collapsed && (!collapsed || compareCollapsedMarkers(collapsed.marker, m) < 0))
-              collapsed = sp;
-          } else if (sp.from > pos && nextChange > sp.from) {
-            nextChange = sp.from;
-          }
-          if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmarks.push(m);
-        }
-        if (collapsed && (collapsed.from || 0) == pos) {
-          buildCollapsedSpan(builder, (collapsed.to == null ? len : collapsed.to) - pos,
-                             collapsed.marker, collapsed.from == null);
-          if (collapsed.to == null) return collapsed.marker.find();
-        }
-        if (!collapsed && foundBookmarks.length) for (var j = 0; j < foundBookmarks.length; ++j)
-          buildCollapsedSpan(builder, 0, foundBookmarks[j]);
-      }
-      if (pos >= len) break;
-
-      var upto = Math.min(len, nextChange);
-      while (true) {
-        if (text) {
-          var end = pos + text.length;
-          if (!collapsed) {
-            var tokenText = end > upto ? text.slice(0, upto - pos) : text;
-            builder.addToken(builder, tokenText, style ? style + spanStyle : spanStyle,
-                             spanStartStyle, pos + tokenText.length == nextChange ? spanEndStyle : "", title);
-          }
-          if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
-          pos = end;
-          spanStartStyle = "";
-        }
-        text = allText.slice(at, at = styles[i++]);
-        style = interpretTokenStyle(styles[i++], builder);
-      }
-    }
-  }
-
-  // DOCUMENT DATA STRUCTURE
-
-  function updateDoc(doc, change, markedSpans, selAfter, estimateHeight) {
-    function spansFor(n) {return markedSpans ? markedSpans[n] : null;}
-    function update(line, text, spans) {
-      updateLine(line, text, spans, estimateHeight);
-      signalLater(line, "change", line, change);
-    }
-
-    var from = change.from, to = change.to, text = change.text;
-    var firstLine = getLine(doc, from.line), lastLine = getLine(doc, to.line);
-    var lastText = lst(text), lastSpans = spansFor(text.length - 1), nlines = to.line - from.line;
-
-    // First adjust the line structure
-    if (from.ch == 0 && to.ch == 0 && lastText == "" &&
-        (!doc.cm || doc.cm.options.wholeLineUpdateBefore)) {
-      // This is a whole-line replace. Treated specially to make
-      // sure line objects move the way they are supposed to.
-      for (var i = 0, e = text.length - 1, added = []; i < e; ++i)
-        added.push(new Line(text[i], spansFor(i), estimateHeight));
-      update(lastLine, lastLine.text, lastSpans);
-      if (nlines) doc.remove(from.line, nlines);
-      if (added.length) doc.insert(from.line, added);
-    } else if (firstLine == lastLine) {
-      if (text.length == 1) {
-        update(firstLine, firstLine.text.slice(0, from.ch) + lastText + firstLine.text.slice(to.ch), lastSpans);
-      } else {
-        for (var added = [], i = 1, e = text.length - 1; i < e; ++i)
-          added.push(new Line(text[i], spansFor(i), estimateHeight));
-        added.push(new Line(lastText + firstLine.text.slice(to.ch), lastSpans, estimateHeight));
-        update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
-        doc.insert(from.line + 1, added);
-      }
-    } else if (text.length == 1) {
-      update(firstLine, firstLine.text.slice(0, from.ch) + text[0] + lastLine.text.slice(to.ch), spansFor(0));
-      doc.remove(from.line + 1, nlines);
-    } else {
-      update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
-      update(lastLine, lastText + lastLine.text.slice(to.ch), lastSpans);
-      for (var i = 1, e = text.length - 1, added = []; i < e; ++i)
-        added.push(new Line(text[i], spansFor(i), estimateHeight));
-      if (nlines > 1) doc.remove(from.line + 1, nlines - 1);
-      doc.insert(from.line + 1, added);
-    }
-
-    signalLater(doc, "change", doc, change);
-    setSelection(doc, selAfter.anchor, selAfter.head, null, true);
-  }
-
-  function LeafChunk(lines) {
-    this.lines = lines;
-    this.parent = null;
-    for (var i = 0, e = lines.length, height = 0; i < e; ++i) {
-      lines[i].parent = this;
-      height += lines[i].height;
-    }
-    this.height = height;
-  }
-
-  LeafChunk.prototype = {
-    chunkSize: function() { return this.lines.length; },
-    removeInner: function(at, n) {
-      for (var i = at, e = at + n; i < e; ++i) {
-        var line = this.lines[i];
-        this.height -= line.height;
-        cleanUpLine(line);
-        signalLater(line, "delete");
-      }
-      this.lines.splice(at, n);
-    },
-    collapse: function(lines) {
-      lines.splice.apply(lines, [lines.length, 0].concat(this.lines));
-    },
-    insertInner: function(at, lines, height) {
-      this.height += height;
-      this.lines = this.lines.slice(0, at).concat(lines).concat(this.lines.slice(at));
-      for (var i = 0, e = lines.length; i < e; ++i) lines[i].parent = this;
-    },
-    iterN: function(at, n, op) {
-      for (var e = at + n; at < e; ++at)
-        if (op(this.lines[at])) return true;
-    }
-  };
-
-  function BranchChunk(children) {
-    this.children = children;
-    var size = 0, height = 0;
-    for (var i = 0, e = children.length; i < e; ++i) {
-      var ch = children[i];
-      size += ch.chunkSize(); height += ch.height;
-      ch.parent = this;
-    }
-    this.size = size;
-    this.height = height;
-    this.parent = null;
-  }
-
-  BranchChunk.prototype = {
-    chunkSize: function() { return this.size; },
-    removeInner: function(at, n) {
-      this.size -= n;
-      for (var i = 0; i < this.children.length; ++i) {
-        var child = this.children[i], sz = child.chunkSize();
-        if (at < sz) {
-          var rm = Math.min(n, sz - at), oldHeight = child.height;
-          child.removeInner(at, rm);
-          this.height -= oldHeight - child.height;
-          if (sz == rm) { this.children.splice(i--, 1); child.parent = null; }
-          if ((n -= rm) == 0) break;
-          at = 0;
-        } else at -= sz;
-      }
-      if (this.size - n < 25) {
-        var lines = [];
-        this.collapse(lines);
-        this.children = [new LeafChunk(lines)];
-        this.children[0].parent = this;
-      }
-    },
-    collapse: function(lines) {
-      for (var i = 0, e = this.children.length; i < e; ++i) this.children[i].collapse(lines);
-    },
-    insertInner: function(at, lines, height) {
-      this.size += lines.length;
-      this.height += height;
-      for (var i = 0, e = this.children.length; i < e; ++i) {
-        var child = this.children[i], sz = child.chunkSize();
-        if (at <= sz) {
-          child.insertInner(at, lines, height);
-          if (child.lines && child.lines.length > 50) {
-            while (child.lines.length > 50) {
-              var spilled = child.lines.splice(child.lines.length - 25, 25);
-              var newleaf = new LeafChunk(spilled);
-              child.height -= newleaf.height;
-              this.children.splice(i + 1, 0, newleaf);
-              newleaf.parent = this;
-            }
-            this.maybeSpill();
-          }
-          break;
-        }
-        at -= sz;
-      }
-    },
-    maybeSpill: function() {
-      if (this.children.length <= 10) return;
-      var me = this;
-      do {
-        var spilled = me.children.splice(me.children.length - 5, 5);
-        var sibling = new BranchChunk(spilled);
-        if (!me.parent) { // Become the parent node
-          var copy = new BranchChunk(me.children);
-          copy.parent = me;
-          me.children = [copy, sibling];
-          me = copy;
-        } else {
-          me.size -= sibling.size;
-          me.height -= sibling.height;
-          var myIndex = indexOf(me.parent.children, me);
-          me.parent.children.splice(myIndex + 1, 0, sibling);
-        }
-        sibling.parent = me.parent;
-      } while (me.children.length > 10);
-      me.parent.maybeSpill();
-    },
-    iterN: function(at, n, op) {
-      for (var i = 0, e = this.children.length; i < e; ++i) {
-        var child = this.children[i], sz = child.chunkSize();
-        if (at < sz) {
-          var used = Math.min(n, sz - at);
-          if (child.iterN(at, used, op)) return true;
-          if ((n -= used) == 0) break;
-          at = 0;
-        } else at -= sz;
-      }
-    }
-  };
-
-  var nextDocId = 0;
-  var Doc = CodeMirror.Doc = function(text, mode, firstLine) {
-    if (!(this instanceof Doc)) return new Doc(text, mode, firstLine);
-    if (firstLine == null) firstLine = 0;
-
-    BranchChunk.call(this, [new LeafChunk([new Line("", null)])]);
-    this.first = firstLine;
-    this.scrollTop = this.scrollLeft = 0;
-    this.cantEdit = false;
-    this.history = makeHistory();
-    this.cleanGeneration = 1;
-    this.frontier = firstLine;
-    var start = Pos(firstLine, 0);
-    this.sel = {from: start, to: start, head: start, anchor: start, shift: false, extend: false, goalColumn: null};
-    this.id = ++nextDocId;
-    this.modeOption = mode;
-
-    if (typeof text == "string") text = splitLines(text);
-    updateDoc(this, {from: start, to: start, text: text}, null, {head: start, anchor: start});
-  };
-
-  Doc.prototype = createObj(BranchChunk.prototype, {
-    constructor: Doc,
-    iter: function(from, to, op) {
-      if (op) this.iterN(from - this.first, to - from, op);
-      else this.iterN(this.first, this.first + this.size, from);
-    },
-
-    insert: function(at, lines) {
-      var height = 0;
-      for (var i = 0, e = lines.length; i < e; ++i) height += lines[i].height;
-      this.insertInner(at - this.first, lines, height);
-    },
-    remove: function(at, n) { this.removeInner(at - this.first, n); },
-
-    getValue: function(lineSep) {
-      var lines = getLines(this, this.first, this.first + this.size);
-      if (lineSep === false) return lines;
-      return lines.join(lineSep || "\n");
-    },
-    setValue: function(code) {
-      var top = Pos(this.first, 0), last = this.first + this.size - 1;
-      makeChange(this, {from: top, to: Pos(last, getLine(this, last).text.length),
-                        text: splitLines(code), origin: "setValue"},
-                 {head: top, anchor: top}, true);
-    },
-    replaceRange: function(code, from, to, origin) {
-      from = clipPos(this, from);
-      to = to ? clipPos(this, to) : from;
-      replaceRange(this, code, from, to, origin);
-    },
-    getRange: function(from, to, lineSep) {
-      var lines = getBetween(this, clipPos(this, from), clipPos(this, to));
-      if (lineSep === false) return lines;
-      return lines.join(lineSep || "\n");
-    },
-
-    getLine: function(line) {var l = this.getLineHandle(line); return l && l.text;},
-    setLine: function(line, text) {
-      if (isLine(this, line))
-        replaceRange(this, text, Pos(line, 0), clipPos(this, Pos(line)));
-    },
-    removeLine: function(line) {
-      if (line) replaceRange(this, "", clipPos(this, Pos(line - 1)), clipPos(this, Pos(line)));
-      else replaceRange(this, "", Pos(0, 0), clipPos(this, Pos(1, 0)));
-    },
-
-    getLineHandle: function(line) {if (isLine(this, line)) return getLine(this, line);},
-    getLineNumber: function(line) {return lineNo(line);},
-
-    getLineHandleVisualStart: function(line) {
-      if (typeof line == "number") line = getLine(this, line);
-      return visualLine(this, line);
-    },
-
-    lineCount: function() {return this.size;},
-    firstLine: function() {return this.first;},
-    lastLine: function() {return this.first + this.size - 1;},
-
-    clipPos: function(pos) {return clipPos(this, pos);},
-
-    getCursor: function(start) {
-      var sel = this.sel, pos;
-      if (start == null || start == "head") pos = sel.head;
-      else if (start == "anchor") pos = sel.anchor;
-      else if (start == "end" || start === false) pos = sel.to;
-      else pos = sel.from;
-      return copyPos(pos);
-    },
-    somethingSelected: function() {return !posEq(this.sel.head, this.sel.anchor);},
-
-    setCursor: docOperation(function(line, ch, extend) {
-      var pos = clipPos(this, typeof line == "number" ? Pos(line, ch || 0) : line);
-      if (extend) extendSelection(this, pos);
-      else setSelection(this, pos, pos);
-    }),
-    setSelection: docOperation(function(anchor, head, bias) {
-      setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor), bias);
-    }),
-    extendSelection: docOperation(function(from, to, bias) {
-      extendSelection(this, clipPos(this, from), to && clipPos(this, to), bias);
-    }),
-
-    getSelection: function(lineSep) {return this.getRange(this.sel.from, this.sel.to, lineSep);},
-    replaceSelection: function(code, collapse, origin) {
-      makeChange(this, {from: this.sel.from, to: this.sel.to, text: splitLines(code), origin: origin}, collapse || "around");
-    },
-    undo: docOperation(function() {makeChangeFromHistory(this, "undo");}),
-    redo: docOperation(function() {makeChangeFromHistory(this, "redo");}),
-
-    setExtending: function(val) {this.sel.extend = val;},
-
-    historySize: function() {
-      var hist = this.history;
-      return {undo: hist.done.length, redo: hist.undone.length};
-    },
-    clearHistory: function() {this.history = makeHistory(this.history.maxGeneration);},
-
-    markClean: function() {
-      this.cleanGeneration = this.changeGeneration(true);
-    },
-    changeGeneration: function(forceSplit) {
-      if (forceSplit)
-        this.history.lastOp = this.history.lastOrigin = null;
-      return this.history.generation;
-    },
-    isClean: function (gen) {
-      return this.history.generation == (gen || this.cleanGeneration);
-    },
-
-    getHistory: function() {
-      return {done: copyHistoryArray(this.history.done),
-              undone: copyHistoryArray(this.history.undone)};
-    },
-    setHistory: function(histData) {
-      var hist = this.history = makeHistory(this.history.maxGeneration);
-      hist.done = histData.done.slice(0);
-      hist.undone = histData.undone.slice(0);
-    },
-
-    markText: function(from, to, options) {
-      return markText(this, clipPos(this, from), clipPos(this, to), options, "range");
-    },
-    setBookmark: function(pos, options) {
-      var realOpts = {replacedWith: options && (options.nodeType == null ? options.widget : options),
-                      insertLeft: options && options.insertLeft,
-                      clearWhenEmpty: false};
-      pos = clipPos(this, pos);
-      return markText(this, pos, pos, realOpts, "bookmark");
-    },
-    findMarksAt: function(pos) {
-      pos = clipPos(this, pos);
-      var markers = [], spans = getLine(this, pos.line).markedSpans;
-      if (spans) for (var i = 0; i < spans.length; ++i) {
-        var span = spans[i];
-        if ((span.from == null || span.from <= pos.ch) &&
-            (span.to == null || span.to >= pos.ch))
-          markers.push(span.marker.parent || span.marker);
-      }
-      return markers;
-    },
-    getAllMarks: function() {
-      var markers = [];
-      this.iter(function(line) {
-        var sps = line.markedSpans;
-        if (sps) for (var i = 0; i < sps.length; ++i)
-          if (sps[i].from != null) markers.push(sps[i].marker);
-      });
-      return markers;
-    },
-
-    posFromIndex: function(off) {
-      var ch, lineNo = this.first;
-      this.iter(function(line) {
-        var sz = line.text.length + 1;
-        if (sz > off) { ch = off; return true; }
-        off -= sz;
-        ++lineNo;
-      });
-      return clipPos(this, Pos(lineNo, ch));
-    },
-    indexFromPos: function (coords) {
-      coords = clipPos(this, coords);
-      var index = coords.ch;
-      if (coords.line < this.first || coords.ch < 0) return 0;
-      this.iter(this.first, coords.line, function (line) {
-        index += line.text.length + 1;
-      });
-      return index;
-    },
-
-    copy: function(copyHistory) {
-      var doc = new Doc(getLines(this, this.first, this.first + this.size), this.modeOption, this.first);
-      doc.scrollTop = this.scrollTop; doc.scrollLeft = this.scrollLeft;
-      doc.sel = {from: this.sel.from, to: this.sel.to, head: this.sel.head, anchor: this.sel.anchor,
-                 shift: this.sel.shift, extend: false, goalColumn: this.sel.goalColumn};
-      if (copyHistory) {
-        doc.history.undoDepth = this.history.undoDepth;
-        doc.setHistory(this.getHistory());
-      }
-      return doc;
-    },
-
-    linkedDoc: function(options) {
-      if (!options) options = {};
-      var from = this.first, to = this.first + this.size;
-      if (options.from != null && options.from > from) from = options.from;
-      if (options.to != null && options.to < to) to = options.to;
-      var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from);
-      if (options.sharedHist) copy.history = this.history;
-      (this.linked || (this.linked = [])).push({doc: copy, sharedHist: options.sharedHist});
-      copy.linked = [{doc: this, isParent: true, sharedHist: options.sharedHist}];
-      return copy;
-    },
-    unlinkDoc: function(other) {
-      if (other instanceof CodeMirror) other = other.doc;
-      if (this.linked) for (var i = 0; i < this.linked.length; ++i) {
-        var link = this.linked[i];
-        if (link.doc != other) continue;
-        this.linked.splice(i, 1);
-        other.unlinkDoc(this);
-        break;
-      }
-      // If the histories were shared, split them again
-      if (other.history == this.history) {
-        var splitIds = [other.id];
-        linkedDocs(other, function(doc) {splitIds.push(doc.id);}, true);
-        other.history = makeHistory();
-        other.history.done = copyHistoryArray(this.history.done, splitIds);
-        other.history.undone = copyHistoryArray(this.history.undone, splitIds);
-      }
-    },
-    iterLinkedDocs: function(f) {linkedDocs(this, f);},
-
-    getMode: function() {return this.mode;},
-    getEditor: function() {return this.cm;}
-  });
-
-  Doc.prototype.eachLine = Doc.prototype.iter;
-
-  // The Doc methods that should be available on CodeMirror instances
-  var dontDelegate = "iter insert remove copy getEditor".split(" ");
-  for (var prop in Doc.prototype) if (Doc.prototype.hasOwnProperty(prop) && indexOf(dontDelegate, prop) < 0)
-    CodeMirror.prototype[prop] = (function(method) {
-      return function() {return method.apply(this.doc, arguments);};
-    })(Doc.prototype[prop]);
-
-  eventMixin(Doc);
-
-  function linkedDocs(doc, f, sharedHistOnly) {
-    function propagate(doc, skip, sharedHist) {
-      if (doc.linked) for (var i = 0; i < doc.linked.length; ++i) {
-        var rel = doc.linked[i];
-        if (rel.doc == skip) continue;
-        var shared = sharedHist && rel.sharedHist;
-        if (sharedHistOnly && !shared) continue;
-        f(rel.doc, shared);
-        propagate(rel.doc, doc, shared);
-      }
-    }
-    propagate(doc, null, true);
-  }
-
-  function attachDoc(cm, doc) {
-    if (doc.cm) throw new Error("This document is already in use.");
-    cm.doc = doc;
-    doc.cm = cm;
-    estimateLineHeights(cm);
-    loadMode(cm);
-    if (!cm.options.lineWrapping) computeMaxLength(cm);
-    cm.options.mode = doc.modeOption;
-    regChange(cm);
-  }
-
-  // LINE UTILITIES
-
-  function getLine(chunk, n) {
-    n -= chunk.first;
-    while (!chunk.lines) {
-      for (var i = 0;; ++i) {
-        var child = chunk.children[i], sz = child.chunkSize();
-        if (n < sz) { chunk = child; break; }
-        n -= sz;
-      }
-    }
-    return chunk.lines[n];
-  }
-
-  function getBetween(doc, start, end) {
-    var out = [], n = start.line;
-    doc.iter(start.line, end.line + 1, function(line) {
-      var text = line.text;
-      if (n == end.line) text = text.slice(0, end.ch);
-      if (n == start.line) text = text.slice(start.ch);
-      out.push(text);
-      ++n;
-    });
-    return out;
-  }
-  function getLines(doc, from, to) {
-    var out = [];
-    doc.iter(from, to, function(line) { out.push(line.text); });
-    return out;
-  }
-
-  function updateLineHeight(line, height) {
-    var diff = height - line.height;
-    for (var n = line; n; n = n.parent) n.height += diff;
-  }
-
-  function lineNo(line) {
-    if (line.parent == null) return null;
-    var cur = line.parent, no = indexOf(cur.lines, line);
-    for (var chunk = cur.parent; chunk; cur = chunk, chunk = chunk.parent) {
-      for (var i = 0;; ++i) {
-        if (chunk.children[i] == cur) break;
-        no += chunk.children[i].chunkSize();
-      }
-    }
-    return no + cur.first;
-  }
-
-  function lineAtHeight(chunk, h) {
-    var n = chunk.first;
-    outer: do {
-      for (var i = 0, e = chunk.children.length; i < e; ++i) {
-        var child = chunk.children[i], ch = child.height;
-        if (h < ch) { chunk = child; continue outer; }
-        h -= ch;
-        n += child.chunkSize();
-      }
-      return n;
-    } while (!chunk.lines);
-    for (var i = 0, e = chunk.lines.length; i < e; ++i) {
-      var line = chunk.lines[i], lh = line.height;
-      if (h < lh) break;
-      h -= lh;
-    }
-    return n + i;
-  }
-
-  function heightAtLine(cm, lineObj) {
-    lineObj = visualLine(cm.doc, lineObj);
-
-    var h = 0, chunk = lineObj.parent;
-    for (var i = 0; i < chunk.lines.length; ++i) {
-      var line = chunk.lines[i];
-      if (line == lineObj) break;
-      else h += line.height;
-    }
-    for (var p = chunk.parent; p; chunk = p, p = chunk.parent) {
-      for (var i = 0; i < p.children.length; ++i) {
-        var cur = p.children[i];
-        if (cur == chunk) break;
-        else h += cur.height;
-      }
-    }
-    return h;
-  }
-
-  function getOrder(line) {
-    var order = line.order;
-    if (order == null) order = line.order = bidiOrdering(line.text);
-    return order;
-  }
-
-  // HISTORY
-
-  function makeHistory(startGen) {
-    return {
-      // Arrays of history events. Doing something adds an event to
-      // done and clears undo. Undoing moves events from done to
-      // undone, redoing moves them in the other direction.
-      done: [], undone: [], undoDepth: Infinity,
-      // Used to track when changes can be merged into a single undo
-      // event
-      lastTime: 0, lastOp: null, lastOrigin: null,
-      // Used by the isClean() method
-      generation: startGen || 1, maxGeneration: startGen || 1
-    };
-  }
-
-  function attachLocalSpans(doc, change, from, to) {
-    var existing = change["spans_" + doc.id], n = 0;
-    doc.iter(Math.max(doc.first, from), Math.min(doc.first + doc.size, to), function(line) {
-      if (line.markedSpans)
-        (existing || (existing = change["spans_" + doc.id] = {}))[n] = line.markedSpans;
-      ++n;
-    });
-  }
-
-  function historyChangeFromChange(doc, change) {
-    var from = { line: change.from.line, ch: change.from.ch };
-    var histChange = {from: from, to: changeEnd(change), text: getBetween(doc, change.from, change.to)};
-    attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);
-    linkedDocs(doc, function(doc) {attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);}, true);
-    return histChange;
-  }
-
-  function addToHistory(doc, change, selAfter, opId) {
-    var hist = doc.history;
-    hist.undone.length = 0;
-    var time = +new Date, cur = lst(hist.done);
-
-    if (cur &&
-        (hist.lastOp == opId ||
-         hist.lastOrigin == change.origin && change.origin &&
-         ((change.origin.charAt(0) == "+" && doc.cm && hist.lastTime > time - doc.cm.options.historyEventDelay) ||
-          change.origin.charAt(0) == "*"))) {
-      // Merge this change into the last event
-      var last = lst(cur.changes);
-      if (posEq(change.from, change.to) && posEq(change.from, last.to)) {
-        // Optimized case for simple insertion -- don't want to add
-        // new changesets for every character typed
-        last.to = changeEnd(change);
-      } else {
-        // Add new sub-event
-        cur.changes.push(historyChangeFromChange(doc, change));
-      }
-      cur.anchorAfter = selAfter.anchor; cur.headAfter = selAfter.head;
-    } else {
-      // Can not be merged, start a new event.
-      cur = {changes: [historyChangeFromChange(doc, change)],
-             generation: hist.generation,
-             anchorBefore: doc.sel.anchor, headBefore: doc.sel.head,
-             anchorAfter: selAfter.anchor, headAfter: selAfter.head};
-      hist.done.push(cur);
-      while (hist.done.length > hist.undoDepth)
-        hist.done.shift();
-    }
-    hist.generation = ++hist.maxGeneration;
-    hist.lastTime = time;
-    hist.lastOp = opId;
-    hist.lastOrigin = change.origin;
-  }
-
-  function removeClearedSpans(spans) {
-    if (!spans) return null;
-    for (var i = 0, out; i < spans.length; ++i) {
-      if (spans[i].marker.explicitlyCleared) { if (!out) out = spans.slice(0, i); }
-      else if (out) out.push(spans[i]);
-    }
-    return !out ? spans : out.length ? out : null;
-  }
-
-  function getOldSpans(doc, change) {
-    var found = change["spans_" + doc.id];
-    if (!found) return null;
-    for (var i = 0, nw = []; i < change.text.length; ++i)
-      nw.push(removeClearedSpans(found[i]));
-    return nw;
-  }
-
-  // Used both to provide a JSON-safe object in .getHistory, and, when
-  // detaching a document, to split the history in two
-  function copyHistoryArray(events, newGroup) {
-    for (var i = 0, copy = []; i < events.length; ++i) {
-      var event = events[i], changes = event.changes, newChanges = [];
-      copy.push({changes: newChanges, anchorBefore: event.anchorBefore, headBefore: event.headBefore,
-                 anchorAfter: event.anchorAfter, headAfter: event.headAfter});
-      for (var j = 0; j < changes.length; ++j) {
-        var change = changes[j], m;
-        newChanges.push({from: change.from, to: change.to, text: change.text});
-        if (newGroup) for (var prop in change) if (m = prop.match(/^spans_(\d+)$/)) {
-          if (indexOf(newGroup, Number(m[1])) > -1) {
-            lst(newChanges)[prop] = change[prop];
-            delete change[prop];
-          }
-        }
-      }
-    }
-    return copy;
-  }
-
-  // Rebasing/resetting history to deal with externally-sourced changes
-
-  function rebaseHistSel(pos, from, to, diff) {
-    if (to < pos.line) {
-      pos.line += diff;
-    } else if (from < pos.line) {
-      pos.line = from;
-      pos.ch = 0;
-    }
-  }
-
-  // Tries to rebase an array of history events given a change in the
-  // document. If the change touches the same lines as the event, the
-  // event, and everything 'behind' it, is discarded. If the change is
-  // before the event, the event's positions are updated. Uses a
-  // copy-on-write scheme for the positions, to avoid having to
-  // reallocate them all on every rebase, but also avoid problems with
-  // shared position objects being unsafely updated.
-  function rebaseHistArray(array, from, to, diff) {
-    for (var i = 0; i < array.length; ++i) {
-      var sub = array[i], ok = true;
-      for (var j = 0; j < sub.changes.length; ++j) {
-        var cur = sub.changes[j];
-        if (!sub.copied) { cur.from = copyPos(cur.from); cur.to = copyPos(cur.to); }
-        if (to < cur.from.line) {
-          cur.from.line += diff;
-          cur.to.line += diff;
-        } else if (from <= cur.to.line) {
-          ok = false;
-          break;
-        }
-      }
-      if (!sub.copied) {
-        sub.anchorBefore = copyPos(sub.anchorBefore); sub.headBefore = copyPos(sub.headBefore);
-        sub.anchorAfter = copyPos(sub.anchorAfter); sub.readAfter = copyPos(sub.headAfter);
-        sub.copied = true;
-      }
-      if (!ok) {
-        array.splice(0, i + 1);
-        i = 0;
-      } else {
-        rebaseHistSel(sub.anchorBefore); rebaseHistSel(sub.headBefore);
-        rebaseHistSel(sub.anchorAfter); rebaseHistSel(sub.headAfter);
-      }
-    }
-  }
-
-  function rebaseHist(hist, change) {
-    var from = change.from.line, to = change.to.line, diff = change.text.length - (to - from) - 1;
-    rebaseHistArray(hist.done, from, to, diff);
-    rebaseHistArray(hist.undone, from, to, diff);
-  }
-
-  // EVENT OPERATORS
-
-  function stopMethod() {e_stop(this);}
-  // Ensure an event has a stop method.
-  function addStop(event) {
-    if (!event.stop) event.stop = stopMethod;
-    return event;
-  }
-
-  function e_preventDefault(e) {
-    if (e.preventDefault) e.preventDefault();
-    else e.returnValue = false;
-  }
-  function e_stopPropagation(e) {
-    if (e.stopPropagation) e.stopPropagation();
-    else e.cancelBubble = true;
-  }
-  function e_defaultPrevented(e) {
-    return e.defaultPrevented != null ? e.defaultPrevented : e.returnValue == false;
-  }
-  function e_stop(e) {e_preventDefault(e); e_stopPropagation(e);}
-  CodeMirror.e_stop = e_stop;
-  CodeMirror.e_preventDefault = e_preventDefault;
-  CodeMirror.e_stopPropagation = e_stopPropagation;
-
-  function e_target(e) {return e.target || e.srcElement;}
-  function e_button(e) {
-    var b = e.which;
-    if (b == null) {
-      if (e.button & 1) b = 1;
-      else if (e.button & 2) b = 3;
-      else if (e.button & 4) b = 2;
-    }
-    if (mac && e.ctrlKey && b == 1) b = 3;
-    return b;
-  }
-
-  // EVENT HANDLING
-
-  function on(emitter, type, f) {
-    if (emitter.addEventListener)
-      emitter.addEventListener(type, f, false);
-    else if (emitter.attachEvent)
-      emitter.attachEvent("on" + type, f);
-    else {
-      var map = emitter._handlers || (emitter._handlers = {});
-      var arr = map[type] || (map[type] = []);
-      arr.push(f);
-    }
-  }
-
-  function off(emitter, type, f) {
-    if (emitter.removeEventListener)
-      emitter.removeEventListener(type, f, false);
-    else if (emitter.detachEvent)
-      emitter.detachEvent("on" + type, f);
-    else {
-      var arr = emitter._handlers && emitter._handlers[type];
-      if (!arr) return;
-      for (var i = 0; i < arr.length; ++i)
-        if (arr[i] == f) { arr.splice(i, 1); break; }
-    }
-  }
-
-  function signal(emitter, type /*, values...*/) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    if (!arr) return;
-    var args = Array.prototype.slice.call(arguments, 2);
-    for (var i = 0; i < arr.length; ++i) arr[i].apply(null, args);
-  }
-
-  var delayedCallbacks, delayedCallbackDepth = 0;
-  function signalLater(emitter, type /*, values...*/) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    if (!arr) return;
-    var args = Array.prototype.slice.call(arguments, 2);
-    if (!delayedCallbacks) {
-      ++delayedCallbackDepth;
-      delayedCallbacks = [];
-      setTimeout(fireDelayed, 0);
-    }
-    function bnd(f) {return function(){f.apply(null, args);};};
-    for (var i = 0; i < arr.length; ++i)
-      delayedCallbacks.push(bnd(arr[i]));
-  }
-
-  function signalDOMEvent(cm, e, override) {
-    signal(cm, override || e.type, cm, e);
-    return e_defaultPrevented(e) || e.codemirrorIgnore;
-  }
-
-  function fireDelayed() {
-    --delayedCallbackDepth;
-    var delayed = delayedCallbacks;
-    delayedCallbacks = null;
-    for (var i = 0; i < delayed.length; ++i) delayed[i]();
-  }
-
-  function hasHandler(emitter, type) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    return arr && arr.length > 0;
-  }
-
-  CodeMirror.on = on; CodeMirror.off = off; CodeMirror.signal = signal;
-
-  function eventMixin(ctor) {
-    ctor.prototype.on = function(type, f) {on(this, type, f);};
-    ctor.prototype.off = function(type, f) {off(this, type, f);};
-  }
-
-  // MISC UTILITIES
-
-  // Number of pixels added to scroller and sizer to hide scrollbar
-  var scrollerCutOff = 30;
-
-  // Returned or thrown by various protocols to signal 'I'm not
-  // handling this'.
-  var Pass = CodeMirror.Pass = {toString: function(){return "CodeMirror.Pass";}};
-
-  function Delayed() {this.id = null;}
-  Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
-
-  // Counts the column offset in a string, taking tabs into account.
-  // Used mostly to find indentation.
-  function countColumn(string, end, tabSize, startIndex, startValue) {
-    if (end == null) {
-      end = string.search(/[^\s\u00a0]/);
-      if (end == -1) end = string.length;
-    }
-    for (var i = startIndex || 0, n = startValue || 0; i < end; ++i) {
-      if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
-      else ++n;
-    }
-    return n;
-  }
-  CodeMirror.countColumn = countColumn;
-
-  var spaceStrs = [""];
-  function spaceStr(n) {
-    while (spaceStrs.length <= n)
-      spaceStrs.push(lst(spaceStrs) + " ");
-    return spaceStrs[n];
-  }
-
-  function lst(arr) { return arr[arr.length-1]; }
-
-  function selectInput(node) {
-    if (ios) { // Mobile Safari apparently has a bug where select() is broken.
-      node.selectionStart = 0;
-      node.selectionEnd = node.value.length;
-    } else {
-      // Suppress mysterious IE10 errors
-      try { node.select(); }
-      catch(_e) {}
-    }
-  }
-
-  function indexOf(collection, elt) {
-    if (collection.indexOf) return collection.indexOf(elt);
-    for (var i = 0, e = collection.length; i < e; ++i)
-      if (collection[i] == elt) return i;
-    return -1;
-  }
-
-  function createObj(base, props) {
-    function Obj() {}
-    Obj.prototype = base;
-    var inst = new Obj();
-    if (props) copyObj(props, inst);
-    return inst;
-  }
-
-  function copyObj(obj, target) {
-    if (!target) target = {};
-    for (var prop in obj) if (obj.hasOwnProperty(prop)) target[prop] = obj[prop];
-    return target;
-  }
-
-  function emptyArray(size) {
-    for (var a = [], i = 0; i < size; ++i) a.push(undefined);
-    return a;
-  }
-
-  function bind(f) {
-    var args = Array.prototype.slice.call(arguments, 1);
-    return function(){return f.apply(null, args);};
-  }
-
-  var nonASCIISingleCaseWordChar = /[\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
-  function isWordChar(ch) {
-    return /\w/.test(ch) || ch > "\x80" &&
-      (ch.toUpperCase() != ch.toLowerCase() || nonASCIISingleCaseWordChar.test(ch));
-  }
-
-  function isEmpty(obj) {
-    for (var n in obj) if (obj.hasOwnProperty(n) && obj[n]) return false;
-    return true;
-  }
-
-  var isExtendingChar = /[\u0300-\u036F\u0483-\u0487\u0488-\u0489\u0591-\u05BD\u05BF\u05C1-\u05C2\u05C4-\u05C5\u05C7\u0610-\u061A\u064B-\u065F\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7-\u06E8\u06EA-\u06ED\uA66F\u1DC0-\u1DFF\u20D0-\u20FF\uA670-\uA672\uA674-\uA67D\uA69F\udc00-\udfff\uFE20-\uFE2F]/;
-
-  // DOM UTILITIES
-
-  function elt(tag, content, className, style) {
-    var e = document.createElement(tag);
-    if (className) e.className = className;
-    if (style) e.style.cssText = style;
-    if (typeof content == "string") setTextContent(e, content);
-    else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
-    return e;
-  }
-
-  function removeChildren(e) {
-    for (var count = e.childNodes.length; count > 0; --count)
-      e.removeChild(e.firstChild);
-    return e;
-  }
-
-  function removeChildrenAndAdd(parent, e) {
-    return removeChildren(parent).appendChild(e);
-  }
-
-  function setTextContent(e, str) {
-    if (ie_lt9) {
-      e.innerHTML = "";
-      e.appendChild(document.createTextNode(str));
-    } else e.textContent = str;
-  }
-
-  function getRect(node) {
-    return node.getBoundingClientRect();
-  }
-  CodeMirror.replaceGetRect = function(f) { getRect = f; };
-
-  // FEATURE DETECTION
-
-  // Detect drag-and-drop
-  var dragAndDrop = function() {
-    // There is *some* kind of drag-and-drop support in IE6-8, but I
-    // couldn't get it to work yet.
-    if (ie_lt9) return false;
-    var div = elt('div');
-    return "draggable" in div || "dragDrop" in div;
-  }();
-
-  // For a reason I have yet to figure out, some browsers disallow
-  // word wrapping between certain characters *only* if a new inline
-  // element is started between them. This makes it hard to reliably
-  // measure the position of things, since that requires inserting an
-  // extra span. This terribly fragile set of tests matches the
-  // character combinations that suffer from this phenomenon on the
-  // various browsers.
-  function spanAffectsWrapping() { return false; }
-  if (gecko) // Only for "$'"
-    spanAffectsWrapping = function(str, i) {
-      return str.charCodeAt(i - 1) == 36 && str.charCodeAt(i) == 39;
-    };
-  else if (safari && !/Version\/([6-9]|\d\d)\b/.test(navigator.userAgent))
-    spanAffectsWrapping = function(str, i) {
-      return /\-[^ \-?]|\?[^ !\'\"\),.\-\/:;\?\]\}]/.test(str.slice(i - 1, i + 1));
-    };
-  else if (webkit && /Chrome\/(?:29|[3-9]\d|\d\d\d)\./.test(navigator.userAgent))
-    spanAffectsWrapping = function(str, i) {
-      var code = str.charCodeAt(i - 1);
-      return code >= 8208 && code <= 8212;
-    };
-  else if (webkit)
-    spanAffectsWrapping = function(str, i) {
-      if (i > 1 && str.charCodeAt(i - 1) == 45) {
-        if (/\w/.test(str.charAt(i - 2)) && /[^\-?\.]/.test(str.charAt(i))) return true;
-        if (i > 2 && /[\d\.,]/.test(str.charAt(i - 2)) && /[\d\.,]/.test(str.charAt(i))) return false;
-      }
-      return /[~!#%&*)=+}\]\\|\"\.>,:;][({[<]|-[^\-?\.\u2010-\u201f\u2026]|\?[\w~`@#$%\^&*(_=+{[|><]|\u2026[\w~`@#$%\^&*(_=+{[><]/.test(str.slice(i - 1, i + 1));
-    };
-
-  var knownScrollbarWidth;
-  function scrollbarWidth(measure) {
-    if (knownScrollbarWidth != null) return knownScrollbarWidth;
-    var test = elt("div", null, null, "width: 50px; height: 50px; overflow-x: scroll");
-    removeChildrenAndAdd(measure, test);
-    if (test.offsetWidth)
-      knownScrollbarWidth = test.offsetHeight - test.clientHeight;
-    return knownScrollbarWidth || 0;
-  }
-
-  var zwspSupported;
-  function zeroWidthElement(measure) {
-    if (zwspSupported == null) {
-      var test = elt("span", "\u200b");
-      removeChildrenAndAdd(measure, elt("span", [test, document.createTextNode("x")]));
-      if (measure.firstChild.offsetHeight != 0)
-        zwspSupported = test.offsetWidth <= 1 && test.offsetHeight > 2 && !ie_lt8;
-    }
-    if (zwspSupported) return elt("span", "\u200b");
-    else return elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px");
-  }
-
-  // See if "".split is the broken IE version, if so, provide an
-  // alternative way to split lines.
-  var splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) {
-    var pos = 0, result = [], l = string.length;
-    while (pos <= l) {
-      var nl = string.indexOf("\n", pos);
-      if (nl == -1) nl = string.length;
-      var line = string.slice(pos, string.charAt(nl - 1) == "\r" ? nl - 1 : nl);
-      var rt = line.indexOf("\r");
-      if (rt != -1) {
-        result.push(line.slice(0, rt));
-        pos += rt + 1;
-      } else {
-        result.push(line);
-        pos = nl + 1;
-      }
-    }
-    return result;
-  } : function(string){return string.split(/\r\n?|\n/);};
-  CodeMirror.splitLines = splitLines;
-
-  var hasSelection = window.getSelection ? function(te) {
-    try { return te.selectionStart != te.selectionEnd; }
-    catch(e) { return false; }
-  } : function(te) {
-    try {var range = te.ownerDocument.selection.createRange();}
-    catch(e) {}
-    if (!range || range.parentElement() != te) return false;
-    return range.compareEndPoints("StartToEnd", range) != 0;
-  };
-
-  var hasCopyEvent = (function() {
-    var e = elt("div");
-    if ("oncopy" in e) return true;
-    e.setAttribute("oncopy", "return;");
-    return typeof e.oncopy == 'function';
-  })();
-
-  // KEY NAMING
-
-  var keyNames = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
-                  19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
-                  36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
-                  46: "Delete", 59: ";", 91: "Mod", 92: "Mod", 93: "Mod", 109: "-", 107: "=", 127: "Delete",
-                  186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
-                  221: "]", 222: "'", 63276: "PageUp", 63277: "PageDown", 63275: "End", 63273: "Home",
-                  63234: "Left", 63232: "Up", 63235: "Right", 63233: "Down", 63302: "Insert", 63272: "Delete"};
-  CodeMirror.keyNames = keyNames;
-  (function() {
-    // Number keys
-    for (var i = 0; i < 10; i++) keyNames[i + 48] = String(i);
-    // Alphabetic keys
-    for (var i = 65; i <= 90; i++) keyNames[i] = String.fromCharCode(i);
-    // Function keys
-    for (var i = 1; i <= 12; i++) keyNames[i + 111] = keyNames[i + 63235] = "F" + i;
-  })();
-
-  // BIDI HELPERS
-
-  function iterateBidiSections(order, from, to, f) {
-    if (!order) return f(from, to, "ltr");
-    var found = false;
-    for (var i = 0; i < order.length; ++i) {
-      var part = order[i];
-      if (part.from < to && part.to > from || from == to && part.to == from) {
-        f(Math.max(part.from, from), Math.min(part.to, to), part.level == 1 ? "rtl" : "ltr");
-        found = true;
-      }
-    }
-    if (!found) f(from, to, "ltr");
-  }
-
-  function bidiLeft(part) { return part.level % 2 ? part.to : part.from; }
-  function bidiRight(part) { return part.level % 2 ? part.from : part.to; }
-
-  function lineLeft(line) { var order = getOrder(line); return order ? bidiLeft(order[0]) : 0; }
-  function lineRight(line) {
-    var order = getOrder(line);
-    if (!order) return line.text.length;
-    return bidiRight(lst(order));
-  }
-
-  function lineStart(cm, lineN) {
-    var line = getLine(cm.doc, lineN);
-    var visual = visualLine(cm.doc, line);
-    if (visual != line) lineN = lineNo(visual);
-    var order = getOrder(visual);
-    var ch = !order ? 0 : order[0].level % 2 ? lineRight(visual) : lineLeft(visual);
-    return Pos(lineN, ch);
-  }
-  function lineEnd(cm, lineN) {
-    var merged, line;
-    while (merged = collapsedSpanAtEnd(line = getLine(cm.doc, lineN)))
-      lineN = merged.find().to.line;
-    var order = getOrder(line);
-    var ch = !order ? line.text.length : order[0].level % 2 ? lineLeft(line) : lineRight(line);
-    return Pos(lineN, ch);
-  }
-
-  function compareBidiLevel(order, a, b) {
-    var linedir = order[0].level;
-    if (a == linedir) return true;
-    if (b == linedir) return false;
-    return a < b;
-  }
-  var bidiOther;
-  function getBidiPartAt(order, pos) {
-    bidiOther = null;
-    for (var i = 0, found; i < order.length; ++i) {
-      var cur = order[i];
-      if (cur.from < pos && cur.to > pos) return i;
-      if ((cur.from == pos || cur.to == pos)) {
-        if (found == null) {
-          found = i;
-        } else if (compareBidiLevel(order, cur.level, order[found].level)) {
-          if (cur.from != cur.to) bidiOther = found;
-          return i;
-        } else {
-          if (cur.from != cur.to) bidiOther = i;
-          return found;
-        }
-      }
-    }
-    return found;
-  }
-
-  function moveInLine(line, pos, dir, byUnit) {
-    if (!byUnit) return pos + dir;
-    do pos += dir;
-    while (pos > 0 && isExtendingChar.test(line.text.charAt(pos)));
-    return pos;
-  }
-
-  // This is somewhat involved. It is needed in order to move
-  // 'visually' through bi-directional text -- i.e., pressing left
-  // should make the cursor go left, even when in RTL text. The
-  // tricky part is the 'jumps', where RTL and LTR text touch each
-  // other. This often requires the cursor offset to move more than
-  // one unit, in order to visually move one unit.
-  function moveVisually(line, start, dir, byUnit) {
-    var bidi = getOrder(line);
-    if (!bidi) return moveLogically(line, start, dir, byUnit);
-    var pos = getBidiPartAt(bidi, start), part = bidi[pos];
-    var target = moveInLine(line, start, part.level % 2 ? -dir : dir, byUnit);
-
-    for (;;) {
-      if (target > part.from && target < part.to) return target;
-      if (target == part.from || target == part.to) {
-        if (getBidiPartAt(bidi, target) == pos) return target;
-        part = bidi[pos += dir];
-        return (dir > 0) == part.level % 2 ? part.to : part.from;
-      } else {
-        part = bidi[pos += dir];
-        if (!part) return null;
-        if ((dir > 0) == part.level % 2)
-          target = moveInLine(line, part.to, -1, byUnit);
-        else
-          target = moveInLine(line, part.from, 1, byUnit);
-      }
-    }
-  }
-
-  function moveLogically(line, start, dir, byUnit) {
-    var target = start + dir;
-    if (byUnit) while (target > 0 && isExtendingChar.test(line.text.charAt(target))) target += dir;
-    return target < 0 || target > line.text.length ? null : target;
-  }
-
-  // Bidirectional ordering algorithm
-  // See http://unicode.org/reports/tr9/tr9-13.html for the algorithm
-  // that this (partially) implements.
-
-  // One-char codes used for character types:
-  // L (L):   Left-to-Right
-  // R (R):   Right-to-Left
-  // r (AL):  Right-to-Left Arabic
-  // 1 (EN):  European Number
-  // + (ES):  European Number Separator
-  // % (ET):  European Number Terminator
-  // n (AN):  Arabic Number
-  // , (CS):  Common Number Separator
-  // m (NSM): Non-Spacing Mark
-  // b (BN):  Boundary Neutral
-  // s (B):   Paragraph Separator
-  // t (S):   Segment Separator
-  // w (WS):  Whitespace
-  // N (ON):  Other Neutrals
-
-  // Returns null if characters are ordered as they appear
-  // (left-to-right), or an array of sections ({from, to, level}
-  // objects) in the order in which they occur visually.
-  var bidiOrdering = (function() {
-    // Character types for codepoints 0 to 0xff
-    var lowTypes = "bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLL";
-    // Character types for codepoints 0x600 to 0x6ff
-    var arabicTypes = "rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmmrrrrrrrrrrrrrrrrrr";
-    function charType(code) {
-      if (code <= 0xff) return lowTypes.charAt(code);
-      else if (0x590 <= code && code <= 0x5f4) return "R";
-      else if (0x600 <= code && code <= 0x6ff) return arabicTypes.charAt(code - 0x600);
-      else if (0x700 <= code && code <= 0x8ac) return "r";
-      else return "L";
-    }
-
-    var bidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
-    var isNeutral = /[stwN]/, isStrong = /[LRr]/, countsAsLeft = /[Lb1n]/, countsAsNum = /[1n]/;
-    // Browsers seem to always treat the boundaries of block elements as being L.
-    var outerType = "L";
-
-    return function(str) {
-      if (!bidiRE.test(str)) return false;
-      var len = str.length, types = [];
-      for (var i = 0, type; i < len; ++i)
-        types.push(type = charType(str.charCodeAt(i)));
-
-      // W1. Examine each non-spacing mark (NSM) in the level run, and
-      // change the type of the NSM to the type of the previous
-      // character. If the NSM is at the start of the level run, it will
-      // get the type of sor.
-      for (var i = 0, prev = outerType; i < len; ++i) {
-        var type = types[i];
-        if (type == "m") types[i] = prev;
-        else prev = type;
-      }
-
-      // W2. Search backwards from each instance of a European number
-      // until the first strong type (R, L, AL, or sor) is found. If an
-      // AL is found, change the type of the European number to Arabic
-      // number.
-      // W3. Change all ALs to R.
-      for (var i = 0, cur = outerType; i < len; ++i) {
-        var type = types[i];
-        if (type == "1" && cur == "r") types[i] = "n";
-        else if (isStrong.test(type)) { cur = type; if (type == "r") types[i] = "R"; }
-      }
-
-      // W4. A single European separator between two European numbers
-      // changes to a European number. A single common separator between
-      // two numbers of the same type changes to that type.
-      for (var i = 1, prev = types[0]; i < len - 1; ++i) {
-        var type = types[i];
-        if (type == "+" && prev == "1" && types[i+1] == "1") types[i] = "1";
-        else if (type == "," && prev == types[i+1] &&
-                 (prev == "1" || prev == "n")) types[i] = prev;
-        prev = type;
-      }
-
-      // W5. A sequence of European terminators adjacent to European
-      // numbers changes to all European numbers.
-      // W6. Otherwise, separators and terminators change to Other
-      // Neutral.
-      for (var i = 0; i < len; ++i) {
-        var type = types[i];
-        if (type == ",") types[i] = "N";
-        else if (type == "%") {
-          for (var end = i + 1; end < len && types[end] == "%"; ++end) {}
-          var replace = (i && types[i-1] == "!") || (end < len && types[end] == "1") ? "1" : "N";
-          for (var j = i; j < end; ++j) types[j] = replace;
-          i = end - 1;
-        }
-      }
-
-      // W7. Search backwards from each instance of a European number
-      // until the first strong type (R, L, or sor) is found. If an L is
-      // found, then change the type of the European number to L.
-      for (var i = 0, cur = outerType; i < len; ++i) {
-        var type = types[i];
-        if (cur == "L" && type == "1") types[i] = "L";
-        else if (isStrong.test(type)) cur = type;
-      }
-
-      // N1. A sequence of neutrals takes the direction of the
-      // surrounding strong text if the text on both sides has the same
-      // direction. European and Arabic numbers act as if they were R in
-      // terms of their influence on neutrals. Start-of-level-run (sor)
-      // and end-of-level-run (eor) are used at level run boundaries.
-      // N2. Any remaining neutrals take the embedding direction.
-      for (var i = 0; i < len; ++i) {
-        if (isNeutral.test(types[i])) {
-          for (var end = i + 1; end < len && isNeutral.test(types[end]); ++end) {}
-          var before = (i ? types[i-1] : outerType) == "L";
-          var after = (end < len ? types[end] : outerType) == "L";
-          var replace = before || after ? "L" : "R";
-          for (var j = i; j < end; ++j) types[j] = replace;
-          i = end - 1;
-        }
-      }
-
-      // Here we depart from the documented algorithm, in order to avoid
-      // building up an actual levels array. Since there are only three
-      // levels (0, 1, 2) in an implementation that doesn't take
-      // explicit embedding into account, we can build up the order on
-      // the fly, without following the level-based algorithm.
-      var order = [], m;
-      for (var i = 0; i < len;) {
-        if (countsAsLeft.test(types[i])) {
-          var start = i;
-          for (++i; i < len && countsAsLeft.test(types[i]); ++i) {}
-          order.push({from: start, to: i, level: 0});
-        } else {
-          var pos = i, at = order.length;
-          for (++i; i < len && types[i] != "L"; ++i) {}
-          for (var j = pos; j < i;) {
-            if (countsAsNum.test(types[j])) {
-              if (pos < j) order.splice(at, 0, {from: pos, to: j, level: 1});
-              var nstart = j;
-              for (++j; j < i && countsAsNum.test(types[j]); ++j) {}
-              order.splice(at, 0, {from: nstart, to: j, level: 2});
-              pos = j;
-            } else ++j;
-          }
-          if (pos < i) order.splice(at, 0, {from: pos, to: i, level: 1});
-        }
-      }
-      if (order[0].level == 1 && (m = str.match(/^\s+/))) {
-        order[0].from = m[0].length;
-        order.unshift({from: 0, to: m[0].length, level: 0});
-      }
-      if (lst(order).level == 1 && (m = str.match(/\s+$/))) {
-        lst(order).to -= m[0].length;
-        order.push({from: len - m[0].length, to: len, level: 0});
-      }
-      if (order[0].level != lst(order).level)
-        order.push({from: len, to: len, level: order[0].level});
-
-      return order;
-    };
-  })();
-
-  // THE END
-
-  CodeMirror.version = "3.20.1";
-
-  return CodeMirror;
-})();
diff --git a/docs/js/javascript.js b/docs/js/javascript.js
deleted file mode 100644
index c734555047f..00000000000
--- a/docs/js/javascript.js
+++ /dev/null
@@ -1,425 +0,0 @@
-// TODO actually recognize syntax of TypeScript constructs
-
-CodeMirror.defineMode("javascript", function(config, parserConfig) {
-  var indentUnit = config.indentUnit;
-  var jsonMode = parserConfig.json;
-  var isTS = parserConfig.typescript;
-
-  // Tokenizer
-
-  var keywords = function(){
-    function kw(type) {return {type: type, style: "keyword"};}
-    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
-    var operator = kw("operator"), atom = {type: "atom", style: "atom"};
-    
-    var jsKeywords = {
-      "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
-      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
-      "var": kw("var"), "const": kw("var"), "let": kw("var"),
-      "function": kw("function"), "catch": kw("catch"),
-      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
-      "in": operator, "typeof": operator, "instanceof": operator,
-      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
-    };
-
-    // Extend the 'normal' keywords with the TypeScript language extensions
-    if (isTS) {
-      var type = {type: "variable", style: "variable-3"};
-      var tsKeywords = {
-        // object-like things
-        "interface": kw("interface"),
-        "class": kw("class"),
-        "extends": kw("extends"),
-        "constructor": kw("constructor"),
-
-        // scope modifiers
-        "public": kw("public"),
-        "private": kw("private"),
-        "protected": kw("protected"),
-        "static": kw("static"),
-
-        "super": kw("super"),
-
-        // types
-        "string": type, "number": type, "bool": type, "any": type
-      };
-
-      for (var attr in tsKeywords) {
-        jsKeywords[attr] = tsKeywords[attr];
-      }
-    }
-
-    return jsKeywords;
-  }();
-
-  var isOperatorChar = /[+\-*&%=<>!?|]/;
-
-  function chain(stream, state, f) {
-    state.tokenize = f;
-    return f(stream, state);
-  }
-
-  function nextUntilUnescaped(stream, end) {
-    var escaped = false, next;
-    while ((next = stream.next()) != null) {
-      if (next == end && !escaped)
-        return false;
-      escaped = !escaped && next == "\\";
-    }
-    return escaped;
-  }
-
-  // Used as scratch variables to communicate multiple values without
-  // consing up tons of objects.
-  var type, content;
-  function ret(tp, style, cont) {
-    type = tp; content = cont;
-    return style;
-  }
-
-  function jsTokenBase(stream, state) {
-    var ch = stream.next();
-    if (ch == '"' || ch == "'")
-      return chain(stream, state, jsTokenString(ch));
-    else if (/[\[\]{}\(\),;\:\.]/.test(ch))
-      return ret(ch);
-    else if (ch == "0" && stream.eat(/x/i)) {
-      stream.eatWhile(/[\da-f]/i);
-      return ret("number", "number");
-    }      
-    else if (/\d/.test(ch) || ch == "-" && stream.eat(/\d/)) {
-      stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
-      return ret("number", "number");
-    }
-    else if (ch == "/") {
-      if (stream.eat("*")) {
-        return chain(stream, state, jsTokenComment);
-      }
-      else if (stream.eat("/")) {
-        stream.skipToEnd();
-        return ret("comment", "comment");
-      }
-      else if (state.lastType == "operator" || state.lastType == "keyword c" ||
-               /^[\[{}\(,;:]$/.test(state.lastType)) {
-        nextUntilUnescaped(stream, "/");
-        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
-        return ret("regexp", "string-2");
-      }
-      else {
-        stream.eatWhile(isOperatorChar);
-        return ret("operator", null, stream.current());
-      }
-    }
-    else if (ch == "#") {
-      stream.skipToEnd();
-      return ret("error", "error");
-    }
-    else if (isOperatorChar.test(ch)) {
-      stream.eatWhile(isOperatorChar);
-      return ret("operator", null, stream.current());
-    }
-    else {
-      stream.eatWhile(/[\w\$_]/);
-      var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
-      return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
-                     ret("variable", "variable", word);
-    }
-  }
-
-  function jsTokenString(quote) {
-    return function(stream, state) {
-      if (!nextUntilUnescaped(stream, quote))
-        state.tokenize = jsTokenBase;
-      return ret("string", "string");
-    };
-  }
-
-  function jsTokenComment(stream, state) {
-    var maybeEnd = false, ch;
-    while (ch = stream.next()) {
-      if (ch == "/" && maybeEnd) {
-        state.tokenize = jsTokenBase;
-        break;
-      }
-      maybeEnd = (ch == "*");
-    }
-    return ret("comment", "comment");
-  }
-
-  // Parser
-
-  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true};
-
-  function JSLexical(indented, column, type, align, prev, info) {
-    this.indented = indented;
-    this.column = column;
-    this.type = type;
-    this.prev = prev;
-    this.info = info;
-    if (align != null) this.align = align;
-  }
-
-  function inScope(state, varname) {
-    for (var v = state.localVars; v; v = v.next)
-      if (v.name == varname) return true;
-  }
-
-  function parseJS(state, style, type, content, stream) {
-    var cc = state.cc;
-    // Communicate our context to the combinators.
-    // (Less wasteful than consing up a hundred closures on every call.)
-    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
-  
-    if (!state.lexical.hasOwnProperty("align"))
-      state.lexical.align = true;
-
-    while(true) {
-      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
-      if (combinator(type, content)) {
-        while(cc.length && cc[cc.length - 1].lex)
-          cc.pop()();
-        if (cx.marked) return cx.marked;
-        if (type == "variable" && inScope(state, content)) return "variable-2";
-        return style;
-      }
-    }
-  }
-
-  // Combinator utils
-
-  var cx = {state: null, column: null, marked: null, cc: null};
-  function pass() {
-    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
-  }
-  function cont() {
-    pass.apply(null, arguments);
-    return true;
-  }
-  function register(varname) {
-    function inList(list) {
-      for (var v = list; v; v = v.next)
-        if (v.name == varname) return true;
-      return false;
-    }
-    var state = cx.state;
-    if (state.context) {
-      cx.marked = "def";
-      if (inList(state.localVars)) return;
-      state.localVars = {name: varname, next: state.localVars};
-    } else {
-      if (inList(state.globalVars)) return;
-      state.globalVars = {name: varname, next: state.globalVars};
-    }
-  }
-
-  // Combinators
-
-  var defaultVars = {name: "this", next: {name: "arguments"}};
-  function pushcontext() {
-    cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
-    cx.state.localVars = defaultVars;
-  }
-  function popcontext() {
-    cx.state.localVars = cx.state.context.vars;
-    cx.state.context = cx.state.context.prev;
-  }
-  function pushlex(type, info) {
-    var result = function() {
-      var state = cx.state;
-      state.lexical = new JSLexical(state.indented, cx.stream.column(), type, null, state.lexical, info);
-    };
-    result.lex = true;
-    return result;
-  }
-  function poplex() {
-    var state = cx.state;
-    if (state.lexical.prev) {
-      if (state.lexical.type == ")")
-        state.indented = state.lexical.indented;
-      state.lexical = state.lexical.prev;
-    }
-  }
-  poplex.lex = true;
-
-  function expect(wanted) {
-    return function(type) {
-      if (type == wanted) return cont();
-      else if (wanted == ";") return pass();
-      else return cont(arguments.callee);
-    };
-  }
-
-  function statement(type) {
-    if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
-    if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
-    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
-    if (type == "{") return cont(pushlex("}"), block, poplex);
-    if (type == ";") return cont();
-    if (type == "function") return cont(functiondef);
-    if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
-                                      poplex, statement, poplex);
-    if (type == "variable") return cont(pushlex("stat"), maybelabel);
-    if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
-                                         block, poplex, poplex);
-    if (type == "case") return cont(expression, expect(":"));
-    if (type == "default") return cont(expect(":"));
-    if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
-                                        statement, poplex, popcontext);
-    return pass(pushlex("stat"), expression, expect(";"), poplex);
-  }
-  function expression(type) {
-    if (atomicTypes.hasOwnProperty(type)) return cont(maybeoperator);
-    if (type == "function") return cont(functiondef);
-    if (type == "keyword c") return cont(maybeexpression);
-    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeoperator);
-    if (type == "operator") return cont(expression);
-    if (type == "[") return cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
-    if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
-    return cont();
-  }
-  function maybeexpression(type) {
-    if (type.match(/[;\}\)\],]/)) return pass();
-    return pass(expression);
-  }
-    
-  function maybeoperator(type, value) {
-    if (type == "operator") {
-      if (/\+\+|--/.test(value)) return cont(maybeoperator);
-      if (value == "?") return cont(expression, expect(":"), expression);
-      return cont(expression);
-    }
-    if (type == ";") return;
-    if (type == "(") return cont(pushlex(")"), commasep(expression, ")"), poplex, maybeoperator);
-    if (type == ".") return cont(property, maybeoperator);
-    if (type == "[") return cont(pushlex("]"), expression, expect("]"), poplex, maybeoperator);
-  }
-  function maybelabel(type) {
-    if (type == ":") return cont(poplex, statement);
-    return pass(maybeoperator, expect(";"), poplex);
-  }
-  function property(type) {
-    if (type == "variable") {cx.marked = "property"; return cont();}
-  }
-  function objprop(type) {
-    if (type == "variable") cx.marked = "property";
-    if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expression);
-  }
-  function commasep(what, end) {
-    function proceed(type) {
-      if (type == ",") return cont(what, proceed);
-      if (type == end) return cont();
-      return cont(expect(end));
-    }
-    return function(type) {
-      if (type == end) return cont();
-      else return pass(what, proceed);
-    };
-  }
-  function block(type) {
-    if (type == "}") return cont();
-    return pass(statement, block);
-  }
-  function maybetype(type) {
-    if (type == ":") return cont(typedef);
-    return pass();
-  }
-  function typedef(type) {
-    if (type == "variable"){cx.marked = "variable-3"; return cont();}
-    return pass();
-  }
-  function vardef1(type, value) {
-    if (type == "variable") {
-      register(value);
-      return isTS ? cont(maybetype, vardef2) : cont(vardef2);
-    }
-    return pass();
-  }
-  function vardef2(type, value) {
-    if (value == "=") return cont(expression, vardef2);
-    if (type == ",") return cont(vardef1);
-  }
-  function forspec1(type) {
-    if (type == "var") return cont(vardef1, expect(";"), forspec2);
-    if (type == ";") return cont(forspec2);
-    if (type == "variable") return cont(formaybein);
-    return cont(forspec2);
-  }
-  function formaybein(_type, value) {
-    if (value == "in") return cont(expression);
-    return cont(maybeoperator, forspec2);
-  }
-  function forspec2(type, value) {
-    if (type == ";") return cont(forspec3);
-    if (value == "in") return cont(expression);
-    return cont(expression, expect(";"), forspec3);
-  }
-  function forspec3(type) {
-    if (type != ")") cont(expression);
-  }
-  function functiondef(type, value) {
-    if (type == "variable") {register(value); return cont(functiondef);}
-    if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
-  }
-  function funarg(type, value) {
-    if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
-  }
-
-  // Interface
-
-  return {
-    startState: function(basecolumn) {
-      return {
-        tokenize: jsTokenBase,
-        lastType: null,
-        cc: [],
-        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
-        localVars: parserConfig.localVars,
-        globalVars: parserConfig.globalVars,
-        context: parserConfig.localVars && {vars: parserConfig.localVars},
-        indented: 0
-      };
-    },
-
-    token: function(stream, state) {
-      if (stream.sol()) {
-        if (!state.lexical.hasOwnProperty("align"))
-          state.lexical.align = false;
-        state.indented = stream.indentation();
-      }
-      if (stream.eatSpace()) return null;
-      var style = state.tokenize(stream, state);
-      if (type == "comment") return style;
-      state.lastType = type;
-      return parseJS(state, style, type, content, stream);
-    },
-
-    indent: function(state, textAfter) {
-      if (state.tokenize == jsTokenComment) return CodeMirror.Pass;
-      if (state.tokenize != jsTokenBase) return 0;
-      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
-      if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
-      var type = lexical.type, closing = firstChar == type;
-      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? 4 : 0);
-      else if (type == "form" && firstChar == "{") return lexical.indented;
-      else if (type == "form") return lexical.indented + indentUnit;
-      else if (type == "stat")
-        return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? indentUnit : 0);
-      else if (lexical.info == "switch" && !closing)
-        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
-      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
-      else return lexical.indented + (closing ? 0 : indentUnit);
-    },
-
-    electricChars: ":{}",
-
-    jsonMode: jsonMode
-  };
-});
-
-CodeMirror.defineMIME("text/javascript", "javascript");
-CodeMirror.defineMIME("text/ecmascript", "javascript");
-CodeMirror.defineMIME("application/javascript", "javascript");
-CodeMirror.defineMIME("application/ecmascript", "javascript");
-CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
-CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
-CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
diff --git a/docs/js/showdown.js b/docs/js/showdown.js
deleted file mode 100644
index 0d58db0a731..00000000000
--- a/docs/js/showdown.js
+++ /dev/null
@@ -1,1302 +0,0 @@
-//
-// showdown.js -- A javascript port of Markdown.
-//
-// Copyright (c) 2007 John Fraser.
-//
-// Original Markdown Copyright (c) 2004-2005 John Gruber
-//   <http://daringfireball.net/projects/markdown/>
-//
-// Redistributable under a BSD-style open source license.
-// See license.txt for more information.
-//
-// The full source distribution is at:
-//
-//				A A L
-//				T C A
-//				T K B
-//
-//   <http://www.attacklab.net/>
-//
-
-//
-// Wherever possible, Showdown is a straight, line-by-line port
-// of the Perl version of Markdown.
-//
-// This is not a normal parser design; it's basically just a
-// series of string substitutions.  It's hard to read and
-// maintain this way,  but keeping Showdown close to the original
-// design makes it easier to port new features.
-//
-// More importantly, Showdown behaves like markdown.pl in most
-// edge cases.  So web applications can do client-side preview
-// in Javascript, and then build identical HTML on the server.
-//
-// This port needs the new RegExp functionality of ECMA 262,
-// 3rd Edition (i.e. Javascript 1.5).  Most modern web browsers
-// should do fine.  Even with the new regular expression features,
-// We do a lot of work to emulate Perl's regex functionality.
-// The tricky changes in this file mostly have the "attacklab:"
-// label.  Major or self-explanatory changes don't.
-//
-// Smart diff tools like Araxis Merge will be able to match up
-// this file with markdown.pl in a useful way.  A little tweaking
-// helps: in a copy of markdown.pl, replace "#" with "//" and
-// replace "$text" with "text".  Be sure to ignore whitespace
-// and line endings.
-//
-
-
-//
-// Showdown usage:
-//
-//   var text = "Markdown *rocks*.";
-//
-//   var converter = new Showdown.converter();
-//   var html = converter.makeHtml(text);
-//
-//   alert(html);
-//
-// Note: move the sample code to the bottom of this
-// file before uncommenting it.
-//
-
-
-//
-// Showdown namespace
-//
-var Showdown = {};
-
-//
-// converter
-//
-// Wraps all "globals" so that the only thing
-// exposed is makeHtml().
-//
-Showdown.converter = function() {
-
-//
-// Globals:
-//
-
-// Global hashes, used by various utility routines
-var g_urls;
-var g_titles;
-var g_html_blocks;
-
-// Used to track when we're inside an ordered or unordered list
-// (see _ProcessListItems() for details):
-var g_list_level = 0;
-
-
-this.makeHtml = function(text) {
-//
-// Main function. The order in which other subs are called here is
-// essential. Link and image substitutions need to happen before
-// _EscapeSpecialCharsWithinTagAttributes(), so that any *'s or _'s in the <a>
-// and <img> tags get encoded.
-//
-
-	// Clear the global hashes. If we don't clear these, you get conflicts
-	// from other articles when generating a page which contains more than
-	// one article (e.g. an index page that shows the N most recent
-	// articles):
-	g_urls = new Array();
-	g_titles = new Array();
-	g_html_blocks = new Array();
-
-	// attacklab: Replace ~ with ~T
-	// This lets us use tilde as an escape char to avoid md5 hashes
-	// The choice of character is arbitray; anything that isn't
-    // magic in Markdown will work.
-	text = text.replace(/~/g,"~T");
-
-	// attacklab: Replace $ with ~D
-	// RegExp interprets $ as a special character
-	// when it's in a replacement string
-	text = text.replace(/\$/g,"~D");
-
-	// Standardize line endings
-	text = text.replace(/\r\n/g,"\n"); // DOS to Unix
-	text = text.replace(/\r/g,"\n"); // Mac to Unix
-
-	// Make sure text begins and ends with a couple of newlines:
-	text = "\n\n" + text + "\n\n";
-
-	// Convert all tabs to spaces.
-	text = _Detab(text);
-
-	// Strip any lines consisting only of spaces and tabs.
-	// This makes subsequent regexen easier to write, because we can
-	// match consecutive blank lines with /\n+/ instead of something
-	// contorted like /[ \t]*\n+/ .
-	text = text.replace(/^[ \t]+$/mg,"");
-
-	// Turn block-level HTML blocks into hash entries
-	text = _HashHTMLBlocks(text);
-
-	// Strip link definitions, store in hashes.
-	text = _StripLinkDefinitions(text);
-
-	text = _RunBlockGamut(text);
-
-	text = _UnescapeSpecialChars(text);
-
-	// attacklab: Restore dollar signs
-	text = text.replace(/~D/g,"$$");
-
-	// attacklab: Restore tildes
-	text = text.replace(/~T/g,"~");
-
-	return text;
-}
-
-
-var _StripLinkDefinitions = function(text) {
-//
-// Strips link definitions from text, stores the URLs and titles in
-// hash references.
-//
-
-	// Link defs are in the form: ^[id]: url "optional title"
-
-	/*
-		var text = text.replace(/
-				^[ ]{0,3}\[(.+)\]:  // id = $1  attacklab: g_tab_width - 1
-				  [ \t]*
-				  \n?				// maybe *one* newline
-				  [ \t]*
-				<?(\S+?)>?			// url = $2
-				  [ \t]*
-				  \n?				// maybe one newline
-				  [ \t]*
-				(?:
-				  (\n*)				// any lines skipped = $3 attacklab: lookbehind removed
-				  ["(]
-				  (.+?)				// title = $4
-				  [")]
-				  [ \t]*
-				)?					// title is optional
-				(?:\n+|$)
-			  /gm,
-			  function(){...});
-	*/
-	var text = text.replace(/^[ ]{0,3}\[(.+)\]:[ \t]*\n?[ \t]*<?(\S+?)>?[ \t]*\n?[ \t]*(?:(\n*)["(](.+?)[")][ \t]*)?(?:\n+|\Z)/gm,
-		function (wholeMatch,m1,m2,m3,m4) {
-			m1 = m1.toLowerCase();
-			g_urls[m1] = _EncodeAmpsAndAngles(m2);  // Link IDs are case-insensitive
-			if (m3) {
-				// Oops, found blank lines, so it's not a title.
-				// Put back the parenthetical statement we stole.
-				return m3+m4;
-			} else if (m4) {
-				g_titles[m1] = m4.replace(/"/g,"&quot;");
-			}
-			
-			// Completely remove the definition from the text
-			return "";
-		}
-	);
-
-	return text;
-}
-
-
-var _HashHTMLBlocks = function(text) {
-	// attacklab: Double up blank lines to reduce lookaround
-	text = text.replace(/\n/g,"\n\n");
-
-	// Hashify HTML blocks:
-	// We only want to do this for block-level HTML tags, such as headers,
-	// lists, and tables. That's because we still want to wrap <p>s around
-	// "paragraphs" that are wrapped in non-block-level tags, such as anchors,
-	// phrase emphasis, and spans. The list of tags we're looking for is
-	// hard-coded:
-	var block_tags_a = "p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math|ins|del"
-	var block_tags_b = "p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math"
-
-	// First, look for nested blocks, e.g.:
-	//   <div>
-	//     <div>
-	//     tags for inner block must be indented.
-	//     </div>
-	//   </div>
-	//
-	// The outermost tags must start at the left margin for this to match, and
-	// the inner nested divs must be indented.
-	// We need to do this before the next, more liberal match, because the next
-	// match will start at the first `<div>` and stop at the first `</div>`.
-
-	// attacklab: This regex can be expensive when it fails.
-	/*
-		var text = text.replace(/
-		(						// save in $1
-			^					// start of line  (with /m)
-			<($block_tags_a)	// start tag = $2
-			\b					// word break
-								// attacklab: hack around khtml/pcre bug...
-			[^\r]*?\n			// any number of lines, minimally matching
-			</\2>				// the matching end tag
-			[ \t]*				// trailing spaces/tabs
-			(?=\n+)				// followed by a newline
-		)						// attacklab: there are sentinel newlines at end of document
-		/gm,function(){...}};
-	*/
-	text = text.replace(/^(<(p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math|ins|del)\b[^\r]*?\n<\/\2>[ \t]*(?=\n+))/gm,hashElement);
-
-	//
-	// Now match more liberally, simply from `\n<tag>` to `</tag>\n`
-	//
-
-	/*
-		var text = text.replace(/
-		(						// save in $1
-			^					// start of line  (with /m)
-			<($block_tags_b)	// start tag = $2
-			\b					// word break
-								// attacklab: hack around khtml/pcre bug...
-			[^\r]*?				// any number of lines, minimally matching
-			.*</\2>				// the matching end tag
-			[ \t]*				// trailing spaces/tabs
-			(?=\n+)				// followed by a newline
-		)						// attacklab: there are sentinel newlines at end of document
-		/gm,function(){...}};
-	*/
-	text = text.replace(/^(<(p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math)\b[^\r]*?.*<\/\2>[ \t]*(?=\n+)\n)/gm,hashElement);
-
-	// Special case just for <hr />. It was easier to make a special case than
-	// to make the other regex more complicated.  
-
-	/*
-		text = text.replace(/
-		(						// save in $1
-			\n\n				// Starting after a blank line
-			[ ]{0,3}
-			(<(hr)				// start tag = $2
-			\b					// word break
-			([^<>])*?			// 
-			\/?>)				// the matching end tag
-			[ \t]*
-			(?=\n{2,})			// followed by a blank line
-		)
-		/g,hashElement);
-	*/
-	text = text.replace(/(\n[ ]{0,3}(<(hr)\b([^<>])*?\/?>)[ \t]*(?=\n{2,}))/g,hashElement);
-
-	// Special case for standalone HTML comments:
-
-	/*
-		text = text.replace(/
-		(						// save in $1
-			\n\n				// Starting after a blank line
-			[ ]{0,3}			// attacklab: g_tab_width - 1
-			<!
-			(--[^\r]*?--\s*)+
-			>
-			[ \t]*
-			(?=\n{2,})			// followed by a blank line
-		)
-		/g,hashElement);
-	*/
-	text = text.replace(/(\n\n[ ]{0,3}<!(--[^\r]*?--\s*)+>[ \t]*(?=\n{2,}))/g,hashElement);
-
-	// PHP and ASP-style processor instructions (<?...?> and <%...%>)
-
-	/*
-		text = text.replace(/
-		(?:
-			\n\n				// Starting after a blank line
-		)
-		(						// save in $1
-			[ ]{0,3}			// attacklab: g_tab_width - 1
-			(?:
-				<([?%])			// $2
-				[^\r]*?
-				\2>
-			)
-			[ \t]*
-			(?=\n{2,})			// followed by a blank line
-		)
-		/g,hashElement);
-	*/
-	text = text.replace(/(?:\n\n)([ ]{0,3}(?:<([?%])[^\r]*?\2>)[ \t]*(?=\n{2,}))/g,hashElement);
-
-	// attacklab: Undo double lines (see comment at top of this function)
-	text = text.replace(/\n\n/g,"\n");
-	return text;
-}
-
-var hashElement = function(wholeMatch,m1) {
-	var blockText = m1;
-
-	// Undo double lines
-	blockText = blockText.replace(/\n\n/g,"\n");
-	blockText = blockText.replace(/^\n/,"");
-	
-	// strip trailing blank lines
-	blockText = blockText.replace(/\n+$/g,"");
-	
-	// Replace the element text with a marker ("~KxK" where x is its key)
-	blockText = "\n\n~K" + (g_html_blocks.push(blockText)-1) + "K\n\n";
-	
-	return blockText;
-};
-
-var _RunBlockGamut = function(text) {
-//
-// These are all the transformations that form block-level
-// tags like paragraphs, headers, and list items.
-//
-	text = _DoHeaders(text);
-
-	// Do Horizontal Rules:
-	var key = hashBlock("<hr />");
-	text = text.replace(/^[ ]{0,2}([ ]?\*[ ]?){3,}[ \t]*$/gm,key);
-	text = text.replace(/^[ ]{0,2}([ ]?\-[ ]?){3,}[ \t]*$/gm,key);
-	text = text.replace(/^[ ]{0,2}([ ]?\_[ ]?){3,}[ \t]*$/gm,key);
-
-	text = _DoLists(text);
-	text = _DoCodeBlocks(text);
-	text = _DoBlockQuotes(text);
-
-	// We already ran _HashHTMLBlocks() before, in Markdown(), but that
-	// was to escape raw HTML in the original Markdown source. This time,
-	// we're escaping the markup we've just created, so that we don't wrap
-	// <p> tags around block-level tags.
-	text = _HashHTMLBlocks(text);
-	text = _FormParagraphs(text);
-
-	return text;
-}
-
-
-var _RunSpanGamut = function(text) {
-//
-// These are all the transformations that occur *within* block-level
-// tags like paragraphs, headers, and list items.
-//
-
-	text = _DoCodeSpans(text);
-	text = _EscapeSpecialCharsWithinTagAttributes(text);
-	text = _EncodeBackslashEscapes(text);
-
-	// Process anchor and image tags. Images must come first,
-	// because ![foo][f] looks like an anchor.
-	text = _DoImages(text);
-	text = _DoAnchors(text);
-
-	// Make links out of things like `<http://example.com/>`
-	// Must come after _DoAnchors(), because you can use < and >
-	// delimiters in inline links like [this](<url>).
-	text = _DoAutoLinks(text);
-	text = _EncodeAmpsAndAngles(text);
-	text = _DoItalicsAndBold(text);
-
-	// Do hard breaks:
-	text = text.replace(/  +\n/g," <br />\n");
-
-	return text;
-}
-
-var _EscapeSpecialCharsWithinTagAttributes = function(text) {
-//
-// Within tags -- meaning between < and > -- encode [\ ` * _] so they
-// don't conflict with their use in Markdown for code, italics and strong.
-//
-
-	// Build a regex to find HTML tags and comments.  See Friedl's 
-	// "Mastering Regular Expressions", 2nd Ed., pp. 200-201.
-	var regex = /(<[a-z\/!$]("[^"]*"|'[^']*'|[^'">])*>|<!(--.*?--\s*)+>)/gi;
-
-	text = text.replace(regex, function(wholeMatch) {
-		var tag = wholeMatch.replace(/(.)<\/?code>(?=.)/g,"$1`");
-		tag = escapeCharacters(tag,"\\`*_");
-		return tag;
-	});
-
-	return text;
-}
-
-var _DoAnchors = function(text) {
-//
-// Turn Markdown link shortcuts into XHTML <a> tags.
-//
-	//
-	// First, handle reference-style links: [link text] [id]
-	//
-
-	/*
-		text = text.replace(/
-		(							// wrap whole match in $1
-			\[
-			(
-				(?:
-					\[[^\]]*\]		// allow brackets nested one level
-					|
-					[^\[]			// or anything else
-				)*
-			)
-			\]
-
-			[ ]?					// one optional space
-			(?:\n[ ]*)?				// one optional newline followed by spaces
-
-			\[
-			(.*?)					// id = $3
-			\]
-		)()()()()					// pad remaining backreferences
-		/g,_DoAnchors_callback);
-	*/
-	text = text.replace(/(\[((?:\[[^\]]*\]|[^\[\]])*)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g,writeAnchorTag);
-
-	//
-	// Next, inline-style links: [link text](url "optional title")
-	//
-
-	/*
-		text = text.replace(/
-			(						// wrap whole match in $1
-				\[
-				(
-					(?:
-						\[[^\]]*\]	// allow brackets nested one level
-					|
-					[^\[\]]			// or anything else
-				)
-			)
-			\]
-			\(						// literal paren
-			[ \t]*
-			()						// no id, so leave $3 empty
-			<?(.*?)>?				// href = $4
-			[ \t]*
-			(						// $5
-				(['"])				// quote char = $6
-				(.*?)				// Title = $7
-				\6					// matching quote
-				[ \t]*				// ignore any spaces/tabs between closing quote and )
-			)?						// title is optional
-			\)
-		)
-		/g,writeAnchorTag);
-	*/
-	text = text.replace(/(\[((?:\[[^\]]*\]|[^\[\]])*)\]\([ \t]*()<?(.*?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,writeAnchorTag);
-
-	//
-	// Last, handle reference-style shortcuts: [link text]
-	// These must come last in case you've also got [link test][1]
-	// or [link test](/foo)
-	//
-
-	/*
-		text = text.replace(/
-		(		 					// wrap whole match in $1
-			\[
-			([^\[\]]+)				// link text = $2; can't contain '[' or ']'
-			\]
-		)()()()()()					// pad rest of backreferences
-		/g, writeAnchorTag);
-	*/
-	text = text.replace(/(\[([^\[\]]+)\])()()()()()/g, writeAnchorTag);
-
-	return text;
-}
-
-var writeAnchorTag = function(wholeMatch,m1,m2,m3,m4,m5,m6,m7) {
-	if (m7 == undefined) m7 = "";
-	var whole_match = m1;
-	var link_text   = m2;
-	var link_id	 = m3.toLowerCase();
-	var url		= m4;
-	var title	= m7;
-	
-	if (url == "") {
-		if (link_id == "") {
-			// lower-case and turn embedded newlines into spaces
-			link_id = link_text.toLowerCase().replace(/ ?\n/g," ");
-		}
-		url = "#"+link_id;
-		
-		if (g_urls[link_id] != undefined) {
-			url = g_urls[link_id];
-			if (g_titles[link_id] != undefined) {
-				title = g_titles[link_id];
-			}
-		}
-		else {
-			if (whole_match.search(/\(\s*\)$/m)>-1) {
-				// Special case for explicit empty url
-				url = "";
-			} else {
-				return whole_match;
-			}
-		}
-	}	
-	
-	url = escapeCharacters(url,"*_");
-	var result = "<a href=\"" + url + "\"";
-	
-	if (title != "") {
-		title = title.replace(/"/g,"&quot;");
-		title = escapeCharacters(title,"*_");
-		result +=  " title=\"" + title + "\"";
-	}
-	
-	result += ">" + link_text + "</a>";
-	
-	return result;
-}
-
-
-var _DoImages = function(text) {
-//
-// Turn Markdown image shortcuts into <img> tags.
-//
-
-	//
-	// First, handle reference-style labeled images: ![alt text][id]
-	//
-
-	/*
-		text = text.replace(/
-		(						// wrap whole match in $1
-			!\[
-			(.*?)				// alt text = $2
-			\]
-
-			[ ]?				// one optional space
-			(?:\n[ ]*)?			// one optional newline followed by spaces
-
-			\[
-			(.*?)				// id = $3
-			\]
-		)()()()()				// pad rest of backreferences
-		/g,writeImageTag);
-	*/
-	text = text.replace(/(!\[(.*?)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g,writeImageTag);
-
-	//
-	// Next, handle inline images:  ![alt text](url "optional title")
-	// Don't forget: encode * and _
-
-	/*
-		text = text.replace(/
-		(						// wrap whole match in $1
-			!\[
-			(.*?)				// alt text = $2
-			\]
-			\s?					// One optional whitespace character
-			\(					// literal paren
-			[ \t]*
-			()					// no id, so leave $3 empty
-			<?(\S+?)>?			// src url = $4
-			[ \t]*
-			(					// $5
-				(['"])			// quote char = $6
-				(.*?)			// title = $7
-				\6				// matching quote
-				[ \t]*
-			)?					// title is optional
-		\)
-		)
-		/g,writeImageTag);
-	*/
-	text = text.replace(/(!\[(.*?)\]\s?\([ \t]*()<?(\S+?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,writeImageTag);
-
-	return text;
-}
-
-var writeImageTag = function(wholeMatch,m1,m2,m3,m4,m5,m6,m7) {
-	var whole_match = m1;
-	var alt_text   = m2;
-	var link_id	 = m3.toLowerCase();
-	var url		= m4;
-	var title	= m7;
-
-	if (!title) title = "";
-	
-	if (url == "") {
-		if (link_id == "") {
-			// lower-case and turn embedded newlines into spaces
-			link_id = alt_text.toLowerCase().replace(/ ?\n/g," ");
-		}
-		url = "#"+link_id;
-		
-		if (g_urls[link_id] != undefined) {
-			url = g_urls[link_id];
-			if (g_titles[link_id] != undefined) {
-				title = g_titles[link_id];
-			}
-		}
-		else {
-			return whole_match;
-		}
-	}	
-	
-	alt_text = alt_text.replace(/"/g,"&quot;");
-	url = escapeCharacters(url,"*_");
-	var result = "<img src=\"" + url + "\" alt=\"" + alt_text + "\"";
-
-	// attacklab: Markdown.pl adds empty title attributes to images.
-	// Replicate this bug.
-
-	//if (title != "") {
-		title = title.replace(/"/g,"&quot;");
-		title = escapeCharacters(title,"*_");
-		result +=  " title=\"" + title + "\"";
-	//}
-	
-	result += " />";
-	
-	return result;
-}
-
-
-var _DoHeaders = function(text) {
-
-	// Setext-style headers:
-	//	Header 1
-	//	========
-	//  
-	//	Header 2
-	//	--------
-	//
-	text = text.replace(/^(.+)[ \t]*\n=+[ \t]*\n+/gm,
-		function(wholeMatch,m1){return hashBlock('<h1 id="' + headerId(m1) + '">' + _RunSpanGamut(m1) + "</h1>");});
-
-	text = text.replace(/^(.+)[ \t]*\n-+[ \t]*\n+/gm,
-		function(matchFound,m1){return hashBlock('<h2 id="' + headerId(m1) + '">' + _RunSpanGamut(m1) + "</h2>");});
-
-	// atx-style headers:
-	//  # Header 1
-	//  ## Header 2
-	//  ## Header 2 with closing hashes ##
-	//  ...
-	//  ###### Header 6
-	//
-
-	/*
-		text = text.replace(/
-			^(\#{1,6})				// $1 = string of #'s
-			[ \t]*
-			(.+?)					// $2 = Header text
-			[ \t]*
-			\#*						// optional closing #'s (not counted)
-			\n+
-		/gm, function() {...});
-	*/
-
-	text = text.replace(/^(\#{1,6})[ \t]*(.+?)[ \t]*\#*\n+/gm,
-		function(wholeMatch,m1,m2) {
-			var h_level = m1.length;
-			return hashBlock("<h" + h_level + ' id="' + headerId(m2) + '">' + _RunSpanGamut(m2) + "</h" + h_level + ">");
-		});
-
-	function headerId(m) {
-		return m.replace(/[^\w]/g, '').toLowerCase();
-	}
-	return text;
-}
-
-// This declaration keeps Dojo compressor from outputting garbage:
-var _ProcessListItems;
-
-var _DoLists = function(text) {
-//
-// Form HTML ordered (numbered) and unordered (bulleted) lists.
-//
-
-	// attacklab: add sentinel to hack around khtml/safari bug:
-	// http://bugs.webkit.org/show_bug.cgi?id=11231
-	text += "~0";
-
-	// Re-usable pattern to match any entirel ul or ol list:
-
-	/*
-		var whole_list = /
-		(									// $1 = whole list
-			(								// $2
-				[ ]{0,3}					// attacklab: g_tab_width - 1
-				([*+-]|\d+[.])				// $3 = first list item marker
-				[ \t]+
-			)
-			[^\r]+?
-			(								// $4
-				~0							// sentinel for workaround; should be $
-			|
-				\n{2,}
-				(?=\S)
-				(?!							// Negative lookahead for another list item marker
-					[ \t]*
-					(?:[*+-]|\d+[.])[ \t]+
-				)
-			)
-		)/g
-	*/
-	var whole_list = /^(([ ]{0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(~0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm;
-
-	if (g_list_level) {
-		text = text.replace(whole_list,function(wholeMatch,m1,m2) {
-			var list = m1;
-			var list_type = (m2.search(/[*+-]/g)>-1) ? "ul" : "ol";
-
-			// Turn double returns into triple returns, so that we can make a
-			// paragraph for the last item in a list, if necessary:
-			list = list.replace(/\n{2,}/g,"\n\n\n");;
-			var result = _ProcessListItems(list);
-	
-			// Trim any trailing whitespace, to put the closing `</$list_type>`
-			// up on the preceding line, to get it past the current stupid
-			// HTML block parser. This is a hack to work around the terrible
-			// hack that is the HTML block parser.
-			result = result.replace(/\s+$/,"");
-			result = "<"+list_type+">" + result + "</"+list_type+">\n";
-			return result;
-		});
-	} else {
-		whole_list = /(\n\n|^\n?)(([ ]{0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(~0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/g;
-		text = text.replace(whole_list,function(wholeMatch,m1,m2,m3) {
-			var runup = m1;
-			var list = m2;
-
-			var list_type = (m3.search(/[*+-]/g)>-1) ? "ul" : "ol";
-			// Turn double returns into triple returns, so that we can make a
-			// paragraph for the last item in a list, if necessary:
-			var list = list.replace(/\n{2,}/g,"\n\n\n");;
-			var result = _ProcessListItems(list);
-			result = runup + "<"+list_type+">\n" + result + "</"+list_type+">\n";	
-			return result;
-		});
-	}
-
-	// attacklab: strip sentinel
-	text = text.replace(/~0/,"");
-
-	return text;
-}
-
-_ProcessListItems = function(list_str) {
-//
-//  Process the contents of a single ordered or unordered list, splitting it
-//  into individual list items.
-//
-	// The $g_list_level global keeps track of when we're inside a list.
-	// Each time we enter a list, we increment it; when we leave a list,
-	// we decrement. If it's zero, we're not in a list anymore.
-	//
-	// We do this because when we're not inside a list, we want to treat
-	// something like this:
-	//
-	//    I recommend upgrading to version
-	//    8. Oops, now this line is treated
-	//    as a sub-list.
-	//
-	// As a single paragraph, despite the fact that the second line starts
-	// with a digit-period-space sequence.
-	//
-	// Whereas when we're inside a list (or sub-list), that line will be
-	// treated as the start of a sub-list. What a kludge, huh? This is
-	// an aspect of Markdown's syntax that's hard to parse perfectly
-	// without resorting to mind-reading. Perhaps the solution is to
-	// change the syntax rules such that sub-lists must start with a
-	// starting cardinal number; e.g. "1." or "a.".
-
-	g_list_level++;
-
-	// trim trailing blank lines:
-	list_str = list_str.replace(/\n{2,}$/,"\n");
-
-	// attacklab: add sentinel to emulate \z
-	list_str += "~0";
-
-	/*
-		list_str = list_str.replace(/
-			(\n)?							// leading line = $1
-			(^[ \t]*)						// leading whitespace = $2
-			([*+-]|\d+[.]) [ \t]+			// list marker = $3
-			([^\r]+?						// list item text   = $4
-			(\n{1,2}))
-			(?= \n* (~0 | \2 ([*+-]|\d+[.]) [ \t]+))
-		/gm, function(){...});
-	*/
-	list_str = list_str.replace(/(\n)?(^[ \t]*)([*+-]|\d+[.])[ \t]+([^\r]+?(\n{1,2}))(?=\n*(~0|\2([*+-]|\d+[.])[ \t]+))/gm,
-		function(wholeMatch,m1,m2,m3,m4){
-			var item = m4;
-			var leading_line = m1;
-			var leading_space = m2;
-
-			if (leading_line || (item.search(/\n{2,}/)>-1)) {
-				item = _RunBlockGamut(_Outdent(item));
-			}
-			else {
-				// Recursion for sub-lists:
-				item = _DoLists(_Outdent(item));
-				item = item.replace(/\n$/,""); // chomp(item)
-				item = _RunSpanGamut(item);
-			}
-
-			return  "<li>" + item + "</li>\n";
-		}
-	);
-
-	// attacklab: strip sentinel
-	list_str = list_str.replace(/~0/g,"");
-
-	g_list_level--;
-	return list_str;
-}
-
-
-var _DoCodeBlocks = function(text) {
-//
-//  Process Markdown `<pre><code>` blocks.
-//  
-
-	/*
-		text = text.replace(text,
-			/(?:\n\n|^)
-			(								// $1 = the code block -- one or more lines, starting with a space/tab
-				(?:
-					(?:[ ]{4}|\t)			// Lines must start with a tab or a tab-width of spaces - attacklab: g_tab_width
-					.*\n+
-				)+
-			)
-			(\n*[ ]{0,3}[^ \t\n]|(?=~0))	// attacklab: g_tab_width
-		/g,function(){...});
-	*/
-
-	// attacklab: sentinel workarounds for lack of \A and \Z, safari\khtml bug
-	text += "~0";
-	
-	text = text.replace(/(?:\n\n|^)((?:(?:[ ]{4}|\t).*\n+)+)(\n*[ ]{0,3}[^ \t\n]|(?=~0))/g,
-		function(wholeMatch,m1,m2) {
-			var codeblock = m1;
-			var nextChar = m2;
-		
-			codeblock = _EncodeCode( _Outdent(codeblock));
-			codeblock = _Detab(codeblock);
-			codeblock = codeblock.replace(/^\n+/g,""); // trim leading newlines
-			codeblock = codeblock.replace(/\n+$/g,""); // trim trailing whitespace
-
-			codeblock = "<pre><code>" + codeblock + "\n</code></pre>";
-
-			return hashBlock(codeblock) + nextChar;
-		}
-	);
-
-	// attacklab: strip sentinel
-	text = text.replace(/~0/,"");
-
-	return text;
-}
-
-var hashBlock = function(text) {
-	text = text.replace(/(^\n+|\n+$)/g,"");
-	return "\n\n~K" + (g_html_blocks.push(text)-1) + "K\n\n";
-}
-
-
-var _DoCodeSpans = function(text) {
-//
-//   *  Backtick quotes are used for <code></code> spans.
-// 
-//   *  You can use multiple backticks as the delimiters if you want to
-//	 include literal backticks in the code span. So, this input:
-//	 
-//		 Just type ``foo `bar` baz`` at the prompt.
-//	 
-//	   Will translate to:
-//	 
-//		 <p>Just type <code>foo `bar` baz</code> at the prompt.</p>
-//	 
-//	There's no arbitrary limit to the number of backticks you
-//	can use as delimters. If you need three consecutive backticks
-//	in your code, use four for delimiters, etc.
-//
-//  *  You can use spaces to get literal backticks at the edges:
-//	 
-//		 ... type `` `bar` `` ...
-//	 
-//	   Turns to:
-//	 
-//		 ... type <code>`bar`</code> ...
-//
-
-	/*
-		text = text.replace(/
-			(^|[^\\])					// Character before opening ` can't be a backslash
-			(`+)						// $2 = Opening run of `
-			(							// $3 = The code block
-				[^\r]*?
-				[^`]					// attacklab: work around lack of lookbehind
-			)
-			\2							// Matching closer
-			(?!`)
-		/gm, function(){...});
-	*/
-
-	text = text.replace(/(^|[^\\])(`+)([^\r]*?[^`])\2(?!`)/gm,
-		function(wholeMatch,m1,m2,m3,m4) {
-			var c = m3;
-			c = c.replace(/^([ \t]*)/g,"");	// leading whitespace
-			c = c.replace(/[ \t]*$/g,"");	// trailing whitespace
-			c = _EncodeCode(c);
-			return m1+"<code>"+c+"</code>";
-		});
-
-	return text;
-}
-
-
-var _EncodeCode = function(text) {
-//
-// Encode/escape certain characters inside Markdown code runs.
-// The point is that in code, these characters are literals,
-// and lose their special Markdown meanings.
-//
-	// Encode all ampersands; HTML entities are not
-	// entities within a Markdown code span.
-	text = text.replace(/&/g,"&amp;");
-
-	// Do the angle bracket song and dance:
-	text = text.replace(/</g,"&lt;");
-	text = text.replace(/>/g,"&gt;");
-
-	// Now, escape characters that are magic in Markdown:
-	text = escapeCharacters(text,"\*_{}[]\\",false);
-
-// jj the line above breaks this:
-//---
-
-//* Item
-
-//   1. Subitem
-
-//            special char: *
-//---
-
-	return text;
-}
-
-
-var _DoItalicsAndBold = function(text) {
-
-	// <strong> must go first:
-	text = text.replace(/(\*\*|__)(?=\S)([^\r]*?\S[*_]*)\1/g,
-		"<strong>$2</strong>");
-
-	text = text.replace(/(\*|_)(?=\S)([^\r]*?\S)\1/g,
-		"<em>$2</em>");
-
-	return text;
-}
-
-
-var _DoBlockQuotes = function(text) {
-
-	/*
-		text = text.replace(/
-		(								// Wrap whole match in $1
-			(
-				^[ \t]*>[ \t]?			// '>' at the start of a line
-				.+\n					// rest of the first line
-				(.+\n)*					// subsequent consecutive lines
-				\n*						// blanks
-			)+
-		)
-		/gm, function(){...});
-	*/
-
-	text = text.replace(/((^[ \t]*>[ \t]?.+\n(.+\n)*\n*)+)/gm,
-		function(wholeMatch,m1) {
-			var bq = m1;
-
-			// attacklab: hack around Konqueror 3.5.4 bug:
-			// "----------bug".replace(/^-/g,"") == "bug"
-
-			bq = bq.replace(/^[ \t]*>[ \t]?/gm,"~0");	// trim one level of quoting
-
-			// attacklab: clean up hack
-			bq = bq.replace(/~0/g,"");
-
-			bq = bq.replace(/^[ \t]+$/gm,"");		// trim whitespace-only lines
-			bq = _RunBlockGamut(bq);				// recurse
-			
-			bq = bq.replace(/(^|\n)/g,"$1  ");
-			// These leading spaces screw with <pre> content, so we need to fix that:
-			bq = bq.replace(
-					/(\s*<pre>[^\r]+?<\/pre>)/gm,
-				function(wholeMatch,m1) {
-					var pre = m1;
-					// attacklab: hack around Konqueror 3.5.4 bug:
-					pre = pre.replace(/^  /mg,"~0");
-					pre = pre.replace(/~0/g,"");
-					return pre;
-				});
-			
-			return hashBlock("<blockquote>\n" + bq + "\n</blockquote>");
-		});
-	return text;
-}
-
-
-var _FormParagraphs = function(text) {
-//
-//  Params:
-//    $text - string to process with html <p> tags
-//
-
-	// Strip leading and trailing lines:
-	text = text.replace(/^\n+/g,"");
-	text = text.replace(/\n+$/g,"");
-
-	var grafs = text.split(/\n{2,}/g);
-	var grafsOut = new Array();
-
-	//
-	// Wrap <p> tags.
-	//
-	var end = grafs.length;
-	for (var i=0; i<end; i++) {
-		var str = grafs[i];
-
-		// if this is an HTML marker, copy it
-		if (str.search(/~K(\d+)K/g) >= 0) {
-			grafsOut.push(str);
-		}
-		else if (str.search(/\S/) >= 0) {
-			str = _RunSpanGamut(str);
-			str = str.replace(/^([ \t]*)/g,"<p>");
-			str += "</p>"
-			grafsOut.push(str);
-		}
-
-	}
-
-	//
-	// Unhashify HTML blocks
-	//
-	end = grafsOut.length;
-	for (var i=0; i<end; i++) {
-		// if this is a marker for an html block...
-		while (grafsOut[i].search(/~K(\d+)K/) >= 0) {
-			var blockText = g_html_blocks[RegExp.$1];
-			blockText = blockText.replace(/\$/g,"$$$$"); // Escape any dollar signs
-			grafsOut[i] = grafsOut[i].replace(/~K\d+K/,blockText);
-		}
-	}
-
-	return grafsOut.join("\n\n");
-}
-
-
-var _EncodeAmpsAndAngles = function(text) {
-// Smart processing for ampersands and angle brackets that need to be encoded.
-	
-	// Ampersand-encoding based entirely on Nat Irons's Amputator MT plugin:
-	//   http://bumppo.net/projects/amputator/
-	text = text.replace(/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w+);)/g,"&amp;");
-	
-	// Encode naked <'s
-	text = text.replace(/<(?![a-z\/?\$!])/gi,"&lt;");
-	
-	return text;
-}
-
-
-var _EncodeBackslashEscapes = function(text) {
-//
-//   Parameter:  String.
-//   Returns:	The string, with after processing the following backslash
-//			   escape sequences.
-//
-
-	// attacklab: The polite way to do this is with the new
-	// escapeCharacters() function:
-	//
-	// 	text = escapeCharacters(text,"\\",true);
-	// 	text = escapeCharacters(text,"`*_{}[]()>#+-.!",true);
-	//
-	// ...but we're sidestepping its use of the (slow) RegExp constructor
-	// as an optimization for Firefox.  This function gets called a LOT.
-
-	text = text.replace(/\\(\\)/g,escapeCharacters_callback);
-	text = text.replace(/\\([`*_{}\[\]()>#+-.!])/g,escapeCharacters_callback);
-	return text;
-}
-
-
-var _DoAutoLinks = function(text) {
-
-	text = text.replace(/<((https?|ftp|dict):[^'">\s]+)>/gi,"<a href=\"$1\">$1</a>");
-
-	// Email addresses: <address@domain.foo>
-
-	/*
-		text = text.replace(/
-			<
-			(?:mailto:)?
-			(
-				[-.\w]+
-				\@
-				[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+
-			)
-			>
-		/gi, _DoAutoLinks_callback());
-	*/
-	text = text.replace(/<(?:mailto:)?([-.\w]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)>/gi,
-		function(wholeMatch,m1) {
-			return _EncodeEmailAddress( _UnescapeSpecialChars(m1) );
-		}
-	);
-
-	return text;
-}
-
-
-var _EncodeEmailAddress = function(addr) {
-//
-//  Input: an email address, e.g. "foo@example.com"
-//
-//  Output: the email address as a mailto link, with each character
-//	of the address encoded as either a decimal or hex entity, in
-//	the hopes of foiling most address harvesting spam bots. E.g.:
-//
-//	<a href="&#x6D;&#97;&#105;&#108;&#x74;&#111;:&#102;&#111;&#111;&#64;&#101;
-//	   x&#x61;&#109;&#x70;&#108;&#x65;&#x2E;&#99;&#111;&#109;">&#102;&#111;&#111;
-//	   &#64;&#101;x&#x61;&#109;&#x70;&#108;&#x65;&#x2E;&#99;&#111;&#109;</a>
-//
-//  Based on a filter by Matthew Wickline, posted to the BBEdit-Talk
-//  mailing list: <http://tinyurl.com/yu7ue>
-//
-
-	// attacklab: why can't javascript speak hex?
-	function char2hex(ch) {
-		var hexDigits = '0123456789ABCDEF';
-		var dec = ch.charCodeAt(0);
-		return(hexDigits.charAt(dec>>4) + hexDigits.charAt(dec&15));
-	}
-
-	var encode = [
-		function(ch){return "&#"+ch.charCodeAt(0)+";";},
-		function(ch){return "&#x"+char2hex(ch)+";";},
-		function(ch){return ch;}
-	];
-
-	addr = "mailto:" + addr;
-
-	addr = addr.replace(/./g, function(ch) {
-		if (ch == "@") {
-		   	// this *must* be encoded. I insist.
-			ch = encode[Math.floor(Math.random()*2)](ch);
-		} else if (ch !=":") {
-			// leave ':' alone (to spot mailto: later)
-			var r = Math.random();
-			// roughly 10% raw, 45% hex, 45% dec
-			ch =  (
-					r > .9  ?	encode[2](ch)   :
-					r > .45 ?	encode[1](ch)   :
-								encode[0](ch)
-				);
-		}
-		return ch;
-	});
-
-	addr = "<a href=\"" + addr + "\">" + addr + "</a>";
-	addr = addr.replace(/">.+:/g,"\">"); // strip the mailto: from the visible part
-
-	return addr;
-}
-
-
-var _UnescapeSpecialChars = function(text) {
-//
-// Swap back in all the special characters we've hidden.
-//
-	text = text.replace(/~E(\d+)E/g,
-		function(wholeMatch,m1) {
-			var charCodeToReplace = parseInt(m1);
-			return String.fromCharCode(charCodeToReplace);
-		}
-	);
-	return text;
-}
-
-
-var _Outdent = function(text) {
-//
-// Remove one level of line-leading tabs or spaces
-//
-
-	// attacklab: hack around Konqueror 3.5.4 bug:
-	// "----------bug".replace(/^-/g,"") == "bug"
-
-	text = text.replace(/^(\t|[ ]{1,4})/gm,"~0"); // attacklab: g_tab_width
-
-	// attacklab: clean up hack
-	text = text.replace(/~0/g,"")
-
-	return text;
-}
-
-var _Detab = function(text) {
-// attacklab: Detab's completely rewritten for speed.
-// In perl we could fix it by anchoring the regexp with \G.
-// In javascript we're less fortunate.
-
-	// expand first n-1 tabs
-	text = text.replace(/\t(?=\t)/g,"    "); // attacklab: g_tab_width
-
-	// replace the nth with two sentinels
-	text = text.replace(/\t/g,"~A~B");
-
-	// use the sentinel to anchor our regex so it doesn't explode
-	text = text.replace(/~B(.+?)~A/g,
-		function(wholeMatch,m1,m2) {
-			var leadingText = m1;
-			var numSpaces = 4 - leadingText.length % 4;  // attacklab: g_tab_width
-
-			// there *must* be a better way to do this:
-			for (var i=0; i<numSpaces; i++) leadingText+=" ";
-
-			return leadingText;
-		}
-	);
-
-	// clean up sentinels
-	text = text.replace(/~A/g,"    ");  // attacklab: g_tab_width
-	text = text.replace(/~B/g,"");
-
-	return text;
-}
-
-
-//
-//  attacklab: Utility functions
-//
-
-
-var escapeCharacters = function(text, charsToEscape, afterBackslash) {
-	// First we have to escape the escape characters so that
-	// we can build a character class out of them
-	var regexString = "([" + charsToEscape.replace(/([\[\]\\])/g,"\\$1") + "])";
-
-	if (afterBackslash) {
-		regexString = "\\\\" + regexString;
-	}
-
-	var regex = new RegExp(regexString,"g");
-	text = text.replace(regex,escapeCharacters_callback);
-
-	return text;
-}
-
-
-var escapeCharacters_callback = function(wholeMatch,m1) {
-	var charCodeToEscape = m1.charCodeAt(0);
-	return "~E"+charCodeToEscape+"E";
-}
-
-} // end of Showdown.converter
-
-// export
-if (typeof exports != 'undefined') exports.Showdown = Showdown;
\ No newline at end of file
diff --git a/docs/jsx-compiler.md b/docs/jsx-compiler.md
deleted file mode 100644
index 5fd52b99d53..00000000000
--- a/docs/jsx-compiler.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-layout: default
-title: JSX Compiler Service
-id: jsx-compiler
----
-<div class="jsxCompiler">
-  <h1>JSX Compiler</h1>
-  <p>
-    This tool demonstrates how <a href="/react/docs/jsx-in-depth.html">JSX syntax</a>
-    is desugared into native JavaScript.
-  </p>
-  <div id="jsxCompiler"></div>
-  <script type="text/javascript" src="js/jsx-compiler.js"></script>
-</div>
diff --git a/docs/support.md b/docs/support.md
deleted file mode 100644
index 496039b1340..00000000000
--- a/docs/support.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Need help?
-layout: single
-id: support
----
-
-**React** is worked on full-time by Facebook's product infrastructure and Instagram's user interface engineering teams. They're often around and available for questions.
-
-## Stack Overflow
-
-Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](http://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](http://stackoverflow.com/questions/ask)!
-
-## Google Groups mailing list
-
-<a href="http://groups.google.com/group/reactjs" target="_blank">The **reactjs** Google Group</a> is also a good place to ask questions and find answers.
-
-## IRC
-
-Many developers and users idle on Freenode.net's IRC network in **[#reactjs on freenode](irc://chat.freenode.net/reactjs)**.
-
-## Twitter
-
-[**#reactjs** hash tag on Twitter](https://twitter.com/search?q=%23reactjs) is used to keep up with the latest React news.
-
-<div><a class="twitter-timeline" data-dnt="true" data-chrome="nofooter noheader transparent" href="https://twitter.com/search?q=%23reactjs" data-widget-id="342522405270470656"></a></div>
diff --git a/docs/tips/01-introduction.md b/docs/tips/01-introduction.md
deleted file mode 100644
index c88489b9063..00000000000
--- a/docs/tips/01-introduction.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-id: introduction
-title: Introduction
-layout: tips
-permalink: introduction.html
-next: inline-styles.html
----
-
-The React tips section provides bite-sized information that can answer lots of questions you might have and warn you against common pitfalls.
-
-## Contributing
-
-Submit a pull request to the [React repository](https://github.com/facebook/react) following the [current tips](https://github.com/facebook/react/tree/master/docs) entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs channel on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](http://groups.google.com/group/reactjs).
diff --git a/docs/tips/02-inline-styles.md b/docs/tips/02-inline-styles.md
deleted file mode 100644
index 1f61596a541..00000000000
--- a/docs/tips/02-inline-styles.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: inline-styles
-title: Inline Styles
-layout: tips
-permalink: inline-styles.html
-next: if-else-in-JSX.html
-prev: introduction.html
----
-
-In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string ([more on that later](/react/tips/style-props-value-px.html)):
-
-```js
-/** @jsx React.DOM */
-
-var divStyle = {
-  color: 'white',
-  backgroundImage: 'url(' + imgUrl + ')',
-  WebkitTransition: 'all' // note the capital 'W' here
-};
-
-React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
-```
-
-Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
diff --git a/docs/tips/03-if-else-in-JSX.md b/docs/tips/03-if-else-in-JSX.md
deleted file mode 100644
index 5a04c9f60e3..00000000000
--- a/docs/tips/03-if-else-in-JSX.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-id: if-else-in-JSX
-title: If-Else in JSX
-layout: tips
-permalink: if-else-in-JSX.html
-prev: inline-styles.html
-next: self-closing-tag.html
----
-
-`if-else` statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:
-
-```js
-/** @jsx React.DOM */
-
-// This JSX:
-React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
-
-// Is transformed to this JS:
-React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
-```
-
-This means that `if` statements don't fit in. Take this example:
-
-```js
-/** @jsx React.DOM */
-
-// This JSX:
-<div id={if (condition) { 'msg' }}>Hello World!</div>
-
-// Is transformed to this JS:
-React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!");
-```
-
-That's not valid JS. You probably want to make use of a ternary expression:
-
-```js
-/** @jsx React.DOM */
-
-React.renderComponent(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
-```
-
-Try using it today with the [JSX compiler](/react/jsx-compiler.html).
diff --git a/docs/tips/04-self-closing-tag.md b/docs/tips/04-self-closing-tag.md
deleted file mode 100644
index 7c0a72fa8e9..00000000000
--- a/docs/tips/04-self-closing-tag.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-id: self-closing-tag
-title: Self-Closing Tag
-layout: tips
-permalink: self-closing-tag.html
-prev: if-else-in-JSX.html
-next: maximum-number-of-jsx-root-nodes.html
----
-
-In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't. All tags must be closed, either with the self-closing format or with a corresponding closing tag (`</MyComponent>`).
-
-> Note:
->
-> Every React component can be self-closing: `<div />`. `<div></div>` is also an equivalent.
diff --git a/docs/tips/05-maximum-number-of-jsx-root-nodes.md b/docs/tips/05-maximum-number-of-jsx-root-nodes.md
deleted file mode 100644
index 0ce319e6330..00000000000
--- a/docs/tips/05-maximum-number-of-jsx-root-nodes.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-id: maximum-number-of-jsx-root-nodes
-title: Maximum Number of JSX Root Nodes
-layout: tips
-permalink: maximum-number-of-jsx-root-nodes.html
-prev: self-closing-tag.html
-next: style-props-value-px.html
----
-
-Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.
-
-Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.
diff --git a/docs/tips/06-style-props-value-px.md b/docs/tips/06-style-props-value-px.md
deleted file mode 100644
index 38124545dc0..00000000000
--- a/docs/tips/06-style-props-value-px.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-id: style-props-value-px
-title: Shorthand for Specifying Pixel Values in style props
-layout: tips
-permalink: style-props-value-px.html
-prev: maximum-number-of-jsx-root-nodes.html
-next: children-props-type.html
----
-
-When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works:
-
-```js
-/** @jsx React.DOM */
-
-var divStyle = {height: 10}; // rendered as "height:10px"
-React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
-```
-
-See [Inline Styles](/react/tips/inline-styles.html) for more info.
-
-Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
-
-- `columnCount`
-- `fillOpacity`
-- `flex`
-- `flexGrow`
-- `flexShrink`
-- `fontWeight`
-- `lineClamp`
-- `lineHeight`
-- `opacity`
-- `order`
-- `orphans`
-- `widows`
-- `zIndex`
-- `zoom`
diff --git a/docs/tips/07-children-props-type.md b/docs/tips/07-children-props-type.md
deleted file mode 100644
index 16edcce5a93..00000000000
--- a/docs/tips/07-children-props-type.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-id: children-props-type
-title: Type of the Children props
-layout: tips
-permalink: children-props-type.html
-prev: style-props-value-px.html
-next: controlled-input-null-value.html
----
-
-Usually, a component's children (`this.props.children`) is an array of components:
-
-```js
-/** @jsx React.DOM */
-
-var GenericWrapper = React.createClass({
-  componentDidMount: function() {
-    console.log(Array.isArray(this.props.children)); // => true
-  },
-
-  render: function() {
-    return <div />;
-  }
-});
-
-React.renderComponent(
-  <GenericWrapper><span/><span/><span/></GenericWrapper>,
-  mountNode
-);
-```
-
-However, when there is only a single child, `this.props.children` will be the single child component itself _without the array wrapper_. This saves an array allocation.
-
-```js
-/** @jsx React.DOM */
-
-var GenericWrapper = React.createClass({
-  componentDidMount: function() {
-    console.log(Array.isArray(this.props.children)); // => false
-
-    // warning: yields 5 for length of the string 'hello', not 1 for the
-    // length of the non-existant array wrapper!
-    console.log(this.props.children.length);
-  },
-
-  render: function() {
-    return <div />;
-  }
-});
-
-React.renderComponent(<GenericWrapper>hello</GenericWrapper>, mountNode);
-```
-
-To make `this.props.children` easy to deal with, we've provided the [React.Children utilities](/react/docs/top-level-api.html#react.children).
diff --git a/docs/tips/08-controlled-input-null-value.md b/docs/tips/08-controlled-input-null-value.md
deleted file mode 100644
index 34312508ce7..00000000000
--- a/docs/tips/08-controlled-input-null-value.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: controlled-input-null-value
-title: Value of null for Controlled Input
-layout: tips
-permalink: controlled-input-null-value.html
-prev: children-props-type.html
-next: componentWillReceiveProps-not-triggered-after-mounting.html
----
-
-Specifying the `value` prop on a [controlled component](/react/docs/forms.html) prevents the user from changing the input unless you desire so.
-
-You might have run into a problem where `value` is specified, but the input can still be changed without consent. In this case, you might have accidentally set `value` to `undefined` or `null`.
-
-The snippet below shows this phenomenon; after a second, the text becomes editable.
-
-```js
-/** @jsx React.DOM */
-
-React.renderComponent(<input value="hi" />, mountNode);
-
-setTimeout(function() {
-  React.renderComponent(<input value={null} />, mountNode);
-}, 1000);
-```
diff --git a/docs/tips/09-componentWillReceiveProps-not-triggered-after-mounting.md b/docs/tips/09-componentWillReceiveProps-not-triggered-after-mounting.md
deleted file mode 100644
index b4b1cd5c1a6..00000000000
--- a/docs/tips/09-componentWillReceiveProps-not-triggered-after-mounting.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-id: componentWillReceiveProps-not-triggered-after-mounting
-title: componentWillReceiveProps Not Triggered After Mounting
-layout: tips
-permalink: componentWillReceiveProps-not-triggered-after-mounting.html
-prev: controlled-input-null-value.html
-next: props-in-getInitialState-as-anti-pattern.html
----
-
-`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/component-specs.html) for the one that suits your needs.
-
-The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does.
diff --git a/docs/tips/10-props-in-getInitialState-as-anti-pattern.md b/docs/tips/10-props-in-getInitialState-as-anti-pattern.md
deleted file mode 100644
index bb8a3aefd70..00000000000
--- a/docs/tips/10-props-in-getInitialState-as-anti-pattern.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-id: props-in-getInitialState-as-anti-pattern
-title: Props in getInitialState Is an Anti-Pattern
-layout: tips
-permalink: props-in-getInitialState-as-anti-pattern.html
-prev: componentWillReceiveProps-not-triggered-after-mounting.html
-next: dom-event-listeners.html
----
-
-> Note:
->
-> This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly.
-
-Using props, passed down from parent, to generate state in `getInitialState` often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble.
-
-**Bad example:**
-
-```js
-/** @jsx React.DOM */
-
-var MessageBox = React.createClass({
-  getInitialState: function() {
-    return {nameWithQualifier: 'Mr. ' + this.props.name};
-  },
-
-  render: function() {
-    return <div>{this.state.nameWithQualifier}</div>;
-  }
-});
-
-React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
-```
-
-Better:
-
-```js
-/** @jsx React.DOM */
-
-var MessageBox = React.createClass({
-  render: function() {
-    return <div>{'Mr. ' + this.props.name}</div>;
-  }
-});
-
-React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
-```
-
-(For more complex logic, simply isolate the computation in a method.)
-
-However, it's **not** an anti-pattern if you make it clear that synchronization's not the goal here:
-
-```js
-/** @jsx React.DOM */
-
-var Counter = React.createClass({
-  getInitialState: function() {
-    // naming it initialX clearly indicates that the only purpose
-    // of the passed down prop is to initialize something internally
-    return {count: this.props.initialCount};
-  },
-
-  handleClick: function() {
-    this.setState({count: this.state.count + 1});
-  },
-
-  render: function() {
-    return <div onClick={this.handleClick}>{this.state.count}</div>;
-  }
-});
-
-React.renderComponent(<Counter initialCount={7}/>, mountNode);
-```
diff --git a/docs/tips/11-dom-event-listeners.md b/docs/tips/11-dom-event-listeners.md
deleted file mode 100644
index 63bc957b5d9..00000000000
--- a/docs/tips/11-dom-event-listeners.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-id: dom-event-listeners
-title: DOM Event Listeners in a Component
-layout: tips
-permalink: dom-event-listeners.html
-prev: props-in-getInitialState-as-anti-pattern.html
-next: initial-ajax.html
----
-
-> Note:
->
-> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/events.html)). This is good for integrations with other libraries such as jQuery.
-
-Try to resize the window:
-
-```js
-/** @jsx React.DOM */
-
-var Box = React.createClass({
-  getInitialState: function() {
-    return {windowWidth: window.innerWidth};
-  },
-
-  handleResize: function(e) {
-    this.setState({windowWidth: window.innerWidth});
-  },
-
-  componentDidMount: function() {
-    window.addEventListener('resize', this.handleResize);
-  },
-
-  componentWillUnmount: function() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-
-  render: function() {
-    return <div>Current window width: {this.state.windowWidth}</div>;
-  }
-});
-
-React.renderComponent(<Box />, mountNode);
-```
-
-`componentDidMount` is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.
-
-Notice that the event callback is bound to the react component and not the original element. React automatically binds methods to the current component instance for you through a process of [autobinding](/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation).
diff --git a/docs/tips/12-initial-ajax.md b/docs/tips/12-initial-ajax.md
deleted file mode 100644
index b649c3e6ee3..00000000000
--- a/docs/tips/12-initial-ajax.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-id: initial-ajax
-title: Load Initial Data via AJAX
-layout: tips
-permalink: initial-ajax.html
-prev: dom-event-listeners.html
-next: false-in-jsx.html
----
-
-Fetch data in `componentDidMount`. When the response arrives, store the data in state, triggering a render to update your UI.
-
-When processing the response of an asynchronous request, be sure to check that the component is still mounted before updating its state by using `this.isMounted()`.
-
-This example fetches the desired Github user's latest gist:
-
-```js
-/** @jsx React.DOM */
-
-var UserGist = React.createClass({
-  getInitialState: function() {
-    return {
-      username: '',
-      lastGistUrl: ''
-    };
-  },
-
-  componentDidMount: function() {
-    $.get(this.props.source, function(result) {
-      var lastGist = result[0];
-      if (this.isMounted()) {
-        this.setState({
-          username: lastGist.owner.login,
-          lastGistUrl: lastGist.html_url
-        });
-      }
-    }.bind(this));
-  },
-
-  render: function() {
-    return (
-      <div>
-        {this.state.username}'s last gist is
-        <a href={this.state.lastGistUrl}>here</a>.
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <UserGist source="https://api.github.com/users/octocat/gists" />,
-  mountNode
-);
-```
diff --git a/docs/tips/13-false-in-jsx.md b/docs/tips/13-false-in-jsx.md
deleted file mode 100644
index ae5f831c03f..00000000000
--- a/docs/tips/13-false-in-jsx.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-id: false-in-jsx
-title: False in JSX
-layout: tips
-permalink: false-in-jsx.html
-prev: initial-ajax.html
-next: communicate-between-components.html
----
-
-Here's how `false` renders in different contexts:
-
-Renders as `id="false"`:
-
-```js
-/** @jsx React.DOM */
-React.renderComponent(<div id={false} />, mountNode);
-```
-
-String `"false"` as input value:
-
-```js
-/** @jsx React.DOM */
-React.renderComponent(<input value={false} />, mountNode);
-```
-
-No child:
-
-```js
-/** @jsx React.DOM */
-React.renderComponent(<div>{false}</div>, mountNode);
-```
-
-The reason why this one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && 'You have more than one item'}</div>`.
diff --git a/docs/tips/14-communicate-between-components.md b/docs/tips/14-communicate-between-components.md
deleted file mode 100644
index 08582f9601a..00000000000
--- a/docs/tips/14-communicate-between-components.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-id: communicate-between-components
-title: Communicate Between Components
-layout: tips
-permalink: communicate-between-components.html
-prev: false-in-jsx.html
-next: expose-component-functions.html
----
-
-For parent-child communication, simply [pass props](/react/docs/multiple-components.html).
-
-For child-parent communication:
-Say your `GroceryList` component has a list of items generated through an array. When a list item is clicked, you want to display its name:
-
-```js
-/** @jsx React.DOM */
-
-var GroceryList = React.createClass({
-  handleClick: function(i) {
-    console.log('You clicked: ' + this.props.items[i]);
-  },
-
-  render: function() {
-    return (
-      <div>
-        {this.props.items.map(function(item, i) {
-          return (
-            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
-          );
-        }, this)}
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
-);
-```
-
-Notice the use of `bind(this, arg1, arg2, ...)`: we're simply passing more arguments to `handleClick`. This is not a new React concept; it's just JavaScript.
-
-For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and when you receive an event, call `setState()`.
diff --git a/docs/tips/15-expose-component-functions.md b/docs/tips/15-expose-component-functions.md
deleted file mode 100644
index a63880cddd0..00000000000
--- a/docs/tips/15-expose-component-functions.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-id: expose-component-functions
-title: Expose Component Functions
-layout: tips
-permalink: expose-component-functions.html
-prev: communicate-between-components.html
-next: references-to-components.html
----
-
-There's another (uncommon) way of [communicating between components](/react/tips/communicate-between-components.html): simply expose a method on the child component for the parent to call.
-
-Say a list of todos, which upon clicking get removed. If there's only one unfinished todo left, animate it:
-
-```js
-/** @jsx React.DOM */
-
-var Todo = React.createClass({
-  render: function() {
-    return <div onClick={this.props.onClick}>{this.props.title}</div>;
-  },
-
-  //this component will be accessed by the parent through the `ref` attribute
-  animate: function() {
-    console.log('Pretend %s is animating', this.props.title);
-  }
-});
-
-var Todos = React.createClass({
-  getInitialState: function() {
-    return {items: ['Apple', 'Banana', 'Cranberry']};
-  },
-
-  handleClick: function(index) {
-    var items = this.state.items.filter(function(item, i) {
-      return index !== i;
-    });
-    this.setState({items: items}, function() {
-      if (items.length === 1) {
-        this.refs.item0.animate();
-      }
-    }.bind(this));
-  },
-
-  render: function() {
-    return (
-      <div>
-        {this.state.items.map(function(item, i) {
-          var boundClick = this.handleClick.bind(this, i);
-          return (
-            <Todo onClick={boundClick} key={i} title={item} ref={'item' + i} />
-          );
-        }, this)}
-      </div>
-    );
-  }
-});
-
-React.renderComponent(<Todos />, mountNode);
-```
-
-Alternatively, you could have achieved this by passing the `todo` an `isLastUnfinishedItem` prop, let it check this prop in `componentDidUpdate`, then animate itself; however, this quickly gets messy if you pass around different props to control animations.
diff --git a/docs/tips/16-references-to-components.md b/docs/tips/16-references-to-components.md
deleted file mode 100644
index 8749170bdad..00000000000
--- a/docs/tips/16-references-to-components.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-id: references-to-components
-title: References to Components
-layout: tips
-permalink: references-to-components.html
-prev: expose-component-functions.html
-next: children-undefined.html
----
-
-If you're using React components in a larger non-React application or transitioning your code to React, you may need to keep references to components. `React.renderComponent` returns a reference to the mounted component:
-
-```js
-/** @jsx React.DOM */
-
-var myComponent = React.renderComponent(<MyComponent />, myContainer);
-```
-
-Keep in mind, however, that the "constructor" of a component doesn't return a component instance! It's just a **descriptor**: a lightweight representation that tells React what the mounted component should look like.
-
-```js
-/** @jsx React.DOM */
-
-var myComponent = <MyComponent />; // This is just a descriptor.
-
-// Some code here...
-
-myComponent = React.renderComponent(myComponent, myContainer);
-```
-
-> Note:
->
-> This should only ever be used at the top level. Inside components, let your `props` and `state` handle communication with child components, and only reference components via [refs](http://facebook.github.io/react/docs/more-about-refs.html).
diff --git a/docs/tips/17-children-undefined.md b/docs/tips/17-children-undefined.md
deleted file mode 100644
index 5ed9c938260..00000000000
--- a/docs/tips/17-children-undefined.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-id: children-undefined
-title: this.props.children undefined
-layout: tips
-permalink: children-undefined.html
-prev: references-to-components.html
----
-
-You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner:
-
-```js
-/** @jsx React.DOM */
-
-var App = React.createClass({
-  componentDidMount: function() {
-    // This doesn't refer to the `span`s! It refers to the children between
-    // last line's `<App></App>`, which are undefined.
-    console.log(this.props.children);
-  },
-
-  render: function() {
-    return <div><span/><span/></div>;
-  }
-});
-
-React.renderComponent(<App></App>, mountNode);
-```
-
-To access your own subcomponents (the `span`s), place [refs](http://facebook.github.io/react/docs/more-about-refs.html) on them.
diff --git a/examples/README.md b/examples/README.md
deleted file mode 100644
index 1ed81185a38..00000000000
--- a/examples/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# React Examples
-
-Here are some small React demos. Some use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration.
-
-For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/architecture-examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/labs/architecture-examples/react-backbone/).
diff --git a/examples/ballmer-peak/ballmer_peak.png b/examples/ballmer-peak/ballmer_peak.png
deleted file mode 100644
index a7a3d10e9d3..00000000000
Binary files a/examples/ballmer-peak/ballmer_peak.png and /dev/null differ
diff --git a/examples/ballmer-peak/example.js b/examples/ballmer-peak/example.js
deleted file mode 100644
index f9ef06f110c..00000000000
--- a/examples/ballmer-peak/example.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @jsx React.DOM
- */
-
-function computeBallmerPeak(x) {
-  // see: http://ask.metafilter.com/76859/Make-a-function-of-this-graph-Thats-like-an-antigraph
-  x = x * 100;
-  return (
-    1-1/(1+Math.exp(-(x-6)))*.5 + Math.exp(-Math.pow(Math.abs(x-10), 2)*10)
-  ) / 1.6;
-}
-
-var BallmerPeakCalculator = React.createClass({
-  getInitialState: function() {
-    return {bac: 0};
-  },
-  handleChange: function(event) {
-    this.setState({bac: event.target.value});
-  },
-  render: function() {
-    var pct = computeBallmerPeak(this.state.bac);
-    if (isNaN(pct)) {
-      pct = 'N/A';
-    } else {
-      pct = (100 - Math.round(pct * 100)) + '%';
-    }
-    return (
-      <div>
-        <img src="./ballmer_peak.png" />
-        <p>Credit due to <a href="http://xkcd.com/323/">xkcd</a>.</p>
-        <h4>Compute your Ballmer Peak:</h4>
-        <p>
-          If your BAC is{' '}
-          <input type="text" onChange={this.handleChange} value={this.state.bac} />
-          {', '}then <b>{pct}</b> of your lines of code will be bug free.
-        </p>
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <BallmerPeakCalculator />,
-  document.getElementById('container')
-);
diff --git a/examples/ballmer-peak/index.html b/examples/ballmer-peak/index.html
deleted file mode 100644
index b7736a27cc6..00000000000
--- a/examples/ballmer-peak/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Ballmer Peak Calculator</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Ballmer Peak Calculator</h1>
-    <div id="container">
-      <p>
-        If you can see this, React is not working right. This is probably because you&apos;re viewing
-        this on your file system instead of a web server. Try running
-        <pre>
-          python -m SimpleHTTPServer
-        </pre>
-        and going to <a href="http://localhost:8000/">http://localhost:8000/</a>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a separate file and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/JSXTransformer.js"></script>
-    <script type="text/jsx" src="example.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-commonjs/README.md b/examples/basic-commonjs/README.md
deleted file mode 100644
index bd9d2499fa3..00000000000
--- a/examples/basic-commonjs/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Basic example of using React with Browserify
-
-Run `npm install` in the directory to install React from npm. Then run:
-
-    ./node_modules/.bin/browserify --debug --transform reactify ./index.js > ./bundle.js
-
-to produce `bundle.js` with example code and React.
diff --git a/examples/basic-commonjs/index.html b/examples/basic-commonjs/index.html
deleted file mode 100644
index 99e7551be2b..00000000000
--- a/examples/basic-commonjs/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic CommonJS Example with Browserify</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic CommonJS Example with Browserify</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="http://www.github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is not working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a CommonJS module and precompiled to vanilla JS by running:</p>
-    <pre>browserify --debug --transform reactify index.js &gt; bundle.js</pre>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="bundle.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-commonjs/index.js b/examples/basic-commonjs/index.js
deleted file mode 100644
index 9344c32cdda..00000000000
--- a/examples/basic-commonjs/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
-  * @jsx React.DOM
-  */
-
-var React = require('react');
-
-var ExampleApplication = React.createClass({
-  render: function() {
-    var elapsed = Math.round(this.props.elapsed  / 100);
-    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-    var message =
-      'React has been successfully running for ' + seconds + ' seconds.';
-
-    return <p>{message}</p>;
-  }
-});
-
-var start = new Date().getTime();
-
-setInterval(function() {
-  React.renderComponent(
-    <ExampleApplication elapsed={new Date().getTime() - start} />,
-    document.getElementById('container')
-  );
-}, 50);
diff --git a/examples/basic-commonjs/package.json b/examples/basic-commonjs/package.json
deleted file mode 100644
index d72927a4314..00000000000
--- a/examples/basic-commonjs/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "name": "react-basic-commonjs-example",
-  "description": "Basic example of using React with CommonJS",
-  "main": "index.js",
-  "devDependencies": {
-    "envify": "~1.2.1",
-    "react": "~0.10.0",
-    "reactify": "~0.13.1",
-    "browserify": "~3.44.2"
-  },
-  "scripts": {
-    "build": "browserify --debug --transform reactify index.js > bundle.js"
-  }
-}
diff --git a/examples/basic-jsx-external/example.js b/examples/basic-jsx-external/example.js
deleted file mode 100644
index 70f67d70900..00000000000
--- a/examples/basic-jsx-external/example.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @jsx React.DOM
- */
-var ExampleApplication = React.createClass({
-  render: function() {
-    var elapsed = Math.round(this.props.elapsed  / 100);
-    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-    var message =
-      'React has been successfully running for ' + seconds + ' seconds.';
-
-    return <p>{message}</p>;
-  }
-});
-
-var start = new Date().getTime();
-
-setInterval(function() {
-  React.renderComponent(
-    <ExampleApplication elapsed={new Date().getTime() - start} />,
-    document.getElementById('container')
-  );
-}, 50);
diff --git a/examples/basic-jsx-external/index.html b/examples/basic-jsx-external/index.html
deleted file mode 100644
index fd9232404e3..00000000000
--- a/examples/basic-jsx-external/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic Example with External JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-
-  <body>
-    <h1>Basic Example with External JSX</h1>
-    <div id="container">
-      <p>
-        If you can see this, React is not working right. This is probably because you&apos;re viewing
-        this on your file system instead of a web server. Try running
-        <pre>
-          python -m SimpleHTTPServer
-        </pre>
-        and going to <a href="http://localhost:8000/">http://localhost:8000/</a>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a separate file and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/JSXTransformer.js"></script>
-    <script type="text/jsx" src="example.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-jsx-harmony/index.html b/examples/basic-jsx-harmony/index.html
deleted file mode 100644
index a9976430982..00000000000
--- a/examples/basic-jsx-harmony/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic Example with JSX with Harmony</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with JSX with Harmony</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="http://www.github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is not working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX with Harmony (ES6) syntax and transformed in the browser.<p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/JSXTransformer.js"></script>
-    <script type="text/jsx;harmony=true">
-      /**
-       * @jsx React.DOM
-       */
-      var ExampleApplication = React.createClass({
-        render() {
-          var elapsed = Math.round(this.props.elapsed  / 100);
-          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-          var message =
-            `React has been successfully running for ${seconds} seconds.`;
-
-          return <p>{message}</p>;
-        }
-      });
-      var start = new Date().getTime();
-      setInterval(() => {
-        React.renderComponent(
-          <ExampleApplication elapsed={new Date().getTime() - start} />,
-          document.getElementById('container')
-        );
-      }, 50);
-    </script>
-  </body>
-</html>
diff --git a/examples/basic-jsx-precompile/example.js b/examples/basic-jsx-precompile/example.js
deleted file mode 100644
index 70f67d70900..00000000000
--- a/examples/basic-jsx-precompile/example.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @jsx React.DOM
- */
-var ExampleApplication = React.createClass({
-  render: function() {
-    var elapsed = Math.round(this.props.elapsed  / 100);
-    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-    var message =
-      'React has been successfully running for ' + seconds + ' seconds.';
-
-    return <p>{message}</p>;
-  }
-});
-
-var start = new Date().getTime();
-
-setInterval(function() {
-  React.renderComponent(
-    <ExampleApplication elapsed={new Date().getTime() - start} />,
-    document.getElementById('container')
-  );
-}, 50);
diff --git a/examples/basic-jsx-precompile/index.html b/examples/basic-jsx-precompile/index.html
deleted file mode 100644
index 6d616a527c4..00000000000
--- a/examples/basic-jsx-precompile/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic Example with Precompiled JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with Precompiled JSX</h1>
-    <div id="container">
-      <p>
-        If you can see this, React is not running. Try running:
-      </p>
-      <pre>npm install -g react-tools
-cd examples/basic-jsx-precompile/
-jsx . build/</pre>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
-    <pre>npm install -g react-tools
-cd examples/basic-jsx-precompile/
-jsx . build/</pre>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react.js"></script>
-    <script src="build/example.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-jsx/index.html b/examples/basic-jsx/index.html
deleted file mode 100644
index c75ba937487..00000000000
--- a/examples/basic-jsx/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic Example with JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with JSX</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="http://www.github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is not working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX and transformed in the browser.<p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/JSXTransformer.js"></script>
-    <script type="text/jsx">
-      /**
-       * @jsx React.DOM
-       */
-      var ExampleApplication = React.createClass({
-        render: function() {
-          var elapsed = Math.round(this.props.elapsed  / 100);
-          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-          var message =
-            'React has been successfully running for ' + seconds + ' seconds.';
-
-          return <p>{message}</p>;
-        }
-      });
-      var start = new Date().getTime();
-      setInterval(function() {
-        React.renderComponent(
-          <ExampleApplication elapsed={new Date().getTime() - start} />,
-          document.getElementById('container')
-        );
-      }, 50);
-    </script>
-  </body>
-</html>
diff --git a/examples/basic/index.html b/examples/basic/index.html
deleted file mode 100644
index 7839ca308ae..00000000000
--- a/examples/basic/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic Example</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="http://www.github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is not working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written in vanilla JavaScript (without JSX) and transformed in the browser.<p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react.js"></script>
-    <script>
-      var ExampleApplication = React.createClass({
-        render: function() {
-          var elapsed = Math.round(this.props.elapsed  / 100);
-          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-          var message =
-            'React has been successfully running for ' + seconds + ' seconds.';
-
-          return React.DOM.p(null, message);
-        }
-      });
-      var start = new Date().getTime();
-      setInterval(function() {
-        React.renderComponent(
-          ExampleApplication({elapsed: new Date().getTime() - start}),
-          document.getElementById('container')
-        );
-      }, 50);
-    </script>
-  </body>
-</html>
diff --git a/examples/jquery-bootstrap/css/example.css b/examples/jquery-bootstrap/css/example.css
deleted file mode 100644
index d40f2fbd057..00000000000
--- a/examples/jquery-bootstrap/css/example.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.example {
-  margin: 20px;
-}
\ No newline at end of file
diff --git a/examples/jquery-bootstrap/index.html b/examples/jquery-bootstrap/index.html
deleted file mode 100644
index d18040e0a38..00000000000
--- a/examples/jquery-bootstrap/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<title>jQuery Integration</title>
-  <link rel="stylesheet" href="thirdparty/bootstrap.min.css" type="text/css" />
-  <link rel="stylesheet" href="css/example.css" type="text/css" />
-</head>
-<body>
-    <div id="jqueryexample"></div>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/JSXTransformer.js"></script>
-    <script type="text/javascript" src="../shared/thirdparty/jquery.min.js" charset="utf-8"></script>
-    <script type="text/javascript" src="thirdparty/bootstrap.min.js" charset="utf-8"></script>
-    <script type="text/jsx" src="js/app.js"></script>
-</body>
-</html>
diff --git a/examples/jquery-bootstrap/js/app.js b/examples/jquery-bootstrap/js/app.js
deleted file mode 100644
index b522605705e..00000000000
--- a/examples/jquery-bootstrap/js/app.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/** @jsx React.DOM */
-
-// Simple pure-React component so we don't have to remember
-// Bootstrap's classes
-var BootstrapButton = React.createClass({
-  render: function() {
-    // transferPropsTo() is smart enough to merge classes provided
-    // to this component.
-    return this.transferPropsTo(
-      <a href="javascript:;" role="button" className="btn">
-        {this.props.children}
-      </a>
-    );
-  }
-});
-
-var BootstrapModal = React.createClass({
-  // The following two methods are the only places we need to
-  // integrate with Bootstrap or jQuery!
-  componentDidMount: function() {
-    // When the component is added, turn it into a modal
-    $(this.getDOMNode())
-      .modal({backdrop: 'static', keyboard: false, show: false})
-  },
-  componentWillUnmount: function() {
-    $(this.getDOMNode()).off('hidden', this.handleHidden);
-  },
-  close: function() {
-    $(this.getDOMNode()).modal('hide');
-  },
-  open: function() {
-    $(this.getDOMNode()).modal('show');
-  },
-  render: function() {
-    var confirmButton = null;
-    var cancelButton = null;
-
-    if (this.props.confirm) {
-      confirmButton = (
-        <BootstrapButton
-          onClick={this.handleConfirm}
-          className="btn-primary">
-          {this.props.confirm}
-        </BootstrapButton>
-      );
-    }
-    if (this.props.cancel) {
-      cancelButton = (
-        <BootstrapButton onClick={this.handleCancel}>
-          {this.props.cancel}
-        </BootstrapButton>
-      );
-    }
-
-    return (
-      <div className="modal hide fade">
-        <div className="modal-header">
-          <button
-            type="button"
-            className="close"
-            onClick={this.handleCancel}
-            dangerouslySetInnerHTML={{__html: '&times'}}
-          />
-          <h3>{this.props.title}</h3>
-        </div>
-        <div className="modal-body">
-          {this.props.children}
-        </div>
-        <div className="modal-footer">
-          {cancelButton}
-          {confirmButton}
-        </div>
-      </div>
-    );
-  },
-  handleCancel: function() {
-    if (this.props.onCancel) {
-      this.props.onCancel();
-    }
-  },
-  handleConfirm: function() {
-    if (this.props.onConfirm) {
-      this.props.onConfirm();
-    }
-  }
-});
-
-var Example = React.createClass({
-  handleCancel: function() {
-    if (confirm('Are you sure you want to cancel?')) {
-      this.refs.modal.close();
-    }
-  },
-  render: function() {
-    var modal = null;
-    modal = (
-      <BootstrapModal
-        ref="modal"
-        confirm="OK"
-        cancel="Cancel"
-        onCancel={this.handleCancel}
-        onConfirm={this.closeModal}
-        title="Hello, Bootstrap!">
-          This is a React component powered by jQuery and Bootstrap!
-      </BootstrapModal>
-    );
-    return (
-      <div className="example">
-        {modal}
-        <BootstrapButton onClick={this.openModal}>Open modal</BootstrapButton>
-      </div>
-    );
-  },
-  openModal: function() {
-    this.refs.modal.open();
-  },
-  closeModal: function() {
-    this.refs.modal.close();
-  }
-});
-
-React.renderComponent(<Example />, document.getElementById('jqueryexample'));
diff --git a/examples/jquery-bootstrap/thirdparty/bootstrap.min.css b/examples/jquery-bootstrap/thirdparty/bootstrap.min.css
deleted file mode 100644
index c10c7f417f5..00000000000
--- a/examples/jquery-bootstrap/thirdparty/bootstrap.min.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/*!
- * Bootstrap v2.3.1
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img,.google-maps img{max-width:none}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}@media print{*{color:#000!important;text-shadow:none!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;color:#333;background-color:#fff}a{color:#08c;text-decoration:none}a:hover,a:focus{color:#005580;text-decoration:underline}.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.img-polaroid{padding:4px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1)}.img-circle{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px}.span12{width:940px}.span11{width:860px}.span10{width:780px}.span9{width:700px}.span8{width:620px}.span7{width:540px}.span6{width:460px}.span5{width:380px}.span4{width:300px}.span3{width:220px}.span2{width:140px}.span1{width:60px}.offset12{margin-left:980px}.offset11{margin-left:900px}.offset10{margin-left:820px}.offset9{margin-left:740px}.offset8{margin-left:660px}.offset7{margin-left:580px}.offset6{margin-left:500px}.offset5{margin-left:420px}.offset4{margin-left:340px}.offset3{margin-left:260px}.offset2{margin-left:180px}.offset1{margin-left:100px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.127659574468085%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.48936170212765%;*width:91.43617021276594%}.row-fluid .span10{width:82.97872340425532%;*width:82.92553191489361%}.row-fluid .span9{width:74.46808510638297%;*width:74.41489361702126%}.row-fluid .span8{width:65.95744680851064%;*width:65.90425531914893%}.row-fluid .span7{width:57.44680851063829%;*width:57.39361702127659%}.row-fluid .span6{width:48.93617021276595%;*width:48.88297872340425%}.row-fluid .span5{width:40.42553191489362%;*width:40.37234042553192%}.row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%}.row-fluid .span3{width:23.404255319148934%;*width:23.351063829787233%}.row-fluid .span2{width:14.893617021276595%;*width:14.840425531914894%}.row-fluid .span1{width:6.382978723404255%;*width:6.329787234042553%}.row-fluid .offset12{margin-left:104.25531914893617%;*margin-left:104.14893617021275%}.row-fluid .offset12:first-child{margin-left:102.12765957446808%;*margin-left:102.02127659574467%}.row-fluid .offset11{margin-left:95.74468085106382%;*margin-left:95.6382978723404%}.row-fluid .offset11:first-child{margin-left:93.61702127659574%;*margin-left:93.51063829787232%}.row-fluid .offset10{margin-left:87.23404255319149%;*margin-left:87.12765957446807%}.row-fluid .offset10:first-child{margin-left:85.1063829787234%;*margin-left:84.99999999999999%}.row-fluid .offset9{margin-left:78.72340425531914%;*margin-left:78.61702127659572%}.row-fluid .offset9:first-child{margin-left:76.59574468085106%;*margin-left:76.48936170212764%}.row-fluid .offset8{margin-left:70.2127659574468%;*margin-left:70.10638297872339%}.row-fluid .offset8:first-child{margin-left:68.08510638297872%;*margin-left:67.9787234042553%}.row-fluid .offset7{margin-left:61.70212765957446%;*margin-left:61.59574468085106%}.row-fluid .offset7:first-child{margin-left:59.574468085106375%;*margin-left:59.46808510638297%}.row-fluid .offset6{margin-left:53.191489361702125%;*margin-left:53.085106382978715%}.row-fluid .offset6:first-child{margin-left:51.063829787234035%;*margin-left:50.95744680851063%}.row-fluid .offset5{margin-left:44.68085106382979%;*margin-left:44.57446808510638%}.row-fluid .offset5:first-child{margin-left:42.5531914893617%;*margin-left:42.4468085106383%}.row-fluid .offset4{margin-left:36.170212765957444%;*margin-left:36.06382978723405%}.row-fluid .offset4:first-child{margin-left:34.04255319148936%;*margin-left:33.93617021276596%}.row-fluid .offset3{margin-left:27.659574468085104%;*margin-left:27.5531914893617%}.row-fluid .offset3:first-child{margin-left:25.53191489361702%;*margin-left:25.425531914893618%}.row-fluid .offset2{margin-left:19.148936170212764%;*margin-left:19.04255319148936%}.row-fluid .offset2:first-child{margin-left:17.02127659574468%;*margin-left:16.914893617021278%}.row-fluid .offset1{margin-left:10.638297872340425%;*margin-left:10.53191489361702%}.row-fluid .offset1:first-child{margin-left:8.51063829787234%;*margin-left:8.404255319148938%}[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}[class*="span"].pull-right,.row-fluid [class*="span"].pull-right{float:right}.container{margin-right:auto;margin-left:auto;*zoom:1}.container:before,.container:after{display:table;line-height:0;content:""}.container:after{clear:both}.container-fluid{padding-right:20px;padding-left:20px;*zoom:1}.container-fluid:before,.container-fluid:after{display:table;line-height:0;content:""}.container-fluid:after{clear:both}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px}small{font-size:85%}strong{font-weight:bold}em{font-style:italic}cite{font-style:normal}.muted{color:#999}a.muted:hover,a.muted:focus{color:#808080}.text-warning{color:#c09853}a.text-warning:hover,a.text-warning:focus{color:#a47e3c}.text-error{color:#b94a48}a.text-error:hover,a.text-error:focus{color:#953b39}.text-info{color:#3a87ad}a.text-info:hover,a.text-info:focus{color:#2d6987}.text-success{color:#468847}a.text-success:hover,a.text-success:focus{color:#356635}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;line-height:1;color:#999}h1,h2,h3{line-height:40px}h1{font-size:38.5px}h2{font-size:31.5px}h3{font-size:24.5px}h4{font-size:17.5px}h5{font-size:14px}h6{font-size:11.9px}h1 small{font-size:24.5px}h2 small{font-size:17.5px}h3 small{font-size:14px}h4 small{font-size:14px}.page-header{padding-bottom:9px;margin:20px 0 30px;border-bottom:1px solid #eee}ul,ol{padding:0;margin:0 0 10px 25px}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}ul.unstyled,ol.unstyled{margin-left:0;list-style:none}ul.inline,ol.inline{margin-left:0;list-style:none}ul.inline>li,ol.inline>li{display:inline-block;*display:inline;padding-right:5px;padding-left:5px;*zoom:1}dl{margin-bottom:20px}dt,dd{line-height:20px}dt{font-weight:bold}dd{margin-left:10px}.dl-horizontal{*zoom:1}.dl-horizontal:before,.dl-horizontal:after{display:table;line-height:0;content:""}.dl-horizontal:after{clear:both}.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}hr{margin:20px 0;border:0;border-top:1px solid #eee;border-bottom:1px solid #fff}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}abbr.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}blockquote small{display:block;line-height:20px;color:#999}blockquote small:before{content:'\2014 \00A0'}blockquote.pull-right{float:right;padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}blockquote.pull-right p,blockquote.pull-right small{text-align:right}blockquote.pull-right small:before{content:''}blockquote.pull-right small:after{content:'\00A0 \2014'}q:before,q:after,blockquote:before,blockquote:after{content:""}address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}code,pre{padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:12px;color:#333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}code{padding:2px 4px;color:#d14;white-space:nowrap;background-color:#f7f7f9;border:1px solid #e1e1e8}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}pre.prettyprint{margin-bottom:20px}pre code{padding:0;color:inherit;white-space:pre;white-space:pre-wrap;background-color:transparent;border:0}.pre-scrollable{max-height:340px;overflow-y:scroll}form{margin:0 0 20px}fieldset{padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #e5e5e5}legend small{font-size:15px;color:#999}label,input,button,select,textarea{font-size:14px;font-weight:normal;line-height:20px}input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}label{display:block;margin-bottom:5px}select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,.uneditable-input{width:206px}textarea{height:auto}textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82,168,236,0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;*margin-top:0;line-height:normal}input[type="file"],input[type="image"],input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto}select,input[type="file"]{height:30px;*margin-top:4px;line-height:30px}select{width:220px;background-color:#fff;border:1px solid #ccc}select[multiple],select[size]{height:auto}select:focus,input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.uneditable-input,.uneditable-textarea{color:#999;cursor:not-allowed;background-color:#fcfcfc;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);box-shadow:inset 0 1px 2px rgba(0,0,0,0.025)}.uneditable-input{overflow:hidden;white-space:nowrap}.uneditable-textarea{width:auto;height:auto}input:-moz-placeholder,textarea:-moz-placeholder{color:#999}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#999}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999}.radio,.checkbox{min-height:20px;padding-left:20px}.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-20px}.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:5px}.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle}.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px}.input-mini{width:60px}.input-small{width:90px}.input-medium{width:150px}.input-large{width:210px}.input-xlarge{width:270px}.input-xxlarge{width:530px}input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"]{float:none;margin-left:0}.input-append input[class*="span"],.input-append .uneditable-input[class*="span"],.input-prepend input[class*="span"],.input-prepend .uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"],.row-fluid .input-prepend [class*="span"],.row-fluid .input-append [class*="span"]{display:inline-block}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:926px}input.span11,textarea.span11,.uneditable-input.span11{width:846px}input.span10,textarea.span10,.uneditable-input.span10{width:766px}input.span9,textarea.span9,.uneditable-input.span9{width:686px}input.span8,textarea.span8,.uneditable-input.span8{width:606px}input.span7,textarea.span7,.uneditable-input.span7{width:526px}input.span6,textarea.span6,.uneditable-input.span6{width:446px}input.span5,textarea.span5,.uneditable-input.span5{width:366px}input.span4,textarea.span4,.uneditable-input.span4{width:286px}input.span3,textarea.span3,.uneditable-input.span3{width:206px}input.span2,textarea.span2,.uneditable-input.span2{width:126px}input.span1,textarea.span1,.uneditable-input.span1{width:46px}.controls-row{*zoom:1}.controls-row:before,.controls-row:after{display:table;line-height:0;content:""}.controls-row:after{clear:both}.controls-row [class*="span"],.row-fluid .controls-row [class*="span"]{float:left}.controls-row .checkbox[class*="span"],.controls-row .radio[class*="span"]{padding-top:5px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background-color:#eee}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly]{background-color:transparent}.control-group.warning .control-label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853}.control-group.warning .checkbox,.control-group.warning .radio,.control-group.warning input,.control-group.warning select,.control-group.warning textarea{color:#c09853}.control-group.warning input,.control-group.warning select,.control-group.warning textarea{border-color:#c09853;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus{border-color:#a47e3c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e}.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853}.control-group.error .control-label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48}.control-group.error .checkbox,.control-group.error .radio,.control-group.error input,.control-group.error select,.control-group.error textarea{color:#b94a48}.control-group.error input,.control-group.error select,.control-group.error textarea{border-color:#b94a48;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus{border-color:#953b39;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392}.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48}.control-group.success .control-label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847}.control-group.success .checkbox,.control-group.success .radio,.control-group.success input,.control-group.success select,.control-group.success textarea{color:#468847}.control-group.success input,.control-group.success select,.control-group.success textarea{border-color:#468847;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus{border-color:#356635;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b}.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847}.control-group.info .control-label,.control-group.info .help-block,.control-group.info .help-inline{color:#3a87ad}.control-group.info .checkbox,.control-group.info .radio,.control-group.info input,.control-group.info select,.control-group.info textarea{color:#3a87ad}.control-group.info input,.control-group.info select,.control-group.info textarea{border-color:#3a87ad;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.info input:focus,.control-group.info select:focus,.control-group.info textarea:focus{border-color:#2d6987;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7ab5d3;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7ab5d3;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7ab5d3}.control-group.info .input-prepend .add-on,.control-group.info .input-append .add-on{color:#3a87ad;background-color:#d9edf7;border-color:#3a87ad}input:focus:invalid,textarea:focus:invalid,select:focus:invalid{color:#b94a48;border-color:#ee5f5b}input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7}.form-actions{padding:19px 20px 20px;margin-top:20px;margin-bottom:20px;background-color:#f5f5f5;border-top:1px solid #e5e5e5;*zoom:1}.form-actions:before,.form-actions:after{display:table;line-height:0;content:""}.form-actions:after{clear:both}.help-block,.help-inline{color:#595959}.help-block{display:block;margin-bottom:10px}.help-inline{display:inline-block;*display:inline;padding-left:5px;vertical-align:middle;*zoom:1}.input-append,.input-prepend{display:inline-block;margin-bottom:10px;font-size:0;white-space:nowrap;vertical-align:middle}.input-append input,.input-prepend input,.input-append select,.input-prepend select,.input-append .uneditable-input,.input-prepend .uneditable-input,.input-append .dropdown-menu,.input-prepend .dropdown-menu,.input-append .popover,.input-prepend .popover{font-size:14px}.input-append input,.input-prepend input,.input-append select,.input-prepend select,.input-append .uneditable-input,.input-prepend .uneditable-input{position:relative;margin-bottom:0;*margin-left:0;vertical-align:top;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-append input:focus,.input-prepend input:focus,.input-append select:focus,.input-prepend select:focus,.input-append .uneditable-input:focus,.input-prepend .uneditable-input:focus{z-index:2}.input-append .add-on,.input-prepend .add-on{display:inline-block;width:auto;height:20px;min-width:16px;padding:4px 5px;font-size:14px;font-weight:normal;line-height:20px;text-align:center;text-shadow:0 1px 0 #fff;background-color:#eee;border:1px solid #ccc}.input-append .add-on,.input-prepend .add-on,.input-append .btn,.input-prepend .btn,.input-append .btn-group>.dropdown-toggle,.input-prepend .btn-group>.dropdown-toggle{vertical-align:top;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.input-append .active,.input-prepend .active{background-color:#a9dba9;border-color:#46a546}.input-prepend .add-on,.input-prepend .btn{margin-right:-1px}.input-prepend .add-on:first-child,.input-prepend .btn:first-child{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.input-append input,.input-append select,.input-append .uneditable-input{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.input-append input+.btn-group .btn:last-child,.input-append select+.btn-group .btn:last-child,.input-append .uneditable-input+.btn-group .btn:last-child{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-append .add-on,.input-append .btn,.input-append .btn-group{margin-left:-1px}.input-append .add-on:last-child,.input-append .btn:last-child,.input-append .btn-group:last-child>.dropdown-toggle{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-prepend.input-append input,.input-prepend.input-append select,.input-prepend.input-append .uneditable-input{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.input-prepend.input-append input+.btn-group .btn,.input-prepend.input-append select+.btn-group .btn,.input-prepend.input-append .uneditable-input+.btn-group .btn{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-prepend.input-append .add-on:first-child,.input-prepend.input-append .btn:first-child{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.input-prepend.input-append .add-on:last-child,.input-prepend.input-append .btn:last-child{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-prepend.input-append .btn-group:first-child{margin-left:0}input.search-query{padding-right:14px;padding-right:4px \9;padding-left:14px;padding-left:4px \9;margin-bottom:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}.form-search .input-append .search-query,.form-search .input-prepend .search-query{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.form-search .input-append .search-query{-webkit-border-radius:14px 0 0 14px;-moz-border-radius:14px 0 0 14px;border-radius:14px 0 0 14px}.form-search .input-append .btn{-webkit-border-radius:0 14px 14px 0;-moz-border-radius:0 14px 14px 0;border-radius:0 14px 14px 0}.form-search .input-prepend .search-query{-webkit-border-radius:0 14px 14px 0;-moz-border-radius:0 14px 14px 0;border-radius:0 14px 14px 0}.form-search .input-prepend .btn{-webkit-border-radius:14px 0 0 14px;-moz-border-radius:14px 0 0 14px;border-radius:14px 0 0 14px}.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .help-inline,.form-inline .help-inline,.form-horizontal .help-inline,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input,.form-search .input-prepend,.form-inline .input-prepend,.form-horizontal .input-prepend,.form-search .input-append,.form-inline .input-append,.form-horizontal .input-append{display:inline-block;*display:inline;margin-bottom:0;vertical-align:middle;*zoom:1}.form-search .hide,.form-inline .hide,.form-horizontal .hide{display:none}.form-search label,.form-inline label,.form-search .btn-group,.form-inline .btn-group{display:inline-block}.form-search .input-append,.form-inline .input-append,.form-search .input-prepend,.form-inline .input-prepend{margin-bottom:0}.form-search .radio,.form-search .checkbox,.form-inline .radio,.form-inline .checkbox{padding-left:0;margin-bottom:0;vertical-align:middle}.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"],.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{float:left;margin-right:3px;margin-left:0}.control-group{margin-bottom:10px}legend+.control-group{margin-top:20px;-webkit-margin-top-collapse:separate}.form-horizontal .control-group{margin-bottom:20px;*zoom:1}.form-horizontal .control-group:before,.form-horizontal .control-group:after{display:table;line-height:0;content:""}.form-horizontal .control-group:after{clear:both}.form-horizontal .control-label{float:left;width:160px;padding-top:5px;text-align:right}.form-horizontal .controls{*display:inline-block;*padding-left:20px;margin-left:180px;*margin-left:0}.form-horizontal .controls:first-child{*padding-left:180px}.form-horizontal .help-block{margin-bottom:0}.form-horizontal input+.help-block,.form-horizontal select+.help-block,.form-horizontal textarea+.help-block,.form-horizontal .uneditable-input+.help-block,.form-horizontal .input-prepend+.help-block,.form-horizontal .input-append+.help-block{margin-top:10px}.form-horizontal .form-actions{padding-left:180px}table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0}.table{width:100%;margin-bottom:20px}.table th,.table td{padding:8px;line-height:20px;text-align:left;vertical-align:top;border-top:1px solid #ddd}.table th{font-weight:bold}.table thead th{vertical-align:bottom}.table caption+thead tr:first-child th,.table caption+thead tr:first-child td,.table colgroup+thead tr:first-child th,.table colgroup+thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td{border-top:0}.table tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed th,.table-condensed td{padding:4px 5px}.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.table-bordered th,.table-bordered td{border-left:1px solid #ddd}.table-bordered caption+thead tr:first-child th,.table-bordered caption+tbody tr:first-child th,.table-bordered caption+tbody tr:first-child td,.table-bordered colgroup+thead tr:first-child th,.table-bordered colgroup+tbody tr:first-child th,.table-bordered colgroup+tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0}.table-bordered thead:first-child tr:first-child>th:first-child,.table-bordered tbody:first-child tr:first-child>td:first-child,.table-bordered tbody:first-child tr:first-child>th:first-child{-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topleft:4px}.table-bordered thead:first-child tr:first-child>th:last-child,.table-bordered tbody:first-child tr:first-child>td:last-child,.table-bordered tbody:first-child tr:first-child>th:last-child{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-topright:4px}.table-bordered thead:last-child tr:last-child>th:first-child,.table-bordered tbody:last-child tr:last-child>td:first-child,.table-bordered tbody:last-child tr:last-child>th:first-child,.table-bordered tfoot:last-child tr:last-child>td:first-child,.table-bordered tfoot:last-child tr:last-child>th:first-child{-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px}.table-bordered thead:last-child tr:last-child>th:last-child,.table-bordered tbody:last-child tr:last-child>td:last-child,.table-bordered tbody:last-child tr:last-child>th:last-child,.table-bordered tfoot:last-child tr:last-child>td:last-child,.table-bordered tfoot:last-child tr:last-child>th:last-child{-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px}.table-bordered tfoot+tbody:last-child tr:last-child td:first-child{-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomleft:0}.table-bordered tfoot+tbody:last-child tr:last-child td:last-child{-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0;-moz-border-radius-bottomright:0}.table-bordered caption+thead tr:first-child th:first-child,.table-bordered caption+tbody tr:first-child td:first-child,.table-bordered colgroup+thead tr:first-child th:first-child,.table-bordered colgroup+tbody tr:first-child td:first-child{-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topleft:4px}.table-bordered caption+thead tr:first-child th:last-child,.table-bordered caption+tbody tr:first-child td:last-child,.table-bordered colgroup+thead tr:first-child th:last-child,.table-bordered colgroup+tbody tr:first-child td:last-child{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-topright:4px}.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#f5f5f5}table td[class*="span"],table th[class*="span"],.row-fluid table td[class*="span"],.row-fluid table th[class*="span"]{display:table-cell;float:none;margin-left:0}.table td.span1,.table th.span1{float:none;width:44px;margin-left:0}.table td.span2,.table th.span2{float:none;width:124px;margin-left:0}.table td.span3,.table th.span3{float:none;width:204px;margin-left:0}.table td.span4,.table th.span4{float:none;width:284px;margin-left:0}.table td.span5,.table th.span5{float:none;width:364px;margin-left:0}.table td.span6,.table th.span6{float:none;width:444px;margin-left:0}.table td.span7,.table th.span7{float:none;width:524px;margin-left:0}.table td.span8,.table th.span8{float:none;width:604px;margin-left:0}.table td.span9,.table th.span9{float:none;width:684px;margin-left:0}.table td.span10,.table th.span10{float:none;width:764px;margin-left:0}.table td.span11,.table th.span11{float:none;width:844px;margin-left:0}.table td.span12,.table th.span12{float:none;width:924px;margin-left:0}.table tbody tr.success>td{background-color:#dff0d8}.table tbody tr.error>td{background-color:#f2dede}.table tbody tr.warning>td{background-color:#fcf8e3}.table tbody tr.info>td{background-color:#d9edf7}.table-hover tbody tr.success:hover>td{background-color:#d0e9c6}.table-hover tbody tr.error:hover>td{background-color:#ebcccc}.table-hover tbody tr.warning:hover>td{background-color:#faf2cc}.table-hover tbody tr.info:hover>td{background-color:#c4e3f3}[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;margin-top:1px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:focus>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>li>a:focus>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:focus>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"],.dropdown-submenu:focus>a>[class*=" icon-"]{background-image:url("../img/glyphicons-halflings-white.png")}.icon-glass{background-position:0 0}.icon-music{background-position:-24px 0}.icon-search{background-position:-48px 0}.icon-envelope{background-position:-72px 0}.icon-heart{background-position:-96px 0}.icon-star{background-position:-120px 0}.icon-star-empty{background-position:-144px 0}.icon-user{background-position:-168px 0}.icon-film{background-position:-192px 0}.icon-th-large{background-position:-216px 0}.icon-th{background-position:-240px 0}.icon-th-list{background-position:-264px 0}.icon-ok{background-position:-288px 0}.icon-remove{background-position:-312px 0}.icon-zoom-in{background-position:-336px 0}.icon-zoom-out{background-position:-360px 0}.icon-off{background-position:-384px 0}.icon-signal{background-position:-408px 0}.icon-cog{background-position:-432px 0}.icon-trash{background-position:-456px 0}.icon-home{background-position:0 -24px}.icon-file{background-position:-24px -24px}.icon-time{background-position:-48px -24px}.icon-road{background-position:-72px -24px}.icon-download-alt{background-position:-96px -24px}.icon-download{background-position:-120px -24px}.icon-upload{background-position:-144px -24px}.icon-inbox{background-position:-168px -24px}.icon-play-circle{background-position:-192px -24px}.icon-repeat{background-position:-216px -24px}.icon-refresh{background-position:-240px -24px}.icon-list-alt{background-position:-264px -24px}.icon-lock{background-position:-287px -24px}.icon-flag{background-position:-312px -24px}.icon-headphones{background-position:-336px -24px}.icon-volume-off{background-position:-360px -24px}.icon-volume-down{background-position:-384px -24px}.icon-volume-up{background-position:-408px -24px}.icon-qrcode{background-position:-432px -24px}.icon-barcode{background-position:-456px -24px}.icon-tag{background-position:0 -48px}.icon-tags{background-position:-25px -48px}.icon-book{background-position:-48px -48px}.icon-bookmark{background-position:-72px -48px}.icon-print{background-position:-96px -48px}.icon-camera{background-position:-120px -48px}.icon-font{background-position:-144px -48px}.icon-bold{background-position:-167px -48px}.icon-italic{background-position:-192px -48px}.icon-text-height{background-position:-216px -48px}.icon-text-width{background-position:-240px -48px}.icon-align-left{background-position:-264px -48px}.icon-align-center{background-position:-288px -48px}.icon-align-right{background-position:-312px -48px}.icon-align-justify{background-position:-336px -48px}.icon-list{background-position:-360px -48px}.icon-indent-left{background-position:-384px -48px}.icon-indent-right{background-position:-408px -48px}.icon-facetime-video{background-position:-432px -48px}.icon-picture{background-position:-456px -48px}.icon-pencil{background-position:0 -72px}.icon-map-marker{background-position:-24px -72px}.icon-adjust{background-position:-48px -72px}.icon-tint{background-position:-72px -72px}.icon-edit{background-position:-96px -72px}.icon-share{background-position:-120px -72px}.icon-check{background-position:-144px -72px}.icon-move{background-position:-168px -72px}.icon-step-backward{background-position:-192px -72px}.icon-fast-backward{background-position:-216px -72px}.icon-backward{background-position:-240px -72px}.icon-play{background-position:-264px -72px}.icon-pause{background-position:-288px -72px}.icon-stop{background-position:-312px -72px}.icon-forward{background-position:-336px -72px}.icon-fast-forward{background-position:-360px -72px}.icon-step-forward{background-position:-384px -72px}.icon-eject{background-position:-408px -72px}.icon-chevron-left{background-position:-432px -72px}.icon-chevron-right{background-position:-456px -72px}.icon-plus-sign{background-position:0 -96px}.icon-minus-sign{background-position:-24px -96px}.icon-remove-sign{background-position:-48px -96px}.icon-ok-sign{background-position:-72px -96px}.icon-question-sign{background-position:-96px -96px}.icon-info-sign{background-position:-120px -96px}.icon-screenshot{background-position:-144px -96px}.icon-remove-circle{background-position:-168px -96px}.icon-ok-circle{background-position:-192px -96px}.icon-ban-circle{background-position:-216px -96px}.icon-arrow-left{background-position:-240px -96px}.icon-arrow-right{background-position:-264px -96px}.icon-arrow-up{background-position:-289px -96px}.icon-arrow-down{background-position:-312px -96px}.icon-share-alt{background-position:-336px -96px}.icon-resize-full{background-position:-360px -96px}.icon-resize-small{background-position:-384px -96px}.icon-plus{background-position:-408px -96px}.icon-minus{background-position:-433px -96px}.icon-asterisk{background-position:-456px -96px}.icon-exclamation-sign{background-position:0 -120px}.icon-gift{background-position:-24px -120px}.icon-leaf{background-position:-48px -120px}.icon-fire{background-position:-72px -120px}.icon-eye-open{background-position:-96px -120px}.icon-eye-close{background-position:-120px -120px}.icon-warning-sign{background-position:-144px -120px}.icon-plane{background-position:-168px -120px}.icon-calendar{background-position:-192px -120px}.icon-random{width:16px;background-position:-216px -120px}.icon-comment{background-position:-240px -120px}.icon-magnet{background-position:-264px -120px}.icon-chevron-up{background-position:-288px -120px}.icon-chevron-down{background-position:-313px -119px}.icon-retweet{background-position:-336px -120px}.icon-shopping-cart{background-position:-360px -120px}.icon-folder-close{width:16px;background-position:-384px -120px}.icon-folder-open{width:16px;background-position:-408px -120px}.icon-resize-vertical{background-position:-432px -119px}.icon-resize-horizontal{background-position:-456px -118px}.icon-hdd{background-position:0 -144px}.icon-bullhorn{background-position:-24px -144px}.icon-bell{background-position:-48px -144px}.icon-certificate{background-position:-72px -144px}.icon-thumbs-up{background-position:-96px -144px}.icon-thumbs-down{background-position:-120px -144px}.icon-hand-right{background-position:-144px -144px}.icon-hand-left{background-position:-168px -144px}.icon-hand-up{background-position:-192px -144px}.icon-hand-down{background-position:-216px -144px}.icon-circle-arrow-right{background-position:-240px -144px}.icon-circle-arrow-left{background-position:-264px -144px}.icon-circle-arrow-up{background-position:-288px -144px}.icon-circle-arrow-down{background-position:-312px -144px}.icon-globe{background-position:-336px -144px}.icon-wrench{background-position:-360px -144px}.icon-tasks{background-position:-384px -144px}.icon-filter{background-position:-408px -144px}.icon-briefcase{background-position:-432px -144px}.icon-fullscreen{background-position:-456px -144px}.dropup,.dropdown{position:relative}.dropdown-toggle{*margin-bottom:-3px}.dropdown-toggle:active,.open .dropdown-toggle{outline:0}.caret{display:inline-block;width:0;height:0;vertical-align:top;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;content:""}.dropdown .caret{margin-top:8px;margin-left:2px}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:20px;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;outline:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:default;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open{*z-index:1000}.open>.dropdown-menu{display:block}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px solid #000;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:1px}.dropdown-submenu{position:relative}.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px}.dropdown-submenu:hover>.dropdown-menu{display:block}.dropup .dropdown-submenu>.dropdown-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-2px;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0}.dropdown-submenu>a:after{display:block;float:right;width:0;height:0;margin-top:5px;margin-right:-10px;border-color:transparent;border-left-color:#ccc;border-style:solid;border-width:5px 0 5px 5px;content:" "}.dropdown-submenu:hover>a:after{border-left-color:#fff}.dropdown-submenu.pull-left{float:none}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}.dropdown .dropdown-menu .nav-header{padding-right:20px;padding-left:20px}.typeahead{z-index:1051;margin-top:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-large{padding:24px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.well-small{padding:9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.fade{opacity:0;-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-moz-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}.collapse.in{height:auto}.close{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.4;filter:alpha(opacity=40)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.btn{display:inline-block;*display:inline;padding:4px 12px;margin-bottom:0;*margin-left:.3em;font-size:14px;line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;*background-color:#e6e6e6;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;border:1px solid #ccc;*border:0;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);*zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333;background-color:#e6e6e6;*background-color:#d9d9d9}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover,.btn:focus{color:#333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-large{padding:11px 19px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.btn-large [class^="icon-"],.btn-large [class*=" icon-"]{margin-top:4px}.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.btn-small [class^="icon-"],.btn-small [class*=" icon-"]{margin-top:0}.btn-mini [class^="icon-"],.btn-mini [class*=" icon-"]{margin-top:-1px}.btn-mini{padding:0 6px;font-size:10.5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.btn-block{display:block;width:100%;padding-right:0;padding-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255,255,255,0.75)}.btn-primary{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#006dcc;*background-color:#04c;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.btn-primary:active,.btn-primary.active{background-color:#039 \9}.btn-warning{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;*background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#fff;background-color:#f89406;*background-color:#df8505}.btn-warning:active,.btn-warning.active{background-color:#c67605 \9}.btn-danger{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#da4f49;*background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);background-repeat:repeat-x;border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffbd362f',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#fff;background-color:#bd362f;*background-color:#a9302a}.btn-danger:active,.btn-danger.active{background-color:#942a25 \9}.btn-success{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#5bb75b;*background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);background-repeat:repeat-x;border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#fff;background-color:#51a351;*background-color:#499249}.btn-success:active,.btn-success.active{background-color:#408140 \9}.btn-info{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;*background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#fff;background-color:#2f96b4;*background-color:#2a85a0}.btn-info:active,.btn-info.active{background-color:#24748c \9}.btn-inverse{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;*background-color:#222;background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:linear-gradient(to bottom,#444,#222);background-repeat:repeat-x;border-color:#222 #222 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-inverse:hover,.btn-inverse:focus,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#fff;background-color:#222;*background-color:#151515}.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9}button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0}button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px}button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px}button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px}.btn-link,.btn-link:active,.btn-link[disabled]{background-color:transparent;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-link{color:#08c;cursor:pointer;border-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-link:hover,.btn-link:focus{color:#005580;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#333;text-decoration:none}.btn-group{position:relative;display:inline-block;*display:inline;*margin-left:.3em;font-size:0;white-space:nowrap;vertical-align:middle;*zoom:1}.btn-group:first-child{*margin-left:0}.btn-group+.btn-group{margin-left:5px}.btn-toolbar{margin-top:10px;margin-bottom:10px;font-size:0}.btn-toolbar>.btn+.btn,.btn-toolbar>.btn-group+.btn,.btn-toolbar>.btn+.btn-group{margin-left:5px}.btn-group>.btn{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-group>.btn+.btn{margin-left:-1px}.btn-group>.btn,.btn-group>.dropdown-menu,.btn-group>.popover{font-size:14px}.btn-group>.btn-mini{font-size:10.5px}.btn-group>.btn-small{font-size:11.9px}.btn-group>.btn-large{font-size:17.5px}.btn-group>.btn:first-child{margin-left:0;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-topleft:4px}.btn-group>.btn:last-child,.btn-group>.dropdown-toggle{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px}.btn-group>.btn.large:first-child{margin-left:0;-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px}.btn-group>.btn.large:last-child,.btn-group>.large.dropdown-toggle{-webkit-border-top-right-radius:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-right-radius:6px;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px}.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active{z-index:2}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{*padding-top:5px;padding-right:8px;*padding-bottom:5px;padding-left:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,0.125),inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,0.125),inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 1px 0 0 rgba(255,255,255,0.125),inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.btn-group>.btn-mini+.dropdown-toggle{*padding-top:2px;padding-right:5px;*padding-bottom:2px;padding-left:5px}.btn-group>.btn-small+.dropdown-toggle{*padding-top:5px;*padding-bottom:4px}.btn-group>.btn-large+.dropdown-toggle{*padding-top:7px;padding-right:12px;*padding-bottom:7px;padding-left:12px}.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}.btn-group.open .btn.dropdown-toggle{background-color:#e6e6e6}.btn-group.open .btn-primary.dropdown-toggle{background-color:#04c}.btn-group.open .btn-warning.dropdown-toggle{background-color:#f89406}.btn-group.open .btn-danger.dropdown-toggle{background-color:#bd362f}.btn-group.open .btn-success.dropdown-toggle{background-color:#51a351}.btn-group.open .btn-info.dropdown-toggle{background-color:#2f96b4}.btn-group.open .btn-inverse.dropdown-toggle{background-color:#222}.btn .caret{margin-top:8px;margin-left:0}.btn-large .caret{margin-top:6px}.btn-large .caret{border-top-width:5px;border-right-width:5px;border-left-width:5px}.btn-mini .caret,.btn-small .caret{margin-top:8px}.dropup .btn-large .caret{border-bottom-width:5px}.btn-primary .caret,.btn-warning .caret,.btn-danger .caret,.btn-info .caret,.btn-success .caret,.btn-inverse .caret{border-top-color:#fff;border-bottom-color:#fff}.btn-group-vertical{display:inline-block;*display:inline;*zoom:1}.btn-group-vertical>.btn{display:block;float:none;max-width:100%;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-group-vertical>.btn+.btn{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:first-child{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.btn-group-vertical>.btn:last-child{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.btn-group-vertical>.btn-large:first-child{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.btn-group-vertical>.btn-large:last-child{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.alert{padding:8px 35px 8px 14px;margin-bottom:20px;text-shadow:0 1px 0 rgba(255,255,255,0.5);background-color:#fcf8e3;border:1px solid #fbeed5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.alert,.alert h4{color:#c09853}.alert h4{margin:0}.alert .close{position:relative;top:-2px;right:-21px;line-height:20px}.alert-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.alert-success h4{color:#468847}.alert-danger,.alert-error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.alert-danger h4,.alert-error h4{color:#b94a48}.alert-info{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.alert-info h4{color:#3a87ad}.alert-block{padding-top:14px;padding-bottom:14px}.alert-block>p,.alert-block>ul{margin-bottom:0}.alert-block p+p{margin-top:5px}.nav{margin-bottom:20px;margin-left:0;list-style:none}.nav>li>a{display:block}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}.nav>li>a>img{max-width:none}.nav>.pull-right{float:right}.nav-header{display:block;padding:3px 15px;font-size:11px;font-weight:bold;line-height:20px;color:#999;text-shadow:0 1px 0 rgba(255,255,255,0.5);text-transform:uppercase}.nav li+.nav-header{margin-top:9px}.nav-list{padding-right:15px;padding-left:15px;margin-bottom:0}.nav-list>li>a,.nav-list .nav-header{margin-right:-15px;margin-left:-15px;text-shadow:0 1px 0 rgba(255,255,255,0.5)}.nav-list>li>a{padding:3px 15px}.nav-list>.active>a,.nav-list>.active>a:hover,.nav-list>.active>a:focus{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.2);background-color:#08c}.nav-list [class^="icon-"],.nav-list [class*=" icon-"]{margin-right:2px}.nav-list .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff}.nav-tabs,.nav-pills{*zoom:1}.nav-tabs:before,.nav-pills:before,.nav-tabs:after,.nav-pills:after{display:table;line-height:0;content:""}.nav-tabs:after,.nav-pills:after{clear:both}.nav-tabs>li,.nav-pills>li{float:left}.nav-tabs>li>a,.nav-pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{margin-bottom:-1px}.nav-tabs>li>a{padding-top:8px;padding-bottom:8px;line-height:20px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover,.nav-tabs>li>a:focus{border-color:#eee #eee #ddd}.nav-tabs>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.nav-pills>.active>a,.nav-pills>.active>a:hover,.nav-pills>.active>a:focus{color:#fff;background-color:#08c}.nav-stacked>li{float:none}.nav-stacked>li>a{margin-right:0}.nav-tabs.nav-stacked{border-bottom:0}.nav-tabs.nav-stacked>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.nav-tabs.nav-stacked>li:first-child>a{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-topleft:4px}.nav-tabs.nav-stacked>li:last-child>a{-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px}.nav-tabs.nav-stacked>li>a:hover,.nav-tabs.nav-stacked>li>a:focus{z-index:2;border-color:#ddd}.nav-pills.nav-stacked>li>a{margin-bottom:3px}.nav-pills.nav-stacked>li:last-child>a{margin-bottom:1px}.nav-tabs .dropdown-menu{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.nav-pills .dropdown-menu{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.nav .dropdown-toggle .caret{margin-top:6px;border-top-color:#08c;border-bottom-color:#08c}.nav .dropdown-toggle:hover .caret,.nav .dropdown-toggle:focus .caret{border-top-color:#005580;border-bottom-color:#005580}.nav-tabs .dropdown-toggle .caret{margin-top:8px}.nav .active .dropdown-toggle .caret{border-top-color:#fff;border-bottom-color:#fff}.nav-tabs .active .dropdown-toggle .caret{border-top-color:#555;border-bottom-color:#555}.nav>.dropdown.active>a:hover,.nav>.dropdown.active>a:focus{cursor:pointer}.nav-tabs .open .dropdown-toggle,.nav-pills .open .dropdown-toggle,.nav>li.dropdown.open.active>a:hover,.nav>li.dropdown.open.active>a:focus{color:#fff;background-color:#999;border-color:#999}.nav li.dropdown.open .caret,.nav li.dropdown.open.active .caret,.nav li.dropdown.open a:hover .caret,.nav li.dropdown.open a:focus .caret{border-top-color:#fff;border-bottom-color:#fff;opacity:1;filter:alpha(opacity=100)}.tabs-stacked .open>a:hover,.tabs-stacked .open>a:focus{border-color:#999}.tabbable{*zoom:1}.tabbable:before,.tabbable:after{display:table;line-height:0;content:""}.tabbable:after{clear:both}.tab-content{overflow:auto}.tabs-below>.nav-tabs,.tabs-right>.nav-tabs,.tabs-left>.nav-tabs{border-bottom:0}.tab-content>.tab-pane,.pill-content>.pill-pane{display:none}.tab-content>.active,.pill-content>.active{display:block}.tabs-below>.nav-tabs{border-top:1px solid #ddd}.tabs-below>.nav-tabs>li{margin-top:-1px;margin-bottom:0}.tabs-below>.nav-tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.tabs-below>.nav-tabs>li>a:hover,.tabs-below>.nav-tabs>li>a:focus{border-top-color:#ddd;border-bottom-color:transparent}.tabs-below>.nav-tabs>.active>a,.tabs-below>.nav-tabs>.active>a:hover,.tabs-below>.nav-tabs>.active>a:focus{border-color:transparent #ddd #ddd #ddd}.tabs-left>.nav-tabs>li,.tabs-right>.nav-tabs>li{float:none}.tabs-left>.nav-tabs>li>a,.tabs-right>.nav-tabs>li>a{min-width:74px;margin-right:0;margin-bottom:3px}.tabs-left>.nav-tabs{float:left;margin-right:19px;border-right:1px solid #ddd}.tabs-left>.nav-tabs>li>a{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.tabs-left>.nav-tabs>li>a:hover,.tabs-left>.nav-tabs>li>a:focus{border-color:#eee #ddd #eee #eee}.tabs-left>.nav-tabs .active>a,.tabs-left>.nav-tabs .active>a:hover,.tabs-left>.nav-tabs .active>a:focus{border-color:#ddd transparent #ddd #ddd;*border-right-color:#fff}.tabs-right>.nav-tabs{float:right;margin-left:19px;border-left:1px solid #ddd}.tabs-right>.nav-tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.tabs-right>.nav-tabs>li>a:hover,.tabs-right>.nav-tabs>li>a:focus{border-color:#eee #eee #eee #ddd}.tabs-right>.nav-tabs .active>a,.tabs-right>.nav-tabs .active>a:hover,.tabs-right>.nav-tabs .active>a:focus{border-color:#ddd #ddd #ddd transparent;*border-left-color:#fff}.nav>.disabled>a{color:#999}.nav>.disabled>a:hover,.nav>.disabled>a:focus{text-decoration:none;cursor:default;background-color:transparent}.navbar{*position:relative;*z-index:2;margin-bottom:20px;overflow:visible}.navbar-inner{min-height:40px;padding-right:20px;padding-left:20px;background-color:#fafafa;background-image:-moz-linear-gradient(top,#fff,#f2f2f2);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f2f2f2));background-image:-webkit-linear-gradient(top,#fff,#f2f2f2);background-image:-o-linear-gradient(top,#fff,#f2f2f2);background-image:linear-gradient(to bottom,#fff,#f2f2f2);background-repeat:repeat-x;border:1px solid #d4d4d4;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#fff2f2f2',GradientType=0);*zoom:1;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.065);box-shadow:0 1px 4px rgba(0,0,0,0.065)}.navbar-inner:before,.navbar-inner:after{display:table;line-height:0;content:""}.navbar-inner:after{clear:both}.navbar .container{width:auto}.nav-collapse.collapse{height:auto;overflow:visible}.navbar .brand{display:block;float:left;padding:10px 20px 10px;margin-left:-20px;font-size:20px;font-weight:200;color:#777;text-shadow:0 1px 0 #fff}.navbar .brand:hover,.navbar .brand:focus{text-decoration:none}.navbar-text{margin-bottom:0;line-height:40px;color:#777}.navbar-link{color:#777}.navbar-link:hover,.navbar-link:focus{color:#333}.navbar .divider-vertical{height:40px;margin:0 9px;border-right:1px solid #fff;border-left:1px solid #f2f2f2}.navbar .btn,.navbar .btn-group{margin-top:5px}.navbar .btn-group .btn,.navbar .input-prepend .btn,.navbar .input-append .btn,.navbar .input-prepend .btn-group,.navbar .input-append .btn-group{margin-top:0}.navbar-form{margin-bottom:0;*zoom:1}.navbar-form:before,.navbar-form:after{display:table;line-height:0;content:""}.navbar-form:after{clear:both}.navbar-form input,.navbar-form select,.navbar-form .radio,.navbar-form .checkbox{margin-top:5px}.navbar-form input,.navbar-form select,.navbar-form .btn{display:inline-block;margin-bottom:0}.navbar-form input[type="image"],.navbar-form input[type="checkbox"],.navbar-form input[type="radio"]{margin-top:3px}.navbar-form .input-append,.navbar-form .input-prepend{margin-top:5px;white-space:nowrap}.navbar-form .input-append input,.navbar-form .input-prepend input{margin-top:0}.navbar-search{position:relative;float:left;margin-top:5px;margin-bottom:0}.navbar-search .search-query{padding:4px 14px;margin-bottom:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}.navbar-static-top{position:static;margin-bottom:0}.navbar-static-top .navbar-inner{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030;margin-bottom:0}.navbar-fixed-top .navbar-inner,.navbar-static-top .navbar-inner{border-width:0 0 1px}.navbar-fixed-bottom .navbar-inner{border-width:1px 0 0}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding-right:0;padding-left:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px}.navbar-fixed-top{top:0}.navbar-fixed-top .navbar-inner,.navbar-static-top .navbar-inner{-webkit-box-shadow:0 1px 10px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 10px rgba(0,0,0,0.1);box-shadow:0 1px 10px rgba(0,0,0,0.1)}.navbar-fixed-bottom{bottom:0}.navbar-fixed-bottom .navbar-inner{-webkit-box-shadow:0 -1px 10px rgba(0,0,0,0.1);-moz-box-shadow:0 -1px 10px rgba(0,0,0,0.1);box-shadow:0 -1px 10px rgba(0,0,0,0.1)}.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0}.navbar .nav.pull-right{float:right;margin-right:0}.navbar .nav>li{float:left}.navbar .nav>li>a{float:none;padding:10px 15px 10px;color:#777;text-decoration:none;text-shadow:0 1px 0 #fff}.navbar .nav .dropdown-toggle .caret{margin-top:8px}.navbar .nav>li>a:focus,.navbar .nav>li>a:hover{color:#333;text-decoration:none;background-color:transparent}.navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{color:#555;text-decoration:none;background-color:#e5e5e5;-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);box-shadow:inset 0 3px 8px rgba(0,0,0,0.125)}.navbar .btn-navbar{display:none;float:right;padding:7px 10px;margin-right:5px;margin-left:5px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#ededed;*background-color:#e5e5e5;background-image:-moz-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#e5e5e5));background-image:-webkit-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:-o-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:linear-gradient(to bottom,#f2f2f2,#e5e5e5);background-repeat:repeat-x;border-color:#e5e5e5 #e5e5e5 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2',endColorstr='#ffe5e5e5',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075)}.navbar .btn-navbar:hover,.navbar .btn-navbar:focus,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled]{color:#fff;background-color:#e5e5e5;*background-color:#d9d9d9}.navbar .btn-navbar:active,.navbar .btn-navbar.active{background-color:#ccc \9}.navbar .btn-navbar .icon-bar{display:block;width:18px;height:2px;background-color:#f5f5f5;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.25)}.btn-navbar .icon-bar+.icon-bar{margin-top:3px}.navbar .nav>li>.dropdown-menu:before{position:absolute;top:-7px;left:9px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.navbar .nav>li>.dropdown-menu:after{position:absolute;top:-6px;left:10px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.navbar-fixed-bottom .nav>li>.dropdown-menu:before{top:auto;bottom:-7px;border-top:7px solid #ccc;border-bottom:0;border-top-color:rgba(0,0,0,0.2)}.navbar-fixed-bottom .nav>li>.dropdown-menu:after{top:auto;bottom:-6px;border-top:6px solid #fff;border-bottom:0}.navbar .nav li.dropdown>a:hover .caret,.navbar .nav li.dropdown>a:focus .caret{border-top-color:#333;border-bottom-color:#333}.navbar .nav li.dropdown.open>.dropdown-toggle,.navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.open.active>.dropdown-toggle{color:#555;background-color:#e5e5e5}.navbar .nav li.dropdown>.dropdown-toggle .caret{border-top-color:#777;border-bottom-color:#777}.navbar .nav li.dropdown.open>.dropdown-toggle .caret,.navbar .nav li.dropdown.active>.dropdown-toggle .caret,.navbar .nav li.dropdown.open.active>.dropdown-toggle .caret{border-top-color:#555;border-bottom-color:#555}.navbar .pull-right>li>.dropdown-menu,.navbar .nav>li>.dropdown-menu.pull-right{right:0;left:auto}.navbar .pull-right>li>.dropdown-menu:before,.navbar .nav>li>.dropdown-menu.pull-right:before{right:12px;left:auto}.navbar .pull-right>li>.dropdown-menu:after,.navbar .nav>li>.dropdown-menu.pull-right:after{right:13px;left:auto}.navbar .pull-right>li>.dropdown-menu .dropdown-menu,.navbar .nav>li>.dropdown-menu.pull-right .dropdown-menu{right:100%;left:auto;margin-right:-1px;margin-left:0;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}.navbar-inverse .navbar-inner{background-color:#1b1b1b;background-image:-moz-linear-gradient(top,#222,#111);background-image:-webkit-gradient(linear,0 0,0 100%,from(#222),to(#111));background-image:-webkit-linear-gradient(top,#222,#111);background-image:-o-linear-gradient(top,#222,#111);background-image:linear-gradient(to bottom,#222,#111);background-repeat:repeat-x;border-color:#252525;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222',endColorstr='#ff111111',GradientType=0)}.navbar-inverse .brand,.navbar-inverse .nav>li>a{color:#999;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.navbar-inverse .brand:hover,.navbar-inverse .nav>li>a:hover,.navbar-inverse .brand:focus,.navbar-inverse .nav>li>a:focus{color:#fff}.navbar-inverse .brand{color:#999}.navbar-inverse .navbar-text{color:#999}.navbar-inverse .nav>li>a:focus,.navbar-inverse .nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .nav .active>a,.navbar-inverse .nav .active>a:hover,.navbar-inverse .nav .active>a:focus{color:#fff;background-color:#111}.navbar-inverse .navbar-link{color:#999}.navbar-inverse .navbar-link:hover,.navbar-inverse .navbar-link:focus{color:#fff}.navbar-inverse .divider-vertical{border-right-color:#222;border-left-color:#111}.navbar-inverse .nav li.dropdown.open>.dropdown-toggle,.navbar-inverse .nav li.dropdown.active>.dropdown-toggle,.navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{color:#fff;background-color:#111}.navbar-inverse .nav li.dropdown>a:hover .caret,.navbar-inverse .nav li.dropdown>a:focus .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret{border-top-color:#999;border-bottom-color:#999}.navbar-inverse .nav li.dropdown.open>.dropdown-toggle .caret,.navbar-inverse .nav li.dropdown.active>.dropdown-toggle .caret,.navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-inverse .navbar-search .search-query{color:#fff;background-color:#515151;border-color:#111;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.15);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.15);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.navbar-inverse .navbar-search .search-query:-moz-placeholder{color:#ccc}.navbar-inverse .navbar-search .search-query:-ms-input-placeholder{color:#ccc}.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder{color:#ccc}.navbar-inverse .navbar-search .search-query:focus,.navbar-inverse .navbar-search .search-query.focused{padding:5px 15px;color:#333;text-shadow:0 1px 0 #fff;background-color:#fff;border:0;outline:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.15);-moz-box-shadow:0 0 3px rgba(0,0,0,0.15);box-shadow:0 0 3px rgba(0,0,0,0.15)}.navbar-inverse .btn-navbar{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#0e0e0e;*background-color:#040404;background-image:-moz-linear-gradient(top,#151515,#040404);background-image:-webkit-gradient(linear,0 0,0 100%,from(#151515),to(#040404));background-image:-webkit-linear-gradient(top,#151515,#040404);background-image:-o-linear-gradient(top,#151515,#040404);background-image:linear-gradient(to bottom,#151515,#040404);background-repeat:repeat-x;border-color:#040404 #040404 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515',endColorstr='#ff040404',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.navbar-inverse .btn-navbar:hover,.navbar-inverse .btn-navbar:focus,.navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.active,.navbar-inverse .btn-navbar.disabled,.navbar-inverse .btn-navbar[disabled]{color:#fff;background-color:#040404;*background-color:#000}.navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.active{background-color:#000 \9}.breadcrumb{padding:8px 15px;margin:0 0 20px;list-style:none;background-color:#f5f5f5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.breadcrumb>li{display:inline-block;*display:inline;text-shadow:0 1px 0 #fff;*zoom:1}.breadcrumb>li>.divider{padding:0 5px;color:#ccc}.breadcrumb>.active{color:#999}.pagination{margin:20px 0}.pagination ul{display:inline-block;*display:inline;margin-bottom:0;margin-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.05);box-shadow:0 1px 2px rgba(0,0,0,0.05)}.pagination ul>li{display:inline}.pagination ul>li>a,.pagination ul>li>span{float:left;padding:4px 12px;line-height:20px;text-decoration:none;background-color:#fff;border:1px solid #ddd;border-left-width:0}.pagination ul>li>a:hover,.pagination ul>li>a:focus,.pagination ul>.active>a,.pagination ul>.active>span{background-color:#f5f5f5}.pagination ul>.active>a,.pagination ul>.active>span{color:#999;cursor:default}.pagination ul>.disabled>span,.pagination ul>.disabled>a,.pagination ul>.disabled>a:hover,.pagination ul>.disabled>a:focus{color:#999;cursor:default;background-color:transparent}.pagination ul>li:first-child>a,.pagination ul>li:first-child>span{border-left-width:1px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-topleft:4px}.pagination ul>li:last-child>a,.pagination ul>li:last-child>span{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px}.pagination-centered{text-align:center}.pagination-right{text-align:right}.pagination-large ul>li>a,.pagination-large ul>li>span{padding:11px 19px;font-size:17.5px}.pagination-large ul>li:first-child>a,.pagination-large ul>li:first-child>span{-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px}.pagination-large ul>li:last-child>a,.pagination-large ul>li:last-child>span{-webkit-border-top-right-radius:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-right-radius:6px;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px}.pagination-mini ul>li:first-child>a,.pagination-small ul>li:first-child>a,.pagination-mini ul>li:first-child>span,.pagination-small ul>li:first-child>span{-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px}.pagination-mini ul>li:last-child>a,.pagination-small ul>li:last-child>a,.pagination-mini ul>li:last-child>span,.pagination-small ul>li:last-child>span{-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px}.pagination-small ul>li>a,.pagination-small ul>li>span{padding:2px 10px;font-size:11.9px}.pagination-mini ul>li>a,.pagination-mini ul>li>span{padding:0 6px;font-size:10.5px}.pager{margin:20px 0;text-align:center;list-style:none;*zoom:1}.pager:before,.pager:after{display:table;line-height:0;content:""}.pager:after{clear:both}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#f5f5f5}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#999;cursor:default;background-color:#fff}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop,.modal-backdrop.fade.in{opacity:.8;filter:alpha(opacity=80)}.modal{position:fixed;top:10%;left:50%;z-index:1050;width:560px;margin-left:-280px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;outline:0;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box}.modal.fade{top:-25%;-webkit-transition:opacity .3s linear,top .3s ease-out;-moz-transition:opacity .3s linear,top .3s ease-out;-o-transition:opacity .3s linear,top .3s ease-out;transition:opacity .3s linear,top .3s ease-out}.modal.fade.in{top:10%}.modal-header{padding:9px 15px;border-bottom:1px solid #eee}.modal-header .close{margin-top:2px}.modal-header h3{margin:0;line-height:30px}.modal-body{position:relative;max-height:400px;padding:15px;overflow-y:auto}.modal-form{margin-bottom:0}.modal-footer{padding:14px 15px 15px;margin-bottom:0;text-align:right;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;*zoom:1;-webkit-box-shadow:inset 0 1px 0 #fff;-moz-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff}.modal-footer:before,.modal-footer:after{display:table;line-height:0;content:""}.modal-footer:after{clear:both}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.tooltip{position:absolute;z-index:1030;display:block;font-size:11px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}.tooltip.in{opacity:.8;filter:alpha(opacity=80)}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}.popover{position:absolute;top:0;left:0;z-index:1010;display:none;max-width:276px;padding:1px;text-align:left;white-space:normal;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:normal;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.popover-title:empty{display:none}.popover-content{padding:9px 14px}.popover .arrow,.popover .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover .arrow{border-width:11px}.popover .arrow:after{border-width:10px;content:""}.popover.top .arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,0.25);border-bottom-width:0}.popover.top .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#fff;border-bottom-width:0}.popover.right .arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,0.25);border-left-width:0}.popover.right .arrow:after{bottom:-10px;left:1px;border-right-color:#fff;border-left-width:0}.popover.bottom .arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,0.25);border-top-width:0}.popover.bottom .arrow:after{top:1px;margin-left:-10px;border-bottom-color:#fff;border-top-width:0}.popover.left .arrow{top:50%;right:-11px;margin-top:-11px;border-left-color:#999;border-left-color:rgba(0,0,0,0.25);border-right-width:0}.popover.left .arrow:after{right:1px;bottom:-10px;border-left-color:#fff;border-right-width:0}.thumbnails{margin-left:-20px;list-style:none;*zoom:1}.thumbnails:before,.thumbnails:after{display:table;line-height:0;content:""}.thumbnails:after{clear:both}.row-fluid .thumbnails{margin-left:0}.thumbnails>li{float:left;margin-bottom:20px;margin-left:20px}.thumbnail{display:block;padding:4px;line-height:20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.055);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.055);box-shadow:0 1px 3px rgba(0,0,0,0.055);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}a.thumbnail:hover,a.thumbnail:focus{border-color:#08c;-webkit-box-shadow:0 1px 4px rgba(0,105,214,0.25);-moz-box-shadow:0 1px 4px rgba(0,105,214,0.25);box-shadow:0 1px 4px rgba(0,105,214,0.25)}.thumbnail>img{display:block;max-width:100%;margin-right:auto;margin-left:auto}.thumbnail .caption{padding:9px;color:#555}.media,.media-body{overflow:hidden;*overflow:visible;zoom:1}.media,.media .media{margin-top:15px}.media:first-child{margin-top:0}.media-object{display:block}.media-heading{margin:0 0 5px}.media>.pull-left{margin-right:10px}.media>.pull-right{margin-left:10px}.media-list{margin-left:0;list-style:none}.label,.badge{display:inline-block;padding:2px 4px;font-size:11.844px;font-weight:bold;line-height:14px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);white-space:nowrap;vertical-align:baseline;background-color:#999}.label{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.badge{padding-right:9px;padding-left:9px;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px}.label:empty,.badge:empty{display:none}a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}.label-important,.badge-important{background-color:#b94a48}.label-important[href],.badge-important[href]{background-color:#953b39}.label-warning,.badge-warning{background-color:#f89406}.label-warning[href],.badge-warning[href]{background-color:#c67605}.label-success,.badge-success{background-color:#468847}.label-success[href],.badge-success[href]{background-color:#356635}.label-info,.badge-info{background-color:#3a87ad}.label-info[href],.badge-info[href]{background-color:#2d6987}.label-inverse,.badge-inverse{background-color:#333}.label-inverse[href],.badge-inverse[href]{background-color:#1a1a1a}.btn .label,.btn .badge{position:relative;top:-1px}.btn-mini .label,.btn-mini .badge{top:0}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-moz-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-ms-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f7f7f7;background-image:-moz-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));background-image:-webkit-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-o-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);background-repeat:repeat-x;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.progress .bar{float:left;width:0;height:100%;font-size:12px;color:#fff;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#0e90d2;background-image:-moz-linear-gradient(top,#149bdf,#0480be);background-image:-webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));background-image:-webkit-linear-gradient(top,#149bdf,#0480be);background-image:-o-linear-gradient(top,#149bdf,#0480be);background-image:linear-gradient(to bottom,#149bdf,#0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf',endColorstr='#ff0480be',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width .6s ease;-moz-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress .bar+.bar{-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15)}.progress-striped .bar{background-color:#149bdf;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px}.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;-ms-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-danger .bar,.progress .bar-danger{background-color:#dd514c;background-image:-moz-linear-gradient(top,#ee5f5b,#c43c35);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));background-image:-webkit-linear-gradient(top,#ee5f5b,#c43c35);background-image:-o-linear-gradient(top,#ee5f5b,#c43c35);background-image:linear-gradient(to bottom,#ee5f5b,#c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffc43c35',GradientType=0)}.progress-danger.progress-striped .bar,.progress-striped .bar-danger{background-color:#ee5f5b;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.progress-success .bar,.progress .bar-success{background-color:#5eb95e;background-image:-moz-linear-gradient(top,#62c462,#57a957);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));background-image:-webkit-linear-gradient(top,#62c462,#57a957);background-image:-o-linear-gradient(top,#62c462,#57a957);background-image:linear-gradient(to bottom,#62c462,#57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff57a957',GradientType=0)}.progress-success.progress-striped .bar,.progress-striped .bar-success{background-color:#62c462;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.progress-info .bar,.progress .bar-info{background-color:#4bb1cf;background-image:-moz-linear-gradient(top,#5bc0de,#339bb9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#339bb9));background-image:-webkit-linear-gradient(top,#5bc0de,#339bb9);background-image:-o-linear-gradient(top,#5bc0de,#339bb9);background-image:linear-gradient(to bottom,#5bc0de,#339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff339bb9',GradientType=0)}.progress-info.progress-striped .bar,.progress-striped .bar-info{background-color:#5bc0de;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.progress-warning .bar,.progress .bar-warning{background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0)}.progress-warning.progress-striped .bar,.progress-striped .bar-warning{background-color:#fbb450;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.accordion{margin-bottom:20px}.accordion-group{margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.accordion-heading{border-bottom:0}.accordion-heading .accordion-toggle{display:block;padding:8px 15px}.accordion-toggle{cursor:pointer}.accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5}.carousel{position:relative;margin-bottom:20px;line-height:1}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-moz-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;filter:alpha(opacity=50)}.carousel-control.right{right:15px;left:auto}.carousel-control:hover,.carousel-control:focus{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-indicators{position:absolute;top:15px;right:15px;z-index:5;margin:0;list-style:none}.carousel-indicators li{display:block;float:left;width:10px;height:10px;margin-left:5px;text-indent:-999px;background-color:#ccc;background-color:rgba(255,255,255,0.25);border-radius:5px}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:0;bottom:0;left:0;padding:15px;background:#333;background:rgba(0,0,0,0.75)}.carousel-caption h4,.carousel-caption p{line-height:20px;color:#fff}.carousel-caption h4{margin:0 0 5px}.carousel-caption p{margin-bottom:0}.hero-unit{padding:60px;margin-bottom:30px;font-size:18px;font-weight:200;line-height:30px;color:inherit;background-color:#eee;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;color:inherit}.hero-unit li{line-height:30px}.pull-right{float:right}.pull-left{float:left}.hide{display:none}.show{display:block}.invisible{visibility:hidden}.affix{position:fixed}
diff --git a/examples/jquery-bootstrap/thirdparty/bootstrap.min.js b/examples/jquery-bootstrap/thirdparty/bootstrap.min.js
deleted file mode 100644
index 95c5ac5ee61..00000000000
--- a/examples/jquery-bootstrap/thirdparty/bootstrap.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*!
-* Bootstrap.js by @fat & @mdo
-* Copyright 2012 Twitter, Inc.
-* http://www.apache.org/licenses/LICENSE-2.0.txt
-*/
-!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file
diff --git a/examples/jquery-mobile/README.md b/examples/jquery-mobile/README.md
deleted file mode 100644
index dd9661a363a..00000000000
--- a/examples/jquery-mobile/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-jQuery Mobile React Example
-===========================
-
-This example demonstrates how jQuery Mobile applications can be built with React.
-
-The source code is based on jQuery Mobile's [pages-multi-page example](https://github.com/jquery/jquery-mobile/tree/master/demos/pages-multi-page).
diff --git a/examples/jquery-mobile/index.html b/examples/jquery-mobile/index.html
deleted file mode 100644
index b556985d30b..00000000000
--- a/examples/jquery-mobile/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>jQuery Mobile React Example</title>
-  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
-  <link rel="stylesheet" href="//demos.jquerymobile.com/1.4.0/_assets/css/jqm-demos.css" />
-</head>
-<body class="ui-mobile-viewport ui-overlay-a">
-  <div id="content"></div>
-  <script src="../shared/thirdparty/es5-shim.min.js"></script>
-  <script src="../shared/thirdparty/es5-sham.min.js"></script>
-  <script src="../shared/thirdparty/console-polyfill.js"></script>
-  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-  <script src="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
-  <script src="../../build/react.js"></script>
-  <script type="text/javascript" src="js/app.js"></script>
-</body>
-</html>
diff --git a/examples/jquery-mobile/js/app.js b/examples/jquery-mobile/js/app.js
deleted file mode 100644
index a6a83cc3de7..00000000000
--- a/examples/jquery-mobile/js/app.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * jQuery Mobile React Example
- *
- * Main application script.
- * For variety, this example is written in 100% JSHint-compliant JavaScript, not in JSX.
- *
- * Component structure:
- *
- * - App
- *   |-- JQueryMobilePage (one)
- *   |   |-- JQueryMobileHeader
- *   |   |-- JQueryMobileContent
- *   |   |   |-- PageOneContent
- *   |   |       |-- JQueryMobileButton
- *   |   |-- JQueryMobileFooter
- *   |-- JQueryMobilePage (two)
- *   |   |-- JQueryMobileHeader
- *   |   |-- JQueryMobileContent
- *   |   |   |-- PageTwoContent
- *   |   |       |-- JQueryMobileButton
- *   |   |-- JQueryMobileFooter
- *   |-- JQueryMobilePage (popup)
- *       |-- JQueryMobileHeader
- *       |-- JQueryMobileContent
- *       |   |-- PagePopUpContent
- *       |       |-- JQueryMobileButton
- *       |-- JQueryMobileFooter
- */
-
- /* global document, React */
-
-'use strict';
-
-/** Main application component. */
-var App = React.createClass({
-  displayName: 'App',
-
-  render: function() {
-    return React.DOM.div({className:'app'},
-      JQueryMobilePage({id:'one'}, PageOneContent(null)),
-      JQueryMobilePage({id:'two'}, PageTwoContent(null)),
-      JQueryMobilePage({id:'popup', headerTheme:'b'}, PagePopUpContent(null))
-    );
-  }
-});
-
-/** jQuery Mobile button component. */
-var JQueryMobileButton = React.createClass({
-  displayName: 'JQueryMobileButton',
-
-  getDefaultProps: function() {
-    return {className:'ui-btn ui-shadow ui-corner-all'};
-  },
-
-  render: function() {
-    return React.DOM.p(null,
-      React.DOM.a(this.props, this.props.children)
-    );
-  }
-});
-
-/** jQuery Mobile page content component. */
-var JQueryMobileContent = React.createClass({
-  displayName: 'JQueryMobileContent',
-
-  render: function() {
-    return React.DOM.div({role:'main', className:'ui-content'},
-      this.props.children
-    );
-  }
-});
-
-/** jQuery Mobile footer component. */
-var JQueryMobileFooter = React.createClass({
-  displayName: 'JQueryMobileFooter',
-
-  render: function() {
-    return React.DOM.div({'data-role':'footer'},
-      React.DOM.h4(null, 'Page footer')
-    );
-  }
-});
-
-/** jQuery Mobile header component. */
-var JQueryMobileHeader = React.createClass({
-  displayName: 'JQueryMobileHeader',
-
-  render: function() {
-    return React.DOM.div({'data-role':'header', 'data-theme':this.props.headerTheme},
-      React.DOM.h1(null, this.props.title)
-    );
-  }
-});
-
-/** jQuery Mobile page component. */
-var JQueryMobilePage = React.createClass({
-  displayName: 'JQueryMobilePage',
-
-  getDefaultProps: function() {
-    return {'data-role':'page', 'data-theme':'a', headerTheme:'a'};
-  },
-
-  render: function() {
-    return this.transferPropsTo(React.DOM.div(null,
-      JQueryMobileHeader({title:'Page ' + this.props.id, headerTheme:this.props.headerTheme}),
-      JQueryMobileContent(null, this.props.children),
-      JQueryMobileFooter(null)
-    ));
-  }
-});
-
-/** Application page one component. */
-var PageOneContent = React.createClass({
-  displayName: 'PageOneContent',
-
-  render: function() {
-    return React.DOM.div(null,
-      React.DOM.h2(null, 'One'),
-      React.DOM.p(null,
-        'I have an ',
-        React.DOM.code(null, 'id'),
-        ' of "one" on my page container. I\'m first in the source order so I\'m shown when the page loads.'
-      ),
-      React.DOM.p(null, 'This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.'),
-      React.DOM.p(null, 'Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.'),
-      React.DOM.p(null,
-        'You link to internal pages by referring to the ',
-        React.DOM.code(null, 'id'),
-        ' of the page you want to show. For example, to ',
-        React.DOM.a({href:'#two'}, 'link'),
-        ' to the page with an ',
-        React.DOM.code(null, 'id'),
-        ' of "two", my link would have a ',
-        React.DOM.code(null, 'href="#two"'),
-        ' in the code.'
-      ),
-      React.DOM.h3(null, 'Show internal pages:'),
-      JQueryMobileButton({href:'#two'}, 'Show page "two"'),
-      JQueryMobileButton({href:'#popup', 'data-rel':'dialog', 'data-transition':'pop'}, 'Show page "popup" (as a dialog)')
-    );
-  }
-});
-
-/** Application page two component. */
-var PageTwoContent = React.createClass({
-  displayName: 'PageTwoContent',
-
-  render: function() {
-    return React.DOM.div(null,
-      React.DOM.h2(null, 'Two'),
-      React.DOM.p(null, 'I have an id of "two" on my page container. I\'m the second page container in this multi-page template.'),
-      React.DOM.p(null, 'Notice that the theme is different for this page because we\'ve added a few ',
-        React.DOM.code(null, 'data-theme'),
-        ' swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we\'re keeping these simple.'),
-      JQueryMobileButton({href:'#one', 'data-direction':'reverse', className:'ui-btn ui-shadow ui-corner-all ui-btn-b'}, 'Back to page "one"')
-    );
-  }
-});
-
-/** Application popup page component. */
-var PagePopUpContent = React.createClass({
-  displayName: 'PagePopUpContent',
-
-  render: function() {
-    return React.DOM.div(null,
-      React.DOM.h2(null, 'Popup'),
-      React.DOM.p(null, 'I have an id of "popup" on my page container and only look like a dialog because the link to me had a ',
-        React.DOM.code(null, 'data-rel="dialog"'),
-        ' attribute which gives me this inset look and a ',
-        React.DOM.code(null, 'data-transition="pop"'),
-        ' attribute to change the transition to pop. Without this, I\'d be styled as a normal page.'),
-      JQueryMobileButton({href:'#one', 'data-rel':'back', className:'ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left'}, 'Back to page "one"')
-    );
-  }
-});
-
-// Render application.
-React.renderComponent(App(null), document.getElementById('content'));
diff --git a/examples/server-rendering/README.md b/examples/server-rendering/README.md
deleted file mode 100644
index b80177a6bfe..00000000000
--- a/examples/server-rendering/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# React server rendering example
-
-This example demonstrates how React's server rendering works. Rather than demonstrate a pure-Node solution, this example shows how an app not written in JavaScript (in this case, PHP) can utilize React's server rendering capabilities.
-
-## Overview
-
-You generally start a React app by doing something like this:
-
-```javascript
-React.renderComponent(MyComponent({someData: ...}), document.getElementById('someContainer'));
-```
-
-The problem is that `someContainer` will be an empty HTML element until the JavaScript downloads and executes. This is bad for page load performance (since the user can't see anything until the JS downloads and executes) and is bad for SEO (since the Googlebot can't see any content). React's server rendering solves this problem -- it lets you fill `someContainer` with *static HTML* on the server and "bring it to life" on the client *without* throwing out and re-creating the HTML.
-
-In order to do this, you need to do a few things. You need to be able to run JavaScript on the server, and you need to be able to bundle that JavaScript code and send it down to the browser. This example provides one architecture, but there are many ways to do it.
-
-## Architecture overview
-
-Let's augment an existing PHP app to support server rendering. This architecture runs an Express-based Node web service to run the JavaScript server side. PHP simply uses `file_get_contents()` to send an HTTP request to this service to get the static HTML string.
-
-Browserify is used to run the same code that Node.js is running inside of the browser (aka "isomorphic" JavaScript).
-
-```
-+-------------+       +------------------+                                              +----------------------+
-|             |       |                  |  ---- HTTP request (module, props JSON) ---> |                      |
-| The browser | <---> | Existing PHP App |                                              | Node.js react server |
-|             |       |                  |  <--- HTTP response (static HTML string) --- |                      |
-+------+------+       +------------------+                                              +----------------------+
-       ^                                                                                            ^
-       |                                                                                            |
-       |              +------------------+                                              +-----------+----------+
-       |              |                  |                                              |                      |
-       +--------------+    Browserify    | <--------------------------------------------+  App code (CommonJS) |
-                      |                  |                                              |                      |
-                      +------------------+                                              +----------------------+
-```
-
-## How to run the demo
-
-  * `npm install` from `jsapp/` and `reactserver/`.
-  * Run `browserify` by doing `npm run build` inside `jsapp/`. This will generate a `webapp/static/bundle.js` file.
-  * Run the node server by doing `npm start` inside `reactserver/`.
-  * Finally, open `index.php` in your browser (on a webserver running PHP, of course). View-source to see the rendered markup.
-  * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work.
\ No newline at end of file
diff --git a/examples/server-rendering/jsapp/package.json b/examples/server-rendering/jsapp/package.json
deleted file mode 100644
index 126ba5c94a2..00000000000
--- a/examples/server-rendering/jsapp/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "example-js-app",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Pete Hunt",
-  "license": "Apache 2",
-  "dependencies": {
-    "envify": "^1.2.1",
-    "react": "^0.10.0",
-    "browserify": "^3.38.0",
-    "reactify": "^0.10.0"
-  }
-}
diff --git a/examples/server-rendering/jsapp/src/App.js b/examples/server-rendering/jsapp/src/App.js
deleted file mode 100644
index 3df0ef75496..00000000000
--- a/examples/server-rendering/jsapp/src/App.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/** @jsx React.DOM */
-var React = require('react');
-
-var App = React.createClass({
-  render: function() {
-    return <h1>Hello {this.props.name}!</h1>;
-  }
-});
-
-module.exports = App;
diff --git a/examples/server-rendering/reactserver/package.json b/examples/server-rendering/reactserver/package.json
deleted file mode 100644
index 0a28bf98289..00000000000
--- a/examples/server-rendering/reactserver/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "react-server",
-  "version": "0.0.0",
-  "description": "",
-  "main": "server.js",
-  "scripts": {
-    "start": "cd ../jsapp && node ../reactserver/server.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Pete Hunt",
-  "license": "Apache 2",
-  "dependencies": {
-    "envify": "^1.2.1",
-    "react": "^0.10.0",
-    "express": "^3.5.1",
-    "node-jsx": "^0.10.0"
-  }
-}
diff --git a/examples/server-rendering/reactserver/server.js b/examples/server-rendering/reactserver/server.js
deleted file mode 100644
index f8766365fd5..00000000000
--- a/examples/server-rendering/reactserver/server.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var React = require('react');
-var express = require('express');
-var path = require('path');
-
-// Transparently support JSX
-require('node-jsx').install();
-
-var app = express();
-
-// All the render server does is take a CommonJS module ID and some JSON props
-// in the querystring and return a static HTML representation of the component.
-// Note that this is a backend service hit by your actual web app. Even so,
-// you would probably put Varnish in front of this in production.
-app.get('/', function(req, res){
-  var component = require(path.resolve(req.query['module']));
-  var props = JSON.parse(req.query['props'] || '{}');
-
-  res.send(React.renderComponentToString(component(props)));
-});
-
-app.listen(3000);
diff --git a/examples/server-rendering/webapp/index.php b/examples/server-rendering/webapp/index.php
deleted file mode 100644
index 1b9769c9a37..00000000000
--- a/examples/server-rendering/webapp/index.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php
-
-// URL to the box running `node server.js`
-define('RENDER_SERVER', 'http://localhost:3000/');
-
-function react_component($module, $props) {
-  $props_json = json_encode($props);
-
-  // Try to server-render the component if the service is available.
-  // If it isn't, no big deal: the client will transparently render
-  // the markup!
-  $server_markup = @file_get_contents(
-    RENDER_SERVER .
-      '?module=' .
-      urlencode($module) .
-      '&props=' .
-      urlencode($props_json)
-  );
-
-  $container_id = uniqid();
-
-  // Generate the code required to run the component on the client.
-  // We assume that the Browserify bundle is loaded in the page already
-  // and that you used -r to get a global require() function that provides
-  // every $module you may request as well as React.
-  // Note that this solution is simple but I don't think it scales to
-  // multiple large pages very well. For that you'd be better off using
-  // webpack.
-  $startup_code =
-    '<script>require(\'react\').renderComponent(require(' . 
-    json_encode($module) .
-    ')(' . $props_json . '), ' . 
-    'document.getElementById(' . json_encode($container_id) . '))' .
-    '</script>';
-
-  $container_markup = '<div id="' . $container_id . '">' . $server_markup . '</div>';
-
-  return $container_markup . $startup_code;
-}
-?>
-
-<html>
-  <head>
-    <title>React server rendering example</title>
-    <script src="static/bundle.js"></script>
-  </head>
-  <body>
-    Welcome to the React server rendering example. Here is a server-rendered React component:
-    <?php echo react_component('./src/App', array('name' => 'Pete')); ?>
-  </body>
-</html>
diff --git a/examples/server-rendering/webapp/static/NOTHING_HERE_YET b/examples/server-rendering/webapp/static/NOTHING_HERE_YET
deleted file mode 100644
index c2f0daee25e..00000000000
--- a/examples/server-rendering/webapp/static/NOTHING_HERE_YET
+++ /dev/null
@@ -1 +0,0 @@
-Nothing to see here... yet!
\ No newline at end of file
diff --git a/examples/shared/css/base.css b/examples/shared/css/base.css
deleted file mode 100644
index 3ed9ea3883f..00000000000
--- a/examples/shared/css/base.css
+++ /dev/null
@@ -1,62 +0,0 @@
-body {
-  background: #fff;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
-  font-size: 15px;
-  line-height: 1.7;
-  margin: 0;
-  padding: 30px;
-}
-
-a {
-  color: #4183c4;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-code {
-  background-color: #f8f8f8;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
-  font-size: 12px;
-  margin: 0 2px;
-  padding: 0px 5px;
-}
-
-h1, h2, h3, h4 {
-  font-weight: bold;
-  margin: 0 0 15px;
-  padding: 0;
-}
-
-h1 {
-  border-bottom: 1px solid #ddd;
-  font-size: 2.5em;
-  font-weight: bold;
-  margin: 0 0 15px;
-  padding: 0;
-}
-
-h2 {
-  border-bottom: 1px solid #eee;
-  font-size: 2em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.2em;
-}
-
-p, ul {
-  margin: 15px 0;
-}
-
-ul {
-  padding-left: 30px;
-}
diff --git a/examples/shared/thirdparty/console-polyfill.js b/examples/shared/thirdparty/console-polyfill.js
deleted file mode 100644
index 7eacd780969..00000000000
--- a/examples/shared/thirdparty/console-polyfill.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// Console-polyfill. MIT license.
-// https://github.com/paulmillr/console-polyfill
-// Make it safe to do console.log() always.
-(function(con) {
-  'use strict';
-  var prop, method;
-  var empty = {};
-  var dummy = function() {};
-  var properties = 'memory'.split(',');
-  var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
-     'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' +
-     'table,time,timeEnd,timeStamp,trace,warn').split(',');
-  while (prop = properties.pop()) con[prop] = con[prop] || empty;
-  while (method = methods.pop()) con[method] = con[method] || dummy;
-})(this.console = this.console || {}); // Using `this` for web workers.
diff --git a/examples/shared/thirdparty/es5-sham.min.js b/examples/shared/thirdparty/es5-sham.min.js
deleted file mode 100644
index 033c27a3fd8..00000000000
--- a/examples/shared/thirdparty/es5-sham.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}});
-//# sourceMappingURL=es5-sham.map
\ No newline at end of file
diff --git a/examples/shared/thirdparty/es5-shim.min.js b/examples/shared/thirdparty/es5-shim.min.js
deleted file mode 100644
index 50502e0548b..00000000000
--- a/examples/shared/thirdparty/es5-shim.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5",definition)}else{definition()}})(function(){if(parseInt("08")!==8){parseInt=function(origParseInt){var hexRegex=/^0[xX]/;return function parseIntES5(str,radix){str=String(str).trim();if(!+radix){radix=hexRegex.test(str)?16:10}return origParseInt(str,radix)}}(parseInt)}function Empty(){}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError("Function.prototype.bind called on incompatible "+target)}var args=_Array_slice_.call(arguments,1);var binder=function(){if(this instanceof bound){var result=target.apply(this,args.concat(_Array_slice_.call(arguments)));if(Object(result)===result){return result}return this}else{return target.apply(that,args.concat(_Array_slice_.call(arguments)))}};var boundLength=Math.max(0,target.length-args.length);var boundArgs=[];for(var i=0;i<boundLength;i++){boundArgs.push("$"+i)}var bound=Function("binder","return function("+boundArgs.join(",")+"){return binder.apply(this,arguments)}")(binder);if(target.prototype){Empty.prototype=target.prototype;bound.prototype=new Empty;Empty.prototype=null}return bound}}var call=Function.prototype.call;var prototypeOfArray=Array.prototype;var prototypeOfObject=Object.prototype;var _Array_slice_=prototypeOfArray.slice;var _toString=call.bind(prototypeOfObject.toString);var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if([1,2].splice(0).length!=2){var array_splice=Array.prototype.splice;var array_push=Array.prototype.push;var array_unshift=Array.prototype.unshift;if(function(){function makeArray(l){var a=[];while(l--){a.unshift(l)}return a}var array=[],lengthBefore;array.splice.bind(array,0,0).apply(null,makeArray(20));array.splice.bind(array,0,0).apply(null,makeArray(26));lengthBefore=array.length;array.splice(5,0,"XXX");if(lengthBefore+1==array.length){return true}}()){Array.prototype.splice=function(start,deleteCount){if(!arguments.length){return[]}else{return array_splice.apply(this,[start===void 0?0:start,deleteCount===void 0?this.length-start:deleteCount].concat(_Array_slice_.call(arguments,2)))}}}else{Array.prototype.splice=function(start,deleteCount){var result,args=_Array_slice_.call(arguments,2),addElementsCount=args.length;if(!arguments.length){return[]}if(start===void 0){start=0}if(deleteCount===void 0){deleteCount=this.length-start}if(addElementsCount>0){if(deleteCount<=0){if(start==this.length){array_push.apply(this,args);return[]}if(start==0){array_unshift.apply(this,args);return[]}}result=_Array_slice_.call(this,start,start+deleteCount);args.push.apply(args,_Array_slice_.call(this,start+deleteCount,this.length));args.unshift.apply(args,_Array_slice_.call(this,0,start));args.unshift(0,this.length);array_splice.apply(this,args);return result}return array_splice.call(this,start,deleteCount)}}}if([].unshift(0)!=1){var array_unshift=Array.prototype.unshift;Array.prototype.unshift=function(){array_unshift.apply(this,arguments);return this.length}}if(!Array.isArray){Array.isArray=function isArray(obj){return _toString(obj)=="[object Array]"}}var boxedString=Object("a"),splitString=boxedString[0]!="a"||!(0 in boxedString);var boxedForEach=true;if(Array.prototype.forEach){Array.prototype.forEach.call("foo",function(item,i,obj){if(typeof obj!=="object")boxedForEach=false})}if(!Array.prototype.forEach||!boxedForEach){Array.prototype.forEach=function forEach(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,thisp=arguments[1],i=-1,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError}while(++i<length){if(i in self){fun.call(thisp,self[i],i,object)}}}}if(!Array.prototype.map){Array.prototype.map=function map(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,result=Array(length),thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self)result[i]=fun.call(thisp,self[i],i,object)}return result}}if(!Array.prototype.filter){Array.prototype.filter=function filter(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,result=[],value,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self){value=self[i];if(fun.call(thisp,value,i,object)){result.push(value)}}}return result}}if(!Array.prototype.every){Array.prototype.every=function every(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self&&!fun.call(thisp,self[i],i,object)){return false}}return true}}if(!Array.prototype.some){Array.prototype.some=function some(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self&&fun.call(thisp,self[i],i,object)){return true}}return false}}if(!Array.prototype.reduce){Array.prototype.reduce=function reduce(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduce of empty array with no initial value")}var i=0;var result;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i++];break}if(++i>=length){throw new TypeError("reduce of empty array with no initial value")}}while(true)}for(;i<length;i++){if(i in self){result=fun.call(void 0,result,self[i],i,object)}}return result}}if(!Array.prototype.reduceRight){Array.prototype.reduceRight=function reduceRight(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduceRight of empty array with no initial value")}var result,i=length-1;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i--];break}if(--i<0){throw new TypeError("reduceRight of empty array with no initial value")}}while(true)}if(i<0){return result}do{if(i in this){result=fun.call(void 0,result,self[i],i,object)}}while(i--);return result}}if(!Array.prototype.indexOf||[0,1].indexOf(1,2)!=-1){Array.prototype.indexOf=function indexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=0;if(arguments.length>1){i=toInteger(arguments[1])}i=i>=0?i:Math.max(0,length+i);for(;i<length;i++){if(i in self&&self[i]===sought){return i}}return-1}}if(!Array.prototype.lastIndexOf||[0,1].lastIndexOf(0,-3)!=-1){Array.prototype.lastIndexOf=function lastIndexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=length-1;if(arguments.length>1){i=Math.min(i,toInteger(arguments[1]))}i=i>=0?i:length-Math.abs(i);for(;i>=0;i--){if(i in self&&sought===self[i]){return i}}return-1}}if(!Object.keys){var hasDontEnumBug=true,dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],dontEnumsLength=dontEnums.length;for(var key in{toString:null}){hasDontEnumBug=false}Object.keys=function keys(object){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError("Object.keys called on a non-object")}var keys=[];for(var name in object){if(owns(object,name)){keys.push(name)}}if(hasDontEnumBug){for(var i=0,ii=dontEnumsLength;i<ii;i++){var dontEnum=dontEnums[i];if(owns(object,dontEnum)){keys.push(dontEnum)}}}return keys}}var negativeDate=-621987552e5,negativeYearString="-000001";if(!Date.prototype.toISOString||new Date(negativeDate).toISOString().indexOf(negativeYearString)===-1){Date.prototype.toISOString=function toISOString(){var result,length,value,year,month;if(!isFinite(this)){throw new RangeError("Date.prototype.toISOString called on non-finite value.")}year=this.getUTCFullYear();month=this.getUTCMonth();year+=Math.floor(month/12);month=(month%12+12)%12;result=[month+1,this.getUTCDate(),this.getUTCHours(),this.getUTCMinutes(),this.getUTCSeconds()];year=(year<0?"-":year>9999?"+":"")+("00000"+Math.abs(year)).slice(0<=year&&year<=9999?-4:-6);length=result.length;while(length--){value=result[length];if(value<10){result[length]="0"+value}}return year+"-"+result.slice(0,2).join("-")+"T"+result.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+"Z"}}var dateToJSONIsSupported=false;try{dateToJSONIsSupported=Date.prototype.toJSON&&new Date(NaN).toJSON()===null&&new Date(negativeDate).toJSON().indexOf(negativeYearString)!==-1&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(e){}if(!dateToJSONIsSupported){Date.prototype.toJSON=function toJSON(key){var o=Object(this),tv=toPrimitive(o),toISO;if(typeof tv==="number"&&!isFinite(tv)){return null}toISO=o.toISOString;if(typeof toISO!="function"){throw new TypeError("toISOString property is not callable")}return toISO.call(o)}}if(!Date.parse||"Date.parse is buggy"){Date=function(NativeDate){function Date(Y,M,D,h,m,s,ms){var length=arguments.length;if(this instanceof NativeDate){var date=length==1&&String(Y)===Y?new NativeDate(Date.parse(Y)):length>=7?new NativeDate(Y,M,D,h,m,s,ms):length>=6?new NativeDate(Y,M,D,h,m,s):length>=5?new NativeDate(Y,M,D,h,m):length>=4?new NativeDate(Y,M,D,h):length>=3?new NativeDate(Y,M,D):length>=2?new NativeDate(Y,M):length>=1?new NativeDate(Y):new NativeDate;date.constructor=Date;return date}return NativeDate.apply(this,arguments)}var isoDateExpression=new RegExp("^"+"(\\d{4}|[+-]\\d{6})"+"(?:-(\\d{2})"+"(?:-(\\d{2})"+"(?:"+"T(\\d{2})"+":(\\d{2})"+"(?:"+":(\\d{2})"+"(?:(\\.\\d{1,}))?"+")?"+"("+"Z|"+"(?:"+"([-+])"+"(\\d{2})"+":(\\d{2})"+")"+")?)?)?)?"+"$");var months=[0,31,59,90,120,151,181,212,243,273,304,334,365];function dayFromMonth(year,month){var t=month>1?1:0;return months[month]+Math.floor((year-1969+t)/4)-Math.floor((year-1901+t)/100)+Math.floor((year-1601+t)/400)+365*(year-1970)}function toUTC(t){return Number(new NativeDate(1970,0,1,0,0,0,t))}for(var key in NativeDate){Date[key]=NativeDate[key]}Date.now=NativeDate.now;Date.UTC=NativeDate.UTC;Date.prototype=NativeDate.prototype;Date.prototype.constructor=Date;Date.parse=function parse(string){var match=isoDateExpression.exec(string);if(match){var year=Number(match[1]),month=Number(match[2]||1)-1,day=Number(match[3]||1)-1,hour=Number(match[4]||0),minute=Number(match[5]||0),second=Number(match[6]||0),millisecond=Math.floor(Number(match[7]||0)*1e3),isLocalTime=Boolean(match[4]&&!match[8]),signOffset=match[9]==="-"?1:-1,hourOffset=Number(match[10]||0),minuteOffset=Number(match[11]||0),result;if(hour<(minute>0||second>0||millisecond>0?24:25)&&minute<60&&second<60&&millisecond<1e3&&month>-1&&month<12&&hourOffset<24&&minuteOffset<60&&day>-1&&day<dayFromMonth(year,month+1)-dayFromMonth(year,month)){result=((dayFromMonth(year,month)+day)*24+hour+hourOffset*signOffset)*60;result=((result+minute+minuteOffset*signOffset)*60+second)*1e3+millisecond;if(isLocalTime){result=toUTC(result)}if(-864e13<=result&&result<=864e13){return result}}return NaN}return NativeDate.parse.apply(this,arguments)};return Date}(Date)}if(!Date.now){Date.now=function now(){return(new Date).getTime()}}if(!Number.prototype.toFixed||8e-5.toFixed(3)!=="0.000"||.9.toFixed(0)==="0"||1.255.toFixed(2)!=="1.25"||0xde0b6b3a7640080.toFixed(0)!=="1000000000000000128"){(function(){var base,size,data,i;base=1e7;size=6;data=[0,0,0,0,0,0];function multiply(n,c){var i=-1;while(++i<size){c+=n*data[i];data[i]=c%base;c=Math.floor(c/base)}}function divide(n){var i=size,c=0;while(--i>=0){c+=data[i];data[i]=Math.floor(c/n);c=c%n*base}}function toString(){var i=size;var s="";while(--i>=0){if(s!==""||i===0||data[i]!==0){var t=String(data[i]);if(s===""){s=t}else{s+="0000000".slice(0,7-t.length)+t}}}return s}function pow(x,n,acc){return n===0?acc:n%2===1?pow(x,n-1,acc*x):pow(x*x,n/2,acc)}function log(x){var n=0;while(x>=4096){n+=12;x/=4096}while(x>=2){n+=1;x/=2}return n}Number.prototype.toFixed=function(fractionDigits){var f,x,s,m,e,z,j,k;f=Number(fractionDigits);f=f!==f?0:Math.floor(f);if(f<0||f>20){throw new RangeError("Number.toFixed called with invalid number of decimals")}x=Number(this);if(x!==x){return"NaN"}if(x<=-1e21||x>=1e21){return String(x)}s="";if(x<0){s="-";x=-x}m="0";if(x>1e-21){e=log(x*pow(2,69,1))-69;z=e<0?x*pow(2,-e,1):x/pow(2,e,1);z*=4503599627370496;e=52-e;if(e>0){multiply(0,z);j=f;while(j>=7){multiply(1e7,0);j-=7}multiply(pow(10,j,1),0);j=e-1;while(j>=23){divide(1<<23);j-=23}divide(1<<j);multiply(1,1);divide(2);m=toString()}else{multiply(0,z);multiply(1<<-e,0);m=toString()+"0.00000000000000000000".slice(2,2+f)}}if(f>0){k=m.length;if(k<=f){m=s+"0.0000000000000000000".slice(0,f-k+2)+m}else{m=s+m.slice(0,k-f)+"."+m.slice(k-f)}}else{m=s+m}return m}})()}var string_split=String.prototype.split;if("ab".split(/(?:ab)*/).length!==2||".".split(/(.?)(.?)/).length!==4||"tesst".split(/(s)*/)[1]==="t"||"".split(/.?/).length||".".split(/()()/).length>1){(function(){var compliantExecNpcg=/()??/.exec("")[1]===void 0;String.prototype.split=function(separator,limit){var string=this;if(separator===void 0&&limit===0)return[];if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return string_split.apply(this,arguments)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;string+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===void 0?-1>>>0:limit>>>0;while(match=separator.exec(string)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(string.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i<arguments.length-2;i++){if(arguments[i]===void 0){match[i]=void 0}}})}if(match.length>1&&match.index<string.length){Array.prototype.push.apply(output,match.slice(1))}lastLength=match[0].length;lastLastIndex=lastIndex;if(output.length>=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===string.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(string.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output}})()}else if("0".split(void 0,0).length){String.prototype.split=function(separator,limit){if(separator===void 0&&limit===0)return[];return string_split.apply(this,arguments)}}if("".substr&&"0b".substr(-1)!=="b"){var string_substr=String.prototype.substr;String.prototype.substr=function(start,length){return string_substr.call(this,start<0?(start=this.length+start)<0?0:start:start,length)}}var ws="	\n\f\r \xa0\u1680\u180e\u2000\u2001\u2002\u2003"+"\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028"+"\u2029\ufeff";if(!String.prototype.trim||ws.trim()){ws="["+ws+"]";var trimBeginRegexp=new RegExp("^"+ws+ws+"*"),trimEndRegexp=new RegExp(ws+ws+"*$");String.prototype.trim=function trim(){if(this===void 0||this===null){throw new TypeError("can't convert "+this+" to object")}return String(this).replace(trimBeginRegexp,"").replace(trimEndRegexp,"")}}function toInteger(n){n=+n;if(n!==n){n=0}else if(n!==0&&n!==1/0&&n!==-(1/0)){n=(n>0||-1)*Math.floor(Math.abs(n))}return n}function isPrimitive(input){var type=typeof input;return input===null||type==="undefined"||type==="boolean"||type==="number"||type==="string"}function toPrimitive(input){var val,valueOf,toString;if(isPrimitive(input)){return input}valueOf=input.valueOf;if(typeof valueOf==="function"){val=valueOf.call(input);if(isPrimitive(val)){return val}}toString=input.toString;if(typeof toString==="function"){val=toString.call(input);if(isPrimitive(val)){return val}}throw new TypeError}var toObject=function(o){if(o==null){throw new TypeError("can't convert "+o+" to object")}return Object(o)}});
-//# sourceMappingURL=es5-shim.map
\ No newline at end of file
diff --git a/examples/shared/thirdparty/jquery.min.js b/examples/shared/thirdparty/jquery.min.js
deleted file mode 100644
index 50d1b22f274..00000000000
--- a/examples/shared/thirdparty/jquery.min.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(t.documentElement),t=(cn[0].contentWindow||cn[0].contentDocument).document,t.write("<!doctype html><html><body>"),t.close(),n=A(e,t),cn.detach()),bn[e]=n),n}function A(e,t){var n=st(t.createElement(e)).appendTo(t.body),r=st.css(n[0],"display");return n.remove(),r}function j(e,t,n,r){var i;if(st.isArray(t))st.each(t,function(t,i){n||kn.test(e)?r(e,i):j(e+"["+("object"==typeof i?t:"")+"]",i,n,r)});else if(n||"object"!==st.type(t))r(e,t);else for(i in t)j(e+"["+i+"]",t[i],n,r)}function D(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(lt)||[];if(st.isFunction(n))for(;r=o[i++];)"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function L(e,n,r,i){function o(u){var l;return a[u]=!0,st.each(e[u]||[],function(e,u){var c=u(n,r,i);return"string"!=typeof c||s||a[c]?s?!(l=c):t:(n.dataTypes.unshift(c),o(c),!1)}),l}var a={},s=e===$n;return o(n.dataTypes[0])||!a["*"]&&o("*")}function H(e,n){var r,i,o=st.ajaxSettings.flatOptions||{};for(r in n)n[r]!==t&&((o[r]?e:i||(i={}))[r]=n[r]);return i&&st.extend(!0,e,i),e}function M(e,n,r){var i,o,a,s,u=e.contents,l=e.dataTypes,c=e.responseFields;for(o in c)o in r&&(n[c[o]]=r[o]);for(;"*"===l[0];)l.shift(),i===t&&(i=e.mimeType||n.getResponseHeader("Content-Type"));if(i)for(o in u)if(u[o]&&u[o].test(i)){l.unshift(o);break}if(l[0]in r)a=l[0];else{for(o in r){if(!l[0]||e.converters[o+" "+l[0]]){a=o;break}s||(s=o)}a=a||s}return a?(a!==l[0]&&l.unshift(a),r[a]):t}function q(e,t){var n,r,i,o,a={},s=0,u=e.dataTypes.slice(),l=u[0];if(e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u[1])for(n in e.converters)a[n.toLowerCase()]=e.converters[n];for(;i=u[++s];)if("*"!==i){if("*"!==l&&l!==i){if(n=a[l+" "+i]||a["* "+i],!n)for(r in a)if(o=r.split(" "),o[1]===i&&(n=a[l+" "+o[0]]||a["* "+o[0]])){n===!0?n=a[r]:a[r]!==!0&&(i=o[0],u.splice(s--,0,i));break}if(n!==!0)if(n&&e["throws"])t=n(t);else try{t=n(t)}catch(c){return{state:"parsererror",error:n?c:"No conversion from "+l+" to "+i}}}l=i}return{state:"success",data:t}}function _(){try{return new e.XMLHttpRequest}catch(t){}}function F(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}function O(){return setTimeout(function(){Qn=t}),Qn=st.now()}function B(e,t){st.each(t,function(t,n){for(var r=(rr[t]||[]).concat(rr["*"]),i=0,o=r.length;o>i;i++)if(r[i].call(e,t,n))return})}function P(e,t,n){var r,i,o=0,a=nr.length,s=st.Deferred().always(function(){delete u.elem}),u=function(){if(i)return!1;for(var t=Qn||O(),n=Math.max(0,l.startTime+l.duration-t),r=n/l.duration||0,o=1-r,a=0,u=l.tweens.length;u>a;a++)l.tweens[a].run(o);return s.notifyWith(e,[l,o,n]),1>o&&u?n:(s.resolveWith(e,[l]),!1)},l=s.promise({elem:e,props:st.extend({},t),opts:st.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Qn||O(),duration:n.duration,tweens:[],createTween:function(t,n){var r=st.Tween(e,l.opts,t,n,l.opts.specialEasing[t]||l.opts.easing);return l.tweens.push(r),r},stop:function(t){var n=0,r=t?l.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)l.tweens[n].run(1);return t?s.resolveWith(e,[l,t]):s.rejectWith(e,[l,t]),this}}),c=l.props;for(R(c,l.opts.specialEasing);a>o;o++)if(r=nr[o].call(l,e,c,l.opts))return r;return B(l,c),st.isFunction(l.opts.start)&&l.opts.start.call(e,l),st.fx.timer(st.extend(u,{elem:e,anim:l,queue:l.opts.queue})),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always)}function R(e,t){var n,r,i,o,a;for(n in e)if(r=st.camelCase(n),i=t[r],o=e[n],st.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),a=st.cssHooks[r],a&&"expand"in a){o=a.expand(o),delete e[r];for(n in o)n in e||(e[n]=o[n],t[n]=i)}else t[r]=i}function W(e,t,n){var r,i,o,a,s,u,l,c,f,p=this,d=e.style,h={},g=[],m=e.nodeType&&w(e);n.queue||(c=st._queueHooks(e,"fx"),null==c.unqueued&&(c.unqueued=0,f=c.empty.fire,c.empty.fire=function(){c.unqueued||f()}),c.unqueued++,p.always(function(){p.always(function(){c.unqueued--,st.queue(e,"fx").length||c.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[d.overflow,d.overflowX,d.overflowY],"inline"===st.css(e,"display")&&"none"===st.css(e,"float")&&(st.support.inlineBlockNeedsLayout&&"inline"!==S(e.nodeName)?d.zoom=1:d.display="inline-block")),n.overflow&&(d.overflow="hidden",st.support.shrinkWrapBlocks||p.done(function(){d.overflow=n.overflow[0],d.overflowX=n.overflow[1],d.overflowY=n.overflow[2]}));for(r in t)if(o=t[r],Zn.exec(o)){if(delete t[r],u=u||"toggle"===o,o===(m?"hide":"show"))continue;g.push(r)}if(a=g.length){s=st._data(e,"fxshow")||st._data(e,"fxshow",{}),"hidden"in s&&(m=s.hidden),u&&(s.hidden=!m),m?st(e).show():p.done(function(){st(e).hide()}),p.done(function(){var t;st._removeData(e,"fxshow");for(t in h)st.style(e,t,h[t])});for(r=0;a>r;r++)i=g[r],l=p.createTween(i,m?s[i]:0),h[i]=s[i]||st.style(e,i),i in s||(s[i]=l.start,m&&(l.end=l.start,l.start="width"===i||"height"===i?1:0))}}function $(e,t,n,r,i){return new $.prototype.init(e,t,n,r,i)}function I(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=wn[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}function z(e){return st.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}var X,U,V=e.document,Y=e.location,J=e.jQuery,G=e.$,Q={},K=[],Z="1.9.0",et=K.concat,tt=K.push,nt=K.slice,rt=K.indexOf,it=Q.toString,ot=Q.hasOwnProperty,at=Z.trim,st=function(e,t){return new st.fn.init(e,t,X)},ut=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,lt=/\S+/g,ct=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,ft=/^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,pt=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,dt=/^[\],:{}\s]*$/,ht=/(?:^|:|,)(?:\s*\[)+/g,gt=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,mt=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,yt=/^-ms-/,vt=/-([\da-z])/gi,bt=function(e,t){return t.toUpperCase()},xt=function(){V.addEventListener?(V.removeEventListener("DOMContentLoaded",xt,!1),st.ready()):"complete"===V.readyState&&(V.detachEvent("onreadystatechange",xt),st.ready())};st.fn=st.prototype={jquery:Z,constructor:st,init:function(e,n,r){var i,o;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:ft.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof st?n[0]:n,st.merge(this,st.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:V,!0)),pt.test(i[1])&&st.isPlainObject(n))for(i in n)st.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(o=V.getElementById(i[2]),o&&o.parentNode){if(o.id!==i[2])return r.find(e);this.length=1,this[0]=o}return this.context=V,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):st.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),st.makeArray(e,this))},selector:"",length:0,size:function(){return this.length},toArray:function(){return nt.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=st.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return st.each(this,e,t)},ready:function(e){return st.ready.promise().done(e),this},slice:function(){return this.pushStack(nt.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(st.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:tt,sort:[].sort,splice:[].splice},st.fn.init.prototype=st.fn,st.extend=st.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},u=1,l=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},u=2),"object"==typeof s||st.isFunction(s)||(s={}),l===u&&(s=this,--u);l>u;u++)if(null!=(e=arguments[u]))for(n in e)r=s[n],i=e[n],s!==i&&(c&&i&&(st.isPlainObject(i)||(o=st.isArray(i)))?(o?(o=!1,a=r&&st.isArray(r)?r:[]):a=r&&st.isPlainObject(r)?r:{},s[n]=st.extend(c,a,i)):i!==t&&(s[n]=i));return s},st.extend({noConflict:function(t){return e.$===st&&(e.$=G),t&&e.jQuery===st&&(e.jQuery=J),st},isReady:!1,readyWait:1,holdReady:function(e){e?st.readyWait++:st.ready(!0)},ready:function(e){if(e===!0?!--st.readyWait:!st.isReady){if(!V.body)return setTimeout(st.ready);st.isReady=!0,e!==!0&&--st.readyWait>0||(U.resolveWith(V,[st]),st.fn.trigger&&st(V).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===st.type(e)},isArray:Array.isArray||function(e){return"array"===st.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?Q[it.call(e)]||"object":typeof e},isPlainObject:function(e){if(!e||"object"!==st.type(e)||e.nodeType||st.isWindow(e))return!1;try{if(e.constructor&&!ot.call(e,"constructor")&&!ot.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(n){return!1}var r;for(r in e);return r===t||ot.call(e,r)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||V;var r=pt.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=st.buildFragment([e],t,i),i&&st(i).remove(),st.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=st.trim(n),n&&dt.test(n.replace(gt,"@").replace(mt,"]").replace(ht,"")))?Function("return "+n)():(st.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||st.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&st.trim(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(yt,"ms-").replace(vt,bt)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,r){var i,o=0,a=e.length,s=n(e);if(r){if(s)for(;a>o&&(i=t.apply(e[o],r),i!==!1);o++);else for(o in e)if(i=t.apply(e[o],r),i===!1)break}else if(s)for(;a>o&&(i=t.call(e[o],o,e[o]),i!==!1);o++);else for(o in e)if(i=t.call(e[o],o,e[o]),i===!1)break;return e},trim:at&&!at.call("\ufeff\u00a0")?function(e){return null==e?"":at.call(e)}:function(e){return null==e?"":(e+"").replace(ct,"")},makeArray:function(e,t){var r=t||[];return null!=e&&(n(Object(e))?st.merge(r,"string"==typeof e?[e]:e):tt.call(r,e)),r},inArray:function(e,t,n){var r;if(t){if(rt)return rt.call(t,e,n);for(r=t.length,n=n?0>n?Math.max(0,r+n):n:0;r>n;n++)if(n in t&&t[n]===e)return n}return-1},merge:function(e,n){var r=n.length,i=e.length,o=0;if("number"==typeof r)for(;r>o;o++)e[i++]=n[o];else for(;n[o]!==t;)e[i++]=n[o++];return e.length=i,e},grep:function(e,t,n){var r,i=[],o=0,a=e.length;for(n=!!n;a>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,r){var i,o=0,a=e.length,s=n(e),u=[];if(s)for(;a>o;o++)i=t(e[o],o,r),null!=i&&(u[u.length]=i);else for(o in e)i=t(e[o],o,r),null!=i&&(u[u.length]=i);return et.apply([],u)},guid:1,proxy:function(e,n){var r,i,o;return"string"==typeof n&&(r=e[n],n=e,e=r),st.isFunction(e)?(i=nt.call(arguments,2),o=function(){return e.apply(n||this,i.concat(nt.call(arguments)))},o.guid=e.guid=e.guid||st.guid++,o):t},access:function(e,n,r,i,o,a,s){var u=0,l=e.length,c=null==r;if("object"===st.type(r)){o=!0;for(u in r)st.access(e,n,u,r[u],!0,a,s)}else if(i!==t&&(o=!0,st.isFunction(i)||(s=!0),c&&(s?(n.call(e,i),n=null):(c=n,n=function(e,t,n){return c.call(st(e),n)})),n))for(;l>u;u++)n(e[u],r,s?i:i.call(e[u],u,n(e[u],r)));return o?e:c?n.call(e):l?n(e[0],r):a},now:function(){return(new Date).getTime()}}),st.ready.promise=function(t){if(!U)if(U=st.Deferred(),"complete"===V.readyState)setTimeout(st.ready);else if(V.addEventListener)V.addEventListener("DOMContentLoaded",xt,!1),e.addEventListener("load",st.ready,!1);else{V.attachEvent("onreadystatechange",xt),e.attachEvent("onload",st.ready);var n=!1;try{n=null==e.frameElement&&V.documentElement}catch(r){}n&&n.doScroll&&function i(){if(!st.isReady){try{n.doScroll("left")}catch(e){return setTimeout(i,50)}st.ready()}}()}return U.promise(t)},st.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){Q["[object "+t+"]"]=t.toLowerCase()}),X=st(V);var Tt={};st.Callbacks=function(e){e="string"==typeof e?Tt[e]||r(e):st.extend({},e);var n,i,o,a,s,u,l=[],c=!e.once&&[],f=function(t){for(n=e.memory&&t,i=!0,u=a||0,a=0,s=l.length,o=!0;l&&s>u;u++)if(l[u].apply(t[0],t[1])===!1&&e.stopOnFalse){n=!1;break}o=!1,l&&(c?c.length&&f(c.shift()):n?l=[]:p.disable())},p={add:function(){if(l){var t=l.length;(function r(t){st.each(t,function(t,n){var i=st.type(n);"function"===i?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==i&&r(n)})})(arguments),o?s=l.length:n&&(a=t,f(n))}return this},remove:function(){return l&&st.each(arguments,function(e,t){for(var n;(n=st.inArray(t,l,n))>-1;)l.splice(n,1),o&&(s>=n&&s--,u>=n&&u--)}),this},has:function(e){return st.inArray(e,l)>-1},empty:function(){return l=[],this},disable:function(){return l=c=n=t,this},disabled:function(){return!l},lock:function(){return c=t,n||p.disable(),this},locked:function(){return!c},fireWith:function(e,t){return t=t||[],t=[e,t.slice?t.slice():t],!l||i&&!c||(o?c.push(t):f(t)),this},fire:function(){return p.fireWith(this,arguments),this},fired:function(){return!!i}};return p},st.extend({Deferred:function(e){var t=[["resolve","done",st.Callbacks("once memory"),"resolved"],["reject","fail",st.Callbacks("once memory"),"rejected"],["notify","progress",st.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return st.Deferred(function(n){st.each(t,function(t,o){var a=o[0],s=st.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&st.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?st.extend(e,r):r}},i={};return r.pipe=r.then,st.each(t,function(e,o){var a=o[2],s=o[3];r[o[1]]=a.add,s&&a.add(function(){n=s},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=a.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t,n,r,i=0,o=nt.call(arguments),a=o.length,s=1!==a||e&&st.isFunction(e.promise)?a:0,u=1===s?e:st.Deferred(),l=function(e,n,r){return function(i){n[e]=this,r[e]=arguments.length>1?nt.call(arguments):i,r===t?u.notifyWith(n,r):--s||u.resolveWith(n,r)}};if(a>1)for(t=Array(a),n=Array(a),r=Array(a);a>i;i++)o[i]&&st.isFunction(o[i].promise)?o[i].promise().done(l(i,r,o)).fail(u.reject).progress(l(i,n,t)):--s;return s||u.resolveWith(r,o),u.promise()}}),st.support=function(){var n,r,i,o,a,s,u,l,c,f,p=V.createElement("div");if(p.setAttribute("className","t"),p.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",r=p.getElementsByTagName("*"),i=p.getElementsByTagName("a")[0],!r||!i||!r.length)return{};o=V.createElement("select"),a=o.appendChild(V.createElement("option")),s=p.getElementsByTagName("input")[0],i.style.cssText="top:1px;float:left;opacity:.5",n={getSetAttribute:"t"!==p.className,leadingWhitespace:3===p.firstChild.nodeType,tbody:!p.getElementsByTagName("tbody").length,htmlSerialize:!!p.getElementsByTagName("link").length,style:/top/.test(i.getAttribute("style")),hrefNormalized:"/a"===i.getAttribute("href"),opacity:/^0.5/.test(i.style.opacity),cssFloat:!!i.style.cssFloat,checkOn:!!s.value,optSelected:a.selected,enctype:!!V.createElement("form").enctype,html5Clone:"<:nav></:nav>"!==V.createElement("nav").cloneNode(!0).outerHTML,boxModel:"CSS1Compat"===V.compatMode,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},s.checked=!0,n.noCloneChecked=s.cloneNode(!0).checked,o.disabled=!0,n.optDisabled=!a.disabled;try{delete p.test}catch(d){n.deleteExpando=!1}s=V.createElement("input"),s.setAttribute("value",""),n.input=""===s.getAttribute("value"),s.value="t",s.setAttribute("type","radio"),n.radioValue="t"===s.value,s.setAttribute("checked","t"),s.setAttribute("name","t"),u=V.createDocumentFragment(),u.appendChild(s),n.appendChecked=s.checked,n.checkClone=u.cloneNode(!0).cloneNode(!0).lastChild.checked,p.attachEvent&&(p.attachEvent("onclick",function(){n.noCloneEvent=!1}),p.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})p.setAttribute(l="on"+f,"t"),n[f+"Bubbles"]=l in e||p.attributes[l].expando===!1;return p.style.backgroundClip="content-box",p.cloneNode(!0).style.backgroundClip="",n.clearCloneStyle="content-box"===p.style.backgroundClip,st(function(){var r,i,o,a="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",s=V.getElementsByTagName("body")[0];s&&(r=V.createElement("div"),r.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",s.appendChild(r).appendChild(p),p.innerHTML="<table><tr><td></td><td>t</td></tr></table>",o=p.getElementsByTagName("td"),o[0].style.cssText="padding:0;margin:0;border:0;display:none",c=0===o[0].offsetHeight,o[0].style.display="",o[1].style.display="none",n.reliableHiddenOffsets=c&&0===o[0].offsetHeight,p.innerHTML="",p.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",n.boxSizing=4===p.offsetWidth,n.doesNotIncludeMarginInBodyOffset=1!==s.offsetTop,e.getComputedStyle&&(n.pixelPosition="1%"!==(e.getComputedStyle(p,null)||{}).top,n.boxSizingReliable="4px"===(e.getComputedStyle(p,null)||{width:"4px"}).width,i=p.appendChild(V.createElement("div")),i.style.cssText=p.style.cssText=a,i.style.marginRight=i.style.width="0",p.style.width="1px",n.reliableMarginRight=!parseFloat((e.getComputedStyle(i,null)||{}).marginRight)),p.style.zoom!==t&&(p.innerHTML="",p.style.cssText=a+"width:1px;padding:1px;display:inline;zoom:1",n.inlineBlockNeedsLayout=3===p.offsetWidth,p.style.display="block",p.innerHTML="<div></div>",p.firstChild.style.width="5px",n.shrinkWrapBlocks=3!==p.offsetWidth,s.style.zoom=1),s.removeChild(r),r=p=o=i=null)}),r=o=u=a=i=s=null,n}();var wt=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,Nt=/([A-Z])/g;st.extend({cache:{},expando:"jQuery"+(Z+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(e){return e=e.nodeType?st.cache[e[st.expando]]:e[st.expando],!!e&&!s(e)},data:function(e,t,n){return i(e,t,n,!1)},removeData:function(e,t){return o(e,t,!1)},_data:function(e,t,n){return i(e,t,n,!0)},_removeData:function(e,t){return o(e,t,!0)},acceptData:function(e){var t=e.nodeName&&st.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),st.fn.extend({data:function(e,n){var r,i,o=this[0],s=0,u=null;if(e===t){if(this.length&&(u=st.data(o),1===o.nodeType&&!st._data(o,"parsedAttrs"))){for(r=o.attributes;r.length>s;s++)i=r[s].name,i.indexOf("data-")||(i=st.camelCase(i.substring(5)),a(o,i,u[i]));st._data(o,"parsedAttrs",!0)}return u}return"object"==typeof e?this.each(function(){st.data(this,e)}):st.access(this,function(n){return n===t?o?a(o,e,st.data(o,e)):null:(this.each(function(){st.data(this,e,n)}),t)},null,n,arguments.length>1,null,!0)},removeData:function(e){return this.each(function(){st.removeData(this,e)})}}),st.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=st._data(e,n),r&&(!i||st.isArray(r)?i=st._data(e,n,st.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=st.queue(e,t),r=n.length,i=n.shift(),o=st._queueHooks(e,t),a=function(){st.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),o.cur=i,i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return st._data(e,n)||st._data(e,n,{empty:st.Callbacks("once memory").add(function(){st._removeData(e,t+"queue"),st._removeData(e,n)})})}}),st.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?st.queue(this[0],e):n===t?this:this.each(function(){var t=st.queue(this,e,n);st._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&st.dequeue(this,e)})},dequeue:function(e){return this.each(function(){st.dequeue(this,e)})},delay:function(e,t){return e=st.fx?st.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=st.Deferred(),a=this,s=this.length,u=function(){--i||o.resolveWith(a,[a])};for("string"!=typeof e&&(n=e,e=t),e=e||"fx";s--;)r=st._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(u));return u(),o.promise(n)}});var Ct,kt,Et=/[\t\r\n]/g,St=/\r/g,At=/^(?:input|select|textarea|button|object)$/i,jt=/^(?:a|area)$/i,Dt=/^(?:checked|selected|autofocus|autoplay|async|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped)$/i,Lt=/^(?:checked|selected)$/i,Ht=st.support.getSetAttribute,Mt=st.support.input;st.fn.extend({attr:function(e,t){return st.access(this,st.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){st.removeAttr(this,e)})},prop:function(e,t){return st.access(this,st.prop,e,t,arguments.length>1)},removeProp:function(e){return e=st.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,u="string"==typeof e&&e;if(st.isFunction(e))return this.each(function(t){st(this).addClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(lt)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(Et," "):" ")){for(o=0;i=t[o++];)0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=st.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,u=0===arguments.length||"string"==typeof e&&e;if(st.isFunction(e))return this.each(function(t){st(this).removeClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(lt)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(Et," "):"")){for(o=0;i=t[o++];)for(;r.indexOf(" "+i+" ")>=0;)r=r.replace(" "+i+" "," ");n.className=e?st.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e,r="boolean"==typeof t;return st.isFunction(e)?this.each(function(n){st(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n)for(var i,o=0,a=st(this),s=t,u=e.match(lt)||[];i=u[o++];)s=r?s:!a.hasClass(i),a[s?"addClass":"removeClass"](i);else("undefined"===n||"boolean"===n)&&(this.className&&st._data(this,"__className__",this.className),this.className=this.className||e===!1?"":st._data(this,"__className__")||"")})},hasClass:function(e){for(var t=" "+e+" ",n=0,r=this.length;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(Et," ").indexOf(t)>=0)return!0;return!1},val:function(e){var n,r,i,o=this[0];{if(arguments.length)return i=st.isFunction(e),this.each(function(r){var o,a=st(this);1===this.nodeType&&(o=i?e.call(this,r,a.val()):e,null==o?o="":"number"==typeof o?o+="":st.isArray(o)&&(o=st.map(o,function(e){return null==e?"":e+""})),n=st.valHooks[this.type]||st.valHooks[this.nodeName.toLowerCase()],n&&"set"in n&&n.set(this,o,"value")!==t||(this.value=o))});if(o)return n=st.valHooks[o.type]||st.valHooks[o.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(o,"value"))!==t?r:(r=o.value,"string"==typeof r?r.replace(St,""):null==r?"":r)}}}),st.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){for(var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,a=o?null:[],s=o?i+1:r.length,u=0>i?s:o?i:0;s>u;u++)if(n=r[u],!(!n.selected&&u!==i||(st.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&st.nodeName(n.parentNode,"optgroup"))){if(t=st(n).val(),o)return t;a.push(t)}return a},set:function(e,t){var n=st.makeArray(t);return st(e).find("option").each(function(){this.selected=st.inArray(st(this).val(),n)>=0}),n.length||(e.selectedIndex=-1),n}}},attr:function(e,n,r){var i,o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return e.getAttribute===t?st.prop(e,n,r):(a=1!==s||!st.isXMLDoc(e),a&&(n=n.toLowerCase(),o=st.attrHooks[n]||(Dt.test(n)?kt:Ct)),r===t?o&&a&&"get"in o&&null!==(i=o.get(e,n))?i:(e.getAttribute!==t&&(i=e.getAttribute(n)),null==i?t:i):null!==r?o&&a&&"set"in o&&(i=o.set(e,r,n))!==t?i:(e.setAttribute(n,r+""),r):(st.removeAttr(e,n),t))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(lt);if(o&&1===e.nodeType)for(;n=o[i++];)r=st.propFix[n]||n,Dt.test(n)?!Ht&&Lt.test(n)?e[st.camelCase("default-"+n)]=e[r]=!1:e[r]=!1:st.attr(e,n,""),e.removeAttribute(Ht?n:r)},attrHooks:{type:{set:function(e,t){if(!st.support.radioValue&&"radio"===t&&st.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(e,n,r){var i,o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return a=1!==s||!st.isXMLDoc(e),a&&(n=st.propFix[n]||n,o=st.propHooks[n]),r!==t?o&&"set"in o&&(i=o.set(e,r,n))!==t?i:e[n]=r:o&&"get"in o&&null!==(i=o.get(e,n))?i:e[n]},propHooks:{tabIndex:{get:function(e){var n=e.getAttributeNode("tabindex");return n&&n.specified?parseInt(n.value,10):At.test(e.nodeName)||jt.test(e.nodeName)&&e.href?0:t}}}}),kt={get:function(e,n){var r=st.prop(e,n),i="boolean"==typeof r&&e.getAttribute(n),o="boolean"==typeof r?Mt&&Ht?null!=i:Lt.test(n)?e[st.camelCase("default-"+n)]:!!i:e.getAttributeNode(n);return o&&o.value!==!1?n.toLowerCase():t},set:function(e,t,n){return t===!1?st.removeAttr(e,n):Mt&&Ht||!Lt.test(n)?e.setAttribute(!Ht&&st.propFix[n]||n,n):e[st.camelCase("default-"+n)]=e[n]=!0,n}},Mt&&Ht||(st.attrHooks.value={get:function(e,n){var r=e.getAttributeNode(n);return st.nodeName(e,"input")?e.defaultValue:r&&r.specified?r.value:t
-},set:function(e,n,r){return st.nodeName(e,"input")?(e.defaultValue=n,t):Ct&&Ct.set(e,n,r)}}),Ht||(Ct=st.valHooks.button={get:function(e,n){var r=e.getAttributeNode(n);return r&&("id"===n||"name"===n||"coords"===n?""!==r.value:r.specified)?r.value:t},set:function(e,n,r){var i=e.getAttributeNode(r);return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}},st.attrHooks.contenteditable={get:Ct.get,set:function(e,t,n){Ct.set(e,""===t?!1:t,n)}},st.each(["width","height"],function(e,n){st.attrHooks[n]=st.extend(st.attrHooks[n],{set:function(e,r){return""===r?(e.setAttribute(n,"auto"),r):t}})})),st.support.hrefNormalized||(st.each(["href","src","width","height"],function(e,n){st.attrHooks[n]=st.extend(st.attrHooks[n],{get:function(e){var r=e.getAttribute(n,2);return null==r?t:r}})}),st.each(["href","src"],function(e,t){st.propHooks[t]={get:function(e){return e.getAttribute(t,4)}}})),st.support.style||(st.attrHooks.style={get:function(e){return e.style.cssText||t},set:function(e,t){return e.style.cssText=t+""}}),st.support.optSelected||(st.propHooks.selected=st.extend(st.propHooks.selected,{get:function(e){var t=e.parentNode;return t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex),null}})),st.support.enctype||(st.propFix.enctype="encoding"),st.support.checkOn||st.each(["radio","checkbox"],function(){st.valHooks[this]={get:function(e){return null===e.getAttribute("value")?"on":e.value}}}),st.each(["radio","checkbox"],function(){st.valHooks[this]=st.extend(st.valHooks[this],{set:function(e,n){return st.isArray(n)?e.checked=st.inArray(st(e).val(),n)>=0:t}})});var qt=/^(?:input|select|textarea)$/i,_t=/^key/,Ft=/^(?:mouse|contextmenu)|click/,Ot=/^(?:focusinfocus|focusoutblur)$/,Bt=/^([^.]*)(?:\.(.+)|)$/;st.event={global:{},add:function(e,n,r,i,o){var a,s,u,l,c,f,p,d,h,g,m,y=3!==e.nodeType&&8!==e.nodeType&&st._data(e);if(y){for(r.handler&&(a=r,r=a.handler,o=a.selector),r.guid||(r.guid=st.guid++),(l=y.events)||(l=y.events={}),(s=y.handle)||(s=y.handle=function(e){return st===t||e&&st.event.triggered===e.type?t:st.event.dispatch.apply(s.elem,arguments)},s.elem=e),n=(n||"").match(lt)||[""],c=n.length;c--;)u=Bt.exec(n[c])||[],h=m=u[1],g=(u[2]||"").split(".").sort(),p=st.event.special[h]||{},h=(o?p.delegateType:p.bindType)||h,p=st.event.special[h]||{},f=st.extend({type:h,origType:m,data:i,handler:r,guid:r.guid,selector:o,needsContext:o&&st.expr.match.needsContext.test(o),namespace:g.join(".")},a),(d=l[h])||(d=l[h]=[],d.delegateCount=0,p.setup&&p.setup.call(e,i,g,s)!==!1||(e.addEventListener?e.addEventListener(h,s,!1):e.attachEvent&&e.attachEvent("on"+h,s))),p.add&&(p.add.call(e,f),f.handler.guid||(f.handler.guid=r.guid)),o?d.splice(d.delegateCount++,0,f):d.push(f),st.event.global[h]=!0;e=null}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,m=st.hasData(e)&&st._data(e);if(m&&(u=m.events)){for(t=(t||"").match(lt)||[""],l=t.length;l--;)if(s=Bt.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){for(f=st.event.special[d]||{},d=(r?f.delegateType:f.bindType)||d,p=u[d]||[],s=s[2]&&RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&f.teardown.call(e,h,m.handle)!==!1||st.removeEvent(e,d,m.handle),delete u[d])}else for(d in u)st.event.remove(e,d+t[l],n,r,!0);st.isEmptyObject(u)&&(delete m.handle,st._removeData(e,"events"))}},trigger:function(n,r,i,o){var a,s,u,l,c,f,p,d=[i||V],h=n.type||n,g=n.namespace?n.namespace.split("."):[];if(s=u=i=i||V,3!==i.nodeType&&8!==i.nodeType&&!Ot.test(h+st.event.triggered)&&(h.indexOf(".")>=0&&(g=h.split("."),h=g.shift(),g.sort()),c=0>h.indexOf(":")&&"on"+h,n=n[st.expando]?n:new st.Event(h,"object"==typeof n&&n),n.isTrigger=!0,n.namespace=g.join("."),n.namespace_re=n.namespace?RegExp("(^|\\.)"+g.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,n.result=t,n.target||(n.target=i),r=null==r?[n]:st.makeArray(r,[n]),p=st.event.special[h]||{},o||!p.trigger||p.trigger.apply(i,r)!==!1)){if(!o&&!p.noBubble&&!st.isWindow(i)){for(l=p.delegateType||h,Ot.test(l+h)||(s=s.parentNode);s;s=s.parentNode)d.push(s),u=s;u===(i.ownerDocument||V)&&d.push(u.defaultView||u.parentWindow||e)}for(a=0;(s=d[a++])&&!n.isPropagationStopped();)n.type=a>1?l:p.bindType||h,f=(st._data(s,"events")||{})[n.type]&&st._data(s,"handle"),f&&f.apply(s,r),f=c&&s[c],f&&st.acceptData(s)&&f.apply&&f.apply(s,r)===!1&&n.preventDefault();if(n.type=h,!(o||n.isDefaultPrevented()||p._default&&p._default.apply(i.ownerDocument,r)!==!1||"click"===h&&st.nodeName(i,"a")||!st.acceptData(i)||!c||!i[h]||st.isWindow(i))){u=i[c],u&&(i[c]=null),st.event.triggered=h;try{i[h]()}catch(m){}st.event.triggered=t,u&&(i[c]=u)}return n.result}},dispatch:function(e){e=st.event.fix(e);var n,r,i,o,a,s=[],u=nt.call(arguments),l=(st._data(this,"events")||{})[e.type]||[],c=st.event.special[e.type]||{};if(u[0]=e,e.delegateTarget=this,!c.preDispatch||c.preDispatch.call(this,e)!==!1){for(s=st.event.handlers.call(this,e,l),n=0;(o=s[n++])&&!e.isPropagationStopped();)for(e.currentTarget=o.elem,r=0;(a=o.handlers[r++])&&!e.isImmediatePropagationStopped();)(!e.namespace_re||e.namespace_re.test(a.namespace))&&(e.handleObj=a,e.data=a.data,i=((st.event.special[a.origType]||{}).handle||a.handler).apply(o.elem,u),i!==t&&(e.result=i)===!1&&(e.preventDefault(),e.stopPropagation()));return c.postDispatch&&c.postDispatch.call(this,e),e.result}},handlers:function(e,n){var r,i,o,a,s=[],u=n.delegateCount,l=e.target;if(u&&l.nodeType&&(!e.button||"click"!==e.type))for(;l!=this;l=l.parentNode||this)if(l.disabled!==!0||"click"!==e.type){for(i=[],r=0;u>r;r++)a=n[r],o=a.selector+" ",i[o]===t&&(i[o]=a.needsContext?st(o,this).index(l)>=0:st.find(o,this,null,[l]).length),i[o]&&i.push(a);i.length&&s.push({elem:l,handlers:i})}return n.length>u&&s.push({elem:this,handlers:n.slice(u)}),s},fix:function(e){if(e[st.expando])return e;var t,n,r=e,i=st.event.fixHooks[e.type]||{},o=i.props?this.props.concat(i.props):this.props;for(e=new st.Event(r),t=o.length;t--;)n=o[t],e[n]=r[n];return e.target||(e.target=r.srcElement||V),3===e.target.nodeType&&(e.target=e.target.parentNode),e.metaKey=!!e.metaKey,i.filter?i.filter(e,r):e},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,n){var r,i,o,a=n.button,s=n.fromElement;return null==e.pageX&&null!=n.clientX&&(r=e.target.ownerDocument||V,i=r.documentElement,o=r.body,e.pageX=n.clientX+(i&&i.scrollLeft||o&&o.scrollLeft||0)-(i&&i.clientLeft||o&&o.clientLeft||0),e.pageY=n.clientY+(i&&i.scrollTop||o&&o.scrollTop||0)-(i&&i.clientTop||o&&o.clientTop||0)),!e.relatedTarget&&s&&(e.relatedTarget=s===e.target?n.toElement:s),e.which||a===t||(e.which=1&a?1:2&a?3:4&a?2:0),e}},special:{load:{noBubble:!0},click:{trigger:function(){return st.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):t}},focus:{trigger:function(){if(this!==V.activeElement&&this.focus)try{return this.focus(),!1}catch(e){}},delegateType:"focusin"},blur:{trigger:function(){return this===V.activeElement&&this.blur?(this.blur(),!1):t},delegateType:"focusout"},beforeunload:{postDispatch:function(e){e.result!==t&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=st.extend(new st.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?st.event.trigger(i,null,t):st.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},st.removeEvent=V.removeEventListener?function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)}:function(e,n,r){var i="on"+n;e.detachEvent&&(e[i]===t&&(e[i]=null),e.detachEvent(i,r))},st.Event=function(e,n){return this instanceof st.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.returnValue===!1||e.getPreventDefault&&e.getPreventDefault()?u:l):this.type=e,n&&st.extend(this,n),this.timeStamp=e&&e.timeStamp||st.now(),this[st.expando]=!0,t):new st.Event(e,n)},st.Event.prototype={isDefaultPrevented:l,isPropagationStopped:l,isImmediatePropagationStopped:l,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=u,e&&(e.preventDefault?e.preventDefault():e.returnValue=!1)},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=u,e&&(e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=u,this.stopPropagation()}},st.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){st.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;return(!i||i!==r&&!st.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),st.support.submitBubbles||(st.event.special.submit={setup:function(){return st.nodeName(this,"form")?!1:(st.event.add(this,"click._submit keypress._submit",function(e){var n=e.target,r=st.nodeName(n,"input")||st.nodeName(n,"button")?n.form:t;r&&!st._data(r,"submitBubbles")&&(st.event.add(r,"submit._submit",function(e){e._submit_bubble=!0}),st._data(r,"submitBubbles",!0))}),t)},postDispatch:function(e){e._submit_bubble&&(delete e._submit_bubble,this.parentNode&&!e.isTrigger&&st.event.simulate("submit",this.parentNode,e,!0))},teardown:function(){return st.nodeName(this,"form")?!1:(st.event.remove(this,"._submit"),t)}}),st.support.changeBubbles||(st.event.special.change={setup:function(){return qt.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(st.event.add(this,"propertychange._change",function(e){"checked"===e.originalEvent.propertyName&&(this._just_changed=!0)}),st.event.add(this,"click._change",function(e){this._just_changed&&!e.isTrigger&&(this._just_changed=!1),st.event.simulate("change",this,e,!0)})),!1):(st.event.add(this,"beforeactivate._change",function(e){var t=e.target;qt.test(t.nodeName)&&!st._data(t,"changeBubbles")&&(st.event.add(t,"change._change",function(e){!this.parentNode||e.isSimulated||e.isTrigger||st.event.simulate("change",this.parentNode,e,!0)}),st._data(t,"changeBubbles",!0))}),t)},handle:function(e){var n=e.target;return this!==n||e.isSimulated||e.isTrigger||"radio"!==n.type&&"checkbox"!==n.type?e.handleObj.handler.apply(this,arguments):t},teardown:function(){return st.event.remove(this,"._change"),!qt.test(this.nodeName)}}),st.support.focusinBubbles||st.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){st.event.simulate(t,e.target,st.event.fix(e),!0)};st.event.special[t]={setup:function(){0===n++&&V.addEventListener(e,r,!0)},teardown:function(){0===--n&&V.removeEventListener(e,r,!0)}}}),st.fn.extend({on:function(e,n,r,i,o){var a,s;if("object"==typeof e){"string"!=typeof n&&(r=r||n,n=t);for(s in e)this.on(s,n,r,e[s],o);return this}if(null==r&&null==i?(i=n,r=n=t):null==i&&("string"==typeof n?(i=r,r=t):(i=r,r=n,n=t)),i===!1)i=l;else if(!i)return this;return 1===o&&(a=i,i=function(e){return st().off(e),a.apply(this,arguments)},i.guid=a.guid||(a.guid=st.guid++)),this.each(function(){st.event.add(this,e,i,r,n)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,n,r){var i,o;if(e&&e.preventDefault&&e.handleObj)return i=e.handleObj,st(e.delegateTarget).off(i.namespace?i.origType+"."+i.namespace:i.origType,i.selector,i.handler),this;if("object"==typeof e){for(o in e)this.off(o,n,e[o]);return this}return(n===!1||"function"==typeof n)&&(r=n,n=t),r===!1&&(r=l),this.each(function(){st.event.remove(this,e,r,n)})},bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},trigger:function(e,t){return this.each(function(){st.event.trigger(e,t,this)})},triggerHandler:function(e,n){var r=this[0];return r?st.event.trigger(e,n,r,!0):t},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),st.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(e,t){st.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)},_t.test(t)&&(st.event.fixHooks[t]=st.event.keyHooks),Ft.test(t)&&(st.event.fixHooks[t]=st.event.mouseHooks)}),function(e,t){function n(e){return ht.test(e+"")}function r(){var e,t=[];return e=function(n,r){return t.push(n+=" ")>C.cacheLength&&delete e[t.shift()],e[n]=r}}function i(e){return e[P]=!0,e}function o(e){var t=L.createElement("div");try{return e(t)}catch(n){return!1}finally{t=null}}function a(e,t,n,r){var i,o,a,s,u,l,c,d,h,g;if((t?t.ownerDocument||t:R)!==L&&D(t),t=t||L,n=n||[],!e||"string"!=typeof e)return n;if(1!==(s=t.nodeType)&&9!==s)return[];if(!M&&!r){if(i=gt.exec(e))if(a=i[1]){if(9===s){if(o=t.getElementById(a),!o||!o.parentNode)return n;if(o.id===a)return n.push(o),n}else if(t.ownerDocument&&(o=t.ownerDocument.getElementById(a))&&O(t,o)&&o.id===a)return n.push(o),n}else{if(i[2])return Q.apply(n,K.call(t.getElementsByTagName(e),0)),n;if((a=i[3])&&W.getByClassName&&t.getElementsByClassName)return Q.apply(n,K.call(t.getElementsByClassName(a),0)),n}if(W.qsa&&!q.test(e)){if(c=!0,d=P,h=t,g=9===s&&e,1===s&&"object"!==t.nodeName.toLowerCase()){for(l=f(e),(c=t.getAttribute("id"))?d=c.replace(vt,"\\$&"):t.setAttribute("id",d),d="[id='"+d+"'] ",u=l.length;u--;)l[u]=d+p(l[u]);h=dt.test(e)&&t.parentNode||t,g=l.join(",")}if(g)try{return Q.apply(n,K.call(h.querySelectorAll(g),0)),n}catch(m){}finally{c||t.removeAttribute("id")}}}return x(e.replace(at,"$1"),t,n,r)}function s(e,t){for(var n=e&&t&&e.nextSibling;n;n=n.nextSibling)if(n===t)return-1;return e?1:-1}function u(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function l(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function c(e){return i(function(t){return t=+t,i(function(n,r){for(var i,o=e([],n.length,t),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function f(e,t){var n,r,i,o,s,u,l,c=X[e+" "];if(c)return t?0:c.slice(0);for(s=e,u=[],l=C.preFilter;s;){(!n||(r=ut.exec(s)))&&(r&&(s=s.slice(r[0].length)||s),u.push(i=[])),n=!1,(r=lt.exec(s))&&(n=r.shift(),i.push({value:n,type:r[0].replace(at," ")}),s=s.slice(n.length));for(o in C.filter)!(r=pt[o].exec(s))||l[o]&&!(r=l[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),s=s.slice(n.length));if(!n)break}return t?s.length:s?a.error(e):X(e,u).slice(0)}function p(e){for(var t=0,n=e.length,r="";n>t;t++)r+=e[t].value;return r}function d(e,t,n){var r=t.dir,i=n&&"parentNode"===t.dir,o=I++;return t.first?function(t,n,o){for(;t=t[r];)if(1===t.nodeType||i)return e(t,n,o)}:function(t,n,a){var s,u,l,c=$+" "+o;if(a){for(;t=t[r];)if((1===t.nodeType||i)&&e(t,n,a))return!0}else for(;t=t[r];)if(1===t.nodeType||i)if(l=t[P]||(t[P]={}),(u=l[r])&&u[0]===c){if((s=u[1])===!0||s===N)return s===!0}else if(u=l[r]=[c],u[1]=e(t,n,a)||N,u[1]===!0)return!0}}function h(e){return e.length>1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function g(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;u>s;s++)(o=e[s])&&(!n||n(o,r,i))&&(a.push(o),l&&t.push(s));return a}function m(e,t,n,r,o,a){return r&&!r[P]&&(r=m(r)),o&&!o[P]&&(o=m(o,a)),i(function(i,a,s,u){var l,c,f,p=[],d=[],h=a.length,m=i||b(t||"*",s.nodeType?[s]:s,[]),y=!e||!i&&t?m:g(m,p,e,s,u),v=n?o||(i?e:h||r)?[]:a:y;if(n&&n(y,v,s,u),r)for(l=g(v,d),r(l,[],s,u),c=l.length;c--;)(f=l[c])&&(v[d[c]]=!(y[d[c]]=f));if(i){if(o||e){if(o){for(l=[],c=v.length;c--;)(f=v[c])&&l.push(y[c]=f);o(null,v=[],l,u)}for(c=v.length;c--;)(f=v[c])&&(l=o?Z.call(i,f):p[c])>-1&&(i[l]=!(a[l]=f))}}else v=g(v===a?v.splice(h,v.length):v),o?o(null,a,v,u):Q.apply(a,v)})}function y(e){for(var t,n,r,i=e.length,o=C.relative[e[0].type],a=o||C.relative[" "],s=o?1:0,u=d(function(e){return e===t},a,!0),l=d(function(e){return Z.call(t,e)>-1},a,!0),c=[function(e,n,r){return!o&&(r||n!==j)||((t=n).nodeType?u(e,n,r):l(e,n,r))}];i>s;s++)if(n=C.relative[e[s].type])c=[d(h(c),n)];else{if(n=C.filter[e[s].type].apply(null,e[s].matches),n[P]){for(r=++s;i>r&&!C.relative[e[r].type];r++);return m(s>1&&h(c),s>1&&p(e.slice(0,s-1)).replace(at,"$1"),n,r>s&&y(e.slice(s,r)),i>r&&y(e=e.slice(r)),i>r&&p(e))}c.push(n)}return h(c)}function v(e,t){var n=0,r=t.length>0,o=e.length>0,s=function(i,s,u,l,c){var f,p,d,h=[],m=0,y="0",v=i&&[],b=null!=c,x=j,T=i||o&&C.find.TAG("*",c&&s.parentNode||s),w=$+=null==x?1:Math.E;for(b&&(j=s!==L&&s,N=n);null!=(f=T[y]);y++){if(o&&f){for(p=0;d=e[p];p++)if(d(f,s,u)){l.push(f);break}b&&($=w,N=++n)}r&&((f=!d&&f)&&m--,i&&v.push(f))}if(m+=y,r&&y!==m){for(p=0;d=t[p];p++)d(v,h,s,u);if(i){if(m>0)for(;y--;)v[y]||h[y]||(h[y]=G.call(l));h=g(h)}Q.apply(l,h),b&&!i&&h.length>0&&m+t.length>1&&a.uniqueSort(l)}return b&&($=w,j=x),v};return r?i(s):s}function b(e,t,n){for(var r=0,i=t.length;i>r;r++)a(e,t[r],n);return n}function x(e,t,n,r){var i,o,a,s,u,l=f(e);if(!r&&1===l.length){if(o=l[0]=l[0].slice(0),o.length>2&&"ID"===(a=o[0]).type&&9===t.nodeType&&!M&&C.relative[o[1].type]){if(t=C.find.ID(a.matches[0].replace(xt,Tt),t)[0],!t)return n;e=e.slice(o.shift().value.length)}for(i=pt.needsContext.test(e)?-1:o.length-1;i>=0&&(a=o[i],!C.relative[s=a.type]);i--)if((u=C.find[s])&&(r=u(a.matches[0].replace(xt,Tt),dt.test(o[0].type)&&t.parentNode||t))){if(o.splice(i,1),e=r.length&&p(o),!e)return Q.apply(n,K.call(r,0)),n;break}}return S(e,l)(r,t,M,n,dt.test(e)),n}function T(){}var w,N,C,k,E,S,A,j,D,L,H,M,q,_,F,O,B,P="sizzle"+-new Date,R=e.document,W={},$=0,I=0,z=r(),X=r(),U=r(),V=typeof t,Y=1<<31,J=[],G=J.pop,Q=J.push,K=J.slice,Z=J.indexOf||function(e){for(var t=0,n=this.length;n>t;t++)if(this[t]===e)return t;return-1},et="[\\x20\\t\\r\\n\\f]",tt="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",nt=tt.replace("w","w#"),rt="([*^$|!~]?=)",it="\\["+et+"*("+tt+")"+et+"*(?:"+rt+et+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+nt+")|)|)"+et+"*\\]",ot=":("+tt+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+it.replace(3,8)+")*)|.*)\\)|)",at=RegExp("^"+et+"+|((?:^|[^\\\\])(?:\\\\.)*)"+et+"+$","g"),ut=RegExp("^"+et+"*,"+et+"*"),lt=RegExp("^"+et+"*([\\x20\\t\\r\\n\\f>+~])"+et+"*"),ct=RegExp(ot),ft=RegExp("^"+nt+"$"),pt={ID:RegExp("^#("+tt+")"),CLASS:RegExp("^\\.("+tt+")"),NAME:RegExp("^\\[name=['\"]?("+tt+")['\"]?\\]"),TAG:RegExp("^("+tt.replace("w","w*")+")"),ATTR:RegExp("^"+it),PSEUDO:RegExp("^"+ot),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+et+"*(even|odd|(([+-]|)(\\d*)n|)"+et+"*(?:([+-]|)"+et+"*(\\d+)|))"+et+"*\\)|)","i"),needsContext:RegExp("^"+et+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+et+"*((?:-\\d)?\\d*)"+et+"*\\)|)(?=[^-]|$)","i")},dt=/[\x20\t\r\n\f]*[+~]/,ht=/\{\s*\[native code\]\s*\}/,gt=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,mt=/^(?:input|select|textarea|button)$/i,yt=/^h\d$/i,vt=/'|\\/g,bt=/\=[\x20\t\r\n\f]*([^'"\]]*)[\x20\t\r\n\f]*\]/g,xt=/\\([\da-fA-F]{1,6}[\x20\t\r\n\f]?|.)/g,Tt=function(e,t){var n="0x"+t-65536;return n!==n?t:0>n?String.fromCharCode(n+65536):String.fromCharCode(55296|n>>10,56320|1023&n)};try{K.call(H.childNodes,0)[0].nodeType}catch(wt){K=function(e){for(var t,n=[];t=this[e];e++)n.push(t);return n}}E=a.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},D=a.setDocument=function(e){var r=e?e.ownerDocument||e:R;return r!==L&&9===r.nodeType&&r.documentElement?(L=r,H=r.documentElement,M=E(r),W.tagNameNoComments=o(function(e){return e.appendChild(r.createComment("")),!e.getElementsByTagName("*").length}),W.attributes=o(function(e){e.innerHTML="<select></select>";var t=typeof e.lastChild.getAttribute("multiple");return"boolean"!==t&&"string"!==t}),W.getByClassName=o(function(e){return e.innerHTML="<div class='hidden e'></div><div class='hidden'></div>",e.getElementsByClassName&&e.getElementsByClassName("e").length?(e.lastChild.className="e",2===e.getElementsByClassName("e").length):!1}),W.getByName=o(function(e){e.id=P+0,e.innerHTML="<a name='"+P+"'></a><div name='"+P+"'></div>",H.insertBefore(e,H.firstChild);var t=r.getElementsByName&&r.getElementsByName(P).length===2+r.getElementsByName(P+0).length;return W.getIdNotName=!r.getElementById(P),H.removeChild(e),t}),C.attrHandle=o(function(e){return e.innerHTML="<a href='#'></a>",e.firstChild&&typeof e.firstChild.getAttribute!==V&&"#"===e.firstChild.getAttribute("href")})?{}:{href:function(e){return e.getAttribute("href",2)},type:function(e){return e.getAttribute("type")}},W.getIdNotName?(C.find.ID=function(e,t){if(typeof t.getElementById!==V&&!M){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},C.filter.ID=function(e){var t=e.replace(xt,Tt);return function(e){return e.getAttribute("id")===t}}):(C.find.ID=function(e,n){if(typeof n.getElementById!==V&&!M){var r=n.getElementById(e);return r?r.id===e||typeof r.getAttributeNode!==V&&r.getAttributeNode("id").value===e?[r]:t:[]}},C.filter.ID=function(e){var t=e.replace(xt,Tt);return function(e){var n=typeof e.getAttributeNode!==V&&e.getAttributeNode("id");return n&&n.value===t}}),C.find.TAG=W.tagNameNoComments?function(e,n){return typeof n.getElementsByTagName!==V?n.getElementsByTagName(e):t}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[i];i++)1===n.nodeType&&r.push(n);return r}return o},C.find.NAME=W.getByName&&function(e,n){return typeof n.getElementsByName!==V?n.getElementsByName(name):t},C.find.CLASS=W.getByClassName&&function(e,n){return typeof n.getElementsByClassName===V||M?t:n.getElementsByClassName(e)},_=[],q=[":focus"],(W.qsa=n(r.querySelectorAll))&&(o(function(e){e.innerHTML="<select><option selected=''></option></select>",e.querySelectorAll("[selected]").length||q.push("\\["+et+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),e.querySelectorAll(":checked").length||q.push(":checked")}),o(function(e){e.innerHTML="<input type='hidden' i=''/>",e.querySelectorAll("[i^='']").length&&q.push("[*^$]="+et+"*(?:\"\"|'')"),e.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),q.push(",.*:")})),(W.matchesSelector=n(F=H.matchesSelector||H.mozMatchesSelector||H.webkitMatchesSelector||H.oMatchesSelector||H.msMatchesSelector))&&o(function(e){W.disconnectedMatch=F.call(e,"div"),F.call(e,"[s!='']:x"),_.push("!=",ot)}),q=RegExp(q.join("|")),_=RegExp(_.join("|")),O=n(H.contains)||H.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},B=H.compareDocumentPosition?function(e,t){var n;return e===t?(A=!0,0):(n=t.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(t))?1&n||e.parentNode&&11===e.parentNode.nodeType?e===r||O(R,e)?-1:t===r||O(R,t)?1:0:4&n?-1:1:e.compareDocumentPosition?-1:1}:function(e,t){var n,i=0,o=e.parentNode,a=t.parentNode,u=[e],l=[t];if(e===t)return A=!0,0;if(e.sourceIndex&&t.sourceIndex)return(~t.sourceIndex||Y)-(O(R,e)&&~e.sourceIndex||Y);if(!o||!a)return e===r?-1:t===r?1:o?-1:a?1:0;if(o===a)return s(e,t);for(n=e;n=n.parentNode;)u.unshift(n);for(n=t;n=n.parentNode;)l.unshift(n);for(;u[i]===l[i];)i++;return i?s(u[i],l[i]):u[i]===R?-1:l[i]===R?1:0},A=!1,[0,0].sort(B),W.detectDuplicates=A,L):L},a.matches=function(e,t){return a(e,null,null,t)},a.matchesSelector=function(e,t){if((e.ownerDocument||e)!==L&&D(e),t=t.replace(bt,"='$1']"),!(!W.matchesSelector||M||_&&_.test(t)||q.test(t)))try{var n=F.call(e,t);if(n||W.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(r){}return a(t,L,null,[e]).length>0},a.contains=function(e,t){return(e.ownerDocument||e)!==L&&D(e),O(e,t)},a.attr=function(e,t){var n;return(e.ownerDocument||e)!==L&&D(e),M||(t=t.toLowerCase()),(n=C.attrHandle[t])?n(e):M||W.attributes?e.getAttribute(t):((n=e.getAttributeNode(t))||e.getAttribute(t))&&e[t]===!0?t:n&&n.specified?n.value:null},a.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},a.uniqueSort=function(e){var t,n=[],r=1,i=0;if(A=!W.detectDuplicates,e.sort(B),A){for(;t=e[r];r++)t===e[r-1]&&(i=n.push(r));for(;i--;)e.splice(n[i],1)}return e},k=a.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=k(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=k(t);return n},C=a.selectors={cacheLength:50,createPseudo:i,match:pt,find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(xt,Tt),e[3]=(e[4]||e[5]||"").replace(xt,Tt),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||a.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&a.error(e[0]),e},PSEUDO:function(e){var t,n=!e[5]&&e[2];return pt.CHILD.test(e[0])?null:(e[4]?e[2]=e[4]:n&&ct.test(n)&&(t=f(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){return"*"===e?function(){return!0}:(e=e.replace(xt,Tt).toLowerCase(),function(t){return t.nodeName&&t.nodeName.toLowerCase()===e})},CLASS:function(e){var t=z[e+" "];return t||(t=RegExp("(^|"+et+")"+e+"("+et+"|$)"))&&z(e,function(e){return t.test(e.className||typeof e.getAttribute!==V&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=a.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.substr(i.length-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.substr(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",m=t.parentNode,y=s&&t.nodeName.toLowerCase(),v=!u&&!s;if(m){if(o){for(;g;){for(f=t;f=f[g];)if(s?f.nodeName.toLowerCase()===y:1===f.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?m.firstChild:m.lastChild],a&&v){for(c=m[P]||(m[P]={}),l=c[e]||[],d=l[0]===$&&l[1],p=l[0]===$&&l[2],f=d&&m.childNodes[d];f=++d&&f&&f[g]||(p=d=0)||h.pop();)if(1===f.nodeType&&++p&&f===t){c[e]=[$,d,p];break}}else if(v&&(l=(t[P]||(t[P]={}))[e])&&l[0]===$)p=l[1];else for(;(f=++d&&f&&f[g]||(p=d=0)||h.pop())&&((s?f.nodeName.toLowerCase()!==y:1!==f.nodeType)||!++p||(v&&((f[P]||(f[P]={}))[e]=[$,p]),f!==t)););return p-=i,p===r||0===p%r&&p/r>=0}}},PSEUDO:function(e,t){var n,r=C.pseudos[e]||C.setFilters[e.toLowerCase()]||a.error("unsupported pseudo: "+e);return r[P]?r(t):r.length>1?(n=[e,e,"",t],C.setFilters.hasOwnProperty(e.toLowerCase())?i(function(e,n){for(var i,o=r(e,t),a=o.length;a--;)i=Z.call(e,o[a]),e[i]=!(n[i]=o[a])}):function(e){return r(e,0,n)}):r}},pseudos:{not:i(function(e){var t=[],n=[],r=S(e.replace(at,"$1"));return r[P]?i(function(e,t,n,i){for(var o,a=r(e,null,i,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:i(function(e){return function(t){return a(e,t).length>0}}),contains:i(function(e){return function(t){return(t.textContent||t.innerText||k(t)).indexOf(e)>-1}}),lang:i(function(e){return ft.test(e||"")||a.error("unsupported lang: "+e),e=e.replace(xt,Tt).toLowerCase(),function(t){var n;do if(n=M?t.getAttribute("xml:lang")||t.getAttribute("lang"):t.lang)return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===H},focus:function(e){return e===L.activeElement&&(!L.hasFocus||L.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!C.pseudos.empty(e)},header:function(e){return yt.test(e.nodeName)},input:function(e){return mt.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:c(function(){return[0]}),last:c(function(e,t){return[t-1]}),eq:c(function(e,t,n){return[0>n?n+t:n]}),even:c(function(e,t){for(var n=0;t>n;n+=2)e.push(n);return e}),odd:c(function(e,t){for(var n=1;t>n;n+=2)e.push(n);return e}),lt:c(function(e,t,n){for(var r=0>n?n+t:n;--r>=0;)e.push(r);return e}),gt:c(function(e,t,n){for(var r=0>n?n+t:n;t>++r;)e.push(r);return e})}};for(w in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})C.pseudos[w]=u(w);for(w in{submit:!0,reset:!0})C.pseudos[w]=l(w);S=a.compile=function(e,t){var n,r=[],i=[],o=U[e+" "];if(!o){for(t||(t=f(e)),n=t.length;n--;)o=y(t[n]),o[P]?r.push(o):i.push(o);o=U(e,v(i,r))}return o},C.pseudos.nth=C.pseudos.eq,C.filters=T.prototype=C.pseudos,C.setFilters=new T,D(),a.attr=st.attr,st.find=a,st.expr=a.selectors,st.expr[":"]=st.expr.pseudos,st.unique=a.uniqueSort,st.text=a.getText,st.isXMLDoc=a.isXML,st.contains=a.contains}(e);var Pt=/Until$/,Rt=/^(?:parents|prev(?:Until|All))/,Wt=/^.[^:#\[\.,]*$/,$t=st.expr.match.needsContext,It={children:!0,contents:!0,next:!0,prev:!0};st.fn.extend({find:function(e){var t,n,r;if("string"!=typeof e)return r=this,this.pushStack(st(e).filter(function(){for(t=0;r.length>t;t++)if(st.contains(r[t],this))return!0}));for(n=[],t=0;this.length>t;t++)st.find(e,this[t],n);return n=this.pushStack(st.unique(n)),n.selector=(this.selector?this.selector+" ":"")+e,n},has:function(e){var t,n=st(e,this),r=n.length;return this.filter(function(){for(t=0;r>t;t++)if(st.contains(this,n[t]))return!0})},not:function(e){return this.pushStack(f(this,e,!1))},filter:function(e){return this.pushStack(f(this,e,!0))},is:function(e){return!!e&&("string"==typeof e?$t.test(e)?st(e,this.context).index(this[0])>=0:st.filter(e,this).length>0:this.filter(e).length>0)},closest:function(e,t){for(var n,r=0,i=this.length,o=[],a=$t.test(e)||"string"!=typeof e?st(e,t||this.context):0;i>r;r++)for(n=this[r];n&&n.ownerDocument&&n!==t&&11!==n.nodeType;){if(a?a.index(n)>-1:st.find.matchesSelector(n,e)){o.push(n);break}n=n.parentNode}return this.pushStack(o.length>1?st.unique(o):o)},index:function(e){return e?"string"==typeof e?st.inArray(this[0],st(e)):st.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?st(e,t):st.makeArray(e&&e.nodeType?[e]:e),r=st.merge(this.get(),n);return this.pushStack(st.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),st.fn.andSelf=st.fn.addBack,st.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return st.dir(e,"parentNode")},parentsUntil:function(e,t,n){return st.dir(e,"parentNode",n)},next:function(e){return c(e,"nextSibling")},prev:function(e){return c(e,"previousSibling")
-},nextAll:function(e){return st.dir(e,"nextSibling")},prevAll:function(e){return st.dir(e,"previousSibling")},nextUntil:function(e,t,n){return st.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return st.dir(e,"previousSibling",n)},siblings:function(e){return st.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return st.sibling(e.firstChild)},contents:function(e){return st.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:st.merge([],e.childNodes)}},function(e,t){st.fn[e]=function(n,r){var i=st.map(this,t,n);return Pt.test(e)||(r=n),r&&"string"==typeof r&&(i=st.filter(r,i)),i=this.length>1&&!It[e]?st.unique(i):i,this.length>1&&Rt.test(e)&&(i=i.reverse()),this.pushStack(i)}}),st.extend({filter:function(e,t,n){return n&&(e=":not("+e+")"),1===t.length?st.find.matchesSelector(t[0],e)?[t[0]]:[]:st.find.matches(e,t)},dir:function(e,n,r){for(var i=[],o=e[n];o&&9!==o.nodeType&&(r===t||1!==o.nodeType||!st(o).is(r));)1===o.nodeType&&i.push(o),o=o[n];return i},sibling:function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});var zt="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",Xt=/ jQuery\d+="(?:null|\d+)"/g,Ut=RegExp("<(?:"+zt+")[\\s/>]","i"),Vt=/^\s+/,Yt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,Jt=/<([\w:]+)/,Gt=/<tbody/i,Qt=/<|&#?\w+;/,Kt=/<(?:script|style|link)/i,Zt=/^(?:checkbox|radio)$/i,en=/checked\s*(?:[^=]|=\s*.checked.)/i,tn=/^$|\/(?:java|ecma)script/i,nn=/^true\/(.*)/,rn=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,on={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],area:[1,"<map>","</map>"],param:[1,"<object>","</object>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:st.support.htmlSerialize?[0,"",""]:[1,"X<div>","</div>"]},an=p(V),sn=an.appendChild(V.createElement("div"));on.optgroup=on.option,on.tbody=on.tfoot=on.colgroup=on.caption=on.thead,on.th=on.td,st.fn.extend({text:function(e){return st.access(this,function(e){return e===t?st.text(this):this.empty().append((this[0]&&this[0].ownerDocument||V).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(st.isFunction(e))return this.each(function(t){st(this).wrapAll(e.call(this,t))});if(this[0]){var t=st(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){for(var e=this;e.firstChild&&1===e.firstChild.nodeType;)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return st.isFunction(e)?this.each(function(t){st(this).wrapInner(e.call(this,t))}):this.each(function(){var t=st(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=st.isFunction(e);return this.each(function(n){st(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){st.nodeName(this,"body")||st(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.insertBefore(e,this.firstChild)})},before:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){for(var n,r=0;null!=(n=this[r]);r++)(!e||st.filter(e,[n]).length>0)&&(t||1!==n.nodeType||st.cleanData(b(n)),n.parentNode&&(t&&st.contains(n.ownerDocument,n)&&m(b(n,"script")),n.parentNode.removeChild(n)));return this},empty:function(){for(var e,t=0;null!=(e=this[t]);t++){for(1===e.nodeType&&st.cleanData(b(e,!1));e.firstChild;)e.removeChild(e.firstChild);e.options&&st.nodeName(e,"select")&&(e.options.length=0)}return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return st.clone(this,e,t)})},html:function(e){return st.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(Xt,""):t;if(!("string"!=typeof e||Kt.test(e)||!st.support.htmlSerialize&&Ut.test(e)||!st.support.leadingWhitespace&&Vt.test(e)||on[(Jt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(Yt,"<$1></$2>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(st.cleanData(b(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(e){var t=st.isFunction(e);return t||"string"==typeof e||(e=st(e).not(this).detach()),this.domManip([e],!0,function(e){var t=this.nextSibling,n=this.parentNode;(n&&1===this.nodeType||11===this.nodeType)&&(st(this).remove(),t?t.parentNode.insertBefore(e,t):n.appendChild(e))})},detach:function(e){return this.remove(e,!0)},domManip:function(e,n,r){e=et.apply([],e);var i,o,a,s,u,l,c=0,f=this.length,p=this,m=f-1,y=e[0],v=st.isFunction(y);if(v||!(1>=f||"string"!=typeof y||st.support.checkClone)&&en.test(y))return this.each(function(i){var o=p.eq(i);v&&(e[0]=y.call(this,i,n?o.html():t)),o.domManip(e,n,r)});if(f&&(i=st.buildFragment(e,this[0].ownerDocument,!1,this),o=i.firstChild,1===i.childNodes.length&&(i=o),o)){for(n=n&&st.nodeName(o,"tr"),a=st.map(b(i,"script"),h),s=a.length;f>c;c++)u=i,c!==m&&(u=st.clone(u,!0,!0),s&&st.merge(a,b(u,"script"))),r.call(n&&st.nodeName(this[c],"table")?d(this[c],"tbody"):this[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,st.map(a,g),c=0;s>c;c++)u=a[c],tn.test(u.type||"")&&!st._data(u,"globalEval")&&st.contains(l,u)&&(u.src?st.ajax({url:u.src,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0}):st.globalEval((u.text||u.textContent||u.innerHTML||"").replace(rn,"")));i=o=null}return this}}),st.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){st.fn[e]=function(e){for(var n,r=0,i=[],o=st(e),a=o.length-1;a>=r;r++)n=r===a?this:this.clone(!0),st(o[r])[t](n),tt.apply(i,n.get());return this.pushStack(i)}}),st.extend({clone:function(e,t,n){var r,i,o,a,s,u=st.contains(e.ownerDocument,e);if(st.support.html5Clone||st.isXMLDoc(e)||!Ut.test("<"+e.nodeName+">")?s=e.cloneNode(!0):(sn.innerHTML=e.outerHTML,sn.removeChild(s=sn.firstChild)),!(st.support.noCloneEvent&&st.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||st.isXMLDoc(e)))for(r=b(s),i=b(e),a=0;null!=(o=i[a]);++a)r[a]&&v(o,r[a]);if(t)if(n)for(i=i||b(e),r=r||b(s),a=0;null!=(o=i[a]);a++)y(o,r[a]);else y(e,s);return r=b(s,"script"),r.length>0&&m(r,!u&&b(e,"script")),r=i=o=null,s},buildFragment:function(e,t,n,r){for(var i,o,a,s,u,l,c,f=e.length,d=p(t),h=[],g=0;f>g;g++)if(o=e[g],o||0===o)if("object"===st.type(o))st.merge(h,o.nodeType?[o]:o);else if(Qt.test(o)){for(s=s||d.appendChild(t.createElement("div")),a=(Jt.exec(o)||["",""])[1].toLowerCase(),u=on[a]||on._default,s.innerHTML=u[1]+o.replace(Yt,"<$1></$2>")+u[2],c=u[0];c--;)s=s.lastChild;if(!st.support.leadingWhitespace&&Vt.test(o)&&h.push(t.createTextNode(Vt.exec(o)[0])),!st.support.tbody)for(o="table"!==a||Gt.test(o)?"<table>"!==u[1]||Gt.test(o)?0:s:s.firstChild,c=o&&o.childNodes.length;c--;)st.nodeName(l=o.childNodes[c],"tbody")&&!l.childNodes.length&&o.removeChild(l);for(st.merge(h,s.childNodes),s.textContent="";s.firstChild;)s.removeChild(s.firstChild);s=d.lastChild}else h.push(t.createTextNode(o));for(s&&d.removeChild(s),st.support.appendChecked||st.grep(b(h,"input"),x),g=0;o=h[g++];)if((!r||-1===st.inArray(o,r))&&(i=st.contains(o.ownerDocument,o),s=b(d.appendChild(o),"script"),i&&m(s),n))for(c=0;o=s[c++];)tn.test(o.type||"")&&n.push(o);return s=null,d},cleanData:function(e,n){for(var r,i,o,a,s=0,u=st.expando,l=st.cache,c=st.support.deleteExpando,f=st.event.special;null!=(o=e[s]);s++)if((n||st.acceptData(o))&&(i=o[u],r=i&&l[i])){if(r.events)for(a in r.events)f[a]?st.event.remove(o,a):st.removeEvent(o,a,r.handle);l[i]&&(delete l[i],c?delete o[u]:o.removeAttribute!==t?o.removeAttribute(u):o[u]=null,K.push(i))}}});var un,ln,cn,fn=/alpha\([^)]*\)/i,pn=/opacity\s*=\s*([^)]*)/,dn=/^(top|right|bottom|left)$/,hn=/^(none|table(?!-c[ea]).+)/,gn=/^margin/,mn=RegExp("^("+ut+")(.*)$","i"),yn=RegExp("^("+ut+")(?!px)[a-z%]+$","i"),vn=RegExp("^([+-])=("+ut+")","i"),bn={BODY:"block"},xn={position:"absolute",visibility:"hidden",display:"block"},Tn={letterSpacing:0,fontWeight:400},wn=["Top","Right","Bottom","Left"],Nn=["Webkit","O","Moz","ms"];st.fn.extend({css:function(e,n){return st.access(this,function(e,n,r){var i,o,a={},s=0;if(st.isArray(n)){for(i=ln(e),o=n.length;o>s;s++)a[n[s]]=st.css(e,n[s],!1,i);return a}return r!==t?st.style(e,n,r):st.css(e,n)},e,n,arguments.length>1)},show:function(){return N(this,!0)},hide:function(){return N(this)},toggle:function(e){var t="boolean"==typeof e;return this.each(function(){(t?e:w(this))?st(this).show():st(this).hide()})}}),st.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=un(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":st.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,u=st.camelCase(n),l=e.style;if(n=st.cssProps[u]||(st.cssProps[u]=T(l,u)),s=st.cssHooks[n]||st.cssHooks[u],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:l[n];if(a=typeof r,"string"===a&&(o=vn.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(st.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||st.cssNumber[u]||(r+="px"),st.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(l[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{l[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,u=st.camelCase(n);return n=st.cssProps[u]||(st.cssProps[u]=T(e.style,u)),s=st.cssHooks[n]||st.cssHooks[u],s&&"get"in s&&(o=s.get(e,!0,r)),o===t&&(o=un(e,n,i)),"normal"===o&&n in Tn&&(o=Tn[n]),r?(a=parseFloat(o),r===!0||st.isNumeric(a)?a||0:o):o},swap:function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=a[o];return i}}),e.getComputedStyle?(ln=function(t){return e.getComputedStyle(t,null)},un=function(e,n,r){var i,o,a,s=r||ln(e),u=s?s.getPropertyValue(n)||s[n]:t,l=e.style;return s&&(""!==u||st.contains(e.ownerDocument,e)||(u=st.style(e,n)),yn.test(u)&&gn.test(n)&&(i=l.width,o=l.minWidth,a=l.maxWidth,l.minWidth=l.maxWidth=l.width=u,u=s.width,l.width=i,l.minWidth=o,l.maxWidth=a)),u}):V.documentElement.currentStyle&&(ln=function(e){return e.currentStyle},un=function(e,n,r){var i,o,a,s=r||ln(e),u=s?s[n]:t,l=e.style;return null==u&&l&&l[n]&&(u=l[n]),yn.test(u)&&!dn.test(n)&&(i=l.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),l.left="fontSize"===n?"1em":u,u=l.pixelLeft+"px",l.left=i,a&&(o.left=a)),""===u?"auto":u}),st.each(["height","width"],function(e,n){st.cssHooks[n]={get:function(e,r,i){return r?0===e.offsetWidth&&hn.test(st.css(e,"display"))?st.swap(e,xn,function(){return E(e,n,i)}):E(e,n,i):t},set:function(e,t,r){var i=r&&ln(e);return C(e,t,r?k(e,n,r,st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,i),i):0)}}}),st.support.opacity||(st.cssHooks.opacity={get:function(e,t){return pn.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=st.isNumeric(t)?"alpha(opacity="+100*t+")":"",o=r&&r.filter||n.filter||"";n.zoom=1,(t>=1||""===t)&&""===st.trim(o.replace(fn,""))&&n.removeAttribute&&(n.removeAttribute("filter"),""===t||r&&!r.filter)||(n.filter=fn.test(o)?o.replace(fn,i):o+" "+i)}}),st(function(){st.support.reliableMarginRight||(st.cssHooks.marginRight={get:function(e,n){return n?st.swap(e,{display:"inline-block"},un,[e,"marginRight"]):t}}),!st.support.pixelPosition&&st.fn.position&&st.each(["top","left"],function(e,n){st.cssHooks[n]={get:function(e,r){return r?(r=un(e,n),yn.test(r)?st(e).position()[n]+"px":r):t}}})}),st.expr&&st.expr.filters&&(st.expr.filters.hidden=function(e){return 0===e.offsetWidth&&0===e.offsetHeight||!st.support.reliableHiddenOffsets&&"none"===(e.style&&e.style.display||st.css(e,"display"))},st.expr.filters.visible=function(e){return!st.expr.filters.hidden(e)}),st.each({margin:"",padding:"",border:"Width"},function(e,t){st.cssHooks[e+t]={expand:function(n){for(var r=0,i={},o="string"==typeof n?n.split(" "):[n];4>r;r++)i[e+wn[r]+t]=o[r]||o[r-2]||o[0];return i}},gn.test(e)||(st.cssHooks[e+t].set=C)});var Cn=/%20/g,kn=/\[\]$/,En=/\r?\n/g,Sn=/^(?:submit|button|image|reset)$/i,An=/^(?:input|select|textarea|keygen)/i;st.fn.extend({serialize:function(){return st.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=st.prop(this,"elements");return e?st.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!st(this).is(":disabled")&&An.test(this.nodeName)&&!Sn.test(e)&&(this.checked||!Zt.test(e))}).map(function(e,t){var n=st(this).val();return null==n?null:st.isArray(n)?st.map(n,function(e){return{name:t.name,value:e.replace(En,"\r\n")}}):{name:t.name,value:n.replace(En,"\r\n")}}).get()}}),st.param=function(e,n){var r,i=[],o=function(e,t){t=st.isFunction(t)?t():null==t?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};if(n===t&&(n=st.ajaxSettings&&st.ajaxSettings.traditional),st.isArray(e)||e.jquery&&!st.isPlainObject(e))st.each(e,function(){o(this.name,this.value)});else for(r in e)j(r,e[r],n,o);return i.join("&").replace(Cn,"+")};var jn,Dn,Ln=st.now(),Hn=/\?/,Mn=/#.*$/,qn=/([?&])_=[^&]*/,_n=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Fn=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,On=/^(?:GET|HEAD)$/,Bn=/^\/\//,Pn=/^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,Rn=st.fn.load,Wn={},$n={},In="*/".concat("*");try{Dn=Y.href}catch(zn){Dn=V.createElement("a"),Dn.href="",Dn=Dn.href}jn=Pn.exec(Dn.toLowerCase())||[],st.fn.load=function(e,n,r){if("string"!=typeof e&&Rn)return Rn.apply(this,arguments);var i,o,a,s=this,u=e.indexOf(" ");return u>=0&&(i=e.slice(u,e.length),e=e.slice(0,u)),st.isFunction(n)?(r=n,n=t):n&&"object"==typeof n&&(o="POST"),s.length>0&&st.ajax({url:e,type:o,dataType:"html",data:n}).done(function(e){a=arguments,s.html(i?st("<div>").append(st.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,a||[e.responseText,t,e])}),this},st.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){st.fn[t]=function(e){return this.on(t,e)}}),st.each(["get","post"],function(e,n){st[n]=function(e,r,i,o){return st.isFunction(r)&&(o=o||i,i=r,r=t),st.ajax({url:e,type:n,dataType:o,data:r,success:i})}}),st.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Dn,type:"GET",isLocal:Fn.test(jn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":In,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":st.parseJSON,"text xml":st.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?H(H(e,st.ajaxSettings),t):H(st.ajaxSettings,e)},ajaxPrefilter:D(Wn),ajaxTransport:D($n),ajax:function(e,n){function r(e,n,r,s){var l,f,v,b,T,N=n;2!==x&&(x=2,u&&clearTimeout(u),i=t,a=s||"",w.readyState=e>0?4:0,r&&(b=M(p,w,r)),e>=200&&300>e||304===e?(p.ifModified&&(T=w.getResponseHeader("Last-Modified"),T&&(st.lastModified[o]=T),T=w.getResponseHeader("etag"),T&&(st.etag[o]=T)),304===e?(l=!0,N="notmodified"):(l=q(p,b),N=l.state,f=l.data,v=l.error,l=!v)):(v=N,(e||!N)&&(N="error",0>e&&(e=0))),w.status=e,w.statusText=(n||N)+"",l?g.resolveWith(d,[f,N,w]):g.rejectWith(d,[w,N,v]),w.statusCode(y),y=t,c&&h.trigger(l?"ajaxSuccess":"ajaxError",[w,p,l?f:v]),m.fireWith(d,[w,N]),c&&(h.trigger("ajaxComplete",[w,p]),--st.active||st.event.trigger("ajaxStop")))}"object"==typeof e&&(n=e,e=t),n=n||{};var i,o,a,s,u,l,c,f,p=st.ajaxSetup({},n),d=p.context||p,h=p.context&&(d.nodeType||d.jquery)?st(d):st.event,g=st.Deferred(),m=st.Callbacks("once memory"),y=p.statusCode||{},v={},b={},x=0,T="canceled",w={readyState:0,getResponseHeader:function(e){var t;if(2===x){if(!s)for(s={};t=_n.exec(a);)s[t[1].toLowerCase()]=t[2];t=s[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===x?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return x||(e=b[n]=b[n]||e,v[e]=t),this},overrideMimeType:function(e){return x||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>x)for(t in e)y[t]=[y[t],e[t]];else w.always(e[w.status]);return this},abort:function(e){var t=e||T;return i&&i.abort(t),r(0,t),this}};if(g.promise(w).complete=m.add,w.success=w.done,w.error=w.fail,p.url=((e||p.url||Dn)+"").replace(Mn,"").replace(Bn,jn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=st.trim(p.dataType||"*").toLowerCase().match(lt)||[""],null==p.crossDomain&&(l=Pn.exec(p.url.toLowerCase()),p.crossDomain=!(!l||l[1]===jn[1]&&l[2]===jn[2]&&(l[3]||("http:"===l[1]?80:443))==(jn[3]||("http:"===jn[1]?80:443)))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=st.param(p.data,p.traditional)),L(Wn,p,n,w),2===x)return w;c=p.global,c&&0===st.active++&&st.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!On.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(Hn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=qn.test(o)?o.replace(qn,"$1_="+Ln++):o+(Hn.test(o)?"&":"?")+"_="+Ln++)),p.ifModified&&(st.lastModified[o]&&w.setRequestHeader("If-Modified-Since",st.lastModified[o]),st.etag[o]&&w.setRequestHeader("If-None-Match",st.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&w.setRequestHeader("Content-Type",p.contentType),w.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+In+"; q=0.01":""):p.accepts["*"]);for(f in p.headers)w.setRequestHeader(f,p.headers[f]);if(p.beforeSend&&(p.beforeSend.call(d,w,p)===!1||2===x))return w.abort();T="abort";for(f in{success:1,error:1,complete:1})w[f](p[f]);if(i=L($n,p,n,w)){w.readyState=1,c&&h.trigger("ajaxSend",[w,p]),p.async&&p.timeout>0&&(u=setTimeout(function(){w.abort("timeout")},p.timeout));try{x=1,i.send(v,r)}catch(N){if(!(2>x))throw N;r(-1,N)}}else r(-1,"No Transport");return w},getScript:function(e,n){return st.get(e,t,n,"script")},getJSON:function(e,t,n){return st.get(e,t,n,"json")}}),st.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return st.globalEval(e),e}}}),st.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),st.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=V.head||st("head")[0]||V.documentElement;return{send:function(t,i){n=V.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var Xn=[],Un=/(=)\?(?=&|$)|\?\?/;st.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xn.pop()||st.expando+"_"+Ln++;return this[e]=!0,e}}),st.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,u=n.jsonp!==!1&&(Un.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Un.test(n.data)&&"data");return u||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=st.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,u?n[u]=n[u].replace(Un,"$1"+o):n.jsonp!==!1&&(n.url+=(Hn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||st.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,Xn.push(o)),s&&st.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Vn,Yn,Jn=0,Gn=e.ActiveXObject&&function(){var e;for(e in Vn)Vn[e](t,!0)};st.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&_()||F()}:_,Yn=st.ajaxSettings.xhr(),st.support.cors=!!Yn&&"withCredentials"in Yn,Yn=st.support.ajax=!!Yn,Yn&&st.ajaxTransport(function(n){if(!n.crossDomain||st.support.cors){var r;return{send:function(i,o){var a,s,u=n.xhr();if(n.username?u.open(n.type,n.url,n.async,n.username,n.password):u.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)u[s]=n.xhrFields[s];n.mimeType&&u.overrideMimeType&&u.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)u.setRequestHeader(s,i[s])}catch(l){}u.send(n.hasContent&&n.data||null),r=function(e,i){var s,l,c,f,p;try{if(r&&(i||4===u.readyState))if(r=t,a&&(u.onreadystatechange=st.noop,Gn&&delete Vn[a]),i)4!==u.readyState&&u.abort();else{f={},s=u.status,p=u.responseXML,c=u.getAllResponseHeaders(),p&&p.documentElement&&(f.xml=p),"string"==typeof u.responseText&&(f.text=u.responseText);try{l=u.statusText}catch(d){l=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=f.text?200:404}}catch(h){i||o(-1,h)}f&&o(s,l,f,c)},n.async?4===u.readyState?setTimeout(r):(a=++Jn,Gn&&(Vn||(Vn={},st(e).unload(Gn)),Vn[a]=r),u.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Qn,Kn,Zn=/^(?:toggle|show|hide)$/,er=RegExp("^(?:([+-])=|)("+ut+")([a-z%]*)$","i"),tr=/queueHooks$/,nr=[W],rr={"*":[function(e,t){var n,r,i=this.createTween(e,t),o=er.exec(t),a=i.cur(),s=+a||0,u=1,l=20;if(o){if(n=+o[2],r=o[3]||(st.cssNumber[e]?"":"px"),"px"!==r&&s){s=st.css(i.elem,e,!0)||n||1;do u=u||".5",s/=u,st.style(i.elem,e,s+r);while(u!==(u=i.cur()/a)&&1!==u&&--l)}i.unit=r,i.start=s,i.end=o[1]?s+(o[1]+1)*n:n}return i}]};st.Animation=st.extend(P,{tweener:function(e,t){st.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");for(var n,r=0,i=e.length;i>r;r++)n=e[r],rr[n]=rr[n]||[],rr[n].unshift(t)},prefilter:function(e,t){t?nr.unshift(e):nr.push(e)}}),st.Tween=$,$.prototype={constructor:$,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(st.cssNumber[n]?"":"px")},cur:function(){var e=$.propHooks[this.prop];return e&&e.get?e.get(this):$.propHooks._default.get(this)},run:function(e){var t,n=$.propHooks[this.prop];return this.pos=t=this.options.duration?st.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):$.propHooks._default.set(this),this}},$.prototype.init.prototype=$.prototype,$.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=st.css(e.elem,e.prop,"auto"),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){st.fx.step[e.prop]?st.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[st.cssProps[e.prop]]||st.cssHooks[e.prop])?st.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},$.propHooks.scrollTop=$.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},st.each(["toggle","show","hide"],function(e,t){var n=st.fn[t];st.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(I(t,!0),e,r,i)}}),st.fn.extend({fadeTo:function(e,t,n,r){return this.filter(w).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=st.isEmptyObject(e),o=st.speed(t,n,r),a=function(){var t=P(this,st.extend({},e),o);a.finish=function(){t.stop(!0)},(i||st._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=st.timers,a=st._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&tr.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&st.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=st._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=st.timers,a=r?r.length:0;for(n.finish=!0,st.queue(this,e,[]),i&&i.cur&&i.cur.finish&&i.cur.finish.call(this),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}}),st.each({slideDown:I("show"),slideUp:I("hide"),slideToggle:I("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){st.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),st.speed=function(e,t,n){var r=e&&"object"==typeof e?st.extend({},e):{complete:n||!n&&t||st.isFunction(e)&&e,duration:e,easing:n&&t||t&&!st.isFunction(t)&&t};return r.duration=st.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in st.fx.speeds?st.fx.speeds[r.duration]:st.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){st.isFunction(r.old)&&r.old.call(this),r.queue&&st.dequeue(this,r.queue)},r},st.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},st.timers=[],st.fx=$.prototype.init,st.fx.tick=function(){var e,n=st.timers,r=0;for(Qn=st.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||st.fx.stop(),Qn=t},st.fx.timer=function(e){e()&&st.timers.push(e)&&st.fx.start()},st.fx.interval=13,st.fx.start=function(){Kn||(Kn=setInterval(st.fx.tick,st.fx.interval))},st.fx.stop=function(){clearInterval(Kn),Kn=null},st.fx.speeds={slow:600,fast:200,_default:400},st.fx.step={},st.expr&&st.expr.filters&&(st.expr.filters.animated=function(e){return st.grep(st.timers,function(t){return e===t.elem}).length}),st.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){st.offset.setOffset(this,e,t)});var n,r,i={top:0,left:0},o=this[0],a=o&&o.ownerDocument;if(a)return n=a.documentElement,st.contains(n,o)?(o.getBoundingClientRect!==t&&(i=o.getBoundingClientRect()),r=z(a),{top:i.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:i.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):i},st.offset={setOffset:function(e,t,n){var r=st.css(e,"position");"static"===r&&(e.style.position="relative");var i,o,a=st(e),s=a.offset(),u=st.css(e,"top"),l=st.css(e,"left"),c=("absolute"===r||"fixed"===r)&&st.inArray("auto",[u,l])>-1,f={},p={};c?(p=a.position(),i=p.top,o=p.left):(i=parseFloat(u)||0,o=parseFloat(l)||0),st.isFunction(t)&&(t=t.call(e,n,s)),null!=t.top&&(f.top=t.top-s.top+i),null!=t.left&&(f.left=t.left-s.left+o),"using"in t?t.using.call(e,f):a.css(f)}},st.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===st.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),st.nodeName(e[0],"html")||(n=e.offset()),n.top+=st.css(e[0],"borderTopWidth",!0),n.left+=st.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-st.css(r,"marginTop",!0),left:t.left-n.left-st.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){for(var e=this.offsetParent||V.documentElement;e&&!st.nodeName(e,"html")&&"static"===st.css(e,"position");)e=e.offsetParent;return e||V.documentElement})}}),st.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);st.fn[e]=function(i){return st.access(this,function(e,i,o){var a=z(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?st(a).scrollLeft():o,r?o:st(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}}),st.each({Height:"height",Width:"width"},function(e,n){st.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){st.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return st.access(this,function(n,r,i){var o;return st.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?st.css(n,r,s):st.style(n,r,i,s)},n,a?i:t,a,null)}})}),e.jQuery=e.$=st,"function"==typeof define&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return st})})(window);
-//@ sourceMappingURL=jquery.min.map
\ No newline at end of file
diff --git a/examples/todomvc-flux/.gitignore b/examples/todomvc-flux/.gitignore
deleted file mode 100644
index 8ffdbe0ef62..00000000000
--- a/examples/todomvc-flux/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/js/bundle.js
-/js/bundle.min.js
diff --git a/examples/todomvc-flux/README.md b/examples/todomvc-flux/README.md
deleted file mode 100644
index 07bf26bfd27..00000000000
--- a/examples/todomvc-flux/README.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# Flux TodoMVC Example
-
-> An application architecture for React utilizing a unidirectional data flow.
-
-
-## Learning Flux
-
-The [React website](http://facebook.github.io/react) is a great resource for getting started.
-
-Read the blog post announcing Flux: ["An Application Architecture for React"](http://facebook.github.io/react/blog/2014/05/06/flux.html), then read more about the [Flux architecture](http://facebook.github.io/react/docs/flux-overview.html) and a [TodoMVC tutorial](http://facebook.github.io/react/docs/flux-todo-list.html) explaining the structure of the files in this folder.
-
-
-## Overview
-
-Flux applications have three major parts: the ___dispatcher___, the ___stores___, and the ___views___ (React components).  These should not be confused with Model-View-Controller.  Controllers do exist in a Flux application, but they are ___controller-views___ -- views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children.  Additionally, ___actions___ — dispatcher helper methods — are often used to support a semantic dispatcher API.  It can be useful to think of them as a fourth part of the Flux update cycle.
-
-Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React ___view___, the view propagates an ___action___ through a central ___dispatcher___, to the various ___stores___ that hold the application's data and business logic, which updates all of the views that are affected. This works especially well with React's declarative programming style, which allows the store to send updates without specifying how to transition views between states.
-
-We originally set out to deal correctly with derived data: for example, we wanted to show an unread count for message threads while another view showed a list of threads, with the unread ones highlighted. This was difficult to handle with MVC — marking a single thread as read would update the thread model, and then also need to update the unread count model.  These dependencies and cascading updates often occur in a large MVC application, leading to a tangled weave of data flow and unpredictable results.
-
-Control is inverted with ___stores___: the stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns. This also makes stores more testable than models, especially since stores have no direct setter methods like `setAsRead()`, but instead have only an input point for the payload, which is delivered through the ___dispatcher___ and originates with ___actions___.
-
-
-## Structure and Data Flow
-
-Data in a Flux application flows in a single direction, in a cycle:
-
-<pre>
-Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+
-Ʌ                                                                                   |
-|                                                                                   V
-+-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+
-</pre>
-
-A unidirectional data flow is central to the Flux pattern, and in fact Flux takes its name from the Latin word for flow. In the above diagram, the ___dispatcher___, ___stores___ and ___views___ are independent nodes with distinct inputs and outputs. The ___actions___ are simply discrete, semantic helper functions that facilitate passing data to the ___dispatcher___. 
-
-All data flows through the ___dispatcher___ as a central hub.  ___Actions___ most often originate from user interactions with the ___views___, and are nothing more than a call into the ___dispatcher___.  The ___dispatcher___ then invokes the callbacks that the ___stores___ have registered with it, effectively dispatching the data payload contained in the ___actions___ to all ___stores___.  Within their registered callbacks, ___stores___ determine which ___actions___ they are interested in, and respond accordingly.  The ___stores___ then emit a "change" event to alert the ___controller-views___ that a change to the data layer has occurred.  ___Controller-views___ listen for these events and retrieve data from the ___stores___ in an event handler.  The ___controller-views___ call their own `render()` method via `setState()` or `forceUpdate()`, updating themselves and all of their children.
-
-This structure allows us to reason easily about our application in a way that is reminiscent of functional reactive programming, or more specifically data-flow programming or flow-based programming, where data flows through the application in a single direction — there are no two-way bindings. Application state is maintained only in the ___stores___, allowing the different parts of the application to remain highly decoupled. Where dependencies do occur between ___stores___, they are kept in a strict hierarchy, with synchronous updates managed by the ___dispatcher___. 
-
-We found that two-way data bindings led to cascading updates, where changing one object led to another object changing, which could also trigger more updates. As applications grew, these cascading updates made it very difficult to predict what would change as the result of one user interaction. When updates can only change data within a single round, the system as a whole becomes more predictable.
-
-Let's look at the various parts of the Flux update cycle up close. A good place to start is the dispatcher. 
-
-
-### A Single Dispatcher 
-
-The dispatcher is the central hub that manages all data flow in a Flux application. It is essentially a registry of callbacks into the stores. Each store registers itself and provides a callback. When the dispatcher responds to an action, all stores in the application are sent the data payload provided by the action via the callbacks in the registry. 
-
-As an application grows, the dispatcher becomes more vital, as it can manage dependencies between stores by invoking the registered callbacks in a specific order.  Stores can declaratively wait for other stores to finish updating, and then update themselves accordingly.
-
-
-### Stores 
-
-Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they are not instances of one object. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular __domain__ within the application. 
-
-For example, Facebook's [Lookback Video Editor](https://facebook.com/lookback/edit) utilized a TimeStore that kept track of the playback time position and the playback state. On the other hand, the same application's ImageStore kept track of a collection of images.  The TodoStore in our TodoMVC example is similar in that it manages a collection of to-do items.  A store exhibits characteristics of both a collection of models and a singleton model of a logical domain. 
-
-As mentioned above, a store registers itself with the dispatcher and provides it with a callback. This callback receives the action's data payload as a parameter. The payload contains a type attribute, identifying the action's type. Within the store's registered callback, a switch statement based on the action's type is used to interpret the payload and to provide the proper hooks into the store's internal methods. This allows an action to result in an update to the state of the store, via the dispatcher. After the stores are updated, they broadcast an event declaring that their state has changed, so the views may query the new state and update themselves. 
-
-
-### Views and Controller-Views 
- 
-React provides the kind of composable views we need for the view layer. Close to the top of the nested view hierarchy, a special kind of view listens for events that are broadcast by the stores that it depends on. One could call this a ___controller-view___, as it provides the glue code to get the data from the stores and to pass this data down the chain of its descendants. We might have one of these controller-views governing any significant section of the page.  
-
-When it receives the event from the store, it first requests the new data it needs via the stores' public getter methods. It then calls its own `setState()` or `forceUpdate()` methods, causing its `render()` method and the `render()` method of all its descendants to run. 
-
-We often pass the entire state of the store down the chain of views in a single object, allowing different descendants to use what they need. In addition to keeping the controller-like behavior at the top of the hierarchy, and thus keeping our descendant views as functionally pure as possible, passing down the entire state of the store in a single object also has the effect of reducing the number of props we need to manage. 
-
-Occasionally we may need to add additional controller-views deeper in the hierarchy to keep components simple.  This might help us to better encapsulate a section of the hierarchy related to a specific  data domain.  Be aware, however, that controller-views deeper in the hierarchy can violate the singular flow of data by introducing a new, potentially conflicting entry point for the data flow.  In making the decision of whether to add a deep controller-view, balance the gain of simpler components against the complexity of multiple data updates flowing into the hierarchy at different points.  These multiple data updates can lead to odd effects, with React's render method getting invoked repeatedly by updates from different controller-views, potentially increasing the difficulty of debugging.
-
-
-### Actions 
-
-The dispatcher exposes a method that allows a view to trigger a dispatch to the stores, and to include a payload of data, or an action. The action construction may be wrapped into a semantic helper method which sends the payload to the dispatcher. For example, we may want to change the text of a to-do item in a to-do list application. We would create an action with a function signature like `updateText(todoId, newText)` in our `TodoActions` module. This method may be invoked from within our views' event handlers, so we can call it in response to a user action. This action method also adds the action type to the payload, so that when the payload is interpreted in the store, it can respond appropriately to a payload with a particular action type. In our example, this type might be named something like `TODO_UPDATE_TEXT`. 
-
-Actions may also come from other places, such as the server. This happens, for example, during data initialization. It may also happen when the server returns an error code or when the server has updates to provide to the application. We'll talk more about server actions in a future article. In this post we're only concerned with the basics of the data flow.
-
-
-### What About that Dispatcher? 
-
-As mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the `waitFor()` method within the Dispatcher class.  The TodoMVC application is extremely simple, so we did not need to use this method, but we have included it here as an example of what a dispatcher should be able to do in a larger, more complex application.
-
-Within the TodoStore's registered callback we can explicitly wait for any dependencies to first update before moving forward: 
-
-``` 
-case 'TODO_CREATE': 
-  Dispatcher.waitFor([ 
-    PrependedTextStore.dispatcherIndex, 
-    YetAnotherStore.dispatcherIndex 
-  ], function() { 
-    TodoStore.create(PrependedTextStore.getText() + ' ' + action.text); 
-    TodoStore.emit('change'); 
-  }); 
-  break; 
-```
-
-The arguments for `waitFor()` are an array of dipatcher registry indexes, and a final callback to invoke after the callbacks at the given indexes have completed.  Thus the store that is invoking `waitFor()` can depend on the state of another store to inform how it should update its own state.
-
-A problem arises if we create circular dependencies. If Store A waits for Store B, and B waits for A, then we'll have a very bad situation on our hands. We'll need a more robust dispatcher that flags these circular dependencies with console errors, and this is not easily accomplished with promises. Unfortunately, that's a bit beyond the scope of this documentation. In future blog posts, we hope to cover how to build a more robust dispatcher and how to initialize, update, and save the state of the application with persistent data, like a web service API.
-
-
-## TodoMVC Example Implementation
-
-In this TodoMVC example application, we can see the elements of Flux in our directory structure.  Views here are referred to as "components" as they are React components.
-
-<pre>
-./
-  index.html
-  js/
-    actions/
-      TodoActions.js
-    app.js
-    bundle.js
-    dispatcher/
-      AppDispatcher.js
-      Dispatcher.js
-    components/
-      Footer.react.js
-      Header.react.js
-      MainSection.react.js
-      TodoApp.react.js
-      TodoItem.react.js
-      TodoTextInput.react.js
-    stores/
-      TodoStore.js
-</pre>
-
-The primary entry point into the application is app.js.  This file bootstraps the React rendering inside of index.html.  TodoApp.js is our controller-view and it passes all data down into its child React components.
-
-TodoActions.js is a collection of actions that views may call from within their event handlers, in response to user interactions.  They are nothing more than helpers that call into the AppDispatcher.
-
-Dispatcher.js is a base class for AppDispatcher.js which extends it with a small amount of application-specific code.  This dispatcher is a naive implementation based on promises, but much more robust implementations are possible.
-
-TodoStore.js is our only store.  It provides all of the application logic and in-memory storage.  Based on EventEmitter from Node.js, it emits "change" events after responding to actions in the callback it registers with the dispatcher.
-
-The bundle.js file is automatically genenerated by the build process, explained below.
-
-
-## Running
-
-You must have [npm](https://www.npmjs.org/) installed on your computer.
-From the root project directory run these commands from the command line:
-
-    npm install
-
-This will install all dependencies.
-
-To build the project, first run this command:
-
-    npm start
-
-This will perform an initial build and start a watcher process that will update build.js with any changes you wish to make.  This watcher is based on [Browserify](http://browserify.org/) and [Watchify](https://github.com/substack/watchify), and it transforms React's JSX syntax into standard JavaScript with [Reactify](https://github.com/andreypopp/reactify).
-
-To run the app, spin up an HTTP server and visit http://localhost/.../todomvc-flux/.
-
-
-## Credit
-
-This TodoMVC application was created by [Bill Fisher](https://www.facebook.com/bill.fisher.771).  This README document was written by Bill Fisher and the principal creator of Flux, [Jing Chen](https://www.facebook.com/jing).
-
-
-## License
-
-> Copyright 2013-2014 Facebook, Inc.
->
-> Licensed under the Apache License, Version 2.0 (the "License");
-> you may not use this file except in compliance with the License.
-> You may obtain a copy of the License at
->
-> http://www.apache.org/licenses/LICENSE-2.0
->
-> Unless required by applicable law or agreed to in writing, software
-> distributed under the License is distributed on an "AS IS" BASIS,
-> WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-> See the License for the specific language governing permissions and
-> limitations under the License.
diff --git a/examples/todomvc-flux/css/app.css b/examples/todomvc-flux/css/app.css
deleted file mode 100644
index 2baee13e9a3..00000000000
--- a/examples/todomvc-flux/css/app.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * 
- * base.css overrides 
- */
-
-/**
- * We are not changing from display:none, but rather re-rendering instead. 
- * Therefore this needs to be displayed normally by default.
- */
-#todo-list li .edit {
-  display: inline;
-}
\ No newline at end of file
diff --git a/examples/todomvc-flux/index.html b/examples/todomvc-flux/index.html
deleted file mode 100644
index b38cfb511e2..00000000000
--- a/examples/todomvc-flux/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>Flux • TodoMVC</title>
-		<link rel="stylesheet" href="todomvc-common/base.css">
-		<link rel="stylesheet" href="css/app.css">
-	</head>
-	<body>
-		<section id="todoapp"></section>
-		<footer id="info">
-			<p>Double-click to edit a todo</p>
-			<p>Created by <a href="http://facebook.com/bill.fisher.771">Bill Fisher</a></p>
-			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-		</footer>
-		<script src="js/bundle.js"></script>
-	</body>
-</html>
diff --git a/examples/todomvc-flux/js/actions/TodoActions.js b/examples/todomvc-flux/js/actions/TodoActions.js
deleted file mode 100644
index ae86061a5ed..00000000000
--- a/examples/todomvc-flux/js/actions/TodoActions.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * TodoActions
- */
-
-var AppDispatcher = require('../dispatcher/AppDispatcher');
-var TodoConstants = require('../constants/TodoConstants');
-
-var TodoActions = {
-
-  /**
-   * @param  {string} text
-   */
-  create: function(text) {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_CREATE,
-      text: text
-    });
-  },
-
-  /**
-   * @param  {string} id The ID of the ToDo item
-   * @param  {string} text
-   */
-  updateText: function(id, text) {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_UPDATE_TEXT,
-      id: id,
-      text: text
-    });
-  },
-
-  /**
-   * Toggle whether a single ToDo is complete
-   * @param  {object} todo
-   */
-  toggleComplete: function(todo) {
-    var id = todo.id;
-    if (todo.complete) {
-      AppDispatcher.handleViewAction({
-        actionType: TodoConstants.TODO_UNDO_COMPLETE,
-        id: id
-      });
-    } else {
-      AppDispatcher.handleViewAction({
-        actionType: TodoConstants.TODO_COMPLETE,
-        id: id
-      });
-    }
-  },
-
-  /**
-   * Mark all ToDos as complete
-   */
-  toggleCompleteAll: function() {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_TOGGLE_COMPLETE_ALL
-    });
-  },
-
-  /**
-   * @param  {string} id
-   */
-  destroy: function(id) {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_DESTROY,
-      id: id
-    });
-  },
-
-  /**
-   * Delete all the completed ToDos
-   */
-  destroyCompleted: function() {
-    AppDispatcher.handleViewAction({
-      actionType: TodoConstants.TODO_DESTROY_COMPLETED
-    });
-  }
-
-};
-
-module.exports = TodoActions;
diff --git a/examples/todomvc-flux/js/app.js b/examples/todomvc-flux/js/app.js
deleted file mode 100644
index a2c793a22e5..00000000000
--- a/examples/todomvc-flux/js/app.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-var React = require('react');
-
-var TodoApp = require('./components/TodoApp.react');
-
-React.renderComponent(
-  <TodoApp />,
-  document.getElementById('todoapp')
-);
\ No newline at end of file
diff --git a/examples/todomvc-flux/js/components/Footer.react.js b/examples/todomvc-flux/js/components/Footer.react.js
deleted file mode 100644
index ba985b42e5e..00000000000
--- a/examples/todomvc-flux/js/components/Footer.react.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-var React = require('react');
-var ReactPropTypes = React.PropTypes;
-var TodoActions = require('../actions/TodoActions');
-
-var Footer = React.createClass({
-
-  propTypes: {
-    allTodos: ReactPropTypes.object.isRequired
-  },
-
-  /**
-   * @return {object}
-   */
-  render: function() {
-    var allTodos = this.props.allTodos;
-    var total = Object.keys(allTodos).length;
-
-    if (total === 0) {
-      return <noscript />;
-    }
-
-    var completed = 0;
-    for (var key in allTodos) {
-      if (allTodos[key].complete) {
-        completed++;
-      }
-    }
-
-    var itemsLeft = total - completed;
-    var itemsLeftPhrase = itemsLeft === 1 ? ' item ' : ' items ';
-    itemsLeftPhrase += 'left';
-
-    // Undefined and thus not rendered if no completed items are left.
-    var clearCompletedButton;
-    if (completed) {
-      clearCompletedButton =
-        <button
-          id="clear-completed"
-          onClick={this._onClearCompletedClick}>
-          Clear completed ({completed})
-        </button>;
-    }
-
-  	return (
-      <footer id="footer">
-        <span id="todo-count">
-          <strong>
-            {itemsLeft}
-          </strong>
-          {itemsLeftPhrase}
-        </span>
-        {clearCompletedButton}
-      </footer>
-    );
-  },
-
-  /**
-   * Event handler to delete all completed TODOs
-   */
-  _onClearCompletedClick: function() {
-    TodoActions.destroyCompleted();
-  }
-
-});
-
-module.exports = Footer;
diff --git a/examples/todomvc-flux/js/components/Header.react.js b/examples/todomvc-flux/js/components/Header.react.js
deleted file mode 100644
index 188bbc4534b..00000000000
--- a/examples/todomvc-flux/js/components/Header.react.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-var React = require('react');
-var TodoActions = require('../actions/TodoActions');
-var TodoTextInput = require('./TodoTextInput.react');
-
-var Header = React.createClass({
-
-  /**
-   * @return {object}
-   */
-  render: function() {
-    return (
-      <header id="header">
-        <h1>todos</h1>
-        <TodoTextInput
-          id="new-todo"
-          placeholder="What needs to be done?"
-          onSave={this._onSave}
-        />
-      </header>
-    );
-  },
-
-  /**
-   * Event handler called within TodoTextInput.
-   * Defining this here allows TodoTextInput to be used in multiple places
-   * in different ways.
-   * @param {string} text
-   */
-  _onSave: function(text) {
-    if (text.trim()){
-      TodoActions.create(text);
-    }
-
-  }
-
-});
-
-module.exports = Header;
diff --git a/examples/todomvc-flux/js/components/MainSection.react.js b/examples/todomvc-flux/js/components/MainSection.react.js
deleted file mode 100644
index 1fb381cb159..00000000000
--- a/examples/todomvc-flux/js/components/MainSection.react.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-var React = require('react');
-var ReactPropTypes = React.PropTypes;
-var TodoActions = require('../actions/TodoActions');
-var TodoItem = require('./TodoItem.react');
-
-var MainSection = React.createClass({
-
-  propTypes: {
-    allTodos: ReactPropTypes.object.isRequired,
-    areAllComplete: ReactPropTypes.bool.isRequired
-  },
-
-  /**
-   * @return {object}
-   */
-  render: function() {
-    // This section should be hidden by default
-    // and shown when there are todos.
-    if (Object.keys(this.props.allTodos).length < 1) {
-      return null;
-    }
-
-    var allTodos = this.props.allTodos;
-    var todos = [];
-
-    for (var key in allTodos) {
-      todos.push(<TodoItem key={key} todo={allTodos[key]} />);
-    }
-
-    return (
-      <section id="main">
-        <input
-          id="toggle-all"
-          type="checkbox"
-          onChange={this._onToggleCompleteAll}
-          checked={this.props.areAllComplete ? 'checked' : ''}
-        />
-        <label htmlFor="toggle-all">Mark all as complete</label>
-        <ul id="todo-list">{todos}</ul>
-      </section>
-    );
-  },
-
-  /**
-   * Event handler to mark all TODOs as complete
-   */
-  _onToggleCompleteAll: function() {
-    TodoActions.toggleCompleteAll();
-  }
-
-});
-
-module.exports = MainSection;
diff --git a/examples/todomvc-flux/js/components/TodoApp.react.js b/examples/todomvc-flux/js/components/TodoApp.react.js
deleted file mode 100644
index 803476685f8..00000000000
--- a/examples/todomvc-flux/js/components/TodoApp.react.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-/**
- * This component operates as a "Controller-View".  It listens for changes in
- * the TodoStore and passes the new data to its children.
- */
-
-var Footer = require('./Footer.react');
-var Header = require('./Header.react');
-var MainSection = require('./MainSection.react');
-var React = require('react');
-var TodoStore = require('../stores/TodoStore');
-
-/**
- * Retrieve the current TODO data from the TodoStore
- */
-function getTodoState() {
-  return {
-    allTodos: TodoStore.getAll(),
-    areAllComplete: TodoStore.areAllComplete()
-  };
-}
-
-var TodoApp = React.createClass({
-
-  getInitialState: function() {
-    return getTodoState();
-  },
-
-  componentDidMount: function() {
-    TodoStore.addChangeListener(this._onChange);
-  },
-
-  componentWillUnmount: function() {
-    TodoStore.removeChangeListener(this._onChange);
-  },
-
-  /**
-   * @return {object}
-   */
-  render: function() {
-  	return (
-      <div>
-        <Header />
-        <MainSection
-          allTodos={this.state.allTodos}
-          areAllComplete={this.state.areAllComplete}
-        />
-        <Footer allTodos={this.state.allTodos} />
-      </div>
-  	);
-  },
-
-  /**
-   * Event handler for 'change' events coming from the TodoStore
-   */
-  _onChange: function() {
-    this.setState(getTodoState());
-  }
-
-});
-
-module.exports = TodoApp;
diff --git a/examples/todomvc-flux/js/components/TodoItem.react.js b/examples/todomvc-flux/js/components/TodoItem.react.js
deleted file mode 100644
index 6dd9ae78a8a..00000000000
--- a/examples/todomvc-flux/js/components/TodoItem.react.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-var React = require('react');
-var ReactPropTypes = React.PropTypes;
-var TodoActions = require('../actions/TodoActions');
-var TodoTextInput = require('./TodoTextInput.react');
-
-var cx = require('react/lib/cx');
-
-var TodoItem = React.createClass({
-
-  propTypes: {
-   todo: ReactPropTypes.object.isRequired
-  },
-
-  getInitialState: function() {
-    return {
-      isEditing: false
-    };
-  },
-
-  /**
-   * @return {object}
-   */
-  render: function() {
-    var todo = this.props.todo;
-
-    var input;
-    if (this.state.isEditing) {
-      input =
-        <TodoTextInput
-          className="edit"
-          onSave={this._onSave}
-          value={todo.text}
-        />;
-    }
-
-    // List items should get the class 'editing' when editing
-    // and 'completed' when marked as completed.
-    // Note that 'completed' is a classification while 'complete' is a state.
-    // This differentiation between classification and state becomes important
-    // in the naming of view actions toggleComplete() vs. destroyCompleted().
-    return (
-      <li
-        className={cx({
-          'completed': todo.complete,
-          'editing': this.state.isEditing
-        })}
-        key={todo.id}>
-        <div className="view">
-          <input
-            className="toggle"
-            type="checkbox"
-            checked={todo.complete}
-            onChange={this._onToggleComplete}
-          />
-          <label onDoubleClick={this._onDoubleClick}>
-            {todo.text}
-          </label>
-          <button className="destroy" onClick={this._onDestroyClick} />
-        </div>
-        {input}
-      </li>
-    );
-  },
-
-  _onToggleComplete: function() {
-    TodoActions.toggleComplete(this.props.todo);
-  },
-
-  _onDoubleClick: function() {
-    this.setState({isEditing: true});
-  },
-
-  /**
-   * Event handler called within TodoTextInput.
-   * Defining this here allows TodoTextInput to be used in multiple places
-   * in different ways.
-   * @param  {string} text
-   */
-  _onSave: function(text) {
-    TodoActions.updateText(this.props.todo.id, text);
-    this.setState({isEditing: false});
-  },
-
-  _onDestroyClick: function() {
-    TodoActions.destroy(this.props.todo.id);
-  }
-
-});
-
-module.exports = TodoItem;
diff --git a/examples/todomvc-flux/js/components/TodoTextInput.react.js b/examples/todomvc-flux/js/components/TodoTextInput.react.js
deleted file mode 100644
index 2253fa50c8c..00000000000
--- a/examples/todomvc-flux/js/components/TodoTextInput.react.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-var React = require('react');
-var ReactPropTypes = React.PropTypes;
-
-var ENTER_KEY_CODE = 13;
-
-var TodoTextInput = React.createClass({
-
-  propTypes: {
-    className: ReactPropTypes.string,
-    id: ReactPropTypes.string,
-    placeholder: ReactPropTypes.string,
-    onSave: ReactPropTypes.func.isRequired,
-    value: ReactPropTypes.string
-  },
-
-  getInitialState: function() {
-    return {
-      value: this.props.value || ''
-    };
-  },
-
-  /**
-   * @return {object}
-   */
-  render: function() /*object*/ {
-    return (
-      <input
-        className={this.props.className}
-        id={this.props.id}
-        placeholder={this.props.placeholder}
-        onBlur={this._save}
-        onChange={this._onChange}
-        onKeyDown={this._onKeyDown}
-        value={this.state.value}
-        autoFocus={true}
-      />
-    );
-  },
-
-  /**
-   * Invokes the callback passed in as onSave, allowing this component to be
-   * used in different ways.
-   */
-  _save: function() {
-    this.props.onSave(this.state.value);
-    this.setState({
-      value: ''
-    });
-  },
-
-  /**
-   * @param {object} event
-   */
-  _onChange: function(/*object*/ event) {
-    this.setState({
-      value: event.target.value
-    });
-  },
-
-  /**
-   * @param  {object} event
-   */
-  _onKeyDown: function(event) {
-    if (event.keyCode === ENTER_KEY_CODE) {
-      this._save();
-    }
-  }
-
-});
-
-module.exports = TodoTextInput;
diff --git a/examples/todomvc-flux/js/constants/TodoConstants.js b/examples/todomvc-flux/js/constants/TodoConstants.js
deleted file mode 100644
index 73127c504c8..00000000000
--- a/examples/todomvc-flux/js/constants/TodoConstants.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * TodoConstants
- */
-
-var keyMirror = require('react/lib/keyMirror');
-
-module.exports = keyMirror({
-  TODO_CREATE: null,
-  TODO_COMPLETE: null,
-  TODO_DESTROY: null,
-  TODO_DESTROY_COMPLETED: null,
-  TODO_TOGGLE_COMPLETE_ALL: null,
-  TODO_UNDO_COMPLETE: null,
-  TODO_UPDATE_TEXT: null
-});
diff --git a/examples/todomvc-flux/js/dispatcher/AppDispatcher.js b/examples/todomvc-flux/js/dispatcher/AppDispatcher.js
deleted file mode 100644
index 7e3b32babe2..00000000000
--- a/examples/todomvc-flux/js/dispatcher/AppDispatcher.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * AppDispatcher
- *
- * A singleton that operates as the central hub for application updates.
- */
-
-var Dispatcher = require('./Dispatcher');
-
-var merge = require('react/lib/merge');
-
-var AppDispatcher = merge(Dispatcher.prototype, {
-
-  /**
-   * A bridge function between the views and the dispatcher, marking the action
-   * as a view action.  Another variant here could be handleServerAction.
-   * @param  {object} action The data coming from the view.
-   */
-  handleViewAction: function(action) {
-    this.dispatch({
-      source: 'VIEW_ACTION',
-      action: action
-    });
-  }
-
-});
-
-module.exports = AppDispatcher;
diff --git a/examples/todomvc-flux/js/dispatcher/Dispatcher.js b/examples/todomvc-flux/js/dispatcher/Dispatcher.js
deleted file mode 100644
index 32a798b9b7b..00000000000
--- a/examples/todomvc-flux/js/dispatcher/Dispatcher.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Dispatcher
- *
- * The Dispatcher is capable of registering callbacks and invoking them.
- * More robust implementations than this would include a way to order the
- * callbacks for dependent Stores, and to guarantee that no two stores
- * created circular dependencies.
- */
-
-var Promise = require('es6-promise').Promise;
-var merge = require('react/lib/merge');
-
-var _callbacks = [];
-var _promises = [];
-
-var Dispatcher = function() {};
-Dispatcher.prototype = merge(Dispatcher.prototype, {
-
-  /**
-   * Register a Store's callback so that it may be invoked by an action.
-   * @param {function} callback The callback to be registered.
-   * @return {number} The index of the callback within the _callbacks array.
-   */
-  register: function(callback) {
-    _callbacks.push(callback);
-    return _callbacks.length - 1; // index
-  },
-
-  /**
-   * dispatch
-   * @param  {object} payload The data from the action.
-   */
-  dispatch: function(payload) {
-    // First create array of promises for callbacks to reference.
-    var resolves = [];
-    var rejects = [];
-    _promises = _callbacks.map(function(_, i) {
-      return new Promise(function(resolve, reject) {
-        resolves[i] = resolve;
-        rejects[i] = reject;
-      });
-    });
-    // Dispatch to callbacks and resolve/reject promises.
-    _callbacks.forEach(function(callback, i) {
-      // Callback can return an obj, to resolve, or a promise, to chain.
-      // See waitFor() for why this might be useful.
-      Promise.resolve(callback(payload)).then(function() {
-        resolves[i](payload);
-      }, function() {
-        rejects[i](new Error('Dispatcher callback unsuccessful'));
-      });
-    });
-    _promises = [];
-  },
-
-  /**
-   * Allows a store to wait for the registered callbacks of other stores
-   * to get invoked before its own does.
-   * This function is not used by this TodoMVC example application, but
-   * it is very useful in a larger, more complex application.
-   *
-   * Example usage where StoreB waits for StoreA:
-   *
-   *   var StoreA = merge(EventEmitter.prototype, {
-   *     // other methods omitted
-   *
-   *     dispatchIndex: Dispatcher.register(function(payload) {
-   *       // switch statement with lots of cases
-   *     })
-   *   }
-   *
-   *   var StoreB = merge(EventEmitter.prototype, {
-   *     // other methods omitted
-   *
-   *     dispatchIndex: Dispatcher.register(function(payload) {
-   *       switch(payload.action.actionType) {
-   *
-   *         case MyConstants.FOO_ACTION:
-   *           Dispatcher.waitFor([StoreA.dispatchIndex], function() {
-   *             // Do stuff only after StoreA's callback returns.
-   *           });
-   *       }
-   *     })
-   *   }
-   *
-   * It should be noted that if StoreB waits for StoreA, and StoreA waits for
-   * StoreB, a circular dependency will occur, but no error will be thrown.
-   * A more robust Dispatcher would issue a warning in this scenario.
-   */
-  waitFor: function(/*array*/ promiseIndexes, /*function*/ callback) {
-    var selectedPromises = promiseIndexes.map(function(index) {
-      return _promises[index];
-    });
-    return Promise.all(selectedPromises).then(callback);
-  }
-
-});
-
-module.exports = Dispatcher;
diff --git a/examples/todomvc-flux/js/dispatcher/__tests__/AppDispatcher-test.js b/examples/todomvc-flux/js/dispatcher/__tests__/AppDispatcher-test.js
deleted file mode 100644
index b8665fdca18..00000000000
--- a/examples/todomvc-flux/js/dispatcher/__tests__/AppDispatcher-test.js
+++ /dev/null
@@ -1,76 +0,0 @@
-"use strict";
-
-jest.autoMockOff();
-
-describe('AppDispatcher', function() {
-  var AppDispatcher;
-
-  beforeEach(function() {
-    AppDispatcher = require('../AppDispatcher.js');
-  });
-
-  it('sends actions to subscribers', function() {
-    var listener = jest.genMockFunction();
-    AppDispatcher.register(listener);
-
-    var payload = {};
-    AppDispatcher.dispatch(payload);
-    expect(listener.mock.calls.length).toBe(1);
-    expect(listener.mock.calls[0][0]).toBe(payload);
-  });
-
-  it('waits with chained dependencies properly', function() {
-    var payload = {};
-
-    var listener1Done = false;
-    var listener1 = function(pl) {
-      return AppDispatcher.waitFor([index2, index4], function() {
-        // Second, third, and fourth listeners should have now been called
-        expect(listener2Done).toBe(true);
-        expect(listener3Done).toBe(true);
-        expect(listener4Done).toBe(true);
-        listener1Done = true;
-      });
-    };
-    var index1 = AppDispatcher.register(listener1);
-
-    var listener2Done = false;
-    var listener2 = function(pl) {
-      return AppDispatcher.waitFor([index3], function() {
-        expect(listener3Done).toBe(true);
-        listener2Done = true;
-      });
-    };
-    var index2 = AppDispatcher.register(listener2);
-
-    var listener3Done = false;
-    var listener3 = function(pl) {
-      listener3Done = true;
-      return true;
-    };
-    var index3 = AppDispatcher.register(listener3);
-
-    var listener4Done = false;
-    var listener4 = function(pl) {
-      return AppDispatcher.waitFor([index3], function() {
-        expect(listener3Done).toBe(true);
-        listener4Done = true;
-      });
-    };
-    var index4 = AppDispatcher.register(listener4);
-
-    runs(function() {
-      AppDispatcher.dispatch(payload);
-    });
-
-    waitsFor(function() {
-      return listener1Done;
-    }, "Not all subscribers were properly called", 500);
-
-    runs(function() {
-      expect(listener1Done).toBe(true);
-      expect(listener2Done).toBe(true);
-      expect(listener3Done).toBe(true);
-    });
-  });
-});
diff --git a/examples/todomvc-flux/js/stores/TodoStore.js b/examples/todomvc-flux/js/stores/TodoStore.js
deleted file mode 100644
index b37900aac43..00000000000
--- a/examples/todomvc-flux/js/stores/TodoStore.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * TodoStore
- */
-
-var AppDispatcher = require('../dispatcher/AppDispatcher');
-var EventEmitter = require('events').EventEmitter;
-var TodoConstants = require('../constants/TodoConstants');
-var merge = require('react/lib/merge');
-
-var CHANGE_EVENT = 'change';
-
-var _todos = {};
-
-/**
- * Create a TODO item.
- * @param  {string} text The content of the TODO
- */
-function create(text) {
-  // Hand waving here -- not showing how this interacts with XHR or persistent
-  // server-side storage.
-  // Using the current timestamp in place of a real id.
-  var id = Date.now();
-  _todos[id] = {
-    id: id,
-    complete: false,
-    text: text
-  };
-}
-
-/**
- * Update a TODO item.
- * @param  {string} id 
- * @param {object} updates An object literal containing only the data to be 
- *     updated.
- */
-function update(id, updates) {
-  _todos[id] = merge(_todos[id], updates);
-}
-
-/**
- * Update all of the TODO items with the same object. 
- *     the data to be updated.  Used to mark all TODOs as completed.
- * @param  {object} updates An object literal containing only the data to be 
- *     updated.
-
- */
-function updateAll(updates) {
-  for (var id in _todos) {
-    update(id, updates);
-  }
-}
-
-/**
- * Delete a TODO item.
- * @param  {string} id
- */
-function destroy(id) {
-  delete _todos[id];
-}
-
-/**
- * Delete all the completed TODO items.
- */
-function destroyCompleted() {
-  for (var id in _todos) {
-    if (_todos[id].complete) {
-      destroy(id);
-    }
-  }
-}
-
-var TodoStore = merge(EventEmitter.prototype, {
-  
-  /**
-   * Tests whether all the remaining TODO items are marked as completed.
-   * @return {boolean}
-   */
-  areAllComplete: function() {
-    for (id in _todos) {
-      if (!_todos[id].complete) {
-        return false;
-        break;
-      }
-    }
-    return true;
-  },
-
-  /**
-   * Get the entire collection of TODOs.
-   * @return {object}
-   */
-  getAll: function() {
-    return _todos;
-  },
-
-  emitChange: function() {
-    this.emit(CHANGE_EVENT);
-  },
-
-  /**
-   * @param {function} callback
-   */
-  addChangeListener: function(callback) {
-    this.on(CHANGE_EVENT, callback);
-  },
-
-  /**
-   * @param {function} callback
-   */
-  removeChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT, callback);
-  }
-});
-
-// Register to handle all updates
-AppDispatcher.register(function(payload) {
-  var action = payload.action;
-  var text;
-
-  switch(action.actionType) {
-    case TodoConstants.TODO_CREATE:
-      text = action.text.trim();
-      if (text !== '') {
-        create(text);
-      }
-      break;
-
-    case TodoConstants.TODO_TOGGLE_COMPLETE_ALL:
-      if (TodoStore.areAllComplete()) {
-        updateAll({complete: false});
-      } else {
-        updateAll({complete: true});
-      }
-      break;
-
-    case TodoConstants.TODO_UNDO_COMPLETE:
-      update(action.id, {complete: false});
-      break;
-
-    case TodoConstants.TODO_COMPLETE:
-      update(action.id, {complete: true});
-      break;
-
-    case TodoConstants.TODO_UPDATE_TEXT:
-      text = action.text.trim();
-      if (text !== '') {
-        update(action.id, {text: text});
-      }
-      break;
-
-    case TodoConstants.TODO_DESTROY:
-      destroy(action.id);
-      break;
-
-    case TodoConstants.TODO_DESTROY_COMPLETED:
-      destroyCompleted();
-      break;
-
-    default:
-      return true;
-  }
-
-  // This often goes in each case that should trigger a UI change. This store
-  // needs to trigger a UI change after every view action, so we can make the
-  // code less repetitive by putting it here.  We need the default case,
-  // however, to make sure this only gets called after one of the cases above.
-  TodoStore.emitChange();
-
-  return true; // No errors.  Needed by promise in Dispatcher.
-});
-
-module.exports = TodoStore;
diff --git a/examples/todomvc-flux/package.json b/examples/todomvc-flux/package.json
deleted file mode 100644
index 6741bd71c0b..00000000000
--- a/examples/todomvc-flux/package.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "name": "todomvc-flux",
-  "version": "0.0.1",
-  "description": "Example Flux architecture.",
-  "main": "js/app.js",
-  "dependencies": {
-    "es6-promise": "~0.1.1",
-    "react": "~0.11.0"
-  },
-  "devDependencies": {
-    "browserify": "~2.36.0",
-    "envify": "~1.2.0",
-    "reactify": "~0.4.0",
-    "statics": "~0.1.0",
-    "uglify-js": "~2.4.13",
-    "watchify": "~0.4.1",
-    "jest-cli": "~0.1.5"
-  },
-  "scripts": {
-    "start": "STATIC_ROOT=./static watchify -o js/bundle.js -v -d .",
-    "build": "STATIC_ROOT=./static NODE_ENV=production browserify . | uglifyjs -cm > js/bundle.min.js",
-    "collect-static": "collect-static . ./static",
-    "test": "jest"
-  },
-  "author": "Bill Fisher",
-  "license": "Apache 2",
-  "browserify": {
-    "transform": [
-      "reactify",
-      "envify"
-    ]
-  },
-  "jest": {
-    "rootDir": "./js"
-  }
-}
diff --git a/examples/todomvc-flux/todomvc-common/.bower.json b/examples/todomvc-flux/todomvc-common/.bower.json
deleted file mode 100644
index 16d4ea667e3..00000000000
--- a/examples/todomvc-flux/todomvc-common/.bower.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "name": "todomvc-common",
-  "version": "0.1.9",
-  "homepage": "https://github.com/tastejs/todomvc-common",
-  "_release": "0.1.9",
-  "_resolution": {
-    "type": "version",
-    "tag": "v0.1.9",
-    "commit": "7dd61b0ebf56c020e719a69444442cc7ae7242ff"
-  },
-  "_source": "git://github.com/tastejs/todomvc-common.git",
-  "_target": "~0.1.4",
-  "_originalSource": "todomvc-common"
-}
\ No newline at end of file
diff --git a/examples/todomvc-flux/todomvc-common/base.css b/examples/todomvc-flux/todomvc-common/base.css
deleted file mode 100644
index d151ededea4..00000000000
--- a/examples/todomvc-flux/todomvc-common/base.css
+++ /dev/null
@@ -1,556 +0,0 @@
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-button {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background: none;
-	font-size: 100%;
-	vertical-align: baseline;
-	font-family: inherit;
-	color: inherit;
-	-webkit-appearance: none;
-	-ms-appearance: none;
-	-o-appearance: none;
-	appearance: none;
-}
-
-body {
-	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.4em;
-	background: #eaeaea url('bg.png');
-	color: #4d4d4d;
-	width: 550px;
-	margin: 0 auto;
-	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	-o-font-smoothing: antialiased;
-	font-smoothing: antialiased;
-}
-
-button,
-input[type="checkbox"] {
-  outline: none;
-}
-
-#todoapp {
-	background: #fff;
-	background: rgba(255, 255, 255, 0.9);
-	margin: 130px 0 40px 0;
-	border: 1px solid #ccc;
-	position: relative;
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
-	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
-				0 25px 50px 0 rgba(0, 0, 0, 0.15);
-}
-
-#todoapp:before {
-	content: '';
-	border-left: 1px solid #f5d6d6;
-	border-right: 1px solid #f5d6d6;
-	width: 2px;
-	position: absolute;
-	top: 0;
-	left: 40px;
-	height: 100%;
-}
-
-#todoapp input::-webkit-input-placeholder {
-	font-style: italic;
-}
-
-#todoapp input::-moz-placeholder {
-	font-style: italic;
-	color: #a9a9a9;
-}
-
-#todoapp h1 {
-	position: absolute;
-	top: -120px;
-	width: 100%;
-	font-size: 70px;
-	font-weight: bold;
-	text-align: center;
-	color: #b3b3b3;
-	color: rgba(255, 255, 255, 0.3);
-	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-	-webkit-text-rendering: optimizeLegibility;
-	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
-	-o-text-rendering: optimizeLegibility;
-	text-rendering: optimizeLegibility;
-}
-
-#header {
-	padding-top: 15px;
-	border-radius: inherit;
-}
-
-#header:before {
-	content: '';
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	height: 15px;
-	z-index: 2;
-	border-bottom: 1px solid #6c615c;
-	background: #8d7d77;
-	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
-	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
-	border-top-left-radius: 1px;
-	border-top-right-radius: 1px;
-}
-
-#new-todo,
-.edit {
-	position: relative;
-	margin: 0;
-	width: 100%;
-	font-size: 24px;
-	font-family: inherit;
-	line-height: 1.4em;
-	border: 0;
-	outline: none;
-	color: inherit;
-	padding: 6px;
-	border: 1px solid #999;
-	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-moz-box-sizing: border-box;
-	-ms-box-sizing: border-box;
-	-o-box-sizing: border-box;
-	box-sizing: border-box;
-	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	-o-font-smoothing: antialiased;
-	font-smoothing: antialiased;
-}
-
-#new-todo {
-	padding: 16px 16px 16px 60px;
-	border: none;
-	background: rgba(0, 0, 0, 0.02);
-	z-index: 2;
-	box-shadow: none;
-}
-
-#main {
-	position: relative;
-	z-index: 2;
-	border-top: 1px dotted #adadad;
-}
-
-label[for='toggle-all'] {
-	display: none;
-}
-
-#toggle-all {
-	position: absolute;
-	top: -42px;
-	left: -4px;
-	width: 40px;
-	text-align: center;
-	/* Mobile Safari */
-	border: none;
-}
-
-#toggle-all:before {
-	content: '»';
-	font-size: 28px;
-	color: #d9d9d9;
-	padding: 0 25px 7px;
-}
-
-#toggle-all:checked:before {
-	color: #737373;
-}
-
-#todo-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-#todo-list li {
-	position: relative;
-	font-size: 24px;
-	border-bottom: 1px dotted #ccc;
-}
-
-#todo-list li:last-child {
-	border-bottom: none;
-}
-
-#todo-list li.editing {
-	border-bottom: none;
-	padding: 0;
-}
-
-#todo-list li.editing .edit {
-	display: block;
-	width: 506px;
-	padding: 13px 17px 12px 17px;
-	margin: 0 0 0 43px;
-}
-
-#todo-list li.editing .view {
-	display: none;
-}
-
-#todo-list li .toggle {
-	text-align: center;
-	width: 40px;
-	/* auto, since non-WebKit browsers doesn't support input styling */
-	height: auto;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	margin: auto 0;
-	/* Mobile Safari */
-	border: none;
-	-webkit-appearance: none;
-	-ms-appearance: none;
-	-o-appearance: none;
-	appearance: none;
-}
-
-#todo-list li .toggle:after {
-	content: '✔';
-	/* 40 + a couple of pixels visual adjustment */
-	line-height: 43px;
-	font-size: 20px;
-	color: #d9d9d9;
-	text-shadow: 0 -1px 0 #bfbfbf;
-}
-
-#todo-list li .toggle:checked:after {
-	color: #85ada7;
-	text-shadow: 0 1px 0 #669991;
-	bottom: 1px;
-	position: relative;
-}
-
-#todo-list li label {
-	white-space: pre;
-	word-break: break-word;
-	padding: 15px 60px 15px 15px;
-	margin-left: 45px;
-	display: block;
-	line-height: 1.2;
-	-webkit-transition: color 0.4s;
-	transition: color 0.4s;
-}
-
-#todo-list li.completed label {
-	color: #a9a9a9;
-	text-decoration: line-through;
-}
-
-#todo-list li .destroy {
-	display: none;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	bottom: 0;
-	width: 40px;
-	height: 40px;
-	margin: auto 0;
-	font-size: 22px;
-	color: #a88a8a;
-	-webkit-transition: all 0.2s;
-	transition: all 0.2s;
-}
-
-#todo-list li .destroy:hover {
-	text-shadow: 0 0 1px #000,
-				 0 0 10px rgba(199, 107, 107, 0.8);
-	-webkit-transform: scale(1.3);
-	-ms-transform: scale(1.3);
-	transform: scale(1.3);
-}
-
-#todo-list li .destroy:after {
-	content: '✖';
-}
-
-#todo-list li:hover .destroy {
-	display: block;
-}
-
-#todo-list li .edit {
-	display: none;
-}
-
-#todo-list li.editing:last-child {
-	margin-bottom: -1px;
-}
-
-#footer {
-	color: #777;
-	padding: 0 15px;
-	position: absolute;
-	right: 0;
-	bottom: -31px;
-	left: 0;
-	height: 20px;
-	z-index: 1;
-	text-align: center;
-}
-
-#footer:before {
-	content: '';
-	position: absolute;
-	right: 0;
-	bottom: 31px;
-	left: 0;
-	height: 50px;
-	z-index: -1;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
-				0 6px 0 -3px rgba(255, 255, 255, 0.8),
-				0 7px 1px -3px rgba(0, 0, 0, 0.3),
-				0 43px 0 -6px rgba(255, 255, 255, 0.8),
-				0 44px 2px -6px rgba(0, 0, 0, 0.2);
-}
-
-#todo-count {
-	float: left;
-	text-align: left;
-}
-
-#filters {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-
-#filters li {
-	display: inline;
-}
-
-#filters li a {
-	color: #83756f;
-	margin: 2px;
-	text-decoration: none;
-}
-
-#filters li a.selected {
-	font-weight: bold;
-}
-
-#clear-completed {
-	float: right;
-	position: relative;
-	line-height: 20px;
-	text-decoration: none;
-	background: rgba(0, 0, 0, 0.1);
-	font-size: 11px;
-	padding: 0 10px;
-	border-radius: 3px;
-	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
-}
-
-#clear-completed:hover {
-	background: rgba(0, 0, 0, 0.15);
-	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
-}
-
-#info {
-	margin: 65px auto 0;
-	color: #a6a6a6;
-	font-size: 12px;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
-	text-align: center;
-}
-
-#info a {
-	color: inherit;
-}
-
-/*
-	Hack to remove background from Mobile Safari.
-	Can't use it globally since it destroys checkboxes in Firefox and Opera
-*/
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-	#toggle-all,
-	#todo-list li .toggle {
-		background: none;
-	}
-
-	#todo-list li .toggle {
-		height: 40px;
-	}
-
-	#toggle-all {
-		top: -56px;
-		left: -15px;
-		width: 65px;
-		height: 41px;
-		-webkit-transform: rotate(90deg);
-		-ms-transform: rotate(90deg);
-		transform: rotate(90deg);
-		-webkit-appearance: none;
-		appearance: none;
-	}
-}
-
-.hidden {
-	display: none;
-}
-
-hr {
-	margin: 20px 0;
-	border: 0;
-	border-top: 1px dashed #C5C5C5;
-	border-bottom: 1px dashed #F7F7F7;
-}
-
-.learn a {
-	font-weight: normal;
-	text-decoration: none;
-	color: #b83f45;
-}
-
-.learn a:hover {
-	text-decoration: underline;
-	color: #787e7e;
-}
-
-.learn h3,
-.learn h4,
-.learn h5 {
-	margin: 10px 0;
-	font-weight: 500;
-	line-height: 1.2;
-	color: #000;
-}
-
-.learn h3 {
-	font-size: 24px;
-}
-
-.learn h4 {
-	font-size: 18px;
-}
-
-.learn h5 {
-	margin-bottom: 0;
-	font-size: 14px;
-}
-
-.learn ul {
-	padding: 0;
-	margin: 0 0 30px 25px;
-}
-
-.learn li {
-	line-height: 20px;
-}
-
-.learn p {
-	font-size: 15px;
-	font-weight: 300;
-	line-height: 1.3;
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.quote {
-	border: none;
-	margin: 20px 0 60px 0;
-}
-
-.quote p {
-	font-style: italic;
-}
-
-.quote p:before {
-	content: '“';
-	font-size: 50px;
-	opacity: .15;
-	position: absolute;
-	top: -20px;
-	left: 3px;
-}
-
-.quote p:after {
-	content: '”';
-	font-size: 50px;
-	opacity: .15;
-	position: absolute;
-	bottom: -42px;
-	right: 3px;
-}
-
-.quote footer {
-	position: absolute;
-	bottom: -40px;
-	right: 0;
-}
-
-.quote footer img {
-	border-radius: 3px;
-}
-
-.quote footer a {
-	margin-left: 5px;
-	vertical-align: middle;
-}
-
-.speech-bubble {
-	position: relative;
-	padding: 10px;
-	background: rgba(0, 0, 0, .04);
-	border-radius: 5px;
-}
-
-.speech-bubble:after {
-	content: '';
-	position: absolute;
-	top: 100%;
-	right: 30px;
-	border: 13px solid transparent;
-	border-top-color: rgba(0, 0, 0, .04);
-}
-
-.learn-bar > .learn {
-	position: absolute;
-	width: 272px;
-	top: 8px;
-	left: -300px;
-	padding: 10px;
-	border-radius: 5px;
-	background-color: rgba(255, 255, 255, .6);
-	-webkit-transition-property: left;
-	transition-property: left;
-	-webkit-transition-duration: 500ms;
-	transition-duration: 500ms;
-}
-
-@media (min-width: 899px) {
-	.learn-bar {
-		width: auto;
-		margin: 0 0 0 300px;
-	}
-
-	.learn-bar > .learn {
-		left: 8px;
-	}
-
-	.learn-bar #todoapp {
-		width: 550px;
-		margin: 130px auto 40px auto;
-	}
-}
diff --git a/examples/todomvc-flux/todomvc-common/bg.png b/examples/todomvc-flux/todomvc-common/bg.png
deleted file mode 100644
index b2a7600825e..00000000000
Binary files a/examples/todomvc-flux/todomvc-common/bg.png and /dev/null differ
diff --git a/examples/todomvc-flux/todomvc-common/bower.json b/examples/todomvc-flux/todomvc-common/bower.json
deleted file mode 100644
index cdc4a4321c3..00000000000
--- a/examples/todomvc-flux/todomvc-common/bower.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "todomvc-common",
-  "version": "0.1.9"
-}
diff --git a/examples/todomvc-flux/todomvc-common/readme.md b/examples/todomvc-flux/todomvc-common/readme.md
deleted file mode 100644
index 566a64c2529..00000000000
--- a/examples/todomvc-flux/todomvc-common/readme.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# todomvc-common
-
-> Bower component for some common utilities we use in every app
-
-
-## License
-
-MIT
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
deleted file mode 100644
index 17f9f7dc401..00000000000
--- a/examples/transitions/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Example with Transitions</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-    <link rel="stylesheet" href="transition.css" />
-  </head>
-  <body>
-    <h1>Example with Transitions</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="http://www.github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is not working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX and transformed in the browser.<p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../shared/thirdparty/es5-shim.min.js"></script>
-    <script src="../shared/thirdparty/es5-sham.min.js"></script>
-    <script src="../shared/thirdparty/console-polyfill.js"></script>
-    <script src="../../build/react-with-addons.js"></script>
-    <script src="../../build/JSXTransformer.js"></script>
-    <script type="text/jsx">
-      /**
-       * @jsx React.DOM
-       */
-      var CSSTransitionGroup = React.addons.CSSTransitionGroup;
-      var INTERVAL = 2000;
-
-      var AnimateDemo = React.createClass({
-        getInitialState: function() {
-          return {start: 0};
-        },
-
-        componentDidMount: function() {
-          this.interval = setInterval(this.tick, INTERVAL);
-        },
-
-        componentWillUnmount: function() {
-          clearInterval(this.interval);
-        },
-
-        tick: function() {
-          this.setState({start: this.state.start + 1});
-        },
-
-        render: function() {
-          var children = [];
-          var pos = 0;
-          var colors = ['red', 'gray', 'blue'];
-          for (var i = this.state.start; i < this.state.start + 3; i++) {
-            var style = {
-              left: pos * 128,
-              background: colors[i % 3]
-            };
-            pos++;
-            children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
-          }
-          return (
-            <CSSTransitionGroup
-              className="animateExample"
-              transitionName="example">
-              {children}
-            </CSSTransitionGroup>
-          );
-        }
-      });
-
-      React.renderComponent(
-        <AnimateDemo />,
-        document.getElementById('container')
-      );
-    </script>
-  </body>
-</html>
diff --git a/examples/transitions/transition.css b/examples/transitions/transition.css
deleted file mode 100644
index ee851d11360..00000000000
--- a/examples/transitions/transition.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.example-enter,
-.example-leave {
-  -webkit-transition: all .25s;
-  transition: all .25s;
-}
-
-.example-enter,
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-
-.example-leave.example-leave-active {
-  margin-left: -128px;
-}
-
-.example-enter {
-  margin-left: 128px;
-}
-
-.example-enter.example-enter-active,
-.example-leave {
-  margin-left: 0;
-  opacity: 1;
-}
-
-.animateExample {
-  display: block;
-  height: 128px;
-  position: relative;
-  width: 384px;
-}
-
-.animateItem {
-  color: white;
-  font-size: 36px;
-  font-weight: bold;
-  height: 128px;
-  line-height: 128px;
-  position: absolute;
-  text-align: center;
-  -webkit-transition: all .25s; /* TODO: make this a move animation */
-  transition: all .25s; /* TODO: make this a move animation */
-  width: 128px;
-}
diff --git a/fixtures/art/.gitignore b/fixtures/art/.gitignore
new file mode 100644
index 00000000000..4187d67743a
--- /dev/null
+++ b/fixtures/art/.gitignore
@@ -0,0 +1 @@
+bundle.js
\ No newline at end of file
diff --git a/fixtures/art/README.md b/fixtures/art/README.md
new file mode 100644
index 00000000000..c6b5268fe1a
--- /dev/null
+++ b/fixtures/art/README.md
@@ -0,0 +1,10 @@
+# VectorWidget example
+
+To try this example, run:
+
+```
+yarn
+yarn build
+```
+
+in this directory, then open index.html in your browser.
diff --git a/fixtures/art/VectorWidget.js b/fixtures/art/VectorWidget.js
new file mode 100644
index 00000000000..d6b5c3c41f6
--- /dev/null
+++ b/fixtures/art/VectorWidget.js
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+var Circle = require('react-art/Circle');
+var React = require('react');
+var ReactART = require('react-art');
+var Group = ReactART.Group;
+var Shape = ReactART.Shape;
+var Surface = ReactART.Surface;
+var Transform = ReactART.Transform;
+
+var MOUSE_UP_DRAG = 0.978;
+var MOUSE_DOWN_DRAG = 0.9;
+var MAX_VEL = 11;
+var CLICK_ACCEL = 3;
+var BASE_VEL = 0.15;
+
+/**
+ * An animated SVG component.
+ */
+class VectorWidget extends React.Component {
+  /**
+   * Initialize state members.
+   */
+  state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
+
+  /**
+   * When the component is mounted into the document - this is similar to a
+   * constructor, but invoked when the instance is actually mounted into the
+   * document. Here, we'll just set up an animation loop that invokes our
+   * method. Binding of `this.onTick` is not needed because all React methods
+   * are automatically bound before being mounted.
+   */
+  componentDidMount() {
+    this._interval = window.setInterval(this.onTick, 20);
+  }
+
+  componentWillUnmount() {
+    window.clearInterval(this._interval);
+  }
+
+  onTick = () => {
+    var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
+    var nextVelocity = this.state.velocity * this.state.drag;
+    this.setState({degrees: nextDegrees, velocity: nextVelocity});
+  };
+
+  /**
+   * When mousing down, we increase the friction down the velocity.
+   */
+  handleMouseDown = () => {
+    this.setState({drag: MOUSE_DOWN_DRAG});
+  };
+
+  /**
+   * Cause the rotation to "spring".
+   */
+  handleMouseUp = () => {
+    var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
+    this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
+  };
+
+  /**
+   * This is the "main" method for any component. The React API allows you to
+   * describe the structure of your UI component at *any* point in time.
+   */
+  render() {
+    return (
+      <Surface width={700} height={700} style={{cursor: 'pointer'}}>
+        {this.renderGraphic(this.state.degrees)}
+      </Surface>
+    );
+  }
+
+  /**
+   * Better SVG support for React coming soon.
+   */
+  renderGraphic = rotation => {
+    return (
+      <Group onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <Group x={210} y={135}>
+          <Shape fill="rgba(0,0,0,0.1)" d={BORDER_PATH} />
+          <Shape fill="#7BC7BA" d={BG_PATH} />
+          <Shape fill="#DCDCDC" d={BAR_PATH} />
+          <Shape fill="#D97B76" d={RED_DOT_PATH} />
+          <Shape fill="#DBBB79" d={YELLOW_DOT_PATH} />
+          <Shape fill="#A6BD8A" d={GREEN_DOT_PATH} />
+          <Group x={55} y={29}>
+            <Group rotation={rotation} originX={84} originY={89}>
+              <Group x={84} y={89}>
+                <Circle fill="#FFFFFF" radius={16} />
+              </Group>
+              <Group>
+                <Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
+                <Shape
+                  d={RING_TWO_PATH}
+                  transform={RING_TWO_ROTATE}
+                  stroke="#FFFFFF"
+                  strokeWidth={8}
+                />
+                <Shape
+                  d={RING_THREE_PATH}
+                  transform={RING_THREE_ROTATE}
+                  stroke="#FFFFFF"
+                  strokeWidth={8}
+                />
+              </Group>
+            </Group>
+          </Group>
+        </Group>
+      </Group>
+    );
+  };
+}
+
+var BORDER_PATH =
+  'M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4';
+var BG_PATH =
+  'M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1';
+var BAR_PATH =
+  'M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0';
+var RED_DOT_PATH =
+  'M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17';
+var YELLOW_DOT_PATH =
+  'M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17';
+var GREEN_DOT_PATH =
+  'M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17';
+var RING_ONE_PATH =
+  'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
+var RING_TWO_PATH =
+  'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
+var RING_THREE_PATH =
+  'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
+var RING_TWO_ROTATE = new Transform()
+  .translate(84.0, 89.0)
+  .rotate(-240.0)
+  .translate(-84.0, -89.0);
+var RING_THREE_ROTATE = new Transform()
+  .translate(84.0, 89.0)
+  .rotate(-300.0)
+  .translate(-84.0, -89.0);
+
+module.exports = VectorWidget;
diff --git a/fixtures/art/app.js b/fixtures/art/app.js
new file mode 100644
index 00000000000..d3c5d469b37
--- /dev/null
+++ b/fixtures/art/app.js
@@ -0,0 +1,7 @@
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var VectorWidget = require('./VectorWidget');
+
+ReactDOM.render(<VectorWidget />, document.getElementById('container'));
diff --git a/fixtures/art/index.html b/fixtures/art/index.html
new file mode 100644
index 00000000000..51e085a5706
--- /dev/null
+++ b/fixtures/art/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>VectorWidget</title>
+</head>
+<body>
+
+  <div id="container">
+    <p>If you're seeing this message, it means you haven't generated the bundle file for this example. Try running:</p>
+
+    <pre><code>
+    npm install
+    npm run build
+    </code></pre>
+
+    <p>then reload the page.</p>
+  </div>
+
+  <script src="bundle.js"></script>
+
+</body>
+</html>
diff --git a/fixtures/art/package.json b/fixtures/art/package.json
new file mode 100644
index 00000000000..7bab6d59eb1
--- /dev/null
+++ b/fixtures/art/package.json
@@ -0,0 +1,17 @@
+{
+  "devDependencies": {
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "babel-loader": "^8.1.0",
+    "react": "^19.0.0",
+    "react-art": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "webpack": "^1.14.0"
+  },
+  "scripts": {
+    "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "build": "webpack app.js bundle.js"
+  }
+}
diff --git a/fixtures/art/webpack.config.js b/fixtures/art/webpack.config.js
new file mode 100644
index 00000000000..d8d008961a7
--- /dev/null
+++ b/fixtures/art/webpack.config.js
@@ -0,0 +1,34 @@
+var webpack = require('webpack');
+
+module.exports = {
+  context: __dirname,
+  entry: './app.js',
+  module: {
+    loaders: [
+      {
+        loader: require.resolve('babel-loader'),
+        test: /\.js$/,
+        exclude: /node_modules/,
+        query: {
+          presets: [
+            require.resolve('@babel/preset-env'),
+            require.resolve('@babel/preset-react'),
+          ],
+          plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      react: require.resolve('react'),
+    },
+  },
+};
diff --git a/fixtures/art/yarn.lock b/fixtures/art/yarn.lock
new file mode 100644
index 00000000000..08f99e058e0
--- /dev/null
+++ b/fixtures/art/yarn.lock
@@ -0,0 +1,2827 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/compat-data@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.10.5.tgz#d38425e67ea96b1480a3f50404d1bf85676301a6"
+  integrity sha512-mPVoWNzIpYJHbWje0if7Ck36bpbtTvIxOi9+6WSK9wjGEXearAqlwBoTQvVjsAY2VIwgcs8V940geY3okzRCEw==
+  dependencies:
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
+"@babel/core@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.5.tgz#1f15e2cca8ad9a1d78a38ddba612f5e7cdbbd330"
+  integrity sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.5"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helpers" "^7.10.4"
+    "@babel/parser" "^7.10.5"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.5"
+    "@babel/types" "^7.10.5"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.5.tgz#1b903554bc8c583ee8d25f1e8969732e6b829a69"
+  integrity sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==
+  dependencies:
+    "@babel/types" "^7.10.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
+  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-builder-react-jsx-experimental@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.5.tgz#f35e956a19955ff08c1258e44a515a6d6248646b"
+  integrity sha512-Buewnx6M4ttG+NLkKyt7baQn7ScC/Td+e99G914fRU8fGIUivDDgVIQeDHFa5e4CRSJQt58WpNHhsAZgtzVhsg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.10.5"
+
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-compilation-targets@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
+  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
+  dependencies:
+    "@babel/compat-data" "^7.10.4"
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/helper-create-class-features-plugin@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
+  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-member-expression-to-functions" "^7.10.5"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+
+"@babel/helper-create-regexp-features-plugin@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz#fdd60d88524659a0b6959c0579925e425714f3b8"
+  integrity sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+    regexpu-core "^4.7.0"
+
+"@babel/helper-define-map@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
+  integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/types" "^7.10.5"
+    lodash "^4.17.19"
+
+"@babel/helper-explode-assignable-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz#40a1cd917bff1288f699a94a75b37a1a2dbd8c7c"
+  integrity sha512-4K71RyRQNPRrR85sr5QY4X3VwG4wtVoXZB9+L3r1Gp38DhELyHCtovqydRi7c1Ovb17eRGiQ/FD5s8JdU0Uy5A==
+  dependencies:
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-hoist-variables@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
+  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz#172f56e7a63e78112f3a04055f24365af702e7ee"
+  integrity sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==
+  dependencies:
+    "@babel/types" "^7.10.5"
+
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz#120c271c0b3353673fcdfd8c053db3c544a260d6"
+  integrity sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.5"
+    lodash "^4.17.19"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@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-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-regex@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
+  integrity sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==
+  dependencies:
+    lodash "^4.17.19"
+
+"@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.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz#fce8bea4e9690bbe923056ded21e54b4e8b68ed5"
+  integrity sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-wrap-function" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-split-export-declaration@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1"
+  integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-wrap-function@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
+  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helpers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044"
+  integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.10.4", "@babel/parser@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
+  integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
+
+"@babel/plugin-proposal-async-generator-functions@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
+  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+
+"@babel/plugin-proposal-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
+  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-dynamic-import@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
+  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+
+"@babel/plugin-proposal-json-strings@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
+  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
+  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
+  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz#50129ac216b9a6a55b3853fdd923e74bf553a4c0"
+  integrity sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
+  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz#750f1255e930a1f82d8cdde45031f81a0d0adff7"
+  integrity sha512-ZIhQIEeavTgouyMSdZRap4VPPHqJJ3NEs2cuHs5p0erH+iz6khB0qfgU8g7UuJkG88+fBMy23ZiU+nuHvekJeQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-private-methods@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
+  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
+  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@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.8.0":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
+  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-json-strings@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz#4bbeb8917b54fcf768364e0a81f560e33a3ef57d"
+  integrity sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-arrow-functions@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
+  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-async-to-generator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
+  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+
+"@babel/plugin-transform-block-scoped-functions@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
+  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-block-scoping@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.5.tgz#b81b8aafefbfe68f0f65f7ef397b9ece68a6037d"
+  integrity sha512-6Ycw3hjpQti0qssQcA6AMSFDHeNJ++R6dIMnpRqUjFeBBTmTDPa8zgF90OVfTvAo11mXZTlVUViY1g8ffrURLg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-classes@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz#405136af2b3e218bc4a1926228bc917ab1a0adc7"
+  integrity sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-define-map" "^7.10.4"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
+  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-destructuring@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5"
+  integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-dotall-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
+  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@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.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
+  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-exponentiation-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
+  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-for-of@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
+  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
+  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
+  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-member-expression-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
+  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-modules-amd@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
+  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
+  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
+  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-umd@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
+  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
+  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+
+"@babel/plugin-transform-new-target@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
+  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-object-super@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
+  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+
+"@babel/plugin-transform-parameters@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
+  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-property-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
+  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-display-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
+  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-development@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.4.tgz#6ec90f244394604623880e15ebc3c34c356258ba"
+  integrity sha512-RM3ZAd1sU1iQ7rI2dhrZRZGv0aqzNQMbkIUCS1txYpi9wHQ2ZHNjo5TwX+UD6pvFW4AbWqLVYvKy5qJSAyRGjQ==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-self@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-source@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
+  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-pure-annotations@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
+  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-regenerator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
+  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
+"@babel/plugin-transform-reserved-words@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
+  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-shorthand-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
+  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-spread@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.4.tgz#4e2c85ea0d6abaee1b24dcfbbae426fe8d674cff"
+  integrity sha512-1e/51G/Ni+7uH5gktbWv+eCED9pP8ZpRhZB3jOaI3mmzfvJTWHkuyYTv0Z5PYtyM+Tr2Ccr9kUdQxn60fI5WuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-sticky-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
+  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+
+"@babel/plugin-transform-template-literals@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
+  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-typeof-symbol@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
+  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-escapes@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
+  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
+  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/preset-env@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.10.4.tgz#fbf57f9a803afd97f4f32e4f798bb62e4b2bef5f"
+  integrity sha512-tcmuQ6vupfMZPrLrc38d0sF2OjLT3/bZ0dry5HchNCQbrokoQi4reXqclvkkAT5b+gWc23meVWpve5P/7+w/zw==
+  dependencies:
+    "@babel/compat-data" "^7.10.4"
+    "@babel/helper-compilation-targets" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
+    "@babel/plugin-proposal-class-properties" "^7.10.4"
+    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
+    "@babel/plugin-proposal-json-strings" "^7.10.4"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
+    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.10.4"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
+    "@babel/plugin-proposal-optional-chaining" "^7.10.4"
+    "@babel/plugin-proposal-private-methods" "^7.10.4"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.10.4"
+    "@babel/plugin-transform-arrow-functions" "^7.10.4"
+    "@babel/plugin-transform-async-to-generator" "^7.10.4"
+    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
+    "@babel/plugin-transform-block-scoping" "^7.10.4"
+    "@babel/plugin-transform-classes" "^7.10.4"
+    "@babel/plugin-transform-computed-properties" "^7.10.4"
+    "@babel/plugin-transform-destructuring" "^7.10.4"
+    "@babel/plugin-transform-dotall-regex" "^7.10.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
+    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
+    "@babel/plugin-transform-for-of" "^7.10.4"
+    "@babel/plugin-transform-function-name" "^7.10.4"
+    "@babel/plugin-transform-literals" "^7.10.4"
+    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
+    "@babel/plugin-transform-modules-amd" "^7.10.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
+    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
+    "@babel/plugin-transform-modules-umd" "^7.10.4"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
+    "@babel/plugin-transform-new-target" "^7.10.4"
+    "@babel/plugin-transform-object-super" "^7.10.4"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+    "@babel/plugin-transform-property-literals" "^7.10.4"
+    "@babel/plugin-transform-regenerator" "^7.10.4"
+    "@babel/plugin-transform-reserved-words" "^7.10.4"
+    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
+    "@babel/plugin-transform-spread" "^7.10.4"
+    "@babel/plugin-transform-sticky-regex" "^7.10.4"
+    "@babel/plugin-transform-template-literals" "^7.10.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
+    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
+    "@babel/plugin-transform-unicode-regex" "^7.10.4"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.10.4"
+    browserslist "^4.12.0"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
+  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
+  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
+
+"@babel/runtime@^7.8.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.5.tgz#303d8bd440ecd5a491eae6117fd3367698674c5c"
+  integrity sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564"
+  integrity sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/parser" "^7.10.5"
+    "@babel/types" "^7.10.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/types@^7.10.4", "@babel/types@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"
+  integrity sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.4.4":
+  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"
+
+"@types/json-schema@^7.0.4":
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
+  integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+
+abbrev@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+ajv-keywords@^3.4.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.1.tgz#b83ca89c5d42d69031f424cad49aada0236c6957"
+  integrity sha512-KWcq3xN8fDjSB+IMoh2VaXVhRI0BBGxoYp3rx7Pkb6z0cFjYR9Q9l4yZqqals0/zsioCmocC5H6UvsGD4MoIBA==
+
+ajv@^4.9.1:
+  version "4.11.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.5.tgz#b6ee74657b993a01dce44b7944d56f485828d5bd"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^6.12.2:
+  version "6.12.3"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706"
+  integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+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"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+aproba@^1.0.3:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.1.tgz#95d3600f07710aa0e9298c726ad5ecf2eacbabab"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.0 || ^1.1.13"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+art@^0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
+  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+babel-loader@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+balanced-match@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+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.8.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+  dependencies:
+    balanced-match "^0.4.1"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^4.12.0, browserslist@^4.8.5:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.13.0.tgz#42556cba011e1b0a2775b611cba6a8eca18e940d"
+  integrity sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==
+  dependencies:
+    caniuse-lite "^1.0.30001093"
+    electron-to-chromium "^1.3.488"
+    escalade "^3.0.1"
+    node-releases "^1.1.58"
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
+buffer@^4.9.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-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"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+caniuse-lite@^1.0.30001093:
+  version "1.0.30001105"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001105.tgz#d2cb0b31e5cf2f3ce845033b61c5c01566549abf"
+  integrity sha512-JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg==
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@^2.0.0:
+  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.0.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  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"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+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"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+core-js-compat@^3.6.2:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
+  integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==
+  dependencies:
+    browserslist "^4.8.5"
+    semver "7.0.0"
+
+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"
+
+create-react-class@^15.6.2:
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
+  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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"
+
+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.2.0:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
+  dependencies:
+    ms "0.7.2"
+
+debug@^4.1.0:
+  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"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+
+define-properties@^1.1.2:
+  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"
+
+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"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+electron-to-chromium@^1.3.488:
+  version "1.3.505"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.505.tgz#0e55edbdfc13700b6742a73c81c0af7d0d71364f"
+  integrity sha512-Aunrp3HWtmdiJLIl+IPSFtEvJ/4Q9a3eKaxmzCthaZF1gbTbpHUTCU2zOVnFPH7r/AD7zQXyuFidYXzSHXBdsw==
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+escalade@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
+  integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
+
+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=
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+filename-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+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@^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"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  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"
+
+form-data@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.1.tgz#f19fd28f43eeaf761680e519a203c4d0b3d31aff"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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==
+
+gauge@~2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.3.tgz#1c23855f962f17b3ad3d0dc7443f304542edfe09"
+  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"
+
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
+  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+
+getpass@^0.1.1:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  dependencies:
+    assert-plus "^1.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"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.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==
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+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"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.1, inherits@~2.0.0, inherits@~2.0.1:
+  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"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
+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"
+
+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:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-dotfile@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.0.2, is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  dependencies:
+    kind-of "^3.0.2"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+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"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jodid25519@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
+  dependencies:
+    jsbn "~0.1.0"
+
+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", 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==
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jsesc@^2.5.1:
+  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"
+
+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"
+
+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"
+
+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"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
+
+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.0"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.0.tgz#a3b87e40298d8c380552d8cc7628a0bb95a22918"
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.0.2"
+    json-schema "0.2.3"
+    verror "1.3.6"
+
+kind-of@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+  dependencies:
+    is-buffer "^1.0.2"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+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==
+
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+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@^4.17.13, lodash@^4.17.19:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+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:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loose-envify@^1.1.0, loose-envify@^1.3.1:
+  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"
+
+make-dir@^2.0.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"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.27.0.tgz#820f572296bbd20ec25ed55e5b5de869e5436eb1"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.15.tgz#a4ebf5064094569237b8cf70046776d09fc92aed"
+  dependencies:
+    mime-db "~1.27.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+"mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+mkdirp@^0.5.3:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+ms@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+
+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==
+
+nan@^2.3.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.34"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
+  dependencies:
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "^2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
+
+node-releases@^1.1.58:
+  version "1.1.60"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
+  integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
+
+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-path@^2.0.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"
+
+npmlog@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.1"
+    set-blocking "~2.0.0"
+
+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"
+
+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.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 sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+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.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.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  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"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+p-limit@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.0.tgz#417c9941e6027a9abcba5092dd2904e255b5fbc2"
+  integrity sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==
+  dependencies:
+    p-try "^2.0.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-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==
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+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==
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+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==
+
+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"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@^0.11.0:
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+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:
+  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.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+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"
+
+randomatic@^1.1.3:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
+  dependencies:
+    is-number "^2.0.2"
+    kind-of "^3.0.2"
+
+rc@^1.1.7:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-art@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-art/-/react-art-18.2.0.tgz#73b3929b1a0ce781b088bce76186d3793f0106c5"
+  integrity sha512-HfSK9OBtPIpkdI4QZAyWSxCIbM/I7+nqjybxp2FLmiFS7RN+eCEvOY0KdPw+6//B1oIU31t2o35s5EEhe0Fodw==
+  dependencies:
+    art "^0.10.1"
+    create-react-class "^15.6.2"
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.4, readable-stream@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.6.tgz#8b43aed76e71483938d12a8d46c6cf1a00b1f816"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regenerate-unicode-properties@^8.0.2:
+  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-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+  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"
+  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.5.4.tgz#080d9d02289aa87fe1667a4f5136bc98a6aebaae"
+  integrity sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.0.2"
+    regjsgen "^0.5.0"
+    regjsparser "^0.6.0"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.1.0"
+
+regexpu-core@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
+  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.2.0"
+
+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==
+
+regjsgen@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+
+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"
+
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
+  dependencies:
+    jsesc "~0.5.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.1.tgz#615ebb96af559552d4bf4057c8436d486ab63cc4"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+resolve@^1.3.2:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
+  integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
+  dependencies:
+    path-parse "^1.0.6"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+safe-buffer@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
+
+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==
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
+schema-utils@^2.6.5:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
+  integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map@^0.5.0, source-map@~0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+sshpk@^1.7.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.11.0.tgz#2d8d5ebb4a6fab28ffba37fa62a90f4a3ea59d77"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jodid25519 "^1.0.0"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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-http@^2.3.1:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.0.tgz#cec1f4e3b494bc4a81b451808970f8b20b4ed5f6"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.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_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"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+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-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"
+
+supports-color@^3.1.0:
+  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.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"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  dependencies:
+    setimmediate "^1.0.4"
+
+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"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.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"
+
+uglify-js@~2.7.3:
+  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-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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+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-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
+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==
+
+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"
+
+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"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.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"
+
+uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
+verror@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+wide-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/attribute-behavior/.gitignore b/fixtures/attribute-behavior/.gitignore
new file mode 100644
index 00000000000..49c5a75db94
--- /dev/null
+++ b/fixtures/attribute-behavior/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/public/react.development.js
+/public/react-dom.development.js
+/public/react-dom-server.browser.development.js
+
+# 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/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
new file mode 100644
index 00000000000..004a35db8d4
--- /dev/null
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -0,0 +1,13950 @@
+## `about` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `about=(string)`| (changed)| `"a string"` |
+| `about=(empty string)`| (changed)| `<empty string>` |
+| `about=(array with string)`| (changed)| `"string"` |
+| `about=(empty array)`| (changed)| `<empty string>` |
+| `about=(object)`| (changed)| `"result of toString()"` |
+| `about=(numeric string)`| (changed)| `"42"` |
+| `about=(-1)`| (changed)| `"-1"` |
+| `about=(0)`| (changed)| `"0"` |
+| `about=(integer)`| (changed)| `"1"` |
+| `about=(NaN)`| (changed, warning)| `"NaN"` |
+| `about=(float)`| (changed)| `"99.99"` |
+| `about=(true)`| (initial, warning)| `<null>` |
+| `about=(false)`| (initial, warning)| `<null>` |
+| `about=(string 'true')`| (changed)| `"true"` |
+| `about=(string 'false')`| (changed)| `"false"` |
+| `about=(string 'on')`| (changed)| `"on"` |
+| `about=(string 'off')`| (changed)| `"off"` |
+| `about=(symbol)`| (initial, warning)| `<null>` |
+| `about=(function)`| (initial, warning)| `<null>` |
+| `about=(null)`| (initial)| `<null>` |
+| `about=(undefined)`| (initial)| `<null>` |
+
+## `aBoUt` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `aBoUt=(string)`| (changed, warning)| `"a string"` |
+| `aBoUt=(empty string)`| (changed, warning)| `<empty string>` |
+| `aBoUt=(array with string)`| (changed, warning)| `"string"` |
+| `aBoUt=(empty array)`| (changed, warning)| `<empty string>` |
+| `aBoUt=(object)`| (changed, warning)| `"result of toString()"` |
+| `aBoUt=(numeric string)`| (changed, warning)| `"42"` |
+| `aBoUt=(-1)`| (changed, warning)| `"-1"` |
+| `aBoUt=(0)`| (changed, warning)| `"0"` |
+| `aBoUt=(integer)`| (changed, warning)| `"1"` |
+| `aBoUt=(NaN)`| (changed, warning)| `"NaN"` |
+| `aBoUt=(float)`| (changed, warning)| `"99.99"` |
+| `aBoUt=(true)`| (initial, warning)| `<null>` |
+| `aBoUt=(false)`| (initial, warning)| `<null>` |
+| `aBoUt=(string 'true')`| (changed, warning)| `"true"` |
+| `aBoUt=(string 'false')`| (changed, warning)| `"false"` |
+| `aBoUt=(string 'on')`| (changed, warning)| `"on"` |
+| `aBoUt=(string 'off')`| (changed, warning)| `"off"` |
+| `aBoUt=(symbol)`| (initial, warning)| `<null>` |
+| `aBoUt=(function)`| (initial, warning)| `<null>` |
+| `aBoUt=(null)`| (initial, warning)| `<null>` |
+| `aBoUt=(undefined)`| (initial, warning)| `<null>` |
+
+## `accent-Height` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accent-Height=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(float)`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(true)`| (initial, warning)| `<null>` |
+| `accent-Height=(false)`| (initial, warning)| `<null>` |
+| `accent-Height=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
+| `accent-Height=(symbol)`| (initial, warning)| `<null>` |
+| `accent-Height=(function)`| (initial, warning)| `<null>` |
+| `accent-Height=(null)`| (initial, warning)| `<null>` |
+| `accent-Height=(undefined)`| (initial, warning)| `<null>` |
+
+## `accent-height` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accent-height=(string)`| (changed, warning)| `"a string"` |
+| `accent-height=(empty string)`| (changed, warning)| `<empty string>` |
+| `accent-height=(array with string)`| (changed, warning)| `"string"` |
+| `accent-height=(empty array)`| (changed, warning)| `<empty string>` |
+| `accent-height=(object)`| (changed, warning)| `"result of toString()"` |
+| `accent-height=(numeric string)`| (changed, warning)| `"42"` |
+| `accent-height=(-1)`| (changed, warning)| `"-1"` |
+| `accent-height=(0)`| (changed, warning)| `"0"` |
+| `accent-height=(integer)`| (changed, warning)| `"1"` |
+| `accent-height=(NaN)`| (changed, warning)| `"NaN"` |
+| `accent-height=(float)`| (changed, warning)| `"99.99"` |
+| `accent-height=(true)`| (initial, warning)| `<null>` |
+| `accent-height=(false)`| (initial, warning)| `<null>` |
+| `accent-height=(string 'true')`| (changed, warning)| `"true"` |
+| `accent-height=(string 'false')`| (changed, warning)| `"false"` |
+| `accent-height=(string 'on')`| (changed, warning)| `"on"` |
+| `accent-height=(string 'off')`| (changed, warning)| `"off"` |
+| `accent-height=(symbol)`| (initial, warning)| `<null>` |
+| `accent-height=(function)`| (initial, warning)| `<null>` |
+| `accent-height=(null)`| (initial, warning)| `<null>` |
+| `accent-height=(undefined)`| (initial, warning)| `<null>` |
+
+## `accentHeight` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accentHeight=(string)`| (changed)| `"a string"` |
+| `accentHeight=(empty string)`| (changed)| `<empty string>` |
+| `accentHeight=(array with string)`| (changed)| `"string"` |
+| `accentHeight=(empty array)`| (changed)| `<empty string>` |
+| `accentHeight=(object)`| (changed)| `"result of toString()"` |
+| `accentHeight=(numeric string)`| (changed)| `"42"` |
+| `accentHeight=(-1)`| (changed)| `"-1"` |
+| `accentHeight=(0)`| (changed)| `"0"` |
+| `accentHeight=(integer)`| (changed)| `"1"` |
+| `accentHeight=(NaN)`| (changed, warning)| `"NaN"` |
+| `accentHeight=(float)`| (changed)| `"99.99"` |
+| `accentHeight=(true)`| (initial, warning)| `<null>` |
+| `accentHeight=(false)`| (initial, warning)| `<null>` |
+| `accentHeight=(string 'true')`| (changed)| `"true"` |
+| `accentHeight=(string 'false')`| (changed)| `"false"` |
+| `accentHeight=(string 'on')`| (changed)| `"on"` |
+| `accentHeight=(string 'off')`| (changed)| `"off"` |
+| `accentHeight=(symbol)`| (initial, warning)| `<null>` |
+| `accentHeight=(function)`| (initial, warning)| `<null>` |
+| `accentHeight=(null)`| (initial)| `<null>` |
+| `accentHeight=(undefined)`| (initial)| `<null>` |
+
+## `accept` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accept=(string)`| (changed)| `"a string"` |
+| `accept=(empty string)`| (initial)| `<empty string>` |
+| `accept=(array with string)`| (changed)| `"string"` |
+| `accept=(empty array)`| (initial)| `<empty string>` |
+| `accept=(object)`| (changed)| `"result of toString()"` |
+| `accept=(numeric string)`| (changed)| `"42"` |
+| `accept=(-1)`| (changed)| `"-1"` |
+| `accept=(0)`| (changed)| `"0"` |
+| `accept=(integer)`| (changed)| `"1"` |
+| `accept=(NaN)`| (changed, warning)| `"NaN"` |
+| `accept=(float)`| (changed)| `"99.99"` |
+| `accept=(true)`| (initial, warning)| `<empty string>` |
+| `accept=(false)`| (initial, warning)| `<empty string>` |
+| `accept=(string 'true')`| (changed)| `"true"` |
+| `accept=(string 'false')`| (changed)| `"false"` |
+| `accept=(string 'on')`| (changed)| `"on"` |
+| `accept=(string 'off')`| (changed)| `"off"` |
+| `accept=(symbol)`| (initial, warning)| `<empty string>` |
+| `accept=(function)`| (initial, warning)| `<empty string>` |
+| `accept=(null)`| (initial)| `<empty string>` |
+| `accept=(undefined)`| (initial)| `<empty string>` |
+
+## `accept-charset` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accept-charset=(string)`| (changed, warning)| `"a string"` |
+| `accept-charset=(empty string)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(array with string)`| (changed, warning)| `"string"` |
+| `accept-charset=(empty array)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(object)`| (changed, warning)| `"result of toString()"` |
+| `accept-charset=(numeric string)`| (changed, warning)| `"42"` |
+| `accept-charset=(-1)`| (changed, warning)| `"-1"` |
+| `accept-charset=(0)`| (changed, warning)| `"0"` |
+| `accept-charset=(integer)`| (changed, warning)| `"1"` |
+| `accept-charset=(NaN)`| (changed, warning)| `"NaN"` |
+| `accept-charset=(float)`| (changed, warning)| `"99.99"` |
+| `accept-charset=(true)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(false)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(string 'true')`| (changed, warning)| `"true"` |
+| `accept-charset=(string 'false')`| (changed, warning)| `"false"` |
+| `accept-charset=(string 'on')`| (changed, warning)| `"on"` |
+| `accept-charset=(string 'off')`| (changed, warning)| `"off"` |
+| `accept-charset=(symbol)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(function)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(null)`| (initial, warning)| `<empty string>` |
+| `accept-charset=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `accept-Charset` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accept-Charset=(string)`| (changed, warning)| `"a string"` |
+| `accept-Charset=(empty string)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(array with string)`| (changed, warning)| `"string"` |
+| `accept-Charset=(empty array)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(object)`| (changed, warning)| `"result of toString()"` |
+| `accept-Charset=(numeric string)`| (changed, warning)| `"42"` |
+| `accept-Charset=(-1)`| (changed, warning)| `"-1"` |
+| `accept-Charset=(0)`| (changed, warning)| `"0"` |
+| `accept-Charset=(integer)`| (changed, warning)| `"1"` |
+| `accept-Charset=(NaN)`| (changed, warning)| `"NaN"` |
+| `accept-Charset=(float)`| (changed, warning)| `"99.99"` |
+| `accept-Charset=(true)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(false)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(string 'true')`| (changed, warning)| `"true"` |
+| `accept-Charset=(string 'false')`| (changed, warning)| `"false"` |
+| `accept-Charset=(string 'on')`| (changed, warning)| `"on"` |
+| `accept-Charset=(string 'off')`| (changed, warning)| `"off"` |
+| `accept-Charset=(symbol)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(function)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(null)`| (initial, warning)| `<empty string>` |
+| `accept-Charset=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `acceptCharset` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `acceptCharset=(string)`| (changed)| `"a string"` |
+| `acceptCharset=(empty string)`| (initial)| `<empty string>` |
+| `acceptCharset=(array with string)`| (changed)| `"string"` |
+| `acceptCharset=(empty array)`| (initial)| `<empty string>` |
+| `acceptCharset=(object)`| (changed)| `"result of toString()"` |
+| `acceptCharset=(numeric string)`| (changed)| `"42"` |
+| `acceptCharset=(-1)`| (changed)| `"-1"` |
+| `acceptCharset=(0)`| (changed)| `"0"` |
+| `acceptCharset=(integer)`| (changed)| `"1"` |
+| `acceptCharset=(NaN)`| (changed, warning)| `"NaN"` |
+| `acceptCharset=(float)`| (changed)| `"99.99"` |
+| `acceptCharset=(true)`| (initial, warning)| `<empty string>` |
+| `acceptCharset=(false)`| (initial, warning)| `<empty string>` |
+| `acceptCharset=(string 'true')`| (changed)| `"true"` |
+| `acceptCharset=(string 'false')`| (changed)| `"false"` |
+| `acceptCharset=(string 'on')`| (changed)| `"on"` |
+| `acceptCharset=(string 'off')`| (changed)| `"off"` |
+| `acceptCharset=(symbol)`| (initial, warning)| `<empty string>` |
+| `acceptCharset=(function)`| (initial, warning)| `<empty string>` |
+| `acceptCharset=(null)`| (initial)| `<empty string>` |
+| `acceptCharset=(undefined)`| (initial)| `<empty string>` |
+
+## `accessKey` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accessKey=(string)`| (changed)| `"a string"` |
+| `accessKey=(empty string)`| (initial)| `<empty string>` |
+| `accessKey=(array with string)`| (changed)| `"string"` |
+| `accessKey=(empty array)`| (initial)| `<empty string>` |
+| `accessKey=(object)`| (changed)| `"result of toString()"` |
+| `accessKey=(numeric string)`| (changed)| `"42"` |
+| `accessKey=(-1)`| (changed)| `"-1"` |
+| `accessKey=(0)`| (changed)| `"0"` |
+| `accessKey=(integer)`| (changed)| `"1"` |
+| `accessKey=(NaN)`| (changed, warning)| `"NaN"` |
+| `accessKey=(float)`| (changed)| `"99.99"` |
+| `accessKey=(true)`| (initial, warning)| `<empty string>` |
+| `accessKey=(false)`| (initial, warning)| `<empty string>` |
+| `accessKey=(string 'true')`| (changed)| `"true"` |
+| `accessKey=(string 'false')`| (changed)| `"false"` |
+| `accessKey=(string 'on')`| (changed)| `"on"` |
+| `accessKey=(string 'off')`| (changed)| `"off"` |
+| `accessKey=(symbol)`| (initial, warning)| `<empty string>` |
+| `accessKey=(function)`| (initial, warning)| `<empty string>` |
+| `accessKey=(null)`| (initial)| `<empty string>` |
+| `accessKey=(undefined)`| (initial)| `<empty string>` |
+
+## `accumulate` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `accumulate=(string)`| (changed)| `"a string"` |
+| `accumulate=(empty string)`| (changed)| `<empty string>` |
+| `accumulate=(array with string)`| (changed)| `"string"` |
+| `accumulate=(empty array)`| (changed)| `<empty string>` |
+| `accumulate=(object)`| (changed)| `"result of toString()"` |
+| `accumulate=(numeric string)`| (changed)| `"42"` |
+| `accumulate=(-1)`| (changed)| `"-1"` |
+| `accumulate=(0)`| (changed)| `"0"` |
+| `accumulate=(integer)`| (changed)| `"1"` |
+| `accumulate=(NaN)`| (changed, warning)| `"NaN"` |
+| `accumulate=(float)`| (changed)| `"99.99"` |
+| `accumulate=(true)`| (initial, warning)| `<null>` |
+| `accumulate=(false)`| (initial, warning)| `<null>` |
+| `accumulate=(string 'true')`| (changed)| `"true"` |
+| `accumulate=(string 'false')`| (changed)| `"false"` |
+| `accumulate=(string 'on')`| (changed)| `"on"` |
+| `accumulate=(string 'off')`| (changed)| `"off"` |
+| `accumulate=(symbol)`| (initial, warning)| `<null>` |
+| `accumulate=(function)`| (initial, warning)| `<null>` |
+| `accumulate=(null)`| (initial)| `<null>` |
+| `accumulate=(undefined)`| (initial)| `<null>` |
+
+## `action` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `action=(string)`| (changed)| `"https://reactjs.com/"` |
+| `action=(empty string)`| (initial)| `"http://localhost:3000/"` |
+| `action=(array with string)`| (changed)| `"https://reactjs.com/"` |
+| `action=(empty array)`| (initial)| `"http://localhost:3000/"` |
+| `action=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
+| `action=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
+| `action=(-1)`| (changed)| `"http://localhost:3000/-1"` |
+| `action=(0)`| (changed)| `"http://localhost:3000/0"` |
+| `action=(integer)`| (changed)| `"http://localhost:3000/1"` |
+| `action=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
+| `action=(float)`| (changed)| `"http://localhost:3000/99.99"` |
+| `action=(true)`| (initial, warning)| `"http://localhost:3000/"` |
+| `action=(false)`| (initial, warning)| `"http://localhost:3000/"` |
+| `action=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
+| `action=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
+| `action=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
+| `action=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
+| `action=(symbol)`| (initial, warning)| `"http://localhost:3000/"` |
+| `action=(function)`| (changed, ssr error, ssr mismatch)| `"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"` |
+| `action=(null)`| (initial)| `"http://localhost:3000/"` |
+| `action=(undefined)`| (initial)| `"http://localhost:3000/"` |
+
+## `additive` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `additive=(string)`| (changed)| `"a string"` |
+| `additive=(empty string)`| (changed)| `<empty string>` |
+| `additive=(array with string)`| (changed)| `"string"` |
+| `additive=(empty array)`| (changed)| `<empty string>` |
+| `additive=(object)`| (changed)| `"result of toString()"` |
+| `additive=(numeric string)`| (changed)| `"42"` |
+| `additive=(-1)`| (changed)| `"-1"` |
+| `additive=(0)`| (changed)| `"0"` |
+| `additive=(integer)`| (changed)| `"1"` |
+| `additive=(NaN)`| (changed, warning)| `"NaN"` |
+| `additive=(float)`| (changed)| `"99.99"` |
+| `additive=(true)`| (initial, warning)| `<null>` |
+| `additive=(false)`| (initial, warning)| `<null>` |
+| `additive=(string 'true')`| (changed)| `"true"` |
+| `additive=(string 'false')`| (changed)| `"false"` |
+| `additive=(string 'on')`| (changed)| `"on"` |
+| `additive=(string 'off')`| (changed)| `"off"` |
+| `additive=(symbol)`| (initial, warning)| `<null>` |
+| `additive=(function)`| (initial, warning)| `<null>` |
+| `additive=(null)`| (initial)| `<null>` |
+| `additive=(undefined)`| (initial)| `<null>` |
+
+## `alignment-baseline` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `alignment-baseline=(string)`| (changed, warning)| `"a string"` |
+| `alignment-baseline=(empty string)`| (changed, warning)| `<empty string>` |
+| `alignment-baseline=(array with string)`| (changed, warning)| `"string"` |
+| `alignment-baseline=(empty array)`| (changed, warning)| `<empty string>` |
+| `alignment-baseline=(object)`| (changed, warning)| `"result of toString()"` |
+| `alignment-baseline=(numeric string)`| (changed, warning)| `"42"` |
+| `alignment-baseline=(-1)`| (changed, warning)| `"-1"` |
+| `alignment-baseline=(0)`| (changed, warning)| `"0"` |
+| `alignment-baseline=(integer)`| (changed, warning)| `"1"` |
+| `alignment-baseline=(NaN)`| (changed, warning)| `"NaN"` |
+| `alignment-baseline=(float)`| (changed, warning)| `"99.99"` |
+| `alignment-baseline=(true)`| (initial, warning)| `<null>` |
+| `alignment-baseline=(false)`| (initial, warning)| `<null>` |
+| `alignment-baseline=(string 'true')`| (changed, warning)| `"true"` |
+| `alignment-baseline=(string 'false')`| (changed, warning)| `"false"` |
+| `alignment-baseline=(string 'on')`| (changed, warning)| `"on"` |
+| `alignment-baseline=(string 'off')`| (changed, warning)| `"off"` |
+| `alignment-baseline=(symbol)`| (initial, warning)| `<null>` |
+| `alignment-baseline=(function)`| (initial, warning)| `<null>` |
+| `alignment-baseline=(null)`| (initial, warning)| `<null>` |
+| `alignment-baseline=(undefined)`| (initial, warning)| `<null>` |
+
+## `alignmentBaseline` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `alignmentBaseline=(string)`| (changed)| `"a string"` |
+| `alignmentBaseline=(empty string)`| (changed)| `<empty string>` |
+| `alignmentBaseline=(array with string)`| (changed)| `"string"` |
+| `alignmentBaseline=(empty array)`| (changed)| `<empty string>` |
+| `alignmentBaseline=(object)`| (changed)| `"result of toString()"` |
+| `alignmentBaseline=(numeric string)`| (changed)| `"42"` |
+| `alignmentBaseline=(-1)`| (changed)| `"-1"` |
+| `alignmentBaseline=(0)`| (changed)| `"0"` |
+| `alignmentBaseline=(integer)`| (changed)| `"1"` |
+| `alignmentBaseline=(NaN)`| (changed, warning)| `"NaN"` |
+| `alignmentBaseline=(float)`| (changed)| `"99.99"` |
+| `alignmentBaseline=(true)`| (initial, warning)| `<null>` |
+| `alignmentBaseline=(false)`| (initial, warning)| `<null>` |
+| `alignmentBaseline=(string 'true')`| (changed)| `"true"` |
+| `alignmentBaseline=(string 'false')`| (changed)| `"false"` |
+| `alignmentBaseline=(string 'on')`| (changed)| `"on"` |
+| `alignmentBaseline=(string 'off')`| (changed)| `"off"` |
+| `alignmentBaseline=(symbol)`| (initial, warning)| `<null>` |
+| `alignmentBaseline=(function)`| (initial, warning)| `<null>` |
+| `alignmentBaseline=(null)`| (initial)| `<null>` |
+| `alignmentBaseline=(undefined)`| (initial)| `<null>` |
+
+## `allowFullScreen` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `allowFullScreen=(string)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(empty string)`| (initial)| `<boolean: false>` |
+| `allowFullScreen=(array with string)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(empty array)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(object)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(numeric string)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(-1)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(0)`| (initial)| `<boolean: false>` |
+| `allowFullScreen=(integer)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `allowFullScreen=(float)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(true)`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(false)`| (initial)| `<boolean: false>` |
+| `allowFullScreen=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `allowFullScreen=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `allowFullScreen=(string 'on')`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(string 'off')`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `allowFullScreen=(function)`| (initial, warning)| `<boolean: false>` |
+| `allowFullScreen=(null)`| (initial)| `<boolean: false>` |
+| `allowFullScreen=(undefined)`| (initial)| `<boolean: false>` |
+
+## `allowfullscreen` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `allowfullscreen=(string)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(empty string)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(array with string)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(empty array)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(object)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(numeric string)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(-1)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(0)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(integer)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(NaN)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(float)`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(true)`| (initial, warning)| `<boolean: false>` |
+| `allowfullscreen=(false)`| (initial, warning)| `<boolean: false>` |
+| `allowfullscreen=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(string 'on')`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(string 'off')`| (changed, warning)| `<boolean: true>` |
+| `allowfullscreen=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `allowfullscreen=(function)`| (initial, warning)| `<boolean: false>` |
+| `allowfullscreen=(null)`| (initial, warning)| `<boolean: false>` |
+| `allowfullscreen=(undefined)`| (initial, warning)| `<boolean: false>` |
+
+## `allowFullscreen` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `allowFullscreen=(string)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(empty string)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(array with string)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(empty array)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(object)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(numeric string)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(-1)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(0)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(integer)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(NaN)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(float)`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(true)`| (initial, warning)| `<boolean: false>` |
+| `allowFullscreen=(false)`| (initial, warning)| `<boolean: false>` |
+| `allowFullscreen=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(string 'on')`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(string 'off')`| (changed, warning)| `<boolean: true>` |
+| `allowFullscreen=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `allowFullscreen=(function)`| (initial, warning)| `<boolean: false>` |
+| `allowFullscreen=(null)`| (initial, warning)| `<boolean: false>` |
+| `allowFullscreen=(undefined)`| (initial, warning)| `<boolean: false>` |
+
+## `allowReorder` (on `<switch>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `allowReorder=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `allowReorder=(empty string)`| (changed, ssr mismatch)| `<empty string>` |
+| `allowReorder=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `allowReorder=(empty array)`| (changed, ssr mismatch)| `<empty string>` |
+| `allowReorder=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `allowReorder=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `allowReorder=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `allowReorder=(0)`| (changed, ssr mismatch)| `"0"` |
+| `allowReorder=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `allowReorder=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `allowReorder=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `allowReorder=(true)`| (initial, warning)| `<null>` |
+| `allowReorder=(false)`| (initial, warning)| `<null>` |
+| `allowReorder=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `allowReorder=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `allowReorder=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `allowReorder=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `allowReorder=(symbol)`| (initial, warning)| `<null>` |
+| `allowReorder=(function)`| (initial, warning)| `<null>` |
+| `allowReorder=(null)`| (initial)| `<null>` |
+| `allowReorder=(undefined)`| (initial)| `<null>` |
+
+## `alphabetic` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `alphabetic=(string)`| (changed)| `"a string"` |
+| `alphabetic=(empty string)`| (changed)| `<empty string>` |
+| `alphabetic=(array with string)`| (changed)| `"string"` |
+| `alphabetic=(empty array)`| (changed)| `<empty string>` |
+| `alphabetic=(object)`| (changed)| `"result of toString()"` |
+| `alphabetic=(numeric string)`| (changed)| `"42"` |
+| `alphabetic=(-1)`| (changed)| `"-1"` |
+| `alphabetic=(0)`| (changed)| `"0"` |
+| `alphabetic=(integer)`| (changed)| `"1"` |
+| `alphabetic=(NaN)`| (changed, warning)| `"NaN"` |
+| `alphabetic=(float)`| (changed)| `"99.99"` |
+| `alphabetic=(true)`| (initial, warning)| `<null>` |
+| `alphabetic=(false)`| (initial, warning)| `<null>` |
+| `alphabetic=(string 'true')`| (changed)| `"true"` |
+| `alphabetic=(string 'false')`| (changed)| `"false"` |
+| `alphabetic=(string 'on')`| (changed)| `"on"` |
+| `alphabetic=(string 'off')`| (changed)| `"off"` |
+| `alphabetic=(symbol)`| (initial, warning)| `<null>` |
+| `alphabetic=(function)`| (initial, warning)| `<null>` |
+| `alphabetic=(null)`| (initial)| `<null>` |
+| `alphabetic=(undefined)`| (initial)| `<null>` |
+
+## `alt` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `alt=(string)`| (changed)| `"a string"` |
+| `alt=(empty string)`| (initial)| `<empty string>` |
+| `alt=(array with string)`| (changed)| `"string"` |
+| `alt=(empty array)`| (initial)| `<empty string>` |
+| `alt=(object)`| (changed)| `"result of toString()"` |
+| `alt=(numeric string)`| (changed)| `"42"` |
+| `alt=(-1)`| (changed)| `"-1"` |
+| `alt=(0)`| (changed)| `"0"` |
+| `alt=(integer)`| (changed)| `"1"` |
+| `alt=(NaN)`| (changed, warning)| `"NaN"` |
+| `alt=(float)`| (changed)| `"99.99"` |
+| `alt=(true)`| (initial, warning)| `<empty string>` |
+| `alt=(false)`| (initial, warning)| `<empty string>` |
+| `alt=(string 'true')`| (changed)| `"true"` |
+| `alt=(string 'false')`| (changed)| `"false"` |
+| `alt=(string 'on')`| (changed)| `"on"` |
+| `alt=(string 'off')`| (changed)| `"off"` |
+| `alt=(symbol)`| (initial, warning)| `<empty string>` |
+| `alt=(function)`| (initial, warning)| `<empty string>` |
+| `alt=(null)`| (initial)| `<empty string>` |
+| `alt=(undefined)`| (initial)| `<empty string>` |
+
+## `amplitude` (on `<feFuncA>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `amplitude=(string)`| (initial)| `<number: 1>` |
+| `amplitude=(empty string)`| (changed)| `<number: 0>` |
+| `amplitude=(array with string)`| (initial)| `<number: 1>` |
+| `amplitude=(empty array)`| (changed)| `<number: 0>` |
+| `amplitude=(object)`| (initial)| `<number: 1>` |
+| `amplitude=(numeric string)`| (changed)| `<number: 42>` |
+| `amplitude=(-1)`| (changed)| `<number: -1>` |
+| `amplitude=(0)`| (changed)| `<number: 0>` |
+| `amplitude=(integer)`| (initial)| `<number: 1>` |
+| `amplitude=(NaN)`| (initial, warning)| `<number: 1>` |
+| `amplitude=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `amplitude=(true)`| (initial, warning)| `<number: 1>` |
+| `amplitude=(false)`| (initial, warning)| `<number: 1>` |
+| `amplitude=(string 'true')`| (initial)| `<number: 1>` |
+| `amplitude=(string 'false')`| (initial)| `<number: 1>` |
+| `amplitude=(string 'on')`| (initial)| `<number: 1>` |
+| `amplitude=(string 'off')`| (initial)| `<number: 1>` |
+| `amplitude=(symbol)`| (initial, warning)| `<number: 1>` |
+| `amplitude=(function)`| (initial, warning)| `<number: 1>` |
+| `amplitude=(null)`| (initial)| `<number: 1>` |
+| `amplitude=(undefined)`| (initial)| `<number: 1>` |
+
+## `arabic-form` (on `<glyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `arabic-form=(string)`| (changed, warning)| `"a string"` |
+| `arabic-form=(empty string)`| (changed, warning)| `<empty string>` |
+| `arabic-form=(array with string)`| (changed, warning)| `"string"` |
+| `arabic-form=(empty array)`| (changed, warning)| `<empty string>` |
+| `arabic-form=(object)`| (changed, warning)| `"result of toString()"` |
+| `arabic-form=(numeric string)`| (changed, warning)| `"42"` |
+| `arabic-form=(-1)`| (changed, warning)| `"-1"` |
+| `arabic-form=(0)`| (changed, warning)| `"0"` |
+| `arabic-form=(integer)`| (changed, warning)| `"1"` |
+| `arabic-form=(NaN)`| (changed, warning)| `"NaN"` |
+| `arabic-form=(float)`| (changed, warning)| `"99.99"` |
+| `arabic-form=(true)`| (initial, warning)| `<null>` |
+| `arabic-form=(false)`| (initial, warning)| `<null>` |
+| `arabic-form=(string 'true')`| (changed, warning)| `"true"` |
+| `arabic-form=(string 'false')`| (changed, warning)| `"false"` |
+| `arabic-form=(string 'on')`| (changed, warning)| `"on"` |
+| `arabic-form=(string 'off')`| (changed, warning)| `"off"` |
+| `arabic-form=(symbol)`| (initial, warning)| `<null>` |
+| `arabic-form=(function)`| (initial, warning)| `<null>` |
+| `arabic-form=(null)`| (initial, warning)| `<null>` |
+| `arabic-form=(undefined)`| (initial, warning)| `<null>` |
+
+## `arabicForm` (on `<glyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `arabicForm=(string)`| (changed)| `"a string"` |
+| `arabicForm=(empty string)`| (changed)| `<empty string>` |
+| `arabicForm=(array with string)`| (changed)| `"string"` |
+| `arabicForm=(empty array)`| (changed)| `<empty string>` |
+| `arabicForm=(object)`| (changed)| `"result of toString()"` |
+| `arabicForm=(numeric string)`| (changed)| `"42"` |
+| `arabicForm=(-1)`| (changed)| `"-1"` |
+| `arabicForm=(0)`| (changed)| `"0"` |
+| `arabicForm=(integer)`| (changed)| `"1"` |
+| `arabicForm=(NaN)`| (changed, warning)| `"NaN"` |
+| `arabicForm=(float)`| (changed)| `"99.99"` |
+| `arabicForm=(true)`| (initial, warning)| `<null>` |
+| `arabicForm=(false)`| (initial, warning)| `<null>` |
+| `arabicForm=(string 'true')`| (changed)| `"true"` |
+| `arabicForm=(string 'false')`| (changed)| `"false"` |
+| `arabicForm=(string 'on')`| (changed)| `"on"` |
+| `arabicForm=(string 'off')`| (changed)| `"off"` |
+| `arabicForm=(symbol)`| (initial, warning)| `<null>` |
+| `arabicForm=(function)`| (initial, warning)| `<null>` |
+| `arabicForm=(null)`| (initial)| `<null>` |
+| `arabicForm=(undefined)`| (initial)| `<null>` |
+
+## `aria` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `aria=(string)`| (changed, warning)| `"a string"` |
+| `aria=(empty string)`| (changed, warning)| `<empty string>` |
+| `aria=(array with string)`| (changed, warning)| `"string"` |
+| `aria=(empty array)`| (changed, warning)| `<empty string>` |
+| `aria=(object)`| (changed, warning)| `"result of toString()"` |
+| `aria=(numeric string)`| (changed, warning)| `"42"` |
+| `aria=(-1)`| (changed, warning)| `"-1"` |
+| `aria=(0)`| (changed, warning)| `"0"` |
+| `aria=(integer)`| (changed, warning)| `"1"` |
+| `aria=(NaN)`| (changed, warning)| `"NaN"` |
+| `aria=(float)`| (changed, warning)| `"99.99"` |
+| `aria=(true)`| (initial, warning)| `<null>` |
+| `aria=(false)`| (initial, warning)| `<null>` |
+| `aria=(string 'true')`| (changed, warning)| `"true"` |
+| `aria=(string 'false')`| (changed, warning)| `"false"` |
+| `aria=(string 'on')`| (changed, warning)| `"on"` |
+| `aria=(string 'off')`| (changed, warning)| `"off"` |
+| `aria=(symbol)`| (initial, warning)| `<null>` |
+| `aria=(function)`| (initial, warning)| `<null>` |
+| `aria=(null)`| (initial, warning)| `<null>` |
+| `aria=(undefined)`| (initial, warning)| `<null>` |
+
+## `aria-` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `aria-=(string)`| (changed, warning)| `"a string"` |
+| `aria-=(empty string)`| (changed, warning)| `<empty string>` |
+| `aria-=(array with string)`| (changed, warning)| `"string"` |
+| `aria-=(empty array)`| (changed, warning)| `<empty string>` |
+| `aria-=(object)`| (changed, warning)| `"result of toString()"` |
+| `aria-=(numeric string)`| (changed, warning)| `"42"` |
+| `aria-=(-1)`| (changed, warning)| `"-1"` |
+| `aria-=(0)`| (changed, warning)| `"0"` |
+| `aria-=(integer)`| (changed, warning)| `"1"` |
+| `aria-=(NaN)`| (changed, warning)| `"NaN"` |
+| `aria-=(float)`| (changed, warning)| `"99.99"` |
+| `aria-=(true)`| (changed, warning)| `"true"` |
+| `aria-=(false)`| (changed, warning)| `"false"` |
+| `aria-=(string 'true')`| (changed, warning)| `"true"` |
+| `aria-=(string 'false')`| (changed, warning)| `"false"` |
+| `aria-=(string 'on')`| (changed, warning)| `"on"` |
+| `aria-=(string 'off')`| (changed, warning)| `"off"` |
+| `aria-=(symbol)`| (initial, warning)| `<null>` |
+| `aria-=(function)`| (initial, warning)| `<null>` |
+| `aria-=(null)`| (initial, warning)| `<null>` |
+| `aria-=(undefined)`| (initial, warning)| `<null>` |
+
+## `aria-hidden` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `aria-hidden=(string)`| (changed)| `"a string"` |
+| `aria-hidden=(empty string)`| (changed)| `<empty string>` |
+| `aria-hidden=(array with string)`| (changed)| `"string"` |
+| `aria-hidden=(empty array)`| (changed)| `<empty string>` |
+| `aria-hidden=(object)`| (changed)| `"result of toString()"` |
+| `aria-hidden=(numeric string)`| (changed)| `"42"` |
+| `aria-hidden=(-1)`| (changed)| `"-1"` |
+| `aria-hidden=(0)`| (changed)| `"0"` |
+| `aria-hidden=(integer)`| (changed)| `"1"` |
+| `aria-hidden=(NaN)`| (changed)| `"NaN"` |
+| `aria-hidden=(float)`| (changed)| `"99.99"` |
+| `aria-hidden=(true)`| (changed)| `"true"` |
+| `aria-hidden=(false)`| (changed)| `"false"` |
+| `aria-hidden=(string 'true')`| (changed)| `"true"` |
+| `aria-hidden=(string 'false')`| (changed)| `"false"` |
+| `aria-hidden=(string 'on')`| (changed)| `"on"` |
+| `aria-hidden=(string 'off')`| (changed)| `"off"` |
+| `aria-hidden=(symbol)`| (initial)| `<null>` |
+| `aria-hidden=(function)`| (initial)| `<null>` |
+| `aria-hidden=(null)`| (initial)| `<null>` |
+| `aria-hidden=(undefined)`| (initial)| `<null>` |
+
+## `aria-invalidattribute` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `aria-invalidattribute=(string)`| (changed, warning)| `"a string"` |
+| `aria-invalidattribute=(empty string)`| (changed, warning)| `<empty string>` |
+| `aria-invalidattribute=(array with string)`| (changed, warning)| `"string"` |
+| `aria-invalidattribute=(empty array)`| (changed, warning)| `<empty string>` |
+| `aria-invalidattribute=(object)`| (changed, warning)| `"result of toString()"` |
+| `aria-invalidattribute=(numeric string)`| (changed, warning)| `"42"` |
+| `aria-invalidattribute=(-1)`| (changed, warning)| `"-1"` |
+| `aria-invalidattribute=(0)`| (changed, warning)| `"0"` |
+| `aria-invalidattribute=(integer)`| (changed, warning)| `"1"` |
+| `aria-invalidattribute=(NaN)`| (changed, warning)| `"NaN"` |
+| `aria-invalidattribute=(float)`| (changed, warning)| `"99.99"` |
+| `aria-invalidattribute=(true)`| (changed, warning)| `"true"` |
+| `aria-invalidattribute=(false)`| (changed, warning)| `"false"` |
+| `aria-invalidattribute=(string 'true')`| (changed, warning)| `"true"` |
+| `aria-invalidattribute=(string 'false')`| (changed, warning)| `"false"` |
+| `aria-invalidattribute=(string 'on')`| (changed, warning)| `"on"` |
+| `aria-invalidattribute=(string 'off')`| (changed, warning)| `"off"` |
+| `aria-invalidattribute=(symbol)`| (initial, warning)| `<null>` |
+| `aria-invalidattribute=(function)`| (initial, warning)| `<null>` |
+| `aria-invalidattribute=(null)`| (initial, warning)| `<null>` |
+| `aria-invalidattribute=(undefined)`| (initial, warning)| `<null>` |
+
+## `as` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `as=(string)`| (initial)| `<empty string>` |
+| `as=(empty string)`| (initial)| `<empty string>` |
+| `as=(array with string)`| (initial)| `<empty string>` |
+| `as=(empty array)`| (initial)| `<empty string>` |
+| `as=(object)`| (initial)| `<empty string>` |
+| `as=(numeric string)`| (initial)| `<empty string>` |
+| `as=(-1)`| (initial)| `<empty string>` |
+| `as=(0)`| (initial)| `<empty string>` |
+| `as=(integer)`| (initial)| `<empty string>` |
+| `as=(NaN)`| (initial, warning)| `<empty string>` |
+| `as=(float)`| (initial)| `<empty string>` |
+| `as=(true)`| (initial, warning)| `<empty string>` |
+| `as=(false)`| (initial, warning)| `<empty string>` |
+| `as=(string 'true')`| (initial)| `<empty string>` |
+| `as=(string 'false')`| (initial)| `<empty string>` |
+| `as=(string 'on')`| (initial)| `<empty string>` |
+| `as=(string 'off')`| (initial)| `<empty string>` |
+| `as=(symbol)`| (initial, warning)| `<empty string>` |
+| `as=(function)`| (initial, warning)| `<empty string>` |
+| `as=(null)`| (initial)| `<empty string>` |
+| `as=(undefined)`| (initial)| `<empty string>` |
+
+## `ascent` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `ascent=(string)`| (changed)| `"a string"` |
+| `ascent=(empty string)`| (changed)| `<empty string>` |
+| `ascent=(array with string)`| (changed)| `"string"` |
+| `ascent=(empty array)`| (changed)| `<empty string>` |
+| `ascent=(object)`| (changed)| `"result of toString()"` |
+| `ascent=(numeric string)`| (changed)| `"42"` |
+| `ascent=(-1)`| (changed)| `"-1"` |
+| `ascent=(0)`| (changed)| `"0"` |
+| `ascent=(integer)`| (changed)| `"1"` |
+| `ascent=(NaN)`| (changed, warning)| `"NaN"` |
+| `ascent=(float)`| (changed)| `"99.99"` |
+| `ascent=(true)`| (initial, warning)| `<null>` |
+| `ascent=(false)`| (initial, warning)| `<null>` |
+| `ascent=(string 'true')`| (changed)| `"true"` |
+| `ascent=(string 'false')`| (changed)| `"false"` |
+| `ascent=(string 'on')`| (changed)| `"on"` |
+| `ascent=(string 'off')`| (changed)| `"off"` |
+| `ascent=(symbol)`| (initial, warning)| `<null>` |
+| `ascent=(function)`| (initial, warning)| `<null>` |
+| `ascent=(null)`| (initial)| `<null>` |
+| `ascent=(undefined)`| (initial)| `<null>` |
+
+## `async` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `async=(string)`| (changed)| `<boolean: true>` |
+| `async=(empty string)`| (initial)| `<boolean: false>` |
+| `async=(array with string)`| (changed)| `<boolean: true>` |
+| `async=(empty array)`| (changed)| `<boolean: true>` |
+| `async=(object)`| (changed)| `<boolean: true>` |
+| `async=(numeric string)`| (changed)| `<boolean: true>` |
+| `async=(-1)`| (changed)| `<boolean: true>` |
+| `async=(0)`| (initial)| `<boolean: false>` |
+| `async=(integer)`| (changed)| `<boolean: true>` |
+| `async=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `async=(float)`| (changed)| `<boolean: true>` |
+| `async=(true)`| (changed)| `<boolean: true>` |
+| `async=(false)`| (initial)| `<boolean: false>` |
+| `async=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `async=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `async=(string 'on')`| (changed)| `<boolean: true>` |
+| `async=(string 'off')`| (changed)| `<boolean: true>` |
+| `async=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `async=(function)`| (initial, warning)| `<boolean: false>` |
+| `async=(null)`| (initial)| `<boolean: false>` |
+| `async=(undefined)`| (initial)| `<boolean: false>` |
+
+## `attributeName` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `attributeName=(string)`| (changed)| `"a string"` |
+| `attributeName=(empty string)`| (changed)| `<empty string>` |
+| `attributeName=(array with string)`| (changed)| `"string"` |
+| `attributeName=(empty array)`| (changed)| `<empty string>` |
+| `attributeName=(object)`| (changed)| `"result of toString()"` |
+| `attributeName=(numeric string)`| (changed)| `"42"` |
+| `attributeName=(-1)`| (changed)| `"-1"` |
+| `attributeName=(0)`| (changed)| `"0"` |
+| `attributeName=(integer)`| (changed)| `"1"` |
+| `attributeName=(NaN)`| (changed, warning)| `"NaN"` |
+| `attributeName=(float)`| (changed)| `"99.99"` |
+| `attributeName=(true)`| (initial, warning)| `<null>` |
+| `attributeName=(false)`| (initial, warning)| `<null>` |
+| `attributeName=(string 'true')`| (changed)| `"true"` |
+| `attributeName=(string 'false')`| (changed)| `"false"` |
+| `attributeName=(string 'on')`| (changed)| `"on"` |
+| `attributeName=(string 'off')`| (changed)| `"off"` |
+| `attributeName=(symbol)`| (initial, warning)| `<null>` |
+| `attributeName=(function)`| (initial, warning)| `<null>` |
+| `attributeName=(null)`| (initial)| `<null>` |
+| `attributeName=(undefined)`| (initial)| `<null>` |
+
+## `attributeType` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `attributeType=(string)`| (changed)| `"a string"` |
+| `attributeType=(empty string)`| (changed)| `<empty string>` |
+| `attributeType=(array with string)`| (changed)| `"string"` |
+| `attributeType=(empty array)`| (changed)| `<empty string>` |
+| `attributeType=(object)`| (changed)| `"result of toString()"` |
+| `attributeType=(numeric string)`| (changed)| `"42"` |
+| `attributeType=(-1)`| (changed)| `"-1"` |
+| `attributeType=(0)`| (changed)| `"0"` |
+| `attributeType=(integer)`| (changed)| `"1"` |
+| `attributeType=(NaN)`| (changed, warning)| `"NaN"` |
+| `attributeType=(float)`| (changed)| `"99.99"` |
+| `attributeType=(true)`| (initial, warning)| `<null>` |
+| `attributeType=(false)`| (initial, warning)| `<null>` |
+| `attributeType=(string 'true')`| (changed)| `"true"` |
+| `attributeType=(string 'false')`| (changed)| `"false"` |
+| `attributeType=(string 'on')`| (changed)| `"on"` |
+| `attributeType=(string 'off')`| (changed)| `"off"` |
+| `attributeType=(symbol)`| (initial, warning)| `<null>` |
+| `attributeType=(function)`| (initial, warning)| `<null>` |
+| `attributeType=(null)`| (initial)| `<null>` |
+| `attributeType=(undefined)`| (initial)| `<null>` |
+
+## `autoCapitalize` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `autoCapitalize=(string)`| (changed)| `"words"` |
+| `autoCapitalize=(empty string)`| (initial)| `<empty string>` |
+| `autoCapitalize=(array with string)`| (changed)| `"words"` |
+| `autoCapitalize=(empty array)`| (initial)| `<empty string>` |
+| `autoCapitalize=(object)`| (changed)| `"sentences"` |
+| `autoCapitalize=(numeric string)`| (changed)| `"sentences"` |
+| `autoCapitalize=(-1)`| (changed)| `"sentences"` |
+| `autoCapitalize=(0)`| (changed)| `"sentences"` |
+| `autoCapitalize=(integer)`| (changed)| `"sentences"` |
+| `autoCapitalize=(NaN)`| (changed, warning)| `"sentences"` |
+| `autoCapitalize=(float)`| (changed)| `"sentences"` |
+| `autoCapitalize=(true)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(false)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(string 'true')`| (changed)| `"sentences"` |
+| `autoCapitalize=(string 'false')`| (changed)| `"sentences"` |
+| `autoCapitalize=(string 'on')`| (changed)| `"sentences"` |
+| `autoCapitalize=(string 'off')`| (changed)| `"none"` |
+| `autoCapitalize=(symbol)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(function)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(null)`| (initial)| `<empty string>` |
+| `autoCapitalize=(undefined)`| (initial)| `<empty string>` |
+
+## `autoComplete` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `autoComplete=(string)`| (changed)| `"email"` |
+| `autoComplete=(empty string)`| (initial)| `<empty string>` |
+| `autoComplete=(array with string)`| (changed)| `"email"` |
+| `autoComplete=(empty array)`| (initial)| `<empty string>` |
+| `autoComplete=(object)`| (initial)| `<empty string>` |
+| `autoComplete=(numeric string)`| (initial)| `<empty string>` |
+| `autoComplete=(-1)`| (initial)| `<empty string>` |
+| `autoComplete=(0)`| (initial)| `<empty string>` |
+| `autoComplete=(integer)`| (initial)| `<empty string>` |
+| `autoComplete=(NaN)`| (initial, warning)| `<empty string>` |
+| `autoComplete=(float)`| (initial)| `<empty string>` |
+| `autoComplete=(true)`| (initial, warning)| `<empty string>` |
+| `autoComplete=(false)`| (initial, warning)| `<empty string>` |
+| `autoComplete=(string 'true')`| (initial)| `<empty string>` |
+| `autoComplete=(string 'false')`| (initial)| `<empty string>` |
+| `autoComplete=(string 'on')`| (changed)| `"on"` |
+| `autoComplete=(string 'off')`| (changed)| `"off"` |
+| `autoComplete=(symbol)`| (initial, warning)| `<empty string>` |
+| `autoComplete=(function)`| (initial, warning)| `<empty string>` |
+| `autoComplete=(null)`| (initial)| `<empty string>` |
+| `autoComplete=(undefined)`| (initial)| `<empty string>` |
+
+## `autoCorrect` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `autoCorrect=(string)`| (changed)| `"off"` |
+| `autoCorrect=(empty string)`| (changed)| `<empty string>` |
+| `autoCorrect=(array with string)`| (changed)| `"off"` |
+| `autoCorrect=(empty array)`| (changed)| `<empty string>` |
+| `autoCorrect=(object)`| (changed)| `"result of toString()"` |
+| `autoCorrect=(numeric string)`| (changed)| `"42"` |
+| `autoCorrect=(-1)`| (changed)| `"-1"` |
+| `autoCorrect=(0)`| (changed)| `"0"` |
+| `autoCorrect=(integer)`| (changed)| `"1"` |
+| `autoCorrect=(NaN)`| (changed, warning)| `"NaN"` |
+| `autoCorrect=(float)`| (changed)| `"99.99"` |
+| `autoCorrect=(true)`| (initial, warning)| `<null>` |
+| `autoCorrect=(false)`| (initial, warning)| `<null>` |
+| `autoCorrect=(string 'true')`| (changed)| `"true"` |
+| `autoCorrect=(string 'false')`| (changed)| `"false"` |
+| `autoCorrect=(string 'on')`| (changed)| `"on"` |
+| `autoCorrect=(string 'off')`| (changed)| `"off"` |
+| `autoCorrect=(symbol)`| (initial, warning)| `<null>` |
+| `autoCorrect=(function)`| (initial, warning)| `<null>` |
+| `autoCorrect=(null)`| (initial)| `<null>` |
+| `autoCorrect=(undefined)`| (initial)| `<null>` |
+
+## `autoPlay` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `autoPlay=(string)`| (changed)| `<boolean: true>` |
+| `autoPlay=(empty string)`| (initial)| `<boolean: false>` |
+| `autoPlay=(array with string)`| (changed)| `<boolean: true>` |
+| `autoPlay=(empty array)`| (changed)| `<boolean: true>` |
+| `autoPlay=(object)`| (changed)| `<boolean: true>` |
+| `autoPlay=(numeric string)`| (changed)| `<boolean: true>` |
+| `autoPlay=(-1)`| (changed)| `<boolean: true>` |
+| `autoPlay=(0)`| (initial)| `<boolean: false>` |
+| `autoPlay=(integer)`| (changed)| `<boolean: true>` |
+| `autoPlay=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `autoPlay=(float)`| (changed)| `<boolean: true>` |
+| `autoPlay=(true)`| (changed)| `<boolean: true>` |
+| `autoPlay=(false)`| (initial)| `<boolean: false>` |
+| `autoPlay=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `autoPlay=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `autoPlay=(string 'on')`| (changed)| `<boolean: true>` |
+| `autoPlay=(string 'off')`| (changed)| `<boolean: true>` |
+| `autoPlay=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `autoPlay=(function)`| (initial, warning)| `<boolean: false>` |
+| `autoPlay=(null)`| (initial)| `<boolean: false>` |
+| `autoPlay=(undefined)`| (initial)| `<boolean: false>` |
+
+## `autoReverse` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `autoReverse=(string)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(empty string)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(array with string)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(empty array)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(object)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(numeric string)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(-1)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(0)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(integer)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `autoReverse=(float)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(true)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(false)`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(string 'true')`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(string 'false')`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(string 'on')`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(string 'off')`| (initial, ssr mismatch)| `<null>` |
+| `autoReverse=(symbol)`| (initial, warning)| `<null>` |
+| `autoReverse=(function)`| (initial, warning)| `<null>` |
+| `autoReverse=(null)`| (initial)| `<null>` |
+| `autoReverse=(undefined)`| (initial)| `<null>` |
+
+## `autoSave` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `autoSave=(string)`| (changed)| `"a string"` |
+| `autoSave=(empty string)`| (changed)| `<empty string>` |
+| `autoSave=(array with string)`| (changed)| `"string"` |
+| `autoSave=(empty array)`| (changed)| `<empty string>` |
+| `autoSave=(object)`| (changed)| `"result of toString()"` |
+| `autoSave=(numeric string)`| (changed)| `"42"` |
+| `autoSave=(-1)`| (changed)| `"-1"` |
+| `autoSave=(0)`| (changed)| `"0"` |
+| `autoSave=(integer)`| (changed)| `"1"` |
+| `autoSave=(NaN)`| (changed, warning)| `"NaN"` |
+| `autoSave=(float)`| (changed)| `"99.99"` |
+| `autoSave=(true)`| (initial, warning)| `<null>` |
+| `autoSave=(false)`| (initial, warning)| `<null>` |
+| `autoSave=(string 'true')`| (changed)| `"true"` |
+| `autoSave=(string 'false')`| (changed)| `"false"` |
+| `autoSave=(string 'on')`| (changed)| `"on"` |
+| `autoSave=(string 'off')`| (changed)| `"off"` |
+| `autoSave=(symbol)`| (initial, warning)| `<null>` |
+| `autoSave=(function)`| (initial, warning)| `<null>` |
+| `autoSave=(null)`| (initial)| `<null>` |
+| `autoSave=(undefined)`| (initial)| `<null>` |
+
+## `azimuth` (on `<feDistantLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `azimuth=(string)`| (initial)| `<number: 0>` |
+| `azimuth=(empty string)`| (initial)| `<number: 0>` |
+| `azimuth=(array with string)`| (initial)| `<number: 0>` |
+| `azimuth=(empty array)`| (initial)| `<number: 0>` |
+| `azimuth=(object)`| (initial)| `<number: 0>` |
+| `azimuth=(numeric string)`| (changed)| `<number: 42>` |
+| `azimuth=(-1)`| (changed)| `<number: -1>` |
+| `azimuth=(0)`| (initial)| `<number: 0>` |
+| `azimuth=(integer)`| (changed)| `<number: 1>` |
+| `azimuth=(NaN)`| (initial, warning)| `<number: 0>` |
+| `azimuth=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `azimuth=(true)`| (initial, warning)| `<number: 0>` |
+| `azimuth=(false)`| (initial, warning)| `<number: 0>` |
+| `azimuth=(string 'true')`| (initial)| `<number: 0>` |
+| `azimuth=(string 'false')`| (initial)| `<number: 0>` |
+| `azimuth=(string 'on')`| (initial)| `<number: 0>` |
+| `azimuth=(string 'off')`| (initial)| `<number: 0>` |
+| `azimuth=(symbol)`| (initial, warning)| `<number: 0>` |
+| `azimuth=(function)`| (initial, warning)| `<number: 0>` |
+| `azimuth=(null)`| (initial)| `<number: 0>` |
+| `azimuth=(undefined)`| (initial)| `<number: 0>` |
+
+## `baseFrequency` (on `<feTurbulence>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `baseFrequency=(string)`| (changed)| `"a string"` |
+| `baseFrequency=(empty string)`| (changed)| `<empty string>` |
+| `baseFrequency=(array with string)`| (changed)| `"string"` |
+| `baseFrequency=(empty array)`| (changed)| `<empty string>` |
+| `baseFrequency=(object)`| (changed)| `"result of toString()"` |
+| `baseFrequency=(numeric string)`| (changed)| `"42"` |
+| `baseFrequency=(-1)`| (changed)| `"-1"` |
+| `baseFrequency=(0)`| (changed)| `"0"` |
+| `baseFrequency=(integer)`| (changed)| `"1"` |
+| `baseFrequency=(NaN)`| (changed, warning)| `"NaN"` |
+| `baseFrequency=(float)`| (changed)| `"99.99"` |
+| `baseFrequency=(true)`| (initial, warning)| `<null>` |
+| `baseFrequency=(false)`| (initial, warning)| `<null>` |
+| `baseFrequency=(string 'true')`| (changed)| `"true"` |
+| `baseFrequency=(string 'false')`| (changed)| `"false"` |
+| `baseFrequency=(string 'on')`| (changed)| `"on"` |
+| `baseFrequency=(string 'off')`| (changed)| `"off"` |
+| `baseFrequency=(symbol)`| (initial, warning)| `<null>` |
+| `baseFrequency=(function)`| (initial, warning)| `<null>` |
+| `baseFrequency=(null)`| (initial)| `<null>` |
+| `baseFrequency=(undefined)`| (initial)| `<null>` |
+
+## `baseline-shift` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `baseline-shift=(string)`| (changed, warning)| `"a string"` |
+| `baseline-shift=(empty string)`| (changed, warning)| `<empty string>` |
+| `baseline-shift=(array with string)`| (changed, warning)| `"string"` |
+| `baseline-shift=(empty array)`| (changed, warning)| `<empty string>` |
+| `baseline-shift=(object)`| (changed, warning)| `"result of toString()"` |
+| `baseline-shift=(numeric string)`| (changed, warning)| `"42"` |
+| `baseline-shift=(-1)`| (changed, warning)| `"-1"` |
+| `baseline-shift=(0)`| (changed, warning)| `"0"` |
+| `baseline-shift=(integer)`| (changed, warning)| `"1"` |
+| `baseline-shift=(NaN)`| (changed, warning)| `"NaN"` |
+| `baseline-shift=(float)`| (changed, warning)| `"99.99"` |
+| `baseline-shift=(true)`| (initial, warning)| `<null>` |
+| `baseline-shift=(false)`| (initial, warning)| `<null>` |
+| `baseline-shift=(string 'true')`| (changed, warning)| `"true"` |
+| `baseline-shift=(string 'false')`| (changed, warning)| `"false"` |
+| `baseline-shift=(string 'on')`| (changed, warning)| `"on"` |
+| `baseline-shift=(string 'off')`| (changed, warning)| `"off"` |
+| `baseline-shift=(symbol)`| (initial, warning)| `<null>` |
+| `baseline-shift=(function)`| (initial, warning)| `<null>` |
+| `baseline-shift=(null)`| (initial, warning)| `<null>` |
+| `baseline-shift=(undefined)`| (initial, warning)| `<null>` |
+
+## `baselineShift` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `baselineShift=(string)`| (changed)| `"a string"` |
+| `baselineShift=(empty string)`| (changed)| `<empty string>` |
+| `baselineShift=(array with string)`| (changed)| `"string"` |
+| `baselineShift=(empty array)`| (changed)| `<empty string>` |
+| `baselineShift=(object)`| (changed)| `"result of toString()"` |
+| `baselineShift=(numeric string)`| (changed)| `"42"` |
+| `baselineShift=(-1)`| (changed)| `"-1"` |
+| `baselineShift=(0)`| (changed)| `"0"` |
+| `baselineShift=(integer)`| (changed)| `"1"` |
+| `baselineShift=(NaN)`| (changed, warning)| `"NaN"` |
+| `baselineShift=(float)`| (changed)| `"99.99"` |
+| `baselineShift=(true)`| (initial, warning)| `<null>` |
+| `baselineShift=(false)`| (initial, warning)| `<null>` |
+| `baselineShift=(string 'true')`| (changed)| `"true"` |
+| `baselineShift=(string 'false')`| (changed)| `"false"` |
+| `baselineShift=(string 'on')`| (changed)| `"on"` |
+| `baselineShift=(string 'off')`| (changed)| `"off"` |
+| `baselineShift=(symbol)`| (initial, warning)| `<null>` |
+| `baselineShift=(function)`| (initial, warning)| `<null>` |
+| `baselineShift=(null)`| (initial)| `<null>` |
+| `baselineShift=(undefined)`| (initial)| `<null>` |
+
+## `baseProfile` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `baseProfile=(string)`| (changed)| `"a string"` |
+| `baseProfile=(empty string)`| (changed)| `<empty string>` |
+| `baseProfile=(array with string)`| (changed)| `"string"` |
+| `baseProfile=(empty array)`| (changed)| `<empty string>` |
+| `baseProfile=(object)`| (changed)| `"result of toString()"` |
+| `baseProfile=(numeric string)`| (changed)| `"42"` |
+| `baseProfile=(-1)`| (changed)| `"-1"` |
+| `baseProfile=(0)`| (changed)| `"0"` |
+| `baseProfile=(integer)`| (changed)| `"1"` |
+| `baseProfile=(NaN)`| (changed, warning)| `"NaN"` |
+| `baseProfile=(float)`| (changed)| `"99.99"` |
+| `baseProfile=(true)`| (initial, warning)| `<null>` |
+| `baseProfile=(false)`| (initial, warning)| `<null>` |
+| `baseProfile=(string 'true')`| (changed)| `"true"` |
+| `baseProfile=(string 'false')`| (changed)| `"false"` |
+| `baseProfile=(string 'on')`| (changed)| `"on"` |
+| `baseProfile=(string 'off')`| (changed)| `"off"` |
+| `baseProfile=(symbol)`| (initial, warning)| `<null>` |
+| `baseProfile=(function)`| (initial, warning)| `<null>` |
+| `baseProfile=(null)`| (initial)| `<null>` |
+| `baseProfile=(undefined)`| (initial)| `<null>` |
+
+## `bbox` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `bbox=(string)`| (changed)| `"a string"` |
+| `bbox=(empty string)`| (changed)| `<empty string>` |
+| `bbox=(array with string)`| (changed)| `"string"` |
+| `bbox=(empty array)`| (changed)| `<empty string>` |
+| `bbox=(object)`| (changed)| `"result of toString()"` |
+| `bbox=(numeric string)`| (changed)| `"42"` |
+| `bbox=(-1)`| (changed)| `"-1"` |
+| `bbox=(0)`| (changed)| `"0"` |
+| `bbox=(integer)`| (changed)| `"1"` |
+| `bbox=(NaN)`| (changed, warning)| `"NaN"` |
+| `bbox=(float)`| (changed)| `"99.99"` |
+| `bbox=(true)`| (initial, warning)| `<null>` |
+| `bbox=(false)`| (initial, warning)| `<null>` |
+| `bbox=(string 'true')`| (changed)| `"true"` |
+| `bbox=(string 'false')`| (changed)| `"false"` |
+| `bbox=(string 'on')`| (changed)| `"on"` |
+| `bbox=(string 'off')`| (changed)| `"off"` |
+| `bbox=(symbol)`| (initial, warning)| `<null>` |
+| `bbox=(function)`| (initial, warning)| `<null>` |
+| `bbox=(null)`| (initial)| `<null>` |
+| `bbox=(undefined)`| (initial)| `<null>` |
+
+## `begin` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `begin=(string)`| (changed)| `"a string"` |
+| `begin=(empty string)`| (changed)| `<empty string>` |
+| `begin=(array with string)`| (changed)| `"string"` |
+| `begin=(empty array)`| (changed)| `<empty string>` |
+| `begin=(object)`| (changed)| `"result of toString()"` |
+| `begin=(numeric string)`| (changed)| `"42"` |
+| `begin=(-1)`| (changed)| `"-1"` |
+| `begin=(0)`| (changed)| `"0"` |
+| `begin=(integer)`| (changed)| `"1"` |
+| `begin=(NaN)`| (changed, warning)| `"NaN"` |
+| `begin=(float)`| (changed)| `"99.99"` |
+| `begin=(true)`| (initial, warning)| `<null>` |
+| `begin=(false)`| (initial, warning)| `<null>` |
+| `begin=(string 'true')`| (changed)| `"true"` |
+| `begin=(string 'false')`| (changed)| `"false"` |
+| `begin=(string 'on')`| (changed)| `"on"` |
+| `begin=(string 'off')`| (changed)| `"off"` |
+| `begin=(symbol)`| (initial, warning)| `<null>` |
+| `begin=(function)`| (initial, warning)| `<null>` |
+| `begin=(null)`| (initial)| `<null>` |
+| `begin=(undefined)`| (initial)| `<null>` |
+
+## `bias` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `bias=(string)`| (initial)| `<number: 0>` |
+| `bias=(empty string)`| (initial)| `<number: 0>` |
+| `bias=(array with string)`| (initial)| `<number: 0>` |
+| `bias=(empty array)`| (initial)| `<number: 0>` |
+| `bias=(object)`| (initial)| `<number: 0>` |
+| `bias=(numeric string)`| (changed)| `<number: 42>` |
+| `bias=(-1)`| (changed)| `<number: -1>` |
+| `bias=(0)`| (initial)| `<number: 0>` |
+| `bias=(integer)`| (changed)| `<number: 1>` |
+| `bias=(NaN)`| (initial, warning)| `<number: 0>` |
+| `bias=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `bias=(true)`| (initial, warning)| `<number: 0>` |
+| `bias=(false)`| (initial, warning)| `<number: 0>` |
+| `bias=(string 'true')`| (initial)| `<number: 0>` |
+| `bias=(string 'false')`| (initial)| `<number: 0>` |
+| `bias=(string 'on')`| (initial)| `<number: 0>` |
+| `bias=(string 'off')`| (initial)| `<number: 0>` |
+| `bias=(symbol)`| (initial, warning)| `<number: 0>` |
+| `bias=(function)`| (initial, warning)| `<number: 0>` |
+| `bias=(null)`| (initial)| `<number: 0>` |
+| `bias=(undefined)`| (initial)| `<number: 0>` |
+
+## `by` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `by=(string)`| (changed)| `"a string"` |
+| `by=(empty string)`| (changed)| `<empty string>` |
+| `by=(array with string)`| (changed)| `"string"` |
+| `by=(empty array)`| (changed)| `<empty string>` |
+| `by=(object)`| (changed)| `"result of toString()"` |
+| `by=(numeric string)`| (changed)| `"42"` |
+| `by=(-1)`| (changed)| `"-1"` |
+| `by=(0)`| (changed)| `"0"` |
+| `by=(integer)`| (changed)| `"1"` |
+| `by=(NaN)`| (changed, warning)| `"NaN"` |
+| `by=(float)`| (changed)| `"99.99"` |
+| `by=(true)`| (initial, warning)| `<null>` |
+| `by=(false)`| (initial, warning)| `<null>` |
+| `by=(string 'true')`| (changed)| `"true"` |
+| `by=(string 'false')`| (changed)| `"false"` |
+| `by=(string 'on')`| (changed)| `"on"` |
+| `by=(string 'off')`| (changed)| `"off"` |
+| `by=(symbol)`| (initial, warning)| `<null>` |
+| `by=(function)`| (initial, warning)| `<null>` |
+| `by=(null)`| (initial)| `<null>` |
+| `by=(undefined)`| (initial)| `<null>` |
+
+## `calcMode` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `calcMode=(string)`| (changed)| `"discrete"` |
+| `calcMode=(empty string)`| (changed)| `<empty string>` |
+| `calcMode=(array with string)`| (changed)| `"discrete"` |
+| `calcMode=(empty array)`| (changed)| `<empty string>` |
+| `calcMode=(object)`| (changed)| `"result of toString()"` |
+| `calcMode=(numeric string)`| (changed)| `"42"` |
+| `calcMode=(-1)`| (changed)| `"-1"` |
+| `calcMode=(0)`| (changed)| `"0"` |
+| `calcMode=(integer)`| (changed)| `"1"` |
+| `calcMode=(NaN)`| (changed, warning)| `"NaN"` |
+| `calcMode=(float)`| (changed)| `"99.99"` |
+| `calcMode=(true)`| (initial, warning)| `<null>` |
+| `calcMode=(false)`| (initial, warning)| `<null>` |
+| `calcMode=(string 'true')`| (changed)| `"true"` |
+| `calcMode=(string 'false')`| (changed)| `"false"` |
+| `calcMode=(string 'on')`| (changed)| `"on"` |
+| `calcMode=(string 'off')`| (changed)| `"off"` |
+| `calcMode=(symbol)`| (initial, warning)| `<null>` |
+| `calcMode=(function)`| (initial, warning)| `<null>` |
+| `calcMode=(null)`| (initial)| `<null>` |
+| `calcMode=(undefined)`| (initial)| `<null>` |
+
+## `cap-height` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cap-height=(string)`| (changed, warning)| `"a string"` |
+| `cap-height=(empty string)`| (changed, warning)| `<empty string>` |
+| `cap-height=(array with string)`| (changed, warning)| `"string"` |
+| `cap-height=(empty array)`| (changed, warning)| `<empty string>` |
+| `cap-height=(object)`| (changed, warning)| `"result of toString()"` |
+| `cap-height=(numeric string)`| (changed, warning)| `"42"` |
+| `cap-height=(-1)`| (changed, warning)| `"-1"` |
+| `cap-height=(0)`| (changed, warning)| `"0"` |
+| `cap-height=(integer)`| (changed, warning)| `"1"` |
+| `cap-height=(NaN)`| (changed, warning)| `"NaN"` |
+| `cap-height=(float)`| (changed, warning)| `"99.99"` |
+| `cap-height=(true)`| (initial, warning)| `<null>` |
+| `cap-height=(false)`| (initial, warning)| `<null>` |
+| `cap-height=(string 'true')`| (changed, warning)| `"true"` |
+| `cap-height=(string 'false')`| (changed, warning)| `"false"` |
+| `cap-height=(string 'on')`| (changed, warning)| `"on"` |
+| `cap-height=(string 'off')`| (changed, warning)| `"off"` |
+| `cap-height=(symbol)`| (initial, warning)| `<null>` |
+| `cap-height=(function)`| (initial, warning)| `<null>` |
+| `cap-height=(null)`| (initial, warning)| `<null>` |
+| `cap-height=(undefined)`| (initial, warning)| `<null>` |
+
+## `capHeight` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `capHeight=(string)`| (changed)| `"a string"` |
+| `capHeight=(empty string)`| (changed)| `<empty string>` |
+| `capHeight=(array with string)`| (changed)| `"string"` |
+| `capHeight=(empty array)`| (changed)| `<empty string>` |
+| `capHeight=(object)`| (changed)| `"result of toString()"` |
+| `capHeight=(numeric string)`| (changed)| `"42"` |
+| `capHeight=(-1)`| (changed)| `"-1"` |
+| `capHeight=(0)`| (changed)| `"0"` |
+| `capHeight=(integer)`| (changed)| `"1"` |
+| `capHeight=(NaN)`| (changed, warning)| `"NaN"` |
+| `capHeight=(float)`| (changed)| `"99.99"` |
+| `capHeight=(true)`| (initial, warning)| `<null>` |
+| `capHeight=(false)`| (initial, warning)| `<null>` |
+| `capHeight=(string 'true')`| (changed)| `"true"` |
+| `capHeight=(string 'false')`| (changed)| `"false"` |
+| `capHeight=(string 'on')`| (changed)| `"on"` |
+| `capHeight=(string 'off')`| (changed)| `"off"` |
+| `capHeight=(symbol)`| (initial, warning)| `<null>` |
+| `capHeight=(function)`| (initial, warning)| `<null>` |
+| `capHeight=(null)`| (initial)| `<null>` |
+| `capHeight=(undefined)`| (initial)| `<null>` |
+
+## `capture` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `capture=(string)`| (changed)| `"environment"` |
+| `capture=(empty string)`| (changed)| `<empty string>` |
+| `capture=(array with string)`| (changed)| `"environment"` |
+| `capture=(empty array)`| (changed)| `<empty string>` |
+| `capture=(object)`| (changed)| `"result of toString()"` |
+| `capture=(numeric string)`| (changed)| `"42"` |
+| `capture=(-1)`| (changed)| `"-1"` |
+| `capture=(0)`| (changed)| `"0"` |
+| `capture=(integer)`| (changed)| `"1"` |
+| `capture=(NaN)`| (changed, warning)| `"NaN"` |
+| `capture=(float)`| (changed)| `"99.99"` |
+| `capture=(true)`| (changed)| `<empty string>` |
+| `capture=(false)`| (initial)| `<null>` |
+| `capture=(string 'true')`| (changed)| `"true"` |
+| `capture=(string 'false')`| (changed)| `"false"` |
+| `capture=(string 'on')`| (changed)| `"on"` |
+| `capture=(string 'off')`| (changed)| `"off"` |
+| `capture=(symbol)`| (initial, warning)| `<null>` |
+| `capture=(function)`| (initial, warning)| `<null>` |
+| `capture=(null)`| (initial)| `<null>` |
+| `capture=(undefined)`| (initial)| `<null>` |
+
+## `cellPadding` (on `<table>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cellPadding=(string)`| (changed)| `"a string"` |
+| `cellPadding=(empty string)`| (initial)| `<empty string>` |
+| `cellPadding=(array with string)`| (changed)| `"string"` |
+| `cellPadding=(empty array)`| (initial)| `<empty string>` |
+| `cellPadding=(object)`| (changed)| `"result of toString()"` |
+| `cellPadding=(numeric string)`| (changed)| `"42"` |
+| `cellPadding=(-1)`| (changed)| `"-1"` |
+| `cellPadding=(0)`| (changed)| `"0"` |
+| `cellPadding=(integer)`| (changed)| `"1"` |
+| `cellPadding=(NaN)`| (changed, warning)| `"NaN"` |
+| `cellPadding=(float)`| (changed)| `"99.99"` |
+| `cellPadding=(true)`| (initial, warning)| `<empty string>` |
+| `cellPadding=(false)`| (initial, warning)| `<empty string>` |
+| `cellPadding=(string 'true')`| (changed)| `"true"` |
+| `cellPadding=(string 'false')`| (changed)| `"false"` |
+| `cellPadding=(string 'on')`| (changed)| `"on"` |
+| `cellPadding=(string 'off')`| (changed)| `"off"` |
+| `cellPadding=(symbol)`| (initial, warning)| `<empty string>` |
+| `cellPadding=(function)`| (initial, warning)| `<empty string>` |
+| `cellPadding=(null)`| (initial)| `<empty string>` |
+| `cellPadding=(undefined)`| (initial)| `<empty string>` |
+
+## `cellSpacing` (on `<table>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cellSpacing=(string)`| (changed)| `"a string"` |
+| `cellSpacing=(empty string)`| (initial)| `<empty string>` |
+| `cellSpacing=(array with string)`| (changed)| `"string"` |
+| `cellSpacing=(empty array)`| (initial)| `<empty string>` |
+| `cellSpacing=(object)`| (changed)| `"result of toString()"` |
+| `cellSpacing=(numeric string)`| (changed)| `"42"` |
+| `cellSpacing=(-1)`| (changed)| `"-1"` |
+| `cellSpacing=(0)`| (changed)| `"0"` |
+| `cellSpacing=(integer)`| (changed)| `"1"` |
+| `cellSpacing=(NaN)`| (changed, warning)| `"NaN"` |
+| `cellSpacing=(float)`| (changed)| `"99.99"` |
+| `cellSpacing=(true)`| (initial, warning)| `<empty string>` |
+| `cellSpacing=(false)`| (initial, warning)| `<empty string>` |
+| `cellSpacing=(string 'true')`| (changed)| `"true"` |
+| `cellSpacing=(string 'false')`| (changed)| `"false"` |
+| `cellSpacing=(string 'on')`| (changed)| `"on"` |
+| `cellSpacing=(string 'off')`| (changed)| `"off"` |
+| `cellSpacing=(symbol)`| (initial, warning)| `<empty string>` |
+| `cellSpacing=(function)`| (initial, warning)| `<empty string>` |
+| `cellSpacing=(null)`| (initial)| `<empty string>` |
+| `cellSpacing=(undefined)`| (initial)| `<empty string>` |
+
+## `challenge` (on `<keygen>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `challenge=(string)`| (changed, warning, ssr warning)| `"a string"` |
+| `challenge=(empty string)`| (changed, warning, ssr warning)| `<empty string>` |
+| `challenge=(array with string)`| (changed, warning, ssr warning)| `"string"` |
+| `challenge=(empty array)`| (changed, warning, ssr warning)| `<empty string>` |
+| `challenge=(object)`| (changed, warning, ssr warning)| `"result of toString()"` |
+| `challenge=(numeric string)`| (changed, warning, ssr warning)| `"42"` |
+| `challenge=(-1)`| (changed, warning, ssr warning)| `"-1"` |
+| `challenge=(0)`| (changed, warning, ssr warning)| `"0"` |
+| `challenge=(integer)`| (changed, warning, ssr warning)| `"1"` |
+| `challenge=(NaN)`| (changed, warning)| `"NaN"` |
+| `challenge=(float)`| (changed, warning, ssr warning)| `"99.99"` |
+| `challenge=(true)`| (initial, warning)| `<null>` |
+| `challenge=(false)`| (initial, warning)| `<null>` |
+| `challenge=(string 'true')`| (changed, warning, ssr warning)| `"true"` |
+| `challenge=(string 'false')`| (changed, warning, ssr warning)| `"false"` |
+| `challenge=(string 'on')`| (changed, warning, ssr warning)| `"on"` |
+| `challenge=(string 'off')`| (changed, warning, ssr warning)| `"off"` |
+| `challenge=(symbol)`| (initial, warning)| `<null>` |
+| `challenge=(function)`| (initial, warning)| `<null>` |
+| `challenge=(null)`| (initial, warning, ssr warning)| `<null>` |
+| `challenge=(undefined)`| (initial, warning, ssr warning)| `<null>` |
+
+## `charSet` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `charSet=(string)`| (changed)| `"a string"` |
+| `charSet=(empty string)`| (initial)| `<empty string>` |
+| `charSet=(array with string)`| (changed)| `"string"` |
+| `charSet=(empty array)`| (initial)| `<empty string>` |
+| `charSet=(object)`| (changed)| `"result of toString()"` |
+| `charSet=(numeric string)`| (changed)| `"42"` |
+| `charSet=(-1)`| (changed)| `"-1"` |
+| `charSet=(0)`| (changed)| `"0"` |
+| `charSet=(integer)`| (changed)| `"1"` |
+| `charSet=(NaN)`| (changed, warning)| `"NaN"` |
+| `charSet=(float)`| (changed)| `"99.99"` |
+| `charSet=(true)`| (initial, warning)| `<empty string>` |
+| `charSet=(false)`| (initial, warning)| `<empty string>` |
+| `charSet=(string 'true')`| (changed)| `"true"` |
+| `charSet=(string 'false')`| (changed)| `"false"` |
+| `charSet=(string 'on')`| (changed)| `"on"` |
+| `charSet=(string 'off')`| (changed)| `"off"` |
+| `charSet=(symbol)`| (initial, warning)| `<empty string>` |
+| `charSet=(function)`| (initial, warning)| `<empty string>` |
+| `charSet=(null)`| (initial)| `<empty string>` |
+| `charSet=(undefined)`| (initial)| `<empty string>` |
+
+## `checked` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `checked=(string)`| (changed)| `<boolean: true>` |
+| `checked=(empty string)`| (initial)| `<boolean: false>` |
+| `checked=(array with string)`| (changed)| `<boolean: true>` |
+| `checked=(empty array)`| (changed)| `<boolean: true>` |
+| `checked=(object)`| (changed)| `<boolean: true>` |
+| `checked=(numeric string)`| (changed)| `<boolean: true>` |
+| `checked=(-1)`| (changed)| `<boolean: true>` |
+| `checked=(0)`| (initial)| `<boolean: false>` |
+| `checked=(integer)`| (changed)| `<boolean: true>` |
+| `checked=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `checked=(float)`| (changed)| `<boolean: true>` |
+| `checked=(true)`| (changed)| `<boolean: true>` |
+| `checked=(false)`| (initial)| `<boolean: false>` |
+| `checked=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `checked=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `checked=(string 'on')`| (changed)| `<boolean: true>` |
+| `checked=(string 'off')`| (changed)| `<boolean: true>` |
+| `checked=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `checked=(function)`| (initial, warning)| `<boolean: false>` |
+| `checked=(null)`| (initial)| `<boolean: false>` |
+| `checked=(undefined)`| (initial)| `<boolean: false>` |
+
+## `Checked` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `Checked=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(float)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(true)`| (initial, warning)| `<null>` |
+| `Checked=(false)`| (initial, warning)| `<null>` |
+| `Checked=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(symbol)`| (initial, warning)| `<null>` |
+| `Checked=(function)`| (initial, warning)| `<null>` |
+| `Checked=(null)`| (initial, warning)| `<null>` |
+| `Checked=(undefined)`| (initial, warning)| `<null>` |
+
+## `Children` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `Children=(string)`| (changed, warning)| `"a string"` |
+| `Children=(empty string)`| (changed, warning)| `<empty string>` |
+| `Children=(array with string)`| (changed, warning)| `"string"` |
+| `Children=(empty array)`| (changed, warning)| `<empty string>` |
+| `Children=(object)`| (changed, warning)| `"result of toString()"` |
+| `Children=(numeric string)`| (changed, warning)| `"42"` |
+| `Children=(-1)`| (changed, warning)| `"-1"` |
+| `Children=(0)`| (changed, warning)| `"0"` |
+| `Children=(integer)`| (changed, warning)| `"1"` |
+| `Children=(NaN)`| (changed, warning)| `"NaN"` |
+| `Children=(float)`| (changed, warning)| `"99.99"` |
+| `Children=(true)`| (initial, warning)| `<null>` |
+| `Children=(false)`| (initial, warning)| `<null>` |
+| `Children=(string 'true')`| (changed, warning)| `"true"` |
+| `Children=(string 'false')`| (changed, warning)| `"false"` |
+| `Children=(string 'on')`| (changed, warning)| `"on"` |
+| `Children=(string 'off')`| (changed, warning)| `"off"` |
+| `Children=(symbol)`| (initial, warning)| `<null>` |
+| `Children=(function)`| (initial, warning)| `<null>` |
+| `Children=(null)`| (initial, warning)| `<null>` |
+| `Children=(undefined)`| (initial, warning)| `<null>` |
+
+## `children` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `children=(string)`| (initial)| `[]` |
+| `children=(empty string)`| (initial)| `[]` |
+| `children=(array with string)`| (initial)| `[]` |
+| `children=(empty array)`| (initial)| `[]` |
+| `children=(object)`| (changed, error, warning, ssr error)| `` |
+| `children=(numeric string)`| (initial)| `[]` |
+| `children=(-1)`| (initial)| `[]` |
+| `children=(0)`| (initial)| `[]` |
+| `children=(integer)`| (initial)| `[]` |
+| `children=(NaN)`| (initial, warning)| `[]` |
+| `children=(float)`| (initial)| `[]` |
+| `children=(true)`| (initial)| `[]` |
+| `children=(false)`| (initial)| `[]` |
+| `children=(string 'true')`| (initial)| `[]` |
+| `children=(string 'false')`| (initial)| `[]` |
+| `children=(string 'on')`| (initial)| `[]` |
+| `children=(string 'off')`| (initial)| `[]` |
+| `children=(symbol)`| (initial)| `[]` |
+| `children=(function)`| (initial, warning)| `[]` |
+| `children=(null)`| (initial)| `[]` |
+| `children=(undefined)`| (initial)| `[]` |
+
+## `cite` (on `<blockquote>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cite=(string)`| (changed)| `"https://reactjs.com/"` |
+| `cite=(empty string)`| (changed)| `"http://localhost:3000/"` |
+| `cite=(array with string)`| (changed)| `"https://reactjs.com/"` |
+| `cite=(empty array)`| (changed)| `"http://localhost:3000/"` |
+| `cite=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
+| `cite=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
+| `cite=(-1)`| (changed)| `"http://localhost:3000/-1"` |
+| `cite=(0)`| (changed)| `"http://localhost:3000/0"` |
+| `cite=(integer)`| (changed)| `"http://localhost:3000/1"` |
+| `cite=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
+| `cite=(float)`| (changed)| `"http://localhost:3000/99.99"` |
+| `cite=(true)`| (initial, warning)| `<empty string>` |
+| `cite=(false)`| (initial, warning)| `<empty string>` |
+| `cite=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
+| `cite=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
+| `cite=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
+| `cite=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
+| `cite=(symbol)`| (initial, warning)| `<empty string>` |
+| `cite=(function)`| (initial, warning)| `<empty string>` |
+| `cite=(null)`| (initial)| `<empty string>` |
+| `cite=(undefined)`| (initial)| `<empty string>` |
+
+## `class` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `class=(string)`| (changed, warning)| `"a string"` |
+| `class=(empty string)`| (changed, warning)| `<empty string>` |
+| `class=(array with string)`| (changed, warning)| `"string"` |
+| `class=(empty array)`| (changed, warning)| `<empty string>` |
+| `class=(object)`| (changed, warning)| `"result of toString()"` |
+| `class=(numeric string)`| (changed, warning)| `"42"` |
+| `class=(-1)`| (changed, warning)| `"-1"` |
+| `class=(0)`| (changed, warning)| `"0"` |
+| `class=(integer)`| (changed, warning)| `"1"` |
+| `class=(NaN)`| (changed, warning)| `"NaN"` |
+| `class=(float)`| (changed, warning)| `"99.99"` |
+| `class=(true)`| (initial, warning)| `<null>` |
+| `class=(false)`| (initial, warning)| `<null>` |
+| `class=(string 'true')`| (changed, warning)| `"true"` |
+| `class=(string 'false')`| (changed, warning)| `"false"` |
+| `class=(string 'on')`| (changed, warning)| `"on"` |
+| `class=(string 'off')`| (changed, warning)| `"off"` |
+| `class=(symbol)`| (initial, warning)| `<null>` |
+| `class=(function)`| (initial, warning)| `<null>` |
+| `class=(null)`| (initial, warning)| `<null>` |
+| `class=(undefined)`| (initial, warning)| `<null>` |
+
+## `classID` (on `<object>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `classID=(string)`| (changed)| `"a string"` |
+| `classID=(empty string)`| (changed)| `<empty string>` |
+| `classID=(array with string)`| (changed)| `"string"` |
+| `classID=(empty array)`| (changed)| `<empty string>` |
+| `classID=(object)`| (changed)| `"result of toString()"` |
+| `classID=(numeric string)`| (changed)| `"42"` |
+| `classID=(-1)`| (changed)| `"-1"` |
+| `classID=(0)`| (changed)| `"0"` |
+| `classID=(integer)`| (changed)| `"1"` |
+| `classID=(NaN)`| (changed, warning)| `"NaN"` |
+| `classID=(float)`| (changed)| `"99.99"` |
+| `classID=(true)`| (initial, warning)| `<null>` |
+| `classID=(false)`| (initial, warning)| `<null>` |
+| `classID=(string 'true')`| (changed)| `"true"` |
+| `classID=(string 'false')`| (changed)| `"false"` |
+| `classID=(string 'on')`| (changed)| `"on"` |
+| `classID=(string 'off')`| (changed)| `"off"` |
+| `classID=(symbol)`| (initial, warning)| `<null>` |
+| `classID=(function)`| (initial, warning)| `<null>` |
+| `classID=(null)`| (initial)| `<null>` |
+| `classID=(undefined)`| (initial)| `<null>` |
+
+## `className` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `className=(string)`| (changed)| `"a string"` |
+| `className=(empty string)`| (initial)| `<empty string>` |
+| `className=(array with string)`| (changed)| `"string"` |
+| `className=(empty array)`| (initial)| `<empty string>` |
+| `className=(object)`| (changed)| `"result of toString()"` |
+| `className=(numeric string)`| (changed)| `"42"` |
+| `className=(-1)`| (changed)| `"-1"` |
+| `className=(0)`| (changed)| `"0"` |
+| `className=(integer)`| (changed)| `"1"` |
+| `className=(NaN)`| (changed, warning)| `"NaN"` |
+| `className=(float)`| (changed)| `"99.99"` |
+| `className=(true)`| (initial, warning)| `<empty string>` |
+| `className=(false)`| (initial, warning)| `<empty string>` |
+| `className=(string 'true')`| (changed)| `"true"` |
+| `className=(string 'false')`| (changed)| `"false"` |
+| `className=(string 'on')`| (changed)| `"on"` |
+| `className=(string 'off')`| (changed)| `"off"` |
+| `className=(symbol)`| (initial, warning)| `<empty string>` |
+| `className=(function)`| (initial, warning)| `<empty string>` |
+| `className=(null)`| (initial)| `<empty string>` |
+| `className=(undefined)`| (initial)| `<empty string>` |
+
+## `clip` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `clip=(string)`| (changed)| `"a string"` |
+| `clip=(empty string)`| (changed)| `<empty string>` |
+| `clip=(array with string)`| (changed)| `"string"` |
+| `clip=(empty array)`| (changed)| `<empty string>` |
+| `clip=(object)`| (changed)| `"result of toString()"` |
+| `clip=(numeric string)`| (changed)| `"42"` |
+| `clip=(-1)`| (changed)| `"-1"` |
+| `clip=(0)`| (changed)| `"0"` |
+| `clip=(integer)`| (changed)| `"1"` |
+| `clip=(NaN)`| (changed, warning)| `"NaN"` |
+| `clip=(float)`| (changed)| `"99.99"` |
+| `clip=(true)`| (initial, warning)| `<null>` |
+| `clip=(false)`| (initial, warning)| `<null>` |
+| `clip=(string 'true')`| (changed)| `"true"` |
+| `clip=(string 'false')`| (changed)| `"false"` |
+| `clip=(string 'on')`| (changed)| `"on"` |
+| `clip=(string 'off')`| (changed)| `"off"` |
+| `clip=(symbol)`| (initial, warning)| `<null>` |
+| `clip=(function)`| (initial, warning)| `<null>` |
+| `clip=(null)`| (initial)| `<null>` |
+| `clip=(undefined)`| (initial)| `<null>` |
+
+## `clip-path` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `clip-path=(string)`| (changed, warning)| `"a string"` |
+| `clip-path=(empty string)`| (changed, warning)| `<empty string>` |
+| `clip-path=(array with string)`| (changed, warning)| `"string"` |
+| `clip-path=(empty array)`| (changed, warning)| `<empty string>` |
+| `clip-path=(object)`| (changed, warning)| `"result of toString()"` |
+| `clip-path=(numeric string)`| (changed, warning)| `"42"` |
+| `clip-path=(-1)`| (changed, warning)| `"-1"` |
+| `clip-path=(0)`| (changed, warning)| `"0"` |
+| `clip-path=(integer)`| (changed, warning)| `"1"` |
+| `clip-path=(NaN)`| (changed, warning)| `"NaN"` |
+| `clip-path=(float)`| (changed, warning)| `"99.99"` |
+| `clip-path=(true)`| (initial, warning)| `<null>` |
+| `clip-path=(false)`| (initial, warning)| `<null>` |
+| `clip-path=(string 'true')`| (changed, warning)| `"true"` |
+| `clip-path=(string 'false')`| (changed, warning)| `"false"` |
+| `clip-path=(string 'on')`| (changed, warning)| `"on"` |
+| `clip-path=(string 'off')`| (changed, warning)| `"off"` |
+| `clip-path=(symbol)`| (initial, warning)| `<null>` |
+| `clip-path=(function)`| (initial, warning)| `<null>` |
+| `clip-path=(null)`| (initial, warning)| `<null>` |
+| `clip-path=(undefined)`| (initial, warning)| `<null>` |
+
+## `clipPath` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `clipPath=(string)`| (changed)| `"a string"` |
+| `clipPath=(empty string)`| (changed)| `<empty string>` |
+| `clipPath=(array with string)`| (changed)| `"string"` |
+| `clipPath=(empty array)`| (changed)| `<empty string>` |
+| `clipPath=(object)`| (changed)| `"result of toString()"` |
+| `clipPath=(numeric string)`| (changed)| `"42"` |
+| `clipPath=(-1)`| (changed)| `"-1"` |
+| `clipPath=(0)`| (changed)| `"0"` |
+| `clipPath=(integer)`| (changed)| `"1"` |
+| `clipPath=(NaN)`| (changed, warning)| `"NaN"` |
+| `clipPath=(float)`| (changed)| `"99.99"` |
+| `clipPath=(true)`| (initial, warning)| `<null>` |
+| `clipPath=(false)`| (initial, warning)| `<null>` |
+| `clipPath=(string 'true')`| (changed)| `"true"` |
+| `clipPath=(string 'false')`| (changed)| `"false"` |
+| `clipPath=(string 'on')`| (changed)| `"on"` |
+| `clipPath=(string 'off')`| (changed)| `"off"` |
+| `clipPath=(symbol)`| (initial, warning)| `<null>` |
+| `clipPath=(function)`| (initial, warning)| `<null>` |
+| `clipPath=(null)`| (initial)| `<null>` |
+| `clipPath=(undefined)`| (initial)| `<null>` |
+
+## `clipPathUnits` (on `<clipPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `clipPathUnits=(string)`| (changed)| `<number: 2>` |
+| `clipPathUnits=(empty string)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(array with string)`| (changed)| `<number: 2>` |
+| `clipPathUnits=(empty array)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(object)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(numeric string)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(-1)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(0)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(integer)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(NaN)`| (initial, warning)| `<number: 1>` |
+| `clipPathUnits=(float)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(true)`| (initial, warning)| `<number: 1>` |
+| `clipPathUnits=(false)`| (initial, warning)| `<number: 1>` |
+| `clipPathUnits=(string 'true')`| (initial)| `<number: 1>` |
+| `clipPathUnits=(string 'false')`| (initial)| `<number: 1>` |
+| `clipPathUnits=(string 'on')`| (initial)| `<number: 1>` |
+| `clipPathUnits=(string 'off')`| (initial)| `<number: 1>` |
+| `clipPathUnits=(symbol)`| (initial, warning)| `<number: 1>` |
+| `clipPathUnits=(function)`| (initial, warning)| `<number: 1>` |
+| `clipPathUnits=(null)`| (initial)| `<number: 1>` |
+| `clipPathUnits=(undefined)`| (initial)| `<number: 1>` |
+
+## `clip-rule` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `clip-rule=(string)`| (changed, warning)| `"a string"` |
+| `clip-rule=(empty string)`| (changed, warning)| `<empty string>` |
+| `clip-rule=(array with string)`| (changed, warning)| `"string"` |
+| `clip-rule=(empty array)`| (changed, warning)| `<empty string>` |
+| `clip-rule=(object)`| (changed, warning)| `"result of toString()"` |
+| `clip-rule=(numeric string)`| (changed, warning)| `"42"` |
+| `clip-rule=(-1)`| (changed, warning)| `"-1"` |
+| `clip-rule=(0)`| (changed, warning)| `"0"` |
+| `clip-rule=(integer)`| (changed, warning)| `"1"` |
+| `clip-rule=(NaN)`| (changed, warning)| `"NaN"` |
+| `clip-rule=(float)`| (changed, warning)| `"99.99"` |
+| `clip-rule=(true)`| (initial, warning)| `<null>` |
+| `clip-rule=(false)`| (initial, warning)| `<null>` |
+| `clip-rule=(string 'true')`| (changed, warning)| `"true"` |
+| `clip-rule=(string 'false')`| (changed, warning)| `"false"` |
+| `clip-rule=(string 'on')`| (changed, warning)| `"on"` |
+| `clip-rule=(string 'off')`| (changed, warning)| `"off"` |
+| `clip-rule=(symbol)`| (initial, warning)| `<null>` |
+| `clip-rule=(function)`| (initial, warning)| `<null>` |
+| `clip-rule=(null)`| (initial, warning)| `<null>` |
+| `clip-rule=(undefined)`| (initial, warning)| `<null>` |
+
+## `clipRule` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `clipRule=(string)`| (changed)| `"a string"` |
+| `clipRule=(empty string)`| (changed)| `<empty string>` |
+| `clipRule=(array with string)`| (changed)| `"string"` |
+| `clipRule=(empty array)`| (changed)| `<empty string>` |
+| `clipRule=(object)`| (changed)| `"result of toString()"` |
+| `clipRule=(numeric string)`| (changed)| `"42"` |
+| `clipRule=(-1)`| (changed)| `"-1"` |
+| `clipRule=(0)`| (changed)| `"0"` |
+| `clipRule=(integer)`| (changed)| `"1"` |
+| `clipRule=(NaN)`| (changed, warning)| `"NaN"` |
+| `clipRule=(float)`| (changed)| `"99.99"` |
+| `clipRule=(true)`| (initial, warning)| `<null>` |
+| `clipRule=(false)`| (initial, warning)| `<null>` |
+| `clipRule=(string 'true')`| (changed)| `"true"` |
+| `clipRule=(string 'false')`| (changed)| `"false"` |
+| `clipRule=(string 'on')`| (changed)| `"on"` |
+| `clipRule=(string 'off')`| (changed)| `"off"` |
+| `clipRule=(symbol)`| (initial, warning)| `<null>` |
+| `clipRule=(function)`| (initial, warning)| `<null>` |
+| `clipRule=(null)`| (initial)| `<null>` |
+| `clipRule=(undefined)`| (initial)| `<null>` |
+
+## `color` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `color=(string)`| (changed)| `"a string"` |
+| `color=(empty string)`| (changed)| `<empty string>` |
+| `color=(array with string)`| (changed)| `"string"` |
+| `color=(empty array)`| (changed)| `<empty string>` |
+| `color=(object)`| (changed)| `"result of toString()"` |
+| `color=(numeric string)`| (changed)| `"42"` |
+| `color=(-1)`| (changed)| `"-1"` |
+| `color=(0)`| (changed)| `"0"` |
+| `color=(integer)`| (changed)| `"1"` |
+| `color=(NaN)`| (changed, warning)| `"NaN"` |
+| `color=(float)`| (changed)| `"99.99"` |
+| `color=(true)`| (initial, warning)| `<null>` |
+| `color=(false)`| (initial, warning)| `<null>` |
+| `color=(string 'true')`| (changed)| `"true"` |
+| `color=(string 'false')`| (changed)| `"false"` |
+| `color=(string 'on')`| (changed)| `"on"` |
+| `color=(string 'off')`| (changed)| `"off"` |
+| `color=(symbol)`| (initial, warning)| `<null>` |
+| `color=(function)`| (initial, warning)| `<null>` |
+| `color=(null)`| (initial)| `<null>` |
+| `color=(undefined)`| (initial)| `<null>` |
+
+## `color-interpolation` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `color-interpolation=(string)`| (changed, warning)| `"sRGB"` |
+| `color-interpolation=(empty string)`| (changed, warning)| `<empty string>` |
+| `color-interpolation=(array with string)`| (changed, warning)| `"sRGB"` |
+| `color-interpolation=(empty array)`| (changed, warning)| `<empty string>` |
+| `color-interpolation=(object)`| (changed, warning)| `"result of toString()"` |
+| `color-interpolation=(numeric string)`| (changed, warning)| `"42"` |
+| `color-interpolation=(-1)`| (changed, warning)| `"-1"` |
+| `color-interpolation=(0)`| (changed, warning)| `"0"` |
+| `color-interpolation=(integer)`| (changed, warning)| `"1"` |
+| `color-interpolation=(NaN)`| (changed, warning)| `"NaN"` |
+| `color-interpolation=(float)`| (changed, warning)| `"99.99"` |
+| `color-interpolation=(true)`| (initial, warning)| `<null>` |
+| `color-interpolation=(false)`| (initial, warning)| `<null>` |
+| `color-interpolation=(string 'true')`| (changed, warning)| `"true"` |
+| `color-interpolation=(string 'false')`| (changed, warning)| `"false"` |
+| `color-interpolation=(string 'on')`| (changed, warning)| `"on"` |
+| `color-interpolation=(string 'off')`| (changed, warning)| `"off"` |
+| `color-interpolation=(symbol)`| (initial, warning)| `<null>` |
+| `color-interpolation=(function)`| (initial, warning)| `<null>` |
+| `color-interpolation=(null)`| (initial, warning)| `<null>` |
+| `color-interpolation=(undefined)`| (initial, warning)| `<null>` |
+
+## `colorInterpolation` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `colorInterpolation=(string)`| (changed)| `"sRGB"` |
+| `colorInterpolation=(empty string)`| (changed)| `<empty string>` |
+| `colorInterpolation=(array with string)`| (changed)| `"sRGB"` |
+| `colorInterpolation=(empty array)`| (changed)| `<empty string>` |
+| `colorInterpolation=(object)`| (changed)| `"result of toString()"` |
+| `colorInterpolation=(numeric string)`| (changed)| `"42"` |
+| `colorInterpolation=(-1)`| (changed)| `"-1"` |
+| `colorInterpolation=(0)`| (changed)| `"0"` |
+| `colorInterpolation=(integer)`| (changed)| `"1"` |
+| `colorInterpolation=(NaN)`| (changed, warning)| `"NaN"` |
+| `colorInterpolation=(float)`| (changed)| `"99.99"` |
+| `colorInterpolation=(true)`| (initial, warning)| `<null>` |
+| `colorInterpolation=(false)`| (initial, warning)| `<null>` |
+| `colorInterpolation=(string 'true')`| (changed)| `"true"` |
+| `colorInterpolation=(string 'false')`| (changed)| `"false"` |
+| `colorInterpolation=(string 'on')`| (changed)| `"on"` |
+| `colorInterpolation=(string 'off')`| (changed)| `"off"` |
+| `colorInterpolation=(symbol)`| (initial, warning)| `<null>` |
+| `colorInterpolation=(function)`| (initial, warning)| `<null>` |
+| `colorInterpolation=(null)`| (initial)| `<null>` |
+| `colorInterpolation=(undefined)`| (initial)| `<null>` |
+
+## `color-interpolation-filters` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `color-interpolation-filters=(string)`| (changed, warning)| `"sRGB"` |
+| `color-interpolation-filters=(empty string)`| (changed, warning)| `<empty string>` |
+| `color-interpolation-filters=(array with string)`| (changed, warning)| `"sRGB"` |
+| `color-interpolation-filters=(empty array)`| (changed, warning)| `<empty string>` |
+| `color-interpolation-filters=(object)`| (changed, warning)| `"result of toString()"` |
+| `color-interpolation-filters=(numeric string)`| (changed, warning)| `"42"` |
+| `color-interpolation-filters=(-1)`| (changed, warning)| `"-1"` |
+| `color-interpolation-filters=(0)`| (changed, warning)| `"0"` |
+| `color-interpolation-filters=(integer)`| (changed, warning)| `"1"` |
+| `color-interpolation-filters=(NaN)`| (changed, warning)| `"NaN"` |
+| `color-interpolation-filters=(float)`| (changed, warning)| `"99.99"` |
+| `color-interpolation-filters=(true)`| (initial, warning)| `<null>` |
+| `color-interpolation-filters=(false)`| (initial, warning)| `<null>` |
+| `color-interpolation-filters=(string 'true')`| (changed, warning)| `"true"` |
+| `color-interpolation-filters=(string 'false')`| (changed, warning)| `"false"` |
+| `color-interpolation-filters=(string 'on')`| (changed, warning)| `"on"` |
+| `color-interpolation-filters=(string 'off')`| (changed, warning)| `"off"` |
+| `color-interpolation-filters=(symbol)`| (initial, warning)| `<null>` |
+| `color-interpolation-filters=(function)`| (initial, warning)| `<null>` |
+| `color-interpolation-filters=(null)`| (initial, warning)| `<null>` |
+| `color-interpolation-filters=(undefined)`| (initial, warning)| `<null>` |
+
+## `colorInterpolationFilters` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `colorInterpolationFilters=(string)`| (changed)| `"sRGB"` |
+| `colorInterpolationFilters=(empty string)`| (changed)| `<empty string>` |
+| `colorInterpolationFilters=(array with string)`| (changed)| `"sRGB"` |
+| `colorInterpolationFilters=(empty array)`| (changed)| `<empty string>` |
+| `colorInterpolationFilters=(object)`| (changed)| `"result of toString()"` |
+| `colorInterpolationFilters=(numeric string)`| (changed)| `"42"` |
+| `colorInterpolationFilters=(-1)`| (changed)| `"-1"` |
+| `colorInterpolationFilters=(0)`| (changed)| `"0"` |
+| `colorInterpolationFilters=(integer)`| (changed)| `"1"` |
+| `colorInterpolationFilters=(NaN)`| (changed, warning)| `"NaN"` |
+| `colorInterpolationFilters=(float)`| (changed)| `"99.99"` |
+| `colorInterpolationFilters=(true)`| (initial, warning)| `<null>` |
+| `colorInterpolationFilters=(false)`| (initial, warning)| `<null>` |
+| `colorInterpolationFilters=(string 'true')`| (changed)| `"true"` |
+| `colorInterpolationFilters=(string 'false')`| (changed)| `"false"` |
+| `colorInterpolationFilters=(string 'on')`| (changed)| `"on"` |
+| `colorInterpolationFilters=(string 'off')`| (changed)| `"off"` |
+| `colorInterpolationFilters=(symbol)`| (initial, warning)| `<null>` |
+| `colorInterpolationFilters=(function)`| (initial, warning)| `<null>` |
+| `colorInterpolationFilters=(null)`| (initial)| `<null>` |
+| `colorInterpolationFilters=(undefined)`| (initial)| `<null>` |
+
+## `color-profile` (on `<image>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `color-profile=(string)`| (changed, warning)| `"sRGB"` |
+| `color-profile=(empty string)`| (changed, warning)| `<empty string>` |
+| `color-profile=(array with string)`| (changed, warning)| `"sRGB"` |
+| `color-profile=(empty array)`| (changed, warning)| `<empty string>` |
+| `color-profile=(object)`| (changed, warning)| `"result of toString()"` |
+| `color-profile=(numeric string)`| (changed, warning)| `"42"` |
+| `color-profile=(-1)`| (changed, warning)| `"-1"` |
+| `color-profile=(0)`| (changed, warning)| `"0"` |
+| `color-profile=(integer)`| (changed, warning)| `"1"` |
+| `color-profile=(NaN)`| (changed, warning)| `"NaN"` |
+| `color-profile=(float)`| (changed, warning)| `"99.99"` |
+| `color-profile=(true)`| (initial, warning)| `<null>` |
+| `color-profile=(false)`| (initial, warning)| `<null>` |
+| `color-profile=(string 'true')`| (changed, warning)| `"true"` |
+| `color-profile=(string 'false')`| (changed, warning)| `"false"` |
+| `color-profile=(string 'on')`| (changed, warning)| `"on"` |
+| `color-profile=(string 'off')`| (changed, warning)| `"off"` |
+| `color-profile=(symbol)`| (initial, warning)| `<null>` |
+| `color-profile=(function)`| (initial, warning)| `<null>` |
+| `color-profile=(null)`| (initial, warning)| `<null>` |
+| `color-profile=(undefined)`| (initial, warning)| `<null>` |
+
+## `colorProfile` (on `<image>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `colorProfile=(string)`| (changed)| `"sRGB"` |
+| `colorProfile=(empty string)`| (changed)| `<empty string>` |
+| `colorProfile=(array with string)`| (changed)| `"sRGB"` |
+| `colorProfile=(empty array)`| (changed)| `<empty string>` |
+| `colorProfile=(object)`| (changed)| `"result of toString()"` |
+| `colorProfile=(numeric string)`| (changed)| `"42"` |
+| `colorProfile=(-1)`| (changed)| `"-1"` |
+| `colorProfile=(0)`| (changed)| `"0"` |
+| `colorProfile=(integer)`| (changed)| `"1"` |
+| `colorProfile=(NaN)`| (changed, warning)| `"NaN"` |
+| `colorProfile=(float)`| (changed)| `"99.99"` |
+| `colorProfile=(true)`| (initial, warning)| `<null>` |
+| `colorProfile=(false)`| (initial, warning)| `<null>` |
+| `colorProfile=(string 'true')`| (changed)| `"true"` |
+| `colorProfile=(string 'false')`| (changed)| `"false"` |
+| `colorProfile=(string 'on')`| (changed)| `"on"` |
+| `colorProfile=(string 'off')`| (changed)| `"off"` |
+| `colorProfile=(symbol)`| (initial, warning)| `<null>` |
+| `colorProfile=(function)`| (initial, warning)| `<null>` |
+| `colorProfile=(null)`| (initial)| `<null>` |
+| `colorProfile=(undefined)`| (initial)| `<null>` |
+
+## `color-rendering` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `color-rendering=(string)`| (changed, warning)| `"optimizeSpeed"` |
+| `color-rendering=(empty string)`| (changed, warning)| `<empty string>` |
+| `color-rendering=(array with string)`| (changed, warning)| `"optimizeSpeed"` |
+| `color-rendering=(empty array)`| (changed, warning)| `<empty string>` |
+| `color-rendering=(object)`| (changed, warning)| `"result of toString()"` |
+| `color-rendering=(numeric string)`| (changed, warning)| `"42"` |
+| `color-rendering=(-1)`| (changed, warning)| `"-1"` |
+| `color-rendering=(0)`| (changed, warning)| `"0"` |
+| `color-rendering=(integer)`| (changed, warning)| `"1"` |
+| `color-rendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `color-rendering=(float)`| (changed, warning)| `"99.99"` |
+| `color-rendering=(true)`| (initial, warning)| `<null>` |
+| `color-rendering=(false)`| (initial, warning)| `<null>` |
+| `color-rendering=(string 'true')`| (changed, warning)| `"true"` |
+| `color-rendering=(string 'false')`| (changed, warning)| `"false"` |
+| `color-rendering=(string 'on')`| (changed, warning)| `"on"` |
+| `color-rendering=(string 'off')`| (changed, warning)| `"off"` |
+| `color-rendering=(symbol)`| (initial, warning)| `<null>` |
+| `color-rendering=(function)`| (initial, warning)| `<null>` |
+| `color-rendering=(null)`| (initial, warning)| `<null>` |
+| `color-rendering=(undefined)`| (initial, warning)| `<null>` |
+
+## `colorRendering` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `colorRendering=(string)`| (changed)| `"optimizeSpeed"` |
+| `colorRendering=(empty string)`| (changed)| `<empty string>` |
+| `colorRendering=(array with string)`| (changed)| `"optimizeSpeed"` |
+| `colorRendering=(empty array)`| (changed)| `<empty string>` |
+| `colorRendering=(object)`| (changed)| `"result of toString()"` |
+| `colorRendering=(numeric string)`| (changed)| `"42"` |
+| `colorRendering=(-1)`| (changed)| `"-1"` |
+| `colorRendering=(0)`| (changed)| `"0"` |
+| `colorRendering=(integer)`| (changed)| `"1"` |
+| `colorRendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `colorRendering=(float)`| (changed)| `"99.99"` |
+| `colorRendering=(true)`| (initial, warning)| `<null>` |
+| `colorRendering=(false)`| (initial, warning)| `<null>` |
+| `colorRendering=(string 'true')`| (changed)| `"true"` |
+| `colorRendering=(string 'false')`| (changed)| `"false"` |
+| `colorRendering=(string 'on')`| (changed)| `"on"` |
+| `colorRendering=(string 'off')`| (changed)| `"off"` |
+| `colorRendering=(symbol)`| (initial, warning)| `<null>` |
+| `colorRendering=(function)`| (initial, warning)| `<null>` |
+| `colorRendering=(null)`| (initial)| `<null>` |
+| `colorRendering=(undefined)`| (initial)| `<null>` |
+
+## `cols` (on `<textarea>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cols=(string)`| (initial)| `<number: 20>` |
+| `cols=(empty string)`| (initial)| `<number: 20>` |
+| `cols=(array with string)`| (initial)| `<number: 20>` |
+| `cols=(empty array)`| (initial)| `<number: 20>` |
+| `cols=(object)`| (initial)| `<number: 20>` |
+| `cols=(numeric string)`| (changed)| `<number: 42>` |
+| `cols=(-1)`| (initial)| `<number: 20>` |
+| `cols=(0)`| (initial)| `<number: 20>` |
+| `cols=(integer)`| (changed)| `<number: 1>` |
+| `cols=(NaN)`| (initial, warning)| `<number: 20>` |
+| `cols=(float)`| (changed)| `<number: 99>` |
+| `cols=(true)`| (initial, warning)| `<number: 20>` |
+| `cols=(false)`| (initial, warning)| `<number: 20>` |
+| `cols=(string 'true')`| (initial)| `<number: 20>` |
+| `cols=(string 'false')`| (initial)| `<number: 20>` |
+| `cols=(string 'on')`| (initial)| `<number: 20>` |
+| `cols=(string 'off')`| (initial)| `<number: 20>` |
+| `cols=(symbol)`| (initial, warning)| `<number: 20>` |
+| `cols=(function)`| (initial, warning)| `<number: 20>` |
+| `cols=(null)`| (initial)| `<number: 20>` |
+| `cols=(undefined)`| (initial)| `<number: 20>` |
+
+## `colSpan` (on `<td>` inside `<tr>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `colSpan=(string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(empty string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(array with string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(empty array)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(object)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(numeric string)`| (changed, ssr error, ssr mismatch)| `<number: 42>` |
+| `colSpan=(-1)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(0)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(integer)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(NaN)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(float)`| (changed, ssr error, ssr mismatch)| `<number: 99>` |
+| `colSpan=(true)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(false)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(string 'true')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(string 'false')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(string 'on')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(string 'off')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(function)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(null)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `colSpan=(undefined)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+
+## `content` (on `<meta>` inside `<head>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `content=(string)`| (changed)| `"a string"` |
+| `content=(empty string)`| (initial)| `<empty string>` |
+| `content=(array with string)`| (changed)| `"string"` |
+| `content=(empty array)`| (initial)| `<empty string>` |
+| `content=(object)`| (changed)| `"result of toString()"` |
+| `content=(numeric string)`| (changed)| `"42"` |
+| `content=(-1)`| (changed)| `"-1"` |
+| `content=(0)`| (changed)| `"0"` |
+| `content=(integer)`| (changed)| `"1"` |
+| `content=(NaN)`| (changed, warning)| `"NaN"` |
+| `content=(float)`| (changed)| `"99.99"` |
+| `content=(true)`| (initial, warning)| `<empty string>` |
+| `content=(false)`| (initial, warning)| `<empty string>` |
+| `content=(string 'true')`| (changed)| `"true"` |
+| `content=(string 'false')`| (changed)| `"false"` |
+| `content=(string 'on')`| (changed)| `"on"` |
+| `content=(string 'off')`| (changed)| `"off"` |
+| `content=(symbol)`| (initial, warning)| `<empty string>` |
+| `content=(function)`| (initial, warning)| `<empty string>` |
+| `content=(null)`| (initial)| `<empty string>` |
+| `content=(undefined)`| (initial)| `<empty string>` |
+
+## `contentEditable` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `contentEditable=(string)`| (initial)| `"inherit"` |
+| `contentEditable=(empty string)`| (changed)| `"true"` |
+| `contentEditable=(array with string)`| (initial)| `"inherit"` |
+| `contentEditable=(empty array)`| (changed)| `"true"` |
+| `contentEditable=(object)`| (initial)| `"inherit"` |
+| `contentEditable=(numeric string)`| (initial)| `"inherit"` |
+| `contentEditable=(-1)`| (initial)| `"inherit"` |
+| `contentEditable=(0)`| (initial)| `"inherit"` |
+| `contentEditable=(integer)`| (initial)| `"inherit"` |
+| `contentEditable=(NaN)`| (initial, warning)| `"inherit"` |
+| `contentEditable=(float)`| (initial)| `"inherit"` |
+| `contentEditable=(true)`| (changed)| `"true"` |
+| `contentEditable=(false)`| (changed)| `"false"` |
+| `contentEditable=(string 'true')`| (changed)| `"true"` |
+| `contentEditable=(string 'false')`| (changed)| `"false"` |
+| `contentEditable=(string 'on')`| (initial)| `"inherit"` |
+| `contentEditable=(string 'off')`| (initial)| `"inherit"` |
+| `contentEditable=(symbol)`| (initial, warning)| `"inherit"` |
+| `contentEditable=(function)`| (initial, warning)| `"inherit"` |
+| `contentEditable=(null)`| (initial)| `"inherit"` |
+| `contentEditable=(undefined)`| (initial)| `"inherit"` |
+
+## `contentScriptType` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `contentScriptType=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `contentScriptType=(empty string)`| (changed, ssr mismatch)| `<empty string>` |
+| `contentScriptType=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `contentScriptType=(empty array)`| (changed, ssr mismatch)| `<empty string>` |
+| `contentScriptType=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `contentScriptType=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `contentScriptType=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `contentScriptType=(0)`| (changed, ssr mismatch)| `"0"` |
+| `contentScriptType=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `contentScriptType=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `contentScriptType=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `contentScriptType=(true)`| (initial, warning)| `<null>` |
+| `contentScriptType=(false)`| (initial, warning)| `<null>` |
+| `contentScriptType=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `contentScriptType=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `contentScriptType=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `contentScriptType=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `contentScriptType=(symbol)`| (initial, warning)| `<null>` |
+| `contentScriptType=(function)`| (initial, warning)| `<null>` |
+| `contentScriptType=(null)`| (initial)| `<null>` |
+| `contentScriptType=(undefined)`| (initial)| `<null>` |
+
+## `contentStyleType` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `contentStyleType=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `contentStyleType=(empty string)`| (changed, ssr mismatch)| `<empty string>` |
+| `contentStyleType=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `contentStyleType=(empty array)`| (changed, ssr mismatch)| `<empty string>` |
+| `contentStyleType=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `contentStyleType=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `contentStyleType=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `contentStyleType=(0)`| (changed, ssr mismatch)| `"0"` |
+| `contentStyleType=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `contentStyleType=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `contentStyleType=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `contentStyleType=(true)`| (initial, warning)| `<null>` |
+| `contentStyleType=(false)`| (initial, warning)| `<null>` |
+| `contentStyleType=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `contentStyleType=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `contentStyleType=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `contentStyleType=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `contentStyleType=(symbol)`| (initial, warning)| `<null>` |
+| `contentStyleType=(function)`| (initial, warning)| `<null>` |
+| `contentStyleType=(null)`| (initial)| `<null>` |
+| `contentStyleType=(undefined)`| (initial)| `<null>` |
+
+## `contextMenu` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `contextMenu=(string)`| (changed)| `"a string"` |
+| `contextMenu=(empty string)`| (changed)| `<empty string>` |
+| `contextMenu=(array with string)`| (changed)| `"string"` |
+| `contextMenu=(empty array)`| (changed)| `<empty string>` |
+| `contextMenu=(object)`| (changed)| `"result of toString()"` |
+| `contextMenu=(numeric string)`| (changed)| `"42"` |
+| `contextMenu=(-1)`| (changed)| `"-1"` |
+| `contextMenu=(0)`| (changed)| `"0"` |
+| `contextMenu=(integer)`| (changed)| `"1"` |
+| `contextMenu=(NaN)`| (changed, warning)| `"NaN"` |
+| `contextMenu=(float)`| (changed)| `"99.99"` |
+| `contextMenu=(true)`| (initial, warning)| `<null>` |
+| `contextMenu=(false)`| (initial, warning)| `<null>` |
+| `contextMenu=(string 'true')`| (changed)| `"true"` |
+| `contextMenu=(string 'false')`| (changed)| `"false"` |
+| `contextMenu=(string 'on')`| (changed)| `"on"` |
+| `contextMenu=(string 'off')`| (changed)| `"off"` |
+| `contextMenu=(symbol)`| (initial, warning)| `<null>` |
+| `contextMenu=(function)`| (initial, warning)| `<null>` |
+| `contextMenu=(null)`| (initial)| `<null>` |
+| `contextMenu=(undefined)`| (initial)| `<null>` |
+
+## `controls` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `controls=(string)`| (changed)| `<boolean: true>` |
+| `controls=(empty string)`| (initial)| `<boolean: false>` |
+| `controls=(array with string)`| (changed)| `<boolean: true>` |
+| `controls=(empty array)`| (changed)| `<boolean: true>` |
+| `controls=(object)`| (changed)| `<boolean: true>` |
+| `controls=(numeric string)`| (changed)| `<boolean: true>` |
+| `controls=(-1)`| (changed)| `<boolean: true>` |
+| `controls=(0)`| (initial)| `<boolean: false>` |
+| `controls=(integer)`| (changed)| `<boolean: true>` |
+| `controls=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `controls=(float)`| (changed)| `<boolean: true>` |
+| `controls=(true)`| (changed)| `<boolean: true>` |
+| `controls=(false)`| (initial)| `<boolean: false>` |
+| `controls=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `controls=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `controls=(string 'on')`| (changed)| `<boolean: true>` |
+| `controls=(string 'off')`| (changed)| `<boolean: true>` |
+| `controls=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `controls=(function)`| (initial, warning)| `<boolean: false>` |
+| `controls=(null)`| (initial)| `<boolean: false>` |
+| `controls=(undefined)`| (initial)| `<boolean: false>` |
+
+## `coords` (on `<a>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `coords=(string)`| (changed)| `"a string"` |
+| `coords=(empty string)`| (initial)| `<empty string>` |
+| `coords=(array with string)`| (changed)| `"string"` |
+| `coords=(empty array)`| (initial)| `<empty string>` |
+| `coords=(object)`| (changed)| `"result of toString()"` |
+| `coords=(numeric string)`| (changed)| `"42"` |
+| `coords=(-1)`| (changed)| `"-1"` |
+| `coords=(0)`| (changed)| `"0"` |
+| `coords=(integer)`| (changed)| `"1"` |
+| `coords=(NaN)`| (changed, warning)| `"NaN"` |
+| `coords=(float)`| (changed)| `"99.99"` |
+| `coords=(true)`| (initial, warning)| `<empty string>` |
+| `coords=(false)`| (initial, warning)| `<empty string>` |
+| `coords=(string 'true')`| (changed)| `"true"` |
+| `coords=(string 'false')`| (changed)| `"false"` |
+| `coords=(string 'on')`| (changed)| `"on"` |
+| `coords=(string 'off')`| (changed)| `"off"` |
+| `coords=(symbol)`| (initial, warning)| `<empty string>` |
+| `coords=(function)`| (initial, warning)| `<empty string>` |
+| `coords=(null)`| (initial)| `<empty string>` |
+| `coords=(undefined)`| (initial)| `<empty string>` |
+
+## `crossOrigin` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `crossOrigin=(string)`| (changed)| `"anonymous"` |
+| `crossOrigin=(empty string)`| (changed)| `"anonymous"` |
+| `crossOrigin=(array with string)`| (changed)| `"anonymous"` |
+| `crossOrigin=(empty array)`| (changed)| `"anonymous"` |
+| `crossOrigin=(object)`| (changed)| `"anonymous"` |
+| `crossOrigin=(numeric string)`| (changed)| `"anonymous"` |
+| `crossOrigin=(-1)`| (changed)| `"anonymous"` |
+| `crossOrigin=(0)`| (changed)| `"anonymous"` |
+| `crossOrigin=(integer)`| (changed)| `"anonymous"` |
+| `crossOrigin=(NaN)`| (changed, warning)| `"anonymous"` |
+| `crossOrigin=(float)`| (changed)| `"anonymous"` |
+| `crossOrigin=(true)`| (initial, warning)| `<null>` |
+| `crossOrigin=(false)`| (initial, warning)| `<null>` |
+| `crossOrigin=(string 'true')`| (changed)| `"anonymous"` |
+| `crossOrigin=(string 'false')`| (changed)| `"anonymous"` |
+| `crossOrigin=(string 'on')`| (changed)| `"anonymous"` |
+| `crossOrigin=(string 'off')`| (changed)| `"anonymous"` |
+| `crossOrigin=(symbol)`| (initial, warning)| `<null>` |
+| `crossOrigin=(function)`| (initial, warning)| `<null>` |
+| `crossOrigin=(null)`| (initial)| `<null>` |
+| `crossOrigin=(undefined)`| (initial)| `<null>` |
+
+## `cursor` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cursor=(string)`| (changed)| `"a string"` |
+| `cursor=(empty string)`| (changed)| `<empty string>` |
+| `cursor=(array with string)`| (changed)| `"string"` |
+| `cursor=(empty array)`| (changed)| `<empty string>` |
+| `cursor=(object)`| (changed)| `"result of toString()"` |
+| `cursor=(numeric string)`| (changed)| `"42"` |
+| `cursor=(-1)`| (changed)| `"-1"` |
+| `cursor=(0)`| (changed)| `"0"` |
+| `cursor=(integer)`| (changed)| `"1"` |
+| `cursor=(NaN)`| (changed, warning)| `"NaN"` |
+| `cursor=(float)`| (changed)| `"99.99"` |
+| `cursor=(true)`| (initial, warning)| `<null>` |
+| `cursor=(false)`| (initial, warning)| `<null>` |
+| `cursor=(string 'true')`| (changed)| `"true"` |
+| `cursor=(string 'false')`| (changed)| `"false"` |
+| `cursor=(string 'on')`| (changed)| `"on"` |
+| `cursor=(string 'off')`| (changed)| `"off"` |
+| `cursor=(symbol)`| (initial, warning)| `<null>` |
+| `cursor=(function)`| (initial, warning)| `<null>` |
+| `cursor=(null)`| (initial)| `<null>` |
+| `cursor=(undefined)`| (initial)| `<null>` |
+
+## `cx` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cx=(string)`| (changed)| `<SVGLength: 10px>` |
+| `cx=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `cx=(array with string)`| (changed)| `<SVGLength: 10px>` |
+| `cx=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `cx=(object)`| (initial)| `<SVGLength: 0>` |
+| `cx=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `cx=(-1)`| (changed)| `<SVGLength: -1>` |
+| `cx=(0)`| (initial)| `<SVGLength: 0>` |
+| `cx=(integer)`| (changed)| `<SVGLength: 1>` |
+| `cx=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `cx=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `cx=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `cx=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `cx=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `cx=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `cx=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `cx=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `cx=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `cx=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `cx=(null)`| (initial)| `<SVGLength: 0>` |
+| `cx=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `cy` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `cy=(string)`| (changed)| `<SVGLength: 10%>` |
+| `cy=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `cy=(array with string)`| (changed)| `<SVGLength: 10%>` |
+| `cy=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `cy=(object)`| (initial)| `<SVGLength: 0>` |
+| `cy=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `cy=(-1)`| (changed)| `<SVGLength: -1>` |
+| `cy=(0)`| (initial)| `<SVGLength: 0>` |
+| `cy=(integer)`| (changed)| `<SVGLength: 1>` |
+| `cy=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `cy=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `cy=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `cy=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `cy=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `cy=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `cy=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `cy=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `cy=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `cy=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `cy=(null)`| (initial)| `<SVGLength: 0>` |
+| `cy=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `d` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `d=(string)`| (changed)| `"a string"` |
+| `d=(empty string)`| (changed)| `<empty string>` |
+| `d=(array with string)`| (changed)| `"string"` |
+| `d=(empty array)`| (changed)| `<empty string>` |
+| `d=(object)`| (changed)| `"result of toString()"` |
+| `d=(numeric string)`| (changed)| `"42"` |
+| `d=(-1)`| (changed)| `"-1"` |
+| `d=(0)`| (changed)| `"0"` |
+| `d=(integer)`| (changed)| `"1"` |
+| `d=(NaN)`| (changed, warning)| `"NaN"` |
+| `d=(float)`| (changed)| `"99.99"` |
+| `d=(true)`| (initial, warning)| `<null>` |
+| `d=(false)`| (initial, warning)| `<null>` |
+| `d=(string 'true')`| (changed)| `"true"` |
+| `d=(string 'false')`| (changed)| `"false"` |
+| `d=(string 'on')`| (changed)| `"on"` |
+| `d=(string 'off')`| (changed)| `"off"` |
+| `d=(symbol)`| (initial, warning)| `<null>` |
+| `d=(function)`| (initial, warning)| `<null>` |
+| `d=(null)`| (initial)| `<null>` |
+| `d=(undefined)`| (initial)| `<null>` |
+
+## `dangerouslySetInnerHTML` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dangerouslySetInnerHTML=(string)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(empty string)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(array with string)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(empty array)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(object)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(numeric string)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(-1)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(0)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(integer)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(NaN)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(float)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(true)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(false)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(string 'true')`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(string 'false')`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(string 'on')`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(string 'off')`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(symbol)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(function)`| (changed, error, warning, ssr error)| `` |
+| `dangerouslySetInnerHTML=(null)`| (initial)| `<null>` |
+| `dangerouslySetInnerHTML=(undefined)`| (initial)| `<null>` |
+
+## `DangerouslySetInnerHTML` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `DangerouslySetInnerHTML=(string)`| (changed, warning)| `"a string"` |
+| `DangerouslySetInnerHTML=(empty string)`| (changed, warning)| `<empty string>` |
+| `DangerouslySetInnerHTML=(array with string)`| (changed, warning)| `"string"` |
+| `DangerouslySetInnerHTML=(empty array)`| (changed, warning)| `<empty string>` |
+| `DangerouslySetInnerHTML=(object)`| (changed, warning)| `"result of toString()"` |
+| `DangerouslySetInnerHTML=(numeric string)`| (changed, warning)| `"42"` |
+| `DangerouslySetInnerHTML=(-1)`| (changed, warning)| `"-1"` |
+| `DangerouslySetInnerHTML=(0)`| (changed, warning)| `"0"` |
+| `DangerouslySetInnerHTML=(integer)`| (changed, warning)| `"1"` |
+| `DangerouslySetInnerHTML=(NaN)`| (changed, warning)| `"NaN"` |
+| `DangerouslySetInnerHTML=(float)`| (changed, warning)| `"99.99"` |
+| `DangerouslySetInnerHTML=(true)`| (initial, warning)| `<null>` |
+| `DangerouslySetInnerHTML=(false)`| (initial, warning)| `<null>` |
+| `DangerouslySetInnerHTML=(string 'true')`| (changed, warning)| `"true"` |
+| `DangerouslySetInnerHTML=(string 'false')`| (changed, warning)| `"false"` |
+| `DangerouslySetInnerHTML=(string 'on')`| (changed, warning)| `"on"` |
+| `DangerouslySetInnerHTML=(string 'off')`| (changed, warning)| `"off"` |
+| `DangerouslySetInnerHTML=(symbol)`| (initial, warning)| `<null>` |
+| `DangerouslySetInnerHTML=(function)`| (initial, warning)| `<null>` |
+| `DangerouslySetInnerHTML=(null)`| (initial, warning)| `<null>` |
+| `DangerouslySetInnerHTML=(undefined)`| (initial, warning)| `<null>` |
+
+## `data` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `data=(string)`| (changed)| `"a string"` |
+| `data=(empty string)`| (changed)| `<empty string>` |
+| `data=(array with string)`| (changed)| `"string"` |
+| `data=(empty array)`| (changed)| `<empty string>` |
+| `data=(object)`| (changed)| `"result of toString()"` |
+| `data=(numeric string)`| (changed)| `"42"` |
+| `data=(-1)`| (changed)| `"-1"` |
+| `data=(0)`| (changed)| `"0"` |
+| `data=(integer)`| (changed)| `"1"` |
+| `data=(NaN)`| (changed, warning)| `"NaN"` |
+| `data=(float)`| (changed)| `"99.99"` |
+| `data=(true)`| (initial, warning)| `<null>` |
+| `data=(false)`| (initial, warning)| `<null>` |
+| `data=(string 'true')`| (changed)| `"true"` |
+| `data=(string 'false')`| (changed)| `"false"` |
+| `data=(string 'on')`| (changed)| `"on"` |
+| `data=(string 'off')`| (changed)| `"off"` |
+| `data=(symbol)`| (initial, warning)| `<null>` |
+| `data=(function)`| (initial, warning)| `<null>` |
+| `data=(null)`| (initial)| `<null>` |
+| `data=(undefined)`| (initial)| `<null>` |
+
+## `data-` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `data-=(string)`| (changed)| `"a string"` |
+| `data-=(empty string)`| (changed)| `<empty string>` |
+| `data-=(array with string)`| (changed)| `"string"` |
+| `data-=(empty array)`| (changed)| `<empty string>` |
+| `data-=(object)`| (changed)| `"result of toString()"` |
+| `data-=(numeric string)`| (changed)| `"42"` |
+| `data-=(-1)`| (changed)| `"-1"` |
+| `data-=(0)`| (changed)| `"0"` |
+| `data-=(integer)`| (changed)| `"1"` |
+| `data-=(NaN)`| (changed, warning)| `"NaN"` |
+| `data-=(float)`| (changed)| `"99.99"` |
+| `data-=(true)`| (changed)| `"true"` |
+| `data-=(false)`| (changed)| `"false"` |
+| `data-=(string 'true')`| (changed)| `"true"` |
+| `data-=(string 'false')`| (changed)| `"false"` |
+| `data-=(string 'on')`| (changed)| `"on"` |
+| `data-=(string 'off')`| (changed)| `"off"` |
+| `data-=(symbol)`| (initial, warning)| `<null>` |
+| `data-=(function)`| (initial, warning)| `<null>` |
+| `data-=(null)`| (initial)| `<null>` |
+| `data-=(undefined)`| (initial)| `<null>` |
+
+## `data-unknownattribute` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `data-unknownattribute=(string)`| (changed)| `"a string"` |
+| `data-unknownattribute=(empty string)`| (changed)| `<empty string>` |
+| `data-unknownattribute=(array with string)`| (changed)| `"string"` |
+| `data-unknownattribute=(empty array)`| (changed)| `<empty string>` |
+| `data-unknownattribute=(object)`| (changed)| `"result of toString()"` |
+| `data-unknownattribute=(numeric string)`| (changed)| `"42"` |
+| `data-unknownattribute=(-1)`| (changed)| `"-1"` |
+| `data-unknownattribute=(0)`| (changed)| `"0"` |
+| `data-unknownattribute=(integer)`| (changed)| `"1"` |
+| `data-unknownattribute=(NaN)`| (changed, warning)| `"NaN"` |
+| `data-unknownattribute=(float)`| (changed)| `"99.99"` |
+| `data-unknownattribute=(true)`| (changed)| `"true"` |
+| `data-unknownattribute=(false)`| (changed)| `"false"` |
+| `data-unknownattribute=(string 'true')`| (changed)| `"true"` |
+| `data-unknownattribute=(string 'false')`| (changed)| `"false"` |
+| `data-unknownattribute=(string 'on')`| (changed)| `"on"` |
+| `data-unknownattribute=(string 'off')`| (changed)| `"off"` |
+| `data-unknownattribute=(symbol)`| (initial, warning)| `<null>` |
+| `data-unknownattribute=(function)`| (initial, warning)| `<null>` |
+| `data-unknownattribute=(null)`| (initial)| `<null>` |
+| `data-unknownattribute=(undefined)`| (initial)| `<null>` |
+
+## `datatype` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `datatype=(string)`| (changed)| `"a string"` |
+| `datatype=(empty string)`| (changed)| `<empty string>` |
+| `datatype=(array with string)`| (changed)| `"string"` |
+| `datatype=(empty array)`| (changed)| `<empty string>` |
+| `datatype=(object)`| (changed)| `"result of toString()"` |
+| `datatype=(numeric string)`| (changed)| `"42"` |
+| `datatype=(-1)`| (changed)| `"-1"` |
+| `datatype=(0)`| (changed)| `"0"` |
+| `datatype=(integer)`| (changed)| `"1"` |
+| `datatype=(NaN)`| (changed, warning)| `"NaN"` |
+| `datatype=(float)`| (changed)| `"99.99"` |
+| `datatype=(true)`| (initial, warning)| `<null>` |
+| `datatype=(false)`| (initial, warning)| `<null>` |
+| `datatype=(string 'true')`| (changed)| `"true"` |
+| `datatype=(string 'false')`| (changed)| `"false"` |
+| `datatype=(string 'on')`| (changed)| `"on"` |
+| `datatype=(string 'off')`| (changed)| `"off"` |
+| `datatype=(symbol)`| (initial, warning)| `<null>` |
+| `datatype=(function)`| (initial, warning)| `<null>` |
+| `datatype=(null)`| (initial)| `<null>` |
+| `datatype=(undefined)`| (initial)| `<null>` |
+
+## `dateTime` (on `<time>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dateTime=(string)`| (changed)| `"2001-05-15T19:00"` |
+| `dateTime=(empty string)`| (changed)| `<empty string>` |
+| `dateTime=(array with string)`| (changed)| `"2001-05-15T19:00"` |
+| `dateTime=(empty array)`| (changed)| `<empty string>` |
+| `dateTime=(object)`| (changed)| `"result of toString()"` |
+| `dateTime=(numeric string)`| (changed)| `"42"` |
+| `dateTime=(-1)`| (changed)| `"-1"` |
+| `dateTime=(0)`| (changed)| `"0"` |
+| `dateTime=(integer)`| (changed)| `"1"` |
+| `dateTime=(NaN)`| (changed, warning)| `"NaN"` |
+| `dateTime=(float)`| (changed)| `"99.99"` |
+| `dateTime=(true)`| (initial, warning)| `<null>` |
+| `dateTime=(false)`| (initial, warning)| `<null>` |
+| `dateTime=(string 'true')`| (changed)| `"true"` |
+| `dateTime=(string 'false')`| (changed)| `"false"` |
+| `dateTime=(string 'on')`| (changed)| `"on"` |
+| `dateTime=(string 'off')`| (changed)| `"off"` |
+| `dateTime=(symbol)`| (initial, warning)| `<null>` |
+| `dateTime=(function)`| (initial, warning)| `<null>` |
+| `dateTime=(null)`| (initial)| `<null>` |
+| `dateTime=(undefined)`| (initial)| `<null>` |
+
+## `decelerate` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `decelerate=(string)`| (changed)| `"a string"` |
+| `decelerate=(empty string)`| (changed)| `<empty string>` |
+| `decelerate=(array with string)`| (changed)| `"string"` |
+| `decelerate=(empty array)`| (changed)| `<empty string>` |
+| `decelerate=(object)`| (changed)| `"result of toString()"` |
+| `decelerate=(numeric string)`| (changed)| `"42"` |
+| `decelerate=(-1)`| (changed)| `"-1"` |
+| `decelerate=(0)`| (changed)| `"0"` |
+| `decelerate=(integer)`| (changed)| `"1"` |
+| `decelerate=(NaN)`| (changed, warning)| `"NaN"` |
+| `decelerate=(float)`| (changed)| `"99.99"` |
+| `decelerate=(true)`| (initial, warning)| `<null>` |
+| `decelerate=(false)`| (initial, warning)| `<null>` |
+| `decelerate=(string 'true')`| (changed)| `"true"` |
+| `decelerate=(string 'false')`| (changed)| `"false"` |
+| `decelerate=(string 'on')`| (changed)| `"on"` |
+| `decelerate=(string 'off')`| (changed)| `"off"` |
+| `decelerate=(symbol)`| (initial, warning)| `<null>` |
+| `decelerate=(function)`| (initial, warning)| `<null>` |
+| `decelerate=(null)`| (initial)| `<null>` |
+| `decelerate=(undefined)`| (initial)| `<null>` |
+
+## `default` (on `<track>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `default=(string)`| (changed)| `<boolean: true>` |
+| `default=(empty string)`| (initial)| `<boolean: false>` |
+| `default=(array with string)`| (changed)| `<boolean: true>` |
+| `default=(empty array)`| (changed)| `<boolean: true>` |
+| `default=(object)`| (changed)| `<boolean: true>` |
+| `default=(numeric string)`| (changed)| `<boolean: true>` |
+| `default=(-1)`| (changed)| `<boolean: true>` |
+| `default=(0)`| (initial)| `<boolean: false>` |
+| `default=(integer)`| (changed)| `<boolean: true>` |
+| `default=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `default=(float)`| (changed)| `<boolean: true>` |
+| `default=(true)`| (changed)| `<boolean: true>` |
+| `default=(false)`| (initial)| `<boolean: false>` |
+| `default=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `default=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `default=(string 'on')`| (changed)| `<boolean: true>` |
+| `default=(string 'off')`| (changed)| `<boolean: true>` |
+| `default=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `default=(function)`| (initial, warning)| `<boolean: false>` |
+| `default=(null)`| (initial)| `<boolean: false>` |
+| `default=(undefined)`| (initial)| `<boolean: false>` |
+
+## `defaultchecked` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `defaultchecked=(string)`| (changed, warning)| `"a string"` |
+| `defaultchecked=(empty string)`| (changed, warning)| `<empty string>` |
+| `defaultchecked=(array with string)`| (changed, warning)| `"string"` |
+| `defaultchecked=(empty array)`| (changed, warning)| `<empty string>` |
+| `defaultchecked=(object)`| (changed, warning)| `"result of toString()"` |
+| `defaultchecked=(numeric string)`| (changed, warning)| `"42"` |
+| `defaultchecked=(-1)`| (changed, warning)| `"-1"` |
+| `defaultchecked=(0)`| (changed, warning)| `"0"` |
+| `defaultchecked=(integer)`| (changed, warning)| `"1"` |
+| `defaultchecked=(NaN)`| (changed, warning)| `"NaN"` |
+| `defaultchecked=(float)`| (changed, warning)| `"99.99"` |
+| `defaultchecked=(true)`| (initial, warning)| `<null>` |
+| `defaultchecked=(false)`| (initial, warning)| `<null>` |
+| `defaultchecked=(string 'true')`| (changed, warning)| `"true"` |
+| `defaultchecked=(string 'false')`| (changed, warning)| `"false"` |
+| `defaultchecked=(string 'on')`| (changed, warning)| `"on"` |
+| `defaultchecked=(string 'off')`| (changed, warning)| `"off"` |
+| `defaultchecked=(symbol)`| (initial, warning)| `<null>` |
+| `defaultchecked=(function)`| (initial, warning)| `<null>` |
+| `defaultchecked=(null)`| (initial, warning)| `<null>` |
+| `defaultchecked=(undefined)`| (initial, warning)| `<null>` |
+
+## `defaultChecked` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `defaultChecked=(string)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(empty string)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(array with string)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(empty array)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(object)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(numeric string)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(-1)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(0)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(integer)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `defaultChecked=(float)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(true)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(false)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(string 'true')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'false')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'on')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'off')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(symbol)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(function)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(null)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(undefined)`| (initial)| `<boolean: false>` |
+
+## `defaultValue` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `defaultValue=(string)`| (changed)| `"a string"` |
+| `defaultValue=(empty string)`| (initial)| `<empty string>` |
+| `defaultValue=(array with string)`| (changed)| `"string"` |
+| `defaultValue=(empty array)`| (initial)| `<empty string>` |
+| `defaultValue=(object)`| (changed)| `"result of toString()"` |
+| `defaultValue=(numeric string)`| (changed)| `"42"` |
+| `defaultValue=(-1)`| (changed)| `"-1"` |
+| `defaultValue=(0)`| (changed)| `"0"` |
+| `defaultValue=(integer)`| (changed)| `"1"` |
+| `defaultValue=(NaN)`| (changed, warning)| `"NaN"` |
+| `defaultValue=(float)`| (changed)| `"99.99"` |
+| `defaultValue=(true)`| (changed)| `"true"` |
+| `defaultValue=(false)`| (changed)| `"false"` |
+| `defaultValue=(string 'true')`| (changed)| `"true"` |
+| `defaultValue=(string 'false')`| (changed)| `"false"` |
+| `defaultValue=(string 'on')`| (changed)| `"on"` |
+| `defaultValue=(string 'off')`| (changed)| `"off"` |
+| `defaultValue=(symbol)`| (initial)| `<empty string>` |
+| `defaultValue=(function)`| (initial)| `<empty string>` |
+| `defaultValue=(null)`| (initial)| `<empty string>` |
+| `defaultValue=(undefined)`| (initial)| `<empty string>` |
+
+## `defaultValuE` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `defaultValuE=(string)`| (changed, warning)| `"a string"` |
+| `defaultValuE=(empty string)`| (changed, warning)| `<empty string>` |
+| `defaultValuE=(array with string)`| (changed, warning)| `"string"` |
+| `defaultValuE=(empty array)`| (changed, warning)| `<empty string>` |
+| `defaultValuE=(object)`| (changed, warning)| `"result of toString()"` |
+| `defaultValuE=(numeric string)`| (changed, warning)| `"42"` |
+| `defaultValuE=(-1)`| (changed, warning)| `"-1"` |
+| `defaultValuE=(0)`| (changed, warning)| `"0"` |
+| `defaultValuE=(integer)`| (changed, warning)| `"1"` |
+| `defaultValuE=(NaN)`| (changed, warning)| `"NaN"` |
+| `defaultValuE=(float)`| (changed, warning)| `"99.99"` |
+| `defaultValuE=(true)`| (initial, warning)| `<null>` |
+| `defaultValuE=(false)`| (initial, warning)| `<null>` |
+| `defaultValuE=(string 'true')`| (changed, warning)| `"true"` |
+| `defaultValuE=(string 'false')`| (changed, warning)| `"false"` |
+| `defaultValuE=(string 'on')`| (changed, warning)| `"on"` |
+| `defaultValuE=(string 'off')`| (changed, warning)| `"off"` |
+| `defaultValuE=(symbol)`| (initial, warning)| `<null>` |
+| `defaultValuE=(function)`| (initial, warning)| `<null>` |
+| `defaultValuE=(null)`| (initial, warning)| `<null>` |
+| `defaultValuE=(undefined)`| (initial, warning)| `<null>` |
+
+## `defer` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `defer=(string)`| (changed)| `<boolean: true>` |
+| `defer=(empty string)`| (initial)| `<boolean: false>` |
+| `defer=(array with string)`| (changed)| `<boolean: true>` |
+| `defer=(empty array)`| (changed)| `<boolean: true>` |
+| `defer=(object)`| (changed)| `<boolean: true>` |
+| `defer=(numeric string)`| (changed)| `<boolean: true>` |
+| `defer=(-1)`| (changed)| `<boolean: true>` |
+| `defer=(0)`| (initial)| `<boolean: false>` |
+| `defer=(integer)`| (changed)| `<boolean: true>` |
+| `defer=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `defer=(float)`| (changed)| `<boolean: true>` |
+| `defer=(true)`| (changed)| `<boolean: true>` |
+| `defer=(false)`| (initial)| `<boolean: false>` |
+| `defer=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `defer=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `defer=(string 'on')`| (changed)| `<boolean: true>` |
+| `defer=(string 'off')`| (changed)| `<boolean: true>` |
+| `defer=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `defer=(function)`| (initial, warning)| `<boolean: false>` |
+| `defer=(null)`| (initial)| `<boolean: false>` |
+| `defer=(undefined)`| (initial)| `<boolean: false>` |
+
+## `descent` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `descent=(string)`| (changed)| `"a string"` |
+| `descent=(empty string)`| (changed)| `<empty string>` |
+| `descent=(array with string)`| (changed)| `"string"` |
+| `descent=(empty array)`| (changed)| `<empty string>` |
+| `descent=(object)`| (changed)| `"result of toString()"` |
+| `descent=(numeric string)`| (changed)| `"42"` |
+| `descent=(-1)`| (changed)| `"-1"` |
+| `descent=(0)`| (changed)| `"0"` |
+| `descent=(integer)`| (changed)| `"1"` |
+| `descent=(NaN)`| (changed, warning)| `"NaN"` |
+| `descent=(float)`| (changed)| `"99.99"` |
+| `descent=(true)`| (initial, warning)| `<null>` |
+| `descent=(false)`| (initial, warning)| `<null>` |
+| `descent=(string 'true')`| (changed)| `"true"` |
+| `descent=(string 'false')`| (changed)| `"false"` |
+| `descent=(string 'on')`| (changed)| `"on"` |
+| `descent=(string 'off')`| (changed)| `"off"` |
+| `descent=(symbol)`| (initial, warning)| `<null>` |
+| `descent=(function)`| (initial, warning)| `<null>` |
+| `descent=(null)`| (initial)| `<null>` |
+| `descent=(undefined)`| (initial)| `<null>` |
+
+## `diffuseConstant` (on `<feDiffuseLighting>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `diffuseConstant=(string)`| (initial)| `<number: 1>` |
+| `diffuseConstant=(empty string)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(array with string)`| (initial)| `<number: 1>` |
+| `diffuseConstant=(empty array)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(object)`| (initial)| `<number: 1>` |
+| `diffuseConstant=(numeric string)`| (changed)| `<number: 42>` |
+| `diffuseConstant=(-1)`| (changed)| `<number: -1>` |
+| `diffuseConstant=(0)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(integer)`| (initial)| `<number: 1>` |
+| `diffuseConstant=(NaN)`| (initial, warning)| `<number: 1>` |
+| `diffuseConstant=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `diffuseConstant=(true)`| (initial, warning)| `<number: 1>` |
+| `diffuseConstant=(false)`| (initial, warning)| `<number: 1>` |
+| `diffuseConstant=(string 'true')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(string 'false')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(string 'on')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(string 'off')`| (initial)| `<number: 1>` |
+| `diffuseConstant=(symbol)`| (initial, warning)| `<number: 1>` |
+| `diffuseConstant=(function)`| (initial, warning)| `<number: 1>` |
+| `diffuseConstant=(null)`| (initial)| `<number: 1>` |
+| `diffuseConstant=(undefined)`| (initial)| `<number: 1>` |
+
+## `dir` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dir=(string)`| (changed)| `"rtl"` |
+| `dir=(empty string)`| (initial)| `<empty string>` |
+| `dir=(array with string)`| (changed)| `"rtl"` |
+| `dir=(empty array)`| (initial)| `<empty string>` |
+| `dir=(object)`| (initial)| `<empty string>` |
+| `dir=(numeric string)`| (initial)| `<empty string>` |
+| `dir=(-1)`| (initial)| `<empty string>` |
+| `dir=(0)`| (initial)| `<empty string>` |
+| `dir=(integer)`| (initial)| `<empty string>` |
+| `dir=(NaN)`| (initial, warning)| `<empty string>` |
+| `dir=(float)`| (initial)| `<empty string>` |
+| `dir=(true)`| (initial, warning)| `<empty string>` |
+| `dir=(false)`| (initial, warning)| `<empty string>` |
+| `dir=(string 'true')`| (initial)| `<empty string>` |
+| `dir=(string 'false')`| (initial)| `<empty string>` |
+| `dir=(string 'on')`| (initial)| `<empty string>` |
+| `dir=(string 'off')`| (initial)| `<empty string>` |
+| `dir=(symbol)`| (initial, warning)| `<empty string>` |
+| `dir=(function)`| (initial, warning)| `<empty string>` |
+| `dir=(null)`| (initial)| `<empty string>` |
+| `dir=(undefined)`| (initial)| `<empty string>` |
+
+## `direction` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `direction=(string)`| (changed)| `"rtl"` |
+| `direction=(empty string)`| (changed)| `<empty string>` |
+| `direction=(array with string)`| (changed)| `"rtl"` |
+| `direction=(empty array)`| (changed)| `<empty string>` |
+| `direction=(object)`| (changed)| `"result of toString()"` |
+| `direction=(numeric string)`| (changed)| `"42"` |
+| `direction=(-1)`| (changed)| `"-1"` |
+| `direction=(0)`| (changed)| `"0"` |
+| `direction=(integer)`| (changed)| `"1"` |
+| `direction=(NaN)`| (changed, warning)| `"NaN"` |
+| `direction=(float)`| (changed)| `"99.99"` |
+| `direction=(true)`| (initial, warning)| `<null>` |
+| `direction=(false)`| (initial, warning)| `<null>` |
+| `direction=(string 'true')`| (changed)| `"true"` |
+| `direction=(string 'false')`| (changed)| `"false"` |
+| `direction=(string 'on')`| (changed)| `"on"` |
+| `direction=(string 'off')`| (changed)| `"off"` |
+| `direction=(symbol)`| (initial, warning)| `<null>` |
+| `direction=(function)`| (initial, warning)| `<null>` |
+| `direction=(null)`| (initial)| `<null>` |
+| `direction=(undefined)`| (initial)| `<null>` |
+
+## `disabled` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `disabled=(string)`| (changed)| `<boolean: true>` |
+| `disabled=(empty string)`| (initial)| `<boolean: false>` |
+| `disabled=(array with string)`| (changed)| `<boolean: true>` |
+| `disabled=(empty array)`| (changed)| `<boolean: true>` |
+| `disabled=(object)`| (changed)| `<boolean: true>` |
+| `disabled=(numeric string)`| (changed)| `<boolean: true>` |
+| `disabled=(-1)`| (changed)| `<boolean: true>` |
+| `disabled=(0)`| (initial)| `<boolean: false>` |
+| `disabled=(integer)`| (changed)| `<boolean: true>` |
+| `disabled=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `disabled=(float)`| (changed)| `<boolean: true>` |
+| `disabled=(true)`| (changed)| `<boolean: true>` |
+| `disabled=(false)`| (initial)| `<boolean: false>` |
+| `disabled=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `disabled=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `disabled=(string 'on')`| (changed)| `<boolean: true>` |
+| `disabled=(string 'off')`| (changed)| `<boolean: true>` |
+| `disabled=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `disabled=(function)`| (initial, warning)| `<boolean: false>` |
+| `disabled=(null)`| (initial)| `<boolean: false>` |
+| `disabled=(undefined)`| (initial)| `<boolean: false>` |
+
+## `disablePictureInPicture` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `disablePictureInPicture=(string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(empty string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(array with string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(empty array)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(object)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(numeric string)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(-1)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(0)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(integer)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(NaN)`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(float)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(true)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(false)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(string 'true')`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(string 'false')`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(string 'on')`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(string 'off')`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(symbol)`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(function)`| (initial, warning)| `<undefined>` |
+| `disablePictureInPicture=(null)`| (initial)| `<undefined>` |
+| `disablePictureInPicture=(undefined)`| (initial)| `<undefined>` |
+
+## `disableRemotePlayback` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `disableRemotePlayback=(string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(empty string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(array with string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(empty array)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(object)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(numeric string)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(-1)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(0)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(integer)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(NaN)`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(float)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(true)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(false)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(string 'true')`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(string 'false')`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(string 'on')`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(string 'off')`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(symbol)`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(function)`| (initial, warning)| `<undefined>` |
+| `disableRemotePlayback=(null)`| (initial)| `<undefined>` |
+| `disableRemotePlayback=(undefined)`| (initial)| `<undefined>` |
+
+## `display` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `display=(string)`| (changed)| `"list-item"` |
+| `display=(empty string)`| (changed)| `<empty string>` |
+| `display=(array with string)`| (changed)| `"list-item"` |
+| `display=(empty array)`| (changed)| `<empty string>` |
+| `display=(object)`| (changed)| `"result of toString()"` |
+| `display=(numeric string)`| (changed)| `"42"` |
+| `display=(-1)`| (changed)| `"-1"` |
+| `display=(0)`| (changed)| `"0"` |
+| `display=(integer)`| (changed)| `"1"` |
+| `display=(NaN)`| (changed, warning)| `"NaN"` |
+| `display=(float)`| (changed)| `"99.99"` |
+| `display=(true)`| (initial, warning)| `<null>` |
+| `display=(false)`| (initial, warning)| `<null>` |
+| `display=(string 'true')`| (changed)| `"true"` |
+| `display=(string 'false')`| (changed)| `"false"` |
+| `display=(string 'on')`| (changed)| `"on"` |
+| `display=(string 'off')`| (changed)| `"off"` |
+| `display=(symbol)`| (initial, warning)| `<null>` |
+| `display=(function)`| (initial, warning)| `<null>` |
+| `display=(null)`| (initial)| `<null>` |
+| `display=(undefined)`| (initial)| `<null>` |
+
+## `divisor` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `divisor=(string)`| (initial)| `<number: 1>` |
+| `divisor=(empty string)`| (changed)| `<number: 0>` |
+| `divisor=(array with string)`| (initial)| `<number: 1>` |
+| `divisor=(empty array)`| (changed)| `<number: 0>` |
+| `divisor=(object)`| (initial)| `<number: 1>` |
+| `divisor=(numeric string)`| (changed)| `<number: 42>` |
+| `divisor=(-1)`| (changed)| `<number: -1>` |
+| `divisor=(0)`| (changed)| `<number: 0>` |
+| `divisor=(integer)`| (initial)| `<number: 1>` |
+| `divisor=(NaN)`| (initial, warning)| `<number: 1>` |
+| `divisor=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `divisor=(true)`| (initial, warning)| `<number: 1>` |
+| `divisor=(false)`| (initial, warning)| `<number: 1>` |
+| `divisor=(string 'true')`| (initial)| `<number: 1>` |
+| `divisor=(string 'false')`| (initial)| `<number: 1>` |
+| `divisor=(string 'on')`| (initial)| `<number: 1>` |
+| `divisor=(string 'off')`| (initial)| `<number: 1>` |
+| `divisor=(symbol)`| (initial, warning)| `<number: 1>` |
+| `divisor=(function)`| (initial, warning)| `<number: 1>` |
+| `divisor=(null)`| (initial)| `<number: 1>` |
+| `divisor=(undefined)`| (initial)| `<number: 1>` |
+
+## `dominant-baseline` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dominant-baseline=(string)`| (changed, warning)| `"a string"` |
+| `dominant-baseline=(empty string)`| (changed, warning)| `<empty string>` |
+| `dominant-baseline=(array with string)`| (changed, warning)| `"string"` |
+| `dominant-baseline=(empty array)`| (changed, warning)| `<empty string>` |
+| `dominant-baseline=(object)`| (changed, warning)| `"result of toString()"` |
+| `dominant-baseline=(numeric string)`| (changed, warning)| `"42"` |
+| `dominant-baseline=(-1)`| (changed, warning)| `"-1"` |
+| `dominant-baseline=(0)`| (changed, warning)| `"0"` |
+| `dominant-baseline=(integer)`| (changed, warning)| `"1"` |
+| `dominant-baseline=(NaN)`| (changed, warning)| `"NaN"` |
+| `dominant-baseline=(float)`| (changed, warning)| `"99.99"` |
+| `dominant-baseline=(true)`| (initial, warning)| `<null>` |
+| `dominant-baseline=(false)`| (initial, warning)| `<null>` |
+| `dominant-baseline=(string 'true')`| (changed, warning)| `"true"` |
+| `dominant-baseline=(string 'false')`| (changed, warning)| `"false"` |
+| `dominant-baseline=(string 'on')`| (changed, warning)| `"on"` |
+| `dominant-baseline=(string 'off')`| (changed, warning)| `"off"` |
+| `dominant-baseline=(symbol)`| (initial, warning)| `<null>` |
+| `dominant-baseline=(function)`| (initial, warning)| `<null>` |
+| `dominant-baseline=(null)`| (initial, warning)| `<null>` |
+| `dominant-baseline=(undefined)`| (initial, warning)| `<null>` |
+
+## `dominantBaseline` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dominantBaseline=(string)`| (changed)| `"a string"` |
+| `dominantBaseline=(empty string)`| (changed)| `<empty string>` |
+| `dominantBaseline=(array with string)`| (changed)| `"string"` |
+| `dominantBaseline=(empty array)`| (changed)| `<empty string>` |
+| `dominantBaseline=(object)`| (changed)| `"result of toString()"` |
+| `dominantBaseline=(numeric string)`| (changed)| `"42"` |
+| `dominantBaseline=(-1)`| (changed)| `"-1"` |
+| `dominantBaseline=(0)`| (changed)| `"0"` |
+| `dominantBaseline=(integer)`| (changed)| `"1"` |
+| `dominantBaseline=(NaN)`| (changed, warning)| `"NaN"` |
+| `dominantBaseline=(float)`| (changed)| `"99.99"` |
+| `dominantBaseline=(true)`| (initial, warning)| `<null>` |
+| `dominantBaseline=(false)`| (initial, warning)| `<null>` |
+| `dominantBaseline=(string 'true')`| (changed)| `"true"` |
+| `dominantBaseline=(string 'false')`| (changed)| `"false"` |
+| `dominantBaseline=(string 'on')`| (changed)| `"on"` |
+| `dominantBaseline=(string 'off')`| (changed)| `"off"` |
+| `dominantBaseline=(symbol)`| (initial, warning)| `<null>` |
+| `dominantBaseline=(function)`| (initial, warning)| `<null>` |
+| `dominantBaseline=(null)`| (initial)| `<null>` |
+| `dominantBaseline=(undefined)`| (initial)| `<null>` |
+
+## `download` (on `<a>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `download=(string)`| (changed)| `"a string"` |
+| `download=(empty string)`| (initial)| `<empty string>` |
+| `download=(array with string)`| (changed)| `"string"` |
+| `download=(empty array)`| (initial)| `<empty string>` |
+| `download=(object)`| (changed)| `"result of toString()"` |
+| `download=(numeric string)`| (changed)| `"42"` |
+| `download=(-1)`| (changed)| `"-1"` |
+| `download=(0)`| (changed)| `"0"` |
+| `download=(integer)`| (changed)| `"1"` |
+| `download=(NaN)`| (changed, warning)| `"NaN"` |
+| `download=(float)`| (changed)| `"99.99"` |
+| `download=(true)`| (initial)| `<empty string>` |
+| `download=(false)`| (initial)| `<empty string>` |
+| `download=(string 'true')`| (changed)| `"true"` |
+| `download=(string 'false')`| (changed)| `"false"` |
+| `download=(string 'on')`| (changed)| `"on"` |
+| `download=(string 'off')`| (changed)| `"off"` |
+| `download=(symbol)`| (initial, warning)| `<empty string>` |
+| `download=(function)`| (initial, warning)| `<empty string>` |
+| `download=(null)`| (initial)| `<empty string>` |
+| `download=(undefined)`| (initial)| `<empty string>` |
+
+## `dOwNlOaD` (on `<a>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dOwNlOaD=(string)`| (changed, warning)| `"a string"` |
+| `dOwNlOaD=(empty string)`| (changed, warning)| `<empty string>` |
+| `dOwNlOaD=(array with string)`| (changed, warning)| `"string"` |
+| `dOwNlOaD=(empty array)`| (changed, warning)| `<empty string>` |
+| `dOwNlOaD=(object)`| (changed, warning)| `"result of toString()"` |
+| `dOwNlOaD=(numeric string)`| (changed, warning)| `"42"` |
+| `dOwNlOaD=(-1)`| (changed, warning)| `"-1"` |
+| `dOwNlOaD=(0)`| (changed, warning)| `"0"` |
+| `dOwNlOaD=(integer)`| (changed, warning)| `"1"` |
+| `dOwNlOaD=(NaN)`| (changed, warning)| `"NaN"` |
+| `dOwNlOaD=(float)`| (changed, warning)| `"99.99"` |
+| `dOwNlOaD=(true)`| (initial, warning)| `<null>` |
+| `dOwNlOaD=(false)`| (initial, warning)| `<null>` |
+| `dOwNlOaD=(string 'true')`| (changed, warning)| `"true"` |
+| `dOwNlOaD=(string 'false')`| (changed, warning)| `"false"` |
+| `dOwNlOaD=(string 'on')`| (changed, warning)| `"on"` |
+| `dOwNlOaD=(string 'off')`| (changed, warning)| `"off"` |
+| `dOwNlOaD=(symbol)`| (initial, warning)| `<null>` |
+| `dOwNlOaD=(function)`| (initial, warning)| `<null>` |
+| `dOwNlOaD=(null)`| (initial, warning)| `<null>` |
+| `dOwNlOaD=(undefined)`| (initial, warning)| `<null>` |
+
+## `draggable` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `draggable=(string)`| (initial)| `<boolean: false>` |
+| `draggable=(empty string)`| (initial)| `<boolean: false>` |
+| `draggable=(array with string)`| (initial)| `<boolean: false>` |
+| `draggable=(empty array)`| (initial)| `<boolean: false>` |
+| `draggable=(object)`| (initial)| `<boolean: false>` |
+| `draggable=(numeric string)`| (initial)| `<boolean: false>` |
+| `draggable=(-1)`| (initial)| `<boolean: false>` |
+| `draggable=(0)`| (initial)| `<boolean: false>` |
+| `draggable=(integer)`| (initial)| `<boolean: false>` |
+| `draggable=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `draggable=(float)`| (initial)| `<boolean: false>` |
+| `draggable=(true)`| (changed)| `<boolean: true>` |
+| `draggable=(false)`| (initial)| `<boolean: false>` |
+| `draggable=(string 'true')`| (changed)| `<boolean: true>` |
+| `draggable=(string 'false')`| (initial)| `<boolean: false>` |
+| `draggable=(string 'on')`| (initial)| `<boolean: false>` |
+| `draggable=(string 'off')`| (initial)| `<boolean: false>` |
+| `draggable=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `draggable=(function)`| (initial, warning)| `<boolean: false>` |
+| `draggable=(null)`| (initial)| `<boolean: false>` |
+| `draggable=(undefined)`| (initial)| `<boolean: false>` |
+
+## `dur` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dur=(string)`| (changed)| `"a string"` |
+| `dur=(empty string)`| (changed)| `<empty string>` |
+| `dur=(array with string)`| (changed)| `"string"` |
+| `dur=(empty array)`| (changed)| `<empty string>` |
+| `dur=(object)`| (changed)| `"result of toString()"` |
+| `dur=(numeric string)`| (changed)| `"42"` |
+| `dur=(-1)`| (changed)| `"-1"` |
+| `dur=(0)`| (changed)| `"0"` |
+| `dur=(integer)`| (changed)| `"1"` |
+| `dur=(NaN)`| (changed, warning)| `"NaN"` |
+| `dur=(float)`| (changed)| `"99.99"` |
+| `dur=(true)`| (initial, warning)| `<null>` |
+| `dur=(false)`| (initial, warning)| `<null>` |
+| `dur=(string 'true')`| (changed)| `"true"` |
+| `dur=(string 'false')`| (changed)| `"false"` |
+| `dur=(string 'on')`| (changed)| `"on"` |
+| `dur=(string 'off')`| (changed)| `"off"` |
+| `dur=(symbol)`| (initial, warning)| `<null>` |
+| `dur=(function)`| (initial, warning)| `<null>` |
+| `dur=(null)`| (initial)| `<null>` |
+| `dur=(undefined)`| (initial)| `<null>` |
+
+## `dx` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dx=(string)`| (changed)| `[<SVGLength: 1pt>, <SVGLength: 2px>, <SVGLength: 3em>]` |
+| `dx=(empty string)`| (initial)| `[]` |
+| `dx=(array with string)`| (changed)| `[<SVGLength: 1pt>, <SVGLength: 2px>, <SVGLength: 3em>]` |
+| `dx=(empty array)`| (initial)| `[]` |
+| `dx=(object)`| (initial)| `[]` |
+| `dx=(numeric string)`| (changed)| `[<SVGLength: 42>]` |
+| `dx=(-1)`| (changed)| `[<SVGLength: -1>]` |
+| `dx=(0)`| (changed)| `[<SVGLength: 0>]` |
+| `dx=(integer)`| (changed)| `[<SVGLength: 1>]` |
+| `dx=(NaN)`| (initial, warning)| `[]` |
+| `dx=(float)`| (changed)| `[<SVGLength: 99.99>]` |
+| `dx=(true)`| (initial, warning)| `[]` |
+| `dx=(false)`| (initial, warning)| `[]` |
+| `dx=(string 'true')`| (initial)| `[]` |
+| `dx=(string 'false')`| (initial)| `[]` |
+| `dx=(string 'on')`| (initial)| `[]` |
+| `dx=(string 'off')`| (initial)| `[]` |
+| `dx=(symbol)`| (initial, warning)| `[]` |
+| `dx=(function)`| (initial, warning)| `[]` |
+| `dx=(null)`| (initial)| `[]` |
+| `dx=(undefined)`| (initial)| `[]` |
+
+## `dX` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dX=(string)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(empty string)`| (initial, warning)| `[]` |
+| `dX=(array with string)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(empty array)`| (initial, warning)| `[]` |
+| `dX=(object)`| (initial, warning)| `[]` |
+| `dX=(numeric string)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(-1)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(0)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(integer)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(NaN)`| (initial, warning)| `[]` |
+| `dX=(float)`| (initial, warning, ssr mismatch)| `[]` |
+| `dX=(true)`| (initial, warning)| `[]` |
+| `dX=(false)`| (initial, warning)| `[]` |
+| `dX=(string 'true')`| (initial, warning)| `[]` |
+| `dX=(string 'false')`| (initial, warning)| `[]` |
+| `dX=(string 'on')`| (initial, warning)| `[]` |
+| `dX=(string 'off')`| (initial, warning)| `[]` |
+| `dX=(symbol)`| (initial, warning)| `[]` |
+| `dX=(function)`| (initial, warning)| `[]` |
+| `dX=(null)`| (initial, warning)| `[]` |
+| `dX=(undefined)`| (initial, warning)| `[]` |
+
+## `dy` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dy=(string)`| (changed)| `[<SVGLength: 1>, <SVGLength: 2>, <SVGLength: 3>]` |
+| `dy=(empty string)`| (initial)| `[]` |
+| `dy=(array with string)`| (changed)| `[<SVGLength: 1>, <SVGLength: 2>, <SVGLength: 3>]` |
+| `dy=(empty array)`| (initial)| `[]` |
+| `dy=(object)`| (initial)| `[]` |
+| `dy=(numeric string)`| (changed)| `[<SVGLength: 42>]` |
+| `dy=(-1)`| (changed)| `[<SVGLength: -1>]` |
+| `dy=(0)`| (changed)| `[<SVGLength: 0>]` |
+| `dy=(integer)`| (changed)| `[<SVGLength: 1>]` |
+| `dy=(NaN)`| (initial, warning)| `[]` |
+| `dy=(float)`| (changed)| `[<SVGLength: 99.99>]` |
+| `dy=(true)`| (initial, warning)| `[]` |
+| `dy=(false)`| (initial, warning)| `[]` |
+| `dy=(string 'true')`| (initial)| `[]` |
+| `dy=(string 'false')`| (initial)| `[]` |
+| `dy=(string 'on')`| (initial)| `[]` |
+| `dy=(string 'off')`| (initial)| `[]` |
+| `dy=(symbol)`| (initial, warning)| `[]` |
+| `dy=(function)`| (initial, warning)| `[]` |
+| `dy=(null)`| (initial)| `[]` |
+| `dy=(undefined)`| (initial)| `[]` |
+
+## `dY` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `dY=(string)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(empty string)`| (initial, warning)| `[]` |
+| `dY=(array with string)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(empty array)`| (initial, warning)| `[]` |
+| `dY=(object)`| (initial, warning)| `[]` |
+| `dY=(numeric string)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(-1)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(0)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(integer)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(NaN)`| (initial, warning)| `[]` |
+| `dY=(float)`| (initial, warning, ssr mismatch)| `[]` |
+| `dY=(true)`| (initial, warning)| `[]` |
+| `dY=(false)`| (initial, warning)| `[]` |
+| `dY=(string 'true')`| (initial, warning)| `[]` |
+| `dY=(string 'false')`| (initial, warning)| `[]` |
+| `dY=(string 'on')`| (initial, warning)| `[]` |
+| `dY=(string 'off')`| (initial, warning)| `[]` |
+| `dY=(symbol)`| (initial, warning)| `[]` |
+| `dY=(function)`| (initial, warning)| `[]` |
+| `dY=(null)`| (initial, warning)| `[]` |
+| `dY=(undefined)`| (initial, warning)| `[]` |
+
+## `edgeMode` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `edgeMode=(string)`| (changed)| `<number: 2>` |
+| `edgeMode=(empty string)`| (initial)| `<number: 1>` |
+| `edgeMode=(array with string)`| (changed)| `<number: 2>` |
+| `edgeMode=(empty array)`| (initial)| `<number: 1>` |
+| `edgeMode=(object)`| (initial)| `<number: 1>` |
+| `edgeMode=(numeric string)`| (initial)| `<number: 1>` |
+| `edgeMode=(-1)`| (initial)| `<number: 1>` |
+| `edgeMode=(0)`| (initial)| `<number: 1>` |
+| `edgeMode=(integer)`| (initial)| `<number: 1>` |
+| `edgeMode=(NaN)`| (initial, warning)| `<number: 1>` |
+| `edgeMode=(float)`| (initial)| `<number: 1>` |
+| `edgeMode=(true)`| (initial, warning)| `<number: 1>` |
+| `edgeMode=(false)`| (initial, warning)| `<number: 1>` |
+| `edgeMode=(string 'true')`| (initial)| `<number: 1>` |
+| `edgeMode=(string 'false')`| (initial)| `<number: 1>` |
+| `edgeMode=(string 'on')`| (initial)| `<number: 1>` |
+| `edgeMode=(string 'off')`| (initial)| `<number: 1>` |
+| `edgeMode=(symbol)`| (initial, warning)| `<number: 1>` |
+| `edgeMode=(function)`| (initial, warning)| `<number: 1>` |
+| `edgeMode=(null)`| (initial)| `<number: 1>` |
+| `edgeMode=(undefined)`| (initial)| `<number: 1>` |
+
+## `elevation` (on `<feDistantLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `elevation=(string)`| (initial)| `<number: 0>` |
+| `elevation=(empty string)`| (initial)| `<number: 0>` |
+| `elevation=(array with string)`| (initial)| `<number: 0>` |
+| `elevation=(empty array)`| (initial)| `<number: 0>` |
+| `elevation=(object)`| (initial)| `<number: 0>` |
+| `elevation=(numeric string)`| (changed)| `<number: 42>` |
+| `elevation=(-1)`| (changed)| `<number: -1>` |
+| `elevation=(0)`| (initial)| `<number: 0>` |
+| `elevation=(integer)`| (changed)| `<number: 1>` |
+| `elevation=(NaN)`| (initial, warning)| `<number: 0>` |
+| `elevation=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `elevation=(true)`| (initial, warning)| `<number: 0>` |
+| `elevation=(false)`| (initial, warning)| `<number: 0>` |
+| `elevation=(string 'true')`| (initial)| `<number: 0>` |
+| `elevation=(string 'false')`| (initial)| `<number: 0>` |
+| `elevation=(string 'on')`| (initial)| `<number: 0>` |
+| `elevation=(string 'off')`| (initial)| `<number: 0>` |
+| `elevation=(symbol)`| (initial, warning)| `<number: 0>` |
+| `elevation=(function)`| (initial, warning)| `<number: 0>` |
+| `elevation=(null)`| (initial)| `<number: 0>` |
+| `elevation=(undefined)`| (initial)| `<number: 0>` |
+
+## `enable-background` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `enable-background=(string)`| (changed, warning)| `"a string"` |
+| `enable-background=(empty string)`| (changed, warning)| `<empty string>` |
+| `enable-background=(array with string)`| (changed, warning)| `"string"` |
+| `enable-background=(empty array)`| (changed, warning)| `<empty string>` |
+| `enable-background=(object)`| (changed, warning)| `"result of toString()"` |
+| `enable-background=(numeric string)`| (changed, warning)| `"42"` |
+| `enable-background=(-1)`| (changed, warning)| `"-1"` |
+| `enable-background=(0)`| (changed, warning)| `"0"` |
+| `enable-background=(integer)`| (changed, warning)| `"1"` |
+| `enable-background=(NaN)`| (changed, warning)| `"NaN"` |
+| `enable-background=(float)`| (changed, warning)| `"99.99"` |
+| `enable-background=(true)`| (initial, warning)| `<null>` |
+| `enable-background=(false)`| (initial, warning)| `<null>` |
+| `enable-background=(string 'true')`| (changed, warning)| `"true"` |
+| `enable-background=(string 'false')`| (changed, warning)| `"false"` |
+| `enable-background=(string 'on')`| (changed, warning)| `"on"` |
+| `enable-background=(string 'off')`| (changed, warning)| `"off"` |
+| `enable-background=(symbol)`| (initial, warning)| `<null>` |
+| `enable-background=(function)`| (initial, warning)| `<null>` |
+| `enable-background=(null)`| (initial, warning)| `<null>` |
+| `enable-background=(undefined)`| (initial, warning)| `<null>` |
+
+## `enableBackground` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `enableBackground=(string)`| (changed)| `"a string"` |
+| `enableBackground=(empty string)`| (changed)| `<empty string>` |
+| `enableBackground=(array with string)`| (changed)| `"string"` |
+| `enableBackground=(empty array)`| (changed)| `<empty string>` |
+| `enableBackground=(object)`| (changed)| `"result of toString()"` |
+| `enableBackground=(numeric string)`| (changed)| `"42"` |
+| `enableBackground=(-1)`| (changed)| `"-1"` |
+| `enableBackground=(0)`| (changed)| `"0"` |
+| `enableBackground=(integer)`| (changed)| `"1"` |
+| `enableBackground=(NaN)`| (changed, warning)| `"NaN"` |
+| `enableBackground=(float)`| (changed)| `"99.99"` |
+| `enableBackground=(true)`| (initial, warning)| `<null>` |
+| `enableBackground=(false)`| (initial, warning)| `<null>` |
+| `enableBackground=(string 'true')`| (changed)| `"true"` |
+| `enableBackground=(string 'false')`| (changed)| `"false"` |
+| `enableBackground=(string 'on')`| (changed)| `"on"` |
+| `enableBackground=(string 'off')`| (changed)| `"off"` |
+| `enableBackground=(symbol)`| (initial, warning)| `<null>` |
+| `enableBackground=(function)`| (initial, warning)| `<null>` |
+| `enableBackground=(null)`| (initial)| `<null>` |
+| `enableBackground=(undefined)`| (initial)| `<null>` |
+
+## `encType` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `encType=(string)`| (changed)| `"text/plain"` |
+| `encType=(empty string)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(array with string)`| (changed)| `"text/plain"` |
+| `encType=(empty array)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(object)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(numeric string)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(-1)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(0)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(integer)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(NaN)`| (initial, warning)| `"application/x-www-form-urlencoded"` |
+| `encType=(float)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(true)`| (initial, warning)| `"application/x-www-form-urlencoded"` |
+| `encType=(false)`| (initial, warning)| `"application/x-www-form-urlencoded"` |
+| `encType=(string 'true')`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(string 'false')`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(string 'on')`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(string 'off')`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(symbol)`| (initial, warning)| `"application/x-www-form-urlencoded"` |
+| `encType=(function)`| (initial, warning)| `"application/x-www-form-urlencoded"` |
+| `encType=(null)`| (initial)| `"application/x-www-form-urlencoded"` |
+| `encType=(undefined)`| (initial)| `"application/x-www-form-urlencoded"` |
+
+## `end` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `end=(string)`| (changed)| `"a string"` |
+| `end=(empty string)`| (changed)| `<empty string>` |
+| `end=(array with string)`| (changed)| `"string"` |
+| `end=(empty array)`| (changed)| `<empty string>` |
+| `end=(object)`| (changed)| `"result of toString()"` |
+| `end=(numeric string)`| (changed)| `"42"` |
+| `end=(-1)`| (changed)| `"-1"` |
+| `end=(0)`| (changed)| `"0"` |
+| `end=(integer)`| (changed)| `"1"` |
+| `end=(NaN)`| (changed, warning)| `"NaN"` |
+| `end=(float)`| (changed)| `"99.99"` |
+| `end=(true)`| (initial, warning)| `<null>` |
+| `end=(false)`| (initial, warning)| `<null>` |
+| `end=(string 'true')`| (changed)| `"true"` |
+| `end=(string 'false')`| (changed)| `"false"` |
+| `end=(string 'on')`| (changed)| `"on"` |
+| `end=(string 'off')`| (changed)| `"off"` |
+| `end=(symbol)`| (initial, warning)| `<null>` |
+| `end=(function)`| (initial, warning)| `<null>` |
+| `end=(null)`| (initial)| `<null>` |
+| `end=(undefined)`| (initial)| `<null>` |
+
+## `enterKeyHint` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `enterKeyHint=(string)`| (initial)| `<empty string>` |
+| `enterKeyHint=(empty string)`| (initial)| `<empty string>` |
+| `enterKeyHint=(array with string)`| (initial)| `<empty string>` |
+| `enterKeyHint=(empty array)`| (initial)| `<empty string>` |
+| `enterKeyHint=(object)`| (initial)| `<empty string>` |
+| `enterKeyHint=(numeric string)`| (initial)| `<empty string>` |
+| `enterKeyHint=(-1)`| (initial)| `<empty string>` |
+| `enterKeyHint=(0)`| (initial)| `<empty string>` |
+| `enterKeyHint=(integer)`| (initial)| `<empty string>` |
+| `enterKeyHint=(NaN)`| (initial, warning)| `<empty string>` |
+| `enterKeyHint=(float)`| (initial)| `<empty string>` |
+| `enterKeyHint=(true)`| (initial, warning)| `<empty string>` |
+| `enterKeyHint=(false)`| (initial, warning)| `<empty string>` |
+| `enterKeyHint=(string 'true')`| (initial)| `<empty string>` |
+| `enterKeyHint=(string 'false')`| (initial)| `<empty string>` |
+| `enterKeyHint=(string 'on')`| (initial)| `<empty string>` |
+| `enterKeyHint=(string 'off')`| (initial)| `<empty string>` |
+| `enterKeyHint=(symbol)`| (initial, warning)| `<empty string>` |
+| `enterKeyHint=(function)`| (initial, warning)| `<empty string>` |
+| `enterKeyHint=(null)`| (initial)| `<empty string>` |
+| `enterKeyHint=(undefined)`| (initial)| `<empty string>` |
+
+## `exponent` (on `<feFuncA>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `exponent=(string)`| (initial)| `<number: 1>` |
+| `exponent=(empty string)`| (changed)| `<number: 0>` |
+| `exponent=(array with string)`| (initial)| `<number: 1>` |
+| `exponent=(empty array)`| (changed)| `<number: 0>` |
+| `exponent=(object)`| (initial)| `<number: 1>` |
+| `exponent=(numeric string)`| (changed)| `<number: 42>` |
+| `exponent=(-1)`| (changed)| `<number: -1>` |
+| `exponent=(0)`| (changed)| `<number: 0>` |
+| `exponent=(integer)`| (initial)| `<number: 1>` |
+| `exponent=(NaN)`| (initial, warning)| `<number: 1>` |
+| `exponent=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `exponent=(true)`| (initial, warning)| `<number: 1>` |
+| `exponent=(false)`| (initial, warning)| `<number: 1>` |
+| `exponent=(string 'true')`| (initial)| `<number: 1>` |
+| `exponent=(string 'false')`| (initial)| `<number: 1>` |
+| `exponent=(string 'on')`| (initial)| `<number: 1>` |
+| `exponent=(string 'off')`| (initial)| `<number: 1>` |
+| `exponent=(symbol)`| (initial, warning)| `<number: 1>` |
+| `exponent=(function)`| (initial, warning)| `<number: 1>` |
+| `exponent=(null)`| (initial)| `<number: 1>` |
+| `exponent=(undefined)`| (initial)| `<number: 1>` |
+
+## `externalResourcesRequired` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `externalResourcesRequired=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `externalResourcesRequired=(empty string)`| (changed, ssr mismatch)| `<empty string>` |
+| `externalResourcesRequired=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `externalResourcesRequired=(empty array)`| (changed, ssr mismatch)| `<empty string>` |
+| `externalResourcesRequired=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `externalResourcesRequired=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `externalResourcesRequired=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `externalResourcesRequired=(0)`| (changed, ssr mismatch)| `"0"` |
+| `externalResourcesRequired=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `externalResourcesRequired=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `externalResourcesRequired=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `externalResourcesRequired=(true)`| (changed, ssr mismatch)| `"true"` |
+| `externalResourcesRequired=(false)`| (changed, ssr mismatch)| `"false"` |
+| `externalResourcesRequired=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `externalResourcesRequired=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `externalResourcesRequired=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `externalResourcesRequired=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `externalResourcesRequired=(symbol)`| (initial, warning)| `<null>` |
+| `externalResourcesRequired=(function)`| (initial, warning)| `<null>` |
+| `externalResourcesRequired=(null)`| (initial)| `<null>` |
+| `externalResourcesRequired=(undefined)`| (initial)| `<null>` |
+
+## `fetchPriority` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fetchPriority=(string)`| (changed)| `"high"` |
+| `fetchPriority=(empty string)`| (initial)| `"auto"` |
+| `fetchPriority=(array with string)`| (changed)| `"high"` |
+| `fetchPriority=(empty array)`| (initial)| `"auto"` |
+| `fetchPriority=(object)`| (initial)| `"auto"` |
+| `fetchPriority=(numeric string)`| (initial)| `"auto"` |
+| `fetchPriority=(-1)`| (initial)| `"auto"` |
+| `fetchPriority=(0)`| (initial)| `"auto"` |
+| `fetchPriority=(integer)`| (initial)| `"auto"` |
+| `fetchPriority=(NaN)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(float)`| (initial)| `"auto"` |
+| `fetchPriority=(true)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(false)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(string 'true')`| (initial)| `"auto"` |
+| `fetchPriority=(string 'false')`| (initial)| `"auto"` |
+| `fetchPriority=(string 'on')`| (initial)| `"auto"` |
+| `fetchPriority=(string 'off')`| (initial)| `"auto"` |
+| `fetchPriority=(symbol)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(function)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(null)`| (initial)| `"auto"` |
+| `fetchPriority=(undefined)`| (initial)| `"auto"` |
+
+## `fetchpriority` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fetchpriority=(string)`| (changed, warning)| `"high"` |
+| `fetchpriority=(empty string)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(array with string)`| (changed, warning)| `"high"` |
+| `fetchpriority=(empty array)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(object)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(numeric string)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(-1)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(0)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(integer)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(NaN)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(float)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(true)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(false)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(string 'true')`| (initial, warning)| `"auto"` |
+| `fetchpriority=(string 'false')`| (initial, warning)| `"auto"` |
+| `fetchpriority=(string 'on')`| (initial, warning)| `"auto"` |
+| `fetchpriority=(string 'off')`| (initial, warning)| `"auto"` |
+| `fetchpriority=(symbol)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(function)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(null)`| (initial, warning)| `"auto"` |
+| `fetchpriority=(undefined)`| (initial, warning)| `"auto"` |
+
+## `fetchPriority` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fetchPriority=(string)`| (changed)| `"high"` |
+| `fetchPriority=(empty string)`| (initial)| `"auto"` |
+| `fetchPriority=(array with string)`| (changed)| `"high"` |
+| `fetchPriority=(empty array)`| (initial)| `"auto"` |
+| `fetchPriority=(object)`| (initial)| `"auto"` |
+| `fetchPriority=(numeric string)`| (initial)| `"auto"` |
+| `fetchPriority=(-1)`| (initial)| `"auto"` |
+| `fetchPriority=(0)`| (initial)| `"auto"` |
+| `fetchPriority=(integer)`| (initial)| `"auto"` |
+| `fetchPriority=(NaN)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(float)`| (initial)| `"auto"` |
+| `fetchPriority=(true)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(false)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(string 'true')`| (initial)| `"auto"` |
+| `fetchPriority=(string 'false')`| (initial)| `"auto"` |
+| `fetchPriority=(string 'on')`| (initial)| `"auto"` |
+| `fetchPriority=(string 'off')`| (initial)| `"auto"` |
+| `fetchPriority=(symbol)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(function)`| (initial, warning)| `"auto"` |
+| `fetchPriority=(null)`| (initial)| `"auto"` |
+| `fetchPriority=(undefined)`| (initial)| `"auto"` |
+
+## `fill` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fill=(string)`| (changed)| `"a string"` |
+| `fill=(empty string)`| (changed)| `<empty string>` |
+| `fill=(array with string)`| (changed)| `"string"` |
+| `fill=(empty array)`| (changed)| `<empty string>` |
+| `fill=(object)`| (changed)| `"result of toString()"` |
+| `fill=(numeric string)`| (changed)| `"42"` |
+| `fill=(-1)`| (changed)| `"-1"` |
+| `fill=(0)`| (changed)| `"0"` |
+| `fill=(integer)`| (changed)| `"1"` |
+| `fill=(NaN)`| (changed, warning)| `"NaN"` |
+| `fill=(float)`| (changed)| `"99.99"` |
+| `fill=(true)`| (initial, warning)| `<null>` |
+| `fill=(false)`| (initial, warning)| `<null>` |
+| `fill=(string 'true')`| (changed)| `"true"` |
+| `fill=(string 'false')`| (changed)| `"false"` |
+| `fill=(string 'on')`| (changed)| `"on"` |
+| `fill=(string 'off')`| (changed)| `"off"` |
+| `fill=(symbol)`| (initial, warning)| `<null>` |
+| `fill=(function)`| (initial, warning)| `<null>` |
+| `fill=(null)`| (initial)| `<null>` |
+| `fill=(undefined)`| (initial)| `<null>` |
+
+## `fillOpacity` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fillOpacity=(string)`| (changed)| `"a string"` |
+| `fillOpacity=(empty string)`| (changed)| `<empty string>` |
+| `fillOpacity=(array with string)`| (changed)| `"string"` |
+| `fillOpacity=(empty array)`| (changed)| `<empty string>` |
+| `fillOpacity=(object)`| (changed)| `"result of toString()"` |
+| `fillOpacity=(numeric string)`| (changed)| `"42"` |
+| `fillOpacity=(-1)`| (changed)| `"-1"` |
+| `fillOpacity=(0)`| (changed)| `"0"` |
+| `fillOpacity=(integer)`| (changed)| `"1"` |
+| `fillOpacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `fillOpacity=(float)`| (changed)| `"99.99"` |
+| `fillOpacity=(true)`| (initial, warning)| `<null>` |
+| `fillOpacity=(false)`| (initial, warning)| `<null>` |
+| `fillOpacity=(string 'true')`| (changed)| `"true"` |
+| `fillOpacity=(string 'false')`| (changed)| `"false"` |
+| `fillOpacity=(string 'on')`| (changed)| `"on"` |
+| `fillOpacity=(string 'off')`| (changed)| `"off"` |
+| `fillOpacity=(symbol)`| (initial, warning)| `<null>` |
+| `fillOpacity=(function)`| (initial, warning)| `<null>` |
+| `fillOpacity=(null)`| (initial)| `<null>` |
+| `fillOpacity=(undefined)`| (initial)| `<null>` |
+
+## `fill-opacity` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fill-opacity=(string)`| (changed, warning)| `"a string"` |
+| `fill-opacity=(empty string)`| (changed, warning)| `<empty string>` |
+| `fill-opacity=(array with string)`| (changed, warning)| `"string"` |
+| `fill-opacity=(empty array)`| (changed, warning)| `<empty string>` |
+| `fill-opacity=(object)`| (changed, warning)| `"result of toString()"` |
+| `fill-opacity=(numeric string)`| (changed, warning)| `"42"` |
+| `fill-opacity=(-1)`| (changed, warning)| `"-1"` |
+| `fill-opacity=(0)`| (changed, warning)| `"0"` |
+| `fill-opacity=(integer)`| (changed, warning)| `"1"` |
+| `fill-opacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `fill-opacity=(float)`| (changed, warning)| `"99.99"` |
+| `fill-opacity=(true)`| (initial, warning)| `<null>` |
+| `fill-opacity=(false)`| (initial, warning)| `<null>` |
+| `fill-opacity=(string 'true')`| (changed, warning)| `"true"` |
+| `fill-opacity=(string 'false')`| (changed, warning)| `"false"` |
+| `fill-opacity=(string 'on')`| (changed, warning)| `"on"` |
+| `fill-opacity=(string 'off')`| (changed, warning)| `"off"` |
+| `fill-opacity=(symbol)`| (initial, warning)| `<null>` |
+| `fill-opacity=(function)`| (initial, warning)| `<null>` |
+| `fill-opacity=(null)`| (initial, warning)| `<null>` |
+| `fill-opacity=(undefined)`| (initial, warning)| `<null>` |
+
+## `fillRule` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fillRule=(string)`| (changed)| `"a string"` |
+| `fillRule=(empty string)`| (changed)| `<empty string>` |
+| `fillRule=(array with string)`| (changed)| `"string"` |
+| `fillRule=(empty array)`| (changed)| `<empty string>` |
+| `fillRule=(object)`| (changed)| `"result of toString()"` |
+| `fillRule=(numeric string)`| (changed)| `"42"` |
+| `fillRule=(-1)`| (changed)| `"-1"` |
+| `fillRule=(0)`| (changed)| `"0"` |
+| `fillRule=(integer)`| (changed)| `"1"` |
+| `fillRule=(NaN)`| (changed, warning)| `"NaN"` |
+| `fillRule=(float)`| (changed)| `"99.99"` |
+| `fillRule=(true)`| (initial, warning)| `<null>` |
+| `fillRule=(false)`| (initial, warning)| `<null>` |
+| `fillRule=(string 'true')`| (changed)| `"true"` |
+| `fillRule=(string 'false')`| (changed)| `"false"` |
+| `fillRule=(string 'on')`| (changed)| `"on"` |
+| `fillRule=(string 'off')`| (changed)| `"off"` |
+| `fillRule=(symbol)`| (initial, warning)| `<null>` |
+| `fillRule=(function)`| (initial, warning)| `<null>` |
+| `fillRule=(null)`| (initial)| `<null>` |
+| `fillRule=(undefined)`| (initial)| `<null>` |
+
+## `fill-rule` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fill-rule=(string)`| (changed, warning)| `"a string"` |
+| `fill-rule=(empty string)`| (changed, warning)| `<empty string>` |
+| `fill-rule=(array with string)`| (changed, warning)| `"string"` |
+| `fill-rule=(empty array)`| (changed, warning)| `<empty string>` |
+| `fill-rule=(object)`| (changed, warning)| `"result of toString()"` |
+| `fill-rule=(numeric string)`| (changed, warning)| `"42"` |
+| `fill-rule=(-1)`| (changed, warning)| `"-1"` |
+| `fill-rule=(0)`| (changed, warning)| `"0"` |
+| `fill-rule=(integer)`| (changed, warning)| `"1"` |
+| `fill-rule=(NaN)`| (changed, warning)| `"NaN"` |
+| `fill-rule=(float)`| (changed, warning)| `"99.99"` |
+| `fill-rule=(true)`| (initial, warning)| `<null>` |
+| `fill-rule=(false)`| (initial, warning)| `<null>` |
+| `fill-rule=(string 'true')`| (changed, warning)| `"true"` |
+| `fill-rule=(string 'false')`| (changed, warning)| `"false"` |
+| `fill-rule=(string 'on')`| (changed, warning)| `"on"` |
+| `fill-rule=(string 'off')`| (changed, warning)| `"off"` |
+| `fill-rule=(symbol)`| (initial, warning)| `<null>` |
+| `fill-rule=(function)`| (initial, warning)| `<null>` |
+| `fill-rule=(null)`| (initial, warning)| `<null>` |
+| `fill-rule=(undefined)`| (initial, warning)| `<null>` |
+
+## `filter` (on `<g>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `filter=(string)`| (changed)| `"a string"` |
+| `filter=(empty string)`| (changed)| `<empty string>` |
+| `filter=(array with string)`| (changed)| `"string"` |
+| `filter=(empty array)`| (changed)| `<empty string>` |
+| `filter=(object)`| (changed)| `"result of toString()"` |
+| `filter=(numeric string)`| (changed)| `"42"` |
+| `filter=(-1)`| (changed)| `"-1"` |
+| `filter=(0)`| (changed)| `"0"` |
+| `filter=(integer)`| (changed)| `"1"` |
+| `filter=(NaN)`| (changed, warning)| `"NaN"` |
+| `filter=(float)`| (changed)| `"99.99"` |
+| `filter=(true)`| (initial, warning)| `<null>` |
+| `filter=(false)`| (initial, warning)| `<null>` |
+| `filter=(string 'true')`| (changed)| `"true"` |
+| `filter=(string 'false')`| (changed)| `"false"` |
+| `filter=(string 'on')`| (changed)| `"on"` |
+| `filter=(string 'off')`| (changed)| `"off"` |
+| `filter=(symbol)`| (initial, warning)| `<null>` |
+| `filter=(function)`| (initial, warning)| `<null>` |
+| `filter=(null)`| (initial)| `<null>` |
+| `filter=(undefined)`| (initial)| `<null>` |
+
+## `filterRes` (on `<filter>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `filterRes=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `filterRes=(empty string)`| (changed, ssr mismatch)| `<empty string>` |
+| `filterRes=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `filterRes=(empty array)`| (changed, ssr mismatch)| `<empty string>` |
+| `filterRes=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `filterRes=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `filterRes=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `filterRes=(0)`| (changed, ssr mismatch)| `"0"` |
+| `filterRes=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `filterRes=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `filterRes=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `filterRes=(true)`| (initial, warning)| `<null>` |
+| `filterRes=(false)`| (initial, warning)| `<null>` |
+| `filterRes=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `filterRes=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `filterRes=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `filterRes=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `filterRes=(symbol)`| (initial, warning)| `<null>` |
+| `filterRes=(function)`| (initial, warning)| `<null>` |
+| `filterRes=(null)`| (initial)| `<null>` |
+| `filterRes=(undefined)`| (initial)| `<null>` |
+
+## `filterUnits` (on `<filter>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `filterUnits=(string)`| (changed)| `<number: 1>` |
+| `filterUnits=(empty string)`| (initial)| `<number: 2>` |
+| `filterUnits=(array with string)`| (changed)| `<number: 1>` |
+| `filterUnits=(empty array)`| (initial)| `<number: 2>` |
+| `filterUnits=(object)`| (initial)| `<number: 2>` |
+| `filterUnits=(numeric string)`| (initial)| `<number: 2>` |
+| `filterUnits=(-1)`| (initial)| `<number: 2>` |
+| `filterUnits=(0)`| (initial)| `<number: 2>` |
+| `filterUnits=(integer)`| (initial)| `<number: 2>` |
+| `filterUnits=(NaN)`| (initial, warning)| `<number: 2>` |
+| `filterUnits=(float)`| (initial)| `<number: 2>` |
+| `filterUnits=(true)`| (initial, warning)| `<number: 2>` |
+| `filterUnits=(false)`| (initial, warning)| `<number: 2>` |
+| `filterUnits=(string 'true')`| (initial)| `<number: 2>` |
+| `filterUnits=(string 'false')`| (initial)| `<number: 2>` |
+| `filterUnits=(string 'on')`| (initial)| `<number: 2>` |
+| `filterUnits=(string 'off')`| (initial)| `<number: 2>` |
+| `filterUnits=(symbol)`| (initial, warning)| `<number: 2>` |
+| `filterUnits=(function)`| (initial, warning)| `<number: 2>` |
+| `filterUnits=(null)`| (initial)| `<number: 2>` |
+| `filterUnits=(undefined)`| (initial)| `<number: 2>` |
+
+## `flood-color` (on `<feflood>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `flood-color=(string)`| (changed, warning)| `"currentColor"` |
+| `flood-color=(empty string)`| (changed, warning)| `<empty string>` |
+| `flood-color=(array with string)`| (changed, warning)| `"currentColor"` |
+| `flood-color=(empty array)`| (changed, warning)| `<empty string>` |
+| `flood-color=(object)`| (changed, warning)| `"result of toString()"` |
+| `flood-color=(numeric string)`| (changed, warning)| `"42"` |
+| `flood-color=(-1)`| (changed, warning)| `"-1"` |
+| `flood-color=(0)`| (changed, warning)| `"0"` |
+| `flood-color=(integer)`| (changed, warning)| `"1"` |
+| `flood-color=(NaN)`| (changed, warning)| `"NaN"` |
+| `flood-color=(float)`| (changed, warning)| `"99.99"` |
+| `flood-color=(true)`| (initial, warning)| `<null>` |
+| `flood-color=(false)`| (initial, warning)| `<null>` |
+| `flood-color=(string 'true')`| (changed, warning)| `"true"` |
+| `flood-color=(string 'false')`| (changed, warning)| `"false"` |
+| `flood-color=(string 'on')`| (changed, warning)| `"on"` |
+| `flood-color=(string 'off')`| (changed, warning)| `"off"` |
+| `flood-color=(symbol)`| (initial, warning)| `<null>` |
+| `flood-color=(function)`| (initial, warning)| `<null>` |
+| `flood-color=(null)`| (initial, warning)| `<null>` |
+| `flood-color=(undefined)`| (initial, warning)| `<null>` |
+
+## `floodColor` (on `<feflood>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `floodColor=(string)`| (changed)| `"currentColor"` |
+| `floodColor=(empty string)`| (changed)| `<empty string>` |
+| `floodColor=(array with string)`| (changed)| `"currentColor"` |
+| `floodColor=(empty array)`| (changed)| `<empty string>` |
+| `floodColor=(object)`| (changed)| `"result of toString()"` |
+| `floodColor=(numeric string)`| (changed)| `"42"` |
+| `floodColor=(-1)`| (changed)| `"-1"` |
+| `floodColor=(0)`| (changed)| `"0"` |
+| `floodColor=(integer)`| (changed)| `"1"` |
+| `floodColor=(NaN)`| (changed, warning)| `"NaN"` |
+| `floodColor=(float)`| (changed)| `"99.99"` |
+| `floodColor=(true)`| (initial, warning)| `<null>` |
+| `floodColor=(false)`| (initial, warning)| `<null>` |
+| `floodColor=(string 'true')`| (changed)| `"true"` |
+| `floodColor=(string 'false')`| (changed)| `"false"` |
+| `floodColor=(string 'on')`| (changed)| `"on"` |
+| `floodColor=(string 'off')`| (changed)| `"off"` |
+| `floodColor=(symbol)`| (initial, warning)| `<null>` |
+| `floodColor=(function)`| (initial, warning)| `<null>` |
+| `floodColor=(null)`| (initial)| `<null>` |
+| `floodColor=(undefined)`| (initial)| `<null>` |
+
+## `flood-opacity` (on `<feflood>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `flood-opacity=(string)`| (changed, warning)| `"inherit"` |
+| `flood-opacity=(empty string)`| (changed, warning)| `<empty string>` |
+| `flood-opacity=(array with string)`| (changed, warning)| `"inherit"` |
+| `flood-opacity=(empty array)`| (changed, warning)| `<empty string>` |
+| `flood-opacity=(object)`| (changed, warning)| `"result of toString()"` |
+| `flood-opacity=(numeric string)`| (changed, warning)| `"42"` |
+| `flood-opacity=(-1)`| (changed, warning)| `"-1"` |
+| `flood-opacity=(0)`| (changed, warning)| `"0"` |
+| `flood-opacity=(integer)`| (changed, warning)| `"1"` |
+| `flood-opacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `flood-opacity=(float)`| (changed, warning)| `"99.99"` |
+| `flood-opacity=(true)`| (initial, warning)| `<null>` |
+| `flood-opacity=(false)`| (initial, warning)| `<null>` |
+| `flood-opacity=(string 'true')`| (changed, warning)| `"true"` |
+| `flood-opacity=(string 'false')`| (changed, warning)| `"false"` |
+| `flood-opacity=(string 'on')`| (changed, warning)| `"on"` |
+| `flood-opacity=(string 'off')`| (changed, warning)| `"off"` |
+| `flood-opacity=(symbol)`| (initial, warning)| `<null>` |
+| `flood-opacity=(function)`| (initial, warning)| `<null>` |
+| `flood-opacity=(null)`| (initial, warning)| `<null>` |
+| `flood-opacity=(undefined)`| (initial, warning)| `<null>` |
+
+## `floodOpacity` (on `<feflood>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `floodOpacity=(string)`| (changed)| `"inherit"` |
+| `floodOpacity=(empty string)`| (changed)| `<empty string>` |
+| `floodOpacity=(array with string)`| (changed)| `"inherit"` |
+| `floodOpacity=(empty array)`| (changed)| `<empty string>` |
+| `floodOpacity=(object)`| (changed)| `"result of toString()"` |
+| `floodOpacity=(numeric string)`| (changed)| `"42"` |
+| `floodOpacity=(-1)`| (changed)| `"-1"` |
+| `floodOpacity=(0)`| (changed)| `"0"` |
+| `floodOpacity=(integer)`| (changed)| `"1"` |
+| `floodOpacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `floodOpacity=(float)`| (changed)| `"99.99"` |
+| `floodOpacity=(true)`| (initial, warning)| `<null>` |
+| `floodOpacity=(false)`| (initial, warning)| `<null>` |
+| `floodOpacity=(string 'true')`| (changed)| `"true"` |
+| `floodOpacity=(string 'false')`| (changed)| `"false"` |
+| `floodOpacity=(string 'on')`| (changed)| `"on"` |
+| `floodOpacity=(string 'off')`| (changed)| `"off"` |
+| `floodOpacity=(symbol)`| (initial, warning)| `<null>` |
+| `floodOpacity=(function)`| (initial, warning)| `<null>` |
+| `floodOpacity=(null)`| (initial)| `<null>` |
+| `floodOpacity=(undefined)`| (initial)| `<null>` |
+
+## `focusable` (on `<p>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `focusable=(string)`| (changed)| `"a string"` |
+| `focusable=(empty string)`| (changed)| `<empty string>` |
+| `focusable=(array with string)`| (changed)| `"string"` |
+| `focusable=(empty array)`| (changed)| `<empty string>` |
+| `focusable=(object)`| (changed)| `"result of toString()"` |
+| `focusable=(numeric string)`| (changed)| `"42"` |
+| `focusable=(-1)`| (changed)| `"-1"` |
+| `focusable=(0)`| (changed)| `"0"` |
+| `focusable=(integer)`| (changed)| `"1"` |
+| `focusable=(NaN)`| (changed, warning)| `"NaN"` |
+| `focusable=(float)`| (changed)| `"99.99"` |
+| `focusable=(true)`| (changed)| `"true"` |
+| `focusable=(false)`| (changed)| `"false"` |
+| `focusable=(string 'true')`| (changed)| `"true"` |
+| `focusable=(string 'false')`| (changed)| `"false"` |
+| `focusable=(string 'on')`| (changed)| `"on"` |
+| `focusable=(string 'off')`| (changed)| `"off"` |
+| `focusable=(symbol)`| (initial, warning)| `<null>` |
+| `focusable=(function)`| (initial, warning)| `<null>` |
+| `focusable=(null)`| (initial)| `<null>` |
+| `focusable=(undefined)`| (initial)| `<null>` |
+
+## `font-family` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-family=(string)`| (changed, warning)| `"a string"` |
+| `font-family=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-family=(array with string)`| (changed, warning)| `"string"` |
+| `font-family=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-family=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-family=(numeric string)`| (changed, warning)| `"42"` |
+| `font-family=(-1)`| (changed, warning)| `"-1"` |
+| `font-family=(0)`| (changed, warning)| `"0"` |
+| `font-family=(integer)`| (changed, warning)| `"1"` |
+| `font-family=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-family=(float)`| (changed, warning)| `"99.99"` |
+| `font-family=(true)`| (initial, warning)| `<null>` |
+| `font-family=(false)`| (initial, warning)| `<null>` |
+| `font-family=(string 'true')`| (changed, warning)| `"true"` |
+| `font-family=(string 'false')`| (changed, warning)| `"false"` |
+| `font-family=(string 'on')`| (changed, warning)| `"on"` |
+| `font-family=(string 'off')`| (changed, warning)| `"off"` |
+| `font-family=(symbol)`| (initial, warning)| `<null>` |
+| `font-family=(function)`| (initial, warning)| `<null>` |
+| `font-family=(null)`| (initial, warning)| `<null>` |
+| `font-family=(undefined)`| (initial, warning)| `<null>` |
+
+## `font-size` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-size=(string)`| (changed, warning)| `"a string"` |
+| `font-size=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-size=(array with string)`| (changed, warning)| `"string"` |
+| `font-size=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-size=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-size=(numeric string)`| (changed, warning)| `"42"` |
+| `font-size=(-1)`| (changed, warning)| `"-1"` |
+| `font-size=(0)`| (changed, warning)| `"0"` |
+| `font-size=(integer)`| (changed, warning)| `"1"` |
+| `font-size=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-size=(float)`| (changed, warning)| `"99.99"` |
+| `font-size=(true)`| (initial, warning)| `<null>` |
+| `font-size=(false)`| (initial, warning)| `<null>` |
+| `font-size=(string 'true')`| (changed, warning)| `"true"` |
+| `font-size=(string 'false')`| (changed, warning)| `"false"` |
+| `font-size=(string 'on')`| (changed, warning)| `"on"` |
+| `font-size=(string 'off')`| (changed, warning)| `"off"` |
+| `font-size=(symbol)`| (initial, warning)| `<null>` |
+| `font-size=(function)`| (initial, warning)| `<null>` |
+| `font-size=(null)`| (initial, warning)| `<null>` |
+| `font-size=(undefined)`| (initial, warning)| `<null>` |
+
+## `font-size-adjust` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-size-adjust=(string)`| (changed, warning)| `"a string"` |
+| `font-size-adjust=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-size-adjust=(array with string)`| (changed, warning)| `"string"` |
+| `font-size-adjust=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-size-adjust=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-size-adjust=(numeric string)`| (changed, warning)| `"42"` |
+| `font-size-adjust=(-1)`| (changed, warning)| `"-1"` |
+| `font-size-adjust=(0)`| (changed, warning)| `"0"` |
+| `font-size-adjust=(integer)`| (changed, warning)| `"1"` |
+| `font-size-adjust=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-size-adjust=(float)`| (changed, warning)| `"99.99"` |
+| `font-size-adjust=(true)`| (initial, warning)| `<null>` |
+| `font-size-adjust=(false)`| (initial, warning)| `<null>` |
+| `font-size-adjust=(string 'true')`| (changed, warning)| `"true"` |
+| `font-size-adjust=(string 'false')`| (changed, warning)| `"false"` |
+| `font-size-adjust=(string 'on')`| (changed, warning)| `"on"` |
+| `font-size-adjust=(string 'off')`| (changed, warning)| `"off"` |
+| `font-size-adjust=(symbol)`| (initial, warning)| `<null>` |
+| `font-size-adjust=(function)`| (initial, warning)| `<null>` |
+| `font-size-adjust=(null)`| (initial, warning)| `<null>` |
+| `font-size-adjust=(undefined)`| (initial, warning)| `<null>` |
+
+## `font-stretch` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-stretch=(string)`| (changed, warning)| `"a string"` |
+| `font-stretch=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-stretch=(array with string)`| (changed, warning)| `"string"` |
+| `font-stretch=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-stretch=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-stretch=(numeric string)`| (changed, warning)| `"42"` |
+| `font-stretch=(-1)`| (changed, warning)| `"-1"` |
+| `font-stretch=(0)`| (changed, warning)| `"0"` |
+| `font-stretch=(integer)`| (changed, warning)| `"1"` |
+| `font-stretch=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-stretch=(float)`| (changed, warning)| `"99.99"` |
+| `font-stretch=(true)`| (initial, warning)| `<null>` |
+| `font-stretch=(false)`| (initial, warning)| `<null>` |
+| `font-stretch=(string 'true')`| (changed, warning)| `"true"` |
+| `font-stretch=(string 'false')`| (changed, warning)| `"false"` |
+| `font-stretch=(string 'on')`| (changed, warning)| `"on"` |
+| `font-stretch=(string 'off')`| (changed, warning)| `"off"` |
+| `font-stretch=(symbol)`| (initial, warning)| `<null>` |
+| `font-stretch=(function)`| (initial, warning)| `<null>` |
+| `font-stretch=(null)`| (initial, warning)| `<null>` |
+| `font-stretch=(undefined)`| (initial, warning)| `<null>` |
+
+## `font-style` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-style=(string)`| (changed, warning)| `"a string"` |
+| `font-style=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-style=(array with string)`| (changed, warning)| `"string"` |
+| `font-style=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-style=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-style=(numeric string)`| (changed, warning)| `"42"` |
+| `font-style=(-1)`| (changed, warning)| `"-1"` |
+| `font-style=(0)`| (changed, warning)| `"0"` |
+| `font-style=(integer)`| (changed, warning)| `"1"` |
+| `font-style=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-style=(float)`| (changed, warning)| `"99.99"` |
+| `font-style=(true)`| (initial, warning)| `<null>` |
+| `font-style=(false)`| (initial, warning)| `<null>` |
+| `font-style=(string 'true')`| (changed, warning)| `"true"` |
+| `font-style=(string 'false')`| (changed, warning)| `"false"` |
+| `font-style=(string 'on')`| (changed, warning)| `"on"` |
+| `font-style=(string 'off')`| (changed, warning)| `"off"` |
+| `font-style=(symbol)`| (initial, warning)| `<null>` |
+| `font-style=(function)`| (initial, warning)| `<null>` |
+| `font-style=(null)`| (initial, warning)| `<null>` |
+| `font-style=(undefined)`| (initial, warning)| `<null>` |
+
+## `font-variant` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-variant=(string)`| (changed, warning)| `"a string"` |
+| `font-variant=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-variant=(array with string)`| (changed, warning)| `"string"` |
+| `font-variant=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-variant=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-variant=(numeric string)`| (changed, warning)| `"42"` |
+| `font-variant=(-1)`| (changed, warning)| `"-1"` |
+| `font-variant=(0)`| (changed, warning)| `"0"` |
+| `font-variant=(integer)`| (changed, warning)| `"1"` |
+| `font-variant=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-variant=(float)`| (changed, warning)| `"99.99"` |
+| `font-variant=(true)`| (initial, warning)| `<null>` |
+| `font-variant=(false)`| (initial, warning)| `<null>` |
+| `font-variant=(string 'true')`| (changed, warning)| `"true"` |
+| `font-variant=(string 'false')`| (changed, warning)| `"false"` |
+| `font-variant=(string 'on')`| (changed, warning)| `"on"` |
+| `font-variant=(string 'off')`| (changed, warning)| `"off"` |
+| `font-variant=(symbol)`| (initial, warning)| `<null>` |
+| `font-variant=(function)`| (initial, warning)| `<null>` |
+| `font-variant=(null)`| (initial, warning)| `<null>` |
+| `font-variant=(undefined)`| (initial, warning)| `<null>` |
+
+## `font-weight` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `font-weight=(string)`| (changed, warning)| `"a string"` |
+| `font-weight=(empty string)`| (changed, warning)| `<empty string>` |
+| `font-weight=(array with string)`| (changed, warning)| `"string"` |
+| `font-weight=(empty array)`| (changed, warning)| `<empty string>` |
+| `font-weight=(object)`| (changed, warning)| `"result of toString()"` |
+| `font-weight=(numeric string)`| (changed, warning)| `"42"` |
+| `font-weight=(-1)`| (changed, warning)| `"-1"` |
+| `font-weight=(0)`| (changed, warning)| `"0"` |
+| `font-weight=(integer)`| (changed, warning)| `"1"` |
+| `font-weight=(NaN)`| (changed, warning)| `"NaN"` |
+| `font-weight=(float)`| (changed, warning)| `"99.99"` |
+| `font-weight=(true)`| (initial, warning)| `<null>` |
+| `font-weight=(false)`| (initial, warning)| `<null>` |
+| `font-weight=(string 'true')`| (changed, warning)| `"true"` |
+| `font-weight=(string 'false')`| (changed, warning)| `"false"` |
+| `font-weight=(string 'on')`| (changed, warning)| `"on"` |
+| `font-weight=(string 'off')`| (changed, warning)| `"off"` |
+| `font-weight=(symbol)`| (initial, warning)| `<null>` |
+| `font-weight=(function)`| (initial, warning)| `<null>` |
+| `font-weight=(null)`| (initial, warning)| `<null>` |
+| `font-weight=(undefined)`| (initial, warning)| `<null>` |
+
+## `fontFamily` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontFamily=(string)`| (changed)| `"a string"` |
+| `fontFamily=(empty string)`| (changed)| `<empty string>` |
+| `fontFamily=(array with string)`| (changed)| `"string"` |
+| `fontFamily=(empty array)`| (changed)| `<empty string>` |
+| `fontFamily=(object)`| (changed)| `"result of toString()"` |
+| `fontFamily=(numeric string)`| (changed)| `"42"` |
+| `fontFamily=(-1)`| (changed)| `"-1"` |
+| `fontFamily=(0)`| (changed)| `"0"` |
+| `fontFamily=(integer)`| (changed)| `"1"` |
+| `fontFamily=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontFamily=(float)`| (changed)| `"99.99"` |
+| `fontFamily=(true)`| (initial, warning)| `<null>` |
+| `fontFamily=(false)`| (initial, warning)| `<null>` |
+| `fontFamily=(string 'true')`| (changed)| `"true"` |
+| `fontFamily=(string 'false')`| (changed)| `"false"` |
+| `fontFamily=(string 'on')`| (changed)| `"on"` |
+| `fontFamily=(string 'off')`| (changed)| `"off"` |
+| `fontFamily=(symbol)`| (initial, warning)| `<null>` |
+| `fontFamily=(function)`| (initial, warning)| `<null>` |
+| `fontFamily=(null)`| (initial)| `<null>` |
+| `fontFamily=(undefined)`| (initial)| `<null>` |
+
+## `fontSize` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontSize=(string)`| (changed)| `"a string"` |
+| `fontSize=(empty string)`| (changed)| `<empty string>` |
+| `fontSize=(array with string)`| (changed)| `"string"` |
+| `fontSize=(empty array)`| (changed)| `<empty string>` |
+| `fontSize=(object)`| (changed)| `"result of toString()"` |
+| `fontSize=(numeric string)`| (changed)| `"42"` |
+| `fontSize=(-1)`| (changed)| `"-1"` |
+| `fontSize=(0)`| (changed)| `"0"` |
+| `fontSize=(integer)`| (changed)| `"1"` |
+| `fontSize=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontSize=(float)`| (changed)| `"99.99"` |
+| `fontSize=(true)`| (initial, warning)| `<null>` |
+| `fontSize=(false)`| (initial, warning)| `<null>` |
+| `fontSize=(string 'true')`| (changed)| `"true"` |
+| `fontSize=(string 'false')`| (changed)| `"false"` |
+| `fontSize=(string 'on')`| (changed)| `"on"` |
+| `fontSize=(string 'off')`| (changed)| `"off"` |
+| `fontSize=(symbol)`| (initial, warning)| `<null>` |
+| `fontSize=(function)`| (initial, warning)| `<null>` |
+| `fontSize=(null)`| (initial)| `<null>` |
+| `fontSize=(undefined)`| (initial)| `<null>` |
+
+## `fontSizeAdjust` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontSizeAdjust=(string)`| (changed)| `"a string"` |
+| `fontSizeAdjust=(empty string)`| (changed)| `<empty string>` |
+| `fontSizeAdjust=(array with string)`| (changed)| `"string"` |
+| `fontSizeAdjust=(empty array)`| (changed)| `<empty string>` |
+| `fontSizeAdjust=(object)`| (changed)| `"result of toString()"` |
+| `fontSizeAdjust=(numeric string)`| (changed)| `"42"` |
+| `fontSizeAdjust=(-1)`| (changed)| `"-1"` |
+| `fontSizeAdjust=(0)`| (changed)| `"0"` |
+| `fontSizeAdjust=(integer)`| (changed)| `"1"` |
+| `fontSizeAdjust=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontSizeAdjust=(float)`| (changed)| `"99.99"` |
+| `fontSizeAdjust=(true)`| (initial, warning)| `<null>` |
+| `fontSizeAdjust=(false)`| (initial, warning)| `<null>` |
+| `fontSizeAdjust=(string 'true')`| (changed)| `"true"` |
+| `fontSizeAdjust=(string 'false')`| (changed)| `"false"` |
+| `fontSizeAdjust=(string 'on')`| (changed)| `"on"` |
+| `fontSizeAdjust=(string 'off')`| (changed)| `"off"` |
+| `fontSizeAdjust=(symbol)`| (initial, warning)| `<null>` |
+| `fontSizeAdjust=(function)`| (initial, warning)| `<null>` |
+| `fontSizeAdjust=(null)`| (initial)| `<null>` |
+| `fontSizeAdjust=(undefined)`| (initial)| `<null>` |
+
+## `fontStretch` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontStretch=(string)`| (changed)| `"a string"` |
+| `fontStretch=(empty string)`| (changed)| `<empty string>` |
+| `fontStretch=(array with string)`| (changed)| `"string"` |
+| `fontStretch=(empty array)`| (changed)| `<empty string>` |
+| `fontStretch=(object)`| (changed)| `"result of toString()"` |
+| `fontStretch=(numeric string)`| (changed)| `"42"` |
+| `fontStretch=(-1)`| (changed)| `"-1"` |
+| `fontStretch=(0)`| (changed)| `"0"` |
+| `fontStretch=(integer)`| (changed)| `"1"` |
+| `fontStretch=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontStretch=(float)`| (changed)| `"99.99"` |
+| `fontStretch=(true)`| (initial, warning)| `<null>` |
+| `fontStretch=(false)`| (initial, warning)| `<null>` |
+| `fontStretch=(string 'true')`| (changed)| `"true"` |
+| `fontStretch=(string 'false')`| (changed)| `"false"` |
+| `fontStretch=(string 'on')`| (changed)| `"on"` |
+| `fontStretch=(string 'off')`| (changed)| `"off"` |
+| `fontStretch=(symbol)`| (initial, warning)| `<null>` |
+| `fontStretch=(function)`| (initial, warning)| `<null>` |
+| `fontStretch=(null)`| (initial)| `<null>` |
+| `fontStretch=(undefined)`| (initial)| `<null>` |
+
+## `fontStyle` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontStyle=(string)`| (changed)| `"a string"` |
+| `fontStyle=(empty string)`| (changed)| `<empty string>` |
+| `fontStyle=(array with string)`| (changed)| `"string"` |
+| `fontStyle=(empty array)`| (changed)| `<empty string>` |
+| `fontStyle=(object)`| (changed)| `"result of toString()"` |
+| `fontStyle=(numeric string)`| (changed)| `"42"` |
+| `fontStyle=(-1)`| (changed)| `"-1"` |
+| `fontStyle=(0)`| (changed)| `"0"` |
+| `fontStyle=(integer)`| (changed)| `"1"` |
+| `fontStyle=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontStyle=(float)`| (changed)| `"99.99"` |
+| `fontStyle=(true)`| (initial, warning)| `<null>` |
+| `fontStyle=(false)`| (initial, warning)| `<null>` |
+| `fontStyle=(string 'true')`| (changed)| `"true"` |
+| `fontStyle=(string 'false')`| (changed)| `"false"` |
+| `fontStyle=(string 'on')`| (changed)| `"on"` |
+| `fontStyle=(string 'off')`| (changed)| `"off"` |
+| `fontStyle=(symbol)`| (initial, warning)| `<null>` |
+| `fontStyle=(function)`| (initial, warning)| `<null>` |
+| `fontStyle=(null)`| (initial)| `<null>` |
+| `fontStyle=(undefined)`| (initial)| `<null>` |
+
+## `fontVariant` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontVariant=(string)`| (changed)| `"a string"` |
+| `fontVariant=(empty string)`| (changed)| `<empty string>` |
+| `fontVariant=(array with string)`| (changed)| `"string"` |
+| `fontVariant=(empty array)`| (changed)| `<empty string>` |
+| `fontVariant=(object)`| (changed)| `"result of toString()"` |
+| `fontVariant=(numeric string)`| (changed)| `"42"` |
+| `fontVariant=(-1)`| (changed)| `"-1"` |
+| `fontVariant=(0)`| (changed)| `"0"` |
+| `fontVariant=(integer)`| (changed)| `"1"` |
+| `fontVariant=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontVariant=(float)`| (changed)| `"99.99"` |
+| `fontVariant=(true)`| (initial, warning)| `<null>` |
+| `fontVariant=(false)`| (initial, warning)| `<null>` |
+| `fontVariant=(string 'true')`| (changed)| `"true"` |
+| `fontVariant=(string 'false')`| (changed)| `"false"` |
+| `fontVariant=(string 'on')`| (changed)| `"on"` |
+| `fontVariant=(string 'off')`| (changed)| `"off"` |
+| `fontVariant=(symbol)`| (initial, warning)| `<null>` |
+| `fontVariant=(function)`| (initial, warning)| `<null>` |
+| `fontVariant=(null)`| (initial)| `<null>` |
+| `fontVariant=(undefined)`| (initial)| `<null>` |
+
+## `fontWeight` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fontWeight=(string)`| (changed)| `"a string"` |
+| `fontWeight=(empty string)`| (changed)| `<empty string>` |
+| `fontWeight=(array with string)`| (changed)| `"string"` |
+| `fontWeight=(empty array)`| (changed)| `<empty string>` |
+| `fontWeight=(object)`| (changed)| `"result of toString()"` |
+| `fontWeight=(numeric string)`| (changed)| `"42"` |
+| `fontWeight=(-1)`| (changed)| `"-1"` |
+| `fontWeight=(0)`| (changed)| `"0"` |
+| `fontWeight=(integer)`| (changed)| `"1"` |
+| `fontWeight=(NaN)`| (changed, warning)| `"NaN"` |
+| `fontWeight=(float)`| (changed)| `"99.99"` |
+| `fontWeight=(true)`| (initial, warning)| `<null>` |
+| `fontWeight=(false)`| (initial, warning)| `<null>` |
+| `fontWeight=(string 'true')`| (changed)| `"true"` |
+| `fontWeight=(string 'false')`| (changed)| `"false"` |
+| `fontWeight=(string 'on')`| (changed)| `"on"` |
+| `fontWeight=(string 'off')`| (changed)| `"off"` |
+| `fontWeight=(symbol)`| (initial, warning)| `<null>` |
+| `fontWeight=(function)`| (initial, warning)| `<null>` |
+| `fontWeight=(null)`| (initial)| `<null>` |
+| `fontWeight=(undefined)`| (initial)| `<null>` |
+
+## `for` (on `<label>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `for=(string)`| (changed, warning)| `"a string"` |
+| `for=(empty string)`| (initial, warning)| `<empty string>` |
+| `for=(array with string)`| (changed, warning)| `"string"` |
+| `for=(empty array)`| (initial, warning)| `<empty string>` |
+| `for=(object)`| (changed, warning)| `"result of toString()"` |
+| `for=(numeric string)`| (changed, warning)| `"42"` |
+| `for=(-1)`| (changed, warning)| `"-1"` |
+| `for=(0)`| (changed, warning)| `"0"` |
+| `for=(integer)`| (changed, warning)| `"1"` |
+| `for=(NaN)`| (changed, warning)| `"NaN"` |
+| `for=(float)`| (changed, warning)| `"99.99"` |
+| `for=(true)`| (initial, warning)| `<empty string>` |
+| `for=(false)`| (initial, warning)| `<empty string>` |
+| `for=(string 'true')`| (changed, warning)| `"true"` |
+| `for=(string 'false')`| (changed, warning)| `"false"` |
+| `for=(string 'on')`| (changed, warning)| `"on"` |
+| `for=(string 'off')`| (changed, warning)| `"off"` |
+| `for=(symbol)`| (initial, warning)| `<empty string>` |
+| `for=(function)`| (initial, warning)| `<empty string>` |
+| `for=(null)`| (initial, warning)| `<empty string>` |
+| `for=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `fOr` (on `<label>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fOr=(string)`| (changed, warning)| `"a string"` |
+| `fOr=(empty string)`| (initial, warning)| `<empty string>` |
+| `fOr=(array with string)`| (changed, warning)| `"string"` |
+| `fOr=(empty array)`| (initial, warning)| `<empty string>` |
+| `fOr=(object)`| (changed, warning)| `"result of toString()"` |
+| `fOr=(numeric string)`| (changed, warning)| `"42"` |
+| `fOr=(-1)`| (changed, warning)| `"-1"` |
+| `fOr=(0)`| (changed, warning)| `"0"` |
+| `fOr=(integer)`| (changed, warning)| `"1"` |
+| `fOr=(NaN)`| (changed, warning)| `"NaN"` |
+| `fOr=(float)`| (changed, warning)| `"99.99"` |
+| `fOr=(true)`| (initial, warning)| `<empty string>` |
+| `fOr=(false)`| (initial, warning)| `<empty string>` |
+| `fOr=(string 'true')`| (changed, warning)| `"true"` |
+| `fOr=(string 'false')`| (changed, warning)| `"false"` |
+| `fOr=(string 'on')`| (changed, warning)| `"on"` |
+| `fOr=(string 'off')`| (changed, warning)| `"off"` |
+| `fOr=(symbol)`| (initial, warning)| `<empty string>` |
+| `fOr=(function)`| (initial, warning)| `<empty string>` |
+| `fOr=(null)`| (initial, warning)| `<empty string>` |
+| `fOr=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `form` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `form=(string)`| (changed)| `"a string"` |
+| `form=(empty string)`| (changed)| `<empty string>` |
+| `form=(array with string)`| (changed)| `"string"` |
+| `form=(empty array)`| (changed)| `<empty string>` |
+| `form=(object)`| (changed)| `"result of toString()"` |
+| `form=(numeric string)`| (changed)| `"42"` |
+| `form=(-1)`| (changed)| `"-1"` |
+| `form=(0)`| (changed)| `"0"` |
+| `form=(integer)`| (changed)| `"1"` |
+| `form=(NaN)`| (changed, warning)| `"NaN"` |
+| `form=(float)`| (changed)| `"99.99"` |
+| `form=(true)`| (initial, warning)| `<null>` |
+| `form=(false)`| (initial, warning)| `<null>` |
+| `form=(string 'true')`| (changed)| `"true"` |
+| `form=(string 'false')`| (changed)| `"false"` |
+| `form=(string 'on')`| (changed)| `"on"` |
+| `form=(string 'off')`| (changed)| `"off"` |
+| `form=(symbol)`| (initial, warning)| `<null>` |
+| `form=(function)`| (initial, warning)| `<null>` |
+| `form=(null)`| (initial)| `<null>` |
+| `form=(undefined)`| (initial)| `<null>` |
+
+## `formAction` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `formAction=(string)`| (changed, warning)| `"https://reactjs.com/"` |
+| `formAction=(empty string)`| (initial, warning)| `"http://localhost:3000/"` |
+| `formAction=(array with string)`| (changed, warning)| `"https://reactjs.com/"` |
+| `formAction=(empty array)`| (initial, warning)| `"http://localhost:3000/"` |
+| `formAction=(object)`| (changed, warning)| `"http://localhost:3000/result%20of%20toString()"` |
+| `formAction=(numeric string)`| (changed, warning)| `"http://localhost:3000/42"` |
+| `formAction=(-1)`| (changed, warning)| `"http://localhost:3000/-1"` |
+| `formAction=(0)`| (changed, warning)| `"http://localhost:3000/0"` |
+| `formAction=(integer)`| (changed, warning)| `"http://localhost:3000/1"` |
+| `formAction=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
+| `formAction=(float)`| (changed, warning)| `"http://localhost:3000/99.99"` |
+| `formAction=(true)`| (initial, warning)| `"http://localhost:3000/"` |
+| `formAction=(false)`| (initial, warning)| `"http://localhost:3000/"` |
+| `formAction=(string 'true')`| (changed, warning)| `"http://localhost:3000/true"` |
+| `formAction=(string 'false')`| (changed, warning)| `"http://localhost:3000/false"` |
+| `formAction=(string 'on')`| (changed, warning)| `"http://localhost:3000/on"` |
+| `formAction=(string 'off')`| (changed, warning)| `"http://localhost:3000/off"` |
+| `formAction=(symbol)`| (initial, warning)| `"http://localhost:3000/"` |
+| `formAction=(function)`| (changed, warning, ssr error, ssr mismatch)| `"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"` |
+| `formAction=(null)`| (initial)| `"http://localhost:3000/"` |
+| `formAction=(undefined)`| (initial)| `"http://localhost:3000/"` |
+
+## `format` (on `<altGlyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `format=(string)`| (changed)| `"a string"` |
+| `format=(empty string)`| (changed)| `<empty string>` |
+| `format=(array with string)`| (changed)| `"string"` |
+| `format=(empty array)`| (changed)| `<empty string>` |
+| `format=(object)`| (changed)| `"result of toString()"` |
+| `format=(numeric string)`| (changed)| `"42"` |
+| `format=(-1)`| (changed)| `"-1"` |
+| `format=(0)`| (changed)| `"0"` |
+| `format=(integer)`| (changed)| `"1"` |
+| `format=(NaN)`| (changed, warning)| `"NaN"` |
+| `format=(float)`| (changed)| `"99.99"` |
+| `format=(true)`| (initial, warning)| `<null>` |
+| `format=(false)`| (initial, warning)| `<null>` |
+| `format=(string 'true')`| (changed)| `"true"` |
+| `format=(string 'false')`| (changed)| `"false"` |
+| `format=(string 'on')`| (changed)| `"on"` |
+| `format=(string 'off')`| (changed)| `"off"` |
+| `format=(symbol)`| (initial, warning)| `<null>` |
+| `format=(function)`| (initial, warning)| `<null>` |
+| `format=(null)`| (initial)| `<null>` |
+| `format=(undefined)`| (initial)| `<null>` |
+
+## `formEncType` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `formEncType=(string)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(empty string)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(array with string)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(empty array)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(object)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(numeric string)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(-1)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(0)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(integer)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(NaN)`| (changed, warning)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(float)`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(true)`| (initial, warning)| `<empty string>` |
+| `formEncType=(false)`| (initial, warning)| `<empty string>` |
+| `formEncType=(string 'true')`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(string 'false')`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(string 'on')`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(string 'off')`| (changed)| `"application/x-www-form-urlencoded"` |
+| `formEncType=(symbol)`| (initial, warning)| `<empty string>` |
+| `formEncType=(function)`| (initial, warning)| `<empty string>` |
+| `formEncType=(null)`| (initial)| `<empty string>` |
+| `formEncType=(undefined)`| (initial)| `<empty string>` |
+
+## `formMethod` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `formMethod=(string)`| (changed)| `"post"` |
+| `formMethod=(empty string)`| (changed)| `"get"` |
+| `formMethod=(array with string)`| (changed)| `"post"` |
+| `formMethod=(empty array)`| (changed)| `"get"` |
+| `formMethod=(object)`| (changed)| `"get"` |
+| `formMethod=(numeric string)`| (changed)| `"get"` |
+| `formMethod=(-1)`| (changed)| `"get"` |
+| `formMethod=(0)`| (changed)| `"get"` |
+| `formMethod=(integer)`| (changed)| `"get"` |
+| `formMethod=(NaN)`| (changed, warning)| `"get"` |
+| `formMethod=(float)`| (changed)| `"get"` |
+| `formMethod=(true)`| (initial, warning)| `<empty string>` |
+| `formMethod=(false)`| (initial, warning)| `<empty string>` |
+| `formMethod=(string 'true')`| (changed)| `"get"` |
+| `formMethod=(string 'false')`| (changed)| `"get"` |
+| `formMethod=(string 'on')`| (changed)| `"get"` |
+| `formMethod=(string 'off')`| (changed)| `"get"` |
+| `formMethod=(symbol)`| (initial, warning)| `<empty string>` |
+| `formMethod=(function)`| (initial, warning)| `<empty string>` |
+| `formMethod=(null)`| (initial)| `<empty string>` |
+| `formMethod=(undefined)`| (initial)| `<empty string>` |
+
+## `formNoValidate` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `formNoValidate=(string)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(empty string)`| (initial)| `<boolean: false>` |
+| `formNoValidate=(array with string)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(empty array)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(object)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(numeric string)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(-1)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(0)`| (initial)| `<boolean: false>` |
+| `formNoValidate=(integer)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `formNoValidate=(float)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(true)`| (changed)| `<boolean: true>` |
+| `formNoValidate=(false)`| (initial)| `<boolean: false>` |
+| `formNoValidate=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `formNoValidate=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `formNoValidate=(string 'on')`| (changed)| `<boolean: true>` |
+| `formNoValidate=(string 'off')`| (changed)| `<boolean: true>` |
+| `formNoValidate=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `formNoValidate=(function)`| (initial, warning)| `<boolean: false>` |
+| `formNoValidate=(null)`| (initial)| `<boolean: false>` |
+| `formNoValidate=(undefined)`| (initial)| `<boolean: false>` |
+
+## `formTarget` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `formTarget=(string)`| (changed)| `"a string"` |
+| `formTarget=(empty string)`| (initial)| `<empty string>` |
+| `formTarget=(array with string)`| (changed)| `"string"` |
+| `formTarget=(empty array)`| (initial)| `<empty string>` |
+| `formTarget=(object)`| (changed)| `"result of toString()"` |
+| `formTarget=(numeric string)`| (changed)| `"42"` |
+| `formTarget=(-1)`| (changed)| `"-1"` |
+| `formTarget=(0)`| (changed)| `"0"` |
+| `formTarget=(integer)`| (changed)| `"1"` |
+| `formTarget=(NaN)`| (changed, warning)| `"NaN"` |
+| `formTarget=(float)`| (changed)| `"99.99"` |
+| `formTarget=(true)`| (initial, warning)| `<empty string>` |
+| `formTarget=(false)`| (initial, warning)| `<empty string>` |
+| `formTarget=(string 'true')`| (changed)| `"true"` |
+| `formTarget=(string 'false')`| (changed)| `"false"` |
+| `formTarget=(string 'on')`| (changed)| `"on"` |
+| `formTarget=(string 'off')`| (changed)| `"off"` |
+| `formTarget=(symbol)`| (initial, warning)| `<empty string>` |
+| `formTarget=(function)`| (initial, warning)| `<empty string>` |
+| `formTarget=(null)`| (initial)| `<empty string>` |
+| `formTarget=(undefined)`| (initial)| `<empty string>` |
+
+## `frameBorder` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `frameBorder=(string)`| (changed)| `"a string"` |
+| `frameBorder=(empty string)`| (initial)| `<empty string>` |
+| `frameBorder=(array with string)`| (changed)| `"string"` |
+| `frameBorder=(empty array)`| (initial)| `<empty string>` |
+| `frameBorder=(object)`| (changed)| `"result of toString()"` |
+| `frameBorder=(numeric string)`| (changed)| `"42"` |
+| `frameBorder=(-1)`| (changed)| `"-1"` |
+| `frameBorder=(0)`| (changed)| `"0"` |
+| `frameBorder=(integer)`| (changed)| `"1"` |
+| `frameBorder=(NaN)`| (changed, warning)| `"NaN"` |
+| `frameBorder=(float)`| (changed)| `"99.99"` |
+| `frameBorder=(true)`| (initial, warning)| `<empty string>` |
+| `frameBorder=(false)`| (initial, warning)| `<empty string>` |
+| `frameBorder=(string 'true')`| (changed)| `"true"` |
+| `frameBorder=(string 'false')`| (changed)| `"false"` |
+| `frameBorder=(string 'on')`| (changed)| `"on"` |
+| `frameBorder=(string 'off')`| (changed)| `"off"` |
+| `frameBorder=(symbol)`| (initial, warning)| `<empty string>` |
+| `frameBorder=(function)`| (initial, warning)| `<empty string>` |
+| `frameBorder=(null)`| (initial)| `<empty string>` |
+| `frameBorder=(undefined)`| (initial)| `<empty string>` |
+
+## `from` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `from=(string)`| (changed)| `"a string"` |
+| `from=(empty string)`| (changed)| `<empty string>` |
+| `from=(array with string)`| (changed)| `"string"` |
+| `from=(empty array)`| (changed)| `<empty string>` |
+| `from=(object)`| (changed)| `"result of toString()"` |
+| `from=(numeric string)`| (changed)| `"42"` |
+| `from=(-1)`| (changed)| `"-1"` |
+| `from=(0)`| (changed)| `"0"` |
+| `from=(integer)`| (changed)| `"1"` |
+| `from=(NaN)`| (changed, warning)| `"NaN"` |
+| `from=(float)`| (changed)| `"99.99"` |
+| `from=(true)`| (initial, warning)| `<null>` |
+| `from=(false)`| (initial, warning)| `<null>` |
+| `from=(string 'true')`| (changed)| `"true"` |
+| `from=(string 'false')`| (changed)| `"false"` |
+| `from=(string 'on')`| (changed)| `"on"` |
+| `from=(string 'off')`| (changed)| `"off"` |
+| `from=(symbol)`| (initial, warning)| `<null>` |
+| `from=(function)`| (initial, warning)| `<null>` |
+| `from=(null)`| (initial)| `<null>` |
+| `from=(undefined)`| (initial)| `<null>` |
+
+## `fx` (on `<radialGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fx=(string)`| (changed)| `<SVGLength: 10px>` |
+| `fx=(empty string)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(array with string)`| (changed)| `<SVGLength: 10px>` |
+| `fx=(empty array)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(object)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `fx=(-1)`| (changed)| `<SVGLength: -1>` |
+| `fx=(0)`| (changed)| `<SVGLength: 0>` |
+| `fx=(integer)`| (changed)| `<SVGLength: 1>` |
+| `fx=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `fx=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(string 'true')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(string 'false')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(string 'on')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(string 'off')`| (initial)| `<SVGLength: 50%>` |
+| `fx=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fx=(null)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(undefined)`| (initial)| `<SVGLength: 50%>` |
+
+## `fX` (on `<radialGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fX=(string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(empty string)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(empty array)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(object)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(0)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fX=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'true')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'false')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'on')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(string 'off')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(null)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fX=(undefined)`| (initial, warning)| `<SVGLength: 50%>` |
+
+## `fY` (on `<radialGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fY=(string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(empty string)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(empty array)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(object)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(0)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 50%>` |
+| `fY=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'true')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'false')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'on')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(string 'off')`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(null)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fY=(undefined)`| (initial, warning)| `<SVGLength: 50%>` |
+
+## `fy` (on `<radialGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `fy=(string)`| (changed)| `<SVGLength: 20em>` |
+| `fy=(empty string)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(array with string)`| (changed)| `<SVGLength: 20em>` |
+| `fy=(empty array)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(object)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `fy=(-1)`| (changed)| `<SVGLength: -1>` |
+| `fy=(0)`| (changed)| `<SVGLength: 0>` |
+| `fy=(integer)`| (changed)| `<SVGLength: 1>` |
+| `fy=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `fy=(true)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(false)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(string 'true')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(string 'false')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(string 'on')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(string 'off')`| (initial)| `<SVGLength: 50%>` |
+| `fy=(symbol)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(function)`| (initial, warning)| `<SVGLength: 50%>` |
+| `fy=(null)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(undefined)`| (initial)| `<SVGLength: 50%>` |
+
+## `G1` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `G1=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(float)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(true)`| (initial, warning)| `<null>` |
+| `G1=(false)`| (initial, warning)| `<null>` |
+| `G1=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G1=(symbol)`| (initial, warning)| `<null>` |
+| `G1=(function)`| (initial, warning)| `<null>` |
+| `G1=(null)`| (initial, warning)| `<null>` |
+| `G1=(undefined)`| (initial, warning)| `<null>` |
+
+## `g1` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `g1=(string)`| (changed)| `"a string"` |
+| `g1=(empty string)`| (changed)| `<empty string>` |
+| `g1=(array with string)`| (changed)| `"string"` |
+| `g1=(empty array)`| (changed)| `<empty string>` |
+| `g1=(object)`| (changed)| `"result of toString()"` |
+| `g1=(numeric string)`| (changed)| `"42"` |
+| `g1=(-1)`| (changed)| `"-1"` |
+| `g1=(0)`| (changed)| `"0"` |
+| `g1=(integer)`| (changed)| `"1"` |
+| `g1=(NaN)`| (changed, warning)| `"NaN"` |
+| `g1=(float)`| (changed)| `"99.99"` |
+| `g1=(true)`| (initial, warning)| `<null>` |
+| `g1=(false)`| (initial, warning)| `<null>` |
+| `g1=(string 'true')`| (changed)| `"true"` |
+| `g1=(string 'false')`| (changed)| `"false"` |
+| `g1=(string 'on')`| (changed)| `"on"` |
+| `g1=(string 'off')`| (changed)| `"off"` |
+| `g1=(symbol)`| (initial, warning)| `<null>` |
+| `g1=(function)`| (initial, warning)| `<null>` |
+| `g1=(null)`| (initial)| `<null>` |
+| `g1=(undefined)`| (initial)| `<null>` |
+
+## `G2` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `G2=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(float)`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(true)`| (initial, warning)| `<null>` |
+| `G2=(false)`| (initial, warning)| `<null>` |
+| `G2=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
+| `G2=(symbol)`| (initial, warning)| `<null>` |
+| `G2=(function)`| (initial, warning)| `<null>` |
+| `G2=(null)`| (initial, warning)| `<null>` |
+| `G2=(undefined)`| (initial, warning)| `<null>` |
+
+## `g2` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `g2=(string)`| (changed)| `"a string"` |
+| `g2=(empty string)`| (changed)| `<empty string>` |
+| `g2=(array with string)`| (changed)| `"string"` |
+| `g2=(empty array)`| (changed)| `<empty string>` |
+| `g2=(object)`| (changed)| `"result of toString()"` |
+| `g2=(numeric string)`| (changed)| `"42"` |
+| `g2=(-1)`| (changed)| `"-1"` |
+| `g2=(0)`| (changed)| `"0"` |
+| `g2=(integer)`| (changed)| `"1"` |
+| `g2=(NaN)`| (changed, warning)| `"NaN"` |
+| `g2=(float)`| (changed)| `"99.99"` |
+| `g2=(true)`| (initial, warning)| `<null>` |
+| `g2=(false)`| (initial, warning)| `<null>` |
+| `g2=(string 'true')`| (changed)| `"true"` |
+| `g2=(string 'false')`| (changed)| `"false"` |
+| `g2=(string 'on')`| (changed)| `"on"` |
+| `g2=(string 'off')`| (changed)| `"off"` |
+| `g2=(symbol)`| (initial, warning)| `<null>` |
+| `g2=(function)`| (initial, warning)| `<null>` |
+| `g2=(null)`| (initial)| `<null>` |
+| `g2=(undefined)`| (initial)| `<null>` |
+
+## `glyph-name` (on `<glyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyph-name=(string)`| (changed, warning)| `"a string"` |
+| `glyph-name=(empty string)`| (changed, warning)| `<empty string>` |
+| `glyph-name=(array with string)`| (changed, warning)| `"string"` |
+| `glyph-name=(empty array)`| (changed, warning)| `<empty string>` |
+| `glyph-name=(object)`| (changed, warning)| `"result of toString()"` |
+| `glyph-name=(numeric string)`| (changed, warning)| `"42"` |
+| `glyph-name=(-1)`| (changed, warning)| `"-1"` |
+| `glyph-name=(0)`| (changed, warning)| `"0"` |
+| `glyph-name=(integer)`| (changed, warning)| `"1"` |
+| `glyph-name=(NaN)`| (changed, warning)| `"NaN"` |
+| `glyph-name=(float)`| (changed, warning)| `"99.99"` |
+| `glyph-name=(true)`| (initial, warning)| `<null>` |
+| `glyph-name=(false)`| (initial, warning)| `<null>` |
+| `glyph-name=(string 'true')`| (changed, warning)| `"true"` |
+| `glyph-name=(string 'false')`| (changed, warning)| `"false"` |
+| `glyph-name=(string 'on')`| (changed, warning)| `"on"` |
+| `glyph-name=(string 'off')`| (changed, warning)| `"off"` |
+| `glyph-name=(symbol)`| (initial, warning)| `<null>` |
+| `glyph-name=(function)`| (initial, warning)| `<null>` |
+| `glyph-name=(null)`| (initial, warning)| `<null>` |
+| `glyph-name=(undefined)`| (initial, warning)| `<null>` |
+
+## `glyph-orientation-horizontal` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyph-orientation-horizontal=(string)`| (changed, warning)| `"a string"` |
+| `glyph-orientation-horizontal=(empty string)`| (changed, warning)| `<empty string>` |
+| `glyph-orientation-horizontal=(array with string)`| (changed, warning)| `"string"` |
+| `glyph-orientation-horizontal=(empty array)`| (changed, warning)| `<empty string>` |
+| `glyph-orientation-horizontal=(object)`| (changed, warning)| `"result of toString()"` |
+| `glyph-orientation-horizontal=(numeric string)`| (changed, warning)| `"42"` |
+| `glyph-orientation-horizontal=(-1)`| (changed, warning)| `"-1"` |
+| `glyph-orientation-horizontal=(0)`| (changed, warning)| `"0"` |
+| `glyph-orientation-horizontal=(integer)`| (changed, warning)| `"1"` |
+| `glyph-orientation-horizontal=(NaN)`| (changed, warning)| `"NaN"` |
+| `glyph-orientation-horizontal=(float)`| (changed, warning)| `"99.99"` |
+| `glyph-orientation-horizontal=(true)`| (initial, warning)| `<null>` |
+| `glyph-orientation-horizontal=(false)`| (initial, warning)| `<null>` |
+| `glyph-orientation-horizontal=(string 'true')`| (changed, warning)| `"true"` |
+| `glyph-orientation-horizontal=(string 'false')`| (changed, warning)| `"false"` |
+| `glyph-orientation-horizontal=(string 'on')`| (changed, warning)| `"on"` |
+| `glyph-orientation-horizontal=(string 'off')`| (changed, warning)| `"off"` |
+| `glyph-orientation-horizontal=(symbol)`| (initial, warning)| `<null>` |
+| `glyph-orientation-horizontal=(function)`| (initial, warning)| `<null>` |
+| `glyph-orientation-horizontal=(null)`| (initial, warning)| `<null>` |
+| `glyph-orientation-horizontal=(undefined)`| (initial, warning)| `<null>` |
+
+## `glyph-orientation-vertical` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyph-orientation-vertical=(string)`| (changed, warning)| `"a string"` |
+| `glyph-orientation-vertical=(empty string)`| (changed, warning)| `<empty string>` |
+| `glyph-orientation-vertical=(array with string)`| (changed, warning)| `"string"` |
+| `glyph-orientation-vertical=(empty array)`| (changed, warning)| `<empty string>` |
+| `glyph-orientation-vertical=(object)`| (changed, warning)| `"result of toString()"` |
+| `glyph-orientation-vertical=(numeric string)`| (changed, warning)| `"42"` |
+| `glyph-orientation-vertical=(-1)`| (changed, warning)| `"-1"` |
+| `glyph-orientation-vertical=(0)`| (changed, warning)| `"0"` |
+| `glyph-orientation-vertical=(integer)`| (changed, warning)| `"1"` |
+| `glyph-orientation-vertical=(NaN)`| (changed, warning)| `"NaN"` |
+| `glyph-orientation-vertical=(float)`| (changed, warning)| `"99.99"` |
+| `glyph-orientation-vertical=(true)`| (initial, warning)| `<null>` |
+| `glyph-orientation-vertical=(false)`| (initial, warning)| `<null>` |
+| `glyph-orientation-vertical=(string 'true')`| (changed, warning)| `"true"` |
+| `glyph-orientation-vertical=(string 'false')`| (changed, warning)| `"false"` |
+| `glyph-orientation-vertical=(string 'on')`| (changed, warning)| `"on"` |
+| `glyph-orientation-vertical=(string 'off')`| (changed, warning)| `"off"` |
+| `glyph-orientation-vertical=(symbol)`| (initial, warning)| `<null>` |
+| `glyph-orientation-vertical=(function)`| (initial, warning)| `<null>` |
+| `glyph-orientation-vertical=(null)`| (initial, warning)| `<null>` |
+| `glyph-orientation-vertical=(undefined)`| (initial, warning)| `<null>` |
+
+## `glyphName` (on `<glyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyphName=(string)`| (changed)| `"a string"` |
+| `glyphName=(empty string)`| (changed)| `<empty string>` |
+| `glyphName=(array with string)`| (changed)| `"string"` |
+| `glyphName=(empty array)`| (changed)| `<empty string>` |
+| `glyphName=(object)`| (changed)| `"result of toString()"` |
+| `glyphName=(numeric string)`| (changed)| `"42"` |
+| `glyphName=(-1)`| (changed)| `"-1"` |
+| `glyphName=(0)`| (changed)| `"0"` |
+| `glyphName=(integer)`| (changed)| `"1"` |
+| `glyphName=(NaN)`| (changed, warning)| `"NaN"` |
+| `glyphName=(float)`| (changed)| `"99.99"` |
+| `glyphName=(true)`| (initial, warning)| `<null>` |
+| `glyphName=(false)`| (initial, warning)| `<null>` |
+| `glyphName=(string 'true')`| (changed)| `"true"` |
+| `glyphName=(string 'false')`| (changed)| `"false"` |
+| `glyphName=(string 'on')`| (changed)| `"on"` |
+| `glyphName=(string 'off')`| (changed)| `"off"` |
+| `glyphName=(symbol)`| (initial, warning)| `<null>` |
+| `glyphName=(function)`| (initial, warning)| `<null>` |
+| `glyphName=(null)`| (initial)| `<null>` |
+| `glyphName=(undefined)`| (initial)| `<null>` |
+
+## `glyphOrientationHorizontal` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyphOrientationHorizontal=(string)`| (changed)| `"a string"` |
+| `glyphOrientationHorizontal=(empty string)`| (changed)| `<empty string>` |
+| `glyphOrientationHorizontal=(array with string)`| (changed)| `"string"` |
+| `glyphOrientationHorizontal=(empty array)`| (changed)| `<empty string>` |
+| `glyphOrientationHorizontal=(object)`| (changed)| `"result of toString()"` |
+| `glyphOrientationHorizontal=(numeric string)`| (changed)| `"42"` |
+| `glyphOrientationHorizontal=(-1)`| (changed)| `"-1"` |
+| `glyphOrientationHorizontal=(0)`| (changed)| `"0"` |
+| `glyphOrientationHorizontal=(integer)`| (changed)| `"1"` |
+| `glyphOrientationHorizontal=(NaN)`| (changed, warning)| `"NaN"` |
+| `glyphOrientationHorizontal=(float)`| (changed)| `"99.99"` |
+| `glyphOrientationHorizontal=(true)`| (initial, warning)| `<null>` |
+| `glyphOrientationHorizontal=(false)`| (initial, warning)| `<null>` |
+| `glyphOrientationHorizontal=(string 'true')`| (changed)| `"true"` |
+| `glyphOrientationHorizontal=(string 'false')`| (changed)| `"false"` |
+| `glyphOrientationHorizontal=(string 'on')`| (changed)| `"on"` |
+| `glyphOrientationHorizontal=(string 'off')`| (changed)| `"off"` |
+| `glyphOrientationHorizontal=(symbol)`| (initial, warning)| `<null>` |
+| `glyphOrientationHorizontal=(function)`| (initial, warning)| `<null>` |
+| `glyphOrientationHorizontal=(null)`| (initial)| `<null>` |
+| `glyphOrientationHorizontal=(undefined)`| (initial)| `<null>` |
+
+## `glyphOrientationVertical` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyphOrientationVertical=(string)`| (changed)| `"a string"` |
+| `glyphOrientationVertical=(empty string)`| (changed)| `<empty string>` |
+| `glyphOrientationVertical=(array with string)`| (changed)| `"string"` |
+| `glyphOrientationVertical=(empty array)`| (changed)| `<empty string>` |
+| `glyphOrientationVertical=(object)`| (changed)| `"result of toString()"` |
+| `glyphOrientationVertical=(numeric string)`| (changed)| `"42"` |
+| `glyphOrientationVertical=(-1)`| (changed)| `"-1"` |
+| `glyphOrientationVertical=(0)`| (changed)| `"0"` |
+| `glyphOrientationVertical=(integer)`| (changed)| `"1"` |
+| `glyphOrientationVertical=(NaN)`| (changed, warning)| `"NaN"` |
+| `glyphOrientationVertical=(float)`| (changed)| `"99.99"` |
+| `glyphOrientationVertical=(true)`| (initial, warning)| `<null>` |
+| `glyphOrientationVertical=(false)`| (initial, warning)| `<null>` |
+| `glyphOrientationVertical=(string 'true')`| (changed)| `"true"` |
+| `glyphOrientationVertical=(string 'false')`| (changed)| `"false"` |
+| `glyphOrientationVertical=(string 'on')`| (changed)| `"on"` |
+| `glyphOrientationVertical=(string 'off')`| (changed)| `"off"` |
+| `glyphOrientationVertical=(symbol)`| (initial, warning)| `<null>` |
+| `glyphOrientationVertical=(function)`| (initial, warning)| `<null>` |
+| `glyphOrientationVertical=(null)`| (initial)| `<null>` |
+| `glyphOrientationVertical=(undefined)`| (initial)| `<null>` |
+
+## `glyphRef` (on `<altGlyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `glyphRef=(string)`| (initial)| `<null>` |
+| `glyphRef=(empty string)`| (initial)| `<null>` |
+| `glyphRef=(array with string)`| (initial)| `<null>` |
+| `glyphRef=(empty array)`| (initial)| `<null>` |
+| `glyphRef=(object)`| (initial)| `<null>` |
+| `glyphRef=(numeric string)`| (initial)| `<null>` |
+| `glyphRef=(-1)`| (initial)| `<null>` |
+| `glyphRef=(0)`| (initial)| `<null>` |
+| `glyphRef=(integer)`| (initial)| `<null>` |
+| `glyphRef=(NaN)`| (initial, warning)| `<null>` |
+| `glyphRef=(float)`| (initial)| `<null>` |
+| `glyphRef=(true)`| (initial, warning)| `<null>` |
+| `glyphRef=(false)`| (initial, warning)| `<null>` |
+| `glyphRef=(string 'true')`| (initial)| `<null>` |
+| `glyphRef=(string 'false')`| (initial)| `<null>` |
+| `glyphRef=(string 'on')`| (initial)| `<null>` |
+| `glyphRef=(string 'off')`| (initial)| `<null>` |
+| `glyphRef=(symbol)`| (initial, warning)| `<null>` |
+| `glyphRef=(function)`| (initial, warning)| `<null>` |
+| `glyphRef=(null)`| (initial)| `<null>` |
+| `glyphRef=(undefined)`| (initial)| `<null>` |
+
+## `gradientTransform` (on `<linearGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `gradientTransform=(string)`| (changed)| `[<SVGMatrix 1 0 0 1 -10 -20>/2/0, <SVGMatrix 2 0 0 2 0 0>/3/0, <SVGMatrix 0.7071067811865476 0.7071067811865475 -0.7071067811865475 0.7071067811865476 0 0>/4/45, <SVGMatrix 1 0 0 1 5 10>/2/0]` |
+| `gradientTransform=(empty string)`| (initial)| `[]` |
+| `gradientTransform=(array with string)`| (changed)| `[<SVGMatrix 1 0 0 1 -10 -20>/2/0, <SVGMatrix 2 0 0 2 0 0>/3/0, <SVGMatrix 0.7071067811865476 0.7071067811865475 -0.7071067811865475 0.7071067811865476 0 0>/4/45, <SVGMatrix 1 0 0 1 5 10>/2/0]` |
+| `gradientTransform=(empty array)`| (initial)| `[]` |
+| `gradientTransform=(object)`| (initial)| `[]` |
+| `gradientTransform=(numeric string)`| (initial)| `[]` |
+| `gradientTransform=(-1)`| (initial)| `[]` |
+| `gradientTransform=(0)`| (initial)| `[]` |
+| `gradientTransform=(integer)`| (initial)| `[]` |
+| `gradientTransform=(NaN)`| (initial, warning)| `[]` |
+| `gradientTransform=(float)`| (initial)| `[]` |
+| `gradientTransform=(true)`| (initial, warning)| `[]` |
+| `gradientTransform=(false)`| (initial, warning)| `[]` |
+| `gradientTransform=(string 'true')`| (initial)| `[]` |
+| `gradientTransform=(string 'false')`| (initial)| `[]` |
+| `gradientTransform=(string 'on')`| (initial)| `[]` |
+| `gradientTransform=(string 'off')`| (initial)| `[]` |
+| `gradientTransform=(symbol)`| (initial, warning)| `[]` |
+| `gradientTransform=(function)`| (initial, warning)| `[]` |
+| `gradientTransform=(null)`| (initial)| `[]` |
+| `gradientTransform=(undefined)`| (initial)| `[]` |
+
+## `gradientUnits` (on `<linearGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `gradientUnits=(string)`| (changed)| `<number: 1>` |
+| `gradientUnits=(empty string)`| (initial)| `<number: 2>` |
+| `gradientUnits=(array with string)`| (changed)| `<number: 1>` |
+| `gradientUnits=(empty array)`| (initial)| `<number: 2>` |
+| `gradientUnits=(object)`| (initial)| `<number: 2>` |
+| `gradientUnits=(numeric string)`| (initial)| `<number: 2>` |
+| `gradientUnits=(-1)`| (initial)| `<number: 2>` |
+| `gradientUnits=(0)`| (initial)| `<number: 2>` |
+| `gradientUnits=(integer)`| (initial)| `<number: 2>` |
+| `gradientUnits=(NaN)`| (initial, warning)| `<number: 2>` |
+| `gradientUnits=(float)`| (initial)| `<number: 2>` |
+| `gradientUnits=(true)`| (initial, warning)| `<number: 2>` |
+| `gradientUnits=(false)`| (initial, warning)| `<number: 2>` |
+| `gradientUnits=(string 'true')`| (initial)| `<number: 2>` |
+| `gradientUnits=(string 'false')`| (initial)| `<number: 2>` |
+| `gradientUnits=(string 'on')`| (initial)| `<number: 2>` |
+| `gradientUnits=(string 'off')`| (initial)| `<number: 2>` |
+| `gradientUnits=(symbol)`| (initial, warning)| `<number: 2>` |
+| `gradientUnits=(function)`| (initial, warning)| `<number: 2>` |
+| `gradientUnits=(null)`| (initial)| `<number: 2>` |
+| `gradientUnits=(undefined)`| (initial)| `<number: 2>` |
+
+## `hanging` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `hanging=(string)`| (changed)| `"a string"` |
+| `hanging=(empty string)`| (changed)| `<empty string>` |
+| `hanging=(array with string)`| (changed)| `"string"` |
+| `hanging=(empty array)`| (changed)| `<empty string>` |
+| `hanging=(object)`| (changed)| `"result of toString()"` |
+| `hanging=(numeric string)`| (changed)| `"42"` |
+| `hanging=(-1)`| (changed)| `"-1"` |
+| `hanging=(0)`| (changed)| `"0"` |
+| `hanging=(integer)`| (changed)| `"1"` |
+| `hanging=(NaN)`| (changed, warning)| `"NaN"` |
+| `hanging=(float)`| (changed)| `"99.99"` |
+| `hanging=(true)`| (initial, warning)| `<null>` |
+| `hanging=(false)`| (initial, warning)| `<null>` |
+| `hanging=(string 'true')`| (changed)| `"true"` |
+| `hanging=(string 'false')`| (changed)| `"false"` |
+| `hanging=(string 'on')`| (changed)| `"on"` |
+| `hanging=(string 'off')`| (changed)| `"off"` |
+| `hanging=(symbol)`| (initial, warning)| `<null>` |
+| `hanging=(function)`| (initial, warning)| `<null>` |
+| `hanging=(null)`| (initial)| `<null>` |
+| `hanging=(undefined)`| (initial)| `<null>` |
+
+## `headers` (on `<td>` inside `<tr>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `headers=(string)`| (changed, ssr error, ssr mismatch)| `"a string"` |
+| `headers=(empty string)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(array with string)`| (changed, ssr error, ssr mismatch)| `"string"` |
+| `headers=(empty array)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
+| `headers=(numeric string)`| (changed, ssr error, ssr mismatch)| `"42"` |
+| `headers=(-1)`| (changed, ssr error, ssr mismatch)| `"-1"` |
+| `headers=(0)`| (changed, ssr error, ssr mismatch)| `"0"` |
+| `headers=(integer)`| (changed, ssr error, ssr mismatch)| `"1"` |
+| `headers=(NaN)`| (changed, warning, ssr error, ssr mismatch)| `"NaN"` |
+| `headers=(float)`| (changed, ssr error, ssr mismatch)| `"99.99"` |
+| `headers=(true)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(false)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(string 'true')`| (changed, ssr error, ssr mismatch)| `"true"` |
+| `headers=(string 'false')`| (changed, ssr error, ssr mismatch)| `"false"` |
+| `headers=(string 'on')`| (changed, ssr error, ssr mismatch)| `"on"` |
+| `headers=(string 'off')`| (changed, ssr error, ssr mismatch)| `"off"` |
+| `headers=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(function)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(null)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `headers=(undefined)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+
+## `height` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `height=(string)`| (initial)| `<number: 0>` |
+| `height=(empty string)`| (initial)| `<number: 0>` |
+| `height=(array with string)`| (initial)| `<number: 0>` |
+| `height=(empty array)`| (initial)| `<number: 0>` |
+| `height=(object)`| (initial)| `<number: 0>` |
+| `height=(numeric string)`| (changed)| `<number: 42>` |
+| `height=(-1)`| (initial)| `<number: 0>` |
+| `height=(0)`| (initial)| `<number: 0>` |
+| `height=(integer)`| (changed)| `<number: 1>` |
+| `height=(NaN)`| (initial, warning)| `<number: 0>` |
+| `height=(float)`| (changed)| `<number: 99>` |
+| `height=(true)`| (initial, warning)| `<number: 0>` |
+| `height=(false)`| (initial, warning)| `<number: 0>` |
+| `height=(string 'true')`| (initial)| `<number: 0>` |
+| `height=(string 'false')`| (initial)| `<number: 0>` |
+| `height=(string 'on')`| (initial)| `<number: 0>` |
+| `height=(string 'off')`| (initial)| `<number: 0>` |
+| `height=(symbol)`| (initial, warning)| `<number: 0>` |
+| `height=(function)`| (initial, warning)| `<number: 0>` |
+| `height=(null)`| (initial)| `<number: 0>` |
+| `height=(undefined)`| (initial)| `<number: 0>` |
+
+## `height` (on `<rect>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `height=(string)`| (changed)| `<SVGLength: 100%>` |
+| `height=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `height=(array with string)`| (changed)| `<SVGLength: 100%>` |
+| `height=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `height=(object)`| (initial)| `<SVGLength: 0>` |
+| `height=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `height=(-1)`| (changed)| `<SVGLength: -1>` |
+| `height=(0)`| (initial)| `<SVGLength: 0>` |
+| `height=(integer)`| (changed)| `<SVGLength: 1>` |
+| `height=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `height=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `height=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `height=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `height=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `height=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `height=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `height=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `height=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `height=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `height=(null)`| (initial)| `<SVGLength: 0>` |
+| `height=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `hidden` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `hidden=(string)`| (changed)| `<boolean: true>` |
+| `hidden=(empty string)`| (initial)| `<boolean: false>` |
+| `hidden=(array with string)`| (changed)| `<boolean: true>` |
+| `hidden=(empty array)`| (changed)| `<boolean: true>` |
+| `hidden=(object)`| (changed)| `<boolean: true>` |
+| `hidden=(numeric string)`| (changed)| `<boolean: true>` |
+| `hidden=(-1)`| (changed)| `<boolean: true>` |
+| `hidden=(0)`| (initial)| `<boolean: false>` |
+| `hidden=(integer)`| (changed)| `<boolean: true>` |
+| `hidden=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `hidden=(float)`| (changed)| `<boolean: true>` |
+| `hidden=(true)`| (changed)| `<boolean: true>` |
+| `hidden=(false)`| (initial)| `<boolean: false>` |
+| `hidden=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `hidden=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `hidden=(string 'on')`| (changed)| `<boolean: true>` |
+| `hidden=(string 'off')`| (changed)| `<boolean: true>` |
+| `hidden=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `hidden=(function)`| (initial, warning)| `<boolean: false>` |
+| `hidden=(null)`| (initial)| `<boolean: false>` |
+| `hidden=(undefined)`| (initial)| `<boolean: false>` |
+
+## `high` (on `<meter>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `high=(string)`| (initial)| `<number: 1>` |
+| `high=(empty string)`| (initial)| `<number: 1>` |
+| `high=(array with string)`| (initial)| `<number: 1>` |
+| `high=(empty array)`| (initial)| `<number: 1>` |
+| `high=(object)`| (initial)| `<number: 1>` |
+| `high=(numeric string)`| (initial)| `<number: 1>` |
+| `high=(-1)`| (changed)| `<number: 0>` |
+| `high=(0)`| (changed)| `<number: 0>` |
+| `high=(integer)`| (initial)| `<number: 1>` |
+| `high=(NaN)`| (initial, warning)| `<number: 1>` |
+| `high=(float)`| (initial)| `<number: 1>` |
+| `high=(true)`| (initial, warning)| `<number: 1>` |
+| `high=(false)`| (initial, warning)| `<number: 1>` |
+| `high=(string 'true')`| (initial)| `<number: 1>` |
+| `high=(string 'false')`| (initial)| `<number: 1>` |
+| `high=(string 'on')`| (initial)| `<number: 1>` |
+| `high=(string 'off')`| (initial)| `<number: 1>` |
+| `high=(symbol)`| (initial, warning)| `<number: 1>` |
+| `high=(function)`| (initial, warning)| `<number: 1>` |
+| `high=(null)`| (initial)| `<number: 1>` |
+| `high=(undefined)`| (initial)| `<number: 1>` |
+
+## `horiz-adv-x` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `horiz-adv-x=(string)`| (changed, warning)| `"a string"` |
+| `horiz-adv-x=(empty string)`| (changed, warning)| `<empty string>` |
+| `horiz-adv-x=(array with string)`| (changed, warning)| `"string"` |
+| `horiz-adv-x=(empty array)`| (changed, warning)| `<empty string>` |
+| `horiz-adv-x=(object)`| (changed, warning)| `"result of toString()"` |
+| `horiz-adv-x=(numeric string)`| (changed, warning)| `"42"` |
+| `horiz-adv-x=(-1)`| (changed, warning)| `"-1"` |
+| `horiz-adv-x=(0)`| (changed, warning)| `"0"` |
+| `horiz-adv-x=(integer)`| (changed, warning)| `"1"` |
+| `horiz-adv-x=(NaN)`| (changed, warning)| `"NaN"` |
+| `horiz-adv-x=(float)`| (changed, warning)| `"99.99"` |
+| `horiz-adv-x=(true)`| (initial, warning)| `<null>` |
+| `horiz-adv-x=(false)`| (initial, warning)| `<null>` |
+| `horiz-adv-x=(string 'true')`| (changed, warning)| `"true"` |
+| `horiz-adv-x=(string 'false')`| (changed, warning)| `"false"` |
+| `horiz-adv-x=(string 'on')`| (changed, warning)| `"on"` |
+| `horiz-adv-x=(string 'off')`| (changed, warning)| `"off"` |
+| `horiz-adv-x=(symbol)`| (initial, warning)| `<null>` |
+| `horiz-adv-x=(function)`| (initial, warning)| `<null>` |
+| `horiz-adv-x=(null)`| (initial, warning)| `<null>` |
+| `horiz-adv-x=(undefined)`| (initial, warning)| `<null>` |
+
+## `horiz-origin-x` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `horiz-origin-x=(string)`| (changed, warning)| `"a string"` |
+| `horiz-origin-x=(empty string)`| (changed, warning)| `<empty string>` |
+| `horiz-origin-x=(array with string)`| (changed, warning)| `"string"` |
+| `horiz-origin-x=(empty array)`| (changed, warning)| `<empty string>` |
+| `horiz-origin-x=(object)`| (changed, warning)| `"result of toString()"` |
+| `horiz-origin-x=(numeric string)`| (changed, warning)| `"42"` |
+| `horiz-origin-x=(-1)`| (changed, warning)| `"-1"` |
+| `horiz-origin-x=(0)`| (changed, warning)| `"0"` |
+| `horiz-origin-x=(integer)`| (changed, warning)| `"1"` |
+| `horiz-origin-x=(NaN)`| (changed, warning)| `"NaN"` |
+| `horiz-origin-x=(float)`| (changed, warning)| `"99.99"` |
+| `horiz-origin-x=(true)`| (initial, warning)| `<null>` |
+| `horiz-origin-x=(false)`| (initial, warning)| `<null>` |
+| `horiz-origin-x=(string 'true')`| (changed, warning)| `"true"` |
+| `horiz-origin-x=(string 'false')`| (changed, warning)| `"false"` |
+| `horiz-origin-x=(string 'on')`| (changed, warning)| `"on"` |
+| `horiz-origin-x=(string 'off')`| (changed, warning)| `"off"` |
+| `horiz-origin-x=(symbol)`| (initial, warning)| `<null>` |
+| `horiz-origin-x=(function)`| (initial, warning)| `<null>` |
+| `horiz-origin-x=(null)`| (initial, warning)| `<null>` |
+| `horiz-origin-x=(undefined)`| (initial, warning)| `<null>` |
+
+## `horizAdvX` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `horizAdvX=(string)`| (changed)| `"a string"` |
+| `horizAdvX=(empty string)`| (changed)| `<empty string>` |
+| `horizAdvX=(array with string)`| (changed)| `"string"` |
+| `horizAdvX=(empty array)`| (changed)| `<empty string>` |
+| `horizAdvX=(object)`| (changed)| `"result of toString()"` |
+| `horizAdvX=(numeric string)`| (changed)| `"42"` |
+| `horizAdvX=(-1)`| (changed)| `"-1"` |
+| `horizAdvX=(0)`| (changed)| `"0"` |
+| `horizAdvX=(integer)`| (changed)| `"1"` |
+| `horizAdvX=(NaN)`| (changed, warning)| `"NaN"` |
+| `horizAdvX=(float)`| (changed)| `"99.99"` |
+| `horizAdvX=(true)`| (initial, warning)| `<null>` |
+| `horizAdvX=(false)`| (initial, warning)| `<null>` |
+| `horizAdvX=(string 'true')`| (changed)| `"true"` |
+| `horizAdvX=(string 'false')`| (changed)| `"false"` |
+| `horizAdvX=(string 'on')`| (changed)| `"on"` |
+| `horizAdvX=(string 'off')`| (changed)| `"off"` |
+| `horizAdvX=(symbol)`| (initial, warning)| `<null>` |
+| `horizAdvX=(function)`| (initial, warning)| `<null>` |
+| `horizAdvX=(null)`| (initial)| `<null>` |
+| `horizAdvX=(undefined)`| (initial)| `<null>` |
+
+## `horizOriginX` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `horizOriginX=(string)`| (changed)| `"a string"` |
+| `horizOriginX=(empty string)`| (changed)| `<empty string>` |
+| `horizOriginX=(array with string)`| (changed)| `"string"` |
+| `horizOriginX=(empty array)`| (changed)| `<empty string>` |
+| `horizOriginX=(object)`| (changed)| `"result of toString()"` |
+| `horizOriginX=(numeric string)`| (changed)| `"42"` |
+| `horizOriginX=(-1)`| (changed)| `"-1"` |
+| `horizOriginX=(0)`| (changed)| `"0"` |
+| `horizOriginX=(integer)`| (changed)| `"1"` |
+| `horizOriginX=(NaN)`| (changed, warning)| `"NaN"` |
+| `horizOriginX=(float)`| (changed)| `"99.99"` |
+| `horizOriginX=(true)`| (initial, warning)| `<null>` |
+| `horizOriginX=(false)`| (initial, warning)| `<null>` |
+| `horizOriginX=(string 'true')`| (changed)| `"true"` |
+| `horizOriginX=(string 'false')`| (changed)| `"false"` |
+| `horizOriginX=(string 'on')`| (changed)| `"on"` |
+| `horizOriginX=(string 'off')`| (changed)| `"off"` |
+| `horizOriginX=(symbol)`| (initial, warning)| `<null>` |
+| `horizOriginX=(function)`| (initial, warning)| `<null>` |
+| `horizOriginX=(null)`| (initial)| `<null>` |
+| `horizOriginX=(undefined)`| (initial)| `<null>` |
+
+## `href` (on `<a>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `href=(string)`| (changed)| `"https://reactjs.com/"` |
+| `href=(empty string)`| (changed)| `"http://localhost:3000/"` |
+| `href=(array with string)`| (changed)| `"https://reactjs.com/"` |
+| `href=(empty array)`| (changed)| `"http://localhost:3000/"` |
+| `href=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
+| `href=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
+| `href=(-1)`| (changed)| `"http://localhost:3000/-1"` |
+| `href=(0)`| (changed)| `"http://localhost:3000/0"` |
+| `href=(integer)`| (changed)| `"http://localhost:3000/1"` |
+| `href=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
+| `href=(float)`| (changed)| `"http://localhost:3000/99.99"` |
+| `href=(true)`| (initial, warning)| `<empty string>` |
+| `href=(false)`| (initial, warning)| `<empty string>` |
+| `href=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
+| `href=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
+| `href=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
+| `href=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
+| `href=(symbol)`| (initial, warning)| `<empty string>` |
+| `href=(function)`| (initial, warning)| `<empty string>` |
+| `href=(null)`| (initial)| `<empty string>` |
+| `href=(undefined)`| (initial)| `<empty string>` |
+
+## `hrefLang` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `hrefLang=(string)`| (changed)| `"a string"` |
+| `hrefLang=(empty string)`| (changed)| `<empty string>` |
+| `hrefLang=(array with string)`| (changed)| `"string"` |
+| `hrefLang=(empty array)`| (changed)| `<empty string>` |
+| `hrefLang=(object)`| (changed)| `"result of toString()"` |
+| `hrefLang=(numeric string)`| (changed)| `"42"` |
+| `hrefLang=(-1)`| (changed)| `"-1"` |
+| `hrefLang=(0)`| (changed)| `"0"` |
+| `hrefLang=(integer)`| (changed)| `"1"` |
+| `hrefLang=(NaN)`| (changed, warning)| `"NaN"` |
+| `hrefLang=(float)`| (changed)| `"99.99"` |
+| `hrefLang=(true)`| (initial, warning)| `<null>` |
+| `hrefLang=(false)`| (initial, warning)| `<null>` |
+| `hrefLang=(string 'true')`| (changed)| `"true"` |
+| `hrefLang=(string 'false')`| (changed)| `"false"` |
+| `hrefLang=(string 'on')`| (changed)| `"on"` |
+| `hrefLang=(string 'off')`| (changed)| `"off"` |
+| `hrefLang=(symbol)`| (initial, warning)| `<null>` |
+| `hrefLang=(function)`| (initial, warning)| `<null>` |
+| `hrefLang=(null)`| (initial)| `<null>` |
+| `hrefLang=(undefined)`| (initial)| `<null>` |
+
+## `htmlFor` (on `<label>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `htmlFor=(string)`| (changed)| `"a string"` |
+| `htmlFor=(empty string)`| (initial)| `<empty string>` |
+| `htmlFor=(array with string)`| (changed)| `"string"` |
+| `htmlFor=(empty array)`| (initial)| `<empty string>` |
+| `htmlFor=(object)`| (changed)| `"result of toString()"` |
+| `htmlFor=(numeric string)`| (changed)| `"42"` |
+| `htmlFor=(-1)`| (changed)| `"-1"` |
+| `htmlFor=(0)`| (changed)| `"0"` |
+| `htmlFor=(integer)`| (changed)| `"1"` |
+| `htmlFor=(NaN)`| (changed, warning)| `"NaN"` |
+| `htmlFor=(float)`| (changed)| `"99.99"` |
+| `htmlFor=(true)`| (initial, warning)| `<empty string>` |
+| `htmlFor=(false)`| (initial, warning)| `<empty string>` |
+| `htmlFor=(string 'true')`| (changed)| `"true"` |
+| `htmlFor=(string 'false')`| (changed)| `"false"` |
+| `htmlFor=(string 'on')`| (changed)| `"on"` |
+| `htmlFor=(string 'off')`| (changed)| `"off"` |
+| `htmlFor=(symbol)`| (initial, warning)| `<empty string>` |
+| `htmlFor=(function)`| (initial, warning)| `<empty string>` |
+| `htmlFor=(null)`| (initial)| `<empty string>` |
+| `htmlFor=(undefined)`| (initial)| `<empty string>` |
+
+## `http-equiv` (on `<meta>` inside `<head>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `http-equiv=(string)`| (changed, warning)| `"a string"` |
+| `http-equiv=(empty string)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(array with string)`| (changed, warning)| `"string"` |
+| `http-equiv=(empty array)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(object)`| (changed, warning)| `"result of toString()"` |
+| `http-equiv=(numeric string)`| (changed, warning)| `"42"` |
+| `http-equiv=(-1)`| (changed, warning)| `"-1"` |
+| `http-equiv=(0)`| (changed, warning)| `"0"` |
+| `http-equiv=(integer)`| (changed, warning)| `"1"` |
+| `http-equiv=(NaN)`| (changed, warning)| `"NaN"` |
+| `http-equiv=(float)`| (changed, warning)| `"99.99"` |
+| `http-equiv=(true)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(false)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(string 'true')`| (changed, warning)| `"true"` |
+| `http-equiv=(string 'false')`| (changed, warning)| `"false"` |
+| `http-equiv=(string 'on')`| (changed, warning)| `"on"` |
+| `http-equiv=(string 'off')`| (changed, warning)| `"off"` |
+| `http-equiv=(symbol)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(function)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(null)`| (initial, warning)| `<empty string>` |
+| `http-equiv=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `httpEquiv` (on `<meta>` inside `<head>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `httpEquiv=(string)`| (changed)| `"a string"` |
+| `httpEquiv=(empty string)`| (initial)| `<empty string>` |
+| `httpEquiv=(array with string)`| (changed)| `"string"` |
+| `httpEquiv=(empty array)`| (initial)| `<empty string>` |
+| `httpEquiv=(object)`| (changed)| `"result of toString()"` |
+| `httpEquiv=(numeric string)`| (changed)| `"42"` |
+| `httpEquiv=(-1)`| (changed)| `"-1"` |
+| `httpEquiv=(0)`| (changed)| `"0"` |
+| `httpEquiv=(integer)`| (changed)| `"1"` |
+| `httpEquiv=(NaN)`| (changed, warning)| `"NaN"` |
+| `httpEquiv=(float)`| (changed)| `"99.99"` |
+| `httpEquiv=(true)`| (initial, warning)| `<empty string>` |
+| `httpEquiv=(false)`| (initial, warning)| `<empty string>` |
+| `httpEquiv=(string 'true')`| (changed)| `"true"` |
+| `httpEquiv=(string 'false')`| (changed)| `"false"` |
+| `httpEquiv=(string 'on')`| (changed)| `"on"` |
+| `httpEquiv=(string 'off')`| (changed)| `"off"` |
+| `httpEquiv=(symbol)`| (initial, warning)| `<empty string>` |
+| `httpEquiv=(function)`| (initial, warning)| `<empty string>` |
+| `httpEquiv=(null)`| (initial)| `<empty string>` |
+| `httpEquiv=(undefined)`| (initial)| `<empty string>` |
+
+## `icon` (on `<command>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `icon=(string)`| (changed, warning, ssr warning)| `"a string"` |
+| `icon=(empty string)`| (changed, warning, ssr warning)| `<empty string>` |
+| `icon=(array with string)`| (changed, warning, ssr warning)| `"string"` |
+| `icon=(empty array)`| (changed, warning, ssr warning)| `<empty string>` |
+| `icon=(object)`| (changed, warning, ssr warning)| `"result of toString()"` |
+| `icon=(numeric string)`| (changed, warning, ssr warning)| `"42"` |
+| `icon=(-1)`| (changed, warning, ssr warning)| `"-1"` |
+| `icon=(0)`| (changed, warning, ssr warning)| `"0"` |
+| `icon=(integer)`| (changed, warning, ssr warning)| `"1"` |
+| `icon=(NaN)`| (changed, warning)| `"NaN"` |
+| `icon=(float)`| (changed, warning, ssr warning)| `"99.99"` |
+| `icon=(true)`| (initial, warning)| `<null>` |
+| `icon=(false)`| (initial, warning)| `<null>` |
+| `icon=(string 'true')`| (changed, warning, ssr warning)| `"true"` |
+| `icon=(string 'false')`| (changed, warning, ssr warning)| `"false"` |
+| `icon=(string 'on')`| (changed, warning, ssr warning)| `"on"` |
+| `icon=(string 'off')`| (changed, warning, ssr warning)| `"off"` |
+| `icon=(symbol)`| (initial, warning)| `<null>` |
+| `icon=(function)`| (initial, warning)| `<null>` |
+| `icon=(null)`| (initial, warning, ssr warning)| `<null>` |
+| `icon=(undefined)`| (initial, warning, ssr warning)| `<null>` |
+
+## `id` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `id=(string)`| (changed)| `"a string"` |
+| `id=(empty string)`| (initial)| `<empty string>` |
+| `id=(array with string)`| (changed)| `"string"` |
+| `id=(empty array)`| (initial)| `<empty string>` |
+| `id=(object)`| (changed)| `"result of toString()"` |
+| `id=(numeric string)`| (changed)| `"42"` |
+| `id=(-1)`| (changed)| `"-1"` |
+| `id=(0)`| (changed)| `"0"` |
+| `id=(integer)`| (changed)| `"1"` |
+| `id=(NaN)`| (changed, warning)| `"NaN"` |
+| `id=(float)`| (changed)| `"99.99"` |
+| `id=(true)`| (initial, warning)| `<empty string>` |
+| `id=(false)`| (initial, warning)| `<empty string>` |
+| `id=(string 'true')`| (changed)| `"true"` |
+| `id=(string 'false')`| (changed)| `"false"` |
+| `id=(string 'on')`| (changed)| `"on"` |
+| `id=(string 'off')`| (changed)| `"off"` |
+| `id=(symbol)`| (initial, warning)| `<empty string>` |
+| `id=(function)`| (initial, warning)| `<empty string>` |
+| `id=(null)`| (initial)| `<empty string>` |
+| `id=(undefined)`| (initial)| `<empty string>` |
+
+## `ID` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `ID=(string)`| (changed, warning)| `"a string"` |
+| `ID=(empty string)`| (initial, warning)| `<empty string>` |
+| `ID=(array with string)`| (changed, warning)| `"string"` |
+| `ID=(empty array)`| (initial, warning)| `<empty string>` |
+| `ID=(object)`| (changed, warning)| `"result of toString()"` |
+| `ID=(numeric string)`| (changed, warning)| `"42"` |
+| `ID=(-1)`| (changed, warning)| `"-1"` |
+| `ID=(0)`| (changed, warning)| `"0"` |
+| `ID=(integer)`| (changed, warning)| `"1"` |
+| `ID=(NaN)`| (changed, warning)| `"NaN"` |
+| `ID=(float)`| (changed, warning)| `"99.99"` |
+| `ID=(true)`| (initial, warning)| `<empty string>` |
+| `ID=(false)`| (initial, warning)| `<empty string>` |
+| `ID=(string 'true')`| (changed, warning)| `"true"` |
+| `ID=(string 'false')`| (changed, warning)| `"false"` |
+| `ID=(string 'on')`| (changed, warning)| `"on"` |
+| `ID=(string 'off')`| (changed, warning)| `"off"` |
+| `ID=(symbol)`| (initial, warning)| `<empty string>` |
+| `ID=(function)`| (initial, warning)| `<empty string>` |
+| `ID=(null)`| (initial, warning)| `<empty string>` |
+| `ID=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `ideographic` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `ideographic=(string)`| (changed)| `"a string"` |
+| `ideographic=(empty string)`| (changed)| `<empty string>` |
+| `ideographic=(array with string)`| (changed)| `"string"` |
+| `ideographic=(empty array)`| (changed)| `<empty string>` |
+| `ideographic=(object)`| (changed)| `"result of toString()"` |
+| `ideographic=(numeric string)`| (changed)| `"42"` |
+| `ideographic=(-1)`| (changed)| `"-1"` |
+| `ideographic=(0)`| (changed)| `"0"` |
+| `ideographic=(integer)`| (changed)| `"1"` |
+| `ideographic=(NaN)`| (changed, warning)| `"NaN"` |
+| `ideographic=(float)`| (changed)| `"99.99"` |
+| `ideographic=(true)`| (initial, warning)| `<null>` |
+| `ideographic=(false)`| (initial, warning)| `<null>` |
+| `ideographic=(string 'true')`| (changed)| `"true"` |
+| `ideographic=(string 'false')`| (changed)| `"false"` |
+| `ideographic=(string 'on')`| (changed)| `"on"` |
+| `ideographic=(string 'off')`| (changed)| `"off"` |
+| `ideographic=(symbol)`| (initial, warning)| `<null>` |
+| `ideographic=(function)`| (initial, warning)| `<null>` |
+| `ideographic=(null)`| (initial)| `<null>` |
+| `ideographic=(undefined)`| (initial)| `<null>` |
+
+## `image-rendering` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `image-rendering=(string)`| (changed, warning)| `"a string"` |
+| `image-rendering=(empty string)`| (changed, warning)| `<empty string>` |
+| `image-rendering=(array with string)`| (changed, warning)| `"string"` |
+| `image-rendering=(empty array)`| (changed, warning)| `<empty string>` |
+| `image-rendering=(object)`| (changed, warning)| `"result of toString()"` |
+| `image-rendering=(numeric string)`| (changed, warning)| `"42"` |
+| `image-rendering=(-1)`| (changed, warning)| `"-1"` |
+| `image-rendering=(0)`| (changed, warning)| `"0"` |
+| `image-rendering=(integer)`| (changed, warning)| `"1"` |
+| `image-rendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `image-rendering=(float)`| (changed, warning)| `"99.99"` |
+| `image-rendering=(true)`| (initial, warning)| `<null>` |
+| `image-rendering=(false)`| (initial, warning)| `<null>` |
+| `image-rendering=(string 'true')`| (changed, warning)| `"true"` |
+| `image-rendering=(string 'false')`| (changed, warning)| `"false"` |
+| `image-rendering=(string 'on')`| (changed, warning)| `"on"` |
+| `image-rendering=(string 'off')`| (changed, warning)| `"off"` |
+| `image-rendering=(symbol)`| (initial, warning)| `<null>` |
+| `image-rendering=(function)`| (initial, warning)| `<null>` |
+| `image-rendering=(null)`| (initial, warning)| `<null>` |
+| `image-rendering=(undefined)`| (initial, warning)| `<null>` |
+
+## `imageRendering` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `imageRendering=(string)`| (changed)| `"a string"` |
+| `imageRendering=(empty string)`| (changed)| `<empty string>` |
+| `imageRendering=(array with string)`| (changed)| `"string"` |
+| `imageRendering=(empty array)`| (changed)| `<empty string>` |
+| `imageRendering=(object)`| (changed)| `"result of toString()"` |
+| `imageRendering=(numeric string)`| (changed)| `"42"` |
+| `imageRendering=(-1)`| (changed)| `"-1"` |
+| `imageRendering=(0)`| (changed)| `"0"` |
+| `imageRendering=(integer)`| (changed)| `"1"` |
+| `imageRendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `imageRendering=(float)`| (changed)| `"99.99"` |
+| `imageRendering=(true)`| (initial, warning)| `<null>` |
+| `imageRendering=(false)`| (initial, warning)| `<null>` |
+| `imageRendering=(string 'true')`| (changed)| `"true"` |
+| `imageRendering=(string 'false')`| (changed)| `"false"` |
+| `imageRendering=(string 'on')`| (changed)| `"on"` |
+| `imageRendering=(string 'off')`| (changed)| `"off"` |
+| `imageRendering=(symbol)`| (initial, warning)| `<null>` |
+| `imageRendering=(function)`| (initial, warning)| `<null>` |
+| `imageRendering=(null)`| (initial)| `<null>` |
+| `imageRendering=(undefined)`| (initial)| `<null>` |
+
+## `imageSizes` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `imageSizes=(string)`| (changed)| `"a string"` |
+| `imageSizes=(empty string)`| (initial)| `<empty string>` |
+| `imageSizes=(array with string)`| (changed)| `"string"` |
+| `imageSizes=(empty array)`| (initial)| `<empty string>` |
+| `imageSizes=(object)`| (changed)| `"result of toString()"` |
+| `imageSizes=(numeric string)`| (changed)| `"42"` |
+| `imageSizes=(-1)`| (changed)| `"-1"` |
+| `imageSizes=(0)`| (changed)| `"0"` |
+| `imageSizes=(integer)`| (changed)| `"1"` |
+| `imageSizes=(NaN)`| (changed, warning)| `"NaN"` |
+| `imageSizes=(float)`| (changed)| `"99.99"` |
+| `imageSizes=(true)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(false)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(string 'true')`| (changed)| `"true"` |
+| `imageSizes=(string 'false')`| (changed)| `"false"` |
+| `imageSizes=(string 'on')`| (changed)| `"on"` |
+| `imageSizes=(string 'off')`| (changed)| `"off"` |
+| `imageSizes=(symbol)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(function)`| (initial, warning)| `<empty string>` |
+| `imageSizes=(null)`| (initial)| `<empty string>` |
+| `imageSizes=(undefined)`| (initial)| `<empty string>` |
+
+## `imageSrcSet` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `imageSrcSet=(string)`| (changed)| `"a string"` |
+| `imageSrcSet=(empty string)`| (initial)| `<empty string>` |
+| `imageSrcSet=(array with string)`| (changed)| `"string"` |
+| `imageSrcSet=(empty array)`| (initial)| `<empty string>` |
+| `imageSrcSet=(object)`| (changed)| `"result of toString()"` |
+| `imageSrcSet=(numeric string)`| (changed)| `"42"` |
+| `imageSrcSet=(-1)`| (changed)| `"-1"` |
+| `imageSrcSet=(0)`| (changed)| `"0"` |
+| `imageSrcSet=(integer)`| (changed)| `"1"` |
+| `imageSrcSet=(NaN)`| (changed, warning)| `"NaN"` |
+| `imageSrcSet=(float)`| (changed)| `"99.99"` |
+| `imageSrcSet=(true)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(false)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(string 'true')`| (changed)| `"true"` |
+| `imageSrcSet=(string 'false')`| (changed)| `"false"` |
+| `imageSrcSet=(string 'on')`| (changed)| `"on"` |
+| `imageSrcSet=(string 'off')`| (changed)| `"off"` |
+| `imageSrcSet=(symbol)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(function)`| (initial, warning)| `<empty string>` |
+| `imageSrcSet=(null)`| (initial)| `<empty string>` |
+| `imageSrcSet=(undefined)`| (initial)| `<empty string>` |
+
+## `in` (on `<feBlend>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `in=(string)`| (changed)| `"a string"` |
+| `in=(empty string)`| (changed)| `<empty string>` |
+| `in=(array with string)`| (changed)| `"string"` |
+| `in=(empty array)`| (changed)| `<empty string>` |
+| `in=(object)`| (changed)| `"result of toString()"` |
+| `in=(numeric string)`| (changed)| `"42"` |
+| `in=(-1)`| (changed)| `"-1"` |
+| `in=(0)`| (changed)| `"0"` |
+| `in=(integer)`| (changed)| `"1"` |
+| `in=(NaN)`| (changed, warning)| `"NaN"` |
+| `in=(float)`| (changed)| `"99.99"` |
+| `in=(true)`| (initial, warning)| `<null>` |
+| `in=(false)`| (initial, warning)| `<null>` |
+| `in=(string 'true')`| (changed)| `"true"` |
+| `in=(string 'false')`| (changed)| `"false"` |
+| `in=(string 'on')`| (changed)| `"on"` |
+| `in=(string 'off')`| (changed)| `"off"` |
+| `in=(symbol)`| (initial, warning)| `<null>` |
+| `in=(function)`| (initial, warning)| `<null>` |
+| `in=(null)`| (initial)| `<null>` |
+| `in=(undefined)`| (initial)| `<null>` |
+
+## `inert` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `inert=(string)`| (changed)| `<boolean: true>` |
+| `inert=(empty string)`| (initial, warning)| `<boolean: false>` |
+| `inert=(array with string)`| (changed)| `<boolean: true>` |
+| `inert=(empty array)`| (changed)| `<boolean: true>` |
+| `inert=(object)`| (changed)| `<boolean: true>` |
+| `inert=(numeric string)`| (changed)| `<boolean: true>` |
+| `inert=(-1)`| (changed)| `<boolean: true>` |
+| `inert=(0)`| (initial)| `<boolean: false>` |
+| `inert=(integer)`| (changed)| `<boolean: true>` |
+| `inert=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `inert=(float)`| (changed)| `<boolean: true>` |
+| `inert=(true)`| (changed)| `<boolean: true>` |
+| `inert=(false)`| (initial)| `<boolean: false>` |
+| `inert=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `inert=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `inert=(string 'on')`| (changed)| `<boolean: true>` |
+| `inert=(string 'off')`| (changed)| `<boolean: true>` |
+| `inert=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `inert=(function)`| (initial, warning)| `<boolean: false>` |
+| `inert=(null)`| (initial)| `<boolean: false>` |
+| `inert=(undefined)`| (initial)| `<boolean: false>` |
+
+## `in2` (on `<feBlend>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `in2=(string)`| (changed)| `"a string"` |
+| `in2=(empty string)`| (initial)| `<empty string>` |
+| `in2=(array with string)`| (changed)| `"string"` |
+| `in2=(empty array)`| (initial)| `<empty string>` |
+| `in2=(object)`| (changed)| `"result of toString()"` |
+| `in2=(numeric string)`| (changed)| `"42"` |
+| `in2=(-1)`| (changed)| `"-1"` |
+| `in2=(0)`| (changed)| `"0"` |
+| `in2=(integer)`| (changed)| `"1"` |
+| `in2=(NaN)`| (changed, warning)| `"NaN"` |
+| `in2=(float)`| (changed)| `"99.99"` |
+| `in2=(true)`| (initial, warning)| `<empty string>` |
+| `in2=(false)`| (initial, warning)| `<empty string>` |
+| `in2=(string 'true')`| (changed)| `"true"` |
+| `in2=(string 'false')`| (changed)| `"false"` |
+| `in2=(string 'on')`| (changed)| `"on"` |
+| `in2=(string 'off')`| (changed)| `"off"` |
+| `in2=(symbol)`| (initial, warning)| `<empty string>` |
+| `in2=(function)`| (initial, warning)| `<empty string>` |
+| `in2=(null)`| (initial)| `<empty string>` |
+| `in2=(undefined)`| (initial)| `<empty string>` |
+
+## `initialChecked` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `initialChecked=(string)`| (changed, warning)| `"a string"` |
+| `initialChecked=(empty string)`| (changed, warning)| `<empty string>` |
+| `initialChecked=(array with string)`| (changed, warning)| `"string"` |
+| `initialChecked=(empty array)`| (changed, warning)| `<empty string>` |
+| `initialChecked=(object)`| (changed, warning)| `"result of toString()"` |
+| `initialChecked=(numeric string)`| (changed, warning)| `"42"` |
+| `initialChecked=(-1)`| (changed, warning)| `"-1"` |
+| `initialChecked=(0)`| (changed, warning)| `"0"` |
+| `initialChecked=(integer)`| (changed, warning)| `"1"` |
+| `initialChecked=(NaN)`| (changed, warning)| `"NaN"` |
+| `initialChecked=(float)`| (changed, warning)| `"99.99"` |
+| `initialChecked=(true)`| (initial, warning)| `<null>` |
+| `initialChecked=(false)`| (initial, warning)| `<null>` |
+| `initialChecked=(string 'true')`| (changed, warning)| `"true"` |
+| `initialChecked=(string 'false')`| (changed, warning)| `"false"` |
+| `initialChecked=(string 'on')`| (changed, warning)| `"on"` |
+| `initialChecked=(string 'off')`| (changed, warning)| `"off"` |
+| `initialChecked=(symbol)`| (initial, warning)| `<null>` |
+| `initialChecked=(function)`| (initial, warning)| `<null>` |
+| `initialChecked=(null)`| (initial, warning)| `<null>` |
+| `initialChecked=(undefined)`| (initial, warning)| `<null>` |
+
+## `initialValue` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `initialValue=(string)`| (changed, warning)| `"a string"` |
+| `initialValue=(empty string)`| (changed, warning)| `<empty string>` |
+| `initialValue=(array with string)`| (changed, warning)| `"string"` |
+| `initialValue=(empty array)`| (changed, warning)| `<empty string>` |
+| `initialValue=(object)`| (changed, warning)| `"result of toString()"` |
+| `initialValue=(numeric string)`| (changed, warning)| `"42"` |
+| `initialValue=(-1)`| (changed, warning)| `"-1"` |
+| `initialValue=(0)`| (changed, warning)| `"0"` |
+| `initialValue=(integer)`| (changed, warning)| `"1"` |
+| `initialValue=(NaN)`| (changed, warning)| `"NaN"` |
+| `initialValue=(float)`| (changed, warning)| `"99.99"` |
+| `initialValue=(true)`| (initial, warning)| `<null>` |
+| `initialValue=(false)`| (initial, warning)| `<null>` |
+| `initialValue=(string 'true')`| (changed, warning)| `"true"` |
+| `initialValue=(string 'false')`| (changed, warning)| `"false"` |
+| `initialValue=(string 'on')`| (changed, warning)| `"on"` |
+| `initialValue=(string 'off')`| (changed, warning)| `"off"` |
+| `initialValue=(symbol)`| (initial, warning)| `<null>` |
+| `initialValue=(function)`| (initial, warning)| `<null>` |
+| `initialValue=(null)`| (initial, warning)| `<null>` |
+| `initialValue=(undefined)`| (initial, warning)| `<null>` |
+
+## `inlist` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `inlist=(string)`| (changed)| `"a string"` |
+| `inlist=(empty string)`| (changed)| `<empty string>` |
+| `inlist=(array with string)`| (changed)| `"string"` |
+| `inlist=(empty array)`| (changed)| `<empty string>` |
+| `inlist=(object)`| (changed)| `"result of toString()"` |
+| `inlist=(numeric string)`| (changed)| `"42"` |
+| `inlist=(-1)`| (changed)| `"-1"` |
+| `inlist=(0)`| (changed)| `"0"` |
+| `inlist=(integer)`| (changed)| `"1"` |
+| `inlist=(NaN)`| (changed, warning)| `"NaN"` |
+| `inlist=(float)`| (changed)| `"99.99"` |
+| `inlist=(true)`| (initial, warning)| `<null>` |
+| `inlist=(false)`| (initial, warning)| `<null>` |
+| `inlist=(string 'true')`| (changed)| `"true"` |
+| `inlist=(string 'false')`| (changed)| `"false"` |
+| `inlist=(string 'on')`| (changed)| `"on"` |
+| `inlist=(string 'off')`| (changed)| `"off"` |
+| `inlist=(symbol)`| (initial, warning)| `<null>` |
+| `inlist=(function)`| (initial, warning)| `<null>` |
+| `inlist=(null)`| (initial)| `<null>` |
+| `inlist=(undefined)`| (initial)| `<null>` |
+
+## `inputMode` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `inputMode=(string)`| (initial)| `<empty string>` |
+| `inputMode=(empty string)`| (initial)| `<empty string>` |
+| `inputMode=(array with string)`| (initial)| `<empty string>` |
+| `inputMode=(empty array)`| (initial)| `<empty string>` |
+| `inputMode=(object)`| (initial)| `<empty string>` |
+| `inputMode=(numeric string)`| (initial)| `<empty string>` |
+| `inputMode=(-1)`| (initial)| `<empty string>` |
+| `inputMode=(0)`| (initial)| `<empty string>` |
+| `inputMode=(integer)`| (initial)| `<empty string>` |
+| `inputMode=(NaN)`| (initial, warning)| `<empty string>` |
+| `inputMode=(float)`| (initial)| `<empty string>` |
+| `inputMode=(true)`| (initial, warning)| `<empty string>` |
+| `inputMode=(false)`| (initial, warning)| `<empty string>` |
+| `inputMode=(string 'true')`| (initial)| `<empty string>` |
+| `inputMode=(string 'false')`| (initial)| `<empty string>` |
+| `inputMode=(string 'on')`| (initial)| `<empty string>` |
+| `inputMode=(string 'off')`| (initial)| `<empty string>` |
+| `inputMode=(symbol)`| (initial, warning)| `<empty string>` |
+| `inputMode=(function)`| (initial, warning)| `<empty string>` |
+| `inputMode=(null)`| (initial)| `<empty string>` |
+| `inputMode=(undefined)`| (initial)| `<empty string>` |
+
+## `integrity` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `integrity=(string)`| (changed)| `"a string"` |
+| `integrity=(empty string)`| (initial)| `<empty string>` |
+| `integrity=(array with string)`| (changed)| `"string"` |
+| `integrity=(empty array)`| (initial)| `<empty string>` |
+| `integrity=(object)`| (changed)| `"result of toString()"` |
+| `integrity=(numeric string)`| (changed)| `"42"` |
+| `integrity=(-1)`| (changed)| `"-1"` |
+| `integrity=(0)`| (changed)| `"0"` |
+| `integrity=(integer)`| (changed)| `"1"` |
+| `integrity=(NaN)`| (changed, warning)| `"NaN"` |
+| `integrity=(float)`| (changed)| `"99.99"` |
+| `integrity=(true)`| (initial, warning)| `<empty string>` |
+| `integrity=(false)`| (initial, warning)| `<empty string>` |
+| `integrity=(string 'true')`| (changed)| `"true"` |
+| `integrity=(string 'false')`| (changed)| `"false"` |
+| `integrity=(string 'on')`| (changed)| `"on"` |
+| `integrity=(string 'off')`| (changed)| `"off"` |
+| `integrity=(symbol)`| (initial, warning)| `<empty string>` |
+| `integrity=(function)`| (initial, warning)| `<empty string>` |
+| `integrity=(null)`| (initial)| `<empty string>` |
+| `integrity=(undefined)`| (initial)| `<empty string>` |
+
+## `intercept` (on `<feFuncA>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `intercept=(string)`| (initial)| `<number: 0>` |
+| `intercept=(empty string)`| (initial)| `<number: 0>` |
+| `intercept=(array with string)`| (initial)| `<number: 0>` |
+| `intercept=(empty array)`| (initial)| `<number: 0>` |
+| `intercept=(object)`| (initial)| `<number: 0>` |
+| `intercept=(numeric string)`| (changed)| `<number: 42>` |
+| `intercept=(-1)`| (changed)| `<number: -1>` |
+| `intercept=(0)`| (initial)| `<number: 0>` |
+| `intercept=(integer)`| (changed)| `<number: 1>` |
+| `intercept=(NaN)`| (initial, warning)| `<number: 0>` |
+| `intercept=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `intercept=(true)`| (initial, warning)| `<number: 0>` |
+| `intercept=(false)`| (initial, warning)| `<number: 0>` |
+| `intercept=(string 'true')`| (initial)| `<number: 0>` |
+| `intercept=(string 'false')`| (initial)| `<number: 0>` |
+| `intercept=(string 'on')`| (initial)| `<number: 0>` |
+| `intercept=(string 'off')`| (initial)| `<number: 0>` |
+| `intercept=(symbol)`| (initial, warning)| `<number: 0>` |
+| `intercept=(function)`| (initial, warning)| `<number: 0>` |
+| `intercept=(null)`| (initial)| `<number: 0>` |
+| `intercept=(undefined)`| (initial)| `<number: 0>` |
+
+## `is` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `is=(string)`| (changed)| `"x-test-element"` |
+| `is=(empty string)`| (changed)| `<empty string>` |
+| `is=(array with string)`| (changed, warning)| `"x-test-element"` |
+| `is=(empty array)`| (changed, warning)| `<empty string>` |
+| `is=(object)`| (changed, warning)| `"result of toString()"` |
+| `is=(numeric string)`| (changed)| `"42"` |
+| `is=(-1)`| (changed, warning)| `"-1"` |
+| `is=(0)`| (changed, warning)| `"0"` |
+| `is=(integer)`| (changed, warning)| `"1"` |
+| `is=(NaN)`| (changed, warning)| `"NaN"` |
+| `is=(float)`| (changed, warning)| `"99.99"` |
+| `is=(true)`| (initial, warning)| `<null>` |
+| `is=(false)`| (initial, warning)| `<null>` |
+| `is=(string 'true')`| (changed)| `"true"` |
+| `is=(string 'false')`| (changed)| `"false"` |
+| `is=(string 'on')`| (changed)| `"on"` |
+| `is=(string 'off')`| (changed)| `"off"` |
+| `is=(symbol)`| (initial, warning)| `<null>` |
+| `is=(function)`| (initial, warning)| `<null>` |
+| `is=(null)`| (initial)| `<null>` |
+| `is=(undefined)`| (initial)| `<null>` |
+
+## `itemID` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `itemID=(string)`| (changed)| `"a string"` |
+| `itemID=(empty string)`| (changed)| `<empty string>` |
+| `itemID=(array with string)`| (changed)| `"string"` |
+| `itemID=(empty array)`| (changed)| `<empty string>` |
+| `itemID=(object)`| (changed)| `"result of toString()"` |
+| `itemID=(numeric string)`| (changed)| `"42"` |
+| `itemID=(-1)`| (changed)| `"-1"` |
+| `itemID=(0)`| (changed)| `"0"` |
+| `itemID=(integer)`| (changed)| `"1"` |
+| `itemID=(NaN)`| (changed, warning)| `"NaN"` |
+| `itemID=(float)`| (changed)| `"99.99"` |
+| `itemID=(true)`| (initial, warning)| `<null>` |
+| `itemID=(false)`| (initial, warning)| `<null>` |
+| `itemID=(string 'true')`| (changed)| `"true"` |
+| `itemID=(string 'false')`| (changed)| `"false"` |
+| `itemID=(string 'on')`| (changed)| `"on"` |
+| `itemID=(string 'off')`| (changed)| `"off"` |
+| `itemID=(symbol)`| (initial, warning)| `<null>` |
+| `itemID=(function)`| (initial, warning)| `<null>` |
+| `itemID=(null)`| (initial)| `<null>` |
+| `itemID=(undefined)`| (initial)| `<null>` |
+
+## `itemProp` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `itemProp=(string)`| (changed)| `"a string"` |
+| `itemProp=(empty string)`| (changed)| `<empty string>` |
+| `itemProp=(array with string)`| (changed)| `"string"` |
+| `itemProp=(empty array)`| (changed)| `<empty string>` |
+| `itemProp=(object)`| (changed)| `"result of toString()"` |
+| `itemProp=(numeric string)`| (changed)| `"42"` |
+| `itemProp=(-1)`| (changed)| `"-1"` |
+| `itemProp=(0)`| (changed)| `"0"` |
+| `itemProp=(integer)`| (changed)| `"1"` |
+| `itemProp=(NaN)`| (changed, warning)| `"NaN"` |
+| `itemProp=(float)`| (changed)| `"99.99"` |
+| `itemProp=(true)`| (initial, warning)| `<null>` |
+| `itemProp=(false)`| (initial, warning)| `<null>` |
+| `itemProp=(string 'true')`| (changed)| `"true"` |
+| `itemProp=(string 'false')`| (changed)| `"false"` |
+| `itemProp=(string 'on')`| (changed)| `"on"` |
+| `itemProp=(string 'off')`| (changed)| `"off"` |
+| `itemProp=(symbol)`| (initial, warning)| `<null>` |
+| `itemProp=(function)`| (initial, warning)| `<null>` |
+| `itemProp=(null)`| (initial)| `<null>` |
+| `itemProp=(undefined)`| (initial)| `<null>` |
+
+## `itemRef` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `itemRef=(string)`| (changed)| `"a string"` |
+| `itemRef=(empty string)`| (changed)| `<empty string>` |
+| `itemRef=(array with string)`| (changed)| `"string"` |
+| `itemRef=(empty array)`| (changed)| `<empty string>` |
+| `itemRef=(object)`| (changed)| `"result of toString()"` |
+| `itemRef=(numeric string)`| (changed)| `"42"` |
+| `itemRef=(-1)`| (changed)| `"-1"` |
+| `itemRef=(0)`| (changed)| `"0"` |
+| `itemRef=(integer)`| (changed)| `"1"` |
+| `itemRef=(NaN)`| (changed, warning)| `"NaN"` |
+| `itemRef=(float)`| (changed)| `"99.99"` |
+| `itemRef=(true)`| (initial, warning)| `<null>` |
+| `itemRef=(false)`| (initial, warning)| `<null>` |
+| `itemRef=(string 'true')`| (changed)| `"true"` |
+| `itemRef=(string 'false')`| (changed)| `"false"` |
+| `itemRef=(string 'on')`| (changed)| `"on"` |
+| `itemRef=(string 'off')`| (changed)| `"off"` |
+| `itemRef=(symbol)`| (initial, warning)| `<null>` |
+| `itemRef=(function)`| (initial, warning)| `<null>` |
+| `itemRef=(null)`| (initial)| `<null>` |
+| `itemRef=(undefined)`| (initial)| `<null>` |
+
+## `itemScope` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `itemScope=(string)`| (changed)| `<empty string>` |
+| `itemScope=(empty string)`| (initial)| `<null>` |
+| `itemScope=(array with string)`| (changed)| `<empty string>` |
+| `itemScope=(empty array)`| (changed)| `<empty string>` |
+| `itemScope=(object)`| (changed)| `<empty string>` |
+| `itemScope=(numeric string)`| (changed)| `<empty string>` |
+| `itemScope=(-1)`| (changed)| `<empty string>` |
+| `itemScope=(0)`| (initial)| `<null>` |
+| `itemScope=(integer)`| (changed)| `<empty string>` |
+| `itemScope=(NaN)`| (initial, warning)| `<null>` |
+| `itemScope=(float)`| (changed)| `<empty string>` |
+| `itemScope=(true)`| (changed)| `<empty string>` |
+| `itemScope=(false)`| (initial)| `<null>` |
+| `itemScope=(string 'true')`| (changed, warning)| `<empty string>` |
+| `itemScope=(string 'false')`| (changed, warning)| `<empty string>` |
+| `itemScope=(string 'on')`| (changed)| `<empty string>` |
+| `itemScope=(string 'off')`| (changed)| `<empty string>` |
+| `itemScope=(symbol)`| (initial, warning)| `<null>` |
+| `itemScope=(function)`| (initial, warning)| `<null>` |
+| `itemScope=(null)`| (initial)| `<null>` |
+| `itemScope=(undefined)`| (initial)| `<null>` |
+
+## `itemType` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `itemType=(string)`| (changed)| `"a string"` |
+| `itemType=(empty string)`| (changed)| `<empty string>` |
+| `itemType=(array with string)`| (changed)| `"string"` |
+| `itemType=(empty array)`| (changed)| `<empty string>` |
+| `itemType=(object)`| (changed)| `"result of toString()"` |
+| `itemType=(numeric string)`| (changed)| `"42"` |
+| `itemType=(-1)`| (changed)| `"-1"` |
+| `itemType=(0)`| (changed)| `"0"` |
+| `itemType=(integer)`| (changed)| `"1"` |
+| `itemType=(NaN)`| (changed, warning)| `"NaN"` |
+| `itemType=(float)`| (changed)| `"99.99"` |
+| `itemType=(true)`| (initial, warning)| `<null>` |
+| `itemType=(false)`| (initial, warning)| `<null>` |
+| `itemType=(string 'true')`| (changed)| `"true"` |
+| `itemType=(string 'false')`| (changed)| `"false"` |
+| `itemType=(string 'on')`| (changed)| `"on"` |
+| `itemType=(string 'off')`| (changed)| `"off"` |
+| `itemType=(symbol)`| (initial, warning)| `<null>` |
+| `itemType=(function)`| (initial, warning)| `<null>` |
+| `itemType=(null)`| (initial)| `<null>` |
+| `itemType=(undefined)`| (initial)| `<null>` |
+
+## `k` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `k=(string)`| (changed)| `"a string"` |
+| `k=(empty string)`| (changed)| `<empty string>` |
+| `k=(array with string)`| (changed)| `"string"` |
+| `k=(empty array)`| (changed)| `<empty string>` |
+| `k=(object)`| (changed)| `"result of toString()"` |
+| `k=(numeric string)`| (changed)| `"42"` |
+| `k=(-1)`| (changed)| `"-1"` |
+| `k=(0)`| (changed)| `"0"` |
+| `k=(integer)`| (changed)| `"1"` |
+| `k=(NaN)`| (changed, warning)| `"NaN"` |
+| `k=(float)`| (changed)| `"99.99"` |
+| `k=(true)`| (initial, warning)| `<null>` |
+| `k=(false)`| (initial, warning)| `<null>` |
+| `k=(string 'true')`| (changed)| `"true"` |
+| `k=(string 'false')`| (changed)| `"false"` |
+| `k=(string 'on')`| (changed)| `"on"` |
+| `k=(string 'off')`| (changed)| `"off"` |
+| `k=(symbol)`| (initial, warning)| `<null>` |
+| `k=(function)`| (initial, warning)| `<null>` |
+| `k=(null)`| (initial)| `<null>` |
+| `k=(undefined)`| (initial)| `<null>` |
+
+## `K` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `K=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(float)`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(true)`| (initial, warning)| `<null>` |
+| `K=(false)`| (initial, warning)| `<null>` |
+| `K=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
+| `K=(symbol)`| (initial, warning)| `<null>` |
+| `K=(function)`| (initial, warning)| `<null>` |
+| `K=(null)`| (initial, warning)| `<null>` |
+| `K=(undefined)`| (initial, warning)| `<null>` |
+
+## `K1` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `K1=(string)`| (initial, warning)| `<number: 0>` |
+| `K1=(empty string)`| (initial, warning)| `<number: 0>` |
+| `K1=(array with string)`| (initial, warning)| `<number: 0>` |
+| `K1=(empty array)`| (initial, warning)| `<number: 0>` |
+| `K1=(object)`| (initial, warning)| `<number: 0>` |
+| `K1=(numeric string)`| (initial, warning, ssr mismatch)| `<number: 0>` |
+| `K1=(-1)`| (initial, warning, ssr mismatch)| `<number: 0>` |
+| `K1=(0)`| (initial, warning)| `<number: 0>` |
+| `K1=(integer)`| (initial, warning, ssr mismatch)| `<number: 0>` |
+| `K1=(NaN)`| (initial, warning)| `<number: 0>` |
+| `K1=(float)`| (initial, warning, ssr mismatch)| `<number: 0>` |
+| `K1=(true)`| (initial, warning)| `<number: 0>` |
+| `K1=(false)`| (initial, warning)| `<number: 0>` |
+| `K1=(string 'true')`| (initial, warning)| `<number: 0>` |
+| `K1=(string 'false')`| (initial, warning)| `<number: 0>` |
+| `K1=(string 'on')`| (initial, warning)| `<number: 0>` |
+| `K1=(string 'off')`| (initial, warning)| `<number: 0>` |
+| `K1=(symbol)`| (initial, warning)| `<number: 0>` |
+| `K1=(function)`| (initial, warning)| `<number: 0>` |
+| `K1=(null)`| (initial, warning)| `<number: 0>` |
+| `K1=(undefined)`| (initial, warning)| `<number: 0>` |
+
+## `k1` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `k1=(string)`| (initial)| `<number: 0>` |
+| `k1=(empty string)`| (initial)| `<number: 0>` |
+| `k1=(array with string)`| (initial)| `<number: 0>` |
+| `k1=(empty array)`| (initial)| `<number: 0>` |
+| `k1=(object)`| (initial)| `<number: 0>` |
+| `k1=(numeric string)`| (changed)| `<number: 42>` |
+| `k1=(-1)`| (changed)| `<number: -1>` |
+| `k1=(0)`| (initial)| `<number: 0>` |
+| `k1=(integer)`| (changed)| `<number: 1>` |
+| `k1=(NaN)`| (initial, warning)| `<number: 0>` |
+| `k1=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `k1=(true)`| (initial, warning)| `<number: 0>` |
+| `k1=(false)`| (initial, warning)| `<number: 0>` |
+| `k1=(string 'true')`| (initial)| `<number: 0>` |
+| `k1=(string 'false')`| (initial)| `<number: 0>` |
+| `k1=(string 'on')`| (initial)| `<number: 0>` |
+| `k1=(string 'off')`| (initial)| `<number: 0>` |
+| `k1=(symbol)`| (initial, warning)| `<number: 0>` |
+| `k1=(function)`| (initial, warning)| `<number: 0>` |
+| `k1=(null)`| (initial)| `<number: 0>` |
+| `k1=(undefined)`| (initial)| `<number: 0>` |
+
+## `k2` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `k2=(string)`| (initial)| `<number: 0>` |
+| `k2=(empty string)`| (initial)| `<number: 0>` |
+| `k2=(array with string)`| (initial)| `<number: 0>` |
+| `k2=(empty array)`| (initial)| `<number: 0>` |
+| `k2=(object)`| (initial)| `<number: 0>` |
+| `k2=(numeric string)`| (changed)| `<number: 42>` |
+| `k2=(-1)`| (changed)| `<number: -1>` |
+| `k2=(0)`| (initial)| `<number: 0>` |
+| `k2=(integer)`| (changed)| `<number: 1>` |
+| `k2=(NaN)`| (initial, warning)| `<number: 0>` |
+| `k2=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `k2=(true)`| (initial, warning)| `<number: 0>` |
+| `k2=(false)`| (initial, warning)| `<number: 0>` |
+| `k2=(string 'true')`| (initial)| `<number: 0>` |
+| `k2=(string 'false')`| (initial)| `<number: 0>` |
+| `k2=(string 'on')`| (initial)| `<number: 0>` |
+| `k2=(string 'off')`| (initial)| `<number: 0>` |
+| `k2=(symbol)`| (initial, warning)| `<number: 0>` |
+| `k2=(function)`| (initial, warning)| `<number: 0>` |
+| `k2=(null)`| (initial)| `<number: 0>` |
+| `k2=(undefined)`| (initial)| `<number: 0>` |
+
+## `k3` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `k3=(string)`| (initial)| `<number: 0>` |
+| `k3=(empty string)`| (initial)| `<number: 0>` |
+| `k3=(array with string)`| (initial)| `<number: 0>` |
+| `k3=(empty array)`| (initial)| `<number: 0>` |
+| `k3=(object)`| (initial)| `<number: 0>` |
+| `k3=(numeric string)`| (changed)| `<number: 42>` |
+| `k3=(-1)`| (changed)| `<number: -1>` |
+| `k3=(0)`| (initial)| `<number: 0>` |
+| `k3=(integer)`| (changed)| `<number: 1>` |
+| `k3=(NaN)`| (initial, warning)| `<number: 0>` |
+| `k3=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `k3=(true)`| (initial, warning)| `<number: 0>` |
+| `k3=(false)`| (initial, warning)| `<number: 0>` |
+| `k3=(string 'true')`| (initial)| `<number: 0>` |
+| `k3=(string 'false')`| (initial)| `<number: 0>` |
+| `k3=(string 'on')`| (initial)| `<number: 0>` |
+| `k3=(string 'off')`| (initial)| `<number: 0>` |
+| `k3=(symbol)`| (initial, warning)| `<number: 0>` |
+| `k3=(function)`| (initial, warning)| `<number: 0>` |
+| `k3=(null)`| (initial)| `<number: 0>` |
+| `k3=(undefined)`| (initial)| `<number: 0>` |
+
+## `k4` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `k4=(string)`| (initial)| `<number: 0>` |
+| `k4=(empty string)`| (initial)| `<number: 0>` |
+| `k4=(array with string)`| (initial)| `<number: 0>` |
+| `k4=(empty array)`| (initial)| `<number: 0>` |
+| `k4=(object)`| (initial)| `<number: 0>` |
+| `k4=(numeric string)`| (changed)| `<number: 42>` |
+| `k4=(-1)`| (changed)| `<number: -1>` |
+| `k4=(0)`| (initial)| `<number: 0>` |
+| `k4=(integer)`| (changed)| `<number: 1>` |
+| `k4=(NaN)`| (initial, warning)| `<number: 0>` |
+| `k4=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `k4=(true)`| (initial, warning)| `<number: 0>` |
+| `k4=(false)`| (initial, warning)| `<number: 0>` |
+| `k4=(string 'true')`| (initial)| `<number: 0>` |
+| `k4=(string 'false')`| (initial)| `<number: 0>` |
+| `k4=(string 'on')`| (initial)| `<number: 0>` |
+| `k4=(string 'off')`| (initial)| `<number: 0>` |
+| `k4=(symbol)`| (initial, warning)| `<number: 0>` |
+| `k4=(function)`| (initial, warning)| `<number: 0>` |
+| `k4=(null)`| (initial)| `<number: 0>` |
+| `k4=(undefined)`| (initial)| `<number: 0>` |
+
+## `kernelMatrix` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `kernelMatrix=(string)`| (changed)| `[1, 2, 3, 4]` |
+| `kernelMatrix=(empty string)`| (initial)| `[]` |
+| `kernelMatrix=(array with string)`| (changed)| `[1, 2, 3, 4]` |
+| `kernelMatrix=(empty array)`| (initial)| `[]` |
+| `kernelMatrix=(object)`| (initial)| `[]` |
+| `kernelMatrix=(numeric string)`| (changed)| `[42]` |
+| `kernelMatrix=(-1)`| (changed)| `[-1]` |
+| `kernelMatrix=(0)`| (changed)| `[0]` |
+| `kernelMatrix=(integer)`| (changed)| `[1]` |
+| `kernelMatrix=(NaN)`| (initial, warning)| `[]` |
+| `kernelMatrix=(float)`| (changed)| `[99.98999786376953]` |
+| `kernelMatrix=(true)`| (initial, warning)| `[]` |
+| `kernelMatrix=(false)`| (initial, warning)| `[]` |
+| `kernelMatrix=(string 'true')`| (initial)| `[]` |
+| `kernelMatrix=(string 'false')`| (initial)| `[]` |
+| `kernelMatrix=(string 'on')`| (initial)| `[]` |
+| `kernelMatrix=(string 'off')`| (initial)| `[]` |
+| `kernelMatrix=(symbol)`| (initial, warning)| `[]` |
+| `kernelMatrix=(function)`| (initial, warning)| `[]` |
+| `kernelMatrix=(null)`| (initial)| `[]` |
+| `kernelMatrix=(undefined)`| (initial)| `[]` |
+
+## `kernelUnitLength` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `kernelUnitLength=(string)`| (changed)| `"a string"` |
+| `kernelUnitLength=(empty string)`| (changed)| `<empty string>` |
+| `kernelUnitLength=(array with string)`| (changed)| `"string"` |
+| `kernelUnitLength=(empty array)`| (changed)| `<empty string>` |
+| `kernelUnitLength=(object)`| (changed)| `"result of toString()"` |
+| `kernelUnitLength=(numeric string)`| (changed)| `"42"` |
+| `kernelUnitLength=(-1)`| (changed)| `"-1"` |
+| `kernelUnitLength=(0)`| (changed)| `"0"` |
+| `kernelUnitLength=(integer)`| (changed)| `"1"` |
+| `kernelUnitLength=(NaN)`| (changed, warning)| `"NaN"` |
+| `kernelUnitLength=(float)`| (changed)| `"99.99"` |
+| `kernelUnitLength=(true)`| (initial, warning)| `<null>` |
+| `kernelUnitLength=(false)`| (initial, warning)| `<null>` |
+| `kernelUnitLength=(string 'true')`| (changed)| `"true"` |
+| `kernelUnitLength=(string 'false')`| (changed)| `"false"` |
+| `kernelUnitLength=(string 'on')`| (changed)| `"on"` |
+| `kernelUnitLength=(string 'off')`| (changed)| `"off"` |
+| `kernelUnitLength=(symbol)`| (initial, warning)| `<null>` |
+| `kernelUnitLength=(function)`| (initial, warning)| `<null>` |
+| `kernelUnitLength=(null)`| (initial)| `<null>` |
+| `kernelUnitLength=(undefined)`| (initial)| `<null>` |
+
+## `kerning` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `kerning=(string)`| (changed)| `"a string"` |
+| `kerning=(empty string)`| (changed)| `<empty string>` |
+| `kerning=(array with string)`| (changed)| `"string"` |
+| `kerning=(empty array)`| (changed)| `<empty string>` |
+| `kerning=(object)`| (changed)| `"result of toString()"` |
+| `kerning=(numeric string)`| (changed)| `"42"` |
+| `kerning=(-1)`| (changed)| `"-1"` |
+| `kerning=(0)`| (changed)| `"0"` |
+| `kerning=(integer)`| (changed)| `"1"` |
+| `kerning=(NaN)`| (changed, warning)| `"NaN"` |
+| `kerning=(float)`| (changed)| `"99.99"` |
+| `kerning=(true)`| (initial, warning)| `<null>` |
+| `kerning=(false)`| (initial, warning)| `<null>` |
+| `kerning=(string 'true')`| (changed)| `"true"` |
+| `kerning=(string 'false')`| (changed)| `"false"` |
+| `kerning=(string 'on')`| (changed)| `"on"` |
+| `kerning=(string 'off')`| (changed)| `"off"` |
+| `kerning=(symbol)`| (initial, warning)| `<null>` |
+| `kerning=(function)`| (initial, warning)| `<null>` |
+| `kerning=(null)`| (initial)| `<null>` |
+| `kerning=(undefined)`| (initial)| `<null>` |
+
+## `keyParams` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `keyParams=(string)`| (changed)| `"a string"` |
+| `keyParams=(empty string)`| (changed)| `<empty string>` |
+| `keyParams=(array with string)`| (changed)| `"string"` |
+| `keyParams=(empty array)`| (changed)| `<empty string>` |
+| `keyParams=(object)`| (changed)| `"result of toString()"` |
+| `keyParams=(numeric string)`| (changed)| `"42"` |
+| `keyParams=(-1)`| (changed)| `"-1"` |
+| `keyParams=(0)`| (changed)| `"0"` |
+| `keyParams=(integer)`| (changed)| `"1"` |
+| `keyParams=(NaN)`| (changed, warning)| `"NaN"` |
+| `keyParams=(float)`| (changed)| `"99.99"` |
+| `keyParams=(true)`| (initial, warning)| `<null>` |
+| `keyParams=(false)`| (initial, warning)| `<null>` |
+| `keyParams=(string 'true')`| (changed)| `"true"` |
+| `keyParams=(string 'false')`| (changed)| `"false"` |
+| `keyParams=(string 'on')`| (changed)| `"on"` |
+| `keyParams=(string 'off')`| (changed)| `"off"` |
+| `keyParams=(symbol)`| (initial, warning)| `<null>` |
+| `keyParams=(function)`| (initial, warning)| `<null>` |
+| `keyParams=(null)`| (initial)| `<null>` |
+| `keyParams=(undefined)`| (initial)| `<null>` |
+
+## `keyPoints` (on `<animateMotion>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `keyPoints=(string)`| (changed)| `"a string"` |
+| `keyPoints=(empty string)`| (changed)| `<empty string>` |
+| `keyPoints=(array with string)`| (changed)| `"string"` |
+| `keyPoints=(empty array)`| (changed)| `<empty string>` |
+| `keyPoints=(object)`| (changed)| `"result of toString()"` |
+| `keyPoints=(numeric string)`| (changed)| `"42"` |
+| `keyPoints=(-1)`| (changed)| `"-1"` |
+| `keyPoints=(0)`| (changed)| `"0"` |
+| `keyPoints=(integer)`| (changed)| `"1"` |
+| `keyPoints=(NaN)`| (changed, warning)| `"NaN"` |
+| `keyPoints=(float)`| (changed)| `"99.99"` |
+| `keyPoints=(true)`| (initial, warning)| `<null>` |
+| `keyPoints=(false)`| (initial, warning)| `<null>` |
+| `keyPoints=(string 'true')`| (changed)| `"true"` |
+| `keyPoints=(string 'false')`| (changed)| `"false"` |
+| `keyPoints=(string 'on')`| (changed)| `"on"` |
+| `keyPoints=(string 'off')`| (changed)| `"off"` |
+| `keyPoints=(symbol)`| (initial, warning)| `<null>` |
+| `keyPoints=(function)`| (initial, warning)| `<null>` |
+| `keyPoints=(null)`| (initial)| `<null>` |
+| `keyPoints=(undefined)`| (initial)| `<null>` |
+
+## `keySplines` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `keySplines=(string)`| (changed)| `"a string"` |
+| `keySplines=(empty string)`| (changed)| `<empty string>` |
+| `keySplines=(array with string)`| (changed)| `"string"` |
+| `keySplines=(empty array)`| (changed)| `<empty string>` |
+| `keySplines=(object)`| (changed)| `"result of toString()"` |
+| `keySplines=(numeric string)`| (changed)| `"42"` |
+| `keySplines=(-1)`| (changed)| `"-1"` |
+| `keySplines=(0)`| (changed)| `"0"` |
+| `keySplines=(integer)`| (changed)| `"1"` |
+| `keySplines=(NaN)`| (changed, warning)| `"NaN"` |
+| `keySplines=(float)`| (changed)| `"99.99"` |
+| `keySplines=(true)`| (initial, warning)| `<null>` |
+| `keySplines=(false)`| (initial, warning)| `<null>` |
+| `keySplines=(string 'true')`| (changed)| `"true"` |
+| `keySplines=(string 'false')`| (changed)| `"false"` |
+| `keySplines=(string 'on')`| (changed)| `"on"` |
+| `keySplines=(string 'off')`| (changed)| `"off"` |
+| `keySplines=(symbol)`| (initial, warning)| `<null>` |
+| `keySplines=(function)`| (initial, warning)| `<null>` |
+| `keySplines=(null)`| (initial)| `<null>` |
+| `keySplines=(undefined)`| (initial)| `<null>` |
+
+## `keyTimes` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `keyTimes=(string)`| (changed)| `"a string"` |
+| `keyTimes=(empty string)`| (changed)| `<empty string>` |
+| `keyTimes=(array with string)`| (changed)| `"string"` |
+| `keyTimes=(empty array)`| (changed)| `<empty string>` |
+| `keyTimes=(object)`| (changed)| `"result of toString()"` |
+| `keyTimes=(numeric string)`| (changed)| `"42"` |
+| `keyTimes=(-1)`| (changed)| `"-1"` |
+| `keyTimes=(0)`| (changed)| `"0"` |
+| `keyTimes=(integer)`| (changed)| `"1"` |
+| `keyTimes=(NaN)`| (changed, warning)| `"NaN"` |
+| `keyTimes=(float)`| (changed)| `"99.99"` |
+| `keyTimes=(true)`| (initial, warning)| `<null>` |
+| `keyTimes=(false)`| (initial, warning)| `<null>` |
+| `keyTimes=(string 'true')`| (changed)| `"true"` |
+| `keyTimes=(string 'false')`| (changed)| `"false"` |
+| `keyTimes=(string 'on')`| (changed)| `"on"` |
+| `keyTimes=(string 'off')`| (changed)| `"off"` |
+| `keyTimes=(symbol)`| (initial, warning)| `<null>` |
+| `keyTimes=(function)`| (initial, warning)| `<null>` |
+| `keyTimes=(null)`| (initial)| `<null>` |
+| `keyTimes=(undefined)`| (initial)| `<null>` |
+
+## `keyType` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `keyType=(string)`| (changed)| `"a string"` |
+| `keyType=(empty string)`| (changed)| `<empty string>` |
+| `keyType=(array with string)`| (changed)| `"string"` |
+| `keyType=(empty array)`| (changed)| `<empty string>` |
+| `keyType=(object)`| (changed)| `"result of toString()"` |
+| `keyType=(numeric string)`| (changed)| `"42"` |
+| `keyType=(-1)`| (changed)| `"-1"` |
+| `keyType=(0)`| (changed)| `"0"` |
+| `keyType=(integer)`| (changed)| `"1"` |
+| `keyType=(NaN)`| (changed, warning)| `"NaN"` |
+| `keyType=(float)`| (changed)| `"99.99"` |
+| `keyType=(true)`| (initial, warning)| `<null>` |
+| `keyType=(false)`| (initial, warning)| `<null>` |
+| `keyType=(string 'true')`| (changed)| `"true"` |
+| `keyType=(string 'false')`| (changed)| `"false"` |
+| `keyType=(string 'on')`| (changed)| `"on"` |
+| `keyType=(string 'off')`| (changed)| `"off"` |
+| `keyType=(symbol)`| (initial, warning)| `<null>` |
+| `keyType=(function)`| (initial, warning)| `<null>` |
+| `keyType=(null)`| (initial)| `<null>` |
+| `keyType=(undefined)`| (initial)| `<null>` |
+
+## `kind` (on `<track>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `kind=(string)`| (changed)| `"captions"` |
+| `kind=(empty string)`| (changed)| `"metadata"` |
+| `kind=(array with string)`| (changed)| `"captions"` |
+| `kind=(empty array)`| (changed)| `"metadata"` |
+| `kind=(object)`| (changed)| `"metadata"` |
+| `kind=(numeric string)`| (changed)| `"metadata"` |
+| `kind=(-1)`| (changed)| `"metadata"` |
+| `kind=(0)`| (changed)| `"metadata"` |
+| `kind=(integer)`| (changed)| `"metadata"` |
+| `kind=(NaN)`| (changed, warning)| `"metadata"` |
+| `kind=(float)`| (changed)| `"metadata"` |
+| `kind=(true)`| (initial, warning)| `"subtitles"` |
+| `kind=(false)`| (initial, warning)| `"subtitles"` |
+| `kind=(string 'true')`| (changed)| `"metadata"` |
+| `kind=(string 'false')`| (changed)| `"metadata"` |
+| `kind=(string 'on')`| (changed)| `"metadata"` |
+| `kind=(string 'off')`| (changed)| `"metadata"` |
+| `kind=(symbol)`| (initial, warning)| `"subtitles"` |
+| `kind=(function)`| (initial, warning)| `"subtitles"` |
+| `kind=(null)`| (initial)| `"subtitles"` |
+| `kind=(undefined)`| (initial)| `"subtitles"` |
+
+## `label` (on `<track>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `label=(string)`| (changed)| `"a string"` |
+| `label=(empty string)`| (initial)| `<empty string>` |
+| `label=(array with string)`| (changed)| `"string"` |
+| `label=(empty array)`| (initial)| `<empty string>` |
+| `label=(object)`| (changed)| `"result of toString()"` |
+| `label=(numeric string)`| (changed)| `"42"` |
+| `label=(-1)`| (changed)| `"-1"` |
+| `label=(0)`| (changed)| `"0"` |
+| `label=(integer)`| (changed)| `"1"` |
+| `label=(NaN)`| (changed, warning)| `"NaN"` |
+| `label=(float)`| (changed)| `"99.99"` |
+| `label=(true)`| (initial, warning)| `<empty string>` |
+| `label=(false)`| (initial, warning)| `<empty string>` |
+| `label=(string 'true')`| (changed)| `"true"` |
+| `label=(string 'false')`| (changed)| `"false"` |
+| `label=(string 'on')`| (changed)| `"on"` |
+| `label=(string 'off')`| (changed)| `"off"` |
+| `label=(symbol)`| (initial, warning)| `<empty string>` |
+| `label=(function)`| (initial, warning)| `<empty string>` |
+| `label=(null)`| (initial)| `<empty string>` |
+| `label=(undefined)`| (initial)| `<empty string>` |
+
+## `LANG` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `LANG=(string)`| (changed, warning)| `"a string"` |
+| `LANG=(empty string)`| (initial, warning)| `<empty string>` |
+| `LANG=(array with string)`| (changed, warning)| `"string"` |
+| `LANG=(empty array)`| (initial, warning)| `<empty string>` |
+| `LANG=(object)`| (changed, warning)| `"result of toString()"` |
+| `LANG=(numeric string)`| (changed, warning)| `"42"` |
+| `LANG=(-1)`| (changed, warning)| `"-1"` |
+| `LANG=(0)`| (changed, warning)| `"0"` |
+| `LANG=(integer)`| (changed, warning)| `"1"` |
+| `LANG=(NaN)`| (changed, warning)| `"NaN"` |
+| `LANG=(float)`| (changed, warning)| `"99.99"` |
+| `LANG=(true)`| (initial, warning)| `<empty string>` |
+| `LANG=(false)`| (initial, warning)| `<empty string>` |
+| `LANG=(string 'true')`| (changed, warning)| `"true"` |
+| `LANG=(string 'false')`| (changed, warning)| `"false"` |
+| `LANG=(string 'on')`| (changed, warning)| `"on"` |
+| `LANG=(string 'off')`| (changed, warning)| `"off"` |
+| `LANG=(symbol)`| (initial, warning)| `<empty string>` |
+| `LANG=(function)`| (initial, warning)| `<empty string>` |
+| `LANG=(null)`| (initial, warning)| `<empty string>` |
+| `LANG=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `lang` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `lang=(string)`| (changed)| `"a string"` |
+| `lang=(empty string)`| (initial)| `<empty string>` |
+| `lang=(array with string)`| (changed)| `"string"` |
+| `lang=(empty array)`| (initial)| `<empty string>` |
+| `lang=(object)`| (changed)| `"result of toString()"` |
+| `lang=(numeric string)`| (changed)| `"42"` |
+| `lang=(-1)`| (changed)| `"-1"` |
+| `lang=(0)`| (changed)| `"0"` |
+| `lang=(integer)`| (changed)| `"1"` |
+| `lang=(NaN)`| (changed, warning)| `"NaN"` |
+| `lang=(float)`| (changed)| `"99.99"` |
+| `lang=(true)`| (initial, warning)| `<empty string>` |
+| `lang=(false)`| (initial, warning)| `<empty string>` |
+| `lang=(string 'true')`| (changed)| `"true"` |
+| `lang=(string 'false')`| (changed)| `"false"` |
+| `lang=(string 'on')`| (changed)| `"on"` |
+| `lang=(string 'off')`| (changed)| `"off"` |
+| `lang=(symbol)`| (initial, warning)| `<empty string>` |
+| `lang=(function)`| (initial, warning)| `<empty string>` |
+| `lang=(null)`| (initial)| `<empty string>` |
+| `lang=(undefined)`| (initial)| `<empty string>` |
+
+## `lang` (on `<html>` inside `<document>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `lang=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `lang=(empty string)`| (initial)| `<empty string>` |
+| `lang=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `lang=(empty array)`| (initial)| `<empty string>` |
+| `lang=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `lang=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `lang=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `lang=(0)`| (changed, ssr mismatch)| `"0"` |
+| `lang=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `lang=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `lang=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `lang=(true)`| (initial, warning)| `<empty string>` |
+| `lang=(false)`| (initial, warning)| `<empty string>` |
+| `lang=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `lang=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `lang=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `lang=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `lang=(symbol)`| (initial, warning)| `<empty string>` |
+| `lang=(function)`| (initial, warning)| `<empty string>` |
+| `lang=(null)`| (initial)| `<empty string>` |
+| `lang=(undefined)`| (initial)| `<empty string>` |
+
+## `length` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `length=(string)`| (changed)| `"a string"` |
+| `length=(empty string)`| (changed)| `<empty string>` |
+| `length=(array with string)`| (changed)| `"string"` |
+| `length=(empty array)`| (changed)| `<empty string>` |
+| `length=(object)`| (changed)| `"result of toString()"` |
+| `length=(numeric string)`| (changed)| `"42"` |
+| `length=(-1)`| (changed)| `"-1"` |
+| `length=(0)`| (changed)| `"0"` |
+| `length=(integer)`| (changed)| `"1"` |
+| `length=(NaN)`| (changed, warning)| `"NaN"` |
+| `length=(float)`| (changed)| `"99.99"` |
+| `length=(true)`| (initial, warning)| `<null>` |
+| `length=(false)`| (initial, warning)| `<null>` |
+| `length=(string 'true')`| (changed)| `"true"` |
+| `length=(string 'false')`| (changed)| `"false"` |
+| `length=(string 'on')`| (changed)| `"on"` |
+| `length=(string 'off')`| (changed)| `"off"` |
+| `length=(symbol)`| (initial, warning)| `<null>` |
+| `length=(function)`| (initial, warning)| `<null>` |
+| `length=(null)`| (initial)| `<null>` |
+| `length=(undefined)`| (initial)| `<null>` |
+
+## `lengthAdjust` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `lengthAdjust=(string)`| (changed)| `<number: 2>` |
+| `lengthAdjust=(empty string)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(array with string)`| (changed)| `<number: 2>` |
+| `lengthAdjust=(empty array)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(object)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(numeric string)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(-1)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(0)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(integer)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(NaN)`| (initial, warning)| `<number: 1>` |
+| `lengthAdjust=(float)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(true)`| (initial, warning)| `<number: 1>` |
+| `lengthAdjust=(false)`| (initial, warning)| `<number: 1>` |
+| `lengthAdjust=(string 'true')`| (initial)| `<number: 1>` |
+| `lengthAdjust=(string 'false')`| (initial)| `<number: 1>` |
+| `lengthAdjust=(string 'on')`| (initial)| `<number: 1>` |
+| `lengthAdjust=(string 'off')`| (initial)| `<number: 1>` |
+| `lengthAdjust=(symbol)`| (initial, warning)| `<number: 1>` |
+| `lengthAdjust=(function)`| (initial, warning)| `<number: 1>` |
+| `lengthAdjust=(null)`| (initial)| `<number: 1>` |
+| `lengthAdjust=(undefined)`| (initial)| `<number: 1>` |
+
+## `letter-spacing` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `letter-spacing=(string)`| (changed, warning)| `"a string"` |
+| `letter-spacing=(empty string)`| (changed, warning)| `<empty string>` |
+| `letter-spacing=(array with string)`| (changed, warning)| `"string"` |
+| `letter-spacing=(empty array)`| (changed, warning)| `<empty string>` |
+| `letter-spacing=(object)`| (changed, warning)| `"result of toString()"` |
+| `letter-spacing=(numeric string)`| (changed, warning)| `"42"` |
+| `letter-spacing=(-1)`| (changed, warning)| `"-1"` |
+| `letter-spacing=(0)`| (changed, warning)| `"0"` |
+| `letter-spacing=(integer)`| (changed, warning)| `"1"` |
+| `letter-spacing=(NaN)`| (changed, warning)| `"NaN"` |
+| `letter-spacing=(float)`| (changed, warning)| `"99.99"` |
+| `letter-spacing=(true)`| (initial, warning)| `<null>` |
+| `letter-spacing=(false)`| (initial, warning)| `<null>` |
+| `letter-spacing=(string 'true')`| (changed, warning)| `"true"` |
+| `letter-spacing=(string 'false')`| (changed, warning)| `"false"` |
+| `letter-spacing=(string 'on')`| (changed, warning)| `"on"` |
+| `letter-spacing=(string 'off')`| (changed, warning)| `"off"` |
+| `letter-spacing=(symbol)`| (initial, warning)| `<null>` |
+| `letter-spacing=(function)`| (initial, warning)| `<null>` |
+| `letter-spacing=(null)`| (initial, warning)| `<null>` |
+| `letter-spacing=(undefined)`| (initial, warning)| `<null>` |
+
+## `letterSpacing` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `letterSpacing=(string)`| (changed)| `"a string"` |
+| `letterSpacing=(empty string)`| (changed)| `<empty string>` |
+| `letterSpacing=(array with string)`| (changed)| `"string"` |
+| `letterSpacing=(empty array)`| (changed)| `<empty string>` |
+| `letterSpacing=(object)`| (changed)| `"result of toString()"` |
+| `letterSpacing=(numeric string)`| (changed)| `"42"` |
+| `letterSpacing=(-1)`| (changed)| `"-1"` |
+| `letterSpacing=(0)`| (changed)| `"0"` |
+| `letterSpacing=(integer)`| (changed)| `"1"` |
+| `letterSpacing=(NaN)`| (changed, warning)| `"NaN"` |
+| `letterSpacing=(float)`| (changed)| `"99.99"` |
+| `letterSpacing=(true)`| (initial, warning)| `<null>` |
+| `letterSpacing=(false)`| (initial, warning)| `<null>` |
+| `letterSpacing=(string 'true')`| (changed)| `"true"` |
+| `letterSpacing=(string 'false')`| (changed)| `"false"` |
+| `letterSpacing=(string 'on')`| (changed)| `"on"` |
+| `letterSpacing=(string 'off')`| (changed)| `"off"` |
+| `letterSpacing=(symbol)`| (initial, warning)| `<null>` |
+| `letterSpacing=(function)`| (initial, warning)| `<null>` |
+| `letterSpacing=(null)`| (initial)| `<null>` |
+| `letterSpacing=(undefined)`| (initial)| `<null>` |
+
+## `lighting-color` (on `<feDiffuseLighting>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `lighting-color=(string)`| (changed, warning)| `"a string"` |
+| `lighting-color=(empty string)`| (changed, warning)| `<empty string>` |
+| `lighting-color=(array with string)`| (changed, warning)| `"string"` |
+| `lighting-color=(empty array)`| (changed, warning)| `<empty string>` |
+| `lighting-color=(object)`| (changed, warning)| `"result of toString()"` |
+| `lighting-color=(numeric string)`| (changed, warning)| `"42"` |
+| `lighting-color=(-1)`| (changed, warning)| `"-1"` |
+| `lighting-color=(0)`| (changed, warning)| `"0"` |
+| `lighting-color=(integer)`| (changed, warning)| `"1"` |
+| `lighting-color=(NaN)`| (changed, warning)| `"NaN"` |
+| `lighting-color=(float)`| (changed, warning)| `"99.99"` |
+| `lighting-color=(true)`| (initial, warning)| `<null>` |
+| `lighting-color=(false)`| (initial, warning)| `<null>` |
+| `lighting-color=(string 'true')`| (changed, warning)| `"true"` |
+| `lighting-color=(string 'false')`| (changed, warning)| `"false"` |
+| `lighting-color=(string 'on')`| (changed, warning)| `"on"` |
+| `lighting-color=(string 'off')`| (changed, warning)| `"off"` |
+| `lighting-color=(symbol)`| (initial, warning)| `<null>` |
+| `lighting-color=(function)`| (initial, warning)| `<null>` |
+| `lighting-color=(null)`| (initial, warning)| `<null>` |
+| `lighting-color=(undefined)`| (initial, warning)| `<null>` |
+
+## `lightingColor` (on `<feDiffuseLighting>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `lightingColor=(string)`| (changed)| `"a string"` |
+| `lightingColor=(empty string)`| (changed)| `<empty string>` |
+| `lightingColor=(array with string)`| (changed)| `"string"` |
+| `lightingColor=(empty array)`| (changed)| `<empty string>` |
+| `lightingColor=(object)`| (changed)| `"result of toString()"` |
+| `lightingColor=(numeric string)`| (changed)| `"42"` |
+| `lightingColor=(-1)`| (changed)| `"-1"` |
+| `lightingColor=(0)`| (changed)| `"0"` |
+| `lightingColor=(integer)`| (changed)| `"1"` |
+| `lightingColor=(NaN)`| (changed, warning)| `"NaN"` |
+| `lightingColor=(float)`| (changed)| `"99.99"` |
+| `lightingColor=(true)`| (initial, warning)| `<null>` |
+| `lightingColor=(false)`| (initial, warning)| `<null>` |
+| `lightingColor=(string 'true')`| (changed)| `"true"` |
+| `lightingColor=(string 'false')`| (changed)| `"false"` |
+| `lightingColor=(string 'on')`| (changed)| `"on"` |
+| `lightingColor=(string 'off')`| (changed)| `"off"` |
+| `lightingColor=(symbol)`| (initial, warning)| `<null>` |
+| `lightingColor=(function)`| (initial, warning)| `<null>` |
+| `lightingColor=(null)`| (initial)| `<null>` |
+| `lightingColor=(undefined)`| (initial)| `<null>` |
+
+## `limitingConeAngle` (on `<feSpotLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `limitingConeAngle=(string)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(empty string)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(array with string)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(empty array)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(object)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(numeric string)`| (changed)| `<number: 42>` |
+| `limitingConeAngle=(-1)`| (changed)| `<number: -1>` |
+| `limitingConeAngle=(0)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(integer)`| (changed)| `<number: 1>` |
+| `limitingConeAngle=(NaN)`| (initial, warning)| `<number: 0>` |
+| `limitingConeAngle=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `limitingConeAngle=(true)`| (initial, warning)| `<number: 0>` |
+| `limitingConeAngle=(false)`| (initial, warning)| `<number: 0>` |
+| `limitingConeAngle=(string 'true')`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(string 'false')`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(string 'on')`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(string 'off')`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(symbol)`| (initial, warning)| `<number: 0>` |
+| `limitingConeAngle=(function)`| (initial, warning)| `<number: 0>` |
+| `limitingConeAngle=(null)`| (initial)| `<number: 0>` |
+| `limitingConeAngle=(undefined)`| (initial)| `<number: 0>` |
+
+## `list` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `list=(string)`| (changed)| `"a string"` |
+| `list=(empty string)`| (changed)| `<empty string>` |
+| `list=(array with string)`| (changed)| `"string"` |
+| `list=(empty array)`| (changed)| `<empty string>` |
+| `list=(object)`| (changed)| `"result of toString()"` |
+| `list=(numeric string)`| (changed)| `"42"` |
+| `list=(-1)`| (changed)| `"-1"` |
+| `list=(0)`| (changed)| `"0"` |
+| `list=(integer)`| (changed)| `"1"` |
+| `list=(NaN)`| (changed, warning)| `"NaN"` |
+| `list=(float)`| (changed)| `"99.99"` |
+| `list=(true)`| (initial, warning)| `<null>` |
+| `list=(false)`| (initial, warning)| `<null>` |
+| `list=(string 'true')`| (changed)| `"true"` |
+| `list=(string 'false')`| (changed)| `"false"` |
+| `list=(string 'on')`| (changed)| `"on"` |
+| `list=(string 'off')`| (changed)| `"off"` |
+| `list=(symbol)`| (initial, warning)| `<null>` |
+| `list=(function)`| (initial, warning)| `<null>` |
+| `list=(null)`| (initial)| `<null>` |
+| `list=(undefined)`| (initial)| `<null>` |
+
+## `local` (on `<color-profile>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `local=(string)`| (changed)| `"a string"` |
+| `local=(empty string)`| (changed)| `<empty string>` |
+| `local=(array with string)`| (changed)| `"string"` |
+| `local=(empty array)`| (changed)| `<empty string>` |
+| `local=(object)`| (changed)| `"result of toString()"` |
+| `local=(numeric string)`| (changed)| `"42"` |
+| `local=(-1)`| (changed)| `"-1"` |
+| `local=(0)`| (changed)| `"0"` |
+| `local=(integer)`| (changed)| `"1"` |
+| `local=(NaN)`| (changed, warning)| `"NaN"` |
+| `local=(float)`| (changed)| `"99.99"` |
+| `local=(true)`| (initial, warning)| `<null>` |
+| `local=(false)`| (initial, warning)| `<null>` |
+| `local=(string 'true')`| (changed)| `"true"` |
+| `local=(string 'false')`| (changed)| `"false"` |
+| `local=(string 'on')`| (changed)| `"on"` |
+| `local=(string 'off')`| (changed)| `"off"` |
+| `local=(symbol)`| (initial, warning)| `<null>` |
+| `local=(function)`| (initial, warning)| `<null>` |
+| `local=(null)`| (initial)| `<null>` |
+| `local=(undefined)`| (initial)| `<null>` |
+
+## `loop` (on `<audio>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `loop=(string)`| (changed)| `<boolean: true>` |
+| `loop=(empty string)`| (initial)| `<boolean: false>` |
+| `loop=(array with string)`| (changed)| `<boolean: true>` |
+| `loop=(empty array)`| (changed)| `<boolean: true>` |
+| `loop=(object)`| (changed)| `<boolean: true>` |
+| `loop=(numeric string)`| (changed)| `<boolean: true>` |
+| `loop=(-1)`| (changed)| `<boolean: true>` |
+| `loop=(0)`| (initial)| `<boolean: false>` |
+| `loop=(integer)`| (changed)| `<boolean: true>` |
+| `loop=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `loop=(float)`| (changed)| `<boolean: true>` |
+| `loop=(true)`| (changed)| `<boolean: true>` |
+| `loop=(false)`| (initial)| `<boolean: false>` |
+| `loop=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `loop=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `loop=(string 'on')`| (changed)| `<boolean: true>` |
+| `loop=(string 'off')`| (changed)| `<boolean: true>` |
+| `loop=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `loop=(function)`| (initial, warning)| `<boolean: false>` |
+| `loop=(null)`| (initial)| `<boolean: false>` |
+| `loop=(undefined)`| (initial)| `<boolean: false>` |
+
+## `low` (on `<meter>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `low=(string)`| (initial)| `<number: 0>` |
+| `low=(empty string)`| (initial)| `<number: 0>` |
+| `low=(array with string)`| (initial)| `<number: 0>` |
+| `low=(empty array)`| (initial)| `<number: 0>` |
+| `low=(object)`| (initial)| `<number: 0>` |
+| `low=(numeric string)`| (changed)| `<number: 1>` |
+| `low=(-1)`| (initial)| `<number: 0>` |
+| `low=(0)`| (initial)| `<number: 0>` |
+| `low=(integer)`| (changed)| `<number: 1>` |
+| `low=(NaN)`| (initial, warning)| `<number: 0>` |
+| `low=(float)`| (changed)| `<number: 1>` |
+| `low=(true)`| (initial, warning)| `<number: 0>` |
+| `low=(false)`| (initial, warning)| `<number: 0>` |
+| `low=(string 'true')`| (initial)| `<number: 0>` |
+| `low=(string 'false')`| (initial)| `<number: 0>` |
+| `low=(string 'on')`| (initial)| `<number: 0>` |
+| `low=(string 'off')`| (initial)| `<number: 0>` |
+| `low=(symbol)`| (initial, warning)| `<number: 0>` |
+| `low=(function)`| (initial, warning)| `<number: 0>` |
+| `low=(null)`| (initial)| `<number: 0>` |
+| `low=(undefined)`| (initial)| `<number: 0>` |
+
+## `manifest` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `manifest=(string)`| (changed)| `"a string"` |
+| `manifest=(empty string)`| (changed)| `<empty string>` |
+| `manifest=(array with string)`| (changed)| `"string"` |
+| `manifest=(empty array)`| (changed)| `<empty string>` |
+| `manifest=(object)`| (changed)| `"result of toString()"` |
+| `manifest=(numeric string)`| (changed)| `"42"` |
+| `manifest=(-1)`| (changed)| `"-1"` |
+| `manifest=(0)`| (changed)| `"0"` |
+| `manifest=(integer)`| (changed)| `"1"` |
+| `manifest=(NaN)`| (changed, warning)| `"NaN"` |
+| `manifest=(float)`| (changed)| `"99.99"` |
+| `manifest=(true)`| (initial, warning)| `<null>` |
+| `manifest=(false)`| (initial, warning)| `<null>` |
+| `manifest=(string 'true')`| (changed)| `"true"` |
+| `manifest=(string 'false')`| (changed)| `"false"` |
+| `manifest=(string 'on')`| (changed)| `"on"` |
+| `manifest=(string 'off')`| (changed)| `"off"` |
+| `manifest=(symbol)`| (initial, warning)| `<null>` |
+| `manifest=(function)`| (initial, warning)| `<null>` |
+| `manifest=(null)`| (initial)| `<null>` |
+| `manifest=(undefined)`| (initial)| `<null>` |
+
+## `marginHeight` (on `<frame>` inside `<frameset>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `marginHeight=(string)`| (changed, ssr error, ssr mismatch)| `"a string"` |
+| `marginHeight=(empty string)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(array with string)`| (changed, ssr error, ssr mismatch)| `"string"` |
+| `marginHeight=(empty array)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
+| `marginHeight=(numeric string)`| (changed, ssr error, ssr mismatch)| `"42"` |
+| `marginHeight=(-1)`| (changed, ssr error, ssr mismatch)| `"-1"` |
+| `marginHeight=(0)`| (changed, ssr error, ssr mismatch)| `"0"` |
+| `marginHeight=(integer)`| (changed, ssr error, ssr mismatch)| `"1"` |
+| `marginHeight=(NaN)`| (changed, warning, ssr error, ssr mismatch)| `"NaN"` |
+| `marginHeight=(float)`| (changed, ssr error, ssr mismatch)| `"99.99"` |
+| `marginHeight=(true)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(false)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(string 'true')`| (changed, ssr error, ssr mismatch)| `"true"` |
+| `marginHeight=(string 'false')`| (changed, ssr error, ssr mismatch)| `"false"` |
+| `marginHeight=(string 'on')`| (changed, ssr error, ssr mismatch)| `"on"` |
+| `marginHeight=(string 'off')`| (changed, ssr error, ssr mismatch)| `"off"` |
+| `marginHeight=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(function)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(null)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginHeight=(undefined)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+
+## `marginWidth` (on `<frame>` inside `<frameset>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `marginWidth=(string)`| (changed, ssr error, ssr mismatch)| `"a string"` |
+| `marginWidth=(empty string)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(array with string)`| (changed, ssr error, ssr mismatch)| `"string"` |
+| `marginWidth=(empty array)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
+| `marginWidth=(numeric string)`| (changed, ssr error, ssr mismatch)| `"42"` |
+| `marginWidth=(-1)`| (changed, ssr error, ssr mismatch)| `"-1"` |
+| `marginWidth=(0)`| (changed, ssr error, ssr mismatch)| `"0"` |
+| `marginWidth=(integer)`| (changed, ssr error, ssr mismatch)| `"1"` |
+| `marginWidth=(NaN)`| (changed, warning, ssr error, ssr mismatch)| `"NaN"` |
+| `marginWidth=(float)`| (changed, ssr error, ssr mismatch)| `"99.99"` |
+| `marginWidth=(true)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(false)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(string 'true')`| (changed, ssr error, ssr mismatch)| `"true"` |
+| `marginWidth=(string 'false')`| (changed, ssr error, ssr mismatch)| `"false"` |
+| `marginWidth=(string 'on')`| (changed, ssr error, ssr mismatch)| `"on"` |
+| `marginWidth=(string 'off')`| (changed, ssr error, ssr mismatch)| `"off"` |
+| `marginWidth=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(function)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(null)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `marginWidth=(undefined)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+
+## `marker-end` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `marker-end=(string)`| (changed, warning)| `"a string"` |
+| `marker-end=(empty string)`| (changed, warning)| `<empty string>` |
+| `marker-end=(array with string)`| (changed, warning)| `"string"` |
+| `marker-end=(empty array)`| (changed, warning)| `<empty string>` |
+| `marker-end=(object)`| (changed, warning)| `"result of toString()"` |
+| `marker-end=(numeric string)`| (changed, warning)| `"42"` |
+| `marker-end=(-1)`| (changed, warning)| `"-1"` |
+| `marker-end=(0)`| (changed, warning)| `"0"` |
+| `marker-end=(integer)`| (changed, warning)| `"1"` |
+| `marker-end=(NaN)`| (changed, warning)| `"NaN"` |
+| `marker-end=(float)`| (changed, warning)| `"99.99"` |
+| `marker-end=(true)`| (initial, warning)| `<null>` |
+| `marker-end=(false)`| (initial, warning)| `<null>` |
+| `marker-end=(string 'true')`| (changed, warning)| `"true"` |
+| `marker-end=(string 'false')`| (changed, warning)| `"false"` |
+| `marker-end=(string 'on')`| (changed, warning)| `"on"` |
+| `marker-end=(string 'off')`| (changed, warning)| `"off"` |
+| `marker-end=(symbol)`| (initial, warning)| `<null>` |
+| `marker-end=(function)`| (initial, warning)| `<null>` |
+| `marker-end=(null)`| (initial, warning)| `<null>` |
+| `marker-end=(undefined)`| (initial, warning)| `<null>` |
+
+## `marker-mid` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `marker-mid=(string)`| (changed, warning)| `"a string"` |
+| `marker-mid=(empty string)`| (changed, warning)| `<empty string>` |
+| `marker-mid=(array with string)`| (changed, warning)| `"string"` |
+| `marker-mid=(empty array)`| (changed, warning)| `<empty string>` |
+| `marker-mid=(object)`| (changed, warning)| `"result of toString()"` |
+| `marker-mid=(numeric string)`| (changed, warning)| `"42"` |
+| `marker-mid=(-1)`| (changed, warning)| `"-1"` |
+| `marker-mid=(0)`| (changed, warning)| `"0"` |
+| `marker-mid=(integer)`| (changed, warning)| `"1"` |
+| `marker-mid=(NaN)`| (changed, warning)| `"NaN"` |
+| `marker-mid=(float)`| (changed, warning)| `"99.99"` |
+| `marker-mid=(true)`| (initial, warning)| `<null>` |
+| `marker-mid=(false)`| (initial, warning)| `<null>` |
+| `marker-mid=(string 'true')`| (changed, warning)| `"true"` |
+| `marker-mid=(string 'false')`| (changed, warning)| `"false"` |
+| `marker-mid=(string 'on')`| (changed, warning)| `"on"` |
+| `marker-mid=(string 'off')`| (changed, warning)| `"off"` |
+| `marker-mid=(symbol)`| (initial, warning)| `<null>` |
+| `marker-mid=(function)`| (initial, warning)| `<null>` |
+| `marker-mid=(null)`| (initial, warning)| `<null>` |
+| `marker-mid=(undefined)`| (initial, warning)| `<null>` |
+
+## `marker-start` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `marker-start=(string)`| (changed, warning)| `"a string"` |
+| `marker-start=(empty string)`| (changed, warning)| `<empty string>` |
+| `marker-start=(array with string)`| (changed, warning)| `"string"` |
+| `marker-start=(empty array)`| (changed, warning)| `<empty string>` |
+| `marker-start=(object)`| (changed, warning)| `"result of toString()"` |
+| `marker-start=(numeric string)`| (changed, warning)| `"42"` |
+| `marker-start=(-1)`| (changed, warning)| `"-1"` |
+| `marker-start=(0)`| (changed, warning)| `"0"` |
+| `marker-start=(integer)`| (changed, warning)| `"1"` |
+| `marker-start=(NaN)`| (changed, warning)| `"NaN"` |
+| `marker-start=(float)`| (changed, warning)| `"99.99"` |
+| `marker-start=(true)`| (initial, warning)| `<null>` |
+| `marker-start=(false)`| (initial, warning)| `<null>` |
+| `marker-start=(string 'true')`| (changed, warning)| `"true"` |
+| `marker-start=(string 'false')`| (changed, warning)| `"false"` |
+| `marker-start=(string 'on')`| (changed, warning)| `"on"` |
+| `marker-start=(string 'off')`| (changed, warning)| `"off"` |
+| `marker-start=(symbol)`| (initial, warning)| `<null>` |
+| `marker-start=(function)`| (initial, warning)| `<null>` |
+| `marker-start=(null)`| (initial, warning)| `<null>` |
+| `marker-start=(undefined)`| (initial, warning)| `<null>` |
+
+## `markerEnd` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `markerEnd=(string)`| (changed)| `"a string"` |
+| `markerEnd=(empty string)`| (changed)| `<empty string>` |
+| `markerEnd=(array with string)`| (changed)| `"string"` |
+| `markerEnd=(empty array)`| (changed)| `<empty string>` |
+| `markerEnd=(object)`| (changed)| `"result of toString()"` |
+| `markerEnd=(numeric string)`| (changed)| `"42"` |
+| `markerEnd=(-1)`| (changed)| `"-1"` |
+| `markerEnd=(0)`| (changed)| `"0"` |
+| `markerEnd=(integer)`| (changed)| `"1"` |
+| `markerEnd=(NaN)`| (changed, warning)| `"NaN"` |
+| `markerEnd=(float)`| (changed)| `"99.99"` |
+| `markerEnd=(true)`| (initial, warning)| `<null>` |
+| `markerEnd=(false)`| (initial, warning)| `<null>` |
+| `markerEnd=(string 'true')`| (changed)| `"true"` |
+| `markerEnd=(string 'false')`| (changed)| `"false"` |
+| `markerEnd=(string 'on')`| (changed)| `"on"` |
+| `markerEnd=(string 'off')`| (changed)| `"off"` |
+| `markerEnd=(symbol)`| (initial, warning)| `<null>` |
+| `markerEnd=(function)`| (initial, warning)| `<null>` |
+| `markerEnd=(null)`| (initial)| `<null>` |
+| `markerEnd=(undefined)`| (initial)| `<null>` |
+
+## `markerHeight` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `markerHeight=(string)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(empty string)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(array with string)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(empty array)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(object)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `markerHeight=(-1)`| (changed)| `<SVGLength: -1>` |
+| `markerHeight=(0)`| (changed)| `<SVGLength: 0>` |
+| `markerHeight=(integer)`| (changed)| `<SVGLength: 1>` |
+| `markerHeight=(NaN)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerHeight=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `markerHeight=(true)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerHeight=(false)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerHeight=(string 'true')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(string 'false')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(string 'on')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(string 'off')`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(symbol)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerHeight=(function)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerHeight=(null)`| (initial)| `<SVGLength: 3>` |
+| `markerHeight=(undefined)`| (initial)| `<SVGLength: 3>` |
+
+## `markerMid` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `markerMid=(string)`| (changed)| `"a string"` |
+| `markerMid=(empty string)`| (changed)| `<empty string>` |
+| `markerMid=(array with string)`| (changed)| `"string"` |
+| `markerMid=(empty array)`| (changed)| `<empty string>` |
+| `markerMid=(object)`| (changed)| `"result of toString()"` |
+| `markerMid=(numeric string)`| (changed)| `"42"` |
+| `markerMid=(-1)`| (changed)| `"-1"` |
+| `markerMid=(0)`| (changed)| `"0"` |
+| `markerMid=(integer)`| (changed)| `"1"` |
+| `markerMid=(NaN)`| (changed, warning)| `"NaN"` |
+| `markerMid=(float)`| (changed)| `"99.99"` |
+| `markerMid=(true)`| (initial, warning)| `<null>` |
+| `markerMid=(false)`| (initial, warning)| `<null>` |
+| `markerMid=(string 'true')`| (changed)| `"true"` |
+| `markerMid=(string 'false')`| (changed)| `"false"` |
+| `markerMid=(string 'on')`| (changed)| `"on"` |
+| `markerMid=(string 'off')`| (changed)| `"off"` |
+| `markerMid=(symbol)`| (initial, warning)| `<null>` |
+| `markerMid=(function)`| (initial, warning)| `<null>` |
+| `markerMid=(null)`| (initial)| `<null>` |
+| `markerMid=(undefined)`| (initial)| `<null>` |
+
+## `markerStart` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `markerStart=(string)`| (changed)| `"a string"` |
+| `markerStart=(empty string)`| (changed)| `<empty string>` |
+| `markerStart=(array with string)`| (changed)| `"string"` |
+| `markerStart=(empty array)`| (changed)| `<empty string>` |
+| `markerStart=(object)`| (changed)| `"result of toString()"` |
+| `markerStart=(numeric string)`| (changed)| `"42"` |
+| `markerStart=(-1)`| (changed)| `"-1"` |
+| `markerStart=(0)`| (changed)| `"0"` |
+| `markerStart=(integer)`| (changed)| `"1"` |
+| `markerStart=(NaN)`| (changed, warning)| `"NaN"` |
+| `markerStart=(float)`| (changed)| `"99.99"` |
+| `markerStart=(true)`| (initial, warning)| `<null>` |
+| `markerStart=(false)`| (initial, warning)| `<null>` |
+| `markerStart=(string 'true')`| (changed)| `"true"` |
+| `markerStart=(string 'false')`| (changed)| `"false"` |
+| `markerStart=(string 'on')`| (changed)| `"on"` |
+| `markerStart=(string 'off')`| (changed)| `"off"` |
+| `markerStart=(symbol)`| (initial, warning)| `<null>` |
+| `markerStart=(function)`| (initial, warning)| `<null>` |
+| `markerStart=(null)`| (initial)| `<null>` |
+| `markerStart=(undefined)`| (initial)| `<null>` |
+
+## `markerUnits` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `markerUnits=(string)`| (initial)| `<number: 2>` |
+| `markerUnits=(empty string)`| (initial)| `<number: 2>` |
+| `markerUnits=(array with string)`| (initial)| `<number: 2>` |
+| `markerUnits=(empty array)`| (initial)| `<number: 2>` |
+| `markerUnits=(object)`| (initial)| `<number: 2>` |
+| `markerUnits=(numeric string)`| (initial)| `<number: 2>` |
+| `markerUnits=(-1)`| (initial)| `<number: 2>` |
+| `markerUnits=(0)`| (initial)| `<number: 2>` |
+| `markerUnits=(integer)`| (initial)| `<number: 2>` |
+| `markerUnits=(NaN)`| (initial, warning)| `<number: 2>` |
+| `markerUnits=(float)`| (initial)| `<number: 2>` |
+| `markerUnits=(true)`| (initial, warning)| `<number: 2>` |
+| `markerUnits=(false)`| (initial, warning)| `<number: 2>` |
+| `markerUnits=(string 'true')`| (initial)| `<number: 2>` |
+| `markerUnits=(string 'false')`| (initial)| `<number: 2>` |
+| `markerUnits=(string 'on')`| (initial)| `<number: 2>` |
+| `markerUnits=(string 'off')`| (initial)| `<number: 2>` |
+| `markerUnits=(symbol)`| (initial, warning)| `<number: 2>` |
+| `markerUnits=(function)`| (initial, warning)| `<number: 2>` |
+| `markerUnits=(null)`| (initial)| `<number: 2>` |
+| `markerUnits=(undefined)`| (initial)| `<number: 2>` |
+
+## `markerWidth` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `markerWidth=(string)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(empty string)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(array with string)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(empty array)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(object)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `markerWidth=(-1)`| (changed)| `<SVGLength: -1>` |
+| `markerWidth=(0)`| (changed)| `<SVGLength: 0>` |
+| `markerWidth=(integer)`| (changed)| `<SVGLength: 1>` |
+| `markerWidth=(NaN)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerWidth=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `markerWidth=(true)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerWidth=(false)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerWidth=(string 'true')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(string 'false')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(string 'on')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(string 'off')`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(symbol)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerWidth=(function)`| (initial, warning)| `<SVGLength: 3>` |
+| `markerWidth=(null)`| (initial)| `<SVGLength: 3>` |
+| `markerWidth=(undefined)`| (initial)| `<SVGLength: 3>` |
+
+## `mask` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `mask=(string)`| (changed)| `"a string"` |
+| `mask=(empty string)`| (changed)| `<empty string>` |
+| `mask=(array with string)`| (changed)| `"string"` |
+| `mask=(empty array)`| (changed)| `<empty string>` |
+| `mask=(object)`| (changed)| `"result of toString()"` |
+| `mask=(numeric string)`| (changed)| `"42"` |
+| `mask=(-1)`| (changed)| `"-1"` |
+| `mask=(0)`| (changed)| `"0"` |
+| `mask=(integer)`| (changed)| `"1"` |
+| `mask=(NaN)`| (changed, warning)| `"NaN"` |
+| `mask=(float)`| (changed)| `"99.99"` |
+| `mask=(true)`| (initial, warning)| `<null>` |
+| `mask=(false)`| (initial, warning)| `<null>` |
+| `mask=(string 'true')`| (changed)| `"true"` |
+| `mask=(string 'false')`| (changed)| `"false"` |
+| `mask=(string 'on')`| (changed)| `"on"` |
+| `mask=(string 'off')`| (changed)| `"off"` |
+| `mask=(symbol)`| (initial, warning)| `<null>` |
+| `mask=(function)`| (initial, warning)| `<null>` |
+| `mask=(null)`| (initial)| `<null>` |
+| `mask=(undefined)`| (initial)| `<null>` |
+
+## `maskContentUnits` (on `<mask>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `maskContentUnits=(string)`| (changed)| `<number: 2>` |
+| `maskContentUnits=(empty string)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(array with string)`| (changed)| `<number: 2>` |
+| `maskContentUnits=(empty array)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(object)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(numeric string)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(-1)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(0)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(integer)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(NaN)`| (initial, warning)| `<number: 1>` |
+| `maskContentUnits=(float)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(true)`| (initial, warning)| `<number: 1>` |
+| `maskContentUnits=(false)`| (initial, warning)| `<number: 1>` |
+| `maskContentUnits=(string 'true')`| (initial)| `<number: 1>` |
+| `maskContentUnits=(string 'false')`| (initial)| `<number: 1>` |
+| `maskContentUnits=(string 'on')`| (initial)| `<number: 1>` |
+| `maskContentUnits=(string 'off')`| (initial)| `<number: 1>` |
+| `maskContentUnits=(symbol)`| (initial, warning)| `<number: 1>` |
+| `maskContentUnits=(function)`| (initial, warning)| `<number: 1>` |
+| `maskContentUnits=(null)`| (initial)| `<number: 1>` |
+| `maskContentUnits=(undefined)`| (initial)| `<number: 1>` |
+
+## `maskUnits` (on `<mask>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `maskUnits=(string)`| (changed)| `<number: 1>` |
+| `maskUnits=(empty string)`| (initial)| `<number: 2>` |
+| `maskUnits=(array with string)`| (changed)| `<number: 1>` |
+| `maskUnits=(empty array)`| (initial)| `<number: 2>` |
+| `maskUnits=(object)`| (initial)| `<number: 2>` |
+| `maskUnits=(numeric string)`| (initial)| `<number: 2>` |
+| `maskUnits=(-1)`| (initial)| `<number: 2>` |
+| `maskUnits=(0)`| (initial)| `<number: 2>` |
+| `maskUnits=(integer)`| (initial)| `<number: 2>` |
+| `maskUnits=(NaN)`| (initial, warning)| `<number: 2>` |
+| `maskUnits=(float)`| (initial)| `<number: 2>` |
+| `maskUnits=(true)`| (initial, warning)| `<number: 2>` |
+| `maskUnits=(false)`| (initial, warning)| `<number: 2>` |
+| `maskUnits=(string 'true')`| (initial)| `<number: 2>` |
+| `maskUnits=(string 'false')`| (initial)| `<number: 2>` |
+| `maskUnits=(string 'on')`| (initial)| `<number: 2>` |
+| `maskUnits=(string 'off')`| (initial)| `<number: 2>` |
+| `maskUnits=(symbol)`| (initial, warning)| `<number: 2>` |
+| `maskUnits=(function)`| (initial, warning)| `<number: 2>` |
+| `maskUnits=(null)`| (initial)| `<number: 2>` |
+| `maskUnits=(undefined)`| (initial)| `<number: 2>` |
+
+## `mathematical` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `mathematical=(string)`| (changed)| `"a string"` |
+| `mathematical=(empty string)`| (changed)| `<empty string>` |
+| `mathematical=(array with string)`| (changed)| `"string"` |
+| `mathematical=(empty array)`| (changed)| `<empty string>` |
+| `mathematical=(object)`| (changed)| `"result of toString()"` |
+| `mathematical=(numeric string)`| (changed)| `"42"` |
+| `mathematical=(-1)`| (changed)| `"-1"` |
+| `mathematical=(0)`| (changed)| `"0"` |
+| `mathematical=(integer)`| (changed)| `"1"` |
+| `mathematical=(NaN)`| (changed, warning)| `"NaN"` |
+| `mathematical=(float)`| (changed)| `"99.99"` |
+| `mathematical=(true)`| (initial, warning)| `<null>` |
+| `mathematical=(false)`| (initial, warning)| `<null>` |
+| `mathematical=(string 'true')`| (changed)| `"true"` |
+| `mathematical=(string 'false')`| (changed)| `"false"` |
+| `mathematical=(string 'on')`| (changed)| `"on"` |
+| `mathematical=(string 'off')`| (changed)| `"off"` |
+| `mathematical=(symbol)`| (initial, warning)| `<null>` |
+| `mathematical=(function)`| (initial, warning)| `<null>` |
+| `mathematical=(null)`| (initial)| `<null>` |
+| `mathematical=(undefined)`| (initial)| `<null>` |
+
+## `max` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `max=(string)`| (changed)| `"a string"` |
+| `max=(empty string)`| (initial)| `<empty string>` |
+| `max=(array with string)`| (changed)| `"string"` |
+| `max=(empty array)`| (initial)| `<empty string>` |
+| `max=(object)`| (changed)| `"result of toString()"` |
+| `max=(numeric string)`| (changed)| `"42"` |
+| `max=(-1)`| (changed)| `"-1"` |
+| `max=(0)`| (changed)| `"0"` |
+| `max=(integer)`| (changed)| `"1"` |
+| `max=(NaN)`| (changed, warning)| `"NaN"` |
+| `max=(float)`| (changed)| `"99.99"` |
+| `max=(true)`| (initial, warning)| `<empty string>` |
+| `max=(false)`| (initial, warning)| `<empty string>` |
+| `max=(string 'true')`| (changed)| `"true"` |
+| `max=(string 'false')`| (changed)| `"false"` |
+| `max=(string 'on')`| (changed)| `"on"` |
+| `max=(string 'off')`| (changed)| `"off"` |
+| `max=(symbol)`| (initial, warning)| `<empty string>` |
+| `max=(function)`| (initial, warning)| `<empty string>` |
+| `max=(null)`| (initial)| `<empty string>` |
+| `max=(undefined)`| (initial)| `<empty string>` |
+
+## `max` (on `<meter>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `max=(string)`| (initial)| `<number: 1>` |
+| `max=(empty string)`| (initial)| `<number: 1>` |
+| `max=(array with string)`| (initial)| `<number: 1>` |
+| `max=(empty array)`| (initial)| `<number: 1>` |
+| `max=(object)`| (initial)| `<number: 1>` |
+| `max=(numeric string)`| (changed)| `<number: 42>` |
+| `max=(-1)`| (changed)| `<number: 0>` |
+| `max=(0)`| (changed)| `<number: 0>` |
+| `max=(integer)`| (initial)| `<number: 1>` |
+| `max=(NaN)`| (initial, warning)| `<number: 1>` |
+| `max=(float)`| (changed)| `<number: 99.99>` |
+| `max=(true)`| (initial, warning)| `<number: 1>` |
+| `max=(false)`| (initial, warning)| `<number: 1>` |
+| `max=(string 'true')`| (initial)| `<number: 1>` |
+| `max=(string 'false')`| (initial)| `<number: 1>` |
+| `max=(string 'on')`| (initial)| `<number: 1>` |
+| `max=(string 'off')`| (initial)| `<number: 1>` |
+| `max=(symbol)`| (initial, warning)| `<number: 1>` |
+| `max=(function)`| (initial, warning)| `<number: 1>` |
+| `max=(null)`| (initial)| `<number: 1>` |
+| `max=(undefined)`| (initial)| `<number: 1>` |
+
+## `max` (on `<progress>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `max=(string)`| (initial)| `<number: 1>` |
+| `max=(empty string)`| (initial)| `<number: 1>` |
+| `max=(array with string)`| (initial)| `<number: 1>` |
+| `max=(empty array)`| (initial)| `<number: 1>` |
+| `max=(object)`| (initial)| `<number: 1>` |
+| `max=(numeric string)`| (changed)| `<number: 42>` |
+| `max=(-1)`| (initial)| `<number: 1>` |
+| `max=(0)`| (initial)| `<number: 1>` |
+| `max=(integer)`| (initial)| `<number: 1>` |
+| `max=(NaN)`| (initial, warning)| `<number: 1>` |
+| `max=(float)`| (changed)| `<number: 99.99>` |
+| `max=(true)`| (initial, warning)| `<number: 1>` |
+| `max=(false)`| (initial, warning)| `<number: 1>` |
+| `max=(string 'true')`| (initial)| `<number: 1>` |
+| `max=(string 'false')`| (initial)| `<number: 1>` |
+| `max=(string 'on')`| (initial)| `<number: 1>` |
+| `max=(string 'off')`| (initial)| `<number: 1>` |
+| `max=(symbol)`| (initial, warning)| `<number: 1>` |
+| `max=(function)`| (initial, warning)| `<number: 1>` |
+| `max=(null)`| (initial)| `<number: 1>` |
+| `max=(undefined)`| (initial)| `<number: 1>` |
+
+## `max` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `max=(string)`| (changed)| `"a string"` |
+| `max=(empty string)`| (changed)| `<empty string>` |
+| `max=(array with string)`| (changed)| `"string"` |
+| `max=(empty array)`| (changed)| `<empty string>` |
+| `max=(object)`| (changed)| `"result of toString()"` |
+| `max=(numeric string)`| (changed)| `"42"` |
+| `max=(-1)`| (changed)| `"-1"` |
+| `max=(0)`| (changed)| `"0"` |
+| `max=(integer)`| (changed)| `"1"` |
+| `max=(NaN)`| (changed, warning)| `"NaN"` |
+| `max=(float)`| (changed)| `"99.99"` |
+| `max=(true)`| (initial, warning)| `<null>` |
+| `max=(false)`| (initial, warning)| `<null>` |
+| `max=(string 'true')`| (changed)| `"true"` |
+| `max=(string 'false')`| (changed)| `"false"` |
+| `max=(string 'on')`| (changed)| `"on"` |
+| `max=(string 'off')`| (changed)| `"off"` |
+| `max=(symbol)`| (initial, warning)| `<null>` |
+| `max=(function)`| (initial, warning)| `<null>` |
+| `max=(null)`| (initial)| `<null>` |
+| `max=(undefined)`| (initial)| `<null>` |
+
+## `maxLength` (on `<textarea>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `maxLength=(string)`| (initial)| `<number: -1>` |
+| `maxLength=(empty string)`| (initial)| `<number: -1>` |
+| `maxLength=(array with string)`| (initial)| `<number: -1>` |
+| `maxLength=(empty array)`| (initial)| `<number: -1>` |
+| `maxLength=(object)`| (initial)| `<number: -1>` |
+| `maxLength=(numeric string)`| (changed)| `<number: 42>` |
+| `maxLength=(-1)`| (initial)| `<number: -1>` |
+| `maxLength=(0)`| (changed)| `<number: 0>` |
+| `maxLength=(integer)`| (changed)| `<number: 1>` |
+| `maxLength=(NaN)`| (initial, warning)| `<number: -1>` |
+| `maxLength=(float)`| (changed)| `<number: 99>` |
+| `maxLength=(true)`| (initial, warning)| `<number: -1>` |
+| `maxLength=(false)`| (initial, warning)| `<number: -1>` |
+| `maxLength=(string 'true')`| (initial)| `<number: -1>` |
+| `maxLength=(string 'false')`| (initial)| `<number: -1>` |
+| `maxLength=(string 'on')`| (initial)| `<number: -1>` |
+| `maxLength=(string 'off')`| (initial)| `<number: -1>` |
+| `maxLength=(symbol)`| (initial, warning)| `<number: -1>` |
+| `maxLength=(function)`| (initial, warning)| `<number: -1>` |
+| `maxLength=(null)`| (initial)| `<number: -1>` |
+| `maxLength=(undefined)`| (initial)| `<number: -1>` |
+
+## `media` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `media=(string)`| (changed)| `"a string"` |
+| `media=(empty string)`| (initial)| `<empty string>` |
+| `media=(array with string)`| (changed)| `"string"` |
+| `media=(empty array)`| (initial)| `<empty string>` |
+| `media=(object)`| (changed)| `"result of toString()"` |
+| `media=(numeric string)`| (changed)| `"42"` |
+| `media=(-1)`| (changed)| `"-1"` |
+| `media=(0)`| (changed)| `"0"` |
+| `media=(integer)`| (changed)| `"1"` |
+| `media=(NaN)`| (changed, warning)| `"NaN"` |
+| `media=(float)`| (changed)| `"99.99"` |
+| `media=(true)`| (initial, warning)| `<empty string>` |
+| `media=(false)`| (initial, warning)| `<empty string>` |
+| `media=(string 'true')`| (changed)| `"true"` |
+| `media=(string 'false')`| (changed)| `"false"` |
+| `media=(string 'on')`| (changed)| `"on"` |
+| `media=(string 'off')`| (changed)| `"off"` |
+| `media=(symbol)`| (initial, warning)| `<empty string>` |
+| `media=(function)`| (initial, warning)| `<empty string>` |
+| `media=(null)`| (initial)| `<empty string>` |
+| `media=(undefined)`| (initial)| `<empty string>` |
+
+## `media` (on `<style>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `media=(string)`| (changed)| `"a string"` |
+| `media=(empty string)`| (changed)| `<empty string>` |
+| `media=(array with string)`| (changed)| `"string"` |
+| `media=(empty array)`| (changed)| `<empty string>` |
+| `media=(object)`| (changed)| `"result of toString()"` |
+| `media=(numeric string)`| (changed)| `"42"` |
+| `media=(-1)`| (changed)| `"-1"` |
+| `media=(0)`| (changed)| `"0"` |
+| `media=(integer)`| (changed)| `"1"` |
+| `media=(NaN)`| (changed, warning)| `"NaN"` |
+| `media=(float)`| (changed)| `"99.99"` |
+| `media=(true)`| (initial, warning)| `"all"` |
+| `media=(false)`| (initial, warning)| `"all"` |
+| `media=(string 'true')`| (changed)| `"true"` |
+| `media=(string 'false')`| (changed)| `"false"` |
+| `media=(string 'on')`| (changed)| `"on"` |
+| `media=(string 'off')`| (changed)| `"off"` |
+| `media=(symbol)`| (initial, warning)| `"all"` |
+| `media=(function)`| (initial, warning)| `"all"` |
+| `media=(null)`| (initial)| `"all"` |
+| `media=(undefined)`| (initial)| `"all"` |
+
+## `mediaGroup` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `mediaGroup=(string)`| (changed)| `"a string"` |
+| `mediaGroup=(empty string)`| (changed)| `<empty string>` |
+| `mediaGroup=(array with string)`| (changed)| `"string"` |
+| `mediaGroup=(empty array)`| (changed)| `<empty string>` |
+| `mediaGroup=(object)`| (changed)| `"result of toString()"` |
+| `mediaGroup=(numeric string)`| (changed)| `"42"` |
+| `mediaGroup=(-1)`| (changed)| `"-1"` |
+| `mediaGroup=(0)`| (changed)| `"0"` |
+| `mediaGroup=(integer)`| (changed)| `"1"` |
+| `mediaGroup=(NaN)`| (changed, warning)| `"NaN"` |
+| `mediaGroup=(float)`| (changed)| `"99.99"` |
+| `mediaGroup=(true)`| (initial, warning)| `<null>` |
+| `mediaGroup=(false)`| (initial, warning)| `<null>` |
+| `mediaGroup=(string 'true')`| (changed)| `"true"` |
+| `mediaGroup=(string 'false')`| (changed)| `"false"` |
+| `mediaGroup=(string 'on')`| (changed)| `"on"` |
+| `mediaGroup=(string 'off')`| (changed)| `"off"` |
+| `mediaGroup=(symbol)`| (initial, warning)| `<null>` |
+| `mediaGroup=(function)`| (initial, warning)| `<null>` |
+| `mediaGroup=(null)`| (initial)| `<null>` |
+| `mediaGroup=(undefined)`| (initial)| `<null>` |
+
+## `method` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `method=(string)`| (changed)| `"post"` |
+| `method=(empty string)`| (initial)| `"get"` |
+| `method=(array with string)`| (changed)| `"post"` |
+| `method=(empty array)`| (initial)| `"get"` |
+| `method=(object)`| (initial)| `"get"` |
+| `method=(numeric string)`| (initial)| `"get"` |
+| `method=(-1)`| (initial)| `"get"` |
+| `method=(0)`| (initial)| `"get"` |
+| `method=(integer)`| (initial)| `"get"` |
+| `method=(NaN)`| (initial, warning)| `"get"` |
+| `method=(float)`| (initial)| `"get"` |
+| `method=(true)`| (initial, warning)| `"get"` |
+| `method=(false)`| (initial, warning)| `"get"` |
+| `method=(string 'true')`| (initial)| `"get"` |
+| `method=(string 'false')`| (initial)| `"get"` |
+| `method=(string 'on')`| (initial)| `"get"` |
+| `method=(string 'off')`| (initial)| `"get"` |
+| `method=(symbol)`| (initial, warning)| `"get"` |
+| `method=(function)`| (initial, warning)| `"get"` |
+| `method=(null)`| (initial)| `"get"` |
+| `method=(undefined)`| (initial)| `"get"` |
+
+## `method` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `method=(string)`| (changed)| `<number: 2>` |
+| `method=(empty string)`| (initial)| `<number: 1>` |
+| `method=(array with string)`| (changed)| `<number: 2>` |
+| `method=(empty array)`| (initial)| `<number: 1>` |
+| `method=(object)`| (initial)| `<number: 1>` |
+| `method=(numeric string)`| (initial)| `<number: 1>` |
+| `method=(-1)`| (initial)| `<number: 1>` |
+| `method=(0)`| (initial)| `<number: 1>` |
+| `method=(integer)`| (initial)| `<number: 1>` |
+| `method=(NaN)`| (initial, warning)| `<number: 1>` |
+| `method=(float)`| (initial)| `<number: 1>` |
+| `method=(true)`| (initial, warning)| `<number: 1>` |
+| `method=(false)`| (initial, warning)| `<number: 1>` |
+| `method=(string 'true')`| (initial)| `<number: 1>` |
+| `method=(string 'false')`| (initial)| `<number: 1>` |
+| `method=(string 'on')`| (initial)| `<number: 1>` |
+| `method=(string 'off')`| (initial)| `<number: 1>` |
+| `method=(symbol)`| (initial, warning)| `<number: 1>` |
+| `method=(function)`| (initial, warning)| `<number: 1>` |
+| `method=(null)`| (initial)| `<number: 1>` |
+| `method=(undefined)`| (initial)| `<number: 1>` |
+
+## `min` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `min=(string)`| (changed)| `"a string"` |
+| `min=(empty string)`| (initial)| `<empty string>` |
+| `min=(array with string)`| (changed)| `"string"` |
+| `min=(empty array)`| (initial)| `<empty string>` |
+| `min=(object)`| (changed)| `"result of toString()"` |
+| `min=(numeric string)`| (changed)| `"42"` |
+| `min=(-1)`| (changed)| `"-1"` |
+| `min=(0)`| (changed)| `"0"` |
+| `min=(integer)`| (changed)| `"1"` |
+| `min=(NaN)`| (changed, warning)| `"NaN"` |
+| `min=(float)`| (changed)| `"99.99"` |
+| `min=(true)`| (initial, warning)| `<empty string>` |
+| `min=(false)`| (initial, warning)| `<empty string>` |
+| `min=(string 'true')`| (changed)| `"true"` |
+| `min=(string 'false')`| (changed)| `"false"` |
+| `min=(string 'on')`| (changed)| `"on"` |
+| `min=(string 'off')`| (changed)| `"off"` |
+| `min=(symbol)`| (initial, warning)| `<empty string>` |
+| `min=(function)`| (initial, warning)| `<empty string>` |
+| `min=(null)`| (initial)| `<empty string>` |
+| `min=(undefined)`| (initial)| `<empty string>` |
+
+## `min` (on `<meter>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `min=(string)`| (initial)| `<number: 0>` |
+| `min=(empty string)`| (initial)| `<number: 0>` |
+| `min=(array with string)`| (initial)| `<number: 0>` |
+| `min=(empty array)`| (initial)| `<number: 0>` |
+| `min=(object)`| (initial)| `<number: 0>` |
+| `min=(numeric string)`| (changed)| `<number: 42>` |
+| `min=(-1)`| (changed)| `<number: -1>` |
+| `min=(0)`| (initial)| `<number: 0>` |
+| `min=(integer)`| (changed)| `<number: 1>` |
+| `min=(NaN)`| (initial, warning)| `<number: 0>` |
+| `min=(float)`| (changed)| `<number: 99.99>` |
+| `min=(true)`| (initial, warning)| `<number: 0>` |
+| `min=(false)`| (initial, warning)| `<number: 0>` |
+| `min=(string 'true')`| (initial)| `<number: 0>` |
+| `min=(string 'false')`| (initial)| `<number: 0>` |
+| `min=(string 'on')`| (initial)| `<number: 0>` |
+| `min=(string 'off')`| (initial)| `<number: 0>` |
+| `min=(symbol)`| (initial, warning)| `<number: 0>` |
+| `min=(function)`| (initial, warning)| `<number: 0>` |
+| `min=(null)`| (initial)| `<number: 0>` |
+| `min=(undefined)`| (initial)| `<number: 0>` |
+
+## `min` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `min=(string)`| (changed)| `"a string"` |
+| `min=(empty string)`| (changed)| `<empty string>` |
+| `min=(array with string)`| (changed)| `"string"` |
+| `min=(empty array)`| (changed)| `<empty string>` |
+| `min=(object)`| (changed)| `"result of toString()"` |
+| `min=(numeric string)`| (changed)| `"42"` |
+| `min=(-1)`| (changed)| `"-1"` |
+| `min=(0)`| (changed)| `"0"` |
+| `min=(integer)`| (changed)| `"1"` |
+| `min=(NaN)`| (changed, warning)| `"NaN"` |
+| `min=(float)`| (changed)| `"99.99"` |
+| `min=(true)`| (initial, warning)| `<null>` |
+| `min=(false)`| (initial, warning)| `<null>` |
+| `min=(string 'true')`| (changed)| `"true"` |
+| `min=(string 'false')`| (changed)| `"false"` |
+| `min=(string 'on')`| (changed)| `"on"` |
+| `min=(string 'off')`| (changed)| `"off"` |
+| `min=(symbol)`| (initial, warning)| `<null>` |
+| `min=(function)`| (initial, warning)| `<null>` |
+| `min=(null)`| (initial)| `<null>` |
+| `min=(undefined)`| (initial)| `<null>` |
+
+## `minLength` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `minLength=(string)`| (initial)| `<number: -1>` |
+| `minLength=(empty string)`| (initial)| `<number: -1>` |
+| `minLength=(array with string)`| (initial)| `<number: -1>` |
+| `minLength=(empty array)`| (initial)| `<number: -1>` |
+| `minLength=(object)`| (initial)| `<number: -1>` |
+| `minLength=(numeric string)`| (changed)| `<number: 42>` |
+| `minLength=(-1)`| (initial)| `<number: -1>` |
+| `minLength=(0)`| (changed)| `<number: 0>` |
+| `minLength=(integer)`| (changed)| `<number: 1>` |
+| `minLength=(NaN)`| (initial, warning)| `<number: -1>` |
+| `minLength=(float)`| (changed)| `<number: 99>` |
+| `minLength=(true)`| (initial, warning)| `<number: -1>` |
+| `minLength=(false)`| (initial, warning)| `<number: -1>` |
+| `minLength=(string 'true')`| (initial)| `<number: -1>` |
+| `minLength=(string 'false')`| (initial)| `<number: -1>` |
+| `minLength=(string 'on')`| (initial)| `<number: -1>` |
+| `minLength=(string 'off')`| (initial)| `<number: -1>` |
+| `minLength=(symbol)`| (initial, warning)| `<number: -1>` |
+| `minLength=(function)`| (initial, warning)| `<number: -1>` |
+| `minLength=(null)`| (initial)| `<number: -1>` |
+| `minLength=(undefined)`| (initial)| `<number: -1>` |
+
+## `mode` (on `<feBlend>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `mode=(string)`| (changed)| `<number: 2>` |
+| `mode=(empty string)`| (initial)| `<number: 1>` |
+| `mode=(array with string)`| (changed)| `<number: 2>` |
+| `mode=(empty array)`| (initial)| `<number: 1>` |
+| `mode=(object)`| (initial)| `<number: 1>` |
+| `mode=(numeric string)`| (initial)| `<number: 1>` |
+| `mode=(-1)`| (initial)| `<number: 1>` |
+| `mode=(0)`| (initial)| `<number: 1>` |
+| `mode=(integer)`| (initial)| `<number: 1>` |
+| `mode=(NaN)`| (initial, warning)| `<number: 1>` |
+| `mode=(float)`| (initial)| `<number: 1>` |
+| `mode=(true)`| (initial, warning)| `<number: 1>` |
+| `mode=(false)`| (initial, warning)| `<number: 1>` |
+| `mode=(string 'true')`| (initial)| `<number: 1>` |
+| `mode=(string 'false')`| (initial)| `<number: 1>` |
+| `mode=(string 'on')`| (initial)| `<number: 1>` |
+| `mode=(string 'off')`| (initial)| `<number: 1>` |
+| `mode=(symbol)`| (initial, warning)| `<number: 1>` |
+| `mode=(function)`| (initial, warning)| `<number: 1>` |
+| `mode=(null)`| (initial)| `<number: 1>` |
+| `mode=(undefined)`| (initial)| `<number: 1>` |
+
+## `multiple` (on `<select>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `multiple=(string)`| (changed)| `<boolean: true>` |
+| `multiple=(empty string)`| (initial)| `<boolean: false>` |
+| `multiple=(array with string)`| (changed)| `<boolean: true>` |
+| `multiple=(empty array)`| (changed)| `<boolean: true>` |
+| `multiple=(object)`| (changed)| `<boolean: true>` |
+| `multiple=(numeric string)`| (changed)| `<boolean: true>` |
+| `multiple=(-1)`| (changed)| `<boolean: true>` |
+| `multiple=(0)`| (initial)| `<boolean: false>` |
+| `multiple=(integer)`| (changed)| `<boolean: true>` |
+| `multiple=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `multiple=(float)`| (changed)| `<boolean: true>` |
+| `multiple=(true)`| (changed)| `<boolean: true>` |
+| `multiple=(false)`| (initial)| `<boolean: false>` |
+| `multiple=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `multiple=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `multiple=(string 'on')`| (changed)| `<boolean: true>` |
+| `multiple=(string 'off')`| (changed)| `<boolean: true>` |
+| `multiple=(symbol)`| (changed, warning, ssr mismatch)| `<boolean: true>` |
+| `multiple=(function)`| (changed, warning, ssr mismatch)| `<boolean: true>` |
+| `multiple=(null)`| (initial)| `<boolean: false>` |
+| `multiple=(undefined)`| (initial)| `<boolean: false>` |
+
+## `muted` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `muted=(string)`| (changed)| `<boolean: true>` |
+| `muted=(empty string)`| (initial)| `<boolean: false>` |
+| `muted=(array with string)`| (changed)| `<boolean: true>` |
+| `muted=(empty array)`| (changed)| `<boolean: true>` |
+| `muted=(object)`| (changed)| `<boolean: true>` |
+| `muted=(numeric string)`| (changed)| `<boolean: true>` |
+| `muted=(-1)`| (changed)| `<boolean: true>` |
+| `muted=(0)`| (initial)| `<boolean: false>` |
+| `muted=(integer)`| (changed)| `<boolean: true>` |
+| `muted=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `muted=(float)`| (changed)| `<boolean: true>` |
+| `muted=(true)`| (changed)| `<boolean: true>` |
+| `muted=(false)`| (initial)| `<boolean: false>` |
+| `muted=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `muted=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `muted=(string 'on')`| (changed)| `<boolean: true>` |
+| `muted=(string 'off')`| (changed)| `<boolean: true>` |
+| `muted=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `muted=(function)`| (initial, warning)| `<boolean: false>` |
+| `muted=(null)`| (initial)| `<boolean: false>` |
+| `muted=(undefined)`| (initial)| `<boolean: false>` |
+
+## `name` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `name=(string)`| (changed)| `"a string"` |
+| `name=(empty string)`| (initial)| `<empty string>` |
+| `name=(array with string)`| (changed)| `"string"` |
+| `name=(empty array)`| (initial)| `<empty string>` |
+| `name=(object)`| (changed)| `"result of toString()"` |
+| `name=(numeric string)`| (changed)| `"42"` |
+| `name=(-1)`| (changed)| `"-1"` |
+| `name=(0)`| (changed)| `"0"` |
+| `name=(integer)`| (changed)| `"1"` |
+| `name=(NaN)`| (changed, warning)| `"NaN"` |
+| `name=(float)`| (changed)| `"99.99"` |
+| `name=(true)`| (initial, warning)| `<empty string>` |
+| `name=(false)`| (initial, warning)| `<empty string>` |
+| `name=(string 'true')`| (changed)| `"true"` |
+| `name=(string 'false')`| (changed)| `"false"` |
+| `name=(string 'on')`| (changed)| `"on"` |
+| `name=(string 'off')`| (changed)| `"off"` |
+| `name=(symbol)`| (initial, warning)| `<empty string>` |
+| `name=(function)`| (initial, warning)| `<empty string>` |
+| `name=(null)`| (initial)| `<empty string>` |
+| `name=(undefined)`| (initial)| `<empty string>` |
+
+## `name` (on `<color-profile>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `name=(string)`| (initial)| `<null>` |
+| `name=(empty string)`| (initial)| `<null>` |
+| `name=(array with string)`| (initial)| `<null>` |
+| `name=(empty array)`| (initial)| `<null>` |
+| `name=(object)`| (initial)| `<null>` |
+| `name=(numeric string)`| (initial)| `<null>` |
+| `name=(-1)`| (initial)| `<null>` |
+| `name=(0)`| (initial)| `<null>` |
+| `name=(integer)`| (initial)| `<null>` |
+| `name=(NaN)`| (initial, warning)| `<null>` |
+| `name=(float)`| (initial)| `<null>` |
+| `name=(true)`| (initial, warning)| `<null>` |
+| `name=(false)`| (initial, warning)| `<null>` |
+| `name=(string 'true')`| (initial)| `<null>` |
+| `name=(string 'false')`| (initial)| `<null>` |
+| `name=(string 'on')`| (initial)| `<null>` |
+| `name=(string 'off')`| (initial)| `<null>` |
+| `name=(symbol)`| (initial, warning)| `<null>` |
+| `name=(function)`| (initial, warning)| `<null>` |
+| `name=(null)`| (initial)| `<null>` |
+| `name=(undefined)`| (initial)| `<null>` |
+
+## `noModule` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `noModule=(string)`| (changed)| `<boolean: true>` |
+| `noModule=(empty string)`| (initial)| `<boolean: false>` |
+| `noModule=(array with string)`| (changed)| `<boolean: true>` |
+| `noModule=(empty array)`| (changed)| `<boolean: true>` |
+| `noModule=(object)`| (changed)| `<boolean: true>` |
+| `noModule=(numeric string)`| (changed)| `<boolean: true>` |
+| `noModule=(-1)`| (changed)| `<boolean: true>` |
+| `noModule=(0)`| (initial)| `<boolean: false>` |
+| `noModule=(integer)`| (changed)| `<boolean: true>` |
+| `noModule=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `noModule=(float)`| (changed)| `<boolean: true>` |
+| `noModule=(true)`| (changed)| `<boolean: true>` |
+| `noModule=(false)`| (initial)| `<boolean: false>` |
+| `noModule=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `noModule=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `noModule=(string 'on')`| (changed)| `<boolean: true>` |
+| `noModule=(string 'off')`| (changed)| `<boolean: true>` |
+| `noModule=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `noModule=(function)`| (initial, warning)| `<boolean: false>` |
+| `noModule=(null)`| (initial)| `<boolean: false>` |
+| `noModule=(undefined)`| (initial)| `<boolean: false>` |
+
+## `nonce` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `nonce=(string)`| (changed)| `"a string"` |
+| `nonce=(empty string)`| (changed)| `<empty string>` |
+| `nonce=(array with string)`| (changed)| `"string"` |
+| `nonce=(empty array)`| (changed)| `<empty string>` |
+| `nonce=(object)`| (changed)| `"result of toString()"` |
+| `nonce=(numeric string)`| (changed)| `"42"` |
+| `nonce=(-1)`| (changed)| `"-1"` |
+| `nonce=(0)`| (changed)| `"0"` |
+| `nonce=(integer)`| (changed)| `"1"` |
+| `nonce=(NaN)`| (changed, warning)| `"NaN"` |
+| `nonce=(float)`| (changed)| `"99.99"` |
+| `nonce=(true)`| (initial, warning)| `<null>` |
+| `nonce=(false)`| (initial, warning)| `<null>` |
+| `nonce=(string 'true')`| (changed)| `"true"` |
+| `nonce=(string 'false')`| (changed)| `"false"` |
+| `nonce=(string 'on')`| (changed)| `"on"` |
+| `nonce=(string 'off')`| (changed)| `"off"` |
+| `nonce=(symbol)`| (initial, warning)| `<null>` |
+| `nonce=(function)`| (initial, warning)| `<null>` |
+| `nonce=(null)`| (initial)| `<null>` |
+| `nonce=(undefined)`| (initial)| `<null>` |
+
+## `noValidate` (on `<form>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `noValidate=(string)`| (changed)| `<boolean: true>` |
+| `noValidate=(empty string)`| (initial)| `<boolean: false>` |
+| `noValidate=(array with string)`| (changed)| `<boolean: true>` |
+| `noValidate=(empty array)`| (changed)| `<boolean: true>` |
+| `noValidate=(object)`| (changed)| `<boolean: true>` |
+| `noValidate=(numeric string)`| (changed)| `<boolean: true>` |
+| `noValidate=(-1)`| (changed)| `<boolean: true>` |
+| `noValidate=(0)`| (initial)| `<boolean: false>` |
+| `noValidate=(integer)`| (changed)| `<boolean: true>` |
+| `noValidate=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `noValidate=(float)`| (changed)| `<boolean: true>` |
+| `noValidate=(true)`| (changed)| `<boolean: true>` |
+| `noValidate=(false)`| (initial)| `<boolean: false>` |
+| `noValidate=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `noValidate=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `noValidate=(string 'on')`| (changed)| `<boolean: true>` |
+| `noValidate=(string 'off')`| (changed)| `<boolean: true>` |
+| `noValidate=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `noValidate=(function)`| (initial, warning)| `<boolean: false>` |
+| `noValidate=(null)`| (initial)| `<boolean: false>` |
+| `noValidate=(undefined)`| (initial)| `<boolean: false>` |
+
+## `numOctaves` (on `<feTurbulence>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `numOctaves=(string)`| (initial)| `<number: 1>` |
+| `numOctaves=(empty string)`| (changed)| `<number: 0>` |
+| `numOctaves=(array with string)`| (initial)| `<number: 1>` |
+| `numOctaves=(empty array)`| (changed)| `<number: 0>` |
+| `numOctaves=(object)`| (initial)| `<number: 1>` |
+| `numOctaves=(numeric string)`| (changed)| `<number: 42>` |
+| `numOctaves=(-1)`| (changed)| `<number: -1>` |
+| `numOctaves=(0)`| (changed)| `<number: 0>` |
+| `numOctaves=(integer)`| (initial)| `<number: 1>` |
+| `numOctaves=(NaN)`| (initial, warning)| `<number: 1>` |
+| `numOctaves=(float)`| (initial)| `<number: 1>` |
+| `numOctaves=(true)`| (initial, warning)| `<number: 1>` |
+| `numOctaves=(false)`| (initial, warning)| `<number: 1>` |
+| `numOctaves=(string 'true')`| (initial)| `<number: 1>` |
+| `numOctaves=(string 'false')`| (initial)| `<number: 1>` |
+| `numOctaves=(string 'on')`| (initial)| `<number: 1>` |
+| `numOctaves=(string 'off')`| (initial)| `<number: 1>` |
+| `numOctaves=(symbol)`| (initial, warning)| `<number: 1>` |
+| `numOctaves=(function)`| (initial, warning)| `<number: 1>` |
+| `numOctaves=(null)`| (initial)| `<number: 1>` |
+| `numOctaves=(undefined)`| (initial)| `<number: 1>` |
+
+## `offset` (on `<stop>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `offset=(string)`| (initial)| `<number: 0>` |
+| `offset=(empty string)`| (initial)| `<number: 0>` |
+| `offset=(array with string)`| (initial)| `<number: 0>` |
+| `offset=(empty array)`| (initial)| `<number: 0>` |
+| `offset=(object)`| (initial)| `<number: 0>` |
+| `offset=(numeric string)`| (changed)| `<number: 42>` |
+| `offset=(-1)`| (changed)| `<number: -1>` |
+| `offset=(0)`| (initial)| `<number: 0>` |
+| `offset=(integer)`| (changed)| `<number: 1>` |
+| `offset=(NaN)`| (initial, warning)| `<number: 0>` |
+| `offset=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `offset=(true)`| (initial, warning)| `<number: 0>` |
+| `offset=(false)`| (initial, warning)| `<number: 0>` |
+| `offset=(string 'true')`| (initial)| `<number: 0>` |
+| `offset=(string 'false')`| (initial)| `<number: 0>` |
+| `offset=(string 'on')`| (initial)| `<number: 0>` |
+| `offset=(string 'off')`| (initial)| `<number: 0>` |
+| `offset=(symbol)`| (initial, warning)| `<number: 0>` |
+| `offset=(function)`| (initial, warning)| `<number: 0>` |
+| `offset=(null)`| (initial)| `<number: 0>` |
+| `offset=(undefined)`| (initial)| `<number: 0>` |
+
+## `on-click` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `on-click=(string)`| (initial, warning)| `<undefined>` |
+| `on-click=(empty string)`| (initial, warning)| `<undefined>` |
+| `on-click=(array with string)`| (initial, warning)| `<undefined>` |
+| `on-click=(empty array)`| (initial, warning)| `<undefined>` |
+| `on-click=(object)`| (initial, warning)| `<undefined>` |
+| `on-click=(numeric string)`| (initial, warning)| `<undefined>` |
+| `on-click=(-1)`| (initial, warning)| `<undefined>` |
+| `on-click=(0)`| (initial, warning)| `<undefined>` |
+| `on-click=(integer)`| (initial, warning)| `<undefined>` |
+| `on-click=(NaN)`| (initial, warning)| `<undefined>` |
+| `on-click=(float)`| (initial, warning)| `<undefined>` |
+| `on-click=(true)`| (initial, warning)| `<undefined>` |
+| `on-click=(false)`| (initial, warning)| `<undefined>` |
+| `on-click=(string 'true')`| (initial, warning)| `<undefined>` |
+| `on-click=(string 'false')`| (initial, warning)| `<undefined>` |
+| `on-click=(string 'on')`| (initial, warning)| `<undefined>` |
+| `on-click=(string 'off')`| (initial, warning)| `<undefined>` |
+| `on-click=(symbol)`| (initial, warning)| `<undefined>` |
+| `on-click=(function)`| (initial, warning)| `<undefined>` |
+| `on-click=(null)`| (initial, warning)| `<undefined>` |
+| `on-click=(undefined)`| (initial, warning)| `<undefined>` |
+
+## `on-unknownevent` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `on-unknownevent=(string)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(empty string)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(array with string)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(empty array)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(object)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(numeric string)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(-1)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(0)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(integer)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(NaN)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(float)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(true)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(false)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(string 'true')`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(string 'false')`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(string 'on')`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(string 'off')`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(symbol)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(function)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(null)`| (initial, warning)| `<undefined>` |
+| `on-unknownevent=(undefined)`| (initial, warning)| `<undefined>` |
+
+## `onclick` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `onclick=(string)`| (initial, warning)| `<null>` |
+| `onclick=(empty string)`| (initial, warning)| `<null>` |
+| `onclick=(array with string)`| (initial, warning)| `<null>` |
+| `onclick=(empty array)`| (initial, warning)| `<null>` |
+| `onclick=(object)`| (initial, warning)| `<null>` |
+| `onclick=(numeric string)`| (initial, warning)| `<null>` |
+| `onclick=(-1)`| (initial, warning)| `<null>` |
+| `onclick=(0)`| (initial, warning)| `<null>` |
+| `onclick=(integer)`| (initial, warning)| `<null>` |
+| `onclick=(NaN)`| (initial, warning)| `<null>` |
+| `onclick=(float)`| (initial, warning)| `<null>` |
+| `onclick=(true)`| (initial, warning)| `<null>` |
+| `onclick=(false)`| (initial, warning)| `<null>` |
+| `onclick=(string 'true')`| (initial, warning)| `<null>` |
+| `onclick=(string 'false')`| (initial, warning)| `<null>` |
+| `onclick=(string 'on')`| (initial, warning)| `<null>` |
+| `onclick=(string 'off')`| (initial, warning)| `<null>` |
+| `onclick=(symbol)`| (initial, warning)| `<null>` |
+| `onclick=(function)`| (initial, warning)| `<null>` |
+| `onclick=(null)`| (initial, warning)| `<null>` |
+| `onclick=(undefined)`| (initial, warning)| `<null>` |
+
+## `onClick` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `onClick=(string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(empty string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(array with string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(empty array)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(object)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(numeric string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(-1)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(0)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(integer)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(NaN)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(float)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(true)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(false)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(string 'true')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(string 'false')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(string 'on')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(string 'off')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(symbol)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onClick=(function)`| (initial)| `<undefined>` |
+| `onClick=(null)`| (initial)| `<undefined>` |
+| `onClick=(undefined)`| (initial)| `<undefined>` |
+
+## `onunknownevent` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `onunknownevent=(string)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(empty string)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(array with string)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(empty array)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(object)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(numeric string)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(-1)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(0)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(integer)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(NaN)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(float)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(true)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(false)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(string 'true')`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(string 'false')`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(string 'on')`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(string 'off')`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(symbol)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(function)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(null)`| (initial, warning)| `<undefined>` |
+| `onunknownevent=(undefined)`| (initial, warning)| `<undefined>` |
+
+## `onUnknownEvent` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `onUnknownEvent=(string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(empty string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(array with string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(empty array)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(object)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(numeric string)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(-1)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(0)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(integer)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(NaN)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(float)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(true)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(false)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(string 'true')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(string 'false')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(string 'on')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(string 'off')`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(symbol)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(function)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(null)`| (initial, warning, ssr warning)| `<undefined>` |
+| `onUnknownEvent=(undefined)`| (initial, warning, ssr warning)| `<undefined>` |
+
+## `opacity` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `opacity=(string)`| (changed)| `"a string"` |
+| `opacity=(empty string)`| (changed)| `<empty string>` |
+| `opacity=(array with string)`| (changed)| `"string"` |
+| `opacity=(empty array)`| (changed)| `<empty string>` |
+| `opacity=(object)`| (changed)| `"result of toString()"` |
+| `opacity=(numeric string)`| (changed)| `"42"` |
+| `opacity=(-1)`| (changed)| `"-1"` |
+| `opacity=(0)`| (changed)| `"0"` |
+| `opacity=(integer)`| (changed)| `"1"` |
+| `opacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `opacity=(float)`| (changed)| `"99.99"` |
+| `opacity=(true)`| (initial, warning)| `<null>` |
+| `opacity=(false)`| (initial, warning)| `<null>` |
+| `opacity=(string 'true')`| (changed)| `"true"` |
+| `opacity=(string 'false')`| (changed)| `"false"` |
+| `opacity=(string 'on')`| (changed)| `"on"` |
+| `opacity=(string 'off')`| (changed)| `"off"` |
+| `opacity=(symbol)`| (initial, warning)| `<null>` |
+| `opacity=(function)`| (initial, warning)| `<null>` |
+| `opacity=(null)`| (initial)| `<null>` |
+| `opacity=(undefined)`| (initial)| `<null>` |
+
+## `open` (on `<details>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `open=(string)`| (changed)| `<boolean: true>` |
+| `open=(empty string)`| (initial)| `<boolean: false>` |
+| `open=(array with string)`| (changed)| `<boolean: true>` |
+| `open=(empty array)`| (changed)| `<boolean: true>` |
+| `open=(object)`| (changed)| `<boolean: true>` |
+| `open=(numeric string)`| (changed)| `<boolean: true>` |
+| `open=(-1)`| (changed)| `<boolean: true>` |
+| `open=(0)`| (initial)| `<boolean: false>` |
+| `open=(integer)`| (changed)| `<boolean: true>` |
+| `open=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `open=(float)`| (changed)| `<boolean: true>` |
+| `open=(true)`| (changed)| `<boolean: true>` |
+| `open=(false)`| (initial)| `<boolean: false>` |
+| `open=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `open=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `open=(string 'on')`| (changed)| `<boolean: true>` |
+| `open=(string 'off')`| (changed)| `<boolean: true>` |
+| `open=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `open=(function)`| (initial, warning)| `<boolean: false>` |
+| `open=(null)`| (initial)| `<boolean: false>` |
+| `open=(undefined)`| (initial)| `<boolean: false>` |
+
+## `operator` (on `<feComposite>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `operator=(string)`| (changed)| `<number: 5>` |
+| `operator=(empty string)`| (initial)| `<number: 1>` |
+| `operator=(array with string)`| (changed)| `<number: 5>` |
+| `operator=(empty array)`| (initial)| `<number: 1>` |
+| `operator=(object)`| (initial)| `<number: 1>` |
+| `operator=(numeric string)`| (initial)| `<number: 1>` |
+| `operator=(-1)`| (initial)| `<number: 1>` |
+| `operator=(0)`| (initial)| `<number: 1>` |
+| `operator=(integer)`| (initial)| `<number: 1>` |
+| `operator=(NaN)`| (initial, warning)| `<number: 1>` |
+| `operator=(float)`| (initial)| `<number: 1>` |
+| `operator=(true)`| (initial, warning)| `<number: 1>` |
+| `operator=(false)`| (initial, warning)| `<number: 1>` |
+| `operator=(string 'true')`| (initial)| `<number: 1>` |
+| `operator=(string 'false')`| (initial)| `<number: 1>` |
+| `operator=(string 'on')`| (initial)| `<number: 1>` |
+| `operator=(string 'off')`| (initial)| `<number: 1>` |
+| `operator=(symbol)`| (initial, warning)| `<number: 1>` |
+| `operator=(function)`| (initial, warning)| `<number: 1>` |
+| `operator=(null)`| (initial)| `<number: 1>` |
+| `operator=(undefined)`| (initial)| `<number: 1>` |
+
+## `optimum` (on `<meter>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `optimum=(string)`| (initial)| `<number: 0.5>` |
+| `optimum=(empty string)`| (initial)| `<number: 0.5>` |
+| `optimum=(array with string)`| (initial)| `<number: 0.5>` |
+| `optimum=(empty array)`| (initial)| `<number: 0.5>` |
+| `optimum=(object)`| (initial)| `<number: 0.5>` |
+| `optimum=(numeric string)`| (changed)| `<number: 1>` |
+| `optimum=(-1)`| (changed)| `<number: 0>` |
+| `optimum=(0)`| (changed)| `<number: 0>` |
+| `optimum=(integer)`| (changed)| `<number: 1>` |
+| `optimum=(NaN)`| (initial, warning)| `<number: 0.5>` |
+| `optimum=(float)`| (changed)| `<number: 1>` |
+| `optimum=(true)`| (initial, warning)| `<number: 0.5>` |
+| `optimum=(false)`| (initial, warning)| `<number: 0.5>` |
+| `optimum=(string 'true')`| (initial)| `<number: 0.5>` |
+| `optimum=(string 'false')`| (initial)| `<number: 0.5>` |
+| `optimum=(string 'on')`| (initial)| `<number: 0.5>` |
+| `optimum=(string 'off')`| (initial)| `<number: 0.5>` |
+| `optimum=(symbol)`| (initial, warning)| `<number: 0.5>` |
+| `optimum=(function)`| (initial, warning)| `<number: 0.5>` |
+| `optimum=(null)`| (initial)| `<number: 0.5>` |
+| `optimum=(undefined)`| (initial)| `<number: 0.5>` |
+
+## `order` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `order=(string)`| (changed)| `"a string"` |
+| `order=(empty string)`| (changed)| `<empty string>` |
+| `order=(array with string)`| (changed)| `"string"` |
+| `order=(empty array)`| (changed)| `<empty string>` |
+| `order=(object)`| (changed)| `"result of toString()"` |
+| `order=(numeric string)`| (changed)| `"42"` |
+| `order=(-1)`| (changed)| `"-1"` |
+| `order=(0)`| (changed)| `"0"` |
+| `order=(integer)`| (changed)| `"1"` |
+| `order=(NaN)`| (changed, warning)| `"NaN"` |
+| `order=(float)`| (changed)| `"99.99"` |
+| `order=(true)`| (initial, warning)| `<null>` |
+| `order=(false)`| (initial, warning)| `<null>` |
+| `order=(string 'true')`| (changed)| `"true"` |
+| `order=(string 'false')`| (changed)| `"false"` |
+| `order=(string 'on')`| (changed)| `"on"` |
+| `order=(string 'off')`| (changed)| `"off"` |
+| `order=(symbol)`| (initial, warning)| `<null>` |
+| `order=(function)`| (initial, warning)| `<null>` |
+| `order=(null)`| (initial)| `<null>` |
+| `order=(undefined)`| (initial)| `<null>` |
+
+## `orient` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `orient=(string)`| (changed)| `"a string"` |
+| `orient=(empty string)`| (changed)| `<empty string>` |
+| `orient=(array with string)`| (changed)| `"string"` |
+| `orient=(empty array)`| (changed)| `<empty string>` |
+| `orient=(object)`| (changed)| `"result of toString()"` |
+| `orient=(numeric string)`| (changed)| `"42"` |
+| `orient=(-1)`| (changed)| `"-1"` |
+| `orient=(0)`| (changed)| `"0"` |
+| `orient=(integer)`| (changed)| `"1"` |
+| `orient=(NaN)`| (changed, warning)| `"NaN"` |
+| `orient=(float)`| (changed)| `"99.99"` |
+| `orient=(true)`| (initial, warning)| `<null>` |
+| `orient=(false)`| (initial, warning)| `<null>` |
+| `orient=(string 'true')`| (changed)| `"true"` |
+| `orient=(string 'false')`| (changed)| `"false"` |
+| `orient=(string 'on')`| (changed)| `"on"` |
+| `orient=(string 'off')`| (changed)| `"off"` |
+| `orient=(symbol)`| (initial, warning)| `<null>` |
+| `orient=(function)`| (initial, warning)| `<null>` |
+| `orient=(null)`| (initial)| `<null>` |
+| `orient=(undefined)`| (initial)| `<null>` |
+
+## `orientation` (on `<glyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `orientation=(string)`| (changed)| `"a string"` |
+| `orientation=(empty string)`| (changed)| `<empty string>` |
+| `orientation=(array with string)`| (changed)| `"string"` |
+| `orientation=(empty array)`| (changed)| `<empty string>` |
+| `orientation=(object)`| (changed)| `"result of toString()"` |
+| `orientation=(numeric string)`| (changed)| `"42"` |
+| `orientation=(-1)`| (changed)| `"-1"` |
+| `orientation=(0)`| (changed)| `"0"` |
+| `orientation=(integer)`| (changed)| `"1"` |
+| `orientation=(NaN)`| (changed, warning)| `"NaN"` |
+| `orientation=(float)`| (changed)| `"99.99"` |
+| `orientation=(true)`| (initial, warning)| `<null>` |
+| `orientation=(false)`| (initial, warning)| `<null>` |
+| `orientation=(string 'true')`| (changed)| `"true"` |
+| `orientation=(string 'false')`| (changed)| `"false"` |
+| `orientation=(string 'on')`| (changed)| `"on"` |
+| `orientation=(string 'off')`| (changed)| `"off"` |
+| `orientation=(symbol)`| (initial, warning)| `<null>` |
+| `orientation=(function)`| (initial, warning)| `<null>` |
+| `orientation=(null)`| (initial)| `<null>` |
+| `orientation=(undefined)`| (initial)| `<null>` |
+
+## `origin` (on `<animateMotion>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `origin=(string)`| (changed)| `"a string"` |
+| `origin=(empty string)`| (changed)| `<empty string>` |
+| `origin=(array with string)`| (changed)| `"string"` |
+| `origin=(empty array)`| (changed)| `<empty string>` |
+| `origin=(object)`| (changed)| `"result of toString()"` |
+| `origin=(numeric string)`| (changed)| `"42"` |
+| `origin=(-1)`| (changed)| `"-1"` |
+| `origin=(0)`| (changed)| `"0"` |
+| `origin=(integer)`| (changed)| `"1"` |
+| `origin=(NaN)`| (changed, warning)| `"NaN"` |
+| `origin=(float)`| (changed)| `"99.99"` |
+| `origin=(true)`| (initial, warning)| `<null>` |
+| `origin=(false)`| (initial, warning)| `<null>` |
+| `origin=(string 'true')`| (changed)| `"true"` |
+| `origin=(string 'false')`| (changed)| `"false"` |
+| `origin=(string 'on')`| (changed)| `"on"` |
+| `origin=(string 'off')`| (changed)| `"off"` |
+| `origin=(symbol)`| (initial, warning)| `<null>` |
+| `origin=(function)`| (initial, warning)| `<null>` |
+| `origin=(null)`| (initial)| `<null>` |
+| `origin=(undefined)`| (initial)| `<null>` |
+
+## `overflow` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `overflow=(string)`| (changed)| `"a string"` |
+| `overflow=(empty string)`| (changed)| `<empty string>` |
+| `overflow=(array with string)`| (changed)| `"string"` |
+| `overflow=(empty array)`| (changed)| `<empty string>` |
+| `overflow=(object)`| (changed)| `"result of toString()"` |
+| `overflow=(numeric string)`| (changed)| `"42"` |
+| `overflow=(-1)`| (changed)| `"-1"` |
+| `overflow=(0)`| (changed)| `"0"` |
+| `overflow=(integer)`| (changed)| `"1"` |
+| `overflow=(NaN)`| (changed, warning)| `"NaN"` |
+| `overflow=(float)`| (changed)| `"99.99"` |
+| `overflow=(true)`| (initial, warning)| `<null>` |
+| `overflow=(false)`| (initial, warning)| `<null>` |
+| `overflow=(string 'true')`| (changed)| `"true"` |
+| `overflow=(string 'false')`| (changed)| `"false"` |
+| `overflow=(string 'on')`| (changed)| `"on"` |
+| `overflow=(string 'off')`| (changed)| `"off"` |
+| `overflow=(symbol)`| (initial, warning)| `<null>` |
+| `overflow=(function)`| (initial, warning)| `<null>` |
+| `overflow=(null)`| (initial)| `<null>` |
+| `overflow=(undefined)`| (initial)| `<null>` |
+
+## `overline-position` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `overline-position=(string)`| (changed, warning)| `"a string"` |
+| `overline-position=(empty string)`| (changed, warning)| `<empty string>` |
+| `overline-position=(array with string)`| (changed, warning)| `"string"` |
+| `overline-position=(empty array)`| (changed, warning)| `<empty string>` |
+| `overline-position=(object)`| (changed, warning)| `"result of toString()"` |
+| `overline-position=(numeric string)`| (changed, warning)| `"42"` |
+| `overline-position=(-1)`| (changed, warning)| `"-1"` |
+| `overline-position=(0)`| (changed, warning)| `"0"` |
+| `overline-position=(integer)`| (changed, warning)| `"1"` |
+| `overline-position=(NaN)`| (changed, warning)| `"NaN"` |
+| `overline-position=(float)`| (changed, warning)| `"99.99"` |
+| `overline-position=(true)`| (initial, warning)| `<null>` |
+| `overline-position=(false)`| (initial, warning)| `<null>` |
+| `overline-position=(string 'true')`| (changed, warning)| `"true"` |
+| `overline-position=(string 'false')`| (changed, warning)| `"false"` |
+| `overline-position=(string 'on')`| (changed, warning)| `"on"` |
+| `overline-position=(string 'off')`| (changed, warning)| `"off"` |
+| `overline-position=(symbol)`| (initial, warning)| `<null>` |
+| `overline-position=(function)`| (initial, warning)| `<null>` |
+| `overline-position=(null)`| (initial, warning)| `<null>` |
+| `overline-position=(undefined)`| (initial, warning)| `<null>` |
+
+## `overline-thickness` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `overline-thickness=(string)`| (changed, warning)| `"a string"` |
+| `overline-thickness=(empty string)`| (changed, warning)| `<empty string>` |
+| `overline-thickness=(array with string)`| (changed, warning)| `"string"` |
+| `overline-thickness=(empty array)`| (changed, warning)| `<empty string>` |
+| `overline-thickness=(object)`| (changed, warning)| `"result of toString()"` |
+| `overline-thickness=(numeric string)`| (changed, warning)| `"42"` |
+| `overline-thickness=(-1)`| (changed, warning)| `"-1"` |
+| `overline-thickness=(0)`| (changed, warning)| `"0"` |
+| `overline-thickness=(integer)`| (changed, warning)| `"1"` |
+| `overline-thickness=(NaN)`| (changed, warning)| `"NaN"` |
+| `overline-thickness=(float)`| (changed, warning)| `"99.99"` |
+| `overline-thickness=(true)`| (initial, warning)| `<null>` |
+| `overline-thickness=(false)`| (initial, warning)| `<null>` |
+| `overline-thickness=(string 'true')`| (changed, warning)| `"true"` |
+| `overline-thickness=(string 'false')`| (changed, warning)| `"false"` |
+| `overline-thickness=(string 'on')`| (changed, warning)| `"on"` |
+| `overline-thickness=(string 'off')`| (changed, warning)| `"off"` |
+| `overline-thickness=(symbol)`| (initial, warning)| `<null>` |
+| `overline-thickness=(function)`| (initial, warning)| `<null>` |
+| `overline-thickness=(null)`| (initial, warning)| `<null>` |
+| `overline-thickness=(undefined)`| (initial, warning)| `<null>` |
+
+## `overlinePosition` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `overlinePosition=(string)`| (changed)| `"a string"` |
+| `overlinePosition=(empty string)`| (changed)| `<empty string>` |
+| `overlinePosition=(array with string)`| (changed)| `"string"` |
+| `overlinePosition=(empty array)`| (changed)| `<empty string>` |
+| `overlinePosition=(object)`| (changed)| `"result of toString()"` |
+| `overlinePosition=(numeric string)`| (changed)| `"42"` |
+| `overlinePosition=(-1)`| (changed)| `"-1"` |
+| `overlinePosition=(0)`| (changed)| `"0"` |
+| `overlinePosition=(integer)`| (changed)| `"1"` |
+| `overlinePosition=(NaN)`| (changed, warning)| `"NaN"` |
+| `overlinePosition=(float)`| (changed)| `"99.99"` |
+| `overlinePosition=(true)`| (initial, warning)| `<null>` |
+| `overlinePosition=(false)`| (initial, warning)| `<null>` |
+| `overlinePosition=(string 'true')`| (changed)| `"true"` |
+| `overlinePosition=(string 'false')`| (changed)| `"false"` |
+| `overlinePosition=(string 'on')`| (changed)| `"on"` |
+| `overlinePosition=(string 'off')`| (changed)| `"off"` |
+| `overlinePosition=(symbol)`| (initial, warning)| `<null>` |
+| `overlinePosition=(function)`| (initial, warning)| `<null>` |
+| `overlinePosition=(null)`| (initial)| `<null>` |
+| `overlinePosition=(undefined)`| (initial)| `<null>` |
+
+## `overlineThickness` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `overlineThickness=(string)`| (changed)| `"a string"` |
+| `overlineThickness=(empty string)`| (changed)| `<empty string>` |
+| `overlineThickness=(array with string)`| (changed)| `"string"` |
+| `overlineThickness=(empty array)`| (changed)| `<empty string>` |
+| `overlineThickness=(object)`| (changed)| `"result of toString()"` |
+| `overlineThickness=(numeric string)`| (changed)| `"42"` |
+| `overlineThickness=(-1)`| (changed)| `"-1"` |
+| `overlineThickness=(0)`| (changed)| `"0"` |
+| `overlineThickness=(integer)`| (changed)| `"1"` |
+| `overlineThickness=(NaN)`| (changed, warning)| `"NaN"` |
+| `overlineThickness=(float)`| (changed)| `"99.99"` |
+| `overlineThickness=(true)`| (initial, warning)| `<null>` |
+| `overlineThickness=(false)`| (initial, warning)| `<null>` |
+| `overlineThickness=(string 'true')`| (changed)| `"true"` |
+| `overlineThickness=(string 'false')`| (changed)| `"false"` |
+| `overlineThickness=(string 'on')`| (changed)| `"on"` |
+| `overlineThickness=(string 'off')`| (changed)| `"off"` |
+| `overlineThickness=(symbol)`| (initial, warning)| `<null>` |
+| `overlineThickness=(function)`| (initial, warning)| `<null>` |
+| `overlineThickness=(null)`| (initial)| `<null>` |
+| `overlineThickness=(undefined)`| (initial)| `<null>` |
+
+## `paint-order` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `paint-order=(string)`| (changed, warning)| `"a string"` |
+| `paint-order=(empty string)`| (changed, warning)| `<empty string>` |
+| `paint-order=(array with string)`| (changed, warning)| `"string"` |
+| `paint-order=(empty array)`| (changed, warning)| `<empty string>` |
+| `paint-order=(object)`| (changed, warning)| `"result of toString()"` |
+| `paint-order=(numeric string)`| (changed, warning)| `"42"` |
+| `paint-order=(-1)`| (changed, warning)| `"-1"` |
+| `paint-order=(0)`| (changed, warning)| `"0"` |
+| `paint-order=(integer)`| (changed, warning)| `"1"` |
+| `paint-order=(NaN)`| (changed, warning)| `"NaN"` |
+| `paint-order=(float)`| (changed, warning)| `"99.99"` |
+| `paint-order=(true)`| (initial, warning)| `<null>` |
+| `paint-order=(false)`| (initial, warning)| `<null>` |
+| `paint-order=(string 'true')`| (changed, warning)| `"true"` |
+| `paint-order=(string 'false')`| (changed, warning)| `"false"` |
+| `paint-order=(string 'on')`| (changed, warning)| `"on"` |
+| `paint-order=(string 'off')`| (changed, warning)| `"off"` |
+| `paint-order=(symbol)`| (initial, warning)| `<null>` |
+| `paint-order=(function)`| (initial, warning)| `<null>` |
+| `paint-order=(null)`| (initial, warning)| `<null>` |
+| `paint-order=(undefined)`| (initial, warning)| `<null>` |
+
+## `paintOrder` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `paintOrder=(string)`| (changed)| `"a string"` |
+| `paintOrder=(empty string)`| (changed)| `<empty string>` |
+| `paintOrder=(array with string)`| (changed)| `"string"` |
+| `paintOrder=(empty array)`| (changed)| `<empty string>` |
+| `paintOrder=(object)`| (changed)| `"result of toString()"` |
+| `paintOrder=(numeric string)`| (changed)| `"42"` |
+| `paintOrder=(-1)`| (changed)| `"-1"` |
+| `paintOrder=(0)`| (changed)| `"0"` |
+| `paintOrder=(integer)`| (changed)| `"1"` |
+| `paintOrder=(NaN)`| (changed, warning)| `"NaN"` |
+| `paintOrder=(float)`| (changed)| `"99.99"` |
+| `paintOrder=(true)`| (initial, warning)| `<null>` |
+| `paintOrder=(false)`| (initial, warning)| `<null>` |
+| `paintOrder=(string 'true')`| (changed)| `"true"` |
+| `paintOrder=(string 'false')`| (changed)| `"false"` |
+| `paintOrder=(string 'on')`| (changed)| `"on"` |
+| `paintOrder=(string 'off')`| (changed)| `"off"` |
+| `paintOrder=(symbol)`| (initial, warning)| `<null>` |
+| `paintOrder=(function)`| (initial, warning)| `<null>` |
+| `paintOrder=(null)`| (initial)| `<null>` |
+| `paintOrder=(undefined)`| (initial)| `<null>` |
+
+## `panose-1` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `panose-1=(string)`| (changed, warning)| `"a string"` |
+| `panose-1=(empty string)`| (changed, warning)| `<empty string>` |
+| `panose-1=(array with string)`| (changed, warning)| `"string"` |
+| `panose-1=(empty array)`| (changed, warning)| `<empty string>` |
+| `panose-1=(object)`| (changed, warning)| `"result of toString()"` |
+| `panose-1=(numeric string)`| (changed, warning)| `"42"` |
+| `panose-1=(-1)`| (changed, warning)| `"-1"` |
+| `panose-1=(0)`| (changed, warning)| `"0"` |
+| `panose-1=(integer)`| (changed, warning)| `"1"` |
+| `panose-1=(NaN)`| (changed, warning)| `"NaN"` |
+| `panose-1=(float)`| (changed, warning)| `"99.99"` |
+| `panose-1=(true)`| (initial, warning)| `<null>` |
+| `panose-1=(false)`| (initial, warning)| `<null>` |
+| `panose-1=(string 'true')`| (changed, warning)| `"true"` |
+| `panose-1=(string 'false')`| (changed, warning)| `"false"` |
+| `panose-1=(string 'on')`| (changed, warning)| `"on"` |
+| `panose-1=(string 'off')`| (changed, warning)| `"off"` |
+| `panose-1=(symbol)`| (initial, warning)| `<null>` |
+| `panose-1=(function)`| (initial, warning)| `<null>` |
+| `panose-1=(null)`| (initial, warning)| `<null>` |
+| `panose-1=(undefined)`| (initial, warning)| `<null>` |
+
+## `panose1` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `panose1=(string)`| (initial)| `<null>` |
+| `panose1=(empty string)`| (initial)| `<null>` |
+| `panose1=(array with string)`| (initial)| `<null>` |
+| `panose1=(empty array)`| (initial)| `<null>` |
+| `panose1=(object)`| (initial)| `<null>` |
+| `panose1=(numeric string)`| (initial)| `<null>` |
+| `panose1=(-1)`| (initial)| `<null>` |
+| `panose1=(0)`| (initial)| `<null>` |
+| `panose1=(integer)`| (initial)| `<null>` |
+| `panose1=(NaN)`| (initial, warning)| `<null>` |
+| `panose1=(float)`| (initial)| `<null>` |
+| `panose1=(true)`| (initial, warning)| `<null>` |
+| `panose1=(false)`| (initial, warning)| `<null>` |
+| `panose1=(string 'true')`| (initial)| `<null>` |
+| `panose1=(string 'false')`| (initial)| `<null>` |
+| `panose1=(string 'on')`| (initial)| `<null>` |
+| `panose1=(string 'off')`| (initial)| `<null>` |
+| `panose1=(symbol)`| (initial, warning)| `<null>` |
+| `panose1=(function)`| (initial, warning)| `<null>` |
+| `panose1=(null)`| (initial)| `<null>` |
+| `panose1=(undefined)`| (initial)| `<null>` |
+
+## `pathLength` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pathLength=(string)`| (initial)| `<number: 0>` |
+| `pathLength=(empty string)`| (initial)| `<number: 0>` |
+| `pathLength=(array with string)`| (initial)| `<number: 0>` |
+| `pathLength=(empty array)`| (initial)| `<number: 0>` |
+| `pathLength=(object)`| (initial)| `<number: 0>` |
+| `pathLength=(numeric string)`| (changed)| `<number: 42>` |
+| `pathLength=(-1)`| (changed)| `<number: -1>` |
+| `pathLength=(0)`| (initial)| `<number: 0>` |
+| `pathLength=(integer)`| (changed)| `<number: 1>` |
+| `pathLength=(NaN)`| (initial, warning)| `<number: 0>` |
+| `pathLength=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `pathLength=(true)`| (initial, warning)| `<number: 0>` |
+| `pathLength=(false)`| (initial, warning)| `<number: 0>` |
+| `pathLength=(string 'true')`| (initial)| `<number: 0>` |
+| `pathLength=(string 'false')`| (initial)| `<number: 0>` |
+| `pathLength=(string 'on')`| (initial)| `<number: 0>` |
+| `pathLength=(string 'off')`| (initial)| `<number: 0>` |
+| `pathLength=(symbol)`| (initial, warning)| `<number: 0>` |
+| `pathLength=(function)`| (initial, warning)| `<number: 0>` |
+| `pathLength=(null)`| (initial)| `<number: 0>` |
+| `pathLength=(undefined)`| (initial)| `<number: 0>` |
+
+## `pattern` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pattern=(string)`| (changed)| `"a string"` |
+| `pattern=(empty string)`| (initial)| `<empty string>` |
+| `pattern=(array with string)`| (changed)| `"string"` |
+| `pattern=(empty array)`| (initial)| `<empty string>` |
+| `pattern=(object)`| (changed)| `"result of toString()"` |
+| `pattern=(numeric string)`| (changed)| `"42"` |
+| `pattern=(-1)`| (changed)| `"-1"` |
+| `pattern=(0)`| (changed)| `"0"` |
+| `pattern=(integer)`| (changed)| `"1"` |
+| `pattern=(NaN)`| (changed, warning)| `"NaN"` |
+| `pattern=(float)`| (changed)| `"99.99"` |
+| `pattern=(true)`| (initial, warning)| `<empty string>` |
+| `pattern=(false)`| (initial, warning)| `<empty string>` |
+| `pattern=(string 'true')`| (changed)| `"true"` |
+| `pattern=(string 'false')`| (changed)| `"false"` |
+| `pattern=(string 'on')`| (changed)| `"on"` |
+| `pattern=(string 'off')`| (changed)| `"off"` |
+| `pattern=(symbol)`| (initial, warning)| `<empty string>` |
+| `pattern=(function)`| (initial, warning)| `<empty string>` |
+| `pattern=(null)`| (initial)| `<empty string>` |
+| `pattern=(undefined)`| (initial)| `<empty string>` |
+
+## `patternContentUnits` (on `<pattern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `patternContentUnits=(string)`| (changed)| `<number: 2>` |
+| `patternContentUnits=(empty string)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(array with string)`| (changed)| `<number: 2>` |
+| `patternContentUnits=(empty array)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(object)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(numeric string)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(-1)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(0)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(integer)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(NaN)`| (initial, warning)| `<number: 1>` |
+| `patternContentUnits=(float)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(true)`| (initial, warning)| `<number: 1>` |
+| `patternContentUnits=(false)`| (initial, warning)| `<number: 1>` |
+| `patternContentUnits=(string 'true')`| (initial)| `<number: 1>` |
+| `patternContentUnits=(string 'false')`| (initial)| `<number: 1>` |
+| `patternContentUnits=(string 'on')`| (initial)| `<number: 1>` |
+| `patternContentUnits=(string 'off')`| (initial)| `<number: 1>` |
+| `patternContentUnits=(symbol)`| (initial, warning)| `<number: 1>` |
+| `patternContentUnits=(function)`| (initial, warning)| `<number: 1>` |
+| `patternContentUnits=(null)`| (initial)| `<number: 1>` |
+| `patternContentUnits=(undefined)`| (initial)| `<number: 1>` |
+
+## `patternTransform` (on `<pattern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `patternTransform=(string)`| (changed)| `[<SVGMatrix 1 0 0 1 -10 -20>/2/0, <SVGMatrix 2 0 0 2 0 0>/3/0, <SVGMatrix 0.7071067811865476 0.7071067811865475 -0.7071067811865475 0.7071067811865476 0 0>/4/45, <SVGMatrix 1 0 0 1 5 10>/2/0]` |
+| `patternTransform=(empty string)`| (initial)| `[]` |
+| `patternTransform=(array with string)`| (changed)| `[<SVGMatrix 1 0 0 1 -10 -20>/2/0, <SVGMatrix 2 0 0 2 0 0>/3/0, <SVGMatrix 0.7071067811865476 0.7071067811865475 -0.7071067811865475 0.7071067811865476 0 0>/4/45, <SVGMatrix 1 0 0 1 5 10>/2/0]` |
+| `patternTransform=(empty array)`| (initial)| `[]` |
+| `patternTransform=(object)`| (initial)| `[]` |
+| `patternTransform=(numeric string)`| (initial)| `[]` |
+| `patternTransform=(-1)`| (initial)| `[]` |
+| `patternTransform=(0)`| (initial)| `[]` |
+| `patternTransform=(integer)`| (initial)| `[]` |
+| `patternTransform=(NaN)`| (initial, warning)| `[]` |
+| `patternTransform=(float)`| (initial)| `[]` |
+| `patternTransform=(true)`| (initial, warning)| `[]` |
+| `patternTransform=(false)`| (initial, warning)| `[]` |
+| `patternTransform=(string 'true')`| (initial)| `[]` |
+| `patternTransform=(string 'false')`| (initial)| `[]` |
+| `patternTransform=(string 'on')`| (initial)| `[]` |
+| `patternTransform=(string 'off')`| (initial)| `[]` |
+| `patternTransform=(symbol)`| (initial, warning)| `[]` |
+| `patternTransform=(function)`| (initial, warning)| `[]` |
+| `patternTransform=(null)`| (initial)| `[]` |
+| `patternTransform=(undefined)`| (initial)| `[]` |
+
+## `patternUnits` (on `<pattern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `patternUnits=(string)`| (changed)| `<number: 1>` |
+| `patternUnits=(empty string)`| (initial)| `<number: 2>` |
+| `patternUnits=(array with string)`| (changed)| `<number: 1>` |
+| `patternUnits=(empty array)`| (initial)| `<number: 2>` |
+| `patternUnits=(object)`| (initial)| `<number: 2>` |
+| `patternUnits=(numeric string)`| (initial)| `<number: 2>` |
+| `patternUnits=(-1)`| (initial)| `<number: 2>` |
+| `patternUnits=(0)`| (initial)| `<number: 2>` |
+| `patternUnits=(integer)`| (initial)| `<number: 2>` |
+| `patternUnits=(NaN)`| (initial, warning)| `<number: 2>` |
+| `patternUnits=(float)`| (initial)| `<number: 2>` |
+| `patternUnits=(true)`| (initial, warning)| `<number: 2>` |
+| `patternUnits=(false)`| (initial, warning)| `<number: 2>` |
+| `patternUnits=(string 'true')`| (initial)| `<number: 2>` |
+| `patternUnits=(string 'false')`| (initial)| `<number: 2>` |
+| `patternUnits=(string 'on')`| (initial)| `<number: 2>` |
+| `patternUnits=(string 'off')`| (initial)| `<number: 2>` |
+| `patternUnits=(symbol)`| (initial, warning)| `<number: 2>` |
+| `patternUnits=(function)`| (initial, warning)| `<number: 2>` |
+| `patternUnits=(null)`| (initial)| `<number: 2>` |
+| `patternUnits=(undefined)`| (initial)| `<number: 2>` |
+
+## `placeholder` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `placeholder=(string)`| (changed)| `"a string"` |
+| `placeholder=(empty string)`| (initial)| `<empty string>` |
+| `placeholder=(array with string)`| (changed)| `"string"` |
+| `placeholder=(empty array)`| (initial)| `<empty string>` |
+| `placeholder=(object)`| (changed)| `"result of toString()"` |
+| `placeholder=(numeric string)`| (changed)| `"42"` |
+| `placeholder=(-1)`| (changed)| `"-1"` |
+| `placeholder=(0)`| (changed)| `"0"` |
+| `placeholder=(integer)`| (changed)| `"1"` |
+| `placeholder=(NaN)`| (changed, warning)| `"NaN"` |
+| `placeholder=(float)`| (changed)| `"99.99"` |
+| `placeholder=(true)`| (initial, warning)| `<empty string>` |
+| `placeholder=(false)`| (initial, warning)| `<empty string>` |
+| `placeholder=(string 'true')`| (changed)| `"true"` |
+| `placeholder=(string 'false')`| (changed)| `"false"` |
+| `placeholder=(string 'on')`| (changed)| `"on"` |
+| `placeholder=(string 'off')`| (changed)| `"off"` |
+| `placeholder=(symbol)`| (initial, warning)| `<empty string>` |
+| `placeholder=(function)`| (initial, warning)| `<empty string>` |
+| `placeholder=(null)`| (initial)| `<empty string>` |
+| `placeholder=(undefined)`| (initial)| `<empty string>` |
+
+## `playsInline` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `playsInline=(string)`| (changed)| `<empty string>` |
+| `playsInline=(empty string)`| (initial)| `<null>` |
+| `playsInline=(array with string)`| (changed)| `<empty string>` |
+| `playsInline=(empty array)`| (changed)| `<empty string>` |
+| `playsInline=(object)`| (changed)| `<empty string>` |
+| `playsInline=(numeric string)`| (changed)| `<empty string>` |
+| `playsInline=(-1)`| (changed)| `<empty string>` |
+| `playsInline=(0)`| (initial)| `<null>` |
+| `playsInline=(integer)`| (changed)| `<empty string>` |
+| `playsInline=(NaN)`| (initial, warning)| `<null>` |
+| `playsInline=(float)`| (changed)| `<empty string>` |
+| `playsInline=(true)`| (changed)| `<empty string>` |
+| `playsInline=(false)`| (initial)| `<null>` |
+| `playsInline=(string 'true')`| (changed, warning)| `<empty string>` |
+| `playsInline=(string 'false')`| (changed, warning)| `<empty string>` |
+| `playsInline=(string 'on')`| (changed)| `<empty string>` |
+| `playsInline=(string 'off')`| (changed)| `<empty string>` |
+| `playsInline=(symbol)`| (initial, warning)| `<null>` |
+| `playsInline=(function)`| (initial, warning)| `<null>` |
+| `playsInline=(null)`| (initial)| `<null>` |
+| `playsInline=(undefined)`| (initial)| `<null>` |
+
+## `pointer-events` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pointer-events=(string)`| (changed, warning)| `"a string"` |
+| `pointer-events=(empty string)`| (changed, warning)| `<empty string>` |
+| `pointer-events=(array with string)`| (changed, warning)| `"string"` |
+| `pointer-events=(empty array)`| (changed, warning)| `<empty string>` |
+| `pointer-events=(object)`| (changed, warning)| `"result of toString()"` |
+| `pointer-events=(numeric string)`| (changed, warning)| `"42"` |
+| `pointer-events=(-1)`| (changed, warning)| `"-1"` |
+| `pointer-events=(0)`| (changed, warning)| `"0"` |
+| `pointer-events=(integer)`| (changed, warning)| `"1"` |
+| `pointer-events=(NaN)`| (changed, warning)| `"NaN"` |
+| `pointer-events=(float)`| (changed, warning)| `"99.99"` |
+| `pointer-events=(true)`| (initial, warning)| `<null>` |
+| `pointer-events=(false)`| (initial, warning)| `<null>` |
+| `pointer-events=(string 'true')`| (changed, warning)| `"true"` |
+| `pointer-events=(string 'false')`| (changed, warning)| `"false"` |
+| `pointer-events=(string 'on')`| (changed, warning)| `"on"` |
+| `pointer-events=(string 'off')`| (changed, warning)| `"off"` |
+| `pointer-events=(symbol)`| (initial, warning)| `<null>` |
+| `pointer-events=(function)`| (initial, warning)| `<null>` |
+| `pointer-events=(null)`| (initial, warning)| `<null>` |
+| `pointer-events=(undefined)`| (initial, warning)| `<null>` |
+
+## `pointerEvents` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pointerEvents=(string)`| (changed)| `"a string"` |
+| `pointerEvents=(empty string)`| (changed)| `<empty string>` |
+| `pointerEvents=(array with string)`| (changed)| `"string"` |
+| `pointerEvents=(empty array)`| (changed)| `<empty string>` |
+| `pointerEvents=(object)`| (changed)| `"result of toString()"` |
+| `pointerEvents=(numeric string)`| (changed)| `"42"` |
+| `pointerEvents=(-1)`| (changed)| `"-1"` |
+| `pointerEvents=(0)`| (changed)| `"0"` |
+| `pointerEvents=(integer)`| (changed)| `"1"` |
+| `pointerEvents=(NaN)`| (changed, warning)| `"NaN"` |
+| `pointerEvents=(float)`| (changed)| `"99.99"` |
+| `pointerEvents=(true)`| (initial, warning)| `<null>` |
+| `pointerEvents=(false)`| (initial, warning)| `<null>` |
+| `pointerEvents=(string 'true')`| (changed)| `"true"` |
+| `pointerEvents=(string 'false')`| (changed)| `"false"` |
+| `pointerEvents=(string 'on')`| (changed)| `"on"` |
+| `pointerEvents=(string 'off')`| (changed)| `"off"` |
+| `pointerEvents=(symbol)`| (initial, warning)| `<null>` |
+| `pointerEvents=(function)`| (initial, warning)| `<null>` |
+| `pointerEvents=(null)`| (initial)| `<null>` |
+| `pointerEvents=(undefined)`| (initial)| `<null>` |
+
+## `points` (on `<polygon>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `points=(string)`| (changed)| `[<SVGPoint>, <SVGPoint>, <SVGPoint>]` |
+| `points=(empty string)`| (initial)| `[]` |
+| `points=(array with string)`| (changed)| `[<SVGPoint>, <SVGPoint>, <SVGPoint>]` |
+| `points=(empty array)`| (initial)| `[]` |
+| `points=(object)`| (initial)| `[]` |
+| `points=(numeric string)`| (initial)| `[]` |
+| `points=(-1)`| (initial)| `[]` |
+| `points=(0)`| (initial)| `[]` |
+| `points=(integer)`| (initial)| `[]` |
+| `points=(NaN)`| (initial, warning)| `[]` |
+| `points=(float)`| (initial)| `[]` |
+| `points=(true)`| (initial, warning)| `[]` |
+| `points=(false)`| (initial, warning)| `[]` |
+| `points=(string 'true')`| (initial)| `[]` |
+| `points=(string 'false')`| (initial)| `[]` |
+| `points=(string 'on')`| (initial)| `[]` |
+| `points=(string 'off')`| (initial)| `[]` |
+| `points=(symbol)`| (initial, warning)| `[]` |
+| `points=(function)`| (initial, warning)| `[]` |
+| `points=(null)`| (initial)| `[]` |
+| `points=(undefined)`| (initial)| `[]` |
+
+## `pointsAtX` (on `<feSpotLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pointsAtX=(string)`| (initial)| `<number: 0>` |
+| `pointsAtX=(empty string)`| (initial)| `<number: 0>` |
+| `pointsAtX=(array with string)`| (initial)| `<number: 0>` |
+| `pointsAtX=(empty array)`| (initial)| `<number: 0>` |
+| `pointsAtX=(object)`| (initial)| `<number: 0>` |
+| `pointsAtX=(numeric string)`| (changed)| `<number: 42>` |
+| `pointsAtX=(-1)`| (changed)| `<number: -1>` |
+| `pointsAtX=(0)`| (initial)| `<number: 0>` |
+| `pointsAtX=(integer)`| (changed)| `<number: 1>` |
+| `pointsAtX=(NaN)`| (initial, warning)| `<number: 0>` |
+| `pointsAtX=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `pointsAtX=(true)`| (initial, warning)| `<number: 0>` |
+| `pointsAtX=(false)`| (initial, warning)| `<number: 0>` |
+| `pointsAtX=(string 'true')`| (initial)| `<number: 0>` |
+| `pointsAtX=(string 'false')`| (initial)| `<number: 0>` |
+| `pointsAtX=(string 'on')`| (initial)| `<number: 0>` |
+| `pointsAtX=(string 'off')`| (initial)| `<number: 0>` |
+| `pointsAtX=(symbol)`| (initial, warning)| `<number: 0>` |
+| `pointsAtX=(function)`| (initial, warning)| `<number: 0>` |
+| `pointsAtX=(null)`| (initial)| `<number: 0>` |
+| `pointsAtX=(undefined)`| (initial)| `<number: 0>` |
+
+## `pointsAtY` (on `<feSpotLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pointsAtY=(string)`| (initial)| `<number: 0>` |
+| `pointsAtY=(empty string)`| (initial)| `<number: 0>` |
+| `pointsAtY=(array with string)`| (initial)| `<number: 0>` |
+| `pointsAtY=(empty array)`| (initial)| `<number: 0>` |
+| `pointsAtY=(object)`| (initial)| `<number: 0>` |
+| `pointsAtY=(numeric string)`| (changed)| `<number: 42>` |
+| `pointsAtY=(-1)`| (changed)| `<number: -1>` |
+| `pointsAtY=(0)`| (initial)| `<number: 0>` |
+| `pointsAtY=(integer)`| (changed)| `<number: 1>` |
+| `pointsAtY=(NaN)`| (initial, warning)| `<number: 0>` |
+| `pointsAtY=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `pointsAtY=(true)`| (initial, warning)| `<number: 0>` |
+| `pointsAtY=(false)`| (initial, warning)| `<number: 0>` |
+| `pointsAtY=(string 'true')`| (initial)| `<number: 0>` |
+| `pointsAtY=(string 'false')`| (initial)| `<number: 0>` |
+| `pointsAtY=(string 'on')`| (initial)| `<number: 0>` |
+| `pointsAtY=(string 'off')`| (initial)| `<number: 0>` |
+| `pointsAtY=(symbol)`| (initial, warning)| `<number: 0>` |
+| `pointsAtY=(function)`| (initial, warning)| `<number: 0>` |
+| `pointsAtY=(null)`| (initial)| `<number: 0>` |
+| `pointsAtY=(undefined)`| (initial)| `<number: 0>` |
+
+## `pointsAtZ` (on `<feSpotLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `pointsAtZ=(string)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(empty string)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(array with string)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(empty array)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(object)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(numeric string)`| (changed)| `<number: 42>` |
+| `pointsAtZ=(-1)`| (changed)| `<number: -1>` |
+| `pointsAtZ=(0)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(integer)`| (changed)| `<number: 1>` |
+| `pointsAtZ=(NaN)`| (initial, warning)| `<number: 0>` |
+| `pointsAtZ=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `pointsAtZ=(true)`| (initial, warning)| `<number: 0>` |
+| `pointsAtZ=(false)`| (initial, warning)| `<number: 0>` |
+| `pointsAtZ=(string 'true')`| (initial)| `<number: 0>` |
+| `pointsAtZ=(string 'false')`| (initial)| `<number: 0>` |
+| `pointsAtZ=(string 'on')`| (initial)| `<number: 0>` |
+| `pointsAtZ=(string 'off')`| (initial)| `<number: 0>` |
+| `pointsAtZ=(symbol)`| (initial, warning)| `<number: 0>` |
+| `pointsAtZ=(function)`| (initial, warning)| `<number: 0>` |
+| `pointsAtZ=(null)`| (initial)| `<number: 0>` |
+| `pointsAtZ=(undefined)`| (initial)| `<number: 0>` |
+
+## `popover` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `popover=(string)`| (changed)| `"manual"` |
+| `popover=(empty string)`| (changed)| `"auto"` |
+| `popover=(array with string)`| (changed)| `"manual"` |
+| `popover=(empty array)`| (changed)| `"auto"` |
+| `popover=(object)`| (changed)| `"manual"` |
+| `popover=(numeric string)`| (changed)| `"manual"` |
+| `popover=(-1)`| (changed)| `"manual"` |
+| `popover=(0)`| (changed)| `"manual"` |
+| `popover=(integer)`| (changed)| `"manual"` |
+| `popover=(NaN)`| (changed, warning)| `"manual"` |
+| `popover=(float)`| (changed)| `"manual"` |
+| `popover=(true)`| (initial, warning)| `<null>` |
+| `popover=(false)`| (initial, warning)| `<null>` |
+| `popover=(string 'true')`| (changed)| `"manual"` |
+| `popover=(string 'false')`| (changed)| `"manual"` |
+| `popover=(string 'on')`| (changed)| `"manual"` |
+| `popover=(string 'off')`| (changed)| `"manual"` |
+| `popover=(symbol)`| (initial, warning)| `<null>` |
+| `popover=(function)`| (initial, warning)| `<null>` |
+| `popover=(null)`| (initial)| `<null>` |
+| `popover=(undefined)`| (initial)| `<null>` |
+
+## `popoverTarget` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `popoverTarget=(string)`| (changed)| `<HTMLDivElement>` |
+| `popoverTarget=(empty string)`| (initial)| `<null>` |
+| `popoverTarget=(array with string)`| (changed, warning, ssr warning)| `<HTMLDivElement>` |
+| `popoverTarget=(empty array)`| (initial, warning, ssr warning)| `<null>` |
+| `popoverTarget=(object)`| (initial, warning, ssr warning)| `<null>` |
+| `popoverTarget=(numeric string)`| (initial)| `<null>` |
+| `popoverTarget=(-1)`| (initial)| `<null>` |
+| `popoverTarget=(0)`| (initial)| `<null>` |
+| `popoverTarget=(integer)`| (initial)| `<null>` |
+| `popoverTarget=(NaN)`| (initial, warning)| `<null>` |
+| `popoverTarget=(float)`| (initial)| `<null>` |
+| `popoverTarget=(true)`| (initial, warning)| `<null>` |
+| `popoverTarget=(false)`| (initial, warning)| `<null>` |
+| `popoverTarget=(string 'true')`| (initial)| `<null>` |
+| `popoverTarget=(string 'false')`| (initial)| `<null>` |
+| `popoverTarget=(string 'on')`| (initial)| `<null>` |
+| `popoverTarget=(string 'off')`| (initial)| `<null>` |
+| `popoverTarget=(symbol)`| (initial, warning)| `<null>` |
+| `popoverTarget=(function)`| (initial, warning)| `<null>` |
+| `popoverTarget=(null)`| (initial)| `<null>` |
+| `popoverTarget=(undefined)`| (initial)| `<null>` |
+
+## `popoverTargetAction` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `popoverTargetAction=(string)`| (changed)| `"show"` |
+| `popoverTargetAction=(empty string)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(array with string)`| (changed)| `"show"` |
+| `popoverTargetAction=(empty array)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(object)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(numeric string)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(-1)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(0)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(integer)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(NaN)`| (initial, warning)| `"toggle"` |
+| `popoverTargetAction=(float)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(true)`| (initial, warning)| `"toggle"` |
+| `popoverTargetAction=(false)`| (initial, warning)| `"toggle"` |
+| `popoverTargetAction=(string 'true')`| (initial)| `"toggle"` |
+| `popoverTargetAction=(string 'false')`| (initial)| `"toggle"` |
+| `popoverTargetAction=(string 'on')`| (initial)| `"toggle"` |
+| `popoverTargetAction=(string 'off')`| (initial)| `"toggle"` |
+| `popoverTargetAction=(symbol)`| (initial, warning)| `"toggle"` |
+| `popoverTargetAction=(function)`| (initial, warning)| `"toggle"` |
+| `popoverTargetAction=(null)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(undefined)`| (initial)| `"toggle"` |
+
+## `poster` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `poster=(string)`| (changed)| `"https://reactjs.com/"` |
+| `poster=(empty string)`| (changed)| `"http://localhost:3000/"` |
+| `poster=(array with string)`| (changed)| `"https://reactjs.com/"` |
+| `poster=(empty array)`| (changed)| `"http://localhost:3000/"` |
+| `poster=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
+| `poster=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
+| `poster=(-1)`| (changed)| `"http://localhost:3000/-1"` |
+| `poster=(0)`| (changed)| `"http://localhost:3000/0"` |
+| `poster=(integer)`| (changed)| `"http://localhost:3000/1"` |
+| `poster=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
+| `poster=(float)`| (changed)| `"http://localhost:3000/99.99"` |
+| `poster=(true)`| (initial, warning)| `<empty string>` |
+| `poster=(false)`| (initial, warning)| `<empty string>` |
+| `poster=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
+| `poster=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
+| `poster=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
+| `poster=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
+| `poster=(symbol)`| (initial, warning)| `<empty string>` |
+| `poster=(function)`| (initial, warning)| `<empty string>` |
+| `poster=(null)`| (initial)| `<empty string>` |
+| `poster=(undefined)`| (initial)| `<empty string>` |
+
+## `prefix` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `prefix=(string)`| (changed)| `"a string"` |
+| `prefix=(empty string)`| (changed)| `<empty string>` |
+| `prefix=(array with string)`| (changed)| `"string"` |
+| `prefix=(empty array)`| (changed)| `<empty string>` |
+| `prefix=(object)`| (changed)| `"result of toString()"` |
+| `prefix=(numeric string)`| (changed)| `"42"` |
+| `prefix=(-1)`| (changed)| `"-1"` |
+| `prefix=(0)`| (changed)| `"0"` |
+| `prefix=(integer)`| (changed)| `"1"` |
+| `prefix=(NaN)`| (changed, warning)| `"NaN"` |
+| `prefix=(float)`| (changed)| `"99.99"` |
+| `prefix=(true)`| (initial, warning)| `<null>` |
+| `prefix=(false)`| (initial, warning)| `<null>` |
+| `prefix=(string 'true')`| (changed)| `"true"` |
+| `prefix=(string 'false')`| (changed)| `"false"` |
+| `prefix=(string 'on')`| (changed)| `"on"` |
+| `prefix=(string 'off')`| (changed)| `"off"` |
+| `prefix=(symbol)`| (initial, warning)| `<null>` |
+| `prefix=(function)`| (initial, warning)| `<null>` |
+| `prefix=(null)`| (initial)| `<null>` |
+| `prefix=(undefined)`| (initial)| `<null>` |
+
+## `preload` (on `<video>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `preload=(string)`| (changed)| `"none"` |
+| `preload=(empty string)`| (changed)| `"auto"` |
+| `preload=(array with string)`| (changed)| `"none"` |
+| `preload=(empty array)`| (changed)| `"auto"` |
+| `preload=(object)`| (initial)| `"metadata"` |
+| `preload=(numeric string)`| (initial)| `"metadata"` |
+| `preload=(-1)`| (initial)| `"metadata"` |
+| `preload=(0)`| (initial)| `"metadata"` |
+| `preload=(integer)`| (initial)| `"metadata"` |
+| `preload=(NaN)`| (initial, warning)| `"metadata"` |
+| `preload=(float)`| (initial)| `"metadata"` |
+| `preload=(true)`| (initial, warning)| `"metadata"` |
+| `preload=(false)`| (initial, warning)| `"metadata"` |
+| `preload=(string 'true')`| (initial)| `"metadata"` |
+| `preload=(string 'false')`| (initial)| `"metadata"` |
+| `preload=(string 'on')`| (initial)| `"metadata"` |
+| `preload=(string 'off')`| (initial)| `"metadata"` |
+| `preload=(symbol)`| (initial, warning)| `"metadata"` |
+| `preload=(function)`| (initial, warning)| `"metadata"` |
+| `preload=(null)`| (initial)| `"metadata"` |
+| `preload=(undefined)`| (initial)| `"metadata"` |
+
+## `preserveAlpha` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `preserveAlpha=(string)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(empty string)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(array with string)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(empty array)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(object)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(numeric string)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(-1)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(0)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(integer)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `preserveAlpha=(float)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(true)`| (changed)| `<boolean: true>` |
+| `preserveAlpha=(false)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(string 'true')`| (changed)| `<boolean: true>` |
+| `preserveAlpha=(string 'false')`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(string 'on')`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(string 'off')`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `preserveAlpha=(function)`| (initial, warning)| `<boolean: false>` |
+| `preserveAlpha=(null)`| (initial)| `<boolean: false>` |
+| `preserveAlpha=(undefined)`| (initial)| `<boolean: false>` |
+
+## `preserveAspectRatio` (on `<feImage>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `preserveAspectRatio=(string)`| (changed)| `<SVGPreserveAspectRatio: 2/2>` |
+| `preserveAspectRatio=(empty string)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(array with string)`| (changed)| `<SVGPreserveAspectRatio: 2/2>` |
+| `preserveAspectRatio=(empty array)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(object)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(numeric string)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(-1)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(0)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(integer)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(NaN)`| (initial, warning)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(float)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(true)`| (initial, warning)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(false)`| (initial, warning)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(string 'true')`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(string 'false')`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(string 'on')`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(string 'off')`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(symbol)`| (initial, warning)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(function)`| (initial, warning)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(null)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+| `preserveAspectRatio=(undefined)`| (initial)| `<SVGPreserveAspectRatio: 6/1>` |
+
+## `primitiveUnits` (on `<filter>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `primitiveUnits=(string)`| (changed)| `<number: 2>` |
+| `primitiveUnits=(empty string)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(array with string)`| (changed)| `<number: 2>` |
+| `primitiveUnits=(empty array)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(object)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(numeric string)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(-1)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(0)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(integer)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(NaN)`| (initial, warning)| `<number: 1>` |
+| `primitiveUnits=(float)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(true)`| (initial, warning)| `<number: 1>` |
+| `primitiveUnits=(false)`| (initial, warning)| `<number: 1>` |
+| `primitiveUnits=(string 'true')`| (initial)| `<number: 1>` |
+| `primitiveUnits=(string 'false')`| (initial)| `<number: 1>` |
+| `primitiveUnits=(string 'on')`| (initial)| `<number: 1>` |
+| `primitiveUnits=(string 'off')`| (initial)| `<number: 1>` |
+| `primitiveUnits=(symbol)`| (initial, warning)| `<number: 1>` |
+| `primitiveUnits=(function)`| (initial, warning)| `<number: 1>` |
+| `primitiveUnits=(null)`| (initial)| `<number: 1>` |
+| `primitiveUnits=(undefined)`| (initial)| `<number: 1>` |
+
+## `profile` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `profile=(string)`| (changed)| `"a string"` |
+| `profile=(empty string)`| (changed)| `<empty string>` |
+| `profile=(array with string)`| (changed)| `"string"` |
+| `profile=(empty array)`| (changed)| `<empty string>` |
+| `profile=(object)`| (changed)| `"result of toString()"` |
+| `profile=(numeric string)`| (changed)| `"42"` |
+| `profile=(-1)`| (changed)| `"-1"` |
+| `profile=(0)`| (changed)| `"0"` |
+| `profile=(integer)`| (changed)| `"1"` |
+| `profile=(NaN)`| (changed, warning)| `"NaN"` |
+| `profile=(float)`| (changed)| `"99.99"` |
+| `profile=(true)`| (initial, warning)| `<null>` |
+| `profile=(false)`| (initial, warning)| `<null>` |
+| `profile=(string 'true')`| (changed)| `"true"` |
+| `profile=(string 'false')`| (changed)| `"false"` |
+| `profile=(string 'on')`| (changed)| `"on"` |
+| `profile=(string 'off')`| (changed)| `"off"` |
+| `profile=(symbol)`| (initial, warning)| `<null>` |
+| `profile=(function)`| (initial, warning)| `<null>` |
+| `profile=(null)`| (initial)| `<null>` |
+| `profile=(undefined)`| (initial)| `<null>` |
+
+## `property` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `property=(string)`| (changed)| `"a string"` |
+| `property=(empty string)`| (changed)| `<empty string>` |
+| `property=(array with string)`| (changed)| `"string"` |
+| `property=(empty array)`| (changed)| `<empty string>` |
+| `property=(object)`| (changed)| `"result of toString()"` |
+| `property=(numeric string)`| (changed)| `"42"` |
+| `property=(-1)`| (changed)| `"-1"` |
+| `property=(0)`| (changed)| `"0"` |
+| `property=(integer)`| (changed)| `"1"` |
+| `property=(NaN)`| (changed, warning)| `"NaN"` |
+| `property=(float)`| (changed)| `"99.99"` |
+| `property=(true)`| (initial, warning)| `<null>` |
+| `property=(false)`| (initial, warning)| `<null>` |
+| `property=(string 'true')`| (changed)| `"true"` |
+| `property=(string 'false')`| (changed)| `"false"` |
+| `property=(string 'on')`| (changed)| `"on"` |
+| `property=(string 'off')`| (changed)| `"off"` |
+| `property=(symbol)`| (initial, warning)| `<null>` |
+| `property=(function)`| (initial, warning)| `<null>` |
+| `property=(null)`| (initial)| `<null>` |
+| `property=(undefined)`| (initial)| `<null>` |
+
+## `props` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `props=(string)`| (changed)| `"a string"` |
+| `props=(empty string)`| (changed)| `<empty string>` |
+| `props=(array with string)`| (changed)| `"string"` |
+| `props=(empty array)`| (changed)| `<empty string>` |
+| `props=(object)`| (changed)| `"result of toString()"` |
+| `props=(numeric string)`| (changed)| `"42"` |
+| `props=(-1)`| (changed)| `"-1"` |
+| `props=(0)`| (changed)| `"0"` |
+| `props=(integer)`| (changed)| `"1"` |
+| `props=(NaN)`| (changed, warning)| `"NaN"` |
+| `props=(float)`| (changed)| `"99.99"` |
+| `props=(true)`| (initial, warning)| `<null>` |
+| `props=(false)`| (initial, warning)| `<null>` |
+| `props=(string 'true')`| (changed)| `"true"` |
+| `props=(string 'false')`| (changed)| `"false"` |
+| `props=(string 'on')`| (changed)| `"on"` |
+| `props=(string 'off')`| (changed)| `"off"` |
+| `props=(symbol)`| (initial, warning)| `<null>` |
+| `props=(function)`| (initial, warning)| `<null>` |
+| `props=(null)`| (initial)| `<null>` |
+| `props=(undefined)`| (initial)| `<null>` |
+
+## `r` (on `<circle>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `r=(string)`| (changed)| `<SVGLength: 10pt>` |
+| `r=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `r=(array with string)`| (changed)| `<SVGLength: 10pt>` |
+| `r=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `r=(object)`| (initial)| `<SVGLength: 0>` |
+| `r=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `r=(-1)`| (changed)| `<SVGLength: -1>` |
+| `r=(0)`| (initial)| `<SVGLength: 0>` |
+| `r=(integer)`| (changed)| `<SVGLength: 1>` |
+| `r=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `r=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `r=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `r=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `r=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `r=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `r=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `r=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `r=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `r=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `r=(null)`| (initial)| `<SVGLength: 0>` |
+| `r=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `radioGroup` (on `<command>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `radioGroup=(string)`| (changed)| `"a string"` |
+| `radioGroup=(empty string)`| (changed)| `<empty string>` |
+| `radioGroup=(array with string)`| (changed)| `"string"` |
+| `radioGroup=(empty array)`| (changed)| `<empty string>` |
+| `radioGroup=(object)`| (changed)| `"result of toString()"` |
+| `radioGroup=(numeric string)`| (changed)| `"42"` |
+| `radioGroup=(-1)`| (changed)| `"-1"` |
+| `radioGroup=(0)`| (changed)| `"0"` |
+| `radioGroup=(integer)`| (changed)| `"1"` |
+| `radioGroup=(NaN)`| (changed, warning)| `"NaN"` |
+| `radioGroup=(float)`| (changed)| `"99.99"` |
+| `radioGroup=(true)`| (initial, warning)| `<null>` |
+| `radioGroup=(false)`| (initial, warning)| `<null>` |
+| `radioGroup=(string 'true')`| (changed)| `"true"` |
+| `radioGroup=(string 'false')`| (changed)| `"false"` |
+| `radioGroup=(string 'on')`| (changed)| `"on"` |
+| `radioGroup=(string 'off')`| (changed)| `"off"` |
+| `radioGroup=(symbol)`| (initial, warning)| `<null>` |
+| `radioGroup=(function)`| (initial, warning)| `<null>` |
+| `radioGroup=(null)`| (initial)| `<null>` |
+| `radioGroup=(undefined)`| (initial)| `<null>` |
+
+## `radius` (on `<feMorphology>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `radius=(string)`| (changed)| `"a string"` |
+| `radius=(empty string)`| (changed)| `<empty string>` |
+| `radius=(array with string)`| (changed)| `"string"` |
+| `radius=(empty array)`| (changed)| `<empty string>` |
+| `radius=(object)`| (changed)| `"result of toString()"` |
+| `radius=(numeric string)`| (changed)| `"42"` |
+| `radius=(-1)`| (changed)| `"-1"` |
+| `radius=(0)`| (changed)| `"0"` |
+| `radius=(integer)`| (changed)| `"1"` |
+| `radius=(NaN)`| (changed, warning)| `"NaN"` |
+| `radius=(float)`| (changed)| `"99.99"` |
+| `radius=(true)`| (initial, warning)| `<null>` |
+| `radius=(false)`| (initial, warning)| `<null>` |
+| `radius=(string 'true')`| (changed)| `"true"` |
+| `radius=(string 'false')`| (changed)| `"false"` |
+| `radius=(string 'on')`| (changed)| `"on"` |
+| `radius=(string 'off')`| (changed)| `"off"` |
+| `radius=(symbol)`| (initial, warning)| `<null>` |
+| `radius=(function)`| (initial, warning)| `<null>` |
+| `radius=(null)`| (initial)| `<null>` |
+| `radius=(undefined)`| (initial)| `<null>` |
+
+## `readOnly` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `readOnly=(string)`| (changed)| `<boolean: true>` |
+| `readOnly=(empty string)`| (initial)| `<boolean: false>` |
+| `readOnly=(array with string)`| (changed)| `<boolean: true>` |
+| `readOnly=(empty array)`| (changed)| `<boolean: true>` |
+| `readOnly=(object)`| (changed)| `<boolean: true>` |
+| `readOnly=(numeric string)`| (changed)| `<boolean: true>` |
+| `readOnly=(-1)`| (changed)| `<boolean: true>` |
+| `readOnly=(0)`| (initial)| `<boolean: false>` |
+| `readOnly=(integer)`| (changed)| `<boolean: true>` |
+| `readOnly=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `readOnly=(float)`| (changed)| `<boolean: true>` |
+| `readOnly=(true)`| (changed)| `<boolean: true>` |
+| `readOnly=(false)`| (initial)| `<boolean: false>` |
+| `readOnly=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `readOnly=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `readOnly=(string 'on')`| (changed)| `<boolean: true>` |
+| `readOnly=(string 'off')`| (changed)| `<boolean: true>` |
+| `readOnly=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `readOnly=(function)`| (initial, warning)| `<boolean: false>` |
+| `readOnly=(null)`| (initial)| `<boolean: false>` |
+| `readOnly=(undefined)`| (initial)| `<boolean: false>` |
+
+## `referrerPolicy` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `referrerPolicy=(string)`| (initial)| `<empty string>` |
+| `referrerPolicy=(empty string)`| (initial)| `<empty string>` |
+| `referrerPolicy=(array with string)`| (initial)| `<empty string>` |
+| `referrerPolicy=(empty array)`| (initial)| `<empty string>` |
+| `referrerPolicy=(object)`| (initial)| `<empty string>` |
+| `referrerPolicy=(numeric string)`| (initial)| `<empty string>` |
+| `referrerPolicy=(-1)`| (initial)| `<empty string>` |
+| `referrerPolicy=(0)`| (initial)| `<empty string>` |
+| `referrerPolicy=(integer)`| (initial)| `<empty string>` |
+| `referrerPolicy=(NaN)`| (initial, warning)| `<empty string>` |
+| `referrerPolicy=(float)`| (initial)| `<empty string>` |
+| `referrerPolicy=(true)`| (initial, warning)| `<empty string>` |
+| `referrerPolicy=(false)`| (initial, warning)| `<empty string>` |
+| `referrerPolicy=(string 'true')`| (initial)| `<empty string>` |
+| `referrerPolicy=(string 'false')`| (initial)| `<empty string>` |
+| `referrerPolicy=(string 'on')`| (initial)| `<empty string>` |
+| `referrerPolicy=(string 'off')`| (initial)| `<empty string>` |
+| `referrerPolicy=(symbol)`| (initial, warning)| `<empty string>` |
+| `referrerPolicy=(function)`| (initial, warning)| `<empty string>` |
+| `referrerPolicy=(null)`| (initial)| `<empty string>` |
+| `referrerPolicy=(undefined)`| (initial)| `<empty string>` |
+
+## `refX` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `refX=(string)`| (changed)| `<SVGLength: 5em>` |
+| `refX=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `refX=(array with string)`| (changed)| `<SVGLength: 5em>` |
+| `refX=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `refX=(object)`| (initial)| `<SVGLength: 0>` |
+| `refX=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `refX=(-1)`| (changed)| `<SVGLength: -1>` |
+| `refX=(0)`| (initial)| `<SVGLength: 0>` |
+| `refX=(integer)`| (changed)| `<SVGLength: 1>` |
+| `refX=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `refX=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `refX=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `refX=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `refX=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `refX=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `refX=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `refX=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `refX=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `refX=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `refX=(null)`| (initial)| `<SVGLength: 0>` |
+| `refX=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `refY` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `refY=(string)`| (changed)| `<SVGLength: 6em>` |
+| `refY=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `refY=(array with string)`| (changed)| `<SVGLength: 6em>` |
+| `refY=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `refY=(object)`| (initial)| `<SVGLength: 0>` |
+| `refY=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `refY=(-1)`| (changed)| `<SVGLength: -1>` |
+| `refY=(0)`| (initial)| `<SVGLength: 0>` |
+| `refY=(integer)`| (changed)| `<SVGLength: 1>` |
+| `refY=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `refY=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `refY=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `refY=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `refY=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `refY=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `refY=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `refY=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `refY=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `refY=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `refY=(null)`| (initial)| `<SVGLength: 0>` |
+| `refY=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `rel` (on `<a>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `rel=(string)`| (changed)| `"a string"` |
+| `rel=(empty string)`| (initial)| `<empty string>` |
+| `rel=(array with string)`| (changed)| `"string"` |
+| `rel=(empty array)`| (initial)| `<empty string>` |
+| `rel=(object)`| (changed)| `"result of toString()"` |
+| `rel=(numeric string)`| (changed)| `"42"` |
+| `rel=(-1)`| (changed)| `"-1"` |
+| `rel=(0)`| (changed)| `"0"` |
+| `rel=(integer)`| (changed)| `"1"` |
+| `rel=(NaN)`| (changed, warning)| `"NaN"` |
+| `rel=(float)`| (changed)| `"99.99"` |
+| `rel=(true)`| (initial, warning)| `<empty string>` |
+| `rel=(false)`| (initial, warning)| `<empty string>` |
+| `rel=(string 'true')`| (changed)| `"true"` |
+| `rel=(string 'false')`| (changed)| `"false"` |
+| `rel=(string 'on')`| (changed)| `"on"` |
+| `rel=(string 'off')`| (changed)| `"off"` |
+| `rel=(symbol)`| (initial, warning)| `<empty string>` |
+| `rel=(function)`| (initial, warning)| `<empty string>` |
+| `rel=(null)`| (initial)| `<empty string>` |
+| `rel=(undefined)`| (initial)| `<empty string>` |
+
+## `rendering-intent` (on `<color-profile>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `rendering-intent=(string)`| (changed, warning)| `"a string"` |
+| `rendering-intent=(empty string)`| (changed, warning)| `<empty string>` |
+| `rendering-intent=(array with string)`| (changed, warning)| `"string"` |
+| `rendering-intent=(empty array)`| (changed, warning)| `<empty string>` |
+| `rendering-intent=(object)`| (changed, warning)| `"result of toString()"` |
+| `rendering-intent=(numeric string)`| (changed, warning)| `"42"` |
+| `rendering-intent=(-1)`| (changed, warning)| `"-1"` |
+| `rendering-intent=(0)`| (changed, warning)| `"0"` |
+| `rendering-intent=(integer)`| (changed, warning)| `"1"` |
+| `rendering-intent=(NaN)`| (changed, warning)| `"NaN"` |
+| `rendering-intent=(float)`| (changed, warning)| `"99.99"` |
+| `rendering-intent=(true)`| (initial, warning)| `<null>` |
+| `rendering-intent=(false)`| (initial, warning)| `<null>` |
+| `rendering-intent=(string 'true')`| (changed, warning)| `"true"` |
+| `rendering-intent=(string 'false')`| (changed, warning)| `"false"` |
+| `rendering-intent=(string 'on')`| (changed, warning)| `"on"` |
+| `rendering-intent=(string 'off')`| (changed, warning)| `"off"` |
+| `rendering-intent=(symbol)`| (initial, warning)| `<null>` |
+| `rendering-intent=(function)`| (initial, warning)| `<null>` |
+| `rendering-intent=(null)`| (initial, warning)| `<null>` |
+| `rendering-intent=(undefined)`| (initial, warning)| `<null>` |
+
+## `renderingIntent` (on `<color-profile>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `renderingIntent=(string)`| (changed)| `"a string"` |
+| `renderingIntent=(empty string)`| (changed)| `<empty string>` |
+| `renderingIntent=(array with string)`| (changed)| `"string"` |
+| `renderingIntent=(empty array)`| (changed)| `<empty string>` |
+| `renderingIntent=(object)`| (changed)| `"result of toString()"` |
+| `renderingIntent=(numeric string)`| (changed)| `"42"` |
+| `renderingIntent=(-1)`| (changed)| `"-1"` |
+| `renderingIntent=(0)`| (changed)| `"0"` |
+| `renderingIntent=(integer)`| (changed)| `"1"` |
+| `renderingIntent=(NaN)`| (changed, warning)| `"NaN"` |
+| `renderingIntent=(float)`| (changed)| `"99.99"` |
+| `renderingIntent=(true)`| (initial, warning)| `<null>` |
+| `renderingIntent=(false)`| (initial, warning)| `<null>` |
+| `renderingIntent=(string 'true')`| (changed)| `"true"` |
+| `renderingIntent=(string 'false')`| (changed)| `"false"` |
+| `renderingIntent=(string 'on')`| (changed)| `"on"` |
+| `renderingIntent=(string 'off')`| (changed)| `"off"` |
+| `renderingIntent=(symbol)`| (initial, warning)| `<null>` |
+| `renderingIntent=(function)`| (initial, warning)| `<null>` |
+| `renderingIntent=(null)`| (initial)| `<null>` |
+| `renderingIntent=(undefined)`| (initial)| `<null>` |
+
+## `repeatCount` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `repeatCount=(string)`| (initial)| `<null>` |
+| `repeatCount=(empty string)`| (initial)| `<null>` |
+| `repeatCount=(array with string)`| (initial)| `<null>` |
+| `repeatCount=(empty array)`| (initial)| `<null>` |
+| `repeatCount=(object)`| (initial)| `<null>` |
+| `repeatCount=(numeric string)`| (initial)| `<null>` |
+| `repeatCount=(-1)`| (initial)| `<null>` |
+| `repeatCount=(0)`| (initial)| `<null>` |
+| `repeatCount=(integer)`| (initial)| `<null>` |
+| `repeatCount=(NaN)`| (initial, warning)| `<null>` |
+| `repeatCount=(float)`| (initial)| `<null>` |
+| `repeatCount=(true)`| (initial, warning)| `<null>` |
+| `repeatCount=(false)`| (initial, warning)| `<null>` |
+| `repeatCount=(string 'true')`| (initial)| `<null>` |
+| `repeatCount=(string 'false')`| (initial)| `<null>` |
+| `repeatCount=(string 'on')`| (initial)| `<null>` |
+| `repeatCount=(string 'off')`| (initial)| `<null>` |
+| `repeatCount=(symbol)`| (initial, warning)| `<null>` |
+| `repeatCount=(function)`| (initial, warning)| `<null>` |
+| `repeatCount=(null)`| (initial)| `<null>` |
+| `repeatCount=(undefined)`| (initial)| `<null>` |
+
+## `repeatDur` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `repeatDur=(string)`| (initial)| `<null>` |
+| `repeatDur=(empty string)`| (initial)| `<null>` |
+| `repeatDur=(array with string)`| (initial)| `<null>` |
+| `repeatDur=(empty array)`| (initial)| `<null>` |
+| `repeatDur=(object)`| (initial)| `<null>` |
+| `repeatDur=(numeric string)`| (initial)| `<null>` |
+| `repeatDur=(-1)`| (initial)| `<null>` |
+| `repeatDur=(0)`| (initial)| `<null>` |
+| `repeatDur=(integer)`| (initial)| `<null>` |
+| `repeatDur=(NaN)`| (initial, warning)| `<null>` |
+| `repeatDur=(float)`| (initial)| `<null>` |
+| `repeatDur=(true)`| (initial, warning)| `<null>` |
+| `repeatDur=(false)`| (initial, warning)| `<null>` |
+| `repeatDur=(string 'true')`| (initial)| `<null>` |
+| `repeatDur=(string 'false')`| (initial)| `<null>` |
+| `repeatDur=(string 'on')`| (initial)| `<null>` |
+| `repeatDur=(string 'off')`| (initial)| `<null>` |
+| `repeatDur=(symbol)`| (initial, warning)| `<null>` |
+| `repeatDur=(function)`| (initial, warning)| `<null>` |
+| `repeatDur=(null)`| (initial)| `<null>` |
+| `repeatDur=(undefined)`| (initial)| `<null>` |
+
+## `required` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `required=(string)`| (changed)| `<boolean: true>` |
+| `required=(empty string)`| (initial)| `<boolean: false>` |
+| `required=(array with string)`| (changed)| `<boolean: true>` |
+| `required=(empty array)`| (changed)| `<boolean: true>` |
+| `required=(object)`| (changed)| `<boolean: true>` |
+| `required=(numeric string)`| (changed)| `<boolean: true>` |
+| `required=(-1)`| (changed)| `<boolean: true>` |
+| `required=(0)`| (initial)| `<boolean: false>` |
+| `required=(integer)`| (changed)| `<boolean: true>` |
+| `required=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `required=(float)`| (changed)| `<boolean: true>` |
+| `required=(true)`| (changed)| `<boolean: true>` |
+| `required=(false)`| (initial)| `<boolean: false>` |
+| `required=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `required=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `required=(string 'on')`| (changed)| `<boolean: true>` |
+| `required=(string 'off')`| (changed)| `<boolean: true>` |
+| `required=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `required=(function)`| (initial, warning)| `<boolean: false>` |
+| `required=(null)`| (initial)| `<boolean: false>` |
+| `required=(undefined)`| (initial)| `<boolean: false>` |
+
+## `requiredExtensions` (on `<a>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `requiredExtensions=(string)`| (changed)| `["a", "string"]` |
+| `requiredExtensions=(empty string)`| (initial)| `[]` |
+| `requiredExtensions=(array with string)`| (changed)| `["string"]` |
+| `requiredExtensions=(empty array)`| (initial)| `[]` |
+| `requiredExtensions=(object)`| (changed)| `["result", "of", "toString()"]` |
+| `requiredExtensions=(numeric string)`| (changed)| `["42"]` |
+| `requiredExtensions=(-1)`| (changed)| `["-1"]` |
+| `requiredExtensions=(0)`| (changed)| `["0"]` |
+| `requiredExtensions=(integer)`| (changed)| `["1"]` |
+| `requiredExtensions=(NaN)`| (changed, warning)| `["NaN"]` |
+| `requiredExtensions=(float)`| (changed)| `["99.99"]` |
+| `requiredExtensions=(true)`| (initial, warning)| `[]` |
+| `requiredExtensions=(false)`| (initial, warning)| `[]` |
+| `requiredExtensions=(string 'true')`| (changed)| `["true"]` |
+| `requiredExtensions=(string 'false')`| (changed)| `["false"]` |
+| `requiredExtensions=(string 'on')`| (changed)| `["on"]` |
+| `requiredExtensions=(string 'off')`| (changed)| `["off"]` |
+| `requiredExtensions=(symbol)`| (initial, warning)| `[]` |
+| `requiredExtensions=(function)`| (initial, warning)| `[]` |
+| `requiredExtensions=(null)`| (initial)| `[]` |
+| `requiredExtensions=(undefined)`| (initial)| `[]` |
+
+## `requiredFeatures` (on `<a>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `requiredFeatures=(string)`| (changed)| `"a string"` |
+| `requiredFeatures=(empty string)`| (changed)| `<empty string>` |
+| `requiredFeatures=(array with string)`| (changed)| `"string"` |
+| `requiredFeatures=(empty array)`| (changed)| `<empty string>` |
+| `requiredFeatures=(object)`| (changed)| `"result of toString()"` |
+| `requiredFeatures=(numeric string)`| (changed)| `"42"` |
+| `requiredFeatures=(-1)`| (changed)| `"-1"` |
+| `requiredFeatures=(0)`| (changed)| `"0"` |
+| `requiredFeatures=(integer)`| (changed)| `"1"` |
+| `requiredFeatures=(NaN)`| (changed, warning)| `"NaN"` |
+| `requiredFeatures=(float)`| (changed)| `"99.99"` |
+| `requiredFeatures=(true)`| (initial, warning)| `<null>` |
+| `requiredFeatures=(false)`| (initial, warning)| `<null>` |
+| `requiredFeatures=(string 'true')`| (changed)| `"true"` |
+| `requiredFeatures=(string 'false')`| (changed)| `"false"` |
+| `requiredFeatures=(string 'on')`| (changed)| `"on"` |
+| `requiredFeatures=(string 'off')`| (changed)| `"off"` |
+| `requiredFeatures=(symbol)`| (initial, warning)| `<null>` |
+| `requiredFeatures=(function)`| (initial, warning)| `<null>` |
+| `requiredFeatures=(null)`| (initial)| `<null>` |
+| `requiredFeatures=(undefined)`| (initial)| `<null>` |
+
+## `resource` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `resource=(string)`| (changed)| `"a string"` |
+| `resource=(empty string)`| (changed)| `<empty string>` |
+| `resource=(array with string)`| (changed)| `"string"` |
+| `resource=(empty array)`| (changed)| `<empty string>` |
+| `resource=(object)`| (changed)| `"result of toString()"` |
+| `resource=(numeric string)`| (changed)| `"42"` |
+| `resource=(-1)`| (changed)| `"-1"` |
+| `resource=(0)`| (changed)| `"0"` |
+| `resource=(integer)`| (changed)| `"1"` |
+| `resource=(NaN)`| (changed, warning)| `"NaN"` |
+| `resource=(float)`| (changed)| `"99.99"` |
+| `resource=(true)`| (initial, warning)| `<null>` |
+| `resource=(false)`| (initial, warning)| `<null>` |
+| `resource=(string 'true')`| (changed)| `"true"` |
+| `resource=(string 'false')`| (changed)| `"false"` |
+| `resource=(string 'on')`| (changed)| `"on"` |
+| `resource=(string 'off')`| (changed)| `"off"` |
+| `resource=(symbol)`| (initial, warning)| `<null>` |
+| `resource=(function)`| (initial, warning)| `<null>` |
+| `resource=(null)`| (initial)| `<null>` |
+| `resource=(undefined)`| (initial)| `<null>` |
+
+## `restart` (on `<animate>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `restart=(string)`| (initial)| `<null>` |
+| `restart=(empty string)`| (initial)| `<null>` |
+| `restart=(array with string)`| (initial)| `<null>` |
+| `restart=(empty array)`| (initial)| `<null>` |
+| `restart=(object)`| (initial)| `<null>` |
+| `restart=(numeric string)`| (initial)| `<null>` |
+| `restart=(-1)`| (initial)| `<null>` |
+| `restart=(0)`| (initial)| `<null>` |
+| `restart=(integer)`| (initial)| `<null>` |
+| `restart=(NaN)`| (initial, warning)| `<null>` |
+| `restart=(float)`| (initial)| `<null>` |
+| `restart=(true)`| (initial, warning)| `<null>` |
+| `restart=(false)`| (initial, warning)| `<null>` |
+| `restart=(string 'true')`| (initial)| `<null>` |
+| `restart=(string 'false')`| (initial)| `<null>` |
+| `restart=(string 'on')`| (initial)| `<null>` |
+| `restart=(string 'off')`| (initial)| `<null>` |
+| `restart=(symbol)`| (initial, warning)| `<null>` |
+| `restart=(function)`| (initial, warning)| `<null>` |
+| `restart=(null)`| (initial)| `<null>` |
+| `restart=(undefined)`| (initial)| `<null>` |
+
+## `result` (on `<feBlend>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `result=(string)`| (changed)| `"a string"` |
+| `result=(empty string)`| (initial)| `<empty string>` |
+| `result=(array with string)`| (changed)| `"string"` |
+| `result=(empty array)`| (initial)| `<empty string>` |
+| `result=(object)`| (changed)| `"result of toString()"` |
+| `result=(numeric string)`| (changed)| `"42"` |
+| `result=(-1)`| (changed)| `"-1"` |
+| `result=(0)`| (changed)| `"0"` |
+| `result=(integer)`| (changed)| `"1"` |
+| `result=(NaN)`| (changed, warning)| `"NaN"` |
+| `result=(float)`| (changed)| `"99.99"` |
+| `result=(true)`| (initial, warning)| `<empty string>` |
+| `result=(false)`| (initial, warning)| `<empty string>` |
+| `result=(string 'true')`| (changed)| `"true"` |
+| `result=(string 'false')`| (changed)| `"false"` |
+| `result=(string 'on')`| (changed)| `"on"` |
+| `result=(string 'off')`| (changed)| `"off"` |
+| `result=(symbol)`| (initial, warning)| `<empty string>` |
+| `result=(function)`| (initial, warning)| `<empty string>` |
+| `result=(null)`| (initial)| `<empty string>` |
+| `result=(undefined)`| (initial)| `<empty string>` |
+
+## `results` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `results=(string)`| (changed)| `"a string"` |
+| `results=(empty string)`| (changed)| `<empty string>` |
+| `results=(array with string)`| (changed)| `"string"` |
+| `results=(empty array)`| (changed)| `<empty string>` |
+| `results=(object)`| (changed)| `"result of toString()"` |
+| `results=(numeric string)`| (changed)| `"42"` |
+| `results=(-1)`| (changed)| `"-1"` |
+| `results=(0)`| (changed)| `"0"` |
+| `results=(integer)`| (changed)| `"1"` |
+| `results=(NaN)`| (changed, warning)| `"NaN"` |
+| `results=(float)`| (changed)| `"99.99"` |
+| `results=(true)`| (initial, warning)| `<null>` |
+| `results=(false)`| (initial, warning)| `<null>` |
+| `results=(string 'true')`| (changed)| `"true"` |
+| `results=(string 'false')`| (changed)| `"false"` |
+| `results=(string 'on')`| (changed)| `"on"` |
+| `results=(string 'off')`| (changed)| `"off"` |
+| `results=(symbol)`| (initial, warning)| `<null>` |
+| `results=(function)`| (initial, warning)| `<null>` |
+| `results=(null)`| (initial)| `<null>` |
+| `results=(undefined)`| (initial)| `<null>` |
+
+## `reversed` (on `<ol>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `reversed=(string)`| (changed)| `<boolean: true>` |
+| `reversed=(empty string)`| (initial)| `<boolean: false>` |
+| `reversed=(array with string)`| (changed)| `<boolean: true>` |
+| `reversed=(empty array)`| (changed)| `<boolean: true>` |
+| `reversed=(object)`| (changed)| `<boolean: true>` |
+| `reversed=(numeric string)`| (changed)| `<boolean: true>` |
+| `reversed=(-1)`| (changed)| `<boolean: true>` |
+| `reversed=(0)`| (initial)| `<boolean: false>` |
+| `reversed=(integer)`| (changed)| `<boolean: true>` |
+| `reversed=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `reversed=(float)`| (changed)| `<boolean: true>` |
+| `reversed=(true)`| (changed)| `<boolean: true>` |
+| `reversed=(false)`| (initial)| `<boolean: false>` |
+| `reversed=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `reversed=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `reversed=(string 'on')`| (changed)| `<boolean: true>` |
+| `reversed=(string 'off')`| (changed)| `<boolean: true>` |
+| `reversed=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `reversed=(function)`| (initial, warning)| `<boolean: false>` |
+| `reversed=(null)`| (initial)| `<boolean: false>` |
+| `reversed=(undefined)`| (initial)| `<boolean: false>` |
+
+## `role` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `role=(string)`| (changed)| `"a string"` |
+| `role=(empty string)`| (changed)| `<empty string>` |
+| `role=(array with string)`| (changed)| `"string"` |
+| `role=(empty array)`| (changed)| `<empty string>` |
+| `role=(object)`| (changed)| `"result of toString()"` |
+| `role=(numeric string)`| (changed)| `"42"` |
+| `role=(-1)`| (changed)| `"-1"` |
+| `role=(0)`| (changed)| `"0"` |
+| `role=(integer)`| (changed)| `"1"` |
+| `role=(NaN)`| (changed, warning)| `"NaN"` |
+| `role=(float)`| (changed)| `"99.99"` |
+| `role=(true)`| (initial, warning)| `<null>` |
+| `role=(false)`| (initial, warning)| `<null>` |
+| `role=(string 'true')`| (changed)| `"true"` |
+| `role=(string 'false')`| (changed)| `"false"` |
+| `role=(string 'on')`| (changed)| `"on"` |
+| `role=(string 'off')`| (changed)| `"off"` |
+| `role=(symbol)`| (initial, warning)| `<null>` |
+| `role=(function)`| (initial, warning)| `<null>` |
+| `role=(null)`| (initial)| `<null>` |
+| `role=(undefined)`| (initial)| `<null>` |
+
+## `rotate` (on `<altGlyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `rotate=(string)`| (initial)| `<null>` |
+| `rotate=(empty string)`| (initial)| `<null>` |
+| `rotate=(array with string)`| (initial)| `<null>` |
+| `rotate=(empty array)`| (initial)| `<null>` |
+| `rotate=(object)`| (initial)| `<null>` |
+| `rotate=(numeric string)`| (initial)| `<null>` |
+| `rotate=(-1)`| (initial)| `<null>` |
+| `rotate=(0)`| (initial)| `<null>` |
+| `rotate=(integer)`| (initial)| `<null>` |
+| `rotate=(NaN)`| (initial, warning)| `<null>` |
+| `rotate=(float)`| (initial)| `<null>` |
+| `rotate=(true)`| (initial, warning)| `<null>` |
+| `rotate=(false)`| (initial, warning)| `<null>` |
+| `rotate=(string 'true')`| (initial)| `<null>` |
+| `rotate=(string 'false')`| (initial)| `<null>` |
+| `rotate=(string 'on')`| (initial)| `<null>` |
+| `rotate=(string 'off')`| (initial)| `<null>` |
+| `rotate=(symbol)`| (initial, warning)| `<null>` |
+| `rotate=(function)`| (initial, warning)| `<null>` |
+| `rotate=(null)`| (initial)| `<null>` |
+| `rotate=(undefined)`| (initial)| `<null>` |
+
+## `rows` (on `<textarea>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `rows=(string)`| (initial)| `<number: 2>` |
+| `rows=(empty string)`| (initial)| `<number: 2>` |
+| `rows=(array with string)`| (initial)| `<number: 2>` |
+| `rows=(empty array)`| (initial)| `<number: 2>` |
+| `rows=(object)`| (initial)| `<number: 2>` |
+| `rows=(numeric string)`| (changed)| `<number: 42>` |
+| `rows=(-1)`| (initial)| `<number: 2>` |
+| `rows=(0)`| (initial)| `<number: 2>` |
+| `rows=(integer)`| (changed)| `<number: 1>` |
+| `rows=(NaN)`| (initial, warning)| `<number: 2>` |
+| `rows=(float)`| (changed)| `<number: 99>` |
+| `rows=(true)`| (initial, warning)| `<number: 2>` |
+| `rows=(false)`| (initial, warning)| `<number: 2>` |
+| `rows=(string 'true')`| (initial)| `<number: 2>` |
+| `rows=(string 'false')`| (initial)| `<number: 2>` |
+| `rows=(string 'on')`| (initial)| `<number: 2>` |
+| `rows=(string 'off')`| (initial)| `<number: 2>` |
+| `rows=(symbol)`| (initial, warning)| `<number: 2>` |
+| `rows=(function)`| (initial, warning)| `<number: 2>` |
+| `rows=(null)`| (initial)| `<number: 2>` |
+| `rows=(undefined)`| (initial)| `<number: 2>` |
+
+## `rowSpan` (on `<td>` inside `<tr>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `rowSpan=(string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(empty string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(array with string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(empty array)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(object)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(numeric string)`| (changed, ssr error, ssr mismatch)| `<number: 42>` |
+| `rowSpan=(-1)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(0)`| (changed, ssr error, ssr mismatch)| `<number: 0>` |
+| `rowSpan=(integer)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(NaN)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(float)`| (changed, ssr error, ssr mismatch)| `<number: 99>` |
+| `rowSpan=(true)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(false)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(string 'true')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(string 'false')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(string 'on')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(string 'off')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(function)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(null)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(undefined)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+
+## `rx` (on `<ellipse>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `rx=(string)`| (changed)| `<SVGLength: 1px>` |
+| `rx=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `rx=(array with string)`| (changed)| `<SVGLength: 1px>` |
+| `rx=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `rx=(object)`| (initial)| `<SVGLength: 0>` |
+| `rx=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `rx=(-1)`| (changed)| `<SVGLength: -1>` |
+| `rx=(0)`| (initial)| `<SVGLength: 0>` |
+| `rx=(integer)`| (changed)| `<SVGLength: 1>` |
+| `rx=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `rx=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `rx=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `rx=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `rx=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `rx=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `rx=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `rx=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `rx=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `rx=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `rx=(null)`| (initial)| `<SVGLength: 0>` |
+| `rx=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `ry` (on `<ellipse>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `ry=(string)`| (changed)| `<SVGLength: 2px>` |
+| `ry=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `ry=(array with string)`| (changed)| `<SVGLength: 2px>` |
+| `ry=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `ry=(object)`| (initial)| `<SVGLength: 0>` |
+| `ry=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `ry=(-1)`| (changed)| `<SVGLength: -1>` |
+| `ry=(0)`| (initial)| `<SVGLength: 0>` |
+| `ry=(integer)`| (changed)| `<SVGLength: 1>` |
+| `ry=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `ry=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `ry=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `ry=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `ry=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `ry=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `ry=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `ry=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `ry=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `ry=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `ry=(null)`| (initial)| `<SVGLength: 0>` |
+| `ry=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `sandbox` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `sandbox=(string)`| (changed)| `["allow-forms", "allow-scripts"]` |
+| `sandbox=(empty string)`| (initial)| `[]` |
+| `sandbox=(array with string)`| (changed)| `["allow-forms", "allow-scripts"]` |
+| `sandbox=(empty array)`| (initial)| `[]` |
+| `sandbox=(object)`| (changed)| `["result", "of", "toString()"]` |
+| `sandbox=(numeric string)`| (changed)| `["42"]` |
+| `sandbox=(-1)`| (changed)| `["-1"]` |
+| `sandbox=(0)`| (changed)| `["0"]` |
+| `sandbox=(integer)`| (changed)| `["1"]` |
+| `sandbox=(NaN)`| (changed, warning)| `["NaN"]` |
+| `sandbox=(float)`| (changed)| `["99.99"]` |
+| `sandbox=(true)`| (initial, warning)| `[]` |
+| `sandbox=(false)`| (initial, warning)| `[]` |
+| `sandbox=(string 'true')`| (changed)| `["true"]` |
+| `sandbox=(string 'false')`| (changed)| `["false"]` |
+| `sandbox=(string 'on')`| (changed)| `["on"]` |
+| `sandbox=(string 'off')`| (changed)| `["off"]` |
+| `sandbox=(symbol)`| (initial, warning)| `[]` |
+| `sandbox=(function)`| (initial, warning)| `[]` |
+| `sandbox=(null)`| (initial)| `[]` |
+| `sandbox=(undefined)`| (initial)| `[]` |
+
+## `scale` (on `<feDisplacementMap>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `scale=(string)`| (initial)| `<number: 0>` |
+| `scale=(empty string)`| (initial)| `<number: 0>` |
+| `scale=(array with string)`| (initial)| `<number: 0>` |
+| `scale=(empty array)`| (initial)| `<number: 0>` |
+| `scale=(object)`| (initial)| `<number: 0>` |
+| `scale=(numeric string)`| (changed)| `<number: 42>` |
+| `scale=(-1)`| (changed)| `<number: -1>` |
+| `scale=(0)`| (initial)| `<number: 0>` |
+| `scale=(integer)`| (changed)| `<number: 1>` |
+| `scale=(NaN)`| (initial, warning)| `<number: 0>` |
+| `scale=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `scale=(true)`| (initial, warning)| `<number: 0>` |
+| `scale=(false)`| (initial, warning)| `<number: 0>` |
+| `scale=(string 'true')`| (initial)| `<number: 0>` |
+| `scale=(string 'false')`| (initial)| `<number: 0>` |
+| `scale=(string 'on')`| (initial)| `<number: 0>` |
+| `scale=(string 'off')`| (initial)| `<number: 0>` |
+| `scale=(symbol)`| (initial, warning)| `<number: 0>` |
+| `scale=(function)`| (initial, warning)| `<number: 0>` |
+| `scale=(null)`| (initial)| `<number: 0>` |
+| `scale=(undefined)`| (initial)| `<number: 0>` |
+
+## `scope` (on `<th>` inside `<tr>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `scope=(string)`| (changed, ssr error, ssr mismatch)| `"row"` |
+| `scope=(empty string)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(array with string)`| (changed, ssr error, ssr mismatch)| `"row"` |
+| `scope=(empty array)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(object)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(numeric string)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(-1)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(0)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(integer)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(NaN)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(float)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(true)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(false)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(string 'true')`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(string 'false')`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(string 'on')`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(string 'off')`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(function)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(null)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+| `scope=(undefined)`| (initial, ssr error, ssr mismatch)| `<empty string>` |
+
+## `scoped` (on `<style>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `scoped=(string)`| (changed)| `<empty string>` |
+| `scoped=(empty string)`| (initial)| `<null>` |
+| `scoped=(array with string)`| (changed)| `<empty string>` |
+| `scoped=(empty array)`| (changed)| `<empty string>` |
+| `scoped=(object)`| (changed)| `<empty string>` |
+| `scoped=(numeric string)`| (changed)| `<empty string>` |
+| `scoped=(-1)`| (changed)| `<empty string>` |
+| `scoped=(0)`| (initial)| `<null>` |
+| `scoped=(integer)`| (changed)| `<empty string>` |
+| `scoped=(NaN)`| (initial, warning)| `<null>` |
+| `scoped=(float)`| (changed)| `<empty string>` |
+| `scoped=(true)`| (changed)| `<empty string>` |
+| `scoped=(false)`| (initial)| `<null>` |
+| `scoped=(string 'true')`| (changed, warning)| `<empty string>` |
+| `scoped=(string 'false')`| (changed, warning)| `<empty string>` |
+| `scoped=(string 'on')`| (changed)| `<empty string>` |
+| `scoped=(string 'off')`| (changed)| `<empty string>` |
+| `scoped=(symbol)`| (initial, warning)| `<null>` |
+| `scoped=(function)`| (initial, warning)| `<null>` |
+| `scoped=(null)`| (initial)| `<null>` |
+| `scoped=(undefined)`| (initial)| `<null>` |
+
+## `scrolling` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `scrolling=(string)`| (changed)| `"no"` |
+| `scrolling=(empty string)`| (initial)| `<empty string>` |
+| `scrolling=(array with string)`| (changed)| `"no"` |
+| `scrolling=(empty array)`| (initial)| `<empty string>` |
+| `scrolling=(object)`| (changed)| `"result of toString()"` |
+| `scrolling=(numeric string)`| (changed)| `"42"` |
+| `scrolling=(-1)`| (changed)| `"-1"` |
+| `scrolling=(0)`| (changed)| `"0"` |
+| `scrolling=(integer)`| (changed)| `"1"` |
+| `scrolling=(NaN)`| (changed, warning)| `"NaN"` |
+| `scrolling=(float)`| (changed)| `"99.99"` |
+| `scrolling=(true)`| (initial, warning)| `<empty string>` |
+| `scrolling=(false)`| (initial, warning)| `<empty string>` |
+| `scrolling=(string 'true')`| (changed)| `"true"` |
+| `scrolling=(string 'false')`| (changed)| `"false"` |
+| `scrolling=(string 'on')`| (changed)| `"on"` |
+| `scrolling=(string 'off')`| (changed)| `"off"` |
+| `scrolling=(symbol)`| (initial, warning)| `<empty string>` |
+| `scrolling=(function)`| (initial, warning)| `<empty string>` |
+| `scrolling=(null)`| (initial)| `<empty string>` |
+| `scrolling=(undefined)`| (initial)| `<empty string>` |
+
+## `seamless` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `seamless=(string)`| (changed)| `<empty string>` |
+| `seamless=(empty string)`| (initial)| `<null>` |
+| `seamless=(array with string)`| (changed)| `<empty string>` |
+| `seamless=(empty array)`| (changed)| `<empty string>` |
+| `seamless=(object)`| (changed)| `<empty string>` |
+| `seamless=(numeric string)`| (changed)| `<empty string>` |
+| `seamless=(-1)`| (changed)| `<empty string>` |
+| `seamless=(0)`| (initial)| `<null>` |
+| `seamless=(integer)`| (changed)| `<empty string>` |
+| `seamless=(NaN)`| (initial, warning)| `<null>` |
+| `seamless=(float)`| (changed)| `<empty string>` |
+| `seamless=(true)`| (changed)| `<empty string>` |
+| `seamless=(false)`| (initial)| `<null>` |
+| `seamless=(string 'true')`| (changed, warning)| `<empty string>` |
+| `seamless=(string 'false')`| (changed, warning)| `<empty string>` |
+| `seamless=(string 'on')`| (changed)| `<empty string>` |
+| `seamless=(string 'off')`| (changed)| `<empty string>` |
+| `seamless=(symbol)`| (initial, warning)| `<null>` |
+| `seamless=(function)`| (initial, warning)| `<null>` |
+| `seamless=(null)`| (initial)| `<null>` |
+| `seamless=(undefined)`| (initial)| `<null>` |
+
+## `security` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `security=(string)`| (changed)| `"a string"` |
+| `security=(empty string)`| (changed)| `<empty string>` |
+| `security=(array with string)`| (changed)| `"string"` |
+| `security=(empty array)`| (changed)| `<empty string>` |
+| `security=(object)`| (changed)| `"result of toString()"` |
+| `security=(numeric string)`| (changed)| `"42"` |
+| `security=(-1)`| (changed)| `"-1"` |
+| `security=(0)`| (changed)| `"0"` |
+| `security=(integer)`| (changed)| `"1"` |
+| `security=(NaN)`| (changed, warning)| `"NaN"` |
+| `security=(float)`| (changed)| `"99.99"` |
+| `security=(true)`| (initial, warning)| `<null>` |
+| `security=(false)`| (initial, warning)| `<null>` |
+| `security=(string 'true')`| (changed)| `"true"` |
+| `security=(string 'false')`| (changed)| `"false"` |
+| `security=(string 'on')`| (changed)| `"on"` |
+| `security=(string 'off')`| (changed)| `"off"` |
+| `security=(symbol)`| (initial, warning)| `<null>` |
+| `security=(function)`| (initial, warning)| `<null>` |
+| `security=(null)`| (initial)| `<null>` |
+| `security=(undefined)`| (initial)| `<null>` |
+
+## `seed` (on `<feTurbulence>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `seed=(string)`| (initial)| `<number: 0>` |
+| `seed=(empty string)`| (initial)| `<number: 0>` |
+| `seed=(array with string)`| (initial)| `<number: 0>` |
+| `seed=(empty array)`| (initial)| `<number: 0>` |
+| `seed=(object)`| (initial)| `<number: 0>` |
+| `seed=(numeric string)`| (changed)| `<number: 42>` |
+| `seed=(-1)`| (changed)| `<number: -1>` |
+| `seed=(0)`| (initial)| `<number: 0>` |
+| `seed=(integer)`| (changed)| `<number: 1>` |
+| `seed=(NaN)`| (initial, warning)| `<number: 0>` |
+| `seed=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `seed=(true)`| (initial, warning)| `<number: 0>` |
+| `seed=(false)`| (initial, warning)| `<number: 0>` |
+| `seed=(string 'true')`| (initial)| `<number: 0>` |
+| `seed=(string 'false')`| (initial)| `<number: 0>` |
+| `seed=(string 'on')`| (initial)| `<number: 0>` |
+| `seed=(string 'off')`| (initial)| `<number: 0>` |
+| `seed=(symbol)`| (initial, warning)| `<number: 0>` |
+| `seed=(function)`| (initial, warning)| `<number: 0>` |
+| `seed=(null)`| (initial)| `<number: 0>` |
+| `seed=(undefined)`| (initial)| `<number: 0>` |
+
+## `selected` (on `<option>` inside `<select>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `selected=(string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(empty string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(array with string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(empty array)`| (initial, warning)| `<boolean: true>` |
+| `selected=(object)`| (initial, warning)| `<boolean: true>` |
+| `selected=(numeric string)`| (initial, warning)| `<boolean: true>` |
+| `selected=(-1)`| (initial, warning)| `<boolean: true>` |
+| `selected=(0)`| (initial, warning)| `<boolean: true>` |
+| `selected=(integer)`| (initial, warning)| `<boolean: true>` |
+| `selected=(NaN)`| (initial, warning)| `<boolean: true>` |
+| `selected=(float)`| (initial, warning)| `<boolean: true>` |
+| `selected=(true)`| (initial, warning)| `<boolean: true>` |
+| `selected=(false)`| (initial, warning)| `<boolean: true>` |
+| `selected=(string 'true')`| (initial, warning)| `<boolean: true>` |
+| `selected=(string 'false')`| (initial, warning)| `<boolean: true>` |
+| `selected=(string 'on')`| (initial, warning)| `<boolean: true>` |
+| `selected=(string 'off')`| (initial, warning)| `<boolean: true>` |
+| `selected=(symbol)`| (initial, warning)| `<boolean: true>` |
+| `selected=(function)`| (initial, warning)| `<boolean: true>` |
+| `selected=(null)`| (initial)| `<boolean: true>` |
+| `selected=(undefined)`| (initial)| `<boolean: true>` |
+
+## `selectedIndex` (on `<select>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `selectedIndex=(string)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(empty string)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(array with string)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(empty array)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(object)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(numeric string)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(-1)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(0)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(integer)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(NaN)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(float)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(true)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(false)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(string 'true')`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(string 'false')`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(string 'on')`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(string 'off')`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(symbol)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(function)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(null)`| (initial, warning)| `<number: -1>` |
+| `selectedIndex=(undefined)`| (initial, warning)| `<number: -1>` |
+
+## `shape` (on `<a>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `shape=(string)`| (changed)| `"a string"` |
+| `shape=(empty string)`| (initial)| `<empty string>` |
+| `shape=(array with string)`| (changed)| `"string"` |
+| `shape=(empty array)`| (initial)| `<empty string>` |
+| `shape=(object)`| (changed)| `"result of toString()"` |
+| `shape=(numeric string)`| (changed)| `"42"` |
+| `shape=(-1)`| (changed)| `"-1"` |
+| `shape=(0)`| (changed)| `"0"` |
+| `shape=(integer)`| (changed)| `"1"` |
+| `shape=(NaN)`| (changed, warning)| `"NaN"` |
+| `shape=(float)`| (changed)| `"99.99"` |
+| `shape=(true)`| (initial, warning)| `<empty string>` |
+| `shape=(false)`| (initial, warning)| `<empty string>` |
+| `shape=(string 'true')`| (changed)| `"true"` |
+| `shape=(string 'false')`| (changed)| `"false"` |
+| `shape=(string 'on')`| (changed)| `"on"` |
+| `shape=(string 'off')`| (changed)| `"off"` |
+| `shape=(symbol)`| (initial, warning)| `<empty string>` |
+| `shape=(function)`| (initial, warning)| `<empty string>` |
+| `shape=(null)`| (initial)| `<empty string>` |
+| `shape=(undefined)`| (initial)| `<empty string>` |
+
+## `shape-rendering` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `shape-rendering=(string)`| (changed, warning)| `"a string"` |
+| `shape-rendering=(empty string)`| (changed, warning)| `<empty string>` |
+| `shape-rendering=(array with string)`| (changed, warning)| `"string"` |
+| `shape-rendering=(empty array)`| (changed, warning)| `<empty string>` |
+| `shape-rendering=(object)`| (changed, warning)| `"result of toString()"` |
+| `shape-rendering=(numeric string)`| (changed, warning)| `"42"` |
+| `shape-rendering=(-1)`| (changed, warning)| `"-1"` |
+| `shape-rendering=(0)`| (changed, warning)| `"0"` |
+| `shape-rendering=(integer)`| (changed, warning)| `"1"` |
+| `shape-rendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `shape-rendering=(float)`| (changed, warning)| `"99.99"` |
+| `shape-rendering=(true)`| (initial, warning)| `<null>` |
+| `shape-rendering=(false)`| (initial, warning)| `<null>` |
+| `shape-rendering=(string 'true')`| (changed, warning)| `"true"` |
+| `shape-rendering=(string 'false')`| (changed, warning)| `"false"` |
+| `shape-rendering=(string 'on')`| (changed, warning)| `"on"` |
+| `shape-rendering=(string 'off')`| (changed, warning)| `"off"` |
+| `shape-rendering=(symbol)`| (initial, warning)| `<null>` |
+| `shape-rendering=(function)`| (initial, warning)| `<null>` |
+| `shape-rendering=(null)`| (initial, warning)| `<null>` |
+| `shape-rendering=(undefined)`| (initial, warning)| `<null>` |
+
+## `shapeRendering` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `shapeRendering=(string)`| (changed)| `"a string"` |
+| `shapeRendering=(empty string)`| (changed)| `<empty string>` |
+| `shapeRendering=(array with string)`| (changed)| `"string"` |
+| `shapeRendering=(empty array)`| (changed)| `<empty string>` |
+| `shapeRendering=(object)`| (changed)| `"result of toString()"` |
+| `shapeRendering=(numeric string)`| (changed)| `"42"` |
+| `shapeRendering=(-1)`| (changed)| `"-1"` |
+| `shapeRendering=(0)`| (changed)| `"0"` |
+| `shapeRendering=(integer)`| (changed)| `"1"` |
+| `shapeRendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `shapeRendering=(float)`| (changed)| `"99.99"` |
+| `shapeRendering=(true)`| (initial, warning)| `<null>` |
+| `shapeRendering=(false)`| (initial, warning)| `<null>` |
+| `shapeRendering=(string 'true')`| (changed)| `"true"` |
+| `shapeRendering=(string 'false')`| (changed)| `"false"` |
+| `shapeRendering=(string 'on')`| (changed)| `"on"` |
+| `shapeRendering=(string 'off')`| (changed)| `"off"` |
+| `shapeRendering=(symbol)`| (initial, warning)| `<null>` |
+| `shapeRendering=(function)`| (initial, warning)| `<null>` |
+| `shapeRendering=(null)`| (initial)| `<null>` |
+| `shapeRendering=(undefined)`| (initial)| `<null>` |
+
+## `size` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `size=(string)`| (initial)| `<number: 20>` |
+| `size=(empty string)`| (initial)| `<number: 20>` |
+| `size=(array with string)`| (initial)| `<number: 20>` |
+| `size=(empty array)`| (initial)| `<number: 20>` |
+| `size=(object)`| (initial)| `<number: 20>` |
+| `size=(numeric string)`| (changed)| `<number: 42>` |
+| `size=(-1)`| (initial)| `<number: 20>` |
+| `size=(0)`| (initial)| `<number: 20>` |
+| `size=(integer)`| (changed)| `<number: 1>` |
+| `size=(NaN)`| (initial, warning)| `<number: 20>` |
+| `size=(float)`| (changed)| `<number: 99>` |
+| `size=(true)`| (initial, warning)| `<number: 20>` |
+| `size=(false)`| (initial, warning)| `<number: 20>` |
+| `size=(string 'true')`| (initial)| `<number: 20>` |
+| `size=(string 'false')`| (initial)| `<number: 20>` |
+| `size=(string 'on')`| (initial)| `<number: 20>` |
+| `size=(string 'off')`| (initial)| `<number: 20>` |
+| `size=(symbol)`| (initial, warning)| `<number: 20>` |
+| `size=(function)`| (initial, warning)| `<number: 20>` |
+| `size=(null)`| (initial)| `<number: 20>` |
+| `size=(undefined)`| (initial)| `<number: 20>` |
+
+## `sizes` (on `<link>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `sizes=(string)`| (changed)| `["a", "string"]` |
+| `sizes=(empty string)`| (initial)| `[]` |
+| `sizes=(array with string)`| (changed)| `["string"]` |
+| `sizes=(empty array)`| (initial)| `[]` |
+| `sizes=(object)`| (changed)| `["result", "of", "toString()"]` |
+| `sizes=(numeric string)`| (changed)| `["42"]` |
+| `sizes=(-1)`| (changed)| `["-1"]` |
+| `sizes=(0)`| (changed)| `["0"]` |
+| `sizes=(integer)`| (changed)| `["1"]` |
+| `sizes=(NaN)`| (changed, warning)| `["NaN"]` |
+| `sizes=(float)`| (changed)| `["99.99"]` |
+| `sizes=(true)`| (initial, warning)| `[]` |
+| `sizes=(false)`| (initial, warning)| `[]` |
+| `sizes=(string 'true')`| (changed)| `["true"]` |
+| `sizes=(string 'false')`| (changed)| `["false"]` |
+| `sizes=(string 'on')`| (changed)| `["on"]` |
+| `sizes=(string 'off')`| (changed)| `["off"]` |
+| `sizes=(symbol)`| (initial, warning)| `[]` |
+| `sizes=(function)`| (initial, warning)| `[]` |
+| `sizes=(null)`| (initial)| `[]` |
+| `sizes=(undefined)`| (initial)| `[]` |
+
+## `slope` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `slope=(string)`| (changed)| `"a string"` |
+| `slope=(empty string)`| (changed)| `<empty string>` |
+| `slope=(array with string)`| (changed)| `"string"` |
+| `slope=(empty array)`| (changed)| `<empty string>` |
+| `slope=(object)`| (changed)| `"result of toString()"` |
+| `slope=(numeric string)`| (changed)| `"42"` |
+| `slope=(-1)`| (changed)| `"-1"` |
+| `slope=(0)`| (changed)| `"0"` |
+| `slope=(integer)`| (changed)| `"1"` |
+| `slope=(NaN)`| (changed, warning)| `"NaN"` |
+| `slope=(float)`| (changed)| `"99.99"` |
+| `slope=(true)`| (initial, warning)| `<null>` |
+| `slope=(false)`| (initial, warning)| `<null>` |
+| `slope=(string 'true')`| (changed)| `"true"` |
+| `slope=(string 'false')`| (changed)| `"false"` |
+| `slope=(string 'on')`| (changed)| `"on"` |
+| `slope=(string 'off')`| (changed)| `"off"` |
+| `slope=(symbol)`| (initial, warning)| `<null>` |
+| `slope=(function)`| (initial, warning)| `<null>` |
+| `slope=(null)`| (initial)| `<null>` |
+| `slope=(undefined)`| (initial)| `<null>` |
+
+## `spacing` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `spacing=(string)`| (changed)| `<number: 1>` |
+| `spacing=(empty string)`| (initial)| `<number: 2>` |
+| `spacing=(array with string)`| (changed)| `<number: 1>` |
+| `spacing=(empty array)`| (initial)| `<number: 2>` |
+| `spacing=(object)`| (initial)| `<number: 2>` |
+| `spacing=(numeric string)`| (initial)| `<number: 2>` |
+| `spacing=(-1)`| (initial)| `<number: 2>` |
+| `spacing=(0)`| (initial)| `<number: 2>` |
+| `spacing=(integer)`| (initial)| `<number: 2>` |
+| `spacing=(NaN)`| (initial, warning)| `<number: 2>` |
+| `spacing=(float)`| (initial)| `<number: 2>` |
+| `spacing=(true)`| (initial, warning)| `<number: 2>` |
+| `spacing=(false)`| (initial, warning)| `<number: 2>` |
+| `spacing=(string 'true')`| (initial)| `<number: 2>` |
+| `spacing=(string 'false')`| (initial)| `<number: 2>` |
+| `spacing=(string 'on')`| (initial)| `<number: 2>` |
+| `spacing=(string 'off')`| (initial)| `<number: 2>` |
+| `spacing=(symbol)`| (initial, warning)| `<number: 2>` |
+| `spacing=(function)`| (initial, warning)| `<number: 2>` |
+| `spacing=(null)`| (initial)| `<number: 2>` |
+| `spacing=(undefined)`| (initial)| `<number: 2>` |
+
+## `span` (on `<col>` inside `<colgroup>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `span=(string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(empty string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(array with string)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(empty array)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(object)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(numeric string)`| (changed, ssr error, ssr mismatch)| `<number: 42>` |
+| `span=(-1)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(0)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(integer)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(NaN)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(float)`| (changed, ssr error, ssr mismatch)| `<number: 99>` |
+| `span=(true)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(false)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(string 'true')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(string 'false')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(string 'on')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(string 'off')`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(function)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(null)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `span=(undefined)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+
+## `specularConstant` (on `<feSpecularLighting>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `specularConstant=(string)`| (initial)| `<number: 1>` |
+| `specularConstant=(empty string)`| (changed)| `<number: 0>` |
+| `specularConstant=(array with string)`| (initial)| `<number: 1>` |
+| `specularConstant=(empty array)`| (changed)| `<number: 0>` |
+| `specularConstant=(object)`| (initial)| `<number: 1>` |
+| `specularConstant=(numeric string)`| (changed)| `<number: 42>` |
+| `specularConstant=(-1)`| (changed)| `<number: -1>` |
+| `specularConstant=(0)`| (changed)| `<number: 0>` |
+| `specularConstant=(integer)`| (initial)| `<number: 1>` |
+| `specularConstant=(NaN)`| (initial, warning)| `<number: 1>` |
+| `specularConstant=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `specularConstant=(true)`| (initial, warning)| `<number: 1>` |
+| `specularConstant=(false)`| (initial, warning)| `<number: 1>` |
+| `specularConstant=(string 'true')`| (initial)| `<number: 1>` |
+| `specularConstant=(string 'false')`| (initial)| `<number: 1>` |
+| `specularConstant=(string 'on')`| (initial)| `<number: 1>` |
+| `specularConstant=(string 'off')`| (initial)| `<number: 1>` |
+| `specularConstant=(symbol)`| (initial, warning)| `<number: 1>` |
+| `specularConstant=(function)`| (initial, warning)| `<number: 1>` |
+| `specularConstant=(null)`| (initial)| `<number: 1>` |
+| `specularConstant=(undefined)`| (initial)| `<number: 1>` |
+
+## `specularExponent` (on `<feSpecularLighting>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `specularExponent=(string)`| (initial)| `<number: 1>` |
+| `specularExponent=(empty string)`| (initial)| `<number: 1>` |
+| `specularExponent=(array with string)`| (initial)| `<number: 1>` |
+| `specularExponent=(empty array)`| (initial)| `<number: 1>` |
+| `specularExponent=(object)`| (initial)| `<number: 1>` |
+| `specularExponent=(numeric string)`| (initial)| `<number: 1>` |
+| `specularExponent=(-1)`| (initial)| `<number: 1>` |
+| `specularExponent=(0)`| (initial)| `<number: 1>` |
+| `specularExponent=(integer)`| (initial)| `<number: 1>` |
+| `specularExponent=(NaN)`| (initial, warning)| `<number: 1>` |
+| `specularExponent=(float)`| (initial)| `<number: 1>` |
+| `specularExponent=(true)`| (initial, warning)| `<number: 1>` |
+| `specularExponent=(false)`| (initial, warning)| `<number: 1>` |
+| `specularExponent=(string 'true')`| (initial)| `<number: 1>` |
+| `specularExponent=(string 'false')`| (initial)| `<number: 1>` |
+| `specularExponent=(string 'on')`| (initial)| `<number: 1>` |
+| `specularExponent=(string 'off')`| (initial)| `<number: 1>` |
+| `specularExponent=(symbol)`| (initial, warning)| `<number: 1>` |
+| `specularExponent=(function)`| (initial, warning)| `<number: 1>` |
+| `specularExponent=(null)`| (initial)| `<number: 1>` |
+| `specularExponent=(undefined)`| (initial)| `<number: 1>` |
+
+## `speed` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `speed=(string)`| (changed)| `"a string"` |
+| `speed=(empty string)`| (changed)| `<empty string>` |
+| `speed=(array with string)`| (changed)| `"string"` |
+| `speed=(empty array)`| (changed)| `<empty string>` |
+| `speed=(object)`| (changed)| `"result of toString()"` |
+| `speed=(numeric string)`| (changed)| `"42"` |
+| `speed=(-1)`| (changed)| `"-1"` |
+| `speed=(0)`| (changed)| `"0"` |
+| `speed=(integer)`| (changed)| `"1"` |
+| `speed=(NaN)`| (changed, warning)| `"NaN"` |
+| `speed=(float)`| (changed)| `"99.99"` |
+| `speed=(true)`| (initial, warning)| `<null>` |
+| `speed=(false)`| (initial, warning)| `<null>` |
+| `speed=(string 'true')`| (changed)| `"true"` |
+| `speed=(string 'false')`| (changed)| `"false"` |
+| `speed=(string 'on')`| (changed)| `"on"` |
+| `speed=(string 'off')`| (changed)| `"off"` |
+| `speed=(symbol)`| (initial, warning)| `<null>` |
+| `speed=(function)`| (initial, warning)| `<null>` |
+| `speed=(null)`| (initial)| `<null>` |
+| `speed=(undefined)`| (initial)| `<null>` |
+
+## `spellCheck` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `spellCheck=(string)`| (changed)| `<boolean: false>` |
+| `spellCheck=(empty string)`| (initial)| `<boolean: true>` |
+| `spellCheck=(array with string)`| (changed)| `<boolean: false>` |
+| `spellCheck=(empty array)`| (initial)| `<boolean: true>` |
+| `spellCheck=(object)`| (initial)| `<boolean: true>` |
+| `spellCheck=(numeric string)`| (initial)| `<boolean: true>` |
+| `spellCheck=(-1)`| (initial)| `<boolean: true>` |
+| `spellCheck=(0)`| (initial)| `<boolean: true>` |
+| `spellCheck=(integer)`| (initial)| `<boolean: true>` |
+| `spellCheck=(NaN)`| (initial, warning)| `<boolean: true>` |
+| `spellCheck=(float)`| (initial)| `<boolean: true>` |
+| `spellCheck=(true)`| (initial)| `<boolean: true>` |
+| `spellCheck=(false)`| (changed)| `<boolean: false>` |
+| `spellCheck=(string 'true')`| (initial)| `<boolean: true>` |
+| `spellCheck=(string 'false')`| (changed)| `<boolean: false>` |
+| `spellCheck=(string 'on')`| (initial)| `<boolean: true>` |
+| `spellCheck=(string 'off')`| (initial)| `<boolean: true>` |
+| `spellCheck=(symbol)`| (initial, warning)| `<boolean: true>` |
+| `spellCheck=(function)`| (initial, warning)| `<boolean: true>` |
+| `spellCheck=(null)`| (initial)| `<boolean: true>` |
+| `spellCheck=(undefined)`| (initial)| `<boolean: true>` |
+
+## `spellcheck` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `spellcheck=(string)`| (changed, warning)| `<boolean: false>` |
+| `spellcheck=(empty string)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(array with string)`| (changed, warning)| `<boolean: false>` |
+| `spellcheck=(empty array)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(object)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(numeric string)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(-1)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(0)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(integer)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(NaN)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(float)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(true)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(false)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(string 'true')`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(string 'false')`| (changed, warning)| `<boolean: false>` |
+| `spellcheck=(string 'on')`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(string 'off')`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(symbol)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(function)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(null)`| (initial, warning)| `<boolean: true>` |
+| `spellcheck=(undefined)`| (initial, warning)| `<boolean: true>` |
+
+## `spreadMethod` (on `<linearGradient>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `spreadMethod=(string)`| (changed)| `<number: 2>` |
+| `spreadMethod=(empty string)`| (initial)| `<number: 1>` |
+| `spreadMethod=(array with string)`| (changed)| `<number: 2>` |
+| `spreadMethod=(empty array)`| (initial)| `<number: 1>` |
+| `spreadMethod=(object)`| (initial)| `<number: 1>` |
+| `spreadMethod=(numeric string)`| (initial)| `<number: 1>` |
+| `spreadMethod=(-1)`| (initial)| `<number: 1>` |
+| `spreadMethod=(0)`| (initial)| `<number: 1>` |
+| `spreadMethod=(integer)`| (initial)| `<number: 1>` |
+| `spreadMethod=(NaN)`| (initial, warning)| `<number: 1>` |
+| `spreadMethod=(float)`| (initial)| `<number: 1>` |
+| `spreadMethod=(true)`| (initial, warning)| `<number: 1>` |
+| `spreadMethod=(false)`| (initial, warning)| `<number: 1>` |
+| `spreadMethod=(string 'true')`| (initial)| `<number: 1>` |
+| `spreadMethod=(string 'false')`| (initial)| `<number: 1>` |
+| `spreadMethod=(string 'on')`| (initial)| `<number: 1>` |
+| `spreadMethod=(string 'off')`| (initial)| `<number: 1>` |
+| `spreadMethod=(symbol)`| (initial, warning)| `<number: 1>` |
+| `spreadMethod=(function)`| (initial, warning)| `<number: 1>` |
+| `spreadMethod=(null)`| (initial)| `<number: 1>` |
+| `spreadMethod=(undefined)`| (initial)| `<number: 1>` |
+
+## `src` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `src=(string)`| (changed)| `"https://reactjs.com/"` |
+| `src=(empty string)`| (initial, warning)| `<empty string>` |
+| `src=(array with string)`| (changed)| `"https://reactjs.com/"` |
+| `src=(empty array)`| (changed)| `"http://localhost:3000/"` |
+| `src=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
+| `src=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
+| `src=(-1)`| (changed)| `"http://localhost:3000/-1"` |
+| `src=(0)`| (changed)| `"http://localhost:3000/0"` |
+| `src=(integer)`| (changed)| `"http://localhost:3000/1"` |
+| `src=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
+| `src=(float)`| (changed)| `"http://localhost:3000/99.99"` |
+| `src=(true)`| (changed, warning, ssr mismatch)| `"http://localhost:3000/true"` |
+| `src=(false)`| (initial, warning)| `<empty string>` |
+| `src=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
+| `src=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
+| `src=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
+| `src=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
+| `src=(symbol)`| (changed, error, warning, ssr mismatch)| `` |
+| `src=(function)`| (changed, warning, ssr mismatch)| `"http://localhost:3000/function%20f()%20%7B%7D"` |
+| `src=(null)`| (initial)| `<empty string>` |
+| `src=(undefined)`| (initial)| `<empty string>` |
+
+## `srcDoc` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `srcDoc=(string)`| (changed)| `"<p>Hi</p>"` |
+| `srcDoc=(empty string)`| (initial)| `<empty string>` |
+| `srcDoc=(array with string)`| (changed)| `"<p>Hi</p>"` |
+| `srcDoc=(empty array)`| (initial)| `<empty string>` |
+| `srcDoc=(object)`| (changed)| `"result of toString()"` |
+| `srcDoc=(numeric string)`| (changed)| `"42"` |
+| `srcDoc=(-1)`| (changed)| `"-1"` |
+| `srcDoc=(0)`| (changed)| `"0"` |
+| `srcDoc=(integer)`| (changed)| `"1"` |
+| `srcDoc=(NaN)`| (changed, warning)| `"NaN"` |
+| `srcDoc=(float)`| (changed)| `"99.99"` |
+| `srcDoc=(true)`| (initial, warning)| `<empty string>` |
+| `srcDoc=(false)`| (initial, warning)| `<empty string>` |
+| `srcDoc=(string 'true')`| (changed)| `"true"` |
+| `srcDoc=(string 'false')`| (changed)| `"false"` |
+| `srcDoc=(string 'on')`| (changed)| `"on"` |
+| `srcDoc=(string 'off')`| (changed)| `"off"` |
+| `srcDoc=(symbol)`| (initial, warning)| `<empty string>` |
+| `srcDoc=(function)`| (initial, warning)| `<empty string>` |
+| `srcDoc=(null)`| (initial)| `<empty string>` |
+| `srcDoc=(undefined)`| (initial)| `<empty string>` |
+
+## `srcdoc` (on `<iframe>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `srcdoc=(string)`| (changed, warning)| `"<p>Hi</p>"` |
+| `srcdoc=(empty string)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(array with string)`| (changed, warning)| `"<p>Hi</p>"` |
+| `srcdoc=(empty array)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(object)`| (changed, warning)| `"result of toString()"` |
+| `srcdoc=(numeric string)`| (changed, warning)| `"42"` |
+| `srcdoc=(-1)`| (changed, warning)| `"-1"` |
+| `srcdoc=(0)`| (changed, warning)| `"0"` |
+| `srcdoc=(integer)`| (changed, warning)| `"1"` |
+| `srcdoc=(NaN)`| (changed, warning)| `"NaN"` |
+| `srcdoc=(float)`| (changed, warning)| `"99.99"` |
+| `srcdoc=(true)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(false)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(string 'true')`| (changed, warning)| `"true"` |
+| `srcdoc=(string 'false')`| (changed, warning)| `"false"` |
+| `srcdoc=(string 'on')`| (changed, warning)| `"on"` |
+| `srcdoc=(string 'off')`| (changed, warning)| `"off"` |
+| `srcdoc=(symbol)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(function)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(null)`| (initial, warning)| `<empty string>` |
+| `srcdoc=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `srcLang` (on `<track>` inside `<audio>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `srcLang=(string)`| (changed)| `"en"` |
+| `srcLang=(empty string)`| (initial)| `<empty string>` |
+| `srcLang=(array with string)`| (changed)| `"en"` |
+| `srcLang=(empty array)`| (initial)| `<empty string>` |
+| `srcLang=(object)`| (changed)| `"result of toString()"` |
+| `srcLang=(numeric string)`| (changed)| `"42"` |
+| `srcLang=(-1)`| (changed)| `"-1"` |
+| `srcLang=(0)`| (changed)| `"0"` |
+| `srcLang=(integer)`| (changed)| `"1"` |
+| `srcLang=(NaN)`| (changed, warning)| `"NaN"` |
+| `srcLang=(float)`| (changed)| `"99.99"` |
+| `srcLang=(true)`| (initial, warning)| `<empty string>` |
+| `srcLang=(false)`| (initial, warning)| `<empty string>` |
+| `srcLang=(string 'true')`| (changed)| `"true"` |
+| `srcLang=(string 'false')`| (changed)| `"false"` |
+| `srcLang=(string 'on')`| (changed)| `"on"` |
+| `srcLang=(string 'off')`| (changed)| `"off"` |
+| `srcLang=(symbol)`| (initial, warning)| `<empty string>` |
+| `srcLang=(function)`| (initial, warning)| `<empty string>` |
+| `srcLang=(null)`| (initial)| `<empty string>` |
+| `srcLang=(undefined)`| (initial)| `<empty string>` |
+
+## `srclang` (on `<track>` inside `<audio>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `srclang=(string)`| (changed, warning)| `"en"` |
+| `srclang=(empty string)`| (initial, warning)| `<empty string>` |
+| `srclang=(array with string)`| (changed, warning)| `"en"` |
+| `srclang=(empty array)`| (initial, warning)| `<empty string>` |
+| `srclang=(object)`| (changed, warning)| `"result of toString()"` |
+| `srclang=(numeric string)`| (changed, warning)| `"42"` |
+| `srclang=(-1)`| (changed, warning)| `"-1"` |
+| `srclang=(0)`| (changed, warning)| `"0"` |
+| `srclang=(integer)`| (changed, warning)| `"1"` |
+| `srclang=(NaN)`| (changed, warning)| `"NaN"` |
+| `srclang=(float)`| (changed, warning)| `"99.99"` |
+| `srclang=(true)`| (initial, warning)| `<empty string>` |
+| `srclang=(false)`| (initial, warning)| `<empty string>` |
+| `srclang=(string 'true')`| (changed, warning)| `"true"` |
+| `srclang=(string 'false')`| (changed, warning)| `"false"` |
+| `srclang=(string 'on')`| (changed, warning)| `"on"` |
+| `srclang=(string 'off')`| (changed, warning)| `"off"` |
+| `srclang=(symbol)`| (initial, warning)| `<empty string>` |
+| `srclang=(function)`| (initial, warning)| `<empty string>` |
+| `srclang=(null)`| (initial, warning)| `<empty string>` |
+| `srclang=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `srcSet` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `srcSet=(string)`| (initial)| `<undefined>` |
+| `srcSet=(empty string)`| (initial)| `<undefined>` |
+| `srcSet=(array with string)`| (initial)| `<undefined>` |
+| `srcSet=(empty array)`| (initial)| `<undefined>` |
+| `srcSet=(object)`| (initial)| `<undefined>` |
+| `srcSet=(numeric string)`| (initial)| `<undefined>` |
+| `srcSet=(-1)`| (initial)| `<undefined>` |
+| `srcSet=(0)`| (initial)| `<undefined>` |
+| `srcSet=(integer)`| (initial)| `<undefined>` |
+| `srcSet=(NaN)`| (initial, warning)| `<undefined>` |
+| `srcSet=(float)`| (initial)| `<undefined>` |
+| `srcSet=(true)`| (initial, warning)| `<undefined>` |
+| `srcSet=(false)`| (initial, warning)| `<undefined>` |
+| `srcSet=(string 'true')`| (initial)| `<undefined>` |
+| `srcSet=(string 'false')`| (initial)| `<undefined>` |
+| `srcSet=(string 'on')`| (initial)| `<undefined>` |
+| `srcSet=(string 'off')`| (initial)| `<undefined>` |
+| `srcSet=(symbol)`| (initial, warning)| `<undefined>` |
+| `srcSet=(function)`| (initial, warning)| `<undefined>` |
+| `srcSet=(null)`| (initial)| `<undefined>` |
+| `srcSet=(undefined)`| (initial)| `<undefined>` |
+
+## `srcset` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `srcset=(string)`| (changed, warning)| `"a string"` |
+| `srcset=(empty string)`| (initial, warning)| `<empty string>` |
+| `srcset=(array with string)`| (changed, warning)| `"string"` |
+| `srcset=(empty array)`| (initial, warning)| `<empty string>` |
+| `srcset=(object)`| (changed, warning)| `"result of toString()"` |
+| `srcset=(numeric string)`| (changed, warning)| `"42"` |
+| `srcset=(-1)`| (changed, warning)| `"-1"` |
+| `srcset=(0)`| (changed, warning)| `"0"` |
+| `srcset=(integer)`| (changed, warning)| `"1"` |
+| `srcset=(NaN)`| (changed, warning)| `"NaN"` |
+| `srcset=(float)`| (changed, warning)| `"99.99"` |
+| `srcset=(true)`| (initial, warning)| `<empty string>` |
+| `srcset=(false)`| (initial, warning)| `<empty string>` |
+| `srcset=(string 'true')`| (changed, warning)| `"true"` |
+| `srcset=(string 'false')`| (changed, warning)| `"false"` |
+| `srcset=(string 'on')`| (changed, warning)| `"on"` |
+| `srcset=(string 'off')`| (changed, warning)| `"off"` |
+| `srcset=(symbol)`| (initial, warning)| `<empty string>` |
+| `srcset=(function)`| (initial, warning)| `<empty string>` |
+| `srcset=(null)`| (initial, warning)| `<empty string>` |
+| `srcset=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `start` (on `<ol>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `start=(string)`| (initial)| `<number: 1>` |
+| `start=(empty string)`| (initial)| `<number: 1>` |
+| `start=(array with string)`| (initial)| `<number: 1>` |
+| `start=(empty array)`| (initial)| `<number: 1>` |
+| `start=(object)`| (initial)| `<number: 1>` |
+| `start=(numeric string)`| (changed)| `<number: 42>` |
+| `start=(-1)`| (changed)| `<number: -1>` |
+| `start=(0)`| (changed)| `<number: 0>` |
+| `start=(integer)`| (initial)| `<number: 1>` |
+| `start=(NaN)`| (initial, warning)| `<number: 1>` |
+| `start=(float)`| (changed)| `<number: 99>` |
+| `start=(true)`| (initial, warning)| `<number: 1>` |
+| `start=(false)`| (initial, warning)| `<number: 1>` |
+| `start=(string 'true')`| (initial)| `<number: 1>` |
+| `start=(string 'false')`| (initial)| `<number: 1>` |
+| `start=(string 'on')`| (initial)| `<number: 1>` |
+| `start=(string 'off')`| (initial)| `<number: 1>` |
+| `start=(symbol)`| (initial, warning)| `<number: 1>` |
+| `start=(function)`| (initial, warning)| `<number: 1>` |
+| `start=(null)`| (initial)| `<number: 1>` |
+| `start=(undefined)`| (initial)| `<number: 1>` |
+
+## `startOffset` (on `<textPath>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `startOffset=(string)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(object)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `startOffset=(-1)`| (changed)| `<SVGLength: -1>` |
+| `startOffset=(0)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(integer)`| (changed)| `<SVGLength: 1>` |
+| `startOffset=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `startOffset=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `startOffset=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `startOffset=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `startOffset=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `startOffset=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `startOffset=(null)`| (initial)| `<SVGLength: 0>` |
+| `startOffset=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `state` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `state=(string)`| (changed)| `"a string"` |
+| `state=(empty string)`| (changed)| `<empty string>` |
+| `state=(array with string)`| (changed)| `"string"` |
+| `state=(empty array)`| (changed)| `<empty string>` |
+| `state=(object)`| (changed)| `"result of toString()"` |
+| `state=(numeric string)`| (changed)| `"42"` |
+| `state=(-1)`| (changed)| `"-1"` |
+| `state=(0)`| (changed)| `"0"` |
+| `state=(integer)`| (changed)| `"1"` |
+| `state=(NaN)`| (changed, warning)| `"NaN"` |
+| `state=(float)`| (changed)| `"99.99"` |
+| `state=(true)`| (initial, warning)| `<null>` |
+| `state=(false)`| (initial, warning)| `<null>` |
+| `state=(string 'true')`| (changed)| `"true"` |
+| `state=(string 'false')`| (changed)| `"false"` |
+| `state=(string 'on')`| (changed)| `"on"` |
+| `state=(string 'off')`| (changed)| `"off"` |
+| `state=(symbol)`| (initial, warning)| `<null>` |
+| `state=(function)`| (initial, warning)| `<null>` |
+| `state=(null)`| (initial)| `<null>` |
+| `state=(undefined)`| (initial)| `<null>` |
+
+## `stdDeviation` (on `<feGaussianBlur>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stdDeviation=(string)`| (changed)| `"a string"` |
+| `stdDeviation=(empty string)`| (changed)| `<empty string>` |
+| `stdDeviation=(array with string)`| (changed)| `"string"` |
+| `stdDeviation=(empty array)`| (changed)| `<empty string>` |
+| `stdDeviation=(object)`| (changed)| `"result of toString()"` |
+| `stdDeviation=(numeric string)`| (changed)| `"42"` |
+| `stdDeviation=(-1)`| (changed)| `"-1"` |
+| `stdDeviation=(0)`| (changed)| `"0"` |
+| `stdDeviation=(integer)`| (changed)| `"1"` |
+| `stdDeviation=(NaN)`| (changed, warning)| `"NaN"` |
+| `stdDeviation=(float)`| (changed)| `"99.99"` |
+| `stdDeviation=(true)`| (initial, warning)| `<null>` |
+| `stdDeviation=(false)`| (initial, warning)| `<null>` |
+| `stdDeviation=(string 'true')`| (changed)| `"true"` |
+| `stdDeviation=(string 'false')`| (changed)| `"false"` |
+| `stdDeviation=(string 'on')`| (changed)| `"on"` |
+| `stdDeviation=(string 'off')`| (changed)| `"off"` |
+| `stdDeviation=(symbol)`| (initial, warning)| `<null>` |
+| `stdDeviation=(function)`| (initial, warning)| `<null>` |
+| `stdDeviation=(null)`| (initial)| `<null>` |
+| `stdDeviation=(undefined)`| (initial)| `<null>` |
+
+## `stemh` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stemh=(string)`| (changed)| `"a string"` |
+| `stemh=(empty string)`| (changed)| `<empty string>` |
+| `stemh=(array with string)`| (changed)| `"string"` |
+| `stemh=(empty array)`| (changed)| `<empty string>` |
+| `stemh=(object)`| (changed)| `"result of toString()"` |
+| `stemh=(numeric string)`| (changed)| `"42"` |
+| `stemh=(-1)`| (changed)| `"-1"` |
+| `stemh=(0)`| (changed)| `"0"` |
+| `stemh=(integer)`| (changed)| `"1"` |
+| `stemh=(NaN)`| (changed, warning)| `"NaN"` |
+| `stemh=(float)`| (changed)| `"99.99"` |
+| `stemh=(true)`| (initial, warning)| `<null>` |
+| `stemh=(false)`| (initial, warning)| `<null>` |
+| `stemh=(string 'true')`| (changed)| `"true"` |
+| `stemh=(string 'false')`| (changed)| `"false"` |
+| `stemh=(string 'on')`| (changed)| `"on"` |
+| `stemh=(string 'off')`| (changed)| `"off"` |
+| `stemh=(symbol)`| (initial, warning)| `<null>` |
+| `stemh=(function)`| (initial, warning)| `<null>` |
+| `stemh=(null)`| (initial)| `<null>` |
+| `stemh=(undefined)`| (initial)| `<null>` |
+
+## `stemv` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stemv=(string)`| (changed)| `"a string"` |
+| `stemv=(empty string)`| (changed)| `<empty string>` |
+| `stemv=(array with string)`| (changed)| `"string"` |
+| `stemv=(empty array)`| (changed)| `<empty string>` |
+| `stemv=(object)`| (changed)| `"result of toString()"` |
+| `stemv=(numeric string)`| (changed)| `"42"` |
+| `stemv=(-1)`| (changed)| `"-1"` |
+| `stemv=(0)`| (changed)| `"0"` |
+| `stemv=(integer)`| (changed)| `"1"` |
+| `stemv=(NaN)`| (changed, warning)| `"NaN"` |
+| `stemv=(float)`| (changed)| `"99.99"` |
+| `stemv=(true)`| (initial, warning)| `<null>` |
+| `stemv=(false)`| (initial, warning)| `<null>` |
+| `stemv=(string 'true')`| (changed)| `"true"` |
+| `stemv=(string 'false')`| (changed)| `"false"` |
+| `stemv=(string 'on')`| (changed)| `"on"` |
+| `stemv=(string 'off')`| (changed)| `"off"` |
+| `stemv=(symbol)`| (initial, warning)| `<null>` |
+| `stemv=(function)`| (initial, warning)| `<null>` |
+| `stemv=(null)`| (initial)| `<null>` |
+| `stemv=(undefined)`| (initial)| `<null>` |
+
+## `step` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `step=(string)`| (changed)| `"a string"` |
+| `step=(empty string)`| (changed)| `<empty string>` |
+| `step=(array with string)`| (changed)| `"string"` |
+| `step=(empty array)`| (changed)| `<empty string>` |
+| `step=(object)`| (changed)| `"result of toString()"` |
+| `step=(numeric string)`| (changed)| `"42"` |
+| `step=(-1)`| (changed)| `"-1"` |
+| `step=(0)`| (changed)| `"0"` |
+| `step=(integer)`| (changed)| `"1"` |
+| `step=(NaN)`| (changed, warning)| `"NaN"` |
+| `step=(float)`| (changed)| `"99.99"` |
+| `step=(true)`| (initial, warning)| `<null>` |
+| `step=(false)`| (initial, warning)| `<null>` |
+| `step=(string 'true')`| (changed)| `"true"` |
+| `step=(string 'false')`| (changed)| `"false"` |
+| `step=(string 'on')`| (changed)| `"on"` |
+| `step=(string 'off')`| (changed)| `"off"` |
+| `step=(symbol)`| (initial, warning)| `<null>` |
+| `step=(function)`| (initial, warning)| `<null>` |
+| `step=(null)`| (initial)| `<null>` |
+| `step=(undefined)`| (initial)| `<null>` |
+
+## `stitchTiles` (on `<feTurbulence>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stitchTiles=(string)`| (changed)| `<number: 1>` |
+| `stitchTiles=(empty string)`| (initial)| `<number: 2>` |
+| `stitchTiles=(array with string)`| (changed)| `<number: 1>` |
+| `stitchTiles=(empty array)`| (initial)| `<number: 2>` |
+| `stitchTiles=(object)`| (initial)| `<number: 2>` |
+| `stitchTiles=(numeric string)`| (initial)| `<number: 2>` |
+| `stitchTiles=(-1)`| (initial)| `<number: 2>` |
+| `stitchTiles=(0)`| (initial)| `<number: 2>` |
+| `stitchTiles=(integer)`| (initial)| `<number: 2>` |
+| `stitchTiles=(NaN)`| (initial, warning)| `<number: 2>` |
+| `stitchTiles=(float)`| (initial)| `<number: 2>` |
+| `stitchTiles=(true)`| (initial, warning)| `<number: 2>` |
+| `stitchTiles=(false)`| (initial, warning)| `<number: 2>` |
+| `stitchTiles=(string 'true')`| (initial)| `<number: 2>` |
+| `stitchTiles=(string 'false')`| (initial)| `<number: 2>` |
+| `stitchTiles=(string 'on')`| (initial)| `<number: 2>` |
+| `stitchTiles=(string 'off')`| (initial)| `<number: 2>` |
+| `stitchTiles=(symbol)`| (initial, warning)| `<number: 2>` |
+| `stitchTiles=(function)`| (initial, warning)| `<number: 2>` |
+| `stitchTiles=(null)`| (initial)| `<number: 2>` |
+| `stitchTiles=(undefined)`| (initial)| `<number: 2>` |
+
+## `stop-color` (on `<stop>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stop-color=(string)`| (changed, warning)| `"a string"` |
+| `stop-color=(empty string)`| (changed, warning)| `<empty string>` |
+| `stop-color=(array with string)`| (changed, warning)| `"string"` |
+| `stop-color=(empty array)`| (changed, warning)| `<empty string>` |
+| `stop-color=(object)`| (changed, warning)| `"result of toString()"` |
+| `stop-color=(numeric string)`| (changed, warning)| `"42"` |
+| `stop-color=(-1)`| (changed, warning)| `"-1"` |
+| `stop-color=(0)`| (changed, warning)| `"0"` |
+| `stop-color=(integer)`| (changed, warning)| `"1"` |
+| `stop-color=(NaN)`| (changed, warning)| `"NaN"` |
+| `stop-color=(float)`| (changed, warning)| `"99.99"` |
+| `stop-color=(true)`| (initial, warning)| `<null>` |
+| `stop-color=(false)`| (initial, warning)| `<null>` |
+| `stop-color=(string 'true')`| (changed, warning)| `"true"` |
+| `stop-color=(string 'false')`| (changed, warning)| `"false"` |
+| `stop-color=(string 'on')`| (changed, warning)| `"on"` |
+| `stop-color=(string 'off')`| (changed, warning)| `"off"` |
+| `stop-color=(symbol)`| (initial, warning)| `<null>` |
+| `stop-color=(function)`| (initial, warning)| `<null>` |
+| `stop-color=(null)`| (initial, warning)| `<null>` |
+| `stop-color=(undefined)`| (initial, warning)| `<null>` |
+
+## `stop-opacity` (on `<stop>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stop-opacity=(string)`| (changed, warning)| `"a string"` |
+| `stop-opacity=(empty string)`| (changed, warning)| `<empty string>` |
+| `stop-opacity=(array with string)`| (changed, warning)| `"string"` |
+| `stop-opacity=(empty array)`| (changed, warning)| `<empty string>` |
+| `stop-opacity=(object)`| (changed, warning)| `"result of toString()"` |
+| `stop-opacity=(numeric string)`| (changed, warning)| `"42"` |
+| `stop-opacity=(-1)`| (changed, warning)| `"-1"` |
+| `stop-opacity=(0)`| (changed, warning)| `"0"` |
+| `stop-opacity=(integer)`| (changed, warning)| `"1"` |
+| `stop-opacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `stop-opacity=(float)`| (changed, warning)| `"99.99"` |
+| `stop-opacity=(true)`| (initial, warning)| `<null>` |
+| `stop-opacity=(false)`| (initial, warning)| `<null>` |
+| `stop-opacity=(string 'true')`| (changed, warning)| `"true"` |
+| `stop-opacity=(string 'false')`| (changed, warning)| `"false"` |
+| `stop-opacity=(string 'on')`| (changed, warning)| `"on"` |
+| `stop-opacity=(string 'off')`| (changed, warning)| `"off"` |
+| `stop-opacity=(symbol)`| (initial, warning)| `<null>` |
+| `stop-opacity=(function)`| (initial, warning)| `<null>` |
+| `stop-opacity=(null)`| (initial, warning)| `<null>` |
+| `stop-opacity=(undefined)`| (initial, warning)| `<null>` |
+
+## `stopColor` (on `<stop>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stopColor=(string)`| (changed)| `"a string"` |
+| `stopColor=(empty string)`| (changed)| `<empty string>` |
+| `stopColor=(array with string)`| (changed)| `"string"` |
+| `stopColor=(empty array)`| (changed)| `<empty string>` |
+| `stopColor=(object)`| (changed)| `"result of toString()"` |
+| `stopColor=(numeric string)`| (changed)| `"42"` |
+| `stopColor=(-1)`| (changed)| `"-1"` |
+| `stopColor=(0)`| (changed)| `"0"` |
+| `stopColor=(integer)`| (changed)| `"1"` |
+| `stopColor=(NaN)`| (changed, warning)| `"NaN"` |
+| `stopColor=(float)`| (changed)| `"99.99"` |
+| `stopColor=(true)`| (initial, warning)| `<null>` |
+| `stopColor=(false)`| (initial, warning)| `<null>` |
+| `stopColor=(string 'true')`| (changed)| `"true"` |
+| `stopColor=(string 'false')`| (changed)| `"false"` |
+| `stopColor=(string 'on')`| (changed)| `"on"` |
+| `stopColor=(string 'off')`| (changed)| `"off"` |
+| `stopColor=(symbol)`| (initial, warning)| `<null>` |
+| `stopColor=(function)`| (initial, warning)| `<null>` |
+| `stopColor=(null)`| (initial)| `<null>` |
+| `stopColor=(undefined)`| (initial)| `<null>` |
+
+## `stopOpacity` (on `<stop>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stopOpacity=(string)`| (changed)| `"a string"` |
+| `stopOpacity=(empty string)`| (changed)| `<empty string>` |
+| `stopOpacity=(array with string)`| (changed)| `"string"` |
+| `stopOpacity=(empty array)`| (changed)| `<empty string>` |
+| `stopOpacity=(object)`| (changed)| `"result of toString()"` |
+| `stopOpacity=(numeric string)`| (changed)| `"42"` |
+| `stopOpacity=(-1)`| (changed)| `"-1"` |
+| `stopOpacity=(0)`| (changed)| `"0"` |
+| `stopOpacity=(integer)`| (changed)| `"1"` |
+| `stopOpacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `stopOpacity=(float)`| (changed)| `"99.99"` |
+| `stopOpacity=(true)`| (initial, warning)| `<null>` |
+| `stopOpacity=(false)`| (initial, warning)| `<null>` |
+| `stopOpacity=(string 'true')`| (changed)| `"true"` |
+| `stopOpacity=(string 'false')`| (changed)| `"false"` |
+| `stopOpacity=(string 'on')`| (changed)| `"on"` |
+| `stopOpacity=(string 'off')`| (changed)| `"off"` |
+| `stopOpacity=(symbol)`| (initial, warning)| `<null>` |
+| `stopOpacity=(function)`| (initial, warning)| `<null>` |
+| `stopOpacity=(null)`| (initial)| `<null>` |
+| `stopOpacity=(undefined)`| (initial)| `<null>` |
+
+## `strikethrough-position` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strikethrough-position=(string)`| (changed, warning)| `"a string"` |
+| `strikethrough-position=(empty string)`| (changed, warning)| `<empty string>` |
+| `strikethrough-position=(array with string)`| (changed, warning)| `"string"` |
+| `strikethrough-position=(empty array)`| (changed, warning)| `<empty string>` |
+| `strikethrough-position=(object)`| (changed, warning)| `"result of toString()"` |
+| `strikethrough-position=(numeric string)`| (changed, warning)| `"42"` |
+| `strikethrough-position=(-1)`| (changed, warning)| `"-1"` |
+| `strikethrough-position=(0)`| (changed, warning)| `"0"` |
+| `strikethrough-position=(integer)`| (changed, warning)| `"1"` |
+| `strikethrough-position=(NaN)`| (changed, warning)| `"NaN"` |
+| `strikethrough-position=(float)`| (changed, warning)| `"99.99"` |
+| `strikethrough-position=(true)`| (initial, warning)| `<null>` |
+| `strikethrough-position=(false)`| (initial, warning)| `<null>` |
+| `strikethrough-position=(string 'true')`| (changed, warning)| `"true"` |
+| `strikethrough-position=(string 'false')`| (changed, warning)| `"false"` |
+| `strikethrough-position=(string 'on')`| (changed, warning)| `"on"` |
+| `strikethrough-position=(string 'off')`| (changed, warning)| `"off"` |
+| `strikethrough-position=(symbol)`| (initial, warning)| `<null>` |
+| `strikethrough-position=(function)`| (initial, warning)| `<null>` |
+| `strikethrough-position=(null)`| (initial, warning)| `<null>` |
+| `strikethrough-position=(undefined)`| (initial, warning)| `<null>` |
+
+## `strikethrough-thickness` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strikethrough-thickness=(string)`| (changed, warning)| `"a string"` |
+| `strikethrough-thickness=(empty string)`| (changed, warning)| `<empty string>` |
+| `strikethrough-thickness=(array with string)`| (changed, warning)| `"string"` |
+| `strikethrough-thickness=(empty array)`| (changed, warning)| `<empty string>` |
+| `strikethrough-thickness=(object)`| (changed, warning)| `"result of toString()"` |
+| `strikethrough-thickness=(numeric string)`| (changed, warning)| `"42"` |
+| `strikethrough-thickness=(-1)`| (changed, warning)| `"-1"` |
+| `strikethrough-thickness=(0)`| (changed, warning)| `"0"` |
+| `strikethrough-thickness=(integer)`| (changed, warning)| `"1"` |
+| `strikethrough-thickness=(NaN)`| (changed, warning)| `"NaN"` |
+| `strikethrough-thickness=(float)`| (changed, warning)| `"99.99"` |
+| `strikethrough-thickness=(true)`| (initial, warning)| `<null>` |
+| `strikethrough-thickness=(false)`| (initial, warning)| `<null>` |
+| `strikethrough-thickness=(string 'true')`| (changed, warning)| `"true"` |
+| `strikethrough-thickness=(string 'false')`| (changed, warning)| `"false"` |
+| `strikethrough-thickness=(string 'on')`| (changed, warning)| `"on"` |
+| `strikethrough-thickness=(string 'off')`| (changed, warning)| `"off"` |
+| `strikethrough-thickness=(symbol)`| (initial, warning)| `<null>` |
+| `strikethrough-thickness=(function)`| (initial, warning)| `<null>` |
+| `strikethrough-thickness=(null)`| (initial, warning)| `<null>` |
+| `strikethrough-thickness=(undefined)`| (initial, warning)| `<null>` |
+
+## `strikethroughPosition` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strikethroughPosition=(string)`| (changed)| `"a string"` |
+| `strikethroughPosition=(empty string)`| (changed)| `<empty string>` |
+| `strikethroughPosition=(array with string)`| (changed)| `"string"` |
+| `strikethroughPosition=(empty array)`| (changed)| `<empty string>` |
+| `strikethroughPosition=(object)`| (changed)| `"result of toString()"` |
+| `strikethroughPosition=(numeric string)`| (changed)| `"42"` |
+| `strikethroughPosition=(-1)`| (changed)| `"-1"` |
+| `strikethroughPosition=(0)`| (changed)| `"0"` |
+| `strikethroughPosition=(integer)`| (changed)| `"1"` |
+| `strikethroughPosition=(NaN)`| (changed, warning)| `"NaN"` |
+| `strikethroughPosition=(float)`| (changed)| `"99.99"` |
+| `strikethroughPosition=(true)`| (initial, warning)| `<null>` |
+| `strikethroughPosition=(false)`| (initial, warning)| `<null>` |
+| `strikethroughPosition=(string 'true')`| (changed)| `"true"` |
+| `strikethroughPosition=(string 'false')`| (changed)| `"false"` |
+| `strikethroughPosition=(string 'on')`| (changed)| `"on"` |
+| `strikethroughPosition=(string 'off')`| (changed)| `"off"` |
+| `strikethroughPosition=(symbol)`| (initial, warning)| `<null>` |
+| `strikethroughPosition=(function)`| (initial, warning)| `<null>` |
+| `strikethroughPosition=(null)`| (initial)| `<null>` |
+| `strikethroughPosition=(undefined)`| (initial)| `<null>` |
+
+## `strikethroughThickness` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strikethroughThickness=(string)`| (changed)| `"a string"` |
+| `strikethroughThickness=(empty string)`| (changed)| `<empty string>` |
+| `strikethroughThickness=(array with string)`| (changed)| `"string"` |
+| `strikethroughThickness=(empty array)`| (changed)| `<empty string>` |
+| `strikethroughThickness=(object)`| (changed)| `"result of toString()"` |
+| `strikethroughThickness=(numeric string)`| (changed)| `"42"` |
+| `strikethroughThickness=(-1)`| (changed)| `"-1"` |
+| `strikethroughThickness=(0)`| (changed)| `"0"` |
+| `strikethroughThickness=(integer)`| (changed)| `"1"` |
+| `strikethroughThickness=(NaN)`| (changed, warning)| `"NaN"` |
+| `strikethroughThickness=(float)`| (changed)| `"99.99"` |
+| `strikethroughThickness=(true)`| (initial, warning)| `<null>` |
+| `strikethroughThickness=(false)`| (initial, warning)| `<null>` |
+| `strikethroughThickness=(string 'true')`| (changed)| `"true"` |
+| `strikethroughThickness=(string 'false')`| (changed)| `"false"` |
+| `strikethroughThickness=(string 'on')`| (changed)| `"on"` |
+| `strikethroughThickness=(string 'off')`| (changed)| `"off"` |
+| `strikethroughThickness=(symbol)`| (initial, warning)| `<null>` |
+| `strikethroughThickness=(function)`| (initial, warning)| `<null>` |
+| `strikethroughThickness=(null)`| (initial)| `<null>` |
+| `strikethroughThickness=(undefined)`| (initial)| `<null>` |
+
+## `string` (on `<font-face-format>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `string=(string)`| (changed)| `"a string"` |
+| `string=(empty string)`| (changed)| `<empty string>` |
+| `string=(array with string)`| (changed)| `"string"` |
+| `string=(empty array)`| (changed)| `<empty string>` |
+| `string=(object)`| (changed)| `"result of toString()"` |
+| `string=(numeric string)`| (changed)| `"42"` |
+| `string=(-1)`| (changed)| `"-1"` |
+| `string=(0)`| (changed)| `"0"` |
+| `string=(integer)`| (changed)| `"1"` |
+| `string=(NaN)`| (changed, warning)| `"NaN"` |
+| `string=(float)`| (changed)| `"99.99"` |
+| `string=(true)`| (initial, warning)| `<null>` |
+| `string=(false)`| (initial, warning)| `<null>` |
+| `string=(string 'true')`| (changed)| `"true"` |
+| `string=(string 'false')`| (changed)| `"false"` |
+| `string=(string 'on')`| (changed)| `"on"` |
+| `string=(string 'off')`| (changed)| `"off"` |
+| `string=(symbol)`| (initial, warning)| `<null>` |
+| `string=(function)`| (initial, warning)| `<null>` |
+| `string=(null)`| (initial)| `<null>` |
+| `string=(undefined)`| (initial)| `<null>` |
+
+## `stroke` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke=(string)`| (changed)| `"a string"` |
+| `stroke=(empty string)`| (changed)| `<empty string>` |
+| `stroke=(array with string)`| (changed)| `"string"` |
+| `stroke=(empty array)`| (changed)| `<empty string>` |
+| `stroke=(object)`| (changed)| `"result of toString()"` |
+| `stroke=(numeric string)`| (changed)| `"42"` |
+| `stroke=(-1)`| (changed)| `"-1"` |
+| `stroke=(0)`| (changed)| `"0"` |
+| `stroke=(integer)`| (changed)| `"1"` |
+| `stroke=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke=(float)`| (changed)| `"99.99"` |
+| `stroke=(true)`| (initial, warning)| `<null>` |
+| `stroke=(false)`| (initial, warning)| `<null>` |
+| `stroke=(string 'true')`| (changed)| `"true"` |
+| `stroke=(string 'false')`| (changed)| `"false"` |
+| `stroke=(string 'on')`| (changed)| `"on"` |
+| `stroke=(string 'off')`| (changed)| `"off"` |
+| `stroke=(symbol)`| (initial, warning)| `<null>` |
+| `stroke=(function)`| (initial, warning)| `<null>` |
+| `stroke=(null)`| (initial)| `<null>` |
+| `stroke=(undefined)`| (initial)| `<null>` |
+
+## `stroke-dasharray` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-dasharray=(string)`| (changed, warning)| `"a string"` |
+| `stroke-dasharray=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-dasharray=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-dasharray=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-dasharray=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-dasharray=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-dasharray=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-dasharray=(0)`| (changed, warning)| `"0"` |
+| `stroke-dasharray=(integer)`| (changed, warning)| `"1"` |
+| `stroke-dasharray=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-dasharray=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-dasharray=(true)`| (initial, warning)| `<null>` |
+| `stroke-dasharray=(false)`| (initial, warning)| `<null>` |
+| `stroke-dasharray=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-dasharray=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-dasharray=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-dasharray=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-dasharray=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-dasharray=(function)`| (initial, warning)| `<null>` |
+| `stroke-dasharray=(null)`| (initial, warning)| `<null>` |
+| `stroke-dasharray=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-Dasharray` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-Dasharray=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(float)`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(true)`| (initial, warning)| `<null>` |
+| `stroke-Dasharray=(false)`| (initial, warning)| `<null>` |
+| `stroke-Dasharray=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
+| `stroke-Dasharray=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-Dasharray=(function)`| (initial, warning)| `<null>` |
+| `stroke-Dasharray=(null)`| (initial, warning)| `<null>` |
+| `stroke-Dasharray=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-dashoffset` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-dashoffset=(string)`| (changed, warning)| `"a string"` |
+| `stroke-dashoffset=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-dashoffset=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-dashoffset=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-dashoffset=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-dashoffset=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-dashoffset=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-dashoffset=(0)`| (changed, warning)| `"0"` |
+| `stroke-dashoffset=(integer)`| (changed, warning)| `"1"` |
+| `stroke-dashoffset=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-dashoffset=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-dashoffset=(true)`| (initial, warning)| `<null>` |
+| `stroke-dashoffset=(false)`| (initial, warning)| `<null>` |
+| `stroke-dashoffset=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-dashoffset=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-dashoffset=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-dashoffset=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-dashoffset=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-dashoffset=(function)`| (initial, warning)| `<null>` |
+| `stroke-dashoffset=(null)`| (initial, warning)| `<null>` |
+| `stroke-dashoffset=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-linecap` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-linecap=(string)`| (changed, warning)| `"a string"` |
+| `stroke-linecap=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-linecap=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-linecap=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-linecap=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-linecap=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-linecap=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-linecap=(0)`| (changed, warning)| `"0"` |
+| `stroke-linecap=(integer)`| (changed, warning)| `"1"` |
+| `stroke-linecap=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-linecap=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-linecap=(true)`| (initial, warning)| `<null>` |
+| `stroke-linecap=(false)`| (initial, warning)| `<null>` |
+| `stroke-linecap=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-linecap=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-linecap=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-linecap=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-linecap=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-linecap=(function)`| (initial, warning)| `<null>` |
+| `stroke-linecap=(null)`| (initial, warning)| `<null>` |
+| `stroke-linecap=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-linejoin` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-linejoin=(string)`| (changed, warning)| `"a string"` |
+| `stroke-linejoin=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-linejoin=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-linejoin=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-linejoin=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-linejoin=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-linejoin=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-linejoin=(0)`| (changed, warning)| `"0"` |
+| `stroke-linejoin=(integer)`| (changed, warning)| `"1"` |
+| `stroke-linejoin=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-linejoin=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-linejoin=(true)`| (initial, warning)| `<null>` |
+| `stroke-linejoin=(false)`| (initial, warning)| `<null>` |
+| `stroke-linejoin=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-linejoin=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-linejoin=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-linejoin=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-linejoin=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-linejoin=(function)`| (initial, warning)| `<null>` |
+| `stroke-linejoin=(null)`| (initial, warning)| `<null>` |
+| `stroke-linejoin=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-miterlimit` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-miterlimit=(string)`| (changed, warning)| `"a string"` |
+| `stroke-miterlimit=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-miterlimit=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-miterlimit=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-miterlimit=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-miterlimit=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-miterlimit=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-miterlimit=(0)`| (changed, warning)| `"0"` |
+| `stroke-miterlimit=(integer)`| (changed, warning)| `"1"` |
+| `stroke-miterlimit=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-miterlimit=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-miterlimit=(true)`| (initial, warning)| `<null>` |
+| `stroke-miterlimit=(false)`| (initial, warning)| `<null>` |
+| `stroke-miterlimit=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-miterlimit=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-miterlimit=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-miterlimit=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-miterlimit=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-miterlimit=(function)`| (initial, warning)| `<null>` |
+| `stroke-miterlimit=(null)`| (initial, warning)| `<null>` |
+| `stroke-miterlimit=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-opacity` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-opacity=(string)`| (changed, warning)| `"a string"` |
+| `stroke-opacity=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-opacity=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-opacity=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-opacity=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-opacity=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-opacity=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-opacity=(0)`| (changed, warning)| `"0"` |
+| `stroke-opacity=(integer)`| (changed, warning)| `"1"` |
+| `stroke-opacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-opacity=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-opacity=(true)`| (initial, warning)| `<null>` |
+| `stroke-opacity=(false)`| (initial, warning)| `<null>` |
+| `stroke-opacity=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-opacity=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-opacity=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-opacity=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-opacity=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-opacity=(function)`| (initial, warning)| `<null>` |
+| `stroke-opacity=(null)`| (initial, warning)| `<null>` |
+| `stroke-opacity=(undefined)`| (initial, warning)| `<null>` |
+
+## `stroke-width` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `stroke-width=(string)`| (changed, warning)| `"a string"` |
+| `stroke-width=(empty string)`| (changed, warning)| `<empty string>` |
+| `stroke-width=(array with string)`| (changed, warning)| `"string"` |
+| `stroke-width=(empty array)`| (changed, warning)| `<empty string>` |
+| `stroke-width=(object)`| (changed, warning)| `"result of toString()"` |
+| `stroke-width=(numeric string)`| (changed, warning)| `"42"` |
+| `stroke-width=(-1)`| (changed, warning)| `"-1"` |
+| `stroke-width=(0)`| (changed, warning)| `"0"` |
+| `stroke-width=(integer)`| (changed, warning)| `"1"` |
+| `stroke-width=(NaN)`| (changed, warning)| `"NaN"` |
+| `stroke-width=(float)`| (changed, warning)| `"99.99"` |
+| `stroke-width=(true)`| (initial, warning)| `<null>` |
+| `stroke-width=(false)`| (initial, warning)| `<null>` |
+| `stroke-width=(string 'true')`| (changed, warning)| `"true"` |
+| `stroke-width=(string 'false')`| (changed, warning)| `"false"` |
+| `stroke-width=(string 'on')`| (changed, warning)| `"on"` |
+| `stroke-width=(string 'off')`| (changed, warning)| `"off"` |
+| `stroke-width=(symbol)`| (initial, warning)| `<null>` |
+| `stroke-width=(function)`| (initial, warning)| `<null>` |
+| `stroke-width=(null)`| (initial, warning)| `<null>` |
+| `stroke-width=(undefined)`| (initial, warning)| `<null>` |
+
+## `strokeDasharray` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeDasharray=(string)`| (changed)| `"a string"` |
+| `strokeDasharray=(empty string)`| (changed)| `<empty string>` |
+| `strokeDasharray=(array with string)`| (changed)| `"string"` |
+| `strokeDasharray=(empty array)`| (changed)| `<empty string>` |
+| `strokeDasharray=(object)`| (changed)| `"result of toString()"` |
+| `strokeDasharray=(numeric string)`| (changed)| `"42"` |
+| `strokeDasharray=(-1)`| (changed)| `"-1"` |
+| `strokeDasharray=(0)`| (changed)| `"0"` |
+| `strokeDasharray=(integer)`| (changed)| `"1"` |
+| `strokeDasharray=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeDasharray=(float)`| (changed)| `"99.99"` |
+| `strokeDasharray=(true)`| (initial, warning)| `<null>` |
+| `strokeDasharray=(false)`| (initial, warning)| `<null>` |
+| `strokeDasharray=(string 'true')`| (changed)| `"true"` |
+| `strokeDasharray=(string 'false')`| (changed)| `"false"` |
+| `strokeDasharray=(string 'on')`| (changed)| `"on"` |
+| `strokeDasharray=(string 'off')`| (changed)| `"off"` |
+| `strokeDasharray=(symbol)`| (initial, warning)| `<null>` |
+| `strokeDasharray=(function)`| (initial, warning)| `<null>` |
+| `strokeDasharray=(null)`| (initial)| `<null>` |
+| `strokeDasharray=(undefined)`| (initial)| `<null>` |
+
+## `strokeDashoffset` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeDashoffset=(string)`| (changed)| `"a string"` |
+| `strokeDashoffset=(empty string)`| (changed)| `<empty string>` |
+| `strokeDashoffset=(array with string)`| (changed)| `"string"` |
+| `strokeDashoffset=(empty array)`| (changed)| `<empty string>` |
+| `strokeDashoffset=(object)`| (changed)| `"result of toString()"` |
+| `strokeDashoffset=(numeric string)`| (changed)| `"42"` |
+| `strokeDashoffset=(-1)`| (changed)| `"-1"` |
+| `strokeDashoffset=(0)`| (changed)| `"0"` |
+| `strokeDashoffset=(integer)`| (changed)| `"1"` |
+| `strokeDashoffset=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeDashoffset=(float)`| (changed)| `"99.99"` |
+| `strokeDashoffset=(true)`| (initial, warning)| `<null>` |
+| `strokeDashoffset=(false)`| (initial, warning)| `<null>` |
+| `strokeDashoffset=(string 'true')`| (changed)| `"true"` |
+| `strokeDashoffset=(string 'false')`| (changed)| `"false"` |
+| `strokeDashoffset=(string 'on')`| (changed)| `"on"` |
+| `strokeDashoffset=(string 'off')`| (changed)| `"off"` |
+| `strokeDashoffset=(symbol)`| (initial, warning)| `<null>` |
+| `strokeDashoffset=(function)`| (initial, warning)| `<null>` |
+| `strokeDashoffset=(null)`| (initial)| `<null>` |
+| `strokeDashoffset=(undefined)`| (initial)| `<null>` |
+
+## `strokeLinecap` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeLinecap=(string)`| (changed)| `"a string"` |
+| `strokeLinecap=(empty string)`| (changed)| `<empty string>` |
+| `strokeLinecap=(array with string)`| (changed)| `"string"` |
+| `strokeLinecap=(empty array)`| (changed)| `<empty string>` |
+| `strokeLinecap=(object)`| (changed)| `"result of toString()"` |
+| `strokeLinecap=(numeric string)`| (changed)| `"42"` |
+| `strokeLinecap=(-1)`| (changed)| `"-1"` |
+| `strokeLinecap=(0)`| (changed)| `"0"` |
+| `strokeLinecap=(integer)`| (changed)| `"1"` |
+| `strokeLinecap=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeLinecap=(float)`| (changed)| `"99.99"` |
+| `strokeLinecap=(true)`| (initial, warning)| `<null>` |
+| `strokeLinecap=(false)`| (initial, warning)| `<null>` |
+| `strokeLinecap=(string 'true')`| (changed)| `"true"` |
+| `strokeLinecap=(string 'false')`| (changed)| `"false"` |
+| `strokeLinecap=(string 'on')`| (changed)| `"on"` |
+| `strokeLinecap=(string 'off')`| (changed)| `"off"` |
+| `strokeLinecap=(symbol)`| (initial, warning)| `<null>` |
+| `strokeLinecap=(function)`| (initial, warning)| `<null>` |
+| `strokeLinecap=(null)`| (initial)| `<null>` |
+| `strokeLinecap=(undefined)`| (initial)| `<null>` |
+
+## `strokeLinejoin` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeLinejoin=(string)`| (changed)| `"a string"` |
+| `strokeLinejoin=(empty string)`| (changed)| `<empty string>` |
+| `strokeLinejoin=(array with string)`| (changed)| `"string"` |
+| `strokeLinejoin=(empty array)`| (changed)| `<empty string>` |
+| `strokeLinejoin=(object)`| (changed)| `"result of toString()"` |
+| `strokeLinejoin=(numeric string)`| (changed)| `"42"` |
+| `strokeLinejoin=(-1)`| (changed)| `"-1"` |
+| `strokeLinejoin=(0)`| (changed)| `"0"` |
+| `strokeLinejoin=(integer)`| (changed)| `"1"` |
+| `strokeLinejoin=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeLinejoin=(float)`| (changed)| `"99.99"` |
+| `strokeLinejoin=(true)`| (initial, warning)| `<null>` |
+| `strokeLinejoin=(false)`| (initial, warning)| `<null>` |
+| `strokeLinejoin=(string 'true')`| (changed)| `"true"` |
+| `strokeLinejoin=(string 'false')`| (changed)| `"false"` |
+| `strokeLinejoin=(string 'on')`| (changed)| `"on"` |
+| `strokeLinejoin=(string 'off')`| (changed)| `"off"` |
+| `strokeLinejoin=(symbol)`| (initial, warning)| `<null>` |
+| `strokeLinejoin=(function)`| (initial, warning)| `<null>` |
+| `strokeLinejoin=(null)`| (initial)| `<null>` |
+| `strokeLinejoin=(undefined)`| (initial)| `<null>` |
+
+## `strokeMiterlimit` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeMiterlimit=(string)`| (changed)| `"a string"` |
+| `strokeMiterlimit=(empty string)`| (changed)| `<empty string>` |
+| `strokeMiterlimit=(array with string)`| (changed)| `"string"` |
+| `strokeMiterlimit=(empty array)`| (changed)| `<empty string>` |
+| `strokeMiterlimit=(object)`| (changed)| `"result of toString()"` |
+| `strokeMiterlimit=(numeric string)`| (changed)| `"42"` |
+| `strokeMiterlimit=(-1)`| (changed)| `"-1"` |
+| `strokeMiterlimit=(0)`| (changed)| `"0"` |
+| `strokeMiterlimit=(integer)`| (changed)| `"1"` |
+| `strokeMiterlimit=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeMiterlimit=(float)`| (changed)| `"99.99"` |
+| `strokeMiterlimit=(true)`| (initial, warning)| `<null>` |
+| `strokeMiterlimit=(false)`| (initial, warning)| `<null>` |
+| `strokeMiterlimit=(string 'true')`| (changed)| `"true"` |
+| `strokeMiterlimit=(string 'false')`| (changed)| `"false"` |
+| `strokeMiterlimit=(string 'on')`| (changed)| `"on"` |
+| `strokeMiterlimit=(string 'off')`| (changed)| `"off"` |
+| `strokeMiterlimit=(symbol)`| (initial, warning)| `<null>` |
+| `strokeMiterlimit=(function)`| (initial, warning)| `<null>` |
+| `strokeMiterlimit=(null)`| (initial)| `<null>` |
+| `strokeMiterlimit=(undefined)`| (initial)| `<null>` |
+
+## `strokeOpacity` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeOpacity=(string)`| (changed)| `"a string"` |
+| `strokeOpacity=(empty string)`| (changed)| `<empty string>` |
+| `strokeOpacity=(array with string)`| (changed)| `"string"` |
+| `strokeOpacity=(empty array)`| (changed)| `<empty string>` |
+| `strokeOpacity=(object)`| (changed)| `"result of toString()"` |
+| `strokeOpacity=(numeric string)`| (changed)| `"42"` |
+| `strokeOpacity=(-1)`| (changed)| `"-1"` |
+| `strokeOpacity=(0)`| (changed)| `"0"` |
+| `strokeOpacity=(integer)`| (changed)| `"1"` |
+| `strokeOpacity=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeOpacity=(float)`| (changed)| `"99.99"` |
+| `strokeOpacity=(true)`| (initial, warning)| `<null>` |
+| `strokeOpacity=(false)`| (initial, warning)| `<null>` |
+| `strokeOpacity=(string 'true')`| (changed)| `"true"` |
+| `strokeOpacity=(string 'false')`| (changed)| `"false"` |
+| `strokeOpacity=(string 'on')`| (changed)| `"on"` |
+| `strokeOpacity=(string 'off')`| (changed)| `"off"` |
+| `strokeOpacity=(symbol)`| (initial, warning)| `<null>` |
+| `strokeOpacity=(function)`| (initial, warning)| `<null>` |
+| `strokeOpacity=(null)`| (initial)| `<null>` |
+| `strokeOpacity=(undefined)`| (initial)| `<null>` |
+
+## `strokeWidth` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `strokeWidth=(string)`| (changed)| `"a string"` |
+| `strokeWidth=(empty string)`| (changed)| `<empty string>` |
+| `strokeWidth=(array with string)`| (changed)| `"string"` |
+| `strokeWidth=(empty array)`| (changed)| `<empty string>` |
+| `strokeWidth=(object)`| (changed)| `"result of toString()"` |
+| `strokeWidth=(numeric string)`| (changed)| `"42"` |
+| `strokeWidth=(-1)`| (changed)| `"-1"` |
+| `strokeWidth=(0)`| (changed)| `"0"` |
+| `strokeWidth=(integer)`| (changed)| `"1"` |
+| `strokeWidth=(NaN)`| (changed, warning)| `"NaN"` |
+| `strokeWidth=(float)`| (changed)| `"99.99"` |
+| `strokeWidth=(true)`| (initial, warning)| `<null>` |
+| `strokeWidth=(false)`| (initial, warning)| `<null>` |
+| `strokeWidth=(string 'true')`| (changed)| `"true"` |
+| `strokeWidth=(string 'false')`| (changed)| `"false"` |
+| `strokeWidth=(string 'on')`| (changed)| `"on"` |
+| `strokeWidth=(string 'off')`| (changed)| `"off"` |
+| `strokeWidth=(symbol)`| (initial, warning)| `<null>` |
+| `strokeWidth=(function)`| (initial, warning)| `<null>` |
+| `strokeWidth=(null)`| (initial)| `<null>` |
+| `strokeWidth=(undefined)`| (initial)| `<null>` |
+
+## `style` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `style=(string)`| (changed, error, warning, ssr error)| `` |
+| `style=(empty string)`| (changed, error, warning, ssr error)| `` |
+| `style=(array with string)`| (changed, error, warning, ssr mismatch)| `` |
+| `style=(empty array)`| (initial)| `[]` |
+| `style=(object)`| (initial)| `[]` |
+| `style=(numeric string)`| (changed, error, warning, ssr error)| `` |
+| `style=(-1)`| (changed, error, warning, ssr error)| `` |
+| `style=(0)`| (changed, error, warning, ssr error)| `` |
+| `style=(integer)`| (changed, error, warning, ssr error)| `` |
+| `style=(NaN)`| (changed, error, warning, ssr error)| `` |
+| `style=(float)`| (changed, error, warning, ssr error)| `` |
+| `style=(true)`| (changed, error, warning, ssr error)| `` |
+| `style=(false)`| (changed, error, warning, ssr error)| `` |
+| `style=(string 'true')`| (changed, error, warning, ssr error)| `` |
+| `style=(string 'false')`| (changed, error, warning, ssr error)| `` |
+| `style=(string 'on')`| (changed, error, warning, ssr error)| `` |
+| `style=(string 'off')`| (changed, error, warning, ssr error)| `` |
+| `style=(symbol)`| (changed, error, warning, ssr error)| `` |
+| `style=(function)`| (changed, error, warning, ssr error)| `` |
+| `style=(null)`| (initial)| `[]` |
+| `style=(undefined)`| (initial)| `[]` |
+
+## `summary` (on `<table>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `summary=(string)`| (changed)| `"a string"` |
+| `summary=(empty string)`| (initial)| `<empty string>` |
+| `summary=(array with string)`| (changed)| `"string"` |
+| `summary=(empty array)`| (initial)| `<empty string>` |
+| `summary=(object)`| (changed)| `"result of toString()"` |
+| `summary=(numeric string)`| (changed)| `"42"` |
+| `summary=(-1)`| (changed)| `"-1"` |
+| `summary=(0)`| (changed)| `"0"` |
+| `summary=(integer)`| (changed)| `"1"` |
+| `summary=(NaN)`| (changed, warning)| `"NaN"` |
+| `summary=(float)`| (changed)| `"99.99"` |
+| `summary=(true)`| (initial, warning)| `<empty string>` |
+| `summary=(false)`| (initial, warning)| `<empty string>` |
+| `summary=(string 'true')`| (changed)| `"true"` |
+| `summary=(string 'false')`| (changed)| `"false"` |
+| `summary=(string 'on')`| (changed)| `"on"` |
+| `summary=(string 'off')`| (changed)| `"off"` |
+| `summary=(symbol)`| (initial, warning)| `<empty string>` |
+| `summary=(function)`| (initial, warning)| `<empty string>` |
+| `summary=(null)`| (initial)| `<empty string>` |
+| `summary=(undefined)`| (initial)| `<empty string>` |
+
+## `suppressContentEditableWarning` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `suppressContentEditableWarning=(string)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(empty string)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(array with string)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(empty array)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(object)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(numeric string)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(-1)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(0)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(integer)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(NaN)`| (initial, warning)| `<null>` |
+| `suppressContentEditableWarning=(float)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(true)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(false)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(string 'true')`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(string 'false')`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(string 'on')`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(string 'off')`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(symbol)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(function)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(null)`| (initial)| `<null>` |
+| `suppressContentEditableWarning=(undefined)`| (initial)| `<null>` |
+
+## `surfaceScale` (on `<feDiffuseLighting>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `surfaceScale=(string)`| (initial)| `<number: 1>` |
+| `surfaceScale=(empty string)`| (changed)| `<number: 0>` |
+| `surfaceScale=(array with string)`| (initial)| `<number: 1>` |
+| `surfaceScale=(empty array)`| (changed)| `<number: 0>` |
+| `surfaceScale=(object)`| (initial)| `<number: 1>` |
+| `surfaceScale=(numeric string)`| (changed)| `<number: 42>` |
+| `surfaceScale=(-1)`| (changed)| `<number: -1>` |
+| `surfaceScale=(0)`| (changed)| `<number: 0>` |
+| `surfaceScale=(integer)`| (initial)| `<number: 1>` |
+| `surfaceScale=(NaN)`| (initial, warning)| `<number: 1>` |
+| `surfaceScale=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `surfaceScale=(true)`| (initial, warning)| `<number: 1>` |
+| `surfaceScale=(false)`| (initial, warning)| `<number: 1>` |
+| `surfaceScale=(string 'true')`| (initial)| `<number: 1>` |
+| `surfaceScale=(string 'false')`| (initial)| `<number: 1>` |
+| `surfaceScale=(string 'on')`| (initial)| `<number: 1>` |
+| `surfaceScale=(string 'off')`| (initial)| `<number: 1>` |
+| `surfaceScale=(symbol)`| (initial, warning)| `<number: 1>` |
+| `surfaceScale=(function)`| (initial, warning)| `<number: 1>` |
+| `surfaceScale=(null)`| (initial)| `<number: 1>` |
+| `surfaceScale=(undefined)`| (initial)| `<number: 1>` |
+
+## `systemLanguage` (on `<a>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `systemLanguage=(string)`| (changed)| `["en"]` |
+| `systemLanguage=(empty string)`| (initial)| `[]` |
+| `systemLanguage=(array with string)`| (changed)| `["en"]` |
+| `systemLanguage=(empty array)`| (initial)| `[]` |
+| `systemLanguage=(object)`| (changed)| `["result", "of", "toString()"]` |
+| `systemLanguage=(numeric string)`| (changed)| `["42"]` |
+| `systemLanguage=(-1)`| (changed)| `["-1"]` |
+| `systemLanguage=(0)`| (changed)| `["0"]` |
+| `systemLanguage=(integer)`| (changed)| `["1"]` |
+| `systemLanguage=(NaN)`| (changed, warning)| `["NaN"]` |
+| `systemLanguage=(float)`| (changed)| `["99.99"]` |
+| `systemLanguage=(true)`| (initial, warning)| `[]` |
+| `systemLanguage=(false)`| (initial, warning)| `[]` |
+| `systemLanguage=(string 'true')`| (changed)| `["true"]` |
+| `systemLanguage=(string 'false')`| (changed)| `["false"]` |
+| `systemLanguage=(string 'on')`| (changed)| `["on"]` |
+| `systemLanguage=(string 'off')`| (changed)| `["off"]` |
+| `systemLanguage=(symbol)`| (initial, warning)| `[]` |
+| `systemLanguage=(function)`| (initial, warning)| `[]` |
+| `systemLanguage=(null)`| (initial)| `[]` |
+| `systemLanguage=(undefined)`| (initial)| `[]` |
+
+## `tabIndex` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `tabIndex=(string)`| (initial)| `<number: -1>` |
+| `tabIndex=(empty string)`| (initial)| `<number: -1>` |
+| `tabIndex=(array with string)`| (initial)| `<number: -1>` |
+| `tabIndex=(empty array)`| (initial)| `<number: -1>` |
+| `tabIndex=(object)`| (initial)| `<number: -1>` |
+| `tabIndex=(numeric string)`| (changed)| `<number: 42>` |
+| `tabIndex=(-1)`| (initial)| `<number: -1>` |
+| `tabIndex=(0)`| (changed)| `<number: 0>` |
+| `tabIndex=(integer)`| (changed)| `<number: 1>` |
+| `tabIndex=(NaN)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(float)`| (changed)| `<number: 99>` |
+| `tabIndex=(true)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(false)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(string 'true')`| (initial)| `<number: -1>` |
+| `tabIndex=(string 'false')`| (initial)| `<number: -1>` |
+| `tabIndex=(string 'on')`| (initial)| `<number: -1>` |
+| `tabIndex=(string 'off')`| (initial)| `<number: -1>` |
+| `tabIndex=(symbol)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(null)`| (initial)| `<number: -1>` |
+| `tabIndex=(undefined)`| (initial)| `<number: -1>` |
+
+## `tabIndex` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `tabIndex=(string)`| (initial)| `<number: -1>` |
+| `tabIndex=(empty string)`| (initial)| `<number: -1>` |
+| `tabIndex=(array with string)`| (initial)| `<number: -1>` |
+| `tabIndex=(empty array)`| (initial)| `<number: -1>` |
+| `tabIndex=(object)`| (initial)| `<number: -1>` |
+| `tabIndex=(numeric string)`| (changed)| `<number: 42>` |
+| `tabIndex=(-1)`| (initial)| `<number: -1>` |
+| `tabIndex=(0)`| (changed)| `<number: 0>` |
+| `tabIndex=(integer)`| (changed)| `<number: 1>` |
+| `tabIndex=(NaN)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(float)`| (changed)| `<number: 99>` |
+| `tabIndex=(true)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(false)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(string 'true')`| (initial)| `<number: -1>` |
+| `tabIndex=(string 'false')`| (initial)| `<number: -1>` |
+| `tabIndex=(string 'on')`| (initial)| `<number: -1>` |
+| `tabIndex=(string 'off')`| (initial)| `<number: -1>` |
+| `tabIndex=(symbol)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(null)`| (initial)| `<number: -1>` |
+| `tabIndex=(undefined)`| (initial)| `<number: -1>` |
+
+## `tableValues` (on `<feFuncA>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `tableValues=(string)`| (changed)| `[0, 1, 2, 3]` |
+| `tableValues=(empty string)`| (initial)| `[]` |
+| `tableValues=(array with string)`| (changed)| `[0, 1, 2, 3]` |
+| `tableValues=(empty array)`| (initial)| `[]` |
+| `tableValues=(object)`| (initial)| `[]` |
+| `tableValues=(numeric string)`| (changed)| `[42]` |
+| `tableValues=(-1)`| (changed)| `[-1]` |
+| `tableValues=(0)`| (changed)| `[0]` |
+| `tableValues=(integer)`| (changed)| `[1]` |
+| `tableValues=(NaN)`| (initial, warning)| `[]` |
+| `tableValues=(float)`| (changed)| `[99.98999786376953]` |
+| `tableValues=(true)`| (initial, warning)| `[]` |
+| `tableValues=(false)`| (initial, warning)| `[]` |
+| `tableValues=(string 'true')`| (initial)| `[]` |
+| `tableValues=(string 'false')`| (initial)| `[]` |
+| `tableValues=(string 'on')`| (initial)| `[]` |
+| `tableValues=(string 'off')`| (initial)| `[]` |
+| `tableValues=(symbol)`| (initial, warning)| `[]` |
+| `tableValues=(function)`| (initial, warning)| `[]` |
+| `tableValues=(null)`| (initial)| `[]` |
+| `tableValues=(undefined)`| (initial)| `[]` |
+
+## `target` (on `<a>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `target=(string)`| (changed)| `"a string"` |
+| `target=(empty string)`| (initial)| `<empty string>` |
+| `target=(array with string)`| (changed)| `"string"` |
+| `target=(empty array)`| (initial)| `<empty string>` |
+| `target=(object)`| (changed)| `"result of toString()"` |
+| `target=(numeric string)`| (changed)| `"42"` |
+| `target=(-1)`| (changed)| `"-1"` |
+| `target=(0)`| (changed)| `"0"` |
+| `target=(integer)`| (changed)| `"1"` |
+| `target=(NaN)`| (changed, warning)| `"NaN"` |
+| `target=(float)`| (changed)| `"99.99"` |
+| `target=(true)`| (initial, warning)| `<empty string>` |
+| `target=(false)`| (initial, warning)| `<empty string>` |
+| `target=(string 'true')`| (changed)| `"true"` |
+| `target=(string 'false')`| (changed)| `"false"` |
+| `target=(string 'on')`| (changed)| `"on"` |
+| `target=(string 'off')`| (changed)| `"off"` |
+| `target=(symbol)`| (initial, warning)| `<empty string>` |
+| `target=(function)`| (initial, warning)| `<empty string>` |
+| `target=(null)`| (initial)| `<empty string>` |
+| `target=(undefined)`| (initial)| `<empty string>` |
+
+## `targetX` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `targetX=(string)`| (initial)| `<number: 0>` |
+| `targetX=(empty string)`| (initial)| `<number: 0>` |
+| `targetX=(array with string)`| (initial)| `<number: 0>` |
+| `targetX=(empty array)`| (initial)| `<number: 0>` |
+| `targetX=(object)`| (initial)| `<number: 0>` |
+| `targetX=(numeric string)`| (changed)| `<number: 42>` |
+| `targetX=(-1)`| (changed)| `<number: -1>` |
+| `targetX=(0)`| (initial)| `<number: 0>` |
+| `targetX=(integer)`| (changed)| `<number: 1>` |
+| `targetX=(NaN)`| (initial, warning)| `<number: 0>` |
+| `targetX=(float)`| (initial)| `<number: 0>` |
+| `targetX=(true)`| (initial, warning)| `<number: 0>` |
+| `targetX=(false)`| (initial, warning)| `<number: 0>` |
+| `targetX=(string 'true')`| (initial)| `<number: 0>` |
+| `targetX=(string 'false')`| (initial)| `<number: 0>` |
+| `targetX=(string 'on')`| (initial)| `<number: 0>` |
+| `targetX=(string 'off')`| (initial)| `<number: 0>` |
+| `targetX=(symbol)`| (initial, warning)| `<number: 0>` |
+| `targetX=(function)`| (initial, warning)| `<number: 0>` |
+| `targetX=(null)`| (initial)| `<number: 0>` |
+| `targetX=(undefined)`| (initial)| `<number: 0>` |
+
+## `targetY` (on `<feConvolveMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `targetY=(string)`| (initial)| `<number: 0>` |
+| `targetY=(empty string)`| (initial)| `<number: 0>` |
+| `targetY=(array with string)`| (initial)| `<number: 0>` |
+| `targetY=(empty array)`| (initial)| `<number: 0>` |
+| `targetY=(object)`| (initial)| `<number: 0>` |
+| `targetY=(numeric string)`| (changed)| `<number: 42>` |
+| `targetY=(-1)`| (changed)| `<number: -1>` |
+| `targetY=(0)`| (initial)| `<number: 0>` |
+| `targetY=(integer)`| (changed)| `<number: 1>` |
+| `targetY=(NaN)`| (initial, warning)| `<number: 0>` |
+| `targetY=(float)`| (initial)| `<number: 0>` |
+| `targetY=(true)`| (initial, warning)| `<number: 0>` |
+| `targetY=(false)`| (initial, warning)| `<number: 0>` |
+| `targetY=(string 'true')`| (initial)| `<number: 0>` |
+| `targetY=(string 'false')`| (initial)| `<number: 0>` |
+| `targetY=(string 'on')`| (initial)| `<number: 0>` |
+| `targetY=(string 'off')`| (initial)| `<number: 0>` |
+| `targetY=(symbol)`| (initial, warning)| `<number: 0>` |
+| `targetY=(function)`| (initial, warning)| `<number: 0>` |
+| `targetY=(null)`| (initial)| `<number: 0>` |
+| `targetY=(undefined)`| (initial)| `<number: 0>` |
+
+## `text-anchor` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `text-anchor=(string)`| (changed, warning)| `"a string"` |
+| `text-anchor=(empty string)`| (changed, warning)| `<empty string>` |
+| `text-anchor=(array with string)`| (changed, warning)| `"string"` |
+| `text-anchor=(empty array)`| (changed, warning)| `<empty string>` |
+| `text-anchor=(object)`| (changed, warning)| `"result of toString()"` |
+| `text-anchor=(numeric string)`| (changed, warning)| `"42"` |
+| `text-anchor=(-1)`| (changed, warning)| `"-1"` |
+| `text-anchor=(0)`| (changed, warning)| `"0"` |
+| `text-anchor=(integer)`| (changed, warning)| `"1"` |
+| `text-anchor=(NaN)`| (changed, warning)| `"NaN"` |
+| `text-anchor=(float)`| (changed, warning)| `"99.99"` |
+| `text-anchor=(true)`| (initial, warning)| `<null>` |
+| `text-anchor=(false)`| (initial, warning)| `<null>` |
+| `text-anchor=(string 'true')`| (changed, warning)| `"true"` |
+| `text-anchor=(string 'false')`| (changed, warning)| `"false"` |
+| `text-anchor=(string 'on')`| (changed, warning)| `"on"` |
+| `text-anchor=(string 'off')`| (changed, warning)| `"off"` |
+| `text-anchor=(symbol)`| (initial, warning)| `<null>` |
+| `text-anchor=(function)`| (initial, warning)| `<null>` |
+| `text-anchor=(null)`| (initial, warning)| `<null>` |
+| `text-anchor=(undefined)`| (initial, warning)| `<null>` |
+
+## `text-decoration` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `text-decoration=(string)`| (changed, warning)| `"a string"` |
+| `text-decoration=(empty string)`| (changed, warning)| `<empty string>` |
+| `text-decoration=(array with string)`| (changed, warning)| `"string"` |
+| `text-decoration=(empty array)`| (changed, warning)| `<empty string>` |
+| `text-decoration=(object)`| (changed, warning)| `"result of toString()"` |
+| `text-decoration=(numeric string)`| (changed, warning)| `"42"` |
+| `text-decoration=(-1)`| (changed, warning)| `"-1"` |
+| `text-decoration=(0)`| (changed, warning)| `"0"` |
+| `text-decoration=(integer)`| (changed, warning)| `"1"` |
+| `text-decoration=(NaN)`| (changed, warning)| `"NaN"` |
+| `text-decoration=(float)`| (changed, warning)| `"99.99"` |
+| `text-decoration=(true)`| (initial, warning)| `<null>` |
+| `text-decoration=(false)`| (initial, warning)| `<null>` |
+| `text-decoration=(string 'true')`| (changed, warning)| `"true"` |
+| `text-decoration=(string 'false')`| (changed, warning)| `"false"` |
+| `text-decoration=(string 'on')`| (changed, warning)| `"on"` |
+| `text-decoration=(string 'off')`| (changed, warning)| `"off"` |
+| `text-decoration=(symbol)`| (initial, warning)| `<null>` |
+| `text-decoration=(function)`| (initial, warning)| `<null>` |
+| `text-decoration=(null)`| (initial, warning)| `<null>` |
+| `text-decoration=(undefined)`| (initial, warning)| `<null>` |
+
+## `text-rendering` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `text-rendering=(string)`| (changed, warning)| `"a string"` |
+| `text-rendering=(empty string)`| (changed, warning)| `<empty string>` |
+| `text-rendering=(array with string)`| (changed, warning)| `"string"` |
+| `text-rendering=(empty array)`| (changed, warning)| `<empty string>` |
+| `text-rendering=(object)`| (changed, warning)| `"result of toString()"` |
+| `text-rendering=(numeric string)`| (changed, warning)| `"42"` |
+| `text-rendering=(-1)`| (changed, warning)| `"-1"` |
+| `text-rendering=(0)`| (changed, warning)| `"0"` |
+| `text-rendering=(integer)`| (changed, warning)| `"1"` |
+| `text-rendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `text-rendering=(float)`| (changed, warning)| `"99.99"` |
+| `text-rendering=(true)`| (initial, warning)| `<null>` |
+| `text-rendering=(false)`| (initial, warning)| `<null>` |
+| `text-rendering=(string 'true')`| (changed, warning)| `"true"` |
+| `text-rendering=(string 'false')`| (changed, warning)| `"false"` |
+| `text-rendering=(string 'on')`| (changed, warning)| `"on"` |
+| `text-rendering=(string 'off')`| (changed, warning)| `"off"` |
+| `text-rendering=(symbol)`| (initial, warning)| `<null>` |
+| `text-rendering=(function)`| (initial, warning)| `<null>` |
+| `text-rendering=(null)`| (initial, warning)| `<null>` |
+| `text-rendering=(undefined)`| (initial, warning)| `<null>` |
+
+## `textAnchor` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `textAnchor=(string)`| (changed)| `"a string"` |
+| `textAnchor=(empty string)`| (changed)| `<empty string>` |
+| `textAnchor=(array with string)`| (changed)| `"string"` |
+| `textAnchor=(empty array)`| (changed)| `<empty string>` |
+| `textAnchor=(object)`| (changed)| `"result of toString()"` |
+| `textAnchor=(numeric string)`| (changed)| `"42"` |
+| `textAnchor=(-1)`| (changed)| `"-1"` |
+| `textAnchor=(0)`| (changed)| `"0"` |
+| `textAnchor=(integer)`| (changed)| `"1"` |
+| `textAnchor=(NaN)`| (changed, warning)| `"NaN"` |
+| `textAnchor=(float)`| (changed)| `"99.99"` |
+| `textAnchor=(true)`| (initial, warning)| `<null>` |
+| `textAnchor=(false)`| (initial, warning)| `<null>` |
+| `textAnchor=(string 'true')`| (changed)| `"true"` |
+| `textAnchor=(string 'false')`| (changed)| `"false"` |
+| `textAnchor=(string 'on')`| (changed)| `"on"` |
+| `textAnchor=(string 'off')`| (changed)| `"off"` |
+| `textAnchor=(symbol)`| (initial, warning)| `<null>` |
+| `textAnchor=(function)`| (initial, warning)| `<null>` |
+| `textAnchor=(null)`| (initial)| `<null>` |
+| `textAnchor=(undefined)`| (initial)| `<null>` |
+
+## `textDecoration` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `textDecoration=(string)`| (changed)| `"a string"` |
+| `textDecoration=(empty string)`| (changed)| `<empty string>` |
+| `textDecoration=(array with string)`| (changed)| `"string"` |
+| `textDecoration=(empty array)`| (changed)| `<empty string>` |
+| `textDecoration=(object)`| (changed)| `"result of toString()"` |
+| `textDecoration=(numeric string)`| (changed)| `"42"` |
+| `textDecoration=(-1)`| (changed)| `"-1"` |
+| `textDecoration=(0)`| (changed)| `"0"` |
+| `textDecoration=(integer)`| (changed)| `"1"` |
+| `textDecoration=(NaN)`| (changed, warning)| `"NaN"` |
+| `textDecoration=(float)`| (changed)| `"99.99"` |
+| `textDecoration=(true)`| (initial, warning)| `<null>` |
+| `textDecoration=(false)`| (initial, warning)| `<null>` |
+| `textDecoration=(string 'true')`| (changed)| `"true"` |
+| `textDecoration=(string 'false')`| (changed)| `"false"` |
+| `textDecoration=(string 'on')`| (changed)| `"on"` |
+| `textDecoration=(string 'off')`| (changed)| `"off"` |
+| `textDecoration=(symbol)`| (initial, warning)| `<null>` |
+| `textDecoration=(function)`| (initial, warning)| `<null>` |
+| `textDecoration=(null)`| (initial)| `<null>` |
+| `textDecoration=(undefined)`| (initial)| `<null>` |
+
+## `textLength` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `textLength=(string)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(object)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `textLength=(-1)`| (changed)| `<SVGLength: -1>` |
+| `textLength=(0)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(integer)`| (changed)| `<SVGLength: 1>` |
+| `textLength=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `textLength=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `textLength=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `textLength=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `textLength=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `textLength=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `textLength=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `textLength=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `textLength=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `textLength=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `textLength=(null)`| (initial)| `<SVGLength: 0>` |
+| `textLength=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `textRendering` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `textRendering=(string)`| (changed)| `"a string"` |
+| `textRendering=(empty string)`| (changed)| `<empty string>` |
+| `textRendering=(array with string)`| (changed)| `"string"` |
+| `textRendering=(empty array)`| (changed)| `<empty string>` |
+| `textRendering=(object)`| (changed)| `"result of toString()"` |
+| `textRendering=(numeric string)`| (changed)| `"42"` |
+| `textRendering=(-1)`| (changed)| `"-1"` |
+| `textRendering=(0)`| (changed)| `"0"` |
+| `textRendering=(integer)`| (changed)| `"1"` |
+| `textRendering=(NaN)`| (changed, warning)| `"NaN"` |
+| `textRendering=(float)`| (changed)| `"99.99"` |
+| `textRendering=(true)`| (initial, warning)| `<null>` |
+| `textRendering=(false)`| (initial, warning)| `<null>` |
+| `textRendering=(string 'true')`| (changed)| `"true"` |
+| `textRendering=(string 'false')`| (changed)| `"false"` |
+| `textRendering=(string 'on')`| (changed)| `"on"` |
+| `textRendering=(string 'off')`| (changed)| `"off"` |
+| `textRendering=(symbol)`| (initial, warning)| `<null>` |
+| `textRendering=(function)`| (initial, warning)| `<null>` |
+| `textRendering=(null)`| (initial)| `<null>` |
+| `textRendering=(undefined)`| (initial)| `<null>` |
+
+## `title` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `title=(string)`| (changed)| `"a string"` |
+| `title=(empty string)`| (initial)| `<empty string>` |
+| `title=(array with string)`| (changed)| `"string"` |
+| `title=(empty array)`| (initial)| `<empty string>` |
+| `title=(object)`| (changed)| `"result of toString()"` |
+| `title=(numeric string)`| (changed)| `"42"` |
+| `title=(-1)`| (changed)| `"-1"` |
+| `title=(0)`| (changed)| `"0"` |
+| `title=(integer)`| (changed)| `"1"` |
+| `title=(NaN)`| (changed, warning)| `"NaN"` |
+| `title=(float)`| (changed)| `"99.99"` |
+| `title=(true)`| (initial, warning)| `<empty string>` |
+| `title=(false)`| (initial, warning)| `<empty string>` |
+| `title=(string 'true')`| (changed)| `"true"` |
+| `title=(string 'false')`| (changed)| `"false"` |
+| `title=(string 'on')`| (changed)| `"on"` |
+| `title=(string 'off')`| (changed)| `"off"` |
+| `title=(symbol)`| (initial, warning)| `<empty string>` |
+| `title=(function)`| (initial, warning)| `<empty string>` |
+| `title=(null)`| (initial)| `<empty string>` |
+| `title=(undefined)`| (initial)| `<empty string>` |
+
+## `to` (on `<set>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `to=(string)`| (changed)| `"a string"` |
+| `to=(empty string)`| (changed)| `<empty string>` |
+| `to=(array with string)`| (changed)| `"string"` |
+| `to=(empty array)`| (changed)| `<empty string>` |
+| `to=(object)`| (changed)| `"result of toString()"` |
+| `to=(numeric string)`| (changed)| `"42"` |
+| `to=(-1)`| (changed)| `"-1"` |
+| `to=(0)`| (changed)| `"0"` |
+| `to=(integer)`| (changed)| `"1"` |
+| `to=(NaN)`| (changed, warning)| `"NaN"` |
+| `to=(float)`| (changed)| `"99.99"` |
+| `to=(true)`| (initial, warning)| `<null>` |
+| `to=(false)`| (initial, warning)| `<null>` |
+| `to=(string 'true')`| (changed)| `"true"` |
+| `to=(string 'false')`| (changed)| `"false"` |
+| `to=(string 'on')`| (changed)| `"on"` |
+| `to=(string 'off')`| (changed)| `"off"` |
+| `to=(symbol)`| (initial, warning)| `<null>` |
+| `to=(function)`| (initial, warning)| `<null>` |
+| `to=(null)`| (initial)| `<null>` |
+| `to=(undefined)`| (initial)| `<null>` |
+
+## `transform` (on `<a>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transform=(string)`| (changed)| `[<SVGMatrix 1 0 0 1 -10 -20>/2/0, <SVGMatrix 2 0 0 2 0 0>/3/0, <SVGMatrix 0.7071067811865476 0.7071067811865475 -0.7071067811865475 0.7071067811865476 0 0>/4/45, <SVGMatrix 1 0 0 1 5 10>/2/0]` |
+| `transform=(empty string)`| (initial)| `[]` |
+| `transform=(array with string)`| (changed)| `[<SVGMatrix 1 0 0 1 -10 -20>/2/0, <SVGMatrix 2 0 0 2 0 0>/3/0, <SVGMatrix 0.7071067811865476 0.7071067811865475 -0.7071067811865475 0.7071067811865476 0 0>/4/45, <SVGMatrix 1 0 0 1 5 10>/2/0]` |
+| `transform=(empty array)`| (initial)| `[]` |
+| `transform=(object)`| (initial)| `[]` |
+| `transform=(numeric string)`| (initial)| `[]` |
+| `transform=(-1)`| (initial)| `[]` |
+| `transform=(0)`| (initial)| `[]` |
+| `transform=(integer)`| (initial)| `[]` |
+| `transform=(NaN)`| (initial, warning)| `[]` |
+| `transform=(float)`| (initial)| `[]` |
+| `transform=(true)`| (initial, warning)| `[]` |
+| `transform=(false)`| (initial, warning)| `[]` |
+| `transform=(string 'true')`| (initial)| `[]` |
+| `transform=(string 'false')`| (initial)| `[]` |
+| `transform=(string 'on')`| (initial)| `[]` |
+| `transform=(string 'off')`| (initial)| `[]` |
+| `transform=(symbol)`| (initial, warning)| `[]` |
+| `transform=(function)`| (initial, warning)| `[]` |
+| `transform=(null)`| (initial)| `[]` |
+| `transform=(undefined)`| (initial)| `[]` |
+
+## `transform-origin` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transform-origin=(string)`| (changed, warning)| `"a string"` |
+| `transform-origin=(empty string)`| (changed, warning)| `<empty string>` |
+| `transform-origin=(array with string)`| (changed, warning)| `"string"` |
+| `transform-origin=(empty array)`| (changed, warning)| `<empty string>` |
+| `transform-origin=(object)`| (changed, warning)| `"result of toString()"` |
+| `transform-origin=(numeric string)`| (changed, warning)| `"42"` |
+| `transform-origin=(-1)`| (changed, warning)| `"-1"` |
+| `transform-origin=(0)`| (changed, warning)| `"0"` |
+| `transform-origin=(integer)`| (changed, warning)| `"1"` |
+| `transform-origin=(NaN)`| (changed, warning)| `"NaN"` |
+| `transform-origin=(float)`| (changed, warning)| `"99.99"` |
+| `transform-origin=(true)`| (initial, warning)| `<null>` |
+| `transform-origin=(false)`| (initial, warning)| `<null>` |
+| `transform-origin=(string 'true')`| (changed, warning)| `"true"` |
+| `transform-origin=(string 'false')`| (changed, warning)| `"false"` |
+| `transform-origin=(string 'on')`| (changed, warning)| `"on"` |
+| `transform-origin=(string 'off')`| (changed, warning)| `"off"` |
+| `transform-origin=(symbol)`| (initial, warning)| `<null>` |
+| `transform-origin=(function)`| (initial, warning)| `<null>` |
+| `transform-origin=(null)`| (initial, warning)| `<null>` |
+| `transform-origin=(undefined)`| (initial, warning)| `<null>` |
+
+## `transformOrigin` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transformOrigin=(string)`| (changed)| `"a string"` |
+| `transformOrigin=(empty string)`| (changed)| `<empty string>` |
+| `transformOrigin=(array with string)`| (changed)| `"string"` |
+| `transformOrigin=(empty array)`| (changed)| `<empty string>` |
+| `transformOrigin=(object)`| (changed)| `"result of toString()"` |
+| `transformOrigin=(numeric string)`| (changed)| `"42"` |
+| `transformOrigin=(-1)`| (changed)| `"-1"` |
+| `transformOrigin=(0)`| (changed)| `"0"` |
+| `transformOrigin=(integer)`| (changed)| `"1"` |
+| `transformOrigin=(NaN)`| (changed, warning)| `"NaN"` |
+| `transformOrigin=(float)`| (changed)| `"99.99"` |
+| `transformOrigin=(true)`| (initial, warning)| `<null>` |
+| `transformOrigin=(false)`| (initial, warning)| `<null>` |
+| `transformOrigin=(string 'true')`| (changed)| `"true"` |
+| `transformOrigin=(string 'false')`| (changed)| `"false"` |
+| `transformOrigin=(string 'on')`| (changed)| `"on"` |
+| `transformOrigin=(string 'off')`| (changed)| `"off"` |
+| `transformOrigin=(symbol)`| (initial, warning)| `<null>` |
+| `transformOrigin=(function)`| (initial, warning)| `<null>` |
+| `transformOrigin=(null)`| (initial)| `<null>` |
+| `transformOrigin=(undefined)`| (initial)| `<null>` |
+
+## `type` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `type=(string)`| (changed)| `"reset"` |
+| `type=(empty string)`| (initial)| `"submit"` |
+| `type=(array with string)`| (changed)| `"reset"` |
+| `type=(empty array)`| (initial)| `"submit"` |
+| `type=(object)`| (initial)| `"submit"` |
+| `type=(numeric string)`| (initial)| `"submit"` |
+| `type=(-1)`| (initial)| `"submit"` |
+| `type=(0)`| (initial)| `"submit"` |
+| `type=(integer)`| (initial)| `"submit"` |
+| `type=(NaN)`| (initial, warning)| `"submit"` |
+| `type=(float)`| (initial)| `"submit"` |
+| `type=(true)`| (initial, warning)| `"submit"` |
+| `type=(false)`| (initial, warning)| `"submit"` |
+| `type=(string 'true')`| (initial)| `"submit"` |
+| `type=(string 'false')`| (initial)| `"submit"` |
+| `type=(string 'on')`| (initial)| `"submit"` |
+| `type=(string 'off')`| (initial)| `"submit"` |
+| `type=(symbol)`| (initial, warning)| `"submit"` |
+| `type=(function)`| (initial, warning)| `"submit"` |
+| `type=(null)`| (initial)| `"submit"` |
+| `type=(undefined)`| (initial)| `"submit"` |
+
+## `type` (on `<feFuncA>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `type=(string)`| (changed)| `<number: 3>` |
+| `type=(empty string)`| (initial)| `<number: 1>` |
+| `type=(array with string)`| (changed)| `<number: 3>` |
+| `type=(empty array)`| (initial)| `<number: 1>` |
+| `type=(object)`| (initial)| `<number: 1>` |
+| `type=(numeric string)`| (initial)| `<number: 1>` |
+| `type=(-1)`| (initial)| `<number: 1>` |
+| `type=(0)`| (initial)| `<number: 1>` |
+| `type=(integer)`| (initial)| `<number: 1>` |
+| `type=(NaN)`| (initial, warning)| `<number: 1>` |
+| `type=(float)`| (initial)| `<number: 1>` |
+| `type=(true)`| (initial, warning)| `<number: 1>` |
+| `type=(false)`| (initial, warning)| `<number: 1>` |
+| `type=(string 'true')`| (initial)| `<number: 1>` |
+| `type=(string 'false')`| (initial)| `<number: 1>` |
+| `type=(string 'on')`| (initial)| `<number: 1>` |
+| `type=(string 'off')`| (initial)| `<number: 1>` |
+| `type=(symbol)`| (initial, warning)| `<number: 1>` |
+| `type=(function)`| (initial, warning)| `<number: 1>` |
+| `type=(null)`| (initial)| `<number: 1>` |
+| `type=(undefined)`| (initial)| `<number: 1>` |
+
+## `typeof` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `typeof=(string)`| (changed)| `"a string"` |
+| `typeof=(empty string)`| (changed)| `<empty string>` |
+| `typeof=(array with string)`| (changed)| `"string"` |
+| `typeof=(empty array)`| (changed)| `<empty string>` |
+| `typeof=(object)`| (changed)| `"result of toString()"` |
+| `typeof=(numeric string)`| (changed)| `"42"` |
+| `typeof=(-1)`| (changed)| `"-1"` |
+| `typeof=(0)`| (changed)| `"0"` |
+| `typeof=(integer)`| (changed)| `"1"` |
+| `typeof=(NaN)`| (changed, warning)| `"NaN"` |
+| `typeof=(float)`| (changed)| `"99.99"` |
+| `typeof=(true)`| (initial, warning)| `<null>` |
+| `typeof=(false)`| (initial, warning)| `<null>` |
+| `typeof=(string 'true')`| (changed)| `"true"` |
+| `typeof=(string 'false')`| (changed)| `"false"` |
+| `typeof=(string 'on')`| (changed)| `"on"` |
+| `typeof=(string 'off')`| (changed)| `"off"` |
+| `typeof=(symbol)`| (initial, warning)| `<null>` |
+| `typeof=(function)`| (initial, warning)| `<null>` |
+| `typeof=(null)`| (initial)| `<null>` |
+| `typeof=(undefined)`| (initial)| `<null>` |
+
+## `u1` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `u1=(string)`| (changed)| `"a string"` |
+| `u1=(empty string)`| (changed)| `<empty string>` |
+| `u1=(array with string)`| (changed)| `"string"` |
+| `u1=(empty array)`| (changed)| `<empty string>` |
+| `u1=(object)`| (changed)| `"result of toString()"` |
+| `u1=(numeric string)`| (changed)| `"42"` |
+| `u1=(-1)`| (changed)| `"-1"` |
+| `u1=(0)`| (changed)| `"0"` |
+| `u1=(integer)`| (changed)| `"1"` |
+| `u1=(NaN)`| (changed, warning)| `"NaN"` |
+| `u1=(float)`| (changed)| `"99.99"` |
+| `u1=(true)`| (initial, warning)| `<null>` |
+| `u1=(false)`| (initial, warning)| `<null>` |
+| `u1=(string 'true')`| (changed)| `"true"` |
+| `u1=(string 'false')`| (changed)| `"false"` |
+| `u1=(string 'on')`| (changed)| `"on"` |
+| `u1=(string 'off')`| (changed)| `"off"` |
+| `u1=(symbol)`| (initial, warning)| `<null>` |
+| `u1=(function)`| (initial, warning)| `<null>` |
+| `u1=(null)`| (initial)| `<null>` |
+| `u1=(undefined)`| (initial)| `<null>` |
+
+## `u2` (on `<hkern>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `u2=(string)`| (changed)| `"a string"` |
+| `u2=(empty string)`| (changed)| `<empty string>` |
+| `u2=(array with string)`| (changed)| `"string"` |
+| `u2=(empty array)`| (changed)| `<empty string>` |
+| `u2=(object)`| (changed)| `"result of toString()"` |
+| `u2=(numeric string)`| (changed)| `"42"` |
+| `u2=(-1)`| (changed)| `"-1"` |
+| `u2=(0)`| (changed)| `"0"` |
+| `u2=(integer)`| (changed)| `"1"` |
+| `u2=(NaN)`| (changed, warning)| `"NaN"` |
+| `u2=(float)`| (changed)| `"99.99"` |
+| `u2=(true)`| (initial, warning)| `<null>` |
+| `u2=(false)`| (initial, warning)| `<null>` |
+| `u2=(string 'true')`| (changed)| `"true"` |
+| `u2=(string 'false')`| (changed)| `"false"` |
+| `u2=(string 'on')`| (changed)| `"on"` |
+| `u2=(string 'off')`| (changed)| `"off"` |
+| `u2=(symbol)`| (initial, warning)| `<null>` |
+| `u2=(function)`| (initial, warning)| `<null>` |
+| `u2=(null)`| (initial)| `<null>` |
+| `u2=(undefined)`| (initial)| `<null>` |
+
+## `underline-position` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `underline-position=(string)`| (changed, warning)| `"a string"` |
+| `underline-position=(empty string)`| (changed, warning)| `<empty string>` |
+| `underline-position=(array with string)`| (changed, warning)| `"string"` |
+| `underline-position=(empty array)`| (changed, warning)| `<empty string>` |
+| `underline-position=(object)`| (changed, warning)| `"result of toString()"` |
+| `underline-position=(numeric string)`| (changed, warning)| `"42"` |
+| `underline-position=(-1)`| (changed, warning)| `"-1"` |
+| `underline-position=(0)`| (changed, warning)| `"0"` |
+| `underline-position=(integer)`| (changed, warning)| `"1"` |
+| `underline-position=(NaN)`| (changed, warning)| `"NaN"` |
+| `underline-position=(float)`| (changed, warning)| `"99.99"` |
+| `underline-position=(true)`| (initial, warning)| `<null>` |
+| `underline-position=(false)`| (initial, warning)| `<null>` |
+| `underline-position=(string 'true')`| (changed, warning)| `"true"` |
+| `underline-position=(string 'false')`| (changed, warning)| `"false"` |
+| `underline-position=(string 'on')`| (changed, warning)| `"on"` |
+| `underline-position=(string 'off')`| (changed, warning)| `"off"` |
+| `underline-position=(symbol)`| (initial, warning)| `<null>` |
+| `underline-position=(function)`| (initial, warning)| `<null>` |
+| `underline-position=(null)`| (initial, warning)| `<null>` |
+| `underline-position=(undefined)`| (initial, warning)| `<null>` |
+
+## `underline-thickness` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `underline-thickness=(string)`| (changed, warning)| `"a string"` |
+| `underline-thickness=(empty string)`| (changed, warning)| `<empty string>` |
+| `underline-thickness=(array with string)`| (changed, warning)| `"string"` |
+| `underline-thickness=(empty array)`| (changed, warning)| `<empty string>` |
+| `underline-thickness=(object)`| (changed, warning)| `"result of toString()"` |
+| `underline-thickness=(numeric string)`| (changed, warning)| `"42"` |
+| `underline-thickness=(-1)`| (changed, warning)| `"-1"` |
+| `underline-thickness=(0)`| (changed, warning)| `"0"` |
+| `underline-thickness=(integer)`| (changed, warning)| `"1"` |
+| `underline-thickness=(NaN)`| (changed, warning)| `"NaN"` |
+| `underline-thickness=(float)`| (changed, warning)| `"99.99"` |
+| `underline-thickness=(true)`| (initial, warning)| `<null>` |
+| `underline-thickness=(false)`| (initial, warning)| `<null>` |
+| `underline-thickness=(string 'true')`| (changed, warning)| `"true"` |
+| `underline-thickness=(string 'false')`| (changed, warning)| `"false"` |
+| `underline-thickness=(string 'on')`| (changed, warning)| `"on"` |
+| `underline-thickness=(string 'off')`| (changed, warning)| `"off"` |
+| `underline-thickness=(symbol)`| (initial, warning)| `<null>` |
+| `underline-thickness=(function)`| (initial, warning)| `<null>` |
+| `underline-thickness=(null)`| (initial, warning)| `<null>` |
+| `underline-thickness=(undefined)`| (initial, warning)| `<null>` |
+
+## `underlinePosition` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `underlinePosition=(string)`| (changed)| `"a string"` |
+| `underlinePosition=(empty string)`| (changed)| `<empty string>` |
+| `underlinePosition=(array with string)`| (changed)| `"string"` |
+| `underlinePosition=(empty array)`| (changed)| `<empty string>` |
+| `underlinePosition=(object)`| (changed)| `"result of toString()"` |
+| `underlinePosition=(numeric string)`| (changed)| `"42"` |
+| `underlinePosition=(-1)`| (changed)| `"-1"` |
+| `underlinePosition=(0)`| (changed)| `"0"` |
+| `underlinePosition=(integer)`| (changed)| `"1"` |
+| `underlinePosition=(NaN)`| (changed, warning)| `"NaN"` |
+| `underlinePosition=(float)`| (changed)| `"99.99"` |
+| `underlinePosition=(true)`| (initial, warning)| `<null>` |
+| `underlinePosition=(false)`| (initial, warning)| `<null>` |
+| `underlinePosition=(string 'true')`| (changed)| `"true"` |
+| `underlinePosition=(string 'false')`| (changed)| `"false"` |
+| `underlinePosition=(string 'on')`| (changed)| `"on"` |
+| `underlinePosition=(string 'off')`| (changed)| `"off"` |
+| `underlinePosition=(symbol)`| (initial, warning)| `<null>` |
+| `underlinePosition=(function)`| (initial, warning)| `<null>` |
+| `underlinePosition=(null)`| (initial)| `<null>` |
+| `underlinePosition=(undefined)`| (initial)| `<null>` |
+
+## `underlineThickness` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `underlineThickness=(string)`| (changed)| `"a string"` |
+| `underlineThickness=(empty string)`| (changed)| `<empty string>` |
+| `underlineThickness=(array with string)`| (changed)| `"string"` |
+| `underlineThickness=(empty array)`| (changed)| `<empty string>` |
+| `underlineThickness=(object)`| (changed)| `"result of toString()"` |
+| `underlineThickness=(numeric string)`| (changed)| `"42"` |
+| `underlineThickness=(-1)`| (changed)| `"-1"` |
+| `underlineThickness=(0)`| (changed)| `"0"` |
+| `underlineThickness=(integer)`| (changed)| `"1"` |
+| `underlineThickness=(NaN)`| (changed, warning)| `"NaN"` |
+| `underlineThickness=(float)`| (changed)| `"99.99"` |
+| `underlineThickness=(true)`| (initial, warning)| `<null>` |
+| `underlineThickness=(false)`| (initial, warning)| `<null>` |
+| `underlineThickness=(string 'true')`| (changed)| `"true"` |
+| `underlineThickness=(string 'false')`| (changed)| `"false"` |
+| `underlineThickness=(string 'on')`| (changed)| `"on"` |
+| `underlineThickness=(string 'off')`| (changed)| `"off"` |
+| `underlineThickness=(symbol)`| (initial, warning)| `<null>` |
+| `underlineThickness=(function)`| (initial, warning)| `<null>` |
+| `underlineThickness=(null)`| (initial)| `<null>` |
+| `underlineThickness=(undefined)`| (initial)| `<null>` |
+
+## `unicode` (on `<glyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unicode=(string)`| (changed)| `"a string"` |
+| `unicode=(empty string)`| (changed)| `<empty string>` |
+| `unicode=(array with string)`| (changed)| `"string"` |
+| `unicode=(empty array)`| (changed)| `<empty string>` |
+| `unicode=(object)`| (changed)| `"result of toString()"` |
+| `unicode=(numeric string)`| (changed)| `"42"` |
+| `unicode=(-1)`| (changed)| `"-1"` |
+| `unicode=(0)`| (changed)| `"0"` |
+| `unicode=(integer)`| (changed)| `"1"` |
+| `unicode=(NaN)`| (changed, warning)| `"NaN"` |
+| `unicode=(float)`| (changed)| `"99.99"` |
+| `unicode=(true)`| (initial, warning)| `<null>` |
+| `unicode=(false)`| (initial, warning)| `<null>` |
+| `unicode=(string 'true')`| (changed)| `"true"` |
+| `unicode=(string 'false')`| (changed)| `"false"` |
+| `unicode=(string 'on')`| (changed)| `"on"` |
+| `unicode=(string 'off')`| (changed)| `"off"` |
+| `unicode=(symbol)`| (initial, warning)| `<null>` |
+| `unicode=(function)`| (initial, warning)| `<null>` |
+| `unicode=(null)`| (initial)| `<null>` |
+| `unicode=(undefined)`| (initial)| `<null>` |
+
+## `unicode-bidi` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unicode-bidi=(string)`| (changed, warning)| `"a string"` |
+| `unicode-bidi=(empty string)`| (changed, warning)| `<empty string>` |
+| `unicode-bidi=(array with string)`| (changed, warning)| `"string"` |
+| `unicode-bidi=(empty array)`| (changed, warning)| `<empty string>` |
+| `unicode-bidi=(object)`| (changed, warning)| `"result of toString()"` |
+| `unicode-bidi=(numeric string)`| (changed, warning)| `"42"` |
+| `unicode-bidi=(-1)`| (changed, warning)| `"-1"` |
+| `unicode-bidi=(0)`| (changed, warning)| `"0"` |
+| `unicode-bidi=(integer)`| (changed, warning)| `"1"` |
+| `unicode-bidi=(NaN)`| (changed, warning)| `"NaN"` |
+| `unicode-bidi=(float)`| (changed, warning)| `"99.99"` |
+| `unicode-bidi=(true)`| (initial, warning)| `<null>` |
+| `unicode-bidi=(false)`| (initial, warning)| `<null>` |
+| `unicode-bidi=(string 'true')`| (changed, warning)| `"true"` |
+| `unicode-bidi=(string 'false')`| (changed, warning)| `"false"` |
+| `unicode-bidi=(string 'on')`| (changed, warning)| `"on"` |
+| `unicode-bidi=(string 'off')`| (changed, warning)| `"off"` |
+| `unicode-bidi=(symbol)`| (initial, warning)| `<null>` |
+| `unicode-bidi=(function)`| (initial, warning)| `<null>` |
+| `unicode-bidi=(null)`| (initial, warning)| `<null>` |
+| `unicode-bidi=(undefined)`| (initial, warning)| `<null>` |
+
+## `unicode-range` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unicode-range=(string)`| (changed, warning)| `"a string"` |
+| `unicode-range=(empty string)`| (changed, warning)| `<empty string>` |
+| `unicode-range=(array with string)`| (changed, warning)| `"string"` |
+| `unicode-range=(empty array)`| (changed, warning)| `<empty string>` |
+| `unicode-range=(object)`| (changed, warning)| `"result of toString()"` |
+| `unicode-range=(numeric string)`| (changed, warning)| `"42"` |
+| `unicode-range=(-1)`| (changed, warning)| `"-1"` |
+| `unicode-range=(0)`| (changed, warning)| `"0"` |
+| `unicode-range=(integer)`| (changed, warning)| `"1"` |
+| `unicode-range=(NaN)`| (changed, warning)| `"NaN"` |
+| `unicode-range=(float)`| (changed, warning)| `"99.99"` |
+| `unicode-range=(true)`| (initial, warning)| `<null>` |
+| `unicode-range=(false)`| (initial, warning)| `<null>` |
+| `unicode-range=(string 'true')`| (changed, warning)| `"true"` |
+| `unicode-range=(string 'false')`| (changed, warning)| `"false"` |
+| `unicode-range=(string 'on')`| (changed, warning)| `"on"` |
+| `unicode-range=(string 'off')`| (changed, warning)| `"off"` |
+| `unicode-range=(symbol)`| (initial, warning)| `<null>` |
+| `unicode-range=(function)`| (initial, warning)| `<null>` |
+| `unicode-range=(null)`| (initial, warning)| `<null>` |
+| `unicode-range=(undefined)`| (initial, warning)| `<null>` |
+
+## `unicodeBidi` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unicodeBidi=(string)`| (changed)| `"a string"` |
+| `unicodeBidi=(empty string)`| (changed)| `<empty string>` |
+| `unicodeBidi=(array with string)`| (changed)| `"string"` |
+| `unicodeBidi=(empty array)`| (changed)| `<empty string>` |
+| `unicodeBidi=(object)`| (changed)| `"result of toString()"` |
+| `unicodeBidi=(numeric string)`| (changed)| `"42"` |
+| `unicodeBidi=(-1)`| (changed)| `"-1"` |
+| `unicodeBidi=(0)`| (changed)| `"0"` |
+| `unicodeBidi=(integer)`| (changed)| `"1"` |
+| `unicodeBidi=(NaN)`| (changed, warning)| `"NaN"` |
+| `unicodeBidi=(float)`| (changed)| `"99.99"` |
+| `unicodeBidi=(true)`| (initial, warning)| `<null>` |
+| `unicodeBidi=(false)`| (initial, warning)| `<null>` |
+| `unicodeBidi=(string 'true')`| (changed)| `"true"` |
+| `unicodeBidi=(string 'false')`| (changed)| `"false"` |
+| `unicodeBidi=(string 'on')`| (changed)| `"on"` |
+| `unicodeBidi=(string 'off')`| (changed)| `"off"` |
+| `unicodeBidi=(symbol)`| (initial, warning)| `<null>` |
+| `unicodeBidi=(function)`| (initial, warning)| `<null>` |
+| `unicodeBidi=(null)`| (initial)| `<null>` |
+| `unicodeBidi=(undefined)`| (initial)| `<null>` |
+
+## `unicodeRange` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unicodeRange=(string)`| (changed)| `"a string"` |
+| `unicodeRange=(empty string)`| (changed)| `<empty string>` |
+| `unicodeRange=(array with string)`| (changed)| `"string"` |
+| `unicodeRange=(empty array)`| (changed)| `<empty string>` |
+| `unicodeRange=(object)`| (changed)| `"result of toString()"` |
+| `unicodeRange=(numeric string)`| (changed)| `"42"` |
+| `unicodeRange=(-1)`| (changed)| `"-1"` |
+| `unicodeRange=(0)`| (changed)| `"0"` |
+| `unicodeRange=(integer)`| (changed)| `"1"` |
+| `unicodeRange=(NaN)`| (changed, warning)| `"NaN"` |
+| `unicodeRange=(float)`| (changed)| `"99.99"` |
+| `unicodeRange=(true)`| (initial, warning)| `<null>` |
+| `unicodeRange=(false)`| (initial, warning)| `<null>` |
+| `unicodeRange=(string 'true')`| (changed)| `"true"` |
+| `unicodeRange=(string 'false')`| (changed)| `"false"` |
+| `unicodeRange=(string 'on')`| (changed)| `"on"` |
+| `unicodeRange=(string 'off')`| (changed)| `"off"` |
+| `unicodeRange=(symbol)`| (initial, warning)| `<null>` |
+| `unicodeRange=(function)`| (initial, warning)| `<null>` |
+| `unicodeRange=(null)`| (initial)| `<null>` |
+| `unicodeRange=(undefined)`| (initial)| `<null>` |
+
+## `units-per-em` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `units-per-em=(string)`| (changed, warning)| `"a string"` |
+| `units-per-em=(empty string)`| (changed, warning)| `<empty string>` |
+| `units-per-em=(array with string)`| (changed, warning)| `"string"` |
+| `units-per-em=(empty array)`| (changed, warning)| `<empty string>` |
+| `units-per-em=(object)`| (changed, warning)| `"result of toString()"` |
+| `units-per-em=(numeric string)`| (changed, warning)| `"42"` |
+| `units-per-em=(-1)`| (changed, warning)| `"-1"` |
+| `units-per-em=(0)`| (changed, warning)| `"0"` |
+| `units-per-em=(integer)`| (changed, warning)| `"1"` |
+| `units-per-em=(NaN)`| (changed, warning)| `"NaN"` |
+| `units-per-em=(float)`| (changed, warning)| `"99.99"` |
+| `units-per-em=(true)`| (initial, warning)| `<null>` |
+| `units-per-em=(false)`| (initial, warning)| `<null>` |
+| `units-per-em=(string 'true')`| (changed, warning)| `"true"` |
+| `units-per-em=(string 'false')`| (changed, warning)| `"false"` |
+| `units-per-em=(string 'on')`| (changed, warning)| `"on"` |
+| `units-per-em=(string 'off')`| (changed, warning)| `"off"` |
+| `units-per-em=(symbol)`| (initial, warning)| `<null>` |
+| `units-per-em=(function)`| (initial, warning)| `<null>` |
+| `units-per-em=(null)`| (initial, warning)| `<null>` |
+| `units-per-em=(undefined)`| (initial, warning)| `<null>` |
+
+## `unitsPerEm` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unitsPerEm=(string)`| (initial)| `<null>` |
+| `unitsPerEm=(empty string)`| (initial)| `<null>` |
+| `unitsPerEm=(array with string)`| (initial)| `<null>` |
+| `unitsPerEm=(empty array)`| (initial)| `<null>` |
+| `unitsPerEm=(object)`| (initial)| `<null>` |
+| `unitsPerEm=(numeric string)`| (initial)| `<null>` |
+| `unitsPerEm=(-1)`| (initial)| `<null>` |
+| `unitsPerEm=(0)`| (initial)| `<null>` |
+| `unitsPerEm=(integer)`| (initial)| `<null>` |
+| `unitsPerEm=(NaN)`| (initial, warning)| `<null>` |
+| `unitsPerEm=(float)`| (initial)| `<null>` |
+| `unitsPerEm=(true)`| (initial, warning)| `<null>` |
+| `unitsPerEm=(false)`| (initial, warning)| `<null>` |
+| `unitsPerEm=(string 'true')`| (initial)| `<null>` |
+| `unitsPerEm=(string 'false')`| (initial)| `<null>` |
+| `unitsPerEm=(string 'on')`| (initial)| `<null>` |
+| `unitsPerEm=(string 'off')`| (initial)| `<null>` |
+| `unitsPerEm=(symbol)`| (initial, warning)| `<null>` |
+| `unitsPerEm=(function)`| (initial, warning)| `<null>` |
+| `unitsPerEm=(null)`| (initial)| `<null>` |
+| `unitsPerEm=(undefined)`| (initial)| `<null>` |
+
+## `unknown` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unknown=(string)`| (changed)| `"a string"` |
+| `unknown=(empty string)`| (changed)| `<empty string>` |
+| `unknown=(array with string)`| (changed)| `"string"` |
+| `unknown=(empty array)`| (changed)| `<empty string>` |
+| `unknown=(object)`| (changed)| `"result of toString()"` |
+| `unknown=(numeric string)`| (changed)| `"42"` |
+| `unknown=(-1)`| (changed)| `"-1"` |
+| `unknown=(0)`| (changed)| `"0"` |
+| `unknown=(integer)`| (changed)| `"1"` |
+| `unknown=(NaN)`| (changed, warning)| `"NaN"` |
+| `unknown=(float)`| (changed)| `"99.99"` |
+| `unknown=(true)`| (initial, warning)| `<null>` |
+| `unknown=(false)`| (initial, warning)| `<null>` |
+| `unknown=(string 'true')`| (changed)| `"true"` |
+| `unknown=(string 'false')`| (changed)| `"false"` |
+| `unknown=(string 'on')`| (changed)| `"on"` |
+| `unknown=(string 'off')`| (changed)| `"off"` |
+| `unknown=(symbol)`| (initial, warning)| `<null>` |
+| `unknown=(function)`| (initial, warning)| `<null>` |
+| `unknown=(null)`| (initial)| `<null>` |
+| `unknown=(undefined)`| (initial)| `<null>` |
+
+## `unselectable` (on `<span>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `unselectable=(string)`| (changed)| `"on"` |
+| `unselectable=(empty string)`| (changed)| `<empty string>` |
+| `unselectable=(array with string)`| (changed)| `"on"` |
+| `unselectable=(empty array)`| (changed)| `<empty string>` |
+| `unselectable=(object)`| (changed)| `"result of toString()"` |
+| `unselectable=(numeric string)`| (changed)| `"42"` |
+| `unselectable=(-1)`| (changed)| `"-1"` |
+| `unselectable=(0)`| (changed)| `"0"` |
+| `unselectable=(integer)`| (changed)| `"1"` |
+| `unselectable=(NaN)`| (changed, warning)| `"NaN"` |
+| `unselectable=(float)`| (changed)| `"99.99"` |
+| `unselectable=(true)`| (initial, warning)| `<null>` |
+| `unselectable=(false)`| (initial, warning)| `<null>` |
+| `unselectable=(string 'true')`| (changed)| `"true"` |
+| `unselectable=(string 'false')`| (changed)| `"false"` |
+| `unselectable=(string 'on')`| (changed)| `"on"` |
+| `unselectable=(string 'off')`| (changed)| `"off"` |
+| `unselectable=(symbol)`| (initial, warning)| `<null>` |
+| `unselectable=(function)`| (initial, warning)| `<null>` |
+| `unselectable=(null)`| (initial)| `<null>` |
+| `unselectable=(undefined)`| (initial)| `<null>` |
+
+## `useMap` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `useMap=(string)`| (changed)| `"a string"` |
+| `useMap=(empty string)`| (initial)| `<empty string>` |
+| `useMap=(array with string)`| (changed)| `"string"` |
+| `useMap=(empty array)`| (initial)| `<empty string>` |
+| `useMap=(object)`| (changed)| `"result of toString()"` |
+| `useMap=(numeric string)`| (changed)| `"42"` |
+| `useMap=(-1)`| (changed)| `"-1"` |
+| `useMap=(0)`| (changed)| `"0"` |
+| `useMap=(integer)`| (changed)| `"1"` |
+| `useMap=(NaN)`| (changed, warning)| `"NaN"` |
+| `useMap=(float)`| (changed)| `"99.99"` |
+| `useMap=(true)`| (initial, warning)| `<empty string>` |
+| `useMap=(false)`| (initial, warning)| `<empty string>` |
+| `useMap=(string 'true')`| (changed)| `"true"` |
+| `useMap=(string 'false')`| (changed)| `"false"` |
+| `useMap=(string 'on')`| (changed)| `"on"` |
+| `useMap=(string 'off')`| (changed)| `"off"` |
+| `useMap=(symbol)`| (initial, warning)| `<empty string>` |
+| `useMap=(function)`| (initial, warning)| `<empty string>` |
+| `useMap=(null)`| (initial)| `<empty string>` |
+| `useMap=(undefined)`| (initial)| `<empty string>` |
+
+## `v-alphabetic` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `v-alphabetic=(string)`| (changed, warning)| `"a string"` |
+| `v-alphabetic=(empty string)`| (changed, warning)| `<empty string>` |
+| `v-alphabetic=(array with string)`| (changed, warning)| `"string"` |
+| `v-alphabetic=(empty array)`| (changed, warning)| `<empty string>` |
+| `v-alphabetic=(object)`| (changed, warning)| `"result of toString()"` |
+| `v-alphabetic=(numeric string)`| (changed, warning)| `"42"` |
+| `v-alphabetic=(-1)`| (changed, warning)| `"-1"` |
+| `v-alphabetic=(0)`| (changed, warning)| `"0"` |
+| `v-alphabetic=(integer)`| (changed, warning)| `"1"` |
+| `v-alphabetic=(NaN)`| (changed, warning)| `"NaN"` |
+| `v-alphabetic=(float)`| (changed, warning)| `"99.99"` |
+| `v-alphabetic=(true)`| (initial, warning)| `<null>` |
+| `v-alphabetic=(false)`| (initial, warning)| `<null>` |
+| `v-alphabetic=(string 'true')`| (changed, warning)| `"true"` |
+| `v-alphabetic=(string 'false')`| (changed, warning)| `"false"` |
+| `v-alphabetic=(string 'on')`| (changed, warning)| `"on"` |
+| `v-alphabetic=(string 'off')`| (changed, warning)| `"off"` |
+| `v-alphabetic=(symbol)`| (initial, warning)| `<null>` |
+| `v-alphabetic=(function)`| (initial, warning)| `<null>` |
+| `v-alphabetic=(null)`| (initial, warning)| `<null>` |
+| `v-alphabetic=(undefined)`| (initial, warning)| `<null>` |
+
+## `v-hanging` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `v-hanging=(string)`| (changed, warning)| `"a string"` |
+| `v-hanging=(empty string)`| (changed, warning)| `<empty string>` |
+| `v-hanging=(array with string)`| (changed, warning)| `"string"` |
+| `v-hanging=(empty array)`| (changed, warning)| `<empty string>` |
+| `v-hanging=(object)`| (changed, warning)| `"result of toString()"` |
+| `v-hanging=(numeric string)`| (changed, warning)| `"42"` |
+| `v-hanging=(-1)`| (changed, warning)| `"-1"` |
+| `v-hanging=(0)`| (changed, warning)| `"0"` |
+| `v-hanging=(integer)`| (changed, warning)| `"1"` |
+| `v-hanging=(NaN)`| (changed, warning)| `"NaN"` |
+| `v-hanging=(float)`| (changed, warning)| `"99.99"` |
+| `v-hanging=(true)`| (initial, warning)| `<null>` |
+| `v-hanging=(false)`| (initial, warning)| `<null>` |
+| `v-hanging=(string 'true')`| (changed, warning)| `"true"` |
+| `v-hanging=(string 'false')`| (changed, warning)| `"false"` |
+| `v-hanging=(string 'on')`| (changed, warning)| `"on"` |
+| `v-hanging=(string 'off')`| (changed, warning)| `"off"` |
+| `v-hanging=(symbol)`| (initial, warning)| `<null>` |
+| `v-hanging=(function)`| (initial, warning)| `<null>` |
+| `v-hanging=(null)`| (initial, warning)| `<null>` |
+| `v-hanging=(undefined)`| (initial, warning)| `<null>` |
+
+## `v-ideographic` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `v-ideographic=(string)`| (changed, warning)| `"a string"` |
+| `v-ideographic=(empty string)`| (changed, warning)| `<empty string>` |
+| `v-ideographic=(array with string)`| (changed, warning)| `"string"` |
+| `v-ideographic=(empty array)`| (changed, warning)| `<empty string>` |
+| `v-ideographic=(object)`| (changed, warning)| `"result of toString()"` |
+| `v-ideographic=(numeric string)`| (changed, warning)| `"42"` |
+| `v-ideographic=(-1)`| (changed, warning)| `"-1"` |
+| `v-ideographic=(0)`| (changed, warning)| `"0"` |
+| `v-ideographic=(integer)`| (changed, warning)| `"1"` |
+| `v-ideographic=(NaN)`| (changed, warning)| `"NaN"` |
+| `v-ideographic=(float)`| (changed, warning)| `"99.99"` |
+| `v-ideographic=(true)`| (initial, warning)| `<null>` |
+| `v-ideographic=(false)`| (initial, warning)| `<null>` |
+| `v-ideographic=(string 'true')`| (changed, warning)| `"true"` |
+| `v-ideographic=(string 'false')`| (changed, warning)| `"false"` |
+| `v-ideographic=(string 'on')`| (changed, warning)| `"on"` |
+| `v-ideographic=(string 'off')`| (changed, warning)| `"off"` |
+| `v-ideographic=(symbol)`| (initial, warning)| `<null>` |
+| `v-ideographic=(function)`| (initial, warning)| `<null>` |
+| `v-ideographic=(null)`| (initial, warning)| `<null>` |
+| `v-ideographic=(undefined)`| (initial, warning)| `<null>` |
+
+## `v-mathematical` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `v-mathematical=(string)`| (changed, warning)| `"a string"` |
+| `v-mathematical=(empty string)`| (changed, warning)| `<empty string>` |
+| `v-mathematical=(array with string)`| (changed, warning)| `"string"` |
+| `v-mathematical=(empty array)`| (changed, warning)| `<empty string>` |
+| `v-mathematical=(object)`| (changed, warning)| `"result of toString()"` |
+| `v-mathematical=(numeric string)`| (changed, warning)| `"42"` |
+| `v-mathematical=(-1)`| (changed, warning)| `"-1"` |
+| `v-mathematical=(0)`| (changed, warning)| `"0"` |
+| `v-mathematical=(integer)`| (changed, warning)| `"1"` |
+| `v-mathematical=(NaN)`| (changed, warning)| `"NaN"` |
+| `v-mathematical=(float)`| (changed, warning)| `"99.99"` |
+| `v-mathematical=(true)`| (initial, warning)| `<null>` |
+| `v-mathematical=(false)`| (initial, warning)| `<null>` |
+| `v-mathematical=(string 'true')`| (changed, warning)| `"true"` |
+| `v-mathematical=(string 'false')`| (changed, warning)| `"false"` |
+| `v-mathematical=(string 'on')`| (changed, warning)| `"on"` |
+| `v-mathematical=(string 'off')`| (changed, warning)| `"off"` |
+| `v-mathematical=(symbol)`| (initial, warning)| `<null>` |
+| `v-mathematical=(function)`| (initial, warning)| `<null>` |
+| `v-mathematical=(null)`| (initial, warning)| `<null>` |
+| `v-mathematical=(undefined)`| (initial, warning)| `<null>` |
+
+## `vAlphabetic` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vAlphabetic=(string)`| (changed)| `"a string"` |
+| `vAlphabetic=(empty string)`| (changed)| `<empty string>` |
+| `vAlphabetic=(array with string)`| (changed)| `"string"` |
+| `vAlphabetic=(empty array)`| (changed)| `<empty string>` |
+| `vAlphabetic=(object)`| (changed)| `"result of toString()"` |
+| `vAlphabetic=(numeric string)`| (changed)| `"42"` |
+| `vAlphabetic=(-1)`| (changed)| `"-1"` |
+| `vAlphabetic=(0)`| (changed)| `"0"` |
+| `vAlphabetic=(integer)`| (changed)| `"1"` |
+| `vAlphabetic=(NaN)`| (changed, warning)| `"NaN"` |
+| `vAlphabetic=(float)`| (changed)| `"99.99"` |
+| `vAlphabetic=(true)`| (initial, warning)| `<null>` |
+| `vAlphabetic=(false)`| (initial, warning)| `<null>` |
+| `vAlphabetic=(string 'true')`| (changed)| `"true"` |
+| `vAlphabetic=(string 'false')`| (changed)| `"false"` |
+| `vAlphabetic=(string 'on')`| (changed)| `"on"` |
+| `vAlphabetic=(string 'off')`| (changed)| `"off"` |
+| `vAlphabetic=(symbol)`| (initial, warning)| `<null>` |
+| `vAlphabetic=(function)`| (initial, warning)| `<null>` |
+| `vAlphabetic=(null)`| (initial)| `<null>` |
+| `vAlphabetic=(undefined)`| (initial)| `<null>` |
+
+## `value` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `value=(string)`| (changed)| `"a string"` |
+| `value=(empty string)`| (initial)| `<empty string>` |
+| `value=(array with string)`| (changed)| `"string"` |
+| `value=(empty array)`| (initial)| `<empty string>` |
+| `value=(object)`| (changed)| `"result of toString()"` |
+| `value=(numeric string)`| (changed)| `"42"` |
+| `value=(-1)`| (changed)| `"-1"` |
+| `value=(0)`| (changed)| `"0"` |
+| `value=(integer)`| (changed)| `"1"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
+| `value=(float)`| (changed)| `"99.99"` |
+| `value=(true)`| (changed)| `"true"` |
+| `value=(false)`| (changed)| `"false"` |
+| `value=(string 'true')`| (changed)| `"true"` |
+| `value=(string 'false')`| (changed)| `"false"` |
+| `value=(string 'on')`| (changed)| `"on"` |
+| `value=(string 'off')`| (changed)| `"off"` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
+| `value=(undefined)`| (initial)| `<empty string>` |
+
+## `value` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `value=(string)`| (changed)| `"a string"` |
+| `value=(empty string)`| (initial)| `<empty string>` |
+| `value=(array with string)`| (changed)| `"string"` |
+| `value=(empty array)`| (initial)| `<empty string>` |
+| `value=(object)`| (changed)| `"result of toString()"` |
+| `value=(numeric string)`| (changed)| `"42"` |
+| `value=(-1)`| (changed)| `"-1"` |
+| `value=(0)`| (changed)| `"0"` |
+| `value=(integer)`| (changed)| `"1"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
+| `value=(float)`| (changed)| `"99.99"` |
+| `value=(true)`| (changed)| `"true"` |
+| `value=(false)`| (changed)| `"false"` |
+| `value=(string 'true')`| (changed)| `"true"` |
+| `value=(string 'false')`| (changed)| `"false"` |
+| `value=(string 'on')`| (changed)| `"on"` |
+| `value=(string 'off')`| (changed)| `"off"` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
+| `value=(undefined)`| (initial)| `<empty string>` |
+
+## `value` (on `<input>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `value=(string)`| (initial)| `<empty string>` |
+| `value=(empty string)`| (initial)| `<empty string>` |
+| `value=(array with string)`| (initial)| `<empty string>` |
+| `value=(empty array)`| (initial)| `<empty string>` |
+| `value=(object)`| (initial)| `<empty string>` |
+| `value=(numeric string)`| (changed)| `"42"` |
+| `value=(-1)`| (changed)| `"-1"` |
+| `value=(0)`| (changed)| `"0"` |
+| `value=(integer)`| (changed)| `"1"` |
+| `value=(NaN)`| (initial, warning)| `<empty string>` |
+| `value=(float)`| (changed)| `"99.99"` |
+| `value=(true)`| (initial)| `<empty string>` |
+| `value=(false)`| (initial)| `<empty string>` |
+| `value=(string 'true')`| (initial)| `<empty string>` |
+| `value=(string 'false')`| (initial)| `<empty string>` |
+| `value=(string 'on')`| (initial)| `<empty string>` |
+| `value=(string 'off')`| (initial)| `<empty string>` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
+| `value=(undefined)`| (initial)| `<empty string>` |
+
+## `value` (on `<textarea>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `value=(string)`| (changed)| `"a string"` |
+| `value=(empty string)`| (initial)| `<empty string>` |
+| `value=(array with string)`| (changed)| `"string"` |
+| `value=(empty array)`| (initial)| `<empty string>` |
+| `value=(object)`| (changed)| `"result of toString()"` |
+| `value=(numeric string)`| (changed)| `"42"` |
+| `value=(-1)`| (changed)| `"-1"` |
+| `value=(0)`| (changed)| `"0"` |
+| `value=(integer)`| (changed)| `"1"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
+| `value=(float)`| (changed)| `"99.99"` |
+| `value=(true)`| (changed)| `"true"` |
+| `value=(false)`| (changed)| `"false"` |
+| `value=(string 'true')`| (changed)| `"true"` |
+| `value=(string 'false')`| (changed)| `"false"` |
+| `value=(string 'on')`| (changed)| `"on"` |
+| `value=(string 'off')`| (changed)| `"off"` |
+| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `value=(function)`| (initial, warning, ssr mismatch)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
+| `value=(undefined)`| (initial)| `<empty string>` |
+
+## `value` (on `<option>` inside `<select>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `value=(string)`| (changed)| `"a string"` |
+| `value=(empty string)`| (initial)| `<empty string>` |
+| `value=(array with string)`| (changed)| `"string"` |
+| `value=(empty array)`| (initial)| `<empty string>` |
+| `value=(object)`| (changed)| `"result of toString()"` |
+| `value=(numeric string)`| (changed)| `"42"` |
+| `value=(-1)`| (changed)| `"-1"` |
+| `value=(0)`| (changed)| `"0"` |
+| `value=(integer)`| (changed)| `"1"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
+| `value=(float)`| (changed)| `"99.99"` |
+| `value=(true)`| (changed)| `"true"` |
+| `value=(false)`| (changed)| `"false"` |
+| `value=(string 'true')`| (changed)| `"true"` |
+| `value=(string 'false')`| (changed)| `"false"` |
+| `value=(string 'on')`| (changed)| `"on"` |
+| `value=(string 'off')`| (changed)| `"off"` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
+| `value=(null)`| (initial)| `<empty string>` |
+| `value=(undefined)`| (initial)| `<empty string>` |
+
+## `Value` (on `<option>` inside `<select>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `Value=(string)`| (changed, warning)| `"a string"` |
+| `Value=(empty string)`| (initial, warning)| `<empty string>` |
+| `Value=(array with string)`| (changed, warning)| `"string"` |
+| `Value=(empty array)`| (initial, warning)| `<empty string>` |
+| `Value=(object)`| (changed, warning)| `"result of toString()"` |
+| `Value=(numeric string)`| (changed, warning)| `"42"` |
+| `Value=(-1)`| (changed, warning)| `"-1"` |
+| `Value=(0)`| (changed, warning)| `"0"` |
+| `Value=(integer)`| (changed, warning)| `"1"` |
+| `Value=(NaN)`| (changed, warning)| `"NaN"` |
+| `Value=(float)`| (changed, warning)| `"99.99"` |
+| `Value=(true)`| (initial, warning)| `<empty string>` |
+| `Value=(false)`| (initial, warning)| `<empty string>` |
+| `Value=(string 'true')`| (changed, warning)| `"true"` |
+| `Value=(string 'false')`| (changed, warning)| `"false"` |
+| `Value=(string 'on')`| (changed, warning)| `"on"` |
+| `Value=(string 'off')`| (changed, warning)| `"off"` |
+| `Value=(symbol)`| (initial, warning)| `<empty string>` |
+| `Value=(function)`| (initial, warning)| `<empty string>` |
+| `Value=(null)`| (initial, warning)| `<empty string>` |
+| `Value=(undefined)`| (initial, warning)| `<empty string>` |
+
+## `values` (on `<feColorMatrix>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `values=(string)`| (changed)| `[1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]` |
+| `values=(empty string)`| (initial)| `[]` |
+| `values=(array with string)`| (changed)| `[1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]` |
+| `values=(empty array)`| (initial)| `[]` |
+| `values=(object)`| (initial)| `[]` |
+| `values=(numeric string)`| (changed)| `[42]` |
+| `values=(-1)`| (changed)| `[-1]` |
+| `values=(0)`| (changed)| `[0]` |
+| `values=(integer)`| (changed)| `[1]` |
+| `values=(NaN)`| (initial, warning)| `[]` |
+| `values=(float)`| (changed)| `[99.98999786376953]` |
+| `values=(true)`| (initial, warning)| `[]` |
+| `values=(false)`| (initial, warning)| `[]` |
+| `values=(string 'true')`| (initial)| `[]` |
+| `values=(string 'false')`| (initial)| `[]` |
+| `values=(string 'on')`| (initial)| `[]` |
+| `values=(string 'off')`| (initial)| `[]` |
+| `values=(symbol)`| (initial, warning)| `[]` |
+| `values=(function)`| (initial, warning)| `[]` |
+| `values=(null)`| (initial)| `[]` |
+| `values=(undefined)`| (initial)| `[]` |
+
+## `vector-effect` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vector-effect=(string)`| (changed, warning)| `"a string"` |
+| `vector-effect=(empty string)`| (changed, warning)| `<empty string>` |
+| `vector-effect=(array with string)`| (changed, warning)| `"string"` |
+| `vector-effect=(empty array)`| (changed, warning)| `<empty string>` |
+| `vector-effect=(object)`| (changed, warning)| `"result of toString()"` |
+| `vector-effect=(numeric string)`| (changed, warning)| `"42"` |
+| `vector-effect=(-1)`| (changed, warning)| `"-1"` |
+| `vector-effect=(0)`| (changed, warning)| `"0"` |
+| `vector-effect=(integer)`| (changed, warning)| `"1"` |
+| `vector-effect=(NaN)`| (changed, warning)| `"NaN"` |
+| `vector-effect=(float)`| (changed, warning)| `"99.99"` |
+| `vector-effect=(true)`| (initial, warning)| `<null>` |
+| `vector-effect=(false)`| (initial, warning)| `<null>` |
+| `vector-effect=(string 'true')`| (changed, warning)| `"true"` |
+| `vector-effect=(string 'false')`| (changed, warning)| `"false"` |
+| `vector-effect=(string 'on')`| (changed, warning)| `"on"` |
+| `vector-effect=(string 'off')`| (changed, warning)| `"off"` |
+| `vector-effect=(symbol)`| (initial, warning)| `<null>` |
+| `vector-effect=(function)`| (initial, warning)| `<null>` |
+| `vector-effect=(null)`| (initial, warning)| `<null>` |
+| `vector-effect=(undefined)`| (initial, warning)| `<null>` |
+
+## `vectorEffect` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vectorEffect=(string)`| (changed)| `"a string"` |
+| `vectorEffect=(empty string)`| (changed)| `<empty string>` |
+| `vectorEffect=(array with string)`| (changed)| `"string"` |
+| `vectorEffect=(empty array)`| (changed)| `<empty string>` |
+| `vectorEffect=(object)`| (changed)| `"result of toString()"` |
+| `vectorEffect=(numeric string)`| (changed)| `"42"` |
+| `vectorEffect=(-1)`| (changed)| `"-1"` |
+| `vectorEffect=(0)`| (changed)| `"0"` |
+| `vectorEffect=(integer)`| (changed)| `"1"` |
+| `vectorEffect=(NaN)`| (changed, warning)| `"NaN"` |
+| `vectorEffect=(float)`| (changed)| `"99.99"` |
+| `vectorEffect=(true)`| (initial, warning)| `<null>` |
+| `vectorEffect=(false)`| (initial, warning)| `<null>` |
+| `vectorEffect=(string 'true')`| (changed)| `"true"` |
+| `vectorEffect=(string 'false')`| (changed)| `"false"` |
+| `vectorEffect=(string 'on')`| (changed)| `"on"` |
+| `vectorEffect=(string 'off')`| (changed)| `"off"` |
+| `vectorEffect=(symbol)`| (initial, warning)| `<null>` |
+| `vectorEffect=(function)`| (initial, warning)| `<null>` |
+| `vectorEffect=(null)`| (initial)| `<null>` |
+| `vectorEffect=(undefined)`| (initial)| `<null>` |
+
+## `version` (on `<html>` inside `<document>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `version=(string)`| (changed, ssr mismatch)| `"a string"` |
+| `version=(empty string)`| (initial)| `<empty string>` |
+| `version=(array with string)`| (changed, ssr mismatch)| `"string"` |
+| `version=(empty array)`| (initial)| `<empty string>` |
+| `version=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
+| `version=(numeric string)`| (changed, ssr mismatch)| `"42"` |
+| `version=(-1)`| (changed, ssr mismatch)| `"-1"` |
+| `version=(0)`| (changed, ssr mismatch)| `"0"` |
+| `version=(integer)`| (changed, ssr mismatch)| `"1"` |
+| `version=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
+| `version=(float)`| (changed, ssr mismatch)| `"99.99"` |
+| `version=(true)`| (initial, warning)| `<empty string>` |
+| `version=(false)`| (initial, warning)| `<empty string>` |
+| `version=(string 'true')`| (changed, ssr mismatch)| `"true"` |
+| `version=(string 'false')`| (changed, ssr mismatch)| `"false"` |
+| `version=(string 'on')`| (changed, ssr mismatch)| `"on"` |
+| `version=(string 'off')`| (changed, ssr mismatch)| `"off"` |
+| `version=(symbol)`| (initial, warning)| `<empty string>` |
+| `version=(function)`| (initial, warning)| `<empty string>` |
+| `version=(null)`| (initial)| `<empty string>` |
+| `version=(undefined)`| (initial)| `<empty string>` |
+
+## `version` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `version=(string)`| (changed)| `"a string"` |
+| `version=(empty string)`| (changed)| `<empty string>` |
+| `version=(array with string)`| (changed)| `"string"` |
+| `version=(empty array)`| (changed)| `<empty string>` |
+| `version=(object)`| (changed)| `"result of toString()"` |
+| `version=(numeric string)`| (changed)| `"42"` |
+| `version=(-1)`| (changed)| `"-1"` |
+| `version=(0)`| (changed)| `"0"` |
+| `version=(integer)`| (changed)| `"1"` |
+| `version=(NaN)`| (changed, warning)| `"NaN"` |
+| `version=(float)`| (changed)| `"99.99"` |
+| `version=(true)`| (initial, warning)| `<null>` |
+| `version=(false)`| (initial, warning)| `<null>` |
+| `version=(string 'true')`| (changed)| `"true"` |
+| `version=(string 'false')`| (changed)| `"false"` |
+| `version=(string 'on')`| (changed)| `"on"` |
+| `version=(string 'off')`| (changed)| `"off"` |
+| `version=(symbol)`| (initial, warning)| `<null>` |
+| `version=(function)`| (initial, warning)| `<null>` |
+| `version=(null)`| (initial)| `<null>` |
+| `version=(undefined)`| (initial)| `<null>` |
+
+## `vert-adv-y` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vert-adv-y=(string)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(empty string)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(array with string)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(empty array)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(object)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(numeric string)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(-1)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(0)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(integer)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(NaN)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(float)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(true)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(false)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(string 'true')`| (initial, warning)| `<null>` |
+| `vert-adv-y=(string 'false')`| (initial, warning)| `<null>` |
+| `vert-adv-y=(string 'on')`| (initial, warning)| `<null>` |
+| `vert-adv-y=(string 'off')`| (initial, warning)| `<null>` |
+| `vert-adv-y=(symbol)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(function)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(null)`| (initial, warning)| `<null>` |
+| `vert-adv-y=(undefined)`| (initial, warning)| `<null>` |
+
+## `vert-origin-x` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vert-origin-x=(string)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(empty string)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(array with string)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(empty array)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(object)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(numeric string)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(-1)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(0)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(integer)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(NaN)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(float)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(true)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(false)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(string 'true')`| (initial, warning)| `<null>` |
+| `vert-origin-x=(string 'false')`| (initial, warning)| `<null>` |
+| `vert-origin-x=(string 'on')`| (initial, warning)| `<null>` |
+| `vert-origin-x=(string 'off')`| (initial, warning)| `<null>` |
+| `vert-origin-x=(symbol)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(function)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(null)`| (initial, warning)| `<null>` |
+| `vert-origin-x=(undefined)`| (initial, warning)| `<null>` |
+
+## `vert-origin-y` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vert-origin-y=(string)`| (changed, warning)| `"a string"` |
+| `vert-origin-y=(empty string)`| (changed, warning)| `<empty string>` |
+| `vert-origin-y=(array with string)`| (changed, warning)| `"string"` |
+| `vert-origin-y=(empty array)`| (changed, warning)| `<empty string>` |
+| `vert-origin-y=(object)`| (changed, warning)| `"result of toString()"` |
+| `vert-origin-y=(numeric string)`| (changed, warning)| `"42"` |
+| `vert-origin-y=(-1)`| (changed, warning)| `"-1"` |
+| `vert-origin-y=(0)`| (changed, warning)| `"0"` |
+| `vert-origin-y=(integer)`| (changed, warning)| `"1"` |
+| `vert-origin-y=(NaN)`| (changed, warning)| `"NaN"` |
+| `vert-origin-y=(float)`| (changed, warning)| `"99.99"` |
+| `vert-origin-y=(true)`| (initial, warning)| `<null>` |
+| `vert-origin-y=(false)`| (initial, warning)| `<null>` |
+| `vert-origin-y=(string 'true')`| (changed, warning)| `"true"` |
+| `vert-origin-y=(string 'false')`| (changed, warning)| `"false"` |
+| `vert-origin-y=(string 'on')`| (changed, warning)| `"on"` |
+| `vert-origin-y=(string 'off')`| (changed, warning)| `"off"` |
+| `vert-origin-y=(symbol)`| (initial, warning)| `<null>` |
+| `vert-origin-y=(function)`| (initial, warning)| `<null>` |
+| `vert-origin-y=(null)`| (initial, warning)| `<null>` |
+| `vert-origin-y=(undefined)`| (initial, warning)| `<null>` |
+
+## `vertAdvY` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vertAdvY=(string)`| (changed)| `"a string"` |
+| `vertAdvY=(empty string)`| (changed)| `<empty string>` |
+| `vertAdvY=(array with string)`| (changed)| `"string"` |
+| `vertAdvY=(empty array)`| (changed)| `<empty string>` |
+| `vertAdvY=(object)`| (changed)| `"result of toString()"` |
+| `vertAdvY=(numeric string)`| (changed)| `"42"` |
+| `vertAdvY=(-1)`| (changed)| `"-1"` |
+| `vertAdvY=(0)`| (changed)| `"0"` |
+| `vertAdvY=(integer)`| (changed)| `"1"` |
+| `vertAdvY=(NaN)`| (changed, warning)| `"NaN"` |
+| `vertAdvY=(float)`| (changed)| `"99.99"` |
+| `vertAdvY=(true)`| (initial, warning)| `<null>` |
+| `vertAdvY=(false)`| (initial, warning)| `<null>` |
+| `vertAdvY=(string 'true')`| (changed)| `"true"` |
+| `vertAdvY=(string 'false')`| (changed)| `"false"` |
+| `vertAdvY=(string 'on')`| (changed)| `"on"` |
+| `vertAdvY=(string 'off')`| (changed)| `"off"` |
+| `vertAdvY=(symbol)`| (initial, warning)| `<null>` |
+| `vertAdvY=(function)`| (initial, warning)| `<null>` |
+| `vertAdvY=(null)`| (initial)| `<null>` |
+| `vertAdvY=(undefined)`| (initial)| `<null>` |
+
+## `vertOriginX` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vertOriginX=(string)`| (changed)| `"a string"` |
+| `vertOriginX=(empty string)`| (changed)| `<empty string>` |
+| `vertOriginX=(array with string)`| (changed)| `"string"` |
+| `vertOriginX=(empty array)`| (changed)| `<empty string>` |
+| `vertOriginX=(object)`| (changed)| `"result of toString()"` |
+| `vertOriginX=(numeric string)`| (changed)| `"42"` |
+| `vertOriginX=(-1)`| (changed)| `"-1"` |
+| `vertOriginX=(0)`| (changed)| `"0"` |
+| `vertOriginX=(integer)`| (changed)| `"1"` |
+| `vertOriginX=(NaN)`| (changed, warning)| `"NaN"` |
+| `vertOriginX=(float)`| (changed)| `"99.99"` |
+| `vertOriginX=(true)`| (initial, warning)| `<null>` |
+| `vertOriginX=(false)`| (initial, warning)| `<null>` |
+| `vertOriginX=(string 'true')`| (changed)| `"true"` |
+| `vertOriginX=(string 'false')`| (changed)| `"false"` |
+| `vertOriginX=(string 'on')`| (changed)| `"on"` |
+| `vertOriginX=(string 'off')`| (changed)| `"off"` |
+| `vertOriginX=(symbol)`| (initial, warning)| `<null>` |
+| `vertOriginX=(function)`| (initial, warning)| `<null>` |
+| `vertOriginX=(null)`| (initial)| `<null>` |
+| `vertOriginX=(undefined)`| (initial)| `<null>` |
+
+## `vertOriginY` (on `<font>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vertOriginY=(string)`| (changed)| `"a string"` |
+| `vertOriginY=(empty string)`| (changed)| `<empty string>` |
+| `vertOriginY=(array with string)`| (changed)| `"string"` |
+| `vertOriginY=(empty array)`| (changed)| `<empty string>` |
+| `vertOriginY=(object)`| (changed)| `"result of toString()"` |
+| `vertOriginY=(numeric string)`| (changed)| `"42"` |
+| `vertOriginY=(-1)`| (changed)| `"-1"` |
+| `vertOriginY=(0)`| (changed)| `"0"` |
+| `vertOriginY=(integer)`| (changed)| `"1"` |
+| `vertOriginY=(NaN)`| (changed, warning)| `"NaN"` |
+| `vertOriginY=(float)`| (changed)| `"99.99"` |
+| `vertOriginY=(true)`| (initial, warning)| `<null>` |
+| `vertOriginY=(false)`| (initial, warning)| `<null>` |
+| `vertOriginY=(string 'true')`| (changed)| `"true"` |
+| `vertOriginY=(string 'false')`| (changed)| `"false"` |
+| `vertOriginY=(string 'on')`| (changed)| `"on"` |
+| `vertOriginY=(string 'off')`| (changed)| `"off"` |
+| `vertOriginY=(symbol)`| (initial, warning)| `<null>` |
+| `vertOriginY=(function)`| (initial, warning)| `<null>` |
+| `vertOriginY=(null)`| (initial)| `<null>` |
+| `vertOriginY=(undefined)`| (initial)| `<null>` |
+
+## `vHanging` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vHanging=(string)`| (changed)| `"a string"` |
+| `vHanging=(empty string)`| (changed)| `<empty string>` |
+| `vHanging=(array with string)`| (changed)| `"string"` |
+| `vHanging=(empty array)`| (changed)| `<empty string>` |
+| `vHanging=(object)`| (changed)| `"result of toString()"` |
+| `vHanging=(numeric string)`| (changed)| `"42"` |
+| `vHanging=(-1)`| (changed)| `"-1"` |
+| `vHanging=(0)`| (changed)| `"0"` |
+| `vHanging=(integer)`| (changed)| `"1"` |
+| `vHanging=(NaN)`| (changed, warning)| `"NaN"` |
+| `vHanging=(float)`| (changed)| `"99.99"` |
+| `vHanging=(true)`| (initial, warning)| `<null>` |
+| `vHanging=(false)`| (initial, warning)| `<null>` |
+| `vHanging=(string 'true')`| (changed)| `"true"` |
+| `vHanging=(string 'false')`| (changed)| `"false"` |
+| `vHanging=(string 'on')`| (changed)| `"on"` |
+| `vHanging=(string 'off')`| (changed)| `"off"` |
+| `vHanging=(symbol)`| (initial, warning)| `<null>` |
+| `vHanging=(function)`| (initial, warning)| `<null>` |
+| `vHanging=(null)`| (initial)| `<null>` |
+| `vHanging=(undefined)`| (initial)| `<null>` |
+
+## `vIdeographic` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vIdeographic=(string)`| (changed)| `"a string"` |
+| `vIdeographic=(empty string)`| (changed)| `<empty string>` |
+| `vIdeographic=(array with string)`| (changed)| `"string"` |
+| `vIdeographic=(empty array)`| (changed)| `<empty string>` |
+| `vIdeographic=(object)`| (changed)| `"result of toString()"` |
+| `vIdeographic=(numeric string)`| (changed)| `"42"` |
+| `vIdeographic=(-1)`| (changed)| `"-1"` |
+| `vIdeographic=(0)`| (changed)| `"0"` |
+| `vIdeographic=(integer)`| (changed)| `"1"` |
+| `vIdeographic=(NaN)`| (changed, warning)| `"NaN"` |
+| `vIdeographic=(float)`| (changed)| `"99.99"` |
+| `vIdeographic=(true)`| (initial, warning)| `<null>` |
+| `vIdeographic=(false)`| (initial, warning)| `<null>` |
+| `vIdeographic=(string 'true')`| (changed)| `"true"` |
+| `vIdeographic=(string 'false')`| (changed)| `"false"` |
+| `vIdeographic=(string 'on')`| (changed)| `"on"` |
+| `vIdeographic=(string 'off')`| (changed)| `"off"` |
+| `vIdeographic=(symbol)`| (initial, warning)| `<null>` |
+| `vIdeographic=(function)`| (initial, warning)| `<null>` |
+| `vIdeographic=(null)`| (initial)| `<null>` |
+| `vIdeographic=(undefined)`| (initial)| `<null>` |
+
+## `viewBox` (on `<marker>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `viewBox=(string)`| (changed)| `<SVGRect: 0,0,1500,1000>` |
+| `viewBox=(empty string)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(array with string)`| (changed)| `<SVGRect: 0,0,1500,1000>` |
+| `viewBox=(empty array)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(object)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(numeric string)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(-1)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(0)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(integer)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(NaN)`| (initial, warning)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(float)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(true)`| (initial, warning)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(false)`| (initial, warning)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(string 'true')`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(string 'false')`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(string 'on')`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(string 'off')`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(symbol)`| (initial, warning)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(function)`| (initial, warning)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(null)`| (initial)| `<SVGRect: 0,0,0,0>` |
+| `viewBox=(undefined)`| (initial)| `<SVGRect: 0,0,0,0>` |
+
+## `viewTarget` (on `<view>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `viewTarget=(string)`| (changed)| `"a string"` |
+| `viewTarget=(empty string)`| (changed)| `<empty string>` |
+| `viewTarget=(array with string)`| (changed)| `"string"` |
+| `viewTarget=(empty array)`| (changed)| `<empty string>` |
+| `viewTarget=(object)`| (changed)| `"result of toString()"` |
+| `viewTarget=(numeric string)`| (changed)| `"42"` |
+| `viewTarget=(-1)`| (changed)| `"-1"` |
+| `viewTarget=(0)`| (changed)| `"0"` |
+| `viewTarget=(integer)`| (changed)| `"1"` |
+| `viewTarget=(NaN)`| (changed, warning)| `"NaN"` |
+| `viewTarget=(float)`| (changed)| `"99.99"` |
+| `viewTarget=(true)`| (initial, warning)| `<null>` |
+| `viewTarget=(false)`| (initial, warning)| `<null>` |
+| `viewTarget=(string 'true')`| (changed)| `"true"` |
+| `viewTarget=(string 'false')`| (changed)| `"false"` |
+| `viewTarget=(string 'on')`| (changed)| `"on"` |
+| `viewTarget=(string 'off')`| (changed)| `"off"` |
+| `viewTarget=(symbol)`| (initial, warning)| `<null>` |
+| `viewTarget=(function)`| (initial, warning)| `<null>` |
+| `viewTarget=(null)`| (initial)| `<null>` |
+| `viewTarget=(undefined)`| (initial)| `<null>` |
+
+## `visibility` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `visibility=(string)`| (changed)| `"a string"` |
+| `visibility=(empty string)`| (changed)| `<empty string>` |
+| `visibility=(array with string)`| (changed)| `"string"` |
+| `visibility=(empty array)`| (changed)| `<empty string>` |
+| `visibility=(object)`| (changed)| `"result of toString()"` |
+| `visibility=(numeric string)`| (changed)| `"42"` |
+| `visibility=(-1)`| (changed)| `"-1"` |
+| `visibility=(0)`| (changed)| `"0"` |
+| `visibility=(integer)`| (changed)| `"1"` |
+| `visibility=(NaN)`| (changed, warning)| `"NaN"` |
+| `visibility=(float)`| (changed)| `"99.99"` |
+| `visibility=(true)`| (initial, warning)| `<null>` |
+| `visibility=(false)`| (initial, warning)| `<null>` |
+| `visibility=(string 'true')`| (changed)| `"true"` |
+| `visibility=(string 'false')`| (changed)| `"false"` |
+| `visibility=(string 'on')`| (changed)| `"on"` |
+| `visibility=(string 'off')`| (changed)| `"off"` |
+| `visibility=(symbol)`| (initial, warning)| `<null>` |
+| `visibility=(function)`| (initial, warning)| `<null>` |
+| `visibility=(null)`| (initial)| `<null>` |
+| `visibility=(undefined)`| (initial)| `<null>` |
+
+## `visibility` (on `<path>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `visibility=(string)`| (changed)| `"a string"` |
+| `visibility=(empty string)`| (changed)| `<empty string>` |
+| `visibility=(array with string)`| (changed)| `"string"` |
+| `visibility=(empty array)`| (changed)| `<empty string>` |
+| `visibility=(object)`| (changed)| `"result of toString()"` |
+| `visibility=(numeric string)`| (changed)| `"42"` |
+| `visibility=(-1)`| (changed)| `"-1"` |
+| `visibility=(0)`| (changed)| `"0"` |
+| `visibility=(integer)`| (changed)| `"1"` |
+| `visibility=(NaN)`| (changed, warning)| `"NaN"` |
+| `visibility=(float)`| (changed)| `"99.99"` |
+| `visibility=(true)`| (initial, warning)| `<null>` |
+| `visibility=(false)`| (initial, warning)| `<null>` |
+| `visibility=(string 'true')`| (changed)| `"true"` |
+| `visibility=(string 'false')`| (changed)| `"false"` |
+| `visibility=(string 'on')`| (changed)| `"on"` |
+| `visibility=(string 'off')`| (changed)| `"off"` |
+| `visibility=(symbol)`| (initial, warning)| `<null>` |
+| `visibility=(function)`| (initial, warning)| `<null>` |
+| `visibility=(null)`| (initial)| `<null>` |
+| `visibility=(undefined)`| (initial)| `<null>` |
+
+## `vMathematical` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vMathematical=(string)`| (changed)| `"a string"` |
+| `vMathematical=(empty string)`| (changed)| `<empty string>` |
+| `vMathematical=(array with string)`| (changed)| `"string"` |
+| `vMathematical=(empty array)`| (changed)| `<empty string>` |
+| `vMathematical=(object)`| (changed)| `"result of toString()"` |
+| `vMathematical=(numeric string)`| (changed)| `"42"` |
+| `vMathematical=(-1)`| (changed)| `"-1"` |
+| `vMathematical=(0)`| (changed)| `"0"` |
+| `vMathematical=(integer)`| (changed)| `"1"` |
+| `vMathematical=(NaN)`| (changed, warning)| `"NaN"` |
+| `vMathematical=(float)`| (changed)| `"99.99"` |
+| `vMathematical=(true)`| (initial, warning)| `<null>` |
+| `vMathematical=(false)`| (initial, warning)| `<null>` |
+| `vMathematical=(string 'true')`| (changed)| `"true"` |
+| `vMathematical=(string 'false')`| (changed)| `"false"` |
+| `vMathematical=(string 'on')`| (changed)| `"on"` |
+| `vMathematical=(string 'off')`| (changed)| `"off"` |
+| `vMathematical=(symbol)`| (initial, warning)| `<null>` |
+| `vMathematical=(function)`| (initial, warning)| `<null>` |
+| `vMathematical=(null)`| (initial)| `<null>` |
+| `vMathematical=(undefined)`| (initial)| `<null>` |
+
+## `vocab` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `vocab=(string)`| (changed)| `"a string"` |
+| `vocab=(empty string)`| (changed)| `<empty string>` |
+| `vocab=(array with string)`| (changed)| `"string"` |
+| `vocab=(empty array)`| (changed)| `<empty string>` |
+| `vocab=(object)`| (changed)| `"result of toString()"` |
+| `vocab=(numeric string)`| (changed)| `"42"` |
+| `vocab=(-1)`| (changed)| `"-1"` |
+| `vocab=(0)`| (changed)| `"0"` |
+| `vocab=(integer)`| (changed)| `"1"` |
+| `vocab=(NaN)`| (changed, warning)| `"NaN"` |
+| `vocab=(float)`| (changed)| `"99.99"` |
+| `vocab=(true)`| (initial, warning)| `<null>` |
+| `vocab=(false)`| (initial, warning)| `<null>` |
+| `vocab=(string 'true')`| (changed)| `"true"` |
+| `vocab=(string 'false')`| (changed)| `"false"` |
+| `vocab=(string 'on')`| (changed)| `"on"` |
+| `vocab=(string 'off')`| (changed)| `"off"` |
+| `vocab=(symbol)`| (initial, warning)| `<null>` |
+| `vocab=(function)`| (initial, warning)| `<null>` |
+| `vocab=(null)`| (initial)| `<null>` |
+| `vocab=(undefined)`| (initial)| `<null>` |
+
+## `width` (on `<img>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `width=(string)`| (initial)| `<number: 0>` |
+| `width=(empty string)`| (initial)| `<number: 0>` |
+| `width=(array with string)`| (initial)| `<number: 0>` |
+| `width=(empty array)`| (initial)| `<number: 0>` |
+| `width=(object)`| (initial)| `<number: 0>` |
+| `width=(numeric string)`| (changed)| `<number: 42>` |
+| `width=(-1)`| (initial)| `<number: 0>` |
+| `width=(0)`| (initial)| `<number: 0>` |
+| `width=(integer)`| (changed)| `<number: 1>` |
+| `width=(NaN)`| (initial, warning)| `<number: 0>` |
+| `width=(float)`| (changed)| `<number: 99>` |
+| `width=(true)`| (initial, warning)| `<number: 0>` |
+| `width=(false)`| (initial, warning)| `<number: 0>` |
+| `width=(string 'true')`| (initial)| `<number: 0>` |
+| `width=(string 'false')`| (initial)| `<number: 0>` |
+| `width=(string 'on')`| (initial)| `<number: 0>` |
+| `width=(string 'off')`| (initial)| `<number: 0>` |
+| `width=(symbol)`| (initial, warning)| `<number: 0>` |
+| `width=(function)`| (initial, warning)| `<number: 0>` |
+| `width=(null)`| (initial)| `<number: 0>` |
+| `width=(undefined)`| (initial)| `<number: 0>` |
+
+## `width` (on `<rect>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `width=(string)`| (initial)| `<SVGLength: 0>` |
+| `width=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `width=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `width=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `width=(object)`| (initial)| `<SVGLength: 0>` |
+| `width=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `width=(-1)`| (changed)| `<SVGLength: -1>` |
+| `width=(0)`| (initial)| `<SVGLength: 0>` |
+| `width=(integer)`| (changed)| `<SVGLength: 1>` |
+| `width=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `width=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `width=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `width=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `width=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `width=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `width=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `width=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `width=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `width=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `width=(null)`| (initial)| `<SVGLength: 0>` |
+| `width=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `widths` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `widths=(string)`| (changed)| `"a string"` |
+| `widths=(empty string)`| (changed)| `<empty string>` |
+| `widths=(array with string)`| (changed)| `"string"` |
+| `widths=(empty array)`| (changed)| `<empty string>` |
+| `widths=(object)`| (changed)| `"result of toString()"` |
+| `widths=(numeric string)`| (changed)| `"42"` |
+| `widths=(-1)`| (changed)| `"-1"` |
+| `widths=(0)`| (changed)| `"0"` |
+| `widths=(integer)`| (changed)| `"1"` |
+| `widths=(NaN)`| (changed, warning)| `"NaN"` |
+| `widths=(float)`| (changed)| `"99.99"` |
+| `widths=(true)`| (initial, warning)| `<null>` |
+| `widths=(false)`| (initial, warning)| `<null>` |
+| `widths=(string 'true')`| (changed)| `"true"` |
+| `widths=(string 'false')`| (changed)| `"false"` |
+| `widths=(string 'on')`| (changed)| `"on"` |
+| `widths=(string 'off')`| (changed)| `"off"` |
+| `widths=(symbol)`| (initial, warning)| `<null>` |
+| `widths=(function)`| (initial, warning)| `<null>` |
+| `widths=(null)`| (initial)| `<null>` |
+| `widths=(undefined)`| (initial)| `<null>` |
+
+## `wmode` (on `<embed>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `wmode=(string)`| (changed)| `"a string"` |
+| `wmode=(empty string)`| (changed)| `<empty string>` |
+| `wmode=(array with string)`| (changed)| `"string"` |
+| `wmode=(empty array)`| (changed)| `<empty string>` |
+| `wmode=(object)`| (changed)| `"result of toString()"` |
+| `wmode=(numeric string)`| (changed)| `"42"` |
+| `wmode=(-1)`| (changed)| `"-1"` |
+| `wmode=(0)`| (changed)| `"0"` |
+| `wmode=(integer)`| (changed)| `"1"` |
+| `wmode=(NaN)`| (changed, warning)| `"NaN"` |
+| `wmode=(float)`| (changed)| `"99.99"` |
+| `wmode=(true)`| (initial, warning)| `<null>` |
+| `wmode=(false)`| (initial, warning)| `<null>` |
+| `wmode=(string 'true')`| (changed)| `"true"` |
+| `wmode=(string 'false')`| (changed)| `"false"` |
+| `wmode=(string 'on')`| (changed)| `"on"` |
+| `wmode=(string 'off')`| (changed)| `"off"` |
+| `wmode=(symbol)`| (initial, warning)| `<null>` |
+| `wmode=(function)`| (initial, warning)| `<null>` |
+| `wmode=(null)`| (initial)| `<null>` |
+| `wmode=(undefined)`| (initial)| `<null>` |
+
+## `word-spacing` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `word-spacing=(string)`| (changed, warning)| `"a string"` |
+| `word-spacing=(empty string)`| (changed, warning)| `<empty string>` |
+| `word-spacing=(array with string)`| (changed, warning)| `"string"` |
+| `word-spacing=(empty array)`| (changed, warning)| `<empty string>` |
+| `word-spacing=(object)`| (changed, warning)| `"result of toString()"` |
+| `word-spacing=(numeric string)`| (changed, warning)| `"42"` |
+| `word-spacing=(-1)`| (changed, warning)| `"-1"` |
+| `word-spacing=(0)`| (changed, warning)| `"0"` |
+| `word-spacing=(integer)`| (changed, warning)| `"1"` |
+| `word-spacing=(NaN)`| (changed, warning)| `"NaN"` |
+| `word-spacing=(float)`| (changed, warning)| `"99.99"` |
+| `word-spacing=(true)`| (initial, warning)| `<null>` |
+| `word-spacing=(false)`| (initial, warning)| `<null>` |
+| `word-spacing=(string 'true')`| (changed, warning)| `"true"` |
+| `word-spacing=(string 'false')`| (changed, warning)| `"false"` |
+| `word-spacing=(string 'on')`| (changed, warning)| `"on"` |
+| `word-spacing=(string 'off')`| (changed, warning)| `"off"` |
+| `word-spacing=(symbol)`| (initial, warning)| `<null>` |
+| `word-spacing=(function)`| (initial, warning)| `<null>` |
+| `word-spacing=(null)`| (initial, warning)| `<null>` |
+| `word-spacing=(undefined)`| (initial, warning)| `<null>` |
+
+## `wordSpacing` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `wordSpacing=(string)`| (changed)| `"a string"` |
+| `wordSpacing=(empty string)`| (changed)| `<empty string>` |
+| `wordSpacing=(array with string)`| (changed)| `"string"` |
+| `wordSpacing=(empty array)`| (changed)| `<empty string>` |
+| `wordSpacing=(object)`| (changed)| `"result of toString()"` |
+| `wordSpacing=(numeric string)`| (changed)| `"42"` |
+| `wordSpacing=(-1)`| (changed)| `"-1"` |
+| `wordSpacing=(0)`| (changed)| `"0"` |
+| `wordSpacing=(integer)`| (changed)| `"1"` |
+| `wordSpacing=(NaN)`| (changed, warning)| `"NaN"` |
+| `wordSpacing=(float)`| (changed)| `"99.99"` |
+| `wordSpacing=(true)`| (initial, warning)| `<null>` |
+| `wordSpacing=(false)`| (initial, warning)| `<null>` |
+| `wordSpacing=(string 'true')`| (changed)| `"true"` |
+| `wordSpacing=(string 'false')`| (changed)| `"false"` |
+| `wordSpacing=(string 'on')`| (changed)| `"on"` |
+| `wordSpacing=(string 'off')`| (changed)| `"off"` |
+| `wordSpacing=(symbol)`| (initial, warning)| `<null>` |
+| `wordSpacing=(function)`| (initial, warning)| `<null>` |
+| `wordSpacing=(null)`| (initial)| `<null>` |
+| `wordSpacing=(undefined)`| (initial)| `<null>` |
+
+## `wrap` (on `<textarea>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `wrap=(string)`| (changed)| `"a string"` |
+| `wrap=(empty string)`| (initial)| `<empty string>` |
+| `wrap=(array with string)`| (changed)| `"string"` |
+| `wrap=(empty array)`| (initial)| `<empty string>` |
+| `wrap=(object)`| (changed)| `"result of toString()"` |
+| `wrap=(numeric string)`| (changed)| `"42"` |
+| `wrap=(-1)`| (changed)| `"-1"` |
+| `wrap=(0)`| (changed)| `"0"` |
+| `wrap=(integer)`| (changed)| `"1"` |
+| `wrap=(NaN)`| (changed, warning)| `"NaN"` |
+| `wrap=(float)`| (changed)| `"99.99"` |
+| `wrap=(true)`| (initial, warning)| `<empty string>` |
+| `wrap=(false)`| (initial, warning)| `<empty string>` |
+| `wrap=(string 'true')`| (changed)| `"true"` |
+| `wrap=(string 'false')`| (changed)| `"false"` |
+| `wrap=(string 'on')`| (changed)| `"on"` |
+| `wrap=(string 'off')`| (changed)| `"off"` |
+| `wrap=(symbol)`| (initial, warning)| `<empty string>` |
+| `wrap=(function)`| (initial, warning)| `<empty string>` |
+| `wrap=(null)`| (initial)| `<empty string>` |
+| `wrap=(undefined)`| (initial)| `<empty string>` |
+
+## `writing-mode` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `writing-mode=(string)`| (changed, warning)| `"a string"` |
+| `writing-mode=(empty string)`| (changed, warning)| `<empty string>` |
+| `writing-mode=(array with string)`| (changed, warning)| `"string"` |
+| `writing-mode=(empty array)`| (changed, warning)| `<empty string>` |
+| `writing-mode=(object)`| (changed, warning)| `"result of toString()"` |
+| `writing-mode=(numeric string)`| (changed, warning)| `"42"` |
+| `writing-mode=(-1)`| (changed, warning)| `"-1"` |
+| `writing-mode=(0)`| (changed, warning)| `"0"` |
+| `writing-mode=(integer)`| (changed, warning)| `"1"` |
+| `writing-mode=(NaN)`| (changed, warning)| `"NaN"` |
+| `writing-mode=(float)`| (changed, warning)| `"99.99"` |
+| `writing-mode=(true)`| (initial, warning)| `<null>` |
+| `writing-mode=(false)`| (initial, warning)| `<null>` |
+| `writing-mode=(string 'true')`| (changed, warning)| `"true"` |
+| `writing-mode=(string 'false')`| (changed, warning)| `"false"` |
+| `writing-mode=(string 'on')`| (changed, warning)| `"on"` |
+| `writing-mode=(string 'off')`| (changed, warning)| `"off"` |
+| `writing-mode=(symbol)`| (initial, warning)| `<null>` |
+| `writing-mode=(function)`| (initial, warning)| `<null>` |
+| `writing-mode=(null)`| (initial, warning)| `<null>` |
+| `writing-mode=(undefined)`| (initial, warning)| `<null>` |
+
+## `writingMode` (on `<text>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `writingMode=(string)`| (changed)| `"a string"` |
+| `writingMode=(empty string)`| (changed)| `<empty string>` |
+| `writingMode=(array with string)`| (changed)| `"string"` |
+| `writingMode=(empty array)`| (changed)| `<empty string>` |
+| `writingMode=(object)`| (changed)| `"result of toString()"` |
+| `writingMode=(numeric string)`| (changed)| `"42"` |
+| `writingMode=(-1)`| (changed)| `"-1"` |
+| `writingMode=(0)`| (changed)| `"0"` |
+| `writingMode=(integer)`| (changed)| `"1"` |
+| `writingMode=(NaN)`| (changed, warning)| `"NaN"` |
+| `writingMode=(float)`| (changed)| `"99.99"` |
+| `writingMode=(true)`| (initial, warning)| `<null>` |
+| `writingMode=(false)`| (initial, warning)| `<null>` |
+| `writingMode=(string 'true')`| (changed)| `"true"` |
+| `writingMode=(string 'false')`| (changed)| `"false"` |
+| `writingMode=(string 'on')`| (changed)| `"on"` |
+| `writingMode=(string 'off')`| (changed)| `"off"` |
+| `writingMode=(symbol)`| (initial, warning)| `<null>` |
+| `writingMode=(function)`| (initial, warning)| `<null>` |
+| `writingMode=(null)`| (initial)| `<null>` |
+| `writingMode=(undefined)`| (initial)| `<null>` |
+
+## `x` (on `<altGlyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `x=(string)`| (changed)| `"a string"` |
+| `x=(empty string)`| (changed)| `<empty string>` |
+| `x=(array with string)`| (changed)| `"string"` |
+| `x=(empty array)`| (changed)| `<empty string>` |
+| `x=(object)`| (changed)| `"result of toString()"` |
+| `x=(numeric string)`| (changed)| `"42"` |
+| `x=(-1)`| (changed)| `"-1"` |
+| `x=(0)`| (changed)| `"0"` |
+| `x=(integer)`| (changed)| `"1"` |
+| `x=(NaN)`| (changed, warning)| `"NaN"` |
+| `x=(float)`| (changed)| `"99.99"` |
+| `x=(true)`| (initial, warning)| `<null>` |
+| `x=(false)`| (initial, warning)| `<null>` |
+| `x=(string 'true')`| (changed)| `"true"` |
+| `x=(string 'false')`| (changed)| `"false"` |
+| `x=(string 'on')`| (changed)| `"on"` |
+| `x=(string 'off')`| (changed)| `"off"` |
+| `x=(symbol)`| (initial, warning)| `<null>` |
+| `x=(function)`| (initial, warning)| `<null>` |
+| `x=(null)`| (initial)| `<null>` |
+| `x=(undefined)`| (initial)| `<null>` |
+
+## `x-height` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `x-height=(string)`| (changed, warning)| `"a string"` |
+| `x-height=(empty string)`| (changed, warning)| `<empty string>` |
+| `x-height=(array with string)`| (changed, warning)| `"string"` |
+| `x-height=(empty array)`| (changed, warning)| `<empty string>` |
+| `x-height=(object)`| (changed, warning)| `"result of toString()"` |
+| `x-height=(numeric string)`| (changed, warning)| `"42"` |
+| `x-height=(-1)`| (changed, warning)| `"-1"` |
+| `x-height=(0)`| (changed, warning)| `"0"` |
+| `x-height=(integer)`| (changed, warning)| `"1"` |
+| `x-height=(NaN)`| (changed, warning)| `"NaN"` |
+| `x-height=(float)`| (changed, warning)| `"99.99"` |
+| `x-height=(true)`| (initial, warning)| `<null>` |
+| `x-height=(false)`| (initial, warning)| `<null>` |
+| `x-height=(string 'true')`| (changed, warning)| `"true"` |
+| `x-height=(string 'false')`| (changed, warning)| `"false"` |
+| `x-height=(string 'on')`| (changed, warning)| `"on"` |
+| `x-height=(string 'off')`| (changed, warning)| `"off"` |
+| `x-height=(symbol)`| (initial, warning)| `<null>` |
+| `x-height=(function)`| (initial, warning)| `<null>` |
+| `x-height=(null)`| (initial, warning)| `<null>` |
+| `x-height=(undefined)`| (initial, warning)| `<null>` |
+
+## `x1` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `x1=(string)`| (initial)| `<SVGLength: 0>` |
+| `x1=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `x1=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `x1=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `x1=(object)`| (initial)| `<SVGLength: 0>` |
+| `x1=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `x1=(-1)`| (changed)| `<SVGLength: -1>` |
+| `x1=(0)`| (initial)| `<SVGLength: 0>` |
+| `x1=(integer)`| (changed)| `<SVGLength: 1>` |
+| `x1=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `x1=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `x1=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `x1=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `x1=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `x1=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `x1=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `x1=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `x1=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `x1=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `x1=(null)`| (initial)| `<SVGLength: 0>` |
+| `x1=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `x2` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `x2=(string)`| (initial)| `<SVGLength: 0>` |
+| `x2=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `x2=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `x2=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `x2=(object)`| (initial)| `<SVGLength: 0>` |
+| `x2=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `x2=(-1)`| (changed)| `<SVGLength: -1>` |
+| `x2=(0)`| (initial)| `<SVGLength: 0>` |
+| `x2=(integer)`| (changed)| `<SVGLength: 1>` |
+| `x2=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `x2=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `x2=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `x2=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `x2=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `x2=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `x2=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `x2=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `x2=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `x2=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `x2=(null)`| (initial)| `<SVGLength: 0>` |
+| `x2=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `xChannelSelector` (on `<feDisplacementMap>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xChannelSelector=(string)`| (changed)| `<number: 1>` |
+| `xChannelSelector=(empty string)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(array with string)`| (changed)| `<number: 1>` |
+| `xChannelSelector=(empty array)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(object)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(numeric string)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(-1)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(0)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(integer)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(NaN)`| (initial, warning)| `<number: 4>` |
+| `xChannelSelector=(float)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(true)`| (initial, warning)| `<number: 4>` |
+| `xChannelSelector=(false)`| (initial, warning)| `<number: 4>` |
+| `xChannelSelector=(string 'true')`| (initial)| `<number: 4>` |
+| `xChannelSelector=(string 'false')`| (initial)| `<number: 4>` |
+| `xChannelSelector=(string 'on')`| (initial)| `<number: 4>` |
+| `xChannelSelector=(string 'off')`| (initial)| `<number: 4>` |
+| `xChannelSelector=(symbol)`| (initial, warning)| `<number: 4>` |
+| `xChannelSelector=(function)`| (initial, warning)| `<number: 4>` |
+| `xChannelSelector=(null)`| (initial)| `<number: 4>` |
+| `xChannelSelector=(undefined)`| (initial)| `<number: 4>` |
+
+## `xHeight` (on `<font-face>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xHeight=(string)`| (changed)| `"a string"` |
+| `xHeight=(empty string)`| (changed)| `<empty string>` |
+| `xHeight=(array with string)`| (changed)| `"string"` |
+| `xHeight=(empty array)`| (changed)| `<empty string>` |
+| `xHeight=(object)`| (changed)| `"result of toString()"` |
+| `xHeight=(numeric string)`| (changed)| `"42"` |
+| `xHeight=(-1)`| (changed)| `"-1"` |
+| `xHeight=(0)`| (changed)| `"0"` |
+| `xHeight=(integer)`| (changed)| `"1"` |
+| `xHeight=(NaN)`| (changed, warning)| `"NaN"` |
+| `xHeight=(float)`| (changed)| `"99.99"` |
+| `xHeight=(true)`| (initial, warning)| `<null>` |
+| `xHeight=(false)`| (initial, warning)| `<null>` |
+| `xHeight=(string 'true')`| (changed)| `"true"` |
+| `xHeight=(string 'false')`| (changed)| `"false"` |
+| `xHeight=(string 'on')`| (changed)| `"on"` |
+| `xHeight=(string 'off')`| (changed)| `"off"` |
+| `xHeight=(symbol)`| (initial, warning)| `<null>` |
+| `xHeight=(function)`| (initial, warning)| `<null>` |
+| `xHeight=(null)`| (initial)| `<null>` |
+| `xHeight=(undefined)`| (initial)| `<null>` |
+
+## `XLink:Actuate` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `XLink:Actuate=(string)`| (changed, warning)| `"a string"` |
+| `XLink:Actuate=(empty string)`| (changed, warning)| `<empty string>` |
+| `XLink:Actuate=(array with string)`| (changed, warning)| `"string"` |
+| `XLink:Actuate=(empty array)`| (changed, warning)| `<empty string>` |
+| `XLink:Actuate=(object)`| (changed, warning)| `"result of toString()"` |
+| `XLink:Actuate=(numeric string)`| (changed, warning)| `"42"` |
+| `XLink:Actuate=(-1)`| (changed, warning)| `"-1"` |
+| `XLink:Actuate=(0)`| (changed, warning)| `"0"` |
+| `XLink:Actuate=(integer)`| (changed, warning)| `"1"` |
+| `XLink:Actuate=(NaN)`| (changed, warning)| `"NaN"` |
+| `XLink:Actuate=(float)`| (changed, warning)| `"99.99"` |
+| `XLink:Actuate=(true)`| (initial, warning)| `<null>` |
+| `XLink:Actuate=(false)`| (initial, warning)| `<null>` |
+| `XLink:Actuate=(string 'true')`| (changed, warning)| `"true"` |
+| `XLink:Actuate=(string 'false')`| (changed, warning)| `"false"` |
+| `XLink:Actuate=(string 'on')`| (changed, warning)| `"on"` |
+| `XLink:Actuate=(string 'off')`| (changed, warning)| `"off"` |
+| `XLink:Actuate=(symbol)`| (initial, warning)| `<null>` |
+| `XLink:Actuate=(function)`| (initial, warning)| `<null>` |
+| `XLink:Actuate=(null)`| (initial, warning)| `<null>` |
+| `XLink:Actuate=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:actuate` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:actuate=(string)`| (changed, warning)| `"a string"` |
+| `xlink:actuate=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:actuate=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:actuate=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:actuate=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:actuate=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:actuate=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:actuate=(0)`| (changed, warning)| `"0"` |
+| `xlink:actuate=(integer)`| (changed, warning)| `"1"` |
+| `xlink:actuate=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:actuate=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:actuate=(true)`| (initial, warning)| `<null>` |
+| `xlink:actuate=(false)`| (initial, warning)| `<null>` |
+| `xlink:actuate=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:actuate=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:actuate=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:actuate=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:actuate=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:actuate=(function)`| (initial, warning)| `<null>` |
+| `xlink:actuate=(null)`| (initial, warning)| `<null>` |
+| `xlink:actuate=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:arcrole` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:arcrole=(string)`| (changed, warning)| `"a string"` |
+| `xlink:arcrole=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:arcrole=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:arcrole=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:arcrole=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:arcrole=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:arcrole=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:arcrole=(0)`| (changed, warning)| `"0"` |
+| `xlink:arcrole=(integer)`| (changed, warning)| `"1"` |
+| `xlink:arcrole=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:arcrole=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:arcrole=(true)`| (initial, warning)| `<null>` |
+| `xlink:arcrole=(false)`| (initial, warning)| `<null>` |
+| `xlink:arcrole=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:arcrole=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:arcrole=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:arcrole=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:arcrole=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:arcrole=(function)`| (initial, warning)| `<null>` |
+| `xlink:arcrole=(null)`| (initial, warning)| `<null>` |
+| `xlink:arcrole=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:href` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:href=(string)`| (changed, warning)| `"a string"` |
+| `xlink:href=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:href=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:href=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:href=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:href=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:href=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:href=(0)`| (changed, warning)| `"0"` |
+| `xlink:href=(integer)`| (changed, warning)| `"1"` |
+| `xlink:href=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:href=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:href=(true)`| (initial, warning)| `<null>` |
+| `xlink:href=(false)`| (initial, warning)| `<null>` |
+| `xlink:href=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:href=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:href=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:href=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:href=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:href=(function)`| (initial, warning)| `<null>` |
+| `xlink:href=(null)`| (initial, warning)| `<null>` |
+| `xlink:href=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:role` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:role=(string)`| (changed, warning)| `"a string"` |
+| `xlink:role=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:role=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:role=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:role=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:role=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:role=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:role=(0)`| (changed, warning)| `"0"` |
+| `xlink:role=(integer)`| (changed, warning)| `"1"` |
+| `xlink:role=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:role=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:role=(true)`| (initial, warning)| `<null>` |
+| `xlink:role=(false)`| (initial, warning)| `<null>` |
+| `xlink:role=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:role=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:role=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:role=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:role=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:role=(function)`| (initial, warning)| `<null>` |
+| `xlink:role=(null)`| (initial, warning)| `<null>` |
+| `xlink:role=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:show` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:show=(string)`| (changed, warning)| `"a string"` |
+| `xlink:show=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:show=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:show=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:show=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:show=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:show=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:show=(0)`| (changed, warning)| `"0"` |
+| `xlink:show=(integer)`| (changed, warning)| `"1"` |
+| `xlink:show=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:show=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:show=(true)`| (initial, warning)| `<null>` |
+| `xlink:show=(false)`| (initial, warning)| `<null>` |
+| `xlink:show=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:show=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:show=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:show=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:show=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:show=(function)`| (initial, warning)| `<null>` |
+| `xlink:show=(null)`| (initial, warning)| `<null>` |
+| `xlink:show=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:title` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:title=(string)`| (changed, warning)| `"a string"` |
+| `xlink:title=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:title=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:title=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:title=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:title=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:title=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:title=(0)`| (changed, warning)| `"0"` |
+| `xlink:title=(integer)`| (changed, warning)| `"1"` |
+| `xlink:title=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:title=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:title=(true)`| (initial, warning)| `<null>` |
+| `xlink:title=(false)`| (initial, warning)| `<null>` |
+| `xlink:title=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:title=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:title=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:title=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:title=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:title=(function)`| (initial, warning)| `<null>` |
+| `xlink:title=(null)`| (initial, warning)| `<null>` |
+| `xlink:title=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlink:type` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlink:type=(string)`| (changed, warning)| `"a string"` |
+| `xlink:type=(empty string)`| (changed, warning)| `<empty string>` |
+| `xlink:type=(array with string)`| (changed, warning)| `"string"` |
+| `xlink:type=(empty array)`| (changed, warning)| `<empty string>` |
+| `xlink:type=(object)`| (changed, warning)| `"result of toString()"` |
+| `xlink:type=(numeric string)`| (changed, warning)| `"42"` |
+| `xlink:type=(-1)`| (changed, warning)| `"-1"` |
+| `xlink:type=(0)`| (changed, warning)| `"0"` |
+| `xlink:type=(integer)`| (changed, warning)| `"1"` |
+| `xlink:type=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlink:type=(float)`| (changed, warning)| `"99.99"` |
+| `xlink:type=(true)`| (initial, warning)| `<null>` |
+| `xlink:type=(false)`| (initial, warning)| `<null>` |
+| `xlink:type=(string 'true')`| (changed, warning)| `"true"` |
+| `xlink:type=(string 'false')`| (changed, warning)| `"false"` |
+| `xlink:type=(string 'on')`| (changed, warning)| `"on"` |
+| `xlink:type=(string 'off')`| (changed, warning)| `"off"` |
+| `xlink:type=(symbol)`| (initial, warning)| `<null>` |
+| `xlink:type=(function)`| (initial, warning)| `<null>` |
+| `xlink:type=(null)`| (initial, warning)| `<null>` |
+| `xlink:type=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlinkActuate` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkActuate=(string)`| (changed)| `"a string"` |
+| `xlinkActuate=(empty string)`| (changed)| `<empty string>` |
+| `xlinkActuate=(array with string)`| (changed)| `"string"` |
+| `xlinkActuate=(empty array)`| (changed)| `<empty string>` |
+| `xlinkActuate=(object)`| (changed)| `"result of toString()"` |
+| `xlinkActuate=(numeric string)`| (changed)| `"42"` |
+| `xlinkActuate=(-1)`| (changed)| `"-1"` |
+| `xlinkActuate=(0)`| (changed)| `"0"` |
+| `xlinkActuate=(integer)`| (changed)| `"1"` |
+| `xlinkActuate=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkActuate=(float)`| (changed)| `"99.99"` |
+| `xlinkActuate=(true)`| (initial, warning)| `<null>` |
+| `xlinkActuate=(false)`| (initial, warning)| `<null>` |
+| `xlinkActuate=(string 'true')`| (changed)| `"true"` |
+| `xlinkActuate=(string 'false')`| (changed)| `"false"` |
+| `xlinkActuate=(string 'on')`| (changed)| `"on"` |
+| `xlinkActuate=(string 'off')`| (changed)| `"off"` |
+| `xlinkActuate=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkActuate=(function)`| (initial, warning)| `<null>` |
+| `xlinkActuate=(null)`| (initial)| `<null>` |
+| `xlinkActuate=(undefined)`| (initial)| `<null>` |
+
+## `XlinkActuate` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `XlinkActuate=(string)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(empty string)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(array with string)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(empty array)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(object)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(numeric string)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(-1)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(0)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(integer)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(NaN)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(float)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(true)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(false)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(string 'true')`| (initial, warning)| `<null>` |
+| `XlinkActuate=(string 'false')`| (initial, warning)| `<null>` |
+| `XlinkActuate=(string 'on')`| (initial, warning)| `<null>` |
+| `XlinkActuate=(string 'off')`| (initial, warning)| `<null>` |
+| `XlinkActuate=(symbol)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(function)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(null)`| (initial, warning)| `<null>` |
+| `XlinkActuate=(undefined)`| (initial, warning)| `<null>` |
+
+## `xlinkArcrole` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkArcrole=(string)`| (changed)| `"a string"` |
+| `xlinkArcrole=(empty string)`| (changed)| `<empty string>` |
+| `xlinkArcrole=(array with string)`| (changed)| `"string"` |
+| `xlinkArcrole=(empty array)`| (changed)| `<empty string>` |
+| `xlinkArcrole=(object)`| (changed)| `"result of toString()"` |
+| `xlinkArcrole=(numeric string)`| (changed)| `"42"` |
+| `xlinkArcrole=(-1)`| (changed)| `"-1"` |
+| `xlinkArcrole=(0)`| (changed)| `"0"` |
+| `xlinkArcrole=(integer)`| (changed)| `"1"` |
+| `xlinkArcrole=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkArcrole=(float)`| (changed)| `"99.99"` |
+| `xlinkArcrole=(true)`| (initial, warning)| `<null>` |
+| `xlinkArcrole=(false)`| (initial, warning)| `<null>` |
+| `xlinkArcrole=(string 'true')`| (changed)| `"true"` |
+| `xlinkArcrole=(string 'false')`| (changed)| `"false"` |
+| `xlinkArcrole=(string 'on')`| (changed)| `"on"` |
+| `xlinkArcrole=(string 'off')`| (changed)| `"off"` |
+| `xlinkArcrole=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkArcrole=(function)`| (initial, warning)| `<null>` |
+| `xlinkArcrole=(null)`| (initial)| `<null>` |
+| `xlinkArcrole=(undefined)`| (initial)| `<null>` |
+
+## `xlinkHref` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkHref=(string)`| (changed)| `"a string"` |
+| `xlinkHref=(empty string)`| (changed)| `<empty string>` |
+| `xlinkHref=(array with string)`| (changed)| `"string"` |
+| `xlinkHref=(empty array)`| (changed)| `<empty string>` |
+| `xlinkHref=(object)`| (changed)| `"result of toString()"` |
+| `xlinkHref=(numeric string)`| (changed)| `"42"` |
+| `xlinkHref=(-1)`| (changed)| `"-1"` |
+| `xlinkHref=(0)`| (changed)| `"0"` |
+| `xlinkHref=(integer)`| (changed)| `"1"` |
+| `xlinkHref=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkHref=(float)`| (changed)| `"99.99"` |
+| `xlinkHref=(true)`| (initial, warning)| `<null>` |
+| `xlinkHref=(false)`| (initial, warning)| `<null>` |
+| `xlinkHref=(string 'true')`| (changed)| `"true"` |
+| `xlinkHref=(string 'false')`| (changed)| `"false"` |
+| `xlinkHref=(string 'on')`| (changed)| `"on"` |
+| `xlinkHref=(string 'off')`| (changed)| `"off"` |
+| `xlinkHref=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkHref=(function)`| (initial, warning)| `<null>` |
+| `xlinkHref=(null)`| (initial)| `<null>` |
+| `xlinkHref=(undefined)`| (initial)| `<null>` |
+
+## `xlinkRole` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkRole=(string)`| (changed)| `"a string"` |
+| `xlinkRole=(empty string)`| (changed)| `<empty string>` |
+| `xlinkRole=(array with string)`| (changed)| `"string"` |
+| `xlinkRole=(empty array)`| (changed)| `<empty string>` |
+| `xlinkRole=(object)`| (changed)| `"result of toString()"` |
+| `xlinkRole=(numeric string)`| (changed)| `"42"` |
+| `xlinkRole=(-1)`| (changed)| `"-1"` |
+| `xlinkRole=(0)`| (changed)| `"0"` |
+| `xlinkRole=(integer)`| (changed)| `"1"` |
+| `xlinkRole=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkRole=(float)`| (changed)| `"99.99"` |
+| `xlinkRole=(true)`| (initial, warning)| `<null>` |
+| `xlinkRole=(false)`| (initial, warning)| `<null>` |
+| `xlinkRole=(string 'true')`| (changed)| `"true"` |
+| `xlinkRole=(string 'false')`| (changed)| `"false"` |
+| `xlinkRole=(string 'on')`| (changed)| `"on"` |
+| `xlinkRole=(string 'off')`| (changed)| `"off"` |
+| `xlinkRole=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkRole=(function)`| (initial, warning)| `<null>` |
+| `xlinkRole=(null)`| (initial)| `<null>` |
+| `xlinkRole=(undefined)`| (initial)| `<null>` |
+
+## `xlinkShow` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkShow=(string)`| (changed)| `"a string"` |
+| `xlinkShow=(empty string)`| (changed)| `<empty string>` |
+| `xlinkShow=(array with string)`| (changed)| `"string"` |
+| `xlinkShow=(empty array)`| (changed)| `<empty string>` |
+| `xlinkShow=(object)`| (changed)| `"result of toString()"` |
+| `xlinkShow=(numeric string)`| (changed)| `"42"` |
+| `xlinkShow=(-1)`| (changed)| `"-1"` |
+| `xlinkShow=(0)`| (changed)| `"0"` |
+| `xlinkShow=(integer)`| (changed)| `"1"` |
+| `xlinkShow=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkShow=(float)`| (changed)| `"99.99"` |
+| `xlinkShow=(true)`| (initial, warning)| `<null>` |
+| `xlinkShow=(false)`| (initial, warning)| `<null>` |
+| `xlinkShow=(string 'true')`| (changed)| `"true"` |
+| `xlinkShow=(string 'false')`| (changed)| `"false"` |
+| `xlinkShow=(string 'on')`| (changed)| `"on"` |
+| `xlinkShow=(string 'off')`| (changed)| `"off"` |
+| `xlinkShow=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkShow=(function)`| (initial, warning)| `<null>` |
+| `xlinkShow=(null)`| (initial)| `<null>` |
+| `xlinkShow=(undefined)`| (initial)| `<null>` |
+
+## `xlinkTitle` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkTitle=(string)`| (changed)| `"a string"` |
+| `xlinkTitle=(empty string)`| (changed)| `<empty string>` |
+| `xlinkTitle=(array with string)`| (changed)| `"string"` |
+| `xlinkTitle=(empty array)`| (changed)| `<empty string>` |
+| `xlinkTitle=(object)`| (changed)| `"result of toString()"` |
+| `xlinkTitle=(numeric string)`| (changed)| `"42"` |
+| `xlinkTitle=(-1)`| (changed)| `"-1"` |
+| `xlinkTitle=(0)`| (changed)| `"0"` |
+| `xlinkTitle=(integer)`| (changed)| `"1"` |
+| `xlinkTitle=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkTitle=(float)`| (changed)| `"99.99"` |
+| `xlinkTitle=(true)`| (initial, warning)| `<null>` |
+| `xlinkTitle=(false)`| (initial, warning)| `<null>` |
+| `xlinkTitle=(string 'true')`| (changed)| `"true"` |
+| `xlinkTitle=(string 'false')`| (changed)| `"false"` |
+| `xlinkTitle=(string 'on')`| (changed)| `"on"` |
+| `xlinkTitle=(string 'off')`| (changed)| `"off"` |
+| `xlinkTitle=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkTitle=(function)`| (initial, warning)| `<null>` |
+| `xlinkTitle=(null)`| (initial)| `<null>` |
+| `xlinkTitle=(undefined)`| (initial)| `<null>` |
+
+## `xlinkType` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xlinkType=(string)`| (changed)| `"a string"` |
+| `xlinkType=(empty string)`| (changed)| `<empty string>` |
+| `xlinkType=(array with string)`| (changed)| `"string"` |
+| `xlinkType=(empty array)`| (changed)| `<empty string>` |
+| `xlinkType=(object)`| (changed)| `"result of toString()"` |
+| `xlinkType=(numeric string)`| (changed)| `"42"` |
+| `xlinkType=(-1)`| (changed)| `"-1"` |
+| `xlinkType=(0)`| (changed)| `"0"` |
+| `xlinkType=(integer)`| (changed)| `"1"` |
+| `xlinkType=(NaN)`| (changed, warning)| `"NaN"` |
+| `xlinkType=(float)`| (changed)| `"99.99"` |
+| `xlinkType=(true)`| (initial, warning)| `<null>` |
+| `xlinkType=(false)`| (initial, warning)| `<null>` |
+| `xlinkType=(string 'true')`| (changed)| `"true"` |
+| `xlinkType=(string 'false')`| (changed)| `"false"` |
+| `xlinkType=(string 'on')`| (changed)| `"on"` |
+| `xlinkType=(string 'off')`| (changed)| `"off"` |
+| `xlinkType=(symbol)`| (initial, warning)| `<null>` |
+| `xlinkType=(function)`| (initial, warning)| `<null>` |
+| `xlinkType=(null)`| (initial)| `<null>` |
+| `xlinkType=(undefined)`| (initial)| `<null>` |
+
+## `xml:base` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xml:base=(string)`| (changed, warning)| `"a string"` |
+| `xml:base=(empty string)`| (changed, warning)| `<empty string>` |
+| `xml:base=(array with string)`| (changed, warning)| `"string"` |
+| `xml:base=(empty array)`| (changed, warning)| `<empty string>` |
+| `xml:base=(object)`| (changed, warning)| `"result of toString()"` |
+| `xml:base=(numeric string)`| (changed, warning)| `"42"` |
+| `xml:base=(-1)`| (changed, warning)| `"-1"` |
+| `xml:base=(0)`| (changed, warning)| `"0"` |
+| `xml:base=(integer)`| (changed, warning)| `"1"` |
+| `xml:base=(NaN)`| (changed, warning)| `"NaN"` |
+| `xml:base=(float)`| (changed, warning)| `"99.99"` |
+| `xml:base=(true)`| (initial, warning)| `<null>` |
+| `xml:base=(false)`| (initial, warning)| `<null>` |
+| `xml:base=(string 'true')`| (changed, warning)| `"true"` |
+| `xml:base=(string 'false')`| (changed, warning)| `"false"` |
+| `xml:base=(string 'on')`| (changed, warning)| `"on"` |
+| `xml:base=(string 'off')`| (changed, warning)| `"off"` |
+| `xml:base=(symbol)`| (initial, warning)| `<null>` |
+| `xml:base=(function)`| (initial, warning)| `<null>` |
+| `xml:base=(null)`| (initial, warning)| `<null>` |
+| `xml:base=(undefined)`| (initial, warning)| `<null>` |
+
+## `xml:lang` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xml:lang=(string)`| (changed, warning)| `"a string"` |
+| `xml:lang=(empty string)`| (changed, warning)| `<empty string>` |
+| `xml:lang=(array with string)`| (changed, warning)| `"string"` |
+| `xml:lang=(empty array)`| (changed, warning)| `<empty string>` |
+| `xml:lang=(object)`| (changed, warning)| `"result of toString()"` |
+| `xml:lang=(numeric string)`| (changed, warning)| `"42"` |
+| `xml:lang=(-1)`| (changed, warning)| `"-1"` |
+| `xml:lang=(0)`| (changed, warning)| `"0"` |
+| `xml:lang=(integer)`| (changed, warning)| `"1"` |
+| `xml:lang=(NaN)`| (changed, warning)| `"NaN"` |
+| `xml:lang=(float)`| (changed, warning)| `"99.99"` |
+| `xml:lang=(true)`| (initial, warning)| `<null>` |
+| `xml:lang=(false)`| (initial, warning)| `<null>` |
+| `xml:lang=(string 'true')`| (changed, warning)| `"true"` |
+| `xml:lang=(string 'false')`| (changed, warning)| `"false"` |
+| `xml:lang=(string 'on')`| (changed, warning)| `"on"` |
+| `xml:lang=(string 'off')`| (changed, warning)| `"off"` |
+| `xml:lang=(symbol)`| (initial, warning)| `<null>` |
+| `xml:lang=(function)`| (initial, warning)| `<null>` |
+| `xml:lang=(null)`| (initial, warning)| `<null>` |
+| `xml:lang=(undefined)`| (initial, warning)| `<null>` |
+
+## `xml:space` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xml:space=(string)`| (changed, warning)| `"a string"` |
+| `xml:space=(empty string)`| (changed, warning)| `<empty string>` |
+| `xml:space=(array with string)`| (changed, warning)| `"string"` |
+| `xml:space=(empty array)`| (changed, warning)| `<empty string>` |
+| `xml:space=(object)`| (changed, warning)| `"result of toString()"` |
+| `xml:space=(numeric string)`| (changed, warning)| `"42"` |
+| `xml:space=(-1)`| (changed, warning)| `"-1"` |
+| `xml:space=(0)`| (changed, warning)| `"0"` |
+| `xml:space=(integer)`| (changed, warning)| `"1"` |
+| `xml:space=(NaN)`| (changed, warning)| `"NaN"` |
+| `xml:space=(float)`| (changed, warning)| `"99.99"` |
+| `xml:space=(true)`| (initial, warning)| `<null>` |
+| `xml:space=(false)`| (initial, warning)| `<null>` |
+| `xml:space=(string 'true')`| (changed, warning)| `"true"` |
+| `xml:space=(string 'false')`| (changed, warning)| `"false"` |
+| `xml:space=(string 'on')`| (changed, warning)| `"on"` |
+| `xml:space=(string 'off')`| (changed, warning)| `"off"` |
+| `xml:space=(symbol)`| (initial, warning)| `<null>` |
+| `xml:space=(function)`| (initial, warning)| `<null>` |
+| `xml:space=(null)`| (initial, warning)| `<null>` |
+| `xml:space=(undefined)`| (initial, warning)| `<null>` |
+
+## `xmlBase` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xmlBase=(string)`| (changed)| `"a string"` |
+| `xmlBase=(empty string)`| (changed)| `<empty string>` |
+| `xmlBase=(array with string)`| (changed)| `"string"` |
+| `xmlBase=(empty array)`| (changed)| `<empty string>` |
+| `xmlBase=(object)`| (changed)| `"result of toString()"` |
+| `xmlBase=(numeric string)`| (changed)| `"42"` |
+| `xmlBase=(-1)`| (changed)| `"-1"` |
+| `xmlBase=(0)`| (changed)| `"0"` |
+| `xmlBase=(integer)`| (changed)| `"1"` |
+| `xmlBase=(NaN)`| (changed, warning)| `"NaN"` |
+| `xmlBase=(float)`| (changed)| `"99.99"` |
+| `xmlBase=(true)`| (initial, warning)| `<null>` |
+| `xmlBase=(false)`| (initial, warning)| `<null>` |
+| `xmlBase=(string 'true')`| (changed)| `"true"` |
+| `xmlBase=(string 'false')`| (changed)| `"false"` |
+| `xmlBase=(string 'on')`| (changed)| `"on"` |
+| `xmlBase=(string 'off')`| (changed)| `"off"` |
+| `xmlBase=(symbol)`| (initial, warning)| `<null>` |
+| `xmlBase=(function)`| (initial, warning)| `<null>` |
+| `xmlBase=(null)`| (initial)| `<null>` |
+| `xmlBase=(undefined)`| (initial)| `<null>` |
+
+## `xmlLang` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xmlLang=(string)`| (changed)| `"a string"` |
+| `xmlLang=(empty string)`| (changed)| `<empty string>` |
+| `xmlLang=(array with string)`| (changed)| `"string"` |
+| `xmlLang=(empty array)`| (changed)| `<empty string>` |
+| `xmlLang=(object)`| (changed)| `"result of toString()"` |
+| `xmlLang=(numeric string)`| (changed)| `"42"` |
+| `xmlLang=(-1)`| (changed)| `"-1"` |
+| `xmlLang=(0)`| (changed)| `"0"` |
+| `xmlLang=(integer)`| (changed)| `"1"` |
+| `xmlLang=(NaN)`| (changed, warning)| `"NaN"` |
+| `xmlLang=(float)`| (changed)| `"99.99"` |
+| `xmlLang=(true)`| (initial, warning)| `<null>` |
+| `xmlLang=(false)`| (initial, warning)| `<null>` |
+| `xmlLang=(string 'true')`| (changed)| `"true"` |
+| `xmlLang=(string 'false')`| (changed)| `"false"` |
+| `xmlLang=(string 'on')`| (changed)| `"on"` |
+| `xmlLang=(string 'off')`| (changed)| `"off"` |
+| `xmlLang=(symbol)`| (initial, warning)| `<null>` |
+| `xmlLang=(function)`| (initial, warning)| `<null>` |
+| `xmlLang=(null)`| (initial)| `<null>` |
+| `xmlLang=(undefined)`| (initial)| `<null>` |
+
+## `xmlns` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xmlns=(string)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(empty string)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(array with string)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(empty array)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(object)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(numeric string)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(-1)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(0)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(integer)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(NaN)`| (initial, warning)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(float)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(true)`| (initial, warning)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(false)`| (initial, warning)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(string 'true')`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(string 'false')`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(string 'on')`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(string 'off')`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(symbol)`| (initial, warning)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(function)`| (initial, warning)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(null)`| (initial)| `"http://www.w3.org/2000/svg"` |
+| `xmlns=(undefined)`| (initial)| `"http://www.w3.org/2000/svg"` |
+
+## `xmlns:xlink` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xmlns:xlink=(string)`| (changed, warning)| `"a string"` |
+| `xmlns:xlink=(empty string)`| (changed, warning)| `<empty string>` |
+| `xmlns:xlink=(array with string)`| (changed, warning)| `"string"` |
+| `xmlns:xlink=(empty array)`| (changed, warning)| `<empty string>` |
+| `xmlns:xlink=(object)`| (changed, warning)| `"result of toString()"` |
+| `xmlns:xlink=(numeric string)`| (changed, warning)| `"42"` |
+| `xmlns:xlink=(-1)`| (changed, warning)| `"-1"` |
+| `xmlns:xlink=(0)`| (changed, warning)| `"0"` |
+| `xmlns:xlink=(integer)`| (changed, warning)| `"1"` |
+| `xmlns:xlink=(NaN)`| (changed, warning)| `"NaN"` |
+| `xmlns:xlink=(float)`| (changed, warning)| `"99.99"` |
+| `xmlns:xlink=(true)`| (initial, warning)| `<null>` |
+| `xmlns:xlink=(false)`| (initial, warning)| `<null>` |
+| `xmlns:xlink=(string 'true')`| (changed, warning)| `"true"` |
+| `xmlns:xlink=(string 'false')`| (changed, warning)| `"false"` |
+| `xmlns:xlink=(string 'on')`| (changed, warning)| `"on"` |
+| `xmlns:xlink=(string 'off')`| (changed, warning)| `"off"` |
+| `xmlns:xlink=(symbol)`| (initial, warning)| `<null>` |
+| `xmlns:xlink=(function)`| (initial, warning)| `<null>` |
+| `xmlns:xlink=(null)`| (initial, warning)| `<null>` |
+| `xmlns:xlink=(undefined)`| (initial, warning)| `<null>` |
+
+## `xmlnsXlink` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xmlnsXlink=(string)`| (changed)| `"a string"` |
+| `xmlnsXlink=(empty string)`| (changed)| `<empty string>` |
+| `xmlnsXlink=(array with string)`| (changed)| `"string"` |
+| `xmlnsXlink=(empty array)`| (changed)| `<empty string>` |
+| `xmlnsXlink=(object)`| (changed)| `"result of toString()"` |
+| `xmlnsXlink=(numeric string)`| (changed)| `"42"` |
+| `xmlnsXlink=(-1)`| (changed)| `"-1"` |
+| `xmlnsXlink=(0)`| (changed)| `"0"` |
+| `xmlnsXlink=(integer)`| (changed)| `"1"` |
+| `xmlnsXlink=(NaN)`| (changed, warning)| `"NaN"` |
+| `xmlnsXlink=(float)`| (changed)| `"99.99"` |
+| `xmlnsXlink=(true)`| (initial, warning)| `<null>` |
+| `xmlnsXlink=(false)`| (initial, warning)| `<null>` |
+| `xmlnsXlink=(string 'true')`| (changed)| `"true"` |
+| `xmlnsXlink=(string 'false')`| (changed)| `"false"` |
+| `xmlnsXlink=(string 'on')`| (changed)| `"on"` |
+| `xmlnsXlink=(string 'off')`| (changed)| `"off"` |
+| `xmlnsXlink=(symbol)`| (initial, warning)| `<null>` |
+| `xmlnsXlink=(function)`| (initial, warning)| `<null>` |
+| `xmlnsXlink=(null)`| (initial)| `<null>` |
+| `xmlnsXlink=(undefined)`| (initial)| `<null>` |
+
+## `xmlSpace` (on `<div>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `xmlSpace=(string)`| (changed)| `"a string"` |
+| `xmlSpace=(empty string)`| (changed)| `<empty string>` |
+| `xmlSpace=(array with string)`| (changed)| `"string"` |
+| `xmlSpace=(empty array)`| (changed)| `<empty string>` |
+| `xmlSpace=(object)`| (changed)| `"result of toString()"` |
+| `xmlSpace=(numeric string)`| (changed)| `"42"` |
+| `xmlSpace=(-1)`| (changed)| `"-1"` |
+| `xmlSpace=(0)`| (changed)| `"0"` |
+| `xmlSpace=(integer)`| (changed)| `"1"` |
+| `xmlSpace=(NaN)`| (changed, warning)| `"NaN"` |
+| `xmlSpace=(float)`| (changed)| `"99.99"` |
+| `xmlSpace=(true)`| (initial, warning)| `<null>` |
+| `xmlSpace=(false)`| (initial, warning)| `<null>` |
+| `xmlSpace=(string 'true')`| (changed)| `"true"` |
+| `xmlSpace=(string 'false')`| (changed)| `"false"` |
+| `xmlSpace=(string 'on')`| (changed)| `"on"` |
+| `xmlSpace=(string 'off')`| (changed)| `"off"` |
+| `xmlSpace=(symbol)`| (initial, warning)| `<null>` |
+| `xmlSpace=(function)`| (initial, warning)| `<null>` |
+| `xmlSpace=(null)`| (initial)| `<null>` |
+| `xmlSpace=(undefined)`| (initial)| `<null>` |
+
+## `y` (on `<altGlyph>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `y=(string)`| (changed)| `"a string"` |
+| `y=(empty string)`| (changed)| `<empty string>` |
+| `y=(array with string)`| (changed)| `"string"` |
+| `y=(empty array)`| (changed)| `<empty string>` |
+| `y=(object)`| (changed)| `"result of toString()"` |
+| `y=(numeric string)`| (changed)| `"42"` |
+| `y=(-1)`| (changed)| `"-1"` |
+| `y=(0)`| (changed)| `"0"` |
+| `y=(integer)`| (changed)| `"1"` |
+| `y=(NaN)`| (changed, warning)| `"NaN"` |
+| `y=(float)`| (changed)| `"99.99"` |
+| `y=(true)`| (initial, warning)| `<null>` |
+| `y=(false)`| (initial, warning)| `<null>` |
+| `y=(string 'true')`| (changed)| `"true"` |
+| `y=(string 'false')`| (changed)| `"false"` |
+| `y=(string 'on')`| (changed)| `"on"` |
+| `y=(string 'off')`| (changed)| `"off"` |
+| `y=(symbol)`| (initial, warning)| `<null>` |
+| `y=(function)`| (initial, warning)| `<null>` |
+| `y=(null)`| (initial)| `<null>` |
+| `y=(undefined)`| (initial)| `<null>` |
+
+## `y1` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `y1=(string)`| (initial)| `<SVGLength: 0>` |
+| `y1=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `y1=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `y1=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `y1=(object)`| (initial)| `<SVGLength: 0>` |
+| `y1=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `y1=(-1)`| (changed)| `<SVGLength: -1>` |
+| `y1=(0)`| (initial)| `<SVGLength: 0>` |
+| `y1=(integer)`| (changed)| `<SVGLength: 1>` |
+| `y1=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `y1=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `y1=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `y1=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `y1=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `y1=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `y1=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `y1=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `y1=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `y1=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `y1=(null)`| (initial)| `<SVGLength: 0>` |
+| `y1=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `y2` (on `<line>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `y2=(string)`| (initial)| `<SVGLength: 0>` |
+| `y2=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `y2=(array with string)`| (initial)| `<SVGLength: 0>` |
+| `y2=(empty array)`| (initial)| `<SVGLength: 0>` |
+| `y2=(object)`| (initial)| `<SVGLength: 0>` |
+| `y2=(numeric string)`| (changed)| `<SVGLength: 42>` |
+| `y2=(-1)`| (changed)| `<SVGLength: -1>` |
+| `y2=(0)`| (initial)| `<SVGLength: 0>` |
+| `y2=(integer)`| (changed)| `<SVGLength: 1>` |
+| `y2=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `y2=(float)`| (changed)| `<SVGLength: 99.99>` |
+| `y2=(true)`| (initial, warning)| `<SVGLength: 0>` |
+| `y2=(false)`| (initial, warning)| `<SVGLength: 0>` |
+| `y2=(string 'true')`| (initial)| `<SVGLength: 0>` |
+| `y2=(string 'false')`| (initial)| `<SVGLength: 0>` |
+| `y2=(string 'on')`| (initial)| `<SVGLength: 0>` |
+| `y2=(string 'off')`| (initial)| `<SVGLength: 0>` |
+| `y2=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
+| `y2=(function)`| (initial, warning)| `<SVGLength: 0>` |
+| `y2=(null)`| (initial)| `<SVGLength: 0>` |
+| `y2=(undefined)`| (initial)| `<SVGLength: 0>` |
+
+## `yChannelSelector` (on `<feDisplacementMap>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `yChannelSelector=(string)`| (changed)| `<number: 3>` |
+| `yChannelSelector=(empty string)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(array with string)`| (changed)| `<number: 3>` |
+| `yChannelSelector=(empty array)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(object)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(numeric string)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(-1)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(0)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(integer)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(NaN)`| (initial, warning)| `<number: 4>` |
+| `yChannelSelector=(float)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(true)`| (initial, warning)| `<number: 4>` |
+| `yChannelSelector=(false)`| (initial, warning)| `<number: 4>` |
+| `yChannelSelector=(string 'true')`| (initial)| `<number: 4>` |
+| `yChannelSelector=(string 'false')`| (initial)| `<number: 4>` |
+| `yChannelSelector=(string 'on')`| (initial)| `<number: 4>` |
+| `yChannelSelector=(string 'off')`| (initial)| `<number: 4>` |
+| `yChannelSelector=(symbol)`| (initial, warning)| `<number: 4>` |
+| `yChannelSelector=(function)`| (initial, warning)| `<number: 4>` |
+| `yChannelSelector=(null)`| (initial)| `<number: 4>` |
+| `yChannelSelector=(undefined)`| (initial)| `<number: 4>` |
+
+## `z` (on `<fePointLight>` inside `<svg>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `z=(string)`| (initial)| `<number: 0>` |
+| `z=(empty string)`| (initial)| `<number: 0>` |
+| `z=(array with string)`| (initial)| `<number: 0>` |
+| `z=(empty array)`| (initial)| `<number: 0>` |
+| `z=(object)`| (initial)| `<number: 0>` |
+| `z=(numeric string)`| (changed)| `<number: 42>` |
+| `z=(-1)`| (changed)| `<number: -1>` |
+| `z=(0)`| (initial)| `<number: 0>` |
+| `z=(integer)`| (changed)| `<number: 1>` |
+| `z=(NaN)`| (initial, warning)| `<number: 0>` |
+| `z=(float)`| (changed)| `<number: 99.98999786376953>` |
+| `z=(true)`| (initial, warning)| `<number: 0>` |
+| `z=(false)`| (initial, warning)| `<number: 0>` |
+| `z=(string 'true')`| (initial)| `<number: 0>` |
+| `z=(string 'false')`| (initial)| `<number: 0>` |
+| `z=(string 'on')`| (initial)| `<number: 0>` |
+| `z=(string 'off')`| (initial)| `<number: 0>` |
+| `z=(symbol)`| (initial, warning)| `<number: 0>` |
+| `z=(function)`| (initial, warning)| `<number: 0>` |
+| `z=(null)`| (initial)| `<number: 0>` |
+| `z=(undefined)`| (initial)| `<number: 0>` |
+
+## `zoomAndPan` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `zoomAndPan=(string)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(empty string)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(array with string)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(empty array)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(object)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(numeric string)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(-1)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(0)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(integer)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(NaN)`| (changed, warning)| `<number: 0>` |
+| `zoomAndPan=(float)`| (changed)| `<number: 0>` |
+| `zoomAndPan=(true)`| (initial, warning)| `<number: 2>` |
+| `zoomAndPan=(false)`| (initial, warning)| `<number: 2>` |
+| `zoomAndPan=(string 'true')`| (changed)| `<number: 0>` |
+| `zoomAndPan=(string 'false')`| (changed)| `<number: 0>` |
+| `zoomAndPan=(string 'on')`| (changed)| `<number: 0>` |
+| `zoomAndPan=(string 'off')`| (changed)| `<number: 0>` |
+| `zoomAndPan=(symbol)`| (initial, warning)| `<number: 2>` |
+| `zoomAndPan=(function)`| (initial, warning)| `<number: 2>` |
+| `zoomAndPan=(null)`| (initial)| `<number: 2>` |
+| `zoomAndPan=(undefined)`| (initial)| `<number: 2>` |
+
diff --git a/fixtures/attribute-behavior/README.md b/fixtures/attribute-behavior/README.md
new file mode 100644
index 00000000000..9a5ec79bce4
--- /dev/null
+++ b/fixtures/attribute-behavior/README.md
@@ -0,0 +1,30 @@
+# Attribute Behavior Fixture
+
+**WIP:** This is an MVP, still needs polish.
+
+### Known Issues
+- There are currently two errors thrown when the page loads;
+  `SyntaxError: missing ; before statement`
+
+## Instructions
+
+`yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn dev`
+
+## Interpretation
+
+Each row is an attribute which could be set on some DOM component. Some of
+them are invalid or mis-capitalized or mixed up versions of real ones.
+Each column is a value which can be passed to that attribute.
+Every cell has a box on the left and a box on the right.
+The left box shows the property (or attribute) assigned by the latest stable release of React, and the
+right box shows the property (or attribute) assigned by the locally built version of React.
+
+Right now, we use a purple outline to call out cases where the assigned property
+(or attribute) has changed between React 15 and 16.
+
+---
+
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+You can find the guide for how to do things in a CRA [here](https://github.com/facebook/create-react-app/blob/main/packages/cra-template/template/README.md).
diff --git a/fixtures/attribute-behavior/package.json b/fixtures/attribute-behavior/package.json
new file mode 100644
index 00000000000..345fd34a8d9
--- /dev/null
+++ b/fixtures/attribute-behavior/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "attribute-behavior",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "file-saver": "^1.3.3",
+    "glamor": "^2.20.40",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-scripts": "1.0.11",
+    "react-virtualized": "^9.9.0"
+  },
+  "resolutions": {
+    "fsevents": "1.2.13"
+  },
+  "scripts": {
+    "predev":
+      "cp ../../build/oss-experimental/react/umd/react.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js public/",
+    "dev": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/docs/favicon.ico b/fixtures/attribute-behavior/public/favicon.ico
similarity index 100%
rename from docs/favicon.ico
rename to fixtures/attribute-behavior/public/favicon.ico
diff --git a/fixtures/attribute-behavior/public/index.html b/fixtures/attribute-behavior/public/index.html
new file mode 100644
index 00000000000..9bfa8e8098e
--- /dev/null
+++ b/fixtures/attribute-behavior/public/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <div id="popover-target" popover="auto"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/fixtures/attribute-behavior/public/manifest.json b/fixtures/attribute-behavior/public/manifest.json
new file mode 100644
index 00000000000..be607e41771
--- /dev/null
+++ b/fixtures/attribute-behavior/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/fixtures/attribute-behavior/src/App.js b/fixtures/attribute-behavior/src/App.js
new file mode 100644
index 00000000000..ad6e863e1fa
--- /dev/null
+++ b/fixtures/attribute-behavior/src/App.js
@@ -0,0 +1,1055 @@
+import React from 'react';
+import {createElement} from 'glamor/react'; // eslint-disable-line
+/* @jsx createElement */
+
+import {MultiGrid, AutoSizer} from 'react-virtualized';
+import 'react-virtualized/styles.css';
+import FileSaver from 'file-saver';
+
+import {
+  inject as injectErrorOverlay,
+  uninject as uninjectErrorOverlay,
+} from 'react-error-overlay/lib/overlay';
+
+import attributes from './attributes';
+
+const types = [
+  {
+    name: 'string',
+    testValue: 'a string',
+    testDisplayValue: "'a string'",
+  },
+  {
+    name: 'empty string',
+    testValue: '',
+    testDisplayValue: "''",
+  },
+  {
+    name: 'array with string',
+    testValue: ['string'],
+    testDisplayValue: "['string']",
+  },
+  {
+    name: 'empty array',
+    testValue: [],
+    testDisplayValue: '[]',
+  },
+  {
+    name: 'object',
+    testValue: {
+      toString() {
+        return 'result of toString()';
+      },
+    },
+    testDisplayValue: "{ toString() { return 'result of toString()'; } }",
+  },
+  {
+    name: 'numeric string',
+    testValue: '42',
+    displayValue: "'42'",
+  },
+  {
+    name: '-1',
+    testValue: -1,
+  },
+  {
+    name: '0',
+    testValue: 0,
+  },
+  {
+    name: 'integer',
+    testValue: 1,
+  },
+  {
+    name: 'NaN',
+    testValue: NaN,
+  },
+  {
+    name: 'float',
+    testValue: 99.99,
+  },
+  {
+    name: 'true',
+    testValue: true,
+  },
+  {
+    name: 'false',
+    testValue: false,
+  },
+  {
+    name: "string 'true'",
+    testValue: 'true',
+    displayValue: "'true'",
+  },
+  {
+    name: "string 'false'",
+    testValue: 'false',
+    displayValue: "'false'",
+  },
+  {
+    name: "string 'on'",
+    testValue: 'on',
+    displayValue: "'on'",
+  },
+  {
+    name: "string 'off'",
+    testValue: 'off',
+    displayValue: "'off'",
+  },
+  {
+    name: 'symbol',
+    testValue: Symbol('foo'),
+    testDisplayValue: "Symbol('foo')",
+  },
+  {
+    name: 'function',
+    testValue: function f() {},
+  },
+  {
+    name: 'null',
+    testValue: null,
+  },
+  {
+    name: 'undefined',
+    testValue: undefined,
+  },
+];
+
+const ALPHABETICAL = 'alphabetical';
+const REV_ALPHABETICAL = 'reverse_alphabetical';
+const GROUPED_BY_ROW_PATTERN = 'grouped_by_row_pattern';
+
+const ALL = 'all';
+const COMPLETE = 'complete';
+const INCOMPLETE = 'incomplete';
+
+function getCanonicalizedValue(value) {
+  switch (typeof value) {
+    case 'undefined':
+      return '<undefined>';
+    case 'object':
+      if (value === null) {
+        return '<null>';
+      }
+      if ('baseVal' in value) {
+        return getCanonicalizedValue(value.baseVal);
+      }
+      if (value instanceof SVGLength) {
+        return '<SVGLength: ' + value.valueAsString + '>';
+      }
+      if (value instanceof SVGRect) {
+        return (
+          '<SVGRect: ' +
+          [value.x, value.y, value.width, value.height].join(',') +
+          '>'
+        );
+      }
+      if (value instanceof SVGPreserveAspectRatio) {
+        return (
+          '<SVGPreserveAspectRatio: ' +
+          value.align +
+          '/' +
+          value.meetOrSlice +
+          '>'
+        );
+      }
+      if (value instanceof SVGNumber) {
+        return value.value;
+      }
+      if (value instanceof SVGMatrix) {
+        return (
+          '<SVGMatrix ' +
+          value.a +
+          ' ' +
+          value.b +
+          ' ' +
+          value.c +
+          ' ' +
+          value.d +
+          ' ' +
+          value.e +
+          ' ' +
+          value.f +
+          '>'
+        );
+      }
+      if (value instanceof SVGTransform) {
+        return (
+          getCanonicalizedValue(value.matrix) +
+          '/' +
+          value.type +
+          '/' +
+          value.angle
+        );
+      }
+      if (typeof value.length === 'number') {
+        return (
+          '[' +
+          Array.from(value)
+            .map(v => getCanonicalizedValue(v))
+            .join(', ') +
+          ']'
+        );
+      }
+      let name = (value.constructor && value.constructor.name) || 'object';
+      return '<' + name + '>';
+    case 'function':
+      return '<function>';
+    case 'symbol':
+      return '<symbol>';
+    case 'number':
+      return `<number: ${value}>`;
+    case 'string':
+      if (value === '') {
+        return '<empty string>';
+      }
+      return '"' + value + '"';
+    case 'boolean':
+      return `<boolean: ${value}>`;
+    default:
+      throw new Error('Switch statement should be exhaustive.');
+  }
+}
+
+let _didWarn = false;
+function warn(str) {
+  _didWarn = true;
+}
+
+/**
+ * @param {import('react-dom/server')} serverRenderer
+ */
+async function renderToString(serverRenderer, element) {
+  let didError = false;
+  const stream = await serverRenderer.renderToReadableStream(element, {
+    onError(error) {
+      didError = true;
+      console.error(error);
+    },
+  });
+  await stream.allReady;
+
+  if (didError) {
+    throw new Error('The above error occurred while rendering to string.');
+  }
+
+  const response = new Response(stream);
+  return response.text();
+}
+
+const UNKNOWN_HTML_TAGS = new Set(['keygen', 'time', 'command']);
+async function getRenderedAttributeValue(
+  react,
+  renderer,
+  serverRenderer,
+  attribute,
+  type
+) {
+  const originalConsoleError = console.error;
+  console.error = warn;
+
+  const containerTagName = attribute.containerTagName || 'div';
+  const tagName = attribute.tagName || 'div';
+
+  function createContainer() {
+    if (containerTagName === 'svg') {
+      return document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    } else if (containerTagName === 'document') {
+      return document.implementation.createHTMLDocument('');
+    } else if (containerTagName === 'head') {
+      return document.implementation.createHTMLDocument('').head;
+    } else {
+      return document.createElement(containerTagName);
+    }
+  }
+
+  const read = attribute.read;
+  let testValue = type.testValue;
+  if (attribute.overrideStringValue !== undefined) {
+    switch (type.name) {
+      case 'string':
+        testValue = attribute.overrideStringValue;
+        break;
+      case 'array with string':
+        testValue = [attribute.overrideStringValue];
+        break;
+      default:
+        break;
+    }
+  }
+  let baseProps = {
+    ...attribute.extraProps,
+  };
+  if (attribute.type) {
+    baseProps.type = attribute.type;
+  }
+  const props = {
+    ...baseProps,
+    [attribute.name]: testValue,
+  };
+
+  let defaultValue;
+  let canonicalDefaultValue;
+  let result;
+  let canonicalResult;
+  let ssrResult;
+  let canonicalSsrResult;
+  let didWarn;
+  let didError;
+  let ssrDidWarn;
+  let ssrDidError;
+
+  _didWarn = false;
+  try {
+    let container = createContainer();
+    renderer.flushSync(() => {
+      renderer
+        .createRoot(container)
+        .render(react.createElement(tagName, baseProps));
+    });
+    defaultValue = read(container.lastChild);
+    canonicalDefaultValue = getCanonicalizedValue(defaultValue);
+
+    container = createContainer();
+
+    renderer.flushSync(() => {
+      renderer
+        .createRoot(container)
+        .render(react.createElement(tagName, props));
+    });
+    result = read(container.lastChild);
+    canonicalResult = getCanonicalizedValue(result);
+    didWarn = _didWarn;
+    didError = false;
+  } catch (error) {
+    result = null;
+    didWarn = _didWarn;
+    didError = true;
+  }
+
+  _didWarn = false;
+  let hasTagMismatch = false;
+  let hasUnknownElement = false;
+  try {
+    let container;
+    if (containerTagName === 'document') {
+      const html = await renderToString(
+        serverRenderer,
+        react.createElement(tagName, props)
+      );
+      container = createContainer();
+      container.innerHTML = html;
+    } else if (containerTagName === 'head') {
+      const html = await renderToString(
+        serverRenderer,
+        react.createElement(tagName, props)
+      );
+      container = createContainer();
+      container.innerHTML = html;
+    } else {
+      const html = await renderToString(
+        serverRenderer,
+        react.createElement(
+          containerTagName,
+          null,
+          react.createElement(tagName, props)
+        )
+      );
+      const outerContainer = document.createElement('div');
+      outerContainer.innerHTML = html;
+      // Float may prepend `<link />`
+      container = outerContainer.lastChild;
+    }
+
+    if (
+      !container.lastChild ||
+      container.lastChild.tagName.toLowerCase() !== tagName.toLowerCase()
+    ) {
+      hasTagMismatch = true;
+    }
+
+    if (
+      container.lastChild instanceof HTMLUnknownElement &&
+      !UNKNOWN_HTML_TAGS.has(container.lastChild.tagName.toLowerCase())
+    ) {
+      hasUnknownElement = true;
+    }
+
+    ssrResult = read(container.lastChild);
+    canonicalSsrResult = getCanonicalizedValue(ssrResult);
+    ssrDidWarn = _didWarn;
+    ssrDidError = false;
+  } catch (error) {
+    ssrResult = null;
+    ssrDidWarn = _didWarn;
+    ssrDidError = true;
+  }
+
+  console.error = originalConsoleError;
+
+  if (hasTagMismatch) {
+    throw new Error('Tag mismatch. Expected: ' + tagName);
+  }
+  if (hasUnknownElement) {
+    throw new Error('Unexpected unknown element: ' + tagName);
+  }
+
+  let ssrHasSameBehavior;
+  let ssrHasSameBehaviorExceptWarnings;
+  if (didError && ssrDidError) {
+    ssrHasSameBehavior = true;
+  } else if (!didError && !ssrDidError) {
+    if (canonicalResult === canonicalSsrResult) {
+      ssrHasSameBehaviorExceptWarnings = true;
+      ssrHasSameBehavior = didWarn === ssrDidWarn;
+    }
+    ssrHasSameBehavior =
+      didWarn === ssrDidWarn && canonicalResult === canonicalSsrResult;
+  } else {
+    ssrHasSameBehavior = false;
+  }
+
+  return {
+    tagName,
+    containerTagName,
+    testValue,
+    defaultValue,
+    result,
+    canonicalResult,
+    canonicalDefaultValue,
+    didWarn,
+    didError,
+    ssrResult,
+    canonicalSsrResult,
+    ssrDidWarn,
+    ssrDidError,
+    ssrHasSameBehavior,
+    ssrHasSameBehaviorExceptWarnings,
+  };
+}
+
+async function prepareState(initGlobals) {
+  async function getRenderedAttributeValues(attribute, type) {
+    const {
+      ReactStable,
+      ReactDOMStable,
+      ReactDOMServerStable,
+      ReactNext,
+      ReactDOMNext,
+      ReactDOMServerNext,
+    } = initGlobals(attribute, type);
+    const reactStableValue = await getRenderedAttributeValue(
+      ReactStable,
+      ReactDOMStable,
+      ReactDOMServerStable,
+      attribute,
+      type
+    );
+    const reactNextValue = await getRenderedAttributeValue(
+      ReactNext,
+      ReactDOMNext,
+      ReactDOMServerNext,
+      attribute,
+      type
+    );
+
+    let hasSameBehavior;
+    if (reactStableValue.didError && reactNextValue.didError) {
+      hasSameBehavior = true;
+    } else if (!reactStableValue.didError && !reactNextValue.didError) {
+      hasSameBehavior =
+        reactStableValue.didWarn === reactNextValue.didWarn &&
+        reactStableValue.canonicalResult === reactNextValue.canonicalResult &&
+        reactStableValue.ssrHasSameBehavior ===
+          reactNextValue.ssrHasSameBehavior;
+    } else {
+      hasSameBehavior = false;
+    }
+
+    return {
+      reactStable: reactStableValue,
+      reactNext: reactNextValue,
+      hasSameBehavior,
+    };
+  }
+
+  const table = new Map();
+  const rowPatternHashes = new Map();
+
+  // Disable error overlay while testing each attribute
+  uninjectErrorOverlay();
+  for (let attribute of attributes) {
+    const results = new Map();
+    let hasSameBehaviorForAll = true;
+    let rowPatternHash = '';
+    for (let type of types) {
+      const result = await getRenderedAttributeValues(attribute, type);
+      results.set(type.name, result);
+      if (!result.hasSameBehavior) {
+        hasSameBehaviorForAll = false;
+      }
+      rowPatternHash += [result.reactStable, result.reactNext]
+        .map(res =>
+          [
+            res.canonicalResult,
+            res.canonicalDefaultValue,
+            res.didWarn,
+            res.didError,
+          ].join('||')
+        )
+        .join('||');
+    }
+    const row = {
+      results,
+      hasSameBehaviorForAll,
+      rowPatternHash,
+      // "Good enough" id that we can store in localStorage
+      rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,
+    };
+    const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();
+    rowGroup.add(row);
+    rowPatternHashes.set(rowPatternHash, rowGroup);
+    table.set(attribute, row);
+  }
+
+  // Renable error overlay
+  injectErrorOverlay();
+
+  return {
+    table,
+    rowPatternHashes,
+  };
+}
+
+const successColor = 'white';
+const warnColor = 'yellow';
+const errorColor = 'red';
+
+function RendererResult({
+  result,
+  canonicalResult,
+  defaultValue,
+  canonicalDefaultValue,
+  didWarn,
+  didError,
+  ssrHasSameBehavior,
+  ssrHasSameBehaviorExceptWarnings,
+}) {
+  let backgroundColor;
+  if (didError) {
+    backgroundColor = errorColor;
+  } else if (didWarn) {
+    backgroundColor = warnColor;
+  } else if (canonicalResult !== canonicalDefaultValue) {
+    backgroundColor = 'cyan';
+  } else {
+    backgroundColor = successColor;
+  }
+
+  let style = {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    backgroundColor,
+  };
+
+  if (!ssrHasSameBehavior) {
+    const color = ssrHasSameBehaviorExceptWarnings ? 'gray' : 'magenta';
+    style.border = `3px dotted ${color}`;
+  }
+
+  return <div css={style}>{canonicalResult}</div>;
+}
+
+function ResultPopover(props) {
+  return (
+    <pre
+      css={{
+        padding: '1em',
+        minWidth: '25em',
+      }}>
+      {JSON.stringify(
+        {
+          reactStable: props.reactStable,
+          reactNext: props.reactNext,
+          hasSameBehavior: props.hasSameBehavior,
+        },
+        null,
+        2
+      )}
+    </pre>
+  );
+}
+
+class Result extends React.Component {
+  state = {showInfo: false};
+  onMouseEnter = () => {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.timeout = setTimeout(() => {
+      this.setState({showInfo: true});
+    }, 250);
+  };
+  onMouseLeave = () => {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.setState({showInfo: false});
+  };
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.interval);
+    }
+  }
+
+  render() {
+    const {reactStable, reactNext, hasSameBehavior} = this.props;
+    const style = {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+    };
+
+    let highlight = null;
+    let popover = null;
+    if (this.state.showInfo) {
+      highlight = (
+        <div
+          css={{
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            border: '2px solid blue',
+          }}
+        />
+      );
+
+      popover = (
+        <div
+          css={{
+            backgroundColor: 'white',
+            border: '1px solid black',
+            position: 'absolute',
+            top: '100%',
+            zIndex: 999,
+          }}>
+          <ResultPopover {...this.props} />
+        </div>
+      );
+    }
+
+    if (!hasSameBehavior) {
+      style.border = '4px solid purple';
+    }
+    return (
+      <div
+        css={style}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}>
+        <div css={{position: 'absolute', width: '50%', height: '100%'}}>
+          <RendererResult {...reactStable} />
+        </div>
+        <div
+          css={{
+            position: 'absolute',
+            width: '50%',
+            left: '50%',
+            height: '100%',
+          }}>
+          <RendererResult {...reactNext} />
+        </div>
+        {highlight}
+        {popover}
+      </div>
+    );
+  }
+}
+
+function ColumnHeader({children}) {
+  return (
+    <div
+      css={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}>
+      {children}
+    </div>
+  );
+}
+
+function RowHeader({children, checked, onChange}) {
+  return (
+    <div
+      css={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}>
+      <input type="checkbox" checked={checked} onChange={onChange} />
+      {children}
+    </div>
+  );
+}
+
+function CellContent(props) {
+  const {
+    columnIndex,
+    rowIndex,
+    attributesInSortedOrder,
+    completedHashes,
+    toggleAttribute,
+    table,
+  } = props;
+  const attribute = attributesInSortedOrder[rowIndex - 1];
+  const type = types[columnIndex - 1];
+
+  if (columnIndex === 0) {
+    if (rowIndex === 0) {
+      return null;
+    }
+    const row = table.get(attribute);
+    const rowPatternHash = row.rowPatternHash;
+    return (
+      <RowHeader
+        checked={completedHashes.has(rowPatternHash)}
+        onChange={() => toggleAttribute(rowPatternHash)}>
+        {row.hasSameBehaviorForAll ? (
+          attribute.name
+        ) : (
+          <b css={{color: 'purple'}}>{attribute.name}</b>
+        )}
+      </RowHeader>
+    );
+  }
+
+  if (rowIndex === 0) {
+    return <ColumnHeader>{type.name}</ColumnHeader>;
+  }
+
+  const row = table.get(attribute);
+  const result = row.results.get(type.name);
+
+  return <Result {...result} />;
+}
+
+function saveToLocalStorage(completedHashes) {
+  const str = JSON.stringify([...completedHashes]);
+  localStorage.setItem('completedHashes', str);
+}
+
+function restoreFromLocalStorage() {
+  const str = localStorage.getItem('completedHashes');
+  if (str) {
+    const completedHashes = new Set(JSON.parse(str));
+    return completedHashes;
+  }
+  return new Set();
+}
+
+const useFastMode = /[?&]fast\b/.test(window.location.href);
+
+class App extends React.Component {
+  state = {
+    sortOrder: ALPHABETICAL,
+    filter: ALL,
+    completedHashes: restoreFromLocalStorage(),
+    table: null,
+    rowPatternHashes: null,
+  };
+
+  renderCell = ({key, ...props}) => {
+    return (
+      <div key={key} style={props.style}>
+        <CellContent
+          toggleAttribute={this.toggleAttribute}
+          completedHashes={this.state.completedHashes}
+          table={this.state.table}
+          attributesInSortedOrder={this.attributes}
+          {...props}
+        />
+      </div>
+    );
+  };
+
+  onUpdateSort = e => {
+    this.setState({sortOrder: e.target.value});
+  };
+
+  onUpdateFilter = e => {
+    this.setState({filter: e.target.value});
+  };
+
+  toggleAttribute = rowPatternHash => {
+    const completedHashes = new Set(this.state.completedHashes);
+    if (completedHashes.has(rowPatternHash)) {
+      completedHashes.delete(rowPatternHash);
+    } else {
+      completedHashes.add(rowPatternHash);
+    }
+    this.setState({completedHashes}, () => saveToLocalStorage(completedHashes));
+  };
+
+  async componentDidMount() {
+    const sources = {
+      ReactStable: 'https://unpkg.com/react@latest/umd/react.development.js',
+      ReactDOMStable:
+        'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',
+      ReactDOMServerStable:
+        'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
+      ReactNext: '/react.development.js',
+      ReactDOMNext: '/react-dom.development.js',
+      ReactDOMServerNext: '/react-dom-server.browser.development.js',
+    };
+    const codePromises = Object.values(sources).map(src =>
+      fetch(src).then(res => res.text())
+    );
+    const codesByIndex = await Promise.all(codePromises);
+
+    const pool = [];
+    function initGlobals(attribute, type) {
+      if (useFastMode) {
+        // Note: this is not giving correct results for warnings.
+        // But it's much faster.
+        if (pool[0]) {
+          return pool[0].globals;
+        }
+      } else {
+        document.title = `${attribute.name} (${type.name})`;
+      }
+
+      // Creating globals for every single test is too slow.
+      // However caching them between runs won't work for the same attribute names
+      // because warnings will be deduplicated. As a result, we only share globals
+      // between different attribute names.
+      for (let i = 0; i < pool.length; i++) {
+        if (!pool[i].testedAttributes.has(attribute.name)) {
+          pool[i].testedAttributes.add(attribute.name);
+          return pool[i].globals;
+        }
+      }
+
+      let globals = {};
+      Object.keys(sources).forEach((name, i) => {
+        eval.call(window, codesByIndex[i]); // eslint-disable-line
+        globals[name] = window[name.replace(/Stable|Next/g, '')];
+      });
+
+      // Cache for future use (for different attributes).
+      pool.push({
+        globals,
+        testedAttributes: new Set([attribute.name]),
+      });
+
+      return globals;
+    }
+
+    const {table, rowPatternHashes} = await prepareState(initGlobals);
+    document.title = 'Ready';
+
+    this.setState({
+      table,
+      rowPatternHashes,
+    });
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+    if (
+      nextState.sortOrder !== this.state.sortOrder ||
+      nextState.filter !== this.state.filter ||
+      nextState.completedHashes !== this.state.completedHashes ||
+      nextState.table !== this.state.table
+    ) {
+      this.attributes = this.getAttributes(
+        nextState.table,
+        nextState.rowPatternHashes,
+        nextState.sortOrder,
+        nextState.filter,
+        nextState.completedHashes
+      );
+      if (this.grid) {
+        this.grid.forceUpdateGrids();
+      }
+    }
+  }
+
+  getAttributes(table, rowPatternHashes, sortOrder, filter, completedHashes) {
+    // Filter
+    let filteredAttributes;
+    switch (filter) {
+      case ALL:
+        filteredAttributes = attributes.filter(() => true);
+        break;
+      case COMPLETE:
+        filteredAttributes = attributes.filter(attribute => {
+          const row = table.get(attribute);
+          return completedHashes.has(row.rowPatternHash);
+        });
+        break;
+      case INCOMPLETE:
+        filteredAttributes = attributes.filter(attribute => {
+          const row = table.get(attribute);
+          return !completedHashes.has(row.rowPatternHash);
+        });
+        break;
+      default:
+        throw new Error('Switch statement should be exhaustive');
+    }
+
+    // Sort
+    switch (sortOrder) {
+      case ALPHABETICAL:
+        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
+        );
+      case GROUPED_BY_ROW_PATTERN: {
+        return filteredAttributes.sort((attr1, attr2) => {
+          const row1 = table.get(attr1);
+          const row2 = table.get(attr2);
+          const patternGroup1 = rowPatternHashes.get(row1.rowPatternHash);
+          const patternGroupSize1 = (patternGroup1 && patternGroup1.size) || 0;
+          const patternGroup2 = rowPatternHashes.get(row2.rowPatternHash);
+          const patternGroupSize2 = (patternGroup2 && patternGroup2.size) || 0;
+          return patternGroupSize2 - patternGroupSize1;
+        });
+      }
+      default:
+        throw new Error('Switch statement should be exhaustive');
+    }
+  }
+
+  handleSaveClick = e => {
+    e.preventDefault();
+
+    if (useFastMode) {
+      alert(
+        'Fast mode is not accurate. Please remove ?fast from the query string, and reload.'
+      );
+      return;
+    }
+
+    let log = '';
+    for (let attribute of attributes) {
+      log += `## \`${attribute.name}\` (on \`<${
+        attribute.tagName || 'div'
+      }>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
+      log += '| Test Case | Flags | Result |\n';
+      log += '| --- | --- | --- |\n';
+
+      const attributeResults = this.state.table.get(attribute).results;
+      for (let type of types) {
+        const {
+          didError,
+          didWarn,
+          canonicalResult,
+          canonicalDefaultValue,
+          ssrDidError,
+          ssrHasSameBehavior,
+          ssrHasSameBehaviorExceptWarnings,
+        } = attributeResults.get(type.name).reactNext;
+
+        let descriptions = [];
+        if (canonicalResult === canonicalDefaultValue) {
+          descriptions.push('initial');
+        } else {
+          descriptions.push('changed');
+        }
+        if (didError) {
+          descriptions.push('error');
+        }
+        if (didWarn) {
+          descriptions.push('warning');
+        }
+        if (ssrDidError) {
+          descriptions.push('ssr error');
+        }
+        if (!ssrHasSameBehavior) {
+          if (ssrHasSameBehaviorExceptWarnings) {
+            descriptions.push('ssr warning');
+          } else {
+            descriptions.push('ssr mismatch');
+          }
+        }
+        log +=
+          `| \`${attribute.name}=(${type.name})\`` +
+          `| (${descriptions.join(', ')})` +
+          `| \`${canonicalResult || ''}\` |\n`;
+      }
+      log += '\n';
+    }
+
+    const blob = new Blob([log], {type: 'text/plain;charset=utf-8'});
+    FileSaver.saveAs(blob, 'AttributeTableSnapshot.md');
+  };
+
+  render() {
+    if (!this.state.table) {
+      return (
+        <div>
+          <h1>Loading...</h1>
+          {!useFastMode && (
+            <h3>The progress is reported in the window title.</h3>
+          )}
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div>
+          <select value={this.state.sortOrder} onChange={this.onUpdateSort}>
+            <option value={ALPHABETICAL}>alphabetical</option>
+            <option value={REV_ALPHABETICAL}>reverse alphabetical</option>
+            <option value={GROUPED_BY_ROW_PATTERN}>
+              grouped by row pattern :)
+            </option>
+          </select>
+          <select value={this.state.filter} onChange={this.onUpdateFilter}>
+            <option value={ALL}>all</option>
+            <option value={INCOMPLETE}>incomplete</option>
+            <option value={COMPLETE}>complete</option>
+          </select>
+          <button style={{marginLeft: '10px'}} onClick={this.handleSaveClick}>
+            Save latest results to a file{' '}
+            <span role="img" aria-label="Save">
+              💾
+            </span>
+          </button>
+        </div>
+        <AutoSizer disableHeight={true}>
+          {({width}) => (
+            <MultiGrid
+              ref={input => {
+                this.grid = input;
+              }}
+              cellRenderer={this.renderCell}
+              columnWidth={200}
+              columnCount={1 + types.length}
+              fixedColumnCount={1}
+              enableFixedColumnScroll={true}
+              enableFixedRowScroll={true}
+              height={1200}
+              rowHeight={40}
+              rowCount={this.attributes.length + 1}
+              fixedRowCount={1}
+              width={width}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/fixtures/attribute-behavior/src/App.test.js b/fixtures/attribute-behavior/src/App.test.js
new file mode 100644
index 00000000000..b84af98d720
--- /dev/null
+++ b/fixtures/attribute-behavior/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
new file mode 100644
index 00000000000..9427cf16998
--- /dev/null
+++ b/fixtures/attribute-behavior/src/attributes.js
@@ -0,0 +1,2399 @@
+function getProperty(propertyName) {
+  return el => el[propertyName];
+}
+
+function getAttribute(attributeName) {
+  return el => {
+    if (el.namespaceURI === '') {
+      throw new Error('Not an HTML element.');
+    }
+    return el.getAttribute(attributeName);
+  };
+}
+
+function getSVGProperty(propertyName) {
+  return el => el[propertyName];
+}
+
+function getSVGAttribute(attributeName) {
+  return el => {
+    if (el.namespaceURI !== 'http://www.w3.org/2000/svg') {
+      throw new Error('Not an SVG element.');
+    }
+    return el.getAttribute(attributeName);
+  };
+}
+
+const attributes = [
+  {name: 'about', read: getAttribute('about')},
+  {name: 'aBoUt', read: getAttribute('about')},
+  {
+    name: 'accent-Height',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('accent-height'),
+  },
+  {
+    name: 'accent-height',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('accent-height'),
+  },
+  {
+    name: 'accentHeight',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('accent-height'),
+  },
+  {name: 'accept', tagName: 'input'},
+  {name: 'accept-charset', tagName: 'form', read: getProperty('acceptCharset')},
+  {name: 'accept-Charset', tagName: 'form', read: getProperty('acceptCharset')},
+  {name: 'acceptCharset', tagName: 'form'},
+  {name: 'accessKey'},
+  {
+    name: 'accumulate',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('accumulate'),
+  },
+  {name: 'action', tagName: 'form', overrideStringValue: 'https://reactjs.com'},
+  {
+    name: 'additive',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('additive'),
+  },
+  {
+    name: 'alignment-baseline',
+    containerTagName: 'svg',
+    tagName: 'textPath',
+    read: getSVGAttribute('alignment-baseline'),
+  },
+  {
+    name: 'alignmentBaseline',
+    containerTagName: 'svg',
+    tagName: 'textPath',
+    read: getSVGAttribute('alignment-baseline'),
+  },
+  {
+    name: 'allowFullScreen',
+    tagName: 'iframe',
+    read: getProperty('allowFullscreen'),
+  },
+  {
+    name: 'allowfullscreen',
+    tagName: 'iframe',
+    read: getProperty('allowFullscreen'),
+  },
+  {name: 'allowFullscreen', tagName: 'iframe'},
+  {
+    name: 'allowReorder',
+    containerTagName: 'svg',
+    tagName: 'switch',
+    read: getSVGAttribute('allowReorder'),
+  },
+  {
+    name: 'alphabetic',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('alphabetic'),
+  },
+  {name: 'alt', tagName: 'img'},
+  {
+    name: 'amplitude',
+    containerTagName: 'svg',
+    tagName: 'feFuncA',
+    read: getSVGProperty('amplitude'),
+  },
+  {
+    name: 'arabic-form',
+    containerTagName: 'svg',
+    tagName: 'glyph',
+    read: getSVGAttribute('arabic-form'),
+  },
+  {
+    name: 'arabicForm',
+    containerTagName: 'svg',
+    tagName: 'glyph',
+    read: getSVGAttribute('arabic-form'),
+  },
+  {name: 'aria', read: getAttribute('aria')},
+  {name: 'aria-', read: getAttribute('aria-')},
+  {name: 'aria-hidden', read: getProperty('ariaHidden')},
+  {name: 'aria-invalidattribute', read: getAttribute('aria-invalidattribute')},
+  {name: 'as', tagName: 'link'},
+  {
+    name: 'ascent',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('ascent'),
+  },
+  {name: 'async', tagName: 'script'},
+  {
+    name: 'attributeName',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('attributeName'),
+  },
+  {
+    name: 'attributeType',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('attributeType'),
+  },
+  {
+    name: 'autoCapitalize',
+    tagName: 'input',
+    read: getProperty('autocapitalize'),
+    overrideStringValue: 'words',
+  },
+  {
+    name: 'autoComplete',
+    tagName: 'input',
+    overrideStringValue: 'email',
+    read: getProperty('autocomplete'),
+  },
+  {
+    name: 'autoCorrect',
+    tagName: 'input',
+    overrideStringValue: 'off',
+    read: getAttribute('autocorrect'),
+  },
+  {name: 'autoPlay', tagName: 'video', read: getProperty('autoplay')},
+  {
+    name: 'autoReverse',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('autoreverse'),
+  },
+  {name: 'autoSave', tagName: 'input', read: getAttribute('autosave')},
+  {
+    name: 'azimuth',
+    containerTagName: 'svg',
+    tagName: 'feDistantLight',
+    read: getSVGProperty('azimuth'),
+  },
+  {
+    name: 'baseFrequency',
+    containerTagName: 'svg',
+    tagName: 'feTurbulence',
+    read: getSVGAttribute('baseFrequency'),
+  },
+  {
+    name: 'baseline-shift',
+    containerTagName: 'svg',
+    tagName: 'textPath',
+    read: getSVGAttribute('baseline-shift'),
+  },
+  {
+    name: 'baselineShift',
+    containerTagName: 'svg',
+    tagName: 'textPath',
+    read: getSVGAttribute('baseline-shift'),
+  },
+  {name: 'baseProfile', tagName: 'svg', read: getSVGAttribute('baseProfile')},
+  {
+    name: 'bbox',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('bbox'),
+  },
+  {
+    name: 'begin',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('begin'),
+  },
+  {
+    name: 'bias',
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+    read: getSVGProperty('bias'),
+  },
+  {
+    name: 'by',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('by'),
+  },
+  {
+    name: 'calcMode',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    overrideStringValue: 'discrete',
+    read: getSVGAttribute('calcMode'),
+  },
+  {
+    name: 'cap-height',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('cap-height'),
+  },
+  {
+    name: 'capHeight',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('cap-height'),
+  },
+  {
+    name: 'capture',
+    tagName: 'input',
+    overrideStringValue: 'environment',
+    read: getAttribute('capture'),
+  },
+  {name: 'cellPadding', tagName: 'table'},
+  {name: 'cellSpacing', tagName: 'table'},
+  {
+    name: 'challenge',
+    tagName: 'keygen',
+    read: getAttribute('challenge'), // The property is not supported in Chrome.
+  },
+  {name: 'charSet', tagName: 'script', read: getProperty('charset')},
+  {name: 'checked', tagName: 'input', extraProps: {onChange() {}}},
+  {name: 'Checked', tagName: 'input', read: getAttribute('Checked')},
+  {name: 'Children', read: getAttribute('children')},
+  {name: 'children'},
+  {
+    name: 'cite',
+    tagName: 'blockquote',
+    overrideStringValue: 'https://reactjs.com/',
+  },
+  {name: 'class', read: getAttribute('class')},
+  {name: 'classID', tagName: 'object', read: getAttribute('classid')},
+  {name: 'className'},
+  {name: 'clip', tagName: 'svg', read: getAttribute('clip')},
+  {
+    name: 'clip-path',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('clip-path'),
+  },
+  {
+    name: 'clipPath',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('clip-path'),
+  },
+  {
+    name: 'clipPathUnits',
+    containerTagName: 'svg',
+    tagName: 'clipPath',
+    overrideStringValue: 'objectBoundingBox',
+    read: getSVGProperty('clipPathUnits'),
+  },
+  {
+    name: 'clip-rule',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('clip-rule'),
+  },
+  {
+    name: 'clipRule',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('clip-rule'),
+  },
+  {
+    name: 'color',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('color'),
+  },
+  {
+    name: 'color-interpolation',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    overrideStringValue: 'sRGB',
+    read: getSVGAttribute('color-interpolation'),
+  },
+  {
+    name: 'colorInterpolation',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    overrideStringValue: 'sRGB',
+    read: getSVGAttribute('color-interpolation'),
+  },
+  {
+    name: 'color-interpolation-filters',
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+    overrideStringValue: 'sRGB',
+    read: getSVGAttribute('color-interpolation-filters'),
+  },
+  {
+    name: 'colorInterpolationFilters',
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+    overrideStringValue: 'sRGB',
+    read: getSVGAttribute('color-interpolation-filters'),
+  },
+  {
+    name: 'color-profile',
+    containerTagName: 'svg',
+    tagName: 'image',
+    overrideStringValue: 'sRGB',
+    read: getSVGAttribute('color-profile'),
+  },
+  {
+    name: 'colorProfile',
+    containerTagName: 'svg',
+    tagName: 'image',
+    overrideStringValue: 'sRGB',
+    read: getSVGAttribute('color-profile'),
+  },
+  {
+    name: 'color-rendering',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    overrideStringValue: 'optimizeSpeed',
+    read: getSVGAttribute('color-rendering'),
+  },
+  {
+    name: 'colorRendering',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    overrideStringValue: 'optimizeSpeed',
+    read: getSVGAttribute('color-rendering'),
+  },
+  {name: 'cols', tagName: 'textarea'},
+  {name: 'colSpan', containerTagName: 'tr', tagName: 'td'},
+  {name: 'content', containerTagName: 'head', tagName: 'meta'},
+  {name: 'contentEditable'},
+  {
+    name: 'contentScriptType',
+    tagName: 'svg',
+    read: getSVGAttribute('contentScriptType'),
+  },
+  {
+    name: 'contentStyleType',
+    tagName: 'svg',
+    read: getSVGAttribute('contentStyleType'),
+  },
+  {name: 'contextMenu', read: getAttribute('contextmenu')}, // TODO: Read the property by rendering a menu with the ID.
+  {name: 'controls', tagName: 'video'},
+  {name: 'coords', tagName: 'a'},
+  {name: 'crossOrigin', tagName: 'script'},
+  {name: 'cursor', tag: 'svg', read: getAttribute('cursor')},
+  {
+    name: 'cx',
+    containerTagName: 'svg',
+    tagName: 'circle',
+    overrideStringValue: '10px',
+    read: getSVGProperty('cx'),
+  },
+  {
+    name: 'cy',
+    containerTagName: 'svg',
+    tagName: 'circle',
+    overrideStringValue: '10%',
+    read: getSVGProperty('cy'),
+  },
+  {
+    name: 'd',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('d'),
+  },
+  {
+    name: 'dangerouslySetInnerHTML',
+    read: getAttribute('dangerouslySetInnerHTML'),
+  },
+  {
+    name: 'DangerouslySetInnerHTML',
+    read: getAttribute('DangerouslySetInnerHTML'),
+  },
+  {name: 'data', read: getAttribute('data')},
+  {name: 'data-', read: getAttribute('data-')},
+  {name: 'data-unknownattribute', read: getAttribute('data-unknownattribute')},
+  {name: 'datatype', read: getAttribute('datatype')},
+  {
+    name: 'dateTime',
+    tagName: 'time',
+    overrideStringValue: '2001-05-15T19:00',
+    read: getAttribute('datetime'),
+  },
+  {
+    name: 'decelerate',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('decelerate'),
+  },
+  {name: 'default', tagName: 'track'},
+  {
+    name: 'defaultchecked',
+    tagName: 'input',
+    read: getAttribute('defaultchecked'),
+  },
+  {name: 'defaultChecked', tagName: 'input'},
+  {name: 'defaultValue', tagName: 'input'},
+  {name: 'defaultValuE', tagName: 'input', read: getAttribute('defaultValuE')},
+  {name: 'defer', tagName: 'script'},
+  {
+    name: 'descent',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('descent'),
+  },
+  {
+    name: 'diffuseConstant',
+    containerTagName: 'svg',
+    tagName: 'feDiffuseLighting',
+    read: getSVGProperty('diffuseConstant'),
+  },
+  {name: 'dir', overrideStringValue: 'rtl'},
+  {
+    name: 'direction',
+    containerTagName: 'svg',
+    tagName: 'text',
+    overrideStringValue: 'rtl',
+    read: getSVGAttribute('direction'),
+  },
+  {name: 'disabled', tagName: 'input'},
+  {
+    name: 'disablePictureInPicture',
+    tagName: 'video',
+    read: getProperty('disablepictureinpicture'),
+  },
+  {
+    name: 'disableRemotePlayback',
+    tagName: 'video',
+    read: getProperty('disableremoteplayback'),
+  },
+  {
+    name: 'display',
+    tagName: 'svg',
+    overrideStringValue: 'list-item',
+    read: getAttribute('display'),
+  },
+  {
+    name: 'divisor',
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+    read: getSVGProperty('divisor'),
+  },
+  {
+    name: 'dominant-baseline',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('dominant-baseline'),
+  },
+  {
+    name: 'dominantBaseline',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('dominant-baseline'),
+  },
+  {name: 'download', tagName: 'a'},
+  {name: 'dOwNlOaD', tagName: 'a', read: getAttribute('dOwNlOaD')},
+  {name: 'draggable'},
+  {
+    name: 'dur',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('dur'),
+  },
+  {
+    name: 'dx',
+    containerTagName: 'svg',
+    tagName: 'text',
+    overrideStringValue: '1pt 2px 3em',
+    read: getSVGProperty('dx'),
+  },
+  {
+    name: 'dX',
+    containerTagName: 'svg',
+    tagName: 'text',
+    overrideStringValue: '1pt 2px 3em',
+    read: getSVGProperty('dx'),
+  },
+  {
+    name: 'dy',
+    containerTagName: 'svg',
+    tagName: 'text',
+    overrideStringValue: '1 2 3',
+    read: getSVGProperty('dy'),
+  },
+  {
+    name: 'dY',
+    containerTagName: 'svg',
+    tagName: 'text',
+    overrideStringValue: '1 2 3',
+    read: getSVGProperty('dy'),
+  },
+  {
+    name: 'edgeMode',
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+    overrideStringValue: 'wrap',
+    read: getSVGProperty('edgeMode'),
+  },
+  {
+    name: 'elevation',
+    containerTagName: 'svg',
+    tagName: 'feDistantLight',
+    read: getSVGProperty('elevation'),
+  },
+  {
+    name: 'enable-background',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('enable-background'),
+  },
+  {
+    name: 'enableBackground',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('enable-background'),
+  },
+  {
+    name: 'encType',
+    tagName: 'form',
+    overrideStringValue: 'text/plain',
+    read: getProperty('enctype'),
+  },
+  {
+    name: 'end',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('end'),
+  },
+  {
+    name: 'enterKeyHint',
+    tagName: 'input',
+    read: getProperty('enterKeyHint'),
+  },
+  {
+    name: 'exponent',
+    read: getSVGProperty('exponent'),
+    containerTagName: 'svg',
+    tagName: 'feFuncA',
+  },
+  {
+    name: 'externalResourcesRequired',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('externalResourcesRequired'),
+  },
+  {
+    name: 'fetchPriority',
+    overrideStringValue: 'high',
+    tagName: 'img',
+    read: getProperty('fetchPriority'),
+  },
+  {
+    name: 'fetchpriority',
+    overrideStringValue: 'high',
+    tagName: 'img',
+    read: getProperty('fetchPriority'),
+  },
+  {
+    name: 'fetchPriority',
+    overrideStringValue: 'high',
+    tagName: 'link',
+    read: getProperty('fetchPriority'),
+  },
+  {
+    name: 'fill',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('fill'),
+  },
+  {
+    name: 'fillOpacity',
+    containerTagName: 'svg',
+    tagName: 'circle',
+    read: getSVGAttribute('fill-opacity'),
+  },
+  {
+    name: 'fill-opacity',
+    containerTagName: 'svg',
+    tagName: 'circle',
+    read: getSVGAttribute('fill-opacity'),
+  },
+  {
+    name: 'fillRule',
+    containerTagName: 'svg',
+    tagName: 'circle',
+    read: getSVGAttribute('fill-rule'),
+  },
+  {
+    name: 'fill-rule',
+    containerTagName: 'svg',
+    tagName: 'circle',
+    read: getSVGAttribute('fill-rule'),
+  },
+  {
+    name: 'filter',
+    containerTagName: 'svg',
+    tagName: 'g',
+    read: getSVGAttribute('filter'),
+  },
+  {
+    name: 'filterRes',
+    containerTagName: 'svg',
+    tagName: 'filter',
+    read: getSVGAttribute('filterRes'),
+  },
+  {
+    name: 'filterUnits',
+    containerTagName: 'svg',
+    tagName: 'filter',
+    overrideStringValue: 'userSpaceOnUse',
+    read: getSVGProperty('filterUnits'),
+  },
+  {
+    name: 'flood-color',
+    containerTagName: 'svg',
+    tagName: 'feflood',
+    overrideStringValue: 'currentColor',
+    read: getSVGAttribute('flood-color'),
+  },
+  {
+    name: 'floodColor',
+    containerTagName: 'svg',
+    tagName: 'feflood',
+    overrideStringValue: 'currentColor',
+    read: getSVGAttribute('flood-color'),
+  },
+  {
+    name: 'flood-opacity',
+    containerTagName: 'svg',
+    tagName: 'feflood',
+    overrideStringValue: 'inherit',
+    read: getSVGAttribute('flood-opacity'),
+  },
+  {
+    name: 'floodOpacity',
+    containerTagName: 'svg',
+    tagName: 'feflood',
+    overrideStringValue: 'inherit',
+    read: getSVGAttribute('flood-opacity'),
+  },
+  {name: 'focusable', tagName: 'p', read: getAttribute('focusable')},
+  {
+    name: 'font-family',
+    read: getSVGAttribute('font-family'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'font-size',
+    read: getSVGAttribute('font-size'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'font-size-adjust',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('font-size-adjust'),
+  },
+  {
+    name: 'font-stretch',
+    read: getSVGAttribute('font-stretch'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'font-style',
+    read: getSVGAttribute('font-style'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'font-variant',
+    read: getSVGAttribute('font-variant'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'font-weight',
+    read: getSVGAttribute('font-weight'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'fontFamily',
+    read: getSVGAttribute('font-family'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'fontSize',
+    read: getSVGAttribute('font-size'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'fontSizeAdjust',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('font-size-adjust'),
+  },
+  {
+    name: 'fontStretch',
+    read: getSVGAttribute('font-stretch'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'fontStyle',
+    read: getSVGAttribute('font-style'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'fontVariant',
+    read: getSVGAttribute('font-variant'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'fontWeight',
+    read: getSVGAttribute('font-weight'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'for', tagName: 'label', read: getProperty('htmlFor')},
+  {name: 'fOr', tagName: 'label', read: getProperty('htmlFor')},
+  {name: 'form', read: getAttribute('form')}, // TODO: Read the property by rendering into a form with i
+  {
+    name: 'formAction',
+    tagName: 'input',
+    overrideStringValue: 'https://reactjs.com',
+  },
+  {
+    name: 'format',
+    read: getSVGAttribute('format'),
+    containerTagName: 'svg',
+    tagName: 'altGlyph',
+  },
+  {name: 'formEncType', tagName: 'input', read: getProperty('formEnctype')},
+  {name: 'formMethod', tagName: 'input', overrideStringValue: 'POST'},
+  {name: 'formNoValidate', tagName: 'input'},
+  {name: 'formTarget', tagName: 'input'},
+  {name: 'frameBorder', tagName: 'iframe'},
+  {
+    name: 'from',
+    read: getSVGAttribute('from'),
+    containerTagName: 'svg',
+    tagName: 'animate',
+  },
+  {
+    name: 'fx',
+    read: getSVGProperty('fx'),
+    containerTagName: 'svg',
+    overrideStringValue: '10px',
+    tagName: 'radialGradient',
+  },
+  {
+    name: 'fX',
+    containerTagName: 'svg',
+    tagName: 'radialGradient',
+    overrideStringValue: '10px',
+    read: getSVGProperty('fx'),
+  },
+  {
+    name: 'fY',
+    containerTagName: 'svg',
+    tagName: 'radialGradient',
+    overrideStringValue: '20em',
+    read: getSVGProperty('fy'),
+  },
+  {
+    name: 'fy',
+    read: getSVGProperty('fy'),
+    containerTagName: 'svg',
+    overrideStringValue: '20em',
+    tagName: 'radialGradient',
+  },
+  {
+    name: 'G1',
+    containerTagName: 'svg',
+    tagName: 'hkern',
+    read: getSVGAttribute('g1'),
+  },
+  {
+    name: 'g1',
+    read: getSVGAttribute('g1'),
+    containerTagName: 'svg',
+    tagName: 'hkern',
+  },
+  {
+    name: 'G2',
+    containerTagName: 'svg',
+    tagName: 'hkern',
+    read: getSVGAttribute('g2'),
+  },
+  {
+    name: 'g2',
+    read: getSVGAttribute('g2'),
+    containerTagName: 'svg',
+    tagName: 'hkern',
+  },
+  {
+    name: 'glyph-name',
+    read: getSVGAttribute('glyph-name'),
+    containerTagName: 'svg',
+    tagName: 'glyph',
+  },
+  {
+    name: 'glyph-orientation-horizontal',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('glyph-orientation-horizontal'),
+  },
+  {
+    name: 'glyph-orientation-vertical',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('glyph-orientation-vertical'),
+  },
+  {
+    name: 'glyphName',
+    read: getSVGAttribute('glyph-name'),
+    containerTagName: 'svg',
+    tagName: 'glyph',
+  },
+  {
+    name: 'glyphOrientationHorizontal',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('glyph-orientation-horizontal'),
+  },
+  {
+    name: 'glyphOrientationVertical',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('glyph-orientation-vertical'),
+  },
+  {
+    name: 'glyphRef',
+    read: getSVGAttribute('glyph-ref'),
+    containerTagName: 'svg',
+    tagName: 'altGlyph',
+  },
+  {
+    name: 'gradientTransform',
+    read: getSVGProperty('gradientTransform'),
+    containerTagName: 'svg',
+    overrideStringValue:
+      'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
+    tagName: 'linearGradient',
+  },
+  {
+    name: 'gradientUnits',
+    read: getSVGProperty('gradientUnits'),
+    containerTagName: 'svg',
+    overrideStringValue: 'userSpaceOnUse',
+    tagName: 'linearGradient',
+  },
+  {
+    name: 'hanging',
+    read: getSVGAttribute('hanging'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  // Disabled because it crashes other tests with React 15.
+  // TODO: re-enable when we no longer compare to 15.
+  // {name: 'hasOwnProperty', read: getAttribute('hasOwnProperty')},
+  {name: 'headers', containerTagName: 'tr', tagName: 'td'},
+  {name: 'height', tagName: 'img'},
+  {
+    name: 'height',
+    containerTagName: 'svg',
+    tagName: 'rect',
+    read: getSVGProperty('height'),
+    overrideStringValue: '100%',
+  },
+  {name: 'hidden', overrideStringValue: 'until-found'},
+  {name: 'high', tagName: 'meter'},
+  {
+    name: 'horiz-adv-x',
+    read: getSVGAttribute('horiz-adv-x'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'horiz-origin-x',
+    read: getSVGAttribute('horiz-origin-x'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'horizAdvX',
+    read: getSVGAttribute('horiz-adv-x'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'horizOriginX',
+    read: getSVGAttribute('horiz-origin-x'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {name: 'href', tagName: 'a', overrideStringValue: 'https://reactjs.com'},
+  {name: 'hrefLang', read: getAttribute('hreflang')},
+  {name: 'htmlFor', tagName: 'label'},
+  {
+    name: 'http-equiv',
+    containerTagName: 'head',
+    tagName: 'meta',
+    read: getProperty('httpEquiv'),
+  },
+  {name: 'httpEquiv', containerTagName: 'head', tagName: 'meta'},
+  {name: 'icon', tagName: 'command', read: getAttribute('icon')},
+  {name: 'id'},
+  {name: 'ID', read: getProperty('id')},
+  {
+    name: 'ideographic',
+    read: getSVGAttribute('ideographic'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'image-rendering',
+    tagName: 'svg',
+    read: getSVGAttribute('image-rendering'),
+  },
+  {
+    name: 'imageRendering',
+    tagName: 'svg',
+    read: getSVGAttribute('image-rendering'),
+  },
+  {name: 'imageSizes', tagName: 'link', read: getProperty('imageSizes')},
+  {name: 'imageSrcSet', tagName: 'link', read: getProperty('imageSrcset')},
+  {
+    name: 'in',
+    read: getSVGAttribute('in'),
+    containerTagName: 'svg',
+    tagName: 'feBlend',
+  },
+  {name: 'inert'},
+  {
+    name: 'in2',
+    read: getSVGProperty('in2'),
+    containerTagName: 'svg',
+    tagName: 'feBlend',
+  },
+  {name: 'initialChecked', read: getAttribute('initialchecked')},
+  {name: 'initialValue', read: getAttribute('initialvalue')},
+  {name: 'inlist', read: getAttribute('inlist')},
+  {name: 'inputMode', tagName: 'input'},
+  {name: 'integrity', tagName: 'script'},
+  {
+    name: 'intercept',
+    read: getSVGProperty('intercept'),
+    containerTagName: 'svg',
+    tagName: 'feFuncA',
+  },
+  {
+    name: 'is',
+    tagName: 'button',
+    overrideStringValue: 'x-test-element',
+    read: getAttribute('is'), // TODO: This could check if this is an extended custom element but this is a controversial spec.
+  },
+  {name: 'itemID', read: getAttribute('itemid')},
+  {name: 'itemProp', read: getAttribute('itemprop')},
+  {name: 'itemRef', read: getAttribute('itemref')},
+  {name: 'itemScope', read: getAttribute('itemscope')},
+  {name: 'itemType', read: getAttribute('itemtype')},
+  {
+    name: 'k',
+    read: getSVGAttribute('k'),
+    containerTagName: 'svg',
+    tagName: 'hkern',
+  },
+  {
+    name: 'K',
+    containerTagName: 'svg',
+    tagName: 'hkern',
+    read: getSVGAttribute('k'),
+  },
+  {
+    name: 'K1',
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+    read: getSVGProperty('k1'),
+  },
+  {
+    name: 'k1',
+    read: getSVGProperty('k1'),
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+  },
+  {
+    name: 'k2',
+    read: getSVGProperty('k2'),
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+  },
+  {
+    name: 'k3',
+    read: getSVGProperty('k3'),
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+  },
+  {
+    name: 'k4',
+    read: getSVGProperty('k4'),
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+  },
+  {
+    name: 'kernelMatrix',
+    read: getSVGProperty('kernelMatrix'),
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+    overrideStringValue: '1 2 3,4',
+  },
+  {
+    name: 'kernelUnitLength',
+    read: getSVGAttribute('kernelUnitLength'),
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+  },
+  {
+    name: 'kerning',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('kerning'),
+  },
+  {name: 'keyParams', read: getAttribute('keyParams')},
+  {
+    name: 'keyPoints',
+    read: getSVGAttribute('keyPoints'),
+    containerTagName: 'svg',
+    tagName: 'animateMotion',
+  },
+  {
+    name: 'keySplines',
+    read: getSVGAttribute('keySplines'),
+    containerTagName: 'svg',
+    tagName: 'animate',
+  },
+  {
+    name: 'keyTimes',
+    read: getSVGAttribute('keyTimes'),
+    containerTagName: 'svg',
+    tagName: 'animate',
+  },
+  {name: 'keyType', read: getAttribute('keyType')},
+  {name: 'kind', tagName: 'track', overrideStringValue: 'captions'},
+  {name: 'label', tagName: 'track'},
+  {name: 'LANG', read: getProperty('lang')},
+  {name: 'lang'},
+  {name: 'lang', containerTagName: 'document', tagName: 'html'},
+  {name: 'length', read: getAttribute('length')},
+  {
+    name: 'lengthAdjust',
+    read: getSVGProperty('lengthAdjust'),
+    containerTagName: 'svg',
+    tagName: 'text',
+    overrideStringValue: 'spacingAndGlyphs',
+  },
+  {
+    name: 'letter-spacing',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('letter-spacing'),
+  },
+  {
+    name: 'letterSpacing',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('letter-spacing'),
+  },
+  {
+    name: 'lighting-color',
+    containerTagName: 'svg',
+    tagName: 'feDiffuseLighting',
+    read: getSVGAttribute('lighting-color'),
+  },
+  {
+    name: 'lightingColor',
+    containerTagName: 'svg',
+    tagName: 'feDiffuseLighting',
+    read: getSVGAttribute('lighting-color'),
+  },
+  {
+    name: 'limitingConeAngle',
+    read: getSVGProperty('limitingConeAngle'),
+    containerTagName: 'svg',
+    tagName: 'feSpotLight',
+  },
+  {name: 'list', read: getAttribute('list')}, // TODO: This should match the ID of a datalist element and then read property.
+  {
+    name: 'local',
+    read: getSVGAttribute('local'),
+    containerTagName: 'svg',
+    tagName: 'color-profile',
+  },
+  {name: 'loop', tagName: 'audio'},
+  {name: 'low', tagName: 'meter'},
+  {name: 'manifest', read: getAttribute('manifest')},
+  {name: 'marginHeight', containerTagName: 'frameset', tagName: 'frame'},
+  {name: 'marginWidth', containerTagName: 'frameset', tagName: 'frame'},
+  {
+    name: 'marker-end',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('marker-end'),
+  },
+  {
+    name: 'marker-mid',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('marker-mid'),
+  },
+  {
+    name: 'marker-start',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('marker-start'),
+  },
+  {
+    name: 'markerEnd',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('marker-end'),
+  },
+  {
+    name: 'markerHeight',
+    read: getSVGProperty('markerHeight'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+  },
+  {
+    name: 'markerMid',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('marker-mid'),
+  },
+  {
+    name: 'markerStart',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('marker-start'),
+  },
+  {
+    name: 'markerUnits',
+    read: getSVGProperty('markerUnits'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+  },
+  {
+    name: 'markerWidth',
+    read: getSVGProperty('markerWidth'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+  },
+  {
+    name: 'mask',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('mask'),
+  },
+  {
+    name: 'maskContentUnits',
+    read: getSVGProperty('maskContentUnits'),
+    containerTagName: 'svg',
+    tagName: 'mask',
+    overrideStringValue: 'objectBoundingBox',
+  },
+  {
+    name: 'maskUnits',
+    read: getSVGProperty('maskUnits'),
+    containerTagName: 'svg',
+    tagName: 'mask',
+    overrideStringValue: 'userSpaceOnUse',
+  },
+  {
+    name: 'mathematical',
+    read: getSVGAttribute('mathematical'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'max', tagName: 'input'},
+  {name: 'max', tagName: 'meter'},
+  {name: 'max', tagName: 'progress'},
+  {
+    name: 'max',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('max'),
+  },
+  {name: 'maxLength', tagName: 'textarea'},
+  {name: 'media', tagName: 'link'},
+  {
+    name: 'media',
+    containerTagName: 'svg',
+    tagName: 'style',
+    read: getSVGProperty('media'),
+  },
+  {name: 'mediaGroup', tagName: 'video', read: getAttribute('mediagroup')}, // TODO: Not yet implemented in Chrome.
+  {name: 'method', tagName: 'form', overrideStringValue: 'POST'},
+  {
+    name: 'method',
+    containerTagName: 'svg',
+    tagName: 'textPath',
+    read: getSVGProperty('method'),
+    overrideStringValue: 'stretch',
+  },
+  {name: 'min', tagName: 'input'},
+  {name: 'min', tagName: 'meter'},
+  {
+    name: 'min',
+    containerTagName: 'svg',
+    tagName: 'animate',
+    read: getSVGAttribute('min'),
+  },
+  {name: 'minLength', tagName: 'input'},
+  {
+    name: 'mode',
+    read: getSVGProperty('mode'),
+    containerTagName: 'svg',
+    tagName: 'feBlend',
+    overrideStringValue: 'multiply',
+  },
+  {name: 'multiple', tagName: 'select'},
+  {name: 'muted', tagName: 'video'},
+  {name: 'name', tagName: 'input'},
+  {
+    name: 'name',
+    containerTagName: 'svg',
+    tagName: 'color-profile',
+    read: getSVGAttribute('color-profile'),
+  },
+  {name: 'noModule', tagName: 'script'},
+  {name: 'nonce', read: getAttribute('nonce')},
+  {name: 'noValidate', tagName: 'form'},
+  {
+    name: 'numOctaves',
+    read: getSVGProperty('numOctaves'),
+    containerTagName: 'svg',
+    tagName: 'feTurbulence',
+  },
+  {
+    name: 'offset',
+    read: getSVGProperty('offset'),
+    containerTagName: 'svg',
+    tagName: 'stop',
+  },
+  {name: 'on-click'}, // TODO: Check for event subscriptions
+  {name: 'on-unknownevent'}, // TODO: Check for event subscriptions
+  {name: 'onclick'}, // TODO: Check for event subscriptions
+  {name: 'onClick'}, // TODO: Check for event subscriptions
+  {name: 'onunknownevent'}, // TODO: Check for event subscriptions
+  {name: 'onUnknownEvent'}, // TODO: Check for event subscriptions
+  {
+    name: 'opacity',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('opacity'),
+  },
+  {name: 'open', tagName: 'details'},
+  {
+    name: 'operator',
+    read: getSVGProperty('operator'),
+    containerTagName: 'svg',
+    tagName: 'feComposite',
+    overrideStringValue: 'xor',
+  },
+  {name: 'optimum', tagName: 'meter'},
+  {
+    name: 'order',
+    read: getSVGAttribute('order'),
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+  },
+  {
+    name: 'orient',
+    read: getSVGAttribute('orient'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+  },
+  {
+    name: 'orientation',
+    read: getSVGAttribute('orientation'),
+    containerTagName: 'svg',
+    tagName: 'glyph',
+  },
+  {
+    name: 'origin',
+    read: getSVGAttribute('origin'),
+    containerTagName: 'svg',
+    tagName: 'animateMotion',
+  },
+  {
+    name: 'overflow',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('overflow'),
+  },
+  {
+    name: 'overline-position',
+    read: getSVGAttribute('overline-position'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'overline-thickness',
+    read: getSVGAttribute('overline-thickness'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'overlinePosition',
+    read: getSVGAttribute('overline-position'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'overlineThickness',
+    read: getSVGAttribute('overline-thickness'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'paint-order',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('paint-order'),
+  },
+  {
+    name: 'paintOrder',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('paint-order'),
+  },
+  {
+    name: 'panose-1',
+    read: getSVGAttribute('panose-1'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'panose1',
+    containerTagName: 'svg',
+    tagName: 'font-face',
+    read: getSVGAttribute('panose-1'),
+  },
+  {
+    name: 'pathLength',
+    read: getSVGProperty('pathLength'),
+    containerTagName: 'svg',
+    tagName: 'path',
+  },
+  {name: 'pattern', tagName: 'input'},
+  {
+    name: 'patternContentUnits',
+    read: getSVGProperty('patternContentUnits'),
+    containerTagName: 'svg',
+    tagName: 'pattern',
+    overrideStringValue: 'objectBoundingBox',
+  },
+  {
+    name: 'patternTransform',
+    read: getSVGProperty('patternTransform'),
+    containerTagName: 'svg',
+    tagName: 'pattern',
+    overrideStringValue:
+      'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
+  },
+  {
+    name: 'patternUnits',
+    read: getSVGProperty('patternUnits'),
+    containerTagName: 'svg',
+    tagName: 'pattern',
+    overrideStringValue: 'userSpaceOnUse',
+  },
+  {name: 'placeholder', tagName: 'input'},
+  {name: 'playsInline', read: getAttribute('playsinline')},
+  {
+    name: 'pointer-events',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('pointer-events'),
+  },
+  {
+    name: 'pointerEvents',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('pointer-events'),
+  },
+  {
+    name: 'points',
+    read: getSVGProperty('points'),
+    containerTagName: 'svg',
+    tagName: 'polygon',
+    overrideStringValue: '350,75  379,161 469,161',
+  },
+  {
+    name: 'pointsAtX',
+    read: getSVGProperty('pointsAtX'),
+    containerTagName: 'svg',
+    tagName: 'feSpotLight',
+  },
+  {
+    name: 'pointsAtY',
+    read: getSVGProperty('pointsAtY'),
+    containerTagName: 'svg',
+    tagName: 'feSpotLight',
+  },
+  {
+    name: 'pointsAtZ',
+    read: getSVGProperty('pointsAtZ'),
+    containerTagName: 'svg',
+    tagName: 'feSpotLight',
+  },
+  {name: 'popover', overrideStringValue: 'manual'},
+  {
+    name: 'popoverTarget',
+    read: element => {
+      document.body.appendChild(element);
+      try {
+        // trigger and target need to be connected for `popoverTargetElement` to read the actual value.
+        return element.popoverTargetElement;
+      } finally {
+        document.body.removeChild(element);
+      }
+    },
+    overrideStringValue: 'popover-target',
+    tagName: 'button',
+  },
+  {name: 'popoverTargetAction', overrideStringValue: 'show', tagName: 'button'},
+  {
+    name: 'poster',
+    tagName: 'video',
+    overrideStringValue: 'https://reactjs.com',
+  },
+  {name: 'prefix', read: getAttribute('prefix')},
+  {name: 'preload', tagName: 'video', overrideStringValue: 'none'},
+  {
+    name: 'preserveAlpha',
+    read: getSVGProperty('preserveAlpha'),
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+  },
+  {
+    name: 'preserveAspectRatio',
+    read: getSVGProperty('preserveAspectRatio'),
+    containerTagName: 'svg',
+    tagName: 'feImage',
+    overrideStringValue: 'xMinYMin slice',
+  },
+  {
+    name: 'primitiveUnits',
+    read: getSVGProperty('primitiveUnits'),
+    containerTagName: 'svg',
+    tagName: 'filter',
+    overrideStringValue: 'objectBoundingBox',
+  },
+  {name: 'profile', read: getAttribute('profile')},
+  {name: 'property', read: getAttribute('property')},
+  {name: 'props', read: getAttribute('props')},
+  {
+    name: 'r',
+    read: getSVGProperty('r'),
+    containerTagName: 'svg',
+    tagName: 'circle',
+    overrideStringValue: '10pt',
+  },
+  {name: 'radioGroup', tagName: 'command', read: getAttribute('radiogroup')},
+  {
+    name: 'radius',
+    read: getSVGAttribute('radius'),
+    containerTagName: 'svg',
+    tagName: 'feMorphology',
+  },
+  {name: 'readOnly', tagName: 'input'},
+  {name: 'referrerPolicy', tagName: 'iframe'},
+  {
+    name: 'refX',
+    read: getSVGProperty('refX'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+    overrideStringValue: '5em',
+  },
+  {
+    name: 'refY',
+    read: getSVGProperty('refY'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+    overrideStringValue: '6em',
+  },
+  {name: 'rel', tagName: 'a'},
+  {
+    name: 'rendering-intent',
+    read: getSVGAttribute('rendering-intent'),
+    containerTagName: 'svg',
+    tagName: 'color-profile',
+  },
+  {
+    name: 'renderingIntent',
+    read: getSVGAttribute('rendering-intent'),
+    containerTagName: 'svg',
+    tagName: 'color-profile',
+  },
+  {
+    name: 'repeatCount',
+    read: getSVGAttribute('repeatcount'),
+    containerTagName: 'svg',
+    tagName: 'animate',
+  },
+  {
+    name: 'repeatDur',
+    read: getSVGAttribute('repeatdur'),
+    containerTagName: 'svg',
+    tagName: 'animate',
+  },
+  {name: 'required', tagName: 'input'},
+  {
+    name: 'requiredExtensions',
+    read: getSVGProperty('requiredExtensions'),
+    containerTagName: 'svg',
+    tagName: 'a',
+  },
+  {
+    name: 'requiredFeatures',
+    read: getSVGAttribute('requiredFeatures'),
+    containerTagName: 'svg',
+    tagName: 'a',
+  },
+  {name: 'resource', read: getAttribute('resource')},
+  {
+    name: 'restart',
+    read: getSVGAttribute('resource'),
+    containerTagName: 'svg',
+    tagName: 'animate',
+  },
+  {
+    name: 'result',
+    read: getSVGProperty('result'),
+    containerTagName: 'svg',
+    tagName: 'feBlend',
+  },
+  {name: 'results', tagName: 'input', read: getAttribute('results')}, // TODO: Should use property but it's not supported in Chrome.
+  {name: 'reversed', tagName: 'ol'},
+  {name: 'role', read: getAttribute('role')},
+  {
+    name: 'rotate',
+    read: getSVGAttribute('role'),
+    containerTagName: 'svg',
+    tagName: 'altGlyph',
+  },
+  {name: 'rows', tagName: 'textarea'},
+  {name: 'rowSpan', containerTagName: 'tr', tagName: 'td'},
+  {
+    name: 'rx',
+    read: getSVGProperty('rx'),
+    containerTagName: 'svg',
+    tagName: 'ellipse',
+    overrideStringValue: '1px',
+  },
+  {
+    name: 'ry',
+    read: getSVGProperty('ry'),
+    containerTagName: 'svg',
+    tagName: 'ellipse',
+    overrideStringValue: '2px',
+  },
+  {
+    name: 'sandbox',
+    tagName: 'iframe',
+    overrideStringValue: 'allow-forms  allow-scripts',
+  },
+  {
+    name: 'scale',
+    read: getSVGProperty('scale'),
+    containerTagName: 'svg',
+    tagName: 'feDisplacementMap',
+  },
+  {
+    name: 'scope',
+    containerTagName: 'tr',
+    tagName: 'th',
+    overrideStringValue: 'row',
+  },
+  {name: 'scoped', tagName: 'style', read: getAttribute('scoped')},
+  {name: 'scrolling', tagName: 'iframe', overrideStringValue: 'no'},
+  {name: 'seamless', tagName: 'iframe', read: getAttribute('seamless')},
+  {name: 'security', tagName: 'iframe', read: getAttribute('security')},
+  {
+    name: 'seed',
+    read: getSVGProperty('seed'),
+    containerTagName: 'svg',
+    tagName: 'feTurbulence',
+  },
+  {name: 'selected', tagName: 'option', containerTagName: 'select'},
+  {name: 'selectedIndex', tagName: 'select'},
+  {name: 'shape', tagName: 'a'},
+  {
+    name: 'shape-rendering',
+    tagName: 'svg',
+    read: getSVGAttribute('shape-rendering'),
+  },
+  {
+    name: 'shapeRendering',
+    tagName: 'svg',
+    read: getSVGAttribute('shape-rendering'),
+  },
+  {name: 'size', tagName: 'input'},
+  {name: 'sizes', tagName: 'link'},
+  {
+    name: 'slope',
+    read: getSVGAttribute('slope'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'spacing',
+    read: getSVGProperty('spacing'),
+    containerTagName: 'svg',
+    tagName: 'textPath',
+    overrideStringValue: 'auto',
+  },
+  {name: 'span', containerTagName: 'colgroup', tagName: 'col'},
+  {
+    name: 'specularConstant',
+    read: getSVGProperty('specularConstant'),
+    containerTagName: 'svg',
+    tagName: 'feSpecularLighting',
+  },
+  {
+    name: 'specularExponent',
+    read: getSVGProperty('specularConstant'),
+    containerTagName: 'svg',
+    tagName: 'feSpecularLighting',
+  },
+  {name: 'speed', read: getAttribute('speed')},
+  {
+    name: 'spellCheck',
+    overrideStringValue: 'false',
+    tagName: 'input',
+    read: getProperty('spellcheck'),
+  },
+  {
+    name: 'spellcheck',
+    overrideStringValue: 'false',
+    tagName: 'input',
+    read: getProperty('spellcheck'),
+  },
+  {
+    name: 'spreadMethod',
+    read: getSVGProperty('spreadMethod'),
+    containerTagName: 'svg',
+    tagName: 'linearGradient',
+    overrideStringValue: 'reflect',
+  },
+  {name: 'src', tagName: 'img', overrideStringValue: 'https://reactjs.com'},
+  {
+    name: 'srcDoc',
+    tagName: 'iframe',
+    overrideStringValue: '<p>Hi</p>',
+    read: getProperty('srcdoc'),
+  },
+  {
+    name: 'srcdoc',
+    tagName: 'iframe',
+    overrideStringValue: '<p>Hi</p>',
+    read: getProperty('srcdoc'),
+  },
+  {
+    name: 'srcLang',
+    containerTagName: 'audio',
+    tagName: 'track',
+    overrideStringValue: 'en',
+    read: getProperty('srclang'),
+  },
+  {
+    name: 'srclang',
+    containerTagName: 'audio',
+    tagName: 'track',
+    overrideStringValue: 'en',
+    read: getProperty('srclang'),
+  },
+  {name: 'srcSet', tagName: 'img'},
+  {name: 'srcset', tagName: 'img'},
+  {name: 'start', tagName: 'ol'},
+  {
+    name: 'startOffset',
+    read: getSVGProperty('startOffset'),
+    containerTagName: 'svg',
+    tagName: 'textPath',
+  },
+  {name: 'state', read: getAttribute('state')},
+  {
+    name: 'stdDeviation',
+    read: getSVGAttribute('stdDeviation'),
+    containerTagName: 'svg',
+    tagName: 'feGaussianBlur',
+  },
+  {
+    name: 'stemh',
+    read: getSVGAttribute('stemh'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'stemv',
+    read: getSVGAttribute('stemv'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'step', read: getAttribute('step')},
+  {
+    name: 'stitchTiles',
+    read: getSVGProperty('stitchTiles'),
+    containerTagName: 'svg',
+    tagName: 'feTurbulence',
+    overrideStringValue: 'stitch',
+  },
+  {
+    name: 'stop-color',
+    containerTagName: 'svg',
+    tagName: 'stop',
+    read: getSVGAttribute('stop-color'),
+  },
+  {
+    name: 'stop-opacity',
+    containerTagName: 'svg',
+    tagName: 'stop',
+    read: getSVGAttribute('stop-opacity'),
+  },
+  {
+    name: 'stopColor',
+    containerTagName: 'svg',
+    tagName: 'stop',
+    read: getSVGAttribute('stop-color'),
+  },
+  {
+    name: 'stopOpacity',
+    containerTagName: 'svg',
+    tagName: 'stop',
+    read: getSVGAttribute('stop-opacity'),
+  },
+  {
+    name: 'strikethrough-position',
+    read: getSVGAttribute('strikethrough-position'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'strikethrough-thickness',
+    read: getSVGAttribute('strikethrough-thickness'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'strikethroughPosition',
+    read: getSVGAttribute('strikethrough-position'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'strikethroughThickness',
+    read: getSVGAttribute('strikethrough-thickness'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'string',
+    read: getSVGAttribute('string'),
+    containerTagName: 'svg',
+    tagName: 'font-face-format',
+  },
+  {
+    name: 'stroke',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke'),
+  },
+  {
+    name: 'stroke-dasharray',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-dasharray'),
+  },
+  {
+    name: 'stroke-Dasharray',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-dasharray'),
+  },
+  {
+    name: 'stroke-dashoffset',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-dashoffset'),
+  },
+  {
+    name: 'stroke-linecap',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-linecap'),
+  },
+  {
+    name: 'stroke-linejoin',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-linejoin'),
+  },
+  {
+    name: 'stroke-miterlimit',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-miterlimit'),
+  },
+  {
+    name: 'stroke-opacity',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-opacity'),
+  },
+  {
+    name: 'stroke-width',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-width'),
+  },
+  {
+    name: 'strokeDasharray',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-dasharray'),
+  },
+  {
+    name: 'strokeDashoffset',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-dashoffset'),
+  },
+  {
+    name: 'strokeLinecap',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-linecap'),
+  },
+  {
+    name: 'strokeLinejoin',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-linejoin'),
+  },
+  {
+    name: 'strokeMiterlimit',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-miterlimit'),
+  },
+  {
+    name: 'strokeOpacity',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-opacity'),
+  },
+  {
+    name: 'strokeWidth',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('stroke-width'),
+  },
+  {name: 'style'},
+  {name: 'summary', tagName: 'table'},
+  {
+    name: 'suppressContentEditableWarning',
+    read: getAttribute('suppresscontenteditablewarning'),
+  },
+  {
+    name: 'surfaceScale',
+    read: getSVGProperty('surfaceScale'),
+    containerTagName: 'svg',
+    tagName: 'feDiffuseLighting',
+  },
+  {
+    name: 'systemLanguage',
+    overrideStringValue: 'en',
+    read: getSVGProperty('systemLanguage'),
+    containerTagName: 'svg',
+    tagName: 'a',
+  },
+  {name: 'tabIndex'},
+  {
+    name: 'tabIndex',
+    read: getSVGProperty('tabIndex'),
+    tagName: 'svg',
+  },
+  {
+    name: 'tableValues',
+    read: getSVGProperty('tableValues'),
+    containerTagName: 'svg',
+    tagName: 'feFuncA',
+    overrideStringValue: '0 1 2 3',
+  },
+  {
+    name: 'target',
+    read: getSVGProperty('target'),
+    containerTagName: 'svg',
+    tagName: 'a',
+  },
+  {
+    name: 'targetX',
+    read: getSVGProperty('targetX'),
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+  },
+  {
+    name: 'targetY',
+    read: getSVGProperty('targetY'),
+    containerTagName: 'svg',
+    tagName: 'feConvolveMatrix',
+  },
+  {
+    name: 'text-anchor',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('text-anchor'),
+  },
+  {
+    name: 'text-decoration',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('text-decoration'),
+  },
+  {
+    name: 'text-rendering',
+    tagName: 'svg',
+    read: getSVGAttribute('text-rendering'),
+  },
+  {
+    name: 'textAnchor',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('text-anchor'),
+  },
+  {
+    name: 'textDecoration',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('text-decoration'),
+  },
+  {
+    name: 'textLength',
+    read: getSVGProperty('textLength'),
+    containerTagName: 'svg',
+    tagName: 'text',
+  },
+  {
+    name: 'textRendering',
+    tagName: 'svg',
+    read: getSVGAttribute('text-rendering'),
+  },
+  {name: 'title'},
+  {
+    name: 'to',
+    read: getSVGAttribute('to'),
+    containerTagName: 'svg',
+    tagName: 'set',
+  },
+  {
+    name: 'transform',
+    read: getSVGProperty('transform'),
+    containerTagName: 'svg',
+    tagName: 'a',
+    overrideStringValue:
+      'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
+  },
+  {
+    name: 'transform-origin',
+    tagName: 'svg',
+    read: getSVGAttribute('transform-origin'),
+  },
+  {
+    name: 'transformOrigin',
+    tagName: 'svg',
+    read: getSVGAttribute('transform-origin'),
+  },
+  {name: 'type', tagName: 'button', overrideStringValue: 'reset'},
+  {
+    name: 'type',
+    containerTagName: 'svg',
+    tagName: 'feFuncA',
+    read: getSVGProperty('type'),
+    overrideStringValue: 'discrete',
+  },
+  {name: 'typeof', read: getAttribute('typeof')},
+  {
+    name: 'u1',
+    read: getSVGAttribute('u1'),
+    containerTagName: 'svg',
+    tagName: 'hkern',
+  },
+  {
+    name: 'u2',
+    read: getSVGAttribute('u2'),
+    containerTagName: 'svg',
+    tagName: 'hkern',
+  },
+  {
+    name: 'underline-position',
+    read: getSVGAttribute('underline-position'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'underline-thickness',
+    read: getSVGAttribute('underline-thickness'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'underlinePosition',
+    read: getSVGAttribute('underline-position'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'underlineThickness',
+    read: getSVGAttribute('underline-thickness'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'unicode',
+    read: getSVGAttribute('unicode'),
+    containerTagName: 'svg',
+    tagName: 'glyph',
+  },
+  {
+    name: 'unicode-bidi',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('unicode-bidi'),
+  },
+  {
+    name: 'unicode-range',
+    read: getSVGAttribute('unicode-range'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'unicodeBidi',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('unicode-bidi'),
+  },
+  {
+    name: 'unicodeRange',
+    read: getSVGAttribute('unicode-range'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'units-per-em',
+    read: getSVGAttribute('units-per-em'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'unitsPerEm',
+    read: getSVGAttribute('unites-per-em'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'unknown', read: getAttribute('unknown')},
+  {
+    name: 'unselectable',
+    read: getAttribute('unselectable'),
+    tagName: 'span',
+    overrideStringValue: 'on',
+  },
+  {name: 'useMap', tagName: 'img'},
+  {
+    name: 'v-alphabetic',
+    read: getSVGAttribute('v-alphabetic'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'v-hanging',
+    read: getSVGAttribute('v-hanging'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'v-ideographic',
+    read: getSVGAttribute('v-ideographic'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'v-mathematical',
+    read: getSVGAttribute('v-mathematical'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'vAlphabetic',
+    read: getSVGAttribute('v-alphabetic'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'value', tagName: 'input', extraProps: {onChange() {}}},
+  {name: 'value', tagName: 'input', type: 'email', extraProps: {onChange() {}}},
+  {
+    name: 'value',
+    tagName: 'input',
+    type: 'number',
+    extraProps: {onChange() {}},
+  },
+  {name: 'value', tagName: 'textarea', extraProps: {onChange() {}}},
+  {
+    name: 'value',
+    containerTagName: 'select',
+    tagName: 'option',
+    extraProps: {onChange() {}},
+  },
+  {
+    name: 'Value',
+    containerTagName: 'select',
+    tagName: 'option',
+    read: getProperty('value'),
+  },
+  {
+    name: 'values',
+    read: getSVGProperty('values'),
+    containerTagName: 'svg',
+    tagName: 'feColorMatrix',
+    overrideStringValue: '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0',
+  },
+  {
+    name: 'vector-effect',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('vector-effect'),
+  },
+  {
+    name: 'vectorEffect',
+    containerTagName: 'svg',
+    tagName: 'line',
+    read: getSVGAttribute('vector-effect'),
+  },
+  {name: 'version', containerTagName: 'document', tagName: 'html'},
+  {name: 'version', tagName: 'svg', read: getSVGAttribute('version')},
+  {
+    name: 'vert-adv-y',
+    read: getSVGAttribute('vert-origin-y'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'vert-origin-x',
+    read: getSVGAttribute('vert-origin-y'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'vert-origin-y',
+    read: getSVGAttribute('vert-origin-y'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'vertAdvY',
+    read: getSVGAttribute('vert-adv-y'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'vertOriginX',
+    read: getSVGAttribute('vert-origin-x'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'vertOriginY',
+    read: getSVGAttribute('vert-origin-y'),
+    containerTagName: 'svg',
+    tagName: 'font',
+  },
+  {
+    name: 'vHanging',
+    read: getSVGAttribute('v-hanging'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'vIdeographic',
+    read: getSVGAttribute('v-ideographic'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'viewBox',
+    read: getSVGProperty('viewBox'),
+    containerTagName: 'svg',
+    tagName: 'marker',
+    overrideStringValue: '0 0 1500 1000',
+  },
+  {
+    name: 'viewTarget',
+    read: getSVGAttribute('viewTarget'),
+    containerTagName: 'svg',
+    tagName: 'view',
+  },
+  {name: 'visibility', read: getAttribute('visibility')},
+  {
+    name: 'visibility',
+    containerTagName: 'svg',
+    tagName: 'path',
+    read: getSVGAttribute('visibility'),
+  },
+  {
+    name: 'vMathematical',
+    read: getSVGAttribute('v-mathematical'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'vocab', read: getAttribute('vocab')},
+  {name: 'width', tagName: 'img'},
+  {
+    name: 'width',
+    containerTagName: 'svg',
+    tagName: 'rect',
+    read: getSVGProperty('width'),
+  },
+  {
+    name: 'widths',
+    read: getSVGAttribute('widths'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'wmode', read: getAttribute('wmode'), tagName: 'embed'},
+  {
+    name: 'word-spacing',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('word-spacing'),
+  },
+  {
+    name: 'wordSpacing',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('word-spacing'),
+  },
+  {name: 'wrap', tagName: 'textarea'},
+  {
+    name: 'writing-mode',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('writing-mode'),
+  },
+  {
+    name: 'writingMode',
+    containerTagName: 'svg',
+    tagName: 'text',
+    read: getSVGAttribute('writing-mode'),
+  },
+  {
+    name: 'x',
+    read: getSVGAttribute('x'),
+    containerTagName: 'svg',
+    tagName: 'altGlyph',
+  },
+  {
+    name: 'x-height',
+    read: getSVGAttribute('x-height'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {
+    name: 'x1',
+    read: getSVGProperty('x1'),
+    containerTagName: 'svg',
+    tagName: 'line',
+  },
+  {
+    name: 'x2',
+    read: getSVGProperty('x2'),
+    containerTagName: 'svg',
+    tagName: 'line',
+  },
+  {
+    name: 'xChannelSelector',
+    read: getSVGProperty('xChannelSelector'),
+    containerTagName: 'svg',
+    tagName: 'feDisplacementMap',
+    overrideStringValue: 'R',
+  },
+  {
+    name: 'xHeight',
+    read: getSVGAttribute('x-height'),
+    containerTagName: 'svg',
+    tagName: 'font-face',
+  },
+  {name: 'XLink:Actuate', read: getAttribute('XLink:Actuate')},
+  {name: 'xlink:actuate', read: getAttribute('xlink:actuate')},
+  {name: 'xlink:arcrole', read: getAttribute('xlink:arcrole')},
+  {name: 'xlink:href', read: getAttribute('xlink:href')},
+  {name: 'xlink:role', read: getAttribute('xlink:role')},
+  {name: 'xlink:show', read: getAttribute('xlink:show')},
+  {name: 'xlink:title', read: getAttribute('xlink:title')},
+  {name: 'xlink:type', read: getAttribute('xlink:type')},
+  {name: 'xlinkActuate', read: getAttribute('xlink:actuate')},
+  {name: 'XlinkActuate', read: getAttribute('Xlink:actuate')},
+  {name: 'xlinkArcrole', read: getAttribute('xlink:arcrole')},
+  {name: 'xlinkHref', read: getAttribute('xlink:href')},
+  {name: 'xlinkRole', read: getAttribute('xlink:role')},
+  {name: 'xlinkShow', read: getAttribute('xlink:show')},
+  {name: 'xlinkTitle', read: getAttribute('xlink:title')},
+  {name: 'xlinkType', read: getAttribute('xlink:type')},
+  {name: 'xml:base', read: getAttribute('xml:base')},
+  {name: 'xml:lang', read: getAttribute('xml:lang')},
+  {name: 'xml:space', read: getAttribute('xml:space')},
+  {name: 'xmlBase', read: getAttribute('xml:base')},
+  {name: 'xmlLang', read: getAttribute('xml:lang')},
+  {name: 'xmlns', read: getProperty('namespaceURI'), tagName: 'svg'},
+  {name: 'xmlns:xlink', read: getAttribute('xmlns:xlink')},
+  {name: 'xmlnsXlink', read: getAttribute('xmlns:xlink')},
+  {name: 'xmlSpace', read: getAttribute('xml:space')},
+  {
+    name: 'y',
+    read: getSVGAttribute('y'),
+    containerTagName: 'svg',
+    tagName: 'altGlyph',
+  },
+  {
+    name: 'y1',
+    read: getSVGProperty('y1'),
+    containerTagName: 'svg',
+    tagName: 'line',
+  },
+  {
+    name: 'y2',
+    read: getSVGProperty('y2'),
+    containerTagName: 'svg',
+    tagName: 'line',
+  },
+  {
+    name: 'yChannelSelector',
+    read: getSVGProperty('yChannelSelector'),
+    containerTagName: 'svg',
+    tagName: 'feDisplacementMap',
+    overrideStringValue: 'B',
+  },
+  {
+    name: 'z',
+    read: getSVGProperty('z'),
+    containerTagName: 'svg',
+    tagName: 'fePointLight',
+  },
+  {name: 'zoomAndPan', read: getSVGProperty('zoomAndPan'), tagName: 'svg'},
+];
+
+attributes.forEach(attr => {
+  attr.read = attr.read || getProperty(attr.name);
+});
+
+export default attributes;
diff --git a/fixtures/attribute-behavior/src/index.css b/fixtures/attribute-behavior/src/index.css
new file mode 100644
index 00000000000..691c1bf7523
--- /dev/null
+++ b/fixtures/attribute-behavior/src/index.css
@@ -0,0 +1,8 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: monospace;
+  font-size: 12px;
+}
diff --git a/fixtures/attribute-behavior/src/index.js b/fixtures/attribute-behavior/src/index.js
new file mode 100644
index 00000000000..7fa0938e327
--- /dev/null
+++ b/fixtures/attribute-behavior/src/index.js
@@ -0,0 +1,6 @@
+import './index.css';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/fixtures/attribute-behavior/yarn.lock b/fixtures/attribute-behavior/yarn.lock
new file mode 100644
index 00000000000..7529b7a098a
--- /dev/null
+++ b/fixtures/attribute-behavior/yarn.lock
@@ -0,0 +1,6581 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abab@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
+
+accepts@~1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+acorn-dynamic-import@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+  dependencies:
+    acorn "^4.0.3"
+
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  dependencies:
+    acorn "^4.0.4"
+
+acorn-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.3, acorn@^4.0.4:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+acorn@^5.0.0, acorn@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
+
+address@1.0.2, address@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
+
+ajv-keywords@^1.0.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+
+ajv-keywords@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+
+ajv@^4.7.0, ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^5.0.0, ajv@^5.1.5, ajv@^5.2.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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"
+
+anser@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.1.tgz#c3641863a962cebef941ea2c8706f2cb4f0716bd"
+
+ansi-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
+  dependencies:
+    string-width "^1.0.1"
+
+ansi-escapes@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-escapes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
+
+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, ansi-regex@^2.1.1:
+  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-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.0.0, ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+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"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
+  dependencies:
+    ast-types-flow "0.0.7"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+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-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+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.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+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"
+
+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.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+autoprefixer@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
+  dependencies:
+    browserslist "^2.1.5"
+    caniuse-lite "^1.0.30000697"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.6"
+    postcss-value-parser "^3.2.3"
+
+autoprefixer@^6.3.1:
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  dependencies:
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.16"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+axobject-query@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
+  dependencies:
+    ast-types-flow "0.0.7"
+
+babel-code-frame@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+babel-code-frame@^6.11.0, babel-code-frame@^6.22.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"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-generator "^6.25.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.25.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+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-eslint@7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
+babel-generator@^6.18.0, babel-generator@^6.25.0, babel-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-builder-react-jsx@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
+
+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"
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+  dependencies:
+    babel-helper-get-function-arity "^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-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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-jest@20.0.3, babel-jest@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-20.0.3.tgz#e4a03b13dc10389e140fc645d09ffc4ced301671"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-plugin-istanbul "^4.0.0"
+    babel-preset-jest "^20.0.3"
+
+babel-loader@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.1.tgz#b87134c8b12e3e4c2a94e0546085bc680a2b8488"
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-dynamic-import-node@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.0.2.tgz#adb5bc8f48a89311540395ae9f0cc3ed4b10bb2e"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-template "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-istanbul@^4.0.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.4.tgz#18dde84bf3ce329fddf3f4103fae921456d8e587"
+  dependencies:
+    find-up "^2.1.0"
+    istanbul-lib-instrument "^1.7.2"
+    test-exclude "^4.1.1"
+
+babel-plugin-jest-hoist@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
+
+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-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"
+
+babel-plugin-syntax-dynamic-import@6.18.0, babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-jsx@^6.3.13, 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"
+
+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-syntax-trailing-function-commas@^6.22.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"
+
+babel-plugin-transform-class-properties@6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  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.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.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"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.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"
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.23.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.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"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  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-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.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"
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.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"
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.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"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-object-rest-spread@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-constant-elements@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz#2f119bf4d2cdd45eb9baaae574053c604f6147dd"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.23.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@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.22.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.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  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.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
+  dependencies:
+    regenerator-transform "0.9.11"
+
+babel-plugin-transform-regenerator@^6.22.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-runtime@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-preset-env@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.5.2.tgz#cd4ae90a6e94b709f97374b33e5f8b983556adef"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.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@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-20.0.3.tgz#cbacaadecb5d689ca1e1de1360ebfc66862c178a"
+  dependencies:
+    babel-plugin-jest-hoist "^20.0.3"
+
+babel-preset-react-app@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.0.2.tgz#d062fca5dce68ed9c2615f2fecbc08861720f8e5"
+  dependencies:
+    babel-plugin-dynamic-import-node "1.0.2"
+    babel-plugin-syntax-dynamic-import "6.18.0"
+    babel-plugin-transform-class-properties "6.24.1"
+    babel-plugin-transform-object-rest-spread "6.23.0"
+    babel-plugin-transform-react-constant-elements "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-plugin-transform-regenerator "6.24.1"
+    babel-plugin-transform-runtime "6.23.0"
+    babel-preset-env "1.5.2"
+    babel-preset-react "6.24.1"
+
+babel-preset-react@6.24.1:
+  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-register@^6.24.1, babel-register@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, 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"
+
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.17.0, babylon@^6.17.2, babylon@^6.17.4, babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+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.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.4.7:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+
+bn.js@^5.0.0, bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+
+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:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+bowser@^1.6.0:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.2.tgz#b94cc6925ba6b5e07c421a58e601ce4611264572"
+
+boxen@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"
+  dependencies:
+    ansi-align "^1.1.0"
+    camelcase "^2.1.0"
+    chalk "^1.1.1"
+    cli-boxes "^1.0.0"
+    filled-array "^1.0.0"
+    object-assign "^4.0.1"
+    repeating "^2.0.0"
+    string-width "^1.0.1"
+    widest-line "^1.0.0"
+
+brace-expansion@^1.0.0, brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-resolve@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a"
+  dependencies:
+    buffer-xor "^1.0.2"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+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-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  dependencies:
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
+
+browserslist@^2.1.2, browserslist@^2.1.5:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.3.tgz#2b0cabc4d28489f682598605858a0782f14b154c"
+  dependencies:
+    caniuse-lite "^1.0.30000715"
+    electron-to-chromium "^1.3.18"
+
+bser@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
+  dependencies:
+    node-int64 "^0.4.0"
+
+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-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.2:
+  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, builtin-modules@^1.1.1:
+  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@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.5.0.tgz#4c9423ea2d252c270c41b2bdefeff9bb6b62c06a"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  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"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+
+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-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0, camelcase@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+caniuse-api@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
+  dependencies:
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30000717"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000717.tgz#27ddf5feccdd338c99a62c9788c2694f99f67ed7"
+
+caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000715:
+  version "1.0.30000717"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000717.tgz#4539b126af787c1d4851944de22b2bd8780d3612"
+
+capture-stack-trace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
+
+case-sensitive-paths-webpack-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.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"
+  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.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.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"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+ci-info@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
+
+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"
+
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+
+clap@^1.0.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.0.tgz#59c90fe3e137104746ff19469a27a634ff68c857"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.3:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+clean-css@4.1.x:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.7.tgz#b9aea4f85679889cf3eae8b40349ec4ebdfdd032"
+  dependencies:
+    source-map "0.5.x"
+
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+
+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-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+
+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"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  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"
+
+color-convert@^1.3.0, color-convert@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+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"
+
+compressible@~2.0.10:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.11.tgz#16718a75de283ed8e604041625a2064586797d8a"
+  dependencies:
+    mime-db ">= 1.29.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.0.tgz#030c9f198f1643a057d776a738e922da4373012d"
+  dependencies:
+    accepts "~1.3.3"
+    bytes "2.5.0"
+    compressible "~2.0.10"
+    debug "2.6.8"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.1"
+
+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.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+configstore@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
+  dependencies:
+    dot-prop "^3.0.0"
+    graceful-fs "^4.1.2"
+    mkdirp "^0.5.0"
+    object-assign "^4.0.1"
+    os-tmpdir "^1.0.0"
+    osenv "^0.1.0"
+    uuid "^2.0.1"
+    write-file-atomic "^1.1.2"
+    xdg-basedir "^2.0.0"
+
+connect-history-api-fallback@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
+
+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"
+
+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-type-parser@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.1.tgz#c3e56988c53c65127fb46d4032a3a900246fdc94"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
+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"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086"
+
+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@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-error-class@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hash@^1.2.0:
+  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.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  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-hmac@^1.1.7:
+  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"
+
+create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+cross-spawn@5.1.0, 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"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@^3.11.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  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"
+
+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-in-js-utils@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+
+css-loader@0.28.4:
+  version "0.28.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^0.1.7"
+
+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-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  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"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+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"
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  dependencies:
+    cssom "0.3.x"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
+damerau-levenshtein@^1.0.0:
+  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"
+
+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.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+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.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+del@^2.0.2, del@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  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"
+
+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"
+
+depd@1.1.1, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+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-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
+detect-port-alt@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.3.tgz#a4d2f061d757a034ecf37c514260a98750f2b131"
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+diff@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.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.0.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+  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.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+"dom-helpers@^2.4.0 || ^3.0.0":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+
+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"
+
+dom-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/dom-urls/-/dom-urls-1.1.0.tgz#001ddf81628cd1e706125c7176f53ccec55d918e"
+  dependencies:
+    urijs "^1.16.1"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+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"
+
+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"
+
+dot-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  dependencies:
+    is-obj "^1.0.0"
+
+dotenv@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
+
+duplexer2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  dependencies:
+    readable-stream "^2.0.2"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.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.2.7, electron-to-chromium@^1.3.18:
+  version "1.3.18"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  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"
+
+elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+emoji-regex@^6.1.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+enhanced-resolve@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    object-assign "^4.0.1"
+    tapable "^0.2.7"
+
+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.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.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"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.8.0.tgz#3b00385e85729932beffa9163bbea1234e932914"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+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"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.29"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.29.tgz#768eb2dfc4957bcf35fa0568f193ab71ede53fd8"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-symbol "^3.1"
+
+es6-map@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  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@^4.0.5:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
+  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.1, es6-symbol@^3.1.1, es6-symbol@~3.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-weak-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    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"
+
+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.6.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  dependencies:
+    esprima "^2.7.1"
+    estraverse "^1.9.1"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.2.0"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-config-react-app@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-2.0.0.tgz#8a5fb357c028336578c37a4bd2fc72b1817717cf"
+
+eslint-import-resolver-node@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz#4422574cde66a9a7b099938ee4d508a199e0e3cc"
+  dependencies:
+    debug "^2.6.8"
+    resolve "^1.2.0"
+
+eslint-loader@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.9.0.tgz#7e1be9feddca328d3dcfaef1ad49d5beffe83a13"
+  dependencies:
+    loader-fs-cache "^1.0.0"
+    loader-utils "^1.0.2"
+    object-assign "^4.0.1"
+    object-hash "^1.1.4"
+    rimraf "^2.6.1"
+
+eslint-module-utils@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.1.1.tgz#abaec824177613b8a95b299639e1b6facf473449"
+  dependencies:
+    debug "^2.6.8"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-flowtype@2.35.0:
+  version "2.35.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.35.0.tgz#d17494f0ae8b727c632d8b9d4b4a848e7e0c04af"
+  dependencies:
+    lodash "^4.15.0"
+
+eslint-plugin-import@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.7.0.tgz#21de33380b9efb55f5ef6d2e210ec0e07e7fa69f"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.6.8"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.1"
+    eslint-module-utils "^2.1.1"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    read-pkg-up "^2.0.0"
+
+eslint-plugin-jsx-a11y@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
+  dependencies:
+    aria-query "^0.7.0"
+    array-includes "^3.0.3"
+    ast-types-flow "0.0.7"
+    axobject-query "^0.1.0"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.4.0"
+
+eslint-plugin-react@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.1.0.tgz#27770acf39f5fd49cd0af4083ce58104eb390d4c"
+  dependencies:
+    doctrine "^2.0.0"
+    has "^1.0.1"
+    jsx-ast-utils "^1.4.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@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.4.1.tgz#99cd7eafcffca2ff99a5c8f5f2a474d6364b4bd3"
+  dependencies:
+    ajv "^5.2.0"
+    babel-code-frame "^6.22.0"
+    chalk "^1.1.3"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^2.6.8"
+    doctrine "^2.0.0"
+    eslint-scope "^3.7.1"
+    espree "^3.5.0"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^9.17.0"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    inquirer "^3.0.6"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.2"
+    pluralize "^4.0.0"
+    progress "^2.0.0"
+    require-uncached "^1.0.3"
+    semver "^5.3.0"
+    strip-json-comments "~2.0.1"
+    table "^4.0.1"
+    text-table "~0.2.0"
+
+espree@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.0.tgz#98358625bdd055861ea27e2867ea729faf463d8d"
+  dependencies:
+    acorn "^5.1.1"
+    acorn-jsx "^3.0.0"
+
+esprima@^2.6.0, esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
+esrecurse@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  dependencies:
+    estraverse "^4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+
+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.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
+
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  dependencies:
+    original ">=0.0.5"
+
+evp_bytestokey@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.2.tgz#f66bb88ecd57f71a766821e20283ea38c68bf80a"
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.0.tgz#14f75de3f20d286ef933099b2ce50a90359cef10"
+  dependencies:
+    merge "^1.1.3"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    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"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+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"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+express@^4.13.3:
+  version "4.15.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.4.tgz#032e2253489cf8fce02666beca3d11ed7a2daed1"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.2"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "2.6.8"
+    depd "~1.1.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.0"
+    finalhandler "~1.0.4"
+    fresh "0.5.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    path-to-regexp "0.1.7"
+    proxy-addr "~1.1.5"
+    qs "6.5.0"
+    range-parser "~1.2.0"
+    send "0.15.4"
+    serve-static "1.12.4"
+    setprototypeof "1.0.3"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.0"
+    vary "~1.1.1"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+external-editor@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.4.tgz#1ed9199da9cbfe2ef2f7a31b2fde8b0d12368972"
+  dependencies:
+    iconv-lite "^0.4.17"
+    jschardet "^1.4.2"
+    tmp "^0.0.31"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.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"
+
+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"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+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.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^1.8.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.2.tgz#a24cf47827f82d38fb59a69ad70b76e3b6ae7383"
+  dependencies:
+    bser "1.0.2"
+
+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"
+
+fbjs@^0.8.12, fbjs@^0.8.9:
+  version "0.8.14"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+figures@^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"
+
+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"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-loader@0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
+  dependencies:
+    loader-utils "^1.0.2"
+
+file-saver@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.3.tgz#cdd4c44d3aa264eac2f68ec165bc791c34af1232"
+
+file-uri-to-path@1.0.0:
+  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"
+
+filesize@3.5.10:
+  version "3.5.10"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.10.tgz#fc8fa23ddb4ef9e5e0ab6e1e64f679a24a56761f"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+filled-array@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
+
+finalhandler@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.4.tgz#18574f2e7c4b98b8ae3b230c21f201f31bdb3fb7"
+  dependencies:
+    debug "2.6.8"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    statuses "~1.3.1"
+    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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.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@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
+  dependencies:
+    circular-json "^0.3.1"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  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"
+
+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.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+
+fs-extra@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@1.1.2, fsevents@1.2.13, fsevents@^1.0.0:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+function-bind@^1.0.2, function-bind@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+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"
+
+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"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+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"
+
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
+  dependencies:
+    fbjs "^0.8.12"
+    inline-style-prefixer "^3.0.6"
+    object-assign "^4.1.1"
+    prop-types "^15.5.10"
+    through "^2.3.8"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.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"
+  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@1.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"
+  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"
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globals@^9.17.0, globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.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"
+
+got@^5.0.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
+  dependencies:
+    create-error-class "^3.0.1"
+    duplexer2 "^0.1.4"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    node-status-codes "^1.0.0"
+    object-assign "^4.0.1"
+    parse-json "^2.1.0"
+    pinkie-promise "^2.0.0"
+    read-all-stream "^3.0.0"
+    readable-stream "^2.0.5"
+    timed-out "^3.0.0"
+    unzip-response "^1.0.2"
+    url-parse-lax "^1.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+
+gzip-size@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+  dependencies:
+    duplexer "^0.1.1"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+
+handlebars@^4.0.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.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.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+he@1.1.x:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+
+hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
+  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"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+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"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+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"
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+html-entities@1.2.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.2.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.3.tgz#4a275e3b1a16639abb79b4c11191ff0d0fcf1ab9"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.1.x"
+    commander "2.11.x"
+    he "1.1.x"
+    ncname "1.0.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.0.x"
+
+html-webpack-plugin@2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz#e987f421853d3b6938c8c4c8171842e5fd17af23"
+  dependencies:
+    bluebird "^3.4.7"
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    toposort "^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.1, 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-proxy-middleware@~0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy@^1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+hyphenate-style-name@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
+iconv-lite@0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+iconv-lite@^0.4.17, iconv-lite@~0.4.13:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
+
+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@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+ignore@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inline-style-prefixer@^3.0.6:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.7.tgz#0ccc92e5902fe6e0d28d975c4258443f880615f8"
+  dependencies:
+    bowser "^1.6.0"
+    css-in-js-utils "^1.0.3"
+
+inquirer@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.1.tgz#06ceb0f540f45ca548c17d6840959878265fa175"
+  dependencies:
+    ansi-escapes "^2.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.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"
+    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"
+    through "^2.3.6"
+
+inquirer@^3.0.6:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.2.tgz#c2aaede1507cc54d826818737742d621bef2e823"
+  dependencies:
+    ansi-escapes "^2.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.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"
+    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"
+    through "^2.3.6"
+
+internal-ip@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  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"
+
+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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.4.0.tgz#296aca878a821816e5b85d0a285a99bcff4582f0"
+
+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-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+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-ci@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.0.10.tgz#f739336b2632365061a9d48270cd56ae3369318e"
+  dependencies:
+    ci-info "^1.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-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  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"
+  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-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"
+  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"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-obj@^1.0.0:
+  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.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.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"
+  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-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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+
+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-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+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"
+
+is-root@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5"
+
+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"
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
+
+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"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-api@^1.1.1:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.12.tgz#92d67e9d8f9ea87349a64a70ddf5a7a8cdf97f21"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-hook "^1.0.7"
+    istanbul-lib-instrument "^1.7.5"
+    istanbul-lib-report "^1.1.1"
+    istanbul-lib-source-maps "^1.2.1"
+    istanbul-reports "^1.1.1"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
+
+istanbul-lib-hook@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.7.tgz#dd6607f03076578fe7d6f2a630cf143b49bacddc"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.2, istanbul-lib-instrument@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.5.tgz#adb596f8f0cb8b95e739206351a38a586af21b1e"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.17.4"
+    istanbul-lib-coverage "^1.1.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#f0e55f56655ffa34222080b7a0cd4760e1405fc9"
+  dependencies:
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.1.tgz#a6fe1acba8ce08eebc638e572e294d267008aa0c"
+  dependencies:
+    debug "^2.6.3"
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.1.tgz#042be5c89e175bc3f86523caab29c014e77fee4e"
+  dependencies:
+    handlebars "^4.0.3"
+
+jest-changed-files@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-20.0.3.tgz#9394d5cc65c438406149bef1bf4d52b68e03e3f8"
+
+jest-cli@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-20.0.4.tgz#e532b19d88ae5bc6c417e8b0593a6fe954b1dc93"
+  dependencies:
+    ansi-escapes "^1.4.0"
+    callsites "^2.0.0"
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    is-ci "^1.0.10"
+    istanbul-api "^1.1.1"
+    istanbul-lib-coverage "^1.0.1"
+    istanbul-lib-instrument "^1.4.2"
+    istanbul-lib-source-maps "^1.1.0"
+    jest-changed-files "^20.0.3"
+    jest-config "^20.0.4"
+    jest-docblock "^20.0.3"
+    jest-environment-jsdom "^20.0.3"
+    jest-haste-map "^20.0.4"
+    jest-jasmine2 "^20.0.4"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve-dependencies "^20.0.3"
+    jest-runtime "^20.0.4"
+    jest-snapshot "^20.0.3"
+    jest-util "^20.0.3"
+    micromatch "^2.3.11"
+    node-notifier "^5.0.2"
+    pify "^2.3.0"
+    slash "^1.0.0"
+    string-length "^1.0.1"
+    throat "^3.0.0"
+    which "^1.2.12"
+    worker-farm "^1.3.1"
+    yargs "^7.0.2"
+
+jest-config@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-20.0.4.tgz#e37930ab2217c913605eff13e7bd763ec48faeea"
+  dependencies:
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    jest-environment-jsdom "^20.0.3"
+    jest-environment-node "^20.0.3"
+    jest-jasmine2 "^20.0.4"
+    jest-matcher-utils "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-validate "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-diff@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-20.0.3.tgz#81f288fd9e675f0fb23c75f1c2b19445fe586617"
+  dependencies:
+    chalk "^1.1.3"
+    diff "^3.2.0"
+    jest-matcher-utils "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-docblock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
+
+jest-environment-jsdom@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-20.0.3.tgz#048a8ac12ee225f7190417713834bb999787de99"
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+    jsdom "^9.12.0"
+
+jest-environment-node@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-20.0.3.tgz#d488bc4612af2c246e986e8ae7671a099163d403"
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+
+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"
+  dependencies:
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.11"
+    jest-docblock "^20.0.3"
+    micromatch "^2.3.11"
+    sane "~1.6.0"
+    worker-farm "^1.3.1"
+
+jest-jasmine2@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-20.0.4.tgz#fcc5b1411780d911d042902ef1859e852e60d5e1"
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-matchers "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-snapshot "^20.0.3"
+    once "^1.4.0"
+    p-map "^1.1.1"
+
+jest-matcher-utils@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz#b3a6b8e37ca577803b0832a98b164f44b7815612"
+  dependencies:
+    chalk "^1.1.3"
+    pretty-format "^20.0.3"
+
+jest-matchers@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matchers/-/jest-matchers-20.0.3.tgz#ca69db1c32db5a6f707fa5e0401abb55700dfd60"
+  dependencies:
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+
+jest-message-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-20.0.3.tgz#6aec2844306fcb0e6e74d5796c1006d96fdd831c"
+  dependencies:
+    chalk "^1.1.3"
+    micromatch "^2.3.11"
+    slash "^1.0.0"
+
+jest-mock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-20.0.3.tgz#8bc070e90414aa155c11a8d64c869a0d5c71da59"
+
+jest-regex-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-20.0.3.tgz#85bbab5d133e44625b19faf8c6aa5122d085d762"
+
+jest-resolve-dependencies@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-20.0.3.tgz#6e14a7b717af0f2cb3667c549de40af017b1723a"
+  dependencies:
+    jest-regex-util "^20.0.3"
+
+jest-resolve@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-20.0.4.tgz#9448b3e8b6bafc15479444c6499045b7ffe597a5"
+  dependencies:
+    browser-resolve "^1.11.2"
+    is-builtin-module "^1.0.0"
+    resolve "^1.3.2"
+
+jest-runtime@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-20.0.4.tgz#a2c802219c4203f754df1404e490186169d124d8"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^20.0.3"
+    babel-plugin-istanbul "^4.0.0"
+    chalk "^1.1.3"
+    convert-source-map "^1.4.0"
+    graceful-fs "^4.1.11"
+    jest-config "^20.0.4"
+    jest-haste-map "^20.0.4"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-util "^20.0.3"
+    json-stable-stringify "^1.0.1"
+    micromatch "^2.3.11"
+    strip-bom "3.0.0"
+    yargs "^7.0.2"
+
+jest-snapshot@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-20.0.3.tgz#5b847e1adb1a4d90852a7f9f125086e187c76566"
+  dependencies:
+    chalk "^1.1.3"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-util "^20.0.3"
+    natural-compare "^1.4.0"
+    pretty-format "^20.0.3"
+
+jest-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-20.0.3.tgz#0c07f7d80d82f4e5a67c6f8b9c3fe7f65cfd32ad"
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-message-util "^20.0.3"
+    jest-mock "^20.0.3"
+    jest-validate "^20.0.3"
+    leven "^2.1.0"
+    mkdirp "^0.5.1"
+
+jest-validate@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-20.0.3.tgz#d0cfd1de4f579f298484925c280f8f1d94ec3cab"
+  dependencies:
+    chalk "^1.1.3"
+    jest-matcher-utils "^20.0.3"
+    leven "^2.1.0"
+    pretty-format "^20.0.3"
+
+jest@20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-20.0.4.tgz#3dd260c2989d6dad678b1e9cc4d91944f6d602ac"
+  dependencies:
+    jest-cli "^20.0.4"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+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-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jschardet@^1.4.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.1.tgz#c519f629f86b3a5bedba58a88d311309eec097f9"
+
+jsdom@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.1"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-loader@^0.5.4:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+
+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@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+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, json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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@^1.4.0, jsx-ast-utils@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
+
+kind-of@^3.0.2:
+  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"
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+latest-version@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
+  dependencies:
+    package-json "^2.0.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-req@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+
+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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+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"
+
+loader-fs-cache@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "0.5.1"
+
+loader-runner@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
+
+loader-utils@^0.2.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.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"
+
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+
+lodash.defaults@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
+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.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.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+
+loglevel@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.4.1.tgz#95b383f91a3c2756fd4ab093667e4309161f2bcd"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.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"
+
+lowercase-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+
+lru-cache@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+make-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  dependencies:
+    pify "^2.3.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"
+
+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"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.17"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.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"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  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"
+
+merge@^1.1.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.0.tgz#4a62fb1d42933c05583982f4c716f6fb9e6c6d3d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+"mime-db@>= 1.29.0 < 2", mime-db@~1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.29.0.tgz#48d26d235589651704ac5916ca06001914266878"
+
+mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.7:
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.16.tgz#2b858a52e5ecd516db897ac2be87487830698e23"
+  dependencies:
+    mime-db "~1.29.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+mime@1.3.x, mime@^1.3.4:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
+
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@^3.0.2, minimatch@^3.0.3, 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.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"
+
+mkdirp@0.5.1, mkdirp@0.5.x, 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"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+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.1.1"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  dependencies:
+    dns-packet "^1.0.1"
+    thunky "^0.1.0"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
+nan@^2.12.1:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.18.0.tgz#26a6faae7ffbeb293a39660e88a76b82e30b7554"
+  integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+ncname@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+  dependencies:
+    xml-char-classes "^1.0.0"
+
+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"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-fetch@^1.0.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.2.tgz#c54e9aac57e432875233525f3c891c4159ffefd7"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-forge@0.6.33:
+  version "0.6.33"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+
+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.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    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 "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-notifier@^5.0.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
+  dependencies:
+    growly "^1.3.0"
+    semver "^5.3.0"
+    shellwords "^0.1.0"
+    which "^1.2.12"
+
+node-status-codes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  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.0.0, normalize-path@^2.0.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-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.4.0:
+  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"
+
+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"
+
+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"
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.1.tgz#7ae9b07b0ea804db7e25f05cb5fe4097d4e4949f"
+
+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:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-hash@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.8.tgz#28a659cf987d96a4dabe7860289f3b5326c4a03c"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+
+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.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"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+opn@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  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"
+
+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@>=0.0.5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  dependencies:
+    url-parse "1.0.x"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  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"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.0:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^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-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+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-map@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a"
+
+package-json@^2.0.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
+  dependencies:
+    got "^5.0.0"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+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"
+
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  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-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.1.0, 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-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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, 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"
+
+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"
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+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-to-regexp@^1.0.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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"
+
+pbkdf2@^3.0.3:
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.13.tgz#c37d295531e786b1da3e3eadc840426accb0ae25"
+  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@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+pify@^2.0.0, pify@^2.3.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"
+
+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"
+
+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"
+
+pluralize@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
+
+portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-flexbugs-fixes@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.2.0.tgz#9b8b932c53f9cf13ba0f61875303e447c33dcc51"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.6.tgz#8c7e0055a3df1889abc6bad52dd45b2f41bbc6fc"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.2"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.3.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-scope@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-values@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, 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-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
+  version "5.2.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.6:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.9.tgz#54819766784a51c65b1ec4d54c2f93765438c35a"
+  dependencies:
+    chalk "^2.1.0"
+    source-map "^0.5.6"
+    supports-color "^4.2.1"
+
+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, prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+
+pretty-error@^2.0.2:
+  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@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-20.0.3.tgz#020e350a560a1fe1a98dc3beb6ccffb386de8b14"
+  dependencies:
+    ansi-regex "^2.1.1"
+    ansi-styles "^3.0.0"
+
+private@^0.1.6, private@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
+
+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"
+
+process@^0.11.0:
+  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@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
+  dependencies:
+    asap "~2.0.3"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.10, prop-types@^15.5.4:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
+proxy-addr@~1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.4.0"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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"
+
+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"
+
+q@^1.1.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
+
+qs@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
+
+qs@~6.4.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6"
+
+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@0.0.x:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
+
+querystringify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+range-parser@^1.0.3, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+rc@^1.0.1, rc@^1.1.6:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-dev-utils@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.1.1.tgz#09ae7209a81384248db56547e718e65bd3b20eb5"
+  dependencies:
+    address "1.0.2"
+    anser "1.4.1"
+    babel-code-frame "6.22.0"
+    chalk "1.1.3"
+    cross-spawn "5.1.0"
+    detect-port-alt "1.1.3"
+    escape-string-regexp "1.0.5"
+    filesize "3.5.10"
+    global-modules "1.0.0"
+    gzip-size "3.0.0"
+    html-entities "1.2.1"
+    inquirer "3.2.1"
+    is-root "1.0.0"
+    opn "5.1.0"
+    recursive-readdir "2.2.1"
+    shell-quote "1.6.1"
+    sockjs-client "1.1.4"
+    strip-ansi "3.0.1"
+    text-table "0.2.0"
+
+react-dom@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
+react-error-overlay@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-1.0.10.tgz#da8cd1eafac41afdca2a33792b23694ef6c528f1"
+  dependencies:
+    anser "1.4.1"
+    babel-code-frame "6.22.0"
+    babel-runtime "6.23.0"
+    react-dev-utils "^3.1.0"
+    settle-promise "1.0.0"
+    source-map "0.5.6"
+
+react-scripts@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.11.tgz#483d49e27f417ec981ae415a4456120a2a2bc8c1"
+  dependencies:
+    autoprefixer "7.1.2"
+    babel-core "6.25.0"
+    babel-eslint "7.2.3"
+    babel-jest "20.0.3"
+    babel-loader "7.1.1"
+    babel-preset-react-app "^3.0.2"
+    babel-runtime "6.23.0"
+    case-sensitive-paths-webpack-plugin "2.1.1"
+    chalk "1.1.3"
+    css-loader "0.28.4"
+    dotenv "4.0.0"
+    eslint "4.4.1"
+    eslint-config-react-app "^2.0.0"
+    eslint-loader "1.9.0"
+    eslint-plugin-flowtype "2.35.0"
+    eslint-plugin-import "2.7.0"
+    eslint-plugin-jsx-a11y "5.1.1"
+    eslint-plugin-react "7.1.0"
+    extract-text-webpack-plugin "3.0.0"
+    file-loader "0.11.2"
+    fs-extra "3.0.1"
+    html-webpack-plugin "2.29.0"
+    jest "20.0.4"
+    object-assign "4.1.1"
+    postcss-flexbugs-fixes "3.2.0"
+    postcss-loader "2.0.6"
+    promise "8.0.1"
+    react-dev-utils "^3.1.0"
+    react-error-overlay "^1.0.10"
+    style-loader "0.18.2"
+    sw-precache-webpack-plugin "0.11.4"
+    url-loader "0.5.9"
+    webpack "3.5.1"
+    webpack-dev-server "2.7.1"
+    webpack-manifest-plugin "1.2.1"
+    whatwg-fetch "2.0.3"
+  optionalDependencies:
+    fsevents "1.1.2"
+
+react-virtualized@^9.9.0:
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.9.0.tgz#799a6f23819eeb82860d59b82fad33d1d420325e"
+  dependencies:
+    babel-runtime "^6.11.6"
+    classnames "^2.2.3"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    loose-envify "^1.3.0"
+    prop-types "^15.5.4"
+
+react@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
+  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"
+
+read-all-stream@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
+  dependencies:
+    pinkie-promise "^2.0.0"
+    readable-stream "^2.0.0"
+
+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"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.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"
+
+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@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.2.2, readable-stream@^2.2.6, readable-stream@^2.2.9:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  dependencies:
+    inherits "^2.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+recursive-readdir@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"
+  dependencies:
+    minimatch "3.0.3"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  dependencies:
+    balanced-match "^0.4.2"
+
+regenerate@^1.2.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
+regenerator-transform@0.9.11:
+  version "0.9.11"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+registry-auth-token@^3.0.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  dependencies:
+    rc "^1.1.6"
+    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"
+  dependencies:
+    rc "^1.0.1"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  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.1"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "~0.1"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+request@^2.79.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+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@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
+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-uncached@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+requires-port@1.0.x, requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-dir@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  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"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.2.0, resolve@^1.3.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+  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"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@^2.2.8, rimraf@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
+
+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"
+
+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"
+  dependencies:
+    rx-lite "*"
+
+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"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, 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.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sane@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-1.6.0.tgz#9610c452307a135d29c1fdfe2547034180c46775"
+  dependencies:
+    anymatch "^1.3.0"
+    exec-sh "^0.2.0"
+    fb-watchman "^1.8.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.10.0"
+
+sax@^1.2.1, sax@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
+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.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  dependencies:
+    node-forge "0.6.33"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  dependencies:
+    semver "^5.0.3"
+
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+send@0.15.4:
+  version "0.15.4"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.4.tgz#985faa3e284b0273c793364a35c6737bd93905b9"
+  dependencies:
+    debug "2.6.8"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.0"
+    fresh "0.5.0"
+    http-errors "~1.6.2"
+    mime "1.3.4"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+serve-index@^1.7.2:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.0.tgz#d2b280fc560d616ee81b48bf0fa82abed2485ce7"
+  dependencies:
+    accepts "~1.3.3"
+    batch "0.6.1"
+    debug "2.6.8"
+    escape-html "~1.0.3"
+    http-errors "~1.6.1"
+    mime-types "~2.1.15"
+    parseurl "~1.3.1"
+
+serve-static@1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.15.4"
+
+serviceworker-cache-polyfill@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4, setimmediate@^1.0.5:
+  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"
+
+settle-promise@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/settle-promise/-/settle-promise-1.0.0.tgz#697adb58b821f387ce2757c06efc9de5f0ee33d8"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f"
+  dependencies:
+    inherits "^2.0.1"
+
+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.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shellwords@^0.1.0:
+  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"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sockjs-client@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+sockjs@0.3.18:
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^2.0.2"
+
+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@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+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-support@^0.4.15:
+  version "0.4.16"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+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"
+  dependencies:
+    amdefine ">=0.0.4"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+spdy-transport@^2.0.18:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
+
+spdy@^3.4.1:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  dependencies:
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
+    select-hose "^2.0.0"
+    spdy-transport "^2.0.18"
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+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-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+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@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
+  dependencies:
+    strip-ansi "^3.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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@^2.0.0, string-width@^2.1.0:
+  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_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"
+
+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@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+strip-ansi@3.0.1, 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, strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.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-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.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"
+
+style-loader@0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.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@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3:
+  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@^4.0.0, supports-color@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+  dependencies:
+    has-flag "^2.0.0"
+
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+sw-precache-webpack-plugin@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/sw-precache-webpack-plugin/-/sw-precache-webpack-plugin-0.11.4.tgz#a695017e54eed575551493a519dc1da8da2dc5e0"
+  dependencies:
+    del "^2.2.2"
+    sw-precache "^5.1.1"
+    uglify-js "^3.0.13"
+
+sw-precache@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.0.tgz#eb6225ce580ceaae148194578a0ad01ab7ea199c"
+  dependencies:
+    dom-urls "^1.1.0"
+    es6-promise "^4.0.5"
+    glob "^7.1.1"
+    lodash.defaults "^4.2.0"
+    lodash.template "^4.4.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    pretty-bytes "^4.0.2"
+    sw-toolbox "^3.4.0"
+    update-notifier "^1.0.3"
+
+sw-toolbox@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/sw-toolbox/-/sw-toolbox-3.6.0.tgz#26df1d1c70348658e4dea2884319149b7b3183b5"
+  dependencies:
+    path-to-regexp "^1.0.1"
+    serviceworker-cache-polyfill "^4.0.0"
+
+symbol-tree@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+table@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.1.tgz#a8116c133fac2c61f4a420ab6cdf5c4d61f0e435"
+  dependencies:
+    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"
+
+tapable@^0.2.7:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
+
+test-exclude@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+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@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
+
+through@^2.3.6, through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunky@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+
+time-stamp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+
+timed-out@^3.0.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+tmp@^0.0.31:
+  version "0.0.31"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
+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@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+toposort@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"
+
+tough-cookie@^2.3.2, tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+tryit@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+
+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-is@~1.6.15:
+  version "1.6.15"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.15"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+ua-parser-js@^0.7.9:
+  version "0.7.14"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
+
+uglify-js@3.0.x, uglify-js@^3.0.13:
+  version "3.0.28"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.28.tgz#96b8495f0272944787b5843a1679aa326640d5f7"
+  dependencies:
+    commander "~2.11.0"
+    source-map "~0.5.1"
+
+uglify-js@^2.8.29:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  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"
+
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unzip-response@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+
+update-notifier@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
+  dependencies:
+    boxen "^0.6.0"
+    chalk "^1.0.0"
+    configstore "^2.0.0"
+    is-npm "^1.0.0"
+    latest-version "^2.0.0"
+    lazy-req "^1.1.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^2.0.0"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+urijs@^1.16.1:
+  version "1.18.12"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.18.12.tgz#f04d91e1fabb29c16fc842f9a14ee8ddc3fda64e"
+
+url-loader@0.5.9:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "1.3.x"
+
+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"
+  dependencies:
+    prepend-http "^1.0.1"
+
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+url-parse@^1.1.8:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
+  dependencies:
+    querystringify "~1.0.0"
+    requires-port "1.0.x"
+
+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"
+
+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@0.10.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"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^2.0.1, uuid@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+vary@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+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@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+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"
+
+watch@~0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
+
+watchpack@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
+  dependencies:
+    async "^2.1.2"
+    chokidar "^1.7.0"
+    graceful-fs "^4.1.2"
+
+wbuf@^1.1.0, wbuf@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+
+webidl-conversions@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+
+webpack-dev-middleware@^1.11.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    time-stamp "^2.0.0"
+
+webpack-dev-server@2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.7.1.tgz#21580f5a08cd065c71144cf6f61c345bca59a8b8"
+  dependencies:
+    ansi-html "0.0.7"
+    bonjour "^3.5.0"
+    chokidar "^1.6.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    del "^3.0.0"
+    express "^4.13.3"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    internal-ip "^1.2.0"
+    ip "^1.1.5"
+    loglevel "^1.4.1"
+    opn "4.0.2"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.18"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^3.1.1"
+    webpack-dev-middleware "^1.11.0"
+    yargs "^6.0.0"
+
+webpack-manifest-plugin@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.2.1.tgz#e02f0846834ce98dca516946ee3ee679745e7db1"
+  dependencies:
+    fs-extra "^0.30.0"
+    lodash ">=3.5 <5"
+
+webpack-sources@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.5.3"
+
+webpack@3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.1.tgz#b749ee3d2b5a118dad53e8e41585b3f71e75499a"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
+    async "^2.1.2"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
+
+websocket-driver@>=0.5.1:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+  dependencies:
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
+
+whatwg-encoding@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
+  dependencies:
+    iconv-lite "0.4.13"
+
+whatwg-fetch@2.0.3, whatwg-fetch@>=0.10.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+
+whatwg-url@^4.3.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+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.12, which@^1.2.14, which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    isexe "^2.0.0"
+
+widest-line@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+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"
+
+worker-farm@^1.3.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.0.tgz#adfdf0cd40581465ed0a1f648f9735722afd5c8d"
+  dependencies:
+    errno "^0.1.4"
+    xtend "^4.0.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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@^1.1.2:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    slide "^1.1.5"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+xdg-basedir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
+  dependencies:
+    os-homedir "^1.0.0"
+
+xml-char-classes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+
+xml-name-validator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+
+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:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@^6.0.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
+
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.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"
+    yargs-parser "^7.0.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/concurrent/time-slicing/.gitignore b/fixtures/concurrent/time-slicing/.gitignore
new file mode 100644
index 00000000000..d30f40ef442
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/fixtures/concurrent/time-slicing/README.md b/fixtures/concurrent/time-slicing/README.md
new file mode 100644
index 00000000000..2c2b90faa6c
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/README.md
@@ -0,0 +1,44 @@
+# CPU async rendering demo
+
+## What is this fixture?
+
+This is a demo application based on [Dan Abramov's](https://github.com/gaearon) recent [JSConf Iceland talk](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) about React.
+
+It depends on a local build of React and enables us to easily test async "time slicing" APIs in a more "real world app" like context.
+
+## Can I use this code in production?
+
+No. The APIs being tested here are unstable and some of them have still not been released to NPM. For now, this fixture is only a test harness.
+
+There are also known bugs and inefficiencies in main so **don't use this fixture for demonstration purposes either yet**. Until they are fixed, this fixture is **not** indicative of React async rendering performance.
+
+## How do I run this fixture?
+
+### From npm version
+
+```
+# 1: Install fixture dependencies
+cd fixtures/unstable-async/time-slicing/
+yarn
+
+# 2: Run the app
+yarn start
+```
+
+### From React source code
+```shell
+# 1: Build react from source
+cd /path/to/react
+yarn
+yarn build react-dom/index,react/index,react-cache,scheduler --type=NODE
+
+# 2: Install fixture dependencies
+cd fixtures/unstable-async/time-slicing/
+yarn
+
+# 3: Copy React source code over
+yarn copy-source
+
+# 3: Run the app
+yarn start
+```
diff --git a/fixtures/concurrent/time-slicing/package.json b/fixtures/concurrent/time-slicing/package.json
new file mode 100644
index 00000000000..58467673ae4
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "cpu-demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "glamor": "^2.20.40",
+    "react": "0.0.0-experimental-269dd6ec5",
+    "react-dom": "0.0.0-experimental-269dd6ec5",
+    "react-markdown": "^3.2.0",
+    "react-scripts": "^1.1.4",
+    "victory": "^0.25.6"
+  },
+  "scripts": {
+    "copy-source": "cp -r ../../../build/oss-experimental/* ./node_modules/",
+    "dev": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/fixtures/concurrent/time-slicing/public/favicon.ico b/fixtures/concurrent/time-slicing/public/favicon.ico
new file mode 100644
index 00000000000..a11777cc471
Binary files /dev/null and b/fixtures/concurrent/time-slicing/public/favicon.ico differ
diff --git a/fixtures/concurrent/time-slicing/public/index.html b/fixtures/concurrent/time-slicing/public/index.html
new file mode 100644
index 00000000000..ed0ebafa1b7
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/fixtures/concurrent/time-slicing/public/manifest.json b/fixtures/concurrent/time-slicing/public/manifest.json
new file mode 100644
index 00000000000..ef19ec243e7
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/fixtures/concurrent/time-slicing/src/Charts.js b/fixtures/concurrent/time-slicing/src/Charts.js
new file mode 100644
index 00000000000..7c51a14e443
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/src/Charts.js
@@ -0,0 +1,126 @@
+import React, {PureComponent} from 'react';
+import {
+  VictoryArea,
+  VictoryAxis,
+  VictoryChart,
+  VictoryBar,
+  VictoryTheme,
+  VictoryScatter,
+  VictoryStack,
+} from 'victory';
+
+const colors = ['#fff489', '#fa57c1', '#b166cc', '#7572ff', '#69a6f9'];
+
+export default class Charts extends PureComponent {
+  render() {
+    const streamData = this.props.data;
+    return (
+      <div>
+        <div style={{display: 'flex'}}>
+          <VictoryChart
+            theme={VictoryTheme.material}
+            width={400}
+            height={400}
+            style={{
+              parent: {
+                backgroundColor: '#222',
+              },
+            }}>
+            <VictoryAxis
+              style={{
+                axis: {stroke: 'white'},
+                tickLabels: {fill: 'white'},
+              }}
+            />
+            <VictoryAxis
+              style={{
+                axis: {stroke: 'white'},
+                tickLabels: {fill: 'white'},
+              }}
+              dependentAxis
+            />
+            <VictoryScatter
+              data={streamData[0]}
+              size={6}
+              style={{
+                data: {
+                  fill: d => colors[d.x % 5],
+                },
+              }}
+            />
+          </VictoryChart>
+
+          <VictoryChart
+            theme={VictoryTheme.material}
+            width={400}
+            height={400}
+            style={{
+              parent: {
+                backgroundColor: '#222',
+              },
+            }}
+            domainPadding={[20, 20]}>
+            <VictoryAxis
+              style={{
+                axis: {stroke: 'white'},
+                tickLabels: {fill: 'white'},
+              }}
+            />
+            <VictoryAxis
+              style={{
+                axis: {stroke: 'white'},
+                tickLabels: {fill: 'white'},
+              }}
+              dependentAxis
+            />
+            <VictoryBar
+              data={streamData[0]}
+              style={{
+                data: {
+                  fill: d => colors[d.x % 5],
+                  stroke: 'none',
+                  padding: 5,
+                },
+              }}
+            />
+          </VictoryChart>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            position: 'relative',
+            top: '-50px',
+          }}>
+          <VictoryChart
+            theme={VictoryTheme.material}
+            width={800}
+            height={350}
+            style={{
+              parent: {
+                backgroundColor: '#222',
+              },
+            }}>
+            <VictoryAxis
+              style={{
+                axis: {stroke: 'white'},
+                tickLabels: {fill: 'white'},
+              }}
+            />
+            <VictoryAxis
+              style={{
+                axis: {stroke: 'white'},
+                tickLabels: {fill: 'white'},
+              }}
+              dependentAxis
+            />
+            <VictoryStack>
+              {streamData.map((data, i) => (
+                <VictoryArea key={i} data={data} colorScale={colors} />
+              ))}
+            </VictoryStack>
+          </VictoryChart>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/fixtures/concurrent/time-slicing/src/Clock.js b/fixtures/concurrent/time-slicing/src/Clock.js
new file mode 100644
index 00000000000..102bf9a3327
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/src/Clock.js
@@ -0,0 +1,105 @@
+import React, {createRef, PureComponent} from 'react';
+
+const SPEED = 0.003 / Math.PI;
+const FRAMES = 10;
+
+export default class Clock extends PureComponent {
+  faceRef = createRef();
+  arcGroupRef = createRef();
+  clockHandRef = createRef();
+  frame = null;
+  hitCounter = 0;
+  rotation = 0;
+  t0 = Date.now();
+  arcs = [];
+
+  animate = () => {
+    const now = Date.now();
+    const td = now - this.t0;
+    this.rotation = (this.rotation + SPEED * td) % (2 * Math.PI);
+    this.t0 = now;
+
+    this.arcs.push({rotation: this.rotation, td});
+
+    let lx, ly, tx, ty;
+    if (this.arcs.length > FRAMES) {
+      this.arcs.forEach(({rotation, td}, i) => {
+        lx = tx;
+        ly = ty;
+        const r = 145;
+        tx = 155 + r * Math.cos(rotation);
+        ty = 155 + r * Math.sin(rotation);
+        const bigArc = SPEED * td < Math.PI ? '0' : '1';
+        const path = `M${tx} ${ty}A${r} ${r} 0 ${bigArc} 0 ${lx} ${ly}L155 155`;
+        const hue = 120 - Math.min(120, td / 4);
+        const colour = `hsl(${hue}, 100%, ${60 - i * (30 / FRAMES)}%)`;
+        if (i !== 0) {
+          const arcEl = this.arcGroupRef.current.children[i - 1];
+          arcEl.setAttribute('d', path);
+          arcEl.setAttribute('fill', colour);
+        }
+      });
+      this.clockHandRef.current.setAttribute('d', `M155 155L${tx} ${ty}`);
+      this.arcs.shift();
+    }
+
+    if (this.hitCounter > 0) {
+      this.faceRef.current.setAttribute(
+        'fill',
+        `hsla(0, 0%, ${this.hitCounter}%, 0.95)`
+      );
+      this.hitCounter -= 1;
+    } else {
+      this.hitCounter = 0;
+      this.faceRef.current.setAttribute('fill', 'hsla(0, 0%, 5%, 0.95)');
+    }
+
+    this.frame = requestAnimationFrame(this.animate);
+  };
+
+  componentDidMount() {
+    this.frame = requestAnimationFrame(this.animate);
+    if (this.faceRef.current) {
+      this.faceRef.current.addEventListener('click', this.handleClick);
+    }
+  }
+
+  componentDidUpdate() {
+    console.log('componentDidUpdate()', this.faceRef.current);
+  }
+
+  componentWillUnmount() {
+    this.faceRef.current.removeEventListener('click', this.handleClick);
+    if (this.frame) {
+      cancelAnimationFrame(this.frame);
+    }
+  }
+
+  handleClick = e => {
+    e.stopPropagation();
+    this.hitCounter = 50;
+  };
+
+  render() {
+    const paths = new Array(FRAMES);
+    for (let i = 0; i < FRAMES; i++) {
+      paths.push(<path className="arcHand" key={i} />);
+    }
+    return (
+      <div className="stutterer">
+        <svg height="310" width="310">
+          <circle
+            className="clockFace"
+            onClick={this.handleClick}
+            cx={155}
+            cy={155}
+            r={150}
+            ref={this.faceRef}
+          />
+          <g ref={this.arcGroupRef}>{paths}</g>
+          <path className="clockHand" ref={this.clockHandRef} />
+        </svg>
+      </div>
+    );
+  }
+}
diff --git a/fixtures/concurrent/time-slicing/src/index.css b/fixtures/concurrent/time-slicing/src/index.css
new file mode 100644
index 00000000000..c685bb20c4a
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/src/index.css
@@ -0,0 +1,149 @@
+html,
+body {
+  padding: 0px;
+  margin: 0px;
+  user-select: none;
+  font-family: Karla, Helvetica Neue, Helvetica, sans-serif;
+  background: rgb(34, 34, 34);
+  color: white;
+  overflow: hidden;
+}
+
+.VictoryContainer {
+  opacity: 0.8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#root {
+  height: 100vh;
+}
+
+.container {
+  width: 100%;
+  max-width: 960px;
+  margin: auto;
+  padding: 10px;
+}
+
+.rendering {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  zoom: 1.8;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+label {
+  zoom: 1;
+  font-size: 30px;
+}
+
+label.selected {
+  font-weight: bold;
+}
+
+label:nth-child(1).selected {
+  color: rgb(253, 25, 153);
+}
+
+label:nth-child(2).selected {
+  color: rgb(255, 240, 1);
+}
+
+label:nth-child(3).selected {
+  color: #61dafb;
+}
+
+input[type="radio" i]:nth-child(1) {
+  margin-left: 0;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+.input {
+  padding: 16px;
+  font-size: 30px;
+  width: 100%;
+  display: block;
+}
+.input.sync {
+  outline-color: rgba(253, 25, 153, 0.1);
+}
+.input.debounced {
+  outline-color: rgba(255, 240, 1, 0.1);
+}
+.input.async {
+  outline-color: rgba(97, 218, 251, 0.1);
+}
+
+
+label {
+  font-size: 20px;
+}
+
+label label {
+  display: 'inline-block';
+  margin-left: 20px;
+}
+
+.row {
+  flex: 1;
+  display: flex;
+  margin-top: 20px;
+  min-height: 100%;
+}
+
+.column {
+  flex: 1;
+}
+
+.demo {
+  position: relative;
+  min-height: 100vh;
+}
+
+.stutterer {
+  transform: scale(1.5);
+  height: 310px;
+  width: 310px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -256px;
+  bottom: 0;
+  margin: auto;
+  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 200px;
+}
+
+.clockHand {
+  stroke: white;
+  stroke-width: 10px;
+  stroke-linecap: round;
+}
+
+.clockFace {
+  stroke: white;
+  stroke-width: 10px;
+}
+
+.arcHand {
+}
+
+.innerLine {
+  border-radius: 6px;
+  position: absolute;
+  height: 149px;
+  left: 47.5%;
+  top: 0%;
+  width: 5%;
+  background-color: red;
+  transform-origin: bottom center;
+}
diff --git a/fixtures/concurrent/time-slicing/src/index.js b/fixtures/concurrent/time-slicing/src/index.js
new file mode 100644
index 00000000000..73ea91fddfa
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/src/index.js
@@ -0,0 +1,146 @@
+import React, {PureComponent, startTransition} from 'react';
+import {createRoot} from 'react-dom/client';
+import _ from 'lodash';
+import Charts from './Charts';
+import Clock from './Clock';
+import './index.css';
+
+let cachedData = new Map();
+
+class App extends PureComponent {
+  state = {
+    value: '',
+    strategy: 'sync',
+    showDemo: true,
+    showClock: false,
+  };
+
+  // Random data for the chart
+  getStreamData(input) {
+    if (cachedData.has(input)) {
+      return cachedData.get(input);
+    }
+    const multiplier = input.length !== 0 ? input.length : 1;
+    const complexity =
+      (parseInt(window.location.search.slice(1), 10) / 100) * 25 || 25;
+    const data = _.range(5).map(t =>
+      _.range(complexity * multiplier).map((j, i) => {
+        return {
+          x: j,
+          y: (t + 1) * _.random(0, 255),
+        };
+      })
+    );
+    cachedData.set(input, data);
+    return data;
+  }
+
+  componentDidMount() {
+    window.addEventListener('keydown', e => {
+      if (e.key.toLowerCase() === '?') {
+        e.preventDefault();
+        this.setState(state => ({
+          showClock: !state.showClock,
+        }));
+      }
+    });
+  }
+
+  handleChartClick = e => {
+    if (this.state.showDemo) {
+      if (e.shiftKey) {
+        this.setState({showDemo: false});
+      }
+      return;
+    }
+    if (this.state.strategy !== 'async') {
+      this.setState(state => ({
+        showDemo: !state.showDemo,
+      }));
+      return;
+    }
+    if (this._ignoreClick) {
+      return;
+    }
+    this._ignoreClick = true;
+
+    startTransition(() => {
+      this.setState({showDemo: true}, () => {
+        this._ignoreClick = false;
+      });
+    });
+  };
+
+  debouncedHandleChange = _.debounce(value => {
+    if (this.state.strategy === 'debounced') {
+      this.setState({value: value});
+    }
+  }, 1000);
+
+  renderOption(strategy, label) {
+    const {strategy: currentStrategy} = this.state;
+    return (
+      <label className={strategy === currentStrategy ? 'selected' : null}>
+        <input
+          type="radio"
+          checked={strategy === currentStrategy}
+          onChange={() => this.setState({strategy})}
+        />
+        {label}
+      </label>
+    );
+  }
+
+  handleChange = e => {
+    const value = e.target.value;
+    const {strategy} = this.state;
+    switch (strategy) {
+      case 'sync':
+        this.setState({value});
+        break;
+      case 'debounced':
+        this.debouncedHandleChange(value);
+        break;
+      case 'async':
+        // TODO: useTransition hook instead.
+        startTransition(() => {
+          this.setState({value});
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  render() {
+    const {showClock} = this.state;
+    const data = this.getStreamData(this.state.value);
+    return (
+      <div className="container">
+        <div className="rendering">
+          {this.renderOption('sync', 'Synchronous')}
+          {this.renderOption('debounced', 'Debounced')}
+          {this.renderOption('async', 'Concurrent')}
+        </div>
+        <input
+          className={'input ' + this.state.strategy}
+          placeholder="longer input → more components and DOM nodes"
+          defaultValue={this.state.input}
+          onChange={this.handleChange}
+        />
+        <div className="demo" onClick={this.handleChartClick}>
+          {this.state.showDemo && (
+            <Charts data={data} onClick={this.handleChartClick} />
+          )}
+          <div style={{display: showClock ? 'block' : 'none'}}>
+            <Clock />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
diff --git a/fixtures/concurrent/time-slicing/yarn.lock b/fixtures/concurrent/time-slicing/yarn.lock
new file mode 100644
index 00000000000..c5e0f40fc98
--- /dev/null
+++ b/fixtures/concurrent/time-slicing/yarn.lock
@@ -0,0 +1,8738 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abab@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+  integrity sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=
+
+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-dynamic-import@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+  integrity sha1-x1K9IQvvZ5UBtsbLf8hPj0cVjMQ=
+  dependencies:
+    acorn "^4.0.3"
+
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  integrity sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=
+  dependencies:
+    acorn "^4.0.4"
+
+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@^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@^4.0.3, acorn@^4.0.4:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
+
+acorn@^5.0.0, acorn@^5.5.0:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
+address@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+  integrity sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg==
+
+address@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
+
+ajv-keywords@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+  integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
+
+ajv-keywords@^3.0.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^5.0.0, ajv@^5.1.5, ajv@^5.2.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"
+
+ajv@^6.0.1, ajv@^6.12.3:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+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"
+  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+
+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-escapes@^1.4.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.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+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-regex@^2.0.0, ansi-regex@^2.1.1:
+  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-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.0.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.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+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"
+
+anymatch@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  integrity sha1-126/jKlNJ24keja61EpLdKthGZE=
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
+  integrity sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
+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@^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-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:
+  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-includes@^3.0.3, array-includes@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
+  integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.2"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.5"
+
+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-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-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=
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
+
+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.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+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@^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-flow@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
+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@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.2:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
+  dependencies:
+    lodash "^4.17.14"
+
+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.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+autoprefixer@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
+  integrity sha512-C9yv/UF3X+eJTi/zvfxuyfxmLibYrntpF3qoJYrMeQwgUJOZrZvpJiMG2FMQ3qnhWtF/be4pYONBBw95ZGe3vA==
+  dependencies:
+    browserslist "^2.5.1"
+    caniuse-lite "^1.0.30000748"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.13"
+    postcss-value-parser "^3.2.3"
+
+autoprefixer@^6.3.1:
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=
+  dependencies:
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.16"
+    postcss-value-parser "^3.2.3"
+
+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.8.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+
+axobject-query@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
+  integrity sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=
+  dependencies:
+    ast-types-flow "0.0.7"
+
+babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.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.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
+  integrity sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=
+  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.0.0, babel-core@^6.26.0:
+  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"
+    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.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
+babel-eslint@7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  integrity sha1-sv4tgBJkcPXBlELcdXJTqJdxCCc=
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
+babel-generator@^6.18.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"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  integrity sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-builder-react-jsx@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
+  integrity sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA=
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
+
+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"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  integrity sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  integrity sha1-8luCz33BBDPFX3BZLVdGQArCLKo=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+
+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"
+
+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-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  integrity sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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"
+  integrity sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=
+  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"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^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@20.0.3, babel-jest@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-20.0.3.tgz#e4a03b13dc10389e140fc645d09ffc4ced301671"
+  integrity sha1-5KA7E9wQOJ4UD8ZF0J/8TO0wFnE=
+  dependencies:
+    babel-core "^6.0.0"
+    babel-plugin-istanbul "^4.0.0"
+    babel-preset-jest "^20.0.3"
+
+babel-loader@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
+  integrity sha512-jRwlFbINAeyDStqK6Dd5YuY0k5YuzQUvlz2ZamuXrXmxav3pNqe9vfJ402+2G+OmlJSXxCOpB6Uz0INM7RQe2A==
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.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.22.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-dynamic-import-node@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.1.0.tgz#bd1d88ac7aaf98df4917c384373b04d971a2b37a"
+  integrity sha512-tTfZbM9Ecwj3GK50mnPrUpinTwA4xXmDiQGCk/aBYbvl1+X8YqldK86wZ1owVJ4u3mrKbRlXMma80J18qwiaTQ==
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-istanbul@^4.0.0:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
+  integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
+  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-plugin-jest-hoist@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
+  integrity sha1-r+3IU70/jcNUjqZx++adA8wsF2c=
+
+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"
+  integrity sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=
+
+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-dynamic-import@6.18.0, babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+  integrity sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=
+
+babel-plugin-syntax-flow@^6.18.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:
+  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:
+  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.22.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"
+  integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
+
+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"
+  integrity sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-class-properties@6.24.1:
+  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.22.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.22.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:
+  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"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.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"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.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.23.0, babel-plugin-transform-es2015-destructuring@^6.23.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-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha1-c+s9MQypaePvnskcU3QabxV2Qj4=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.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.22.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.22.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-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  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-modules-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha1-rJl+YoXNGO1hdq22B9YCNErThGg=
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.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.23.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"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.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.22.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-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha1-AMHNsaynERLN8M9hJsLta0V8zbw=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.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-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha1-04sS9C6nMj9yk4fxinxa4frrNek=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.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.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"
+  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
+babel-plugin-transform-react-constant-elements@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz#2f119bf4d2cdd45eb9baaae574053c604f6147dd"
+  integrity sha1-LxGb9NLN1F65uqrldAU8YE9hR90=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.23.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, 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"
+  integrity sha1-322AqdomEqEh5t3XVYvL7PBuY24=
+  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.22.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"
+  integrity sha1-ZqwSFT9c0tF7PBkmj0vwGX9E7NY=
+  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.24.1:
+  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, babel-plugin-transform-regenerator@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+babel-plugin-transform-runtime@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  integrity sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=
+  dependencies:
+    babel-runtime "^6.22.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-preset-env@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
+  integrity sha512-W6VIyA6Ch9ePMI7VptNn2wBM6dbG0eSz25HEiL40nQXCsXGTGZSTZu1Iap+cj3Q0S5a7T9+529l/5Bkvd+afNA==
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.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"
+  integrity sha1-5xIYiHCFrpoktb5Baa/7WZgWxJ0=
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
+babel-preset-jest@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-20.0.3.tgz#cbacaadecb5d689ca1e1de1360ebfc66862c178a"
+  integrity sha1-y6yq3stdaJyh4d4TYOv8ZoYsF4o=
+  dependencies:
+    babel-plugin-jest-hoist "^20.0.3"
+
+babel-preset-react-app@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.1.2.tgz#49ba3681b917c4e5c73a5249d3ef4c48fae064e2"
+  integrity sha512-/sh5Qd5T08PYa6t4kuCdKh9tXp6/m/Jwyx7PJTqugsYMfsDUJMlBXOs5EwFODHprzjWrmQ0SydnMZu9FY4MZYg==
+  dependencies:
+    babel-plugin-dynamic-import-node "1.1.0"
+    babel-plugin-syntax-dynamic-import "6.18.0"
+    babel-plugin-transform-class-properties "6.24.1"
+    babel-plugin-transform-es2015-destructuring "6.23.0"
+    babel-plugin-transform-object-rest-spread "6.26.0"
+    babel-plugin-transform-react-constant-elements "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-plugin-transform-regenerator "6.26.0"
+    babel-plugin-transform-runtime "6.23.0"
+    babel-preset-env "1.6.1"
+    babel-preset-react "6.24.1"
+
+babel-preset-react@6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
+  integrity sha1-umnfrqRfw+xjm2pOzqbhdwLJE4A=
+  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-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"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  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:
+  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"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.23.1, 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"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.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.17.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==
+
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
+balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+  integrity sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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"
+    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"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  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"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.4.7:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
+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, 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=
+
+bowser@^1.7.3:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
+  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
+
+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"
+
+brace-expansion@^1.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"
+
+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.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"
+    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"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+browser-resolve@^1.11.2:
+  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, browserify-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  integrity sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+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"
+
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=
+  dependencies:
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
+
+browserslist@^2.1.2, browserslist@^2.5.1:
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
+  integrity sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==
+  dependencies:
+    caniuse-lite "^1.0.30000792"
+    electron-to-chromium "^1.3.30"
+
+bser@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
+  integrity sha1-OBEWlwsqbe6lZG3RXdcnhES1YWk=
+  dependencies:
+    node-int64 "^0.4.0"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  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"
+  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@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+  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=
+
+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==
+
+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"
+    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-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^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"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+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@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
+
+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=
+
+caniuse-api@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
+  integrity sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=
+  dependencies:
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30001219"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001219.tgz#fee876955d3ae968267f94d724c782029b6f5e9c"
+  integrity sha512-8AHpgdMQKoAiRPGcbugPeiCKDZ0EMBC3rAtCmEYDmmKvpQkAd9Nc4Up1sjOkMFTQy1WwlA+eSpbUEUt8SbAM5w==
+
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
+  version "1.0.30001219"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
+  integrity sha512-c0yixVG4v9KBc/tQ2rlbB3A/bgBFRvl8h8M4IeUbqCca4gsiCfvtaheUssbnux/Mb66Vjz7x8yYjDgYcNQOhyQ==
+
+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==
+
+case-sensitive-paths-webpack-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909"
+  integrity sha1-PSnO2MHxJL9vU4Rvs/WJRzH9yQk=
+
+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"
+  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@1.1.3, 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"
+    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.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"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
+
+chokidar@^2.0.0, chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  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"
+
+chokidar@^3.4.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.3.1"
+
+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==
+
+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.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
+
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
+  dependencies:
+    chalk "^1.1.3"
+
+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"
+
+clean-css@4.2.x:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
+  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
+  dependencies:
+    source-map "~0.6.0"
+
+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-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-width@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  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"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+
+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=
+
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  integrity sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=
+  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"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
+collapse-white-space@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
+
+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"
+
+color-convert@^1.3.0, color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  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"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  integrity sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  integrity sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  integrity sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
+
+combined-stream@^1.0.6, 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.17.x:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
+commander@^2.11.0:
+  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==
+
+commander@~2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
+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==
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.5.2:
+  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.0:
+  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:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.5.tgz#e9af331fadc14dabd544d3e7e76dc446a09a530f"
+  integrity sha512-nlOhI4+fdzoK5xmJ+NY+1gZK56bwEaWZr8fYuXohZ9Vkc1o3a4T/R3M+yE/w7x/ZVJ1zF8c+oaOvF0dztdUgmA==
+  dependencies:
+    dot-prop "^4.2.1"
+    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.3.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==
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+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=
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+
+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-parser@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+  integrity sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==
+
+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==
+
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  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"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+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-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@^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.4.0, core-js@^2.5.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+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=
+
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  integrity sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+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, create-hash@^1.2.0:
+  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.4, create-hmac@^1.1.7:
+  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"
+
+cross-spawn@5.1.0, 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"
+
+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-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-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"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
+
+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@0.28.7:
+  version "0.28.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
+  integrity sha512-GxMpax8a/VgcfRrVy0gXD6yLd5ePYbXX/5zGgTVYp4wXtJklS8Z2VaUArJgc//f6/Dzil7BaJObdSv8eKKCPgg==
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
+css-select@^2.0.2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
+  integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  integrity sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  integrity sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  integrity sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=
+  dependencies:
+    cssom "0.3.x"
+
+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:
+    array-find-index "^1.0.1"
+
+d3-array@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
+
+d3-collection@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
+
+d3-color@1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
+  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
+
+d3-ease@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2"
+  integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
+
+d3-format@1:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
+
+d3-interpolate@1, d3-interpolate@^1.1.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
+  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
+  dependencies:
+    d3-color "1"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-scale@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
+  integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-shape@^1.0.0, d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850"
+  integrity sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==
+  dependencies:
+    d3-time "1"
+
+d3-time@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
+d3-timer@^1.0.0:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+
+d3-voronoi@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
+d@1, d@^1.0.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"
+
+damerau-levenshtein@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
+  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
+
+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"
+
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+  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.0.1, debug@^3.1.0, debug@^3.1.1:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  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.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
+deep-equal@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
+
+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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  integrity sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=
+  dependencies:
+    strip-bom "^2.0.0"
+
+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"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
+del@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  integrity sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=
+  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"
+
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  integrity sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=
+  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"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+des.js@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
+  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-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-node@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
+  integrity sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw==
+
+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"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+diff@^3.2.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+
+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"
+
+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"
+
+doctrine@1.5.0:
+  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.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"
+
+dom-converter@^0.2:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/dom-urls/-/dom-urls-1.1.0.tgz#001ddf81628cd1e706125c7176f53ccec55d918e"
+  integrity sha1-AB3fgWKM0ecGElxxdvU8zsVdkY4=
+  dependencies:
+    urijs "^1.16.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.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.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+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, domutils@^1.7.0:
+  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.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
+  integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==
+  dependencies:
+    is-obj "^1.0.0"
+
+dotenv-expand@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
+  integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
+
+dotenv@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
+  integrity sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0=
+
+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.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  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"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
+  version "1.3.724"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.724.tgz#2d342f2a124e6138462de9a8c87310d0fc993752"
+  integrity sha512-dvHiOuYbTs1kQ9czhBKfapWGeyq3hs469bdbHFNpw01bOeau6B6dH4d8IteGZaMEGqVGmflrvWmxNpwvS+dhkA==
+
+elliptic@^6.5.3, elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+emoji-regex@^6.1.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+  integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
+
+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=
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+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.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
+enhanced-resolve@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
+  integrity sha1-BCHjOf1xQZs9oT0Smzl5BAIwR24=
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    object-assign "^4.0.1"
+    tapable "^0.2.7"
+
+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.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0:
+  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"
+
+es-abstract@^1.18.0-next.2:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
+  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    is-callable "^1.2.3"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.2"
+    is-string "^1.0.5"
+    object-inspect "^1.9.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.0"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  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.46, es5-ext@^0.10.50, es5-ext@~0.10.14:
+  version "0.10.53"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
+  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
+
+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@^4.0.5:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+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:
+  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-symbol@^3.1.1, es6-symbol@~3.1.1, es6-symbol@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
+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.6.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  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-react-app@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz#23c909f71cbaff76b945b831d2d814b8bde169eb"
+  integrity sha512-8QZrKWuHVC57Fmu+SsKAVxnI9LycZl7NFQ4H9L+oeISuCXhYdXqsOOIVSjQFW6JF5MXZLFE+21Syhd7mF1IRZQ==
+
+eslint-import-resolver-node@^0.3.1:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
+  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
+  dependencies:
+    debug "^2.6.9"
+    resolve "^1.13.1"
+
+eslint-loader@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.9.0.tgz#7e1be9feddca328d3dcfaef1ad49d5beffe83a13"
+  integrity sha512-40aN976qSNPyb9ejTqjEthZITpls1SVKtwguahmH1dzGCwQU/vySE+xX33VZmD8csU0ahVNCtFlsPgKqRBiqgg==
+  dependencies:
+    loader-fs-cache "^1.0.0"
+    loader-utils "^1.0.2"
+    object-assign "^4.0.1"
+    object-hash "^1.1.4"
+    rimraf "^2.6.1"
+
+eslint-module-utils@^2.1.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
+  dependencies:
+    debug "^2.6.9"
+    pkg-dir "^2.0.0"
+
+eslint-plugin-flowtype@2.39.1:
+  version "2.39.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5"
+  integrity sha512-RiQv+7Z9QDJuzt+NO8sYgkLGT+h+WeCrxP7y8lI7wpU41x3x/2o3PGtHk9ck8QnA9/mlbNcy/hG0eKvmd7npaA==
+  dependencies:
+    lodash "^4.15.0"
+
+eslint-plugin-import@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz#fa1b6ef31fcb3c501c09859c1b86f1fc5b986894"
+  integrity sha512-Rf7dfKJxZ16QuTgVv1OYNxkZcsu/hULFnC+e+w0Gzi6jMC3guQoWQgxYxc54IDRinlb6/0v5z/PxxIKmVctN+g==
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.6.8"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.1"
+    eslint-module-utils "^2.1.1"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    read-pkg-up "^2.0.0"
+
+eslint-plugin-jsx-a11y@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
+  integrity sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==
+  dependencies:
+    aria-query "^0.7.0"
+    array-includes "^3.0.3"
+    ast-types-flow "0.0.7"
+    axobject-query "^0.1.0"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.4.0"
+
+eslint-plugin-react@7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
+  integrity sha512-tvjU9u3VqmW2vVuYnE8Qptq+6ji4JltjOjJ9u7VAOxVYkUkyBZWRvNYKbDv5fN+L6wiA+4we9+qQahZ0m63XEA==
+  dependencies:
+    doctrine "^2.0.0"
+    has "^1.0.1"
+    jsx-ast-utils "^2.0.0"
+    prop-types "^15.5.10"
+
+eslint-scope@^3.7.1:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
+  integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7"
+  integrity sha512-MMVl8P/dYUFZEvolL8PYt7qc5LNdS2lwheq9BYa5Y07FblhcZqFyaUqlS8TW5QITGex21tV4Lk0a3fK8lsJIkA==
+  dependencies:
+    ajv "^5.2.0"
+    babel-code-frame "^6.22.0"
+    chalk "^2.1.0"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^3.0.1"
+    doctrine "^2.0.0"
+    eslint-scope "^3.7.1"
+    espree "^3.5.1"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^9.17.0"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    inquirer "^3.0.6"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    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"
+    strip-ansi "^4.0.0"
+    strip-json-comments "~2.0.1"
+    table "^4.0.1"
+    text-table "~0.2.0"
+
+espree@^3.5.1:
+  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"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
+
+esprima@^4.0.0, esprima@^4.0.1:
+  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.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+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"
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  integrity sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=
+  dependencies:
+    original ">=0.0.5"
+
+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:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
+  integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==
+  dependencies:
+    merge "^1.2.0"
+
+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"
+    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"
+
+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"
+    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"
+
+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"
+
+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"
+
+express@^4.16.2:
+  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.4.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
+  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
+  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"
+  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.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.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    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"
+    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"
+
+extract-text-webpack-plugin@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
+  integrity sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ==
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
+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"
+  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+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=
+
+fastparse@^1.1.2:
+  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.0:
+  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@^1.8.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.2.tgz#a24cf47827f82d38fb59a69ad70b76e3b6ae7383"
+  integrity sha1-okz0eCf4LTj7Waaa1wt247auc4M=
+  dependencies:
+    bser "1.0.2"
+
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
+  dependencies:
+    bser "2.1.1"
+
+fbjs@^0.8.12:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
+  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-loader@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
+  integrity sha512-RzGHDatcVNpGISTvCpfUfOGpYuSR7HSsSg87ki+wF6rw1Hm0RALPTiAdsxAq1UwLf0RRhbe22/eHK6nhXspiOQ==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
+file-uri-to-path@1.0.0:
+  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"
+  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
+
+fileset@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  integrity sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+filesize@3.5.11:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
+  integrity sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g==
+
+fill-range@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+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"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+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"
+  integrity sha1-yN765XyKUqinhPnjHFfHQumToLk=
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.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"
+
+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"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+flat-cache@^1.2.1:
+  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"
+    graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
+follow-redirects@^1.0.0:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+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"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+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"
+    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=
+
+fs-extra@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  integrity sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  integrity sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+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.1.3, fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+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=
+
+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"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+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-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-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"
+
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
+  integrity sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==
+  dependencies:
+    fbjs "^0.8.12"
+    inline-style-prefixer "^3.0.6"
+    object-assign "^4.1.1"
+    prop-types "^15.5.10"
+    through "^2.3.8"
+
+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"
+
+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.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  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-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@1.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"
+
+globals@^9.17.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"
+  integrity sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
+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"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+  integrity sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=
+
+handlebars@^4.0.3:
+  version "4.7.7"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
+  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.0"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  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"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    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-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
+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.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+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"
+    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"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  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"
+  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, 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.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+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:
+    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"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+hmac-drbg@^1.0.1:
+  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"
+
+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.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.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+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-comment-regex@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
+
+html-encoding-sniffer@^1.0.1:
+  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.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
+  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
+
+html-minifier@^3.2.3:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  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@2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz#e987f421853d3b6938c8c4c8171842e5fd17af23"
+  integrity sha1-6Yf0IYU9O2k4yMTIFxhC5f0XryM=
+  dependencies:
+    bluebird "^3.4.7"
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    toposort "^1.0.0"
+
+htmlparser2@^3.10.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-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.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-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.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.3.tgz#01d2709c79d41698bb01d4decc5e9da4e4a033d9"
+  integrity sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==
+
+http-proxy-middleware@~0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
+  integrity sha1-ZC6ISIUdZvCdTxJJEoRtuutBuDM=
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy@^1.16.2:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  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"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+  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"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+
+hyphenate-style-name@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
+iconv-lite@0.4.24, iconv-lite@^0.4.17:
+  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.2 < 3"
+
+iconv-lite@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
+  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+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=
+
+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:
+    postcss "^6.0.1"
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore@^3.3.3:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
+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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  integrity sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==
+  dependencies:
+    pkg-dir "^2.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"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+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.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, 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:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+inline-style-prefixer@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
+  integrity sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
+inquirer@3.3.0, inquirer@^3.0.6:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.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"
+    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"
+    through "^2.3.6"
+
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  integrity sha1-rp+/k7mEh4eF1QqN4bNWlWBYz1w=
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
+
+invariant@^2.2.2:
+  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=
+
+ip@^1.1.0, 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.1:
+  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@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
+
+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-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
+is-arguments@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
+  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
+  dependencies:
+    call-bind "^1.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-bigint@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
+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-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
+is-buffer@^1.1.4, 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"
+  integrity sha1-VAVy0096wxGfj3bDDLwbHgN6/74=
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.4, is-callable@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
+  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
+
+is-ci@^1.0.10:
+  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.5.0"
+
+is-core-module@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.3.0.tgz#d341652e3408bca69c4671b79a0954a3d349f887"
+  integrity sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==
+  dependencies:
+    has "^1.0.3"
+
+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.2"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
+
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
+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"
+    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"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  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"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
+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.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.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
+
+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-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-glob@^4.0.0, is-glob@^4.0.1, 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-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
+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-negative-zero@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+
+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-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
+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"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+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"
+  integrity sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=
+
+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"
+  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
+  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"
+  integrity sha1-jvW33lBDej/cprToZe96pVy0gDY=
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-obj@^1.0.0, 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.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-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-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, is-regex@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
+  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-symbols "^1.0.1"
+
+is-resolvable@^1.0.0:
+  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.2.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
+  integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
+
+is-root@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5"
+  integrity sha1-B7bCM7w5TNnQK6FclmvWZg1jQtU=
+
+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-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  integrity sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
+  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
+  dependencies:
+    has-symbols "^1.0.1"
+
+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-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
+
+is-whitespace-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
+
+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-word-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
+
+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=
+
+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@^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=
+
+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"
+
+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.1.1:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.7.tgz#a86c770d2b03e11e3f778cd7aedd82d2722092aa"
+  integrity sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.2.1"
+    istanbul-lib-hook "^1.2.2"
+    istanbul-lib-instrument "^1.10.2"
+    istanbul-lib-report "^1.1.5"
+    istanbul-lib-source-maps "^1.2.6"
+    istanbul-reports "^1.5.1"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+
+istanbul-lib-hook@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz#bc6bf07f12a641fbf1c85391d0daa8f0aea6bf86"
+  integrity sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.10.2, istanbul-lib-instrument@^1.4.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+  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.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz#f2a657fc6282f96170aaf281eb30a458f7f4170c"
+  integrity sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==
+  dependencies:
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz#37b9ff661580f8fca11232752ee42e08c6675d8f"
+  integrity sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.5.1.tgz#97e4dbf3b515e8c484caea15d6524eebd3ff4e1a"
+  integrity sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==
+  dependencies:
+    handlebars "^4.0.3"
+
+jest-changed-files@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-20.0.3.tgz#9394d5cc65c438406149bef1bf4d52b68e03e3f8"
+  integrity sha1-k5TVzGXEOEBhSb7xv01Sto4D4/g=
+
+jest-cli@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-20.0.4.tgz#e532b19d88ae5bc6c417e8b0593a6fe954b1dc93"
+  integrity sha1-5TKxnYiuW8bEF+iwWTpv6VSx3JM=
+  dependencies:
+    ansi-escapes "^1.4.0"
+    callsites "^2.0.0"
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    is-ci "^1.0.10"
+    istanbul-api "^1.1.1"
+    istanbul-lib-coverage "^1.0.1"
+    istanbul-lib-instrument "^1.4.2"
+    istanbul-lib-source-maps "^1.1.0"
+    jest-changed-files "^20.0.3"
+    jest-config "^20.0.4"
+    jest-docblock "^20.0.3"
+    jest-environment-jsdom "^20.0.3"
+    jest-haste-map "^20.0.4"
+    jest-jasmine2 "^20.0.4"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve-dependencies "^20.0.3"
+    jest-runtime "^20.0.4"
+    jest-snapshot "^20.0.3"
+    jest-util "^20.0.3"
+    micromatch "^2.3.11"
+    node-notifier "^5.0.2"
+    pify "^2.3.0"
+    slash "^1.0.0"
+    string-length "^1.0.1"
+    throat "^3.0.0"
+    which "^1.2.12"
+    worker-farm "^1.3.1"
+    yargs "^7.0.2"
+
+jest-config@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-20.0.4.tgz#e37930ab2217c913605eff13e7bd763ec48faeea"
+  integrity sha1-43kwqyIXyRNgXv8T5712PsSPruo=
+  dependencies:
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    jest-environment-jsdom "^20.0.3"
+    jest-environment-node "^20.0.3"
+    jest-jasmine2 "^20.0.4"
+    jest-matcher-utils "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-validate "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-diff@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-20.0.3.tgz#81f288fd9e675f0fb23c75f1c2b19445fe586617"
+  integrity sha1-gfKI/Z5nXw+yPHXxwrGURf5YZhc=
+  dependencies:
+    chalk "^1.1.3"
+    diff "^3.2.0"
+    jest-matcher-utils "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-docblock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
+  integrity sha1-F76phDQswz2DxQ++FUXqDvqkRxI=
+
+jest-environment-jsdom@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-20.0.3.tgz#048a8ac12ee225f7190417713834bb999787de99"
+  integrity sha1-BIqKwS7iJfcZBBdxODS7mZeH3pk=
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+    jsdom "^9.12.0"
+
+jest-environment-node@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-20.0.3.tgz#d488bc4612af2c246e986e8ae7671a099163d403"
+  integrity sha1-1Ii8RhKvLCRumG6K52caCZFj1AM=
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+
+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"
+  integrity sha512-0IKAQjUvuZjMCNi/0VNQQF74/H9KB67hsHJqGiwTWQC6XO5Azs7kLWm+6Q/dwuhvDUvABDOBMFK2/FwZ3sZ07Q==
+  dependencies:
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.11"
+    jest-docblock "^20.0.3"
+    micromatch "^2.3.11"
+    sane "~1.6.0"
+    worker-farm "^1.3.1"
+
+jest-jasmine2@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-20.0.4.tgz#fcc5b1411780d911d042902ef1859e852e60d5e1"
+  integrity sha1-/MWxQReA2RHQQpAu8YWehS5g1eE=
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-matchers "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-snapshot "^20.0.3"
+    once "^1.4.0"
+    p-map "^1.1.1"
+
+jest-matcher-utils@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz#b3a6b8e37ca577803b0832a98b164f44b7815612"
+  integrity sha1-s6a443yld4A7CDKpixZPRLeBVhI=
+  dependencies:
+    chalk "^1.1.3"
+    pretty-format "^20.0.3"
+
+jest-matchers@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matchers/-/jest-matchers-20.0.3.tgz#ca69db1c32db5a6f707fa5e0401abb55700dfd60"
+  integrity sha1-ymnbHDLbWm9wf6XgQBq7VXAN/WA=
+  dependencies:
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+
+jest-message-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-20.0.3.tgz#6aec2844306fcb0e6e74d5796c1006d96fdd831c"
+  integrity sha1-auwoRDBvyw5udNV5bBAG2W/dgxw=
+  dependencies:
+    chalk "^1.1.3"
+    micromatch "^2.3.11"
+    slash "^1.0.0"
+
+jest-mock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-20.0.3.tgz#8bc070e90414aa155c11a8d64c869a0d5c71da59"
+  integrity sha1-i8Bw6QQUqhVcEajWTIaaDVxx2lk=
+
+jest-regex-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-20.0.3.tgz#85bbab5d133e44625b19faf8c6aa5122d085d762"
+  integrity sha1-hburXRM+RGJbGfr4xqpRItCF12I=
+
+jest-resolve-dependencies@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-20.0.3.tgz#6e14a7b717af0f2cb3667c549de40af017b1723a"
+  integrity sha1-bhSntxevDyyzZnxUneQK8Bexcjo=
+  dependencies:
+    jest-regex-util "^20.0.3"
+
+jest-resolve@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-20.0.4.tgz#9448b3e8b6bafc15479444c6499045b7ffe597a5"
+  integrity sha1-lEiz6La6/BVHlETGSZBFt//ll6U=
+  dependencies:
+    browser-resolve "^1.11.2"
+    is-builtin-module "^1.0.0"
+    resolve "^1.3.2"
+
+jest-runtime@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-20.0.4.tgz#a2c802219c4203f754df1404e490186169d124d8"
+  integrity sha1-osgCIZxCA/dU3xQE5JAYYWnRJNg=
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^20.0.3"
+    babel-plugin-istanbul "^4.0.0"
+    chalk "^1.1.3"
+    convert-source-map "^1.4.0"
+    graceful-fs "^4.1.11"
+    jest-config "^20.0.4"
+    jest-haste-map "^20.0.4"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-util "^20.0.3"
+    json-stable-stringify "^1.0.1"
+    micromatch "^2.3.11"
+    strip-bom "3.0.0"
+    yargs "^7.0.2"
+
+jest-snapshot@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-20.0.3.tgz#5b847e1adb1a4d90852a7f9f125086e187c76566"
+  integrity sha1-W4R+GtsaTZCFKn+fElCG4YfHZWY=
+  dependencies:
+    chalk "^1.1.3"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-util "^20.0.3"
+    natural-compare "^1.4.0"
+    pretty-format "^20.0.3"
+
+jest-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-20.0.3.tgz#0c07f7d80d82f4e5a67c6f8b9c3fe7f65cfd32ad"
+  integrity sha1-DAf32A2C9OWmfG+LnD/n9lz9Mq0=
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-message-util "^20.0.3"
+    jest-mock "^20.0.3"
+    jest-validate "^20.0.3"
+    leven "^2.1.0"
+    mkdirp "^0.5.1"
+
+jest-validate@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-20.0.3.tgz#d0cfd1de4f579f298484925c280f8f1d94ec3cab"
+  integrity sha1-0M/R3k9XnymEhJJcKA+PHZTsPKs=
+  dependencies:
+    chalk "^1.1.3"
+    jest-matcher-utils "^20.0.3"
+    leven "^2.1.0"
+    pretty-format "^20.0.3"
+
+jest@20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-20.0.4.tgz#3dd260c2989d6dad678b1e9cc4d91944f6d602ac"
+  integrity sha1-PdJgwpidba1nix6cxNkZRPbWAqw=
+  dependencies:
+    jest-cli "^20.0.4"
+
+js-base64@^2.1.9:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
+
+"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-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.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+  integrity sha1-6MVG//ywbADUgzyoRBD+1/igl9Q=
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.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@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+
+json-loader@^0.5.4:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+  integrity sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
+
+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@^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:
+  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.0, 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"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  integrity sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=
+  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=
+
+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"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jsx-ast-utils@^1.4.0:
+  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=
+
+jsx-ast-utils@^2.0.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
+  dependencies:
+    array-includes "^3.1.1"
+    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"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
+
+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"
+  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.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk=
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+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"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
+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"
+
+leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+  integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA=
+
+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"
+
+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"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+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"
+  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+loader-fs-cache@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9"
+  integrity sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "^0.5.1"
+
+loader-runner@^2.3.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@^0.2.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+loader-utils@^1.0.2, loader-utils@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.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._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+  integrity sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=
+
+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.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.template@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
+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@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loglevel@^1.4.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
+  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
+loose-envify@^1.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"
+
+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"
+
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
+
+lowercase-keys@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
+
+lru-cache@^4.0.1:
+  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"
+
+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"
+
+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"
+
+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"
+
+markdown-escapes@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
+
+math-expression-evaluator@^1.2.14:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.3.7.tgz#1b62225db86af06f7ea1fd9576a34af605a5b253"
+  integrity sha512-nrbaifCl42w37hYd6oRLvoymFK42tWB+WQTMFtksDGQMi5GvlJwnz/CsS30FFAISFLtX+A0csJ0xLiuuyyec7w==
+
+math-random@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
+  integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
+
+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"
+
+mdast-add-list-metadata@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf"
+  integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==
+  dependencies:
+    unist-util-visit-parents "1.1.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"
+
+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"
+
+meow@^3.3.0, meow@^3.7.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@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
+  integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
+
+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:
+  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"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+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"
+    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"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.47.0, "mime-db@>= 1.43.0 < 2":
+  version "1.47.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
+  integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
+
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+  version "2.1.30"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
+  integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
+  dependencies:
+    mime-db "1.47.0"
+
+mime@1.6.0, mime@^1.4.1, mime@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+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.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@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  integrity sha1-Kk5AkLlrLbBqnX3wEFWmKnfJt3Q=
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@^3.0.2, minimatch@^3.0.3, 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@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mixin-deep@^1.2.0:
+  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.1, mkdirp@^0.5.5, mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+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==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
+
+nan@^2.12.1:
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
+  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
+
+nanomatch@^1.2.9:
+  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-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"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+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:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+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=
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
+  dependencies:
+    lower-case "^1.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-forge@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
+  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
+
+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@^2.0.0:
+  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-notifier@^5.0.2:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.5.tgz#0cbc1a2b0f658493b4025775a13ad938e96091ef"
+  integrity sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  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"
+    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, 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-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+normalize-url@^1.4.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.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"
+
+nth-check@^1.0.2:
+  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"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
+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=
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
+  integrity sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==
+
+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.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-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-hash@^1.1.4:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
+object-inspect@^1.9.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.2.tgz#b6385a3e2b7cae0b5eafcf90cddf85d128767f30"
+  integrity sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA==
+
+object-is@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+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.1.0, object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+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"
+
+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.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
+
+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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
+  dependencies:
+    mimic-fn "^1.0.0"
+
+opn@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.2.0.tgz#71fdf934d6827d676cecbea1531f95d354641225"
+  integrity sha512-Jd/GpzPyHF4P2/aNOVmS3lfMSWV9J7cOhCG1s08XCEAsPkB7lp6ddiU0J7XzyQRDUh8BqJ7PchfINjR8jyofRQ==
+  dependencies:
+    is-wsl "^1.1.0"
+
+opn@^5.1.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"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  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"
+
+original@>=0.0.5:
+  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-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
+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-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=
+
+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-limit@^1.1.0:
+  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-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-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
+
+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=
+
+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"
+
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
+  dependencies:
+    no-case "^2.2.0"
+
+parse-asn1@^5.0.0, parse-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-entities@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+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@^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-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=
+
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+  integrity sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=
+
+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.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:
+  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, 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-to-regexp@^1.0.1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
+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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
+  dependencies:
+    pify "^2.0.0"
+
+pbkdf2@^3.0.3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  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"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
+
+pify@^2.0.0, pify@^2.3.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=
+
+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=
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
+  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"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
+  dependencies:
+    find-up "^2.1.0"
+
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
+
+portfinder@^1.0.9:
+  version "1.0.28"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
+  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
+  dependencies:
+    async "^2.6.2"
+    debug "^3.1.1"
+    mkdirp "^0.5.5"
+
+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-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  integrity sha1-d7rnypKK2FcW4v2kLyYb98HWW14=
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  integrity sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  integrity sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  integrity sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+  integrity sha1-uavye4isGIFYpesSq8riAmO5GTI=
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  integrity sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  integrity sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  integrity sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec"
+  integrity sha512-T53GVFsdinJhgwm7rg1BzbeBRomOg9y5MBVhGcsV0CxurUdVj1UlPdKtn7aqYA/c/QVkzKMjq2bSV5dKG5+AwQ==
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-flexbugs-fixes@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.2.0.tgz#9b8b932c53f9cf13ba0f61875303e447c33dcc51"
+  integrity sha512-0AuD9HG1Ey3/3nqPWu9yqf7rL0KCPu5VgjDsjf5mzEcuo9H/z8nco/fljKgjsOUrZypa95MI0kS4xBZeBzz2lw==
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  integrity sha1-U56a/J3chiASHr+djDZz4M5Q0oo=
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  integrity sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  integrity sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.8.tgz#8c67ddb029407dfafe684a406cfc16bad2ce0814"
+  integrity sha512-KtXBiQ/r/WYW8LxTSJK7h8wLqvCMSub/BqmRnud/Mu8RzwflW9cmXxwsMwbn15TNv287Hcufdb3ZSs7xHKnG8Q==
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.3.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  integrity sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  integrity sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  integrity sha1-0d9d+qexrMO+VT8OnhDofGG19yE=
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+  integrity sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  integrity sha1-S1jttWZB66fIR0qzUmyv17vey2k=
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  integrity sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  integrity sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  integrity sha1-ssapjAByz5G5MtGkllCBFDEXNb8=
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.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.0.1:
+  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.0.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.1.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-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  integrity sha1-757nEhLX/nWceO0WL2HtYrXLk/E=
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  integrity sha1-EI90s/L82viRov+j6kWSJ5/HgiI=
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  integrity sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  integrity sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  integrity sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  integrity sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  integrity sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  integrity sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  integrity sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, 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-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  integrity sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
+  version "5.2.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
+  integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
+  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.0, 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=
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
+
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+  integrity sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=
+
+pretty-error@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^2.0.4"
+
+pretty-format@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-20.0.3.tgz#020e350a560a1fe1a98dc3beb6ccffb386de8b14"
+  integrity sha1-Ag41ClYKH+GpjcO+tsz/s4beixQ=
+  dependencies:
+    ansi-regex "^2.1.1"
+    ansi-styles "^3.0.0"
+
+private@^0.1.6, private@^0.1.7, 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==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+promise@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
+  integrity sha1-5F1osAoXZHttpxG/he1u1HII9FA=
+  dependencies:
+    asap "~2.0.3"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.10, prop-types@^15.6.1:
+  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@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
+  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.1"
+
+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.28:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
+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"
+
+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.2.4:
+  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.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==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+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.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
+  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+
+query-string@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
+  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"
+  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.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+raf@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
+  integrity sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==
+  dependencies:
+    performance-now "^2.1.0"
+
+randomatic@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+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.0.3, 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"
+
+rc@^1.0.1, rc@^1.1.6:
+  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-dev-utils@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.3.tgz#92f97668f03deb09d7fa11ea288832a8c756e35e"
+  integrity sha512-Mvs6ofsc2xTjeZIrMaIfbXfsPVrbdVy/cVqq6SAacnqfMlcBpDuivhWZ1ODGeJ8HgmyWTLH971PYjj/EPCDVAw==
+  dependencies:
+    address "1.0.3"
+    babel-code-frame "6.26.0"
+    chalk "1.1.3"
+    cross-spawn "5.1.0"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "1.0.5"
+    filesize "3.5.11"
+    global-modules "1.0.0"
+    gzip-size "3.0.0"
+    inquirer "3.3.0"
+    is-root "1.0.0"
+    opn "5.2.0"
+    react-error-overlay "^4.0.1"
+    recursive-readdir "2.2.1"
+    shell-quote "1.6.1"
+    sockjs-client "1.1.5"
+    strip-ansi "3.0.1"
+    text-table "0.2.0"
+
+react-dom@0.0.0-experimental-269dd6ec5:
+  version "0.0.0-experimental-269dd6ec5"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-269dd6ec5.tgz#d643f609260a62c099f346747fe3ea4893ff7120"
+  integrity sha512-xCVWboiY+wgTqtbEkZWRaygsz8zyGWUT2VHTq5trVi6i8aQcfHUS5R04Gi6Ccel0ZOuG0cS9uetVvVxU93AMZg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "0.0.0-experimental-269dd6ec5"
+
+react-error-overlay@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
+  integrity sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==
+
+react-fast-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-1.0.0.tgz#813a039155e49b43ceffe99528fe5e9d97a6c938"
+  integrity sha512-dcQpdWr62flXQJuM8/bVEY5/10ad2SYBUafp8H4q4WHR3fTA/MMlp8mpzX12I0CCoEJc1P6QdiMg7U+7lFS6Rw==
+
+react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-markdown@^3.2.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.6.0.tgz#29f6aaab5270c8ef0a5e234093a873ec3e01722b"
+  integrity sha512-TV0wQDHHPCEeKJHWXFfEAKJ8uSEsJ9LgrMERkXx05WV/3q6Ig+59KDNaTmjcoqlCpE/sH5PqqLMh4t0QWKrJ8Q==
+  dependencies:
+    mdast-add-list-metadata "1.0.1"
+    prop-types "^15.6.1"
+    remark-parse "^5.0.0"
+    unified "^6.1.5"
+    unist-util-visit "^1.3.0"
+    xtend "^4.0.1"
+
+react-scripts@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768"
+  integrity sha512-ZXqnbg+kLRaacAkjuedMFTgKu9lNltMDDsuwn37CTV7X2tuZQmDKi08eI3LYvtpjqh5vm8/6BhwHRHkRtvMyJg==
+  dependencies:
+    autoprefixer "7.1.6"
+    babel-core "6.26.0"
+    babel-eslint "7.2.3"
+    babel-jest "20.0.3"
+    babel-loader "7.1.2"
+    babel-preset-react-app "^3.1.2"
+    babel-runtime "6.26.0"
+    case-sensitive-paths-webpack-plugin "2.1.1"
+    chalk "1.1.3"
+    css-loader "0.28.7"
+    dotenv "4.0.0"
+    dotenv-expand "4.2.0"
+    eslint "4.10.0"
+    eslint-config-react-app "^2.1.0"
+    eslint-loader "1.9.0"
+    eslint-plugin-flowtype "2.39.1"
+    eslint-plugin-import "2.8.0"
+    eslint-plugin-jsx-a11y "5.1.1"
+    eslint-plugin-react "7.4.0"
+    extract-text-webpack-plugin "3.0.2"
+    file-loader "1.1.5"
+    fs-extra "3.0.1"
+    html-webpack-plugin "2.29.0"
+    jest "20.0.4"
+    object-assign "4.1.1"
+    postcss-flexbugs-fixes "3.2.0"
+    postcss-loader "2.0.8"
+    promise "8.0.1"
+    raf "3.4.0"
+    react-dev-utils "^5.0.2"
+    resolve "1.6.0"
+    style-loader "0.19.0"
+    sw-precache-webpack-plugin "0.11.4"
+    url-loader "0.6.2"
+    webpack "3.8.1"
+    webpack-dev-server "2.11.3"
+    webpack-manifest-plugin "1.3.2"
+    whatwg-fetch "2.0.3"
+  optionalDependencies:
+    fsevents "^1.1.3"
+
+react@0.0.0-experimental-269dd6ec5:
+  version "0.0.0-experimental-269dd6ec5"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-269dd6ec5.tgz#56d4f5d48b2e8ae07fd07dd8228d5ac4ff75f9b6"
+  integrity sha512-bilyNZ++L0HG4qrQAuZc+IyPLhfRR4BmGWV+6IBkhGyaiG6JkBO3s0YfB58zzP3Fif55xYdUuOOBFYOo6gQ8Nw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.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"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  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@^3.1.1, readable-stream@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  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"
+
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+recursive-readdir@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"
+  integrity sha1-kO8jHQd4xc4JPJpI105cVCLROpk=
+  dependencies:
+    minimatch "3.0.3"
+
+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"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  integrity sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f"
+  integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
+regenerate@^1.2.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
+  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.prototype.flags@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+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-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"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
+
+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"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
+remark-parse@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
+  integrity sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==
+  dependencies:
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.1.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
+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=
+
+renderkid@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.5.tgz#483b1ac59c6601ab30a7a596a5965cabccfdd0a5"
+  integrity sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==
+  dependencies:
+    css-select "^2.0.2"
+    dom-converter "^0.2"
+    htmlparser2 "^3.10.1"
+    lodash "^4.17.20"
+    strip-ansi "^3.0.0"
+
+repeat-element@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+repeat-string@^1.5.2, repeat-string@^1.5.4, 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@^2.79.0:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  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.3"
+    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.5.0"
+    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@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+  integrity sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=
+
+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-uncached@^1.0.3:
+  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:
+  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-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.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
+  integrity sha512-mw7JQNu5ExIkcw4LPih0owX/TZXjD/ZUF/ZQ/pDnkw3ZKhDcZZw5klmBlj6gVMwjQ3Pz5Jgu7F3d0jcDVuEWdw==
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.10.0, resolve@^1.13.1, resolve@^1.3.2:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    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"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
+  dependencies:
+    onetime "^2.0.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==
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@^2.2.8, rimraf@^2.6.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.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:
+    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"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+run-async@^2.2.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+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"
+  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
+  dependencies:
+    rx-lite "*"
+
+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"
+  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
+
+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.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, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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.2 < 3.0.0", 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"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sane@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-1.6.0.tgz#9610c452307a135d29c1fdfe2547034180c46775"
+  integrity sha1-lhDEUjB6E10pwf3+JUcDQYDEZ3U=
+  dependencies:
+    anymatch "^1.3.0"
+    exec-sh "^0.2.0"
+    fb-watchman "^1.8.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.10.0"
+
+sax@^1.2.1, sax@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+scheduler@0.0.0-experimental-269dd6ec5:
+  version "0.0.0-experimental-269dd6ec5"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-269dd6ec5.tgz#6dd271914b9806ddddbe6f697760639a5fb02413"
+  integrity sha512-0/ANyE98hAdAJj3NDQCLZr+DGlWQr8VlbXGDn8voDw/ymGL7jbe6yXRUfEKDX5Q117T4gRV4r0ltHHbPJ4GibA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  integrity sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=
+  dependencies:
+    ajv "^5.0.0"
+
+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.9.1:
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
+  integrity sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==
+  dependencies:
+    node-forge "^0.10.0"
+
+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.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+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"
+
+serve-index@^1.7.2:
+  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"
+
+serviceworker-cache-polyfill@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
+  integrity sha1-3hnuc77yGrPAdAo3sz22JGS6ves=
+
+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-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.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.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"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+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"
+
+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==
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+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"
+  integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
+  dependencies:
+    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"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  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"
+  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"
+    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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.5.tgz#1bb7c0f7222c40f42adf14f4442cbd1269771a83"
+  integrity sha1-G7fA9yIsQPQq3xT0RCy9Eml3GoM=
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+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"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    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.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-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+  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.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"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz#e9c18a410e5ed7e12442a549fbd8afa767038d65"
+  integrity sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==
+
+spdy-transport@^2.0.18:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.1.1.tgz#c54815d73858aadd06ce63001e7d25fa6441623b"
+  integrity sha512-q7D8c148escoB3Z7ySCASadkegMmUZW8Wb/Q1u0/XBgDKMO880rLQDj8Twiew/tYi7ghemKUi/whSYOwE17f5Q==
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
+
+spdy@^3.4.1:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  integrity sha1-Qv9B7OXMD5mjpsKKq7c/XDsDrLw=
+  dependencies:
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
+    select-hose "^2.0.0"
+    spdy-transport "^2.0.18"
+
+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"
+
+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.16.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
+  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+state-toggle@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
+
+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"
+
+"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=
+
+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-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"
+
+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"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
+string-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
+  integrity sha1-VpcPscOFWOnnC3KL894mmsRa36w=
+  dependencies:
+    strip-ansi "^3.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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:
+  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.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+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@~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"
+
+strip-ansi@3.0.1, 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-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-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+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-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:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+
+style-loader@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
+  integrity sha512-9mx9sC9nX1dgP96MZOODpGC6l1RzQBITI2D5WJhu+wnbrSYVKLGuy14XJSLVQih/0GFrPpjelt+s//VcZQ2Evw==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.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, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^4.2.1:
+  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.1.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"
+
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  integrity sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+sw-precache-webpack-plugin@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/sw-precache-webpack-plugin/-/sw-precache-webpack-plugin-0.11.4.tgz#a695017e54eed575551493a519dc1da8da2dc5e0"
+  integrity sha1-ppUBflTu1XVVFJOlGdwdqNotxeA=
+  dependencies:
+    del "^2.2.2"
+    sw-precache "^5.1.1"
+    uglify-js "^3.0.13"
+
+sw-precache@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.1.tgz#06134f319eec68f3b9583ce9a7036b1c119f7179"
+  integrity sha512-8FAy+BP/FXE+ILfiVTt+GQJ6UEf4CVHD9OfhzH0JX+3zoy2uFk7Vn9EfXASOtVmmIVbL3jE/W8Z66VgPSZcMhw==
+  dependencies:
+    dom-urls "^1.1.0"
+    es6-promise "^4.0.5"
+    glob "^7.1.1"
+    lodash.defaults "^4.2.0"
+    lodash.template "^4.4.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    pretty-bytes "^4.0.2"
+    sw-toolbox "^3.4.0"
+    update-notifier "^2.3.0"
+
+sw-toolbox@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/sw-toolbox/-/sw-toolbox-3.6.0.tgz#26df1d1c70348658e4dea2884319149b7b3183b5"
+  integrity sha1-Jt8dHHA0hljk3qKIQxkUm3sxg7U=
+  dependencies:
+    path-to-regexp "^1.0.1"
+    serviceworker-cache-polyfill "^4.0.0"
+
+symbol-tree@^3.2.1:
+  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.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
+  integrity sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==
+  dependencies:
+    ajv "^6.0.1"
+    ajv-keywords "^3.0.0"
+    chalk "^2.1.0"
+    lodash "^4.17.4"
+    slice-ansi "1.0.0"
+    string-width "^2.1.1"
+
+tapable@^0.2.7:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.9.tgz#af2d8bbc9b04f74ee17af2b4d9048f807acd18a8"
+  integrity sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==
+
+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"
+
+test-exclude@^4.2.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
+  integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+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=
+
+throat@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
+  integrity sha512-/EY8VpvlqJ+sFtLPeOgc8Pl7kQVOWv0woD87KTXVHPIAE842FGT+rokxIhe8xIUP1cfgrkt0as0vDLjDiMtr8w==
+
+through@^2.3.6, through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+thunky@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
+
+time-stamp@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.2.0.tgz#917e0a66905688790ec7bbbde04046259af83f57"
+  integrity sha512-zxke8goJQpBeEgD82CXABeMh0LSJcj7CXEd0OHOg45HgcofF7pxNwZm9+RknpxpDhwN4gFpySkApKfFYfRQnUA==
+
+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@^2.0.4:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+tmp@^0.0.33:
+  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"
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
+
+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-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-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-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"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.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"
+
+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==
+
+toposort@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
+  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
+
+tough-cookie@^2.3.2, tough-cookie@~2.5.0:
+  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.28"
+    punycode "^2.1.1"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
+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=
+
+trim-trailing-lines@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
+  integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
+
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
+
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
+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"
+
+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-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"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.0.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d"
+  integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+ua-parser-js@^0.7.18:
+  version "0.7.28"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
+  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
+
+uglify-js@3.4.x:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
+  dependencies:
+    commander "~2.19.0"
+    source-map "~0.6.1"
+
+uglify-js@^2.8.29:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+uglify-js@^3.0.13, uglify-js@^3.1.4:
+  version "3.13.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"
+  integrity sha512-xtB8yEqIkn7zmOyS2zUNBsYCBRhDkvlNxMMY2smuJ/qA8NCHeQvKCF3i9Z4k8FJH4+PJvZRtMrPynfZ75+CSZw==
+
+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"
+  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
+
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  integrity sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
+unbox-primitive@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
+
+unherit@^1.0.4:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
+  dependencies:
+    inherits "^2.0.0"
+    xtend "^4.0.0"
+
+unified@^6.1.5:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
+  integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-string "^0.1.0"
+
+union-value@^1.0.0:
+  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 "^2.0.1"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
+
+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"
+
+unist-util-is@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz#ec037348b6102c897703eee6d0294ca4755a2020"
+  integrity sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
+  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
+
+unist-util-visit-parents@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
+  integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q==
+
+unist-util-visit-parents@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
+  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
+  dependencies:
+    unist-util-is "^3.0.0"
+
+unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
+  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
+  dependencies:
+    unist-util-visit-parents "^2.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.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-notifier@^2.3.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"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+urijs@^1.16.1:
+  version "1.19.6"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.6.tgz#51f8cb17ca16faefb20b9a31ac60f84aa2b7c870"
+  integrity sha512-eSXsXZ2jLvGWeLYlQA3Gh36BcjF+0amo92+wHPyN1mdR8Nxf75fuEuYTd9c0a+m/vhCjRK0ESlE9YNLW+E1VEw==
+
+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-loader@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
+  integrity sha512-h3qf9TNn53BpuXTTcpC+UehiRrl0Cv45Yr/xWayApjw6G8Bg2dGke7rIwDQ39piciWCWrC+WiqLjOh3SUp9n0Q==
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
+
+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@^1.1.8, url-parse@^1.4.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
+  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
+  dependencies:
+    querystringify "^2.1.1"
+    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"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  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"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+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@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"
+
+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"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+
+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.1, uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+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"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  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"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vendors@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
+
+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"
+    extsprintf "^1.2.0"
+
+vfile-location@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
+  integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
+
+vfile-message@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
+  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
+vfile@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
+  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
+victory-chart@^25.2.0:
+  version "25.2.5"
+  resolved "https://registry.yarnpkg.com/victory-chart/-/victory-chart-25.2.5.tgz#70625c4fbe596ca2919e1ee4a1676d5bc9b5cd3e"
+  integrity sha512-TeWJnQNtihWLXjfJR0mb/OMrtcCdxUzhhHTIgg7ALevm/JFQeOOoSjp6AcWAyP5TBiyMgnn0MrAO/WjWQhDPMQ==
+  dependencies:
+    d3-voronoi "^1.1.2"
+    lodash "^4.17.5"
+    react-fast-compare "^1.0.0"
+    victory-core "^21.1.12"
+
+victory-core@^21.1.0, victory-core@^21.1.1, victory-core@^21.1.12:
+  version "21.1.13"
+  resolved "https://registry.yarnpkg.com/victory-core/-/victory-core-21.1.13.tgz#5076e57e450af8e136fd11376ff80213904963d1"
+  integrity sha512-lfC/5rsUxyu96iXKhuHjnsWlqr8z4RIeDcXVAR/dOYulHuVigWkGKsQqnPNWdCZaz9EZNdvAPnwmWmhdzK/R1g==
+  dependencies:
+    d3-ease "^1.0.0"
+    d3-interpolate "^1.1.1"
+    d3-scale "^1.0.0"
+    d3-shape "^1.2.0"
+    d3-timer "^1.0.0"
+    lodash "^4.17.5"
+    react-fast-compare "^1.0.0"
+
+victory-pie@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/victory-pie/-/victory-pie-14.0.2.tgz#fc284febf9c505b5de852e34891492d607145c39"
+  integrity sha512-VOJtJR++GPcN9mg5TNrz8wml1hHVsl74ZT4hsH6E+i1hmsacGBlqz8YQ82VEhwBxxh5z7e8he2/qcVvZcKfHZg==
+  dependencies:
+    d3-shape "^1.0.0"
+    lodash "^4.17.5"
+    victory-core "^21.1.0"
+
+victory@^0.25.6:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/victory/-/victory-0.25.7.tgz#7de7532ba5514f9703da880ffa06c998d86a98fb"
+  integrity sha512-LkCq/fr9IEHa+4fpm8IEtvSmHh9MMf7VvGLNutDT5o1W9QcMANdAfP8RRPVsO031LM5Mt8Mk1w8cQylVqmjMPg==
+  dependencies:
+    victory-chart "^25.2.0"
+    victory-core "^21.1.1"
+    victory-pie "^14.0.2"
+
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+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.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
+  integrity sha1-d3mLLaD5kQ1ZXxrOWwwiWFIfIdw=
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.4.0:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
+
+wbuf@^1.1.0, wbuf@^1.7.2:
+  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"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
+webidl-conversions@^4.0.0:
+  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-dev-middleware@1.12.2:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
+  integrity sha512-FCrqPy1yy/sN6U/SaEZcHKRXGlqU0DUaEBL45jkUYoB8foVb6wCnbIJ1HKIx+qUFTW+3JpVcCJCxZ8VATL4e+A==
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.5.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    time-stamp "^2.0.0"
+
+webpack-dev-server@2.11.3:
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.3.tgz#3fd48a402164a6569d94d3d17f131432631b4873"
+  integrity sha512-Qz22YEFhWx+M2vvJ+rQppRv39JA0h5NNbOOdODApdX6iZ52Diz7vTPXjF7kJlfn+Uc24Qr48I3SZ9yncQwRycg==
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.1.5"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "1.12.2"
+    yargs "6.6.0"
+
+webpack-manifest-plugin@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"
+  integrity sha512-MX60Bv2G83Zks9pi3oLOmRgnPAnwrlMn+lftMrWBm199VQjk46/xgzBi9lPfpZldw2+EI2S+OevuLIaDuxCWRw==
+  dependencies:
+    fs-extra "^0.30.0"
+    lodash ">=3.5 <5"
+
+webpack-sources@^1.0.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@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.8.1.tgz#b16968a81100abe61608b0153c9159ef8bb2bd83"
+  integrity sha512-5ZXLWWsMqHKFr5y0N3Eo5IIisxeEeRAajNq4mELb/WELOR7srdbQk2N5XiyNy2A/AgvlR3AmeBCZJW8lHrolbw==
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
+    async "^2.1.2"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
+
+websocket-driver@>=0.5.1:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
+whatwg-encoding@^1.0.1:
+  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.24"
+
+whatwg-fetch@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+  integrity sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=
+
+whatwg-fetch@>=0.10.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
+whatwg-url@^4.3.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
+  integrity sha1-0pgaqRSMHgCkHFphMRZqtGg7vMA=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+  integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
+
+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.14, which@^1.2.9, which@^1.3.0:
+  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"
+
+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.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
+
+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.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
+
+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.3.1:
+  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"
+
+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.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@^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"
+
+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
+
+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@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+  integrity sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=
+
+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==
+
+y18n@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
+  integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  integrity sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.1.tgz#7ede329c1d8cdbbe209bd25cdb990e9b1ebbb394"
+  integrity sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==
+  dependencies:
+    camelcase "^3.0.0"
+    object.assign "^4.1.0"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  integrity sha1-jQrELxbqVd69MyyvTEA4s+P139k=
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  integrity sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@^7.0.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.2.tgz#63a0a5d42143879fdbb30370741374e0641d55db"
+  integrity sha512-ZEjj/dQYQy0Zx0lgLMLR8QuaqTihnxirir7EwUHp1Axq4e3+k8jXU5K0VLbNvedv1f4EWtBonDIZm0NUr+jCcA==
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.1"
+
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  integrity sha1-YpmpBVsc78lp/355wdkY3Osiw2A=
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.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"
+    yargs-parser "^7.0.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/devtools/regression/14.9.html b/fixtures/devtools/regression/14.9.html
new file mode 100644
index 00000000000..524ff196881
--- /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 00000000000..fde26012c6b
--- /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 00000000000..49813d80a19
--- /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 00000000000..2be6f7c41aa
--- /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 00000000000..cc5c3960d2a
--- /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 00000000000..93b425a644b
--- /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 00000000000..75f722ccabf
--- /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 00000000000..0ec03ee51d1
--- /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 00000000000..1e1403372ca
--- /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 00000000000..a6131e9ae1c
--- /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 00000000000..4d0468d3434
--- /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 00000000000..335adaeffea
--- /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 00000000000..8a881ea3fe0
--- /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 00000000000..ad91102b1b6
--- /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 00000000000..aa8ae33837e
--- /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 00000000000..76fb9823014
--- /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 00000000000..4d96aae0855
--- /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@canary/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>
diff --git a/fixtures/devtools/regression/index.html b/fixtures/devtools/regression/index.html
new file mode 100644
index 00000000000..125a8e8baf9
--- /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 00000000000..1dd291446c6
--- /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@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@canary/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>
diff --git a/fixtures/devtools/regression/server.js b/fixtures/devtools/regression/server.js
new file mode 100755
index 00000000000..34853173a01
--- /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 00000000000..920bd9d130d
--- /dev/null
+++ b/fixtures/devtools/regression/shared.js
@@ -0,0 +1,328 @@
+/* eslint-disable 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/main/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 00000000000..6cbaaa5c014
--- /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/scheduling-profiler/.gitignore b/fixtures/devtools/scheduling-profiler/.gitignore
new file mode 100644
index 00000000000..8f6ca63cde2
--- /dev/null
+++ b/fixtures/devtools/scheduling-profiler/.gitignore
@@ -0,0 +1 @@
+dependencies
diff --git a/fixtures/devtools/scheduling-profiler/README.md b/fixtures/devtools/scheduling-profiler/README.md
new file mode 100644
index 00000000000..10f04c228d9
--- /dev/null
+++ b/fixtures/devtools/scheduling-profiler/README.md
@@ -0,0 +1,15 @@
+# Test fixture for `packages/react-devtools-scheduling-profiler`
+
+1. First, run the fixture:
+```sh
+# In the root directory
+# Download the latest *experimental* React build
+scripts/release/download-experimental-build.js
+
+# Run this fixtures
+fixtures/devtools/scheduling-profiler/run.js
+```
+
+2. Then open [localhost:8000/](http://localhost:8000/) and use the Performance tab in Chrome to reload-and-profile.
+3. Now stop profiling and export JSON.
+4. Lastly, open [react-scheduling-profiler.vercel.app](https://react-scheduling-profiler.vercel.app/) and upload the performance JSON data you just recorded.
\ No newline at end of file
diff --git a/fixtures/devtools/scheduling-profiler/app.js b/fixtures/devtools/scheduling-profiler/app.js
new file mode 100644
index 00000000000..27e452a60ba
--- /dev/null
+++ b/fixtures/devtools/scheduling-profiler/app.js
@@ -0,0 +1,14 @@
+const {createElement, useLayoutEffect, useState} = React;
+const {createRoot} = ReactDOM;
+
+function App() {
+  const [isMounted, setIsMounted] = useState(false);
+  useLayoutEffect(() => {
+    setIsMounted(true);
+  }, []);
+  return createElement('div', null, `isMounted? ${isMounted}`);
+}
+
+const container = document.getElementById('container');
+const root = createRoot(container);
+root.render(createElement(App));
diff --git a/fixtures/devtools/scheduling-profiler/index.html b/fixtures/devtools/scheduling-profiler/index.html
new file mode 100644
index 00000000000..4210a8e61f1
--- /dev/null
+++ b/fixtures/devtools/scheduling-profiler/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Scheduling Profiler Fixture</title>
+
+    <script src="./scheduler.js"></script>
+    <script src="./react.js"></script>
+    <script src="./react-dom.js"></script>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="./app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/devtools/scheduling-profiler/run.js b/fixtures/devtools/scheduling-profiler/run.js
new file mode 100755
index 00000000000..5c0191acca3
--- /dev/null
+++ b/fixtures/devtools/scheduling-profiler/run.js
@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmdirSync,
+} = require('fs');
+const {join} = require('path');
+const http = require('http');
+
+const DEPENDENCIES = [
+  ['scheduler/umd/scheduler.development.js', 'scheduler.js'],
+  ['react/umd/react.development.js', 'react.js'],
+  ['react-dom/umd/react-dom.development.js', 'react-dom.js'],
+];
+
+const BUILD_DIRECTORY = '../../../build/oss-experimental/';
+const DEPENDENCIES_DIRECTORY = 'dependencies';
+
+function initDependencies() {
+  if (existsSync(DEPENDENCIES_DIRECTORY)) {
+    rmdirSync(DEPENDENCIES_DIRECTORY, {recursive: true});
+  }
+  mkdirSync(DEPENDENCIES_DIRECTORY);
+
+  DEPENDENCIES.forEach(([from, to]) => {
+    const fromPath = join(__dirname, BUILD_DIRECTORY, from);
+    const toPath = join(__dirname, DEPENDENCIES_DIRECTORY, to);
+    console.log(`Copying ${fromPath} => ${toPath}`);
+    copyFileSync(fromPath, toPath);
+  });
+}
+
+function initServer() {
+  const host = 'localhost';
+  const port = 8000;
+
+  const requestListener = function (request, response) {
+    let contents;
+    switch (request.url) {
+      case '/react.js':
+      case '/react-dom.js':
+      case '/scheduler.js':
+        response.setHeader('Content-Type', 'text/javascript');
+        response.writeHead(200);
+        contents = readFileSync(
+          join(__dirname, DEPENDENCIES_DIRECTORY, request.url)
+        );
+        response.end(contents);
+        break;
+      case '/app.js':
+        response.setHeader('Content-Type', 'text/javascript');
+        response.writeHead(200);
+        contents = readFileSync(join(__dirname, 'app.js'));
+        response.end(contents);
+        break;
+      case '/index.html':
+      default:
+        response.setHeader('Content-Type', 'text/html');
+        response.writeHead(200);
+        contents = readFileSync(join(__dirname, 'index.html'));
+        response.end(contents);
+        break;
+    }
+  };
+
+  const server = http.createServer(requestListener);
+  server.listen(port, host, () => {
+    console.log(`Server is running on http://${host}:${port}`);
+  });
+}
+
+initDependencies();
+initServer();
diff --git a/fixtures/devtools/standalone/index.html b/fixtures/devtools/standalone/index.html
new file mode 100644
index 00000000000..a7e9af32487
--- /dev/null
+++ b/fixtures/devtools/standalone/index.html
@@ -0,0 +1,384 @@
+<!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 baseInheritedKeys = Object.create(Object.prototype, {
+      enumerableStringBase: {
+        value: 1,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      [Symbol('enumerableSymbolBase')]: {
+        value: 1,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      nonEnumerableStringBase: {
+        value: 1,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      [Symbol('nonEnumerableSymbolBase')]: {
+        value: 1,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+    });
+
+    const inheritedKeys = Object.create(baseInheritedKeys, {
+      enumerableString: {
+        value: 2,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      nonEnumerableString: {
+        value: 3,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      123: {
+        value: 3,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      [Symbol('nonEnumerableSymbol')]: {
+        value: 2,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      [Symbol('enumerableSymbol')]: {
+        value: 3,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      });
+
+      function InheritedKeys() {
+        return <ChildComponent data={inheritedKeys} />;
+      }
+
+      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,
+        },
+      });
+
+      class Foo {
+        flag = false;
+        object = {a: {b: {c: {d: 1}}}}
+      }
+
+      function UnserializableProps() {
+        return (
+          <ChildComponent
+            map={map}
+            set={set}
+            mapOfMaps={mapOfMaps}
+            setOfSets={setOfSets}
+            typedArray={typedArray}
+            immutable={immutable}
+            classInstance={new Foo()}
+          />
+        );
+      }
+
+      function ChildComponent(props: any) {
+        return null;
+      }
+
+      function InspectableElements() {
+        return (
+          <Fragment>
+            <SimpleValues />
+            <ObjectProps />
+            <UnserializableProps />
+            <CustomObject />
+            <InheritedKeys />
+          </Fragment>
+        );
+      }
+
+      function App() {
+        return (
+          <Fragment>
+            <List />
+            <InspectableElements />
+          </Fragment>
+        );
+      }
+
+      ReactDOM.render(<App />, document.getElementById("root"));
+    </script>
+  </body>
+</html>
diff --git a/fixtures/dom/.gitignore b/fixtures/dom/.gitignore
new file mode 100644
index 00000000000..3473f8a18ef
--- /dev/null
+++ b/fixtures/dom/.gitignore
@@ -0,0 +1,25 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+public/scheduler-unstable_mock.development.js
+public/scheduler-unstable_mock.production.min.js
+public/react.development.js
+public/react.production.min.js
+public/react-dom.development.js
+public/react-dom.production.min.js
+public/react-dom-server.browser.development.js
+public/react-dom-server.browser.production.min.js
+public/react-dom-test-utils.development.js
+public/react-dom-test-utils.production.min.js
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/fixtures/dom/README.md b/fixtures/dom/README.md
new file mode 100644
index 00000000000..80e92b16262
--- /dev/null
+++ b/fixtures/dom/README.md
@@ -0,0 +1,17 @@
+# DOM Fixtures
+
+A set of DOM test cases for quickly identifying browser issues.
+
+## Setup
+
+To reference a local build of React, first run `yarn build` at the root
+of the React project. Then:
+
+```
+cd fixtures/dom
+yarn
+yarn dev
+```
+
+The `dev` command runs a script that copies over the local build of react into
+the public directory.
diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
new file mode 100644
index 00000000000..d71dbe3ffae
--- /dev/null
+++ b/fixtures/dom/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react-fixtures",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "^1.0.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": "^29.4.1",
+    "prop-types": "^15.6.0",
+    "query-string": "^4.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "semver": "^5.5.0"
+  },
+  "scripts": {
+    "dev": "react-scripts start",
+    "predev": "cp -a ../../build/oss-experimental/. node_modules",
+    "build": "react-scripts build && cp build/index.html build/200.html",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/fixtures/dom/public/act-dom.html b/fixtures/dom/public/act-dom.html
new file mode 100644
index 00000000000..504a480bfdb
--- /dev/null
+++ b/fixtures/dom/public/act-dom.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>sanity test for ReactTestUtils.act</title>
+  </head>
+  <body>
+    this page tests whether act runs properly in a browser.
+    <br />
+    your console should say "5"
+    <script src="scheduler-unstable_mock.development.js"></script>
+    <script src="react.development.js"></script>
+    <script type="text/javascript">
+      window.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler =
+        window.SchedulerMock;
+    </script>
+    <script src="react-dom.development.js"></script>
+    <script src="react-dom-test-utils.development.js"></script>
+    <script>
+      // from ReactTestUtilsAct-test.js
+      function App() {
+        let [state, setState] = React.useState(0);
+        async function ticker() {
+          await null;
+          setState(x => x + 1);
+        }
+        React.useEffect(() => {
+          ticker();
+        }, [Math.min(state, 4)]);
+        return state;
+      }
+
+      async function testAsyncAct() {
+        const el = document.createElement("div");
+        await ReactTestUtils.act(async () => {
+          ReactDOM.render(React.createElement(App), el);
+        });
+        // all 5 ticks present and accounted for
+        console.log(el.innerHTML);
+      }
+
+      testAsyncAct();
+    </script>
+  </body>
+</html>
diff --git a/fixtures/dom/public/favicon.ico b/fixtures/dom/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/fixtures/dom/public/favicon.ico differ
diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
new file mode 100644
index 00000000000..f6bb303c9a9
--- /dev/null
+++ b/fixtures/dom/public/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+    <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
+    <script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/fixtures/dom/public/react-logo.svg b/fixtures/dom/public/react-logo.svg
new file mode 100644
index 00000000000..9fdd5ed0c98
--- /dev/null
+++ b/fixtures/dom/public/react-logo.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20.46348"><title>logo</title><path d="M18.91 6.633q-.367-.126-.74-.234.062-.252.115-.506c.56-2.72.194-4.912-1.058-5.634-1.2-.692-3.162.03-5.144 1.755q-.293.255-.572.525-.187-.18-.38-.352C9.053.344 6.97-.432 5.72.29 4.523.984 4.168 3.045 4.67 5.623q.077.383.17.762c-.293.084-.578.173-.85.268-2.435.85-3.99 2.18-3.99 3.56 0 1.425 1.67 2.855 4.206 3.72q.308.106.622.196-.102.407-.18.82c-.482 2.533-.106 4.545 1.09 5.235 1.234.712 3.306-.02 5.325-1.784q.24-.208.48-.442.302.293.62.568c1.956 1.682 3.886 2.36 5.08 1.67 1.235-.715 1.636-2.876 1.115-5.505q-.06-.3-.138-.614.218-.064.428-.133C21.285 13.07 23 11.657 23 10.213c0-1.386-1.605-2.725-4.09-3.58zM12.73 2.756c1.698-1.478 3.285-2.06 4.01-1.644.77.444 1.068 2.235.584 4.584q-.047.23-.103.457a23.538 23.538 0 0 0-3.076-.486A23.08 23.08 0 0 0 12.2 3.24q.258-.248.528-.484zM6.79 11.39q.313.604.653 1.19.347.6.722 1.183a20.922 20.922 0 0 1-2.12-.34c.204-.657.454-1.34.746-2.032zm0-2.31c-.286-.678-.53-1.345-.73-1.99.655-.147 1.355-.267 2.084-.358q-.366.57-.705 1.16-.34.586-.65 1.188zm.522 1.156q.454-.945.98-1.854.522-.91 1.114-1.775c.684-.052 1.385-.08 2.094-.08.712 0 1.414.028 2.098.08q.585.865 1.108 1.77.526.906.992 1.845-.46.948-.988 1.862-.523.908-1.104 1.78c-.682.05-1.387.074-2.106.074-.716 0-1.412-.022-2.082-.066q-.596-.87-1.124-1.783-.526-.91-.982-1.854zm8.25 2.34q.346-.603.666-1.22A20.867 20.867 0 0 1 17 13.38a20.852 20.852 0 0 1-2.145.365q.364-.578.706-1.17zm.656-3.495q-.318-.604-.66-1.196-.338-.582-.7-1.15c.733.093 1.436.216 2.097.367a20.96 20.96 0 0 1-.737 1.98zM11.51 3.945a21.013 21.013 0 0 1 1.354 1.634q-1.358-.065-2.718 0c.447-.59.905-1.138 1.365-1.634zM6.214 1.14c.77-.445 2.47.19 4.264 1.783.115.102.23.208.345.318a23.545 23.545 0 0 0-1.96 2.426 24.008 24.008 0 0 0-3.068.477q-.088-.352-.158-.71v.002c-.433-2.21-.146-3.876.577-4.294zM5.09 13.183q-.285-.082-.566-.177A8.324 8.324 0 0 1 1.84 11.58a2.03 2.03 0 0 1-.857-1.368c0-.837 1.248-1.905 3.33-2.63q.393-.138.792-.25a23.565 23.565 0 0 0 1.12 2.904 23.922 23.922 0 0 0-1.134 2.946zm5.326 4.48a8.322 8.322 0 0 1-2.575 1.61 2.03 2.03 0 0 1-1.612.062c-.725-.42-1.027-2.034-.616-4.2q.074-.385.168-.764a23.104 23.104 0 0 0 3.1.448 23.91 23.91 0 0 0 1.974 2.44q-.214.207-.438.403zm1.122-1.112c-.466-.502-.93-1.058-1.384-1.656q.66.026 1.346.026.703 0 1.388-.03a20.894 20.894 0 0 1-1.35 1.66zm5.967 1.367a2.03 2.03 0 0 1-.753 1.428c-.725.42-2.275-.126-3.947-1.564q-.287-.246-.578-.526a23.09 23.09 0 0 0 1.928-2.448 22.936 22.936 0 0 0 3.115-.48q.07.284.124.556a8.32 8.32 0 0 1 .11 3.035zm.834-4.907c-.127.042-.256.082-.388.12a23.06 23.06 0 0 0-1.164-2.913 23.05 23.05 0 0 0 1.12-2.87c.234.067.463.14.683.215 2.13.732 3.428 1.816 3.428 2.65 0 .89-1.403 2.044-3.68 2.798z" fill="#61dafb"/><path d="M11.5 8.159a2.054 2.054 0 1 1-2.054 2.052A2.054 2.054 0 0 1 11.5 8.16" fill="#61dafb"/></svg>
\ No newline at end of file
diff --git a/fixtures/dom/public/renderer.html b/fixtures/dom/public/renderer.html
new file mode 100644
index 00000000000..83abba28c03
--- /dev/null
+++ b/fixtures/dom/public/renderer.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Renderer</title>
+    <style>
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        font-family: sans-serif;
+        margin: 0;
+        height: 100%;
+      }
+
+      body {
+        padding-top: 32px;
+      }
+
+      #status {
+        font-size: 12px;
+        left: 8px;
+        letter-spacing: 0.05em;
+        line-height: 16px;
+        margin: -8px 0 0;
+        max-width: 50%;
+        overflow: hidden;
+        position: absolute;
+        text-align: left;
+        text-overflow: ellipsis;
+        top: 50%;
+        white-space: nowrap;
+        width: 100%;
+      }
+
+      #output {
+        margin: 16px;
+      }
+
+      .header {
+        background: white;
+        border-bottom: 1px solid #d9d9d9;
+        padding: 4px;
+        top: 0;
+        left: 0;
+        position: fixed;
+        width: 100%;
+        text-align: right;
+      }
+
+      .controls {
+        display: inline-block;
+        margin: 0;
+      }
+
+      .button {
+        background: #eee;
+        border-radius: 2px;
+        border: 1px solid #aaa;
+        font-size: 11px;
+        padding: 4px 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <header class="header">
+      <p id="status">Loading</p>
+
+      <menu class="controls">
+        <button class="button" id="hydrate">Hydrate</button>
+        <button class="button" id="reload">Reload</button>
+      </menu>
+    </header>
+
+    <div id="output"></div>
+
+    <script src="https://cdnjs.cloudflare.com/polyfill/v2/polyfill.min.js"></script>
+    <script src="renderer.js"></script>
+  </body>
+</html>
diff --git a/fixtures/dom/public/renderer.js b/fixtures/dom/public/renderer.js
new file mode 100644
index 00000000000..19d89160ca8
--- /dev/null
+++ b/fixtures/dom/public/renderer.js
@@ -0,0 +1,201 @@
+/**
+ * Supports render.html, a piece of the hydration fixture. See /hydration
+ */
+
+'use strict';
+
+(function () {
+  var Fixture = null;
+  var output = document.getElementById('output');
+  var status = document.getElementById('status');
+  var hydrate = document.getElementById('hydrate');
+  var reload = document.getElementById('reload');
+  var renders = 0;
+  var failed = false;
+
+  var needsReactDOM = getBooleanQueryParam('needsReactDOM');
+  var needsCreateElement = getBooleanQueryParam('needsCreateElement');
+
+  function unmountComponent(node) {
+    // ReactDOM was moved into a separate package in 0.14
+    if (needsReactDOM) {
+      ReactDOM.unmountComponentAtNode(node);
+    } else if (React.unmountComponentAtNode) {
+      React.unmountComponentAtNode(node);
+    } else {
+      // Unmounting for React 0.4 and lower
+      React.unmountAndReleaseReactRootNode(node);
+    }
+  }
+
+  function createElement(value) {
+    // React.createElement replaced function invocation in 0.12
+    if (needsCreateElement) {
+      return React.createElement(value);
+    } else {
+      return value();
+    }
+  }
+
+  function getQueryParam(key) {
+    var pattern = new RegExp(key + '=([^&]+)(&|$)');
+    var matches = window.location.search.match(pattern);
+
+    if (matches) {
+      return decodeURIComponent(matches[1]);
+    }
+
+    handleError(new Error('No key found for' + key));
+  }
+
+  function getBooleanQueryParam(key) {
+    return getQueryParam(key) === 'true';
+  }
+
+  function setStatus(label) {
+    status.innerHTML = label;
+  }
+
+  function prerender() {
+    setStatus('Generating markup');
+
+    return Promise.resolve()
+      .then(function () {
+        const element = createElement(Fixture);
+
+        // Server rendering moved to a separate package along with ReactDOM
+        // in 0.14.0
+        if (needsReactDOM) {
+          return ReactDOMServer.renderToString(element);
+        }
+
+        // React.renderComponentToString was renamed in 0.12
+        if (React.renderToString) {
+          return React.renderToString(element);
+        }
+
+        // React.renderComponentToString became synchronous in React 0.9.0
+        if (React.renderComponentToString.length === 1) {
+          return React.renderComponentToString(element);
+        }
+
+        // Finally, React 0.4 and lower emits markup in a callback
+        return new Promise(function (resolve) {
+          React.renderComponentToString(element, resolve);
+        });
+      })
+      .then(function (string) {
+        output.innerHTML = string;
+        setStatus('Markup only (No React)');
+      })
+      .catch(handleError);
+  }
+
+  function render() {
+    setStatus('Hydrating');
+
+    var element = createElement(Fixture);
+
+    // ReactDOM was split out into another package in 0.14
+    if (needsReactDOM) {
+      // Hydration changed to a separate method in React 16
+      if (ReactDOM.hydrate) {
+        ReactDOM.hydrate(element, output);
+      } else {
+        ReactDOM.render(element, output);
+      }
+    } else if (React.render) {
+      // React.renderComponent was renamed in 0.12
+      React.render(element, output);
+    } else {
+      React.renderComponent(element, output);
+    }
+
+    setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
+    renders += 1;
+    hydrate.innerHTML = 'Re-render';
+  }
+
+  function handleError(error) {
+    console.log(error);
+    failed = true;
+    setStatus('Javascript Error');
+    output.innerHTML = error;
+  }
+
+  function loadScript(src) {
+    return new Promise(function (resolve, reject) {
+      var script = document.createElement('script');
+      script.async = true;
+      script.src = src;
+
+      script.onload = resolve;
+      script.onerror = function (error) {
+        reject(new Error('Unable to load ' + src));
+      };
+
+      document.body.appendChild(script);
+    });
+  }
+
+  function injectFixture(src) {
+    Fixture = new Function(src + '\nreturn Fixture;')();
+
+    if (typeof Fixture === 'undefined') {
+      setStatus('Failed');
+      output.innerHTML = 'Please name your root component "Fixture"';
+    } else {
+      prerender().then(function () {
+        if (getBooleanQueryParam('hydrate')) {
+          render();
+        }
+      });
+    }
+  }
+
+  function reloadFixture(code) {
+    renders = 0;
+    unmountComponent(output);
+    injectFixture(code);
+  }
+
+  window.onerror = handleError;
+
+  reload.onclick = function () {
+    window.location.reload();
+  };
+
+  hydrate.onclick = render;
+
+  loadScript(getQueryParam('reactPath'))
+    .then(function () {
+      if (needsReactDOM) {
+        return Promise.all([
+          loadScript(getQueryParam('reactDOMPath')),
+          loadScript(getQueryParam('reactDOMServerPath')),
+        ]);
+      }
+    })
+    .then(function () {
+      if (failed) {
+        return;
+      }
+
+      window.addEventListener('message', function (event) {
+        var data = JSON.parse(event.data);
+
+        switch (data.type) {
+          case 'code':
+            reloadFixture(data.payload);
+            break;
+          default:
+            throw new Error(
+              'Renderer Error: Unrecognized message "' + data.type + '"'
+            );
+        }
+      });
+
+      window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
+    })
+    .catch(handleError);
+})();
diff --git a/fixtures/dom/public/test.mp4 b/fixtures/dom/public/test.mp4
new file mode 100644
index 00000000000..245868f6f45
Binary files /dev/null and b/fixtures/dom/public/test.mp4 differ
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 00000000000..4a26e272cb3
--- /dev/null
+++ b/fixtures/dom/src/__tests__/nested-act-test.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DOMAct;
+let TestRenderer;
+let TestAct;
+
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+
+describe('unmocked scheduler', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    DOMAct = React.act;
+    TestRenderer = require('react-test-renderer');
+    TestAct = TestRenderer.act;
+  });
+
+  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
+    TestAct(() => {
+      DOMAct(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+
+    log = [];
+    // for doublechecking, we flip it inside out, and assert on the outermost
+    DOMAct(() => {
+      TestAct(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+  });
+});
+
+describe('mocked scheduler', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () =>
+      require.requireActual('scheduler/unstable_mock')
+    );
+    React = require('react');
+    DOMAct = React.act;
+    TestRenderer = require('react-test-renderer');
+    TestAct = TestRenderer.act;
+  });
+
+  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
+    TestAct(() => {
+      DOMAct(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+
+    log = [];
+    // for doublechecking, we flip it inside out, and assert on the outermost
+    DOMAct(() => {
+      TestAct(() => {
+        TestRenderer.create(<Effecty />);
+      });
+      expect(log).toEqual([]);
+    });
+    expect(log).toEqual(['called']);
+  });
+});
diff --git a/fixtures/dom/src/components/App.js b/fixtures/dom/src/components/App.js
new file mode 100644
index 00000000000..e54cc333d8f
--- /dev/null
+++ b/fixtures/dom/src/components/App.js
@@ -0,0 +1,18 @@
+import Header from './Header';
+import Fixtures from './fixtures';
+import '../style.css';
+
+const React = window.React;
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Header />
+        <Fixtures />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js
new file mode 100644
index 00000000000..7fa303a3f2f
--- /dev/null
+++ b/fixtures/dom/src/components/Fixture.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+const React = window.React;
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+class Fixture extends React.Component {
+  render() {
+    const {children} = this.props;
+
+    return <div className="test-fixture">{children}</div>;
+  }
+}
+
+Fixture.propTypes = propTypes;
+
+export default Fixture;
+
+Fixture.Controls = function FixtureControls({children}) {
+  return <div className="test-fixture__controls">{children}</div>;
+};
diff --git a/fixtures/dom/src/components/FixtureSet.js b/fixtures/dom/src/components/FixtureSet.js
new file mode 100644
index 00000000000..589b1c7bc3c
--- /dev/null
+++ b/fixtures/dom/src/components/FixtureSet.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+const React = window.React;
+
+const propTypes = {
+  title: PropTypes.node.isRequired,
+  description: PropTypes.node,
+};
+
+class FixtureSet extends React.Component {
+  render() {
+    const {title, description, children} = this.props;
+
+    return (
+      <div className="container">
+        <h1>{title}</h1>
+        {description && <p>{description}</p>}
+
+        {children}
+      </div>
+    );
+  }
+}
+
+FixtureSet.propTypes = propTypes;
+
+export default FixtureSet;
diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
new file mode 100644
index 00000000000..ae24b3223f6
--- /dev/null
+++ b/fixtures/dom/src/components/Header.js
@@ -0,0 +1,111 @@
+import {parse, stringify} from 'query-string';
+import VersionPicker from './VersionPicker';
+
+const React = window.React;
+
+class Header extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    const query = parse(window.location.search);
+    const version = query.version || 'local';
+    const production = query.production || false;
+    const versions = [version];
+
+    this.state = {version, versions, production};
+  }
+  handleVersionChange(version) {
+    const query = parse(window.location.search);
+    query.version = version;
+    if (query.version === 'local') {
+      delete query.version;
+    }
+    window.location.search = stringify(query);
+  }
+  handleProductionChange(event) {
+    const query = parse(window.location.search);
+    query.production = event.target.checked;
+    if (!query.production) {
+      delete query.production;
+    }
+    window.location.search = stringify(query);
+  }
+  handleFixtureChange(event) {
+    window.location.pathname = event.target.value;
+  }
+  render() {
+    return (
+      <header className="header">
+        <div className="header__inner">
+          <span className="header__logo">
+            <img
+              src={process.env.PUBLIC_URL + '/react-logo.svg'}
+              alt="React"
+              width="20"
+              height="20"
+            />
+            <a href="/">
+              DOM Test Fixtures (v
+              {React.version})
+            </a>
+          </span>
+
+          <div className="header-controls">
+            <input
+              id="react_production"
+              className="header__checkbox"
+              type="checkbox"
+              checked={this.state.production}
+              onChange={this.handleProductionChange}
+            />
+            <label htmlFor="react_production" className="header__label">
+              Production
+            </label>
+            <label htmlFor="example">
+              <span className="sr-only">Select an example</span>
+              <select
+                value={window.location.pathname}
+                onChange={this.handleFixtureChange}>
+                <option value="/">Home</option>
+                <option value="/hydration">Hydration</option>
+                <option value="/range-inputs">Range Inputs</option>
+                <option value="/text-inputs">Text Inputs</option>
+                <option value="/number-inputs">Number Input</option>
+                <option value="/password-inputs">Password Input</option>
+                <option value="/email-inputs">Email Input</option>
+                <option value="/selects">Selects</option>
+                <option value="/textareas">Textareas</option>
+                <option value="/progress">Progress</option>
+                <option value="/input-change-events">
+                  Input change events
+                </option>
+                <option value="/buttons">Buttons</option>
+                <option value="/date-inputs">Date Inputs</option>
+                <option value="/error-handling">Error Handling</option>
+                <option value="/event-pooling">Event Pooling</option>
+                <option value="/custom-elements">Custom Elements</option>
+                <option value="/media-events">Media Events</option>
+                <option value="/pointer-events">Pointer Events</option>
+                <option value="/mouse-events">Mouse Events</option>
+                <option value="/selection-events">Selection Events</option>
+                <option value="/suspense">Suspense</option>
+                <option value="/form-state">Form State</option>
+                <option value="/fragment-refs">Fragment Refs</option>
+              </select>
+            </label>
+            <label htmlFor="global_version">
+              <span className="sr-only">Select a version to test</span>
+              <VersionPicker
+                id="global_version"
+                name="global_version"
+                version={this.state.version}
+                onChange={this.handleVersionChange}
+              />
+            </label>
+          </div>
+        </div>
+      </header>
+    );
+  }
+}
+
+export default Header;
diff --git a/fixtures/dom/src/components/Iframe.js b/fixtures/dom/src/components/Iframe.js
new file mode 100644
index 00000000000..b69f74ef3ae
--- /dev/null
+++ b/fixtures/dom/src/components/Iframe.js
@@ -0,0 +1,58 @@
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class IframePortal extends React.Component {
+  iframeRef = null;
+
+  handleRef = ref => {
+    if (ref !== this.iframeRef) {
+      this.iframeRef = ref;
+      if (ref) {
+        if (ref.contentDocument && this.props.head) {
+          ref.contentDocument.head.innerHTML = this.props.head;
+        }
+        // Re-render must take place in the next tick (Firefox)
+        setTimeout(() => {
+          this.forceUpdate();
+        });
+      }
+    }
+  };
+
+  render() {
+    const ref = this.iframeRef;
+    let portal = null;
+    if (ref && ref.contentDocument) {
+      portal = ReactDOM.createPortal(
+        this.props.children,
+        ref.contentDocument.body
+      );
+    }
+
+    return (
+      <div>
+        <iframe
+          title="Iframe portal"
+          style={{border: 'none', height: this.props.height}}
+          ref={this.handleRef}
+        />
+        {portal}
+      </div>
+    );
+  }
+}
+
+class IframeSubtree extends React.Component {
+  warned = false;
+  render() {
+    if (!this.warned) {
+      console.error(
+        `IFrame has not yet been implemented for React v${React.version}`
+      );
+      this.warned = true;
+    }
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export default ReactDOM.createPortal ? IframePortal : IframeSubtree;
diff --git a/fixtures/dom/src/components/IssueList.js b/fixtures/dom/src/components/IssueList.js
new file mode 100644
index 00000000000..553fdb3fd85
--- /dev/null
+++ b/fixtures/dom/src/components/IssueList.js
@@ -0,0 +1,26 @@
+const React = window.React;
+
+function csv(string) {
+  return string.split(/\s*,\s*/);
+}
+
+export default function IssueList({issues}) {
+  if (!issues) {
+    return null;
+  }
+
+  if (typeof issues === 'string') {
+    issues = csv(issues);
+  }
+
+  let links = issues.reduce((memo, issue, i) => {
+    return memo.concat(
+      i > 0 && i < issues.length ? ', ' : null,
+      <a href={'https://github.com/facebook/react/issues/' + issue} key={issue}>
+        {issue}
+      </a>
+    );
+  }, []);
+
+  return <span>{links}</span>;
+}
diff --git a/fixtures/dom/src/components/TestCase.js b/fixtures/dom/src/components/TestCase.js
new file mode 100644
index 00000000000..16a172de599
--- /dev/null
+++ b/fixtures/dom/src/components/TestCase.js
@@ -0,0 +1,154 @@
+import cn from 'classnames';
+import semver from 'semver';
+import PropTypes from 'prop-types';
+import IssueList from './IssueList';
+import {parse} from 'query-string';
+import {semverString} from './propTypes';
+
+const React = window.React;
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+  resolvedIn: semverString,
+  introducedIn: semverString,
+  resolvedBy: PropTypes.string,
+};
+
+class TestCase extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      complete: false,
+    };
+  }
+
+  handleChange = e => {
+    this.setState({
+      complete: e.target.checked,
+    });
+  };
+
+  render() {
+    const {
+      title,
+      description,
+      introducedIn,
+      resolvedIn,
+      resolvedBy,
+      affectedBrowsers,
+      relatedIssues,
+      children,
+    } = this.props;
+
+    let {complete} = this.state;
+
+    const {version} = parse(window.location.search);
+    const isTestFixed =
+      !version || !resolvedIn || semver.gte(version, resolvedIn);
+
+    complete = !isTestFixed || complete;
+
+    return (
+      <section className={cn('test-case', complete && 'test-case--complete')}>
+        <h2 className="test-case__title type-subheading">
+          <label>
+            <input
+              className="test-case__title__check"
+              type="checkbox"
+              checked={complete}
+              onChange={this.handleChange}
+            />{' '}
+            {title}
+          </label>
+        </h2>
+
+        <dl className="test-case__details">
+          {introducedIn && <dt>First broken in: </dt>}
+          {introducedIn && (
+            <dd>
+              <a
+                href={'https://github.com/facebook/react/tag/v' + introducedIn}>
+                <code>{introducedIn}</code>
+              </a>
+            </dd>
+          )}
+
+          {resolvedIn && <dt>First supported in: </dt>}
+          {resolvedIn && (
+            <dd>
+              <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
+                <code>{resolvedIn}</code>
+              </a>
+            </dd>
+          )}
+
+          {resolvedBy && <dt>Fixed by: </dt>}
+          {resolvedBy && (
+            <dd>
+              <a
+                href={
+                  'https://github.com/facebook/react/pull/' +
+                  resolvedBy.slice(1)
+                }>
+                <code>{resolvedBy}</code>
+              </a>
+            </dd>
+          )}
+
+          {affectedBrowsers && <dt>Affected browsers: </dt>}
+          {affectedBrowsers && <dd>{affectedBrowsers}</dd>}
+
+          {relatedIssues && <dt>Related Issues: </dt>}
+          {relatedIssues && (
+            <dd>
+              <IssueList issues={relatedIssues} />
+            </dd>
+          )}
+        </dl>
+
+        <p className="test-case__desc">{description}</p>
+
+        <div className="test-case__body">
+          {!isTestFixed && (
+            <p className="test-case__invalid-version">
+              <strong>Note:</strong> This test case was fixed in a later version
+              of React. This test is not expected to pass for the selected
+              version, and that's ok!
+            </p>
+          )}
+
+          {children}
+        </div>
+      </section>
+    );
+  }
+}
+
+TestCase.propTypes = propTypes;
+
+TestCase.Steps = class extends React.Component {
+  render() {
+    const {children} = this.props;
+    return (
+      <div>
+        <h3>Steps to reproduce:</h3>
+        <ol>{children}</ol>
+      </div>
+    );
+  }
+};
+
+TestCase.ExpectedResult = class extends React.Component {
+  render() {
+    const {children} = this.props;
+    return (
+      <div>
+        <h3>Expected Result:</h3>
+        <p>{children}</p>
+      </div>
+    );
+  }
+};
+export default TestCase;
diff --git a/fixtures/dom/src/components/VersionPicker.js b/fixtures/dom/src/components/VersionPicker.js
new file mode 100644
index 00000000000..fcccf0947b3
--- /dev/null
+++ b/fixtures/dom/src/components/VersionPicker.js
@@ -0,0 +1,41 @@
+import getVersionTags from '../tags';
+
+const React = window.React;
+
+class VersionPicker extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    const version = props.version || 'local';
+    const versions = [version];
+    this.state = {versions};
+  }
+
+  componentWillMount() {
+    getVersionTags().then(tags => {
+      let versions = tags.map(tag => tag.name.slice(1));
+      versions = [`local`, ...versions];
+      this.setState({versions});
+    });
+  }
+
+  onChange = event => {
+    this.props.onChange(event.target.value);
+  };
+
+  render() {
+    const {version, id, name} = this.props;
+    const {versions} = this.state;
+
+    return (
+      <select id={id} name={name} value={version} onChange={this.onChange}>
+        {versions.map(version => (
+          <option key={version} value={version}>
+            {version}
+          </option>
+        ))}
+      </select>
+    );
+  }
+}
+
+export default VersionPicker;
diff --git a/fixtures/dom/src/components/fixtures/buttons/index.js b/fixtures/dom/src/components/fixtures/buttons/index.js
new file mode 100644
index 00000000000..e002937ee95
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/buttons/index.js
@@ -0,0 +1,43 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+function onButtonClick() {
+  window.alert(`This shouldn't have happened!`);
+}
+
+export default class ButtonTestCases extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Buttons">
+        <TestCase
+          title="onClick with disabled buttons"
+          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>
+          <TestCase.ExpectedResult>
+            Nothing should happen
+          </TestCase.ExpectedResult>
+          <button disabled onClick={onButtonClick}>
+            Click Me
+          </button>
+        </TestCase>
+        <TestCase
+          title="onClick with disabled buttons containing other elements"
+          description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
+          <TestCase.Steps>
+            <li>Click on the disabled button, which contains a span</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Nothing should happen
+          </TestCase.ExpectedResult>
+          <button disabled onClick={onButtonClick}>
+            <span>Click Me</span>
+          </button>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/custom-elements/index.js b/fixtures/dom/src/components/fixtures/custom-elements/index.js
new file mode 100644
index 00000000000..f7fb02c5a4a
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/custom-elements/index.js
@@ -0,0 +1,54 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+const supportsCustomElements = typeof customElements !== 'undefined';
+
+class HelloWorld extends React.Component {
+  render() {
+    return <h1>Hello, world!</h1>;
+  }
+}
+
+if (supportsCustomElements) {
+  // Babel breaks web components.
+  // https://github.com/w3c/webcomponents/issues/587
+  // eslint-disable-next-line no-new-func
+  const MyElement = new Function(
+    'React',
+    'ReactDOM',
+    'HelloWorld',
+    `
+    return class MyElement extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({ mode:'open' });
+        ReactDOM.render(React.createElement(HelloWorld), shadowRoot);
+      }
+    }`
+  )(React, ReactDOM, HelloWorld);
+  customElements.define('my-element', MyElement);
+}
+
+export default class ButtonTestCases extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Custom Elements"
+        description="Support for Custom Element DOM standards.">
+        <TestCase title="Rendering into shadow root">
+          <TestCase.ExpectedResult>
+            You should see "Hello, World" printed below.{' '}
+          </TestCase.ExpectedResult>
+          {supportsCustomElements ? (
+            <my-element />
+          ) : (
+            <div>This browser does not support custom elements.</div>
+          )}
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/date-inputs/index.js b/fixtures/dom/src/components/fixtures/date-inputs/index.js
new file mode 100644
index 00000000000..e9ab5d354da
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/date-inputs/index.js
@@ -0,0 +1,32 @@
+import Fixture from '../../Fixture';
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import SwitchDateTestCase from './switch-date-test-case';
+
+const React = window.React;
+
+class DateInputFixtures extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Dates">
+        <TestCase title="Switching between date and datetime-local">
+          <TestCase.Steps>
+            <li>Type a date into the date picker</li>
+            <li>Toggle "Switch type"</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The month, day, and year values should correctly transfer. The
+            hours/minutes/seconds should not be discarded.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SwitchDateTestCase />
+          </Fixture>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export default DateInputFixtures;
diff --git a/fixtures/dom/src/components/fixtures/date-inputs/switch-date-test-case.js b/fixtures/dom/src/components/fixtures/date-inputs/switch-date-test-case.js
new file mode 100644
index 00000000000..a042418cdb7
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/date-inputs/switch-date-test-case.js
@@ -0,0 +1,67 @@
+const React = window.React;
+
+const startDate = new Date();
+/**
+ * This test case was originally provided by @richsoni,
+ * https://github.com/facebook/react/issues/8116
+ */
+class SwitchDateTestCase extends React.Component {
+  state = {
+    fullDate: false,
+    date: startDate,
+  };
+
+  render() {
+    const attrs = this.inputAttrs();
+
+    return (
+      <div>
+        <p>
+          <b>{attrs.type}</b> input type ({attrs.value})
+        </p>
+        <p>
+          <input
+            type={attrs.type}
+            value={attrs.value}
+            onChange={this.onInputChange}
+          />
+          <label>
+            <input
+              type="checkbox"
+              checked={this.state.fullDate}
+              onChange={this.updateFullDate}
+            />{' '}
+            Switch type
+          </label>
+        </p>
+      </div>
+    );
+  }
+
+  inputAttrs() {
+    if (this.state.fullDate) {
+      return {
+        type: 'datetime-local',
+        value: this.state.date.toISOString().replace(/\..*Z/, ''),
+      };
+    } else {
+      return {
+        type: 'date',
+        value: this.state.date.toISOString().replace(/T.*/, ''),
+      };
+    }
+  }
+
+  onInputChange = ({target: {value}}) => {
+    const date = value ? new Date(Date.parse(value)) : startDate;
+    this.setState({date});
+  };
+
+  updateFullDate = () => {
+    this.setState({
+      fullDate: !this.state.fullDate,
+    });
+  };
+}
+
+export default SwitchDateTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js b/fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js
new file mode 100644
index 00000000000..a844578550e
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js
@@ -0,0 +1,39 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class EmailDisabledAttributesTestCase extends React.Component {
+  state = {value: 'a@fb.com'};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="email"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="email" defaultValue="" />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default EmailDisabledAttributesTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js b/fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js
new file mode 100644
index 00000000000..e5448a2b9b9
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js
@@ -0,0 +1,48 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class EmailAttributesTestCase extends React.Component {
+  state = {value: 'a@fb.com'};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="email"
+              pattern=".+@fb.com"
+              maxlength={17}
+              multiple={true}
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input
+              type="email"
+              defaultValue=""
+              pattern=".+@fb.com"
+              maxlength={17}
+              multiple={true}
+            />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default EmailAttributesTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js b/fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js
new file mode 100644
index 00000000000..e9565396744
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js
@@ -0,0 +1,39 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class JumpingCursorTestCase extends React.Component {
+  state = {value: ''};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="email"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="email" defaultValue="" />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default JumpingCursorTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/index.js b/fixtures/dom/src/components/fixtures/email-inputs/index.js
new file mode 100644
index 00000000000..1af9d2b2fa5
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/index.js
@@ -0,0 +1,68 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import JumpingCursorTestCase from './JumpingCursorTestCase';
+import EmailEnabledAttributesTestCase from './EmailEnabledAttributesTestCase';
+import EmailDisabledAttributesTestCase from './EmailDisabledAttributesTestCase';
+
+const React = window.React;
+
+function EmailInputs() {
+  return (
+    <FixtureSet title="Email inputs">
+      <TestCase
+        title="Spaces in email inputs"
+        description={`
+          Some browsers are trying to remove spaces from email inputs and after
+          doing this place cursor to the beginning.
+        `}
+        affectedBrowsers="Chrome">
+        <TestCase.Steps>
+          <li>Type space and character</li>
+          <li>Type character, space, character, delete last character</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>Cursor not moving.</TestCase.ExpectedResult>
+
+        <JumpingCursorTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Attributes enabled"
+        description={`
+          Test enabled pattern, maxlength, multiple attributes.
+        `}>
+        <TestCase.Steps>
+          <li>Type after existing text ',b@tt.com'</li>
+          <li>Try to type spaces after typed text</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Spaces not added. When cursor hovered over input, popup "Please match
+          the requested format." is showed.
+        </TestCase.ExpectedResult>
+
+        <EmailEnabledAttributesTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Attributes disabled"
+        description={`
+          Test disabled maxlength, multiple attributes.
+        `}>
+        <TestCase.Steps>
+          <li>Type after existing text ',b@tt.com'</li>
+          <li>Try to type spaces after typed text</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Spaces are added freely. When cursor hovered over input, popup "A part
+          following '@' should not contain the symbol ','." is showed.
+        </TestCase.ExpectedResult>
+
+        <EmailDisabledAttributesTestCase />
+      </TestCase>
+    </FixtureSet>
+  );
+}
+
+export default EmailInputs;
diff --git a/fixtures/dom/src/components/fixtures/error-handling/index.js b/fixtures/dom/src/components/fixtures/error-handling/index.js
new file mode 100644
index 00000000000..917f9ace380
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/error-handling/index.js
@@ -0,0 +1,406 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+function BadRender(props) {
+  props.doThrow();
+}
+
+class BadDidMount extends React.Component {
+  componentDidMount() {
+    this.props.doThrow();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+class ErrorBoundary extends React.Component {
+  static defaultProps = {
+    buttonText: 'Trigger error',
+    badChildType: BadRender,
+  };
+  state = {
+    shouldThrow: false,
+    didThrow: false,
+    error: null,
+  };
+  componentDidCatch(error) {
+    this.setState({error, didThrow: true});
+  }
+  triggerError = () => {
+    this.setState({
+      shouldThrow: true,
+    });
+  };
+  render() {
+    if (this.state.didThrow) {
+      if (this.state.error) {
+        return <p>Captured an error: {this.state.error.message}</p>;
+      } else {
+        return <p>Captured an error: {String(this.state.error)}</p>;
+      }
+    }
+    if (this.state.shouldThrow) {
+      const BadChild = this.props.badChildType;
+      return <BadChild doThrow={this.props.doThrow} />;
+    }
+    return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
+  }
+}
+class Example extends React.Component {
+  state = {key: 0};
+  restart = () => {
+    this.setState(state => ({key: state.key + 1}));
+  };
+  render() {
+    return (
+      <div>
+        <button onClick={this.restart}>Reset</button>
+        <ErrorBoundary
+          buttonText={this.props.buttonText}
+          doThrow={this.props.doThrow}
+          key={this.state.key}
+        />
+      </div>
+    );
+  }
+}
+
+class TriggerErrorAndCatch extends React.Component {
+  container = document.createElement('div');
+
+  triggerErrorAndCatch = () => {
+    try {
+      ReactDOM.flushSync(() => {
+        ReactDOM.render(
+          <BadRender
+            doThrow={() => {
+              throw new Error('Caught error');
+            }}
+          />,
+          this.container
+        );
+      });
+    } catch (e) {}
+  };
+
+  render() {
+    return (
+      <button onClick={this.triggerErrorAndCatch}>
+        Trigger error and catch
+      </button>
+    );
+  }
+}
+
+function silenceWindowError(event) {
+  event.preventDefault();
+}
+
+class SilenceErrors extends React.Component {
+  state = {
+    silenceErrors: false,
+  };
+  componentDidMount() {
+    if (this.state.silenceErrors) {
+      window.addEventListener('error', silenceWindowError);
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.silenceErrors && this.state.silenceErrors) {
+      window.addEventListener('error', silenceWindowError);
+    } else if (prevState.silenceErrors && !this.state.silenceErrors) {
+      window.removeEventListener('error', silenceWindowError);
+    }
+  }
+  componentWillUnmount() {
+    if (this.state.silenceErrors) {
+      window.removeEventListener('error', silenceWindowError);
+    }
+  }
+  render() {
+    return (
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            value={this.state.silenceErrors}
+            onChange={() =>
+              this.setState(state => ({
+                silenceErrors: !state.silenceErrors,
+              }))
+            }
+          />
+          Silence errors
+        </label>
+        {this.state.silenceErrors && (
+          <div>
+            {this.props.children}
+            <br />
+            <hr />
+            <b style={{color: 'red'}}>
+              Don't forget to uncheck "Silence errors" when you're done with
+              this test!
+            </b>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+class GetEventTypeDuringUpdate extends React.Component {
+  state = {};
+
+  onClick = () => {
+    this.expectUpdate = true;
+    this.forceUpdate();
+  };
+
+  componentDidUpdate() {
+    if (this.expectUpdate) {
+      this.expectUpdate = false;
+      this.setState({eventType: window.event.type});
+      setTimeout(() => {
+        this.setState({cleared: !window.event});
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="test-fixture">
+        <button onClick={this.onClick}>Trigger callback in event.</button>
+        {this.state.eventType ? (
+          <p>
+            Got <b>{this.state.eventType}</b> event.
+          </p>
+        ) : (
+          <p>Got no event</p>
+        )}
+        {this.state.cleared ? (
+          <p>Event cleared correctly.</p>
+        ) : (
+          <p>Event failed to clear.</p>
+        )}
+      </div>
+    );
+  }
+}
+
+class SilenceRecoverableError extends React.Component {
+  render() {
+    return (
+      <SilenceErrors>
+        <ErrorBoundary
+          badChildType={BadRender}
+          buttonText={'Throw (render phase)'}
+          doThrow={() => {
+            throw new Error('Silenced error (render phase)');
+          }}
+        />
+        <ErrorBoundary
+          badChildType={BadDidMount}
+          buttonText={'Throw (commit phase)'}
+          doThrow={() => {
+            throw new Error('Silenced error (commit phase)');
+          }}
+        />
+      </SilenceErrors>
+    );
+  }
+}
+
+class TrySilenceFatalError extends React.Component {
+  container = document.createElement('div');
+
+  triggerErrorAndCatch = () => {
+    try {
+      ReactDOM.flushSync(() => {
+        ReactDOM.render(
+          <BadRender
+            doThrow={() => {
+              throw new Error('Caught error');
+            }}
+          />,
+          this.container
+        );
+      });
+    } catch (e) {}
+  };
+
+  render() {
+    return (
+      <SilenceErrors>
+        <button onClick={this.triggerErrorAndCatch}>Throw fatal error</button>
+      </SilenceErrors>
+    );
+  }
+}
+
+function naiveMemoize(fn) {
+  let memoizedEntry;
+  return function () {
+    if (!memoizedEntry) {
+      memoizedEntry = {result: null};
+      memoizedEntry.result = fn();
+    }
+    return memoizedEntry.result;
+  };
+}
+let memoizedFunction = naiveMemoize(function () {
+  throw new Error('Passed');
+});
+
+export default class ErrorHandlingTestCases extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Error handling">
+        <TestCase
+          title="Break on uncaught exceptions"
+          description="In DEV, errors should be treated as uncaught, even though React catches them internally">
+          <TestCase.Steps>
+            <li>Open the browser DevTools</li>
+            <li>Make sure "Pause on exceptions" is enabled</li>
+            <li>Make sure "Pause on caught exceptions" is disabled</li>
+            <li>Click the "Trigger error" button</li>
+            <li>Click the reset button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The DevTools should pause at the line where the error was thrown, in
+            the BadRender component. After resuming, the "Trigger error" button
+            should be replaced with "Captured an error: Oops!" Clicking reset
+            should reset the test case.
+            <br />
+            <br />
+            In the console, you should see <b>two</b> messages: the actual error
+            ("Oops") printed natively by the browser with its JavaScript stack,
+            and our addendum ("The above error occurred in BadRender component")
+            with a React component stack.
+          </TestCase.ExpectedResult>
+          <Example
+            doThrow={() => {
+              throw new Error('Oops!');
+            }}
+          />
+        </TestCase>
+        <TestCase title="Throwing null" description="">
+          <TestCase.Steps>
+            <li>Click the "Trigger error" button</li>
+            <li>Click the reset button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The "Trigger error" button should be replaced with "Captured an
+            error: null". Clicking reset should reset the test case.
+          </TestCase.ExpectedResult>
+          <Example
+            doThrow={() => {
+              throw null; // eslint-disable-line no-throw-literal
+            }}
+          />
+        </TestCase>
+        <TestCase title="Throwing memoized result" description="">
+          <TestCase.Steps>
+            <li>Click the "Trigger error" button</li>
+            <li>Click the reset button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The "Trigger error" button should be replaced with "Captured an
+            error: Passed". Clicking reset should reset the test case.
+          </TestCase.ExpectedResult>
+          <Example
+            doThrow={() => {
+              memoizedFunction().value;
+            }}
+          />
+        </TestCase>
+        <TestCase
+          title="Cross-origin errors (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Click the "Trigger cross-origin error" button</li>
+            <li>Click the reset button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The "Trigger error" button should be replaced with "Captured an
+            error: A cross-origin error was thrown [...]". The actual error
+            message should be logged to the console: "Uncaught Error: Expected
+            true to be false".
+          </TestCase.ExpectedResult>
+          <Example
+            buttonText="Trigger cross-origin error"
+            doThrow={() => {
+              // The `expect` module is loaded via unpkg, so that this assertion
+              // triggers a cross-origin error
+              window.expect(true).toBe(false);
+            }}
+          />
+        </TestCase>
+        <TestCase
+          title="Errors are logged even if they're caught (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Click the "Trigger render error and catch" button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Open the console. "Uncaught Error: Caught error" should have been
+            logged by the browser. You should also see our addendum ("The above
+            error...").
+          </TestCase.ExpectedResult>
+          <TriggerErrorAndCatch />
+        </TestCase>
+        <TestCase
+          title="Recoverable errors can be silenced with preventDefault (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Check the "Silence errors" checkbox below</li>
+            <li>Click the "Throw (render phase)" button</li>
+            <li>Click the "Throw (commit phase)" button</li>
+            <li>Uncheck the "Silence errors" checkbox</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Open the console. You shouldn't see <b>any</b> messages in the
+            console: neither the browser error, nor our "The above error"
+            addendum, from either of the buttons. The buttons themselves should
+            get replaced by two labels: "Captured an error: Silenced error
+            (render phase)" and "Captured an error: Silenced error (commit
+            phase)".
+          </TestCase.ExpectedResult>
+          <SilenceRecoverableError />
+        </TestCase>
+        <TestCase
+          title="Fatal errors cannot be silenced with preventDefault (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Check the "Silence errors" checkbox below</li>
+            <li>Click the "Throw fatal error" button</li>
+            <li>Uncheck the "Silence errors" checkbox</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Open the console. "Error: Caught error" should have been logged by
+            React. You should also see our addendum ("The above error...").
+          </TestCase.ExpectedResult>
+          <TrySilenceFatalError />
+        </TestCase>
+
+        {window.hasOwnProperty('event') ? (
+          <TestCase
+            title="Error handling does not interfere with window.event"
+            description="">
+            <TestCase.Steps>
+              <li>Click the "Trigger callback in event" button</li>
+            </TestCase.Steps>
+            <TestCase.ExpectedResult>
+              You should see "Got <b>click</b> event" and "Event cleared
+              successfully" below.
+            </TestCase.ExpectedResult>
+            <GetEventTypeDuringUpdate />
+          </TestCase>
+        ) : null}
+      </FixtureSet>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/event-pooling/hit-box.js b/fixtures/dom/src/components/fixtures/event-pooling/hit-box.js
new file mode 100644
index 00000000000..b3b29397c74
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/event-pooling/hit-box.js
@@ -0,0 +1,38 @@
+const React = window.React;
+
+class HitBox extends React.Component {
+  state = {
+    x: 0,
+    y: 0,
+  };
+
+  static defaultProps = {
+    onMouseMove: n => n,
+  };
+
+  onMove = event => {
+    this.setState({x: event.clientX, y: event.clientY});
+    this.props.onMouseMove(event);
+  };
+
+  render() {
+    const {x, y} = this.state;
+
+    const boxStyle = {
+      padding: '10px 20px',
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+    };
+
+    return (
+      <div onMouseMove={this.onMove} style={boxStyle}>
+        <p>Trace your mouse over this box.</p>
+        <p>
+          Last movement: {x},{y}
+        </p>
+      </div>
+    );
+  }
+}
+
+export default HitBox;
diff --git a/fixtures/dom/src/components/fixtures/event-pooling/index.js b/fixtures/dom/src/components/fixtures/event-pooling/index.js
new file mode 100644
index 00000000000..b0c46f04498
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/event-pooling/index.js
@@ -0,0 +1,18 @@
+import FixtureSet from '../../FixtureSet';
+import MouseMove from './mouse-move';
+import Persistence from './persistence';
+
+const React = window.React;
+
+class EventPooling extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Event Pooling">
+        <MouseMove />
+        <Persistence />
+      </FixtureSet>
+    );
+  }
+}
+
+export default EventPooling;
diff --git a/fixtures/dom/src/components/fixtures/event-pooling/mouse-move.js b/fixtures/dom/src/components/fixtures/event-pooling/mouse-move.js
new file mode 100644
index 00000000000..ef85e223572
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/event-pooling/mouse-move.js
@@ -0,0 +1,47 @@
+import TestCase from '../../TestCase';
+import HitBox from './hit-box';
+
+const React = window.React;
+
+class MouseMove extends React.Component {
+  state = {
+    events: [],
+  };
+
+  checkEvent = event => {
+    let {events} = this.state;
+
+    if (event.type === 'mousemove' && events.indexOf(event) === -1) {
+      this.setState({events: events.concat(event)});
+    }
+  };
+
+  render() {
+    const {events} = this.state;
+
+    return (
+      <TestCase title="Mouse Move" description="">
+        <TestCase.Steps>
+          <li>Mouse over the box below</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Mousemove should share the same instance of the event between
+          dispatches.
+        </TestCase.ExpectedResult>
+
+        <HitBox onMouseMove={this.checkEvent} />
+
+        <p>
+          Was the event pooled?{' '}
+          <b>
+            {events.length ? (events.length <= 1 ? 'Yes' : 'No') : 'Unsure'} (
+            {events.length} events)
+          </b>
+        </p>
+      </TestCase>
+    );
+  }
+}
+
+export default MouseMove;
diff --git a/fixtures/dom/src/components/fixtures/event-pooling/persistence.js b/fixtures/dom/src/components/fixtures/event-pooling/persistence.js
new file mode 100644
index 00000000000..23a065b4abf
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/event-pooling/persistence.js
@@ -0,0 +1,62 @@
+import TestCase from '../../TestCase';
+import HitBox from './hit-box';
+
+const React = window.React;
+
+class Persistence extends React.Component {
+  state = {
+    persisted: 0,
+    pooled: [],
+  };
+
+  addPersisted = event => {
+    let {persisted, pooled} = this.state;
+
+    event.persist();
+
+    if (event.type === 'mousemove') {
+      this.setState({
+        persisted: persisted + 1,
+        pooled: pooled.filter(e => e !== event),
+      });
+    }
+  };
+
+  addPooled = event => {
+    let {pooled} = this.state;
+
+    if (event.type === 'mousemove' && pooled.indexOf(event) === -1) {
+      this.setState({pooled: pooled.concat(event)});
+    }
+  };
+
+  render() {
+    const {pooled, persisted} = this.state;
+
+    return (
+      <TestCase title="Persistence" description="">
+        <TestCase.Steps>
+          <li>Mouse over the pooled event box</li>
+          <li>Mouse over the persisted event box</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The pool size should not increase above 1, but reduce to 0 when
+          hovering over the persisted region.
+        </TestCase.ExpectedResult>
+
+        <h2>Add Pooled Event:</h2>
+        <HitBox onMouseMove={this.addPooled} />
+
+        <h2>Add Persisted Event:</h2>
+        <HitBox onMouseMove={this.addPersisted} />
+
+        <p>Pool size: {pooled.length}</p>
+
+        <p>Persisted size: {persisted}</p>
+      </TestCase>
+    );
+  }
+}
+
+export default Persistence;
diff --git a/fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js b/fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js
new file mode 100644
index 00000000000..278072780c9
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js
@@ -0,0 +1,60 @@
+import Fixture from '../../Fixture';
+const React = window.React;
+
+class ControlledFormFixture extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {name: '', email: ''};
+
+    this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handleNameChange = this.handleNameChange.bind(this);
+  }
+
+  handleEmailChange(event) {
+    this.setState({email: event.target.value});
+  }
+
+  handleNameChange(event) {
+    this.setState({name: event.target.value});
+  }
+
+  render() {
+    return (
+      <Fixture>
+        <form>
+          <label>
+            Name:
+            <input
+              type="text"
+              value={this.state.name}
+              onChange={this.handleNameChange}
+              name="name"
+              x-autocompletetype="name"
+            />
+          </label>
+          <br />
+          <label>
+            Email:
+            <input
+              type="text"
+              value={this.state.email}
+              onChange={this.handleEmailChange}
+              name="email"
+              x-autocompletetype="email"
+            />
+          </label>
+        </form>
+        <br />
+        <div>
+          <span>States</span>
+          <br />
+          <span>Name: {this.state.name}</span>
+          <br />
+          <span>Email: {this.state.email}</span>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default ControlledFormFixture;
diff --git a/fixtures/dom/src/components/fixtures/form-state/index.js b/fixtures/dom/src/components/fixtures/form-state/index.js
new file mode 100644
index 00000000000..60585e4cd1d
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/form-state/index.js
@@ -0,0 +1,60 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import ControlledFormFixture from './ControlledFormFixture';
+const React = window.React;
+
+export default class FormStateCases extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Form State">
+        <TestCase
+          title="Form state autofills from browser"
+          description="Form start should autofill/autocomplete if user has autocomplete/autofill information saved. The user may need to set-up autofill or autocomplete with their specific browser.">
+          <TestCase.Steps>
+            <li>
+              Set up autofill/autocomplete for your browser.
+              <br />
+              Instructions:
+              <ul>
+                <li>
+                  <SafeLink
+                    href="https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=en"
+                    text="Google Chrome"
+                  />
+                </li>
+                <li>
+                  <SafeLink
+                    href="https://support.mozilla.org/en-US/kb/autofill-logins-firefox"
+                    text="Mozilla FireFox"
+                  />
+                </li>
+                <li>
+                  <SafeLink
+                    href="https://support.microsoft.com/en-us/help/4027718/microsoft-edge-automatically-fill-info"
+                    text="Microsoft Edge"
+                  />
+                </li>
+              </ul>
+            </li>
+            <li>Click into any input.</li>
+            <li>Select any autofill option.</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Autofill options should appear when clicking into fields. Selected
+            autofill options should change state (shown underneath, under
+            "States").
+          </TestCase.ExpectedResult>
+          <ControlledFormFixture />
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+const SafeLink = ({text, href}) => {
+  return (
+    <a target="_blank" rel="noreferrer" href={href}>
+      {text}
+    </a>
+  );
+};
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/EventDispatchCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/EventDispatchCase.js
new file mode 100644
index 00000000000..ef5a9590213
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/EventDispatchCase.js
@@ -0,0 +1,157 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+const {Fragment, useRef, useState} = React;
+
+function WrapperComponent(props) {
+  return props.children;
+}
+
+const initialState = {
+  child: false,
+  parent: false,
+  grandparent: false,
+};
+
+export default function EventListenerCase() {
+  const fragmentRef = useRef(null);
+  const [clickedState, setClickedState] = useState({...initialState});
+  const [fragmentEventFired, setFragmentEventFired] = useState(false);
+  const [bubblesState, setBubblesState] = useState(true);
+
+  function setClick(id) {
+    setClickedState(prev => ({...prev, [id]: true}));
+  }
+
+  function fragmentClickHandler(e) {
+    setFragmentEventFired(true);
+  }
+
+  return (
+    <TestCase title="Event Dispatch">
+      <TestCase.Steps>
+        <li>
+          Each box has regular click handlers, you can click each one to observe
+          the status changing through standard bubbling.
+        </li>
+        <li>Clear the clicked state</li>
+        <li>
+          Click the "Dispatch click event" button to dispatch a click event on
+          the Fragment. The event will be dispatched on the Fragment's parent,
+          so the child will not change state.
+        </li>
+        <li>
+          Click the "Add event listener" button to add a click event listener on
+          the Fragment. This registers a handler that will turn the child blue
+          on click.
+        </li>
+        <li>
+          Now click the "Dispatch click event" button again. You can see that it
+          will fire the Fragment's event handler in addition to bubbling the
+          click from the parent.
+        </li>
+        <li>
+          If you turn off bubbling, only the Fragment's event handler will be
+          called.
+        </li>
+      </TestCase.Steps>
+
+      <TestCase.ExpectedResult>
+        <p>
+          Dispatching an event on a Fragment will forward the dispatch to its
+          parent for the standard case. You can observe when dispatching that
+          the parent handler is called in additional to bubbling from there. A
+          delay is added to make the bubbling more clear.{' '}
+        </p>
+        <p>
+          When there have been event handlers added to the Fragment, the
+          Fragment's event handler will be called in addition to bubbling from
+          the parent. Without bubbling, only the Fragment's event handler will
+          be called.
+        </p>
+      </TestCase.ExpectedResult>
+
+      <Fixture>
+        <Fixture.Controls>
+          <select
+            value={bubblesState ? 'true' : 'false'}
+            onChange={e => {
+              setBubblesState(e.target.value === 'true');
+            }}>
+            <option value="true">Bubbles: true</option>
+            <option value="false">Bubbles: false</option>
+          </select>
+          <button
+            onClick={() => {
+              fragmentRef.current.dispatchEvent(
+                new MouseEvent('click', {bubbles: bubblesState})
+              );
+            }}>
+            Dispatch click event
+          </button>
+          <button
+            onClick={() => {
+              setClickedState({...initialState});
+              setFragmentEventFired(false);
+            }}>
+            Reset clicked state
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.addEventListener(
+                'click',
+                fragmentClickHandler
+              );
+            }}>
+            Add event listener
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.removeEventListener(
+                'click',
+                fragmentClickHandler
+              );
+            }}>
+            Remove event listener
+          </button>
+        </Fixture.Controls>
+        <div
+          id="grandparent"
+          onClick={e => {
+            setTimeout(() => {
+              setClick('grandparent');
+            }, 200);
+          }}
+          className="card">
+          Fragment grandparent - clicked:{' '}
+          {clickedState.grandparent ? 'true' : 'false'}
+          <div
+            id="parent"
+            onClick={e => {
+              setTimeout(() => {
+                setClick('parent');
+              }, 100);
+            }}
+            className="card">
+            Fragment parent - clicked: {clickedState.parent ? 'true' : 'false'}
+            <Fragment ref={fragmentRef}>
+              <div
+                style={{
+                  backgroundColor: fragmentEventFired ? 'lightblue' : 'inherit',
+                }}
+                id="child"
+                className="card"
+                onClick={e => {
+                  setClick('child');
+                }}>
+                Fragment child - clicked:{' '}
+                {clickedState.child ? 'true' : 'false'}
+              </div>
+            </Fragment>
+          </div>
+        </div>
+      </Fixture>
+    </TestCase>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/EventListenerCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/EventListenerCase.js
new file mode 100644
index 00000000000..125b67cf39a
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/EventListenerCase.js
@@ -0,0 +1,96 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+const {Fragment, useEffect, useRef, useState} = React;
+
+function WrapperComponent(props) {
+  return props.children;
+}
+
+function handler(e) {
+  const text = e.currentTarget.innerText;
+  alert('You clicked: ' + text);
+}
+
+export default function EventListenerCase() {
+  const fragmentRef = useRef(null);
+  const [extraChildCount, setExtraChildCount] = useState(0);
+
+  useEffect(() => {
+    fragmentRef.current.addEventListener('click', handler);
+
+    const lastFragmentRefValue = fragmentRef.current;
+    return () => {
+      lastFragmentRefValue.removeEventListener('click', handler);
+    };
+  });
+
+  return (
+    <TestCase title="Event Registration">
+      <TestCase.Steps>
+        <li>Click one of the children, observe the alert</li>
+        <li>Add a new child, click it, observe the alert</li>
+        <li>Remove the event listeners, click a child, observe no alert</li>
+        <li>Add the event listeners back, click a child, observe the alert</li>
+      </TestCase.Steps>
+
+      <TestCase.ExpectedResult>
+        <p>
+          Fragment refs can manage event listeners on the first level of host
+          children. This page loads with an effect that sets up click event
+          hanndlers on each child card. Clicking on a card will show an alert
+          with the card's text.
+        </p>
+        <p>
+          New child nodes will also have event listeners applied. Removed nodes
+          will have their listeners cleaned up.
+        </p>
+      </TestCase.ExpectedResult>
+
+      <Fixture>
+        <Fixture.Controls>
+          <div>Target count: {extraChildCount + 3}</div>
+          <button
+            onClick={() => {
+              setExtraChildCount(prev => prev + 1);
+            }}>
+            Add Child
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.addEventListener('click', handler);
+            }}>
+            Add click event listeners
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.removeEventListener('click', handler);
+            }}>
+            Remove click event listeners
+          </button>
+        </Fixture.Controls>
+        <div className="card-container">
+          <Fragment ref={fragmentRef}>
+            <div className="card" id="child-a">
+              Child A
+            </div>
+            <div className="card" id="child-b">
+              Child B
+            </div>
+            <WrapperComponent>
+              <div className="card" id="child-c">
+                Child C
+              </div>
+              {Array.from({length: extraChildCount}).map((_, index) => (
+                <div className="card" id={'extra-child-' + index} key={index}>
+                  Extra Child {index}
+                </div>
+              ))}
+            </WrapperComponent>
+          </Fragment>
+        </div>
+      </Fixture>
+    </TestCase>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js
new file mode 100644
index 00000000000..efd9157b4a5
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js
@@ -0,0 +1,63 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+const {Fragment, useRef} = React;
+
+export default function FocusCase() {
+  const fragmentRef = useRef(null);
+
+  return (
+    <TestCase title="Focus Management">
+      <TestCase.Steps>
+        <li>Click to focus the first child</li>
+        <li>Click to focus the last child</li>
+        <li>Click to blur any focus within the fragment</li>
+      </TestCase.Steps>
+
+      <TestCase.ExpectedResult>
+        <p>
+          The focus method will focus the first focusable child within the
+          fragment, skipping any unfocusable children.
+        </p>
+        <p>
+          The focusLast method is the reverse, focusing the last focusable
+          child.
+        </p>
+        <p>
+          Blur will call blur on the document, only if one of the children
+          within the fragment is the active element.
+        </p>
+      </TestCase.ExpectedResult>
+
+      <Fixture>
+        <Fixture.Controls>
+          <button onClick={() => fragmentRef.current.focus()}>
+            Focus first child
+          </button>
+          <button onClick={() => fragmentRef.current.focusLast()}>
+            Focus last child
+          </button>
+          <button onClick={() => fragmentRef.current.blur()}>Blur</button>
+        </Fixture.Controls>
+        <div className="highlight-focused-children" style={{display: 'flex'}}>
+          <Fragment ref={fragmentRef}>
+            <div style={{outline: '1px solid black'}}>
+              <p>Unfocusable div</p>
+            </div>
+            <div style={{outline: '1px solid black'}}>
+              <p>Unfocusable div with nested focusable button</p>
+              <button>Button 1</button>
+            </div>
+            <button>Button 2</button>
+            <input type="text" placeholder="Input field" />
+            <div style={{outline: '1px solid black'}}>
+              <p>Unfocusable div</p>
+            </div>
+          </Fragment>
+        </div>
+      </Fixture>
+    </TestCase>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js
new file mode 100644
index 00000000000..563f2ad0542
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js
@@ -0,0 +1,100 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+const {Fragment, useRef, useState} = React;
+
+export default function GetClientRectsCase() {
+  const fragmentRef = useRef(null);
+  const [rects, setRects] = useState([]);
+  const getRects = () => {
+    const rects = fragmentRef.current.getClientRects();
+    setRects(rects);
+  };
+
+  return (
+    <TestCase title="getClientRects">
+      <TestCase.Steps>
+        <li>
+          Click the "Print Rects" button to get the client rects of the
+          elements.
+        </li>
+      </TestCase.Steps>
+      <TestCase.ExpectedResult>
+        Calling getClientRects on the fragment instance will return a list of a
+        DOMRectList for each child node.
+      </TestCase.ExpectedResult>
+      <Fixture>
+        <Fixture.Controls>
+          <button onClick={getRects}>Print Rects</button>
+          <div style={{display: 'flex'}}>
+            <div
+              style={{
+                position: 'relative',
+                width: '30vw',
+                height: '30vh',
+                border: '1px solid black',
+              }}>
+              {rects.map(({x, y, width, height}, index) => {
+                const scale = 0.3;
+
+                return (
+                  <div
+                    key={index}
+                    style={{
+                      position: 'absolute',
+                      top: y * scale,
+                      left: x * scale,
+                      width: width * scale,
+                      height: height * scale,
+                      border: '1px solid red',
+                      boxSizing: 'border-box',
+                    }}></div>
+                );
+              })}
+            </div>
+            <div>
+              {rects.map(({x, y, width, height}, index) => {
+                return (
+                  <div>
+                    {index} :: {`{`}x: {x}, y: {y}, width: {width}, height:{' '}
+                    {height}
+                    {`}`}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </Fixture.Controls>
+        <Fragment ref={fragmentRef}>
+          <span
+            style={{
+              width: '300px',
+              height: '250px',
+              backgroundColor: 'lightblue',
+              fontSize: 20,
+              border: '1px solid black',
+              marginBottom: '10px',
+            }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </span>
+          <div
+            style={{
+              width: '150px',
+              height: '100px',
+              backgroundColor: 'lightgreen',
+              border: '1px solid black',
+            }}></div>
+          <div
+            style={{
+              width: '500px',
+              height: '50px',
+              backgroundColor: 'lightpink',
+              border: '1px solid black',
+            }}></div>
+        </Fragment>
+      </Fixture>
+    </TestCase>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js
new file mode 100644
index 00000000000..057e94d09ac
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js
@@ -0,0 +1,155 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+const {Fragment, useEffect, useRef, useState} = React;
+
+function WrapperComponent(props) {
+  return props.children;
+}
+
+function ObservedChild({id}) {
+  return (
+    <div id={id} className="observable-card">
+      {id}
+    </div>
+  );
+}
+
+const initialItems = [
+  ['A', false],
+  ['B', false],
+  ['C', false],
+];
+
+export default function IntersectionObserverCase() {
+  const fragmentRef = useRef(null);
+  const [items, setItems] = useState(initialItems);
+  const addedItems = items.slice(3);
+  const anyOnScreen = items.some(([, onScreen]) => onScreen);
+  const observerRef = useRef(null);
+
+  useEffect(() => {
+    if (observerRef.current === null) {
+      observerRef.current = new IntersectionObserver(
+        entries => {
+          setItems(prev => {
+            const newItems = [...prev];
+            entries.forEach(entry => {
+              const index = newItems.findIndex(
+                ([id]) => id === entry.target.id
+              );
+              newItems[index] = [entry.target.id, entry.isIntersecting];
+            });
+            return newItems;
+          });
+        },
+        {
+          threshold: [0.5],
+        }
+      );
+    }
+    fragmentRef.current.observeUsing(observerRef.current);
+
+    const lastFragmentRefValue = fragmentRef.current;
+    return () => {
+      lastFragmentRefValue.unobserveUsing(observerRef.current);
+      observerRef.current = null;
+    };
+  }, []);
+
+  return (
+    <TestCase title="Intersection Observer">
+      <TestCase.Steps>
+        <li>
+          Scroll the children into view, observe the sidebar appears and shows
+          which children are in the viewport
+        </li>
+        <li>
+          Add a new child and observe that the Intersection Observer is applied
+        </li>
+        <li>
+          Click Unobserve and observe that the state of children in the viewport
+          is no longer updated
+        </li>
+        <li>
+          Click Observe and observe that the state of children in the viewport
+          is updated again
+        </li>
+      </TestCase.Steps>
+
+      <TestCase.ExpectedResult>
+        <p>
+          Fragment refs manage Intersection Observers on the first level of host
+          children. This page loads with an effect that sets up an Inersection
+          Observer applied to each child card.
+        </p>
+        <p>
+          New child nodes will also have the observer applied. Removed nodes
+          will be unobserved.
+        </p>
+      </TestCase.ExpectedResult>
+      <Fixture>
+        <Fixture.Controls>
+          <button
+            onClick={() => {
+              setItems(prev => [
+                ...prev,
+                [`Extra child: ${prev.length + 1}`, false],
+              ]);
+            }}>
+            Add Child
+          </button>
+          <button
+            onClick={() => {
+              setItems(prev => {
+                if (prev.length === 3) {
+                  return prev;
+                }
+                return prev.slice(0, prev.length - 1);
+              });
+            }}>
+            Remove Child
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.observeUsing(observerRef.current);
+            }}>
+            Observe
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.unobserveUsing(observerRef.current);
+              setItems(prev => {
+                return prev.map(item => [item[0], false]);
+              });
+            }}>
+            Unobserve
+          </button>
+          {anyOnScreen && (
+            <div className="fixed-sidebar card-container">
+              <p>
+                <strong>Children on screen:</strong>
+              </p>
+              {items.map(item => (
+                <div className={`card ${item[1] ? 'onscreen' : null}`}>
+                  {item[0]}
+                </div>
+              ))}
+            </div>
+          )}
+        </Fixture.Controls>
+        <Fragment ref={fragmentRef}>
+          <ObservedChild id="A" />
+          <WrapperComponent>
+            <ObservedChild id="B" />
+          </WrapperComponent>
+          <ObservedChild id="C" />
+          {addedItems.map((_, index) => (
+            <ObservedChild id={`Extra child: ${index + 4}`} />
+          ))}
+        </Fragment>
+      </Fixture>
+    </TestCase>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ResizeObserverCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/ResizeObserverCase.js
new file mode 100644
index 00000000000..ecacd509213
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/ResizeObserverCase.js
@@ -0,0 +1,63 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+const {Fragment, useEffect, useRef, useState} = React;
+
+export default function ResizeObserverCase() {
+  const fragmentRef = useRef(null);
+  const [width, setWidth] = useState([0, 0, 0]);
+
+  useEffect(() => {
+    const resizeObserver = new window.ResizeObserver(entries => {
+      if (entries.length > 0) {
+        setWidth(prev => {
+          const newWidth = [...prev];
+          entries.forEach(entry => {
+            const index = parseInt(entry.target.id, 10);
+            newWidth[index] = Math.round(entry.contentRect.width);
+          });
+          return newWidth;
+        });
+      }
+    });
+
+    fragmentRef.current.observeUsing(resizeObserver);
+    const lastFragmentRefValue = fragmentRef.current;
+    return () => {
+      lastFragmentRefValue.unobserveUsing(resizeObserver);
+    };
+  }, []);
+
+  return (
+    <TestCase title="Resize Observer">
+      <TestCase.Steps>
+        <li>Resize the viewport width until the children respond</li>
+        <li>See that the width data updates as they elements resize</li>
+      </TestCase.Steps>
+      <TestCase.ExpectedResult>
+        The Fragment Ref has a ResizeObserver attached which has a callback to
+        update the width state of each child node.
+      </TestCase.ExpectedResult>
+      <Fixture>
+        <Fragment ref={fragmentRef}>
+          <div className="card" id="0" style={{width: '100%'}}>
+            <p>
+              Width: <b>{width[0]}px</b>
+            </p>
+          </div>
+          <div className="card" id="1" style={{width: '80%'}}>
+            <p>
+              Width: <b>{width[1]}px</b>
+            </p>
+          </div>
+          <div className="card" id="2" style={{width: '50%'}}>
+            <p>
+              Width: <b>{width[2]}px</b>
+            </p>
+          </div>
+        </Fragment>
+      </Fixture>
+    </TestCase>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js
new file mode 100644
index 00000000000..e08b9ec50fe
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js
@@ -0,0 +1,184 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+import ScrollIntoViewCaseComplex from './ScrollIntoViewCaseComplex';
+import ScrollIntoViewCaseSimple from './ScrollIntoViewCaseSimple';
+import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';
+
+const React = window.React;
+const {Fragment, useRef, useState, useEffect} = React;
+const ReactDOM = window.ReactDOM;
+
+function Controls({
+  alignToTop,
+  setAlignToTop,
+  scrollVertical,
+  exampleType,
+  setExampleType,
+}) {
+  return (
+    <div>
+      <label>
+        Example Type:
+        <select
+          value={exampleType}
+          onChange={e => setExampleType(e.target.value)}>
+          <option value="simple">Simple</option>
+          <option value="multiple">Multiple Scroll Containers</option>
+          <option value="horizontal">Horizontal</option>
+          <option value="empty">Empty Fragment</option>
+        </select>
+      </label>
+      <div>
+        <label>
+          Align to Top:
+          <input
+            type="checkbox"
+            checked={alignToTop}
+            onChange={e => setAlignToTop(e.target.checked)}
+          />
+        </label>
+      </div>
+      <div>
+        <button onClick={scrollVertical}>scrollIntoView()</button>
+      </div>
+    </div>
+  );
+}
+
+export default function ScrollIntoViewCase() {
+  const [exampleType, setExampleType] = useState('simple');
+  const [alignToTop, setAlignToTop] = useState(true);
+  const [caseInViewport, setCaseInViewport] = useState(false);
+  const fragmentRef = useRef(null);
+  const testCaseRef = useRef(null);
+  const noChildRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+
+  const scrollVertical = () => {
+    fragmentRef.current.scrollIntoView(alignToTop);
+  };
+
+  const scrollVerticalNoChildren = () => {
+    noChildRef.current.scrollIntoView(alignToTop);
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setCaseInViewport(true);
+        } else {
+          setCaseInViewport(false);
+        }
+      });
+    });
+    testCaseRef.current.observeUsing(observer);
+
+    const lastRef = testCaseRef.current;
+    return () => {
+      lastRef.unobserveUsing(observer);
+      observer.disconnect();
+    };
+  });
+
+  return (
+    <Fragment ref={testCaseRef}>
+      <TestCase title="ScrollIntoView">
+        <TestCase.Steps>
+          <li>Toggle alignToTop and click the buttons to scroll</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          <p>When the Fragment has children:</p>
+          <p>
+            In order to handle the case where children are split between
+            multiple scroll containers, we call scrollIntoView on each child in
+            reverse order.
+          </p>
+          <p>When the Fragment does not have children:</p>
+          <p>
+            The Fragment still represents a virtual space. We can scroll to the
+            nearest edge by selecting the host sibling before if
+            alignToTop=false, or after if alignToTop=true|undefined. We'll fall
+            back to the other sibling or parent in the case that the preferred
+            sibling target doesn't exist.
+          </p>
+        </TestCase.ExpectedResult>
+        <Fixture>
+          <Fixture.Controls>
+            <Controls
+              alignToTop={alignToTop}
+              setAlignToTop={setAlignToTop}
+              scrollVertical={scrollVertical}
+              exampleType={exampleType}
+              setExampleType={setExampleType}
+            />
+          </Fixture.Controls>
+          {exampleType === 'simple' && (
+            <Fragment ref={fragmentRef}>
+              <ScrollIntoViewCaseSimple />
+            </Fragment>
+          )}
+          {exampleType === 'horizontal' && (
+            <div
+              style={{
+                display: 'flex',
+                overflowX: 'auto',
+                flexDirection: 'row',
+                border: '1px solid #ccc',
+                padding: '1rem 10rem',
+                marginBottom: '1rem',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                justifyContent: 'space-between',
+              }}>
+              <Fragment ref={fragmentRef}>
+                <ScrollIntoViewCaseSimple />
+              </Fragment>
+            </div>
+          )}
+          {exampleType === 'multiple' && (
+            <Fragment>
+              <div
+                style={{
+                  height: '50vh',
+                  overflowY: 'auto',
+                  border: '1px solid black',
+                  marginBottom: '1rem',
+                }}
+                ref={scrollContainerRef}
+              />
+              <Fragment ref={fragmentRef}>
+                <ScrollIntoViewCaseComplex
+                  caseInViewport={caseInViewport}
+                  scrollContainerRef={scrollContainerRef}
+                />
+              </Fragment>
+            </Fragment>
+          )}
+          {exampleType === 'empty' && (
+            <Fragment>
+              <ScrollIntoViewTargetElement
+                color="lightyellow"
+                id="ABOVE EMPTY FRAGMENT"
+              />
+              <Fragment ref={fragmentRef}></Fragment>
+              <ScrollIntoViewTargetElement
+                color="lightblue"
+                id="BELOW EMPTY FRAGMENT"
+              />
+            </Fragment>
+          )}
+          <Fixture.Controls>
+            <Controls
+              alignToTop={alignToTop}
+              setAlignToTop={setAlignToTop}
+              scrollVertical={scrollVertical}
+              exampleType={exampleType}
+              setExampleType={setExampleType}
+            />
+          </Fixture.Controls>
+        </Fixture>
+      </TestCase>
+    </Fragment>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseComplex.js b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseComplex.js
new file mode 100644
index 00000000000..a0ea612d09c
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseComplex.js
@@ -0,0 +1,50 @@
+import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';
+
+const React = window.React;
+const {Fragment, useRef, useState, useEffect} = React;
+const ReactDOM = window.ReactDOM;
+
+export default function ScrollIntoViewCaseComplex({
+  caseInViewport,
+  scrollContainerRef,
+}) {
+  const [didMount, setDidMount] = useState(false);
+  // Hack to portal child into the scroll container
+  // after the first render. This is to simulate a case where
+  // an item is portaled into another scroll container.
+  useEffect(() => {
+    if (!didMount) {
+      setDidMount(true);
+    }
+  }, []);
+  return (
+    <Fragment>
+      {caseInViewport && (
+        <div
+          style={{position: 'fixed', top: 0, backgroundColor: 'red'}}
+          id="header">
+          Fixed header
+        </div>
+      )}
+      {didMount &&
+        ReactDOM.createPortal(
+          <ScrollIntoViewTargetElement color="red" id="FROM_PORTAL" />,
+          scrollContainerRef.current
+        )}
+      <ScrollIntoViewTargetElement color="lightgreen" id="A" />
+      <ScrollIntoViewTargetElement color="lightcoral" id="B" />
+      <ScrollIntoViewTargetElement color="lightblue" id="C" />
+      {caseInViewport && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 0,
+            backgroundColor: 'purple',
+          }}
+          id="footer">
+          Fixed footer
+        </div>
+      )}
+    </Fragment>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseSimple.js b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseSimple.js
new file mode 100644
index 00000000000..ee61cd16290
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseSimple.js
@@ -0,0 +1,14 @@
+import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';
+
+const React = window.React;
+const {Fragment} = React;
+
+export default function ScrollIntoViewCaseSimple() {
+  return (
+    <Fragment>
+      <ScrollIntoViewTargetElement color="lightyellow" id="SCROLLABLE-1" />
+      <ScrollIntoViewTargetElement color="lightpink" id="SCROLLABLE-2" />
+      <ScrollIntoViewTargetElement color="lightcyan" id="SCROLLABLE-3" />
+    </Fragment>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewTargetElement.js b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewTargetElement.js
new file mode 100644
index 00000000000..f61668c5cf5
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewTargetElement.js
@@ -0,0 +1,18 @@
+const React = window.React;
+
+export default function ScrollIntoViewTargetElement({color, id, top}) {
+  return (
+    <div
+      id={id}
+      style={{
+        height: 500,
+        minWidth: 300,
+        backgroundColor: color,
+        marginTop: top ? '50vh' : 0,
+        marginBottom: 100,
+        flexShrink: 0,
+      }}>
+      {id}
+    </div>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/index.js b/fixtures/dom/src/components/fixtures/fragment-refs/index.js
new file mode 100644
index 00000000000..c560b59fbec
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/fragment-refs/index.js
@@ -0,0 +1,24 @@
+import FixtureSet from '../../FixtureSet';
+import EventListenerCase from './EventListenerCase';
+import EventDispatchCase from './EventDispatchCase';
+import IntersectionObserverCase from './IntersectionObserverCase';
+import ResizeObserverCase from './ResizeObserverCase';
+import FocusCase from './FocusCase';
+import GetClientRectsCase from './GetClientRectsCase';
+import ScrollIntoViewCase from './ScrollIntoViewCase';
+
+const React = window.React;
+
+export default function FragmentRefsPage() {
+  return (
+    <FixtureSet title="Fragment Refs">
+      <EventListenerCase />
+      <EventDispatchCase />
+      <IntersectionObserverCase />
+      <ResizeObserverCase />
+      <FocusCase />
+      <GetClientRectsCase />
+      <ScrollIntoViewCase />
+    </FixtureSet>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/home.js b/fixtures/dom/src/components/fixtures/home.js
new file mode 100644
index 00000000000..b446cf7e613
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/home.js
@@ -0,0 +1,118 @@
+const React = window.React;
+
+export default function Home() {
+  return (
+    <main className="container">
+      <h1>DOM Test Fixtures</h1>
+      <p>
+        Use this site to test browser quirks and other behavior that can not be
+        captured through unit tests.
+      </p>
+      <section>
+        <h2>Tested Browsers</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Browser</th>
+              <th>Versions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Chrome - Desktop</td>
+              <td>
+                49<sup>*</sup>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Chrome - Android</td>
+              <td>Latest</td>
+            </tr>
+            <tr>
+              <td>Firefox Desktop</td>
+              <td>
+                <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                  ESR<sup>†</sup>
+                </a>
+                , Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Internet Explorer</td>
+              <td>9, 10, 11</td>
+            </tr>
+            <tr>
+              <td>Microsoft Edge</td>
+              <td>14, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - Desktop</td>
+              <td>7, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - iOS</td>
+              <td>7, Latest</td>
+            </tr>
+          </tbody>
+        </table>
+        <footer>
+          <small>* Chrome 49 is the last release for Windows XP.</small>
+          <br />
+          <small>
+            † Firefox Extended Support Release (ESR) is used by many
+            institutions.
+          </small>
+        </footer>
+      </section>
+      <section>
+        <h2>How do I test browsers I don't have access to?</h2>
+        <p>
+          Getting test coverage across all of these browsers can be difficult,
+          particularly for older versions of evergreen browsers. Fortunately
+          there are a handful of tools that make browser testing easy.
+        </p>
+        <section>
+          <h3>Paid services</h3>
+          <ul>
+            <li>
+              <a href="https://browserstack.com">BrowserStack</a>
+            </li>
+            <li>
+              <a href="https://saucelabs.com">Sauce Labs</a>
+            </li>
+            <li>
+              <a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
+            </li>
+          </ul>
+          <p>
+            These services provide access to all browsers we test, however they
+            cost money. There is no obligation to pay for them. Maintainers have
+            access to a BrowserStack subscription; feel free to contact a
+            maintainer or mention browsers where extra testing is required.
+          </p>
+        </section>
+        <section>
+          <h3>Browser downloads</h3>
+          <p>A handful of browsers are available for download directly:</p>
+          <ul>
+            <li>
+              <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
+                Internet Explorer (9-11) and MS Edge virtual machines
+              </a>
+            </li>
+            <li>
+              <a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
+                Chromium snapshots (for older versions of Chrome)
+              </a>
+            </li>
+            <li>
+              <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                Firefox Extended Support Release (ESR)
+              </a>
+            </li>
+          </ul>
+        </section>
+      </section>
+    </main>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/hydration/Code.js b/fixtures/dom/src/components/fixtures/hydration/Code.js
new file mode 100644
index 00000000000..b76f015fa62
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/hydration/Code.js
@@ -0,0 +1,92 @@
+import {findDOMNode} from '../../../find-dom-node';
+
+const React = window.React;
+
+export class CodeEditor extends React.Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    this.textarea = findDOMNode(this);
+
+    // Important: CodeMirror incorrectly lays out the editor
+    // if it executes before CSS has loaded
+    // https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
+    Promise.all([
+      import('codemirror'),
+      import('codemirror/mode/jsx/jsx'),
+      import('codemirror/lib/codemirror.css'),
+      import('./codemirror-paraiso-dark.css'),
+    ]).then(([CodeMirror]) => this.install(CodeMirror));
+  }
+
+  install(CodeMirror) {
+    if (!this.textarea) {
+      return;
+    }
+
+    const {onChange} = this.props;
+
+    this.editor = CodeMirror.fromTextArea(this.textarea, {
+      mode: 'jsx',
+      theme: 'paraiso-dark',
+      lineNumbers: true,
+    });
+
+    this.editor.on('change', function (doc) {
+      onChange(doc.getValue());
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  }
+
+  render() {
+    return (
+      <textarea
+        defaultValue={this.props.code}
+        autoComplete="off"
+        hidden={true}
+      />
+    );
+  }
+}
+
+/**
+ * Prevent IE9 from raising an error on an unrecognized element:
+ * See https://github.com/facebook/react/issues/13610
+ */
+const supportsDetails = !(
+  document.createElement('details') instanceof HTMLUnknownElement
+);
+
+export class CodeError extends React.Component {
+  render() {
+    const {error, className} = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    if (supportsDetails) {
+      const [summary, ...body] = error.message.split(/\n+/g);
+
+      if (body.length >= 0) {
+        return <div className={className}>{summary}</div>;
+      }
+
+      return (
+        <details className={className}>
+          <summary>{summary}</summary>
+          {body.join('\n')}
+        </details>
+      );
+    }
+
+    return <div className={className}>{error.message}</div>;
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/hydration/code-transformer.js b/fixtures/dom/src/components/fixtures/hydration/code-transformer.js
new file mode 100644
index 00000000000..97cd6cc4796
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/hydration/code-transformer.js
@@ -0,0 +1,18 @@
+/**
+ * Babel works across all browsers, however it requires many polyfills.
+ */
+
+import 'core-js/es6/weak-map';
+import 'core-js/es6/weak-set';
+import 'core-js/es6/number';
+import 'core-js/es6/string';
+import 'core-js/es6/array';
+import 'core-js/modules/es6.object.set-prototype-of';
+
+import {transform} from '@babel/standalone';
+
+const presets = ['es2015', 'stage-3', 'react'];
+
+export function compile(raw) {
+  return transform(raw, {presets}).code;
+}
diff --git a/fixtures/dom/src/components/fixtures/hydration/codemirror-paraiso-dark.css b/fixtures/dom/src/components/fixtures/hydration/codemirror-paraiso-dark.css
new file mode 100644
index 00000000000..1e9170c57fb
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/hydration/codemirror-paraiso-dark.css
@@ -0,0 +1,38 @@
+/**
+ * Name:       Paraíso (Dark)
+ * Author:     Jan T. Sott
+ * License:    Creative Commons Attribution-ShareAlike 4.0 Unported License.
+ *             https://creativecommons.org/licenses/by-sa/4.0/deed.en_US
+ *
+ * Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
+ * Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
+ */
+
+.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
+.cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; }
+.cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rgba(65, 50, 63, .99); }
+.cm-s-paraiso-dark .CodeMirror-line::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(65, 50, 63, .99); }
+.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
+.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
+.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
+.cm-s-paraiso-dark .CodeMirror-linenumber { color: #776e71; }
+.cm-s-paraiso-dark .CodeMirror-cursor { border-left: 1px solid #8d8687; }
+
+.cm-s-paraiso-dark span.cm-comment { color: #e96ba8; }
+.cm-s-paraiso-dark span.cm-atom { color: #815ba4; }
+.cm-s-paraiso-dark span.cm-number { color: #815ba4; }
+
+.cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute { color: #48b685; }
+.cm-s-paraiso-dark span.cm-keyword { color: #ef6155; }
+.cm-s-paraiso-dark span.cm-string { color: #fec418; }
+
+.cm-s-paraiso-dark span.cm-variable { color: #48b685; }
+.cm-s-paraiso-dark span.cm-variable-2 { color: #06b6ef; }
+.cm-s-paraiso-dark span.cm-def { color: #f99b15; }
+.cm-s-paraiso-dark span.cm-bracket { color: #b9b6b0; }
+.cm-s-paraiso-dark span.cm-tag { color: #ef6155; }
+.cm-s-paraiso-dark span.cm-link { color: #815ba4; }
+.cm-s-paraiso-dark span.cm-error { background: #ef6155; color: #8d8687; }
+
+.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
+.cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
diff --git a/fixtures/dom/src/components/fixtures/hydration/data.js b/fixtures/dom/src/components/fixtures/hydration/data.js
new file mode 100644
index 00000000000..d4e870faf81
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/hydration/data.js
@@ -0,0 +1,22 @@
+export const SAMPLE_CODE = `
+class Fixture extends React.Component {
+  state = {
+    value: 'asdf'
+  }
+
+  onChange(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <form>
+        <input value={value} onChange={this.onChange.bind(this)} />
+        <p>Value: {value}</p>
+      </form>
+    );
+  }
+}
+`.trim();
diff --git a/fixtures/dom/src/components/fixtures/hydration/hydration.css b/fixtures/dom/src/components/fixtures/hydration/hydration.css
new file mode 100644
index 00000000000..069f0255650
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/hydration/hydration.css
@@ -0,0 +1,74 @@
+.hydration {
+  background: #2f1e2e;
+  margin: 0;
+  position: relative;
+  height: calc(100vh - 40px); /* height of header */
+  overflow: auto;
+  padding-top: 32px;
+}
+
+.hydration-options {
+  background: #171717;
+  border-top: 1px dashed rgba(215, 235, 255, 0.12);
+  color: #def5ff;
+  height: 32px;
+  line-height: 28px;
+  padding: 0 8px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.hydration-options label {
+  font-size: 13px;
+  margin-right: 10px;
+}
+
+.hydration-options input[type=checkbox] {
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.hydration-options select {
+  margin-left: 10px;
+  max-width: 100px;
+}
+
+.hydration .CodeMirror {
+  font-size: 13px;
+  padding-top: 8px;
+  padding-bottom: 68px;
+  height: calc(100vh - 72px);
+  width: 55%;
+}
+
+.hydration-sandbox {
+  background: white;
+  border-radius: 2px;
+  border: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.54);
+  height: calc(100% - 34px);
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: calc(45% - 24px);
+}
+
+.hydration-code-error {
+  background: #df3f3f;
+  border-radius: 2px;
+  bottom: 18px;
+  color: white;
+  font-family: monospace;
+  font-size: 13px;
+  left: 16px;
+  line-height: 1.25;
+  overflow: auto;
+  padding: 12px;
+  position: fixed;
+  white-space: pre;
+  max-width: calc(55% - 26px);
+  z-index: 10;
+}
diff --git a/fixtures/dom/src/components/fixtures/hydration/index.js b/fixtures/dom/src/components/fixtures/hydration/index.js
new file mode 100644
index 00000000000..9c786a1f5ec
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/hydration/index.js
@@ -0,0 +1,130 @@
+import './hydration.css';
+import VersionPicker from '../../VersionPicker';
+import {SAMPLE_CODE} from './data';
+import {CodeEditor, CodeError} from './Code';
+import {compile} from './code-transformer';
+import {reactPaths} from '../../../react-loader';
+import qs from 'query-string';
+
+const React = window.React;
+// The Hydration fixture can render at a different version than the parent
+// app. This allows rendering for versions of React older than the DOM
+// test fixtures can support.
+const initialVersion = qs.parse(window.location.search).version || 'local';
+
+class Hydration extends React.Component {
+  state = {
+    error: null,
+    code: SAMPLE_CODE,
+    hydrate: true,
+    version: initialVersion,
+  };
+
+  ready = false;
+
+  componentDidMount() {
+    window.addEventListener('message', this.handleMessage);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('message', this.handleMessage);
+  }
+
+  handleMessage = event => {
+    var data = JSON.parse(event.data);
+
+    switch (data.type) {
+      case 'ready':
+        this.ready = true;
+        this.injectCode();
+        break;
+      default:
+        throw new Error(
+          'Editor Error: Unrecognized message "' + data.type + '"'
+        );
+    }
+  };
+
+  injectCode = () => {
+    try {
+      this.send({
+        type: 'code',
+        payload: compile(this.state.code),
+      });
+
+      this.setState({error: null});
+    } catch (error) {
+      this.setState({error});
+    }
+  };
+
+  send = message => {
+    if (this.ready) {
+      this.frame.contentWindow.postMessage(JSON.stringify(message), '*');
+    }
+  };
+
+  setFrame = frame => {
+    this.frame = frame;
+  };
+
+  setCode = code => {
+    this.setState({code}, this.injectCode);
+  };
+
+  setCheckbox = event => {
+    this.setState({
+      [event.target.name]: event.target.checked,
+    });
+  };
+
+  setVersion = version => {
+    this.setState({version});
+  };
+
+  render() {
+    const {code, error, hydrate, version} = this.state;
+    const src =
+      '/renderer.html?' + qs.stringify({hydrate, ...reactPaths(version)});
+
+    return (
+      <div className="hydration">
+        <header className="hydration-options">
+          <label htmlFor="hydrate">
+            <input
+              id="hydrate"
+              name="hydrate"
+              type="checkbox"
+              checked={hydrate}
+              onChange={this.setCheckbox}
+            />
+            Auto-Hydrate
+          </label>
+
+          <label htmlFor="hydration_version">
+            Version:
+            <VersionPicker
+              id="hydration_version"
+              name="hydration_version"
+              version={version}
+              onChange={this.setVersion}
+            />
+          </label>
+        </header>
+
+        <CodeEditor code={code} onChange={this.setCode} />
+
+        <CodeError error={error} className="hydration-code-error" />
+
+        <iframe
+          ref={this.setFrame}
+          className="hydration-sandbox"
+          title="Hydration Preview"
+          src={src}
+        />
+      </div>
+    );
+  }
+}
+
+export default Hydration;
diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
new file mode 100644
index 00000000000..69b220034f7
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/index.js
@@ -0,0 +1,62 @@
+const React = window.React;
+const fixturePath = window.location.pathname;
+
+/**
+ * A simple routing component that renders the appropriate
+ * fixture based on the location pathname.
+ */
+class FixturesPage extends React.Component {
+  static defaultProps = {
+    fixturePath: fixturePath === '/' ? '/home' : fixturePath,
+  };
+
+  state = {
+    isLoading: true,
+    error: null,
+    Fixture: null,
+  };
+
+  componentDidMount() {
+    this.loadFixture();
+  }
+
+  async loadFixture() {
+    const {fixturePath} = this.props;
+
+    try {
+      const module = await import(`.${fixturePath}`);
+
+      this.setState({Fixture: module.default});
+    } catch (error) {
+      console.error(error);
+      this.setState({error});
+    } finally {
+      this.setState({isLoading: false});
+    }
+  }
+
+  render() {
+    const {Fixture, error, isLoading} = this.state;
+
+    if (isLoading) {
+      return null;
+    }
+
+    if (error) {
+      return <FixtureError error={error} />;
+    }
+
+    return <Fixture />;
+  }
+}
+
+function FixtureError({error}) {
+  return (
+    <section>
+      <h2>Error loading fixture</h2>
+      <p>{error.message}</p>
+    </section>
+  );
+}
+
+export default FixturesPage;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/InputPlaceholderFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/InputPlaceholderFixture.js
new file mode 100644
index 00000000000..e8fb228c2dc
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/InputPlaceholderFixture.js
@@ -0,0 +1,58 @@
+import Fixture from '../../Fixture';
+const React = window.React;
+
+class InputPlaceholderFixture extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      placeholder: 'A placeholder',
+      changeCount: 0,
+    };
+  }
+
+  handleChange = () => {
+    this.setState(({changeCount}) => {
+      return {
+        changeCount: changeCount + 1,
+      };
+    });
+  };
+  handleGeneratePlaceholder = () => {
+    this.setState({
+      placeholder: `A placeholder: ${Math.random() * 100}`,
+    });
+  };
+
+  handleReset = () => {
+    this.setState({
+      changeCount: 0,
+    });
+  };
+
+  render() {
+    const {placeholder, changeCount} = this.state;
+    const color = changeCount === 0 ? 'green' : 'red';
+
+    return (
+      <Fixture>
+        <input
+          type="text"
+          placeholder={placeholder}
+          onChange={this.handleChange}
+        />{' '}
+        <button onClick={this.handleGeneratePlaceholder}>
+          Change placeholder
+        </button>
+        <p style={{color}}>
+          <code>onChange</code>
+          {' calls: '}
+          <strong>{changeCount}</strong>
+        </p>
+        <button onClick={this.handleReset}>Reset count</button>
+      </Fixture>
+    );
+  }
+}
+
+export default InputPlaceholderFixture;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioClickFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioClickFixture.js
new file mode 100644
index 00000000000..57cfcb445e2
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/RadioClickFixture.js
@@ -0,0 +1,48 @@
+import Fixture from '../../Fixture';
+const React = window.React;
+
+class RadioClickFixture extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      changeCount: 0,
+    };
+  }
+
+  handleChange = () => {
+    this.setState(({changeCount}) => {
+      return {
+        changeCount: changeCount + 1,
+      };
+    });
+  };
+
+  handleReset = () => {
+    this.setState({
+      changeCount: 0,
+    });
+  };
+
+  render() {
+    const {changeCount} = this.state;
+    const color = changeCount === 0 ? 'green' : 'red';
+
+    return (
+      <Fixture>
+        <label>
+          <input defaultChecked type="radio" onChange={this.handleChange} />
+          Test case radio input
+        </label>{' '}
+        <p style={{color}}>
+          <code>onChange</code>
+          {' calls: '}
+          <strong>{changeCount}</strong>
+        </p>
+        <button onClick={this.handleReset}>Reset count</button>
+      </Fixture>
+    );
+  }
+}
+
+export default RadioClickFixture;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js
new file mode 100644
index 00000000000..d046e4d9be1
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js
@@ -0,0 +1,57 @@
+import Fixture from '../../Fixture';
+const React = window.React;
+
+class RadioGroupFixture extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      changeCount: 0,
+    };
+  }
+
+  handleChange = () => {
+    this.setState(({changeCount}) => {
+      return {
+        changeCount: changeCount + 1,
+      };
+    });
+  };
+
+  handleReset = () => {
+    this.setState({
+      changeCount: 0,
+    });
+  };
+
+  render() {
+    const {changeCount} = this.state;
+    const color = changeCount >= 3 ? 'green' : 'red';
+
+    return (
+      <Fixture>
+        <label>
+          <input
+            defaultChecked
+            name="foo"
+            type="radio"
+            onChange={this.handleChange}
+          />
+          Radio 1
+        </label>
+        <label>
+          <input name="foo" type="radio" onChange={this.handleChange} />
+          Radio 2
+        </label>{' '}
+        <p style={{color}}>
+          <code>onChange</code>
+          {' calls: '}
+          <strong>{changeCount}</strong>
+        </p>
+        <button onClick={this.handleReset}>Reset count</button>
+      </Fixture>
+    );
+  }
+}
+
+export default RadioGroupFixture;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
new file mode 100644
index 00000000000..3df34baaf6e
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
@@ -0,0 +1,48 @@
+const React = window.React;
+const noop = n => n;
+
+class RadioNameChangeFixture extends React.Component {
+  state = {
+    updated: false,
+  };
+  onClick = () => {
+    this.setState(state => {
+      return {updated: !state.updated};
+    });
+  };
+  render() {
+    const {updated} = this.state;
+    const radioName = updated ? 'firstName' : 'secondName';
+    return (
+      <div>
+        <label>
+          <input
+            type="radio"
+            name={radioName}
+            onChange={noop}
+            checked={updated === true}
+          />
+          First Radio
+        </label>
+
+        <label>
+          <input
+            type="radio"
+            name={radioName}
+            onChange={noop}
+            checked={updated === false}
+          />
+          Second Radio
+        </label>
+
+        <div>
+          <button type="button" onClick={this.onClick}>
+            Toggle
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RadioNameChangeFixture;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js
new file mode 100644
index 00000000000..b099d47715e
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js
@@ -0,0 +1,79 @@
+import Fixture from '../../Fixture';
+const React = window.React;
+
+class RangeKeyboardFixture extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      keydownCount: 0,
+      changeCount: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.input.addEventListener('keydown', this.handleKeydown, false);
+  }
+
+  componentWillUnmount() {
+    this.input.removeEventListener('keydown', this.handleKeydown, false);
+  }
+
+  handleChange = () => {
+    this.setState(({changeCount}) => {
+      return {
+        changeCount: changeCount + 1,
+      };
+    });
+  };
+
+  handleKeydown = e => {
+    // only interesting in arrow key events
+    if ([37, 38, 39, 40].indexOf(e.keyCode) < 0) {
+      return;
+    }
+
+    this.setState(({keydownCount}) => {
+      return {
+        keydownCount: keydownCount + 1,
+      };
+    });
+  };
+
+  handleReset = () => {
+    this.setState({
+      keydownCount: 0,
+      changeCount: 0,
+    });
+  };
+
+  render() {
+    const {keydownCount, changeCount} = this.state;
+    const color = keydownCount === changeCount ? 'green' : 'red';
+
+    return (
+      <Fixture>
+        <div>
+          <input
+            type="range"
+            ref={r => (this.input = r)}
+            onChange={this.handleChange}
+          />
+          <button onClick={() => this.input.focus()}>Focus Knob</button>
+        </div>{' '}
+        <p style={{color}}>
+          <code>onKeyDown</code>
+          {' calls: '}
+          <strong>{keydownCount}</strong>
+          {' vs '}
+          <code>onChange</code>
+          {' calls: '}
+          <strong>{changeCount}</strong>
+        </p>
+        <button onClick={this.handleReset}>Reset counts</button>
+      </Fixture>
+    );
+  }
+}
+
+export default RangeKeyboardFixture;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/index.js b/fixtures/dom/src/components/fixtures/input-change-events/index.js
new file mode 100644
index 00000000000..a6d6ee4df2d
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/index.js
@@ -0,0 +1,116 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import RangeKeyboardFixture from './RangeKeyboardFixture';
+import RadioClickFixture from './RadioClickFixture';
+import RadioGroupFixture from './RadioGroupFixture';
+import RadioNameChangeFixture from './RadioNameChangeFixture';
+import InputPlaceholderFixture from './InputPlaceholderFixture';
+const React = window.React;
+
+class InputChangeEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Input change events"
+        description="Tests proper behavior of the onChange event for inputs">
+        <TestCase
+          title="Range keyboard changes"
+          description={`
+            Range inputs should fire onChange events for keyboard events
+          `}>
+          <TestCase.Steps>
+            <li>Focus range input</li>
+            <li>change value via the keyboard arrow keys</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The <code>onKeyDown</code> call count should be equal to the{' '}
+            <code>onChange</code> call count.
+          </TestCase.ExpectedResult>
+
+          <RangeKeyboardFixture />
+        </TestCase>
+
+        <TestCase
+          title="Radio input clicks"
+          description={`
+            Radio inputs should only fire change events when the checked
+            state changes.
+          `}
+          resolvedIn="16.0.0">
+          <TestCase.Steps>
+            <li>Click on the Radio input (or label text)</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The <code>onChange</code> call count should remain at 0
+          </TestCase.ExpectedResult>
+
+          <RadioClickFixture />
+        </TestCase>
+        <TestCase
+          title="Uncontrolled radio groups"
+          description={`
+            Radio inputs should fire change events when the value moved to
+            another named input
+          `}
+          introducedIn="15.6.0">
+          <TestCase.Steps>
+            <li>Click on the "Radio 2"</li>
+            <li>Click back to "Radio 1"</li>
+            <li>Click back to "Radio 2"</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The <code>onChange</code> call count increment on each value change
+            (at least 3+)
+          </TestCase.ExpectedResult>
+
+          <RadioGroupFixture />
+        </TestCase>
+
+        <TestCase
+          title="Inputs with placeholders"
+          description={`
+            Text inputs with placeholders should not trigger changes
+            when the placeholder is altered
+          `}
+          resolvedIn="15.0.0"
+          resolvedBy="#5004"
+          affectedBrowsers="IE9+">
+          <TestCase.Steps>
+            <li>Click on the Text input</li>
+            <li>Click on the "Change placeholder" button</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The <code>onChange</code> call count should remain at 0
+          </TestCase.ExpectedResult>
+
+          <InputPlaceholderFixture />
+        </TestCase>
+        <TestCase
+          title="Radio button groups with name changes"
+          description={`
+            A radio button group should have correct checked value when
+            the names changes
+          `}
+          resolvedBy="#11227"
+          affectedBrowsers="IE9+">
+          <TestCase.Steps>
+            <li>Click the toggle button</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The checked radio button should switch between the first and second
+            radio button
+          </TestCase.ExpectedResult>
+
+          <RadioNameChangeFixture />
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export default InputChangeEvents;
diff --git a/fixtures/dom/src/components/fixtures/media-events/index.js b/fixtures/dom/src/components/fixtures/media-events/index.js
new file mode 100644
index 00000000000..cdb6147f86c
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/media-events/index.js
@@ -0,0 +1,122 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+export default class MediaEvents extends React.Component {
+  state = {
+    playbackRate: 2,
+    events: {
+      onCanPlay: false,
+      onCanPlayThrough: false,
+      onDurationChange: false,
+      onEmptied: false,
+      onEnded: false,
+      onError: false,
+      onLoadedData: false,
+      onLoadedMetadata: false,
+      onLoadStart: false,
+      onPause: false,
+      onPlay: false,
+      onPlaying: false,
+      onProgress: false,
+      onRateChange: false,
+      onResize: false,
+      onSeeked: false,
+      onSeeking: false,
+      onSuspend: false,
+      onTimeUpdate: false,
+      onVolumeChange: false,
+      onWaiting: false,
+    },
+  };
+
+  updatePlaybackRate = () => {
+    this.video.playbackRate = 2;
+  };
+
+  setVideo = el => {
+    this.video = el;
+  };
+
+  eventDidFire(event) {
+    this.setState({
+      events: Object.assign({}, this.state.events, {[event]: true}),
+    });
+  }
+
+  getProgress() {
+    const events = Object.keys(this.state.events);
+    const total = events.length;
+    const fired = events.filter(type => this.state.events[type]).length;
+
+    return fired / total;
+  }
+
+  render() {
+    const events = Object.keys(this.state.events);
+    const handlers = events.reduce((events, event) => {
+      events[event] = this.eventDidFire.bind(this, event);
+      return events;
+    }, {});
+
+    return (
+      <FixtureSet title="Media Events">
+        <TestCase
+          title="Event bubbling"
+          description="Media events should synthetically bubble">
+          <TestCase.Steps>
+            <li>Play the loaded video</li>
+            <li>Pause the loaded video</li>
+            <li>Play the failing video</li>
+            <li>Drag the track bar</li>
+            <li>Toggle the volume button</li>
+            <li>
+              <button onClick={this.updatePlaybackRate}>
+                Click this button to increase playback rate
+              </button>
+            </li>
+          </TestCase.Steps>
+
+          <p className="footnote">
+            Note: This test does not confirm <code>onStalled</code>,{' '}
+            <code>onAbort</code>, or <code>onEncrypted</code>
+          </p>
+
+          <TestCase.ExpectedResult>
+            All events in the table below should be marked as "true".
+          </TestCase.ExpectedResult>
+
+          <section {...handlers}>
+            <video src="/test.mp4" width="300" controls ref={this.setVideo} />
+            <video src="/missing.mp4" width="300" controls />
+            <p className="footnote">
+              Note: The second video will not load. This is intentional.
+            </p>
+          </section>
+          <hr />
+          <section>
+            <h3>Events</h3>
+            <p>The following events should bubble:</p>
+            <table>
+              <tbody>{events.map(this.renderOutcome, this)}</tbody>
+            </table>
+          </section>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+
+  renderOutcome(event) {
+    let fired = this.state.events[event];
+
+    return (
+      <tr key={event}>
+        <td>
+          <b>{event}</b>
+        </td>
+        <td style={{color: fired ? null : 'red'}}>{`${fired}`}</td>
+      </tr>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/mouse-events/index.js b/fixtures/dom/src/components/fixtures/mouse-events/index.js
new file mode 100644
index 00000000000..3624d4e837b
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/mouse-events/index.js
@@ -0,0 +1,18 @@
+import FixtureSet from '../../FixtureSet';
+import MouseMovement from './mouse-movement';
+import MouseEnter from './mouse-enter';
+
+const React = window.React;
+
+class MouseEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Mouse Events">
+        <MouseMovement />
+        <MouseEnter />
+      </FixtureSet>
+    );
+  }
+}
+
+export default MouseEvents;
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 00000000000..91cd11c3a65
--- /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/mouse-events/mouse-movement.js b/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js
new file mode 100644
index 00000000000..e6706edc238
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js
@@ -0,0 +1,48 @@
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+class MouseMovement extends React.Component {
+  state = {
+    movement: {x: 0, y: 0},
+  };
+
+  onMove = event => {
+    this.setState({x: event.movementX, y: event.movementY});
+  };
+
+  render() {
+    const {x, y} = this.state;
+
+    const boxStyle = {
+      padding: '10px 20px',
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+    };
+
+    return (
+      <TestCase
+        title="Mouse Movement"
+        description="We polyfill the movementX and movementY fields."
+        affectedBrowsers="IE, Safari">
+        <TestCase.Steps>
+          <li>Mouse over the box below</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The reported values should equal the pixel (integer) difference
+          between mouse movements positions.
+        </TestCase.ExpectedResult>
+
+        <div style={boxStyle} onMouseMove={this.onMove}>
+          <p>Trace your mouse over this box.</p>
+          <p>
+            Last movement: {x},{y}
+          </p>
+        </div>
+      </TestCase>
+    );
+  }
+}
+
+export default MouseMovement;
diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js
new file mode 100644
index 00000000000..667ac253875
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js
@@ -0,0 +1,33 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class NumberInputDecimal extends React.Component {
+  state = {value: '.98'};
+  changeValue = () => {
+    this.setState({
+      value: '0.98',
+    });
+  };
+  render() {
+    const {value} = this.state;
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <input
+            type="number"
+            value={value}
+            onChange={e => {
+              this.setState({value: e.target.value});
+            }}
+          />
+          <button onClick={this.changeValue}>change.98 to 0.98</button>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default NumberInputDecimal;
diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js
new file mode 100644
index 00000000000..ba84f8c9186
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js
@@ -0,0 +1,30 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class NumberInputExtraZeroes extends React.Component {
+  state = {value: '3.0000'};
+  changeValue = () => {
+    this.setState({
+      value: '3.0000',
+    });
+  };
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    const {value} = this.state;
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <input type="number" value={value} onChange={this.onChange} />
+          <button onClick={this.changeValue}>Reset to "3.0000"</button>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default NumberInputExtraZeroes;
diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
new file mode 100644
index 00000000000..88b8c11033d
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
@@ -0,0 +1,42 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class NumberTestCase extends React.Component {
+  state = {value: ''};
+  onChange = event => {
+    const parsed = parseFloat(event.target.value, 10);
+    const value = isNaN(parsed) ? '' : parsed;
+
+    this.setState({value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="number"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="number" defaultValue={0.5} />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default NumberTestCase;
diff --git a/fixtures/dom/src/components/fixtures/number-inputs/index.js b/fixtures/dom/src/components/fixtures/number-inputs/index.js
new file mode 100644
index 00000000000..46b4edb6f64
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/number-inputs/index.js
@@ -0,0 +1,193 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import NumberTestCase from './NumberTestCase';
+import NumberInputDecimal from './NumberInputDecimal';
+import NumberInputExtraZeroes from './NumberInputExtraZeroes';
+
+const React = window.React;
+
+function NumberInputs() {
+  return (
+    <FixtureSet
+      title="Number inputs"
+      description="Number inputs inconsistently assign and report the value
+                     property depending on the browser.">
+      <TestCase
+        title="Backspacing"
+        description="The decimal place should not be lost">
+        <TestCase.Steps>
+          <li>Type "3.1"</li>
+          <li>Press backspace, eliminating the "1"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "3.", preserving the decimal place
+        </TestCase.ExpectedResult>
+
+        <NumberTestCase />
+
+        <p className="footnote">
+          <b>Notes:</b> Modern Chrome and Safari {'<='} 6 clear trailing
+          decimals on blur. React makes this concession so that the value
+          attribute remains in sync with the value property.
+        </p>
+      </TestCase>
+
+      <TestCase
+        title="Decimal precision"
+        description="Supports decimal precision greater than 2 places">
+        <TestCase.Steps>
+          <li>Type "0.01"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "0.01"
+        </TestCase.ExpectedResult>
+
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Exponent form"
+        description="Supports exponent form ('2e4')">
+        <TestCase.Steps>
+          <li>Type "2e"</li>
+          <li>Type 4, to read "2e4"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "2e4". The parsed value should read "20000"
+        </TestCase.ExpectedResult>
+
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase title="Exponent Form" description="Pressing 'e' at the end">
+        <TestCase.Steps>
+          <li>Type "3.14"</li>
+          <li>Press "e", so that the input reads "3.14e"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "3.14e", the parsed value should be empty
+        </TestCase.ExpectedResult>
+
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Exponent Form"
+        description="Supports pressing 'ee' in the middle of a number">
+        <TestCase.Steps>
+          <li>Type "3.14"</li>
+          <li>Move the text cursor to after the decimal place</li>
+          <li>Press "e" twice, so that the value reads "3.ee14"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "3.ee14"
+        </TestCase.ExpectedResult>
+
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Trailing Zeroes"
+        description="Typing '3.0' preserves the trailing zero">
+        <TestCase.Steps>
+          <li>Type "3.0"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "3.0"
+        </TestCase.ExpectedResult>
+
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Inserting decimals precision"
+        description="Inserting '.' in to '300' maintains the trailing zeroes">
+        <TestCase.Steps>
+          <li>Type "300"</li>
+          <li>Move the cursor to after the "3"</li>
+          <li>Type "."</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "3.00", not "3"
+        </TestCase.ExpectedResult>
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Replacing numbers with -"
+        description="Replacing a number with the '-' sign should not clear the value">
+        <TestCase.Steps>
+          <li>Type "3"</li>
+          <li>Select the entire value"</li>
+          <li>Type '-' to replace '3' with '-'</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "-", not be blank.
+        </TestCase.ExpectedResult>
+        <NumberTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Negative numbers"
+        description="Typing minus when inserting a negative number should work">
+        <TestCase.Steps>
+          <li>Type "-"</li>
+          <li>Type '3'</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read "-3".
+        </TestCase.ExpectedResult>
+        <NumberTestCase />
+      </TestCase>
+      <TestCase
+        title="Decimal numbers"
+        description="eg: initial value is '.98', when format to '0.98', should change to '0.98' ">
+        <TestCase.Steps>
+          <li>initial value is '.98'</li>
+          <li>setState to '0.98'</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          the input value should be '0.98'.
+        </TestCase.ExpectedResult>
+        <NumberInputDecimal />
+      </TestCase>
+
+      <TestCase
+        title="Trailing zeroes"
+        description="Extraneous zeroes should be retained when changing the value via setState">
+        <TestCase.Steps>
+          <li>Change the text to 4.0000</li>
+          <li>Click "Reset to 3.0000"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read 3.0000, not 3
+        </TestCase.ExpectedResult>
+
+        <NumberInputExtraZeroes />
+
+        <p className="footnote">
+          <b>Notes:</b> Firefox drops extraneous zeroes when assigned. Zeroes
+          are preserved when editing, however directly assigning a new value
+          will drop zeroes. This{' '}
+          <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">
+            is a bug in Firefox
+          </a>{' '}
+          that we can not control for.
+        </p>
+      </TestCase>
+    </FixtureSet>
+  );
+}
+
+export default NumberInputs;
diff --git a/fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js b/fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
new file mode 100644
index 00000000000..4cecf69b910
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
@@ -0,0 +1,39 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class PasswordTestCase extends React.Component {
+  state = {value: ''};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="password"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="password" defaultValue="" />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default PasswordTestCase;
diff --git a/fixtures/dom/src/components/fixtures/password-inputs/index.js b/fixtures/dom/src/components/fixtures/password-inputs/index.js
new file mode 100644
index 00000000000..b5981933333
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/password-inputs/index.js
@@ -0,0 +1,31 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import PasswordTestCase from './PasswordTestCase';
+
+const React = window.React;
+
+function NumberInputs() {
+  return (
+    <FixtureSet title="Password inputs">
+      <TestCase
+        title="The show password icon"
+        description={`
+          Some browsers have an unmask password icon that React accidentally
+          prevents the display of.
+        `}
+        affectedBrowsers="IE Edge, IE 11">
+        <TestCase.Steps>
+          <li>Type any string (not an actual password)</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should include the "unmasking password" icon.
+        </TestCase.ExpectedResult>
+
+        <PasswordTestCase />
+      </TestCase>
+    </FixtureSet>
+  );
+}
+
+export default NumberInputs;
diff --git a/fixtures/dom/src/components/fixtures/pointer-events/drag-box.js b/fixtures/dom/src/components/fixtures/pointer-events/drag-box.js
new file mode 100644
index 00000000000..0bbc894ccc0
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/pointer-events/drag-box.js
@@ -0,0 +1,90 @@
+const React = window.React;
+
+const CIRCLE_SIZE = 80;
+
+class DragBox extends React.Component {
+  state = {
+    hasCapture: false,
+    circleLeft: 80,
+    circleTop: 80,
+  };
+  isDragging = false;
+  previousLeft = 0;
+  previousTop = 0;
+
+  onDown = event => {
+    this.isDragging = true;
+    event.target.setPointerCapture(event.pointerId);
+
+    // We store the initial coordinates to be able to calculate the changes
+    // later on.
+    this.extractPositionDelta(event);
+  };
+
+  onMove = event => {
+    if (!this.isDragging) {
+      return;
+    }
+    const {left, top} = this.extractPositionDelta(event);
+
+    this.setState(({circleLeft, circleTop}) => ({
+      circleLeft: circleLeft + left,
+      circleTop: circleTop + top,
+    }));
+  };
+
+  onUp = event => (this.isDragging = false);
+  onGotCapture = event => this.setState({hasCapture: true});
+  onLostCapture = event => this.setState({hasCapture: false});
+
+  extractPositionDelta = event => {
+    const left = event.pageX;
+    const top = event.pageY;
+    const delta = {
+      left: left - this.previousLeft,
+      top: top - this.previousTop,
+    };
+    this.previousLeft = left;
+    this.previousTop = top;
+    return delta;
+  };
+
+  render() {
+    const {hasCapture, circleLeft, circleTop} = this.state;
+
+    const boxStyle = {
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+      minHeight: 400,
+      width: '100%',
+      position: 'relative',
+    };
+
+    const circleStyle = {
+      width: CIRCLE_SIZE,
+      height: CIRCLE_SIZE,
+      borderRadius: CIRCLE_SIZE / 2,
+      position: 'absolute',
+      left: circleLeft,
+      top: circleTop,
+      backgroundColor: hasCapture ? 'blue' : 'green',
+      touchAction: 'none',
+    };
+
+    return (
+      <div style={boxStyle}>
+        <div
+          style={circleStyle}
+          onPointerDown={this.onDown}
+          onPointerMove={this.onMove}
+          onPointerUp={this.onUp}
+          onPointerCancel={this.onUp}
+          onGotPointerCapture={this.onGotCapture}
+          onLostPointerCapture={this.onLostCapture}
+        />
+      </div>
+    );
+  }
+}
+
+export default DragBox;
diff --git a/fixtures/dom/src/components/fixtures/pointer-events/drag.js b/fixtures/dom/src/components/fixtures/pointer-events/drag.js
new file mode 100644
index 00000000000..3c829cc657c
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/pointer-events/drag.js
@@ -0,0 +1,25 @@
+import TestCase from '../../TestCase';
+import DragBox from './drag-box';
+
+const React = window.React;
+
+class Drag extends React.Component {
+  render() {
+    return (
+      <TestCase title="Drag" description="">
+        <TestCase.Steps>
+          <li>Drag the circle below with any pointer tool</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          While dragging, the circle must have turn blue to indicate that a
+          pointer capture was received.
+        </TestCase.ExpectedResult>
+
+        <DragBox />
+      </TestCase>
+    );
+  }
+}
+
+export default Drag;
diff --git a/fixtures/dom/src/components/fixtures/pointer-events/hover-box.js b/fixtures/dom/src/components/fixtures/pointer-events/hover-box.js
new file mode 100644
index 00000000000..4fa4a07e65b
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/pointer-events/hover-box.js
@@ -0,0 +1,34 @@
+const React = window.React;
+
+class DrawBox extends React.Component {
+  render() {
+    const boxStyle = {
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+      padding: '20px 20px',
+      touchAction: 'none',
+    };
+
+    const obstacleStyle = {
+      border: '1px solid #d9d9d9',
+      width: '25%',
+      height: '200px',
+      margin: '12.5%',
+      display: 'inline-block',
+    };
+
+    return (
+      <div
+        style={boxStyle}
+        onPointerOver={this.props.onOver}
+        onPointerOut={this.props.onOut}
+        onPointerEnter={this.props.onEnter}
+        onPointerLeave={this.props.onLeave}>
+        <div style={obstacleStyle} />
+        <div style={obstacleStyle} />
+      </div>
+    );
+  }
+}
+
+export default DrawBox;
diff --git a/fixtures/dom/src/components/fixtures/pointer-events/hover.js b/fixtures/dom/src/components/fixtures/pointer-events/hover.js
new file mode 100644
index 00000000000..f64eff82e35
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/pointer-events/hover.js
@@ -0,0 +1,51 @@
+import TestCase from '../../TestCase';
+import HoverBox from './hover-box';
+
+const React = window.React;
+
+class Hover extends React.Component {
+  state = {
+    overs: 0,
+    outs: 0,
+    enters: 0,
+    leaves: 0,
+  };
+
+  onOver = () => this.setState({overs: this.state.overs + 1});
+  onOut = () => this.setState({outs: this.state.outs + 1});
+  onEnter = () => this.setState({enters: this.state.enters + 1});
+  onLeave = () => this.setState({leaves: this.state.leaves + 1});
+
+  render() {
+    const {overs, outs, enters, leaves} = this.state;
+
+    return (
+      <TestCase title="Hover" description="">
+        <TestCase.Steps>
+          <li>Hover over the above box and the obstacles</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Overs and outs should increase when moving over the obstacles but
+          enters and leaves should not.
+        </TestCase.ExpectedResult>
+
+        <HoverBox
+          onOver={this.onOver}
+          onOut={this.onOut}
+          onEnter={this.onEnter}
+          onLeave={this.onLeave}
+        />
+
+        <p>
+          Pointer Overs: <b>{overs}</b> <br />
+          Pointer Outs: <b>{outs}</b> <br />
+          Pointer Enters: <b>{enters}</b> <br />
+          Pointer Leaves: <b>{leaves}</b> <br />
+        </p>
+      </TestCase>
+    );
+  }
+}
+
+export default Hover;
diff --git a/fixtures/dom/src/components/fixtures/pointer-events/index.js b/fixtures/dom/src/components/fixtures/pointer-events/index.js
new file mode 100644
index 00000000000..cad6cdfef16
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/pointer-events/index.js
@@ -0,0 +1,20 @@
+import FixtureSet from '../../FixtureSet';
+import Drag from './drag';
+import Hover from './hover';
+
+const React = window.React;
+
+class PointerEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Pointer Events"
+        description="Pointer Events are not supported in every browser. The examples below might not work in every browser. To test pointer events, make sure to use Google Chrome, Firefox, Internet Explorer, or Edge.">
+        <Drag />
+        <Hover />
+      </FixtureSet>
+    );
+  }
+}
+
+export default PointerEvents;
diff --git a/fixtures/dom/src/components/fixtures/progress/index.js b/fixtures/dom/src/components/fixtures/progress/index.js
new file mode 100644
index 00000000000..b0cd243ad00
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/progress/index.js
@@ -0,0 +1,87 @@
+import Fixture from '../../Fixture';
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+class ProgressFixture extends React.Component {
+  state = {value: 0, max: 1, enabled: false, backwards: false};
+
+  startTest = () => {
+    this.setState({enabled: true}, () => {
+      this.progressIntervalId = setInterval(() => {
+        if (this.state.backwards) {
+          if (this.state.value > 0) {
+            this.setState({value: this.state.value - this.state.max / 100});
+          } else {
+            if (this.state.max === 10000) {
+              this.resetTest();
+            } else {
+              this.setState({max: this.state.max * 100, backwards: false});
+            }
+          }
+        } else {
+          if (this.state.value < this.state.max) {
+            this.setState({value: this.state.value + this.state.max / 100});
+          } else {
+            this.setState({backwards: true});
+          }
+        }
+      }, 10);
+    });
+  };
+
+  resetTest = () => {
+    clearInterval(this.progressIntervalId);
+    this.setState({value: 0, max: 1, enabled: false, backwards: false});
+  };
+
+  render() {
+    return (
+      <FixtureSet title="Progress">
+        <TestCase title="Fill and reset progress bar">
+          <TestCase.Steps>
+            <li>Press enable button</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            When enabled, bar value should increase from 0% to 100% and
+            backwards during three step loop: 0-1, 0-100, 0-10000. Reset button
+            stops loop, sets value to 0 and max to 1.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <div className="control-box">
+              <fieldset>
+                <legend>Controlled</legend>
+                <progress
+                  value={this.state.value}
+                  max={this.state.max}></progress>
+                <button
+                  onClick={
+                    this.state.enabled ? this.resetTest : this.startTest
+                  }>
+                  {this.state.enabled ? 'Reset' : 'Enable'}
+                </button>
+                <br />
+                <span className="hint">
+                  {' '}
+                  max: {JSON.stringify(this.state.max)}
+                </span>
+                <span className="hint">
+                  {' '}
+                  value:{' '}
+                  {JSON.stringify(
+                    Math.round((this.state.value + Number.EPSILON) * 100) / 100
+                  )}
+                </span>
+              </fieldset>
+            </div>
+          </Fixture>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export default ProgressFixture;
diff --git a/fixtures/dom/src/components/fixtures/range-inputs/index.js b/fixtures/dom/src/components/fixtures/range-inputs/index.js
new file mode 100644
index 00000000000..c19806555ce
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/range-inputs/index.js
@@ -0,0 +1,36 @@
+import FixtureSet from '../../FixtureSet';
+
+const React = window.React;
+
+class RangeInputs extends React.Component {
+  state = {value: 0.5};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <FixtureSet
+        title="Range Inputs"
+        description="Note: Range inputs are not supported in IE9.">
+        <form>
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="range"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">Value: {this.state.value}</span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="range" defaultValue={0.5} />
+          </fieldset>
+        </form>
+      </FixtureSet>
+    );
+  }
+}
+
+export default RangeInputs;
diff --git a/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
new file mode 100644
index 00000000000..beafd4e4532
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
@@ -0,0 +1,50 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+
+class OnSelectIframe extends React.Component {
+  state = {count: 0, value: 'Select Me!'};
+
+  _onSelect = event => {
+    this.setState(({count}) => ({count: count + 1}));
+  };
+
+  _onChange = event => {
+    this.setState({value: event.target.value});
+  };
+
+  render() {
+    const {count, value} = this.state;
+    return (
+      <Iframe height={60}>
+        Selection Event Count: {count}
+        <input
+          type="text"
+          onSelect={this._onSelect}
+          value={value}
+          onChange={this._onChange}
+        />
+      </Iframe>
+    );
+  }
+}
+
+export default class OnSelectEventTestCase extends React.Component {
+  render() {
+    return (
+      <TestCase
+        title="onSelect events within iframes"
+        description="onSelect events should fire for elements rendered inside iframes">
+        <TestCase.Steps>
+          <li>Highlight some of the text in the input below</li>
+          <li>Move the cursor around using the arrow keys</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The displayed count should increase as you highlight or move the
+          cursor
+        </TestCase.ExpectedResult>
+        <OnSelectIframe />
+      </TestCase>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
new file mode 100644
index 00000000000..124c94b0eb8
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
@@ -0,0 +1,44 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+
+export default class ReorderedInputsTestCase extends React.Component {
+  state = {count: 0};
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState({count: this.state.count + 1});
+    }, 2000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  renderInputs() {
+    const inputs = [
+      <input key={1} defaultValue="Foo" />,
+      <input key={2} defaultValue="Bar" />,
+    ];
+    if (this.state.count % 2 === 0) {
+      inputs.reverse();
+    }
+    return inputs;
+  }
+
+  render() {
+    return (
+      <TestCase title="Reordered input elements in iframes" description="">
+        <TestCase.Steps>
+          <li>The two inputs below swap positions every two seconds</li>
+          <li>Select the text in either of them</li>
+          <li>Wait for the swap to occur</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The selection you made should be maintained
+        </TestCase.ExpectedResult>
+        <Iframe height={50}>{this.renderInputs()}</Iframe>
+      </TestCase>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/selection-events/index.js b/fixtures/dom/src/components/fixtures/selection-events/index.js
new file mode 100644
index 00000000000..10b33c290e6
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/index.js
@@ -0,0 +1,19 @@
+import FixtureSet from '../../FixtureSet';
+import ReorderedInputsTestCase from './ReorderedInputsTestCase';
+import OnSelectEventTestCase from './OnSelectEventTestCase';
+const React = window.React;
+
+export default function SelectionEvents() {
+  return (
+    <FixtureSet
+      title="Selection Restoration"
+      description="
+      When React commits changes it may perform operations which cause existing
+      selection state to be lost. This is manually managed by reading the
+      selection state before commits and then restoring it afterwards.
+      ">
+      <ReorderedInputsTestCase />
+      <OnSelectEventTestCase />
+    </FixtureSet>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/selects/index.js b/fixtures/dom/src/components/fixtures/selects/index.js
new file mode 100644
index 00000000000..9356a3770ac
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selects/index.js
@@ -0,0 +1,238 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class SelectFixture extends React.Component {
+  state = {value: ''};
+  _nestedDOMNode = null;
+  _singleFormDOMNode = null;
+  _multipleFormDOMNode = null;
+
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+
+  resetSingleOptionForm = event => {
+    event.preventDefault();
+    this._singleFormDOMNode.reset();
+  };
+
+  resetMultipleOptionForm = event => {
+    event.preventDefault();
+    this._multipleFormDOMNode.reset();
+  };
+
+  componentDidMount() {
+    this._renderNestedSelect();
+  }
+
+  componentDidUpdate() {
+    this._renderNestedSelect();
+  }
+
+  _renderNestedSelect() {
+    ReactDOM.render(
+      <select value={this.state.value} onChange={this.onChange}>
+        <option value="">Select a color</option>
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+        <option value="green">Green</option>
+      </select>,
+      this._nestedDOMNode
+    );
+  }
+
+  render() {
+    return (
+      <FixtureSet title="Selects">
+        <form className="field-group">
+          <fieldset>
+            <legend>Controlled</legend>
+            <select value={this.state.value} onChange={this.onChange}>
+              <option value="">Select a color</option>
+              <option value="red">Red</option>
+              <option value="blue">Blue</option>
+              <option value="green">Green</option>
+            </select>
+            <span className="hint">Value: {this.state.value}</span>
+          </fieldset>
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <select defaultValue="">
+              <option value="">Select a color</option>
+              <option value="red">Red</option>
+              <option value="blue">Blue</option>
+              <option value="green">Green</option>
+            </select>
+          </fieldset>
+          <fieldset>
+            <legend>Controlled in nested subtree</legend>
+            <div ref={node => (this._nestedDOMNode = node)} />
+            <span className="hint">
+              This should synchronize in both direction with the "Controlled".
+            </span>
+          </fieldset>
+        </form>
+
+        <TestCase title="A selected disabled option" relatedIssues="2803">
+          <TestCase.Steps>
+            <li>Open the select</li>
+            <li>Select "1"</li>
+            <li>Attempt to reselect "Please select an item"</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The initial picked option should be "Please select an item", however
+            it should not be a selectable option.
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select defaultValue="">
+              <option value="" disabled>
+                Please select an item
+              </option>
+              <option>0</option>
+              <option>1</option>
+              <option>2</option>
+            </select>
+          </div>
+        </TestCase>
+
+        <TestCase title="An unselected disabled option" relatedIssues="2803">
+          <TestCase.ExpectedResult>
+            The initial picked option value should "0": the first non-disabled
+            option.
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select defaultValue="">
+              <option disabled>Please select an item</option>
+              <option>0</option>
+              <option>1</option>
+              <option>2</option>
+            </select>
+          </div>
+        </TestCase>
+
+        <TestCase title="A single select being reset">
+          <TestCase.Steps>
+            <li>Open the select</li>
+            <li>Select "baz" or "foo"</li>
+            <li>Click the "Reset" button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The select should be reset to the initial value, "bar"
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form ref={n => (this._singleFormDOMNode = n)}>
+              <select defaultValue="bar">
+                <option value="foo">foo</option>
+                <option value="bar">bar</option>
+                <option value="baz">baz</option>
+              </select>
+              <button onClick={this.resetSingleOptionForm}>Reset</button>
+            </form>
+          </div>
+        </TestCase>
+
+        <TestCase title="A multiple select being reset">
+          <TestCase.Steps>
+            <li>Select any combination of options</li>
+            <li>Click the "Reset" button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The select should be reset to the initial values "foo" and "baz"
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form ref={n => (this._multipleFormDOMNode = n)}>
+              <select multiple defaultValue={['foo', 'baz']}>
+                <option value="foo">foo</option>
+                <option value="bar">bar</option>
+                <option value="baz">baz</option>
+              </select>
+              <button onClick={this.resetMultipleOptionForm}>Reset</button>
+            </form>
+          </div>
+        </TestCase>
+
+        <TestCase title="A multiple select being scrolled to first selected option">
+          <TestCase.ExpectedResult>
+            First selected option should be visible
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form>
+              <select multiple defaultValue={['tiger']}>
+                <option value="gorilla">gorilla</option>
+                <option value="giraffe">giraffe</option>
+                <option value="monkey">monkey</option>
+                <option value="lion">lion</option>
+                <option value="mongoose">mongoose</option>
+                <option value="tiger">tiger</option>
+              </select>
+            </form>
+          </div>
+        </TestCase>
+
+        <TestCase
+          title="An option which contains conditional render fails"
+          relatedIssues="11911">
+          <TestCase.Steps>
+            <li>Select any option</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Option should be set
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select value={this.state.value} onChange={this.onChange}>
+              <option value="red">
+                red {this.state.value === 'red' && 'is chosen '} TextNode
+              </option>
+              <option value="blue">
+                blue {this.state.value === 'blue' && 'is chosen '} TextNode
+              </option>
+              <option value="green">
+                green {this.state.value === 'green' && 'is chosen '} TextNode
+              </option>
+            </select>
+          </div>
+        </TestCase>
+
+        <TestCase
+          title="A select with the size attribute should not set first option as selected"
+          relatedIssues="14239"
+          introducedIn="16.0.0">
+          <TestCase.ExpectedResult>
+            No options should be selected.
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select size="3">
+              <option>0</option>
+              <option>1</option>
+              <option>2</option>
+            </select>
+          </div>
+
+          <p className="footnote">
+            <b>Notes:</b> This happens if <code>size</code> is assigned after
+            options are selected. The select element picks the first item by
+            default, then it is expanded to show more options when{' '}
+            <code>size</code> is assigned, preserving the default selection.
+          </p>
+          <p className="footnote">
+            This was introduced in React 16.0.0 when options were added before
+            select attribute assignment.
+          </p>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export default SelectFixture;
diff --git a/fixtures/dom/src/components/fixtures/suspense/index.js b/fixtures/dom/src/components/fixtures/suspense/index.js
new file mode 100644
index 00000000000..552f9ba23ad
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/suspense/index.js
@@ -0,0 +1,323 @@
+import Fixture from '../../Fixture';
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+const Suspense = React.Suspense;
+
+let cache = new Set();
+
+function AsyncStep({text, ms}) {
+  if (!cache.has(text)) {
+    throw new Promise(resolve =>
+      setTimeout(() => {
+        cache.add(text);
+        resolve();
+      }, ms)
+    );
+  }
+  return null;
+}
+
+let suspendyTreeIdCounter = 0;
+class SuspendyTreeChild extends React.Component {
+  id = suspendyTreeIdCounter++;
+  state = {
+    step: 1,
+    isHidden: false,
+  };
+  increment = () => this.setState(s => ({step: s.step + 1}));
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown = event => {
+    if (event.metaKey && event.key === 'Enter') {
+      this.increment();
+    }
+  };
+
+  render() {
+    return (
+      <>
+        <Suspense fallback={<div>(display: none)</div>}>
+          <div>
+            <AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
+            {this.props.children}
+          </div>
+        </Suspense>
+        <button onClick={this.increment}>Hide</button>
+      </>
+    );
+  }
+}
+
+class SuspendyTree extends React.Component {
+  parentContainer = React.createRef(null);
+  container = React.createRef(null);
+  componentDidMount() {
+    this.setState({});
+    document.addEventListener('keydown', this.onKeydown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+  onKeydown = event => {
+    if (event.metaKey && event.key === '/') {
+      this.removeAndRestore();
+    }
+  };
+  removeAndRestore = () => {
+    const parentContainer = this.parentContainer.current;
+    const container = this.container.current;
+    parentContainer.removeChild(container);
+    parentContainer.textContent = '(removed from DOM)';
+    setTimeout(() => {
+      parentContainer.textContent = '';
+      parentContainer.appendChild(container);
+    }, 500);
+  };
+  render() {
+    return (
+      <>
+        <div ref={this.parentContainer}>
+          <div ref={this.container} />
+        </div>
+        <div>
+          {this.container.current !== null
+            ? ReactDOM.createPortal(
+                <>
+                  <SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
+                  <button onClick={this.removeAndRestore}>Remove</button>
+                </>,
+                this.container.current
+              )
+            : null}
+        </div>
+      </>
+    );
+  }
+}
+
+class TextInputFixtures extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Suspense"
+        description="Preserving the state of timed-out children">
+        <p>
+          Clicking "Hide" will hide the fixture context using{' '}
+          <code>display: none</code> for 0.5 seconds, then restore. This is the
+          built-in behavior for timed-out children. Each fixture tests whether
+          the state of the DOM is preserved. Clicking "Remove" will remove the
+          fixture content from the DOM for 0.5 seconds, then restore. This is{' '}
+          <strong>not</strong> how timed-out children are hidden, but is
+          included for comparison purposes.
+        </p>
+        <div className="footnote">
+          As a shortcut, you can use Command + Enter (or Control + Enter on
+          Windows, Linux) to "Hide" all the fixtures, or Command + / to "Remove"
+          them.
+        </div>
+        <TestCase title="Text selection where entire range times out">
+          <TestCase.Steps>
+            <li>Use your cursor to select the text below.</li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            Text selection is preserved when hiding, but not when removing.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              Select this entire sentence (and only this sentence).
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Text selection that extends outside timed-out subtree">
+          <TestCase.Steps>
+            <li>
+              Use your cursor to select a range that includes both the text and
+              the "Go" button.
+            </li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            Text selection is preserved when hiding, but not when removing.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              Select a range that includes both this sentence and the "Go"
+              button.
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Focus">
+          <TestCase.Steps>
+            <li>
+              Use your cursor to select a range that includes both the text and
+              the "Go" button.
+            </li>
+            <li>
+              Instead of clicking "Go", which switches focus, press Command +
+              Enter (or Control + Enter on Windows, Linux).
+            </li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The ideal behavior is that the focus would not be lost, but
+            currently it is (both when hiding and removing).
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              <button>Focus me</button>
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Uncontrolled form input">
+          <TestCase.Steps>
+            <li>Type something ("Hello") into the text input.</li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            Input is preserved when hiding, but not when removing.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              <input type="text" />
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Image flicker">
+          <TestCase.Steps>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The image should reappear without flickering. The text should not
+            reflow.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Atom.png" />
+              React is cool
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Iframe">
+          <TestCase.Steps>
+            <li>
+              The iframe shows a nested version of this fixtures app. Navigate
+              to the "Text inputs" page.
+            </li>
+            <li>Select one of the checkboxes.</li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            When removing, the iframe is reloaded. When hiding, the iframe
+            should still be on the "Text inputs" page. The checkbox should still
+            be checked. (Unfortunately, scroll position is lost.)
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              <iframe width="500" height="300" src="/" />
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Video playback">
+          <TestCase.Steps>
+            <li>Start playing the video, or seek to a specific position.</li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The playback position should stay the same. When hiding, the video
+            plays in the background for the entire duration. When removing, the
+            video stops playing, but the position is not lost.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <SuspendyTree>
+              <video controls>
+                <source
+                  src="http://techslides.com/demos/sample-videos/small.webm"
+                  type="video/webm"
+                />
+                <source
+                  src="http://techslides.com/demos/sample-videos/small.ogv"
+                  type="video/ogg"
+                />
+                <source
+                  src="http://techslides.com/demos/sample-videos/small.mp4"
+                  type="video/mp4"
+                />
+                <source
+                  src="http://techslides.com/demos/sample-videos/small.3gp"
+                  type="video/3gp"
+                />
+              </video>
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Audio playback">
+          <TestCase.Steps>
+            <li>Start playing the audio, or seek to a specific position.</li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The playback position should stay the same. When hiding, the audio
+            plays in the background for the entire duration. When removing, the
+            audio stops playing, but the position is not lost.
+          </TestCase.ExpectedResult>
+          <Fixture>
+            <SuspendyTree>
+              <audio controls={true}>
+                <source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Mozart_K448.ogg" />
+              </audio>
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+        <TestCase title="Scroll position">
+          <TestCase.Steps>
+            <li>Scroll to a position in the list.</li>
+            <li>Click "Hide" or "Remove".</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            Scroll position is preserved when hiding, but not when removing.
+          </TestCase.ExpectedResult>
+          <Fixture>
+            <SuspendyTree>
+              <div style={{height: 200, overflow: 'scroll'}}>
+                {Array(20)
+                  .fill()
+                  .map((_, i) => (
+                    <h2 key={i}>{i + 1}</h2>
+                  ))}
+              </div>
+            </SuspendyTree>
+          </Fixture>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export default TextInputFixtures;
diff --git a/fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js b/fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js
new file mode 100644
index 00000000000..91ae2ff0d8e
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js
@@ -0,0 +1,59 @@
+import Fixture from '../../Fixture';
+const React = window.React;
+
+class InputTestCase extends React.Component {
+  static defaultProps = {
+    type: 'text',
+    defaultValue: '',
+    parseAs: 'text',
+  };
+
+  constructor() {
+    super(...arguments);
+
+    this.state = {
+      value: this.props.defaultValue,
+    };
+  }
+
+  onChange = event => {
+    const raw = event.target.value;
+
+    switch (this.props.type) {
+      case 'number':
+        const parsed = parseFloat(event.target.value, 10);
+
+        this.setState({value: isNaN(parsed) ? '' : parsed});
+
+        break;
+      default:
+        this.setState({value: raw});
+    }
+  };
+
+  render() {
+    const {children, type, defaultValue} = this.props;
+    const {value} = this.state;
+
+    return (
+      <Fixture>
+        <div>{children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled {type}</legend>
+            <input type={type} value={value} onChange={this.onChange} />
+            <p className="hint">Value: {JSON.stringify(this.state.value)}</p>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled {type}</legend>
+            <input type={type} defaultValue={defaultValue} />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default InputTestCase;
diff --git a/fixtures/dom/src/components/fixtures/text-inputs/README.md b/fixtures/dom/src/components/fixtures/text-inputs/README.md
new file mode 100644
index 00000000000..110a2fd1114
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/text-inputs/README.md
@@ -0,0 +1,65 @@
+# Text Inputs
+
+There are a couple of important concepts to be aware of when working on text
+inputs in React.
+
+## `defaultValue` vs `value`
+
+An input's value is drawn from two properties: `defaultValue` and `value`.
+
+The `defaultValue` property directly maps to the value _attribute_, for example:
+
+```javascript
+var input = document.createElement('input')
+input.defaultValue = 'hello'
+
+console.log(input.getAttribute('value')) // => "hello"
+```
+
+The `value` property manipulates the _working value_ for the input. This property
+changes whenever the user interacts with an input, or it is modified with JavaScript:
+
+```javascript
+var input = document.createElement('input')
+input.defaultValue = 'hello'
+input.value = 'goodbye'
+
+console.log(input.getAttribute('value')) // => "hello"
+console.log(input.value) // => "goodbye"
+```
+
+## value detachment
+
+Until `value` is manipulated by a user or JavaScript, manipulating `defaultValue`
+will also modify the `value` property:
+
+```javascript
+var input = document.createElement('input')
+// This will turn into 3
+input.defaultValue = 3
+// This will turn into 5
+input.defaultValue = 5
+// This will turn into 7
+input.value = 7
+// This will do nothing
+input.defaultValue = 1
+```
+
+**React detaches all inputs**. This prevents `value` from accidentally updating if
+`defaultValue` changes.
+
+## Form reset events
+
+React does not support `form.reset()` for controlled inputs. This is a feature,
+not a bug. `form.reset()` works by reverting an input's `value` _property_ to
+that of the current `defaultValue`. Since React assigns the value `attribute`
+every time a controlled input's value changes, controlled inputs will never
+"revert" back to their original display value.
+
+## Number inputs
+
+Chrome (55) and Safari (10) attempt to "correct" the value of number inputs any
+time the value property or attribute are changed. This leads to some edge documented
+here:
+
+https://github.com/facebook/react/pull/7359#issuecomment-256499693
diff --git a/fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js b/fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js
new file mode 100644
index 00000000000..264be16085a
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js
@@ -0,0 +1,40 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class ReplaceEmailInput extends React.Component {
+  state = {
+    formSubmitted: false,
+  };
+
+  onReset = () => {
+    this.setState({formSubmitted: false});
+  };
+
+  onSubmit = event => {
+    event.preventDefault();
+    this.setState({formSubmitted: true});
+  };
+
+  render() {
+    return (
+      <Fixture>
+        <form className="control-box" onSubmit={this.onSubmit}>
+          <fieldset>
+            <legend>Email</legend>
+            {!this.state.formSubmitted ? (
+              <input type="email" />
+            ) : (
+              <input type="text" disabled={true} />
+            )}
+          </fieldset>
+        </form>
+        <button type="button" onClick={this.onReset}>
+          Reset
+        </button>
+      </Fixture>
+    );
+  }
+}
+
+export default ReplaceEmailInput;
diff --git a/fixtures/dom/src/components/fixtures/text-inputs/index.js b/fixtures/dom/src/components/fixtures/text-inputs/index.js
new file mode 100644
index 00000000000..54026257fd9
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/text-inputs/index.js
@@ -0,0 +1,167 @@
+import Fixture from '../../Fixture';
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import InputTestCase from './InputTestCase';
+import ReplaceEmailInput from './ReplaceEmailInput';
+
+const React = window.React;
+
+class TextInputFixtures extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Inputs"
+        description="Common behavior across controlled and uncontrolled inputs">
+        <TestCase title="Numbers in a controlled text field with no handler">
+          <TestCase.Steps>
+            <li>Move the cursor to after "2" in the text field</li>
+            <li>Type ".2" into the text input</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The text field's value should not update.
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <div className="control-box">
+              <fieldset>
+                <legend>Value as number</legend>
+                <input value={2} onChange={() => {}} />
+              </fieldset>
+
+              <fieldset>
+                <legend>Value as string</legend>
+                <input value={'2'} onChange={() => {}} />
+              </fieldset>
+            </div>
+          </Fixture>
+
+          <p className="footnote">
+            This issue was first introduced when we added extra logic to number
+            inputs to prevent unexpected behavior in Chrome and Safari (see the
+            number input test case).
+          </p>
+        </TestCase>
+
+        <TestCase
+          title="Required Inputs"
+          affectedBrowsers="Firefox"
+          relatedIssues="8395">
+          <TestCase.Steps>
+            <li>View this test in Firefox</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            You should{' '}
+            <b>
+              <i>not</i>
+            </b>{' '}
+            see a red aura, indicating the input is invalid.
+            <br />
+            This aura looks roughly like:
+            <input style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <form className="control-box">
+              <fieldset>
+                <legend>Empty value prop string</legend>
+                <input value="" required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>No value prop</legend>
+                <input required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>Empty defaultValue prop string</legend>
+                <input required={true} defaultValue="" />
+              </fieldset>
+              <fieldset>
+                <legend>No value prop date input</legend>
+                <input type="date" required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>Empty value prop date input</legend>
+                <input type="date" value="" required={true} />
+              </fieldset>
+            </form>
+          </Fixture>
+
+          <p className="footnote">
+            Checking the date type is also important because of a prior fix for
+            iOS Safari that involved assigning over value/defaultValue
+            properties of the input to prevent a display bug. This also triggers
+            input validation.
+          </p>
+          <p className="footnote">
+            The date inputs should be blank in iOS. This is not a bug.
+          </p>
+        </TestCase>
+
+        <TestCase title="Cursor when editing email inputs">
+          <TestCase.Steps>
+            <li>Type "user@example.com"</li>
+            <li>Select "@"</li>
+            <li>Type ".", to replace "@" with a period</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The text field's cursor should not jump to the end.
+          </TestCase.ExpectedResult>
+
+          <InputTestCase type="email" defaultValue="" />
+        </TestCase>
+
+        <TestCase title="Cursor when editing url inputs">
+          <TestCase.Steps>
+            <li>Type "http://www.example.com"</li>
+            <li>Select "www."</li>
+            <li>Press backspace/delete</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The text field's cursor should not jump to the end.
+          </TestCase.ExpectedResult>
+
+          <InputTestCase type="url" defaultValue="" />
+        </TestCase>
+
+        <TestCase
+          title="Replacing email input with text disabled input"
+          relatedIssues="12062">
+          <TestCase.Steps>
+            <li>Type "test@test.com"</li>
+            <li>Press enter</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            There should be no selection-related error in the console.
+          </TestCase.ExpectedResult>
+
+          <ReplaceEmailInput />
+        </TestCase>
+
+        <TestCase title="All inputs" description="General test of all inputs">
+          <InputTestCase type="text" defaultValue="Text" />
+          <InputTestCase type="email" defaultValue="user@example.com" />
+          <InputTestCase type="number" defaultValue={0} />
+          <InputTestCase type="url" defaultValue="http://example.com" />
+          <InputTestCase type="tel" defaultValue="555-555-5555" />
+          <InputTestCase type="color" defaultValue="#ff0000" />
+          <InputTestCase type="date" defaultValue="2017-01-01" />
+          <InputTestCase
+            type="datetime-local"
+            defaultValue="2017-01-01T01:00"
+          />
+          <InputTestCase type="time" defaultValue="01:00" />
+          <InputTestCase type="month" defaultValue="2017-01" />
+          <InputTestCase type="week" defaultValue="2017-W01" />
+          <InputTestCase type="range" defaultValue={0.5} />
+          <InputTestCase type="password" defaultValue="" />
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export default TextInputFixtures;
diff --git a/fixtures/dom/src/components/fixtures/textareas/index.js b/fixtures/dom/src/components/fixtures/textareas/index.js
new file mode 100644
index 00000000000..9c3f14f85de
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/textareas/index.js
@@ -0,0 +1,84 @@
+import Fixture from '../../Fixture';
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+export default class TextAreaFixtures extends React.Component {
+  state = {value: ''};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <FixtureSet title="Textareas">
+        <TestCase
+          title="Kitchen Sink"
+          description="Verify that the controlled textarea displays its value under 'Controlled Output', and that both textareas can be typed in">
+          <div>
+            <form className="container">
+              <fieldset>
+                <legend>Controlled</legend>
+                <textarea value={this.state.value} onChange={this.onChange} />
+              </fieldset>
+              <fieldset>
+                <legend>Uncontrolled</legend>
+                <textarea defaultValue="" />
+              </fieldset>
+            </form>
+            <div className="container">
+              <h4>Controlled Output:</h4>
+              <div className="output">{this.state.value}</div>
+            </div>
+          </div>
+        </TestCase>
+        <TestCase title="Placeholders">
+          <TestCase.ExpectedResult>
+            The textarea should be rendered with the placeholder "Hello, world"
+          </TestCase.ExpectedResult>
+          <div style={{margin: '10px 0px'}}>
+            <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/components/propTypes.js b/fixtures/dom/src/components/propTypes.js
new file mode 100644
index 00000000000..6e4833f7352
--- /dev/null
+++ b/fixtures/dom/src/components/propTypes.js
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import semver from 'semver';
+
+export function semverString(props, propName, componentName) {
+  let version = props[propName];
+
+  let error = PropTypes.string(...arguments);
+  if (!error && version != null && !semver.valid(version))
+    error = new Error(
+      `\`${propName}\` should be a valid "semantic version" matching ` +
+        'an existing React version'
+    );
+
+  return error || null;
+}
diff --git a/fixtures/dom/src/find-dom-node.js b/fixtures/dom/src/find-dom-node.js
new file mode 100644
index 00000000000..8687af56220
--- /dev/null
+++ b/fixtures/dom/src/find-dom-node.js
@@ -0,0 +1,20 @@
+/**
+ * Provides a standard way to access a DOM node across all versions of
+ * React.
+ */
+
+import {reactPaths} from './react-loader';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+export function findDOMNode(target) {
+  const {needsReactDOM} = reactPaths();
+
+  if (needsReactDOM) {
+    return ReactDOM.findDOMNode(target);
+  } else {
+    // eslint-disable-next-line
+    return React.findDOMNode(target);
+  }
+}
diff --git a/fixtures/dom/src/index.js b/fixtures/dom/src/index.js
new file mode 100644
index 00000000000..a334311be0c
--- /dev/null
+++ b/fixtures/dom/src/index.js
@@ -0,0 +1,51 @@
+import './polyfills';
+import loadReact, {isLocal} from './react-loader';
+
+if (isLocal()) {
+  Promise.all([
+    import('react'),
+    import('react-dom'),
+    import('react-dom/client'),
+  ])
+    .then(([React, ReactDOM, ReactDOMClient]) => {
+      if (
+        React === undefined ||
+        ReactDOM === undefined ||
+        ReactDOMClient === undefined
+      ) {
+        throw new Error(
+          'Unable to load React. Build experimental and then run `yarn dev` again'
+        );
+      }
+      window.React = React;
+      window.ReactDOM = ReactDOM;
+      window.ReactDOMClient = ReactDOMClient;
+    })
+    .then(() => import('./components/App'))
+    .then(App => {
+      window.ReactDOMClient.createRoot(document.getElementById('root')).render(
+        window.React.createElement(App.default)
+      );
+    });
+} else {
+  loadReact()
+    .then(() => import('./components/App'))
+    .then(App => {
+      const {React, ReactDOM} = window;
+      if (
+        typeof window.ReactDOMClient !== 'undefined' &&
+        typeof window.ReactDOMClient.createRoot !== 'undefined'
+      ) {
+        // we are in a React that only supports modern roots
+
+        window.ReactDOMClient.createRoot(
+          document.getElementById('root')
+        ).render(React.createElement(App.default));
+      } else {
+        ReactDOM.render(
+          React.createElement(App.default),
+          document.getElementById('root')
+        );
+      }
+    });
+}
diff --git a/fixtures/dom/src/polyfills.js b/fixtures/dom/src/polyfills.js
new file mode 100644
index 00000000000..1bf276292b4
--- /dev/null
+++ b/fixtures/dom/src/polyfills.js
@@ -0,0 +1,36 @@
+import 'core-js/es6/symbol';
+import 'core-js/es6/promise';
+import 'core-js/es6/set';
+import 'core-js/es6/map';
+
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+// MIT license
+(function () {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame =
+      window[vendors[x] + 'CancelAnimationFrame'] ||
+      window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame)
+    window.requestAnimationFrame = function (callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function () {
+        callback(currTime + timeToCall);
+      }, timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function (id) {
+      clearTimeout(id);
+    };
+})();
diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
new file mode 100644
index 00000000000..e65f5749c0d
--- /dev/null
+++ b/fixtures/dom/src/react-loader.js
@@ -0,0 +1,182 @@
+import semver from 'semver';
+
+/**
+ * Take a version from the window query string and load a specific
+ * version of React.
+ *
+ * @example
+ * http://localhost:3000?version=15.4.1
+ * (Loads React 15.4.1)
+ */
+
+function parseQuery(qstr) {
+  var query = {};
+  var a = qstr.slice(1).split('&');
+
+  for (var i = 0; i < a.length; i++) {
+    var b = a[i].split('=');
+    query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
+  }
+  return query;
+}
+
+function loadScript(src) {
+  let firstScript = document.getElementsByTagName('script')[0];
+  let scriptNode;
+
+  return new Promise((resolve, reject) => {
+    scriptNode = document.createElement('script');
+    scriptNode.async = 1;
+    scriptNode.src = src;
+
+    scriptNode.onload = () => resolve();
+    scriptNode.onerror = () => reject(new Error(`failed to load: ${src}`));
+
+    firstScript.parentNode.insertBefore(scriptNode, firstScript);
+  });
+}
+
+function loadModules(SymbolSrcPairs) {
+  let firstScript = document.getElementsByTagName('script')[0];
+
+  let imports = '';
+  SymbolSrcPairs.map(([symbol, src]) => {
+    imports += `import ${symbol} from "${src}";\n`;
+    imports += `window.${symbol} = ${symbol};\n`;
+  });
+
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(
+      () => reject(new Error('Timed out loading react modules over esm')),
+      5000
+    );
+    window.__loaded = () => {
+      clearTimeout(timeout);
+      resolve();
+    };
+
+    const moduleScript = document.createElement('script');
+    moduleScript.type = 'module';
+    moduleScript.textContent = imports + 'window.__loaded();';
+
+    firstScript.parentNode.insertBefore(moduleScript, firstScript);
+  });
+}
+
+function getVersion() {
+  let query = parseQuery(window.location.search);
+  return query.version || 'local';
+}
+
+export function isLocal() {
+  return getVersion() === 'local';
+}
+
+export function reactPaths(version = getVersion()) {
+  let query = parseQuery(window.location.search);
+  let isProduction = query.production === 'true';
+  let environment = isProduction ? 'production.min' : 'development';
+  let reactPath = `react.${environment}.js`;
+  let reactDOMPath = `react-dom.${environment}.js`;
+  let reactDOMClientPath = `react-dom.${environment}.js`;
+  let reactDOMServerPath = `react-dom-server.browser.${environment}.js`;
+  let needsCreateElement = true;
+  let needsReactDOM = true;
+  let usingModules = false;
+
+  if (version !== 'local') {
+    const {major, minor, prerelease} = semver(version);
+    console.log('semver', semver(version));
+
+    if (major === 0) {
+      needsCreateElement = minor >= 12;
+      needsReactDOM = minor >= 14;
+    }
+
+    const [preReleaseStage] = prerelease;
+    // The file structure was updated in 16. This wasn't the case for alphas.
+    // Load the old module location for anything less than 16 RC
+    if (major >= 19) {
+      usingModules = true;
+      const devQuery = environment === 'development' ? '?dev' : '';
+      reactPath = 'https://esm.sh/react@' + version + '/' + devQuery;
+      reactDOMPath = 'https://esm.sh/react-dom@' + version + '/' + devQuery;
+      reactDOMClientPath =
+        'https://esm.sh/react-dom@' + version + '/client' + devQuery;
+      reactDOMServerPath =
+        'https://esm.sh/react-dom@' + version + '/server.browser' + devQuery;
+    } else if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
+      reactPath =
+        'https://unpkg.com/react@' +
+        version +
+        '/umd/react.' +
+        environment +
+        '.js';
+      reactDOMPath =
+        'https://unpkg.com/react-dom@' +
+        version +
+        '/umd/react-dom.' +
+        environment +
+        '.js';
+      reactDOMServerPath =
+        'https://unpkg.com/react-dom@' +
+        version +
+        '/umd/react-dom-server.browser' +
+        environment;
+    } else if (major > 0 || minor > 11) {
+      reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
+      reactDOMPath =
+        'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
+      reactDOMServerPath =
+        'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
+    } else {
+      reactPath =
+        'https://cdnjs.cloudflare.com/ajax/libs/react/' + version + '/react.js';
+    }
+  } else {
+    throw new Error(
+      'This fixture no longer works with local versions. Provide a version query parameter that matches a version published to npm to use the fixture.'
+    );
+  }
+
+  return {
+    reactPath,
+    reactDOMPath,
+    reactDOMClientPath,
+    reactDOMServerPath,
+    needsCreateElement,
+    needsReactDOM,
+    usingModules,
+  };
+}
+
+export default function loadReact() {
+  console.log('reactPaths', reactPaths());
+  const {
+    reactPath,
+    reactDOMPath,
+    reactDOMClientPath,
+    needsReactDOM,
+    usingModules,
+  } = reactPaths();
+
+  if (usingModules) {
+    return loadModules([
+      ['React', reactPath],
+      ['ReactDOM', reactDOMPath],
+      ['ReactDOMClient', reactDOMClientPath],
+    ]);
+  } else {
+    let request = loadScript(reactPath, usingModules);
+
+    if (needsReactDOM) {
+      request = request.then(() => loadScript(reactDOMPath, usingModules));
+    } else {
+      // Aliasing React to ReactDOM for compatibility.
+      request = request.then(() => {
+        window.ReactDOM = window.React;
+      });
+    }
+    return request;
+  }
+}
diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css
new file mode 100644
index 00000000000..e507014d682
--- /dev/null
+++ b/fixtures/dom/src/style.css
@@ -0,0 +1,374 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  font-size: 15px;
+  line-height: 24px;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  background: white;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  cursor: pointer;
+  font-size: 16px;
+  margin: 10px;
+  padding: 6px 8px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #171717;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 32px;
+  margin: 24px 0;
+}
+
+h2 {
+  font-size: 24px;
+  margin: 24px 0 16px;
+}
+
+h3 {
+  font-size: 18px;
+  margin: 8px 0 16px;
+}
+
+h4, h5, h6 {
+  font-size: 16px;
+  margin: 0 0 16px;
+}
+
+code {
+  font-size: 90%;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link:hover,
+a:link:focus {
+  text-decoration: underline;
+}
+
+textarea {
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
+  font-size: 12px;
+  min-height: 100px;
+  min-width: 300px;
+  padding: 8px;
+}
+
+.header {
+  background: #171717;
+  overflow: hidden;
+  padding: 8px;
+}
+
+.header a {
+  text-decoration: none;
+  color: white;
+}
+
+.header a:hover,
+.header a:focus{
+  text-decoration: underline;
+}
+
+.header select {
+  margin-left: 8px;
+  max-width: 150px;
+}
+
+.header__inner {
+  display: table;
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  width: 100%;
+}
+
+.header__logo {
+  color: #efefef;
+  display: table-cell;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.header__logo img {
+  display: inline-block;
+  margin-right: 0.8rem;
+  vertical-align: middle;
+}
+
+.header-controls {
+  display: table-cell;
+  text-align: right;
+  vertical-align: middle;
+  width: 100%;
+}
+
+.header__checkbox {
+  vertical-align: middle;
+}
+
+.header__label {
+  font-size: 12px;
+  color: #ccc;
+}
+
+.sr-only {
+  clip: rect(0, 0, 0, 0);
+  height: 0;
+  margin: -1px;
+  position: absolute;
+  width: 0;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 900px;
+  overflow: hidden;
+  padding: 2rem;
+}
+
+.control-label {
+  display: block;
+  font-size: 1.2rem;
+  letter-spacing: 0.01em;
+  margin-bottom: 0.4rem;
+  text-transform: uppercase;
+}
+
+.field {
+  padding: 0.8rem;
+}
+
+fieldset {
+  border: 1px solid #aaa;
+  float: left;
+  padding: 1.6rem;
+  width: 49%;
+}
+
+.control-box {
+  overflow: hidden;
+}
+
+ul,
+ol {
+  margin: 0 0 16px 0;
+}
+
+p {
+  margin: 16px 0;
+}
+
+.type-subheading {
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 1.5;
+  margin: 0 0 1.6rem;
+}
+
+.hint {
+  font-style: italic;
+  line-height: 1.5;
+}
+
+.footnote {
+  border-left: 4px solid #aaa;
+  color: #444;
+  font-size: 14px;
+  font-style: italic;
+  margin-left: 8px;
+  padding-left: 16px;
+}
+
+.test-case {
+  border-radius: 0.2rem;
+  border: 1px solid #d9d9d9;
+  margin: 3.2rem 0 3.2rem;
+}
+
+.test-case__title {
+  padding: 10px 15px 8px;
+  line-height: 16px;
+  font-size: 18px;
+  border-bottom: 1px dashed #d9d9d9;
+  margin: 0 0 -1px;
+}
+
+.test-case__title__check {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.test-case__body {
+  padding: 10px 10px 0 10px;
+}
+
+.test-case__desc {
+  font-style: italic;
+  margin: 15px 0;
+  padding: 0 15px;
+}
+
+.test-case--complete {
+  border-color: #5cb85c;
+}
+
+.test-case--complete .test-case__title {
+  color: #5cb85c;
+}
+
+.test-case__details {
+  border-bottom: 1px dashed #d9d9d9;
+  font-size: 80%;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  margin: 0;
+  padding: 0 15px;
+}
+
+.test-case__details > * {
+  display: inline-block;
+}
+
+.test-case__details > dt,
+.test-case__details > dd {
+  padding: 8px 0 6px;
+}
+
+.test-case__details > dt {
+  color: #464a4c;
+  font-weight: 600;
+}
+
+.test-case__details > dd {
+  margin-left: 1rem;
+}
+
+.test-case__details > dd + dt {
+  margin-left: 1.5rem;
+}
+
+.test-case__invalid-version {
+  font-style: italic;
+  font-size: 1.6rem;
+  color: #5cb85c;
+}
+
+.test-fixture {
+  padding: 20px;
+  margin: 0 -10px; /* opposite of .test-case padding */
+  background-color: #f4f4f4;
+  border-top: 1px solid #d9d9d9;
+}
+
+.test-fixture__controls {
+  margin: -20px -20px 20px -20px;
+  padding: 20px;
+  border: 1px solid #444;
+}
+
+.field-group {
+  overflow: hidden;
+}
+
+table {
+  border: 1px solid #d9d9d9;
+  border-width: 1px 1px 1px 0;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 20px;
+  width: 100%;
+}
+
+td,
+th {
+  text-align: left;
+  border: 1px solid #d9d9d9;
+  padding: 6px;
+}
+
+tbody tr:nth-child(even) {
+  background: #f0f0f0;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  background: white;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  margin: 10px;
+  padding: 10px;
+}
+
+.observable-card {
+  height: 200px;
+  border: 1px solid black;
+  background: #e0e0e0;
+  padding: 20px;
+  font-size: 18px;
+  overflow: auto;
+  margin-bottom: 50px;
+  position: relative;
+}
+
+.observable-card::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  border-top: 1px dotted red;
+}
+
+.fixed-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 200px;
+  z-index: 1000;
+  background-color: gray;
+  display: flex;
+  flex-direction: column;
+}
+
+.onscreen {
+  background-color: green;
+}
+
+.highlight-focused-children * {
+  margin-left: 10px;
+}
+
+.highlight-focused-children *:focus {
+  outline: 2px solid green;
+}
diff --git a/fixtures/dom/src/tags.js b/fixtures/dom/src/tags.js
new file mode 100644
index 00000000000..5ff0ce6d066
--- /dev/null
+++ b/fixtures/dom/src/tags.js
@@ -0,0 +1,72 @@
+/**
+ * Version tags are loaded from the GitHub API. Since the GitHub API is rate-limited
+ * we attempt to save and load the tags in sessionStorage when possible. Since its unlikely
+ * that versions will change during a single session this should be safe.
+ */
+
+const TAGS_CACHE_KEY = '@react-dom-fixtures/tags';
+
+/**
+ * Its possible that users will be testing changes frequently
+ * in a browser that does not support sessionStorage. If the API does
+ * get rate limited this hardcoded fallback will be loaded instead.
+ * This way users can still switch between ~some versions while testing.
+ * If there's a specific version they need to test that is not here, they
+ * can manually load it by editing the URL (`?version={whatever}`)
+ */
+const fallbackTags = [
+  '15.4.2',
+  '15.3.2',
+  '15.2.1',
+  '15.1.0',
+  '15.0.2',
+  '0.14.8',
+  '0.13.0',
+].map(version => ({
+  name: `v${version}`,
+}));
+
+let canUseSessionStorage = true;
+
+try {
+  sessionStorage.setItem('foo', '');
+} catch (err) {
+  canUseSessionStorage = false;
+}
+
+/**
+ * Attempts to load tags from sessionStorage. In cases where
+ * sessionStorage is not available (Safari private browsing) or the
+ * tags are cached a fetch request is made to the GitHub API.
+ *
+ * Returns a promise so that the consuming module can always assume
+ * the request is async, even if its loaded from sessionStorage.
+ */
+export default function getVersionTags() {
+  return new Promise(resolve => {
+    let cachedTags;
+    if (canUseSessionStorage) {
+      cachedTags = sessionStorage.getItem(TAGS_CACHE_KEY);
+    }
+    if (cachedTags) {
+      cachedTags = JSON.parse(cachedTags);
+      resolve(cachedTags);
+    } else {
+      fetch('https://api.github.com/repos/facebook/react/tags?per_page=1000', {
+        mode: 'cors',
+      })
+        .then(res => res.json())
+        .then(tags => {
+          // A message property indicates an error was sent from the API
+          if (tags.message) {
+            return resolve(fallbackTags);
+          }
+          if (canUseSessionStorage) {
+            sessionStorage.setItem(TAGS_CACHE_KEY, JSON.stringify(tags));
+          }
+          resolve(tags);
+        })
+        .catch(() => resolve(fallbackTags));
+    }
+  });
+}
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
new file mode 100644
index 00000000000..d20b81b4361
--- /dev/null
+++ b/fixtures/dom/yarn.lock
@@ -0,0 +1,9066 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/standalone@^7.0.0":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.12.10.tgz#f77f6750d0ab88c7c23234dd2d2f3800f170a573"
+  integrity sha512-e3sJ7uwwjiGWv7qeATKrP+Mjltr6JEurPh3yR0dBb9ie2YDnKl52lO82f+Ha+HAtyxTHfsPIXwgFmWKsCT2zOQ==
+
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
+
+abab@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+  integrity sha512-I+Wi+qiE2kUXyrRhNsWv6XsjUTBJjSoVSctKNBfLG5zG/Xe7Rjbxf13+vqYHNTwHaFU+FtSlVxOCTiMEVtPv0A==
+
+accepts@~1.3.4:
+  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"
+
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-dynamic-import@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+  integrity sha512-GKp5tQ8h0KMPWIYGRHHXI1s5tUpZixZ3IHF2jAu42wSCf6In/G873s6/y4DdKdhWvzhu1T6mE1JgvnhAKqyYYQ==
+  dependencies:
+    acorn "^4.0.3"
+
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  integrity sha512-uWttZCk96+7itPxK8xCzY86PnxKTMrReKDqrHzv42VQY0K30PUO8WY13WMOuI+cOdX4EIdzdvQ8k6jkuGRFMYw==
+  dependencies:
+    acorn "^4.0.4"
+
+acorn-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  integrity sha512-AU7pnZkguthwBjKgCg6998ByQNIMjbuDQZ8bb78QAFZwPfmKia8AIzgY/gWgqCjnht8JLdXmB4YxA0KaV60ncQ==
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  integrity sha512-OLUyIIZ7mF5oaAUT1w0TFqQS81q3saT46x8t7ukpPjMNk+nbs4ZHhs7ToV8EWnLYLepjETXd4XaCE4uxkMeqUw==
+
+acorn@^4.0.3, acorn@^4.0.4:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha512-fu2ygVGuMmlzG8ZeRJ0bvR41nsAkxxhbyk8bZ1SS521Z7vmgJFTQQlfz/Mp/nJexGBz+v8sC9bM6+lNgskt4Ug==
+
+acorn@^5.0.0, acorn@^5.5.0:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
+address@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+  integrity sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg==
+
+address@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
+
+ajv-keywords@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+  integrity sha512-ZFztHzVRdGLAzJmpUT9LNFLe1YiVOEylcaNpEutM26PVTCtOD919IMfD01CgbRouB42Dd9atjx1HseC15DgOZA==
+
+ajv-keywords@^3.0.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^5.0.0, ajv@^5.1.5, ajv@^5.2.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  integrity sha512-Ajr4IcMXq/2QmMkEmSvxqfLN5zGmJ92gHXAeOXq1OekoH2rfDNsgdDoL2f7QaRCy7G/E6TpxBVdRuNraMztGHw==
+  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.0.1, ajv@^6.12.3:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+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"
+  integrity sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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"
+  integrity sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==
+
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  integrity sha512-TdlOggdA/zURfMYa7ABC66j+oqfMew58KpJMbUlH3bcZP1b+cBHIHDDn5uH9INsxrHBPjsqM0tDB4jPTF/vgJA==
+  dependencies:
+    string-width "^2.0.0"
+
+ansi-escapes@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+  integrity sha512-wiXutNjDUlNEDWHcYH3jtZUhd3c4/VojassD8zHdHCY13xbZy2XbW+NKQwA0tWGBVzDA9qEzYwfoSsWmviidhw==
+
+ansi-escapes@^3.0.0:
+  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-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+  integrity sha512-JoAxEa1DfP9m2xfB/y2r/aKcwXNlltr4+0QSBC4TrLfcxyvepX2Pv0t/xpgGV5bGsDzCYV8SzjWgyCW0T9yYbA==
+
+ansi-regex@^2.0.0, ansi-regex@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
+
+ansi-regex@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
+  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
+
+ansi-styles@^3.0.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@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+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"
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  integrity sha512-Yisb7ew0ZEyDtRYQ+b+26o9KbiYPFxwcsxKzbssigzRRMJ9LpExPVUg6Fos7eP7yP3q7///tzze4nm4lTptPBw==
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
+  integrity sha512-0cRIa6yBosWVw5Ozi0D7KWPY2fYiK5ahZp2m2AOVYHLw0haJ6rt8XAZFCQYz2T3V0F8DE+wPopWQacS79MEnRA==
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  integrity sha512-dtXTVMkh6VkEEA7OhXnN1Ecb8aAGFdZ1LFxtOCoqj4qkyOJMt7+qs6Ahdy6p/NQCPYsRSXXivhSB/J5E9jmYKA==
+  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 sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==
+
+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@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==
+
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-equal@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.2.tgz#a8572e64e822358271250b9156d20d96ef5dec04"
+  integrity sha512-gUHx76KtnhEgB3HOuFYiCm3FIdEs6ocM2asHvNTkfu/Y09qQVrrVVaOKENmS2KkSaGoxgXNqC+ZVtR/n0MOkSA==
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+  integrity sha512-VW0FpCIhjZdarWjIz8Vpva7U95fl2Jn+b+mmFFMLn8PIVscOQcAgEznwUzTEuUHuqZqIxwzRlcaN/urTFFQoiw==
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+  integrity sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw==
+
+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-includes@^3.0.3, array-includes@^3.1.1:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
+array-map@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.1.tgz#d1bf3cc8813a7daaa335e5c8eb21d9d06230c1a7"
+  integrity sha512-sxHIeJTGEsRC8/hYkZzdJNNPZ41EXHVys7pqMw1iwE/Kx8/hto0UbDuGQsSJ0ujPovj9qUZl6EOY/EiZ2g3d9Q==
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+  integrity sha512-8jR+StqaC636u7h3ye1co3lQRefgVVUQUhuAmRbDqIMeR2yuXzRvkCNQiQ5J/wbREmoBLNtp13dhaaVpZQDRUw==
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
+  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"
+  integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+  integrity sha512-G2n5bG5fSUCpnsXz4+8FUkYsGPkNfLn9YvS66U5qbTIXI2Ynnlo4Bi42bWv+omKUCqz+ejzfClwne0alJWJPhg==
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
+
+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.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
+asn1.js@^4.10.1:
+  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.3:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
+  integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==
+  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 sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
+
+assert@^1.1.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.1.tgz#038ab248e4ff078e7bc2485ba6e6388466c78f76"
+  integrity sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==
+  dependencies:
+    object.assign "^4.1.4"
+    util "^0.10.4"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
+
+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"
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+
+async-each@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.6.tgz#52f1d9403818c179b7561e11a5d1b77eb2160e77"
+  integrity sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==
+
+async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
+  dependencies:
+    lodash "^4.17.14"
+
+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.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+autoprefixer@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
+  integrity sha512-C9yv/UF3X+eJTi/zvfxuyfxmLibYrntpF3qoJYrMeQwgUJOZrZvpJiMG2FMQ3qnhWtF/be4pYONBBw95ZGe3vA==
+  dependencies:
+    browserslist "^2.5.1"
+    caniuse-lite "^1.0.30000748"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.13"
+    postcss-value-parser "^3.2.3"
+
+autoprefixer@^6.3.1:
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  integrity sha512-WKExI/eSGgGAkWAO+wMVdFObZV7hQen54UpD1kCCTN3tvlL3W1jL4+lPP/M7MwoP7Q4RHzKtO3JQ4HxYEcd+xQ==
+  dependencies:
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.16"
+    postcss-value-parser "^3.2.3"
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
+
+aws4@^1.8.0:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.13.2.tgz#0aa167216965ac9474ccfa83892cfb6b3e1e52ef"
+  integrity sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==
+
+axobject-query@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
+  integrity sha512-hEvSXm+TPfadELgugiwUBoTQBFvNF+riZKUxuqoRbm7dv06hVd0yvyIaS4DBohxgO8WpIJ2/OSEhdk+iw/LWsg==
+  dependencies:
+    ast-types-flow "0.0.7"
+
+babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.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 sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
+  integrity sha512-FSiqfr4SYrH5Zv5KgWahyY99VC+Aod1ioMRNvL1lPS4WTUqvPAdYo7ioWEhDHEDqZADapbJZMX0sBuRsc93bDQ==
+  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.0.0, babel-core@^6.26.0:
+  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"
+    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.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
+babel-eslint@7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  integrity sha512-i2yKOhjgwUbUrJ8oJm6QqRzltIoFahGNPZ0HF22lUN4H1DW03JQyJm7WSv+I1LURQWjDNhVqFo04acYa07rhOQ==
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
+babel-generator@^6.18.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"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  integrity sha512-gCtfYORSG1fUMX4kKraymq607FWgMWg+j42IFPc18kFQEsmtaibP4UrqsXt8FlEJle25HUd4tsoDR7H2wDhe9Q==
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-builder-react-jsx@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
+  integrity sha512-02I9jDjnVEuGy2BR3LRm9nPRb/+Ja0pvZVLr1eI5TYAA/dB0Xoc+WBo50+aDfhGDLhlBY1+QURjn9uvcFd8gzg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
+
+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 sha512-RL8n2NiEj+kKztlrVJM9JT1cXzzAdvWFh76xh/H1I4nKwunzE4INBXn8ieCZ+wh4zWszZk7NBS1s/8HR5jDkzQ==
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  integrity sha512-bHkmjcC9lM1kmZcVpA5t2om2nzT/xiZpo6TJq7UlZ3wqKfzia4veeXbIhKvJXAMzhhEBd3cR1IElL5AenWEUpA==
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  integrity sha512-qe5csbhbvq6ccry9G7tkXbzNtcDiH4r51rrPUbwwoTzZ18AqxWYRZT6AOmxrpxKnQBW0pYlBI/8vh73Z//78nQ==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^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 sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==
+  dependencies:
+    babel-helper-get-function-arity "^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-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 sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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 sha512-zAYl3tqerLItvG5cKYw7f1SpvIxS9zi7ohyGHaI9cgDUjAT6YcY9jIEH5CstetP5wHIVSceXwNS7Z5BpJg+rOw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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 sha512-Op9IhEaxhbRT8MDXx2iNuMgciu2V8lDvYCNQbDGjdBNCjaMvyLf4wl4A3b8IgndCyQF8TwfgsQ8T3VD8aX1/pA==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  integrity sha512-VlPiWmqmGJp0x0oK27Out1D+71nVVCTSdlbhIVoaBAj2lUgrNjBCRR9+llO4lTSb2O4r7PJg+RobRkhBrf6ofg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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"
+  integrity sha512-RYqaPD0mQyQIFRu7Ho5wE2yvA/5jxqCIj/Lv4BXNq23mHYu/vxikOy2JueLiBxQknwapwrJeNCesvY0ZcfnlHg==
+  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 sha512-sLI+u7sXJh6+ToqDr57Bv973kCepItDhMou0xCP2YPVmR1jkHSCY+p1no8xErbV1Siz5QE8qKT1WIwybSWlqjw==
+  dependencies:
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^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 sha512-n7pFrqQm44TCYvrCDb0MqabAF+JUBq+ijBvNMUxpkLjJaAu32faIexewMumrH5KLLJ1HDyT0PTEqRyAe/GwwuQ==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-jest@20.0.3, babel-jest@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-20.0.3.tgz#e4a03b13dc10389e140fc645d09ffc4ced301671"
+  integrity sha512-eAycDKZn+m6jMBv5KMXRKttDeoDUE7Y6eQpeiF4ip0lLaI4uwGNhJIdVK2RptHjO9N9RJ2gONMn2XE67wBdf8A==
+  dependencies:
+    babel-core "^6.0.0"
+    babel-plugin-istanbul "^4.0.0"
+    babel-preset-jest "^20.0.3"
+
+babel-loader@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
+  integrity sha512-jRwlFbINAeyDStqK6Dd5YuY0k5YuzQUvlz2ZamuXrXmxav3pNqe9vfJ402+2G+OmlJSXxCOpB6Uz0INM7RQe2A==
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.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 sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.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 sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-dynamic-import-node@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.1.0.tgz#bd1d88ac7aaf98df4917c384373b04d971a2b37a"
+  integrity sha512-tTfZbM9Ecwj3GK50mnPrUpinTwA4xXmDiQGCk/aBYbvl1+X8YqldK86wZ1owVJ4u3mrKbRlXMma80J18qwiaTQ==
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-istanbul@^4.0.0:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
+  integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
+  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-plugin-jest-hoist@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
+  integrity sha512-rnyXaCLaHX6BjzT9h4UI1xK7oobCwtLfhompk0qxbcQNhw8JEidggjO1KonVrpdd2+q3QAww3DwVdTYs0g373Q==
+
+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"
+  integrity sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==
+
+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 sha512-chI3Rt9T1AbrQD1s+vxw3KcwC9yHtF621/MacuItITfZX344uhQoANjpoSJZleAmW2tjlolqB/f+h7jIqXa7pA==
+
+babel-plugin-syntax-dynamic-import@6.18.0, babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+  integrity sha512-MioUE+LfjCEz65Wf7Z/Rm4XCP5k2c+TbMd2Z2JKc7U9uwjBhAfNPE48KC4GTGKhppMeYVepwDBNO/nGY6NYHBA==
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+  integrity sha512-HbTDIoG1A1op7Tl/wIFQPULIBA61tsJ8Ntq2FAhLwuijrzosM/92kAfgU1Q3Kc7DH/cprJg5vDfuTY4QUL4rDA==
+
+babel-plugin-syntax-jsx@^6.3.13, 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 sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
+babel-plugin-syntax-object-rest-spread@^6.13.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 sha512-C4Aq+GaAj83pRQ0EFgTvw5YO6T3Qz2KGrNRwIj9mSoNHVvdZY4KO2uA6HNtNXCw993iSZnckY1aLW8nOi8i4+w==
+
+babel-plugin-syntax-trailing-function-commas@^6.22.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"
+  integrity sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==
+
+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"
+  integrity sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-class-properties@6.24.1:
+  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 sha512-n4jtBA3OYBdvG5PRMKsMXJXHfLYw/ZOmtxCLOOwz6Ro5XlrColkStLnz1AS1L2yfPA9BKJ1ZNlmVCLjAL9DSIg==
+  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.22.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 sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.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 sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.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 sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.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 sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.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 sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@6.23.0, babel-plugin-transform-es2015-destructuring@^6.23.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 sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.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 sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.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 sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.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 sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  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-modules-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.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 sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.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 sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.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 sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.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 sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.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 sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.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 sha512-TxIM0ZWNw9oYsoTthL3lvAK3+eTujzktoXJg4ubGvICGbVuXVYv5hHv0XXpz8fbqlJaGYY4q5SVzaSmsg3t4Fg==
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+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"
+  integrity sha512-ocgA9VJvyxwt+qJB0ncxV8kb/CjfTcECUY4tQ5VT7nP6Aohzobm8CDFaQ5FHdvZQzLmf0sgDxB8iRXZXxwZcyA==
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
+babel-plugin-transform-react-constant-elements@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz#2f119bf4d2cdd45eb9baaae574053c604f6147dd"
+  integrity sha512-22TG15ONh0FWXj98Y5KOpMmEfDIMJa66rg58LzxssT0LUEFN8utkM1NmBEBx1WKkJFa6spK9aR4yLbDQntPxhg==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.23.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 sha512-QLYkLiZeeED2PKd4LuXGg5y9fCgPB5ohF8olWUuETE2ryHNRqqnXlEVP7RPuef89+HTfd3syptMGVHeoAu0Wig==
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@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"
+  integrity sha512-Y3ZHP1nunv0U1+ysTNwLK39pabHj6cPVsfN4TRC7BDBfbgbyF4RifP5kd6LnbuMV9wcfedQMe7hn1fyKc7IzTQ==
+  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.22.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"
+  integrity sha512-pcDNDsZ9q/6LJmujQ/OhjeoIlp5Nl546HJ2yiFIJK3mYpgNXhI5/S9mXfVxu5yqWAi7HdI7e/q6a9xtzwL69Vw==
+  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.24.1:
+  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 sha512-s+q/Y2u2OgDPHRuod3t6zyLoV8pUHc64i/O7ZNgIOEdYTq+ChPeybcKBi/xk9VI60VriILzFPW+dUxAEbTxh2w==
+  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, babel-plugin-transform-regenerator@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+babel-plugin-transform-runtime@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  integrity sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==
+  dependencies:
+    babel-runtime "^6.22.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 sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-preset-env@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
+  integrity sha512-W6VIyA6Ch9ePMI7VptNn2wBM6dbG0eSz25HEiL40nQXCsXGTGZSTZu1Iap+cj3Q0S5a7T9+529l/5Bkvd+afNA==
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.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"
+  integrity sha512-PQZFJXnM3d80Vq4O67OE6EMVKIw2Vmzy8UXovqulNogCtblWU8rzP7Sm5YgHiCg4uejUxzCkHfNXQ4Z6GI+Dhw==
+  dependencies:
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+
+babel-preset-jest@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-20.0.3.tgz#cbacaadecb5d689ca1e1de1360ebfc66862c178a"
+  integrity sha512-qeYOCuriyIDRKDE/dByN/yCc/przV2LdHbxldeSsjOr1khQi2o2CzrHXUQM7dSWfmqwxTifznw+bNg59kkI18w==
+  dependencies:
+    babel-plugin-jest-hoist "^20.0.3"
+
+babel-preset-react-app@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.1.2.tgz#49ba3681b917c4e5c73a5249d3ef4c48fae064e2"
+  integrity sha512-/sh5Qd5T08PYa6t4kuCdKh9tXp6/m/Jwyx7PJTqugsYMfsDUJMlBXOs5EwFODHprzjWrmQ0SydnMZu9FY4MZYg==
+  dependencies:
+    babel-plugin-dynamic-import-node "1.1.0"
+    babel-plugin-syntax-dynamic-import "6.18.0"
+    babel-plugin-transform-class-properties "6.24.1"
+    babel-plugin-transform-es2015-destructuring "6.23.0"
+    babel-plugin-transform-object-rest-spread "6.26.0"
+    babel-plugin-transform-react-constant-elements "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-plugin-transform-regenerator "6.26.0"
+    babel-plugin-transform-runtime "6.23.0"
+    babel-preset-env "1.6.1"
+    babel-preset-react "6.24.1"
+
+babel-preset-react@6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
+  integrity sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==
+  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-register@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  integrity sha512-veliHlHX06wjaeY8xNITbveXSiI+ASFnOqvne/LaIJIqOWi2Ogmj91KOugEz/hoh/fwMhXNBJPCv8Xaz5CyM4A==
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  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:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.23.1, 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 sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.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 sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.17.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@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+  integrity sha512-STw03mQKnGUYtoNjmowo4F2cRmIIxYEGiMsjjwla/u5P1lxadj/05WkNaFjNiKTgJkj8KiXbgAiRTmcQRwQNtg==
+
+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@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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"
+    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"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==
+  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"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.4.7:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.1.tgz#215741fe3c9dba2d7e12c001d0cfdbae43975ba7"
+  integrity sha512-k8TVBiPkPJT9uHLdOKfFpqcfprwBFOAAXXozRubr7R7PfIuKvQlzcI4M0pALeqXN09vdaMbUdUj+pass+uULAg==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  integrity sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==
+  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 sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
+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"
+
+brace-expansion@^1.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"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha512-xU7bpz2ytJl1bH9cgIurjpg/n8Gohy9GTw81heDYLJQ4RU60dlyJsa+atVF2pI0yMMvKxI9HkKwjePCj5XI1hw==
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+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"
+    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"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
+
+browser-resolve@^1.11.2:
+  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.4, browserify-aes@^1.2.0:
+  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.1:
+  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, browserify-rsa@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.1.tgz#06e530907fe2949dc21fc3c2e2302e10b1437238"
+  integrity sha512-YBjSAiTqM04ZVei6sXighu679a3SqWORA3qZTEqZImnlkDIFtKc6pNutpjyZ8RJTjQtuYfeetkxM11GwoYXMIQ==
+  dependencies:
+    bn.js "^5.2.1"
+    randombytes "^2.1.0"
+    safe-buffer "^5.2.1"
+
+browserify-sign@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.3.tgz#7afe4c01ec7ee59a89a558a4b75bd85ae62d4208"
+  integrity sha512-JWCZW6SKhfhjJxO8Tyiiy+XYB7cqd2S5/+WeYHsKdNKFlCBhKbblba1A/HN/90YwtxKc8tCErjffZl++UNmGiw==
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.5"
+    hash-base "~3.0"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.7"
+    readable-stream "^2.3.8"
+    safe-buffer "^5.2.1"
+
+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"
+
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  integrity sha512-qHJblDE2bXVRYzuDetv/wAeHOJyO97+9wxC1cdCtyzgNuSozOyRCiiLaCR1f71AN66lQdVVBipWm63V+a7bPOw==
+  dependencies:
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
+
+browserslist@^2.1.2, browserslist@^2.5.1:
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
+  integrity sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==
+  dependencies:
+    caniuse-lite "^1.0.30000792"
+    electron-to-chromium "^1.3.30"
+
+bser@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
+  integrity sha512-kKi2swDowbCsnwsYyJnMkz3N1utuJfnWcvzxVX45nWuumTNEkig97rvLVN60+8OWgAWuJdIyEfTPTZqyPoklwA==
+  dependencies:
+    node-int64 "^0.4.0"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  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"
+  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 sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==
+
+buffer@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  integrity sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==
+
+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 sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+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"
+    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-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.7, call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  integrity sha512-UJiE1otjXPF5/x+T3zTnSFiTOEmJoGTD9HmBoxnCUwho61a2eSNn/VwtwuIBDAo2SEOv1AJ7ARI5gCmohFLu/g==
+  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 sha512-Zv4Dns9IbXXmPkgRRUjAaJQgfN4xX5p6+RQFhWUqscdvvK2xK/ZL8b3IXIJsj+4sD+f24NwnWy2BY8AJ82JB0A==
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  integrity sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw==
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==
+
+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 sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw==
+
+caniuse-api@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
+  integrity sha512-SBTl70K0PkDUIebbkXrxWqZlHNs0wRgRD6QZ8guctShjbh63gEPfF+Wj0Yw+75f5Y8tSzqAI/NcisYv/cCah2Q==
+  dependencies:
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30001692"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001692.tgz#83785f11451fac6af542e8aebf5382c9e5723034"
+  integrity sha512-yrbj9o81/cUIK4zZUK9yztbhjqVj7xBvM59UwfuQyd2/5dx6p5PbhlG3sQr4a6LLTZjfd97Zu506jD8skOrHcQ==
+
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
+  version "1.0.30001692"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz#4585729d95e6b95be5b439da6ab55250cd125bf9"
+  integrity sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==
+
+capture-stack-trace@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.2.tgz#1c43f6b059d4249e7f3f8724f15f048b927d3a8a"
+  integrity sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==
+
+case-sensitive-paths-webpack-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909"
+  integrity sha512-Zg7Z9IuE0T+Ilg+o0IVpZXHAcN6VHO80BVxak3RIB1pmcbiITr06WlZ45Xa/KGQ7fQ/ar6C1KEkeI93tojBJPQ==
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  integrity sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@1.1.3, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
+  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.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"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  integrity sha512-j/Toj7f1z98Hh2cYo2BVr85EpIRWqUi7rtRSGxh/cqUjqrnJe9l9UE7IUGd2vQ2p+kSHLkSzObQPZPLUC6TQwg==
+
+chokidar@^2.0.0, chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  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"
+
+chokidar@^3.4.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+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==
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.6.tgz#8fe672437d01cd6c4561af5334e0cc50ff1955f7"
+  integrity sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==
+  dependencies:
+    inherits "^2.0.4"
+    safe-buffer "^5.2.1"
+
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
+
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
+  dependencies:
+    chalk "^1.1.3"
+
+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"
+
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
+clean-css@4.2.x:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
+  integrity sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==
+  dependencies:
+    source-map "~0.6.0"
+
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+  integrity sha512-3Fo5wu8Ytle8q9iCzS4D2MWVL2X7JVWRiS1BnXbTFDhS9c/REkM9vd1AmabsoZoY5/dGi5TT9iKL8Kb6DeBRQg==
+
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-width@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  integrity sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  integrity sha512-0yayqDxWQbqk3ojkYqUKqaAQ6AfNKeKWRNA8kR0WXzAsdHpP4BIaOmMAG87JGuO6qcobyW4GjxHd9PmhEd+T9w==
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
+
+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=
+
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  integrity sha512-KAGck/eNAmCL0dcT3BiuYwLbExK6lduR8DxM3C1TyDzaXhZHyZ8ooX5I5+na2e3dPFuibfxrGdorr0/Lr7RYCQ==
+  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"
+  integrity sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==
+
+codemirror@^5.40.0:
+  version "5.65.18"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.18.tgz#d7146e4271135a9b4adcd023a270185457c9c428"
+  integrity sha512-Gaz4gHnkbHMGgahNt3CA5HBk5lLQBqmD/pBgeB4kQU6OedZmqMBjlRF0LSrp2tJ4wlLNPm2FfaUd1pDy0mdlpA==
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.3.0, color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  integrity sha512-sz29j1bmSDfoAxKIEU6zwoIZXN6BrFbAMIhfYCNyiZXBDuU/aiHlN84lp/xDzL2ubyFhLDobHIlU1X70XRrMDA==
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  integrity sha512-Ajpjd8asqZ6EdxQeqGzU5WBhhTfJ/0cA4Wlbre7e5vXfmDSmda7Ov6jeKoru+b0vHcb1CqvuroTHp5zIWzhVMA==
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  integrity sha512-XSEQUUQUR/lXqGyddiNH3XYFUPYlYr1vXy9rTFMsSOw+J7Q6EQkdlQIrTlYn4TccpsOaUE1PYQNjBn20gwCdgQ==
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+  integrity sha512-ENwblkFQpqqia6b++zLD/KUWafYlVY/UNnAp7oz7LY7E924wmpye416wBOmvv/HMWzl8gL1kJlfvId/1Dg176w==
+
+combined-stream@^1.0.6, 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.17.x:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
+commander@^2.11.0:
+  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==
+
+commander@~2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
+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.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.1.tgz#ef1d5796f7d93f135ee6fb684340b26403c97d17"
+  integrity sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==
+
+compressible@~2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.5.tgz#fdd256c0a642e39e314c478f6c2cd654edd74c93"
+  integrity sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==
+  dependencies:
+    bytes "3.1.2"
+    compressible "~2.0.18"
+    debug "2.6.9"
+    negotiator "~0.6.4"
+    on-headers "~1.0.2"
+    safe-buffer "5.2.1"
+    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.0:
+  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:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.5.tgz#e9af331fadc14dabd544d3e7e76dc446a09a530f"
+  integrity sha512-nlOhI4+fdzoK5xmJ+NY+1gZK56bwEaWZr8fYuXohZ9Vkc1o3a4T/R3M+yE/w7x/ZVJ1zF8c+oaOvF0dztdUgmA==
+  dependencies:
+    dot-prop "^4.2.1"
+    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.3.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==
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha512-OKZnPGeMQy2RPaUIBPFFd71iNf4791H12MCRuVQDnzGRwCYNYmTDy5pdafo2SLAcEMKzTOQnLWG4QdcjeJUMEg==
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type-parser@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+  integrity sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==
+
+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==
+
+content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+convert-source-map@^1.4.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+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=
+
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
+
+core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+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=
+
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  integrity sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+create-ecdh@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+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 sha512-gYTKKexFO3kh200H1Nit76sRwRtOY32vQd3jpAQKpLtZqyNsSQNfI4N7o3eP2wUjV35pTWKRYqFUDBvUha/Pkw==
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
+  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.4, create-hmac@^1.1.7:
+  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"
+
+cross-spawn@5.1.0, 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 sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+crypto-browserify@^3.11.0:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.1.tgz#bb8921bec9acc81633379aa8f52d69b0b69e0dac"
+  integrity sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==
+  dependencies:
+    browserify-cipher "^1.0.1"
+    browserify-sign "^4.2.3"
+    create-ecdh "^4.0.4"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    diffie-hellman "^5.0.3"
+    hash-base "~3.0.4"
+    inherits "^2.0.4"
+    pbkdf2 "^3.1.2"
+    public-encrypt "^4.0.3"
+    randombytes "^2.1.0"
+    randomfill "^1.0.4"
+
+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 sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg==
+
+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"
+  integrity sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==
+
+css-loader@0.28.7:
+  version "0.28.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
+  integrity sha512-GxMpax8a/VgcfRrVy0gXD6yLd5ePYbXX/5zGgTVYp4wXtJklS8Z2VaUArJgc//f6/Dzil7BaJObdSv8eKKCPgg==
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
+css-select@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
+  integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  integrity sha512-0o0IMQE0Ezo4b41Yrm8U6Rp9/Ag81vNXY1gZMnT1XhO4DpjEf2utKERqWJbOoz3g1Wdc1d3QSta/cIuJ1wSTEg==
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  integrity sha512-FmCI/hmqDeHHLaIQckMhMZneS84yzUZdrWDAvJVVxOwcKE1P1LF9FGmzr1ktIQSxOw6fl3PaQsmfg+GN+VvR3w==
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  integrity sha512-FUpKc+1FNBsHUr9IsfSGCovr8VuGOiiuzlgCyppKBjJi2jYTOFLN3oiiNRMIvYqbFzF38mqKj4BgcevzU5/kIA==
+  dependencies:
+    cssom "0.3.x"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  integrity sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==
+  dependencies:
+    array-find-index "^1.0.1"
+
+d@1, d@^1.0.1, d@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.2.tgz#2aefd554b81981e7dccf72d6842ae725cb17e5de"
+  integrity sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==
+  dependencies:
+    es5-ext "^0.10.64"
+    type "^2.7.2"
+
+damerau-levenshtein@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+  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.0.1, debug@^3.1.0, debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
+decode-uri-component@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
+deep-equal@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.2.tgz#78a561b7830eef3134c7f6f3a3d6af272a678761"
+  integrity sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==
+  dependencies:
+    is-arguments "^1.1.1"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    object-is "^1.1.5"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.5.1"
+
+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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  integrity sha512-Dn2eAftOqXhNXs5f/Xjn7QTZ6kDYkx7u0EXQInN1oyYwsZysu11q7oTtaKcbzLxZRJiDHa8VmwpWmb4lY5FqgA==
+  dependencies:
+    strip-bom "^2.0.0"
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==
+  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 sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==
+  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"
+
+defined@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
+  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
+
+del@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  integrity sha512-Z4fzpbIRjOu7lO5jCETSWoqUDVe0IPOlfugBsF6suen2LKDlVb4QZpKEM9P+buNJ4KI1eN7I083w/pbKUpsrWQ==
+  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"
+
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  integrity sha512-7yjqSoVSlJzA4t/VUwazuEagGeANEKB3f/aNI//06pfKgwoCb7f6Q1gETN1sZzYaj6chTQ0AhIwDiPdfOjko4A==
+  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"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+des.js@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.1.0.tgz#1d37f5766f3bbff4ee9638e871a8768c173b81da"
+  integrity sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  integrity sha512-BDKtmHlOzwI7iRuEkhzsnPoi5ypEhWAJB5RvHWe1kMr06js3uK5B3734i3ui5Yd+wOJV1cpE4JnivPD283GU/A==
+  dependencies:
+    repeating "^2.0.0"
+
+detect-node@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
+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"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+diff-sequences@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
+  integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
+
+diff@^3.2.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+
+diffie-hellman@^5.0.3:
+  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"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  integrity sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==
+
+dns-packet@^1.3.1:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
+  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 sha512-Ix5PrWjphuSoUXV/Zv5gaFHjnaJtb02F2+Si3Ht9dyJ87+Z/lMmy+dpNHtTGraNK958ndXq2i+GLkWsWHcKaBQ==
+  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"
+  integrity sha512-lsGyRuYr4/PIB0txi+Fy2xOMI2dGaTguCaotzFGkVZuKR5usKfcRWIFKNM3QNrU7hh/+w2bwTW+ZeXPK5l8uVg==
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+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"
+
+dom-converter@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+dom-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/dom-urls/-/dom-urls-1.1.0.tgz#001ddf81628cd1e706125c7176f53ccec55d918e"
+  integrity sha512-LNxCeExaNbczqMVfQUyLdd+r+smG7ixIa+doeyiJ7nTmL8aZRrJhHkEYBEYVGvYv7k2DOEBh2eKthoCmWpfICg==
+  dependencies:
+    urijs "^1.16.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@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
+  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
+
+domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.5.2, domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+dot-prop@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
+  integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==
+  dependencies:
+    is-obj "^1.0.0"
+
+dotenv-expand@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
+  integrity sha512-pHWVt6L/YkqbBCMb1hG6e7oO0WdMhlapDIibl+BZ9PncVE3i+G77uvNr8GUxW2ItSituOK8QOYC9oOJjwWD94A==
+
+dotenv@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
+  integrity sha512-XcaMACOr3JMVcEv0Y/iUM2XaOsATRZ3U1In41/1jjK6vJZ2PZbQ1bzCG8uvaByfaBpl9gqc9QWJovpUGBXLLYQ==
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+duplexer3@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
+  integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
+
+duplexer@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==
+  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"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
+  version "1.5.82"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.82.tgz#b9116ac6d6b6346c2baa49f14c1272ba2ce1ccdb"
+  integrity sha512-Zq16uk1hfQhyGx5GpwPAYDwddJuSGhtRhgOA2mCxANYaDT79nAeGnaXogMGng4KqLaJUVnOnuL0+TDop9nLOiA==
+
+elliptic@^6.5.3, elliptic@^6.5.5:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.6.1.tgz#3b8ffb02670bf69e382c7f65bf524c97c5405c06"
+  integrity sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+emoji-regex@^6.1.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+  integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+enhanced-resolve@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
+  integrity sha512-ZaAux1rigq1e2nQrztHn4h2ugvpzZxs64qneNah+8Mh/K0CRqJFJc+UoXnUsq+1yX+DmQFPPdVqboKAJ89e0Iw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    object-assign "^4.0.1"
+    tapable "^0.2.7"
+
+entities@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0:
+  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"
+
+es-abstract@^1.23.2, es-abstract@^1.23.5, es-abstract@^1.23.9:
+  version "1.23.9"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.9.tgz#5b45994b7de78dada5c1bebf1379646b32b9d606"
+  integrity sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.0"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-regex "^1.2.1"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.0"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.3"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.18"
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-object-atoms@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
+es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.62, es5-ext@^0.10.64, es5-ext@~0.10.14:
+  version "0.10.64"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.64.tgz#12e4ffb48f1ba2ea777f1fcdd1918ef73ea21714"
+  integrity sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==
+  dependencies:
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.3"
+    esniff "^2.0.1"
+    next-tick "^1.1.0"
+
+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 sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
+  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 sha512-mz3UqCh0uPCIqsw1SSAkB/p0rOzF/M0V++vyN7JqlPtSW/VsYgQBvVvqMLmfBuyMzTpLnNqi6JmcSizs4jy19A==
+  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@^4.0.5:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+es6-set@~0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.6.tgz#5669e3b2aa01d61a50ba79964f733673574983b8"
+  integrity sha512-TE3LgGLDIBX332jq3ypv6bcOpkLO0AslAQo7p2VqX/1N46YNsvIWgvjojjSEnWEGWMhr1qUbYeTSir5J6mFHOw==
+  dependencies:
+    d "^1.0.1"
+    es5-ext "^0.10.62"
+    es6-iterator "~2.0.3"
+    es6-symbol "^3.1.3"
+    event-emitter "^0.3.5"
+    type "^2.7.2"
+
+es6-symbol@^3.1.1, es6-symbol@^3.1.3, es6-symbol@~3.1.1:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.4.tgz#f4e7d28013770b4208ecbf3e0bf14d3bcb557b8c"
+  integrity sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==
+  dependencies:
+    d "^1.0.2"
+    ext "^1.7.0"
+
+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.6.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  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 sha512-75IUQsusDdalQEW/G/2esa87J7raqdJF+Ca0/Xm5C3Q58Nr4yVYjZGp/P1+2xiEVgXRrA39dpRb8LcshajbqDQ==
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-config-react-app@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-2.1.0.tgz#23c909f71cbaff76b945b831d2d814b8bde169eb"
+  integrity sha512-8QZrKWuHVC57Fmu+SsKAVxnI9LycZl7NFQ4H9L+oeISuCXhYdXqsOOIVSjQFW6JF5MXZLFE+21Syhd7mF1IRZQ==
+
+eslint-import-resolver-node@^0.3.1:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-loader@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.9.0.tgz#7e1be9feddca328d3dcfaef1ad49d5beffe83a13"
+  integrity sha512-40aN976qSNPyb9ejTqjEthZITpls1SVKtwguahmH1dzGCwQU/vySE+xX33VZmD8csU0ahVNCtFlsPgKqRBiqgg==
+  dependencies:
+    loader-fs-cache "^1.0.0"
+    loader-utils "^1.0.2"
+    object-assign "^4.0.1"
+    object-hash "^1.1.4"
+    rimraf "^2.6.1"
+
+eslint-module-utils@^2.1.1:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-flowtype@2.39.1:
+  version "2.39.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5"
+  integrity sha512-RiQv+7Z9QDJuzt+NO8sYgkLGT+h+WeCrxP7y8lI7wpU41x3x/2o3PGtHk9ck8QnA9/mlbNcy/hG0eKvmd7npaA==
+  dependencies:
+    lodash "^4.15.0"
+
+eslint-plugin-import@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz#fa1b6ef31fcb3c501c09859c1b86f1fc5b986894"
+  integrity sha512-Rf7dfKJxZ16QuTgVv1OYNxkZcsu/hULFnC+e+w0Gzi6jMC3guQoWQgxYxc54IDRinlb6/0v5z/PxxIKmVctN+g==
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.6.8"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.1"
+    eslint-module-utils "^2.1.1"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    read-pkg-up "^2.0.0"
+
+eslint-plugin-jsx-a11y@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
+  integrity sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==
+  dependencies:
+    aria-query "^0.7.0"
+    array-includes "^3.0.3"
+    ast-types-flow "0.0.7"
+    axobject-query "^0.1.0"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.4.0"
+
+eslint-plugin-react@7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
+  integrity sha512-tvjU9u3VqmW2vVuYnE8Qptq+6ji4JltjOjJ9u7VAOxVYkUkyBZWRvNYKbDv5fN+L6wiA+4we9+qQahZ0m63XEA==
+  dependencies:
+    doctrine "^2.0.0"
+    has "^1.0.1"
+    jsx-ast-utils "^2.0.0"
+    prop-types "^15.5.10"
+
+eslint-scope@^3.7.1:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
+  integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7"
+  integrity sha512-MMVl8P/dYUFZEvolL8PYt7qc5LNdS2lwheq9BYa5Y07FblhcZqFyaUqlS8TW5QITGex21tV4Lk0a3fK8lsJIkA==
+  dependencies:
+    ajv "^5.2.0"
+    babel-code-frame "^6.22.0"
+    chalk "^2.1.0"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^3.0.1"
+    doctrine "^2.0.0"
+    eslint-scope "^3.7.1"
+    espree "^3.5.1"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^9.17.0"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    inquirer "^3.0.6"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    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"
+    strip-ansi "^4.0.0"
+    strip-json-comments "~2.0.1"
+    table "^4.0.1"
+    text-table "~0.2.0"
+
+esniff@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/esniff/-/esniff-2.0.1.tgz#a4d4b43a5c71c7ec51c51098c1d8a29081f9b308"
+  integrity sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==
+  dependencies:
+    d "^1.0.1"
+    es5-ext "^0.10.62"
+    event-emitter "^0.3.5"
+    type "^2.7.2"
+
+espree@^3.5.1:
+  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"
+  integrity sha512-OarPfz0lFCiW4/AV2Oy1Rp9qu0iusTKqykwTspGCZtPxmF81JR4MmIebvF1F9+UOKth2ZubLQ4XGGaU+hSn99A==
+
+esprima@^4.0.0, esprima@^4.0.1:
+  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.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+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, event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  integrity sha512-bbB5tEuvC+SuRUG64X8ghvjgiRniuA4WlehWbFnoN4z6TxDXpyX+BMHF7rMgZAqoe+EbyNRUbHN0uuP9phy5jQ==
+  dependencies:
+    original ">=0.0.5"
+
+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:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
+  integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==
+  dependencies:
+    merge "^1.2.0"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  integrity sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==
+  dependencies:
+    cross-spawn "^5.0.1"
+    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"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  integrity sha512-hxx03P2dJxss6ceIeri9cmYOT4SRs3Zk3afZwWpOsRqLqprhTR8u++SlC+sFGsQr7WGFPdMF7Gjc1njDLDK6UA==
+  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 sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==
+  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"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  integrity sha512-AFASGfIlnIbkKPQwX1yHaDjFvh/1gyKJODme52V6IORh69uEYgZp0o9C+qsIGNVEiuuhQU0CSSl++Rlegg1qvA==
+  dependencies:
+    fill-range "^2.1.0"
+
+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 sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+express@^4.16.2:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.3"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.7.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.3.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.3"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.12"
+    proxy-addr "~2.0.7"
+    qs "6.13.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.19.0"
+    serve-static "1.16.2"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+ext@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
+  integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
+  dependencies:
+    type "^2.7.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
+  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 sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
+  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"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+external-editor@^2.0.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    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 sha512-1FOj1LOwn42TMrruOHGt18HemVnbwAmAak7krWk+wa93KXxGbK+2jpezm+ytJYDaBX0/SPLZFHKM7m+tKobWGg==
+  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"
+    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"
+
+extract-text-webpack-plugin@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
+  integrity sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ==
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==
+
+extsprintf@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
+  integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
+
+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"
+  integrity sha512-fueX787WZKCV0Is4/T2cyAdM4+x1S3MXXOAhavE1ys/W42SHAPacLTQhucja22QBYrfGw50M2sRiXPtTGv9Ymw==
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastparse@^1.1.2:
+  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 sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+faye-websocket@~0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^1.8.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.2.tgz#a24cf47827f82d38fb59a69ad70b76e3b6ae7383"
+  integrity sha512-XgitQpaII7LkblC9X8HhfnfuDpyOYSB/Xw8h3Q/gXfMtyL7UICDS1axIlafhwfvKxPjrqnu7EfO7i3A1kH+Rfg==
+  dependencies:
+    bser "1.0.2"
+
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
+  dependencies:
+    bser "2.1.1"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==
+  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 sha512-uXP/zGzxxFvFfcZGgBIwotm+Tdc55ddPAzF7iHshP4YGaXMww7rSF9peD9D1sui5ebONg5UobsZv+FfgEpGv/w==
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-loader@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
+  integrity sha512-RzGHDatcVNpGISTvCpfUfOGpYuSR7HSsSg87ki+wF6rw1Hm0RALPTiAdsxAq1UwLf0RRhbe22/eHK6nhXspiOQ==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
+file-uri-to-path@1.0.0:
+  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"
+  integrity sha512-BTCqyBaWBTsauvnHiE8i562+EdJj+oUpkqWp2R1iCoR8f6oo8STRu3of7WJJ0TqWtxN50a5YFpzYK4Jj9esYfQ==
+
+fileset@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  integrity sha512-UxowFKnAFIwtmSxgKjWAVgjE3Fk7MQJT0ZIyl0NwIFZTrx4913rLaonGJ84V+x/2+w/pe4ULHRns+GZPs1TVuw==
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+filesize@3.5.11:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
+  integrity sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g==
+
+fill-range@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    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"
+  integrity sha512-Z9XSBoNE7xQiV6MSgPuCfyMokH2K7JdpRkOYE1+mu3d4BFJtx3GW+f6Bo4q8IX6rlf5MYbLBKW0pjl2cWdkm2A==
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  integrity sha512-46TFiBOzX7xq/PcSWfFwkyjpemdRnMe31UQF+os0y+1W3k95f6R4SEt02Hj4p3X0Mir9gfrkmOtshFidS0VPUg==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.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 sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==
+  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"
+  integrity sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==
+  dependencies:
+    locate-path "^2.0.0"
+
+flat-cache@^1.2.1:
+  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"
+    graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
+follow-redirects@^1.0.0:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+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 sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha512-SKmowqGTJoPzLO1T0BBJpkfp3EMacCMOuH40hOUbrbzElVktk4DioXVM99QkLCyKoiuOmyjgcWMpVz2xjE7LZw==
+  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"
+  integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
+
+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"
+    mime-types "^2.1.12"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==
+  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=
+
+fs-extra@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  integrity sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  integrity sha512-UvSPKyhMn6LEd/WpUaV9C9t3zATuqoqfWc3QdPhPLb58prN9tqYPlPWi8Krxi44loBoUzlobqZ3+8tGpxxSzwA==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+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.1.3, fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+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 sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+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"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
+
+get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    get-proto "^1.0.0"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+  integrity sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+  integrity sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==
+
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
+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 sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==
+  dependencies:
+    assert-plus "^1.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 sha512-ab1S1g1EbO7YzauaJLkgLp7DZVAqj9M/dvKlTt8DkXA2tiOIcSMrlVI2J1RZyB5iJVccEscjGn+kpOG9788MHA==
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.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 sha512-JDYOvfxio/t42HKdxkAYaCiBN7oYiuxykOxKxdaUW5Qn0zaYN3gRQWolrwdnf0shM9/EP0ebuuTmyoXNr1cC5w==
+  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 sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  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-dirs@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+  integrity sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==
+  dependencies:
+    ini "^1.3.4"
+
+global-modules@1.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 sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globals@^9.17.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==
+
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  integrity sha512-HJRTIH2EeH44ka+LWig+EqT2ONSYpVlNfx6pyd592/VF1TbfljJ7elwie7oSwcViLGqOdWocSdu2txwBF9bjmQ==
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+gopd@^1.0.1, gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  integrity sha512-Y/K3EDuiQN9rTZhBvPRWMLXIKdeD1Rj0nzunfoi0Yyn5WBEbzxXKU9Ub2X41oZBagVWOBU3MuDonFMgPWQFnwg==
+  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"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
+
+gzip-size@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+  integrity sha512-6s8trQiK+OMzSaCSVXX+iqIcLV9tC+E73jrJrJTyS4h/AJhlxHvzFKqM1YLDJWRGgHX8uLkBeXkA0njNj39L4w==
+  dependencies:
+    duplexer "^0.1.1"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+  integrity sha512-Ld9EYcBflMUF6SsJLGDADVH50jSzLNIUUrOFlFGK/zwqimATg9+wY4jsLWCR7DZSxt2BfK0+liHUMdoR11bjLg==
+
+handlebars@^4.0.3:
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.8.tgz#41c42c18b1be2365439188c77c6afae71c0cd9e9"
+  integrity sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.2"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  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"
+  integrity sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    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 sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-bigints@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
+  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==
+
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+  integrity sha512-P+1n3MnwjR/Epg9BBo1KT8qbye2g2Ou4sFumihwt6I4tsUX7jnLcX4BTOSKg/B1ZrIYMN9FcEnG4x5a7NB8Eng==
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
+has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==
+  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"
+  integrity sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==
+  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"
+  integrity sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
+  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
+
+hash-base@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+hash-base@~3.0, hash-base@~3.0.4:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.5.tgz#52480e285395cf7fba17dc4c9e47acdc7f248a8a"
+  integrity sha512-vXm0l45VbcHEVlTCzs8M+s0VeYsB2lnlAaThoLKGXr3bE/VWDOelNUnycUPEhKEaXARL2TEFjBOyUiM6+55KBg==
+  dependencies:
+    inherits "^2.0.4"
+    safe-buffer "^5.2.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:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+hasown@^2.0.0, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@1.2.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
+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 sha512-ycURW7oUxE2sNiPVw1HVEFsW+ecOpJ5zaj7eC0RlwhibhRBod20muUN8qu/gzx956YrLolVvs1MTXwKgC2rVEg==
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+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.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+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-comment-regex@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
+
+html-encoding-sniffer@^1.0.1:
+  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.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
+  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
+
+html-minifier@^3.2.3:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  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@2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz#e987f421853d3b6938c8c4c8171842e5fd17af23"
+  integrity sha512-XgOxN8H7nDeLQzD9FQOWWQLVL0GDq5reeREx8jpLZcEZND7kM5j3o/mFhjOcSfZ89HwU3+yBqSQyK7ZvvYFZ/w==
+  dependencies:
+    bluebird "^3.4.7"
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    toposort "^1.0.0"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+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@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+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.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
+  integrity sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==
+
+http-proxy-middleware@~0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
+  integrity sha512-JtH3UZju4oXDdca28/kknbm/CFmt35vy0YV0PNOMWWWpn3rT9WV95IXN451xwBGSjy9L0Cah1O9TCMytboLdfw==
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy@^1.16.2:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  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"
+  integrity sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==
+  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"
+  integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
+
+iconv-lite@0.4.24, iconv-lite@^0.4.17:
+  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.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 sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==
+
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  integrity sha512-bsVoyn/1V4R1kYYjLcWLedozAM4FClZUdjE9nIr8uWY7xs78y9DATgwz2wGU7M+7z55KenmmTkN2DVJ7bqzjAA==
+  dependencies:
+    postcss "^6.0.1"
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore@^3.3.3:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==
+
+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  integrity sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==
+  dependencies:
+    pkg-dir "^2.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 sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==
+  dependencies:
+    repeating "^2.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==
+
+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.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, 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.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:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+inquirer@3.3.0, inquirer@^3.0.6:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.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"
+    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"
+    through "^2.3.6"
+
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  integrity sha512-DzGfTasXPmwizQP4XV2rR6r2vp8TjlOpMnJqG9Iy2i1pl1lkZdZj5rSpIc7YFGX2nS46PPgAGEyT+Q5hE2FB2g==
+  dependencies:
+    meow "^3.3.0"
+
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
+interpret@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
+
+invariant@^2.2.2:
+  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 sha512-xgs2NH9AE66ucSq4cNG1nhSFghr5l6tdL15Pk+jl46bmmBapgoaY/AacXyaDznAqmGL99TiLSQgO/XazFSKYeQ==
+
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
+
+ipaddr.js@1.9.1:
+  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@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha512-vOx7VprsKyllwjSkLV79NIhpyLfr3jAp7VaTCMXOJHu4m0Ew1CZ2fcjASwmV1jI3BWuWHB013M48eyeldk9gYg==
+
+is-accessor-descriptor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.1.tgz#3223b10628354644b86260db29b3e693f5ceedd4"
+  integrity sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==
+  dependencies:
+    hasown "^2.0.0"
+
+is-arguments@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.2.0.tgz#ad58c6aecf563b78ef2bf04df540da8f5d7d8e1b"
+  integrity sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+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-async-function@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.1.0.tgz#1d1080612c493608e93168fc4458c245074c06a6"
+  integrity sha512-GExz9MtyhlZyXYLxzlJRj5WUCE661zhDa1Yna52CN57AJsymh+DvXXjyveSioqSRdxvUrdKdvqB1b5cVKsNpWQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
+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 sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.1.tgz#c20d0c654be05da4fbc23c562635c019e93daf89"
+  integrity sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^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"
+  integrity sha512-C2wz7Juo5pUZTFQVer9c+9b4qw3I5T/CHQxQyhVu7BJel6C22FmsLIWsdseYyOw6xz9Pqy9eJWSkQ7+3iN1HVw==
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.1.3, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-ci@^1.0.10:
+  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.5.0"
+
+is-core-module@^2.13.0, is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-descriptor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.1.tgz#2109164426166d32ea38c405c1e0945d9e6a4eeb"
+  integrity sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==
+  dependencies:
+    hasown "^2.0.0"
+
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-descriptor@^0.1.0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.7.tgz#2727eb61fd789dcd5bdf0ed4569f551d2fe3be33"
+  integrity sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==
+  dependencies:
+    is-accessor-descriptor "^1.0.1"
+    is-data-descriptor "^1.0.1"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.3.tgz#92d27cb3cd311c4977a4db47df457234a13cb306"
+  integrity sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==
+  dependencies:
+    is-accessor-descriptor "^1.0.1"
+    is-data-descriptor "^1.0.1"
+
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+  integrity sha512-9YclgOGtN/f8zx0Pr4FQYMdibBiTaH3sn52vjYip4ZSf6C4/6RfTEZ+MR4GvKhCxdPh21Bg42/WL55f6KSnKpg==
+
+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 sha512-0EygVC5qPvIyb+gSz7zdD5/AAoS6Qrx1e//6N4yv4oNm30kqvdmG66oZFWVlQHUWe5OjP08FuTw2IdT0EOTcYA==
+  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 sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
+
+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 sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww==
+
+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-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-finite@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
+
+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 sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==
+  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 sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
+
+is-generator-function@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
+  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.0"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+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 sha512-a1dBeB19NXsf/E0+FHqkagizel/LQw2DjSQpvQrj3zT+jYPpaUCryPnrQajXKFLCMuf4I6FhRpaGtw4lPrG6Eg==
+  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 sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, 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 sha512-ERNhMg+i/XgDwPIPF3u24qpajVreaiSuvpb1Uu0jugw7KKcxGyCX8cgp8P5fwTmAuXku6beDHHECdKArjlg7tw==
+  dependencies:
+    global-dirs "^0.1.0"
+    is-path-inside "^1.0.0"
+
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+  integrity sha512-9r39FIr3d+KD9SbX0sfMsHzb5PP3uimOiwr3YupUaUFG4W0l1U57Rx3utpttV7qz5U3jmrO5auUa04LU9pyHsg==
+
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==
+  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 sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==
+  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"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
+
+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"
+  integrity sha512-cnS56eR9SPAscL77ik76ATVqoPARTqPIVkMDVxRaWH06zT+6+CzIroYRJ0VVvm0Z1zfAvxvz9i/D3Ppjaqt5Nw==
+
+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"
+  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
+  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"
+  integrity sha512-qhsCR/Esx4U4hg/9I19OVUAJkGWtjRYHMRgUMZE2TDdj+Ag+kttZanLupfddNyglzz50cUlmWzUaI37GDfNx/g==
+  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"
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
+
+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-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 sha512-Yu68oeXJ7LeWNmZ3Zov/xg/oDBnBK2RNxwYY1ilNJX+tKKZqgPK+qOn/Gs9jEu66KDY9Netf5XLKNGzas/vPfQ==
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+  integrity sha512-N3w1tFaRfk3UrPfqeRyD+GYDASU3W5VinKhlORy8EWVf/sIdDL9GAcew85XmktCfH+ngG7SRXEVDoO18WMdB/Q==
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+  integrity sha512-cr/SlUEe5zOGmzvj9bUyC4LVvkNVAXu4GytXLNMr1pny+a65MpQ9IJzFHD5vi7FyJgb4qt27+eS3TuQnqB+RQw==
+
+is-regex@^1.1.4, is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-resolvable@^1.0.0:
+  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.2.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
+  integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
+
+is-root@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5"
+  integrity sha512-1d50EJ7ipFxb9bIx213o6KPaJmHN8f+nR48UZWxWVzDx+NA3kpscxi02oQX3rGkEaLBi9m3ZayHngQc3+bBX9w==
+
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-stream@^1.0.0, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
+
+is-string@^1.0.7, is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  integrity sha512-Ya1giYJUkcL/94quj0+XGcmts6cETPBW1MiFz1ReJrnDJ680F52qpAEGAEGU0nq96FRGIGPx6Yo1CyPXcOoyGw==
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2, is-weakref@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.0.tgz#47e3472ae95a63fa9cf25660bcf0c181c39770ef"
+  integrity sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==
+  dependencies:
+    call-bound "^1.0.2"
+
+is-weakset@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+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 sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
+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=
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+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 sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
+  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 sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
+
+istanbul-api@^1.1.1:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.7.tgz#a86c770d2b03e11e3f778cd7aedd82d2722092aa"
+  integrity sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.2.1"
+    istanbul-lib-hook "^1.2.2"
+    istanbul-lib-instrument "^1.10.2"
+    istanbul-lib-report "^1.1.5"
+    istanbul-lib-source-maps "^1.2.6"
+    istanbul-reports "^1.5.1"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+
+istanbul-lib-hook@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz#bc6bf07f12a641fbf1c85391d0daa8f0aea6bf86"
+  integrity sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.10.2, istanbul-lib-instrument@^1.4.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+  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.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz#f2a657fc6282f96170aaf281eb30a458f7f4170c"
+  integrity sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==
+  dependencies:
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz#37b9ff661580f8fca11232752ee42e08c6675d8f"
+  integrity sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.5.1.tgz#97e4dbf3b515e8c484caea15d6524eebd3ff4e1a"
+  integrity sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==
+  dependencies:
+    handlebars "^4.0.3"
+
+jest-changed-files@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-20.0.3.tgz#9394d5cc65c438406149bef1bf4d52b68e03e3f8"
+  integrity sha512-3o76mBdqPXN5zrak+U9ldALWgYlQQgKh8vQL3nsQO/seybjPqsp2Qp0pGGvVeMOaiwCbOZCrOvb3D8QhG/9Ccw==
+
+jest-cli@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-20.0.4.tgz#e532b19d88ae5bc6c417e8b0593a6fe954b1dc93"
+  integrity sha512-OfQTkV6T5+V+c3hbzGVJl1SqTOmIw7dBIZYl6XDdSNOmhoyCmwNh/dsEs0lgqIMZkF+AeLbRswkH91XBVXyKqg==
+  dependencies:
+    ansi-escapes "^1.4.0"
+    callsites "^2.0.0"
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    is-ci "^1.0.10"
+    istanbul-api "^1.1.1"
+    istanbul-lib-coverage "^1.0.1"
+    istanbul-lib-instrument "^1.4.2"
+    istanbul-lib-source-maps "^1.1.0"
+    jest-changed-files "^20.0.3"
+    jest-config "^20.0.4"
+    jest-docblock "^20.0.3"
+    jest-environment-jsdom "^20.0.3"
+    jest-haste-map "^20.0.4"
+    jest-jasmine2 "^20.0.4"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve-dependencies "^20.0.3"
+    jest-runtime "^20.0.4"
+    jest-snapshot "^20.0.3"
+    jest-util "^20.0.3"
+    micromatch "^2.3.11"
+    node-notifier "^5.0.2"
+    pify "^2.3.0"
+    slash "^1.0.0"
+    string-length "^1.0.1"
+    throat "^3.0.0"
+    which "^1.2.12"
+    worker-farm "^1.3.1"
+    yargs "^7.0.2"
+
+jest-config@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-20.0.4.tgz#e37930ab2217c913605eff13e7bd763ec48faeea"
+  integrity sha512-9urceXnsfO+DXNGrzeDFKx/IAFpUljbvaiPZEn1sWuF97QN0Ppt7yXmnPoAOylwxpNK1t9lWUER5eeoH63rPCA==
+  dependencies:
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    jest-environment-jsdom "^20.0.3"
+    jest-environment-node "^20.0.3"
+    jest-jasmine2 "^20.0.4"
+    jest-matcher-utils "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-validate "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-diff@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-20.0.3.tgz#81f288fd9e675f0fb23c75f1c2b19445fe586617"
+  integrity sha512-DITOXlTg0HDL9QKiVpf82vDu/nva60/V9xp056zjnAYpHVTZlJgfLMIHJmgPCoSu0+7n7QUAfxyFUHUGyHLFSw==
+  dependencies:
+    chalk "^1.1.3"
+    diff "^3.2.0"
+    jest-matcher-utils "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-diff@^29.4.1:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
+  integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.6.3"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-docblock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
+  integrity sha512-lHwefzd+CB38Awy4yiWb8he+ovUXjNeuN4tNQ1sa6/vBh6P7XwpiuSDIs4GH6/yE1uDBUaYiaf/msD7cWMTL7g==
+
+jest-environment-jsdom@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-20.0.3.tgz#048a8ac12ee225f7190417713834bb999787de99"
+  integrity sha512-SSm2oCtH0kBYdXhEMzZDFM4GU/auz4x7yv8AGduAZSZP5loKYHLNoKfVlyN1iFQ+vCJ+1QSS+sVnUARSwaBqbw==
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+    jsdom "^9.12.0"
+
+jest-environment-node@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-20.0.3.tgz#d488bc4612af2c246e986e8ae7671a099163d403"
+  integrity sha512-kVwkLhrGd1toaMHHtVIM2qleNTBDrFUZ6Qjv0GEfd75DK2P0H24xVVMA83H0PEkNbGl2EbjF/CeAIJSN3LagBw==
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+
+jest-get-type@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
+  integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
+
+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"
+  integrity sha512-0IKAQjUvuZjMCNi/0VNQQF74/H9KB67hsHJqGiwTWQC6XO5Azs7kLWm+6Q/dwuhvDUvABDOBMFK2/FwZ3sZ07Q==
+  dependencies:
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.11"
+    jest-docblock "^20.0.3"
+    micromatch "^2.3.11"
+    sane "~1.6.0"
+    worker-farm "^1.3.1"
+
+jest-jasmine2@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-20.0.4.tgz#fcc5b1411780d911d042902ef1859e852e60d5e1"
+  integrity sha512-XNHvFt9iljOaSSZU5t5dC9kJtrcM+KnVbw0Qa/BpGZlrorqS+m0iWiAJO2xXcGMimCmhT4NLZAS1v/JBGWR8Cg==
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-matchers "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-snapshot "^20.0.3"
+    once "^1.4.0"
+    p-map "^1.1.1"
+
+jest-matcher-utils@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz#b3a6b8e37ca577803b0832a98b164f44b7815612"
+  integrity sha512-eSNh2n3aXULZUbherq5+lZVdpUau8sniowi1tcc1ZueBk/97avAwwoDwBVvxI9JINVrPTsCI51SiQtrjBkVvPw==
+  dependencies:
+    chalk "^1.1.3"
+    pretty-format "^20.0.3"
+
+jest-matchers@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matchers/-/jest-matchers-20.0.3.tgz#ca69db1c32db5a6f707fa5e0401abb55700dfd60"
+  integrity sha512-aDlp50L8qPJ+Y+tifrlKewT0ZU1uC9OP7GJ5T0UKSw/wB73wf6jKEAZUqyA67BocW8BZD7qVVWHasm7u2D1CMQ==
+  dependencies:
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+
+jest-message-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-20.0.3.tgz#6aec2844306fcb0e6e74d5796c1006d96fdd831c"
+  integrity sha512-p4UQLFjZmXw9Optr6c0aAIDN622+tdVW9XjaCODww/Y8MRGo1S60CICl0Jb4XdJWmMkmD07osWc6aElLxo0mDg==
+  dependencies:
+    chalk "^1.1.3"
+    micromatch "^2.3.11"
+    slash "^1.0.0"
+
+jest-mock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-20.0.3.tgz#8bc070e90414aa155c11a8d64c869a0d5c71da59"
+  integrity sha512-Edmuskld6ImmUuqxhbwwX5fDXQlFC/fe3XcZKVwK9SnbetIFyivTaub71ZbL5uuWdkvr4VggcyxlhdnpsIlRvg==
+
+jest-regex-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-20.0.3.tgz#85bbab5d133e44625b19faf8c6aa5122d085d762"
+  integrity sha512-WVFSnROOYgYA+AyTytpZA93EEv16DfPkkR8V8okVQjirXLfRs9n451BPgiiUJSHIyJv+OQ4El0+q16hyY1dEdA==
+
+jest-resolve-dependencies@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-20.0.3.tgz#6e14a7b717af0f2cb3667c549de40af017b1723a"
+  integrity sha512-k0DK242umC88ih4KKH1jVlXBulQJfOmMXV/nMMfqRgeFKbBYfUROLZkz0zr8TON5WfnuiHV5GotqE0pXoqg08A==
+  dependencies:
+    jest-regex-util "^20.0.3"
+
+jest-resolve@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-20.0.4.tgz#9448b3e8b6bafc15479444c6499045b7ffe597a5"
+  integrity sha512-n/u93CugulXmQ8FcHHGv1kUEFagsbXsJgKLK2G4eAdmawHObAc6DgJtOVp9hgNJOGRU6c6ozdB5nzMO02Fecig==
+  dependencies:
+    browser-resolve "^1.11.2"
+    is-builtin-module "^1.0.0"
+    resolve "^1.3.2"
+
+jest-runtime@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-20.0.4.tgz#a2c802219c4203f754df1404e490186169d124d8"
+  integrity sha512-NTGhGRKhfM19w0egxges3hhIO8gPXB2H6Txaie3+AZIHF+VZCItH27uEFzU6cQTdwzcWaiieYgCAfGKNeUUf7g==
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^20.0.3"
+    babel-plugin-istanbul "^4.0.0"
+    chalk "^1.1.3"
+    convert-source-map "^1.4.0"
+    graceful-fs "^4.1.11"
+    jest-config "^20.0.4"
+    jest-haste-map "^20.0.4"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-util "^20.0.3"
+    json-stable-stringify "^1.0.1"
+    micromatch "^2.3.11"
+    strip-bom "3.0.0"
+    yargs "^7.0.2"
+
+jest-snapshot@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-20.0.3.tgz#5b847e1adb1a4d90852a7f9f125086e187c76566"
+  integrity sha512-oapnAnOloz9Lv2r44TtiAQiPT2f6NdLFvK6mW3hnGStfDjstnbHAxG0f/tUhXr81BcmZvz03hsMMInKi9bHG0Q==
+  dependencies:
+    chalk "^1.1.3"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-util "^20.0.3"
+    natural-compare "^1.4.0"
+    pretty-format "^20.0.3"
+
+jest-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-20.0.3.tgz#0c07f7d80d82f4e5a67c6f8b9c3fe7f65cfd32ad"
+  integrity sha512-Ig/4sAywd/7YJe3jUOIyj+NaX7NCQnxMc/lfRezvbkceZDye0mch126UfIzqyBdS2gjxQl7S8yERvcZDMvK1NA==
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-message-util "^20.0.3"
+    jest-mock "^20.0.3"
+    jest-validate "^20.0.3"
+    leven "^2.1.0"
+    mkdirp "^0.5.1"
+
+jest-validate@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-20.0.3.tgz#d0cfd1de4f579f298484925c280f8f1d94ec3cab"
+  integrity sha512-yIpGo3le6q+ZPID2UCl58FRM4ZVGZK9qu1RaWSbEnZFUcj08XznJWd6g2HbPqsWCY9abBO3hq2aP5GZveEfGUg==
+  dependencies:
+    chalk "^1.1.3"
+    jest-matcher-utils "^20.0.3"
+    leven "^2.1.0"
+    pretty-format "^20.0.3"
+
+jest@20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-20.0.4.tgz#3dd260c2989d6dad678b1e9cc4d91944f6d602ac"
+  integrity sha512-MU1kGBtzhDHwasL1BbuFmlIlwseDXy18p/M3hB7ehifac8FCbj6nJf8ihGtBA594tlUcktotHHd8z42V47ZB1g==
+  dependencies:
+    jest-cli "^20.0.4"
+
+js-base64@^2.1.9:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
+
+"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-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  integrity sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==
+
+js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  integrity sha512-eIlkGty7HGmntbV6P/ZlAsoncFLGsNoM27lkTzS+oneY/EiNhj+geqD9ezg/ip+SW6Var0BJU2JtV0vEUZpWVQ==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
+
+jsdom@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+  integrity sha512-Qw4oqNxo4LyzkSqVIyCnEltTc4xV3g1GBaI88AvYTesWzmWHUSoMNmhBjUBa+6ldXIBJS9xoeLNJPfUAykTyxw==
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.1"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+  integrity sha512-Mke0DA0QjUWuJlhsE0ZPPhYiJkRap642SmI/4ztCFaUs6V2AiH1sfecc+57NgaryfAA2VR3v6O+CSjC1jZJKOA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
+
+json-loader@^0.5.4:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+  integrity sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
+
+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 sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA==
+
+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.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
+
+json-stable-stringify@^1.0.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.2.1.tgz#addb683c2b78014d0b78d704c2fcbdf0695a60e2"
+  integrity sha512-Lp6HbbBgosLmJbjx0pBLbgvx68FaFU1sdkmBuckmhhJ88kL13OA51CDtR2yJB50eCNMH9wRqtQNNiAqQH4YXnA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.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 sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
+
+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.0, json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==
+
+json5@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  integrity sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  integrity sha512-oBko6ZHlubVB5mRFkur5vgYR1UyqX+S6Y/oCfLhqNdcc2fYFlDpIoNc7AfKS1KOGcnNAkvsr0grLck9ANM815w==
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@^0.0.1, jsonify@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
+
+jsprim@^1.2.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
+  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.4.0"
+    verror "1.10.0"
+
+jsx-ast-utils@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
+  integrity sha512-0LwSmMlQjjUdXsdlyYhEfBJCn2Chm0zgUBmfmf1++KUULh+JOdlzrZfiwe2zmlVJx44UF+KX/B/odBoeK9hxmw==
+
+jsx-ast-utils@^2.0.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
+  dependencies:
+    array-includes "^3.1.1"
+    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"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
+
+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"
+  integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
+  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 sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  integrity sha512-TED5xi9gGQjGpNnvRWknrwAB1eL5GciPfVFOt3Vk1OJCVDQbzuSfrF3hkUQKlsgKrG1F+0t5W0m+Fje1jIt8rw==
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  integrity sha512-Be1YRHWWlZaSsrz2U+VInk+tO0EwLIyV+23RhWLINJYwg/UIikxjlj3MhH37/6/EDCAusjajvMkMMUXRaMWl/w==
+  dependencies:
+    package-json "^4.0.0"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  integrity sha512-YiGkH6EnGrDGqLMITnGjXtGmNtjoXw9SVUzcaos8RBi7Ps0VBylkq+vOcY9QE5poLasPCR849ucFUkl0UzUyOw==
+  dependencies:
+    invert-kv "^1.0.0"
+
+leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+  integrity sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==
+
+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 sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+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 sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+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"
+  integrity sha512-3p6ZOGNbiX4CdvEd1VcE6yi78UrGNpjHO33noGwHCnT/o2fyllJDepsm8+mFFv/DvtwFHht5HIHSyOy5a+ChVQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+loader-fs-cache@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9"
+  integrity sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "^0.5.1"
+
+loader-runner@^2.3.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@^0.2.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  integrity sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+loader-utils@^1.0.2, loader-utils@^1.1.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.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 sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==
+  dependencies:
+    p-locate "^2.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"
+  integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+  integrity sha512-RWjUhzGbzG/KfDwk+onqdXvrsNv47G9UCMJgSKalPTSqJQyxZhQophG9jgqLf+15TIbZ5a/yG2YKOWsH3dVy9A==
+
+lodash.defaults@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+  integrity sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==
+
+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.template@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
+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@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loglevel@^1.4.1:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.2.tgz#c2e028d6c757720107df4e64508530db6621ba08"
+  integrity sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==
+
+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"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  integrity sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.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"
+  integrity sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==
+
+lowercase-keys@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
+
+lru-cache@^4.0.1:
+  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"
+
+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"
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==
+
+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 sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==
+  dependencies:
+    object-visit "^1.0.0"
+
+math-expression-evaluator@^1.2.14:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.4.0.tgz#3d66031117fbb7b9715ea6c9c68c2cd2eebd37e2"
+  integrity sha512-4vRUvPyxdO8cWULGTh9dZWL2tZK6LDBvj+OGHBER7poH9Qdt7kXEoj20wiz4lQUbUXQZFjPbe5mVDo9nutizCw==
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+math-random@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
+  integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
+
+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"
+
+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 sha512-nOBDrc/wgpkd3X/JOhMqYR+/eLqlfLP4oQfoBA6QExIxEl+GU01oyEkwWyueyO8110pUKijtiHGhEmYoOn88oQ==
+  dependencies:
+    mimic-fn "^1.0.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"
+  integrity sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  integrity sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==
+  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.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+merge@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
+  integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
+
+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:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  integrity sha512-LnU2XFEk9xxSJ6rfgAry/ty5qwUTyHYOBU0g4R6tIw5ljwgGIBmiKhRWLw5NpMOnrgUNcDJ4WMp8rl3sYVHLNA==
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+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"
+    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"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.44.0:
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+"mime-db@>= 1.43.0 < 2":
+  version "1.45.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.45.0.tgz#cceeda21ccd7c3a745eba2decd55d4b73e7879ea"
+  integrity sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==
+
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.24:
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+  dependencies:
+    mime-db "1.44.0"
+
+mime-types@~2.1.19, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime@1.6.0, mime@^1.4.1, mime@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
+
+minimatch@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  integrity sha512-NyXjqu1IwcqH6nv5vmMtaG3iw7kdV3g6MwlUBZkc3Vn5b5AMIWYKfptvzipoyFfhlfOgBQ9zoTxQMravF1QTnw==
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+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@^1.1.1, minimist@^1.1.3, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mixin-deep@^1.2.0:
+  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.1, mkdirp@^0.5.6, mkdirp@~0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.3, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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 sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ==
+
+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"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==
+
+nan@^2.12.1:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.22.0.tgz#31bc433fc33213c97bad36404bb68063de604de3"
+  integrity sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==
+
+nanomatch@^1.2.9:
+  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-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"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+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==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+negotiator@~0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.4.tgz#777948e2452651c570b712dd01c23e262713fff7"
+  integrity sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==
+
+neo-async@^2.5.0, neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+next-tick@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
+  dependencies:
+    lower-case "^1.1.1"
+
+node-forge@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
+  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
+
+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@^2.0.0:
+  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-notifier@^5.0.2:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.5.tgz#0cbc1a2b0f658493b4025775a13ad938e96091ef"
+  integrity sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  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"
+    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 sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0, 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-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+normalize-url@^1.4.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  integrity sha512-A48My/mtCklowHBlI8Fq2jFWK4tX4lJ5E6ytFsSOq1fzpvT0SQSgKhSg7lN5c2uYFOrUAOQp6zhhJnpp1eMloQ==
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.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 sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==
+  dependencies:
+    path-key "^2.0.0"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  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"
+  integrity sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==
+
+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 sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
+  integrity sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==
+
+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.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-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-hash@^1.1.4:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
+object-inspect@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
+  integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
+
+object-is@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
+  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==
+  dependencies:
+    isobject "^3.0.0"
+
+object.assign@^4.1.0, object.assign@^4.1.4, object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  integrity sha512-UiAM5mhmIuKLsOvrL+B0U2d1hXHF3bFYWIuH1LMpuV2EJEHG1Ntz06PgLEHjm6VFd87NpH8rastvPoyv6UW2fA==
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
+  dependencies:
+    isobject "^3.0.1"
+
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==
+  dependencies:
+    mimic-fn "^1.0.0"
+
+opn@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.2.0.tgz#71fdf934d6827d676cecbea1531f95d354641225"
+  integrity sha512-Jd/GpzPyHF4P2/aNOVmS3lfMSWV9J7cOhCG1s08XCEAsPkB7lp6ddiU0J7XzyQRDUh8BqJ7PchfINjR8jyofRQ==
+  dependencies:
+    is-wsl "^1.1.0"
+
+opn@^5.1.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"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  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"
+
+original@>=0.0.5:
+  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 sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  integrity sha512-PRT7ZORmwu2MEFt4/fv3Q+mEfN4zetKxufQrkShY2oGvUms9r8otu5HfdyIFHkYXjO7laNsoVGmM2MANfuTA8g==
+  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-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 sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^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 sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
+
+p-limit@^1.1.0:
+  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-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==
+
+package-json@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
+  integrity sha512-q/R5GrMek0vzgoomq6rm9OX+3PQve8sLwTirmK30YB3Cu0Bbt9OX9M/SIUnroN5BGJkzwGsFwDaRGD9EwBOlCA==
+  dependencies:
+    got "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==
+  dependencies:
+    no-case "^2.2.0"
+
+parse-asn1@^5.0.0, parse-asn1@^5.1.7:
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.7.tgz#73cdaaa822125f9647165625eb45f8a051d2df06"
+  integrity sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==
+  dependencies:
+    asn1.js "^4.10.1"
+    browserify-aes "^1.2.0"
+    evp_bytestokey "^1.0.3"
+    hash-base "~3.0"
+    pbkdf2 "^3.1.2"
+    safe-buffer "^5.2.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  integrity sha512-FC5TeK0AwXzq3tUBFtH74naWkPQCEWs4K+xMxWZBlKDWu0bVHXGZa+KKqxKidd7xwhdZ19ZNuF2uO1M/r196HA==
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==
+  dependencies:
+    error-ex "^1.2.0"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+  integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
+
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+  integrity sha512-w2jx/0tJzvgKwZa58sj2vAYq/S/K1QJfIB3cWYea/Iu1scFPDQQ3IQiVZTHWtRBwAjv2Yd7S/xeZf3XqLDb3bA==
+
+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 sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==
+
+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 sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==
+  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 sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
+
+path-parse@^1.0.5, path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
+
+path-to-regexp@^1.0.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.9.0.tgz#5dc0753acbf8521ca2e0f137b4578b917b10cf24"
+  integrity sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==
+  dependencies:
+    isarray "0.0.1"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  integrity sha512-dUnb5dXUf+kzhC/W/F4e5/SkluXIFf5VUHolW1Eg1irn1hGWjPGdsRcvYJ1nD6lhk8Ir7VM0bHJKsYTx8Jx9OQ==
+  dependencies:
+    pify "^2.0.0"
+
+pbkdf2@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  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"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+pify@^2.0.0, pify@^2.3.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 sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==
+  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 sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  integrity sha512-c6pv3OE78mcZ92ckebVDqg0aWSoKhOTbwCV6qbCWMk546mAL9pZln0+QsN/yQ7fkucd4+yJPLrCBXNt8Ruk+Eg==
+  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"
+  integrity sha512-ojakdnUgL5pzJYWw2AIDEupaQCX5OPbM688ZevubICjdIX01PRSYKqm33fJoCOJBRseYCTUlQRnBNX+Pchaejw==
+  dependencies:
+    find-up "^2.1.0"
+
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
+
+portfinder@^1.0.9:
+  version "1.0.32"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
+  integrity sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==
+  dependencies:
+    async "^2.6.4"
+    debug "^3.2.7"
+    mkdirp "^0.5.6"
+
+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 sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  integrity sha512-iBcptYFq+QUh9gzP7ta2btw50o40s4uLI4UDVgd5yRAZtUDWc5APdl5yQDd2h/TyiZNbJrv0HiYhT102CMgN7Q==
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  integrity sha512-XXitQe+jNNPf+vxvQXIQ1+pvdQKWKgkx8zlJNltcMEmLma1ypDRDQwlLt+6cP26fBreihNhZxohh1rcgCH2W5w==
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  integrity sha512-SE7mf25D3ORUEXpu3WUqQqy0nCbMuM5BEny+ULE/FXdS/0UMA58OdzwvzuHJRpIFlk1uojt16JhaEogtP6W2oA==
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  integrity sha512-yGbyBDo5FxsImE90LD8C87vgnNlweQkODMkUZlDVM/CBgLr9C5RasLGJxxh9GjVOBeG8NcCMatoqI1pXg8JNXg==
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+  integrity sha512-+lk5W1uqO8qIUTET+UETgj9GWykLC3LOldr7EehmymV0Wu36kyoHimC4cILrAAYpHQ+fr4ypKcWcVNaGzm0reA==
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  integrity sha512-IBFoyrwk52dhF+5z/ZAbzq5Jy7Wq0aLUsOn69JNS+7YeuyHaNzJwBIYE0QlUH/p5d3L+OON72Fsexyb7OK/3og==
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  integrity sha512-IyKoDL8QNObOiUc6eBw8kMxBHCfxUaERYTUe2QF8k7j/xiirayDzzkmlR6lMQjrAM1p1DDRTvWrS7Aa8lp6/uA==
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  integrity sha512-nCbFNfqYAbKCw9J6PSJubpN9asnrwVLkRDFc4KCwyUEdOtM5XDE/eTW3OpqHrYY1L4fZxgan7LLRAAYYBzwzrg==
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec"
+  integrity sha512-T53GVFsdinJhgwm7rg1BzbeBRomOg9y5MBVhGcsV0CxurUdVj1UlPdKtn7aqYA/c/QVkzKMjq2bSV5dKG5+AwQ==
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-flexbugs-fixes@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.2.0.tgz#9b8b932c53f9cf13ba0f61875303e447c33dcc51"
+  integrity sha512-0AuD9HG1Ey3/3nqPWu9yqf7rL0KCPu5VgjDsjf5mzEcuo9H/z8nco/fljKgjsOUrZypa95MI0kS4xBZeBzz2lw==
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  integrity sha512-3fpCfnXo9Qd/O/q/XL4cJUhRsqjVD2V1Vhy3wOEcLE5kz0TGtdDXJSoiTdH4e847KphbEac4+EZSH4qLRYIgLw==
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  integrity sha512-WKS5LJMZLWGwtfhs5ahb2ycpoYF3m0kK4QEaM+elr5EpiMt0H296P/9ETa13WXzjPwB0DDTBiUBBWSHoApQIJg==
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  integrity sha512-/WGUMYhKiryWjYO6c7kAcqMuD7DVkaQ8HcbQenDme/d3OBOmrYMFObOKgUWyUy1uih5U2Dakq8H6VcJi5C9wHQ==
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.8.tgz#8c67ddb029407dfafe684a406cfc16bad2ce0814"
+  integrity sha512-KtXBiQ/r/WYW8LxTSJK7h8wLqvCMSub/BqmRnud/Mu8RzwflW9cmXxwsMwbn15TNv287Hcufdb3ZSs7xHKnG8Q==
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.3.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  integrity sha512-9DHmfCZ7/hNHhIKnNkz4CU0ejtGen5BbTRJc13Z2uHfCedeCUsK2WEQoAJRBL+phs68iWK6Qf8Jze71anuysWA==
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  integrity sha512-ma7YvxjdLQdifnc1HFsW/AW6fVfubGyR+X4bE3FOSdBVMY9bZjKVdklHT+odknKBB7FSCfKIHC3yHK7RUAqRPg==
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  integrity sha512-Wgg2FS6W3AYBl+5L9poL6ZUISi5YzL+sDCJfM7zNw/Q1qsyVQXXZ2cbVui6mu2cYJpt1hOKCGj1xA4mq/obz/Q==
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+  integrity sha512-tPLZzVAiIJp46TBbpXtrUAKqedXSyW5xDEo1sikrfEfnTs+49SBZR/xDdqCiJvSSbtr615xDsaMF3RrxS2jZlA==
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  integrity sha512-vFSPzrJhNe6/8McOLU13XIsERohBJiIFFuC1PolgajOZdRWqRgKITP/A4Z/n4GQhEmtbxmO9NDw3QLaFfE1dFQ==
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  integrity sha512-DZhT0OE+RbVqVyGsTIKx84rU/5cury1jmwPa19bViqYPQu499ZU831yMzzsyC8EhiZVd73+h5Z9xb/DdaBpw7Q==
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  integrity sha512-hhJdMVgP8vasrHbkKAk+ab28vEmPYgyuDzRl31V3BEB3QOR3L5TTIVEWLDNnZZ3+fiTi9d6Ker8GM8S1h8p2Ow==
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  integrity sha512-e13vxPBSo3ZaPne43KVgM+UETkx3Bs4/Qvm6yXI9HQpQp4nyb7HZ0gKpkF+Wn2x+/dbQ+swNpCdZSbMOT7+TIA==
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.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.0.1:
+  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 sha512-X4cquUPIaAd86raVrBwO8fwRfkIdbwFu7CTfEOjiZQHVQwlHRSkTgH5NLDmMm5+1hQO8u6dZ+TOOJDbay1hYpA==
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-scope@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha512-LTYwnA4C1He1BKZXIx1CYiHixdSe9LWYVKadq9lK5aCCMkoOkFyZ7aigt+srfjlRplJY3gIol6KUNefdMQJdlw==
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-values@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha512-i7IFaR9hlQ6/0UgFuqM6YWaCfA1Ej8WMg8A5DggnH1UGKJvTV/ugqq/KaULixzzOi3T/tF6ClBXcHGCzdd5unA==
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  integrity sha512-RKgjEks83l8w4yEhztOwNZ+nLSrJ+NvPNhpS+mVDzoaiRHZQVoG7NF2TP5qjwnaN9YswUhj6m1E0S0Z+WDCgEQ==
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  integrity sha512-WqtWG6GV2nELsQEFES0RzfL2ebVwmGl/M8VmMbshKto/UClBo+mznX8Zi4/hkThdqx7ijwv+O8HWPdpK7nH/Ig==
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  integrity sha512-5RB1IUZhkxDCfa5fx/ogp/A82mtq+r7USqS+7zt0e428HJ7+BHCxyeY39ClmkkUtxdOd3mk8gD6d9bjH2BECMg==
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  integrity sha512-0+Ow9e8JLtffjumJJFPqvN4qAvokVbdQPnijUDSOX8tfTwrILLP4ETvrZcXZxAtpFLh/U0c+q8oRMJLr1Kiu4w==
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  integrity sha512-jJFrV1vWOPCQsIVitawGesRgMgunbclERQ/IRGW7r93uHrVzNQQmHQ7znsOIjJPZ4yWMzs5A8NFhp3AkPHPbDA==
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  integrity sha512-lGgRqnSuAR5i5uUg1TA33r9UngfTadWxOyL2qx1KuPoCQzfmtaHjp9PuwX7yVyRxG3BWBzeFUaS5uV9eVgnEgQ==
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  integrity sha512-3pqyakeGhrO0BQ5+/tGTfvi5IAUAhHRayGK8WFSu06aEv2BmHoXw/Mhb+w7VY5HERIuC+QoUI7wgrCcq2hqCVA==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  integrity sha512-y5AdQdgBoF4rbpdbeWAJuxE953g/ylRfVNp6mvAi61VCN/Y25Tu9p5mh3CyI42WbTRIiwR9a1GdFtmDnNPeskQ==
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  integrity sha512-WZX8r1M0+IyljoJOJleg3kYm10hxNYF9scqAT7v/xeSX1IdehutOM85SNO0gP9K+bgs86XERr7Ud5u3ch4+D8g==
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, 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-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  integrity sha512-uhRZ2hRgj0lorxm9cr62B01YzpUe63h0RXMXQ4gWW3oa2rpJh+FJAiEAytaFCPU/VgaBS+uW2SJ1XKyDNz1h4w==
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
+  version "5.2.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
+  integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
+  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.0, prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha512-s/46sYeylUfHNjI+sA/78FAHlmIuKqI9wNnzEOGehAlUUYeObv5C2mOinXBjyUyWmJ2SfcS2/ydApH4hTF4WXQ==
+
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+  integrity sha512-yJAF+AjbHKlxQ8eezMd/34Mnj/YTQ3i6kLzvVsH4l/BfIFtp444n0wVbnsn66JimZ9uBofv815aRp1zCppxlWw==
+
+pretty-error@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^2.0.4"
+
+pretty-format@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-20.0.3.tgz#020e350a560a1fe1a98dc3beb6ccffb386de8b14"
+  integrity sha512-dSW/15bmtC3vuheyzWUveowskTAUAWKE08+x06rgYzvSoDzg6cVg/MPKgNvh87jRJvOQ/qaQZLLWml2jrukk6w==
+  dependencies:
+    ansi-regex "^2.1.1"
+    ansi-styles "^3.0.0"
+
+pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+private@^0.1.6, private@^0.1.7, 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==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+promise@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
+  integrity sha512-6NO4VAynZF2J958bGr+U5mPDwK5n7Vi/S0mCW7bke3bJmcALGjCywH8sl6a2eN+xIX6Q1exH2lmqyjR9PKTiwg==
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.10, prop-types@^15.6.0:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
+
+psl@^1.1.28:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
+  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
+  dependencies:
+    punycode "^2.3.1"
+
+public-encrypt@^4.0.3:
+  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"
+
+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 sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
+
+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==
+
+punycode@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+qs@^6.12.3:
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.0.tgz#c63fa40680d2c5c941412a0e899c89af60c0a930"
+  integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==
+  dependencies:
+    side-channel "^1.1.0"
+
+qs@~6.5.2:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
+  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+
+query-string@^4.1.0, query-string@^4.2.3:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  integrity sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==
+  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"
+  integrity sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+raf@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
+  integrity sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==
+  dependencies:
+    performance-now "^2.1.0"
+
+randomatic@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+  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.4:
+  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.0.3, 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.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+rc@^1.0.1, rc@^1.1.6:
+  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-dev-utils@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.3.tgz#92f97668f03deb09d7fa11ea288832a8c756e35e"
+  integrity sha512-Mvs6ofsc2xTjeZIrMaIfbXfsPVrbdVy/cVqq6SAacnqfMlcBpDuivhWZ1ODGeJ8HgmyWTLH971PYjj/EPCDVAw==
+  dependencies:
+    address "1.0.3"
+    babel-code-frame "6.26.0"
+    chalk "1.1.3"
+    cross-spawn "5.1.0"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "1.0.5"
+    filesize "3.5.11"
+    global-modules "1.0.0"
+    gzip-size "3.0.0"
+    inquirer "3.3.0"
+    is-root "1.0.0"
+    opn "5.2.0"
+    react-error-overlay "^4.0.1"
+    recursive-readdir "2.2.1"
+    shell-quote "1.6.1"
+    sockjs-client "1.1.5"
+    strip-ansi "3.0.1"
+    text-table "0.2.0"
+
+react-dom@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  dependencies:
+    scheduler "^0.25.0"
+
+react-error-overlay@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
+  integrity sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-scripts@^1.0.11:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768"
+  integrity sha512-ZXqnbg+kLRaacAkjuedMFTgKu9lNltMDDsuwn37CTV7X2tuZQmDKi08eI3LYvtpjqh5vm8/6BhwHRHkRtvMyJg==
+  dependencies:
+    autoprefixer "7.1.6"
+    babel-core "6.26.0"
+    babel-eslint "7.2.3"
+    babel-jest "20.0.3"
+    babel-loader "7.1.2"
+    babel-preset-react-app "^3.1.2"
+    babel-runtime "6.26.0"
+    case-sensitive-paths-webpack-plugin "2.1.1"
+    chalk "1.1.3"
+    css-loader "0.28.7"
+    dotenv "4.0.0"
+    dotenv-expand "4.2.0"
+    eslint "4.10.0"
+    eslint-config-react-app "^2.1.0"
+    eslint-loader "1.9.0"
+    eslint-plugin-flowtype "2.39.1"
+    eslint-plugin-import "2.8.0"
+    eslint-plugin-jsx-a11y "5.1.1"
+    eslint-plugin-react "7.4.0"
+    extract-text-webpack-plugin "3.0.2"
+    file-loader "1.1.5"
+    fs-extra "3.0.1"
+    html-webpack-plugin "2.29.0"
+    jest "20.0.4"
+    object-assign "4.1.1"
+    postcss-flexbugs-fixes "3.2.0"
+    postcss-loader "2.0.8"
+    promise "8.0.1"
+    raf "3.4.0"
+    react-dev-utils "^5.0.2"
+    resolve "1.6.0"
+    style-loader "0.19.0"
+    sw-precache-webpack-plugin "0.11.4"
+    url-loader "0.6.2"
+    webpack "3.8.1"
+    webpack-dev-server "2.11.3"
+    webpack-manifest-plugin "1.3.2"
+    whatwg-fetch "2.0.3"
+  optionalDependencies:
+    fsevents "^1.1.3"
+
+react@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+
+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 sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+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"
+  integrity sha512-1orxQfbWGUiTn9XsPlChs6rLie/AV9jwZTGmu2NZw/CUDJQchXJFYE0Fq5j7+n558T1JhDWLdhyd1Zj+wLY//w==
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.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 sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.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"
+  integrity sha512-eFIBOPW7FGjzBuk3hdXEuNSiTZS/xEMlH49HxMyzb0hyPfu4EhVjT2DH32K1hSSmVq4sebAWnZuuY5auISUTGA==
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+readable-stream@^2.0.1:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  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@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  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@^3.6.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  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"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+recursive-readdir@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"
+  integrity sha512-BKWLxPZb4B07G/4LzyzsHaw24fC41/tL7LrECr1//X9ykRhmxlYgyl7G7X+6A7nvJyOGE/ED7refqmSGORVYqQ==
+  dependencies:
+    minimatch "3.0.3"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  integrity sha512-0dVfwYVOlf/LBA2ec4OwQ6p3X9mYxn/wOl2xTcLwjnPYrkgEfPx3VI4eGCH3rQLlPISG5v9I9bkZosKsNRTRKA==
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f"
+  integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
+regenerate@^1.2.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
+  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.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+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-url@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  integrity sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==
+  dependencies:
+    rc "^1.0.1"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha512-x+Y3yA24uF68m5GA+tBjbGYo64xXVJpbToBaWCoSNSc1hdk6dfctaRWrNFTVJZIIhL5GxW8zwjoixbnifnK59g==
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  integrity sha512-jlQ9gYLfk2p3V5Ag5fYhA7fv7OHzd1KUH0PRP46xc3TgwjwgROIW572AfYg/X9kaNq/LJnu6oJcFRXlIrGoTRw==
+  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"
+  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
+
+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 sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==
+
+renderkid@^2.0.4:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.7.tgz#464f276a6bdcee606f4a15993f9b29fc74ca8609"
+  integrity sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==
+  dependencies:
+    css-select "^4.1.3"
+    dom-converter "^0.2.0"
+    htmlparser2 "^6.1.0"
+    lodash "^4.17.21"
+    strip-ansi "^3.0.1"
+
+repeat-element@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+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 sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  integrity sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==
+  dependencies:
+    is-finite "^1.0.0"
+
+request@^2.79.0:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  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.3"
+    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.5.0"
+    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@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+  integrity sha512-H7AkJWMobeskkttHyhTVtS0fxpFLjxhbfMa6Bk3wimP7sdPRGL3EyCg3sAQenFfAe+xQ+oAc85Nmtvq0ROM83Q==
+
+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 sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==
+
+require-uncached@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  integrity sha512-Xct+41K3twrbBHdxAgMoOS+cNcoqIjfM2/VxBF4LL2hVph7YsF8VSKyQ3BDFZwEVbok9yeDl2le/qo0S77WG2w==
+  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 sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-dir@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  integrity sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==
+  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 sha512-kT10v4dhrlLNcnO084hEjvXCI1wUG9qZLoz2RogxqDQQYy7IxjI/iMUkOtQTNEh6rzHxvdQWHsJyel1pKOVCxg==
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==
+
+resolve@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
+  integrity sha512-mw7JQNu5ExIkcw4LPih0owX/TZXjD/ZUF/ZQ/pDnkw3ZKhDcZZw5klmBlj6gVMwjQ3Pz5Jgu7F3d0jcDVuEWdw==
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.10.0, resolve@^1.22.4, resolve@^1.3.2:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==
+  dependencies:
+    onetime "^2.0.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==
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  integrity sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@^2.2.8, rimraf@^2.6.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.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:
+    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"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+run-async@^2.2.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+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"
+  integrity sha512-3xPNZGW93oCjiO7PtKxRK6iOVYBWBvtf9QHDfU23Oc+dLIQmAV//UnyXV/yihv81VS/UqoQPk4NegS8EFi55Hg==
+  dependencies:
+    rx-lite "*"
+
+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"
+  integrity sha512-Cun9QucwK6MIrp3mry/Y7hqD1oFqTYLQ4pGxaHTjIdaFDWRGGLikqp6u8LcWJnzpoALg9hap+JGk8sFIUuEGNA==
+
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-buffer@5.2.1, 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, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==
+  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"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sane@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-1.6.0.tgz#9610c452307a135d29c1fdfe2547034180c46775"
+  integrity sha512-r9zOMa72GMYfOja8DZvDrKQjKE7vxQD2AHFVV/cg05JmAhKoumAjrW/0QbKw6kGebgcG6HV/3u+EI8ZqrAPT3Q==
+  dependencies:
+    anymatch "^1.3.0"
+    exec-sh "^0.2.0"
+    fb-watchman "^1.8.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.10.0"
+
+sax@^1.2.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
+  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
+
+sax@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  integrity sha512-QaVYBaD9U8scJw2EBWnCBY+LJ0AD+/2edTaigDs0XLDLBfJmSUK9KGqktg1rb32U3z4j/XwvFwHHH1YfbYFd7Q==
+  dependencies:
+    ajv "^5.0.0"
+
+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.9.1:
+  version "1.10.14"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.14.tgz#ee51d84d9dcecc61e07e4aba34f229ab525c1574"
+  integrity sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==
+  dependencies:
+    node-forge "^0.10.0"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  integrity sha512-gL8F8L4ORwsS0+iQ34yCYv///jsOq0ZL7WP55d1HnJ32o7tyFYEFQZQA22mrLIacZdU6xecaBBZ+uEiffGNyXw==
+  dependencies:
+    semver "^5.0.3"
+
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.5.0:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serve-index@^1.7.2:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==
+  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.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.0"
+
+serviceworker-cache-polyfill@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
+  integrity sha512-VMl1n99TbtKdO7DYNX0J9FQt1doo69V6fBniKC7o+CoJerbmFlQbsoxDa7P+b4b0tmpsdRIuzzS9sSJI7vFY2g==
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
+
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
+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.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
+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.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+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"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
+  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 sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
+
+shell-quote@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  integrity sha512-V0iQEZ/uoem3NmD91rD8XiuozJnq9/ZJnbHVXHnWqP1ucAhS3yJ7sLIIzEi57wFFcK3oi3kFUC46uSyWr35mxg==
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+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==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.6, side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+signal-exit@^3.0.0:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==
+
+slice-ansi@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
+  dependencies:
+    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"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  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"
+  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"
+    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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.5.tgz#1bb7c0f7222c40f42adf14f4442cbd1269771a83"
+  integrity sha512-PmPRkAYIeuRgX+ZSieViT4Z3Q23bLS2Itm/ck1tSf5P0/yVuFDiI5q9mcnpXoMdToaPSRS9MEyUx/aaBxrFzyw==
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+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"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    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.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-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
+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"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+spdx-correct@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.2.0.tgz#4f5ab0668f0059e34f9c00dce331784a12de4e9c"
+  integrity sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66"
+  integrity sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.21"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.21.tgz#6d6e980c9df2b6fc905343a3b2d702a6239536c3"
+  integrity sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==
+
+spdy-transport@^2.0.18:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.1.1.tgz#c54815d73858aadd06ce63001e7d25fa6441623b"
+  integrity sha512-q7D8c148escoB3Z7ySCASadkegMmUZW8Wb/Q1u0/XBgDKMO880rLQDj8Twiew/tYi7ghemKUi/whSYOwE17f5Q==
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
+
+spdy@^3.4.1:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  integrity sha512-jEvgkLRpMza5GON0oDzvLTLMAVfB5BxeOPbsWyisEyE8IbxL6cCiKbr8xrJdScs6XoOUp7pQy4PI+GVczHbO4w==
+  dependencies:
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
+    select-hose "^2.0.0"
+    spdy-transport "^2.0.18"
+
+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"
+
+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.18.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
+  integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+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-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"
+
+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"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
+string-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
+  integrity sha512-MNCACnufWUf3pQ57O5WTBMkKhzYIaKEcUioO0XHrTMafrbBaNk4IyDOLHBv5xbXO0jLLdsYWeFjpjG2hVHRDtw==
+  dependencies:
+    strip-ansi "^3.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==
+  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:
+  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.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.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@~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"
+
+strip-ansi@3.0.1, 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 sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==
+  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 sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
+  dependencies:
+    ansi-regex "^3.0.0"
+
+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 sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==
+  dependencies:
+    is-utf8 "^0.2.0"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  integrity sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==
+  dependencies:
+    get-stdin "^4.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 sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+
+style-loader@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
+  integrity sha512-9mx9sC9nX1dgP96MZOODpGC6l1RzQBITI2D5WJhu+wnbrSYVKLGuy14XJSLVQih/0GFrPpjelt+s//VcZQ2Evw==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.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 sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
+
+supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^4.2.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  integrity sha512-ycQR/UbvI9xIlEdQT1TQqwoXtEldExbCEAJgRo5YXlmSKjv6ThHnP9/vwGa1gr19Gfw+LkFd7KqYMhzrRC5JYw==
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.1.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-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  integrity sha512-jT/g9FFMoe9lu2IT6HtAxTA7RR2XOrmcrmCtGnyB/+GQnV6ZjNn+KOHZbZ35yL81+1F/aB6OeEsJztzBQ2EEwA==
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+sw-precache-webpack-plugin@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/sw-precache-webpack-plugin/-/sw-precache-webpack-plugin-0.11.4.tgz#a695017e54eed575551493a519dc1da8da2dc5e0"
+  integrity sha512-czvYwc8cy3K2F62PYuuja1p5NTqI3suFuUy8fDhcgS9cV5gO8jDlewQhhyUctcsA2T1Nb39W16nzSx8RwqkAvQ==
+  dependencies:
+    del "^2.2.2"
+    sw-precache "^5.1.1"
+    uglify-js "^3.0.13"
+
+sw-precache@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.1.tgz#06134f319eec68f3b9583ce9a7036b1c119f7179"
+  integrity sha512-8FAy+BP/FXE+ILfiVTt+GQJ6UEf4CVHD9OfhzH0JX+3zoy2uFk7Vn9EfXASOtVmmIVbL3jE/W8Z66VgPSZcMhw==
+  dependencies:
+    dom-urls "^1.1.0"
+    es6-promise "^4.0.5"
+    glob "^7.1.1"
+    lodash.defaults "^4.2.0"
+    lodash.template "^4.4.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    pretty-bytes "^4.0.2"
+    sw-toolbox "^3.4.0"
+    update-notifier "^2.3.0"
+
+sw-toolbox@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/sw-toolbox/-/sw-toolbox-3.6.0.tgz#26df1d1c70348658e4dea2884319149b7b3183b5"
+  integrity sha512-v/hu7KQQtospyDLpZxz7m5c7s90aj53YEkJ/A8x3mLPlSgIkZ6RKJkTjBG75P1p/fo5IeSA4TycyJg3VSu/aPw==
+  dependencies:
+    path-to-regexp "^1.0.1"
+    serviceworker-cache-polyfill "^4.0.0"
+
+symbol-tree@^3.2.1:
+  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.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
+  integrity sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==
+  dependencies:
+    ajv "^6.0.1"
+    ajv-keywords "^3.0.0"
+    chalk "^2.1.0"
+    lodash "^4.17.4"
+    slice-ansi "1.0.0"
+    string-width "^2.1.1"
+
+tapable@^0.2.7:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.9.tgz#af2d8bbc9b04f74ee17af2b4d9048f807acd18a8"
+  integrity sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==
+
+term-size@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  integrity sha512-7dPUZQGy/+m3/wjVz3ZW5dobSoD/02NxJpoXUX0WIyjfVS3l0c+b/+9phIDFA7FHzkYtwtMFgeGZ/Y8jVTeqQQ==
+  dependencies:
+    execa "^0.7.0"
+
+test-exclude@^4.2.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
+  integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+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 sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+throat@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
+  integrity sha512-/EY8VpvlqJ+sFtLPeOgc8Pl7kQVOWv0woD87KTXVHPIAE842FGT+rokxIhe8xIUP1cfgrkt0as0vDLjDiMtr8w==
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
+
+thunky@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
+
+time-stamp@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.2.0.tgz#917e0a66905688790ec7bbbde04046259af83f57"
+  integrity sha512-zxke8goJQpBeEgD82CXABeMh0LSJcj7CXEd0OHOg45HgcofF7pxNwZm9+RknpxpDhwN4gFpySkApKfFYfRQnUA==
+
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+  integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
+
+timers-browserify@^2.0.4:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+tmp@^0.0.33:
+  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"
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==
+
+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 sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==
+
+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 sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==
+  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"
+  integrity sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.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"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+toposort@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
+  integrity sha512-FclLrw8b9bMWf4QlCJuHBEVhSRsqDj6u3nIjAzPeJvgl//1hBlffdlk0MALceL14+koWEdU4ofRAXofbODxQzg==
+
+tough-cookie@^2.3.2, tough-cookie@~2.5.0:
+  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.28"
+    punycode "^2.1.1"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+  integrity sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+  integrity sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
+  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"
+  integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
+
+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-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@^2.7.2:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.7.3.tgz#436981652129285cc3ba94f392886c2637ea0486"
+  integrity sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==
+
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
+uglify-js@3.4.x:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
+  dependencies:
+    commander "~2.19.0"
+    source-map "~0.6.1"
+
+uglify-js@^2.8.29:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  integrity sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
+uglify-js@^3.0.13, uglify-js@^3.1.4:
+  version "3.19.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.19.3.tgz#82315e9bbc6f2b25888858acd1fff8441035b77f"
+  integrity sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==
+
+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"
+  integrity sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==
+
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  integrity sha512-TNM20HMW67kxHRNCZdvLyiwE1ST6WyY5Ae+TG55V81NpvNwJ9+V4/po4LHA1R9afV/WrqzfedG2UJCk2+swirw==
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
+union-value@^1.0.0:
+  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 "^2.0.1"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha512-mZdDpf3vBV5Efh29kMw5tXoup/buMgxLzOt/XKFKcVmi+15ManNQWr6HfZ2aiZTYlYixbdNJ0KFmIZIv52tHSQ==
+
+unique-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  integrity sha512-ODgiYu03y5g76A1I9Gt0/chLCzQjvzDy7DsZGsLOE/1MrF6wriEskSncj1+/C58Xk/kPZDppSctDybCwOSaGAg==
+  dependencies:
+    crypto-random-string "^1.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 sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==
+  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 sha512-N0XH6lqDtFH84JxptQoZYmloF4nzrQqqrAymNj+/gW60AO2AZgOcf4O/nUXJcYfyQkqvMo9lSupBZmmgvuVXlw==
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-notifier@^2.3.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"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==
+
+uri-js@^4.2.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
+  integrity sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==
+  dependencies:
+    punycode "^2.1.0"
+
+urijs@^1.16.1:
+  version "1.19.11"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.11.tgz#204b0d6b605ae80bea54bea39280cdb7c9f923cc"
+  integrity sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
+
+url-loader@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
+  integrity sha512-h3qf9TNn53BpuXTTcpC+UehiRrl0Cv45Yr/xWayApjw6G8Bg2dGke7rIwDQ39piciWCWrC+WiqLjOh3SUp9n0Q==
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
+
+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 sha512-BVA4lR5PIviy2PMseNd2jbFQ+jwSwQGdJejf5ctd1rEXt0Ypd7yanUK9+lYechVlN5VaTJGsu2U/3MDDu6KgBA==
+  dependencies:
+    prepend-http "^1.0.1"
+
+url-parse@^1.1.8, url-parse@^1.4.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+url@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c"
+  integrity sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==
+  dependencies:
+    punycode "^1.4.1"
+    qs "^6.12.3"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+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 sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+util@^0.10.4:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
+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"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+
+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.1, uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+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"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  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"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vendors@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==
+  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"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+walker@~1.0.5:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+watch@~0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
+  integrity sha512-FAk18nzhYggg939xgRRLJjvqmAKZciO24wr8neoxNPl87w8J3m784wxL4zFBwME+0gNQ2Sv/vfsCrUxPxU2Dmg==
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.4.0:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
+
+wbuf@^1.1.0, wbuf@^1.7.2:
+  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"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
+webidl-conversions@^4.0.0:
+  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-dev-middleware@1.12.2:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
+  integrity sha512-FCrqPy1yy/sN6U/SaEZcHKRXGlqU0DUaEBL45jkUYoB8foVb6wCnbIJ1HKIx+qUFTW+3JpVcCJCxZ8VATL4e+A==
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.5.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    time-stamp "^2.0.0"
+
+webpack-dev-server@2.11.3:
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.3.tgz#3fd48a402164a6569d94d3d17f131432631b4873"
+  integrity sha512-Qz22YEFhWx+M2vvJ+rQppRv39JA0h5NNbOOdODApdX6iZ52Diz7vTPXjF7kJlfn+Uc24Qr48I3SZ9yncQwRycg==
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.1.5"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "1.12.2"
+    yargs "6.6.0"
+
+webpack-manifest-plugin@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"
+  integrity sha512-MX60Bv2G83Zks9pi3oLOmRgnPAnwrlMn+lftMrWBm199VQjk46/xgzBi9lPfpZldw2+EI2S+OevuLIaDuxCWRw==
+  dependencies:
+    fs-extra "^0.30.0"
+    lodash ">=3.5 <5"
+
+webpack-sources@^1.0.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@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.8.1.tgz#b16968a81100abe61608b0153c9159ef8bb2bd83"
+  integrity sha512-5ZXLWWsMqHKFr5y0N3Eo5IIisxeEeRAajNq4mELb/WELOR7srdbQk2N5XiyNy2A/AgvlR3AmeBCZJW8lHrolbw==
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
+    async "^2.1.2"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
+
+websocket-driver@>=0.5.1:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
+whatwg-encoding@^1.0.1:
+  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.24"
+
+whatwg-fetch@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+  integrity sha512-SA2KdOXATOroD3EBUYvcdugsusXS5YiQFqwskSbsp5b1gK8HpNi/YP0jcy/BDpdllp305HMnrsVf9K7Be9GiEQ==
+
+whatwg-url@^4.3.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
+  integrity sha512-nUvUPuenPFtPfy/X+dAYh/TfRbTBlnXTM5iIfLseJFkkQewmpG9pGR6i87E9qL+lZaJzv+99kkQWoGOtLfkZQQ==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+  integrity sha512-mmIPAft2vTgEILgPeZFqE/wWh24SEsR/k+N9fJ3Jxrz44iDFy9aemCxdksfURSHYFCLmvs/d/7Iso5XjPpNfrA==
+
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  integrity sha512-F6+WgncZi/mJDrammbTuHe1q0R5hOXv/mBaiNA2TCNT/LTHusX0V+CJnj9XT8ki5ln2UZyyddDgHfCzyrOH7MQ==
+
+which-module@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
+  integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+
+which-typed-array@^1.1.16, which-typed-array@^1.1.18:
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.18.tgz#df2389ebf3fbb246a71390e90730a9edb6ce17ad"
+  integrity sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
+which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.0:
+  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"
+
+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.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  integrity sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==
+
+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.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+  integrity sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==
+
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
+
+worker-farm@^1.3.1:
+  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 sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+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.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@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  integrity sha512-CJ17OoULEKXpA5pef3qLj5AxTJ6mSt7g84he2WIskKwqFO4T97d5V7Tadl0DYDk7qyUOQD5WlUlOMChaYrhxeA==
+  dependencies:
+    mkdirp "^0.5.1"
+
+xdg-basedir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+  integrity sha512-1Dly4xqlulvPD3fZUQJLY+FUIeqN3N2MM3uqe4rCJftAvOjFa3jFGfctOgluGx4ahPbUCsZkmJILiP0Vi4T6lQ==
+
+xml-name-validator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+  integrity sha512-jRKe/iQYMyVJpzPH+3HL97Lgu5HrCfii+qSo+TfjKHtOnvbnvdVfMYrn9Q34YV81M2e5sviJlI6Ko9y+nByzvA==
+
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y18n@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
+  integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  integrity sha512-+QQWqC2xeL0N5/TE+TY6OGEqyNRM+g2/r712PDNYgiCdXYCApXf1vzfmDSLBxfGRwV+moTq/V8FnMI24JCm2Yg==
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.1.tgz#7ede329c1d8cdbbe209bd25cdb990e9b1ebbb394"
+  integrity sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==
+  dependencies:
+    camelcase "^3.0.0"
+    object.assign "^4.1.0"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  integrity sha512-WhzC+xgstid9MbVUktco/bf+KJG+Uu6vMX0LN1sLJvwmbCQVxb4D8LzogobonKycNasCZLdOzTAk1SK7+K7swg==
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  integrity sha512-6/QWTdisjnu5UHUzQGst+UOEuEVwIzFVGBjq3jMTFNs5WJQsH/X6nMURSaScIdF5txylr1Ao9bvbWiKi2yXbwA==
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@^7.0.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.2.tgz#63a0a5d42143879fdbb30370741374e0641d55db"
+  integrity sha512-ZEjj/dQYQy0Zx0lgLMLR8QuaqTihnxirir7EwUHp1Axq4e3+k8jXU5K0VLbNvedv1f4EWtBonDIZm0NUr+jCcA==
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.1"
+
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  integrity sha512-3RiZrpLpjrzIAKgGdPktBcMP/eG5bDFlkI+PHle1qwzyVXyDQL+pD/eZaMoOOO0Y7LLBfjpucObuUm/icvbpKQ==
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.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"
+    yargs-parser "^7.0.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  integrity sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/eslint-v6/.eslintrc.json b/fixtures/eslint-v6/.eslintrc.json
new file mode 100644
index 00000000000..672da7a085a
--- /dev/null
+++ b/fixtures/eslint-v6/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": ["plugin:react-hooks/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
diff --git a/fixtures/eslint-v6/README.md b/fixtures/eslint-v6/README.md
new file mode 100644
index 00000000000..7f0ebe8b038
--- /dev/null
+++ b/fixtures/eslint-v6/README.md
@@ -0,0 +1,12 @@
+# ESLint v6 Fixture
+
+This fixture allows us to test e2e functionality for `eslint-plugin-react-hooks` with eslint version 6.
+
+Run the following to test.
+
+```sh
+cd fixtures/eslint-v6
+yarn
+yarn build
+yarn lint
+```
diff --git a/fixtures/eslint-v6/build.mjs b/fixtures/eslint-v6/build.mjs
new file mode 100644
index 00000000000..e0dd355ba43
--- /dev/null
+++ b/fixtures/eslint-v6/build.mjs
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import {execSync} from 'node:child_process';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+execSync('yarn build -r stable eslint-plugin-react-hooks', {
+  cwd: resolve(__dirname, '..', '..'),
+  stdio: 'inherit',
+});
diff --git a/fixtures/eslint-v6/index.js b/fixtures/eslint-v6/index.js
new file mode 100644
index 00000000000..143228e12cb
--- /dev/null
+++ b/fixtures/eslint-v6/index.js
@@ -0,0 +1,167 @@
+/**
+ * Exhaustive Deps
+ */
+// Valid because dependencies are declared correctly
+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]);
+}
+
+// Valid because no dependencies
+function UseEffectWithNoDependencies() {
+  const local = {};
+  useEffect(() => {
+    console.log(local);
+  });
+}
+function UseEffectWithEmptyDependencies() {
+  useEffect(() => {
+    const local = {};
+    console.log(local);
+  }, []);
+}
+
+// OK because `props` wasn't defined.
+function ComponentWithNoPropsDefined() {
+  useEffect(() => {
+    console.log(props.foo);
+  }, []);
+}
+
+// Valid because props are declared as a dependency
+function ComponentWithPropsDeclaredAsDep({foo}) {
+  useEffect(() => {
+    console.log(foo.length);
+    console.log(foo.slice(0));
+  }, [foo]);
+}
+
+// Valid because individual props are declared as dependencies
+function ComponentWithIndividualPropsDeclaredAsDeps(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    console.log(props.bar);
+  }, [props.bar, props.foo]);
+}
+
+// Invalid because neither props or props.foo are declared as dependencies
+function ComponentWithoutDeclaringPropAsDep(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.notReactiveHook(() => {
+    console.log(props.foo);
+  }, []); // This one isn't a violation
+}
+
+/**
+ * Rules of Hooks
+ */
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+const whatever = function useHook() {
+  useState();
+};
+const useHook1 = () => {
+  useState();
+};
+let useHook2 = () => useState();
+useHook2 = () => {
+  useState();
+};
+
+// Invalid because hooks can't be called in conditionals.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useConditionalHook();
+  }
+}
+
+// Invalid because hooks can't be called in loops.
+function useHookInLoops() {
+  while (a) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook1();
+    if (b) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook2();
+  }
+  while (c) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook3();
+    if (d) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook4();
+  }
+}
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+function InvalidComponentFactory() {
+  const DynamicComponent = () => <div>Hello</div>;
+  // eslint-disable-next-line react-hooks/static-components
+  return <DynamicComponent />;
+}
+
+// Invalid: mutating globals
+function InvalidGlobals() {
+  // eslint-disable-next-line react-hooks/immutability
+  window.myGlobal = 42;
+  return <div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps
+function InvalidUseMemo({items}) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const sorted = useMemo(() => [...items].sort(), []);
+  return <div>{sorted.length}</div>;
+}
diff --git a/fixtures/eslint-v6/package.json b/fixtures/eslint-v6/package.json
new file mode 100644
index 00000000000..c410edd78fc
--- /dev/null
+++ b/fixtures/eslint-v6/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "eslint-v6",
+  "dependencies": {
+    "eslint": "^6",
+    "eslint-plugin-react-hooks": "link:../../build/oss-stable/eslint-plugin-react-hooks"
+  },
+  "scripts": {
+    "build": "node build.mjs && yarn",
+    "lint": "eslint index.js --report-unused-disable-directives"
+  }
+}
diff --git a/fixtures/eslint-v6/yarn.lock b/fixtures/eslint-v6/yarn.lock
new file mode 100644
index 00000000000..5af9623e877
--- /dev/null
+++ b/fixtures/eslint-v6/yarn.lock
@@ -0,0 +1,865 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+acorn-jsx@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+ajv@^6.10.0, ajv@^6.10.2:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-regex@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
+  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+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@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+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==
+
+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=
+
+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"
+
+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==
+
+chalk@^2.1.0:
+  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"
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+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==
+
+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 "^3.1.0"
+
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+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=
+
+cross-spawn@^6.0.5:
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.6.tgz#30d0efa0712ddb7eb5a76e1e8721bffafa6b5d57"
+  integrity sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+debug@^4.0.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+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=
+
+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"
+
+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==
+
+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=
+
+"eslint-plugin-react-hooks@link:../../build/oss-stable/eslint-plugin-react-hooks":
+  version "0.0.0"
+  uid ""
+
+eslint-scope@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+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.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@^6:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
+  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 "^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@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
+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.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+  integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
+
+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.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+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.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+figures@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  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"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
+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"
+
+flatted@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+
+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=
+
+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 sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
+
+glob-parent@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  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"
+
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+  dependencies:
+    type-fest "^0.8.1"
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+iconv-lite@^0.4.24:
+  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.2 < 3"
+
+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==
+
+import-fresh@^3.0.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.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=
+
+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:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+inquirer@^7.0.0:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.19"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.6.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+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-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-glob@^4.0.0, is-glob@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+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-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+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-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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+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"
+
+lodash@^4.17.14, lodash@^4.17.19:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+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==
+
+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=
+
+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"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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==
+
+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=
+
+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==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.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"
+
+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=
+
+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"
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
+
+picocolors@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+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=
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+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==
+
+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==
+
+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 "^5.1.0"
+    signal-exit "^3.0.2"
+
+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
+run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+rxjs@^6.6.0:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+semver@^5.5.0:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^6.1.2:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
+  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 sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
+
+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=
+
+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"
+
+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=
+
+string-width@^3.0.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.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+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@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-json-comments@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+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"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.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 sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+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=
+
+tmp@^0.0.33:
+  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"
+
+tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+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.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+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==
+
+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"
+
+v8-compile-cache@^2.0.3:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
+  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
+
+which@^1.2.9:
+  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"
+
+word-wrap@~1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+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"
diff --git a/fixtures/eslint-v7/.eslintrc.json b/fixtures/eslint-v7/.eslintrc.json
new file mode 100644
index 00000000000..672da7a085a
--- /dev/null
+++ b/fixtures/eslint-v7/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": ["plugin:react-hooks/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
diff --git a/fixtures/eslint-v7/README.md b/fixtures/eslint-v7/README.md
new file mode 100644
index 00000000000..ea4628b0e03
--- /dev/null
+++ b/fixtures/eslint-v7/README.md
@@ -0,0 +1,12 @@
+# ESLint v7 Fixture
+
+This fixture allows us to test e2e functionality for `eslint-plugin-react-hooks` with eslint version 7.
+
+Run the following to test.
+
+```sh
+cd fixtures/eslint-v7
+yarn
+yarn build
+yarn lint
+```
diff --git a/fixtures/eslint-v7/build.mjs b/fixtures/eslint-v7/build.mjs
new file mode 100644
index 00000000000..e0dd355ba43
--- /dev/null
+++ b/fixtures/eslint-v7/build.mjs
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import {execSync} from 'node:child_process';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+execSync('yarn build -r stable eslint-plugin-react-hooks', {
+  cwd: resolve(__dirname, '..', '..'),
+  stdio: 'inherit',
+});
diff --git a/fixtures/eslint-v7/index.js b/fixtures/eslint-v7/index.js
new file mode 100644
index 00000000000..143228e12cb
--- /dev/null
+++ b/fixtures/eslint-v7/index.js
@@ -0,0 +1,167 @@
+/**
+ * Exhaustive Deps
+ */
+// Valid because dependencies are declared correctly
+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]);
+}
+
+// Valid because no dependencies
+function UseEffectWithNoDependencies() {
+  const local = {};
+  useEffect(() => {
+    console.log(local);
+  });
+}
+function UseEffectWithEmptyDependencies() {
+  useEffect(() => {
+    const local = {};
+    console.log(local);
+  }, []);
+}
+
+// OK because `props` wasn't defined.
+function ComponentWithNoPropsDefined() {
+  useEffect(() => {
+    console.log(props.foo);
+  }, []);
+}
+
+// Valid because props are declared as a dependency
+function ComponentWithPropsDeclaredAsDep({foo}) {
+  useEffect(() => {
+    console.log(foo.length);
+    console.log(foo.slice(0));
+  }, [foo]);
+}
+
+// Valid because individual props are declared as dependencies
+function ComponentWithIndividualPropsDeclaredAsDeps(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    console.log(props.bar);
+  }, [props.bar, props.foo]);
+}
+
+// Invalid because neither props or props.foo are declared as dependencies
+function ComponentWithoutDeclaringPropAsDep(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.notReactiveHook(() => {
+    console.log(props.foo);
+  }, []); // This one isn't a violation
+}
+
+/**
+ * Rules of Hooks
+ */
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+const whatever = function useHook() {
+  useState();
+};
+const useHook1 = () => {
+  useState();
+};
+let useHook2 = () => useState();
+useHook2 = () => {
+  useState();
+};
+
+// Invalid because hooks can't be called in conditionals.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useConditionalHook();
+  }
+}
+
+// Invalid because hooks can't be called in loops.
+function useHookInLoops() {
+  while (a) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook1();
+    if (b) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook2();
+  }
+  while (c) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook3();
+    if (d) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook4();
+  }
+}
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+function InvalidComponentFactory() {
+  const DynamicComponent = () => <div>Hello</div>;
+  // eslint-disable-next-line react-hooks/static-components
+  return <DynamicComponent />;
+}
+
+// Invalid: mutating globals
+function InvalidGlobals() {
+  // eslint-disable-next-line react-hooks/immutability
+  window.myGlobal = 42;
+  return <div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps
+function InvalidUseMemo({items}) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const sorted = useMemo(() => [...items].sort(), []);
+  return <div>{sorted.length}</div>;
+}
diff --git a/fixtures/eslint-v7/package.json b/fixtures/eslint-v7/package.json
new file mode 100644
index 00000000000..5e649175145
--- /dev/null
+++ b/fixtures/eslint-v7/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "eslint-v7",
+  "dependencies": {
+    "eslint": "^7",
+    "eslint-plugin-react-hooks": "link:../../build/oss-stable/eslint-plugin-react-hooks"
+  },
+  "scripts": {
+    "build": "node build.mjs && yarn",
+    "lint": "eslint index.js --report-unused-disable-directives"
+  }
+}
diff --git a/fixtures/eslint-v7/yarn.lock b/fixtures/eslint-v7/yarn.lock
new file mode 100644
index 00000000000..4a191de947f
--- /dev/null
+++ b/fixtures/eslint-v7/yarn.lock
@@ -0,0 +1,769 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
+  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/highlight@^7.10.4":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.9.tgz#8141ce68fc73757946f983b343f1231f4691acc6"
+  integrity sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+acorn-jsx@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^7.4.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
+ansi-colors@^4.1.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
+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=
+
+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"
+
+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==
+
+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:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+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=
+
+cross-spawn@^7.0.2:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+debug@^4.0.1, debug@^4.1.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+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"
+
+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==
+
+enquirer@^2.3.5:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
+  integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
+  dependencies:
+    ansi-colors "^4.1.1"
+    strip-ansi "^6.0.1"
+
+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=
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+"eslint-plugin-react-hooks@link:../../build/oss-stable/eslint-plugin-react-hooks":
+  version "0.0.0"
+  uid ""
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint@^7:
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
+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.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+  integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+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.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fast-uri@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.6.tgz#88f130b77cfaea2378d56bf970dea21257a68748"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+flat-cache@^3.0.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
+
+flatted@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
+  integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
+
+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=
+
+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 sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  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"
+
+globals@^13.6.0, globals@^13.9.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+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==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.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=
+
+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:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+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-glob@^4.0.0, is-glob@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+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-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+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-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+
+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"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.1:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.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"
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+picocolors@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+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==
+
+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==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+semver@^7.2.1:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
+  integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^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"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+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"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+table@^6.0.9:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.9.0.tgz#50040afa6264141c7566b3b81d4d82c47a8668f5"
+  integrity sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+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"
+
+v8-compile-cache@^2.0.3:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
+  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
diff --git a/fixtures/eslint-v8/.eslintrc.json b/fixtures/eslint-v8/.eslintrc.json
new file mode 100644
index 00000000000..672da7a085a
--- /dev/null
+++ b/fixtures/eslint-v8/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": ["plugin:react-hooks/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
diff --git a/fixtures/eslint-v8/README.md b/fixtures/eslint-v8/README.md
new file mode 100644
index 00000000000..da220cef5cb
--- /dev/null
+++ b/fixtures/eslint-v8/README.md
@@ -0,0 +1,12 @@
+# ESLint v8 Fixture
+
+This fixture allows us to test e2e functionality for `eslint-plugin-react-hooks` with eslint version 8.
+
+Run the following to test.
+
+```sh
+cd fixtures/eslint-v8
+yarn
+yarn build
+yarn lint
+```
diff --git a/fixtures/eslint-v8/build.mjs b/fixtures/eslint-v8/build.mjs
new file mode 100644
index 00000000000..e0dd355ba43
--- /dev/null
+++ b/fixtures/eslint-v8/build.mjs
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import {execSync} from 'node:child_process';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+execSync('yarn build -r stable eslint-plugin-react-hooks', {
+  cwd: resolve(__dirname, '..', '..'),
+  stdio: 'inherit',
+});
diff --git a/fixtures/eslint-v8/index.js b/fixtures/eslint-v8/index.js
new file mode 100644
index 00000000000..143228e12cb
--- /dev/null
+++ b/fixtures/eslint-v8/index.js
@@ -0,0 +1,167 @@
+/**
+ * Exhaustive Deps
+ */
+// Valid because dependencies are declared correctly
+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]);
+}
+
+// Valid because no dependencies
+function UseEffectWithNoDependencies() {
+  const local = {};
+  useEffect(() => {
+    console.log(local);
+  });
+}
+function UseEffectWithEmptyDependencies() {
+  useEffect(() => {
+    const local = {};
+    console.log(local);
+  }, []);
+}
+
+// OK because `props` wasn't defined.
+function ComponentWithNoPropsDefined() {
+  useEffect(() => {
+    console.log(props.foo);
+  }, []);
+}
+
+// Valid because props are declared as a dependency
+function ComponentWithPropsDeclaredAsDep({foo}) {
+  useEffect(() => {
+    console.log(foo.length);
+    console.log(foo.slice(0));
+  }, [foo]);
+}
+
+// Valid because individual props are declared as dependencies
+function ComponentWithIndividualPropsDeclaredAsDeps(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    console.log(props.bar);
+  }, [props.bar, props.foo]);
+}
+
+// Invalid because neither props or props.foo are declared as dependencies
+function ComponentWithoutDeclaringPropAsDep(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.notReactiveHook(() => {
+    console.log(props.foo);
+  }, []); // This one isn't a violation
+}
+
+/**
+ * Rules of Hooks
+ */
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+const whatever = function useHook() {
+  useState();
+};
+const useHook1 = () => {
+  useState();
+};
+let useHook2 = () => useState();
+useHook2 = () => {
+  useState();
+};
+
+// Invalid because hooks can't be called in conditionals.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useConditionalHook();
+  }
+}
+
+// Invalid because hooks can't be called in loops.
+function useHookInLoops() {
+  while (a) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook1();
+    if (b) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook2();
+  }
+  while (c) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook3();
+    if (d) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook4();
+  }
+}
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+function InvalidComponentFactory() {
+  const DynamicComponent = () => <div>Hello</div>;
+  // eslint-disable-next-line react-hooks/static-components
+  return <DynamicComponent />;
+}
+
+// Invalid: mutating globals
+function InvalidGlobals() {
+  // eslint-disable-next-line react-hooks/immutability
+  window.myGlobal = 42;
+  return <div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps
+function InvalidUseMemo({items}) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const sorted = useMemo(() => [...items].sort(), []);
+  return <div>{sorted.length}</div>;
+}
diff --git a/fixtures/eslint-v8/package.json b/fixtures/eslint-v8/package.json
new file mode 100644
index 00000000000..ed3de107c52
--- /dev/null
+++ b/fixtures/eslint-v8/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "eslint-v8",
+  "dependencies": {
+    "eslint": "^8",
+    "eslint-plugin-react-hooks": "link:../../build/oss-stable/eslint-plugin-react-hooks"
+  },
+  "scripts": {
+    "build": "node build.mjs && yarn",
+    "lint": "eslint index.js --report-unused-disable-directives"
+  }
+}
diff --git a/fixtures/eslint-v8/yarn.lock b/fixtures/eslint-v8/yarn.lock
new file mode 100644
index 00000000000..d5a947b6347
--- /dev/null
+++ b/fixtures/eslint-v8/yarn.lock
@@ -0,0 +1,676 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.6.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
+
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
+  integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.9.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+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=
+
+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"
+
+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==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+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=
+
+cross-spawn@^7.0.2:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+debug@^4.3.1, debug@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+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"
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+"eslint-plugin-react-hooks@link:../../build/oss-stable/eslint-plugin-react-hooks":
+  version "0.0.0"
+  uid ""
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@^8:
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esquery@^1.4.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+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.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.19.0.tgz#a82c6b7c2bb4e44766d865f07997785fecfdcb89"
+  integrity sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
+
+flatted@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
+  integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
+
+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=
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  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"
+
+globals@^13.19.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+ignore@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+import-fresh@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.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=
+
+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:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.0, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+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-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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+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"
+
+minimatch@^3.0.5, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+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"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+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==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.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 sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+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"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/fixtures/eslint-v9/README.md b/fixtures/eslint-v9/README.md
new file mode 100644
index 00000000000..3ea521cfa89
--- /dev/null
+++ b/fixtures/eslint-v9/README.md
@@ -0,0 +1,12 @@
+# ESLint v9 Fixture
+
+This fixture allows us to test e2e functionality for `eslint-plugin-react-hooks` with eslint version 9.
+
+Run the following to test.
+
+```sh
+cd fixtures/eslint-v9
+yarn
+yarn build
+yarn lint
+```
diff --git a/fixtures/eslint-v9/build.mjs b/fixtures/eslint-v9/build.mjs
new file mode 100644
index 00000000000..e0dd355ba43
--- /dev/null
+++ b/fixtures/eslint-v9/build.mjs
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import {execSync} from 'node:child_process';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+execSync('yarn build -r stable eslint-plugin-react-hooks', {
+  cwd: resolve(__dirname, '..', '..'),
+  stdio: 'inherit',
+});
diff --git a/fixtures/eslint-v9/eslint.config.ts b/fixtures/eslint-v9/eslint.config.ts
new file mode 100644
index 00000000000..f7d0bddac44
--- /dev/null
+++ b/fixtures/eslint-v9/eslint.config.ts
@@ -0,0 +1,20 @@
+import {defineConfig} from 'eslint/config';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default defineConfig([
+  reactHooks.configs.flat['recommended-latest'],
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    rules: {
+      'react-hooks/exhaustive-deps': 'error',
+    },
+  },
+]);
diff --git a/fixtures/eslint-v9/index.js b/fixtures/eslint-v9/index.js
new file mode 100644
index 00000000000..601b68a0328
--- /dev/null
+++ b/fixtures/eslint-v9/index.js
@@ -0,0 +1,182 @@
+/**
+ * Exhaustive Deps
+ */
+// Valid because dependencies are declared correctly
+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]);
+}
+
+// Valid because no dependencies
+function UseEffectWithNoDependencies() {
+  const local = {};
+  useEffect(() => {
+    console.log(local);
+  });
+}
+function UseEffectWithEmptyDependencies() {
+  useEffect(() => {
+    const local = {};
+    console.log(local);
+  }, []);
+}
+
+// OK because `props` wasn't defined.
+function ComponentWithNoPropsDefined() {
+  useEffect(() => {
+    console.log(props.foo);
+  }, []);
+}
+
+// Valid because props are declared as a dependency
+function ComponentWithPropsDeclaredAsDep({foo}) {
+  useEffect(() => {
+    console.log(foo.length);
+    console.log(foo.slice(0));
+  }, [foo]);
+}
+
+// Valid because individual props are declared as dependencies
+function ComponentWithIndividualPropsDeclaredAsDeps(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    console.log(props.bar);
+  }, [props.bar, props.foo]);
+}
+
+// Invalid because neither props or props.foo are declared as dependencies
+function ComponentWithoutDeclaringPropAsDep(props) {
+  useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // eslint-disable-next-line react-hooks/void-use-memo
+  useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useCallback(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // eslint-disable-next-line react-hooks/void-use-memo
+  React.useMemo(() => {
+    console.log(props.foo);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.notReactiveHook(() => {
+    console.log(props.foo);
+  }, []); // This one isn't a violation
+}
+
+/**
+ * Rules of Hooks
+ */
+// Valid because functions can call functions.
+function normalFunctionWithConditionalFunction() {
+  if (cond) {
+    doSomething();
+  }
+}
+
+// Valid because hooks can call hooks.
+function useHook() {
+  useState();
+}
+const whatever = function useHook() {
+  useState();
+};
+const useHook1 = () => {
+  useState();
+};
+let useHook2 = () => useState();
+useHook2 = () => {
+  useState();
+};
+
+// Invalid because hooks can't be called in conditionals.
+function ComponentWithConditionalHook() {
+  if (cond) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useConditionalHook();
+  }
+}
+
+// Invalid because hooks can't be called in loops.
+function useHookInLoops() {
+  while (a) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook1();
+    if (b) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook2();
+  }
+  while (c) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook3();
+    if (d) return;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHook4();
+  }
+}
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+function InvalidComponentFactory() {
+  const DynamicComponent = () => <div>Hello</div>;
+  // eslint-disable-next-line react-hooks/static-components
+  return <DynamicComponent />;
+}
+
+// Invalid: mutating globals
+function InvalidGlobals() {
+  // eslint-disable-next-line react-hooks/immutability
+  window.myGlobal = 42;
+  return <div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps
+function InvalidUseMemo({items}) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const sorted = useMemo(() => [...items].sort(), []);
+  return <div>{sorted.length}</div>;
+}
+
+// Invalid: missing/extra deps in useEffect
+function InvalidEffectDeps({a, b}) {
+  useEffect(() => {
+    console.log(a);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    console.log(a);
+    // TODO: eslint-disable-next-line react-hooks/exhaustive-effect-dependencies
+  }, [a, b]);
+}
diff --git a/fixtures/eslint-v9/package.json b/fixtures/eslint-v9/package.json
new file mode 100644
index 00000000000..e5c111bd4cc
--- /dev/null
+++ b/fixtures/eslint-v9/package.json
@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "eslint-v9",
+  "dependencies": {
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "link:../../build/oss-stable/eslint-plugin-react-hooks",
+    "jiti": "^2.4.2"
+  },
+  "scripts": {
+    "build": "node build.mjs && yarn",
+    "lint": "tsc --noEmit && eslint index.js --report-unused-disable-directives"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.3"
+  }
+}
diff --git a/fixtures/eslint-v9/tsconfig.json b/fixtures/eslint-v9/tsconfig.json
new file mode 100644
index 00000000000..b81887fc175
--- /dev/null
+++ b/fixtures/eslint-v9/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2022"
+    ],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "target": "es2022",
+    "typeRoots": [
+      "./node_modules/@types"
+    ],
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "node_modules",
+    "**/node_modules",
+    "../node_modules",
+    "../../node_modules"
+  ]
+}
diff --git a/fixtures/eslint-v9/yarn.lock b/fixtures/eslint-v9/yarn.lock
new file mode 100644
index 00000000000..964edad8223
--- /dev/null
+++ b/fixtures/eslint-v9/yarn.lock
@@ -0,0 +1,900 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be"
+  integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.27.1"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
+"@babel/compat-data@^7.27.2":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.28.4.tgz#96fdf1af1b8859c8474ab39c295312bfb7c24b04"
+  integrity sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==
+
+"@babel/core@^7.24.4":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.28.4.tgz#12a550b8794452df4c8b084f95003bce1742d496"
+  integrity sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.28.3"
+    "@babel/helper-compilation-targets" "^7.27.2"
+    "@babel/helper-module-transforms" "^7.28.3"
+    "@babel/helpers" "^7.28.4"
+    "@babel/parser" "^7.28.4"
+    "@babel/template" "^7.27.2"
+    "@babel/traverse" "^7.28.4"
+    "@babel/types" "^7.28.4"
+    "@jridgewell/remapping" "^2.3.5"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.28.3.tgz#9626c1741c650cbac39121694a0f2d7451b8ef3e"
+  integrity sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==
+  dependencies:
+    "@babel/parser" "^7.28.3"
+    "@babel/types" "^7.28.2"
+    "@jridgewell/gen-mapping" "^0.3.12"
+    "@jridgewell/trace-mapping" "^0.3.28"
+    jsesc "^3.0.2"
+
+"@babel/helper-compilation-targets@^7.27.2":
+  version "7.27.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz#46a0f6efab808d51d29ce96858dd10ce8732733d"
+  integrity sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==
+  dependencies:
+    "@babel/compat-data" "^7.27.2"
+    "@babel/helper-validator-option" "^7.27.1"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-globals@^7.28.0":
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz#b9430df2aa4e17bc28665eadeae8aa1d985e6674"
+  integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==
+
+"@babel/helper-module-imports@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz#7ef769a323e2655e126673bb6d2d6913bbead204"
+  integrity sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-module-transforms@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz#a2b37d3da3b2344fe085dab234426f2b9a2fa5f6"
+  integrity sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+    "@babel/traverse" "^7.28.3"
+
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/helper-validator-option@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz#fa52f5b1e7db1ab049445b421c4471303897702f"
+  integrity sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==
+
+"@babel/helpers@^7.28.4":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.28.4.tgz#fe07274742e95bdf7cf1443593eeb8926ab63827"
+  integrity sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==
+  dependencies:
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.4"
+
+"@babel/parser@^7.24.4", "@babel/parser@^7.27.2", "@babel/parser@^7.28.3", "@babel/parser@^7.28.4":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.4.tgz#da25d4643532890932cc03f7705fe19637e03fa8"
+  integrity sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==
+  dependencies:
+    "@babel/types" "^7.28.4"
+
+"@babel/template@^7.27.2":
+  version "7.27.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
+  integrity sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/parser" "^7.27.2"
+    "@babel/types" "^7.27.1"
+
+"@babel/traverse@^7.27.1", "@babel/traverse@^7.28.3", "@babel/traverse@^7.28.4":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.28.4.tgz#8d456101b96ab175d487249f60680221692b958b"
+  integrity sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.28.3"
+    "@babel/helper-globals" "^7.28.0"
+    "@babel/parser" "^7.28.4"
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.4"
+    debug "^4.3.1"
+
+"@babel/types@^7.27.1", "@babel/types@^7.28.2", "@babel/types@^7.28.4":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.4.tgz#0a4e618f4c60a7cd6c11cb2d48060e4dbe38ac3a"
+  integrity sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint/config-array@^0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.21.0.tgz#abdbcbd16b124c638081766392a4d6b509f72636"
+  integrity sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==
+  dependencies:
+    "@eslint/object-schema" "^2.1.6"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/config-helpers@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@eslint/config-helpers/-/config-helpers-0.3.1.tgz#d316e47905bd0a1a931fa50e669b9af4104d1617"
+  integrity sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==
+
+"@eslint/core@^0.15.2":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.15.2.tgz#59386327d7862cc3603ebc7c78159d2dcc4a868f"
+  integrity sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==
+  dependencies:
+    "@types/json-schema" "^7.0.15"
+
+"@eslint/eslintrc@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.3.1.tgz#e55f7f1dd400600dd066dbba349c4c0bac916964"
+  integrity sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^10.0.1"
+    globals "^14.0.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@9.33.0":
+  version "9.33.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.33.0.tgz#475c92fdddab59b8b8cab960e3de2564a44bf368"
+  integrity sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==
+
+"@eslint/object-schema@^2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.6.tgz#58369ab5b5b3ca117880c0f6c0b0f32f6950f24f"
+  integrity sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==
+
+"@eslint/plugin-kit@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz#fd8764f0ee79c8ddab4da65460c641cefee017c5"
+  integrity sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==
+  dependencies:
+    "@eslint/core" "^0.15.2"
+    levn "^0.4.1"
+
+"@humanfs/core@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
+  integrity sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==
+
+"@humanfs/node@^0.16.6":
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/@humanfs/node/-/node-0.16.6.tgz#ee2a10eaabd1131987bf0488fd9b820174cd765e"
+  integrity sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==
+  dependencies:
+    "@humanfs/core" "^0.19.1"
+    "@humanwhocodes/retry" "^0.3.0"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/retry@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.1.tgz#c72a5c76a9fbaf3488e231b13dc52c0da7bab42a"
+  integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
+
+"@humanwhocodes/retry@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.2.tgz#1860473de7dfa1546767448f333db80cb0ff2161"
+  integrity sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==
+
+"@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
+  integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/remapping@^2.3.5":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1"
+  integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.28":
+  version "0.3.31"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz#db15d6781c931f3a251a3dac39501c98a6082fd0"
+  integrity sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/json-schema@^7.0.15":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.14.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
+acorn@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
+  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+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=
+
+baseline-browser-mapping@^2.8.9:
+  version "2.8.10"
+  resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz#32eb5e253d633fa3fa3ffb1685fabf41680d9e8a"
+  integrity sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==
+
+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"
+
+browserslist@^4.24.0:
+  version "4.26.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.26.3.tgz#40fbfe2d1cd420281ce5b1caa8840049c79afb56"
+  integrity sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==
+  dependencies:
+    baseline-browser-mapping "^2.8.9"
+    caniuse-lite "^1.0.30001746"
+    electron-to-chromium "^1.5.227"
+    node-releases "^2.0.21"
+    update-browserslist-db "^1.1.3"
+
+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==
+
+caniuse-lite@^1.0.30001746:
+  version "1.0.30001746"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001746.tgz#199d20f04f5369825e00ff7067d45d5dfa03aee7"
+  integrity sha512-eA7Ys/DGw+pnkWWSE/id29f2IcPHVoE8wxtvE5JdvD2V28VTDPy1yEeo11Guz0sJ4ZeGRcm3uaTcAqK1LXaphA==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+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=
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cross-spawn@^7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+debug@^4.1.0:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
+debug@^4.3.1, debug@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+electron-to-chromium@^1.5.227:
+  version "1.5.228"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.228.tgz#38b849bc8714bd21fb64f5ad56bf8cfd8638e1e9"
+  integrity sha512-nxkiyuqAn4MJ1QbobwqJILiDtu/jk14hEAWaMiJmNPh1Z+jqoFlBFZjdXwLWGeVSeu9hGLg6+2G9yJaW8rBIFA==
+
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+"eslint-plugin-react-hooks@link:../../build/oss-stable/eslint-plugin-react-hooks":
+  version "0.0.0"
+  uid ""
+
+eslint-scope@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.4.0.tgz#88e646a207fad61436ffa39eb505147200655c82"
+  integrity sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-visitor-keys@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
+  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
+
+eslint-visitor-keys@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1"
+  integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
+
+eslint@^9.33.0:
+  version "9.33.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.33.0.tgz#cc186b3d9eb0e914539953d6a178a5b413997b73"
+  integrity sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.12.1"
+    "@eslint/config-array" "^0.21.0"
+    "@eslint/config-helpers" "^0.3.1"
+    "@eslint/core" "^0.15.2"
+    "@eslint/eslintrc" "^3.3.1"
+    "@eslint/js" "9.33.0"
+    "@eslint/plugin-kit" "^0.3.5"
+    "@humanfs/node" "^0.16.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@humanwhocodes/retry" "^0.4.2"
+    "@types/estree" "^1.0.6"
+    "@types/json-schema" "^7.0.15"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.6"
+    debug "^4.3.2"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^8.4.0"
+    eslint-visitor-keys "^4.2.1"
+    espree "^10.4.0"
+    esquery "^1.5.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^8.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+
+espree@^10.0.1:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.3.0.tgz#29267cf5b0cb98735b65e64ba07e0ed49d1eed8a"
+  integrity sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==
+  dependencies:
+    acorn "^8.14.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.2.0"
+
+espree@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.4.0.tgz#d54f4949d4629005a1fa168d937c3ff1f7e2a837"
+  integrity sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==
+  dependencies:
+    acorn "^8.15.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.2.1"
+
+esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+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.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
+  dependencies:
+    flat-cache "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.4"
+
+flatted@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
+  integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+hermes-estree@0.25.1:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480"
+  integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==
+
+hermes-parser@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1"
+  integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==
+  dependencies:
+    hermes-estree "0.25.1"
+
+ignore@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+import-fresh@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.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=
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.0, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+jiti@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.4.2.tgz#d19b7732ebb6116b06e2038da74a55366faef560"
+  integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==
+
+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-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+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-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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+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"
+
+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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=
+
+node-releases@^2.0.21:
+  version "2.0.21"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.21.tgz#f59b018bc0048044be2d4c4c04e4c8b18160894c"
+  integrity sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+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"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+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==
+
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+typescript@^5.4.3:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
+  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
+
+update-browserslist-db@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420"
+  integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+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"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+"zod-validation-error@^3.5.0 || ^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918"
+  integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==
+
+"zod@^3.25.0 || ^4.0.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.2.0.tgz#01e86f2c2b6d525a1b9fa6dbe78beccad082118f"
+  integrity sha512-Bd5fw9wlIhtqCCxotZgdTOMwGm1a0u75wARVEY9HMs1X17trvA/lMi4+MGK5EUfYkXVTbX8UDiDKW4OgzHVUZw==
diff --git a/fixtures/expiration/.gitignore b/fixtures/expiration/.gitignore
new file mode 100644
index 00000000000..f3c33645788
--- /dev/null
+++ b/fixtures/expiration/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+public/react.development.js
+public/react-dom.development.js
\ No newline at end of file
diff --git a/fixtures/expiration/package.json b/fixtures/expiration/package.json
new file mode 100644
index 00000000000..d99c064c5b1
--- /dev/null
+++ b/fixtures/expiration/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "expiration-2",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
+    "react-scripts": "1.0.17"
+  },
+  "scripts": {
+    "predev":
+      "cp ../../build/oss-experimental/react/umd/react.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom.development.js public/",
+    "dev": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/fixtures/expiration/public/index.html b/fixtures/expiration/public/index.html
new file mode 100644
index 00000000000..c33fd0f5cde
--- /dev/null
+++ b/fixtures/expiration/public/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <script src="/react.development.js"></script>
+  <script src="/react-dom.development.js"></script>
+  <title>Expiration Example</title>
+</head>
+
+<body>
+  <h1>Expiration Example</h1>
+  <p>This fixture demonstrates expiration using the
+    <code>timeout</code> option of
+    <code>requestIdleCallback</code>. If it's working correctly, you should see below a number that increments approximately once every second (the expiration
+    time of a low priority update.) If there is no counter, or if it increases too slowly or quickly, something is broken.
+  </p>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/fixtures/expiration/src/index.js b/fixtures/expiration/src/index.js
new file mode 100644
index 00000000000..f3b9def1ccd
--- /dev/null
+++ b/fixtures/expiration/src/index.js
@@ -0,0 +1,34 @@
+const React = global.React;
+const ReactDOM = global.ReactDOM;
+
+class Counter extends React.unstable_AsyncComponent {
+  state = {counter: 0};
+  onCommit() {
+    setImmediate(() => {
+      this.setState(state => ({
+        counter: state.counter + 1,
+      }));
+    });
+  }
+  componentDidMount() {
+    this.onCommit();
+  }
+  componentDidUpdate() {
+    this.onCommit();
+  }
+  render() {
+    return <h1>{this.state.counter}</h1>;
+  }
+}
+
+const interval = 200;
+function block() {
+  const endTime = performance.now() + interval;
+  while (performance.now() < endTime) {}
+}
+setInterval(block, interval);
+
+// Should render a counter that increments approximately every second (the
+// expiration time of a low priority update).
+ReactDOM.render(<Counter />, document.getElementById('root'));
+block();
diff --git a/fixtures/expiration/yarn.lock b/fixtures/expiration/yarn.lock
new file mode 100644
index 00000000000..a03e6565889
--- /dev/null
+++ b/fixtures/expiration/yarn.lock
@@ -0,0 +1,6718 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abab@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@~1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+acorn-dynamic-import@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+  dependencies:
+    acorn "^4.0.3"
+
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  dependencies:
+    acorn "^4.0.4"
+
+acorn-jsx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.3, acorn@^4.0.4:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+acorn@^5.0.0, acorn@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
+
+address@1.0.3, address@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+
+ajv-keywords@^2.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"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.3.0.tgz#4414ff74a50879c208ee5fdc826e32c303549eda"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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"
+
+ansi-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
+  dependencies:
+    string-width "^1.0.1"
+
+ansi-escapes@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-escapes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+
+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, ansi-regex@^2.1.1:
+  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-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.0.0, ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+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"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
+  dependencies:
+    ast-types-flow "0.0.7"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+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-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+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.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1.js@^4.0.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.2.tgz#8117ef4f7ed87cd8f89044b5bff97ac243a16c9a"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+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"
+
+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.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.1.2, async@^2.1.4, async@^2.4.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+autoprefixer@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
+  dependencies:
+    browserslist "^2.5.1"
+    caniuse-lite "^1.0.30000748"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.13"
+    postcss-value-parser "^3.2.3"
+
+autoprefixer@^6.3.1:
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  dependencies:
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.16"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+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.2.1, aws4@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+axobject-query@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
+  dependencies:
+    ast-types-flow "0.0.7"
+
+babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.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"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@6.26.0, 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-eslint@7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
+babel-generator@^6.18.0, babel-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-builder-react-jsx@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
+
+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"
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+  dependencies:
+    babel-helper-get-function-arity "^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-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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-jest@20.0.3, babel-jest@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-20.0.3.tgz#e4a03b13dc10389e140fc645d09ffc4ced301671"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-plugin-istanbul "^4.0.0"
+    babel-preset-jest "^20.0.3"
+
+babel-loader@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
+  dependencies:
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-dynamic-import-node@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.1.0.tgz#bd1d88ac7aaf98df4917c384373b04d971a2b37a"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-istanbul@^4.0.0:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
+  dependencies:
+    find-up "^2.1.0"
+    istanbul-lib-instrument "^1.7.5"
+    test-exclude "^4.1.1"
+
+babel-plugin-jest-hoist@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
+
+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-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"
+
+babel-plugin-syntax-dynamic-import@6.18.0, babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-flow@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-jsx@^6.3.13, 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"
+
+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-syntax-trailing-function-commas@^6.22.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"
+
+babel-plugin-transform-class-properties@6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  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.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.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"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.23.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"
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.23.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.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"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  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-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.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"
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.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"
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.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"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+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-constant-elements@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz#2f119bf4d2cdd45eb9baaae574053c604f6147dd"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.23.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx-self@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.22.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.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
+  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, babel-plugin-transform-regenerator@^6.22.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-runtime@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-preset-env@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.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@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-20.0.3.tgz#cbacaadecb5d689ca1e1de1360ebfc66862c178a"
+  dependencies:
+    babel-plugin-jest-hoist "^20.0.3"
+
+babel-preset-react-app@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.1.0.tgz#d77f6061ab9d7bf4b3cdc86b7cde9ded0df03e48"
+  dependencies:
+    babel-plugin-dynamic-import-node "1.1.0"
+    babel-plugin-syntax-dynamic-import "6.18.0"
+    babel-plugin-transform-class-properties "6.24.1"
+    babel-plugin-transform-object-rest-spread "6.26.0"
+    babel-plugin-transform-react-constant-elements "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-plugin-transform-regenerator "6.26.0"
+    babel-plugin-transform-runtime "6.23.0"
+    babel-preset-env "1.6.1"
+    babel-preset-react "6.24.1"
+
+babel-preset-react@6.24.1:
+  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-register@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, 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"
+
+babel-template@^6.16.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"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.18.0, babel-traverse@^6.23.1, 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"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.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"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.17.0, babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+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.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.4.7:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+
+bn.js@^5.0.0, bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+
+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"
+
+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:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
+boxen@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"
+  dependencies:
+    ansi-align "^1.1.0"
+    camelcase "^2.1.0"
+    chalk "^1.1.1"
+    cli-boxes "^1.0.0"
+    filled-array "^1.0.0"
+    object-assign "^4.0.1"
+    repeating "^2.0.0"
+    string-width "^1.0.1"
+    widest-line "^1.0.0"
+
+brace-expansion@^1.0.0, brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-resolve@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f"
+  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.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+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-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  dependencies:
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
+
+browserslist@^2.1.2, browserslist@^2.5.1:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.0.tgz#706aca15c53be15610f466e348cbfa0c00a6a379"
+  dependencies:
+    caniuse-lite "^1.0.30000760"
+    electron-to-chromium "^1.3.27"
+
+bser@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
+  dependencies:
+    node-int64 "^0.4.0"
+
+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-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, builtin-modules@^1.1.1:
+  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"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  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"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+
+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-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0, camelcase@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+caniuse-api@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
+  dependencies:
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30000760"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000760.tgz#3ea29473eb78a6ccb09f2eb73ac9e1debfec528d"
+
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000760:
+  version "1.0.30000760"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000760.tgz#ec720395742f1c7ec8947fd6dd2604e77a8f98ff"
+
+capture-stack-trace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
+
+case-sensitive-paths-webpack-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@1.1.3, 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"
+  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.1.0, chalk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.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"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+ci-info@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.1.tgz#47b44df118c48d2597b56d342e7e25791060171a"
+
+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"
+
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  dependencies:
+    chalk "^1.1.3"
+
+clean-css@4.1.x:
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
+  dependencies:
+    source-map "0.5.x"
+
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+
+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-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+
+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"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  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"
+
+color-convert@^1.3.0, color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+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"
+
+compressible@~2.0.11:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
+  dependencies:
+    mime-db ">= 1.30.0 < 2"
+
+compression@^1.5.2:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.1.tgz#eff2603efc2e22cf86f35d2eb93589f9875373db"
+  dependencies:
+    accepts "~1.3.4"
+    bytes "3.0.0"
+    compressible "~2.0.11"
+    debug "2.6.9"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    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.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+configstore@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
+  dependencies:
+    dot-prop "^3.0.0"
+    graceful-fs "^4.1.2"
+    mkdirp "^0.5.0"
+    object-assign "^4.0.1"
+    os-tmpdir "^1.0.0"
+    osenv "^0.1.0"
+    uuid "^2.0.1"
+    write-file-atomic "^1.1.2"
+    xdg-basedir "^2.0.0"
+
+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-type-parser@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+
+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.4.0, convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
+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"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
+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@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-error-class@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hash@^1.2.0:
+  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.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  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-hmac@^1.1.7:
+  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@5.1.0, 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"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.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"
+  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-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-loader@0.28.7:
+  version "0.28.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
+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-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  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"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+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"
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  dependencies:
+    cssom "0.3.x"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
+damerau-levenshtein@^1.0.0:
+  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"
+
+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.2.0, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.0.1, 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"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+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.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+del@^2.0.2, del@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  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"
+
+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, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+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-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-libc@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.2.tgz#71ad5d204bf17a6a6ca8f450c61454066ef461e1"
+
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
+detect-port-alt@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.3.tgz#a4d2f061d757a034ecf37c514260a98750f2b131"
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+diff@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.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.0.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+  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.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+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"
+
+dom-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/dom-urls/-/dom-urls-1.1.0.tgz#001ddf81628cd1e706125c7176f53ccec55d918e"
+  dependencies:
+    urijs "^1.16.1"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+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"
+
+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"
+
+dot-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  dependencies:
+    is-obj "^1.0.0"
+
+dotenv@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
+
+duplexer2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  dependencies:
+    readable-stream "^2.0.2"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.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.2.7, electron-to-chromium@^1.3.27:
+  version "1.3.27"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  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"
+
+elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+emoji-regex@^6.1.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+enhanced-resolve@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    object-assign "^4.0.1"
+    tapable "^0.2.7"
+
+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.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.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"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  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:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.35"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.35.tgz#18ee858ce6a3c45c7d79e91c15fcca9ec568494f"
+  dependencies:
+    es6-iterator "~2.0.1"
+    es6-symbol "~3.1.1"
+
+es6-iterator@^2.0.1, es6-iterator@~2.0.1:
+  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-map@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  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@^4.0.5:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
+  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.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"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-weak-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    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"
+
+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.6.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.5.6"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-config-react-app@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-2.0.1.tgz#fd0503da01ae608f0c6ae8861de084975142230e"
+
+eslint-import-resolver-node@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz#4422574cde66a9a7b099938ee4d508a199e0e3cc"
+  dependencies:
+    debug "^2.6.8"
+    resolve "^1.2.0"
+
+eslint-loader@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.9.0.tgz#7e1be9feddca328d3dcfaef1ad49d5beffe83a13"
+  dependencies:
+    loader-fs-cache "^1.0.0"
+    loader-utils "^1.0.2"
+    object-assign "^4.0.1"
+    object-hash "^1.1.4"
+    rimraf "^2.6.1"
+
+eslint-module-utils@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.1.1.tgz#abaec824177613b8a95b299639e1b6facf473449"
+  dependencies:
+    debug "^2.6.8"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-flowtype@2.39.1:
+  version "2.39.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5"
+  dependencies:
+    lodash "^4.15.0"
+
+eslint-plugin-import@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz#fa1b6ef31fcb3c501c09859c1b86f1fc5b986894"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.6.8"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.1"
+    eslint-module-utils "^2.1.1"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    read-pkg-up "^2.0.0"
+
+eslint-plugin-jsx-a11y@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
+  dependencies:
+    aria-query "^0.7.0"
+    array-includes "^3.0.3"
+    ast-types-flow "0.0.7"
+    axobject-query "^0.1.0"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.4.0"
+
+eslint-plugin-react@7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
+  dependencies:
+    doctrine "^2.0.0"
+    has "^1.0.1"
+    jsx-ast-utils "^2.0.0"
+    prop-types "^15.5.10"
+
+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@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7"
+  dependencies:
+    ajv "^5.2.0"
+    babel-code-frame "^6.22.0"
+    chalk "^2.1.0"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^3.0.1"
+    doctrine "^2.0.0"
+    eslint-scope "^3.7.1"
+    espree "^3.5.1"
+    esquery "^1.0.0"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^9.17.0"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    inquirer "^3.0.6"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    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"
+    strip-ansi "^4.0.0"
+    strip-json-comments "~2.0.1"
+    table "^4.0.1"
+    text-table "~0.2.0"
+
+espree@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
+  dependencies:
+    acorn "^5.2.1"
+    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"
+
+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.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
+esrecurse@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  dependencies:
+    estraverse "^4.1.0"
+    object-assign "^4.0.1"
+
+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.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"
+
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+eventsource@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  dependencies:
+    original ">=0.0.5"
+
+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.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.1.tgz#163b98a6e89e6b65b47c2a28d215bc1f63989c38"
+  dependencies:
+    merge "^1.1.3"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    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"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+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"
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+express@^4.13.3:
+  version "4.16.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
+  dependencies:
+    accepts "~1.3.4"
+    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.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.0"
+    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.2"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.1"
+    serve-static "1.13.1"
+    setprototypeof "1.1.0"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend@~3.0.0, extend@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+external-editor@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.5.tgz#52c249a3981b9ba187c7cacf5beb50bf1d91a6bc"
+  dependencies:
+    iconv-lite "^0.4.17"
+    jschardet "^1.4.2"
+    tmp "^0.0.33"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.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"
+
+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"
+
+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"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+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.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^1.8.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.2.tgz#a24cf47827f82d38fb59a69ad70b76e3b6ae7383"
+  dependencies:
+    bser "1.0.2"
+
+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"
+
+fbjs@^0.8.16:
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+figures@^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"
+
+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"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-loader@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
+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"
+
+filesize@3.5.11:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+filled-array@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
+
+finalhandler@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.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@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
+  dependencies:
+    circular-json "^0.3.1"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  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"
+
+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.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    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"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+fs-extra@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fsevents@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2, 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.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.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"
+  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@1.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"
+  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"
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+globals@^9.17.0, globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.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"
+
+got@^5.0.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
+  dependencies:
+    create-error-class "^3.0.1"
+    duplexer2 "^0.1.4"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    node-status-codes "^1.0.0"
+    object-assign "^4.0.1"
+    parse-json "^2.1.0"
+    pinkie-promise "^2.0.0"
+    read-all-stream "^3.0.0"
+    readable-stream "^2.0.5"
+    timed-out "^3.0.0"
+    unzip-response "^1.0.2"
+    url-parse-lax "^1.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+
+gzip-size@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+  dependencies:
+    duplexer "^0.1.1"
+
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+
+handlebars@^4.0.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+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@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    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"
+  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-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.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.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
+he@1.1.x:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+
+hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
+  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"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
+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"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+homedir-polyfill@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+
+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"
+
+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.1:
+  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.2.3:
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.1.x"
+    commander "2.11.x"
+    he "1.1.x"
+    ncname "1.0.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.1.x"
+
+html-webpack-plugin@2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz#e987f421853d3b6938c8c4c8171842e5fd17af23"
+  dependencies:
+    bluebird "^3.4.7"
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    toposort "^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, 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-parser-js@>=0.4.0:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.9.tgz#ea1a04fb64adff0242e9974f297dd4c3cad271e1"
+
+http-proxy-middleware@~0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy@^1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.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@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+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@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+ignore@^3.3.3:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+
+import-local@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8"
+  dependencies:
+    pkg-dir "^2.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"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.0, 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"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@3.3.0, inquirer@^3.0.6:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.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"
+    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"
+    through "^2.3.6"
+
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  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"
+
+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.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
+
+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-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+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.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.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-ci@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.0.10.tgz#f739336b2632365061a9d48270cd56ae3369318e"
+  dependencies:
+    ci-info "^1.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-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  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"
+  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-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"
+  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"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-obj@^1.0.0:
+  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.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.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"
+  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-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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+
+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-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+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"
+
+is-root@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5"
+
+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"
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
+
+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"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-api@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-hook "^1.1.0"
+    istanbul-lib-instrument "^1.9.1"
+    istanbul-lib-report "^1.1.2"
+    istanbul-lib-source-maps "^1.2.2"
+    istanbul-reports "^1.1.3"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
+
+istanbul-lib-hook@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
+  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.1.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+  dependencies:
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.1.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+  dependencies:
+    handlebars "^4.0.3"
+
+jest-changed-files@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-20.0.3.tgz#9394d5cc65c438406149bef1bf4d52b68e03e3f8"
+
+jest-cli@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-20.0.4.tgz#e532b19d88ae5bc6c417e8b0593a6fe954b1dc93"
+  dependencies:
+    ansi-escapes "^1.4.0"
+    callsites "^2.0.0"
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    is-ci "^1.0.10"
+    istanbul-api "^1.1.1"
+    istanbul-lib-coverage "^1.0.1"
+    istanbul-lib-instrument "^1.4.2"
+    istanbul-lib-source-maps "^1.1.0"
+    jest-changed-files "^20.0.3"
+    jest-config "^20.0.4"
+    jest-docblock "^20.0.3"
+    jest-environment-jsdom "^20.0.3"
+    jest-haste-map "^20.0.4"
+    jest-jasmine2 "^20.0.4"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve-dependencies "^20.0.3"
+    jest-runtime "^20.0.4"
+    jest-snapshot "^20.0.3"
+    jest-util "^20.0.3"
+    micromatch "^2.3.11"
+    node-notifier "^5.0.2"
+    pify "^2.3.0"
+    slash "^1.0.0"
+    string-length "^1.0.1"
+    throat "^3.0.0"
+    which "^1.2.12"
+    worker-farm "^1.3.1"
+    yargs "^7.0.2"
+
+jest-config@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-20.0.4.tgz#e37930ab2217c913605eff13e7bd763ec48faeea"
+  dependencies:
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    jest-environment-jsdom "^20.0.3"
+    jest-environment-node "^20.0.3"
+    jest-jasmine2 "^20.0.4"
+    jest-matcher-utils "^20.0.3"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-validate "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-diff@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-20.0.3.tgz#81f288fd9e675f0fb23c75f1c2b19445fe586617"
+  dependencies:
+    chalk "^1.1.3"
+    diff "^3.2.0"
+    jest-matcher-utils "^20.0.3"
+    pretty-format "^20.0.3"
+
+jest-docblock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
+
+jest-environment-jsdom@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-20.0.3.tgz#048a8ac12ee225f7190417713834bb999787de99"
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+    jsdom "^9.12.0"
+
+jest-environment-node@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-20.0.3.tgz#d488bc4612af2c246e986e8ae7671a099163d403"
+  dependencies:
+    jest-mock "^20.0.3"
+    jest-util "^20.0.3"
+
+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"
+  dependencies:
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.11"
+    jest-docblock "^20.0.3"
+    micromatch "^2.3.11"
+    sane "~1.6.0"
+    worker-farm "^1.3.1"
+
+jest-jasmine2@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-20.0.4.tgz#fcc5b1411780d911d042902ef1859e852e60d5e1"
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-matchers "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-snapshot "^20.0.3"
+    once "^1.4.0"
+    p-map "^1.1.1"
+
+jest-matcher-utils@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz#b3a6b8e37ca577803b0832a98b164f44b7815612"
+  dependencies:
+    chalk "^1.1.3"
+    pretty-format "^20.0.3"
+
+jest-matchers@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-matchers/-/jest-matchers-20.0.3.tgz#ca69db1c32db5a6f707fa5e0401abb55700dfd60"
+  dependencies:
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-message-util "^20.0.3"
+    jest-regex-util "^20.0.3"
+
+jest-message-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-20.0.3.tgz#6aec2844306fcb0e6e74d5796c1006d96fdd831c"
+  dependencies:
+    chalk "^1.1.3"
+    micromatch "^2.3.11"
+    slash "^1.0.0"
+
+jest-mock@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-20.0.3.tgz#8bc070e90414aa155c11a8d64c869a0d5c71da59"
+
+jest-regex-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-20.0.3.tgz#85bbab5d133e44625b19faf8c6aa5122d085d762"
+
+jest-resolve-dependencies@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-20.0.3.tgz#6e14a7b717af0f2cb3667c549de40af017b1723a"
+  dependencies:
+    jest-regex-util "^20.0.3"
+
+jest-resolve@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-20.0.4.tgz#9448b3e8b6bafc15479444c6499045b7ffe597a5"
+  dependencies:
+    browser-resolve "^1.11.2"
+    is-builtin-module "^1.0.0"
+    resolve "^1.3.2"
+
+jest-runtime@^20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-20.0.4.tgz#a2c802219c4203f754df1404e490186169d124d8"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^20.0.3"
+    babel-plugin-istanbul "^4.0.0"
+    chalk "^1.1.3"
+    convert-source-map "^1.4.0"
+    graceful-fs "^4.1.11"
+    jest-config "^20.0.4"
+    jest-haste-map "^20.0.4"
+    jest-regex-util "^20.0.3"
+    jest-resolve "^20.0.4"
+    jest-util "^20.0.3"
+    json-stable-stringify "^1.0.1"
+    micromatch "^2.3.11"
+    strip-bom "3.0.0"
+    yargs "^7.0.2"
+
+jest-snapshot@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-20.0.3.tgz#5b847e1adb1a4d90852a7f9f125086e187c76566"
+  dependencies:
+    chalk "^1.1.3"
+    jest-diff "^20.0.3"
+    jest-matcher-utils "^20.0.3"
+    jest-util "^20.0.3"
+    natural-compare "^1.4.0"
+    pretty-format "^20.0.3"
+
+jest-util@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-20.0.3.tgz#0c07f7d80d82f4e5a67c6f8b9c3fe7f65cfd32ad"
+  dependencies:
+    chalk "^1.1.3"
+    graceful-fs "^4.1.11"
+    jest-message-util "^20.0.3"
+    jest-mock "^20.0.3"
+    jest-validate "^20.0.3"
+    leven "^2.1.0"
+    mkdirp "^0.5.1"
+
+jest-validate@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-20.0.3.tgz#d0cfd1de4f579f298484925c280f8f1d94ec3cab"
+  dependencies:
+    chalk "^1.1.3"
+    jest-matcher-utils "^20.0.3"
+    leven "^2.1.0"
+    pretty-format "^20.0.3"
+
+jest@20.0.4:
+  version "20.0.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-20.0.4.tgz#3dd260c2989d6dad678b1e9cc4d91944f6d602ac"
+  dependencies:
+    jest-cli "^20.0.4"
+
+js-base64@^2.1.9:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
+
+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-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+jschardet@^1.4.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.6.0.tgz#c7d1a71edcff2839db2f9ec30fc5d5ebd3c1a678"
+
+jsdom@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.1"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-loader@^0.5.4:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+
+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@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+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, json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  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@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
+
+jsx-ast-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
+  dependencies:
+    array-includes "^3.0.3"
+
+killable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
+
+kind-of@^3.0.2:
+  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"
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+latest-version@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
+  dependencies:
+    package-json "^2.0.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-req@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+
+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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+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"
+
+loader-fs-cache@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "0.5.1"
+
+loader-runner@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
+
+loader-utils@^0.2.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.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"
+
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+
+lodash.defaults@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
+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.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.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+
+loglevel@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.0.tgz#ae0caa561111498c5ba13723d6fb631d24003934"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.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"
+
+lowercase-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+
+lru-cache@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+make-dir@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51"
+  dependencies:
+    pify "^3.0.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"
+
+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"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.17"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.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"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  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"
+
+merge@^1.1.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.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.30.0 < 2":
+  version "1.31.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.31.0.tgz#a49cd8f3ebf3ed1a482b60561d9105ad40ca74cb"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.4.1, mime@^1.3.4, mime@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, 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.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"
+
+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"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+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.1.1"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  dependencies:
+    dns-packet "^1.0.1"
+    thunky "^0.1.0"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+ncname@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+  dependencies:
+    xml-char-classes "^1.0.0"
+
+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"
+  dependencies:
+    lower-case "^1.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"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-forge@0.6.33:
+  version "0.6.33"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+
+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.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    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 "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-notifier@^5.0.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
+  dependencies:
+    growly "^1.3.0"
+    semver "^5.3.0"
+    shellwords "^0.1.0"
+    which "^1.2.12"
+
+node-pre-gyp@^0.6.36, node-pre-gyp@^0.6.39:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
+
+node-status-codes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
+
+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, normalize-package-data@^2.3.4:
+  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.0.0, normalize-path@^2.0.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-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.4.0:
+  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"
+
+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:
+  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"
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
+
+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"
+
+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-hash@^1.1.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.2.0.tgz#e96af0e96981996a1d47f88ead8f74f1ebc4422b"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+
+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.3, 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"
+
+opn@5.1.0, opn@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  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"
+
+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@>=0.0.5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  dependencies:
+    url-parse "1.0.x"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  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"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+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"
+
+osenv@^0.1.0, osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^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-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+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-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+
+package-json@^2.0.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
+  dependencies:
+    got "^5.0.0"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+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"
+
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  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-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.1.0, 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-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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, 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"
+
+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"
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+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-to-regexp@^1.0.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+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"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  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@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+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, pify@^2.3.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"
+
+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"
+
+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"
+
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+
+portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-flexbugs-fixes@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.2.0.tgz#9b8b932c53f9cf13ba0f61875303e447c33dcc51"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.8.tgz#8c67ddb029407dfafe684a406cfc16bad2ce0814"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.3.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-scope@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-values@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, 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-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
+  version "5.2.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
+  version "6.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885"
+  dependencies:
+    chalk "^2.3.0"
+    source-map "^0.6.1"
+    supports-color "^4.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"
+
+prepend-http@^1.0.0, prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+
+pretty-error@^2.0.2:
+  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@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-20.0.3.tgz#020e350a560a1fe1a98dc3beb6ccffb386de8b14"
+  dependencies:
+    ansi-regex "^2.1.1"
+    ansi-styles "^3.0.0"
+
+private@^0.1.6, private@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+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"
+
+process@^0.11.0:
+  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@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
+  dependencies:
+    asap "~2.0.3"
+
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.10, prop-types@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+proxy-addr@~2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.5.2"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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"
+
+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"
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+
+qs@6.5.1, qs@~6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+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@0.0.x:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
+
+querystringify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
+
+raf@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
+  dependencies:
+    performance-now "^2.1.0"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.3.tgz#b96b7df587f01dd91726c418f30553b1418e3d62"
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@^1.0.3, 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"
+
+rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-dev-utils@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111"
+  dependencies:
+    address "1.0.3"
+    babel-code-frame "6.26.0"
+    chalk "1.1.3"
+    cross-spawn "5.1.0"
+    detect-port-alt "1.1.3"
+    escape-string-regexp "1.0.5"
+    filesize "3.5.11"
+    global-modules "1.0.0"
+    gzip-size "3.0.0"
+    inquirer "3.3.0"
+    is-root "1.0.0"
+    opn "5.1.0"
+    react-error-overlay "^3.0.0"
+    recursive-readdir "2.2.1"
+    shell-quote "1.6.1"
+    sockjs-client "1.1.4"
+    strip-ansi "3.0.1"
+    text-table "0.2.0"
+
+react-dom@^16.1.1:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react-error-overlay@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
+
+react-scripts@1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.17.tgz#c30029123b561a060227af4d7797d50a222d3fbf"
+  dependencies:
+    autoprefixer "7.1.6"
+    babel-core "6.26.0"
+    babel-eslint "7.2.3"
+    babel-jest "20.0.3"
+    babel-loader "7.1.2"
+    babel-preset-react-app "^3.1.0"
+    babel-runtime "6.26.0"
+    case-sensitive-paths-webpack-plugin "2.1.1"
+    chalk "1.1.3"
+    css-loader "0.28.7"
+    dotenv "4.0.0"
+    eslint "4.10.0"
+    eslint-config-react-app "^2.0.1"
+    eslint-loader "1.9.0"
+    eslint-plugin-flowtype "2.39.1"
+    eslint-plugin-import "2.8.0"
+    eslint-plugin-jsx-a11y "5.1.1"
+    eslint-plugin-react "7.4.0"
+    extract-text-webpack-plugin "3.0.2"
+    file-loader "1.1.5"
+    fs-extra "3.0.1"
+    html-webpack-plugin "2.29.0"
+    jest "20.0.4"
+    object-assign "4.1.1"
+    postcss-flexbugs-fixes "3.2.0"
+    postcss-loader "2.0.8"
+    promise "8.0.1"
+    raf "3.4.0"
+    react-dev-utils "^4.2.1"
+    style-loader "0.19.0"
+    sw-precache-webpack-plugin "0.11.4"
+    url-loader "0.6.2"
+    webpack "3.8.1"
+    webpack-dev-server "2.9.4"
+    webpack-manifest-plugin "1.3.2"
+    whatwg-fetch "2.0.3"
+  optionalDependencies:
+    fsevents "1.1.2"
+
+react@^16.1.1:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+read-all-stream@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
+  dependencies:
+    pinkie-promise "^2.0.0"
+    readable-stream "^2.0.0"
+
+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"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.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"
+
+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@^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.4, readable-stream@^2.2.2, readable-stream@^2.2.6, readable-stream@^2.2.9:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  dependencies:
+    inherits "^2.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+recursive-readdir@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"
+  dependencies:
+    minimatch "3.0.3"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  dependencies:
+    balanced-match "^0.4.2"
+
+regenerate@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  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"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+registry-auth-token@^3.0.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  dependencies:
+    rc "^1.1.6"
+    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"
+  dependencies:
+    rc "^1.0.1"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  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.1"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "~0.1"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+request@^2.79.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
+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@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
+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-uncached@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+requires-port@1.0.x, requires-port@1.x.x, 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-dir@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  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"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.2.0, resolve@^1.3.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  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"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, 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"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
+
+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"
+
+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"
+  dependencies:
+    rx-lite "*"
+
+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"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, 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.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sane@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-1.6.0.tgz#9610c452307a135d29c1fdfe2547034180c46775"
+  dependencies:
+    anymatch "^1.3.0"
+    exec-sh "^0.2.0"
+    fb-watchman "^1.8.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.10.0"
+
+sax@^1.2.1, sax@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
+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.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  dependencies:
+    node-forge "0.6.33"
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  dependencies:
+    semver "^5.0.3"
+
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+send@0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    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.3.1"
+
+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.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.1"
+
+serviceworker-cache-polyfill@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
+
+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-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4, setimmediate@^1.0.5:
+  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"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+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.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shellwords@^0.1.0:
+  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"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+
+slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
+sockjs-client@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+  dependencies:
+    debug "^2.6.6"
+    eventsource "0.1.6"
+    faye-websocket "~0.11.0"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.1.8"
+
+sockjs@0.3.18:
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^2.0.2"
+
+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-support@^0.4.15:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+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"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+spdy-transport@^2.0.18:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
+
+spdy@^3.4.1:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  dependencies:
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
+    select-hose "^2.0.0"
+    spdy-transport "^2.0.18"
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+
+statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+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-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+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@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
+  dependencies:
+    strip-ansi "^3.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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@^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_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"
+
+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@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringstream@~0.0.4, stringstream@~0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@3.0.1, 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, strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.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-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.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"
+
+style-loader@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.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@^3.1.2, supports-color@^3.2.3:
+  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@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  dependencies:
+    has-flag "^2.0.0"
+
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+sw-precache-webpack-plugin@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/sw-precache-webpack-plugin/-/sw-precache-webpack-plugin-0.11.4.tgz#a695017e54eed575551493a519dc1da8da2dc5e0"
+  dependencies:
+    del "^2.2.2"
+    sw-precache "^5.1.1"
+    uglify-js "^3.0.13"
+
+sw-precache@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.0.tgz#eb6225ce580ceaae148194578a0ad01ab7ea199c"
+  dependencies:
+    dom-urls "^1.1.0"
+    es6-promise "^4.0.5"
+    glob "^7.1.1"
+    lodash.defaults "^4.2.0"
+    lodash.template "^4.4.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    pretty-bytes "^4.0.2"
+    sw-toolbox "^3.4.0"
+    update-notifier "^1.0.3"
+
+sw-toolbox@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/sw-toolbox/-/sw-toolbox-3.6.0.tgz#26df1d1c70348658e4dea2884319149b7b3183b5"
+  dependencies:
+    path-to-regexp "^1.0.1"
+    serviceworker-cache-polyfill "^4.0.0"
+
+symbol-tree@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+table@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+  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"
+
+tapable@^0.2.7:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+test-exclude@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+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@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+thunky@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+
+time-stamp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+
+timed-out@^3.0.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+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@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+toposort@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
+
+tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+tryit@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+
+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-is@~1.6.15:
+  version "1.6.15"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.15"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+ua-parser-js@^0.7.9:
+  version "0.7.17"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
+
+uglify-js@3.1.x, uglify-js@^3.0.13:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.9.tgz#dffca799308cf327ec3ac77eeacb8e196ce3b452"
+  dependencies:
+    commander "~2.11.0"
+    source-map "~0.6.1"
+
+uglify-js@^2.8.29:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  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"
+
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+unzip-response@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+
+update-notifier@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
+  dependencies:
+    boxen "^0.6.0"
+    chalk "^1.0.0"
+    configstore "^2.0.0"
+    is-npm "^1.0.0"
+    latest-version "^2.0.0"
+    lazy-req "^1.1.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^2.0.0"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+urijs@^1.16.1:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"
+
+url-loader@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
+
+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"
+  dependencies:
+    prepend-http "^1.0.1"
+
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+url-parse@^1.1.8:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.2.0.tgz#3a19e8aaa6d023ddd27dcc44cb4fc8f7fec23986"
+  dependencies:
+    querystringify "~1.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"
+
+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@0.10.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"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+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@^2.0.1, uuid@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+
+uuid@^3.0.0, uuid@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.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.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+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@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+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"
+
+watch@~0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
+
+watchpack@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
+  dependencies:
+    async "^2.1.2"
+    chokidar "^1.7.0"
+    graceful-fs "^4.1.2"
+
+wbuf@^1.1.0, wbuf@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+
+webidl-conversions@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+
+webpack-dev-middleware@^1.11.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    time-stamp "^2.0.0"
+
+webpack-dev-server@2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.4.tgz#7883e61759c6a4b33e9b19ec4037bd4ab61428d1"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^1.6.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.13.3"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^0.1.1"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.18"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.1"
+    supports-color "^4.2.1"
+    webpack-dev-middleware "^1.11.0"
+    yargs "^6.6.0"
+
+webpack-manifest-plugin@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"
+  dependencies:
+    fs-extra "^0.30.0"
+    lodash ">=3.5 <5"
+
+webpack-sources@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.2.tgz#d0148ec083b3b5ccef1035a6b3ec16442983b27a"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.8.1.tgz#b16968a81100abe61608b0153c9159ef8bb2bd83"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
+    async "^2.1.2"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
+
+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:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
+  dependencies:
+    iconv-lite "0.4.19"
+
+whatwg-fetch@2.0.3, whatwg-fetch@>=0.10.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+
+whatwg-url@^4.3.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+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.12, which@^1.2.14, which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  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"
+  dependencies:
+    string-width "^1.0.2"
+
+widest-line@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+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"
+
+worker-farm@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.1.tgz#8e9f4a7da4f3c595aa600903051b969390423fa1"
+  dependencies:
+    errno "^0.1.4"
+    xtend "^4.0.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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@^1.1.2:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    slide "^1.1.5"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+xdg-basedir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
+  dependencies:
+    os-homedir "^1.0.0"
+
+xml-char-classes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+
+xml-name-validator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+
+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:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@^6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
+
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.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"
+    yargs-parser "^7.0.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/fiber-debugger/.env b/fixtures/fiber-debugger/.env
new file mode 100644
index 00000000000..9be79323192
--- /dev/null
+++ b/fixtures/fiber-debugger/.env
@@ -0,0 +1 @@
+NODE_PATH=../../build/packages
\ No newline at end of file
diff --git a/fixtures/fiber-debugger/.gitignore b/fixtures/fiber-debugger/.gitignore
new file mode 100644
index 00000000000..56b6cc8a311
--- /dev/null
+++ b/fixtures/fiber-debugger/.gitignore
@@ -0,0 +1,14 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log
diff --git a/fixtures/fiber-debugger/README.md b/fixtures/fiber-debugger/README.md
new file mode 100644
index 00000000000..f52646d9c65
--- /dev/null
+++ b/fixtures/fiber-debugger/README.md
@@ -0,0 +1,25 @@
+# Fiber Debugger
+
+This is a debugger handy for visualizing how [Fiber](https://github.com/facebook/react/issues/6170) works internally.
+
+**It is only meant to be used by React contributors, and not by React users.**
+
+It is likely that it might get broken at some point. If it's broken, ping [Dan](https://twitter.com/dan_abramov).
+
+### Running
+
+First, `npm run build` in React root repo folder.
+
+Then `npm install` and `npm start` in this folder.
+
+Open `http://localhost:3000` in Chrome.
+
+### Features
+
+* Edit code that uses `ReactNoop` renderer
+* Visualize how relationships between fibers change over time
+* Current tree is displayed in green
+
+![fiber debugger](https://d17oy1vhnax1f7.cloudfront.net/items/3R2W1H2M3a0h3p1l133r/Screen%20Recording%202016-10-21%20at%2020.41.gif?v=e4323e51)
+
+
diff --git a/fixtures/fiber-debugger/package.json b/fixtures/fiber-debugger/package.json
new file mode 100644
index 00000000000..71b28291205
--- /dev/null
+++ b/fixtures/fiber-debugger/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "react-fiber-debugger",
+  "version": "0.0.1",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.9.5"
+  },
+  "dependencies": {
+    "dagre": "^0.7.4",
+    "pretty-format": "^4.2.1",
+    "react-draggable": "^2.2.6",
+    "react-motion": "^0.5.0"
+  },
+  "scripts": {
+    "dev": "react-scripts start",
+    "build": "react-scripts build"
+  }
+}
diff --git a/fixtures/fiber-debugger/public/favicon.ico b/fixtures/fiber-debugger/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/fixtures/fiber-debugger/public/favicon.ico differ
diff --git a/fixtures/fiber-debugger/public/index.html b/fixtures/fiber-debugger/public/index.html
new file mode 100644
index 00000000000..418da90bcc7
--- /dev/null
+++ b/fixtures/fiber-debugger/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/fixtures/fiber-debugger/src/App.js b/fixtures/fiber-debugger/src/App.js
new file mode 100644
index 00000000000..75d74c76b70
--- /dev/null
+++ b/fixtures/fiber-debugger/src/App.js
@@ -0,0 +1,260 @@
+import React, {Component} from 'react';
+import Draggable from 'react-draggable';
+import ReactNoop from 'react-noop-renderer';
+import Editor from './Editor';
+import Fibers from './Fibers';
+import describeFibers from './describeFibers';
+
+// The only place where we use it.
+const ReactFiberInstrumentation =
+  ReactNoop.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+    .ReactFiberInstrumentation;
+
+function getFiberState(root, workInProgress) {
+  if (!root) {
+    return null;
+  }
+  return describeFibers(root.current, workInProgress);
+}
+
+const defaultCode = `
+log('Render <div>Hello</div>');
+ReactNoop.render(<div>Hello</div>);
+ReactNoop.flush();
+
+log('Render <h1>Goodbye</h1>');
+ReactNoop.render(<h1>Goodbye</h1>);
+ReactNoop.flush();
+`;
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      code: localStorage.getItem('fiber-debugger-code') || defaultCode,
+      isEditing: false,
+      history: [],
+      currentStep: 0,
+      show: {
+        alt: false,
+        child: true,
+        sibling: true,
+        return: false,
+        fx: false,
+      },
+      graphSettings: {
+        rankdir: 'TB',
+        trackActive: true,
+      },
+    };
+  }
+
+  componentDidMount() {
+    this.runCode(this.state.code);
+  }
+
+  runCode(code) {
+    let currentStage;
+    let currentRoot;
+
+    ReactFiberInstrumentation.debugTool = null;
+    ReactNoop.render(null);
+    ReactNoop.flush();
+    ReactFiberInstrumentation.debugTool = {
+      onMountContainer: root => {
+        currentRoot = root;
+      },
+      onUpdateContainer: root => {
+        currentRoot = root;
+      },
+      onBeginWork: fiber => {
+        const fibers = getFiberState(currentRoot, fiber);
+        const stage = currentStage;
+        this.setState(({history}) => ({
+          history: [
+            ...history,
+            {
+              action: 'BEGIN',
+              fibers,
+              stage,
+            },
+          ],
+        }));
+      },
+      onCompleteWork: fiber => {
+        const fibers = getFiberState(currentRoot, fiber);
+        const stage = currentStage;
+        this.setState(({history}) => ({
+          history: [
+            ...history,
+            {
+              action: 'COMPLETE',
+              fibers,
+              stage,
+            },
+          ],
+        }));
+      },
+      onCommitWork: fiber => {
+        const fibers = getFiberState(currentRoot, fiber);
+        const stage = currentStage;
+        this.setState(({history}) => ({
+          history: [
+            ...history,
+            {
+              action: 'COMMIT',
+              fibers,
+              stage,
+            },
+          ],
+        }));
+      },
+    };
+    window.React = React;
+    window.ReactNoop = ReactNoop;
+    window.expect = () => ({
+      toBe() {},
+      toContain() {},
+      toEqual() {},
+    });
+    window.log = s => (currentStage = s);
+    // eslint-disable-next-line
+    eval(
+      window.Babel.transform(code, {
+        presets: ['react', 'es2015'],
+      }).code
+    );
+  }
+
+  handleEdit = e => {
+    e.preventDefault();
+    this.setState({
+      isEditing: true,
+    });
+  };
+
+  handleCloseEdit = nextCode => {
+    localStorage.setItem('fiber-debugger-code', nextCode);
+    this.setState({
+      isEditing: false,
+      history: [],
+      currentStep: 0,
+      code: nextCode,
+    });
+    this.runCode(nextCode);
+  };
+
+  render() {
+    const {history, currentStep, isEditing, code} = this.state;
+    if (isEditing) {
+      return <Editor code={code} onClose={this.handleCloseEdit} />;
+    }
+
+    const {fibers, action, stage} = history[currentStep] || {};
+    let friendlyAction;
+    if (fibers) {
+      let wipFiber = fibers.descriptions[fibers.workInProgressID];
+      let friendlyFiber = wipFiber.type || wipFiber.tag + ' #' + wipFiber.id;
+      friendlyAction = `After ${action} on ${friendlyFiber}`;
+    }
+
+    return (
+      <div style={{height: '100%'}}>
+        {fibers && (
+          <Draggable>
+            <Fibers
+              fibers={fibers}
+              show={this.state.show}
+              graphSettings={this.state.graphSettings}
+            />
+          </Draggable>
+        )}
+        <div
+          style={{
+            width: '100%',
+            textAlign: 'center',
+            position: 'fixed',
+            bottom: 0,
+            padding: 10,
+            zIndex: 1,
+            backgroundColor: '#fafafa',
+            border: '1px solid #ccc',
+          }}>
+          <div style={{width: '50%', float: 'left'}}>
+            <input
+              type="range"
+              style={{width: '25%'}}
+              min={0}
+              max={history.length - 1}
+              value={currentStep}
+              onChange={e =>
+                this.setState({currentStep: Number(e.target.value)})
+              }
+            />
+            <p>
+              Step {currentStep}: {friendlyAction} (
+              <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
+                Edit
+              </a>
+              )
+            </p>
+            {stage && <p>Stage: {stage}</p>}
+            {Object.keys(this.state.show).map(key => (
+              <label style={{marginRight: '10px'}} key={key}>
+                <input
+                  type="checkbox"
+                  checked={this.state.show[key]}
+                  onChange={e => {
+                    this.setState(({show}) => ({
+                      show: {...show, [key]: !show[key]},
+                    }));
+                  }}
+                />
+                {key}
+              </label>
+            ))}
+          </div>
+          <div style={{width: '50%', float: 'right'}}>
+            <h5>Graph Settings</h5>
+            <p>
+              <label style={{display: ''}}>
+                Direction:
+                <select
+                  onChange={e => {
+                    const rankdir = e.target.value;
+                    this.setState(({graphSettings}) => ({
+                      graphSettings: {...graphSettings, rankdir},
+                    }));
+                  }}>
+                  <option value="TB">top-down</option>
+                  <option value="BT">down-top</option>
+                  <option value="LR">left-right</option>
+                  <option value="RL">right-left</option>
+                </select>
+              </label>
+            </p>
+            <p>
+              <label style={{marginRight: '10px'}}>
+                <input
+                  type="checkbox"
+                  checked={this.state.graphSettings.trackActive}
+                  onChange={e => {
+                    this.setState(({graphSettings}) => ({
+                      graphSettings: {
+                        ...graphSettings,
+                        trackActive: !graphSettings.trackActive,
+                      },
+                    }));
+                  }}
+                />
+                Track active fiber
+              </label>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/fixtures/fiber-debugger/src/Editor.js b/fixtures/fiber-debugger/src/Editor.js
new file mode 100644
index 00000000000..e3a18f63e51
--- /dev/null
+++ b/fixtures/fiber-debugger/src/Editor.js
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+
+class Editor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      code: props.code,
+    };
+  }
+
+  render() {
+    return (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+        }}>
+        <textarea
+          value={this.state.code}
+          onChange={e => this.setState({code: e.target.value})}
+          style={{
+            height: '80%',
+            width: '100%',
+            fontSize: '15px',
+          }}
+        />
+        <div style={{height: '20%', textAlign: 'center'}}>
+          <button
+            onClick={() => this.props.onClose(this.state.code)}
+            style={{fontSize: 'large'}}>
+            Run
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Editor;
diff --git a/fixtures/fiber-debugger/src/Fibers.js b/fixtures/fiber-debugger/src/Fibers.js
new file mode 100644
index 00000000000..0ae596948fb
--- /dev/null
+++ b/fixtures/fiber-debugger/src/Fibers.js
@@ -0,0 +1,407 @@
+import React from 'react';
+import {Motion, spring} from 'react-motion';
+import dagre from 'dagre';
+// import prettyFormat from 'pretty-format';
+// import reactElement from 'pretty-format/plugins/ReactElement';
+
+function getFiberColor(fibers, id) {
+  if (fibers.currentIDs.indexOf(id) > -1) {
+    return 'lightgreen';
+  }
+  if (id === fibers.workInProgressID) {
+    return 'yellow';
+  }
+  return 'lightyellow';
+}
+
+function Graph(props) {
+  const {rankdir, trackActive} = props.settings;
+  var g = new dagre.graphlib.Graph();
+  g.setGraph({
+    width: 1000,
+    height: 1000,
+    nodesep: 50,
+    edgesep: 150,
+    ranksep: 100,
+    marginx: 100,
+    marginy: 100,
+    rankdir,
+  });
+
+  var edgeLabels = {};
+  React.Children.forEach(props.children, function (child) {
+    if (!child) {
+      return;
+    }
+    if (child.type.isVertex) {
+      g.setNode(child.key, {
+        label: child,
+        width: child.props.width,
+        height: child.props.height,
+      });
+    } else if (child.type.isEdge) {
+      const relationshipKey = child.props.source + ':' + child.props.target;
+      if (!edgeLabels[relationshipKey]) {
+        edgeLabels[relationshipKey] = [];
+      }
+      edgeLabels[relationshipKey].push(child);
+    }
+  });
+
+  Object.keys(edgeLabels).forEach(key => {
+    const children = edgeLabels[key];
+    const child = children[0];
+    g.setEdge(child.props.source, child.props.target, {
+      label: child,
+      allChildren: children.map(c => c.props.children),
+      weight: child.props.weight,
+    });
+  });
+
+  dagre.layout(g);
+
+  var activeNode = g
+    .nodes()
+    .map(v => g.node(v))
+    .find(node => node.label.props.isActive);
+  const [winX, winY] = [window.innerWidth / 2, window.innerHeight / 2];
+  var focusDx = trackActive && activeNode ? winX - activeNode.x : 0;
+  var focusDy = trackActive && activeNode ? winY - activeNode.y : 0;
+
+  var nodes = g.nodes().map(v => {
+    var node = g.node(v);
+    return (
+      <Motion
+        style={{
+          x: props.isDragging ? node.x + focusDx : spring(node.x + focusDx),
+          y: props.isDragging ? node.y + focusDy : spring(node.y + focusDy),
+        }}
+        key={node.label.key}>
+        {interpolatingStyle =>
+          React.cloneElement(node.label, {
+            x: interpolatingStyle.x + props.dx,
+            y: interpolatingStyle.y + props.dy,
+            vanillaX: node.x,
+            vanillaY: node.y,
+          })
+        }
+      </Motion>
+    );
+  });
+
+  var edges = g.edges().map(e => {
+    var edge = g.edge(e);
+    let idx = 0;
+    return (
+      <Motion
+        style={edge.points.reduce((bag, point) => {
+          bag[idx + ':x'] = props.isDragging
+            ? point.x + focusDx
+            : spring(point.x + focusDx);
+          bag[idx + ':y'] = props.isDragging
+            ? point.y + focusDy
+            : spring(point.y + focusDy);
+          idx++;
+          return bag;
+        }, {})}
+        key={edge.label.key}>
+        {interpolatedStyle => {
+          let points = [];
+          Object.keys(interpolatedStyle).forEach(key => {
+            const [idx, prop] = key.split(':');
+            if (!points[idx]) {
+              points[idx] = {x: props.dx, y: props.dy};
+            }
+            points[idx][prop] += interpolatedStyle[key];
+          });
+          return React.cloneElement(edge.label, {
+            points,
+            id: edge.label.key,
+            children: edge.allChildren.join(', '),
+          });
+        }}
+      </Motion>
+    );
+  });
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: '100%',
+      }}>
+      {edges}
+      {nodes}
+    </div>
+  );
+}
+
+function Vertex(props) {
+  if (Number.isNaN(props.x) || Number.isNaN(props.y)) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        border: '1px solid black',
+        left: props.x - props.width / 2,
+        top: props.y - props.height / 2,
+        width: props.width,
+        height: props.height,
+        overflow: 'hidden',
+        padding: '4px',
+        wordWrap: 'break-word',
+      }}>
+      {props.children}
+    </div>
+  );
+}
+Vertex.isVertex = true;
+
+const strokes = {
+  alt: 'blue',
+  child: 'green',
+  sibling: 'darkgreen',
+  return: 'red',
+  fx: 'purple',
+};
+
+function Edge(props) {
+  var points = props.points;
+  var path = 'M' + points[0].x + ' ' + points[0].y + ' ';
+
+  if (!points[0].x || !points[0].y) {
+    return null;
+  }
+
+  for (var i = 1; i < points.length; i++) {
+    path += 'L' + points[i].x + ' ' + points[i].y + ' ';
+    if (!points[i].x || !points[i].y) {
+      return null;
+    }
+  }
+
+  var lineID = props.id;
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+      }}>
+      <defs>
+        <path d={path} id={lineID} />
+        <marker
+          id="markerCircle"
+          markerWidth="8"
+          markerHeight="8"
+          refX="5"
+          refY="5">
+          <circle cx="5" cy="5" r="3" style={{stroke: 'none', fill: 'black'}} />
+        </marker>
+        <marker
+          id="markerArrow"
+          markerWidth="13"
+          markerHeight="13"
+          refX="2"
+          refY="6"
+          orient="auto">
+          <path d="M2,2 L2,11 L10,6 L2,2" style={{fill: 'black'}} />
+        </marker>
+      </defs>
+
+      <use
+        xlinkHref={`#${lineID}`}
+        fill="none"
+        stroke={strokes[props.kind]}
+        style={{
+          markerStart: 'url(#markerCircle)',
+          markerEnd: 'url(#markerArrow)',
+        }}
+      />
+      <text>
+        <textPath xlinkHref={`#${lineID}`}>
+          {'     '}
+          {props.children}
+        </textPath>
+      </text>
+    </svg>
+  );
+}
+Edge.isEdge = true;
+
+function formatPriority(priority) {
+  switch (priority) {
+    case 1:
+      return 'synchronous';
+    case 2:
+      return 'task';
+    case 3:
+      return 'hi-pri work';
+    case 4:
+      return 'lo-pri work';
+    case 5:
+      return 'offscreen work';
+    default:
+      throw new Error('Unknown priority.');
+  }
+}
+
+export default function Fibers({fibers, show, graphSettings, ...rest}) {
+  const items = Object.keys(fibers.descriptions).map(
+    id => fibers.descriptions[id]
+  );
+
+  const isDragging = rest.className.indexOf('dragging') > -1;
+  const [_, sdx, sdy] =
+    rest.style.transform.match(/translate\((-?\d+)px,(-?\d+)px\)/) || [];
+  const dx = Number(sdx);
+  const dy = Number(sdy);
+
+  return (
+    <div
+      {...rest}
+      style={{
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        ...rest.style,
+        transform: null,
+      }}>
+      <Graph
+        className="graph"
+        dx={dx}
+        dy={dy}
+        isDragging={isDragging}
+        settings={graphSettings}>
+        {items.map(fiber => [
+          <Vertex
+            key={fiber.id}
+            width={150}
+            height={100}
+            isActive={fiber.id === fibers.workInProgressID}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: getFiberColor(fibers, fiber.id),
+              }}
+              title={
+                /*prettyFormat(fiber, { plugins: [reactElement ]})*/
+                'todo: this was hanging last time I tried to pretty print'
+              }>
+              <small>
+                {fiber.tag} #{fiber.id}
+              </small>
+              <br />
+              {fiber.type}
+              <br />
+              {fibers.currentIDs.indexOf(fiber.id) === -1 ? (
+                <small>
+                  {fiber.pendingWorkPriority !== 0 && [
+                    <span key="span">
+                      Needs: {formatPriority(fiber.pendingWorkPriority)}
+                    </span>,
+                    <br key="br" />,
+                  ]}
+                  {fiber.memoizedProps !== null &&
+                    fiber.pendingProps !== null && [
+                      fiber.memoizedProps === fiber.pendingProps
+                        ? 'Can reuse memoized.'
+                        : 'Cannot reuse memoized.',
+                      <br key="br" />,
+                    ]}
+                </small>
+              ) : (
+                <small>Committed</small>
+              )}
+              {fiber.flags && [
+                <br key="br" />,
+                <small key="small">Effect: {fiber.flags}</small>,
+              ]}
+            </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>
+          ),
+        ])}
+      </Graph>
+    </div>
+  );
+}
diff --git a/fixtures/fiber-debugger/src/describeFibers.js b/fixtures/fiber-debugger/src/describeFibers.js
new file mode 100644
index 00000000000..044380e21be
--- /dev/null
+++ b/fixtures/fiber-debugger/src/describeFibers.js
@@ -0,0 +1,111 @@
+let nextFiberID = 1;
+const fiberIDMap = new WeakMap();
+
+function getFiberUniqueID(fiber) {
+  if (!fiberIDMap.has(fiber)) {
+    fiberIDMap.set(fiber, nextFiberID++);
+  }
+  return fiberIDMap.get(fiber);
+}
+
+function getFriendlyTag(tag) {
+  switch (tag) {
+    case 0:
+      return '[indeterminate]';
+    case 1:
+      return '[fn]';
+    case 2:
+      return '[class]';
+    case 3:
+      return '[root]';
+    case 4:
+      return '[portal]';
+    case 5:
+      return '[host]';
+    case 6:
+      return '[text]';
+    case 7:
+      return '[coroutine]';
+    case 8:
+      return '[handler]';
+    case 9:
+      return '[yield]';
+    case 10:
+      return '[frag]';
+    default:
+      throw new Error('Unknown tag.');
+  }
+}
+
+function getFriendlyEffect(flags) {
+  const effects = {
+    1: 'Performed Work',
+    2: 'Placement',
+    4: 'Update',
+    8: 'Deletion',
+    16: 'Content reset',
+    32: 'Callback',
+    64: 'Err',
+    128: 'Ref',
+  };
+  return Object.keys(effects)
+    .filter(flag => flag & flags)
+    .map(flag => effects[flag])
+    .join(' & ');
+}
+
+export default function describeFibers(rootFiber, workInProgress) {
+  let descriptions = {};
+  function acknowledgeFiber(fiber) {
+    if (!fiber) {
+      return null;
+    }
+    if (!fiber.return && fiber.tag !== 3) {
+      return null;
+    }
+    const id = getFiberUniqueID(fiber);
+    if (descriptions[id]) {
+      return id;
+    }
+    descriptions[id] = {};
+    Object.assign(descriptions[id], {
+      ...fiber,
+      id: id,
+      tag: getFriendlyTag(fiber.tag),
+      flags: getFriendlyEffect(fiber.flags),
+      type: fiber.type && '<' + (fiber.type.name || fiber.type) + '>',
+      stateNode: `[${typeof fiber.stateNode}]`,
+      return: acknowledgeFiber(fiber.return),
+      child: acknowledgeFiber(fiber.child),
+      sibling: acknowledgeFiber(fiber.sibling),
+      nextEffect: acknowledgeFiber(fiber.nextEffect),
+      firstEffect: acknowledgeFiber(fiber.firstEffect),
+      lastEffect: acknowledgeFiber(fiber.lastEffect),
+      alternate: acknowledgeFiber(fiber.alternate),
+    });
+    return id;
+  }
+
+  const rootID = acknowledgeFiber(rootFiber);
+  const workInProgressID = acknowledgeFiber(workInProgress);
+
+  let currentIDs = new Set();
+  function markAsCurrent(id) {
+    currentIDs.add(id);
+    const fiber = descriptions[id];
+    if (fiber.sibling) {
+      markAsCurrent(fiber.sibling);
+    }
+    if (fiber.child) {
+      markAsCurrent(fiber.child);
+    }
+  }
+  markAsCurrent(rootID);
+
+  return {
+    descriptions,
+    rootID,
+    currentIDs: Array.from(currentIDs),
+    workInProgressID,
+  };
+}
diff --git a/fixtures/fiber-debugger/src/index.css b/fixtures/fiber-debugger/src/index.css
new file mode 100644
index 00000000000..8685778e069
--- /dev/null
+++ b/fixtures/fiber-debugger/src/index.css
@@ -0,0 +1,15 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  height: 100vh;
+  cursor: -webkit-grab; cursor: -moz-grab;
+}
+
+#root {
+  height: 100vh;
+}
+
+* {
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/fixtures/fiber-debugger/src/index.js b/fixtures/fiber-debugger/src/index.js
new file mode 100644
index 00000000000..5d76a18a853
--- /dev/null
+++ b/fixtures/fiber-debugger/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/fixtures/fiber-debugger/yarn.lock b/fixtures/fiber-debugger/yarn.lock
new file mode 100644
index 00000000000..51f49cd4cb2
--- /dev/null
+++ b/fixtures/fiber-debugger/yarn.lock
@@ -0,0 +1,5340 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abab@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
+
+abbrev@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+acorn-globals@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  dependencies:
+    acorn "^4.0.4"
+
+acorn-jsx@^3.0.0, acorn-jsx@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.0, acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
+
+acorn@^5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
+
+ajv-keywords@^1.0.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.0.tgz#c11e6859eafff83e0dafc416929472eca946aa2c"
+
+ajv@^4.7.0:
+  version "4.10.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.4.tgz#c0974dd00b3464984892d6010aa9c2c945933254"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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-escapes@^1.1.0, ansi-escapes@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-html@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.5.tgz#0dcaa5a081206866bc240a3b773a184ea3b88b64"
+
+ansi-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+ansicolors@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
+
+anymatch@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.0 || ^1.1.13"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.3.0.tgz#cb8a9984e2862711c83c80ade5b8f5ca0de2b467"
+  dependencies:
+    ast-types-flow "0.0.7"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+
+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-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.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0, arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+assert-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+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.2, async@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+autoprefixer@6.7.2, autoprefixer@^6.3.1:
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.2.tgz#172ab07b998ae9b957530928a59a40be54a45023"
+  dependencies:
+    browserslist "^1.7.1"
+    caniuse-db "^1.0.30000618"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.11"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+babel-core@6.22.1, babel-core@^6.0.0:
+  version "6.22.1"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-generator "^6.22.0"
+    babel-helpers "^6.22.0"
+    babel-messages "^6.22.0"
+    babel-register "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.1"
+    babel-types "^6.22.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-core@^6.23.0:
+  version "6.23.1"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.23.1.tgz#c143cb621bb2f621710c220c5d579d15b8a442df"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-generator "^6.23.0"
+    babel-helpers "^6.23.0"
+    babel-messages "^6.23.0"
+    babel-register "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.23.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-eslint@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-traverse "^6.15.0"
+    babel-types "^6.15.0"
+    babylon "^6.13.0"
+    lodash.pickby "^4.6.0"
+
+babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.23.0.tgz#6b8edab956ef3116f79d8c84c5a3c05f32a74bc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.23.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.18.0.tgz#8ae814989f7a53682152e3401a04fabd0bb333a6"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-react-jsx@^6.22.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.23.0.tgz#d53fc8c996e0bc56d0de0fc4cc55a7138395ea4b"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.23.0"
+    esutils "^2.0.0"
+    lodash "^4.2.0"
+
+babel-helper-call-delegate@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.22.0.tgz#119921b56120f17e9dae3f74b4f5cc7bcc1b37ef"
+  dependencies:
+    babel-helper-hoist-variables "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-define-map@^6.18.0, babel-helper-define-map@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.18.0.tgz#8d6c85dc7fbb4c19be3de40474d18e97c3676ec2"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-explode-assignable-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.18.0.tgz#14b8e8c2d03ad735d4b20f1840b24cd1f65239fe"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-function-name@^6.18.0, babel-helper-function-name@^6.22.0, babel-helper-function-name@^6.8.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.23.0.tgz#25742d67175c8903dbe4b6cb9d9e1fcb8dcf23a6"
+  dependencies:
+    babel-helper-get-function-arity "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.23.0"
+    babel-traverse "^6.23.0"
+    babel-types "^6.23.0"
+
+babel-helper-get-function-arity@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.22.0.tgz#0beb464ad69dc7347410ac6ade9f03a50634f5ce"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-hoist-variables@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.18.0.tgz#a835b5ab8b46d6de9babefae4d98ea41e866b82a"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-hoist-variables@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.22.0.tgz#3eacbf731d80705845dd2e9718f600cfb9b4ba72"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-helper-optimise-call-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.18.0.tgz#9261d0299ee1a4f08a6dd28b7b7c777348fd8f0f"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-regex@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.18.0.tgz#ae0ebfd77de86cb2f1af258e2cc20b5fe893ecc6"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-remap-async-to-generator@^6.16.0:
+  version "6.20.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.20.3.tgz#9dd3b396f13e35ef63e538098500adc24c63c4e7"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.20.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.20.0"
+    babel-types "^6.20.0"
+
+babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.18.0.tgz#28ec69877be4144dbd64f4cc3a337e89f29a924e"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helpers@^6.22.0, babel-helpers@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.23.0.tgz#4f8f2e092d0b6a8808a4bde79c27f1e2ecf0d992"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.23.0"
+
+babel-jest@18.0.0, babel-jest@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-18.0.0.tgz#17ebba8cb3285c906d859e8707e4e79795fb65e3"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-plugin-istanbul "^3.0.0"
+    babel-preset-jest "^18.0.0"
+
+babel-loader@6.2.10:
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.11"
+    mkdirp "^0.5.1"
+    object-assign "^4.0.1"
+
+babel-messages@^6.22.0, babel-messages@^6.23.0, babel-messages@^6.8.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-check-es2015-constants@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-istanbul@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-3.1.2.tgz#11d5abde18425ec24b5d648c7e0b5d25cd354a22"
+  dependencies:
+    find-up "^1.1.2"
+    istanbul-lib-instrument "^1.4.2"
+    object-assign "^4.1.0"
+    test-exclude "^3.3.0"
+
+babel-plugin-jest-hoist@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-18.0.0.tgz#4150e70ecab560e6e7344adc849498072d34e12a"
+
+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-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"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-jsx@^6.3.13, 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"
+
+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-syntax-trailing-function-commas@^6.13.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.20.0.tgz#442835e19179f45b87e92d477d70b9f1f18b5c4f"
+
+babel-plugin-transform-async-to-generator@^6.8.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.16.0.tgz#19ec36cb1486b59f9f468adfa42ce13908ca2999"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.0"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-class-properties@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.22.0.tgz#aa78f8134495c7de06c097118ba061844e1dc1d8"
+  dependencies:
+    babel-helper-function-name "^6.22.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.8.0.tgz#ed95d629c4b5a71ae29682b998f70d9833eb366d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.6.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.21.0.tgz#e840687f922e70fb2c42bb13501838c174a115ed"
+  dependencies:
+    babel-runtime "^6.20.0"
+    babel-template "^6.15.0"
+    babel-traverse "^6.21.0"
+    babel-types "^6.21.0"
+    lodash "^4.2.0"
+
+babel-plugin-transform-es2015-classes@^6.6.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.18.0.tgz#ffe7a17321bf83e494dcda0ae3fc72df48ffd1d9"
+  dependencies:
+    babel-helper-define-map "^6.18.0"
+    babel-helper-function-name "^6.18.0"
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-helper-replace-supers "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.14.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-computed-properties@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.8.0.tgz#f51010fd61b3bd7b6b60a5fdfd307bb7a5279870"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-destructuring@^6.6.0:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.19.0.tgz#ff1d911c4b3f4cab621bd66702a869acd1900533"
+  dependencies:
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-for-of@^6.6.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.18.0.tgz#4c517504db64bf8cfc119a6b8f177211f2028a70"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-function-name@^6.3.13:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.9.0.tgz#8c135b17dbd064e5bba56ec511baaee2fca82719"
+  dependencies:
+    babel-helper-function-name "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.9.0"
+
+babel-plugin-transform-es2015-literals@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.8.0.tgz#50aa2e5c7958fc2ab25d74ec117e0cc98f046468"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.18.0, babel-plugin-transform-es2015-modules-amd@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.18.0.tgz#49a054cbb762bdf9ae2d8a807076cfade6141e40"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.18.0, babel-plugin-transform-es2015-modules-commonjs@^6.6.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.18.0.tgz#c15ae5bb11b32a0abdcc98a5837baa4ee8d67bcc"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.12.0:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.19.0.tgz#50438136eba74527efa00a5b0fefaf1dc4071da6"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.11.6"
+    babel-template "^6.14.0"
+
+babel-plugin-transform-es2015-modules-umd@^6.12.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.18.0.tgz#23351770ece5c1f8e83ed67cb1d7992884491e50"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-object-super@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.8.0.tgz#1b858740a5a4400887c23dcff6f4d56eea4a24c5"
+  dependencies:
+    babel-helper-replace-supers "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-parameters@^6.6.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.22.0.tgz#57076069232019094f27da8c68bb7162fe208dbb"
+  dependencies:
+    babel-helper-call-delegate "^6.22.0"
+    babel-helper-get-function-arity "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.0"
+    babel-types "^6.22.0"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-spread@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.8.0.tgz#0217f737e3b821fa5a669f187c6ed59205f05e9c"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.8.0.tgz#e73d300a440a35d5c64f5c2a344dc236e3df47be"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-template-literals@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.8.0.tgz#86eb876d0a2c635da4ec048b4f7de9dfc897e66b"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.6.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.18.0.tgz#0b14c48629c90ff47a0650077f6aa699bee35798"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.3.13:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.11.0.tgz#6298ceabaad88d50a3f4f392d8de997260f6ef2c"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.8.0.tgz#db25742e9339eade676ca9acec46f955599a68a4"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.8.0"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.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"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-object-rest-spread@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.22.0.tgz#1d419b55e68d2e4f64a5ff3373bd67d73c8e83bc"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-constant-elements@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.22.0.tgz#4af456f80d283e8be00f00f12852354defa08ee1"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.22.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-jsx-self@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.22.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.22.0, babel-plugin-transform-react-jsx@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.22.0.tgz#48556b7dd4c3fe97d1c943bcd54fc3f2561c1817"
+  dependencies:
+    babel-helper-builder-react-jsx "^6.22.0"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-regenerator@6.22.0, babel-plugin-transform-regenerator@^6.6.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.22.0.tgz#65740593a319c44522157538d690b84094617ea6"
+  dependencies:
+    regenerator-transform "0.9.8"
+
+babel-plugin-transform-runtime@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.22.0.tgz#10968d760bbf6517243081eec778e10fa828551c"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-strict-mode@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.18.0.tgz#df7cf2991fe046f44163dcd110d5ca43bc652b9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-preset-env@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.2.1.tgz#659178f54df74a74765f796be4d290b5beeb3f5f"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-syntax-trailing-function-commas "^6.13.0"
+    babel-plugin-transform-async-to-generator "^6.8.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.6.0"
+    babel-plugin-transform-es2015-classes "^6.6.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.6.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.6.0"
+    babel-plugin-transform-es2015-function-name "^6.3.13"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.8.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.6.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.12.0"
+    babel-plugin-transform-es2015-modules-umd "^6.12.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.6.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.3.13"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.6.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-exponentiation-operator "^6.8.0"
+    babel-plugin-transform-regenerator "^6.6.0"
+    browserslist "^1.4.0"
+    electron-to-chromium "^1.1.0"
+    invariant "^2.2.2"
+
+babel-preset-jest@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-18.0.0.tgz#84faf8ca3ec65aba7d5e3f59bbaed935ab24049e"
+  dependencies:
+    babel-plugin-jest-hoist "^18.0.0"
+
+babel-preset-react-app@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-2.2.0.tgz#3143bcf316049f78b5f9d0422fd7822ca4715ca4"
+  dependencies:
+    babel-plugin-transform-class-properties "6.22.0"
+    babel-plugin-transform-object-rest-spread "6.22.0"
+    babel-plugin-transform-react-constant-elements "6.22.0"
+    babel-plugin-transform-react-jsx "6.22.0"
+    babel-plugin-transform-react-jsx-self "6.22.0"
+    babel-plugin-transform-react-jsx-source "6.22.0"
+    babel-plugin-transform-regenerator "6.22.0"
+    babel-plugin-transform-runtime "6.22.0"
+    babel-preset-env "1.2.1"
+    babel-preset-react "6.22.0"
+    babel-runtime "6.22.0"
+
+babel-preset-react@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.22.0.tgz#7bc97e2d73eec4b980fb6b4e4e0884e81ccdc165"
+  dependencies:
+    babel-plugin-syntax-flow "^6.3.13"
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+    babel-plugin-transform-react-display-name "^6.22.0"
+    babel-plugin-transform-react-jsx "^6.22.0"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+
+babel-register@^6.22.0, babel-register@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.23.0.tgz#c9aa3d4cca94b51da34826c4a0f9e08145d74ff3"
+  dependencies:
+    babel-core "^6.23.0"
+    babel-runtime "^6.22.0"
+    core-js "^2.4.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.2"
+
+babel-runtime@6.22.0, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.9.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-runtime@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0, babel-template@^6.8.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.23.0"
+    babel-types "^6.23.0"
+    babylon "^6.11.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.15.0, babel-traverse@^6.18.0, babel-traverse@^6.20.0, babel-traverse@^6.21.0, babel-traverse@^6.22.0, babel-traverse@^6.22.1, babel-traverse@^6.23.0, babel-traverse@^6.23.1:
+  version "6.23.1"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.23.0"
+    babylon "^6.15.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.20.0, babel-types@^6.21.0, babel-types@^6.22.0, babel-types@^6.23.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
+
+balanced-match@^0.4.1, balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+batch@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+binary-extensions@^1.0.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.4.6:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+  dependencies:
+    balanced-match "^0.4.1"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browser-resolve@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@^1.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.1:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.5.tgz#eca4713897b51e444283241facf3985de49a9e2b"
+  dependencies:
+    caniuse-db "^1.0.30000624"
+    electron-to-chromium "^1.2.3"
+
+bser@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
+buffer@^4.9.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, builtin-modules@^1.1.1:
+  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@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  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"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+
+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@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+caniuse-api@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e"
+  dependencies:
+    browserslist "^1.0.1"
+    caniuse-db "^1.0.30000346"
+    lodash.memoize "^4.1.0"
+    lodash.uniq "^4.3.0"
+    shelljs "^0.7.0"
+
+caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000618, caniuse-db@^1.0.30000624:
+  version "1.0.30000624"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000624.tgz#554b87547895e36f5fe128f4b7448a2ea5bf2213"
+
+cardinal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-1.0.0.tgz#50e21c1b0aa37729f9377def196b5a9cec932ee9"
+  dependencies:
+    ansicolors "~0.2.1"
+    redeyed "~1.0.0"
+
+case-sensitive-paths-webpack-plugin@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-1.1.4.tgz#8aaedd5699a86cac2b34cf40d9b4145758978472"
+
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.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"
+  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"
+
+chokidar@^1.0.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+ci-info@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
+
+circular-json@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+
+clap@^1.0.9:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+clean-css@3.4.x:
+  version "3.4.23"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.23.tgz#604fbbca24c12feb59b02f00b84f1fb7ded6d001"
+  dependencies:
+    commander "2.8.x"
+    source-map "0.4.x"
+
+cli-cursor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-table@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
+  dependencies:
+    colors "1.0.3"
+
+cli-usage@^0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/cli-usage/-/cli-usage-0.1.4.tgz#7c01e0dc706c234b39c933838c8e20b2175776e2"
+  dependencies:
+    marked "^0.3.6"
+    marked-terminal "^1.6.2"
+
+cli-width@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+
+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"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+coa@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  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"
+
+color-convert@^1.3.0:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.8.2.tgz#be868184d7c8631766d54e7078e2672d7c7e3339"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.8.x:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commander@2.9.x, commander@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  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"
+
+compressible@~2.0.8:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.9.tgz#6daab4e2b599c2770dd9e21e7a891b1c5a755425"
+  dependencies:
+    mime-db ">= 1.24.0 < 2"
+
+compression@^1.5.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz#cceb121ecc9d09c52d7ad0c3350ea93ddd402bc3"
+  dependencies:
+    accepts "~1.3.3"
+    bytes "2.3.0"
+    compressible "~2.0.8"
+    debug "~2.2.0"
+    on-headers "~1.0.1"
+    vary "~1.1.0"
+
+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.4.6:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+connect-history-api-fallback@1.3.0, connect-history-api-fallback@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
+
+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.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+
+content-type-parser@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.1.tgz#c3e56988c53c65127fb46d4032a3a900246fdc94"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+convert-source-map@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+
+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"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+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@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.1.tgz#817f2c2039347a1e9bf7d090c0923e53f749ca82"
+  dependencies:
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+cross-spawn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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-loader@0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    loader-utils "~0.2.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.4"
+
+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-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  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"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+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"
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  dependencies:
+    cssom "0.3.x"
+
+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
+dagre@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.7.4.tgz#de72f0e74a550ce11ce638f0a136fed712398022"
+  dependencies:
+    graphlib "^1.0.5"
+    lodash "^3.10.0"
+
+damerau-levenshtein@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
+
+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"
+
+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.2.0, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+debug@^2.1.0, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
+  dependencies:
+    ms "0.7.2"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+default-require-extensions@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  dependencies:
+    strip-bom "^2.0.0"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+del@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  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"
+
+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.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+detect-port@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.1.0.tgz#fde7574591ea3de74445782643c3f921b2a4618c"
+  dependencies:
+    debug "^2.6.0"
+
+diff@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
+
+doctrine@1.3.x, doctrine@^1.2.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.3.0.tgz#13e75682b55518424276f7c173783456ef913d26"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+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.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+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"
+
+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"
+
+dotenv@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-2.0.0.tgz#bd759c357aaa70365e01c96b7b0bec08a6e0d949"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.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.1.0, electron-to-chromium@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.3.tgz#4b4d04d237c301f72e2d15c2137b2b79f9f5ab76"
+
+emoji-regex@^6.1.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.1.tgz#77486fe9cd45421d260a6238b88d721e2fad2050"
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+"errno@>=0.1.1 <0.2.0-0", errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+error-ex@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
+  version "0.10.12"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.7"
+    es6-symbol "3"
+
+es6-map@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-set "~0.1.3"
+    es6-symbol "~3.1.0"
+    event-emitter "~0.3.4"
+
+es6-set@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-symbol "3"
+    event-emitter "~0.3.4"
+
+es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+
+es6-weak-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.8"
+    es6-iterator "2"
+    es6-symbol "3"
+
+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.6.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  dependencies:
+    esprima "^2.7.1"
+    estraverse "^1.9.1"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.2.0"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-config-react-app@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-0.6.2.tgz#ee535cbaaf9e3576ea16b99afe720353d8730ec0"
+
+eslint-import-resolver-node@^0.2.0:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.2.3.tgz#5add8106e8c928db2cba232bcd9efa846e3da16c"
+  dependencies:
+    debug "^2.2.0"
+    object-assign "^4.0.1"
+    resolve "^1.1.6"
+
+eslint-loader@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.6.0.tgz#38f9a1e6c602a4f1f3f3516289726e5d26e6e165"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.7"
+    object-assign "^4.0.1"
+
+eslint-module-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-1.0.0.tgz#c4a57fd3a53efd8426cc2d5550aadab9bbd05fd0"
+  dependencies:
+    debug "2.2.0"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-flowtype@2.21.0:
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.21.0.tgz#a47e85abcdd181d37a336054bd552149ae387d9c"
+  dependencies:
+    lodash "^4.15.0"
+
+eslint-plugin-import@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.0.1.tgz#dcfe96357d476b3f822570d42c29bec66f5d9c5c"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.2.0"
+    doctrine "1.3.x"
+    eslint-import-resolver-node "^0.2.0"
+    eslint-module-utils "^1.0.0"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    pkg-up "^1.0.0"
+
+eslint-plugin-jsx-a11y@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-4.0.0.tgz#779bb0fe7b08da564a422624911de10061e048ee"
+  dependencies:
+    aria-query "^0.3.0"
+    ast-types-flow "0.0.7"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.0.0"
+    object-assign "^4.0.1"
+
+eslint-plugin-react@6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.4.1.tgz#7d1aade747db15892f71eee1fea4addf97bcfa2b"
+  dependencies:
+    doctrine "^1.2.2"
+    jsx-ast-utils "^1.3.1"
+
+eslint@3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.16.1.tgz#9bc31fc7341692cf772e80607508f67d711c5609"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    escope "^3.6.0"
+    espree "^3.4.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 "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+espree@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.1.tgz#28a83ab4aaed71ed8fe0f5efe61b76a05c13c4d2"
+  dependencies:
+    acorn "^5.0.1"
+    acorn-jsx "^3.0.0"
+
+esprima@^2.6.0, esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
+
+esrecurse@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  dependencies:
+    estraverse "~4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estraverse@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+
+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.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+
+event-emitter@~0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.7"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+eventsource@^0.1.3:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  dependencies:
+    original ">=0.0.5"
+
+exec-sh@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.0.tgz#14f75de3f20d286ef933099b2ce50a90359cef10"
+  dependencies:
+    merge "^1.1.3"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+express@^4.13.3:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.1"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    finalhandler "0.5.0"
+    fresh "0.3.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    path-to-regexp "0.1.7"
+    proxy-addr "~1.1.2"
+    qs "6.2.0"
+    range-parser "~1.2.0"
+    send "0.14.1"
+    serve-static "~1.11.1"
+    type-is "~1.6.13"
+    utils-merge "1.0.0"
+    vary "~1.1.0"
+
+extend@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
+  dependencies:
+    async "^1.5.0"
+    loader-utils "^0.2.3"
+    webpack-sources "^0.1.0"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+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.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.7.3.tgz#cc4074c7f4a4dfd03af54dd65c354b135132ce11"
+  dependencies:
+    websocket-driver ">=0.3.6"
+
+fb-watchman@^1.8.0, fb-watchman@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.0.tgz#6f268f1f347a6b3c875d1e89da7e1ed79adfc0ec"
+  dependencies:
+    bser "^1.0.2"
+
+fbjs@^0.8.9:
+  version "0.8.12"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+figures@^1.3.5:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+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"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-loader@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.10.0.tgz#bbe6db7474ac92c7f54fdc197cf547e98b6b8e12"
+  dependencies:
+    loader-utils "~0.2.5"
+
+filename-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+
+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"
+
+filesize@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.3.0.tgz#53149ea3460e3b2e024962a51648aa572cf98122"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.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-up@^1.0.0, find-up@^1.1.2:
+  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"
+
+flat-cache@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
+  dependencies:
+    circular-json "^0.3.1"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+
+for-own@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  dependencies:
+    for-in "^0.1.5"
+
+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.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+fresh@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+fs-extra@0.30.0, fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@1.0.17, fsevents@^1.0.0:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.17.tgz#8537f3f12272678765b4fd6528c0f1f66f8f4558"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fstream-ignore@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+gauge@~2.7.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.2.tgz#15cecc31b02d05345a5d6b0e171cdb3ad2307774"
+  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"
+    supports-color "^0.2.0"
+    wide-align "^1.1.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+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"
+  dependencies:
+    is-property "^1.0.0"
+
+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"
+
+getpass@^0.1.1:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  dependencies:
+    assert-plus "^1.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"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^9.0.0, globals@^9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+graphlib@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-1.0.7.tgz#0cab2df0ffe6abe070b2625bfa1edb6ec967b8b1"
+  dependencies:
+    lodash "^3.10.0"
+
+growly@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+
+gzip-size@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+  dependencies:
+    duplexer "^0.1.1"
+
+handlebars@^4.0.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^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"
+  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-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+he@1.1.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+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"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+html-entities@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+
+html-minifier@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.2.3.tgz#d2ff536e24d95726c332493d8f77d84dbed85372"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "3.4.x"
+    commander "2.9.x"
+    he "1.1.x"
+    ncname "1.0.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "2.7.x"
+
+html-webpack-plugin@2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.24.0.tgz#53697cea79a9f3cd1f8c239ac71f949d5673cacb"
+  dependencies:
+    bluebird "^3.4.6"
+    html-minifier "^3.1.0"
+    loader-utils "^0.2.16"
+    lodash "^4.16.4"
+    pretty-error "^2.0.2"
+    toposort "^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-errors@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+  dependencies:
+    inherits "2.0.3"
+    setprototypeof "1.0.2"
+    statuses ">= 1.3.1 < 2"
+
+http-proxy-middleware@0.17.3, http-proxy-middleware@~0.17.1:
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d"
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy@^1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@0.4.13, iconv-lite@~0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+icss-replace-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+ignore@^3.2.0:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.6.tgz#26e8da0644be0bb4cb39516f6c79f0e0f4ffe48c"
+
+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"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.0, inherits@~2.0.1:
+  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"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  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"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+interpret@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
+
+invariant@^2.2.0, invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  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"
+
+ipaddr.js@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+
+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-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+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:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+
+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-ci@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.0.10.tgz#f739336b2632365061a9d48270cd56ae3369318e"
+  dependencies:
+    ci-info "^1.0.0"
+
+is-dotfile@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-extglob@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  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"
+  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-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"
+  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"
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number@^2.0.2, is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  dependencies:
+    kind-of "^3.0.2"
+
+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.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.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"
+  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-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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  dependencies:
+    html-comment-regex "^1.1.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-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+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@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+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"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+istanbul-api@^1.1.0-alpha.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.1.tgz#d36e2f1560d1a43ce304c4ff7338182de61c8f73"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.0.0"
+    istanbul-lib-hook "^1.0.0"
+    istanbul-lib-instrument "^1.3.0"
+    istanbul-lib-report "^1.0.0-alpha.3"
+    istanbul-lib-source-maps "^1.1.0"
+    istanbul-reports "^1.0.0"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.0.0-alpha, istanbul-lib-coverage@^1.0.0-alpha.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.0.tgz#c3f9b6d226da12424064cce87fce0fb57fdfa7a2"
+
+istanbul-lib-hook@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.0.tgz#fc5367ee27f59268e8f060b0c7aaf051d9c425c5"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.1.1, istanbul-lib-instrument@^1.3.0, istanbul-lib-instrument@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.4.2.tgz#0e2fdfac93c1dabf2e31578637dc78a19089f43e"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.13.0"
+    istanbul-lib-coverage "^1.0.0"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.0.0-alpha.3:
+  version "1.0.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.0.0-alpha.3.tgz#32d5f6ec7f33ca3a602209e278b2e6ff143498af"
+  dependencies:
+    async "^1.4.2"
+    istanbul-lib-coverage "^1.0.0-alpha"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    rimraf "^2.4.3"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.1.0.tgz#9d429218f35b823560ea300a96ff0c3bbdab785f"
+  dependencies:
+    istanbul-lib-coverage "^1.0.0-alpha.0"
+    mkdirp "^0.5.1"
+    rimraf "^2.4.4"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.0.0.tgz#24b4eb2b1d29d50f103b369bd422f6e640aa0777"
+  dependencies:
+    handlebars "^4.0.3"
+
+jest-changed-files@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-17.0.2.tgz#f5657758736996f590a51b87e5c9369d904ba7b7"
+
+jest-cli@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-18.1.0.tgz#5ead36ecad420817c2c9baa2aa7574f63257b3d6"
+  dependencies:
+    ansi-escapes "^1.4.0"
+    callsites "^2.0.0"
+    chalk "^1.1.1"
+    graceful-fs "^4.1.6"
+    is-ci "^1.0.9"
+    istanbul-api "^1.1.0-alpha.1"
+    istanbul-lib-coverage "^1.0.0"
+    istanbul-lib-instrument "^1.1.1"
+    jest-changed-files "^17.0.2"
+    jest-config "^18.1.0"
+    jest-environment-jsdom "^18.1.0"
+    jest-file-exists "^17.0.0"
+    jest-haste-map "^18.1.0"
+    jest-jasmine2 "^18.1.0"
+    jest-mock "^18.0.0"
+    jest-resolve "^18.1.0"
+    jest-resolve-dependencies "^18.1.0"
+    jest-runtime "^18.1.0"
+    jest-snapshot "^18.1.0"
+    jest-util "^18.1.0"
+    json-stable-stringify "^1.0.0"
+    node-notifier "^4.6.1"
+    sane "~1.4.1"
+    strip-ansi "^3.0.1"
+    throat "^3.0.0"
+    which "^1.1.1"
+    worker-farm "^1.3.1"
+    yargs "^6.3.0"
+
+jest-config@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-18.1.0.tgz#6111740a6d48aab86ff5a9e6ab0b98bd993b6ff4"
+  dependencies:
+    chalk "^1.1.1"
+    jest-environment-jsdom "^18.1.0"
+    jest-environment-node "^18.1.0"
+    jest-jasmine2 "^18.1.0"
+    jest-mock "^18.0.0"
+    jest-resolve "^18.1.0"
+    jest-util "^18.1.0"
+    json-stable-stringify "^1.0.0"
+
+jest-diff@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-18.1.0.tgz#4ff79e74dd988c139195b365dc65d87f606f4803"
+  dependencies:
+    chalk "^1.1.3"
+    diff "^3.0.0"
+    jest-matcher-utils "^18.1.0"
+    pretty-format "^18.1.0"
+
+jest-environment-jsdom@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-18.1.0.tgz#18b42f0c4ea2bae9f36cab3639b1e8f8c384e24e"
+  dependencies:
+    jest-mock "^18.0.0"
+    jest-util "^18.1.0"
+    jsdom "^9.9.1"
+
+jest-environment-node@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-18.1.0.tgz#4d6797572c8dda99acf5fae696eb62945547c779"
+  dependencies:
+    jest-mock "^18.0.0"
+    jest-util "^18.1.0"
+
+jest-file-exists@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/jest-file-exists/-/jest-file-exists-17.0.0.tgz#7f63eb73a1c43a13f461be261768b45af2cdd169"
+
+jest-haste-map@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-18.1.0.tgz#06839c74b770a40c1a106968851df8d281c08375"
+  dependencies:
+    fb-watchman "^1.9.0"
+    graceful-fs "^4.1.6"
+    micromatch "^2.3.11"
+    sane "~1.4.1"
+    worker-farm "^1.3.1"
+
+jest-jasmine2@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-18.1.0.tgz#094e104c2c189708766c77263bb2aecb5860a80b"
+  dependencies:
+    graceful-fs "^4.1.6"
+    jest-matcher-utils "^18.1.0"
+    jest-matchers "^18.1.0"
+    jest-snapshot "^18.1.0"
+    jest-util "^18.1.0"
+
+jest-matcher-utils@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-18.1.0.tgz#1ac4651955ee2a60cef1e7fcc98cdfd773c0f932"
+  dependencies:
+    chalk "^1.1.3"
+    pretty-format "^18.1.0"
+
+jest-matchers@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matchers/-/jest-matchers-18.1.0.tgz#0341484bf87a1fd0bac0a4d2c899e2b77a3f1ead"
+  dependencies:
+    jest-diff "^18.1.0"
+    jest-matcher-utils "^18.1.0"
+    jest-util "^18.1.0"
+    pretty-format "^18.1.0"
+
+jest-mock@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-18.0.0.tgz#5c248846ea33fa558b526f5312ab4a6765e489b3"
+
+jest-resolve-dependencies@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-18.1.0.tgz#8134fb5caf59c9ed842fe0152ab01c52711f1bbb"
+  dependencies:
+    jest-file-exists "^17.0.0"
+    jest-resolve "^18.1.0"
+
+jest-resolve@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-18.1.0.tgz#6800accb536658c906cd5e29de412b1ab9ac249b"
+  dependencies:
+    browser-resolve "^1.11.2"
+    jest-file-exists "^17.0.0"
+    jest-haste-map "^18.1.0"
+    resolve "^1.2.0"
+
+jest-runtime@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-18.1.0.tgz#3abfd687175b21fc3b85a2b8064399e997859922"
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^18.0.0"
+    babel-plugin-istanbul "^3.0.0"
+    chalk "^1.1.3"
+    graceful-fs "^4.1.6"
+    jest-config "^18.1.0"
+    jest-file-exists "^17.0.0"
+    jest-haste-map "^18.1.0"
+    jest-mock "^18.0.0"
+    jest-resolve "^18.1.0"
+    jest-snapshot "^18.1.0"
+    jest-util "^18.1.0"
+    json-stable-stringify "^1.0.0"
+    micromatch "^2.3.11"
+    yargs "^6.3.0"
+
+jest-snapshot@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-18.1.0.tgz#55b96d2ee639c9bce76f87f2a3fd40b71c7a5916"
+  dependencies:
+    jest-diff "^18.1.0"
+    jest-file-exists "^17.0.0"
+    jest-matcher-utils "^18.1.0"
+    jest-util "^18.1.0"
+    natural-compare "^1.4.0"
+    pretty-format "^18.1.0"
+
+jest-util@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-18.1.0.tgz#3a99c32114ab17f84be094382527006e6d4bfc6a"
+  dependencies:
+    chalk "^1.1.1"
+    diff "^3.0.0"
+    graceful-fs "^4.1.6"
+    jest-file-exists "^17.0.0"
+    jest-mock "^18.0.0"
+    mkdirp "^0.5.1"
+
+jest@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-18.1.0.tgz#bcebf1e203dee5c2ad2091c805300a343d9e6c7d"
+  dependencies:
+    jest-cli "^18.1.0"
+
+jodid25519@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
+  dependencies:
+    jsbn "~0.1.0"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+js-tokens@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
+
+js-tokens@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
+
+js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+js-yaml@~3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
+
+jsdom@^9.9.1:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.11.0.tgz#a95b0304e521a2ca5a63c6ea47bf7708a7a84591"
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.1"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-loader@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
+
+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@^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"
+  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"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  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"
+
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
+jsprim@^1.2.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  dependencies:
+    extsprintf "1.0.2"
+    json-schema "0.2.3"
+    verror "1.3.6"
+
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.1:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.5.tgz#9ba6297198d9f754594d62e59496ffb923778dd4"
+  dependencies:
+    acorn-jsx "^3.0.1"
+    object-assign "^4.1.0"
+
+kind-of@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+  dependencies:
+    is-buffer "^1.0.2"
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+lodash._arraycopy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
+
+lodash._arrayeach@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz#bab156b2a90d3f1bbd5c653403349e5e5933ef9e"
+
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._baseclone@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseclone/-/lodash._baseclone-3.3.0.tgz#303519bf6393fe7e42f34d8b630ef7794e3542b7"
+  dependencies:
+    lodash._arraycopy "^3.0.0"
+    lodash._arrayeach "^3.0.0"
+    lodash._baseassign "^3.0.0"
+    lodash._basefor "^3.0.0"
+    lodash.isarray "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._basefor@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash._basefor/-/lodash._basefor-3.0.3.tgz#7550b4e9218ef09fad24343b612021c79b4c20c2"
+
+lodash._bindcallback@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.clonedeep@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-3.0.2.tgz#a0a1e40d82a5ea89ff5b147b8444ed63d92827db"
+  dependencies:
+    lodash._baseclone "^3.0.0"
+    lodash._bindcallback "^3.0.0"
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+
+lodash.indexof@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.memoize@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
+lodash.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
+lodash.uniq@^4.3.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.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+lodash@^3.10.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+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:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
+  dependencies:
+    js-tokens "^2.0.0"
+
+loose-envify@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+lower-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+
+lru-cache@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
+  dependencies:
+    pseudomap "^1.0.1"
+    yallist "^2.0.0"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+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"
+
+marked-terminal@^1.6.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/marked-terminal/-/marked-terminal-1.7.0.tgz#c8c460881c772c7604b64367007ee5f77f125904"
+  dependencies:
+    cardinal "^1.0.0"
+    chalk "^1.1.3"
+    cli-table "^0.3.1"
+    lodash.assign "^4.2.0"
+    node-emoji "^1.4.1"
+
+marked@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+  dependencies:
+    lodash.indexof "^4.0.5"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+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-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+merge@^1.1.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+"mime-db@>= 1.24.0 < 2", mime-db@~1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.13.tgz#e07aaa9c6c6b9a7ca3012c69003ad25a39e92a88"
+  dependencies:
+    mime-db "~1.25.0"
+
+mime@1.2.x:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
+
+mime@1.3.4, mime@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+minimatch@3.0.3, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+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"
+
+"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"
+  dependencies:
+    minimist "0.0.8"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+ms@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+
+nan@^2.3.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+ncname@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+  dependencies:
+    xml-char-classes "^1.0.0"
+
+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"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-emoji@^1.4.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.5.0.tgz#9a0d9fe03fd43afa357d6d8e439aa31e599959b7"
+  dependencies:
+    string.prototype.codepointat "^0.2.0"
+
+node-fetch@^1.0.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+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@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-notifier@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-4.6.1.tgz#056d14244f3dcc1ceadfe68af9cff0c5473a33f3"
+  dependencies:
+    cli-usage "^0.1.1"
+    growly "^1.2.0"
+    lodash.clonedeep "^3.0.0"
+    minimist "^1.1.1"
+    semver "^5.1.0"
+    shellwords "^0.1.0"
+    which "^1.0.5"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.32"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5"
+  dependencies:
+    mkdirp "~0.5.1"
+    nopt "~3.0.6"
+    npmlog "^4.0.1"
+    rc "~1.1.6"
+    request "^2.79.0"
+    rimraf "~2.5.4"
+    semver "~5.3.0"
+    tar "~2.2.1"
+    tar-pack "~3.3.0"
+
+nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  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.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+
+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.4.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.0.tgz#c2bb50035edee62cd81edb2d45da68dc25e3423e"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+npmlog@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.1"
+    set-blocking "~2.0.0"
+
+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"
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a"
+
+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:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+once@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
+open@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@^0.6.1, optimist@~0.6.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"
+
+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@>=0.0.5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  dependencies:
+    url-parse "1.0.x"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+param-case@2.1.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  dependencies:
+    no-case "^2.2.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+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"
+
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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-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-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+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@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+performance-now@^0.2.0, performance-now@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+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"
+
+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-up@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-1.0.0.tgz#3e08fb461525c4421624a33b9f7e6d0af5b05a26"
+  dependencies:
+    find-up "^1.0.0"
+
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.0.tgz#08c6d06130fe58a91a21ff50829e1aad6a3a1acc"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.2.tgz#02be520e91571ffb10738766a981d5770989bb32"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-load-config@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.2.2.tgz#bbf4e19a8cde85597e0c9bfd96015fe775a157ac"
+  dependencies:
+    loader-utils "^0.2.16"
+    object-assign "^4.1.0"
+    postcss "^5.2.9"
+    postcss-load-config "^1.1.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.1.tgz#5e5640020ce43cddd343c73bba91c9a358d1fe0f"
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-scope@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-values@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  dependencies:
+    icss-replace-symbols "^1.0.2"
+    postcss "^5.0.14"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, 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-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.11, postcss@^5.2.9:
+  version "5.2.15"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.15.tgz#a9e8685e50e06cc5b3fdea5297273246c26f5b30"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+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"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-error@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
+  dependencies:
+    renderkid "~2.0.0"
+    utila "~0.4"
+
+pretty-format@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-18.1.0.tgz#fb65a86f7a7f9194963eee91865c1bcf1039e284"
+  dependencies:
+    ansi-styles "^2.2.1"
+
+pretty-format@^4.2.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-4.3.1.tgz#530be5c42b3c05b36414a7a2a4337aa80acd0e8d"
+
+private@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+
+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"
+
+process@^0.11.0:
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+
+progress@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+promise@7.1.1, promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.8:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
+proxy-addr@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.1.1"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+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"
+
+q@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+qs@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+
+qs@~6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+
+query-string@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.0.tgz#6f39ee0ce2f713b28a6517809b4a974a623fbb42"
+  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@0.0.x:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
+
+raf@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.0.tgz#93845eeffc773f8129039f677f80a36044eee2c3"
+  dependencies:
+    performance-now "~0.2.0"
+
+randomatic@^1.1.3:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
+  dependencies:
+    is-number "^2.0.2"
+    kind-of "^3.0.2"
+
+range-parser@^1.0.3, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+rc@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~1.0.4"
+
+react-dev-utils@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-0.5.2.tgz#50d0b962d3a94b6c2e8f2011ed6468e4124bc410"
+  dependencies:
+    ansi-html "0.0.5"
+    chalk "1.1.3"
+    escape-string-regexp "1.0.5"
+    filesize "3.3.0"
+    gzip-size "3.0.0"
+    html-entities "1.2.0"
+    opn "4.0.2"
+    recursive-readdir "2.1.1"
+    sockjs-client "1.0.1"
+    strip-ansi "3.0.1"
+
+react-draggable@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-2.2.6.tgz#3a806e10f2da6babfea4136be6510e89b0d76901"
+  dependencies:
+    classnames "^2.2.5"
+
+react-motion@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.0.tgz#1708fc2aee552900d21c1e6bed28346863e017b6"
+  dependencies:
+    performance-now "^0.2.0"
+    prop-types "^15.5.8"
+    raf "^3.1.0"
+
+react-scripts@0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-0.9.5.tgz#e9f05c8427e27131662a9b9d7a9786d1ff16bb3f"
+  dependencies:
+    autoprefixer "6.7.2"
+    babel-core "6.22.1"
+    babel-eslint "7.1.1"
+    babel-jest "18.0.0"
+    babel-loader "6.2.10"
+    babel-preset-react-app "^2.2.0"
+    babel-runtime "^6.20.0"
+    case-sensitive-paths-webpack-plugin "1.1.4"
+    chalk "1.1.3"
+    connect-history-api-fallback "1.3.0"
+    cross-spawn "4.0.2"
+    css-loader "0.26.1"
+    detect-port "1.1.0"
+    dotenv "2.0.0"
+    eslint "3.16.1"
+    eslint-config-react-app "^0.6.2"
+    eslint-loader "1.6.0"
+    eslint-plugin-flowtype "2.21.0"
+    eslint-plugin-import "2.0.1"
+    eslint-plugin-jsx-a11y "4.0.0"
+    eslint-plugin-react "6.4.1"
+    extract-text-webpack-plugin "1.0.1"
+    file-loader "0.10.0"
+    fs-extra "0.30.0"
+    html-webpack-plugin "2.24.0"
+    http-proxy-middleware "0.17.3"
+    jest "18.1.0"
+    json-loader "0.5.4"
+    object-assign "4.1.1"
+    postcss-loader "1.2.2"
+    promise "7.1.1"
+    react-dev-utils "^0.5.2"
+    style-loader "0.13.1"
+    url-loader "0.5.7"
+    webpack "1.14.0"
+    webpack-dev-server "1.16.2"
+    webpack-manifest-plugin "1.1.0"
+    whatwg-fetch "2.0.2"
+  optionalDependencies:
+    fsevents "1.0.17"
+
+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"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.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"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+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@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+recursive-readdir@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.1.1.tgz#a01cfc7f7f38a53ec096a096f63a50489c3e297c"
+  dependencies:
+    minimatch "3.0.3"
+
+redeyed@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-1.0.1.tgz#e96c193b40c0816b00aec842698e61185e55498a"
+  dependencies:
+    esprima "~3.0.0"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  dependencies:
+    balanced-match "^0.4.2"
+
+regenerate@^1.2.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+
+regenerator-transform@0.9.8:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  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"
+
+renderkid@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.0.tgz#1859753e7a5adbf35443aba0d4e4579e78abee85"
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "~0.1"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+request@^2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
+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@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
+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-uncached@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+requires-port@1.0.x, requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-from@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.1.6, resolve@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@~2.5.1, rimraf@~2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  dependencies:
+    once "^1.3.0"
+
+rx-lite@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+
+sane@~1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-1.4.1.tgz#88f763d74040f5f0c256b6163db399bf110ac715"
+  dependencies:
+    exec-sh "^0.2.0"
+    fb-watchman "^1.8.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.10.0"
+
+sax@^1.2.1, sax@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+send@0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+  dependencies:
+    debug "~2.2.0"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    fresh "0.3.0"
+    http-errors "~1.5.0"
+    mime "1.3.4"
+    ms "0.7.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.0"
+
+serve-index@^1.7.2:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  dependencies:
+    accepts "~1.3.3"
+    batch "0.5.3"
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    http-errors "~1.5.0"
+    mime-types "~2.1.11"
+    parseurl "~1.3.1"
+
+serve-static@~1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.14.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-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4, setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+setprototypeof@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+shelljs@^0.7.0, shelljs@^0.7.5:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+shellwords@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.0.tgz#66afd47b6a12932d9071cbfd98a52e785cd0ba14"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sockjs-client@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.0.1.tgz#8943ae05b46547bc2054816c409002cf5e2fe026"
+  dependencies:
+    debug "^2.1.0"
+    eventsource "^0.1.3"
+    faye-websocket "~0.7.3"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.0.1"
+
+sockjs-client@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.0.3.tgz#b0d8280998460eb2564c5d79d7e3d7cfd8a353ad"
+  dependencies:
+    debug "^2.1.0"
+    eventsource "^0.1.3"
+    faye-websocket "~0.7.3"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.0.1"
+
+sockjs@^0.3.15:
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
+  dependencies:
+    faye-websocket "^0.10.0"
+    uuid "^2.0.2"
+
+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@^0.1.4, source-list-map@~0.1.0, source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map-support@^0.4.2:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.8.tgz#4871918d8a3af07289182e974e32844327b2e98b"
+  dependencies:
+    source-map "^0.5.3"
+
+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:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
+  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"
+  dependencies:
+    amdefine ">=0.0.4"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+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.10.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jodid25519 "^1.0.0"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2", statuses@~1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+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-cache@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/stream-cache/-/stream-cache-0.0.2.tgz#1ac5ad6832428ca55667dbdee395dad4e6db118f"
+
+stream-http@^2.3.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.6.1.tgz#7d20fcdfebc16b16e4174e31dd94cd9c70f10e89"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.1.0"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+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-width@^1.0.1, string-width@^1.0.2:
+  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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^3.0.0"
+
+string.prototype.codepointat@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.0.tgz#6b26e9bd3afcaa7be3b4269b526de1b82000ac78"
+
+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"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@3.0.1, 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-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  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"
+
+strip-json-comments@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
+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@0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  dependencies:
+    loader-utils "^0.2.7"
+
+supports-color@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
+
+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@^3.1.0, supports-color@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+svgo@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.2.1"
+    js-yaml "~3.6.1"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+symbol-tree@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  dependencies:
+    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"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+  dependencies:
+    debug "~2.2.0"
+    fstream "~1.0.10"
+    fstream-ignore "~1.0.5"
+    once "~1.3.3"
+    readable-stream "~2.1.4"
+    rimraf "~2.5.1"
+    tar "~2.2.1"
+    uid-number "~0.0.6"
+
+tar@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+test-exclude@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-3.3.0.tgz#7a17ca1239988c98367b0621456dbb7d4bc38977"
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+text-table@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+throat@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-3.0.0.tgz#e7c64c867cbb3845f10877642f7b60055b8ec0d6"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  dependencies:
+    setimmediate "^1.0.4"
+
+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@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+
+toposort@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
+
+tough-cookie@^2.3.2, tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+tryit@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+
+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.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+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-is@~1.6.13:
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.14.tgz#e219639c17ded1ca0789092dd54a03826b817cb2"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.13"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+ua-parser-js@^0.7.9:
+  version "0.7.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.7.3:
+  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@^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"
+
+uid-number@~0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+url-loader@0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"
+  dependencies:
+    loader-utils "0.2.x"
+    mime "1.2.x"
+
+url-parse@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+url-parse@^1.0.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a"
+  dependencies:
+    querystringify "0.0.x"
+    requires-port "1.0.x"
+
+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"
+
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  dependencies:
+    os-homedir "^1.0.0"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.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"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+uuid@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+
+uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+vary@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+verror@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+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"
+
+watch@~0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+
+webidl-conversions@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@^1.4.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+
+webpack-dev-server@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-1.16.2.tgz#8bebc2c4ce1c45a15c72dd769d9ba08db306a793"
+  dependencies:
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    express "^4.13.3"
+    http-proxy-middleware "~0.17.1"
+    open "0.0.5"
+    optimist "~0.6.1"
+    serve-index "^1.7.2"
+    sockjs "^0.3.15"
+    sockjs-client "^1.0.3"
+    stream-cache "~0.0.1"
+    strip-ansi "^3.0.0"
+    supports-color "^3.1.1"
+    webpack-dev-middleware "^1.4.0"
+
+webpack-manifest-plugin@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.1.0.tgz#6b6c718aade8a2537995784b46bd2e9836057caa"
+  dependencies:
+    fs-extra "^0.30.0"
+    lodash ">=3.5 <5"
+
+webpack-sources@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.3.tgz#15ce2fb79d0a1da727444ba7c757bf164294f310"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.5.3"
+
+webpack@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+websocket-driver@>=0.3.6, websocket-driver@>=0.5.1:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+  dependencies:
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
+
+whatwg-encoding@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
+  dependencies:
+    iconv-lite "0.4.13"
+
+whatwg-fetch@2.0.2, whatwg-fetch@>=0.10.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
+
+whatwg-url@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.4.0.tgz#594f95781545c13934a62db40897c818cafa2e04"
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which@^1.0.5, which@^1.1.1, which@^1.2.9:
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
+  dependencies:
+    isexe "^1.1.1"
+
+wide-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+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"
+
+worker-farm@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.3.1.tgz#4333112bb49b17aa050b87895ca6b2cacf40e5ff"
+  dependencies:
+    errno ">=0.1.1 <0.2.0-0"
+    xtend ">=4.0.0 <4.1.0-0"
+
+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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+xml-char-classes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+
+xml-name-validator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs@^6.3.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
new file mode 100644
index 00000000000..89a2b80c693
--- /dev/null
+++ b/fixtures/fizz-ssr-browser/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%; overflow: hidden">
+  <head>
+    <meta charset="utf-8">
+    <title>Fizz Example</title>
+  </head>
+  <body>
+    <h1>Fizz 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 type="module">
+      import React from "https://esm.sh/react@canary?dev";
+      import ReactDOM from "https://esm.sh/react-dom@canary?dev";
+      import ReactDOMServer from "https://esm.sh/react-dom@canary/server.browser?dev";
+
+      window.React = React;
+      window.ReactDOM = ReactDOM;
+      window.ReactDOMServer = ReactDOMServer;
+    </script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <script type="text/babel">
+      async function render() {
+        let controller = new AbortController();
+        let response;
+        try {
+          let stream = await ReactDOMServer.renderToReadableStream(
+            <html>
+              <body>Success</body>
+            </html>,
+            {
+              signal: controller.signal,
+            }
+          );
+          response = new Response(stream, {
+            headers: {'Content-Type': 'text/html'},
+          });
+        } catch (x) {
+          response = new Response('<!doctype><p>Error</p>', {
+            status: 500,
+            headers: {'Content-Type': 'text/html'},
+          });
+        }
+
+        let blob = await response.blob();
+        let url = URL.createObjectURL(blob);
+        let iframe = document.createElement('iframe');
+        iframe.src = url;
+        let container = document.getElementById('container');
+        container.innerHTML = '';
+        container.appendChild(iframe);
+      }
+      render();
+    </script>
+  </body>
+</html>
diff --git a/fixtures/fizz/README.md b/fixtures/fizz/README.md
new file mode 100644
index 00000000000..92b593011a1
--- /dev/null
+++ b/fixtures/fizz/README.md
@@ -0,0 +1,30 @@
+# Fizz Fixtures
+
+A set of basic tests for Fizz primarily focused on baseline performance of legacy renderToString and streaming implementations.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/fizz
+yarn
+yarn start
+```
+
+The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
+
+**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:**
+
+```
+yarn
+```
+
+If you want to try the production mode instead run:
+
+```
+yarn start:prod
+```
+
+This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).
diff --git a/fixtures/fizz/package.json b/fixtures/fizz/package.json
new file mode 100644
index 00000000000..7156aa9e8fa
--- /dev/null
+++ b/fixtures/fizz/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "react-ssr",
+  "version": "0.1.0",
+  "private": true,
+  "engines": {
+    "node": ">=14.9.0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "7.14.3",
+    "@babel/register": "7.13.16",
+    "babel-loader": "8.1.0",
+    "babel-preset-react-app": "10.0.0",
+    "compression": "^1.7.4",
+    "concurrently": "^5.3.0",
+    "express": "^4.17.1",
+    "nodemon": "^2.0.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^3.1.3",
+    "resolve": "1.12.0",
+    "rimraf": "^3.0.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.2.0"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "prettier": "1.19.1"
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:bundler\"",
+    "start": "concurrently \"npm run start:server\" \"npm run start:bundler\"",
+    "dev:server": "cross-env NODE_ENV=development nodemon -- --inspect server/server.js",
+    "start:server": "cross-env NODE_ENV=production nodemon -- server/server.js",
+    "dev:bundler": "cross-env NODE_ENV=development nodemon -- scripts/build.js",
+    "start:bundler": "cross-env NODE_ENV=production nodemon -- scripts/build.js"
+  },
+  "babel": {
+    "presets": [
+      [
+        "react-app",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ]
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "build/*"
+    ]
+  }
+}
diff --git a/fixtures/fizz/public/main.css b/fixtures/fizz/public/main.css
new file mode 100644
index 00000000000..34b4ecb1ce7
--- /dev/null
+++ b/fixtures/fizz/public/main.css
@@ -0,0 +1,74 @@
+body {
+  font-family: system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+nav {
+  padding: 20px;
+}
+
+.sidebar {
+  padding: 10px;
+  height: 500px;
+  float: left;
+  width: 30%;
+}
+
+.post {
+  padding: 20px;
+  float: left;
+  width: 60%;
+}
+
+h1, h2 {
+  padding: 0;
+}
+
+ul, li {
+  margin: 0;
+}
+
+.post p {
+  font-size: larger;
+  font-family: Georgia, serif;
+}
+
+.comments {
+  margin-top: 40px;
+}
+
+.comment {
+  border: 2px solid #aaa;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+/* https://codepen.io/mandelid/pen/vwKoe */
+.spinner {
+  display: inline-block;
+  transition: opacity linear 0.1s;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(80, 80, 80, 0.5);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+  opacity: 0;
+}
+.spinner--active {
+  opacity: 1;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/fixtures/fizz/scripts/build.js b/fixtures/fizz/scripts/build.js
new file mode 100644
index 00000000000..0acf6c2814b
--- /dev/null
+++ b/fixtures/fizz/scripts/build.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 path = require('path');
+const rimraf = require('rimraf');
+const webpack = require('webpack');
+
+const isProduction = process.env.NODE_ENV === 'production';
+rimraf.sync(path.resolve(__dirname, '../build'));
+webpack(
+  {
+    mode: isProduction ? 'production' : 'development',
+    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+    entry: [path.resolve(__dirname, '../src/index.js')],
+    output: {
+      path: path.resolve(__dirname, '../build'),
+      filename: 'main.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: 'babel-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+  },
+  (err, stats) => {
+    if (err) {
+      console.error(err.stack || err);
+      if (err.details) {
+        console.error(err.details);
+      }
+      process.exit(1);
+    }
+    const info = stats.toJson();
+    if (stats.hasErrors()) {
+      console.log('Finished running webpack with errors.');
+      info.errors.forEach(e => console.error(e));
+      process.exit(1);
+    } else {
+      console.log('Finished running webpack.');
+    }
+  }
+);
diff --git a/fixtures/fizz/server/delays.js b/fixtures/fizz/server/delays.js
new file mode 100644
index 00000000000..0f51247d28d
--- /dev/null
+++ b/fixtures/fizz/server/delays.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Tweak these to play with different kinds of latency.
+
+// How long the data fetches on the server.
+exports.API_DELAY = 2000;
+
+// How long the server waits for data before giving up.
+exports.ABORT_DELAY = 10000;
+
+// How long serving the JS bundles is delayed.
+exports.JS_BUNDLE_DELAY = 4000;
diff --git a/fixtures/fizz/server/render-to-buffer.js b/fixtures/fizz/server/render-to-buffer.js
new file mode 100644
index 00000000000..2609244fa8b
--- /dev/null
+++ b/fixtures/fizz/server/render-to-buffer.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {Writable} from 'stream';
+import * as React from 'react';
+import {renderToPipeableStream} from 'react-dom/server';
+import App from '../src/App';
+import {ABORT_DELAY} from './delays';
+
+// In a real setup, you'd read it from webpack build stats.
+let assets = {
+  'main.js': '/main.js',
+  'main.css': '/main.css',
+};
+
+function HtmlWritable(options) {
+  Writable.call(this, options);
+  this.chunks = [];
+  this.html = '';
+}
+
+HtmlWritable.prototype = Object.create(Writable.prototype);
+HtmlWritable.prototype.getHtml = function getHtml() {
+  return this.html;
+};
+HtmlWritable.prototype._write = function _write(chunk, encoding, callback) {
+  this.chunks.push(chunk);
+  callback();
+};
+HtmlWritable.prototype._final = function _final(callback) {
+  this.html = Buffer.concat(this.chunks).toString();
+  callback();
+};
+
+module.exports = function render(url, res) {
+  let writable = new HtmlWritable();
+  res.socket.on('error', error => {
+    console.error('Fatal', error);
+  });
+  let didError = false;
+  let didFinish = false;
+
+  writable.on('finish', () => {
+    // If something errored before we started streaming, we set the error code appropriately.
+    res.statusCode = didError ? 500 : 200;
+    res.setHeader('Content-type', 'text/html');
+    res.send(writable.getHtml());
+  });
+
+  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    bootstrapScripts: [assets['main.js']],
+    onAllReady() {
+      // Full completion.
+      // You can use this for SSG or crawlers.
+      didFinish = true;
+    },
+    onShellReady() {
+      // If something errored before we started streaming, we set the error code appropriately.
+      pipe(writable);
+    },
+    onShellError(x) {
+      // Something errored before we could complete the shell so we emit an alternative shell.
+      res.statusCode = 500;
+      res.send('<!doctype><p>Error</p>');
+    },
+    onError(x) {
+      didError = true;
+      console.error(x);
+    },
+  });
+  // Abandon and switch to client rendering if enough time passes.
+  // Try lowering this to see the client recover.
+  setTimeout(() => {
+    if (!didFinish) {
+      abort();
+    }
+  }, ABORT_DELAY);
+};
diff --git a/fixtures/fizz/server/render-to-stream.js b/fixtures/fizz/server/render-to-stream.js
new file mode 100644
index 00000000000..9c9c0d01936
--- /dev/null
+++ b/fixtures/fizz/server/render-to-stream.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+import {renderToPipeableStream} from 'react-dom/server';
+import App from '../src/App';
+import {ABORT_DELAY} from './delays';
+
+// In a real setup, you'd read it from webpack build stats.
+let assets = {
+  'main.js': '/main.js',
+  'main.css': '/main.css',
+};
+
+module.exports = function render(url, res) {
+  // The new wiring is a bit more involved.
+  res.socket.on('error', error => {
+    console.error('Fatal', error);
+  });
+  let didError = false;
+  let didFinish = false;
+  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    bootstrapScripts: [assets['main.js']],
+    onAllReady() {
+      // Full completion.
+      // You can use this for SSG or crawlers.
+      didFinish = true;
+    },
+    onShellReady() {
+      // If something errored before we started streaming, we set the error code appropriately.
+      res.statusCode = didError ? 500 : 200;
+      res.setHeader('Content-type', 'text/html');
+      setImmediate(() => pipe(res));
+    },
+    onShellError(x) {
+      // Something errored before we could complete the shell so we emit an alternative shell.
+      res.statusCode = 500;
+      res.send('<!doctype><p>Error</p>');
+    },
+    onError(x) {
+      didError = true;
+      console.error(x);
+    },
+  });
+  // Abandon and switch to client rendering if enough time passes.
+  // Try lowering this to see the client recover.
+  setTimeout(() => {
+    if (!didFinish) {
+      abort();
+    }
+  }, ABORT_DELAY);
+};
diff --git a/fixtures/fizz/server/render-to-string.js b/fixtures/fizz/server/render-to-string.js
new file mode 100644
index 00000000000..4b7faa719f6
--- /dev/null
+++ b/fixtures/fizz/server/render-to-string.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+import {renderToString} from 'react-dom/server';
+import App from '../src/App';
+import {API_DELAY, ABORT_DELAY} from './delays';
+import {performance} from 'perf_hooks';
+
+// In a real setup, you'd read it from webpack build stats.
+let assets = {
+  'main.js': '/main.js',
+  'main.css': '/main.css',
+};
+
+let textEncoder = new TextEncoder();
+
+module.exports = function render(url, res) {
+  let payload =
+    '<!DOCTYPE html>' +
+    renderToString(<App assets={assets} />) +
+    '<script src="/main.js" async=""></script>';
+  let arr = textEncoder.encode(payload);
+
+  let buf = Buffer.from(arr);
+  res.statusCode = 200;
+  res.setHeader('Content-type', 'text/html');
+  res.send(buf);
+};
diff --git a/fixtures/fizz/server/server.js b/fixtures/fizz/server/server.js
new file mode 100644
index 00000000000..104548bf2a6
--- /dev/null
+++ b/fixtures/fizz/server/server.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 babelRegister = require('@babel/register');
+babelRegister({
+  ignore: [/[\\\/](build|server\/server|node_modules)[\\\/]/],
+  presets: [['react-app', {runtime: 'automatic'}]],
+  plugins: ['@babel/transform-modules-commonjs'],
+});
+
+const express = require('express');
+const compress = require('compression');
+const {readFileSync} = require('fs');
+const path = require('path');
+const renderToString = require('./render-to-string');
+const renderToStream = require('./render-to-stream');
+const renderToBuffer = require('./render-to-buffer');
+const {JS_BUNDLE_DELAY} = require('./delays');
+
+const PORT = process.env.PORT || 4000;
+const app = express();
+
+app.use(compress());
+app.get(
+  '/',
+  handleErrors(async function (req, res) {
+    await waitForWebpack();
+    renderToStream(req.url, res);
+  })
+);
+app.get(
+  '/string',
+  handleErrors(async function (req, res) {
+    await waitForWebpack();
+    renderToString(req.url, res);
+  })
+);
+app.get(
+  '/stream',
+  handleErrors(async function (req, res) {
+    await waitForWebpack();
+    renderToStream(req.url, res);
+  })
+);
+app.get(
+  '/buffer',
+  handleErrors(async function (req, res) {
+    await waitForWebpack();
+    renderToBuffer(req.url, res);
+  })
+);
+app.use(express.static('build'));
+app.use(express.static('public'));
+
+app
+  .listen(PORT, () => {
+    console.log(`Listening at ${PORT}...`);
+  })
+  .on('error', function (error) {
+    if (error.syscall !== 'listen') {
+      throw error;
+    }
+    const isPipe = portOrPipe => Number.isNaN(portOrPipe);
+    const bind = isPipe(PORT) ? '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;
+    }
+  });
+
+function handleErrors(fn) {
+  return async function (req, res, next) {
+    try {
+      return await fn(req, res);
+    } catch (x) {
+      next(x);
+    }
+  };
+}
+
+async function waitForWebpack() {
+  while (true) {
+    try {
+      readFileSync(path.resolve(__dirname, '../build/main.js'));
+      return;
+    } catch (err) {
+      console.log(
+        'Could not find webpack build output. Will retry in a second...'
+      );
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+  }
+}
diff --git a/fixtures/fizz/src/App.js b/fixtures/fizz/src/App.js
new file mode 100644
index 00000000000..df7cbd6d023
--- /dev/null
+++ b/fixtures/fizz/src/App.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import Html from './Html';
+import BigComponent from './BigComponent';
+
+export default function App({assets, title}) {
+  const components = [];
+
+  for (let i = 0; i <= 250; i++) {
+    components.push(<BigComponent key={i} />);
+  }
+
+  return (
+    <Html assets={assets} title={title}>
+      <h1>{title}</h1>
+      {components}
+      <h1>all done</h1>
+    </Html>
+  );
+}
diff --git a/fixtures/fizz/src/BigComponent.js b/fixtures/fizz/src/BigComponent.js
new file mode 100644
index 00000000000..e1991991068
--- /dev/null
+++ b/fixtures/fizz/src/BigComponent.js
@@ -0,0 +1,181 @@
+export default function BigComponent() {
+  return (
+    <article>
+      <section>
+        <h2>Description</h2>
+        <p>
+          This page has repeating sections purposefully to create very large
+          trees that stress the rendering and streaming capabilities of Fizz
+        </p>
+      </section>
+      <section>
+        <h2>Another Section</h2>
+        <p>this section has a list</p>
+        <ul>
+          <li>item one</li>
+          <li>item two</li>
+          <li>item three</li>
+          <li>item four</li>
+          <li>item five</li>
+        </ul>
+        <p>it isn't a very interesting list</p>
+      </section>
+      <section>
+        <h2>Smiley Section</h2>
+        <p>here is a list of smiley emojis</p>
+        <ol>
+          <li>😀</li>
+          <li>😃</li>
+          <li>😄</li>
+          <li>😁</li>
+          <li>😆</li>
+          <li>😅</li>
+          <li>😂</li>
+          <li>🤣</li>
+          <li>🥲</li>
+          <li>☺️</li>
+          <li>😊</li>
+          <li>😇</li>
+          <li>🙂</li>
+          <li>🙃</li>
+          <li>😉</li>
+          <li>😌</li>
+          <li>😍</li>
+          <li>🥰</li>
+          <li>😘</li>
+          <li>😗</li>
+          <li>😙</li>
+          <li>😚</li>
+          <li>😋</li>
+          <li>😛</li>
+          <li>😝</li>
+          <li>😜</li>
+          <li>🤪</li>
+          <li>🤨</li>
+          <li>🧐</li>
+          <li>🤓</li>
+          <li>😎</li>
+          <li>🥸</li>
+          <li>🤩</li>
+          <li>🥳</li>
+          <li>😏</li>
+          <li>😒</li>
+          <li>😞</li>
+          <li>😔</li>
+          <li>😟</li>
+          <li>😕</li>
+          <li>🙁</li>
+          <li>☹️</li>
+          <li>😣</li>
+          <li>😖</li>
+          <li>😫</li>
+          <li>😩</li>
+          <li>🥺</li>
+          <li>😢</li>
+          <li>😭</li>
+          <li>😤</li>
+          <li>😠</li>
+          <li>😡</li>
+          <li>🤬</li>
+          <li>🤯</li>
+          <li>😳</li>
+          <li>🥵</li>
+          <li>🥶</li>
+          <li>😱</li>
+          <li>😨</li>
+          <li>😰</li>
+          <li>😥</li>
+          <li>😓</li>
+          <li>🤗</li>
+          <li>🤔</li>
+          <li>🤭</li>
+          <li>🤫</li>
+          <li>🤥</li>
+          <li>😶</li>
+          <li>😐</li>
+          <li>😑</li>
+          <li>😬</li>
+          <li>🙄</li>
+          <li>😯</li>
+          <li>😦</li>
+          <li>😧</li>
+          <li>😮</li>
+          <li>😲</li>
+          <li>🥱</li>
+          <li>😴</li>
+          <li>🤤</li>
+          <li>😪</li>
+          <li>😵</li>
+          <li>🤐</li>
+          <li>🥴</li>
+          <li>🤢</li>
+          <li>🤮</li>
+          <li>🤧</li>
+          <li>😷</li>
+          <li>🤒</li>
+          <li>🤕</li>
+          <li>🤑</li>
+          <li>🤠</li>
+          <li>😈</li>
+          <li>👿</li>
+          <li>👹</li>
+          <li>👺</li>
+          <li>🤡</li>
+          <li>💩</li>
+          <li>👻</li>
+          <li>💀</li>
+          <li>☠️</li>
+          <li>👽</li>
+          <li>👾</li>
+          <li>🤖</li>
+          <li>🎃</li>
+          <li>😺</li>
+          <li>😸</li>
+          <li>😹</li>
+          <li>😻</li>
+          <li>😼</li>
+          <li>😽</li>
+          <li>🙀</li>
+          <li>😿</li>
+          <li>😾</li>
+        </ol>
+      </section>
+      <section>
+        <h2>Translation Section</h2>
+        <p>This is the final section you will see before the sections repeat</p>
+        <p>
+          English: This is a text block translated from English to another
+          language in Google Translate.
+        </p>
+        <p>
+          Korean: 이것은 Google 번역에서 영어에서 다른 언어로 번역된 텍스트
+          블록입니다.
+        </p>
+        <p>
+          Hindi: यह Google अनुवाद में अंग्रेज़ी से दूसरी भाषा में अनुवादित
+          टेक्स्ट ब्लॉक है।
+        </p>
+        <p>
+          Lithuanian: Tai teksto blokas, išverstas iš anglų kalbos į kitą
+          „Google“ vertėjo kalbą.
+        </p>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <span>
+                      we're deep in some nested divs here, not that you can tell
+                      visually
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
+  );
+}
diff --git a/fixtures/fizz/src/Html.js b/fixtures/fizz/src/Html.js
new file mode 100644
index 00000000000..dc03d9ddb01
--- /dev/null
+++ b/fixtures/fizz/src/Html.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function Html({assets, children, title}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="shortcut icon" href="favicon.ico" />
+        <link rel="stylesheet" href={assets['main.css']} />
+        <title>{title}</title>
+      </head>
+      <body>
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `<b>Enable JavaScript to run this app.</b>`,
+          }}
+        />
+        {children}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `assetManifest = ${JSON.stringify(assets)};`,
+          }}
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/fixtures/fizz/src/index.js b/fixtures/fizz/src/index.js
new file mode 100644
index 00000000000..9971b4d5552
--- /dev/null
+++ b/fixtures/fizz/src/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {hydrateRoot} from 'react-dom/client';
+import App from './App';
+
+hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/fixtures/fizz/yarn.lock b/fixtures/fizz/yarn.lock
new file mode 100644
index 00000000000..0f9768adfab
--- /dev/null
+++ b/fixtures/fizz/yarn.lock
@@ -0,0 +1,5280 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
+"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
+  integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
+
+"@babel/core@7.12.3":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
+  integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.1"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.1"
+    "@babel/parser" "^7.12.3"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
+  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.14.3"
+    "@babel/helper-compilation-targets" "^7.13.16"
+    "@babel/helper-module-transforms" "^7.14.2"
+    "@babel/helpers" "^7.14.0"
+    "@babel/parser" "^7.14.3"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.14.2"
+    "@babel/types" "^7.14.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.12.1", "@babel/generator@^7.14.3", "@babel/generator@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
+  integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
+  integrity sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.16.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
+  integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
+  integrity sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-member-expression-to-functions" "^7.17.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+
+"@babel/helper-create-regexp-features-plugin@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
+  integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    regexpu-core "^5.0.1"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-explode-assignable-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
+  integrity sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-function-name@^7.16.7", "@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-member-expression-to-functions@^7.16.7", "@babel/helper-member-expression-to-functions@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
+  integrity sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.2", "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
+  integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-optimise-call-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
+  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
+"@babel/helper-remap-async-to-generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
+  integrity sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-wrap-function" "^7.16.8"
+    "@babel/types" "^7.16.8"
+
+"@babel/helper-replace-supers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
+  integrity sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-simple-access@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
+  integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1", "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
+  integrity sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
+"@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
+"@babel/helper-wrap-function@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
+  integrity sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==
+  dependencies:
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.8"
+    "@babel/types" "^7.16.8"
+
+"@babel/helpers@^7.12.1", "@babel/helpers@^7.14.0":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a"
+  integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.9"
+    "@babel/types" "^7.17.0"
+
+"@babel/highlight@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
+  integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.12.3", "@babel/parser@^7.14.3", "@babel/parser@^7.16.7", "@babel/parser@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
+  integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
+
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
+  integrity sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
+  integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-class-properties@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
+  integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-proposal-decorators@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz#59271439fed4145456c41067450543aee332d15f"
+  integrity sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-decorators" "^7.12.1"
+
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
+  integrity sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
+  integrity sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
+  integrity sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
+  integrity sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
+  integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
+  integrity sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz#0e2c6774c4ce48be412119b4d693ac777f7685a6"
+  integrity sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-numeric-separator@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
+  integrity sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.12.1":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
+  integrity sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==
+  dependencies:
+    "@babel/compat-data" "^7.17.0"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.16.7"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
+  integrity sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
+  integrity sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
+  integrity sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.12.1":
+  version "7.16.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
+  integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.10"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
+  integrity sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.1":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-decorators@^7.12.1":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d"
+  integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.7.tgz#202b147e5892b8452bbb0bb269c7ed2539ab8832"
+  integrity sha512-UDo3YGQO0jH6ytzVwgSLv9i/CzMcUjbKenL67dTrAZPPv6GFAtDhe6jqnvmoKzC/7htNTohhos+onPtDMqJwaQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.7.tgz#39c9b55ee153151990fb038651d58d3fd03f98f8"
+  integrity sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-arrow-functions@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz#44125e653d94b98db76369de9c396dc14bef4154"
+  integrity sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-async-to-generator@^7.12.1":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
+  integrity sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+
+"@babel/plugin-transform-block-scoped-functions@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
+  integrity sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-block-scoping@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87"
+  integrity sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-classes@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
+  integrity sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
+  integrity sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-destructuring@^7.12.1":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
+  integrity sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
+  integrity sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9"
+  integrity sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-exponentiation-operator@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
+  integrity sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-flow-strip-types@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
+  integrity sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.12.1"
+
+"@babel/plugin-transform-for-of@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz#649d639d4617dff502a9a158c479b3b556728d8c"
+  integrity sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-function-name@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
+  integrity sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-literals@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1"
+  integrity sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-member-expression-literals@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
+  integrity sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-modules-amd@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186"
+  integrity sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.12.1":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz#274be1a2087beec0254d4abd4d86e52442e1e5b6"
+  integrity sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz#81fd834024fae14ea78fbe34168b042f38703859"
+  integrity sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-umd@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
+  integrity sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz#7f860e0e40d844a02c9dcf9d84965e7dfd666252"
+  integrity sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+
+"@babel/plugin-transform-new-target@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
+  integrity sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-object-super@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
+  integrity sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+
+"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f"
+  integrity sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-property-literals@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
+  integrity sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-display-name@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz#1cbcd0c3b1d6648c55374a22fc9b6b7e5341c00d"
+  integrity sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-display-name@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
+  integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-development@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
+  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-self@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz#f432ad0cba14c4a1faf44f0076c69e42a4d4479e"
+  integrity sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-source@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.7.tgz#1879c3f23629d287cc6186a6c683154509ec70c0"
+  integrity sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx@^7.12.1", "@babel/plugin-transform-react-jsx@^7.16.7":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
+  integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
+"@babel/plugin-transform-react-pure-annotations@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz#232bfd2f12eb551d6d7d01d13fe3f86b45eb9c67"
+  integrity sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-regenerator@^7.12.1":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.17.9.tgz#0a33c3a61cf47f45ed3232903683a0afd2d3460c"
+  integrity sha512-Lc2TfbxR1HOyn/c6b4Y/b6NHoTb67n/IoWLxTu4kC7h4KQnWlhCq2S8Tx0t2SVvv5Uu87Hs+6JEJ5kt2tYGylQ==
+  dependencies:
+    regenerator-transform "^0.15.0"
+
+"@babel/plugin-transform-reserved-words@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
+  integrity sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-runtime@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
+  integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz#e8549ae4afcf8382f711794c0c7b6b934c5fbd2a"
+  integrity sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-spread@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44"
+  integrity sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+
+"@babel/plugin-transform-sticky-regex@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
+  integrity sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-template-literals@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
+  integrity sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
+  integrity sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-typescript@^7.12.1":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
+  integrity sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-typescript" "^7.16.7"
+
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz#da8717de7b3287a2c6d659750c964f302b31ece3"
+  integrity sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-unicode-regex@^7.12.1":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
+  integrity sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/preset-env@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
+  integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
+  dependencies:
+    "@babel/compat-data" "^7.12.1"
+    "@babel/helper-compilation-targets" "^7.12.1"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.1"
+    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+    "@babel/plugin-proposal-json-strings" "^7.12.1"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.1"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.12.1"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-async-to-generator" "^7.12.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.1"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-computed-properties" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-dotall-regex" "^7.12.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-function-name" "^7.12.1"
+    "@babel/plugin-transform-literals" "^7.12.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+    "@babel/plugin-transform-modules-amd" "^7.12.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+    "@babel/plugin-transform-modules-umd" "^7.12.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+    "@babel/plugin-transform-new-target" "^7.12.1"
+    "@babel/plugin-transform-object-super" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-property-literals" "^7.12.1"
+    "@babel/plugin-transform-regenerator" "^7.12.1"
+    "@babel/plugin-transform-reserved-words" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/plugin-transform-sticky-regex" "^7.12.1"
+    "@babel/plugin-transform-template-literals" "^7.12.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.12.1"
+    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+    "@babel/plugin-transform-unicode-regex" "^7.12.1"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.12.1"
+    core-js-compat "^3.6.2"
+    semver "^5.5.0"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
+  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
+  integrity sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.12.1"
+    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-self" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-source" "^7.12.1"
+    "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
+
+"@babel/preset-typescript@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
+  integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.12.1"
+
+"@babel/register@7.13.16":
+  version "7.13.16"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.13.16.tgz#ae3ab0b55c8ec28763877383c454f01521d9a53d"
+  integrity sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.0"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/traverse@^7.12.1", "@babel/traverse@^7.14.2", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
+  integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.9"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.9"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.12.1", "@babel/types@^7.14.2", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.4.4":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
+"@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==
+
+"@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/json-schema@^7.0.5":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@webassemblyjs/ast@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
+
+"@webassemblyjs/helper-api-error@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
+"@webassemblyjs/helper-buffer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
+"@webassemblyjs/helper-code-frame@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/helper-fsm@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
+
+"@webassemblyjs/helper-module-context@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
+"@webassemblyjs/helper-wasm-section@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+
+"@webassemblyjs/ieee754@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
+
+"@webassemblyjs/wasm-edit@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/helper-wasm-section" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-opt" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/wasm-gen@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wasm-opt@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+
+"@webassemblyjs/wasm-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wast-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-code-frame" "1.9.0"
+    "@webassemblyjs/helper-fsm" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.1.1.tgz#9f53b1b7946a6efc2a749095a4f450e2932e8356"
+  integrity sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==
+
+"@webpack-cli/info@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.4.1.tgz#2360ea1710cbbb97ff156a3f0f24556e0fc1ebea"
+  integrity sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==
+  dependencies:
+    envinfo "^7.7.3"
+
+"@webpack-cli/serve@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.6.1.tgz#0de2875ac31b46b6c5bb1ae0a7d7f0ba5678dffe"
+  integrity sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==
+
+"@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==
+
+abbrev@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==
+
+accepts@~1.3.5, accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn@^6.4.1:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
+  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
+
+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@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-align@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.0"
+
+ansi-regex@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
+  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+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"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+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.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@^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-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-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=
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+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=
+
+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==
+
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+babel-loader@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-macros@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.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"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-react-app@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz#689b60edc705f8a70ce87f47ab0e560a317d7045"
+  integrity sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==
+  dependencies:
+    "@babel/core" "7.12.3"
+    "@babel/plugin-proposal-class-properties" "7.12.1"
+    "@babel/plugin-proposal-decorators" "7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "7.12.1"
+    "@babel/plugin-transform-flow-strip-types" "7.12.1"
+    "@babel/plugin-transform-react-display-name" "7.12.1"
+    "@babel/plugin-transform-runtime" "7.12.1"
+    "@babel/preset-env" "7.12.1"
+    "@babel/preset-react" "7.12.1"
+    "@babel/preset-typescript" "7.12.1"
+    "@babel/runtime" "7.12.1"
+    babel-plugin-macros "2.8.0"
+    babel-plugin-transform-react-remove-prop-types "0.4.24"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
+body-parser@1.19.2:
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.2.tgz#4714ccd9c157d44797b8b5607d72c0b89952f26e"
+  integrity sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.8.1"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.9.7"
+    raw-body "2.4.3"
+    type-is "~1.6.18"
+
+boxen@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
+  integrity sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^6.2.0"
+    chalk "^4.1.0"
+    cli-boxes "^2.2.1"
+    string-width "^4.2.2"
+    type-fest "^0.20.2"
+    widest-line "^3.1.0"
+    wrap-ansi "^7.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"
+
+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"
+    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"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+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, browserify-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  integrity sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+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"
+
+browserslist@^4.17.5, browserslist@^4.19.1:
+  version "4.20.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
+  integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
+  dependencies:
+    caniuse-lite "^1.0.30001317"
+    electron-to-chromium "^1.4.84"
+    escalade "^3.1.1"
+    node-releases "^2.0.2"
+    picocolors "^1.0.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+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@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+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=
+
+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.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+cacache@^12.0.2:
+  version "12.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
+  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
+  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"
+    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"
+
+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"
+
+call-bind@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+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@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-lite@^1.0.30001317:
+  version "1.0.30001325"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606"
+  integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==
+
+chalk@^2.0.0, 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:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  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"
+
+chokidar@^3.4.1, chokidar@^3.5.2:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+chrome-trace-event@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
+  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
+
+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"
+
+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-boxes@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+
+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-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+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"
+
+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"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.14:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+
+commander@^2.20.0:
+  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==
+
+commander@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+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==
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.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.5.0:
+  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"
+
+concurrently@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.3.0.tgz#7500de6410d043c912b2da27de3202cb489b1e7b"
+  integrity sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==
+  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 "^6.1.0"
+    tree-kill "^1.2.2"
+    yargs "^13.3.0"
+
+configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
+  dependencies:
+    dot-prop "^5.2.0"
+    graceful-fs "^4.1.2"
+    make-dir "^3.0.0"
+    unique-string "^2.0.0"
+    write-file-atomic "^3.0.0"
+    xdg-basedir "^4.0.0"
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+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=
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+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==
+
+convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  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"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
+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.6.2:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.1.tgz#cac369f67c8d134ff8f9bd1623e3bc2c42068c82"
+  integrity sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==
+  dependencies:
+    browserslist "^4.19.1"
+    semver "7.0.0"
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+create-ecdh@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
+  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.4, create-hmac@^1.1.7:
+  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"
+
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+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-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+cyclist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
+  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+
+date-fns@^2.0.1:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
+debug@2.6.9, debug@^2.2.0, debug@^2.3.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.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.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.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
+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-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==
+
+defer-to-connect@^1.0.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
+  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
+
+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"
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+des.js@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
+  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=
+
+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"
+
+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==
+
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.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=
+
+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"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+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-to-chromium@^1.4.84:
+  version "1.4.104"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz#60973b0a7d398efa877196e8ccb0c93d48b918d8"
+  integrity sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==
+
+elliptic@^6.5.3, elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+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@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+envinfo@^7.7.3:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
+  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+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"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
+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:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+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"
+
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+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:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.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"
+    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"
+
+express@^4.17.1:
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.3.tgz#f6c7302194a4fb54271b73a1fe7a06478c8f85a1"
+  integrity sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.19.2"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.4.2"
+    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.7"
+    qs "6.9.7"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.17.2"
+    serve-static "1.14.2"
+    setprototypeof "1.2.0"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+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"
+
+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"
+    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"
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
+  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
+file-uri-to-path@1.0.0:
+  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==
+
+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"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+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@^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"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+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"
+
+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=
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+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-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.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+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==
+
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+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-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+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.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+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=
+
+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.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3, glob@^7.1.4:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  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-dirs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
+  integrity sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==
+  dependencies:
+    ini "2.0.0"
+
+globals@^11.1.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==
+
+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, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+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"
+    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"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  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"
+  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-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.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.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+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:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+hmac-drbg@^1.0.1:
+  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"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+http-cache-semantics@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+
+http-errors@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
+  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.1"
+
+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=
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+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-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
+
+import-fresh@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  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@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.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=
+
+infer-owner@^1.0.3:
+  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.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, 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@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
+ini@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+interpret@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
+  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
+
+ipaddr.js@1.9.1:
+  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-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-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+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-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-core-module@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  dependencies:
+    has "^1.0.3"
+
+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-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"
+    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"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+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@^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-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-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-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-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-installed-globally@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
+  integrity sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==
+  dependencies:
+    global-dirs "^3.0.0"
+    is-path-inside "^3.0.2"
+
+is-npm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
+  integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
+
+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@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-path-inside@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+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-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+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-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@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@^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=
+
+"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==
+
+jsesc@^2.5.1:
+  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=
+
+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-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-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+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==
+
+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.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
+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"
+
+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"
+  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.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+latest-version@^5.1.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"
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+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.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+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"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash@^4.17.15, lodash@^4.17.19:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.1.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"
+
+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@^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"
+
+lru-cache@^7.4.0:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.7.3.tgz#98cd19eef89ce6a4a3c4502c17c833888677c252"
+  integrity sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==
+
+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-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.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-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"
+
+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=
+
+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"
+
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+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@^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"
+    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"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.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==
+
+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.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@^3.0.4:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
+minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
+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.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.1, mkdirp@^0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+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=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.1.3, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nan@^2.12.1:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
+  integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
+
+nanomatch@^1.2.9:
+  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-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"
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+neo-async@^2.5.0, neo-async@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+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-releases@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
+  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
+
+nodemon@^2.0.6:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.15.tgz#504516ce3b43d9dc9a955ccd9ec57550a31a8d4e"
+  integrity sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==
+  dependencies:
+    chokidar "^3.5.2"
+    debug "^3.2.7"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.8"
+    semver "^5.7.1"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.5"
+    update-notifier "^5.1.0"
+
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2:
+  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"
+    resolve "^1.10.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"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0, 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@^4.1.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.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.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+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.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+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"
+
+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"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+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=
+
+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-limit@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.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-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+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==
+
+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"
+
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parallel-transform@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
+  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
+  dependencies:
+    cyclist "^1.0.1"
+    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, parse-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+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@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+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.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@^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-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6, path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+pbkdf2@^3.0.3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  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"
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+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==
+
+pirates@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+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"
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+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=
+
+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=
+
+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==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+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=
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+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=
+
+pstree.remy@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
+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@^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.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  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"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+pupa@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+  dependencies:
+    escape-goat "^2.0.0"
+
+qs@6.9.7:
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
+  integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
+
+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=
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+  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:
+  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.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.3.tgz#8f80305d11c2a0a545c2d9d89d7a0286fcead43c"
+  integrity sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "1.8.1"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+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-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-error-boundary@^3.1.3:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.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.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  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@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  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"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+rechoir@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
+  integrity sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==
+  dependencies:
+    resolve "^1.9.0"
+
+regenerate-unicode-properties@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
+  integrity sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-transform@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
+  integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+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"
+
+regexpu-core@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
+  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.0.1"
+    regjsgen "^0.6.0"
+    regjsparser "^0.8.2"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
+registry-auth-token@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250"
+  integrity sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==
+  dependencies:
+    rc "^1.2.8"
+
+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.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
+  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
+
+regjsparser@^0.8.2:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
+  integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==
+  dependencies:
+    jsesc "~0.5.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.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+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=
+
+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-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==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+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-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+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.12.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.6"
+
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+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"
+
+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==
+
+rimraf@^2.5.4, 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.1.3"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  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"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+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:
+    aproba "^1.1.1"
+
+rxjs@^6.5.2:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  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.2.1, 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, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.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.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+semver-diff@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
+  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+  dependencies:
+    semver "^6.3.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^6.0.0, 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==
+
+semver@^7.3.4:
+  version "7.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.6.tgz#5d73886fb9c0c6602e79440b97165c29581cbb2b"
+  integrity sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==
+  dependencies:
+    lru-cache "^7.4.0"
+
+send@0.17.2:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
+  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
+  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.8.1"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serve-static@1.14.2:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
+  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.2"
+
+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-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.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+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"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.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"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+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"
+    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"
+  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"
+    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"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    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.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@^0.5.0, source-map@^0.5.6:
+  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.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+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.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
+  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
+
+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"
+
+ssri@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+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"
+
+"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=
+
+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-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
+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.0.0, string-width@^4.1.0, string-width@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+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@~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"
+
+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@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+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=
+
+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"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  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"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+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==
+
+terser-webpack-plugin@^1.4.3:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^4.0.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.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+timers-browserify@^2.0.4:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+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-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"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.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"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==
+  dependencies:
+    nopt "~1.0.10"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+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=
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+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"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+undefsafe@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
+  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
+  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
+
+union-value@^1.0.0:
+  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 "^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-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+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"
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-notifier@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
+  integrity sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==
+  dependencies:
+    boxen "^5.0.0"
+    chalk "^4.1.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.4.0"
+    is-npm "^5.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.1.0"
+    pupa "^2.1.1"
+    semver "^7.3.4"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  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@^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@^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"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+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@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"
+
+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"
+
+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=
+
+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"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  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"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.7.4:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
+
+webpack-cli@^4.2.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.2.tgz#77c1adaea020c3f9e2db8aad8ea78d235c83659d"
+  integrity sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^1.1.1"
+    "@webpack-cli/info" "^1.4.1"
+    "@webpack-cli/serve" "^1.6.1"
+    colorette "^2.0.14"
+    commander "^7.0.0"
+    execa "^5.0.0"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^2.2.0"
+    rechoir "^0.7.0"
+    webpack-merge "^5.7.3"
+
+webpack-merge@^5.7.3:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
+  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  dependencies:
+    clone-deep "^4.0.1"
+    wildcard "^2.0.0"
+
+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.44.2:
+  version "4.44.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
+  integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.3.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.3"
+    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.3"
+    watchpack "^1.7.4"
+    webpack-sources "^1.4.1"
+
+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@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
+wildcard@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
+  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
+
+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@^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"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.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@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+xdg-basedir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
+  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+
+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==
+
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^13.3.0:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  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.2"
diff --git a/fixtures/flight-esm/.gitignore b/fixtures/flight-esm/.gitignore
new file mode 100644
index 00000000000..89967363fce
--- /dev/null
+++ b/fixtures/flight-esm/.gitignore
@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# 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-esm/.nvmrc b/fixtures/flight-esm/.nvmrc
new file mode 100644
index 00000000000..5f53e875de6
--- /dev/null
+++ b/fixtures/flight-esm/.nvmrc
@@ -0,0 +1 @@
+v20.19.0
diff --git a/fixtures/flight-esm/loader/package.json b/fixtures/flight-esm/loader/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/fixtures/flight-esm/loader/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/fixtures/flight-esm/loader/region.js b/fixtures/flight-esm/loader/region.js
new file mode 100644
index 00000000000..2f72a1dc7b2
--- /dev/null
+++ b/fixtures/flight-esm/loader/region.js
@@ -0,0 +1,52 @@
+import {
+  resolve,
+  load as reactLoad,
+  getSource as getSourceImpl,
+  transformSource as reactTransformSource,
+} from 'react-server-dom-esm/node-loader';
+
+export {resolve};
+
+async function textLoad(url, context, defaultLoad) {
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    if (typeof result.source === 'string') {
+      return result;
+    }
+    return {
+      source: Buffer.from(result.source).toString('utf8'),
+      format: 'module',
+    };
+  }
+  return result;
+}
+
+export async function load(url, context, defaultLoad) {
+  return await reactLoad(url, context, (u, c) => {
+    return textLoad(u, c, defaultLoad);
+  });
+}
+
+async function textTransformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module') {
+    if (typeof source === 'string') {
+      return {source};
+    }
+    return {
+      source: Buffer.from(source).toString('utf8'),
+    };
+  }
+  return defaultTransformSource(source, context, defaultTransformSource);
+}
+
+async function transformSourceImpl(source, context, defaultTransformSource) {
+  return await reactTransformSource(source, context, (s, c) => {
+    return textTransformSource(s, c, defaultTransformSource);
+  });
+}
+
+export const transformSource =
+  process.version < 'v16' ? transformSourceImpl : undefined;
+export const getSource = process.version < 'v16' ? getSourceImpl : undefined;
diff --git a/fixtures/flight-esm/package.json b/fixtures/flight-esm/package.json
new file mode 100644
index 00000000000..de711927588
--- /dev/null
+++ b/fixtures/flight-esm/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "flight-esm",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "body-parser": "^1.20.1",
+    "browserslist": "^4.18.1",
+    "busboy": "^1.6.0",
+    "compression": "^1.7.4",
+    "concurrently": "^7.3.0",
+    "nodemon": "^2.0.19",
+    "prompts": "^2.4.2",
+    "react": "experimental",
+    "react-dom": "experimental",
+    "undici": "^5.20.0",
+    "webpack-sources": "^3.2.0"
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "dev": "concurrently \"npm run dev:region\" \"npm run dev:global\"",
+    "dev:global": "NODE_ENV=development BUILD_PATH=dist node server/global",
+    "dev:region": "NODE_ENV=development BUILD_PATH=dist nodemon --watch src --watch dist -- --enable-source-maps --experimental-loader ./loader/region.js --conditions=react-server server/region",
+    "start": "concurrently \"npm run start:region\" \"npm run start:global\"",
+    "start:global": "NODE_ENV=production node server/global",
+    "start:region": "NODE_ENV=production node --experimental-loader ./loader/region.js --conditions=react-server server/region"
+  }
+}
diff --git a/fixtures/flight-esm/public/favicon.ico b/fixtures/flight-esm/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/fixtures/flight-esm/public/favicon.ico differ
diff --git a/fixtures/flight-esm/server/global.js b/fixtures/flight-esm/server/global.js
new file mode 100644
index 00000000000..c0b148fc063
--- /dev/null
+++ b/fixtures/flight-esm/server/global.js
@@ -0,0 +1,194 @@
+'use strict';
+
+// This is a server to host CDN distributed resources like module source files and SSR
+
+const path = require('path');
+const url = require('url');
+
+const fs = require('fs').promises;
+const compress = require('compression');
+const chalk = require('chalk');
+const express = require('express');
+const http = require('http');
+const React = require('react');
+
+const {renderToPipeableStream} = require('react-dom/server');
+const {createFromNodeStream} = require('react-server-dom-esm/client');
+
+const moduleBasePath = new URL('../src', url.pathToFileURL(__filename)).href;
+
+const app = express();
+
+app.use(compress());
+
+function request(options, body) {
+  return new Promise((resolve, reject) => {
+    const req = http.request(options, res => {
+      resolve(res);
+    });
+    req.on('error', e => {
+      reject(e);
+    });
+    body.pipe(req);
+  });
+}
+
+app.all('/', async function (req, res, next) {
+  // Proxy the request to the regional server.
+  const proxiedHeaders = {
+    'X-Forwarded-Host': req.hostname,
+    'X-Forwarded-For': req.ips,
+    'X-Forwarded-Port': 3000,
+    'X-Forwarded-Proto': req.protocol,
+  };
+  // Proxy other headers as desired.
+  if (req.get('rsc-action')) {
+    proxiedHeaders['Content-type'] = req.get('Content-type');
+    proxiedHeaders['rsc-action'] = req.get('rsc-action');
+  } else if (req.get('Content-type')) {
+    proxiedHeaders['Content-type'] = req.get('Content-type');
+  }
+
+  const promiseForData = request(
+    {
+      host: '127.0.0.1',
+      port: 3001,
+      method: req.method,
+      path: '/',
+      headers: proxiedHeaders,
+    },
+    req
+  );
+
+  if (req.accepts('text/html')) {
+    try {
+      const rscResponse = await promiseForData;
+      const moduleBaseURL = '/src';
+
+      // For HTML, we're a "client" emulator that runs the client code,
+      // so we start by consuming the RSC payload. This needs the local file path
+      // to load the source files from as well as the URL path for preloads.
+
+      let root;
+      let Root = () => {
+        if (root) {
+          return React.use(root);
+        }
+
+        return React.use(
+          (root = createFromNodeStream(
+            rscResponse,
+            moduleBasePath,
+            moduleBaseURL
+          ))
+        );
+      };
+      // Render it into HTML by resolving the client components
+      res.set('Content-type', 'text/html');
+      const {pipe} = renderToPipeableStream(React.createElement(Root), {
+        importMap: {
+          imports: {
+            react: 'https://esm.sh/react@experimental?pin=v124&dev',
+            'react-dom': 'https://esm.sh/react-dom@experimental?pin=v124&dev',
+            'react-dom/': 'https://esm.sh/react-dom@experimental&pin=v124&dev/',
+            'react-server-dom-esm/client':
+              '/node_modules/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js',
+          },
+        },
+        bootstrapModules: ['/src/index.js'],
+      });
+      pipe(res);
+    } catch (e) {
+      console.error(`Failed to SSR: ${e.stack}`);
+      res.statusCode = 500;
+      res.end();
+    }
+  } else {
+    try {
+      const rscResponse = await promiseForData;
+
+      // For other request, we pass-through the RSC payload.
+      res.set('Content-type', 'text/x-component');
+      rscResponse.on('data', data => {
+        res.write(data);
+        res.flush();
+      });
+      rscResponse.on('end', data => {
+        res.end();
+      });
+    } catch (e) {
+      console.error(`Failed to proxy request: ${e.stack}`);
+      res.statusCode = 500;
+      res.end();
+    }
+  }
+});
+
+app.use(express.static('public'));
+app.use('/src', express.static('src'));
+app.use(
+  '/node_modules/react-server-dom-esm/esm',
+  express.static('node_modules/react-server-dom-esm/esm')
+);
+
+if (process.env.NODE_ENV === 'development') {
+  app.get('/source-maps', async function (req, res, next) {
+    // Proxy the request to the regional server.
+    const proxiedHeaders = {
+      'X-Forwarded-Host': req.hostname,
+      'X-Forwarded-For': req.ips,
+      'X-Forwarded-Port': 3000,
+      'X-Forwarded-Proto': req.protocol,
+    };
+
+    const promiseForData = request(
+      {
+        host: '127.0.0.1',
+        port: 3001,
+        method: req.method,
+        path: req.originalUrl,
+        headers: proxiedHeaders,
+      },
+      req
+    );
+
+    try {
+      const rscResponse = await promiseForData;
+      res.set('Content-type', 'application/json');
+      rscResponse.on('data', data => {
+        res.write(data);
+        res.flush();
+      });
+      rscResponse.on('end', data => {
+        res.end();
+      });
+    } catch (e) {
+      console.error(`Failed to proxy request: ${e.stack}`);
+      res.statusCode = 500;
+      res.end();
+    }
+  });
+}
+
+app.listen(3000, () => {
+  console.log('Global Fizz/Webpack Server listening on port 3000...');
+});
+
+app.on('error', function (error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error('port 3000 requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error('Port 3000 is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
diff --git a/fixtures/flight-esm/server/package.json b/fixtures/flight-esm/server/package.json
new file mode 100644
index 00000000000..5bbefffbabe
--- /dev/null
+++ b/fixtures/flight-esm/server/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight-esm/server/region.js b/fixtures/flight-esm/server/region.js
new file mode 100644
index 00000000000..fe992b6daf5
--- /dev/null
+++ b/fixtures/flight-esm/server/region.js
@@ -0,0 +1,224 @@
+'use strict';
+
+// This is a server to host data-local resources like databases and RSC
+
+const path = require('path');
+const url = require('url');
+
+if (typeof fetch === 'undefined') {
+  // Patch fetch for earlier Node versions.
+  global.fetch = require('undici').fetch;
+}
+
+const express = require('express');
+const bodyParser = require('body-parser');
+const busboy = require('busboy');
+const app = express();
+const compress = require('compression');
+const {Readable} = require('node:stream');
+
+const nodeModule = require('node:module');
+
+app.use(compress());
+
+// Application
+
+const {readFile} = require('fs').promises;
+
+const React = require('react');
+
+const moduleBasePath = new URL('../src', url.pathToFileURL(__filename)).href;
+
+async function renderApp(res, returnValue) {
+  const {renderToPipeableStream} = await import('react-server-dom-esm/server');
+  const m = await import('../src/App.js');
+
+  const App = m.default;
+  const root = React.createElement(App);
+  // For client-invoked server actions we refresh the tree and return a return value.
+  const payload = returnValue ? {returnValue, root} : root;
+  const {pipe} = renderToPipeableStream(payload, moduleBasePath);
+  pipe(res);
+}
+
+app.get('/', async function (req, res) {
+  await renderApp(res, null);
+});
+
+app.post('/', bodyParser.text(), async function (req, res) {
+  const {
+    renderToPipeableStream,
+    decodeReply,
+    decodeReplyFromBusboy,
+    decodeAction,
+  } = await import('react-server-dom-esm/server');
+  const serverReference = req.get('rsc-action');
+  if (serverReference) {
+    // This is the client-side case
+    const [filepath, name] = serverReference.split('#');
+    const action = (await import(filepath))[name];
+    // Validate that this is actually a function we intended to expose and
+    // not the client trying to invoke arbitrary functions. In a real app,
+    // you'd have a manifest verifying this before even importing it.
+    if (action.$$typeof !== Symbol.for('react.server.reference')) {
+      throw new Error('Invalid action');
+    }
+
+    let args;
+    if (req.is('multipart/form-data')) {
+      // Use busboy to streamingly parse the reply from form-data.
+      const bb = busboy({headers: req.headers});
+      const reply = decodeReplyFromBusboy(bb, moduleBasePath);
+      req.pipe(bb);
+      args = await reply;
+    } else {
+      args = await decodeReply(req.body, moduleBasePath);
+    }
+    const result = action.apply(null, args);
+    try {
+      // Wait for any mutations
+      await result;
+    } catch (x) {
+      // We handle the error on the client
+    }
+    // Refresh the client and return the value
+    renderApp(res, result);
+  } else {
+    // This is the progressive enhancement case
+    const UndiciRequest = require('undici').Request;
+    const fakeRequest = new UndiciRequest('http://localhost', {
+      method: 'POST',
+      headers: {'Content-Type': req.headers['content-type']},
+      body: Readable.toWeb(req),
+      duplex: 'half',
+    });
+    const formData = await fakeRequest.formData();
+    const action = await decodeAction(formData, moduleBasePath);
+    try {
+      // Wait for any mutations
+      await action();
+    } catch (x) {
+      const {setServerState} = await import('../src/ServerState.js');
+      setServerState('Error: ' + x.message);
+    }
+    renderApp(res, null);
+  }
+});
+
+app.get('/todos', function (req, res) {
+  res.json([
+    {
+      id: 1,
+      text: 'Shave yaks',
+    },
+    {
+      id: 2,
+      text: 'Eat kale',
+    },
+  ]);
+});
+
+if (process.env.NODE_ENV === 'development') {
+  const rootDir = path.resolve(__dirname, '../');
+
+  app.get('/source-maps', async function (req, res, next) {
+    try {
+      res.set('Content-type', 'application/json');
+      let requestedFilePath = req.query.name;
+
+      let isCompiledOutput = false;
+      if (requestedFilePath.startsWith('file://')) {
+        // We assume that if it was prefixed with file:// it's referring to the compiled output
+        // and if it's a direct file path we assume it's source mapped back to original format.
+        isCompiledOutput = true;
+        requestedFilePath = url.fileURLToPath(requestedFilePath);
+      }
+
+      const relativePath = path.relative(rootDir, requestedFilePath);
+      if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+        // This is outside the root directory of the app. Forbid it to be served.
+        res.status = 403;
+        res.write('{}');
+        res.end();
+        return;
+      }
+
+      const sourceMap = nodeModule.findSourceMap(requestedFilePath);
+      let map;
+      if (requestedFilePath.startsWith('node:')) {
+        // This is a node internal. We don't include any source code for this but we still
+        // generate a source map for it so that we can add it to an ignoreList automatically.
+        map = {
+          version: 3,
+          // We use the node:// protocol convention to teach Chrome DevTools that this is
+          // on a different protocol and not part of the current page.
+          sources: ['node:///' + requestedFilePath.slice(5)],
+          sourcesContent: ['// Node Internals'],
+          mappings: 'AAAA',
+          ignoreList: [0],
+          sourceRoot: '',
+        };
+      } else if (!sourceMap || !isCompiledOutput) {
+        // If a file doesn't have a source map, such as this file, then we generate a blank
+        // source map that just contains the original content and segments pointing to the
+        // original lines. If a line number points to uncompiled output, like if source mapping
+        // was already applied we also use this path.
+        const sourceContent = await readFile(requestedFilePath, 'utf8');
+        const lines = sourceContent.split('\n').length;
+        // We ensure to absolute
+        const sourceURL = url.pathToFileURL(requestedFilePath);
+        map = {
+          version: 3,
+          sources: [sourceURL],
+          sourcesContent: [sourceContent],
+          // Note: This approach to mapping each line only lets you jump to each line
+          // not jump to a column within a line. To do that, you need a proper source map
+          // generated for each parsed segment or add a segment for each column.
+          mappings: 'AAAA' + ';AACA'.repeat(lines - 1),
+          sourceRoot: '',
+          // Add any node_modules to the ignore list automatically.
+          ignoreList: requestedFilePath.includes('node_modules')
+            ? [0]
+            : undefined,
+        };
+      } else {
+        // We always set prepareStackTrace before reading the stack so that we get the stack
+        // without source maps applied. Therefore we have to use the original source map.
+        // If something read .stack before we did, we might observe the line/column after
+        // source mapping back to the original file. We use the isCompiledOutput check above
+        // in that case.
+        map = sourceMap.payload;
+      }
+      res.write(JSON.stringify(map));
+      res.end();
+    } catch (x) {
+      res.status = 500;
+      res.write('{}');
+      res.end();
+      console.error(x);
+    }
+  });
+}
+
+app.listen(3001, () => {
+  console.log('Regional Flight Server listening on port 3001...');
+});
+
+app.on('error', function (error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error('port 3001 requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error('Port 3001 is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
diff --git a/fixtures/flight-esm/src/App.js b/fixtures/flight-esm/src/App.js
new file mode 100644
index 00000000000..d5945280469
--- /dev/null
+++ b/fixtures/flight-esm/src/App.js
@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import Button from './Button.js';
+import Form from './Form.js';
+
+import {like, greet} from './actions.js';
+
+import {getServerState} from './ServerState.js';
+
+const h = React.createElement;
+
+export default async function App() {
+  const res = await fetch('http://localhost:3001/todos');
+  const todos = await res.json();
+  return h(
+    'html',
+    {
+      lang: 'en',
+    },
+    h(
+      'head',
+      null,
+      h('meta', {
+        charSet: 'utf-8',
+      }),
+      h('meta', {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      }),
+      h('title', null, 'Flight'),
+      h('link', {
+        rel: 'stylesheet',
+        href: '/src/style.css',
+        precedence: 'default',
+      })
+    ),
+    h(
+      'body',
+      null,
+      h(
+        'div',
+        null,
+        h('h1', null, getServerState()),
+        h(
+          'ul',
+          null,
+          todos.map(todo =>
+            h(
+              'li',
+              {
+                key: todo.id,
+              },
+              todo.text
+            )
+          )
+        ),
+        h(Form, {
+          action: greet,
+        }),
+        h(
+          'div',
+          null,
+          h(
+            Button,
+            {
+              action: like,
+            },
+            'Like'
+          )
+        )
+      )
+    )
+  );
+}
diff --git a/fixtures/flight-esm/src/Button.js b/fixtures/flight-esm/src/Button.js
new file mode 100644
index 00000000000..3c8816e2a2e
--- /dev/null
+++ b/fixtures/flight-esm/src/Button.js
@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import {useFormStatus} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
+
+const h = React.createElement;
+
+function ButtonDisabledWhilePending({action, children}) {
+  const {pending} = useFormStatus();
+  return h(
+    'button',
+    {
+      disabled: pending,
+      formAction: action,
+    },
+    children
+  );
+}
+
+export default function Button({action, children}) {
+  return h(
+    ErrorBoundary,
+    null,
+    h(
+      'form',
+      null,
+      h(
+        ButtonDisabledWhilePending,
+        {
+          action: action,
+        },
+        children
+      )
+    )
+  );
+}
diff --git a/fixtures/flight-esm/src/ErrorBoundary.js b/fixtures/flight-esm/src/ErrorBoundary.js
new file mode 100644
index 00000000000..d76b82c670f
--- /dev/null
+++ b/fixtures/flight-esm/src/ErrorBoundary.js
@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  state = {error: null};
+  static getDerivedStateFromError(error) {
+    return {error};
+  }
+  render() {
+    if (this.state.error) {
+      return React.createElement(
+        'div',
+        {},
+        'Caught an error: ' + this.state.error.message
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/fixtures/flight-esm/src/Form.js b/fixtures/flight-esm/src/Form.js
new file mode 100644
index 00000000000..6e6ace9f8a7
--- /dev/null
+++ b/fixtures/flight-esm/src/Form.js
@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import {useFormStatus} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
+
+const h = React.createElement;
+
+function Status() {
+  const {pending} = useFormStatus();
+  return pending ? 'Saving...' : null;
+}
+
+export default function Form({action, children}) {
+  const [isPending, setIsPending] = React.useState(false);
+  return h(
+    ErrorBoundary,
+    null,
+    h(
+      'form',
+      {
+        action: action,
+      },
+      h(
+        'label',
+        {},
+        'Name: ',
+        h('input', {
+          name: 'name',
+        })
+      ),
+      h(
+        'label',
+        {},
+        'File: ',
+        h('input', {
+          type: 'file',
+          name: 'file',
+        })
+      ),
+      h('button', {}, 'Say Hi'),
+      h(Status, {})
+    )
+  );
+}
diff --git a/fixtures/flight-esm/src/ServerState.js b/fixtures/flight-esm/src/ServerState.js
new file mode 100644
index 00000000000..3d4c7162262
--- /dev/null
+++ b/fixtures/flight-esm/src/ServerState.js
@@ -0,0 +1,9 @@
+let serverState = 'Hello World';
+
+export function setServerState(message) {
+  serverState = message;
+}
+
+export function getServerState() {
+  return serverState;
+}
diff --git a/fixtures/flight-esm/src/actions.js b/fixtures/flight-esm/src/actions.js
new file mode 100644
index 00000000000..3d26189979c
--- /dev/null
+++ b/fixtures/flight-esm/src/actions.js
@@ -0,0 +1,20 @@
+'use server';
+
+import {setServerState} from './ServerState.js';
+
+export async function like() {
+  setServerState('Liked!');
+  return new Promise((resolve, reject) => resolve('Liked'));
+}
+
+export async function greet(formData) {
+  const name = formData.get('name') || 'you';
+  setServerState('Hi ' + name);
+  const file = formData.get('file');
+  if (file) {
+    return `Ok, ${name}, here is ${file.name}:
+      ${(await file.text()).toUpperCase()}
+    `;
+  }
+  return 'Hi ' + name + '!';
+}
diff --git a/fixtures/flight-esm/src/index.js b/fixtures/flight-esm/src/index.js
new file mode 100644
index 00000000000..6cef6c6c3c5
--- /dev/null
+++ b/fixtures/flight-esm/src/index.js
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {use, Suspense, useState, startTransition} from 'react';
+import ReactDOM from 'react-dom/client';
+import {createFromFetch, encodeReply} from 'react-server-dom-esm/client';
+
+const moduleBaseURL = '/src/';
+
+function findSourceMapURL(fileName) {
+  return (
+    document.location.origin +
+    '/source-maps?name=' +
+    encodeURIComponent(fileName)
+  );
+}
+
+let updateRoot;
+async function callServer(id, args) {
+  const response = fetch('/', {
+    method: 'POST',
+    headers: {
+      Accept: 'text/x-component',
+      'rsc-action': id,
+    },
+    body: await encodeReply(args),
+  });
+  const {returnValue, root} = await createFromFetch(response, {
+    callServer,
+    moduleBaseURL,
+    findSourceMapURL,
+  });
+  // Refresh the tree with the new RSC payload.
+  startTransition(() => {
+    updateRoot(root);
+  });
+  return returnValue;
+}
+
+let data = createFromFetch(
+  fetch('/', {
+    headers: {
+      Accept: 'text/x-component',
+    },
+  }),
+  {
+    callServer,
+    moduleBaseURL,
+    findSourceMapURL,
+  }
+);
+
+function Shell({data}) {
+  const [root, setRoot] = useState(use(data));
+  updateRoot = setRoot;
+  return root;
+}
+
+ReactDOM.hydrateRoot(document, React.createElement(Shell, {data}));
diff --git a/fixtures/flight-esm/src/style.css b/fixtures/flight-esm/src/style.css
new file mode 100644
index 00000000000..37ad792deda
--- /dev/null
+++ b/fixtures/flight-esm/src/style.css
@@ -0,0 +1,3 @@
+body {
+  font-family: Helvetica;
+}
\ No newline at end of file
diff --git a/fixtures/flight-esm/yarn.lock b/fixtures/flight-esm/yarn.lock
new file mode 100644
index 00000000000..2eae2a7a934
--- /dev/null
+++ b/fixtures/flight-esm/yarn.lock
@@ -0,0 +1,793 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/runtime@^7.21.0":
+  version "7.22.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb"
+  integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+abbrev@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==
+
+accepts@~1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+body-parser@^1.20.1:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
+  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.11.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.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"
+
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.18.1:
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.7.tgz#e2b420947e5fb0a58e8f4668ae6e23488127e551"
+  integrity sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==
+  dependencies:
+    caniuse-lite "^1.0.30001489"
+    electron-to-chromium "^1.4.411"
+    node-releases "^2.0.12"
+    update-browserslist-db "^1.0.11"
+
+busboy@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+  dependencies:
+    streamsearch "^1.1.0"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+caniuse-lite@^1.0.30001489:
+  version "1.0.30001492"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001492.tgz#4a06861788a52b4c81fd3344573b68cc87fe062b"
+  integrity sha512-2efF8SAZwgAX1FJr87KWhvuJxnGJKOnctQa8xLOskAXNXq8oiuqgl6u1kk3fFpsp3GgvzlRjiK1sl63hNtFADw==
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^3.5.2:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.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 sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+concurrently@^7.3.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.6.0.tgz#531a6f5f30cf616f355a4afb8f8fcb2bba65a49a"
+  integrity sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==
+  dependencies:
+    chalk "^4.1.0"
+    date-fns "^2.29.1"
+    lodash "^4.17.21"
+    rxjs "^7.0.0"
+    shell-quote "^1.7.3"
+    spawn-command "^0.0.2-1"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
+
+content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+date-fns@^2.29.1:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+debug@2.6.9:
+  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.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+electron-to-chromium@^1.4.411:
+  version "1.4.417"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.417.tgz#a0c7eb992e68287fa50c8da5a5238b01f20b9a82"
+  integrity sha512-8rY8HdCxuSVY8wku3i/eDac4g1b4cSbruzocenrqBlzqruAZYHjQCHIjC66dLR9DXhEHTojsC4EjhZ8KmzwXqA==
+
+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==
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+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==
+
+get-caller-file@^2.0.5:
+  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-intrinsic@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+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"
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
+
+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==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.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 sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+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-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+"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==
+
+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==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.1.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"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+node-releases@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039"
+  integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==
+
+nodemon@^2.0.19:
+  version "2.0.22"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.22.tgz#182c45c3a78da486f673d6c1702e00728daf5258"
+  integrity sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==
+  dependencies:
+    chokidar "^3.5.2"
+    debug "^3.2.7"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.1.2"
+    pstree.remy "^1.1.8"
+    semver "^5.7.1"
+    simple-update-notifier "^1.0.7"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.5"
+
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==
+  dependencies:
+    abbrev "1"
+
+normalize-path@^3.0.0, 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==
+
+object-inspect@^1.9.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  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==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+prompts@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+pstree.remy@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
+qs@6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+react-dom@experimental:
+  version "0.0.0-experimental-b9be4537c-20230905"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-b9be4537c-20230905.tgz#b078d6d06041e0c98ce5a2f5e9ff26a2e308eb41"
+  integrity sha512-veAFNVj81lUYhYlucYm3kbj2BhakG57XYkWC/QHVEZDk4Hm2qxM9RUk7gn8dWs9Eq7KR6Q+JWiSH3ZbObQTV9g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "0.0.0-experimental-b9be4537c-20230905"
+
+react@experimental:
+  version "0.0.0-experimental-b9be4537c-20230905"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-b9be4537c-20230905.tgz#3c2352b42b8024544a12dcd96f2700313cebcb6b"
+  integrity sha512-QNeK74S7AU94j4vCxet2S76HqxpF6CJo1pG3XcgY2NravyXdWYszrRDNHrfu86gGNwAQvSU+YpStYn/i0b9tLA==
+  dependencies:
+    loose-envify "^1.1.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+rxjs@^7.0.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+scheduler@0.0.0-experimental-b9be4537c-20230905:
+  version "0.0.0-experimental-b9be4537c-20230905"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-b9be4537c-20230905.tgz#f0fe5a710ce15a9d637c28e9f019a4100e1f3f34"
+  integrity sha512-V5P9LOS+c5CG7qaCJu+Qgcz9eh/dP4nBszj3w1MCgZnMtAna6+J8ZuuUnRDMeY86F8KH+cY8Q5beIvAL2noMzA==
+  dependencies:
+    loose-envify "^1.1.0"
+
+semver@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@~7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shell-quote@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+simple-update-notifier@^1.0.7:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz#67694c121de354af592b347cdba798463ed49c82"
+  integrity sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==
+  dependencies:
+    semver "~7.0.0"
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+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 sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+streamsearch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
+  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+supports-color@^5.5.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-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==
+  dependencies:
+    nopt "~1.0.10"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tslib@^2.1.0:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
+  integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
+
+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"
+
+undefsafe@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
+undici@^5.20.0:
+  version "5.22.1"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.22.1.tgz#877d512effef2ac8be65e695f3586922e1a57d7b"
+  integrity sha512-Ji2IJhFXZY0x/0tVBXeQwgPlLWw13GVzpsWPQ3rV50IFMMof2I55PZZxtm4P6iNq+L5znYN9nSTAq0ZyE6lSJw==
+  dependencies:
+    busboy "^1.6.0"
+
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+update-browserslist-db@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
+  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+webpack-sources@^3.2.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
diff --git a/fixtures/flight-parcel/.gitignore b/fixtures/flight-parcel/.gitignore
new file mode 100644
index 00000000000..c6b41301c02
--- /dev/null
+++ b/fixtures/flight-parcel/.gitignore
@@ -0,0 +1,5 @@
+.parcel-cache
+.DS_Store
+node_modules
+dist
+todos.json
diff --git a/fixtures/flight-parcel/package.json b/fixtures/flight-parcel/package.json
new file mode 100644
index 00000000000..3d630bf5e13
--- /dev/null
+++ b/fixtures/flight-parcel/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "flight-parcel",
+  "private": true,
+  "source": "src/server.tsx",
+  "server": "dist/server.js",
+  "targets": {
+    "server": {
+      "context": "react-server",
+      "includeNodeModules": {
+        "express": false
+      }
+    }
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "dev": "parcel",
+    "build": "parcel build",
+    "start": "node dist/server.js"
+  },
+  "dependencies": {
+    "@types/parcel-env": "^0.0.6",
+    "@types/express": "*",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "concurrently": "^7.3.0",
+    "express": "^4.18.2",
+    "parcel": "canary",
+    "process": "^0.11.10",
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-server-dom-parcel": "experimental",
+    "rsc-html-stream": "^0.0.4"
+  }
+}
diff --git a/fixtures/flight-parcel/src/Dialog.tsx b/fixtures/flight-parcel/src/Dialog.tsx
new file mode 100644
index 00000000000..d2fb20c8351
--- /dev/null
+++ b/fixtures/flight-parcel/src/Dialog.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import {ReactNode, useRef} from 'react';
+
+export function Dialog({
+  trigger,
+  children,
+}: {
+  trigger: ReactNode;
+  children: ReactNode;
+}) {
+  let ref = useRef<HTMLDialogElement | null>(null);
+  return (
+    <>
+      <button onClick={() => ref.current?.showModal()}>{trigger}</button>
+      <dialog ref={ref} onSubmit={() => ref.current?.close()}>
+        {children}
+      </dialog>
+    </>
+  );
+}
diff --git a/fixtures/flight-parcel/src/TodoCreate.tsx b/fixtures/flight-parcel/src/TodoCreate.tsx
new file mode 100644
index 00000000000..bd0456fd0c2
--- /dev/null
+++ b/fixtures/flight-parcel/src/TodoCreate.tsx
@@ -0,0 +1,18 @@
+import {createTodo} from './actions';
+
+export function TodoCreate() {
+  return (
+    <form action={createTodo}>
+      <label>
+        Title: <input name="title" />
+      </label>
+      <label>
+        Description: <textarea name="description" />
+      </label>
+      <label>
+        Due date: <input type="date" name="dueDate" />
+      </label>
+      <button>Add todo</button>
+    </form>
+  );
+}
diff --git a/fixtures/flight-parcel/src/TodoDetail.tsx b/fixtures/flight-parcel/src/TodoDetail.tsx
new file mode 100644
index 00000000000..3507ad79c5b
--- /dev/null
+++ b/fixtures/flight-parcel/src/TodoDetail.tsx
@@ -0,0 +1,25 @@
+import {getTodo, updateTodo} from './actions';
+
+export async function TodoDetail({id}: {id: number}) {
+  let todo = await getTodo(id);
+  if (!todo) {
+    return <p>Todo not found</p>;
+  }
+
+  return (
+    <form className="todo" action={updateTodo.bind(null, todo.id)}>
+      <label>
+        Title: <input name="title" defaultValue={todo.title} />
+      </label>
+      <label>
+        Description:{' '}
+        <textarea name="description" defaultValue={todo.description} />
+      </label>
+      <label>
+        Due date:{' '}
+        <input type="date" name="dueDate" defaultValue={todo.dueDate} />
+      </label>
+      <button type="submit">Update todo</button>
+    </form>
+  );
+}
diff --git a/fixtures/flight-parcel/src/TodoItem.tsx b/fixtures/flight-parcel/src/TodoItem.tsx
new file mode 100644
index 00000000000..e91b1ada18f
--- /dev/null
+++ b/fixtures/flight-parcel/src/TodoItem.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import {startTransition, useOptimistic} from 'react';
+import {deleteTodo, setTodoComplete, type Todo as ITodo} from './actions';
+
+export function TodoItem({
+  todo,
+  isSelected,
+}: {
+  todo: ITodo;
+  isSelected: boolean;
+}) {
+  let [isOptimisticComplete, setOptimisticComplete] = useOptimistic(
+    todo.isComplete,
+  );
+
+  return (
+    <li data-selected={isSelected || undefined}>
+      <input
+        type="checkbox"
+        checked={isOptimisticComplete}
+        onChange={e => {
+          startTransition(async () => {
+            setOptimisticComplete(e.target.checked);
+            await setTodoComplete(todo.id, e.target.checked);
+          });
+        }}
+      />
+      <a
+        href={`/todos/${todo.id}`}
+        aria-current={isSelected ? 'page' : undefined}>
+        {todo.title}
+      </a>
+      <button onClick={() => deleteTodo(todo.id)}>x</button>
+    </li>
+  );
+}
diff --git a/fixtures/flight-parcel/src/TodoList.tsx b/fixtures/flight-parcel/src/TodoList.tsx
new file mode 100644
index 00000000000..d84b52aaf73
--- /dev/null
+++ b/fixtures/flight-parcel/src/TodoList.tsx
@@ -0,0 +1,13 @@
+import {TodoItem} from './TodoItem';
+import {getTodos} from './actions';
+
+export async function TodoList({id}: {id: number | undefined}) {
+  let todos = await getTodos();
+  return (
+    <ul className="todo-list">
+      {todos.map(todo => (
+        <TodoItem key={todo.id} todo={todo} isSelected={todo.id === id} />
+      ))}
+    </ul>
+  );
+}
diff --git a/fixtures/flight-parcel/src/Todos.css b/fixtures/flight-parcel/src/Todos.css
new file mode 100644
index 00000000000..4c7de7b12b5
--- /dev/null
+++ b/fixtures/flight-parcel/src/Todos.css
@@ -0,0 +1,63 @@
+body {
+  font-family: system-ui;
+  color-scheme: light dark;
+}
+
+form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  flex-direction: column;
+  max-width: 400px;
+  gap: 8px;
+}
+
+label {
+  display: contents;
+}
+
+main {
+  display: flex;
+  gap: 32px;
+}
+
+.todo-column {
+  width: 250px;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 250px;
+  padding: 8px;
+  padding-right: 40px;
+  box-sizing: border-box;
+}
+
+.todo-list {
+  max-width: 250px;
+  padding: 0;
+  list-style: none;
+  padding-right: 32px;
+  border-right: 1px solid gray;
+
+  li {
+    display: flex;
+    gap: 8px;
+    padding: 8px;
+    border-radius: 8px;
+    accent-color: light-dark(black, white);
+
+    a {
+      color: inherit;
+      text-decoration: none;
+      width: 100%;
+    }
+
+    &[data-selected] {
+      background-color: light-dark(#222, #ddd);
+      color: light-dark(#ddd, #222);
+      accent-color: light-dark(white, black);
+    }
+  }
+}
diff --git a/fixtures/flight-parcel/src/Todos.tsx b/fixtures/flight-parcel/src/Todos.tsx
new file mode 100644
index 00000000000..ea606907300
--- /dev/null
+++ b/fixtures/flight-parcel/src/Todos.tsx
@@ -0,0 +1,33 @@
+'use server-entry';
+
+import './client';
+import './Todos.css';
+import {Dialog} from './Dialog';
+import {TodoDetail} from './TodoDetail';
+import {TodoCreate} from './TodoCreate';
+import {TodoList} from './TodoList';
+
+export async function Todos({id}: {id?: number}) {
+  return (
+    <html style={{colorScheme: 'dark light'}}>
+      <head>
+        <title>Todos</title>
+      </head>
+      <body>
+        <header>
+          <h1>Todos</h1>
+          <Dialog trigger="+">
+            <h2>Add todo</h2>
+            <TodoCreate />
+          </Dialog>
+        </header>
+        <main>
+          <div className="todo-column">
+            <TodoList id={id} />
+          </div>
+          {id != null ? <TodoDetail key={id} id={id} /> : <p>Select a todo</p>}
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/fixtures/flight-parcel/src/actions.ts b/fixtures/flight-parcel/src/actions.ts
new file mode 100644
index 00000000000..0d06b11b5b1
--- /dev/null
+++ b/fixtures/flight-parcel/src/actions.ts
@@ -0,0 +1,75 @@
+'use server';
+
+import fs from 'fs/promises';
+
+export interface Todo {
+  id: number;
+  title: string;
+  description: string;
+  dueDate: string;
+  isComplete: boolean;
+}
+
+export async function getTodos(): Promise<Todo[]> {
+  try {
+    let contents = await fs.readFile('todos.json', 'utf8');
+    return JSON.parse(contents);
+  } catch {
+    await fs.writeFile('todos.json', '[]');
+    return [];
+  }
+}
+
+export async function getTodo(id: number): Promise<Todo | undefined> {
+  let todos = await getTodos();
+  return todos.find(todo => todo.id === id);
+}
+
+export async function createTodo(formData: FormData) {
+  let todos = await getTodos();
+  let title = formData.get('title');
+  let description = formData.get('description');
+  let dueDate = formData.get('dueDate');
+  let id = todos.length > 0 ? Math.max(...todos.map(todo => todo.id)) + 1 : 0;
+  todos.push({
+    id,
+    title: typeof title === 'string' ? title : '',
+    description: typeof description === 'string' ? description : '',
+    dueDate: typeof dueDate === 'string' ? dueDate : new Date().toISOString(),
+    isComplete: false,
+  });
+  await fs.writeFile('todos.json', JSON.stringify(todos));
+}
+
+export async function updateTodo(id: number, formData: FormData) {
+  let todos = await getTodos();
+  let title = formData.get('title');
+  let description = formData.get('description');
+  let dueDate = formData.get('dueDate');
+  let todo = todos.find(todo => todo.id === id);
+  if (todo) {
+    todo.title = typeof title === 'string' ? title : '';
+    todo.description = typeof description === 'string' ? description : '';
+    todo.dueDate =
+      typeof dueDate === 'string' ? dueDate : new Date().toISOString();
+    await fs.writeFile('todos.json', JSON.stringify(todos));
+  }
+}
+
+export async function setTodoComplete(id: number, isComplete: boolean) {
+  let todos = await getTodos();
+  let todo = todos.find(todo => todo.id === id);
+  if (todo) {
+    todo.isComplete = isComplete;
+    await fs.writeFile('todos.json', JSON.stringify(todos));
+  }
+}
+
+export async function deleteTodo(id: number) {
+  let todos = await getTodos();
+  let index = todos.findIndex(todo => todo.id === id);
+  if (index >= 0) {
+    todos.splice(index, 1);
+    await fs.writeFile('todos.json', JSON.stringify(todos));
+  }
+}
diff --git a/fixtures/flight-parcel/src/client.tsx b/fixtures/flight-parcel/src/client.tsx
new file mode 100644
index 00000000000..8000c8f8e98
--- /dev/null
+++ b/fixtures/flight-parcel/src/client.tsx
@@ -0,0 +1,113 @@
+'use client-entry';
+
+import {
+  useState,
+  use,
+  startTransition,
+  useInsertionEffect,
+  ReactElement,
+} from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  createFromReadableStream,
+  createFromFetch,
+  encodeReply,
+  setServerCallback,
+} from 'react-server-dom-parcel/client';
+import {rscStream} from 'rsc-html-stream/client';
+
+// Stream in initial RSC payload embedded in the HTML.
+let initialRSCPayload = createFromReadableStream<ReactElement>(rscStream);
+let updateRoot:
+  | ((root: ReactElement, cb?: (() => void) | null) => void)
+  | null = null;
+
+function Content() {
+  // Store the current root element in state, along with a callback
+  // to call once rendering is complete.
+  let [[root, cb], setRoot] = useState<[ReactElement, (() => void) | null]>([
+    use(initialRSCPayload),
+    null,
+  ]);
+  updateRoot = (root, cb) => setRoot([root, cb ?? null]);
+  useInsertionEffect(() => cb?.());
+  return root;
+}
+
+// Hydrate initial page content.
+startTransition(() => {
+  ReactDOM.hydrateRoot(document, <Content />);
+});
+
+// A very simple router. When we navigate, we'll fetch a new RSC payload from the server,
+// and in a React transition, stream in the new page. Once complete, we'll pushState to
+// update the URL in the browser.
+async function navigate(pathname: string, push = false) {
+  let res = fetch(pathname, {
+    headers: {
+      Accept: 'text/x-component',
+    },
+  });
+  let root = await createFromFetch<ReactElement>(res);
+  startTransition(() => {
+    updateRoot!(root, () => {
+      if (push) {
+        history.pushState(null, '', pathname);
+        push = false;
+      }
+    });
+  });
+}
+
+// Intercept link clicks to perform RSC navigation.
+document.addEventListener('click', e => {
+  let link = (e.target as Element).closest('a');
+  if (
+    link &&
+    link instanceof HTMLAnchorElement &&
+    link.href &&
+    (!link.target || link.target === '_self') &&
+    link.origin === location.origin &&
+    !link.hasAttribute('download') &&
+    e.button === 0 && // left clicks only
+    !e.metaKey && // open in new tab (mac)
+    !e.ctrlKey && // open in new tab (windows)
+    !e.altKey && // download
+    !e.shiftKey &&
+    !e.defaultPrevented
+  ) {
+    e.preventDefault();
+    navigate(link.pathname, true);
+  }
+});
+
+// When the user clicks the back button, navigate with RSC.
+window.addEventListener('popstate', e => {
+  navigate(location.pathname);
+});
+
+// Intercept HMR window reloads, and do it with RSC instead.
+window.addEventListener('parcelhmrreload', e => {
+  e.preventDefault();
+  navigate(location.pathname);
+});
+
+// Setup a callback to perform server actions.
+// This sends a POST request to the server, and updates the page with the response.
+setServerCallback(async function (id: string, args: any[]) {
+  console.log('Handling server action', id, args);
+  const response = fetch(location.pathname, {
+    method: 'POST',
+    headers: {
+      Accept: 'text/x-component',
+      'rsc-action-id': id,
+    },
+    body: await encodeReply(args),
+  });
+  const {result, root} = await createFromFetch<{
+    root: JSX.Element;
+    result: any;
+  }>(response);
+  startTransition(() => updateRoot!(root));
+  return result;
+});
diff --git a/fixtures/flight-parcel/src/server.tsx b/fixtures/flight-parcel/src/server.tsx
new file mode 100644
index 00000000000..d9a81a0ef94
--- /dev/null
+++ b/fixtures/flight-parcel/src/server.tsx
@@ -0,0 +1,140 @@
+// Server dependencies.
+import express, {
+  type Request as ExpressRequest,
+  type Response as ExpressResponse,
+} from 'express';
+import {Readable} from 'node:stream';
+import type {ReadableStream as NodeReadableStream} from 'stream/web';
+import {
+  renderToReadableStream,
+  loadServerAction,
+  decodeReply,
+  decodeAction,
+} from 'react-server-dom-parcel/server.edge';
+import {injectRSCPayload} from 'rsc-html-stream/server';
+
+// Client dependencies, used for SSR.
+// These must run in the same environment as client components (e.g. same instance of React).
+import {createFromReadableStream} from 'react-server-dom-parcel/client.edge' with {env: 'react-client'};
+import {renderToReadableStream as renderHTMLToReadableStream} from 'react-dom/server.edge' with {env: 'react-client'};
+import ReactClient, {ReactElement} from 'react' with {env: 'react-client'};
+
+// Page components. These must have "use server-entry" so they are treated as code splitting entry points.
+import {Todos} from './Todos';
+
+const app = express();
+
+app.use(function (req, res, next) {
+  res.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,POST');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Headers', 'rsc-action');
+  next();
+});
+
+app.use(express.static('dist'));
+
+app.get('/', async (req, res) => {
+  await render(req, res, <Todos />);
+});
+
+app.post('/', async (req, res) => {
+  await handleAction(req, res, <Todos />);
+});
+
+app.get('/todos/:id', async (req, res) => {
+  await render(req, res, <Todos id={Number(req.params.id)} />);
+});
+
+app.post('/todos/:id', async (req, res) => {
+  await handleAction(req, res, <Todos id={Number(req.params.id)} />);
+});
+
+async function render(
+  req: ExpressRequest,
+  res: ExpressResponse,
+  component: ReactElement,
+  actionResult?: any,
+) {
+  // Render RSC payload.
+  let root: any = component;
+  if (actionResult) {
+    root = {result: actionResult, root};
+  }
+  let stream = renderToReadableStream(root);
+  if (req.accepts('text/html')) {
+    res.setHeader('Content-Type', 'text/html');
+
+    // Use client react to render the RSC payload to HTML.
+    let [s1, s2] = stream.tee();
+    let data: Promise<ReactElement>;
+    function Content() {
+      data ??= createFromReadableStream<ReactElement>(s1);
+      return ReactClient.use(data);
+    }
+
+    let htmlStream = await renderHTMLToReadableStream(<Content />, {
+      bootstrapScriptContent: (Todos as any).bootstrapScript,
+    });
+    let response = htmlStream.pipeThrough(injectRSCPayload(s2));
+    Readable.fromWeb(response as NodeReadableStream).pipe(res);
+  } else {
+    res.set('Content-Type', 'text/x-component');
+    Readable.fromWeb(stream as NodeReadableStream).pipe(res);
+  }
+}
+
+// Handle server actions.
+async function handleAction(
+  req: ExpressRequest,
+  res: ExpressResponse,
+  component: ReactElement,
+) {
+  let id = req.get('rsc-action-id');
+  let request = new Request('http://localhost' + req.url, {
+    method: 'POST',
+    headers: req.headers as any,
+    body: Readable.toWeb(req) as ReadableStream,
+    // @ts-ignore
+    duplex: 'half',
+  });
+
+  if (id) {
+    let action = await loadServerAction(id);
+    let body = req.is('multipart/form-data')
+      ? await request.formData()
+      : await request.text();
+    let args = await decodeReply<any[]>(body);
+    let result = action.apply(null, args);
+    try {
+      // Wait for any mutations
+      await result;
+    } catch (x) {
+      // We handle the error on the client
+    }
+
+    await render(req, res, component, result);
+  } else {
+    // Form submitted by browser (progressive enhancement).
+    let formData = await request.formData();
+    let action = await decodeAction(formData);
+    try {
+      // Wait for any mutations
+      await action();
+    } catch (err) {
+      // TODO render error page?
+    }
+    await render(req, res, component);
+  }
+}
+
+let server = app.listen(3001);
+console.log('Server listening on port 3001');
+
+// Restart the server when it changes.
+if (module.hot) {
+  module.hot.dispose(() => {
+    server.close();
+  });
+
+  module.hot.accept();
+}
diff --git a/fixtures/flight-parcel/tsconfig.json b/fixtures/flight-parcel/tsconfig.json
new file mode 100644
index 00000000000..a81941c1570
--- /dev/null
+++ b/fixtures/flight-parcel/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "module": "esnext",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "target": "es2022"
+  }
+}
diff --git a/fixtures/flight-parcel/types.d.ts b/fixtures/flight-parcel/types.d.ts
new file mode 100644
index 00000000000..ab7748dc8cb
--- /dev/null
+++ b/fixtures/flight-parcel/types.d.ts
@@ -0,0 +1,29 @@
+// TODO: move these into their respective packages.
+
+declare module 'react-server-dom-parcel/client' {
+  export function createFromFetch<T>(res: Promise<Response>): Promise<T>;
+  export function encodeReply(value: any): Promise<string | URLSearchParams | FormData>;
+
+  type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+  export function setServerCallback(cb: CallServerCallback): void;
+}
+
+declare module 'react-server-dom-parcel/client.edge' {
+  export function createFromReadableStream<T>(stream: ReadableStream): Promise<T>;
+}
+
+declare module 'react-server-dom-parcel/server.edge' {
+  export function renderToReadableStream(value: any): ReadableStream;
+  export function loadServerAction(id: string): Promise<(...args: any[]) => any>;
+  export function decodeReply<T>(body: string | FormData): Promise<T>;
+  export function decodeAction(body: FormData): Promise<(...args: any[]) => any>;
+}
+
+declare module '@parcel/runtime-rsc' {
+  import {JSX} from 'react';
+  export function Resources(): JSX.Element;
+}
+
+declare module 'react-dom/server.edge' {
+  export * from 'react-dom/server';
+}
diff --git a/fixtures/flight-parcel/yarn.lock b/fixtures/flight-parcel/yarn.lock
new file mode 100644
index 00000000000..4b72e06b91b
--- /dev/null
+++ b/fixtures/flight-parcel/yarn.lock
@@ -0,0 +1,2353 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/runtime@^7.21.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@lezer/common@^1.0.0":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
+  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
+
+"@lezer/lr@^1.0.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.2.tgz#931ea3dea8e9de84e90781001dae30dea9ff1727"
+  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lmdb/lmdb-darwin-arm64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.8.5.tgz#895d8cb16a9d709ce5fedd8b60022903b875e08e"
+  integrity sha512-KPDeVScZgA1oq0CiPBcOa3kHIqU+pTOwRFDIhxvmf8CTNvqdZQYp5cCKW0bUk69VygB2PuTiINFWbY78aR2pQw==
+
+"@lmdb/lmdb-darwin-x64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-2.8.5.tgz#ca243534c8b37d5516c557e4624256d18dd63184"
+  integrity sha512-w/sLhN4T7MW1nB3R/U8WK5BgQLz904wh+/SmA2jD8NnF7BLLoUgflCNxOeSPOWp8geP6nP/+VjWzZVip7rZ1ug==
+
+"@lmdb/lmdb-linux-arm64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-2.8.5.tgz#b44a8023057e21512eefb9f6120096843b531c1e"
+  integrity sha512-vtbZRHH5UDlL01TT5jB576Zox3+hdyogvpcbvVJlmU5PdL3c5V7cj1EODdh1CHPksRl+cws/58ugEHi8bcj4Ww==
+
+"@lmdb/lmdb-linux-arm@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-2.8.5.tgz#17bd54740779c3e4324e78e8f747c21416a84b3d"
+  integrity sha512-c0TGMbm2M55pwTDIfkDLB6BpIsgxV4PjYck2HiOX+cy/JWiBXz32lYbarPqejKs9Flm7YVAKSILUducU9g2RVg==
+
+"@lmdb/lmdb-linux-x64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-2.8.5.tgz#6c61835b6cc58efdf79dbd5e8c72a38300a90302"
+  integrity sha512-Xkc8IUx9aEhP0zvgeKy7IQ3ReX2N8N1L0WPcQwnZweWmOuKfwpS3GRIYqLtK5za/w3E60zhFfNdS+3pBZPytqQ==
+
+"@lmdb/lmdb-win32-x64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.8.5.tgz#8233e8762440b0f4632c47a09b1b6f23de8b934c"
+  integrity sha512-4wvrf5BgnR8RpogHhtpCPJMKBmvyZPhhUtEwMJbXh0ni2BucpfF07jlmyM11zRqQ2XIq6PbC2j7W7UCCcm1rRQ==
+
+"@mischnic/json-sourcemap@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@mischnic/json-sourcemap/-/json-sourcemap-0.1.1.tgz#0ef9b015a8f575dd9a8720d9a6b4dbc988425906"
+  integrity sha512-iA7+tyVqfrATAIsIRWQG+a7ZLLD0VaOCKV2Wd/v4mqIU3J9c4jx9p7S0nw1XH3gJCKNBOOwACOPYYSUu9pgT+w==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    json5 "^2.2.1"
+
+"@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz#9edec61b22c3082018a79f6d1c30289ddf3d9d11"
+  integrity sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==
+
+"@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz#33677a275204898ad8acbf62734fc4dc0b6a4855"
+  integrity sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==
+
+"@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz#19edf7cdc2e7063ee328403c1d895a86dd28f4bb"
+  integrity sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==
+
+"@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz#94fb0543ba2e28766c3fc439cabbe0440ae70159"
+  integrity sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==
+
+"@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz#4a0609ab5fe44d07c9c60a11e4484d3c38bbd6e3"
+  integrity sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==
+
+"@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz#0aa5502d547b57abfc4ac492de68e2006e417242"
+  integrity sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==
+
+"@parcel/bundler-default@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/bundler-default/-/bundler-default-2.0.0-canary.1778.tgz#8a1d52191d035935547ed290c4ba4fc30cb8d8b2"
+  integrity sha512-eLiqvCl19fEa7V4qQShb2zn5N5X1cmpjXsd9WxYXA6WBLoO4Jj3Ju+GS8XH9/dUT0J0h5MZMazNUPqW/AAnFMw==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/graph" "3.3.4-canary.3401+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/cache@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/cache/-/cache-2.0.0-canary.1778.tgz#527ade7385f66ced271c73562925281e8975683e"
+  integrity sha512-WyGF9q0so0evb60joAdk9wqtKsrrb5zNqtMH2Es+g0B+HjuhfcyiuXUHL+O8zGZWHwzvdfij/s3bGj4sMjFZrg==
+  dependencies:
+    "@parcel/fs" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/logger" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    lmdb "2.8.5"
+
+"@parcel/codeframe@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/codeframe/-/codeframe-2.0.0-canary.1778.tgz#216f2b5b1c84f8e3e06a27825cb80066fb5cc624"
+  integrity sha512-X6Y82nZJDBt/3rhwQ/8KDxzXHlMJ22T8R5DMAMLxg8aYNUUCV2GIcfiYDqp6fednUsZcRZ+VDsA2vDRLuHBKyw==
+  dependencies:
+    chalk "^4.1.2"
+
+"@parcel/compressor-raw@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.13.4-canary.3401.tgz#322dae1c6feafd00d79d46cfde91b9753927e8ad"
+  integrity sha512-LYM92++ZfrFq08IaObm2KPZW3F3JxOd6WFEC8PdGisLNdDclnPGaX7Jg37KK9BKhmPWnysjqhtcf2evG8Xv8gg==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/config-default@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/config-default/-/config-default-2.0.0-canary.1778.tgz#860c6193c59cca237114c3499f727bf8e4139af5"
+  integrity sha512-BuRhy0Nhz45rQswOkc8EccUeYa9ZnL/ZYX4pdXULMbjhJzPMvs4OAg5NHy7uPvDWl0E7vt9kdDKDwUesLXTYUg==
+  dependencies:
+    "@parcel/bundler-default" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/compressor-raw" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/namer-default" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/optimizer-css" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/optimizer-htmlnano" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/optimizer-image" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/optimizer-svgo" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/optimizer-swc" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/packager-css" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/packager-html" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/packager-js" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/packager-raw" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/packager-svg" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/packager-wasm" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/reporter-dev-server" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/resolver-default" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/runtime-browser-hmr" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/runtime-js" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/runtime-rsc" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/runtime-service-worker" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/transformer-babel" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-css" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-html" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-image" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/transformer-js" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-json" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-node" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/transformer-postcss" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-posthtml" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-raw" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-react-refresh-wrap" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/transformer-svg" "2.13.4-canary.3401+b50bc79cb"
+
+"@parcel/core@2.0.0-canary.1776+b50bc79cb":
+  version "2.0.0-canary.1776"
+  resolved "https://registry.yarnpkg.com/@parcel/core/-/core-2.0.0-canary.1776.tgz#52887c2cc077222aeb490551713c267e2d2c7a41"
+  integrity sha512-4r2NbDDI9uEi76lxtgTZF+KsC4epk2mxtRi/HX3hWy5vSh1hYYAp6O5sc0+uqc3aOg6LYDgSrRGJ01cp4Q4a5A==
+  dependencies:
+    "@mischnic/json-sourcemap" "^0.1.0"
+    "@parcel/cache" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/events" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/feature-flags" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/fs" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/graph" "3.3.4-canary.3401+b50bc79cb"
+    "@parcel/logger" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/package-manager" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/profiler" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+    base-x "^3.0.8"
+    browserslist "^4.6.6"
+    clone "^2.1.1"
+    dotenv "^16.4.5"
+    dotenv-expand "^11.0.6"
+    json5 "^2.2.0"
+    msgpackr "^1.9.9"
+    nullthrows "^1.1.1"
+    semver "^7.5.2"
+
+"@parcel/diagnostic@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/diagnostic/-/diagnostic-2.0.0-canary.1778.tgz#618e33303887b5f733200f89e07700f50b9df89b"
+  integrity sha512-/WeyPZEF4OCGU2g/H2XSXe7cEnzBZVAqAodJjAcHEUiFlepXD6rockx15IyYb/+o8fr5WBdgLSzHiu5X0EU5Ug==
+  dependencies:
+    "@mischnic/json-sourcemap" "^0.1.0"
+    nullthrows "^1.1.1"
+
+"@parcel/error-overlay@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/error-overlay/-/error-overlay-2.13.4-canary.3401.tgz#50e5c786499485b093ed5a1c410262a6d5818895"
+  integrity sha512-NvX0zbNWTkKk75tb0qfaSUUdbx913Bk+zqjRzr6fnejcIpNb5LzFWB5H5EwdSMKN4rsU/16IBw0vh/eVzz65tg==
+  dependencies:
+    ansi-html-community "0.0.8"
+    react "^18 || ^19"
+    react-dom "^18 || ^19"
+
+"@parcel/events@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.0.0-canary.1778.tgz#2e8d1f353969166f4d402959fb24b487d6b8aaec"
+  integrity sha512-gVlxmr8Jn9p9gE3FJNg6pjB145DTHPZ573VyCUTlB3CzGP2Anw6yt8PMrl0mPbFsB+JPhDe+cC73xLcqvF5qvQ==
+
+"@parcel/feature-flags@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/feature-flags/-/feature-flags-2.13.4-canary.3401.tgz#5f246e10b1af1c03562e4a4487e294de6f7bbcdb"
+  integrity sha512-ufBQX85889tFv+WfekNTjTgoiNoTUzseCJWdNvatmDCnj9p+XXHhOzaIBuybrHmle69boEiin+SV1/ygP+MqeQ==
+
+"@parcel/fs@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-2.0.0-canary.1778.tgz#26f8b0412180a7f4c3e7466fe417ff37d601fc1b"
+  integrity sha512-E+rlzz8oMqtLLelEdx8f8urP+CL4da09CfbRNWMCpSTFSVQ4bd277ysDk3f2Zb2xSrb1UNz+jfYzkbWUkbkzNA==
+  dependencies:
+    "@parcel/feature-flags" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/types-internal" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/watcher" "^2.0.7"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/graph@3.3.4-canary.3401+b50bc79cb":
+  version "3.3.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/graph/-/graph-3.3.4-canary.3401.tgz#063e63dbfbd179f91a66913080dcfc9c9fd2a90f"
+  integrity sha512-e9jiVibaiPbN37GQmsbWYpr9hcROaNUJ+u//CEggxQ1afZzrXuemHKjpsGov8mwIOa9FPsFixEm4k3Be9totOg==
+  dependencies:
+    "@parcel/feature-flags" "2.13.4-canary.3401+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/logger@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.0.0-canary.1778.tgz#5816e7588836a7b797f588f1597d2291fb934c1a"
+  integrity sha512-awy1XSaICE+fcgBGg4S4OosMYjm8ekOmKeQ1VJgEaqOJMKuQ9B1KEE0wjF0go+L8UeKOkQB042krgrgFij53eg==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/events" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/markdown-ansi@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.0.0-canary.1778.tgz#ccdb0dab5ee7f4458a31545dcc1039ec47a06c0b"
+  integrity sha512-y4UcdboI584JLZAyU4MQV/vhH5KoYEPzxd44lA5UWMHgYJSAaQrf14ua7mKfJ5YzPNGdUMqnpQr/WxhwjhsZNg==
+  dependencies:
+    chalk "^4.1.2"
+
+"@parcel/namer-default@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.0.0-canary.1778.tgz#7e653625644c46008c27283df441d5ba84393558"
+  integrity sha512-KMlDPf2qchLWVbPHV7oYBcUvLaL2Pc45HvGomhCOVADQd/x77TrZBFQrdOdoGqrMq6UGxXanaqQSpmT+mxuUKA==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/node-resolver-core@3.4.4-canary.3401+b50bc79cb":
+  version "3.4.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/node-resolver-core/-/node-resolver-core-3.4.4-canary.3401.tgz#6093e0dc3532a56e72d01761ecf6e42fda721ecc"
+  integrity sha512-xrPwvoQMolEfq5aPYOpCl2BRWzlUXCAI1Q5D6Uamellgq3AXkM32cp9NoxV8KXbWCxNg9p4Q9pn3rnc3veJsxg==
+  dependencies:
+    "@mischnic/json-sourcemap" "^0.1.0"
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/fs" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+    semver "^7.5.2"
+
+"@parcel/optimizer-css@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-css/-/optimizer-css-2.13.4-canary.3401.tgz#caef3a38f33aa708caa005c4702ceab3fe7263d8"
+  integrity sha512-Ya7XysNxz6VdyDfh/NeRAULeQxrYeDvAmdvKkMACYe2vWk9K3PGqHvW56mE0gI6lim57LGuY98qDLf30aVBG2A==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    browserslist "^4.6.6"
+    lightningcss "^1.22.1"
+    nullthrows "^1.1.1"
+
+"@parcel/optimizer-htmlnano@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.0.0-canary.1778.tgz#aeef13adb7a519827ed0e10c8f7519a588e14834"
+  integrity sha512-EV5vLmHMp4VOCDMb4X+YXgGw7ArbVkK81JIO+rsEoTxAckcApt/+tTreALdWjUFt+MUD4fOX7wj7QE2I3ZxDlA==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    htmlnano "^2.0.0"
+    nullthrows "^1.1.1"
+    posthtml "^0.16.5"
+
+"@parcel/optimizer-image@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-image/-/optimizer-image-2.13.4-canary.3401.tgz#2873dc9346b58ef273311cc6babd0b30a409a312"
+  integrity sha512-Td1++YkEMfkmx2J8MQq4tBPUcq1LtJ1FkUVamB1aEK7rn9nayzzX09x4hsHUjIrJUwFXgxkOE+GsLDc7gxsZXQ==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/optimizer-svgo@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-svgo/-/optimizer-svgo-2.13.4-canary.3401.tgz#6be0319a549683889d94f427539d9c7e8fa23b05"
+  integrity sha512-Iza9b5eRF0gFo1kGZFNL3NN8fW5gkbOt8dBZ0adSmKdJnnl4qRXfk2riw/ao46TxpbUWHB3QM/Yd/zNjO35Zog==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/optimizer-swc@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-swc/-/optimizer-swc-2.13.4-canary.3401.tgz#f8c59ae533208eeaf4d21871ad3a77dd70bdd837"
+  integrity sha512-b7szi8sWCNniSRGXMSnAPgZuqFNj6EghoLgDw5c5wNm30nh0Ra5QQIN5KGswxNj1l2qzIfk7PbU30GIxBop7kg==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@swc/core" "^1.10.7"
+    nullthrows "^1.1.1"
+
+"@parcel/package-manager@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/package-manager/-/package-manager-2.0.0-canary.1778.tgz#f8231d85d3f565762d4cf19f110b94d350a7470b"
+  integrity sha512-2KVJx1go+/DleXHzCdXctNlCuEDPL1W2N2B9+P2r+q6N1u/VMzgM5U2bJxCvHzJoRj1Z1L/+gshCoqjew3ylSA==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/fs" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/logger" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/node-resolver-core" "3.4.4-canary.3401+b50bc79cb"
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+    "@swc/core" "^1.10.7"
+    semver "^7.5.2"
+
+"@parcel/packager-css@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-css/-/packager-css-2.0.0-canary.1778.tgz#e29ed4e5d0c2b41cf3603708b542d4eba4b8388f"
+  integrity sha512-1YODpOVoaXLANH3FBz47Qh0bNNc8WoFU2Xcgd2P54VheYp1TgQ5/kGZWSfk04hcxBeB6pDaVrULIzw8lpCK3vA==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    lightningcss "^1.22.1"
+    nullthrows "^1.1.1"
+
+"@parcel/packager-html@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-html/-/packager-html-2.0.0-canary.1778.tgz#43f3fe4feb4ceb1ef30409fea393a5cd66067950"
+  integrity sha512-jV9wwbWoRkCWJ6oikLAaQkR4ZRVvWfKyvz1LbqS/L7cMsOQR/92YiPGbYa/3L0DmvgTL3LFjcN6E9hVgEk/Srw==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+    posthtml "^0.16.5"
+
+"@parcel/packager-js@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-js/-/packager-js-2.0.0-canary.1778.tgz#c9579986baad35802685d05bc275f9313a6b040b"
+  integrity sha512-H1WZEWNSAivEj6Mo6r14Vdc5fzB8bxOFa2ZDYCcyfHGnOulJhWU2d2n8apj8fsAFbdKGX+/AvdPvpX8HzwI23Q==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    globals "^13.2.0"
+    nullthrows "^1.1.1"
+
+"@parcel/packager-raw@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-raw/-/packager-raw-2.0.0-canary.1778.tgz#81c38947b4e5421a98364b8751a1e1e338f91108"
+  integrity sha512-yjO18I01KsOjnq6VHQfUU76wisNZt/GIEJF2NWgbp4FUbIQECbcS3JZ14Ct0MBv7rreY5/ge6Ed6a4dIsiamhQ==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/packager-svg@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-svg/-/packager-svg-2.13.4-canary.3401.tgz#303d2ccdc76cb4b385f1b76af7f731b060a89521"
+  integrity sha512-QG7vuMPsWkZeixKgF+3SRYp8AcPQzV4mDQSicwfMq/aabL4fBDB5ZQ7FHb9DT3oj6ent2xjonQw9ubzwb+Hfcg==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    posthtml "^0.16.4"
+
+"@parcel/packager-wasm@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-wasm/-/packager-wasm-2.13.4-canary.3401.tgz#4e84b46c8f1b2350decaa2415990eff37c0685cb"
+  integrity sha512-zoDPZd0+vXt4IhUJlWEW1aQDiO8axOJBcj1qJxK3f+VwJcLzcRJZnpUnVCdwTQfVZK4BJxMdR+8EXPsrysCiLw==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/plugin@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.0.0-canary.1778.tgz#e9f202e2e6f044a220c456c3619f5e120ed7671a"
+  integrity sha512-SH7EhYTQF1JbqEtoD70yid9PsmPBSYymZg6oc2gyWexbAGWdlPD9xz8+E876JLnuhMPFf/ptdT4Apf4n4USvAQ==
+  dependencies:
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/profiler@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/profiler/-/profiler-2.13.4-canary.3401.tgz#2046d73dd39764f50d7ed15602ac6fb4f71b07ed"
+  integrity sha512-BmOfBEzZhJM1sWjkeSYMknCGRGarAcvK+2iCk/PvKUvmCjJq+UpiFnSpcQehH+nbqCaBr+0SvrmWI25300mrEg==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/events" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/types-internal" "2.13.4-canary.3401+b50bc79cb"
+    chrome-trace-event "^1.0.2"
+
+"@parcel/reporter-cli@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/reporter-cli/-/reporter-cli-2.0.0-canary.1778.tgz#193a0802fa0f4c448f876d9a013f672ad2a33f6b"
+  integrity sha512-dQUzK3f4kbHC1eTzqWWkwyj6y3yPel/uB3lYSN1fiIB0Cnwmnz/baIT8v0Nw8vqOSsjZRtzGRMi4GoizONEAOw==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/types" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    chalk "^4.1.2"
+    term-size "^2.2.1"
+
+"@parcel/reporter-dev-server@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/reporter-dev-server/-/reporter-dev-server-2.0.0-canary.1778.tgz#4083e9338deb6aaa0798a4add9d7e5b6fc58fc15"
+  integrity sha512-ADLk+GTWROXGGX/0JVCePxrgrE7NAcMILkugj9Djqn+Son64JfN6b9/SMObOeg2OHUovIGntfB4XHTPrgQ3CiQ==
+  dependencies:
+    "@parcel/codeframe" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/reporter-tracer@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/reporter-tracer/-/reporter-tracer-2.13.4-canary.3401.tgz#f7059dd07c442912b2684de76aa3ea908db9a72a"
+  integrity sha512-GdCof1Rd73iQU6BWqK0RxO5/eQK4yE4KLYiuXSP6jRiz8aYy+eySav+AABF8xofUb0mz1S2UZHL6wi4Y26Qxlg==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    chrome-trace-event "^1.0.3"
+    nullthrows "^1.1.1"
+
+"@parcel/resolver-default@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/resolver-default/-/resolver-default-2.0.0-canary.1778.tgz#89c12e0980120ca0d17b86f8fdc49316db417f44"
+  integrity sha512-35XCeit5VlZmAAMxzR/MbRH2ZQrI9Wpwxm9IrmvZ5ETDs8ilY+g3PAg5F0WFF/prxOVIJ+5IahHuc7f9UKdBFQ==
+  dependencies:
+    "@parcel/node-resolver-core" "3.4.4-canary.3401+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/runtime-browser-hmr@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.0.0-canary.1778.tgz#579f09b31ea01ea6608db7eecbb12ca60b294bc8"
+  integrity sha512-eYX9Els15PWRxKp5VdVpms2MXJGhHzblqPHTZP/KXlltSmAPMiwoco72BWnrSSBniHYOpBpUJZ2it9GYeQrHdw==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/runtime-js@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-js/-/runtime-js-2.0.0-canary.1778.tgz#efeef26e7ac4a7c68bc3e3d160db033d4d0023d2"
+  integrity sha512-ZY9EtkfX9TXZUAZuT9kjexNb1Jm8RPVsbI00GsqkCN/OTU1Yp60792rYU0wQjxHiohgFBUCQPOyFvEZgHzCGfw==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/runtime-rsc@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-rsc/-/runtime-rsc-2.13.4-canary.3401.tgz#9cf0681dd6442f841082518a5f83e5f1cc835351"
+  integrity sha512-xu9mozLwP6ilDLot67mmV55/0zoKpLMwsdWtcSuMGy+4O3+4107c79zXz9APrlMsui1CdIXkEcxmtGdWDRb6GQ==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/runtime-service-worker@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-service-worker/-/runtime-service-worker-2.13.4-canary.3401.tgz#ae77af90b6d934e6a9df7ef7bb02d1a3aabcd293"
+  integrity sha512-xKBe0Xsa7tq1azdAip0VqqmHuQqJJgLpPElbXIaGKysN8W9W+3PxZ4U9fpkKCeymgH6tBMBAn1Wg2K2yb7gnyg==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/rust@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/rust/-/rust-2.13.4-canary.3401.tgz#10af9abdc4ca84e1409c607d192d3cada0a2f4c6"
+  integrity sha512-O47VXGNEmZjf2BMHcnLrjlbiDDeKySnyLGUgq5ua8J79h/bTAtL/hRVxxmFuR1PVpNtmRaZG8zJclpFTJxTAMA==
+
+"@parcel/source-map@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@parcel/source-map/-/source-map-2.1.1.tgz#fb193b82dba6dd62cc7a76b326f57bb35000a782"
+  integrity sha512-Ejx1P/mj+kMjQb8/y5XxDUn4reGdr+WyKYloBljpppUy8gs42T+BNoEOuRYqDVdgPc6NxduzIDoJS9pOFfV5Ew==
+  dependencies:
+    detect-libc "^1.0.3"
+
+"@parcel/transformer-babel@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-babel/-/transformer-babel-2.0.0-canary.1778.tgz#9edf15338bf2e7b519e880556775eba410a4c176"
+  integrity sha512-Wab/AzFtoZPknEXXJx4srDzpHlN5X54PE7Lt2IyUlFlfjFByFzFDbqXfPFGQOtEo1kTKElMEIKmWZoNXlNs/sg==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    browserslist "^4.6.6"
+    json5 "^2.2.0"
+    nullthrows "^1.1.1"
+    semver "^7.5.2"
+
+"@parcel/transformer-css@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-css/-/transformer-css-2.0.0-canary.1778.tgz#054a952fd9584c63353ba04b9dbe890abcbf17a9"
+  integrity sha512-NnGkmM+M/2kCCFEhDvEikdTI9hmKX2qg/aj/JapDP/B8yyaGWP5xSZmv4EDb/mHYpxrsJ1YUeEzdMCEwm7RMNA==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    browserslist "^4.6.6"
+    lightningcss "^1.22.1"
+    nullthrows "^1.1.1"
+
+"@parcel/transformer-html@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-html/-/transformer-html-2.0.0-canary.1778.tgz#8a647d56fa2372026cbb7929370cb2d938f9da58"
+  integrity sha512-g+FuzT8jtGZFqZTyvZYz+IiBiPrU1an5fekCkYjEgUYHxc1PYJS+HK6XmbYbu8zNVq11NFpiqMuPbExwvHGi1Q==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    nullthrows "^1.1.1"
+    posthtml "^0.16.5"
+    posthtml-parser "^0.12.1"
+    posthtml-render "^3.0.0"
+    semver "^7.5.2"
+    srcset "4"
+
+"@parcel/transformer-image@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-image/-/transformer-image-2.13.4-canary.3401.tgz#b8d435574e3c17adb9cc91aa3425d3ed8424f794"
+  integrity sha512-Rz44jzq9jUIOx8lLSqk2wpHz9mfo1iH74LyXKtW/0Brb8FjUu5DfX9/492B08Sh83L/HZ3zs0j9lBcVbQsMYYQ==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@parcel/transformer-js@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-js/-/transformer-js-2.0.0-canary.1778.tgz#c8419bccbcb11eab3bfd289805986ad35346d537"
+  integrity sha512-tr7Jiy18TyiArxRnj3v1IaitnAP1TdMJylCwX875o458du72SAoYCanyn6xb9qT/D6TVQ87OINtKvAPJo20rvg==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+    "@swc/helpers" "^0.5.0"
+    browserslist "^4.6.6"
+    nullthrows "^1.1.1"
+    regenerator-runtime "^0.14.1"
+    semver "^7.5.2"
+
+"@parcel/transformer-json@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-json/-/transformer-json-2.0.0-canary.1778.tgz#8cc61b34f4323177bc13800f1ec3451f375f0fec"
+  integrity sha512-2rT/Z+A1usE1jibCm6lNz38uqzRchffX5pi6SQS+BsDZRa5JAHizjAE5AuesKLjdJVDxZ1HBdX+gl+u6Bh+scA==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    json5 "^2.2.0"
+
+"@parcel/transformer-node@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-node/-/transformer-node-2.13.4-canary.3401.tgz#3713ebbd981d5ac2de5be51b23db6e2b19d074c7"
+  integrity sha512-r4aGiTTju9+IG9a+Wz268alvTXkS+2BMc3Dgbh/yRzicNzhJUAbdkMLrTtq0ekV+BJm/Ds53dPHPJrb5S4vnkA==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/transformer-postcss@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-postcss/-/transformer-postcss-2.0.0-canary.1778.tgz#66637a23a1ea03a0484f26b68ef2fc1904a928d1"
+  integrity sha512-iaTDDQrnIYrh8iJn99cJsnL0rffwGB8mGYTyOoqUneGLcSg0P/3XT2k8mu+OT7Q8tJOIMw6GR/3nNjZSwo0zgA==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    clone "^2.1.1"
+    nullthrows "^1.1.1"
+    postcss-value-parser "^4.2.0"
+    semver "^7.5.2"
+
+"@parcel/transformer-posthtml@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-posthtml/-/transformer-posthtml-2.0.0-canary.1778.tgz#f6619822308daccc88bb942dd0f0ba47246212ec"
+  integrity sha512-wYPsbfREZasatPZjmZdY7jJYH6+3zbtSciTuxNmyGxExLodU/Rvae3SgeJzTpuXXcFigp/J3Srgeh+yRt4KI3A==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+    posthtml "^0.16.5"
+    posthtml-parser "^0.12.1"
+    posthtml-render "^3.0.0"
+    semver "^7.5.2"
+
+"@parcel/transformer-raw@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-raw/-/transformer-raw-2.0.0-canary.1778.tgz#e2eb5d32c365e1185c454790a578a8d7212fae70"
+  integrity sha512-FbHLsYd8EPDATD2xzX/FqViMOrgPhG+IGYkDXsCk1cPF+zmU4uNGE2q8MNl1zaxQxa927lN5SIkjm8Lw7Qqf7A==
+  dependencies:
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/transformer-react-refresh-wrap@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.0.0-canary.1778.tgz#92249148709770a741a08163d6bf75973ab2f7b0"
+  integrity sha512-SgdnIAsY2s2FUcBwj3A2ME3C3WcLtPnmpQZBHk8pBIzBXmx98DABkPgneMdtsmoPg5RpSRsLba1ThFz1GeaBsw==
+  dependencies:
+    "@parcel/error-overlay" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    react-refresh ">=0.9 <=0.16"
+
+"@parcel/transformer-svg@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-svg/-/transformer-svg-2.13.4-canary.3401.tgz#22d19f3666d8074a9f229647a89c41ced2150cfa"
+  integrity sha512-R+ki+rqxrzKg26fTZJjn36Sm08AdANs0k/lY0YXql+T2Z5VU7pGZk2iKhJGZ7zDfP10PcDopjuqDPhn7Zhl8vg==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/plugin" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    nullthrows "^1.1.1"
+    posthtml "^0.16.5"
+    posthtml-parser "^0.12.1"
+    posthtml-render "^3.0.0"
+    semver "^7.5.2"
+
+"@parcel/types-internal@2.13.4-canary.3401+b50bc79cb":
+  version "2.13.4-canary.3401"
+  resolved "https://registry.yarnpkg.com/@parcel/types-internal/-/types-internal-2.13.4-canary.3401.tgz#44c26df4f75647447e320e9fa5882df00b01fd18"
+  integrity sha512-hkEaw3Z1kWvamzRi3h0Ps6aUYqj8v00CaZrrjZhgpXW/UfaLJbjFJj9DghQsWJQTNGk5eWRb947Fjsqsc0C8ZQ==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/feature-flags" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    utility-types "^3.10.0"
+
+"@parcel/types@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.0.0-canary.1778.tgz#dba6015d85df3a69b925e5226809122828fa9792"
+  integrity sha512-nY3TjmAaq9/xXGElTy9JCm2sNleXSAHuvtjesYaM2cFofsv1q2MdIYTEIRHLmnRBjBxwuFg8LHLC7t1HaF5DuQ==
+  dependencies:
+    "@parcel/types-internal" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/workers" "2.0.0-canary.1778+b50bc79cb"
+
+"@parcel/utils@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.0.0-canary.1778.tgz#9576774350acc413ec8170acafb283ffcf517af4"
+  integrity sha512-YphS0Gf32ZXKEtEUNVjNKMOA3eZFGLAbREr+smhS0TuVCwEfql4Im0lUKf6jVm/H9jcbx5bEG/sevNI45nzC6Q==
+  dependencies:
+    "@parcel/codeframe" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/logger" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/markdown-ansi" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/rust" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/source-map" "^2.1.1"
+    chalk "^4.1.2"
+    nullthrows "^1.1.1"
+
+"@parcel/watcher-android-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1"
+  integrity sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==
+
+"@parcel/watcher-darwin-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz#3d26dce38de6590ef79c47ec2c55793c06ad4f67"
+  integrity sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
+
+"@parcel/watcher-darwin-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz#99f3af3869069ccf774e4ddfccf7e64fd2311ef8"
+  integrity sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==
+
+"@parcel/watcher-freebsd-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz#14d6857741a9f51dfe51d5b08b7c8afdbc73ad9b"
+  integrity sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==
+
+"@parcel/watcher-linux-arm-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz#43c3246d6892381db473bb4f663229ad20b609a1"
+  integrity sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==
+
+"@parcel/watcher-linux-arm-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz#663750f7090bb6278d2210de643eb8a3f780d08e"
+  integrity sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==
+
+"@parcel/watcher-linux-arm64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz#ba60e1f56977f7e47cd7e31ad65d15fdcbd07e30"
+  integrity sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==
+
+"@parcel/watcher-linux-arm64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz#f7fbcdff2f04c526f96eac01f97419a6a99855d2"
+  integrity sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==
+
+"@parcel/watcher-linux-x64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz#4d2ea0f633eb1917d83d483392ce6181b6a92e4e"
+  integrity sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==
+
+"@parcel/watcher-linux-x64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz#277b346b05db54f55657301dd77bdf99d63606ee"
+  integrity sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==
+
+"@parcel/watcher-win32-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz#7e9e02a26784d47503de1d10e8eab6cceb524243"
+  integrity sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==
+
+"@parcel/watcher-win32-ia32@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz#2d0f94fa59a873cdc584bf7f6b1dc628ddf976e6"
+  integrity sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==
+
+"@parcel/watcher-win32-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz#ae52693259664ba6f2228fa61d7ee44b64ea0947"
+  integrity sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
+
+"@parcel/watcher@^2.0.7":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.1.tgz#342507a9cfaaf172479a882309def1e991fb1200"
+  integrity sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==
+  dependencies:
+    detect-libc "^1.0.3"
+    is-glob "^4.0.3"
+    micromatch "^4.0.5"
+    node-addon-api "^7.0.0"
+  optionalDependencies:
+    "@parcel/watcher-android-arm64" "2.5.1"
+    "@parcel/watcher-darwin-arm64" "2.5.1"
+    "@parcel/watcher-darwin-x64" "2.5.1"
+    "@parcel/watcher-freebsd-x64" "2.5.1"
+    "@parcel/watcher-linux-arm-glibc" "2.5.1"
+    "@parcel/watcher-linux-arm-musl" "2.5.1"
+    "@parcel/watcher-linux-arm64-glibc" "2.5.1"
+    "@parcel/watcher-linux-arm64-musl" "2.5.1"
+    "@parcel/watcher-linux-x64-glibc" "2.5.1"
+    "@parcel/watcher-linux-x64-musl" "2.5.1"
+    "@parcel/watcher-win32-arm64" "2.5.1"
+    "@parcel/watcher-win32-ia32" "2.5.1"
+    "@parcel/watcher-win32-x64" "2.5.1"
+
+"@parcel/workers@2.0.0-canary.1778+b50bc79cb":
+  version "2.0.0-canary.1778"
+  resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-2.0.0-canary.1778.tgz#d305d65146b31028fd29390b6a1c2fcfdeeef122"
+  integrity sha512-AIu7JRGzyM8V+OsV/7qk/zcwFktMhvyhvEX0vzR6KtO77/pVZwmUS7N+TuCZu/Oe6QEz2VaODK7Y3eeR1PHTGw==
+  dependencies:
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/logger" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/profiler" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/types-internal" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    nullthrows "^1.1.1"
+
+"@swc/core-darwin-arm64@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.12.tgz#ed317cd6aac5a66f529c0cbd8385761e2eccecc6"
+  integrity sha512-pOANQegUTAriW7jq3SSMZGM5l89yLVMs48R0F2UG6UZsH04SiViCnDctOGlA/Sa++25C+rL9MGMYM1jDLylBbg==
+
+"@swc/core-darwin-x64@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.10.12.tgz#59e249f40852231232b80f6a4caea2a223e9682e"
+  integrity sha512-m4kbpIDDsN1FrwfNQMU+FTrss356xsXvatLbearwR+V0lqOkjLBP0VmRvQfHEg+uy13VPyrT9gj4HLoztlci7w==
+
+"@swc/core-linux-arm-gnueabihf@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.12.tgz#5c2066a6ad8b768adc473e300995f909ce96cbbd"
+  integrity sha512-OY9LcupgqEu8zVK+rJPes6LDJJwPDmwaShU96beTaxX2K6VrXbpwm5WbPS/8FfQTsmpnuA7dCcMPUKhNgmzTrQ==
+
+"@swc/core-linux-arm64-gnu@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.12.tgz#7a8e6212617365c41a7b6e015cd2749d222c1ebe"
+  integrity sha512-nJD587rO0N4y4VZszz3xzVr7JIiCzSMhEMWnPjuh+xmPxDBz0Qccpr8xCr1cSxpl1uY7ERkqAGlKr6CwoV5kVg==
+
+"@swc/core-linux-arm64-musl@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.12.tgz#c939d554ecb32df65b4a784fc586f30c8ae7be0a"
+  integrity sha512-oqhSmV+XauSf0C//MoQnVErNUB/5OzmSiUzuazyLsD5pwqKNN+leC3JtRQ/QVzaCpr65jv9bKexT9+I2Tt3xDw==
+
+"@swc/core-linux-x64-gnu@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.12.tgz#745bc25de364bbde3b6240ed84d063379dc52c6c"
+  integrity sha512-XldSIHyjD7m1Gh+/8rxV3Ok711ENLI420CU2EGEqSe3VSGZ7pHJvJn9ZFbYpWhsLxPqBYMFjp3Qw+J6OXCPXCA==
+
+"@swc/core-linux-x64-musl@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.12.tgz#188855ee612a482eb8c298b2237e0b36962182a7"
+  integrity sha512-wvPXzJxzPgTqhyp1UskOx1hRTtdWxlyFD1cGWOxgLsMik0V9xKRgqKnMPv16Nk7L9xl6quQ6DuUHj9ID7L3oVw==
+
+"@swc/core-win32-arm64-msvc@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.12.tgz#3f8271b8a42ef29b53574705a6cd0427345cc616"
+  integrity sha512-TUYzWuu1O7uyIcRfxdm6Wh1u+gNnrW5M1DUgDOGZLsyQzgc2Zjwfh2llLhuAIilvCVg5QiGbJlpibRYJ/8QGsg==
+
+"@swc/core-win32-ia32-msvc@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.12.tgz#b7f59376870039f6a7ecc5331b4287f0fa82b182"
+  integrity sha512-4Qrw+0Xt+Fe2rz4OJ/dEPMeUf/rtuFWWAj/e0vL7J5laUHirzxawLRE5DCJLQTarOiYR6mWnmadt9o3EKzV6Xg==
+
+"@swc/core-win32-x64-msvc@1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.12.tgz#e053b1efc2bf24b0da1a1fa6a5ea6e1bda36df76"
+  integrity sha512-YiloZXLW7rUxJpALwHXaGjVaAEn+ChoblG7/3esque+Y7QCyheoBUJp2DVM1EeVA43jBfZ8tvYF0liWd9Tpz1A==
+
+"@swc/core@^1.10.7":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.10.12.tgz#6d002050814888ec72a8d439ca7194a4631ce199"
+  integrity sha512-+iUL0PYpPm6N9AdV1wvafakvCqFegQus1aoEDxgFsv3/uNVNIyRaupf/v/Zkp5hbep2EzhtoJR0aiJIzDbXWHg==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    "@swc/types" "^0.1.17"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.10.12"
+    "@swc/core-darwin-x64" "1.10.12"
+    "@swc/core-linux-arm-gnueabihf" "1.10.12"
+    "@swc/core-linux-arm64-gnu" "1.10.12"
+    "@swc/core-linux-arm64-musl" "1.10.12"
+    "@swc/core-linux-x64-gnu" "1.10.12"
+    "@swc/core-linux-x64-musl" "1.10.12"
+    "@swc/core-win32-arm64-msvc" "1.10.12"
+    "@swc/core-win32-ia32-msvc" "1.10.12"
+    "@swc/core-win32-x64-msvc" "1.10.12"
+
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/helpers@^0.5.0":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
+"@swc/types@^0.1.17":
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.17.tgz#bd1d94e73497f27341bf141abdf4c85230d41e7c"
+  integrity sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+
+"@types/body-parser@*":
+  version "1.19.5"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.5.tgz#04ce9a3b677dc8bd681a17da1ab9835dc9d3ede4"
+  integrity sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/connect@*":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.38.tgz#5ba7f3bc4fbbdeaff8dded952e5ff2cc53f8d858"
+  integrity sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==
+  dependencies:
+    "@types/node" "*"
+
+"@types/express-serve-static-core@^5.0.0":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz#812d2871e5eea17fb0bd5214dda7a7b748c0e12a"
+  integrity sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
+
+"@types/express@*":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-5.0.0.tgz#13a7d1f75295e90d19ed6e74cab3678488eaa96c"
+  integrity sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^5.0.0"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/http-errors@*":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
+  integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
+
+"@types/mime@^1":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.5.tgz#1ef302e01cf7d2b5a0fa526790c9123bf1d06690"
+  integrity sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==
+
+"@types/node@*", "@types/node@^22.10.1":
+  version "22.10.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.2.tgz#a485426e6d1fdafc7b0d4c7b24e2c78182ddabb9"
+  integrity sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==
+  dependencies:
+    undici-types "~6.20.0"
+
+"@types/parcel-env@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/parcel-env/-/parcel-env-0.0.6.tgz#6432ed891bf178e39582b906b396c72c72179099"
+  integrity sha512-HlPNbKhUe+0xVqzeqttl/gFC27dUZCjrUSI6MlfGoudjCtNeVOwm2kmDalkfXVWXsj4NJ4oa0PO3SdtOdGaGDg==
+
+"@types/qs@*":
+  version "6.9.17"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.17.tgz#fc560f60946d0aeff2f914eb41679659d3310e1a"
+  integrity sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==
+
+"@types/range-parser@*":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
+  integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
+
+"@types/react-dom@^19":
+  version "19.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.2.tgz#ad21f9a1ee881817995fd3f7fd33659c87e7b1b7"
+  integrity sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==
+
+"@types/react@^19":
+  version "19.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.1.tgz#a000d5b78f473732a08cecbead0f3751e550b3df"
+  integrity sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==
+  dependencies:
+    csstype "^3.0.2"
+
+"@types/send@*":
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.4.tgz#6619cd24e7270793702e4e6a4b958a9010cfc57a"
+  integrity sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==
+  dependencies:
+    "@types/mime" "^1"
+    "@types/node" "*"
+
+"@types/serve-static@*":
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
+  integrity sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==
+  dependencies:
+    "@types/http-errors" "*"
+    "@types/node" "*"
+    "@types/send" "*"
+
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+ansi-html-community@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
+base-x@^3.0.8:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.10.tgz#62de58653f8762b5d6f8d9fe30fa75f7b2585a75"
+  integrity sha512-7d0s06rR9rYaIWHkpfLIFICM/tkSVdoPC9qYAQRpxn9DdKNWNsKC0uk++akckyLq16Tx2WIinnZ6WRriAt6njQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.6.6:
+  version "4.24.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
+  integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
+  dependencies:
+    caniuse-lite "^1.0.30001669"
+    electron-to-chromium "^1.5.41"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.1"
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.2.tgz#9dbd4daf9f5f753bec3e4c8fbb8a2ecc4de6c39b"
+  integrity sha512-0lk0PHFe/uz0vl527fG9CgdE9WdafjDbCXvBbs+LUv000TVt2Jjhqbs4Jwm8gz070w8xXyEAxrPOMullsxXeGg==
+  dependencies:
+    call-bind "^1.0.8"
+    get-intrinsic "^1.2.5"
+
+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==
+
+caniuse-lite@^1.0.30001669:
+  version "1.0.30001687"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz#d0ac634d043648498eedf7a3932836beba90ebae"
+  integrity sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==
+
+chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chrome-trace-event@^1.0.2, chrome-trace-event@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+commander@^12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
+  integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==
+
+concurrently@^7.3.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.6.0.tgz#531a6f5f30cf616f355a4afb8f8fcb2bba65a49a"
+  integrity sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==
+  dependencies:
+    chalk "^4.1.0"
+    date-fns "^2.29.1"
+    lodash "^4.17.21"
+    rxjs "^7.0.0"
+    shell-quote "^1.7.3"
+    spawn-command "^0.0.2-1"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4, content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
+
+cosmiconfig@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d"
+  integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+date-fns@^2.29.1:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+debug@2.6.9:
+  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"
+
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-libc@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
+
+detect-libc@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^4.2.0, domhandler@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+domutils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
+dotenv-expand@^11.0.6:
+  version "11.0.7"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-11.0.7.tgz#af695aea007d6fdc84c86cd8d0ad7beb40a0bd08"
+  integrity sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==
+  dependencies:
+    dotenv "^16.4.5"
+
+dotenv@^16.4.5:
+  version "16.4.7"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.7.tgz#0e20c5b82950140aa99be360a8a5f52335f53c26"
+  integrity sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==
+
+dunder-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.0.tgz#c2fce098b3c8f8899554905f4377b6d85dabaa80"
+  integrity sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+electron-to-chromium@^1.5.41:
+  version "1.5.73"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.73.tgz#f32956ce40947fa3c8606726a96cd8fb5bb5f720"
+  integrity sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==
+
+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==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
+entities@^4.2.0, entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+env-paths@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
+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"
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+escalade@^3.1.1, escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+express@^4.18.2:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.3"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.7.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.3.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.3"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.12"
+    proxy-addr "~2.0.7"
+    qs "6.13.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.19.0"
+    serve-static "1.16.2"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+get-caller-file@^2.0.5:
+  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-intrinsic@^1.2.4, get-intrinsic@^1.2.5:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.6.tgz#43dd3dd0e7b49b82b2dfcad10dc824bf7fc265d5"
+  integrity sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    dunder-proto "^1.0.0"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.0.0"
+
+get-port@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
+  integrity sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==
+
+globals@^13.2.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+gopd@^1.0.1, gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+htmlnano@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-2.1.1.tgz#9ba84e145cd8b7cd4c783d9ab8ff46a80e79b59b"
+  integrity sha512-kAERyg/LuNZYmdqgCdYvugyLWNFAm8MWXpQMz1pLpetmCbFwoMxvkSoaAMlFrOC4OKTWI4KlZGT/RsNxg4ghOw==
+  dependencies:
+    cosmiconfig "^9.0.0"
+    posthtml "^0.16.5"
+    timsort "^0.3.0"
+
+htmlparser2@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
+  integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.2"
+    domutils "^2.8.0"
+    entities "^3.0.1"
+
+htmlparser2@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.1.0.tgz#cdb498d8a75a51f739b61d3f718136c369bc8c23"
+  integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+import-fresh@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+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==
+
+ipaddr.js@1.9.1:
+  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-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+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-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-json@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-json/-/is-json-2.0.1.tgz#6be166d144828a131d686891b983df62c39491ff"
+  integrity sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+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-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json5@^2.2.0, json5@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+lightningcss-darwin-arm64@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.28.2.tgz#a906fd84cb43d753cb5db9c367f8f38482e8fb03"
+  integrity sha512-/8cPSqZiusHSS+WQz0W4NuaqFjquys1x+NsdN/XOHb+idGHJSoJ7SoQTVl3DZuAgtPZwFZgRfb/vd1oi8uX6+g==
+
+lightningcss-darwin-x64@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.28.2.tgz#6c43249d4ae821416d0d78403eae56111d0c6a94"
+  integrity sha512-R7sFrXlgKjvoEG8umpVt/yutjxOL0z8KWf0bfPT3cYMOW4470xu5qSHpFdIOpRWwl3FKNMUdbKtMUjYt0h2j4g==
+
+lightningcss-freebsd-x64@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.28.2.tgz#804bc6652c6721e94a92e7bbb5e65165376cf108"
+  integrity sha512-l2qrCT+x7crAY+lMIxtgvV10R8VurzHAoUZJaVFSlHrN8kRLTvEg9ObojIDIexqWJQvJcVVV3vfzsEynpiuvgA==
+
+lightningcss-linux-arm-gnueabihf@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.28.2.tgz#c32595127b565690d854c9ff641831e4ad739ee1"
+  integrity sha512-DKMzpICBEKnL53X14rF7hFDu8KKALUJtcKdFUCW5YOlGSiwRSgVoRjM97wUm/E0NMPkzrTi/rxfvt7ruNK8meg==
+
+lightningcss-linux-arm64-gnu@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.28.2.tgz#85646f08c5efbfd7c94f8e5ed6392d5cf95fa42c"
+  integrity sha512-nhfjYkfymWZSxdtTNMWyhFk2ImUm0X7NAgJWFwnsYPOfmtWQEapzG/DXZTfEfMjSzERNUNJoQjPAbdqgB+sjiw==
+
+lightningcss-linux-arm64-musl@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.28.2.tgz#4d9bc20cf6de28c4d0c586d81c577891555ad831"
+  integrity sha512-1SPG1ZTNnphWvAv8RVOymlZ8BDtAg69Hbo7n4QxARvkFVCJAt0cgjAw1Fox0WEhf4PwnyoOBaVH0Z5YNgzt4dA==
+
+lightningcss-linux-x64-gnu@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.28.2.tgz#74bd797d7157817c4e42ec45f1844a69636a9d82"
+  integrity sha512-ZhQy0FcO//INWUdo/iEdbefntTdpPVQ0XJwwtdbBuMQe+uxqZoytm9M+iqR9O5noWFaxK+nbS2iR/I80Q2Ofpg==
+
+lightningcss-linux-x64-musl@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.28.2.tgz#13ce6db4c491ebbb93099d6427746ab7bff3774f"
+  integrity sha512-alb/j1NMrgQmSFyzTbN1/pvMPM+gdDw7YBuQ5VSgcFDypN3Ah0BzC2dTZbzwzaMdUVDszX6zH5MzjfVN1oGuww==
+
+lightningcss-win32-arm64-msvc@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.28.2.tgz#eaae12c4a58a545a3adf40b22ba9625e5c0ebd29"
+  integrity sha512-WnwcjcBeAt0jGdjlgbT9ANf30pF0C/QMb1XnLnH272DQU8QXh+kmpi24R55wmWBwaTtNAETZ+m35ohyeMiNt+g==
+
+lightningcss-win32-x64-msvc@1.28.2:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.28.2.tgz#1f7c4474b2dc3dd1c12e22de32e4de23bdfa41e7"
+  integrity sha512-3piBifyT3avz22o6mDKywQC/OisH2yDK+caHWkiMsF82i3m5wDBadyCjlCQ5VNgzYkxrWZgiaxHDdd5uxsi0/A==
+
+lightningcss@^1.22.1:
+  version "1.28.2"
+  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.28.2.tgz#cc26fad9ad64a621bd39ac6248095891cf584cce"
+  integrity sha512-ePLRrbt3fgjXI5VFZOLbvkLD5ZRuxGKm+wJ3ujCqBtL3NanDHPo/5zicR5uEKAPiIjBYF99BM4K4okvMznjkVA==
+  dependencies:
+    detect-libc "^1.0.3"
+  optionalDependencies:
+    lightningcss-darwin-arm64 "1.28.2"
+    lightningcss-darwin-x64 "1.28.2"
+    lightningcss-freebsd-x64 "1.28.2"
+    lightningcss-linux-arm-gnueabihf "1.28.2"
+    lightningcss-linux-arm64-gnu "1.28.2"
+    lightningcss-linux-arm64-musl "1.28.2"
+    lightningcss-linux-x64-gnu "1.28.2"
+    lightningcss-linux-x64-musl "1.28.2"
+    lightningcss-win32-arm64-msvc "1.28.2"
+    lightningcss-win32-x64-msvc "1.28.2"
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+lmdb@2.8.5:
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.8.5.tgz#ce191110c755c0951caa062722e300c703973837"
+  integrity sha512-9bMdFfc80S+vSldBmG3HOuLVHnxRdNTlpzR6QDnzqCQtCzGUEAGTzBKYMeIM+I/sU4oZfgbcbS7X7F65/z/oxQ==
+  dependencies:
+    msgpackr "^1.9.5"
+    node-addon-api "^6.1.0"
+    node-gyp-build-optional-packages "5.1.1"
+    ordered-binary "^1.4.1"
+    weak-lru-cache "^1.2.2"
+  optionalDependencies:
+    "@lmdb/lmdb-darwin-arm64" "2.8.5"
+    "@lmdb/lmdb-darwin-x64" "2.8.5"
+    "@lmdb/lmdb-linux-arm" "2.8.5"
+    "@lmdb/lmdb-linux-arm64" "2.8.5"
+    "@lmdb/lmdb-linux-x64" "2.8.5"
+    "@lmdb/lmdb-win32-x64" "2.8.5"
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+math-intrinsics@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.0.0.tgz#4e04bf87c85aa51e90d078dac2252b4eb5260817"
+  integrity sha512-4MqMiKP90ybymYvsut0CH2g4XWbfLtmlCkXmtmdcDCxNB+mQcu1w/1+L/VD7vi/PSv7X2JYV7SCcR+jiPXnQtA==
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
+
+micromatch@^4.0.5:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.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==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+msgpackr-extract@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz#e9d87023de39ce714872f9e9504e3c1996d61012"
+  integrity sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==
+  dependencies:
+    node-gyp-build-optional-packages "5.2.2"
+  optionalDependencies:
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-darwin-x64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-arm" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-arm64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.3"
+
+msgpackr@^1.9.5, msgpackr@^1.9.9:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.11.2.tgz#4463b7f7d68f2e24865c395664973562ad24473d"
+  integrity sha512-F9UngXRlPyWCDEASDpTf6c9uNhGPTqnTeLVt7bN+bU1eajoR/8V9ys2BRaV5C/e5ihE6sJ9uPIKaYt6bFuO32g==
+  optionalDependencies:
+    msgpackr-extract "^3.0.2"
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+node-addon-api@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
+  integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
+
+node-addon-api@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
+  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
+
+node-gyp-build-optional-packages@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz#52b143b9dd77b7669073cbfe39e3f4118bfc603c"
+  integrity sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==
+  dependencies:
+    detect-libc "^2.0.1"
+
+node-gyp-build-optional-packages@5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz#522f50c2d53134d7f3a76cd7255de4ab6c96a3a4"
+  integrity sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==
+  dependencies:
+    detect-libc "^2.0.1"
+
+node-releases@^2.0.18:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
+nullthrows@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
+  integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
+
+object-inspect@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
+  integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+ordered-binary@^1.4.1:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.5.3.tgz#8bee2aa7a82c3439caeb1e80c272fd4cf51170fb"
+  integrity sha512-oGFr3T+pYdTGJ+YFEILMpS3es+GiIbs9h/XQrclBXUtd44ey7XwfsMzM31f64I1SQOawDoDr/D823kNCADI8TA==
+
+parcel@canary:
+  version "2.0.0-canary.1776"
+  resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.0.0-canary.1776.tgz#c34446e8c5456211071df73e31954eaedf23b334"
+  integrity sha512-vGsAXeGT1+Ks1xRW0dHMBsg0LvmXNr1YN5GC7FSanCugymDT8qldQ5G7vHohNJbZuVmAA173Q00yrdFBsVZpmQ==
+  dependencies:
+    "@parcel/config-default" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/core" "2.0.0-canary.1776+b50bc79cb"
+    "@parcel/diagnostic" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/events" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/feature-flags" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/fs" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/logger" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/package-manager" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/reporter-cli" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/reporter-dev-server" "2.0.0-canary.1778+b50bc79cb"
+    "@parcel/reporter-tracer" "2.13.4-canary.3401+b50bc79cb"
+    "@parcel/utils" "2.0.0-canary.1778+b50bc79cb"
+    chalk "^4.1.2"
+    commander "^12.1.0"
+    get-port "^4.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"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+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==
+
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
+
+picocolors@^1.0.0, picocolors@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+posthtml-parser@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.11.0.tgz#25d1c7bf811ea83559bc4c21c189a29747a24b7a"
+  integrity sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==
+  dependencies:
+    htmlparser2 "^7.1.1"
+
+posthtml-parser@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.12.1.tgz#f29cc2eec3e6dd0bb99ac169f49963515adbff21"
+  integrity sha512-rYFmsDLfYm+4Ts2Oh4DCDSZPtdC1BLnRXAobypVzX9alj28KGl65dIFtgDY9zB57D0TC4Qxqrawuq/2et1P0GA==
+  dependencies:
+    htmlparser2 "^9.0.0"
+
+posthtml-render@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-3.0.0.tgz#97be44931496f495b4f07b99e903cc70ad6a3205"
+  integrity sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==
+  dependencies:
+    is-json "^2.0.1"
+
+posthtml@^0.16.4, posthtml@^0.16.5:
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.16.6.tgz#e2fc407f67a64d2fa3567afe770409ffdadafe59"
+  integrity sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==
+  dependencies:
+    posthtml-parser "^0.11.0"
+    posthtml-render "^3.0.0"
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+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.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+"react-dom@^18 || ^19":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  dependencies:
+    scheduler "^0.25.0"
+
+react-dom@experimental:
+  version "0.0.0-experimental-79ddf5b5-20241210"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-79ddf5b5-20241210.tgz#c140f191e7a88be5d4c38d34f7cf1dbf38a9a71d"
+  integrity sha512-bAB3yL0kntJWIC01+WprH/XAp7KATXSZ0kc6lUN9A1jMMDYTDOBmN0ghCMnDe/5lalJJouqGAmRd5bkji9HqwQ==
+  dependencies:
+    scheduler "0.0.0-experimental-79ddf5b5-20241210"
+
+"react-refresh@>=0.9 <=0.16":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.16.0.tgz#e7d45625f05c9709466d09348a25d22f79b2ad23"
+  integrity sha512-FPvF2XxTSikpJxcr+bHut2H4gJ17+18Uy20D5/F+SKzFap62R3cM5wH6b8WN3LyGSYeQilLEcJcR1fjBSI2S1A==
+
+react-server-dom-parcel@experimental:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/react-server-dom-parcel/-/react-server-dom-parcel-0.0.1.tgz#2653c2b39a857fbd17770d27d6f08bd139803f09"
+  integrity sha512-f93wv8gycm4ltcQRqpSlgYyT6cJxmjJdRmXw3deQoXowDlP44W4RRzwHQ70u1xseCpHFIORmuHVXk7+Fk8RFtQ==
+
+"react@^18 || ^19":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+
+react@experimental:
+  version "0.0.0-experimental-79ddf5b5-20241210"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-79ddf5b5-20241210.tgz#d1c620a36dfa02337f69c4eaeee230fec6742b72"
+  integrity sha512-+e7TiHmfdCEzR942m4ukOBf/4jd41Mc8M/ExOGYT7LtbrXCX/HCw9RqffaYZXdMd3+QD/nBzx9f/DTDLzP8FLA==
+
+regenerator-runtime@^0.14.0, regenerator-runtime@^0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+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==
+
+rsc-html-stream@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/rsc-html-stream/-/rsc-html-stream-0.0.4.tgz#0ae70518eeac305852533b9ad60aefacce72ed95"
+  integrity sha512-1isiXIrlTI/vRLTvS3O4fMrO9qIHje1FSphufrIV5QfzHUgBDCZFwP9b8+rH63nbhxtcKTqfyziwM+2khfX0Uw==
+
+rxjs@^7.0.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+safe-buffer@5.2.1, safe-buffer@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+scheduler@0.0.0-experimental-79ddf5b5-20241210:
+  version "0.0.0-experimental-79ddf5b5-20241210"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-79ddf5b5-20241210.tgz#2b6c17201831aa8f8e35e65ad95c7cf5362b5454"
+  integrity sha512-Rg1aDzPQWVLENsVBlZbIS1buG55XTCEN7tOz0qk+pCnhswwa7h0VzGFVmX8CLuWnTYQYWw9ldFrjKLDM1Q1k3g==
+
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
+semver@^7.5.2:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serve-static@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.0"
+
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shell-quote@^1.7.3:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
+  integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+spawn-command@^0.0.2-1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
+
+srcset@4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/srcset/-/srcset-4.0.0.tgz#336816b665b14cd013ba545b6fe62357f86e65f4"
+  integrity sha512-wvLeHgcVHKO8Sc/H/5lkGreJQVeYMm9rlmt8PuR1xE31rIuXhuzznUUqAt8MqLhB3MqJdFzlNAfpcWnxiFUcPw==
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+term-size@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+  integrity sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tslib@^2.1.0, tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+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"
+
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
+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 sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
+
+utility-types@^3.10.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.11.0.tgz#607c40edb4f258915e901ea7995607fdf319424c"
+  integrity sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+weak-lru-cache@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz#fdbb6741f36bae9540d12f480ce8254060dccd19"
+  integrity sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
diff --git a/fixtures/flight/.gitignore b/fixtures/flight/.gitignore
new file mode 100644
index 00000000000..79042a7f009
--- /dev/null
+++ b/fixtures/flight/.gitignore
@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/playwright-report
+/test-results
+
+# production
+/build
+.eslintcache
+
+# 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/.nvmrc b/fixtures/flight/.nvmrc
new file mode 100644
index 00000000000..5f53e875de6
--- /dev/null
+++ b/fixtures/flight/.nvmrc
@@ -0,0 +1 @@
+v20.19.0
diff --git a/fixtures/flight/__tests__/__e2e__/smoke.test.js b/fixtures/flight/__tests__/__e2e__/smoke.test.js
new file mode 100644
index 00000000000..f2bcbbd111c
--- /dev/null
+++ b/fixtures/flight/__tests__/__e2e__/smoke.test.js
@@ -0,0 +1,29 @@
+import {test, expect} from '@playwright/test';
+
+test('smoke test', async ({page}) => {
+  const consoleErrors = [];
+  page.on('console', msg => {
+    const type = msg.type();
+    if (type === 'warn' || type === 'error') {
+      consoleErrors.push({type: type, text: msg.text()});
+    }
+  });
+  const pageErrors = [];
+  page.on('pageerror', error => {
+    pageErrors.push(error.stack);
+  });
+  await page.goto('/');
+  await expect(page.getByTestId('promise-as-a-child-test')).toHaveText(
+    'Promise as a child hydrates without errors: deferred text'
+  );
+  await expect(page.getByTestId('prerendered')).not.toBeAttached();
+
+  await expect(consoleErrors).toEqual([]);
+  await expect(pageErrors).toEqual([]);
+
+  await page.goto('/prerender');
+  await expect(page.getByTestId('prerendered')).toBeAttached();
+
+  await expect(consoleErrors).toEqual([]);
+  await expect(pageErrors).toEqual([]);
+});
diff --git a/fixtures/flight/config/env.js b/fixtures/flight/config/env.js
new file mode 100644
index 00000000000..ce1d7b78f38
--- /dev/null
+++ b/fixtures/flight/config/env.js
@@ -0,0 +1,104 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+        // We support configuring the sockjs pathname during development.
+        // These settings let a developer run multiple simultaneous projects.
+        // They are used as the connection `hostname`, `pathname` and `port`
+        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+        // and `sockPort` options in webpack-dev-server.
+        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+        // Whether or not react-refresh is enabled.
+        // It is defined here so it is available in the webpackHotDevClient.
+        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+      }
+    );
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return {raw, stringified};
+}
+
+module.exports = getClientEnvironment;
diff --git a/fixtures/flight/config/modules.js b/fixtures/flight/config/modules.js
new file mode 100644
index 00000000000..91f8abd0cbd
--- /dev/null
+++ b/fixtures/flight/config/modules.js
@@ -0,0 +1,136 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('chalk');
+const resolve = require('resolve');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return '';
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+  // the default behavior.
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Allow the user set the `baseUrl` to `appSrc`.
+  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+    return [paths.appSrc];
+  }
+
+  // If the path is equal to the root directory we ignore it here.
+  // We don't want to allow importing from the root directly as source files are
+  // not transpiled outside of `src`. We do allow importing them with the
+  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+  // an alias.
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Otherwise, throw an error.
+  throw new Error(
+    chalk.red.bold(
+      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+        ' Create React App does not support other values at this time.'
+    )
+  );
+}
+
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      src: paths.appSrc,
+    };
+  }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      '^src/(.*)$': '<rootDir>/src/$1',
+    };
+  }
+}
+
+function getModules() {
+  // Check if TypeScript is setup
+  const hasTsConfig = fs.existsSync(paths.appTsConfig);
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  if (hasTsConfig && hasJsConfig) {
+    throw new Error(
+      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+    );
+  }
+
+  let config;
+
+  // If there's a tsconfig.json we assume it's a
+  // TypeScript project and set up the config
+  // based on tsconfig.json
+  if (hasTsConfig) {
+    const ts = require(
+      resolve.sync('typescript', {
+        basedir: paths.appNodeModules,
+      })
+    );
+    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+    // Otherwise we'll check if there is jsconfig.json
+    // for non TS projects.
+  } else if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const additionalModulePaths = getAdditionalModulePaths(options);
+
+  return {
+    additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options),
+    jestAliases: getJestAliases(options),
+    hasTsConfig,
+  };
+}
+
+module.exports = getModules();
diff --git a/fixtures/flight/config/package.json b/fixtures/flight/config/package.json
new file mode 100644
index 00000000000..5bbefffbabe
--- /dev/null
+++ b/fixtures/flight/config/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight/config/paths.js b/fixtures/flight/config/paths.js
new file mode 100644
index 00000000000..85eda99c87e
--- /dev/null
+++ b/fixtures/flight/config/paths.js
@@ -0,0 +1,73 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+  process.env.NODE_ENV === 'development',
+  require(resolveApp('package.json')).homepage,
+  process.env.PUBLIC_URL
+);
+
+const buildPath = process.env.BUILD_PATH || 'build';
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find(extension =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`))
+  );
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp(buildPath),
+  appPublic: resolveApp('public'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  appNodeModules: resolveApp('node_modules'),
+  appWebpackCache: resolveApp('node_modules/.cache'),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
+  swSrc: resolveModule(resolveApp, 'src/service-worker'),
+  publicUrlOrPath,
+};
+
+module.exports.moduleFileExtensions = moduleFileExtensions;
diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
new file mode 100644
index 00000000000..2aeede652b5
--- /dev/null
+++ b/fixtures/flight/config/webpack.config.js
@@ -0,0 +1,715 @@
+'use strict';
+
+// Fork Start
+const ReactFlightWebpackPlugin = require('react-server-dom-webpack/plugin');
+// Fork End
+
+const fs = require('fs');
+const {createHash} = require('crypto');
+const path = require('path');
+const {pathToFileURL} = require('url');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin =
+  process.env.TSC_COMPILE_ON_ERROR === 'true'
+    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
+    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
+
+function createEnvironmentHash(env) {
+  const hash = createHash('md5');
+  hash.update(JSON.stringify(env));
+
+  return hash.digest('hex');
+}
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
+  '@pmmmwh/react-refresh-webpack-plugin'
+);
+const babelRuntimeEntry = require.resolve('babel-preset-react-app');
+const babelRuntimeEntryHelpers = require.resolve(
+  '@babel/runtime/helpers/esm/assertThisInitialized',
+  {paths: [babelRuntimeEntry]}
+);
+const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
+  paths: [babelRuntimeEntry],
+});
+
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// Check if Tailwind config exists
+const useTailwind = fs.existsSync(
+  path.join(paths.appPath, 'tailwind.config.js')
+);
+
+// Get the path to the uncompiled service worker (if it exists).
+const swSrc = paths.swSrc;
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function (webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
+
+  // We will provide `paths.publicUrlOrPath` to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+  const shouldUseReactRefresh = env.raw.FAST_REFRESH;
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      {
+        loader: MiniCssExtractPlugin.loader,
+        // css is located in `static/css`, use '../../' to locate index.html folder
+        // in production `paths.publicUrlOrPath` can be a relative path
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? {publicPath: '../../'}
+          : {},
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          postcssOptions: {
+            // Necessary for external CSS imports to work
+            // https://github.com/facebook/create-react-app/issues/2677
+            ident: 'postcss',
+            config: false,
+            plugins: !useTailwind
+              ? [
+                  'postcss-flexbugs-fixes',
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: {
+                        flexbox: 'no-2009',
+                      },
+                      stage: 3,
+                    },
+                  ],
+                  // Adds PostCSS Normalize as the reset css with default options,
+                  // so that it honors browserslist config in package.json
+                  // which in turn let's users customize the target behavior as per their needs.
+                  'postcss-normalize',
+                ]
+              : [
+                  'tailwindcss',
+                  'postcss-flexbugs-fixes',
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: {
+                        flexbox: 'no-2009',
+                      },
+                      stage: 3,
+                    },
+                  ],
+                ],
+          },
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push(
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+            root: paths.appSrc,
+          },
+        },
+        {
+          loader: require.resolve(preProcessor),
+          options: {
+            sourceMap: true,
+          },
+        }
+      );
+    }
+    return loaders;
+  };
+
+  return {
+    target: ['browserslist'],
+    // Webpack noise constrained to errors and warnings
+    stats: 'errors-warnings',
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'source-map',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: isEnvProduction
+      ? [paths.appIndexJs]
+      : [
+          paths.appIndexJs,
+          // HMR client
+          'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
+        ],
+    output: {
+      // The build folder.
+      path: paths.appBuild,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      assetModuleFilename: 'static/media/[name].[hash][ext]',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      publicPath: paths.publicUrlOrPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? info =>
+            path
+              .relative(paths.appSrc, info.absoluteResourcePath)
+              .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => pathToFileURL(path.resolve(info.absoluteResourcePath))),
+    },
+    cache: {
+      type: 'filesystem',
+      version: createEnvironmentHash(env.raw),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+          fs.existsSync(f)
+        ),
+      },
+    },
+    infrastructureLogging: {
+      level: 'none',
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+        // This is only used in production mode
+        new CssMinimizerPlugin(),
+      ],
+    },
+    resolve: {
+      // This allows you to set a fallback for where webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ['node_modules', paths.appNodeModules].concat(
+        modules.additionalModulePaths || []
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
+      },
+      plugins: [
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [
+          paths.appPackageJson,
+          reactRefreshRuntimeEntry,
+          reactRefreshWebpackPluginRuntimeEntry,
+          babelRuntimeEntry,
+          babelRuntimeEntryHelpers,
+          babelRuntimeRegenerator,
+        ]),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Handle node_modules packages that contain sourcemaps
+        shouldUseSourceMap && {
+          enforce: 'pre',
+          exclude: /@babel(?:\/|\\{1,2})runtime/,
+          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+          loader: require.resolve('source-map-loader'),
+        },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // TODO: Merge this config once `image/avif` is in the mime-db
+            // https://github.com/jshttp/mime-db
+            {
+              test: [/\.avif$/],
+              type: 'asset',
+              mimetype: 'image/avif',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+            },
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                {
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    prettier: false,
+                    svgo: false,
+                    svgoConfig: {
+                      plugins: [{removeViewBox: false}],
+                    },
+                    titleProp: true,
+                    ref: true,
+                  },
+                },
+                {
+                  loader: require.resolve('file-loader'),
+                  options: {
+                    name: 'static/media/[name].[hash].[ext]',
+                  },
+                },
+              ],
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              loader: require.resolve('babel-loader'),
+              options: {
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app'),
+                    {
+                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
+                    },
+                  ],
+                ],
+
+                plugins: [
+                  isEnvDevelopment &&
+                    shouldUseReactRefresh &&
+                    require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+                compact: isEnvProduction,
+              },
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    {helpers: true},
+                  ],
+                ],
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+
+                // Babel sourcemaps are needed for debugging into node_modules
+                // code.  Without the options below, debuggers like VSCode
+                // show incorrect code and set breakpoints on the wrong lines.
+                sourceMaps: shouldUseSourceMap,
+                inputSourceMap: shouldUseSourceMap,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                modules: {
+                  mode: 'icss',
+                },
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                modules: {
+                  mode: 'local',
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    mode: 'icss',
+                  },
+                },
+                'sass-loader'
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    mode: 'local',
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                'sass-loader'
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              type: 'asset/resource',
+            },
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ].filter(Boolean),
+    },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // Experimental hot reloading for React .
+      // https://github.com/facebook/react/tree/main/packages/react-refresh
+      isEnvDevelopment &&
+        shouldUseReactRefresh &&
+        new ReactRefreshWebpackPlugin({
+          overlay: false,
+        }),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: 'static/css/[name].[contenthash:8].css',
+        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      }),
+      // Generate a manifest containing the required script / css for each entry.
+      new WebpackManifestPlugin({
+        fileName: 'entrypoint-manifest.json',
+        publicPath: paths.publicUrlOrPath,
+        generate: (seed, files, entrypoints) => {
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
+
+          const processedEntrypoints = {};
+          for (let key in entrypoints) {
+            processedEntrypoints[key] = {
+              js: entrypoints[key].filter(
+                filename =>
+                  // Include JS assets but ignore hot updates because they're not
+                  // safe to include as async script tags.
+                  filename.endsWith('.js') &&
+                  !filename.endsWith('.hot-update.js')
+              ),
+              css: entrypoints[key].filter(filename =>
+                filename.endsWith('.css')
+              ),
+            };
+          }
+
+          return processedEntrypoints;
+        },
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          async: isEnvDevelopment,
+          typescript: {
+            typescriptPath: resolve.sync('typescript', {
+              basedir: paths.appNodeModules,
+            }),
+            configOverwrite: {
+              compilerOptions: {
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                skipLibCheck: true,
+                inlineSourceMap: false,
+                declarationMap: false,
+                noEmit: true,
+                incremental: true,
+                tsBuildInfoFile: paths.appTsBuildInfoFile,
+              },
+            },
+            context: paths.appPath,
+            diagnosticOptions: {
+              syntactic: true,
+            },
+            mode: 'write-references',
+            // profile: true,
+          },
+          issue: {
+            // This one is specifically to match during CI tests,
+            // as micromatch doesn't match
+            // '../cra-template-typescript/template/src/App.tsx'
+            // otherwise.
+            include: [
+              {file: '../**/src/**/*.{ts,tsx}'},
+              {file: '**/src/**/*.{ts,tsx}'},
+            ],
+            exclude: [
+              {file: '**/src/**/__tests__/**'},
+              {file: '**/src/**/?(*.){spec|test}.*'},
+              {file: '**/src/setupProxy.*'},
+              {file: '**/src/setupTests.*'},
+            ],
+          },
+          logger: {
+            infrastructure: 'silent',
+          },
+        }),
+      // Fork Start
+      new DevToolsIgnorePlugin({
+        shouldIgnorePath: function (path) {
+          return (
+            path.includes('/node_modules/') ||
+            path.includes('/webpack/') ||
+            path.endsWith('/src/index.js')
+          );
+        },
+      }),
+      new ReactFlightWebpackPlugin({
+        isServer: false,
+        clientReferences: {
+          directory: './src',
+          recursive: true,
+          include: /\.(js|ts|jsx|tsx)$/,
+        },
+      }),
+      // Fork End
+    ].filter(Boolean),
+    experiments: {
+      topLevelAwait: true,
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};
diff --git a/fixtures/flight/loader/global.js b/fixtures/flight/loader/global.js
new file mode 100644
index 00000000000..4cb9ec63d05
--- /dev/null
+++ b/fixtures/flight/loader/global.js
@@ -0,0 +1,51 @@
+import babel from '@babel/core';
+
+const babelOptions = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+};
+
+export async function load(url, context, defaultLoad) {
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions);
+    const newResult = await babel.transformAsync(result.source, opt);
+    if (!newResult) {
+      if (typeof result.source === 'string') {
+        return result;
+      }
+      return {
+        source: Buffer.from(result.source).toString('utf8'),
+        format: 'module',
+      };
+    }
+    return {source: newResult.code, format: 'module'};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+async function babelTransformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module') {
+    const opt = Object.assign({filename: context.url}, babelOptions);
+    const newResult = await babel.transformAsync(source, opt);
+    if (!newResult) {
+      if (typeof source === 'string') {
+        return {source};
+      }
+      return {
+        source: Buffer.from(source).toString('utf8'),
+      };
+    }
+    return {source: newResult.code};
+  }
+  return defaultTransformSource(source, context, defaultTransformSource);
+}
+
+export const transformSource =
+  process.version < 'v16' ? babelTransformSource : undefined;
diff --git a/fixtures/flight/loader/package.json b/fixtures/flight/loader/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/fixtures/flight/loader/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/fixtures/flight/loader/region.js b/fixtures/flight/loader/region.js
new file mode 100644
index 00000000000..864d429394d
--- /dev/null
+++ b/fixtures/flight/loader/region.js
@@ -0,0 +1,74 @@
+import {
+  resolve,
+  load as reactLoad,
+  getSource as getSourceImpl,
+  transformSource as reactTransformSource,
+} from 'react-server-dom-unbundled/node-loader';
+
+export {resolve};
+
+import babel from '@babel/core';
+
+const babelOptions = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+  sourceMaps: process.env.NODE_ENV === 'development' ? 'inline' : false,
+};
+
+async function babelLoad(url, context, defaultLoad) {
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions);
+    const newResult = await babel.transformAsync(result.source, opt);
+    if (!newResult) {
+      if (typeof result.source === 'string') {
+        return result;
+      }
+      return {
+        source: Buffer.from(result.source).toString('utf8'),
+        format: 'module',
+      };
+    }
+    return {source: newResult.code, format: 'module'};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+export async function load(url, context, defaultLoad) {
+  return await reactLoad(url, context, (u, c) => {
+    return babelLoad(u, c, defaultLoad);
+  });
+}
+
+async function babelTransformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module') {
+    const opt = Object.assign({filename: context.url}, babelOptions);
+    const newResult = await babel.transformAsync(source, opt);
+    if (!newResult) {
+      if (typeof source === 'string') {
+        return {source};
+      }
+      return {
+        source: Buffer.from(source).toString('utf8'),
+      };
+    }
+    return {source: newResult.code};
+  }
+  return defaultTransformSource(source, context, defaultTransformSource);
+}
+
+async function transformSourceImpl(source, context, defaultTransformSource) {
+  return await reactTransformSource(source, context, (s, c) => {
+    return babelTransformSource(s, c, defaultTransformSource);
+  });
+}
+
+export const transformSource =
+  process.version < 'v16' ? transformSourceImpl : undefined;
+export const getSource = process.version < 'v16' ? getSourceImpl : undefined;
diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
new file mode 100644
index 00000000000..6018ffb0e4f
--- /dev/null
+++ b/fixtures/flight/package.json
@@ -0,0 +1,152 @@
+{
+  "name": "flight",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "devEngines": {
+    "node": "20.x || 22.x"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.22.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "@svgr/webpack": "^5.5.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "body-parser": "^1.20.1",
+    "browserslist": "^4.18.1",
+    "busboy": "^1.6.0",
+    "camelcase": "^6.2.1",
+    "canvas": "^3.1.0",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "compression": "^1.7.4",
+    "concurrently": "^7.3.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "devtools-ignore-webpack-plugin": "^0.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "nodemon": "^2.0.19",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prompts": "^2.4.2",
+    "react": "experimental",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "experimental",
+    "react-refresh": "^0.11.0",
+    "react-server-dom-webpack": "experimental",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "undici": "^5.20.0",
+    "webpack": "^5.64.4",
+    "webpack-dev-middleware": "^5.3.4",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-manifest-plugin": "^4.0.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.51.1"
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "dev": "concurrently \"yarn run dev:region\" \"yarn run dev:global\"",
+    "dev:global": "NODE_ENV=development BUILD_PATH=dist node --experimental-loader ./loader/global.js --inspect=127.0.0.1:9230 server/global",
+    "dev:region": "NODE_ENV=development BUILD_PATH=dist nodemon --watch src --watch dist -- --enable-source-maps --experimental-loader ./loader/region.js --conditions=react-server --inspect=127.0.0.1:9229 server/region",
+    "start": "node scripts/build.js && concurrently \"yarn run start:region\" \"yarn run start:global\"",
+    "start:global": "NODE_ENV=production node --experimental-loader ./loader/global.js server/global",
+    "start:region": "NODE_ENV=production node --experimental-loader ./loader/region.js --conditions=react-server server/region",
+    "build": "node scripts/build.js",
+    "test": "playwright test"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  }
+}
diff --git a/fixtures/flight/playwright.config.js b/fixtures/flight/playwright.config.js
new file mode 100644
index 00000000000..40d86c37c94
--- /dev/null
+++ b/fixtures/flight/playwright.config.js
@@ -0,0 +1,31 @@
+import {defineConfig, devices} from '@playwright/test';
+
+const isCI = Boolean(process.env.CI);
+
+export default defineConfig({
+  // relative to this configuration file.
+  testDir: '__tests__/__e2e__',
+  fullyParallel: true,
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !isCI,
+  retries: isCI ? 2 : 0,
+  // Opt out of parallel tests on CI.
+  workers: isCI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {...devices['Desktop Chrome']},
+    },
+  ],
+  webServer: {
+    command: 'yarn dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !isCI,
+  },
+});
diff --git a/fixtures/flight/public/favicon.ico b/fixtures/flight/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/fixtures/flight/public/favicon.ico differ
diff --git a/fixtures/flight/scripts/build.js b/fixtures/flight/scripts/build.js
new file mode 100644
index 00000000000..29995f5504b
--- /dev/null
+++ b/fixtures/flight/scripts/build.js
@@ -0,0 +1,208 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const path = require('path');
+const chalk = require('chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appIndexJs])) {
+  process.exit(1);
+}
+
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
+// Generate configuration
+const config = configFactory('production');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const {checkBrowsers} = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({stats, previousFileSizes, warnings}) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrlOrPath;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
+        messages = formatWebpackMessages({
+          errors: [errMessage],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({all: false, warnings: true, errors: true})
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        // Ignore sourcemap warnings in CI builds. See #8227 for more info.
+        const filteredWarnings = messages.warnings.filter(
+          w => !/Failed to parse source map/.test(w)
+        );
+        if (filteredWarnings.length) {
+          console.log(
+            chalk.yellow(
+              '\nTreating warnings as errors because process.env.CI = true.\n' +
+                'Most CI servers set it automatically.\n'
+            )
+          );
+          return reject(new Error(filteredWarnings.join('\n\n')));
+        }
+      }
+
+      const resolveArgs = {
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      };
+
+      return resolve(resolveArgs);
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync('public', 'build', {
+    dereference: true,
+  });
+}
diff --git a/fixtures/flight/scripts/package.json b/fixtures/flight/scripts/package.json
new file mode 100644
index 00000000000..5bbefffbabe
--- /dev/null
+++ b/fixtures/flight/scripts/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight/scripts/test.js b/fixtures/flight/scripts/test.js
new file mode 100644
index 00000000000..bad5a20e3d0
--- /dev/null
+++ b/fixtures/flight/scripts/test.js
@@ -0,0 +1,51 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', {stdio: 'ignore'});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', {stdio: 'ignore'});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+jest.run(argv);
diff --git a/fixtures/flight/server/global.js b/fixtures/flight/server/global.js
new file mode 100644
index 00000000000..0883faf627c
--- /dev/null
+++ b/fixtures/flight/server/global.js
@@ -0,0 +1,297 @@
+'use strict';
+
+// This is a server to host CDN distributed resources like Webpack bundles and SSR
+
+const path = require('path');
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = process.env.NODE_ENV;
+
+const babelRegister = require('@babel/register');
+babelRegister({
+  babelrc: false,
+  ignore: [
+    /\/(build|node_modules)\//,
+    function (file) {
+      if ((path.dirname(file) + '/').startsWith(__dirname + '/')) {
+        // Ignore everything in this folder
+        // because it's a mix of CJS and ESM
+        // and working with raw code is easier.
+        return true;
+      }
+      return false;
+    },
+  ],
+  presets: ['@babel/preset-react'],
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const fs = require('fs').promises;
+const compress = require('compression');
+const chalk = require('chalk');
+const express = require('express');
+const http = require('http');
+const React = require('react');
+
+const {renderToPipeableStream} = require('react-dom/server');
+const {createFromNodeStream} = require('react-server-dom-unbundled/client');
+const {PassThrough} = require('stream');
+
+const app = express();
+
+app.use(compress());
+
+if (process.env.NODE_ENV === 'development') {
+  // In development we host the Webpack server for live bundling.
+  const webpack = require('webpack');
+  const webpackMiddleware = require('webpack-dev-middleware');
+  const webpackHotMiddleware = require('webpack-hot-middleware');
+  const paths = require('../config/paths');
+  const configFactory = require('../config/webpack.config');
+  const getClientEnvironment = require('../config/env');
+
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+  const config = configFactory('development');
+  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+  const appName = require(paths.appPackageJson).name;
+
+  // Create a webpack compiler that is configured with custom messages.
+  const compiler = webpack(config);
+  app.use(
+    webpackMiddleware(compiler, {
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+      serverSideRender: true,
+      headers: () => {
+        return {
+          'Cache-Control': 'no-store, must-revalidate',
+        };
+      },
+    })
+  );
+  app.use(webpackHotMiddleware(compiler));
+}
+
+function request(options, body) {
+  return new Promise((resolve, reject) => {
+    const req = http.request(options, res => {
+      resolve(res);
+    });
+    req.on('error', e => {
+      reject(e);
+    });
+    body.pipe(req);
+  });
+}
+
+async function renderApp(req, res, next) {
+  // Proxy the request to the regional server.
+  const proxiedHeaders = {
+    'X-Forwarded-Host': req.hostname,
+    'X-Forwarded-For': req.ips,
+    'X-Forwarded-Port': 3000,
+    'X-Forwarded-Proto': req.protocol,
+  };
+  // Proxy other headers as desired.
+  if (req.get('rsc-action')) {
+    proxiedHeaders['Content-type'] = req.get('Content-type');
+    proxiedHeaders['rsc-action'] = req.get('rsc-action');
+  } else if (req.get('Content-type')) {
+    proxiedHeaders['Content-type'] = req.get('Content-type');
+  }
+  if (req.headers['cache-control']) {
+    proxiedHeaders['Cache-Control'] = req.get('cache-control');
+  }
+  if (req.get('rsc-request-id')) {
+    proxiedHeaders['rsc-request-id'] = req.get('rsc-request-id');
+  }
+
+  const requestsPrerender = req.path === '/prerender';
+
+  const promiseForData = request(
+    {
+      host: '127.0.0.1',
+      port: 3001,
+      method: req.method,
+      path: requestsPrerender ? '/?prerender=1' : '/',
+      headers: proxiedHeaders,
+    },
+    req
+  );
+
+  if (req.accepts('text/html')) {
+    try {
+      const rscResponse = await promiseForData;
+
+      let virtualFs;
+      let buildPath;
+      if (process.env.NODE_ENV === 'development') {
+        const {devMiddleware} = res.locals.webpack;
+        virtualFs = devMiddleware.outputFileSystem.promises;
+        buildPath = devMiddleware.stats.toJson().outputPath;
+      } else {
+        virtualFs = fs;
+        buildPath = path.join(__dirname, '../build/');
+      }
+      // Read the module map from the virtual file system.
+      const serverConsumerManifest = JSON.parse(
+        await virtualFs.readFile(
+          path.join(buildPath, 'react-ssr-manifest.json'),
+          'utf8'
+        )
+      );
+
+      // Read the entrypoints containing the initial JS to bootstrap everything.
+      // For other pages, the chunks in the RSC payload are enough.
+      const mainJSChunks = JSON.parse(
+        await virtualFs.readFile(
+          path.join(buildPath, 'entrypoint-manifest.json'),
+          'utf8'
+        )
+      ).main.js;
+      // For HTML, we're a "client" emulator that runs the client code,
+      // so we start by consuming the RSC payload. This needs a module
+      // map that reverse engineers the client-side path to the SSR path.
+
+      // We need to get the formState before we start rendering but we also
+      // need to run the Flight client inside the render to get all the preloads.
+      // The API is ambivalent about what's the right one so we need two for now.
+
+      // Tee the response into two streams so that we can do both.
+      const rscResponse1 = new PassThrough();
+      const rscResponse2 = new PassThrough();
+
+      rscResponse.pipe(rscResponse1);
+      rscResponse.pipe(rscResponse2);
+
+      const {formState} = await createFromNodeStream(
+        rscResponse1,
+        serverConsumerManifest
+      );
+      rscResponse1.end();
+
+      let cachedResult;
+      let Root = () => {
+        if (!cachedResult) {
+          // Read this stream inside the render.
+          cachedResult = createFromNodeStream(
+            rscResponse2,
+            serverConsumerManifest
+          );
+        }
+        return React.use(cachedResult).root;
+      };
+      // Render it into HTML by resolving the client components
+      res.set('Content-type', 'text/html');
+      const {pipe} = renderToPipeableStream(React.createElement(Root), {
+        bootstrapScripts: mainJSChunks,
+        formState: formState,
+        onShellReady() {
+          pipe(res);
+        },
+        onShellError(error) {
+          const {pipe: pipeError} = renderToPipeableStream(
+            React.createElement('html', null, React.createElement('body')),
+            {
+              bootstrapScripts: mainJSChunks,
+            }
+          );
+          pipeError(res);
+        },
+      });
+    } catch (e) {
+      console.error(`Failed to SSR: ${e.stack}`);
+      res.statusCode = 500;
+      res.end();
+    }
+  } else {
+    try {
+      const rscResponse = await promiseForData;
+      // For other request, we pass-through the RSC payload.
+      res.set('Content-type', 'text/x-component');
+      rscResponse.on('data', data => {
+        res.write(data);
+        res.flush();
+      });
+      rscResponse.on('end', data => {
+        res.end();
+      });
+    } catch (e) {
+      console.error(`Failed to proxy request: ${e.stack}`);
+      res.statusCode = 500;
+      res.end();
+    }
+  }
+}
+
+app.all('/', renderApp);
+app.all('/prerender', renderApp);
+
+if (process.env.NODE_ENV === 'development') {
+  app.use(express.static('public'));
+
+  app.get('/source-maps', async function (req, res, next) {
+    // Proxy the request to the regional server.
+    const proxiedHeaders = {
+      'X-Forwarded-Host': req.hostname,
+      'X-Forwarded-For': req.ips,
+      'X-Forwarded-Port': 3000,
+      'X-Forwarded-Proto': req.protocol,
+    };
+
+    const promiseForData = request(
+      {
+        host: '127.0.0.1',
+        port: 3001,
+        method: req.method,
+        path: req.originalUrl,
+        headers: proxiedHeaders,
+      },
+      req
+    );
+
+    try {
+      const rscResponse = await promiseForData;
+      res.set('Content-type', 'application/json');
+      rscResponse.on('data', data => {
+        res.write(data);
+        res.flush();
+      });
+      rscResponse.on('end', data => {
+        res.end();
+      });
+    } catch (e) {
+      console.error(`Failed to proxy request: ${e.stack}`);
+      res.statusCode = 500;
+      res.end();
+    }
+  });
+} else {
+  // In production we host the static build output.
+  app.use(express.static('build'));
+}
+
+app.listen(3000, () => {
+  console.log('Global Fizz/Webpack Server listening on port 3000...');
+});
+
+app.on('error', function (error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error('port 3000 requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error('Port 3000 is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
diff --git a/fixtures/flight/server/package.json b/fixtures/flight/server/package.json
new file mode 100644
index 00000000000..5bbefffbabe
--- /dev/null
+++ b/fixtures/flight/server/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight/server/region.js b/fixtures/flight/server/region.js
new file mode 100644
index 00000000000..d6d8418a3df
--- /dev/null
+++ b/fixtures/flight/server/region.js
@@ -0,0 +1,399 @@
+'use strict';
+
+// This is a server to host data-local resources like databases and RSC
+
+const path = require('path');
+const url = require('url');
+
+const register = require('react-server-dom-unbundled/node-register');
+// TODO: This seems to have no effect anymore. Remove?
+register();
+
+const babelRegister = require('@babel/register');
+babelRegister({
+  babelrc: false,
+  ignore: [
+    /\/(build|node_modules)\//,
+    function (file) {
+      if ((path.dirname(file) + '/').startsWith(__dirname + '/')) {
+        // Ignore everything in this folder
+        // because it's a mix of CJS and ESM
+        // and working with raw code is easier.
+        return true;
+      }
+      return false;
+    },
+  ],
+  presets: ['@babel/preset-react'],
+  plugins: ['@babel/transform-modules-commonjs'],
+  sourceMaps: process.env.NODE_ENV === 'development' ? 'inline' : false,
+});
+
+if (typeof fetch === 'undefined') {
+  // Patch fetch for earlier Node versions.
+  global.fetch = require('undici').fetch;
+}
+
+const express = require('express');
+const bodyParser = require('body-parser');
+const busboy = require('busboy');
+const app = express();
+const compress = require('compression');
+const {Readable} = require('node:stream');
+
+const nodeModule = require('node:module');
+
+app.use(compress());
+
+// Application
+
+const {readFile} = require('fs').promises;
+
+const React = require('react');
+
+const activeDebugChannels =
+  process.env.NODE_ENV === 'development' ? new Map() : null;
+
+function filterStackFrame(sourceURL, functionName) {
+  return (
+    sourceURL !== '' &&
+    !sourceURL.startsWith('node:') &&
+    !sourceURL.includes('node_modules') &&
+    !sourceURL.endsWith('library.js') &&
+    !sourceURL.includes('/server/region.js')
+  );
+}
+
+function getDebugChannel(req) {
+  if (process.env.NODE_ENV !== 'development') {
+    return undefined;
+  }
+  const requestId = req.get('rsc-request-id');
+  if (!requestId) {
+    return undefined;
+  }
+  return activeDebugChannels.get(requestId);
+}
+
+async function renderApp(res, returnValue, formState, noCache, debugChannel) {
+  const {renderToPipeableStream} = await import(
+    'react-server-dom-unbundled/server'
+  );
+  // const m = require('../src/App.js');
+  const m = await import('../src/App.js');
+
+  let moduleMap;
+  let mainCSSChunks;
+  if (process.env.NODE_ENV === 'development') {
+    // Read the module map from the HMR server in development.
+    moduleMap = await (
+      await fetch('http://localhost:3000/react-client-manifest.json')
+    ).json();
+    mainCSSChunks = (
+      await (
+        await fetch('http://localhost:3000/entrypoint-manifest.json')
+      ).json()
+    ).main.css;
+  } else {
+    // Read the module map from the static build in production.
+    moduleMap = JSON.parse(
+      await readFile(
+        path.resolve(__dirname, `../build/react-client-manifest.json`),
+        'utf8'
+      )
+    );
+    mainCSSChunks = JSON.parse(
+      await readFile(
+        path.resolve(__dirname, `../build/entrypoint-manifest.json`),
+        'utf8'
+      )
+    ).main.css;
+  }
+  const App = m.default.default || m.default;
+  const root = React.createElement(
+    React.Fragment,
+    null,
+    // Prepend the App's tree with stylesheets required for this entrypoint.
+    mainCSSChunks.map(filename =>
+      React.createElement('link', {
+        rel: 'stylesheet',
+        href: filename,
+        precedence: 'default',
+        key: filename,
+      })
+    ),
+    React.createElement(App, {noCache})
+  );
+  // For client-invoked server actions we refresh the tree and return a return value.
+  const payload = {root, returnValue, formState};
+  const {pipe} = renderToPipeableStream(payload, moduleMap, {
+    debugChannel,
+    filterStackFrame,
+  });
+  pipe(res);
+}
+
+async function prerenderApp(res, returnValue, formState, noCache) {
+  const {prerenderToNodeStream} = await import(
+    'react-server-dom-unbundled/static'
+  );
+  // const m = require('../src/App.js');
+  const m = await import('../src/App.js');
+
+  let moduleMap;
+  let mainCSSChunks;
+  if (process.env.NODE_ENV === 'development') {
+    // Read the module map from the HMR server in development.
+    moduleMap = await (
+      await fetch('http://localhost:3000/react-client-manifest.json')
+    ).json();
+    mainCSSChunks = (
+      await (
+        await fetch('http://localhost:3000/entrypoint-manifest.json')
+      ).json()
+    ).main.css;
+  } else {
+    // Read the module map from the static build in production.
+    moduleMap = JSON.parse(
+      await readFile(
+        path.resolve(__dirname, `../build/react-client-manifest.json`),
+        'utf8'
+      )
+    );
+    mainCSSChunks = JSON.parse(
+      await readFile(
+        path.resolve(__dirname, `../build/entrypoint-manifest.json`),
+        'utf8'
+      )
+    ).main.css;
+  }
+  const App = m.default.default || m.default;
+  const root = React.createElement(
+    React.Fragment,
+    null,
+    // Prepend the App's tree with stylesheets required for this entrypoint.
+    mainCSSChunks.map(filename =>
+      React.createElement('link', {
+        rel: 'stylesheet',
+        href: filename,
+        precedence: 'default',
+        key: filename,
+      })
+    ),
+    React.createElement(App, {prerender: true, noCache})
+  );
+  // For client-invoked server actions we refresh the tree and return a return value.
+  const payload = {root, returnValue, formState};
+  const {prelude} = await prerenderToNodeStream(payload, moduleMap, {
+    filterStackFrame,
+  });
+  prelude.pipe(res);
+}
+
+app.get('/', async function (req, res) {
+  const noCache = req.get('cache-control') === 'no-cache';
+
+  if ('prerender' in req.query) {
+    await prerenderApp(res, null, null, noCache);
+  } else {
+    await renderApp(res, null, null, noCache, getDebugChannel(req));
+  }
+});
+
+app.post('/', bodyParser.text(), async function (req, res) {
+  const noCache = req.headers['cache-control'] === 'no-cache';
+  const {decodeReply, decodeReplyFromBusboy, decodeAction, decodeFormState} =
+    await import('react-server-dom-unbundled/server');
+  const serverReference = req.get('rsc-action');
+  if (serverReference) {
+    // This is the client-side case
+    const [filepath, name] = serverReference.split('#');
+    const action = (await import(filepath))[name];
+    // Validate that this is actually a function we intended to expose and
+    // not the client trying to invoke arbitrary functions. In a real app,
+    // you'd have a manifest verifying this before even importing it.
+    if (action.$$typeof !== Symbol.for('react.server.reference')) {
+      throw new Error('Invalid action');
+    }
+
+    let args;
+    if (req.is('multipart/form-data')) {
+      // Use busboy to streamingly parse the reply from form-data.
+      const bb = busboy({headers: req.headers});
+      const reply = decodeReplyFromBusboy(bb);
+      req.pipe(bb);
+      args = await reply;
+    } else {
+      args = await decodeReply(req.body);
+    }
+    const result = action.apply(null, args);
+    try {
+      // Wait for any mutations
+      await result;
+    } catch (x) {
+      // We handle the error on the client
+    }
+    // Refresh the client and return the value
+    renderApp(res, result, null, noCache, getDebugChannel(req));
+  } else {
+    // This is the progressive enhancement case
+    const UndiciRequest = require('undici').Request;
+    const fakeRequest = new UndiciRequest('http://localhost', {
+      method: 'POST',
+      headers: {'Content-Type': req.headers['content-type']},
+      body: Readable.toWeb(req),
+      duplex: 'half',
+    });
+    const formData = await fakeRequest.formData();
+    const action = await decodeAction(formData);
+    try {
+      // Wait for any mutations
+      const result = await action();
+      const formState = decodeFormState(result, formData);
+      renderApp(res, null, formState, noCache, undefined);
+    } catch (x) {
+      const {setServerState} = await import('../src/ServerState.js');
+      setServerState('Error: ' + x.message);
+      renderApp(res, null, null, noCache, undefined);
+    }
+  }
+});
+
+app.get('/todos', function (req, res) {
+  res.json([
+    {
+      id: 1,
+      text: 'Shave yaks',
+    },
+    {
+      id: 2,
+      text: 'Eat kale',
+    },
+  ]);
+});
+
+if (process.env.NODE_ENV === 'development') {
+  const rootDir = path.resolve(__dirname, '../');
+
+  app.get('/source-maps', async function (req, res, next) {
+    try {
+      res.set('Content-type', 'application/json');
+      let requestedFilePath = req.query.name;
+
+      let isCompiledOutput = false;
+      if (requestedFilePath.startsWith('file://')) {
+        // We assume that if it was prefixed with file:// it's referring to the compiled output
+        // and if it's a direct file path we assume it's source mapped back to original format.
+        isCompiledOutput = true;
+        requestedFilePath = url.fileURLToPath(requestedFilePath);
+      }
+
+      const relativePath = path.relative(rootDir, requestedFilePath);
+      if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+        // This is outside the root directory of the app. Forbid it to be served.
+        res.status = 403;
+        res.write('{}');
+        res.end();
+        return;
+      }
+
+      const sourceMap = nodeModule.findSourceMap(requestedFilePath);
+      let map;
+      if (requestedFilePath.startsWith('node:')) {
+        // This is a node internal. We don't include any source code for this but we still
+        // generate a source map for it so that we can add it to an ignoreList automatically.
+        map = {
+          version: 3,
+          // We use the node:// protocol convention to teach Chrome DevTools that this is
+          // on a different protocol and not part of the current page.
+          sources: ['node:///' + requestedFilePath.slice(5)],
+          sourcesContent: ['// Node Internals'],
+          mappings: 'AAAA',
+          ignoreList: [0],
+          sourceRoot: '',
+        };
+      } else if (!sourceMap || !isCompiledOutput) {
+        // If a file doesn't have a source map, such as this file, then we generate a blank
+        // source map that just contains the original content and segments pointing to the
+        // original lines. If a line number points to uncompiled output, like if source mapping
+        // was already applied we also use this path.
+        const sourceContent = await readFile(requestedFilePath, 'utf8');
+        const lines = sourceContent.split('\n').length;
+        // We ensure to absolute
+        const sourceURL = url.pathToFileURL(requestedFilePath);
+        map = {
+          version: 3,
+          sources: [sourceURL],
+          sourcesContent: [sourceContent],
+          // Note: This approach to mapping each line only lets you jump to each line
+          // not jump to a column within a line. To do that, you need a proper source map
+          // generated for each parsed segment or add a segment for each column.
+          mappings: 'AAAA' + ';AACA'.repeat(lines - 1),
+          sourceRoot: '',
+          // Add any node_modules to the ignore list automatically.
+          ignoreList: requestedFilePath.includes('node_modules')
+            ? [0]
+            : undefined,
+        };
+      } else {
+        // We always set prepareStackTrace before reading the stack so that we get the stack
+        // without source maps applied. Therefore we have to use the original source map.
+        // If something read .stack before we did, we might observe the line/column after
+        // source mapping back to the original file. We use the isCompiledOutput check above
+        // in that case.
+        map = sourceMap.payload;
+      }
+      res.write(JSON.stringify(map));
+      res.end();
+    } catch (x) {
+      res.status = 500;
+      res.write('{}');
+      res.end();
+      console.error(x);
+    }
+  });
+}
+
+const httpServer = app.listen(3001, () => {
+  console.log('Regional Flight Server listening on port 3001...');
+});
+
+app.on('error', function (error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error('port 3001 requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error('Port 3001 is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
+
+if (process.env.NODE_ENV === 'development') {
+  // Open a websocket server for Debug information
+  const WebSocket = require('ws');
+
+  const webSocketServer = new WebSocket.Server({
+    server: httpServer,
+    path: '/debug-channel',
+  });
+
+  webSocketServer.on('connection', (ws, req) => {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+    const requestId = url.searchParams.get('id');
+
+    activeDebugChannels.set(requestId, ws);
+
+    ws.on('close', (code, reason) => {
+      activeDebugChannels.delete(requestId);
+    });
+  });
+}
diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
new file mode 100644
index 00000000000..0bfe0fe630c
--- /dev/null
+++ b/fixtures/flight/src/App.js
@@ -0,0 +1,247 @@
+import * as React from 'react';
+import {renderToReadableStream} from 'react-server-dom-unbundled/server';
+import {createFromReadableStream} from 'react-server-dom-webpack/client';
+import {PassThrough, Readable} from 'stream';
+
+import Container from './Container.js';
+
+import {Counter} from './Counter.js';
+import {Counter as Counter2} from './Counter2.js';
+import AsyncModule from './cjs/Counter3.js';
+const Counter3 = await(AsyncModule);
+
+import ShowMore from './ShowMore.js';
+import Button from './Button.js';
+import Form from './Form.js';
+import {Dynamic} from './Dynamic.js';
+import {Client} from './Client.js';
+import {Navigate} from './Navigate.js';
+
+import {Note} from './cjs/Note.js';
+
+import {GenerateImage} from './GenerateImage.js';
+
+import LargeContent from './LargeContent.js';
+
+import {like, greet, increment} from './actions.js';
+
+import {getServerState} from './ServerState.js';
+import {sdkMethod} from './library.js';
+
+const promisedText = new Promise(resolve =>
+  setTimeout(() => resolve('deferred text'), 50)
+);
+
+function Foo({children}) {
+  return <div>{children}</div>;
+}
+
+async function delayedError(text, ms) {
+  return new Promise((_, reject) =>
+    setTimeout(() => reject(new Error(text)), ms)
+  );
+}
+
+async function delay(text, ms) {
+  return new Promise(resolve => setTimeout(() => resolve(text), ms));
+}
+
+async function delayTwice() {
+  try {
+    await delayedError('Delayed exception', 20);
+  } catch (x) {
+    // Ignored
+  }
+  await delay('', 10);
+}
+
+async function delayTrice() {
+  const p = delayTwice();
+  await delay('', 40);
+  return p;
+}
+
+async function Bar({children}) {
+  await delayTrice();
+  return <div>{children}</div>;
+}
+
+async function ThirdPartyComponent() {
+  return await delay('hello from a 3rd party', 30);
+}
+
+let cachedThirdPartyStream;
+
+// We create the Component outside of AsyncLocalStorage so that it has no owner.
+// That way it gets the owner from the call to createFromNodeStream.
+const thirdPartyComponent = <ThirdPartyComponent />;
+
+function simulateFetch(cb, latencyMs) {
+  return new Promise(resolve => {
+    // Request latency
+    setTimeout(() => {
+      const result = cb();
+      // Response latency
+      setTimeout(() => {
+        resolve(result);
+      }, latencyMs);
+    }, latencyMs);
+  });
+}
+
+async function fetchThirdParty(noCache) {
+  // We're using the Web Streams APIs for tee'ing convenience.
+  let stream;
+  if (cachedThirdPartyStream && !noCache) {
+    stream = cachedThirdPartyStream;
+  } else {
+    stream = await simulateFetch(
+      () =>
+        renderToReadableStream(
+          thirdPartyComponent,
+          {},
+          {environmentName: 'third-party'}
+        ),
+      25
+    );
+  }
+
+  const [stream1, stream2] = stream.tee();
+  cachedThirdPartyStream = stream1;
+
+  return createFromReadableStream(stream2, {
+    serverConsumerManifest: {
+      moduleMap: {},
+      serverModuleMap: null,
+      moduleLoading: null,
+    },
+  });
+}
+
+async function ServerComponent({noCache}) {
+  await delay('deferred text', 50);
+  return await fetchThirdParty(noCache);
+}
+
+let veryDeepObject = [
+  {
+    bar: {
+      baz: {
+        a: {},
+      },
+    },
+  },
+  {
+    bar: {
+      baz: {
+        a: {},
+      },
+    },
+  },
+  {
+    bar: {
+      baz: {
+        a: {},
+      },
+    },
+  },
+  {
+    bar: {
+      baz: {
+        a: {
+          b: {
+            c: {
+              d: {
+                e: {
+                  f: {
+                    g: {
+                      h: {
+                        i: {
+                          j: {
+                            k: {
+                              l: {
+                                m: {
+                                  yay: 'You reached the end',
+                                },
+                              },
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+];
+
+export default async function App({prerender, noCache}) {
+  const res = await fetch('http://localhost:3001/todos');
+  const todos = await res.json();
+  await sdkMethod('http://localhost:3001/todos');
+
+  console.log('Expand me:', veryDeepObject);
+
+  const dedupedChild = <ServerComponent noCache={noCache} />;
+  const message = getServerState();
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Flight</title>
+      </head>
+      <body>
+        <Container>
+          {prerender ? (
+            <meta data-testid="prerendered" name="prerendered" content="true" />
+          ) : (
+            <meta content="when not prerendering we render this meta tag. When prerendering you will expect to see this tag and the one with data-testid=prerendered because we SSR one and hydrate the other" />
+          )}
+          <h1>{message}</h1>
+          <React.Suspense fallback={null}>
+            <div data-testid="promise-as-a-child-test">
+              Promise as a child hydrates without errors: {promisedText}
+            </div>
+          </React.Suspense>
+          <Counter incrementAction={increment} />
+          <Counter2 incrementAction={increment} />
+          <Counter3 incrementAction={increment} />
+          <ul>
+            {todos.map(todo => (
+              <li key={todo.id}>{todo.text}</li>
+            ))}
+          </ul>
+          <ShowMore>
+            <p>Lorem ipsum</p>
+          </ShowMore>
+          <Form action={greet} />
+          <div>
+            <Button action={like}>Like</Button>
+          </div>
+          <div>
+            loaded statically: <Dynamic />
+          </div>
+          <div>
+            <GenerateImage message={message} />
+          </div>
+          <Client />
+          <Note />
+          <Foo>{dedupedChild}</Foo>
+          <Bar>{Promise.resolve([dedupedChild])}</Bar>
+          <Navigate />
+          {prerender ? null : ( // TODO: prerender is broken for large content for some reason.
+            <React.Suspense fallback={null}>
+              <LargeContent />
+            </React.Suspense>
+          )}
+        </Container>
+      </body>
+    </html>
+  );
+}
diff --git a/fixtures/flight/src/Button.js b/fixtures/flight/src/Button.js
new file mode 100644
index 00000000000..e62e40c716c
--- /dev/null
+++ b/fixtures/flight/src/Button.js
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import {useFormStatus} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
+
+function ButtonDisabledWhilePending({action, children}) {
+  const {pending} = useFormStatus();
+  return (
+    <button disabled={pending} formAction={action}>
+      {children}
+    </button>
+  );
+}
+
+export default function Button({action, children}) {
+  return (
+    <ErrorBoundary>
+      <form>
+        <ButtonDisabledWhilePending action={action}>
+          {children}
+        </ButtonDisabledWhilePending>
+      </form>
+    </ErrorBoundary>
+  );
+}
diff --git a/fixtures/flight/src/Client.js b/fixtures/flight/src/Client.js
new file mode 100644
index 00000000000..dccd250e24c
--- /dev/null
+++ b/fixtures/flight/src/Client.js
@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+
+let LazyDynamic = React.lazy(() =>
+  import('./Dynamic.js').then(exp => ({default: exp.Dynamic}))
+);
+
+export function Client() {
+  const [loaded, load] = React.useReducer(() => true, false);
+
+  return loaded ? (
+    <div>
+      loaded dynamically: <LazyDynamic />
+    </div>
+  ) : (
+    <div>
+      <button onClick={load}>Load dynamic import Component</button>
+    </div>
+  );
+}
diff --git a/fixtures/flight/src/Container.js b/fixtures/flight/src/Container.js
new file mode 100644
index 00000000000..49875403c8c
--- /dev/null
+++ b/fixtures/flight/src/Container.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function Container({children}) {
+  return <div>{children}</div>;
+}
diff --git a/fixtures/flight/src/Counter.js b/fixtures/flight/src/Counter.js
new file mode 100644
index 00000000000..30170bed3fd
--- /dev/null
+++ b/fixtures/flight/src/Counter.js
@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+
+import Container from './Container.js';
+
+export function Counter({incrementAction}) {
+  const [count, incrementFormAction] = React.useActionState(incrementAction, 0);
+  return (
+    <Container>
+      <form>
+        <button formAction={incrementFormAction}>Count: {count}</button>
+      </form>
+    </Container>
+  );
+}
diff --git a/fixtures/flight/src/Counter2.js b/fixtures/flight/src/Counter2.js
new file mode 100644
index 00000000000..d6541beaf21
--- /dev/null
+++ b/fixtures/flight/src/Counter2.js
@@ -0,0 +1,3 @@
+'use client';
+
+export * from './Counter.js';
diff --git a/fixtures/flight/src/Dynamic.js b/fixtures/flight/src/Dynamic.js
new file mode 100644
index 00000000000..dac88887cfb
--- /dev/null
+++ b/fixtures/flight/src/Dynamic.js
@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+
+export function Dynamic() {
+  return (
+    <div>
+      This client component should be loaded in a single chunk even when it is
+      used as both a client reference and as a dynamic import.
+    </div>
+  );
+}
diff --git a/fixtures/flight/src/ErrorBoundary.js b/fixtures/flight/src/ErrorBoundary.js
new file mode 100644
index 00000000000..44dc0965142
--- /dev/null
+++ b/fixtures/flight/src/ErrorBoundary.js
@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  state = {error: null};
+  static getDerivedStateFromError(error) {
+    return {error};
+  }
+  render() {
+    if (this.state.error) {
+      return <div>Caught an error: {this.state.error.message}</div>;
+    }
+    return this.props.children;
+  }
+}
diff --git a/fixtures/flight/src/Form.js b/fixtures/flight/src/Form.js
new file mode 100644
index 00000000000..8bb06362d56
--- /dev/null
+++ b/fixtures/flight/src/Form.js
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import {useFormStatus} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
+
+function Status() {
+  const {pending} = useFormStatus();
+  return pending ? 'Saving...' : null;
+}
+
+export default function Form({action, children}) {
+  const [isPending, setIsPending] = React.useState(false);
+
+  return (
+    <ErrorBoundary>
+      <form action={action}>
+        <label>
+          Name: <input name="name" />
+        </label>
+        <label>
+          File: <input type="file" name="file" />
+        </label>
+        <button>Say Hi</button>
+        <Status />
+      </form>
+    </ErrorBoundary>
+  );
+}
diff --git a/fixtures/flight/src/GenerateImage.js b/fixtures/flight/src/GenerateImage.js
new file mode 100644
index 00000000000..2869f93b13b
--- /dev/null
+++ b/fixtures/flight/src/GenerateImage.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import {createCanvas} from 'canvas';
+
+export async function GenerateImage({message}) {
+  // Generate an image using an image library
+  const canvas = createCanvas(200, 70);
+  const ctx = canvas.getContext('2d');
+  ctx.font = '20px Impact';
+  ctx.rotate(-0.1);
+  ctx.fillText(message, 10, 50);
+
+  // Rasterize into a Blob with a mime type
+  const type = 'image/png';
+  const blob = new Blob([canvas.toBuffer(type)], {type});
+
+  // Just pass it to React
+  return <img src={blob} />;
+}
diff --git a/fixtures/flight/src/LargeContent.js b/fixtures/flight/src/LargeContent.js
new file mode 100644
index 00000000000..cacdda3df72
--- /dev/null
+++ b/fixtures/flight/src/LargeContent.js
@@ -0,0 +1,1115 @@
+import * as React from 'react';
+
+export default async function LargeContent() {
+  return (
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor
+        dapibus nunc, at feugiat sem tempor id. Pellentesque euismod a libero in
+        dignissim. Curabitur consequat urna blandit eros pellentesque sagittis.
+        Quisque sed odio elit. Vivamus semper, ipsum eget congue ornare, neque
+        nibh suscipit mauris, in luctus ligula urna nec ligula. Interdum et
+        malesuada fames ac ante ipsum primis in faucibus. Vivamus in ligula sit
+        amet ligula gravida accumsan. Suspendisse potenti. Suspendisse vulputate
+        auctor ligula nec scelerisque. Praesent tempus diam nec porta malesuada.
+        Cras pellentesque euismod sapien, ut luctus risus egestas id. Nam sed
+        neque vehicula, tempor lacus non, maximus felis. Curabitur lobortis
+        efficitur massa, sed volutpat elit vulputate eget. Nullam posuere risus
+        vel purus bibendum placerat at nec libero.
+      </p>
+      <p>
+        Pellentesque eget laoreet nulla, in dictum ex. Maecenas odio nulla,
+        laoreet sed dapibus eget, fermentum ut ipsum. Nam nec gravida massa, non
+        scelerisque augue. Donec vulputate nibh at sem convallis, quis imperdiet
+        arcu vestibulum. Duis eget nibh sapien. Praesent nulla arcu, mattis et
+        velit sit amet, viverra facilisis leo. Integer gravida nisi urna, in
+        fermentum purus sagittis a. Integer a convallis dui. Nunc gravida erat
+        nec nunc porttitor, eu pharetra nibh varius. Vestibulum ante ipsum
+        primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras
+        quis lobortis sapien, et accumsan mi. Sed in interdum libero. Vivamus
+        congue, est mollis elementum porta, lectus nulla maximus urna, sed
+        cursus ex est sit amet lorem. Morbi et porta urna, sit amet varius
+        magna. Maecenas tincidunt lorem nec dolor venenatis elementum.
+      </p>
+      <p>
+        Vivamus dapibus mi urna. Aliquam rutrum accumsan nisi, vitae convallis
+        risus rhoncus a. Phasellus ultrices rutrum leo. Phasellus eget diam et
+        turpis porttitor tincidunt eget et massa. Aliquam quis pellentesque
+        orci, eu auctor urna. Maecenas hendrerit nisi vestibulum ligula blandit,
+        id vestibulum erat facilisis. Phasellus ac pulvinar nibh. Fusce
+        suscipit, lectus vel viverra blandit, risus erat congue urna, in cursus
+        tortor lorem nec eros. Mauris dapibus, justo ac gravida mattis, nunc
+        massa euismod elit, vel eleifend ipsum nisi vitae massa. Cras id
+        volutpat magna, in semper quam.
+      </p>
+      <p>
+        Ut id vehicula turpis. Nullam ac iaculis sem, pulvinar elementum odio.
+        Aliquam venenatis feugiat risus ut lacinia. Pellentesque habitant morbi
+        tristique senectus et netus et malesuada fames ac turpis egestas. Cras
+        quis blandit tellus. Ut vitae imperdiet dolor. Duis rutrum a tortor in
+        porta. Nulla sed euismod leo. Etiam urna nisi, eleifend tristique velit
+        sit amet, bibendum eleifend turpis. Pellentesque tellus purus, faucibus
+        quis pellentesque ac, finibus sed mi. Aenean eget lobortis neque.
+      </p>
+      <p>
+        Sed fermentum pulvinar dolor, a euismod felis pulvinar sed. Aliquam et
+        vestibulum eros. Pellentesque mattis efficitur erat. Quisque scelerisque
+        sem venenatis eros bibendum porta. Fusce a elit et ante rutrum gravida.
+        Sed ex orci, venenatis non elementum id, faucibus et diam. Nullam
+        posuere viverra tempus. Duis faucibus metus urna, sit amet bibendum
+        lorem fermentum ut. Quisque laoreet ultrices purus.
+      </p>
+      <p>
+        Praesent placerat laoreet augue, eu mollis mi vulputate in. Sed commodo
+        est at sapien laoreet pulvinar. Interdum et malesuada fames ac ante
+        ipsum primis in faucibus. Sed libero velit, porttitor vitae lectus sit
+        amet, accumsan rhoncus mi. Donec tincidunt purus odio. Aliquam ac
+        molestie nisi, sed hendrerit sem. Nulla facilisi. Sed tempor odio eu
+        nisl facilisis, vel porttitor augue auctor. Fusce in ex euismod,
+        dignissim diam quis, lacinia purus. Interdum et malesuada fames ac ante
+        ipsum primis in faucibus. Integer non nibh odio. Ut ut ligula felis.
+        Curabitur tempor lacus a risus condimentum, eu accumsan turpis sagittis.
+        Nulla facilisi. Quisque at congue nunc, at suscipit neque.
+      </p>
+      <p>
+        Integer feugiat ligula quis nunc ultrices, eget sodales metus elementum.
+        Proin ex justo, mollis a pulvinar ullamcorper, fermentum sit amet
+        tellus. Fusce id euismod nisi. Cras mattis placerat purus nec venenatis.
+        Aenean sed dui faucibus, egestas ipsum at, tempus purus. Proin facilisis
+        tellus quis odio ultrices, a tincidunt elit congue. Nam tempus sapien
+        vel quam sodales tempus. Ut blandit pellentesque lorem vel imperdiet.
+        Cras nisi turpis, volutpat a mauris nec, faucibus ultrices tortor.
+        Praesent a ornare augue. Ut eget neque sed felis imperdiet vestibulum et
+        ut metus. Maecenas vel dolor ante. Vivamus posuere risus interdum lacus
+        pulvinar, eget tincidunt velit tempus. Sed viverra erat tellus, nec
+        iaculis dolor tincidunt et. Sed rhoncus mauris nibh, non lacinia lorem
+        vehicula nec.
+      </p>
+      <p>
+        Maecenas ultrices malesuada urna quis maximus. Proin vel dictum ipsum.
+        Duis lacinia turpis vel molestie pharetra. Nullam iaculis porta rhoncus.
+        Maecenas ullamcorper massa non velit sagittis suscipit. Quisque lobortis
+        blandit diam, vehicula cursus quam faucibus in. Duis eget mauris vitae
+        augue convallis interdum. Ut ac iaculis ex, quis maximus justo. Ut sed
+        fermentum tellus. Pellentesque facilisis turpis nisi, id molestie tortor
+        aliquam dignissim. Aenean luctus quam at arcu viverra venenatis. Proin
+        quis pellentesque nisi. Donec iaculis nunc id ornare pharetra. Donec id
+        ligula mollis, hendrerit ipsum in, vulputate justo. Praesent in
+        condimentum sem. Pellentesque malesuada velit ullamcorper dui pharetra
+        placerat.
+      </p>
+      <p>
+        In lacus nibh, finibus sed nulla ut, dictum feugiat magna. Aliquam
+        semper turpis non placerat scelerisque. Maecenas lobortis, est vitae
+        aliquam maximus, metus tortor porta dolor, vitae ullamcorper elit enim
+        vel tellus. Vestibulum volutpat posuere luctus. Nullam eros leo, aliquam
+        et ullamcorper sed, viverra in erat. Nam mauris metus, imperdiet non
+        convallis et, viverra et tortor. Nulla quis pretium tellus. In
+        scelerisque finibus mi convallis euismod. Pellentesque ante tellus,
+        vestibulum non egestas in, volutpat eu arcu. Donec malesuada risus nisi,
+        eget consequat massa rhoncus ut. Maecenas eget magna a metus consectetur
+        interdum. Sed lorem est, eleifend sed mattis in, feugiat ac magna.
+        Pellentesque iaculis nunc sed metus laoreet, ac feugiat est maximus.
+        Aenean velit magna, dapibus ut scelerisque ac, sollicitudin sed justo.
+        Phasellus venenatis metus sit amet dapibus imperdiet.
+      </p>
+      <p>
+        Nullam nec volutpat purus. Duis elementum ex risus, id consectetur
+        lectus commodo molestie. Duis tristique nisl non convallis tristique.
+        Nam eget lectus tempor, porta orci ut, fermentum nibh. Morbi egestas
+        semper tempor. Nunc est lacus, aliquet id pellentesque vel, tincidunt id
+        eros. Suspendisse vitae nibh vitae ligula faucibus tristique eu eu
+        lorem. Donec nec turpis consequat, laoreet sapien ut, condimentum orci.
+        Mauris imperdiet feugiat consectetur. Nam vel ultrices arcu. Donec quis
+        pharetra augue, in egestas quam. Ut vitae ligula bibendum, suscipit
+        risus non, malesuada tellus. Praesent quis dui nec odio rutrum tempor
+        vitae nec augue.
+      </p>
+      <p>
+        Nam tristique erat vitae congue venenatis. Suspendisse sed mattis nisi.
+        Aliquam erat volutpat. Quisque vitae odio eu sapien hendrerit pretium.
+        Etiam sollicitudin orci purus, a bibendum erat tincidunt at. Nunc
+        ultricies ac arcu eget consectetur. Cras augue libero, hendrerit et
+        placerat in, imperdiet sed lectus. Pellentesque varius enim laoreet est
+        finibus, vitae vulputate leo venenatis. Nam tincidunt metus eget neque
+        tristique pretium.
+      </p>
+      <p>
+        Ut ultrices dapibus ornare. Aliquam et est eu nisl mattis fermentum.
+        Aliquam luctus est sed lobortis aliquam. Donec vel pretium purus. Donec
+        augue augue, euismod viverra orci a, lacinia maximus risus. Nam sagittis
+        nibh eget urna feugiat, et venenatis erat facilisis. Donec fermentum non
+        nisi ut pretium. Aenean sodales fermentum lacus, vitae fermentum elit
+        efficitur hendrerit. Proin dictum pretium lacus, vestibulum efficitur
+        orci hendrerit ac. Maecenas non elementum diam, vel venenatis eros.
+        Donec finibus luctus arcu, porttitor condimentum tortor tincidunt vel.
+      </p>
+      <p>
+        Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus
+        viverra massa diam, in dignissim nunc dapibus eu. Phasellus tincidunt
+        fermentum libero vitae eleifend. Nullam vel pellentesque libero, et
+        sagittis turpis. Quisque euismod quis diam quis ornare. Cras id quam
+        elementum, suscipit augue id, sodales eros. Vivamus egestas, quam vitae
+        sagittis pellentesque, justo purus aliquam purus, vel bibendum turpis
+        nisi quis lectus. Ut ac libero vitae mauris placerat luctus et eget
+        velit. Nullam semper eros elementum, efficitur lacus eget, consequat
+        magna. Ut eu tincidunt urna, vel congue sapien. Vestibulum ante ipsum
+        primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec
+        odio velit, rutrum sit amet porta et, imperdiet a augue.
+      </p>
+      <p>
+        Nunc nec odio nec ipsum convallis mattis. Nulla ut aliquet quam. Morbi
+        enim tortor, dignissim sit amet volutpat non, consequat in neque.
+        Maecenas vitae enim blandit, dictum lorem eget, placerat turpis.
+        Suspendisse potenti. Integer dapibus efficitur nunc non dignissim. Proin
+        rhoncus laoreet imperdiet. Aenean nec iaculis est. Praesent placerat
+        nibh ac augue blandit pulvinar. Suspendisse vitae ipsum eget sapien
+        aliquet fermentum in a urna.
+      </p>
+      <p>
+        Quisque porta odio eu blandit vehicula. Maecenas sapien libero, sodales
+        quis quam ut, pharetra finibus libero. Etiam vel neque ipsum. Aliquam
+        quis dui mi. Vestibulum vitae massa nulla. Ut est nibh, elementum vitae
+        nisi fermentum, viverra consectetur risus. Phasellus cursus egestas
+        felis quis interdum. Nam non ipsum et mauris dignissim vehicula nec nec
+        est. Duis quis venenatis mi. Pellentesque blandit ullamcorper felis,
+        commodo ultricies ligula faucibus vel. Maecenas scelerisque neque a erat
+        consequat vehicula. Ut finibus tempus facilisis. In sodales lacus at
+        magna tincidunt, in maximus neque convallis. In at lorem eu purus
+        volutpat aliquam at vitae enim. Sed sit amet mauris vitae tortor finibus
+        scelerisque ut et eros.
+      </p>
+      <p>
+        Integer in fermentum massa, a maximus purus. Donec rhoncus, lectus sit
+        amet consequat vestibulum, neque ante cursus urna, eleifend varius felis
+        ante sed enim. In dui mi, euismod ac mollis id, porttitor vel leo.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Nunc nisl sapien, convallis bibendum vehicula
+        non, convallis ut sem. Nullam non molestie massa. Phasellus eu volutpat
+        mi. Pellentesque porta ex sed turpis commodo, sit amet aliquet ex
+        sagittis. Vestibulum molestie ante a magna eleifend imperdiet. In
+        hendrerit nibh sed eleifend facilisis. Mauris malesuada cursus tortor
+        non fringilla. Sed a nibh sed sem accumsan finibus. Vivamus egestas
+        mauris porta, ultricies felis at, sodales arcu. Ut eu lacinia eros.
+        Aliquam consequat laoreet ante, in interdum eros lacinia ac. Nunc luctus
+        nisl eget nulla vehicula, a fermentum diam porta.
+      </p>
+      <p>
+        Proin vel tellus placerat, lacinia arcu pretium, gravida ligula.
+        Vestibulum pharetra diam non ultrices finibus. Quisque facilisis
+        imperdiet lorem, ullamcorper molestie odio laoreet in. Praesent tellus
+        quam, laoreet et orci quis, consequat ullamcorper magna. Nam lobortis id
+        ligula ut sodales. Quisque venenatis, lacus non accumsan fermentum,
+        magna mauris dignissim mi, vel finibus nulla leo id nibh. Integer
+        condimentum nulla et diam scelerisque mollis. Interdum et malesuada
+        fames ac ante ipsum primis in faucibus.
+      </p>
+      <p>
+        Fusce gravida ultrices hendrerit. Mauris aliquet, risus in feugiat
+        dictum, sem ligula mattis odio, consequat consectetur mi tellus non
+        nulla. Duis quis rhoncus ex, at vehicula urna. Quisque vitae dolor
+        tincidunt, egestas mauris id, tristique mauris. Mauris hendrerit iaculis
+        urna. Mauris molestie dictum massa, non porttitor arcu commodo id.
+        Praesent enim erat, malesuada dictum orci id, gravida consequat metus.
+        Duis vel magna ultricies, ultrices mi eu, euismod lectus. Quisque non
+        mauris ut urna efficitur vestibulum eu eget sem. Integer bibendum
+        bibendum arcu, at placerat felis luctus faucibus.
+      </p>
+      <p>
+        Quisque porttitor euismod justo, in mattis tortor gravida et. Aliquam
+        dapibus enim ut purus blandit consectetur. Quisque erat est, pretium
+        eget mattis in, finibus at urna. Nulla pulvinar euismod magna eu
+        sollicitudin. Sed varius sapien quis dolor vehicula rhoncus. Etiam eget
+        arcu vel mi placerat scelerisque. Proin sed viverra est. Nullam sit amet
+        porta urna. In hac habitasse platea dictumst. Etiam eget ullamcorper
+        ipsum. Aenean nisi magna, efficitur sed maximus nec, finibus ut massa.
+      </p>
+      <p>
+        Nullam vitae condimentum odio. In tempus velit vel lacus molestie
+        vestibulum at congue lacus. Vestibulum sed ante elit. Aliquam suscipit
+        est sed metus mollis, ut gravida dolor scelerisque. Mauris placerat
+        risus turpis, nec varius neque malesuada non. Fusce ultrices facilisis
+        tempus. Praesent consectetur aliquam nulla. Quisque a luctus leo. Nam
+        odio elit, consectetur quis turpis ut, vestibulum laoreet leo. Sed vitae
+        purus quis metus dignissim viverra. Proin lobortis tempor tincidunt.
+        Phasellus posuere tristique nisl, et laoreet mauris sodales quis. Donec
+        finibus leo arcu, a ultrices mi viverra at. Aenean lacinia ex quis
+        pretium vehicula. In hac habitasse platea dictumst.
+      </p>
+      <p>
+        Morbi gravida sit amet leo aliquam mattis. Aliquam vestibulum, est ac
+        rutrum sollicitudin, dui dolor mollis turpis, finibus euismod purus est
+        id purus. Proin eleifend leo consequat augue suscipit accumsan. Sed nec
+        dolor id sem tincidunt tempor. Morbi neque nisl, malesuada nec placerat
+        eget, finibus viverra quam. In id leo gravida, lobortis libero quis,
+        bibendum diam. Aliquam et fermentum augue, et pretium lacus.
+      </p>
+      <p>
+        Phasellus quis massa in mi suscipit auctor eget in ante. Phasellus a
+        efficitur lectus. Nam porta eros a est aliquet, interdum luctus tortor
+        accumsan. Nam ac mollis est. Duis vitae sagittis magna. Pellentesque
+        molestie vehicula tortor. Curabitur in semper sapien. Phasellus vitae
+        bibendum ligula, in bibendum leo. Phasellus pellentesque mi sed ante
+        tristique, et condimentum enim fringilla. Nulla facilisi.
+      </p>
+      <p>
+        Phasellus porta risus eu lobortis dapibus. Nulla ut leo sem. Vivamus nec
+        nisi erat. Proin vel dolor auctor, tristique purus at, congue nisi. In
+        sit amet fermentum tortor. Nullam volutpat, massa sit amet tempor
+        sollicitudin, orci risus aliquet elit, et consequat ante nisl vel odio.
+        Sed auctor mollis justo, vel gravida lacus aliquam vel. Sed elit tellus,
+        blandit nec dictum a, tempus quis libero.
+      </p>
+      <p>
+        Mauris molestie in elit ac faucibus. Praesent a velit diam. Praesent ut
+        dapibus arcu, ut molestie quam. Cras eget pretium sem. Sed quis lacus
+        hendrerit, auctor nisi eget, venenatis dui. Cras id nisl aliquam,
+        elementum lacus ac, sodales purus. Cras venenatis quam eu leo mattis,
+        feugiat venenatis turpis rutrum. Vestibulum non leo lectus. Aenean at
+        leo pellentesque ex efficitur sollicitudin. Sed nec nunc eu elit
+        hendrerit ultrices. Nullam porta tincidunt vestibulum. Aliquam convallis
+        nisl eu ipsum posuere, vitae aliquam diam tempor.
+      </p>
+      <p>
+        Cras vitae auctor risus. Morbi aliquam aliquet massa, et varius sem
+        interdum eu. Praesent purus ligula, rhoncus sed consequat id, rutrum ut
+        elit. Aenean in est eu velit fermentum consequat. Sed vulputate placerat
+        augue, vel cursus purus placerat ut. Maecenas mauris velit, tristique
+        fringilla fermentum eu, hendrerit in dui. Fusce vestibulum ligula non
+        sem tempus, pellentesque vulputate nibh iaculis. Curabitur eleifend vel
+        ante non malesuada. Mauris a dolor nec leo sagittis convallis nec non
+        velit. Maecenas accumsan est at ligula malesuada, eu pulvinar ligula
+        consequat. Suspendisse potenti. Nullam nec urna id metus efficitur
+        posuere et in dui. Maecenas varius, eros vitae sollicitudin pulvinar,
+        sem nisi rhoncus arcu, id feugiat nunc tellus id velit. Vestibulum sit
+        amet dictum lectus. Praesent eget massa pulvinar, mollis leo at, tempor
+        erat.
+      </p>
+      <p>
+        Duis ut mi ac ex fringilla molestie. Sed ultricies rutrum purus. Nam
+        varius placerat varius. Pellentesque libero ligula, gravida at egestas
+        sed, tempor vel nisi. Suspendisse convallis tortor et mi convallis,
+        vitae tempus felis dignissim. Nulla facilisi. Sed at augue eget purus
+        rutrum volutpat. Mauris auctor arcu a arcu placerat pulvinar. Maecenas
+        in tortor ipsum. Integer quam nulla, congue et velit sodales, ornare
+        semper mauris. Etiam luctus nisl vitae risus condimentum, vitae sagittis
+        metus vehicula. Etiam non nulla mi. Vivamus ornare accumsan est, sit
+        amet condimentum est pretium a.
+      </p>
+      <p>
+        Donec faucibus erat quis libero lobortis dictum. Proin lacus arcu,
+        laoreet id semper a, dictum eget lacus. Sed consectetur metus turpis,
+        non sodales massa fringilla sit amet. Donec ultrices rutrum risus, vitae
+        facilisis est porta non. Integer congue scelerisque enim sed
+        condimentum. Cras rutrum ex ullamcorper ultrices malesuada. Suspendisse
+        potenti. Donec pretium eros ipsum, id pharetra tortor posuere non. Proin
+        accumsan tempus ipsum, eget lobortis tellus. Proin blandit mi ut orci
+        consectetur, sed elementum nibh tempor. Ut eu tincidunt nunc, sit amet
+        aliquam turpis. Nulla facilisis felis lectus, a ultricies dolor
+        efficitur eget. In a pellentesque libero.
+      </p>
+      <p>
+        Aenean cursus orci sed est tincidunt finibus. Duis efficitur nec turpis
+        ut placerat. Aenean aliquet tortor lorem, eget elementum orci dapibus
+        eu. Etiam imperdiet congue sollicitudin. Nunc congue, ante quis molestie
+        porta, lorem nunc gravida felis, id lacinia lorem risus nec metus. Donec
+        orci magna, tempus id urna sed, feugiat malesuada felis. Aliquam nec
+        eleifend arcu. Vivamus ac lectus tempor, tempus leo in, lacinia est. Nam
+        ut viverra lectus. Sed sit amet rhoncus neque. Sed mollis in urna id
+        volutpat.
+      </p>
+      <p>
+        Fusce vestibulum in odio nec tempor. Praesent nulla lorem, commodo vel
+        ligula et, accumsan bibendum mauris. Mauris ornare nulla sapien, sit
+        amet dapibus lacus dignissim in. Donec dapibus dui ac nisl feugiat, et
+        gravida risus facilisis. Sed gravida, odio non consectetur efficitur,
+        urna metus venenatis nisl, sit amet vulputate ante mauris in lectus.
+        Phasellus tincidunt, risus nec interdum dictum, mi tellus malesuada
+        justo, vel tempus leo enim quis orci. Sed in commodo ligula. Mauris non
+        interdum elit, id dapibus quam.
+      </p>
+      <p>
+        Proin a velit sit amet nunc congue feugiat sit amet ut lorem. Mauris vel
+        iaculis nisi. Praesent purus massa, accumsan ac euismod hendrerit,
+        auctor et arcu. Curabitur tempus ornare velit interdum tempor. Morbi a
+        turpis vel mauris luctus tincidunt ut id quam. Aliquam tincidunt nec
+        erat a volutpat. Donec ultricies accumsan tortor, ut pulvinar mauris
+        consectetur in. Duis condimentum blandit ipsum, sit amet dapibus risus
+        dignissim et. Vestibulum sodales imperdiet facilisis. Donec gravida
+        tellus a posuere faucibus. Nunc vitae placerat lorem.
+      </p>
+      <p>
+        Mauris dictum nunc sed turpis commodo, eget elementum nibh lobortis.
+        Vivamus ut condimentum sem. Etiam dui diam, facilisis vel egestas et,
+        fringilla eget odio. Pellentesque quis sapien mattis, dignissim nisi
+        quis, volutpat massa. Vivamus eget pulvinar risus. Aliquam tristique
+        elit vel viverra facilisis. Vestibulum ac malesuada ex. Lorem ipsum
+        dolor sit amet, consectetur adipiscing elit. Phasellus condimentum est
+        nec iaculis dignissim. Aenean congue, odio quis vestibulum malesuada,
+        justo enim tristique sapien, tempor lobortis erat tortor vitae felis.
+        Aliquam erat volutpat. Nullam vel mattis mauris, ut dictum lacus. Fusce
+        tincidunt accumsan magna quis tincidunt. Aenean nec diam convallis,
+        facilisis ex ut, varius nunc.
+      </p>
+      <p>
+        Nullam facilisis congue semper. Aenean placerat ipsum ut felis semper,
+        ut sagittis eros congue. Duis non volutpat sapien, eu ullamcorper lorem.
+        Donec consectetur mauris vitae neque pharetra, eu sollicitudin ex
+        scelerisque. Donec at urna feugiat leo mollis viverra. Integer imperdiet
+        tincidunt quam, in congue turpis finibus vel. Phasellus porta maximus
+        ullamcorper. Etiam ultrices nec diam non tempus. Sed vitae lacus et leo
+        finibus elementum. Suspendisse potenti. Fusce tincidunt mattis sapien
+        nec maximus.
+      </p>
+      <p>
+        Aenean ultricies purus sit amet dapibus vehicula. Fusce quis libero
+        orci. Vestibulum interdum rutrum augue eget ornare. Nullam euismod
+        tellus a erat ornare, sed feugiat est sodales. Donec iaculis orci nisl.
+        Nulla ligula nisi, euismod in varius et, consectetur eget lorem. Vivamus
+        eu magna vel turpis interdum varius non non magna. Pellentesque sit amet
+        velit eget justo eleifend pharetra.
+      </p>
+      <p>
+        Fusce scelerisque sapien magna, eget mollis orci tincidunt a. Quisque at
+        dolor iaculis, euismod quam et, facilisis risus. Morbi eget tincidunt
+        turpis, nec sodales sem. Morbi ut sem eget dui pretium molestie eget ac
+        neque. Proin scelerisque tellus sed congue tincidunt. Suspendisse
+        sagittis condimentum elit, at lobortis mauris varius ut. Proin bibendum
+        ultricies maximus. Suspendisse tempor orci ultrices diam tristique
+        maximus.
+      </p>
+      <p>
+        Cras et odio id ex eleifend varius ac at metus. Class aptent taciti
+        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+        Proin congue quam efficitur sapien vestibulum pretium. Nulla fringilla,
+        augue ac consectetur maximus, nibh ligula elementum risus, eget
+        tincidunt dui sapien eu libero. Phasellus quis nulla quis nunc pretium
+        faucibus. Quisque vel lacinia massa, ac rhoncus nulla. Nullam a erat non
+        quam ultricies maximus. Donec non dui ac nisl aliquet eleifend. Praesent
+        elementum nunc eu ultrices viverra. Maecenas congue, tortor ut fringilla
+        sollicitudin, purus ligula aliquet neque, vel egestas ex lorem sit amet
+        nisl. Fusce dignissim leo quis ante placerat, eu interdum dolor
+        tristique. In porttitor vestibulum ante, sit amet imperdiet nulla
+        facilisis a. Duis posuere auctor orci, ut tristique nulla. Morbi congue
+        ante dignissim lacus varius, ac volutpat felis fermentum. Morbi ipsum
+        mi, tincidunt vitae nunc vel, molestie porta ante.
+      </p>
+      <p>
+        Sed sollicitudin mauris a iaculis porta. Nunc sit amet congue lorem, vel
+        porta est. Nulla a nibh suscipit, cursus mi nec, rhoncus enim. Cras
+        hendrerit faucibus dui, sit amet viverra sem ultricies sit amet.
+        Pellentesque non luctus orci, ornare porttitor dolor. Cras id tincidunt
+        justo. Integer vestibulum, libero ac convallis malesuada, quam quam
+        feugiat sapien, ac eleifend sapien ante eget leo. Aenean eu nisl nisl.
+        Pellentesque et congue nunc. Integer odio ante, laoreet eu lectus in,
+        auctor blandit diam. Maecenas ultrices gravida magna, in mattis leo
+        aliquam ut.
+      </p>
+      <p>
+        Pellentesque nec felis at felis auctor congue. Integer ut finibus lacus.
+        Nullam viverra porttitor elit, non rutrum metus auctor sit amet. Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae tellus
+        a nunc sodales placerat. Class aptent taciti sociosqu ad litora torquent
+        per conubia nostra, per inceptos himenaeos. Maecenas egestas rhoncus
+        quam, quis eleifend massa condimentum vel. In id nunc a tortor
+        pellentesque congue sed ac arcu. Cras vestibulum quis leo sed pulvinar.
+        Nulla nec commodo urna. Aliquam maximus vel ex sed efficitur. Praesent
+        tincidunt, metus sed facilisis mattis, felis ex mollis leo, sit amet
+        tincidunt ante tellus sit amet mi.
+      </p>
+      <p>
+        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+        inceptos himenaeos. Aliquam erat volutpat. Duis porta efficitur rhoncus.
+        Phasellus viverra nunc tellus, in mollis augue tempor non. Nullam at
+        metus urna. Fusce vitae ligula eu lectus vulputate porta. Nullam
+        convallis, nulla in placerat ultrices, lorem nunc lobortis diam, ac
+        sodales quam orci a mi. Ut sodales placerat lectus id aliquet. Morbi
+        vestibulum, eros et sodales molestie, felis justo aliquet dui, vitae
+        dignissim tortor sapien vel quam. Nunc in pretium metus. Aliquam erat
+        justo, vestibulum quis arcu sed, luctus sagittis lacus. Nam consectetur
+        efficitur volutpat.
+      </p>
+      <p>
+        Etiam odio lorem, tincidunt a convallis eu, vestibulum eu massa. Integer
+        faucibus sed purus sed malesuada. Sed sollicitudin, nisi at fermentum
+        accumsan, eros odio luctus nisl, vel placerat ante turpis at metus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+        faucibus dui odio, imperdiet aliquam ex ullamcorper ac. Aenean leo ex,
+        tincidunt sit amet venenatis eget, congue in elit. Vestibulum tempus
+        iaculis nunc vitae volutpat. Nullam eu maximus risus. Cras ut volutpat
+        nulla, et pulvinar orci. Nunc et vestibulum mauris. Donec sit amet nunc
+        hendrerit, malesuada neque non, malesuada neque. Aenean id sagittis
+        massa. Morbi non lectus ipsum. Donec facilisis fermentum augue non
+        laoreet. Nunc pulvinar tincidunt lacus laoreet condimentum. Aliquam
+        rutrum ultricies diam ac maximus.
+      </p>
+      <p>
+        Sed sagittis nisi ut metus imperdiet, sed tempus sem ornare. Duis
+        vehicula interdum mauris, eu facilisis sapien egestas et. Donec eget
+        libero neque. Curabitur volutpat dolor sit amet neque ultrices, vitae
+        viverra ipsum congue. Cras et quam ullamcorper, tempor nisi vel,
+        convallis lectus. Donec sagittis, felis vitae finibus auctor, neque odio
+        mollis sapien, quis euismod lacus mi et augue. Vestibulum tincidunt
+        lorem vel auctor dictum. Nam ultrices nisi at blandit dignissim.
+      </p>
+      <p>
+        Proin cursus, erat a hendrerit dictum, urna nisl laoreet orci, vel
+        posuere libero arcu vitae purus. Etiam ac nulla sit amet ligula feugiat
+        aliquam eu et ex. In hac habitasse platea dictumst. Nullam id
+        condimentum justo, quis vulputate enim. Donec consequat fringilla ipsum
+        sit amet vulputate. Suspendisse potenti. Etiam iaculis lorem non
+        facilisis aliquam. Ut at lobortis leo. Aenean fermentum augue vel leo
+        vehicula condimentum et vitae ex.
+      </p>
+      <p>
+        Etiam auctor arcu placerat, semper turpis non, aliquet lorem. Proin
+        auctor pharetra augue vitae tempus. Duis semper magna metus. Nam quis
+        nunc non augue mattis porta nec sed est. Sed at porta tortor. Fusce eget
+        consequat turpis, et dignissim enim. Ut non mollis erat, nec volutpat
+        ipsum. Vivamus eget felis ipsum. Nullam aliquet bibendum semper. Proin
+        id sapien eget libero ultricies iaculis. Praesent dictum mauris et justo
+        porttitor luctus. Mauris imperdiet est eget feugiat egestas. Aenean
+        cursus facilisis ipsum, sed convallis eros vulputate ut. Vivamus laoreet
+        urna vel justo molestie tincidunt. Sed tristique justo quis nunc
+        tincidunt, viverra aliquet lorem sodales. Nam aliquam venenatis turpis,
+        quis accumsan lorem gravida nec.
+      </p>
+      <p>
+        Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur
+        eget sapien in ipsum suscipit aliquam. Phasellus dui nulla, egestas quis
+        orci in, pulvinar hendrerit tellus. Sed faucibus, urna non dignissim
+        sollicitudin, turpis arcu imperdiet velit, ut tristique lacus lorem
+        bibendum elit. Donec ullamcorper justo nisl, nec rhoncus purus venenatis
+        quis. Praesent vestibulum venenatis erat, sit amet iaculis risus
+        ullamcorper at. Aenean ligula odio, pulvinar vitae metus placerat, porta
+        finibus enim. Etiam suscipit, odio vel accumsan varius, lorem leo
+        consectetur magna, id bibendum est dolor varius nibh. Nullam erat ante,
+        placerat ac ante sed, suscipit gravida nunc. Vivamus euismod fermentum
+        dolor, eu fermentum est dictum in.
+      </p>
+      <p>
+        Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam
+        placerat volutpat iaculis. Morbi ligula felis, congue non hendrerit
+        vitae, ultricies eu felis. Fusce elementum, lorem id ultricies semper,
+        purus libero vulputate turpis, vitae pellentesque enim nisi vel urna.
+        Nunc mi odio, dapibus id velit eu, commodo varius sapien. Donec et nulla
+        volutpat, semper ipsum ac, molestie enim. Vivamus non quam mattis,
+        viverra massa nec, maximus lectus. Aliquam eleifend dolor quis fringilla
+        tincidunt. Donec tincidunt suscipit urna efficitur hendrerit. Cras
+        lectus metus, vulputate vitae dolor eu, condimentum lobortis nisi. Sed
+        sodales elementum orci. Suspendisse hendrerit tortor nulla.
+      </p>
+      <p>
+        Proin bibendum vel justo non fringilla. Praesent auctor at tortor et
+        eleifend. Sed finibus tempor interdum. Sed dui diam, feugiat dictum
+        faucibus sit amet, dictum ut lacus. Suspendisse consectetur varius
+        fringilla. In sit amet leo nunc. Maecenas mollis mauris ut arcu rutrum
+        finibus. Pellentesque magna elit, efficitur at nisl ac, porta
+        scelerisque nisl. In vitae metus a libero euismod vestibulum. Donec
+        faucibus augue at dolor volutpat gravida. Vivamus feugiat sagittis leo
+        id hendrerit. Quisque placerat, augue at eleifend tempor, nibh lorem
+        sodales orci, quis maximus eros diam in dui. Pellentesque habitant morbi
+        tristique senectus et netus et malesuada fames ac turpis egestas. Nunc
+        luctus mauris scelerisque, ullamcorper erat a, volutpat diam. Mauris id
+        lacinia turpis. Proin in ligula bibendum, molestie leo ut, accumsan
+        elit.
+      </p>
+      <p>
+        Integer tempus, elit ac tincidunt iaculis, nibh quam rutrum augue, at
+        maximus quam ligula non odio. Integer commodo ullamcorper tempor. Mauris
+        vestibulum, nisi eu maximus bibendum, sem est eleifend magna, porttitor
+        dignissim nulla lorem id ante. Aliquam erat volutpat. Donec vitae
+        ullamcorper quam, lobortis porttitor eros. Quisque vitae tempor eros.
+        Sed faucibus a arcu suscipit suscipit. Etiam eros justo, aliquet at
+        velit id, tempor rutrum elit. Quisque et purus sit amet felis lacinia
+        condimentum. Suspendisse potenti. Nunc ex mi, commodo blandit tempus in,
+        tempor vel lacus. Cras urna enim, tempor eget lacus sit amet, accumsan
+        maximus ligula. Donec quis lorem quam. Etiam at est ut justo rutrum
+        bibendum. Vivamus lectus felis, mollis a enim a, tincidunt vehicula
+        purus.
+      </p>
+      <p>
+        Phasellus vehicula congue sapien, in volutpat felis posuere id. Aliquam
+        non urna eu purus placerat sollicitudin id a elit. Morbi pharetra est
+        non augue porttitor, sed volutpat ipsum fermentum. Fusce sed velit
+        risus. Sed id dolor ac dolor rhoncus lobortis eu ut leo. In dapibus est
+        lobortis, dictum nulla in, suscipit risus. Aliquam tincidunt, dolor sit
+        amet laoreet egestas, eros mi pulvinar nisi, sed varius elit arcu et
+        massa. Orci varius natoque penatibus et magnis dis parturient montes,
+        nascetur ridiculus mus. Mauris finibus neque nec gravida aliquet. Etiam
+        nec neque sem. Donec eget eros ex. Nam porta eget libero vitae
+        porttitor. In hac habitasse platea dictumst.
+      </p>
+      <p>
+        Integer a dictum urna. Etiam nulla leo, molestie eu hendrerit non,
+        finibus at tellus. Sed hendrerit non mauris in imperdiet. Donec eleifend
+        elementum felis eget posuere. Proin in massa rutrum dui tempor bibendum.
+        Vivamus eget nisi porta tellus tempor volutpat nec non purus. Aenean eu
+        nisi dolor. Morbi in sodales lectus, at lacinia lacus.
+      </p>
+      <p>
+        Morbi ligula lacus, auctor eu aliquet et, ultricies sagittis odio.
+        Phasellus in diam a metus congue dapibus ut ac mi. In hac habitasse
+        platea dictumst. Pellentesque et commodo magna, ut molestie nibh. Donec
+        ac justo ut nisl pharetra ultrices non vitae diam. Cras convallis erat
+        nulla, ac consequat justo condimentum vitae. Etiam vitae magna vitae
+        risus molestie luctus vitae at ipsum. Duis in nisl interdum risus
+        facilisis pretium. Donec tempus elementum faucibus. Etiam eu molestie
+        elit, ac egestas sem. Sed consequat diam vel venenatis pharetra.
+        Vestibulum efficitur eget sapien in ultricies.
+      </p>
+      <p>
+        Nunc mauris magna, scelerisque vel aliquam ultrices, tincidunt vel nisl.
+        Duis luctus quis nisl quis vehicula. Nullam non tristique felis.
+        Curabitur semper ipsum non lacus dictum ullamcorper. Proin sed sodales
+        elit. Suspendisse volutpat vehicula elit, nec mattis tortor sagittis ut.
+        Praesent eu sem enim. Fusce sit amet odio in velit sagittis fringilla.
+        Nulla facilisi. Pellentesque non massa sit amet ligula vehicula
+        vestibulum ac et lorem. Ut elementum orci orci, ut facilisis massa
+        cursus in.
+      </p>
+      <p>
+        Praesent ultrices urna eu ultrices ultricies. Phasellus sapien purus,
+        accumsan quis dui a, tempor ornare augue. Pellentesque tempor dolor et
+        placerat dapibus. Pellentesque fermentum dictum tellus vitae elementum.
+        Morbi in erat pharetra, posuere odio et, semper nisl. Integer quis
+        consectetur massa. Sed ac mi elit. Fusce aliquam enim nulla, in
+        consequat urna dignissim sit amet. Duis porttitor placerat elit vel
+        ornare. Praesent malesuada dictum mollis. Suspendisse vitae sem quis
+        felis posuere finibus. Donec a porta metus. Class aptent taciti sociosqu
+        ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus
+        mattis tempor sapien, non scelerisque turpis auctor venenatis. Aenean
+        sed metus vitae orci facilisis luctus. Pellentesque vestibulum varius
+        gravida.
+      </p>
+      <p>
+        Nulla id elit sit amet ligula aliquam tristique. Vestibulum eleifend
+        suscipit velit a rutrum. Suspendisse ultrices iaculis libero ut
+        ullamcorper. Vivamus interdum dignissim mi, vitae tempus lectus
+        tristique non. Fusce consectetur feugiat fermentum. Donec sagittis non
+        est vel porttitor. Pellentesque iaculis massa vitae quam lobortis
+        vehicula accumsan in elit. Aliquam erat volutpat. Nam sit amet metus
+        odio. Nulla condimentum justo eget purus interdum faucibus. Quisque
+        facilisis nisl blandit, gravida nisl in, ornare neque.
+      </p>
+      <p>
+        Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+        ridiculus mus. Donec sed nunc vel lacus ornare dictum. Donec lacinia
+        iaculis sollicitudin. Nunc tempor eleifend ligula in dignissim.
+        Suspendisse id accumsan tellus. Praesent vulputate elit est, sed
+        sagittis neque suscipit ut. Etiam in tincidunt ipsum.
+      </p>
+      <p>
+        Praesent tincidunt lectus eu nisl eleifend varius. Sed rutrum imperdiet
+        lorem, a volutpat augue posuere elementum. Praesent luctus aliquam
+        ligula id mollis. Curabitur lorem nisl, vulputate sit amet velit
+        dapibus, dictum aliquet nisl. Donec vitae ornare magna, ut facilisis
+        ipsum. Vestibulum volutpat ligula et ipsum hendrerit vehicula. Donec
+        scelerisque accumsan turpis sit amet porta.
+      </p>
+      <p>
+        Curabitur aliquet varius felis, sit amet condimentum urna commodo vitae.
+        Pellentesque eget nisl tincidunt, dictum quam ut, feugiat est. In
+        vulputate metus at nunc faucibus aliquam. Aenean vulputate, nunc at
+        pharetra iaculis, dui lacus porta diam, id consectetur magna magna ac
+        massa. Class aptent taciti sociosqu ad litora torquent per conubia
+        nostra, per inceptos himenaeos. Ut dapibus sollicitudin neque, tempor
+        luctus dui lacinia ac. Fusce quis ex id ligula varius feugiat eget et
+        enim. Pellentesque bibendum elit massa, vel tempor neque gravida quis.
+        Nulla facilisi. Etiam ut mauris sit amet ipsum imperdiet venenatis. Ut
+        porta vestibulum dolor eu suscipit. Vivamus mollis interdum ipsum sed
+        posuere.
+      </p>
+      <p>
+        Aliquam tristique mi eget lacinia maximus. Ut auctor leo sit amet risus
+        sodales, quis tempor justo accumsan. Sed eu tincidunt risus. Suspendisse
+        orci metus, rutrum sit amet risus non, lobortis facilisis augue. Nunc
+        dolor turpis, posuere ut condimentum nec, euismod sed eros. Donec mattis
+        dignissim mi in pulvinar. Curabitur ut metus magna. Nulla facilisi.
+      </p>
+      <p>
+        Proin vel porttitor ipsum. Fusce in lectus in ipsum bibendum mollis.
+        Donec pellentesque iaculis tincidunt. Etiam sit amet mi porttitor,
+        condimentum nibh non, dictum purus. Nulla dapibus suscipit maximus. Cras
+        eu dignissim libero. Pellentesque habitant morbi tristique senectus et
+        netus et malesuada fames ac turpis egestas. Praesent tempor placerat
+        tincidunt. Vestibulum nec sapien blandit, mollis neque rhoncus,
+        sollicitudin sapien. Donec et consequat enim.
+      </p>
+      <p>
+        Pellentesque fringilla egestas sapien eget egestas. Curabitur malesuada
+        elit quis nulla pretium, aliquam semper orci pharetra. In pellentesque,
+        metus quis tempus aliquet, ligula lorem scelerisque ligula, ut maximus
+        risus orci hendrerit lectus. Fusce in quam non turpis ultricies pulvinar
+        sed id nunc. Nullam blandit varius risus eget ultricies. Cras ut dolor
+        et elit eleifend ornare. In hac habitasse platea dictumst. Lorem ipsum
+        dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin
+        vitae nibh eget pellentesque. Nam luctus congue massa, sed semper mauris
+        tincidunt non. Nulla facilisi. Suspendisse quis rutrum leo. Donec
+        aliquam sem nibh, quis egestas augue egestas vitae. Duis consequat
+        sapien eget sem venenatis ornare. Curabitur tincidunt lobortis orci, nec
+        viverra justo pulvinar tincidunt. Maecenas iaculis bibendum est, nec
+        dapibus massa tempor quis.
+      </p>
+      <p>
+        Aliquam in nulla eget erat euismod posuere. Proin consectetur, lorem eu
+        fringilla posuere, ante quam imperdiet ligula, quis suscipit neque risus
+        ac est. Fusce congue nibh viverra nibh aliquet, sit amet ullamcorper
+        lectus lacinia. Fusce quis auctor diam. Orci varius natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Etiam tristique
+        elit ac arcu interdum ullamcorper. Pellentesque lobortis sollicitudin
+        metus sit amet faucibus. Sed vehicula elementum justo vel egestas.
+        Suspendisse varius laoreet lacinia. Nullam eget venenatis lacus. Aliquam
+        in orci consequat, rhoncus ligula in, faucibus lorem. Maecenas feugiat
+        luctus tristique. Nunc turpis felis, pellentesque sed molestie ac,
+        cursus eu arcu. In vitae metus hendrerit, interdum tortor eget,
+        scelerisque sem. Proin quis tortor libero. Sed euismod cursus tortor,
+        nec pellentesque magna.
+      </p>
+      <p>
+        In a ex accumsan, semper nisl vitae, porttitor turpis. Morbi sed blandit
+        tortor, vitae venenatis ex. Mauris eu fermentum nunc, vitae rutrum
+        neque. Donec eu diam vulputate, venenatis sem dictum, placerat magna.
+        Cras ante enim, imperdiet eu lacinia ut, tempor eget lectus. Praesent
+        molestie turpis massa, sed commodo mauris dignissim at. Etiam ultrices
+        ex a purus mollis varius. Ut ac erat diam. Maecenas laoreet massa purus.
+      </p>
+      <p>
+        Suspendisse luctus leo egestas est vulputate consectetur. Sed porttitor
+        nisi id orci lobortis consectetur. Praesent id neque ac eros tincidunt
+        mollis ac eget mi. Aliquam fringilla lorem ligula, quis maximus tortor
+        mattis vitae. Pellentesque faucibus neque vel commodo blandit. Integer a
+        dictum mi, id auctor metus. Vestibulum efficitur ornare felis eu
+        lobortis. Quisque ac viverra eros. Ut mattis accumsan justo.
+      </p>
+      <p>
+        Curabitur convallis tellus neque, a ornare dui pulvinar ut. Nulla
+        sagittis sit amet tellus quis dignissim. Aliquam convallis commodo
+        tellus vitae ultricies. Pellentesque habitant morbi tristique senectus
+        et netus et malesuada fames ac turpis egestas. Proin nunc augue, maximus
+        at eros in, iaculis lobortis turpis. Aliquam ut sapien sit amet ante
+        condimentum sollicitudin. Quisque rhoncus sollicitudin imperdiet.
+        Integer luctus laoreet maximus. Donec pulvinar porta metus, sit amet
+        tristique erat tempor at. In convallis mi quis justo pretium varius sit
+        amet nec diam. Suspendisse potenti. Morbi pulvinar tristique elit id
+        semper. Donec pulvinar cursus volutpat.
+      </p>
+      <p>
+        Nulla consequat felis felis, sed vehicula turpis rhoncus a. Suspendisse
+        potenti. Sed tortor ante, aliquet in eros in, tempor finibus diam.
+        Aliquam neque lorem, commodo pretium vestibulum id, tincidunt vel ipsum.
+        Nunc feugiat augue a magna tempor, vitae suscipit est elementum. Proin
+        imperdiet dui ante, ut auctor nulla consequat sed. Aenean bibendum massa
+        a lectus egestas, nec posuere nisi tempor. Praesent et rhoncus magna.
+        Maecenas nec diam vitae risus malesuada sodales nec id risus. Mauris
+        pulvinar mi at nulla feugiat, nec faucibus ex efficitur. Aenean a risus
+        vel diam commodo congue nec et purus. Curabitur lobortis hendrerit nibh
+        sed feugiat. Praesent sollicitudin porttitor mauris, consequat consequat
+        odio vulputate eget. Quisque convallis velit quam, ut ornare sem
+        faucibus et. In posuere ullamcorper hendrerit. Nam vel sapien risus.
+      </p>
+      <p>
+        Mauris venenatis nunc sit amet diam faucibus accumsan. Maecenas sed
+        augue nec dolor eleifend placerat vulputate eu metus. Aliquam eu purus
+        quis orci dapibus aliquam id ut elit. Quisque ornare, dui blandit
+        ullamcorper posuere, magna urna dictum est, sit amet faucibus magna mi
+        eu neque. Cras sodales aliquet sem, ac vulputate eros facilisis
+        interdum. Duis ut gravida neque. Sed facilisis lectus et lorem finibus
+        imperdiet. Vestibulum quis libero et nunc tristique suscipit. Ut at
+        purus tortor.
+      </p>
+      <p>
+        Sed dolor est, mattis eget molestie in, convallis a odio. Nulla quis
+        consectetur metus. Nulla et lacus blandit, rutrum eros sit amet,
+        condimentum lectus. Suspendisse feugiat felis dignissim eros accumsan
+        feugiat. Etiam lobortis orci massa, vel rutrum urna feugiat vel. Donec
+        mollis nisl eget ex laoreet aliquet. Donec neque arcu, finibus et nisl
+        sed, ultricies facilisis nibh. Sed condimentum tortor est, ut dignissim
+        nulla bibendum et. Donec sagittis posuere est dictum tempor.
+      </p>
+      <p>
+        Vestibulum pretium justo metus, eget lobortis augue consectetur at.
+        Quisque sodales magna quis consectetur eleifend. Duis eu dapibus erat.
+        Donec eros nibh, facilisis eu neque at, egestas commodo purus.
+        Pellentesque id urna erat. Aenean lacinia diam eu leo convallis, et
+        volutpat justo dignissim. Etiam id dolor elementum, porta dui at, porta
+        arcu. Proin elementum ac ex sit amet viverra. Aenean nec sagittis magna.
+      </p>
+      <p>
+        Aliquam suscipit est sed ipsum finibus laoreet. Proin porta lacus in
+        neque sollicitudin, non posuere lacus luctus. Cras ultricies imperdiet
+        tempor. Nulla sit amet magna facilisis, semper nunc a, placerat nunc.
+        Cras commodo, sapien vitae bibendum ornare, odio mi iaculis leo, eu
+        volutpat risus libero id turpis. Morbi sollicitudin, augue nec dictum
+        dignissim, nulla tortor tincidunt eros, nec finibus metus leo ac nisi.
+        Mauris rhoncus, urna sed lacinia posuere, ante magna suscipit arcu,
+        vitae vestibulum lacus odio vel ligula. Integer aliquam euismod
+        ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et
+        ultrices posuere cubilia curae; Integer non lectus massa. In ac odio
+        condimentum urna aliquet aliquam sed nec ligula. Sed ut dolor varius
+        felis eleifend tincidunt quis sed sapien.
+      </p>
+      <p>
+        Vestibulum ornare tellus orci, a pretium libero congue et. Praesent in
+        egestas diam, quis fermentum nisl. Vivamus eu scelerisque metus, et
+        sagittis justo. Aenean pulvinar justo felis, at cursus ante gravida ut.
+        Mauris tristique mi placerat rutrum elementum. Vestibulum porta sagittis
+        ligula, ut tristique urna egestas eget. Aliquam et sagittis turpis.
+        Vestibulum accumsan nunc in nibh iaculis, eget pretium justo elementum.
+        Donec varius ex sed quam pellentesque, eu auctor dolor pulvinar.
+      </p>
+      <p>
+        Nulla et purus lacus. Sed fringilla finibus sodales. Etiam venenatis dui
+        vitae felis condimentum, vitae venenatis orci vulputate. Phasellus
+        rhoncus arcu id vehicula pretium. Sed sit amet dolor arcu. Fusce nec
+        commodo risus. Orci varius natoque penatibus et magnis dis parturient
+        montes, nascetur ridiculus mus.
+      </p>
+      <p>
+        Nam sit amet dapibus est. Mauris imperdiet ex ac elit mattis tempus. Nam
+        placerat felis eu mauris commodo euismod. In hac habitasse platea
+        dictumst. Quisque auctor nec arcu quis varius. Integer iaculis est sed
+        egestas elementum. Aenean gravida auctor erat sed efficitur. Donec
+        sapien urna, condimentum at libero eu, viverra porta metus. Proin
+        sodales erat lorem, eget hendrerit massa dictum vitae. Quisque sit amet
+        fringilla ex. Vivamus lobortis tempor nulla, id feugiat neque aliquet
+        et. Cras et placerat turpis, sed hendrerit justo. Ut in placerat risus.
+        Praesent id nibh eu velit consequat efficitur eget nec magna.
+      </p>
+      <p>
+        Praesent nec consequat nisi. Integer ac nulla eget nunc condimentum
+        lobortis ac non lacus. In eu porta magna. Etiam dapibus ultrices turpis,
+        vel placerat tellus lacinia non. Pellentesque aliquam libero in massa
+        sodales, nec tincidunt ligula pretium. Nulla blandit neque turpis, nec
+        accumsan nibh pulvinar blandit. Cras facilisis gravida placerat.
+        Curabitur pellentesque velit quis lorem imperdiet vulputate viverra in
+        metus. Proin et tellus dictum dui lacinia varius ac ut metus. Nullam
+        dignissim eros erat, id dignissim ante sagittis sit amet. Sed lobortis,
+        quam volutpat rutrum consequat, velit nunc lobortis eros, at ultricies
+        ex nibh sit amet ligula. Phasellus tempor mi at dolor consequat, eget
+        sodales mauris consequat. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Aliquam convallis ex vel
+        lectus bibendum, in gravida lectus dictum. Orci varius natoque penatibus
+        et magnis dis parturient montes, nascetur ridiculus mus. Curabitur
+        volutpat lectus quis magna interdum ornare.
+      </p>
+      <p>
+        Pellentesque rutrum maximus purus vitae commodo. Vivamus imperdiet vitae
+        mi sit amet cursus. Nullam bibendum consequat felis at tincidunt.
+        Quisque pellentesque diam leo, eget vestibulum risus gravida quis.
+        Phasellus ipsum sapien, scelerisque eget nisi eu, sodales fringilla est.
+        Nam purus lacus, euismod eget sem et, accumsan auctor lectus. Sed
+        porttitor ex non nunc commodo, et posuere erat hendrerit. Praesent eu
+        dolor id dolor ullamcorper cursus at eu risus. Nam tincidunt, ipsum in
+        tempus tristique, neque quam tempus mauris, quis fringilla quam purus
+        vitae elit. Maecenas finibus efficitur consequat. Curabitur et suscipit
+        nibh. Cras eleifend ultricies molestie.
+      </p>
+      <p>
+        Fusce eu hendrerit nisl. Etiam at arcu in nisl aliquam ultricies sit
+        amet ut orci. Class aptent taciti sociosqu ad litora torquent per
+        conubia nostra, per inceptos himenaeos. Quisque volutpat ex quis ante
+        lobortis dignissim. Fusce pulvinar sodales aliquam. Mauris felis augue,
+        vulputate non nunc vitae, mollis volutpat odio. Suspendisse lobortis
+        ligula nec dolor hendrerit aliquet.
+      </p>
+      <p>
+        Suspendisse gravida, diam vitae rutrum varius, mauris erat lacinia mi,
+        non fringilla nisi lorem eget lectus. Suspendisse iaculis condimentum
+        eros, quis sodales turpis maximus ut. Sed congue posuere mi at congue.
+        Phasellus eget lacus vitae urna molestie aliquet sed sed felis. Donec
+        fermentum urna at dolor condimentum consectetur. Aenean sed pretium
+        tortor. Suspendisse sed lectus risus. Sed sapien erat, tincidunt
+        scelerisque urna vitae, congue condimentum est. Mauris eget urna id
+        purus vestibulum lacinia ut non augue. Nunc id elementum nisi, interdum
+        sollicitudin neque. Pellentesque massa risus, varius nec leo nec, mollis
+        cursus nisl. Mauris aliquet hendrerit risus. Vestibulum congue interdum
+        massa, ac ultrices nibh mollis id. Phasellus justo lorem, malesuada sit
+        amet accumsan vel, mollis ut urna.
+      </p>
+      <p>
+        Curabitur nec tortor sodales, maximus diam in, efficitur quam. Ut rutrum
+        mi id libero tristique luctus. Phasellus et neque sollicitudin purus
+        interdum dapibus eget at ex. Duis non mi at massa molestie tempor a sed
+        tortor. In placerat metus nec condimentum fermentum. Maecenas varius
+        velit in velit tempus dignissim fermentum id justo. Pellentesque
+        dignissim tempus porttitor. Fusce scelerisque bibendum sagittis. Donec
+        tristique tellus ut placerat auctor. Nunc porta tempus risus, at maximus
+        quam lobortis id.
+      </p>
+      <p>
+        Vivamus volutpat tortor sed justo lobortis porttitor. Etiam a aliquam
+        lorem. Nullam rutrum accumsan augue, eget sagittis tellus posuere nec.
+        Aliquam dignissim urna at tellus blandit fermentum. Nunc fermentum justo
+        ut odio pharetra fringilla. Nunc aliquet eleifend magna nec mattis.
+        Pellentesque ac tristique dui. Suspendisse nec nunc et lorem tincidunt
+        congue egestas nec tortor. Suspendisse tincidunt eros felis, nec
+        ultricies turpis varius ut. Morbi leo sapien, eleifend vitae aliquet at,
+        suscipit ut arcu. Nulla pretium placerat nunc, quis tempus lorem semper
+        sit amet. Vestibulum tempus, libero ut ultricies egestas, nisi ex mollis
+        diam, vel porta nisl augue vitae nulla. Nullam ante ipsum, convallis
+        finibus sem id, hendrerit ultrices velit. Praesent tincidunt, urna ac
+        viverra facilisis, nisi massa eleifend sapien, ac congue leo ex vitae
+        lorem. Cras at pulvinar elit, non vestibulum urna.
+      </p>
+      <p>
+        Quisque consectetur posuere erat, eget finibus turpis semper in. Ut
+        commodo leo turpis, a elementum tortor lacinia id. Nunc tempor ligula eu
+        nunc semper porta. Maecenas luctus turpis in justo faucibus iaculis.
+        Integer rutrum, nunc ac tincidunt pellentesque, velit ipsum gravida
+        urna, a pretium nunc eros eget dui. Phasellus maximus consectetur elit,
+        in fermentum odio interdum id. In feugiat tincidunt semper. Phasellus
+        porta ultricies orci a gravida. Etiam lobortis velit sapien, vitae
+        consectetur felis laoreet at. Morbi ac metus velit. Aliquam mollis neque
+        at purus tempus lobortis.
+      </p>
+      <p>
+        Ut ornare justo nec euismod iaculis. Orci varius natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. In sit amet
+        tristique sem. Donec ut tincidunt eros, nec sagittis risus. Morbi at
+        tellus leo. Cras eu feugiat velit. Praesent a fermentum urna, eget
+        dapibus felis. Nullam tempor dictum neque semper faucibus. Vestibulum et
+        sem accumsan, dignissim metus quis, pretium massa. Proin vestibulum
+        convallis ante, at tempor metus rhoncus vitae. Nunc bibendum nisi ac
+        magna viverra condimentum. Sed vehicula neque ex, ut auctor leo mollis
+        eu. Etiam dapibus pellentesque diam, eget cursus odio. Proin sit amet
+        eleifend est. In eget ex vitae tellus mattis dictum.
+      </p>
+      <p>
+        Vestibulum ullamcorper ut felis vitae placerat. Proin suscipit orci
+        sapien, in tincidunt magna tempor at. Proin ut dui sed sapien mattis
+        sollicitudin. Aliquam id velit vitae nunc tincidunt sagittis vitae ut
+        enim. Nulla vulputate placerat mollis. Nullam facilisis nulla iaculis
+        risus molestie pulvinar. Quisque iaculis, dui eget vulputate auctor,
+        lacus turpis ultricies diam, vel faucibus sem nulla quis orci. Nulla et
+        commodo massa.
+      </p>
+      <p>
+        Proin aliquet purus ut eros tincidunt dignissim. Phasellus vel diam quis
+        elit malesuada dignissim. Pellentesque habitant morbi tristique senectus
+        et netus et malesuada fames ac turpis egestas. Sed pretium at purus sed
+        tempus. Curabitur pulvinar euismod augue, sed convallis sem tempus
+        fringilla. Curabitur a dictum arcu. Vivamus finibus ante nec ante
+        consequat venenatis. Nulla mi magna, placerat ut laoreet non, lobortis
+        nec lorem. Curabitur quis pharetra arcu. Sed sit amet diam in diam
+        tincidunt iaculis eget a leo. Fusce laoreet felis vitae tristique
+        efficitur. Fusce feugiat risus non mi scelerisque, nec fringilla risus
+        efficitur. Aenean arcu enim, condimentum a neque scelerisque, dignissim
+        gravida quam. Praesent viverra euismod sapien, quis tristique diam
+        dictum id.
+      </p>
+      <p>
+        Fusce convallis vulputate justo in egestas. Proin at dui volutpat,
+        eleifend lectus at, pretium nulla. Mauris mi ex, rhoncus non sodales
+        nec, volutpat vel libero. Praesent nisl tellus, egestas non sem a,
+        malesuada tincidunt magna. Integer condimentum, lacus nec mattis luctus,
+        urna risus tristique nibh, nec euismod sapien eros a ex. Morbi pharetra,
+        ex eget dapibus aliquam, ligula leo semper turpis, sit amet ullamcorper
+        tortor mi sed neque. Proin congue velit urna, a viverra elit consectetur
+        et. Pellentesque turpis massa, iaculis maximus nibh ac, elementum
+        aliquet sapien. Aliquam at nulla nec nisi accumsan pharetra ac a velit.
+      </p>
+      <p>
+        Quisque ac vulputate sapien, nec suscipit augue. Integer vehicula
+        convallis faucibus. Fusce nec felis auctor, scelerisque augue sit amet,
+        vulputate risus. Nullam suscipit blandit mauris sed ultricies. Sed non
+        magna non lorem molestie vestibulum. Proin dictum malesuada nisl, nec
+        efficitur ipsum venenatis et. Nulla non sapien et tortor ultricies
+        vulputate et id turpis. Etiam consectetur suscipit quam, in fermentum
+        augue tincidunt eget. Nullam mattis gravida gravida. Sed posuere quam at
+        accumsan maximus. Nam commodo elit eu sem dapibus, a ullamcorper tortor
+        elementum. Vivamus et sapien in nibh bibendum semper vel eget lorem. Sed
+        nec risus erat.
+      </p>
+      <p>
+        Sed porttitor elementum tempor. Integer egestas scelerisque turpis ut
+        consectetur. Integer eu nisl nisi. Nunc nec ligula eget neque dapibus
+        feugiat sit amet quis turpis. Nullam volutpat consequat est, et tempor
+        neque egestas vel. In sit amet massa sem. Sed nibh libero, elementum ac
+        maximus a, fringilla vel leo. Praesent at sapien ultrices, interdum elit
+        eget, scelerisque risus.
+      </p>
+      <p>
+        Morbi dictum urna sit amet augue fringilla pellentesque vitae vitae
+        dolor. Aliquam dignissim, odio nec blandit tempor, diam nulla blandit
+        urna, nec sagittis sapien libero id libero. Ut libero sem, ultrices non
+        viverra non, iaculis sed magna. Aenean at dignissim turpis. Donec nibh
+        dolor, sodales vitae mollis ut, sodales nec arcu. Sed vitae nunc
+        ullamcorper augue fermentum tincidunt et et sem. Proin erat dolor,
+        venenatis non leo eget, cursus facilisis urna. Ut non orci sollicitudin,
+        blandit neque et, molestie ipsum. Pellentesque finibus, nulla vitae
+        lobortis luctus, magna est ultrices est, ut aliquam elit nisi sit amet
+        nisl. Suspendisse id sodales nunc. Maecenas tempus mattis diam ac
+        feugiat. Donec quis efficitur lorem. Vestibulum lobortis dapibus sem, a
+        ultricies quam feugiat non. Pellentesque consectetur semper nunc non
+        iaculis.
+      </p>
+      <p>
+        Nulla ullamcorper eros nec ullamcorper pharetra. Quisque eget mi rutrum
+        nunc hendrerit porta vel nec ex. Sed lacinia arcu ex, eu faucibus ante
+        porta quis. Phasellus vitae tincidunt enim. Nunc in purus in justo
+        luctus dignissim. In pellentesque, lorem id dictum consectetur, dolor
+        massa sodales tellus, eget efficitur odio nunc vestibulum nunc. Donec
+        sit amet quam eget erat convallis fringilla. Etiam at pretium sem.
+        Mauris hendrerit justo mauris, ut ornare felis condimentum eu.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas.
+      </p>
+      <p>
+        Cras ut lectus lacus. In maximus, lectus sit amet ultrices venenatis,
+        quam urna feugiat velit, vel tempor libero est ut diam. Praesent et
+        ligula sit amet leo egestas vulputate eget non lorem. Integer a diam ac
+        justo molestie feugiat vel bibendum diam. Donec aliquam, magna vulputate
+        auctor volutpat, sem nunc pharetra libero, at condimentum purus tortor a
+        magna. Maecenas non mollis arcu. Aliquam vulputate neque at lectus
+        gravida sodales.
+      </p>
+      <p>
+        Sed sit amet maximus lectus. Fusce id lorem quis mi sodales varius a
+        quis justo. Proin est dui, porta non nisl sodales, feugiat faucibus
+        nisl. Sed id ex consectetur, faucibus eros sit amet, efficitur quam. Ut
+        vitae venenatis urna, non convallis magna. Integer dapibus ac sem eget
+        dictum. Integer ut nisi tincidunt, sollicitudin dui vel, faucibus purus.
+        Nunc rhoncus turpis eget sem commodo, eu ornare lorem vulputate.
+        Praesent libero nunc, lacinia sit amet lectus vitae, eleifend hendrerit
+        diam. In nec lacus mattis, rutrum orci fermentum, vestibulum eros. Nunc
+        a lobortis purus.
+      </p>
+      <p>
+        Duis nisl diam, pharetra non leo id, facilisis sollicitudin tortor.
+        Donec efficitur augue lorem, lacinia scelerisque magna eleifend in.
+        Nulla vestibulum dolor nec fermentum maximus. Maecenas facilisis, nisi
+        at tempor eleifend, quam tortor ultricies tellus, id convallis enim
+        dolor nec sapien. Pellentesque sed blandit est. Morbi eu nisi
+        sollicitudin, elementum libero et, tempor justo. Donec et justo quis
+        dolor semper tempus et at arcu. Donec in sem id erat maximus feugiat.
+        Cras ultricies nisi turpis, vitae tincidunt sapien mollis ac. Maecenas
+        efficitur sed lectus a ullamcorper. Ut lacus tellus, viverra vel
+        consequat et, suscipit a urna. Proin id ultricies arcu. Etiam non
+        condimentum enim, sodales laoreet orci.
+      </p>
+      <p>
+        Aliquam bibendum bibendum ornare. Aliquam ultricies diam quis dui
+        maximus, nec dictum velit convallis. Proin tempor scelerisque libero ac
+        convallis. Cras sollicitudin dignissim ipsum quis iaculis. Sed aliquam
+        congue magna, vitae malesuada ipsum dignissim porttitor. Maecenas libero
+        ante, faucibus nec pretium ut, sollicitudin sit amet neque. Donec
+        sodales risus neque, a tincidunt purus ultrices quis. In mattis nisi
+        ipsum, et lacinia dui suscipit ac. Donec dictum, dolor id tincidunt
+        accumsan, tortor lorem posuere nisl, id consequat dui nisi fringilla
+        nisi. Fusce arcu justo, ornare nec vehicula eget, egestas tincidunt
+        lorem. Nunc dignissim lobortis velit, id efficitur magna aliquam id.
+        Donec at massa at purus elementum ornare. Cras id finibus sapien. In hac
+        habitasse platea dictumst.
+      </p>
+      <p>
+        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+        inceptos himenaeos. Nunc et urna leo. Etiam mattis ornare eros. Etiam
+        aliquet nibh orci, in iaculis orci pretium id. Etiam nibh elit, viverra
+        non viverra eu, imperdiet eu tellus. Pellentesque lobortis leo a finibus
+        cursus. Orci varius natoque penatibus et magnis dis parturient montes,
+        nascetur ridiculus mus. Donec tristique tempor tristique. Morbi iaculis
+        posuere aliquet. Donec mattis sed dui a fringilla. Sed urna tellus,
+        pulvinar in mollis ut, congue vel risus.
+      </p>
+      <p>
+        Nullam scelerisque quam at lorem tempus, sed vulputate dui venenatis.
+        Donec porttitor, tellus at vehicula laoreet, lacus nulla consectetur
+        nisi, ut posuere massa turpis a arcu. Quisque tellus arcu, consectetur
+        vitae molestie eu, posuere vitae nunc. Sed vestibulum justo ultricies
+        magna rutrum molestie. Pellentesque lobortis erat vel fermentum
+        faucibus. Phasellus in arcu sit amet quam tincidunt sollicitudin quis
+        sed ipsum. Nullam bibendum ac metus et mollis. Nunc tempor vel mi id
+        fermentum. Morbi maximus turpis lobortis, pretium nibh ac, blandit
+        metus. In elementum nisl ac ex maximus, in commodo libero egestas. Morbi
+        molestie cursus massa, laoreet tempor tortor vestibulum venenatis.
+        Curabitur semper fringilla dolor, ut sagittis lorem elementum ut.
+      </p>
+      <p>
+        Duis porttitor massa nulla, id congue erat luctus at. Aliquam id
+        tristique quam. Morbi pharetra scelerisque elit. Donec porttitor ipsum
+        vitae risus hendrerit faucibus. Praesent finibus placerat leo nec
+        facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
+        ultrices posuere cubilia curae; Proin molestie interdum turpis id
+        ornare. Ut vestibulum libero in magna porta, sed porta dolor viverra.
+      </p>
+      <p>
+        Duis eget congue orci, ac malesuada leo. Fusce ut mattis nibh. Ut
+        pretium lectus in neque hendrerit, ut eleifend neque ultrices. Nam id
+        sollicitudin est. Suspendisse eget vehicula urna, a eleifend diam.
+        Aenean nibh nisl, finibus ullamcorper cursus sit amet, efficitur gravida
+        nulla. Proin leo massa, volutpat sit amet dolor ut, suscipit rutrum
+        justo. Proin nec elit blandit, porttitor ipsum sed, sodales ipsum. In
+        venenatis dolor lacus. Vestibulum et volutpat augue. Cras vehicula sem
+        ac augue vestibulum, id feugiat elit consectetur. Nullam consectetur
+        elit enim, eget aliquam eros venenatis eget.
+      </p>
+      <p>
+        Donec sodales ipsum ut ante aliquam, non molestie massa faucibus.
+        Aliquam eget vehicula metus. Aenean lacinia nulla quis nulla ultricies
+        tristique. Vestibulum sit amet consequat nunc. Nullam sagittis dolor at
+        sodales varius. Integer odio eros, sodales quis orci id, commodo luctus
+        diam. Nullam dapibus ullamcorper lobortis. Suspendisse posuere ipsum
+        ipsum, ac ultrices quam porttitor quis. Maecenas auctor justo et egestas
+        congue. Etiam pharetra libero eget nisl rhoncus congue. Cras vehicula
+        dolor finibus tortor dignissim ultrices.
+      </p>
+      <p>
+        Vestibulum quis aliquet neque, non pretium ligula. Donec imperdiet
+        tellus nec dolor accumsan, at congue ante euismod. Praesent egestas ac
+        lectus in auctor. Praesent euismod faucibus enim eget vulputate. Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae convallis
+        tortor. Sed eleifend tellus quis nisl faucibus, sit amet aliquet tellus
+        placerat. Morbi ultrices enim mauris, et tincidunt lorem semper sed.
+      </p>
+      <p>
+        Duis tincidunt ligula lacus, a cursus tortor tincidunt ac. Duis nulla
+        nulla, viverra sit amet augue vitae, lobortis consequat nibh. Morbi
+        dignissim, est nec consequat elementum, dolor est tempus velit, eu
+        laoreet mauris nibh eu nunc. Aenean finibus at justo eget consectetur.
+        Nam cursus sem felis, vitae blandit quam tincidunt sed. Praesent
+        bibendum luctus enim ut tempor. Phasellus tincidunt lectus vel laoreet
+        elementum. Maecenas sed quam sodales, porttitor augue in, faucibus eros.
+        Cras lacinia tortor sed lacus auctor, sit amet imperdiet dolor
+        hendrerit.
+      </p>
+      <p>
+        Aliquam vel porta libero. In nec aliquam nisi. Donec pulvinar sapien
+        lacus, eu condimentum enim vestibulum eu. Aliquam erat volutpat. Aliquam
+        erat volutpat. Integer ac nisl ipsum. Nulla at congue quam. Etiam nec
+        libero ac dolor efficitur sodales ut et diam. Cras in sodales dolor.
+        Quisque elementum mattis elit non sagittis.
+      </p>
+      <p>
+        Aliquam maximus nisl semper tristique blandit. Vivamus et porttitor
+        urna. Nulla facilisi. Nullam vitae condimentum purus. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Nulla dignissim dolor id felis
+        pellentesque, quis sodales dolor tincidunt. Morbi non posuere est.
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia curae;
+      </p>
+      <p>
+        Fusce nec metus sit amet ligula pulvinar lobortis. Suspendisse dictum
+        lorem vitae quam tempor facilisis. Duis cursus eu lacus in volutpat.
+        Suspendisse fermentum nulla a purus vestibulum, in blandit lacus
+        hendrerit. Praesent rhoncus, nulla non varius dapibus, sapien nulla
+        blandit lorem, a aliquet ex ligula a sapien. Vivamus ac tortor
+        ultricies, molestie ex vitae, placerat elit. Ut lobortis nisl nec sapien
+        pretium ullamcorper convallis sed tortor. Suspendisse blandit urna eu
+        dolor pharetra, a pretium nibh consequat. Integer at vulputate erat. Nam
+        in mi urna. Aenean lectus mauris, condimentum in porttitor et, posuere
+        vitae elit. Aenean tempor ipsum ut pharetra porta.
+      </p>
+      <p>
+        Fusce efficitur elementum lectus, vitae euismod leo luctus quis. Duis
+        faucibus, metus non rhoncus ornare, neque sapien pretium nisi, ut
+        ullamcorper massa justo at turpis. Maecenas vestibulum facilisis nulla
+        vel tristique. Aliquam vitae mi dolor. Aliquam imperdiet ullamcorper
+        auctor. Sed nibh nulla, imperdiet vel sagittis in, dapibus a turpis. Ut
+        pulvinar ac dolor ac euismod. Morbi quis euismod nisl, sagittis interdum
+        velit. Integer condimentum quam ac quam malesuada, in ultrices risus
+        pulvinar.
+      </p>
+    </div>
+  );
+}
diff --git a/fixtures/flight/src/Navigate.js b/fixtures/flight/src/Navigate.js
new file mode 100644
index 00000000000..4436b9fdf7d
--- /dev/null
+++ b/fixtures/flight/src/Navigate.js
@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import Container from './Container.js';
+
+export function Navigate() {
+  /** Repro for https://issues.chromium.org/u/1/issues/419746417 */
+  function provokeChromeCrash() {
+    React.startTransition(async () => {
+      console.log('Default transition triggered');
+
+      await new Promise(resolve => {
+        setTimeout(
+          () => {
+            history.pushState(
+              {},
+              '',
+              `?chrome-crash-419746417=${performance.now()}`
+            );
+          },
+          // This needs to happen before React's default transition indicator
+          // is displayed but after it's scheduled.
+          100 + -50
+        );
+
+        setTimeout(() => {
+          console.log('Default transition completed');
+          resolve();
+        }, 1000);
+      });
+    });
+  }
+
+  return (
+    <Container>
+      <h2>Navigation fixture</h2>
+      <button onClick={provokeChromeCrash}>Provoke Chrome Crash (fixed)</button>
+    </Container>
+  );
+}
diff --git a/fixtures/flight/src/ServerState.js b/fixtures/flight/src/ServerState.js
new file mode 100644
index 00000000000..3d4c7162262
--- /dev/null
+++ b/fixtures/flight/src/ServerState.js
@@ -0,0 +1,9 @@
+let serverState = 'Hello World';
+
+export function setServerState(message) {
+  serverState = message;
+}
+
+export function getServerState() {
+  return serverState;
+}
diff --git a/fixtures/flight/src/ShowMore.js b/fixtures/flight/src/ShowMore.js
new file mode 100644
index 00000000000..1bb330d3d68
--- /dev/null
+++ b/fixtures/flight/src/ShowMore.js
@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+
+import Container from './Container.js';
+
+export default function ShowMore({children}) {
+  const [show, setShow] = React.useState(false);
+  if (!show) {
+    return <button onClick={() => setShow(true)}>Show More</button>;
+  }
+  return <Container>{children}</Container>;
+}
diff --git a/fixtures/flight/src/actions.js b/fixtures/flight/src/actions.js
new file mode 100644
index 00000000000..0b9b9c315d6
--- /dev/null
+++ b/fixtures/flight/src/actions.js
@@ -0,0 +1,32 @@
+'use server';
+
+import {setServerState} from './ServerState.js';
+
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export async function like() {
+  // Test loading state
+  await sleep(1000);
+  setServerState('Liked!');
+  return new Promise((resolve, reject) => resolve('Liked'));
+}
+
+export async function greet(formData) {
+  const name = formData.get('name') || 'you';
+  setServerState('Hi ' + name);
+  const file = formData.get('file');
+  if (file) {
+    return `Ok, ${name}, here is ${file.name}:
+      ${(await file.text()).toUpperCase()}
+    `;
+  }
+  return 'Hi ' + name + '!';
+}
+
+export async function increment(n) {
+  // Test loading state
+  await sleep(1000);
+  return n + 1;
+}
diff --git a/fixtures/flight/src/cjs/Counter3.js b/fixtures/flight/src/cjs/Counter3.js
new file mode 100644
index 00000000000..5cfd0d8d970
--- /dev/null
+++ b/fixtures/flight/src/cjs/Counter3.js
@@ -0,0 +1,5 @@
+"use client";
+// CJS-ESM async module
+module.exports = import('../Counter.js').then(m => {
+  return m.Counter
+});
diff --git a/fixtures/flight/src/cjs/Note.js b/fixtures/flight/src/cjs/Note.js
new file mode 100644
index 00000000000..181b4b5dfb0
--- /dev/null
+++ b/fixtures/flight/src/cjs/Note.js
@@ -0,0 +1,11 @@
+'use client';
+
+var React = require('react');
+
+function Note() {
+  return 'This component was exported on a commonJS module and imported into ESM as a named import.';
+}
+
+module.exports = {
+  Note,
+};
diff --git a/fixtures/flight/src/cjs/package.json b/fixtures/flight/src/cjs/package.json
new file mode 100644
index 00000000000..96431b98ca2
--- /dev/null
+++ b/fixtures/flight/src/cjs/package.json
@@ -0,0 +1,3 @@
+{
+  "type":"commonjs"
+}
\ No newline at end of file
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
new file mode 100644
index 00000000000..447b1957c8c
--- /dev/null
+++ b/fixtures/flight/src/index.js
@@ -0,0 +1,161 @@
+import * as React from 'react';
+import {use, Suspense, useState, startTransition, Profiler} from 'react';
+import ReactDOM from 'react-dom/client';
+import {createFromFetch, encodeReply} from 'react-server-dom-webpack/client';
+
+// TODO: This should be a dependency of the App but we haven't implemented CSS in Node yet.
+import './style.css';
+
+function findSourceMapURL(fileName) {
+  return (
+    document.location.origin +
+    '/source-maps?name=' +
+    encodeURIComponent(fileName)
+  );
+}
+
+async function createWebSocketStream(url) {
+  const ws = new WebSocket(url);
+  ws.binaryType = 'arraybuffer';
+
+  await new Promise((resolve, reject) => {
+    ws.addEventListener('open', resolve, {once: true});
+    ws.addEventListener('error', reject, {once: true});
+  });
+
+  const writable = new WritableStream({
+    write(chunk) {
+      ws.send(chunk);
+    },
+    close() {
+      ws.close();
+    },
+    abort(reason) {
+      ws.close(1000, reason && String(reason));
+    },
+  });
+
+  const readable = new ReadableStream({
+    start(controller) {
+      ws.addEventListener('message', event => {
+        controller.enqueue(event.data);
+      });
+      ws.addEventListener('close', () => {
+        controller.close();
+      });
+      ws.addEventListener('error', err => {
+        controller.error(err);
+      });
+    },
+  });
+
+  return {readable, writable};
+}
+
+let updateRoot;
+async function callServer(id, args) {
+  let response;
+  if (process.env.NODE_ENV === 'development') {
+    const requestId = crypto.randomUUID();
+    const debugChannel = await createWebSocketStream(
+      `ws://localhost:3001/debug-channel?id=${requestId}`
+    );
+    response = createFromFetch(
+      fetch('/', {
+        method: 'POST',
+        headers: {
+          Accept: 'text/x-component',
+          'rsc-action': id,
+          'rsc-request-id': requestId,
+        },
+        body: await encodeReply(args),
+      }),
+      {
+        callServer,
+        debugChannel,
+        findSourceMapURL,
+      }
+    );
+  } else {
+    response = createFromFetch(
+      fetch('/', {
+        method: 'POST',
+        headers: {
+          Accept: 'text/x-component',
+          'rsc-action': id,
+        },
+        body: await encodeReply(args),
+      }),
+      {
+        callServer,
+        findSourceMapURL,
+      }
+    );
+  }
+  const {returnValue, root} = await response;
+  // Refresh the tree with the new RSC payload.
+  startTransition(() => {
+    updateRoot(root);
+  });
+  return returnValue;
+}
+
+function Shell({data}) {
+  const [root, setRoot] = useState(data);
+  updateRoot = setRoot;
+  return root;
+}
+
+async function hydrateApp() {
+  let response;
+  if (process.env.NODE_ENV === 'development') {
+    const requestId = crypto.randomUUID();
+    const debugChannel = await createWebSocketStream(
+      `ws://localhost:3001/debug-channel?id=${requestId}`
+    );
+    response = createFromFetch(
+      fetch('/', {
+        headers: {
+          Accept: 'text/x-component',
+          'rsc-request-id': requestId,
+        },
+      }),
+      {
+        callServer,
+        debugChannel,
+        findSourceMapURL,
+      }
+    );
+  } else {
+    response = createFromFetch(
+      fetch('/', {
+        headers: {
+          Accept: 'text/x-component',
+        },
+      }),
+      {
+        callServer,
+        findSourceMapURL,
+      }
+    );
+  }
+  const {root, returnValue, formState} = await response;
+
+  ReactDOM.hydrateRoot(
+    document,
+    <Profiler id="root">
+      <Shell data={root} />
+    </Profiler>,
+    {
+      // TODO: This part doesn't actually work because the server only returns
+      // form state during the request that submitted the form. Which means it
+      // the state needs to be transported as part of the HTML stream. We intend
+      // to add a feature to Fizz for this, but for now it's up to the
+      // metaframework to implement correctly.
+      formState: formState,
+    }
+  );
+}
+
+// Remove this line to simulate MPA behavior
+hydrateApp();
diff --git a/fixtures/flight/src/library.js b/fixtures/flight/src/library.js
new file mode 100644
index 00000000000..744205d1c40
--- /dev/null
+++ b/fixtures/flight/src/library.js
@@ -0,0 +1,9 @@
+export async function sdkMethod(input, init) {
+  return fetch(input, init).then(async response => {
+    await new Promise(resolve => {
+      setTimeout(resolve, 10);
+    });
+
+    return response;
+  });
+}
diff --git a/fixtures/flight/src/style.css b/fixtures/flight/src/style.css
new file mode 100644
index 00000000000..37ad792deda
--- /dev/null
+++ b/fixtures/flight/src/style.css
@@ -0,0 +1,3 @@
+body {
+  font-family: Helvetica;
+}
\ No newline at end of file
diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock
new file mode 100644
index 00000000000..3acf46a0a00
--- /dev/null
+++ b/fixtures/flight/yarn.lock
@@ -0,0 +1,9551 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@adobe/css-tools@^4.0.1":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
+  integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@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/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.8.3":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/code-frame@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658"
+  integrity sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==
+  dependencies:
+    "@babel/highlight" "^7.22.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/compat-data@^7.17.7", "@babel/compat-data@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
+  integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
+
+"@babel/compat-data@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.5.tgz#b1f6c86a02d85d2dd3368a2b67c09add8cd0c255"
+  integrity sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==
+
+"@babel/core@^7.1.0":
+  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/core@^7.12.3":
+  version "7.12.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
+  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.5"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.5"
+    "@babel/parser" "^7.12.7"
+    "@babel/template" "^7.12.7"
+    "@babel/traverse" "^7.12.9"
+    "@babel/types" "^7.12.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.10.tgz#39ad504991d77f1f3da91be0b8b949a5bc466fb8"
+  integrity sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.10"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helpers" "^7.18.9"
+    "@babel/parser" "^7.18.10"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.10"
+    "@babel/types" "^7.18.10"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
+"@babel/generator@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de"
+  integrity sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A==
+  dependencies:
+    "@babel/types" "^7.12.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.18.10":
+  version "7.18.12"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.12.tgz#fa58daa303757bd6f5e4bbca91b342040463d9f4"
+  integrity sha512-dfQ8ebCN98SvyL7IxNMCUtZQSq5R7kxgN+r8qYTGDmmSion1hX2C0zq2yo1bsCDhXixokv1SAWTZUMYbO/V5zg==
+  dependencies:
+    "@babel/types" "^7.18.10"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/generator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.5.tgz#1e7bf768688acfb05cf30b2369ef855e82d984f7"
+  integrity sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==
+  dependencies:
+    "@babel/types" "^7.22.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
+"@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.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
+  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz#a3f4758efdd0190d8927fcffd261755937c71878"
+  integrity sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
+  integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
+"@babel/helper-compilation-targets@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz#fc7319fc54c5e2fa14b2909cf3c5fd3046813e02"
+  integrity sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==
+  dependencies:
+    "@babel/compat-data" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.9.tgz#d802ee16a64a9e824fcbf0a2ffc92f19d58550ce"
+  integrity sha512-WvypNAYaVh23QcjpMR24CwZY2Nz6hqdOcFdPbNpV56hL5H6KiFheO7Xm1aPdlLQ7d5emYZX7VZwPp9x3z+2opw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
+"@babel/helper-create-class-features-plugin@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz#2192a1970ece4685fbff85b48da2c32fcb130b7c"
+  integrity sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-member-expression-to-functions" "^7.22.5"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    semver "^6.3.0"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz#3e35f4e04acbbf25f1b3534a657610a000543d3c"
+  integrity sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.1.0"
+
+"@babel/helper-create-regexp-features-plugin@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz#bb2bf0debfe39b831986a4efbf4066586819c6e4"
+  integrity sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    regexpu-core "^5.3.1"
+    semver "^6.3.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-polyfill-provider@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz#bd10d0aca18e8ce012755395b05a79f45eca5073"
+  integrity sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
+"@babel/helper-define-polyfill-provider@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz#487053f103110f25b9755c5980e031e93ced24d8"
+  integrity sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
+  integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+
+"@babel/helper-explode-assignable-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
+  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
+  integrity sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-function-name@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
+  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+  dependencies:
+    "@babel/template" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@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.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@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.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-member-expression-to-functions@^7.12.1":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz#aa77bd0396ec8114e5e30787efa78599d874a855"
+  integrity sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==
+  dependencies:
+    "@babel/types" "^7.12.7"
+
+"@babel/helper-member-expression-to-functions@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815"
+  integrity sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==
+  dependencies:
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-member-expression-to-functions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz#0a7c56117cad3372fbf8d2fb4bf8f8d64a1e76b2"
+  integrity sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-module-imports@^7.12.1":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
+  integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
+  dependencies:
+    "@babel/types" "^7.12.5"
+
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-imports@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
+  integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-module-transforms@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
+  integrity sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-replace-supers" "^7.12.1"
+    "@babel/helper-simple-access" "^7.12.1"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/helper-validator-identifier" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
+    lodash "^4.17.19"
+
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz#5a1079c005135ed627442df31a42887e80fcb712"
+  integrity sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-module-transforms@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz#0f65daa0716961b6e96b164034e737f60a80d2ef"
+  integrity sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz#7f94ae5e08721a49467346aa04fd22f750033b9c"
+  integrity sha512-I5xc9oSJ2h59OwyUqjv95HRyzxj53DAubUERgQMrpcCEYQyToeHA+NEcUEsVWB4j53RDeskeBJ0SgRAYHDBckw==
+  dependencies:
+    "@babel/types" "^7.12.7"
+
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-optimise-call-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
+  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@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-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+
+"@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
+"@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.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
+  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-wrap-function" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-remap-async-to-generator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz#14a38141a7bf2165ad38da61d61cf27b43015da2"
+  integrity sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-wrap-function" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-replace-supers@^7.12.1":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.12.5.tgz#f009a17543bbbbce16b06206ae73b63d3fca68d9"
+  integrity sha512-5YILoed0ZyIpF4gKcpZitEnXEJ9UoDRki1Ey6xz46rxOzfNMAhVIJMoune1hmPVxh40LRv1+oafz7UsWX+vyWA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.12.1"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.12.5"
+    "@babel/types" "^7.12.5"
+
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz#1092e002feca980fbbb0bd4d51b74a65c6a500e6"
+  integrity sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-replace-supers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz#71bc5fb348856dea9fdc4eafd7e2e49f585145dc"
+  integrity sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-member-expression-to-functions" "^7.22.5"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-simple-access@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz#32427e5aa61547d38eb1e6eaf5fd1426fdad9136"
+  integrity sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==
+  dependencies:
+    "@babel/types" "^7.12.1"
+
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz#778d87b3a758d90b471e7b9918f34a9a02eb5818"
+  integrity sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==
+  dependencies:
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0", "@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
+  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-split-export-declaration@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz#88cf11050edb95ed08d596f7a044462189127a08"
+  integrity sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@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-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
+"@babel/helper-validator-identifier@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
+  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helper-validator-option@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
+  integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
+
+"@babel/helper-wrap-function@^7.18.9":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.11.tgz#bff23ace436e3f6aefb61f85ffae2291c80ed1fb"
+  integrity sha512-oBUlbv+rjZLh2Ks9SKi4aL7eKaAXBWleHzU89mP0G6BMUlRxSckk9tSIkgDGydhgFxHuGSlBQZfnaD47oBEB7w==
+  dependencies:
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.11"
+    "@babel/types" "^7.18.10"
+
+"@babel/helper-wrap-function@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz#44d205af19ed8d872b4eefb0d2fa65f45eb34f06"
+  integrity sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw==
+  dependencies:
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@babel/helpers@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.5.tgz#1a1ba4a768d9b58310eda516c449913fe647116e"
+  integrity sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.5"
+    "@babel/types" "^7.12.5"
+
+"@babel/helpers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.9.tgz#4bef3b893f253a1eced04516824ede94dcfe7ff9"
+  integrity sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@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":
+  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/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.5.tgz#aa6c05c5407a67ebce408162b7ede789b4d22031"
+  integrity sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.5"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.2.tgz#85c5c47af6d244fab77bce6b9bd830e38c978409"
+
+"@babel/parser@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.7.tgz#fee7b39fe809d0e73e5b25eecaf5780ef3d73056"
+  integrity sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==
+
+"@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.11":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
+  integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
+
+"@babel/parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
+  integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
+
+"@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-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
+  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e"
+  integrity sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
+  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz#fef09f9499b1f1c930da8a0c419db42167d792ca"
+  integrity sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-transform-optional-chaining" "^7.22.5"
+
+"@babel/plugin-proposal-async-generator-functions@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz#85ea478c98b0095c3e4102bff3b67d306ed24952"
+  integrity sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@^7.16.0", "@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-class-static-block@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
+  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-proposal-decorators@^7.16.4":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.22.5.tgz#dc8cdda048e5aea947efda920e030199806b868d"
+  integrity sha512-h8hlezQ4dl6ixodgXkH8lUfcD7x+WAuIqPUjwGoItynrXOAv4a4Tci1zA/qjzQjjcl0v3QpLdc2LM6ZACQuY7A==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/plugin-syntax-decorators" "^7.22.5"
+
+"@babel/plugin-proposal-dynamic-import@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
+  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
+  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
+  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.16.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@^7.16.0", "@babel/plugin-proposal-numeric-separator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz#f9434f6beb2c8cae9dfcf97d2a5941bbbf9ad4e7"
+  integrity sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.18.8"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
+  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@^7.16.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993"
+  integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.16.0", "@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
+  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
+  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  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.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.1.tgz#bcb297c5366e79bebadef509549cd93b04f19978"
+  integrity sha512-U40A76x5gTwmESz+qiqssqmeEsKvcSyvtgktrm0uzcARAmM9I1jR221f6Oq+GmHrcD+LvZDag1UTOTe2fL3TeA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-decorators@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.22.5.tgz#329fe2907c73de184033775637dbbc507f09116a"
+  integrity sha512-avpUOBS7IU6al8MmF1XpAyj9QYeLPuSDJI5D4pVMSMdL7xQokKqJPYQC67RCT0aCTashUXPiGwMJ0DEXXCEmMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz#163b820b9e7696ce134df3ee716d9c0c98035859"
+  integrity sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-assertions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz#cd6190500a4fa2fe31990a963ffab4b63e4505e4"
+  integrity sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-import-assertions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz#07d252e2aa0bc6125567f742cd58619cb14dce98"
+  integrity sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-attributes@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz#ab840248d834410b829f569f5262b9e517555ecb"
+  integrity sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-jsx@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz#a6b68e84fb76e759fc3b93e901876ffabbe1d918"
+  integrity sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.1.tgz#dd6c0b357ac1bb142d98537450a319625d13d2a0"
+  integrity sha512-i7ooMZFS+a/Om0crxZodrTzNEPJHZrlMVGMTEpFAj6rYY/bKCddB0Dk/YxfPuYXOopuhKk/e1jV6h+WUU9XN3A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-typescript@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz#aac8d383b062c5072c647a31ef990c1d0af90272"
+  integrity sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz#1c09cd25795c7c2b8a4ba9ae49394576d4133285"
+  integrity sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
+  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz#e5ba566d0c58a5b2ba2a8b795450641950b71958"
+  integrity sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-async-generator-functions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.5.tgz#7336356d23380eda9a56314974f053a020dab0c3"
+  integrity sha512-gGOEvFzm3fWoyD5uZq7vVTD57pPJ3PczPUD/xCFGjzBpUosnklmXyKnGQbbbGs1NPNPskFex0j93yKbHt0cHyg==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-remap-async-to-generator" "^7.22.5"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-transform-async-to-generator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
+  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-remap-async-to-generator" "^7.18.6"
+
+"@babel/plugin-transform-async-to-generator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz#c7a85f44e46f8952f6d27fe57c2ed3cc084c3775"
+  integrity sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-remap-async-to-generator" "^7.22.5"
+
+"@babel/plugin-transform-block-scoped-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-block-scoped-functions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz#27978075bfaeb9fa586d3cb63a3d30c1de580024"
+  integrity sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-block-scoping@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz#f9b7e018ac3f373c81452d6ada8bd5a18928926d"
+  integrity sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-block-scoping@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz#8bfc793b3a4b2742c0983fadc1480d843ecea31b"
+  integrity sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-class-properties@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz#97a56e31ad8c9dc06a0b3710ce7803d5a48cca77"
+  integrity sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-class-static-block@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz#3e40c46f048403472d6f4183116d5e46b1bff5ba"
+  integrity sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz#90818efc5b9746879b869d5ce83eb2aa48bbc3da"
+  integrity sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-classes@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz#635d4e98da741fad814984639f4c0149eb0135e1"
+  integrity sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
+  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-computed-properties@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz#cd1e994bf9f316bd1c2dafcd02063ec261bb3869"
+  integrity sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/template" "^7.22.5"
+
+"@babel/plugin-transform-destructuring@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.9.tgz#68906549c021cb231bee1db21d3b5b095f8ee292"
+  integrity sha512-p5VCYNddPLkZTq4XymQIaIfZNJwT9YsjkPOhkVEqt6QIpQFZVM9IltqqYpOEkJoN1DPznmxUDyZ5CTZs/ZCuHA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-destructuring@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz#d3aca7438f6c26c78cdd0b0ba920a336001b27cc"
+  integrity sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-dotall-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
+  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-dotall-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz#dbb4f0e45766eb544e193fb00e65a1dd3b2a4165"
+  integrity sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-dotall-regex@^7.4.4":
+  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.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
+  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-duplicate-keys@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz#b6e6428d9416f5f0bba19c70d1e6e7e0b88ab285"
+  integrity sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-dynamic-import@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz#d6908a8916a810468c4edff73b5b75bda6ad393e"
+  integrity sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-transform-exponentiation-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
+  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-exponentiation-operator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz#402432ad544a1f9a480da865fda26be653e48f6a"
+  integrity sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-export-namespace-from@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz#57c41cb1d0613d22f548fddd8b288eedb9973a5b"
+  integrity sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-transform-flow-strip-types@^7.16.0":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz#0bb17110c7bf5b35a60754b2f00c58302381dee2"
+  integrity sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-flow" "^7.22.5"
+
+"@babel/plugin-transform-for-of@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
+  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-for-of@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz#ab1b8a200a8f990137aff9a084f8de4099ab173f"
+  integrity sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-function-name@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz#935189af68b01898e0d6d99658db6b164205c143"
+  integrity sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-json-strings@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz#14b64352fdf7e1f737eed68de1a1468bd2a77ec0"
+  integrity sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-transform-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz#e9341f4b5a167952576e23db8d435849b1dd7920"
+  integrity sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-logical-assignment-operators@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz#66ae5f068fd5a9a5dc570df16f56c2a8462a9d6c"
+  integrity sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-transform-member-expression-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-member-expression-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz#4fcc9050eded981a468347dd374539ed3e058def"
+  integrity sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-modules-amd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz#8c91f8c5115d2202f277549848874027d7172d21"
+  integrity sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-amd@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz#4e045f55dcf98afd00f85691a68fc0780704f526"
+  integrity sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-modules-commonjs@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz#afd243afba166cca69892e24a8fd8c9f2ca87883"
+  integrity sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz#7d9875908d19b8c0536085af7b053fd5bd651bfa"
+  integrity sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
+
+"@babel/plugin-transform-modules-systemjs@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz#545df284a7ac6a05125e3e405e536c5853099a06"
+  integrity sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz#18c31410b5e579a0092638f95c896c2a98a5d496"
+  integrity sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+
+"@babel/plugin-transform-modules-umd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
+  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-modules-umd@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz#4694ae40a87b1745e3775b6a7fe96400315d4f98"
+  integrity sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz#c89bfbc7cc6805d692f3a49bc5fc1b630007246d"
+  integrity sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
+  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-new-target@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
+  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-new-target@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz#1b248acea54ce44ea06dfd37247ba089fcf9758d"
+  integrity sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-nullish-coalescing-operator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz#f8872c65776e0b552e0849d7596cddd416c3e381"
+  integrity sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-transform-numeric-separator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz#57226a2ed9e512b9b446517ab6fa2d17abb83f58"
+  integrity sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-transform-object-rest-spread@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz#9686dc3447df4753b0b2a2fae7e8bc33cdc1f2e1"
+  integrity sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==
+  dependencies:
+    "@babel/compat-data" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.22.5"
+
+"@babel/plugin-transform-object-super@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+
+"@babel/plugin-transform-object-super@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz#794a8d2fcb5d0835af722173c1a9d704f44e218c"
+  integrity sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.5"
+
+"@babel/plugin-transform-optional-catch-binding@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz#842080be3076703be0eaf32ead6ac8174edee333"
+  integrity sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-transform-optional-chaining@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz#1003762b9c14295501beb41be72426736bedd1e0"
+  integrity sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-transform-parameters@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz#ee9f1a0ce6d78af58d0956a9378ea3427cccb48a"
+  integrity sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-parameters@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz#c3542dd3c39b42c8069936e48717a8d179d63a18"
+  integrity sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-private-methods@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz#21c8af791f76674420a147ae62e9935d790f8722"
+  integrity sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-private-property-in-object@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz#07a77f28cbb251546a43d175a1dda4cf3ef83e32"
+  integrity sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-property-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz#b5ddabd73a4f7f26cd0e20f5db48290b88732766"
+  integrity sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-react-constant-elements@^7.12.1":
+  version "7.18.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.18.12.tgz#edf3bec47eb98f14e84fa0af137fcc6aad8e0443"
+  integrity sha512-Q99U9/ttiu+LMnRU8psd23HhvwXmKWDQIpocm0JKaICcZHnw+mdQbHm6xnSy7dOl8I5PELakYtNBubNQlBXbZw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz#3c4326f9fce31c7968d6cb9debcaf32d9e279a2b"
+  integrity sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-react-display-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-react-jsx-development@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz#dbe5c972811e49c7405b630e4d0d2e1380c0ddc5"
+  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+
+"@babel/plugin-transform-react-jsx-development@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz#e716b6edbef972a92165cd69d92f1255f7e73e87"
+  integrity sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.22.5"
+
+"@babel/plugin-transform-react-jsx@^7.18.6":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.10.tgz#ea47b2c4197102c196cbd10db9b3bb20daa820f1"
+  integrity sha512-gCy7Iikrpu3IZjYZolFE4M1Sm+nrh1/6za2Ewj77Z+XirT4TsbJcvOFOyF+fRPwU6AKKK136CZxx6L8AbSFG6A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/types" "^7.18.10"
+
+"@babel/plugin-transform-react-jsx@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz#932c291eb6dd1153359e2a90cb5e557dcf068416"
+  integrity sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@babel/plugin-transform-react-pure-annotations@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz#561af267f19f3e5d59291f9950fd7b9663d0d844"
+  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-react-pure-annotations@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz#1f58363eef6626d6fa517b95ac66fe94685e32c0"
+  integrity sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-regenerator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
+  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    regenerator-transform "^0.15.0"
+
+"@babel/plugin-transform-regenerator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz#cd8a68b228a5f75fa01420e8cc2fc400f0fc32aa"
+  integrity sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    regenerator-transform "^0.15.1"
+
+"@babel/plugin-transform-reserved-words@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
+  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-reserved-words@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz#832cd35b81c287c4bcd09ce03e22199641f964fb"
+  integrity sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-runtime@^7.16.4":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.5.tgz#ca975fb5e260044473c8142e1b18b567d33c2a3b"
+  integrity sha512-bg4Wxd1FWeFx3daHFTWk1pkSWK/AyQuiyAoeZAOkAOUBjnZPH6KT7eMxouV47tQ6hl6ax2zyAWBdWZXbrvXlaw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    babel-plugin-polyfill-corejs2 "^0.4.3"
+    babel-plugin-polyfill-corejs3 "^0.8.1"
+    babel-plugin-polyfill-regenerator "^0.5.0"
+    semver "^6.3.0"
+
+"@babel/plugin-transform-shorthand-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-shorthand-properties@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz#6e277654be82b5559fc4b9f58088507c24f0c624"
+  integrity sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-spread@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz#6ea7a6297740f381c540ac56caf75b05b74fb664"
+  integrity sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+
+"@babel/plugin-transform-spread@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz#6487fd29f229c95e284ba6c98d65eafb893fea6b"
+  integrity sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+
+"@babel/plugin-transform-sticky-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
+  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-sticky-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz#295aba1595bfc8197abd02eae5fc288c0deb26aa"
+  integrity sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-template-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-template-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz#8f38cf291e5f7a8e60e9f733193f0bcc10909bff"
+  integrity sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-typeof-symbol@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
+  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-typeof-symbol@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz#5e2ba478da4b603af8673ff7c54f75a97b716b34"
+  integrity sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-typescript@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.5.tgz#5c0f7adfc1b5f38c4dbc8f79b1f0f8074134bd7d"
+  integrity sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-typescript" "^7.22.5"
+
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
+  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-unicode-escapes@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz#ce0c248522b1cb22c7c992d88301a5ead70e806c"
+  integrity sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-property-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz#098898f74d5c1e86660dc112057b2d11227f1c81"
+  integrity sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
+  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-unicode-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz#ce7e7bb3ef208c4ff67e02a22816656256d7a183"
+  integrity sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz#77788060e511b708ffc7d42fdfbc5b37c3004e91"
+  integrity sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/preset-env@^7.12.1":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.10.tgz#83b8dfe70d7eea1aae5a10635ab0a5fe60dfc0f4"
+  integrity sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-async-generator-functions" "^7.18.10"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.18.9"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.18.6"
+    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.18.9"
+    "@babel/plugin-transform-classes" "^7.18.9"
+    "@babel/plugin-transform-computed-properties" "^7.18.9"
+    "@babel/plugin-transform-destructuring" "^7.18.9"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.18.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.18.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.18.9"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.18.6"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.18.8"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.18.9"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.18.10"
+    babel-plugin-polyfill-corejs2 "^0.3.2"
+    babel-plugin-polyfill-corejs3 "^0.5.3"
+    babel-plugin-polyfill-regenerator "^0.4.0"
+    core-js-compat "^3.22.1"
+    semver "^6.3.0"
+
+"@babel/preset-env@^7.16.4":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.5.tgz#3da66078b181f3d62512c51cf7014392c511504e"
+  integrity sha512-fj06hw89dpiZzGZtxn+QybifF07nNiZjZ7sazs2aVDcysAZVGjW7+7iFYxg6GLNM47R/thYfLdrXc+2f11Vi9A==
+  dependencies:
+    "@babel/compat-data" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.5"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.5"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.22.5"
+    "@babel/plugin-syntax-import-attributes" "^7.22.5"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.22.5"
+    "@babel/plugin-transform-async-generator-functions" "^7.22.5"
+    "@babel/plugin-transform-async-to-generator" "^7.22.5"
+    "@babel/plugin-transform-block-scoped-functions" "^7.22.5"
+    "@babel/plugin-transform-block-scoping" "^7.22.5"
+    "@babel/plugin-transform-class-properties" "^7.22.5"
+    "@babel/plugin-transform-class-static-block" "^7.22.5"
+    "@babel/plugin-transform-classes" "^7.22.5"
+    "@babel/plugin-transform-computed-properties" "^7.22.5"
+    "@babel/plugin-transform-destructuring" "^7.22.5"
+    "@babel/plugin-transform-dotall-regex" "^7.22.5"
+    "@babel/plugin-transform-duplicate-keys" "^7.22.5"
+    "@babel/plugin-transform-dynamic-import" "^7.22.5"
+    "@babel/plugin-transform-exponentiation-operator" "^7.22.5"
+    "@babel/plugin-transform-export-namespace-from" "^7.22.5"
+    "@babel/plugin-transform-for-of" "^7.22.5"
+    "@babel/plugin-transform-function-name" "^7.22.5"
+    "@babel/plugin-transform-json-strings" "^7.22.5"
+    "@babel/plugin-transform-literals" "^7.22.5"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.22.5"
+    "@babel/plugin-transform-member-expression-literals" "^7.22.5"
+    "@babel/plugin-transform-modules-amd" "^7.22.5"
+    "@babel/plugin-transform-modules-commonjs" "^7.22.5"
+    "@babel/plugin-transform-modules-systemjs" "^7.22.5"
+    "@babel/plugin-transform-modules-umd" "^7.22.5"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
+    "@babel/plugin-transform-new-target" "^7.22.5"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.5"
+    "@babel/plugin-transform-numeric-separator" "^7.22.5"
+    "@babel/plugin-transform-object-rest-spread" "^7.22.5"
+    "@babel/plugin-transform-object-super" "^7.22.5"
+    "@babel/plugin-transform-optional-catch-binding" "^7.22.5"
+    "@babel/plugin-transform-optional-chaining" "^7.22.5"
+    "@babel/plugin-transform-parameters" "^7.22.5"
+    "@babel/plugin-transform-private-methods" "^7.22.5"
+    "@babel/plugin-transform-private-property-in-object" "^7.22.5"
+    "@babel/plugin-transform-property-literals" "^7.22.5"
+    "@babel/plugin-transform-regenerator" "^7.22.5"
+    "@babel/plugin-transform-reserved-words" "^7.22.5"
+    "@babel/plugin-transform-shorthand-properties" "^7.22.5"
+    "@babel/plugin-transform-spread" "^7.22.5"
+    "@babel/plugin-transform-sticky-regex" "^7.22.5"
+    "@babel/plugin-transform-template-literals" "^7.22.5"
+    "@babel/plugin-transform-typeof-symbol" "^7.22.5"
+    "@babel/plugin-transform-unicode-escapes" "^7.22.5"
+    "@babel/plugin-transform-unicode-property-regex" "^7.22.5"
+    "@babel/plugin-transform-unicode-regex" "^7.22.5"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.22.5"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.22.5"
+    babel-plugin-polyfill-corejs2 "^0.4.3"
+    babel-plugin-polyfill-corejs3 "^0.8.1"
+    babel-plugin-polyfill-regenerator "^0.5.0"
+    core-js-compat "^3.30.2"
+    semver "^6.3.0"
+
+"@babel/preset-modules@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
+  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.12.5":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d"
+  integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-react-display-name" "^7.18.6"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
+    "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
+
+"@babel/preset-react@^7.16.0", "@babel/preset-react@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.22.5.tgz#c4d6058fbf80bccad02dd8c313a9aaa67e3c3dd6"
+  integrity sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    "@babel/plugin-transform-react-display-name" "^7.22.5"
+    "@babel/plugin-transform-react-jsx" "^7.22.5"
+    "@babel/plugin-transform-react-jsx-development" "^7.22.5"
+    "@babel/plugin-transform-react-pure-annotations" "^7.22.5"
+
+"@babel/preset-typescript@^7.16.0":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz#16367d8b01d640e9a507577ed4ee54e0101e51c8"
+  integrity sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.22.5"
+    "@babel/plugin-transform-modules-commonjs" "^7.22.5"
+    "@babel/plugin-transform-typescript" "^7.22.5"
+
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.16.3":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
+  integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/runtime@^7.8.4":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
+  integrity sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.12.7"
+    "@babel/types" "^7.12.7"
+
+"@babel/template@^7.18.10", "@babel/template@^7.18.6":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/template@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
+  integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
+"@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.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9":
+  version "7.12.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f"
+  integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.12.7"
+    "@babel/types" "^7.12.7"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/traverse@^7.18.10", "@babel/traverse@^7.18.11", "@babel/traverse@^7.18.9":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.11.tgz#3d51f2afbd83ecf9912bcbb5c4d94e3d2ddaa16f"
+  integrity sha512-TG9PiM2R/cWCAy6BPJKeHzNbu4lPzOSZpeMfeNErskGpTJx6trEvFaVCbDvpcxwy49BKWmEPwiW8mrysNiDvIQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.10"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.11"
+    "@babel/types" "^7.18.10"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1"
+  integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/generator" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    debug "^4.1.0"
+    globals "^11.1.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":
+  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.10.4", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.12.5", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.3.3":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
+  integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.10.tgz#4908e81b6b339ca7c6b7a555a5fc29446f26dde6"
+  integrity sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe"
+  integrity sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@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"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@csstools/normalize.css@*":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
+  integrity sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==
+
+"@csstools/postcss-cascade-layers@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.5.tgz#f16f2c4396ace855541e1aa693f5f27ec972e6ad"
+  integrity sha512-Id/9wBT7FkgFzdEpiEWrsVd4ltDxN0rI0QS0SChbeQiSuux3z21SJCRLu6h2cvCEUmaRi+VD0mHFj+GJD4GFnw==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-color-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
+  integrity sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-font-format-keywords@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz#677b34e9e88ae997a67283311657973150e8b16a"
+  integrity sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-hwb-function@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b"
+  integrity sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-ic-unit@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz#28237d812a124d1a16a5acc5c3832b040b303e58"
+  integrity sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-is-pseudo-class@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz#846ae6c0d5a1eaa878fce352c544f9c295509cd1"
+  integrity sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-nested-calc@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz#d7e9d1d0d3d15cf5ac891b16028af2a1044d0c26"
+  integrity sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-normalize-display-values@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz#15da54a36e867b3ac5163ee12c1d7f82d4d612c3"
+  integrity sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-oklab-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz#88cee0fbc8d6df27079ebd2fa016ee261eecf844"
+  integrity sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-progressive-custom-properties@^1.1.0", "@csstools/postcss-progressive-custom-properties@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz#542292558384361776b45c85226b9a3a34f276fa"
+  integrity sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-stepped-value-functions@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz#f8772c3681cc2befed695e2b0b1d68e22f08c4f4"
+  integrity sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-text-decoration-shorthand@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz#ea96cfbc87d921eca914d3ad29340d9bcc4c953f"
+  integrity sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-trigonometric-functions@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz#94d3e4774c36d35dcdc88ce091336cb770d32756"
+  integrity sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-unset-value@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz#c99bb70e2cdc7312948d1eb41df2412330b81f77"
+  integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
+
+"@csstools/selector-specificity@^2.0.0", "@csstools/selector-specificity@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
+  integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
+
+"@fastify/busboy@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
+  integrity sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
+  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
+
+"@jest/console@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.5.1.tgz#260fe7239602fe5130a94f1aa386eff54b014bba"
+  integrity sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+
+"@jest/console@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.3.tgz#2030606ec03a18c31803b8a36382762e447655df"
+  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+
+"@jest/core@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
+  integrity sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/reporters" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^27.5.1"
+    jest-config "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-resolve-dependencies "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    jest-watcher "^27.5.1"
+    micromatch "^4.0.4"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74"
+  integrity sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==
+  dependencies:
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+
+"@jest/expect-utils@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.3.tgz#58561ce5db7cd253a7edddbc051fb39dda50f525"
+  integrity sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==
+  dependencies:
+    jest-get-type "^28.0.2"
+
+"@jest/fake-timers@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.5.1.tgz#76979745ce0579c8a94a4678af7a748eda8ada74"
+  integrity sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@sinonjs/fake-timers" "^8.0.1"
+    "@types/node" "*"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
+"@jest/globals@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.5.1.tgz#7ac06ce57ab966566c7963431cef458434601b2b"
+  integrity sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    expect "^27.5.1"
+
+"@jest/reporters@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.5.1.tgz#ceda7be96170b03c923c37987b64015812ffec04"
+  integrity sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-haste-map "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/source-map@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
+  integrity sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+    source-map "^0.6.0"
+
+"@jest/test-result@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.5.1.tgz#56a6585fa80f7cdab72b8c5fc2e871d03832f5bb"
+  integrity sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.3.tgz#5eae945fd9f4b8fcfce74d239e6f725b6bf076c5"
+  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
+  integrity sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-runtime "^27.5.1"
+
+"@jest/transform@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409"
+  integrity sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^27.5.1"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-util "^27.5.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
+  integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@nodelib/fs.scandir@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
+  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.3"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
+  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
+  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.3"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@playwright/test@^1.51.1":
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e"
+  integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==
+  dependencies:
+    playwright "1.51.1"
+
+"@pmmmwh/react-refresh-webpack-plugin@0.5.15":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz#f126be97c30b83ed777e2aeabd518bc592e6e7c4"
+  integrity sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ==
+  dependencies:
+    ansi-html "^0.0.9"
+    core-js-pure "^3.23.3"
+    error-stack-parser "^2.0.6"
+    html-entities "^2.1.0"
+    loader-utils "^2.0.4"
+    schema-utils "^4.2.0"
+    source-map "^0.7.3"
+
+"@sinclair/typebox@^0.24.1":
+  version "0.24.28"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.28.tgz#15aa0b416f82c268b1573ab653e4413c965fe794"
+  integrity sha512-dgJd3HLOkLmz4Bw50eZx/zJwtBq65nms3N9VBYu5LTjJ883oBFkTyXRlCB/ZGGwqYpJJHA5zW2Ibhl5ngITfow==
+
+"@sinonjs/commons@^1.7.0":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.1.tgz#e7df00f98a203324f6dc7cc606cad9d4a8ab2217"
+  integrity sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^8.0.1":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7"
+  integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
+  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
+  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
+  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
+  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+
+"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
+  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+
+"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
+  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+
+"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+
+"@svgr/babel-plugin-transform-svg-component@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
+  integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
+
+"@svgr/babel-preset@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
+  integrity sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
+
+"@svgr/core@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
+  integrity sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
+  dependencies:
+    "@svgr/plugin-jsx" "^5.5.0"
+    camelcase "^6.2.0"
+    cosmiconfig "^7.0.0"
+
+"@svgr/hast-util-to-babel-ast@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
+  integrity sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==
+  dependencies:
+    "@babel/types" "^7.12.6"
+
+"@svgr/plugin-jsx@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
+  integrity sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@svgr/babel-preset" "^5.5.0"
+    "@svgr/hast-util-to-babel-ast" "^5.5.0"
+    svg-parser "^2.0.2"
+
+"@svgr/plugin-svgo@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
+  integrity sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    deepmerge "^4.2.2"
+    svgo "^1.2.2"
+
+"@svgr/webpack@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.5.0.tgz#aae858ee579f5fa8ce6c3166ef56c6a1b381b640"
+  integrity sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/plugin-transform-react-constant-elements" "^7.12.1"
+    "@babel/preset-env" "^7.12.1"
+    "@babel/preset-react" "^7.12.5"
+    "@svgr/core" "^5.5.0"
+    "@svgr/plugin-jsx" "^5.5.0"
+    "@svgr/plugin-svgo" "^5.5.0"
+    loader-utils "^2.0.0"
+
+"@testing-library/dom@^8.5.0":
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.17.1.tgz#2d7af4ff6dad8d837630fecd08835aee08320ad7"
+  integrity sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
+"@testing-library/jest-dom@^5.14.1":
+  version "5.16.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
+  integrity sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==
+  dependencies:
+    "@adobe/css-tools" "^4.0.1"
+    "@babel/runtime" "^7.9.2"
+    "@types/testing-library__jest-dom" "^5.9.1"
+    aria-query "^5.0.0"
+    chalk "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
+"@testing-library/react@^13.0.0":
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.3.0.tgz#bf298bfbc5589326bbcc8052b211f3bb097a97c5"
+  integrity sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
+
+"@testing-library/user-event@^13.2.1":
+  version "13.5.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
+  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
+"@types/aria-query@^4.2.0":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
+  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
+
+"@types/babel__core@^7.0.0":
+  version "7.1.12"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.12.tgz#4d8e9e51eb265552a7e4f1ff2219ab6133bdfb2d"
+  integrity sha512-wMTHiiTiBAAPebqaPiPDLFA4LYPKr6Ph0Xq/6rq1Ur3v66HXyG+clfR9CNETkD7MQS8ZHvpQOtA53DLws5WAEQ==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__core@^7.1.14":
+  version "7.1.19"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
+  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+  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/babel__traverse@^7.0.4":
+  version "7.0.16"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.16.tgz#0bbbf70c7bc4193210dd27e252c51260a37cd6a7"
+  integrity sha512-S63Dt4CZOkuTmpLGGWtT/mQdVORJOpx6SZWGVaP56dda/0Nx5nEe82K7/LAm8zYr6SfMq+1N2OreIOrHAx656w==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/eslint-scope@^3.7.3":
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
+  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
+
+"@types/eslint@*":
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.5.tgz#acdfb7dd36b91cc5d812d7c093811a8f3d9b31e4"
+  integrity sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/estree@*":
+  version "0.0.45"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
+  integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
+
+"@types/estree@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
+"@types/graceful-fs@^4.1.2":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.4.tgz#4ff9f641a7c6d1a3508ff88bc3141b152772e753"
+  integrity sha512-mWA/4zFQhfvOA8zWkXobwJvBD7vzcxgrOQ0J5CH1votGqdq9m7+FwtGaqyCZqC3NyyBkc9z4m+iry4LlqcMWJg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/html-minifier-terser@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
+  integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
+
+"@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-coverage@^2.0.1":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
+  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
+
+"@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@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
+  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@*":
+  version "28.1.7"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.7.tgz#a680c5d05b69634c2d54a63cb106d7fb1adaba16"
+  integrity sha512-acDN4VHD40V24tgu0iC44jchXavRNVFXQ/E6Z5XNsswgoSO/4NgsXoEYmPUGookKldlZQyIpmrEXsHI9cA3ZTA==
+  dependencies:
+    expect "^28.0.0"
+    pretty-format "^28.0.0"
+
+"@types/json-schema@*", "@types/json-schema@^7.0.5":
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
+  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
+
+"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/node@*":
+  version "14.14.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
+  integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@types/prettier@^2.1.5":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.0.tgz#ea03e9f0376a4446f44797ca19d9c46c36e352dc"
+  integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/q@^1.5.1":
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
+
+"@types/react-dom@^18.0.0":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.17"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.17.tgz#4583d9c322d67efe4b39a935d223edcc7050ccf4"
+  integrity sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/stack-utils@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
+  integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
+
+"@types/testing-library__jest-dom@^5.9.1":
+  version "5.14.5"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz#d113709c90b3c75fdb127ec338dad7d5f86c974f"
+  integrity sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==
+  dependencies:
+    "@types/jest" "*"
+
+"@types/yargs-parser@*":
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
+
+"@types/yargs@^16.0.0":
+  version "16.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977"
+  integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^17.0.8":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.11.tgz#5e10ca33e219807c0eee0f08b5efcba9b6a42c06"
+  integrity sha512-aB4y9UDUXTSMxmM4MH+YnuR0g5Cph3FLQBoWoMB21DSvFVAxRVEHEMx3TLh+zUZYMCQtKiqazz0Q4Rre31f/OA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz#6df20d272ea5439bf20ab3492b7fb70e9bfcb3f6"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz#3da623233ae1a60409b509a52ade9bc22a37f7bf"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz#9f9f3ff52a14c980939be0ef9d5df9ebc678ae3b"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz#a6520601da1b5700448273666a71ad0a45d78547"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz#9e6e81475dfcfb62dab574ac2dda38226c232bc5"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz#c47acb90e6f083391e3fa61d113650eea1e95937"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz#bcecf661d7d1abdaf989d8341a4833e33e2b31ac"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@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.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
+  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+
+abab@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+accepts@~1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
+
+acorn-loose@^8.3.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/acorn-loose/-/acorn-loose-8.4.0.tgz#26d3e219756d1e180d006f5bcc8d261a28530f55"
+  integrity sha512-M0EUka6rb+QC4l9Z3T0nJEzNOO7JcoJlYMrBlyBCiFSXRyxjLKayd4TbQs2FDRWQU1h9FR7QVNHt+PEaoNL5rQ==
+  dependencies:
+    acorn "^8.11.0"
+
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.11.0, acorn@^8.8.2:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+acorn@^8.2.4, acorn@^8.7.1:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+address@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+
+address@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.2.0.tgz#d352a62c92fee90f89a693eccd2a8b2139ab02d9"
+  integrity sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==
+
+adjust-sourcemap-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz#fc4a0fd080f7d10471f30a7320f25560ade28c99"
+  integrity sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==
+  dependencies:
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+ajv-formats@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
+  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
+  dependencies:
+    ajv "^8.0.0"
+
+ajv-keywords@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv-keywords@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
+ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+ajv@^8.9.0:
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.16.0.tgz#22e2a92b94f005f7e0f9c9d39652ef0b8f6f0cb4"
+  integrity sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.4.1"
+
+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-escapes@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
+  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
+  dependencies:
+    type-fest "^0.11.0"
+
+ansi-html-community@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
+ansi-html@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.9.tgz#6512d02342ae2cc68131952644a129cb734cd3f0"
+  integrity sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+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"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+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@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
+  integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
+
+array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+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.prototype.reduce@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.7.tgz#6aadc2f995af29cb887eb866d981dc85ab6f7dc7"
+  integrity sha512-mzmiUCVwtiD4lgxYP8g7IYy8El8p2CSMePvIbTS7gchKir/L1fgJrk0yDKmAX6mnRQFKNADYIk8nNlTris5H1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-array-method-boxes-properly "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    is-string "^1.0.7"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+autoprefixer@^10.4.8:
+  version "10.4.8"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
+  integrity sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==
+  dependencies:
+    browserslist "^4.21.3"
+    caniuse-lite "^1.0.30001373"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+babel-jest@^27.4.2, babel-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444"
+  integrity sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==
+  dependencies:
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-loader@^8.2.3:
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e"
+  integrity sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
+babel-plugin-named-asset-import@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz#6b7fa43c59229685368683c28bc9734f24524cc2"
+  integrity sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==
+
+babel-plugin-polyfill-corejs2@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz#e4c31d4c89b56f3cf85b92558954c66b54bd972d"
+  integrity sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs2@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz#75044d90ba5043a5fb559ac98496f62f3eb668fd"
+  integrity sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.4.0"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs3@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz#d7e09c9a899079d71a8b670c6181af56ec19c5c7"
+  integrity sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
+    core-js-compat "^3.21.0"
+
+babel-plugin-polyfill-corejs3@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz#39248263c38191f0d226f928d666e6db1b4b3a8a"
+  integrity sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.4.0"
+    core-js-compat "^3.30.1"
+
+babel-plugin-polyfill-regenerator@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.0.tgz#8f51809b6d5883e07e71548d75966ff7635527fe"
+  integrity sha512-RW1cnryiADFeHmfLS+WW/G431p1PsW5qdRdz0SDRi7TKcUgc7Oh/uXkT7MZ/+tGsT1BkczEAmD5XjUyJ5SWDTw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
+
+babel-plugin-polyfill-regenerator@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz#e7344d88d9ef18a3c47ded99362ae4a757609380"
+  integrity sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.4.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"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.0.tgz#cf5feef29551253471cfa82fc8e0f5063df07a77"
+  integrity sha512-mGkvkpocWJes1CmMKtgGUwCeeq0pOhALyymozzDWYomHTbDLwueDYG6p4TK1YOeYHCzBzYPsWkgTto10JubI1Q==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81"
+  integrity sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==
+  dependencies:
+    babel-plugin-jest-hoist "^27.5.1"
+    babel-preset-current-node-syntax "^1.0.0"
+
+babel-preset-react-app@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz#ed6005a20a24f2c88521809fa9aea99903751584"
+  integrity sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@babel/plugin-proposal-class-properties" "^7.16.0"
+    "@babel/plugin-proposal-decorators" "^7.16.4"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.0"
+    "@babel/plugin-proposal-numeric-separator" "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.0"
+    "@babel/plugin-proposal-private-methods" "^7.16.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.16.0"
+    "@babel/plugin-transform-react-display-name" "^7.16.0"
+    "@babel/plugin-transform-runtime" "^7.16.4"
+    "@babel/preset-env" "^7.16.4"
+    "@babel/preset-react" "^7.16.0"
+    "@babel/preset-typescript" "^7.16.0"
+    "@babel/runtime" "^7.16.3"
+    babel-plugin-macros "^3.1.0"
+    babel-plugin-transform-react-remove-prop-types "^0.4.24"
+
+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.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+bl@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
+body-parser@^1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
+  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.11.0"
+    raw-body "2.5.1"
+    type-is "~1.6.18"
+    unpipe "1.0.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"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.2, braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
+browserslist@^4.0.0:
+  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.16.6, browserslist@^4.18.1, browserslist@^4.20.2, browserslist@^4.20.3, browserslist@^4.21.3:
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+
+browserslist@^4.21.10, browserslist@^4.21.4:
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
+  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
+  dependencies:
+    caniuse-lite "^1.0.30001646"
+    electron-to-chromium "^1.5.4"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.0"
+
+browserslist@^4.21.5:
+  version "4.21.9"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.9.tgz#e11bdd3c313d7e2a9e87e8b4b0c7872b13897635"
+  integrity sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==
+  dependencies:
+    caniuse-lite "^1.0.30001503"
+    electron-to-chromium "^1.4.431"
+    node-releases "^2.0.12"
+    update-browserslist-db "^1.0.11"
+
+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@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
+busboy@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+  dependencies:
+    streamsearch "^1.1.0"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
+  integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.0"
+
+call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+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@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
+camelcase@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+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, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373, caniuse-lite@^1.0.30001503, caniuse-lite@^1.0.30001646:
+  version "1.0.30001713"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz"
+  integrity sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==
+
+canvas@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/canvas/-/canvas-3.1.0.tgz#6cdf094b859fef8e39b0e2c386728a376f1727b2"
+  integrity sha512-tTj3CqqukVJ9NgSahykNwtGda7V33VLObwrHfzT0vqJXu7J4d4C/7kQQW3fOEGDfZZoILPut5H00gOjyttPGyg==
+  dependencies:
+    node-addon-api "^7.0.0"
+    prebuild-install "^7.1.1"
+
+case-sensitive-paths-webpack-plugin@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
+  integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
+
+chalk@^2.0.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"
+
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
+char-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
+  integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
+
+chokidar@^3.4.2, chokidar@^3.5.2, chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+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@^3.2.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.2.tgz#6d2967ffa407466481c6c90b6e16b3098f080128"
+  integrity sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==
+
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
+
+clean-css@^5.2.2:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32"
+  integrity sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==
+  dependencies:
+    source-map "~0.6.0"
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.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"
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
+color-convert@^1.9.0:
+  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-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+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.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+
+colord@^2.9.1:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
+colorette@^2.0.10:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
+  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
+
+combined-stream@^1.0.8:
+  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.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.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"
+
+concurrently@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.3.0.tgz#eb45cdbc8df43da195f619aba218a980cae49184"
+  integrity sha512-IiDwm+8DOcFEInca494A8V402tNTQlJaYq78RF2rijOrKEk/AOHTxhN4U1cp7GYKYX5Q6Ymh1dLTBlzIMN0ikA==
+  dependencies:
+    chalk "^4.1.0"
+    date-fns "^2.16.1"
+    lodash "^4.17.21"
+    rxjs "^7.0.0"
+    shell-quote "^1.7.3"
+    spawn-command "^0.0.2-1"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
+
+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.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@^1.6.0, 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"
+
+core-js-compat@^3.21.0, core-js-compat@^3.22.1:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.24.1.tgz#d1af84a17e18dfdd401ee39da9996f9a7ba887de"
+  integrity sha512-XhdNAGeRnTpp8xbD+sR/HFDK9CbeeeqXT6TuofXh3urqEevzkWmLRgrVoykodsw8okqo2pu1BOmuCKrHx63zdw==
+  dependencies:
+    browserslist "^4.21.3"
+    semver "7.0.0"
+
+core-js-compat@^3.30.1, core-js-compat@^3.30.2:
+  version "3.31.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.0.tgz#4030847c0766cc0e803dcdfb30055d7ef2064bf1"
+  integrity sha512-hM7YCu1cU6Opx7MXNu0NuumM0ezNeAeRKadixyiQELWY3vT3De9S4J5ZBMraWV2vZnrE1Cirl0GtFtDtMUXzPw==
+  dependencies:
+    browserslist "^4.21.5"
+
+core-js-pure@^3.23.3:
+  version "3.37.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.37.1.tgz#2b4b34281f54db06c9a9a5bd60105046900553bd"
+  integrity sha512-J/r5JTHSmzTxbiYYrzXg9w1VpqrYt+gexenBE9pugeyhwPZTAEJddyiReJWsLO6uNQ8xJZFbod6XC7KKwatCiA==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+css-blank-pseudo@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz#36523b01c12a25d812df343a32c322d2a2324561"
+  integrity sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-declaration-sorter@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz#72ebd995c8f4532ff0036631f7365cce9759df14"
+  integrity sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==
+
+css-has-pseudo@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz#57f6be91ca242d5c9020ee3e51bbb5b89fc7af73"
+  integrity sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-loader@^6.5.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
+  integrity sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.7"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.3.5"
+
+css-minimizer-webpack-plugin@^3.2.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
+  integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==
+  dependencies:
+    cssnano "^5.0.6"
+    jest-worker "^27.0.2"
+    postcss "^8.3.5"
+    schema-utils "^4.0.0"
+    serialize-javascript "^6.0.0"
+    source-map "^0.6.1"
+
+css-prefers-color-scheme@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz#ca8a22e5992c10a5b9d315155e7caee625903349"
+  integrity sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==
+
+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@^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-select@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+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-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+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==
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
+cssdb@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.0.0.tgz#60cd053b0918fbbe859517f6bddf35979a19e1af"
+  integrity sha512-HmRYATZ4Gf8naf6sZmwKEyf7MXAC0ZxjsamtNNgmuWpQgoO973zsE/1JMIohEYsSi5e3n7vQauCLv7TWSrOlrw==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+
+cssnano-preset-default@^5.2.12:
+  version "5.2.12"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.12.tgz#ebe6596ec7030e62c3eb2b3c09f533c0644a9a97"
+  integrity sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==
+  dependencies:
+    css-declaration-sorter "^6.3.0"
+    cssnano-utils "^3.1.0"
+    postcss-calc "^8.2.3"
+    postcss-colormin "^5.3.0"
+    postcss-convert-values "^5.1.2"
+    postcss-discard-comments "^5.1.2"
+    postcss-discard-duplicates "^5.1.0"
+    postcss-discard-empty "^5.1.1"
+    postcss-discard-overridden "^5.1.0"
+    postcss-merge-longhand "^5.1.6"
+    postcss-merge-rules "^5.1.2"
+    postcss-minify-font-values "^5.1.0"
+    postcss-minify-gradients "^5.1.1"
+    postcss-minify-params "^5.1.3"
+    postcss-minify-selectors "^5.2.1"
+    postcss-normalize-charset "^5.1.0"
+    postcss-normalize-display-values "^5.1.0"
+    postcss-normalize-positions "^5.1.1"
+    postcss-normalize-repeat-style "^5.1.1"
+    postcss-normalize-string "^5.1.0"
+    postcss-normalize-timing-functions "^5.1.0"
+    postcss-normalize-unicode "^5.1.0"
+    postcss-normalize-url "^5.1.0"
+    postcss-normalize-whitespace "^5.1.1"
+    postcss-ordered-values "^5.1.3"
+    postcss-reduce-initial "^5.1.0"
+    postcss-reduce-transforms "^5.1.0"
+    postcss-svgo "^5.1.0"
+    postcss-unique-selectors "^5.1.1"
+
+cssnano-utils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
+  integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
+
+cssnano@^5.0.6:
+  version "5.1.13"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.13.tgz#83d0926e72955332dc4802a7070296e6258efc0a"
+  integrity sha512-S2SL2ekdEz6w6a2epXn4CmMKU4K3KpcyXLKfAYc9UQQqJRkD/2eLUG0vJ3Db/9OvO5GuAdgXw3pFbR6abqghDQ==
+  dependencies:
+    cssnano-preset-default "^5.2.12"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
+
+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"
+
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+csstype@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+date-fns@^2.16.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.1.tgz#9667c2615525e552b5135a3116b95b1961456e60"
+  integrity sha512-dlLD5rKaKxpFdnjrs+5azHDFOPEu4ANy/LTh04A1DTzMM7qoajmKCBc8pkKRFT41CNzw+4gQh79X5C+Jq27HAw==
+
+debug@2.6.9, debug@^2.6.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.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"
+
+decimal.js@^10.2.1:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.0.tgz#97a7448873b01e92e5ff9117d89a7bca8e63e0fe"
+  integrity sha512-Nv6ENEzyPQ6AItkGwLE2PGKinZZ9g59vSh2BeH6NqPu0OTKZ5ruJsVqh/orbAnqXc9pBbgXAIrc2EyaCj8NpGg==
+
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+
+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=
+
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+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-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-libc@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
+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"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+devtools-ignore-webpack-plugin@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/devtools-ignore-webpack-plugin/-/devtools-ignore-webpack-plugin-0.2.0.tgz#a7b3d1bd0f593c7fee5cbb7534b07860e5e2447c"
+  integrity sha512-4P+1Y1VhSt1MRBRF6my8N1bs9nNMOFfIFSBHI6u18W73iCHWXNHTSWYeMoQQ72PIIHrP1q4koKpYg1Em3jb9Rw==
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+diff-sequences@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
+  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
+
+diff-sequences@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
+  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
+  integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
+
+dom-converter@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  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"
+
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+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"
+
+domutils@^2.5.2, domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+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.73:
+  version "1.3.73"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.73.tgz#aa67787067d58cc3920089368b3b8d6fe0fc12f6"
+
+electron-to-chromium@^1.4.202:
+  version "1.4.224"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.224.tgz#ecf2eed395cfedcbbe634658ccc4b457f7b254c3"
+  integrity sha512-dOujC5Yzj0nOVE23iD5HKqrRSDj2SD7RazpZS/b/WX85MtO6/LzKDF4TlYZTBteB+7fvSg5JpWh0sN7fImNF8w==
+
+electron-to-chromium@^1.4.431:
+  version "1.4.435"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.435.tgz#761c34300603b9f1234f0b6155870d3002435db6"
+  integrity sha512-B0CBWVFhvoQCW/XtjRzgrmqcgVWg6RXOEM/dK59+wFV93BFGR6AeNKc4OyhM+T3IhJaOOG8o/V+33Y2mwJWtzw==
+
+electron-to-chromium@^1.5.4:
+  version "1.5.12"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz#ee31756eaa2e06f2aa606f170b7ad06dd402b4e4"
+  integrity sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
+emittery@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
+  integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^5.17.0:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+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"
+
+error-stack-parser@^2.0.6:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
+es-abstract@^1.12.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.17.2, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-array-method-boxes-properly@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
+  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-module-lexer@^1.2.1:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.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"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escalade@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
+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"
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+escodegen@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
+  integrity sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-scope@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+
+expand-template@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
+  integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
+
+expect@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.5.1.tgz#83ce59f1e5bdf5f9d2b94b61d2050db48f3fef74"
+  integrity sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+
+expect@^28.0.0:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.3.tgz#90a7c1a124f1824133dd4533cce2d2bdcb6603ec"
+  integrity sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==
+  dependencies:
+    "@jest/expect-utils" "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-glob@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@~2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fastq@^1.6.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.9.0.tgz#e16a72f338eaca48e91b5c23593bcc2ef66b7947"
+  integrity sha512-i7FVWL8HhVY+CTkwFxkN2mk3h+787ixS5S63eb78diVRc1MCssarHq3W5cj0av7YDSwmaV928RNag+U1etRQ7w==
+  dependencies:
+    reusify "^1.0.4"
+
+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"
+
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+filesize@^8.0.6:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
+  integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-cache-dir@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
+  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.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@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+fork-ts-checker-webpack-plugin@^6.5.0:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
+  integrity sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@types/json-schema" "^7.0.5"
+    chalk "^4.1.0"
+    chokidar "^3.4.2"
+    cosmiconfig "^6.0.0"
+    deepmerge "^4.2.2"
+    fs-extra "^9.0.0"
+    glob "^7.1.6"
+    memfs "^3.1.2"
+    minimatch "^3.0.4"
+    schema-utils "2.7.0"
+    semver "^7.3.2"
+    tapable "^1.0.0"
+
+form-data@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
+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-extra@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-extra@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-monkey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
+  integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
+
+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.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.5:
+  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-intrinsic@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
+  integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
+github-from-package@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+  integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+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, glob@^7.1.6:
+  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"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  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:
+  version "11.8.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
+
+globalthis@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+globby@^11.0.4:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+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.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+
+graceful-fs@^4.2.11:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graceful-fs@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
+graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
+harmony-reflect@^1.4.6:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1, has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+
+has-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+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"
+
+hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
+
+html-entities@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.4.0.tgz#edd0cee70402584c8c76cc2c0556db09d1f45061"
+  integrity sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-minifier-terser@^6.0.2:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
+  integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==
+  dependencies:
+    camel-case "^4.1.2"
+    clean-css "^5.2.2"
+    commander "^8.3.0"
+    he "^1.2.0"
+    param-case "^3.0.4"
+    relateurl "^0.2.7"
+    terser "^5.10.0"
+
+html-webpack-plugin@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
+  integrity sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==
+  dependencies:
+    "@types/html-minifier-terser" "^6.0.0"
+    html-minifier-terser "^6.0.2"
+    lodash "^4.17.21"
+    pretty-error "^4.0.0"
+    tapable "^2.0.0"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.4.24:
+  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"
+
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
+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"
+  integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
+  dependencies:
+    harmony-reflect "^1.4.6"
+
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+immer@^9.0.7:
+  version "9.0.15"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.15.tgz#0b9169e5b1d22137aba7d43f8a81a495dd1b62dc"
+  integrity sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==
+
+import-fresh@^3.1.0, import-fresh@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.2.tgz#fc129c160c5d68235507f4331a6baad186bdbc3e"
+  integrity sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+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:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.4, inherits@^2.0.3, 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:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+
+ini@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
+is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^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-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.13.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.0.tgz#71c72ec5442ace7e76b306e9d48db361f22699ea"
+  integrity sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
+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-docker@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
+  integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
+
+is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+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@^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@^4.0.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-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+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-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-root@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
+  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
+
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
+is-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
+  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.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-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
+
+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-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+
+istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz#31d18bdd127f825dd02ea7bfdfd906f8ab840e9f"
+  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
+  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jest-changed-files@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
+  integrity sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    execa "^5.0.0"
+    throat "^6.0.1"
+
+jest-circus@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.5.1.tgz#37a5a4459b7bf4406e53d637b49d22c65d125ecc"
+  integrity sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
+jest-cli@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.5.1.tgz#278794a6e6458ea8029547e6c6cbf673bd30b145"
+  integrity sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    prompts "^2.0.1"
+    yargs "^16.2.0"
+
+jest-config@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.5.1.tgz#5c387de33dca3f99ad6357ddeccd91bf3a0e4a41"
+  integrity sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==
+  dependencies:
+    "@babel/core" "^7.8.0"
+    "@jest/test-sequencer" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    babel-jest "^27.5.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.9"
+    jest-circus "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-jasmine2 "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
+  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-diff@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.3.tgz#948a192d86f4e7a64c5264ad4da4877133d8792f"
+  integrity sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
+jest-docblock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.5.1.tgz#14092f364a42c6108d42c33c8cf30e058e25f6c0"
+  integrity sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.5.1.tgz#5bc87016f45ed9507fed6e4702a5b468a5b2c44e"
+  integrity sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-environment-jsdom@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz#ea9ccd1fc610209655a77898f86b2b559516a546"
+  integrity sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+    jsdom "^16.6.0"
+
+jest-environment-node@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.5.1.tgz#dedc2cfe52fab6b8f5714b4808aefa85357a365e"
+  integrity sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
+jest-get-type@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
+  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
+
+jest-get-type@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203"
+  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
+
+jest-haste-map@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
+  integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^27.5.1"
+    jest-serializer "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-jasmine2@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz#a037b0034ef49a9f3d71c4375a796f3b230d1ac4"
+  integrity sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    throat "^6.0.1"
+
+jest-leak-detector@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz#6ec9d54c3579dd6e3e66d70e3498adf80fde3fb8"
+  integrity sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==
+  dependencies:
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-matcher-utils@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
+  integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-matcher-utils@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz#5a77f1c129dd5ba3b4d7fc20728806c78893146e"
+  integrity sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^28.1.3"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
+jest-message-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
+  integrity sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.5.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-message-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.3.tgz#232def7f2e333f1eecc90649b5b94b0055e7c43d"
+  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.1.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
+  integrity sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
+  integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
+
+jest-regex-util@^28.0.0:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
+jest-resolve-dependencies@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
+  integrity sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-snapshot "^27.5.1"
+
+jest-resolve@^27.4.2, jest-resolve@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.5.1.tgz#a2f1c5a0796ec18fe9eb1536ac3814c23617b384"
+  integrity sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-runner@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.5.1.tgz#071b27c1fa30d90540805c5645a0ec167c7b62e5"
+  integrity sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-leak-detector "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    source-map-support "^0.5.6"
+    throat "^6.0.1"
+
+jest-runtime@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.5.1.tgz#4896003d7a334f7e8e4a53ba93fb9bcd3db0a1af"
+  integrity sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/globals" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-serializer@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
+  integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.9"
+
+jest-snapshot@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.5.1.tgz#b668d50d23d38054a51b42c4039cab59ae6eb6a1"
+  integrity sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==
+  dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^27.5.1"
+    semver "^7.3.2"
+
+jest-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
+  integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
+  integrity sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    leven "^3.1.0"
+    pretty-format "^27.5.1"
+
+jest-watch-typeahead@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz#b4a6826dfb9c9420da2f7bc900de59dad11266a9"
+  integrity sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==
+  dependencies:
+    ansi-escapes "^4.3.1"
+    chalk "^4.0.0"
+    jest-regex-util "^28.0.0"
+    jest-watcher "^28.0.0"
+    slash "^4.0.0"
+    string-length "^5.0.1"
+    strip-ansi "^7.0.1"
+
+jest-watcher@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
+  integrity sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.5.1"
+    string-length "^4.0.1"
+
+jest-watcher@^28.0.0:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.3.tgz#c6023a59ba2255e3b4c57179fc94164b3e73abd4"
+  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.1.3"
+    string-length "^4.0.1"
+
+jest-worker@^27.0.2, jest-worker@^27.4.5, jest-worker@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^27.4.3:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
+  integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    import-local "^3.0.2"
+    jest-cli "^27.5.1"
+
+jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+
+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.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"
+
+jsdom@^16.6.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.2.4"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
+    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-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+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-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json5@^2.1.0, json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
+json5@^2.1.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+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"
+
+klona@^2.0.4, klona@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
+  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+
+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"
+
+lilconfig@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
+  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
+  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+loader-utils@^2.0.0, loader-utils@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+loader-utils@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.0.tgz#bcecc51a7898bee7473d4bc6b845b23af8304d4f"
+  integrity sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==
+
+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"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+
+lodash@^4.17.10:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+
+lodash@^4.17.13, lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+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"
+
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
+
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+memfs@^3.1.2, memfs@^3.4.3:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.7.tgz#e5252ad2242a724f938cb937e3c4f7ceb1f70e5a"
+  integrity sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==
+  dependencies:
+    fs-monkey "^1.0.3"
+
+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.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+micromatch@^4.0.5:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
+  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
+mini-css-extract-plugin@^2.4.5:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz#9a1251d15f2035c342d99a468ab9da7a0451b71e"
+  integrity sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==
+  dependencies:
+    schema-utils "^4.0.0"
+
+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"
+
+minimatch@^3.0.5:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@^1.2.0, minimist@^1.2.3:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
+  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
+
+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"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+
+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"
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+napi-build-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-2.0.0.tgz#13c22c0187fcfccce1461844136372a47ddc027e"
+  integrity sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+neo-async@^2.6.1, neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
+node-abi@^3.3.0:
+  version "3.74.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.74.0.tgz#5bfb4424264eaeb91432d2adb9da23c63a301ed0"
+  integrity sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==
+  dependencies:
+    semver "^7.3.5"
+
+node-addon-api@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
+  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+
+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@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039"
+  integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==
+
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
+nodemon@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.19.tgz#cac175f74b9cb8b57e770d47841995eebe4488bd"
+  integrity sha512-4pv1f2bMDj0Eeg/MhGqxrtveeQ5/G/UVe9iO6uTZzjnRluSA4PVWf8CW99LUPwGB3eNIA7zUFoP77YuI7hOc0A==
+  dependencies:
+    chokidar "^3.5.2"
+    debug "^3.2.7"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.8"
+    semver "^5.7.1"
+    simple-update-notifier "^1.0.7"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.5"
+
+normalize-path@^3.0.0, 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@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+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"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+nwsapi@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+
+object-assign@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+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.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.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.getownpropertydescriptors@^2.1.0:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz#2f1fe0606ec1a7658154ccd4f728504f69667923"
+  integrity sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==
+  dependencies:
+    array.prototype.reduce "^1.0.6"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    gopd "^1.0.1"
+    safe-array-concat "^1.1.2"
+
+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"
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  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"
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+optionator@^0.8.1:
+  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"
+
+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-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.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-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-try@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz#e501cd3094b278495eb4258d4c9f6d5ac3019f00"
+  integrity sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==
+
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
+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-json@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.1.0.tgz#f96088cdf24a8faa9aea9a009f2d9d942c999646"
+  integrity sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse5@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+pirates@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
+playwright-core@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1"
+  integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==
+
+playwright@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f"
+  integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==
+  dependencies:
+    playwright-core "1.51.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss-attribute-case-insensitive@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
+  integrity sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-browser-comments@^4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz#bcfc86134df5807f5d3c0eefa191d42136b5e72a"
+  integrity sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==
+
+postcss-calc@^8.2.3:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
+  integrity sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
+
+postcss-clamp@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.1.0.tgz#7263e95abadd8c2ba1bd911b0b5a5c9c93e02363"
+  integrity sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-functional-notation@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz#21a909e8d7454d3612d1659e471ce4696f28caec"
+  integrity sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-hex-alpha@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz#c66e2980f2fbc1a63f5b079663340ce8b55f25a5"
+  integrity sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-rebeccapurple@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz#63fdab91d878ebc4dd4b7c02619a0c3d6a56ced0"
+  integrity sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-colormin@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.0.tgz#3cee9e5ca62b2c27e84fce63affc0cfb5901956a"
+  integrity sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==
+  dependencies:
+    browserslist "^4.16.6"
+    caniuse-api "^3.0.0"
+    colord "^2.9.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-convert-values@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.2.tgz#31586df4e184c2e8890e8b34a0b9355313f503ab"
+  integrity sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==
+  dependencies:
+    browserslist "^4.20.3"
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-media@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz#c8f9637edf45fef761b014c024cee013f80529ea"
+  integrity sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-properties@^12.1.8:
+  version "12.1.8"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.8.tgz#aa003e1885c5bd28e2e32496cd597e389ca889e4"
+  integrity sha512-8rbj8kVu00RQh2fQF81oBqtduiANu4MIxhyf0HbbStgPtnFlWn0yiaYTpLHrPnJbffVY1s9apWsIoVZcc68FxA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-selectors@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz#1ab4684d65f30fed175520f82d223db0337239d9"
+  integrity sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-dir-pseudo-class@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz#2bf31de5de76added44e0a25ecf60ae9f7c7c26c"
+  integrity sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-discard-comments@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
+  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
+
+postcss-discard-duplicates@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
+  integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
+
+postcss-discard-empty@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz#e57762343ff7f503fe53fca553d18d7f0c369c6c"
+  integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
+
+postcss-discard-overridden@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
+  integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
+
+postcss-double-position-gradients@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz#b96318fdb477be95997e86edd29c6e3557a49b91"
+  integrity sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-env-function@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-4.0.6.tgz#7b2d24c812f540ed6eda4c81f6090416722a8e7a"
+  integrity sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-flexbugs-fixes@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz#2028e145313074fc9abe276cb7ca14e5401eb49d"
+  integrity sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==
+
+postcss-focus-visible@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz#50c9ea9afa0ee657fb75635fabad25e18d76bf9e"
+  integrity sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-focus-within@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz#5b1d2ec603195f3344b716c0b75f61e44e8d2e20"
+  integrity sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-font-variant@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz#efd59b4b7ea8bb06127f2d031bfbb7f24d32fa66"
+  integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
+
+postcss-gap-properties@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz#f7e3cddcf73ee19e94ccf7cb77773f9560aa2fff"
+  integrity sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==
+
+postcss-image-set-function@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz#08353bd756f1cbfb3b6e93182c7829879114481f"
+  integrity sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-initial@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
+  integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-lab-function@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz#6fe4c015102ff7cd27d1bd5385582f67ebdbdc98"
+  integrity sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
+postcss-logical@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-5.0.4.tgz#ec75b1ee54421acc04d5921576b7d8db6b0e6f73"
+  integrity sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==
+
+postcss-media-minmax@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz#7140bddec173e2d6d657edbd8554a55794e2a5b5"
+  integrity sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==
+
+postcss-merge-longhand@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.6.tgz#f378a8a7e55766b7b644f48e5d8c789ed7ed51ce"
+  integrity sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    stylehacks "^5.1.0"
+
+postcss-merge-rules@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.2.tgz#7049a14d4211045412116d79b751def4484473a5"
+  integrity sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==
+  dependencies:
+    browserslist "^4.16.6"
+    caniuse-api "^3.0.0"
+    cssnano-utils "^3.1.0"
+    postcss-selector-parser "^6.0.5"
+
+postcss-minify-font-values@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
+  integrity sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-gradients@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz#f1fe1b4f498134a5068240c2f25d46fcd236ba2c"
+  integrity sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==
+  dependencies:
+    colord "^2.9.1"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-params@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.3.tgz#ac41a6465be2db735099bbd1798d85079a6dc1f9"
+  integrity sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==
+  dependencies:
+    browserslist "^4.16.6"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-selectors@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz#d4e7e6b46147b8117ea9325a915a801d5fe656c6"
+  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-nested@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-nesting@^10.1.10:
+  version "10.1.10"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.1.10.tgz#9c396df3d8232cbedfa95baaac6b765b8fd2a817"
+  integrity sha512-lqd7LXCq0gWc0wKXtoKDru5wEUNjm3OryLVNRZ8OnW8km6fSNUuFrjEhU3nklxXE2jvd4qrox566acgh+xQt8w==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+postcss-normalize-charset@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz#9302de0b29094b52c259e9b2cf8dc0879879f0ed"
+  integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
+
+postcss-normalize-display-values@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz#72abbae58081960e9edd7200fcf21ab8325c3da8"
+  integrity sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-positions@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz#ef97279d894087b59325b45c47f1e863daefbb92"
+  integrity sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-repeat-style@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz#e9eb96805204f4766df66fd09ed2e13545420fb2"
+  integrity sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-string@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz#411961169e07308c82c1f8c55f3e8a337757e228"
+  integrity sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-timing-functions@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz#d5614410f8f0b2388e9f240aa6011ba6f52dafbb"
+  integrity sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-unicode@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.0.tgz#3d23aede35e160089a285e27bf715de11dc9db75"
+  integrity sha512-J6M3MizAAZ2dOdSjy2caayJLQT8E8K9XjLce8AUQMwOrCvjCHv24aLC/Lps1R1ylOfol5VIDMaM/Lo9NGlk1SQ==
+  dependencies:
+    browserslist "^4.16.6"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-url@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz#ed9d88ca82e21abef99f743457d3729a042adcdc"
+  integrity sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==
+  dependencies:
+    normalize-url "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-whitespace@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz#08a1a0d1ffa17a7cc6efe1e6c9da969cc4493cfa"
+  integrity sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-10.0.1.tgz#464692676b52792a06b06880a176279216540dd7"
+  integrity sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==
+  dependencies:
+    "@csstools/normalize.css" "*"
+    postcss-browser-comments "^4"
+    sanitize.css "*"
+
+postcss-opacity-percentage@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz#bd698bb3670a0a27f6d657cc16744b3ebf3b1145"
+  integrity sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==
+
+postcss-ordered-values@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz#b6fd2bd10f937b23d86bc829c69e7732ce76ea38"
+  integrity sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==
+  dependencies:
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-overflow-shorthand@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz#7ed6486fec44b76f0eab15aa4866cda5d55d893e"
+  integrity sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-page-break@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-3.0.4.tgz#7fbf741c233621622b68d435babfb70dd8c1ee5f"
+  integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
+
+postcss-place@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-7.0.5.tgz#95dbf85fd9656a3a6e60e832b5809914236986c4"
+  integrity sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-preset-env@^7.0.1:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.0.tgz#5bd3ad53b2ef02edd41645d1ffee1ff8a49f24e5"
+  integrity sha512-leqiqLOellpLKfbHkD06E04P6d9ZQ24mat6hu4NSqun7WG0UhspHR5Myiv/510qouCjoo4+YJtNOqg5xHaFnCA==
+  dependencies:
+    "@csstools/postcss-cascade-layers" "^1.0.5"
+    "@csstools/postcss-color-function" "^1.1.1"
+    "@csstools/postcss-font-format-keywords" "^1.0.1"
+    "@csstools/postcss-hwb-function" "^1.0.2"
+    "@csstools/postcss-ic-unit" "^1.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.7"
+    "@csstools/postcss-nested-calc" "^1.0.0"
+    "@csstools/postcss-normalize-display-values" "^1.0.1"
+    "@csstools/postcss-oklab-function" "^1.1.1"
+    "@csstools/postcss-progressive-custom-properties" "^1.3.0"
+    "@csstools/postcss-stepped-value-functions" "^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
+    "@csstools/postcss-trigonometric-functions" "^1.0.2"
+    "@csstools/postcss-unset-value" "^1.0.2"
+    autoprefixer "^10.4.8"
+    browserslist "^4.21.3"
+    css-blank-pseudo "^3.0.3"
+    css-has-pseudo "^3.0.4"
+    css-prefers-color-scheme "^6.0.3"
+    cssdb "^7.0.0"
+    postcss-attribute-case-insensitive "^5.0.2"
+    postcss-clamp "^4.1.0"
+    postcss-color-functional-notation "^4.2.4"
+    postcss-color-hex-alpha "^8.0.4"
+    postcss-color-rebeccapurple "^7.1.1"
+    postcss-custom-media "^8.0.2"
+    postcss-custom-properties "^12.1.8"
+    postcss-custom-selectors "^6.0.3"
+    postcss-dir-pseudo-class "^6.0.5"
+    postcss-double-position-gradients "^3.1.2"
+    postcss-env-function "^4.0.6"
+    postcss-focus-visible "^6.0.4"
+    postcss-focus-within "^5.0.4"
+    postcss-font-variant "^5.0.0"
+    postcss-gap-properties "^3.0.5"
+    postcss-image-set-function "^4.0.7"
+    postcss-initial "^4.0.1"
+    postcss-lab-function "^4.2.1"
+    postcss-logical "^5.0.4"
+    postcss-media-minmax "^5.0.0"
+    postcss-nesting "^10.1.10"
+    postcss-opacity-percentage "^1.1.2"
+    postcss-overflow-shorthand "^3.0.4"
+    postcss-page-break "^3.0.4"
+    postcss-place "^7.0.5"
+    postcss-pseudo-class-any-link "^7.1.6"
+    postcss-replace-overflow-wrap "^4.0.0"
+    postcss-selector-not "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-pseudo-class-any-link@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
+  integrity sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-reduce-initial@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz#fc31659ea6e85c492fb2a7b545370c215822c5d6"
+  integrity sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==
+  dependencies:
+    browserslist "^4.16.6"
+    caniuse-api "^3.0.0"
+
+postcss-reduce-transforms@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9"
+  integrity sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-replace-overflow-wrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
+  integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
+
+postcss-selector-not@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
+  integrity sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.0.2:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
+  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+    util-deprecate "^1.0.2"
+
+postcss-svgo@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
+  integrity sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    svgo "^2.7.0"
+
+postcss-unique-selectors@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
+  integrity sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
+postcss@^7.0.35:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
+postcss@^8.3.5, postcss@^8.4.4, postcss@^8.4.7:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.23:
+  version "8.4.41"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
+prebuild-install@^7.1.1:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.3.tgz#d630abad2b147443f20a212917beae68b8092eec"
+  integrity sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==
+  dependencies:
+    detect-libc "^2.0.0"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp-classic "^0.5.3"
+    napi-build-utils "^2.0.0"
+    node-abi "^3.3.0"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^4.0.0"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+pretty-error@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
+  integrity sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^3.0.0"
+
+pretty-format@^27.0.2, pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
+pretty-format@^28.0.0, pretty-format@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+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"
+
+prompts@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+psl@^1.1.33:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
+
+pstree.remy@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
+pump@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.2.tgz#836f3edd6bc2ee599256c924ffe0d88573ddcbf8"
+  integrity sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+punycode@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+
+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.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+randombytes@^2.1.0:
+  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"
+
+range-parser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    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"
+  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-dev-utils@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
+  integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    address "^1.1.2"
+    browserslist "^4.18.1"
+    chalk "^4.1.2"
+    cross-spawn "^7.0.3"
+    detect-port-alt "^1.1.6"
+    escape-string-regexp "^4.0.0"
+    filesize "^8.0.6"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.5.0"
+    global-modules "^2.0.0"
+    globby "^11.0.4"
+    gzip-size "^6.0.0"
+    immer "^9.0.7"
+    is-root "^2.1.0"
+    loader-utils "^3.2.0"
+    open "^8.4.0"
+    pkg-up "^3.1.0"
+    prompts "^2.4.2"
+    react-error-overlay "^6.0.11"
+    recursive-readdir "^2.2.2"
+    shell-quote "^1.7.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+react-dom@experimental:
+  version "0.0.0-experimental-6ebfd5b0-20240818"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-6ebfd5b0-20240818.tgz#8a0b45fc4d54d45442e5194edee0114a8132bc82"
+  integrity sha512-G+RipTMyLYgSz4lST+8RFzP/Zdl8JaW0iWq5Yk9nG/rkdT7riWQrrMG9ZpRAxpRbBbaZ8WIgZqX5JFvRcJjyDQ==
+  dependencies:
+    scheduler "0.0.0-experimental-6ebfd5b0-20240818"
+
+react-error-overlay@^6.0.11:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
+  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
+
+react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-refresh@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
+  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
+
+react-server-dom-webpack@experimental:
+  version "0.0.0-experimental-b3a95caf-20250113"
+  resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-b3a95caf-20250113.tgz#a2175829be7395acc4d25e0befbd92b233a764c6"
+  integrity sha512-/6/IP8sP/I1CKIBsXvuF3mQEO0Vw/Nu85QyNliCx+K6WT7plTbjpFlEnbJKWoZdh/9uQkG17IZZiGlOgExmjbA==
+  dependencies:
+    acorn-loose "^8.3.0"
+    neo-async "^2.6.1"
+    webpack-sources "^3.2.0"
+
+react@experimental:
+  version "0.0.0-experimental-b3a95caf-20250113"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-b3a95caf-20250113.tgz#3603103432922765869f3a95c31ff5ebcf68a2cb"
+  integrity sha512-Sx4o/oQ4+cxn9fFgfvrknlR0QSXl3sNztFM8P+4aazqXtLc6JM2zcQh5EBeJN9rZMPS3cPX/2gnDCD+bgwHSYw==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readable-stream@^3.1.1, readable-stream@^3.4.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+recursive-readdir@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"
+  integrity sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==
+  dependencies:
+    minimatch "^3.0.5"
+
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
+  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate-unicode-properties@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
+  integrity sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.4:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-transform@^0.15.0, regenerator-transform@^0.15.1:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regex-parser@^2.2.11:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.3.0.tgz#4bb61461b1a19b8b913f3960364bb57887f920ee"
+  integrity sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==
+
+regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  dependencies:
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
+
+regexpu-core@^4.6.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
+  integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^9.0.0"
+    regjsgen "^0.5.2"
+    regjsparser "^0.7.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
+regexpu-core@^5.1.0, regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+  dependencies:
+    "@babel/regjsgen" "^0.8.0"
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+regjsgen@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+
+regjsparser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.7.0.tgz#a6b667b54c885e18b52554cb4960ef71187e9968"
+  integrity sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==
+  dependencies:
+    jsesc "~0.5.0"
+
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
+
+renderkid@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
+  integrity sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==
+  dependencies:
+    css-select "^4.1.3"
+    dom-converter "^0.2.0"
+    htmlparser2 "^6.1.0"
+    lodash "^4.17.21"
+    strip-ansi "^6.0.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+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==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+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-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-url-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz#d50d4ddc746bb10468443167acf800dcd6c3ad57"
+  integrity sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==
+  dependencies:
+    adjust-sourcemap-loader "^4.0.0"
+    convert-source-map "^1.7.0"
+    loader-utils "^2.0.0"
+    postcss "^7.0.35"
+    source-map "0.6.1"
+
+resolve.exports@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
+  integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
+
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.3.2:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rxjs@^7.0.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
+safe-buffer@5.1.2, 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.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sanitize.css@*:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"
+  integrity sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==
+
+sass-loader@^12.3.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
+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==
+
+saxes@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
+scheduler@0.0.0-experimental-6ebfd5b0-20240818:
+  version "0.0.0-experimental-6ebfd5b0-20240818"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-6ebfd5b0-20240818.tgz#583c91937f8fdde51726cf1735cdb323eb86adf2"
+  integrity sha512-/a4bME9pxUZOLPL8ktBU4JtqYXPk2lRslukGB93gWygXbSoNpdVfVFoSyiUlLk1bDXN0iV5NaKv3PWHOhmOn+w==
+
+schema-utils@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
+schema-utils@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^4.0.0, schema-utils@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
+  integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.9.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^5.1.0"
+
+semver@7.0.0, semver@~7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^5.3.0, semver@^5.4.1, semver@^5.7.1:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.3.2, semver@^7.3.5:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
+side-channel@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+simple-concat@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+
+simple-get@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543"
+  integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==
+  dependencies:
+    decompress-response "^6.0.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
+simple-update-notifier@^1.0.7:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz#67694c121de354af592b347cdba798463ed49c82"
+  integrity sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==
+  dependencies:
+    semver "~7.0.0"
+
+sisteransi@^1.0.3, sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+source-list-map@^2.0.1:
+  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-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
+source-map-loader@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.2.tgz#af23192f9b344daa729f6772933194cc5fa54fee"
+  integrity sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==
+  dependencies:
+    abab "^2.0.5"
+    iconv-lite "^0.6.3"
+    source-map-js "^1.0.1"
+
+source-map-support@^0.5.6, source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+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"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
+source-map@^0.7.3:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+spawn-command@^0.0.2-1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+streamsearch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
+  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
+
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-length@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-5.0.1.tgz#3d647f497b6e8e8d41e422f7e0b23bc536c8381e"
+  integrity sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==
+  dependencies:
+    char-regex "^2.0.0"
+    strip-ansi "^7.0.1"
+
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimend@^1.0.3, string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimleft@^2.1.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.3.tgz#dee305118117d0a1843c1fc0d38d5d0754d83c60"
+  integrity sha512-699Ibssmj/awVzvdNk4g83/Iu8U9vDohzmA/ly2BrQWGhamuY4Tlvs5XKmKliDt3ky6SKbE1bzPhASKCFlx9Sg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    string.prototype.trimstart "^1.0.3"
+
+string.prototype.trimright@^2.1.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.3.tgz#dc16a21d7456cbc8b2c54d47fe01f06d9efe94eb"
+  integrity sha512-hoOq56oRFnnfDuXNy2lGHiwT77MehHv9d0zGfRZ8QdC+4zjrkFB9vd5i/zYTd/ymFBd4YxtbdgHt3U6ksGeuBw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    string.prototype.trimend "^1.0.3"
+
+string.prototype.trimstart@^1.0.3, string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^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"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+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 sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+
+style-loader@^3.3.1:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
+  integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
+
+stylehacks@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
+  integrity sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-selector-parser "^6.0.4"
+
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+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"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0, supports-color@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
+  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svg-parser@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^1.2.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
+  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"
+
+svgo@^2.7.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
+symbol-tree@^3.2.4:
+  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==
+
+tailwindcss@^3.0.2:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
+  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
+tapable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+tar-fs@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.2.tgz#425f154f3404cb16cb8ff6e671d45ab2ed9596c5"
+  integrity sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
+tar-stream@^2.1.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.20"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.26.0"
+
+terser@^5.10.0, terser@^5.26.0:
+  version "5.31.6"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.31.6.tgz#c63858a0f0703988d0266a82fcbf2d7ba76422b1"
+  integrity sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+throat@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.2.tgz#51a3fbb5e11ae72e2cf74861ed5c8020f89f29fe"
+  integrity sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+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 sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+touch@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
+  integrity sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==
+
+tough-cookie@^4.0.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+  dependencies:
+    punycode "^2.1.1"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.3, tslib@^2.1.0:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
+  integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
+
+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-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"
+
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+undefsafe@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
+undici@^5.20.0:
+  version "5.28.4"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.28.4.tgz#6b280408edb6a1a604a9b20340f45b422e373068"
+  integrity sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==
+  dependencies:
+    "@fastify/busboy" "^2.0.0"
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.0.0, unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==
+
+update-browserslist-db@^1.0.11, update-browserslist-db@^1.0.5, update-browserslist-db@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
+  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
+uri-js@^4.2.2, uri-js@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
+
+v8-to-istanbul@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
+  integrity sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
+webpack-dev-middleware@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
+  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
+  dependencies:
+    colorette "^2.0.10"
+    memfs "^3.4.3"
+    mime-types "^2.1.31"
+    range-parser "^1.2.1"
+    schema-utils "^4.0.0"
+
+webpack-hot-middleware@^2.25.3:
+  version "2.26.1"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz#87214f1e3f9f3acab9271fef9e6ed7b637d719c0"
+  integrity sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==
+  dependencies:
+    ansi-html-community "0.0.8"
+    html-entities "^2.1.0"
+    strip-ansi "^6.0.0"
+
+webpack-manifest-plugin@^4.0.2:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz#10f8dbf4714ff93a215d5a45bcc416d80506f94f"
+  integrity sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==
+  dependencies:
+    tapable "^2.0.0"
+    webpack-sources "^2.2.0"
+
+webpack-sources@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"
+  integrity sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==
+  dependencies:
+    source-list-map "^2.0.1"
+    source-map "^0.6.1"
+
+webpack-sources@^3.2.0, webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack@^5.64.4:
+  version "5.93.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.93.0.tgz#2e89ec7035579bdfba9760d26c63ac5c3462a5e5"
+  integrity sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
+    acorn "^8.7.1"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.0"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
+    webpack-sources "^3.2.3"
+
+whatwg-encoding@^1.0.5:
+  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.24"
+
+whatwg-mimetype@^2.3.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@^8.0.0, whatwg-url@^8.5.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
+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"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+ws@^7.4.6:
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
+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==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yaml@^2.3.4:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"
+  integrity sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==
+
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/fixtures/legacy-jsx-runtimes/README.md b/fixtures/legacy-jsx-runtimes/README.md
new file mode 100644
index 00000000000..376c2c4f208
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/README.md
@@ -0,0 +1,12 @@
+# Legacy JSX Runtimes
+
+This is an internal testing fixture for the special JSX runtime versions released for 0.14, 15, and 16.
+
+They are checked into the corresponding `react-*/cjs/*` folders.
+
+Run the full regression suite:
+
+```
+yarn
+yarn test
+```
diff --git a/fixtures/legacy-jsx-runtimes/babel.config.js b/fixtures/legacy-jsx-runtimes/babel.config.js
new file mode 100644
index 00000000000..132bbca7ae2
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/react',
+      {
+        runtime: 'automatic',
+        development: process.env.BABEL_ENV === 'development',
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-transform-modules-commonjs'],
+};
diff --git a/fixtures/legacy-jsx-runtimes/lint-runtimes.js b/fixtures/legacy-jsx-runtimes/lint-runtimes.js
new file mode 100644
index 00000000000..3e807c1100f
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/lint-runtimes.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 path = require('path');
+
+const {ESLint} = require('eslint');
+
+function getESLintInstance(format) {
+  return new ESLint({
+    useEslintrc: false,
+    overrideConfigFile:
+      __dirname + `../../../scripts/rollup/validate/eslintrc.${format}.js`,
+    ignore: false,
+  });
+}
+
+const esLints = {
+  cjs: getESLintInstance('cjs'),
+};
+
+// Performs sanity checks on bundles *built* by Rollup.
+// Helps catch Rollup regressions.
+async function lint(folder) {
+  console.log(`Linting ` + folder);
+  const eslint = esLints.cjs;
+
+  const results = await eslint.lintFiles([
+    __dirname + '/' + folder + '/cjs/react-jsx-dev-runtime.development.js',
+    __dirname + '/' + folder + '/cjs/react-jsx-dev-runtime.production.min.js',
+    __dirname + '/' + folder + '/cjs/react-jsx-runtime.development.js',
+    __dirname + '/' + folder + '/cjs/react-jsx-runtime.production.min.js',
+  ]);
+  if (
+    results.some(result => result.errorCount > 0 || result.warningCount > 0)
+  ) {
+    process.exitCode = 1;
+    console.log(`Failed`);
+    const formatter = await eslint.loadFormatter('stylish');
+    const resultText = formatter.format(results);
+    console.log(resultText);
+  }
+}
+
+async function lintEverything() {
+  console.log(`Linting known bundles...`);
+  await lint('react-14');
+  await lint('react-15');
+  await lint('react-16');
+  await lint('react-17');
+}
+
+lintEverything().catch(error => {
+  process.exitCode = 1;
+  console.error(error);
+});
diff --git a/fixtures/legacy-jsx-runtimes/package.json b/fixtures/legacy-jsx-runtimes/package.json
new file mode 100644
index 00000000000..045787764e6
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/package.json
@@ -0,0 +1,21 @@
+{
+  "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "jest": "^29.4.1"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./setupTests.js"
+    ]
+  },
+  "scripts": {
+    "install-all": "cd react-14 && yarn && cd ../react-15 && yarn && cd ../react-16 && yarn && cd ../react-17 && yarn && cd ..",
+    "lint": "node lint-runtimes.js",
+    "pretest": "yarn install-all && yarn lint",
+    "test-jsxdev-dev": "BABEL_ENV=development NODE_ENV=development jest --env=jsdom",
+    "test-jsx-dev": "BABEL_ENV=production NODE_ENV=development jest --env=jsdom",
+    "test-jsx-prod": "BABEL_ENV=production NODE_ENV=production jest --env=jsdom",
+    "test": "yarn test-jsxdev-dev && yarn test-jsx-dev && yarn test-jsx-prod"
+  }
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.development.js
new file mode 100644
index 00000000000..ba51e33d2ed
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.development.js
@@ -0,0 +1,861 @@
+/** @license React v0.14.10
+ * react-jsx-dev-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var stack = '';
+
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+function describeComponentFrame (name, source, ownerName) {
+  var sourceInfo = '';
+
+  if (source) {
+    var path = source.fileName;
+    var fileName = path.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(fileName)) {
+        var match = path.match(BEFORE_SLASH_RE);
+
+        if (match) {
+          var pathBeforeSlash = match[1];
+
+          if (pathBeforeSlash) {
+            var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
+
+var Resolved = 1;
+function refineResolvedLazyComponent(lazyComponent) {
+  return lazyComponent._status === Resolved ? lazyComponent._result : null;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return "Profiler";
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return 'Context.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        return 'Context.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type.render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var thenable = type;
+          var resolvedThenable = refineResolvedLazyComponent(thenable);
+
+          if (resolvedThenable) {
+            return getComponentName(resolvedThenable);
+          }
+
+          break;
+        }
+    }
+  }
+
+  return null;
+}
+var loggedTypeFailures = {};
+var currentlyValidatingElement = null;
+
+function setCurrentlyValidatingElement(element) {
+  currentlyValidatingElement = element;
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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 (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = require('react/lib/ReactCurrentOwner');
+
+function setCurrentlyValidatingElement$1(element) {
+  currentlyValidatingElement = element;
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = ReactCurrentOwner$1.current.getName();
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + element._owner.getName() + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+
+var jsxDEV$1 =  jsxWithValidation ;
+
+exports.jsxDEV = jsxDEV$1;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.production.min.js
new file mode 100644
index 00000000000..642385f659e
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.production.min.js
@@ -0,0 +1,9 @@
+/** @license React v0.14.10
+ * react-jsx-dev-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';require("react");exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var a=Symbol.for;exports.Fragment=a("react.fragment")}exports.jsxDEV=void 0;
diff --git a/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.development.js
new file mode 100644
index 00000000000..16b4e1bd6f7
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.development.js
@@ -0,0 +1,883 @@
+/** @license React v0.14.10
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var stack = '';
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+
+var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+function describeComponentFrame (name, source, ownerName) {
+  var sourceInfo = '';
+
+  if (source) {
+    var path = source.fileName;
+    var fileName = path.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(fileName)) {
+        var match = path.match(BEFORE_SLASH_RE);
+
+        if (match) {
+          var pathBeforeSlash = match[1];
+
+          if (pathBeforeSlash) {
+            var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
+
+var Resolved = 1;
+function refineResolvedLazyComponent(lazyComponent) {
+  return lazyComponent._status === Resolved ? lazyComponent._result : null;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return "Profiler";
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return 'Context.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        return 'Context.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type.render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var thenable = type;
+          var resolvedThenable = refineResolvedLazyComponent(thenable);
+
+          if (resolvedThenable) {
+            return getComponentName(resolvedThenable);
+          }
+
+          break;
+        }
+    }
+  }
+
+  return null;
+}
+
+var loggedTypeFailures = {};
+var currentlyValidatingElement = null;
+
+function setCurrentlyValidatingElement(element) {
+  {
+    currentlyValidatingElement = element;
+  }
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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 (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = require('react/lib/ReactCurrentOwner');
+
+function setCurrentlyValidatingElement$1(element) {
+  currentlyValidatingElement = element;
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = ReactCurrentOwner$1.current.getName();
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + element._owner.getName() + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+// even with the prod transform. This means that jsxDEV is purely
+// opt-in behavior for better messages but that we won't stop
+// giving you warnings if you use production apis.
+
+function jsxWithValidationStatic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, true);
+  }
+}
+function jsxWithValidationDynamic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, false);
+  }
+}
+
+var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+// for now we can ship identical prod functions
+
+var jsxs =  jsxWithValidationStatic ;
+
+exports.jsx = jsx;
+exports.jsxs = jsxs;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.production.min.js
new file mode 100644
index 00000000000..cda6cf808da
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.production.min.js
@@ -0,0 +1,10 @@
+/** @license React v0.14.10
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';var f=require("react"),g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment")}var m=require("react/lib/ReactCurrentOwner"),n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
diff --git a/fixtures/legacy-jsx-runtimes/react-14/jsx-dev-runtime.js b/fixtures/legacy-jsx-runtimes/react-14/jsx-dev-runtime.js
new file mode 100644
index 00000000000..324eb11e599
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/jsx-dev-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-14/jsx-runtime.js b/fixtures/legacy-jsx-runtimes/react-14/jsx-runtime.js
new file mode 100644
index 00000000000..0416df54291
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/jsx-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-14/package.json b/fixtures/legacy-jsx-runtimes/react-14/package.json
new file mode 100644
index 00000000000..20cff83c9d8
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "0.14",
+    "react-dom": "0.14"
+  }
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-14/react-14.test.js b/fixtures/legacy-jsx-runtimes/react-14/react-14.test.js
new file mode 100644
index 00000000000..f8df0a93a6e
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/react-14.test.js
@@ -0,0 +1,768 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// These tests are based on ReactJSXElement-test,
+// ReactJSXElementValidator-test, ReactComponent-test,
+// and ReactElementJSX-test.
+
+jest.mock('react/jsx-runtime', () => require('./jsx-runtime'), {virtual: true});
+jest.mock('react/jsx-dev-runtime', () => require('./jsx-dev-runtime'), {
+  virtual: true,
+});
+
+let React = require('react');
+let ReactDOM = require('react-dom');
+let ReactTestUtils = {
+  renderIntoDocument(el) {
+    const container = document.createElement('div');
+    return ReactDOM.render(el, container);
+  },
+};
+let PropTypes = React.PropTypes;
+let Component = class Component extends React.Component {
+  render() {
+    return <div />;
+  }
+};
+let RequiredPropComponent = class extends React.Component {
+  render() {
+    return <span>{this.props.prop}</span>;
+  }
+};
+RequiredPropComponent.displayName = 'RequiredPropComponent';
+RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};
+
+it('works', () => {
+  const container = document.createElement('div');
+  ReactDOM.render(<h1>hello</h1>, container);
+  expect(container.textContent).toBe('hello');
+});
+
+it('returns a complete element according to spec', () => {
+  const element = <Component />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a lower-case to be passed as the string type', () => {
+  const element = <div />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a string to be passed as the type', () => {
+  const TagName = 'div';
+  const element = <TagName />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('returns an immutable element', () => {
+  const element = <Component />;
+  if (process.env.NODE_ENV === 'development') {
+    expect(() => (element.type = 'div')).toThrow();
+  } else {
+    expect(() => (element.type = 'div')).not.toThrow();
+  }
+});
+
+it('does not reuse the object that is spread into props', () => {
+  const config = {foo: 1};
+  const element = <Component {...config} />;
+  expect(element.props.foo).toBe(1);
+  config.foo = 2;
+  expect(element.props.foo).toBe(1);
+});
+
+it('extracts key and ref from the rest of the props', () => {
+  const element = <Component key="12" ref="34" foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe('34');
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('coerces the key to a string', () => {
+  const element = <Component key={12} foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe(null);
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('merges JSX children onto the children prop', () => {
+  const a = 1;
+  const element = <Component children="text">{a}</Component>;
+  expect(element.props.children).toBe(a);
+});
+
+it('does not override children if no JSX children are provided', () => {
+  const element = <Component children="text" />;
+  expect(element.props.children).toBe('text');
+});
+
+it('overrides children if null is provided as a JSX child', () => {
+  const element = <Component children="text">{null}</Component>;
+  expect(element.props.children).toBe(null);
+});
+
+it('overrides children if undefined is provided as an argument', () => {
+  const element = <Component children="text">{undefined}</Component>;
+  expect(element.props.children).toBe(undefined);
+
+  const element2 = React.cloneElement(
+    <Component children="text" />,
+    {},
+    undefined
+  );
+  expect(element2.props.children).toBe(undefined);
+});
+
+it('merges JSX children onto the children prop in an array', () => {
+  const a = 1;
+  const b = 2;
+  const c = 3;
+  const element = (
+    <Component>
+      {a}
+      {b}
+      {c}
+    </Component>
+  );
+  expect(element.props.children).toEqual([1, 2, 3]);
+});
+
+it('allows static methods to be called using the type property', () => {
+  class StaticMethodComponent {
+    static someStaticMethod() {
+      return 'someReturnValue';
+    }
+    render() {
+      return <div />;
+    }
+  }
+
+  const element = <StaticMethodComponent />;
+  expect(element.type.someStaticMethod()).toBe('someReturnValue');
+});
+
+it('identifies valid elements', () => {
+  expect(React.isValidElement(<div />)).toEqual(true);
+  expect(React.isValidElement(<Component />)).toEqual(true);
+
+  expect(React.isValidElement(null)).toEqual(false);
+  expect(React.isValidElement(true)).toEqual(false);
+  expect(React.isValidElement({})).toEqual(false);
+  expect(React.isValidElement('string')).toEqual(false);
+  expect(React.isValidElement(Component)).toEqual(false);
+  expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+});
+
+it('is indistinguishable from a plain object', () => {
+  const element = <div className="foo" />;
+  const object = {};
+  expect(element.constructor).toBe(object.constructor);
+});
+
+it('should use default prop value when removing a prop', () => {
+  Component.defaultProps = {fruit: 'persimmon'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Component fruit="mango" />, container);
+  expect(instance.props.fruit).toBe('mango');
+
+  ReactDOM.render(<Component />, container);
+  expect(instance.props.fruit).toBe('persimmon');
+});
+
+it('should normalize props with default values', () => {
+  class NormalizingComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NormalizingComponent.defaultProps = {prop: 'testKey'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<NormalizingComponent />, container);
+  expect(instance.props.prop).toBe('testKey');
+
+  const inst2 = ReactDOM.render(
+    <NormalizingComponent prop={null} />,
+    container
+  );
+  expect(inst2.props.prop).toBe(null);
+});
+
+it('warns for keys for arrays of elements in children position', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <Component>{[<Component />, <Component />]}</Component>
+    )
+  ).toErrorDev('Each child in a list should have a unique "key" prop.', {
+    withoutStack: true,
+  });
+});
+
+it('warns for keys for arrays of elements with owner info', () => {
+  class InnerComponent extends React.Component {
+    render() {
+      return <Component>{this.props.childSet}</Component>;
+    }
+  }
+
+  class ComponentWrapper extends React.Component {
+    render() {
+      return <InnerComponent childSet={[<Component />, <Component />]} />;
+    }
+  }
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<ComponentWrapper />)
+  ).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. ',
+    {withoutStack: true}
+  );
+});
+
+it('does not warn for arrays of elements with keys', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>{[<Component key="#1" />, <Component key="#2" />]}</Component>
+  );
+});
+
+it('does not warn for iterable elements with keys', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {
+            value: done ? undefined : <Component key={'#' + i} />,
+            done: done,
+          };
+        },
+      };
+    },
+  };
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn for numeric keys in entry iterable as a child', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {value: done ? undefined : [i, <Component />], done: done};
+        },
+      };
+    },
+  };
+  iterable.entries = iterable['@@iterator'];
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn when the element is directly as children', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>
+      <Component />
+      <Component />
+    </Component>
+  );
+});
+
+it('does not warn when the child array contains non-elements', () => {
+  void (<Component>{[{}, {}]}</Component>);
+});
+
+it('should give context for PropType errors in nested components.', () => {
+  // In this test, we're making sure that if a proptype error is found in a
+  // component, we give a small hint as to which parent instantiated that
+  // component as per warnings about key usage in ReactElementValidator.
+  function MyComp({color}) {
+    return <div>My color is {color}</div>;
+  }
+  MyComp.propTypes = {
+    color: PropTypes.string,
+  };
+  class ParentComp extends React.Component {
+    render() {
+      return <MyComp color={123} />;
+    }
+  }
+  expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
+    'Warning: Failed prop type: ' +
+      'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
+      'expected `string`.',
+    {withoutStack: true}
+  );
+});
+
+it('gives a helpful error when passing null, undefined, or boolean', () => {
+  const Undefined = undefined;
+  const Null = null;
+  const True = true;
+  const Div = 'div';
+  expect(() => void (<Undefined />)).toErrorDev(
+    'Warning: React.jsx: 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 ' +
+      "component from the file it's defined in, or you might have mixed up " +
+      'default and named imports.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<Null />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: null.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<True />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: boolean.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  // No error expected
+  void (<Div />);
+});
+
+it('should check default prop values', () => {
+  RequiredPropComponent.defaultProps = {prop: null};
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<RequiredPropComponent />)
+  ).toErrorDev(
+    'Warning: Failed prop type: Required prop `prop` was not specified in ' +
+      '`RequiredPropComponent`.',
+    {withoutStack: true}
+  );
+});
+
+it('should warn on invalid prop types', () => {
+  // Since there is no prevalidation step for ES6 classes, there is no hook
+  // for us to issue a warning earlier than element creation when the error
+  // actually occurs. Since this step is skipped in production, we should just
+  // warn instead of throwing for this case.
+  class NullPropTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullPropTypeComponent.propTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullPropTypeComponent />)
+  ).toErrorDev(
+    'NullPropTypeComponent: prop type `prop` is invalid; it must be a ' +
+      'function, usually from the `prop-types` package,',
+    {withoutStack: true}
+  );
+});
+
+xit('should warn on invalid context types', () => {
+  class NullContextTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullContextTypeComponent.contextTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullContextTypeComponent />)
+  ).toErrorDev(
+    'NullContextTypeComponent: type `prop` is invalid; it must ' +
+      'be a function, usually from the `prop-types` package,'
+  );
+});
+
+it('should warn if getDefaultProps is specified on the class', () => {
+  class GetDefaultPropsComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  GetDefaultPropsComponent.getDefaultProps = () => ({
+    prop: 'foo',
+  });
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<GetDefaultPropsComponent />)
+  ).toErrorDev(
+    'getDefaultProps is only used on classic React.createClass definitions.' +
+      ' Use a static property named `defaultProps` instead.',
+    {withoutStack: true}
+  );
+});
+
+it('should warn if component declares PropTypes instead of propTypes', () => {
+  class MisspelledPropTypesComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  MisspelledPropTypesComponent.PropTypes = {
+    prop: PropTypes.string,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <MisspelledPropTypesComponent prop="hi" />
+    )
+  ).toErrorDev(
+    'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
+      'instead of `propTypes`. Did you misspell the property assignment?',
+    {withoutStack: true}
+  );
+});
+
+// Not supported.
+xit('warns for fragments with illegal attributes', () => {
+  class Foo extends React.Component {
+    render() {
+      return <React.Fragment a={1}>hello</React.Fragment>;
+    }
+  }
+
+  expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
+    'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+      'can only have `key` and `children` props.'
+  );
+});
+
+// Not supported.
+xit('warns for fragments with refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return (
+        <React.Fragment
+          ref={bar => {
+            this.foo = bar;
+          }}>
+          hello
+        </React.Fragment>
+      );
+    }
+  }
+
+  expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
+    'Invalid attribute `ref` supplied to `React.Fragment`.'
+  );
+});
+
+// Not supported.
+xit('does not warn for fragments of multiple elements without keys', () => {
+  ReactTestUtils.renderIntoDocument(
+    <>
+      <span>1</span>
+      <span>2</span>
+    </>
+  );
+});
+
+// Not supported.
+xit('warns for fragments of multiple elements with same key', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <>
+        <span key="a">1</span>
+        <span key="a">2</span>
+        <span key="b">3</span>
+      </>
+    )
+  ).toErrorDev('Encountered two children with the same key, `a`.', {
+    withoutStack: true,
+  });
+});
+
+// Not supported.
+xit('does not call lazy initializers eagerly', () => {
+  let didCall = false;
+  const Lazy = React.lazy(() => {
+    didCall = true;
+    return {then() {}};
+  });
+  <Lazy />;
+  expect(didCall).toBe(false);
+});
+
+it('supports classic refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return <div className="foo" ref="inner" />;
+    }
+  }
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Foo />, container);
+  expect(instance.refs.inner.className).toBe('foo');
+});
+
+it('should support refs on owned components', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  class Component extends React.Component {
+    render() {
+      const inner = <Wrapper object={innerObj} ref="inner" />;
+      const outer = (
+        <Wrapper object={outerObj} ref="outer">
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.refs.inner.getObject()).toEqual(innerObj);
+      expect(this.refs.outer.getObject()).toEqual(outerObj);
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+});
+
+it('should support callback-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    render() {
+      const inner = (
+        <Wrapper object={innerObj} ref={c => (this.innerRef = c)} />
+      );
+      const outer = (
+        <Wrapper object={outerObj} ref={c => (this.outerRef = c)}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.getObject()).toEqual(innerObj);
+      expect(this.outerRef.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+// Not supported.
+xit('should support object-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    constructor() {
+      super();
+      this.innerRef = React.createRef();
+      this.outerRef = React.createRef();
+    }
+    render() {
+      const inner = <Wrapper object={innerObj} ref={this.innerRef} />;
+      const outer = (
+        <Wrapper object={outerObj} ref={this.outerRef}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.current.getObject()).toEqual(innerObj);
+      expect(this.outerRef.current.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should support new-style refs with mixed-up owners', () => {
+  class Wrapper extends React.Component {
+    getTitle = () => {
+      return this.props.title;
+    };
+
+    render() {
+      return this.props.getContent();
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    getInner = () => {
+      // (With old-style refs, it's impossible to get a ref to this div
+      // because Wrapper is the current owner when this function is called.)
+      return <div className="inner" ref={c => (this.innerRef = c)} />;
+    };
+
+    render() {
+      return (
+        <Wrapper
+          title="wrapper"
+          ref={c => (this.wrapperRef = c)}
+          getContent={this.getInner}
+        />
+      );
+    }
+
+    componentDidMount() {
+      // Check .props.title to make sure we got the right elements back
+      expect(this.wrapperRef.getTitle()).toBe('wrapper');
+      expect(this.innerRef.className).toBe('inner');
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should warn when `key` is being accessed on composite element', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.key} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child key="0" />
+          <Child key="1" />
+          <Child key="2" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)',
+    {withoutStack: true}
+  );
+});
+
+it('should warn when `ref` is being accessed', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.ref} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child ref="childElement" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)',
+    {withoutStack: true}
+  );
+});
+
+// Note: no warning before 16.
+it('should NOT warn when owner and self are different for string refs', () => {
+  class ClassWithRenderProp extends React.Component {
+    render() {
+      return this.props.children();
+    }
+  }
+
+  class ClassParent extends React.Component {
+    render() {
+      return (
+        <ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
+      );
+    }
+  }
+
+  const container = document.createElement('div');
+  ReactDOM.render(<ClassParent />, container);
+});
diff --git a/fixtures/legacy-jsx-runtimes/react-14/yarn.lock b/fixtures/legacy-jsx-runtimes/react-14/yarn.lock
new file mode 100644
index 00000000000..e6924d10965
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/yarn.lock
@@ -0,0 +1,285 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+acorn@^5.2.1:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
+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=
+
+ast-types@0.9.6:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
+  integrity sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=
+
+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=
+
+base62@^1.1.0:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/base62/-/base62-1.2.8.tgz#1264cb0fb848d875792877479dbe8bae6bae3428"
+  integrity sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==
+
+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"
+
+commander@^2.5.0:
+  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==
+
+commoner@^0.10.1:
+  version "0.10.8"
+  resolved "https://registry.yarnpkg.com/commoner/-/commoner-0.10.8.tgz#34fc3672cd24393e8bb47e70caa0293811f4f2c5"
+  integrity sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=
+  dependencies:
+    commander "^2.5.0"
+    detective "^4.3.1"
+    glob "^5.0.15"
+    graceful-fs "^4.1.2"
+    iconv-lite "^0.4.5"
+    mkdirp "^0.5.0"
+    private "^0.1.6"
+    q "^1.1.2"
+    recast "^0.11.17"
+
+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=
+
+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=
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
+detective@^4.3.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.7.1.tgz#0eca7314338442febb6d65da54c10bb1c82b246e"
+  integrity sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==
+  dependencies:
+    acorn "^5.2.1"
+    defined "^1.0.0"
+
+envify@^3.0.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/envify/-/envify-3.4.1.tgz#d7122329e8df1688ba771b12501917c9ce5cbce8"
+  integrity sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=
+  dependencies:
+    jstransform "^11.0.3"
+    through "~2.3.4"
+
+esprima-fb@^15001.1.0-dev-harmony-fb:
+  version "15001.1.0-dev-harmony-fb"
+  resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz#30a947303c6b8d5e955bee2b99b1d233206a6901"
+  integrity sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=
+
+esprima@~3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
+
+fbjs@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.6.1.tgz#9636b7705f5ba9684d44b72f78321254afc860f7"
+  integrity sha1-lja3cF9bqWhNRLcveDISVK/IYPc=
+  dependencies:
+    core-js "^1.0.0"
+    loose-envify "^1.0.0"
+    promise "^7.0.3"
+    ua-parser-js "^0.7.9"
+    whatwg-fetch "^0.9.0"
+
+glob@^5.0.15:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+graceful-fs@^4.1.2:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
+iconv-lite@^0.4.5:
+  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.2 < 3"
+
+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:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+"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==
+
+jstransform@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-11.0.3.tgz#09a78993e0ae4d4ef4487f6155a91f6190cb4223"
+  integrity sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=
+  dependencies:
+    base62 "^1.1.0"
+    commoner "^0.10.1"
+    esprima-fb "^15001.1.0-dev-harmony-fb"
+    object-assign "^2.0.0"
+    source-map "^0.4.2"
+
+loose-envify@^1.0.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"
+
+"minimatch@2 || 3":
+  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@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mkdirp@^0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+object-assign@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
+  integrity sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
+
+promise@^7.0.3:
+  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"
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+react-dom@0.14:
+  version "0.14.9"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.14.9.tgz#05064a3dcf0fb1880a3b2bfc9d58c55d8d9f6293"
+  integrity sha1-BQZKPc8PsYgKOyv8nVjFXY2fYpM=
+
+react@0.14:
+  version "0.14.9"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.14.9.tgz#9110a6497c49d44ba1c0edd317aec29c2e0d91d1"
+  integrity sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=
+  dependencies:
+    envify "^3.0.0"
+    fbjs "^0.6.1"
+
+recast@^0.11.17:
+  version "0.11.23"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
+  integrity sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
+  dependencies:
+    ast-types "0.9.6"
+    esprima "~3.1.0"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+source-map@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@~0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+through@~2.3.4:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+ua-parser-js@^0.7.9:
+  version "0.7.22"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.22.tgz#960df60a5f911ea8f1c818f3747b99c6e177eae3"
+  integrity sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==
+
+whatwg-fetch@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"
+  integrity sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA=
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
diff --git a/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.development.js
new file mode 100644
index 00000000000..60b10fec3c7
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.development.js
@@ -0,0 +1,866 @@
+/** @license React v15.7.0
+ * react-jsx-dev-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+var ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var stack = '';
+
+    if (currentlyValidatingElement) {
+      stack += ReactComponentTreeHook.getCurrentStackAddendum(currentlyValidatingElement)
+    }
+
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+function describeComponentFrame (name, source, ownerName) {
+  var sourceInfo = '';
+
+  if (source) {
+    var path = source.fileName;
+    var fileName = path.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(fileName)) {
+        var match = path.match(BEFORE_SLASH_RE);
+
+        if (match) {
+          var pathBeforeSlash = match[1];
+
+          if (pathBeforeSlash) {
+            var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
+
+var Resolved = 1;
+function refineResolvedLazyComponent(lazyComponent) {
+  return lazyComponent._status === Resolved ? lazyComponent._result : null;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return "Profiler";
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return 'Context.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        return 'Context.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type.render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var thenable = type;
+          var resolvedThenable = refineResolvedLazyComponent(thenable);
+
+          if (resolvedThenable) {
+            return getComponentName(resolvedThenable);
+          }
+
+          break;
+        }
+    }
+  }
+
+  return null;
+}
+var loggedTypeFailures = {};
+var currentlyValidatingElement = null;
+
+function setCurrentlyValidatingElement(element) {
+  currentlyValidatingElement = element;
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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 (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = require('react/lib/ReactCurrentOwner');
+
+function setCurrentlyValidatingElement$1(element) {
+  currentlyValidatingElement = element;
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = ReactCurrentOwner$1.current.getName();
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + element._owner.getName() + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+
+var jsxDEV$1 =  jsxWithValidation ;
+
+exports.jsxDEV = jsxDEV$1;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.production.min.js
new file mode 100644
index 00000000000..5ae2344042f
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.production.min.js
@@ -0,0 +1,9 @@
+/** @license React v15.7.0
+ * react-jsx-dev-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';require("react");exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var a=Symbol.for;exports.Fragment=a("react.fragment")}exports.jsxDEV=void 0;
diff --git a/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.development.js
new file mode 100644
index 00000000000..f413c644c7f
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.development.js
@@ -0,0 +1,888 @@
+/** @license React v15.7.0
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+var ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var stack = '';
+
+    if (currentlyValidatingElement) {
+      stack += ReactComponentTreeHook.getCurrentStackAddendum(currentlyValidatingElement)
+    }
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+
+var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+function describeComponentFrame (name, source, ownerName) {
+  var sourceInfo = '';
+
+  if (source) {
+    var path = source.fileName;
+    var fileName = path.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(fileName)) {
+        var match = path.match(BEFORE_SLASH_RE);
+
+        if (match) {
+          var pathBeforeSlash = match[1];
+
+          if (pathBeforeSlash) {
+            var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
+
+var Resolved = 1;
+function refineResolvedLazyComponent(lazyComponent) {
+  return lazyComponent._status === Resolved ? lazyComponent._result : null;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return "Profiler";
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return 'Context.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        return 'Context.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type.render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var thenable = type;
+          var resolvedThenable = refineResolvedLazyComponent(thenable);
+
+          if (resolvedThenable) {
+            return getComponentName(resolvedThenable);
+          }
+
+          break;
+        }
+    }
+  }
+
+  return null;
+}
+
+var loggedTypeFailures = {};
+var currentlyValidatingElement = null;
+
+function setCurrentlyValidatingElement(element) {
+  {
+    currentlyValidatingElement = element;
+  }
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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 (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = require('react/lib/ReactCurrentOwner');
+
+function setCurrentlyValidatingElement$1(element) {
+  currentlyValidatingElement = element;
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = ReactCurrentOwner$1.current.getName();
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + element._owner.getName() + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+// even with the prod transform. This means that jsxDEV is purely
+// opt-in behavior for better messages but that we won't stop
+// giving you warnings if you use production apis.
+
+function jsxWithValidationStatic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, true);
+  }
+}
+function jsxWithValidationDynamic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, false);
+  }
+}
+
+var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+// for now we can ship identical prod functions
+
+var jsxs =  jsxWithValidationStatic ;
+
+exports.jsx = jsx;
+exports.jsxs = jsxs;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.production.min.js
new file mode 100644
index 00000000000..43c7bc6553c
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.production.min.js
@@ -0,0 +1,10 @@
+/** @license React v15.7.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';var f=require("react"),g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment")}var m=require("react/lib/ReactCurrentOwner"),n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
diff --git a/fixtures/legacy-jsx-runtimes/react-15/jsx-dev-runtime.js b/fixtures/legacy-jsx-runtimes/react-15/jsx-dev-runtime.js
new file mode 100644
index 00000000000..324eb11e599
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/jsx-dev-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-15/jsx-runtime.js b/fixtures/legacy-jsx-runtimes/react-15/jsx-runtime.js
new file mode 100644
index 00000000000..0416df54291
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/jsx-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-15/package.json b/fixtures/legacy-jsx-runtimes/react-15/package.json
new file mode 100644
index 00000000000..e5d144ca053
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "15",
+    "react-dom": "15"
+  }
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-15/react-15.test.js b/fixtures/legacy-jsx-runtimes/react-15/react-15.test.js
new file mode 100644
index 00000000000..e85ecb6aec3
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/react-15.test.js
@@ -0,0 +1,765 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// These tests are based on ReactJSXElement-test,
+// ReactJSXElementValidator-test, ReactComponent-test,
+// and ReactElementJSX-test.
+
+jest.mock('react/jsx-runtime', () => require('./jsx-runtime'), {virtual: true});
+jest.mock('react/jsx-dev-runtime', () => require('./jsx-dev-runtime'), {
+  virtual: true,
+});
+
+let React = require('react');
+let ReactDOM = require('react-dom');
+let ReactTestUtils = {
+  renderIntoDocument(el) {
+    const container = document.createElement('div');
+    return ReactDOM.render(el, container);
+  },
+};
+let PropTypes = require('prop-types');
+let Component = class Component extends React.Component {
+  render() {
+    return <div />;
+  }
+};
+let RequiredPropComponent = class extends React.Component {
+  render() {
+    return <span>{this.props.prop}</span>;
+  }
+};
+RequiredPropComponent.displayName = 'RequiredPropComponent';
+RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};
+
+it('works', () => {
+  const container = document.createElement('div');
+  ReactDOM.render(<h1>hello</h1>, container);
+  expect(container.textContent).toBe('hello');
+});
+
+it('returns a complete element according to spec', () => {
+  const element = <Component />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a lower-case to be passed as the string type', () => {
+  const element = <div />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a string to be passed as the type', () => {
+  const TagName = 'div';
+  const element = <TagName />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('returns an immutable element', () => {
+  const element = <Component />;
+  if (process.env.NODE_ENV === 'development') {
+    expect(() => (element.type = 'div')).toThrow();
+  } else {
+    expect(() => (element.type = 'div')).not.toThrow();
+  }
+});
+
+it('does not reuse the object that is spread into props', () => {
+  const config = {foo: 1};
+  const element = <Component {...config} />;
+  expect(element.props.foo).toBe(1);
+  config.foo = 2;
+  expect(element.props.foo).toBe(1);
+});
+
+it('extracts key and ref from the rest of the props', () => {
+  const element = <Component key="12" ref="34" foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe('34');
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('coerces the key to a string', () => {
+  const element = <Component key={12} foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe(null);
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('merges JSX children onto the children prop', () => {
+  const a = 1;
+  const element = <Component children="text">{a}</Component>;
+  expect(element.props.children).toBe(a);
+});
+
+it('does not override children if no JSX children are provided', () => {
+  const element = <Component children="text" />;
+  expect(element.props.children).toBe('text');
+});
+
+it('overrides children if null is provided as a JSX child', () => {
+  const element = <Component children="text">{null}</Component>;
+  expect(element.props.children).toBe(null);
+});
+
+it('overrides children if undefined is provided as an argument', () => {
+  const element = <Component children="text">{undefined}</Component>;
+  expect(element.props.children).toBe(undefined);
+
+  const element2 = React.cloneElement(
+    <Component children="text" />,
+    {},
+    undefined
+  );
+  expect(element2.props.children).toBe(undefined);
+});
+
+it('merges JSX children onto the children prop in an array', () => {
+  const a = 1;
+  const b = 2;
+  const c = 3;
+  const element = (
+    <Component>
+      {a}
+      {b}
+      {c}
+    </Component>
+  );
+  expect(element.props.children).toEqual([1, 2, 3]);
+});
+
+it('allows static methods to be called using the type property', () => {
+  class StaticMethodComponent {
+    static someStaticMethod() {
+      return 'someReturnValue';
+    }
+    render() {
+      return <div />;
+    }
+  }
+
+  const element = <StaticMethodComponent />;
+  expect(element.type.someStaticMethod()).toBe('someReturnValue');
+});
+
+it('identifies valid elements', () => {
+  expect(React.isValidElement(<div />)).toEqual(true);
+  expect(React.isValidElement(<Component />)).toEqual(true);
+
+  expect(React.isValidElement(null)).toEqual(false);
+  expect(React.isValidElement(true)).toEqual(false);
+  expect(React.isValidElement({})).toEqual(false);
+  expect(React.isValidElement('string')).toEqual(false);
+  expect(React.isValidElement(Component)).toEqual(false);
+  expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+});
+
+it('is indistinguishable from a plain object', () => {
+  const element = <div className="foo" />;
+  const object = {};
+  expect(element.constructor).toBe(object.constructor);
+});
+
+it('should use default prop value when removing a prop', () => {
+  Component.defaultProps = {fruit: 'persimmon'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Component fruit="mango" />, container);
+  expect(instance.props.fruit).toBe('mango');
+
+  ReactDOM.render(<Component />, container);
+  expect(instance.props.fruit).toBe('persimmon');
+});
+
+it('should normalize props with default values', () => {
+  class NormalizingComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NormalizingComponent.defaultProps = {prop: 'testKey'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<NormalizingComponent />, container);
+  expect(instance.props.prop).toBe('testKey');
+
+  const inst2 = ReactDOM.render(
+    <NormalizingComponent prop={null} />,
+    container
+  );
+  expect(inst2.props.prop).toBe(null);
+});
+
+it('warns for keys for arrays of elements in children position', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <Component>{[<Component />, <Component />]}</Component>
+    )
+  ).toErrorDev('Each child in a list should have a unique "key" prop.');
+});
+
+it('warns for keys for arrays of elements with owner info', () => {
+  class InnerComponent extends React.Component {
+    render() {
+      return <Component>{this.props.childSet}</Component>;
+    }
+  }
+
+  class ComponentWrapper extends React.Component {
+    render() {
+      return <InnerComponent childSet={[<Component />, <Component />]} />;
+    }
+  }
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<ComponentWrapper />)
+  ).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. '
+  );
+});
+
+it('does not warn for arrays of elements with keys', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>{[<Component key="#1" />, <Component key="#2" />]}</Component>
+  );
+});
+
+it('does not warn for iterable elements with keys', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {
+            value: done ? undefined : <Component key={'#' + i} />,
+            done: done,
+          };
+        },
+      };
+    },
+  };
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn for numeric keys in entry iterable as a child', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {value: done ? undefined : [i, <Component />], done: done};
+        },
+      };
+    },
+  };
+  iterable.entries = iterable['@@iterator'];
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn when the element is directly as children', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>
+      <Component />
+      <Component />
+    </Component>
+  );
+});
+
+it('does not warn when the child array contains non-elements', () => {
+  void (<Component>{[{}, {}]}</Component>);
+});
+
+it('should give context for PropType errors in nested components.', () => {
+  // In this test, we're making sure that if a proptype error is found in a
+  // component, we give a small hint as to which parent instantiated that
+  // component as per warnings about key usage in ReactElementValidator.
+  function MyComp({color}) {
+    return <div>My color is {color}</div>;
+  }
+  MyComp.propTypes = {
+    color: PropTypes.string,
+  };
+  class ParentComp extends React.Component {
+    render() {
+      return <MyComp color={123} />;
+    }
+  }
+  expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
+    'Warning: Failed prop type: ' +
+      'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
+      'expected `string`.\n' +
+      '    in MyComp (at **)\n' +
+      '    in ParentComp (at **)'
+  );
+});
+
+it('gives a helpful error when passing null, undefined, or boolean', () => {
+  const Undefined = undefined;
+  const Null = null;
+  const True = true;
+  const Div = 'div';
+  expect(() => void (<Undefined />)).toErrorDev(
+    'Warning: React.jsx: 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 ' +
+      "component from the file it's defined in, or you might have mixed up " +
+      'default and named imports.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<Null />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: null.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<True />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: boolean.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  // No error expected
+  void (<Div />);
+});
+
+it('should check default prop values', () => {
+  RequiredPropComponent.defaultProps = {prop: null};
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<RequiredPropComponent />)
+  ).toErrorDev(
+    'Warning: Failed prop type: The prop `prop` is marked as required in ' +
+      '`RequiredPropComponent`, but its value is `null`.\n' +
+      '    in RequiredPropComponent (at **)'
+  );
+});
+
+it('should warn on invalid prop types', () => {
+  // Since there is no prevalidation step for ES6 classes, there is no hook
+  // for us to issue a warning earlier than element creation when the error
+  // actually occurs. Since this step is skipped in production, we should just
+  // warn instead of throwing for this case.
+  class NullPropTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullPropTypeComponent.propTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullPropTypeComponent />)
+  ).toErrorDev(
+    'NullPropTypeComponent: prop type `prop` is invalid; it must be a ' +
+      'function, usually from the `prop-types` package,'
+  );
+});
+
+xit('should warn on invalid context types', () => {
+  class NullContextTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullContextTypeComponent.contextTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullContextTypeComponent />)
+  ).toErrorDev(
+    'NullContextTypeComponent: type `prop` is invalid; it must ' +
+      'be a function, usually from the `prop-types` package,'
+  );
+});
+
+it('should warn if getDefaultProps is specified on the class', () => {
+  class GetDefaultPropsComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  GetDefaultPropsComponent.getDefaultProps = () => ({
+    prop: 'foo',
+  });
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<GetDefaultPropsComponent />)
+  ).toErrorDev(
+    'getDefaultProps is only used on classic React.createClass definitions.' +
+      ' Use a static property named `defaultProps` instead.',
+    {withoutStack: true}
+  );
+});
+
+it('should warn if component declares PropTypes instead of propTypes', () => {
+  class MisspelledPropTypesComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  MisspelledPropTypesComponent.PropTypes = {
+    prop: PropTypes.string,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <MisspelledPropTypesComponent prop="hi" />
+    )
+  ).toErrorDev(
+    'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
+      'instead of `propTypes`. Did you misspell the property assignment?',
+    {withoutStack: true}
+  );
+});
+
+// Not supported.
+xit('warns for fragments with illegal attributes', () => {
+  class Foo extends React.Component {
+    render() {
+      return <React.Fragment a={1}>hello</React.Fragment>;
+    }
+  }
+
+  expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
+    'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+      'can only have `key` and `children` props.'
+  );
+});
+
+// Not supported.
+xit('warns for fragments with refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return (
+        <React.Fragment
+          ref={bar => {
+            this.foo = bar;
+          }}>
+          hello
+        </React.Fragment>
+      );
+    }
+  }
+
+  expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
+    'Invalid attribute `ref` supplied to `React.Fragment`.'
+  );
+});
+
+// Not supported.
+xit('does not warn for fragments of multiple elements without keys', () => {
+  ReactTestUtils.renderIntoDocument(
+    <>
+      <span>1</span>
+      <span>2</span>
+    </>
+  );
+});
+
+// Not supported.
+xit('warns for fragments of multiple elements with same key', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <>
+        <span key="a">1</span>
+        <span key="a">2</span>
+        <span key="b">3</span>
+      </>
+    )
+  ).toErrorDev('Encountered two children with the same key, `a`.', {
+    withoutStack: true,
+  });
+});
+
+// Not supported.
+xit('does not call lazy initializers eagerly', () => {
+  let didCall = false;
+  const Lazy = React.lazy(() => {
+    didCall = true;
+    return {then() {}};
+  });
+  <Lazy />;
+  expect(didCall).toBe(false);
+});
+
+it('supports classic refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return <div className="foo" ref="inner" />;
+    }
+  }
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Foo />, container);
+  expect(instance.refs.inner.className).toBe('foo');
+});
+
+it('should support refs on owned components', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  class Component extends React.Component {
+    render() {
+      const inner = <Wrapper object={innerObj} ref="inner" />;
+      const outer = (
+        <Wrapper object={outerObj} ref="outer">
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.refs.inner.getObject()).toEqual(innerObj);
+      expect(this.refs.outer.getObject()).toEqual(outerObj);
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+});
+
+it('should support callback-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    render() {
+      const inner = (
+        <Wrapper object={innerObj} ref={c => (this.innerRef = c)} />
+      );
+      const outer = (
+        <Wrapper object={outerObj} ref={c => (this.outerRef = c)}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.getObject()).toEqual(innerObj);
+      expect(this.outerRef.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+// Not supported.
+xit('should support object-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    constructor() {
+      super();
+      this.innerRef = React.createRef();
+      this.outerRef = React.createRef();
+    }
+    render() {
+      const inner = <Wrapper object={innerObj} ref={this.innerRef} />;
+      const outer = (
+        <Wrapper object={outerObj} ref={this.outerRef}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.current.getObject()).toEqual(innerObj);
+      expect(this.outerRef.current.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should support new-style refs with mixed-up owners', () => {
+  class Wrapper extends React.Component {
+    getTitle = () => {
+      return this.props.title;
+    };
+
+    render() {
+      return this.props.getContent();
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    getInner = () => {
+      // (With old-style refs, it's impossible to get a ref to this div
+      // because Wrapper is the current owner when this function is called.)
+      return <div className="inner" ref={c => (this.innerRef = c)} />;
+    };
+
+    render() {
+      return (
+        <Wrapper
+          title="wrapper"
+          ref={c => (this.wrapperRef = c)}
+          getContent={this.getInner}
+        />
+      );
+    }
+
+    componentDidMount() {
+      // Check .props.title to make sure we got the right elements back
+      expect(this.wrapperRef.getTitle()).toBe('wrapper');
+      expect(this.innerRef.className).toBe('inner');
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should warn when `key` is being accessed on composite element', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.key} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child key="0" />
+          <Child key="1" />
+          <Child key="2" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)',
+    {withoutStack: true}
+  );
+});
+
+it('should warn when `ref` is being accessed', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.ref} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child ref="childElement" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)',
+    {withoutStack: true}
+  );
+});
+
+// Note: no warning before 16.
+it('should NOT warn when owner and self are different for string refs', () => {
+  class ClassWithRenderProp extends React.Component {
+    render() {
+      return this.props.children();
+    }
+  }
+
+  class ClassParent extends React.Component {
+    render() {
+      return (
+        <ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
+      );
+    }
+  }
+
+  const container = document.createElement('div');
+  ReactDOM.render(<ClassParent />, container);
+});
diff --git a/fixtures/legacy-jsx-runtimes/react-15/yarn.lock b/fixtures/legacy-jsx-runtimes/react-15/yarn.lock
new file mode 100644
index 00000000000..47c01c42e82
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/yarn.lock
@@ -0,0 +1,149 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+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=
+
+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=
+
+create-react-class@^15.6.0:
+  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"
+
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
+fbjs@^0.8.9:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
+iconv-lite@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
+  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+
+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"
+
+"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==
+
+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"
+
+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"
+
+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=
+
+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.5.10:
+  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"
+
+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-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+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"
+
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+ua-parser-js@^0.7.18:
+  version "0.7.22"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.22.tgz#960df60a5f911ea8f1c818f3747b99c6e177eae3"
+  integrity sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==
+
+whatwg-fetch@>=0.10.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
+  integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
diff --git a/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.development.js
new file mode 100644
index 00000000000..f76851bf9eb
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.development.js
@@ -0,0 +1,889 @@
+/** @license React v16.14.0
+ * react-jsx-dev-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+    var stack = '';
+
+    if (currentlyValidatingElement) {
+      var name = getComponentName(currentlyValidatingElement.type);
+      var owner = currentlyValidatingElement._owner;
+      stack += describeComponentFrame(name, currentlyValidatingElement._source, owner && getComponentName(owner.type));
+    }
+
+    stack += ReactDebugCurrentFrame.getStackAddendum();
+
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+function describeComponentFrame (name, source, ownerName) {
+  var sourceInfo = '';
+
+  if (source) {
+    var path = source.fileName;
+    var fileName = path.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(fileName)) {
+        var match = path.match(BEFORE_SLASH_RE);
+
+        if (match) {
+          var pathBeforeSlash = match[1];
+
+          if (pathBeforeSlash) {
+            var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
+
+var Resolved = 1;
+function refineResolvedLazyComponent(lazyComponent) {
+  return lazyComponent._status === Resolved ? lazyComponent._result : null;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return "Profiler";
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return 'Context.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        return 'Context.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type.render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var thenable = type;
+          var resolvedThenable = refineResolvedLazyComponent(thenable);
+
+          if (resolvedThenable) {
+            return getComponentName(resolvedThenable);
+          }
+
+          break;
+        }
+    }
+  }
+
+  return null;
+}
+var loggedTypeFailures = {};
+var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+var currentlyValidatingElement = null;
+
+function setCurrentlyValidatingElement(element) {
+  currentlyValidatingElement = element;
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function warnIfStringRefCannotBeAutoConverted(config, self) {
+  {
+    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+      var componentName = getComponentName(ReactCurrentOwner.current.type);
+
+      if (!didWarnAboutStringRefs[componentName]) {
+        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://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+
+        didWarnAboutStringRefs[componentName] = true;
+      }
+    }
+  }
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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, self);
+    } // Remaining properties are added to a new props object
+
+
+    for (propName in config) {
+      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+function setCurrentlyValidatingElement$1(element) {
+  currentlyValidatingElement = element;
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = getComponentName(ReactCurrentOwner$1.current.type);
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+
+var jsxDEV$1 =  jsxWithValidation ;
+
+exports.jsxDEV = jsxDEV$1;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.production.min.js
new file mode 100644
index 00000000000..c0d24625ce9
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.production.min.js
@@ -0,0 +1,9 @@
+/** @license React v16.14.0
+ * react-jsx-dev-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';require("react");exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var a=Symbol.for;exports.Fragment=a("react.fragment")}exports.jsxDEV=void 0;
diff --git a/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.development.js
new file mode 100644
index 00000000000..d82dcec87d7
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.development.js
@@ -0,0 +1,911 @@
+/** @license React v16.14.0
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+    var stack = '';
+
+    if (currentlyValidatingElement) {
+      var name = getComponentName(currentlyValidatingElement.type);
+      var owner = currentlyValidatingElement._owner;
+      stack += describeComponentFrame(name, currentlyValidatingElement._source, owner && getComponentName(owner.type));
+    }
+
+    stack += ReactDebugCurrentFrame.getStackAddendum();
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+
+var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+function describeComponentFrame (name, source, ownerName) {
+  var sourceInfo = '';
+
+  if (source) {
+    var path = source.fileName;
+    var fileName = path.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(fileName)) {
+        var match = path.match(BEFORE_SLASH_RE);
+
+        if (match) {
+          var pathBeforeSlash = match[1];
+
+          if (pathBeforeSlash) {
+            var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}
+
+var Resolved = 1;
+function refineResolvedLazyComponent(lazyComponent) {
+  return lazyComponent._status === Resolved ? lazyComponent._result : null;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return "Profiler";
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        return 'Context.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        return 'Context.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type.render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var thenable = type;
+          var resolvedThenable = refineResolvedLazyComponent(thenable);
+
+          if (resolvedThenable) {
+            return getComponentName(resolvedThenable);
+          }
+
+          break;
+        }
+    }
+  }
+
+  return null;
+}
+
+var loggedTypeFailures = {};
+var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+var currentlyValidatingElement = null;
+
+function setCurrentlyValidatingElement(element) {
+  {
+    currentlyValidatingElement = element;
+  }
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function warnIfStringRefCannotBeAutoConverted(config, self) {
+  {
+    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+      var componentName = getComponentName(ReactCurrentOwner.current.type);
+
+      if (!didWarnAboutStringRefs[componentName]) {
+        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://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+
+        didWarnAboutStringRefs[componentName] = true;
+      }
+    }
+  }
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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, self);
+    } // Remaining properties are added to a new props object
+
+
+    for (propName in config) {
+      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+function setCurrentlyValidatingElement$1(element) {
+  currentlyValidatingElement = element;
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = getComponentName(ReactCurrentOwner$1.current.type);
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+// even with the prod transform. This means that jsxDEV is purely
+// opt-in behavior for better messages but that we won't stop
+// giving you warnings if you use production apis.
+
+function jsxWithValidationStatic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, true);
+  }
+}
+function jsxWithValidationDynamic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, false);
+  }
+}
+
+var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+// for now we can ship identical prod functions
+
+var jsxs =  jsxWithValidationStatic ;
+
+exports.jsx = jsx;
+exports.jsxs = jsxs;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.production.min.js
new file mode 100644
index 00000000000..20eee7394f2
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.production.min.js
@@ -0,0 +1,10 @@
+/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';var f=require("react"),g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
diff --git a/fixtures/legacy-jsx-runtimes/react-16/jsx-dev-runtime.js b/fixtures/legacy-jsx-runtimes/react-16/jsx-dev-runtime.js
new file mode 100644
index 00000000000..324eb11e599
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/jsx-dev-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-16/jsx-runtime.js b/fixtures/legacy-jsx-runtimes/react-16/jsx-runtime.js
new file mode 100644
index 00000000000..0416df54291
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/jsx-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-16/package.json b/fixtures/legacy-jsx-runtimes/react-16/package.json
new file mode 100644
index 00000000000..a283476fb76
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "16",
+    "react-dom": "16"
+  }
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-16/react-16.test.js b/fixtures/legacy-jsx-runtimes/react-16/react-16.test.js
new file mode 100644
index 00000000000..66a82ed1651
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/react-16.test.js
@@ -0,0 +1,767 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// These tests are based on ReactJSXElement-test,
+// ReactJSXElementValidator-test, ReactComponent-test,
+// and ReactElementJSX-test.
+
+jest.mock('react/jsx-runtime', () => require('./jsx-runtime'), {virtual: true});
+jest.mock('react/jsx-dev-runtime', () => require('./jsx-dev-runtime'), {
+  virtual: true,
+});
+
+let React = require('react');
+let ReactDOM = require('react-dom');
+let ReactTestUtils = {
+  renderIntoDocument(el) {
+    const container = document.createElement('div');
+    return ReactDOM.render(el, container);
+  },
+};
+let PropTypes = require('prop-types');
+let Component = class Component extends React.Component {
+  render() {
+    return <div />;
+  }
+};
+let RequiredPropComponent = class extends React.Component {
+  render() {
+    return <span>{this.props.prop}</span>;
+  }
+};
+RequiredPropComponent.displayName = 'RequiredPropComponent';
+RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};
+
+it('works', () => {
+  const container = document.createElement('div');
+  ReactDOM.render(<h1>hello</h1>, container);
+  expect(container.textContent).toBe('hello');
+});
+
+it('returns a complete element according to spec', () => {
+  const element = <Component />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a lower-case to be passed as the string type', () => {
+  const element = <div />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a string to be passed as the type', () => {
+  const TagName = 'div';
+  const element = <TagName />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('returns an immutable element', () => {
+  const element = <Component />;
+  if (process.env.NODE_ENV === 'development') {
+    expect(() => (element.type = 'div')).toThrow();
+  } else {
+    expect(() => (element.type = 'div')).not.toThrow();
+  }
+});
+
+it('does not reuse the object that is spread into props', () => {
+  const config = {foo: 1};
+  const element = <Component {...config} />;
+  expect(element.props.foo).toBe(1);
+  config.foo = 2;
+  expect(element.props.foo).toBe(1);
+});
+
+it('extracts key and ref from the rest of the props', () => {
+  const element = <Component key="12" ref="34" foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe('34');
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('coerces the key to a string', () => {
+  const element = <Component key={12} foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe(null);
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('merges JSX children onto the children prop', () => {
+  const a = 1;
+  const element = <Component children="text">{a}</Component>;
+  expect(element.props.children).toBe(a);
+});
+
+it('does not override children if no JSX children are provided', () => {
+  const element = <Component children="text" />;
+  expect(element.props.children).toBe('text');
+});
+
+it('overrides children if null is provided as a JSX child', () => {
+  const element = <Component children="text">{null}</Component>;
+  expect(element.props.children).toBe(null);
+});
+
+it('overrides children if undefined is provided as an argument', () => {
+  const element = <Component children="text">{undefined}</Component>;
+  expect(element.props.children).toBe(undefined);
+
+  const element2 = React.cloneElement(
+    <Component children="text" />,
+    {},
+    undefined
+  );
+  expect(element2.props.children).toBe(undefined);
+});
+
+it('merges JSX children onto the children prop in an array', () => {
+  const a = 1;
+  const b = 2;
+  const c = 3;
+  const element = (
+    <Component>
+      {a}
+      {b}
+      {c}
+    </Component>
+  );
+  expect(element.props.children).toEqual([1, 2, 3]);
+});
+
+it('allows static methods to be called using the type property', () => {
+  class StaticMethodComponent {
+    static someStaticMethod() {
+      return 'someReturnValue';
+    }
+    render() {
+      return <div />;
+    }
+  }
+
+  const element = <StaticMethodComponent />;
+  expect(element.type.someStaticMethod()).toBe('someReturnValue');
+});
+
+it('identifies valid elements', () => {
+  expect(React.isValidElement(<div />)).toEqual(true);
+  expect(React.isValidElement(<Component />)).toEqual(true);
+
+  expect(React.isValidElement(null)).toEqual(false);
+  expect(React.isValidElement(true)).toEqual(false);
+  expect(React.isValidElement({})).toEqual(false);
+  expect(React.isValidElement('string')).toEqual(false);
+  expect(React.isValidElement(Component)).toEqual(false);
+  expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+});
+
+it('is indistinguishable from a plain object', () => {
+  const element = <div className="foo" />;
+  const object = {};
+  expect(element.constructor).toBe(object.constructor);
+});
+
+it('should use default prop value when removing a prop', () => {
+  Component.defaultProps = {fruit: 'persimmon'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Component fruit="mango" />, container);
+  expect(instance.props.fruit).toBe('mango');
+
+  ReactDOM.render(<Component />, container);
+  expect(instance.props.fruit).toBe('persimmon');
+});
+
+it('should normalize props with default values', () => {
+  class NormalizingComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NormalizingComponent.defaultProps = {prop: 'testKey'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<NormalizingComponent />, container);
+  expect(instance.props.prop).toBe('testKey');
+
+  const inst2 = ReactDOM.render(
+    <NormalizingComponent prop={null} />,
+    container
+  );
+  expect(inst2.props.prop).toBe(null);
+});
+
+it('warns for keys for arrays of elements in children position', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <Component>{[<Component />, <Component />]}</Component>
+    )
+  ).toErrorDev('Each child in a list should have a unique "key" prop.');
+});
+
+it('warns for keys for arrays of elements with owner info', () => {
+  class InnerComponent extends React.Component {
+    render() {
+      return <Component>{this.props.childSet}</Component>;
+    }
+  }
+
+  class ComponentWrapper extends React.Component {
+    render() {
+      return <InnerComponent childSet={[<Component />, <Component />]} />;
+    }
+  }
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<ComponentWrapper />)
+  ).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. '
+  );
+});
+
+it('does not warn for arrays of elements with keys', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>{[<Component key="#1" />, <Component key="#2" />]}</Component>
+  );
+});
+
+it('does not warn for iterable elements with keys', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {
+            value: done ? undefined : <Component key={'#' + i} />,
+            done: done,
+          };
+        },
+      };
+    },
+  };
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn for numeric keys in entry iterable as a child', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {value: done ? undefined : [i, <Component />], done: done};
+        },
+      };
+    },
+  };
+  iterable.entries = iterable['@@iterator'];
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn when the element is directly as children', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>
+      <Component />
+      <Component />
+    </Component>
+  );
+});
+
+it('does not warn when the child array contains non-elements', () => {
+  void (<Component>{[{}, {}]}</Component>);
+});
+
+it('should give context for PropType errors in nested components.', () => {
+  // In this test, we're making sure that if a proptype error is found in a
+  // component, we give a small hint as to which parent instantiated that
+  // component as per warnings about key usage in ReactElementValidator.
+  function MyComp({color}) {
+    return <div>My color is {color}</div>;
+  }
+  MyComp.propTypes = {
+    color: PropTypes.string,
+  };
+  class ParentComp extends React.Component {
+    render() {
+      return <MyComp color={123} />;
+    }
+  }
+  expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
+    'Warning: Failed prop type: ' +
+      'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
+      'expected `string`.\n' +
+      '    in MyComp (at **)\n' +
+      '    in ParentComp (at **)'
+  );
+});
+
+it('gives a helpful error when passing null, undefined, or boolean', () => {
+  const Undefined = undefined;
+  const Null = null;
+  const True = true;
+  const Div = 'div';
+  expect(() => void (<Undefined />)).toErrorDev(
+    'Warning: React.jsx: 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 ' +
+      "component from the file it's defined in, or you might have mixed up " +
+      'default and named imports.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<Null />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: null.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<True />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: boolean.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  // No error expected
+  void (<Div />);
+});
+
+it('should check default prop values', () => {
+  RequiredPropComponent.defaultProps = {prop: null};
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<RequiredPropComponent />)
+  ).toErrorDev(
+    'Warning: Failed prop type: The prop `prop` is marked as required in ' +
+      '`RequiredPropComponent`, but its value is `null`.\n' +
+      '    in RequiredPropComponent (at **)'
+  );
+});
+
+it('should warn on invalid prop types', () => {
+  // Since there is no prevalidation step for ES6 classes, there is no hook
+  // for us to issue a warning earlier than element creation when the error
+  // actually occurs. Since this step is skipped in production, we should just
+  // warn instead of throwing for this case.
+  class NullPropTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullPropTypeComponent.propTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullPropTypeComponent />)
+  ).toErrorDev(
+    'NullPropTypeComponent: prop type `prop` is invalid; it must be a ' +
+      'function, usually from the `prop-types` package,'
+  );
+});
+
+it('should warn on invalid context types', () => {
+  class NullContextTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullContextTypeComponent.contextTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullContextTypeComponent />)
+  ).toErrorDev(
+    'NullContextTypeComponent: context type `prop` is invalid; it must ' +
+      'be a function, usually from the `prop-types` package,'
+  );
+});
+
+it('should warn if getDefaultProps is specified on the class', () => {
+  class GetDefaultPropsComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  GetDefaultPropsComponent.getDefaultProps = () => ({
+    prop: 'foo',
+  });
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<GetDefaultPropsComponent />)
+  ).toErrorDev(
+    'getDefaultProps is only used on classic React.createClass definitions.' +
+      ' Use a static property named `defaultProps` instead.',
+    {withoutStack: true}
+  );
+});
+
+it('should warn if component declares PropTypes instead of propTypes', () => {
+  class MisspelledPropTypesComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  MisspelledPropTypesComponent.PropTypes = {
+    prop: PropTypes.string,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <MisspelledPropTypesComponent prop="hi" />
+    )
+  ).toErrorDev(
+    'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
+      'instead of `propTypes`. Did you misspell the property assignment?',
+    {withoutStack: true}
+  );
+});
+
+it('warns for fragments with illegal attributes', () => {
+  class Foo extends React.Component {
+    render() {
+      return <React.Fragment a={1}>hello</React.Fragment>;
+    }
+  }
+
+  expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
+    'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+      'can only have `key` and `children` props.'
+  );
+});
+
+it('warns for fragments with refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return (
+        <React.Fragment
+          ref={bar => {
+            this.foo = bar;
+          }}>
+          hello
+        </React.Fragment>
+      );
+    }
+  }
+
+  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(
+    <>
+      <span>1</span>
+      <span>2</span>
+    </>
+  );
+});
+
+it('warns for fragments of multiple elements with same key', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <>
+        <span key="a">1</span>
+        <span key="a">2</span>
+        <span key="b">3</span>
+      </>
+    )
+  ).toErrorDev('Encountered two children with the same key, `a`.', {
+    withoutStack: true,
+  });
+});
+
+it('does not call lazy initializers eagerly', () => {
+  let didCall = false;
+  const Lazy = React.lazy(() => {
+    didCall = true;
+    return {then() {}};
+  });
+  <Lazy />;
+  expect(didCall).toBe(false);
+});
+
+it('supports classic refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return <div className="foo" ref="inner" />;
+    }
+  }
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Foo />, container);
+  expect(instance.refs.inner.className).toBe('foo');
+});
+
+it('should support refs on owned components', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  class Component extends React.Component {
+    render() {
+      const inner = <Wrapper object={innerObj} ref="inner" />;
+      const outer = (
+        <Wrapper object={outerObj} ref="outer">
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.refs.inner.getObject()).toEqual(innerObj);
+      expect(this.refs.outer.getObject()).toEqual(outerObj);
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+});
+
+it('should support callback-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    render() {
+      const inner = (
+        <Wrapper object={innerObj} ref={c => (this.innerRef = c)} />
+      );
+      const outer = (
+        <Wrapper object={outerObj} ref={c => (this.outerRef = c)}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.getObject()).toEqual(innerObj);
+      expect(this.outerRef.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should support object-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    constructor() {
+      super();
+      this.innerRef = React.createRef();
+      this.outerRef = React.createRef();
+    }
+    render() {
+      const inner = <Wrapper object={innerObj} ref={this.innerRef} />;
+      const outer = (
+        <Wrapper object={outerObj} ref={this.outerRef}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.current.getObject()).toEqual(innerObj);
+      expect(this.outerRef.current.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should support new-style refs with mixed-up owners', () => {
+  class Wrapper extends React.Component {
+    getTitle = () => {
+      return this.props.title;
+    };
+
+    render() {
+      return this.props.getContent();
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    getInner = () => {
+      // (With old-style refs, it's impossible to get a ref to this div
+      // because Wrapper is the current owner when this function is called.)
+      return <div className="inner" ref={c => (this.innerRef = c)} />;
+    };
+
+    render() {
+      return (
+        <Wrapper
+          title="wrapper"
+          ref={c => (this.wrapperRef = c)}
+          getContent={this.getInner}
+        />
+      );
+    }
+
+    componentDidMount() {
+      // Check .props.title to make sure we got the right elements back
+      expect(this.wrapperRef.getTitle()).toBe('wrapper');
+      expect(this.innerRef.className).toBe('inner');
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should warn when `key` is being accessed on composite element', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.key} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child key="0" />
+          <Child key="1" />
+          <Child key="2" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)'
+  );
+});
+
+it('should warn when `ref` is being accessed', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.ref} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child ref="childElement" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)'
+  );
+});
+
+it('should warn when owner and self are different for string refs', () => {
+  class ClassWithRenderProp extends React.Component {
+    render() {
+      return this.props.children();
+    }
+  }
+
+  class ClassParent extends React.Component {
+    render() {
+      return (
+        <ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
+      );
+    }
+  }
+
+  const container = document.createElement('div');
+  if (process.env.BABEL_ENV === 'development') {
+    expect(() => ReactDOM.render(<ClassParent />, container)).toErrorDev([
+      'Warning: Component "ClassWithRenderProp" contains the string ref "myRef". ' +
+        '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://reactjs.org/link/strict-mode-string-ref',
+    ]);
+  } else {
+    ReactDOM.render(<ClassParent />, container);
+  }
+});
diff --git a/fixtures/legacy-jsx-runtimes/react-16/yarn.lock b/fixtures/legacy-jsx-runtimes/react-16/yarn.lock
new file mode 100644
index 00000000000..0c9a46a49a4
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/yarn.lock
@@ -0,0 +1,61 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"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==
+
+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"
+
+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=
+
+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"
+
+react-dom@16:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react@16:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
diff --git a/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js
new file mode 100644
index 00000000000..5faf237ad0d
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js
@@ -0,0 +1,1203 @@
+/** @license React v17.0.0-rc.3
+ * react-jsx-dev-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+var _assign = require('object-assign');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getContextName(type) {
+  return type.displayName || 'Context';
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return 'Profiler';
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        var context = type;
+        return getContextName(context) + '.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        var provider = type;
+        return getContextName(provider._context) + '.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type._render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var lazyComponent = type;
+          var payload = lazyComponent._payload;
+          var init = lazyComponent._init;
+
+          try {
+            return getComponentName(init(payload));
+          } catch (x) {
+            return null;
+          }
+        }
+    }
+  }
+
+  return null;
+}
+
+// Helpers to patch console.logs to avoid logging during side-effect free
+// replaying on render function. This currently only patches the object
+// lazily which won't cover if the log function was extracted eagerly.
+// We could also eagerly patch the method.
+var disabledDepth = 0;
+var prevLog;
+var prevInfo;
+var prevWarn;
+var prevError;
+var prevGroup;
+var prevGroupCollapsed;
+var prevGroupEnd;
+
+function disabledLog() {}
+
+disabledLog.__reactDisabledLog = true;
+function disableLogs() {
+  {
+    if (disabledDepth === 0) {
+      /* eslint-disable react-internal/no-production-logging */
+      prevLog = console.log;
+      prevInfo = console.info;
+      prevWarn = console.warn;
+      prevError = console.error;
+      prevGroup = console.group;
+      prevGroupCollapsed = console.groupCollapsed;
+      prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+      var props = {
+        configurable: true,
+        enumerable: true,
+        value: disabledLog,
+        writable: true
+      }; // $FlowFixMe Flow thinks console is immutable.
+
+      Object.defineProperties(console, {
+        info: props,
+        log: props,
+        warn: props,
+        error: props,
+        group: props,
+        groupCollapsed: props,
+        groupEnd: props
+      });
+      /* eslint-enable react-internal/no-production-logging */
+    }
+
+    disabledDepth++;
+  }
+}
+function reenableLogs() {
+  {
+    disabledDepth--;
+
+    if (disabledDepth === 0) {
+      /* eslint-disable react-internal/no-production-logging */
+      var props = {
+        configurable: true,
+        enumerable: true,
+        writable: true
+      }; // $FlowFixMe Flow thinks console is immutable.
+
+      Object.defineProperties(console, {
+        log: _assign({}, props, {
+          value: prevLog
+        }),
+        info: _assign({}, props, {
+          value: prevInfo
+        }),
+        warn: _assign({}, props, {
+          value: prevWarn
+        }),
+        error: _assign({}, props, {
+          value: prevError
+        }),
+        group: _assign({}, props, {
+          value: prevGroup
+        }),
+        groupCollapsed: _assign({}, props, {
+          value: prevGroupCollapsed
+        }),
+        groupEnd: _assign({}, props, {
+          value: prevGroupEnd
+        })
+      });
+      /* eslint-enable react-internal/no-production-logging */
+    }
+
+    if (disabledDepth < 0) {
+      error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+    }
+  }
+}
+
+var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+var prefix;
+function describeBuiltInComponentFrame(name, source, ownerFn) {
+  {
+    if (prefix === undefined) {
+      // Extract the VM specific prefix used by each line.
+      try {
+        throw Error();
+      } catch (x) {
+        var match = x.stack.trim().match(/\n( *(at )?)/);
+        prefix = match && match[1] || '';
+      }
+    } // We use the prefix to ensure our stacks line up with native stack frames.
+
+
+    return '\n' + prefix + name;
+  }
+}
+var reentry = false;
+var componentFrameCache;
+
+{
+  var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+  componentFrameCache = new PossiblyWeakMap();
+}
+
+function describeNativeComponentFrame(fn, construct) {
+  // If something asked for a stack inside a fake render, it should get ignored.
+  if (!fn || reentry) {
+    return '';
+  }
+
+  {
+    var frame = componentFrameCache.get(fn);
+
+    if (frame !== undefined) {
+      return frame;
+    }
+  }
+
+  var control;
+  reentry = true;
+  var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
+
+  Error.prepareStackTrace = undefined;
+  var previousDispatcher;
+
+  {
+    previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+    // for warnings.
+
+    ReactCurrentDispatcher.current = null;
+    disableLogs();
+  }
+
+  try {
+    // This should throw.
+    if (construct) {
+      // Something should be setting the props in the constructor.
+      var Fake = function () {
+        throw Error();
+      }; // $FlowFixMe
+
+
+      Object.defineProperty(Fake.prototype, 'props', {
+        set: function () {
+          // We use a throwing setter instead of frozen or non-writable props
+          // because that won't throw in a non-strict mode function.
+          throw Error();
+        }
+      });
+
+      if (typeof Reflect === 'object' && Reflect.construct) {
+        // We construct a different control for this case to include any extra
+        // frames added by the construct call.
+        try {
+          Reflect.construct(Fake, []);
+        } catch (x) {
+          control = x;
+        }
+
+        Reflect.construct(fn, [], Fake);
+      } else {
+        try {
+          Fake.call();
+        } catch (x) {
+          control = x;
+        }
+
+        fn.call(Fake.prototype);
+      }
+    } else {
+      try {
+        throw Error();
+      } catch (x) {
+        control = x;
+      }
+
+      fn();
+    }
+  } catch (sample) {
+    // This is inlined manually because closure doesn't do it for us.
+    if (sample && control && typeof sample.stack === 'string') {
+      // This extracts the first frame from the sample that isn't also in the control.
+      // Skipping one frame that we assume is the frame that calls the two.
+      var sampleLines = sample.stack.split('\n');
+      var controlLines = control.stack.split('\n');
+      var s = sampleLines.length - 1;
+      var c = controlLines.length - 1;
+
+      while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+        // We expect at least one stack frame to be shared.
+        // Typically this will be the root most one. However, stack frames may be
+        // cut off due to maximum stack limits. In this case, one maybe cut off
+        // earlier than the other. We assume that the sample is longer or the same
+        // and there for cut off earlier. So we should find the root most frame in
+        // the sample somewhere in the control.
+        c--;
+      }
+
+      for (; s >= 1 && c >= 0; s--, c--) {
+        // Next we find the first one that isn't the same which should be the
+        // frame that called our sample function and the control.
+        if (sampleLines[s] !== controlLines[c]) {
+          // In V8, the first line is describing the message but other VMs don't.
+          // If we're about to return the first line, and the control is also on the same
+          // line, that's a pretty good indicator that our sample threw at same line as
+          // the control. I.e. before we entered the sample frame. So we ignore this result.
+          // This can happen if you passed a class to function component, or non-function.
+          if (s !== 1 || c !== 1) {
+            do {
+              s--;
+              c--; // We may still have similar intermediate frames from the construct call.
+              // The next one that isn't the same should be our match though.
+
+              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+
+                {
+                  if (typeof fn === 'function') {
+                    componentFrameCache.set(fn, _frame);
+                  }
+                } // Return the line we found.
+
+
+                return _frame;
+              }
+            } while (s >= 1 && c >= 0);
+          }
+
+          break;
+        }
+      }
+    }
+  } finally {
+    reentry = false;
+
+    {
+      ReactCurrentDispatcher.current = previousDispatcher;
+      reenableLogs();
+    }
+
+    Error.prepareStackTrace = previousPrepareStackTrace;
+  } // Fallback to just using the name if we couldn't make it throw.
+
+
+  var name = fn ? fn.displayName || fn.name : '';
+  var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+
+  {
+    if (typeof fn === 'function') {
+      componentFrameCache.set(fn, syntheticFrame);
+    }
+  }
+
+  return syntheticFrame;
+}
+function describeFunctionComponentFrame(fn, source, ownerFn) {
+  {
+    return describeNativeComponentFrame(fn, false);
+  }
+}
+
+function shouldConstruct(Component) {
+  var prototype = Component.prototype;
+  return !!(prototype && prototype.isReactComponent);
+}
+
+function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+
+  if (type == null) {
+    return '';
+  }
+
+  if (typeof type === 'function') {
+    {
+      return describeNativeComponentFrame(type, shouldConstruct(type));
+    }
+  }
+
+  if (typeof type === 'string') {
+    return describeBuiltInComponentFrame(type);
+  }
+
+  switch (type) {
+    case REACT_SUSPENSE_TYPE:
+      return describeBuiltInComponentFrame('Suspense');
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return describeBuiltInComponentFrame('SuspenseList');
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE:
+        return describeFunctionComponentFrame(type.render);
+
+      case REACT_MEMO_TYPE:
+        // Memo may contain any component type so we recursively resolve it.
+        return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
+
+      case REACT_BLOCK_TYPE:
+        return describeFunctionComponentFrame(type._render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var lazyComponent = type;
+          var payload = lazyComponent._payload;
+          var init = lazyComponent._init;
+
+          try {
+            // Lazy may contain any component type so we recursively resolve it.
+            return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+          } catch (x) {}
+        }
+    }
+  }
+
+  return '';
+}
+
+var loggedTypeFailures = {};
+var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+
+function setCurrentlyValidatingElement(element) {
+  {
+    if (element) {
+      var owner = element._owner;
+      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+      ReactDebugCurrentFrame.setExtraStackFrame(stack);
+    } else {
+      ReactDebugCurrentFrame.setExtraStackFrame(null);
+    }
+  }
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function warnIfStringRefCannotBeAutoConverted(config, self) {
+  {
+    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+      var componentName = getComponentName(ReactCurrentOwner.current.type);
+
+      if (!didWarnAboutStringRefs[componentName]) {
+        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://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+
+        didWarnAboutStringRefs[componentName] = true;
+      }
+    }
+  }
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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, self);
+    } // Remaining properties are added to a new props object
+
+
+    for (propName in config) {
+      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+function setCurrentlyValidatingElement$1(element) {
+  {
+    if (element) {
+      var owner = element._owner;
+      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+      ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+    } else {
+      ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+    }
+  }
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = getComponentName(ReactCurrentOwner$1.current.type);
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+
+var jsxDEV$1 =  jsxWithValidation ;
+
+exports.jsxDEV = jsxDEV$1;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.production.min.js
new file mode 100644
index 00000000000..67954b71c64
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.production.min.js
@@ -0,0 +1,9 @@
+/** @license React v17.0.0-rc.3
+ * react-jsx-dev-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';require("object-assign");require("react");exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var a=Symbol.for;exports.Fragment=a("react.fragment")}exports.jsxDEV=void 0;
diff --git a/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.development.js b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.development.js
new file mode 100644
index 00000000000..4b4e1ed3d10
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.development.js
@@ -0,0 +1,1221 @@
+/** @license React v17.0.0-rc.3
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+var React = require('react');
+var _assign = require('object-assign');
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var REACT_ELEMENT_TYPE = 0xeac7;
+var REACT_PORTAL_TYPE = 0xeaca;
+exports.Fragment = 0xeacb;
+var REACT_STRICT_MODE_TYPE = 0xeacc;
+var REACT_PROFILER_TYPE = 0xead2;
+var REACT_PROVIDER_TYPE = 0xeacd;
+var REACT_CONTEXT_TYPE = 0xeace;
+var REACT_FORWARD_REF_TYPE = 0xead0;
+var REACT_SUSPENSE_TYPE = 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = 0xead8;
+var REACT_MEMO_TYPE = 0xead3;
+var REACT_LAZY_TYPE = 0xead4;
+var REACT_BLOCK_TYPE = 0xead9;
+var REACT_SERVER_BLOCK_TYPE = 0xeada;
+var REACT_FUNDAMENTAL_TYPE = 0xead5;
+var REACT_SCOPE_TYPE = 0xead7;
+var REACT_OPAQUE_ID_TYPE = 0xeae0;
+var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+var REACT_OFFSCREEN_TYPE = 0xeae2;
+var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  var symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  exports.Fragment = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_BLOCK_TYPE = symbolFor('react.block');
+  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
+  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+}
+
+var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+
+  return null;
+}
+
+var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+function error(format) {
+  {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    printWarning('error', format, args);
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    }
+
+    var argsWithFormat = args.map(function (item) {
+      return '' + 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);
+  }
+}
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+
+function isValidElementType(type) {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function getWrappedName(outerType, innerType, wrapperName) {
+  var functionName = innerType.displayName || innerType.name || '';
+  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
+}
+
+function getContextName(type) {
+  return type.displayName || 'Context';
+}
+
+function getComponentName(type) {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+
+  {
+    if (typeof type.tag === 'number') {
+      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+    }
+  }
+
+  if (typeof type === 'function') {
+    return type.displayName || type.name || null;
+  }
+
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  switch (type) {
+    case exports.Fragment:
+      return 'Fragment';
+
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+
+    case REACT_PROFILER_TYPE:
+      return 'Profiler';
+
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        var context = type;
+        return getContextName(context) + '.Consumer';
+
+      case REACT_PROVIDER_TYPE:
+        var provider = type;
+        return getContextName(provider._context) + '.Provider';
+
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+
+      case REACT_MEMO_TYPE:
+        return getComponentName(type.type);
+
+      case REACT_BLOCK_TYPE:
+        return getComponentName(type._render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var lazyComponent = type;
+          var payload = lazyComponent._payload;
+          var init = lazyComponent._init;
+
+          try {
+            return getComponentName(init(payload));
+          } catch (x) {
+            return null;
+          }
+        }
+    }
+  }
+
+  return null;
+}
+
+// Helpers to patch console.logs to avoid logging during side-effect free
+// replaying on render function. This currently only patches the object
+// lazily which won't cover if the log function was extracted eagerly.
+// We could also eagerly patch the method.
+var disabledDepth = 0;
+var prevLog;
+var prevInfo;
+var prevWarn;
+var prevError;
+var prevGroup;
+var prevGroupCollapsed;
+var prevGroupEnd;
+
+function disabledLog() {}
+
+disabledLog.__reactDisabledLog = true;
+function disableLogs() {
+  {
+    if (disabledDepth === 0) {
+      /* eslint-disable react-internal/no-production-logging */
+      prevLog = console.log;
+      prevInfo = console.info;
+      prevWarn = console.warn;
+      prevError = console.error;
+      prevGroup = console.group;
+      prevGroupCollapsed = console.groupCollapsed;
+      prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+      var props = {
+        configurable: true,
+        enumerable: true,
+        value: disabledLog,
+        writable: true
+      }; // $FlowFixMe Flow thinks console is immutable.
+
+      Object.defineProperties(console, {
+        info: props,
+        log: props,
+        warn: props,
+        error: props,
+        group: props,
+        groupCollapsed: props,
+        groupEnd: props
+      });
+      /* eslint-enable react-internal/no-production-logging */
+    }
+
+    disabledDepth++;
+  }
+}
+function reenableLogs() {
+  {
+    disabledDepth--;
+
+    if (disabledDepth === 0) {
+      /* eslint-disable react-internal/no-production-logging */
+      var props = {
+        configurable: true,
+        enumerable: true,
+        writable: true
+      }; // $FlowFixMe Flow thinks console is immutable.
+
+      Object.defineProperties(console, {
+        log: _assign({}, props, {
+          value: prevLog
+        }),
+        info: _assign({}, props, {
+          value: prevInfo
+        }),
+        warn: _assign({}, props, {
+          value: prevWarn
+        }),
+        error: _assign({}, props, {
+          value: prevError
+        }),
+        group: _assign({}, props, {
+          value: prevGroup
+        }),
+        groupCollapsed: _assign({}, props, {
+          value: prevGroupCollapsed
+        }),
+        groupEnd: _assign({}, props, {
+          value: prevGroupEnd
+        })
+      });
+      /* eslint-enable react-internal/no-production-logging */
+    }
+
+    if (disabledDepth < 0) {
+      error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+    }
+  }
+}
+
+var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+var prefix;
+function describeBuiltInComponentFrame(name, source, ownerFn) {
+  {
+    if (prefix === undefined) {
+      // Extract the VM specific prefix used by each line.
+      try {
+        throw Error();
+      } catch (x) {
+        var match = x.stack.trim().match(/\n( *(at )?)/);
+        prefix = match && match[1] || '';
+      }
+    } // We use the prefix to ensure our stacks line up with native stack frames.
+
+
+    return '\n' + prefix + name;
+  }
+}
+var reentry = false;
+var componentFrameCache;
+
+{
+  var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+  componentFrameCache = new PossiblyWeakMap();
+}
+
+function describeNativeComponentFrame(fn, construct) {
+  // If something asked for a stack inside a fake render, it should get ignored.
+  if (!fn || reentry) {
+    return '';
+  }
+
+  {
+    var frame = componentFrameCache.get(fn);
+
+    if (frame !== undefined) {
+      return frame;
+    }
+  }
+
+  var control;
+  reentry = true;
+  var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
+
+  Error.prepareStackTrace = undefined;
+  var previousDispatcher;
+
+  {
+    previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+    // for warnings.
+
+    ReactCurrentDispatcher.current = null;
+    disableLogs();
+  }
+
+  try {
+    // This should throw.
+    if (construct) {
+      // Something should be setting the props in the constructor.
+      var Fake = function () {
+        throw Error();
+      }; // $FlowFixMe
+
+
+      Object.defineProperty(Fake.prototype, 'props', {
+        set: function () {
+          // We use a throwing setter instead of frozen or non-writable props
+          // because that won't throw in a non-strict mode function.
+          throw Error();
+        }
+      });
+
+      if (typeof Reflect === 'object' && Reflect.construct) {
+        // We construct a different control for this case to include any extra
+        // frames added by the construct call.
+        try {
+          Reflect.construct(Fake, []);
+        } catch (x) {
+          control = x;
+        }
+
+        Reflect.construct(fn, [], Fake);
+      } else {
+        try {
+          Fake.call();
+        } catch (x) {
+          control = x;
+        }
+
+        fn.call(Fake.prototype);
+      }
+    } else {
+      try {
+        throw Error();
+      } catch (x) {
+        control = x;
+      }
+
+      fn();
+    }
+  } catch (sample) {
+    // This is inlined manually because closure doesn't do it for us.
+    if (sample && control && typeof sample.stack === 'string') {
+      // This extracts the first frame from the sample that isn't also in the control.
+      // Skipping one frame that we assume is the frame that calls the two.
+      var sampleLines = sample.stack.split('\n');
+      var controlLines = control.stack.split('\n');
+      var s = sampleLines.length - 1;
+      var c = controlLines.length - 1;
+
+      while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+        // We expect at least one stack frame to be shared.
+        // Typically this will be the root most one. However, stack frames may be
+        // cut off due to maximum stack limits. In this case, one maybe cut off
+        // earlier than the other. We assume that the sample is longer or the same
+        // and there for cut off earlier. So we should find the root most frame in
+        // the sample somewhere in the control.
+        c--;
+      }
+
+      for (; s >= 1 && c >= 0; s--, c--) {
+        // Next we find the first one that isn't the same which should be the
+        // frame that called our sample function and the control.
+        if (sampleLines[s] !== controlLines[c]) {
+          // In V8, the first line is describing the message but other VMs don't.
+          // If we're about to return the first line, and the control is also on the same
+          // line, that's a pretty good indicator that our sample threw at same line as
+          // the control. I.e. before we entered the sample frame. So we ignore this result.
+          // This can happen if you passed a class to function component, or non-function.
+          if (s !== 1 || c !== 1) {
+            do {
+              s--;
+              c--; // We may still have similar intermediate frames from the construct call.
+              // The next one that isn't the same should be our match though.
+
+              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+
+                {
+                  if (typeof fn === 'function') {
+                    componentFrameCache.set(fn, _frame);
+                  }
+                } // Return the line we found.
+
+
+                return _frame;
+              }
+            } while (s >= 1 && c >= 0);
+          }
+
+          break;
+        }
+      }
+    }
+  } finally {
+    reentry = false;
+
+    {
+      ReactCurrentDispatcher.current = previousDispatcher;
+      reenableLogs();
+    }
+
+    Error.prepareStackTrace = previousPrepareStackTrace;
+  } // Fallback to just using the name if we couldn't make it throw.
+
+
+  var name = fn ? fn.displayName || fn.name : '';
+  var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+
+  {
+    if (typeof fn === 'function') {
+      componentFrameCache.set(fn, syntheticFrame);
+    }
+  }
+
+  return syntheticFrame;
+}
+function describeFunctionComponentFrame(fn, source, ownerFn) {
+  {
+    return describeNativeComponentFrame(fn, false);
+  }
+}
+
+function shouldConstruct(Component) {
+  var prototype = Component.prototype;
+  return !!(prototype && prototype.isReactComponent);
+}
+
+function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+
+  if (type == null) {
+    return '';
+  }
+
+  if (typeof type === 'function') {
+    {
+      return describeNativeComponentFrame(type, shouldConstruct(type));
+    }
+  }
+
+  if (typeof type === 'string') {
+    return describeBuiltInComponentFrame(type);
+  }
+
+  switch (type) {
+    case REACT_SUSPENSE_TYPE:
+      return describeBuiltInComponentFrame('Suspense');
+
+    case REACT_SUSPENSE_LIST_TYPE:
+      return describeBuiltInComponentFrame('SuspenseList');
+  }
+
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE:
+        return describeFunctionComponentFrame(type.render);
+
+      case REACT_MEMO_TYPE:
+        // Memo may contain any component type so we recursively resolve it.
+        return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
+
+      case REACT_BLOCK_TYPE:
+        return describeFunctionComponentFrame(type._render);
+
+      case REACT_LAZY_TYPE:
+        {
+          var lazyComponent = type;
+          var payload = lazyComponent._payload;
+          var init = lazyComponent._init;
+
+          try {
+            // Lazy may contain any component type so we recursively resolve it.
+            return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+          } catch (x) {}
+        }
+    }
+  }
+
+  return '';
+}
+
+var loggedTypeFailures = {};
+var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+
+function setCurrentlyValidatingElement(element) {
+  {
+    if (element) {
+      var owner = element._owner;
+      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+      ReactDebugCurrentFrame.setExtraStackFrame(stack);
+    } else {
+      ReactDebugCurrentFrame.setExtraStackFrame(null);
+    }
+  }
+}
+
+function checkPropTypes(typeSpecs, values, location, componentName, element) {
+  {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+
+    for (var typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+
+          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+        } catch (ex) {
+          error$1 = ex;
+        }
+
+        if (error$1 && !(error$1 instanceof Error)) {
+          setCurrentlyValidatingElement(element);
+
+          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+          setCurrentlyValidatingElement(null);
+        }
+
+        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error$1.message] = true;
+          setCurrentlyValidatingElement(element);
+
+          error('Failed %s type: %s', location, error$1.message);
+
+          setCurrentlyValidatingElement(null);
+        }
+      }
+    }
+  }
+}
+
+var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var RESERVED_PROPS = {
+  key: true,
+  ref: true,
+  __self: true,
+  __source: true
+};
+var specialPropKeyWarningShown;
+var specialPropRefWarningShown;
+var didWarnAboutStringRefs;
+
+{
+  didWarnAboutStringRefs = {};
+}
+
+function hasValidRef(config) {
+  {
+    if (hasOwnProperty.call(config, 'ref')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  {
+    if (hasOwnProperty.call(config, 'key')) {
+      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+
+  return config.key !== undefined;
+}
+
+function warnIfStringRefCannotBeAutoConverted(config, self) {
+  {
+    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+      var componentName = getComponentName(ReactCurrentOwner.current.type);
+
+      if (!didWarnAboutStringRefs[componentName]) {
+        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://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+
+        didWarnAboutStringRefs[componentName] = true;
+      }
+    }
+  }
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingKey = function () {
+      if (!specialPropKeyWarningShown) {
+        specialPropKeyWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true
+    });
+  }
+}
+
+function defineRefPropWarningGetter(props, displayName) {
+  {
+    var warnAboutAccessingRef = function () {
+      if (!specialPropRefWarningShown) {
+        specialPropRefWarningShown = true;
+
+        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://reactjs.org/link/special-props)', displayName);
+      }
+    };
+
+    warnAboutAccessingRef.isReactWarning = true;
+    Object.defineProperty(props, 'ref', {
+      get: warnAboutAccessingRef,
+      configurable: 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+var ReactElement = function (type, key, ref, self, source, owner, props) {
+  var element = {
+    // This tag allows us to uniquely identify this as a React Element
+    $$typeof: REACT_ELEMENT_TYPE,
+    // Built-in properties that belong on the element
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+    // Record the component responsible for creating this element.
+    _owner: owner
+  };
+
+  {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: false
+    }); // self and source are DEV only properties.
+
+    Object.defineProperty(element, '_self', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: self
+    }); // Two elements created in two different places should be considered
+    // equal for testing purposes and therefore we hide it from enumeration.
+
+    Object.defineProperty(element, '_source', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source
+    });
+
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+};
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+function jsxDEV(type, config, maybeKey, source, self) {
+  {
+    var propName; // Reserved names are extracted
+
+    var props = {};
+    var key = null;
+    var ref = null; // 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, self);
+    } // Remaining properties are added to a new props object
+
+
+    for (propName in config) {
+      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+        props[propName] = config[propName];
+      }
+    } // Resolve default props
+
+
+    if (type && type.defaultProps) {
+      var defaultProps = type.defaultProps;
+
+      for (propName in defaultProps) {
+        if (props[propName] === undefined) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    }
+
+    if (key || ref) {
+      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+      if (key) {
+        defineKeyPropWarningGetter(props, displayName);
+      }
+
+      if (ref) {
+        defineRefPropWarningGetter(props, displayName);
+      }
+    }
+
+    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+  }
+}
+
+var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+function setCurrentlyValidatingElement$1(element) {
+  {
+    if (element) {
+      var owner = element._owner;
+      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+      ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+    } else {
+      ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+    }
+  }
+}
+
+var propTypesMisspellWarningShown;
+
+{
+  propTypesMisspellWarningShown = false;
+}
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+function isValidElement(object) {
+  {
+    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+  }
+}
+
+function getDeclarationErrorAddendum() {
+  {
+    if (ReactCurrentOwner$1.current) {
+      var name = getComponentName(ReactCurrentOwner$1.current.type);
+
+      if (name) {
+        return '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+
+    return '';
+  }
+}
+
+function getSourceInfoErrorAddendum(source) {
+  {
+    if (source !== undefined) {
+      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+      var lineNumber = source.lineNumber;
+      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+    }
+
+    return '';
+  }
+}
+/**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+
+
+var ownerHasKeyUseWarning = {};
+
+function getCurrentComponentErrorInfo(parentType) {
+  {
+    var info = getDeclarationErrorAddendum();
+
+    if (!info) {
+      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+      if (parentName) {
+        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+      }
+    }
+
+    return info;
+  }
+}
+/**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+function validateExplicitKey(element, parentType) {
+  {
+    if (!element._store || element._store.validated || element.key != null) {
+      return;
+    }
+
+    element._store.validated = true;
+    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+      return;
+    }
+
+    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+
+    var childOwner = '';
+
+    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+      // Give the component that originally created this child.
+      childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+    }
+
+    setCurrentlyValidatingElement$1(element);
+
+    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+    setCurrentlyValidatingElement$1(null);
+  }
+}
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+function validateChildKeys(node, parentType) {
+  {
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    if (Array.isArray(node)) {
+      for (var i = 0; i < node.length; i++) {
+        var child = node[i];
+
+        if (isValidElement(child)) {
+          validateExplicitKey(child, parentType);
+        }
+      }
+    } else if (isValidElement(node)) {
+      // This element was passed in a valid location.
+      if (node._store) {
+        node._store.validated = true;
+      }
+    } else if (node) {
+      var iteratorFn = getIteratorFn(node);
+
+      if (typeof iteratorFn === 'function') {
+        // Entry iterators used to provide implicit keys,
+        // but now we print a separate warning for them later.
+        if (iteratorFn !== node.entries) {
+          var iterator = iteratorFn.call(node);
+          var step;
+
+          while (!(step = iterator.next()).done) {
+            if (isValidElement(step.value)) {
+              validateExplicitKey(step.value, parentType);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+
+
+function validatePropTypes(element) {
+  {
+    var type = element.type;
+
+    if (type === null || type === undefined || typeof type === 'string') {
+      return;
+    }
+
+    var 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) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      var name = getComponentName(type);
+      checkPropTypes(propTypes, element.props, 'prop', name, element);
+    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+      var _name = getComponentName(type);
+
+      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+    }
+
+    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+    }
+  }
+}
+/**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
+
+
+function validateFragmentProps(fragment) {
+  {
+    var keys = Object.keys(fragment.props);
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+
+      if (key !== 'children' && key !== 'key') {
+        setCurrentlyValidatingElement$1(fragment);
+
+        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+        setCurrentlyValidatingElement$1(null);
+        break;
+      }
+    }
+
+    if (fragment.ref !== null) {
+      setCurrentlyValidatingElement$1(fragment);
+
+      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+      setCurrentlyValidatingElement$1(null);
+    }
+  }
+}
+
+function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+  {
+    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+
+    if (!validType) {
+      var info = '';
+
+      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+      }
+
+      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+      if (sourceInfo) {
+        info += sourceInfo;
+      } else {
+        info += getDeclarationErrorAddendum();
+      }
+
+      var typeString;
+
+      if (type === null) {
+        typeString = 'null';
+      } else if (Array.isArray(type)) {
+        typeString = 'array';
+      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        info = ' Did you accidentally export a JSX literal instead of a component?';
+      } else {
+        typeString = typeof type;
+      }
+
+      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);
+    }
+
+    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+    // TODO: Drop this when these are no longer allowed as the type argument.
+
+    if (element == null) {
+      return element;
+    } // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing errors.
+    // 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) {
+      var children = props.children;
+
+      if (children !== undefined) {
+        if (isStaticChildren) {
+          if (Array.isArray(children)) {
+            for (var i = 0; i < children.length; i++) {
+              validateChildKeys(children[i], type);
+            }
+
+            if (Object.freeze) {
+              Object.freeze(children);
+            }
+          } else {
+            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);
+        }
+      }
+    }
+
+    if (type === exports.Fragment) {
+      validateFragmentProps(element);
+    } else {
+      validatePropTypes(element);
+    }
+
+    return element;
+  }
+} // These two functions exist to still get child warnings in dev
+// even with the prod transform. This means that jsxDEV is purely
+// opt-in behavior for better messages but that we won't stop
+// giving you warnings if you use production apis.
+
+function jsxWithValidationStatic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, true);
+  }
+}
+function jsxWithValidationDynamic(type, props, key) {
+  {
+    return jsxWithValidation(type, props, key, false);
+  }
+}
+
+var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+// for now we can ship identical prod functions
+
+var jsxs =  jsxWithValidationStatic ;
+
+exports.jsx = jsx;
+exports.jsxs = jsxs;
+  })();
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.production.min.js b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.production.min.js
new file mode 100644
index 00000000000..d5d1ce4166a
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.production.min.js
@@ -0,0 +1,10 @@
+/** @license React v17.0.0-rc.3
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';require("object-assign");var f=require("react"),g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
diff --git a/fixtures/legacy-jsx-runtimes/react-17/jsx-dev-runtime.js b/fixtures/legacy-jsx-runtimes/react-17/jsx-dev-runtime.js
new file mode 100644
index 00000000000..324eb11e599
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/jsx-dev-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-17/jsx-runtime.js b/fixtures/legacy-jsx-runtimes/react-17/jsx-runtime.js
new file mode 100644
index 00000000000..0416df54291
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/jsx-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-17/package.json b/fixtures/legacy-jsx-runtimes/react-17/package.json
new file mode 100644
index 00000000000..2808e59ffae
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "17.0.0-rc.3",
+    "react-dom": "17.0.0-rc.3"
+  }
+}
diff --git a/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js b/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
new file mode 100644
index 00000000000..ab47ee0d947
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
@@ -0,0 +1,767 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// These tests are based on ReactJSXElement-test,
+// ReactJSXElementValidator-test, ReactComponent-test,
+// and ReactElementJSX-test.
+
+jest.mock('react/jsx-runtime', () => require('./jsx-runtime'), {virtual: true});
+jest.mock('react/jsx-dev-runtime', () => require('./jsx-dev-runtime'), {
+  virtual: true,
+});
+
+let React = require('react');
+let ReactDOM = require('react-dom');
+let ReactTestUtils = {
+  renderIntoDocument(el) {
+    const container = document.createElement('div');
+    return ReactDOM.render(el, container);
+  },
+};
+let PropTypes = require('prop-types');
+let Component = class Component extends React.Component {
+  render() {
+    return <div />;
+  }
+};
+let RequiredPropComponent = class extends React.Component {
+  render() {
+    return <span>{this.props.prop}</span>;
+  }
+};
+RequiredPropComponent.displayName = 'RequiredPropComponent';
+RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};
+
+it('works', () => {
+  const container = document.createElement('div');
+  ReactDOM.render(<h1>hello</h1>, container);
+  expect(container.textContent).toBe('hello');
+});
+
+it('returns a complete element according to spec', () => {
+  const element = <Component />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a lower-case to be passed as the string type', () => {
+  const element = <div />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('allows a string to be passed as the type', () => {
+  const TagName = 'div';
+  const element = <TagName />;
+  expect(element.type).toBe('div');
+  expect(element.key).toBe(null);
+  expect(element.ref).toBe(null);
+  const expectation = {};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('returns an immutable element', () => {
+  const element = <Component />;
+  if (process.env.NODE_ENV === 'development') {
+    expect(() => (element.type = 'div')).toThrow();
+  } else {
+    expect(() => (element.type = 'div')).not.toThrow();
+  }
+});
+
+it('does not reuse the object that is spread into props', () => {
+  const config = {foo: 1};
+  const element = <Component {...config} />;
+  expect(element.props.foo).toBe(1);
+  config.foo = 2;
+  expect(element.props.foo).toBe(1);
+});
+
+it('extracts key and ref from the rest of the props', () => {
+  const element = <Component key="12" ref="34" foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe('34');
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('coerces the key to a string', () => {
+  const element = <Component key={12} foo="56" />;
+  expect(element.type).toBe(Component);
+  expect(element.key).toBe('12');
+  expect(element.ref).toBe(null);
+  const expectation = {foo: '56'};
+  Object.freeze(expectation);
+  expect(element.props).toEqual(expectation);
+});
+
+it('merges JSX children onto the children prop', () => {
+  const a = 1;
+  const element = <Component children="text">{a}</Component>;
+  expect(element.props.children).toBe(a);
+});
+
+it('does not override children if no JSX children are provided', () => {
+  const element = <Component children="text" />;
+  expect(element.props.children).toBe('text');
+});
+
+it('overrides children if null is provided as a JSX child', () => {
+  const element = <Component children="text">{null}</Component>;
+  expect(element.props.children).toBe(null);
+});
+
+it('overrides children if undefined is provided as an argument', () => {
+  const element = <Component children="text">{undefined}</Component>;
+  expect(element.props.children).toBe(undefined);
+
+  const element2 = React.cloneElement(
+    <Component children="text" />,
+    {},
+    undefined
+  );
+  expect(element2.props.children).toBe(undefined);
+});
+
+it('merges JSX children onto the children prop in an array', () => {
+  const a = 1;
+  const b = 2;
+  const c = 3;
+  const element = (
+    <Component>
+      {a}
+      {b}
+      {c}
+    </Component>
+  );
+  expect(element.props.children).toEqual([1, 2, 3]);
+});
+
+it('allows static methods to be called using the type property', () => {
+  class StaticMethodComponent {
+    static someStaticMethod() {
+      return 'someReturnValue';
+    }
+    render() {
+      return <div />;
+    }
+  }
+
+  const element = <StaticMethodComponent />;
+  expect(element.type.someStaticMethod()).toBe('someReturnValue');
+});
+
+it('identifies valid elements', () => {
+  expect(React.isValidElement(<div />)).toEqual(true);
+  expect(React.isValidElement(<Component />)).toEqual(true);
+
+  expect(React.isValidElement(null)).toEqual(false);
+  expect(React.isValidElement(true)).toEqual(false);
+  expect(React.isValidElement({})).toEqual(false);
+  expect(React.isValidElement('string')).toEqual(false);
+  expect(React.isValidElement(Component)).toEqual(false);
+  expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+});
+
+it('is indistinguishable from a plain object', () => {
+  const element = <div className="foo" />;
+  const object = {};
+  expect(element.constructor).toBe(object.constructor);
+});
+
+it('should use default prop value when removing a prop', () => {
+  Component.defaultProps = {fruit: 'persimmon'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Component fruit="mango" />, container);
+  expect(instance.props.fruit).toBe('mango');
+
+  ReactDOM.render(<Component />, container);
+  expect(instance.props.fruit).toBe('persimmon');
+});
+
+it('should normalize props with default values', () => {
+  class NormalizingComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NormalizingComponent.defaultProps = {prop: 'testKey'};
+
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<NormalizingComponent />, container);
+  expect(instance.props.prop).toBe('testKey');
+
+  const inst2 = ReactDOM.render(
+    <NormalizingComponent prop={null} />,
+    container
+  );
+  expect(inst2.props.prop).toBe(null);
+});
+
+it('warns for keys for arrays of elements in children position', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <Component>{[<Component />, <Component />]}</Component>
+    )
+  ).toErrorDev('Each child in a list should have a unique "key" prop.');
+});
+
+it('warns for keys for arrays of elements with owner info', () => {
+  class InnerComponent extends React.Component {
+    render() {
+      return <Component>{this.props.childSet}</Component>;
+    }
+  }
+
+  class ComponentWrapper extends React.Component {
+    render() {
+      return <InnerComponent childSet={[<Component />, <Component />]} />;
+    }
+  }
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<ComponentWrapper />)
+  ).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. '
+  );
+});
+
+it('does not warn for arrays of elements with keys', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>{[<Component key="#1" />, <Component key="#2" />]}</Component>
+  );
+});
+
+it('does not warn for iterable elements with keys', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {
+            value: done ? undefined : <Component key={'#' + i} />,
+            done: done,
+          };
+        },
+      };
+    },
+  };
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn for numeric keys in entry iterable as a child', () => {
+  const iterable = {
+    '@@iterator': function () {
+      let i = 0;
+      return {
+        next: function () {
+          const done = ++i > 2;
+          return {value: done ? undefined : [i, <Component />], done: done};
+        },
+      };
+    },
+  };
+  iterable.entries = iterable['@@iterator'];
+
+  ReactTestUtils.renderIntoDocument(<Component>{iterable}</Component>);
+});
+
+it('does not warn when the element is directly as children', () => {
+  ReactTestUtils.renderIntoDocument(
+    <Component>
+      <Component />
+      <Component />
+    </Component>
+  );
+});
+
+it('does not warn when the child array contains non-elements', () => {
+  void (<Component>{[{}, {}]}</Component>);
+});
+
+it('should give context for PropType errors in nested components.', () => {
+  // In this test, we're making sure that if a proptype error is found in a
+  // component, we give a small hint as to which parent instantiated that
+  // component as per warnings about key usage in ReactElementValidator.
+  function MyComp({color}) {
+    return <div>My color is {color}</div>;
+  }
+  MyComp.propTypes = {
+    color: PropTypes.string,
+  };
+  class ParentComp extends React.Component {
+    render() {
+      return <MyComp color={123} />;
+    }
+  }
+  expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
+    'Warning: Failed prop type: ' +
+      'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
+      'expected `string`.\n' +
+      '    in color (at **)\n' +
+      '    in ParentComp (at **)'
+  );
+});
+
+it('gives a helpful error when passing null, undefined, or boolean', () => {
+  const Undefined = undefined;
+  const Null = null;
+  const True = true;
+  const Div = 'div';
+  expect(() => void (<Undefined />)).toErrorDev(
+    'Warning: React.jsx: 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 ' +
+      "component from the file it's defined in, or you might have mixed up " +
+      'default and named imports.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<Null />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: null.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  expect(() => void (<True />)).toErrorDev(
+    'Warning: React.jsx: type is invalid -- expected a string ' +
+      '(for built-in components) or a class/function (for composite ' +
+      'components) but got: boolean.' +
+      (process.env.BABEL_ENV === 'development'
+        ? '\n\nCheck your code at **.'
+        : ''),
+    {withoutStack: true}
+  );
+  // No error expected
+  void (<Div />);
+});
+
+it('should check default prop values', () => {
+  RequiredPropComponent.defaultProps = {prop: null};
+
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<RequiredPropComponent />)
+  ).toErrorDev(
+    'Warning: Failed prop type: The prop `prop` is marked as required in ' +
+      '`RequiredPropComponent`, but its value is `null`.\n' +
+      '    in RequiredPropComponent (at **)'
+  );
+});
+
+it('should warn on invalid prop types', () => {
+  // Since there is no prevalidation step for ES6 classes, there is no hook
+  // for us to issue a warning earlier than element creation when the error
+  // actually occurs. Since this step is skipped in production, we should just
+  // warn instead of throwing for this case.
+  class NullPropTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullPropTypeComponent.propTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullPropTypeComponent />)
+  ).toErrorDev(
+    'NullPropTypeComponent: prop type `prop` is invalid; it must be a ' +
+      'function, usually from the `prop-types` package,'
+  );
+});
+
+it('should warn on invalid context types', () => {
+  class NullContextTypeComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  NullContextTypeComponent.contextTypes = {
+    prop: null,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<NullContextTypeComponent />)
+  ).toErrorDev(
+    'NullContextTypeComponent: context type `prop` is invalid; it must ' +
+      'be a function, usually from the `prop-types` package,'
+  );
+});
+
+it('should warn if getDefaultProps is specified on the class', () => {
+  class GetDefaultPropsComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  GetDefaultPropsComponent.getDefaultProps = () => ({
+    prop: 'foo',
+  });
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(<GetDefaultPropsComponent />)
+  ).toErrorDev(
+    'getDefaultProps is only used on classic React.createClass definitions.' +
+      ' Use a static property named `defaultProps` instead.',
+    {withoutStack: true}
+  );
+});
+
+it('should warn if component declares PropTypes instead of propTypes', () => {
+  class MisspelledPropTypesComponent extends React.Component {
+    render() {
+      return <span>{this.props.prop}</span>;
+    }
+  }
+  MisspelledPropTypesComponent.PropTypes = {
+    prop: PropTypes.string,
+  };
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <MisspelledPropTypesComponent prop="hi" />
+    )
+  ).toErrorDev(
+    'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
+      'instead of `propTypes`. Did you misspell the property assignment?',
+    {withoutStack: true}
+  );
+});
+
+it('warns for fragments with illegal attributes', () => {
+  class Foo extends React.Component {
+    render() {
+      return <React.Fragment a={1}>hello</React.Fragment>;
+    }
+  }
+
+  expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toErrorDev(
+    'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+      'can only have `key` and `children` props.'
+  );
+});
+
+it('warns for fragments with refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return (
+        <React.Fragment
+          ref={bar => {
+            this.foo = bar;
+          }}>
+          hello
+        </React.Fragment>
+      );
+    }
+  }
+
+  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(
+    <>
+      <span>1</span>
+      <span>2</span>
+    </>
+  );
+});
+
+it('warns for fragments of multiple elements with same key', () => {
+  expect(() =>
+    ReactTestUtils.renderIntoDocument(
+      <>
+        <span key="a">1</span>
+        <span key="a">2</span>
+        <span key="b">3</span>
+      </>
+    )
+  ).toErrorDev('Encountered two children with the same key, `a`.', {
+    withoutStack: true,
+  });
+});
+
+it('does not call lazy initializers eagerly', () => {
+  let didCall = false;
+  const Lazy = React.lazy(() => {
+    didCall = true;
+    return {then() {}};
+  });
+  <Lazy />;
+  expect(didCall).toBe(false);
+});
+
+it('supports classic refs', () => {
+  class Foo extends React.Component {
+    render() {
+      return <div className="foo" ref="inner" />;
+    }
+  }
+  const container = document.createElement('div');
+  const instance = ReactDOM.render(<Foo />, container);
+  expect(instance.refs.inner.className).toBe('foo');
+});
+
+it('should support refs on owned components', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  class Component extends React.Component {
+    render() {
+      const inner = <Wrapper object={innerObj} ref="inner" />;
+      const outer = (
+        <Wrapper object={outerObj} ref="outer">
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.refs.inner.getObject()).toEqual(innerObj);
+      expect(this.refs.outer.getObject()).toEqual(outerObj);
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+});
+
+it('should support callback-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    render() {
+      const inner = (
+        <Wrapper object={innerObj} ref={c => (this.innerRef = c)} />
+      );
+      const outer = (
+        <Wrapper object={outerObj} ref={c => (this.outerRef = c)}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.getObject()).toEqual(innerObj);
+      expect(this.outerRef.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should support object-style refs', () => {
+  const innerObj = {};
+  const outerObj = {};
+
+  class Wrapper extends React.Component {
+    getObject = () => {
+      return this.props.object;
+    };
+
+    render() {
+      return <div>{this.props.children}</div>;
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    constructor() {
+      super();
+      this.innerRef = React.createRef();
+      this.outerRef = React.createRef();
+    }
+    render() {
+      const inner = <Wrapper object={innerObj} ref={this.innerRef} />;
+      const outer = (
+        <Wrapper object={outerObj} ref={this.outerRef}>
+          {inner}
+        </Wrapper>
+      );
+      return outer;
+    }
+
+    componentDidMount() {
+      expect(this.innerRef.current.getObject()).toEqual(innerObj);
+      expect(this.outerRef.current.getObject()).toEqual(outerObj);
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should support new-style refs with mixed-up owners', () => {
+  class Wrapper extends React.Component {
+    getTitle = () => {
+      return this.props.title;
+    };
+
+    render() {
+      return this.props.getContent();
+    }
+  }
+
+  let mounted = false;
+
+  class Component extends React.Component {
+    getInner = () => {
+      // (With old-style refs, it's impossible to get a ref to this div
+      // because Wrapper is the current owner when this function is called.)
+      return <div className="inner" ref={c => (this.innerRef = c)} />;
+    };
+
+    render() {
+      return (
+        <Wrapper
+          title="wrapper"
+          ref={c => (this.wrapperRef = c)}
+          getContent={this.getInner}
+        />
+      );
+    }
+
+    componentDidMount() {
+      // Check .props.title to make sure we got the right elements back
+      expect(this.wrapperRef.getTitle()).toBe('wrapper');
+      expect(this.innerRef.className).toBe('inner');
+      mounted = true;
+    }
+  }
+
+  ReactTestUtils.renderIntoDocument(<Component />);
+  expect(mounted).toBe(true);
+});
+
+it('should warn when `key` is being accessed on composite element', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.key} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child key="0" />
+          <Child key="1" />
+          <Child key="2" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)'
+  );
+});
+
+it('should warn when `ref` is being accessed', () => {
+  const container = document.createElement('div');
+  class Child extends React.Component {
+    render() {
+      return <div> {this.props.ref} </div>;
+    }
+  }
+  class Parent extends React.Component {
+    render() {
+      return (
+        <div>
+          <Child ref="childElement" />
+        </div>
+      );
+    }
+  }
+  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://reactjs.org/link/special-props)'
+  );
+});
+
+it('should warn when owner and self are different for string refs', () => {
+  class ClassWithRenderProp extends React.Component {
+    render() {
+      return this.props.children();
+    }
+  }
+
+  class ClassParent extends React.Component {
+    render() {
+      return (
+        <ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
+      );
+    }
+  }
+
+  const container = document.createElement('div');
+  if (process.env.BABEL_ENV === 'development') {
+    expect(() => ReactDOM.render(<ClassParent />, container)).toErrorDev([
+      'Warning: Component "ClassWithRenderProp" contains the string ref "myRef". ' +
+        '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://reactjs.org/link/strict-mode-string-ref',
+    ]);
+  } else {
+    ReactDOM.render(<ClassParent />, container);
+  }
+});
diff --git a/fixtures/legacy-jsx-runtimes/react-17/yarn.lock b/fixtures/legacy-jsx-runtimes/react-17/yarn.lock
new file mode 100644
index 00000000000..becb74e0081
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/yarn.lock
@@ -0,0 +1,59 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"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==
+
+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"
+
+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=
+
+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"
+
+react-dom@17.0.0-rc.3:
+  version "17.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.0-rc.3.tgz#6254f82c62ed569a2a90dcf1c7b71d4d8d951744"
+  integrity sha512-rrmZ91kdXBaCVomiNUQ1WvEClb5GcmxewGurd3FnsXKJBOhFdlkGbT5MY5ZQkMXH5xnIvs5ZEEB2iBr2ZqKiqg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "0.20.0-rc.3"
+
+react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react@17.0.0-rc.3:
+  version "17.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.0-rc.3.tgz#ccb426b0146a8c10ee92c2a72d9d813a16a55806"
+  integrity sha512-b1vEcXBmlN2Bu+k57jq2ytEo5p28g5fdRfc02JRdnvGZKKphvlUnAfsrUHiOmUtL/6wvFIusi2zxp8t60fihfw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+scheduler@0.20.0-rc.3:
+  version "0.20.0-rc.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.0-rc.3.tgz#ce616ebdd4073f5026718960d7e2d0928788c626"
+  integrity sha512-rPwhSgPKhRqximLHdl+oJ/8HVcMS2vyZlH74OQHqKbH04ONgKNkJ13DZLPdFSYFos8FUj6+PduO9+OoRaG6QWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
diff --git a/fixtures/legacy-jsx-runtimes/setupTests.js b/fixtures/legacy-jsx-runtimes/setupTests.js
new file mode 100644
index 00000000000..9bc9438b98f
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/setupTests.js
@@ -0,0 +1,308 @@
+'use strict';
+
+// This is mostly copypasta from toWarnDev.js matchers
+// that we use in the main repo Jest configuration.
+
+const expect = global.expect;
+
+const {diff: jestDiff} = require('jest-diff');
+const util = require('util');
+
+function shouldIgnoreConsoleError(format, args) {
+  if (process.env.NODE_ENV !== 'production') {
+    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) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  // This special case exists only for the special source location in
+  // ReactElementValidator. That will go away if we remove source locations.
+  str = str.replace(/Check your code at .+?:\d+/g, 'Check your code at **');
+  // V8 format:
+  //  at Component (/path/filename.js:123:45)
+  // React format:
+  //    in Component (at filename.js:123)
+  return str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+    return '\n    in ' + name + ' (at **)';
+  });
+}
+
+const createMatcherFor = (consoleMethod, matcherName) =>
+  function matcher(callback, expectedMessages, options = {}) {
+    if (process.env.NODE_ENV !== 'production') {
+      // Warn about incorrect usage of matcher.
+      if (typeof expectedMessages === 'string') {
+        expectedMessages = [expectedMessages];
+      } else if (!Array.isArray(expectedMessages)) {
+        throw Error(
+          `${matcherName}() 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(
+          `${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(
+          `${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 = [];
+
+      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 ') || message.includes('\n    at '));
+
+      const consoleSpy = (format, ...args) => {
+        // Ignore uncaught errors reported by jsdom
+        // and React addendums because they're too noisy.
+        if (
+          !logAllErrors &&
+          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 ${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,
+            };
+          }
+        } 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 ${matcherName} call.`,
+              pass: false,
+            };
+          }
+        } else {
+          throw Error(
+            `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}.`
+          );
+        }
+
+        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};
+    }
+  };
+
+expect.extend({
+  toWarnDev: createMatcherFor('warn', 'toWarnDev'),
+  toErrorDev: createMatcherFor('error', 'toErrorDev'),
+});
diff --git a/fixtures/legacy-jsx-runtimes/yarn.lock b/fixtures/legacy-jsx-runtimes/yarn.lock
new file mode 100644
index 00000000000..d2bb49b432f
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/yarn.lock
@@ -0,0 +1,2530 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/compat-data@^7.20.5":
+  version "7.20.14"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.14.tgz#4106fc8b755f3e3ee0a0a7c27dde5de1d2b2baf8"
+  integrity sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==
+
+"@babel/core@^7.11.6", "@babel/core@^7.12.3":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
+  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.7"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helpers" "^7.20.7"
+    "@babel/parser" "^7.20.7"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.12"
+    "@babel/types" "^7.20.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
+"@babel/generator@^7.11.5":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
+  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+  dependencies:
+    "@babel/types" "^7.11.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.20.7", "@babel/generator@^7.7.2":
+  version "7.20.14"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.14.tgz#9fa772c9f86a46c6ac9b321039400712b96f64ce"
+  integrity sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==
+  dependencies:
+    "@babel/types" "^7.20.7"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-builder-react-jsx-experimental@^7.10.4", "@babel/helper-builder-react-jsx-experimental@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.11.5.tgz#4ea43dd63857b0a35cd1f1b161dc29b43414e79f"
+  integrity sha512-Vc4aPJnRZKWfzeCBsqTBnzulVNjABVdahSPhtdMD3Vs80ykx4a87jTHtF/VR+alSrDmNvat7l13yrRHauGcHVw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.11.5"
+
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-compilation-targets@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
+  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-member-expression-to-functions@^7.10.4":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
+  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-transforms@^7.10.4":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
+  integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.11.0"
+    lodash "^4.17.19"
+
+"@babel/helper-module-transforms@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz#df4c7af713c557938c50ea3ad0117a7944b2f1b0"
+  integrity sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.10"
+    "@babel/types" "^7.20.7"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+  dependencies:
+    "@babel/types" "^7.20.2"
+
+"@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helpers@^7.20.7":
+  version "7.20.13"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.13.tgz#e3cb731fb70dc5337134cadc24cbbad31cc87ad2"
+  integrity sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.13"
+    "@babel/types" "^7.20.7"
+
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.13", "@babel/parser@^7.20.7":
+  version "7.20.13"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.13.tgz#ddf1eb5a813588d2fb1692b70c6fce75b945c088"
+  integrity sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==
+
+"@babel/parser@^7.10.4", "@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-jsx@^7.7.2":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz#4e9a0cfc769c85689b77a2e642d24e9f697fc8c7"
+  integrity sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+
+"@babel/plugin-transform-modules-commonjs@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
+  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-react-display-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
+  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-development@^7.10.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.11.5.tgz#e1439e6a57ee3d43e9f54ace363fb29cefe5d7b6"
+  integrity sha512-cImAmIlKJ84sDmpQzm4/0q/2xrXlDezQoixy3qoz1NJeZL/8PRon6xZtluvr4H4FzwlDGI5tCcFupMnXGtr+qw==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.11.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-self@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-source@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
+  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-pure-annotations@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
+  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/preset-react@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
+  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
+
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/traverse@^7.10.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
+  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.13", "@babel/traverse@^7.7.2":
+  version "7.20.13"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.13.tgz#817c1ba13d11accca89478bd5481b2d168d07473"
+  integrity sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.13"
+    "@babel/types" "^7.20.7"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
+  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.4.1.tgz#cbc31d73f6329f693b3d34b365124de797704fff"
+  integrity sha512-m+XpwKSi3PPM9znm5NGS8bBReeAJJpSkL1OuFCqaMaJL2YX9YXLkkI+MBchMPwu+ZuM2rynL51sgfkQteQ1CKQ==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.4.1"
+    jest-util "^29.4.1"
+    slash "^3.0.0"
+
+"@jest/core@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.4.1.tgz#91371179b5959951e211dfaeea4277a01dcca14f"
+  integrity sha512-RXFTohpBqpaTebNdg5l3I5yadnKo9zLBajMT0I38D0tDhreVBYv3fA8kywthI00sWxPztWLD3yjiUkewwu/wKA==
+  dependencies:
+    "@jest/console" "^29.4.1"
+    "@jest/reporters" "^29.4.1"
+    "@jest/test-result" "^29.4.1"
+    "@jest/transform" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.4.0"
+    jest-config "^29.4.1"
+    jest-haste-map "^29.4.1"
+    jest-message-util "^29.4.1"
+    jest-regex-util "^29.2.0"
+    jest-resolve "^29.4.1"
+    jest-resolve-dependencies "^29.4.1"
+    jest-runner "^29.4.1"
+    jest-runtime "^29.4.1"
+    jest-snapshot "^29.4.1"
+    jest-util "^29.4.1"
+    jest-validate "^29.4.1"
+    jest-watcher "^29.4.1"
+    micromatch "^4.0.4"
+    pretty-format "^29.4.1"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.4.1.tgz#52d232a85cdc995b407a940c89c86568f5a88ffe"
+  integrity sha512-pJ14dHGSQke7Q3mkL/UZR9ZtTOxqskZaC91NzamEH4dlKRt42W+maRBXiw/LWkdJe+P0f/zDR37+SPMplMRlPg==
+  dependencies:
+    "@jest/fake-timers" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    jest-mock "^29.4.1"
+
+"@jest/expect-utils@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.4.1.tgz#105b9f3e2c48101f09cae2f0a4d79a1b3a419cbb"
+  integrity sha512-w6YJMn5DlzmxjO00i9wu2YSozUYRBhIoJ6nQwpMYcBMtiqMGJm1QBzOf6DDgRao8dbtpDoaqLg6iiQTvv0UHhQ==
+  dependencies:
+    jest-get-type "^29.2.0"
+
+"@jest/expect@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.4.1.tgz#3338fa20f547bb6e550c4be37d6f82711cc13c38"
+  integrity sha512-ZxKJP5DTUNF2XkpJeZIzvnzF1KkfrhEF6Rz0HGG69fHl6Bgx5/GoU3XyaeFYEjuuKSOOsbqD/k72wFvFxc3iTw==
+  dependencies:
+    expect "^29.4.1"
+    jest-snapshot "^29.4.1"
+
+"@jest/fake-timers@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.4.1.tgz#7b673131e8ea2a2045858f08241cace5d518b42b"
+  integrity sha512-/1joI6rfHFmmm39JxNfmNAO3Nwm6Y0VoL5fJDy7H1AtWrD1CgRtqJbN9Ld6rhAkGO76qqp4cwhhxJ9o9kYjQMw==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.4.1"
+    jest-mock "^29.4.1"
+    jest-util "^29.4.1"
+
+"@jest/globals@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.4.1.tgz#3cd78c5567ab0249f09fbd81bf9f37a7328f4713"
+  integrity sha512-znoK2EuFytbHH0ZSf2mQK2K1xtIgmaw4Da21R2C/NE/+NnItm5mPEFQmn8gmF3f0rfOlmZ3Y3bIf7bFj7DHxAA==
+  dependencies:
+    "@jest/environment" "^29.4.1"
+    "@jest/expect" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    jest-mock "^29.4.1"
+
+"@jest/reporters@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.4.1.tgz#50d509c08575c75e3cd2176d72ec3786419d5e04"
+  integrity sha512-AISY5xpt2Xpxj9R6y0RF1+O6GRy9JsGa8+vK23Lmzdy1AYcpQn5ItX79wJSsTmfzPKSAcsY1LNt/8Y5Xe5LOSg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.4.1"
+    "@jest/test-result" "^29.4.1"
+    "@jest/transform" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.4.1"
+    jest-util "^29.4.1"
+    jest-worker "^29.4.1"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/schemas@^29.4.0":
+  version "29.4.0"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.0.tgz#0d6ad358f295cc1deca0b643e6b4c86ebd539f17"
+  integrity sha512-0E01f/gOZeNTG76i5eWWSupvSHaIINrTie7vCyjiYFKgzNdyEGd12BUv4oNBFHOqlHDbtoJi3HrQ38KCC90NsQ==
+  dependencies:
+    "@sinclair/typebox" "^0.25.16"
+
+"@jest/source-map@^29.2.0":
+  version "29.2.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.2.0.tgz#ab3420c46d42508dcc3dc1c6deee0b613c235744"
+  integrity sha512-1NX9/7zzI0nqa6+kgpSdKPK+WU1p+SJk3TloWZf5MzPbxri9UEeXX5bWZAPCzbQcyuAzubcdUHA7hcNznmRqWQ==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.15"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/test-result@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.4.1.tgz#997f19695e13b34779ceb3c288a416bd26c3238d"
+  integrity sha512-WRt29Lwt+hEgfN8QDrXqXGgCTidq1rLyFqmZ4lmJOpVArC8daXrZWkWjiaijQvgd3aOUj2fM8INclKHsQW9YyQ==
+  dependencies:
+    "@jest/console" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.4.1.tgz#f7a006ec7058b194a10cf833c88282ef86d578fd"
+  integrity sha512-v5qLBNSsM0eHzWLXsQ5fiB65xi49A3ILPSFQKPXzGL4Vyux0DPZAIN7NAFJa9b4BiTDP9MBF/Zqc/QA1vuiJ0w==
+  dependencies:
+    "@jest/test-result" "^29.4.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.4.1"
+    slash "^3.0.0"
+
+"@jest/transform@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.4.1.tgz#e4f517841bb795c7dcdee1ba896275e2c2d26d4a"
+  integrity sha512-5w6YJrVAtiAgr0phzKjYd83UPbCXsBRTeYI4BXokv9Er9CcrH9hfXL/crCvP2d2nGOcovPUnlYiLPFLZrkG5Hg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.4.1"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.4.1"
+    jest-regex-util "^29.2.0"
+    jest-util "^29.4.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^5.0.0"
+
+"@jest/types@^29.4.1":
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.4.1.tgz#f9f83d0916f50696661da72766132729dcb82ecb"
+  integrity sha512-zbrAXDUOnpJ+FMST2rV7QZOgec8rskg2zv8g2ajeqitp4tvZiyqTCYXANrKsM+ryj5o+LI+ZN2EgU9drrkiwSA==
+  dependencies:
+    "@jest/schemas" "^29.4.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
+  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
+"@sinclair/typebox@^0.25.16":
+  version "0.25.21"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.21.tgz#763b05a4b472c93a8db29b2c3e359d55b29ce272"
+  integrity sha512-gFukHN4t8K4+wVC+ECqeqwzBDeFeTzBXroBTqE6vcWrQGbEUpHO7LYdG0f4xnvYq4VOEwITSlHlp0JBAIFMS/g==
+
+"@sinonjs/commons@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-2.0.0.tgz#fd4ca5b063554307e8327b4564bd56d3b73924a3"
+  integrity sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^10.0.2":
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-10.0.2.tgz#d10549ed1f423d80639c528b6c7f5a1017747d0c"
+  integrity sha512-SwUDyjWnah1AaNl7kxsa7cfLhlTYoiyhDAIgyh+El30YvXs/o7OLXpYH88Zdhyx9JExKrmHDJ+10bwIcY80Jmw==
+  dependencies:
+    "@sinonjs/commons" "^2.0.0"
+
+"@types/babel__core@^7.1.14":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.0.tgz#61bc5a4cae505ce98e1e36c5445e4bee060d8891"
+  integrity sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.18.3.tgz#dfc508a85781e5698d5b33443416b6268c4b3e8d"
+  integrity sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/graceful-fs@^4.1.3":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
+  integrity sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/node@*":
+  version "18.11.18"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
+  integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
+
+"@types/prettier@^2.1.5":
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
+  integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==
+
+"@types/stack-utils@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
+  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+
+"@types/yargs-parser@*":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
+  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+
+"@types/yargs@^17.0.8":
+  version "17.0.22"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.22.tgz#7dd37697691b5f17d020f3c63e7a45971ff71e9a"
+  integrity sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+anymatch@^3.0.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+babel-jest@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.4.1.tgz#01fa167e27470b35c2d4a1b841d9586b1764da19"
+  integrity sha512-xBZa/pLSsF/1sNpkgsiT3CmY7zV1kAsZ9OxxtrFqYucnOuRftXAfcJqcDVyOPeN4lttWTwhLdu0T9f8uvoPEUg==
+  dependencies:
+    "@jest/transform" "^29.4.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.4.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^29.4.0:
+  version "29.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.4.0.tgz#3fd3dfcedf645932df6d0c9fc3d9a704dd860248"
+  integrity sha512-a/sZRLQJEmsmejQ2rPEUe35nO1+C9dc9O1gplH1SXmJxveQSRUYdBk8yGZG/VOUuZs1u2aHZJusEGoRMbhhwCg==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^29.4.0:
+  version "29.4.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.4.0.tgz#c2b03c548b02dea0a18ae21d5759c136f9251ee4"
+  integrity sha512-fUB9vZflUSM3dO/6M2TCAepTzvA4VkOvl67PjErcrQMGt9Eve7uazaeyCZ2th3UtI7ljpiBJES0F7A1vBRsLZA==
+  dependencies:
+    babel-plugin-jest-hoist "^29.4.0"
+    babel-preset-current-node-syntax "^1.0.0"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+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"
+
+braces@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.21.3:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+  dependencies:
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+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@^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@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-lite@^1.0.30001449:
+  version "1.0.30001450"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz#022225b91200589196b814b51b1bbe45144cf74f"
+  integrity sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==
+
+chalk@^2.0.0:
+  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"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
+ci-info@^3.2.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.7.1.tgz#708a6cdae38915d597afdf3b145f2f8e1ff55f3f"
+  integrity sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==
+
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+debug@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
+  integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.1.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+
+deepmerge@^4.2.2:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.0.tgz#65491893ec47756d44719ae520e0e2609233b59b"
+  integrity sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==
+
+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"
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
+diff-sequences@^29.3.1:
+  version "29.3.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.3.1.tgz#104b5b95fe725932421a9c6e5b4bef84c3f2249e"
+  integrity sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ==
+
+electron-to-chromium@^1.4.284:
+  version "1.4.284"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
+  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
+
+emittery@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
+  integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
+
+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==
+
+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"
+
+es-abstract@^1.17.5:
+  version "1.17.7"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
+  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.1"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
+  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.1"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+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=
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+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==
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
+expect@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.4.1.tgz#58cfeea9cbf479b64ed081fd1e074ac8beb5a1fe"
+  integrity sha512-OKrGESHOaMxK3b6zxIq9SOW8kEXztKff/Dvg88j4xIJxur1hspEbedVkR3GpHe5LO+WB2Qw7OWN0RMTdp6as5A==
+  dependencies:
+    "@jest/expect-utils" "^29.4.1"
+    jest-get-type "^29.2.0"
+    jest-matcher-utils "^29.4.1"
+    jest-message-util "^29.4.1"
+    jest-util "^29.4.1"
+
+fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fb-watchman@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"
+  integrity sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==
+  dependencies:
+    bser "2.1.1"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+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==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.5:
+  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-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+glob@^7.1.3, glob@^7.1.4:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.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==
+
+graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+
+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"
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+import-local@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-callable@^1.1.4, is-callable@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
+  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
+
+is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
+is-date-object@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
+
+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-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-symbol@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
+  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
+  dependencies:
+    has-symbols "^1.0.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^29.4.0:
+  version "29.4.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.4.0.tgz#ac2498bcd394228f7eddcadcf928b3583bf2779d"
+  integrity sha512-rnI1oPxgFghoz32Y8eZsGJMjW54UlqT17ycQeCEktcxxwqqKdlj9afl8LNeO0Pbu+h2JQHThQP0BzS67eTRx4w==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
+jest-circus@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.4.1.tgz#ff1b63eb04c3b111cefea9489e8dbadd23ce49bd"
+  integrity sha512-v02NuL5crMNY4CGPHBEflLzl4v91NFb85a+dH9a1pUNx6Xjggrd8l9pPy4LZ1VYNRXlb+f65+7O/MSIbLir6pA==
+  dependencies:
+    "@jest/environment" "^29.4.1"
+    "@jest/expect" "^29.4.1"
+    "@jest/test-result" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.4.1"
+    jest-matcher-utils "^29.4.1"
+    jest-message-util "^29.4.1"
+    jest-runtime "^29.4.1"
+    jest-snapshot "^29.4.1"
+    jest-util "^29.4.1"
+    p-limit "^3.1.0"
+    pretty-format "^29.4.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-cli@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.4.1.tgz#7abef96944f300feb9b76f68b1eb2d68774fe553"
+  integrity sha512-jz7GDIhtxQ37M+9dlbv5K+/FVcIo1O/b1sX3cJgzlQUf/3VG25nvuWzlDC4F1FLLzUThJeWLu8I7JF9eWpuURQ==
+  dependencies:
+    "@jest/core" "^29.4.1"
+    "@jest/test-result" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^29.4.1"
+    jest-util "^29.4.1"
+    jest-validate "^29.4.1"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-config@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.4.1.tgz#e62670c6c980ec21d75941806ec4d0c0c6402728"
+  integrity sha512-g7p3q4NuXiM4hrS4XFATTkd+2z0Ml2RhFmFPM8c3WyKwVDNszbl4E7cV7WIx1YZeqqCtqbtTtZhGZWJlJqngzg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    babel-jest "^29.4.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.4.1"
+    jest-environment-node "^29.4.1"
+    jest-get-type "^29.2.0"
+    jest-regex-util "^29.2.0"
+    jest-resolve "^29.4.1"
+    jest-runner "^29.4.1"
+    jest-util "^29.4.1"
+    jest-validate "^29.4.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.4.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.4.1.tgz#9a6dc715037e1fa7a8a44554e7d272088c4029bd"
+  integrity sha512-uazdl2g331iY56CEyfbNA0Ut7Mn2ulAG5vUaEHXycf1L6IPyuImIxSz4F0VYBKi7LYIuxOwTZzK3wh5jHzASMw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.3.1"
+    jest-get-type "^29.2.0"
+    pretty-format "^29.4.1"
+
+jest-docblock@^29.2.0:
+  version "29.2.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.2.0.tgz#307203e20b637d97cee04809efc1d43afc641e82"
+  integrity sha512-bkxUsxTgWQGbXV5IENmfiIuqZhJcyvF7tU4zJ/7ioTutdz4ToB5Yx6JOFBpgI+TphRY4lhOyCWGNH/QFQh5T6A==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.4.1.tgz#05ce9979e7486dbd0f5d41895f49ccfdd0afce01"
+  integrity sha512-QlYFiX3llJMWUV0BtWht/esGEz9w+0i7BHwODKCze7YzZzizgExB9MOfiivF/vVT0GSQ8wXLhvHXh3x2fVD4QQ==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    chalk "^4.0.0"
+    jest-get-type "^29.2.0"
+    jest-util "^29.4.1"
+    pretty-format "^29.4.1"
+
+jest-environment-node@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.4.1.tgz#22550b7d0f8f0b16228639c9f88ca04bbf3c1974"
+  integrity sha512-x/H2kdVgxSkxWAIlIh9MfMuBa0hZySmfsC5lCsWmWr6tZySP44ediRKDUiNggX/eHLH7Cd5ZN10Rw+XF5tXsqg==
+  dependencies:
+    "@jest/environment" "^29.4.1"
+    "@jest/fake-timers" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    jest-mock "^29.4.1"
+    jest-util "^29.4.1"
+
+jest-get-type@^29.2.0:
+  version "29.2.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.2.0.tgz#726646f927ef61d583a3b3adb1ab13f3a5036408"
+  integrity sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA==
+
+jest-haste-map@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.4.1.tgz#b0579dc82d94b40ed9041af56ad25c2f80bedaeb"
+  integrity sha512-imTjcgfVVTvg02khXL11NNLTx9ZaofbAWhilrMg/G8dIkp+HYCswhxf0xxJwBkfhWb3e8dwbjuWburvxmcr58w==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.2.0"
+    jest-util "^29.4.1"
+    jest-worker "^29.4.1"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-leak-detector@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.4.1.tgz#632186c546e084da2b490b7496fee1a1c9929637"
+  integrity sha512-akpZv7TPyGMnH2RimOCgy+hPmWZf55EyFUvymQ4LMsQP8xSPlZumCPtXGoDhFNhUE2039RApZkTQDKU79p/FiQ==
+  dependencies:
+    jest-get-type "^29.2.0"
+    pretty-format "^29.4.1"
+
+jest-matcher-utils@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.4.1.tgz#73d834e305909c3b43285fbc76f78bf0ad7e1954"
+  integrity sha512-k5h0u8V4nAEy6lSACepxL/rw78FLDkBnXhZVgFneVpnJONhb2DhZj/Gv4eNe+1XqQ5IhgUcqj745UwH0HJmMnA==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.4.1"
+    jest-get-type "^29.2.0"
+    pretty-format "^29.4.1"
+
+jest-message-util@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.4.1.tgz#522623aa1df9a36ebfdffb06495c7d9d19e8a845"
+  integrity sha512-H4/I0cXUaLeCw6FM+i4AwCnOwHRgitdaUFOdm49022YD5nfyr8C/DrbXOBEyJaj+w/y0gGJ57klssOaUiLLQGQ==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.4.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.4.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.4.1.tgz#a218a2abf45c99c501d4665207748a6b9e29afbd"
+  integrity sha512-MwA4hQ7zBOcgVCVnsM8TzaFLVUD/pFWTfbkY953Y81L5ret3GFRZtmPmRFAjKQSdCKoJvvqOu6Bvfpqlwwb0dQ==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    jest-util "^29.4.1"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
+
+jest-regex-util@^29.2.0:
+  version "29.2.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.2.0.tgz#82ef3b587e8c303357728d0322d48bbfd2971f7b"
+  integrity sha512-6yXn0kg2JXzH30cr2NlThF+70iuO/3irbaB4mh5WyqNIvLLP+B6sFdluO1/1RJmslyh/f9osnefECflHvTbwVA==
+
+jest-resolve-dependencies@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.4.1.tgz#02420a2e055da105e5fca8218c471d8b9553c904"
+  integrity sha512-Y3QG3M1ncAMxfjbYgtqNXC5B595zmB6e//p/qpA/58JkQXu/IpLDoLeOa8YoYfsSglBKQQzNUqtfGJJT/qLmJg==
+  dependencies:
+    jest-regex-util "^29.2.0"
+    jest-snapshot "^29.4.1"
+
+jest-resolve@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.4.1.tgz#4c6bf71a07b8f0b79c5fdf4f2a2cf47317694c5e"
+  integrity sha512-j/ZFNV2lm9IJ2wmlq1uYK0Y/1PiyDq9g4HEGsNTNr3viRbJdV+8Lf1SXIiLZXFvyiisu0qUyIXGBnw+OKWkJwQ==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.4.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.4.1"
+    jest-validate "^29.4.1"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
+
+jest-runner@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.4.1.tgz#57460d9ebb0eea2e27eeddca1816cf8537469661"
+  integrity sha512-8d6XXXi7GtHmsHrnaqBKWxjKb166Eyj/ksSaUYdcBK09VbjPwIgWov1VwSmtupCIz8q1Xv4Qkzt/BTo3ZqiCeg==
+  dependencies:
+    "@jest/console" "^29.4.1"
+    "@jest/environment" "^29.4.1"
+    "@jest/test-result" "^29.4.1"
+    "@jest/transform" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.2.0"
+    jest-environment-node "^29.4.1"
+    jest-haste-map "^29.4.1"
+    jest-leak-detector "^29.4.1"
+    jest-message-util "^29.4.1"
+    jest-resolve "^29.4.1"
+    jest-runtime "^29.4.1"
+    jest-util "^29.4.1"
+    jest-watcher "^29.4.1"
+    jest-worker "^29.4.1"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runtime@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.4.1.tgz#9a50f9c69d3a391690897c01b0bfa8dc5dd45808"
+  integrity sha512-UXTMU9uKu2GjYwTtoAw5rn4STxWw/nadOfW7v1sx6LaJYa3V/iymdCLQM6xy3+7C6mY8GfX22vKpgxY171UIoA==
+  dependencies:
+    "@jest/environment" "^29.4.1"
+    "@jest/fake-timers" "^29.4.1"
+    "@jest/globals" "^29.4.1"
+    "@jest/source-map" "^29.2.0"
+    "@jest/test-result" "^29.4.1"
+    "@jest/transform" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.4.1"
+    jest-message-util "^29.4.1"
+    jest-mock "^29.4.1"
+    jest-regex-util "^29.2.0"
+    jest-resolve "^29.4.1"
+    jest-snapshot "^29.4.1"
+    jest-util "^29.4.1"
+    semver "^7.3.5"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-snapshot@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.4.1.tgz#5692210b3690c94f19317913d4082b123bd83dd9"
+  integrity sha512-l4iV8EjGgQWVz3ee/LR9sULDk2pCkqb71bjvlqn+qp90lFwpnulHj4ZBT8nm1hA1C5wowXLc7MGnw321u0tsYA==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.4.1"
+    "@jest/transform" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.4.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.4.1"
+    jest-get-type "^29.2.0"
+    jest-haste-map "^29.4.1"
+    jest-matcher-utils "^29.4.1"
+    jest-message-util "^29.4.1"
+    jest-util "^29.4.1"
+    natural-compare "^1.4.0"
+    pretty-format "^29.4.1"
+    semver "^7.3.5"
+
+jest-util@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.4.1.tgz#2eeed98ff4563b441b5a656ed1a786e3abc3e4c4"
+  integrity sha512-bQy9FPGxVutgpN4VRc0hk6w7Hx/m6L53QxpDreTZgJd9gfx/AV2MjyPde9tGyZRINAUrSv57p2inGBu2dRLmkQ==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.4.1.tgz#0d5174510415083ec329d4f981bf6779211f17e9"
+  integrity sha512-qNZXcZQdIQx4SfUB/atWnI4/I2HUvhz8ajOSYUu40CSmf9U5emil8EDHgE7M+3j9/pavtk3knlZBDsgFvv/SWw==
+  dependencies:
+    "@jest/types" "^29.4.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.2.0"
+    leven "^3.1.0"
+    pretty-format "^29.4.1"
+
+jest-watcher@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.4.1.tgz#6e3e2486918bd778849d4d6e67fd77b814f3e6ed"
+  integrity sha512-vFOzflGFs27nU6h8dpnVRER3O2rFtL+VMEwnG0H3KLHcllLsU8y9DchSh0AL/Rg5nN1/wSiQ+P4ByMGpuybaVw==
+  dependencies:
+    "@jest/test-result" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.4.1"
+    string-length "^4.0.1"
+
+jest-worker@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.4.1.tgz#7cb4a99a38975679600305650f86f4807460aab1"
+  integrity sha512-O9doU/S1EBe+yp/mstQ0VpPwpv0Clgn68TkNwGxL6/usX/KUW9Arnn4ag8C3jc6qHcXznhsT5Na1liYzAsuAbQ==
+  dependencies:
+    "@types/node" "*"
+    jest-util "^29.4.1"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.4.1.tgz#bb34baca8e05901b49c02c62f1183a6182ea1785"
+  integrity sha512-cknimw7gAXPDOmj0QqztlxVtBVCw2lYY9CeIE5N6kD+kET1H4H79HSNISJmijb1HF+qk+G+ploJgiDi5k/fRlg==
+  dependencies:
+    "@jest/core" "^29.4.1"
+    "@jest/types" "^29.4.1"
+    import-local "^3.0.2"
+    jest-cli "^29.4.1"
+
+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-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+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==
+
+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==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+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"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+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==
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+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==
+
+minimatch@^3.0.4, minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-releases@^2.0.8:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.9.tgz#fe66405285382b0c4ac6bcfbfbe7e8a510650b4d"
+  integrity sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA==
+
+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==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+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#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
+  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.0"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+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-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pirates@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+pretty-format@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.4.1.tgz#0da99b532559097b8254298da7c75a0785b1751c"
+  integrity sha512-dt/Z761JUVsrIKaY215o1xQJBGlSmTx/h4cSqXqjHLnU1+Kt+mavVE7UgqJJO5ukx5HjSswHfmXz4LjS2oIJfg==
+  dependencies:
+    "@jest/schemas" "^29.4.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve.exports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.0.tgz#c1a0028c2d166ec2fbf7d0644584927e76e7400e"
+  integrity sha512-6K/gDlqgQscOlg9fSRpWstA8sYe8rbELsSTNpx+3kTrsVCzvSl0zIvRErM7fdl9ERWDsKnrLnwB+Ne89918XOg==
+
+resolve@^1.20.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+semver@^6.0.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==
+
+semver@^7.3.5:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^3.0.3, signal-exit@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+source-map-support@0.5.13:
+  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"
+
+source-map@^0.5.0:
+  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:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string.prototype.trimend@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
+  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trimstart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
+  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+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"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+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-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+update-browserslist-db@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+v8-to-istanbul@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+
+walker@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.0.tgz#54303f117e109bf3d540261125c8ea5a7320fab0"
+  integrity sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.3.1:
+  version "17.6.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.6.2.tgz#2e23f2944e976339a1ee00f18c77fedee8332541"
+  integrity sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/fixtures/nesting/.env b/fixtures/nesting/.env
new file mode 100644
index 00000000000..eff23057e14
--- /dev/null
+++ b/fixtures/nesting/.env
@@ -0,0 +1,2 @@
+EXTEND_ESLINT=true
+SKIP_PREFLIGHT_CHECK=true
diff --git a/fixtures/nesting/.eslintignore b/fixtures/nesting/.eslintignore
new file mode 100644
index 00000000000..4c368bf0fb5
--- /dev/null
+++ b/fixtures/nesting/.eslintignore
@@ -0,0 +1 @@
+src/*/node_modules
diff --git a/fixtures/nesting/.gitignore b/fixtures/nesting/.gitignore
new file mode 100644
index 00000000000..abaccc497db
--- /dev/null
+++ b/fixtures/nesting/.gitignore
@@ -0,0 +1,27 @@
+# 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*
+
+# copies of shared
+src/*/shared
+src/*/node_modules
diff --git a/fixtures/nesting/README.md b/fixtures/nesting/README.md
new file mode 100644
index 00000000000..d9106539c21
--- /dev/null
+++ b/fixtures/nesting/README.md
@@ -0,0 +1,163 @@
+# Nested React Demo
+
+This is a demo of how you can configure a build system to serve **two different versions of React** side by side in the same app. This is not optimal, and should only be used as a compromise to prevent your app from getting stuck on an old version of React.
+
+## You Probably Don't Need This
+
+Note that **this approach is meant to be an escape hatch, not the norm**.
+
+Normally, we encourage you to use a single version of React across your whole app. When you need to upgrade React, it is better to try to upgrade it all at once. We try to keep breaking changes between versions to the minimum, and often there are automatic scripts ("codemods") that can assist you with migration. You can always find the migration information for any release on [our blog](https://reactjs.org/blog/).
+
+Using a single version of React removes a lot of complexity. It is also essential to ensure the best experience for your users who don't have to download the code twice. Always prefer using one React.
+
+## What Is This For?
+
+However, for some apps that have been in production for many years, upgrading all screens at once may be prohibitively difficult. For example, React components written in 2014 may still rely on [the unofficial legacy context API](https://reactjs.org/docs/legacy-context.html) (not to be confused with the modern one), and are not always maintained. 
+
+Traditionally, this meant that if a legacy API is deprecated, you would be stuck on the old version of React forever. That prevents your whole app from receiving improvements and bugfixes. This repository demonstrates a hybrid approach. It shows how you can use a newer version of React for some parts of your app, while **lazy-loading an older version of React** for the parts that haven't been migrated yet.
+
+This approach is inherently more complex, and should be used as a last resort when you can't upgrade.
+
+## Version Requirements
+
+This demo uses two different versions of React: React 17 for "modern" components (in `src/modern`), and React 16.8 for "legacy" components (in `src/legacy`).
+
+**We still recommend upgrading your whole app to React 17 in one piece.** The React 17 release intentionally has minimal breaking changes so that it's easier to upgrade to. In particular, React 17 solves some problems with nesting related to event propagation that earlier versions of React did not handle well. We expect that this nesting demo may not be as useful today as during a future migration from React 17 to the future major versions where some of the long-deprecated APIs may be removed.
+
+However, if you're already stuck on an old version of React, you may found this approach useful today. If you remove a Hook call from `src/shared/Clock.js`, you can downgrade the legacy React all the way down to React 16.3. If you then remove Context API usage from `src/legacy/createLegacyRoot.js`, you can further downgrade the legacy React version, but keep in mind that the usage of third-party libraries included in this demo (React Router and React Redux) may need to be adjusted or removed.
+
+## Installation
+
+To run this demo, open its folder in Terminal and execute:
+
+```sh
+npm install
+npm start
+```
+
+If you want to test the production build, you can run instead:
+
+```
+npm install
+npm run build
+npx serve -s build
+```
+
+This sample app uses client-side routing and consists of two routes:
+
+- `/` renders a page which uses a newer version of React. (In the production build, you can verify that only one version of React is being loaded when this route is rendered.)
+- `/about` renders a page which uses an older version of React for a part of its tree. (In the production build, you can verify that both versions of React are loaded from different chunks.)
+
+**The purpose of this demo is to show some nuances of such setup:**
+
+- How to install two versions of React in a single app with npm side by side.
+- How to avoid the ["invalid Hook call" error](https://github.com/facebook/react/issues/13991) while nesting React trees.
+- How to pass context between different versions of React.
+- How to lazy-load the second React bundle so it's only loaded on the screens that use it.
+- How to do all of this without a special bundler configuration.
+
+## How It Works
+
+File structure is extremely important in this demo. It has a direct effect on which code is going to use which version of React. This particular demo is using Create React App without ejecting, so **it doesn't rely on any bundler plugins or configuration**. The principle of this demo is portable to other setups.
+
+### Dependencies
+
+We will use three different `package.json`s: one for non-React code at the root, and two in the respective `src/legacy` and `src/modern` folders that specify the React dependencies:
+
+- **`package.json`**: The root `package.json` is a place for build dependencies (such as `react-scripts`) and any React-agnostic libraries (for example, `lodash`, `immer`, or `redux`). We do **not** include React or any React-related libraries in this file.
+- **`src/legacy/package.json`**: This is where we declare the `react` and `react-dom`  dependencies for the "legacy" trees. In this demo, we're using React 16.8 (although, as noted above, we could downgrade it further below). This is **also** where we specify any third-party libraries that use React. For example, we include `react-router` and `react-redux` in this example. 
+- **`src/modern/package.json`**: This is where we declare the `react` and `react-dom`  dependencies for the "modern" trees. In this demo, we're using React 17. Here, we also specify third-party dependencies that use React and are used from the modern part of our app. This is why we *also* have `react-router` and `react-redux` in this file. (Their versions don't strictly have to match their `legacy` counterparts, but features that rely on context may require workarounds if they differ.)
+
+The `scripts` in the root `package.json` are set up so that when you run `npm install` in it, it also runs `npm install` in both `src/legacy` and `src/modern` folders.
+
+**Note:** This demo is set up to use a few third-party dependencies (React Router and Redux). These are not essential, and you can remove them from the demo. They are included so we can show how to make them work with this approach.
+
+### Folders
+
+There are a few key folders in this example:
+
+- **`src`**: Root of the source tree. At this level (or below it, except for the special folders noted below), you can put any logic that's agnostic of React. For example, in this demo we have `src/index.js` which is the app's entry point, and `src/store.js` which exports a Redux store. These regular modules only execute once, and are **not** duplicated between the bundles.
+- **`src/legacy`**: This is where all the code using the older version of React should go. This includes React components and Hooks, and general product code that is **only** used by the legacy trees.
+- **`src/modern`**: This is where all the code using the newer version of React should go. This includes React components and Hooks, and general product code that is **only** used by the modern trees.
+- **`src/shared`**: You may have some components or Hooks that you wish to use from both modern and legacy subtrees. The build process is set up so that **everything inside `src/shared` gets copied by a file watcher** into both `src/legacy/shared` and `src/modern/shared` on every change. This lets you write a component or a Hook once, but reuse it in both places.
+ 
+### Lazy Loading
+
+Loading two Reacts on the same page is bad for the user experience, so you should strive to push this as far as possible from the critical path of your app. For example, if there is a dialog that is less commonly used, or a route that is rarely visited, those are better candidates for staying on an older version of React than parts of your homepage.
+
+To encourage only loading the older React when necessary, this demo includes a helper that works similarly to `React.lazy`. For example, `src/modern/AboutPage.js`, simplified, looks like this:
+
+```js
+import lazyLegacyRoot from './lazyLegacyRoot';
+
+// Lazy-load a component from the bundle using legacy React.
+const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting'));
+
+function AboutPage() {
+  return (
+    <>
+      <h3>This component is rendered by React ({React.version}).</h3>
+      <Greeting />
+    </>
+  );
+}
+```
+
+As a result, only if the `AboutPage` (and as a result, `<Greeting />`) gets rendered, we will load the bundle containing the legacy React and the legacy `Greeting` component. Like with `React.lazy()`, we wrap it in `<Suspense>` to specify the loading indicator:
+
+```js
+<Suspense fallback={<Spinner />}>
+  <AboutPage />
+</Suspense>
+```
+
+If the legacy component is only rendered conditionally, we won't load the second React until it's shown:
+
+```js
+<>
+  <button onClick={() => setShowGreeting(true)}>
+    Say hi
+  </button>
+  {showGreeting && (
+    <Suspense fallback={<Spinner />}>
+      <Greeting />
+    </Suspense>
+  )}
+</>
+```
+
+
+The implementation of the `src/modern/lazyLegacyRoot.js` helper is included so you can tweak it and customize it to your needs. Remember to test lazy loading with the production builds because the bundler may not optimize it in development.
+
+### Context
+
+If you have nested trees managed by different versions of React, the inner tree won't "see" the outer tree's Context.
+
+This breaks third-party libraries like React Redux or React Router, as well as any of your own usage of Context (for example, for theming).
+
+To solve this problem, we read all the Contexts we care about in the outer tree, pass them to the inner tree, and then wrap the inner tree in the corresponding Providers. You can see this in action in two files:
+
+* `src/modern/lazyLegacyRoot.js`: Look for `useContext` calls, and how their results are combined into a single object that is passed through. **You can read more Contexts there** if your app requires them.
+* `src/legacy/createLegacyRoot.js`: Look for the `Bridge` component which receives that object and wraps its children with the appropriate Context Providers. **You can wrap them with more Providers there** if your app requires them.
+
+Note that, generally saying, this approach is somewhat fragile, especially because some libraries may not expose their Contexts officially or consider their structure private. You may be able to expose private Contexts by using a tool like [patch-package](https://www.npmjs.com/package/patch-package), but remember to keep all the versions pinned because even a patch release of a third-party library may change the behavior.
+
+### Nesting Direction
+
+In this demo, we use an older React inside an app managed by the newer React. However, we could rename the folders and apply the same approach in the other direction.
+
+### Event Propagation
+
+Note that before React 17, `event.stopPropagation()` in the inner React tree does not prevent the event propagation to the outer React tree. This may cause unexpected behavior when extracting a UI tree like a dialog to use a separate React. This is because prior to React 17, both Reacts would attach the event listener at the `document` level. React 17 fixes this by attaching handlers to the roots. We strongly recommend upgrading to React 17 before considering the nesting strategy for future upgrades.
+
+### Gotchas
+
+This setup is unusual, so it has a few gotchas.
+
+* Don't add `package.json` to the `src/shared` folder. For example, if you want to use an npm React component inside `src/shared`, you should add it to both `src/modern/package.json` and `src/legacy/package.json` instead. You can use different versions of it but make sure your code works with both of them — and that it works with both Reacts!
+* Don't use React outside of the `src/modern`, `src/legacy`, or `src/shared`. Don't add React-related libraries outside of `src/modern/package.json` or `src/legacy/package.json`.
+* Remember that `src/shared` is where you write shared components, but the files you write there are automatically copied into `src/modern/shared` and `src/legacy/shared`, **from which you should import them**. Both of the target directories are in `.gitignore`. Importing directly from `src/shared` **will not work** because it is ambiguous what `react` refers to in that folder.
+* Keep in mind that any code in `src/shared` gets duplicated between the legacy and the modern bundles. Code that should not be duplicated needs to be anywhere else in `src` (but you can't use React there since the version is ambiguous).
+* You'll want to exclude `src/*/node_modules` from your linter's configuration, as this demo does in `.eslintignorerc`.
+
+This setup is complicated, and we don't recommend it for most apps. However, we believe it is important to offer it as an option for apps that would otherwise get left behind. There might be ways to simplify it with a layer of tooling, but this example is intentionally showing the low-level mechanism that other tools may build on.
diff --git a/fixtures/nesting/package.json b/fixtures/nesting/package.json
new file mode 100644
index 00000000000..928722785b9
--- /dev/null
+++ b/fixtures/nesting/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "react-nesting-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
+  },
+  "scripts": {
+    "postinstall": "run-p install:*",
+    "install:legacy": "cd src/legacy && npm install",
+    "install:modern": "cd src/modern && npm install",
+    "copy:legacy": "cpx 'src/shared/**' 'src/legacy/shared/'",
+    "copy:modern": "cpx 'src/shared/**' 'src/modern/shared/'",
+    "watch:legacy": "cpx 'src/shared/**' 'src/legacy/shared/' --watch --no-initial",
+    "watch:modern": "cpx 'src/shared/**' 'src/modern/shared/' --watch --no-initial",
+    "prebuild": "run-p copy:*",
+    "predev": "run-p copy:*",
+    "dev": "run-p dev-app watch:*",
+    "dev-app": "react-scripts start",
+    "build": "react-scripts build",
+    "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"
+    ]
+  },
+  "devDependencies": {
+    "cpx": "^1.5.0",
+    "npm-run-all": "^4.1.5"
+  }
+}
diff --git a/fixtures/nesting/public/index.html b/fixtures/nesting/public/index.html
new file mode 100644
index 00000000000..6252f08e495
--- /dev/null
+++ b/fixtures/nesting/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/fixtures/nesting/src/index.js b/fixtures/nesting/src/index.js
new file mode 100644
index 00000000000..6a70a324244
--- /dev/null
+++ b/fixtures/nesting/src/index.js
@@ -0,0 +1 @@
+import './modern/index';
diff --git a/fixtures/nesting/src/legacy/Greeting.js b/fixtures/nesting/src/legacy/Greeting.js
new file mode 100644
index 00000000000..11bf3faf31c
--- /dev/null
+++ b/fixtures/nesting/src/legacy/Greeting.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {Component} from 'react';
+import {findDOMNode} from 'react-dom';
+import {Link} from 'react-router-dom';
+import {connect} from 'react-redux';
+import {store} from '../store';
+
+import ThemeContext from './shared/ThemeContext';
+import Clock from './shared/Clock';
+
+store.subscribe(() => {
+  console.log('Counter:', store.getState());
+});
+
+class AboutSection extends Component {
+  componentDidMount() {
+    // The modern app is wrapped in StrictMode,
+    // but the legacy bits can still use old APIs.
+    findDOMNode(this);
+  }
+  render() {
+    return (
+      <ThemeContext.Consumer>
+        {theme => (
+          <div style={{border: '1px dashed black', padding: 20}}>
+            <h3>src/legacy/Greeting.js</h3>
+            <h4 style={{color: theme}}>
+              This component is rendered by the nested React ({React.version}).
+            </h4>
+            <Clock />
+            <p>
+              Counter: {this.props.counter}{' '}
+              <button onClick={() => this.props.dispatch({type: 'increment'})}>
+                +
+              </button>
+            </p>
+            <b>
+              <Link to="/">Go to Home</Link>
+            </b>
+          </div>
+        )}
+      </ThemeContext.Consumer>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {counter: state};
+}
+
+export default connect(mapStateToProps)(AboutSection);
diff --git a/fixtures/nesting/src/legacy/createLegacyRoot.js b/fixtures/nesting/src/legacy/createLegacyRoot.js
new file mode 100644
index 00000000000..ec4941b5d92
--- /dev/null
+++ b/fixtures/nesting/src/legacy/createLegacyRoot.js
@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-pascal-case */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ThemeContext from './shared/ThemeContext';
+
+// Note: this is a semi-private API, but it's ok to use it
+// if we never inspect the values, and only pass them through.
+import {__RouterContext} from 'react-router';
+import {Provider} from 'react-redux';
+
+// Pass through every context required by this tree.
+// The context object is populated in src/modern/withLegacyRoot.
+function Bridge({children, context}) {
+  return (
+    <ThemeContext.Provider value={context.theme}>
+      <__RouterContext.Provider value={context.router}>
+        {/*
+          If we used the newer react-redux@7.x in the legacy/package.json,
+          we woud instead import {ReactReduxContext} from 'react-redux'
+          and render <ReactReduxContext.Provider value={context.reactRedux}>.
+        */}
+        <Provider store={context.reactRedux.store}>{children}</Provider>
+      </__RouterContext.Provider>
+    </ThemeContext.Provider>
+  );
+}
+
+export default function createLegacyRoot(container) {
+  return {
+    render(Component, props, context) {
+      ReactDOM.render(
+        <Bridge context={context}>
+          <Component {...props} />
+        </Bridge>,
+        container
+      );
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}
diff --git a/fixtures/nesting/src/legacy/package.json b/fixtures/nesting/src/legacy/package.json
new file mode 100644
index 00000000000..7517005ef9e
--- /dev/null
+++ b/fixtures/nesting/src/legacy/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "react-nesting-example-legacy",
+  "dependencies": {
+    "react": "16.8",
+    "react-dom": "16.8",
+    "react-redux": "4.4.10",
+    "react-router-dom": "5.2.0"
+  }
+}
diff --git a/fixtures/nesting/src/modern/AboutPage.js b/fixtures/nesting/src/modern/AboutPage.js
new file mode 100644
index 00000000000..27e52dad5a8
--- /dev/null
+++ b/fixtures/nesting/src/modern/AboutPage.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import {useContext} from 'react';
+import {connect} from 'react-redux';
+
+import ThemeContext from './shared/ThemeContext';
+import lazyLegacyRoot from './lazyLegacyRoot';
+
+// Lazy-load a component from the bundle using legacy React.
+const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting'));
+
+function AboutPage({counter, dispatch}) {
+  const theme = useContext(ThemeContext);
+  return (
+    <>
+      <h2>src/modern/AboutPage.js</h2>
+      <h3 style={{color: theme}}>
+        This component is rendered by the outer React ({React.version}).
+      </h3>
+      <Greeting />
+      <br />
+      <p>
+        Counter: {counter}{' '}
+        <button onClick={() => dispatch({type: 'increment'})}>+</button>
+      </p>
+    </>
+  );
+}
+
+function mapStateToProps(state) {
+  return {counter: state};
+}
+
+export default connect(mapStateToProps)(AboutPage);
diff --git a/fixtures/nesting/src/modern/App.js b/fixtures/nesting/src/modern/App.js
new file mode 100644
index 00000000000..51782179284
--- /dev/null
+++ b/fixtures/nesting/src/modern/App.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import {useState, Suspense} from 'react';
+import {BrowserRouter, Switch, Route} from 'react-router-dom';
+
+import HomePage from './HomePage';
+import AboutPage from './AboutPage';
+import ThemeContext from './shared/ThemeContext';
+
+export default function App() {
+  const [theme, setTheme] = useState('slategrey');
+
+  function handleToggleClick() {
+    if (theme === 'slategrey') {
+      setTheme('hotpink');
+    } else {
+      setTheme('slategrey');
+    }
+  }
+
+  return (
+    <BrowserRouter>
+      <ThemeContext.Provider value={theme}>
+        <div style={{fontFamily: 'sans-serif'}}>
+          <div
+            style={{
+              margin: 20,
+              padding: 20,
+              border: '1px solid black',
+              minHeight: 300,
+            }}>
+            <button onClick={handleToggleClick}>Toggle Theme Context</button>
+            <br />
+            <Suspense fallback={<Spinner />}>
+              <Switch>
+                <Route path="/about">
+                  <AboutPage />
+                </Route>
+                <Route path="/">
+                  <HomePage />
+                </Route>
+              </Switch>
+            </Suspense>
+          </div>
+        </div>
+      </ThemeContext.Provider>
+    </BrowserRouter>
+  );
+}
+
+function Spinner() {
+  return null;
+}
diff --git a/fixtures/nesting/src/modern/HomePage.js b/fixtures/nesting/src/modern/HomePage.js
new file mode 100644
index 00000000000..7b23652ef5c
--- /dev/null
+++ b/fixtures/nesting/src/modern/HomePage.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {useContext} from 'react';
+import {Link} from 'react-router-dom';
+
+import ThemeContext from './shared/ThemeContext';
+import Clock from './shared/Clock';
+
+export default function HomePage({counter, dispatch}) {
+  const theme = useContext(ThemeContext);
+  return (
+    <>
+      <h2>src/modern/HomePage.js</h2>
+      <h3 style={{color: theme}}>
+        This component is rendered by the outer React ({React.version}).
+      </h3>
+      <Clock />
+      <b>
+        <Link to="/about">Go to About</Link>
+      </b>
+    </>
+  );
+}
diff --git a/fixtures/nesting/src/modern/index.js b/fixtures/nesting/src/modern/index.js
new file mode 100644
index 00000000000..940886e9bba
--- /dev/null
+++ b/fixtures/nesting/src/modern/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {StrictMode} from 'react';
+import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
+import App from './App';
+import {store} from '../store';
+
+ReactDOM.render(
+  <StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </StrictMode>,
+  document.getElementById('root')
+);
diff --git a/fixtures/nesting/src/modern/lazyLegacyRoot.js b/fixtures/nesting/src/modern/lazyLegacyRoot.js
new file mode 100644
index 00000000000..a4a1fdbd79a
--- /dev/null
+++ b/fixtures/nesting/src/modern/lazyLegacyRoot.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import {useContext, useMemo, useRef, useState, useLayoutEffect} from 'react';
+import {__RouterContext} from 'react-router';
+import {ReactReduxContext} from 'react-redux';
+
+import ThemeContext from './shared/ThemeContext';
+
+let rendererModule = {
+  status: 'pending',
+  promise: null,
+  result: null,
+};
+
+export default function lazyLegacyRoot(getLegacyComponent) {
+  let componentModule = {
+    status: 'pending',
+    promise: null,
+    result: null,
+  };
+
+  return function Wrapper(props) {
+    const createLegacyRoot = readModule(
+      rendererModule,
+      () => import('../legacy/createLegacyRoot')
+    ).default;
+    const Component = readModule(componentModule, getLegacyComponent).default;
+    const containerRef = useRef(null);
+    const rootRef = useRef(null);
+
+    // Populate every contexts we want the legacy subtree to see.
+    // Then in src/legacy/createLegacyRoot we will apply them.
+    const theme = useContext(ThemeContext);
+    const router = useContext(__RouterContext);
+    const reactRedux = useContext(ReactReduxContext);
+    const context = useMemo(
+      () => ({
+        theme,
+        router,
+        reactRedux,
+      }),
+      [theme, router, reactRedux]
+    );
+
+    // Create/unmount.
+    useLayoutEffect(() => {
+      if (!rootRef.current) {
+        rootRef.current = createLegacyRoot(containerRef.current);
+      }
+      const root = rootRef.current;
+      return () => {
+        root.unmount();
+      };
+    }, [createLegacyRoot]);
+
+    // Mount/update.
+    useLayoutEffect(() => {
+      if (rootRef.current) {
+        rootRef.current.render(Component, props, context);
+      }
+    }, [Component, props, context]);
+
+    return <div style={{display: 'contents'}} ref={containerRef} />;
+  };
+}
+
+// This is similar to React.lazy, but implemented manually.
+// We use this to Suspend rendering of this component until
+// we fetch the component and the legacy React to render it.
+function readModule(record, createPromise) {
+  if (record.status === 'fulfilled') {
+    return record.result;
+  }
+  if (record.status === 'rejected') {
+    throw record.result;
+  }
+  if (!record.promise) {
+    record.promise = createPromise().then(
+      value => {
+        if (record.status === 'pending') {
+          record.status = 'fulfilled';
+          record.promise = null;
+          record.result = value;
+        }
+      },
+      error => {
+        if (record.status === 'pending') {
+          record.status = 'rejected';
+          record.promise = null;
+          record.result = error;
+        }
+      }
+    );
+  }
+  throw record.promise;
+}
diff --git a/fixtures/nesting/src/modern/package.json b/fixtures/nesting/src/modern/package.json
new file mode 100644
index 00000000000..4d11e94913d
--- /dev/null
+++ b/fixtures/nesting/src/modern/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "react-nesting-example-modern",
+  "dependencies": {
+    "react": "0.0.0-3d0895557",
+    "react-dom": "0.0.0-3d0895557",
+    "react-redux": "7.2.1",
+    "react-router-dom": "5.2.0"
+  }
+}
diff --git a/fixtures/nesting/src/shared/Clock.js b/fixtures/nesting/src/shared/Clock.js
new file mode 100644
index 00000000000..8c4b36696ba
--- /dev/null
+++ b/fixtures/nesting/src/shared/Clock.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import useTime from './useTime';
+
+export default function Clock() {
+  const time = useTime();
+  return <p>Time: {time}</p>;
+}
diff --git a/fixtures/nesting/src/shared/ThemeContext.js b/fixtures/nesting/src/shared/ThemeContext.js
new file mode 100644
index 00000000000..caa4b07322a
--- /dev/null
+++ b/fixtures/nesting/src/shared/ThemeContext.js
@@ -0,0 +1,5 @@
+import {createContext} from 'react';
+
+const ThemeContext = createContext(null);
+
+export default ThemeContext;
diff --git a/fixtures/nesting/src/shared/useTime.js b/fixtures/nesting/src/shared/useTime.js
new file mode 100644
index 00000000000..afe7bbf4580
--- /dev/null
+++ b/fixtures/nesting/src/shared/useTime.js
@@ -0,0 +1,12 @@
+import {useState, useEffect} from 'react';
+
+export default function useTimer() {
+  const [value, setValue] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setValue(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return value.toLocaleTimeString();
+}
diff --git a/fixtures/nesting/src/store.js b/fixtures/nesting/src/store.js
new file mode 100644
index 00000000000..d9031980ec9
--- /dev/null
+++ b/fixtures/nesting/src/store.js
@@ -0,0 +1,14 @@
+import {createStore} from 'redux';
+
+function reducer(state = 0, action) {
+  switch (action.type) {
+    case 'increment':
+      return state + 1;
+    default:
+      return state;
+  }
+}
+
+// Because this file is declared above both Modern and Legacy folders,
+// we can import this from either folder without duplicating the object.
+export const store = createStore(reducer);
diff --git a/fixtures/owner-stacks/.gitignore b/fixtures/owner-stacks/.gitignore
new file mode 100644
index 00000000000..4d29575de80
--- /dev/null
+++ b/fixtures/owner-stacks/.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/owner-stacks/README.md b/fixtures/owner-stacks/README.md
new file mode 100644
index 00000000000..c0541f9c04d
--- /dev/null
+++ b/fixtures/owner-stacks/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `yarn build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
diff --git a/fixtures/owner-stacks/package.json b/fixtures/owner-stacks/package.json
new file mode 100644
index 00000000000..2798aab568e
--- /dev/null
+++ b/fixtures/owner-stacks/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "owner-stacks",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "prestart": "cp -a ../../build/oss-experimental/. node_modules && rm -rf node_modules/.cache;",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "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/owner-stacks/public/favicon.ico b/fixtures/owner-stacks/public/favicon.ico
new file mode 100644
index 00000000000..a11777cc471
Binary files /dev/null and b/fixtures/owner-stacks/public/favicon.ico differ
diff --git a/fixtures/owner-stacks/public/index.html b/fixtures/owner-stacks/public/index.html
new file mode 100644
index 00000000000..aa069f27cbd
--- /dev/null
+++ b/fixtures/owner-stacks/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/fixtures/owner-stacks/public/logo192.png b/fixtures/owner-stacks/public/logo192.png
new file mode 100644
index 00000000000..fc44b0a3796
Binary files /dev/null and b/fixtures/owner-stacks/public/logo192.png differ
diff --git a/fixtures/owner-stacks/public/logo512.png b/fixtures/owner-stacks/public/logo512.png
new file mode 100644
index 00000000000..a4e47a6545b
Binary files /dev/null and b/fixtures/owner-stacks/public/logo512.png differ
diff --git a/fixtures/owner-stacks/public/manifest.json b/fixtures/owner-stacks/public/manifest.json
new file mode 100644
index 00000000000..080d6c77ac2
--- /dev/null
+++ b/fixtures/owner-stacks/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/fixtures/owner-stacks/public/robots.txt b/fixtures/owner-stacks/public/robots.txt
new file mode 100644
index 00000000000..e9e57dc4d41
--- /dev/null
+++ b/fixtures/owner-stacks/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/fixtures/owner-stacks/src/App.css b/fixtures/owner-stacks/src/App.css
new file mode 100644
index 00000000000..3c9a8db9251
--- /dev/null
+++ b/fixtures/owner-stacks/src/App.css
@@ -0,0 +1,62 @@
+.App-header {
+  background-color: #282c34;
+  min-height: 10vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.page {
+  display: flex;
+  height: 90vh;
+}
+
+.content {
+  flex: 4;
+  background-color: #f0f0f0;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.content.highlight {
+  background-color: yellow;
+}
+
+.sidebar {
+  flex: 1;
+  background-color: #d0d0d0;
+  padding: 20px;
+}
+
+.line-number {
+  display: inline-block;
+  width: 30px;
+  text-align: right;
+  margin-right: 10px;
+  color: #888;
+}
+
+.text-symbol {
+  position: relative;
+  display: inline-block;
+}
+
+.hovercard {
+  display: none;
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background-color: white;
+  border: 1px solid #ccc;
+  padding: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+
+.text-symbol:hover .hovercard {
+  display: block;
+}
diff --git a/fixtures/owner-stacks/src/App.js b/fixtures/owner-stacks/src/App.js
new file mode 100644
index 00000000000..69d32f00e6b
--- /dev/null
+++ b/fixtures/owner-stacks/src/App.js
@@ -0,0 +1,143 @@
+import {useState} from 'react';
+import {flushSync} from 'react-dom';
+import './App.css';
+
+const text = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  `;
+
+const loremIpsum = text + text;
+
+function TextSymbol({char, highlight}) {
+  const randomColor = highlight
+    ? `#${Math.floor(Math.random() * 16777215).toString(16)}`
+    : 'transparent';
+  return (
+    <span className="text-symbol" style={{backgroundColor: randomColor}}>
+      {char}
+      <div className="hovercard">
+        <p>Character: {char}</p>
+        <p>Color: {randomColor}</p>
+      </div>
+    </span>
+  );
+}
+
+function TextLine({sentence, highlight, lineNumber}) {
+  const randomColor = highlight
+    ? `#${Math.floor(Math.random() * 16777215).toString(16)}`
+    : 'transparent';
+  return (
+    <div style={{backgroundColor: randomColor}}>
+      <span className="line-number">{lineNumber}</span>
+      {sentence.split('').map((char, index) => (
+        <TextSymbol key={index} char={char} highlight={highlight} />
+      ))}
+    </div>
+  );
+}
+
+function App() {
+  const [highlight, setHighlight] = useState(false);
+
+  const toggleHighlight = () => {
+    console.time('toggleHighlight');
+    flushSync(() => {
+      setHighlight(!highlight);
+    });
+    console.timeEnd('toggleHighlight');
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">Owner Stacks Stress Test</header>
+      <div className="page">
+        <div className={`content ${highlight ? 'highlight' : ''}`}>
+          {loremIpsum
+            .trim()
+            .split('\n')
+            .map((sentence, index) => (
+              <TextLine
+                key={index}
+                sentence={sentence.trim()}
+                highlight={highlight}
+                lineNumber={index + 1}
+              />
+            ))}
+        </div>
+        <div className="sidebar">
+          <button onClick={toggleHighlight}>
+            {highlight ? 'Remove Highlight' : 'Highlight Content'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/fixtures/owner-stacks/src/index.css b/fixtures/owner-stacks/src/index.css
new file mode 100644
index 00000000000..ec2585e8c0b
--- /dev/null
+++ b/fixtures/owner-stacks/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/fixtures/owner-stacks/src/index.js b/fixtures/owner-stacks/src/index.js
new file mode 100644
index 00000000000..d563c0fb10b
--- /dev/null
+++ b/fixtures/owner-stacks/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/fixtures/owner-stacks/src/logo.svg b/fixtures/owner-stacks/src/logo.svg
new file mode 100644
index 00000000000..9dfc1c058ce
--- /dev/null
+++ b/fixtures/owner-stacks/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/fixtures/owner-stacks/src/reportWebVitals.js b/fixtures/owner-stacks/src/reportWebVitals.js
new file mode 100644
index 00000000000..b0320f330b5
--- /dev/null
+++ b/fixtures/owner-stacks/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/fixtures/owner-stacks/yarn.lock b/fixtures/owner-stacks/yarn.lock
new file mode 100644
index 00000000000..84e18efe838
--- /dev/null
+++ b/fixtures/owner-stacks/yarn.lock
@@ -0,0 +1,9688 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@apideck/better-ajv-errors@^0.3.1":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
+  integrity sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==
+  dependencies:
+    json-schema "^0.4.0"
+    jsonpointer "^5.0.0"
+    leven "^3.1.0"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.2", "@babel/code-frame@^7.8.3":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.5.tgz#df93ac37f4417854130e21d72c66ff3d4b897fc7"
+  integrity sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==
+
+"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.7.tgz#0439347a183b97534d52811144d763a17f9d2b24"
+  integrity sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.7"
+    "@babel/parser" "^7.26.7"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.26.7"
+    "@babel/types" "^7.26.7"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/eslint-parser@^7.16.3":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.26.5.tgz#aa669f4d873f9cd617050cf3c40c19cd96307efb"
+  integrity sha512-Kkm8C8uxI842AwQADxl0GbcG1rupELYLShazYEZO/2DYjhyWXJIOUVOE3tBYm6JXzUCNJOZEzqc4rCW/jsEQYQ==
+  dependencies:
+    "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1"
+    eslint-visitor-keys "^2.1.0"
+    semver "^6.3.1"
+
+"@babel/generator@^7.26.5", "@babel/generator@^7.7.2":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.5.tgz#e44d4ab3176bbcaf78a5725da5f1dc28802a9458"
+  integrity sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==
+  dependencies:
+    "@babel/parser" "^7.26.5"
+    "@babel/types" "^7.26.5"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9", "@babel/helper-compilation-targets@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+  integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
+  dependencies:
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
+  integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+  integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    regexpu-core "^6.2.0"
+    semver "^6.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.6.2", "@babel/helper-define-polyfill-provider@^0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21"
+  integrity sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
+
+"@babel/helper-remap-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
+  integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-wrap-function" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-replace-supers@^7.25.9":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0", "@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helper-wrap-function@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
+  integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helpers@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.7.tgz#fd1d2a7c431b6e39290277aacfd8367857c576a4"
+  integrity sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.7"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.25.9", "@babel/parser@^7.26.5", "@babel/parser@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.7.tgz#e114cd099e5f7d17b05368678da0fb9f69b3385c"
+  integrity sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==
+  dependencies:
+    "@babel/types" "^7.26.7"
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
+  integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
+  integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
+  integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
+  integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
+  integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-proposal-class-properties@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-decorators@^7.16.4":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.25.9.tgz#8680707f943d1a3da2cd66b948179920f097e254"
+  integrity sha512-smkNLL/O1ezy9Nhy4CNosc4Va+1wo5w4gzSZeLe6y6dM4mmHfYOCPolXQPHQxonZCF+ZyebxN9vqOolkYrSn5g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-decorators" "^7.25.9"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-optional-chaining@^7.16.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-decorators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.25.9.tgz#986b4ca8b7b5df3f67cee889cedeffc2e2bf14b3"
+  integrity sha512-ryzI0McXUPJnRCvMo4lumIKZUzhYUO/ScI+Mz4YVaTLt04DHNSjEUjKVvbzQjZFLuod/cYEc07mJWhzl6v4DPg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-flow@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz#96507595c21b45fccfc2bc758d5c45452e6164fa"
+  integrity sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-assertions@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
+  integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-attributes@^7.24.7", "@babel/plugin-syntax-import-attributes@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
+  integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-meta@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.25.9", "@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
+  integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-async-generator-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz#1b18530b077d18a407c494eb3d1d72da505283a2"
+  integrity sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
+  integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+
+"@babel/plugin-transform-block-scoped-functions@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz#3dc4405d31ad1cbe45293aa57205a6e3b009d53e"
+  integrity sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-block-scoping@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
+  integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
+  integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-static-block@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
+  integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-classes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
+  integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
+  integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/template" "^7.25.9"
+
+"@babel/plugin-transform-destructuring@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
+  integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dotall-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
+  integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-keys@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
+  integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
+  integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dynamic-import@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
+  integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-exponentiation-operator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+  integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-export-namespace-from@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
+  integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-flow-strip-types@^7.16.0":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.26.5.tgz#2904c85a814e7abb1f4850b8baf4f07d0a2389d4"
+  integrity sha512-eGK26RsbIkYUns3Y8qKl362juDDYK+wEdPGHGrhzUl6CewZFo55VZ7hg+CyMFU4dd5QQakBN86nBMpRsFpRvbQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/plugin-syntax-flow" "^7.26.0"
+
+"@babel/plugin-transform-for-of@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
+  integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-function-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
+  integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-json-strings@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
+  integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
+  integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-logical-assignment-operators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
+  integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-member-expression-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
+  integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-amd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
+  integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-commonjs@^7.25.9", "@babel/plugin-transform-modules-commonjs@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-systemjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
+  integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-modules-umd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
+  integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
+  integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-new-target@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
+  integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-nullish-coalescing-operator@^7.26.6":
+  version "7.26.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz#fbf6b3c92cb509e7b319ee46e3da89c5bedd31fe"
+  integrity sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-numeric-separator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
+  integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-object-rest-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
+  integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+
+"@babel/plugin-transform-object-super@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
+  integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+
+"@babel/plugin-transform-optional-catch-binding@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
+  integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
+  integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-parameters@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
+  integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-methods@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
+  integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-property-in-object@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
+  integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-property-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
+  integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-constant-elements@^7.12.1":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.9.tgz#08a1de35a301929b60fdf2788a54b46cd8ecd0ef"
+  integrity sha512-Ncw2JFsJVuvfRsa2lSHiC55kETQVLSnsYGQ1JDDwkUeWGTL/8Tom8aLTnlqgoeuopWrbbGndrc9AlLYrIosrow==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz#4b79746b59efa1f38c8695065a92a9f5afb24f7d"
+  integrity sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx-development@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz#8fd220a77dd139c07e25225a903b8be8c829e0d7"
+  integrity sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz#06367940d8325b36edff5e2b9cbe782947ca4166"
+  integrity sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/plugin-transform-react-pure-annotations@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz#ea1c11b2f9dbb8e2d97025f43a3b5bc47e18ae62"
+  integrity sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-regenerator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
+  integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-regexp-modifiers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
+  integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-reserved-words@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
+  integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-runtime@^7.16.4":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz#62723ea3f5b31ffbe676da9d6dae17138ae580ea"
+  integrity sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    semver "^6.3.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
+  integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
+  integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-sticky-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
+  integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-template-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1"
+  integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-typeof-symbol@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.26.7.tgz#d0e33acd9223744c1e857dbd6fa17bd0a3786937"
+  integrity sha512-jfoTXXZTgGg36BmhqT3cAYK5qkmqvJpvNrPhaK/52Vgjhw4Rq29s9UqpWWV0D6yuRmgiFH/BUVlkl96zJWqnaw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-typescript@^7.25.9":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.7.tgz#64339515ea3eff610160f62499c3ef437d0ac83d"
+  integrity sha512-5cJurntg+AT+cgelGP9Bt788DKiAw9gIMSMU2NJrLAilnj0m8WZWUNZPSLOmadYsujHutpgElO+50foX+ib/Wg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-syntax-typescript" "^7.25.9"
+
+"@babel/plugin-transform-unicode-escapes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
+  integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-property-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
+  integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
+  integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
+  integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.16.4":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.7.tgz#24d38e211f4570b8d806337035cc3ae798e0c36d"
+  integrity sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==
+  dependencies:
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.9"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.9"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.9"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions" "^7.26.0"
+    "@babel/plugin-syntax-import-attributes" "^7.26.0"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.25.9"
+    "@babel/plugin-transform-async-to-generator" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.26.5"
+    "@babel/plugin-transform-block-scoping" "^7.25.9"
+    "@babel/plugin-transform-class-properties" "^7.25.9"
+    "@babel/plugin-transform-class-static-block" "^7.26.0"
+    "@babel/plugin-transform-classes" "^7.25.9"
+    "@babel/plugin-transform-computed-properties" "^7.25.9"
+    "@babel/plugin-transform-destructuring" "^7.25.9"
+    "@babel/plugin-transform-dotall-regex" "^7.25.9"
+    "@babel/plugin-transform-duplicate-keys" "^7.25.9"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-dynamic-import" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
+    "@babel/plugin-transform-export-namespace-from" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.25.9"
+    "@babel/plugin-transform-function-name" "^7.25.9"
+    "@babel/plugin-transform-json-strings" "^7.25.9"
+    "@babel/plugin-transform-literals" "^7.25.9"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.25.9"
+    "@babel/plugin-transform-modules-amd" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.9"
+    "@babel/plugin-transform-modules-umd" "^7.25.9"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-new-target" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.26.6"
+    "@babel/plugin-transform-numeric-separator" "^7.25.9"
+    "@babel/plugin-transform-object-rest-spread" "^7.25.9"
+    "@babel/plugin-transform-object-super" "^7.25.9"
+    "@babel/plugin-transform-optional-catch-binding" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+    "@babel/plugin-transform-private-methods" "^7.25.9"
+    "@babel/plugin-transform-private-property-in-object" "^7.25.9"
+    "@babel/plugin-transform-property-literals" "^7.25.9"
+    "@babel/plugin-transform-regenerator" "^7.25.9"
+    "@babel/plugin-transform-regexp-modifiers" "^7.26.0"
+    "@babel/plugin-transform-reserved-words" "^7.25.9"
+    "@babel/plugin-transform-shorthand-properties" "^7.25.9"
+    "@babel/plugin-transform-spread" "^7.25.9"
+    "@babel/plugin-transform-sticky-regex" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.25.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.26.7"
+    "@babel/plugin-transform-unicode-escapes" "^7.25.9"
+    "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.38.1"
+    semver "^6.3.1"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.12.5", "@babel/preset-react@^7.16.0":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.26.3.tgz#7c5e028d623b4683c1f83a0bd4713b9100560caa"
+  integrity sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-transform-react-display-name" "^7.25.9"
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+    "@babel/plugin-transform-react-jsx-development" "^7.25.9"
+    "@babel/plugin-transform-react-pure-annotations" "^7.25.9"
+
+"@babel/preset-typescript@^7.16.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
+  integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-typescript" "^7.25.9"
+
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.25.9", "@babel/template@^7.3.3":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.7", "@babel/traverse@^7.7.2":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.7.tgz#99a0a136f6a75e7fb8b0a1ace421e0b25994b8bb"
+  integrity sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/parser" "^7.26.7"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.7"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.5", "@babel/types@^7.26.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.7.tgz#5e2b89c0768e874d4d061961f3a5a153d71dc17a"
+  integrity sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@csstools/normalize.css@*":
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.1.1.tgz#f0ad221b7280f3fc814689786fd9ee092776ef8f"
+  integrity sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ==
+
+"@csstools/postcss-cascade-layers@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz#8a997edf97d34071dd2e37ea6022447dd9e795ad"
+  integrity sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-color-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
+  integrity sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-font-format-keywords@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz#677b34e9e88ae997a67283311657973150e8b16a"
+  integrity sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-hwb-function@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b"
+  integrity sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-ic-unit@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz#28237d812a124d1a16a5acc5c3832b040b303e58"
+  integrity sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-is-pseudo-class@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz#846ae6c0d5a1eaa878fce352c544f9c295509cd1"
+  integrity sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-nested-calc@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz#d7e9d1d0d3d15cf5ac891b16028af2a1044d0c26"
+  integrity sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-normalize-display-values@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz#15da54a36e867b3ac5163ee12c1d7f82d4d612c3"
+  integrity sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-oklab-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz#88cee0fbc8d6df27079ebd2fa016ee261eecf844"
+  integrity sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-progressive-custom-properties@^1.1.0", "@csstools/postcss-progressive-custom-properties@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz#542292558384361776b45c85226b9a3a34f276fa"
+  integrity sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-stepped-value-functions@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz#f8772c3681cc2befed695e2b0b1d68e22f08c4f4"
+  integrity sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-text-decoration-shorthand@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz#ea96cfbc87d921eca914d3ad29340d9bcc4c953f"
+  integrity sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-trigonometric-functions@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz#94d3e4774c36d35dcdc88ce091336cb770d32756"
+  integrity sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-unset-value@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz#c99bb70e2cdc7312948d1eb41df2412330b81f77"
+  integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
+
+"@csstools/selector-specificity@^2.0.0", "@csstools/selector-specificity@^2.0.2":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
+  integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
+
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
+
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.5.1.tgz#260fe7239602fe5130a94f1aa386eff54b014bba"
+  integrity sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+
+"@jest/console@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.3.tgz#2030606ec03a18c31803b8a36382762e447655df"
+  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+
+"@jest/core@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
+  integrity sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/reporters" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^27.5.1"
+    jest-config "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-resolve-dependencies "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    jest-watcher "^27.5.1"
+    micromatch "^4.0.4"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74"
+  integrity sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==
+  dependencies:
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+
+"@jest/fake-timers@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.5.1.tgz#76979745ce0579c8a94a4678af7a748eda8ada74"
+  integrity sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@sinonjs/fake-timers" "^8.0.1"
+    "@types/node" "*"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
+"@jest/globals@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.5.1.tgz#7ac06ce57ab966566c7963431cef458434601b2b"
+  integrity sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    expect "^27.5.1"
+
+"@jest/reporters@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.5.1.tgz#ceda7be96170b03c923c37987b64015812ffec04"
+  integrity sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-haste-map "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/source-map@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
+  integrity sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+    source-map "^0.6.0"
+
+"@jest/test-result@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.5.1.tgz#56a6585fa80f7cdab72b8c5fc2e871d03832f5bb"
+  integrity sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.3.tgz#5eae945fd9f4b8fcfce74d239e6f725b6bf076c5"
+  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
+  integrity sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-runtime "^27.5.1"
+
+"@jest/transform@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409"
+  integrity sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^27.5.1"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-util "^27.5.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
+  integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@leichtgewicht/ip-codec@^2.0.1":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
+  integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
+
+"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
+  version "5.1.1-v1"
+  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
+  integrity sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==
+  dependencies:
+    eslint-scope "5.1.1"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz#f126be97c30b83ed777e2aeabd518bc592e6e7c4"
+  integrity sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ==
+  dependencies:
+    ansi-html "^0.0.9"
+    core-js-pure "^3.23.3"
+    error-stack-parser "^2.0.6"
+    html-entities "^2.1.0"
+    loader-utils "^2.0.4"
+    schema-utils "^4.2.0"
+    source-map "^0.7.3"
+
+"@rollup/plugin-babel@^5.2.0":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
+  integrity sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@rollup/pluginutils" "^3.1.0"
+
+"@rollup/plugin-node-resolve@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
+  integrity sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
+"@rollup/plugin-replace@^2.4.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
+  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
+"@rollup/pluginutils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@rushstack/eslint-patch@^1.1.0":
+  version "1.10.5"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.5.tgz#3a1c12c959010a55c17d46b395ed3047b545c246"
+  integrity sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==
+
+"@sinclair/typebox@^0.24.1":
+  version "0.24.51"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
+  integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
+
+"@sinonjs/commons@^1.7.0":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.6.tgz#80c516a4dc264c2a69115e7578d62581ff455ed9"
+  integrity sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^8.0.1":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7"
+  integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@surma/rollup-plugin-off-main-thread@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
+  integrity sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==
+  dependencies:
+    ejs "^3.1.6"
+    json5 "^2.2.0"
+    magic-string "^0.25.0"
+    string.prototype.matchall "^4.0.6"
+
+"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
+  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
+  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
+  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
+  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+
+"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
+  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+
+"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
+  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+
+"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+
+"@svgr/babel-plugin-transform-svg-component@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
+  integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
+
+"@svgr/babel-preset@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
+  integrity sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
+
+"@svgr/core@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
+  integrity sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
+  dependencies:
+    "@svgr/plugin-jsx" "^5.5.0"
+    camelcase "^6.2.0"
+    cosmiconfig "^7.0.0"
+
+"@svgr/hast-util-to-babel-ast@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
+  integrity sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==
+  dependencies:
+    "@babel/types" "^7.12.6"
+
+"@svgr/plugin-jsx@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
+  integrity sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@svgr/babel-preset" "^5.5.0"
+    "@svgr/hast-util-to-babel-ast" "^5.5.0"
+    svg-parser "^2.0.2"
+
+"@svgr/plugin-svgo@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
+  integrity sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    deepmerge "^4.2.2"
+    svgo "^1.2.2"
+
+"@svgr/webpack@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.5.0.tgz#aae858ee579f5fa8ce6c3166ef56c6a1b381b640"
+  integrity sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/plugin-transform-react-constant-elements" "^7.12.1"
+    "@babel/preset-env" "^7.12.1"
+    "@babel/preset-react" "^7.12.5"
+    "@svgr/core" "^5.5.0"
+    "@svgr/plugin-jsx" "^5.5.0"
+    "@svgr/plugin-svgo" "^5.5.0"
+    loader-utils "^2.0.0"
+
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.8"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
+  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
+  integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
+  integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
+"@types/body-parser@*":
+  version "1.19.5"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.5.tgz#04ce9a3b677dc8bd681a17da1ab9835dc9d3ede4"
+  integrity sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/bonjour@^3.5.9":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.13.tgz#adf90ce1a105e81dd1f9c61fdc5afda1bfb92956"
+  integrity sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/connect-history-api-fallback@^1.3.5":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz#7de71645a103056b48ac3ce07b3520b819c1d5b3"
+  integrity sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/node" "*"
+
+"@types/connect@*":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.38.tgz#5ba7f3bc4fbbdeaff8dded952e5ff2cc53f8d858"
+  integrity sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==
+  dependencies:
+    "@types/node" "*"
+
+"@types/eslint-scope@^3.7.7":
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
+  integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
+
+"@types/eslint@*":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/eslint@^7.29.0 || ^8.4.1":
+  version "8.56.12"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.12.tgz#1657c814ffeba4d2f84c0d4ba0f44ca7ea1ca53a"
+  integrity sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/estree@*", "@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^5.0.0":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz#41fec4ea20e9c7b22f024ab88a95c6bb288f51b8"
+  integrity sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
+
+"@types/express-serve-static-core@^4.17.33":
+  version "4.19.6"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267"
+  integrity sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
+
+"@types/express@*":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-5.0.0.tgz#13a7d1f75295e90d19ed6e74cab3678488eaa96c"
+  integrity sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^5.0.0"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/express@^4.17.13":
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.21.tgz#c26d4a151e60efe0084b23dc3369ebc631ed192d"
+  integrity sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^4.17.33"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/graceful-fs@^4.1.2":
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz#2a06bc0f68a20ab37b3e36aa238be6abdf49e8b4"
+  integrity sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/html-minifier-terser@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
+  integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
+
+"@types/http-errors@*":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
+  integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
+
+"@types/http-proxy@^1.17.8":
+  version "1.17.15"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.15.tgz#12118141ce9775a6499ecb4c01d02f90fc839d36"
+  integrity sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
+  integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz#53047614ae72e19fc0401d872de3ae2b4ce350bf"
+  integrity sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz#0f03e3d2f670fbdac586e34b433783070cc16f54"
+  integrity sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/mime@^1":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.5.tgz#1ef302e01cf7d2b5a0fa526790c9123bf1d06690"
+  integrity sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==
+
+"@types/node-forge@^1.3.0":
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/@types/node-forge/-/node-forge-1.3.11.tgz#0972ea538ddb0f4d9c2fa0ec5db5724773a604da"
+  integrity sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/node@*":
+  version "22.13.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.13.1.tgz#a2a3fefbdeb7ba6b89f40371842162fac0934f33"
+  integrity sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==
+  dependencies:
+    undici-types "~6.20.0"
+
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
+"@types/prettier@^2.1.5":
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
+  integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
+
+"@types/q@^1.5.1":
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.8.tgz#95f6c6a08f2ad868ba230ead1d2d7f7be3db3837"
+  integrity sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==
+
+"@types/qs@*":
+  version "6.9.18"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.18.tgz#877292caa91f7c1b213032b34626505b746624c2"
+  integrity sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==
+
+"@types/range-parser@*":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
+  integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
+
+"@types/resolve@1.17.1":
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/retry@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+
+"@types/semver@^7.3.12":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
+"@types/send@*":
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.4.tgz#6619cd24e7270793702e4e6a4b958a9010cfc57a"
+  integrity sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==
+  dependencies:
+    "@types/mime" "^1"
+    "@types/node" "*"
+
+"@types/serve-index@^1.9.1":
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.4.tgz#e6ae13d5053cb06ed36392110b4f9a49ac4ec898"
+  integrity sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==
+  dependencies:
+    "@types/express" "*"
+
+"@types/serve-static@*", "@types/serve-static@^1.13.10":
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
+  integrity sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==
+  dependencies:
+    "@types/http-errors" "*"
+    "@types/node" "*"
+    "@types/send" "*"
+
+"@types/sockjs@^0.3.33":
+  version "0.3.36"
+  resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.36.tgz#ce322cf07bcc119d4cbf7f88954f3a3bd0f67535"
+  integrity sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==
+  dependencies:
+    "@types/node" "*"
+
+"@types/stack-utils@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
+  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+
+"@types/trusted-types@^2.0.2":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
+"@types/ws@^8.5.5":
+  version "8.5.14"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.14.tgz#93d44b268c9127d96026cf44353725dd9b6c3c21"
+  integrity sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/yargs-parser@*":
+  version "21.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
+  integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
+
+"@types/yargs@^16.0.0":
+  version "16.0.9"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.9.tgz#ba506215e45f7707e6cbcaf386981155b7ab956e"
+  integrity sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^17.0.8":
+  version "17.0.33"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.33.tgz#8c32303da83eec050a84b3c7ae7b9f922d13e32d"
+  integrity sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@typescript-eslint/eslint-plugin@^5.5.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
+  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
+  dependencies:
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/type-utils" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/experimental-utils@^5.0.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz#14559bf73383a308026b427a4a6129bae2146741"
+  integrity sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==
+  dependencies:
+    "@typescript-eslint/utils" "5.62.0"
+
+"@typescript-eslint/parser@^5.5.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
+  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
+"@typescript-eslint/type-utils@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
+  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.62.0", "@typescript-eslint/utils@^5.58.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
+  integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
+
+"@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
+  integrity sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.13.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+
+"@webassemblyjs/floating-point-hex-parser@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz#fcca1eeddb1cc4e7b6eed4fc7956d6813b21b9fb"
+  integrity sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==
+
+"@webassemblyjs/helper-api-error@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz#e0a16152248bc38daee76dd7e21f15c5ef3ab1e7"
+  integrity sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==
+
+"@webassemblyjs/helper-buffer@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz#822a9bc603166531f7d5df84e67b5bf99b72b96b"
+  integrity sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==
+
+"@webassemblyjs/helper-numbers@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz#dbd932548e7119f4b8a7877fd5a8d20e63490b2d"
+  integrity sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.13.2"
+    "@webassemblyjs/helper-api-error" "1.13.2"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz#e556108758f448aae84c850e593ce18a0eb31e0b"
+  integrity sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==
+
+"@webassemblyjs/helper-wasm-section@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz#9629dda9c4430eab54b591053d6dc6f3ba050348"
+  integrity sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+
+"@webassemblyjs/ieee754@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz#1c5eaace1d606ada2c7fd7045ea9356c59ee0dba"
+  integrity sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.13.2.tgz#57c5c3deb0105d02ce25fa3fd74f4ebc9fd0bbb0"
+  integrity sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.13.2.tgz#917a20e93f71ad5602966c2d685ae0c6c21f60f1"
+  integrity sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==
+
+"@webassemblyjs/wasm-edit@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz#ac6689f502219b59198ddec42dcd496b1004d597"
+  integrity sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/helper-wasm-section" "1.14.1"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+    "@webassemblyjs/wasm-opt" "1.14.1"
+    "@webassemblyjs/wasm-parser" "1.14.1"
+    "@webassemblyjs/wast-printer" "1.14.1"
+
+"@webassemblyjs/wasm-gen@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz#991e7f0c090cb0bb62bbac882076e3d219da9570"
+  integrity sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/ieee754" "1.13.2"
+    "@webassemblyjs/leb128" "1.13.2"
+    "@webassemblyjs/utf8" "1.13.2"
+
+"@webassemblyjs/wasm-opt@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz#e6f71ed7ccae46781c206017d3c14c50efa8106b"
+  integrity sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+    "@webassemblyjs/wasm-parser" "1.14.1"
+
+"@webassemblyjs/wasm-parser@1.14.1", "@webassemblyjs/wasm-parser@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz#b3e13f1893605ca78b52c68e54cf6a865f90b9fb"
+  integrity sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-api-error" "1.13.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/ieee754" "1.13.2"
+    "@webassemblyjs/leb128" "1.13.2"
+    "@webassemblyjs/utf8" "1.13.2"
+
+"@webassemblyjs/wast-printer@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz#3bb3e9638a8ae5fdaf9610e7a06b4d9f9aa6fe07"
+  integrity sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@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"
+  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==
+
+abab@^2.0.3, abab@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+accepts@~1.3.4, accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.14.0, acorn@^8.2.4, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
+address@^1.0.1, address@^1.1.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
+  integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
+
+adjust-sourcemap-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz#fc4a0fd080f7d10471f30a7320f25560ade28c99"
+  integrity sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==
+  dependencies:
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+ajv-formats@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
+  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
+  dependencies:
+    ajv "^8.0.0"
+
+ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv-keywords@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
+ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-html-community@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
+ansi-html@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.9.tgz#6512d02342ae2cc68131952644a129cb734cd3f0"
+  integrity sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@^3.0.3, anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
+array-includes@^3.1.6, array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
+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.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flatmap@^1.3.2, array.prototype.flatmap@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.reduce@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.7.tgz#6aadc2f995af29cb887eb866d981dc85ab6f7dc7"
+  integrity sha512-mzmiUCVwtiD4lgxYP8g7IYy8El8p2CSMePvIbTS7gchKir/L1fgJrk0yDKmAX6mnRQFKNADYIk8nNlTris5H1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-array-method-boxes-properly "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    is-string "^1.0.7"
+
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
+asap@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
+async-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-function/-/async-function-1.0.0.tgz#509c9fca60eaf85034c6829838188e4e4c8ffb2b"
+  integrity sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==
+
+async@^3.2.3:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
+  integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+autoprefixer@^10.4.13:
+  version "10.4.20"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
+  dependencies:
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.1"
+    postcss-value-parser "^4.2.0"
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axe-core@^4.10.0:
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
+
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
+
+babel-jest@^27.4.2, babel-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444"
+  integrity sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==
+  dependencies:
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-loader@^8.2.3:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.4.1.tgz#6ccb75c66e62c3b144e1c5f2eaec5b8f6c08c675"
+  integrity sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.4"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e"
+  integrity sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
+babel-plugin-named-asset-import@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz#6b7fa43c59229685368683c28bc9734f24524cc2"
+  integrity sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==
+
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9"
+  integrity sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==
+  dependencies:
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    semver "^6.3.1"
+
+babel-plugin-polyfill-corejs3@^0.10.6:
+  version "0.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7"
+  integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.2"
+    core-js-compat "^3.38.0"
+
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz#abeb1f3f1c762eace37587f42548b08b57789bc8"
+  integrity sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+
+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"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz#9a929eafece419612ef4ae4f60b1862ebad8ef30"
+  integrity sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-import-attributes" "^7.24.7"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+
+babel-preset-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81"
+  integrity sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==
+  dependencies:
+    babel-plugin-jest-hoist "^27.5.1"
+    babel-preset-current-node-syntax "^1.0.0"
+
+babel-preset-react-app@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz#ed6005a20a24f2c88521809fa9aea99903751584"
+  integrity sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@babel/plugin-proposal-class-properties" "^7.16.0"
+    "@babel/plugin-proposal-decorators" "^7.16.4"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.0"
+    "@babel/plugin-proposal-numeric-separator" "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.0"
+    "@babel/plugin-proposal-private-methods" "^7.16.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.16.0"
+    "@babel/plugin-transform-react-display-name" "^7.16.0"
+    "@babel/plugin-transform-runtime" "^7.16.4"
+    "@babel/preset-env" "^7.16.4"
+    "@babel/preset-react" "^7.16.0"
+    "@babel/preset-typescript" "^7.16.0"
+    "@babel/runtime" "^7.16.3"
+    babel-plugin-macros "^3.1.0"
+    babel-plugin-transform-react-remove-prop-types "^0.4.24"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
+
+bfj@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.1.0.tgz#c5177d522103f9040e1b12980fe8c38cf41d3f8b"
+  integrity sha512-I6MMLkn+anzNdCUp9hMRyui1HaNEUCco50lxbvNS4+EyXg8lN3nJ48PjPWtbH8UVS9CuMoaKE9U2V3l29DaRQw==
+  dependencies:
+    bluebird "^3.7.2"
+    check-types "^11.2.3"
+    hoopy "^0.1.4"
+    jsonpath "^1.1.1"
+    tryer "^1.0.1"
+
+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@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+bonjour-service@^1.0.11:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.3.0.tgz#80d867430b5a0da64e82a8047fc1e355bdb71722"
+  integrity sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    multicast-dns "^7.2.5"
+
+boolbase@^1.0.0, boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
+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"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
+browserslist@^4.0.0, browserslist@^4.18.1, browserslist@^4.21.4, browserslist@^4.23.3, browserslist@^4.24.0, browserslist@^4.24.3:
+  version "4.24.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
+  integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
+  dependencies:
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+builtin-modules@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
+  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.7, call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
+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==
+
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+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@^6.2.0, camelcase@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
+  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.30001646, caniuse-lite@^1.0.30001688:
+  version "1.0.30001697"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001697.tgz#040bbbb54463c4b4b3377c716b34a322d16e6fc7"
+  integrity sha512-GwNPlWJin8E+d7Gxq96jxM6w0w+VFeyyXRsjU58emtkYqnbwHqXm5uT2uCmO0RQE9htWknOP4xtBlLmM/gWxvQ==
+
+case-sensitive-paths-webpack-plugin@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
+  integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
+
+chalk@^2.4.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"
+
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
+char-regex@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.2.tgz#81385bb071af4df774bff8721d0ca15ef29ea0bb"
+  integrity sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg==
+
+check-types@^11.2.3:
+  version "11.2.3"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.3.tgz#1ffdf68faae4e941fce252840b1787b8edc93b71"
+  integrity sha512-+67P1GkJRaxQD6PKK0Et9DhwQB+vGg3PM5+aavopCpZT1lj9jeqfvpgTLAWErNj8qApkkmXlu/Ug74kmhagkXg==
+
+chokidar@^3.4.2, chokidar@^3.5.3, chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
+ci-info@^3.2.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+
+cjs-module-lexer@^1.0.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz#0f79731eb8cfe1ec72acd4066efac9d61991b00d"
+  integrity sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==
+
+clean-css@^5.2.2:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
+  integrity sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==
+  dependencies:
+    source-map "~0.6.0"
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
+  integrity sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colord@^2.9.1:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
+colorette@^2.0.10:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+combined-stream@^1.0.8:
+  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.20.0:
+  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==
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
+common-tags@^1.8.0:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+
+compressible@~2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.7.4:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.5.tgz#fdd256c0a642e39e314c478f6c2cd654edd74c93"
+  integrity sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==
+  dependencies:
+    bytes "3.1.2"
+    compressible "~2.0.18"
+    debug "2.6.9"
+    negotiator "~0.6.4"
+    on-headers "~1.0.2"
+    safe-buffer "5.2.1"
+    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 sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+confusing-browser-globals@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
+
+connect-history-api-fallback@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
+  integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4, content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
+
+core-js-compat@^3.38.0, core-js-compat@^3.38.1:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.40.0.tgz#7485912a5a4a4315c2fdb2cbdc623e6881c88b38"
+  integrity sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==
+  dependencies:
+    browserslist "^4.24.3"
+
+core-js-pure@^3.23.3:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.40.0.tgz#d9a019e9160f9b042eeb6abb92242680089d486e"
+  integrity sha512-AtDzVIgRrmRKQai62yuSIN5vNiQjcJakJb4fbhVw3ehxx7Lohphvw9SGNWKhLFqSxC4ilD0g/L1huAYFQU3Q6A==
+
+core-js@^3.19.2:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.40.0.tgz#2773f6b06877d8eda102fc42f828176437062476"
+  integrity sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+crypto-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+css-blank-pseudo@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz#36523b01c12a25d812df343a32c322d2a2324561"
+  integrity sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-declaration-sorter@^6.3.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz#28beac7c20bad7f1775be3a7129d7eae409a3a71"
+  integrity sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==
+
+css-has-pseudo@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz#57f6be91ca242d5c9020ee3e51bbb5b89fc7af73"
+  integrity sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-loader@^6.5.1:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
+  integrity sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.33"
+    postcss-modules-extract-imports "^3.1.0"
+    postcss-modules-local-by-default "^4.0.5"
+    postcss-modules-scope "^3.2.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.5.4"
+
+css-minimizer-webpack-plugin@^3.2.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
+  integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==
+  dependencies:
+    cssnano "^5.0.6"
+    jest-worker "^27.0.2"
+    postcss "^8.3.5"
+    schema-utils "^4.0.0"
+    serialize-javascript "^6.0.0"
+    source-map "^0.6.1"
+
+css-prefers-color-scheme@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz#ca8a22e5992c10a5b9d315155e7caee625903349"
+  integrity sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==
+
+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"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
+
+css-select@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-select@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+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"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
+  dependencies:
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
+
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssdb@^7.1.0:
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.11.2.tgz#127a2f5b946ee653361a5af5333ea85a39df5ae5"
+  integrity sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+cssnano-preset-default@^5.2.14:
+  version "5.2.14"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz#309def4f7b7e16d71ab2438052093330d9ab45d8"
+  integrity sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==
+  dependencies:
+    css-declaration-sorter "^6.3.1"
+    cssnano-utils "^3.1.0"
+    postcss-calc "^8.2.3"
+    postcss-colormin "^5.3.1"
+    postcss-convert-values "^5.1.3"
+    postcss-discard-comments "^5.1.2"
+    postcss-discard-duplicates "^5.1.0"
+    postcss-discard-empty "^5.1.1"
+    postcss-discard-overridden "^5.1.0"
+    postcss-merge-longhand "^5.1.7"
+    postcss-merge-rules "^5.1.4"
+    postcss-minify-font-values "^5.1.0"
+    postcss-minify-gradients "^5.1.1"
+    postcss-minify-params "^5.1.4"
+    postcss-minify-selectors "^5.2.1"
+    postcss-normalize-charset "^5.1.0"
+    postcss-normalize-display-values "^5.1.0"
+    postcss-normalize-positions "^5.1.1"
+    postcss-normalize-repeat-style "^5.1.1"
+    postcss-normalize-string "^5.1.0"
+    postcss-normalize-timing-functions "^5.1.0"
+    postcss-normalize-unicode "^5.1.1"
+    postcss-normalize-url "^5.1.0"
+    postcss-normalize-whitespace "^5.1.1"
+    postcss-ordered-values "^5.1.3"
+    postcss-reduce-initial "^5.1.2"
+    postcss-reduce-transforms "^5.1.0"
+    postcss-svgo "^5.1.0"
+    postcss-unique-selectors "^5.1.1"
+
+cssnano-utils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
+  integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
+
+cssnano@^5.0.6:
+  version "5.1.15"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.15.tgz#ded66b5480d5127fcb44dac12ea5a983755136bf"
+  integrity sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==
+  dependencies:
+    cssnano-preset-default "^5.2.14"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
+
+csso@^4.0.2, csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+debug@2.6.9, debug@^2.6.0:
+  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@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decimal.js@^10.2.1:
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.5.0.tgz#0f371c7cf6c4898ce0afb09836db73cd82010f22"
+  integrity sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+
+deep-is@^0.1.3, deep-is@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+default-gateway@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
+  integrity sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==
+  dependencies:
+    execa "^5.0.0"
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.3, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
+detect-node@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
+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"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+diff-sequences@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
+  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+dns-packet@^5.2.2:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
+  integrity sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==
+  dependencies:
+    "@leichtgewicht/ip-codec" "^2.0.1"
+
+doctrine@^2.1.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-converter@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@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, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^1.7.0:
+  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"
+
+domutils@^2.5.2, domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+ejs@^3.1.6:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
+  dependencies:
+    jake "^10.8.5"
+
+electron-to-chromium@^1.5.73:
+  version "1.5.92"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.92.tgz#81e8ebe06f8e2a49fdba84bd10e9ad5b63efffe0"
+  integrity sha512-BeHgmNobs05N1HMmMZ7YIuHfYBGlq/UmvlsTgg+fsbFs9xVMj+xJHFg19GN04+9Q+r8Xnh9LXqaYIyEWElnNgQ==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
+emittery@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
+  integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
+
+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==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+enhanced-resolve@^5.17.1:
+  version "5.18.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz#728ab082f8b7b6836de51f1637aab5d3b9568faf"
+  integrity sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+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.6:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
+es-abstract@^1.17.2, es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9:
+  version "1.23.9"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.9.tgz#5b45994b7de78dada5c1bebf1379646b32b9d606"
+  integrity sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.0"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-regex "^1.2.1"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.0"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.3"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.18"
+
+es-array-method-boxes-properly@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
+  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-iterator-helpers@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz#d1dd0f58129054c0ad922e6a9a1e65eef435fe75"
+  integrity sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.6"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    iterator.prototype "^1.1.4"
+    safe-array-concat "^1.1.3"
+
+es-module-lexer@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.6.0.tgz#da49f587fd9e68ee2404fe4e256c0c7d3a81be21"
+  integrity sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==
+
+es-object-atoms@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3, es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
+escalade@^3.1.1, escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+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 sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+escodegen@^1.8.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+escodegen@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-config-react-app@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4"
+  integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@babel/eslint-parser" "^7.16.3"
+    "@rushstack/eslint-patch" "^1.1.0"
+    "@typescript-eslint/eslint-plugin" "^5.5.0"
+    "@typescript-eslint/parser" "^5.5.0"
+    babel-preset-react-app "^10.0.1"
+    confusing-browser-globals "^1.0.11"
+    eslint-plugin-flowtype "^8.0.3"
+    eslint-plugin-import "^2.25.3"
+    eslint-plugin-jest "^25.3.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.27.1"
+    eslint-plugin-react-hooks "^4.3.0"
+    eslint-plugin-testing-library "^5.0.1"
+
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-module-utils@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-flowtype@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz#e1557e37118f24734aa3122e7536a038d34a4912"
+  integrity sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==
+  dependencies:
+    lodash "^4.17.21"
+    string-natural-compare "^3.0.1"
+
+eslint-plugin-import@^2.25.3:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
+  dependencies:
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
+    tsconfig-paths "^3.15.0"
+
+eslint-plugin-jest@^25.3.0:
+  version "25.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz#ff4ac97520b53a96187bad9c9814e7d00de09a6a"
+  integrity sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^5.0.0"
+
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
+  dependencies:
+    aria-query "^5.3.2"
+    array-includes "^3.1.8"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    hasown "^2.0.2"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.1"
+
+eslint-plugin-react-hooks@^4.3.0:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
+  integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
+
+eslint-plugin-react@^7.27.1:
+  version "7.37.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz#1b6c80b6175b6ae4b26055ae4d55d04c414c7181"
+  integrity sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==
+  dependencies:
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.3"
+    array.prototype.tosorted "^1.1.4"
+    doctrine "^2.1.0"
+    es-iterator-helpers "^1.2.1"
+    estraverse "^5.3.0"
+    hasown "^2.0.2"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.8"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.1"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.12"
+    string.prototype.repeat "^1.0.0"
+
+eslint-plugin-testing-library@^5.0.1:
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz#5b46cdae96d4a78918711c0b4792f90088e62d20"
+  integrity sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==
+  dependencies:
+    "@typescript-eslint/utils" "^5.58.0"
+
+eslint-scope@5.1.1, eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-webpack-plugin@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz#1978cdb9edc461e4b0195a20da950cf57988347c"
+  integrity sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==
+  dependencies:
+    "@types/eslint" "^7.29.0 || ^8.4.1"
+    jest-worker "^28.0.2"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    schema-utils "^4.0.0"
+
+eslint@^8.3.0:
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esprima@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.2.2.tgz#76a0fd66fcfe154fd292667dc264019750b1657b"
+  integrity sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==
+
+esprima@^4.0.0, esprima@^4.0.1:
+  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.4.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
+expect@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.5.1.tgz#83ce59f1e5bdf5f9d2b94b61d2050db48f3fef74"
+  integrity sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+
+express@^4.17.3:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.3"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.7.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.3.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.3"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.12"
+    proxy-addr "~2.0.7"
+    qs "6.13.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.19.0"
+    serve-static "1.16.2"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.9, fast-glob@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.8"
+
+fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fast-uri@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.6.tgz#88f130b77cfaea2378d56bf970dea21257a68748"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
+
+fastq@^1.6.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.19.0.tgz#a82c6b7c2bb4e44766d865f07997785fecfdcb89"
+  integrity sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==
+  dependencies:
+    reusify "^1.0.4"
+
+faye-websocket@^0.11.3:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"
+  integrity sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==
+  dependencies:
+    bser "2.1.1"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+filelist@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+  integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+  dependencies:
+    minimatch "^5.0.1"
+
+filesize@^8.0.6:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
+  integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+find-cache-dir@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.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"
+
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
+
+flatted@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
+  integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
+
+follow-redirects@^1.0.0:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+for-each@^0.3.3:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.4.tgz#814517ffc303d1399b2564d8165318e735d0341c"
+  integrity sha512-kKaIINnFpzW6ffJNDjjyjrk21BkDx38c0xa/klsT8VzLCaMEefv4ZTacrcVR4DmgTeBra++jMDAfS/tS799YDw==
+  dependencies:
+    is-callable "^1.2.7"
+
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+fork-ts-checker-webpack-plugin@^6.5.0:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz#eda2eff6e22476a2688d10661688c47f611b37f3"
+  integrity sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@types/json-schema" "^7.0.5"
+    chalk "^4.1.0"
+    chokidar "^3.4.2"
+    cosmiconfig "^6.0.0"
+    deepmerge "^4.2.2"
+    fs-extra "^9.0.0"
+    glob "^7.1.6"
+    memfs "^3.1.2"
+    minimatch "^3.0.4"
+    schema-utils "2.7.0"
+    semver "^7.3.2"
+    tapable "^1.0.0"
+
+form-data@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.2.tgz#83ad9ced7c03feaad97e293d6f6091011e1659c8"
+  integrity sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+fs-extra@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-extra@^9.0.0, fs-extra@^9.0.1:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-monkey@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.6.tgz#8ead082953e88d992cf3ff844faa907b26756da2"
+  integrity sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.5:
+  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-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    get-proto "^1.0.0"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    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"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  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"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+globals@^11.1.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@^13.19.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+globby@^11.0.4, globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+gopd@^1.0.1, gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
+handle-thing@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
+
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
+has-bigints@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
+  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
+has-symbols@^1.0.1, has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.0, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+hoopy@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
+  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
+
+html-entities@^2.1.0, html-entities@^2.3.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
+  integrity sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-minifier-terser@^6.0.2:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
+  integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==
+  dependencies:
+    camel-case "^4.1.2"
+    clean-css "^5.2.2"
+    commander "^8.3.0"
+    he "^1.2.0"
+    param-case "^3.0.4"
+    relateurl "^0.2.7"
+    terser "^5.10.0"
+
+html-webpack-plugin@^5.5.0:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz#a31145f0fee4184d53a794f9513147df1e653685"
+  integrity sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==
+  dependencies:
+    "@types/html-minifier-terser" "^6.0.0"
+    html-minifier-terser "^6.0.2"
+    lodash "^4.17.21"
+    pretty-error "^4.0.0"
+    tapable "^2.0.0"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.5.1:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.9.tgz#b817b3ca0edea6236225000d795378707c169cec"
+  integrity sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==
+
+http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
+http-proxy-middleware@^2.0.3:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
+  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
+  dependencies:
+    "@types/http-proxy" "^1.17.8"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.1"
+    is-plain-obj "^3.0.0"
+    micromatch "^4.0.2"
+
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
+idb@^7.0.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
+  integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
+
+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"
+  integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
+  dependencies:
+    harmony-reflect "^1.4.6"
+
+ignore@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+immer@^9.0.7:
+  version "9.0.21"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
+  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+
+import-fresh@^3.1.0, import-fresh@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-local@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.2.0.tgz#c3d5c745798c02a6f8b897726aba5100186ee260"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, 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.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
+
+ini@^1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
+ipaddr.js@1.9.1:
+  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==
+
+ipaddr.js@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.2.0.tgz#d33fa7bac284f4de7af949638c9d68157c6b92e8"
+  integrity sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==
+
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-async-function@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.1.1.tgz#3e69018c8e04e73b738793d020bfe884b9fd3523"
+  integrity sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==
+  dependencies:
+    async-function "^1.0.0"
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.2.tgz#7067f47709809a393c71ff5bb3e135d8a9215d9e"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.13.0, is-core-module@^2.15.1, is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
+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-generator-function@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
+  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.0"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
+
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-obj@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
+  integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
+
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
+
+is-root@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
+  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
+
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.0.7, is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
+is-typedarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2, is-weakref@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.1.tgz#eea430182be8d64174bd96bffbc46f21bf3f9293"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-weakset@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
+  integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d"
+  integrity sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^4.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
+  integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+iterator.prototype@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.5.tgz#12c959a29de32de0aa3bbbb801f4d777066dae39"
+  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    get-proto "^1.0.0"
+    has-symbols "^1.1.0"
+    set-function-name "^2.0.2"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jake@^10.8.5:
+  version "10.9.2"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.9.2.tgz#6ae487e6a69afec3a5e167628996b59f35ae2b7f"
+  integrity sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.4"
+    minimatch "^3.1.2"
+
+jest-changed-files@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
+  integrity sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    execa "^5.0.0"
+    throat "^6.0.1"
+
+jest-circus@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.5.1.tgz#37a5a4459b7bf4406e53d637b49d22c65d125ecc"
+  integrity sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
+jest-cli@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.5.1.tgz#278794a6e6458ea8029547e6c6cbf673bd30b145"
+  integrity sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    prompts "^2.0.1"
+    yargs "^16.2.0"
+
+jest-config@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.5.1.tgz#5c387de33dca3f99ad6357ddeccd91bf3a0e4a41"
+  integrity sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==
+  dependencies:
+    "@babel/core" "^7.8.0"
+    "@jest/test-sequencer" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    babel-jest "^27.5.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.9"
+    jest-circus "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-jasmine2 "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
+  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-docblock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.5.1.tgz#14092f364a42c6108d42c33c8cf30e058e25f6c0"
+  integrity sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.5.1.tgz#5bc87016f45ed9507fed6e4702a5b468a5b2c44e"
+  integrity sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-environment-jsdom@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz#ea9ccd1fc610209655a77898f86b2b559516a546"
+  integrity sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+    jsdom "^16.6.0"
+
+jest-environment-node@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.5.1.tgz#dedc2cfe52fab6b8f5714b4808aefa85357a365e"
+  integrity sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
+jest-get-type@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
+  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
+
+jest-haste-map@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
+  integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^27.5.1"
+    jest-serializer "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-jasmine2@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz#a037b0034ef49a9f3d71c4375a796f3b230d1ac4"
+  integrity sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    throat "^6.0.1"
+
+jest-leak-detector@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz#6ec9d54c3579dd6e3e66d70e3498adf80fde3fb8"
+  integrity sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==
+  dependencies:
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-matcher-utils@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
+  integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-message-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
+  integrity sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.5.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-message-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.3.tgz#232def7f2e333f1eecc90649b5b94b0055e7c43d"
+  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.1.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
+  integrity sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
+
+jest-regex-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
+  integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
+
+jest-regex-util@^28.0.0:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
+jest-resolve-dependencies@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
+  integrity sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-snapshot "^27.5.1"
+
+jest-resolve@^27.4.2, jest-resolve@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.5.1.tgz#a2f1c5a0796ec18fe9eb1536ac3814c23617b384"
+  integrity sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-runner@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.5.1.tgz#071b27c1fa30d90540805c5645a0ec167c7b62e5"
+  integrity sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-leak-detector "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    source-map-support "^0.5.6"
+    throat "^6.0.1"
+
+jest-runtime@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.5.1.tgz#4896003d7a334f7e8e4a53ba93fb9bcd3db0a1af"
+  integrity sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/globals" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-serializer@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
+  integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.9"
+
+jest-snapshot@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.5.1.tgz#b668d50d23d38054a51b42c4039cab59ae6eb6a1"
+  integrity sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==
+  dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^27.5.1"
+    semver "^7.3.2"
+
+jest-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
+  integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
+  integrity sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    leven "^3.1.0"
+    pretty-format "^27.5.1"
+
+jest-watch-typeahead@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz#b4a6826dfb9c9420da2f7bc900de59dad11266a9"
+  integrity sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==
+  dependencies:
+    ansi-escapes "^4.3.1"
+    chalk "^4.0.0"
+    jest-regex-util "^28.0.0"
+    jest-watcher "^28.0.0"
+    slash "^4.0.0"
+    string-length "^5.0.1"
+    strip-ansi "^7.0.1"
+
+jest-watcher@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
+  integrity sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.5.1"
+    string-length "^4.0.1"
+
+jest-watcher@^28.0.0:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.3.tgz#c6023a59ba2255e3b4c57179fc94164b3e73abd4"
+  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.1.3"
+    string-length "^4.0.1"
+
+jest-worker@^26.2.1:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest-worker@^27.0.2, jest-worker@^27.4.5, jest-worker@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest-worker@^28.0.2:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.3.tgz#7e3c4ce3fa23d1bb6accb169e7f396f98ed4bb98"
+  integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^27.4.3:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
+  integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    import-local "^3.0.2"
+    jest-cli "^27.5.1"
+
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
+
+"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-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsdom@^16.6.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.2.4"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
+    xml-name-validator "^3.0.0"
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+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-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-schema@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
+
+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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonpath@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jsonpath/-/jsonpath-1.1.1.tgz#0ca1ed8fb65bb3309248cc9d5466d12d5b0b9901"
+  integrity sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==
+  dependencies:
+    esprima "1.2.2"
+    static-eval "2.0.2"
+    underscore "1.12.1"
+
+jsonpointer@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
+  integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+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==
+
+klona@^2.0.4, klona@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
+  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
+
+language-subtag-registry@^0.3.20:
+  version "0.3.23"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
+  integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
+launch-editor@^2.6.0:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.9.1.tgz#253f173bd441e342d4344b4dae58291abb425047"
+  integrity sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.8.1"
+
+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.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lilconfig@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+loader-utils@^2.0.0, loader-utils@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+loader-utils@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.3.1.tgz#735b9a19fd63648ca7adbd31c2327dfe281304e5"
+  integrity sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==
+
+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"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
+
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+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@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+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"
+
+magic-string@^0.25.0, magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+make-dir@^3.0.2, make-dir@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
+  integrity sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==
+  dependencies:
+    semver "^7.5.3"
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+memfs@^3.1.2, memfs@^3.4.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
+  integrity sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ==
+  dependencies:
+    fs-monkey "^1.0.4"
+
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+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==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
+
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+"mime-db@>= 1.43.0 < 2":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
+  integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
+
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.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==
+
+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==
+
+mini-css-extract-plugin@^2.4.5:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz#966031b468917a5446f4c24a80854b2947503c5b"
+  integrity sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==
+  dependencies:
+    schema-utils "^4.0.0"
+    tapable "^2.2.1"
+
+minimalistic-assert@^1.0.0:
+  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==
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mkdirp@~0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multicast-dns@^7.2.5:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
+  integrity sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==
+  dependencies:
+    dns-packet "^5.2.2"
+    thunky "^1.0.2"
+
+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"
+
+nanoid@^3.3.8:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
+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 sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+negotiator@~0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.4.tgz#777948e2452651c570b712dd01c23e262713fff7"
+  integrity sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==
+
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
+node-forge@^1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
+normalize-path@^3.0.0, 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-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+normalize-url@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+nth-check@^1.0.2:
+  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"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+nwsapi@^2.2.0:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.16.tgz#177760bba02c351df1d2644e220c31dfec8cdb43"
+  integrity sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.13.3:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.4, object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.getownpropertydescriptors@^2.1.0:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz#2f1fe0606ec1a7658154ccd4f728504f69667923"
+  integrity sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==
+  dependencies:
+    array.prototype.reduce "^1.0.6"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    gopd "^1.0.1"
+    safe-array-concat "^1.1.2"
+
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.values@^1.1.0, object.values@^1.1.6, object.values@^1.2.0, object.values@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+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==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  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:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^8.0.9, open@^8.4.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+optionator@^0.8.1:
+  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"
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
+p-limit@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.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-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-retry@^4.5.0:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
+  integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==
+  dependencies:
+    "@types/retry" "0.12.0"
+    retry "^0.13.1"
+
+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==
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
+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-json@^5.0.0, parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse5@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
+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==
+
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pirates@^4.0.1, pirates@^4.0.4:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss-attribute-case-insensitive@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
+  integrity sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-browser-comments@^4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz#bcfc86134df5807f5d3c0eefa191d42136b5e72a"
+  integrity sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==
+
+postcss-calc@^8.2.3:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
+  integrity sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
+
+postcss-clamp@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.1.0.tgz#7263e95abadd8c2ba1bd911b0b5a5c9c93e02363"
+  integrity sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-functional-notation@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz#21a909e8d7454d3612d1659e471ce4696f28caec"
+  integrity sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-hex-alpha@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz#c66e2980f2fbc1a63f5b079663340ce8b55f25a5"
+  integrity sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-rebeccapurple@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz#63fdab91d878ebc4dd4b7c02619a0c3d6a56ced0"
+  integrity sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-colormin@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz#86c27c26ed6ba00d96c79e08f3ffb418d1d1988f"
+  integrity sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+    colord "^2.9.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-convert-values@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz#04998bb9ba6b65aa31035d669a6af342c5f9d393"
+  integrity sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-media@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz#c8f9637edf45fef761b014c024cee013f80529ea"
+  integrity sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-properties@^12.1.10:
+  version "12.1.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz#d14bb9b3989ac4d40aaa0e110b43be67ac7845cf"
+  integrity sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-selectors@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz#1ab4684d65f30fed175520f82d223db0337239d9"
+  integrity sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-dir-pseudo-class@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz#2bf31de5de76added44e0a25ecf60ae9f7c7c26c"
+  integrity sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-discard-comments@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
+  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
+
+postcss-discard-duplicates@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
+  integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
+
+postcss-discard-empty@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz#e57762343ff7f503fe53fca553d18d7f0c369c6c"
+  integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
+
+postcss-discard-overridden@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
+  integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
+
+postcss-double-position-gradients@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz#b96318fdb477be95997e86edd29c6e3557a49b91"
+  integrity sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-env-function@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-4.0.6.tgz#7b2d24c812f540ed6eda4c81f6090416722a8e7a"
+  integrity sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-flexbugs-fixes@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz#2028e145313074fc9abe276cb7ca14e5401eb49d"
+  integrity sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==
+
+postcss-focus-visible@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz#50c9ea9afa0ee657fb75635fabad25e18d76bf9e"
+  integrity sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-focus-within@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz#5b1d2ec603195f3344b716c0b75f61e44e8d2e20"
+  integrity sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-font-variant@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz#efd59b4b7ea8bb06127f2d031bfbb7f24d32fa66"
+  integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
+
+postcss-gap-properties@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz#f7e3cddcf73ee19e94ccf7cb77773f9560aa2fff"
+  integrity sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==
+
+postcss-image-set-function@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz#08353bd756f1cbfb3b6e93182c7829879114481f"
+  integrity sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-initial@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
+  integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-lab-function@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz#6fe4c015102ff7cd27d1bd5385582f67ebdbdc98"
+  integrity sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
+postcss-logical@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-5.0.4.tgz#ec75b1ee54421acc04d5921576b7d8db6b0e6f73"
+  integrity sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==
+
+postcss-media-minmax@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz#7140bddec173e2d6d657edbd8554a55794e2a5b5"
+  integrity sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==
+
+postcss-merge-longhand@^5.1.7:
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz#24a1bdf402d9ef0e70f568f39bdc0344d568fb16"
+  integrity sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    stylehacks "^5.1.1"
+
+postcss-merge-rules@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz#2f26fa5cacb75b1402e213789f6766ae5e40313c"
+  integrity sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+    cssnano-utils "^3.1.0"
+    postcss-selector-parser "^6.0.5"
+
+postcss-minify-font-values@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
+  integrity sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-gradients@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz#f1fe1b4f498134a5068240c2f25d46fcd236ba2c"
+  integrity sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==
+  dependencies:
+    colord "^2.9.1"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-params@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz#c06a6c787128b3208b38c9364cfc40c8aa5d7352"
+  integrity sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==
+  dependencies:
+    browserslist "^4.21.4"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-selectors@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz#d4e7e6b46147b8117ea9325a915a801d5fe656c6"
+  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
+postcss-modules-extract-imports@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
+
+postcss-modules-local-by-default@^4.0.5:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz#d150f43837831dae25e4085596e84f6f5d6ec368"
+  integrity sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^7.0.0"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz#1bbccddcb398f1d7a511e0a2d1d047718af4078c"
+  integrity sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==
+  dependencies:
+    postcss-selector-parser "^7.0.0"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-nesting@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.2.0.tgz#0b12ce0db8edfd2d8ae0aaf86427370b898890be"
+  integrity sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+postcss-normalize-charset@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz#9302de0b29094b52c259e9b2cf8dc0879879f0ed"
+  integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
+
+postcss-normalize-display-values@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz#72abbae58081960e9edd7200fcf21ab8325c3da8"
+  integrity sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-positions@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz#ef97279d894087b59325b45c47f1e863daefbb92"
+  integrity sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-repeat-style@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz#e9eb96805204f4766df66fd09ed2e13545420fb2"
+  integrity sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-string@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz#411961169e07308c82c1f8c55f3e8a337757e228"
+  integrity sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-timing-functions@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz#d5614410f8f0b2388e9f240aa6011ba6f52dafbb"
+  integrity sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-unicode@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz#f67297fca3fea7f17e0d2caa40769afc487aa030"
+  integrity sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-url@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz#ed9d88ca82e21abef99f743457d3729a042adcdc"
+  integrity sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==
+  dependencies:
+    normalize-url "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-whitespace@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz#08a1a0d1ffa17a7cc6efe1e6c9da969cc4493cfa"
+  integrity sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-10.0.1.tgz#464692676b52792a06b06880a176279216540dd7"
+  integrity sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==
+  dependencies:
+    "@csstools/normalize.css" "*"
+    postcss-browser-comments "^4"
+    sanitize.css "*"
+
+postcss-opacity-percentage@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz#5b89b35551a556e20c5d23eb5260fbfcf5245da6"
+  integrity sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==
+
+postcss-ordered-values@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz#b6fd2bd10f937b23d86bc829c69e7732ce76ea38"
+  integrity sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==
+  dependencies:
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-overflow-shorthand@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz#7ed6486fec44b76f0eab15aa4866cda5d55d893e"
+  integrity sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-page-break@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-3.0.4.tgz#7fbf741c233621622b68d435babfb70dd8c1ee5f"
+  integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
+
+postcss-place@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-7.0.5.tgz#95dbf85fd9656a3a6e60e832b5809914236986c4"
+  integrity sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-preset-env@^7.0.1:
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz#2a50f5e612c3149cc7af75634e202a5b2ad4f1e2"
+  integrity sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==
+  dependencies:
+    "@csstools/postcss-cascade-layers" "^1.1.1"
+    "@csstools/postcss-color-function" "^1.1.1"
+    "@csstools/postcss-font-format-keywords" "^1.0.1"
+    "@csstools/postcss-hwb-function" "^1.0.2"
+    "@csstools/postcss-ic-unit" "^1.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.7"
+    "@csstools/postcss-nested-calc" "^1.0.0"
+    "@csstools/postcss-normalize-display-values" "^1.0.1"
+    "@csstools/postcss-oklab-function" "^1.1.1"
+    "@csstools/postcss-progressive-custom-properties" "^1.3.0"
+    "@csstools/postcss-stepped-value-functions" "^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
+    "@csstools/postcss-trigonometric-functions" "^1.0.2"
+    "@csstools/postcss-unset-value" "^1.0.2"
+    autoprefixer "^10.4.13"
+    browserslist "^4.21.4"
+    css-blank-pseudo "^3.0.3"
+    css-has-pseudo "^3.0.4"
+    css-prefers-color-scheme "^6.0.3"
+    cssdb "^7.1.0"
+    postcss-attribute-case-insensitive "^5.0.2"
+    postcss-clamp "^4.1.0"
+    postcss-color-functional-notation "^4.2.4"
+    postcss-color-hex-alpha "^8.0.4"
+    postcss-color-rebeccapurple "^7.1.1"
+    postcss-custom-media "^8.0.2"
+    postcss-custom-properties "^12.1.10"
+    postcss-custom-selectors "^6.0.3"
+    postcss-dir-pseudo-class "^6.0.5"
+    postcss-double-position-gradients "^3.1.2"
+    postcss-env-function "^4.0.6"
+    postcss-focus-visible "^6.0.4"
+    postcss-focus-within "^5.0.4"
+    postcss-font-variant "^5.0.0"
+    postcss-gap-properties "^3.0.5"
+    postcss-image-set-function "^4.0.7"
+    postcss-initial "^4.0.1"
+    postcss-lab-function "^4.2.1"
+    postcss-logical "^5.0.4"
+    postcss-media-minmax "^5.0.0"
+    postcss-nesting "^10.2.0"
+    postcss-opacity-percentage "^1.1.2"
+    postcss-overflow-shorthand "^3.0.4"
+    postcss-page-break "^3.0.4"
+    postcss-place "^7.0.5"
+    postcss-pseudo-class-any-link "^7.1.6"
+    postcss-replace-overflow-wrap "^4.0.0"
+    postcss-selector-not "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-pseudo-class-any-link@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
+  integrity sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-reduce-initial@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz#798cd77b3e033eae7105c18c9d371d989e1382d6"
+  integrity sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+
+postcss-reduce-transforms@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9"
+  integrity sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-replace-overflow-wrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
+  integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
+
+postcss-selector-not@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
+  integrity sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c"
+  integrity sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-svgo@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
+  integrity sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    svgo "^2.7.0"
+
+postcss-unique-selectors@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
+  integrity sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^7.0.35:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
+postcss@^8.3.5, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.47:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
+  dependencies:
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
+
+pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
+pretty-error@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
+  integrity sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^3.0.0"
+
+pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
+pretty-format@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+promise@^8.1.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
+  integrity sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==
+  dependencies:
+    asap "~2.0.6"
+
+prompts@^2.0.1, prompts@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+psl@^1.1.33:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
+  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
+  dependencies:
+    punycode "^2.3.1"
+
+punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
+randombytes@^2.1.0:
+  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"
+
+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.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+react-app-polyfill@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7"
+  integrity sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==
+  dependencies:
+    core-js "^3.19.2"
+    object-assign "^4.1.1"
+    promise "^8.1.0"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.9"
+    whatwg-fetch "^3.6.2"
+
+react-dev-utils@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
+  integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    address "^1.1.2"
+    browserslist "^4.18.1"
+    chalk "^4.1.2"
+    cross-spawn "^7.0.3"
+    detect-port-alt "^1.1.6"
+    escape-string-regexp "^4.0.0"
+    filesize "^8.0.6"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.5.0"
+    global-modules "^2.0.0"
+    globby "^11.0.4"
+    gzip-size "^6.0.0"
+    immer "^9.0.7"
+    is-root "^2.1.0"
+    loader-utils "^3.2.0"
+    open "^8.4.0"
+    pkg-up "^3.1.0"
+    prompts "^2.4.2"
+    react-error-overlay "^6.0.11"
+    recursive-readdir "^2.2.2"
+    shell-quote "^1.7.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+react-dom@experimental:
+  version "0.0.0-experimental-d85cf3e5-20250205"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-d85cf3e5-20250205.tgz#0a0c4e50ee946041f426615d96913d89bbf0340f"
+  integrity sha512-3di+xOlrOFfk/Pb3JsZA0N6Bl0zYtzl2ZQeJgLdiU4UAYqbI7OGmhVW2cR7v3Ne5sRzlZZAJaJwzW1d/PvgADw==
+  dependencies:
+    scheduler "0.0.0-experimental-d85cf3e5-20250205"
+
+react-error-overlay@^6.0.11:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
+  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-is@^18.0.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-refresh@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
+  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
+
+react-scripts@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
+  integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3"
+    "@svgr/webpack" "^5.5.0"
+    babel-jest "^27.4.2"
+    babel-loader "^8.2.3"
+    babel-plugin-named-asset-import "^0.3.8"
+    babel-preset-react-app "^10.0.1"
+    bfj "^7.0.2"
+    browserslist "^4.18.1"
+    camelcase "^6.2.1"
+    case-sensitive-paths-webpack-plugin "^2.4.0"
+    css-loader "^6.5.1"
+    css-minimizer-webpack-plugin "^3.2.0"
+    dotenv "^10.0.0"
+    dotenv-expand "^5.1.0"
+    eslint "^8.3.0"
+    eslint-config-react-app "^7.0.1"
+    eslint-webpack-plugin "^3.1.1"
+    file-loader "^6.2.0"
+    fs-extra "^10.0.0"
+    html-webpack-plugin "^5.5.0"
+    identity-obj-proxy "^3.0.0"
+    jest "^27.4.3"
+    jest-resolve "^27.4.2"
+    jest-watch-typeahead "^1.0.0"
+    mini-css-extract-plugin "^2.4.5"
+    postcss "^8.4.4"
+    postcss-flexbugs-fixes "^5.0.2"
+    postcss-loader "^6.2.1"
+    postcss-normalize "^10.0.1"
+    postcss-preset-env "^7.0.1"
+    prompts "^2.4.2"
+    react-app-polyfill "^3.0.0"
+    react-dev-utils "^12.0.1"
+    react-refresh "^0.11.0"
+    resolve "^1.20.0"
+    resolve-url-loader "^4.0.0"
+    sass-loader "^12.3.0"
+    semver "^7.3.5"
+    source-map-loader "^3.0.0"
+    style-loader "^3.3.1"
+    tailwindcss "^3.0.2"
+    terser-webpack-plugin "^5.2.5"
+    webpack "^5.64.4"
+    webpack-dev-server "^4.6.0"
+    webpack-manifest-plugin "^4.0.2"
+    workbox-webpack-plugin "^6.4.1"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+react@experimental:
+  version "0.0.0-experimental-d85cf3e5-20250205"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-d85cf3e5-20250205.tgz#9cc3334e5092713cd9827e4633d6c76c9256e4b8"
+  integrity sha512-tKNnCogN6Ly00Otm+rNQrtUyTA1pAhNNK948dmVEOso500sfEv5YjgfwVQIsptefvHtBCC4jjKw5tur518klhA==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readable-stream@^2.0.1:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  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@^3.0.6:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+recursive-readdir@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"
+  integrity sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==
+  dependencies:
+    minimatch "^3.0.5"
+
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
+regenerate-unicode-properties@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.9:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regex-parser@^2.2.11:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.3.0.tgz#4bb61461b1a19b8b913f3960364bb57887f920ee"
+  integrity sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==
+
+regexp.prototype.flags@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
+regexpu-core@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
+  integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.12.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+regjsparser@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.12.0.tgz#0e846df6c6530586429377de56e0475583b088dc"
+  integrity sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==
+  dependencies:
+    jsesc "~3.0.2"
+
+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
+
+renderkid@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
+  integrity sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==
+  dependencies:
+    css-select "^4.1.3"
+    dom-converter "^0.2.0"
+    htmlparser2 "^6.1.0"
+    lodash "^4.17.21"
+    strip-ansi "^6.0.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+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==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+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-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-url-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz#d50d4ddc746bb10468443167acf800dcd6c3ad57"
+  integrity sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==
+  dependencies:
+    adjust-sourcemap-loader "^4.0.0"
+    convert-source-map "^1.7.0"
+    loader-utils "^2.0.0"
+    postcss "^7.0.35"
+    source-map "0.6.1"
+
+resolve.exports@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
+  integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
+
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4, resolve@^1.22.8:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+retry@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
+  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup-plugin-terser@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
+rollup@^2.43.1:
+  version "2.79.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.2.tgz#f150e4a5db4b121a21a747d762f701e5e9f49090"
+  integrity sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-array-concat@^1.1.2, safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.3, safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sanitize.css@*:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"
+  integrity sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==
+
+sass-loader@^12.3.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
+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==
+
+saxes@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
+scheduler@0.0.0-experimental-d85cf3e5-20250205:
+  version "0.0.0-experimental-d85cf3e5-20250205"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-d85cf3e5-20250205.tgz#b0158d10f637749790d932db97ef139d03dc7522"
+  integrity sha512-4x4Z4ikaqwOq3/idgZ/8JyEvdglDq9tZsMWhyiQFOQQ60s7Jn4jIW0CRyPZwGqGL3XIOnJsJkCGH1e74tuVcCQ==
+
+schema-utils@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
+schema-utils@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.0.0, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^4.0.0, schema-utils@^4.2.0, schema-utils@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.3.0.tgz#3b669f04f71ff2dfb5aba7ce2d5a9d79b35622c0"
+  integrity sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.9.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^5.1.0"
+
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
+
+selfsigned@^2.1.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.4.1.tgz#560d90565442a3ed35b674034cec4e95dceb4ae0"
+  integrity sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==
+  dependencies:
+    "@types/node-forge" "^1.3.0"
+    node-forge "^1"
+
+semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
+  integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+serve-index@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==
+  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.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.0"
+
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
+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.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@^1.7.3, shell-quote@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
+  integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.6, side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+sockjs@^0.3.24:
+  version "0.3.24"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
+  integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
+  dependencies:
+    faye-websocket "^0.11.3"
+    uuid "^8.3.2"
+    websocket-driver "^0.7.4"
+
+source-list-map@^2.0.0, source-list-map@^2.0.1:
+  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-js@^1.0.1, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+source-map-loader@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.2.tgz#af23192f9b344daa729f6772933194cc5fa54fee"
+  integrity sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==
+  dependencies:
+    abab "^2.0.5"
+    iconv-lite "^0.6.3"
+    source-map-js "^1.0.1"
+
+source-map-support@^0.5.6, source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+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"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.3:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+source-map@^0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+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.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
+  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"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
+static-eval@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.2.tgz#2d1759306b1befa688938454c546b7871f806a42"
+  integrity sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==
+  dependencies:
+    escodegen "^1.8.1"
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-length@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-5.0.1.tgz#3d647f497b6e8e8d41e422f7e0b23bc536c8381e"
+  integrity sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==
+  dependencies:
+    char-regex "^2.0.0"
+    strip-ansi "^7.0.1"
+
+string-natural-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
+  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+
+string.prototype.matchall@^4.0.12, string.prototype.matchall@^4.0.6:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"
+  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    regexp.prototype.flags "^1.5.3"
+    set-function-name "^2.0.2"
+    side-channel "^1.1.0"
+
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+string.prototype.trimend@^1.0.8, string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^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@~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"
+
+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-comments@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
+  integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+style-loader@^3.3.1:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
+  integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
+
+stylehacks@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
+  integrity sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-selector-parser "^6.0.4"
+
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+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"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
+  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svg-parser@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^1.2.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
+  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"
+
+svgo@^2.7.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
+symbol-tree@^3.2.4:
+  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==
+
+tailwindcss@^3.0.2:
+  version "3.4.17"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
+tapable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+temp-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
+  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
+
+tempy@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
+  integrity sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==
+  dependencies:
+    is-stream "^2.0.0"
+    temp-dir "^2.0.0"
+    type-fest "^0.16.0"
+    unique-string "^2.0.0"
+
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.10:
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz#93c21f44ca86634257cac176f884f942b7ba3832"
+  integrity sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jest-worker "^27.4.5"
+    schema-utils "^4.3.0"
+    serialize-javascript "^6.0.2"
+    terser "^5.31.1"
+
+terser@^5.0.0, terser@^5.10.0, terser@^5.31.1:
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.38.0.tgz#df742bb69ee556c29650e926ff154d116f4ccf79"
+  integrity sha512-a4GD5R1TjEeuCT6ZRiYMHmIf7okbCPEuhQET8bczV6FrQMMlFXA1n+G0KKjdlFCm3TEHV77GxfZB3vZSUQGFpg==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+throat@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.2.tgz#51a3fbb5e11ae72e2cf74861ed5c8020f89f29fe"
+  integrity sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==
+
+thunky@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tough-cookie@^4.0.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+  dependencies:
+    punycode "^2.1.1"
+
+tryer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
+  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.3:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
+  integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+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"
+
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
+underscore@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
+  integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
+
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
+  integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
+  integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+unique-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+
+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 sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==
+
+upath@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-browserslist-db@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz#97e9c96ab0ae7bcac08e9ae5151d26e6bc6b5580"
+  integrity sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+v8-to-istanbul@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
+  integrity sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+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"
+
+web-vitals@^2.1.0:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c"
+  integrity sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==
+
+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==
+
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
+webpack-dev-middleware@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
+  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
+  dependencies:
+    colorette "^2.0.10"
+    memfs "^3.4.3"
+    mime-types "^2.1.31"
+    range-parser "^1.2.1"
+    schema-utils "^4.0.0"
+
+webpack-dev-server@^4.6.0:
+  version "4.15.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz#9e0c70a42a012560860adb186986da1248333173"
+  integrity sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==
+  dependencies:
+    "@types/bonjour" "^3.5.9"
+    "@types/connect-history-api-fallback" "^1.3.5"
+    "@types/express" "^4.17.13"
+    "@types/serve-index" "^1.9.1"
+    "@types/serve-static" "^1.13.10"
+    "@types/sockjs" "^0.3.33"
+    "@types/ws" "^8.5.5"
+    ansi-html-community "^0.0.8"
+    bonjour-service "^1.0.11"
+    chokidar "^3.5.3"
+    colorette "^2.0.10"
+    compression "^1.7.4"
+    connect-history-api-fallback "^2.0.0"
+    default-gateway "^6.0.3"
+    express "^4.17.3"
+    graceful-fs "^4.2.6"
+    html-entities "^2.3.2"
+    http-proxy-middleware "^2.0.3"
+    ipaddr.js "^2.0.1"
+    launch-editor "^2.6.0"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.1.1"
+    serve-index "^1.9.1"
+    sockjs "^0.3.24"
+    spdy "^4.0.2"
+    webpack-dev-middleware "^5.3.4"
+    ws "^8.13.0"
+
+webpack-manifest-plugin@^4.0.2:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz#10f8dbf4714ff93a215d5a45bcc416d80506f94f"
+  integrity sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==
+  dependencies:
+    tapable "^2.0.0"
+    webpack-sources "^2.2.0"
+
+webpack-sources@^1.4.3:
+  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-sources@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"
+  integrity sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==
+  dependencies:
+    source-list-map "^2.0.1"
+    source-map "^0.6.1"
+
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack@^5.64.4:
+  version "5.97.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.97.1.tgz#972a8320a438b56ff0f1d94ade9e82eac155fa58"
+  integrity sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==
+  dependencies:
+    "@types/eslint-scope" "^3.7.7"
+    "@types/estree" "^1.0.6"
+    "@webassemblyjs/ast" "^1.14.1"
+    "@webassemblyjs/wasm-edit" "^1.14.1"
+    "@webassemblyjs/wasm-parser" "^1.14.1"
+    acorn "^8.14.0"
+    browserslist "^4.24.0"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
+    webpack-sources "^3.2.3"
+
+websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
+whatwg-encoding@^1.0.5:
+  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.24"
+
+whatwg-fetch@^3.6.2:
+  version "3.6.20"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz#580ce6d791facec91d37c72890995a0b48d31c70"
+  integrity sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==
+
+whatwg-mimetype@^2.3.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:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^8.0.0, whatwg-url@^8.5.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-typed-array@^1.1.16, which-typed-array@^1.1.18:
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.18.tgz#df2389ebf3fbb246a71390e90730a9edb6ce17ad"
+  integrity sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
+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"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5, word-wrap@~1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+workbox-background-sync@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.6.1.tgz#08d603a33717ce663e718c30cc336f74909aff2f"
+  integrity sha512-trJd3ovpWCvzu4sW0E8rV3FUyIcC0W8G+AZ+VcqzzA890AsWZlUGOTSxIMmIHVusUw/FDq1HFWfy/kC/WTRqSg==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "6.6.1"
+
+workbox-broadcast-update@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.6.1.tgz#0fad9454cf8e4ace0c293e5617c64c75d8a8c61e"
+  integrity sha512-fBhffRdaANdeQ1V8s692R9l/gzvjjRtydBOvR6WCSB0BNE2BacA29Z4r9/RHd9KaXCPl6JTdI9q0bR25YKP8TQ==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-build@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.6.1.tgz#6010e9ce550910156761448f2dbea8cfcf759cb0"
+  integrity sha512-INPgDx6aRycAugUixbKgiEQBWD0MPZqU5r0jyr24CehvNuLPSXp/wGOpdRJmts656lNiXwqV7dC2nzyrzWEDnw==
+  dependencies:
+    "@apideck/better-ajv-errors" "^0.3.1"
+    "@babel/core" "^7.11.1"
+    "@babel/preset-env" "^7.11.0"
+    "@babel/runtime" "^7.11.2"
+    "@rollup/plugin-babel" "^5.2.0"
+    "@rollup/plugin-node-resolve" "^11.2.1"
+    "@rollup/plugin-replace" "^2.4.1"
+    "@surma/rollup-plugin-off-main-thread" "^2.2.3"
+    ajv "^8.6.0"
+    common-tags "^1.8.0"
+    fast-json-stable-stringify "^2.1.0"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    lodash "^4.17.20"
+    pretty-bytes "^5.3.0"
+    rollup "^2.43.1"
+    rollup-plugin-terser "^7.0.0"
+    source-map "^0.8.0-beta.0"
+    stringify-object "^3.3.0"
+    strip-comments "^2.0.1"
+    tempy "^0.6.0"
+    upath "^1.2.0"
+    workbox-background-sync "6.6.1"
+    workbox-broadcast-update "6.6.1"
+    workbox-cacheable-response "6.6.1"
+    workbox-core "6.6.1"
+    workbox-expiration "6.6.1"
+    workbox-google-analytics "6.6.1"
+    workbox-navigation-preload "6.6.1"
+    workbox-precaching "6.6.1"
+    workbox-range-requests "6.6.1"
+    workbox-recipes "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+    workbox-streams "6.6.1"
+    workbox-sw "6.6.1"
+    workbox-window "6.6.1"
+
+workbox-cacheable-response@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.6.1.tgz#284c2b86be3f4fd191970ace8c8e99797bcf58e9"
+  integrity sha512-85LY4veT2CnTCDxaVG7ft3NKaFbH6i4urZXgLiU4AiwvKqS2ChL6/eILiGRYXfZ6gAwDnh5RkuDbr/GMS4KSag==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-core@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.6.1.tgz#7184776d4134c5ed2f086878c882728fc9084265"
+  integrity sha512-ZrGBXjjaJLqzVothoE12qTbVnOAjFrHDXpZe7coCb6q65qI/59rDLwuFMO4PcZ7jcbxY+0+NhUVztzR/CbjEFw==
+
+workbox-expiration@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.6.1.tgz#a841fa36676104426dbfb9da1ef6a630b4f93739"
+  integrity sha512-qFiNeeINndiOxaCrd2DeL1Xh1RFug3JonzjxUHc5WkvkD2u5abY3gZL1xSUNt3vZKsFFGGORItSjVTVnWAZO4A==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "6.6.1"
+
+workbox-google-analytics@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.6.1.tgz#a07a6655ab33d89d1b0b0a935ffa5dea88618c5d"
+  integrity sha512-1TjSvbFSLmkpqLcBsF7FuGqqeDsf+uAXO/pjiINQKg3b1GN0nBngnxLcXDYo1n/XxK4N7RaRrpRlkwjY/3ocuA==
+  dependencies:
+    workbox-background-sync "6.6.1"
+    workbox-core "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+
+workbox-navigation-preload@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.6.1.tgz#61a34fe125558dd88cf09237f11bd966504ea059"
+  integrity sha512-DQCZowCecO+wRoIxJI2V6bXWK6/53ff+hEXLGlQL4Rp9ZaPDLrgV/32nxwWIP7QpWDkVEtllTAK5h6cnhxNxDA==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-precaching@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.6.1.tgz#dedeeba10a2d163d990bf99f1c2066ac0d1a19e2"
+  integrity sha512-K4znSJ7IKxCnCYEdhNkMr7X1kNh8cz+mFgx9v5jFdz1MfI84pq8C2zG+oAoeE5kFrUf7YkT5x4uLWBNg0DVZ5A==
+  dependencies:
+    workbox-core "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+
+workbox-range-requests@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.6.1.tgz#ddaf7e73af11d362fbb2f136a9063a4c7f507a39"
+  integrity sha512-4BDzk28govqzg2ZpX0IFkthdRmCKgAKreontYRC5YsAPB2jDtPNxqx3WtTXgHw1NZalXpcH/E4LqUa9+2xbv1g==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-recipes@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.6.1.tgz#ea70d2b2b0b0bce8de0a9d94f274d4a688e69fae"
+  integrity sha512-/oy8vCSzromXokDA+X+VgpeZJvtuf8SkQ8KL0xmRivMgJZrjwM3c2tpKTJn6PZA6TsbxGs3Sc7KwMoZVamcV2g==
+  dependencies:
+    workbox-cacheable-response "6.6.1"
+    workbox-core "6.6.1"
+    workbox-expiration "6.6.1"
+    workbox-precaching "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+
+workbox-routing@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.6.1.tgz#cba9a1c7e0d1ea11e24b6f8c518840efdc94f581"
+  integrity sha512-j4ohlQvfpVdoR8vDYxTY9rA9VvxTHogkIDwGdJ+rb2VRZQ5vt1CWwUUZBeD/WGFAni12jD1HlMXvJ8JS7aBWTg==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-strategies@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.6.1.tgz#38d0f0fbdddba97bd92e0c6418d0b1a2ccd5b8bf"
+  integrity sha512-WQLXkRnsk4L81fVPkkgon1rZNxnpdO5LsO+ws7tYBC6QQQFJVI6v98klrJEjFtZwzw/mB/HT5yVp7CcX0O+mrw==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-streams@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.6.1.tgz#b2f7ba7b315c27a6e3a96a476593f99c5d227d26"
+  integrity sha512-maKG65FUq9e4BLotSKWSTzeF0sgctQdYyTMq529piEN24Dlu9b6WhrAfRpHdCncRS89Zi2QVpW5V33NX8PgH3Q==
+  dependencies:
+    workbox-core "6.6.1"
+    workbox-routing "6.6.1"
+
+workbox-sw@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.6.1.tgz#d4c4ca3125088e8b9fd7a748ed537fa0247bd72c"
+  integrity sha512-R7whwjvU2abHH/lR6kQTTXLHDFU2izht9kJOvBRYK65FbwutT4VvnUAJIgHvfWZ/fokrOPhfoWYoPCMpSgUKHQ==
+
+workbox-webpack-plugin@^6.4.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.1.tgz#4f81cc1ad4e5d2cd7477a86ba83c84ee2d187531"
+  integrity sha512-zpZ+ExFj9NmiI66cFEApyjk7hGsfJ1YMOaLXGXBoZf0v7Iu6hL0ZBe+83mnDq3YYWAfA3fnyFejritjOHkFcrA==
+  dependencies:
+    fast-json-stable-stringify "^2.1.0"
+    pretty-bytes "^5.4.1"
+    upath "^1.2.0"
+    webpack-sources "^1.4.3"
+    workbox-build "6.6.1"
+
+workbox-window@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.6.1.tgz#f22a394cbac36240d0dadcbdebc35f711bb7b89e"
+  integrity sha512-wil4nwOY58nTdCvif/KEZjQ2NP8uk3gGeRNy2jPBbzypU4BT4D9L8xiwbmDBpZlSgJd2xsT9FvSNU0gsxV51JQ==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+    workbox-core "6.6.1"
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+ws@^7.4.6:
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
+ws@^8.13.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
+
+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==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yaml@^2.3.4:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
+
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/fixtures/packaging/README.md b/fixtures/packaging/README.md
new file mode 100644
index 00000000000..4b069ec0c76
--- /dev/null
+++ b/fixtures/packaging/README.md
@@ -0,0 +1,32 @@
+# Manual Testing Fixtures
+
+This folder exists for **React contributors** only.  
+If you use React, you don't need to worry about it.
+
+These fixtures verify that the built React distributions are usable in different environments.  
+**They are not running automatically.** (At least not yet. Feel free to contribute to automate them.)
+
+Run them when you make changes to how we package React and ReactDOM.
+
+## How to Run
+
+First, build React and the fixtures:
+
+```
+cd react
+npm run build
+node fixtures/packaging/build-all.js
+```
+
+Then run a local server, e.g.
+
+```
+npx pushstate-server .
+```
+
+and open the following URL in your browser: [http://localhost:9000/fixtures/packaging/index.html](http://localhost:9000/fixtures/packaging/index.html)
+
+You should see two things:
+
+* A number of iframes (corresponding to various builds), with "Hello World" rendered in each iframe.
+* No errors in the console.
diff --git a/fixtures/packaging/babel-standalone/dev.html b/fixtures/packaging/babel-standalone/dev.html
new file mode 100644
index 00000000000..7b3e1e855fd
--- /dev/null
+++ b/fixtures/packaging/babel-standalone/dev.html
@@ -0,0 +1,14 @@
+<html>
+  <body>
+    <script src="../../../build/oss-experimental/react/umd/react.development.js"></script>
+    <script src="../../../build/oss-experimental/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <div id="container"></div>
+    <script type="text/babel">
+      ReactDOM.render(
+        <h1>Hello World!</h1>,
+        document.getElementById('container')
+      );
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/browserify/dev/.gitignore b/fixtures/packaging/browserify/dev/.gitignore
new file mode 100644
index 00000000000..66b00e6a05a
--- /dev/null
+++ b/fixtures/packaging/browserify/dev/.gitignore
@@ -0,0 +1 @@
+output.js
diff --git a/fixtures/packaging/browserify/dev/index.html b/fixtures/packaging/browserify/dev/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/browserify/dev/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/browserify/dev/input.js b/fixtures/packaging/browserify/dev/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/browserify/dev/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/browserify/dev/package.json b/fixtures/packaging/browserify/dev/package.json
new file mode 100644
index 00000000000..c0d8379838b
--- /dev/null
+++ b/fixtures/packaging/browserify/dev/package.json
@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "name": "browserify-dev-fixture",
+  "dependencies": {
+    "browserify": "^13.3.0"
+  },
+  "scripts": {
+    "build": "rm -f output.js && browserify ./input.js -o output.js",
+    "prebuild": "cp -r ../../../../build/oss-experimental/* ./node_modules/"
+  }
+}
diff --git a/fixtures/packaging/browserify/dev/yarn.lock b/fixtures/packaging/browserify/dev/yarn.lock
new file mode 100644
index 00000000000..720efde1b21
--- /dev/null
+++ b/fixtures/packaging/browserify/dev/yarn.lock
@@ -0,0 +1,940 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+JSONStream@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.1.tgz#707f761e01dae9e16f1bcf93703b78c70966579a"
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+acorn@^4.0.3:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+assert@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+astw@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/astw/-/astw-2.2.0.tgz#7bd41784d32493987aeb239b6b4e1c57a873b917"
+  dependencies:
+    acorn "^4.0.3"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+
+bn.js@^5.0.0, bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-pack@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.0.2.tgz#f86cd6cef4f5300c8e63e07a4d512f65fbff4531"
+  dependencies:
+    JSONStream "^1.0.3"
+    combine-source-map "~0.7.1"
+    defined "^1.0.0"
+    through2 "^2.0.0"
+    umd "^3.0.0"
+
+browser-resolve@^1.11.0, browser-resolve@^1.7.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  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.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+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-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+browserify-zlib@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserify@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/browserify/-/browserify-13.3.0.tgz#b5a9c9020243f0c70e4675bec8223bc627e415ce"
+  dependencies:
+    JSONStream "^1.0.3"
+    assert "^1.4.0"
+    browser-pack "^6.0.1"
+    browser-resolve "^1.11.0"
+    browserify-zlib "~0.1.2"
+    buffer "^4.1.0"
+    cached-path-relative "^1.0.0"
+    concat-stream "~1.5.1"
+    console-browserify "^1.1.0"
+    constants-browserify "~1.0.0"
+    crypto-browserify "^3.0.0"
+    defined "^1.0.0"
+    deps-sort "^2.0.0"
+    domain-browser "~1.1.0"
+    duplexer2 "~0.1.2"
+    events "~1.1.0"
+    glob "^7.1.0"
+    has "^1.0.0"
+    htmlescape "^1.1.0"
+    https-browserify "~0.0.0"
+    inherits "~2.0.1"
+    insert-module-globals "^7.0.0"
+    labeled-stream-splicer "^2.0.0"
+    module-deps "^4.0.8"
+    os-browserify "~0.1.1"
+    parents "^1.0.1"
+    path-browserify "~0.0.0"
+    process "~0.11.0"
+    punycode "^1.3.2"
+    querystring-es3 "~0.2.0"
+    read-only-stream "^2.0.0"
+    readable-stream "^2.0.2"
+    resolve "^1.1.4"
+    shasum "^1.0.0"
+    shell-quote "^1.6.1"
+    stream-browserify "^2.0.0"
+    stream-http "^2.0.0"
+    string_decoder "~0.10.0"
+    subarg "^1.0.0"
+    syntax-error "^1.1.1"
+    through2 "^2.0.0"
+    timers-browserify "^1.0.1"
+    tty-browserify "~0.0.0"
+    url "~0.11.0"
+    util "~0.10.1"
+    vm-browserify "~0.0.1"
+    xtend "^4.0.0"
+
+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.1.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-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"
+
+cached-path-relative@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.1.tgz#d09c4b52800aa4c078e2dd81a869aac90d2e54e7"
+
+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"
+
+combine-source-map@~0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.7.2.tgz#0870312856b307a87cc4ac486f3a9a62aeccc09e"
+  dependencies:
+    convert-source-map "~1.1.0"
+    inline-source-map "~0.6.0"
+    lodash.memoize "~3.0.3"
+    source-map "~0.5.3"
+
+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, concat-stream@~1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
+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"
+
+constants-browserify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+convert-source-map@~1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
+
+core-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"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hash@^1.2.0:
+  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.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  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-hmac@^1.1.7:
+  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"
+
+crypto-browserify@^3.0.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  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"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+deps-sort@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/deps-sort/-/deps-sort-2.0.0.tgz#091724902e84658260eb910748cccd1af6e21fb5"
+  dependencies:
+    JSONStream "^1.0.3"
+    shasum "^1.0.0"
+    subarg "^1.0.0"
+    through2 "^2.0.0"
+
+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"
+
+detective@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.5.0.tgz#6e5a8c6b26e6c7a254b1c6b6d7490d98ec91edd1"
+  dependencies:
+    acorn "^4.0.3"
+    defined "^1.0.0"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+domain-browser@~1.1.0:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  dependencies:
+    readable-stream "^2.0.2"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  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"
+
+elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+events@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+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"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+function-bind@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+glob@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+has@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.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.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
+  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"
+
+htmlescape@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
+
+https-browserify@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.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"
+
+inline-source-map@~0.6.0:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/inline-source-map/-/inline-source-map-0.6.2.tgz#f9393471c18a79d1724f863fa38b586370ade2a5"
+  dependencies:
+    source-map "~0.5.3"
+
+insert-module-globals@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-7.0.1.tgz#c03bf4e01cb086d5b5e5ace8ad0afe7889d638c3"
+  dependencies:
+    JSONStream "^1.0.3"
+    combine-source-map "~0.7.1"
+    concat-stream "~1.5.1"
+    is-buffer "^1.1.0"
+    lexical-scope "^1.2.0"
+    process "~0.11.0"
+    through2 "^2.0.0"
+    xtend "^4.0.0"
+
+is-buffer@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isarray@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+json-stable-stringify@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
+  dependencies:
+    jsonify "~0.0.0"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+
+labeled-stream-splicer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/labeled-stream-splicer/-/labeled-stream-splicer-2.0.0.tgz#a52e1d138024c00b86b1c0c91f677918b8ae0a59"
+  dependencies:
+    inherits "^2.0.1"
+    isarray "~0.0.1"
+    stream-splicer "^2.0.0"
+
+lexical-scope@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/lexical-scope/-/lexical-scope-1.2.0.tgz#fcea5edc704a4b3a8796cdca419c3a0afaf22df4"
+  dependencies:
+    astw "^2.0.0"
+
+lodash.memoize@~3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+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"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+module-deps@^4.0.8:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-4.1.1.tgz#23215833f1da13fd606ccb8087b44852dcb821fd"
+  dependencies:
+    JSONStream "^1.0.3"
+    browser-resolve "^1.7.0"
+    cached-path-relative "^1.0.0"
+    concat-stream "~1.5.0"
+    defined "^1.0.0"
+    detective "^4.0.0"
+    duplexer2 "^0.1.2"
+    inherits "^2.0.1"
+    parents "^1.0.0"
+    readable-stream "^2.0.2"
+    resolve "^1.1.3"
+    stream-combiner2 "^1.1.1"
+    subarg "^1.0.0"
+    through2 "^2.0.0"
+    xtend "^4.0.0"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+os-browserify@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parents@^1.0.0, parents@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parents/-/parents-1.0.1.tgz#fedd4d2bf193a77745fe71e371d73c3307d9c751"
+  dependencies:
+    path-platform "~0.11.15"
+
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  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-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+path-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-platform@~0.11.15:
+  version "0.11.15"
+  resolved "https://registry.yarnpkg.com/path-platform/-/path-platform-0.11.15.tgz#e864217f74c36850f0852b78dc7bf7d4a5721bf2"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  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"
+
+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"
+
+process@~0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.3.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+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"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+read-only-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
+  dependencies:
+    readable-stream "^2.0.2"
+
+readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@~2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.1.3, resolve@^1.1.4:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+  dependencies:
+    path-parse "^1.0.5"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, 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.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shasum@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shasum/-/shasum-1.0.2.tgz#e7012310d8f417f4deb5712150e5678b87ae565f"
+  dependencies:
+    json-stable-stringify "~0.0.0"
+    sha.js "~2.4.4"
+
+shell-quote@^1.6.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
+
+source-map@~0.5.3:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+stream-browserify@^2.0.0:
+  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-combiner2@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
+  dependencies:
+    duplexer2 "~0.1.0"
+    readable-stream "^2.0.2"
+
+stream-http@^2.0.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-splicer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stream-splicer/-/stream-splicer-2.0.0.tgz#1b63be438a133e4b671cc1935197600175910d83"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
+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.0, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
+syntax-error@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/syntax-error/-/syntax-error-1.3.0.tgz#1ed9266c4d40be75dc55bf9bb1cb77062bb96ca1"
+  dependencies:
+    acorn "^4.0.3"
+
+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.2.7 <3":
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tty-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+typedarray@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+umd@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
+
+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"
+
+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@0.10.3, util@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+vm-browserify@~0.0.1:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
diff --git a/fixtures/packaging/browserify/prod/.gitignore b/fixtures/packaging/browserify/prod/.gitignore
new file mode 100644
index 00000000000..66b00e6a05a
--- /dev/null
+++ b/fixtures/packaging/browserify/prod/.gitignore
@@ -0,0 +1 @@
+output.js
diff --git a/fixtures/packaging/browserify/prod/index.html b/fixtures/packaging/browserify/prod/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/browserify/prod/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/browserify/prod/input.js b/fixtures/packaging/browserify/prod/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/browserify/prod/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/browserify/prod/package.json b/fixtures/packaging/browserify/prod/package.json
new file mode 100644
index 00000000000..36f648faf9f
--- /dev/null
+++ b/fixtures/packaging/browserify/prod/package.json
@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "browserify-prod-fixture",
+  "dependencies": {
+    "browserify": "^13.3.0"
+  },
+  "scripts": {
+    "build": "rm -f output.js && browserify ./input.js -g [envify --NODE_ENV 'production'] -o output.js",
+    "prebuild": "cp -r ../../../../build/oss-experimental/* ./node_modules/"
+  },
+  "devDependencies": {
+    "envify": "^4.0.0"
+  }
+}
diff --git a/fixtures/packaging/browserify/prod/yarn.lock b/fixtures/packaging/browserify/prod/yarn.lock
new file mode 100644
index 00000000000..986716bf47e
--- /dev/null
+++ b/fixtures/packaging/browserify/prod/yarn.lock
@@ -0,0 +1,951 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+JSONStream@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.1.tgz#707f761e01dae9e16f1bcf93703b78c70966579a"
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+acorn@^4.0.3:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+assert@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+astw@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/astw/-/astw-2.2.0.tgz#7bd41784d32493987aeb239b6b4e1c57a873b917"
+  dependencies:
+    acorn "^4.0.3"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+
+bn.js@^5.0.0, bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-pack@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.0.2.tgz#f86cd6cef4f5300c8e63e07a4d512f65fbff4531"
+  dependencies:
+    JSONStream "^1.0.3"
+    combine-source-map "~0.7.1"
+    defined "^1.0.0"
+    through2 "^2.0.0"
+    umd "^3.0.0"
+
+browser-resolve@^1.11.0, browser-resolve@^1.7.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  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.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+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-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+browserify-zlib@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserify@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/browserify/-/browserify-13.3.0.tgz#b5a9c9020243f0c70e4675bec8223bc627e415ce"
+  dependencies:
+    JSONStream "^1.0.3"
+    assert "^1.4.0"
+    browser-pack "^6.0.1"
+    browser-resolve "^1.11.0"
+    browserify-zlib "~0.1.2"
+    buffer "^4.1.0"
+    cached-path-relative "^1.0.0"
+    concat-stream "~1.5.1"
+    console-browserify "^1.1.0"
+    constants-browserify "~1.0.0"
+    crypto-browserify "^3.0.0"
+    defined "^1.0.0"
+    deps-sort "^2.0.0"
+    domain-browser "~1.1.0"
+    duplexer2 "~0.1.2"
+    events "~1.1.0"
+    glob "^7.1.0"
+    has "^1.0.0"
+    htmlescape "^1.1.0"
+    https-browserify "~0.0.0"
+    inherits "~2.0.1"
+    insert-module-globals "^7.0.0"
+    labeled-stream-splicer "^2.0.0"
+    module-deps "^4.0.8"
+    os-browserify "~0.1.1"
+    parents "^1.0.1"
+    path-browserify "~0.0.0"
+    process "~0.11.0"
+    punycode "^1.3.2"
+    querystring-es3 "~0.2.0"
+    read-only-stream "^2.0.0"
+    readable-stream "^2.0.2"
+    resolve "^1.1.4"
+    shasum "^1.0.0"
+    shell-quote "^1.6.1"
+    stream-browserify "^2.0.0"
+    stream-http "^2.0.0"
+    string_decoder "~0.10.0"
+    subarg "^1.0.0"
+    syntax-error "^1.1.1"
+    through2 "^2.0.0"
+    timers-browserify "^1.0.1"
+    tty-browserify "~0.0.0"
+    url "~0.11.0"
+    util "~0.10.1"
+    vm-browserify "~0.0.1"
+    xtend "^4.0.0"
+
+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.1.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-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"
+
+cached-path-relative@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.1.tgz#d09c4b52800aa4c078e2dd81a869aac90d2e54e7"
+
+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"
+
+combine-source-map@~0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.7.2.tgz#0870312856b307a87cc4ac486f3a9a62aeccc09e"
+  dependencies:
+    convert-source-map "~1.1.0"
+    inline-source-map "~0.6.0"
+    lodash.memoize "~3.0.3"
+    source-map "~0.5.3"
+
+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, concat-stream@~1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
+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"
+
+constants-browserify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+convert-source-map@~1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
+
+core-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"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hash@^1.2.0:
+  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.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  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-hmac@^1.1.7:
+  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"
+
+crypto-browserify@^3.0.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  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"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+deps-sort@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/deps-sort/-/deps-sort-2.0.0.tgz#091724902e84658260eb910748cccd1af6e21fb5"
+  dependencies:
+    JSONStream "^1.0.3"
+    shasum "^1.0.0"
+    subarg "^1.0.0"
+    through2 "^2.0.0"
+
+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"
+
+detective@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.5.0.tgz#6e5a8c6b26e6c7a254b1c6b6d7490d98ec91edd1"
+  dependencies:
+    acorn "^4.0.3"
+    defined "^1.0.0"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+domain-browser@~1.1.0:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  dependencies:
+    readable-stream "^2.0.2"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  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"
+
+elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+envify@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
+  dependencies:
+    esprima "^4.0.0"
+    through "~2.3.4"
+
+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
+events@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+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"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+function-bind@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+glob@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+has@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.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.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
+  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"
+
+htmlescape@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
+
+https-browserify@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.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"
+
+inline-source-map@~0.6.0:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/inline-source-map/-/inline-source-map-0.6.2.tgz#f9393471c18a79d1724f863fa38b586370ade2a5"
+  dependencies:
+    source-map "~0.5.3"
+
+insert-module-globals@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-7.0.1.tgz#c03bf4e01cb086d5b5e5ace8ad0afe7889d638c3"
+  dependencies:
+    JSONStream "^1.0.3"
+    combine-source-map "~0.7.1"
+    concat-stream "~1.5.1"
+    is-buffer "^1.1.0"
+    lexical-scope "^1.2.0"
+    process "~0.11.0"
+    through2 "^2.0.0"
+    xtend "^4.0.0"
+
+is-buffer@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isarray@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+json-stable-stringify@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
+  dependencies:
+    jsonify "~0.0.0"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+
+labeled-stream-splicer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/labeled-stream-splicer/-/labeled-stream-splicer-2.0.0.tgz#a52e1d138024c00b86b1c0c91f677918b8ae0a59"
+  dependencies:
+    inherits "^2.0.1"
+    isarray "~0.0.1"
+    stream-splicer "^2.0.0"
+
+lexical-scope@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/lexical-scope/-/lexical-scope-1.2.0.tgz#fcea5edc704a4b3a8796cdca419c3a0afaf22df4"
+  dependencies:
+    astw "^2.0.0"
+
+lodash.memoize@~3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+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"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+module-deps@^4.0.8:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-4.1.1.tgz#23215833f1da13fd606ccb8087b44852dcb821fd"
+  dependencies:
+    JSONStream "^1.0.3"
+    browser-resolve "^1.7.0"
+    cached-path-relative "^1.0.0"
+    concat-stream "~1.5.0"
+    defined "^1.0.0"
+    detective "^4.0.0"
+    duplexer2 "^0.1.2"
+    inherits "^2.0.1"
+    parents "^1.0.0"
+    readable-stream "^2.0.2"
+    resolve "^1.1.3"
+    stream-combiner2 "^1.1.1"
+    subarg "^1.0.0"
+    through2 "^2.0.0"
+    xtend "^4.0.0"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+os-browserify@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parents@^1.0.0, parents@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parents/-/parents-1.0.1.tgz#fedd4d2bf193a77745fe71e371d73c3307d9c751"
+  dependencies:
+    path-platform "~0.11.15"
+
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  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-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+path-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+path-platform@~0.11.15:
+  version "0.11.15"
+  resolved "https://registry.yarnpkg.com/path-platform/-/path-platform-0.11.15.tgz#e864217f74c36850f0852b78dc7bf7d4a5721bf2"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  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"
+
+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"
+
+process@~0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.3.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+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"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+read-only-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
+  dependencies:
+    readable-stream "^2.0.2"
+
+readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@~2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+resolve@^1.1.3, resolve@^1.1.4:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+  dependencies:
+    path-parse "^1.0.5"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, 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.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shasum@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shasum/-/shasum-1.0.2.tgz#e7012310d8f417f4deb5712150e5678b87ae565f"
+  dependencies:
+    json-stable-stringify "~0.0.0"
+    sha.js "~2.4.4"
+
+shell-quote@^1.6.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
+
+source-map@~0.5.3:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+stream-browserify@^2.0.0:
+  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-combiner2@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
+  dependencies:
+    duplexer2 "~0.1.0"
+    readable-stream "^2.0.2"
+
+stream-http@^2.0.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-splicer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stream-splicer/-/stream-splicer-2.0.0.tgz#1b63be438a133e4b671cc1935197600175910d83"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
+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.0, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
+syntax-error@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/syntax-error/-/syntax-error-1.3.0.tgz#1ed9266c4d40be75dc55bf9bb1cb77062bb96ca1"
+  dependencies:
+    acorn "^4.0.3"
+
+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.2.7 <3", through@~2.3.4:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tty-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+typedarray@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+umd@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
+
+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"
+
+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@0.10.3, util@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+vm-browserify@~0.0.1:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
diff --git a/fixtures/packaging/brunch/dev/.gitignore b/fixtures/packaging/brunch/dev/.gitignore
new file mode 100644
index 00000000000..b8d1dfad58f
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/.gitignore
@@ -0,0 +1,2 @@
+output.js
+output.js.map
\ No newline at end of file
diff --git a/fixtures/packaging/brunch/dev/app/initialize.js b/fixtures/packaging/brunch/dev/app/initialize.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/app/initialize.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/brunch/dev/config.js b/fixtures/packaging/brunch/dev/config.js
new file mode 100644
index 00000000000..ba12fc72c23
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/config.js
@@ -0,0 +1,10 @@
+exports.config = {
+  paths: {
+    public: '.',
+  },
+  files: {
+    javascripts: {
+      joinTo: 'output.js',
+    },
+  },
+};
diff --git a/fixtures/packaging/brunch/dev/index.html b/fixtures/packaging/brunch/dev/index.html
new file mode 100644
index 00000000000..5902a1a6905
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+    <script>require('initialize');</script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/brunch/dev/input.js b/fixtures/packaging/brunch/dev/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/brunch/dev/package.json b/fixtures/packaging/brunch/dev/package.json
new file mode 100644
index 00000000000..036befab859
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "brunch-dev-fixture",
+  "devDependencies": {
+    "brunch": "^2.9.1",
+    "javascript-brunch": "^2.0.0"
+  },
+  "scripts": {
+    "build": "rm -rf public && brunch build",
+    "prebuild": "cp -r ../../../../build/oss-experimental/* ./node_modules/"
+  }
+}
diff --git a/fixtures/packaging/brunch/dev/yarn.lock b/fixtures/packaging/brunch/dev/yarn.lock
new file mode 100644
index 00000000000..35c7f8bea35
--- /dev/null
+++ b/fixtures/packaging/brunch/dev/yarn.lock
@@ -0,0 +1,2158 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@~1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+acorn@^4.0.3:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+ansicolors@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
+
+anymatch@^1.3.0, anymatch@~1.3, 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"
+
+anysort@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/anysort/-/anysort-1.0.1.tgz#341bd5d5ba1485f64e55ae865f1d45994b507fc4"
+  dependencies:
+    anymatch "~1.3.0"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+assert@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.3.0.tgz#03939a622582a812cc202320a0b9a56c9b815849"
+  dependencies:
+    util "0.10.3"
+
+async-each@^1.0.0, async-each@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+
+bn.js@^5.0.0, bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+
+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"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+bower-config@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/bower-config/-/bower-config-1.4.1.tgz#85fd9df367c2b8dbbd0caa4c5f2bad40cd84c2cc"
+  dependencies:
+    graceful-fs "^4.1.3"
+    mout "^1.0.0"
+    optimist "^0.6.1"
+    osenv "^0.1.3"
+    untildify "^2.1.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-resolve@^1.11.1:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  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.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+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-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+brunch-skeletons@~0.1.4:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/brunch-skeletons/-/brunch-skeletons-0.1.6.tgz#f15102a1b6babc964ce3d7e3c141dc0daa9d28ac"
+
+brunch@^2.9.1:
+  version "2.10.12"
+  resolved "https://registry.yarnpkg.com/brunch/-/brunch-2.10.12.tgz#3aa0c515c216beb2e53a0c35a30546d0a04cee50"
+  dependencies:
+    anymatch "~1.3"
+    anysort "~1.0"
+    check-dependencies "~1.0.1"
+    chokidar "^1.6"
+    coffee-script "~1.12.7"
+    commander "~2.9"
+    commonjs-require-definition "~0.6.2"
+    debug "~2.2"
+    deppack "~0.7"
+    deps-install "~0.1"
+    fcache "~0.3"
+    init-skeleton "~1.0"
+    loggy "~1.0.2"
+    micro-es7-shim "^0.1"
+    micro-promisify "~0.1"
+    mkdirp "~0.5"
+    promise.prototype.finally "^2"
+    read-components "~0.7"
+    serve-brunch "~0.2"
+    since-app-start "~0.3"
+    skemata "~0.1"
+    source-map "~0.5"
+    universal-path "^0.1"
+
+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.3.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.3.1.tgz#0e65fd01cc3e9154d152f6b3c934b5b8a1b6733c"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-status-codes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chalk@^1.1.1, 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"
+
+check-dependencies@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/check-dependencies/-/check-dependencies-1.0.1.tgz#9e7f15822de20621ec6b9ffaabac4d588c3811b0"
+  dependencies:
+    bower-config "^1.4.0"
+    chalk "^1.1.3"
+    findup-sync "^0.4.2"
+    lodash.camelcase "^4.3.0"
+    minimist "^1.2.0"
+    semver "^5.3.0"
+
+chokidar@^1.6:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+coffee-script@~1.12.7:
+  version "1.12.7"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^2.0.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
+commander@~2.9:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commonjs-require-definition@~0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/commonjs-require-definition/-/commonjs-require-definition-0.6.2.tgz#1b66a1babe602605c1ee0a6d86e2e26799ca7cec"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+connect-slashes@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/connect-slashes/-/connect-slashes-1.3.1.tgz#95d61830d0f9d5853c8688f0b5f43988b186ac37"
+
+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"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+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"
+
+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"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hash@^1.2.0:
+  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.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  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-hmac@^1.1.7:
+  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"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@~3.11.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  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"
+
+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"
+
+debug@2.6.9, debug@^2.2, debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+deep-assign@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-2.0.0.tgz#ebe06b1f07f08dae597620e3dd1622f371a1c572"
+  dependencies:
+    is-obj "^1.0.0"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+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, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+deppack@~0.7:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/deppack/-/deppack-0.7.0.tgz#fbb84f9a531ace2f28289092afc0568295c790b7"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    browser-resolve "^1.11.1"
+    deep-assign "^2.0.0"
+    detective "^4.3.1"
+    glob "^7.0.3"
+    loggy "~0.3.0"
+    micro-promisify "^0.1.1"
+    node-browser-modules "^0.1.0"
+    "true-case-path" "^1.0.2"
+
+deps-install@~0.1, deps-install@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/deps-install/-/deps-install-0.1.1.tgz#324af2e617ac04fb7ef4be7d6099ea3a102f6119"
+  dependencies:
+    loggy "^1"
+    micro-promisify "~0.1.0"
+
+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-file@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-0.1.0.tgz#4935dedfd9488648e006b0129566e9386711ea63"
+  dependencies:
+    fs-exists-sync "^0.1.0"
+
+detective@^4.3.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.5.0.tgz#6e5a8c6b26e6c7a254b1c6b6d7490d98ec91edd1"
+  dependencies:
+    acorn "^4.0.3"
+    defined "^1.0.0"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+domain-browser@~1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.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"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  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"
+
+elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+es-abstract@^1.6.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  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:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+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.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esprima@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+events@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+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"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expand-tilde@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-1.2.2.tgz#0b81eba897e5a3d31d1c3d102f8f01441e559449"
+  dependencies:
+    os-homedir "^1.0.1"
+
+express@^4.0.0:
+  version "4.16.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
+  dependencies:
+    accepts "~1.3.4"
+    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.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.0"
+    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.2"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.1"
+    serve-static "1.13.1"
+    setprototypeof "1.1.0"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+fast-levenshtein@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
+
+fcache@~0.3:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fcache/-/fcache-0.3.0.tgz#d45f2f908642b91b798e88195ec47881a51c3d44"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+findup-sync@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.4.3.tgz#40043929e7bc60adf0b7f4827c4c6e75a0deca12"
+  dependencies:
+    detect-file "^0.1.0"
+    is-glob "^2.0.1"
+    micromatch "^2.3.7"
+    resolve-dir "^0.1.0"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  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"
+
+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.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    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"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2, 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"
+
+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"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3, glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-0.2.3.tgz#ea5a3bed42c6d6ce995a4f8a1269b5dae223828d"
+  dependencies:
+    global-prefix "^0.1.4"
+    is-windows "^0.2.0"
+
+global-prefix@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-0.1.5.tgz#8d3bc6b8da3ca8112a160d8d496ff0462bfef78f"
+  dependencies:
+    homedir-polyfill "^1.0.0"
+    ini "^1.3.4"
+    is-windows "^0.2.0"
+    which "^1.2.12"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.3:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+growl@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/growl/-/growl-1.8.1.tgz#4b2dec8d907e93db336624dcec0183502f8c9428"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+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-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.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.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
+  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"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+homedir-polyfill@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+http-errors@1.6.2, 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-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.0, 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"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+init-skeleton@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/init-skeleton/-/init-skeleton-1.0.1.tgz#310ab730ad3a54b03dc4b08d699d576674ae11c8"
+  dependencies:
+    brunch-skeletons "~0.1.4"
+    deps-install "~0.1.0"
+    hosted-git-info "~2.1.4"
+    micro-promisify "~0.1.0"
+    mkdirp "~0.5.0"
+    ncp "^2.0.0"
+    normalize-git-url "~3.0.1"
+
+ipaddr.js@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+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-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-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+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-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+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@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+javascript-brunch@^2.0.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/javascript-brunch/-/javascript-brunch-2.10.0.tgz#826920035b4368f14a678254d15f83e2f4101172"
+  dependencies:
+    esprima "~3.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+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"
+
+kind-of@^3.0.2:
+  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"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+loggy@^1, loggy@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/loggy/-/loggy-1.0.2.tgz#d0ca31c421395f8c462d04870dd2228de3c4e219"
+  dependencies:
+    chalk "^1.1.1"
+    native-notifier "~0.1.0"
+
+loggy@~0.3.0:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/loggy/-/loggy-0.3.5.tgz#33f12801b1f6063966ea79d9b6a25db8fcbc4107"
+  dependencies:
+    ansicolors "~0.3.2"
+    growl "~1.8.1"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micro-es7-shim@^0.1:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/micro-es7-shim/-/micro-es7-shim-0.1.0.tgz#aa9989a2f93037a93e7b30e2c92433db0b4ca228"
+
+micro-promisify@^0.1.1, micro-promisify@~0.1, micro-promisify@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/micro-promisify/-/micro-promisify-0.1.1.tgz#071da590b4956560dedf4aae7044729c1a28902d"
+
+micromatch@^2.1.5, micromatch@^2.3.7:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.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.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, 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.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.1, mkdirp@~0.5, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+mout@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/mout/-/mout-1.2.4.tgz#9ffd261c4d6509e7ebcbf6b641a89b36ecdf8155"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+native-notifier@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/native-notifier/-/native-notifier-0.1.1.tgz#0f719731a410a7a243409eaba10a1446c2df831a"
+  dependencies:
+    tag-shell "~0.1.0"
+
+ncp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-browser-modules@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/node-browser-modules/-/node-browser-modules-0.1.0.tgz#4193cbb70f542759a5e4e6d6b01ccb638e99a1ac"
+  dependencies:
+    assert "~1.3.0"
+    buffer "~4.3.0"
+    crypto-browserify "~3.11.0"
+    domain-browser "~1.1.7"
+    events "~1.1.0"
+    https-browserify "~0.0.1"
+    os-browserify "~0.2.0"
+    path-browserify "~0.0.0"
+    process "~0.11.2"
+    punycode "~1.4.0"
+    querystring-es3 "~0.2.1"
+    readable-stream "~2.0.5"
+    stream-browserify "~2.0.1"
+    stream-http "~2.1.0"
+    string_decoder "~0.10.31"
+    timers-browserify "~1.4.2"
+    tty-browserify "~0.0.0"
+    url "~0.11.0"
+    util "~0.10.3"
+    vm-browserify "~0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.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-git-url@~3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-git-url/-/normalize-git-url-3.0.2.tgz#8e5f14be0bdaedb73e07200310aa416c27350fc4"
+
+normalize-path@^2.0.0, normalize-path@^2.0.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"
+
+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"
+
+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"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+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"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+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"
+
+os-browserify@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.3, osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  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-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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-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"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  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@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@~0.11.0, process@~0.11.2:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+promise.prototype.finally@^2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-2.0.1.tgz#b70d44ceb3825fa88004b5d1fbd906b3b7d9b758"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+
+proxy-addr@~2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.5.2"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.4.1, punycode@~1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+pushserve@^1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pushserve/-/pushserve-1.0.2.tgz#fdfb803939ca33752d38f2d1aa975ac01a93253f"
+  dependencies:
+    commander "^2.0.0"
+    connect-slashes "^1.3.1"
+    express "^4.0.0"
+    serve-static "^1.10.0"
+
+qs@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@~6.4.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6"
+
+querystring-es3@~0.2.1:
+  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"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+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"
+
+rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-components@~0.7:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/read-components/-/read-components-0.7.0.tgz#77dce7adcb72a514240c47a675b9bcf7a3509dd9"
+  dependencies:
+    async-each "~1.0.0"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+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"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+resolve-dir@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
+  dependencies:
+    expand-tilde "^1.2.2"
+    global-modules "^0.2.3"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+rimraf@2, rimraf@^2.5.1, 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"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, 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.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+send@0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    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.3.1"
+
+serve-brunch@~0.2:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/serve-brunch/-/serve-brunch-0.2.0.tgz#2f9b750ba898983ef0838b94e38ea4eed88e3c55"
+  dependencies:
+    debug "^2.2"
+    loggy "^1"
+    pushserve "^1"
+
+serve-static@1.13.1, serve-static@^1.10.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.1"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+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"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+since-app-start@~0.3:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/since-app-start/-/since-app-start-0.3.2.tgz#c59158fbfc86a5dc23bbdd7c4de1480fbb55d089"
+  dependencies:
+    debug "~2.2.0"
+
+skemata@~0.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/skemata/-/skemata-0.1.2.tgz#f3c521029b67be6e0825f0df867ee97916de4530"
+  dependencies:
+    fast-levenshtein "^1.1.3"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-map@~0.5:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+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-http@~2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.1.1.tgz#3b880303babe036d6f6b43127d4dcd6f8893e1db"
+  dependencies:
+    builtin-status-codes "^2.0.0"
+    inherits "^2.0.1"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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_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.31, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+tag-shell@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tag-shell/-/tag-shell-0.1.0.tgz#e743816e6a6e805ac3735f4162e016b97a7ddfbd"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@~1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
+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-is@~1.6.15:
+  version "1.6.15"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.15"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+universal-path@^0.1:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/universal-path/-/universal-path-0.1.0.tgz#0fca24c936ea3d2282013d143710c06687ed0677"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+untildify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-2.1.0.tgz#17eb2807987f76952e9c0485fc311d06a826a2e0"
+  dependencies:
+    os-homedir "^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"
+
+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@0.10.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"
+
+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.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+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@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+which@^1.2.12:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  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"
+  dependencies:
+    string-width "^1.0.2"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
diff --git a/fixtures/packaging/brunch/prod/.gitignore b/fixtures/packaging/brunch/prod/.gitignore
new file mode 100644
index 00000000000..b8d1dfad58f
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/.gitignore
@@ -0,0 +1,2 @@
+output.js
+output.js.map
\ No newline at end of file
diff --git a/fixtures/packaging/brunch/prod/app/initialize.js b/fixtures/packaging/brunch/prod/app/initialize.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/app/initialize.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/brunch/prod/config.js b/fixtures/packaging/brunch/prod/config.js
new file mode 100644
index 00000000000..ba12fc72c23
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/config.js
@@ -0,0 +1,10 @@
+exports.config = {
+  paths: {
+    public: '.',
+  },
+  files: {
+    javascripts: {
+      joinTo: 'output.js',
+    },
+  },
+};
diff --git a/fixtures/packaging/brunch/prod/index.html b/fixtures/packaging/brunch/prod/index.html
new file mode 100644
index 00000000000..5902a1a6905
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+    <script>require('initialize');</script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/brunch/prod/input.js b/fixtures/packaging/brunch/prod/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/brunch/prod/package.json b/fixtures/packaging/brunch/prod/package.json
new file mode 100644
index 00000000000..2d2a9a304be
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "brunch-prod-fixture",
+  "devDependencies": {
+    "brunch": "^2.9.1",
+    "javascript-brunch": "^2.0.0"
+  },
+  "scripts": {
+    "build": "rm -rf public && brunch build -p",
+    "prebuild": "cp -r ../../../../build/oss-experimental/* ./node_modules/"
+  }
+}
diff --git a/fixtures/packaging/brunch/prod/yarn.lock b/fixtures/packaging/brunch/prod/yarn.lock
new file mode 100644
index 00000000000..654281be451
--- /dev/null
+++ b/fixtures/packaging/brunch/prod/yarn.lock
@@ -0,0 +1,2158 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+accepts@~1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  dependencies:
+    mime-types "~2.1.16"
+    negotiator "0.6.1"
+
+acorn@^4.0.3:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+ansicolors@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
+
+anymatch@^1.3.0, anymatch@~1.3, 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"
+
+anysort@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/anysort/-/anysort-1.0.1.tgz#341bd5d5ba1485f64e55ae865f1d45994b507fc4"
+  dependencies:
+    anymatch "~1.3.0"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+assert@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.3.0.tgz#03939a622582a812cc202320a0b9a56c9b815849"
+  dependencies:
+    util "0.10.3"
+
+async-each@^1.0.0, async-each@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+
+bn.js@^5.0.0, bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+
+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"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+bower-config@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/bower-config/-/bower-config-1.4.1.tgz#85fd9df367c2b8dbbd0caa4c5f2bad40cd84c2cc"
+  dependencies:
+    graceful-fs "^4.1.3"
+    mout "^1.0.0"
+    optimist "^0.6.1"
+    osenv "^0.1.3"
+    untildify "^2.1.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+
+browser-resolve@^1.11.1:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  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.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+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-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+brunch-skeletons@~0.1.4:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/brunch-skeletons/-/brunch-skeletons-0.1.6.tgz#f15102a1b6babc964ce3d7e3c141dc0daa9d28ac"
+
+brunch@^2.9.1:
+  version "2.10.12"
+  resolved "https://registry.yarnpkg.com/brunch/-/brunch-2.10.12.tgz#3aa0c515c216beb2e53a0c35a30546d0a04cee50"
+  dependencies:
+    anymatch "~1.3"
+    anysort "~1.0"
+    check-dependencies "~1.0.1"
+    chokidar "^1.6"
+    coffee-script "~1.12.7"
+    commander "~2.9"
+    commonjs-require-definition "~0.6.2"
+    debug "~2.2"
+    deppack "~0.7"
+    deps-install "~0.1"
+    fcache "~0.3"
+    init-skeleton "~1.0"
+    loggy "~1.0.2"
+    micro-es7-shim "^0.1"
+    micro-promisify "~0.1"
+    mkdirp "~0.5"
+    promise.prototype.finally "^2"
+    read-components "~0.7"
+    serve-brunch "~0.2"
+    since-app-start "~0.3"
+    skemata "~0.1"
+    source-map "~0.5"
+    universal-path "^0.1"
+
+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.3.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.3.1.tgz#0e65fd01cc3e9154d152f6b3c934b5b8a1b6733c"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-status-codes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chalk@^1.1.1, 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"
+
+check-dependencies@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/check-dependencies/-/check-dependencies-1.0.1.tgz#9e7f15822de20621ec6b9ffaabac4d588c3811b0"
+  dependencies:
+    bower-config "^1.4.0"
+    chalk "^1.1.3"
+    findup-sync "^0.4.2"
+    lodash.camelcase "^4.3.0"
+    minimist "^1.2.0"
+    semver "^5.3.0"
+
+chokidar@^1.6:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+coffee-script@~1.12.7:
+  version "1.12.7"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^2.0.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
+commander@~2.9:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commonjs-require-definition@~0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/commonjs-require-definition/-/commonjs-require-definition-0.6.2.tgz#1b66a1babe602605c1ee0a6d86e2e26799ca7cec"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+connect-slashes@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/connect-slashes/-/connect-slashes-1.3.1.tgz#95d61830d0f9d5853c8688f0b5f43988b186ac37"
+
+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"
+
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+
+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"
+
+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"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hash@^1.2.0:
+  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.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  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-hmac@^1.1.7:
+  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"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@~3.11.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  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"
+
+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"
+
+debug@2.6.9, debug@^2.2, debug@^2.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@~2.2, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+deep-assign@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-2.0.0.tgz#ebe06b1f07f08dae597620e3dd1622f371a1c572"
+  dependencies:
+    is-obj "^1.0.0"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+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, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
+deppack@~0.7:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/deppack/-/deppack-0.7.0.tgz#fbb84f9a531ace2f28289092afc0568295c790b7"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    browser-resolve "^1.11.1"
+    deep-assign "^2.0.0"
+    detective "^4.3.1"
+    glob "^7.0.3"
+    loggy "~0.3.0"
+    micro-promisify "^0.1.1"
+    node-browser-modules "^0.1.0"
+    "true-case-path" "^1.0.2"
+
+deps-install@~0.1, deps-install@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/deps-install/-/deps-install-0.1.1.tgz#324af2e617ac04fb7ef4be7d6099ea3a102f6119"
+  dependencies:
+    loggy "^1"
+    micro-promisify "~0.1.0"
+
+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-file@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-0.1.0.tgz#4935dedfd9488648e006b0129566e9386711ea63"
+  dependencies:
+    fs-exists-sync "^0.1.0"
+
+detective@^4.3.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.5.0.tgz#6e5a8c6b26e6c7a254b1c6b6d7490d98ec91edd1"
+  dependencies:
+    acorn "^4.0.3"
+    defined "^1.0.0"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+domain-browser@~1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.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"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  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"
+
+elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+es-abstract@^1.6.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  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:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+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.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esprima@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+
+events@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+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"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expand-tilde@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-1.2.2.tgz#0b81eba897e5a3d31d1c3d102f8f01441e559449"
+  dependencies:
+    os-homedir "^1.0.1"
+
+express@^4.0.0:
+  version "4.16.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
+  dependencies:
+    accepts "~1.3.4"
+    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.1"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.1.0"
+    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.2"
+    qs "6.5.1"
+    range-parser "~1.2.0"
+    safe-buffer "5.1.1"
+    send "0.16.1"
+    serve-static "1.13.1"
+    setprototypeof "1.1.0"
+    statuses "~1.3.1"
+    type-is "~1.6.15"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+fast-levenshtein@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
+
+fcache@~0.3:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fcache/-/fcache-0.3.0.tgz#d45f2f908642b91b798e88195ec47881a51c3d44"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+findup-sync@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.4.3.tgz#40043929e7bc60adf0b7f4827c4c6e75a0deca12"
+  dependencies:
+    detect-file "^0.1.0"
+    is-glob "^2.0.1"
+    micromatch "^2.3.7"
+    resolve-dir "^0.1.0"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  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"
+
+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.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    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"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+
+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"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2, 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"
+
+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"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3, glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-0.2.3.tgz#ea5a3bed42c6d6ce995a4f8a1269b5dae223828d"
+  dependencies:
+    global-prefix "^0.1.4"
+    is-windows "^0.2.0"
+
+global-prefix@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-0.1.5.tgz#8d3bc6b8da3ca8112a160d8d496ff0462bfef78f"
+  dependencies:
+    homedir-polyfill "^1.0.0"
+    ini "^1.3.4"
+    is-windows "^0.2.0"
+    which "^1.2.12"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.3:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+growl@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/growl/-/growl-1.8.1.tgz#4b2dec8d907e93db336624dcec0183502f8c9428"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+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-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.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.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
+  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"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+homedir-polyfill@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+http-errors@1.6.2, 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-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@0.4.19:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.0, 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"
+
+ini@^1.3.4, ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+init-skeleton@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/init-skeleton/-/init-skeleton-1.0.1.tgz#310ab730ad3a54b03dc4b08d699d576674ae11c8"
+  dependencies:
+    brunch-skeletons "~0.1.4"
+    deps-install "~0.1.0"
+    hosted-git-info "~2.1.4"
+    micro-promisify "~0.1.0"
+    mkdirp "~0.5.0"
+    ncp "^2.0.0"
+    normalize-git-url "~3.0.1"
+
+ipaddr.js@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+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-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-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+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-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+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@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+javascript-brunch@^2.0.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/javascript-brunch/-/javascript-brunch-2.10.0.tgz#826920035b4368f14a678254d15f83e2f4101172"
+  dependencies:
+    esprima "~3.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+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"
+
+kind-of@^3.0.2:
+  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"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+loggy@^1, loggy@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/loggy/-/loggy-1.0.2.tgz#d0ca31c421395f8c462d04870dd2228de3c4e219"
+  dependencies:
+    chalk "^1.1.1"
+    native-notifier "~0.1.0"
+
+loggy@~0.3.0:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/loggy/-/loggy-0.3.5.tgz#33f12801b1f6063966ea79d9b6a25db8fcbc4107"
+  dependencies:
+    ansicolors "~0.3.2"
+    growl "~1.8.1"
+
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micro-es7-shim@^0.1:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/micro-es7-shim/-/micro-es7-shim-0.1.0.tgz#aa9989a2f93037a93e7b30e2c92433db0b4ca228"
+
+micro-promisify@^0.1.1, micro-promisify@~0.1, micro-promisify@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/micro-promisify/-/micro-promisify-0.1.1.tgz#071da590b4956560dedf4aae7044729c1a28902d"
+
+micromatch@^2.1.5, micromatch@^2.3.7:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.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.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+mime@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+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@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, 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.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.1, mkdirp@~0.5, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+mout@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mout/-/mout-1.1.0.tgz#0b29d41e6a80fa9e2d4a5be9d602e1d9d02177f6"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+native-notifier@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/native-notifier/-/native-notifier-0.1.1.tgz#0f719731a410a7a243409eaba10a1446c2df831a"
+  dependencies:
+    tag-shell "~0.1.0"
+
+ncp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-browser-modules@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/node-browser-modules/-/node-browser-modules-0.1.0.tgz#4193cbb70f542759a5e4e6d6b01ccb638e99a1ac"
+  dependencies:
+    assert "~1.3.0"
+    buffer "~4.3.0"
+    crypto-browserify "~3.11.0"
+    domain-browser "~1.1.7"
+    events "~1.1.0"
+    https-browserify "~0.0.1"
+    os-browserify "~0.2.0"
+    path-browserify "~0.0.0"
+    process "~0.11.2"
+    punycode "~1.4.0"
+    querystring-es3 "~0.2.1"
+    readable-stream "~2.0.5"
+    stream-browserify "~2.0.1"
+    stream-http "~2.1.0"
+    string_decoder "~0.10.31"
+    timers-browserify "~1.4.2"
+    tty-browserify "~0.0.0"
+    url "~0.11.0"
+    util "~0.10.3"
+    vm-browserify "~0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.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-git-url@~3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-git-url/-/normalize-git-url-3.0.2.tgz#8e5f14be0bdaedb73e07200310aa416c27350fc4"
+
+normalize-path@^2.0.0, normalize-path@^2.0.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"
+
+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"
+
+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"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+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"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+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"
+
+os-browserify@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@^0.1.3, osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  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-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+
+path-browserify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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-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"
+
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  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@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@~0.11.0, process@~0.11.2:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+promise.prototype.finally@^2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-2.0.1.tgz#b70d44ceb3825fa88004b5d1fbd906b3b7d9b758"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+
+proxy-addr@~2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.5.2"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.4.1, punycode@~1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+pushserve@^1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pushserve/-/pushserve-1.0.2.tgz#fdfb803939ca33752d38f2d1aa975ac01a93253f"
+  dependencies:
+    commander "^2.0.0"
+    connect-slashes "^1.3.1"
+    express "^4.0.0"
+    serve-static "^1.10.0"
+
+qs@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+querystring-es3@~0.2.1:
+  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"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
+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"
+
+rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+read-components@~0.7:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/read-components/-/read-components-0.7.0.tgz#77dce7adcb72a514240c47a675b9bcf7a3509dd9"
+  dependencies:
+    async-each "~1.0.0"
+
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+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"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+resolve-dir@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
+  dependencies:
+    expand-tilde "^1.2.2"
+    global-modules "^0.2.3"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+rimraf@2, rimraf@^2.5.1, 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"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  dependencies:
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
+
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, 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.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
+safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+send@0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    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.3.1"
+
+serve-brunch@~0.2:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/serve-brunch/-/serve-brunch-0.2.0.tgz#2f9b750ba898983ef0838b94e38ea4eed88e3c55"
+  dependencies:
+    debug "^2.2"
+    loggy "^1"
+    pushserve "^1"
+
+serve-static@1.13.1, serve-static@^1.10.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.1"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+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"
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+since-app-start@~0.3:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/since-app-start/-/since-app-start-0.3.2.tgz#c59158fbfc86a5dc23bbdd7c4de1480fbb55d089"
+  dependencies:
+    debug "~2.2.0"
+
+skemata@~0.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/skemata/-/skemata-0.1.2.tgz#f3c521029b67be6e0825f0df867ee97916de4530"
+  dependencies:
+    fast-levenshtein "^1.1.3"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-map@~0.5:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+
+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-http@~2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.1.1.tgz#3b880303babe036d6f6b43127d4dcd6f8893e1db"
+  dependencies:
+    builtin-status-codes "^2.0.0"
+    inherits "^2.0.1"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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_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.31, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+tag-shell@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tag-shell/-/tag-shell-0.1.0.tgz#e743816e6a6e805ac3735f4162e016b97a7ddfbd"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@~1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
+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-is@~1.6.15:
+  version "1.6.15"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.15"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+universal-path@^0.1:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/universal-path/-/universal-path-0.1.0.tgz#0fca24c936ea3d2282013d143710c06687ed0677"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+untildify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-2.1.0.tgz#17eb2807987f76952e9c0485fc311d06a826a2e0"
+  dependencies:
+    os-homedir "^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"
+
+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@0.10.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"
+
+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.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+
+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@~0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+which@^1.2.12:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  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"
+  dependencies:
+    string-width "^1.0.2"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
diff --git a/fixtures/packaging/build-all.js b/fixtures/packaging/build-all.js
new file mode 100644
index 00000000000..62f7170b619
--- /dev/null
+++ b/fixtures/packaging/build-all.js
@@ -0,0 +1,48 @@
+const fs = require('fs');
+const path = require('path');
+const child_process = require('child_process');
+
+const fixtureDirs = fs.readdirSync(__dirname).filter(file => {
+  return fs.statSync(path.join(__dirname, file)).isDirectory();
+});
+
+const cmdArgs = [
+  {cmd: 'yarn', args: ['install']},
+  {cmd: 'yarn', args: ['build']},
+];
+
+function buildFixture(cmdArg, path) {
+  const opts = {
+    cwd: path,
+    stdio: 'inherit',
+  };
+  const result = child_process.spawnSync(cmdArg.cmd, cmdArg.args, opts);
+  if (result.status !== 0) {
+    throw new Error(`Failed to build fixtures!`);
+  }
+}
+
+fixtureDirs.forEach(dir => {
+  cmdArgs.forEach(cmdArg => {
+    // we only care about directories that have DEV and PROD directories in
+    // otherwise they don't need to be built
+    const devPath = path.join(__dirname, dir, 'dev');
+
+    if (fs.existsSync(devPath)) {
+      buildFixture(cmdArg, devPath);
+    }
+    const prodPath = path.join(__dirname, dir, 'prod');
+
+    if (fs.existsSync(prodPath)) {
+      buildFixture(cmdArg, prodPath);
+    }
+  });
+});
+
+console.log('-------------------------');
+console.log('All fixtures were built!');
+console.log('Now ensure all frames display a welcome message:');
+console.log('  npm install -g serve');
+console.log('  serve ../..');
+console.log('  open http://localhost:5000/fixtures/packaging/');
+console.log('-------------------------');
diff --git a/fixtures/packaging/globals/dev.html b/fixtures/packaging/globals/dev.html
new file mode 100644
index 00000000000..981d2cab0a3
--- /dev/null
+++ b/fixtures/packaging/globals/dev.html
@@ -0,0 +1,13 @@
+<html>
+  <body>
+    <script src="../../../build/oss-experimental/react/umd/react.development.js"></script>
+    <script src="../../../build/oss-experimental/react-dom/umd/react-dom.development.js"></script>
+    <div id="container"></div>
+    <script>
+      ReactDOM.render(
+        React.createElement('h1', null, 'Hello World!'),
+        document.getElementById('container')
+      );
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/globals/prod.html b/fixtures/packaging/globals/prod.html
new file mode 100644
index 00000000000..b80aabbebc0
--- /dev/null
+++ b/fixtures/packaging/globals/prod.html
@@ -0,0 +1,13 @@
+<html>
+  <body>
+    <script src="../../../build/oss-experimental/react/umd/react.production.min.js"></script>
+    <script src="../../../build/oss-experimental/react-dom/umd/react-dom.production.min.js"></script>
+    <div id="container"></div>
+    <script>
+      ReactDOM.render(
+        React.createElement('h1', null, 'Hello World!'),
+        document.getElementById('container')
+      );
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/index.html b/fixtures/packaging/index.html
new file mode 100644
index 00000000000..6c106acffd0
--- /dev/null
+++ b/fixtures/packaging/index.html
@@ -0,0 +1,92 @@
+<html>
+  <head>
+    <style>
+      .frame {
+        display: block;
+        float: left;
+        width: 350px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>bundle packaging</h1>
+    <p>If you see Hello World in each frame with no console errors, all is well!</p>
+    <div class="frame">
+      <h2>babel-standalone (dev only)</h2>
+      <iframe src="/fixtures/packaging/babel-standalone/dev.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>globals (dev)</h2>
+      <iframe src="/fixtures/packaging/globals/dev.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>globals (prod)</h2>
+      <iframe src="/fixtures/packaging/globals/prod.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>requirejs (dev)</h2>
+      <iframe src="/fixtures/packaging/requirejs/dev.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>requirejs (prod)</h2>
+      <iframe src="/fixtures/packaging/requirejs/prod.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>systemjs (dev)</h2>
+      <iframe src="/fixtures/packaging/systemjs/dev.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>systemjs (prod)</h2>
+      <iframe src="/fixtures/packaging/systemjs/dev.html"></iframe>
+    </div>
+    <div class="frame">
+      <h2>browserify (dev)</h2>
+      <iframe src="/fixtures/packaging/browserify/dev/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>browserify (prod)</h2>
+      <iframe src="/fixtures/packaging/browserify/prod/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>brunch (dev)</h2>
+      <iframe src="/fixtures/packaging/brunch/dev/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>brunch (prod)</h2>
+      <iframe src="/fixtures/packaging/brunch/prod/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>rjs (dev)</h2>
+      <iframe src="/fixtures/packaging/rjs/dev/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>rjs (prod)</h2>
+      <iframe src="/fixtures/packaging/rjs/prod/"></iframe>
+    </div>    
+    <div class="frame">
+      <h2>systemjs-builder (dev)</h2>
+      <iframe src="/fixtures/packaging/systemjs-builder/dev/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>systemjs-builder (prod)</h2>
+      <iframe src="/fixtures/packaging/systemjs-builder/prod/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>webpack (dev)</h2>
+      <iframe src="/fixtures/packaging/webpack/dev/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>webpack (prod)</h2>
+      <iframe src="/fixtures/packaging/webpack/prod/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>webpack-alias (dev)</h2>
+      <iframe src="/fixtures/packaging/webpack-alias/dev/"></iframe>
+    </div>
+    <div class="frame">
+      <h2>webpack-alias (prod)</h2>
+      <iframe src="/fixtures/packaging/webpack-alias/prod/"></iframe>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/requirejs/dev.html b/fixtures/packaging/requirejs/dev.html
new file mode 100644
index 00000000000..a94bacd7928
--- /dev/null
+++ b/fixtures/packaging/requirejs/dev.html
@@ -0,0 +1,21 @@
+<html>
+  <body>
+    <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
+    <div id="container"></div>
+    <script>
+      requirejs.config({
+        paths: {
+          react: '../../../build/oss-experimental/react/umd/react.development',
+          'react-dom': '../../../build/oss-experimental/react-dom/umd/react-dom.development'
+        }
+      });
+
+      require(['react', 'react-dom'], function(React, ReactDOM) {
+        ReactDOM.render(
+          React.createElement('h1', null, 'Hello World!'),
+          document.getElementById('container')
+        );
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/requirejs/prod.html b/fixtures/packaging/requirejs/prod.html
new file mode 100644
index 00000000000..fc1be8d648c
--- /dev/null
+++ b/fixtures/packaging/requirejs/prod.html
@@ -0,0 +1,21 @@
+<html>
+  <body>
+    <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
+    <div id="container"></div>
+    <script>
+      requirejs.config({
+        paths: {
+          react: '../../../build/oss-experimental/react/umd/react.production.min',
+          'react-dom': '../../../build/oss-experimental/react-dom/umd/react-dom.production.min'
+        }
+      });
+
+      require(['react', 'react-dom'], function(React, ReactDOM) {
+        ReactDOM.render(
+          React.createElement('h1', null, 'Hello World!'),
+          document.getElementById('container')
+        );
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/rjs/dev/.gitignore b/fixtures/packaging/rjs/dev/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/rjs/dev/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/rjs/dev/config.js b/fixtures/packaging/rjs/dev/config.js
new file mode 100644
index 00000000000..f28efa8eb17
--- /dev/null
+++ b/fixtures/packaging/rjs/dev/config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  baseUrl: '.',
+  name: 'input',
+  out: 'output.js',
+  optimize: 'none',
+  paths: {
+    react: '../../../../build/oss-experimental/react/umd/react.development',
+    'react-dom':
+      '../../../../build/oss-experimental/react-dom/umd/react-dom.development',
+    schedule:
+      '../../../../build/oss-experimental/scheduler/umd/schedule.development',
+  },
+};
diff --git a/fixtures/packaging/rjs/dev/index.html b/fixtures/packaging/rjs/dev/index.html
new file mode 100644
index 00000000000..0171bdf9b2f
--- /dev/null
+++ b/fixtures/packaging/rjs/dev/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/rjs/dev/input.js b/fixtures/packaging/rjs/dev/input.js
new file mode 100644
index 00000000000..6c0a9d4fd24
--- /dev/null
+++ b/fixtures/packaging/rjs/dev/input.js
@@ -0,0 +1,6 @@
+require(['react', 'react-dom'], function (React, ReactDOM) {
+  ReactDOM.render(
+    React.createElement('h1', null, 'Hello World!'),
+    document.getElementById('container')
+  );
+});
diff --git a/fixtures/packaging/rjs/dev/package.json b/fixtures/packaging/rjs/dev/package.json
new file mode 100644
index 00000000000..6887bf076d1
--- /dev/null
+++ b/fixtures/packaging/rjs/dev/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "rjs-dev-fixture",
+  "dependencies": {
+    "requirejs": "^2.3.2"
+  },
+  "scripts": {
+    "build": "rm -f output.js && r.js -o config.js"
+  }
+}
diff --git a/fixtures/packaging/rjs/dev/yarn.lock b/fixtures/packaging/rjs/dev/yarn.lock
new file mode 100644
index 00000000000..1bebef2fdbc
--- /dev/null
+++ b/fixtures/packaging/rjs/dev/yarn.lock
@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+requirejs@^2.3.2:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.5.tgz#617b9acbbcb336540ef4914d790323a8d4b861b0"
diff --git a/fixtures/packaging/rjs/prod/.gitignore b/fixtures/packaging/rjs/prod/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/rjs/prod/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/rjs/prod/config.js b/fixtures/packaging/rjs/prod/config.js
new file mode 100644
index 00000000000..7ffdd06d369
--- /dev/null
+++ b/fixtures/packaging/rjs/prod/config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  baseUrl: '.',
+  name: 'input',
+  out: 'output.js',
+  optimize: 'none',
+  paths: {
+    react: '../../../../build/oss-experimental/react/umd/react.production.min',
+    'react-dom':
+      '../../../../build/oss-experimental/react-dom/umd/react-dom.production.min',
+    schedule:
+      '../../../../build/oss-experimental/scheduler/umd/schedule.development',
+  },
+};
diff --git a/fixtures/packaging/rjs/prod/index.html b/fixtures/packaging/rjs/prod/index.html
new file mode 100644
index 00000000000..0171bdf9b2f
--- /dev/null
+++ b/fixtures/packaging/rjs/prod/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/rjs/prod/input.js b/fixtures/packaging/rjs/prod/input.js
new file mode 100644
index 00000000000..6c0a9d4fd24
--- /dev/null
+++ b/fixtures/packaging/rjs/prod/input.js
@@ -0,0 +1,6 @@
+require(['react', 'react-dom'], function (React, ReactDOM) {
+  ReactDOM.render(
+    React.createElement('h1', null, 'Hello World!'),
+    document.getElementById('container')
+  );
+});
diff --git a/fixtures/packaging/rjs/prod/package.json b/fixtures/packaging/rjs/prod/package.json
new file mode 100644
index 00000000000..eaf76b1e3a0
--- /dev/null
+++ b/fixtures/packaging/rjs/prod/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "rjs-prod-fixture",
+  "dependencies": {
+    "requirejs": "^2.3.2"
+  },
+  "scripts": {
+    "build": "rm -f output.js && r.js -o config.js"
+  }
+}
diff --git a/fixtures/packaging/rjs/prod/yarn.lock b/fixtures/packaging/rjs/prod/yarn.lock
new file mode 100644
index 00000000000..1bebef2fdbc
--- /dev/null
+++ b/fixtures/packaging/rjs/prod/yarn.lock
@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+requirejs@^2.3.2:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.5.tgz#617b9acbbcb336540ef4914d790323a8d4b861b0"
diff --git a/fixtures/packaging/systemjs-builder/dev/.gitignore b/fixtures/packaging/systemjs-builder/dev/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/systemjs-builder/dev/build.js b/fixtures/packaging/systemjs-builder/dev/build.js
new file mode 100644
index 00000000000..964f6991f1e
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/build.js
@@ -0,0 +1,12 @@
+var Builder = require('systemjs-builder');
+
+var builder = new Builder('/', './config.js');
+builder
+  .buildStatic('./input.js', './output.js')
+  .then(function () {
+    console.log('Build complete');
+  })
+  .catch(function (err) {
+    console.log('Build error');
+    console.log(err);
+  });
diff --git a/fixtures/packaging/systemjs-builder/dev/config.js b/fixtures/packaging/systemjs-builder/dev/config.js
new file mode 100644
index 00000000000..1805592ec45
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/config.js
@@ -0,0 +1,9 @@
+System.config({
+  paths: {
+    react: '../../../../build/oss-experimental/react/umd/react.development.js',
+    'react-dom':
+      '../../../../build/oss-experimental/react-dom/umd/react-dom.development.js',
+    schedule:
+      '../../../../build/oss-experimental/scheduler/umd/schedule.development',
+  },
+});
diff --git a/fixtures/packaging/systemjs-builder/dev/index.html b/fixtures/packaging/systemjs-builder/dev/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/systemjs-builder/dev/input.js b/fixtures/packaging/systemjs-builder/dev/input.js
new file mode 100644
index 00000000000..e919c6f098b
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/input.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/systemjs-builder/dev/package.json b/fixtures/packaging/systemjs-builder/dev/package.json
new file mode 100644
index 00000000000..db6eb9a56c5
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "systemjs-dev-fixture",
+  "dependencies": {
+    "systemjs-builder": "^0.15.34"
+  },
+  "scripts": {
+    "build": "rm -f output.js && node build.js"
+  }
+}
diff --git a/fixtures/packaging/systemjs-builder/dev/yarn.lock b/fixtures/packaging/systemjs-builder/dev/yarn.lock
new file mode 100644
index 00000000000..9dd2fdb3736
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/dev/yarn.lock
@@ -0,0 +1,611 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+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"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.26.0, babel-core@^6.9.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-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-cjs-system-wrapper@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-cjs-system-wrapper/-/babel-plugin-transform-cjs-system-wrapper-0.3.0.tgz#f5759f29becd356faab7af52c99cde8e7bad0b21"
+  dependencies:
+    babel-template "^6.9.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.6.5:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-global-system-wrapper@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-global-system-wrapper/-/babel-plugin-transform-global-system-wrapper-0.0.1.tgz#afb469cec0e04689b9fe7e8b1fd280fc94a6d8f2"
+  dependencies:
+    babel-template "^6.9.0"
+
+babel-plugin-transform-system-register@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-system-register/-/babel-plugin-transform-system-register-0.0.1.tgz#9dff40390c2763ac518f0b2ad7c5ea4f65a5be25"
+
+babel-register@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@^6.22.0, 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"
+
+babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.9.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+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"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+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"
+
+bluebird@^3.3.4:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+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"
+
+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"
+
+commander@2.9.x:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
+core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
+data-uri-to-buffer@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-0.0.4.tgz#46e13ab9da8e309745c8d01ce547213ebdb2fe3f"
+
+debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+es5-ext@^0.10.12, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.35"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.35.tgz#18ee858ce6a3c45c7d79e91c15fcca9ec568494f"
+  dependencies:
+    es6-iterator "~2.0.1"
+    es6-symbol "~3.1.1"
+
+es6-iterator@~2.0.1:
+  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.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-template-strings@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-template-strings/-/es6-template-strings-2.0.1.tgz#b166c6a62562f478bb7775f6ca96103a599b4b2c"
+  dependencies:
+    es5-ext "^0.10.12"
+    esniff "^1.1"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esniff@^1.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/esniff/-/esniff-1.1.0.tgz#c66849229f91464dede2e0d40201ed6abf65f2ac"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.12"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+glob@5.0.x:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+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"
+
+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"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+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:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.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"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+kind-of@^3.0.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lodash@^4.17.4:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+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:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+"minimatch@2 || 3", 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"
+
+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"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+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"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+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"
+
+private@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rollup@^0.36.3:
+  version "0.36.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.36.4.tgz#a224494c5386c1d73d38f7bb86f69f5eb011a3d2"
+  dependencies:
+    source-map-support "^0.4.0"
+
+rsvp@^3.0.13:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
+
+semver@^4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+source-map-support@^0.4.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"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@~0.2.8:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.2.10.tgz#ea5a3900a1c1cb25096a0ae8cc5c2b4b10ded3dc"
+  dependencies:
+    source-map "0.1.32"
+
+source-map@0.1.32:
+  version "0.1.32"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.32.tgz#c8b6c167797ba4740a8ea33252162ff08591b266"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+strip-ansi@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.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"
+
+systemjs-builder@^0.15.34:
+  version "0.15.36"
+  resolved "https://registry.yarnpkg.com/systemjs-builder/-/systemjs-builder-0.15.36.tgz#30b02372d4227cf37880f580fe67cb4edb7f1420"
+  dependencies:
+    babel-core "^6.9.0"
+    babel-plugin-transform-cjs-system-wrapper "^0.3.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.6.5"
+    babel-plugin-transform-global-system-wrapper "0.0.1"
+    babel-plugin-transform-system-register "0.0.1"
+    bluebird "^3.3.4"
+    data-uri-to-buffer "0.0.4"
+    es6-template-strings "^2.0.0"
+    glob "^7.0.3"
+    mkdirp "^0.5.1"
+    rollup "^0.36.3"
+    source-map "^0.5.3"
+    systemjs "^0.19.43"
+    traceur "0.0.105"
+    uglify-js "~2.7.5"
+
+systemjs@^0.19.43:
+  version "0.19.47"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.19.47.tgz#c8c93937180f3f5481c769cd2720763fb4a31c6f"
+  dependencies:
+    when "^3.7.5"
+
+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"
+
+traceur@0.0.105:
+  version "0.0.105"
+  resolved "https://registry.yarnpkg.com/traceur/-/traceur-0.0.105.tgz#5cf9dee83d6b77861c3d6c44d53859aed7ab0479"
+  dependencies:
+    commander "2.9.x"
+    glob "5.0.x"
+    rsvp "^3.0.13"
+    semver "^4.3.3"
+    source-map-support "~0.2.8"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+uglify-js@~2.7.5:
+  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-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"
+
+when@^3.7.5:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/packaging/systemjs-builder/prod/.gitignore b/fixtures/packaging/systemjs-builder/prod/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/systemjs-builder/prod/build.js b/fixtures/packaging/systemjs-builder/prod/build.js
new file mode 100644
index 00000000000..964f6991f1e
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/build.js
@@ -0,0 +1,12 @@
+var Builder = require('systemjs-builder');
+
+var builder = new Builder('/', './config.js');
+builder
+  .buildStatic('./input.js', './output.js')
+  .then(function () {
+    console.log('Build complete');
+  })
+  .catch(function (err) {
+    console.log('Build error');
+    console.log(err);
+  });
diff --git a/fixtures/packaging/systemjs-builder/prod/config.js b/fixtures/packaging/systemjs-builder/prod/config.js
new file mode 100644
index 00000000000..60502b4e6a6
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/config.js
@@ -0,0 +1,10 @@
+System.config({
+  paths: {
+    react:
+      '../../../../build/oss-experimental/react/umd/react.production.min.js',
+    'react-dom':
+      '../../../../build/oss-experimental/react-dom/umd/react-dom.production.min.js',
+    schedule:
+      '../../../../build/oss-experimental/scheduler/umd/schedule.development',
+  },
+});
diff --git a/fixtures/packaging/systemjs-builder/prod/index.html b/fixtures/packaging/systemjs-builder/prod/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/systemjs-builder/prod/input.js b/fixtures/packaging/systemjs-builder/prod/input.js
new file mode 100644
index 00000000000..e919c6f098b
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/input.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/systemjs-builder/prod/package.json b/fixtures/packaging/systemjs-builder/prod/package.json
new file mode 100644
index 00000000000..dfea990e5a7
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "systemjs-prod-fixture",
+  "dependencies": {
+    "systemjs-builder": "^0.15.34"
+  },
+  "scripts": {
+    "build": "rm -f output.js && node build.js"
+  }
+}
diff --git a/fixtures/packaging/systemjs-builder/prod/yarn.lock b/fixtures/packaging/systemjs-builder/prod/yarn.lock
new file mode 100644
index 00000000000..21b559da004
--- /dev/null
+++ b/fixtures/packaging/systemjs-builder/prod/yarn.lock
@@ -0,0 +1,611 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+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"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.26.0, babel-core@^6.9.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-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^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"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-cjs-system-wrapper@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-cjs-system-wrapper/-/babel-plugin-transform-cjs-system-wrapper-0.3.0.tgz#f5759f29becd356faab7af52c99cde8e7bad0b21"
+  dependencies:
+    babel-template "^6.9.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.6.5:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-global-system-wrapper@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-global-system-wrapper/-/babel-plugin-transform-global-system-wrapper-0.0.1.tgz#afb469cec0e04689b9fe7e8b1fd280fc94a6d8f2"
+  dependencies:
+    babel-template "^6.9.0"
+
+babel-plugin-transform-system-register@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-system-register/-/babel-plugin-transform-system-register-0.0.1.tgz#9dff40390c2763ac518f0b2ad7c5ea4f65a5be25"
+
+babel-register@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@^6.22.0, 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"
+
+babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.9.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+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"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+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"
+
+bluebird@^3.3.4:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+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"
+
+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"
+
+commander@2.9.x:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
+core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
+data-uri-to-buffer@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-0.0.4.tgz#46e13ab9da8e309745c8d01ce547213ebdb2fe3f"
+
+debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+es5-ext@^0.10.12, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.35"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.35.tgz#18ee858ce6a3c45c7d79e91c15fcca9ec568494f"
+  dependencies:
+    es6-iterator "~2.0.1"
+    es6-symbol "~3.1.1"
+
+es6-iterator@~2.0.1:
+  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.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-template-strings@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-template-strings/-/es6-template-strings-2.0.1.tgz#b166c6a62562f478bb7775f6ca96103a599b4b2c"
+  dependencies:
+    es5-ext "^0.10.12"
+    esniff "^1.1"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esniff@^1.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/esniff/-/esniff-1.1.0.tgz#c66849229f91464dede2e0d40201ed6abf65f2ac"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.12"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+glob@5.0.x:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+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"
+
+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"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+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:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.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"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+kind-of@^3.0.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lodash@^4.17.4:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+
+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:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+"minimatch@2 || 3", 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"
+
+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"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+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"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+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"
+
+private@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rollup@^0.36.3:
+  version "0.36.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.36.4.tgz#a224494c5386c1d73d38f7bb86f69f5eb011a3d2"
+  dependencies:
+    source-map-support "^0.4.0"
+
+rsvp@^3.0.13:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
+
+semver@^4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+source-map-support@^0.4.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"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@~0.2.8:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.2.10.tgz#ea5a3900a1c1cb25096a0ae8cc5c2b4b10ded3dc"
+  dependencies:
+    source-map "0.1.32"
+
+source-map@0.1.32:
+  version "0.1.32"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.32.tgz#c8b6c167797ba4740a8ea33252162ff08591b266"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+strip-ansi@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.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"
+
+systemjs-builder@^0.15.34:
+  version "0.15.36"
+  resolved "https://registry.yarnpkg.com/systemjs-builder/-/systemjs-builder-0.15.36.tgz#30b02372d4227cf37880f580fe67cb4edb7f1420"
+  dependencies:
+    babel-core "^6.9.0"
+    babel-plugin-transform-cjs-system-wrapper "^0.3.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.6.5"
+    babel-plugin-transform-global-system-wrapper "0.0.1"
+    babel-plugin-transform-system-register "0.0.1"
+    bluebird "^3.3.4"
+    data-uri-to-buffer "0.0.4"
+    es6-template-strings "^2.0.0"
+    glob "^7.0.3"
+    mkdirp "^0.5.1"
+    rollup "^0.36.3"
+    source-map "^0.5.3"
+    systemjs "^0.19.43"
+    traceur "0.0.105"
+    uglify-js "~2.7.5"
+
+systemjs@^0.19.43:
+  version "0.19.47"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.19.47.tgz#c8c93937180f3f5481c769cd2720763fb4a31c6f"
+  dependencies:
+    when "^3.7.5"
+
+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"
+
+traceur@0.0.105:
+  version "0.0.105"
+  resolved "https://registry.yarnpkg.com/traceur/-/traceur-0.0.105.tgz#5cf9dee83d6b77861c3d6c44d53859aed7ab0479"
+  dependencies:
+    commander "2.9.x"
+    glob "5.0.x"
+    rsvp "^3.0.13"
+    semver "^4.3.3"
+    source-map-support "~0.2.8"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+uglify-js@~2.7.5:
+  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-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"
+
+when@^3.7.5:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/packaging/systemjs/dev.html b/fixtures/packaging/systemjs/dev.html
new file mode 100644
index 00000000000..0f73fe2adae
--- /dev/null
+++ b/fixtures/packaging/systemjs/dev.html
@@ -0,0 +1,27 @@
+<html>
+  <body>
+    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
+    <div id="container"></div>
+    <script>
+      System.config({
+        paths: {
+          react: '../../../build/oss-experimental/react/umd/react.development.js',
+          'react-dom': '../../../build/oss-experimental/react-dom/umd/react-dom.development.js'
+        }
+      });
+
+      Promise.all([
+        System.import("react"),
+        System.import("react-dom")
+      ]).then(function (deps) {
+        var React = deps[0];
+        var ReactDOM = deps[1];
+
+        ReactDOM.render(
+          React.createElement('h1', null, 'Hello World!'),
+          document.getElementById('container')
+        );
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/systemjs/prod.html b/fixtures/packaging/systemjs/prod.html
new file mode 100644
index 00000000000..87de52ab1c3
--- /dev/null
+++ b/fixtures/packaging/systemjs/prod.html
@@ -0,0 +1,27 @@
+<html>
+  <body>
+    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
+    <div id="container"></div>
+    <script>
+      System.config({
+        paths: {
+          react: '../../../build/oss-experimental/react/umd/react.production.min.js',
+          'react-dom': '../../../build/oss-experimental/react-dom/umd/react-dom.production.min.js'
+        }
+      });
+
+      Promise.all([
+        System.import("react"),
+        System.import("react-dom")
+      ]).then(function (deps) {
+        var React = deps[0];
+        var ReactDOM = deps[1];
+
+        ReactDOM.render(
+          React.createElement('h1', null, 'Hello World!'),
+          document.getElementById('container')
+        );
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/webpack-alias/dev/.gitignore b/fixtures/packaging/webpack-alias/dev/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/dev/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/webpack-alias/dev/config.js b/fixtures/packaging/webpack-alias/dev/config.js
new file mode 100644
index 00000000000..2b161266068
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/dev/config.js
@@ -0,0 +1,15 @@
+var path = require('path');
+
+module.exports = {
+  entry: './input',
+  output: {
+    filename: 'output.js',
+  },
+  resolve: {
+    root: path.resolve('../../../../build/oss-experimental'),
+    alias: {
+      react: 'react/umd/react.development',
+      'react-dom': 'react-dom/umd/react-dom.development',
+    },
+  },
+};
diff --git a/fixtures/packaging/webpack-alias/dev/index.html b/fixtures/packaging/webpack-alias/dev/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/dev/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/webpack-alias/dev/input.js b/fixtures/packaging/webpack-alias/dev/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/dev/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/webpack-alias/dev/package.json b/fixtures/packaging/webpack-alias/dev/package.json
new file mode 100644
index 00000000000..4194108427a
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/dev/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "webpack-alias-dev-fixture",
+  "dependencies": {
+    "webpack": "^1.14.0"
+  },
+  "scripts": {
+    "build": "rm -f output.js && webpack --config config.js"
+  }
+}
diff --git a/fixtures/packaging/webpack-alias/dev/yarn.lock b/fixtures/packaging/webpack-alias/dev/yarn.lock
new file mode 100644
index 00000000000..961a3a8208a
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/dev/yarn.lock
@@ -0,0 +1,1340 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+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"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+buffer@^4.9.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-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"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chokidar@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+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"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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"
+
+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.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+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"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  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"
+
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.1, inherits@~2.0.0, 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"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+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"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+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"
+
+kind-of@^3.0.2:
+  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"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, 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.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.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.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-path@^2.0.0, normalize-path@^2.0.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"
+
+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"
+
+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"
+
+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.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  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"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@^0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+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"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+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"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+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"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.1, 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"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+safe-buffer@^5.0.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"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map@~0.4.1:
+  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.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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_decoder@^0.10.25:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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"
+
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.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"
+
+uglify-js@~2.7.3:
+  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-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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+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"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.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"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+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@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack@^1.14.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.15.0.tgz#4ff31f53db03339e55164a9d468ee0324968fe98"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+wide-align@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  dependencies:
+    string-width "^1.0.2"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/packaging/webpack-alias/prod/.gitignore b/fixtures/packaging/webpack-alias/prod/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/prod/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/webpack-alias/prod/config.js b/fixtures/packaging/webpack-alias/prod/config.js
new file mode 100644
index 00000000000..7715065e28a
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/prod/config.js
@@ -0,0 +1,15 @@
+var path = require('path');
+
+module.exports = {
+  entry: './input',
+  output: {
+    filename: 'output.js',
+  },
+  resolve: {
+    root: path.resolve('../../../../build/oss-experimental'),
+    alias: {
+      react: 'react/umd/react.production.min',
+      'react-dom': 'react-dom/umd/react-dom.production.min',
+    },
+  },
+};
diff --git a/fixtures/packaging/webpack-alias/prod/index.html b/fixtures/packaging/webpack-alias/prod/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/prod/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/webpack-alias/prod/input.js b/fixtures/packaging/webpack-alias/prod/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/prod/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/webpack-alias/prod/package.json b/fixtures/packaging/webpack-alias/prod/package.json
new file mode 100644
index 00000000000..f6dcaff6464
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/prod/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "webpack-alias-prod-fixture",
+  "dependencies": {
+    "webpack": "^1.14.0"
+  },
+  "scripts": {
+    "build": "rm -f output.js && webpack --config config.js"
+  }
+}
diff --git a/fixtures/packaging/webpack-alias/prod/yarn.lock b/fixtures/packaging/webpack-alias/prod/yarn.lock
new file mode 100644
index 00000000000..2da73debcee
--- /dev/null
+++ b/fixtures/packaging/webpack-alias/prod/yarn.lock
@@ -0,0 +1,1340 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+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"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+buffer@^4.9.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-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"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chokidar@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+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"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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"
+
+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.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+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"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  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"
+
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.1, inherits@~2.0.0, 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"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+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"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+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"
+
+kind-of@^3.0.2:
+  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"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, 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.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.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.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-path@^2.0.0, normalize-path@^2.0.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"
+
+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"
+
+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"
+
+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.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  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"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@^0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+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"
+
+qs@~6.4.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6"
+
+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"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+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"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.1, 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"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+safe-buffer@^5.0.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"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map@~0.4.1:
+  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.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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_decoder@^0.10.25:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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"
+
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.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"
+
+uglify-js@~2.7.3:
+  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-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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+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"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.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"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+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@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack@^1.14.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.15.0.tgz#4ff31f53db03339e55164a9d468ee0324968fe98"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+wide-align@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  dependencies:
+    string-width "^1.0.2"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/packaging/webpack/dev/.gitignore b/fixtures/packaging/webpack/dev/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/webpack/dev/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/webpack/dev/config.js b/fixtures/packaging/webpack/dev/config.js
new file mode 100644
index 00000000000..c3ed85697c6
--- /dev/null
+++ b/fixtures/packaging/webpack/dev/config.js
@@ -0,0 +1,11 @@
+var path = require('path');
+
+module.exports = {
+  entry: './input',
+  output: {
+    filename: 'output.js',
+  },
+  resolve: {
+    root: path.resolve('../../../../build/oss-experimental/'),
+  },
+};
diff --git a/fixtures/packaging/webpack/dev/index.html b/fixtures/packaging/webpack/dev/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/webpack/dev/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/webpack/dev/input.js b/fixtures/packaging/webpack/dev/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/webpack/dev/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/webpack/dev/package.json b/fixtures/packaging/webpack/dev/package.json
new file mode 100644
index 00000000000..de30eb74281
--- /dev/null
+++ b/fixtures/packaging/webpack/dev/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "webpack-dev-fixture",
+  "dependencies": {
+    "webpack": "^1.14.0"
+  },
+  "scripts": {
+    "build": "rm -f output.js && webpack --config config.js"
+  }
+}
diff --git a/fixtures/packaging/webpack/dev/yarn.lock b/fixtures/packaging/webpack/dev/yarn.lock
new file mode 100644
index 00000000000..2da73debcee
--- /dev/null
+++ b/fixtures/packaging/webpack/dev/yarn.lock
@@ -0,0 +1,1340 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+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"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+buffer@^4.9.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-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"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chokidar@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+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"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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"
+
+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.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+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"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  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"
+
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.1, inherits@~2.0.0, 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"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+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"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+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"
+
+kind-of@^3.0.2:
+  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"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, 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.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.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.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-path@^2.0.0, normalize-path@^2.0.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"
+
+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"
+
+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"
+
+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.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  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"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@^0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+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"
+
+qs@~6.4.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6"
+
+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"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+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"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.1, 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"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+safe-buffer@^5.0.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"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map@~0.4.1:
+  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.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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_decoder@^0.10.25:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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"
+
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.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"
+
+uglify-js@~2.7.3:
+  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-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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+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"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.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"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+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@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack@^1.14.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.15.0.tgz#4ff31f53db03339e55164a9d468ee0324968fe98"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+wide-align@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  dependencies:
+    string-width "^1.0.2"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/packaging/webpack/prod/.gitignore b/fixtures/packaging/webpack/prod/.gitignore
new file mode 100644
index 00000000000..fa213fe698b
--- /dev/null
+++ b/fixtures/packaging/webpack/prod/.gitignore
@@ -0,0 +1 @@
+output.js
\ No newline at end of file
diff --git a/fixtures/packaging/webpack/prod/config.js b/fixtures/packaging/webpack/prod/config.js
new file mode 100644
index 00000000000..b266e5ea422
--- /dev/null
+++ b/fixtures/packaging/webpack/prod/config.js
@@ -0,0 +1,19 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './input',
+  output: {
+    filename: 'output.js',
+  },
+  resolve: {
+    root: path.resolve('../../../../build/oss-experimental/'),
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+  ],
+};
diff --git a/fixtures/packaging/webpack/prod/index.html b/fixtures/packaging/webpack/prod/index.html
new file mode 100644
index 00000000000..e010d6b31db
--- /dev/null
+++ b/fixtures/packaging/webpack/prod/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fixtures/packaging/webpack/prod/input.js b/fixtures/packaging/webpack/prod/input.js
new file mode 100644
index 00000000000..93a0e76d43d
--- /dev/null
+++ b/fixtures/packaging/webpack/prod/input.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement('h1', null, 'Hello World!'),
+  document.getElementById('container')
+);
diff --git a/fixtures/packaging/webpack/prod/package.json b/fixtures/packaging/webpack/prod/package.json
new file mode 100644
index 00000000000..9139ae25c03
--- /dev/null
+++ b/fixtures/packaging/webpack/prod/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "webpack-prod-fixture",
+  "dependencies": {
+    "webpack": "^1.14.0"
+  },
+  "scripts": {
+    "build": "rm -f output.js && webpack --config config.js"
+  }
+}
diff --git a/fixtures/packaging/webpack/prod/yarn.lock b/fixtures/packaging/webpack/prod/yarn.lock
new file mode 100644
index 00000000000..961a3a8208a
--- /dev/null
+++ b/fixtures/packaging/webpack/prod/yarn.lock
@@ -0,0 +1,1340 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+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"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+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"
+
+aproba@^1.0.3:
+  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.4"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+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"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+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"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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"
+
+binary-extensions@^1.0.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+buffer@^4.9.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-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"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chokidar@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+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"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+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"
+
+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"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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"
+
+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.2.0:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+decamelize@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+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"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
+for-own@^0.1.4:
+  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"
+
+form-data@~2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.36"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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"
+
+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-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+graceful-fs@^4.1.2:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+hawk@3.1.3, hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+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.1, inherits@~2.0.0, 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"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+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.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+
+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"
+  dependencies:
+    is-primitive "^2.0.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-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+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-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"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  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"
+  dependencies:
+    kind-of "^3.0.2"
+
+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"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+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"
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+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"
+
+kind-of@^3.0.2:
+  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"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.17"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
+  dependencies:
+    mime-db "~1.30.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, 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.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.1, mkdirp@~0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+nan@^2.3.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
+
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.36:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
+  dependencies:
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.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-path@^2.0.0, normalize-path@^2.0.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"
+
+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"
+
+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"
+
+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.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+once@^1.3.0, once@^1.3.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  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"
+
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.0:
+  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.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+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"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+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"
+
+process@^0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+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"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+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"
+
+randomatic@^1.1.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+rc@^1.1.7:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.6:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    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"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+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"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.5.1, 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"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+safe-buffer@^5.0.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"
+
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
+source-map@~0.4.1:
+  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.1:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+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-http@^2.3.1:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.2.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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_decoder@^0.10.25:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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"
+
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  dependencies:
+    has-flag "^1.0.0"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+timers-browserify@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  dependencies:
+    setimmediate "^1.0.4"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
+tough-cookie@~2.3.0:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.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"
+
+uglify-js@~2.7.3:
+  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-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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+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"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.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"
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+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@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack@^1.14.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.15.0.tgz#4ff31f53db03339e55164a9d468ee0324968fe98"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+wide-align@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
+  dependencies:
+    string-width "^1.0.2"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/scheduler/index.html b/fixtures/scheduler/index.html
new file mode 100644
index 00000000000..4bc57fbd9a7
--- /dev/null
+++ b/fixtures/scheduler/index.html
@@ -0,0 +1,673 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%;">
+
+<head>
+  <meta charset="utf-8">
+  <title>Scheduler Test Page</title>
+  <style>
+    .correct {
+      border: solid green 2px;
+    }
+    .incorrect {
+      border: dashed red 2px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Scheduler Fixture</h1>
+  <p>
+    This fixture is for manual testing purposes, and the patterns used in
+    implementing it should not be used as a model. This is mainly for anyone
+    working on making changes to the `schedule` module.
+  </p>
+  <h2>Tests:</h2>
+  <ol>
+    <li>
+      <button onClick="runTestOne()">Run Test 1</button>
+      <p>Calls the callback within the frame when not blocked:</p>
+      <div><b>Expected:</b></div>
+      <div id="test-1-expected">
+      </div>
+      <div> -------------------------------------------------</div>
+      <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-1"></div>
+    </li>
+    <li>
+      <p>Accepts multiple callbacks and calls within frame when not blocked</p>
+      <button onClick="runTestTwo()">Run Test 2</button>
+      <div><b>Expected:</b></div>
+      <div id="test-2-expected">
+      </div>
+      <div> -------------------------------------------------</div>
+      <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-2"></div>
+    </li>
+    <li>
+      <p>Schedules callbacks in correct order when they use scheduleCallback to schedule themselves</p>
+      <button onClick="runTestThree()">Run Test 3</button>
+      <div><b>Expected:</b></div>
+      <div id="test-3-expected">
+      </div>
+      <div> -------------------------------------------------</div>
+      <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-3"></div>
+    </li>
+    <li>
+      <p>Calls timed out callbacks and then any more pending callbacks, defers others if time runs out</p>
+      <button onClick="runTestFour()">Run Test 4</button>
+      <div><b>Expected:</b></div>
+      <div id="test-4-expected">
+      </div>
+      <div> -------------------------------------------------</div>
+      <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-4"></div>
+    </li>
+    <li>
+      <p>When some callbacks throw errors, still calls them all within the same frame</p>
+      <p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
+      <button onClick="runTestFive()">Run Test 5</button>
+    </li>
+    <li>
+      <p>When some callbacks throw errors <b> and some also time out</b>, still calls them all within the same frame</p>
+      <p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
+      <button onClick="runTestSix()">Run Test 6</button>
+    </li>
+    <li>
+      <p>Continues calling callbacks even when user switches away from this tab</p>
+      <button onClick="runTestSeven()">Run Test 7</button>
+      <div><b>Click the button above, observe the counter, then switch to
+          another tab and switch back:</b></div>
+      <div id="test-7">
+      </div>
+      <div> If the counter advanced while you were away from this tab, it's correct.</div>
+    </li>
+    <li>
+      <p>Test Eight Removed</p>
+      <p>Test 8 was removed because it was testing a feature that was removed from the scheduler.</p>
+    </li>
+    <li>
+      <p>Can force a specific framerate</p>
+      <p><b>IMPORTANT:</b> This test may be flaky if other tests have been run in this js instance. To get a clean test refresh the page before running test 9</p>
+      <button onClick="runTestNine()">Run Test 9</button>
+      <div><b>Expected:</b></div>
+      <div id="test-9-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-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/oss-experimental/react/umd/react.production.min.js"></script>
+  <script src="../../build/oss-experimental/scheduler/umd/scheduler.production.min.js"></script>
+  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+  <script type="text/babel">
+const {
+  unstable_scheduleCallback: scheduleCallback,
+  unstable_cancelCallback: cancelCallback,
+  unstable_now: now,
+  unstable_forceFrameRate: forceFrameRate,
+  unstable_shouldYield: shouldYield,
+  unstable_NormalPriority: NormalPriority,
+} = Scheduler;
+function displayTestResult(testNumber) {
+  const expectationNode = document.getElementById('test-' + testNumber + '-expected');
+  const resultNode = document.getElementById('test-' + testNumber);
+  resultNode.innerHTML = latestResults[testNumber - 1].join('<br />');
+  expectationNode.innerHTML = expectedResults[testNumber - 1].join('<br />');
+}
+function clearTestResult(testNumber) {
+  const resultNode = document.getElementById('test-' + testNumber);
+  resultNode.innerHTML = '';
+  latestResults[testNumber - 1] = [];
+}
+function updateTestResult(testNumber, textToAddToResult) {
+  latestResults[testNumber - 1].push(textToAddToResult);
+};
+function checkTestResult(testNumber) {
+
+  let correct = true;
+  const expected = expectedResults[testNumber - 1]; // zero indexing
+  const result = latestResults[testNumber - 1]; // zero indexing
+  if (expected.length !== result.length) {
+    correct = false;
+  } else {
+    for (let i = 0, len = expected.length; i < len; i++) {
+      if (expected[i] !== result[i]) {
+        correct = false;
+        break;
+      }
+    }
+  }
+  const currentClass = correct ? 'correct' : 'incorrect';
+  const previousClass = correct ? 'incorrect' : 'correct';
+  document.getElementById('test-' + testNumber).classList.remove(previousClass);
+  document.getElementById('test-' + testNumber).classList.add(currentClass);
+}
+function logWhenFramesStart(testNumber, cb) {
+  requestAnimationFrame(() => {
+    updateTestResult(testNumber, 'frame 1 started');
+    requestAnimationFrame(() => {
+      updateTestResult(testNumber, 'frame 2 started');
+      requestAnimationFrame(() => {
+        updateTestResult(testNumber, 'frame 3 started... we stop counting now.');
+        cb();
+      });
+    });
+  });
+}
+// push in results when we run the test
+const latestResults = [
+  // test 1
+  [
+  ],
+  // test 2
+  [
+  ],
+  // test 3
+  [
+  ],
+  // test 4
+  [
+  ],
+  // test 5
+  [
+  ],
+];
+
+const expectedResults = [
+  // test 1
+  [
+    'scheduled Cb1',
+    'frame 1 started',
+    'cb1 called with argument of false',
+    'frame 2 started',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 2
+  [
+    'scheduled CbA',
+    'scheduled CbB',
+    'frame 1 started',
+    'cbA called with argument of false',
+    'cbB called with argument of false',
+    'frame 2 started',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 3
+  [
+    'scheduled CbA',
+    'scheduled CbB',
+    'frame 1 started',
+    'scheduled CbA again',
+    'cbA0 called with argument of false',
+    'cbB called with argument of false',
+    'cbA1 called with argument of false',
+    'frame 2 started',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 4
+  [
+    'scheduled cbA',
+    'scheduled cbB',
+    'scheduled cbC',
+    'scheduled cbD',
+    'frame 1 started',
+    'cbC called with argument of {"didTimeout":true}',
+    'cbA called with argument of false',
+    'cbA running and taking some time',
+    'frame 2 started',
+    'cbB called with argument of false',
+    'cbD called with argument of false',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 5
+  [
+    // ... TODO
+  ],
+  [],
+  [],
+  // Test 8
+  [
+    'Queue size: 0.',
+    'Pausing... press continue to resume.',
+    'Queue size: 2.',
+    'Finishing...',
+    'Done!',
+  ],
+  // test 9
+  [
+    'Forcing new frame times...',
+    'Using new frame time!',
+    '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
+  // Calls the callback with the frame when not blocked
+  clearTestResult(1);
+  const test1Log = [];
+  const cb1Arguments = [];
+  const cb1 = (x) => {
+    updateTestResult(1, 'cb1 called with argument of ' + JSON.stringify(x));
+  }
+  scheduleCallback(NormalPriority, cb1);
+  updateTestResult(1, 'scheduled Cb1');
+  logWhenFramesStart(1, () => {
+    displayTestResult(1);
+    checkTestResult(1);
+  });
+};
+
+function runTestTwo() {
+  // Test 2
+  // accepts multiple callbacks and calls within frame when not blocked
+  clearTestResult(2);
+  const cbA = (x) => {
+    updateTestResult(2, 'cbA called with argument of ' + JSON.stringify(x));
+  }
+  const cbB = (x) => {
+    updateTestResult(2, 'cbB called with argument of ' + JSON.stringify(x));
+  }
+  scheduleCallback(NormalPriority, cbA);
+  updateTestResult(2, 'scheduled CbA');
+  scheduleCallback(NormalPriority, cbB);
+  updateTestResult(2, 'scheduled CbB');
+  logWhenFramesStart(2, () => {
+    displayTestResult(2);
+    checkTestResult(2);
+  });
+}
+
+function runTestThree() {
+  // Test 3
+  // Schedules callbacks in correct order when they use scheduleCallback to schedule themselves
+  clearTestResult(3);
+  let callbackAIterations = 0;
+  const cbA = (x) => {
+    if (callbackAIterations < 1) {
+      scheduleCallback(NormalPriority, cbA);
+      updateTestResult(3, 'scheduled CbA again');
+    }
+    updateTestResult(3, 'cbA' + callbackAIterations + ' called with argument of ' + JSON.stringify(x));
+    callbackAIterations++;
+  }
+  const cbB = (x) => {
+    updateTestResult(3, 'cbB called with argument of ' + JSON.stringify(x));
+  }
+  scheduleCallback(NormalPriority, cbA);
+  updateTestResult(3, 'scheduled CbA');
+  scheduleCallback(NormalPriority, cbB);
+  updateTestResult(3, 'scheduled CbB');
+  logWhenFramesStart(3, () => {
+    displayTestResult(3);
+    checkTestResult(3);
+  });
+}
+
+function waitForTimeToPass(timeInMs) {
+  const startTime = Date.now();
+  const endTime = startTime + timeInMs;
+  while (Date.now() < endTime) {
+    // wait...
+  }
+}
+
+function runTestFour() {
+  // Test 4
+  // Calls timed out callbacks and then any more pending callbacks, defers others if time runs out
+  clearTestResult(4);
+  const cbA = (x) => {
+    updateTestResult(4, 'cbA called with argument of ' + JSON.stringify(x));
+    updateTestResult(4, 'cbA running and taking some time');
+    waitForTimeToPass(35);
+  }
+  const cbB = (x) => {
+    updateTestResult(4, 'cbB called with argument of ' + JSON.stringify(x));
+  }
+  const cbC = (x) => {
+    updateTestResult(4, 'cbC called with argument of ' + JSON.stringify(x));
+  }
+  const cbD = (x) => {
+    updateTestResult(4, 'cbD called with argument of ' + JSON.stringify(x));
+  }
+  scheduleCallback(NormalPriority, cbA); // won't time out
+  updateTestResult(4, 'scheduled cbA');
+  scheduleCallback(NormalPriority, cbB, {timeout: 100}); // times out later
+  updateTestResult(4, 'scheduled cbB');
+  scheduleCallback(NormalPriority, cbC, {timeout: 1}); // will time out fast
+  updateTestResult(4, 'scheduled cbC');
+  scheduleCallback(NormalPriority, cbD); // won't time out
+  updateTestResult(4, 'scheduled cbD');
+
+  // should have run in order of C, A, B, D
+
+  logWhenFramesStart(4, () => {
+    displayTestResult(4);
+    checkTestResult(4);
+  });
+
+}
+
+// Error handling
+
+function runTestFive() {
+  // Test 5
+  // When some callbacks throw errors, still calls them all within the same frame
+  const cbA = (x) => {
+    console.log('cbA called with argument of ' + JSON.stringify(x));
+  }
+  const cbB = (x) => {
+    console.log('cbB called with argument of ' + JSON.stringify(x));
+    console.log('cbB is about to throw an error!');
+    throw new Error('error B');
+  }
+  const cbC = (x) => {
+    console.log('cbC called with argument of ' + JSON.stringify(x));
+  }
+  const cbD = (x) => {
+    console.log('cbD called with argument of ' + JSON.stringify(x));
+    console.log('cbD is about to throw an error!');
+    throw new Error('error D');
+  }
+  const cbE = (x) => {
+    console.log('cbE called with argument of ' + JSON.stringify(x));
+    console.log('This was the last callback! ------------------');
+  }
+
+  console.log('We are aiming to roughly emulate the way ' +
+  '`requestAnimationFrame` handles errors from callbacks.');
+
+  console.log('about to run the simulation of what it should look like...:');
+
+  requestAnimationFrame(() => {
+    console.log('frame 1 started');
+    requestAnimationFrame(() => {
+      console.log('frame 2 started');
+      requestAnimationFrame(() => {
+        console.log('frame 3 started... we stop counting now.');
+        console.log('about to wait a moment and start this again but ' +
+        'with the scheduler instead of requestAnimationFrame');
+        setTimeout(runSchedulerCode, 1000);
+      });
+    });
+  });
+  requestAnimationFrame(cbA);
+  console.log('scheduled cbA');
+  requestAnimationFrame(cbB); // will throw error
+  console.log('scheduled cbB');
+  requestAnimationFrame(cbC);
+  console.log('scheduled cbC');
+  requestAnimationFrame(cbD); // will throw error
+  console.log('scheduled cbD');
+  requestAnimationFrame(cbE);
+  console.log('scheduled cbE');
+
+
+  function runSchedulerCode() {
+    console.log('-------------------------------------------------------------');
+    console.log('now lets see what it looks like using the scheduler...:');
+    requestAnimationFrame(() => {
+      console.log('frame 1 started');
+      requestAnimationFrame(() => {
+        console.log('frame 2 started');
+        requestAnimationFrame(() => {
+          console.log('frame 3 started... we stop counting now.');
+        });
+      });
+    });
+    scheduleCallback(NormalPriority, cbA);
+    console.log('scheduled cbA');
+    scheduleCallback(NormalPriority, cbB); // will throw error
+    console.log('scheduled cbB');
+    scheduleCallback(NormalPriority, cbC);
+    console.log('scheduled cbC');
+    scheduleCallback(NormalPriority, cbD); // will throw error
+    console.log('scheduled cbD');
+    scheduleCallback(NormalPriority, cbE);
+    console.log('scheduled cbE');
+  };
+}
+
+function runTestSix() {
+  // Test 6
+  // When some callbacks throw errors, still calls them all within the same frame
+  const cbA = (x) => {
+    console.log('cbA called with argument of ' + JSON.stringify(x));
+    console.log('cbA is about to throw an error!');
+    throw new Error('error A');
+  }
+  const cbB = (x) => {
+    console.log('cbB called with argument of ' + JSON.stringify(x));
+  }
+  const cbC = (x) => {
+    console.log('cbC called with argument of ' + JSON.stringify(x));
+  }
+  const cbD = (x) => {
+    console.log('cbD called with argument of ' + JSON.stringify(x));
+    console.log('cbD is about to throw an error!');
+    throw new Error('error D');
+  }
+  const cbE = (x) => {
+    console.log('cbE called with argument of ' + JSON.stringify(x));
+    console.log('This was the last callback! ------------------');
+  }
+
+  console.log('We are aiming to roughly emulate the way ' +
+  '`requestAnimationFrame` handles errors from callbacks.');
+
+  console.log('about to run the simulation of what it should look like...:');
+
+  requestAnimationFrame(() => {
+    console.log('frame 1 started');
+    requestAnimationFrame(() => {
+      console.log('frame 2 started');
+      requestAnimationFrame(() => {
+        console.log('frame 3 started... we stop counting now.');
+        console.log('about to wait a moment and start this again but ' +
+        'with the scheduler instead of requestAnimationFrame');
+        setTimeout(runSchedulerCode, 1000);
+      });
+    });
+  });
+  requestAnimationFrame(cbC);
+  console.log('scheduled cbC first; simulating timing out');
+  requestAnimationFrame(cbD); // will throw error
+  console.log('scheduled cbD first; simulating timing out');
+  requestAnimationFrame(cbE);
+  console.log('scheduled cbE first; simulating timing out');
+  requestAnimationFrame(cbA);
+  console.log('scheduled cbA'); // will throw error
+  requestAnimationFrame(cbB);
+  console.log('scheduled cbB');
+
+
+  function runSchedulerCode() {
+    console.log('-------------------------------------------------------------');
+    console.log('now lets see what it looks like using the scheduler...:');
+    requestAnimationFrame(() => {
+      console.log('frame 1 started');
+      requestAnimationFrame(() => {
+        console.log('frame 2 started');
+        requestAnimationFrame(() => {
+          console.log('frame 3 started... we stop counting now.');
+        });
+      });
+    });
+    scheduleCallback(NormalPriority, cbA);
+    console.log('scheduled cbA');
+    scheduleCallback(NormalPriority, cbB); // will throw error
+    console.log('scheduled cbB');
+    scheduleCallback(NormalPriority, cbC, {timeout: 1});
+    console.log('scheduled cbC');
+    scheduleCallback(NormalPriority, cbD, {timeout: 1}); // will throw error
+    console.log('scheduled cbD');
+    scheduleCallback(NormalPriority, cbE, {timeout: 1});
+    console.log('scheduled cbE');
+  };
+}
+
+function runTestSeven() {
+  // Test 7
+  // Calls callbacks, continues calling them even when this tab is in the
+  // background
+  clearTestResult(7);
+  let counter = -1;
+  function incrementCounterAndScheduleNextCallback() {
+    const counterNode = document.getElementById('test-7');
+    counter++;
+    counterNode.innerHTML = counter;
+    waitForTimeToPass(100);
+    scheduleCallback(NormalPriority, incrementCounterAndScheduleNextCallback);
+  }
+  scheduleCallback(NormalPriority, incrementCounterAndScheduleNextCallback);
+}
+
+function runTestNine() {
+  clearTestResult(9);
+  // We have this to make sure that the thing that goes right after it can get a full frame
+  var forceFrameFinish = () => {
+    while (!shouldYield()) {
+      waitForTimeToPass(1);
+    }
+    waitForTimeToPass(100);
+  }
+  scheduleCallback(NormalPriority, forceFrameFinish);
+  scheduleCallback(NormalPriority, () => {
+    var startTime = now();
+    while (!shouldYield()) {}
+    var initialFrameTime = now() - startTime;
+    var newFrameTime = (initialFrameTime * 2) > 60 ? (initialFrameTime * 2) : 60;
+    var newFrameRate = Math.floor(1000/newFrameTime);
+    updateTestResult(9, `Forcing new frame times...`);
+    displayTestResult(9);
+    forceFrameRate(newFrameRate);
+    var toSchedule = (again) => {
+      var startTime = now();
+      while (!shouldYield()) {}
+      var frameTime = now() - startTime;
+      if (frameTime >= (newFrameTime-8)) {
+        updateTestResult(9, `Using new frame time!`);
+      } else {
+        updateTestResult(9, `Failed to use new frame time. (off by ${newFrameTime - frameTime}ms)`);
+      }
+      displayTestResult(9);
+      if (again) {
+        scheduleCallback(NormalPriority, forceFrameFinish);
+        scheduleCallback(NormalPriority, () => {toSchedule(false);});
+      } else {
+        updateTestResult(9, `Finished!`);
+        forceFrameRate(0);
+        displayTestResult(9);
+        checkTestResult(9);
+      }
+    }
+    scheduleCallback(NormalPriority, forceFrameFinish);
+    scheduleCallback(NormalPriority, () => {toSchedule(true);});
+  });
+}
+
+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/README.md b/fixtures/ssr/README.md
new file mode 100644
index 00000000000..501433266af
--- /dev/null
+++ b/fixtures/ssr/README.md
@@ -0,0 +1,30 @@
+# SSR Fixtures
+
+A set of test cases for quickly identifying issues with server-side rendering.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/ssr
+yarn
+yarn start
+```
+
+The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
+
+**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:**
+
+```
+yarn
+```
+
+If you want to try the production mode instead run:
+
+```
+yarn start:prod
+```
+
+This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).
diff --git a/fixtures/ssr/package.json b/fixtures/ssr/package.json
new file mode 100644
index 00000000000..1535c39fb31
--- /dev/null
+++ b/fixtures/ssr/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-fixtures-ssr",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "concurrently": "3.1.0",
+    "http-proxy-middleware": "0.17.3",
+    "react-scripts": "0.9.5"
+  },
+  "dependencies": {
+    "express": "^4.14.0",
+    "ignore-styles": "^5.0.1",
+    "import-export": "^1.0.1",
+    "node-fetch": "^1.6.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:client": "BROWSER=none PORT=3001 react-scripts start",
+    "dev:server": "NODE_ENV=development node server",
+    "start": "react-scripts build && NODE_ENV=production node server",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/fixtures/ssr/public/favicon.ico b/fixtures/ssr/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/fixtures/ssr/public/favicon.ico differ
diff --git a/fixtures/ssr/public/index.html b/fixtures/ssr/public/index.html
new file mode 100644
index 00000000000..a94d9ac64a9
--- /dev/null
+++ b/fixtures/ssr/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <body>
+    <script>
+      /*
+      This is just a placeholder to make react-scripts happy.
+      We're not using it. If we end up here, redirect to the
+      primary server.
+      */
+      location.href = '//localhost:3000/';
+    </script>
+  </body>
+</html>
diff --git a/fixtures/ssr/server/index.js b/fixtures/ssr/server/index.js
new file mode 100644
index 00000000000..dd8a783b508
--- /dev/null
+++ b/fixtures/ssr/server/index.js
@@ -0,0 +1,70 @@
+require('ignore-styles');
+const babelRegister = require('babel-register');
+const proxy = require('http-proxy-middleware');
+
+babelRegister({
+  ignore: /\/(build|node_modules)\//,
+  presets: ['react-app'],
+});
+
+const express = require('express');
+const path = require('path');
+
+const app = express();
+
+// Application
+if (process.env.NODE_ENV === 'development') {
+  app.get('/', function (req, res) {
+    // In development mode we clear the module cache between each request to
+    // get automatic hot reloading.
+    for (var key in require.cache) {
+      delete require.cache[key];
+    }
+    const render = require('./render').default;
+    render(req.url, res);
+  });
+} else {
+  const render = require('./render').default;
+  app.get('/', function (req, res) {
+    render(req.url, res);
+  });
+}
+
+// Static resources
+app.use(express.static(path.resolve(__dirname, '..', 'build')));
+
+// Proxy everything else to create-react-app's webpack development server
+if (process.env.NODE_ENV === 'development') {
+  app.use(
+    '/',
+    proxy({
+      ws: true,
+      target: 'http://localhost:3001',
+    })
+  );
+}
+
+app.listen(3000, () => {
+  console.log('Listening on port 3000...');
+});
+
+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/ssr/server/render.js b/fixtures/ssr/server/render.js
new file mode 100644
index 00000000000..da3efa91b0b
--- /dev/null
+++ b/fixtures/ssr/server/render.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import {renderToPipeableStream} from 'react-dom/server';
+import {Writable} from 'stream';
+
+import App from '../src/components/App';
+
+let assets;
+if (process.env.NODE_ENV === 'development') {
+  // Use the bundle from create-react-app's server in development mode.
+  assets = {
+    'main.js': '/static/js/bundle.js',
+    'main.css': '',
+  };
+} else {
+  assets = require('../build/asset-manifest.json');
+}
+
+class ThrottledWritable extends Writable {
+  constructor(destination) {
+    super();
+    this.destination = destination;
+    this.delay = 10;
+  }
+
+  _write(chunk, encoding, callback) {
+    let o = 0;
+    const write = () => {
+      this.destination.write(chunk.slice(o, o + 100), encoding, x => {
+        o += 100;
+        if (o < chunk.length) {
+          setTimeout(write, this.delay);
+        } else {
+          callback(x);
+        }
+      });
+    };
+    setTimeout(write, this.delay);
+  }
+
+  _final(callback) {
+    setTimeout(() => {
+      this.destination.end(callback);
+    }, this.delay);
+  }
+}
+
+export default function render(url, res) {
+  res.socket.on('error', error => {
+    // Log fatal errors
+    console.error('Fatal', error);
+  });
+  let didError = false;
+  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    bootstrapScripts: [assets['main.js']],
+    progressiveChunkSize: 1024,
+    onShellReady() {
+      // If something errored before we started streaming, we set the error code appropriately.
+      res.statusCode = didError ? 500 : 200;
+      res.setHeader('Content-type', 'text/html');
+      // To test the actual chunks taking time to load over the network, we throttle
+      // the stream a bit.
+      const throttledResponse = new ThrottledWritable(res);
+      pipe(throttledResponse);
+    },
+    onShellError(x) {
+      // Something errored before we could complete the shell so we emit an alternative shell.
+      res.statusCode = 500;
+      res.send('<!doctype><p>Error</p>');
+    },
+    onError(x) {
+      didError = true;
+      console.error(x);
+    },
+  });
+  // Abandon and switch to client rendering after 5 seconds.
+  // Try lowering this to see the client recover.
+  setTimeout(abort, 5000);
+}
diff --git a/fixtures/ssr/src/components/App.js b/fixtures/ssr/src/components/App.js
new file mode 100644
index 00000000000..a938ed2f188
--- /dev/null
+++ b/fixtures/ssr/src/components/App.js
@@ -0,0 +1,38 @@
+import React, {useContext, useState, Suspense} from 'react';
+
+import Chrome from './Chrome';
+import Page from './Page';
+import Page2 from './Page2';
+import Theme from './Theme';
+
+function LoadingIndicator() {
+  let theme = useContext(Theme);
+  return <div className={theme + '-loading'}>Loading...</div>;
+}
+
+function Content() {
+  let [CurrentPage, switchPage] = useState(() => Page);
+  return (
+    <div>
+      <h1>Hello World</h1>
+      <a className="link" onClick={() => switchPage(() => Page)}>
+        Page 1
+      </a>
+      {' | '}
+      <a className="link" onClick={() => switchPage(() => Page2)}>
+        Page 2
+      </a>
+      <Suspense fallback={<LoadingIndicator />}>
+        <CurrentPage />
+      </Suspense>
+    </div>
+  );
+}
+
+export default function App({assets}) {
+  return (
+    <Chrome title="Hello World" assets={assets}>
+      <Content />
+    </Chrome>
+  );
+}
diff --git a/fixtures/ssr/src/components/Chrome.css b/fixtures/ssr/src/components/Chrome.css
new file mode 100644
index 00000000000..96932a6938a
--- /dev/null
+++ b/fixtures/ssr/src/components/Chrome.css
@@ -0,0 +1,29 @@
+body {
+  margin: 10px;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+body.light {
+  background-color: #FFFFFF;
+  color: #333333;
+}
+
+body.dark {
+  background-color: #000000;
+  color: #CCCCCC;
+}
+
+.light-loading {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #CCCCCC;
+  color: #666666;
+}
+
+.dark-loading {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #333333;
+  color: #999999;
+}
diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
new file mode 100644
index 00000000000..17e49e534e1
--- /dev/null
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -0,0 +1,52 @@
+import React, {Component, Suspense, startTransition} from 'react';
+
+import Theme, {ThemeToggleButton} from './Theme';
+
+import './Chrome.css';
+
+import LargeContent from './LargeContent';
+
+export default class Chrome extends Component {
+  state = {theme: 'light'};
+  render() {
+    const assets = this.props.assets;
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="shortcut icon" href="favicon.ico" />
+          <link rel="stylesheet" href={assets['main.css']} />
+          <title>{this.props.title}</title>
+        </head>
+        <body className={this.state.theme}>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<b>Enable JavaScript to run this app.</b>`,
+            }}
+          />
+          <Suspense fallback="Loading...">
+            <Theme.Provider value={this.state.theme}>
+              <div>
+                <ThemeToggleButton
+                  onChange={theme => {
+                    startTransition(() => {
+                      this.setState({theme});
+                    });
+                  }}
+                />
+              </div>
+              {this.props.children}
+            </Theme.Provider>
+          </Suspense>
+          <LargeContent />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `assetManifest = ${JSON.stringify(assets)};`,
+            }}
+          />
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/fixtures/ssr/src/components/LargeContent.js b/fixtures/ssr/src/components/LargeContent.js
new file mode 100644
index 00000000000..3b1fa7ea35b
--- /dev/null
+++ b/fixtures/ssr/src/components/LargeContent.js
@@ -0,0 +1,291 @@
+import React, {Suspense, unstable_SuspenseList as SuspenseList} from 'react';
+
+export default function LargeContent() {
+  return (
+    <SuspenseList revealOrder="forwards" tail="visible">
+      <Suspense fallback={null}>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          porttitor tortor ac lectus faucibus, eget eleifend elit hendrerit.
+          Integer porttitor nisi in leo congue rutrum. Morbi sed ante posuere,
+          aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra.
+          Cras facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse
+          aliquet tempus tortor et ultricies. Aliquam libero velit, posuere
+          tempus ante sed, pellentesque tincidunt lorem. Nullam iaculis, eros a
+          varius aliquet, tortor felis tempor metus, nec cursus felis eros
+          aliquam nulla. Vivamus ut orci sed mauris congue lacinia. Cras eget
+          blandit neque. Pellentesque a massa in turpis ullamcorper volutpat vel
+          at massa. Sed ante est, auctor non diam non, vulputate ultrices metus.
+          Maecenas dictum fermentum quam id aliquam. Donec porta risus vitae
+          pretium posuere. Fusce facilisis eros in lacus tincidunt congue.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas. Phasellus dolor ante, iaculis vel nisl vitae,
+          ornare ornare orci. Praesent sit amet lobortis sapien. Suspendisse
+          pharetra posuere libero ut dapibus. Donec condimentum ante urna.
+          Aliquam laoreet tincidunt lacus, sed interdum tortor dapibus
+          elementum. Nam sed faucibus lorem. Suspendisse finibus, velit sed
+          molestie finibus, risus purus mollis ante, sit amet aliquet sapien
+          nulla ut nibh. In eget ligula metus. Duis in purus mattis, blandit
+          magna nec, dictum nunc.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Sed convallis magna id tortor blandit dictum. Suspendisse in porttitor
+          neque. Integer quis metus consequat, rutrum est sit amet, finibus
+          justo. In hac habitasse platea dictumst. Nullam sagittis, risus sed
+          vehicula porta, sapien elit ultrices nibh, vel luctus odio tortor et
+          ante. Sed porta enim in hendrerit tristique. Pellentesque id feugiat
+          libero, sit amet tempor enim. Proin gravida nisl justo, vel ornare
+          dolor bibendum ac. Mauris scelerisque mattis facilisis. Praesent
+          sodales augue mollis orci vulputate aliquet. Mauris molestie luctus
+          neque, sed congue elit congue ut. Cras quis tortor augue. In auctor
+          nulla vel turpis dapibus egestas. Phasellus consequat rhoncus nisi sed
+          dignissim. Quisque varius justo non ex lobortis finibus cursus nec
+          justo. Nulla erat neque, commodo et sem convallis, tristique faucibus
+          odio.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Ut condimentum volutpat sem, id accumsan augue placerat vel. Donec ac
+          efficitur turpis. Suspendisse pretium odio euismod sapien bibendum,
+          sed tempus est condimentum. Etiam nisl magna, consequat at ullamcorper
+          at, sollicitudin eu eros. In mattis ligula arcu. Sed eu consectetur
+          turpis, id molestie ligula. Vestibulum et venenatis enim. Donec
+          condimentum vitae nisi et placerat. Sed fringilla vehicula egestas.
+          Proin consectetur, nibh non ornare scelerisque, diam lorem cursus
+          lectus, ut mattis mauris purus id mi. Curabitur non ligula sit amet
+          augue molestie vulputate. Donec maximus magna at volutpat aliquet.
+          Pellentesque dignissim nulla eget odio eleifend tincidunt. Etiam diam
+          lorem, ornare vel scelerisque vel, iaculis id risus. Donec aliquet
+          aliquam felis, ac vehicula lacus suscipit vitae. Morbi eu ligula elit.
+        </p>
+      </Suspense>
+      <p>This should appear in the first paint.</p>
+      <Suspense fallback={null}>
+        <p>
+          Praesent pellentesque, libero ut faucibus tempor, purus elit consequat
+          metus, in ornare nulla lectus at erat. Duis quis blandit turpis. Fusce
+          at ligula rutrum metus molestie tempor sit amet eu justo. Maecenas
+          tincidunt nisl nunc. Morbi ac metus tempor, pretium arcu vel, dapibus
+          velit. Nulla convallis ligula at porta mollis. Duis magna ante, mollis
+          eget nibh in, congue tempor dolor. Sed tincidunt sagittis arcu, in
+          ultricies neque tempor non. Suspendisse eget nunc neque. Nulla sit
+          amet odio volutpat, maximus purus id, dictum metus. Integer consequat,
+          orci nec ullamcorper porta, mauris libero vestibulum ipsum, nec tempor
+          tellus enim non nunc. Quisque nisl risus, dapibus sit amet purus nec,
+          aliquam finibus metus. Nullam condimentum urna viverra finibus cursus.
+          Proin et sollicitudin tellus, porta fermentum felis. Maecenas ac
+          turpis sed dui condimentum interdum sed sed erat. Mauris ut dignissim
+          erat.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Proin varius porta dui, id fringilla elit lobortis eget. Integer at
+          metus elementum, efficitur eros id, euismod est. Morbi vestibulum nibh
+          ac leo luctus sagittis. Praesent rhoncus, risus sit amet mattis
+          dictum, diam sapien tempor neque, vel dignissim nulla neque eget ex.
+          Nam sollicitudin metus quis ullamcorper dapibus. Nam tristique euismod
+          efficitur. Pellentesque rhoncus vel sem eget lacinia. Pellentesque
+          volutpat velit ac dignissim luctus. Vivamus euismod tortor at ligula
+          mattis porta. Vestibulum ante ipsum primis in faucibus orci luctus et
+          ultrices posuere cubilia curae;
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Proin blandit vulputate efficitur. Pellentesque sit amet porta odio.
+          Nunc pulvinar varius rhoncus. Mauris fermentum leo a imperdiet
+          pretium. Mauris scelerisque justo vel ante egestas, eget tempus neque
+          malesuada. Sed dictum ex vel justo dignissim, aliquam commodo diam
+          rutrum. Integer dignissim est ullamcorper augue laoreet consectetur id
+          at diam. Vivamus molestie blandit urna, eget pulvinar augue dictum
+          vestibulum. Duis maximus bibendum mauris, ut ultricies elit rhoncus
+          eu. Praesent gravida placerat mauris. Praesent tempor ipsum at nibh
+          rhoncus sagittis. Duis non sem turpis. Quisque et metus leo. Sed eu
+          purus lorem. Pellentesque dictum metus sed leo viverra interdum.
+          Maecenas vel tincidunt mi.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Praesent consequat dapibus pellentesque. Fusce at enim id mauris
+          laoreet commodo. Nullam ut mauris euismod, rhoncus tellus vel,
+          facilisis diam. Aenean porta faucibus augue, a iaculis massa iaculis
+          in. Praesent vel metus purus. Etiam quis augue eget orci lobortis
+          eleifend ac ut lorem. Aenean non orci quis nisi molestie maximus.
+          Mauris interdum, eros et aliquam aliquam, lectus diam pharetra velit,
+          in condimentum odio eros non quam. Praesent bibendum pretium turpis
+          vitae tristique. Mauris convallis, massa ut fermentum fermentum,
+          libero orci tempus ipsum, malesuada ultrices metus sapien placerat
+          lectus. Ut fringilla arcu nec lorem ultrices mattis. Etiam id tortor
+          feugiat magna gravida gravida. Morbi aliquam, mi ac pellentesque
+          mattis, erat ex venenatis erat, a vestibulum eros turpis quis metus.
+          Pellentesque tempus justo in ligula ultricies porta. Phasellus congue
+          felis sit amet dolor tristique finibus. Nunc eget eros non est
+          ultricies vestibulum.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Donec efficitur ligula quis odio tincidunt tristique. Duis urna dolor,
+          hendrerit quis enim at, accumsan auctor turpis. Vivamus ante lorem,
+          maximus vitae suscipit ut, congue eget velit. Maecenas sed ligula
+          erat. Aliquam mollis purus at nisi porta suscipit in ut magna. Vivamus
+          a turpis nec tellus egestas suscipit nec ornare nisi. Donec vestibulum
+          libero quis ex suscipit, sit amet luctus leo gravida.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Praesent pharetra dolor elit, sed volutpat lorem rhoncus non. Etiam a
+          neque ut velit dignissim sodales. Vestibulum neque risus, condimentum
+          nec consectetur vitae, ultricies ut sapien. Integer iaculis at urna
+          sit amet malesuada. Integer tincidunt, felis ac vulputate semper,
+          velit leo facilisis lorem, quis aliquet leo dui id lorem. Morbi non
+          quam quis nisl sagittis consequat nec vitae libero. Nunc molestie
+          pretium libero, eu eleifend nibh feugiat sed. Ut in bibendum diam, sit
+          amet vehicula risus. Nam ornare ac nisi ac euismod. Nullam id egestas
+          nulla. Etiam porta commodo ante sit amet pellentesque. Suspendisse
+          eleifend purus in urna euismod auctor non vel nisi. Suspendisse rutrum
+          est nunc, sit amet lacinia lacus dictum eget. Pellentesque habitant
+          morbi tristique senectus et netus et malesuada fames ac turpis
+          egestas. Morbi a blandit diam.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Donec eget efficitur sapien. Suspendisse diam lacus, varius eu
+          interdum et, congue ac justo. Proin ipsum odio, suscipit elementum
+          mauris sed, porttitor congue est. Cras dapibus dictum ante, vitae
+          gravida elit venenatis sed. Sed massa sem, posuere ut enim sit amet,
+          vestibulum condimentum nibh. Pellentesque pulvinar sodales lacinia.
+          Proin id pretium sapien, non convallis nulla. In mollis tincidunt sem
+          et porttitor.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Integer at sollicitudin sem. Suspendisse sed semper orci. Nulla at
+          nibh nec risus suscipit posuere egestas vitae enim. Nullam mauris
+          justo, mattis vel laoreet non, finibus nec nisl. Cras iaculis ultrices
+          nibh, non commodo eros aliquam non. Sed vitae mollis dui, at maximus
+          metus. Ut vestibulum, enim ut lobortis vulputate, lorem urna congue
+          elit, non dictum odio lorem eget velit. Morbi eleifend id ligula vitae
+          vulputate. Suspendisse ac laoreet justo. Proin eu mattis diam.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Nunc in ex quis enim ullamcorper scelerisque eget ac eros. Class
+          aptent taciti sociosqu ad litora torquent per conubia nostra, per
+          inceptos himenaeos. Aliquam turpis dui, egestas a rhoncus non,
+          fermentum in tellus. Vestibulum ante ipsum primis in faucibus orci
+          luctus et ultrices posuere cubilia curae; Aenean non risus arcu. Nam
+          ultricies lacinia volutpat. Class aptent taciti sociosqu ad litora
+          torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor
+          sit amet, consectetur adipiscing elit.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Aliquam a felis leo. Proin lorem ipsum, congue eu cursus in, rhoncus
+          ut libero. Vestibulum sit amet consequat nunc. Ut eleifend lobortis
+          lacus, vel molestie metus viverra eget. Nullam suscipit eu magna
+          scelerisque suscipit. Donec dictum in diam nec lacinia. Mauris
+          pellentesque ex ut purus facilisis, eget placerat turpis semper. Sed
+          dapibus lorem ante, et malesuada dui eleifend ac. Sed diam felis,
+          semper ac nulla vel, posuere ultricies ante.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Nunc elementum odio sapien, sit amet vulputate lorem varius at. Fusce
+          non sapien vitae lorem aliquam pretium sit amet congue dolor. Nunc
+          quis tortor luctus, pretium ex a, tincidunt urna. Aliquam fermentum
+          massa a erat pharetra varius. Curabitur at auctor dui. Sed posuere
+          pellentesque massa, vel bibendum urna dictum non. Fusce eget rhoncus
+          urna. Maecenas sed lectus tellus. Pellentesque convallis dapibus nisl
+          vitae venenatis. Quisque ornare a dolor ac pharetra. Nam cursus, mi a
+          lacinia accumsan, felis erat fringilla magna, ac mattis nunc ante a
+          orci.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Nunc vel tortor euismod, commodo tortor non, aliquam nisi. Maecenas
+          tempus mollis velit non suscipit. Mauris sit amet dolor sed ex
+          fringilla varius. Suspendisse vel cursus risus. Vivamus pharetra massa
+          nec dolor aliquam feugiat. Fusce finibus enim commodo, scelerisque
+          ante eu, laoreet ex. Curabitur placerat magna quis imperdiet lacinia.
+          Etiam lectus mauris, porttitor ac lacinia sed, posuere eget lacus.
+          Mauris vulputate mattis imperdiet. Nunc id aliquet libero, vitae
+          hendrerit purus. Praesent vestibulum urna ac egestas tempor. In
+          molestie, nunc sit amet sagittis dapibus, ligula enim fermentum mi,
+          lacinia molestie eros dui in tortor. Mauris fermentum pulvinar
+          faucibus. Curabitur laoreet eleifend purus, non tincidunt tortor
+          gravida nec. Nam eu lectus congue, commodo libero et, porttitor est.
+          Nullam tincidunt, nisi eu congue congue, magna justo commodo massa,
+          nec efficitur dui lectus non sem.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Nullam vehicula, ipsum quis lacinia tristique, elit nulla dignissim
+          augue, at pulvinar metus justo ac magna. Nullam nec nunc ac sapien
+          mollis cursus eu ac enim. Pellentesque a pharetra erat. Ut tempor
+          magna nisi, accumsan blandit lectus volutpat nec. Vivamus vel lorem
+          nec eros blandit dictum eget ac diam. Nulla nec turpis dolor. Morbi eu
+          euismod libero. Nam ut tortor at arcu porta tincidunt. In gravida
+          ligula fringilla ornare imperdiet. Nulla scelerisque ante erat,
+          efficitur dictum metus ullamcorper vel. Nam ac purus metus. Maecenas
+          eget tempus nulla. Ut magna lorem, efficitur ut ex a, semper aliquam
+          magna. Praesent lobortis, velit ac posuere mattis, justo est accumsan
+          turpis, id sagittis felis mi in lacus.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
+          consequat sem quis sem consequat, non aliquam est placerat. Cras
+          malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
+          velit et ex interdum, vel lobortis ante vestibulum. Nam placerat
+          lectus eu commodo efficitur. Pellentesque in nunc ac massa porttitor
+          eleifend ut efficitur sem. Aenean at magna auctor, posuere augue in,
+          ultrices arcu. Praesent dignissim augue ex, malesuada maximus metus
+          interdum a. Proin nec odio in nulla vestibulum.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
+          consequat sem quis sem consequat, non aliquam est placerat. Cras
+          malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
+          velit et ex interdum, vel lobortis ante vestibulum. Nam placerat
+          lectus eu commodo efficitur. Pellentesque in nunc ac massa porttitor
+          eleifend ut efficitur sem. Aenean at magna auctor, posuere augue in,
+          ultrices arcu. Praesent dignissim augue ex, malesuada maximus metus
+          interdum a. Proin nec odio in nulla vestibulum.
+        </p>
+      </Suspense>
+      <Suspense fallback={null}>
+        <p>
+          Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
+          consequat sem quis sem consequat, non aliquam est placerat. Cras
+          malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
+          velit et ex interdum, vel lobortis ante vestibulum. Nam placerat
+          lectus eu commodo efficitur. Pellentesque in nunc ac massa porttitor
+          eleifend ut efficitur sem. Aenean at magna auctor, posuere augue in,
+          ultrices arcu. Praesent dignissim augue ex, malesuada maximus metus
+          interdum a. Proin nec odio in nulla vestibulum.
+        </p>
+      </Suspense>
+    </SuspenseList>
+  );
+}
diff --git a/fixtures/ssr/src/components/Page.css b/fixtures/ssr/src/components/Page.css
new file mode 100644
index 00000000000..55c1d2791fe
--- /dev/null
+++ b/fixtures/ssr/src/components/Page.css
@@ -0,0 +1,16 @@
+.link {
+  font-weight: bold;
+  cursor: pointer;
+}
+.light-box {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #CCCCCC;
+  color: #333333;
+}
+.dark-box {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #333333;
+  color: #CCCCCC;
+}
diff --git a/fixtures/ssr/src/components/Page.js b/fixtures/ssr/src/components/Page.js
new file mode 100644
index 00000000000..1a4c6f79a3e
--- /dev/null
+++ b/fixtures/ssr/src/components/Page.js
@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+
+import Theme from './Theme';
+import Suspend from './Suspend';
+
+import './Page.css';
+
+const autofocusedInputs = [
+  <input key="0" autoFocus placeholder="Has auto focus" />,
+  <input key="1" autoFocus placeholder="Has auto focus" />,
+];
+
+export default class Page extends Component {
+  state = {active: false, value: ''};
+  handleClick = e => {
+    this.setState({active: true});
+  };
+  handleChange = e => {
+    this.setState({value: e.target.value});
+  };
+  componentDidMount() {
+    // Rerender on mount
+    this.setState({mounted: true});
+  }
+  render() {
+    const link = (
+      <a className="link" onClick={this.handleClick}>
+        Click Here
+      </a>
+    );
+    return (
+      <div className={this.context + '-box'}>
+        <Suspend>
+          <p suppressHydrationWarning={true}>
+            A random number: {Math.random()}
+          </p>
+          <p>Autofocus on page load: {autofocusedInputs}</p>
+          <p>{!this.state.active ? link : 'Thanks!'}</p>
+          {this.state.active && <p>Autofocus on update: {autofocusedInputs}</p>}
+          <p>
+            Controlled input:{' '}
+            <input value={this.state.value} onChange={this.handleChange} />
+          </p>
+        </Suspend>
+      </div>
+    );
+  }
+}
+Page.contextType = Theme;
diff --git a/fixtures/ssr/src/components/Page2.js b/fixtures/ssr/src/components/Page2.js
new file mode 100644
index 00000000000..04ece268e0a
--- /dev/null
+++ b/fixtures/ssr/src/components/Page2.js
@@ -0,0 +1,15 @@
+import React, {useContext} from 'react';
+
+import Theme from './Theme';
+import Suspend from './Suspend';
+
+import './Page.css';
+
+export default function Page2() {
+  let theme = useContext(Theme);
+  return (
+    <div className={theme + '-box'}>
+      <Suspend>Content of a different page</Suspend>
+    </div>
+  );
+}
diff --git a/fixtures/ssr/src/components/Suspend.js b/fixtures/ssr/src/components/Suspend.js
new file mode 100644
index 00000000000..9aac5493bee
--- /dev/null
+++ b/fixtures/ssr/src/components/Suspend.js
@@ -0,0 +1,22 @@
+let promise = null;
+let isResolved = false;
+
+export default function Suspend({children}) {
+  // This will suspend the content from rendering but only on the client.
+  // This is used to demo a slow loading app.
+  if (!isResolved) {
+    if (promise === null) {
+      promise = new Promise(resolve => {
+        setTimeout(
+          () => {
+            isResolved = true;
+            resolve();
+          },
+          typeof window === 'object' ? 6000 : 1000
+        );
+      });
+    }
+    throw promise;
+  }
+  return children;
+}
diff --git a/fixtures/ssr/src/components/Theme.js b/fixtures/ssr/src/components/Theme.js
new file mode 100644
index 00000000000..a37e8310dec
--- /dev/null
+++ b/fixtures/ssr/src/components/Theme.js
@@ -0,0 +1,25 @@
+import React, {createContext, useContext, useState} from 'react';
+
+const Theme = createContext('light');
+
+export default Theme;
+
+export function ThemeToggleButton({onChange}) {
+  let theme = useContext(Theme);
+  let [targetTheme, setTargetTheme] = useState(theme);
+  function toggleTheme() {
+    let newTheme = theme === 'light' ? 'dark' : 'light';
+    // High pri, responsive update.
+    setTargetTheme(newTheme);
+    // Perform the actual theme change in a separate update.
+    setTimeout(() => onChange(newTheme), 0);
+  }
+  if (targetTheme !== theme) {
+    return 'Switching to ' + targetTheme + '...';
+  }
+  return (
+    <a className="link" onClick={toggleTheme}>
+      Switch to {theme === 'light' ? 'Dark' : 'Light'} theme
+    </a>
+  );
+}
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
new file mode 100644
index 00000000000..bac5be6ec62
--- /dev/null
+++ b/fixtures/ssr/src/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {Profiler} from 'react';
+import {hydrateRoot} from 'react-dom/client';
+
+import App from './components/App';
+
+hydrateRoot(
+  document,
+  <Profiler id="root">
+    <App assets={window.assetManifest} />
+  </Profiler>
+);
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
new file mode 100644
index 00000000000..4460ce9f645
--- /dev/null
+++ b/fixtures/ssr/yarn.lock
@@ -0,0 +1,7093 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+abab@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+  integrity sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=
+
+abbrev@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==
+
+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@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  integrity sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=
+  dependencies:
+    acorn "^4.0.4"
+
+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@^3.0.0, 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@^4.0.4:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
+
+acorn@^5.5.0:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
+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@^4.7.0, ajv@^4.9.1:
+  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@^6.12.3:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+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"
+  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+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"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
+ansi-escapes@^1.1.0, ansi-escapes@^1.4.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.1.0:
+  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-html@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.5.tgz#0dcaa5a081206866bc240a3b773a184ea3b88b64"
+  integrity sha1-DcqloIEgaGa8JAo7dzoYTqO4i2Q=
+
+ansi-regex@^0.2.0, ansi-regex@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
+  integrity sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=
+
+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-styles@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
+  integrity sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=
+
+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.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"
+
+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=
+
+anymatch@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
+  dependencies:
+    micromatch "^2.1.5"
+    normalize-path "^2.0.0"
+
+append-transform@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  integrity sha1-126/jKlNJ24keja61EpLdKthGZE=
+  dependencies:
+    default-require-extensions "^1.0.0"
+
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+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"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
+  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"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.3.0.tgz#cb8a9984e2862711c83c80ade5b8f5ca0de2b467"
+  integrity sha1-y4qZhOKGJxHIPICt5bj1yg3itGc=
+  dependencies:
+    ast-types-flow "0.0.7"
+
+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@^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-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-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-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=
+
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
+
+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.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-flow@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
+async-each@^1.0.0:
+  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@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+  integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
+
+async@^1.3.0, async@^1.5.0:
+  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.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  dependencies:
+    lodash "^4.17.14"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
+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.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+autoprefixer@6.7.2:
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.2.tgz#172ab07b998ae9b957530928a59a40be54a45023"
+  integrity sha1-Fyqwe5mK6blXUwkopZpAvlSkUCM=
+  dependencies:
+    browserslist "^1.7.1"
+    caniuse-db "^1.0.30000618"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.11"
+    postcss-value-parser "^3.2.3"
+
+autoprefixer@^6.3.1:
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=
+  dependencies:
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.16"
+    postcss-value-parser "^3.2.3"
+
+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.8.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.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.22.1:
+  version "6.22.1"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.22.1.tgz#9c5fd658ba1772d28d721f6d25d968fc7ae21648"
+  integrity sha1-nF/WWLoXctKNch9tJdlo/HriFkg=
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-generator "^6.22.0"
+    babel-helpers "^6.22.0"
+    babel-messages "^6.22.0"
+    babel-register "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+    babel-traverse "^6.22.1"
+    babel-types "^6.22.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-core@^6.0.0, babel-core@^6.26.0:
+  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"
+    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.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
+babel-eslint@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
+  integrity sha1-imqITwhapwYK9pz8dzQcL5k3D7I=
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-traverse "^6.15.0"
+    babel-types "^6.15.0"
+    babylon "^6.13.0"
+    lodash.pickby "^4.6.0"
+
+babel-generator@^6.18.0, babel-generator@^6.22.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"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  integrity sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-builder-react-jsx@^6.22.0, babel-helper-builder-react-jsx@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
+  integrity sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA=
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
+
+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"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  integrity sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  integrity sha1-8luCz33BBDPFX3BZLVdGQArCLKo=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-function-name@^6.22.0, 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"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^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"
+
+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"
+
+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-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  integrity sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+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"
+  integrity sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=
+  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"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helpers@^6.22.0, 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@18.0.0, babel-jest@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-18.0.0.tgz#17ebba8cb3285c906d859e8707e4e79795fb65e3"
+  integrity sha1-F+u6jLMoXJBthZ6HB+Tnl5X7ZeM=
+  dependencies:
+    babel-core "^6.0.0"
+    babel-plugin-istanbul "^3.0.0"
+    babel-preset-jest "^18.0.0"
+
+babel-loader@6.2.10:
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
+  integrity sha1-re/CskIyDNXRXmWzHOoOixsC1LA=
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.11"
+    mkdirp "^0.5.1"
+    object-assign "^4.0.1"
+
+babel-messages@^6.22.0, 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.3.13:
+  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-istanbul@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-3.1.2.tgz#11d5abde18425ec24b5d648c7e0b5d25cd354a22"
+  integrity sha1-EdWr3hhCXsJLXWSMfgtdJc01SiI=
+  dependencies:
+    find-up "^1.1.2"
+    istanbul-lib-instrument "^1.4.2"
+    object-assign "^4.1.0"
+    test-exclude "^3.3.0"
+
+babel-plugin-jest-hoist@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-18.0.0.tgz#4150e70ecab560e6e7344adc849498072d34e12a"
+  integrity sha1-QVDnDsq1YObnNErchJSYBy004So=
+
+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"
+  integrity sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=
+
+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-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.3.13:
+  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:
+  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.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.13.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"
+  integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
+
+babel-plugin-transform-async-to-generator@^6.8.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"
+  integrity sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-class-properties@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.22.0.tgz#aa78f8134495c7de06c097118ba061844e1dc1d8"
+  integrity sha1-qnj4E0SVx94GwJcRi6BhhE4dwdg=
+  dependencies:
+    babel-helper-function-name "^6.22.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.22.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.3.13:
+  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.3.13:
+  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.6.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"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
+
+babel-plugin-transform-es2015-classes@^6.6.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"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.3.13:
+  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.6.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-duplicate-keys@^6.6.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha1-c+s9MQypaePvnskcU3QabxV2Qj4=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.6.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.3.13:
+  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.3.13:
+  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-amd@^6.24.1, babel-plugin-transform-es2015-modules-amd@^6.8.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.24.1, babel-plugin-transform-es2015-modules-commonjs@^6.6.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-modules-systemjs@^6.12.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.12.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha1-rJl+YoXNGO1hdq22B9YCNErThGg=
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.3.13:
+  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.6.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"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.3.13:
+  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.3.13:
+  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-sticky-regex@^6.3.13:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha1-AMHNsaynERLN8M9hJsLta0V8zbw=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.6.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-es2015-typeof-symbol@^6.6.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.3.13:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha1-04sS9C6nMj9yk4fxinxa4frrNek=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.8.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-flow-strip-types@^6.22.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.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.22.0.tgz#1d419b55e68d2e4f64a5ff3373bd67d73c8e83bc"
+  integrity sha1-HUGbVeaNLk9kpf8zc71n1zyOg7w=
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-constant-elements@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.22.0.tgz#4af456f80d283e8be00f00f12852354defa08ee1"
+  integrity sha1-SvRW+A0oPovgDwDxKFI1Te+gjuE=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-display-name@^6.22.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, 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"
+  integrity sha1-322AqdomEqEh5t3XVYvL7PBuY24=
+  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.22.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"
+  integrity sha1-ZqwSFT9c0tF7PBkmj0vwGX9E7NY=
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.22.0.tgz#48556b7dd4c3fe97d1c943bcd54fc3f2561c1817"
+  integrity sha1-SFVrfdTD/pfRyUO81U/D8lYcGBc=
+  dependencies:
+    babel-helper-builder-react-jsx "^6.22.0"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-react-jsx@^6.22.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.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.22.0.tgz#65740593a319c44522157538d690b84094617ea6"
+  integrity sha1-ZXQFk6MZxEUiFXU41pC4QJRhfqY=
+  dependencies:
+    regenerator-transform "0.9.8"
+
+babel-plugin-transform-regenerator@^6.6.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=
+  dependencies:
+    regenerator-transform "^0.10.0"
+
+babel-plugin-transform-runtime@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.22.0.tgz#10968d760bbf6517243081eec778e10fa828551c"
+  integrity sha1-EJaNdgu/ZRckMIHux3jhD6goVRw=
+  dependencies:
+    babel-runtime "^6.22.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-preset-env@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.2.1.tgz#659178f54df74a74765f796be4d290b5beeb3f5f"
+  integrity sha1-ZZF49U33SnR2X3lr5NKQtb7rP18=
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-syntax-trailing-function-commas "^6.13.0"
+    babel-plugin-transform-async-to-generator "^6.8.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.6.0"
+    babel-plugin-transform-es2015-classes "^6.6.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.6.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.6.0"
+    babel-plugin-transform-es2015-function-name "^6.3.13"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.8.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.6.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.12.0"
+    babel-plugin-transform-es2015-modules-umd "^6.12.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.6.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.3.13"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.6.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-exponentiation-operator "^6.8.0"
+    babel-plugin-transform-regenerator "^6.6.0"
+    browserslist "^1.4.0"
+    electron-to-chromium "^1.1.0"
+    invariant "^2.2.2"
+
+babel-preset-jest@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-18.0.0.tgz#84faf8ca3ec65aba7d5e3f59bbaed935ab24049e"
+  integrity sha1-hPr4yj7GWrp9Xj9Zu67ZNaskBJ4=
+  dependencies:
+    babel-plugin-jest-hoist "^18.0.0"
+
+babel-preset-react-app@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-2.2.0.tgz#3143bcf316049f78b5f9d0422fd7822ca4715ca4"
+  integrity sha1-MUO88xYEn3i1+dBCL9eCLKRxXKQ=
+  dependencies:
+    babel-plugin-transform-class-properties "6.22.0"
+    babel-plugin-transform-object-rest-spread "6.22.0"
+    babel-plugin-transform-react-constant-elements "6.22.0"
+    babel-plugin-transform-react-jsx "6.22.0"
+    babel-plugin-transform-react-jsx-self "6.22.0"
+    babel-plugin-transform-react-jsx-source "6.22.0"
+    babel-plugin-transform-regenerator "6.22.0"
+    babel-plugin-transform-runtime "6.22.0"
+    babel-preset-env "1.2.1"
+    babel-preset-react "6.22.0"
+    babel-runtime "6.22.0"
+
+babel-preset-react@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.22.0.tgz#7bc97e2d73eec4b980fb6b4e4e0884e81ccdc165"
+  integrity sha1-e8l+LXPuxLmA+2tOTgiE6BzNwWU=
+  dependencies:
+    babel-plugin-syntax-flow "^6.3.13"
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-flow-strip-types "^6.22.0"
+    babel-plugin-transform-react-display-name "^6.22.0"
+    babel-plugin-transform-react-jsx "^6.22.0"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+
+babel-register@^6.22.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"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
+  integrity sha1-HPi0rGfHek3bDbKuH3TeUqxMphE=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  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.22.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"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.15.0, babel-traverse@^6.18.0, babel-traverse@^6.22.1, 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"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.22.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.11.0, babylon@^6.13.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@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+  integrity sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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"
+    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"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  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"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
+binary-extensions@^1.0.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@2.9.6:
+  version "2.9.6"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.6.tgz#1fc3a6b1685267dc121b5ec89b32ce069d81ab7d"
+  integrity sha1-H8OmsWhSZ9wSG17ImzLOBp2Bq30=
+
+bluebird@^3.4.6:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+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"
+
+boolbase@^1.0.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"
+
+brace-expansion@^1.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"
+
+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:
+  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"
+    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"
+
+browser-resolve@^1.11.2:
+  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@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  integrity sha1-BnFJtmjfMcS1hTPgLQHoBthgjiw=
+  dependencies:
+    inherits "^2.0.1"
+
+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@^1.3.6, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.1, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=
+  dependencies:
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
+
+bser@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
+  integrity sha1-OBEWlwsqbe6lZG3RXdcnhES1YWk=
+  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"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+buffer@^4.9.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.1.1:
+  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=
+
+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==
+
+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"
+    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"
+
+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"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
+
+caniuse-api@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
+  integrity sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=
+  dependencies:
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000618, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30001208"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001208.tgz#8ddfaddceab26486ffe3f258e5cc43d4fa8728d4"
+  integrity sha512-GAfBXnzg9WDo0z/Noiio2KknZzxbrqQhbYMwPDb9ZEbVwttGA2T1+LqSt7enFdzbu7ykYuNfswgXJW7vdaUfZQ==
+
+cardinal@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-2.1.1.tgz#7cc1055d822d212954d07b085dea251cc7bc5505"
+  integrity sha1-fMEFXYItISlU0HsIXeolHMe8VQU=
+  dependencies:
+    ansicolors "~0.3.2"
+    redeyed "~2.1.0"
+
+case-sensitive-paths-webpack-plugin@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-1.1.4.tgz#8aaedd5699a86cac2b34cf40d9b4145758978472"
+  integrity sha1-iq7dVpmobKwrNM9A2bQUV1iXhHI=
+
+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"
+  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
+  integrity sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=
+  dependencies:
+    ansi-styles "^1.1.0"
+    escape-string-regexp "^1.0.0"
+    has-ansi "^0.1.0"
+    strip-ansi "^0.3.0"
+    supports-color "^0.2.0"
+
+chalk@1.1.3, 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"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.4.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.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.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==
+
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
+
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
+  dependencies:
+    chalk "^1.1.3"
+
+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"
+
+clean-css@4.2.x:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
+  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
+  dependencies:
+    source-map "~0.6.0"
+
+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-table@^0.3.1:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.6.tgz#e9d6aa859c7fe636981fd3787378c2a20bce92fc"
+  integrity sha512-ZkNZbnZjKERTY5NwC2SeMeLeifSPq/pubeRoTpdr3WchLlnZg6hEgvHkK5zL7KNFdd9PmHN8lxrENUwI3cE8vQ==
+  dependencies:
+    colors "1.0.3"
+
+cli-usage@^0.1.1:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/cli-usage/-/cli-usage-0.1.10.tgz#2c9d30a3824b48d161580a8f8d5dfe53d66b00d2"
+  integrity sha512-Q/s1S4Jz5LYI0LQ+XiFQCXkhMzn244ddyIffni8JIq/kL95DvQomVQ0cJC41c76hH9/FmZGY7rZB53y/bXHtRA==
+  dependencies:
+    marked "^0.7.0"
+    marked-terminal "^3.3.0"
+
+cli-width@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  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"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+
+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=
+
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  integrity sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=
+  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"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
+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"
+
+color-convert@^1.3.0, color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  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"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  integrity sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+  integrity sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  integrity sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+  integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
+
+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.17.x:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+  integrity sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=
+
+commander@~2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
+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==
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.5.2:
+  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.4.6:
+  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"
+
+concurrently@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.1.0.tgz#dc5ef0459090012604756668894c04b434ef90d1"
+  integrity sha1-3F7wRZCQASYEdWZoiUwEtDTvkNE=
+  dependencies:
+    bluebird "2.9.6"
+    chalk "0.5.1"
+    commander "2.6.0"
+    lodash "^4.5.1"
+    moment "^2.11.2"
+    rx "2.3.24"
+    spawn-default-shell "^1.1.0"
+    tree-kill "^1.1.0"
+
+connect-history-api-fallback@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
+  integrity sha1-5R0X+PDvDbkKZP20feMFFVbp8Wk=
+
+connect-history-api-fallback@^1.3.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==
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+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=
+
+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=
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+
+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-parser@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+  integrity sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==
+
+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==
+
+convert-source-map@^1.1.0, convert-source-map@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  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"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+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-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@^2.4.0, core-js@^2.5.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+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=
+
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  integrity sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+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"
+
+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.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  integrity sha1-ufx1u0oO1h3PHNXa6W6zDJw+UGw=
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+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"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
+
+css-loader@0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
+  integrity sha1-K6fyATG5NZdJaz6btQB4WknNKeo=
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    loader-utils "~0.2.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.4"
+
+css-select@^2.0.2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
+  integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+"cssnano@>=2.6.1 <4":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+  integrity sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+  integrity sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+"cssstyle@>= 0.2.37 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  integrity sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=
+  dependencies:
+    cssom "0.3.x"
+
+d@1, d@^1.0.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"
+
+damerau-levenshtein@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
+  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
+
+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"
+
+debug@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  integrity sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=
+  dependencies:
+    ms "0.7.1"
+
+debug@2.6.9, debug@^2.1.0, debug@^2.1.1, 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"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.0, debug@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  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.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
+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@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  integrity sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=
+  dependencies:
+    strip-bom "^2.0.0"
+
+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"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
+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=
+
+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-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-port@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.1.0.tgz#fde7574591ea3de74445782643c3f921b2a4618c"
+  integrity sha1-/edXRZHqPedERXgmQ8P5IbKkYYw=
+  dependencies:
+    debug "^2.6.0"
+
+diff@^3.0.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+
+doctrine@1.3.x:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.3.0.tgz#13e75682b55518424276f7c173783456ef913d26"
+  integrity sha1-E+dWgrVVGEJCdvfBc3g0Vu+RPSY=
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.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"
+
+dom-converter@^0.2:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+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.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.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+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, domutils@^1.7.0:
+  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"
+
+dotenv@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-2.0.0.tgz#bd759c357aaa70365e01c96b7b0bec08a6e0d949"
+  integrity sha1-vXWcNXqqcDZeAclrewvsCKbg2Uk=
+
+duplexer@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  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"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.1.0, electron-to-chromium@^1.2.7:
+  version "1.3.717"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz#78d4c857070755fb58ab64bcc173db1d51cbc25f"
+  integrity sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==
+
+emoji-regex@^6.1.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+  integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
+
+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.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  integrity sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+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.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0:
+  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"
+
+es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.14:
+  version "0.10.53"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
+  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
+
+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-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:
+  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-symbol@^3.1.1, es6-symbol@~3.1.1, es6-symbol@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
+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.0, 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.6.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  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-react-app@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-0.6.2.tgz#ee535cbaaf9e3576ea16b99afe720353d8730ec0"
+  integrity sha1-7lNcuq+eNXbqFrma/nIDU9hzDsA=
+
+eslint-import-resolver-node@^0.2.0:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.2.3.tgz#5add8106e8c928db2cba232bcd9efa846e3da16c"
+  integrity sha1-Wt2BBujJKNssuiMrzZ76hG49oWw=
+  dependencies:
+    debug "^2.2.0"
+    object-assign "^4.0.1"
+    resolve "^1.1.6"
+
+eslint-loader@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.6.0.tgz#38f9a1e6c602a4f1f3f3516289726e5d26e6e165"
+  integrity sha1-OPmh5sYCpPHz81FiiXJuXSbm4WU=
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.7"
+    object-assign "^4.0.1"
+
+eslint-module-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-1.0.0.tgz#c4a57fd3a53efd8426cc2d5550aadab9bbd05fd0"
+  integrity sha1-xKV/06U+/YQmzC1VUKraubvQX9A=
+  dependencies:
+    debug "2.2.0"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-flowtype@2.21.0:
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.21.0.tgz#a47e85abcdd181d37a336054bd552149ae387d9c"
+  integrity sha1-pH6Fq83RgdN6M2BUvVUhSa44fZw=
+  dependencies:
+    lodash "^4.15.0"
+
+eslint-plugin-import@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.0.1.tgz#dcfe96357d476b3f822570d42c29bec66f5d9c5c"
+  integrity sha1-3P6WNX1Haz+CJXDULCm+xm9dnFw=
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.2.0"
+    doctrine "1.3.x"
+    eslint-import-resolver-node "^0.2.0"
+    eslint-module-utils "^1.0.0"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    pkg-up "^1.0.0"
+
+eslint-plugin-jsx-a11y@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-4.0.0.tgz#779bb0fe7b08da564a422624911de10061e048ee"
+  integrity sha1-d5uw/nsI2lZKQiYkkR3hAGHgSO4=
+  dependencies:
+    aria-query "^0.3.0"
+    ast-types-flow "0.0.7"
+    damerau-levenshtein "^1.0.0"
+    emoji-regex "^6.1.0"
+    jsx-ast-utils "^1.0.0"
+    object-assign "^4.0.1"
+
+eslint-plugin-react@6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.4.1.tgz#7d1aade747db15892f71eee1fea4addf97bcfa2b"
+  integrity sha1-fRqt50fbFYkvce7h/qSt35e8+is=
+  dependencies:
+    doctrine "^1.2.2"
+    jsx-ast-utils "^1.3.1"
+
+eslint@3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.16.1.tgz#9bc31fc7341692cf772e80607508f67d711c5609"
+  integrity sha1-m8MfxzQWks93LoBgdQj2fXEcVgk=
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    escope "^3.6.0"
+    espree "^3.4.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 "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.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"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
+
+esprima@^4.0.0, 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==
+
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+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"
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
+
+eventsource@^0.1.3:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+  integrity sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=
+  dependencies:
+    original ">=0.0.5"
+
+eventsource@^1.0.7:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.1.0.tgz#00e8ca7c92109e94b0ddf32dac677d841028cfaf"
+  integrity sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==
+  dependencies:
+    original "^1.0.0"
+
+exec-sh@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
+  integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==
+  dependencies:
+    merge "^1.2.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=
+
+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"
+    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"
+
+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"
+
+express@^4.13.3, express@^4.14.0:
+  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.4.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
+  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
+  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"
+  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.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+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"
+    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"
+
+extract-text-webpack-plugin@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
+  integrity sha1-yVvzy6rEnclvHcbgclSfu2VMzSw=
+  dependencies:
+    async "^1.5.0"
+    loader-utils "^0.2.3"
+    webpack-sources "^0.1.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+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=
+
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
+faye-websocket@^0.11.3:
+  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"
+
+faye-websocket@~0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.7.3.tgz#cc4074c7f4a4dfd03af54dd65c354b135132ce11"
+  integrity sha1-zEB0x/Sk39A69U3WXDVLE1EyzhE=
+  dependencies:
+    websocket-driver ">=0.3.6"
+
+fb-watchman@^1.8.0, fb-watchman@^1.9.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.2.tgz#a24cf47827f82d38fb59a69ad70b76e3b6ae7383"
+  integrity sha1-okz0eCf4LTj7Waaa1wt247auc4M=
+  dependencies:
+    bser "1.0.2"
+
+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"
+
+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-loader@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.10.0.tgz#bbe6db7474ac92c7f54fdc197cf547e98b6b8e12"
+  integrity sha1-u+bbdHSsksf1T9wZfPVH6YtrjhI=
+  dependencies:
+    loader-utils "~0.2.5"
+
+file-uri-to-path@1.0.0:
+  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"
+  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
+
+fileset@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  integrity sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=
+  dependencies:
+    glob "^7.0.3"
+    minimatch "^3.0.3"
+
+filesize@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.3.0.tgz#53149ea3460e3b2e024962a51648aa572cf98122"
+  integrity sha1-UxSeo0YOOy4CSWKlFkiqVyz5gSI=
+
+fill-range@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+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@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  integrity sha1-yN765XyKUqinhPnjHFfHQumToLk=
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-up@^1.0.0, find-up@^1.1.2:
+  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"
+
+flat-cache@^1.2.1:
+  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"
+    graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
+follow-redirects@^1.0.0:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+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"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+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.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"
+    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=
+
+fs-extra@0.30.0, fs-extra@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  integrity sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+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.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.17.tgz#8537f3f12272678765b4fd6528c0f1f66f8f4558"
+  integrity sha1-hTfz8SJyZ4dltP1lKMDx9m+PRVg=
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fsevents@^1.0.0:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  integrity sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
+  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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==
+
+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"
+    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"
+
+generate-function@^2.0.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.3.1.tgz#f069617690c10c868e73b8465746764f97c3479f"
+  integrity sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==
+  dependencies:
+    is-property "^1.0.2"
+
+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"
+
+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"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
+
+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"
+
+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"
+
+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@^7.0.0, glob@^7.0.3, glob@^7.1.3:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  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"
+
+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==
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
+growly@^1.2.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.7.7"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
+  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.0"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+  integrity sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=
+
+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@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  integrity sha1-M0gdDxu/9gDdID11gSpqX7oALio=
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    har-schema "^2.0.0"
+
+has-ansi@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
+  integrity sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=
+  dependencies:
+    ansi-regex "^0.2.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"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
+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-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"
+    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"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  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"
+  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, 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"
+
+hawk@3.1.3, 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"
+
+he@1.2.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+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"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+html-comment-regex@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
+
+html-encoding-sniffer@^1.0.1:
+  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.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+  integrity sha1-QZSMr4XOgv7Tbk5qDtNxpmZDeeI=
+
+html-minifier@^3.1.0:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  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@2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.24.0.tgz#53697cea79a9f3cd1f8c239ac71f949d5673cacb"
+  integrity sha1-U2l86nmp880fjCOaxx+UnVZzyss=
+  dependencies:
+    bluebird "^3.4.6"
+    html-minifier "^3.1.0"
+    loader-utils "^0.2.16"
+    lodash "^4.16.4"
+    pretty-error "^2.0.2"
+    toposort "^1.0.0"
+
+htmlparser2@^3.10.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-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"
+  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-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.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.3.tgz#01d2709c79d41698bb01d4decc5e9da4e4a033d9"
+  integrity sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==
+
+http-proxy-middleware@0.17.3:
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d"
+  integrity sha1-lAOCFHFJuFYIT1U0dS1bWoFozR0=
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy-middleware@~0.17.1:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
+  integrity sha1-ZC6ISIUdZvCdTxJJEoRtuutBuDM=
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^3.1.0"
+    lodash "^4.17.2"
+    micromatch "^2.3.11"
+
+http-proxy@^1.16.2:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.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"
+    sshpk "^1.7.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-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+  integrity sha1-P5E2XKvmC3ftDruiS0VOPgnZWoI=
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+iconv-lite@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
+  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+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=
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore-styles@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-styles/-/ignore-styles-5.0.1.tgz#b49ef2274bdafcd8a4880a966bfe38d1a0bf4671"
+  integrity sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=
+
+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-export@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/import-export/-/import-export-1.0.1.tgz#2b705fc9d022a32cf86a43e41224b8e25ab6335e"
+  integrity sha1-K3BfydAioyz4akPkEiS44lq2M14=
+  dependencies:
+    node-hook "^0.4.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=
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
+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.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, 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.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+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"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+  integrity sha1-/s16GOfOXKar+5U+H4YhOknxYls=
+
+interpret@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
+
+invariant@^2.2.2:
+  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=
+
+ipaddr.js@1.9.1:
+  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@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
+
+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:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-ci@^1.0.9:
+  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.5.0"
+
+is-core-module@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
+  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+  dependencies:
+    has "^1.0.3"
+
+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-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"
+    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"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  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"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
+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:
+  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.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
+
+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-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-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:
+  version "2.20.5"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.20.5.tgz#5eca6a8232a687f68869b7361be1612e7512e5df"
+  integrity sha512-VTPuvvGQtxvCeghwspQu1rBgjYUT6FGxPlvFKbYuFtgc4ADsX3U5ihZOYN0qyU6u+d4X9xXb0IT5O6QpXKt87A==
+  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-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"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
+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"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+
+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-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-property@^1.0.0, is-property@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+  integrity sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=
+
+is-resolvable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+
+is-svg@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+  integrity sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=
+  dependencies:
+    html-comment-regex "^1.1.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-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
+
+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==
+
+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@^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=
+
+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.1.0-alpha.1:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.7.tgz#a86c770d2b03e11e3f778cd7aedd82d2722092aa"
+  integrity sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.2.1"
+    istanbul-lib-hook "^1.2.2"
+    istanbul-lib-instrument "^1.10.2"
+    istanbul-lib-report "^1.1.5"
+    istanbul-lib-source-maps "^1.2.6"
+    istanbul-reports "^1.5.1"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+
+istanbul-lib-hook@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz#bc6bf07f12a641fbf1c85391d0daa8f0aea6bf86"
+  integrity sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.1.1, istanbul-lib-instrument@^1.10.2, istanbul-lib-instrument@^1.4.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+  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.1"
+    semver "^5.3.0"
+
+istanbul-lib-report@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz#f2a657fc6282f96170aaf281eb30a458f7f4170c"
+  integrity sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==
+  dependencies:
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
+
+istanbul-lib-source-maps@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz#37b9ff661580f8fca11232752ee42e08c6675d8f"
+  integrity sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
+istanbul-reports@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.5.1.tgz#97e4dbf3b515e8c484caea15d6524eebd3ff4e1a"
+  integrity sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==
+  dependencies:
+    handlebars "^4.0.3"
+
+jest-changed-files@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-17.0.2.tgz#f5657758736996f590a51b87e5c9369d904ba7b7"
+  integrity sha1-9WV3WHNplvWQpRuH5ck2nZBLp7c=
+
+jest-cli@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-18.1.0.tgz#5ead36ecad420817c2c9baa2aa7574f63257b3d6"
+  integrity sha1-Xq027K1CCBfCybqiqnV09jJXs9Y=
+  dependencies:
+    ansi-escapes "^1.4.0"
+    callsites "^2.0.0"
+    chalk "^1.1.1"
+    graceful-fs "^4.1.6"
+    is-ci "^1.0.9"
+    istanbul-api "^1.1.0-alpha.1"
+    istanbul-lib-coverage "^1.0.0"
+    istanbul-lib-instrument "^1.1.1"
+    jest-changed-files "^17.0.2"
+    jest-config "^18.1.0"
+    jest-environment-jsdom "^18.1.0"
+    jest-file-exists "^17.0.0"
+    jest-haste-map "^18.1.0"
+    jest-jasmine2 "^18.1.0"
+    jest-mock "^18.0.0"
+    jest-resolve "^18.1.0"
+    jest-resolve-dependencies "^18.1.0"
+    jest-runtime "^18.1.0"
+    jest-snapshot "^18.1.0"
+    jest-util "^18.1.0"
+    json-stable-stringify "^1.0.0"
+    node-notifier "^4.6.1"
+    sane "~1.4.1"
+    strip-ansi "^3.0.1"
+    throat "^3.0.0"
+    which "^1.1.1"
+    worker-farm "^1.3.1"
+    yargs "^6.3.0"
+
+jest-config@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-18.1.0.tgz#6111740a6d48aab86ff5a9e6ab0b98bd993b6ff4"
+  integrity sha1-YRF0Cm1Iqrhv9anmqwuYvZk7b/Q=
+  dependencies:
+    chalk "^1.1.1"
+    jest-environment-jsdom "^18.1.0"
+    jest-environment-node "^18.1.0"
+    jest-jasmine2 "^18.1.0"
+    jest-mock "^18.0.0"
+    jest-resolve "^18.1.0"
+    jest-util "^18.1.0"
+    json-stable-stringify "^1.0.0"
+
+jest-diff@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-18.1.0.tgz#4ff79e74dd988c139195b365dc65d87f606f4803"
+  integrity sha1-T/eedN2YjBORlbNl3GXYf2BvSAM=
+  dependencies:
+    chalk "^1.1.3"
+    diff "^3.0.0"
+    jest-matcher-utils "^18.1.0"
+    pretty-format "^18.1.0"
+
+jest-environment-jsdom@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-18.1.0.tgz#18b42f0c4ea2bae9f36cab3639b1e8f8c384e24e"
+  integrity sha1-GLQvDE6iuunzbKs2ObHo+MOE4k4=
+  dependencies:
+    jest-mock "^18.0.0"
+    jest-util "^18.1.0"
+    jsdom "^9.9.1"
+
+jest-environment-node@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-18.1.0.tgz#4d6797572c8dda99acf5fae696eb62945547c779"
+  integrity sha1-TWeXVyyN2pms9frmlutilFVHx3k=
+  dependencies:
+    jest-mock "^18.0.0"
+    jest-util "^18.1.0"
+
+jest-file-exists@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/jest-file-exists/-/jest-file-exists-17.0.0.tgz#7f63eb73a1c43a13f461be261768b45af2cdd169"
+  integrity sha1-f2Prc6HEOhP0Yb4mF2i0WvLN0Wk=
+
+jest-haste-map@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-18.1.0.tgz#06839c74b770a40c1a106968851df8d281c08375"
+  integrity sha1-BoOcdLdwpAwaEGlohR340oHAg3U=
+  dependencies:
+    fb-watchman "^1.9.0"
+    graceful-fs "^4.1.6"
+    micromatch "^2.3.11"
+    sane "~1.4.1"
+    worker-farm "^1.3.1"
+
+jest-jasmine2@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-18.1.0.tgz#094e104c2c189708766c77263bb2aecb5860a80b"
+  integrity sha1-CU4QTCwYlwh2bHcmO7Kuy1hgqAs=
+  dependencies:
+    graceful-fs "^4.1.6"
+    jest-matcher-utils "^18.1.0"
+    jest-matchers "^18.1.0"
+    jest-snapshot "^18.1.0"
+    jest-util "^18.1.0"
+
+jest-matcher-utils@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-18.1.0.tgz#1ac4651955ee2a60cef1e7fcc98cdfd773c0f932"
+  integrity sha1-GsRlGVXuKmDO8ef8yYzf13PA+TI=
+  dependencies:
+    chalk "^1.1.3"
+    pretty-format "^18.1.0"
+
+jest-matchers@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matchers/-/jest-matchers-18.1.0.tgz#0341484bf87a1fd0bac0a4d2c899e2b77a3f1ead"
+  integrity sha1-A0FIS/h6H9C6wKTSyJnit3o/Hq0=
+  dependencies:
+    jest-diff "^18.1.0"
+    jest-matcher-utils "^18.1.0"
+    jest-util "^18.1.0"
+    pretty-format "^18.1.0"
+
+jest-mock@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-18.0.0.tgz#5c248846ea33fa558b526f5312ab4a6765e489b3"
+  integrity sha1-XCSIRuoz+lWLUm9TEqtKZ2XkibM=
+
+jest-resolve-dependencies@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-18.1.0.tgz#8134fb5caf59c9ed842fe0152ab01c52711f1bbb"
+  integrity sha1-gTT7XK9Zye2EL+AVKrAcUnEfG7s=
+  dependencies:
+    jest-file-exists "^17.0.0"
+    jest-resolve "^18.1.0"
+
+jest-resolve@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-18.1.0.tgz#6800accb536658c906cd5e29de412b1ab9ac249b"
+  integrity sha1-aACsy1NmWMkGzV4p3kErGrmsJJs=
+  dependencies:
+    browser-resolve "^1.11.2"
+    jest-file-exists "^17.0.0"
+    jest-haste-map "^18.1.0"
+    resolve "^1.2.0"
+
+jest-runtime@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-18.1.0.tgz#3abfd687175b21fc3b85a2b8064399e997859922"
+  integrity sha1-Or/WhxdbIfw7haK4BkOZ6ZeFmSI=
+  dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^18.0.0"
+    babel-plugin-istanbul "^3.0.0"
+    chalk "^1.1.3"
+    graceful-fs "^4.1.6"
+    jest-config "^18.1.0"
+    jest-file-exists "^17.0.0"
+    jest-haste-map "^18.1.0"
+    jest-mock "^18.0.0"
+    jest-resolve "^18.1.0"
+    jest-snapshot "^18.1.0"
+    jest-util "^18.1.0"
+    json-stable-stringify "^1.0.0"
+    micromatch "^2.3.11"
+    yargs "^6.3.0"
+
+jest-snapshot@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-18.1.0.tgz#55b96d2ee639c9bce76f87f2a3fd40b71c7a5916"
+  integrity sha1-VbltLuY5ybznb4fyo/1Atxx6WRY=
+  dependencies:
+    jest-diff "^18.1.0"
+    jest-file-exists "^17.0.0"
+    jest-matcher-utils "^18.1.0"
+    jest-util "^18.1.0"
+    natural-compare "^1.4.0"
+    pretty-format "^18.1.0"
+
+jest-util@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-18.1.0.tgz#3a99c32114ab17f84be094382527006e6d4bfc6a"
+  integrity sha1-OpnDIRSrF/hL4JQ4JScAbm1L/Go=
+  dependencies:
+    chalk "^1.1.1"
+    diff "^3.0.0"
+    graceful-fs "^4.1.6"
+    jest-file-exists "^17.0.0"
+    jest-mock "^18.0.0"
+    mkdirp "^0.5.1"
+
+jest@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-18.1.0.tgz#bcebf1e203dee5c2ad2091c805300a343d9e6c7d"
+  integrity sha1-vOvx4gPe5cKtIJHIBTAKND2ebH0=
+  dependencies:
+    jest-cli "^18.1.0"
+
+js-base64@^2.1.9:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
+
+"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-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.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^9.9.1:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+  integrity sha1-6MVG//ywbADUgzyoRBD+1/igl9Q=
+  dependencies:
+    abab "^1.0.3"
+    acorn "^4.0.4"
+    acorn-globals "^3.1.0"
+    array-equal "^1.0.0"
+    content-type-parser "^1.0.1"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    escodegen "^1.6.1"
+    html-encoding-sniffer "^1.0.1"
+    nwmatcher ">= 1.3.9 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.79.0"
+    sax "^1.2.1"
+    symbol-tree "^3.2.1"
+    tough-cookie "^2.3.2"
+    webidl-conversions "^4.0.0"
+    whatwg-encoding "^1.0.1"
+    whatwg-url "^4.3.0"
+    xml-name-validator "^2.0.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@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+
+json-loader@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
+  integrity sha1-i6oTZaYy9Yo8RtIBdfxgAsluN94=
+
+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@^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:
+  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, json3@^3.3.3:
+  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.0, json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
+  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=
+
+jsonpointer@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.1.0.tgz#501fb89986a2389765ba09e6053299ceb4f2c2cc"
+  integrity sha512-CXcRvMyTlnR53xMcKnuMzfCA5i/nfblTnnr74CZb6C4vG39eu6w51t7nKmU5MfLfbTgGItliNyjO/ciNPDqClg==
+
+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"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.1:
+  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=
+
+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"
+  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.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk=
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
+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"
+
+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"
+
+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"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+lodash._arraycopy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
+  integrity sha1-due3wfH7klRzdIeKVi7Qaj5Q9uE=
+
+lodash._arrayeach@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz#bab156b2a90d3f1bbd5c653403349e5e5933ef9e"
+  integrity sha1-urFWsqkNPxu9XGU0AzSeXlkz754=
+
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  integrity sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._baseclone@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseclone/-/lodash._baseclone-3.3.0.tgz#303519bf6393fe7e42f34d8b630ef7794e3542b7"
+  integrity sha1-MDUZv2OT/n5C802LYw73eU41Qrc=
+  dependencies:
+    lodash._arraycopy "^3.0.0"
+    lodash._arrayeach "^3.0.0"
+    lodash._baseassign "^3.0.0"
+    lodash._basefor "^3.0.0"
+    lodash.isarray "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+  integrity sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=
+
+lodash._basefor@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash._basefor/-/lodash._basefor-3.0.3.tgz#7550b4e9218ef09fad24343b612021c79b4c20c2"
+  integrity sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI=
+
+lodash._bindcallback@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
+  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
+lodash.clonedeep@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-3.0.2.tgz#a0a1e40d82a5ea89ff5b147b8444ed63d92827db"
+  integrity sha1-oKHkDYKl6on/WxR7hETtY9koJ9s=
+  dependencies:
+    lodash._baseclone "^3.0.0"
+    lodash._bindcallback "^3.0.0"
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+  integrity sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+  integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+  integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+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.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+  integrity sha1-feoh2MGNdwOifHBMFdO4SmfjOv8=
+
+lodash.toarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
+  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
+
+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@>=3.5 <5", lodash@^4.0.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.1:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
+loose-envify@^1.0.0, loose-envify@^1.1.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"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
+
+lru-cache@^4.0.1:
+  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"
+
+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"
+
+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-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"
+
+marked-terminal@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/marked-terminal/-/marked-terminal-3.3.0.tgz#25ce0c0299285998c7636beaefc87055341ba1bd"
+  integrity sha512-+IUQJ5VlZoAFsM5MHNT7g3RHSkA3eETqhRCdXv4niUMAKHQ7lb1yvAcuGPmm4soxhmtX13u4Li6ZToXtvSEH+A==
+  dependencies:
+    ansi-escapes "^3.1.0"
+    cardinal "^2.1.1"
+    chalk "^2.4.1"
+    cli-table "^0.3.1"
+    node-emoji "^1.4.1"
+    supports-hyperlinks "^1.0.1"
+
+marked@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
+  integrity sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==
+
+math-expression-evaluator@^1.2.14:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.3.7.tgz#1b62225db86af06f7ea1fd9576a34af605a5b253"
+  integrity sha512-nrbaifCl42w37hYd6oRLvoymFK42tWB+WQTMFtksDGQMi5GvlJwnz/CsS30FFAISFLtX+A0csJ0xLiuuyyec7w==
+
+math-random@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
+  integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
+
+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=
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+  integrity sha1-8rslNovBIeORwlIN6Slpyu4KApA=
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  integrity sha1-e8xrYp46Q+hx1+Kaymrop/FcuyA=
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+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-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@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
+  integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
+
+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:
+  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"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+micromatch@^3.1.10:
+  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"
+    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"
+
+mime-db@1.47.0, "mime-db@>= 1.43.0 < 2":
+  version "1.47.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
+  integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
+
+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.30"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
+  integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
+  dependencies:
+    mime-db "1.47.0"
+
+mime@1.2.x:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
+  integrity sha1-WCA+7Ybjpe8XrtK32evUfwpg3RA=
+
+mime@1.6.0, mime@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+minimatch@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  integrity sha1-Kk5AkLlrLbBqnX3wEFWmKnfJt3Q=
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, 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@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+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=
+
+mixin-deep@^1.2.0:
+  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.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+moment@^2.11.2:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+  integrity sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+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==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+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=
+
+nan@^2.12.1, nan@^2.3.0:
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
+  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
+
+nanomatch@^1.2.9:
+  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-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"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+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.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+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=
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
+  dependencies:
+    lower-case "^1.1.1"
+
+node-emoji@^1.4.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
+  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
+  dependencies:
+    lodash.toarray "^4.4.0"
+
+node-fetch@^1.6.3:
+  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-hook@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/node-hook/-/node-hook-0.4.1.tgz#1016a106e93ebd959fd337cbe35fa6397fa9d61c"
+  integrity sha1-EBahBuk+vZWf0zfL41+mOX+p1hw=
+
+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.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+  integrity sha1-PicsCBnjCJNeJmdECNevDhSRuDs=
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
+node-notifier@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-4.6.1.tgz#056d14244f3dcc1ceadfe68af9cff0c5473a33f3"
+  integrity sha1-BW0UJE89zBzq3+aK+c/wxUc6M/M=
+  dependencies:
+    cli-usage "^0.1.1"
+    growly "^1.2.0"
+    lodash.clonedeep "^3.0.0"
+    minimist "^1.1.1"
+    semver "^5.1.0"
+    shellwords "^0.1.0"
+    which "^1.0.5"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.39"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
+  integrity sha512-OsJV74qxnvz/AMGgcfZoDaeDXKD3oY3QVIbBmwszTFkRisTSXbMQyn4UWzUMOtA5SVhrBZOTp0wcoSBgfMfMmQ==
+  dependencies:
+    detect-libc "^1.0.2"
+    hawk "3.1.3"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
+
+nopt@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
+  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
+normalize-package-data@^2.3.2:
+  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"
+    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:
+  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-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+normalize-url@^1.4.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.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.2:
+  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"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
+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=
+
+"nwmatcher@>= 1.3.9 < 2.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
+  integrity sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==
+
+oauth-sign@~0.8.1:
+  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.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-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-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.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"
+
+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"
+
+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.3, 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"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+  integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
+
+open@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
+  integrity sha1-QsPhjslUZra/DcQvOilFw/DK2Pw=
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  integrity sha1-erwi5kTf9jsKltWrfyeQwPAavJU=
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@~0.6.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"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  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"
+
+original@>=0.0.5, 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.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+  integrity sha1-Y/xMzuXS13Y9Jrv4YBB45sLgBE8=
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
+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-tmpdir@^1.0.0, os-tmpdir@^1.0.1:
+  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:
+  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"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
+
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
+  dependencies:
+    no-case "^2.2.0"
+
+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@^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"
+
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+  integrity sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=
+
+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-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-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:
+  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-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"
+  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"
+
+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=
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+  integrity sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=
+
+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=
+
+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=
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
+  dependencies:
+    find-up "^1.0.0"
+
+pkg-up@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-1.0.0.tgz#3e08fb461525c4421624a33b9f7e6d0af5b05a26"
+  integrity sha1-Pgj7RhUlxEIWJKM7n35tCvWwWiY=
+  dependencies:
+    find-up "^1.0.0"
+
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+  integrity sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=
+
+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-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  integrity sha1-d7rnypKK2FcW4v2kLyYb98HWW14=
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
+  integrity sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+  integrity sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  integrity sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+  integrity sha1-uavye4isGIFYpesSq8riAmO5GTI=
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  integrity sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  integrity sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+  integrity sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec"
+  integrity sha512-T53GVFsdinJhgwm7rg1BzbeBRomOg9y5MBVhGcsV0CxurUdVj1UlPdKtn7aqYA/c/QVkzKMjq2bSV5dKG5+AwQ==
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-load-config@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  integrity sha1-U56a/J3chiASHr+djDZz4M5Q0oo=
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  integrity sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  integrity sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.2.2.tgz#bbf4e19a8cde85597e0c9bfd96015fe775a157ac"
+  integrity sha1-u/ThmozehVl+DJv9lgFf53WhV6w=
+  dependencies:
+    loader-utils "^0.2.16"
+    object-assign "^4.1.0"
+    postcss "^5.2.9"
+    postcss-load-config "^1.1.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  integrity sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+  integrity sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
+  integrity sha1-0d9d+qexrMO+VT8OnhDofGG19yE=
+  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+  integrity sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  integrity sha1-S1jttWZB66fIR0qzUmyv17vey2k=
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  integrity sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
+  integrity sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+  integrity sha1-ssapjAByz5G5MtGkllCBFDEXNb8=
+  dependencies:
+    alphanum-sort "^1.0.2"
+    has "^1.0.1"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.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.0.1:
+  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.0.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.1.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-normalize-charset@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+  integrity sha1-757nEhLX/nWceO0WL2HtYrXLk/E=
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+  integrity sha1-EI90s/L82viRov+j6kWSJ5/HgiI=
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+  integrity sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+  integrity sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+  integrity sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  integrity sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  integrity sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+  integrity sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  integrity sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, 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-zindex@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+  integrity sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.11, postcss@^5.2.16, postcss@^5.2.9:
+  version "5.2.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
+  integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.1:
+  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.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
+
+pretty-error@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^2.0.4"
+
+pretty-format@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-18.1.0.tgz#fb65a86f7a7f9194963eee91865c1bcf1039e284"
+  integrity sha1-+2Wob3p/kZSWPu6RhlwbzxA54oQ=
+  dependencies:
+    ansi-styles "^2.2.1"
+
+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==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.0:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+progress@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
+
+promise@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  integrity sha1-SJZUxpJha4qlWwck+oCbt9tJxb8=
+  dependencies:
+    asap "~2.0.3"
+
+proxy-addr@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
+  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.1"
+
+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.28:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
+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.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.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==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+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.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+  integrity sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=
+
+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@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
+  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"
+  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.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+randomatic@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+range-parser@^1.0.3, 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"
+
+rc@^1.1.7:
+  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-dev-utils@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-0.5.2.tgz#50d0b962d3a94b6c2e8f2011ed6468e4124bc410"
+  integrity sha1-UNC5YtOpS2wujyAR7WRo5BJLxBA=
+  dependencies:
+    ansi-html "0.0.5"
+    chalk "1.1.3"
+    escape-string-regexp "1.0.5"
+    filesize "3.3.0"
+    gzip-size "3.0.0"
+    html-entities "1.2.0"
+    opn "4.0.2"
+    recursive-readdir "2.1.1"
+    sockjs-client "1.0.1"
+    strip-ansi "3.0.1"
+
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-scripts@0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-0.9.5.tgz#e9f05c8427e27131662a9b9d7a9786d1ff16bb3f"
+  integrity sha1-6fBchCficTFmKpudepeG0f8Wuz8=
+  dependencies:
+    autoprefixer "6.7.2"
+    babel-core "6.22.1"
+    babel-eslint "7.1.1"
+    babel-jest "18.0.0"
+    babel-loader "6.2.10"
+    babel-preset-react-app "^2.2.0"
+    babel-runtime "^6.20.0"
+    case-sensitive-paths-webpack-plugin "1.1.4"
+    chalk "1.1.3"
+    connect-history-api-fallback "1.3.0"
+    cross-spawn "4.0.2"
+    css-loader "0.26.1"
+    detect-port "1.1.0"
+    dotenv "2.0.0"
+    eslint "3.16.1"
+    eslint-config-react-app "^0.6.2"
+    eslint-loader "1.6.0"
+    eslint-plugin-flowtype "2.21.0"
+    eslint-plugin-import "2.0.1"
+    eslint-plugin-jsx-a11y "4.0.0"
+    eslint-plugin-react "6.4.1"
+    extract-text-webpack-plugin "1.0.1"
+    file-loader "0.10.0"
+    fs-extra "0.30.0"
+    html-webpack-plugin "2.24.0"
+    http-proxy-middleware "0.17.3"
+    jest "18.1.0"
+    json-loader "0.5.4"
+    object-assign "4.1.1"
+    postcss-loader "1.2.2"
+    promise "7.1.1"
+    react-dev-utils "^0.5.2"
+    style-loader "0.13.1"
+    url-loader "0.5.7"
+    webpack "1.14.0"
+    webpack-dev-server "1.16.2"
+    webpack-manifest-plugin "1.1.0"
+    whatwg-fetch "2.0.2"
+  optionalDependencies:
+    fsevents "1.0.17"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+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@^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.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  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@^3.1.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.0.0:
+  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"
+
+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"
+
+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"
+
+recursive-readdir@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.1.1.tgz#a01cfc7f7f38a53ec096a096f63a50489c3e297c"
+  integrity sha1-oBz8f384pT7AlqCW9jpQSJw+KXw=
+  dependencies:
+    minimatch "3.0.3"
+
+redeyed@~2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-2.1.1.tgz#8984b5815d99cb220469c99eeeffe38913e6cc0b"
+  integrity sha1-iYS1gV2ZyyIEacme7v/jiRPmzAs=
+  dependencies:
+    esprima "~4.0.0"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  integrity sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f"
+  integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
+regenerate@^1.2.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.10.0:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+  integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+regenerator-transform@0.9.8:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"
+  integrity sha1-D4i7K8A5Mt23trcxLmgHjwECbWw=
+  dependencies:
+    babel-runtime "^6.18.0"
+    babel-types "^6.19.0"
+    private "^0.1.6"
+
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
+  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"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
+
+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"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
+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=
+
+renderkid@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.5.tgz#483b1ac59c6601ab30a7a596a5965cabccfdd0a5"
+  integrity sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==
+  dependencies:
+    css-select "^2.0.2"
+    dom-converter "^0.2"
+    htmlparser2 "^3.10.1"
+    lodash "^4.17.20"
+    strip-ansi "^3.0.0"
+
+repeat-element@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+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"
+
+request@2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  integrity sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+request@^2.79.0:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  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.3"
+    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.5.0"
+    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@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+  integrity sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=
+
+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-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-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-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.10.0, resolve@^1.2.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+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"
+
+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==
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.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:
+    glob "^7.1.3"
+
+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=
+
+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"
+
+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=
+
+rx@2.3.24:
+  version "2.3.24"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
+  integrity sha1-FPlQpCF9fjXapxu8vljv9o6ksrc=
+
+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.0, safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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.2 < 3.0.0", 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"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sane@~1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-1.4.1.tgz#88f763d74040f5f0c256b6163db399bf110ac715"
+  integrity sha1-iPdj10BA9fDCVrYWPbOZvxEKxxU=
+  dependencies:
+    exec-sh "^0.2.0"
+    fb-watchman "^1.8.0"
+    minimatch "^3.0.2"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+    watch "~0.10.0"
+
+sax@^1.2.1, sax@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+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"
+
+serve-index@^1.7.2:
+  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-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.4:
+  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=
+
+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.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
+
+signal-exit@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+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@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=
+
+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"
+    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"
+  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"
+    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"
+
+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"
+
+sockjs-client@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.0.1.tgz#8943ae05b46547bc2054816c409002cf5e2fe026"
+  integrity sha1-iUOuBbRlR7wgVIFsQJACz14v4CY=
+  dependencies:
+    debug "^2.1.0"
+    eventsource "^0.1.3"
+    faye-websocket "~0.7.3"
+    inherits "^2.0.1"
+    json3 "^3.3.2"
+    url-parse "^1.0.1"
+
+sockjs-client@^1.0.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.5.1.tgz#256908f6d5adfb94dabbdbd02c66362cca0f9ea6"
+  integrity sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==
+  dependencies:
+    debug "^3.2.6"
+    eventsource "^1.0.7"
+    faye-websocket "^0.11.3"
+    inherits "^2.0.4"
+    json3 "^3.3.3"
+    url-parse "^1.5.1"
+
+sockjs@^0.3.15:
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.21.tgz#b34ffb98e796930b60a0cfa11904d6a339a7d417"
+  integrity sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==
+  dependencies:
+    faye-websocket "^0.11.3"
+    uuid "^3.4.0"
+    websocket-driver "^0.7.4"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^0.1.4, source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+  integrity sha1-xVCyq1Qn9rPyH1r+rYjE9Vh7IQY=
+
+source-map-resolve@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    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.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-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
+  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.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"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
+  dependencies:
+    amdefine ">=0.0.4"
+
+spawn-default-shell@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/spawn-default-shell/-/spawn-default-shell-1.1.0.tgz#095439d44c4b7c0aff56a53929fbaab87878e7c6"
+  integrity sha1-CVQ51ExLfAr/VqU5KfuquHh458Y=
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz#e9c18a410e5ed7e12442a549fbd8afa767038d65"
+  integrity sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==
+
+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"
+
+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.16.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
+  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+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"
+
+"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=
+
+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-cache@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/stream-cache/-/stream-cache-0.0.2.tgz#1ac5ad6832428ca55667dbdee395dad4e6db118f"
+  integrity sha1-GsWtaDJCjKVWZ9ve45Xa1ObbEY8=
+
+stream-http@^2.3.1:
+  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"
+
+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"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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@^1.0.2 || 2", string-width@^2.0.0:
+  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_decoder@^0.10.25:
+  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.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@~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.6"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
+  integrity sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==
+
+strip-ansi@3.0.1, 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@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
+  integrity sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=
+  dependencies:
+    ansi-regex "^0.2.1"
+
+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-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-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=
+
+style-loader@0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  integrity sha1-RoKA77wEcwI806bNVuM7Wh1/w6k=
+  dependencies:
+    loader-utils "^0.2.7"
+
+supports-color@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
+  integrity sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=
+
+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.0, supports-color@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
+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"
+
+svgo@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+  integrity sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+symbol-tree@^3.2.1:
+  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@^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 "^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"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+  integrity sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=
+
+tar-pack@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
+  integrity sha512-PPRybI9+jM5tjtCbN2cxmmRU7YmqT3Zv/UDy48tAh2XRkLa9bAORtSWLkVc13+GJF+cdTh1yEnHEk3cpTaL5Kg==
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
+  integrity sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.12"
+    inherits "2"
+
+test-exclude@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-3.3.0.tgz#7a17ca1239988c98367b0621456dbb7d4bc38977"
+  integrity sha1-ehfKEjmYjJg2ewYhRW27fUvDiXc=
+  dependencies:
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+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=
+
+throat@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-3.2.0.tgz#50cb0670edbc40237b9e347d7e1f88e4620af836"
+  integrity sha512-/EY8VpvlqJ+sFtLPeOgc8Pl7kQVOWv0woD87KTXVHPIAE842FGT+rokxIhe8xIUP1cfgrkt0as0vDLjDiMtr8w==
+
+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=
+
+time-stamp@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.2.0.tgz#917e0a66905688790ec7bbbde04046259af83f57"
+  integrity sha512-zxke8goJQpBeEgD82CXABeMh0LSJcj7CXEd0OHOg45HgcofF7pxNwZm9+RknpxpDhwN4gFpySkApKfFYfRQnUA==
+
+timers-browserify@^2.0.2:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
+
+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-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-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-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"
+
+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"
+
+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==
+
+toposort@^1.0.0:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
+  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
+
+tough-cookie@^2.3.2, tough-cookie@~2.5.0:
+  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.28"
+    punycode "^2.1.1"
+
+tough-cookie@~2.3.0:
+  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"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
+tree-kill@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+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=
+
+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"
+
+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-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"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.0.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d"
+  integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+uglify-js@3.4.x:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
+  dependencies:
+    commander "~2.19.0"
+    source-map "~0.6.1"
+
+uglify-js@^3.1.4:
+  version "3.13.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.4.tgz#592588bb9f47ae03b24916e2471218d914955574"
+  integrity sha512-kv7fCkIXyQIilD5/yQy8O+uagsYIOt5cZvs890W40/e/rvjMSzJw81o9Bg0tkURxzZBROtDQhW2LFjOGoK3RZw==
+
+uglify-js@~2.7.3:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
+  integrity sha1-RhLAx7qu4rp8SH3kkErhIgefLKg=
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.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"
+  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+  integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
+
+union-value@^1.0.0:
+  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 "^2.0.1"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
+
+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"
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  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-loader@0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"
+  integrity sha1-Z+h3l1n4AA2nSZSQZoDJQ6mwkl0=
+  dependencies:
+    loader-utils "0.2.x"
+    mime "1.2.x"
+
+url-parse@^1.0.1, url-parse@^1.4.3, url-parse@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
+  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
+  dependencies:
+    querystringify "^2.1.1"
+    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"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  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"
+  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:
+    os-homedir "^1.0.0"
+
+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@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"
+
+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:
+    inherits "2.0.3"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+
+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.3.2, uuid@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+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"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  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"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vendors@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
+
+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"
+    extsprintf "^1.2.0"
+
+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"
+
+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.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
+  integrity sha1-d3mLLaD5kQ1ZXxrOWwwiWFIfIdw=
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  integrity sha1-Yuqkq15bo1/fwBgnVibjwPXj+ws=
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
+webidl-conversions@^4.0.0:
+  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-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  integrity sha1-/FcViMhVjad76e+23r3Fo7FyvcI=
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@^1.4.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
+  integrity sha512-FCrqPy1yy/sN6U/SaEZcHKRXGlqU0DUaEBL45jkUYoB8foVb6wCnbIJ1HKIx+qUFTW+3JpVcCJCxZ8VATL4e+A==
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.5.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    time-stamp "^2.0.0"
+
+webpack-dev-server@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-1.16.2.tgz#8bebc2c4ce1c45a15c72dd769d9ba08db306a793"
+  integrity sha1-i+vCxM4cRaFcct12nZugjbMGp5M=
+  dependencies:
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    express "^4.13.3"
+    http-proxy-middleware "~0.17.1"
+    open "0.0.5"
+    optimist "~0.6.1"
+    serve-index "^1.7.2"
+    sockjs "^0.3.15"
+    sockjs-client "^1.0.3"
+    stream-cache "~0.0.1"
+    strip-ansi "^3.0.0"
+    supports-color "^3.1.1"
+    webpack-dev-middleware "^1.4.0"
+
+webpack-manifest-plugin@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.1.0.tgz#6b6c718aade8a2537995784b46bd2e9836057caa"
+  integrity sha1-a2xxiq3oolN5lXhLRr0umDYFfKo=
+  dependencies:
+    fs-extra "^0.30.0"
+    lodash ">=3.5 <5"
+
+webpack-sources@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
+  integrity sha1-qh86vw8NdNtxEcQOUAuE+WZkB1A=
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.5.3"
+
+webpack@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
+  integrity sha1-VPH/uSBRoyilsgV9auM8KJRiyCM=
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.7.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.9"
+
+websocket-driver@>=0.3.6, websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
+whatwg-encoding@^1.0.1:
+  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.24"
+
+whatwg-fetch@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
+  integrity sha1-/ilNHYnjbFvosxlQV/LkvHT8mA4=
+
+whatwg-url@^4.3.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
+  integrity sha1-0pgaqRSMHgCkHFphMRZqtGg7vMA=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+  integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
+
+which@^1.0.5, which@^1.1.1, which@^1.2.9:
+  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.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 || 2"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
+
+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.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
+
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
+worker-farm@^1.3.1:
+  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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+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"
+
+xml-name-validator@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+  integrity sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=
+
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y18n@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
+  integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
+
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  integrity sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs@^6.3.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  integrity sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
diff --git a/fixtures/ssr2/README.md b/fixtures/ssr2/README.md
new file mode 100644
index 00000000000..e41d47149e1
--- /dev/null
+++ b/fixtures/ssr2/README.md
@@ -0,0 +1,30 @@
+# SSR Fixtures
+
+A set of test cases for quickly identifying issues with server-side rendering.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/ssr2
+yarn
+yarn start
+```
+
+The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
+
+**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:**
+
+```
+yarn
+```
+
+If you want to try the production mode instead run:
+
+```
+yarn start:prod
+```
+
+This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).
diff --git a/fixtures/ssr2/package-lock.json b/fixtures/ssr2/package-lock.json
new file mode 100644
index 00000000000..e7341672f1e
--- /dev/null
+++ b/fixtures/ssr2/package-lock.json
@@ -0,0 +1,12827 @@
+{
+  "name": "react-ssr",
+  "version": "0.1.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "react-ssr",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "7.14.3",
+        "@babel/register": "7.13.16",
+        "babel-loader": "8.1.0",
+        "babel-preset-react-app": "10.0.0",
+        "compression": "^1.7.4",
+        "concurrently": "^5.3.0",
+        "express": "^4.17.1",
+        "nodemon": "^2.0.6",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^3.1.3",
+        "resolve": "1.12.0",
+        "rimraf": "^3.0.2",
+        "webpack": "4.44.2",
+        "webpack-cli": "^4.2.0"
+      },
+      "devDependencies": {
+        "cross-env": "^7.0.3",
+        "prettier": "1.19.1"
+      },
+      "engines": {
+        "node": ">=14.9.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "dependencies": {
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.4.tgz",
+      "integrity": "sha512-i2wXrWQNkH6JplJQGn3Rd2I4Pij8GdHkXwHMxm+zV5YG/Jci+bCNrWZEWC4o+umiDkRrRs4dVzH3X4GP7vyjQQ=="
+    },
+    "node_modules/@babel/core": {
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz",
+      "integrity": "sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.3",
+        "@babel/helper-compilation-targets": "^7.13.16",
+        "@babel/helper-module-transforms": "^7.14.2",
+        "@babel/helpers": "^7.14.0",
+        "@babel/parser": "^7.14.3",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.3.tgz",
+      "integrity": "sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==",
+      "dependencies": {
+        "@babel/types": "^7.23.3",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.12.10",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.12.10"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-explode-assignable-expression": "^7.10.4",
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "node_modules/@babel/helper-builder-react-jsx": {
+      "version": "7.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "node_modules/@babel/helper-builder-react-jsx-experimental": {
+      "version": "7.12.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.12.10",
+        "@babel/helper-module-imports": "^7.12.5",
+        "@babel/types": "^7.12.11"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.4.tgz",
+      "integrity": "sha512-JgdzOYZ/qGaKTVkn5qEDV/SXAh8KcyUVkCoSWGN8T3bwrgd6m+/dJa2kVGi6RJYJgEYPBdZ84BZp9dUjNWkBaA==",
+      "dependencies": {
+        "@babel/compat-data": "^7.14.4",
+        "@babel/helper-validator-option": "^7.12.17",
+        "browserslist": "^4.16.6",
+        "semver": "^6.3.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-member-expression-to-functions": "^7.12.1",
+        "@babel/helper-optimise-call-expression": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1",
+        "@babel/helper-split-export-declaration": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "regexpu-core": "^4.7.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-define-map": {
+      "version": "7.10.5",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/types": "^7.10.5",
+        "lodash": "^4.17.19"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-explode-assignable-expression": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "dependencies": {
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+      "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+      "dependencies": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "dependencies": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+      "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/helper-replace-supers": "^7.13.12",
+        "@babel/helper-simple-access": "^7.13.12",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.2"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+      "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+      "dependencies": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.10.4",
+      "license": "MIT"
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-wrap-function": "^7.10.4",
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.4.tgz",
+      "integrity": "sha512-zZ7uHCWlxfEAAOVDYQpEf/uyi1dmeC7fX4nCf2iz9drnCwi1zvwXL3HwWWNXUQEJ1k23yVn3VbddiI9iJEXaTQ==",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.13.12",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.4"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+      "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+      "dependencies": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
+      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw=="
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.12.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/template": "^7.10.4",
+        "@babel/traverse": "^7.10.4",
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz",
+      "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==",
+      "dependencies": {
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.0",
+        "@babel/types": "^7.14.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz",
+      "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-remap-async-to-generator": "^7.12.1",
+        "@babel/plugin-syntax-async-generators": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-decorators": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-dynamic-import": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-json-strings": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-numeric-separator": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-optional-chaining": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-methods": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-flow": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-remap-async-to-generator": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.12.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-define-map": "^7.10.4",
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-optimise-call-expression": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1",
+        "@babel/helper-split-export-declaration": "^7.10.4",
+        "globals": "^11.1.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-flow-strip-types": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-flow": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-simple-access": "^7.12.1",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.10.4",
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-identifier": "^7.10.4",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.12.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-builder-react-jsx": "^7.10.4",
+        "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-jsx": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.12.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-jsx": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-transform": "^0.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "resolve": "^1.8.1",
+        "semver": "^5.5.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.12.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.12.10",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-typescript": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.12.1",
+        "@babel/helper-compilation-targets": "^7.12.1",
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-option": "^7.12.1",
+        "@babel/plugin-proposal-async-generator-functions": "^7.12.1",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-dynamic-import": "^7.12.1",
+        "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
+        "@babel/plugin-proposal-json-strings": "^7.12.1",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+        "@babel/plugin-proposal-numeric-separator": "^7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.1",
+        "@babel/plugin-proposal-private-methods": "^7.12.1",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.12.1",
+        "@babel/plugin-syntax-async-generators": "^7.8.0",
+        "@babel/plugin-syntax-class-properties": "^7.12.1",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.0",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.0",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.0",
+        "@babel/plugin-syntax-top-level-await": "^7.12.1",
+        "@babel/plugin-transform-arrow-functions": "^7.12.1",
+        "@babel/plugin-transform-async-to-generator": "^7.12.1",
+        "@babel/plugin-transform-block-scoped-functions": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.1",
+        "@babel/plugin-transform-classes": "^7.12.1",
+        "@babel/plugin-transform-computed-properties": "^7.12.1",
+        "@babel/plugin-transform-destructuring": "^7.12.1",
+        "@babel/plugin-transform-dotall-regex": "^7.12.1",
+        "@babel/plugin-transform-duplicate-keys": "^7.12.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.12.1",
+        "@babel/plugin-transform-for-of": "^7.12.1",
+        "@babel/plugin-transform-function-name": "^7.12.1",
+        "@babel/plugin-transform-literals": "^7.12.1",
+        "@babel/plugin-transform-member-expression-literals": "^7.12.1",
+        "@babel/plugin-transform-modules-amd": "^7.12.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.12.1",
+        "@babel/plugin-transform-modules-systemjs": "^7.12.1",
+        "@babel/plugin-transform-modules-umd": "^7.12.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.12.1",
+        "@babel/plugin-transform-new-target": "^7.12.1",
+        "@babel/plugin-transform-object-super": "^7.12.1",
+        "@babel/plugin-transform-parameters": "^7.12.1",
+        "@babel/plugin-transform-property-literals": "^7.12.1",
+        "@babel/plugin-transform-regenerator": "^7.12.1",
+        "@babel/plugin-transform-reserved-words": "^7.12.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.1",
+        "@babel/plugin-transform-spread": "^7.12.1",
+        "@babel/plugin-transform-sticky-regex": "^7.12.1",
+        "@babel/plugin-transform-template-literals": "^7.12.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.12.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.12.1",
+        "@babel/plugin-transform-unicode-regex": "^7.12.1",
+        "@babel/preset-modules": "^0.1.3",
+        "@babel/types": "^7.12.1",
+        "core-js-compat": "^3.6.2",
+        "semver": "^5.5.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-react": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-transform-react-display-name": "^7.12.1",
+        "@babel/plugin-transform-react-jsx": "^7.12.1",
+        "@babel/plugin-transform-react-jsx-development": "^7.12.1",
+        "@babel/plugin-transform-react-jsx-self": "^7.12.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.12.1",
+        "@babel/plugin-transform-react-pure-annotations": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.12.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/register": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.13.16.tgz",
+      "integrity": "sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.0",
+        "source-map-support": "^0.5.16"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "dependencies": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.3.tgz",
+      "integrity": "sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.3",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.3",
+        "@babel/types": "^7.23.3",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz",
+      "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "0.14.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "defer-to-connect": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.6",
+      "license": "MIT"
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "license": "ISC"
+    },
+    "node_modules/@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "envinfo": "^7.7.3"
+      },
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "license": "Apache-2.0"
+    },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "license": "ISC"
+    },
+    "node_modules/accepts": {
+      "version": "1.3.7",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "6.4.2",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-errors": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": ">=5.0.0"
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/ansi-align": {
+      "version": "3.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^3.0.0"
+      }
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.1",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/aproba": {
+      "version": "1.2.0",
+      "license": "ISC"
+    },
+    "node_modules/arr-diff": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-flatten": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-back": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "license": "MIT"
+    },
+    "node_modules/array-unique": {
+      "version": "0.3.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/asn1.js/node_modules/bn.js": {
+      "version": "4.11.9",
+      "license": "MIT"
+    },
+    "node_modules/assert": {
+      "version": "1.5.0",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      }
+    },
+    "node_modules/assert/node_modules/inherits": {
+      "version": "2.0.1",
+      "license": "ISC"
+    },
+    "node_modules/assert/node_modules/util": {
+      "version": "0.10.3",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "2.0.1"
+      }
+    },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/async-each": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "8.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "find-cache-dir": "^2.1.0",
+        "loader-utils": "^1.4.0",
+        "mkdirp": "^0.5.3",
+        "pify": "^4.0.1",
+        "schema-utils": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 6.9"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
+      }
+    },
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "license": "MIT",
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "license": "MIT"
+    },
+    "node_modules/babel-preset-react-app": {
+      "version": "10.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "7.12.3",
+        "@babel/plugin-proposal-class-properties": "7.12.1",
+        "@babel/plugin-proposal-decorators": "7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
+        "@babel/plugin-proposal-numeric-separator": "7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "7.12.1",
+        "@babel/plugin-transform-flow-strip-types": "7.12.1",
+        "@babel/plugin-transform-react-display-name": "7.12.1",
+        "@babel/plugin-transform-runtime": "7.12.1",
+        "@babel/preset-env": "7.12.1",
+        "@babel/preset-react": "7.12.1",
+        "@babel/preset-typescript": "7.12.1",
+        "@babel/runtime": "7.12.1",
+        "babel-plugin-macros": "2.8.0",
+        "babel-plugin-transform-react-remove-prop-types": "0.4.24"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/core": {
+      "version": "7.12.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
+      "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/generator": "^7.12.1",
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helpers": "^7.12.1",
+        "@babel/parser": "^7.12.3",
+        "@babel/template": "^7.10.4",
+        "@babel/traverse": "^7.12.1",
+        "@babel/types": "^7.12.1",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.1",
+        "json5": "^2.1.2",
+        "lodash": "^4.17.19",
+        "resolve": "^1.3.2",
+        "semver": "^5.4.1",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/base": {
+      "version": "0.11.2",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base/node_modules/define-property": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "license": "MIT"
+    },
+    "node_modules/bn.js": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+      "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ=="
+    },
+    "node_modules/body-parser": {
+      "version": "1.19.0",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/bytes": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/boxen": {
+      "version": "4.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chalk": "^3.0.0",
+        "cli-boxes": "^2.2.0",
+        "string-width": "^4.1.0",
+        "term-size": "^2.1.0",
+        "type-fest": "^0.8.1",
+        "widest-line": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/color-convert": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/boxen/node_modules/color-name": {
+      "version": "1.1.4",
+      "license": "MIT"
+    },
+    "node_modules/boxen/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "license": "MIT"
+    },
+    "node_modules/boxen/node_modules/has-flag": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/string-width": {
+      "version": "4.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/supports-color": {
+      "version": "7.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brorand": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
+    "node_modules/browserify-aes": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/browserify-cipher": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "node_modules/browserify-des": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "node_modules/browserify-rsa": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "node_modules/browserify-sign": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.2.tgz",
+      "integrity": "sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==",
+      "dependencies": {
+        "bn.js": "^5.2.1",
+        "browserify-rsa": "^4.1.0",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.4",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.6",
+        "readable-stream": "^3.6.2",
+        "safe-buffer": "^5.2.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/browserify-sign/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.16.6",
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "4.9.2",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4",
+        "isarray": "^1.0.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.1",
+      "license": "MIT"
+    },
+    "node_modules/buffer-xor": {
+      "version": "1.0.3",
+      "license": "MIT"
+    },
+    "node_modules/builtin-status-codes": {
+      "version": "3.0.0",
+      "license": "MIT"
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/cacache": {
+      "version": "12.0.4",
+      "license": "ISC",
+      "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"
+      }
+    },
+    "node_modules/cacache/node_modules/rimraf": {
+      "version": "2.7.1",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/cache-base": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "6.1.0",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/get-stream": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001233",
+      "license": "CC-BY-4.0",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.4.3",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.1.2"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "license": "ISC"
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/cipher-base": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/class-utils": {
+      "version": "0.3.6",
+      "license": "MIT",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/class-utils/node_modules/define-property": {
+      "version": "0.2.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cli-boxes": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "5.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "node_modules/collection-visit": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "1.2.2",
+      "license": "MIT"
+    },
+    "node_modules/command-line-usage": {
+      "version": "6.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^4.0.1",
+        "chalk": "^2.4.2",
+        "table-layout": "^1.0.1",
+        "typical": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/component-emitter": {
+      "version": "1.3.0",
+      "license": "MIT"
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "license": "MIT"
+    },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/concurrently": {
+      "version": "5.3.0",
+      "license": "MIT",
+      "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": "^6.1.0",
+        "tree-kill": "^1.2.2",
+        "yargs": "^13.3.0"
+      },
+      "bin": {
+        "concurrently": "bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "6.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/configstore/node_modules/make-dir": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/configstore/node_modules/semver": {
+      "version": "6.3.0",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/console-browserify": {
+      "version": "1.2.0"
+    },
+    "node_modules/constants-browserify": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.3",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.4.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "license": "MIT"
+    },
+    "node_modules/copy-concurrently": {
+      "version": "1.0.5",
+      "license": "ISC",
+      "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"
+      }
+    },
+    "node_modules/copy-concurrently/node_modules/rimraf": {
+      "version": "2.7.1",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/copy-descriptor": {
+      "version": "0.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.8.1",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.15.0",
+        "semver": "7.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-compat/node_modules/semver": {
+      "version": "7.0.0",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/create-ecdh": {
+      "version": "4.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      }
+    },
+    "node_modules/create-ecdh/node_modules/bn.js": {
+      "version": "4.11.9",
+      "license": "MIT"
+    },
+    "node_modules/create-hash": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      }
+    },
+    "node_modules/create-hmac": {
+      "version": "1.1.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-browserify": {
+      "version": "3.12.0",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cyclist": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/date-fns": {
+      "version": "2.16.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.1",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "3.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "1.1.3",
+      "license": "MIT"
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "object-keys": "^1.0.12"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/define-property": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/des.js": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.0.4",
+      "license": "MIT"
+    },
+    "node_modules/diffie-hellman": {
+      "version": "5.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      }
+    },
+    "node_modules/diffie-hellman/node_modules/bn.js": {
+      "version": "4.11.9",
+      "license": "MIT"
+    },
+    "node_modules/domain-browser": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4",
+        "npm": ">=1.2"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/duplexer3": {
+      "version": "0.1.4",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/duplexify": {
+      "version": "3.7.1",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/duplexify/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/duplexify/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.3.743",
+      "license": "ISC"
+    },
+    "node_modules/elliptic": {
+      "version": "6.5.4",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "node_modules/elliptic/node_modules/bn.js": {
+      "version": "4.11.9",
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "license": "MIT"
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "4.3.0",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.5.0",
+        "tapable": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/enhanced-resolve/node_modules/memory-fs": {
+      "version": "0.5.0",
+      "license": "MIT",
+      "dependencies": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.3.0 <5.0.0 || >=5.10"
+      }
+    },
+    "node_modules/enhanced-resolve/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/enhanced-resolve/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/enquirer": {
+      "version": "2.3.6",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/envinfo": {
+      "version": "7.7.3",
+      "license": "MIT",
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "license": "MIT",
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-goat": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "4.0.3",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.2.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/evp_bytestokey": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "node_modules/execa": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/execa/node_modules/get-stream": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/expand-brackets": {
+      "version": "2.1.4",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/define-property": {
+      "version": "0.2.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-brackets/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/express": {
+      "version": "4.17.1",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extend-shallow/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob": {
+      "version": "2.0.4",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/define-property": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "license": "MIT"
+    },
+    "node_modules/figgy-pudding": {
+      "version": "3.5.2",
+      "license": "ISC"
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/find-cache-dir": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/flush-write-stream": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "node_modules/flush-write-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/flush-write-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/for-in": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.1.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fragment-cache": {
+      "version": "0.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "map-cache": "^0.2.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/from2": {
+      "version": "2.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "node_modules/from2/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/from2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "license": "ISC",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "node_modules/fs-write-stream-atomic/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/fs-write-stream-atomic/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.1.3",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "license": "MIT"
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.1.6",
+      "license": "ISC",
+      "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"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.1",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/global-dirs": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "1.3.7"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/got": {
+      "version": "9.6.0",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.4",
+      "license": "ISC"
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-value": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/is-number": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/kind-of": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-yarn": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hash-base": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/hash-base/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "node_modules/hmac-drbg": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "license": "ISC"
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.0",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-errors": {
+      "version": "1.7.2",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-errors/node_modules/inherits": {
+      "version": "2.0.3",
+      "license": "ISC"
+    },
+    "node_modules/https-browserify": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/human-signals": {
+      "version": "1.1.1",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/iferr": {
+      "version": "0.1.5",
+      "license": "MIT"
+    },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "license": "ISC"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/find-up": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/locate-path": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/p-locate": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/path-exists": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/infer-owner": {
+      "version": "1.0.4",
+      "license": "ISC"
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "1.3.7",
+      "license": "ISC"
+    },
+    "node_modules/interpret": {
+      "version": "2.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-accessor-descriptor": {
+      "version": "0.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-accessor-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "license": "MIT"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "license": "MIT"
+    },
+    "node_modules/is-ci": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ci-info": "^2.0.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-data-descriptor": {
+      "version": "0.1.4",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-data-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-descriptor": {
+      "version": "0.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-descriptor/node_modules/kind-of": {
+      "version": "5.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.3.2",
+      "license": "MIT",
+      "dependencies": {
+        "global-dirs": "^2.0.1",
+        "is-path-inside": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-npm": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/is-windows": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-yarn-global": {
+      "version": "0.3.0",
+      "license": "MIT"
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "license": "ISC"
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.0",
+      "license": "MIT"
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/latest-version": {
+      "version": "5.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "package-json": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.1.6",
+      "license": "MIT"
+    },
+    "node_modules/loader-runner": {
+      "version": "2.4.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.3.0 <5.0.0 || >=5.10"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "1.4.0",
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/loader-utils/node_modules/json5": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lowercase-keys": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/map-cache": {
+      "version": "0.2.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/map-visit": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "object-visit": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/md5.js": {
+      "version": "1.3.5",
+      "license": "MIT",
+      "dependencies": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memory-fs": {
+      "version": "0.4.1",
+      "license": "MIT",
+      "dependencies": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "node_modules/memory-fs/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/memory-fs/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "3.1.10",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/braces": {
+      "version": "2.3.2",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/fill-range": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/fill-range/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/is-number": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/miller-rabin": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "bin": {
+        "miller-rabin": "bin/miller-rabin"
+      }
+    },
+    "node_modules/miller-rabin/node_modules/bn.js": {
+      "version": "4.11.9",
+      "license": "MIT"
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.44.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.27",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.44.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "license": "ISC"
+    },
+    "node_modules/minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/minimatch": {
+      "version": "3.0.4",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.5",
+      "license": "MIT"
+    },
+    "node_modules/mississippi": {
+      "version": "3.0.0",
+      "license": "BSD-2-Clause",
+      "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"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mixin-deep": {
+      "version": "1.3.2",
+      "license": "MIT",
+      "dependencies": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mixin-deep/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.5",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/move-concurrently": {
+      "version": "1.0.1",
+      "license": "ISC",
+      "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"
+      }
+    },
+    "node_modules/move-concurrently/node_modules/rimraf": {
+      "version": "2.7.1",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "license": "MIT"
+    },
+    "node_modules/nan": {
+      "version": "2.14.2",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/nanomatch": {
+      "version": "1.2.13",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "license": "MIT"
+    },
+    "node_modules/node-libs-browser": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "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/node-libs-browser/node_modules/punycode": {
+      "version": "1.4.1",
+      "license": "MIT"
+    },
+    "node_modules/node-libs-browser/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/node-libs-browser/node_modules/readable-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/node-modules-regexp": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "1.1.72",
+      "license": "MIT"
+    },
+    "node_modules/nodemon": {
+      "version": "2.0.6",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.2.2",
+        "debug": "^3.2.6",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.0.4",
+        "pstree.remy": "^1.1.7",
+        "semver": "^5.7.1",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.3",
+        "update-notifier": "^4.1.0"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "3.2.7",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/nopt": {
+      "version": "1.0.10",
+      "license": "MIT",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      }
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "4.5.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy": {
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy/node_modules/define-property": {
+      "version": "0.2.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object-visit": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.pick": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/os-browserify": {
+      "version": "0.3.0",
+      "license": "MIT"
+    },
+    "node_modules/p-cancelable": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json": {
+      "version": "6.5.0",
+      "license": "MIT",
+      "dependencies": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/package-json/node_modules/semver": {
+      "version": "6.3.0",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/parallel-transform": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      }
+    },
+    "node_modules/parallel-transform/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/parallel-transform/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-asn1": {
+      "version": "5.1.6",
+      "license": "ISC",
+      "dependencies": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascalcase": {
+      "version": "0.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "0.0.1",
+      "license": "MIT"
+    },
+    "node_modules/path-dirname": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/path-exists": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.6",
+      "license": "MIT"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "license": "MIT"
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pbkdf2": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.2.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "node-modules-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/posix-character-classes": {
+      "version": "0.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prepend-http": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "1.19.1",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "license": "MIT"
+    },
+    "node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "license": "ISC"
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.6",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "license": "MIT"
+    },
+    "node_modules/public-encrypt": {
+      "version": "4.0.3",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/public-encrypt/node_modules/bn.js": {
+      "version": "4.11.9",
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pumpify": {
+      "version": "1.5.1",
+      "license": "MIT",
+      "dependencies": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      }
+    },
+    "node_modules/pumpify/node_modules/pump": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pupa": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "escape-goat": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.7.0",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/querystring": {
+      "version": "0.2.0",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/querystring-es3": {
+      "version": "0.2.1",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/randomfill": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.4.0",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/bytes": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
+    "node_modules/react-error-boundary/node_modules/@babel/runtime": {
+      "version": "7.12.5",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "node_modules/read-pkg": {
+      "version": "4.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-package-data": "^2.3.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/read-pkg/node_modules/parse-json": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/read-pkg/node_modules/pify": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.5.0",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/rechoir": {
+      "version": "0.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "resolve": "^1.9.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/reduce-flatten": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "license": "MIT"
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.7",
+      "license": "MIT"
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.14.5",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regex-not": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "4.7.1",
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
+        "unicode-match-property-ecmascript": "^1.0.4",
+        "unicode-match-property-value-ecmascript": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "4.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "5.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.5.2",
+      "license": "MIT"
+    },
+    "node_modules/regjsparser": {
+      "version": "0.6.4",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/remove-trailing-separator": {
+      "version": "1.1.0",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/repeat-element": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "license": "ISC"
+    },
+    "node_modules/resolve": {
+      "version": "1.12.0",
+      "license": "MIT",
+      "dependencies": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-url": {
+      "version": "0.2.1",
+      "license": "MIT"
+    },
+    "node_modules/responselike": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "node_modules/ret": {
+      "version": "0.1.15",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ripemd160": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "node_modules/run-queue": {
+      "version": "1.0.3",
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "6.6.3",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/safe-regex": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "ret": "~0.1.10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "2.7.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/semver": {
+      "version": "5.7.1",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/semver-diff": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver-diff/node_modules/semver": {
+      "version": "6.3.0",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.17.1",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.1",
+      "license": "MIT"
+    },
+    "node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.14.1",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "license": "ISC"
+    },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/set-value/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "license": "MIT"
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.1.1",
+      "license": "ISC"
+    },
+    "node_modules/sha.js": {
+      "version": "2.4.11",
+      "license": "(MIT AND BSD-3-Clause)",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      },
+      "bin": {
+        "sha.js": "bin.js"
+      }
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.3",
+      "license": "ISC"
+    },
+    "node_modules/snapdragon": {
+      "version": "0.8.2",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/define-property": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-util": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-util/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/define-property": {
+      "version": "0.2.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/source-list-map": {
+      "version": "2.0.1",
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-resolve": {
+      "version": "0.5.3",
+      "license": "MIT",
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.19",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-url": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2-1",
+      "license": "MIT"
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.1.1",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.7",
+      "license": "CC0-1.0"
+    },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ssri": {
+      "version": "6.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
+    "node_modules/static-extend": {
+      "version": "0.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/static-extend/node_modules/define-property": {
+      "version": "0.2.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "1.5.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/stream-browserify": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/stream-browserify/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/stream-browserify/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/stream-each": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/stream-http": {
+      "version": "2.8.3",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/stream-http/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/stream-http/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/stream-shift": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/table-layout": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^4.0.1",
+        "deep-extend": "~0.6.0",
+        "typical": "^5.2.0",
+        "wordwrapjs": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/term-size": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terser": {
+      "version": "4.8.0",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "1.4.5",
+      "license": "MIT",
+      "dependencies": {
+        "cacache": "^12.0.2",
+        "find-cache-dir": "^2.1.0",
+        "is-wsl": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^4.0.0",
+        "source-map": "^0.6.1",
+        "terser": "^4.1.2",
+        "webpack-sources": "^1.4.0",
+        "worker-farm": "^1.7.0"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.1.0",
+        "ajv-errors": "^1.0.0",
+        "ajv-keywords": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "license": "MIT"
+    },
+    "node_modules/terser/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "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"
+      }
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/timers-browserify": {
+      "version": "2.0.12",
+      "license": "MIT",
+      "dependencies": {
+        "setimmediate": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/to-arraybuffer": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-object-path": {
+      "version": "0.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-object-path/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-readable-stream": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/to-regex": {
+      "version": "3.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/touch": {
+      "version": "3.1.0",
+      "license": "ISC",
+      "dependencies": {
+        "nopt": "~1.0.10"
+      },
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "1.14.1",
+      "license": "0BSD"
+    },
+    "node_modules/tty-browserify": {
+      "version": "0.0.0",
+      "license": "MIT"
+    },
+    "node_modules/type-fest": {
+      "version": "0.8.1",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "license": "MIT"
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typical": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/undefsafe": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^2.2.0"
+      }
+    },
+    "node_modules/undefsafe/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/undefsafe/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^1.0.4",
+        "unicode-property-aliases-ecmascript": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unique-filename": {
+      "version": "1.1.1",
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "2.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unset-value": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-value": {
+      "version": "0.3.1",
+      "license": "MIT",
+      "dependencies": {
+        "get-value": "^2.0.3",
+        "has-values": "^0.1.4",
+        "isobject": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-value/node_modules/isobject": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "isarray": "1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-values": {
+      "version": "0.1.4",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-notifier": {
+      "version": "4.1.3",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boxen": "^4.2.0",
+        "chalk": "^3.0.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.3.1",
+        "is-npm": "^4.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.0.0",
+        "pupa": "^2.0.1",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/chalk": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/color-convert": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/update-notifier/node_modules/color-name": {
+      "version": "1.1.4",
+      "license": "MIT"
+    },
+    "node_modules/update-notifier/node_modules/has-flag": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/supports-color": {
+      "version": "7.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.0",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/urix": {
+      "version": "0.1.0",
+      "license": "MIT"
+    },
+    "node_modules/url": {
+      "version": "0.11.0",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      }
+    },
+    "node_modules/url-parse-lax": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "prepend-http": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.3.2",
+      "license": "MIT"
+    },
+    "node_modules/use": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/util": {
+      "version": "0.11.1",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/util/node_modules/inherits": {
+      "version": "2.0.3",
+      "license": "ISC"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.2.0",
+      "license": "MIT"
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vm-browserify": {
+      "version": "1.1.2",
+      "license": "MIT"
+    },
+    "node_modules/watchpack": {
+      "version": "1.7.5",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "neo-async": "^2.5.0"
+      },
+      "optionalDependencies": {
+        "chokidar": "^3.4.1",
+        "watchpack-chokidar2": "^2.0.1"
+      }
+    },
+    "node_modules/watchpack-chokidar2": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^2.1.8"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/anymatch": {
+      "version": "2.0.0",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "micromatch": "^3.1.4",
+        "normalize-path": "^2.1.1"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/anymatch/node_modules/normalize-path": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "remove-trailing-separator": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/binary-extensions": {
+      "version": "1.13.1",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/braces": {
+      "version": "2.3.2",
+      "license": "MIT",
+      "optional": true,
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/chokidar": {
+      "version": "2.1.8",
+      "license": "MIT",
+      "optional": true,
+      "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"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/fill-range": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/fsevents": {
+      "version": "1.2.13",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/glob-parent": {
+      "version": "3.1.0",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "is-glob": "^3.1.0",
+        "path-dirname": "^1.0.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/glob-parent/node_modules/is-glob": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/is-binary-path": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "binary-extensions": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/is-number": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
+      "optional": true,
+      "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"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/readdirp": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "4.44.2",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "acorn": "^6.4.1",
+        "ajv": "^6.10.2",
+        "ajv-keywords": "^3.4.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^4.3.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.3",
+        "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.3",
+        "watchpack": "^1.7.4",
+        "webpack-sources": "^1.4.1"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        },
+        "webpack-command": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli": {
+      "version": "4.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webpack-cli/info": "^1.1.0",
+        "@webpack-cli/serve": "^1.1.0",
+        "colorette": "^1.2.1",
+        "command-line-usage": "^6.1.0",
+        "commander": "^6.2.0",
+        "enquirer": "^2.3.6",
+        "execa": "^4.1.0",
+        "import-local": "^3.0.2",
+        "interpret": "^2.2.0",
+        "leven": "^3.1.0",
+        "rechoir": "^0.7.0",
+        "v8-compile-cache": "^2.2.0",
+        "webpack-merge": "^4.2.2"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "4.x.x || 5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generate-loader": {
+          "optional": true
+        },
+        "@webpack-cli/generate-plugin": {
+          "optional": true
+        },
+        "@webpack-cli/init": {
+          "optional": true
+        },
+        "@webpack-cli/migrate": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "6.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "4.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "1.4.3",
+      "license": "MIT",
+      "dependencies": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/webpack-sources/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.1.0",
+        "ajv-errors": "^1.0.0",
+        "ajv-keywords": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "license": "ISC"
+    },
+    "node_modules/widest-line": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "license": "MIT"
+    },
+    "node_modules/widest-line/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/string-width": {
+      "version": "4.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wordwrapjs": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "reduce-flatten": "^2.0.0",
+        "typical": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/worker-farm": {
+      "version": "1.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "errno": "~0.1.7"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "license": "ISC"
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.1",
+      "license": "ISC"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "1.10.0",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "13.3.2",
+      "license": "MIT",
+      "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.2"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "requires": {
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.4.tgz",
+      "integrity": "sha512-i2wXrWQNkH6JplJQGn3Rd2I4Pij8GdHkXwHMxm+zV5YG/Jci+bCNrWZEWC4o+umiDkRrRs4dVzH3X4GP7vyjQQ=="
+    },
+    "@babel/core": {
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz",
+      "integrity": "sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==",
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.3",
+        "@babel/helper-compilation-targets": "^7.13.16",
+        "@babel/helper-module-transforms": "^7.14.2",
+        "@babel/helpers": "^7.14.0",
+        "@babel/parser": "^7.14.3",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.3.tgz",
+      "integrity": "sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==",
+      "requires": {
+        "@babel/types": "^7.23.3",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.12.10",
+      "requires": {
+        "@babel/types": "^7.12.10"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.10.4",
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.10.4",
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "@babel/helper-builder-react-jsx": {
+      "version": "7.10.4",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "@babel/helper-builder-react-jsx-experimental": {
+      "version": "7.12.11",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.10",
+        "@babel/helper-module-imports": "^7.12.5",
+        "@babel/types": "^7.12.11"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.4.tgz",
+      "integrity": "sha512-JgdzOYZ/qGaKTVkn5qEDV/SXAh8KcyUVkCoSWGN8T3bwrgd6m+/dJa2kVGi6RJYJgEYPBdZ84BZp9dUjNWkBaA==",
+      "requires": {
+        "@babel/compat-data": "^7.14.4",
+        "@babel/helper-validator-option": "^7.12.17",
+        "browserslist": "^4.16.6",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-member-expression-to-functions": "^7.12.1",
+        "@babel/helper-optimise-call-expression": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1",
+        "@babel/helper-split-export-declaration": "^7.10.4"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.7",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "regexpu-core": "^4.7.1"
+      }
+    },
+    "@babel/helper-define-map": {
+      "version": "7.10.5",
+      "requires": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/types": "^7.10.5",
+        "lodash": "^4.17.19"
+      }
+    },
+    "@babel/helper-environment-visitor": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA=="
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "requires": {
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+      "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+      "requires": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "requires": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+      "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/helper-replace-supers": "^7.13.12",
+        "@babel/helper-simple-access": "^7.13.12",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.2"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+      "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.10.4"
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-wrap-function": "^7.10.4",
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.4.tgz",
+      "integrity": "sha512-zZ7uHCWlxfEAAOVDYQpEf/uyi1dmeC7fX4nCf2iz9drnCwi1zvwXL3HwWWNXUQEJ1k23yVn3VbddiI9iJEXaTQ==",
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.13.12",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.4"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+      "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+      "requires": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
+      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw=="
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.12.3",
+      "requires": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/template": "^7.10.4",
+        "@babel/traverse": "^7.10.4",
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz",
+      "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==",
+      "requires": {
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.0",
+        "@babel/types": "^7.14.0"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz",
+      "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw=="
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-remap-async-to-generator": "^7.12.1",
+        "@babel/plugin-syntax-async-generators": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-decorators": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-decorators": "^7.12.1"
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.12.1"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-decorators": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-flow": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-remap-async-to-generator": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.12.11",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-define-map": "^7.10.4",
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-optimise-call-expression": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1",
+        "@babel/helper-split-export-declaration": "^7.10.4",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-flow-strip-types": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-flow": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-simple-access": "^7.12.1",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.10.4",
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-identifier": "^7.10.4",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.12.11",
+      "requires": {
+        "@babel/helper-builder-react-jsx": "^7.10.4",
+        "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-jsx": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-development": {
+      "version": "7.12.11",
+      "requires": {
+        "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-jsx": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-self": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-source": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.12.1",
+      "requires": {
+        "regenerator-transform": "^0.14.2"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "resolve": "^1.8.1",
+        "semver": "^5.5.1"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.12.7",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.12.10",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-typescript": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/compat-data": "^7.12.1",
+        "@babel/helper-compilation-targets": "^7.12.1",
+        "@babel/helper-module-imports": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-option": "^7.12.1",
+        "@babel/plugin-proposal-async-generator-functions": "^7.12.1",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-dynamic-import": "^7.12.1",
+        "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
+        "@babel/plugin-proposal-json-strings": "^7.12.1",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+        "@babel/plugin-proposal-numeric-separator": "^7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.1",
+        "@babel/plugin-proposal-private-methods": "^7.12.1",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.12.1",
+        "@babel/plugin-syntax-async-generators": "^7.8.0",
+        "@babel/plugin-syntax-class-properties": "^7.12.1",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.0",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.0",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.0",
+        "@babel/plugin-syntax-top-level-await": "^7.12.1",
+        "@babel/plugin-transform-arrow-functions": "^7.12.1",
+        "@babel/plugin-transform-async-to-generator": "^7.12.1",
+        "@babel/plugin-transform-block-scoped-functions": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.1",
+        "@babel/plugin-transform-classes": "^7.12.1",
+        "@babel/plugin-transform-computed-properties": "^7.12.1",
+        "@babel/plugin-transform-destructuring": "^7.12.1",
+        "@babel/plugin-transform-dotall-regex": "^7.12.1",
+        "@babel/plugin-transform-duplicate-keys": "^7.12.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.12.1",
+        "@babel/plugin-transform-for-of": "^7.12.1",
+        "@babel/plugin-transform-function-name": "^7.12.1",
+        "@babel/plugin-transform-literals": "^7.12.1",
+        "@babel/plugin-transform-member-expression-literals": "^7.12.1",
+        "@babel/plugin-transform-modules-amd": "^7.12.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.12.1",
+        "@babel/plugin-transform-modules-systemjs": "^7.12.1",
+        "@babel/plugin-transform-modules-umd": "^7.12.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.12.1",
+        "@babel/plugin-transform-new-target": "^7.12.1",
+        "@babel/plugin-transform-object-super": "^7.12.1",
+        "@babel/plugin-transform-parameters": "^7.12.1",
+        "@babel/plugin-transform-property-literals": "^7.12.1",
+        "@babel/plugin-transform-regenerator": "^7.12.1",
+        "@babel/plugin-transform-reserved-words": "^7.12.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.1",
+        "@babel/plugin-transform-spread": "^7.12.1",
+        "@babel/plugin-transform-sticky-regex": "^7.12.1",
+        "@babel/plugin-transform-template-literals": "^7.12.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.12.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.12.1",
+        "@babel/plugin-transform-unicode-regex": "^7.12.1",
+        "@babel/preset-modules": "^0.1.3",
+        "@babel/types": "^7.12.1",
+        "core-js-compat": "^3.6.2",
+        "semver": "^5.5.0"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.4",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/preset-react": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-transform-react-display-name": "^7.12.1",
+        "@babel/plugin-transform-react-jsx": "^7.12.1",
+        "@babel/plugin-transform-react-jsx-development": "^7.12.1",
+        "@babel/plugin-transform-react-jsx-self": "^7.12.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.12.1",
+        "@babel/plugin-transform-react-pure-annotations": "^7.12.1"
+      }
+    },
+    "@babel/preset-typescript": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.12.1"
+      }
+    },
+    "@babel/register": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.13.16.tgz",
+      "integrity": "sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==",
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.0",
+        "source-map-support": "^0.5.16"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.12.1",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "requires": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.3.tgz",
+      "integrity": "sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==",
+      "requires": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.3",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.3",
+        "@babel/types": "^7.23.3",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz",
+      "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==",
+      "requires": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA=="
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "@sindresorhus/is": {
+      "version": "0.14.0"
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "@types/json-schema": {
+      "version": "7.0.6"
+    },
+    "@types/parse-json": {
+      "version": "4.0.0"
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.9.0"
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.9.0"
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.9.0"
+    },
+    "@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-fsm": {
+      "version": "1.9.0"
+    },
+    "@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.9.0"
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.9.0",
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.9.0"
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webpack-cli/info": {
+      "version": "1.1.0",
+      "requires": {
+        "envinfo": "^7.7.3"
+      }
+    },
+    "@webpack-cli/serve": {
+      "version": "1.1.0",
+      "requires": {}
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0"
+    },
+    "@xtuc/long": {
+      "version": "4.2.2"
+    },
+    "abbrev": {
+      "version": "1.1.1"
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "6.4.2"
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-errors": {
+      "version": "1.0.1",
+      "requires": {}
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "requires": {}
+    },
+    "ansi-align": {
+      "version": "3.0.0",
+      "requires": {
+        "string-width": "^3.0.0"
+      }
+    },
+    "ansi-colors": {
+      "version": "4.1.1"
+    },
+    "ansi-regex": {
+      "version": "4.1.0"
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.1",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "aproba": {
+      "version": "1.2.0"
+    },
+    "arr-diff": {
+      "version": "4.0.0"
+    },
+    "arr-flatten": {
+      "version": "1.1.0"
+    },
+    "arr-union": {
+      "version": "3.1.0"
+    },
+    "array-back": {
+      "version": "4.0.1"
+    },
+    "array-flatten": {
+      "version": "1.1.1"
+    },
+    "array-unique": {
+      "version": "0.3.2"
+    },
+    "asn1.js": {
+      "version": "5.4.1",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
+      }
+    },
+    "assert": {
+      "version": "1.5.0",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1"
+        },
+        "util": {
+          "version": "0.10.3",
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
+    "assign-symbols": {
+      "version": "1.0.0"
+    },
+    "async-each": {
+      "version": "1.0.3",
+      "optional": true
+    },
+    "atob": {
+      "version": "2.1.2"
+    },
+    "babel-loader": {
+      "version": "8.1.0",
+      "requires": {
+        "find-cache-dir": "^2.1.0",
+        "loader-utils": "^1.4.0",
+        "mkdirp": "^0.5.3",
+        "pify": "^4.0.1",
+        "schema-utils": "^2.6.5"
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24"
+    },
+    "babel-preset-react-app": {
+      "version": "10.0.0",
+      "requires": {
+        "@babel/core": "7.12.3",
+        "@babel/plugin-proposal-class-properties": "7.12.1",
+        "@babel/plugin-proposal-decorators": "7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
+        "@babel/plugin-proposal-numeric-separator": "7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "7.12.1",
+        "@babel/plugin-transform-flow-strip-types": "7.12.1",
+        "@babel/plugin-transform-react-display-name": "7.12.1",
+        "@babel/plugin-transform-runtime": "7.12.1",
+        "@babel/preset-env": "7.12.1",
+        "@babel/preset-react": "7.12.1",
+        "@babel/preset-typescript": "7.12.1",
+        "@babel/runtime": "7.12.1",
+        "babel-plugin-macros": "2.8.0",
+        "babel-plugin-transform-react-remove-prop-types": "0.4.24"
+      },
+      "dependencies": {
+        "@babel/core": {
+          "version": "7.12.3",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
+          "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.12.1",
+            "@babel/helper-module-transforms": "^7.12.1",
+            "@babel/helpers": "^7.12.1",
+            "@babel/parser": "^7.12.3",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.12.1",
+            "@babel/types": "^7.12.1",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.19",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
+          }
+        }
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.0"
+    },
+    "base": {
+      "version": "0.11.2",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1"
+    },
+    "big.js": {
+      "version": "5.2.2"
+    },
+    "binary-extensions": {
+      "version": "2.1.0"
+    },
+    "bindings": {
+      "version": "1.5.0",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2"
+    },
+    "bn.js": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+      "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ=="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.0"
+        },
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "boxen": {
+      "version": "4.2.0",
+      "requires": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chalk": "^3.0.0",
+        "cli-boxes": "^2.2.0",
+        "string-width": "^4.1.0",
+        "term-size": "^2.1.0",
+        "type-fest": "^0.8.1",
+        "widest-line": "^3.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0"
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4"
+        },
+        "emoji-regex": {
+          "version": "8.0.0"
+        },
+        "has-flag": {
+          "version": "4.0.0"
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0"
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "brorand": {
+      "version": "1.1.0"
+    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "requires": {
+        "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": {
+      "version": "1.0.1",
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.1.0",
+      "requires": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.2.tgz",
+      "integrity": "sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==",
+      "requires": {
+        "bn.js": "^5.2.1",
+        "browserify-rsa": "^4.1.0",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.4",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.6",
+        "readable-stream": "^3.6.2",
+        "safe-buffer": "^5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1"
+        }
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "requires": {
+        "pako": "~1.0.5"
+      }
+    },
+    "browserslist": {
+      "version": "4.16.6",
+      "requires": {
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      }
+    },
+    "buffer": {
+      "version": "4.9.2",
+      "requires": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4",
+        "isarray": "^1.0.0"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.1"
+    },
+    "buffer-xor": {
+      "version": "1.0.3"
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0"
+    },
+    "bytes": {
+      "version": "3.0.0"
+    },
+    "cacache": {
+      "version": "12.0.4",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "requires": {
+        "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"
+      }
+    },
+    "cacheable-request": {
+      "version": "6.1.0",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.2.0",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lowercase-keys": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "call-bind": {
+      "version": "1.0.0",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.0"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0"
+    },
+    "camelcase": {
+      "version": "5.3.1"
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001233"
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.4.3",
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4"
+    },
+    "chrome-trace-event": {
+      "version": "1.0.2",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "ci-info": {
+      "version": "2.0.0"
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "cli-boxes": {
+      "version": "2.2.1"
+    },
+    "cliui": {
+      "version": "5.0.0",
+      "requires": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
+    "clone-response": {
+      "version": "1.0.2",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3"
+    },
+    "colorette": {
+      "version": "1.2.2"
+    },
+    "command-line-usage": {
+      "version": "6.1.1",
+      "requires": {
+        "array-back": "^4.0.1",
+        "chalk": "^2.4.2",
+        "table-layout": "^1.0.1",
+        "typical": "^5.2.0"
+      }
+    },
+    "commondir": {
+      "version": "1.0.1"
+    },
+    "component-emitter": {
+      "version": "1.3.0"
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1"
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "concurrently": {
+      "version": "5.3.0",
+      "requires": {
+        "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": "^6.1.0",
+        "tree-kill": "^1.2.2",
+        "yargs": "^13.3.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "6.1.0",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "configstore": {
+      "version": "5.0.1",
+      "requires": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "3.1.0",
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0"
+        }
+      }
+    },
+    "console-browserify": {
+      "version": "1.2.0"
+    },
+    "constants-browserify": {
+      "version": "1.0.0"
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4"
+    },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "cookie": {
+      "version": "0.4.0"
+    },
+    "cookie-signature": {
+      "version": "1.0.6"
+    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1"
+    },
+    "core-js-compat": {
+      "version": "3.8.1",
+      "requires": {
+        "browserslist": "^4.15.0",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.0.0"
+        }
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2"
+    },
+    "cosmiconfig": {
+      "version": "6.0.0",
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      }
+    },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "requires": {
+        "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": {
+      "version": "1.1.7",
+      "requires": {
+        "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-env": {
+      "version": "7.0.3",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.1"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "requires": {
+        "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-random-string": {
+      "version": "2.0.0"
+    },
+    "cyclist": {
+      "version": "1.0.1"
+    },
+    "date-fns": {
+      "version": "2.16.1"
+    },
+    "debug": {
+      "version": "4.3.1",
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0"
+    },
+    "decode-uri-component": {
+      "version": "0.2.0"
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0"
+    },
+    "defer-to-connect": {
+      "version": "1.1.3"
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "requires": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "depd": {
+      "version": "1.1.2"
+    },
+    "des.js": {
+      "version": "1.0.1",
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "destroy": {
+      "version": "1.0.4"
+    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
+      }
+    },
+    "domain-browser": {
+      "version": "1.2.0"
+    },
+    "dot-prop": {
+      "version": "5.3.0",
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
+    },
+    "duplexer3": {
+      "version": "0.1.4"
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1"
+    },
+    "electron-to-chromium": {
+      "version": "1.3.743"
+    },
+    "elliptic": {
+      "version": "6.5.4",
+      "requires": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
+      }
+    },
+    "emoji-regex": {
+      "version": "7.0.3"
+    },
+    "emojis-list": {
+      "version": "3.0.0"
+    },
+    "encodeurl": {
+      "version": "1.0.2"
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "4.3.0",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.5.0",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "memory-fs": {
+          "version": "0.5.0",
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "enquirer": {
+      "version": "2.3.6",
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
+    "envinfo": {
+      "version": "7.7.3"
+    },
+    "errno": {
+      "version": "0.1.8",
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1"
+    },
+    "escape-goat": {
+      "version": "2.1.1"
+    },
+    "escape-html": {
+      "version": "1.0.3"
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5"
+    },
+    "eslint-scope": {
+      "version": "4.0.3",
+      "requires": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0"
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0"
+    },
+    "esutils": {
+      "version": "2.0.3"
+    },
+    "etag": {
+      "version": "1.8.1"
+    },
+    "events": {
+      "version": "3.2.0"
+    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "execa": {
+      "version": "4.1.0",
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.2.0",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        }
+      }
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "express": {
+      "version": "4.17.1",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "extend-shallow": {
+      "version": "3.0.2",
+      "requires": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3"
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0"
+    },
+    "figgy-pudding": {
+      "version": "3.5.2"
+    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "optional": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "2.1.0",
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      }
+    },
+    "find-up": {
+      "version": "3.0.0",
+      "requires": {
+        "locate-path": "^3.0.0"
+      }
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "for-in": {
+      "version": "1.0.2"
+    },
+    "forwarded": {
+      "version": "0.1.2"
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2"
+    },
+    "from2": {
+      "version": "2.3.0",
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0"
+    },
+    "fsevents": {
+      "version": "2.1.3",
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1"
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2"
+    },
+    "get-caller-file": {
+      "version": "2.0.5"
+    },
+    "get-intrinsic": {
+      "version": "1.0.2",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "get-value": {
+      "version": "2.0.6"
+    },
+    "glob": {
+      "version": "7.1.6",
+      "requires": {
+        "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-parent": {
+      "version": "5.1.1",
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "global-dirs": {
+      "version": "2.1.0",
+      "requires": {
+        "ini": "1.3.7"
+      }
+    },
+    "globals": {
+      "version": "11.12.0"
+    },
+    "got": {
+      "version": "9.6.0",
+      "requires": {
+        "@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": {
+      "version": "4.2.4"
+    },
+    "has": {
+      "version": "1.0.3",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0"
+    },
+    "has-symbols": {
+      "version": "1.0.1"
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "4.0.0",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "has-yarn": {
+      "version": "2.1.0"
+    },
+    "hash-base": {
+      "version": "3.1.0",
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1"
+        }
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.8.9"
+    },
+    "http-cache-semantics": {
+      "version": "4.1.0"
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3"
+        }
+      }
+    },
+    "https-browserify": {
+      "version": "1.0.0"
+    },
+    "human-signals": {
+      "version": "1.1.1"
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "ieee754": {
+      "version": "1.2.1"
+    },
+    "iferr": {
+      "version": "0.1.5"
+    },
+    "ignore-by-default": {
+      "version": "1.0.1"
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "import-lazy": {
+      "version": "2.1.0"
+    },
+    "import-local": {
+      "version": "3.0.2",
+      "requires": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0"
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        }
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4"
+    },
+    "infer-owner": {
+      "version": "1.0.4"
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4"
+    },
+    "ini": {
+      "version": "1.3.7"
+    },
+    "interpret": {
+      "version": "2.2.0"
+    },
+    "ipaddr.js": {
+      "version": "1.9.1"
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1"
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6"
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "requires": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0"
+        }
+      }
+    },
+    "is-extendable": {
+      "version": "0.1.1"
+    },
+    "is-extglob": {
+      "version": "2.1.1"
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0"
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-installed-globally": {
+      "version": "0.3.2",
+      "requires": {
+        "global-dirs": "^2.0.1",
+        "is-path-inside": "^3.0.1"
+      }
+    },
+    "is-npm": {
+      "version": "4.0.0"
+    },
+    "is-number": {
+      "version": "7.0.0"
+    },
+    "is-obj": {
+      "version": "2.0.0"
+    },
+    "is-path-inside": {
+      "version": "3.0.2"
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-stream": {
+      "version": "2.0.0"
+    },
+    "is-typedarray": {
+      "version": "1.0.0"
+    },
+    "is-windows": {
+      "version": "1.0.2"
+    },
+    "is-wsl": {
+      "version": "1.1.0"
+    },
+    "is-yarn-global": {
+      "version": "0.3.0"
+    },
+    "isarray": {
+      "version": "1.0.0"
+    },
+    "isexe": {
+      "version": "2.0.0"
+    },
+    "isobject": {
+      "version": "3.0.1"
+    },
+    "js-tokens": {
+      "version": "4.0.0"
+    },
+    "jsesc": {
+      "version": "2.5.2"
+    },
+    "json-buffer": {
+      "version": "3.0.0"
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2"
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1"
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1"
+    },
+    "json5": {
+      "version": "2.1.3",
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "keyv": {
+      "version": "3.1.0",
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.3"
+    },
+    "latest-version": {
+      "version": "5.1.0",
+      "requires": {
+        "package-json": "^6.3.0"
+      }
+    },
+    "leven": {
+      "version": "3.1.0"
+    },
+    "lines-and-columns": {
+      "version": "1.1.6"
+    },
+    "loader-runner": {
+      "version": "2.4.0"
+    },
+    "loader-utils": {
+      "version": "1.4.0",
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21"
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lowercase-keys": {
+      "version": "1.0.1"
+    },
+    "lru-cache": {
+      "version": "5.1.1",
+      "requires": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2"
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0"
+    },
+    "memory-fs": {
+      "version": "0.4.1",
+      "requires": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1"
+    },
+    "merge-stream": {
+      "version": "2.0.0"
+    },
+    "methods": {
+      "version": "1.1.2"
+    },
+    "micromatch": {
+      "version": "3.1.10",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "requires": {
+            "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"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
+      }
+    },
+    "mime": {
+      "version": "1.6.0"
+    },
+    "mime-db": {
+      "version": "1.44.0"
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0"
+    },
+    "mimic-response": {
+      "version": "1.0.1"
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1"
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1"
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5"
+    },
+    "mississippi": {
+      "version": "3.0.0",
+      "requires": {
+        "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": {
+      "version": "1.3.2",
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "ms": {
+      "version": "2.1.2"
+    },
+    "nan": {
+      "version": "2.14.2",
+      "optional": true
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "requires": {
+        "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"
+      }
+    },
+    "negotiator": {
+      "version": "0.6.2"
+    },
+    "neo-async": {
+      "version": "2.6.2"
+    },
+    "node-libs-browser": {
+      "version": "2.2.1",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1"
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          },
+          "dependencies": {
+            "string_decoder": {
+              "version": "1.1.1",
+              "requires": {
+                "safe-buffer": "~5.1.0"
+              }
+            }
+          }
+        }
+      }
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0"
+    },
+    "node-releases": {
+      "version": "1.1.72"
+    },
+    "nodemon": {
+      "version": "2.0.6",
+      "requires": {
+        "chokidar": "^3.2.2",
+        "debug": "^3.2.6",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.0.4",
+        "pstree.remy": "^1.1.7",
+        "semver": "^5.7.1",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.3",
+        "update-notifier": "^4.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "nopt": {
+      "version": "1.0.10",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0"
+    },
+    "normalize-url": {
+      "version": "4.5.0"
+    },
+    "npm-run-path": {
+      "version": "4.0.1",
+      "requires": {
+        "path-key": "^3.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1"
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1"
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "requires": {
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2"
+    },
+    "once": {
+      "version": "1.4.0",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "os-browserify": {
+      "version": "0.3.0"
+    },
+    "p-cancelable": {
+      "version": "1.1.0"
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0"
+    },
+    "package-json": {
+      "version": "6.5.0",
+      "requires": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0"
+        }
+      }
+    },
+    "pako": {
+      "version": "1.0.11"
+    },
+    "parallel-transform": {
+      "version": "1.2.0",
+      "requires": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "requires": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "parse-json": {
+      "version": "5.1.0",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3"
+    },
+    "pascalcase": {
+      "version": "0.1.1"
+    },
+    "path-browserify": {
+      "version": "0.0.1"
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "optional": true
+    },
+    "path-exists": {
+      "version": "3.0.0"
+    },
+    "path-is-absolute": {
+      "version": "1.0.1"
+    },
+    "path-key": {
+      "version": "3.1.1"
+    },
+    "path-parse": {
+      "version": "1.0.6"
+    },
+    "path-to-regexp": {
+      "version": "0.1.7"
+    },
+    "path-type": {
+      "version": "4.0.0"
+    },
+    "pbkdf2": {
+      "version": "3.1.1",
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "picomatch": {
+      "version": "2.2.2"
+    },
+    "pify": {
+      "version": "4.0.1"
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "3.0.0",
+      "requires": {
+        "find-up": "^3.0.0"
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1"
+    },
+    "prepend-http": {
+      "version": "2.0.0"
+    },
+    "prettier": {
+      "version": "1.19.1",
+      "dev": true
+    },
+    "process": {
+      "version": "0.11.10"
+    },
+    "process-nextick-args": {
+      "version": "2.0.1"
+    },
+    "promise-inflight": {
+      "version": "1.0.1"
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "prr": {
+      "version": "1.0.1"
+    },
+    "pstree.remy": {
+      "version": "1.1.8"
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
+      }
+    },
+    "pump": {
+      "version": "3.0.0",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "punycode": {
+      "version": "2.1.1"
+    },
+    "pupa": {
+      "version": "2.1.1",
+      "requires": {
+        "escape-goat": "^2.0.0"
+      }
+    },
+    "qs": {
+      "version": "6.7.0"
+    },
+    "querystring": {
+      "version": "0.2.0"
+    },
+    "querystring-es3": {
+      "version": "0.2.1"
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "randomfill": {
+      "version": "1.0.4",
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1"
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.0"
+        }
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
+    "react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      }
+    },
+    "react-error-boundary": {
+      "version": "3.1.3",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.12.5",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "read-pkg": {
+      "version": "4.0.1",
+      "requires": {
+        "normalize-package-data": "^2.3.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "4.0.0",
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "pify": {
+          "version": "3.0.0"
+        }
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.5.0",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "rechoir": {
+      "version": "0.7.0",
+      "requires": {
+        "resolve": "^1.9.0"
+      }
+    },
+    "reduce-flatten": {
+      "version": "2.0.0"
+    },
+    "regenerate": {
+      "version": "1.4.2"
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "requires": {
+        "regenerate": "^1.4.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.7"
+    },
+    "regenerator-transform": {
+      "version": "0.14.5",
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "regexpu-core": {
+      "version": "4.7.1",
+      "requires": {
+        "regenerate": "^1.4.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
+        "unicode-match-property-ecmascript": "^1.0.4",
+        "unicode-match-property-value-ecmascript": "^1.2.0"
+      }
+    },
+    "registry-auth-token": {
+      "version": "4.2.1",
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "registry-url": {
+      "version": "5.1.0",
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.2"
+    },
+    "regjsparser": {
+      "version": "0.6.4",
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0"
+        }
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "optional": true
+    },
+    "repeat-element": {
+      "version": "1.1.3"
+    },
+    "repeat-string": {
+      "version": "1.6.1"
+    },
+    "require-directory": {
+      "version": "2.1.1"
+    },
+    "require-main-filename": {
+      "version": "2.0.0"
+    },
+    "resolve": {
+      "version": "1.12.0",
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-cwd": {
+      "version": "3.0.0",
+      "requires": {
+        "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "5.0.0"
+        }
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0"
+    },
+    "resolve-url": {
+      "version": "0.2.1"
+    },
+    "responselike": {
+      "version": "1.0.2",
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "ret": {
+      "version": "0.1.15"
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "run-queue": {
+      "version": "1.0.3",
+      "requires": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "rxjs": {
+      "version": "6.6.3",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2"
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2"
+    },
+    "scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "schema-utils": {
+      "version": "2.7.1",
+      "requires": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      }
+    },
+    "semver": {
+      "version": "5.7.1"
+    },
+    "semver-diff": {
+      "version": "3.1.1",
+      "requires": {
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0"
+        }
+      }
+    },
+    "send": {
+      "version": "0.17.1",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0"
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.1"
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "4.0.0",
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0"
+    },
+    "set-value": {
+      "version": "2.0.1",
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5"
+    },
+    "setprototypeof": {
+      "version": "1.1.1"
+    },
+    "sha.js": {
+      "version": "2.4.11",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0"
+    },
+    "signal-exit": {
+      "version": "3.0.3"
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "requires": {
+        "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"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "requires": {
+        "kind-of": "^3.2.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "source-list-map": {
+      "version": "2.0.1"
+    },
+    "source-map": {
+      "version": "0.5.7"
+    },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1"
+        }
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.0"
+    },
+    "spawn-command": {
+      "version": "0.0.2-1"
+    },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0"
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.7"
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      }
+    },
+    "ssri": {
+      "version": "6.0.2",
+      "requires": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.5.0"
+    },
+    "stream-browserify": {
+      "version": "2.0.2",
+      "requires": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "stream-http": {
+      "version": "2.8.3",
+      "requires": {
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.3.6",
+        "to-arraybuffer": "^1.0.0",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1"
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1"
+        }
+      }
+    },
+    "string-width": {
+      "version": "3.1.0",
+      "requires": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "5.2.0",
+      "requires": {
+        "ansi-regex": "^4.1.0"
+      }
+    },
+    "strip-final-newline": {
+      "version": "2.0.0"
+    },
+    "strip-json-comments": {
+      "version": "2.0.1"
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "table-layout": {
+      "version": "1.0.1",
+      "requires": {
+        "array-back": "^4.0.1",
+        "deep-extend": "~0.6.0",
+        "typical": "^5.2.0",
+        "wordwrapjs": "^4.0.0"
+      }
+    },
+    "tapable": {
+      "version": "1.1.3"
+    },
+    "term-size": {
+      "version": "2.2.1"
+    },
+    "terser": {
+      "version": "4.8.0",
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3"
+        },
+        "source-map": {
+          "version": "0.6.1"
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "1.4.5",
+      "requires": {
+        "cacache": "^12.0.2",
+        "find-cache-dir": "^2.1.0",
+        "is-wsl": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^4.0.0",
+        "source-map": "^0.6.1",
+        "terser": "^4.1.2",
+        "webpack-sources": "^1.4.0",
+        "worker-farm": "^1.7.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1"
+        }
+      }
+    },
+    "through2": {
+      "version": "2.0.5",
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "requires": {
+            "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"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "requires": {
+        "setimmediate": "^1.0.4"
+      }
+    },
+    "to-arraybuffer": {
+      "version": "1.0.1"
+    },
+    "to-fast-properties": {
+      "version": "2.0.0"
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "to-readable-stream": {
+      "version": "1.0.0"
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0"
+    },
+    "touch": {
+      "version": "3.1.0",
+      "requires": {
+        "nopt": "~1.0.10"
+      }
+    },
+    "tree-kill": {
+      "version": "1.2.2"
+    },
+    "tslib": {
+      "version": "1.14.1"
+    },
+    "tty-browserify": {
+      "version": "0.0.0"
+    },
+    "type-fest": {
+      "version": "0.8.1"
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6"
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "typical": {
+      "version": "5.2.0"
+    },
+    "undefsafe": {
+      "version": "2.0.3",
+      "requires": {
+        "debug": "^2.2.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
+        }
+      }
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4"
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^1.0.4",
+        "unicode-property-aliases-ecmascript": "^1.0.4"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "1.2.0"
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.1.0"
+    },
+    "union-value": {
+      "version": "1.0.1",
+      "requires": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      }
+    },
+    "unique-filename": {
+      "version": "1.1.1",
+      "requires": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.2",
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0"
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4"
+        }
+      }
+    },
+    "upath": {
+      "version": "1.2.0",
+      "optional": true
+    },
+    "update-notifier": {
+      "version": "4.1.3",
+      "requires": {
+        "boxen": "^4.2.0",
+        "chalk": "^3.0.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.3.1",
+        "is-npm": "^4.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.0.0",
+        "pupa": "^2.0.1",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4"
+        },
+        "has-flag": {
+          "version": "4.0.0"
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "uri-js": {
+      "version": "4.4.0",
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "urix": {
+      "version": "0.1.0"
+    },
+    "url": {
+      "version": "0.11.0",
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2"
+        }
+      }
+    },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "requires": {
+        "prepend-http": "^2.0.0"
+      }
+    },
+    "use": {
+      "version": "3.1.1"
+    },
+    "util": {
+      "version": "0.11.1",
+      "requires": {
+        "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3"
+        }
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2"
+    },
+    "utils-merge": {
+      "version": "1.0.1"
+    },
+    "v8-compile-cache": {
+      "version": "2.2.0"
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2"
+    },
+    "vm-browserify": {
+      "version": "1.1.2"
+    },
+    "watchpack": {
+      "version": "1.7.5",
+      "requires": {
+        "chokidar": "^3.4.1",
+        "graceful-fs": "^4.1.2",
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.1",
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "optional": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "optional": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "optional": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "optional": true,
+          "requires": {
+            "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"
+          }
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "optional": true,
+          "requires": {
+            "anymatch": "^2.0.0",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
+            "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"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "optional": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "optional": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "optional": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "optional": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "optional": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "optional": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "optional": true,
+          "requires": {
+            "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"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "optional": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "optional": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "optional": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "webpack": {
+      "version": "4.44.2",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "acorn": "^6.4.1",
+        "ajv": "^6.10.2",
+        "ajv-keywords": "^3.4.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^4.3.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.3",
+        "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.3",
+        "watchpack": "^1.7.4",
+        "webpack-sources": "^1.4.1"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
+    "webpack-cli": {
+      "version": "4.2.0",
+      "requires": {
+        "@webpack-cli/info": "^1.1.0",
+        "@webpack-cli/serve": "^1.1.0",
+        "colorette": "^1.2.1",
+        "command-line-usage": "^6.1.0",
+        "commander": "^6.2.0",
+        "enquirer": "^2.3.6",
+        "execa": "^4.1.0",
+        "import-local": "^3.0.2",
+        "interpret": "^2.2.0",
+        "leven": "^3.1.0",
+        "rechoir": "^0.7.0",
+        "v8-compile-cache": "^2.2.0",
+        "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1"
+        }
+      }
+    },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "webpack-sources": {
+      "version": "1.4.3",
+      "requires": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1"
+        }
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "2.0.0"
+    },
+    "widest-line": {
+      "version": "3.1.0",
+      "requires": {
+        "string-width": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0"
+        },
+        "emoji-regex": {
+          "version": "8.0.0"
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0"
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "wordwrapjs": {
+      "version": "4.0.0",
+      "requires": {
+        "reduce-flatten": "^2.0.0",
+        "typical": "^5.0.0"
+      }
+    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "requires": {
+        "errno": "~0.1.7"
+      }
+    },
+    "wrap-ansi": {
+      "version": "5.1.0",
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2"
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "requires": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "xdg-basedir": {
+      "version": "4.0.0"
+    },
+    "xtend": {
+      "version": "4.0.2"
+    },
+    "y18n": {
+      "version": "4.0.1"
+    },
+    "yallist": {
+      "version": "3.1.1"
+    },
+    "yaml": {
+      "version": "1.10.0"
+    },
+    "yargs": {
+      "version": "13.3.2",
+      "requires": {
+        "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.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "13.1.2",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  }
+}
diff --git a/fixtures/ssr2/package.json b/fixtures/ssr2/package.json
new file mode 100644
index 00000000000..1acf976d85c
--- /dev/null
+++ b/fixtures/ssr2/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "react-ssr",
+  "version": "0.1.0",
+  "private": true,
+  "engines": {
+    "node": ">=14.9.0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "7.14.3",
+    "@babel/register": "7.13.16",
+    "babel-loader": "8.1.0",
+    "babel-preset-react-app": "10.0.0",
+    "compression": "^1.7.4",
+    "concurrently": "^5.3.0",
+    "express": "^4.17.1",
+    "nodemon": "^2.0.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^3.1.3",
+    "resolve": "1.12.0",
+    "rimraf": "^3.0.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.2.0"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "prettier": "1.19.1"
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:bundler\"",
+    "start": "concurrently \"npm run start:server\" \"npm run start:bundler\"",
+    "dev:server": "cross-env NODE_ENV=development nodemon -- server/server.js",
+    "start:server": "cross-env NODE_ENV=production nodemon -- server/server.js",
+    "dev:bundler": "cross-env NODE_ENV=development nodemon -- scripts/build.js",
+    "start:bundler": "cross-env NODE_ENV=production nodemon -- scripts/build.js"
+  },
+  "babel": {
+    "presets": [
+      [
+        "react-app",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ]
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "build/*"
+    ]
+  }
+}
diff --git a/fixtures/ssr2/public/main.css b/fixtures/ssr2/public/main.css
new file mode 100644
index 00000000000..34b4ecb1ce7
--- /dev/null
+++ b/fixtures/ssr2/public/main.css
@@ -0,0 +1,74 @@
+body {
+  font-family: system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+nav {
+  padding: 20px;
+}
+
+.sidebar {
+  padding: 10px;
+  height: 500px;
+  float: left;
+  width: 30%;
+}
+
+.post {
+  padding: 20px;
+  float: left;
+  width: 60%;
+}
+
+h1, h2 {
+  padding: 0;
+}
+
+ul, li {
+  margin: 0;
+}
+
+.post p {
+  font-size: larger;
+  font-family: Georgia, serif;
+}
+
+.comments {
+  margin-top: 40px;
+}
+
+.comment {
+  border: 2px solid #aaa;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+/* https://codepen.io/mandelid/pen/vwKoe */
+.spinner {
+  display: inline-block;
+  transition: opacity linear 0.1s;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(80, 80, 80, 0.5);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+  opacity: 0;
+}
+.spinner--active {
+  opacity: 1;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/fixtures/ssr2/scripts/build.js b/fixtures/ssr2/scripts/build.js
new file mode 100644
index 00000000000..0acf6c2814b
--- /dev/null
+++ b/fixtures/ssr2/scripts/build.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 path = require('path');
+const rimraf = require('rimraf');
+const webpack = require('webpack');
+
+const isProduction = process.env.NODE_ENV === 'production';
+rimraf.sync(path.resolve(__dirname, '../build'));
+webpack(
+  {
+    mode: isProduction ? 'production' : 'development',
+    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+    entry: [path.resolve(__dirname, '../src/index.js')],
+    output: {
+      path: path.resolve(__dirname, '../build'),
+      filename: 'main.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: 'babel-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+  },
+  (err, stats) => {
+    if (err) {
+      console.error(err.stack || err);
+      if (err.details) {
+        console.error(err.details);
+      }
+      process.exit(1);
+    }
+    const info = stats.toJson();
+    if (stats.hasErrors()) {
+      console.log('Finished running webpack with errors.');
+      info.errors.forEach(e => console.error(e));
+      process.exit(1);
+    } else {
+      console.log('Finished running webpack.');
+    }
+  }
+);
diff --git a/fixtures/ssr2/server/delays.js b/fixtures/ssr2/server/delays.js
new file mode 100644
index 00000000000..0f51247d28d
--- /dev/null
+++ b/fixtures/ssr2/server/delays.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Tweak these to play with different kinds of latency.
+
+// How long the data fetches on the server.
+exports.API_DELAY = 2000;
+
+// How long the server waits for data before giving up.
+exports.ABORT_DELAY = 10000;
+
+// How long serving the JS bundles is delayed.
+exports.JS_BUNDLE_DELAY = 4000;
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
new file mode 100644
index 00000000000..ffc3ec636d2
--- /dev/null
+++ b/fixtures/ssr2/server/render.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+// import {renderToString} from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
+import App from '../src/App';
+import {DataProvider} from '../src/data';
+import {API_DELAY, ABORT_DELAY} from './delays';
+
+// In a real setup, you'd read it from webpack build stats.
+let assets = {
+  'main.js': '/main.js',
+  'main.css': '/main.css',
+};
+
+module.exports = function render(url, res) {
+  const data = createServerData();
+  // This is how you would wire it up previously:
+  //
+  // res.send(
+  //   '<!DOCTYPE html>' +
+  //   renderToString(
+  //     <DataProvider data={data}>
+  //       <App assets={assets} />
+  //     </DataProvider>,
+  //   )
+  // );
+
+  // The new wiring is a bit more involved.
+  res.socket.on('error', error => {
+    console.error('Fatal', error);
+  });
+  let didError = false;
+  const {pipe, abort} = renderToPipeableStream(
+    <DataProvider data={data}>
+      <App assets={assets} />
+    </DataProvider>,
+    {
+      bootstrapScripts: [assets['main.js']],
+      onAllReady() {
+        // Full completion.
+        // You can use this for SSG or crawlers.
+      },
+      onShellReady() {
+        // If something errored before we started streaming, we set the error code appropriately.
+        res.statusCode = didError ? 500 : 200;
+        res.setHeader('Content-type', 'text/html');
+        pipe(res);
+      },
+      onShellError(x) {
+        // Something errored before we could complete the shell so we emit an alternative shell.
+        res.statusCode = 500;
+        res.send('<!doctype><p>Error</p>');
+      },
+      onError(x) {
+        didError = true;
+        console.error(x);
+      },
+    }
+  );
+  // Abandon and switch to client rendering if enough time passes.
+  // Try lowering this to see the client recover.
+  setTimeout(abort, ABORT_DELAY);
+};
+
+// Simulate a delay caused by data fetching.
+// We fake this because the streaming HTML renderer
+// is not yet integrated with real data fetching strategies.
+function createServerData() {
+  let done = false;
+  let promise = null;
+  return {
+    read() {
+      if (done) {
+        return;
+      }
+      if (promise) {
+        throw promise;
+      }
+      promise = new Promise(resolve => {
+        setTimeout(() => {
+          done = true;
+          promise = null;
+          resolve();
+        }, API_DELAY);
+      });
+      throw promise;
+    },
+  };
+}
diff --git a/fixtures/ssr2/server/server.js b/fixtures/ssr2/server/server.js
new file mode 100644
index 00000000000..4e5b90f400f
--- /dev/null
+++ b/fixtures/ssr2/server/server.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 babelRegister = require('@babel/register');
+babelRegister({
+  ignore: [/[\\\/](build|server\/server|node_modules)[\\\/]/],
+  presets: [['react-app', {runtime: 'automatic'}]],
+  plugins: ['@babel/transform-modules-commonjs'],
+});
+
+const express = require('express');
+const compress = require('compression');
+const {readFileSync} = require('fs');
+const path = require('path');
+const render = require('./render');
+const {JS_BUNDLE_DELAY} = require('./delays');
+
+const PORT = process.env.PORT || 4000;
+const app = express();
+
+app.use((req, res, next) => {
+  if (req.url.endsWith('.js')) {
+    // Artificially delay serving JS
+    // to demonstrate streaming HTML.
+    setTimeout(next, JS_BUNDLE_DELAY);
+  } else {
+    next();
+  }
+});
+
+app.use(compress());
+app.get(
+  '/',
+  handleErrors(async function (req, res) {
+    await waitForWebpack();
+    render(req.url, res);
+  })
+);
+app.use(express.static('build'));
+app.use(express.static('public'));
+
+app
+  .listen(PORT, () => {
+    console.log(`Listening at ${PORT}...`);
+  })
+  .on('error', function (error) {
+    if (error.syscall !== 'listen') {
+      throw error;
+    }
+    const isPipe = portOrPipe => Number.isNaN(portOrPipe);
+    const bind = isPipe(PORT) ? '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;
+    }
+  });
+
+function handleErrors(fn) {
+  return async function (req, res, next) {
+    try {
+      return await fn(req, res);
+    } catch (x) {
+      next(x);
+    }
+  };
+}
+
+async function waitForWebpack() {
+  while (true) {
+    try {
+      readFileSync(path.resolve(__dirname, '../build/main.js'));
+      return;
+    } catch (err) {
+      console.log(
+        'Could not find webpack build output. Will retry in a second...'
+      );
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+  }
+}
diff --git a/fixtures/ssr2/src/App.js b/fixtures/ssr2/src/App.js
new file mode 100644
index 00000000000..97f64273155
--- /dev/null
+++ b/fixtures/ssr2/src/App.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {Suspense, lazy} from 'react';
+import {ErrorBoundary} from 'react-error-boundary';
+import Html from './Html';
+import Spinner from './Spinner';
+import Layout from './Layout';
+import NavBar from './NavBar';
+
+const Comments = lazy(() => import('./Comments' /* webpackPrefetch: true */));
+const Sidebar = lazy(() => import('./Sidebar' /* webpackPrefetch: true */));
+const Post = lazy(() => import('./Post' /* webpackPrefetch: true */));
+
+export default function App({assets}) {
+  return (
+    <Html assets={assets} title="Hello">
+      <Suspense fallback={<Spinner />}>
+        <ErrorBoundary FallbackComponent={Error}>
+          <Content />
+        </ErrorBoundary>
+      </Suspense>
+    </Html>
+  );
+}
+
+function Content() {
+  return (
+    <Layout>
+      <NavBar />
+      <aside className="sidebar">
+        <Suspense fallback={<Spinner />}>
+          <Sidebar />
+        </Suspense>
+      </aside>
+      <article className="post">
+        <Suspense fallback={<Spinner />}>
+          <Post />
+        </Suspense>
+        <section className="comments">
+          <h2>Comments</h2>
+          <Suspense fallback={<Spinner />}>
+            <Comments />
+          </Suspense>
+        </section>
+        <h2>Thanks for reading!</h2>
+      </article>
+    </Layout>
+  );
+}
+
+function Error({error}) {
+  return (
+    <div>
+      <h1>Application Error</h1>
+      <pre style={{whiteSpace: 'pre-wrap'}}>{error.stack}</pre>
+    </div>
+  );
+}
diff --git a/fixtures/ssr2/src/Comments.js b/fixtures/ssr2/src/Comments.js
new file mode 100644
index 00000000000..fb88785e478
--- /dev/null
+++ b/fixtures/ssr2/src/Comments.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useData} from './data';
+
+export default function Comments() {
+  const comments = useData();
+  return (
+    <>
+      {comments.map((comment, i) => (
+        <p className="comment" key={i}>
+          {comment}
+        </p>
+      ))}
+    </>
+  );
+}
diff --git a/fixtures/ssr2/src/Html.js b/fixtures/ssr2/src/Html.js
new file mode 100644
index 00000000000..dc03d9ddb01
--- /dev/null
+++ b/fixtures/ssr2/src/Html.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function Html({assets, children, title}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="shortcut icon" href="favicon.ico" />
+        <link rel="stylesheet" href={assets['main.css']} />
+        <title>{title}</title>
+      </head>
+      <body>
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `<b>Enable JavaScript to run this app.</b>`,
+          }}
+        />
+        {children}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `assetManifest = ${JSON.stringify(assets)};`,
+          }}
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/fixtures/ssr2/src/Layout.js b/fixtures/ssr2/src/Layout.js
new file mode 100644
index 00000000000..ce92a1dcb2d
--- /dev/null
+++ b/fixtures/ssr2/src/Layout.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function Layout({children}) {
+  return <main>{children}</main>;
+}
diff --git a/fixtures/ssr2/src/NavBar.js b/fixtures/ssr2/src/NavBar.js
new file mode 100644
index 00000000000..2c7ae33682d
--- /dev/null
+++ b/fixtures/ssr2/src/NavBar.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function NavBar() {
+  return (
+    <nav>
+      <a href="/">Home</a>
+    </nav>
+  );
+}
diff --git a/fixtures/ssr2/src/Post.js b/fixtures/ssr2/src/Post.js
new file mode 100644
index 00000000000..b8e245478a7
--- /dev/null
+++ b/fixtures/ssr2/src/Post.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function Post() {
+  return (
+    <>
+      <h1>Hello world</h1>
+      <p>
+        This demo is <b>artificially slowed down</b>. Open{' '}
+        <code>server/delays.js</code> to adjust how much different things are
+        slowed down.
+      </p>
+      <p>
+        Notice how HTML for comments "streams in" before the JS (or React) has
+        loaded on the page.
+      </p>
+      <p>
+        Also notice that the JS for comments and sidebar has been code-split,
+        but HTML for it is still included in the server output.
+      </p>
+    </>
+  );
+}
diff --git a/fixtures/ssr2/src/Sidebar.js b/fixtures/ssr2/src/Sidebar.js
new file mode 100644
index 00000000000..6d3108cb75b
--- /dev/null
+++ b/fixtures/ssr2/src/Sidebar.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function Sidebar() {
+  return (
+    <>
+      <h1>Archive</h1>
+      <ul>
+        <li>May 2021</li>
+        <li>April 2021</li>
+        <li>March 2021</li>
+        <li>February 2021</li>
+        <li>January 2021</li>
+        <li>December 2020</li>
+        <li>November 2020</li>
+        <li>October 2020</li>
+        <li>September 2020</li>
+      </ul>
+    </>
+  );
+}
diff --git a/fixtures/ssr2/src/Spinner.js b/fixtures/ssr2/src/Spinner.js
new file mode 100644
index 00000000000..bbb689b46b0
--- /dev/null
+++ b/fixtures/ssr2/src/Spinner.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function Spinner({active = true}) {
+  return (
+    <div
+      className={['spinner', active && 'spinner--active'].join(' ')}
+      role="progressbar"
+      aria-busy={active ? 'true' : 'false'}
+    />
+  );
+}
diff --git a/fixtures/ssr2/src/data.js b/fixtures/ssr2/src/data.js
new file mode 100644
index 00000000000..2a0cf8bcb0d
--- /dev/null
+++ b/fixtures/ssr2/src/data.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {createContext, useContext} from 'react';
+
+// Note: this file does not demonstrate a real data fetching strategy.
+// We only use this to simulate data fetching happening on the server
+// while the cache is populated on the client. In a real app, you would
+// instead use a data fetching library or Server Components for this.
+
+const DataContext = createContext(null);
+
+export function DataProvider({children, data}) {
+  return <DataContext.Provider value={data}>{children}</DataContext.Provider>;
+}
+
+// In a real implementation the data would be streamed with the HTML.
+// We haven't integrated this part yet, so we'll just use fake data.
+const fakeData = [
+  "Wait, it doesn't wait for React to load?",
+  'How does this even work?',
+  'I like marshmallows',
+];
+
+export function useData() {
+  const ctx = useContext(DataContext);
+  if (ctx !== null) {
+    // This context is only provided on the server.
+    // It is here to simulate a suspending data fetch.
+    ctx.read();
+  }
+  return fakeData;
+}
diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
new file mode 100644
index 00000000000..9971b4d5552
--- /dev/null
+++ b/fixtures/ssr2/src/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {hydrateRoot} from 'react-dom/client';
+import App from './App';
+
+hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/fixtures/ssr2/yarn.lock b/fixtures/ssr2/yarn.lock
new file mode 100644
index 00000000000..a1c24ce565a
--- /dev/null
+++ b/fixtures/ssr2/yarn.lock
@@ -0,0 +1,5417 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.15.8.tgz#45990c47adadb00c03677baa89221f7cc23d2503"
+  integrity sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
+"@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+  dependencies:
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
+
+"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
+  integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==
+
+"@babel/core@7.12.3":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
+  integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.1"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.1"
+    "@babel/parser" "^7.12.3"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
+  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.14.3"
+    "@babel/helper-compilation-targets" "^7.13.16"
+    "@babel/helper-module-transforms" "^7.14.2"
+    "@babel/helpers" "^7.14.0"
+    "@babel/parser" "^7.14.3"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.14.2"
+    "@babel/types" "^7.14.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.12.1", "@babel/generator@^7.14.3":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.8.tgz#fa56be6b596952ceb231048cf84ee499a19c0cd1"
+  integrity sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g==
+  dependencies:
+    "@babel/types" "^7.15.6"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.3.tgz#86e6e83d95903fbe7613f448613b8b319f330a8e"
+  integrity sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==
+  dependencies:
+    "@babel/types" "^7.23.3"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835"
+  integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.15.4.tgz#21ad815f609b84ee0e3058676c33cf6d1670525f"
+  integrity sha512-P8o7JP2Mzi0SdC6eWr1zF+AEYvrsZa7GSY1lTayjF5XJhVH0kjLYUZPvTMflP7tBgZoe9gIhTa60QwFpqh/E0Q==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz#cf6d94f30fbefc139123e27dd6b02f65aeedb7b9"
+  integrity sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==
+  dependencies:
+    "@babel/compat-data" "^7.15.0"
+    "@babel/helper-validator-option" "^7.14.5"
+    browserslist "^4.16.6"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.14.5", "@babel/helper-create-class-features-plugin@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.4.tgz#7f977c17bd12a5fba363cb19bea090394bf37d2e"
+  integrity sha512-7ZmzFi+DwJx6A7mHRwbuucEYpyBwmh2Ca0RvI6z2+WLZYCqV0JOaLb+u0zbtmDicebgKBZgqbYfLaKNqSgv5Pw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-member-expression-to-functions" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+
+"@babel/helper-create-regexp-features-plugin@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz#c7d5ac5e9cf621c26057722fb7a8a4c5889358c4"
+  integrity sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    regexpu-core "^4.7.1"
+
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
+"@babel/helper-explode-assignable-expression@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.15.4.tgz#f9aec9d219f271eaf92b9f561598ca6b2682600c"
+  integrity sha512-J14f/vq8+hdC2KoWLIQSsGrC9EFBKE4NFts8pfMpymfApds+fPqR30AOUWc4tyr56h9l/GA1Sxv2q3dLZWbQ/g==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-function-name@^7.14.5", "@babel/helper-function-name@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc"
+  integrity sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.15.4"
+    "@babel/template" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
+"@babel/helper-get-function-arity@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
+  integrity sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-hoist-variables@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df"
+  integrity sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-member-expression-to-functions@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
+  integrity sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.14.5", "@babel/helper-module-imports@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz#e18007d230632dea19b47853b984476e7b4e103f"
+  integrity sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.2", "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.4":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz#d8c0e75a87a52e374a8f25f855174786a09498b2"
+  integrity sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.15.4"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-simple-access" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/helper-validator-identifier" "^7.15.7"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.6"
+
+"@babel/helper-optimise-call-expression@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
+  integrity sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
+"@babel/helper-remap-async-to-generator@^7.14.5", "@babel/helper-remap-async-to-generator@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.15.4.tgz#2637c0731e4c90fbf58ac58b50b2b5a192fc970f"
+  integrity sha512-v53MxgvMK/HCwckJ1bZrq6dNKlmwlyRNYM6ypaRTdXWGOE2c1/SCa6dL/HimhPulGhZKw9W0QhREM583F/t0vQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.15.4"
+    "@babel/helper-wrap-function" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-replace-supers@^7.14.5", "@babel/helper-replace-supers@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz#52a8ab26ba918c7f6dee28628b07071ac7b7347a"
+  integrity sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-simple-access@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz#ac368905abf1de8e9781434b635d8f8674bcc13b"
+  integrity sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1", "@babel/helper-skip-transparent-expression-wrappers@^7.14.5", "@babel/helper-skip-transparent-expression-wrappers@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.15.4.tgz#707dbdba1f4ad0fa34f9114fc8197aec7d5da2eb"
+  integrity sha512-BMRLsdh+D1/aap19TycS4eD1qELGrCBJwzaY9IE8LrpJtJb+H7rQkPIdsfgnMtLBA6DJls7X9z93Z4U8h7xw0A==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-split-export-declaration@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz#aecab92dcdbef6a10aa3b62ab204b085f776e257"
+  integrity sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
+
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
+"@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
+  integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
+
+"@babel/helper-wrap-function@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.15.4.tgz#6f754b2446cfaf3d612523e6ab8d79c27c3a3de7"
+  integrity sha512-Y2o+H/hRV5W8QhIfTpRIBwl57y8PrZt6JM3V8FOo5qarjshHItyH5lXlpMfBfmBefOqSCpKZs/6Dxqp0E/U+uw==
+  dependencies:
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helpers@^7.12.1", "@babel/helpers@^7.14.0":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.4.tgz#5f40f02050a3027121a3cf48d497c05c555eaf43"
+  integrity sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==
+  dependencies:
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.5"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.12.3", "@babel/parser@^7.14.3", "@babel/parser@^7.15.4":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.8.tgz#7bacdcbe71bdc3ff936d510c15dcea7cf0b99016"
+  integrity sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==
+
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.3.tgz#0ce0be31a4ca4f1884b5786057cadcb6c3be58f9"
+  integrity sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==
+
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.8.tgz#a3100f785fab4357987c4223ab1b02b599048403"
+  integrity sha512-2Z5F2R2ibINTc63mY7FLqGfEbmofrHU9FitJW1Q7aPaKFhiPvSq6QEt/BoWN5oME3GVyjcRuNNSRbb9LC0CSWA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-remap-async-to-generator" "^7.15.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
+  integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-class-properties@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz#40d1ee140c5b1e31a350f4f5eed945096559b42e"
+  integrity sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-proposal-decorators@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz#59271439fed4145456c41067450543aee332d15f"
+  integrity sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-decorators" "^7.12.1"
+
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz#0c6617df461c0c1f8fff3b47cd59772360101d2c"
+  integrity sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz#dbad244310ce6ccd083072167d8cea83a52faf76"
+  integrity sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz#38de60db362e83a3d8c944ac858ddf9f0c2239eb"
+  integrity sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz#6e6229c2a99b02ab2915f82571e0cc646a40c738"
+  integrity sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
+  integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz#ee38589ce00e2cc59b299ec3ea406fcd3a0fdaf6"
+  integrity sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz#0e2c6774c4ce48be412119b4d693ac777f7685a6"
+  integrity sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-numeric-separator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz#83631bf33d9a51df184c2102a069ac0c58c05f18"
+  integrity sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.12.1":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.15.6.tgz#ef68050c8703d07b25af402cb96cf7f34a68ed11"
+  integrity sha512-qtOHo7A1Vt+O23qEAX+GdBpqaIuD3i9VRrWgCJeq7WO6H2d14EK3q11urj5Te2MAeK97nMiIdRpwd/ST4JFbNg==
+  dependencies:
+    "@babel/compat-data" "^7.15.0"
+    "@babel/helper-compilation-targets" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.15.4"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz#939dd6eddeff3a67fdf7b3f044b5347262598c3c"
+  integrity sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
+  integrity sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz#fa83651e60a360e3f13797eef00b8d519695b603"
+  integrity sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz#37446495996b2945f30f5be5b60d5e2aa4f5792d"
+  integrity sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz#0f95ee0e757a5d647f378daa0eca7e93faa8bbe8"
+  integrity sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.1":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-decorators@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz#eafb9c0cbe09c8afeb964ba3a7bbd63945a72f20"
+  integrity sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.14.5.tgz#2ff654999497d7d7d142493260005263731da180"
+  integrity sha512-9WK5ZwKCdWHxVuU13XNT6X73FGmutAXeor5lGFq6qhOFtMFUF4jkbijuyUdZZlpYq6E2hZeZf/u3959X9wsv0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-arrow-functions@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz#f7187d9588a768dd080bf4c9ffe117ea62f7862a"
+  integrity sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-async-to-generator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz#72c789084d8f2094acb945633943ef8443d39e67"
+  integrity sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-remap-async-to-generator" "^7.14.5"
+
+"@babel/plugin-transform-block-scoped-functions@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz#e48641d999d4bc157a67ef336aeb54bc44fd3ad4"
+  integrity sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-block-scoping@^7.12.1":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz#94c81a6e2fc230bcce6ef537ac96a1e4d2b3afaf"
+  integrity sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.15.4.tgz#50aee17aaf7f332ae44e3bce4c2e10534d5d3bf1"
+  integrity sha512-Yjvhex8GzBmmPQUvpXRPWQ9WnxXgAFuZSrqOK/eJlOGIXwvv8H3UEdUigl1gb/bnjTrln+e8bkZUYCBt/xYlBg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz#1b9d78987420d11223d41195461cc43b974b204f"
+  integrity sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-destructuring@^7.12.1":
+  version "7.14.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz#0ad58ed37e23e22084d109f185260835e5557576"
+  integrity sha512-0mDE99nK+kVh3xlc5vKwB6wnP9ecuSj+zQCa/n0voENtP/zymdT4HH6QEb65wjjcbqr1Jb/7z9Qp7TF5FtwYGw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz#2f6bf76e46bdf8043b4e7e16cf24532629ba0c7a"
+  integrity sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz#365a4844881bdf1501e3a9f0270e7f0f91177954"
+  integrity sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-exponentiation-operator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz#5154b8dd6a3dfe6d90923d61724bd3deeb90b493"
+  integrity sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-flow-strip-types@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
+  integrity sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.12.1"
+
+"@babel/plugin-transform-for-of@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.15.4.tgz#25c62cce2718cfb29715f416e75d5263fb36a8c2"
+  integrity sha512-DRTY9fA751AFBDh2oxydvVm4SYevs5ILTWLs6xKXps4Re/KG5nfUkr+TdHCrRWB8C69TlzVgA9b3RmGWmgN9LA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-function-name@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz#e81c65ecb900746d7f31802f6bed1f52d915d6f2"
+  integrity sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz#41d06c7ff5d4d09e3cf4587bd3ecf3930c730f78"
+  integrity sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-member-expression-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz#b39cd5212a2bf235a617d320ec2b48bcc091b8a7"
+  integrity sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-modules-amd@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz#4fd9ce7e3411cb8b83848480b7041d83004858f7"
+  integrity sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.4.tgz#8201101240eabb5a76c08ef61b2954f767b6b4c1"
+  integrity sha512-qg4DPhwG8hKp4BbVDvX1s8cohM8a6Bvptu4l6Iingq5rW+yRUAhe/YRup/YcW2zCOlrysEWVhftIcKzrEZv3sA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-simple-access" "^7.15.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.15.4.tgz#b42890c7349a78c827719f1d2d0cd38c7d268132"
+  integrity sha512-fJUnlQrl/mezMneR72CKCgtOoahqGJNVKpompKwzv3BrEXdlPspTcyxrZ1XmDTIr9PpULrgEQo3qNKp6dW7ssw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.15.4"
+    "@babel/helper-module-transforms" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-validator-identifier" "^7.14.9"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-umd@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz#fb662dfee697cce274a7cda525190a79096aa6e0"
+  integrity sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.9.tgz#c68f5c5d12d2ebaba3762e57c2c4f6347a46e7b2"
+  integrity sha512-l666wCVYO75mlAtGFfyFwnWmIXQm3kSH0C3IRnJqWcZbWkoihyAdDhFm2ZWaxWTqvBvhVFfJjMRQ0ez4oN1yYA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+
+"@babel/plugin-transform-new-target@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz#31bdae8b925dc84076ebfcd2a9940143aed7dbf8"
+  integrity sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-object-super@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz#d0b5faeac9e98597a161a9cf78c527ed934cdc45"
+  integrity sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.14.5"
+
+"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.15.4.tgz#5f2285cc3160bf48c8502432716b48504d29ed62"
+  integrity sha512-9WB/GUTO6lvJU3XQsSr6J/WKvBC2hcs4Pew8YxZagi6GkTdniyqp8On5kqdK8MN0LMeu0mGbhPN+O049NV/9FQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz#0ddbaa1f83db3606f1cdf4846fa1dfb473458b34"
+  integrity sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-display-name@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz#1cbcd0c3b1d6648c55374a22fc9b6b7e5341c00d"
+  integrity sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-display-name@^7.12.1":
+  version "7.15.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.15.1.tgz#6aaac6099f1fcf6589d35ae6be1b6e10c8c602b9"
+  integrity sha512-yQZ/i/pUCJAHI/LbtZr413S3VT26qNrEm0M5RRxQJA947/YNYwbZbBaXGDrq6CG5QsZycI1VIP6d7pQaBfP+8Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx-development@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
+  integrity sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx-self@^7.12.1":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.9.tgz#33041e665453391eb6ee54a2ecf3ba1d46bd30f4"
+  integrity sha512-Fqqu0f8zv9W+RyOnx29BX/RlEsBRANbOf5xs5oxb2aHP4FKbLXxIaVPUiCti56LAR1IixMH4EyaixhUsKqoBHw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx-source@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz#79f728e60e6dbd31a2b860b0bf6c9765918acf1d"
+  integrity sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx@^7.12.1", "@babel/plugin-transform-react-jsx@^7.14.5":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.9.tgz#3314b2163033abac5200a869c4de242cd50a914c"
+  integrity sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-jsx" "^7.14.5"
+    "@babel/types" "^7.14.9"
+
+"@babel/plugin-transform-react-pure-annotations@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz#18de612b84021e3a9802cbc212c9d9f46d0d11fc"
+  integrity sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-regenerator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz#9676fd5707ed28f522727c5b3c0aa8544440b04f"
+  integrity sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
+"@babel/plugin-transform-reserved-words@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz#c44589b661cfdbef8d4300dcc7469dffa92f8304"
+  integrity sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-runtime@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
+  integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
+  integrity sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-spread@^7.12.1":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.15.8.tgz#79d5aa27f68d700449b2da07691dfa32d2f6d468"
+  integrity sha512-/daZ8s2tNaRekl9YJa9X4bzjpeRZLt122cpgFnQPLGUe61PH8zMEBmYqKkW5xF5JUEh5buEGXJoQpqBmIbpmEQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.15.4"
+
+"@babel/plugin-transform-sticky-regex@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz#5b617542675e8b7761294381f3c28c633f40aeb9"
+  integrity sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-template-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz#a5f2bc233937d8453885dc736bdd8d9ffabf3d93"
+  integrity sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz#39af2739e989a2bd291bf6b53f16981423d457d4"
+  integrity sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-typescript@^7.12.1":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.15.8.tgz#ff0e6a47de9b2d58652123ab5a879b2ff20665d8"
+  integrity sha512-ZXIkJpbaf6/EsmjeTbiJN/yMxWPFWvlr7sEG1P95Xb4S4IBcrf2n7s/fItIhsAmOf8oSh3VJPDppO6ExfAfKRQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-typescript" "^7.14.5"
+
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
+  integrity sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-unicode-regex@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz#4cd09b6c8425dd81255c7ceb3fb1836e7414382e"
+  integrity sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/preset-env@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
+  integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
+  dependencies:
+    "@babel/compat-data" "^7.12.1"
+    "@babel/helper-compilation-targets" "^7.12.1"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.1"
+    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+    "@babel/plugin-proposal-json-strings" "^7.12.1"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.1"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.12.1"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-async-to-generator" "^7.12.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.1"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-computed-properties" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-dotall-regex" "^7.12.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-function-name" "^7.12.1"
+    "@babel/plugin-transform-literals" "^7.12.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+    "@babel/plugin-transform-modules-amd" "^7.12.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+    "@babel/plugin-transform-modules-umd" "^7.12.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+    "@babel/plugin-transform-new-target" "^7.12.1"
+    "@babel/plugin-transform-object-super" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-property-literals" "^7.12.1"
+    "@babel/plugin-transform-regenerator" "^7.12.1"
+    "@babel/plugin-transform-reserved-words" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/plugin-transform-sticky-regex" "^7.12.1"
+    "@babel/plugin-transform-template-literals" "^7.12.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.12.1"
+    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+    "@babel/plugin-transform-unicode-regex" "^7.12.1"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.12.1"
+    core-js-compat "^3.6.2"
+    semver "^5.5.0"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
+  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
+  integrity sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.12.1"
+    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-self" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-source" "^7.12.1"
+    "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
+
+"@babel/preset-typescript@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
+  integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.12.1"
+
+"@babel/register@7.13.16":
+  version "7.13.16"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.13.16.tgz#ae3ab0b55c8ec28763877383c454f01521d9a53d"
+  integrity sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.0"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
+  integrity sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/parser" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
+"@babel/traverse@^7.12.1", "@babel/traverse@^7.14.2", "@babel/traverse@^7.15.4":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.3.tgz#26ee5f252e725aa7aca3474aa5b324eaf7908b5b"
+  integrity sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.3"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.3"
+    "@babel/types" "^7.23.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.12.1", "@babel/types@^7.14.2", "@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.4.4":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
+  integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.3.tgz#d5ea892c07f2ec371ac704420f4dcdb07b5f9598"
+  integrity sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"
+  integrity sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
+  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@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==
+
+"@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/json-schema@^7.0.5":
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@webassemblyjs/ast@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
+
+"@webassemblyjs/helper-api-error@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
+"@webassemblyjs/helper-buffer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
+"@webassemblyjs/helper-code-frame@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/helper-fsm@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
+
+"@webassemblyjs/helper-module-context@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
+"@webassemblyjs/helper-wasm-section@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+
+"@webassemblyjs/ieee754@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
+
+"@webassemblyjs/wasm-edit@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/helper-wasm-section" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-opt" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/wasm-gen@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wasm-opt@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+
+"@webassemblyjs/wasm-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wast-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-code-frame" "1.9.0"
+    "@webassemblyjs/helper-fsm" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.1.0.tgz#8342bef0badfb7dfd3b576f2574ab80c725be043"
+  integrity sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==
+
+"@webpack-cli/info@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.4.0.tgz#b9179c3227ab09cbbb149aa733475fcf99430223"
+  integrity sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==
+  dependencies:
+    envinfo "^7.7.3"
+
+"@webpack-cli/serve@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.6.0.tgz#2c275aa05c895eccebbfc34cfb223c6e8bd591a2"
+  integrity sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==
+
+"@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==
+
+abbrev@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==
+
+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@^6.4.1:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
+  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
+
+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@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-align@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.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-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+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"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+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.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@^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-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-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=
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+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=
+
+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==
+
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+babel-loader@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-macros@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.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"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-react-app@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz#689b60edc705f8a70ce87f47ab0e560a317d7045"
+  integrity sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==
+  dependencies:
+    "@babel/core" "7.12.3"
+    "@babel/plugin-proposal-class-properties" "7.12.1"
+    "@babel/plugin-proposal-decorators" "7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "7.12.1"
+    "@babel/plugin-transform-flow-strip-types" "7.12.1"
+    "@babel/plugin-transform-react-display-name" "7.12.1"
+    "@babel/plugin-transform-runtime" "7.12.1"
+    "@babel/preset-env" "7.12.1"
+    "@babel/preset-react" "7.12.1"
+    "@babel/preset-typescript" "7.12.1"
+    "@babel/runtime" "7.12.1"
+    babel-plugin-macros "2.8.0"
+    babel-plugin-transform-react-remove-prop-types "0.4.24"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+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.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
+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"
+
+boxen@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
+  integrity sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^6.2.0"
+    chalk "^4.1.0"
+    cli-boxes "^2.2.1"
+    string-width "^4.2.2"
+    type-fest "^0.20.2"
+    widest-line "^3.1.0"
+    wrap-ansi "^7.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"
+
+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"
+    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"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+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, browserify-rsa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.2.tgz#e78d4b69816d6e3dd1c747e64e9947f9ad79bc7e"
+  integrity sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==
+  dependencies:
+    bn.js "^5.2.1"
+    browserify-rsa "^4.1.0"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.4"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.6"
+    readable-stream "^3.6.2"
+    safe-buffer "^5.2.1"
+
+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"
+
+browserslist@^4.16.6, browserslist@^4.17.3:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.4.tgz#72e2508af2a403aec0a49847ef31bd823c57ead4"
+  integrity sha512-Zg7RpbZpIJRW3am9Lyckue7PLytvVxxhJj1CaJVlCWENsGEAOlnlt8X0ZxGRPp7Bt9o8tIRM5SEXy4BCPMJjLQ==
+  dependencies:
+    caniuse-lite "^1.0.30001265"
+    electron-to-chromium "^1.3.867"
+    escalade "^3.1.1"
+    node-releases "^2.0.0"
+    picocolors "^1.0.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+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@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+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=
+
+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.2:
+  version "12.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
+  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
+  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"
+    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"
+
+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"
+
+call-bind@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+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@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
+caniuse-lite@^1.0.30001265:
+  version "1.0.30001269"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001269.tgz#3a71bee03df627364418f9fd31adfc7aa1cc2d56"
+  integrity sha512-UOy8okEVs48MyHYgV+RdW1Oiudl1H6KolybD6ZquD0VcrPSgj25omXO1S7rDydjpqaISCwA8Pyx+jUQKZwWO5w==
+
+chalk@^2.0.0, 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:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  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"
+
+chokidar@^3.2.2, chokidar@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+chrome-trace-event@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
+  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
+
+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"
+
+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-boxes@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+
+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-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+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"
+
+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"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.14:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+
+commander@^2.20.0:
+  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==
+
+commander@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+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==
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.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.5.0:
+  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"
+
+concurrently@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.3.0.tgz#7500de6410d043c912b2da27de3202cb489b1e7b"
+  integrity sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==
+  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 "^6.1.0"
+    tree-kill "^1.2.2"
+    yargs "^13.3.0"
+
+configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
+  dependencies:
+    dot-prop "^5.2.0"
+    graceful-fs "^4.1.2"
+    make-dir "^3.0.0"
+    unique-string "^2.0.0"
+    write-file-atomic "^3.0.0"
+    xdg-basedir "^4.0.0"
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+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=
+
+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==
+
+convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  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"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+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"
+  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.6.2:
+  version "3.18.3"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.3.tgz#e0e7e87abc55efb547e7fa19169e45fa9df27a67"
+  integrity sha512-4zP6/y0a2RTHN5bRGT7PTq9lVt3WzvffTNjqnTKsXhkAYNDTkdCLOIfAdOLcQ/7TDdyRj3c+NeHe1NmF1eDScw==
+  dependencies:
+    browserslist "^4.17.3"
+    semver "7.0.0"
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+create-ecdh@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
+  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.4, create-hmac@^1.1.7:
+  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"
+
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+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-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+cyclist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
+  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+
+date-fns@^2.0.1:
+  version "2.25.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
+  integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
+
+debug@2.6.9, debug@^2.2.0, debug@^2.3.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.2.6:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.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-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==
+
+defer-to-connect@^1.0.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
+  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
+
+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"
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+des.js@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
+  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=
+
+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"
+
+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==
+
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.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=
+
+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"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+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-to-chromium@^1.3.867:
+  version "1.3.873"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.873.tgz#c238c9199e4951952fe815a65c1beab5db4826b8"
+  integrity sha512-TiHlCgl2uP26Z0c67u442c0a2MZCWZNCRnPTQDPhVJ4h9G6z2zU0lApD9H0K9R5yFL5SfdaiVsVD2izOY24xBQ==
+
+elliptic@^6.5.3, elliptic@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+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@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+envinfo@^7.7.3:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
+  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+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"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
+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:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+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"
+
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+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:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.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"
+    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"
+
+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@^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"
+
+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"
+    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"
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
+  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
+file-uri-to-path@1.0.0:
+  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==
+
+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"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+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@^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"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+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"
+
+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=
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+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-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.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+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==
+
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+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-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+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.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+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=
+
+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.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3, glob@^7.1.4:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  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-dirs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
+  integrity sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==
+  dependencies:
+    ini "2.0.0"
+
+globals@^11.1.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==
+
+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, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+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"
+    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"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  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"
+  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-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.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.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+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:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+hmac-drbg@^1.0.1:
+  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"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+http-cache-semantics@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+
+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.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"
+
+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=
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+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-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
+
+import-fresh@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  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@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.3.tgz#4d51c2c495ca9393da259ec66b62e022920211e0"
+  integrity sha512-bE9iaUY3CXH8Cwfan/abDKAxe1KGT9kyGsBPqf6DMK/z0a2OzAsrukeYNgIH6cH5Xr452jb1TUL8rSfCLjZ9uA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.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=
+
+infer-owner@^1.0.3:
+  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.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, 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@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
+ini@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+interpret@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
+  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
+
+ipaddr.js@1.9.1:
+  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-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-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+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-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-core-module@^2.2.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
+  integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
+  dependencies:
+    has "^1.0.3"
+
+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-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"
+    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"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+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@^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-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-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-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-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-installed-globally@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
+  integrity sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==
+  dependencies:
+    global-dirs "^3.0.0"
+    is-path-inside "^3.0.2"
+
+is-npm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
+  integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
+
+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@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-path-inside@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+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-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+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-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@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@^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=
+
+"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==
+
+jsesc@^2.5.1:
+  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=
+
+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-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-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+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==
+
+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.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
+  dependencies:
+    minimist "^1.2.5"
+
+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"
+
+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"
+  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.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+latest-version@^5.1.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"
+
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
+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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+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"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash@^4.17.15, lodash@^4.17.19:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.1.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"
+
+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@^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"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.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-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.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-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"
+
+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=
+
+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"
+
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+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@^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"
+    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"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.50.0, "mime-db@>= 1.43.0 < 2":
+  version "1.50.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.50.0.tgz#abd4ac94e98d3c0e185016c67ab45d5fde40c11f"
+  integrity sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==
+
+mime-types@~2.1.24:
+  version "2.1.33"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.33.tgz#1fa12a904472fafd068e48d9e8401f74d3f70edb"
+  integrity sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==
+  dependencies:
+    mime-db "1.50.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==
+
+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.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@^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@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+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.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.1, mkdirp@^0.5.3:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+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=
+
+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==
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nan@^2.12.1:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
+  integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
+
+nanomatch@^1.2.9:
+  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-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"
+
+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.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+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-releases@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.0.tgz#67dc74903100a7deb044037b8a2e5f453bb05400"
+  integrity sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==
+
+nodemon@^2.0.6:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.14.tgz#287c7a2f6cd8a18b07e94cd776ecb6a82e4ba439"
+  integrity sha512-frcpDx+PviKEQRSYzwhckuO2zoHcBYLHI754RE9z5h1RGtrngerc04mLpQQCPWBkH/2ObrX7We9YiwVSYZpFJQ==
+  dependencies:
+    chokidar "^3.2.2"
+    debug "^3.2.6"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.7"
+    semver "^5.7.1"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.3"
+    update-notifier "^5.1.0"
+
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2:
+  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"
+    resolve "^1.10.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"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0, 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@^4.1.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.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.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+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.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+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"
+
+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"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+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=
+
+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-limit@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.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-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+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==
+
+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"
+
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parallel-transform@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
+  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
+  dependencies:
+    cyclist "^1.0.1"
+    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, parse-asn1@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+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@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+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.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@^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-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+pbkdf2@^3.0.3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  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"
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+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==
+
+pirates@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
+  dependencies:
+    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"
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+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=
+
+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=
+
+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==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+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=
+
+proxy-addr@~2.0.5:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+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=
+
+pstree.remy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
+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@^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.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  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"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+pupa@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+  dependencies:
+    escape-goat "^2.0.0"
+
+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==
+
+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=
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+  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:
+  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"
+
+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-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-error-boundary@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.3.tgz#276bfa05de8ac17b863587c9e0647522c25e2a0b"
+  integrity sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.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.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  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@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  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"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+rechoir@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
+  integrity sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==
+  dependencies:
+    resolve "^1.9.0"
+
+regenerate-unicode-properties@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
+  integrity sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+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"
+
+regexpu-core@^4.7.1:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
+  integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^9.0.0"
+    regjsgen "^0.5.2"
+    regjsparser "^0.7.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
+registry-auth-token@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250"
+  integrity sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==
+  dependencies:
+    rc "^1.2.8"
+
+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.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+
+regjsparser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.7.0.tgz#a6b667b54c885e18b52554cb4960ef71187e9968"
+  integrity sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==
+  dependencies:
+    jsesc "~0.5.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.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+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=
+
+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-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==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+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-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+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.12.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.6"
+
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    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"
+
+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==
+
+rimraf@^2.5.4, 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.1.3"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  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"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+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:
+    aproba "^1.1.1"
+
+rxjs@^6.5.2:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  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.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.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.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+semver-diff@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
+  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+  dependencies:
+    semver "^6.3.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^6.0.0, 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==
+
+semver@^7.3.4:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+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:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+
+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.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+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"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.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"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f"
+  integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==
+
+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"
+    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"
+  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"
+    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"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    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.20"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
+  integrity sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@^0.5.0, source-map@^0.5.6:
+  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.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+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.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz#0d9becccde7003d6c658d487dd48a32f0bf3014b"
+  integrity sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==
+
+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"
+
+ssri@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+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"
+
+"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=
+
+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-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
+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.0.0, string-width@^4.1.0, string-width@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+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@~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"
+
+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@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+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=
+
+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"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  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"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.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==
+
+terser-webpack-plugin@^1.4.3:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^4.0.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.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+timers-browserify@^2.0.4:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+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-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"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.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"
+
+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==
+
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==
+  dependencies:
+    nopt "~1.0.10"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+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=
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+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"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+undefsafe@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
+  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
+  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
+
+union-value@^1.0.0:
+  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 "^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-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+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"
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-notifier@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
+  integrity sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==
+  dependencies:
+    boxen "^5.0.0"
+    chalk "^4.1.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.4.0"
+    is-npm "^5.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.1.0"
+    pupa "^2.1.1"
+    semver "^7.3.4"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  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@^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@^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"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+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@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"
+
+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"
+
+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=
+
+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"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  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"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.7.4:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
+
+webpack-cli@^4.2.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.1.tgz#b64be825e2d1b130f285c314caa3b1ba9a4632b3"
+  integrity sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^1.1.0"
+    "@webpack-cli/info" "^1.4.0"
+    "@webpack-cli/serve" "^1.6.0"
+    colorette "^2.0.14"
+    commander "^7.0.0"
+    execa "^5.0.0"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^2.2.0"
+    rechoir "^0.7.0"
+    webpack-merge "^5.7.3"
+
+webpack-merge@^5.7.3:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
+  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  dependencies:
+    clone-deep "^4.0.1"
+    wildcard "^2.0.0"
+
+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.44.2:
+  version "4.44.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
+  integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.3.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.3"
+    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.3"
+    watchpack "^1.7.4"
+    webpack-sources "^1.4.1"
+
+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@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
+wildcard@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
+  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
+
+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@^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"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.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@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+xdg-basedir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
+  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+
+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==
+
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^13.3.0:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  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.2"
diff --git a/fixtures/stacks/BabelClasses-compiled.js b/fixtures/stacks/BabelClasses-compiled.js
new file mode 100644
index 00000000000..305b7221563
--- /dev/null
+++ b/fixtures/stacks/BabelClasses-compiled.js
@@ -0,0 +1,81 @@
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError(
+      "this hasn't been initialised - super() hasn't been called"
+    );
+  }
+  return self;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true,
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, 'string');
+  return 'symbol' == typeof i ? i : i + '';
+}
+function _toPrimitive(t, r) {
+  if ('object' != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || 'default');
+    if ('object' != typeof i) return i;
+    throw new TypeError('@@toPrimitive must return a primitive value.');
+  }
+  return ('string' === r ? String : Number)(t);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf
+    ? Object.setPrototypeOf.bind()
+    : function _setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+      };
+  return _setPrototypeOf(o, p);
+}
+// Compile this with Babel.
+// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps
+
+export let BabelClass = /*#__PURE__*/ (function (_React$Component) {
+  _inheritsLoose(BabelClass, _React$Component);
+  function BabelClass() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = BabelClass.prototype;
+  _proto.render = function render() {
+    return this.props.children;
+  };
+  return BabelClass;
+})(React.Component);
+export let BabelClassWithFields = /*#__PURE__*/ (function (_React$Component2) {
+  _inheritsLoose(BabelClassWithFields, _React$Component2);
+  function BabelClassWithFields(...args) {
+    var _this;
+    _this = _React$Component2.call(this, ...args) || this;
+    _defineProperty(_assertThisInitialized(_this), 'props', void 0);
+    _defineProperty(_assertThisInitialized(_this), 'state', {});
+    return _this;
+  } // These compile to defineProperty which can break some interception techniques.
+  var _proto2 = BabelClassWithFields.prototype;
+  _proto2.render = function render() {
+    return this.props.children;
+  };
+  return BabelClassWithFields;
+})(React.Component);
+
+//# sourceMappingURL=BabelClasses-compiled.js.map
diff --git a/fixtures/stacks/BabelClasses-compiled.js.map b/fixtures/stacks/BabelClasses-compiled.js.map
new file mode 100644
index 00000000000..7a9752844ee
--- /dev/null
+++ b/fixtures/stacks/BabelClasses-compiled.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"BabelClasses-compiled.js","names":["BabelClass","_React$Component","_inheritsLoose","apply","arguments","_proto","prototype","render","props","children","React","Component","BabelClassWithFields","_React$Component2","args","_this","call","_defineProperty","_assertThisInitialized","_proto2"],"sources":["BabelClasses.js"],"sourcesContent":["// Compile this with Babel.\n// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps\n\nexport class BabelClass extends React.Component {\n  render() {\n    return this.props.children;\n  }\n}\n\nexport class BabelClassWithFields extends React.Component {\n  // These compile to defineProperty which can break some interception techniques.\n  props;\n  state = {};\n  render() {\n    return this.props.children;\n  }\n}\n"],"mappings":";;;;;;AAAA;AACA;;AAEA,WAAaA,UAAU,0BAAAC,gBAAA;EAAAC,cAAA,CAAAF,UAAA,EAAAC,gBAAA;EAAA,SAAAD,WAAA;IAAA,OAAAC,gBAAA,CAAAE,KAAA,OAAAC,SAAA;EAAA;EAAA,IAAAC,MAAA,GAAAL,UAAA,CAAAM,SAAA;EAAAD,MAAA,CACrBE,MAAM,GAAN,SAAAA,OAAA,EAAS;IACP,OAAO,IAAI,CAACC,KAAK,CAACC,QAAQ;EAC5B,CAAC;EAAA,OAAAT,UAAA;AAAA,EAH6BU,KAAK,CAACC,SAAS;AAM/C,WAAaC,oBAAoB,0BAAAC,iBAAA;EAAAX,cAAA,CAAAU,oBAAA,EAAAC,iBAAA;EAAA,SAAAD,qBAAA,GAAAE,IAAA;IAAA,IAAAC,KAAA;IAAAA,KAAA,GAAAF,iBAAA,CAAAG,IAAA,UAAAF,IAAA;IAAAG,eAAA,CAAAC,sBAAA,CAAAH,KAAA;IAAAE,eAAA,CAAAC,sBAAA,CAAAH,KAAA,YAGvB,CAAC,CAAC;IAAA,OAAAA,KAAA;EAAA,EAFV;EAAA,IAAAI,OAAA,GAAAP,oBAAA,CAAAN,SAAA;EAAAa,OAAA,CAGAZ,MAAM,GAAN,SAAAA,OAAA,EAAS;IACP,OAAO,IAAI,CAACC,KAAK,CAACC,QAAQ;EAC5B,CAAC;EAAA,OAAAG,oBAAA;AAAA,EANuCF,KAAK,CAACC,SAAS","ignoreList":[]}
\ No newline at end of file
diff --git a/fixtures/stacks/BabelClasses.js b/fixtures/stacks/BabelClasses.js
new file mode 100644
index 00000000000..f76b72fa45b
--- /dev/null
+++ b/fixtures/stacks/BabelClasses.js
@@ -0,0 +1,17 @@
+// Compile this with Babel.
+// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps
+
+export class BabelClass extends React.Component {
+  render() {
+    return this.props.children;
+  }
+}
+
+export class BabelClassWithFields extends React.Component {
+  // These compile to defineProperty which can break some interception techniques.
+  props;
+  state = {};
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/fixtures/stacks/Components.js b/fixtures/stacks/Components.js
new file mode 100644
index 00000000000..25bf5566f45
--- /dev/null
+++ b/fixtures/stacks/Components.js
@@ -0,0 +1,30 @@
+// Example
+
+export const Throw = React.lazy(() => {
+  throw new Error('Example');
+});
+
+export const Component = React.memo(function Component({children}) {
+  return children;
+});
+
+export function DisplayName({children}) {
+  return children;
+}
+DisplayName.displayName = 'Custom Name';
+
+export class NativeClass extends React.Component {
+  render() {
+    return this.props.children;
+  }
+}
+
+export class FrozenClass extends React.Component {
+  constructor() {
+    super();
+  }
+  render() {
+    return this.props.children;
+  }
+}
+Object.freeze(FrozenClass.prototype);
diff --git a/fixtures/stacks/Example.js b/fixtures/stacks/Example.js
new file mode 100644
index 00000000000..37bc1a657ce
--- /dev/null
+++ b/fixtures/stacks/Example.js
@@ -0,0 +1,70 @@
+import {BabelClass, BabelClassWithFields} from './BabelClasses-compiled.js';
+import {
+  Throw,
+  Component,
+  DisplayName,
+  NativeClass,
+  FrozenClass,
+} from './Components.js';
+
+const x = React.createElement;
+
+class ErrorBoundary extends React.Component {
+  static getDerivedStateFromError(error) {
+    return {
+      error: error,
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.log(error.message, errorInfo.componentStack);
+    this.setState({
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  render() {
+    if (this.state && this.state.error) {
+      return x(
+        'div',
+        null,
+        x('h3', null, this.state.error.message),
+        x('pre', null, this.state.componentStack)
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default function Example() {
+  let state = React.useState(false);
+  return x(
+    ErrorBoundary,
+    null,
+    x(
+      DisplayName,
+      null,
+      x(
+        NativeClass,
+        null,
+        x(
+          FrozenClass,
+          null,
+          x(
+            BabelClass,
+            null,
+            x(
+              BabelClassWithFields,
+              null,
+              x(
+                React.Suspense,
+                null,
+                x('div', null, x(Component, null, x(Throw)))
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
diff --git a/fixtures/stacks/babel.config.json b/fixtures/stacks/babel.config.json
new file mode 100644
index 00000000000..97daef5d20a
--- /dev/null
+++ b/fixtures/stacks/babel.config.json
@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties", {"loose": false}],
+    ["@babel/plugin-transform-classes", {"loose": true}]
+  ]
+}
diff --git a/fixtures/stacks/index.html b/fixtures/stacks/index.html
new file mode 100644
index 00000000000..881e9eb637c
--- /dev/null
+++ b/fixtures/stacks/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Component Stacks</title>
+    <style>
+      html, body {
+        margin: 20px;
+      }
+      pre {
+        background: #eee;
+        border: 1px solid #ccc;
+        padding: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <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 type="module">
+      import React from 'https://esm.sh/react@canary/?dev';
+      import ReactDOMClient from 'https://esm.sh/react-dom@canary/client?dev';
+
+      window.React = React;
+      window.ReactDOMClient = ReactDOMClient;
+
+      import("./Example.js").then(({ default: Example }) => {
+        console.log("Example", Example)
+        const container = document.getElementById("container");
+        const root = ReactDOMClient.createRoot(container);
+        root.render(React.createElement(Example));
+      });
+    </script>
+    <h3>The above stack should look something like this:</h3>
+    <pre>
+    at Lazy
+    at Component (/stacks/Component.js:7:1)
+    at div
+    at Suspense
+    at BabelClassWithFields (/stacks/BabelClasses-compiled.js:31:31)
+    at BabelClass (/stacks/BabelClass-compiled.js:13:29)
+    at FrozenClass (/stacks/Components.js:22:1)
+    at NativeClass (/stacks/Component.js:16:1)
+    at Custom Name (/stacks/Component.js:11:1)
+    at ErrorBoundary (/stacks/Example.js:5:1)
+    at Example (/stacks/Example.js:32:1)</pre>
+  </body>
+</html>
diff --git a/fixtures/stacks/package.json b/fixtures/stacks/package.json
new file mode 100644
index 00000000000..6876b0038cf
--- /dev/null
+++ b/fixtures/stacks/package.json
@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "build": "babel --config-file ./babel.config.json BabelClasses.js -o BabelClasses-compiled.js --source-maps",
+    "dev": "http-server ."
+  },
+  "dependencies": {
+    "http-server": "^14.1.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4"
+  }
+}
diff --git a/fixtures/stacks/yarn.lock b/fixtures/stacks/yarn.lock
new file mode 100644
index 00000000000..a1d8ebc81cc
--- /dev/null
+++ b/fixtures/stacks/yarn.lock
@@ -0,0 +1,918 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@babel/cli@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.24.1.tgz#2e11e071e32fe82850b4fe514f56b9c9e1c44911"
+  integrity sha512-HbmrtxyFUr34LwAlV9jS+sSIjUp4FpdtIMGwgufY3AsxrIfsh/HxlMTywsONAZsU0RMYbZtbZFpUCrSGs7o0EA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.25"
+    commander "^4.0.1"
+    convert-source-map "^2.0.0"
+    fs-readdir-recursive "^1.1.0"
+    glob "^7.2.0"
+    make-dir "^2.1.0"
+    slash "^2.0.0"
+  optionalDependencies:
+    "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
+    chokidar "^3.4.0"
+
+"@babel/code-frame@^7.23.5", "@babel/code-frame@^7.24.1", "@babel/code-frame@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
+  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
+  dependencies:
+    "@babel/highlight" "^7.24.2"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.23.5":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
+  integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
+
+"@babel/core@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.4.tgz#1f758428e88e0d8c563874741bc4ffc4f71a4717"
+  integrity sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.2"
+    "@babel/generator" "^7.24.4"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helpers" "^7.24.4"
+    "@babel/parser" "^7.24.4"
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.1"
+    "@babel/types" "^7.24.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@^7.24.1", "@babel/generator@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.4.tgz#1fc55532b88adf952025d5d2d1e71f946cb1c498"
+  integrity sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==
+  dependencies:
+    "@babel/types" "^7.24.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
+"@babel/helper-compilation-targets@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
+  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
+  dependencies:
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    browserslist "^4.22.2"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-module-imports@^7.22.15":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
+  integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
+  dependencies:
+    "@babel/types" "^7.24.0"
+
+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-string-parser@^7.23.4":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
+  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
+
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
+"@babel/helper-validator-option@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
+  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
+
+"@babel/helpers@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.4.tgz#dc00907fd0d95da74563c142ef4cd21f2cb856b6"
+  integrity sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==
+  dependencies:
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.1"
+    "@babel/types" "^7.24.0"
+
+"@babel/highlight@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
+  integrity sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
+  integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
+
+"@babel/template@^7.22.15", "@babel/template@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
+  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.24.0"
+    "@babel/types" "^7.24.0"
+
+"@babel/traverse@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
+  integrity sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.1"
+    "@babel/generator" "^7.24.1"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.24.1"
+    "@babel/types" "^7.24.0"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
+  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
+  version "2.1.8-no-fsevents.3"
+  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
+  integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
+
+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@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+async@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
+  dependencies:
+    lodash "^4.17.14"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+basic-auth@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
+  integrity sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==
+  dependencies:
+    safe-buffer "5.1.2"
+
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+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"
+
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.22.2:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+  dependencies:
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+caniuse-lite@^1.0.30001587:
+  version "1.0.30001610"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz#2f44ed6e21d359e914271ae35b68903632628ccf"
+  integrity sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==
+
+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:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+commander@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+corser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
+  integrity sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0, debug@^4.3.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+electron-to-chromium@^1.4.668:
+  version "1.4.736"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.736.tgz#ecb4348f4d5c70fb1e31c347e5bad6b751066416"
+  integrity sha512-Rer6wc3ynLelKNM4lOCg7/zPQj8tPOCB2hzD32PX9wd3hgRRi9MxEbmkFCokzcEhRVMiOVLjnL9ig9cefJ+6+Q==
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+escalade@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
+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 sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+follow-redirects@^1.0.0:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+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.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.2.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^11.1.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==
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+html-encoding-sniffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
+  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
+  dependencies:
+    whatwg-encoding "^2.0.0"
+
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http-server@^14.1.1:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/http-server/-/http-server-14.1.1.tgz#d60fbb37d7c2fdff0f0fbff0d0ee6670bd285e2e"
+  integrity sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==
+  dependencies:
+    basic-auth "^2.0.1"
+    chalk "^4.1.2"
+    corser "^2.0.1"
+    he "^1.2.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy "^1.18.1"
+    mime "^1.6.0"
+    minimist "^1.2.6"
+    opener "^1.5.1"
+    portfinder "^1.0.28"
+    secure-compare "3.0.1"
+    union "~0.5.0"
+    url-join "^4.0.1"
+
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.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 sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+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==
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+lodash@^4.17.14:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+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"
+
+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"
+
+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==
+
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+mkdirp@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+
+normalize-path@^3.0.0, 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==
+
+object-inspect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+opener@^1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
+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"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+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==
+
+portfinder@^1.0.28:
+  version "1.0.32"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
+  integrity sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==
+  dependencies:
+    async "^2.6.4"
+    debug "^3.2.7"
+    mkdirp "^0.5.6"
+
+qs@^6.4.0:
+  version "6.12.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.1.tgz#39422111ca7cbdb70425541cba20c7d7b216599a"
+  integrity sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==
+  dependencies:
+    side-channel "^1.0.6"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+secure-compare@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3"
+  integrity sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==
+
+semver@^5.6.0:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+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"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+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 sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+union@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/union/-/union-0.5.0.tgz#b2c11be84f60538537b846edb9ba266ba0090075"
+  integrity sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==
+  dependencies:
+    qs "^6.4.0"
+
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+url-join@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
+  integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
+
+whatwg-encoding@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
+  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
+  dependencies:
+    iconv-lite "0.6.3"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
diff --git a/fixtures/view-transition/README.md b/fixtures/view-transition/README.md
new file mode 100644
index 00000000000..7f5642ee9c4
--- /dev/null
+++ b/fixtures/view-transition/README.md
@@ -0,0 +1,30 @@
+# View Transition
+
+A test case for View Transitions.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/view-transition
+yarn
+yarn start
+```
+
+The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
+
+**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:**
+
+```
+yarn
+```
+
+If you want to try the production mode instead run:
+
+```
+yarn start:prod
+```
+
+This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).
diff --git a/fixtures/view-transition/loader/package.json b/fixtures/view-transition/loader/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/fixtures/view-transition/loader/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/fixtures/view-transition/loader/server.js b/fixtures/view-transition/loader/server.js
new file mode 100644
index 00000000000..f56ac9fd039
--- /dev/null
+++ b/fixtures/view-transition/loader/server.js
@@ -0,0 +1,54 @@
+import babel from '@babel/core';
+
+const babelOptions = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+};
+
+export async function load(url, context, defaultLoad) {
+  if (url.endsWith('.css')) {
+    return {source: 'export default {}', format: 'module', shortCircuit: true};
+  }
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions);
+    const newResult = await babel.transformAsync(result.source, opt);
+    if (!newResult) {
+      if (typeof result.source === 'string') {
+        return result;
+      }
+      return {
+        source: Buffer.from(result.source).toString('utf8'),
+        format: 'module',
+      };
+    }
+    return {source: newResult.code, format: 'module'};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+async function babelTransformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module') {
+    const opt = Object.assign({filename: context.url}, babelOptions);
+    const newResult = await babel.transformAsync(source, opt);
+    if (!newResult) {
+      if (typeof source === 'string') {
+        return {source};
+      }
+      return {
+        source: Buffer.from(source).toString('utf8'),
+      };
+    }
+    return {source: newResult.code};
+  }
+  return defaultTransformSource(source, context, defaultTransformSource);
+}
+
+export const transformSource =
+  process.version < 'v16' ? babelTransformSource : undefined;
diff --git a/fixtures/view-transition/package.json b/fixtures/view-transition/package.json
new file mode 100644
index 00000000000..44a8ff0bfa5
--- /dev/null
+++ b/fixtures/view-transition/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "react-fixtures-view-transition",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "concurrently": "3.1.0",
+    "http-proxy-middleware": "3.0.3",
+    "react-scripts": "5.0.1",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
+  },
+  "dependencies": {
+    "@babel/register": "^7.25.9",
+    "express": "^4.14.0",
+    "ignore-styles": "^5.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "animation-timelines": "^0.0.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "scripts": {
+    "predev": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:client": "BROWSER=none PORT=3001 react-scripts start",
+    "dev:server": "NODE_ENV=development node --experimental-loader ./loader/server.js server",
+    "start": "react-scripts build && NODE_ENV=production node --experimental-loader ./loader/server.js server",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "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/view-transition/public/favicon.ico b/fixtures/view-transition/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/fixtures/view-transition/public/favicon.ico differ
diff --git a/fixtures/view-transition/public/index.html b/fixtures/view-transition/public/index.html
new file mode 100644
index 00000000000..a94d9ac64a9
--- /dev/null
+++ b/fixtures/view-transition/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <body>
+    <script>
+      /*
+      This is just a placeholder to make react-scripts happy.
+      We're not using it. If we end up here, redirect to the
+      primary server.
+      */
+      location.href = '//localhost:3000/';
+    </script>
+  </body>
+</html>
diff --git a/fixtures/view-transition/server/index.js b/fixtures/view-transition/server/index.js
new file mode 100644
index 00000000000..e13d4706b9e
--- /dev/null
+++ b/fixtures/view-transition/server/index.js
@@ -0,0 +1,73 @@
+require('ignore-styles');
+const babelRegister = require('@babel/register');
+const proxy = require('http-proxy-middleware');
+
+babelRegister({
+  ignore: [/\/(build|node_modules)\//],
+  presets: ['react-app'],
+});
+
+const express = require('express');
+const path = require('path');
+
+const app = express();
+
+// Application
+if (process.env.NODE_ENV === 'development') {
+  app.get('/', function (req, res) {
+    // In development mode we clear the module cache between each request to
+    // get automatic hot reloading.
+    for (var key in require.cache) {
+      delete require.cache[key];
+    }
+    import('./render.js').then(({default: render}) => {
+      render(req.url, res);
+    });
+  });
+} else {
+  import('./render.js').then(({default: render}) => {
+    app.get('/', function (req, res) {
+      render(req.url, res);
+    });
+  });
+}
+
+// Static resources
+app.use(express.static(path.resolve(__dirname, '..', 'build')));
+
+// Proxy everything else to create-react-app's webpack development server
+if (process.env.NODE_ENV === 'development') {
+  app.use(
+    '/',
+    proxy.createProxyMiddleware({
+      ws: true,
+      changeOrigin: true,
+      target: 'http://127.0.0.1:3001',
+    })
+  );
+}
+
+app.listen(3000, () => {
+  console.log('Listening on port 3000...');
+});
+
+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/view-transition/server/render.js b/fixtures/view-transition/server/render.js
new file mode 100644
index 00000000000..08224a57c4d
--- /dev/null
+++ b/fixtures/view-transition/server/render.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import {renderToPipeableStream} from 'react-dom/server';
+
+import App from '../src/components/App.js';
+
+let assets;
+if (process.env.NODE_ENV === 'development') {
+  // Use the bundle from create-react-app's server in development mode.
+  assets = {
+    'main.js': '/static/js/bundle.js',
+    // 'main.css': '',
+  };
+} else {
+  assets = require('../build/asset-manifest.json').files;
+}
+
+export default function render(url, res) {
+  res.socket.on('error', error => {
+    // Log fatal errors
+    console.error('Fatal', error);
+  });
+  let didError = false;
+  const {pipe, abort} = renderToPipeableStream(
+    <App assets={assets} initialURL={url} />,
+    {
+      bootstrapScripts: [assets['main.js']],
+      onShellReady() {
+        // If something errored before we started streaming, we set the error code appropriately.
+        res.statusCode = didError ? 500 : 200;
+        res.setHeader('Content-type', 'text/html');
+        pipe(res);
+      },
+      onShellError(x) {
+        // Something errored before we could complete the shell so we emit an alternative shell.
+        res.statusCode = 500;
+        res.send('<!doctype><p>Error</p>');
+      },
+      onError(x) {
+        didError = true;
+        console.error(x);
+      },
+    }
+  );
+  // Abandon and switch to client rendering after 5 seconds.
+  // Try lowering this to see the client recover.
+  setTimeout(abort, 5000);
+}
diff --git a/fixtures/view-transition/src/components/App.js b/fixtures/view-transition/src/components/App.js
new file mode 100644
index 00000000000..80e0c45c911
--- /dev/null
+++ b/fixtures/view-transition/src/components/App.js
@@ -0,0 +1,92 @@
+import React, {
+  startTransition,
+  useLayoutEffect,
+  useEffect,
+  useState,
+  addTransitionType,
+} from 'react';
+
+import Chrome from './Chrome.js';
+import Page from './Page.js';
+
+const enableNavigationAPI = typeof navigation === 'object';
+
+export default function App({assets, initialURL}) {
+  const [routerState, setRouterState] = useState({
+    pendingNav: () => {},
+    url: initialURL,
+  });
+  function navigate(url) {
+    if (enableNavigationAPI) {
+      window.navigation.navigate(url);
+    } else {
+      startTransition(() => {
+        setRouterState({
+          url,
+          pendingNav() {
+            window.history.pushState({}, '', url);
+          },
+        });
+      });
+    }
+  }
+  useEffect(() => {
+    if (enableNavigationAPI) {
+      window.navigation.addEventListener('navigate', event => {
+        if (!event.canIntercept) {
+          return;
+        }
+        const navigationType = event.navigationType;
+        const previousIndex = window.navigation.currentEntry.index;
+        const newURL = new URL(event.destination.url);
+        event.intercept({
+          handler() {
+            let promise;
+            startTransition(() => {
+              addTransitionType('navigation-' + navigationType);
+              if (navigationType === 'traverse') {
+                // For traverse types it's useful to distinguish going back or forward.
+                const nextIndex = event.destination.index;
+                if (nextIndex > previousIndex) {
+                  addTransitionType('navigation-forward');
+                } else if (nextIndex < previousIndex) {
+                  addTransitionType('navigation-back');
+                }
+              }
+              promise = new Promise(resolve => {
+                setRouterState({
+                  url: newURL.pathname + newURL.search,
+                  pendingNav: resolve,
+                });
+              });
+            });
+            return promise;
+          },
+          commit: 'after-transition', // plz ship this, browsers
+        });
+      });
+    } else {
+      window.addEventListener('popstate', () => {
+        // This should not animate because restoration has to be synchronous.
+        // Even though it's a transition.
+        startTransition(() => {
+          setRouterState({
+            url: document.location.pathname + document.location.search,
+            pendingNav() {
+              // Noop. URL has already updated.
+            },
+          });
+        });
+      });
+    }
+  }, []);
+  const pendingNav = routerState.pendingNav;
+  useLayoutEffect(() => {
+    pendingNav();
+  }, [pendingNav]);
+  return (
+    <Chrome title="Hello World" assets={assets}>
+      <Page url={routerState.url} navigate={navigate} />
+    </Chrome>
+  );
+}
diff --git a/fixtures/view-transition/src/components/Chrome.css b/fixtures/view-transition/src/components/Chrome.css
new file mode 100644
index 00000000000..969f1e2d327
--- /dev/null
+++ b/fixtures/view-transition/src/components/Chrome.css
@@ -0,0 +1,16 @@
+html {
+  touch-action: pan-x pan-y;
+}
+
+body {
+  margin: 10px;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+::view-transition-group(*),
+::view-transition-image-pair(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+  pointer-events: none;
+}
diff --git a/fixtures/view-transition/src/components/Chrome.js b/fixtures/view-transition/src/components/Chrome.js
new file mode 100644
index 00000000000..be3f6d1653d
--- /dev/null
+++ b/fixtures/view-transition/src/components/Chrome.js
@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+
+import './Chrome.css';
+
+export default class Chrome extends Component {
+  render() {
+    const assets = this.props.assets;
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="shortcut icon" href="favicon.ico" />
+          <link rel="stylesheet" href={assets['main.css']} />
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossOrigin=""
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
+            rel="stylesheet"
+          />
+          <title>{this.props.title}</title>
+        </head>
+        <body>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<b>Enable JavaScript to run this app.</b>`,
+            }}
+          />
+          {this.props.children}
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `assetManifest = ${JSON.stringify(assets)};`,
+            }}
+          />
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/fixtures/view-transition/src/components/NestedReveal.js b/fixtures/view-transition/src/components/NestedReveal.js
new file mode 100644
index 00000000000..497f4430f6c
--- /dev/null
+++ b/fixtures/view-transition/src/components/NestedReveal.js
@@ -0,0 +1,36 @@
+import React, {Suspense, use} from 'react';
+
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function Use({useable}) {
+  use(useable);
+  return null;
+}
+
+let delay1;
+let delay2;
+
+export default function NestedReveal({}) {
+  if (!delay1) {
+    delay1 = sleep(100);
+    // Needs to happen before the throttled reveal of delay 1
+    delay2 = sleep(200);
+  }
+
+  return (
+    <div className="swipe-recognizer">
+      Shell
+      <Suspense fallback="Loading level 1">
+        <div>Level 1</div>
+        <Use useable={delay1} />
+
+        <Suspense fallback="Loading level 2">
+          <div>Level 2</div>
+          <Use useable={delay2} />
+        </Suspense>
+      </Suspense>
+    </div>
+  );
+}
diff --git a/fixtures/view-transition/src/components/Page.css b/fixtures/view-transition/src/components/Page.css
new file mode 100644
index 00000000000..63ae718e740
--- /dev/null
+++ b/fixtures/view-transition/src/components/Page.css
@@ -0,0 +1,21 @@
+.swipe-recognizer {
+  width: 300px;
+  background: #eee;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.button {
+  background: #000;
+  color: #fff;
+  border: 0px;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.portal {
+  position: fixed;
+  top: 10px;
+  left: 360px;
+  border: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js
new file mode 100644
index 00000000000..60faa09732d
--- /dev/null
+++ b/fixtures/view-transition/src/components/Page.js
@@ -0,0 +1,327 @@
+import React, {
+  addTransitionType,
+  ViewTransition,
+  Activity,
+  useLayoutEffect,
+  useEffect,
+  useInsertionEffect,
+  useState,
+  useId,
+  useOptimistic,
+  startTransition,
+  Suspense,
+} from 'react';
+
+import {createPortal} from 'react-dom';
+
+import SwipeRecognizer from './SwipeRecognizer.js';
+
+import './Page.css';
+
+import transitions from './Transitions.module.css';
+import NestedReveal from './NestedReveal.js';
+
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+const a = (
+  <div key="a">
+    <ViewTransition>
+      <div>a</div>
+    </ViewTransition>
+  </div>
+);
+
+const b = (
+  <div key="b">
+    <ViewTransition>
+      <div>b</div>
+    </ViewTransition>
+  </div>
+);
+
+function Component() {
+  // Test inserting fonts with style tags using useInsertionEffect. This is not recommended but
+  // used to test that gestures etc works with useInsertionEffect so that stylesheet based
+  // libraries can be properly supported.
+  useInsertionEffect(() => {
+    const style = document.createElement('style');
+    style.textContent = `
+      .roboto-font {
+        font-family: "Roboto", serif;
+        font-optical-sizing: auto;
+        font-weight: 100;
+        font-style: normal;
+        font-variation-settings:
+          "wdth" 100;
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+  return (
+    <ViewTransition
+      default={
+        transitions['enter-slide-right'] + ' ' + transitions['exit-slide-left']
+      }>
+      <p className="roboto-font">Slide In from Left, Slide Out to Right</p>
+      <p>
+        <img
+          src="https://react.dev/_next/image?url=%2Fimages%2Fteam%2Fsebmarkbage.jpg&w=3840&q=75"
+          width="400"
+          height="248"
+        />
+      </p>
+    </ViewTransition>
+  );
+}
+
+function Id() {
+  // This is just testing that Id inside a ViewTransition can hydrate correctly.
+  return <span id={useId()} />;
+}
+
+let wait;
+function Suspend() {
+  if (!wait) wait = sleep(500);
+  return React.use(wait);
+}
+
+export default function Page({url, navigate}) {
+  const [renderedUrl, optimisticNavigate] = useOptimistic(
+    url,
+    (state, direction) => {
+      return direction === 'left' ? '/?a' : '/?b';
+    }
+  );
+  const show = renderedUrl === '/?b';
+  function onTransition(viewTransition, types) {
+    const keyframes = [
+      {rotate: '0deg', transformOrigin: '30px 8px'},
+      {rotate: '360deg', transformOrigin: '30px 8px'},
+    ];
+    const animation1 = viewTransition.old.animate(keyframes, 250);
+    const animation2 = viewTransition.new.animate(keyframes, 250);
+    return () => {
+      animation1.cancel();
+      animation2.cancel();
+    };
+  }
+
+  function onGestureTransition(
+    timeline,
+    {rangeStart, rangeEnd},
+    viewTransition,
+    types
+  ) {
+    const keyframes = [
+      {rotate: '0deg', transformOrigin: '30px 8px'},
+      {rotate: '360deg', transformOrigin: '30px 8px'},
+    ];
+    const reverse = rangeStart > rangeEnd;
+    if (timeline instanceof AnimationTimeline) {
+      // Native Timeline
+      const options = {
+        timeline: timeline,
+        direction: reverse ? 'normal' : 'reverse',
+        rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
+        rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
+      };
+      const animation1 = viewTransition.old.animate(keyframes, options);
+      const animation2 = viewTransition.new.animate(keyframes, options);
+      return () => {
+        animation1.cancel();
+        animation2.cancel();
+      };
+    } else {
+      // Custom Timeline
+      const options = {
+        direction: reverse ? 'normal' : 'reverse',
+        // We set the delay and duration to represent the span of the range.
+        delay: reverse ? rangeEnd : rangeStart,
+        duration: reverse ? rangeStart - rangeEnd : rangeEnd - rangeStart,
+      };
+      const animation1 = viewTransition.old.animate(keyframes, options);
+      const animation2 = viewTransition.new.animate(keyframes, options);
+      // Let the custom timeline take control of driving the animations.
+      const cleanup1 = timeline.animate(animation1);
+      const cleanup2 = timeline.animate(animation2);
+      return () => {
+        animation1.cancel();
+        animation2.cancel();
+        cleanup1();
+        cleanup2();
+      };
+    }
+  }
+
+  function swipeAction() {
+    navigate(show ? '/?a' : '/?b');
+  }
+
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setCounter(c => c + 1), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useLayoutEffect(() => {
+    // Calling a default update should not interrupt ViewTransitions but
+    // a flushSync will.
+    // Promise.resolve().then(() => {
+    //   flushSync(() => {
+    // setCounter(c => c + 10);
+    //  });
+    // });
+  }, [show]);
+
+  const [showModal, setShowModal] = useState(false);
+  const portal = showModal ? (
+    createPortal(
+      <div className="portal">
+        Portal: {!show ? 'A' : 'B'}
+        <ViewTransition>
+          <div>{!show ? 'A' : 'B'}</div>
+        </ViewTransition>
+      </div>,
+      document.body
+    )
+  ) : (
+    <button
+      onClick={() =>
+        startTransition(async () => {
+          await sleep(2000);
+          setShowModal(true);
+        })
+      }>
+      Show Modal
+    </button>
+  );
+
+  const exclamation = (
+    <ViewTransition
+      name="exclamation"
+      onShare={onTransition}
+      onGestureShare={onGestureTransition}>
+      <span>
+        <div>!</div>
+      </span>
+    </ViewTransition>
+  );
+  return (
+    <div className="swipe-recognizer">
+      <SwipeRecognizer
+        action={swipeAction}
+        gesture={direction => {
+          addTransitionType(
+            direction === 'left' ? 'navigation-forward' : 'navigation-back'
+          );
+          optimisticNavigate(direction);
+        }}
+        direction={show ? 'left' : 'right'}>
+        <button
+          className="button"
+          onClick={() => {
+            navigate(url === '/?b' ? '/?a' : '/?b');
+          }}>
+          {url === '/?b' ? 'Goto A' : 'Goto B'}
+        </button>
+        <ViewTransition default="none">
+          <div>
+            <ViewTransition>
+              <div>
+                <ViewTransition default={transitions['slide-on-nav']}>
+                  <h1>{!show ? 'A' : 'B' + counter}</h1>
+                </ViewTransition>
+              </div>
+            </ViewTransition>
+            <ViewTransition
+              default={{
+                'navigation-back': transitions['slide-right'],
+                'navigation-forward': transitions['slide-left'],
+              }}>
+              <h1>{!show ? 'A' + counter : 'B'}</h1>
+            </ViewTransition>
+            {
+              // Using url instead of renderedUrl here lets us only update this on commit.
+              url === '/?b' ? (
+                <div>
+                  {a}
+                  {b}
+                </div>
+              ) : (
+                <div>
+                  {b}
+                  {a}
+                </div>
+              )
+            }
+            <ViewTransition>
+              {show ? (
+                <div>hello{exclamation}</div>
+              ) : (
+                <section>Loading</section>
+              )}
+            </ViewTransition>
+            <p>
+              <Id />
+            </p>
+            {show ? null : (
+              <ViewTransition>
+                <div>world{exclamation}</div>
+              </ViewTransition>
+            )}
+            <Activity mode={show ? 'visible' : 'hidden'}>
+              <ViewTransition>
+                <div>!!</div>
+              </ViewTransition>
+            </Activity>
+            <Suspense
+              fallback={
+                <ViewTransition>
+                  <div>
+                    <ViewTransition name="shared-reveal">
+                      <h2>█████</h2>
+                    </ViewTransition>
+                    <p>████</p>
+                    <p>███████</p>
+                    <p>████</p>
+                    <p>██</p>
+                    <p>██████</p>
+                    <p>███</p>
+                    <p>████</p>
+                  </div>
+                </ViewTransition>
+              }>
+              <ViewTransition>
+                <div>
+                  <p>these</p>
+                  <p>rows</p>
+                  <ViewTransition name="shared-reveal">
+                    <h2>exist</h2>
+                  </ViewTransition>
+                  <p>to</p>
+                  <p>test</p>
+                  <p>scrolling</p>
+                  <p>content</p>
+                  <p>out</p>
+                  <p>of</p>
+                  {portal}
+                  <p>the</p>
+                  <p>viewport</p>
+                  <Suspend />
+                </div>
+              </ViewTransition>
+              {show ? <Component /> : null}
+            </Suspense>
+          </div>
+        </ViewTransition>
+      </SwipeRecognizer>
+      <NestedReveal />
+    </div>
+  );
+}
diff --git a/fixtures/view-transition/src/components/SwipeRecognizer.js b/fixtures/view-transition/src/components/SwipeRecognizer.js
new file mode 100644
index 00000000000..6d628110237
--- /dev/null
+++ b/fixtures/view-transition/src/components/SwipeRecognizer.js
@@ -0,0 +1,256 @@
+import React, {
+  useRef,
+  useEffect,
+  startTransition,
+  unstable_startGestureTransition as startGestureTransition,
+} from 'react';
+
+import ScrollTimelinePolyfill from 'animation-timelines/scroll-timeline';
+import TouchPanTimeline from 'animation-timelines/touch-pan-timeline';
+
+const ua = typeof navigator === 'undefined' ? '' : navigator.userAgent;
+const isSafariMobile =
+  ua.indexOf('Safari') !== -1 &&
+  (ua.indexOf('iPhone') !== -1 ||
+    ua.indexOf('iPad') !== -1 ||
+    ua.indexOf('iPod') !== -1);
+
+// Example of a Component that can recognize swipe gestures using a ScrollTimeline
+// without scrolling its own content. Allowing it to be used as an inert gesture
+// recognizer to drive a View Transition.
+export default function SwipeRecognizer({
+  action,
+  children,
+  direction,
+  gesture,
+}) {
+  if (direction == null) {
+    direction = 'left';
+  }
+  const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';
+
+  const scrollRef = useRef(null);
+  const activeGesture = useRef(null);
+  const touchTimeline = useRef(null);
+
+  function onTouchStart(event) {
+    if (!isSafariMobile && typeof ScrollTimeline === 'function') {
+      // If not Safari and native ScrollTimeline is supported, then we use that.
+      return;
+    }
+    if (touchTimeline.current) {
+      // We can catch the gesture before it settles.
+      return;
+    }
+    const scrollElement = scrollRef.current;
+    const bounds =
+      axis === 'x' ? scrollElement.clientWidth : scrollElement.clientHeight;
+    const range =
+      direction === 'left' || direction === 'up' ? [bounds, 0] : [0, -bounds];
+    const timeline = new TouchPanTimeline({
+      touch: event,
+      source: scrollElement,
+      axis: axis,
+      range: range,
+      snap: range,
+    });
+    touchTimeline.current = timeline;
+    timeline.settled.then(() => {
+      if (touchTimeline.current !== timeline) {
+        return;
+      }
+      touchTimeline.current = null;
+      const changed =
+        direction === 'left' || direction === 'up'
+          ? timeline.currentTime < 50
+          : timeline.currentTime > 50;
+      onGestureEnd(changed);
+    });
+  }
+
+  function onTouchEnd() {
+    if (activeGesture.current === null) {
+      // If we didn't start a gesture before we release, we can release our
+      // timeline.
+      touchTimeline.current = null;
+    }
+  }
+
+  function onScroll() {
+    if (activeGesture.current !== null) {
+      return;
+    }
+
+    let scrollTimeline;
+    if (touchTimeline.current) {
+      // We're in a polyfilled touch gesture. Let's use that timeline instead.
+      scrollTimeline = touchTimeline.current;
+    } else if (typeof ScrollTimeline === 'function') {
+      // eslint-disable-next-line no-undef
+      scrollTimeline = new ScrollTimeline({
+        source: scrollRef.current,
+        axis: axis,
+      });
+    } else {
+      scrollTimeline = new ScrollTimelinePolyfill({
+        source: scrollRef.current,
+        axis: axis,
+      });
+    }
+    activeGesture.current = startGestureTransition(
+      scrollTimeline,
+      () => {
+        gesture(direction);
+      },
+      direction === 'left' || direction === 'up'
+        ? {
+            rangeStart: 100,
+            rangeEnd: 0,
+          }
+        : {
+            rangeStart: 0,
+            rangeEnd: 100,
+          }
+    );
+  }
+  function onGestureEnd(changed) {
+    // We cancel the gesture before invoking side-effects to allow the gesture lane to fully commit
+    // before scheduling new updates.
+    if (activeGesture.current !== null) {
+      const cancelGesture = activeGesture.current;
+      activeGesture.current = null;
+      cancelGesture();
+    }
+    if (changed) {
+      // Trigger side-effects
+      startTransition(action);
+    }
+  }
+  function onScrollEnd() {
+    if (touchTimeline.current) {
+      // We have a touch gesture controlling the swipe.
+      return;
+    }
+    let changed;
+    const scrollElement = scrollRef.current;
+    if (axis === 'x') {
+      const halfway =
+        (scrollElement.scrollWidth - scrollElement.clientWidth) / 2;
+      changed =
+        direction === 'left'
+          ? scrollElement.scrollLeft < halfway
+          : scrollElement.scrollLeft > halfway;
+    } else {
+      const halfway =
+        (scrollElement.scrollHeight - scrollElement.clientHeight) / 2;
+      changed =
+        direction === 'up'
+          ? scrollElement.scrollTop < halfway
+          : scrollElement.scrollTop > halfway;
+    }
+    onGestureEnd(changed);
+  }
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    switch (direction) {
+      case 'left':
+        scrollElement.scrollLeft =
+          scrollElement.scrollWidth - scrollElement.clientWidth;
+        break;
+      case 'right':
+        scrollElement.scrollLeft = 0;
+        break;
+      case 'up':
+        scrollElement.scrollTop =
+          scrollElement.scrollHeight - scrollElement.clientHeight;
+        break;
+      case 'down':
+        scrollElement.scrollTop = 0;
+        break;
+      default:
+        break;
+    }
+  }, [direction]);
+
+  const scrollStyle = {
+    position: 'relative',
+    padding: '0px',
+    margin: '0px',
+    border: '0px',
+    width: axis === 'x' ? '100%' : null,
+    height: axis === 'y' ? '100%' : null,
+    overflow: 'scroll hidden',
+    // Disable overscroll on Safari which moves the sticky content.
+    // Unfortunately, this also means that we disable chaining. We should only disable
+    // it if the parent is not scrollable in this axis.
+    overscrollBehaviorX: axis === 'x' ? 'none' : 'auto',
+    overscrollBehaviorY: axis === 'y' ? 'none' : 'auto',
+    scrollSnapType: axis + ' mandatory',
+    scrollbarWidth: 'none',
+  };
+
+  const overScrollStyle = {
+    position: 'relative',
+    padding: '0px',
+    margin: '0px',
+    border: '0px',
+    width: axis === 'x' ? '200%' : null,
+    height: axis === 'y' ? '200%' : null,
+  };
+
+  const snapStartStyle = {
+    position: 'absolute',
+    padding: '0px',
+    margin: '0px',
+    border: '0px',
+    width: axis === 'x' ? '50%' : '100%',
+    height: axis === 'y' ? '50%' : '100%',
+    left: '0px',
+    top: '0px',
+    scrollSnapAlign: 'center',
+  };
+
+  const snapEndStyle = {
+    position: 'absolute',
+    padding: '0px',
+    margin: '0px',
+    border: '0px',
+    width: axis === 'x' ? '50%' : '100%',
+    height: axis === 'y' ? '50%' : '100%',
+    right: '0px',
+    bottom: '0px',
+    scrollSnapAlign: 'center',
+  };
+
+  // By placing the content in a sticky box we ensure that it doesn't move when
+  // we scroll. Unless done so by the View Transition.
+  const stickyStyle = {
+    position: 'sticky',
+    padding: '0px',
+    margin: '0px',
+    border: '0px',
+    left: '0px',
+    top: '0px',
+    width: axis === 'x' ? '50%' : null,
+    height: axis === 'y' ? '50%' : null,
+    overflow: 'hidden',
+  };
+
+  return (
+    <div
+      style={scrollStyle}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+      onScroll={onScroll}
+      onScrollEnd={onScrollEnd}
+      ref={scrollRef}>
+      <div style={overScrollStyle}>
+        <div style={snapStartStyle} />
+        <div style={snapEndStyle} />
+        <div style={stickyStyle}>{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/fixtures/view-transition/src/components/Transitions.module.css b/fixtures/view-transition/src/components/Transitions.module.css
new file mode 100644
index 00000000000..0cfe870cfb6
--- /dev/null
+++ b/fixtures/view-transition/src/components/Transitions.module.css
@@ -0,0 +1,81 @@
+@keyframes enter-slide-right {
+  0% {
+    opacity: 0;
+    translate: -200px 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes enter-slide-left {
+  0% {
+    opacity: 0;
+    translate: 200px 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes exit-slide-right {
+  0% {
+    opacity: 1;
+    translate: 0 0;
+  }
+  100% {
+    opacity: 0;
+    translate: 200px 0;
+  }
+}
+
+@keyframes exit-slide-left {
+  0% {
+    opacity: 1;
+    translate: 0 0;
+  }
+  100% {
+    opacity: 0;
+    translate: -200px 0;
+  }
+}
+
+::view-transition-new(.slide-right) {
+  animation: enter-slide-right ease-in 0.25s;
+}
+::view-transition-old(.slide-right) {
+  animation: exit-slide-right ease-in 0.25s;
+}
+::view-transition-new(.slide-left) {
+  animation: enter-slide-left ease-in 0.25s;
+}
+::view-transition-old(.slide-left) {
+  animation: exit-slide-left ease-in 0.25s;
+}
+
+::view-transition-new(.enter-slide-right):only-child {
+  animation: enter-slide-right ease-in 0.25s forwards;
+}
+::view-transition-old(.exit-slide-left):only-child {
+  animation: exit-slide-left ease-in 0.25s forwards;
+}
+
+:root:active-view-transition-type(navigation-back) {
+  &::view-transition-new(.slide-on-nav) {
+    animation: enter-slide-right ease-in 0.25s;
+  }
+  &::view-transition-old(.slide-on-nav) {
+    animation: exit-slide-right ease-in 0.25s;
+  }
+}
+
+:root:active-view-transition-type(navigation-forward) {
+  &::view-transition-new(.slide-on-nav) {
+    animation: enter-slide-left ease-in 0.25s;
+  }
+  &::view-transition-old(.slide-on-nav) {
+    animation: exit-slide-left ease-in 0.25s;
+  }
+}
diff --git a/fixtures/view-transition/src/index.js b/fixtures/view-transition/src/index.js
new file mode 100644
index 00000000000..29b53bf0379
--- /dev/null
+++ b/fixtures/view-transition/src/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {hydrateRoot} from 'react-dom/client';
+
+import App from './components/App.js';
+
+hydrateRoot(
+  document,
+  <App
+    assets={window.assetManifest}
+    initialURL={document.location.pathname + document.location.search}
+  />
+);
diff --git a/fixtures/view-transition/yarn.lock b/fixtures/view-transition/yarn.lock
new file mode 100644
index 00000000000..3efb208f1ec
--- /dev/null
+++ b/fixtures/view-transition/yarn.lock
@@ -0,0 +1,9846 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@apideck/better-ajv-errors@^0.3.1":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
+  integrity sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==
+  dependencies:
+    json-schema "^0.4.0"
+    jsonpointer "^5.0.0"
+    leven "^3.1.0"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2", "@babel/code-frame@^7.8.3":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.9", "@babel/compat-data@^7.26.0":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.3.tgz#99488264a56b2aded63983abd6a417f03b92ed02"
+  integrity sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==
+
+"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
+  integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.26.0"
+    "@babel/generator" "^7.26.0"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.0"
+    "@babel/parser" "^7.26.0"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.26.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/eslint-parser@^7.16.3":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.25.9.tgz#603c68a63078796527bc9d0833f5e52dd5f9224c"
+  integrity sha512-5UXfgpK0j0Xr/xIdgdLEhOFxaDZ0bRPWJJchRpqOSur/3rZoPbqqki5mm0p4NE2cs28krBEiSM2MB7//afRSQQ==
+  dependencies:
+    "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1"
+    eslint-visitor-keys "^2.1.0"
+    semver "^6.3.1"
+
+"@babel/generator@^7.26.0", "@babel/generator@^7.26.3", "@babel/generator@^7.7.2":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.3.tgz#ab8d4360544a425c90c248df7059881f4b2ce019"
+  integrity sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==
+  dependencies:
+    "@babel/parser" "^7.26.3"
+    "@babel/types" "^7.26.3"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875"
+  integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==
+  dependencies:
+    "@babel/compat-data" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0", "@babel/helper-create-class-features-plugin@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
+  integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+  integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    regexpu-core "^6.2.0"
+    semver "^6.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.6.2", "@babel/helper-define-polyfill-provider@^0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21"
+  integrity sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46"
+  integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==
+
+"@babel/helper-remap-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
+  integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-wrap-function" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-replace-supers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5"
+  integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0", "@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helper-wrap-function@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
+  integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helpers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
+  integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+  dependencies:
+    "@babel/types" "^7.26.3"
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
+  integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
+  integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
+  integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
+  integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
+  integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-proposal-class-properties@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-decorators@^7.16.4":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.25.9.tgz#8680707f943d1a3da2cd66b948179920f097e254"
+  integrity sha512-smkNLL/O1ezy9Nhy4CNosc4Va+1wo5w4gzSZeLe6y6dM4mmHfYOCPolXQPHQxonZCF+ZyebxN9vqOolkYrSn5g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-decorators" "^7.25.9"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-optional-chaining@^7.16.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-proposal-private-property-in-object@7.21.11":
+  version "7.21.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
+  integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-decorators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.25.9.tgz#986b4ca8b7b5df3f67cee889cedeffc2e2bf14b3"
+  integrity sha512-ryzI0McXUPJnRCvMo4lumIKZUzhYUO/ScI+Mz4YVaTLt04DHNSjEUjKVvbzQjZFLuod/cYEc07mJWhzl6v4DPg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-flow@^7.25.9":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz#96507595c21b45fccfc2bc758d5c45452e6164fa"
+  integrity sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-assertions@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
+  integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-attributes@^7.24.7", "@babel/plugin-syntax-import-attributes@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
+  integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-meta@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.25.9", "@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
+  integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-async-generator-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz#1b18530b077d18a407c494eb3d1d72da505283a2"
+  integrity sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
+  integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+
+"@babel/plugin-transform-block-scoped-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz#5700691dbd7abb93de300ca7be94203764fce458"
+  integrity sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-block-scoping@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
+  integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
+  integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-static-block@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
+  integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-classes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
+  integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
+  integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/template" "^7.25.9"
+
+"@babel/plugin-transform-destructuring@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
+  integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dotall-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
+  integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-keys@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
+  integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
+  integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dynamic-import@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
+  integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-exponentiation-operator@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+  integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-export-namespace-from@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
+  integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-flow-strip-types@^7.16.0":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.25.9.tgz#85879b42a8f5948fd6317069978e98f23ef8aec1"
+  integrity sha512-/VVukELzPDdci7UUsWQaSkhgnjIWXnIyRpM02ldxaVoFK96c41So8JcKT3m0gYjyv7j5FNPGS5vfELrWalkbDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-flow" "^7.25.9"
+
+"@babel/plugin-transform-for-of@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
+  integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-function-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
+  integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-json-strings@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
+  integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
+  integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-logical-assignment-operators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
+  integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-member-expression-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
+  integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-amd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
+  integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-commonjs@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-systemjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
+  integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-modules-umd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
+  integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
+  integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-new-target@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
+  integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-nullish-coalescing-operator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz#bcb1b0d9e948168102d5f7104375ca21c3266949"
+  integrity sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-numeric-separator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
+  integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-object-rest-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
+  integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+
+"@babel/plugin-transform-object-super@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
+  integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+
+"@babel/plugin-transform-optional-catch-binding@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
+  integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
+  integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-parameters@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
+  integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-methods@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
+  integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-property-in-object@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
+  integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-property-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
+  integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-constant-elements@^7.12.1":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.9.tgz#08a1de35a301929b60fdf2788a54b46cd8ecd0ef"
+  integrity sha512-Ncw2JFsJVuvfRsa2lSHiC55kETQVLSnsYGQ1JDDwkUeWGTL/8Tom8aLTnlqgoeuopWrbbGndrc9AlLYrIosrow==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz#4b79746b59efa1f38c8695065a92a9f5afb24f7d"
+  integrity sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx-development@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz#8fd220a77dd139c07e25225a903b8be8c829e0d7"
+  integrity sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+
+"@babel/plugin-transform-react-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz#06367940d8325b36edff5e2b9cbe782947ca4166"
+  integrity sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/plugin-transform-react-pure-annotations@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz#ea1c11b2f9dbb8e2d97025f43a3b5bc47e18ae62"
+  integrity sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-regenerator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
+  integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-regexp-modifiers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
+  integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-reserved-words@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
+  integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-runtime@^7.16.4":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz#62723ea3f5b31ffbe676da9d6dae17138ae580ea"
+  integrity sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    semver "^6.3.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
+  integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
+  integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-sticky-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
+  integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-template-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1"
+  integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-typeof-symbol@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz#224ba48a92869ddbf81f9b4a5f1204bbf5a2bc4b"
+  integrity sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-typescript@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.3.tgz#3d6add9c78735623317387ee26d5ada540eee3fd"
+  integrity sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-syntax-typescript" "^7.25.9"
+
+"@babel/plugin-transform-unicode-escapes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
+  integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-property-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
+  integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
+  integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
+  integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.16.4":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.0.tgz#30e5c6bc1bcc54865bff0c5a30f6d4ccdc7fa8b1"
+  integrity sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==
+  dependencies:
+    "@babel/compat-data" "^7.26.0"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.9"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.9"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.9"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions" "^7.26.0"
+    "@babel/plugin-syntax-import-attributes" "^7.26.0"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.25.9"
+    "@babel/plugin-transform-async-to-generator" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.25.9"
+    "@babel/plugin-transform-block-scoping" "^7.25.9"
+    "@babel/plugin-transform-class-properties" "^7.25.9"
+    "@babel/plugin-transform-class-static-block" "^7.26.0"
+    "@babel/plugin-transform-classes" "^7.25.9"
+    "@babel/plugin-transform-computed-properties" "^7.25.9"
+    "@babel/plugin-transform-destructuring" "^7.25.9"
+    "@babel/plugin-transform-dotall-regex" "^7.25.9"
+    "@babel/plugin-transform-duplicate-keys" "^7.25.9"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-dynamic-import" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.25.9"
+    "@babel/plugin-transform-export-namespace-from" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.25.9"
+    "@babel/plugin-transform-function-name" "^7.25.9"
+    "@babel/plugin-transform-json-strings" "^7.25.9"
+    "@babel/plugin-transform-literals" "^7.25.9"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.25.9"
+    "@babel/plugin-transform-modules-amd" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.9"
+    "@babel/plugin-transform-modules-umd" "^7.25.9"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-new-target" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.25.9"
+    "@babel/plugin-transform-numeric-separator" "^7.25.9"
+    "@babel/plugin-transform-object-rest-spread" "^7.25.9"
+    "@babel/plugin-transform-object-super" "^7.25.9"
+    "@babel/plugin-transform-optional-catch-binding" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+    "@babel/plugin-transform-private-methods" "^7.25.9"
+    "@babel/plugin-transform-private-property-in-object" "^7.25.9"
+    "@babel/plugin-transform-property-literals" "^7.25.9"
+    "@babel/plugin-transform-regenerator" "^7.25.9"
+    "@babel/plugin-transform-regexp-modifiers" "^7.26.0"
+    "@babel/plugin-transform-reserved-words" "^7.25.9"
+    "@babel/plugin-transform-shorthand-properties" "^7.25.9"
+    "@babel/plugin-transform-spread" "^7.25.9"
+    "@babel/plugin-transform-sticky-regex" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.25.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.25.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.25.9"
+    "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.38.1"
+    semver "^6.3.1"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.12.5", "@babel/preset-react@^7.16.0":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.26.3.tgz#7c5e028d623b4683c1f83a0bd4713b9100560caa"
+  integrity sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-transform-react-display-name" "^7.25.9"
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+    "@babel/plugin-transform-react-jsx-development" "^7.25.9"
+    "@babel/plugin-transform-react-pure-annotations" "^7.25.9"
+
+"@babel/preset-typescript@^7.16.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
+  integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-typescript" "^7.25.9"
+
+"@babel/register@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.25.9.tgz#1c465acf7dc983d70ccc318eb5b887ecb04f021b"
+  integrity sha512-8D43jXtGsYmEeDvm4MWHYUpWf8iiXgWYx3fW7E7Wb7Oe6FWqJPl5K6TuFW0dOwNZzEE5rjlaSJYH9JjrUKJszA==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.6"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.25.9", "@babel/template@^7.3.3":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.7.2":
+  version "7.26.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.4.tgz#ac3a2a84b908dde6d463c3bfa2c5fdc1653574bd"
+  integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.3"
+    "@babel/parser" "^7.26.3"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.3"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@csstools/normalize.css@*":
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.1.1.tgz#f0ad221b7280f3fc814689786fd9ee092776ef8f"
+  integrity sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ==
+
+"@csstools/postcss-cascade-layers@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz#8a997edf97d34071dd2e37ea6022447dd9e795ad"
+  integrity sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-color-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
+  integrity sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-font-format-keywords@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz#677b34e9e88ae997a67283311657973150e8b16a"
+  integrity sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-hwb-function@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b"
+  integrity sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-ic-unit@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz#28237d812a124d1a16a5acc5c3832b040b303e58"
+  integrity sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-is-pseudo-class@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz#846ae6c0d5a1eaa878fce352c544f9c295509cd1"
+  integrity sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-nested-calc@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz#d7e9d1d0d3d15cf5ac891b16028af2a1044d0c26"
+  integrity sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-normalize-display-values@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz#15da54a36e867b3ac5163ee12c1d7f82d4d612c3"
+  integrity sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-oklab-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz#88cee0fbc8d6df27079ebd2fa016ee261eecf844"
+  integrity sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-progressive-custom-properties@^1.1.0", "@csstools/postcss-progressive-custom-properties@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz#542292558384361776b45c85226b9a3a34f276fa"
+  integrity sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-stepped-value-functions@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz#f8772c3681cc2befed695e2b0b1d68e22f08c4f4"
+  integrity sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-text-decoration-shorthand@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz#ea96cfbc87d921eca914d3ad29340d9bcc4c953f"
+  integrity sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-trigonometric-functions@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz#94d3e4774c36d35dcdc88ce091336cb770d32756"
+  integrity sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-unset-value@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz#c99bb70e2cdc7312948d1eb41df2412330b81f77"
+  integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
+
+"@csstools/selector-specificity@^2.0.0", "@csstools/selector-specificity@^2.0.2":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
+  integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
+
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
+
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.5.1.tgz#260fe7239602fe5130a94f1aa386eff54b014bba"
+  integrity sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+
+"@jest/console@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.3.tgz#2030606ec03a18c31803b8a36382762e447655df"
+  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+
+"@jest/core@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
+  integrity sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/reporters" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^27.5.1"
+    jest-config "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-resolve-dependencies "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    jest-watcher "^27.5.1"
+    micromatch "^4.0.4"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74"
+  integrity sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==
+  dependencies:
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+
+"@jest/fake-timers@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.5.1.tgz#76979745ce0579c8a94a4678af7a748eda8ada74"
+  integrity sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@sinonjs/fake-timers" "^8.0.1"
+    "@types/node" "*"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
+"@jest/globals@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.5.1.tgz#7ac06ce57ab966566c7963431cef458434601b2b"
+  integrity sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    expect "^27.5.1"
+
+"@jest/reporters@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.5.1.tgz#ceda7be96170b03c923c37987b64015812ffec04"
+  integrity sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-haste-map "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/source-map@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
+  integrity sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+    source-map "^0.6.0"
+
+"@jest/test-result@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.5.1.tgz#56a6585fa80f7cdab72b8c5fc2e871d03832f5bb"
+  integrity sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-result@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.3.tgz#5eae945fd9f4b8fcfce74d239e6f725b6bf076c5"
+  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
+  integrity sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-runtime "^27.5.1"
+
+"@jest/transform@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409"
+  integrity sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^27.5.1"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-util "^27.5.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
+  integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@leichtgewicht/ip-codec@^2.0.1":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
+  integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
+
+"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
+  version "5.1.1-v1"
+  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
+  integrity sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==
+  dependencies:
+    eslint-scope "5.1.1"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz#f126be97c30b83ed777e2aeabd518bc592e6e7c4"
+  integrity sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ==
+  dependencies:
+    ansi-html "^0.0.9"
+    core-js-pure "^3.23.3"
+    error-stack-parser "^2.0.6"
+    html-entities "^2.1.0"
+    loader-utils "^2.0.4"
+    schema-utils "^4.2.0"
+    source-map "^0.7.3"
+
+"@rollup/plugin-babel@^5.2.0":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
+  integrity sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@rollup/pluginutils" "^3.1.0"
+
+"@rollup/plugin-node-resolve@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
+  integrity sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
+"@rollup/plugin-replace@^2.4.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
+  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
+"@rollup/pluginutils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@rushstack/eslint-patch@^1.1.0":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
+  integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
+
+"@sinclair/typebox@^0.24.1":
+  version "0.24.51"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
+  integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
+
+"@sinonjs/commons@^1.7.0":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.6.tgz#80c516a4dc264c2a69115e7578d62581ff455ed9"
+  integrity sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^8.0.1":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7"
+  integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@surma/rollup-plugin-off-main-thread@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
+  integrity sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==
+  dependencies:
+    ejs "^3.1.6"
+    json5 "^2.2.0"
+    magic-string "^0.25.0"
+    string.prototype.matchall "^4.0.6"
+
+"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
+  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
+  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
+  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
+  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+
+"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
+  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+
+"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
+  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+
+"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+
+"@svgr/babel-plugin-transform-svg-component@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
+  integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
+
+"@svgr/babel-preset@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
+  integrity sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
+
+"@svgr/core@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
+  integrity sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
+  dependencies:
+    "@svgr/plugin-jsx" "^5.5.0"
+    camelcase "^6.2.0"
+    cosmiconfig "^7.0.0"
+
+"@svgr/hast-util-to-babel-ast@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
+  integrity sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==
+  dependencies:
+    "@babel/types" "^7.12.6"
+
+"@svgr/plugin-jsx@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
+  integrity sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@svgr/babel-preset" "^5.5.0"
+    "@svgr/hast-util-to-babel-ast" "^5.5.0"
+    svg-parser "^2.0.2"
+
+"@svgr/plugin-svgo@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
+  integrity sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    deepmerge "^4.2.2"
+    svgo "^1.2.2"
+
+"@svgr/webpack@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.5.0.tgz#aae858ee579f5fa8ce6c3166ef56c6a1b381b640"
+  integrity sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/plugin-transform-react-constant-elements" "^7.12.1"
+    "@babel/preset-env" "^7.12.1"
+    "@babel/preset-react" "^7.12.5"
+    "@svgr/core" "^5.5.0"
+    "@svgr/plugin-jsx" "^5.5.0"
+    "@svgr/plugin-svgo" "^5.5.0"
+    loader-utils "^2.0.0"
+
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.8"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
+  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
+  integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
+  integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
+"@types/body-parser@*":
+  version "1.19.5"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.5.tgz#04ce9a3b677dc8bd681a17da1ab9835dc9d3ede4"
+  integrity sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/bonjour@^3.5.9":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.13.tgz#adf90ce1a105e81dd1f9c61fdc5afda1bfb92956"
+  integrity sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/connect-history-api-fallback@^1.3.5":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz#7de71645a103056b48ac3ce07b3520b819c1d5b3"
+  integrity sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/node" "*"
+
+"@types/connect@*":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.38.tgz#5ba7f3bc4fbbdeaff8dded952e5ff2cc53f8d858"
+  integrity sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==
+  dependencies:
+    "@types/node" "*"
+
+"@types/eslint-scope@^3.7.7":
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
+  integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
+
+"@types/eslint@*":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/eslint@^7.29.0 || ^8.4.1":
+  version "8.56.12"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.12.tgz#1657c814ffeba4d2f84c0d4ba0f44ca7ea1ca53a"
+  integrity sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/estree@*", "@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^5.0.0":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.3.tgz#04174d3f0836863467b7fbcbbbcd69441d205715"
+  integrity sha512-JEhMNwUJt7bw728CydvYzntD0XJeTmDnvwLlbfbAhE7Tbslm/ax6bdIiUwTgeVlZTsJQPwZwKpAkyDtIjsvx3g==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
+
+"@types/express-serve-static-core@^4.17.33":
+  version "4.19.6"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267"
+  integrity sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
+
+"@types/express@*":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-5.0.0.tgz#13a7d1f75295e90d19ed6e74cab3678488eaa96c"
+  integrity sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^5.0.0"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/express@^4.17.13":
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.21.tgz#c26d4a151e60efe0084b23dc3369ebc631ed192d"
+  integrity sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^4.17.33"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/graceful-fs@^4.1.2":
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz#2a06bc0f68a20ab37b3e36aa238be6abdf49e8b4"
+  integrity sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/html-minifier-terser@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
+  integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
+
+"@types/http-errors@*":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
+  integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
+
+"@types/http-proxy@^1.17.15", "@types/http-proxy@^1.17.8":
+  version "1.17.15"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.15.tgz#12118141ce9775a6499ecb4c01d02f90fc839d36"
+  integrity sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
+  integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz#53047614ae72e19fc0401d872de3ae2b4ce350bf"
+  integrity sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz#0f03e3d2f670fbdac586e34b433783070cc16f54"
+  integrity sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/mime@^1":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.5.tgz#1ef302e01cf7d2b5a0fa526790c9123bf1d06690"
+  integrity sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==
+
+"@types/node-forge@^1.3.0":
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/@types/node-forge/-/node-forge-1.3.11.tgz#0972ea538ddb0f4d9c2fa0ec5db5724773a604da"
+  integrity sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/node@*":
+  version "22.10.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.5.tgz#95af89a3fb74a2bb41ef9927f206e6472026e48b"
+  integrity sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==
+  dependencies:
+    undici-types "~6.20.0"
+
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
+"@types/prettier@^2.1.5":
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
+  integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
+
+"@types/q@^1.5.1":
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.8.tgz#95f6c6a08f2ad868ba230ead1d2d7f7be3db3837"
+  integrity sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==
+
+"@types/qs@*":
+  version "6.9.17"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.17.tgz#fc560f60946d0aeff2f914eb41679659d3310e1a"
+  integrity sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==
+
+"@types/range-parser@*":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
+  integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
+
+"@types/resolve@1.17.1":
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/retry@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+
+"@types/semver@^7.3.12":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
+"@types/send@*":
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.4.tgz#6619cd24e7270793702e4e6a4b958a9010cfc57a"
+  integrity sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==
+  dependencies:
+    "@types/mime" "^1"
+    "@types/node" "*"
+
+"@types/serve-index@^1.9.1":
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.4.tgz#e6ae13d5053cb06ed36392110b4f9a49ac4ec898"
+  integrity sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==
+  dependencies:
+    "@types/express" "*"
+
+"@types/serve-static@*", "@types/serve-static@^1.13.10":
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
+  integrity sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==
+  dependencies:
+    "@types/http-errors" "*"
+    "@types/node" "*"
+    "@types/send" "*"
+
+"@types/sockjs@^0.3.33":
+  version "0.3.36"
+  resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.36.tgz#ce322cf07bcc119d4cbf7f88954f3a3bd0f67535"
+  integrity sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==
+  dependencies:
+    "@types/node" "*"
+
+"@types/stack-utils@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
+  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+
+"@types/trusted-types@^2.0.2":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
+"@types/ws@^8.5.5":
+  version "8.5.13"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.13.tgz#6414c280875e2691d0d1e080b05addbf5cb91e20"
+  integrity sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==
+  dependencies:
+    "@types/node" "*"
+
+"@types/yargs-parser@*":
+  version "21.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
+  integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
+
+"@types/yargs@^16.0.0":
+  version "16.0.9"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.9.tgz#ba506215e45f7707e6cbcaf386981155b7ab956e"
+  integrity sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^17.0.8":
+  version "17.0.33"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.33.tgz#8c32303da83eec050a84b3c7ae7b9f922d13e32d"
+  integrity sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@typescript-eslint/eslint-plugin@^5.5.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
+  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
+  dependencies:
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/type-utils" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/experimental-utils@^5.0.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz#14559bf73383a308026b427a4a6129bae2146741"
+  integrity sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==
+  dependencies:
+    "@typescript-eslint/utils" "5.62.0"
+
+"@typescript-eslint/parser@^5.5.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
+  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
+"@typescript-eslint/type-utils@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
+  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.62.0", "@typescript-eslint/utils@^5.58.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.1.tgz#28fa185f67daaf7b7a1a8c1d445132c5d979f8bd"
+  integrity sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==
+
+"@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
+  integrity sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.13.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+
+"@webassemblyjs/floating-point-hex-parser@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz#fcca1eeddb1cc4e7b6eed4fc7956d6813b21b9fb"
+  integrity sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==
+
+"@webassemblyjs/helper-api-error@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz#e0a16152248bc38daee76dd7e21f15c5ef3ab1e7"
+  integrity sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==
+
+"@webassemblyjs/helper-buffer@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz#822a9bc603166531f7d5df84e67b5bf99b72b96b"
+  integrity sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==
+
+"@webassemblyjs/helper-numbers@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz#dbd932548e7119f4b8a7877fd5a8d20e63490b2d"
+  integrity sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.13.2"
+    "@webassemblyjs/helper-api-error" "1.13.2"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz#e556108758f448aae84c850e593ce18a0eb31e0b"
+  integrity sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==
+
+"@webassemblyjs/helper-wasm-section@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz#9629dda9c4430eab54b591053d6dc6f3ba050348"
+  integrity sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+
+"@webassemblyjs/ieee754@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz#1c5eaace1d606ada2c7fd7045ea9356c59ee0dba"
+  integrity sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.13.2.tgz#57c5c3deb0105d02ce25fa3fd74f4ebc9fd0bbb0"
+  integrity sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.13.2.tgz#917a20e93f71ad5602966c2d685ae0c6c21f60f1"
+  integrity sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==
+
+"@webassemblyjs/wasm-edit@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz#ac6689f502219b59198ddec42dcd496b1004d597"
+  integrity sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/helper-wasm-section" "1.14.1"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+    "@webassemblyjs/wasm-opt" "1.14.1"
+    "@webassemblyjs/wasm-parser" "1.14.1"
+    "@webassemblyjs/wast-printer" "1.14.1"
+
+"@webassemblyjs/wasm-gen@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz#991e7f0c090cb0bb62bbac882076e3d219da9570"
+  integrity sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/ieee754" "1.13.2"
+    "@webassemblyjs/leb128" "1.13.2"
+    "@webassemblyjs/utf8" "1.13.2"
+
+"@webassemblyjs/wasm-opt@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz#e6f71ed7ccae46781c206017d3c14c50efa8106b"
+  integrity sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+    "@webassemblyjs/wasm-parser" "1.14.1"
+
+"@webassemblyjs/wasm-parser@1.14.1", "@webassemblyjs/wasm-parser@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz#b3e13f1893605ca78b52c68e54cf6a865f90b9fb"
+  integrity sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-api-error" "1.13.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/ieee754" "1.13.2"
+    "@webassemblyjs/leb128" "1.13.2"
+    "@webassemblyjs/utf8" "1.13.2"
+
+"@webassemblyjs/wast-printer@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz#3bb3e9638a8ae5fdaf9610e7a06b4d9f9aa6fe07"
+  integrity sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@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"
+  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==
+
+abab@^2.0.3, abab@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+accepts@~1.3.4, accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.14.0, acorn@^8.2.4, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
+address@^1.0.1, address@^1.1.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
+  integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
+
+adjust-sourcemap-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz#fc4a0fd080f7d10471f30a7320f25560ade28c99"
+  integrity sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==
+  dependencies:
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+ajv-formats@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
+  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
+  dependencies:
+    ajv "^8.0.0"
+
+ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv-keywords@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
+ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
+animation-timelines@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/animation-timelines/-/animation-timelines-0.0.4.tgz#7ac4614bae73c4d1ea2ff18d5d87a518793258af"
+  integrity sha512-HwCE3m1nM8ZdLbwDwD1j5ZNKmY+3J2CliXJNIsf3y1Si927SIaWpfxkycTg5nWLJSHgjsYxrmOy2Jbo4JR1e9A==
+
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-html-community@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
+ansi-html@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.9.tgz#6512d02342ae2cc68131952644a129cb734cd3f0"
+  integrity sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==
+
+ansi-regex@^0.2.0, ansi-regex@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
+  integrity sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
+ansi-styles@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
+  integrity sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA==
+
+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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@^3.0.3, anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
+array-includes@^3.1.6, array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
+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.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flatmap@^1.3.2, array.prototype.flatmap@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.reduce@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.7.tgz#6aadc2f995af29cb887eb866d981dc85ab6f7dc7"
+  integrity sha512-mzmiUCVwtiD4lgxYP8g7IYy8El8p2CSMePvIbTS7gchKir/L1fgJrk0yDKmAX6mnRQFKNADYIk8nNlTris5H1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-array-method-boxes-properly "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    is-string "^1.0.7"
+
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
+asap@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
+async@^3.2.3:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
+  integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+autoprefixer@^10.4.13:
+  version "10.4.20"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
+  dependencies:
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.1"
+    postcss-value-parser "^4.2.0"
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axe-core@^4.10.0:
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
+
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
+
+babel-jest@^27.4.2, babel-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444"
+  integrity sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==
+  dependencies:
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-loader@^8.2.3:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.4.1.tgz#6ccb75c66e62c3b144e1c5f2eaec5b8f6c08c675"
+  integrity sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.4"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e"
+  integrity sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
+babel-plugin-named-asset-import@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz#6b7fa43c59229685368683c28bc9734f24524cc2"
+  integrity sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==
+
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9"
+  integrity sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==
+  dependencies:
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    semver "^6.3.1"
+
+babel-plugin-polyfill-corejs3@^0.10.6:
+  version "0.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7"
+  integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.2"
+    core-js-compat "^3.38.0"
+
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz#abeb1f3f1c762eace37587f42548b08b57789bc8"
+  integrity sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+
+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"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz#9a929eafece419612ef4ae4f60b1862ebad8ef30"
+  integrity sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-import-attributes" "^7.24.7"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+
+babel-preset-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81"
+  integrity sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==
+  dependencies:
+    babel-plugin-jest-hoist "^27.5.1"
+    babel-preset-current-node-syntax "^1.0.0"
+
+babel-preset-react-app@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz#ed6005a20a24f2c88521809fa9aea99903751584"
+  integrity sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@babel/plugin-proposal-class-properties" "^7.16.0"
+    "@babel/plugin-proposal-decorators" "^7.16.4"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.0"
+    "@babel/plugin-proposal-numeric-separator" "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.0"
+    "@babel/plugin-proposal-private-methods" "^7.16.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.16.0"
+    "@babel/plugin-transform-react-display-name" "^7.16.0"
+    "@babel/plugin-transform-runtime" "^7.16.4"
+    "@babel/preset-env" "^7.16.4"
+    "@babel/preset-react" "^7.16.0"
+    "@babel/preset-typescript" "^7.16.0"
+    "@babel/runtime" "^7.16.3"
+    babel-plugin-macros "^3.1.0"
+    babel-plugin-transform-react-remove-prop-types "^0.4.24"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
+
+bfj@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.1.0.tgz#c5177d522103f9040e1b12980fe8c38cf41d3f8b"
+  integrity sha512-I6MMLkn+anzNdCUp9hMRyui1HaNEUCco50lxbvNS4+EyXg8lN3nJ48PjPWtbH8UVS9CuMoaKE9U2V3l29DaRQw==
+  dependencies:
+    bluebird "^3.7.2"
+    check-types "^11.2.3"
+    hoopy "^0.1.4"
+    jsonpath "^1.1.1"
+    tryer "^1.0.1"
+
+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@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+bluebird@2.9.6:
+  version "2.9.6"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.6.tgz#1fc3a6b1685267dc121b5ec89b32ce069d81ab7d"
+  integrity sha512-SVwAE1qajO/OS4N1eM94cO41Vs60sDsqq7RvPYbNeQmI7iH/+ndxLTu0PIMgopNH9q94nw1pGg+FclCj2hnfoA==
+
+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+bonjour-service@^1.0.11:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.3.0.tgz#80d867430b5a0da64e82a8047fc1e355bdb71722"
+  integrity sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    multicast-dns "^7.2.5"
+
+boolbase@^1.0.0, boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
+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"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
+browserslist@^4.0.0, browserslist@^4.18.1, browserslist@^4.21.4, browserslist@^4.23.3, browserslist@^4.24.0, browserslist@^4.24.2:
+  version "4.24.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.3.tgz#5fc2725ca8fb3c1432e13dac278c7cc103e026d2"
+  integrity sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==
+  dependencies:
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+builtin-modules@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
+  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.7, call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
+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==
+
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+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@^6.2.0, camelcase@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
+  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.30001646, caniuse-lite@^1.0.30001688:
+  version "1.0.30001690"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz#f2d15e3aaf8e18f76b2b8c1481abde063b8104c8"
+  integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==
+
+case-sensitive-paths-webpack-plugin@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
+  integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
+
+chalk@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
+  integrity sha512-bIKA54hP8iZhyDT81TOsJiQvR1gW+ZYSXFaZUAvoD4wCHdbHY2actmpTE4x344ZlFqHbvoxKOaESULTZN2gstg==
+  dependencies:
+    ansi-styles "^1.1.0"
+    escape-string-regexp "^1.0.0"
+    has-ansi "^0.1.0"
+    strip-ansi "^0.3.0"
+    supports-color "^0.2.0"
+
+chalk@^2.4.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"
+
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
+char-regex@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.2.tgz#81385bb071af4df774bff8721d0ca15ef29ea0bb"
+  integrity sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg==
+
+check-types@^11.2.3:
+  version "11.2.3"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.3.tgz#1ffdf68faae4e941fce252840b1787b8edc93b71"
+  integrity sha512-+67P1GkJRaxQD6PKK0Et9DhwQB+vGg3PM5+aavopCpZT1lj9jeqfvpgTLAWErNj8qApkkmXlu/Ug74kmhagkXg==
+
+chokidar@^3.4.2, chokidar@^3.5.3, chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
+ci-info@^3.2.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+
+cjs-module-lexer@^1.0.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz#707413784dbb3a72aa11c2f2b042a0bef4004170"
+  integrity sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==
+
+clean-css@^5.2.2:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
+  integrity sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==
+  dependencies:
+    source-map "~0.6.0"
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  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"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
+  integrity sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colord@^2.9.1:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
+colorette@^2.0.10:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+combined-stream@^1.0.8:
+  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.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+  integrity sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg==
+
+commander@^2.20.0:
+  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==
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
+common-tags@^1.8.0:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+
+compressible@~2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.7.4:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.5.tgz#fdd256c0a642e39e314c478f6c2cd654edd74c93"
+  integrity sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==
+  dependencies:
+    bytes "3.1.2"
+    compressible "~2.0.18"
+    debug "2.6.9"
+    negotiator "~0.6.4"
+    on-headers "~1.0.2"
+    safe-buffer "5.2.1"
+    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 sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+concurrently@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.1.0.tgz#dc5ef0459090012604756668894c04b434ef90d1"
+  integrity sha512-memNK1sQh47EUHEkLY0aVjpzdNT0c+paC+lYzb2sSVU9evCaM50ZIlsCQDLbFIwf4Jo8gRq61eU+Yv4wnNTe2A==
+  dependencies:
+    bluebird "2.9.6"
+    chalk "0.5.1"
+    commander "2.6.0"
+    lodash "^4.5.1"
+    moment "^2.11.2"
+    rx "2.3.24"
+    spawn-default-shell "^1.1.0"
+    tree-kill "^1.1.0"
+
+confusing-browser-globals@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
+
+connect-history-api-fallback@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
+  integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4, content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
+
+core-js-compat@^3.38.0, core-js-compat@^3.38.1:
+  version "3.39.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.39.0.tgz#b12dccb495f2601dc860bdbe7b4e3ffa8ba63f61"
+  integrity sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==
+  dependencies:
+    browserslist "^4.24.2"
+
+core-js-pure@^3.23.3:
+  version "3.39.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.39.0.tgz#aa0d54d70a15bdc13e7c853db87c10abc30d68f3"
+  integrity sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg==
+
+core-js@^3.19.2:
+  version "3.39.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83"
+  integrity sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+crypto-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+css-blank-pseudo@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz#36523b01c12a25d812df343a32c322d2a2324561"
+  integrity sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-declaration-sorter@^6.3.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz#28beac7c20bad7f1775be3a7129d7eae409a3a71"
+  integrity sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==
+
+css-has-pseudo@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz#57f6be91ca242d5c9020ee3e51bbb5b89fc7af73"
+  integrity sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-loader@^6.5.1:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
+  integrity sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.33"
+    postcss-modules-extract-imports "^3.1.0"
+    postcss-modules-local-by-default "^4.0.5"
+    postcss-modules-scope "^3.2.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.5.4"
+
+css-minimizer-webpack-plugin@^3.2.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
+  integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==
+  dependencies:
+    cssnano "^5.0.6"
+    jest-worker "^27.0.2"
+    postcss "^8.3.5"
+    schema-utils "^4.0.0"
+    serialize-javascript "^6.0.0"
+    source-map "^0.6.1"
+
+css-prefers-color-scheme@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz#ca8a22e5992c10a5b9d315155e7caee625903349"
+  integrity sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==
+
+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"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
+
+css-select@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-select@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+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"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
+  dependencies:
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
+
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssdb@^7.1.0:
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.11.2.tgz#127a2f5b946ee653361a5af5333ea85a39df5ae5"
+  integrity sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+cssnano-preset-default@^5.2.14:
+  version "5.2.14"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz#309def4f7b7e16d71ab2438052093330d9ab45d8"
+  integrity sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==
+  dependencies:
+    css-declaration-sorter "^6.3.1"
+    cssnano-utils "^3.1.0"
+    postcss-calc "^8.2.3"
+    postcss-colormin "^5.3.1"
+    postcss-convert-values "^5.1.3"
+    postcss-discard-comments "^5.1.2"
+    postcss-discard-duplicates "^5.1.0"
+    postcss-discard-empty "^5.1.1"
+    postcss-discard-overridden "^5.1.0"
+    postcss-merge-longhand "^5.1.7"
+    postcss-merge-rules "^5.1.4"
+    postcss-minify-font-values "^5.1.0"
+    postcss-minify-gradients "^5.1.1"
+    postcss-minify-params "^5.1.4"
+    postcss-minify-selectors "^5.2.1"
+    postcss-normalize-charset "^5.1.0"
+    postcss-normalize-display-values "^5.1.0"
+    postcss-normalize-positions "^5.1.1"
+    postcss-normalize-repeat-style "^5.1.1"
+    postcss-normalize-string "^5.1.0"
+    postcss-normalize-timing-functions "^5.1.0"
+    postcss-normalize-unicode "^5.1.1"
+    postcss-normalize-url "^5.1.0"
+    postcss-normalize-whitespace "^5.1.1"
+    postcss-ordered-values "^5.1.3"
+    postcss-reduce-initial "^5.1.2"
+    postcss-reduce-transforms "^5.1.0"
+    postcss-svgo "^5.1.0"
+    postcss-unique-selectors "^5.1.1"
+
+cssnano-utils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
+  integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
+
+cssnano@^5.0.6:
+  version "5.1.15"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.15.tgz#ded66b5480d5127fcb44dac12ea5a983755136bf"
+  integrity sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==
+  dependencies:
+    cssnano-preset-default "^5.2.14"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
+
+csso@^4.0.2, csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+debug@2.6.9, debug@^2.6.0:
+  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@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.6:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decimal.js@^10.2.1:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+
+deep-is@^0.1.3, deep-is@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+default-gateway@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
+  integrity sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==
+  dependencies:
+    execa "^5.0.0"
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.3, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
+detect-node@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
+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"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+diff-sequences@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
+  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+dns-packet@^5.2.2:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
+  integrity sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==
+  dependencies:
+    "@leichtgewicht/ip-codec" "^2.0.1"
+
+doctrine@^2.1.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-converter@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@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, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^1.7.0:
+  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"
+
+domutils@^2.5.2, domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+ejs@^3.1.6:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
+  dependencies:
+    jake "^10.8.5"
+
+electron-to-chromium@^1.5.73:
+  version "1.5.76"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz#db20295c5061b68f07c8ea4dfcbd701485d94a3d"
+  integrity sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
+emittery@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
+  integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
+
+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==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+enhanced-resolve@^5.17.1:
+  version "5.18.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz#91eb1db193896b9801251eeff1c6980278b1e404"
+  integrity sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+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.6:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
+es-abstract@^1.17.2, es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9:
+  version "1.23.9"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.9.tgz#5b45994b7de78dada5c1bebf1379646b32b9d606"
+  integrity sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.0"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-regex "^1.2.1"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.0"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.3"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.18"
+
+es-array-method-boxes-properly@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
+  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-iterator-helpers@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz#d1dd0f58129054c0ad922e6a9a1e65eef435fe75"
+  integrity sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.6"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    iterator.prototype "^1.1.4"
+    safe-array-concat "^1.1.3"
+
+es-module-lexer@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.6.0.tgz#da49f587fd9e68ee2404fe4e256c0c7d3a81be21"
+  integrity sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3, es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
+escalade@^3.1.1, escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+escape-string-regexp@^1.0.0, 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 sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+escodegen@^1.8.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+escodegen@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-config-react-app@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4"
+  integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@babel/eslint-parser" "^7.16.3"
+    "@rushstack/eslint-patch" "^1.1.0"
+    "@typescript-eslint/eslint-plugin" "^5.5.0"
+    "@typescript-eslint/parser" "^5.5.0"
+    babel-preset-react-app "^10.0.1"
+    confusing-browser-globals "^1.0.11"
+    eslint-plugin-flowtype "^8.0.3"
+    eslint-plugin-import "^2.25.3"
+    eslint-plugin-jest "^25.3.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.27.1"
+    eslint-plugin-react-hooks "^4.3.0"
+    eslint-plugin-testing-library "^5.0.1"
+
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-module-utils@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-flowtype@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz#e1557e37118f24734aa3122e7536a038d34a4912"
+  integrity sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==
+  dependencies:
+    lodash "^4.17.21"
+    string-natural-compare "^3.0.1"
+
+eslint-plugin-import@^2.25.3:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
+  dependencies:
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
+    tsconfig-paths "^3.15.0"
+
+eslint-plugin-jest@^25.3.0:
+  version "25.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz#ff4ac97520b53a96187bad9c9814e7d00de09a6a"
+  integrity sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^5.0.0"
+
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
+  dependencies:
+    aria-query "^5.3.2"
+    array-includes "^3.1.8"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    hasown "^2.0.2"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.1"
+
+eslint-plugin-react-hooks@^4.3.0:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
+  integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
+
+eslint-plugin-react@^7.27.1:
+  version "7.37.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz#567549e9251533975c4ea9706f986c3a64832031"
+  integrity sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==
+  dependencies:
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.3"
+    array.prototype.tosorted "^1.1.4"
+    doctrine "^2.1.0"
+    es-iterator-helpers "^1.2.1"
+    estraverse "^5.3.0"
+    hasown "^2.0.2"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.8"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.1"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.12"
+    string.prototype.repeat "^1.0.0"
+
+eslint-plugin-testing-library@^5.0.1:
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz#5b46cdae96d4a78918711c0b4792f90088e62d20"
+  integrity sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==
+  dependencies:
+    "@typescript-eslint/utils" "^5.58.0"
+
+eslint-scope@5.1.1, eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-webpack-plugin@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz#1978cdb9edc461e4b0195a20da950cf57988347c"
+  integrity sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==
+  dependencies:
+    "@types/eslint" "^7.29.0 || ^8.4.1"
+    jest-worker "^28.0.2"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    schema-utils "^4.0.0"
+
+eslint@^8.3.0:
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esprima@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.2.2.tgz#76a0fd66fcfe154fd292667dc264019750b1657b"
+  integrity sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==
+
+esprima@^4.0.0, esprima@^4.0.1:
+  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.4.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
+expect@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.5.1.tgz#83ce59f1e5bdf5f9d2b94b61d2050db48f3fef74"
+  integrity sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+
+express@^4.14.0, express@^4.17.3:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.3"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.7.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.3.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.3"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.12"
+    proxy-addr "~2.0.7"
+    qs "6.13.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.19.0"
+    serve-static "1.16.2"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.9, fast-glob@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.8"
+
+fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fast-uri@^3.0.1:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.5.tgz#19f5f9691d0dab9b85861a7bb5d98fca961da9cd"
+  integrity sha512-5JnBCWpFlMo0a3ciDy/JckMzzv1U9coZrIhedq+HXxxUfDTAiS0LA8OKVao4G9BxmCVck/jtA5r3KAtRWEyD8Q==
+
+fastq@^1.6.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.18.0.tgz#d631d7e25faffea81887fe5ea8c9010e1b36fee0"
+  integrity sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==
+  dependencies:
+    reusify "^1.0.4"
+
+faye-websocket@^0.11.3:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"
+  integrity sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==
+  dependencies:
+    bser "2.1.1"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+filelist@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+  integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+  dependencies:
+    minimatch "^5.0.1"
+
+filesize@^8.0.6:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
+  integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+find-cache-dir@^2.0.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-cache-dir@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.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"
+
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
+
+flatted@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
+  integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
+
+follow-redirects@^1.0.0:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+fork-ts-checker-webpack-plugin@^6.5.0:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz#eda2eff6e22476a2688d10661688c47f611b37f3"
+  integrity sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@types/json-schema" "^7.0.5"
+    chalk "^4.1.0"
+    chokidar "^3.4.2"
+    cosmiconfig "^6.0.0"
+    deepmerge "^4.2.2"
+    fs-extra "^9.0.0"
+    glob "^7.1.6"
+    memfs "^3.1.2"
+    minimatch "^3.0.4"
+    schema-utils "2.7.0"
+    semver "^7.3.2"
+    tapable "^1.0.0"
+
+form-data@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.2.tgz#83ad9ced7c03feaad97e293d6f6091011e1659c8"
+  integrity sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+fs-extra@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-extra@^9.0.0, fs-extra@^9.0.1:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-monkey@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.6.tgz#8ead082953e88d992cf3ff844faa907b26756da2"
+  integrity sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.5:
+  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-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    get-proto "^1.0.0"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    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"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  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"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+globals@^11.1.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@^13.19.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+globby@^11.0.4, globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+gopd@^1.0.1, gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
+handle-thing@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
+
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
+has-ansi@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
+  integrity sha512-1YsTg1fk2/6JToQhtZkArMkurq8UoWU1Qe0aR3VUHjgij4nOylSWLWAtBXoZ4/dXOmugfLGm1c+QhuD0JyedFA==
+  dependencies:
+    ansi-regex "^0.2.0"
+
+has-bigints@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
+  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
+has-symbols@^1.0.1, has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.0, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+hoopy@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
+  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
+
+html-entities@^2.1.0, html-entities@^2.3.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
+  integrity sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-minifier-terser@^6.0.2:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
+  integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==
+  dependencies:
+    camel-case "^4.1.2"
+    clean-css "^5.2.2"
+    commander "^8.3.0"
+    he "^1.2.0"
+    param-case "^3.0.4"
+    relateurl "^0.2.7"
+    terser "^5.10.0"
+
+html-webpack-plugin@^5.5.0:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz#a31145f0fee4184d53a794f9513147df1e653685"
+  integrity sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==
+  dependencies:
+    "@types/html-minifier-terser" "^6.0.0"
+    html-minifier-terser "^6.0.2"
+    lodash "^4.17.21"
+    pretty-error "^4.0.0"
+    tapable "^2.0.0"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.5.1:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
+  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
+
+http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
+http-proxy-middleware@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-3.0.3.tgz#dc1313c75bd00d81e103823802551ee30130ebd1"
+  integrity sha512-usY0HG5nyDUwtqpiZdETNbmKtw3QQ1jwYFZ9wi5iHzX2BcILwQKtYDJPo7XHTsu5Z0B2Hj3W9NNnbd+AjFWjqg==
+  dependencies:
+    "@types/http-proxy" "^1.17.15"
+    debug "^4.3.6"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.3"
+    is-plain-object "^5.0.0"
+    micromatch "^4.0.8"
+
+http-proxy-middleware@^2.0.3:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
+  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
+  dependencies:
+    "@types/http-proxy" "^1.17.8"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.1"
+    is-plain-obj "^3.0.0"
+    micromatch "^4.0.2"
+
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.4.24:
+  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.2 < 3"
+
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
+idb@^7.0.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
+  integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
+
+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"
+  integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
+  dependencies:
+    harmony-reflect "^1.4.6"
+
+ignore-styles@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-styles/-/ignore-styles-5.0.1.tgz#b49ef2274bdafcd8a4880a966bfe38d1a0bf4671"
+  integrity sha512-gQQmIznCETPLEzfg1UH4Cs2oRq+HBPl8quroEUNXT8oybEG7/0lqI3dGgDSRry6B9HcCXw3PVkFFS0FF3CMddg==
+
+ignore@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+immer@^9.0.7:
+  version "9.0.21"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
+  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+
+import-fresh@^3.1.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-local@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.2.0.tgz#c3d5c745798c02a6f8b897726aba5100186ee260"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, 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.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
+
+ini@^1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
+ipaddr.js@1.9.1:
+  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==
+
+ipaddr.js@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.2.0.tgz#d33fa7bac284f4de7af949638c9d68157c6b92e8"
+  integrity sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==
+
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-async-function@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.1.0.tgz#1d1080612c493608e93168fc4458c245074c06a6"
+  integrity sha512-GExz9MtyhlZyXYLxzlJRj5WUCE661zhDa1Yna52CN57AJsymh+DvXXjyveSioqSRdxvUrdKdvqB1b5cVKsNpWQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.1.tgz#c20d0c654be05da4fbc23c562635c019e93daf89"
+  integrity sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-callable@^1.1.3, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.13.0, is-core-module@^2.15.1, is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
+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-generator-function@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
+  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.0"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
+
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-obj@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
+  integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
+
+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@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
+
+is-root@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
+  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
+
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.0.7, is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
+is-typedarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2, is-weakref@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.0.tgz#47e3472ae95a63fa9cf25660bcf0c181c39770ef"
+  integrity sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==
+  dependencies:
+    call-bound "^1.0.2"
+
+is-weakset@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
+  integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d"
+  integrity sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^4.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
+  integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+iterator.prototype@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.5.tgz#12c959a29de32de0aa3bbbb801f4d777066dae39"
+  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    get-proto "^1.0.0"
+    has-symbols "^1.1.0"
+    set-function-name "^2.0.2"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jake@^10.8.5:
+  version "10.9.2"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.9.2.tgz#6ae487e6a69afec3a5e167628996b59f35ae2b7f"
+  integrity sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.4"
+    minimatch "^3.1.2"
+
+jest-changed-files@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
+  integrity sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    execa "^5.0.0"
+    throat "^6.0.1"
+
+jest-circus@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.5.1.tgz#37a5a4459b7bf4406e53d637b49d22c65d125ecc"
+  integrity sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
+jest-cli@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.5.1.tgz#278794a6e6458ea8029547e6c6cbf673bd30b145"
+  integrity sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    prompts "^2.0.1"
+    yargs "^16.2.0"
+
+jest-config@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.5.1.tgz#5c387de33dca3f99ad6357ddeccd91bf3a0e4a41"
+  integrity sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==
+  dependencies:
+    "@babel/core" "^7.8.0"
+    "@jest/test-sequencer" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    babel-jest "^27.5.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.9"
+    jest-circus "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-jasmine2 "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
+  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-docblock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.5.1.tgz#14092f364a42c6108d42c33c8cf30e058e25f6c0"
+  integrity sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.5.1.tgz#5bc87016f45ed9507fed6e4702a5b468a5b2c44e"
+  integrity sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-environment-jsdom@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz#ea9ccd1fc610209655a77898f86b2b559516a546"
+  integrity sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+    jsdom "^16.6.0"
+
+jest-environment-node@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.5.1.tgz#dedc2cfe52fab6b8f5714b4808aefa85357a365e"
+  integrity sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
+jest-get-type@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
+  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
+
+jest-haste-map@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
+  integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^27.5.1"
+    jest-serializer "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-jasmine2@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz#a037b0034ef49a9f3d71c4375a796f3b230d1ac4"
+  integrity sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    throat "^6.0.1"
+
+jest-leak-detector@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz#6ec9d54c3579dd6e3e66d70e3498adf80fde3fb8"
+  integrity sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==
+  dependencies:
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-matcher-utils@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
+  integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
+jest-message-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
+  integrity sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.5.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-message-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.3.tgz#232def7f2e333f1eecc90649b5b94b0055e7c43d"
+  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.1.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
+  integrity sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
+
+jest-regex-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
+  integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
+
+jest-regex-util@^28.0.0:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
+jest-resolve-dependencies@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
+  integrity sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-snapshot "^27.5.1"
+
+jest-resolve@^27.4.2, jest-resolve@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.5.1.tgz#a2f1c5a0796ec18fe9eb1536ac3814c23617b384"
+  integrity sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-runner@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.5.1.tgz#071b27c1fa30d90540805c5645a0ec167c7b62e5"
+  integrity sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-leak-detector "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    source-map-support "^0.5.6"
+    throat "^6.0.1"
+
+jest-runtime@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.5.1.tgz#4896003d7a334f7e8e4a53ba93fb9bcd3db0a1af"
+  integrity sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/globals" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-serializer@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
+  integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.9"
+
+jest-snapshot@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.5.1.tgz#b668d50d23d38054a51b42c4039cab59ae6eb6a1"
+  integrity sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==
+  dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^27.5.1"
+    semver "^7.3.2"
+
+jest-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
+  integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
+  integrity sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    leven "^3.1.0"
+    pretty-format "^27.5.1"
+
+jest-watch-typeahead@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz#b4a6826dfb9c9420da2f7bc900de59dad11266a9"
+  integrity sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==
+  dependencies:
+    ansi-escapes "^4.3.1"
+    chalk "^4.0.0"
+    jest-regex-util "^28.0.0"
+    jest-watcher "^28.0.0"
+    slash "^4.0.0"
+    string-length "^5.0.1"
+    strip-ansi "^7.0.1"
+
+jest-watcher@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
+  integrity sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.5.1"
+    string-length "^4.0.1"
+
+jest-watcher@^28.0.0:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.3.tgz#c6023a59ba2255e3b4c57179fc94164b3e73abd4"
+  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.1.3"
+    string-length "^4.0.1"
+
+jest-worker@^26.2.1:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest-worker@^27.0.2, jest-worker@^27.4.5, jest-worker@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest-worker@^28.0.2:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.3.tgz#7e3c4ce3fa23d1bb6accb169e7f396f98ed4bb98"
+  integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^27.4.3:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
+  integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    import-local "^3.0.2"
+    jest-cli "^27.5.1"
+
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
+
+"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-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsdom@^16.6.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.2.4"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
+    xml-name-validator "^3.0.0"
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+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-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-schema@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
+
+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 sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonpath@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jsonpath/-/jsonpath-1.1.1.tgz#0ca1ed8fb65bb3309248cc9d5466d12d5b0b9901"
+  integrity sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==
+  dependencies:
+    esprima "1.2.2"
+    static-eval "2.0.2"
+    underscore "1.12.1"
+
+jsonpointer@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
+  integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+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==
+
+klona@^2.0.4, klona@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
+  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
+
+language-subtag-registry@^0.3.20:
+  version "0.3.23"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
+  integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
+launch-editor@^2.6.0:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.9.1.tgz#253f173bd441e342d4344b4dae58291abb425047"
+  integrity sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.8.1"
+
+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.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lilconfig@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+loader-utils@^2.0.0, loader-utils@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+loader-utils@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.3.1.tgz#735b9a19fd63648ca7adbd31c2327dfe281304e5"
+  integrity sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==
+
+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"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
+
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.5.1, lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+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@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+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"
+
+magic-string@^0.25.0, magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+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-dir@^3.0.2, make-dir@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
+  integrity sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==
+  dependencies:
+    semver "^7.5.3"
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+memfs@^3.1.2, memfs@^3.4.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
+  integrity sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ==
+  dependencies:
+    fs-monkey "^1.0.4"
+
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+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==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
+
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+"mime-db@>= 1.43.0 < 2":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
+  integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
+
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.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==
+
+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==
+
+mini-css-extract-plugin@^2.4.5:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz#966031b468917a5446f4c24a80854b2947503c5b"
+  integrity sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==
+  dependencies:
+    schema-utils "^4.0.0"
+    tapable "^2.2.1"
+
+minimalistic-assert@^1.0.0:
+  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==
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mkdirp@~0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+moment@^2.11.2:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multicast-dns@^7.2.5:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
+  integrity sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==
+  dependencies:
+    dns-packet "^5.2.2"
+    thunky "^1.0.2"
+
+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"
+
+nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
+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 sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+negotiator@~0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.4.tgz#777948e2452651c570b712dd01c23e262713fff7"
+  integrity sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==
+
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
+node-forge@^1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
+normalize-path@^3.0.0, 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-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+normalize-url@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+nth-check@^1.0.2:
+  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"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+nwsapi@^2.2.0:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.16.tgz#177760bba02c351df1d2644e220c31dfec8cdb43"
+  integrity sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
+  integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.4, object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.getownpropertydescriptors@^2.1.0:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz#2f1fe0606ec1a7658154ccd4f728504f69667923"
+  integrity sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==
+  dependencies:
+    array.prototype.reduce "^1.0.6"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    gopd "^1.0.1"
+    safe-array-concat "^1.1.2"
+
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.values@^1.1.0, object.values@^1.1.6, object.values@^1.2.0, object.values@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+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==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  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:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^8.0.9, open@^8.4.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+optionator@^0.8.1:
+  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"
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
+p-limit@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.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-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-retry@^4.5.0:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
+  integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==
+  dependencies:
+    "@types/retry" "0.12.0"
+    retry "^0.13.1"
+
+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==
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
+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-json@^5.0.0, parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse5@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
+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==
+
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+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==
+
+pirates@^4.0.1, pirates@^4.0.4, pirates@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+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"
+
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss-attribute-case-insensitive@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
+  integrity sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-browser-comments@^4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz#bcfc86134df5807f5d3c0eefa191d42136b5e72a"
+  integrity sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==
+
+postcss-calc@^8.2.3:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
+  integrity sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
+
+postcss-clamp@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.1.0.tgz#7263e95abadd8c2ba1bd911b0b5a5c9c93e02363"
+  integrity sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-functional-notation@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz#21a909e8d7454d3612d1659e471ce4696f28caec"
+  integrity sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-hex-alpha@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz#c66e2980f2fbc1a63f5b079663340ce8b55f25a5"
+  integrity sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-rebeccapurple@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz#63fdab91d878ebc4dd4b7c02619a0c3d6a56ced0"
+  integrity sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-colormin@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz#86c27c26ed6ba00d96c79e08f3ffb418d1d1988f"
+  integrity sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+    colord "^2.9.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-convert-values@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz#04998bb9ba6b65aa31035d669a6af342c5f9d393"
+  integrity sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-media@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz#c8f9637edf45fef761b014c024cee013f80529ea"
+  integrity sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-properties@^12.1.10:
+  version "12.1.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz#d14bb9b3989ac4d40aaa0e110b43be67ac7845cf"
+  integrity sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-selectors@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz#1ab4684d65f30fed175520f82d223db0337239d9"
+  integrity sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-dir-pseudo-class@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz#2bf31de5de76added44e0a25ecf60ae9f7c7c26c"
+  integrity sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-discard-comments@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
+  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
+
+postcss-discard-duplicates@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
+  integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
+
+postcss-discard-empty@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz#e57762343ff7f503fe53fca553d18d7f0c369c6c"
+  integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
+
+postcss-discard-overridden@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
+  integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
+
+postcss-double-position-gradients@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz#b96318fdb477be95997e86edd29c6e3557a49b91"
+  integrity sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-env-function@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-4.0.6.tgz#7b2d24c812f540ed6eda4c81f6090416722a8e7a"
+  integrity sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-flexbugs-fixes@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz#2028e145313074fc9abe276cb7ca14e5401eb49d"
+  integrity sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==
+
+postcss-focus-visible@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz#50c9ea9afa0ee657fb75635fabad25e18d76bf9e"
+  integrity sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-focus-within@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz#5b1d2ec603195f3344b716c0b75f61e44e8d2e20"
+  integrity sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-font-variant@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz#efd59b4b7ea8bb06127f2d031bfbb7f24d32fa66"
+  integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
+
+postcss-gap-properties@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz#f7e3cddcf73ee19e94ccf7cb77773f9560aa2fff"
+  integrity sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==
+
+postcss-image-set-function@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz#08353bd756f1cbfb3b6e93182c7829879114481f"
+  integrity sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-initial@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
+  integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-lab-function@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz#6fe4c015102ff7cd27d1bd5385582f67ebdbdc98"
+  integrity sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
+postcss-logical@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-5.0.4.tgz#ec75b1ee54421acc04d5921576b7d8db6b0e6f73"
+  integrity sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==
+
+postcss-media-minmax@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz#7140bddec173e2d6d657edbd8554a55794e2a5b5"
+  integrity sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==
+
+postcss-merge-longhand@^5.1.7:
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz#24a1bdf402d9ef0e70f568f39bdc0344d568fb16"
+  integrity sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    stylehacks "^5.1.1"
+
+postcss-merge-rules@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz#2f26fa5cacb75b1402e213789f6766ae5e40313c"
+  integrity sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+    cssnano-utils "^3.1.0"
+    postcss-selector-parser "^6.0.5"
+
+postcss-minify-font-values@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
+  integrity sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-gradients@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz#f1fe1b4f498134a5068240c2f25d46fcd236ba2c"
+  integrity sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==
+  dependencies:
+    colord "^2.9.1"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-params@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz#c06a6c787128b3208b38c9364cfc40c8aa5d7352"
+  integrity sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==
+  dependencies:
+    browserslist "^4.21.4"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-selectors@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz#d4e7e6b46147b8117ea9325a915a801d5fe656c6"
+  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
+postcss-modules-extract-imports@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
+
+postcss-modules-local-by-default@^4.0.5:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz#d150f43837831dae25e4085596e84f6f5d6ec368"
+  integrity sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^7.0.0"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz#1bbccddcb398f1d7a511e0a2d1d047718af4078c"
+  integrity sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==
+  dependencies:
+    postcss-selector-parser "^7.0.0"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-nesting@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.2.0.tgz#0b12ce0db8edfd2d8ae0aaf86427370b898890be"
+  integrity sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+postcss-normalize-charset@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz#9302de0b29094b52c259e9b2cf8dc0879879f0ed"
+  integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
+
+postcss-normalize-display-values@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz#72abbae58081960e9edd7200fcf21ab8325c3da8"
+  integrity sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-positions@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz#ef97279d894087b59325b45c47f1e863daefbb92"
+  integrity sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-repeat-style@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz#e9eb96805204f4766df66fd09ed2e13545420fb2"
+  integrity sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-string@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz#411961169e07308c82c1f8c55f3e8a337757e228"
+  integrity sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-timing-functions@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz#d5614410f8f0b2388e9f240aa6011ba6f52dafbb"
+  integrity sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-unicode@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz#f67297fca3fea7f17e0d2caa40769afc487aa030"
+  integrity sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-url@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz#ed9d88ca82e21abef99f743457d3729a042adcdc"
+  integrity sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==
+  dependencies:
+    normalize-url "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-whitespace@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz#08a1a0d1ffa17a7cc6efe1e6c9da969cc4493cfa"
+  integrity sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-10.0.1.tgz#464692676b52792a06b06880a176279216540dd7"
+  integrity sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==
+  dependencies:
+    "@csstools/normalize.css" "*"
+    postcss-browser-comments "^4"
+    sanitize.css "*"
+
+postcss-opacity-percentage@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz#5b89b35551a556e20c5d23eb5260fbfcf5245da6"
+  integrity sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==
+
+postcss-ordered-values@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz#b6fd2bd10f937b23d86bc829c69e7732ce76ea38"
+  integrity sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==
+  dependencies:
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-overflow-shorthand@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz#7ed6486fec44b76f0eab15aa4866cda5d55d893e"
+  integrity sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-page-break@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-3.0.4.tgz#7fbf741c233621622b68d435babfb70dd8c1ee5f"
+  integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
+
+postcss-place@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-7.0.5.tgz#95dbf85fd9656a3a6e60e832b5809914236986c4"
+  integrity sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-preset-env@^7.0.1:
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz#2a50f5e612c3149cc7af75634e202a5b2ad4f1e2"
+  integrity sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==
+  dependencies:
+    "@csstools/postcss-cascade-layers" "^1.1.1"
+    "@csstools/postcss-color-function" "^1.1.1"
+    "@csstools/postcss-font-format-keywords" "^1.0.1"
+    "@csstools/postcss-hwb-function" "^1.0.2"
+    "@csstools/postcss-ic-unit" "^1.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.7"
+    "@csstools/postcss-nested-calc" "^1.0.0"
+    "@csstools/postcss-normalize-display-values" "^1.0.1"
+    "@csstools/postcss-oklab-function" "^1.1.1"
+    "@csstools/postcss-progressive-custom-properties" "^1.3.0"
+    "@csstools/postcss-stepped-value-functions" "^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
+    "@csstools/postcss-trigonometric-functions" "^1.0.2"
+    "@csstools/postcss-unset-value" "^1.0.2"
+    autoprefixer "^10.4.13"
+    browserslist "^4.21.4"
+    css-blank-pseudo "^3.0.3"
+    css-has-pseudo "^3.0.4"
+    css-prefers-color-scheme "^6.0.3"
+    cssdb "^7.1.0"
+    postcss-attribute-case-insensitive "^5.0.2"
+    postcss-clamp "^4.1.0"
+    postcss-color-functional-notation "^4.2.4"
+    postcss-color-hex-alpha "^8.0.4"
+    postcss-color-rebeccapurple "^7.1.1"
+    postcss-custom-media "^8.0.2"
+    postcss-custom-properties "^12.1.10"
+    postcss-custom-selectors "^6.0.3"
+    postcss-dir-pseudo-class "^6.0.5"
+    postcss-double-position-gradients "^3.1.2"
+    postcss-env-function "^4.0.6"
+    postcss-focus-visible "^6.0.4"
+    postcss-focus-within "^5.0.4"
+    postcss-font-variant "^5.0.0"
+    postcss-gap-properties "^3.0.5"
+    postcss-image-set-function "^4.0.7"
+    postcss-initial "^4.0.1"
+    postcss-lab-function "^4.2.1"
+    postcss-logical "^5.0.4"
+    postcss-media-minmax "^5.0.0"
+    postcss-nesting "^10.2.0"
+    postcss-opacity-percentage "^1.1.2"
+    postcss-overflow-shorthand "^3.0.4"
+    postcss-page-break "^3.0.4"
+    postcss-place "^7.0.5"
+    postcss-pseudo-class-any-link "^7.1.6"
+    postcss-replace-overflow-wrap "^4.0.0"
+    postcss-selector-not "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-pseudo-class-any-link@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
+  integrity sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-reduce-initial@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz#798cd77b3e033eae7105c18c9d371d989e1382d6"
+  integrity sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-api "^3.0.0"
+
+postcss-reduce-transforms@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9"
+  integrity sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-replace-overflow-wrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
+  integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
+
+postcss-selector-not@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
+  integrity sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c"
+  integrity sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-svgo@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
+  integrity sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    svgo "^2.7.0"
+
+postcss-unique-selectors@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
+  integrity sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^7.0.35:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
+postcss@^8.3.5, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
+
+pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
+pretty-error@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
+  integrity sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^3.0.0"
+
+pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
+pretty-format@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+promise@^8.1.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
+  integrity sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==
+  dependencies:
+    asap "~2.0.6"
+
+prompts@^2.0.1, prompts@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+psl@^1.1.33:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
+  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
+  dependencies:
+    punycode "^2.3.1"
+
+punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
+randombytes@^2.1.0:
+  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"
+
+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.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+react-app-polyfill@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7"
+  integrity sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==
+  dependencies:
+    core-js "^3.19.2"
+    object-assign "^4.1.1"
+    promise "^8.1.0"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.9"
+    whatwg-fetch "^3.6.2"
+
+react-dev-utils@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
+  integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    address "^1.1.2"
+    browserslist "^4.18.1"
+    chalk "^4.1.2"
+    cross-spawn "^7.0.3"
+    detect-port-alt "^1.1.6"
+    escape-string-regexp "^4.0.0"
+    filesize "^8.0.6"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.5.0"
+    global-modules "^2.0.0"
+    globby "^11.0.4"
+    gzip-size "^6.0.0"
+    immer "^9.0.7"
+    is-root "^2.1.0"
+    loader-utils "^3.2.0"
+    open "^8.4.0"
+    pkg-up "^3.1.0"
+    prompts "^2.4.2"
+    react-error-overlay "^6.0.11"
+    recursive-readdir "^2.2.2"
+    shell-quote "^1.7.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+react-dom@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  dependencies:
+    scheduler "^0.25.0"
+
+react-error-overlay@^6.0.11:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
+  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-is@^18.0.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-refresh@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
+  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
+
+react-scripts@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
+  integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3"
+    "@svgr/webpack" "^5.5.0"
+    babel-jest "^27.4.2"
+    babel-loader "^8.2.3"
+    babel-plugin-named-asset-import "^0.3.8"
+    babel-preset-react-app "^10.0.1"
+    bfj "^7.0.2"
+    browserslist "^4.18.1"
+    camelcase "^6.2.1"
+    case-sensitive-paths-webpack-plugin "^2.4.0"
+    css-loader "^6.5.1"
+    css-minimizer-webpack-plugin "^3.2.0"
+    dotenv "^10.0.0"
+    dotenv-expand "^5.1.0"
+    eslint "^8.3.0"
+    eslint-config-react-app "^7.0.1"
+    eslint-webpack-plugin "^3.1.1"
+    file-loader "^6.2.0"
+    fs-extra "^10.0.0"
+    html-webpack-plugin "^5.5.0"
+    identity-obj-proxy "^3.0.0"
+    jest "^27.4.3"
+    jest-resolve "^27.4.2"
+    jest-watch-typeahead "^1.0.0"
+    mini-css-extract-plugin "^2.4.5"
+    postcss "^8.4.4"
+    postcss-flexbugs-fixes "^5.0.2"
+    postcss-loader "^6.2.1"
+    postcss-normalize "^10.0.1"
+    postcss-preset-env "^7.0.1"
+    prompts "^2.4.2"
+    react-app-polyfill "^3.0.0"
+    react-dev-utils "^12.0.1"
+    react-refresh "^0.11.0"
+    resolve "^1.20.0"
+    resolve-url-loader "^4.0.0"
+    sass-loader "^12.3.0"
+    semver "^7.3.5"
+    source-map-loader "^3.0.0"
+    style-loader "^3.3.1"
+    tailwindcss "^3.0.2"
+    terser-webpack-plugin "^5.2.5"
+    webpack "^5.64.4"
+    webpack-dev-server "^4.6.0"
+    webpack-manifest-plugin "^4.0.2"
+    workbox-webpack-plugin "^6.4.1"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+react@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readable-stream@^2.0.1:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  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@^3.0.6:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+recursive-readdir@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"
+  integrity sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==
+  dependencies:
+    minimatch "^3.0.5"
+
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
+regenerate-unicode-properties@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.9:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regex-parser@^2.2.11:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.3.0.tgz#4bb61461b1a19b8b913f3960364bb57887f920ee"
+  integrity sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==
+
+regexp.prototype.flags@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
+regexpu-core@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
+  integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.12.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+regjsparser@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.12.0.tgz#0e846df6c6530586429377de56e0475583b088dc"
+  integrity sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==
+  dependencies:
+    jsesc "~3.0.2"
+
+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
+
+renderkid@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
+  integrity sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==
+  dependencies:
+    css-select "^4.1.3"
+    dom-converter "^0.2.0"
+    htmlparser2 "^6.1.0"
+    lodash "^4.17.21"
+    strip-ansi "^6.0.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+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==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+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-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-url-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz#d50d4ddc746bb10468443167acf800dcd6c3ad57"
+  integrity sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==
+  dependencies:
+    adjust-sourcemap-loader "^4.0.0"
+    convert-source-map "^1.7.0"
+    loader-utils "^2.0.0"
+    postcss "^7.0.35"
+    source-map "0.6.1"
+
+resolve.exports@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
+  integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
+
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4, resolve@^1.22.8:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+retry@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
+  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup-plugin-terser@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
+rollup@^2.43.1:
+  version "2.79.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.2.tgz#f150e4a5db4b121a21a747d762f701e5e9f49090"
+  integrity sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rx@2.3.24:
+  version "2.3.24"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
+  integrity sha512-Ue4ZB7Dzbn2I9sIj8ws536nOP2S53uypyCkCz9q0vlYD5Kn6/pu4dE+wt2ZfFzd9m73hiYKnnCb1OyKqc+MRkg==
+
+safe-array-concat@^1.1.2, safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+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-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.3, safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sanitize.css@*:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"
+  integrity sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==
+
+sass-loader@^12.3.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
+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==
+
+saxes@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
+schema-utils@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
+schema-utils@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.0.0, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^4.0.0, schema-utils@^4.2.0, schema-utils@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.3.0.tgz#3b669f04f71ff2dfb5aba7ce2d5a9d79b35622c0"
+  integrity sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.9.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^5.1.0"
+
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
+
+selfsigned@^2.1.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.4.1.tgz#560d90565442a3ed35b674034cec4e95dceb4ae0"
+  integrity sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==
+  dependencies:
+    "@types/node-forge" "^1.3.0"
+    node-forge "^1"
+
+semver@^5.6.0:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+serve-index@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==
+  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.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.0"
+
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
+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.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@^1.7.3, shell-quote@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
+  integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.6, side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+sockjs@^0.3.24:
+  version "0.3.24"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
+  integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
+  dependencies:
+    faye-websocket "^0.11.3"
+    uuid "^8.3.2"
+    websocket-driver "^0.7.4"
+
+source-list-map@^2.0.0, source-list-map@^2.0.1:
+  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-js@^1.0.1, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+source-map-loader@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.2.tgz#af23192f9b344daa729f6772933194cc5fa54fee"
+  integrity sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==
+  dependencies:
+    abab "^2.0.5"
+    iconv-lite "^0.6.3"
+    source-map-js "^1.0.1"
+
+source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+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"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.3:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+source-map@^0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+spawn-default-shell@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/spawn-default-shell/-/spawn-default-shell-1.1.0.tgz#095439d44c4b7c0aff56a53929fbaab87878e7c6"
+  integrity sha512-fdKHhxTRC9NX4MsiJpW+fXRirHb6tjAl0TXFljBlVSEQrXqAZqEIAa3S34A5S24OrE1+MMH5MNcfNop96e3tpw==
+
+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.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
+  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"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
+static-eval@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.2.tgz#2d1759306b1befa688938454c546b7871f806a42"
+  integrity sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==
+  dependencies:
+    escodegen "^1.8.1"
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-length@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-5.0.1.tgz#3d647f497b6e8e8d41e422f7e0b23bc536c8381e"
+  integrity sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==
+  dependencies:
+    char-regex "^2.0.0"
+    strip-ansi "^7.0.1"
+
+string-natural-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
+  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
+
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+
+string.prototype.matchall@^4.0.12, string.prototype.matchall@^4.0.6:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"
+  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    regexp.prototype.flags "^1.5.3"
+    set-function-name "^2.0.2"
+    side-channel "^1.1.0"
+
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+string.prototype.trimend@^1.0.8, string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^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@~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"
+
+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
+  integrity sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==
+  dependencies:
+    ansi-regex "^0.2.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-comments@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
+  integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+style-loader@^3.3.1:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
+  integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
+
+stylehacks@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
+  integrity sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==
+  dependencies:
+    browserslist "^4.21.4"
+    postcss-selector-parser "^6.0.4"
+
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+supports-color@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
+  integrity sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA==
+
+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"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
+  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svg-parser@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^1.2.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
+  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"
+
+svgo@^2.7.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
+symbol-tree@^3.2.4:
+  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==
+
+tailwindcss@^3.0.2:
+  version "3.4.17"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
+tapable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+temp-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
+  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
+
+tempy@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
+  integrity sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==
+  dependencies:
+    is-stream "^2.0.0"
+    temp-dir "^2.0.0"
+    type-fest "^0.16.0"
+    unique-string "^2.0.0"
+
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.10:
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz#93c21f44ca86634257cac176f884f942b7ba3832"
+  integrity sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jest-worker "^27.4.5"
+    schema-utils "^4.3.0"
+    serialize-javascript "^6.0.2"
+    terser "^5.31.1"
+
+terser@^5.0.0, terser@^5.10.0, terser@^5.31.1:
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.37.0.tgz#38aa66d1cfc43d0638fab54e43ff8a4f72a21ba3"
+  integrity sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+throat@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.2.tgz#51a3fbb5e11ae72e2cf74861ed5c8020f89f29fe"
+  integrity sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==
+
+thunky@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tough-cookie@^4.0.0:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+  dependencies:
+    punycode "^2.1.1"
+
+tree-kill@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tryer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
+  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.3:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
+  integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+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"
+
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
+underscore@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
+  integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
+
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
+  integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
+  integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+unique-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+
+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 sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==
+
+upath@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+v8-to-istanbul@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
+  integrity sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+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"
+
+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==
+
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
+webpack-dev-middleware@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
+  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
+  dependencies:
+    colorette "^2.0.10"
+    memfs "^3.4.3"
+    mime-types "^2.1.31"
+    range-parser "^1.2.1"
+    schema-utils "^4.0.0"
+
+webpack-dev-server@^4.6.0:
+  version "4.15.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz#9e0c70a42a012560860adb186986da1248333173"
+  integrity sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==
+  dependencies:
+    "@types/bonjour" "^3.5.9"
+    "@types/connect-history-api-fallback" "^1.3.5"
+    "@types/express" "^4.17.13"
+    "@types/serve-index" "^1.9.1"
+    "@types/serve-static" "^1.13.10"
+    "@types/sockjs" "^0.3.33"
+    "@types/ws" "^8.5.5"
+    ansi-html-community "^0.0.8"
+    bonjour-service "^1.0.11"
+    chokidar "^3.5.3"
+    colorette "^2.0.10"
+    compression "^1.7.4"
+    connect-history-api-fallback "^2.0.0"
+    default-gateway "^6.0.3"
+    express "^4.17.3"
+    graceful-fs "^4.2.6"
+    html-entities "^2.3.2"
+    http-proxy-middleware "^2.0.3"
+    ipaddr.js "^2.0.1"
+    launch-editor "^2.6.0"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.1.1"
+    serve-index "^1.9.1"
+    sockjs "^0.3.24"
+    spdy "^4.0.2"
+    webpack-dev-middleware "^5.3.4"
+    ws "^8.13.0"
+
+webpack-manifest-plugin@^4.0.2:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz#10f8dbf4714ff93a215d5a45bcc416d80506f94f"
+  integrity sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==
+  dependencies:
+    tapable "^2.0.0"
+    webpack-sources "^2.2.0"
+
+webpack-sources@^1.4.3:
+  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-sources@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"
+  integrity sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==
+  dependencies:
+    source-list-map "^2.0.1"
+    source-map "^0.6.1"
+
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack@^5.64.4:
+  version "5.97.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.97.1.tgz#972a8320a438b56ff0f1d94ade9e82eac155fa58"
+  integrity sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==
+  dependencies:
+    "@types/eslint-scope" "^3.7.7"
+    "@types/estree" "^1.0.6"
+    "@webassemblyjs/ast" "^1.14.1"
+    "@webassemblyjs/wasm-edit" "^1.14.1"
+    "@webassemblyjs/wasm-parser" "^1.14.1"
+    acorn "^8.14.0"
+    browserslist "^4.24.0"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
+    webpack-sources "^3.2.3"
+
+websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
+whatwg-encoding@^1.0.5:
+  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.24"
+
+whatwg-fetch@^3.6.2:
+  version "3.6.20"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz#580ce6d791facec91d37c72890995a0b48d31c70"
+  integrity sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==
+
+whatwg-mimetype@^2.3.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:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^8.0.0, whatwg-url@^8.5.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-typed-array@^1.1.16, which-typed-array@^1.1.18:
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.18.tgz#df2389ebf3fbb246a71390e90730a9edb6ce17ad"
+  integrity sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
+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"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5, word-wrap@~1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+workbox-background-sync@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.6.1.tgz#08d603a33717ce663e718c30cc336f74909aff2f"
+  integrity sha512-trJd3ovpWCvzu4sW0E8rV3FUyIcC0W8G+AZ+VcqzzA890AsWZlUGOTSxIMmIHVusUw/FDq1HFWfy/kC/WTRqSg==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "6.6.1"
+
+workbox-broadcast-update@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.6.1.tgz#0fad9454cf8e4ace0c293e5617c64c75d8a8c61e"
+  integrity sha512-fBhffRdaANdeQ1V8s692R9l/gzvjjRtydBOvR6WCSB0BNE2BacA29Z4r9/RHd9KaXCPl6JTdI9q0bR25YKP8TQ==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-build@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.6.1.tgz#6010e9ce550910156761448f2dbea8cfcf759cb0"
+  integrity sha512-INPgDx6aRycAugUixbKgiEQBWD0MPZqU5r0jyr24CehvNuLPSXp/wGOpdRJmts656lNiXwqV7dC2nzyrzWEDnw==
+  dependencies:
+    "@apideck/better-ajv-errors" "^0.3.1"
+    "@babel/core" "^7.11.1"
+    "@babel/preset-env" "^7.11.0"
+    "@babel/runtime" "^7.11.2"
+    "@rollup/plugin-babel" "^5.2.0"
+    "@rollup/plugin-node-resolve" "^11.2.1"
+    "@rollup/plugin-replace" "^2.4.1"
+    "@surma/rollup-plugin-off-main-thread" "^2.2.3"
+    ajv "^8.6.0"
+    common-tags "^1.8.0"
+    fast-json-stable-stringify "^2.1.0"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    lodash "^4.17.20"
+    pretty-bytes "^5.3.0"
+    rollup "^2.43.1"
+    rollup-plugin-terser "^7.0.0"
+    source-map "^0.8.0-beta.0"
+    stringify-object "^3.3.0"
+    strip-comments "^2.0.1"
+    tempy "^0.6.0"
+    upath "^1.2.0"
+    workbox-background-sync "6.6.1"
+    workbox-broadcast-update "6.6.1"
+    workbox-cacheable-response "6.6.1"
+    workbox-core "6.6.1"
+    workbox-expiration "6.6.1"
+    workbox-google-analytics "6.6.1"
+    workbox-navigation-preload "6.6.1"
+    workbox-precaching "6.6.1"
+    workbox-range-requests "6.6.1"
+    workbox-recipes "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+    workbox-streams "6.6.1"
+    workbox-sw "6.6.1"
+    workbox-window "6.6.1"
+
+workbox-cacheable-response@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.6.1.tgz#284c2b86be3f4fd191970ace8c8e99797bcf58e9"
+  integrity sha512-85LY4veT2CnTCDxaVG7ft3NKaFbH6i4urZXgLiU4AiwvKqS2ChL6/eILiGRYXfZ6gAwDnh5RkuDbr/GMS4KSag==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-core@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.6.1.tgz#7184776d4134c5ed2f086878c882728fc9084265"
+  integrity sha512-ZrGBXjjaJLqzVothoE12qTbVnOAjFrHDXpZe7coCb6q65qI/59rDLwuFMO4PcZ7jcbxY+0+NhUVztzR/CbjEFw==
+
+workbox-expiration@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.6.1.tgz#a841fa36676104426dbfb9da1ef6a630b4f93739"
+  integrity sha512-qFiNeeINndiOxaCrd2DeL1Xh1RFug3JonzjxUHc5WkvkD2u5abY3gZL1xSUNt3vZKsFFGGORItSjVTVnWAZO4A==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "6.6.1"
+
+workbox-google-analytics@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.6.1.tgz#a07a6655ab33d89d1b0b0a935ffa5dea88618c5d"
+  integrity sha512-1TjSvbFSLmkpqLcBsF7FuGqqeDsf+uAXO/pjiINQKg3b1GN0nBngnxLcXDYo1n/XxK4N7RaRrpRlkwjY/3ocuA==
+  dependencies:
+    workbox-background-sync "6.6.1"
+    workbox-core "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+
+workbox-navigation-preload@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.6.1.tgz#61a34fe125558dd88cf09237f11bd966504ea059"
+  integrity sha512-DQCZowCecO+wRoIxJI2V6bXWK6/53ff+hEXLGlQL4Rp9ZaPDLrgV/32nxwWIP7QpWDkVEtllTAK5h6cnhxNxDA==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-precaching@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.6.1.tgz#dedeeba10a2d163d990bf99f1c2066ac0d1a19e2"
+  integrity sha512-K4znSJ7IKxCnCYEdhNkMr7X1kNh8cz+mFgx9v5jFdz1MfI84pq8C2zG+oAoeE5kFrUf7YkT5x4uLWBNg0DVZ5A==
+  dependencies:
+    workbox-core "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+
+workbox-range-requests@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.6.1.tgz#ddaf7e73af11d362fbb2f136a9063a4c7f507a39"
+  integrity sha512-4BDzk28govqzg2ZpX0IFkthdRmCKgAKreontYRC5YsAPB2jDtPNxqx3WtTXgHw1NZalXpcH/E4LqUa9+2xbv1g==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-recipes@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.6.1.tgz#ea70d2b2b0b0bce8de0a9d94f274d4a688e69fae"
+  integrity sha512-/oy8vCSzromXokDA+X+VgpeZJvtuf8SkQ8KL0xmRivMgJZrjwM3c2tpKTJn6PZA6TsbxGs3Sc7KwMoZVamcV2g==
+  dependencies:
+    workbox-cacheable-response "6.6.1"
+    workbox-core "6.6.1"
+    workbox-expiration "6.6.1"
+    workbox-precaching "6.6.1"
+    workbox-routing "6.6.1"
+    workbox-strategies "6.6.1"
+
+workbox-routing@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.6.1.tgz#cba9a1c7e0d1ea11e24b6f8c518840efdc94f581"
+  integrity sha512-j4ohlQvfpVdoR8vDYxTY9rA9VvxTHogkIDwGdJ+rb2VRZQ5vt1CWwUUZBeD/WGFAni12jD1HlMXvJ8JS7aBWTg==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-strategies@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.6.1.tgz#38d0f0fbdddba97bd92e0c6418d0b1a2ccd5b8bf"
+  integrity sha512-WQLXkRnsk4L81fVPkkgon1rZNxnpdO5LsO+ws7tYBC6QQQFJVI6v98klrJEjFtZwzw/mB/HT5yVp7CcX0O+mrw==
+  dependencies:
+    workbox-core "6.6.1"
+
+workbox-streams@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.6.1.tgz#b2f7ba7b315c27a6e3a96a476593f99c5d227d26"
+  integrity sha512-maKG65FUq9e4BLotSKWSTzeF0sgctQdYyTMq529piEN24Dlu9b6WhrAfRpHdCncRS89Zi2QVpW5V33NX8PgH3Q==
+  dependencies:
+    workbox-core "6.6.1"
+    workbox-routing "6.6.1"
+
+workbox-sw@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.6.1.tgz#d4c4ca3125088e8b9fd7a748ed537fa0247bd72c"
+  integrity sha512-R7whwjvU2abHH/lR6kQTTXLHDFU2izht9kJOvBRYK65FbwutT4VvnUAJIgHvfWZ/fokrOPhfoWYoPCMpSgUKHQ==
+
+workbox-webpack-plugin@^6.4.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.1.tgz#4f81cc1ad4e5d2cd7477a86ba83c84ee2d187531"
+  integrity sha512-zpZ+ExFj9NmiI66cFEApyjk7hGsfJ1YMOaLXGXBoZf0v7Iu6hL0ZBe+83mnDq3YYWAfA3fnyFejritjOHkFcrA==
+  dependencies:
+    fast-json-stable-stringify "^2.1.0"
+    pretty-bytes "^5.4.1"
+    upath "^1.2.0"
+    webpack-sources "^1.4.3"
+    workbox-build "6.6.1"
+
+workbox-window@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.6.1.tgz#f22a394cbac36240d0dadcbdebc35f711bb7b89e"
+  integrity sha512-wil4nwOY58nTdCvif/KEZjQ2NP8uk3gGeRNy2jPBbzypU4BT4D9L8xiwbmDBpZlSgJd2xsT9FvSNU0gsxV51JQ==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+    workbox-core "6.6.1"
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+ws@^7.4.6:
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
+ws@^8.13.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
+
+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==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yaml@^2.3.4:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
+
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/flow-typed.config.json b/flow-typed.config.json
new file mode 100644
index 00000000000..10b20000837
--- /dev/null
+++ b/flow-typed.config.json
@@ -0,0 +1,20 @@
+{
+  "env": [
+    "bom",
+    "cssom",
+    "dom",
+    "geometry",
+    "html",
+    "node",
+    "serviceworkers",
+    "streams",
+    "web-animations"
+  ],
+  "ignore": [
+    "create-react-class",
+    "jest",
+    "regenerator-runtime",
+    "webpack",
+    "ws"
+  ]
+}
diff --git a/flow-typed/environments/bom.js b/flow-typed/environments/bom.js
new file mode 100644
index 00000000000..7c082ea5dae
--- /dev/null
+++ b/flow-typed/environments/bom.js
@@ -0,0 +1,2719 @@
+// flow-typed signature: 09630545c584c3b212588a2390c257d0
+// flow-typed version: baae4b8bcc/bom/flow_>=v0.261.x
+
+/* BOM */
+
+declare class Screen {
+  +availHeight: number;
+  +availWidth: number;
+  +availLeft: number;
+  +availTop: number;
+  +top: number;
+  +left: number;
+  +colorDepth: number;
+  +pixelDepth: number;
+  +width: number;
+  +height: number;
+  +orientation?: {
+    lock(): Promise<void>,
+    unlock(): void,
+    angle: number,
+    onchange: () => mixed,
+    type:
+      | 'portrait-primary'
+      | 'portrait-secondary'
+      | 'landscape-primary'
+      | 'landscape-secondary',
+    ...
+  };
+  // deprecated
+  mozLockOrientation?: (orientation: string | Array<string>) => boolean;
+  mozUnlockOrientation?: () => void;
+  mozOrientation?: string;
+  onmozorientationchange?: (...args: any[]) => mixed;
+}
+
+declare var screen: Screen;
+
+declare interface Crypto {
+  // Not using $TypedArray as that would include Float32Array and Float64Array which are not accepted
+  getRandomValues: <
+    T:
+      | Int8Array
+      | Uint8Array
+      | Uint8ClampedArray
+      | Int16Array
+      | Uint16Array
+      | Int32Array
+      | Uint32Array
+      | BigInt64Array
+      | BigUint64Array,
+  >(
+    typedArray: T
+  ) => T;
+  randomUUID: () => string;
+}
+declare var crypto: Crypto;
+
+declare var window: any;
+
+type GamepadButton = {
+  pressed: boolean,
+  value: number,
+  ...
+};
+type GamepadHapticActuator = {
+  type: 'vibration',
+  pulse(value: number, duration: number): Promise<boolean>,
+  ...
+};
+type GamepadPose = {
+  angularAcceleration: null | Float32Array,
+  angularVelocity: null | Float32Array,
+  hasOrientation: boolean,
+  hasPosition: boolean,
+  linearAcceleration: null | Float32Array,
+  linearVelocity: null | Float32Array,
+  orientation: null | Float32Array,
+  position: null | Float32Array,
+  ...
+};
+type Gamepad = {
+  axes: number[],
+  buttons: GamepadButton[],
+  connected: boolean,
+  displayId?: number,
+  hapticActuators?: GamepadHapticActuator[],
+  hand?: '' | 'left' | 'right',
+  id: string,
+  index: number,
+  mapping: string,
+  pose?: null | GamepadPose,
+  timestamp: number,
+  ...
+};
+
+// deprecated
+type BatteryManager = {
+  +charging: boolean,
+  +chargingTime: number,
+  +dischargingTime: number,
+  +level: number,
+  onchargingchange: ?(event: any) => mixed,
+  onchargingtimechange: ?(event: any) => mixed,
+  ondischargingtimechange: ?(event: any) => mixed,
+  onlevelchange: ?(event: any) => mixed,
+  ...
+};
+
+// https://wicg.github.io/web-share
+type ShareData = {
+  title?: string,
+  text?: string,
+  url?: string,
+  ...
+};
+
+type PermissionName =
+  | 'geolocation'
+  | 'notifications'
+  | 'push'
+  | 'midi'
+  | 'camera'
+  | 'microphone'
+  | 'speaker'
+  | 'usb'
+  | 'device-info'
+  | 'background-sync'
+  | 'bluetooth'
+  | 'persistent-storage'
+  | 'ambient-light-sensor'
+  | 'accelerometer'
+  | 'gyroscope'
+  | 'magnetometer'
+  | 'clipboard-read'
+  | 'clipboard-write';
+
+type PermissionState = 'granted' | 'denied' | 'prompt';
+
+type PermissionDescriptor = {|
+  name: PermissionName,
+|};
+
+type DevicePermissionDescriptor = {|
+  deviceId?: string,
+  name: 'camera' | 'microphone' | 'speaker',
+|};
+
+type MidiPermissionDescriptor = {|
+  name: 'midi',
+  sysex?: boolean,
+|};
+
+type PushPermissionDescriptor = {|
+  name: 'push',
+  userVisibleOnly?: boolean,
+|};
+
+type ClipboardPermissionDescriptor = {|
+  name: 'clipboard-read' | 'clipboard-write',
+  allowWithoutGesture: boolean,
+|};
+
+type USBPermissionDescriptor = {|
+  name: 'usb',
+  filters: Array<USBDeviceFilter>,
+  exclusionFilters: Array<USBDeviceFilter>,
+|};
+
+type FileSystemHandlePermissionDescriptor = {|
+  mode: 'read' | 'readwrite',
+|};
+
+declare class PermissionStatus extends EventTarget {
+  onchange: ?(event: any) => mixed;
+  +state: PermissionState;
+}
+
+declare class Permissions {
+  query(
+    permissionDesc:
+      | DevicePermissionDescriptor
+      | MidiPermissionDescriptor
+      | PushPermissionDescriptor
+      | ClipboardPermissionDescriptor
+      | USBPermissionDescriptor
+      | PermissionDescriptor
+  ): Promise<PermissionStatus>;
+}
+
+type MIDIPortType = 'input' | 'output';
+type MIDIPortDeviceState = 'connected' | 'disconnected';
+type MIDIPortConnectionState = 'open' | 'closed' | 'pending';
+
+type MIDIOptions = {|
+  sysex: boolean,
+  software: boolean,
+|};
+
+type MIDIMessageEvent$Init = Event$Init & {
+  data: Uint8Array,
+  ...
+};
+
+declare class MIDIMessageEvent extends Event {
+  constructor(type: string, eventInitDict: MIDIMessageEvent$Init): void;
+  +data: Uint8Array;
+}
+
+type MIDIConnectionEvent$Init = Event$Init & {
+  port: MIDIPort,
+  ...
+};
+
+declare class MIDIConnectionEvent extends Event {
+  constructor(type: string, eventInitDict: MIDIConnectionEvent$Init): void;
+  +port: MIDIPort;
+}
+
+declare class MIDIPort extends EventTarget {
+  +id: string;
+  +manufacturer?: string;
+  +name?: string;
+  +type: MIDIPortType;
+  +version?: string;
+  +state: MIDIPortDeviceState;
+  +connection: MIDIPortConnectionState;
+  onstatechange: ?(ev: MIDIConnectionEvent) => mixed;
+  open(): Promise<MIDIPort>;
+  close(): Promise<MIDIPort>;
+}
+
+declare class MIDIInput extends MIDIPort {
+  onmidimessage: ?(ev: MIDIMessageEvent) => mixed;
+}
+
+declare class MIDIOutput extends MIDIPort {
+  send(data: Iterable<number>, timestamp?: number): void;
+  clear(): void;
+}
+
+declare class MIDIInputMap extends $ReadOnlyMap<string, MIDIInput> {}
+
+declare class MIDIOutputMap extends $ReadOnlyMap<string, MIDIOutput> {}
+
+declare class MIDIAccess extends EventTarget {
+  +inputs: MIDIInputMap;
+  +outputs: MIDIOutputMap;
+  +sysexEnabled: boolean;
+  onstatechange: ?(ev: MIDIConnectionEvent) => mixed;
+}
+
+declare class NavigatorID {
+  appName: 'Netscape';
+  appCodeName: 'Mozilla';
+  product: 'Gecko';
+  appVersion: string;
+  platform: string;
+  userAgent: string;
+}
+
+declare class NavigatorLanguage {
+  +language: string;
+  +languages: $ReadOnlyArray<string>;
+}
+
+declare class NavigatorContentUtils {
+  registerContentHandler(mimeType: string, uri: string, title: string): void;
+  registerProtocolHandler(protocol: string, uri: string, title: string): void;
+}
+
+declare class NavigatorCookies {
+  +cookieEnabled: boolean;
+}
+
+declare class NavigatorPlugins {
+  +plugins: PluginArray;
+  +mimeTypes: MimeTypeArray;
+  javaEnabled(): boolean;
+}
+
+declare class NavigatorOnLine {
+  +onLine: boolean;
+}
+
+declare class NavigatorConcurrentHardware {
+  +hardwareConcurrency: number;
+}
+
+declare class NavigatorStorage {
+  storage?: StorageManager;
+}
+
+declare class StorageManager {
+  persist: () => Promise<boolean>;
+  persisted: () => Promise<boolean>;
+  estimate?: () => Promise<StorageEstimate>;
+  getDirectory: () => Promise<FileSystemDirectoryHandle>;
+}
+
+type StorageManagerRegisteredEndpoint =
+  | 'caches'
+  | 'indexedDB'
+  | 'localStorage'
+  | 'serviceWorkerRegistrations'
+  | 'sessionStorage';
+
+type StorageManagerUsageDetails = {[StorageManagerRegisteredEndpoint]: number};
+
+declare class StorageEstimate {
+  constructor(
+    usage: number,
+    quota: number,
+    usageDetails?: StorageManagerUsageDetails
+  ): void;
+  +usage: number;
+  +quota: number;
+
+  // Not a part of the standard
+  +usageDetails?: StorageManagerUsageDetails;
+}
+
+declare class Navigator
+  mixins
+    NavigatorID,
+    NavigatorLanguage,
+    NavigatorOnLine,
+    NavigatorContentUtils,
+    NavigatorCookies,
+    NavigatorPlugins,
+    NavigatorConcurrentHardware,
+    NavigatorStorage
+{
+  productSub: '20030107' | '20100101';
+  vendor: '' | 'Google Inc.' | 'Apple Computer, Inc';
+  vendorSub: '';
+
+  activeVRDisplays?: VRDisplay[];
+  appCodeName: 'Mozilla';
+  buildID: string;
+  doNotTrack: string | null;
+  geolocation: Geolocation;
+  mediaDevices?: MediaDevices;
+  usb?: USB;
+  maxTouchPoints: number;
+  permissions: Permissions;
+  serviceWorker?: ServiceWorkerContainer;
+  getGamepads?: () => Array<Gamepad | null>;
+  webkitGetGamepads?: Function;
+  mozGetGamepads?: Function;
+  mozGamepads?: any;
+  gamepads?: any;
+  webkitGamepads?: any;
+  getVRDisplays?: () => Promise<VRDisplay[]>;
+  registerContentHandler(mimeType: string, uri: string, title: string): void;
+  registerProtocolHandler(protocol: string, uri: string, title: string): void;
+  requestMIDIAccess?: (options?: MIDIOptions) => Promise<MIDIAccess>;
+  requestMediaKeySystemAccess?: (
+    keySystem: string,
+    supportedConfigurations: any[]
+  ) => Promise<any>;
+  sendBeacon?: (url: string, data?: BodyInit) => boolean;
+  vibrate?: (pattern: number | number[]) => boolean;
+  mozVibrate?: (pattern: number | number[]) => boolean;
+  webkitVibrate?: (pattern: number | number[]) => boolean;
+  canShare?: (shareData?: ShareData) => boolean;
+  share?: (shareData: ShareData) => Promise<void>;
+  clipboard: Clipboard;
+  credentials?: CredMgmtCredentialsContainer;
+  globalPrivacyControl?: boolean;
+
+  // deprecated
+  getBattery?: () => Promise<BatteryManager>;
+  mozGetBattery?: () => Promise<BatteryManager>;
+
+  // deprecated
+  getUserMedia?: Function;
+  webkitGetUserMedia?: Function;
+  mozGetUserMedia?: Function;
+  msGetUserMedia?: Function;
+
+  // Gecko
+  taintEnabled?: () => false;
+  oscpu: string;
+}
+
+declare class Clipboard extends EventTarget {
+  read(): Promise<DataTransfer>;
+  readText(): Promise<string>;
+  write(data: $ReadOnlyArray<ClipboardItem>): Promise<void>;
+  writeText(data: string): Promise<void>;
+}
+
+declare var navigator: Navigator;
+
+declare class MimeType {
+  type: string;
+  description: string;
+  suffixes: string;
+  enabledPlugin: Plugin;
+}
+
+declare class MimeTypeArray {
+  length: number;
+  item(index: number): MimeType;
+  namedItem(name: string): MimeType;
+  [key: number | string]: MimeType;
+}
+
+declare class Plugin {
+  description: string;
+  filename: string;
+  name: string;
+  version?: string; // Gecko only
+  length: number;
+  item(index: number): MimeType;
+  namedItem(name: string): MimeType;
+  [key: number | string]: MimeType;
+}
+
+declare class PluginArray {
+  length: number;
+  item(index: number): Plugin;
+  namedItem(name: string): Plugin;
+  refresh(): void;
+  [key: number | string]: Plugin;
+}
+
+// https://www.w3.org/TR/hr-time-2/#dom-domhighrestimestamp
+// https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
+declare type DOMHighResTimeStamp = number;
+
+// https://www.w3.org/TR/navigation-timing-2/
+declare class PerformanceTiming {
+  connectEnd: number;
+  connectStart: number;
+  domainLookupEnd: number;
+  domainLookupStart: number;
+  domComplete: number;
+  domContentLoadedEventEnd: number;
+  domContentLoadedEventStart: number;
+  domInteractive: number;
+  domLoading: number;
+  fetchStart: number;
+  loadEventEnd: number;
+  loadEventStart: number;
+  navigationStart: number;
+  redirectEnd: number;
+  redirectStart: number;
+  requestStart: number;
+  responseEnd: number;
+  responseStart: number;
+  secureConnectionStart: number;
+  unloadEventEnd: number;
+  unloadEventStart: number;
+}
+
+declare class PerformanceNavigation {
+  TYPE_NAVIGATE: 0;
+  TYPE_RELOAD: 1;
+  TYPE_BACK_FORWARD: 2;
+  TYPE_RESERVED: 255;
+
+  type: 0 | 1 | 2 | 255;
+  redirectCount: number;
+}
+
+type PerformanceEntryFilterOptions = {
+  name: string,
+  entryType: string,
+  initiatorType: string,
+  ...
+};
+
+// https://www.w3.org/TR/performance-timeline-2/
+declare class PerformanceEntry {
+  name: string;
+  entryType: string;
+  startTime: DOMHighResTimeStamp;
+  duration: DOMHighResTimeStamp;
+  toJSON(): string;
+}
+
+// https://w3c.github.io/server-timing/#the-performanceservertiming-interface
+declare class PerformanceServerTiming {
+  description: string;
+  duration: DOMHighResTimeStamp;
+  name: string;
+  toJSON(): string;
+}
+
+// https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming
+// https://w3c.github.io/server-timing/#extension-to-the-performanceresourcetiming-interface
+declare class PerformanceResourceTiming extends PerformanceEntry {
+  initiatorType: string;
+  nextHopProtocol: string;
+  workerStart: number;
+  redirectStart: number;
+  redirectEnd: number;
+  fetchStart: number;
+  domainLookupStart: number;
+  domainLookupEnd: number;
+  connectStart: number;
+  connectEnd: number;
+  secureConnectionStart: number;
+  requestStart: number;
+  responseStart: number;
+  responseEnd: number;
+  transferSize: string;
+  encodedBodySize: number;
+  decodedBodySize: number;
+  serverTiming: Array<PerformanceServerTiming>;
+}
+
+// https://w3c.github.io/event-timing/#sec-performance-event-timing
+declare class PerformanceEventTiming extends PerformanceEntry {
+  processingStart: number;
+  processingEnd: number;
+  cancelable: boolean;
+  target: ?Node;
+  interactionId: number;
+}
+
+// https://w3c.github.io/longtasks/#taskattributiontiming
+declare class TaskAttributionTiming extends PerformanceEntry {
+  containerType: string;
+  containerSrc: string;
+  containerId: string;
+  containerName: string;
+}
+
+// https://w3c.github.io/longtasks/#sec-PerformanceLongTaskTiming
+declare class PerformanceLongTaskTiming extends PerformanceEntry {
+  attribution: $ReadOnlyArray<TaskAttributionTiming>;
+}
+
+// https://www.w3.org/TR/navigation-timing-2/
+declare class PerformanceNavigationTiming extends PerformanceResourceTiming {
+  unloadEventStart: number;
+  unloadEventEnd: number;
+  domInteractive: number;
+  domContentLoadedEventStart: number;
+  domContentLoadedEventEnd: number;
+  domComplete: number;
+  loadEventStart: number;
+  loadEventEnd: number;
+  type: 'navigate' | 'reload' | 'back_forward' | 'prerender';
+  redirectCount: number;
+}
+
+// https://www.w3.org/TR/user-timing/#extensions-performance-interface
+declare type PerformanceMarkOptions = {|
+  detail?: mixed,
+  startTime?: number,
+|};
+
+declare type PerformanceMeasureOptions = {|
+  detail?: mixed,
+  start?: number | string,
+  end?: number | string,
+  duration?: number,
+|};
+
+type EventCountsForEachCallbackType =
+  | (() => void)
+  | ((value: number) => void)
+  | ((value: number, key: string) => void)
+  | ((value: number, key: string, map: Map<string, number>) => void);
+
+// https://www.w3.org/TR/event-timing/#eventcounts
+declare interface EventCounts {
+  size: number;
+
+  entries(): Iterator<[string, number]>;
+  forEach(callback: EventCountsForEachCallbackType): void;
+  get(key: string): ?number;
+  has(key: string): boolean;
+  keys(): Iterator<string>;
+  values(): Iterator<number>;
+}
+
+declare class Performance {
+  eventCounts: EventCounts;
+
+  // deprecated
+  navigation: PerformanceNavigation;
+  timing: PerformanceTiming;
+
+  onresourcetimingbufferfull: (ev: any) => mixed;
+  clearMarks(name?: string): void;
+  clearMeasures(name?: string): void;
+  clearResourceTimings(): void;
+  getEntries(options?: PerformanceEntryFilterOptions): Array<PerformanceEntry>;
+  getEntriesByName(name: string, type?: string): Array<PerformanceEntry>;
+  getEntriesByType(type: string): Array<PerformanceEntry>;
+  mark(name: string, options?: PerformanceMarkOptions): void;
+  measure(
+    name: string,
+    startMarkOrOptions?: string | PerformanceMeasureOptions,
+    endMark?: string
+  ): void;
+  now(): DOMHighResTimeStamp;
+  setResourceTimingBufferSize(maxSize: number): void;
+  toJSON(): string;
+}
+
+declare var performance: Performance;
+
+type PerformanceEntryList = PerformanceEntry[];
+
+declare interface PerformanceObserverEntryList {
+  getEntries(): PerformanceEntryList;
+  getEntriesByType(type: string): PerformanceEntryList;
+  getEntriesByName(name: string, type: ?string): PerformanceEntryList;
+}
+
+type PerformanceObserverInit = {
+  entryTypes?: string[],
+  type?: string,
+  buffered?: boolean,
+  ...
+};
+
+declare class PerformanceObserver {
+  constructor(
+    callback: (
+      entries: PerformanceObserverEntryList,
+      observer: PerformanceObserver
+    ) => mixed
+  ): void;
+
+  observe(options: ?PerformanceObserverInit): void;
+  disconnect(): void;
+  takeRecords(): PerformanceEntryList;
+
+  static supportedEntryTypes: string[];
+}
+
+declare class History {
+  length: number;
+  scrollRestoration: 'auto' | 'manual';
+  state: any;
+  back(): void;
+  forward(): void;
+  go(delta?: number): void;
+  pushState(statedata: any, title: string, url?: string): void;
+  replaceState(statedata: any, title: string, url?: string): void;
+}
+
+declare var history: History;
+
+declare class Location {
+  ancestorOrigins: string[];
+  hash: string;
+  host: string;
+  hostname: string;
+  href: string;
+  origin: string;
+  pathname: string;
+  port: string;
+  protocol: string;
+  search: string;
+  assign(url: string): void;
+  reload(flag?: boolean): void;
+  replace(url: string): void;
+  toString(): string;
+}
+
+declare var location: Location;
+
+///////////////////////////////////////////////////////////////////////////////
+
+declare class DOMParser {
+  parseFromString(source: string | TrustedHTML, mimeType: string): Document;
+}
+
+type FormDataEntryValue = string | File;
+
+declare class FormData {
+  constructor(form?: HTMLFormElement, submitter?: HTMLElement | null): void;
+
+  has(name: string): boolean;
+  get(name: string): ?FormDataEntryValue;
+  getAll(name: string): Array<FormDataEntryValue>;
+
+  set(name: string, value: string): void;
+  set(name: string, value: Blob, filename?: string): void;
+  set(name: string, value: File, filename?: string): void;
+
+  append(name: string, value: string): void;
+  append(name: string, value: Blob, filename?: string): void;
+  append(name: string, value: File, filename?: string): void;
+
+  delete(name: string): void;
+
+  keys(): Iterator<string>;
+  values(): Iterator<FormDataEntryValue>;
+  entries(): Iterator<[string, FormDataEntryValue]>;
+}
+
+declare type IntersectionObserverEntry = {
+  boundingClientRect: DOMRectReadOnly,
+  intersectionRatio: number,
+  intersectionRect: DOMRectReadOnly,
+  isIntersecting: boolean,
+  rootBounds: DOMRectReadOnly,
+  target: Element,
+  time: DOMHighResTimeStamp,
+  ...
+};
+
+declare type IntersectionObserverCallback = (
+  entries: Array<IntersectionObserverEntry>,
+  observer: IntersectionObserver
+) => mixed;
+
+declare type IntersectionObserverOptions = {
+  root?: Node | null,
+  rootMargin?: string,
+  threshold?: number | Array<number>,
+  ...
+};
+
+declare class IntersectionObserver {
+  constructor(
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverOptions
+  ): void;
+  root: Element | null;
+  rootMargin: string;
+  scrollMargin: string;
+  thresholds: number[];
+  observe(target: Element): void;
+  unobserve(target: Element): void;
+  takeRecords(): Array<IntersectionObserverEntry>;
+  disconnect(): void;
+}
+
+declare interface ResizeObserverSize {
+  +inlineSize: number;
+  +blockSize: number;
+}
+
+declare interface ResizeObserverEntry {
+  /**
+   * The Element whose size has changed.
+   */
+  +target: Element;
+  /**
+   * Element's content rect when ResizeObserverCallback is invoked.
+   *
+   * Legacy, may be deprecated in the future.
+   */
+  +contentRect: DOMRectReadOnly;
+  /**
+   * An array containing the Element's border box size when
+   * ResizeObserverCallback is invoked.
+   */
+  +borderBoxSize: $ReadOnlyArray<ResizeObserverSize>;
+  /**
+   * An array containing the Element's content rect size when
+   * ResizeObserverCallback is invoked.
+   */
+  +contentBoxSize: $ReadOnlyArray<ResizeObserverSize>;
+  /**
+   * An array containing the Element's content rect size in integral device
+   * pixels when ResizeObserverCallback is invoked.
+   *
+   * Not implemented in Firefox or Safari as of July 2021
+   */
+  +devicePixelContentBoxSize?: $ReadOnlyArray<ResizeObserverSize> | void;
+}
+
+/**
+ * ResizeObserver can observe different kinds of CSS sizes:
+ * - border-box : size of box border area as defined in CSS2.
+ * - content-box : size of content area as defined in CSS2.
+ * - device-pixel-content-box : size of content area as defined in CSS2, in device
+ *     pixels, before applying any CSS transforms on the element or its ancestors.
+ *     This size must contain integer values.
+ */
+type ResizeObserverBoxOptions =
+  | 'border-box'
+  | 'content-box'
+  | 'device-pixel-content-box';
+
+declare type ResizeObserverOptions = {
+  box?: ResizeObserverBoxOptions,
+  ...
+};
+
+/**
+ * The ResizeObserver interface is used to observe changes to Element's size.
+ */
+declare class ResizeObserver {
+  constructor(
+    callback: (
+      entries: ResizeObserverEntry[],
+      observer: ResizeObserver
+    ) => mixed
+  ): void;
+  /**
+   * Adds target to the list of observed elements.
+   */
+  observe(target: Element, options?: ResizeObserverOptions): void;
+  /**
+   * Removes target from the list of observed elements.
+   */
+  unobserve(target: Element): void;
+  disconnect(): void;
+}
+
+declare class CloseEvent extends Event {
+  code: number;
+  reason: string;
+  wasClean: boolean;
+}
+
+declare class WebSocket extends EventTarget {
+  static CONNECTING: 0;
+  static OPEN: 1;
+  static CLOSING: 2;
+  static CLOSED: 3;
+  constructor(url: string, protocols?: string | Array<string>): void;
+  protocol: string;
+  readyState: number;
+  bufferedAmount: number;
+  extensions: string;
+  onopen: (ev: any) => mixed;
+  onmessage: (ev: MessageEvent<>) => mixed;
+  onclose: (ev: CloseEvent) => mixed;
+  onerror: (ev: any) => mixed;
+  binaryType: 'blob' | 'arraybuffer';
+  url: string;
+  close(code?: number, reason?: string): void;
+  send(data: string): void;
+  send(data: Blob): void;
+  send(data: ArrayBuffer): void;
+  send(data: $ArrayBufferView): void;
+  CONNECTING: 0;
+  OPEN: 1;
+  CLOSING: 2;
+  CLOSED: 3;
+}
+
+type WorkerOptions = {
+  type?: WorkerType,
+  credentials?: CredentialsType,
+  name?: string,
+  ...
+};
+
+declare class Worker extends EventTarget {
+  constructor(
+    stringUrl: string | TrustedScriptURL,
+    workerOptions?: WorkerOptions
+  ): void;
+  onerror: null | ((ev: any) => mixed);
+  onmessage: null | ((ev: MessageEvent<>) => mixed);
+  onmessageerror: null | ((ev: MessageEvent<>) => mixed);
+  postMessage(message: any, ports?: any): void;
+  terminate(): void;
+}
+
+declare class SharedWorker extends EventTarget {
+  constructor(stringUrl: string | TrustedScriptURL, name?: string): void;
+  constructor(
+    stringUrl: string | TrustedScriptURL,
+    workerOptions?: WorkerOptions
+  ): void;
+  port: MessagePort;
+  onerror: (ev: any) => mixed;
+}
+
+declare function importScripts(...urls: Array<string | TrustedScriptURL>): void;
+
+declare class WorkerGlobalScope extends EventTarget {
+  self: this;
+  location: WorkerLocation;
+  navigator: WorkerNavigator;
+  close(): void;
+  importScripts(...urls: Array<string | TrustedScriptURL>): void;
+  onerror: (ev: any) => mixed;
+  onlanguagechange: (ev: any) => mixed;
+  onoffline: (ev: any) => mixed;
+  ononline: (ev: any) => mixed;
+  onrejectionhandled: (ev: PromiseRejectionEvent) => mixed;
+  onunhandledrejection: (ev: PromiseRejectionEvent) => mixed;
+}
+
+declare class DedicatedWorkerGlobalScope extends WorkerGlobalScope {
+  onmessage: (ev: MessageEvent<>) => mixed;
+  onmessageerror: (ev: MessageEvent<>) => mixed;
+  postMessage(message: any, transfer?: Iterable<any>): void;
+}
+
+declare class SharedWorkerGlobalScope extends WorkerGlobalScope {
+  name: string;
+  onconnect: (ev: MessageEvent<>) => mixed;
+}
+
+declare class WorkerLocation {
+  origin: string;
+  protocol: string;
+  host: string;
+  hostname: string;
+  port: string;
+  pathname: string;
+  search: string;
+  hash: string;
+}
+
+declare class WorkerNavigator
+  mixins
+    NavigatorID,
+    NavigatorLanguage,
+    NavigatorOnLine,
+    NavigatorConcurrentHardware,
+    NavigatorStorage
+{
+  permissions: Permissions;
+}
+
+// deprecated
+declare class XDomainRequest {
+  timeout: number;
+  onerror: () => mixed;
+  onload: () => mixed;
+  onprogress: () => mixed;
+  ontimeout: () => mixed;
+  +responseText: string;
+  +contentType: string;
+  open(method: 'GET' | 'POST', url: string): void;
+  abort(): void;
+  send(data?: string): void;
+
+  statics: {create(): XDomainRequest, ...};
+}
+
+declare class XMLHttpRequest extends EventTarget {
+  static LOADING: number;
+  static DONE: number;
+  static UNSENT: number;
+  static OPENED: number;
+  static HEADERS_RECEIVED: number;
+  responseBody: any;
+  status: number;
+  readyState: number;
+  responseText: string;
+  responseXML: any;
+  responseURL: string;
+  ontimeout: ProgressEventHandler;
+  statusText: string;
+  onreadystatechange: (ev: any) => mixed;
+  timeout: number;
+  onload: ProgressEventHandler;
+  response: any;
+  withCredentials: boolean;
+  onprogress: ProgressEventHandler;
+  onabort: ProgressEventHandler;
+  responseType: string;
+  onloadend: ProgressEventHandler;
+  upload: XMLHttpRequestEventTarget;
+  onerror: ProgressEventHandler;
+  onloadstart: ProgressEventHandler;
+  msCaching: string;
+  open(
+    method: string,
+    url: string,
+    async?: boolean,
+    user?: string,
+    password?: string
+  ): void;
+  send(data?: any): void;
+  abort(): void;
+  getAllResponseHeaders(): string;
+  setRequestHeader(header: string, value: string): void;
+  getResponseHeader(header: string): string;
+  msCachingEnabled(): boolean;
+  overrideMimeType(mime: string): void;
+  LOADING: number;
+  DONE: number;
+  UNSENT: number;
+  OPENED: number;
+  HEADERS_RECEIVED: number;
+
+  statics: {create(): XMLHttpRequest, ...};
+}
+
+declare class XMLHttpRequestEventTarget extends EventTarget {
+  onprogress: ProgressEventHandler;
+  onerror: ProgressEventHandler;
+  onload: ProgressEventHandler;
+  ontimeout: ProgressEventHandler;
+  onabort: ProgressEventHandler;
+  onloadstart: ProgressEventHandler;
+  onloadend: ProgressEventHandler;
+}
+
+declare class XMLSerializer {
+  serializeToString(target: Node): string;
+}
+
+declare class Geolocation {
+  getCurrentPosition(
+    success: (position: Position) => mixed,
+    error?: (error: PositionError) => mixed,
+    options?: PositionOptions
+  ): void;
+  watchPosition(
+    success: (position: Position) => mixed,
+    error?: (error: PositionError) => mixed,
+    options?: PositionOptions
+  ): number;
+  clearWatch(id: number): void;
+}
+
+declare class Position {
+  coords: Coordinates;
+  timestamp: number;
+}
+
+declare class Coordinates {
+  latitude: number;
+  longitude: number;
+  altitude?: number;
+  accuracy: number;
+  altitudeAccuracy?: number;
+  heading?: number;
+  speed?: number;
+}
+
+declare class PositionError {
+  code: number;
+  message: string;
+  PERMISSION_DENIED: 1;
+  POSITION_UNAVAILABLE: 2;
+  TIMEOUT: 3;
+}
+
+type PositionOptions = {
+  enableHighAccuracy?: boolean,
+  timeout?: number,
+  maximumAge?: number,
+  ...
+};
+
+type AudioContextState = 'suspended' | 'running' | 'closed';
+
+// deprecated
+type AudioProcessingEvent$Init = Event$Init & {
+  playbackTime: number,
+  inputBuffer: AudioBuffer,
+  outputBuffer: AudioBuffer,
+  ...
+};
+
+// deprecated
+declare class AudioProcessingEvent extends Event {
+  constructor(type: string, eventInitDict: AudioProcessingEvent$Init): void;
+
+  +playbackTime: number;
+  +inputBuffer: AudioBuffer;
+  +outputBuffer: AudioBuffer;
+}
+
+type OfflineAudioCompletionEvent$Init = Event$Init & {
+  renderedBuffer: AudioBuffer,
+  ...
+};
+
+declare class OfflineAudioCompletionEvent extends Event {
+  constructor(
+    type: string,
+    eventInitDict: OfflineAudioCompletionEvent$Init
+  ): void;
+
+  +renderedBuffer: AudioBuffer;
+}
+
+declare class BaseAudioContext extends EventTarget {
+  currentTime: number;
+  destination: AudioDestinationNode;
+  listener: AudioListener;
+  sampleRate: number;
+  state: AudioContextState;
+  onstatechange: (ev: any) => mixed;
+  createBuffer(
+    numOfChannels: number,
+    length: number,
+    sampleRate: number
+  ): AudioBuffer;
+  createBufferSource(myMediaElement?: HTMLMediaElement): AudioBufferSourceNode;
+  createMediaElementSource(
+    myMediaElement: HTMLMediaElement
+  ): MediaElementAudioSourceNode;
+  createMediaStreamSource(stream: MediaStream): MediaStreamAudioSourceNode;
+  createMediaStreamDestination(): MediaStreamAudioDestinationNode;
+
+  // deprecated
+  createScriptProcessor(
+    bufferSize: number,
+    numberOfInputChannels: number,
+    numberOfOutputChannels: number
+  ): ScriptProcessorNode;
+
+  createAnalyser(): AnalyserNode;
+  createBiquadFilter(): BiquadFilterNode;
+  createChannelMerger(numberOfInputs?: number): ChannelMergerNode;
+  createChannelSplitter(numberOfInputs?: number): ChannelSplitterNode;
+  createConstantSource(): ConstantSourceNode;
+  createConvolver(): ConvolverNode;
+  createDelay(maxDelayTime?: number): DelayNode;
+  createDynamicsCompressor(): DynamicsCompressorNode;
+  createGain(): GainNode;
+  createIIRFilter(
+    feedforward: Float32Array,
+    feedback: Float32Array
+  ): IIRFilterNode;
+  createOscillator(): OscillatorNode;
+  createPanner(): PannerNode;
+  createStereoPanner(): StereoPannerNode;
+  createPeriodicWave(
+    real: Float32Array,
+    img: Float32Array,
+    options?: {disableNormalization: boolean, ...}
+  ): PeriodicWave;
+  createStereoPanner(): StereoPannerNode;
+  createWaveShaper(): WaveShaperNode;
+  decodeAudioData(
+    arrayBuffer: ArrayBuffer,
+    decodeSuccessCallback: (decodedData: AudioBuffer) => mixed,
+    decodeErrorCallback: (err: DOMError) => mixed
+  ): void;
+  decodeAudioData(arrayBuffer: ArrayBuffer): Promise<AudioBuffer>;
+}
+
+declare class AudioTimestamp {
+  contextTime: number;
+  performanceTime: number;
+}
+
+declare class AudioContext extends BaseAudioContext {
+  constructor(options?: {|
+    latencyHint?: 'balanced' | 'interactive' | 'playback' | number,
+    sampleRate?: number,
+  |}): AudioContext;
+  baseLatency: number;
+  outputLatency: number;
+  getOutputTimestamp(): AudioTimestamp;
+  resume(): Promise<void>;
+  suspend(): Promise<void>;
+  close(): Promise<void>;
+  createMediaElementSource(
+    myMediaElement: HTMLMediaElement
+  ): MediaElementAudioSourceNode;
+  createMediaStreamSource(
+    myMediaStream: MediaStream
+  ): MediaStreamAudioSourceNode;
+  createMediaStreamTrackSource(
+    myMediaStreamTrack: MediaStreamTrack
+  ): MediaStreamTrackAudioSourceNode;
+  createMediaStreamDestination(): MediaStreamAudioDestinationNode;
+}
+
+declare class OfflineAudioContext extends BaseAudioContext {
+  startRendering(): Promise<AudioBuffer>;
+  suspend(suspendTime: number): Promise<void>;
+  length: number;
+  oncomplete: (ev: OfflineAudioCompletionEvent) => mixed;
+}
+
+declare class AudioNode extends EventTarget {
+  context: AudioContext;
+  numberOfInputs: number;
+  numberOfOutputs: number;
+  channelCount: number;
+  channelCountMode: 'max' | 'clamped-max' | 'explicit';
+  channelInterpretation: 'speakers' | 'discrete';
+  connect(audioNode: AudioNode, output?: number, input?: number): AudioNode;
+  connect(destination: AudioParam, output?: number): void;
+  disconnect(destination?: AudioNode, output?: number, input?: number): void;
+}
+
+declare class AudioParam extends AudioNode {
+  value: number;
+  defaultValue: number;
+  setValueAtTime(value: number, startTime: number): this;
+  linearRampToValueAtTime(value: number, endTime: number): this;
+  exponentialRampToValueAtTime(value: number, endTime: number): this;
+  setTargetAtTime(
+    target: number,
+    startTime: number,
+    timeConstant: number
+  ): this;
+  setValueCurveAtTime(
+    values: Float32Array,
+    startTime: number,
+    duration: number
+  ): this;
+  cancelScheduledValues(startTime: number): this;
+}
+
+declare class AudioDestinationNode extends AudioNode {
+  maxChannelCount: number;
+}
+
+declare class AudioListener extends AudioNode {
+  positionX: AudioParam;
+  positionY: AudioParam;
+  positionZ: AudioParam;
+  forwardX: AudioParam;
+  forwardY: AudioParam;
+  forwardZ: AudioParam;
+  upX: AudioParam;
+  upY: AudioParam;
+  upZ: AudioParam;
+  setPosition(x: number, y: number, c: number): void;
+  setOrientation(
+    x: number,
+    y: number,
+    z: number,
+    xUp: number,
+    yUp: number,
+    zUp: number
+  ): void;
+}
+
+declare class AudioBuffer {
+  sampleRate: number;
+  length: number;
+  duration: number;
+  numberOfChannels: number;
+  getChannelData(channel: number): Float32Array;
+  copyFromChannel(
+    destination: Float32Array,
+    channelNumber: number,
+    startInChannel?: number
+  ): void;
+  copyToChannel(
+    source: Float32Array,
+    channelNumber: number,
+    startInChannel?: number
+  ): void;
+}
+
+declare class AudioBufferSourceNode extends AudioNode {
+  buffer: AudioBuffer;
+  detune: AudioParam;
+  loop: boolean;
+  loopStart: number;
+  loopEnd: number;
+  playbackRate: AudioParam;
+  onended: (ev: any) => mixed;
+  start(when?: number, offset?: number, duration?: number): void;
+  stop(when?: number): void;
+}
+
+declare class CanvasCaptureMediaStream extends MediaStream {
+  canvas: HTMLCanvasElement;
+  requestFrame(): void;
+}
+
+type DoubleRange = {
+  max?: number,
+  min?: number,
+  ...
+};
+
+type LongRange = {
+  max?: number,
+  min?: number,
+  ...
+};
+
+type ConstrainBooleanParameters = {
+  exact?: boolean,
+  ideal?: boolean,
+  ...
+};
+
+type ConstrainDOMStringParameters = {
+  exact?: string | string[],
+  ideal?: string | string[],
+  ...
+};
+
+type ConstrainDoubleRange = {
+  ...DoubleRange,
+  exact?: number,
+  ideal?: number,
+  ...
+};
+
+type ConstrainLongRange = {
+  ...LongRange,
+  exact?: number,
+  ideal?: number,
+  ...
+};
+
+type MediaTrackSupportedConstraints = {|
+  width: boolean,
+  height: boolean,
+  aspectRatio: boolean,
+  frameRate: boolean,
+  facingMode: boolean,
+  resizeMode: boolean,
+  volume: boolean,
+  sampleRate: boolean,
+  sampleSize: boolean,
+  echoCancellation: boolean,
+  autoGainControl: boolean,
+  noiseSuppression: boolean,
+  latency: boolean,
+  channelCount: boolean,
+  deviceId: boolean,
+  groupId: boolean,
+|};
+
+type MediaTrackConstraintSet = {
+  width?: number | ConstrainLongRange,
+  height?: number | ConstrainLongRange,
+  aspectRatio?: number | ConstrainDoubleRange,
+  frameRate?: number | ConstrainDoubleRange,
+  facingMode?: string | string[] | ConstrainDOMStringParameters,
+  resizeMode?: string | string[] | ConstrainDOMStringParameters,
+  volume?: number | ConstrainDoubleRange,
+  sampleRate?: number | ConstrainLongRange,
+  sampleSize?: number | ConstrainLongRange,
+  echoCancellation?: boolean | ConstrainBooleanParameters,
+  autoGainControl?: boolean | ConstrainBooleanParameters,
+  noiseSuppression?: boolean | ConstrainBooleanParameters,
+  latency?: number | ConstrainDoubleRange,
+  channelCount?: number | ConstrainLongRange,
+  deviceId?: string | string[] | ConstrainDOMStringParameters,
+  groupId?: string | string[] | ConstrainDOMStringParameters,
+  ...
+};
+
+type MediaTrackConstraints = {
+  ...MediaTrackConstraintSet,
+  advanced?: Array<MediaTrackConstraintSet>,
+  ...
+};
+
+type DisplayMediaStreamConstraints = {
+  video?: boolean | MediaTrackConstraints,
+  audio?: boolean | MediaTrackConstraints,
+  ...
+};
+
+type MediaStreamConstraints = {
+  audio?: boolean | MediaTrackConstraints,
+  video?: boolean | MediaTrackConstraints,
+  peerIdentity?: string,
+  ...
+};
+
+type MediaTrackSettings = {
+  aspectRatio?: number,
+  deviceId?: string,
+  displaySurface?: 'application' | 'browser' | 'monitor' | 'window',
+  echoCancellation?: boolean,
+  facingMode?: string,
+  frameRate?: number,
+  groupId?: string,
+  height?: number,
+  logicalSurface?: boolean,
+  sampleRate?: number,
+  sampleSize?: number,
+  volume?: number,
+  width?: number,
+  ...
+};
+
+type MediaTrackCapabilities = {
+  aspectRatio?: number | DoubleRange,
+  deviceId?: string,
+  echoCancellation?: boolean[],
+  facingMode?: string,
+  frameRate?: number | DoubleRange,
+  groupId?: string,
+  height?: number | LongRange,
+  sampleRate?: number | LongRange,
+  sampleSize?: number | LongRange,
+  volume?: number | DoubleRange,
+  width?: number | LongRange,
+  ...
+};
+
+declare class MediaDevices extends EventTarget {
+  ondevicechange: (ev: any) => mixed;
+  enumerateDevices: () => Promise<Array<MediaDeviceInfo>>;
+  getSupportedConstraints: () => MediaTrackSupportedConstraints;
+  getDisplayMedia: (
+    constraints?: DisplayMediaStreamConstraints
+  ) => Promise<MediaStream>;
+  getUserMedia: (constraints: MediaStreamConstraints) => Promise<MediaStream>;
+}
+
+declare class MediaDeviceInfo {
+  +deviceId: string;
+  +groupId: string;
+  +kind: 'videoinput' | 'audioinput' | 'audiooutput';
+  +label: string;
+}
+
+type MediaRecorderOptions = {
+  mimeType?: string,
+  audioBitsPerSecond?: number,
+  videoBitsPerSecond?: number,
+  bitsPerSecond?: number,
+  audioBitrateMode?: 'cbr' | 'vbr',
+  ...
+};
+
+declare class MediaRecorder extends EventTarget {
+  constructor(stream: MediaStream, options?: MediaRecorderOptions): void;
+  +stream: MediaStream;
+  +mimeType: string;
+  +state: 'inactive' | 'recording' | 'paused';
+
+  onstart: (ev: any) => mixed;
+  onstop: (ev: any) => mixed;
+  ondataavailable: (ev: any) => mixed;
+  onpause: (ev: any) => mixed;
+  onresume: (ev: any) => mixed;
+  onerror: (ev: any) => mixed;
+
+  +videoBitsPerSecond: number;
+  +audioBitsPerSecond: number;
+  +audioBitrateMode: 'cbr' | 'vbr';
+
+  start(timeslice?: number): void;
+  stop(): void;
+  pause(): void;
+  resume(): void;
+  requestData(): void;
+
+  static isTypeSupported(type: string): boolean;
+}
+
+declare class MediaStream extends EventTarget {
+  active: boolean;
+  ended: boolean;
+  id: string;
+  onactive: (ev: any) => mixed;
+  oninactive: (ev: any) => mixed;
+  onended: (ev: any) => mixed;
+  onaddtrack: (ev: MediaStreamTrackEvent) => mixed;
+  onremovetrack: (ev: MediaStreamTrackEvent) => mixed;
+  addTrack(track: MediaStreamTrack): void;
+  clone(): MediaStream;
+  getAudioTracks(): MediaStreamTrack[];
+  getTrackById(trackid?: string): ?MediaStreamTrack;
+  getTracks(): MediaStreamTrack[];
+  getVideoTracks(): MediaStreamTrack[];
+  removeTrack(track: MediaStreamTrack): void;
+}
+
+declare class MediaStreamTrack extends EventTarget {
+  enabled: boolean;
+  id: string;
+  kind: string;
+  label: string;
+  muted: boolean;
+  readonly: boolean;
+  readyState: 'live' | 'ended';
+  remote: boolean;
+  contentHint?: string;
+  onstarted: (ev: any) => mixed;
+  onmute: (ev: any) => mixed;
+  onunmute: (ev: any) => mixed;
+  onoverconstrained: (ev: any) => mixed;
+  onended: (ev: any) => mixed;
+  getConstraints(): MediaTrackConstraints;
+  applyConstraints(constraints?: MediaTrackConstraints): Promise<void>;
+  getSettings(): MediaTrackSettings;
+  getCapabilities(): MediaTrackCapabilities;
+  clone(): MediaStreamTrack;
+  stop(): void;
+}
+
+declare class MediaStreamTrackEvent extends Event {
+  track: MediaStreamTrack;
+}
+
+declare class MediaElementAudioSourceNode extends AudioNode {}
+declare class MediaStreamAudioSourceNode extends AudioNode {}
+declare class MediaStreamTrackAudioSourceNode extends AudioNode {}
+
+declare class MediaStreamAudioDestinationNode extends AudioNode {
+  stream: MediaStream;
+}
+
+// deprecated
+declare class ScriptProcessorNode extends AudioNode {
+  bufferSize: number;
+  onaudioprocess: (ev: AudioProcessingEvent) => mixed;
+}
+
+declare class AnalyserNode extends AudioNode {
+  fftSize: number;
+  frequencyBinCount: number;
+  minDecibels: number;
+  maxDecibels: number;
+  smoothingTimeConstant: number;
+  getFloatFrequencyData(array: Float32Array): Float32Array;
+  getByteFrequencyData(array: Uint8Array): Uint8Array;
+  getFloatTimeDomainData(array: Float32Array): Float32Array;
+  getByteTimeDomainData(array: Uint8Array): Uint8Array;
+}
+
+declare class BiquadFilterNode extends AudioNode {
+  frequency: AudioParam;
+  detune: AudioParam;
+  Q: AudioParam;
+  gain: AudioParam;
+  type:
+    | 'lowpass'
+    | 'highpass'
+    | 'bandpass'
+    | 'lowshelf'
+    | 'highshelf'
+    | 'peaking'
+    | 'notch'
+    | 'allpass';
+  getFrequencyResponse(
+    frequencyHz: Float32Array,
+    magResponse: Float32Array,
+    phaseResponse: Float32Array
+  ): void;
+}
+
+declare class ChannelMergerNode extends AudioNode {}
+declare class ChannelSplitterNode extends AudioNode {}
+
+type ConstantSourceOptions = {offset?: number, ...};
+declare class ConstantSourceNode extends AudioNode {
+  constructor(context: BaseAudioContext, options?: ConstantSourceOptions): void;
+  offset: AudioParam;
+  onended: (ev: any) => mixed;
+  start(when?: number): void;
+  stop(when?: number): void;
+}
+
+declare class ConvolverNode extends AudioNode {
+  buffer: AudioBuffer;
+  normalize: boolean;
+}
+
+declare class DelayNode extends AudioNode {
+  delayTime: number;
+}
+
+declare class DynamicsCompressorNode extends AudioNode {
+  threshold: AudioParam;
+  knee: AudioParam;
+  ratio: AudioParam;
+  reduction: AudioParam;
+  attack: AudioParam;
+  release: AudioParam;
+}
+
+declare class GainNode extends AudioNode {
+  gain: AudioParam;
+}
+
+declare class IIRFilterNode extends AudioNode {
+  getFrequencyResponse(
+    frequencyHz: Float32Array,
+    magResponse: Float32Array,
+    phaseResponse: Float32Array
+  ): void;
+}
+
+declare class OscillatorNode extends AudioNode {
+  frequency: AudioParam;
+  detune: AudioParam;
+  type: 'sine' | 'square' | 'sawtooth' | 'triangle' | 'custom';
+  start(when?: number): void;
+  stop(when?: number): void;
+  setPeriodicWave(periodicWave: PeriodicWave): void;
+  onended: (ev: any) => mixed;
+}
+
+declare class StereoPannerNode extends AudioNode {
+  pan: AudioParam;
+}
+
+declare class PannerNode extends AudioNode {
+  panningModel: 'equalpower' | 'HRTF';
+  distanceModel: 'linear' | 'inverse' | 'exponential';
+  refDistance: number;
+  maxDistance: number;
+  rolloffFactor: number;
+  coneInnerAngle: number;
+  coneOuterAngle: number;
+  coneOuterGain: number;
+  setPosition(x: number, y: number, z: number): void;
+  setOrientation(x: number, y: number, z: number): void;
+}
+
+declare class PeriodicWave extends AudioNode {}
+declare class WaveShaperNode extends AudioNode {
+  curve: Float32Array;
+  oversample: 'none' | '2x' | '4x';
+}
+
+// this part of spec is not finished yet, apparently
+// https://stackoverflow.com/questions/35296664/can-fetch-get-object-as-headers
+type HeadersInit =
+  | Headers
+  | Array<[string, string]>
+  | {[key: string]: string, ...};
+
+// TODO Heades and URLSearchParams are almost the same thing.
+// Could it somehow be abstracted away?
+declare class Headers {
+  @@iterator(): Iterator<[string, string]>;
+  constructor(init?: HeadersInit): void;
+  append(name: string, value: string): void;
+  delete(name: string): void;
+  entries(): Iterator<[string, string]>;
+  forEach<This>(
+    callback: (
+      this: This,
+      value: string,
+      name: string,
+      headers: Headers
+    ) => mixed,
+    thisArg: This
+  ): void;
+  get(name: string): null | string;
+  has(name: string): boolean;
+  keys(): Iterator<string>;
+  set(name: string, value: string): void;
+  values(): Iterator<string>;
+}
+
+declare class URLSearchParams {
+  @@iterator(): Iterator<[string, string]>;
+
+  size: number;
+
+  constructor(
+    init?:
+      | string
+      | URLSearchParams
+      | Array<[string, string]>
+      | {[string]: string, ...}
+  ): void;
+  append(name: string, value: string): void;
+  delete(name: string, value?: string): void;
+  entries(): Iterator<[string, string]>;
+  forEach<This>(
+    callback: (
+      this: This,
+      value: string,
+      name: string,
+      params: URLSearchParams
+    ) => mixed,
+    thisArg: This
+  ): void;
+  get(name: string): null | string;
+  getAll(name: string): Array<string>;
+  has(name: string, value?: string): boolean;
+  keys(): Iterator<string>;
+  set(name: string, value: string): void;
+  sort(): void;
+  values(): Iterator<string>;
+  toString(): string;
+}
+
+type CacheType =
+  | 'default'
+  | 'no-store'
+  | 'reload'
+  | 'no-cache'
+  | 'force-cache'
+  | 'only-if-cached';
+type CredentialsType = 'omit' | 'same-origin' | 'include';
+type ModeType = 'cors' | 'no-cors' | 'same-origin' | 'navigate';
+type RedirectType = 'follow' | 'error' | 'manual';
+type ReferrerPolicyType =
+  | ''
+  | 'no-referrer'
+  | 'no-referrer-when-downgrade'
+  | 'same-origin'
+  | 'origin'
+  | 'strict-origin'
+  | 'origin-when-cross-origin'
+  | 'strict-origin-when-cross-origin'
+  | 'unsafe-url';
+
+type ResponseType =
+  | 'basic'
+  | 'cors'
+  | 'default'
+  | 'error'
+  | 'opaque'
+  | 'opaqueredirect';
+
+type BodyInit =
+  | string
+  | URLSearchParams
+  | FormData
+  | Blob
+  | ArrayBuffer
+  | $ArrayBufferView
+  | ReadableStream;
+
+type RequestInfo = Request | URL | string;
+
+type RequestOptions = {
+  body?: ?BodyInit,
+  cache?: CacheType,
+  credentials?: CredentialsType,
+  headers?: HeadersInit,
+  integrity?: string,
+  keepalive?: boolean,
+  method?: string,
+  mode?: ModeType,
+  redirect?: RedirectType,
+  referrer?: string,
+  referrerPolicy?: ReferrerPolicyType,
+  signal?: ?AbortSignal,
+  window?: any,
+  ...
+};
+
+type ResponseOptions = {
+  status?: number,
+  statusText?: string,
+  headers?: HeadersInit,
+  ...
+};
+
+declare class Response {
+  constructor(input?: ?BodyInit, init?: ResponseOptions): void;
+  clone(): Response;
+  static error(): Response;
+  static redirect(url: string, status?: number): Response;
+
+  redirected: boolean;
+  type: ResponseType;
+  url: string;
+  ok: boolean;
+  status: number;
+  statusText: string;
+  headers: Headers;
+  trailer: Promise<Headers>;
+
+  // Body methods and attributes
+  bodyUsed: boolean;
+  body: ?ReadableStream;
+
+  arrayBuffer(): Promise<ArrayBuffer>;
+  blob(): Promise<Blob>;
+  formData(): Promise<FormData>;
+  json(): Promise<any>;
+  text(): Promise<string>;
+}
+
+declare class Request {
+  constructor(input: RequestInfo, init?: RequestOptions): void;
+  clone(): Request;
+
+  url: string;
+
+  cache: CacheType;
+  credentials: CredentialsType;
+  headers: Headers;
+  integrity: string;
+  method: string;
+  mode: ModeType;
+  redirect: RedirectType;
+  referrer: string;
+  referrerPolicy: ReferrerPolicyType;
+  +signal: AbortSignal;
+
+  // Body methods and attributes
+  bodyUsed: boolean;
+
+  arrayBuffer(): Promise<ArrayBuffer>;
+  blob(): Promise<Blob>;
+  formData(): Promise<FormData>;
+  json(): Promise<any>;
+  text(): Promise<string>;
+}
+
+declare function fetch(
+  input: RequestInfo,
+  init?: RequestOptions
+): Promise<Response>;
+
+type TextEncoder$availableEncodings =
+  | 'utf-8'
+  | 'utf8'
+  | 'unicode-1-1-utf-8'
+  | 'utf-16be'
+  | 'utf-16'
+  | 'utf-16le';
+
+declare class TextEncoder {
+  constructor(encoding?: TextEncoder$availableEncodings): void;
+  encode(buffer: string, options?: {stream: boolean, ...}): Uint8Array;
+  encoding: TextEncoder$availableEncodings;
+}
+
+type TextDecoder$availableEncodings =
+  | '866'
+  | 'ansi_x3.4-1968'
+  | 'arabic'
+  | 'ascii'
+  | 'asmo-708'
+  | 'big5-hkscs'
+  | 'big5'
+  | 'chinese'
+  | 'cn-big5'
+  | 'cp1250'
+  | 'cp1251'
+  | 'cp1252'
+  | 'cp1253'
+  | 'cp1254'
+  | 'cp1255'
+  | 'cp1256'
+  | 'cp1257'
+  | 'cp1258'
+  | 'cp819'
+  | 'cp866'
+  | 'csbig5'
+  | 'cseuckr'
+  | 'cseucpkdfmtjapanese'
+  | 'csgb2312'
+  | 'csibm866'
+  | 'csiso2022jp'
+  | 'csiso2022kr'
+  | 'csiso58gb231280'
+  | 'csiso88596e'
+  | 'csiso88596i'
+  | 'csiso88598e'
+  | 'csiso88598i'
+  | 'csisolatin1'
+  | 'csisolatin2'
+  | 'csisolatin3'
+  | 'csisolatin4'
+  | 'csisolatin5'
+  | 'csisolatin6'
+  | 'csisolatin9'
+  | 'csisolatinarabic'
+  | 'csisolatincyrillic'
+  | 'csisolatingreek'
+  | 'csisolatinhebrew'
+  | 'cskoi8r'
+  | 'csksc56011987'
+  | 'csmacintosh'
+  | 'csshiftjis'
+  | 'cyrillic'
+  | 'dos-874'
+  | 'ecma-114'
+  | 'ecma-118'
+  | 'elot_928'
+  | 'euc-jp'
+  | 'euc-kr'
+  | 'gb_2312-80'
+  | 'gb_2312'
+  | 'gb18030'
+  | 'gb2312'
+  | 'gbk'
+  | 'greek'
+  | 'greek8'
+  | 'hebrew'
+  | 'hz-gb-2312'
+  | 'ibm819'
+  | 'ibm866'
+  | 'iso_8859-1:1987'
+  | 'iso_8859-1'
+  | 'iso_8859-2:1987'
+  | 'iso_8859-2'
+  | 'iso_8859-3:1988'
+  | 'iso_8859-3'
+  | 'iso_8859-4:1988'
+  | 'iso_8859-4'
+  | 'iso_8859-5:1988'
+  | 'iso_8859-5'
+  | 'iso_8859-6:1987'
+  | 'iso_8859-6'
+  | 'iso_8859-7:1987'
+  | 'iso_8859-7'
+  | 'iso_8859-8:1988'
+  | 'iso_8859-8'
+  | 'iso_8859-9:1989'
+  | 'iso_8859-9'
+  | 'iso-2022-cn-ext'
+  | 'iso-2022-cn'
+  | 'iso-2022-jp'
+  | 'iso-2022-kr'
+  | 'iso-8859-1'
+  | 'iso-8859-10'
+  | 'iso-8859-11'
+  | 'iso-8859-13'
+  | 'iso-8859-14'
+  | 'iso-8859-15'
+  | 'iso-8859-16'
+  | 'iso-8859-2'
+  | 'iso-8859-3'
+  | 'iso-8859-4'
+  | 'iso-8859-5'
+  | 'iso-8859-6-e'
+  | 'iso-8859-6-i'
+  | 'iso-8859-6'
+  | 'iso-8859-7'
+  | 'iso-8859-8-e'
+  | 'iso-8859-8-i'
+  | 'iso-8859-8'
+  | 'iso-8859-9'
+  | 'iso-ir-100'
+  | 'iso-ir-101'
+  | 'iso-ir-109'
+  | 'iso-ir-110'
+  | 'iso-ir-126'
+  | 'iso-ir-127'
+  | 'iso-ir-138'
+  | 'iso-ir-144'
+  | 'iso-ir-148'
+  | 'iso-ir-149'
+  | 'iso-ir-157'
+  | 'iso-ir-58'
+  | 'iso8859-1'
+  | 'iso8859-10'
+  | 'iso8859-11'
+  | 'iso8859-13'
+  | 'iso8859-14'
+  | 'iso8859-15'
+  | 'iso8859-2'
+  | 'iso8859-3'
+  | 'iso8859-4'
+  | 'iso8859-6'
+  | 'iso8859-7'
+  | 'iso8859-8'
+  | 'iso8859-9'
+  | 'iso88591'
+  | 'iso885910'
+  | 'iso885911'
+  | 'iso885913'
+  | 'iso885914'
+  | 'iso885915'
+  | 'iso88592'
+  | 'iso88593'
+  | 'iso88594'
+  | 'iso88595'
+  | 'iso88596'
+  | 'iso88597'
+  | 'iso88598'
+  | 'iso88599'
+  | 'koi'
+  | 'koi8_r'
+  | 'koi8-r'
+  | 'koi8-u'
+  | 'koi8'
+  | 'korean'
+  | 'ks_c_5601-1987'
+  | 'ks_c_5601-1989'
+  | 'ksc_5601'
+  | 'ksc5601'
+  | 'l1'
+  | 'l2'
+  | 'l3'
+  | 'l4'
+  | 'l5'
+  | 'l6'
+  | 'l9'
+  | 'latin1'
+  | 'latin2'
+  | 'latin3'
+  | 'latin4'
+  | 'latin5'
+  | 'latin6'
+  | 'latin9'
+  | 'logical'
+  | 'mac'
+  | 'macintosh'
+  | 'ms_kanji'
+  | 'shift_jis'
+  | 'shift-jis'
+  | 'sjis'
+  | 'sun_eu_greek'
+  | 'tis-620'
+  | 'unicode-1-1-utf-8'
+  | 'us-ascii'
+  | 'utf-16'
+  | 'utf-16be'
+  | 'utf-16le'
+  | 'utf-8'
+  | 'utf8'
+  | 'visual'
+  | 'windows-1250'
+  | 'windows-1251'
+  | 'windows-1252'
+  | 'windows-1253'
+  | 'windows-1254'
+  | 'windows-1255'
+  | 'windows-1256'
+  | 'windows-1257'
+  | 'windows-1258'
+  | 'windows-31j'
+  | 'windows-874'
+  | 'windows-949'
+  | 'x-cp1250'
+  | 'x-cp1251'
+  | 'x-cp1252'
+  | 'x-cp1253'
+  | 'x-cp1254'
+  | 'x-cp1255'
+  | 'x-cp1256'
+  | 'x-cp1257'
+  | 'x-cp1258'
+  | 'x-euc-jp'
+  | 'x-gbk'
+  | 'x-mac-cyrillic'
+  | 'x-mac-roman'
+  | 'x-mac-ukrainian'
+  | 'x-sjis'
+  | 'x-user-defined'
+  | 'x-x-big5';
+
+declare class TextDecoder {
+  constructor(
+    encoding?: TextDecoder$availableEncodings,
+    options?: {fatal: boolean, ...}
+  ): void;
+  encoding: TextDecoder$availableEncodings;
+  fatal: boolean;
+  ignoreBOM: boolean;
+  decode(
+    buffer?: ArrayBuffer | $ArrayBufferView,
+    options?: {stream: boolean, ...}
+  ): string;
+}
+
+declare class TextDecoderStream {
+  constructor(
+    encoding?: TextDecoder$availableEncodings,
+    options?: {fatal?: boolean, ignoreBOM?: boolean, ...}
+  ): void;
+  encoding: TextDecoder$availableEncodings;
+  fatal: boolean;
+  ignoreBOM: boolean;
+  readable: ReadableStream;
+  writable: WritableStream;
+}
+
+declare class MessagePort extends EventTarget {
+  postMessage(message: any, transfer?: Iterable<any>): void;
+  start(): void;
+  close(): void;
+
+  onmessage: null | ((ev: MessageEvent<>) => mixed);
+  onmessageerror: null | ((ev: MessageEvent<>) => mixed);
+}
+
+declare class MessageChannel {
+  port1: MessagePort;
+  port2: MessagePort;
+}
+
+declare class VRDisplay extends EventTarget {
+  capabilities: VRDisplayCapabilities;
+  depthFar: number;
+  depthNear: number;
+  displayId: number;
+  displayName: string;
+  isPresenting: boolean;
+  stageParameters: null | VRStageParameters;
+
+  cancelAnimationFrame(number): void;
+  exitPresent(): Promise<void>;
+  getEyeParameters(VREye): VREyeParameters;
+  getFrameData(VRFrameData): boolean;
+  getLayers(): VRLayerInit[];
+  requestAnimationFrame(cb: (number) => mixed): number;
+  requestPresent(VRLayerInit[]): Promise<void>;
+  submitFrame(): void;
+}
+
+type VRSource = HTMLCanvasElement;
+
+type VRLayerInit = {
+  leftBounds?: number[],
+  rightBounds?: number[],
+  source?: null | VRSource,
+  ...
+};
+
+type VRDisplayCapabilities = {
+  canPresent: boolean,
+  hasExternalDisplay: boolean,
+  hasPosition: boolean,
+  maxLayers: number,
+  ...
+};
+
+type VREye = 'left' | 'right';
+
+type VRPose = {
+  angularAcceleration?: Float32Array,
+  angularVelocity?: Float32Array,
+  linearAcceleration?: Float32Array,
+  linearVelocity?: Float32Array,
+  orientation?: Float32Array,
+  position?: Float32Array,
+  ...
+};
+
+declare class VRFrameData {
+  leftProjectionMatrix: Float32Array;
+  leftViewMatrix: Float32Array;
+  pose: VRPose;
+  rightProjectionMatrix: Float32Array;
+  rightViewMatrix: Float32Array;
+  timestamp: number;
+}
+
+type VREyeParameters = {
+  offset: Float32Array,
+  renderWidth: number,
+  renderHeight: number,
+  ...
+};
+
+type VRStageParameters = {
+  sittingToStandingTransform: Float32Array,
+  sizeX: number,
+  sizeZ: number,
+  ...
+};
+
+type VRDisplayEventReason =
+  | 'mounted'
+  | 'navigation'
+  | 'requested'
+  | 'unmounted';
+
+type VRDisplayEventInit = {
+  display: VRDisplay,
+  reason: VRDisplayEventReason,
+  ...
+};
+
+declare class VRDisplayEvent extends Event {
+  constructor(type: string, eventInitDict: VRDisplayEventInit): void;
+  display: VRDisplay;
+  reason?: VRDisplayEventReason;
+}
+
+declare class MediaQueryListEvent {
+  matches: boolean;
+  media: string;
+}
+
+declare type MediaQueryListListener = (MediaQueryListEvent) => void;
+
+declare class MediaQueryList extends EventTarget {
+  matches: boolean;
+  media: string;
+  addListener: MediaQueryListListener => void;
+  removeListener: MediaQueryListListener => void;
+  onchange: MediaQueryListListener;
+}
+
+declare var matchMedia: string => MediaQueryList;
+
+// https://w3c.github.io/webappsec-credential-management/#idl-index
+declare type CredMgmtCredentialRequestOptions = {
+  mediation?: 'silent' | 'optional' | 'required',
+  signal?: AbortSignal,
+  ...
+};
+
+declare type CredMgmtCredentialCreationOptions = {signal: AbortSignal, ...};
+
+declare interface CredMgmtCredential {
+  id: string;
+  type: string;
+}
+
+declare interface CredMgmtPasswordCredential extends CredMgmtCredential {
+  password: string;
+}
+
+declare interface CredMgmtCredentialsContainer {
+  get(option?: CredMgmtCredentialRequestOptions): Promise<?CredMgmtCredential>;
+  store(credential: CredMgmtCredential): Promise<CredMgmtCredential>;
+  create(
+    creationOption?: CredMgmtCredentialCreationOptions
+  ): Promise<?CredMgmtCredential>;
+  preventSilentAccess(): Promise<void>;
+}
+
+type SpeechSynthesisErrorCode =
+  | 'canceled'
+  | 'interrupted'
+  | 'audio-busy'
+  | 'audio-hardware'
+  | 'network'
+  | 'synthesis-unavailable'
+  | 'synthesis-failed'
+  | 'language-unavailable'
+  | 'voice-unavailable'
+  | 'text-too-long'
+  | 'invalid-argument'
+  | 'not-allowed';
+
+declare class SpeechSynthesis extends EventTarget {
+  +pending: boolean;
+  +speaking: boolean;
+  +paused: boolean;
+
+  onvoiceschanged: ?(ev: Event) => mixed;
+
+  speak(utterance: SpeechSynthesisUtterance): void;
+  cancel(): void;
+  pause(): void;
+  resume(): void;
+  getVoices(): Array<SpeechSynthesisVoice>;
+}
+
+declare var speechSynthesis: SpeechSynthesis;
+
+declare class SpeechSynthesisUtterance extends EventTarget {
+  constructor(text?: string): void;
+
+  text: string;
+  lang: string;
+  voice: SpeechSynthesisVoice | null;
+  volume: number;
+  rate: number;
+  pitch: number;
+
+  onstart: ?(ev: SpeechSynthesisEvent) => mixed;
+  onend: ?(ev: SpeechSynthesisEvent) => mixed;
+  onerror: ?(ev: SpeechSynthesisErrorEvent) => mixed;
+  onpause: ?(ev: SpeechSynthesisEvent) => mixed;
+  onresume: ?(ev: SpeechSynthesisEvent) => mixed;
+  onmark: ?(ev: SpeechSynthesisEvent) => mixed;
+  onboundary: ?(ev: SpeechSynthesisEvent) => mixed;
+}
+
+type SpeechSynthesisEvent$Init = Event$Init & {
+  utterance: SpeechSynthesisUtterance,
+  charIndex?: number,
+  charLength?: number,
+  elapsedTime?: number,
+  name?: string,
+  ...
+};
+
+declare class SpeechSynthesisEvent extends Event {
+  constructor(type: string, eventInitDict?: SpeechSynthesisEvent$Init): void;
+
+  +utterance: SpeechSynthesisUtterance;
+  charIndex: number;
+  charLength: number;
+  elapsedTime: number;
+  name: string;
+}
+
+type SpeechSynthesisErrorEvent$Init = SpeechSynthesisEvent$Init & {
+  error: SpeechSynthesisErrorCode,
+  ...
+};
+
+declare class SpeechSynthesisErrorEvent extends SpeechSynthesisEvent {
+  constructor(
+    type: string,
+    eventInitDict?: SpeechSynthesisErrorEvent$Init
+  ): void;
+  +error: SpeechSynthesisErrorCode;
+}
+
+declare class SpeechSynthesisVoice {
+  +voiceURI: string;
+  +name: string;
+  +lang: string;
+  +localService: boolean;
+  +default: boolean;
+}
+
+type SpeechRecognitionErrorCode =
+  | 'no-speech'
+  | 'aborted'
+  | 'audio-capture'
+  | 'not-allowed'
+  | 'service-not-allowed'
+  | 'bad-grammar'
+  | 'language-not-supported';
+
+declare class SpeechGrammar {
+  constructor(): void;
+
+  src: string;
+  weight?: number;
+}
+
+declare class SpeechGrammarList {
+  +length: number;
+
+  item(index: number): SpeechGrammar;
+  addFromURI(src: string, weight?: number): void;
+  addFromString(string: string, weight?: number): void;
+}
+
+declare class SpeechRecognitionAlternative {
+  +transcript: string;
+  +confidence: number;
+}
+
+declare class SpeechRecognitionResult {
+  +isFinal: boolean;
+  +length: number;
+
+  item(index: number): SpeechRecognitionAlternative;
+}
+
+declare class SpeechRecognitionResultList {
+  +length: number;
+
+  item(index: number): SpeechRecognitionResult;
+}
+
+type SpeechRecognitionEvent$Init = Event$Init & {
+  emma: any,
+  interpretation: any,
+  resultIndex: number,
+  results: SpeechRecognitionResultList,
+  ...
+};
+
+declare class SpeechRecognitionEvent extends Event {
+  constructor(type: string, eventInitDict?: SpeechRecognitionEvent$Init): void;
+
+  +emma: any;
+  +interpretation: any;
+  +resultIndex: number;
+  +results: SpeechRecognitionResultList;
+}
+
+type SpeechRecognitionErrorEvent$Init = SpeechRecognitionEvent$Init & {
+  error: SpeechRecognitionErrorCode,
+  ...
+};
+
+declare class SpeechRecognitionErrorEvent extends SpeechRecognitionEvent {
+  constructor(
+    type: string,
+    eventInitDict?: SpeechRecognitionErrorEvent$Init
+  ): void;
+  +error: SpeechRecognitionErrorCode;
+  +message: string;
+}
+
+declare class SpeechRecognition extends EventTarget {
+  constructor(): void;
+
+  +grammars: SpeechGrammar[];
+  +lang: string;
+  +continuous: boolean;
+  +interimResults: boolean;
+  +maxAlternatives: number;
+  +serviceURI: string;
+
+  onaudiostart: ?(ev: Event) => mixed;
+  onaudioend: ?(ev: Event) => mixed;
+  onend: ?(ev: Event) => mixed;
+  onerror: ?(ev: Event) => mixed;
+  onnomatch: ?(ev: Event) => mixed;
+  onsoundstart: ?(ev: Event) => mixed;
+  onsoundend: ?(ev: Event) => mixed;
+  onspeechstart: ?(ev: Event) => mixed;
+  onspeechend: ?(ev: Event) => mixed;
+  onstart: ?(ev: Event) => mixed;
+
+  abort(): void;
+  start(): void;
+  stop(): void;
+}
+
+/* Trusted Types
+ * https://w3c.github.io/trusted-types/dist/spec/#trusted-types
+ */
+declare class TrustedHTML {
+  toString(): string;
+  toJSON(): string;
+}
+
+declare class TrustedScript {
+  toString(): string;
+  toJSON(): string;
+}
+
+declare class TrustedScriptURL {
+  toString(): string;
+  toJSON(): string;
+}
+
+declare class TrustedTypePolicy {
+  +name: string;
+  createHTML(input: string, ...args: Array<mixed>): TrustedHTML;
+  createScript(input: string, ...args: Array<mixed>): TrustedScript;
+  createScriptURL(input: string, ...args: Array<mixed>): TrustedScriptURL;
+}
+
+declare type TrustedTypePolicyOptions = {|
+  createHTML?: (string, ...args: Array<mixed>) => string,
+  createScript?: (string, ...args: Array<mixed>) => string,
+  createScriptURL?: (string, ...args: Array<mixed>) => string,
+|};
+
+// window.trustedTypes?: TrustedTypePolicyFactory
+declare class TrustedTypePolicyFactory {
+  +emptyHTML: TrustedHTML;
+  +emptyScript: TrustedScript;
+  +defaultPolicy: ?TrustedTypePolicy;
+  +isHTML: (value: mixed) => value is TrustedHTML;
+  +isScript: (value: mixed) => value is TrustedScript;
+  +isScriptURL: (value: mixed) => value is TrustedScriptURL;
+  createPolicy(
+    policyName: string,
+    policyOptions?: TrustedTypePolicyOptions
+  ): TrustedTypePolicy;
+  getAttributeType(
+    tagName: string,
+    attribute?: string,
+    elementNS?: string,
+    attrNS?: string
+  ): null | string;
+  getPropertyType(
+    tagName: string,
+    property: string,
+    elementNS?: string
+  ): null | string;
+}
+
+// https://wicg.github.io/webusb/
+// https://developer.mozilla.org/en-US/docs/Web/API/USBDevice
+declare class USBDevice {
+  configuration: USBConfiguration;
+  configurations: Array<USBConfiguration>;
+  deviceClass: number;
+  deviceProtocol: number;
+  deviceSubclass: number;
+  deviceVersionMajor: number;
+  deviceVersionMinor: number;
+  deviceVersionSubminor: number;
+  manufacturerName: ?string;
+  opened: boolean;
+  productId: number;
+  productName: ?string;
+  serialNumber: ?string;
+  usbVersionMajor: number;
+  usbVersionMinor: number;
+  usbVersionSubminor: number;
+  vendorId: number;
+  claimInterface(interfaceNumber: number): Promise<void>;
+  clearHalt(direction: 'in' | 'out', endpointNumber: number): Promise<void>;
+  close(): Promise<void>;
+  controlTransferIn(
+    setup: SetUpOptions,
+    length: number
+  ): Promise<USBInTransferResult>;
+  controlTransferOut(
+    setup: SetUpOptions,
+    data: ArrayBuffer
+  ): Promise<USBOutTransferResult>;
+  forget(): Promise<void>;
+  isochronousTransferIn(
+    endpointNumber: number,
+    packetLengths: Array<number>
+  ): Promise<USBIsochronousInTransferResult>;
+  isochronousTransferOut(
+    endpointNumber: number,
+    data: ArrayBuffer,
+    packetLengths: Array<number>
+  ): Promise<USBIsochronousOutTransferResult>;
+  open(): Promise<void>;
+  releaseInterface(interfaceNumber: number): Promise<void>;
+  reset(): Promise<void>;
+  selectAlternateInterface(
+    interfaceNumber: number,
+    alternateSetting: number
+  ): Promise<void>;
+  selectConfiguration(configurationValue: number): Promise<void>;
+  transferIn(
+    endpointNumber: number,
+    length: number
+  ): Promise<USBInTransferResult>;
+  transferOut(
+    endpointNumber: number,
+    data: ArrayBuffer
+  ): Promise<USBOutTransferResult>;
+}
+
+declare class USB extends EventTarget {
+  getDevices(): Promise<Array<USBDevice>>;
+  requestDevice(options: USBDeviceRequestOptions): Promise<USBDevice>;
+}
+
+declare type USBDeviceFilter = {|
+  vendorId?: number,
+  productId?: number,
+  classCode?: number,
+  subclassCode?: number,
+  protocolCode?: number,
+  serialNumber?: string,
+|};
+
+declare type USBDeviceRequestOptions = {|
+  filters: Array<USBDeviceFilter>,
+  exclusionFilters?: Array<USBDeviceFilter>,
+|};
+
+declare class USBConfiguration {
+  constructor(): void;
+  configurationName: ?string;
+  configurationValue: number;
+  interfaces: $ReadOnlyArray<USBInterface>;
+}
+
+declare class USBInterface {
+  constructor(): void;
+  interfaceNumber: number;
+  alternate: USBAlternateInterface;
+  alternates: Array<USBAlternateInterface>;
+  claimed: boolean;
+}
+
+declare class USBAlternateInterface {
+  constructor(): void;
+  alternateSetting: number;
+  interfaceClass: number;
+  interfaceSubclass: number;
+  interfaceProtocol: number;
+  interfaceName: ?string;
+  endpoints: Array<USBEndpoint>;
+}
+
+declare class USBEndpoint {
+  constructor(): void;
+  endpointNumber: number;
+  direction: 'in' | 'out';
+  type: 'bulk' | 'interrupt' | 'isochronous';
+  packetSize: number;
+}
+
+declare class USBOutTransferResult {
+  constructor(): void;
+  bytesWritten: number;
+  status: 'ok' | 'stall';
+}
+
+declare class USBInTransferResult {
+  constructor(): void;
+  data: DataView;
+  status: 'ok' | 'stall' | 'babble';
+}
+
+declare class USBIsochronousInTransferResult {
+  constructor(): void;
+  data: DataView;
+  packets: Array<USBIsochronousInTransferPacket>;
+}
+
+declare class USBIsochronousInTransferPacket {
+  constructor(): void;
+  data: DataView;
+  status: 'ok' | 'stall' | 'babble';
+}
+
+declare class USBIsochronousOutTransferResult {
+  constructor(): void;
+  packets: Array<USBIsochronousOutTransferPacket>;
+}
+
+declare class USBIsochronousOutTransferPacket {
+  constructor(): void;
+  bytesWritten: number;
+  status: 'ok' | 'stall';
+}
+
+type SetUpOptions = {
+  requestType: string,
+  recipient: string,
+  request: number,
+  value: number,
+  index: number,
+  ...
+};
+
+declare type FileSystemHandleKind = 'file' | 'directory';
+
+// https://wicg.github.io/file-system-access/#api-filesystemhandle
+declare class FileSystemHandle {
+  +kind: FileSystemHandleKind;
+  +name: string;
+
+  isSameEntry: (other: FileSystemHandle) => Promise<boolean>;
+  queryPermission?: (
+    descriptor: FileSystemHandlePermissionDescriptor
+  ) => Promise<PermissionStatus>;
+  requestPermission?: (
+    descriptor: FileSystemHandlePermissionDescriptor
+  ) => Promise<PermissionStatus>;
+}
+
+// https://fs.spec.whatwg.org/#api-filesystemfilehandle
+declare class FileSystemFileHandle extends FileSystemHandle {
+  +kind: 'file';
+
+  constructor(name: string): void;
+
+  getFile(): Promise<File>;
+  createSyncAccessHandle(): Promise<FileSystemSyncAccessHandle>;
+  createWritable(options?: {|
+    keepExistingData?: boolean,
+  |}): Promise<FileSystemWritableFileStream>;
+}
+
+// https://fs.spec.whatwg.org/#api-filesystemdirectoryhandle
+declare class FileSystemDirectoryHandle extends FileSystemHandle {
+  +kind: 'directory';
+
+  constructor(name: string): void;
+
+  getDirectoryHandle(
+    name: string,
+    options?: {|create?: boolean|}
+  ): Promise<FileSystemDirectoryHandle>;
+  getFileHandle(
+    name: string,
+    options?: {|create?: boolean|}
+  ): Promise<FileSystemFileHandle>;
+  removeEntry(name: string, options?: {|recursive?: boolean|}): Promise<void>;
+  resolve(possibleDescendant: FileSystemHandle): Promise<Array<string> | null>;
+
+  // Async iterator functions
+  @@asyncIterator(): AsyncIterator<[string, FileSystemHandle]>;
+  entries(): AsyncIterator<[string, FileSystemHandle]>;
+  keys(): AsyncIterator<string>;
+  values(): AsyncIterator<FileSystemHandle>;
+}
+
+// https://fs.spec.whatwg.org/#api-filesystemsyncaccesshandle
+declare class FileSystemSyncAccessHandle {
+  close(): void;
+  flush(): void;
+  getSize(): number;
+  read(buffer: ArrayBuffer, options?: {|at: number|}): number;
+  truncate(newSize: number): void;
+  write(buffer: ArrayBuffer, options?: {|at: number|}): number;
+}
+
+// https://streams.spec.whatwg.org/#default-writer-class
+declare class WritableStreamDefaultWriter {
+  +closed: Promise<void>;
+  +desiredSize: number;
+  +ready: Promise<void>;
+
+  constructor(): void;
+
+  abort(reason?: string): Promise<void>;
+  close(): Promise<void>;
+  releaseLock(): void;
+  write(chunk: any): Promise<void>;
+}
+
+// https://streams.spec.whatwg.org/#ws-class
+declare class WriteableStream {
+  +locked: boolean;
+
+  constructor(): void;
+
+  abort(reason: string): Promise<string>;
+  close(): Promise<void>;
+  getWriter(): WritableStreamDefaultWriter;
+}
+
+// https://fs.spec.whatwg.org/#dictdef-writeparams
+declare type FileSystemWriteableFileStreamDataTypes =
+  | ArrayBuffer
+  | $TypedArray
+  | DataView
+  | Blob
+  | string;
+
+// https://fs.spec.whatwg.org/#dictdef-writeparams
+declare type FileSystemWriteableFileStreamData =
+  | FileSystemWriteableFileStreamDataTypes
+  | {|
+      type: 'write',
+      position?: number,
+      data: FileSystemWriteableFileStreamDataTypes,
+    |}
+  | {|
+      type: 'seek',
+      position: number,
+      data: FileSystemWriteableFileStreamDataTypes,
+    |}
+  | {|
+      type: 'size',
+      size: number,
+    |};
+
+// https://fs.spec.whatwg.org/#api-filesystemwritablefilestream
+declare class FileSystemWritableFileStream extends WriteableStream {
+  write(data: FileSystemWriteableFileStreamData): Promise<void>;
+  truncate(size: number): Promise<void>;
+  seek(position: number): Promise<void>;
+}
diff --git a/flow-typed/environments/cssom.js b/flow-typed/environments/cssom.js
new file mode 100644
index 00000000000..c70a31cb70f
--- /dev/null
+++ b/flow-typed/environments/cssom.js
@@ -0,0 +1,414 @@
+// flow-typed signature: ad7b684aa8897ecb82bcc3e009b9fc30
+// flow-typed version: 3e51657e95/cssom/flow_>=v0.261.x
+
+declare class StyleSheet {
+  disabled: boolean;
+  +href: string;
+  +media: MediaList;
+  +ownerNode: Node;
+  +parentStyleSheet: ?StyleSheet;
+  +title: string;
+  +type: string;
+}
+
+declare class StyleSheetList {
+  @@iterator(): Iterator<StyleSheet>;
+  length: number;
+  [index: number]: StyleSheet;
+}
+
+declare class MediaList {
+  @@iterator(): Iterator<string>;
+  mediaText: string;
+  length: number;
+  item(index: number): ?string;
+  deleteMedium(oldMedium: string): void;
+  appendMedium(newMedium: string): void;
+  [index: number]: string;
+}
+
+declare class CSSStyleSheet extends StyleSheet {
+  +cssRules: CSSRuleList;
+  +ownerRule: ?CSSRule;
+  deleteRule(index: number): void;
+  insertRule(rule: string, index: number): number;
+  replace(text: string): Promise<CSSStyleSheet>;
+  replaceSync(text: string): void;
+}
+
+declare class CSSGroupingRule extends CSSRule {
+  +cssRules: CSSRuleList;
+  deleteRule(index: number): void;
+  insertRule(rule: string, index: number): number;
+}
+
+declare class CSSConditionRule extends CSSGroupingRule {
+  conditionText: string;
+}
+
+declare class CSSMediaRule extends CSSConditionRule {
+  +media: MediaList;
+}
+
+declare class CSSStyleRule extends CSSRule {
+  selectorText: string;
+  +style: CSSStyleDeclaration;
+}
+
+declare class CSSSupportsRule extends CSSConditionRule {}
+
+declare class CSSRule {
+  cssText: string;
+  +parentRule: ?CSSRule;
+  +parentStyleSheet: ?CSSStyleSheet;
+  +type: number;
+  static STYLE_RULE: number;
+  static MEDIA_RULE: number;
+  static FONT_FACE_RULE: number;
+  static PAGE_RULE: number;
+  static IMPORT_RULE: number;
+  static CHARSET_RULE: number;
+  static UNKNOWN_RULE: number;
+  static KEYFRAMES_RULE: number;
+  static KEYFRAME_RULE: number;
+  static NAMESPACE_RULE: number;
+  static COUNTER_STYLE_RULE: number;
+  static SUPPORTS_RULE: number;
+  static DOCUMENT_RULE: number;
+  static FONT_FEATURE_VALUES_RULE: number;
+  static VIEWPORT_RULE: number;
+  static REGION_STYLE_RULE: number;
+}
+
+declare class CSSKeyframeRule extends CSSRule {
+  keyText: string;
+  +style: CSSStyleDeclaration;
+}
+
+declare class CSSKeyframesRule extends CSSRule {
+  name: string;
+  +cssRules: CSSRuleList;
+  appendRule(rule: string): void;
+  deleteRule(select: string): void;
+  findRule(select: string): CSSKeyframeRule | null;
+}
+
+declare class CSSRuleList {
+  @@iterator(): Iterator<CSSRule>;
+  length: number;
+  item(index: number): ?CSSRule;
+  [index: number]: CSSRule;
+}
+
+declare class CSSStyleDeclaration {
+  @@iterator(): Iterator<string>;
+  /* DOM CSS Properties */
+  alignContent: string;
+  alignItems: string;
+  alignSelf: string;
+  all: string;
+  animation: string;
+  animationDelay: string;
+  animationDirection: string;
+  animationDuration: string;
+  animationFillMode: string;
+  animationIterationCount: string;
+  animationName: string;
+  animationPlayState: string;
+  animationTimingFunction: string;
+  backdropFilter: string;
+  webkitBackdropFilter: string;
+  backfaceVisibility: string;
+  background: string;
+  backgroundAttachment: string;
+  backgroundBlendMode: string;
+  backgroundClip: string;
+  backgroundColor: string;
+  backgroundImage: string;
+  backgroundOrigin: string;
+  backgroundPosition: string;
+  backgroundPositionX: string;
+  backgroundPositionY: string;
+  backgroundRepeat: string;
+  backgroundSize: string;
+  blockSize: string;
+  border: string;
+  borderBlockEnd: string;
+  borderBlockEndColor: string;
+  borderBlockEndStyle: string;
+  borderBlockEndWidth: string;
+  borderBlockStart: string;
+  borderBlockStartColor: string;
+  borderBlockStartStyle: string;
+  borderBlockStartWidth: string;
+  borderBottom: string;
+  borderBottomColor: string;
+  borderBottomLeftRadius: string;
+  borderBottomRightRadius: string;
+  borderBottomStyle: string;
+  borderBottomWidth: string;
+  borderCollapse: string;
+  borderColor: string;
+  borderImage: string;
+  borderImageOutset: string;
+  borderImageRepeat: string;
+  borderImageSlice: string;
+  borderImageSource: string;
+  borderImageWidth: string;
+  borderInlineEnd: string;
+  borderInlineEndColor: string;
+  borderInlineEndStyle: string;
+  borderInlineEndWidth: string;
+  borderInlineStart: string;
+  borderInlineStartColor: string;
+  borderInlineStartStyle: string;
+  borderInlineStartWidth: string;
+  borderLeft: string;
+  borderLeftColor: string;
+  borderLeftStyle: string;
+  borderLeftWidth: string;
+  borderRadius: string;
+  borderRight: string;
+  borderRightColor: string;
+  borderRightStyle: string;
+  borderRightWidth: string;
+  borderSpacing: string;
+  borderStyle: string;
+  borderTop: string;
+  borderTopColor: string;
+  borderTopLeftRadius: string;
+  borderTopRightRadius: string;
+  borderTopStyle: string;
+  borderTopWidth: string;
+  borderWidth: string;
+  bottom: string;
+  boxDecorationBreak: string;
+  boxShadow: string;
+  boxSizing: string;
+  breakAfter: string;
+  breakBefore: string;
+  breakInside: string;
+  captionSide: string;
+  clear: string;
+  clip: string;
+  clipPath: string;
+  color: string;
+  columns: string;
+  columnCount: string;
+  columnFill: string;
+  columnGap: string;
+  columnRule: string;
+  columnRuleColor: string;
+  columnRuleStyle: string;
+  columnRuleWidth: string;
+  columnSpan: string;
+  columnWidth: string;
+  contain: string;
+  content: string;
+  counterIncrement: string;
+  counterReset: string;
+  cursor: string;
+  direction: string;
+  display: string;
+  emptyCells: string;
+  filter: string;
+  flex: string;
+  flexBasis: string;
+  flexDirection: string;
+  flexFlow: string;
+  flexGrow: string;
+  flexShrink: string;
+  flexWrap: string;
+  float: string;
+  font: string;
+  fontFamily: string;
+  fontFeatureSettings: string;
+  fontKerning: string;
+  fontLanguageOverride: string;
+  fontSize: string;
+  fontSizeAdjust: string;
+  fontStretch: string;
+  fontStyle: string;
+  fontSynthesis: string;
+  fontVariant: string;
+  fontVariantAlternates: string;
+  fontVariantCaps: string;
+  fontVariantEastAsian: string;
+  fontVariantLigatures: string;
+  fontVariantNumeric: string;
+  fontVariantPosition: string;
+  fontWeight: string;
+  grad: string;
+  grid: string;
+  gridArea: string;
+  gridAutoColumns: string;
+  gridAutoFlow: string;
+  gridAutoPosition: string;
+  gridAutoRows: string;
+  gridColumn: string;
+  gridColumnStart: string;
+  gridColumnEnd: string;
+  gridRow: string;
+  gridRowStart: string;
+  gridRowEnd: string;
+  gridTemplate: string;
+  gridTemplateAreas: string;
+  gridTemplateRows: string;
+  gridTemplateColumns: string;
+  height: string;
+  hyphens: string;
+  imageRendering: string;
+  imageResolution: string;
+  imageOrientation: string;
+  imeMode: string;
+  inherit: string;
+  initial: string;
+  inlineSize: string;
+  isolation: string;
+  justifyContent: string;
+  left: string;
+  letterSpacing: string;
+  lineBreak: string;
+  lineHeight: string;
+  listStyle: string;
+  listStyleImage: string;
+  listStylePosition: string;
+  listStyleType: string;
+  margin: string;
+  marginBlockEnd: string;
+  marginBlockStart: string;
+  marginBottom: string;
+  marginInlineEnd: string;
+  marginInlineStart: string;
+  marginLeft: string;
+  marginRight: string;
+  marginTop: string;
+  marks: string;
+  mask: string;
+  maskType: string;
+  maxBlockSize: string;
+  maxHeight: string;
+  maxInlineSize: string;
+  maxWidth: string;
+  minBlockSize: string;
+  minHeight: string;
+  minInlineSize: string;
+  minWidth: string;
+  mixBlendMode: string;
+  mozTransform: string;
+  mozTransformOrigin: string;
+  mozTransitionDelay: string;
+  mozTransitionDuration: string;
+  mozTransitionProperty: string;
+  mozTransitionTimingFunction: string;
+  objectFit: string;
+  objectPosition: string;
+  offsetBlockEnd: string;
+  offsetBlockStart: string;
+  offsetInlineEnd: string;
+  offsetInlineStart: string;
+  opacity: string;
+  order: string;
+  orphans: string;
+  outline: string;
+  outlineColor: string;
+  outlineOffset: string;
+  outlineStyle: string;
+  outlineWidth: string;
+  overflow: string;
+  overflowWrap: string;
+  overflowX: string;
+  overflowY: string;
+  padding: string;
+  paddingBlockEnd: string;
+  paddingBlockStart: string;
+  paddingBottom: string;
+  paddingInlineEnd: string;
+  paddingInlineStart: string;
+  paddingLeft: string;
+  paddingRight: string;
+  paddingTop: string;
+  pageBreakAfter: string;
+  pageBreakBefore: string;
+  pageBreakInside: string;
+  perspective: string;
+  perspectiveOrigin: string;
+  pointerEvents: string;
+  position: string;
+  quotes: string;
+  rad: string;
+  resize: string;
+  right: string;
+  rubyAlign: string;
+  rubyMerge: string;
+  rubyPosition: string;
+  scrollBehavior: string;
+  scrollSnapCoordinate: string;
+  scrollSnapDestination: string;
+  scrollSnapPointsX: string;
+  scrollSnapPointsY: string;
+  scrollSnapType: string;
+  shapeImageThreshold: string;
+  shapeMargin: string;
+  shapeOutside: string;
+  tableLayout: string;
+  tabSize: string;
+  textAlign: string;
+  textAlignLast: string;
+  textCombineUpright: string;
+  textDecoration: string;
+  textDecorationColor: string;
+  textDecorationLine: string;
+  textDecorationStyle: string;
+  textIndent: string;
+  textOrientation: string;
+  textOverflow: string;
+  textRendering: string;
+  textShadow: string;
+  textTransform: string;
+  textUnderlinePosition: string;
+  top: string;
+  touchAction: string;
+  transform: string;
+  transformOrigin: string;
+  transformStyle: string;
+  transition: string;
+  transitionDelay: string;
+  transitionDuration: string;
+  transitionProperty: string;
+  transitionTimingFunction: string;
+  turn: string;
+  unicodeBidi: string;
+  unicodeRange: string;
+  userSelect: string;
+  verticalAlign: string;
+  visibility: string;
+  webkitOverflowScrolling: string;
+  webkitTransform: string;
+  webkitTransformOrigin: string;
+  webkitTransitionDelay: string;
+  webkitTransitionDuration: string;
+  webkitTransitionProperty: string;
+  webkitTransitionTimingFunction: string;
+  whiteSpace: string;
+  widows: string;
+  width: string;
+  willChange: string;
+  wordBreak: string;
+  wordSpacing: string;
+  wordWrap: string;
+  writingMode: string;
+  zIndex: string;
+
+  cssFloat: string;
+  cssText: string;
+  getPropertyPriority(property: string): string;
+  getPropertyValue(property: string): string;
+  item(index: number): string;
+  [index: number]: string;
+  length: number;
+  parentRule: CSSRule;
+  removeProperty(property: string): string;
+  setProperty(property: string, value: ?string, priority: ?string): void;
+  setPropertyPriority(property: string, priority: string): void;
+}
diff --git a/flow-typed/environments/dom.js b/flow-typed/environments/dom.js
new file mode 100644
index 00000000000..331e73f8914
--- /dev/null
+++ b/flow-typed/environments/dom.js
@@ -0,0 +1,3676 @@
+// flow-typed signature: 2872ddd56ba4b4bfefacac38ebdc6087
+// flow-typed version: 3e51657e95/dom/flow_>=v0.261.x
+
+/* Files */
+
+declare class Blob {
+  constructor(
+    blobParts?: Array<any>,
+    options?: {
+      type?: string,
+      endings?: string,
+      ...
+    }
+  ): void;
+  isClosed: boolean;
+  size: number;
+  type: string;
+  close(): void;
+  slice(start?: number, end?: number, contentType?: string): Blob;
+  arrayBuffer(): Promise<ArrayBuffer>;
+  text(): Promise<string>;
+  stream(): ReadableStream;
+}
+
+declare class FileReader extends EventTarget {
+  +EMPTY: 0;
+  +LOADING: 1;
+  +DONE: 2;
+  +error: null | DOMError;
+  +readyState: 0 | 1 | 2;
+  +result: null | string | ArrayBuffer;
+  abort(): void;
+  onabort: null | ((ev: ProgressEvent) => any);
+  onerror: null | ((ev: ProgressEvent) => any);
+  onload: null | ((ev: ProgressEvent) => any);
+  onloadend: null | ((ev: ProgressEvent) => any);
+  onloadstart: null | ((ev: ProgressEvent) => any);
+  onprogress: null | ((ev: ProgressEvent) => any);
+  readAsArrayBuffer(blob: Blob): void;
+  readAsBinaryString(blob: Blob): void;
+  readAsDataURL(blob: Blob): void;
+  readAsText(blob: Blob, encoding?: string): void;
+}
+
+declare type FilePropertyBag = {
+  type?: string,
+  lastModified?: number,
+  ...
+};
+declare class File extends Blob {
+  constructor(
+    fileBits: $ReadOnlyArray<string | BufferDataSource | Blob>,
+    filename: string,
+    options?: FilePropertyBag
+  ): void;
+  lastModified: number;
+  name: string;
+}
+
+declare class FileList {
+  @@iterator(): Iterator<File>;
+  length: number;
+  item(index: number): File;
+  [index: number]: File;
+}
+
+declare class DOMError {
+  name: string;
+}
+
+declare interface ShadowRoot extends DocumentFragment {
+  +delegatesFocus: boolean;
+  +host: Element;
+  // flowlint unsafe-getters-setters:off
+  get innerHTML(): string;
+  set innerHTML(value: string | TrustedHTML): void;
+  // flowlint unsafe-getters-setters:error
+  +mode: ShadowRootMode;
+
+  // From DocumentOrShadowRoot Mixin.
+  +styleSheets: StyleSheetList;
+  adoptedStyleSheets: Array<CSSStyleSheet>;
+}
+
+declare type ShadowRootMode = 'open' | 'closed';
+
+declare type ShadowRootInit = {
+  delegatesFocus?: boolean,
+  mode: ShadowRootMode,
+  ...
+};
+
+declare type ScrollToOptions = {
+  top?: number,
+  left?: number,
+  behavior?: 'auto' | 'smooth',
+  ...
+};
+
+type EventHandler = (event: Event) => mixed;
+type EventListener = {handleEvent: EventHandler, ...} | EventHandler;
+type MouseEventHandler = (event: MouseEvent) => mixed;
+type MouseEventListener =
+  | {handleEvent: MouseEventHandler, ...}
+  | MouseEventHandler;
+type FocusEventHandler = (event: FocusEvent) => mixed;
+type FocusEventListener =
+  | {handleEvent: FocusEventHandler, ...}
+  | FocusEventHandler;
+type KeyboardEventHandler = (event: KeyboardEvent) => mixed;
+type KeyboardEventListener =
+  | {handleEvent: KeyboardEventHandler, ...}
+  | KeyboardEventHandler;
+type InputEventHandler = (event: InputEvent) => mixed;
+type InputEventListener =
+  | {handleEvent: InputEventHandler, ...}
+  | InputEventHandler;
+type TouchEventHandler = (event: TouchEvent) => mixed;
+type TouchEventListener =
+  | {handleEvent: TouchEventHandler, ...}
+  | TouchEventHandler;
+type WheelEventHandler = (event: WheelEvent) => mixed;
+type WheelEventListener =
+  | {handleEvent: WheelEventHandler, ...}
+  | WheelEventHandler;
+type AbortProgressEventHandler = (event: ProgressEvent) => mixed;
+type AbortProgressEventListener =
+  | {handleEvent: AbortProgressEventHandler, ...}
+  | AbortProgressEventHandler;
+type ProgressEventHandler = (event: ProgressEvent) => mixed;
+type ProgressEventListener =
+  | {handleEvent: ProgressEventHandler, ...}
+  | ProgressEventHandler;
+type DragEventHandler = (event: DragEvent) => mixed;
+type DragEventListener =
+  | {handleEvent: DragEventHandler, ...}
+  | DragEventHandler;
+type PointerEventHandler = (event: PointerEvent) => mixed;
+type PointerEventListener =
+  | {handleEvent: PointerEventHandler, ...}
+  | PointerEventHandler;
+type AnimationEventHandler = (event: AnimationEvent) => mixed;
+type AnimationEventListener =
+  | {handleEvent: AnimationEventHandler, ...}
+  | AnimationEventHandler;
+type ClipboardEventHandler = (event: ClipboardEvent) => mixed;
+type ClipboardEventListener =
+  | {handleEvent: ClipboardEventHandler, ...}
+  | ClipboardEventHandler;
+type TransitionEventHandler = (event: TransitionEvent) => mixed;
+type TransitionEventListener =
+  | {handleEvent: TransitionEventHandler, ...}
+  | TransitionEventHandler;
+type MessageEventHandler = (event: MessageEvent<>) => mixed;
+type MessageEventListener =
+  | {handleEvent: MessageEventHandler, ...}
+  | MessageEventHandler;
+type BeforeUnloadEventHandler = (event: BeforeUnloadEvent) => mixed;
+type BeforeUnloadEventListener =
+  | {handleEvent: BeforeUnloadEventHandler, ...}
+  | BeforeUnloadEventHandler;
+type StorageEventHandler = (event: StorageEvent) => mixed;
+type StorageEventListener =
+  | {handleEvent: StorageEventHandler, ...}
+  | StorageEventHandler;
+type SecurityPolicyViolationEventHandler = (
+  event: SecurityPolicyViolationEvent
+) => mixed;
+type SecurityPolicyViolationEventListener =
+  | {handleEvent: SecurityPolicyViolationEventHandler, ...}
+  | SecurityPolicyViolationEventHandler;
+type USBConnectionEventHandler = (event: USBConnectionEvent) => mixed;
+type USBConnectionEventListener =
+  | {handleEvent: USBConnectionEventHandler, ...}
+  | USBConnectionEventHandler;
+
+type MediaKeySessionType = 'temporary' | 'persistent-license';
+type MediaKeyStatus =
+  | 'usable'
+  | 'expired'
+  | 'released'
+  | 'output-restricted'
+  | 'output-downscaled'
+  | 'status-pending'
+  | 'internal-error';
+type MouseEventTypes =
+  | 'contextmenu'
+  | 'mousedown'
+  | 'mouseenter'
+  | 'mouseleave'
+  | 'mousemove'
+  | 'mouseout'
+  | 'mouseover'
+  | 'mouseup'
+  | 'click'
+  | 'dblclick';
+type FocusEventTypes = 'blur' | 'focus' | 'focusin' | 'focusout';
+type KeyboardEventTypes = 'keydown' | 'keyup' | 'keypress';
+type InputEventTypes = 'input' | 'beforeinput';
+type TouchEventTypes = 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel';
+type WheelEventTypes = 'wheel';
+type AbortProgressEventTypes = 'abort';
+type ProgressEventTypes =
+  | 'abort'
+  | 'error'
+  | 'load'
+  | 'loadend'
+  | 'loadstart'
+  | 'progress'
+  | 'timeout';
+type DragEventTypes =
+  | 'drag'
+  | 'dragend'
+  | 'dragenter'
+  | 'dragexit'
+  | 'dragleave'
+  | 'dragover'
+  | 'dragstart'
+  | 'drop';
+type PointerEventTypes =
+  | 'pointerover'
+  | 'pointerenter'
+  | 'pointerdown'
+  | 'pointermove'
+  | 'pointerup'
+  | 'pointercancel'
+  | 'pointerout'
+  | 'pointerleave'
+  | 'gotpointercapture'
+  | 'lostpointercapture';
+type AnimationEventTypes =
+  | 'animationstart'
+  | 'animationend'
+  | 'animationiteration';
+type ClipboardEventTypes = 'clipboardchange' | 'cut' | 'copy' | 'paste';
+type TransitionEventTypes =
+  | 'transitionrun'
+  | 'transitionstart'
+  | 'transitionend'
+  | 'transitioncancel';
+type MessageEventTypes = string;
+type BeforeUnloadEventTypes = 'beforeunload';
+type StorageEventTypes = 'storage';
+type SecurityPolicyViolationEventTypes = 'securitypolicyviolation';
+type USBConnectionEventTypes = 'connect' | 'disconnect';
+type ToggleEventTypes = 'beforetoggle' | 'toggle';
+type EventListenerOptionsOrUseCapture =
+  | boolean
+  | {
+      capture?: boolean,
+      once?: boolean,
+      passive?: boolean,
+      signal?: AbortSignal,
+      ...
+    };
+
+declare class EventTarget {
+  addEventListener(
+    type: MouseEventTypes,
+    listener: MouseEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: FocusEventTypes,
+    listener: FocusEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: KeyboardEventTypes,
+    listener: KeyboardEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: InputEventTypes,
+    listener: InputEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: TouchEventTypes,
+    listener: TouchEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: WheelEventTypes,
+    listener: WheelEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: AbortProgressEventTypes,
+    listener: AbortProgressEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: ProgressEventTypes,
+    listener: ProgressEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: DragEventTypes,
+    listener: DragEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: PointerEventTypes,
+    listener: PointerEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: AnimationEventTypes,
+    listener: AnimationEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: ClipboardEventTypes,
+    listener: ClipboardEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: TransitionEventTypes,
+    listener: TransitionEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: MessageEventTypes,
+    listener: MessageEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: BeforeUnloadEventTypes,
+    listener: BeforeUnloadEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: StorageEventTypes,
+    listener: StorageEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: SecurityPolicyViolationEventTypes,
+    listener: SecurityPolicyViolationEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: USBConnectionEventTypes,
+    listener: USBConnectionEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+
+  removeEventListener(
+    type: MouseEventTypes,
+    listener: MouseEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: FocusEventTypes,
+    listener: FocusEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: KeyboardEventTypes,
+    listener: KeyboardEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: InputEventTypes,
+    listener: InputEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: TouchEventTypes,
+    listener: TouchEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: WheelEventTypes,
+    listener: WheelEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: AbortProgressEventTypes,
+    listener: AbortProgressEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: ProgressEventTypes,
+    listener: ProgressEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: DragEventTypes,
+    listener: DragEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: PointerEventTypes,
+    listener: PointerEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: AnimationEventTypes,
+    listener: AnimationEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: ClipboardEventTypes,
+    listener: ClipboardEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: TransitionEventTypes,
+    listener: TransitionEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: MessageEventTypes,
+    listener: MessageEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: BeforeUnloadEventTypes,
+    listener: BeforeUnloadEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: StorageEventTypes,
+    listener: StorageEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: SecurityPolicyViolationEventTypes,
+    listener: SecurityPolicyViolationEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: USBConnectionEventTypes,
+    listener: USBConnectionEventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture
+  ): void;
+
+  attachEvent?: (type: MouseEventTypes, listener: MouseEventListener) => void;
+  attachEvent?: (type: FocusEventTypes, listener: FocusEventListener) => void;
+  attachEvent?: (
+    type: KeyboardEventTypes,
+    listener: KeyboardEventListener
+  ) => void;
+  attachEvent?: (type: InputEventTypes, listener: InputEventListener) => void;
+  attachEvent?: (type: TouchEventTypes, listener: TouchEventListener) => void;
+  attachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;
+  attachEvent?: (
+    type: AbortProgressEventTypes,
+    listener: AbortProgressEventListener
+  ) => void;
+  attachEvent?: (
+    type: ProgressEventTypes,
+    listener: ProgressEventListener
+  ) => void;
+  attachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;
+  attachEvent?: (
+    type: PointerEventTypes,
+    listener: PointerEventListener
+  ) => void;
+  attachEvent?: (
+    type: AnimationEventTypes,
+    listener: AnimationEventListener
+  ) => void;
+  attachEvent?: (
+    type: ClipboardEventTypes,
+    listener: ClipboardEventListener
+  ) => void;
+  attachEvent?: (
+    type: TransitionEventTypes,
+    listener: TransitionEventListener
+  ) => void;
+  attachEvent?: (
+    type: MessageEventTypes,
+    listener: MessageEventListener
+  ) => void;
+  attachEvent?: (
+    type: BeforeUnloadEventTypes,
+    listener: BeforeUnloadEventListener
+  ) => void;
+  attachEvent?: (
+    type: StorageEventTypes,
+    listener: StorageEventListener
+  ) => void;
+  attachEvent?: (
+    type: USBConnectionEventTypes,
+    listener: USBConnectionEventListener
+  ) => void;
+  attachEvent?: (type: string, listener: EventListener) => void;
+
+  detachEvent?: (type: MouseEventTypes, listener: MouseEventListener) => void;
+  detachEvent?: (type: FocusEventTypes, listener: FocusEventListener) => void;
+  detachEvent?: (
+    type: KeyboardEventTypes,
+    listener: KeyboardEventListener
+  ) => void;
+  detachEvent?: (type: InputEventTypes, listener: InputEventListener) => void;
+  detachEvent?: (type: TouchEventTypes, listener: TouchEventListener) => void;
+  detachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;
+  detachEvent?: (
+    type: AbortProgressEventTypes,
+    listener: AbortProgressEventListener
+  ) => void;
+  detachEvent?: (
+    type: ProgressEventTypes,
+    listener: ProgressEventListener
+  ) => void;
+  detachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;
+  detachEvent?: (
+    type: PointerEventTypes,
+    listener: PointerEventListener
+  ) => void;
+  detachEvent?: (
+    type: AnimationEventTypes,
+    listener: AnimationEventListener
+  ) => void;
+  detachEvent?: (
+    type: ClipboardEventTypes,
+    listener: ClipboardEventListener
+  ) => void;
+  detachEvent?: (
+    type: TransitionEventTypes,
+    listener: TransitionEventListener
+  ) => void;
+  detachEvent?: (
+    type: MessageEventTypes,
+    listener: MessageEventListener
+  ) => void;
+  detachEvent?: (
+    type: BeforeUnloadEventTypes,
+    listener: BeforeUnloadEventListener
+  ) => void;
+  detachEvent?: (
+    type: StorageEventTypes,
+    listener: StorageEventListener
+  ) => void;
+  detachEvent?: (
+    type: USBConnectionEventTypes,
+    listener: USBConnectionEventListener
+  ) => void;
+  detachEvent?: (type: string, listener: EventListener) => void;
+
+  dispatchEvent(evt: Event): boolean;
+
+  // Deprecated
+
+  cancelBubble: boolean;
+  initEvent(
+    eventTypeArg: string,
+    canBubbleArg: boolean,
+    cancelableArg: boolean
+  ): void;
+}
+
+// https://dom.spec.whatwg.org/#dictdef-eventinit
+type Event$Init = {
+  bubbles?: boolean,
+  cancelable?: boolean,
+  composed?: boolean,
+  /** Non-standard. See `composed` instead. */
+  scoped?: boolean,
+  ...
+};
+
+// https://dom.spec.whatwg.org/#interface-event
+declare class Event {
+  constructor(type: string, eventInitDict?: Event$Init): void;
+  /**
+   * Returns the type of event, e.g. "click", "hashchange", or "submit".
+   */
+  +type: string;
+  /**
+   * Returns the object to which event is dispatched (its target).
+   */
+  +target: EventTarget; // TODO: nullable
+  /** @deprecated */
+  +srcElement: Element; // TODO: nullable
+  /**
+   * Returns the object whose event listener's callback is currently being invoked.
+   */
+  +currentTarget: EventTarget; // TODO: nullable
+  /**
+   * Returns the invocation target objects of event's path (objects on which
+   * listeners will be invoked), except for any nodes in shadow trees of which
+   * the shadow root's mode is "closed" that are not reachable from event's
+   * currentTarget.
+   */
+  composedPath(): Array<EventTarget>;
+
+  +NONE: number;
+  +AT_TARGET: number;
+  +BUBBLING_PHASE: number;
+  +CAPTURING_PHASE: number;
+  /**
+   * Returns the event's phase, which is one of NONE, CAPTURING_PHASE, AT_TARGET,
+   * and BUBBLING_PHASE.
+   */
+  +eventPhase: number;
+
+  /**
+   * When dispatched in a tree, invoking this method prevents event from reaching
+   * any objects other than the current object.
+   */
+  stopPropagation(): void;
+  /**
+   * Invoking this method prevents event from reaching any registered event
+   * listeners after the current one finishes running and, when dispatched in a
+   * tree, also prevents event from reaching any other objects.
+   */
+  stopImmediatePropagation(): void;
+
+  /**
+   * Returns true or false depending on how event was initialized. True if
+   * event goes through its target's ancestors in reverse tree order, and
+   * false otherwise.
+   */
+  +bubbles: boolean;
+  /**
+   * Returns true or false depending on how event was initialized. Its
+   * return value does not always carry meaning, but true can indicate
+   * that part of the operation during which event was dispatched, can
+   * be canceled by invoking the preventDefault() method.
+   */
+  +cancelable: boolean;
+  // returnValue: boolean; // legacy, and some subclasses still define it as a string!
+  /**
+   * If invoked when the cancelable attribute value is true, and while
+   * executing a listener for the event with passive set to false, signals to
+   * the operation that caused event to be dispatched that it needs to be
+   * canceled.
+   */
+  preventDefault(): void;
+  /**
+   * Returns true if preventDefault() was invoked successfully to indicate
+   * cancelation, and false otherwise.
+   */
+  +defaultPrevented: boolean;
+  /**
+   * Returns true or false depending on how event was initialized. True if
+   * event invokes listeners past a ShadowRoot node that is the root of its
+   * target, and false otherwise.
+   */
+  +composed: boolean;
+
+  /**
+   * Returns true if event was dispatched by the user agent, and false otherwise.
+   */
+  +isTrusted: boolean;
+  /**
+   * Returns the event's timestamp as the number of milliseconds measured relative
+   * to the time origin.
+   */
+  +timeStamp: number;
+
+  /** Non-standard. See Event.prototype.composedPath */
+  +deepPath?: () => EventTarget[];
+  /** Non-standard. See Event.prototype.composed */
+  +scoped: boolean;
+
+  /**
+   * @deprecated
+   */
+  initEvent(type: string, bubbles: boolean, cancelable: boolean): void;
+}
+
+type CustomEvent$Init = {...Event$Init, detail?: any, ...};
+
+declare class CustomEvent extends Event {
+  constructor(type: string, eventInitDict?: CustomEvent$Init): void;
+  detail: any;
+
+  // deprecated
+  initCustomEvent(
+    type: string,
+    bubbles: boolean,
+    cancelable: boolean,
+    detail: any
+  ): CustomEvent;
+}
+
+type UIEvent$Init = {...Event$Init, detail?: number, view?: any, ...};
+
+declare class UIEvent extends Event {
+  constructor(typeArg: string, uiEventInit?: UIEvent$Init): void;
+  detail: number;
+  view: any;
+}
+
+declare class CompositionEvent extends UIEvent {
+  data: string | null;
+  locale: string;
+}
+
+type MouseEvent$MouseEventInit = {
+  screenX?: number,
+  screenY?: number,
+  clientX?: number,
+  clientY?: number,
+  ctrlKey?: boolean,
+  shiftKey?: boolean,
+  altKey?: boolean,
+  metaKey?: boolean,
+  button?: number,
+  buttons?: number,
+  region?: string | null,
+  relatedTarget?: EventTarget | null,
+  ...
+};
+
+declare class MouseEvent extends UIEvent {
+  constructor(
+    typeArg: string,
+    mouseEventInit?: MouseEvent$MouseEventInit
+  ): void;
+  altKey: boolean;
+  button: number;
+  buttons: number;
+  clientX: number;
+  clientY: number;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  movementX: number;
+  movementY: number;
+  offsetX: number;
+  offsetY: number;
+  pageX: number;
+  pageY: number;
+  region: string | null;
+  relatedTarget: EventTarget | null;
+  screenX: number;
+  screenY: number;
+  shiftKey: boolean;
+  x: number;
+  y: number;
+  getModifierState(keyArg: string): boolean;
+}
+
+declare class FocusEvent extends UIEvent {
+  relatedTarget: ?EventTarget;
+}
+
+type WheelEvent$Init = {
+  ...MouseEvent$MouseEventInit,
+  deltaX?: number,
+  deltaY?: number,
+  deltaZ?: number,
+  deltaMode?: 0x00 | 0x01 | 0x02,
+  ...
+};
+
+declare class WheelEvent extends MouseEvent {
+  static +DOM_DELTA_PIXEL: 0x00;
+  static +DOM_DELTA_LINE: 0x01;
+  static +DOM_DELTA_PAGE: 0x02;
+
+  constructor(type: string, eventInitDict?: WheelEvent$Init): void;
+  +deltaX: number;
+  +deltaY: number;
+  +deltaZ: number;
+  +deltaMode: 0x00 | 0x01 | 0x02;
+}
+
+declare class DragEvent extends MouseEvent {
+  dataTransfer: ?DataTransfer; // readonly
+}
+
+type PointerEvent$PointerEventInit = MouseEvent$MouseEventInit & {
+  pointerId?: number,
+  width?: number,
+  height?: number,
+  pressure?: number,
+  tangentialPressure?: number,
+  tiltX?: number,
+  tiltY?: number,
+  twist?: number,
+  pointerType?: string,
+  isPrimary?: boolean,
+  ...
+};
+
+declare class PointerEvent extends MouseEvent {
+  constructor(
+    typeArg: string,
+    pointerEventInit?: PointerEvent$PointerEventInit
+  ): void;
+  pointerId: number;
+  width: number;
+  height: number;
+  pressure: number;
+  tangentialPressure: number;
+  tiltX: number;
+  tiltY: number;
+  twist: number;
+  pointerType: string;
+  isPrimary: boolean;
+}
+
+declare class ProgressEvent extends Event {
+  lengthComputable: boolean;
+  loaded: number;
+  total: number;
+
+  // Deprecated
+  initProgressEvent(
+    typeArg: string,
+    canBubbleArg: boolean,
+    cancelableArg: boolean,
+    lengthComputableArg: boolean,
+    loadedArg: number,
+    totalArg: number
+  ): void;
+}
+
+declare class PromiseRejectionEvent extends Event {
+  promise: Promise<any>;
+  reason: any;
+}
+
+type PageTransitionEventInit = {
+  ...Event$Init,
+  persisted: boolean,
+  ...
+};
+
+// https://html.spec.whatwg.org/multipage/browsing-the-web.html#the-pagetransitionevent-interface
+declare class PageTransitionEvent extends Event {
+  constructor(type: string, init?: PageTransitionEventInit): void;
+  +persisted: boolean;
+}
+
+// used for websockets and postMessage, for example. See:
+// https://www.w3.org/TR/2011/WD-websockets-20110419/
+// and
+// https://www.w3.org/TR/2008/WD-html5-20080610/comms.html
+// and
+// https://html.spec.whatwg.org/multipage/comms.html#the-messageevent-interfaces
+declare class MessageEvent<Data = mixed> extends Event {
+  data: Data;
+  origin: string;
+  lastEventId: string;
+  source: WindowProxy;
+}
+
+// https://w3c.github.io/uievents/#idl-keyboardeventinit
+type KeyboardEvent$Init = {
+  ...UIEvent$Init,
+  /**
+   * Initializes the `key` attribute of the KeyboardEvent object to the unicode
+   * character string representing the meaning of a key after taking into
+   * account all keyboard modifiers (such as shift-state). This value is the
+   * final effective value of the key. If the key is not a printable character,
+   * then it should be one of the key values defined in [UIEvents-Key](https://www.w3.org/TR/uievents-key/).
+   *
+   * NOTE: not `null`, this results in `evt.key === 'null'`!
+   */
+  key?: string | void,
+  /**
+   * Initializes the `code` attribute of the KeyboardEvent object to the unicode
+   * character string representing the key that was pressed, ignoring any
+   * keyboard modifications such as keyboard layout. This value should be one
+   * of the code values defined in [UIEvents-Code](https://www.w3.org/TR/uievents-code/).
+   *
+   * NOTE: not `null`, this results in `evt.code === 'null'`!
+   */
+  code?: string | void,
+  /**
+   * Initializes the `location` attribute of the KeyboardEvent object to one of
+   * the following location numerical constants:
+   *
+   *   DOM_KEY_LOCATION_STANDARD (numerical value 0)
+   *   DOM_KEY_LOCATION_LEFT (numerical value 1)
+   *   DOM_KEY_LOCATION_RIGHT (numerical value 2)
+   *   DOM_KEY_LOCATION_NUMPAD (numerical value 3)
+   */
+  location?: number,
+  /**
+   * Initializes the `ctrlKey` attribute of the KeyboardEvent object to true if
+   * the Control key modifier is to be considered active, false otherwise.
+   */
+  ctrlKey?: boolean,
+  /**
+   * Initializes the `shiftKey` attribute of the KeyboardEvent object to true if
+   * the Shift key modifier is to be considered active, false otherwise.
+   */
+  shiftKey?: boolean,
+  /**
+   * Initializes the `altKey` attribute of the KeyboardEvent object to true if
+   * the Alt (alternative) (or Option) key modifier is to be considered active,
+   * false otherwise.
+   */
+  altKey?: boolean,
+  /**
+   * Initializes the `metaKey` attribute of the KeyboardEvent object to true if
+   * the Meta key modifier is to be considered active, false otherwise.
+   */
+  metaKey?: boolean,
+  /**
+   * Initializes the `repeat` attribute of the KeyboardEvent object. This
+   * attribute should be set to true if the the current KeyboardEvent is
+   * considered part of a repeating sequence of similar events caused by the
+   * long depression of any single key, false otherwise.
+   */
+  repeat?: boolean,
+  /**
+   * Initializes the `isComposing` attribute of the KeyboardEvent object. This
+   * attribute should be set to true if the event being constructed occurs as
+   * part of a composition sequence, false otherwise.
+   */
+  isComposing?: boolean,
+  /**
+   * Initializes the `charCode` attribute of the KeyboardEvent to the Unicode
+   * code point for the event’s character.
+   */
+  charCode?: number,
+  /**
+   * Initializes the `keyCode` attribute of the KeyboardEvent to the system-
+   * and implementation-dependent numerical code signifying the unmodified
+   * identifier associated with the key pressed.
+   */
+  keyCode?: number,
+  /** Initializes the `which` attribute */
+  which?: number,
+  ...
+};
+
+// https://w3c.github.io/uievents/#idl-keyboardevent
+declare class KeyboardEvent extends UIEvent {
+  constructor(typeArg: string, init?: KeyboardEvent$Init): void;
+
+  /** `true` if the Alt (alternative) (or "Option") key modifier was active. */
+  +altKey: boolean;
+  /**
+   * Holds a string that identifies the physical key being pressed. The value
+   * is not affected by the current keyboard layout or modifier state, so a
+   * particular key will always return the same value.
+   */
+  +code: string;
+  /** `true` if the Control (control) key modifier was active. */
+  +ctrlKey: boolean;
+  /**
+   * `true` if the key event occurs as part of a composition session, i.e.,
+   * after a `compositionstart` event and before the corresponding
+   * `compositionend` event.
+   */
+  +isComposing: boolean;
+  /**
+   * Holds a [key attribute value](https://www.w3.org/TR/uievents-key/#key-attribute-value)
+   * corresponding to the key pressed. */
+  +key: string;
+  /** An indication of the logical location of the key on the device. */
+  +location: number;
+  /** `true` if the meta (Meta) key (or "Command") modifier was active. */
+  +metaKey: boolean;
+  /** `true` if the key has been pressed in a sustained manner. */
+  +repeat: boolean;
+  /** `true` if the shift (Shift) key modifier was active. */
+  +shiftKey: boolean;
+
+  /**
+   * Queries the state of a modifier using a key value.
+   *
+   * Returns `true` if it is a modifier key and the modifier is activated,
+   * `false` otherwise.
+   */
+  getModifierState(keyArg?: string): boolean;
+
+  /**
+   * Holds a character value, for keypress events which generate character
+   * input. The value is the Unicode reference number (code point) of that
+   * character (e.g. event.charCode = event.key.charCodeAt(0) for printable
+   * characters). For keydown or keyup events, the value of charCode is 0.
+   *
+   * @deprecated You should use KeyboardEvent.key instead, if available.
+   */
+  +charCode: number;
+  /**
+   * Holds a system- and implementation-dependent numerical code signifying
+   * the unmodified identifier associated with the key pressed. Unlike the
+   * `key` attribute, the set of possible values are not normatively defined.
+   * Typically, these value of the keyCode SHOULD represent the decimal
+   * codepoint in ASCII or Windows 1252, but MAY be drawn from a different
+   * appropriate character set. Implementations that are unable to identify
+   * a key use the key value 0.
+   *
+   * @deprecated You should use KeyboardEvent.key instead, if available.
+   */
+  +keyCode: number;
+  /**
+   * Holds a system- and implementation-dependent numerical code signifying
+   * the unmodified identifier associated with the key pressed. In most cases,
+   * the value is identical to keyCode.
+   *
+   * @deprecated You should use KeyboardEvent.key instead, if available.
+   */
+  +which: number;
+}
+
+type InputEvent$Init = {
+  ...UIEvent$Init,
+  inputType?: string,
+  data?: string,
+  dataTransfer?: DataTransfer,
+  isComposing?: boolean,
+  ranges?: Array<any>, // TODO: StaticRange
+  ...
+};
+
+declare class InputEvent extends UIEvent {
+  constructor(typeArg: string, inputEventInit: InputEvent$Init): void;
+  +data: string | null;
+  +dataTransfer: DataTransfer | null;
+  +inputType: string;
+  +isComposing: boolean;
+  getTargetRanges(): Array<any>; // TODO: StaticRange
+}
+
+declare class AnimationEvent extends Event {
+  animationName: string;
+  elapsedTime: number;
+  pseudoElement: string;
+
+  // deprecated
+
+  initAnimationEvent: (
+    type: 'animationstart' | 'animationend' | 'animationiteration',
+    canBubble: boolean,
+    cancelable: boolean,
+    animationName: string,
+    elapsedTime: number
+  ) => void;
+}
+
+// https://www.w3.org/TR/touch-events/#idl-def-Touch
+declare class Touch {
+  clientX: number;
+  clientY: number;
+  identifier: number;
+  pageX: number;
+  pageY: number;
+  screenX: number;
+  screenY: number;
+  target: EventTarget;
+}
+
+// https://www.w3.org/TR/touch-events/#idl-def-TouchList
+// TouchList#item(index) will return null if n > #length. Should #item's
+// return type just been Touch?
+declare class TouchList {
+  @@iterator(): Iterator<Touch>;
+  length: number;
+  item(index: number): null | Touch;
+  [index: number]: Touch;
+}
+
+// https://www.w3.org/TR/touch-events/#touchevent-interface
+declare class TouchEvent extends UIEvent {
+  altKey: boolean;
+  changedTouches: TouchList;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  targetTouches: TouchList;
+  touches: TouchList;
+}
+
+// https://www.w3.org/TR/clipboard-apis/#typedefdef-clipboarditemdata
+// Raw string | Blob are allowed per https://webidl.spec.whatwg.org/#es-promise
+type ClipboardItemData = string | Blob | Promise<string | Blob>;
+
+type PresentationStyle = 'attachment' | 'inline' | 'unspecified';
+
+type ClipboardItemOptions = {
+  presentationStyle?: PresentationStyle,
+  ...
+};
+
+declare class ClipboardItem {
+  +types: $ReadOnlyArray<string>;
+  getType(type: string): Promise<Blob>;
+  constructor(
+    items: {[type: string]: ClipboardItemData},
+    options?: ClipboardItemOptions
+  ): void;
+}
+
+// https://w3c.github.io/clipboard-apis/ as of 15 May 2018
+type ClipboardEvent$Init = {
+  ...Event$Init,
+  clipboardData: DataTransfer | null,
+  ...
+};
+
+declare class ClipboardEvent extends Event {
+  constructor(type: ClipboardEventTypes, eventInit?: ClipboardEvent$Init): void;
+  +clipboardData: ?DataTransfer; // readonly
+}
+
+// https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#interface-transitionevent
+type TransitionEvent$Init = {
+  ...Event$Init,
+  propertyName: string,
+  elapsedTime: number,
+  pseudoElement: string,
+  ...
+};
+
+declare class TransitionEvent extends Event {
+  constructor(
+    type: TransitionEventTypes,
+    eventInit?: TransitionEvent$Init
+  ): void;
+
+  +propertyName: string; // readonly
+  +elapsedTime: number; // readonly
+  +pseudoElement: string; // readonly
+}
+
+declare class SecurityPolicyViolationEvent extends Event {
+  +documentURI: string;
+  +referrer: string;
+  +blockedURI: string;
+  +effectiveDirective: string;
+  +violatedDirective: string;
+  +originalPolicy: string;
+  +sourceFile: string;
+  +sample: string;
+  +disposition: 'enforce' | 'report';
+  +statusCode: number;
+  +lineNumber: number;
+  +columnNumber: number;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/USBConnectionEvent
+declare class USBConnectionEvent extends Event {
+  device: USBDevice;
+}
+
+// TODO: *Event
+
+declare class AbortController {
+  constructor(): void;
+  +signal: AbortSignal;
+  abort(reason?: any): void;
+}
+
+declare class AbortSignal extends EventTarget {
+  +aborted: boolean;
+  +reason: any;
+  abort(reason?: any): AbortSignal;
+  onabort: (event: Event) => mixed;
+  throwIfAborted(): void;
+  timeout(time: number): AbortSignal;
+}
+
+declare class Node extends EventTarget {
+  baseURI: ?string;
+  childNodes: NodeList<Node>;
+  firstChild: ?Node;
+  +isConnected: boolean;
+  lastChild: ?Node;
+  nextSibling: ?Node;
+  nodeName: string;
+  nodeType: number;
+  nodeValue: string;
+  ownerDocument: Document;
+  parentElement: ?Element;
+  parentNode: ?Node;
+  previousSibling: ?Node;
+  rootNode: Node;
+  textContent: string;
+  appendChild<T: Node>(newChild: T): T;
+  cloneNode(deep?: boolean): this;
+  compareDocumentPosition(other: Node): number;
+  contains(other: ?Node): boolean;
+  getRootNode(options?: {composed: boolean, ...}): Node;
+  hasChildNodes(): boolean;
+  insertBefore<T: Node>(newChild: T, refChild?: ?Node): T;
+  isDefaultNamespace(namespaceURI: string): boolean;
+  isEqualNode(arg: Node): boolean;
+  isSameNode(other: Node): boolean;
+  lookupNamespaceURI(prefix: string): string;
+  lookupPrefix(namespaceURI: string): string;
+  normalize(): void;
+  removeChild<T: Node>(oldChild: T): T;
+  replaceChild<T: Node>(newChild: Node, oldChild: T): T;
+  replaceChildren(...nodes: $ReadOnlyArray<Node | string>): void;
+  static ATTRIBUTE_NODE: number;
+  static CDATA_SECTION_NODE: number;
+  static COMMENT_NODE: number;
+  static DOCUMENT_FRAGMENT_NODE: number;
+  static DOCUMENT_NODE: number;
+  static DOCUMENT_POSITION_CONTAINED_BY: number;
+  static DOCUMENT_POSITION_CONTAINS: number;
+  static DOCUMENT_POSITION_DISCONNECTED: number;
+  static DOCUMENT_POSITION_FOLLOWING: number;
+  static DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+  static DOCUMENT_POSITION_PRECEDING: number;
+  static DOCUMENT_TYPE_NODE: number;
+  static ELEMENT_NODE: number;
+  static ENTITY_NODE: number;
+  static ENTITY_REFERENCE_NODE: number;
+  static NOTATION_NODE: number;
+  static PROCESSING_INSTRUCTION_NODE: number;
+  static TEXT_NODE: number;
+
+  // Non-standard
+  innerText?: string;
+  outerText?: string;
+}
+
+declare class NodeList<T> {
+  @@iterator(): Iterator<T>;
+  length: number;
+  item(index: number): T;
+  [index: number]: T;
+
+  forEach<This>(
+    callbackfn: (this: This, value: T, index: number, list: NodeList<T>) => any,
+    thisArg: This
+  ): void;
+  entries(): Iterator<[number, T]>;
+  keys(): Iterator<number>;
+  values(): Iterator<T>;
+}
+
+declare class NamedNodeMap {
+  @@iterator(): Iterator<Attr>;
+  length: number;
+  removeNamedItemNS(namespaceURI: string, localName: string): Attr;
+  item(index: number): Attr;
+  [index: number | string]: Attr;
+  removeNamedItem(name: string): Attr;
+  getNamedItem(name: string): Attr;
+  setNamedItem(arg: Attr): Attr;
+  getNamedItemNS(namespaceURI: string, localName: string): Attr;
+  setNamedItemNS(arg: Attr): Attr;
+}
+
+declare class Attr extends Node {
+  isId: boolean;
+  specified: boolean;
+  ownerElement: Element | null;
+  value: string;
+  name: string;
+  namespaceURI: string | null;
+  prefix: string | null;
+  localName: string;
+}
+
+declare class HTMLCollection<+Elem: Element> {
+  @@iterator(): Iterator<Elem>;
+  length: number;
+  item(nameOrIndex?: any, optionalIndex?: any): Elem | null;
+  namedItem(name: string): Elem | null;
+  [index: number | string]: Elem;
+}
+
+// from https://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-register
+// See also https://github.com/w3c/webcomponents/
+type ElementRegistrationOptions = {
+  +prototype?: {
+    // from https://www.w3.org/TR/custom-elements/#types-of-callbacks
+    // See also https://github.com/w3c/webcomponents/
+    +createdCallback?: () => mixed,
+    +attachedCallback?: () => mixed,
+    +detachedCallback?: () => mixed,
+    +attributeChangedCallback?: ((
+      // attribute is set
+      attributeLocalName: string,
+      oldAttributeValue: null,
+      newAttributeValue: string,
+      attributeNamespace: string
+    ) => mixed) &
+      // attribute is changed
+      ((
+        attributeLocalName: string,
+        oldAttributeValue: string,
+        newAttributeValue: string,
+        attributeNamespace: string
+      ) => mixed) &
+      // attribute is removed
+      ((
+        attributeLocalName: string,
+        oldAttributeValue: string,
+        newAttributeValue: null,
+        attributeNamespace: string
+      ) => mixed),
+    ...
+  },
+  +extends?: string,
+  ...
+};
+
+type ElementCreationOptions = {is: string, ...};
+
+declare class MutationRecord {
+  type: 'attributes' | 'characterData' | 'childList';
+  target: Node;
+  addedNodes: NodeList<Node>;
+  removedNodes: NodeList<Node>;
+  previousSibling: ?Node;
+  nextSibling: ?Node;
+  attributeName: ?string;
+  attributeNamespace: ?string;
+  oldValue: ?string;
+}
+
+type MutationObserverInitRequired =
+  | {childList: true, ...}
+  | {attributes: true, ...}
+  | {characterData: true, ...};
+
+declare type MutationObserverInit = MutationObserverInitRequired & {
+  subtree?: boolean,
+  attributeOldValue?: boolean,
+  characterDataOldValue?: boolean,
+  attributeFilter?: Array<string>,
+  ...
+};
+
+declare class MutationObserver {
+  constructor(
+    callback: (arr: Array<MutationRecord>, observer: MutationObserver) => mixed
+  ): void;
+  observe(target: Node, options: MutationObserverInit): void;
+  takeRecords(): Array<MutationRecord>;
+  disconnect(): void;
+}
+
+declare class Document extends Node {
+  +timeline: DocumentTimeline;
+  getAnimations(): Array<Animation>;
+  +URL: string;
+  adoptNode<T: Node>(source: T): T;
+  anchors: HTMLCollection<HTMLAnchorElement>;
+  applets: HTMLCollection<HTMLAppletElement>;
+  body: HTMLBodyElement | null;
+  +characterSet: string;
+  /**
+   * Legacy alias of `characterSet`
+   * @deprecated
+   */
+  +charset: string;
+  close(): void;
+  +contentType: string;
+  cookie: string;
+  createAttribute(name: string): Attr;
+  createAttributeNS(namespaceURI: string | null, qualifiedName: string): Attr;
+  createCDATASection(data: string): Text;
+  createComment(data: string): Comment;
+  createDocumentFragment(): DocumentFragment;
+  createElement<TName: $Keys<HTMLElementTagNameMap>>(
+    localName: TName,
+    options?: string | ElementCreationOptions
+  ): HTMLElementTagNameMap[TName];
+  createElementNS<TName: $Keys<HTMLElementTagNameMap>>(
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    qualifiedName: TName,
+    options?: string | ElementCreationOptions
+  ): HTMLElementTagNameMap[TName];
+  createElementNS(
+    namespaceURI: string | null,
+    qualifiedName: string,
+    options?: string | ElementCreationOptions
+  ): Element;
+  createTextNode(data: string): Text;
+  currentScript: HTMLScriptElement | null;
+  dir: 'rtl' | 'ltr';
+  +doctype: DocumentType | null;
+  +documentElement: HTMLElement | null;
+  documentMode: number;
+  +documentURI: string;
+  domain: string | null;
+  embeds: HTMLCollection<HTMLEmbedElement>;
+  exitFullscreen(): Promise<void>;
+  queryCommandSupported(cmdID: string): boolean;
+  execCommand(cmdID: string, showUI?: boolean, value?: any): boolean;
+  forms: HTMLCollection<HTMLFormElement>;
+  fullscreenElement: Element | null;
+  fullscreenEnabled: boolean;
+  getElementsByClassName(classNames: string): HTMLCollection<HTMLElement>;
+  getElementsByName(elementName: string): HTMLCollection<HTMLElement>;
+  getElementsByTagName<TName: $Keys<HTMLElementTagNameMap>>(
+    qualifiedName: TName
+  ): HTMLCollection<HTMLElementTagNameMap[TName]>;
+  getElementsByTagNameNS<TName: $Keys<HTMLElementTagNameMap>>(
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    qualifiedName: TName
+  ): HTMLCollection<HTMLElementTagNameMap[TName]>;
+  getElementsByTagNameNS(
+    namespaceURI: string | null,
+    qualifiedName: string
+  ): HTMLCollection<Element>;
+  head: HTMLHeadElement | null;
+  images: HTMLCollection<HTMLImageElement>;
+  +implementation: DOMImplementation;
+  importNode<T: Node>(importedNode: T, deep: boolean): T;
+  /**
+   * Legacy alias of `characterSet`
+   * @deprecated
+   */
+  +inputEncoding: string;
+  lastModified: string;
+  links: HTMLCollection<HTMLLinkElement>;
+  media: string;
+  open(url?: string, name?: string, features?: string, replace?: boolean): any;
+  readyState: string;
+  referrer: string;
+  scripts: HTMLCollection<HTMLScriptElement>;
+  scrollingElement: HTMLElement | null;
+  title: string;
+  visibilityState: 'visible' | 'hidden' | 'prerender' | 'unloaded';
+  write(...content: Array<string | TrustedHTML>): void;
+  writeln(...content: Array<string | TrustedHTML>): void;
+  xmlEncoding: string;
+  xmlStandalone: boolean;
+  xmlVersion: string;
+
+  registerElement(type: string, options?: ElementRegistrationOptions): any;
+  getSelection(): Selection | null;
+
+  // 6.4.6 Focus management APIs
+  activeElement: HTMLElement | null;
+  hasFocus(): boolean;
+
+  // extension
+  location: Location;
+  createEvent(eventInterface: 'CustomEvent'): CustomEvent;
+  createEvent(eventInterface: string): Event;
+  createRange(): Range;
+  elementFromPoint(x: number, y: number): HTMLElement | null;
+  elementsFromPoint(x: number, y: number): Array<HTMLElement>;
+  defaultView: any;
+  +compatMode: 'BackCompat' | 'CSS1Compat';
+  hidden: boolean;
+
+  // Pointer Lock specification
+  exitPointerLock(): void;
+  pointerLockElement: Element | null;
+
+  // from ParentNode interface
+  childElementCount: number;
+  children: HTMLCollection<HTMLElement>;
+  firstElementChild: ?Element;
+  lastElementChild: ?Element;
+  append(...nodes: Array<string | Node>): void;
+  prepend(...nodes: Array<string | Node>): void;
+
+  querySelector<TSelector: $Keys<HTMLElementTagNameMap>>(
+    selector: TSelector
+  ): HTMLElementTagNameMap[TSelector] | null;
+  querySelectorAll<TSelector: $Keys<HTMLElementTagNameMap>>(
+    selector: TSelector
+  ): NodeList<HTMLElementTagNameMap[TSelector]>;
+  // Interface DocumentTraversal
+  // http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/traversal.html#Traversal-Document
+
+  // Not all combinations of RootNodeT and whatToShow are logically possible.
+  // The bitmasks NodeFilter.SHOW_CDATA_SECTION,
+  // NodeFilter.SHOW_ENTITY_REFERENCE, NodeFilter.SHOW_ENTITY, and
+  // NodeFilter.SHOW_NOTATION are deprecated and do not correspond to types
+  // that Flow knows about.
+
+  // NodeFilter.SHOW_ATTRIBUTE is also deprecated, but corresponds to the
+  // type Attr. While there is no reason to prefer it to Node.attributes,
+  // it does have meaning and can be typed: When (whatToShow &
+  // NodeFilter.SHOW_ATTRIBUTE === 1), RootNodeT must be Attr, and when
+  // RootNodeT is Attr, bitmasks other than NodeFilter.SHOW_ATTRIBUTE are
+  // meaningless.
+  createNodeIterator<RootNodeT: Attr>(
+    root: RootNodeT,
+    whatToShow: 2,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Attr>;
+  createTreeWalker<RootNodeT: Attr>(
+    root: RootNodeT,
+    whatToShow: 2,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Attr>;
+
+  // NodeFilter.SHOW_PROCESSING_INSTRUCTION is not implemented because Flow
+  // does not currently define a ProcessingInstruction class.
+
+  // When (whatToShow & NodeFilter.SHOW_DOCUMENT === 1 || whatToShow &
+  // NodeFilter.SHOW_DOCUMENT_TYPE === 1), RootNodeT must be Document.
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 256,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 257,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Element>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 260,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Text>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 261,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Element | Text>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 384,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 385,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Element | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 388,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Text | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 389,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Document | Element | Text | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 512,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 513,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Element>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 516,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Text>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 517,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Element | Text>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 640,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 641,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Element | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 644,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Text | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 645,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Element | Text | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 768,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 769,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document | Element>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 772,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document | Text>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 773,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document | Element | Text>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 896,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 897,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document | Element | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 900,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentType | Document | Text | Comment>;
+  createNodeIterator<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 901,
+    filter?: NodeFilterInterface
+  ): NodeIterator<
+    RootNodeT,
+    DocumentType | Document | Element | Text | Comment,
+  >;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 256,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 257,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Element>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 260,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Text>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 261,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Element | Text>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 384,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 385,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Element | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 388,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Text | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 389,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Document | Element | Text | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 512,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 513,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Element>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 516,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Text>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 517,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Element | Text>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 640,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 641,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Element | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 644,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Text | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 645,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Element | Text | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 768,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 769,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Element>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 772,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Text>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 773,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Element | Text>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 896,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 897,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Element | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 900,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Text | Comment>;
+  createTreeWalker<RootNodeT: Document>(
+    root: RootNodeT,
+    whatToShow: 901,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentType | Document | Element | Text | Comment>;
+
+  // When (whatToShow & NodeFilter.SHOW_DOCUMENT_FRAGMENT === 1), RootNodeT
+  // must be a DocumentFragment.
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1024,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1025,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Element>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1028,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Text>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1029,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Element | Text>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1152,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Comment>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1153,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Element | Comment>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1156,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Text | Comment>;
+  createNodeIterator<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1157,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, DocumentFragment | Element | Text | Comment>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1024,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1025,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Element>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1028,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Text>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1029,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Element | Text>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1152,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Comment>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1153,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Element | Comment>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1156,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Text | Comment>;
+  createTreeWalker<RootNodeT: DocumentFragment>(
+    root: RootNodeT,
+    whatToShow: 1157,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, DocumentFragment | Element | Text | Comment>;
+
+  // In the general case, RootNodeT may be any Node and whatToShow may be
+  // NodeFilter.SHOW_ALL or any combination of NodeFilter.SHOW_ELEMENT,
+  // NodeFilter.SHOW_TEXT and/or NodeFilter.SHOW_COMMENT
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 1,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Element>;
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 4,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Text>;
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 5,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Element | Text>;
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 128,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Comment>;
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 129,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Element | Comment>;
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 132,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Text | Comment>;
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 133,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Text | Element | Comment>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 1,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Element>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 4,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Text>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 5,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Element | Text>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 128,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Comment>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 129,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Element | Comment>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 132,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Text | Comment>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow: 133,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Text | Element | Comment>;
+
+  // Catch all for when we don't know the value of `whatToShow`
+  // And for when whatToShow is not provided, it is assumed to be SHOW_ALL
+  createNodeIterator<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow?: number,
+    filter?: NodeFilterInterface
+  ): NodeIterator<RootNodeT, Node>;
+  createTreeWalker<RootNodeT: Node>(
+    root: RootNodeT,
+    whatToShow?: number,
+    filter?: NodeFilterInterface,
+    entityReferenceExpansion?: boolean
+  ): TreeWalker<RootNodeT, Node>;
+
+  // From NonElementParentNode Mixin.
+  getElementById(elementId: string): HTMLElement | null;
+
+  // From DocumentOrShadowRoot Mixin.
+  +styleSheets: StyleSheetList;
+  adoptedStyleSheets: Array<CSSStyleSheet>;
+}
+
+declare class DocumentFragment extends Node {
+  // from ParentNode interface
+  childElementCount: number;
+  children: HTMLCollection<HTMLElement>;
+  firstElementChild: ?Element;
+  lastElementChild: ?Element;
+  append(...nodes: Array<string | Node>): void;
+  prepend(...nodes: Array<string | Node>): void;
+
+  querySelector(selector: string): HTMLElement | null;
+  querySelectorAll(selector: string): NodeList<HTMLElement>;
+
+  // From NonElementParentNode Mixin.
+  getElementById(elementId: string): HTMLElement | null;
+}
+
+declare class Selection {
+  anchorNode: Node | null;
+  anchorOffset: number;
+  focusNode: Node | null;
+  focusOffset: number;
+  isCollapsed: boolean;
+  rangeCount: number;
+  type: string;
+  addRange(range: Range): void;
+  getRangeAt(index: number): Range;
+  removeRange(range: Range): void;
+  removeAllRanges(): void;
+  collapse(parentNode: Node | null, offset?: number): void;
+  collapseToStart(): void;
+  collapseToEnd(): void;
+  containsNode(aNode: Node, aPartlyContained?: boolean): boolean;
+  deleteFromDocument(): void;
+  extend(parentNode: Node, offset?: number): void;
+  empty(): void;
+  selectAllChildren(parentNode: Node): void;
+  setPosition(aNode: Node | null, offset?: number): void;
+  setBaseAndExtent(
+    anchorNode: Node,
+    anchorOffset: number,
+    focusNode: Node,
+    focusOffset: number
+  ): void;
+  toString(): string;
+}
+
+declare class Range {
+  // extension
+  startOffset: number;
+  collapsed: boolean;
+  endOffset: number;
+  startContainer: Node;
+  endContainer: Node;
+  commonAncestorContainer: Node;
+  setStart(refNode: Node, offset: number): void;
+  setEndBefore(refNode: Node): void;
+  setStartBefore(refNode: Node): void;
+  selectNode(refNode: Node): void;
+  detach(): void;
+  getBoundingClientRect(): DOMRect;
+  toString(): string;
+  compareBoundaryPoints(how: number, sourceRange: Range): number;
+  insertNode(newNode: Node): void;
+  collapse(toStart: boolean): void;
+  selectNodeContents(refNode: Node): void;
+  cloneContents(): DocumentFragment;
+  setEnd(refNode: Node, offset: number): void;
+  cloneRange(): Range;
+  getClientRects(): DOMRectList;
+  surroundContents(newParent: Node): void;
+  deleteContents(): void;
+  setStartAfter(refNode: Node): void;
+  extractContents(): DocumentFragment;
+  setEndAfter(refNode: Node): void;
+  createContextualFragment(fragment: string | TrustedHTML): DocumentFragment;
+  intersectsNode(refNode: Node): boolean;
+  isPointInRange(refNode: Node, offset: number): boolean;
+  static END_TO_END: number;
+  static START_TO_START: number;
+  static START_TO_END: number;
+  static END_TO_START: number;
+}
+
+declare var document: Document;
+
+declare class DOMTokenList {
+  @@iterator(): Iterator<string>;
+  length: number;
+  item(index: number): string;
+  contains(token: string): boolean;
+  add(...token: Array<string>): void;
+  remove(...token: Array<string>): void;
+  toggle(token: string, force?: boolean): boolean;
+  replace(oldToken: string, newToken: string): boolean;
+
+  forEach(
+    callbackfn: (value: string, index: number, list: DOMTokenList) => any,
+    thisArg?: any
+  ): void;
+  entries(): Iterator<[number, string]>;
+  keys(): Iterator<number>;
+  values(): Iterator<string>;
+  [index: number]: string;
+}
+
+declare class Element extends Node mixins mixin$Animatable {
+  assignedSlot: ?HTMLSlotElement;
+  attachShadow(shadowRootInitDict: ShadowRootInit): ShadowRoot;
+  attributes: NamedNodeMap;
+  classList: DOMTokenList;
+  className: string;
+  clientHeight: number;
+  clientLeft: number;
+  clientTop: number;
+  clientWidth: number;
+  id: string;
+  // flowlint unsafe-getters-setters:off
+  get innerHTML(): string;
+  set innerHTML(value: string | TrustedHTML): void;
+  // flowlint unsafe-getters-setters:error
+  localName: string;
+  namespaceURI: ?string;
+  nextElementSibling: ?Element;
+  // flowlint unsafe-getters-setters:off
+  get outerHTML(): string;
+  set outerHTML(value: string | TrustedHTML): void;
+  // flowlint unsafe-getters-setters:error
+  prefix: string | null;
+  previousElementSibling: ?Element;
+  scrollHeight: number;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  +tagName: string;
+
+  // TODO: a lot more ARIA properties
+  ariaHidden: void | 'true' | 'false';
+
+  closest(selectors: string): ?Element;
+
+  getAttribute(name?: string): ?string;
+  getAttributeNames(): Array<string>;
+  getAttributeNS(namespaceURI: string | null, localName: string): string | null;
+  getAttributeNode(name: string): Attr | null;
+  getAttributeNodeNS(
+    namespaceURI: string | null,
+    localName: string
+  ): Attr | null;
+  getBoundingClientRect(): DOMRect;
+  getClientRects(): DOMRectList;
+  getElementsByClassName(names: string): HTMLCollection<HTMLElement>;
+  getElementsByTagName<TName: $Keys<HTMLElementTagNameMap>>(
+    qualifiedName: TName
+  ): HTMLCollection<HTMLElementTagNameMap[TName]>;
+  getElementsByTagNameNS<TName: $Keys<HTMLElementTagNameMap>>(
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    qualifiedName: TName
+  ): HTMLCollection<HTMLElementTagNameMap[TName]>;
+  getElementsByTagNameNS(
+    namespaceURI: string | null,
+    qualifiedName: string
+  ): HTMLCollection<Element>;
+
+  hasAttribute(name: string): boolean;
+  hasAttributeNS(namespaceURI: string | null, localName: string): boolean;
+  hasAttributes(): boolean;
+  hasPointerCapture(pointerId: number): boolean;
+  insertAdjacentElement(
+    position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',
+    element: Element
+  ): void;
+  insertAdjacentHTML(
+    position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',
+    html: string | TrustedHTML
+  ): void;
+  insertAdjacentText(
+    position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',
+    text: string
+  ): void;
+  matches(selector: string): boolean;
+  releasePointerCapture(pointerId: number): void;
+  removeAttribute(name?: string): void;
+  removeAttributeNode(attributeNode: Attr): Attr;
+  removeAttributeNS(namespaceURI: string | null, localName: string): void;
+  requestFullscreen(options?: {
+    navigationUI: 'auto' | 'show' | 'hide',
+    ...
+  }): Promise<void>;
+  requestPointerLock(): void;
+  scrollIntoView(
+    arg?:
+      | boolean
+      | {
+          behavior?: 'auto' | 'instant' | 'smooth',
+          block?: 'start' | 'center' | 'end' | 'nearest',
+          inline?: 'start' | 'center' | 'end' | 'nearest',
+          ...
+        }
+  ): void;
+  scroll(x: number, y: number): void;
+  scroll(options: ScrollToOptions): void;
+  scrollTo(x: number, y: number): void;
+  scrollTo(options: ScrollToOptions): void;
+  scrollBy(x: number, y: number): void;
+  scrollBy(options: ScrollToOptions): void;
+  setAttribute(name?: string, value?: string): void;
+  toggleAttribute(name?: string, force?: boolean): void;
+  setAttributeNS(
+    namespaceURI: string | null,
+    qualifiedName: string,
+    value: string
+  ): void;
+  setAttributeNode(newAttr: Attr): Attr | null;
+  setAttributeNodeNS(newAttr: Attr): Attr | null;
+  setPointerCapture(pointerId: number): void;
+  shadowRoot?: ShadowRoot;
+  slot?: string;
+
+  // from ParentNode interface
+  childElementCount: number;
+  children: HTMLCollection<HTMLElement>;
+  firstElementChild: ?Element;
+  lastElementChild: ?Element;
+  append(...nodes: Array<string | Node>): void;
+  prepend(...nodes: Array<string | Node>): void;
+
+  querySelector<TSelector: $Keys<HTMLElementTagNameMap>>(
+    selector: TSelector
+  ): HTMLElementTagNameMap[TSelector] | null;
+  querySelectorAll<TSelector: $Keys<HTMLElementTagNameMap>>(
+    selector: TSelector
+  ): NodeList<HTMLElementTagNameMap[TSelector]>;
+
+  // from ChildNode interface
+  after(...nodes: Array<string | Node>): void;
+  before(...nodes: Array<string | Node>): void;
+  replaceWith(...nodes: Array<string | Node>): void;
+  remove(): void;
+}
+
+declare class HitRegionOptions {
+  path?: Path2D;
+  fillRule?: CanvasFillRule;
+  id?: string;
+  parentID?: string;
+  cursor?: string;
+  control?: Element;
+  label: ?string;
+  role: ?string;
+}
+
+declare class SVGMatrix {
+  getComponent(index: number): number;
+  mMultiply(secondMatrix: SVGMatrix): SVGMatrix;
+  inverse(): SVGMatrix;
+  mTranslate(x: number, y: number): SVGMatrix;
+  mScale(scaleFactor: number): SVGMatrix;
+  mRotate(angle: number): SVGMatrix;
+}
+
+// WebGL idl: https://www.khronos.org/registry/webgl/specs/latest/1.0/webgl.idl
+
+type WebGLContextAttributes = {
+  alpha: boolean,
+  depth: boolean,
+  stencil: boolean,
+  antialias: boolean,
+  premultipliedAlpha: boolean,
+  preserveDrawingBuffer: boolean,
+  preferLowPowerToHighPerformance: boolean,
+  failIfMajorPerformanceCaveat: boolean,
+  ...
+};
+
+interface WebGLObject {}
+
+interface WebGLBuffer extends WebGLObject {}
+
+interface WebGLFramebuffer extends WebGLObject {}
+
+interface WebGLProgram extends WebGLObject {}
+
+interface WebGLRenderbuffer extends WebGLObject {}
+
+interface WebGLShader extends WebGLObject {}
+
+interface WebGLTexture extends WebGLObject {}
+
+interface WebGLUniformLocation {}
+
+interface WebGLActiveInfo {
+  size: number;
+  type: number;
+  name: string;
+}
+
+interface WebGLShaderPrecisionFormat {
+  rangeMin: number;
+  rangeMax: number;
+  precision: number;
+}
+
+type BufferDataSource = ArrayBuffer | $ArrayBufferView;
+
+type TexImageSource =
+  | ImageBitmap
+  | ImageData
+  | HTMLImageElement
+  | HTMLCanvasElement
+  | HTMLVideoElement;
+
+type VertexAttribFVSource = Float32Array | Array<number>;
+
+/* flow */
+declare class WebGLRenderingContext {
+  static DEPTH_BUFFER_BIT: 0x00000100;
+  DEPTH_BUFFER_BIT: 0x00000100;
+  static STENCIL_BUFFER_BIT: 0x00000400;
+  STENCIL_BUFFER_BIT: 0x00000400;
+  static COLOR_BUFFER_BIT: 0x00004000;
+  COLOR_BUFFER_BIT: 0x00004000;
+  static POINTS: 0x0000;
+  POINTS: 0x0000;
+  static LINES: 0x0001;
+  LINES: 0x0001;
+  static LINE_LOOP: 0x0002;
+  LINE_LOOP: 0x0002;
+  static LINE_STRIP: 0x0003;
+  LINE_STRIP: 0x0003;
+  static TRIANGLES: 0x0004;
+  TRIANGLES: 0x0004;
+  static TRIANGLE_STRIP: 0x0005;
+  TRIANGLE_STRIP: 0x0005;
+  static TRIANGLE_FAN: 0x0006;
+  TRIANGLE_FAN: 0x0006;
+  static ZERO: 0;
+  ZERO: 0;
+  static ONE: 1;
+  ONE: 1;
+  static SRC_COLOR: 0x0300;
+  SRC_COLOR: 0x0300;
+  static ONE_MINUS_SRC_COLOR: 0x0301;
+  ONE_MINUS_SRC_COLOR: 0x0301;
+  static SRC_ALPHA: 0x0302;
+  SRC_ALPHA: 0x0302;
+  static ONE_MINUS_SRC_ALPHA: 0x0303;
+  ONE_MINUS_SRC_ALPHA: 0x0303;
+  static DST_ALPHA: 0x0304;
+  DST_ALPHA: 0x0304;
+  static ONE_MINUS_DST_ALPHA: 0x0305;
+  ONE_MINUS_DST_ALPHA: 0x0305;
+  static DST_COLOR: 0x0306;
+  DST_COLOR: 0x0306;
+  static ONE_MINUS_DST_COLOR: 0x0307;
+  ONE_MINUS_DST_COLOR: 0x0307;
+  static SRC_ALPHA_SATURATE: 0x0308;
+  SRC_ALPHA_SATURATE: 0x0308;
+  static FUNC_ADD: 0x8006;
+  FUNC_ADD: 0x8006;
+  static BLEND_EQUATION: 0x8009;
+  BLEND_EQUATION: 0x8009;
+  static BLEND_EQUATION_RGB: 0x8009;
+  BLEND_EQUATION_RGB: 0x8009;
+  static BLEND_EQUATION_ALPHA: 0x883d;
+  BLEND_EQUATION_ALPHA: 0x883d;
+  static FUNC_SUBTRACT: 0x800a;
+  FUNC_SUBTRACT: 0x800a;
+  static FUNC_REVERSE_SUBTRACT: 0x800b;
+  FUNC_REVERSE_SUBTRACT: 0x800b;
+  static BLEND_DST_RGB: 0x80c8;
+  BLEND_DST_RGB: 0x80c8;
+  static BLEND_SRC_RGB: 0x80c9;
+  BLEND_SRC_RGB: 0x80c9;
+  static BLEND_DST_ALPHA: 0x80ca;
+  BLEND_DST_ALPHA: 0x80ca;
+  static BLEND_SRC_ALPHA: 0x80cb;
+  BLEND_SRC_ALPHA: 0x80cb;
+  static CONSTANT_COLOR: 0x8001;
+  CONSTANT_COLOR: 0x8001;
+  static ONE_MINUS_CONSTANT_COLOR: 0x8002;
+  ONE_MINUS_CONSTANT_COLOR: 0x8002;
+  static CONSTANT_ALPHA: 0x8003;
+  CONSTANT_ALPHA: 0x8003;
+  static ONE_MINUS_CONSTANT_ALPHA: 0x8004;
+  ONE_MINUS_CONSTANT_ALPHA: 0x8004;
+  static BLEND_COLOR: 0x8005;
+  BLEND_COLOR: 0x8005;
+  static ARRAY_BUFFER: 0x8892;
+  ARRAY_BUFFER: 0x8892;
+  static ELEMENT_ARRAY_BUFFER: 0x8893;
+  ELEMENT_ARRAY_BUFFER: 0x8893;
+  static ARRAY_BUFFER_BINDING: 0x8894;
+  ARRAY_BUFFER_BINDING: 0x8894;
+  static ELEMENT_ARRAY_BUFFER_BINDING: 0x8895;
+  ELEMENT_ARRAY_BUFFER_BINDING: 0x8895;
+  static STREAM_DRAW: 0x88e0;
+  STREAM_DRAW: 0x88e0;
+  static STATIC_DRAW: 0x88e4;
+  STATIC_DRAW: 0x88e4;
+  static DYNAMIC_DRAW: 0x88e8;
+  DYNAMIC_DRAW: 0x88e8;
+  static BUFFER_SIZE: 0x8764;
+  BUFFER_SIZE: 0x8764;
+  static BUFFER_USAGE: 0x8765;
+  BUFFER_USAGE: 0x8765;
+  static CURRENT_VERTEX_ATTRIB: 0x8626;
+  CURRENT_VERTEX_ATTRIB: 0x8626;
+  static FRONT: 0x0404;
+  FRONT: 0x0404;
+  static BACK: 0x0405;
+  BACK: 0x0405;
+  static FRONT_AND_BACK: 0x0408;
+  FRONT_AND_BACK: 0x0408;
+  static CULL_FACE: 0x0b44;
+  CULL_FACE: 0x0b44;
+  static BLEND: 0x0be2;
+  BLEND: 0x0be2;
+  static DITHER: 0x0bd0;
+  DITHER: 0x0bd0;
+  static STENCIL_TEST: 0x0b90;
+  STENCIL_TEST: 0x0b90;
+  static DEPTH_TEST: 0x0b71;
+  DEPTH_TEST: 0x0b71;
+  static SCISSOR_TEST: 0x0c11;
+  SCISSOR_TEST: 0x0c11;
+  static POLYGON_OFFSET_FILL: 0x8037;
+  POLYGON_OFFSET_FILL: 0x8037;
+  static SAMPLE_ALPHA_TO_COVERAGE: 0x809e;
+  SAMPLE_ALPHA_TO_COVERAGE: 0x809e;
+  static SAMPLE_COVERAGE: 0x80a0;
+  SAMPLE_COVERAGE: 0x80a0;
+  static NO_ERROR: 0;
+  NO_ERROR: 0;
+  static INVALID_ENUM: 0x0500;
+  INVALID_ENUM: 0x0500;
+  static INVALID_VALUE: 0x0501;
+  INVALID_VALUE: 0x0501;
+  static INVALID_OPERATION: 0x0502;
+  INVALID_OPERATION: 0x0502;
+  static OUT_OF_MEMORY: 0x0505;
+  OUT_OF_MEMORY: 0x0505;
+  static CW: 0x0900;
+  CW: 0x0900;
+  static CCW: 0x0901;
+  CCW: 0x0901;
+  static LINE_WIDTH: 0x0b21;
+  LINE_WIDTH: 0x0b21;
+  static ALIASED_POINT_SIZE_RANGE: 0x846d;
+  ALIASED_POINT_SIZE_RANGE: 0x846d;
+  static ALIASED_LINE_WIDTH_RANGE: 0x846e;
+  ALIASED_LINE_WIDTH_RANGE: 0x846e;
+  static CULL_FACE_MODE: 0x0b45;
+  CULL_FACE_MODE: 0x0b45;
+  static FRONT_FACE: 0x0b46;
+  FRONT_FACE: 0x0b46;
+  static DEPTH_RANGE: 0x0b70;
+  DEPTH_RANGE: 0x0b70;
+  static DEPTH_WRITEMASK: 0x0b72;
+  DEPTH_WRITEMASK: 0x0b72;
+  static DEPTH_CLEAR_VALUE: 0x0b73;
+  DEPTH_CLEAR_VALUE: 0x0b73;
+  static DEPTH_FUNC: 0x0b74;
+  DEPTH_FUNC: 0x0b74;
+  static STENCIL_CLEAR_VALUE: 0x0b91;
+  STENCIL_CLEAR_VALUE: 0x0b91;
+  static STENCIL_FUNC: 0x0b92;
+  STENCIL_FUNC: 0x0b92;
+  static STENCIL_FAIL: 0x0b94;
+  STENCIL_FAIL: 0x0b94;
+  static STENCIL_PASS_DEPTH_FAIL: 0x0b95;
+  STENCIL_PASS_DEPTH_FAIL: 0x0b95;
+  static STENCIL_PASS_DEPTH_PASS: 0x0b96;
+  STENCIL_PASS_DEPTH_PASS: 0x0b96;
+  static STENCIL_REF: 0x0b97;
+  STENCIL_REF: 0x0b97;
+  static STENCIL_VALUE_MASK: 0x0b93;
+  STENCIL_VALUE_MASK: 0x0b93;
+  static STENCIL_WRITEMASK: 0x0b98;
+  STENCIL_WRITEMASK: 0x0b98;
+  static STENCIL_BACK_FUNC: 0x8800;
+  STENCIL_BACK_FUNC: 0x8800;
+  static STENCIL_BACK_FAIL: 0x8801;
+  STENCIL_BACK_FAIL: 0x8801;
+  static STENCIL_BACK_PASS_DEPTH_FAIL: 0x8802;
+  STENCIL_BACK_PASS_DEPTH_FAIL: 0x8802;
+  static STENCIL_BACK_PASS_DEPTH_PASS: 0x8803;
+  STENCIL_BACK_PASS_DEPTH_PASS: 0x8803;
+  static STENCIL_BACK_REF: 0x8ca3;
+  STENCIL_BACK_REF: 0x8ca3;
+  static STENCIL_BACK_VALUE_MASK: 0x8ca4;
+  STENCIL_BACK_VALUE_MASK: 0x8ca4;
+  static STENCIL_BACK_WRITEMASK: 0x8ca5;
+  STENCIL_BACK_WRITEMASK: 0x8ca5;
+  static VIEWPORT: 0x0ba2;
+  VIEWPORT: 0x0ba2;
+  static SCISSOR_BOX: 0x0c10;
+  SCISSOR_BOX: 0x0c10;
+  static COLOR_CLEAR_VALUE: 0x0c22;
+  COLOR_CLEAR_VALUE: 0x0c22;
+  static COLOR_WRITEMASK: 0x0c23;
+  COLOR_WRITEMASK: 0x0c23;
+  static UNPACK_ALIGNMENT: 0x0cf5;
+  UNPACK_ALIGNMENT: 0x0cf5;
+  static PACK_ALIGNMENT: 0x0d05;
+  PACK_ALIGNMENT: 0x0d05;
+  static MAX_TEXTURE_SIZE: 0x0d33;
+  MAX_TEXTURE_SIZE: 0x0d33;
+  static MAX_VIEWPORT_DIMS: 0x0d3a;
+  MAX_VIEWPORT_DIMS: 0x0d3a;
+  static SUBPIXEL_BITS: 0x0d50;
+  SUBPIXEL_BITS: 0x0d50;
+  static RED_BITS: 0x0d52;
+  RED_BITS: 0x0d52;
+  static GREEN_BITS: 0x0d53;
+  GREEN_BITS: 0x0d53;
+  static BLUE_BITS: 0x0d54;
+  BLUE_BITS: 0x0d54;
+  static ALPHA_BITS: 0x0d55;
+  ALPHA_BITS: 0x0d55;
+  static DEPTH_BITS: 0x0d56;
+  DEPTH_BITS: 0x0d56;
+  static STENCIL_BITS: 0x0d57;
+  STENCIL_BITS: 0x0d57;
+  static POLYGON_OFFSET_UNITS: 0x2a00;
+  POLYGON_OFFSET_UNITS: 0x2a00;
+  static POLYGON_OFFSET_FACTOR: 0x8038;
+  POLYGON_OFFSET_FACTOR: 0x8038;
+  static TEXTURE_BINDING_2D: 0x8069;
+  TEXTURE_BINDING_2D: 0x8069;
+  static SAMPLE_BUFFERS: 0x80a8;
+  SAMPLE_BUFFERS: 0x80a8;
+  static SAMPLES: 0x80a9;
+  SAMPLES: 0x80a9;
+  static SAMPLE_COVERAGE_VALUE: 0x80aa;
+  SAMPLE_COVERAGE_VALUE: 0x80aa;
+  static SAMPLE_COVERAGE_INVERT: 0x80ab;
+  SAMPLE_COVERAGE_INVERT: 0x80ab;
+  static COMPRESSED_TEXTURE_FORMATS: 0x86a3;
+  COMPRESSED_TEXTURE_FORMATS: 0x86a3;
+  static DONT_CARE: 0x1100;
+  DONT_CARE: 0x1100;
+  static FASTEST: 0x1101;
+  FASTEST: 0x1101;
+  static NICEST: 0x1102;
+  NICEST: 0x1102;
+  static GENERATE_MIPMAP_HINT: 0x8192;
+  GENERATE_MIPMAP_HINT: 0x8192;
+  static BYTE: 0x1400;
+  BYTE: 0x1400;
+  static UNSIGNED_BYTE: 0x1401;
+  UNSIGNED_BYTE: 0x1401;
+  static SHORT: 0x1402;
+  SHORT: 0x1402;
+  static UNSIGNED_SHORT: 0x1403;
+  UNSIGNED_SHORT: 0x1403;
+  static INT: 0x1404;
+  INT: 0x1404;
+  static UNSIGNED_INT: 0x1405;
+  UNSIGNED_INT: 0x1405;
+  static FLOAT: 0x1406;
+  FLOAT: 0x1406;
+  static DEPTH_COMPONENT: 0x1902;
+  DEPTH_COMPONENT: 0x1902;
+  static ALPHA: 0x1906;
+  ALPHA: 0x1906;
+  static RGB: 0x1907;
+  RGB: 0x1907;
+  static RGBA: 0x1908;
+  RGBA: 0x1908;
+  static LUMINANCE: 0x1909;
+  LUMINANCE: 0x1909;
+  static LUMINANCE_ALPHA: 0x190a;
+  LUMINANCE_ALPHA: 0x190a;
+  static UNSIGNED_SHORT_4_4_4_4: 0x8033;
+  UNSIGNED_SHORT_4_4_4_4: 0x8033;
+  static UNSIGNED_SHORT_5_5_5_1: 0x8034;
+  UNSIGNED_SHORT_5_5_5_1: 0x8034;
+  static UNSIGNED_SHORT_5_6_5: 0x8363;
+  UNSIGNED_SHORT_5_6_5: 0x8363;
+  static FRAGMENT_SHADER: 0x8b30;
+  FRAGMENT_SHADER: 0x8b30;
+  static VERTEX_SHADER: 0x8b31;
+  VERTEX_SHADER: 0x8b31;
+  static MAX_VERTEX_ATTRIBS: 0x8869;
+  MAX_VERTEX_ATTRIBS: 0x8869;
+  static MAX_VERTEX_UNIFORM_VECTORS: 0x8dfb;
+  MAX_VERTEX_UNIFORM_VECTORS: 0x8dfb;
+  static MAX_VARYING_VECTORS: 0x8dfc;
+  MAX_VARYING_VECTORS: 0x8dfc;
+  static MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0x8b4d;
+  MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0x8b4d;
+  static MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8b4c;
+  MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8b4c;
+  static MAX_TEXTURE_IMAGE_UNITS: 0x8872;
+  MAX_TEXTURE_IMAGE_UNITS: 0x8872;
+  static MAX_FRAGMENT_UNIFORM_VECTORS: 0x8dfd;
+  MAX_FRAGMENT_UNIFORM_VECTORS: 0x8dfd;
+  static SHADER_TYPE: 0x8b4f;
+  SHADER_TYPE: 0x8b4f;
+  static DELETE_STATUS: 0x8b80;
+  DELETE_STATUS: 0x8b80;
+  static LINK_STATUS: 0x8b82;
+  LINK_STATUS: 0x8b82;
+  static VALIDATE_STATUS: 0x8b83;
+  VALIDATE_STATUS: 0x8b83;
+  static ATTACHED_SHADERS: 0x8b85;
+  ATTACHED_SHADERS: 0x8b85;
+  static ACTIVE_UNIFORMS: 0x8b86;
+  ACTIVE_UNIFORMS: 0x8b86;
+  static ACTIVE_ATTRIBUTES: 0x8b89;
+  ACTIVE_ATTRIBUTES: 0x8b89;
+  static SHADING_LANGUAGE_VERSION: 0x8b8c;
+  SHADING_LANGUAGE_VERSION: 0x8b8c;
+  static CURRENT_PROGRAM: 0x8b8d;
+  CURRENT_PROGRAM: 0x8b8d;
+  static NEVER: 0x0200;
+  NEVER: 0x0200;
+  static LESS: 0x0201;
+  LESS: 0x0201;
+  static EQUAL: 0x0202;
+  EQUAL: 0x0202;
+  static LEQUAL: 0x0203;
+  LEQUAL: 0x0203;
+  static GREATER: 0x0204;
+  GREATER: 0x0204;
+  static NOTEQUAL: 0x0205;
+  NOTEQUAL: 0x0205;
+  static GEQUAL: 0x0206;
+  GEQUAL: 0x0206;
+  static ALWAYS: 0x0207;
+  ALWAYS: 0x0207;
+  static KEEP: 0x1e00;
+  KEEP: 0x1e00;
+  static REPLACE: 0x1e01;
+  REPLACE: 0x1e01;
+  static INCR: 0x1e02;
+  INCR: 0x1e02;
+  static DECR: 0x1e03;
+  DECR: 0x1e03;
+  static INVERT: 0x150a;
+  INVERT: 0x150a;
+  static INCR_WRAP: 0x8507;
+  INCR_WRAP: 0x8507;
+  static DECR_WRAP: 0x8508;
+  DECR_WRAP: 0x8508;
+  static VENDOR: 0x1f00;
+  VENDOR: 0x1f00;
+  static RENDERER: 0x1f01;
+  RENDERER: 0x1f01;
+  static VERSION: 0x1f02;
+  VERSION: 0x1f02;
+  static NEAREST: 0x2600;
+  NEAREST: 0x2600;
+  static LINEAR: 0x2601;
+  LINEAR: 0x2601;
+  static NEAREST_MIPMAP_NEAREST: 0x2700;
+  NEAREST_MIPMAP_NEAREST: 0x2700;
+  static LINEAR_MIPMAP_NEAREST: 0x2701;
+  LINEAR_MIPMAP_NEAREST: 0x2701;
+  static NEAREST_MIPMAP_LINEAR: 0x2702;
+  NEAREST_MIPMAP_LINEAR: 0x2702;
+  static LINEAR_MIPMAP_LINEAR: 0x2703;
+  LINEAR_MIPMAP_LINEAR: 0x2703;
+  static TEXTURE_MAG_FILTER: 0x2800;
+  TEXTURE_MAG_FILTER: 0x2800;
+  static TEXTURE_MIN_FILTER: 0x2801;
+  TEXTURE_MIN_FILTER: 0x2801;
+  static TEXTURE_WRAP_S: 0x2802;
+  TEXTURE_WRAP_S: 0x2802;
+  static TEXTURE_WRAP_T: 0x2803;
+  TEXTURE_WRAP_T: 0x2803;
+  static TEXTURE_2D: 0x0de1;
+  TEXTURE_2D: 0x0de1;
+  static TEXTURE: 0x1702;
+  TEXTURE: 0x1702;
+  static TEXTURE_CUBE_MAP: 0x8513;
+  TEXTURE_CUBE_MAP: 0x8513;
+  static TEXTURE_BINDING_CUBE_MAP: 0x8514;
+  TEXTURE_BINDING_CUBE_MAP: 0x8514;
+  static TEXTURE_CUBE_MAP_POSITIVE_X: 0x8515;
+  TEXTURE_CUBE_MAP_POSITIVE_X: 0x8515;
+  static TEXTURE_CUBE_MAP_NEGATIVE_X: 0x8516;
+  TEXTURE_CUBE_MAP_NEGATIVE_X: 0x8516;
+  static TEXTURE_CUBE_MAP_POSITIVE_Y: 0x8517;
+  TEXTURE_CUBE_MAP_POSITIVE_Y: 0x8517;
+  static TEXTURE_CUBE_MAP_NEGATIVE_Y: 0x8518;
+  TEXTURE_CUBE_MAP_NEGATIVE_Y: 0x8518;
+  static TEXTURE_CUBE_MAP_POSITIVE_Z: 0x8519;
+  TEXTURE_CUBE_MAP_POSITIVE_Z: 0x8519;
+  static TEXTURE_CUBE_MAP_NEGATIVE_Z: 0x851a;
+  TEXTURE_CUBE_MAP_NEGATIVE_Z: 0x851a;
+  static MAX_CUBE_MAP_TEXTURE_SIZE: 0x851c;
+  MAX_CUBE_MAP_TEXTURE_SIZE: 0x851c;
+  static TEXTURE0: 0x84c0;
+  TEXTURE0: 0x84c0;
+  static TEXTURE1: 0x84c1;
+  TEXTURE1: 0x84c1;
+  static TEXTURE2: 0x84c2;
+  TEXTURE2: 0x84c2;
+  static TEXTURE3: 0x84c3;
+  TEXTURE3: 0x84c3;
+  static TEXTURE4: 0x84c4;
+  TEXTURE4: 0x84c4;
+  static TEXTURE5: 0x84c5;
+  TEXTURE5: 0x84c5;
+  static TEXTURE6: 0x84c6;
+  TEXTURE6: 0x84c6;
+  static TEXTURE7: 0x84c7;
+  TEXTURE7: 0x84c7;
+  static TEXTURE8: 0x84c8;
+  TEXTURE8: 0x84c8;
+  static TEXTURE9: 0x84c9;
+  TEXTURE9: 0x84c9;
+  static TEXTURE10: 0x84ca;
+  TEXTURE10: 0x84ca;
+  static TEXTURE11: 0x84cb;
+  TEXTURE11: 0x84cb;
+  static TEXTURE12: 0x84cc;
+  TEXTURE12: 0x84cc;
+  static TEXTURE13: 0x84cd;
+  TEXTURE13: 0x84cd;
+  static TEXTURE14: 0x84ce;
+  TEXTURE14: 0x84ce;
+  static TEXTURE15: 0x84cf;
+  TEXTURE15: 0x84cf;
+  static TEXTURE16: 0x84d0;
+  TEXTURE16: 0x84d0;
+  static TEXTURE17: 0x84d1;
+  TEXTURE17: 0x84d1;
+  static TEXTURE18: 0x84d2;
+  TEXTURE18: 0x84d2;
+  static TEXTURE19: 0x84d3;
+  TEXTURE19: 0x84d3;
+  static TEXTURE20: 0x84d4;
+  TEXTURE20: 0x84d4;
+  static TEXTURE21: 0x84d5;
+  TEXTURE21: 0x84d5;
+  static TEXTURE22: 0x84d6;
+  TEXTURE22: 0x84d6;
+  static TEXTURE23: 0x84d7;
+  TEXTURE23: 0x84d7;
+  static TEXTURE24: 0x84d8;
+  TEXTURE24: 0x84d8;
+  static TEXTURE25: 0x84d9;
+  TEXTURE25: 0x84d9;
+  static TEXTURE26: 0x84da;
+  TEXTURE26: 0x84da;
+  static TEXTURE27: 0x84db;
+  TEXTURE27: 0x84db;
+  static TEXTURE28: 0x84dc;
+  TEXTURE28: 0x84dc;
+  static TEXTURE29: 0x84dd;
+  TEXTURE29: 0x84dd;
+  static TEXTURE30: 0x84de;
+  TEXTURE30: 0x84de;
+  static TEXTURE31: 0x84df;
+  TEXTURE31: 0x84df;
+  static ACTIVE_TEXTURE: 0x84e0;
+  ACTIVE_TEXTURE: 0x84e0;
+  static REPEAT: 0x2901;
+  REPEAT: 0x2901;
+  static CLAMP_TO_EDGE: 0x812f;
+  CLAMP_TO_EDGE: 0x812f;
+  static MIRRORED_REPEAT: 0x8370;
+  MIRRORED_REPEAT: 0x8370;
+  static FLOAT_VEC2: 0x8b50;
+  FLOAT_VEC2: 0x8b50;
+  static FLOAT_VEC3: 0x8b51;
+  FLOAT_VEC3: 0x8b51;
+  static FLOAT_VEC4: 0x8b52;
+  FLOAT_VEC4: 0x8b52;
+  static INT_VEC2: 0x8b53;
+  INT_VEC2: 0x8b53;
+  static INT_VEC3: 0x8b54;
+  INT_VEC3: 0x8b54;
+  static INT_VEC4: 0x8b55;
+  INT_VEC4: 0x8b55;
+  static BOOL: 0x8b56;
+  BOOL: 0x8b56;
+  static BOOL_VEC2: 0x8b57;
+  BOOL_VEC2: 0x8b57;
+  static BOOL_VEC3: 0x8b58;
+  BOOL_VEC3: 0x8b58;
+  static BOOL_VEC4: 0x8b59;
+  BOOL_VEC4: 0x8b59;
+  static FLOAT_MAT2: 0x8b5a;
+  FLOAT_MAT2: 0x8b5a;
+  static FLOAT_MAT3: 0x8b5b;
+  FLOAT_MAT3: 0x8b5b;
+  static FLOAT_MAT4: 0x8b5c;
+  FLOAT_MAT4: 0x8b5c;
+  static SAMPLER_2D: 0x8b5e;
+  SAMPLER_2D: 0x8b5e;
+  static SAMPLER_CUBE: 0x8b60;
+  SAMPLER_CUBE: 0x8b60;
+  static VERTEX_ATTRIB_ARRAY_ENABLED: 0x8622;
+  VERTEX_ATTRIB_ARRAY_ENABLED: 0x8622;
+  static VERTEX_ATTRIB_ARRAY_SIZE: 0x8623;
+  VERTEX_ATTRIB_ARRAY_SIZE: 0x8623;
+  static VERTEX_ATTRIB_ARRAY_STRIDE: 0x8624;
+  VERTEX_ATTRIB_ARRAY_STRIDE: 0x8624;
+  static VERTEX_ATTRIB_ARRAY_TYPE: 0x8625;
+  VERTEX_ATTRIB_ARRAY_TYPE: 0x8625;
+  static VERTEX_ATTRIB_ARRAY_NORMALIZED: 0x886a;
+  VERTEX_ATTRIB_ARRAY_NORMALIZED: 0x886a;
+  static VERTEX_ATTRIB_ARRAY_POINTER: 0x8645;
+  VERTEX_ATTRIB_ARRAY_POINTER: 0x8645;
+  static VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 0x889f;
+  VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 0x889f;
+  static IMPLEMENTATION_COLOR_READ_TYPE: 0x8b9a;
+  IMPLEMENTATION_COLOR_READ_TYPE: 0x8b9a;
+  static IMPLEMENTATION_COLOR_READ_FORMAT: 0x8b9b;
+  IMPLEMENTATION_COLOR_READ_FORMAT: 0x8b9b;
+  static COMPILE_STATUS: 0x8b81;
+  COMPILE_STATUS: 0x8b81;
+  static LOW_FLOAT: 0x8df0;
+  LOW_FLOAT: 0x8df0;
+  static MEDIUM_FLOAT: 0x8df1;
+  MEDIUM_FLOAT: 0x8df1;
+  static HIGH_FLOAT: 0x8df2;
+  HIGH_FLOAT: 0x8df2;
+  static LOW_INT: 0x8df3;
+  LOW_INT: 0x8df3;
+  static MEDIUM_INT: 0x8df4;
+  MEDIUM_INT: 0x8df4;
+  static HIGH_INT: 0x8df5;
+  HIGH_INT: 0x8df5;
+  static FRAMEBUFFER: 0x8d40;
+  FRAMEBUFFER: 0x8d40;
+  static RENDERBUFFER: 0x8d41;
+  RENDERBUFFER: 0x8d41;
+  static RGBA4: 0x8056;
+  RGBA4: 0x8056;
+  static RGB5_A1: 0x8057;
+  RGB5_A1: 0x8057;
+  static RGB565: 0x8d62;
+  RGB565: 0x8d62;
+  static DEPTH_COMPONENT16: 0x81a5;
+  DEPTH_COMPONENT16: 0x81a5;
+  static STENCIL_INDEX: 0x1901;
+  STENCIL_INDEX: 0x1901;
+  static STENCIL_INDEX8: 0x8d48;
+  STENCIL_INDEX8: 0x8d48;
+  static DEPTH_STENCIL: 0x84f9;
+  DEPTH_STENCIL: 0x84f9;
+  static RENDERBUFFER_WIDTH: 0x8d42;
+  RENDERBUFFER_WIDTH: 0x8d42;
+  static RENDERBUFFER_HEIGHT: 0x8d43;
+  RENDERBUFFER_HEIGHT: 0x8d43;
+  static RENDERBUFFER_INTERNAL_FORMAT: 0x8d44;
+  RENDERBUFFER_INTERNAL_FORMAT: 0x8d44;
+  static RENDERBUFFER_RED_SIZE: 0x8d50;
+  RENDERBUFFER_RED_SIZE: 0x8d50;
+  static RENDERBUFFER_GREEN_SIZE: 0x8d51;
+  RENDERBUFFER_GREEN_SIZE: 0x8d51;
+  static RENDERBUFFER_BLUE_SIZE: 0x8d52;
+  RENDERBUFFER_BLUE_SIZE: 0x8d52;
+  static RENDERBUFFER_ALPHA_SIZE: 0x8d53;
+  RENDERBUFFER_ALPHA_SIZE: 0x8d53;
+  static RENDERBUFFER_DEPTH_SIZE: 0x8d54;
+  RENDERBUFFER_DEPTH_SIZE: 0x8d54;
+  static RENDERBUFFER_STENCIL_SIZE: 0x8d55;
+  RENDERBUFFER_STENCIL_SIZE: 0x8d55;
+  static FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 0x8cd0;
+  FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 0x8cd0;
+  static FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 0x8cd1;
+  FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 0x8cd1;
+  static FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 0x8cd2;
+  FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 0x8cd2;
+  static FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 0x8cd3;
+  FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 0x8cd3;
+  static COLOR_ATTACHMENT0: 0x8ce0;
+  COLOR_ATTACHMENT0: 0x8ce0;
+  static DEPTH_ATTACHMENT: 0x8d00;
+  DEPTH_ATTACHMENT: 0x8d00;
+  static STENCIL_ATTACHMENT: 0x8d20;
+  STENCIL_ATTACHMENT: 0x8d20;
+  static DEPTH_STENCIL_ATTACHMENT: 0x821a;
+  DEPTH_STENCIL_ATTACHMENT: 0x821a;
+  static NONE: 0;
+  NONE: 0;
+  static FRAMEBUFFER_COMPLETE: 0x8cd5;
+  FRAMEBUFFER_COMPLETE: 0x8cd5;
+  static FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 0x8cd6;
+  FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 0x8cd6;
+  static FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 0x8cd7;
+  FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 0x8cd7;
+  static FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 0x8cd9;
+  FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 0x8cd9;
+  static FRAMEBUFFER_UNSUPPORTED: 0x8cdd;
+  FRAMEBUFFER_UNSUPPORTED: 0x8cdd;
+  static FRAMEBUFFER_BINDING: 0x8ca6;
+  FRAMEBUFFER_BINDING: 0x8ca6;
+  static RENDERBUFFER_BINDING: 0x8ca7;
+  RENDERBUFFER_BINDING: 0x8ca7;
+  static MAX_RENDERBUFFER_SIZE: 0x84e8;
+  MAX_RENDERBUFFER_SIZE: 0x84e8;
+  static INVALID_FRAMEBUFFER_OPERATION: 0x0506;
+  INVALID_FRAMEBUFFER_OPERATION: 0x0506;
+  static UNPACK_FLIP_Y_WEBGL: 0x9240;
+  UNPACK_FLIP_Y_WEBGL: 0x9240;
+  static UNPACK_PREMULTIPLY_ALPHA_WEBGL: 0x9241;
+  UNPACK_PREMULTIPLY_ALPHA_WEBGL: 0x9241;
+  static CONTEXT_LOST_WEBGL: 0x9242;
+  CONTEXT_LOST_WEBGL: 0x9242;
+  static UNPACK_COLORSPACE_CONVERSION_WEBGL: 0x9243;
+  UNPACK_COLORSPACE_CONVERSION_WEBGL: 0x9243;
+  static BROWSER_DEFAULT_WEBGL: 0x9244;
+  BROWSER_DEFAULT_WEBGL: 0x9244;
+
+  canvas: HTMLCanvasElement;
+  drawingBufferWidth: number;
+  drawingBufferHeight: number;
+
+  getContextAttributes(): ?WebGLContextAttributes;
+  isContextLost(): boolean;
+
+  getSupportedExtensions(): ?Array<string>;
+  getExtension(name: string): any;
+
+  activeTexture(texture: number): void;
+  attachShader(program: WebGLProgram, shader: WebGLShader): void;
+  bindAttribLocation(program: WebGLProgram, index: number, name: string): void;
+  bindBuffer(target: number, buffer: ?WebGLBuffer): void;
+  bindFramebuffer(target: number, framebuffer: ?WebGLFramebuffer): void;
+  bindRenderbuffer(target: number, renderbuffer: ?WebGLRenderbuffer): void;
+  bindTexture(target: number, texture: ?WebGLTexture): void;
+  blendColor(red: number, green: number, blue: number, alpha: number): void;
+  blendEquation(mode: number): void;
+  blendEquationSeparate(modeRGB: number, modeAlpha: number): void;
+  blendFunc(sfactor: number, dfactor: number): void;
+  blendFuncSeparate(
+    srcRGB: number,
+    dstRGB: number,
+    srcAlpha: number,
+    dstAlpha: number
+  ): void;
+
+  bufferData(target: number, size: number, usage: number): void;
+  bufferData(target: number, data: ?ArrayBuffer, usage: number): void;
+  bufferData(target: number, data: $ArrayBufferView, usage: number): void;
+  bufferSubData(target: number, offset: number, data: BufferDataSource): void;
+
+  checkFramebufferStatus(target: number): number;
+  clear(mask: number): void;
+  clearColor(red: number, green: number, blue: number, alpha: number): void;
+  clearDepth(depth: number): void;
+  clearStencil(s: number): void;
+  colorMask(red: boolean, green: boolean, blue: boolean, alpha: boolean): void;
+  compileShader(shader: WebGLShader): void;
+
+  compressedTexImage2D(
+    target: number,
+    level: number,
+    internalformat: number,
+    width: number,
+    height: number,
+    border: number,
+    data: $ArrayBufferView
+  ): void;
+
+  compressedTexSubImage2D(
+    target: number,
+    level: number,
+    xoffset: number,
+    yoffset: number,
+    width: number,
+    height: number,
+    format: number,
+    data: $ArrayBufferView
+  ): void;
+
+  copyTexImage2D(
+    target: number,
+    level: number,
+    internalformat: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    border: number
+  ): void;
+  copyTexSubImage2D(
+    target: number,
+    level: number,
+    xoffset: number,
+    yoffset: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ): void;
+
+  createBuffer(): ?WebGLBuffer;
+  createFramebuffer(): ?WebGLFramebuffer;
+  createProgram(): ?WebGLProgram;
+  createRenderbuffer(): ?WebGLRenderbuffer;
+  createShader(type: number): ?WebGLShader;
+  createTexture(): ?WebGLTexture;
+
+  cullFace(mode: number): void;
+
+  deleteBuffer(buffer: ?WebGLBuffer): void;
+  deleteFramebuffer(framebuffer: ?WebGLFramebuffer): void;
+  deleteProgram(program: ?WebGLProgram): void;
+  deleteRenderbuffer(renderbuffer: ?WebGLRenderbuffer): void;
+  deleteShader(shader: ?WebGLShader): void;
+  deleteTexture(texture: ?WebGLTexture): void;
+
+  depthFunc(func: number): void;
+  depthMask(flag: boolean): void;
+  depthRange(zNear: number, zFar: number): void;
+  detachShader(program: WebGLProgram, shader: WebGLShader): void;
+  disable(cap: number): void;
+  disableVertexAttribArray(index: number): void;
+  drawArrays(mode: number, first: number, count: number): void;
+  drawElements(mode: number, count: number, type: number, offset: number): void;
+
+  enable(cap: number): void;
+  enableVertexAttribArray(index: number): void;
+  finish(): void;
+  flush(): void;
+  framebufferRenderbuffer(
+    target: number,
+    attachment: number,
+    renderbuffertarget: number,
+    renderbuffer: ?WebGLRenderbuffer
+  ): void;
+  framebufferTexture2D(
+    target: number,
+    attachment: number,
+    textarget: number,
+    texture: ?WebGLTexture,
+    level: number
+  ): void;
+  frontFace(mode: number): void;
+
+  generateMipmap(target: number): void;
+
+  getActiveAttrib(program: WebGLProgram, index: number): ?WebGLActiveInfo;
+  getActiveUniform(program: WebGLProgram, index: number): ?WebGLActiveInfo;
+  getAttachedShaders(program: WebGLProgram): ?Array<WebGLShader>;
+
+  getAttribLocation(program: WebGLProgram, name: string): number;
+
+  getBufferParameter(target: number, pname: number): any;
+  getParameter(pname: number): any;
+
+  getError(): number;
+
+  getFramebufferAttachmentParameter(
+    target: number,
+    attachment: number,
+    pname: number
+  ): any;
+  getProgramParameter(program: WebGLProgram, pname: number): any;
+  getProgramInfoLog(program: WebGLProgram): ?string;
+  getRenderbufferParameter(target: number, pname: number): any;
+  getShaderParameter(shader: WebGLShader, pname: number): any;
+  getShaderPrecisionFormat(
+    shadertype: number,
+    precisiontype: number
+  ): ?WebGLShaderPrecisionFormat;
+  getShaderInfoLog(shader: WebGLShader): ?string;
+
+  getShaderSource(shader: WebGLShader): ?string;
+
+  getTexParameter(target: number, pname: number): any;
+
+  getUniform(program: WebGLProgram, location: WebGLUniformLocation): any;
+
+  getUniformLocation(
+    program: WebGLProgram,
+    name: string
+  ): ?WebGLUniformLocation;
+
+  getVertexAttrib(index: number, pname: number): any;
+
+  getVertexAttribOffset(index: number, pname: number): number;
+
+  hint(target: number, mode: number): void;
+  isBuffer(buffer: ?WebGLBuffer): boolean;
+  isEnabled(cap: number): boolean;
+  isFramebuffer(framebuffer: ?WebGLFramebuffer): boolean;
+  isProgram(program: ?WebGLProgram): boolean;
+  isRenderbuffer(renderbuffer: ?WebGLRenderbuffer): boolean;
+  isShader(shader: ?WebGLShader): boolean;
+  isTexture(texture: ?WebGLTexture): boolean;
+  lineWidth(width: number): void;
+  linkProgram(program: WebGLProgram): void;
+  pixelStorei(pname: number, param: number): void;
+  polygonOffset(factor: number, units: number): void;
+
+  readPixels(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    format: number,
+    type: number,
+    pixels: ?$ArrayBufferView
+  ): void;
+
+  renderbufferStorage(
+    target: number,
+    internalformat: number,
+    width: number,
+    height: number
+  ): void;
+  sampleCoverage(value: number, invert: boolean): void;
+  scissor(x: number, y: number, width: number, height: number): void;
+
+  shaderSource(shader: WebGLShader, source: string): void;
+
+  stencilFunc(func: number, ref: number, mask: number): void;
+  stencilFuncSeparate(
+    face: number,
+    func: number,
+    ref: number,
+    mask: number
+  ): void;
+  stencilMask(mask: number): void;
+  stencilMaskSeparate(face: number, mask: number): void;
+  stencilOp(fail: number, zfail: number, zpass: number): void;
+  stencilOpSeparate(
+    face: number,
+    fail: number,
+    zfail: number,
+    zpass: number
+  ): void;
+
+  texImage2D(
+    target: number,
+    level: number,
+    internalformat: number,
+    width: number,
+    height: number,
+    border: number,
+    format: number,
+    type: number,
+    pixels: ?$ArrayBufferView
+  ): void;
+  texImage2D(
+    target: number,
+    level: number,
+    internalformat: number,
+    format: number,
+    type: number,
+    source: TexImageSource
+  ): void;
+
+  texParameterf(target: number, pname: number, param: number): void;
+  texParameteri(target: number, pname: number, param: number): void;
+
+  texSubImage2D(
+    target: number,
+    level: number,
+    xoffset: number,
+    yoffset: number,
+    width: number,
+    height: number,
+    format: number,
+    type: number,
+    pixels: ?$ArrayBufferView
+  ): void;
+  texSubImage2D(
+    target: number,
+    level: number,
+    xoffset: number,
+    yoffset: number,
+    format: number,
+    type: number,
+    source: TexImageSource
+  ): void;
+
+  uniform1f(location: ?WebGLUniformLocation, x: number): void;
+  uniform1fv(location: ?WebGLUniformLocation, v: Float32Array): void;
+  uniform1fv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform1fv(location: ?WebGLUniformLocation, v: [number]): void;
+  uniform1i(location: ?WebGLUniformLocation, x: number): void;
+  uniform1iv(location: ?WebGLUniformLocation, v: Int32Array): void;
+  uniform1iv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform1iv(location: ?WebGLUniformLocation, v: [number]): void;
+  uniform2f(location: ?WebGLUniformLocation, x: number, y: number): void;
+  uniform2fv(location: ?WebGLUniformLocation, v: Float32Array): void;
+  uniform2fv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform2fv(location: ?WebGLUniformLocation, v: [number, number]): void;
+  uniform2i(location: ?WebGLUniformLocation, x: number, y: number): void;
+  uniform2iv(location: ?WebGLUniformLocation, v: Int32Array): void;
+  uniform2iv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform2iv(location: ?WebGLUniformLocation, v: [number, number]): void;
+  uniform3f(
+    location: ?WebGLUniformLocation,
+    x: number,
+    y: number,
+    z: number
+  ): void;
+  uniform3fv(location: ?WebGLUniformLocation, v: Float32Array): void;
+  uniform3fv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform3fv(
+    location: ?WebGLUniformLocation,
+    v: [number, number, number]
+  ): void;
+  uniform3i(
+    location: ?WebGLUniformLocation,
+    x: number,
+    y: number,
+    z: number
+  ): void;
+  uniform3iv(location: ?WebGLUniformLocation, v: Int32Array): void;
+  uniform3iv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform3iv(
+    location: ?WebGLUniformLocation,
+    v: [number, number, number]
+  ): void;
+  uniform4f(
+    location: ?WebGLUniformLocation,
+    x: number,
+    y: number,
+    z: number,
+    w: number
+  ): void;
+  uniform4fv(location: ?WebGLUniformLocation, v: Float32Array): void;
+  uniform4fv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform4fv(
+    location: ?WebGLUniformLocation,
+    v: [number, number, number, number]
+  ): void;
+  uniform4i(
+    location: ?WebGLUniformLocation,
+    x: number,
+    y: number,
+    z: number,
+    w: number
+  ): void;
+  uniform4iv(location: ?WebGLUniformLocation, v: Int32Array): void;
+  uniform4iv(location: ?WebGLUniformLocation, v: Array<number>): void;
+  uniform4iv(
+    location: ?WebGLUniformLocation,
+    v: [number, number, number, number]
+  ): void;
+
+  uniformMatrix2fv(
+    location: ?WebGLUniformLocation,
+    transpose: boolean,
+    value: Float32Array
+  ): void;
+  uniformMatrix2fv(
+    location: ?WebGLUniformLocation,
+    transpose: boolean,
+    value: Array<number>
+  ): void;
+  uniformMatrix3fv(
+    location: ?WebGLUniformLocation,
+    transpose: boolean,
+    value: Float32Array
+  ): void;
+  uniformMatrix3fv(
+    location: ?WebGLUniformLocation,
+    transpose: boolean,
+    value: Array<number>
+  ): void;
+  uniformMatrix4fv(
+    location: ?WebGLUniformLocation,
+    transpose: boolean,
+    value: Float32Array
+  ): void;
+  uniformMatrix4fv(
+    location: ?WebGLUniformLocation,
+    transpose: boolean,
+    value: Array<number>
+  ): void;
+
+  useProgram(program: ?WebGLProgram): void;
+  validateProgram(program: WebGLProgram): void;
+
+  vertexAttrib1f(index: number, x: number): void;
+  vertexAttrib1fv(index: number, values: VertexAttribFVSource): void;
+  vertexAttrib2f(index: number, x: number, y: number): void;
+  vertexAttrib2fv(index: number, values: VertexAttribFVSource): void;
+  vertexAttrib3f(index: number, x: number, y: number, z: number): void;
+  vertexAttrib3fv(index: number, values: VertexAttribFVSource): void;
+  vertexAttrib4f(
+    index: number,
+    x: number,
+    y: number,
+    z: number,
+    w: number
+  ): void;
+  vertexAttrib4fv(index: number, values: VertexAttribFVSource): void;
+  vertexAttribPointer(
+    index: number,
+    size: number,
+    type: number,
+    normalized: boolean,
+    stride: number,
+    offset: number
+  ): void;
+
+  viewport(x: number, y: number, width: number, height: number): void;
+}
+
+declare class WebGLContextEvent extends Event {
+  statusMessage: string;
+}
+
+declare class MediaKeyStatusMap<BufferDataSource, MediaKeyStatus> {
+  @@iterator(): Iterator<[BufferDataSource, MediaKeyStatus]>;
+  size: number;
+  entries(): Iterator<[BufferDataSource, MediaKeyStatus]>;
+  forEach(
+    callbackfn: (
+      value: MediaKeyStatus,
+      key: BufferDataSource,
+      map: MediaKeyStatusMap<BufferDataSource, MediaKeyStatus>
+    ) => any,
+    thisArg?: any
+  ): void;
+  get(key: BufferDataSource): MediaKeyStatus;
+  has(key: BufferDataSource): boolean;
+  keys(): Iterator<BufferDataSource>;
+  values(): Iterator<MediaKeyStatus>;
+}
+
+declare class MediaKeySession extends EventTarget {
+  sessionId: string;
+  expiration: number;
+  closed: Promise<void>;
+  keyStatuses: MediaKeyStatusMap<BufferDataSource, MediaKeyStatus>;
+
+  generateRequest(
+    initDataType: string,
+    initData: BufferDataSource
+  ): Promise<void>;
+  load(sessionId: string): Promise<boolean>;
+  update(response: BufferDataSource): Promise<void>;
+  close(): Promise<void>;
+  remove(): Promise<void>;
+
+  onkeystatuschange: (ev: any) => any;
+  onmessage: (ev: any) => any;
+}
+
+declare class MediaKeys {
+  createSession(mediaKeySessionType: MediaKeySessionType): MediaKeySession;
+  setServerCertificate(serverCertificate: BufferDataSource): Promise<boolean>;
+}
+
+declare class TextRange {
+  boundingLeft: number;
+  htmlText: string;
+  offsetLeft: number;
+  boundingWidth: number;
+  boundingHeight: number;
+  boundingTop: number;
+  text: string;
+  offsetTop: number;
+  moveToPoint(x: number, y: number): void;
+  queryCommandValue(cmdID: string): any;
+  getBookmark(): string;
+  move(unit: string, count?: number): number;
+  queryCommandIndeterm(cmdID: string): boolean;
+  scrollIntoView(fStart?: boolean): void;
+  findText(string: string, count?: number, flags?: number): boolean;
+  execCommand(cmdID: string, showUI?: boolean, value?: any): boolean;
+  getBoundingClientRect(): DOMRect;
+  moveToBookmark(bookmark: string): boolean;
+  isEqual(range: TextRange): boolean;
+  duplicate(): TextRange;
+  collapse(start?: boolean): void;
+  queryCommandText(cmdID: string): string;
+  select(): void;
+  pasteHTML(html: string): void;
+  inRange(range: TextRange): boolean;
+  moveEnd(unit: string, count?: number): number;
+  getClientRects(): DOMRectList;
+  moveStart(unit: string, count?: number): number;
+  parentElement(): Element;
+  queryCommandState(cmdID: string): boolean;
+  compareEndPoints(how: string, sourceRange: TextRange): number;
+  execCommandShowHelp(cmdID: string): boolean;
+  moveToElementText(element: Element): void;
+  expand(Unit: string): boolean;
+  queryCommandSupported(cmdID: string): boolean;
+  setEndPoint(how: string, SourceRange: TextRange): void;
+  queryCommandEnabled(cmdID: string): boolean;
+}
+
+// These types used to exist as a copy of DOMRect/DOMRectList, which is
+// incorrect because there are no ClientRect/ClientRectList globals on the DOM.
+// Keep these as type aliases for backwards compatibility.
+declare type ClientRect = DOMRect;
+declare type ClientRectList = DOMRectList;
+
+// TODO: HTML*Element
+
+declare class DOMImplementation {
+  createDocumentType(
+    qualifiedName: string,
+    publicId: string,
+    systemId: string
+  ): DocumentType;
+  createDocument(
+    namespaceURI: string | null,
+    qualifiedName: string,
+    doctype?: DocumentType | null
+  ): Document;
+  hasFeature(feature: string, version?: string): boolean;
+
+  // non-standard
+  createHTMLDocument(title?: string): Document;
+}
+
+declare class DocumentType extends Node {
+  name: string;
+  notations: NamedNodeMap;
+  systemId: string;
+  internalSubset: string;
+  entities: NamedNodeMap;
+  publicId: string;
+
+  // from ChildNode interface
+  after(...nodes: Array<string | Node>): void;
+  before(...nodes: Array<string | Node>): void;
+  replaceWith(...nodes: Array<string | Node>): void;
+  remove(): void;
+}
+
+declare class CharacterData extends Node {
+  length: number;
+  data: string;
+  deleteData(offset: number, count: number): void;
+  replaceData(offset: number, count: number, arg: string): void;
+  appendData(arg: string): void;
+  insertData(offset: number, arg: string): void;
+  substringData(offset: number, count: number): string;
+
+  // from ChildNode interface
+  after(...nodes: Array<string | Node>): void;
+  before(...nodes: Array<string | Node>): void;
+  replaceWith(...nodes: Array<string | Node>): void;
+  remove(): void;
+}
+
+declare class Text extends CharacterData {
+  assignedSlot?: HTMLSlotElement;
+  wholeText: string;
+  splitText(offset: number): Text;
+  replaceWholeText(content: string): Text;
+}
+
+declare class Comment extends CharacterData {
+  text: string;
+}
+
+declare class URL {
+  static canParse(url: string, base?: string): boolean;
+  static createObjectURL(blob: Blob): string;
+  static createObjectURL(mediaSource: MediaSource): string;
+  static revokeObjectURL(url: string): void;
+  static parse(url: string, base?: string): URL | null;
+  constructor(url: string, base?: string | URL): void;
+  hash: string;
+  host: string;
+  hostname: string;
+  href: string;
+  +origin: string;
+  password: string;
+  pathname: string;
+  port: string;
+  protocol: string;
+  search: string;
+  +searchParams: URLSearchParams;
+  username: string;
+  toString(): string;
+  toJSON(): string;
+}
+
+declare interface MediaSourceHandle {}
+
+declare class MediaSource extends EventTarget {
+  sourceBuffers: SourceBufferList;
+  activeSourceBuffers: SourceBufferList;
+  // https://w3c.github.io/media-source/#dom-readystate
+  readyState: 'closed' | 'open' | 'ended';
+  duration: number;
+  handle: MediaSourceHandle;
+  addSourceBuffer(type: string): SourceBuffer;
+  removeSourceBuffer(sourceBuffer: SourceBuffer): void;
+  endOfStream(error?: string): void;
+  static isTypeSupported(type: string): boolean;
+}
+
+declare class SourceBuffer extends EventTarget {
+  mode: 'segments' | 'sequence';
+  updating: boolean;
+  buffered: TimeRanges;
+  timestampOffset: number;
+  audioTracks: AudioTrackList;
+  videoTracks: VideoTrackList;
+  textTracks: TextTrackList;
+  appendWindowStart: number;
+  appendWindowEnd: number;
+
+  appendBuffer(data: ArrayBuffer | $ArrayBufferView): void;
+  // TODO: Add ReadableStream
+  // appendStream(stream: ReadableStream, maxSize?: number): void;
+  abort(): void;
+  remove(start: number, end: number): void;
+
+  trackDefaults: TrackDefaultList;
+}
+
+declare class SourceBufferList extends EventTarget {
+  @@iterator(): Iterator<SourceBuffer>;
+  [index: number]: SourceBuffer;
+  length: number;
+}
+
+declare class TrackDefaultList {
+  [index: number]: TrackDefault;
+  length: number;
+}
+
+declare class TrackDefault {
+  type: 'audio' | 'video' | 'text';
+  byteStreamTrackID: string;
+  language: string;
+  label: string;
+  kinds: Array<string>;
+}
+
+// TODO: The use of `typeof` makes this function signature effectively
+// (node: Node) => number, but it should be (node: Node) => 1|2|3
+type NodeFilterCallback = (
+  node: Node
+) =>
+  | typeof NodeFilter.FILTER_ACCEPT
+  | typeof NodeFilter.FILTER_REJECT
+  | typeof NodeFilter.FILTER_SKIP;
+
+type NodeFilterInterface =
+  | NodeFilterCallback
+  | {acceptNode: NodeFilterCallback, ...};
+
+// TODO: window.NodeFilter exists at runtime and behaves as a constructor
+//       as far as `instanceof` is concerned, but it is not callable.
+declare class NodeFilter {
+  static SHOW_ALL: -1;
+  static SHOW_ELEMENT: 1;
+  static SHOW_ATTRIBUTE: 2; // deprecated
+  static SHOW_TEXT: 4;
+  static SHOW_CDATA_SECTION: 8; // deprecated
+  static SHOW_ENTITY_REFERENCE: 16; // deprecated
+  static SHOW_ENTITY: 32; // deprecated
+  static SHOW_PROCESSING_INSTRUCTION: 64;
+  static SHOW_COMMENT: 128;
+  static SHOW_DOCUMENT: 256;
+  static SHOW_DOCUMENT_TYPE: 512;
+  static SHOW_DOCUMENT_FRAGMENT: 1024;
+  static SHOW_NOTATION: 2048; // deprecated
+  static FILTER_ACCEPT: 1;
+  static FILTER_REJECT: 2;
+  static FILTER_SKIP: 3;
+  acceptNode: NodeFilterCallback;
+}
+
+// TODO: window.NodeIterator exists at runtime and behaves as a constructor
+//       as far as `instanceof` is concerned, but it is not callable.
+declare class NodeIterator<RootNodeT, WhatToShowT> {
+  root: RootNodeT;
+  whatToShow: number;
+  filter: NodeFilter;
+  expandEntityReferences: boolean;
+  referenceNode: RootNodeT | WhatToShowT;
+  pointerBeforeReferenceNode: boolean;
+  detach(): void;
+  previousNode(): WhatToShowT | null;
+  nextNode(): WhatToShowT | null;
+}
+
+// TODO: window.TreeWalker exists at runtime and behaves as a constructor
+//       as far as `instanceof` is concerned, but it is not callable.
+declare class TreeWalker<RootNodeT, WhatToShowT> {
+  root: RootNodeT;
+  whatToShow: number;
+  filter: NodeFilter;
+  expandEntityReferences: boolean;
+  currentNode: RootNodeT | WhatToShowT;
+  parentNode(): WhatToShowT | null;
+  firstChild(): WhatToShowT | null;
+  lastChild(): WhatToShowT | null;
+  previousSibling(): WhatToShowT | null;
+  nextSibling(): WhatToShowT | null;
+  previousNode(): WhatToShowT | null;
+  nextNode(): WhatToShowT | null;
+}
+
+/* Window file picker */
+
+type WindowFileSystemPickerFileType = {|
+  description?: string,
+  /*
+   * An Object with the keys set to the MIME type
+   * and the values an Array of file extensions
+   * Example:
+   * accept: {
+   *   "image/*": [".png", ".gif", ".jpeg", ".jpg"],
+   * },
+   */
+  accept: {
+    [string]: Array<string>,
+  },
+|};
+
+type WindowBaseFilePickerOptions = {|
+  id?: number,
+  startIn?:
+    | FileSystemHandle
+    | 'desktop'
+    | 'documents'
+    | 'downloads'
+    | 'music'
+    | 'pictures'
+    | 'videos',
+|};
+
+type WindowFilePickerOptions = WindowBaseFilePickerOptions & {|
+  excludeAcceptAllOption?: boolean,
+  types?: Array<WindowFileSystemPickerFileType>,
+|};
+
+type WindowOpenFilePickerOptions = WindowFilePickerOptions & {|
+  multiple?: boolean,
+|};
+
+type WindowSaveFilePickerOptions = WindowFilePickerOptions & {|
+  suggestedName?: string,
+|};
+
+type WindowDirectoryFilePickerOptions = WindowBaseFilePickerOptions & {|
+  mode?: 'read' | 'readwrite',
+|};
+
+// https://wicg.github.io/file-system-access/#api-showopenfilepicker
+declare function showOpenFilePicker(
+  options?: WindowOpenFilePickerOptions
+): Promise<Array<FileSystemFileHandle>>;
+
+// https://wicg.github.io/file-system-access/#api-showsavefilepicker
+declare function showSaveFilePicker(
+  options?: WindowSaveFilePickerOptions
+): Promise<FileSystemFileHandle>;
+
+// https://wicg.github.io/file-system-access/#api-showdirectorypicker
+declare function showDirectoryPicker(
+  options?: WindowDirectoryFilePickerOptions
+): Promise<FileSystemDirectoryHandle>;
+
+/* Notification */
+type NotificationPermission = 'default' | 'denied' | 'granted';
+type NotificationDirection = 'auto' | 'ltr' | 'rtl';
+type VibratePattern = number | Array<number>;
+type NotificationAction = {
+  action: string,
+  title: string,
+  icon?: string,
+  ...
+};
+type NotificationOptions = {
+  dir?: NotificationDirection,
+  lang?: string,
+  body?: string,
+  tag?: string,
+  image?: string,
+  icon?: string,
+  badge?: string,
+  sound?: string,
+  vibrate?: VibratePattern,
+  timestamp?: number,
+  renotify?: boolean,
+  silent?: boolean,
+  requireInteraction?: boolean,
+  data?: ?any,
+  actions?: Array<NotificationAction>,
+  ...
+};
+
+declare class Notification extends EventTarget {
+  constructor(title: string, options?: NotificationOptions): void;
+  static +permission: NotificationPermission;
+  static requestPermission(
+    callback?: (perm: NotificationPermission) => mixed
+  ): Promise<NotificationPermission>;
+  static +maxActions: number;
+  onclick: ?(evt: Event) => mixed;
+  onclose: ?(evt: Event) => mixed;
+  onerror: ?(evt: Event) => mixed;
+  onshow: ?(evt: Event) => mixed;
+  +title: string;
+  +dir: NotificationDirection;
+  +lang: string;
+  +body: string;
+  +tag: string;
+  +image?: string;
+  +icon?: string;
+  +badge?: string;
+  +vibrate?: Array<number>;
+  +timestamp: number;
+  +renotify: boolean;
+  +silent: boolean;
+  +requireInteraction: boolean;
+  +data: any;
+  +actions: Array<NotificationAction>;
+
+  close(): void;
+}
diff --git a/flow-typed/environments/geometry.js b/flow-typed/environments/geometry.js
new file mode 100644
index 00000000000..dbdd50267b3
--- /dev/null
+++ b/flow-typed/environments/geometry.js
@@ -0,0 +1,270 @@
+// flow-typed signature: c29a716c1825927cdfc3ad29fe929754
+// flow-typed version: 52ab99c6db/geometry/flow_>=v0.261.x
+
+// https://www.w3.org/TR/geometry-1/
+
+type DOMMatrix2DInit =
+  | {|
+      a: number,
+      b: number,
+      c: number,
+      d: number,
+      e: number,
+      f: number,
+    |}
+  | {|
+      m11: number,
+      m12: number,
+      m21: number,
+      m22: number,
+      m41: number,
+      m42: number,
+    |};
+
+type DOMMatrixInit =
+  | {|
+      ...DOMMatrix2DInit,
+      is2D: true,
+    |}
+  | {|
+      ...DOMMatrix2DInit,
+      is2D: false,
+      m13: number,
+      m14: number,
+      m23: number,
+      m24: number,
+      m31: number,
+      m32: number,
+      m33: number,
+      m34: number,
+      m43: number,
+      m44: number,
+    |};
+
+type DOMPointInit = {|
+  w: number,
+  x: number,
+  y: number,
+  z: number,
+|};
+
+type DOMQuadInit = {|
+  p1: DOMPointInit,
+  p2: DOMPointInit,
+  p3: DOMPointInit,
+  p4: DOMPointInit,
+|};
+
+type DOMRectInit = {|
+  height: number,
+  width: number,
+  x: number,
+  y: number,
+|};
+
+declare class DOMMatrix extends DOMMatrixReadOnly {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+  m11: number;
+  m12: number;
+  m13: number;
+  m14: number;
+  m21: number;
+  m22: number;
+  m23: number;
+  m24: number;
+  m31: number;
+  m32: number;
+  m33: number;
+  m34: number;
+  m41: number;
+  m42: number;
+  m43: number;
+  m44: number;
+
+  static fromFloat32Array(array32: Float32Array): DOMMatrix;
+  static fromFloat64Array(array64: Float64Array): DOMMatrix;
+  static fromMatrix(other?: DOMMatrixInit): DOMMatrix;
+
+  constructor(init?: string | Array<number>): void;
+  invertSelf(): DOMMatrix;
+  multiplySelf(other?: DOMMatrixInit): DOMMatrix;
+  preMultiplySelf(other?: DOMMatrixInit): DOMMatrix;
+  rotateAxisAngleSelf(
+    x?: number,
+    y?: number,
+    z?: number,
+    angle?: number
+  ): DOMMatrix;
+  rotateFromVectorSelf(x?: number, y?: number): DOMMatrix;
+  rotateSelf(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
+  scale3dSelf(
+    scale?: number,
+    originX?: number,
+    originY?: number,
+    originZ?: number
+  ): DOMMatrix;
+  scaleSelf(
+    scaleX?: number,
+    scaleY?: number,
+    scaleZ?: number,
+    originX?: number,
+    originY?: number,
+    originZ?: number
+  ): DOMMatrix;
+  setMatrixValue(transformList: string): DOMMatrix;
+  skewXSelf(sx?: number): DOMMatrix;
+  skewYSelf(sy?: number): DOMMatrix;
+  translateSelf(tx?: number, ty?: number, tz?: number): DOMMatrix;
+}
+
+declare class DOMMatrixReadOnly {
+  +a: number;
+  +b: number;
+  +c: number;
+  +d: number;
+  +e: number;
+  +f: number;
+  +is2D: boolean;
+  +isIdentity: boolean;
+  +m11: number;
+  +m12: number;
+  +m13: number;
+  +m14: number;
+  +m21: number;
+  +m22: number;
+  +m23: number;
+  +m24: number;
+  +m31: number;
+  +m32: number;
+  +m33: number;
+  +m34: number;
+  +m41: number;
+  +m42: number;
+  +m43: number;
+  +m44: number;
+
+  static fromFloat32Array(array32: Float32Array): DOMMatrixReadOnly;
+  static fromFloat64Array(array64: Float64Array): DOMMatrixReadOnly;
+  static fromMatrix(other?: DOMMatrixInit): DOMMatrixReadOnly;
+
+  constructor(init?: string | Array<number>): void;
+  flipX(): DOMMatrix;
+  flipY(): DOMMatrix;
+  inverse(): DOMMatrix;
+  multiply(other?: DOMMatrixInit): DOMMatrix;
+  rotate(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
+  rotateAxisAngle(
+    x?: number,
+    y?: number,
+    z?: number,
+    angle?: number
+  ): DOMMatrix;
+  rotateFromVector(x?: number, y?: number): DOMMatrix;
+  scale(
+    scaleX?: number,
+    scaleY?: number,
+    scaleZ?: number,
+    originX?: number,
+    originY?: number,
+    originZ?: number
+  ): DOMMatrix;
+  scale3d(
+    scale?: number,
+    originX?: number,
+    originY?: number,
+    originZ?: number
+  ): DOMMatrix;
+  scaleNonUniform(scaleX?: number, scaleY?: number): DOMMatrix;
+  skewX(sx?: number): DOMMatrix;
+  skewY(sy?: number): DOMMatrix;
+  toFloat32Array(): Float32Array;
+  toFloat64Array(): Float64Array;
+  toJSON(): Object;
+  transformPoint(point?: DOMPointInit): DOMPoint;
+  translate(tx?: number, ty?: number, tz?: number): DOMMatrix;
+  toString(): string;
+}
+
+declare class DOMPoint extends DOMPointReadOnly {
+  w: number;
+  x: number;
+  y: number;
+  z: number;
+
+  static fromPoint(other?: DOMPointInit): DOMPoint;
+
+  constructor(x?: number, y?: number, z?: number, w?: number): void;
+}
+
+declare class DOMPointReadOnly {
+  +w: number;
+  +x: number;
+  +y: number;
+  +z: number;
+
+  static fromPoint(other?: DOMPointInit): DOMPointReadOnly;
+
+  constructor(x?: number, y?: number, z?: number, w?: number): void;
+  matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
+  toJSON(): Object;
+}
+
+declare class DOMQuad {
+  +p1: DOMPoint;
+  +p2: DOMPoint;
+  +p3: DOMPoint;
+  +p4: DOMPoint;
+
+  static fromQuad(other?: DOMQuadInit): DOMQuad;
+  static fromRect(other?: DOMRectInit): DOMQuad;
+
+  constructor(
+    p1?: DOMPointInit,
+    p2?: DOMPointInit,
+    p3?: DOMPointInit,
+    p4?: DOMPointInit
+  ): void;
+  getBounds(): DOMRect;
+  toJSON(): Object;
+}
+
+declare class DOMRect extends DOMRectReadOnly {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+
+  constructor(x?: number, y?: number, width?: number, height?: number): void;
+
+  static fromRect(other?: DOMRectInit): DOMRect;
+}
+
+declare class DOMRectList {
+  +length: number;
+
+  @@iterator(): Iterator<DOMRect>;
+
+  item(index: number): DOMRect;
+  [index: number]: DOMRect;
+}
+
+declare class DOMRectReadOnly {
+  +bottom: number;
+  +height: number;
+  +left: number;
+  +right: number;
+  +top: number;
+  +width: number;
+  +x: number;
+  +y: number;
+
+  constructor(x?: number, y?: number, width?: number, height?: number): void;
+
+  static fromRect(other?: DOMRectInit): DOMRectReadOnly;
+  toJSON(): Object;
+}
diff --git a/flow-typed/environments/html.js b/flow-typed/environments/html.js
new file mode 100644
index 00000000000..ffbf9ac9405
--- /dev/null
+++ b/flow-typed/environments/html.js
@@ -0,0 +1,1710 @@
+// flow-typed signature: 760aeea3b9b767e808097fe22b68a20f
+// flow-typed version: 8584579196/html/flow_>=v0.261.x
+
+/* DataTransfer */
+
+declare class DataTransfer {
+  clearData(format?: string): void;
+  getData(format: string): string;
+  setData(format: string, data: string): void;
+  setDragImage(image: Element, x: number, y: number): void;
+  dropEffect: string;
+  effectAllowed: string;
+  files: FileList; // readonly
+  items: DataTransferItemList; // readonly
+  types: Array<string>; // readonly
+}
+
+declare class DataTransferItemList {
+  @@iterator(): Iterator<DataTransferItem>;
+  length: number; // readonly
+  [index: number]: DataTransferItem;
+  add(data: string, type: string): ?DataTransferItem;
+  add(data: File): ?DataTransferItem;
+  remove(index: number): void;
+  clear(): void;
+}
+
+// https://wicg.github.io/file-system-access/#drag-and-drop
+declare class DataTransferItem {
+  kind: string; // readonly
+  type: string; // readonly
+  getAsString(_callback: ?(data: string) => mixed): void;
+  getAsFile(): ?File;
+  /*
+   * This is not supported by all browsers, please have a fallback plan for it.
+   * For more information, please checkout
+   * https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry
+   */
+  webkitGetAsEntry(): void | (() => any);
+  /*
+   * Not supported in all browsers
+   * For up to date compatibility information, please visit
+   * https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFileSystemHandle
+   */
+  getAsFileSystemHandle?: () => Promise<?FileSystemHandle>;
+}
+
+declare type DOMStringMap = {[key: string]: string, ...};
+
+declare class DOMStringList {
+  @@iterator(): Iterator<string>;
+  +[key: number]: string;
+  +length: number;
+  item(number): string | null;
+  contains(string): boolean;
+}
+
+declare type ElementDefinitionOptions = {|extends?: string|};
+
+declare interface CustomElementRegistry {
+  define(
+    name: string,
+    ctor: Class<Element>,
+    options?: ElementDefinitionOptions
+  ): void;
+  get(name: string): any;
+  whenDefined(name: string): Promise<void>;
+}
+
+// https://www.w3.org/TR/eventsource/
+declare class EventSource extends EventTarget {
+  constructor(
+    url: string,
+    configuration?: {withCredentials: boolean, ...}
+  ): void;
+  +CLOSED: 2;
+  +CONNECTING: 0;
+  +OPEN: 1;
+  +readyState: 0 | 1 | 2;
+  +url: string;
+  +withCredentials: boolean;
+  onerror: () => void;
+  onmessage: MessageEventListener;
+  onopen: () => void;
+  close: () => void;
+}
+
+// https://html.spec.whatwg.org/multipage/webappapis.html#the-errorevent-interface
+declare class ErrorEvent extends Event {
+  constructor(
+    type: string,
+    eventInitDict?: {
+      ...Event$Init,
+      message?: string,
+      filename?: string,
+      lineno?: number,
+      colno?: number,
+      error?: any,
+      ...
+    }
+  ): void;
+  +message: string;
+  +filename: string;
+  +lineno: number;
+  +colno: number;
+  +error: any;
+}
+
+// https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts
+declare class BroadcastChannel extends EventTarget {
+  name: string;
+  onmessage: ?(event: MessageEvent<>) => void;
+  onmessageerror: ?(event: MessageEvent<>) => void;
+
+  constructor(name: string): void;
+  postMessage(msg: mixed): void;
+  close(): void;
+}
+
+// https://www.w3.org/TR/webstorage/#the-storageevent-interface
+declare class StorageEvent extends Event {
+  key: ?string;
+  oldValue: ?string;
+  newValue: ?string;
+  url: string;
+  storageArea: ?Storage;
+}
+
+// https://www.w3.org/TR/html50/browsers.html#beforeunloadevent
+declare class BeforeUnloadEvent extends Event {
+  returnValue: string;
+}
+
+type ToggleEvent$Init = {
+  ...Event$Init,
+  oldState: string,
+  newState: string,
+  ...
+};
+
+declare class ToggleEvent extends Event {
+  constructor(type: ToggleEventTypes, eventInit?: ToggleEvent$Init): void;
+  +oldState: string;
+  +newState: string;
+}
+
+// TODO: HTMLDocument
+type FocusOptions = {preventScroll?: boolean, ...};
+
+declare class HTMLElement extends Element {
+  blur(): void;
+  click(): void;
+  focus(options?: FocusOptions): void;
+  getBoundingClientRect(): DOMRect;
+  forceSpellcheck(): void;
+
+  showPopover(options?: {|source?: HTMLElement|}): void;
+  hidePopover(): void;
+  togglePopover(
+    options?: boolean | {|force?: boolean, source?: HTMLElement|}
+  ): boolean;
+
+  accessKey: string;
+  accessKeyLabel: string;
+  contentEditable: string;
+  contextMenu: ?HTMLMenuElement;
+  dataset: DOMStringMap;
+  dir: 'ltr' | 'rtl' | 'auto';
+  draggable: boolean;
+  dropzone: any;
+  hidden: boolean;
+  inert: boolean;
+  isContentEditable: boolean;
+  itemProp: any;
+  itemScope: boolean;
+  itemType: any;
+  itemValue: Object;
+  lang: string;
+  offsetHeight: number;
+  offsetLeft: number;
+  offsetParent: ?Element;
+  offsetTop: number;
+  offsetWidth: number;
+  onabort: ?Function;
+  onblur: ?Function;
+  oncancel: ?Function;
+  oncanplay: ?Function;
+  oncanplaythrough: ?Function;
+  onchange: ?Function;
+  onclick: ?Function;
+  oncontextmenu: ?Function;
+  oncuechange: ?Function;
+  ondblclick: ?Function;
+  ondurationchange: ?Function;
+  onemptied: ?Function;
+  onended: ?Function;
+  onerror: ?Function;
+  onfocus: ?Function;
+  onfullscreenchange: ?Function;
+  onfullscreenerror: ?Function;
+  ongotpointercapture: ?Function;
+  oninput: ?Function;
+  oninvalid: ?Function;
+  onkeydown: ?Function;
+  onkeypress: ?Function;
+  onkeyup: ?Function;
+  onload: ?Function;
+  onloadeddata: ?Function;
+  onloadedmetadata: ?Function;
+  onloadstart: ?Function;
+  onlostpointercapture: ?Function;
+  onmousedown: ?Function;
+  onmouseenter: ?Function;
+  onmouseleave: ?Function;
+  onmousemove: ?Function;
+  onmouseout: ?Function;
+  onmouseover: ?Function;
+  onmouseup: ?Function;
+  onmousewheel: ?Function;
+  onpause: ?Function;
+  onplay: ?Function;
+  onplaying: ?Function;
+  onpointercancel: ?Function;
+  onpointerdown: ?Function;
+  onpointerenter: ?Function;
+  onpointerleave: ?Function;
+  onpointermove: ?Function;
+  onpointerout: ?Function;
+  onpointerover: ?Function;
+  onpointerup: ?Function;
+  onprogress: ?Function;
+  onratechange: ?Function;
+  onreadystatechange: ?Function;
+  onreset: ?Function;
+  onresize: ?Function;
+  onscroll: ?Function;
+  onseeked: ?Function;
+  onseeking: ?Function;
+  onselect: ?Function;
+  onshow: ?Function;
+  onstalled: ?Function;
+  onsubmit: ?Function;
+  onsuspend: ?Function;
+  ontimeupdate: ?Function;
+  ontoggle: ?Function;
+  onbeforetoggle: ?Function;
+  onvolumechange: ?Function;
+  onwaiting: ?Function;
+  properties: any;
+  spellcheck: boolean;
+  style: CSSStyleDeclaration;
+  tabIndex: number;
+  title: string;
+  translate: boolean;
+  popover: '' | 'auto' | 'manual' | 'hint';
+
+  +popoverVisibilityState: 'hidden' | 'showing';
+
+  +popoverInvoker: HTMLElement | null;
+}
+
+declare class HTMLSlotElement extends HTMLElement {
+  name: string;
+  assignedNodes(options?: {flatten: boolean, ...}): Node[];
+}
+
+declare class HTMLTableElement extends HTMLElement {
+  tagName: 'TABLE';
+  caption: HTMLTableCaptionElement | null;
+  tHead: HTMLTableSectionElement | null;
+  tFoot: HTMLTableSectionElement | null;
+  +tBodies: HTMLCollection<HTMLTableSectionElement>;
+  +rows: HTMLCollection<HTMLTableRowElement>;
+  createTHead(): HTMLTableSectionElement;
+  deleteTHead(): void;
+  createTFoot(): HTMLTableSectionElement;
+  deleteTFoot(): void;
+  createCaption(): HTMLTableCaptionElement;
+  deleteCaption(): void;
+  insertRow(index?: number): HTMLTableRowElement;
+  deleteRow(index: number): void;
+}
+
+declare class HTMLTableCaptionElement extends HTMLElement {
+  tagName: 'CAPTION';
+}
+
+declare class HTMLTableColElement extends HTMLElement {
+  tagName: 'COL' | 'COLGROUP';
+  span: number;
+}
+
+declare class HTMLTableSectionElement extends HTMLElement {
+  tagName: 'THEAD' | 'TFOOT' | 'TBODY';
+  +rows: HTMLCollection<HTMLTableRowElement>;
+  insertRow(index?: number): HTMLTableRowElement;
+  deleteRow(index: number): void;
+}
+
+declare class HTMLTableCellElement extends HTMLElement {
+  tagName: 'TD' | 'TH';
+  colSpan: number;
+  rowSpan: number;
+  +cellIndex: number;
+}
+
+declare class HTMLTableRowElement extends HTMLElement {
+  tagName: 'TR';
+  align: 'left' | 'right' | 'center';
+  +rowIndex: number;
+  +sectionRowIndex: number;
+  +cells: HTMLCollection<HTMLTableCellElement>;
+  deleteCell(index: number): void;
+  insertCell(index?: number): HTMLTableCellElement;
+}
+
+declare class HTMLMenuElement extends HTMLElement {
+  getCompact(): boolean;
+  setCompact(compact: boolean): void;
+}
+
+declare class HTMLBaseElement extends HTMLElement {
+  href: string;
+  target: string;
+}
+
+declare class HTMLTemplateElement extends HTMLElement {
+  content: DocumentFragment;
+}
+
+declare class CanvasGradient {
+  addColorStop(offset: number, color: string): void;
+}
+
+declare class CanvasPattern {
+  setTransform(matrix: SVGMatrix): void;
+}
+
+declare class ImageBitmap {
+  close(): void;
+  width: number;
+  height: number;
+}
+
+type CanvasFillRule = string;
+
+type CanvasImageSource =
+  | HTMLImageElement
+  | HTMLVideoElement
+  | HTMLCanvasElement
+  | CanvasRenderingContext2D
+  | ImageBitmap;
+
+declare class TextMetrics {
+  // x-direction
+  width: number;
+  actualBoundingBoxLeft: number;
+  actualBoundingBoxRight: number;
+
+  // y-direction
+  fontBoundingBoxAscent: number;
+  fontBoundingBoxDescent: number;
+  actualBoundingBoxAscent: number;
+  actualBoundingBoxDescent: number;
+  emHeightAscent: number;
+  emHeightDescent: number;
+  hangingBaseline: number;
+  alphabeticBaseline: number;
+  ideographicBaseline: number;
+}
+
+declare class CanvasDrawingStyles {
+  width: number;
+  actualBoundingBoxLeft: number;
+  actualBoundingBoxRight: number;
+
+  // y-direction
+  fontBoundingBoxAscent: number;
+  fontBoundingBoxDescent: number;
+  actualBoundingBoxAscent: number;
+  actualBoundingBoxDescent: number;
+  emHeightAscent: number;
+  emHeightDescent: number;
+  hangingBaseline: number;
+  alphabeticBaseline: number;
+  ideographicBaseline: number;
+}
+
+declare class Path2D {
+  constructor(path?: Path2D | string): void;
+
+  addPath(path: Path2D, transformation?: ?SVGMatrix): void;
+  addPathByStrokingPath(
+    path: Path2D,
+    styles: CanvasDrawingStyles,
+    transformation?: ?SVGMatrix
+  ): void;
+  addText(
+    text: string,
+    styles: CanvasDrawingStyles,
+    transformation: ?SVGMatrix,
+    x: number,
+    y: number,
+    maxWidth?: number
+  ): void;
+  addPathByStrokingText(
+    text: string,
+    styles: CanvasDrawingStyles,
+    transformation: ?SVGMatrix,
+    x: number,
+    y: number,
+    maxWidth?: number
+  ): void;
+  addText(
+    text: string,
+    styles: CanvasDrawingStyles,
+    transformation: ?SVGMatrix,
+    path: Path2D,
+    maxWidth?: number
+  ): void;
+  addPathByStrokingText(
+    text: string,
+    styles: CanvasDrawingStyles,
+    transformation: ?SVGMatrix,
+    path: Path2D,
+    maxWidth?: number
+  ): void;
+
+  // CanvasPathMethods
+  // shared path API methods
+  arc(
+    x: number,
+    y: number,
+    radius: number,
+    startAngle: number,
+    endAngle: number,
+    anticlockwise?: boolean
+  ): void;
+  arcTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    radius: number,
+    _: void,
+    _: void
+  ): void;
+  arcTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    radiusX: number,
+    radiusY: number,
+    rotation: number
+  ): void;
+  bezierCurveTo(
+    cp1x: number,
+    cp1y: number,
+    cp2x: number,
+    cp2y: number,
+    x: number,
+    y: number
+  ): void;
+  closePath(): void;
+  ellipse(
+    x: number,
+    y: number,
+    radiusX: number,
+    radiusY: number,
+    rotation: number,
+    startAngle: number,
+    endAngle: number,
+    anticlockwise?: boolean
+  ): void;
+  lineTo(x: number, y: number): void;
+  moveTo(x: number, y: number): void;
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+  rect(x: number, y: number, w: number, h: number): void;
+}
+
+declare class ImageData {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+
+  // constructor methods are used in Worker where CanvasRenderingContext2D
+  //  is unavailable.
+  // https://html.spec.whatwg.org/multipage/scripting.html#dom-imagedata
+  constructor(data: Uint8ClampedArray, width: number, height: number): void;
+  constructor(width: number, height: number): void;
+}
+
+declare class CanvasRenderingContext2D {
+  canvas: HTMLCanvasElement;
+
+  // canvas dimensions
+  width: number;
+  height: number;
+
+  // for contexts that aren't directly fixed to a specific canvas
+  commit(): void;
+
+  // state
+  save(): void;
+  restore(): void;
+
+  // transformations
+  currentTransform: SVGMatrix;
+  scale(x: number, y: number): void;
+  rotate(angle: number): void;
+  translate(x: number, y: number): void;
+  transform(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number
+  ): void;
+  setTransform(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number
+  ): void;
+  resetTransform(): void;
+
+  // compositing
+  globalAlpha: number;
+  globalCompositeOperation: string;
+
+  // image smoothing
+  imageSmoothingEnabled: boolean;
+  imageSmoothingQuality: 'low' | 'medium' | 'high';
+
+  // filters
+  filter: string;
+
+  // colours and styles
+  strokeStyle: string | CanvasGradient | CanvasPattern;
+  fillStyle: string | CanvasGradient | CanvasPattern;
+  createLinearGradient(
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number
+  ): CanvasGradient;
+  createRadialGradient(
+    x0: number,
+    y0: number,
+    r0: number,
+    x1: number,
+    y1: number,
+    r1: number
+  ): CanvasGradient;
+  createPattern(image: CanvasImageSource, repetition: ?string): CanvasPattern;
+
+  // shadows
+  shadowOffsetX: number;
+  shadowOffsetY: number;
+  shadowBlur: number;
+  shadowColor: string;
+
+  // rects
+  clearRect(x: number, y: number, w: number, h: number): void;
+  fillRect(x: number, y: number, w: number, h: number): void;
+  roundRect(
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    radii?: number | DOMPointInit | $ReadOnlyArray<number | DOMPointInit>
+  ): void;
+  strokeRect(x: number, y: number, w: number, h: number): void;
+
+  // path API
+  beginPath(): void;
+  fill(fillRule?: CanvasFillRule): void;
+  fill(path: Path2D, fillRule?: CanvasFillRule): void;
+  stroke(): void;
+  stroke(path: Path2D): void;
+  drawFocusIfNeeded(element: Element): void;
+  drawFocusIfNeeded(path: Path2D, element: Element): void;
+  scrollPathIntoView(): void;
+  scrollPathIntoView(path: Path2D): void;
+  clip(fillRule?: CanvasFillRule): void;
+  clip(path: Path2D, fillRule?: CanvasFillRule): void;
+  resetClip(): void;
+  isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
+  isPointInPath(
+    path: Path2D,
+    x: number,
+    y: number,
+    fillRule?: CanvasFillRule
+  ): boolean;
+  isPointInStroke(x: number, y: number): boolean;
+  isPointInStroke(path: Path2D, x: number, y: number): boolean;
+
+  // text (see also the CanvasDrawingStyles interface)
+  fillText(text: string, x: number, y: number, maxWidth?: number): void;
+  strokeText(text: string, x: number, y: number, maxWidth?: number): void;
+  measureText(text: string): TextMetrics;
+
+  // drawing images
+  drawImage(image: CanvasImageSource, dx: number, dy: number): void;
+  drawImage(
+    image: CanvasImageSource,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number
+  ): void;
+  drawImage(
+    image: CanvasImageSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number
+  ): void;
+
+  // hit regions
+  addHitRegion(options?: HitRegionOptions): void;
+  removeHitRegion(id: string): void;
+  clearHitRegions(): void;
+
+  // pixel manipulation
+  createImageData(sw: number, sh: number): ImageData;
+  createImageData(imagedata: ImageData): ImageData;
+  getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
+  putImageData(imagedata: ImageData, dx: number, dy: number): void;
+  putImageData(
+    imagedata: ImageData,
+    dx: number,
+    dy: number,
+    dirtyX: number,
+    dirtyY: number,
+    dirtyWidth: number,
+    dirtyHeight: number
+  ): void;
+
+  // CanvasDrawingStyles
+  // line caps/joins
+  lineWidth: number;
+  lineCap: string;
+  lineJoin: string;
+  miterLimit: number;
+
+  // dashed lines
+  setLineDash(segments: Array<number>): void;
+  getLineDash(): Array<number>;
+  lineDashOffset: number;
+
+  // text
+  font: string;
+  textAlign: string;
+  textBaseline: string;
+  direction: string;
+
+  // CanvasPathMethods
+  // shared path API methods
+  closePath(): void;
+  moveTo(x: number, y: number): void;
+  lineTo(x: number, y: number): void;
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+  bezierCurveTo(
+    cp1x: number,
+    cp1y: number,
+    cp2x: number,
+    cp2y: number,
+    x: number,
+    y: number
+  ): void;
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+  arcTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    radiusX: number,
+    radiusY: number,
+    rotation: number
+  ): void;
+  rect(x: number, y: number, w: number, h: number): void;
+  arc(
+    x: number,
+    y: number,
+    radius: number,
+    startAngle: number,
+    endAngle: number,
+    anticlockwise?: boolean
+  ): void;
+  ellipse(
+    x: number,
+    y: number,
+    radiusX: number,
+    radiusY: number,
+    rotation: number,
+    startAngle: number,
+    endAngle: number,
+    anticlockwise?: boolean
+  ): void;
+}
+
+// http://www.w3.org/TR/html5/scripting-1.html#renderingcontext
+type RenderingContext = CanvasRenderingContext2D | WebGLRenderingContext;
+
+// https://www.w3.org/TR/html5/scripting-1.html#htmlcanvaselement
+declare class HTMLCanvasElement extends HTMLElement {
+  tagName: 'CANVAS';
+  width: number;
+  height: number;
+  getContext(contextId: '2d', ...args: any): CanvasRenderingContext2D;
+  getContext(
+    contextId: 'webgl',
+    contextAttributes?: Partial<WebGLContextAttributes>
+  ): ?WebGLRenderingContext;
+  // IE currently only supports "experimental-webgl"
+  getContext(
+    contextId: 'experimental-webgl',
+    contextAttributes?: Partial<WebGLContextAttributes>
+  ): ?WebGLRenderingContext;
+  getContext(contextId: string, ...args: any): ?RenderingContext; // fallback
+  toDataURL(type?: string, ...args: any): string;
+  toBlob(callback: (v: File) => void, type?: string, ...args: any): void;
+  captureStream(frameRate?: number): CanvasCaptureMediaStream;
+}
+
+// https://html.spec.whatwg.org/multipage/forms.html#the-details-element
+declare class HTMLDetailsElement extends HTMLElement {
+  tagName: 'DETAILS';
+  open: boolean;
+}
+
+declare class HTMLFormElement extends HTMLElement {
+  tagName: 'FORM';
+  @@iterator(): Iterator<HTMLElement>;
+  [index: number | string]: HTMLElement | null;
+  acceptCharset: string;
+  action: string;
+  elements: HTMLCollection<HTMLElement>;
+  encoding: string;
+  enctype: string;
+  length: number;
+  method: string;
+  name: string;
+  rel: string;
+  target: string;
+
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  reset(): void;
+  submit(): void;
+}
+
+// https://www.w3.org/TR/html5/forms.html#the-fieldset-element
+declare class HTMLFieldSetElement extends HTMLElement {
+  tagName: 'FIELDSET';
+  disabled: boolean;
+  elements: HTMLCollection<HTMLElement>; // readonly
+  form: HTMLFormElement | null; // readonly
+  name: string;
+  type: string; // readonly
+
+  checkValidity(): boolean;
+  setCustomValidity(error: string): void;
+}
+
+declare class HTMLLegendElement extends HTMLElement {
+  tagName: 'LEGEND';
+  form: HTMLFormElement | null; // readonly
+}
+
+declare class HTMLIFrameElement extends HTMLElement {
+  tagName: 'IFRAME';
+  allowFullScreen: boolean;
+  contentDocument: Document;
+  contentWindow: any;
+  frameBorder: string;
+  height: string;
+  marginHeight: string;
+  marginWidth: string;
+  name: string;
+  scrolling: string;
+  sandbox: DOMTokenList;
+  src: string;
+  // flowlint unsafe-getters-setters:off
+  get srcdoc(): string;
+  set srcdoc(value: string | TrustedHTML): void;
+  // flowlint unsafe-getters-setters:error
+  width: string;
+}
+
+declare class HTMLImageElement extends HTMLElement {
+  tagName: 'IMG';
+  alt: string;
+  complete: boolean; // readonly
+  crossOrigin: ?string;
+  currentSrc: string; // readonly
+  height: number;
+  decode(): Promise<void>;
+  isMap: boolean;
+  naturalHeight: number; // readonly
+  naturalWidth: number; // readonly
+  sizes: string;
+  src: string;
+  srcset: string;
+  useMap: string;
+  width: number;
+}
+
+declare class Image extends HTMLImageElement {
+  constructor(width?: number, height?: number): void;
+}
+
+declare class MediaError {
+  MEDIA_ERR_ABORTED: number;
+  MEDIA_ERR_NETWORK: number;
+  MEDIA_ERR_DECODE: number;
+  MEDIA_ERR_SRC_NOT_SUPPORTED: number;
+  code: number;
+  message: ?string;
+}
+
+declare class TimeRanges {
+  length: number;
+  start(index: number): number;
+  end(index: number): number;
+}
+
+declare class Audio extends HTMLAudioElement {
+  constructor(URLString?: string): void;
+}
+
+declare class AudioTrack {
+  id: string;
+  kind: string;
+  label: string;
+  language: string;
+  enabled: boolean;
+}
+
+declare class AudioTrackList extends EventTarget {
+  length: number;
+  [index: number]: AudioTrack;
+
+  getTrackById(id: string): ?AudioTrack;
+
+  onchange: (ev: any) => any;
+  onaddtrack: (ev: any) => any;
+  onremovetrack: (ev: any) => any;
+}
+
+declare class VideoTrack {
+  id: string;
+  kind: string;
+  label: string;
+  language: string;
+  selected: boolean;
+}
+
+declare class VideoTrackList extends EventTarget {
+  length: number;
+  [index: number]: VideoTrack;
+  getTrackById(id: string): ?VideoTrack;
+  selectedIndex: number;
+
+  onchange: (ev: any) => any;
+  onaddtrack: (ev: any) => any;
+  onremovetrack: (ev: any) => any;
+}
+
+declare class TextTrackCue extends EventTarget {
+  constructor(startTime: number, endTime: number, text: string): void;
+
+  track: TextTrack;
+  id: string;
+  startTime: number;
+  endTime: number;
+  pauseOnExit: boolean;
+  vertical: string;
+  snapToLines: boolean;
+  lines: number;
+  position: number;
+  size: number;
+  align: string;
+  text: string;
+
+  getCueAsHTML(): Node;
+  onenter: (ev: any) => any;
+  onexit: (ev: any) => any;
+}
+
+declare class TextTrackCueList {
+  @@iterator(): Iterator<TextTrackCue>;
+  length: number;
+  [index: number]: TextTrackCue;
+  getCueById(id: string): ?TextTrackCue;
+}
+
+declare class TextTrack extends EventTarget {
+  kind: string;
+  label: string;
+  language: string;
+
+  mode: string;
+
+  cues: TextTrackCueList;
+  activeCues: TextTrackCueList;
+
+  addCue(cue: TextTrackCue): void;
+  removeCue(cue: TextTrackCue): void;
+
+  oncuechange: (ev: any) => any;
+}
+
+declare class TextTrackList extends EventTarget {
+  length: number;
+  [index: number]: TextTrack;
+
+  onaddtrack: (ev: any) => any;
+  onremovetrack: (ev: any) => any;
+}
+
+declare class HTMLMediaElement extends HTMLElement {
+  // error state
+  error: ?MediaError;
+
+  // network state
+  src: string;
+  srcObject: ?any;
+  currentSrc: string;
+  crossOrigin: ?string;
+  NETWORK_EMPTY: number;
+  NETWORK_IDLE: number;
+  NETWORK_LOADING: number;
+  NETWORK_NO_SOURCE: number;
+  networkState: number;
+  preload: string;
+  buffered: TimeRanges;
+  load(): void;
+  canPlayType(type: string): string;
+
+  // ready state
+  HAVE_NOTHING: number;
+  HAVE_METADATA: number;
+  HAVE_CURRENT_DATA: number;
+  HAVE_FUTURE_DATA: number;
+  HAVE_ENOUGH_DATA: number;
+  readyState: number;
+  seeking: boolean;
+
+  // playback state
+  currentTime: number;
+  duration: number;
+  startDate: Date;
+  paused: boolean;
+  defaultPlaybackRate: number;
+  playbackRate: number;
+  played: TimeRanges;
+  seekable: TimeRanges;
+  ended: boolean;
+  autoplay: boolean;
+  loop: boolean;
+  play(): Promise<void>;
+  pause(): void;
+  fastSeek(): void;
+  captureStream(): MediaStream;
+
+  // media controller
+  mediaGroup: string;
+  controller: ?any;
+
+  // controls
+  controls: boolean;
+  volume: number;
+  muted: boolean;
+  defaultMuted: boolean;
+  controlsList?: DOMTokenList;
+
+  // tracks
+  audioTracks: AudioTrackList;
+  videoTracks: VideoTrackList;
+  textTracks: TextTrackList;
+  addTextTrack(kind: string, label?: string, language?: string): TextTrack;
+
+  // media keys
+  mediaKeys?: ?MediaKeys;
+  setMediakeys?: (mediakeys: ?MediaKeys) => Promise<?MediaKeys>;
+}
+
+declare class HTMLAudioElement extends HTMLMediaElement {
+  tagName: 'AUDIO';
+}
+
+declare class HTMLVideoElement extends HTMLMediaElement {
+  tagName: 'VIDEO';
+  width: number;
+  height: number;
+  videoWidth: number;
+  videoHeight: number;
+  poster: string;
+}
+
+declare class HTMLSourceElement extends HTMLElement {
+  tagName: 'SOURCE';
+  src: string;
+  type: string;
+
+  //when used with the picture element
+  srcset: string;
+  sizes: string;
+  media: string;
+}
+
+declare class ValidityState {
+  badInput: boolean;
+  customError: boolean;
+  patternMismatch: boolean;
+  rangeOverflow: boolean;
+  rangeUnderflow: boolean;
+  stepMismatch: boolean;
+  tooLong: boolean;
+  tooShort: boolean;
+  typeMismatch: boolean;
+  valueMissing: boolean;
+  valid: boolean;
+}
+
+// https://w3c.github.io/html/sec-forms.html#dom-selectionapielements-setselectionrange
+type SelectionDirection = 'backward' | 'forward' | 'none';
+type SelectionMode = 'select' | 'start' | 'end' | 'preserve';
+declare class HTMLInputElement extends HTMLElement {
+  tagName: 'INPUT';
+  accept: string;
+  align: string;
+  alt: string;
+  autocomplete: string;
+  autofocus: boolean;
+  border: string;
+  checked: boolean;
+  complete: boolean;
+  defaultChecked: boolean;
+  defaultValue: string;
+  dirname: string;
+  disabled: boolean;
+  dynsrc: string;
+  files: FileList;
+  form: HTMLFormElement | null;
+  formAction: string;
+  formEncType: string;
+  formMethod: string;
+  formNoValidate: boolean;
+  formTarget: string;
+  height: string;
+  hspace: number;
+  indeterminate: boolean;
+  labels: NodeList<HTMLLabelElement>;
+  list: HTMLElement | null;
+  loop: number;
+  lowsrc: string;
+  max: string;
+  maxLength: number;
+  min: string;
+  multiple: boolean;
+  name: string;
+  pattern: string;
+  placeholder: string;
+  readOnly: boolean;
+  required: boolean;
+  selectionDirection: SelectionDirection;
+  selectionEnd: number;
+  selectionStart: number;
+  size: number;
+  src: string;
+  start: string;
+  status: boolean;
+  step: string;
+  type: string;
+  useMap: string;
+  validationMessage: string;
+  validity: ValidityState;
+  value: string;
+  valueAsDate: Date;
+  valueAsNumber: number;
+  vrml: string;
+  vspace: number;
+  width: string;
+  willValidate: boolean;
+  popoverTargetElement: Element | null;
+  popoverTargetAction: 'toggle' | 'show' | 'hide';
+
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  setCustomValidity(error: string): void;
+  createTextRange(): TextRange;
+  select(): void;
+  setRangeText(
+    replacement: string,
+    start?: void,
+    end?: void,
+    selectMode?: void
+  ): void;
+  setRangeText(
+    replacement: string,
+    start: number,
+    end: number,
+    selectMode?: SelectionMode
+  ): void;
+  setSelectionRange(
+    start: number,
+    end: number,
+    direction?: SelectionDirection
+  ): void;
+  showPicker(): void;
+  stepDown(stepDecrement?: number): void;
+  stepUp(stepIncrement?: number): void;
+}
+
+declare class HTMLButtonElement extends HTMLElement {
+  tagName: 'BUTTON';
+  autofocus: boolean;
+  disabled: boolean;
+  form: HTMLFormElement | null;
+  labels: NodeList<HTMLLabelElement> | null;
+  name: string;
+  type: string;
+  validationMessage: string;
+  validity: ValidityState;
+  value: string;
+  willValidate: boolean;
+
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  setCustomValidity(error: string): void;
+  popoverTargetElement: Element | null;
+  popoverTargetAction: 'toggle' | 'show' | 'hide';
+}
+
+// https://w3c.github.io/html/sec-forms.html#the-textarea-element
+declare class HTMLTextAreaElement extends HTMLElement {
+  tagName: 'TEXTAREA';
+  autofocus: boolean;
+  cols: number;
+  dirName: string;
+  disabled: boolean;
+  form: HTMLFormElement | null;
+  maxLength: number;
+  name: string;
+  placeholder: string;
+  readOnly: boolean;
+  required: boolean;
+  rows: number;
+  wrap: string;
+
+  type: string;
+  defaultValue: string;
+  value: string;
+  textLength: number;
+
+  willValidate: boolean;
+  validity: ValidityState;
+  validationMessage: string;
+  checkValidity(): boolean;
+  setCustomValidity(error: string): void;
+
+  labels: NodeList<HTMLLabelElement>;
+
+  select(): void;
+  selectionStart: number;
+  selectionEnd: number;
+  selectionDirection: SelectionDirection;
+  setSelectionRange(
+    start: number,
+    end: number,
+    direction?: SelectionDirection
+  ): void;
+}
+
+declare class HTMLSelectElement extends HTMLElement {
+  tagName: 'SELECT';
+  autocomplete: string;
+  autofocus: boolean;
+  disabled: boolean;
+  form: HTMLFormElement | null;
+  labels: NodeList<HTMLLabelElement>;
+  length: number;
+  multiple: boolean;
+  name: string;
+  options: HTMLOptionsCollection;
+  required: boolean;
+  selectedIndex: number;
+  selectedOptions: HTMLCollection<HTMLOptionElement>;
+  size: number;
+  type: string;
+  validationMessage: string;
+  validity: ValidityState;
+  value: string;
+  willValidate: boolean;
+
+  add(element: HTMLElement, before?: HTMLElement): void;
+  checkValidity(): boolean;
+  item(index: number): HTMLOptionElement | null;
+  namedItem(name: string): HTMLOptionElement | null;
+  remove(index?: number): void;
+  setCustomValidity(error: string): void;
+}
+
+declare class HTMLOptionsCollection extends HTMLCollection<HTMLOptionElement> {
+  selectedIndex: number;
+  add(
+    element: HTMLOptionElement | HTMLOptGroupElement,
+    before?: HTMLElement | number
+  ): void;
+  remove(index: number): void;
+}
+
+declare class HTMLOptionElement extends HTMLElement {
+  tagName: 'OPTION';
+  defaultSelected: boolean;
+  disabled: boolean;
+  form: HTMLFormElement | null;
+  index: number;
+  label: string;
+  selected: boolean;
+  text: string;
+  value: string;
+}
+
+declare class HTMLOptGroupElement extends HTMLElement {
+  tagName: 'OPTGROUP';
+  disabled: boolean;
+  label: string;
+}
+
+declare class HTMLAnchorElement extends HTMLElement {
+  tagName: 'A';
+  charset: string;
+  coords: string;
+  download: string;
+  hash: string;
+  host: string;
+  hostname: string;
+  href: string;
+  hreflang: string;
+  media: string;
+  name: string;
+  origin: string;
+  password: string;
+  pathname: string;
+  port: string;
+  protocol: string;
+  rel: string;
+  rev: string;
+  search: string;
+  shape: string;
+  target: string;
+  text: string;
+  type: string;
+  username: string;
+}
+
+// https://w3c.github.io/html/sec-forms.html#the-label-element
+declare class HTMLLabelElement extends HTMLElement {
+  tagName: 'LABEL';
+  form: HTMLFormElement | null;
+  htmlFor: string;
+  control: HTMLElement | null;
+}
+
+declare class HTMLLinkElement extends HTMLElement {
+  tagName: 'LINK';
+  crossOrigin: ?('anonymous' | 'use-credentials');
+  href: string;
+  hreflang: string;
+  media: string;
+  rel: string;
+  sizes: DOMTokenList;
+  type: string;
+  as: string;
+}
+
+declare class HTMLScriptElement extends HTMLElement {
+  tagName: 'SCRIPT';
+  async: boolean;
+  charset: string;
+  crossOrigin?: string;
+  defer: boolean;
+  // flowlint unsafe-getters-setters:off
+  get src(): string;
+  set src(value: string | TrustedScriptURL): void;
+  get text(): string;
+  set text(value: string | TrustedScript): void;
+  // flowlint unsafe-getters-setters:error
+  type: string;
+}
+
+declare class HTMLStyleElement extends HTMLElement {
+  tagName: 'STYLE';
+  disabled: boolean;
+  media: string;
+  scoped: boolean;
+  sheet: ?CSSStyleSheet;
+  type: string;
+}
+
+declare class HTMLParagraphElement extends HTMLElement {
+  tagName: 'P';
+  align: 'left' | 'center' | 'right' | 'justify'; // deprecated in HTML 4.01
+}
+
+declare class HTMLHtmlElement extends HTMLElement {
+  tagName: 'HTML';
+}
+
+declare class HTMLBodyElement extends HTMLElement {
+  tagName: 'BODY';
+}
+
+declare class HTMLHeadElement extends HTMLElement {
+  tagName: 'HEAD';
+}
+
+declare class HTMLDivElement extends HTMLElement {
+  tagName: 'DIV';
+}
+
+declare class HTMLSpanElement extends HTMLElement {
+  tagName: 'SPAN';
+}
+
+declare class HTMLAppletElement extends HTMLElement {}
+
+declare class HTMLHeadingElement extends HTMLElement {
+  tagName: 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6';
+}
+
+declare class HTMLHRElement extends HTMLElement {
+  tagName: 'HR';
+}
+
+declare class HTMLBRElement extends HTMLElement {
+  tagName: 'BR';
+}
+
+declare class HTMLDListElement extends HTMLElement {
+  tagName: 'DL';
+}
+
+declare class HTMLAreaElement extends HTMLElement {
+  tagName: 'AREA';
+  alt: string;
+  coords: string;
+  shape: string;
+  target: string;
+  download: string;
+  ping: string;
+  rel: string;
+  relList: DOMTokenList;
+  referrerPolicy: string;
+}
+
+declare class HTMLDataElement extends HTMLElement {
+  tagName: 'DATA';
+  value: string;
+}
+
+declare class HTMLDataListElement extends HTMLElement {
+  tagName: 'DATALIST';
+  options: HTMLCollection<HTMLOptionElement>;
+}
+
+declare class HTMLDialogElement extends HTMLElement {
+  tagName: 'DIALOG';
+  open: boolean;
+  returnValue: string;
+  show(): void;
+  showModal(): void;
+  close(returnValue: ?string): void;
+}
+
+declare class HTMLEmbedElement extends HTMLElement {
+  tagName: 'EMBED';
+  src: string;
+  type: string;
+  width: string;
+  height: string;
+  getSVGDocument(): ?Document;
+}
+
+declare class HTMLMapElement extends HTMLElement {
+  tagName: 'MAP';
+  areas: HTMLCollection<HTMLAreaElement>;
+  images: HTMLCollection<HTMLImageElement>;
+  name: string;
+}
+
+declare class HTMLMeterElement extends HTMLElement {
+  tagName: 'METER';
+  high: number;
+  low: number;
+  max: number;
+  min: number;
+  optimum: number;
+  value: number;
+  labels: NodeList<HTMLLabelElement>;
+}
+
+declare class HTMLModElement extends HTMLElement {
+  tagName: 'DEL' | 'INS';
+  cite: string;
+  dateTime: string;
+}
+
+declare class HTMLObjectElement extends HTMLElement {
+  tagName: 'OBJECT';
+  contentDocument: ?Document;
+  contentWindow: ?WindowProxy;
+  data: string;
+  form: ?HTMLFormElement;
+  height: string;
+  name: string;
+  type: string;
+  typeMustMatch: boolean;
+  useMap: string;
+  validationMessage: string;
+  validity: ValidityState;
+  width: string;
+  willValidate: boolean;
+  checkValidity(): boolean;
+  getSVGDocument(): ?Document;
+  reportValidity(): boolean;
+  setCustomValidity(error: string): void;
+}
+
+declare class HTMLOutputElement extends HTMLElement {
+  defaultValue: string;
+  form: ?HTMLFormElement;
+  htmlFor: DOMTokenList;
+  labels: NodeList<HTMLLabelElement>;
+  name: string;
+  type: string;
+  validationMessage: string;
+  validity: ValidityState;
+  value: string;
+  willValidate: boolean;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  setCustomValidity(error: string): void;
+}
+
+declare class HTMLParamElement extends HTMLElement {
+  tagName: 'PARAM';
+  name: string;
+  value: string;
+}
+
+declare class HTMLProgressElement extends HTMLElement {
+  tagName: 'PROGRESS';
+  labels: NodeList<HTMLLabelElement>;
+  max: number;
+  position: number;
+  value: number;
+}
+
+declare class HTMLPictureElement extends HTMLElement {
+  tagName: 'PICTURE';
+}
+
+declare class HTMLTimeElement extends HTMLElement {
+  tagName: 'TIME';
+  dateTime: string;
+}
+
+declare class HTMLTitleElement extends HTMLElement {
+  tagName: 'TITLE';
+  text: string;
+}
+
+declare class HTMLTrackElement extends HTMLElement {
+  tagName: 'TRACK';
+  static NONE: 0;
+  static LOADING: 1;
+  static LOADED: 2;
+  static ERROR: 3;
+
+  default: boolean;
+  kind: string;
+  label: string;
+  readyState: 0 | 1 | 2 | 3;
+  src: string;
+  srclang: string;
+  track: TextTrack;
+}
+
+declare class HTMLQuoteElement extends HTMLElement {
+  tagName: 'BLOCKQUOTE' | 'Q';
+  cite: string;
+}
+
+declare class HTMLOListElement extends HTMLElement {
+  tagName: 'OL';
+  reversed: boolean;
+  start: number;
+  type: string;
+}
+
+declare class HTMLUListElement extends HTMLElement {
+  tagName: 'UL';
+}
+
+declare class HTMLLIElement extends HTMLElement {
+  tagName: 'LI';
+  value: number;
+}
+
+declare class HTMLPreElement extends HTMLElement {
+  tagName: 'PRE';
+}
+
+declare class HTMLMetaElement extends HTMLElement {
+  tagName: 'META';
+  content: string;
+  httpEquiv: string;
+  name: string;
+}
+
+declare class HTMLUnknownElement extends HTMLElement {}
+
+declare class Storage {
+  length: number;
+  getItem(key: string): ?string;
+  setItem(key: string, data: string): void;
+  clear(): void;
+  removeItem(key: string): void;
+  key(index: number): ?string;
+  [name: string]: ?string;
+}
+
+/* window */
+
+declare type WindowProxy = any;
+declare function alert(message?: any): void;
+declare function prompt(message?: any, value?: any): string;
+declare function close(): void;
+declare function confirm(message?: string): boolean;
+declare function getComputedStyle(
+  elt: Element,
+  pseudoElt?: string
+): CSSStyleDeclaration;
+declare opaque type AnimationFrameID;
+declare function requestAnimationFrame(
+  callback: (timestamp: number) => void
+): AnimationFrameID;
+declare function cancelAnimationFrame(requestId: AnimationFrameID): void;
+declare opaque type IdleCallbackID;
+declare function requestIdleCallback(
+  cb: (deadline: {
+    didTimeout: boolean,
+    timeRemaining: () => number,
+    ...
+  }) => void,
+  opts?: {timeout: number, ...}
+): IdleCallbackID;
+declare function cancelIdleCallback(id: IdleCallbackID): void;
+declare var localStorage: Storage;
+declare var devicePixelRatio: number;
+declare function focus(): void;
+declare function onfocus(ev: Event): any;
+declare function open(
+  url?: string,
+  target?: string,
+  features?: string,
+  replace?: boolean
+): any;
+declare var parent: WindowProxy;
+declare function print(): void;
+declare var self: any;
+declare var sessionStorage: Storage;
+declare var top: WindowProxy;
+declare function getSelection(): Selection | null;
+declare var customElements: CustomElementRegistry;
+declare function scroll(x: number, y: number): void;
+declare function scroll(options: ScrollToOptions): void;
+declare function scrollTo(x: number, y: number): void;
+declare function scrollTo(options: ScrollToOptions): void;
+declare function scrollBy(x: number, y: number): void;
+declare function scrollBy(options: ScrollToOptions): void;
+
+type HTMLElementTagNameMap = {
+  a: HTMLAnchorElement,
+  abbr: HTMLElement,
+  address: HTMLElement,
+  area: HTMLAreaElement,
+  article: HTMLElement,
+  aside: HTMLElement,
+  audio: HTMLAudioElement,
+  b: HTMLElement,
+  base: HTMLBaseElement,
+  bdi: HTMLElement,
+  bdo: HTMLElement,
+  blockquote: HTMLQuoteElement,
+  body: HTMLBodyElement,
+  br: HTMLBRElement,
+  button: HTMLButtonElement,
+  canvas: HTMLCanvasElement,
+  caption: HTMLTableCaptionElement,
+  cite: HTMLElement,
+  code: HTMLElement,
+  col: HTMLTableColElement,
+  colgroup: HTMLTableColElement,
+  data: HTMLDataElement,
+  datalist: HTMLDataListElement,
+  dd: HTMLElement,
+  del: HTMLModElement,
+  details: HTMLDetailsElement,
+  dfn: HTMLElement,
+  dialog: HTMLDialogElement,
+  div: HTMLDivElement,
+  dl: HTMLDListElement,
+  dt: HTMLElement,
+  em: HTMLElement,
+  embed: HTMLEmbedElement,
+  fieldset: HTMLFieldSetElement,
+  figcaption: HTMLElement,
+  figure: HTMLElement,
+  footer: HTMLElement,
+  form: HTMLFormElement,
+  h1: HTMLHeadingElement,
+  h2: HTMLHeadingElement,
+  h3: HTMLHeadingElement,
+  h4: HTMLHeadingElement,
+  h5: HTMLHeadingElement,
+  h6: HTMLHeadingElement,
+  head: HTMLHeadElement,
+  header: HTMLElement,
+  hgroup: HTMLElement,
+  hr: HTMLHRElement,
+  html: HTMLHtmlElement,
+  i: HTMLElement,
+  iframe: HTMLIFrameElement,
+  img: HTMLImageElement,
+  input: HTMLInputElement,
+  ins: HTMLModElement,
+  kbd: HTMLElement,
+  label: HTMLLabelElement,
+  legend: HTMLLegendElement,
+  li: HTMLLIElement,
+  link: HTMLLinkElement,
+  main: HTMLElement,
+  map: HTMLMapElement,
+  mark: HTMLElement,
+  menu: HTMLMenuElement,
+  meta: HTMLMetaElement,
+  meter: HTMLMeterElement,
+  nav: HTMLElement,
+  noscript: HTMLElement,
+  object: HTMLObjectElement,
+  ol: HTMLOListElement,
+  optgroup: HTMLOptGroupElement,
+  option: HTMLOptionElement,
+  output: HTMLOutputElement,
+  p: HTMLParagraphElement,
+  picture: HTMLPictureElement,
+  pre: HTMLPreElement,
+  progress: HTMLProgressElement,
+  q: HTMLQuoteElement,
+  rp: HTMLElement,
+  rt: HTMLElement,
+  ruby: HTMLElement,
+  s: HTMLElement,
+  samp: HTMLElement,
+  script: HTMLScriptElement,
+  search: HTMLElement,
+  section: HTMLElement,
+  select: HTMLSelectElement,
+  slot: HTMLSlotElement,
+  small: HTMLElement,
+  source: HTMLSourceElement,
+  span: HTMLSpanElement,
+  strong: HTMLElement,
+  style: HTMLStyleElement,
+  sub: HTMLElement,
+  summary: HTMLElement,
+  sup: HTMLElement,
+  table: HTMLTableElement,
+  tbody: HTMLTableSectionElement,
+  td: HTMLTableCellElement,
+  template: HTMLTemplateElement,
+  textarea: HTMLTextAreaElement,
+  tfoot: HTMLTableSectionElement,
+  th: HTMLTableCellElement,
+  thead: HTMLTableSectionElement,
+  time: HTMLTimeElement,
+  title: HTMLTitleElement,
+  tr: HTMLTableRowElement,
+  track: HTMLTrackElement,
+  u: HTMLElement,
+  ul: HTMLUListElement,
+  var: HTMLElement,
+  video: HTMLVideoElement,
+  wbr: HTMLElement,
+  [string]: Element,
+};
diff --git a/flow-typed/environments/node.js b/flow-typed/environments/node.js
new file mode 100644
index 00000000000..a3edff20f89
--- /dev/null
+++ b/flow-typed/environments/node.js
@@ -0,0 +1,4286 @@
+// flow-typed signature: 44d8f5b0b708cdf7288ec50b7c08e1bf
+// flow-typed version: 832153ff79/node/flow_>=v0.261.x
+
+interface ErrnoError extends Error {
+  address?: string;
+  code?: string;
+  dest?: string;
+  errno?: string | number;
+  info?: Object;
+  path?: string;
+  port?: number;
+  syscall?: string;
+}
+
+type Node$Conditional<T: boolean, IfTrue, IfFalse> = T extends true
+  ? IfTrue
+  : T extends false
+    ? IfFalse
+    : IfTrue | IfFalse;
+
+type buffer$NonBufferEncoding =
+  | 'hex'
+  | 'HEX'
+  | 'utf8'
+  | 'UTF8'
+  | 'utf-8'
+  | 'UTF-8'
+  | 'ascii'
+  | 'ASCII'
+  | 'binary'
+  | 'BINARY'
+  | 'base64'
+  | 'BASE64'
+  | 'ucs2'
+  | 'UCS2'
+  | 'ucs-2'
+  | 'UCS-2'
+  | 'utf16le'
+  | 'UTF16LE'
+  | 'utf-16le'
+  | 'UTF-16LE'
+  | 'latin1';
+type buffer$Encoding = buffer$NonBufferEncoding | 'buffer';
+type buffer$ToJSONRet = {
+  type: string,
+  data: Array<number>,
+  ...
+};
+
+declare class Buffer extends Uint8Array {
+  constructor(
+    value: Array<number> | number | string | Buffer | ArrayBuffer,
+    encoding?: buffer$Encoding
+  ): void;
+  [i: number]: number;
+  length: number;
+
+  compare(otherBuffer: Buffer): number;
+  copy(
+    targetBuffer: Buffer,
+    targetStart?: number,
+    sourceStart?: number,
+    sourceEnd?: number
+  ): number;
+  entries(): Iterator<[number, number]>;
+  equals(otherBuffer: Buffer): boolean;
+  fill(
+    value: string | Buffer | number,
+    offset?: number,
+    end?: number,
+    encoding?: string
+  ): this;
+  fill(value: string, encoding?: string): this;
+  includes(
+    value: string | Buffer | number,
+    offsetOrEncoding?: number | buffer$Encoding,
+    encoding?: buffer$Encoding
+  ): boolean;
+  indexOf(
+    value: string | Buffer | number,
+    offsetOrEncoding?: number | buffer$Encoding,
+    encoding?: buffer$Encoding
+  ): number;
+  inspect(): string;
+  keys(): Iterator<number>;
+  lastIndexOf(
+    value: string | Buffer | number,
+    offsetOrEncoding?: number | buffer$Encoding,
+    encoding?: buffer$Encoding
+  ): number;
+  readDoubleBE(offset?: number, noAssert?: boolean): number;
+  readDoubleLE(offset?: number, noAssert?: boolean): number;
+  readFloatBE(offset?: number, noAssert?: boolean): number;
+  readFloatLE(offset?: number, noAssert?: boolean): number;
+  readInt16BE(offset?: number, noAssert?: boolean): number;
+  readInt16LE(offset?: number, noAssert?: boolean): number;
+  readInt32BE(offset?: number, noAssert?: boolean): number;
+  readInt32LE(offset?: number, noAssert?: boolean): number;
+  readInt8(offset?: number, noAssert?: boolean): number;
+  readIntBE(offset: number, byteLength: number, noAssert?: boolean): number;
+  readIntLE(offset: number, byteLength: number, noAssert?: boolean): number;
+  readUInt16BE(offset?: number, noAssert?: boolean): number;
+  readUInt16LE(offset?: number, noAssert?: boolean): number;
+  readUInt32BE(offset?: number, noAssert?: boolean): number;
+  readUInt32LE(offset?: number, noAssert?: boolean): number;
+  readUInt8(offset?: number, noAssert?: boolean): number;
+  readUIntBE(offset: number, byteLength: number, noAssert?: boolean): number;
+  readUIntLE(offset: number, byteLength: number, noAssert?: boolean): number;
+  slice(start?: number, end?: number): this;
+  swap16(): Buffer;
+  swap32(): Buffer;
+  swap64(): Buffer;
+  toJSON(): buffer$ToJSONRet;
+  toString(encoding?: buffer$Encoding, start?: number, end?: number): string;
+  values(): Iterator<number>;
+  write(
+    string: string,
+    offset?: number,
+    length?: number,
+    encoding?: buffer$Encoding
+  ): number;
+  writeDoubleBE(value: number, offset?: number, noAssert?: boolean): number;
+  writeDoubleLE(value: number, offset?: number, noAssert?: boolean): number;
+  writeFloatBE(value: number, offset?: number, noAssert?: boolean): number;
+  writeFloatLE(value: number, offset?: number, noAssert?: boolean): number;
+  writeInt16BE(value: number, offset?: number, noAssert?: boolean): number;
+  writeInt16LE(value: number, offset?: number, noAssert?: boolean): number;
+  writeInt32BE(value: number, offset?: number, noAssert?: boolean): number;
+  writeInt32LE(value: number, offset?: number, noAssert?: boolean): number;
+  writeInt8(value: number, offset?: number, noAssert?: boolean): number;
+  writeIntBE(
+    value: number,
+    offset: number,
+    byteLength: number,
+    noAssert?: boolean
+  ): number;
+  writeIntLE(
+    value: number,
+    offset: number,
+    byteLength: number,
+    noAssert?: boolean
+  ): number;
+  writeUInt16BE(value: number, offset?: number, noAssert?: boolean): number;
+  writeUInt16LE(value: number, offset?: number, noAssert?: boolean): number;
+  writeUInt32BE(value: number, offset?: number, noAssert?: boolean): number;
+  writeUInt32LE(value: number, offset?: number, noAssert?: boolean): number;
+  writeUInt8(value: number, offset?: number, noAssert?: boolean): number;
+  writeUIntBE(
+    value: number,
+    offset: number,
+    byteLength: number,
+    noAssert?: boolean
+  ): number;
+  writeUIntLE(
+    value: number,
+    offset: number,
+    byteLength: number,
+    noAssert?: boolean
+  ): number;
+
+  static alloc(
+    size: number,
+    fill?: string | number,
+    encoding?: buffer$Encoding
+  ): Buffer;
+  static allocUnsafe(size: number): Buffer;
+  static allocUnsafeSlow(size: number): Buffer;
+  static byteLength(
+    string: string | Buffer | $TypedArray | DataView | ArrayBuffer,
+    encoding?: buffer$Encoding
+  ): number;
+  static compare(buf1: Buffer, buf2: Buffer): number;
+  static concat(list: Array<Buffer>, totalLength?: number): Buffer;
+
+  static from(value: Buffer): Buffer;
+  static from(value: string, encoding?: buffer$Encoding): Buffer;
+  static from(
+    value: ArrayBuffer | SharedArrayBuffer,
+    byteOffset?: number,
+    length?: number
+  ): Buffer;
+  static from(value: Iterable<number>): this;
+  static isBuffer(obj: any): boolean;
+  static isEncoding(encoding: string): boolean;
+}
+
+declare type Node$Buffer = typeof Buffer;
+
+declare module 'buffer' {
+  declare var kMaxLength: number;
+  declare var INSPECT_MAX_BYTES: number;
+  declare function transcode(
+    source: Node$Buffer,
+    fromEnc: buffer$Encoding,
+    toEnc: buffer$Encoding
+  ): Node$Buffer;
+  declare var Buffer: Node$Buffer;
+}
+
+type child_process$execOpts = {
+  cwd?: string,
+  env?: Object,
+  encoding?: string,
+  shell?: string,
+  timeout?: number,
+  maxBuffer?: number,
+  killSignal?: string | number,
+  uid?: number,
+  gid?: number,
+  windowsHide?: boolean,
+  ...
+};
+
+declare class child_process$Error extends Error {
+  code: number | string | null;
+  errno?: string;
+  syscall?: string;
+  path?: string;
+  spawnargs?: Array<string>;
+  killed?: boolean;
+  signal?: string | null;
+  cmd: string;
+}
+
+type child_process$execCallback = (
+  error: ?child_process$Error,
+  stdout: string | Buffer,
+  stderr: string | Buffer
+) => void;
+
+type child_process$execSyncOpts = {
+  cwd?: string,
+  input?: string | Buffer | $TypedArray | DataView,
+  stdio?: string | Array<any>,
+  env?: Object,
+  shell?: string,
+  uid?: number,
+  gid?: number,
+  timeout?: number,
+  killSignal?: string | number,
+  maxBuffer?: number,
+  encoding?: string,
+  windowsHide?: boolean,
+  ...
+};
+
+type child_process$execFileOpts = {
+  cwd?: string,
+  env?: Object,
+  encoding?: string,
+  timeout?: number,
+  maxBuffer?: number,
+  killSignal?: string | number,
+  uid?: number,
+  gid?: number,
+  windowsHide?: boolean,
+  windowsVerbatimArguments?: boolean,
+  shell?: boolean | string,
+  ...
+};
+
+type child_process$execFileCallback = (
+  error: ?child_process$Error,
+  stdout: string | Buffer,
+  stderr: string | Buffer
+) => void;
+
+type child_process$execFileSyncOpts = {
+  cwd?: string,
+  input?: string | Buffer | $TypedArray | DataView,
+  stdio?: string | Array<any>,
+  env?: Object,
+  uid?: number,
+  gid?: number,
+  timeout?: number,
+  killSignal?: string | number,
+  maxBuffer?: number,
+  encoding?: string,
+  windowsHide?: boolean,
+  shell?: boolean | string,
+  ...
+};
+
+type child_process$forkOpts = {
+  cwd?: string,
+  env?: Object,
+  execPath?: string,
+  execArgv?: Array<string>,
+  silent?: boolean,
+  stdio?: Array<any> | string,
+  windowsVerbatimArguments?: boolean,
+  uid?: number,
+  gid?: number,
+  ...
+};
+
+type child_process$Handle = any; // TODO
+
+type child_process$spawnOpts = {
+  cwd?: string,
+  env?: Object,
+  argv0?: string,
+  stdio?: string | Array<any>,
+  detached?: boolean,
+  uid?: number,
+  gid?: number,
+  shell?: boolean | string,
+  windowsVerbatimArguments?: boolean,
+  windowsHide?: boolean,
+  ...
+};
+
+type child_process$spawnRet = {
+  pid: number,
+  output: Array<any>,
+  stdout: Buffer | string,
+  stderr: Buffer | string,
+  status: number,
+  signal: string,
+  error: Error,
+  ...
+};
+
+type child_process$spawnSyncOpts = {
+  cwd?: string,
+  input?: string | Buffer,
+  stdio?: string | Array<any>,
+  env?: Object,
+  uid?: number,
+  gid?: number,
+  timeout?: number,
+  killSignal?: string,
+  maxBuffer?: number,
+  encoding?: string,
+  shell?: boolean | string,
+  ...
+};
+
+type child_process$spawnSyncRet = child_process$spawnRet;
+
+declare class child_process$ChildProcess extends events$EventEmitter {
+  channel: Object;
+  connected: boolean;
+  killed: boolean;
+  pid: number;
+  exitCode: number | null;
+  stderr: stream$Readable;
+  stdin: stream$Writable;
+  stdio: Array<any>;
+  stdout: stream$Readable;
+
+  disconnect(): void;
+  kill(signal?: string): void;
+  send(
+    message: Object,
+    sendHandleOrCallback?: child_process$Handle,
+    optionsOrCallback?: Object | Function,
+    callback?: Function
+  ): boolean;
+  unref(): void;
+  ref(): void;
+}
+
+declare module 'child_process' {
+  declare var ChildProcess: typeof child_process$ChildProcess;
+
+  declare function exec(
+    command: string,
+    optionsOrCallback?: child_process$execOpts | child_process$execCallback,
+    callback?: child_process$execCallback
+  ): child_process$ChildProcess;
+
+  declare function execSync(
+    command: string,
+    options: {
+      encoding: buffer$NonBufferEncoding,
+      ...
+    } & child_process$execSyncOpts
+  ): string;
+
+  declare function execSync(
+    command: string,
+    options?: child_process$execSyncOpts
+  ): Buffer;
+
+  declare function execFile(
+    file: string,
+    argsOrOptionsOrCallback?:
+      | Array<string>
+      | child_process$execFileOpts
+      | child_process$execFileCallback,
+    optionsOrCallback?:
+      | child_process$execFileOpts
+      | child_process$execFileCallback,
+    callback?: child_process$execFileCallback
+  ): child_process$ChildProcess;
+
+  declare function execFileSync(
+    command: string,
+    argsOrOptions?: Array<string> | child_process$execFileSyncOpts,
+    options?: child_process$execFileSyncOpts
+  ): Buffer | string;
+
+  declare function fork(
+    modulePath: string,
+    argsOrOptions?: Array<string> | child_process$forkOpts,
+    options?: child_process$forkOpts
+  ): child_process$ChildProcess;
+
+  declare function spawn(
+    command: string,
+    argsOrOptions?: Array<string> | child_process$spawnOpts,
+    options?: child_process$spawnOpts
+  ): child_process$ChildProcess;
+
+  declare function spawnSync(
+    command: string,
+    argsOrOptions?: Array<string> | child_process$spawnSyncOpts,
+    options?: child_process$spawnSyncOpts
+  ): child_process$spawnSyncRet;
+}
+
+declare module 'cluster' {
+  declare type ClusterSettings = {
+    execArgv: Array<string>,
+    exec: string,
+    args: Array<string>,
+    cwd: string,
+    serialization: 'json' | 'advanced',
+    silent: boolean,
+    stdio: Array<any>,
+    uid: number,
+    gid: number,
+    inspectPort: number | (() => number),
+    windowsHide: boolean,
+    ...
+  };
+
+  declare type ClusterSettingsOpt = {
+    execArgv?: Array<string>,
+    exec?: string,
+    args?: Array<string>,
+    cwd?: string,
+    serialization?: 'json' | 'advanced',
+    silent?: boolean,
+    stdio?: Array<any>,
+    uid?: number,
+    gid?: number,
+    inspectPort?: number | (() => number),
+    windowsHide?: boolean,
+    ...
+  };
+
+  declare class Worker extends events$EventEmitter {
+    id: number;
+    process: child_process$ChildProcess;
+    suicide: boolean;
+
+    disconnect(): void;
+    isConnected(): boolean;
+    isDead(): boolean;
+    kill(signal?: string): void;
+    send(
+      message: Object,
+      sendHandleOrCallback?: child_process$Handle | Function,
+      callback?: Function
+    ): boolean;
+  }
+
+  declare class Cluster extends events$EventEmitter {
+    isMaster: boolean;
+    isWorker: boolean;
+    settings: ClusterSettings;
+    worker: Worker;
+    workers: {[id: number]: Worker};
+
+    disconnect(callback?: () => void): void;
+    fork(env?: Object): Worker;
+    setupMaster(settings?: ClusterSettingsOpt): void;
+  }
+
+  declare module.exports: Cluster;
+}
+
+type crypto$createCredentialsDetails = any; // TODO
+
+declare class crypto$Cipher extends stream$Duplex {
+  final(output_encoding: 'latin1' | 'binary' | 'base64' | 'hex'): string;
+  final(output_encoding: void): Buffer;
+  getAuthTag(): Buffer;
+  setAAD(buffer: Buffer): crypto$Cipher;
+  setAuthTag(buffer: Buffer): void;
+  setAutoPadding(auto_padding?: boolean): crypto$Cipher;
+  update(
+    data: string,
+    input_encoding: 'utf8' | 'ascii' | 'latin1' | 'binary',
+    output_encoding: 'latin1' | 'binary' | 'base64' | 'hex'
+  ): string;
+  update(
+    data: string,
+    input_encoding: 'utf8' | 'ascii' | 'latin1' | 'binary',
+    output_encoding: void
+  ): Buffer;
+  update(
+    data: Buffer,
+    input_encoding: void | 'utf8' | 'ascii' | 'latin1' | 'binary',
+    output_encoding: 'latin1' | 'binary' | 'base64' | 'hex'
+  ): string;
+  update(data: Buffer, input_encoding: void, output_encoding: void): Buffer;
+}
+
+type crypto$Credentials = {...};
+
+type crypto$DiffieHellman = {
+  computeSecret(
+    other_public_key: string,
+    input_encoding?: string,
+    output_encoding?: string
+  ): any,
+  generateKeys(encoding?: string): any,
+  getGenerator(encoding?: string): any,
+  getPrime(encoding?: string): any,
+  getPrivateKey(encoding?: string): any,
+  getPublicKey(encoding?: string): any,
+  setPrivateKey(private_key: any, encoding?: string): void,
+  setPublicKey(public_key: any, encoding?: string): void,
+  ...
+};
+
+type crypto$ECDH$Encoding = 'latin1' | 'hex' | 'base64';
+type crypto$ECDH$Format = 'compressed' | 'uncompressed';
+
+declare class crypto$ECDH {
+  computeSecret(other_public_key: Buffer | $TypedArray | DataView): Buffer;
+  computeSecret(
+    other_public_key: string,
+    input_encoding: crypto$ECDH$Encoding
+  ): Buffer;
+  computeSecret(
+    other_public_key: Buffer | $TypedArray | DataView,
+    output_encoding: crypto$ECDH$Encoding
+  ): string;
+  computeSecret(
+    other_public_key: string,
+    input_encoding: crypto$ECDH$Encoding,
+    output_encoding: crypto$ECDH$Encoding
+  ): string;
+  generateKeys(format?: crypto$ECDH$Format): Buffer;
+  generateKeys(
+    encoding: crypto$ECDH$Encoding,
+    format?: crypto$ECDH$Format
+  ): string;
+  getPrivateKey(): Buffer;
+  getPrivateKey(encoding: crypto$ECDH$Encoding): string;
+  getPublicKey(format?: crypto$ECDH$Format): Buffer;
+  getPublicKey(
+    encoding: crypto$ECDH$Encoding,
+    format?: crypto$ECDH$Format
+  ): string;
+  setPrivateKey(private_key: Buffer | $TypedArray | DataView): void;
+  setPrivateKey(private_key: string, encoding: crypto$ECDH$Encoding): void;
+}
+
+declare class crypto$Decipher extends stream$Duplex {
+  final(output_encoding: 'latin1' | 'binary' | 'ascii' | 'utf8'): string;
+  final(output_encoding: void): Buffer;
+  getAuthTag(): Buffer;
+  setAAD(buffer: Buffer): void;
+  setAuthTag(buffer: Buffer): void;
+  setAutoPadding(auto_padding?: boolean): crypto$Cipher;
+  update(
+    data: string,
+    input_encoding: 'latin1' | 'binary' | 'base64' | 'hex',
+    output_encoding: 'latin1' | 'binary' | 'ascii' | 'utf8'
+  ): string;
+  update(
+    data: string,
+    input_encoding: 'latin1' | 'binary' | 'base64' | 'hex',
+    output_encoding: void
+  ): Buffer;
+  update(
+    data: Buffer,
+    input_encoding: void,
+    output_encoding: 'latin1' | 'binary' | 'ascii' | 'utf8'
+  ): string;
+  update(data: Buffer, input_encoding: void, output_encoding: void): Buffer;
+}
+
+declare class crypto$Hash extends stream$Duplex {
+  digest(encoding: 'hex' | 'latin1' | 'binary' | 'base64'): string;
+  digest(encoding: 'buffer'): Buffer;
+  digest(encoding: void): Buffer;
+  update(
+    data: string | Buffer,
+    input_encoding?: 'utf8' | 'ascii' | 'latin1' | 'binary'
+  ): crypto$Hash;
+}
+
+declare class crypto$Hmac extends stream$Duplex {
+  digest(encoding: 'hex' | 'latin1' | 'binary' | 'base64'): string;
+  digest(encoding: 'buffer'): Buffer;
+  digest(encoding: void): Buffer;
+  update(
+    data: string | Buffer,
+    input_encoding?: 'utf8' | 'ascii' | 'latin1' | 'binary'
+  ): crypto$Hmac;
+}
+
+type crypto$Sign$private_key =
+  | string
+  | {
+      key: string,
+      passphrase: string,
+      ...
+    };
+declare class crypto$Sign extends stream$Writable {
+  static (algorithm: string, options?: writableStreamOptions): crypto$Sign;
+  constructor(algorithm: string, options?: writableStreamOptions): void;
+  sign(
+    private_key: crypto$Sign$private_key,
+    output_format: 'latin1' | 'binary' | 'hex' | 'base64'
+  ): string;
+  sign(private_key: crypto$Sign$private_key, output_format: void): Buffer;
+  update(
+    data: string | Buffer,
+    input_encoding?: 'utf8' | 'ascii' | 'latin1' | 'binary'
+  ): crypto$Sign;
+}
+
+declare class crypto$Verify extends stream$Writable {
+  static (algorithm: string, options?: writableStreamOptions): crypto$Verify;
+  constructor(algorithm: string, options?: writableStreamOptions): void;
+  update(
+    data: string | Buffer,
+    input_encoding?: 'utf8' | 'ascii' | 'latin1' | 'binary'
+  ): crypto$Verify;
+  verify(
+    object: string,
+    signature: string | Buffer | $TypedArray | DataView,
+    signature_format: 'latin1' | 'binary' | 'hex' | 'base64'
+  ): boolean;
+  verify(object: string, signature: Buffer, signature_format: void): boolean;
+}
+
+type crypto$key =
+  | string
+  | {
+      key: string,
+      passphrase?: string,
+      // TODO: enum type in crypto.constants
+      padding?: string,
+      ...
+    };
+
+declare module 'crypto' {
+  declare var DEFAULT_ENCODING: string;
+
+  declare class Sign extends crypto$Sign {}
+  declare class Verify extends crypto$Verify {}
+
+  declare function createCipher(
+    algorithm: string,
+    password: string | Buffer
+  ): crypto$Cipher;
+  declare function createCipheriv(
+    algorithm: string,
+    key: string | Buffer,
+    iv: string | Buffer
+  ): crypto$Cipher;
+  declare function createCredentials(
+    details?: crypto$createCredentialsDetails
+  ): crypto$Credentials;
+  declare function createDecipher(
+    algorithm: string,
+    password: string | Buffer
+  ): crypto$Decipher;
+  declare function createDecipheriv(
+    algorithm: string,
+    key: string | Buffer,
+    iv: string | Buffer
+  ): crypto$Decipher;
+  declare function createDiffieHellman(
+    prime_length: number
+  ): crypto$DiffieHellman;
+  declare function createDiffieHellman(
+    prime: number,
+    encoding?: string
+  ): crypto$DiffieHellman;
+  declare function createECDH(curveName: string): crypto$ECDH;
+  declare function createHash(algorithm: string): crypto$Hash;
+  declare function createHmac(
+    algorithm: string,
+    key: string | Buffer
+  ): crypto$Hmac;
+  declare function createSign(algorithm: string): crypto$Sign;
+  declare function createVerify(algorithm: string): crypto$Verify;
+  declare function getCiphers(): Array<string>;
+  declare function getCurves(): Array<string>;
+  declare function getDiffieHellman(group_name: string): crypto$DiffieHellman;
+  declare function getHashes(): Array<string>;
+  declare function pbkdf2(
+    password: string | Buffer,
+    salt: string | Buffer,
+    iterations: number,
+    keylen: number,
+    digest: string,
+    callback: (err: ?Error, derivedKey: Buffer) => void
+  ): void;
+  declare function pbkdf2(
+    password: string | Buffer,
+    salt: string | Buffer,
+    iterations: number,
+    keylen: number,
+    callback: (err: ?Error, derivedKey: Buffer) => void
+  ): void;
+  declare function pbkdf2Sync(
+    password: string | Buffer,
+    salt: string | Buffer,
+    iterations: number,
+    keylen: number,
+    digest?: string
+  ): Buffer;
+  declare function scrypt(
+    password: string | Buffer,
+    salt: string | Buffer,
+    keylen: number,
+    options:
+      | {|N?: number, r?: number, p?: number, maxmem?: number|}
+      | {|
+          cost?: number,
+          blockSize?: number,
+          parallelization?: number,
+          maxmem?: number,
+        |},
+    callback: (err: ?Error, derivedKey: Buffer) => void
+  ): void;
+  declare function scrypt(
+    password: string | Buffer,
+    salt: string | Buffer,
+    keylen: number,
+    callback: (err: ?Error, derivedKey: Buffer) => void
+  ): void;
+  declare function scryptSync(
+    password: string | Buffer,
+    salt: string | Buffer,
+    keylen: number,
+    options?:
+      | {|N?: number, r?: number, p?: number, maxmem?: number|}
+      | {|
+          cost?: number,
+          blockSize?: number,
+          parallelization?: number,
+          maxmem?: number,
+        |}
+  ): Buffer;
+  declare function privateDecrypt(
+    private_key: crypto$key,
+    buffer: Buffer
+  ): Buffer;
+  declare function privateEncrypt(
+    private_key: crypto$key,
+    buffer: Buffer
+  ): Buffer;
+  declare function publicDecrypt(key: crypto$key, buffer: Buffer): Buffer;
+  declare function publicEncrypt(key: crypto$key, buffer: Buffer): Buffer;
+  // `UNUSED` argument strictly enforces arity to enable overloading this
+  // function with 1-arg and 2-arg variants.
+  declare function pseudoRandomBytes(size: number, UNUSED: void): Buffer;
+  declare function pseudoRandomBytes(
+    size: number,
+    callback: (err: ?Error, buffer: Buffer) => void
+  ): void;
+  // `UNUSED` argument strictly enforces arity to enable overloading this
+  // function with 1-arg and 2-arg variants.
+  declare function randomBytes(size: number, UNUSED: void): Buffer;
+  declare function randomBytes(
+    size: number,
+    callback: (err: ?Error, buffer: Buffer) => void
+  ): void;
+  declare function randomFillSync(
+    buffer: Buffer | $TypedArray | DataView
+  ): void;
+  declare function randomFillSync(
+    buffer: Buffer | $TypedArray | DataView,
+    offset: number
+  ): void;
+  declare function randomFillSync(
+    buffer: Buffer | $TypedArray | DataView,
+    offset: number,
+    size: number
+  ): void;
+  declare function randomFill(
+    buffer: Buffer | $TypedArray | DataView,
+    callback: (err: ?Error, buffer: Buffer) => void
+  ): void;
+  declare function randomFill(
+    buffer: Buffer | $TypedArray | DataView,
+    offset: number,
+    callback: (err: ?Error, buffer: Buffer) => void
+  ): void;
+  declare function randomFill(
+    buffer: Buffer | $TypedArray | DataView,
+    offset: number,
+    size: number,
+    callback: (err: ?Error, buffer: Buffer) => void
+  ): void;
+  declare function randomUUID(
+    options?: $ReadOnly<{|disableEntropyCache?: boolean|}>
+  ): string;
+  declare function timingSafeEqual(
+    a: Buffer | $TypedArray | DataView,
+    b: Buffer | $TypedArray | DataView
+  ): boolean;
+}
+
+type net$Socket$address = {
+  address: string,
+  family: string,
+  port: number,
+  ...
+};
+type dgram$Socket$rinfo = {
+  address: string,
+  family: 'IPv4' | 'IPv6',
+  port: number,
+  size: number,
+  ...
+};
+
+declare class dgram$Socket extends events$EventEmitter {
+  addMembership(multicastAddress: string, multicastInterface?: string): void;
+  address(): net$Socket$address;
+  bind(port?: number, address?: string, callback?: () => void): void;
+  close(callback?: () => void): void;
+  dropMembership(multicastAddress: string, multicastInterface?: string): void;
+  ref(): void;
+  send(
+    msg: Buffer,
+    port: number,
+    address: string,
+    callback?: (err: ?Error, bytes: any) => mixed
+  ): void;
+  send(
+    msg: Buffer,
+    offset: number,
+    length: number,
+    port: number,
+    address: string,
+    callback?: (err: ?Error, bytes: any) => mixed
+  ): void;
+  setBroadcast(flag: boolean): void;
+  setMulticastLoopback(flag: boolean): void;
+  setMulticastTTL(ttl: number): void;
+  setTTL(ttl: number): void;
+  unref(): void;
+}
+
+declare module 'dgram' {
+  declare function createSocket(
+    options: string | {type: string, ...},
+    callback?: () => void
+  ): dgram$Socket;
+}
+
+declare module 'dns' {
+  declare var ADDRGETNETWORKPARAMS: string;
+  declare var BADFAMILY: string;
+  declare var BADFLAGS: string;
+  declare var BADHINTS: string;
+  declare var BADQUERY: string;
+  declare var BADNAME: string;
+  declare var BADRESP: string;
+  declare var BADSTR: string;
+  declare var CANCELLED: string;
+  declare var CONNREFUSED: string;
+  declare var DESTRUCTION: string;
+  declare var EOF: string;
+  declare var FILE: string;
+  declare var FORMER: string;
+  declare var LOADIPHLPAPI: string;
+  declare var NODATA: string;
+  declare var NOMEM: string;
+  declare var NONAME: string;
+  declare var NOTFOUND: string;
+  declare var NOTIMP: string;
+  declare var NOTINITIALIZED: string;
+  declare var REFUSED: string;
+  declare var SERVFAIL: string;
+  declare var TIMEOUT: string;
+  declare var ADDRCONFIG: number;
+  declare var V4MAPPED: number;
+
+  declare type LookupOptions = {
+    family?: number,
+    hints?: number,
+    verbatim?: boolean,
+    all?: boolean,
+    ...
+  };
+
+  declare function lookup(
+    domain: string,
+    options: number | LookupOptions,
+    callback: (err: ?Error, address: string, family: number) => void
+  ): void;
+  declare function lookup(
+    domain: string,
+    callback: (err: ?Error, address: string, family: number) => void
+  ): void;
+
+  declare function resolve(
+    domain: string,
+    rrtype?: string,
+    callback?: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolve4(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolve6(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolveCname(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolveMx(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolveNs(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolveSrv(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function resolveTxt(
+    domain: string,
+    callback: (err: ?Error, addresses: Array<any>) => void
+  ): void;
+
+  declare function reverse(
+    ip: string,
+    callback: (err: ?Error, domains: Array<any>) => void
+  ): void;
+  declare function timingSafeEqual(
+    a: Buffer | $TypedArray | DataView,
+    b: Buffer | $TypedArray | DataView
+  ): boolean;
+}
+
+declare class events$EventEmitter {
+  // deprecated
+  static listenerCount(emitter: events$EventEmitter, event: string): number;
+  static defaultMaxListeners: number;
+
+  addListener(event: string, listener: Function): this;
+  emit(event: string, ...args: Array<any>): boolean;
+  eventNames(): Array<string>;
+  listeners(event: string): Array<Function>;
+  listenerCount(event: string): number;
+  on(event: string, listener: Function): this;
+  once(event: string, listener: Function): this;
+  prependListener(event: string, listener: Function): this;
+  prependOnceListener(event: string, listener: Function): this;
+  removeAllListeners(event?: string): this;
+  removeListener(event: string, listener: Function): this;
+  off(event: string, listener: Function): this;
+  setMaxListeners(n: number): this;
+  getMaxListeners(): number;
+  rawListeners(event: string): Array<Function>;
+}
+
+declare module 'events' {
+  // TODO: See the comment above the events$EventEmitter declaration
+  declare class EventEmitter extends events$EventEmitter {
+    static EventEmitter: typeof EventEmitter;
+  }
+
+  declare module.exports: typeof EventEmitter;
+}
+
+declare class domain$Domain extends events$EventEmitter {
+  members: Array<any>;
+
+  add(emitter: events$EventEmitter): void;
+  bind(callback: Function): Function;
+  dispose(): void;
+  enter(): void;
+  exit(): void;
+  intercept(callback: Function): Function;
+  remove(emitter: events$EventEmitter): void;
+  run(fn: Function): void;
+}
+
+declare module 'domain' {
+  declare function create(): domain$Domain;
+}
+
+declare module 'fs' {
+  declare class Stats {
+    dev: number;
+    ino: number;
+    mode: number;
+    nlink: number;
+    uid: number;
+    gid: number;
+    rdev: number;
+    size: number;
+    blksize: number;
+    blocks: number;
+    atimeMs: number;
+    mtimeMs: number;
+    ctimeMs: number;
+    birthtimeMs: number;
+    atime: Date;
+    mtime: Date;
+    ctime: Date;
+    birthtime: Date;
+
+    isFile(): boolean;
+    isDirectory(): boolean;
+    isBlockDevice(): boolean;
+    isCharacterDevice(): boolean;
+    isSymbolicLink(): boolean;
+    isFIFO(): boolean;
+    isSocket(): boolean;
+  }
+
+  declare type PathLike = string | Buffer | URL;
+
+  declare class FSWatcher extends events$EventEmitter {
+    close(): void;
+  }
+
+  declare class ReadStream extends stream$Readable {
+    close(): void;
+  }
+
+  declare class WriteStream extends stream$Writable {
+    close(): void;
+    bytesWritten: number;
+  }
+
+  declare class Dirent {
+    name: string | Buffer;
+
+    isBlockDevice(): boolean;
+    isCharacterDevice(): boolean;
+    isDirectory(): boolean;
+    isFIFO(): boolean;
+    isFile(): boolean;
+    isSocket(): boolean;
+    isSymbolicLink(): boolean;
+  }
+
+  declare function rename(
+    oldPath: string,
+    newPath: string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function renameSync(oldPath: string, newPath: string): void;
+  declare function ftruncate(
+    fd: number,
+    len: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function ftruncateSync(fd: number, len: number): void;
+  declare function truncate(
+    path: string,
+    len: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function truncateSync(path: string, len: number): void;
+  declare function chown(
+    path: string,
+    uid: number,
+    gid: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function chownSync(path: string, uid: number, gid: number): void;
+  declare function fchown(
+    fd: number,
+    uid: number,
+    gid: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function fchownSync(fd: number, uid: number, gid: number): void;
+  declare function lchown(
+    path: string,
+    uid: number,
+    gid: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function lchownSync(path: string, uid: number, gid: number): void;
+  declare function chmod(
+    path: string,
+    mode: number | string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function chmodSync(path: string, mode: number | string): void;
+  declare function fchmod(
+    fd: number,
+    mode: number | string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function fchmodSync(fd: number, mode: number | string): void;
+  declare function lchmod(
+    path: string,
+    mode: number | string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function lchmodSync(path: string, mode: number | string): void;
+  declare function stat(
+    path: string,
+    callback?: (err: ?ErrnoError, stats: Stats) => any
+  ): void;
+  declare function statSync(path: string): Stats;
+  declare function fstat(
+    fd: number,
+    callback?: (err: ?ErrnoError, stats: Stats) => any
+  ): void;
+  declare function fstatSync(fd: number): Stats;
+  declare function lstat(
+    path: string,
+    callback?: (err: ?ErrnoError, stats: Stats) => any
+  ): void;
+  declare function lstatSync(path: string): Stats;
+  declare function link(
+    srcpath: string,
+    dstpath: string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function linkSync(srcpath: string, dstpath: string): void;
+  declare function symlink(
+    srcpath: string,
+    dtspath: string,
+    type?: string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function symlinkSync(
+    srcpath: string,
+    dstpath: string,
+    type?: string
+  ): void;
+  declare function readlink(
+    path: string,
+    callback: (err: ?ErrnoError, linkString: string) => void
+  ): void;
+  declare function readlinkSync(path: string): string;
+  declare function realpath(
+    path: string,
+    cache?: Object,
+    callback?: (err: ?ErrnoError, resolvedPath: string) => void
+  ): void;
+  declare function realpathSync(path: string, cache?: Object): string;
+  declare function unlink(
+    path: string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function unlinkSync(path: string): void;
+
+  declare type RmDirOptions = {|
+    /**
+     * If an `EBUSY`, `EMFILE`, `ENFILE`, `ENOTEMPTY`, or
+     * `EPERM` error is encountered, Node.js will retry the operation with a linear
+     * backoff wait of `retryDelay` ms longer on each try. This option represents the
+     * number of retries. This option is ignored if the `recursive` option is not
+     * `true`.
+     * @default 0
+     */
+    maxRetries?: number | void,
+    /**
+     * @deprecated since v14.14.0 In future versions of Node.js and will trigger a warning
+     * `fs.rmdir(path, { recursive: true })` will throw if `path` does not exist or is a file.
+     * Use `fs.rm(path, { recursive: true, force: true })` instead.
+     *
+     * If `true`, perform a recursive directory removal. In
+     * recursive mode soperations are retried on failure.
+     * @default false
+     */
+    recursive?: boolean | void,
+    /**
+     * The amount of time in milliseconds to wait between retries.
+     * This option is ignored if the `recursive` option is not `true`.
+     * @default 100
+     */
+    retryDelay?: number | void,
+  |};
+
+  declare function rmdir(
+    path: PathLike,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function rmdir(
+    path: PathLike,
+    options: RmDirOptions,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function rmdirSync(path: PathLike, options?: RmDirOptions): void;
+
+  declare type RmOptions = {|
+    /**
+     * When `true`, exceptions will be ignored if `path` does not exist.
+     * @default false
+     */
+    force?: boolean | void,
+    /**
+     * If an `EBUSY`, `EMFILE`, `ENFILE`, `ENOTEMPTY`, or
+     * `EPERM` error is encountered, Node.js will retry the operation with a linear
+     * backoff wait of `retryDelay` ms longer on each try. This option represents the
+     * number of retries. This option is ignored if the `recursive` option is not
+     * `true`.
+     * @default 0
+     */
+    maxRetries?: number | void,
+    /**
+     * If `true`, perform a recursive directory removal. In
+     * recursive mode, operations are retried on failure.
+     * @default false
+     */
+    recursive?: boolean | void,
+    /**
+     * The amount of time in milliseconds to wait between retries.
+     * This option is ignored if the `recursive` option is not `true`.
+     * @default 100
+     */
+    retryDelay?: number | void,
+  |};
+
+  /**
+   * Asynchronously removes files and directories (modeled on the standard POSIX `rm`utility). No arguments other than a possible exception are given to the
+   * completion callback.
+   * @since v14.14.0
+   */
+  declare function rm(
+    path: PathLike,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function rm(
+    path: PathLike,
+    options: RmOptions,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+
+  /**
+   * Synchronously removes files and directories (modeled on the standard POSIX `rm`utility). Returns `undefined`.
+   * @since v14.14.0
+   */
+  declare function rmSync(path: PathLike, options?: RmOptions): void;
+
+  declare function mkdir(
+    path: string,
+    mode?:
+      | number
+      | {
+          recursive?: boolean,
+          mode?: number,
+          ...
+        },
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function mkdirSync(
+    path: string,
+    mode?:
+      | number
+      | {
+          recursive?: boolean,
+          mode?: number,
+          ...
+        }
+  ): void;
+  declare function mkdtemp(
+    prefix: string,
+    callback: (err: ?ErrnoError, folderPath: string) => void
+  ): void;
+  declare function mkdtempSync(prefix: string): string;
+  declare function readdir(
+    path: string,
+    options: string | {encoding?: string, withFileTypes?: false, ...},
+    callback: (err: ?ErrnoError, files: Array<string>) => void
+  ): void;
+  declare function readdir(
+    path: string,
+    options: {encoding?: string, withFileTypes: true, ...},
+    callback: (err: ?ErrnoError, files: Array<Dirent>) => void
+  ): void;
+  declare function readdir(
+    path: string,
+    callback: (err: ?ErrnoError, files: Array<string>) => void
+  ): void;
+  declare function readdirSync(
+    path: string,
+    options?: string | {encoding?: string, withFileTypes?: false, ...}
+  ): Array<string>;
+  declare function readdirSync(
+    path: string,
+    options?: string | {encoding?: string, withFileTypes: true, ...}
+  ): Array<Dirent>;
+  declare function close(
+    fd: number,
+    callback: (err: ?ErrnoError) => void
+  ): void;
+  declare function closeSync(fd: number): void;
+  declare function open(
+    path: string | Buffer | URL,
+    flags: string | number,
+    mode: number,
+    callback: (err: ?ErrnoError, fd: number) => void
+  ): void;
+  declare function open(
+    path: string | Buffer | URL,
+    flags: string | number,
+    callback: (err: ?ErrnoError, fd: number) => void
+  ): void;
+  declare function openSync(
+    path: string | Buffer,
+    flags: string | number,
+    mode?: number
+  ): number;
+  declare function utimes(
+    path: string,
+    atime: number,
+    mtime: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function utimesSync(path: string, atime: number, mtime: number): void;
+  declare function futimes(
+    fd: number,
+    atime: number,
+    mtime: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function futimesSync(fd: number, atime: number, mtime: number): void;
+  declare function fsync(
+    fd: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function fsyncSync(fd: number): void;
+  declare function write(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    length: number,
+    position: number,
+    callback: (err: ?ErrnoError, write: number, buf: Buffer) => void
+  ): void;
+  declare function write(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    length: number,
+    callback: (err: ?ErrnoError, write: number, buf: Buffer) => void
+  ): void;
+  declare function write(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    callback: (err: ?ErrnoError, write: number, buf: Buffer) => void
+  ): void;
+  declare function write(
+    fd: number,
+    buffer: Buffer,
+    callback: (err: ?ErrnoError, write: number, buf: Buffer) => void
+  ): void;
+  declare function write(
+    fd: number,
+    data: string,
+    position: number,
+    encoding: string,
+    callback: (err: ?ErrnoError, write: number, str: string) => void
+  ): void;
+  declare function write(
+    fd: number,
+    data: string,
+    position: number,
+    callback: (err: ?ErrnoError, write: number, str: string) => void
+  ): void;
+  declare function write(
+    fd: number,
+    data: string,
+    callback: (err: ?ErrnoError, write: number, str: string) => void
+  ): void;
+  declare function writeSync(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    length: number,
+    position: number
+  ): number;
+  declare function writeSync(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    length: number
+  ): number;
+  declare function writeSync(
+    fd: number,
+    buffer: Buffer,
+    offset?: number
+  ): number;
+  declare function writeSync(
+    fd: number,
+    str: string,
+    position: number,
+    encoding: string
+  ): number;
+  declare function writeSync(
+    fd: number,
+    str: string,
+    position?: number
+  ): number;
+  declare function read(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    length: number,
+    position: ?number,
+    callback: (err: ?ErrnoError, bytesRead: number, buffer: Buffer) => void
+  ): void;
+  declare function readSync(
+    fd: number,
+    buffer: Buffer,
+    offset: number,
+    length: number,
+    position: number
+  ): number;
+  declare function readFile(
+    path: string | Buffer | URL | number,
+    callback: (err: ?ErrnoError, data: Buffer) => void
+  ): void;
+  declare function readFile(
+    path: string | Buffer | URL | number,
+    encoding: string,
+    callback: (err: ?ErrnoError, data: string) => void
+  ): void;
+  declare function readFile(
+    path: string | Buffer | URL | number,
+    options: {
+      encoding: string,
+      flag?: string,
+      ...
+    },
+    callback: (err: ?ErrnoError, data: string) => void
+  ): void;
+  declare function readFile(
+    path: string | Buffer | URL | number,
+    options: {encoding?: null | void, flag?: string, ...},
+    callback: (err: ?ErrnoError, data: Buffer) => void
+  ): void;
+  declare function readFileSync(path: string | Buffer | URL | number): Buffer;
+  declare function readFileSync(
+    path: string | Buffer | URL | number,
+    encoding: string
+  ): string;
+  declare function readFileSync(
+    path: string | Buffer | URL | number,
+    options: {
+      encoding: string,
+      flag?: string,
+      ...
+    }
+  ): string;
+  declare function readFileSync(
+    path: string | Buffer | URL | number,
+    options: {
+      encoding?: void,
+      flag?: string,
+      ...
+    }
+  ): Buffer;
+  declare function writeFile(
+    filename: string | Buffer | number,
+    data: Buffer | string,
+    options:
+      | string
+      | {
+          encoding?: ?string,
+          mode?: number,
+          flag?: string,
+          ...
+        },
+    callback: (err: ?ErrnoError) => void
+  ): void;
+  declare function writeFile(
+    filename: string | Buffer | number,
+    data: Buffer | string,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function writeFileSync(
+    filename: string,
+    data: Buffer | string,
+    options?:
+      | string
+      | {
+          encoding?: ?string,
+          mode?: number,
+          flag?: string,
+          ...
+        }
+  ): void;
+  declare function appendFile(
+    filename: string | Buffer | number,
+    data: string | Buffer,
+    options:
+      | string
+      | {
+          encoding?: ?string,
+          mode?: number,
+          flag?: string,
+          ...
+        },
+    callback: (err: ?ErrnoError) => void
+  ): void;
+  declare function appendFile(
+    filename: string | Buffer | number,
+    data: string | Buffer,
+    callback: (err: ?ErrnoError) => void
+  ): void;
+  declare function appendFileSync(
+    filename: string | Buffer | number,
+    data: string | Buffer,
+    options?:
+      | string
+      | {
+          encoding?: ?string,
+          mode?: number,
+          flag?: string,
+          ...
+        }
+  ): void;
+  declare function watchFile(
+    filename: string,
+    options?: Object,
+    listener?: (curr: Stats, prev: Stats) => void
+  ): void;
+  declare function unwatchFile(
+    filename: string,
+    listener?: (curr: Stats, prev: Stats) => void
+  ): void;
+  declare function watch(
+    filename: string,
+    options?: Object,
+    listener?: (event: string, filename: string) => void
+  ): FSWatcher;
+  declare function exists(
+    path: string,
+    callback?: (exists: boolean) => void
+  ): void;
+  declare function existsSync(path: string): boolean;
+  declare function access(
+    path: string,
+    mode?: number,
+    callback?: (err: ?ErrnoError) => void
+  ): void;
+  declare function accessSync(path: string, mode?: number): void;
+  declare function createReadStream(path: string, options?: Object): ReadStream;
+  declare function createWriteStream(
+    path: string,
+    options?: Object
+  ): WriteStream;
+  declare function fdatasync(
+    fd: number,
+    callback: (err: ?ErrnoError) => void
+  ): void;
+  declare function fdatasyncSync(fd: number): void;
+  declare function copyFile(
+    src: string,
+    dest: string,
+    callback: (err: ErrnoError) => void
+  ): void;
+  declare function copyFile(
+    src: string,
+    dest: string,
+    flags?: number,
+    callback: (err: ErrnoError) => void
+  ): void;
+  declare function copyFileSync(
+    src: string,
+    dest: string,
+    flags?: number
+  ): void;
+
+  declare type GlobOptions<WithFileTypes: boolean> = $ReadOnly<{
+    /**
+     * Current working directory.
+     * @default process.cwd()
+     */
+    cwd?: string | void,
+    /**
+     * `true` if the glob should return paths as `Dirent`s, `false` otherwise.
+     * @default false
+     * @since v22.2.0
+     */
+    withFileTypes?: WithFileTypes,
+    /**
+     * Function to filter out files/directories or a
+     * list of glob patterns to be excluded. If a function is provided, return
+     * `true` to exclude the item, `false` to include it.
+     * @default undefined
+     */
+    exclude?:
+      | ((fileName: Node$Conditional<WithFileTypes, Dirent, string>) => boolean)
+      | $ReadOnlyArray<string>,
+    ...
+  }>;
+
+  /**
+   * Retrieves the files matching the specified pattern.
+   *
+   * ```js
+   * import { glob } from 'node:fs';
+   *
+   * glob('*.js', (err, matches) => {
+   *   if (err) throw err;
+   *   console.log(matches);
+   * });
+   * ```
+   * @since v22.0.0
+   */
+  declare function glob(
+    pattern: string | $ReadOnlyArray<string>,
+    callback: (err: ?ErrnoError, matches: Array<string>) => void
+  ): void;
+
+  declare function glob<WithFileTypes: boolean = false>(
+    pattern: string | $ReadOnlyArray<string>,
+    options: GlobOptions<WithFileTypes>,
+    callback: (
+      err: ?ErrnoError,
+      matches: Node$Conditional<WithFileTypes, Array<Dirent>, Array<string>>
+    ) => void
+  ): void;
+
+  /**
+   * ```js
+   * import { globSync } from 'node:fs';
+   *
+   * console.log(globSync('*.js'));
+   * ```
+   * @since v22.0.0
+   * @returns paths of files that match the pattern.
+   */
+  declare function globSync<WithFileTypes: boolean = false>(
+    pattern: string | $ReadOnlyArray<string>,
+    options?: GlobOptions<WithFileTypes>
+  ): Node$Conditional<WithFileTypes, Array<Dirent>, Array<string>>;
+
+  declare var F_OK: number;
+  declare var R_OK: number;
+  declare var W_OK: number;
+  declare var X_OK: number;
+  // new var from node 6.x
+  // https://nodejs.org/dist/latest-v6.x/docs/api/fs.html#fs_fs_constants_1
+  declare var constants: {
+    F_OK: number, // 0
+    R_OK: number, // 4
+    W_OK: number, // 2
+    X_OK: number, // 1
+    COPYFILE_EXCL: number, // 1
+    COPYFILE_FICLONE: number, // 2
+    COPYFILE_FICLONE_FORCE: number, // 4
+    O_RDONLY: number, // 0
+    O_WRONLY: number, // 1
+    O_RDWR: number, // 2
+    S_IFMT: number, // 61440
+    S_IFREG: number, // 32768
+    S_IFDIR: number, // 16384
+    S_IFCHR: number, // 8192
+    S_IFBLK: number, // 24576
+    S_IFIFO: number, // 4096
+    S_IFLNK: number, // 40960
+    S_IFSOCK: number, // 49152
+    O_CREAT: number, // 64
+    O_EXCL: number, // 128
+    O_NOCTTY: number, // 256
+    O_TRUNC: number, // 512
+    O_APPEND: number, // 1024
+    O_DIRECTORY: number, // 65536
+    O_NOATIME: number, // 262144
+    O_NOFOLLOW: number, // 131072
+    O_SYNC: number, // 1052672
+    O_DSYNC: number, // 4096
+    O_SYMLINK: number, // 2097152
+    O_DIRECT: number, // 16384
+    O_NONBLOCK: number, // 2048
+    S_IRWXU: number, // 448
+    S_IRUSR: number, // 256
+    S_IWUSR: number, // 128
+    S_IXUSR: number, // 64
+    S_IRWXG: number, // 56
+    S_IRGRP: number, // 32
+    S_IWGRP: number, // 16
+    S_IXGRP: number, // 8
+    S_IRWXO: number, // 7
+    S_IROTH: number, // 4
+    S_IWOTH: number, // 2
+    S_IXOTH: number, // 1
+    ...
+  };
+
+  declare type BufferEncoding = 'buffer' | {encoding: 'buffer', ...};
+  declare type EncodingOptions = {encoding?: string, ...};
+  declare type EncodingFlag = EncodingOptions & {flag?: string, ...};
+  declare type WriteOptions = EncodingFlag & {mode?: number, ...};
+  declare type RemoveOptions = {
+    force?: boolean,
+    maxRetries?: number,
+    recursive?: boolean,
+    retryDelay?: number,
+    ...
+  };
+  declare class FileHandle {
+    appendFile(
+      data: string | Buffer,
+      options: WriteOptions | string
+    ): Promise<void>;
+    chmod(mode: number): Promise<void>;
+    chown(uid: number, guid: number): Promise<void>;
+    close(): Promise<void>;
+    datasync(): Promise<void>;
+    fd: number;
+    read<T: Buffer | Uint8Array>(
+      buffer: T,
+      offset: number,
+      length: number,
+      position: number
+    ): Promise<{
+      bytesRead: number,
+      buffer: T,
+      ...
+    }>;
+    readFile(options: EncodingFlag): Promise<Buffer>;
+    readFile(options: string): Promise<string>;
+    stat(): Promise<Stats>;
+    sync(): Promise<void>;
+    truncate(len?: number): Promise<void>;
+    utimes(
+      atime: number | string | Date,
+      mtime: number | string | Date
+    ): Promise<void>;
+    write(
+      buffer: Buffer | Uint8Array,
+      offset: number,
+      length: number,
+      position: number
+    ): Promise<void>;
+    writeFile(
+      data: string | Buffer | Uint8Array,
+      options: WriteOptions | string
+    ): Promise<void>;
+  }
+
+  declare type FSPromisePath = string | Buffer | URL;
+  declare type FSPromise = {
+    access(path: FSPromisePath, mode?: number): Promise<void>,
+    appendFile(
+      path: FSPromisePath | FileHandle,
+      data: string | Buffer,
+      options?: WriteOptions | string
+    ): Promise<void>,
+    chmod(path: FSPromisePath, mode: number): Promise<void>,
+    chown(path: FSPromisePath, uid: number, gid: number): Promise<void>,
+    copyFile(
+      src: FSPromisePath,
+      dest: FSPromisePath,
+      flags?: number
+    ): Promise<void>,
+    fchmod(filehandle: FileHandle, mode: number): Promise<void>,
+    fchown(filehandle: FileHandle, uid: number, guid: number): Promise<void>,
+    fdatasync(filehandle: FileHandle): Promise<void>,
+    fstat(filehandle: FileHandle): Promise<Stats>,
+    fsync(filehandle: FileHandle): Promise<void>,
+    ftruncate(filehandle: FileHandle, len?: number): Promise<void>,
+    futimes(
+      filehandle: FileHandle,
+      atime: number | string | Date,
+      mtime: number | string | Date
+    ): Promise<void>,
+    lchmod(path: FSPromisePath, mode: number): Promise<void>,
+    glob<WithFileTypes: boolean = false>(
+      pattern: string | $ReadOnlyArray<string>,
+      options?: GlobOptions<WithFileTypes>
+    ): Node$Conditional<
+      WithFileTypes,
+      AsyncIterator<Dirent>,
+      AsyncIterator<string>,
+    >,
+    lchown(path: FSPromisePath, uid: number, guid: number): Promise<void>,
+    link(existingPath: FSPromisePath, newPath: FSPromisePath): Promise<void>,
+    lstat(path: FSPromisePath): Promise<Stats>,
+    mkdir(
+      path: FSPromisePath,
+      mode?:
+        | number
+        | {
+            recursive?: boolean,
+            mode?: number,
+            ...
+          }
+    ): Promise<void>,
+    mkdtemp(prefix: string, options?: EncodingOptions): Promise<string>,
+    open(
+      path: FSPromisePath,
+      flags?: string | number,
+      mode?: number
+    ): Promise<FileHandle>,
+    read<T: Buffer | Uint8Array>(
+      filehandle: FileHandle,
+      buffer: T,
+      offset: number,
+      length: number,
+      position?: number
+    ): Promise<{
+      bytesRead: number,
+      buffer: T,
+      ...
+    }>,
+    readdir: ((
+      path: FSPromisePath,
+      options: string | {encoding?: string, withFileTypes?: false, ...}
+    ) => Promise<Array<string>>) &
+      ((
+        path: FSPromisePath,
+        options: {encoding?: string, withFileTypes: true, ...}
+      ) => Promise<Array<Dirent>>) &
+      ((path: FSPromisePath) => Promise<Array<string>>),
+    readFile: ((
+      path: FSPromisePath | FileHandle,
+      options: string
+    ) => Promise<string>) &
+      ((
+        path: FSPromisePath | FileHandle,
+        options?: EncodingFlag
+      ) => Promise<Buffer>),
+    readlink: ((
+      path: FSPromisePath,
+      options: BufferEncoding
+    ) => Promise<Buffer>) &
+      ((
+        path: FSPromisePath,
+        options?: string | EncodingOptions
+      ) => Promise<string>),
+    realpath: ((
+      path: FSPromisePath,
+      options: BufferEncoding
+    ) => Promise<Buffer>) &
+      ((
+        path: FSPromisePath,
+        options?: string | EncodingOptions
+      ) => Promise<string>),
+    rename(oldPath: FSPromisePath, newPath: FSPromisePath): Promise<void>,
+    rm(path: FSPromisePath, options?: RemoveOptions): Promise<void>,
+    rmdir(path: FSPromisePath): Promise<void>,
+    stat(path: FSPromisePath): Promise<Stats>,
+    symlink(
+      target: FSPromisePath,
+      path: FSPromisePath,
+      type?: 'dir' | 'file' | 'junction'
+    ): Promise<void>,
+    truncate(path: FSPromisePath, len?: number): Promise<void>,
+    unlink(path: FSPromisePath): Promise<void>,
+    utimes(
+      path: FSPromisePath,
+      atime: number | string | Date,
+      mtime: number | string | Date
+    ): Promise<void>,
+    write<T: Buffer | Uint8Array>(
+      filehandle: FileHandle,
+      buffer: T,
+      offset: number,
+      length: number,
+      position?: number
+    ): Promise<{
+      bytesRead: number,
+      buffer: T,
+      ...
+    }>,
+    writeFile(
+      FSPromisePath | FileHandle,
+      data: string | Buffer | Uint8Array,
+      options?: string | WriteOptions
+    ): Promise<void>,
+    ...
+  };
+
+  declare var promises: FSPromise;
+}
+
+type http$agentOptions = {
+  keepAlive?: boolean,
+  keepAliveMsecs?: number,
+  maxSockets?: number,
+  maxFreeSockets?: number,
+  ...
+};
+
+declare class http$Agent<+SocketT = net$Socket> {
+  constructor(options: http$agentOptions): void;
+  destroy(): void;
+  freeSockets: {[name: string]: $ReadOnlyArray<SocketT>, ...};
+  getName(options: {
+    host: string,
+    port: number,
+    localAddress: string,
+    ...
+  }): string;
+  maxFreeSockets: number;
+  maxSockets: number;
+  requests: {[name: string]: $ReadOnlyArray<http$ClientRequest<SocketT>>, ...};
+  sockets: {[name: string]: $ReadOnlyArray<SocketT>, ...};
+}
+
+declare class http$IncomingMessage<SocketT = net$Socket>
+  extends stream$Readable
+{
+  headers: Object;
+  rawHeaders: Array<string>;
+  httpVersion: string;
+  method: string;
+  trailers: Object;
+  setTimeout(msecs: number, callback: Function): void;
+  socket: SocketT;
+  statusCode: number;
+  statusMessage: string;
+  url: string;
+  aborted: boolean;
+  complete: boolean;
+  rawTrailers: Array<string>;
+}
+
+declare class http$ClientRequest<+SocketT = net$Socket>
+  extends stream$Writable
+{
+  abort(): void;
+  aborted: boolean;
+  +connection: SocketT | null;
+  flushHeaders(): void;
+  getHeader(name: string): string;
+  removeHeader(name: string): void;
+  setHeader(name: string, value: string | Array<string>): void;
+  setNoDelay(noDelay?: boolean): void;
+  setSocketKeepAlive(enable?: boolean, initialDelay?: number): void;
+  setTimeout(msecs: number, callback?: Function): void;
+  +socket: SocketT | null;
+}
+
+declare class http$ServerResponse extends stream$Writable {
+  addTrailers(headers: {[key: string]: string, ...}): void;
+  connection: net$Socket;
+  finished: boolean;
+  flushHeaders(): void;
+  getHeader(name: string): string;
+  getHeaderNames(): Array<string>;
+  getHeaders(): {[key: string]: string | Array<string>, ...};
+  hasHeader(name: string): boolean;
+  headersSent: boolean;
+  removeHeader(name: string): void;
+  sendDate: boolean;
+  setHeader(name: string, value: string | Array<string>): void;
+  setTimeout(msecs: number, callback?: Function): http$ServerResponse;
+  socket: net$Socket;
+  statusCode: number;
+  statusMessage: string;
+  writeContinue(): void;
+  writeHead(
+    status: number,
+    statusMessage?: string,
+    headers?: {[key: string]: string, ...}
+  ): void;
+  writeHead(status: number, headers?: {[key: string]: string, ...}): void;
+  writeProcessing(): void;
+}
+
+declare class http$Server extends net$Server {
+  listen(
+    port?: number,
+    hostname?: string,
+    backlog?: number,
+    callback?: Function
+  ): this;
+  // The following signatures are added to allow omitting intermediate arguments
+  listen(port?: number, backlog?: number, callback?: Function): this;
+  listen(port?: number, hostname?: string, callback?: Function): this;
+  listen(port?: number, callback?: Function): this;
+  listen(path: string, callback?: Function): this;
+  listen(
+    handle: {
+      port?: number,
+      host?: string,
+      path?: string,
+      backlog?: number,
+      exclusive?: boolean,
+      readableAll?: boolean,
+      writableAll?: boolean,
+      ipv6Only?: boolean,
+      ...
+    },
+    callback?: Function
+  ): this;
+  listening: boolean;
+  close(callback?: (error: ?Error) => mixed): this;
+  closeAllConnections(): void;
+  closeIdleConnections(): void;
+  maxHeadersCount: number;
+  keepAliveTimeout: number;
+  headersTimeout: number;
+  setTimeout(msecs: number, callback: Function): this;
+  timeout: number;
+}
+
+declare class https$Server extends tls$Server {
+  listen(
+    port?: number,
+    hostname?: string,
+    backlog?: number,
+    callback?: Function
+  ): this;
+  // The following signatures are added to allow omitting intermediate arguments
+  listen(port?: number, backlog?: number, callback?: Function): this;
+  listen(port?: number, hostname?: string, callback?: Function): this;
+  listen(port?: number, callback?: Function): this;
+  listen(path: string, callback?: Function): this;
+  listen(
+    handle: {
+      port?: number,
+      host?: string,
+      path?: string,
+      backlog?: number,
+      exclusive?: boolean,
+      readableAll?: boolean,
+      writableAll?: boolean,
+      ipv6Only?: boolean,
+      ...
+    },
+    callback?: Function
+  ): this;
+  close(callback?: (error: ?Error) => mixed): this;
+  closeAllConnections(): void;
+  closeIdleConnections(): void;
+  keepAliveTimeout: number;
+  headersTimeout: number;
+  setTimeout(msecs: number, callback: Function): this;
+  timeout: number;
+}
+
+type requestOptions = {|
+  auth?: string,
+  defaultPort?: number,
+  family?: number,
+  headers?: {[key: string]: mixed, ...},
+  host?: string,
+  hostname?: string,
+  localAddress?: string,
+  method?: string,
+  path?: string,
+  port?: number,
+  protocol?: string,
+  setHost?: boolean,
+  socketPath?: string,
+  timeout?: number,
+|};
+
+type http$requestOptions = {
+  ...requestOptions,
+  agent?: boolean | http$Agent<net$Socket>,
+  createConnection?: (
+    options: net$connectOptions,
+    callback?: Function
+  ) => net$Socket,
+  ...
+};
+
+declare module 'http' {
+  declare class Server extends http$Server {}
+  declare class Agent extends http$Agent<net$Socket> {
+    createConnection(
+      options: net$connectOptions,
+      callback?: Function
+    ): net$Socket;
+  }
+  declare class ClientRequest extends http$ClientRequest<net$Socket> {}
+  declare class IncomingMessage extends http$IncomingMessage<net$Socket> {}
+  declare class ServerResponse extends http$ServerResponse {}
+
+  declare function createServer(
+    requestListener?: (
+      request: IncomingMessage,
+      response: ServerResponse
+    ) => void
+  ): Server;
+  declare function request(
+    options: http$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+  declare function request(
+    url: string,
+    options?: http$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+  declare function get(
+    options: http$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+  declare function get(
+    url: string,
+    options?: http$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+
+  declare var METHODS: Array<string>;
+  declare var STATUS_CODES: {[key: number]: string, ...};
+  declare var globalAgent: Agent;
+}
+
+type https$requestOptions = {
+  ...requestOptions,
+  agent?: boolean | http$Agent<tls$TLSSocket>,
+  createConnection?: (
+    options: tls$connectOptions,
+    callback?: Function
+  ) => tls$TLSSocket,
+  ...
+};
+
+declare module 'https' {
+  declare class Server extends https$Server {}
+  declare class Agent extends http$Agent<tls$TLSSocket> {
+    createConnection(
+      port: ?number,
+      host: ?string,
+      options: tls$connectOptions
+    ): tls$TLSSocket;
+    createConnection(port: ?number, options: tls$connectOptions): tls$TLSSocket;
+    createConnection(options: tls$connectOptions): tls$TLSSocket;
+  }
+
+  declare class ClientRequest extends http$ClientRequest<tls$TLSSocket> {}
+  declare class IncomingMessage extends http$IncomingMessage<tls$TLSSocket> {}
+  declare class ServerResponse extends http$ServerResponse {}
+
+  declare function createServer(
+    options: Object,
+    requestListener?: (
+      request: IncomingMessage,
+      response: ServerResponse
+    ) => void
+  ): Server;
+  declare function request(
+    options: https$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+  declare function request(
+    url: string,
+    options?: https$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+  declare function get(
+    options: https$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+  declare function get(
+    url: string,
+    options?: https$requestOptions,
+    callback?: (response: IncomingMessage) => void
+  ): ClientRequest;
+
+  declare var globalAgent: Agent;
+}
+
+type module$Module = {
+  builtinModules: Array<string>,
+  createRequire(filename: string | URL): typeof require,
+  syncBuiltinESMExports(): void,
+  Module: module$Module,
+  ...
+};
+
+declare module 'module' {
+  declare module.exports: module$Module;
+}
+
+declare class net$Socket extends stream$Duplex {
+  constructor(options?: Object): void;
+  address(): net$Socket$address;
+  bufferSize: number;
+  bytesRead: number;
+  bytesWritten: number;
+  connect(path: string, connectListener?: () => mixed): net$Socket;
+  connect(
+    port: number,
+    host?: string,
+    connectListener?: () => mixed
+  ): net$Socket;
+  connect(port: number, connectListener?: () => mixed): net$Socket;
+  connect(options: Object, connectListener?: () => mixed): net$Socket;
+  destroyed: boolean;
+  end(
+    chunkOrEncodingOrCallback?:
+      | Buffer
+      | Uint8Array
+      | string
+      | ((data: any) => void),
+    encodingOrCallback?: string | ((data: any) => void),
+    callback?: (data: any) => void
+  ): this;
+  localAddress: string;
+  localPort: number;
+  pause(): this;
+  ref(): this;
+  remoteAddress: string | void;
+  remoteFamily: string;
+  remotePort: number;
+  resume(): this;
+  setEncoding(encoding?: string): this;
+  setKeepAlive(enable?: boolean, initialDelay?: number): this;
+  setNoDelay(noDelay?: boolean): this;
+  setTimeout(timeout: number, callback?: Function): this;
+  unref(): this;
+  write(
+    chunk: Buffer | Uint8Array | string,
+    encodingOrCallback?: string | ((data: any) => void),
+    callback?: (data: any) => void
+  ): boolean;
+}
+
+declare class net$Server extends events$EventEmitter {
+  listen(
+    port?: number,
+    hostname?: string,
+    backlog?: number,
+    callback?: Function
+  ): net$Server;
+  listen(path: string, callback?: Function): net$Server;
+  listen(handle: Object, callback?: Function): net$Server;
+  listening: boolean;
+  close(callback?: Function): net$Server;
+  address(): net$Socket$address;
+  connections: number;
+  maxConnections: number;
+  getConnections(callback: Function): void;
+  ref(): net$Server;
+  unref(): net$Server;
+}
+
+type net$connectOptions = {
+  port?: number,
+  host?: string,
+  localAddress?: string,
+  localPort?: number,
+  family?: number,
+  lookup?: (
+    domain: string,
+    options?: ?number | ?Object,
+    callback?: (err: ?Error, address: string, family: number) => void
+  ) => mixed,
+  path?: string,
+  ...
+};
+
+declare module 'net' {
+  declare class Server extends net$Server {}
+  declare class Socket extends net$Socket {}
+
+  declare function isIP(input: string): number;
+  declare function isIPv4(input: string): boolean;
+  declare function isIPv6(input: string): boolean;
+
+  declare type connectionListener = (socket: Socket) => any;
+  declare function createServer(
+    options?:
+      | {
+          allowHalfOpen?: boolean,
+          pauseOnConnect?: boolean,
+          ...
+        }
+      | connectionListener,
+    connectionListener?: connectionListener
+  ): Server;
+
+  declare type connectListener = () => any;
+  declare function connect(
+    pathOrPortOrOptions: string | number | net$connectOptions,
+    hostOrConnectListener?: string | connectListener,
+    connectListener?: connectListener
+  ): Socket;
+
+  declare function createConnection(
+    pathOrPortOrOptions: string | number | net$connectOptions,
+    hostOrConnectListener?: string | connectListener,
+    connectListener?: connectListener
+  ): Socket;
+}
+
+type os$CPU = {
+  model: string,
+  speed: number,
+  times: {
+    idle: number,
+    irq: number,
+    nice: number,
+    sys: number,
+    user: number,
+    ...
+  },
+  ...
+};
+
+type os$NetIFAddr = {
+  address: string,
+  family: string,
+  internal: boolean,
+  mac: string,
+  netmask: string,
+  ...
+};
+
+type os$UserInfo$buffer = {
+  uid: number,
+  gid: number,
+  username: Buffer,
+  homedir: Buffer,
+  shell: ?Buffer,
+  ...
+};
+
+type os$UserInfo$string = {
+  uid: number,
+  gid: number,
+  username: string,
+  homedir: string,
+  shell: ?string,
+  ...
+};
+
+declare module 'os' {
+  declare function arch(): 'x64' | 'arm' | 'ia32';
+  declare function availableParallelism(): number;
+  declare function cpus(): Array<os$CPU>;
+  declare function endianness(): 'BE' | 'LE';
+  declare function freemem(): number;
+  declare function homedir(): string;
+  declare function hostname(): string;
+  declare function loadavg(): [number, number, number];
+  declare function networkInterfaces(): {
+    [ifName: string]: Array<os$NetIFAddr>,
+    ...
+  };
+  declare function platform(): string;
+  declare function release(): string;
+  declare function tmpdir(): string;
+  declare function totalmem(): number;
+  declare function type(): string;
+  declare function uptime(): number;
+  declare function userInfo(options: {
+    encoding: 'buffer',
+    ...
+  }): os$UserInfo$buffer;
+  declare function userInfo(options?: {
+    encoding: 'utf8',
+    ...
+  }): os$UserInfo$string;
+  declare var EOL: string;
+}
+
+declare module 'path' {
+  declare function normalize(path: string): string;
+  declare function join(...parts: Array<string>): string;
+  declare function resolve(...parts: Array<string>): string;
+  declare function isAbsolute(path: string): boolean;
+  declare function relative(from: string, to: string): string;
+  declare function dirname(path: string): string;
+  declare function basename(path: string, ext?: string): string;
+  declare function extname(path: string): string;
+  declare var sep: string;
+  declare var delimiter: string;
+  declare function parse(pathString: string): {
+    root: string,
+    dir: string,
+    base: string,
+    ext: string,
+    name: string,
+    ...
+  };
+  declare function format(pathObject: {
+    root?: string,
+    dir?: string,
+    base?: string,
+    ext?: string,
+    name?: string,
+    ...
+  }): string;
+  declare var posix: any;
+  declare var win32: any;
+}
+
+declare module 'punycode' {
+  declare function decode(string: string): string;
+  declare function encode(string: string): string;
+  declare function toASCII(domain: string): string;
+  declare function toUnicode(domain: string): string;
+  declare var ucs2: {
+    decode: (str: string) => Array<number>,
+    encode: (codePoints: Array<number>) => string,
+    ...
+  };
+  declare var version: string;
+}
+
+declare module 'querystring' {
+  declare function stringify(
+    obj: Object,
+    separator?: string,
+    equal?: string,
+    options?: {encodeURIComponent?: (str: string) => string, ...}
+  ): string;
+  declare function parse(
+    str: string,
+    separator: ?string,
+    equal: ?string,
+    options?: {
+      decodeURIComponent?: (str: string) => string,
+      maxKeys?: number,
+      ...
+    }
+  ): any;
+  declare function escape(str: string): string;
+  declare function unescape(str: string, decodeSpaces?: boolean): string;
+}
+
+type readline$InterfaceCompleter = (
+  line: string
+) =>
+  | [Array<string>, string]
+  | ((
+      line: string,
+      ((err: ?Error, data: [Array<string>, string]) => void)
+    ) => void);
+
+declare class readline$Interface extends events$EventEmitter {
+  close(): void;
+  pause(): void;
+  prompt(preserveCursor?: boolean): void;
+  question(
+    query: string,
+    optionsOrCallback: {|signal?: AbortSignal|} | ((answer: string) => void),
+    callback?: (answer: string) => void
+  ): void;
+  resume(): void;
+  setPrompt(prompt: string): void;
+  write(
+    val: string | void | null,
+    key?: {
+      name: string,
+      ctrl?: boolean,
+      shift?: boolean,
+      meta?: boolean,
+      ...
+    }
+  ): void;
+  @@asyncIterator(): AsyncIterator<string>;
+}
+
+declare module 'readline' {
+  declare var Interface: typeof readline$Interface;
+  declare function clearLine(
+    stream: stream$Stream,
+    dir: -1 | 1 | 0,
+    callback?: () => void
+  ): void;
+  declare function clearScreenDown(
+    stream: stream$Stream,
+    callback?: () => void
+  ): void;
+  declare function createInterface(opts: {
+    completer?: readline$InterfaceCompleter,
+    crlfDelay?: number,
+    escapeCodeTimeout?: number,
+    historySize?: number,
+    input: stream$Readable,
+    output?: ?stream$Stream,
+    prompt?: string,
+    removeHistoryDuplicates?: boolean,
+    terminal?: boolean,
+    ...
+  }): readline$Interface;
+  declare function cursorTo(
+    stream: stream$Stream,
+    x?: number,
+    y?: number,
+    callback?: () => void
+  ): void;
+  declare function moveCursor(
+    stream: stream$Stream,
+    dx: number,
+    dy: number,
+    callback?: () => void
+  ): void;
+  declare function emitKeypressEvents(
+    stream: stream$Stream,
+    readlineInterface?: readline$Interface
+  ): void;
+}
+
+declare class stream$Stream extends events$EventEmitter {}
+
+type readableStreamOptions = {
+  highWaterMark?: number,
+  encoding?: string,
+  objectMode?: boolean,
+  read?: (size: number) => void,
+  destroy?: (error: ?Error, callback: (error?: Error) => void) => void,
+  autoDestroy?: boolean,
+  ...
+};
+declare class stream$Readable extends stream$Stream {
+  static from(
+    iterable: Iterable<any> | AsyncIterable<any>,
+    options?: readableStreamOptions
+  ): stream$Readable;
+
+  constructor(options?: readableStreamOptions): void;
+  destroy(error?: Error): this;
+  isPaused(): boolean;
+  pause(): this;
+  pipe<T: stream$Writable>(dest: T, options?: {end?: boolean, ...}): T;
+  read(size?: number): ?(string | Buffer);
+  readable: boolean;
+  readableHighWaterMark: number;
+  readableLength: number;
+  resume(): this;
+  setEncoding(encoding: string): this;
+  unpipe(dest?: stream$Writable): this;
+  unshift(chunk: Buffer | Uint8Array | string): void;
+  wrap(oldReadable: stream$Stream): this;
+  _read(size: number): void;
+  _destroy(error: ?Error, callback: (error?: Error) => void): void;
+  push(chunk: ?(Buffer | Uint8Array | string), encoding?: string): boolean;
+  @@asyncIterator(): AsyncIterator<string | Buffer>;
+}
+
+type writableStreamOptions = {
+  highWaterMark?: number,
+  decodeStrings?: boolean,
+  defaultEncoding?: string,
+  objectMode?: boolean,
+  emitClose?: boolean,
+  write?: (
+    chunk: Buffer | string,
+    encoding: string,
+    callback: (error?: Error) => void
+  ) => void,
+  writev?: (
+    chunks: Array<{
+      chunk: Buffer | string,
+      encoding: string,
+      ...
+    }>,
+    callback: (error?: Error) => void
+  ) => void,
+  destroy?: (error: ?Error, callback: (error?: Error) => void) => void,
+  final?: (callback: (error?: Error) => void) => void,
+  autoDestroy?: boolean,
+  ...
+};
+declare class stream$Writable extends stream$Stream {
+  constructor(options?: writableStreamOptions): void;
+  cork(): void;
+  destroy(error?: Error): this;
+  end(callback?: () => void): this;
+  end(chunk?: string | Buffer | Uint8Array, callback?: () => void): this;
+  end(
+    chunk?: string | Buffer | Uint8Array,
+    encoding?: string,
+    callback?: () => void
+  ): this;
+  setDefaultEncoding(encoding: string): this;
+  uncork(): void;
+  writable: boolean;
+  writableHighWaterMark: number;
+  writableLength: number;
+  write(
+    chunk: string | Buffer | Uint8Array,
+    callback?: (error?: Error) => void
+  ): boolean;
+  write(
+    chunk: string | Buffer | Uint8Array,
+    encoding?: string,
+    callback?: (error?: Error) => void
+  ): boolean;
+  _write(
+    chunk: Buffer | string,
+    encoding: string,
+    callback: (error?: Error) => void
+  ): void;
+  _writev(
+    chunks: Array<{
+      chunk: Buffer | string,
+      encoding: string,
+      ...
+    }>,
+    callback: (error?: Error) => void
+  ): void;
+  _destroy(error: ?Error, callback: (error?: Error) => void): void;
+  _final(callback: (error?: Error) => void): void;
+}
+
+//According to the NodeJS docs:
+//"Since JavaScript doesn't have multiple prototypal inheritance, this class
+//prototypally inherits from Readable, and then parasitically from Writable."
+//Source: <https://nodejs.org/api/stream.html#stream_class_stream_duplex_1
+type duplexStreamOptions = writableStreamOptions &
+  readableStreamOptions & {
+    allowHalfOpen?: boolean,
+    readableObjectMode?: boolean,
+    writableObjectMode?: boolean,
+    readableHighWaterMark?: number,
+    writableHighWaterMark?: number,
+    ...
+  };
+declare class stream$Duplex extends stream$Readable mixins stream$Writable {
+  constructor(options?: duplexStreamOptions): void;
+}
+type transformStreamOptions = duplexStreamOptions & {
+  flush?: (callback: (error: ?Error, data: ?(Buffer | string)) => void) => void,
+  transform?: (
+    chunk: Buffer | string,
+    encoding: string,
+    callback: (error: ?Error, data: ?(Buffer | string)) => void
+  ) => void,
+  ...
+};
+declare class stream$Transform extends stream$Duplex {
+  constructor(options?: transformStreamOptions): void;
+  _flush(callback: (error: ?Error, data: ?(Buffer | string)) => void): void;
+  _transform(
+    chunk: Buffer | string,
+    encoding: string,
+    callback: (error: ?Error, data: ?(Buffer | string)) => void
+  ): void;
+}
+declare class stream$PassThrough extends stream$Transform {}
+
+declare module 'stream' {
+  declare var Stream: typeof stream$Stream;
+  declare var Readable: typeof stream$Readable;
+  declare var Writable: typeof stream$Writable;
+  declare var Duplex: typeof stream$Duplex;
+  declare var Transform: typeof stream$Transform;
+  declare var PassThrough: typeof stream$PassThrough;
+  declare function finished(
+    stream: stream$Stream,
+    callback: (error?: Error) => void
+  ): () => void;
+  declare function finished(
+    stream: stream$Stream,
+    options: ?{
+      error?: boolean,
+      readable?: boolean,
+      writable?: boolean,
+      ...
+    },
+    callback: (error?: Error) => void
+  ): () => void;
+  declare function pipeline<T: stream$Writable>(
+    s1: stream$Readable,
+    last: T,
+    cb: (error?: Error) => void
+  ): T;
+  declare function pipeline<T: stream$Writable>(
+    s1: stream$Readable,
+    s2: stream$Duplex,
+    last: T,
+    cb: (error?: Error) => void
+  ): T;
+  declare function pipeline<T: stream$Writable>(
+    s1: stream$Readable,
+    s2: stream$Duplex,
+    s3: stream$Duplex,
+    last: T,
+    cb: (error?: Error) => void
+  ): T;
+  declare function pipeline<T: stream$Writable>(
+    s1: stream$Readable,
+    s2: stream$Duplex,
+    s3: stream$Duplex,
+    s4: stream$Duplex,
+    last: T,
+    cb: (error?: Error) => void
+  ): T;
+  declare function pipeline<T: stream$Writable>(
+    s1: stream$Readable,
+    s2: stream$Duplex,
+    s3: stream$Duplex,
+    s4: stream$Duplex,
+    s5: stream$Duplex,
+    last: T,
+    cb: (error?: Error) => void
+  ): T;
+  declare function pipeline<T: stream$Writable>(
+    s1: stream$Readable,
+    s2: stream$Duplex,
+    s3: stream$Duplex,
+    s4: stream$Duplex,
+    s5: stream$Duplex,
+    s6: stream$Duplex,
+    last: T,
+    cb: (error?: Error) => void
+  ): T;
+  declare function pipeline(
+    streams: Array<stream$Stream>,
+    cb: (error?: Error) => void
+  ): stream$Stream;
+
+  declare interface StreamPipelineOptions {
+    +signal?: AbortSignal;
+    +end?: boolean;
+  }
+
+  declare type StreamPromise = {
+    pipeline(
+      s1: stream$Readable,
+      last: stream$Writable,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    pipeline(
+      s1: stream$Readable,
+      s2: stream$Duplex,
+      last: stream$Writable,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    pipeline(
+      s1: stream$Readable,
+      s2: stream$Duplex,
+      s3: stream$Duplex,
+      last: stream$Writable,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    pipeline(
+      s1: stream$Readable,
+      s2: stream$Duplex,
+      s3: stream$Duplex,
+      s4: stream$Duplex,
+      last: stream$Writable,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    pipeline(
+      s1: stream$Readable,
+      s2: stream$Duplex,
+      s3: stream$Duplex,
+      s4: stream$Duplex,
+      s5: stream$Duplex,
+      last: stream$Writable,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    pipeline(
+      s1: stream$Readable,
+      s2: stream$Duplex,
+      s3: stream$Duplex,
+      s4: stream$Duplex,
+      s5: stream$Duplex,
+      s6: stream$Duplex,
+      last: stream$Writable,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    pipeline(
+      streams: $ReadOnlyArray<stream$Stream>,
+      options?: StreamPipelineOptions
+    ): Promise<void>,
+    ...
+  };
+
+  declare var promises: StreamPromise;
+}
+
+declare class tty$ReadStream extends net$Socket {
+  constructor(fd: number, options?: Object): void;
+  isRaw: boolean;
+  setRawMode(mode: boolean): void;
+  isTTY: true;
+}
+declare class tty$WriteStream extends net$Socket {
+  constructor(fd: number): void;
+  /**
+   * Clears the current line of this `WriteStream` in a direction identified by `dir`.
+   *
+   * TODO: takes a callback and returns `boolean` in v12+
+   */
+  clearLine(dir: -1 | 0 | 1): void;
+  columns: number;
+  /**
+   * Moves this WriteStream's cursor to the specified position
+   *
+   * TODO: takes a callback and returns `boolean` in v12+
+   */
+  cursorTo(x: number, y?: number): void;
+  isTTY: true;
+  /**
+   * Moves this WriteStream's cursor relative to its current position
+   *
+   * TODO: takes a callback and returns `boolean` in v12+
+   */
+  moveCursor(dx: number, dy: number): void;
+  rows: number;
+
+  /**
+   * Clears this WriteStream from the current cursor down.
+   */
+  clearScreenDown(callback?: () => void): boolean;
+
+  /**
+   * Use this to determine what colors the terminal supports. Due to the nature of colors in terminals it is possible to either have false positives or false negatives. It depends on process information and the environment variables that may lie about what terminal is used. It is possible to pass in an env object to simulate the usage of a specific terminal. This can be useful to check how specific environment settings behave.
+   * To enforce a specific color support, use one of the below environment settings.
+   *
+   * 2 colors: FORCE_COLOR = 0 (Disables colors)
+   * 16 colors: FORCE_COLOR = 1
+   * 256 colors: FORCE_COLOR = 2
+   * 16,777,216 colors: FORCE_COLOR = 3
+   * Disabling color support is also possible by using the NO_COLOR and NODE_DISABLE_COLORS environment variables.
+   */
+  getColorDepth(env?: typeof process.env):
+    | 1 // 2
+    | 4 // 16
+    | 8 // 256
+    | 24; // 16,777,216
+
+  /**
+   * Returns the size of the TTY corresponding to this WriteStream. The array is of the type [numColumns, numRows] where numColumns and numRows represent the number of columns and rows in the corresponding TTY.
+   */
+  getWindowSize(): [
+    number, // columns
+    number, // rows
+  ];
+
+  /**
+   * - count <integer> The number of colors that are requested (minimum 2). Default: 16.
+   * - env <Object> An object containing the environment variables to check. This enables simulating the usage of a specific terminal. Default: process.env.
+   * - Returns: <boolean>
+   *
+   * Returns true if the writeStream supports at least as many colors as provided in count. Minimum support is 2 (black and white).
+   *
+   * This has the same false positives and negatives as described in tty$WriteStream#getColorDepth().
+   */
+  hasColors(count?: number, env?: typeof process.env): boolean;
+}
+
+declare module 'tty' {
+  declare function isatty(fd: number): boolean;
+  declare function setRawMode(mode: boolean): void;
+  declare var ReadStream: typeof tty$ReadStream;
+  declare var WriteStream: typeof tty$WriteStream;
+}
+
+declare class string_decoder$StringDecoder {
+  constructor(encoding?: 'utf8' | 'ucs2' | 'utf16le' | 'base64'): void;
+  end(): string;
+  write(buffer: Buffer): string;
+}
+
+declare module 'string_decoder' {
+  declare var StringDecoder: typeof string_decoder$StringDecoder;
+}
+
+type tls$connectOptions = {
+  port?: number,
+  host?: string,
+  socket?: net$Socket,
+  rejectUnauthorized?: boolean,
+  path?: string,
+  lookup?: (
+    domain: string,
+    options?: ?number | ?Object,
+    callback?: (err: ?Error, address: string, family: number) => void
+  ) => mixed,
+  requestOCSP?: boolean,
+  ...
+};
+
+type tls$Certificate$Subject = {
+  C?: string,
+  ST?: string,
+  L?: string,
+  O?: string,
+  OU?: string,
+  CN?: string,
+  ...
+};
+
+type tls$Certificate = {
+  raw: Buffer,
+  subject: tls$Certificate$Subject,
+  issuer: tls$Certificate$Subject,
+  valid_from: string,
+  valid_to: string,
+  serialNumber: string,
+  fingerprint: string,
+  fingerprint256: string,
+  ext_key_usage?: Array<string>,
+  subjectaltname?: string,
+  infoAccess?: {[string]: Array<string>, ...},
+  issuerCertificate?: tls$Certificate,
+  ...
+};
+
+declare class tls$TLSSocket extends net$Socket {
+  constructor(socket: net$Socket, options?: Object): void;
+  authorized: boolean;
+  authorizationError: string | null;
+  encrypted: true;
+  getCipher(): {
+    name: string,
+    version: string,
+    ...
+  } | null;
+  getEphemeralKeyInfo():
+    | {
+        type: 'DH',
+        size: number,
+        ...
+      }
+    | {
+        type: 'EDHC',
+        name: string,
+        size: number,
+        ...
+      }
+    | null;
+  getPeerCertificate(detailed?: boolean): tls$Certificate | null;
+  getSession(): ?Buffer;
+  getTLSTicket(): Buffer | void;
+  renegotiate(options: Object, callback: Function): boolean | void;
+  setMaxSendFragment(size: number): boolean;
+}
+
+declare class tls$Server extends net$Server {
+  listen(
+    port?: number,
+    hostname?: string,
+    backlog?: number,
+    callback?: Function
+  ): tls$Server;
+  listen(path: string, callback?: Function): tls$Server;
+  listen(handle: Object, callback?: Function): tls$Server;
+  close(callback?: Function): tls$Server;
+  addContext(hostname: string, context: Object): void;
+  getTicketKeys(): Buffer;
+  setTicketKeys(keys: Buffer): void;
+}
+
+declare module 'tls' {
+  declare var CLIENT_RENEG_LIMIT: number;
+  declare var CLIENT_RENEG_WINDOW: number;
+  declare var SLAB_BUFFER_SIZE: number;
+  declare var DEFAULT_CIPHERS: string;
+  declare var DEFAULT_ECDH_CURVE: string;
+  declare function getCiphers(): Array<string>;
+  declare function convertNPNProtocols(
+    NPNProtocols: Array<string>,
+    out: Object
+  ): void;
+  declare function checkServerIdentity(
+    servername: string,
+    cert: string
+  ): Error | void;
+  declare function parseCertString(s: string): Object;
+  declare function createSecureContext(details: Object): Object;
+  declare var SecureContext: Object;
+  declare var TLSSocket: typeof tls$TLSSocket;
+  declare var Server: typeof tls$Server;
+  declare function createServer(
+    options: Object,
+    secureConnectionListener?: Function
+  ): tls$Server;
+  declare function connect(
+    options: tls$connectOptions,
+    callback?: Function
+  ): tls$TLSSocket;
+  declare function connect(
+    port: number,
+    host?: string,
+    options?: tls$connectOptions,
+    callback?: Function
+  ): tls$TLSSocket;
+  declare function createSecurePair(
+    context?: Object,
+    isServer?: boolean,
+    requestCert?: boolean,
+    rejectUnauthorized?: boolean,
+    options?: Object
+  ): Object;
+}
+
+type url$urlObject = {
+  +href?: string,
+  +protocol?: string | null,
+  +slashes?: boolean | null,
+  +auth?: string | null,
+  +hostname?: string | null,
+  +port?: string | number | null,
+  +host?: string | null,
+  +pathname?: string | null,
+  +search?: string | null,
+  +query?: Object | null,
+  +hash?: string | null,
+  ...
+};
+
+declare module 'url' {
+  declare type Url = {|
+    protocol: string | null,
+    slashes: boolean | null,
+    auth: string | null,
+    host: string | null,
+    port: string | null,
+    hostname: string | null,
+    hash: string | null,
+    search: string | null,
+    query: string | null | {[string]: string, ...},
+    pathname: string | null,
+    path: string | null,
+    href: string,
+  |};
+
+  declare type UrlWithStringQuery = {|
+    ...Url,
+    query: string | null,
+  |};
+
+  declare type UrlWithParsedQuery = {|
+    ...Url,
+    query: {[string]: string, ...},
+  |};
+
+  declare function parse(
+    urlStr: string,
+    parseQueryString: true,
+    slashesDenoteHost?: boolean
+  ): UrlWithParsedQuery;
+  declare function parse(
+    urlStr: string,
+    parseQueryString?: false | void,
+    slashesDenoteHost?: boolean
+  ): UrlWithStringQuery;
+  declare function parse(
+    urlStr: string,
+    parseQueryString?: boolean,
+    slashesDenoteHost?: boolean
+  ): Url;
+  declare function format(urlObj: url$urlObject): string;
+  declare function resolve(from: string, to: string): string;
+  declare function domainToASCII(domain: string): string;
+  declare function domainToUnicode(domain: string): string;
+  declare function pathToFileURL(path: string): url$urlObject;
+  declare function fileURLToPath(path: url$urlObject | string): string;
+  declare class URLSearchParams {
+    @@iterator(): Iterator<[string, string]>;
+
+    size: number;
+
+    constructor(
+      init?:
+        | string
+        | URLSearchParams
+        | Array<[string, string]>
+        | {[string]: string, ...}
+    ): void;
+    append(name: string, value: string): void;
+    delete(name: string, value?: void): void;
+    entries(): Iterator<[string, string]>;
+    forEach<This>(
+      callback: (
+        this: This,
+        value: string,
+        name: string,
+        searchParams: URLSearchParams
+      ) => mixed,
+      thisArg?: This
+    ): void;
+    get(name: string): string | null;
+    getAll(name: string): string[];
+    has(name: string, value?: string): boolean;
+    keys(): Iterator<string>;
+    set(name: string, value: string): void;
+    sort(): void;
+    values(): Iterator<string>;
+    toString(): string;
+  }
+  declare class URL {
+    static canParse(url: string, base?: string): boolean;
+    static createObjectURL(blob: Blob): string;
+    static createObjectURL(mediaSource: MediaSource): string;
+    static revokeObjectURL(url: string): void;
+    constructor(input: string, base?: string | URL): void;
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    +origin: string;
+    password: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+    +searchParams: URLSearchParams;
+    username: string;
+    toString(): string;
+    toJSON(): string;
+  }
+}
+
+type util$InspectOptions = {
+  showHidden?: boolean,
+  depth?: ?number,
+  colors?: boolean,
+  customInspect?: boolean,
+  ...
+};
+
+declare type util$ParseArgsOption =
+  | {|
+      type: 'boolean',
+      multiple?: false,
+      short?: string,
+      default?: boolean,
+    |}
+  | {|
+      type: 'boolean',
+      multiple: true,
+      short?: string,
+      default?: Array<boolean>,
+    |}
+  | {|
+      type: 'string',
+      multiple?: false,
+      short?: string,
+      default?: string,
+    |}
+  | {|
+      type: 'string',
+      multiple: true,
+      short?: string,
+      default?: Array<string>,
+    |};
+
+type util$ParseArgsOptionToValue<TOption> = TOption['type'] extends 'boolean'
+  ? TOption['multiple'] extends true
+    ? Array<boolean>
+    : boolean
+  : TOption['type'] extends 'string'
+    ? TOption['multiple'] extends true
+      ? Array<string>
+      : string
+    : empty;
+
+type util$ParseArgsOptionsToValues<TOptions> = {
+  [key in keyof TOptions]: util$ParseArgsOptionToValue<{|
+    multiple: false,
+    ...TOptions[key],
+  |}>,
+};
+
+type util$ParseArgsToken =
+  | {|
+      kind: 'option',
+      index: number,
+      name: string,
+      rawName: string,
+      value?: string,
+      inlineValue?: boolean,
+    |}
+  | {|
+      kind: 'positional',
+      index: number,
+      value: string,
+    |}
+  | {|
+      kind: 'option-terminator',
+      index: number,
+    |};
+
+declare module 'util' {
+  declare function debuglog(section: string): (data: any, ...args: any) => void;
+  declare function format(format: string, ...placeholders: any): string;
+  declare function log(string: string): void;
+  declare function inspect(object: any, options?: util$InspectOptions): string;
+  declare function isArray(object: any): boolean;
+  declare function isRegExp(object: any): boolean;
+  declare function isDate(object: any): boolean;
+  declare function isError(object: any): boolean;
+  declare function inherits(
+    constructor: Function,
+    superConstructor: Function
+  ): void;
+  declare function deprecate(f: Function, string: string): Function;
+  declare function promisify(f: Function): Function;
+  declare function callbackify(f: Function): Function;
+  declare function stripVTControlCharacters(str: string): string;
+
+  declare function parseArgs<
+    TOptions: {[string]: util$ParseArgsOption} = {||},
+  >(config: {|
+    args?: Array<string>,
+    options?: TOptions,
+    strict?: boolean,
+    allowPositionals?: boolean,
+    tokens?: false,
+  |}): {|
+    values: util$ParseArgsOptionsToValues<TOptions>,
+    positionals: Array<string>,
+  |};
+
+  declare function parseArgs<
+    TOptions: {[string]: util$ParseArgsOption} = {||},
+  >(config: {|
+    args?: Array<string>,
+    options?: TOptions,
+    strict?: boolean,
+    allowPositionals?: boolean,
+    tokens: true,
+  |}): {|
+    values: util$ParseArgsOptionsToValues<TOptions>,
+    positionals: Array<string>,
+    tokens: Array<util$ParseArgsToken>,
+  |};
+
+  declare class TextDecoder {
+    constructor(
+      encoding?: string,
+      options?: {
+        fatal?: boolean,
+        ignoreBOM?: boolean,
+        ...
+      }
+    ): void;
+    decode(
+      input?: ArrayBuffer | DataView | $TypedArray,
+      options?: {stream?: boolean, ...}
+    ): string;
+    encoding: string;
+    fatal: boolean;
+    ignoreBOM: boolean;
+  }
+
+  declare class TextEncoder {
+    constructor(): void;
+    encode(input: string): Uint8Array;
+    encodeInto(
+      input: string,
+      buffer: Uint8Array
+    ): {written: number, read: number};
+    encoding: 'utf-8';
+  }
+
+  declare var types: {
+    isAnyArrayBuffer: (value: mixed) => boolean,
+    isArgumentsObject: (value: mixed) => boolean,
+    isArrayBuffer: (value: mixed) => boolean,
+    isAsyncFunction: (value: mixed) => boolean,
+    isBigInt64Array: (value: mixed) => boolean,
+    isBigUint64Array: (value: mixed) => boolean,
+    isBooleanObject: (value: mixed) => boolean,
+    isBoxedPrimitive: (value: mixed) => boolean,
+    isDataView: (value: mixed) => boolean,
+    isDate: (value: mixed) => boolean,
+    isExternal: (value: mixed) => boolean,
+    isFloat32Array: (value: mixed) => boolean,
+    isFloat64Array: (value: mixed) => boolean,
+    isGeneratorFunction: (value: mixed) => boolean,
+    isGeneratorObject: (value: mixed) => boolean,
+    isInt8Array: (value: mixed) => boolean,
+    isInt16Array: (value: mixed) => boolean,
+    isInt32Array: (value: mixed) => boolean,
+    isMap: (value: mixed) => boolean,
+    isMapIterator: (value: mixed) => boolean,
+    isModuleNamespaceObject: (value: mixed) => boolean,
+    isNativeError: (value: mixed) => boolean,
+    isNumberObject: (value: mixed) => boolean,
+    isPromise: (value: mixed) => boolean,
+    isProxy: (value: mixed) => boolean,
+    isRegExp: (value: mixed) => boolean,
+    isSet: (value: mixed) => boolean,
+    isSetIterator: (value: mixed) => boolean,
+    isSharedArrayBuffer: (value: mixed) => boolean,
+    isStringObject: (value: mixed) => boolean,
+    isSymbolObject: (value: mixed) => boolean,
+    isTypedArray: (value: mixed) => boolean,
+    isUint8Array: (value: mixed) => boolean,
+    isUint8ClampedArray: (value: mixed) => boolean,
+    isUint16Array: (value: mixed) => boolean,
+    isUint32Array: (value: mixed) => boolean,
+    isWeakMap: (value: mixed) => boolean,
+    isWeakSet: (value: mixed) => boolean,
+    isWebAssemblyCompiledModule: (value: mixed) => boolean,
+    ...
+  };
+}
+
+type vm$ScriptOptions = {
+  cachedData?: Buffer,
+  columnOffset?: number,
+  displayErrors?: boolean,
+  filename?: string,
+  lineOffset?: number,
+  produceCachedData?: boolean,
+  timeout?: number,
+  ...
+};
+
+type vm$CreateContextOptions = {
+  name?: string,
+  origin?: string,
+  codeGeneration?: {
+    strings?: boolean,
+    wasm?: boolean,
+    ...
+  },
+  ...
+};
+
+type vm$CompileFunctionOptions = {
+  filename?: string,
+  lineOffset?: number,
+  columnOffset?: number,
+  cachedData?: Buffer,
+  produceCachedData?: boolean,
+  parsingContext?: {[key: string]: any, ...},
+  contextExtensions?: Array<{[key: string]: any, ...}>,
+  ...
+};
+
+declare class vm$Script {
+  constructor(code: string, options?: vm$ScriptOptions | string): void;
+  cachedData: ?Buffer;
+  cachedDataRejected: ?boolean;
+  cachedDataProduced: ?boolean;
+  runInContext(
+    contextifiedSandbox: vm$Context,
+    options?: vm$ScriptOptions
+  ): any;
+  runInNewContext(
+    sandbox?: {[key: string]: any, ...},
+    options?: vm$ScriptOptions
+  ): any;
+  runInThisContext(options?: vm$ScriptOptions): any;
+  createCachedData(): Buffer;
+}
+
+declare class vm$Context {}
+
+declare module 'vm' {
+  declare var Script: typeof vm$Script;
+  declare function createContext(
+    sandbox?: interface {[key: string]: any},
+    options?: vm$CreateContextOptions
+  ): vm$Context;
+  declare function isContext(sandbox: {[key: string]: any, ...}): boolean;
+  declare function runInContext(
+    code: string,
+    contextifiedSandbox: vm$Context,
+    options?: vm$ScriptOptions | string
+  ): any;
+  declare function runInDebugContext(code: string): any;
+  declare function runInNewContext(
+    code: string,
+    sandbox?: {[key: string]: any, ...},
+    options?: vm$ScriptOptions | string
+  ): any;
+  declare function runInThisContext(
+    code: string,
+    options?: vm$ScriptOptions | string
+  ): any;
+  declare function compileFunction(
+    code: string,
+    params: string[],
+    options: vm$CompileFunctionOptions
+  ): Function;
+}
+
+type zlib$options = {
+  flush?: number,
+  chunkSize?: number,
+  windowBits?: number,
+  level?: number,
+  memLevel?: number,
+  strategy?: number,
+  dictionary?: Buffer,
+  ...
+};
+
+type zlib$brotliOptions = {
+  flush?: number,
+  finishFlush?: number,
+  chunkSize?: number,
+  params?: {
+    [number]: boolean | number,
+    ...
+  },
+  maxOutputLength?: number,
+  ...
+};
+
+type zlib$syncFn = (
+  buffer: Buffer | $TypedArray | DataView | ArrayBuffer | string,
+  options?: zlib$options
+) => Buffer;
+
+type zlib$asyncFn = (
+  buffer: Buffer | $TypedArray | DataView | ArrayBuffer | string,
+  options?: zlib$options,
+  callback?: (error: ?Error, result: Buffer) => void
+) => void;
+
+type zlib$brotliSyncFn = (
+  buffer: Buffer | $TypedArray | DataView | ArrayBuffer | string,
+  options?: zlib$brotliOptions
+) => Buffer;
+
+type zlib$brotliAsyncFn = (
+  buffer: Buffer | $TypedArray | DataView | ArrayBuffer | string,
+  options?: zlib$brotliOptions,
+  callback?: (error: ?Error, result: Buffer) => void
+) => void;
+
+// Accessing the constants directly from the module is currently still
+// possible but should be considered deprecated.
+// ref: https://github.com/nodejs/node/blob/master/doc/api/zlib.md
+declare module 'zlib' {
+  declare var Z_NO_FLUSH: number;
+  declare var Z_PARTIAL_FLUSH: number;
+  declare var Z_SYNC_FLUSH: number;
+  declare var Z_FULL_FLUSH: number;
+  declare var Z_FINISH: number;
+  declare var Z_BLOCK: number;
+  declare var Z_TREES: number;
+  declare var Z_OK: number;
+  declare var Z_STREAM_END: number;
+  declare var Z_NEED_DICT: number;
+  declare var Z_ERRNO: number;
+  declare var Z_STREAM_ERROR: number;
+  declare var Z_DATA_ERROR: number;
+  declare var Z_MEM_ERROR: number;
+  declare var Z_BUF_ERROR: number;
+  declare var Z_VERSION_ERROR: number;
+  declare var Z_NO_COMPRESSION: number;
+  declare var Z_BEST_SPEED: number;
+  declare var Z_BEST_COMPRESSION: number;
+  declare var Z_DEFAULT_COMPRESSION: number;
+  declare var Z_FILTERED: number;
+  declare var Z_HUFFMAN_ONLY: number;
+  declare var Z_RLE: number;
+  declare var Z_FIXED: number;
+  declare var Z_DEFAULT_STRATEGY: number;
+  declare var Z_BINARY: number;
+  declare var Z_TEXT: number;
+  declare var Z_ASCII: number;
+  declare var Z_UNKNOWN: number;
+  declare var Z_DEFLATED: number;
+  declare var Z_NULL: number;
+  declare var Z_DEFAULT_CHUNK: number;
+  declare var Z_DEFAULT_LEVEL: number;
+  declare var Z_DEFAULT_MEMLEVEL: number;
+  declare var Z_DEFAULT_WINDOWBITS: number;
+  declare var Z_MAX_CHUNK: number;
+  declare var Z_MAX_LEVEL: number;
+  declare var Z_MAX_MEMLEVEL: number;
+  declare var Z_MAX_WINDOWBITS: number;
+  declare var Z_MIN_CHUNK: number;
+  declare var Z_MIN_LEVEL: number;
+  declare var Z_MIN_MEMLEVEL: number;
+  declare var Z_MIN_WINDOWBITS: number;
+  declare var constants: {
+    Z_NO_FLUSH: number,
+    Z_PARTIAL_FLUSH: number,
+    Z_SYNC_FLUSH: number,
+    Z_FULL_FLUSH: number,
+    Z_FINISH: number,
+    Z_BLOCK: number,
+    Z_TREES: number,
+    Z_OK: number,
+    Z_STREAM_END: number,
+    Z_NEED_DICT: number,
+    Z_ERRNO: number,
+    Z_STREAM_ERROR: number,
+    Z_DATA_ERROR: number,
+    Z_MEM_ERROR: number,
+    Z_BUF_ERROR: number,
+    Z_VERSION_ERROR: number,
+    Z_NO_COMPRESSION: number,
+    Z_BEST_SPEED: number,
+    Z_BEST_COMPRESSION: number,
+    Z_DEFAULT_COMPRESSION: number,
+    Z_FILTERED: number,
+    Z_HUFFMAN_ONLY: number,
+    Z_RLE: number,
+    Z_FIXED: number,
+    Z_DEFAULT_STRATEGY: number,
+    Z_BINARY: number,
+    Z_TEXT: number,
+    Z_ASCII: number,
+    Z_UNKNOWN: number,
+    Z_DEFLATED: number,
+    Z_NULL: number,
+    Z_DEFAULT_CHUNK: number,
+    Z_DEFAULT_LEVEL: number,
+    Z_DEFAULT_MEMLEVEL: number,
+    Z_DEFAULT_WINDOWBITS: number,
+    Z_MAX_CHUNK: number,
+    Z_MAX_LEVEL: number,
+    Z_MAX_MEMLEVEL: number,
+    Z_MAX_WINDOWBITS: number,
+    Z_MIN_CHUNK: number,
+    Z_MIN_LEVEL: number,
+    Z_MIN_MEMLEVEL: number,
+    Z_MIN_WINDOWBITS: number,
+
+    BROTLI_DECODE: number,
+    BROTLI_ENCODE: number,
+    BROTLI_OPERATION_PROCESS: number,
+    BROTLI_OPERATION_FLUSH: number,
+    BROTLI_OPERATION_FINISH: number,
+    BROTLI_OPERATION_EMIT_METADATA: number,
+    BROTLI_PARAM_MODE: number,
+    BROTLI_MODE_GENERIC: number,
+    BROTLI_MODE_TEXT: number,
+    BROTLI_MODE_FONT: number,
+    BROTLI_DEFAULT_MODE: number,
+    BROTLI_PARAM_QUALITY: number,
+    BROTLI_MIN_QUALITY: number,
+    BROTLI_MAX_QUALITY: number,
+    BROTLI_DEFAULT_QUALITY: number,
+    BROTLI_PARAM_LGWIN: number,
+    BROTLI_MIN_WINDOW_BITS: number,
+    BROTLI_MAX_WINDOW_BITS: number,
+    BROTLI_LARGE_MAX_WINDOW_BITS: number,
+    BROTLI_DEFAULT_WINDOW: number,
+    BROTLI_PARAM_LGBLOCK: number,
+    BROTLI_MIN_INPUT_BLOCK_BITS: number,
+    BROTLI_MAX_INPUT_BLOCK_BITS: number,
+    BROTLI_PARAM_DISABLE_LITERAL_CONTEXT_MODELING: number,
+    BROTLI_PARAM_SIZE_HINT: number,
+    BROTLI_PARAM_LARGE_WINDOW: number,
+    BROTLI_PARAM_NPOSTFIX: number,
+    BROTLI_PARAM_NDIRECT: number,
+    BROTLI_DECODER_RESULT_ERROR: number,
+    BROTLI_DECODER_RESULT_SUCCESS: number,
+    BROTLI_DECODER_RESULT_NEEDS_MORE_INPUT: number,
+    BROTLI_DECODER_RESULT_NEEDS_MORE_OUTPUT: number,
+    BROTLI_DECODER_PARAM_DISABLE_RING_BUFFER_REALLOCATION: number,
+    BROTLI_DECODER_PARAM_LARGE_WINDOW: number,
+    BROTLI_DECODER_NO_ERROR: number,
+    BROTLI_DECODER_SUCCESS: number,
+    BROTLI_DECODER_NEEDS_MORE_INPUT: number,
+    BROTLI_DECODER_NEEDS_MORE_OUTPUT: number,
+    BROTLI_DECODER_ERROR_FORMAT_EXUBERANT_NIBBLE: number,
+    BROTLI_DECODER_ERROR_FORMAT_RESERVED: number,
+    BROTLI_DECODER_ERROR_FORMAT_EXUBERANT_META_NIBBLE: number,
+    BROTLI_DECODER_ERROR_FORMAT_SIMPLE_HUFFMAN_ALPHABET: number,
+    BROTLI_DECODER_ERROR_FORMAT_SIMPLE_HUFFMAN_SAME: number,
+    BROTLI_DECODER_ERROR_FORMAT_CL_SPACE: number,
+    BROTLI_DECODER_ERROR_FORMAT_HUFFMAN_SPACE: number,
+    BROTLI_DECODER_ERROR_FORMAT_CONTEXT_MAP_REPEAT: number,
+    BROTLI_DECODER_ERROR_FORMAT_BLOCK_LENGTH_1: number,
+    BROTLI_DECODER_ERROR_FORMAT_BLOCK_LENGTH_2: number,
+    BROTLI_DECODER_ERROR_FORMAT_TRANSFORM: number,
+    BROTLI_DECODER_ERROR_FORMAT_DICTIONARY: number,
+    BROTLI_DECODER_ERROR_FORMAT_WINDOW_BITS: number,
+    BROTLI_DECODER_ERROR_FORMAT_PADDING_1: number,
+    BROTLI_DECODER_ERROR_FORMAT_PADDING_2: number,
+    BROTLI_DECODER_ERROR_FORMAT_DISTANCE: number,
+    BROTLI_DECODER_ERROR_DICTIONARY_NOT_SET: number,
+    BROTLI_DECODER_ERROR_INVALID_ARGUMENTS: number,
+    BROTLI_DECODER_ERROR_ALLOC_CONTEXT_MODES: number,
+    BROTLI_DECODER_ERROR_ALLOC_TREE_GROUPS: number,
+    BROTLI_DECODER_ERROR_ALLOC_CONTEXT_MAP: number,
+    BROTLI_DECODER_ERROR_ALLOC_RING_BUFFER_1: number,
+    BROTLI_DECODER_ERROR_ALLOC_RING_BUFFER_2: number,
+    BROTLI_DECODER_ERROR_ALLOC_BLOCK_TYPE_TREES: number,
+    BROTLI_DECODER_ERROR_UNREACHABL: number,
+    ...
+  };
+  declare var codes: {
+    Z_OK: number,
+    Z_STREAM_END: number,
+    Z_NEED_DICT: number,
+    Z_ERRNO: number,
+    Z_STREAM_ERROR: number,
+    Z_DATA_ERROR: number,
+    Z_MEM_ERROR: number,
+    Z_BUF_ERROR: number,
+    Z_VERSION_ERROR: number,
+    ...
+  };
+  declare class Zlib extends stream$Duplex {
+    // TODO
+  }
+  declare class BrotliCompress extends Zlib {}
+  declare class BrotliDecompress extends Zlib {}
+  declare class Deflate extends Zlib {}
+  declare class Inflate extends Zlib {}
+  declare class Gzip extends Zlib {}
+  declare class Gunzip extends Zlib {}
+  declare class DeflateRaw extends Zlib {}
+  declare class InflateRaw extends Zlib {}
+  declare class Unzip extends Zlib {}
+  declare function createBrotliCompress(
+    options?: zlib$brotliOptions
+  ): BrotliCompress;
+  declare function createBrotliDecompress(
+    options?: zlib$brotliOptions
+  ): BrotliDecompress;
+  declare function createDeflate(options?: zlib$options): Deflate;
+  declare function createInflate(options?: zlib$options): Inflate;
+  declare function createDeflateRaw(options?: zlib$options): DeflateRaw;
+  declare function createInflateRaw(options?: zlib$options): InflateRaw;
+  declare function createGzip(options?: zlib$options): Gzip;
+  declare function createGunzip(options?: zlib$options): Gunzip;
+  declare function createUnzip(options?: zlib$options): Unzip;
+  declare var brotliCompress: zlib$brotliAsyncFn;
+  declare var brotliCompressSync: zlib$brotliSyncFn;
+  declare var brotliDeompress: zlib$brotliAsyncFn;
+  declare var brotliDecompressSync: zlib$brotliSyncFn;
+  declare var deflate: zlib$asyncFn;
+  declare var deflateSync: zlib$syncFn;
+  declare var gzip: zlib$asyncFn;
+  declare var gzipSync: zlib$syncFn;
+  declare var deflateRaw: zlib$asyncFn;
+  declare var deflateRawSync: zlib$syncFn;
+  declare var unzip: zlib$asyncFn;
+  declare var unzipSync: zlib$syncFn;
+  declare var inflate: zlib$asyncFn;
+  declare var inflateSync: zlib$syncFn;
+  declare var gunzip: zlib$asyncFn;
+  declare var gunzipSync: zlib$syncFn;
+  declare var inflateRaw: zlib$asyncFn;
+  declare var inflateRawSync: zlib$syncFn;
+}
+
+declare module 'assert' {
+  declare class AssertionError extends Error {}
+  declare type AssertStrict = {
+    (value: any, message?: string): void,
+    ok(value: any, message?: string): void,
+    fail(message?: string | Error): void,
+    // deprecated since v10.15
+    fail(actual: any, expected: any, message: string, operator: string): void,
+    equal(actual: any, expected: any, message?: string): void,
+    notEqual(actual: any, expected: any, message?: string): void,
+    deepEqual(actual: any, expected: any, message?: string): void,
+    notDeepEqual(actual: any, expected: any, message?: string): void,
+    throws(
+      block: Function,
+      error?: Function | RegExp | ((err: any) => boolean),
+      message?: string
+    ): void,
+    doesNotThrow(block: Function, message?: string): void,
+    ifError(value: any): void,
+    AssertionError: typeof AssertionError,
+    strict: AssertStrict,
+    ...
+  };
+  declare module.exports: {
+    (value: any, message?: string): void,
+    ok(value: any, message?: string): void,
+    fail(message?: string | Error): void,
+    // deprecated since v10.15
+    fail(actual: any, expected: any, message: string, operator: string): void,
+    equal(actual: any, expected: any, message?: string): void,
+    notEqual(actual: any, expected: any, message?: string): void,
+    deepEqual(actual: any, expected: any, message?: string): void,
+    notDeepEqual(actual: any, expected: any, message?: string): void,
+    strictEqual(actual: any, expected: any, message?: string): void,
+    notStrictEqual(actual: any, expected: any, message?: string): void,
+    deepStrictEqual(actual: any, expected: any, message?: string): void,
+    notDeepStrictEqual(actual: any, expected: any, message?: string): void,
+    throws(
+      block: Function,
+      error?: Function | RegExp | ((err: any) => boolean),
+      message?: string
+    ): void,
+    doesNotThrow(block: Function, message?: string): void,
+    ifError(value: any): void,
+    AssertionError: typeof AssertionError,
+    strict: AssertStrict,
+    ...
+  };
+}
+
+type HeapCodeStatistics = {
+  code_and_metadata_size: number,
+  bytecode_and_metadata_size: number,
+  external_script_source_size: number,
+  ...
+};
+
+type HeapStatistics = {
+  total_heap_size: number,
+  total_heap_size_executable: number,
+  total_physical_size: number,
+  total_available_size: number,
+  used_heap_size: number,
+  heap_size_limit: number,
+  malloced_memory: number,
+  peak_malloced_memory: number,
+  does_zap_garbage: 0 | 1,
+  number_of_native_contexts: number,
+  number_of_detached_contexts: number,
+  ...
+};
+
+type HeapSpaceStatistics = {
+  space_name: string,
+  space_size: number,
+  space_used_size: number,
+  space_available_size: number,
+  physical_space_size: number,
+  ...
+};
+
+// Adapted from DefinitelyTyped for Node v14:
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/dea4d99dc302a0b0a25270e46e72c1fe9b741a17/types/node/v14/v8.d.ts
+declare module 'v8' {
+  /**
+   * Returns an integer representing a "version tag" derived from the V8 version, command line flags and detected CPU features.
+   * This is useful for determining whether a vm.Script cachedData buffer is compatible with this instance of V8.
+   */
+  declare function cachedDataVersionTag(): number;
+
+  /**
+   * Generates a snapshot of the current V8 heap and returns a Readable
+   * Stream that may be used to read the JSON serialized representation.
+   * This conversation was marked as resolved by joyeecheung
+   * This JSON stream format is intended to be used with tools such as
+   * Chrome DevTools. The JSON schema is undocumented and specific to the
+   * V8 engine, and may change from one version of V8 to the next.
+   */
+  declare function getHeapSnapshot(): stream$Readable;
+
+  /**
+   *
+   * @param fileName The file path where the V8 heap snapshot is to be
+   * saved. If not specified, a file name with the pattern
+   * `'Heap-${yyyymmdd}-${hhmmss}-${pid}-${thread_id}.heapsnapshot'` will be
+   * generated, where `{pid}` will be the PID of the Node.js process,
+   * `{thread_id}` will be `0` when `writeHeapSnapshot()` is called from
+   * the main Node.js thread or the id of a worker thread.
+   */
+  declare function writeHeapSnapshot(fileName?: string): string;
+
+  declare function getHeapCodeStatistics(): HeapCodeStatistics;
+
+  declare function getHeapStatistics(): HeapStatistics;
+  declare function getHeapSpaceStatistics(): Array<HeapSpaceStatistics>;
+  declare function setFlagsFromString(flags: string): void;
+
+  declare class Serializer {
+    constructor(): void;
+
+    /**
+     * Writes out a header, which includes the serialization format version.
+     */
+    writeHeader(): void;
+
+    /**
+     * Serializes a JavaScript value and adds the serialized representation to the internal buffer.
+     * This throws an error if value cannot be serialized.
+     */
+    writeValue(val: any): boolean;
+
+    /**
+     * Returns the stored internal buffer.
+     * This serializer should not be used once the buffer is released.
+     * Calling this method results in undefined behavior if a previous write has failed.
+     */
+    releaseBuffer(): Buffer;
+
+    /**
+     * Marks an ArrayBuffer as having its contents transferred out of band.\
+     * Pass the corresponding ArrayBuffer in the deserializing context to deserializer.transferArrayBuffer().
+     */
+    transferArrayBuffer(id: number, arrayBuffer: ArrayBuffer): void;
+
+    /**
+     * Write a raw 32-bit unsigned integer.
+     */
+    writeUint32(value: number): void;
+
+    /**
+     * Write a raw 64-bit unsigned integer, split into high and low 32-bit parts.
+     */
+    writeUint64(hi: number, lo: number): void;
+
+    /**
+     * Write a JS number value.
+     */
+    writeDouble(value: number): void;
+
+    /**
+     * Write raw bytes into the serializer’s internal buffer.
+     * The deserializer will require a way to compute the length of the buffer.
+     */
+    writeRawBytes(buffer: Buffer | $TypedArray | DataView): void;
+  }
+
+  /**
+   * A subclass of `Serializer` that serializes `TypedArray` (in particular `Buffer`) and `DataView` objects as host objects,
+   * and only stores the part of their underlying `ArrayBuffers` that they are referring to.
+   */
+  declare class DefaultSerializer extends Serializer {}
+
+  declare class Deserializer {
+    constructor(data: Buffer | $TypedArray | DataView): void;
+
+    /**
+     * Reads and validates a header (including the format version).
+     * May, for example, reject an invalid or unsupported wire format.
+     * In that case, an Error is thrown.
+     */
+    readHeader(): boolean;
+
+    /**
+     * Deserializes a JavaScript value from the buffer and returns it.
+     */
+    readValue(): any;
+
+    /**
+     * Marks an ArrayBuffer as having its contents transferred out of band.
+     * Pass the corresponding `ArrayBuffer` in the serializing context to serializer.transferArrayBuffer()
+     * (or return the id from serializer._getSharedArrayBufferId() in the case of SharedArrayBuffers).
+     */
+    transferArrayBuffer(id: number, arrayBuffer: ArrayBuffer): void;
+
+    /**
+     * Reads the underlying wire format version.
+     * Likely mostly to be useful to legacy code reading old wire format versions.
+     * May not be called before .readHeader().
+     */
+    getWireFormatVersion(): number;
+
+    /**
+     * Read a raw 32-bit unsigned integer and return it.
+     */
+    readUint32(): number;
+
+    /**
+     * Read a raw 64-bit unsigned integer and return it as an array [hi, lo] with two 32-bit unsigned integer entries.
+     */
+    readUint64(): [number, number];
+
+    /**
+     * Read a JS number value.
+     */
+    readDouble(): number;
+
+    /**
+     * Read raw bytes from the deserializer’s internal buffer.
+     * The length parameter must correspond to the length of the buffer that was passed to serializer.writeRawBytes().
+     */
+    readRawBytes(length: number): Buffer;
+  }
+
+  /**
+   * A subclass of `Serializer` that serializes `TypedArray` (in particular `Buffer`) and `DataView` objects as host objects,
+   * and only stores the part of their underlying `ArrayBuffers` that they are referring to.
+   */
+  declare class DefaultDeserializer extends Deserializer {}
+
+  /**
+   * Uses a `DefaultSerializer` to serialize value into a buffer.
+   */
+  declare function serialize(value: any): Buffer;
+
+  /**
+   * Uses a `DefaultDeserializer` with default options to read a JS value from a buffer.
+   */
+  declare function deserialize(data: Buffer | $TypedArray | DataView): any;
+}
+
+type repl$DefineCommandOptions = (...args: Array<any>) => void | {
+  action: (...args: Array<any>) => void,
+  help?: string,
+  ...
+};
+
+declare class $SymbolReplModeMagic mixins Symbol {}
+declare class $SymbolReplModeSloppy mixins Symbol {}
+declare class $SymbolReplModeStrict mixins Symbol {}
+
+declare module 'repl' {
+  declare var REPL_MODE_MAGIC: $SymbolReplModeMagic;
+  declare var REPL_MODE_SLOPPY: $SymbolReplModeSloppy;
+  declare var REPL_MODE_STRICT: $SymbolReplModeStrict;
+
+  declare class REPLServer extends readline$Interface {
+    context: vm$Context;
+    defineCommand(command: string, options: repl$DefineCommandOptions): void;
+    displayPrompt(preserveCursor?: boolean): void;
+  }
+
+  declare function start(prompt: string): REPLServer;
+  declare function start(options: {
+    prompt?: string,
+    input?: stream$Readable,
+    output?: stream$Writable,
+    terminal?: boolean,
+    eval?: Function,
+    useColors?: boolean,
+    useGlobal?: boolean,
+    ignoreUndefined?: boolean,
+    writer?: (object: any, options?: util$InspectOptions) => string,
+    completer?: readline$InterfaceCompleter,
+    replMode?:
+      | $SymbolReplModeMagic
+      | $SymbolReplModeSloppy
+      | $SymbolReplModeStrict,
+    breakEvalOnSigint?: boolean,
+    ...
+  }): REPLServer;
+
+  declare class Recoverable extends SyntaxError {
+    constructor(err: Error): void;
+  }
+}
+
+declare module 'inspector' {
+  declare function open(port?: number, host?: string, wait?: boolean): void;
+
+  declare function close(): void;
+  declare function url(): string | void;
+  declare var console: Object;
+  declare function waitForDebugger(): void;
+
+  declare class Session extends events$EventEmitter {
+    constructor(): void;
+    connect(): void;
+    connectToMainThread(): void;
+    disconnect(): void;
+    post(method: string, params?: Object, callback?: Function): void;
+  }
+}
+
+/* globals: https://nodejs.org/api/globals.html */
+
+type process$CPUUsage = {
+  user: number,
+  system: number,
+  ...
+};
+
+declare class Process extends events$EventEmitter {
+  abort(): void;
+  allowedNodeEnvironmentFlags: Set<string>;
+  arch: string;
+  argv: Array<string>;
+  chdir(directory: string): void;
+  config: Object;
+  connected: boolean;
+  cpuUsage(previousValue?: process$CPUUsage): process$CPUUsage;
+  cwd(): string;
+  disconnect?: () => void;
+  domain?: domain$Domain;
+  env: {[key: string]: string | void, ...};
+  emitWarning(warning: string | Error): void;
+  emitWarning(
+    warning: string,
+    typeOrCtor: string | ((...empty) => mixed)
+  ): void;
+  emitWarning(
+    warning: string,
+    type: string,
+    codeOrCtor: string | ((...empty) => mixed)
+  ): void;
+  emitWarning(
+    warning: string,
+    type: string,
+    code: string,
+    ctor?: (...empty) => mixed
+  ): void;
+  execArgv: Array<string>;
+  execPath: string;
+  exit(code?: number): empty;
+  exitCode?: number;
+  getegid?: () => number;
+  geteuid?: () => number;
+  getgid?: () => number;
+  getgroups?: () => Array<number>;
+  getuid?: () => number;
+  hrtime: {
+    (time?: [number, number]): [number, number],
+    bigint: () => bigint,
+    ...
+  };
+  initgroups?: (user: number | string, extra_group: number | string) => void;
+  kill(pid: number, signal?: string | number): void;
+  mainModule: Object;
+  memoryUsage(): {
+    arrayBuffers: number,
+    rss: number,
+    heapTotal: number,
+    heapUsed: number,
+    external: number,
+    ...
+  };
+  nextTick: <T>(cb: (...T) => mixed, ...T) => void;
+  pid: number;
+  platform: string;
+  release: {
+    name: string,
+    lts?: string,
+    sourceUrl: string,
+    headersUrl: string,
+    libUrl: string,
+    ...
+  };
+  send?: (
+    message: any,
+    sendHandleOrCallback?: net$Socket | net$Server | Function,
+    callback?: Function
+  ) => void;
+  setegid?: (id: number | string) => void;
+  seteuid?: (id: number | string) => void;
+  setgid?: (id: number | string) => void;
+  setgroups?: <Group: string | number>(groups: Array<Group>) => void;
+  setuid?: (id: number | string) => void;
+  stderr: stream$Writable | tty$WriteStream;
+  stdin: stream$Readable | tty$ReadStream;
+  stdout: stream$Writable | tty$WriteStream;
+  title: string;
+  umask(mask?: number): number;
+  uptime(): number;
+  version: string;
+  versions: {
+    [key: string]: ?string,
+    node: string,
+    v8: string,
+    ...
+  };
+}
+declare var process: Process;
+
+declare var __filename: string;
+declare var __dirname: string;
+
+declare function setImmediate(
+  callback: (...args: Array<any>) => mixed,
+  ...args: Array<any>
+): Object;
+declare function clearImmediate(immediateObject: any): Object;
+
+// https://nodejs.org/api/esm.html#node-imports
+
+declare module 'node:assert' {
+  declare module.exports: $Exports<'assert'>;
+}
+
+declare module 'node:assert/strict' {
+  declare module.exports: $Exports<'assert'>['strict'];
+}
+
+declare module 'node:events' {
+  declare module.exports: $Exports<'events'>;
+}
+
+declare module 'node:fs' {
+  declare module.exports: $Exports<'fs'>;
+}
+
+declare module 'node:os' {
+  declare module.exports: $Exports<'os'>;
+}
+
+declare module 'fs/promises' {
+  declare module.exports: $Exports<'fs'>['promises'];
+}
+
+declare module 'node:fs/promises' {
+  declare module.exports: $Exports<'fs'>['promises'];
+}
+
+declare module 'node:path' {
+  declare module.exports: $Exports<'path'>;
+}
+
+declare module 'process' {
+  declare module.exports: Process;
+}
+
+declare module 'node:process' {
+  declare module.exports: $Exports<'process'>;
+}
+
+declare module 'node:util' {
+  declare module.exports: $Exports<'util'>;
+}
+
+declare module 'node:url' {
+  declare module.exports: $Exports<'url'>;
+}
+
+declare module 'worker_threads' {
+  declare var isMainThread: boolean;
+  declare var parentPort: null | MessagePort;
+  declare var threadId: number;
+  declare var workerData: any;
+
+  declare class MessageChannel {
+    +port1: MessagePort;
+    +port2: MessagePort;
+  }
+
+  declare class MessagePort extends events$EventEmitter {
+    close(): void;
+    postMessage(
+      value: any,
+      transferList?: Array<ArrayBuffer | MessagePort>
+    ): void;
+    ref(): void;
+    unref(): void;
+    start(): void;
+
+    addListener(event: 'close', listener: () => void): this;
+    addListener(event: 'message', listener: (value: any) => void): this;
+    addListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    emit(event: 'close'): boolean;
+    emit(event: 'message', value: any): boolean;
+    emit(event: string | Symbol, ...args: any[]): boolean;
+
+    on(event: 'close', listener: () => void): this;
+    on(event: 'message', listener: (value: any) => void): this;
+    on(event: string | Symbol, listener: (...args: any[]) => void): this;
+
+    once(event: 'close', listener: () => void): this;
+    once(event: 'message', listener: (value: any) => void): this;
+    once(event: string | Symbol, listener: (...args: any[]) => void): this;
+
+    prependListener(event: 'close', listener: () => void): this;
+    prependListener(event: 'message', listener: (value: any) => void): this;
+    prependListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    prependOnceListener(event: 'close', listener: () => void): this;
+    prependOnceListener(event: 'message', listener: (value: any) => void): this;
+    prependOnceListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    removeListener(event: 'close', listener: () => void): this;
+    removeListener(event: 'message', listener: (value: any) => void): this;
+    removeListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    off(event: 'close', listener: () => void): this;
+    off(event: 'message', listener: (value: any) => void): this;
+    off(event: string | Symbol, listener: (...args: any[]) => void): this;
+  }
+
+  declare type WorkerOptions = {|
+    env?: Object,
+    eval?: boolean,
+    workerData?: any,
+    stdin?: boolean,
+    stdout?: boolean,
+    stderr?: boolean,
+    execArgv?: string[],
+  |};
+
+  declare class Worker extends events$EventEmitter {
+    +stdin: stream$Writable | null;
+    +stdout: stream$Readable;
+    +stderr: stream$Readable;
+    +threadId: number;
+
+    constructor(filename: string, options?: WorkerOptions): void;
+
+    postMessage(
+      value: any,
+      transferList?: Array<ArrayBuffer | MessagePort>
+    ): void;
+    ref(): void;
+    unref(): void;
+    terminate(callback?: (err: Error, exitCode: number) => void): void;
+    /**
+     * Transfer a `MessagePort` to a different `vm` Context. The original `port`
+     * object will be rendered unusable, and the returned `MessagePort` instance will
+     * take its place.
+     *
+     * The returned `MessagePort` will be an object in the target context, and will
+     * inherit from its global `Object` class. Objects passed to the
+     * `port.onmessage()` listener will also be created in the target context
+     * and inherit from its global `Object` class.
+     *
+     * However, the created `MessagePort` will no longer inherit from
+     * `EventEmitter`, and only `port.onmessage()` can be used to receive
+     * events using it.
+     */
+    moveMessagePortToContext(
+      port: MessagePort,
+      context: vm$Context
+    ): MessagePort;
+
+    addListener(event: 'error', listener: (err: Error) => void): this;
+    addListener(event: 'exit', listener: (exitCode: number) => void): this;
+    addListener(event: 'message', listener: (value: any) => void): this;
+    addListener(event: 'online', listener: () => void): this;
+    addListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    emit(event: 'error', err: Error): boolean;
+    emit(event: 'exit', exitCode: number): boolean;
+    emit(event: 'message', value: any): boolean;
+    emit(event: 'online'): boolean;
+    emit(event: string | Symbol, ...args: any[]): boolean;
+
+    on(event: 'error', listener: (err: Error) => void): this;
+    on(event: 'exit', listener: (exitCode: number) => void): this;
+    on(event: 'message', listener: (value: any) => void): this;
+    on(event: 'online', listener: () => void): this;
+    on(event: string | Symbol, listener: (...args: any[]) => void): this;
+
+    once(event: 'error', listener: (err: Error) => void): this;
+    once(event: 'exit', listener: (exitCode: number) => void): this;
+    once(event: 'message', listener: (value: any) => void): this;
+    once(event: 'online', listener: () => void): this;
+    once(event: string | Symbol, listener: (...args: any[]) => void): this;
+
+    prependListener(event: 'error', listener: (err: Error) => void): this;
+    prependListener(event: 'exit', listener: (exitCode: number) => void): this;
+    prependListener(event: 'message', listener: (value: any) => void): this;
+    prependListener(event: 'online', listener: () => void): this;
+    prependListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    prependOnceListener(event: 'error', listener: (err: Error) => void): this;
+    prependOnceListener(
+      event: 'exit',
+      listener: (exitCode: number) => void
+    ): this;
+    prependOnceListener(event: 'message', listener: (value: any) => void): this;
+    prependOnceListener(event: 'online', listener: () => void): this;
+    prependOnceListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    removeListener(event: 'error', listener: (err: Error) => void): this;
+    removeListener(event: 'exit', listener: (exitCode: number) => void): this;
+    removeListener(event: 'message', listener: (value: any) => void): this;
+    removeListener(event: 'online', listener: () => void): this;
+    removeListener(
+      event: string | Symbol,
+      listener: (...args: any[]) => void
+    ): this;
+
+    off(event: 'error', listener: (err: Error) => void): this;
+    off(event: 'exit', listener: (exitCode: number) => void): this;
+    off(event: 'message', listener: (value: any) => void): this;
+    off(event: 'online', listener: () => void): this;
+    off(event: string | Symbol, listener: (...args: any[]) => void): this;
+  }
+}
+
+declare module 'node:worker_threads' {
+  declare module.exports: $Exports<'worker_threads'>;
+}
diff --git a/flow-typed/environments/serviceworkers.js b/flow-typed/environments/serviceworkers.js
new file mode 100644
index 00000000000..86479648e2e
--- /dev/null
+++ b/flow-typed/environments/serviceworkers.js
@@ -0,0 +1,248 @@
+// flow-typed signature: f6bda44505d6258bae702a65ee2878f2
+// flow-typed version: 840509ea9d/serviceworkers/flow_>=v0.261.x
+
+type FrameType = 'auxiliary' | 'top-level' | 'nested' | 'none';
+type VisibilityState = 'hidden' | 'visible' | 'prerender' | 'unloaded';
+
+declare class WindowClient extends Client {
+  visibilityState: VisibilityState;
+  focused: boolean;
+  focus(): Promise<WindowClient>;
+  navigate(url: string): Promise<WindowClient>;
+}
+
+declare class Client {
+  id: string;
+  reserved: boolean;
+  url: string;
+  frameType: FrameType;
+  postMessage(message: any, transfer?: Iterator<any> | Array<any>): void;
+}
+
+declare class ExtendableEvent extends Event {
+  waitUntil(f: Promise<mixed>): void;
+}
+
+type NotificationEvent$Init = {
+  ...Event$Init,
+  notification: Notification,
+  action?: string,
+  ...
+};
+
+declare class NotificationEvent extends ExtendableEvent {
+  constructor(type: string, eventInitDict?: NotificationEvent$Init): void;
+  +notification: Notification;
+  +action: string;
+}
+
+type ForeignFetchOptions = {
+  scopes: Iterator<string>,
+  origins: Iterator<string>,
+  ...
+};
+
+declare class InstallEvent extends ExtendableEvent {
+  registerForeignFetch(options: ForeignFetchOptions): void;
+}
+
+declare class FetchEvent extends ExtendableEvent {
+  request: Request;
+  clientId: string;
+  isReload: boolean;
+  respondWith(response: Response | Promise<Response>): void;
+  preloadResponse: Promise<?Response>;
+}
+
+type ClientType = 'window' | 'worker' | 'sharedworker' | 'all';
+type ClientQueryOptions = {
+  includeUncontrolled?: boolean,
+  includeReserved?: boolean,
+  type?: ClientType,
+  ...
+};
+
+declare class Clients {
+  get(id: string): Promise<?Client>;
+  matchAll(options?: ClientQueryOptions): Promise<Array<Client>>;
+  openWindow(url: string): Promise<?WindowClient>;
+  claim(): Promise<void>;
+}
+
+type ServiceWorkerState =
+  | 'installing'
+  | 'installed'
+  | 'activating'
+  | 'activated'
+  | 'redundant';
+
+declare class ServiceWorker extends EventTarget {
+  scriptURL: string;
+  state: ServiceWorkerState;
+
+  postMessage(message: any, transfer?: Iterator<any>): void;
+
+  onstatechange?: EventHandler;
+}
+
+declare class NavigationPreloadState {
+  enabled: boolean;
+  headerValue: string;
+}
+
+declare class NavigationPreloadManager {
+  enable: Promise<void>;
+  disable: Promise<void>;
+  setHeaderValue(value: string): Promise<void>;
+  getState: Promise<NavigationPreloadState>;
+}
+
+type PushSubscriptionOptions = {
+  userVisibleOnly?: boolean,
+  applicationServerKey?: string | ArrayBuffer | $ArrayBufferView,
+  ...
+};
+
+declare class PushSubscriptionJSON {
+  endpoint: string;
+  expirationTime: number | null;
+  keys: {[string]: string, ...};
+}
+
+declare class PushSubscription {
+  +endpoint: string;
+  +expirationTime: number | null;
+  +options: PushSubscriptionOptions;
+  getKey(name: string): ArrayBuffer | null;
+  toJSON(): PushSubscriptionJSON;
+  unsubscribe(): Promise<boolean>;
+}
+
+declare class PushManager {
+  +supportedContentEncodings: Array<string>;
+  subscribe(options?: PushSubscriptionOptions): Promise<PushSubscription>;
+  getSubscription(): Promise<PushSubscription | null>;
+  permissionState(
+    options?: PushSubscriptionOptions
+  ): Promise<'granted' | 'denied' | 'prompt'>;
+}
+
+type ServiceWorkerUpdateViaCache = 'imports' | 'all' | 'none';
+
+type GetNotificationOptions = {
+  tag?: string,
+  ...
+};
+
+declare class ServiceWorkerRegistration extends EventTarget {
+  +installing: ?ServiceWorker;
+  +waiting: ?ServiceWorker;
+  +active: ?ServiceWorker;
+  +navigationPreload: NavigationPreloadManager;
+  +scope: string;
+  +updateViaCache: ServiceWorkerUpdateViaCache;
+  +pushManager: PushManager;
+
+  getNotifications?: (
+    filter?: GetNotificationOptions
+  ) => Promise<$ReadOnlyArray<Notification>>;
+  showNotification?: (
+    title: string,
+    options?: NotificationOptions
+  ) => Promise<void>;
+  update(): Promise<void>;
+  unregister(): Promise<boolean>;
+
+  onupdatefound?: EventHandler;
+}
+
+type WorkerType = 'classic' | 'module';
+
+type RegistrationOptions = {
+  scope?: string,
+  type?: WorkerType,
+  updateViaCache?: ServiceWorkerUpdateViaCache,
+  ...
+};
+
+declare class ServiceWorkerContainer extends EventTarget {
+  +controller: ?ServiceWorker;
+  +ready: Promise<ServiceWorkerRegistration>;
+
+  getRegistration(
+    clientURL?: string
+  ): Promise<ServiceWorkerRegistration | void>;
+  getRegistrations(): Promise<Iterator<ServiceWorkerRegistration>>;
+  register(
+    scriptURL: string | TrustedScriptURL,
+    options?: RegistrationOptions
+  ): Promise<ServiceWorkerRegistration>;
+  startMessages(): void;
+
+  oncontrollerchange?: EventHandler;
+  onmessage?: EventHandler;
+  onmessageerror?: EventHandler;
+}
+
+/**
+ * This feature has been removed from the Web standards.
+ */
+declare class ServiceWorkerMessageEvent extends Event {
+  data: any;
+  lastEventId: string;
+  origin: string;
+  ports: Array<MessagePort>;
+  source: ?(ServiceWorker | MessagePort);
+}
+
+declare class ExtendableMessageEvent extends ExtendableEvent {
+  data: any;
+  lastEventId: string;
+  origin: string;
+  ports: Array<MessagePort>;
+  source: ?(ServiceWorker | MessagePort);
+}
+
+type CacheQueryOptions = {
+  ignoreSearch?: boolean,
+  ignoreMethod?: boolean,
+  ignoreVary?: boolean,
+  cacheName?: string,
+  ...
+};
+
+declare class Cache {
+  match(request: RequestInfo, options?: CacheQueryOptions): Promise<Response>;
+  matchAll(
+    request: RequestInfo,
+    options?: CacheQueryOptions
+  ): Promise<Array<Response>>;
+  add(request: RequestInfo): Promise<void>;
+  addAll(requests: Array<RequestInfo>): Promise<void>;
+  put(request: RequestInfo, response: Response): Promise<void>;
+  delete(request: RequestInfo, options?: CacheQueryOptions): Promise<boolean>;
+  keys(
+    request?: RequestInfo,
+    options?: CacheQueryOptions
+  ): Promise<Array<Request>>;
+}
+
+declare class CacheStorage {
+  match(request: RequestInfo, options?: CacheQueryOptions): Promise<Response>;
+  has(cacheName: string): Promise<true>;
+  open(cacheName: string): Promise<Cache>;
+  delete(cacheName: string): Promise<boolean>;
+  keys(): Promise<Array<string>>;
+}
+
+// Service worker global scope
+// https://www.w3.org/TR/service-workers/#service-worker-global-scope
+declare var clients: Clients;
+declare var caches: CacheStorage;
+declare var registration: ServiceWorkerRegistration;
+declare function skipWaiting(): Promise<void>;
+declare var onactivate: ?EventHandler;
+declare var oninstall: ?EventHandler;
+declare var onfetch: ?EventHandler;
+declare var onforeignfetch: ?EventHandler;
+declare var onmessage: ?EventHandler;
diff --git a/flow-typed/environments/streams.js b/flow-typed/environments/streams.js
new file mode 100644
index 00000000000..17bfae29e61
--- /dev/null
+++ b/flow-typed/environments/streams.js
@@ -0,0 +1,136 @@
+// flow-typed signature: e6e6768618776352dd676f63502aea4d
+// flow-typed version: 40e7dfcbd5/streams/flow_>=v0.261.x
+
+type TextEncodeOptions = {options?: boolean, ...};
+
+declare class ReadableStreamController {
+  constructor(
+    stream: ReadableStream,
+    underlyingSource: UnderlyingSource,
+    size: number,
+    highWaterMark: number
+  ): void;
+
+  desiredSize: number;
+
+  close(): void;
+  enqueue(chunk: any): void;
+  error(error: Error): void;
+}
+
+declare class ReadableStreamBYOBRequest {
+  constructor(controller: ReadableStreamController, view: $TypedArray): void;
+
+  view: $TypedArray;
+
+  respond(bytesWritten: number): ?any;
+  respondWithNewView(view: $TypedArray): ?any;
+}
+
+declare class ReadableByteStreamController extends ReadableStreamController {
+  constructor(
+    stream: ReadableStream,
+    underlyingSource: UnderlyingSource,
+    highWaterMark: number
+  ): void;
+
+  byobRequest: ReadableStreamBYOBRequest;
+}
+
+declare class ReadableStreamReader {
+  constructor(stream: ReadableStream): void;
+
+  closed: boolean;
+
+  cancel(reason: string): void;
+  read(): Promise<{
+    value: ?any,
+    done: boolean,
+    ...
+  }>;
+  releaseLock(): void;
+}
+
+declare interface UnderlyingSource {
+  autoAllocateChunkSize?: number;
+  type?: string;
+
+  start?: (controller: ReadableStreamController) => ?Promise<void>;
+  pull?: (controller: ReadableStreamController) => ?Promise<void>;
+  cancel?: (reason: string) => ?Promise<void>;
+}
+
+declare class TransformStream {
+  readable: ReadableStream;
+  writable: WritableStream;
+}
+
+interface PipeThroughTransformStream {
+  readable: ReadableStream;
+  writable: WritableStream;
+}
+
+type PipeToOptions = {
+  preventClose?: boolean,
+  preventAbort?: boolean,
+  preventCancel?: boolean,
+  ...
+};
+
+type QueuingStrategy = {
+  highWaterMark: number,
+  size(chunk: ?any): number,
+  ...
+};
+
+declare class ReadableStream {
+  constructor(
+    underlyingSource: ?UnderlyingSource,
+    queuingStrategy: ?QueuingStrategy
+  ): void;
+
+  locked: boolean;
+
+  cancel(reason: string): void;
+  getReader(): ReadableStreamReader;
+  pipeThrough(transform: PipeThroughTransformStream, options: ?any): void;
+  pipeTo(dest: WritableStream, options: ?PipeToOptions): Promise<void>;
+  tee(): [ReadableStream, ReadableStream];
+}
+
+declare interface WritableStreamController {
+  error(error: Error): void;
+}
+
+declare interface UnderlyingSink {
+  autoAllocateChunkSize?: number;
+  type?: string;
+
+  abort?: (reason: string) => ?Promise<void>;
+  close?: (controller: WritableStreamController) => ?Promise<void>;
+  start?: (controller: WritableStreamController) => ?Promise<void>;
+  write?: (chunk: any, controller: WritableStreamController) => ?Promise<void>;
+}
+
+declare interface WritableStreamWriter {
+  closed: Promise<any>;
+  desiredSize?: number;
+  ready: Promise<any>;
+
+  abort(reason: string): ?Promise<any>;
+  close(): Promise<any>;
+  releaseLock(): void;
+  write(chunk: any): Promise<any>;
+}
+
+declare class WritableStream {
+  constructor(
+    underlyingSink: ?UnderlyingSink,
+    queuingStrategy: QueuingStrategy
+  ): void;
+
+  locked: boolean;
+
+  abort(reason: string): void;
+  getWriter(): WritableStreamWriter;
+}
diff --git a/flow-typed/environments/web-animations.js b/flow-typed/environments/web-animations.js
new file mode 100644
index 00000000000..ac059631f7c
--- /dev/null
+++ b/flow-typed/environments/web-animations.js
@@ -0,0 +1,193 @@
+// flow-typed signature: 4631a74b6a0e6a1b4de2ba8c7bb141d6
+// flow-typed version: 3e51657e95/web-animations/flow_>=v0.261.x
+
+// https://www.w3.org/TR/web-animations-1/
+
+type AnimationPlayState = 'idle' | 'running' | 'paused' | 'finished';
+
+type AnimationReplaceState = 'active' | 'removed' | 'persisted';
+
+type CompositeOperation = 'replace' | 'add' | 'accumulate';
+
+type CompositeOperationOrAuto = 'replace' | 'add' | 'accumulate' | 'auto';
+
+type FillMode = 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
+
+// This is actually web-animations-2
+type IterationCompositeOperation = 'replace' | 'accumulate';
+
+type PlaybackDirection =
+  | 'normal'
+  | 'reverse'
+  | 'alternate'
+  | 'alternate-reverse';
+
+type AnimationPlaybackEvent$Init = Event$Init & {
+  currentTime?: number | null,
+  timelineTime?: number | null,
+  ...
+};
+
+type BaseComputedKeyframe = {|
+  composite: CompositeOperationOrAuto,
+  computedOffset: number,
+  easing: string,
+  offset: number | null,
+|};
+
+type BaseKeyframe = {|
+  composite: CompositeOperationOrAuto,
+  easing: string,
+  offset: number | null,
+|};
+
+type BasePropertyIndexedKeyframe = {|
+  composite: CompositeOperationOrAuto | Array<CompositeOperationOrAuto>,
+  easing: string | Array<string>,
+  offset: number | null | Array<number | null>,
+|};
+
+type ComputedEffectTiming = {|
+  ...EffectTiming,
+  currentIteration: number | null,
+  progress: number | null,
+|};
+
+type ComputedKeyframe = {
+  composite: CompositeOperationOrAuto,
+  computedOffset: number,
+  easing: string,
+  offset: number | null,
+  [property: string]: string | number | null | void,
+  ...
+};
+
+type DocumentTimelineOptions = {|
+  originTime: number,
+|};
+
+type EffectTiming = {|
+  direction: PlaybackDirection,
+  easing: string,
+  fill: FillMode,
+  iterations: number,
+  iterationStart: number,
+|};
+
+type GetAnimationsOptions = {|
+  pseudoElement: string | null,
+  subtree: boolean,
+|};
+
+type KeyframeAnimationOptions = {|
+  ...KeyframeEffectOptions,
+  id: string,
+  timeline: AnimationTimeline | null,
+|};
+
+type KeyframeEffectOptions = {|
+  ...EffectTiming,
+  composite: CompositeOperation,
+  pseudoElement: string | null,
+|};
+
+type Keyframe = {
+  composite?: CompositeOperationOrAuto,
+  easing?: string,
+  offset?: number | null,
+  [property: string]: string | number | null | void,
+  ...
+};
+
+type OptionalEffectTiming = Partial<EffectTiming>;
+
+type PropertyIndexedKeyframes = {
+  composite?: CompositeOperationOrAuto | CompositeOperationOrAuto[],
+  easing?: string | string[],
+  offset?: number | (number | null)[],
+  [property: string]:
+    | string
+    | string[]
+    | number
+    | null
+    | (number | null)[]
+    | void,
+  ...
+};
+
+declare class Animation extends EventTarget {
+  constructor(
+    effect?: AnimationEffect | null,
+    timeline?: AnimationTimeline | null
+  ): void;
+
+  id: string;
+  effect: AnimationEffect | null;
+  timeline: AnimationTimeline | null;
+  startTime: number | null;
+  currentTime: number | null;
+  playbackRate: number;
+  +playState: AnimationPlayState;
+  +replaceState: AnimationReplaceState;
+  +pending: boolean;
+  +ready: Promise<Animation>;
+  +finished: Promise<Animation>;
+  onfinish: ?(ev: AnimationPlaybackEvent) => mixed;
+  oncancel: ?(ev: AnimationPlaybackEvent) => mixed;
+  onremove: ?(ev: AnimationPlaybackEvent) => mixed;
+  cancel(): void;
+  finish(): void;
+  play(): void;
+  pause(): void;
+  updatePlaybackRate(playbackRate: number): void;
+  reverse(): void;
+  persist(): void;
+  commitStyles(): void;
+}
+
+declare class AnimationEffect {
+  getTiming(): EffectTiming;
+  getComputedTiming(): ComputedEffectTiming;
+  updateTiming(timing?: OptionalEffectTiming): void;
+}
+
+declare class AnimationPlaybackEvent extends Event {
+  constructor(
+    type: string,
+    animationEventInitDict?: AnimationPlaybackEvent$Init
+  ): void;
+  +currentTime: number | null;
+  +timelineTime: number | null;
+}
+
+declare class AnimationTimeline {
+  +currentTime: number | null;
+}
+
+declare class DocumentTimeline extends AnimationTimeline {
+  constructor(options?: DocumentTimelineOptions): void;
+}
+
+declare class KeyframeEffect extends AnimationEffect {
+  constructor(
+    target: Element | null,
+    keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
+    options?: number | KeyframeEffectOptions
+  ): void;
+  constructor(source: KeyframeEffect): void;
+
+  target: Element | null;
+  composite: CompositeOperation;
+  // This is actually web-animations-2
+  iterationComposite: IterationCompositeOperation;
+  getKeyframes(): ComputedKeyframe[];
+  setKeyframes(keyframes: Keyframe[] | PropertyIndexedKeyframes | null): void;
+}
+
+declare class mixin$Animatable {
+  animate(
+    keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
+    options?: number | KeyframeAnimationOptions
+  ): Animation;
+  getAnimations(options?: GetAnimationsOptions): Array<Animation>;
+}
diff --git a/flow-typed/npm/error-stack-parser_v2.x.x.js b/flow-typed/npm/error-stack-parser_v2.x.x.js
new file mode 100644
index 00000000000..d23b837af25
--- /dev/null
+++ b/flow-typed/npm/error-stack-parser_v2.x.x.js
@@ -0,0 +1,60 @@
+// flow-typed signature: 132e48034ef4756600e1d98681a166b5
+// flow-typed version: c6154227d1/error-stack-parser_v2.x.x/flow_>=v0.104.x
+
+declare module 'error-stack-parser' {
+  declare interface StackFrame {
+    constructor(object: StackFrame): StackFrame;
+
+    isConstructor?: boolean;
+    getIsConstructor(): boolean;
+    setIsConstructor(): void;
+
+    isEval?: boolean;
+    getIsEval(): boolean;
+    setIsEval(): void;
+
+    isNative?: boolean;
+    getIsNative(): boolean;
+    setIsNative(): void;
+
+    isTopLevel?: boolean;
+    getIsTopLevel(): boolean;
+    setIsTopLevel(): void;
+
+    columnNumber?: number;
+    getColumnNumber(): number;
+    setColumnNumber(): void;
+
+    lineNumber?: number;
+    getLineNumber(): number;
+    setLineNumber(): void;
+
+    fileName?: string;
+    getFileName(): string;
+    setFileName(): void;
+
+    functionName?: string;
+    getFunctionName(): string;
+    setFunctionName(): void;
+
+    source?: string;
+    getSource(): string;
+    setSource(): void;
+
+    args?: any[];
+    getArgs(): any[];
+    setArgs(): void;
+
+    evalOrigin?: StackFrame;
+    getEvalOrigin(): StackFrame;
+    setEvalOrigin(): void;
+
+    toString(): string;
+  }
+
+  declare class ErrorStackParser {
+    parse(error: Error): Array<StackFrame>;
+  }
+
+  declare module.exports: ErrorStackParser;
+}
diff --git a/flow-typed/npm/minimist_v1.x.x.js b/flow-typed/npm/minimist_v1.x.x.js
new file mode 100644
index 00000000000..9da29ffe60c
--- /dev/null
+++ b/flow-typed/npm/minimist_v1.x.x.js
@@ -0,0 +1,27 @@
+// flow-typed signature: d48da8db828529253fc20b80747846ea
+// flow-typed version: c6154227d1/minimist_v1.x.x/flow_>=v0.104.x
+
+declare module 'minimist' {
+  declare type minimistOptions = {
+    string?: string | Array<string>,
+    boolean?: boolean | string | Array<string>,
+    alias?: {[arg: string]: string | Array<string>, ...},
+    default?: {[arg: string]: any, ...},
+    stopEarly?: boolean,
+    // TODO: Strings as keys don't work...
+    // '--'? boolean,
+    unknown?: (param: string) => boolean,
+    ...
+  };
+
+  declare type minimistOutput = {
+    [flag: string]: string | boolean,
+    _: Array<string>,
+    ...
+  };
+
+  declare module.exports: (
+    argv: Array<string>,
+    opts?: minimistOptions
+  ) => minimistOutput;
+}
diff --git a/gem-react-source/lib/react/source.rb b/gem-react-source/lib/react/source.rb
deleted file mode 100644
index 241a4831352..00000000000
--- a/gem-react-source/lib/react/source.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-module React
-  module Source
-    def self.bundled_path_for(build)
-      File.expand_path("../../../build/#{build}", __FILE__)
-    end
-  end
-end
diff --git a/gem-react-source/react-source.gemspec b/gem-react-source/react-source.gemspec
deleted file mode 100644
index 93fc022d8bf..00000000000
--- a/gem-react-source/react-source.gemspec
+++ /dev/null
@@ -1,28 +0,0 @@
-#encoding: utf-8
-
-require('json')
-
-# Because of build process, does not necessarily reflect directory path in the
-# repository.
-package = JSON.parse(File.read('../../package.json'))
-
-gemspec = Gem::Specification.new do |s|
-  s.name = 'react-source'
-  s.version = package['version']
-  s.license = 'Apache-2.0'
-
-  s.homepage = 'https://github.com/facebook/react'
-  s.summary = 'Ruby bridge to JSX & the React JavaScript library.'
-
-  s.authors = ['Paul O’Shannessy']
-  s.email = ['paul@oshannessy.com']
-
-  s.files = Dir[
-    'build/react.js',
-    'build/react.min.js',
-    'build/react-with-addons.js',
-    'build/react-with-addons.min.js',
-    'build/JSXTransformer.js',
-    'lib/react/source.rb'
-  ]
-end
diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js
deleted file mode 100644
index 61481e43534..00000000000
--- a/grunt/config/browserify.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* jshint multistr:true */
-/* jshint -W040 */
-
-'use strict';
-
-var envify = require('envify/custom');
-var es3ify = require('es3ify');
-var grunt = require('grunt');
-var UglifyJS = require('uglify-js');
-var uglifyify = require('uglifyify');
-var _ = require('lodash');
-
-var SIMPLE_TEMPLATE =
-'/**\n\
- * @PACKAGE@ v@VERSION@\n\
- */';
-
-var LICENSE_TEMPLATE =
-'/**\n\
- * @PACKAGE@ v@VERSION@\n\
- *\n\
- * Copyright 2013-2014 Facebook, Inc.\n\
- *\n\
- * Licensed under the Apache License, Version 2.0 (the "License");\n\
- * you may not use this file except in compliance with the License.\n\
- * You may obtain a copy of the License at\n\
- *\n\
- * http://www.apache.org/licenses/LICENSE-2.0\n\
- *\n\
- * Unless required by applicable law or agreed to in writing, software\n\
- * distributed under the License is distributed on an "AS IS" BASIS,\n\
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n\
- * See the License for the specific language governing permissions and\n\
- * limitations under the License.\n\
- */';
-
-function minify(src) {
-  return UglifyJS.minify(src, { fromString: true }).code;
-}
-
-// TODO: move this out to another build step maybe.
-function bannerify(src) {
-  var version = grunt.config.data.pkg.version;
-  var packageName = this.data.packageName || this.data.standalone;
-  return LICENSE_TEMPLATE.replace('@PACKAGE@', packageName)
-                         .replace('@VERSION@', version) +
-         '\n' + src;
-}
-
-function simpleBannerify(src) {
-  var version = grunt.config.data.pkg.version;
-  var packageName = this.data.packageName || this.data.standalone;
-  return SIMPLE_TEMPLATE.replace('@PACKAGE@', packageName)
-                        .replace('@VERSION@', version) +
-         '\n' + src;
-}
-
-// Our basic config which we'll add to to make our other builds
-var basic = {
-  entries: [
-    './build/modules/React.js'
-  ],
-  outfile: './build/react.js',
-  debug: false,
-  standalone: 'React',
-  transforms: [envify({NODE_ENV: 'development'})],
-  after: [es3ify.transform, simpleBannerify]
-};
-
-var min = _.merge({}, basic, {
-  outfile: './build/react.min.js',
-  debug: false,
-  transforms: [envify({NODE_ENV: 'production'}), uglifyify],
-  after: [minify, bannerify]
-});
-
-var transformer = {
-  entries:[
-    './vendor/browser-transforms.js'
-  ],
-  outfile: './build/JSXTransformer.js',
-  debug: false,
-  standalone: 'JSXTransformer',
-  after: [es3ify.transform, simpleBannerify]
-};
-
-var addons = {
-  entries: [
-    './build/modules/ReactWithAddons.js'
-  ],
-  outfile: './build/react-with-addons.js',
-  debug: false,
-  standalone: 'React',
-  transforms: [envify({NODE_ENV: 'development'})],
-  packageName: 'React (with addons)',
-  after: [es3ify.transform, simpleBannerify]
-};
-
-var addonsMin = _.merge({}, addons, {
-  outfile: './build/react-with-addons.min.js',
-  debug: false,
-  transforms: [envify({NODE_ENV: 'production'}), uglifyify],
-  after: [minify, bannerify]
-});
-
-var withCodeCoverageLogging = {
-  entries: [
-    './build/modules/React.js'
-  ],
-  outfile: './build/react.js',
-  debug: true,
-  standalone: 'React',
-  transforms: [
-    envify({NODE_ENV: 'development'}),
-    require('coverify')
-  ]
-};
-
-module.exports = {
-  basic: basic,
-  min: min,
-  transformer: transformer,
-  addons: addons,
-  addonsMin: addonsMin,
-  withCodeCoverageLogging: withCodeCoverageLogging
-};
diff --git a/grunt/config/compare_size.js b/grunt/config/compare_size.js
deleted file mode 100644
index fb59d94cdbc..00000000000
--- a/grunt/config/compare_size.js
+++ /dev/null
@@ -1,17 +0,0 @@
-'use strict';
-
-var gzip = require('gzip-js');
-
-module.exports = {
-  files: [
-    'build/*.js'
-  ],
-  options: {
-    compress: {
-      gz: function(contents) {
-        return gzip.zip(contents, {}).length;
-      }
-    },
-    cache: ".grunt/sizecache.json"
-  }
-};
diff --git a/grunt/config/compress.js b/grunt/config/compress.js
deleted file mode 100644
index 52ebd53f864..00000000000
--- a/grunt/config/compress.js
+++ /dev/null
@@ -1,16 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-
-var version = grunt.config.data.pkg.version;
-
-module.exports = {
-  starter: {
-    options: {
-      archive: './build/react-' + version + '.zip'
-    },
-    files: [
-      {cwd: './build/starter', src: ['**'], dest: 'react-' + version + '/'}
-    ]
-  }
-};
diff --git a/grunt/config/copy.js b/grunt/config/copy.js
deleted file mode 100644
index 94d2bcabf28..00000000000
--- a/grunt/config/copy.js
+++ /dev/null
@@ -1,16 +0,0 @@
-'use strict';
-
-module.exports = {
-
-  react_docs: {
-    files: [
-      {
-        src: ['react.js', 'JSXTransformer.js'],
-        dest: 'docs/js/',
-        cwd: 'build/',
-        expand: true
-      }
-    ]
-  }
-
-};
diff --git a/grunt/config/jshint.js b/grunt/config/jshint.js
deleted file mode 100644
index 4277a594186..00000000000
--- a/grunt/config/jshint.js
+++ /dev/null
@@ -1,27 +0,0 @@
-'use strict';
-
-module.exports = {
-  src: {
-    options: {
-      jshintrc: './src/.jshintrc'
-    },
-    files: {
-      // We don't care about src/vendor (we shouldn't be touching this), and
-      // tests often use JSX, which JSHint can't handle.
-      src: [
-        './src/**/*.js',
-        '!./src/vendor/**',
-        '!./src/**/__tests__/**',
-        '!./src/test/**'
-      ]
-    }
-  },
-  project: {
-    options: {
-      jshintrc: './.jshintrc'
-    },
-    files: {
-      src: ['./Gruntfile.js', './grunt/**/*.js', './bin/*.js', './vendor/*.js']
-    }
-  }
-};
diff --git a/grunt/config/jsx.js b/grunt/config/jsx.js
deleted file mode 100644
index acafefb4af4..00000000000
--- a/grunt/config/jsx.js
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-var _ = require('lodash');
-
-var rootIDs = [
-  "React",
-  "ReactWithAddons"
-];
-
-
-var normal = {
-  rootIDs: rootIDs,
-  getConfig: function() {
-    return {
-      commonerConfig: grunt.config.data.pkg.commonerConfig,
-      constants: {}
-    };
-  },
-  sourceDir: "src",
-  outputDir: "build/modules"
-};
-
-
-var test = {
-  rootIDs: rootIDs.concat([
-    "test/all.js",
-    "**/__tests__/*.js"
-  ]),
-  getConfig: function() {
-    return _.merge({}, normal.getConfig(), {
-      mocking: true
-    });
-  },
-  sourceDir: "src",
-  outputDir: "build/modules"
-};
-
-
-module.exports = {
-  normal: normal,
-  test: test
-};
diff --git a/grunt/config/npm.js b/grunt/config/npm.js
deleted file mode 100644
index 5586aee7867..00000000000
--- a/grunt/config/npm.js
+++ /dev/null
@@ -1 +0,0 @@
-exports.pack = {};
diff --git a/grunt/config/populist.js b/grunt/config/populist.js
deleted file mode 100644
index b156260353c..00000000000
--- a/grunt/config/populist.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-module.exports = function(grunt) {
-  var jasmine = {
-    rootDirectory: "build/jasmine",
-    // This syntax means to require and expose the "jasmine" module
-    // (build/jasmine/jasmine.js) as global.jasmine, and to require the
-    // "all" module (build/jasmine/all.js) but not expose it globally.
-    args: ["jasmine:jasmine", "all:"],
-    outfile: "./build/jasmine.js"
-  };
-
-  var filterExpr = grunt.option('filter');
-
-  if (filterExpr) {
-    filterExpr = '**/__tests__/' + filterExpr + '-test.js';
-  } else {
-    filterExpr = '**/__tests__/*-test.js';
-  }
-
-  var test = {
-    rootDirectory: "build/modules",
-    args: ["test/all:harness"],
-    requires: [filterExpr],
-    outfile: './build/react-test.js'
-  };
-
-  return {
-    jasmine: jasmine,
-    test: test
-  };
-};
diff --git a/grunt/config/server.js b/grunt/config/server.js
deleted file mode 100644
index 241ac109e60..00000000000
--- a/grunt/config/server.js
+++ /dev/null
@@ -1,105 +0,0 @@
-'use strict';
-
-module.exports = function(grunt){
-  var coverageWriteStream;
-
-  grunt.task.registerTask('finalize-coverage-stream', function(){
-    if (!coverageWriteStream) {
-      return;
-    }
-    var done = this.async();
-    coverageWriteStream.once('close', done);
-    coverageWriteStream.end();
-    coverageWriteStream = null;
-  });
-
-  function consoleLoggerMiddleware(req, res, next) {
-    if (!(req.method == 'POST' && req._parsedUrl.pathname.replace(/\//g,'') == 'console' && Array.isArray(req.body))) {
-      return next();
-    }
-    res.write('<!doctype html><meta charset=utf-8>');
-    res.end('Got it, thanks!');
-
-    req.body.forEach(function(log){
-      if (log.message.indexOf('not ok ') === 0) {
-        log.type = 'error';
-      } else if (log.message.indexOf('ok ') === 0) {
-        log.type = 'ok';
-      } else if (log.message.indexOf('COVER') === 0) {
-        log.type = 'coverage';
-      } else if (log.message.indexOf('DONE\t') === 0) {
-        log.type = 'coverage done';
-      }
-
-      if (log.type == 'error') {
-        grunt.log.error(log.message);
-      } else if (log.type == 'ok') {
-        grunt.log.ok(log.message);
-      } else if (log.type == 'log') {
-        grunt.log.writeln(log.message);
-      } else if (log.type == 'coverage') {
-        if (!coverageWriteStream) {
-          coverageWriteStream = require('fs').createWriteStream(__dirname + '/../../coverage.log');
-        }
-        coverageWriteStream.write(log.message + '\n');
-      } else if (log.type == 'coverage done') {
-        grunt.task.run('finalize-coverage-stream');
-      } else if (log.type == 'perf') {
-        grunt.event.emit('perf results', log.message);
-      } else {
-        grunt.verbose.writeln(log);
-      }
-    });
-  }
-
-  function testResultLoggerMiddleware(req, res, next) {
-    if (!(req.method == 'POST' && req._parsedUrl.pathname.indexOf('/reportTestResults') === 0)) {
-      return next();
-    }
-    res.write('<!doctype html><meta charset=utf-8>');
-    res.end('Got it, thanks!');
-
-    var logType = 'writeln';
-    var message = req.body;
-
-    if (req.body.type && req.body.message){
-      if (req.body.type == 'error') {
-        logType = 'error';
-      } else if (req.body.message.indexOf('ok') === 0) {
-        logType = 'ok';
-      } else if (req.body.message.indexOf('not ok') === 0) {
-        logType = 'error';
-      }
-      message = req.body.message;
-    }
-    if (typeof message != 'string') {
-      message = JSON.stringify(message, null, 2);
-    }
-    grunt.log[logType]('[%s][%s]', req.headers['user-agent'], Date.now(), message);
-  }
-
-  return {
-    server: {
-      options: {
-        base: '.',
-        hostname: '*',
-        port: 9999,
-        middleware: function(connect, options) {
-
-          connect.logger.token('user-agent', function(req, res) { return req.headers['user-agent']; });
-          connect.logger.token('timestamp', function(req, res) { return Date.now(); });
-
-          return [
-            connect.json(),
-            consoleLoggerMiddleware,
-            testResultLoggerMiddleware,
-
-            connect.logger({format:'[:user-agent][:timestamp] :method :url', stream:grunt.verbose}),
-            connect.static(options.base),
-            connect.directory(options.base)
-          ];
-        }
-      }
-    }
-  };
-};
diff --git a/grunt/config/webdriver-all.js b/grunt/config/webdriver-all.js
deleted file mode 100644
index 084ec578702..00000000000
--- a/grunt/config/webdriver-all.js
+++ /dev/null
@@ -1,113 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-
-module.exports = function(props){
-  if (typeof props.url != 'string') {
-    throw TypeError('expected url string');
-  }
-  if ('isDoneTimeout' in props && typeof props.isDoneTimeout != 'number') {
-    throw TypeError('expected isDoneTimeout to be a number');
-  }
-  if ('onStart' in props && typeof props.onStart != 'function') {
-    throw TypeError('expected onStart to be a function');
-  }
-  if ('onComplete' in props && typeof props.onComplete != 'function') {
-    throw TypeError('expected onComplete to be a function');
-  }
-  if ('onError' in props && typeof props.onError != 'function') {
-    throw TypeError('expected onError to be a function');
-  }
-
-  var exports = {};
-
-  exports.local = {
-    webdriver: {
-      remote: { protocol: 'http:', hostname: '127.0.0.1', port: 9515, path: '/' }
-    },
-    url: props.url,
-    onStart: props.onStart,
-    onComplete: props.onComplete,
-    onError: props.onError,
-    isDoneTimeout: props.isDoneTimeout
-  };
-
-  if (grunt.option('debug')) {
-    exports.local.url += (exports.local.url.indexOf('?') == -1 ? '?' : '&') + 'debug=' + grunt.option('debug');
-  }
-
-  exports.saucelabs = {
-    webdriver: {
-      remote: {
-        /* https://github.com/admc/wd/blob/master/README.md#named-parameters */
-        user: process.env.SAUCE_USERNAME || 'React',
-        pwd: process.env.SAUCE_ACCESS_KEY || '339d32ca-d594-4570-a3c2-94c50a91919b',
-        protocol: 'http:',
-        hostname: 'ondemand.saucelabs.com',
-        port: '80',
-        path: '/wd/hub'
-      }
-    },
-    desiredCapabilities: {
-      "build": process.env.TRAVIS_BUILD_NUMBER || 'dev' + Date.now(),
-      "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER || 'my awesome tunnel',
-      "browserName": "chrome"
-    },
-    url: exports.local.url,
-    onStart: function(browser){
-      grunt.log.writeln("Starting WebDriver Test. Watch results here: http://saucelabs.com/tests/" + browser.sessionID);
-      if (props.onStart) {
-        return props.onStart(browser);
-      }
-    },
-    onComplete: exports.local.onComplete,
-    onError: exports.local.onError,
-    isDoneTimeout: exports.local.isDoneTimeout
-  };
-
-  /* https://saucelabs.com/platforms */
-  exports.saucelabs_ios =
-  exports.saucelabs_ios7 = sauceItUp({ browserName: 'iphone', version: '7', platform:'OS X 10.9' });
-  exports.saucelabs_ios6_1 = sauceItUp({ browserName: 'iphone', version: '6.1', platform:'OS X 10.8' });
-  exports.saucelabs_ios6 = sauceItUp({ browserName: 'iphone', version: '6', platform:'OS X 10.8' });
-  exports.saucelabs_ios5_1 = sauceItUp({ browserName: 'iphone', version: '5.1', platform:'OS X 10.8' });
-  exports.saucelabs_ios5 = sauceItUp({ browserName: 'iphone', version: '5', platform:'OS X 10.6' });
-  exports.saucelabs_ios4 = sauceItUp({ browserName: 'iphone', version: '4', platform:'OS X 10.6' });
-
-  exports.saucelabs_ipad =
-  exports.saucelabs_ipad7 = sauceItUp({ browserName: 'ipad', version: '7', platform:'OS X 10.9' });
-  exports.saucelabs_ipad6_1 = sauceItUp({ browserName: 'ipad', version: '6.1', platform:'OS X 10.8' });
-  exports.saucelabs_ipad6 = sauceItUp({ browserName: 'ipad', version: '6', platform:'OS X 10.8' });
-  exports.saucelabs_ipad5_1 = sauceItUp({ browserName: 'ipad', version: '5.1', platform:'OS X 10.8' });
-  exports.saucelabs_ipad5 = sauceItUp({ browserName: 'ipad', version: '5', platform:'OS X 10.6' });
-  exports.saucelabs_ipad4 = sauceItUp({ browserName: 'ipad', version: '4', platform:'OS X 10.6' });
-
-  exports.saucelabs_android = sauceItUp({ browserName: 'android', version: '4.0', platform:'Linux' });
-  exports.saucelabs_android_tablet = sauceItUp({ browserName: 'android', version: '4.0', platform:'Linux', 'device-type':'tablet' });
-
-  exports.saucelabs_safari = sauceItUp({ browserName: 'safari' });
-  exports.saucelabs_chrome = sauceItUp({ browserName: 'chrome' });
-  exports.saucelabs_firefox = sauceItUp({ browserName: 'firefox' });
-
-  exports.saucelabs_ie =
-  exports.saucelabs_ie8 = sauceItUp({ browserName: 'internet explorer', version: 8 });
-  exports.saucelabs_ie9 = sauceItUp({ browserName: 'internet explorer', version: 9 });
-  exports.saucelabs_ie10 = sauceItUp({ browserName: 'internet explorer', version: 10 });
-  exports.saucelabs_ie11 = sauceItUp({ browserName: 'internet explorer', version: 11, platform:'Windows 8.1' });
-
-  function sauceItUp(desiredCapabilities) {
-    desiredCapabilities["build"] = exports.saucelabs.desiredCapabilities["build"];
-    desiredCapabilities["tunnel-identifier"] = exports.saucelabs.desiredCapabilities["tunnel-identifier"];
-    return {
-      webdriver: exports.saucelabs.webdriver,
-      url: exports.saucelabs.url,
-      onStart: exports.saucelabs.onStart,
-      onComplete: exports.saucelabs.onComplete,
-      onError: exports.saucelabs.onError,
-      isDoneTimeout: exports.saucelabs.isDoneTimeout,
-      desiredCapabilities: desiredCapabilities,
-    };
-  }
-
-  return exports;
-};
diff --git a/grunt/config/webdriver-jasmine.js b/grunt/config/webdriver-jasmine.js
deleted file mode 100644
index 3990c6271a6..00000000000
--- a/grunt/config/webdriver-jasmine.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-
-module.exports = require('./webdriver-all')({
-  url: "http://127.0.0.1:9999/test/index.html",
-  onComplete: function(passed){
-    if (!passed){
-      grunt.fatal("tests failed");
-    }
-  },
-  onError: function(error){
-    grunt.fatal(error);
-  }
-});
diff --git a/grunt/config/webdriver-perf.js b/grunt/config/webdriver-perf.js
deleted file mode 100644
index df8d61d4d9a..00000000000
--- a/grunt/config/webdriver-perf.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-
-var tests = grunt.file.expand(__dirname + '/../../perf/tests/*');
-
-var maxTime = 5;
-
-var reactVersions = [
-  'edge',
-  'previous'
-];
-
-var params = []
-  .concat('headless=false')
-  .concat('maxTime=' + maxTime)
-  .concat(tests
-    .map(function(path){ return path.split(/tests./i).reverse()[0]; })
-    .map(encodeURIComponent)
-    .map(function(filename){ return 'test=' + filename; })
-  )
-  .concat(reactVersions
-    .map(encodeURIComponent)
-    .map(function(version){ return 'react=' + version; }
-  )
-);
-
-module.exports = require('./webdriver-all')({
-
-  url: "http://127.0.0.1:9999/perf/index.html?" + params.join('&'),
-
-  isDoneTimeout: 15 * 60 * 1000,
-
-  onStart: function(){
-    grunt.event.on('perf results', function(results){
-      console.log(results);
-    });
-  },
-
-  onComplete: function(completedTestKeys){
-    grunt.verbose.writeln('onComplete ' + JSON.stringify(completedTestKeys));
-  },
-
-  onError: function(error){
-    grunt.fatal(error);
-  }
-
-});
diff --git a/grunt/tasks/browserify.js b/grunt/tasks/browserify.js
deleted file mode 100644
index e36c545e17b..00000000000
--- a/grunt/tasks/browserify.js
+++ /dev/null
@@ -1,68 +0,0 @@
-'use strict';
-
-var browserify = require('browserify');
-var grunt = require('grunt');
-
-module.exports = function() {
-  var config = this.data;
-
-  // This task is async...
-  var done = this.async();
-
-  // More/better assertions
-  // grunt.config.requires('outfile');
-  // grunt.config.requires('entries');
-  config.transforms = config.transforms || [];
-  config.after = config.after || [];
-  if (typeof config.after === 'function') {
-    config.after = [config.after];
-  }
-
-  // create the bundle we'll work with
-  var entries = grunt.file.expand(config.entries);
-  var bundle = browserify(entries);
-
-  // Make sure the things that need to be exposed are.
-  var requires = config.requires || {};
-  if (requires instanceof Array) {
-    grunt.file.expand({
-      nonull: true, // Keep IDs that don't expand to anything.
-      cwd: "src"
-    }, requires).forEach(function(name) {
-      bundle.require("./build/modules/" + name, {
-        expose: name.replace(/\.js$/i, "")
-      });
-    });
-  } else if (typeof requires === "object") {
-    Object.keys(requires).forEach(function(name) {
-      bundle.require(requires[name], { expose: name });
-    });
-  }
-
-  // Extract other options
-  var options = {
-    debug: config.debug, // sourcemaps
-    standalone: config.standalone // global
-  };
-
-  // TODO: make sure this works, test with this too
-  config.transforms.forEach(function(transform) {
-    bundle.transform({}, transform);
-  });
-
-  // Actually bundle it up
-  var _this = this;
-  bundle.bundle(options, function(err, src) {
-    if (err) {
-      grunt.log.error(err);
-      done();
-    }
-
-    config.after.forEach(function(fn) {
-      src = fn.call(_this, src);
-    });
-
-    grunt.file.write(config.outfile, src);
-    done();
-  });
-};
diff --git a/grunt/tasks/coverage-parse.js b/grunt/tasks/coverage-parse.js
deleted file mode 100644
index 223bed34bc5..00000000000
--- a/grunt/tasks/coverage-parse.js
+++ /dev/null
@@ -1,53 +0,0 @@
-"use strict";
-var grunt = require('grunt');
-
-module.exports = function(){
-  var ROOT = require('path').normalize(__dirname + '/../..');
-  var done = this.async();
-  var uncoveredExpressionCount = 0;
-  var uncoveredLineCount = 0;
-
-  require('fs').createReadStream(ROOT + '/coverage.log')
-  .pipe(require('coverify/parse')(function(error, results){
-    if (error) {
-      grunt.fatal(error);
-    }
-
-    Object.keys(results)
-      .sort(function(a, b){
-        return results[a].length - results[b].length;
-      })
-      .reverse()
-      .forEach(function(path){
-        if (results[path].length === 0) {
-          return;
-        }
-        var relativePath = path.replace(ROOT, '');
-        uncoveredExpressionCount += results[path].length;
-        grunt.log.error(results[path].length + ' expressions not covered ' + relativePath);
-
-        results[path].forEach(function(c){
-          uncoveredLineCount += c.code.split('\n').length;
-          console.log('txmt://open?url=' + encodeURIComponent('file://' + path) + '&line=' + (c.lineNum+1) + '&column=' + (c.column[0]+2));
-        });
-        console.log('');
-      })
-    ;
-
-    Object.keys(results).sort().forEach(function(path){
-      if (results[path].length > 0) {
-        return;
-      }
-      var relativePath = path.replace(ROOT, '');
-      grunt.log.ok('100% coverage ' + relativePath);
-    });
-    
-    if (uncoveredExpressionCount > 0) {
-      grunt.log.error(uncoveredExpressionCount + ' expressions not covered');
-    }
-    if (uncoveredLineCount > 0) {
-      grunt.log.error(uncoveredLineCount + ' lines not covered');
-    }
-    done();
-  }));
-};
diff --git a/grunt/tasks/download-previous-version.js b/grunt/tasks/download-previous-version.js
deleted file mode 100644
index fbb2c22d7de..00000000000
--- a/grunt/tasks/download-previous-version.js
+++ /dev/null
@@ -1,47 +0,0 @@
-"use strict";
-
-var grunt = require('grunt');
-var http = require('http');
-var fs = require('fs');
-
-module.exports = function() {
-  var completedSuccessfully = this.async();
-  get(
-    "http://react.zpao.com/builds/master/latest/react.min.js",
-    __dirname + '/../../build/react-previous.min.js',
-    function(success){
-      if (!success) {
-        return completedSuccessfully(success);
-      }
-      get(
-        "http://react.zpao.com/builds/master/latest/JSXTransformer.js",
-        __dirname + '/../../build/JSXTransformer-previous.js',
-        completedSuccessfully
-      );
-    }
-  );
-
-  function get(url, targetFilePath, completedSuccessfully) {
-    grunt.verbose.writeln('getting url "' + url + '"');
-    http.get(url, function(response) {
-      grunt.verbose.writeln('Received status code ' + response.statusCode + ' for "' + url + '"');
-
-      if (response.statusCode != 200) {
-        if (response.headers.location) {
-          get(response.headers.location, targetFilePath);
-          return;
-        } else {
-          grunt.fatal('Nothing else to do.');
-          completedSuccessfully(false);
-          return;
-        }
-      }
-      grunt.verbose.writeln('Writing url to "' + targetFilePath + '"');
-      response.pipe(fs.createWriteStream(targetFilePath))
-        .on('close', function() {
-          completedSuccessfully(true);
-        })
-      ;
-    });
-  }
-};
diff --git a/grunt/tasks/gem-react-source.js b/grunt/tasks/gem-react-source.js
deleted file mode 100644
index a42d5c6c546..00000000000
--- a/grunt/tasks/gem-react-source.js
+++ /dev/null
@@ -1,61 +0,0 @@
-'use strict';
-
-var fs = require('fs');
-var grunt = require('grunt');
-
-var src = 'gem-react-source/';
-var dest = 'build/gem-react-source/';
-var build = dest + 'build/';
-var buildFiles = [
-  'react.js', 'react.min.js', 'JSXTransformer.js',
-  'react-with-addons.js', 'react-with-addons.min.js'
-];
-
-function buildRelease() {
-  grunt.file.exists(dest) && grunt.file.delete(dest);
-
-  // Copy gem-react-source/**/* to build/gem-react-source
-  var mappings = [].concat(
-    grunt.file.expandMapping('**/*', dest, {cwd: src})
-  );
-  mappings.forEach(function(mapping) {
-    var src = mapping.src[0];
-    var dest = mapping.dest;
-    if (grunt.file.isDir(src)) {
-      grunt.file.mkdir(dest);
-    } else {
-      grunt.file.copy(src, dest);
-    }
-  });
-
-  // Make built source available inside npm package
-  grunt.file.mkdir(build);
-  buildFiles.forEach(function(file) {
-    grunt.file.copy('build/' + file, build + file);
-  });
-}
-
-function packRelease() {
-  /*jshint validthis:true */
-  var done = this.async();
-  var spawnCmd = {
-    cmd: 'gem',
-    args: ['build', 'react-source.gemspec'],
-    opts: {
-      cwd: dest
-    }
-  };
-  grunt.util.spawn(spawnCmd, function(err, result) {
-    // Gem packing does weird things to versions so 0.12.0-alpha becomes
-    // 0.12.0.pre.alpha. We need to get the filename printed to stdout.
-    var filename = result.stdout.match(/File: (.*)$/)[1];
-    var src = 'build/gem-react-source/' + filename;
-    var dest = 'build/react-source.tgz';
-    fs.rename(src, dest, done);
-  });
-}
-
-module.exports = {
-  buildRelease: buildRelease,
-  packRelease: packRelease
-};
diff --git a/grunt/tasks/jsx.js b/grunt/tasks/jsx.js
deleted file mode 100644
index 3bbd3bc49d0..00000000000
--- a/grunt/tasks/jsx.js
+++ /dev/null
@@ -1,47 +0,0 @@
-'use strict';
-
-var path = require("path");
-var grunt = require("grunt");
-var expand = grunt.file.expand;
-var spawn = grunt.util.spawn;
-
-module.exports = function() {
-  var done = this.async();
-  var config = this.data;
-
-  var args = [
-    "--cache-dir", ".module-cache",
-    "--relativize",
-    "--follow-requires",
-    config.sourceDir,
-    config.outputDir
-  ];
-
-  var rootIDs = expand({
-    nonull: true, // Keep IDs that don't expand to anything.
-    cwd: "src"
-  }, config.rootIDs).map(function(id) {
-    return id.replace(/\.js$/i, "");
-  });
-
-  args.push.apply(args, rootIDs);
-  args.push("--config" /* from stdin */);
-
-  var child = spawn({
-    cmd: "node",
-    args: [path.join("bin", "jsx-internal")].concat(args)
-  }, function(error, result, code) {
-    if (error) {
-      grunt.log.error(error);
-      done(false);
-    } else {
-      done();
-    }
-  });
-
-  child.stdin.write(JSON.stringify(config.getConfig()));
-  child.stdin.end();
-
-  child.stdout.pipe(process.stdout);
-  child.stderr.pipe(process.stderr);
-};
diff --git a/grunt/tasks/npm-react-tools.js b/grunt/tasks/npm-react-tools.js
deleted file mode 100644
index 543c15a6ec5..00000000000
--- a/grunt/tasks/npm-react-tools.js
+++ /dev/null
@@ -1,60 +0,0 @@
-'use strict';
-
-var fs = require('fs');
-var grunt = require('grunt');
-
-var src = 'npm-react-tools';
-var dest = 'build/npm-react-tools/';
-
-function buildRelease() {
-  grunt.file.exists(dest) && grunt.file.delete(dest);
-
-  // read our required files from package.json
-  var pkgFiles = grunt.config.data.pkg.files;
-
-  // copy all files from src first, includes custom README
-  var mappings = grunt.file.expandMapping('**/*', dest, {cwd: src});
-
-  // make sure we also get package.json
-  pkgFiles.push('package.json');
-
-  pkgFiles.map(function(file) {
-    if (grunt.file.isDir(file)) {
-      mappings = mappings.concat(grunt.file.expandMapping(file + '**/*', dest));
-    } else {
-      mappings.push({src: [file], dest: dest + file});
-    }
-  });
-
-  mappings.forEach(function(mapping) {
-    var src = mapping.src[0];
-    var dest = mapping.dest;
-    if (grunt.file.isDir(src)) {
-      grunt.file.mkdir(dest);
-    } else {
-      grunt.file.copy(src, dest);
-    }
-  });
-}
-
-function packRelease() {
-  /*jshint validthis:true */
-  var done = this.async();
-  var spawnCmd = {
-    cmd: 'npm',
-    args: ['pack', 'npm-react-tools'],
-    opts: {
-      cwd: 'build/'
-    }
-  };
-  grunt.util.spawn(spawnCmd, function() {
-    var src = 'build/react-tools-' + grunt.config.data.pkg.version + '.tgz';
-    var dest = 'build/react-tools.tgz';
-    fs.rename(src, dest, done);
-  });
-}
-
-module.exports = {
-  buildRelease: buildRelease,
-  packRelease: packRelease
-};
diff --git a/grunt/tasks/npm-react.js b/grunt/tasks/npm-react.js
deleted file mode 100644
index 94fb53ae070..00000000000
--- a/grunt/tasks/npm-react.js
+++ /dev/null
@@ -1,71 +0,0 @@
-'use strict';
-
-var fs = require('fs');
-var grunt = require('grunt');
-
-var src = 'npm-react/';
-var dest = 'build/npm-react/';
-var modSrc = 'build/modules/';
-var lib = dest + 'lib/';
-var dist = dest + 'dist/';
-var distFiles = [
-  'react.js', 'react.min.js', 'JSXTransformer.js',
-  'react-with-addons.js', 'react-with-addons.min.js'
-];
-
-function buildRelease() {
-  // delete build/react-core for fresh start
-  grunt.file.exists(dest) && grunt.file.delete(dest);
-
-  // mkdir -p build/react-core/lib
-  grunt.file.mkdir(lib);
-
-  // Copy npm-react/**/* to build/npm-react
-  // and build/modules/**/* to build/react-core/lib
-  var mappings = [].concat(
-    grunt.file.expandMapping('**/*', dest, {cwd: src}),
-    grunt.file.expandMapping('**/*', lib, {cwd: modSrc})
-  );
-  mappings.forEach(function(mapping) {
-    var src = mapping.src[0];
-    var dest = mapping.dest;
-    if (grunt.file.isDir(src)) {
-      grunt.file.mkdir(dest);
-    } else {
-      grunt.file.copy(src, dest);
-    }
-  });
-
-  // Make built source available inside npm package
-  grunt.file.mkdir(dist);
-  distFiles.forEach(function(file) {
-    grunt.file.copy('build/' + file, dist + file);
-  });
-
-  // modify build/react-core/package.json to set version ##
-  var pkg = grunt.file.readJSON(dest + 'package.json');
-  pkg.version = grunt.config.data.pkg.version;
-  grunt.file.write(dest + 'package.json', JSON.stringify(pkg, null, 2));
-}
-
-function packRelease() {
-  /*jshint validthis:true */
-  var done = this.async();
-  var spawnCmd = {
-    cmd: 'npm',
-    args: ['pack', 'npm-react'],
-    opts: {
-      cwd: 'build/'
-    }
-  };
-  grunt.util.spawn(spawnCmd, function() {
-    var src = 'build/react-' + grunt.config.data.pkg.version + '.tgz';
-    var dest = 'build/react.tgz';
-    fs.rename(src, dest, done);
-  });
-}
-
-module.exports = {
-  buildRelease: buildRelease,
-  packRelease: packRelease
-};
diff --git a/grunt/tasks/npm.js b/grunt/tasks/npm.js
deleted file mode 100644
index 72d95e536bf..00000000000
--- a/grunt/tasks/npm.js
+++ /dev/null
@@ -1,100 +0,0 @@
-'use strict';
-
-var assert = require("assert");
-var path = require("path");
-var grunt = require("grunt");
-var spawn = grunt.util.spawn;
-
-module.exports = function() {
-  var done = this.async();
-
-  function run(cmd, args, opts, callback) {
-    assert.strictEqual(typeof cmd, "string");
-    assert.ok(args instanceof Array);
-
-    if (typeof opts === "function" && !callback) {
-      callback = opts;
-      opts = {};
-    }
-
-    assert.strictEqual(typeof opts, "object");
-    assert.strictEqual(typeof callback, "function");
-
-    grunt.log.writeln("> " + cmd + " " + args.join(" "));
-
-    // var proc =
-    spawn({
-      cmd: cmd,
-      args: args,
-      opts: opts
-    }, function(error, result, code) {
-      if (error) {
-        grunt.log.error(error);
-        done(false);
-      } else {
-        callback(result, code);
-      }
-    });
-
-    // Uncomment these to see the output of the commands.
-    // proc.stdout.pipe(process.stdout);
-    // proc.stderr.pipe(process.stderr);
-  }
-
-  var pkg = grunt.config.data.pkg;
-  var tgz = pkg.name + "-" + pkg.version + ".tgz";
-
-  grunt.log.writeln("Packing " + tgz + " (this could take a while)...");
-
-  run("npm", ["pack", "--verbose", "."], function() {
-    require("tmp").dir(function(err, dir) {
-      if (err) {
-        grunt.log.error(err);
-        done(false);
-        return;
-      }
-
-      run("cp", [tgz, dir], function() {
-        run("npm", [
-          "install",
-          "--production",
-          tgz
-        ], { cwd: dir }, function() {
-          var nodePath = path.join(dir, "node_modules");
-          var pkgDir = path.join(nodePath, pkg.name);
-          var doneCount = 2;
-
-          // Make sure that bin/jsx is runnable by echoing main.js.
-          run("bin/jsx", ["main.js"], {
-            cwd: pkgDir
-          }, function(result) {
-            assert.ok(result.stdout.indexOf("transform") >= 0, result.stdout);
-
-            if (--doneCount === 0) {
-              done();
-            }
-          });
-
-          // Make sure the .transform package method works.
-          run("node", [
-            "--print",
-            'require("react-tools").transform(' +
-              JSON.stringify(
-                "/** @jsx React.DOM */ <div>oyez</div>;"
-              ) + ')'
-          ], {
-            env: { NODE_PATH: nodePath }
-          }, function(result, code) {
-            assert.ok(result.stdout.indexOf(
-              'React.DOM.div(null, "oyez");'
-            ) >= 0, result.stdout);
-
-            if (--doneCount === 0) {
-              done();
-            }
-          });
-        });
-      });
-    });
-  });
-};
diff --git a/grunt/tasks/populist.js b/grunt/tasks/populist.js
deleted file mode 100644
index 7ea837d130c..00000000000
--- a/grunt/tasks/populist.js
+++ /dev/null
@@ -1,39 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-var fs = require('fs');
-
-module.exports = function() {
-  var config = this.data;
-  var done = this.async();
-
-  var theFilesToTestScript = fs.createWriteStream(__dirname + '/../../test/the-files-to-test.generated.js');
-  theFilesToTestScript.write('// Generated by ');
-  theFilesToTestScript.write(JSON.stringify(__filename.split(/(?=grunt)/)[1]));
-  theFilesToTestScript.write(' at ');
-  theFilesToTestScript.write(JSON.stringify(new Date()));
-  theFilesToTestScript.write('\n\n');
-
-  // create the bundle we'll work with
-  var args = config.args;
-
-  // Make sure the things that need to be exposed are.
-  var requires = config.requires || [];
-  grunt.file.expand({
-    nonull: true, // Keep IDs that don't expand to anything.
-    cwd: config.rootDirectory
-  }, requires).forEach(function(name) {
-    name = name.replace(/\.js$/i, "");
-    args.push(name);
-    theFilesToTestScript.write('harness.enableTest(' + JSON.stringify(name) + ');\n');
-  });
-
-  require("populist").buildP({
-    rootDirectory: config.rootDirectory,
-    args: args
-  }).then(function(output) {
-    grunt.file.write(config.outfile, 'process = {env: {}};' + output);
-    theFilesToTestScript.end();
-    theFilesToTestScript.once('close', done);
-  });
-};
diff --git a/grunt/tasks/release.js b/grunt/tasks/release.js
deleted file mode 100644
index 7abd67ece0b..00000000000
--- a/grunt/tasks/release.js
+++ /dev/null
@@ -1,200 +0,0 @@
-// function calls get bound so "possible strict mode violations" aren't
-// jshint -W040
-
-'use strict';
-
-var grunt = require('grunt');
-
-var BOWER_PATH = '../react-bower/';
-var BOWER_GLOB = [BOWER_PATH + '*'];
-var BOWER_FILES = [
-  'react.js', 'react.min.js', 'JSXTransformer.js',
-  'react-with-addons.js', 'react-with-addons.min.js'
-];
-var GH_PAGES_PATH = '../react-gh-pages/';
-var GH_PAGES_GLOB = [GH_PAGES_PATH + '*'];
-
-var EXAMPLES_PATH = 'examples/';
-var EXAMPLES_GLOB = [
-  // todomvc-flux has too many other dependencies, so we'll leave it out
-  EXAMPLES_PATH + '/README.md',
-  EXAMPLES_PATH + '/ballmer-peak/**/*.*',
-  EXAMPLES_PATH + '/basic/**/*.*',
-  EXAMPLES_PATH + '/basic-commonjs/**/*.*',
-  EXAMPLES_PATH + '/basic-jsx/**/*.*',
-  EXAMPLES_PATH + '/basic-jsx-external/**/*.*',
-  EXAMPLES_PATH + '/basic-jsx-harmony/**/*.*',
-  EXAMPLES_PATH + '/basic-jsx-precompile/**/*.*',
-  EXAMPLES_PATH + '/jquery-bootstrap/**/*.*',
-  EXAMPLES_PATH + '/jquery-mobile/**/*.*',
-  EXAMPLES_PATH + '/server-rendering/**/*.*',
-  EXAMPLES_PATH + '/shared/**/*.*',
-  EXAMPLES_PATH + '/transitions/**/*.*'
-];
-
-var STARTER_PATH = 'starter/';
-var STARTER_GLOB = [STARTER_PATH  + '/**/*.*'];
-
-var STARTER_BUILD_PATH = 'build/starter/';
-
-var JS_PATH = 'build/';
-var JS_GLOB = [JS_PATH + '/*.js'];
-
-var VERSION;
-var VERSION_STRING;
-
-function _gitCommitAndTag(cwd, commitMsg, tag, cb) {
-  // `git add *` to make sure we catch untracked files
-  // `git add -u` to make sure we remove deleted files
-  // `git commit -m {commitMsg}`
-  // `git tag -a {tag}`
-  var opts = { cwd: cwd};
-  var gitAddAll = {
-    cmd: 'git',
-    args: ['add', '*'],
-    opts: opts
-  };
-  var gitAddDel = {
-    cmd: 'git',
-    args: ['add', '-u'],
-    opts: opts
-  };
-  var gitCommit = {
-    cmd: 'git',
-    args: ['commit', '-m', commitMsg],
-    opts: opts
-  };
-  var gitTag = {
-    cmd: 'git',
-    args: ['tag', tag],
-    opts: opts
-  };
-  grunt.util.spawn(gitAddAll, function() {
-    grunt.util.spawn(gitAddDel, function() {
-      grunt.util.spawn(gitCommit, function() {
-        if (tag) {
-          grunt.util.spawn(gitTag, cb);
-        }
-        else {
-          cb();
-        }
-      });
-    });
-  });
-}
-
-function setup() {
-  if (!grunt.file.exists(BOWER_PATH)) {
-    grunt.log.error('Make sure you have the react-bower repository checked ' +
-                    'out at ../react-bower');
-    return false;
-  }
-
-  if (!grunt.file.exists(GH_PAGES_PATH)) {
-    grunt.log.error('Make sure you have the react gh-pages branch checked ' +
-                    'out at ../react-gh-pages.');
-    return false;
-  }
-
-  VERSION = grunt.config.data.pkg.version;
-  VERSION_STRING = 'v' + VERSION;
-}
-
-function bower() {
-  var done = this.async();
-
-  // read current bower.json
-  var bowerFilePath = BOWER_PATH + 'bower.json';
-  var bowerInfo = grunt.file.readJSON(bowerFilePath);
-
-  // clean out the bower folder in case we're removing files
-  var files = grunt.file.expand(BOWER_GLOB);
-  files.forEach(function(file) {
-    grunt.file.delete(file, { force: true });
-  });
-
-  // Update bower package version and save the file back.
-  bowerInfo.version = VERSION;
-  var bowerFileContents = JSON.stringify(bowerInfo, null, 2);
-  grunt.file.write(bowerFilePath, bowerFileContents);
-
-  // Now copy over build files
-  BOWER_FILES.forEach(function(file) {
-    grunt.file.copy('build/' + file, BOWER_PATH + file);
-  });
-
-  // Commit and tag the repo
-  _gitCommitAndTag(BOWER_PATH, VERSION_STRING, VERSION_STRING, done);
-}
-
-function docs() {
-  var done = this.async();
-
-  var files = grunt.file.expand(GH_PAGES_GLOB);
-  files.forEach(function(file) {
-    grunt.file.delete(file, { force: true });
-  });
-
-  grunt.file.copy('build/react-' + VERSION + '.zip', 'docs/downloads/react-' + VERSION + '.zip');
-
-  // Build the docs with `rake release`, which will compile the CSS & JS, then
-  // build jekyll into GH_PAGES_PATH
-  var rakeOpts = {
-    cmd: 'rake',
-    args: ['release'],
-    opts: { cwd: 'docs' }
-  };
-  grunt.util.spawn(rakeOpts, function() {
-    // Commit the repo. We don't really care about tagging this.
-    _gitCommitAndTag(GH_PAGES_PATH, VERSION_STRING, null, done);
-  });
-}
-
-function msg() {
-  // Just output a friendly reminder message for the rest of the process
-  grunt.log.subhead('Release *almost* complete...');
-  [
-    'Still todo:',
-    '* put files on CDN',
-    '* push changes to git repositories',
-    '* publish npm module (`npm publish .`)',
-    '* publish gem (`gem push react-source-' + VERSION + '.gem`)',
-    '* announce it on FB/Twitter/mailing list'
-  ].forEach(function(ln) {
-    grunt.log.writeln(ln);
-  });
-}
-
-function starter() {
-  // Copy over examples/ to build/starter/examples/
-  // and starter/ to build/starter/
-
-  grunt.file.expand(EXAMPLES_GLOB).forEach(function(file) {
-    grunt.file.copy(
-      file,
-      STARTER_BUILD_PATH + file
-    );
-  });
-
-  grunt.file.expand(STARTER_GLOB).forEach(function(file) {
-    grunt.file.copy(
-      file,
-      'build/' + file
-    );
-  });
-
-  grunt.file.expand(JS_GLOB).forEach(function(file) {
-    grunt.file.copy(
-      file,
-      STARTER_BUILD_PATH + file
-    );
-  });
-}
-
-module.exports = {
-  setup: setup,
-  bower: bower,
-  docs: docs,
-  msg: msg,
-  starter: starter
-};
diff --git a/grunt/tasks/sauce-tunnel.js b/grunt/tasks/sauce-tunnel.js
deleted file mode 100644
index d785f1f2387..00000000000
--- a/grunt/tasks/sauce-tunnel.js
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-var SauceTunnel = require('sauce-tunnel');
-
-module.exports = function() {
-  var task = this;
-  var shouldStayAliveForever = task.flags.keepalive;
-
-  var SAUCE_ACCESS_KEY = process.env.SAUCE_ACCESS_KEY || '339d32ca-d594-4570-a3c2-94c50a91919b';
-  if (!SAUCE_ACCESS_KEY) {
-    grunt.fatal('Requires the environment variable SAUCE_ACCESS_KEY to be set');
-  }
-
-  var SAUCE_USERNAME = process.env.SAUCE_USERNAME || 'React';
-  if (!SAUCE_USERNAME) {
-    grunt.fatal('Requires the environment variable SAUCE_USERNAME to be set');
-  }
-
-  var IDENTIFIER = process.env.TRAVIS_JOB_NUMBER || 'my awesome tunnel';
-
-  var taskCompletedSuccessfully = task.async();
-
-  var stunnel = new SauceTunnel(SAUCE_USERNAME, SAUCE_ACCESS_KEY, IDENTIFIER, /*tunneled*/true, /*tunnelTimeout*/5);
-  process.on('exit', stunnel.stop.bind(stunnel, function(){}));
-
-  stunnel.on('log:error', grunt.log.error.bind(grunt.log));
-  stunnel.on('log:writeln', grunt.log.writeln.bind(grunt.log));
-
-  stunnel.on('verbose:ok', grunt.verbose.ok.bind(grunt.verbose));
-  stunnel.on('verbose:error', grunt.verbose.error.bind(grunt.verbose));
-  stunnel.on('verbose:debug', grunt.verbose.debug.bind(grunt.verbose));
-  stunnel.on('verbose:writeln', grunt.verbose.writeln.bind(grunt.verbose));
-
-  stunnel.openTunnel(function(isOpen){
-    if (shouldStayAliveForever && isOpen) {
-      grunt.verbose.writeln('Keeping the sauce-tunnel open forever because you used the keepalive flag `' + task.nameArgs + '`');
-      return;
-    }
-    grunt.verbose.writeln('To keep the sauce-tunnel open forever, use the grunt task `' + task.nameArgs + ':keepalive`');
-    taskCompletedSuccessfully(isOpen);
-  });
-};
diff --git a/grunt/tasks/version-check.js b/grunt/tasks/version-check.js
deleted file mode 100644
index fe5747d1c12..00000000000
--- a/grunt/tasks/version-check.js
+++ /dev/null
@@ -1,34 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-
-
-// Check that the version we're exporting is the same one we expect in the
-// package. This is not an ideal way to do this, but makes sure that we keep
-// them in sync.
-var reactVersionExp = /\bReact\.version\s*=\s*['"]([^'"]+)['"];/;
-
-module.exports = function() {
-  var reactVersion = reactVersionExp.exec(
-    grunt.file.read('./src/browser/ui/React.js')
-  )[1];
-  var npmReactVersion = grunt.file.readJSON('./npm-react/package.json').version;
-  var reactToolsVersion = grunt.config.data.pkg.version;
-
-  if (reactVersion !== reactToolsVersion) {
-    grunt.log.error(
-      'React version does not match react-tools version. Expected %s, saw %s',
-      reactToolsVersion,
-      reactVersion
-    );
-    return false;
-  }
-  if (npmReactVersion !== reactToolsVersion) {
-    grunt.log.error(
-      'npm-react version does not match react-tools veersion. Expected %s, saw %s',
-      reactToolsVersion,
-      npmReactVersion
-    );
-    return false;
-  }
-};
diff --git a/grunt/tasks/webdriver-all.js b/grunt/tasks/webdriver-all.js
deleted file mode 100644
index 4571f697c95..00000000000
--- a/grunt/tasks/webdriver-all.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* jshint evil: true */
-
-'use strict';
-
-var grunt = require("grunt");
-var wd = require('wd');
-
-module.exports = function task(getJSReport){
-  var config = this.data;
-  var taskSucceeded = this.async();
-  getJSReport = getJSReport.bind(this, config, wd);
-
-  var desiredCapabilities = {};
-  if (config.desiredCapabilities) {
-    Object.keys(config.desiredCapabilities).forEach(function(key) {
-      if (config.desiredCapabilities[key] === undefined) {
-        return;
-      }
-      desiredCapabilities[key] = config.desiredCapabilities[key];
-    });
-  }
-  grunt.verbose.writeln("desiredCapabilities", JSON.stringify(desiredCapabilities));
-
-  var browser = wd.promiseChainRemote(config.webdriver.remote);
-
-  browser.on('status', function(info) {
-    grunt.verbose.writeln(info);
-  });
-
-  browser.on('command', function(meth, path, data) {
-    grunt.verbose.writeln(' > ' + meth, path, data || '');
-  });
-
-  var results = null;
-
-  // browser._debugPromise();
-  browser
-    .init(desiredCapabilities)
-    .then(config.onStart && config.onStart.bind(config, browser))
-    .get(config.url)
-    .then(function(){return browser;})
-    .then(getJSReport)
-    .then(function(data){ results = data; })
-    .fail(function(error){
-      grunt.log.error(error);
-      return browser
-        .eval('document.documentElement.innerText || document.documentElement.textContent')
-        .then(grunt.verbose.writeln.bind(grunt.verbose))
-        .then(function(){ throw error; })
-      ;
-    })
-    .finally(function(){
-      if (grunt.option('webdriver-keep-open')) {
-        return;
-      }
-      grunt.verbose.writeln('Closing the browser window. To keep it open, pass the --webdriver-keep-open flag to grunt.');
-      return browser.quit();
-    })
-    .done(
-      function() {
-        if (config.onComplete) {
-          config.onComplete(results);
-        }
-        taskSucceeded(true);
-      },
-      function(error) {
-        if (config.onError) {
-          config.onError(error);
-        }
-        taskSucceeded(false);
-      }
-    );
-};
diff --git a/grunt/tasks/webdriver-jasmine.js b/grunt/tasks/webdriver-jasmine.js
deleted file mode 100644
index 613627dc927..00000000000
--- a/grunt/tasks/webdriver-jasmine.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* jshint evil: true */
-
-'use strict';
-
-module.exports = function(){
-  return require('./webdriver-all').call(this, function(config, wd, browser){
-    return browser
-      .waitFor(wd.asserters.jsCondition("typeof window.jasmine != 'undefined'"), 5e3, 50)
-      .fail(function(error){
-        throw Error("The test page didn't load properly. " + error);
-      })
-      .waitFor(wd.asserters.jsCondition("typeof window.jasmine.getJSReport != 'undefined'"), 60e3, 100)
-      .waitFor(wd.asserters.jsCondition("window.postDataToURL.running <= 0"), 30e3, 500)
-      .eval("jasmine.getJSReport().passed")
-    ;
-  });
-};
diff --git a/grunt/tasks/webdriver-perf.js b/grunt/tasks/webdriver-perf.js
deleted file mode 100644
index 27143cf6a57..00000000000
--- a/grunt/tasks/webdriver-perf.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* jshint evil: true */
-
-'use strict';
-
-var grunt = require('grunt');
-
-module.exports = function(){
-  return require('./webdriver-all').call(this, function(config, wd, browser){
-    if (!config.isDoneTimeout) {
-      grunt.verbose.writeln('Expected isDoneTimeout config, using default value');
-    }
-    grunt.verbose.writeln('isDoneTimeout:' + config.isDoneTimeout);
-    return browser
-      .waitFor(wd.asserters.jsCondition("window.isDone === false"), 5e3, 50)
-      .fail(function(error){
-        throw Error("The test page didn't load properly. " + error);
-      })
-      .waitFor(wd.asserters.jsCondition("window.isDone === true"), config.isDoneTimeout || 30e3, 1e3)
-      .waitFor(wd.asserters.jsCondition("window.postDataToURL.running <= 0"), 30e3, 500)
-      .eval("window.completedTestKeys || window._unhandledError")
-    ;
-  });
-};
diff --git a/grunt/tasks/webdriver-phantomjs.js b/grunt/tasks/webdriver-phantomjs.js
deleted file mode 100644
index 4612e788ee0..00000000000
--- a/grunt/tasks/webdriver-phantomjs.js
+++ /dev/null
@@ -1,41 +0,0 @@
-'use strict';
-
-var grunt = require('grunt');
-
-module.exports = function(){
-  var onReadyCallback = this.async();
-
-  var phantomjs = require("phantomjs").path;
-  var child_process = require('child_process');
-  var config = this.data || {};
-
-  var args = ["--webdriver=" + (config.port || 9515)];
-  grunt.verbose.writeln('phantomjs START path:%s args:%s', phantomjs, args);
-
-  var child = child_process.spawn(phantomjs, args);
-  process.on('exit', function() {
-    child.kill();
-  });
-
-  child.on('error', function(error) {
-    grunt.verbose.writeln('phantomjs ERROR');
-    grunt.fatal(error);
-  });
-  child.on('exit', function(code) {
-    grunt.verbose.writeln('phantomjs END');
-    if (code) {
-      grunt.fatal('phantomjs FAIL');
-    }
-  });
-
-  function verboseWrite(chunk) {
-    if (onReadyCallback && chunk.toString().indexOf('running on port') != -1) {
-      grunt.verbose.writeln('phantomjs STARTED');
-      onReadyCallback();
-      onReadyCallback = null;
-    }
-    grunt.verbose.write(chunk);
-  }
-  child.stdout.on('data', verboseWrite);
-  child.stderr.on('data', verboseWrite);
-};
diff --git a/jest/environment.js b/jest/environment.js
deleted file mode 100644
index a24f9f9ac42..00000000000
--- a/jest/environment.js
+++ /dev/null
@@ -1,3 +0,0 @@
-__DEV__ = true;
-
-require.requireActual('../src/vendor/polyfill/Object.es6.js');
diff --git a/jest/preprocessor.js b/jest/preprocessor.js
deleted file mode 100644
index 06ef3f2e22f..00000000000
--- a/jest/preprocessor.js
+++ /dev/null
@@ -1,9 +0,0 @@
-"use strict";
-
-var ReactTools = require('../main.js');
-
-module.exports = {
-  process: function(src) {
-    return ReactTools.transform(src, {harmony: true});
-  }
-};
diff --git a/main.js b/main.js
deleted file mode 100644
index f083a88ac7b..00000000000
--- a/main.js
+++ /dev/null
@@ -1,53 +0,0 @@
-'use strict';
-
-var visitors = require('./vendor/fbtransform/visitors');
-var transform = require('jstransform').transform;
-var Buffer = require('buffer').Buffer;
-
-module.exports = {
-  transform: function(input, options) {
-    var output = innerTransform(input, options);
-    var result = output.code;
-    if (options && options.sourceMap) {
-      var map = inlineSourceMap(
-        output.sourceMap,
-        input,
-        options.sourceFilename
-      );
-      result += '\n' + map;
-    }
-    return result;
-  },
-  transformWithDetails: function(input, options) {
-    var output = innerTransform(input, options);
-    var result = {};
-    result.code = output.code;
-    if (options && options.sourceMap) {
-      result.sourceMap = output.sourceMap.toJSON();
-    }
-    return result;
-  }
-};
-
-function innerTransform(input, options) {
-  options = options || {};
-  var visitorList = getVisitors(options.harmony);
-  return transform(visitorList, input, options);
-}
-
-function getVisitors(harmony) {
-  if (harmony) {
-    return visitors.getAllVisitors();
-  } else {
-    return visitors.transformVisitors.react;
-  }
-}
-
-function inlineSourceMap(sourceMap, sourceCode, sourceFilename) {
-  var json = sourceMap.toJSON();
-  json.sources = [sourceFilename];
-  json.sourcesContent = [sourceCode];
-  var base64 = Buffer(JSON.stringify(json)).toString('base64');
-  return '//# sourceMappingURL=data:application/json;base64,' +
-         base64;
-}
diff --git a/npm-react-tools/README.md b/npm-react-tools/README.md
deleted file mode 100644
index f2073866e87..00000000000
--- a/npm-react-tools/README.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# react-tools
-
-This package compliments the usage of [React](http://facebook.github.io/react/). It ships with tools that are often used in conjunction.
-
-## JSX
-
-This package installs a `jsx` executable that can be used to transform JSX into vanilla JS. This is often used as part of a build step. This transform is also exposed as an API.
-
-## Usage
-
-### Command Line
-
-    Usage: jsx [options] <source directory> <output directory> [<module ID> [<module ID> ...]]
-
-    Options:
-
-      -h, --help                               output usage information
-      -V, --version                            output the version number
-      -c, --config [file]                      JSON configuration file (no file or - means STDIN)
-      -w, --watch                              Continually rebuild
-      -x, --extension <js | coffee | ...>      File extension to assume when resolving module identifiers
-      --relativize                             Rewrite all module identifiers to be relative
-      --follow-requires                        Scan modules for required dependencies
-      --cache-dir <directory>                  Alternate directory to use for disk cache
-      --no-cache-dir                           Disable the disk cache
-      --source-charset <utf8 | win1252 | ...>  Charset of source (default: utf8)
-      --output-charset <utf8 | win1252 | ...>  Charset of output (default: utf8)
-      --harmony                                Turns on JS transformations such as ES6 Classes etc.
-      --source-map-inline                      Embed inline sourcemap in transformed source
-
-## API
-
-### `transform(inputString, options)`
-
-option | values | default
--------|--------|---------
-`sourceMap` | `true`: append inline source map at the end of the transformed source | `false`
-`harmony` | `true`: enable ES6 features | `false`
-`filename` | the output filename for the source map | `"source.js"`
-
-```js
-var reactTools = require('react-tools');
-
-reactTools.transform(string, options);
-```
-
-### `transformWithDetails(inputString, options)`
-
-Just like `transform`, but outputs an object:
-```js
-{
-  code: outputString,
-  sourceMap: theSourceMap // Only if the `sourceMap` option is `true`.
-}
-```
diff --git a/npm-react/README.md b/npm-react/README.md
deleted file mode 100644
index 5821d8f5681..00000000000
--- a/npm-react/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# react
-
-An npm package to get you immediate access to [React](http://facebook.github.io/react/),
-without also requiring the JSX transformer. This is especially useful for cases where you
-want to [`browserify`](https://github.com/substack/node-browserify) your module using
-`React`.
-
-**Note:** by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.
-
-To use React in production mode, set the environment variable `NODE_ENV` to `production`. A minifier that performs dead-code elimination such as [UglifyJS](https://github.com/mishoo/UglifyJS2) is recommended to completely remove the extra code present in development mode.
-
-## Example Usage
-
-```js
-var React = require('react');
-
-// You can also access ReactWithAddons.
-var React = require('react/addons');
-```
-
diff --git a/npm-react/addons.js b/npm-react/addons.js
deleted file mode 100644
index 21c5f839501..00000000000
--- a/npm-react/addons.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./lib/ReactWithAddons');
diff --git a/npm-react/package.json b/npm-react/package.json
deleted file mode 100644
index d75ef515d88..00000000000
--- a/npm-react/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "react",
-  "description": "React is a JavaScript library for building user interfaces.",
-  "version": "0.12.0-alpha",
-  "keywords": [
-    "react"
-  ],
-  "homepage": "https://github.com/facebook/react/tree/master/npm-react",
-  "bugs": "https://github.com/facebook/react/issues?labels=react-core",
-  "licenses": [
-    {
-      "type": "Apache-2.0",
-      "url": "http://www.apache.org/licenses/LICENSE-2.0"
-    }
-  ],
-  "files": [
-    "README.md",
-    "addons.js",
-    "react.js",
-    "dist/",
-    "lib/"
-  ],
-  "main": "react.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/facebook/react"
-  },
-  "engines": {
-    "node": ">=0.10.0"
-  },
-  "dependencies": {
-    "envify": "^2.0.0"
-  },
-  "browserify": {
-    "transform": ["envify"]
-  }
-}
diff --git a/npm-react/react.js b/npm-react/react.js
deleted file mode 100644
index 08da025716d..00000000000
--- a/npm-react/react.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./lib/React');
diff --git a/package.json b/package.json
index 251e061a6ee..a1f5aa0eeff 100644
--- a/package.json
+++ b/package.json
@@ -1,88 +1,164 @@
 {
-  "name": "react-tools",
-  "description": "A set of complementary tools to React, including the JSX transformer.",
-  "version": "0.12.0-alpha",
-  "keywords": [
-    "react",
-    "jsx",
-    "transformer",
-    "view"
+  "private": true,
+  "workspaces": [
+    "packages/*"
   ],
-  "homepage": "http://facebook.github.io/react",
-  "bugs": "https://github.com/facebook/react/issues",
-  "licenses": [
-    {
-      "type": "Apache-2.0",
-      "url": "http://www.apache.org/licenses/LICENSE-2.0"
-    }
-  ],
-  "files": [
-    "main.js",
-    "bin/jsx",
-    "src/",
-    "vendor/fbtransform/"
-  ],
-  "main": "main.js",
-  "bin": {
-    "jsx": "./bin/jsx"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/facebook/react"
-  },
-  "dependencies": {
-    "commoner": "^0.9.6",
-    "esprima-fb": "^4001.3001.0-dev-harmony-fb",
-    "jstransform": "^6.0.1"
-  },
   "devDependencies": {
-    "benchmark": "~1.0.0",
-    "browserify": "^4.1.10",
-    "coverify": "~1.0.4",
-    "envify": "^2.0.0",
-    "es3ify": "~0.1.2",
-    "es5-shim": "^4.0.0",
-    "grunt": "~0.4.2",
-    "grunt-cli": "~0.1.9",
-    "grunt-compare-size": "~0.4.0",
-    "grunt-contrib-clean": "~0.5.0",
-    "grunt-contrib-compress": "^0.9.1",
-    "grunt-contrib-connect": "~0.6.0",
-    "grunt-contrib-copy": "~0.5.0",
-    "grunt-contrib-jshint": "^0.10.0",
-    "gzip-js": "~0.3.2",
-    "jasmine-tapreporter": "~0.2.2",
-    "jest-cli": "~0.1.5",
-    "lodash": "~2.4.1",
-    "microtime": "^0.6.0",
-    "optimist": "~0.6.0",
-    "phantomjs": "~1.9",
-    "platform": "^1.1.0",
-    "populist": "~0.1.6",
-    "recast": "~0.5.6",
-    "sauce-tunnel": "~1.1.0",
-    "semver": "^2.3.0",
-    "tmp": "~0.0.18",
-    "uglify-js": "~2.4.0",
-    "uglifyify": "^2.4.0",
-    "wd": "~0.2.6"
+    "@babel/cli": "^7.10.5",
+    "@babel/code-frame": "^7.10.4",
+    "@babel/core": "^7.11.1",
+    "@babel/helper-define-map": "^7.18.6",
+    "@babel/helper-module-imports": "^7.10.4",
+    "@babel/parser": "^7.11.3",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-syntax-typescript": "^7.14.5",
+    "@babel/plugin-transform-arrow-functions": "^7.10.4",
+    "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
+    "@babel/plugin-transform-block-scoping": "^7.11.1",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-classes": "^7.10.4",
+    "@babel/plugin-transform-computed-properties": "^7.10.4",
+    "@babel/plugin-transform-destructuring": "^7.10.4",
+    "@babel/plugin-transform-for-of": "^7.10.4",
+    "@babel/plugin-transform-literals": "^7.10.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/plugin-transform-object-super": "^7.10.4",
+    "@babel/plugin-transform-parameters": "^7.10.5",
+    "@babel/plugin-transform-private-methods": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/plugin-transform-shorthand-properties": "^7.10.4",
+    "@babel/plugin-transform-spread": "^7.11.0",
+    "@babel/plugin-transform-template-literals": "^7.10.5",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/traverse": "^7.11.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/invariant": "^2.2.35",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "abortcontroller-polyfill": "^1.7.5",
+    "art": "0.10.1",
+    "babel-plugin-syntax-hermes-parser": "^0.32.0",
+    "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
+    "chalk": "^3.0.0",
+    "cli-table": "^0.3.1",
+    "coffee-script": "^1.12.7",
+    "confusing-browser-globals": "^1.0.9",
+    "core-js": "^3.6.4",
+    "create-react-class": "^15.6.3",
+    "danger": "^11.2.3",
+    "error-stack-parser": "^2.0.6",
+    "eslint": "^7.7.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-es": "^4.1.0",
+    "eslint-plugin-eslint-plugin": "^3.5.3",
+    "eslint-plugin-ft-flow": "^2.0.3",
+    "eslint-plugin-jest": "28.4.0",
+    "eslint-plugin-no-for-of-loops": "^1.0.0",
+    "eslint-plugin-no-function-declare-after-return": "^1.0.0",
+    "eslint-plugin-react": "^6.7.1",
+    "eslint-plugin-react-hooks-published": "npm:eslint-plugin-react-hooks@^5.2.0",
+    "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
+    "fbjs-scripts": "^3.0.1",
+    "filesize": "^6.0.1",
+    "flow-bin": "^0.279.0",
+    "flow-remove-types": "^2.279.0",
+    "flow-typed": "^4.1.1",
+    "glob": "^7.1.6",
+    "glob-stream": "^6.1.0",
+    "google-closure-compiler": "^20230206.0.0",
+    "gzip-size": "^5.1.1",
+    "hermes-eslint": "^0.32.0",
+    "hermes-parser": "^0.32.0",
+    "jest": "^29.4.2",
+    "jest-cli": "^29.4.2",
+    "jest-diff": "^29.4.2",
+    "jest-environment-jsdom": "^29.4.2",
+    "jest-silent-reporter": "^0.6.0",
+    "jest-snapshot-serializer-raw": "^1.2.0",
+    "minimatch": "^3.0.4",
+    "minimist": "^1.2.3",
+    "mkdirp": "^0.5.1",
+    "ncp": "^2.0.0",
+    "prettier": "^3.3.3",
+    "prettier-2": "npm:prettier@^2",
+    "pretty-format": "^29.4.1",
+    "prop-types": "^15.6.2",
+    "random-seed": "^0.3.0",
+    "react-lifecycles-compat": "^3.0.4",
+    "rimraf": "^3.0.0",
+    "rollup": "^3.29.5",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-prettier": "^4.1.1",
+    "rollup-plugin-strip-banner": "^3.0.0",
+    "semver": "^7.1.1",
+    "shelljs": "^0.8.5",
+    "signedsource": "^2.0.0",
+    "targz": "^1.0.1",
+    "through2": "^3.0.1",
+    "tmp": "^0.1.0",
+    "to-fast-properties": "^2.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.4.3",
+    "undici": "^5.28.4",
+    "web-streams-polyfill": "^3.1.1",
+    "yargs": "^15.3.1"
   },
-  "engines": {
-    "node": ">=0.10.0"
-  },
-  "preferGlobal": true,
-  "commonerConfig": {
-    "version": 4
+  "jest": {
+    "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"
   },
   "scripts": {
-    "test": "./node_modules/.bin/grunt test"
+    "prebuild": "./scripts/react-compiler/link-compiler.sh",
+    "build": "node ./scripts/rollup/build-all-release-channels.js",
+    "build-for-devtools": "cross-env yarn build react/index,react/jsx,react/compiler-runtime,react-dom/index,react-dom/client,react-dom/unstable_testing,react-dom/test-utils,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --type=NODE --release-channel=experimental",
+    "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
+    "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
+    "build-for-flight-dev": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react.react-server,react-dom/index,react-dom/client,react-dom/server,react-dom.react-server,react-dom-server.node,react-dom-server-legacy.node,scheduler,react-server-dom-webpack/,react-server-dom-unbundled/ --type=NODE_DEV,ESM_PROD,NODE_ES2015 && mv ./build/node_modules ./build/oss-experimental",
+    "build-for-vt-dev": "cross-env RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js react/index,react/jsx,react-dom/index,react-dom/client,react-dom/server,react-dom-server.node,react-dom-server-legacy.node,scheduler --type=NODE_DEV && mv ./build/node_modules ./build/oss-experimental",
+    "flow-typed-install": "yarn flow-typed install --skip --skipFlowRestart --ignore-deps=dev",
+    "linc": "node ./scripts/tasks/linc.js",
+    "lint": "node ./scripts/tasks/eslint.js",
+    "lint-build": "node ./scripts/rollup/validate/index.js",
+    "extract-errors": "node scripts/error-codes/extract-errors.js",
+    "postinstall": "node ./scripts/flow/createFlowConfigs.js",
+    "test": "node ./scripts/jest/jest-cli.js",
+    "test-stable": "node ./scripts/jest/jest-cli.js --release-channel=stable",
+    "test-www": "node ./scripts/jest/jest-cli.js --release-channel=www-modern",
+    "test-classic": "node ./scripts/jest/jest-cli.js --release-channel=www-classic",
+    "test-build-devtools": "node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental",
+    "test-dom-fixture": "cd fixtures/dom && yarn && yarn test",
+    "flow": "node ./scripts/tasks/flow.js",
+    "flow-ci": "node ./scripts/tasks/flow-ci.js",
+    "prettier": "node ./scripts/prettier/index.js write-changed",
+    "prettier-all": "node ./scripts/prettier/index.js write",
+    "prettier-check": "node ./scripts/prettier/index.js",
+    "version-check": "node ./scripts/tasks/version-check.js",
+    "publish-prereleases": "echo 'This command has been deprecated. Please refer to https://github.com/facebook/react/tree/main/scripts/release#trigger-an-automated-prerelease'",
+    "download-build": "node ./scripts/release/download-experimental-build.js",
+    "download-build-for-head": "node ./scripts/release/download-experimental-build.js --commit=$(git rev-parse HEAD)",
+    "download-build-in-codesandbox-ci": "yarn build --type=node react/index react.react-server react-dom/index react-dom/client react-dom/src/server react-dom/test-utils react-dom.react-server scheduler/index react/jsx-runtime react/jsx-dev-runtime react-server-dom-webpack",
+    "check-release-dependencies": "node ./scripts/release/check-release-dependencies",
+    "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js",
+    "generate-changelog": "node ./scripts/tasks/generate-changelog/index.js",
+    "flags": "node ./scripts/flags/flags.js"
   },
-  "jest": {
-    "rootDir": "src",
-    "scriptPreprocessor": "../jest/preprocessor.js",
-    "setupEnvScriptFile": "../jest/environment.js",
-    "unmockedModulePathPatterns": [
-      ""
-    ]
-  }
+  "resolutions": {
+    "react-is": "npm:react-is",
+    "jsdom": "22.1.0"
+  },
+  "packageManager": "yarn@1.22.22"
 }
diff --git a/packages/dom-event-testing-library/README.md b/packages/dom-event-testing-library/README.md
new file mode 100644
index 00000000000..d6ad0f183c0
--- /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 00000000000..ddb68961a95
--- /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 00000000000..2b6323d9300
--- /dev/null
+++ b/packages/dom-event-testing-library/__tests__/index-test.internal.js
@@ -0,0 +1,363 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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();
+  });
+
+  it('returns expected API', () => {
+    const target = createEventTarget(node);
+    expect(target.node).toEqual(node);
+    expect(Object.keys(target)).toMatchInlineSnapshot(`
+      [
+        "node",
+        "blur",
+        "click",
+        "focus",
+        "keydown",
+        "keyup",
+        "scroll",
+        "virtualclick",
+        "contextmenu",
+        "pointercancel",
+        "pointerdown",
+        "pointerhover",
+        "pointermove",
+        "pointerenter",
+        "pointerexit",
+        "pointerup",
+        "tap",
+        "setBoundingClientRect",
+      ]
+    `);
+  });
+
+  /**
+   * Simple events
+   */
+
+  describe('.blur()', () => {
+    it('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('blur', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+
+    it('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('blur', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+  });
+
+  describe('.click()', () => {
+    it('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();
+    });
+
+    it('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()', () => {
+    it('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('focus', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+
+    it('custom payload', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('focus', e => {
+        expect(e.relatedTarget).toMatchInlineSnapshot(`null`);
+      });
+      target.blur();
+    });
+  });
+
+  describe('.keydown()', () => {
+    it('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();
+    });
+
+    it('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()', () => {
+    it('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();
+    });
+
+    it('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()', () => {
+    it('default', () => {
+      const target = createEventTarget(node);
+      node.addEventListener('scroll', e => {
+        expect(e.type).toEqual('scroll');
+      });
+      target.scroll();
+    });
+  });
+
+  describe('.virtualclick()', () => {
+    it('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();
+    });
+
+    it('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
+   */
+
+  it('.setBoundingClientRect()', () => {
+    const target = createEventTarget(node);
+    expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
+      {
+        "bottom": 0,
+        "height": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+        "width": 0,
+        "x": 0,
+        "y": 0,
+      }
+    `);
+    target.setBoundingClientRect({x: 10, y: 20, width: 100, height: 200});
+    expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
+      {
+        "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 00000000000..98c82d6e589
--- /dev/null
+++ b/packages/dom-event-testing-library/constants.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 00000000000..185b0b5ace3
--- /dev/null
+++ b/packages/dom-event-testing-library/domEnvironment.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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.
+ */
+
+function emptyFunction() {}
+
+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 00000000000..bf6a7d06dfb
--- /dev/null
+++ b/packages/dom-event-testing-library/domEventSequences.js
@@ -0,0 +1,361 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 00000000000..a66236fb880
--- /dev/null
+++ b/packages/dom-event-testing-library/domEvents.js
@@ -0,0 +1,442 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 focusOut({relatedTarget} = {}) {
+  return new FocusEvent('focusout', {relatedTarget, bubbles: true});
+}
+
+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 focusIn({relatedTarget} = {}) {
+  return new FocusEvent('focusin', {relatedTarget, bubbles: true});
+}
+
+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 00000000000..0bab0a84089
--- /dev/null
+++ b/packages/dom-event-testing-library/index.js
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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));
+    node.dispatchEvent(domEvents.focusOut(payload));
+  },
+  click(payload) {
+    node.dispatchEvent(domEvents.click(payload));
+  },
+  focus(payload) {
+    node.dispatchEvent(domEvents.focus(payload));
+    node.dispatchEvent(domEvents.focusIn(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 00000000000..bade785d466
--- /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 00000000000..9b67fc3a1b9
--- /dev/null
+++ b/packages/dom-event-testing-library/testHelpers.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 00000000000..3a56ca718d5
--- /dev/null
+++ b/packages/dom-event-testing-library/touchStore.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
new file mode 100644
index 00000000000..9f88047193e
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -0,0 +1,161 @@
+## 7.0.1
+
+- Disallowed passing inline `useEffectEvent` values as JSX props to guard against accidental propagation. ([#34820](https://github.com/facebook/react/pull/34820) by [@jf-eirinha](https://github.com/jf-eirinha))
+- Switch to `export =` so eslint-plugin-react-hooks emits correct types for consumers in Node16 ESM projects. ([#34949](https://github.com/facebook/react/pull/34949) by [@karlhorky](https://github.com/karlhorky))
+- Tightened the typing of `configs.flat` so the `configs` export is always defined. ([#34950](https://github.com/facebook/react/pull/34950) by [@poteto](https://github.com/poteto))
+- Fix named import runtime errors. ([#34951](https://github.com/facebook/react/pull/34951), [#34953](https://github.com/facebook/react/pull/34953) by [@karlhorky](https://github.com/karlhorky))
+
+## 7.0.0
+
+This release slims down presets to just 2 configurations (`recommended` and `recommended-latest`), and all compiler rules are enabled by default.
+
+- **Breaking:** Removed `recommended-latest-legacy` and `flat/recommended` configs. The plugin now provides `recommended` (legacy and flat configs with all recommended rules),  and `recommended-latest` (legacy and flat configs with all recommended rules plus new bleeding edge experimental compiler rules). ([@poteto](https://github.com/poteto) in [#34757](https://github.com/facebook/react/pull/34757))
+
+## 6.1.1
+
+**Note:** 6.1.0 accidentally allowed use of `recommended` without flat config, causing errors when used with ESLint v9's `defineConfig()` helper. This has been fixed in 6.1.1.
+
+- Fix `recommended` config for flat config compatibility. The `recommended` config has been converted to flat config format. Non-flat config users should use `recommended-legacy` instead. ([@poteto](https://github.com/poteto) in [#34700](https://github.com/facebook/react/pull/34700))
+- Add `recommended-latest` and `recommended-latest-legacy` configs that include React Compiler rules. ([@poteto](https://github.com/poteto) in [#34675](https://github.com/facebook/react/pull/34675))
+- Remove unused `NoUnusedOptOutDirectives` rule. ([@poteto](https://github.com/poteto) in [#34703](https://github.com/facebook/react/pull/34703))
+- Remove `hermes-parser` and dependency. ([@poteto](https://github.com/poteto) in [#34719](https://github.com/facebook/react/pull/34719))
+- Remove `@babel/plugin-proposal-private-methods` dependency. ([@ArnaudBarre](https://github.com/ArnaudBarre) and [@josephsavona](https://github.com/josephsavona) in [#34715](https://github.com/facebook/react/pull/34715))
+- Update for Zod v3/v4 compatibility. ([@kolian](https://github.com/kolvian) and [@josephsavona](https://github.com/josephsavona) in [#34717](https://github.com/facebook/react/pull/34717))
+
+## 6.1.0
+
+**Note:** Version 6.0.0 was mistakenly released and immediately deprecated and untagged on npm. This is the first official 6.x major release and includes breaking changes.
+
+- **Breaking:** Require Node.js 18 or newer. ([@michaelfaith](https://github.com/michaelfaith) in [#32458](https://github.com/facebook/react/pull/32458))
+- **Breaking:** Flat config is now the default `recommended` preset. Legacy config moved to `recommended-legacy`. ([@michaelfaith](https://github.com/michaelfaith) in [#32457](https://github.com/facebook/react/pull/32457))
+- **New Violations:** Disallow calling `use` within try/catch blocks. ([@poteto](https://github.com/poteto) in [#34040](https://github.com/facebook/react/pull/34040))
+- **New Violations:** Disallow calling `useEffectEvent` functions in arbitrary closures. ([@jbrown215](https://github.com/jbrown215) in [#33544](https://github.com/facebook/react/pull/33544))
+- Handle `React.useEffect` in addition to `useEffect` in rules-of-hooks. ([@Ayc0](https://github.com/Ayc0) in [#34076](https://github.com/facebook/react/pull/34076))
+- Added `react-hooks` settings config option that to accept `additionalEffectHooks` that are used across exhaustive-deps and rules-of-hooks rules. ([@jbrown215](https://github.com/jbrown215)) in [#34497](https://github.com/facebook/react/pull/34497)
+
+## 6.0.0
+
+Accidentally released. See 6.1.0 for the actual changes.
+
+## 5.2.0
+
+- Support flat config ([@michaelfaith](https://github.com/michaelfaith) in [#30774](https://github.com/facebook/react/pull/30774))
+- Convert the plugin to TypeScript and provide package type declarations ([@michaelfaith](https://github.com/michaelfaith) in [#32279](https://github.com/facebook/react/pull/32279), [#32283](https://github.com/facebook/react/pull/32283), [#32240](https://github.com/facebook/react/pull/32240), [#32400](https://github.com/facebook/react/pull/32400) and [@poteto](https://github.com/poteto) in [#32420](https://github.com/facebook/react/pull/32420))
+- Fix false positive error in components with `do`/`while` loops ([@tyxla](https://github.com/tyxla) in [#31720](https://github.com/facebook/react/pull/31720))
+- Detect issues in class properties ([@mjesun](https://github.com/mjesun) & [@ecraig12345](https://github.com/ecraig12345) in [#31823](https://github.com/facebook/react/pull/31823))
+
+## 5.1.0
+
+- Add support for `do`/`while` loops ([@tyxla](https://github.com/tyxla) in [#28714](https://github.com/facebook/react/pull/28714))
+- Fix error when callback argument is an identifier with an `as` expression ([@mskelton](https://github.com/mskelton) in [#31119](https://github.com/facebook/react/pull/31119))
+
+## 5.0.0
+
+* **New Violations:** Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means `_Button` or `_component` are no longer valid. ([@kassens](https://github.com/kassens)) in [#25162](https://github.com/facebook/react/pull/25162)
+
+- Consider dispatch from `useActionState` stable. ([@eps1lon](https://github.com/eps1lon) in [#29665](https://github.com/facebook/react/pull/29665))
+- Add support for ESLint v9. ([@eps1lon](https://github.com/eps1lon) in [#28773](https://github.com/facebook/react/pull/28773))
+- Accept `as` expression in callback. ([@StyleShit](https://github.com/StyleShit) in [#28202](https://github.com/facebook/react/pull/28202))
+- Accept `as` expressions in deps array. ([@StyleShit](https://github.com/StyleShit) in [#28189](https://github.com/facebook/react/pull/28189))
+- Treat `React.use()` the same as `use()`. ([@kassens](https://github.com/kassens) in [#27769](https://github.com/facebook/react/pull/27769))
+- Move `use()` lint to non-experimental. ([@kassens](https://github.com/kassens) in [#27768](https://github.com/facebook/react/pull/27768))
+- Support Flow `as` expressions. ([@cpojer](https://github.com/cpojer) in [#27590](https://github.com/facebook/react/pull/27590))
+- Allow `useEffect(fn, undefined)`. ([@kassens](https://github.com/kassens) in [#27525](https://github.com/facebook/react/pull/27525))
+- Disallow hooks in async functions. ([@acdlite](https://github.com/acdlite) in [#27045](https://github.com/facebook/react/pull/27045))
+- Rename experimental `useEvent` to `useEffectEvent`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#25881](https://github.com/facebook/react/pull/25881))
+- Lint for presence of `useEvent` functions in dependency lists. ([@poteto](https://github.com/poteto) in [#25512](https://github.com/facebook/react/pull/25512))
+- Check `useEvent` references instead. ([@poteto](https://github.com/poteto) in [#25319](https://github.com/facebook/react/pull/25319))
+- Update `RulesOfHooks` with `useEvent` rules. ([@poteto](https://github.com/poteto) in [#25285](https://github.com/facebook/react/pull/25285))
+
+## 4.6.0
+
+## 4.5.0
+
+* Fix false positive error with large number of branches. ([@scyron6](https://github.com/scyron6) in [#24287](https://github.com/facebook/react/pull/24287))
+
+## 4.4.0
+
+* No changes, this was an automated release together with React 18.
+
+## 4.3.0
+
+* Support ESLint 8. ([@MichaelDeBoey](https://github.com/MichaelDeBoey) in [#22248](https://github.com/facebook/react/pull/22248))
+* Fix a crash with an empty effect. ([@ChrisRu](https://github.com/ChrisRu) in [#20385](https://github.com/facebook/react/pull/20385))
+* Improve the error message. ([@callmetwan](https://github.com/callmetwan) in [#20692](https://github.com/facebook/react/pull/20692))
+* Handle optional chained methods as dependency. ([@AriPerkkio](https://github.com/AriPerkkio) in [#20247](https://github.com/facebook/react/pull/20247))
+* Assume the new `useTransition` signature in the rule. ([@rickhanlonii](https://github.com/rickhanlonii) in [#20976](https://github.com/facebook/react/pull/20976))
+
+## 4.2.0
+
+* No changes, this was an automated release together with React 17.
+
+## 4.1.2
+* Fix a crash with the TypeScript 4.x parser. ([@eps1lon](https://github.com/eps1lon) in [#19815](https://github.com/facebook/react/pull/19815))
+
+## 4.1.1
+* Improve support for optional chaining. ([@pfongkye](https://github.com/pfongkye) in [#19680](https://github.com/facebook/react/pull/19680))
+* Fix a false positive warning for TypeScript parameters. ([@NeoRaider](https://github.com/NeoRaider) in [#19751](https://github.com/facebook/react/pull/19751))
+
+## 4.1.0
+* **New Violations:** Warn when dependencies change on every render. ([@captbaritone](https://github.com/captbaritone) in [#19590](https://github.com/facebook/react/pull/19590))
+
+## 4.0.8
+* Fixes TypeScript `typeof` annotation to not be considered a dependency. ([@delca85](https://github.com/delca85) in [#19316](https://github.com/facebook/react/pull/19316))
+
+## 4.0.7
+* Fixes an overly coarse dependency suggestion. ([@gaearon](https://github.com/gaearon) in [#19313](https://github.com/facebook/react/pull/19313))
+
+## 4.0.6
+* Fix crashes and other bugs related to optional chaining. ([@gaearon](https://github.com/gaearon) in [#19273](https://github.com/facebook/react/pull/19273) and [#19275](https://github.com/facebook/react/pull/19275))
+
+## 4.0.5
+* Fix a crash when the dependency array has an empty element. ([@yeonjuan](https://github.com/yeonjuan) in [#19145](https://github.com/facebook/react/pull/19145))
+* Fix a false positive warning that occurs with optional chaining. ([@fredvollmer](https://github.com/fredvollmer) in [#19061](https://github.com/facebook/react/pull/19061))
+
+## 4.0.4
+* Fix a false positive warning that occurs with optional chaining. ([@fredvollmer](https://github.com/fredvollmer) in [#19061](https://github.com/facebook/react/pull/19061))
+* Support nullish coalescing and optional chaining. ([@yanneves](https://github.com/yanneves) in [#19008](https://github.com/facebook/react/pull/19008))
+
+## 4.0.3
+* Remove the heuristic that checks all Hooks ending with `Effect` due to too many false positives. ([@gaearon](https://github.com/gaearon) in [#19004](https://github.com/facebook/react/pull/19004))
+
+## 4.0.2
+* Prevent Hooks that have `Effect` in the middle from being considered effects. ([@surgeboris](https://github.com/surgeboris) in [#18907](https://github.com/facebook/react/pull/18907))
+
+## 4.0.1
+* Declare support for ESLint 7. ([@MichaelDeBoey](https://github.com/MichaelDeBoey) in [#18878](https://github.com/facebook/react/pull/18878))
+
+## 4.0.0
+
+* **New Violations:** Consider `PascalCase.useFoo()` calls as Hooks. ([@cyan33](https://github.com/cyan33) in [#18722](https://github.com/facebook/react/pull/18722))
+* **New Violations:** Check callback body when it's not written inline. ([@gaearon](https://github.com/gaearon) in [#18435](https://github.com/facebook/react/pull/18435))
+* **New Violations:** Check dependencies for all Hooks ending with `Effect`. ([@airjp73](https://github.com/airjp73) in [#18580](https://github.com/facebook/react/pull/18580))
+* Add a way to enable the dangerous autofix. ([@gaearon](https://github.com/gaearon) in [#18437](https://github.com/facebook/react/pull/18437))
+* Offer a more sensible suggestion when encountering an assignment. ([@Zzzen](https://github.com/Zzzen) in [#16784](https://github.com/facebook/react/pull/16784))
+* Consider TypeScript casts of `useRef` as constant. ([@sophiebits](https://github.com/sophiebits) in [#18496](https://github.com/facebook/react/pull/18496))
+* Add documentation. ([@ghmcadams](https://github.com/ghmcadams) in [#16607](https://github.com/facebook/react/pull/16607))
+
+## 3.0.0
+
+* **New Violations:** Forbid calling Hooks from classes. ([@ianobermiller](https://github.com/ianobermiller) in [#18341](https://github.com/facebook/react/pull/18341))
+* Add a recommended config. ([@SimenB](https://github.com/SimenB) in [#14762](https://github.com/facebook/react/pull/14762))
+
+## 2.5.0
+
+* Fix a misleading error message in loops. ([@M-Izadmehr](https://github.com/M-Izadmehr) in [#16853](https://github.com/facebook/react/pull/16853))
+
+## 2.4.0
+
+* **New Violations:** Run checks for functions passed to `forwardRef`. ([@dprgarner](https://github.com/dprgarner) in [#17255](https://github.com/facebook/react/pull/17255))
+* **New Violations:** Check for ref usage in any Hook containing the word `Effect`. ([@gaearon](https://github.com/gaearon) in [#17663](https://github.com/facebook/react/pull/17663))
+* Disable dangerous autofix and use ESLint Suggestions API instead. ([@wdoug](https://github.com/wdoug) in [#17385](https://github.com/facebook/react/pull/17385))
+
+## 2.0.0
+
+* **New Violations:** Forbid calling Hooks at the top level. ([@gaearon](https://github.com/gaearon) in [#16455](https://github.com/facebook/react/pull/16455))
+* Fix a crash when referencing arguments in arrow functions. ([@hristo-kanchev](https://github.com/hristo-kanchev) in [#16356](https://github.com/facebook/react/pull/16356))
+
+
+## 1.x
+
+The 1.x releases aren’t noted in this changelog, but you can find them in the [commit history](https://github.com/facebook/react/commits/main/packages/eslint-plugin-react-hooks).
diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md
new file mode 100644
index 00000000000..a1b4bcabb59
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/README.md
@@ -0,0 +1,152 @@
+# `eslint-plugin-react-hooks`
+
+The official ESLint plugin for [React](https://react.dev) which enforces the [Rules of React](https://react.dev/reference/eslint-plugin-react-hooks) and other best practices.
+
+## Installation
+
+Assuming you already have ESLint installed, run:
+
+```sh
+# npm
+npm install eslint-plugin-react-hooks --save-dev
+
+# yarn
+yarn add eslint-plugin-react-hooks --dev
+```
+
+### Flat Config (eslint.config.js|ts)
+
+Add the `recommended` config for all recommended rules:
+
+```js
+// eslint.config.js
+import reactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  reactHooks.configs.flat.recommended,
+]);
+```
+
+If you want to try bleeding edge experimental compiler rules, use `recommended-latest`.
+
+```js
+// eslint.config.js
+import reactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  reactHooks.configs.flat['recommended-latest'],
+]);
+```
+
+### Legacy Config (.eslintrc)
+
+If you are still using ESLint below 9.0.0, the `recommended` preset can also be used to enable all recommended rules.
+
+```js
+{
+  "extends": ["plugin:react-hooks/recommended"],
+  // ...
+}
+
+```
+
+### Custom Configuration
+
+If you want more fine-grained configuration, you can instead choose to enable specific rules. However, we strongly encourage using the recommended presets — see above — so that you will automatically receive new recommended rules as we add them in future versions of the plugin.
+
+#### Flat Config (eslint.config.js|ts)
+
+```js
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+  {
+    files: ['**/*.{js,jsx}'],
+    plugins: { 'react-hooks': reactHooks },
+    // ...
+    rules: {
+      // Core hooks rules
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      // React Compiler rules
+      'react-hooks/config': 'error',
+      'react-hooks/error-boundaries': 'error',
+      'react-hooks/component-hook-factories': 'error',
+      'react-hooks/gating': 'error',
+      'react-hooks/globals': 'error',
+      'react-hooks/immutability': 'error',
+      'react-hooks/preserve-manual-memoization': 'error',
+      'react-hooks/purity': 'error',
+      'react-hooks/refs': 'error',
+      'react-hooks/set-state-in-effect': 'error',
+      'react-hooks/set-state-in-render': 'error',
+      'react-hooks/static-components': 'error',
+      'react-hooks/unsupported-syntax': 'warn',
+      'react-hooks/use-memo': 'error',
+      'react-hooks/incompatible-library': 'warn',
+    }
+  },
+];
+```
+
+#### Legacy Config (.eslintrc)
+```js
+{
+  "plugins": [
+    // ...
+    "react-hooks"
+  ],
+  "rules": {
+    // ...
+    // Core hooks rules
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+
+    // React Compiler rules
+    "react-hooks/config": "error",
+    "react-hooks/error-boundaries": "error",
+    "react-hooks/component-hook-factories": "error",
+    "react-hooks/gating": "error",
+    "react-hooks/globals": "error",
+    "react-hooks/immutability": "error",
+    "react-hooks/preserve-manual-memoization": "error",
+    "react-hooks/purity": "error",
+    "react-hooks/refs": "error",
+    "react-hooks/set-state-in-effect": "error",
+    "react-hooks/set-state-in-render": "error",
+    "react-hooks/static-components": "error",
+    "react-hooks/unsupported-syntax": "warn",
+    "react-hooks/use-memo": "error",
+    "react-hooks/incompatible-library": "warn"
+  }
+}
+```
+
+## Advanced Configuration
+
+`exhaustive-deps` can be configured to validate dependencies of custom Hooks with the `additionalHooks` option.
+This option accepts a regex to match the names of custom Hooks that have dependencies.
+
+```js
+{
+  rules: {
+    // ...
+    "react-hooks/exhaustive-deps": ["warn", {
+      additionalHooks: "(useMyCustomHook|useMyOtherCustomHook)"
+    }]
+  }
+}
+```
+
+We suggest to use this option **very sparingly, if at all**. Generally saying, we recommend most custom Hooks to not use the dependencies argument, and instead provide a higher-level API that is more focused around a specific use case.
+
+## Valid and Invalid Examples
+
+Please refer to the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks) documentation to learn more about this rule.
+
+## License
+
+MIT
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
new file mode 100644
index 00000000000..b479ce48521
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -0,0 +1,8762 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const ESLintTesterV7 = require('eslint-v7').RuleTester;
+const ESLintTesterV9 = require('eslint-v9').RuleTester;
+const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
+const ReactHooksESLintRule =
+  ReactHooksESLintPlugin.default.rules['exhaustive-deps'];
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+function normalizeIndent(strings) {
+  const codeLines = strings[0].split('\n');
+  const leftPadding = codeLines[1].match(/\s+/)[0];
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+// ***************************************************
+// For easier local testing, you can add to any case:
+// {
+//   skip: true,
+//   --or--
+//   only: true,
+//   ...
+// }
+// ***************************************************
+
+// Tests that are valid/invalid across all parsers
+const tests = {
+  valid: [
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect(() => {
+            const local = {};
+            console.log(local);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          useEffect(() => {
+            console.log(local);
+          }, [local]);
+        }
+      `,
+    },
+    {
+      // OK because `props` wasn't defined.
+      // We don't technically know if `props` is supposed
+      // to be an import that hasn't been added yet, or
+      // a component-level variable. Ignore it until it
+      //  gets defined (a different rule would flag it anyway).
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = {};
+          {
+            const local2 = {};
+            useEffect(() => {
+              console.log(local1);
+              console.log(local2);
+            });
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = someFunc();
+          {
+            const local2 = someFunc();
+            useCallback(() => {
+              console.log(local1);
+              console.log(local2);
+            }, [local1, local2]);
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = someFunc();
+          function MyNestedComponent() {
+            const local2 = someFunc();
+            useCallback(() => {
+              console.log(local1);
+              console.log(local2);
+            }, [local2]);
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          useEffect(() => {
+            console.log(local);
+            console.log(local);
+          }, [local]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect(() => {
+            console.log(unresolved);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          useEffect(() => {
+            console.log(local);
+          }, [,,,local,,,]);
+        }
+      `,
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent({ foo }) {
+          useEffect(() => {
+            console.log(foo.length);
+          }, [foo]);
+        }
+      `,
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent({ foo }) {
+          useEffect(() => {
+            console.log(foo.length);
+            console.log(foo.slice(0));
+          }, [foo]);
+        }
+      `,
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent({ history }) {
+          useEffect(() => {
+            return history.listen();
+          }, [history]);
+        }
+      `,
+    },
+    {
+      // Valid because they have meaning without deps.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {});
+          useLayoutEffect(() => {});
+          useImperativeHandle(props.innerRef, () => {});
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+          }, [props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, [props.bar, props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, [props.foo, props.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = someFunc();
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+            console.log(local);
+          }, [props.foo, props.bar, local]);
+        }
+      `,
+    },
+    {
+      // [props, props.foo] is technically unnecessary ('props' covers 'props.foo').
+      // However, it's valid for effects to over-specify their deps.
+      // So we don't warn about this. We *would* warn about useMemo/useCallback.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = {};
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, [props, props.foo]);
+
+          let color = someFunc();
+          useEffect(() => {
+            console.log(props.foo.bar.baz);
+            console.log(color);
+          }, [props.foo, props.foo.bar.baz, color]);
+        }
+      `,
+    },
+    // Nullish coalescing and optional chaining
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo?.bar?.baz ?? null);
+          }, [props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo?.bar);
+          }, [props.foo?.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo?.bar);
+          }, [props.foo.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo.bar);
+          }, [props.foo?.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo.bar);
+            console.log(props.foo?.bar);
+          }, [props.foo?.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo.bar);
+            console.log(props.foo?.bar);
+          }, [props.foo.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.foo?.bar);
+          }, [props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo?.toString());
+          }, [props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useMemo(() => {
+            console.log(props.foo?.toString());
+          }, [props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.toString());
+          }, [props.foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo.bar?.toString());
+          }, [props.foo.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.bar?.toString());
+          }, [props.foo.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo.bar.toString());
+          }, [props?.foo?.bar]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.bar?.baz);
+          }, [props?.foo.bar?.baz]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const myEffect = () => {
+            // Doesn't use anything
+          };
+          useEffect(myEffect, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        const local = {};
+        function MyComponent() {
+          const myEffect = () => {
+            console.log(local);
+          };
+          useEffect(myEffect, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        const local = {};
+        function MyComponent() {
+          function myEffect() {
+            console.log(local);
+          }
+          useEffect(myEffect, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          function myEffect() {
+            console.log(local);
+          }
+          useEffect(myEffect, [local]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          function myEffect() {
+            console.log(global);
+          }
+          useEffect(myEffect, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        const local = {};
+        function MyComponent() {
+          const myEffect = () => {
+            otherThing()
+          }
+          const otherThing = () => {
+            console.log(local);
+          }
+          useEffect(myEffect, []);
+        }
+      `,
+    },
+    {
+      // Valid because even though we don't inspect the function itself,
+      // at least it's passed as a dependency.
+      code: normalizeIndent`
+        function MyComponent({delay}) {
+          const local = {};
+          const myEffect = debounce(() => {
+            console.log(local);
+          }, delay);
+          useEffect(myEffect, [myEffect]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({myEffect}) {
+          useEffect(myEffect, [,myEffect]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({myEffect}) {
+          useEffect(myEffect, [,myEffect,,]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        let local = {};
+        function myEffect() {
+          console.log(local);
+        }
+        function MyComponent() {
+          useEffect(myEffect, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({myEffect}) {
+          useEffect(myEffect, [myEffect]);
+        }
+      `,
+    },
+    {
+      // Valid because has no deps.
+      code: normalizeIndent`
+        function MyComponent({myEffect}) {
+          useEffect(myEffect);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          });
+        }
+      `,
+      options: [{additionalHooks: 'useCustomEffect'}],
+    },
+    {
+      // behaves like no deps
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useSpecialEffect(() => {
+            console.log(props.foo);
+          }, null);
+        }
+      `,
+      options: [
+        {
+          additionalHooks: 'useSpecialEffect',
+          experimental_autoDependenciesHooks: ['useSpecialEffect'],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, [props.foo]);
+        }
+      `,
+      options: [{additionalHooks: 'useCustomEffect'}],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      options: [{additionalHooks: 'useAnotherEffect'}],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useWithoutEffectSuffix(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          return renderHelperConfusedWithEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+    },
+    {
+      // Valid because we don't care about hooks outside of components.
+      code: normalizeIndent`
+        const local = {};
+        useEffect(() => {
+          console.log(local);
+        }, []);
+      `,
+    },
+    {
+      // Valid because we don't care about hooks outside of components.
+      code: normalizeIndent`
+        const local1 = {};
+        {
+          const local2 = {};
+          useEffect(() => {
+            console.log(local1);
+            console.log(local2);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef();
+          useEffect(() => {
+            console.log(ref.current);
+          }, [ref]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef();
+          useEffect(() => {
+            console.log(ref.current);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ maybeRef2, foo }) {
+          const definitelyRef1 = useRef();
+          const definitelyRef2 = useRef();
+          const maybeRef1 = useSomeOtherRefyThing();
+          const [state1, setState1] = useState();
+          const [state2, setState2] = React.useState();
+          const [state3, dispatch1] = useReducer();
+          const [state4, dispatch2] = React.useReducer();
+          const [state5, maybeSetState] = useFunnyState();
+          const [state6, maybeDispatch] = useFunnyReducer();
+          const [state9, dispatch5] = useActionState();
+          const [state10, dispatch6] = React.useActionState();
+          const [isPending1] = useTransition();
+          const [isPending2, startTransition2] = useTransition();
+          const [isPending3] = React.useTransition();
+          const [isPending4, startTransition4] = React.useTransition();
+          const mySetState = useCallback(() => {}, []);
+          let myDispatch = useCallback(() => {}, []);
+
+          useEffect(() => {
+            // Known to be static
+            console.log(definitelyRef1.current);
+            console.log(definitelyRef2.current);
+            console.log(maybeRef1.current);
+            console.log(maybeRef2.current);
+            setState1();
+            setState2();
+            dispatch1();
+            dispatch2();
+            dispatch5();
+            dispatch6();
+            startTransition1();
+            startTransition2();
+            startTransition3();
+            startTransition4();
+
+            // Dynamic
+            console.log(state1);
+            console.log(state2);
+            console.log(state3);
+            console.log(state4);
+            console.log(state5);
+            console.log(state6);
+            console.log(isPending2);
+            console.log(isPending4);
+            mySetState();
+            myDispatch();
+
+            // Not sure; assume dynamic
+            maybeSetState();
+            maybeDispatch();
+          }, [
+            // Dynamic
+            state1, state2, state3, state4, state5, state6, state9, state10,
+            maybeRef1, maybeRef2,
+            isPending2, isPending4,
+
+            // Not sure; assume dynamic
+            mySetState, myDispatch,
+            maybeSetState, maybeDispatch
+
+            // In this test, we don't specify static deps.
+            // That should be okay.
+          ]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ maybeRef2 }) {
+          const definitelyRef1 = useRef();
+          const definitelyRef2 = useRef();
+          const maybeRef1 = useSomeOtherRefyThing();
+
+          const [state1, setState1] = useState();
+          const [state2, setState2] = React.useState();
+          const [state3, dispatch1] = useReducer();
+          const [state4, dispatch2] = React.useReducer();
+
+          const [state5, maybeSetState] = useFunnyState();
+          const [state6, maybeDispatch] = useFunnyReducer();
+
+          const mySetState = useCallback(() => {}, []);
+          let myDispatch = useCallback(() => {}, []);
+
+          useEffect(() => {
+            // Known to be static
+            console.log(definitelyRef1.current);
+            console.log(definitelyRef2.current);
+            console.log(maybeRef1.current);
+            console.log(maybeRef2.current);
+            setState1();
+            setState2();
+            dispatch1();
+            dispatch2();
+
+            // Dynamic
+            console.log(state1);
+            console.log(state2);
+            console.log(state3);
+            console.log(state4);
+            console.log(state5);
+            console.log(state6);
+            mySetState();
+            myDispatch();
+
+            // Not sure; assume dynamic
+            maybeSetState();
+            maybeDispatch();
+          }, [
+            // Dynamic
+            state1, state2, state3, state4, state5, state6,
+            maybeRef1, maybeRef2,
+
+            // Not sure; assume dynamic
+            mySetState, myDispatch,
+            maybeSetState, maybeDispatch,
+
+            // In this test, we specify static deps.
+            // That should be okay too!
+            definitelyRef1, definitelyRef2, setState1, setState2, dispatch1, dispatch2
+          ]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        const MyComponent = forwardRef((props, ref) => {
+          useImperativeHandle(ref, () => ({
+            focus() {
+              alert(props.hello);
+            }
+          }))
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        const MyComponent = forwardRef((props, ref) => {
+          useImperativeHandle(ref, () => ({
+            focus() {
+              alert(props.hello);
+            }
+          }), [props.hello])
+        });
+      `,
+    },
+    {
+      // This is not ideal but warning would likely create
+      // too many false positives. We do, however, prevent
+      // direct assignments.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let obj = someFunc();
+          useEffect(() => {
+            obj.foo = true;
+          }, [obj]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let foo = {}
+          useEffect(() => {
+            foo.bar.baz = 43;
+          }, [foo.bar]);
+        }
+      `,
+    },
+    {
+      // Valid because we assign ref.current
+      // ourselves. Therefore it's likely not
+      // a ref managed by React.
+      code: normalizeIndent`
+        function MyComponent() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef.current = {};
+            return () => {
+              console.log(myRef.current.toString())
+            };
+          }, []);
+          return <div />;
+        }
+      `,
+    },
+    {
+      // Valid because we assign ref.current
+      // ourselves. Therefore it's likely not
+      // a ref managed by React.
+      code: normalizeIndent`
+        function MyComponent() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef.current = {};
+            return () => {
+              console.log(myRef?.current?.toString())
+            };
+          }, []);
+          return <div />;
+        }
+      `,
+    },
+    {
+      // Valid because we assign ref.current
+      // ourselves. Therefore it's likely not
+      // a ref managed by React.
+      code: normalizeIndent`
+        function useMyThing(myRef) {
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef.current = {};
+            return () => {
+              console.log(myRef.current.toString())
+            };
+          }, [myRef]);
+        }
+      `,
+    },
+    {
+      // Valid because the ref is captured.
+      code: normalizeIndent`
+        function MyComponent() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {};
+            const node = myRef.current;
+            node.addEventListener('mousemove', handleMove);
+            return () => node.removeEventListener('mousemove', handleMove);
+          }, []);
+          return <div ref={myRef} />;
+        }
+      `,
+    },
+    {
+      // Valid because the ref is captured.
+      code: normalizeIndent`
+        function useMyThing(myRef) {
+          useEffect(() => {
+            const handleMove = () => {};
+            const node = myRef.current;
+            node.addEventListener('mousemove', handleMove);
+            return () => node.removeEventListener('mousemove', handleMove);
+          }, [myRef]);
+          return <div ref={myRef} />;
+        }
+      `,
+    },
+    {
+      // Valid because it's not an effect.
+      code: normalizeIndent`
+        function useMyThing(myRef) {
+          useCallback(() => {
+            const handleMouse = () => {};
+            myRef.current.addEventListener('mousemove', handleMouse);
+            myRef.current.addEventListener('mousein', handleMouse);
+            return function() {
+              setTimeout(() => {
+                myRef.current.removeEventListener('mousemove', handleMouse);
+                myRef.current.removeEventListener('mousein', handleMouse);
+              });
+            }
+          }, [myRef]);
+        }
+      `,
+    },
+    {
+      // Valid because we read ref.current in a function that isn't cleanup.
+      code: normalizeIndent`
+        function useMyThing() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {
+              console.log(myRef.current)
+            };
+            window.addEventListener('mousemove', handleMove);
+            return () => window.removeEventListener('mousemove', handleMove);
+          }, []);
+          return <div ref={myRef} />;
+        }
+      `,
+    },
+    {
+      // Valid because we read ref.current in a function that isn't cleanup.
+      code: normalizeIndent`
+        function useMyThing() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {
+              return () => window.removeEventListener('mousemove', handleMove);
+            };
+            window.addEventListener('mousemove', handleMove);
+            return () => {};
+          }, []);
+          return <div ref={myRef} />;
+        }
+      `,
+    },
+    {
+      // Valid because it's a primitive constant.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = 42;
+          const local2 = '42';
+          const local3 = null;
+          useEffect(() => {
+            console.log(local1);
+            console.log(local2);
+            console.log(local3);
+          }, []);
+        }
+      `,
+    },
+    {
+      // It's not a mistake to specify constant values though.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = 42;
+          const local2 = '42';
+          const local3 = null;
+          useEffect(() => {
+            console.log(local1);
+            console.log(local2);
+            console.log(local3);
+          }, [local1, local2, local3]);
+        }
+      `,
+    },
+    {
+      // It is valid for effects to over-specify their deps.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = props.local;
+          useEffect(() => {}, [local]);
+        }
+      `,
+    },
+    {
+      // Valid even though activeTab is "unused".
+      // We allow over-specifying deps for effects, but not callbacks or memo.
+      code: normalizeIndent`
+        function Foo({ activeTab }) {
+          useEffect(() => {
+            window.scrollTo(0, 0);
+          }, [activeTab]);
+        }
+      `,
+    },
+    {
+      // It is valid to specify broader effect deps than strictly necessary.
+      // Don't warn for this.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo.bar.baz);
+          }, [props]);
+          useEffect(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo]);
+          useEffect(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo.bar]);
+          useEffect(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo.bar.baz]);
+        }
+      `,
+    },
+    {
+      // It is *also* valid to specify broader memo/callback deps than strictly necessary.
+      // Don't warn for this either.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const fn = useCallback(() => {
+            console.log(props.foo.bar.baz);
+          }, [props]);
+          const fn2 = useCallback(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo]);
+          const fn3 = useMemo(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo.bar]);
+          const fn4 = useMemo(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo.bar.baz]);
+        }
+      `,
+    },
+    {
+      // Declaring handleNext is optional because
+      // it doesn't use anything in the function scope.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          function handleNext1() {
+            console.log('hello');
+          }
+          const handleNext2 = () => {
+            console.log('hello');
+          };
+          let handleNext3 = function() {
+            console.log('hello');
+          };
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+          }, []);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext2);
+          }, []);
+          useMemo(() => {
+            return Store.subscribe(handleNext3);
+          }, []);
+        }
+      `,
+    },
+    {
+      // Declaring handleNext is optional because
+      // it doesn't use anything in the function scope.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          function handleNext() {
+            console.log('hello');
+          }
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, []);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext);
+          }, []);
+          useMemo(() => {
+            return Store.subscribe(handleNext);
+          }, []);
+        }
+      `,
+    },
+    {
+      // Declaring handleNext is optional because
+      // everything they use is fully static.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+          let [, dispatch] = React.useReducer();
+
+          function handleNext1(value) {
+            let value2 = value * 100;
+            setState(value2);
+            console.log('hello');
+          }
+          const handleNext2 = (value) => {
+            setState(foo(value));
+            console.log('hello');
+          };
+          let handleNext3 = function(value) {
+            console.log(value);
+            dispatch({ type: 'x', value });
+          };
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+          }, []);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext2);
+          }, []);
+          useMemo(() => {
+            return Store.subscribe(handleNext3);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useInterval(callback, delay) {
+          const savedCallback = useRef();
+          useEffect(() => {
+            savedCallback.current = callback;
+          });
+          useEffect(() => {
+            function tick() {
+              savedCallback.current();
+            }
+            if (delay !== null) {
+              let id = setInterval(tick, delay);
+              return () => clearInterval(id);
+            }
+          }, [delay]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          const [count, setCount] = useState(0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(c => c + 1);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter(unstableProp) {
+          let [count, setCount] = useState(0);
+          setCount = unstableProp
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(c => c + 1);
+            }, 1000);
+            return () => clearInterval(id);
+          }, [setCount]);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          const [count, setCount] = useState(0);
+
+          function tick() {
+            setCount(c => c + 1);
+          }
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              tick();
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          const [count, dispatch] = useReducer((state, action) => {
+            if (action === 'inc') {
+              return state + 1;
+            }
+          }, 0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              dispatch('inc');
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          const [count, dispatch] = useReducer((state, action) => {
+            if (action === 'inc') {
+              return state + 1;
+            }
+          }, 0);
+
+          const tick = () => {
+            dispatch('inc');
+          };
+
+          useEffect(() => {
+            let id = setInterval(tick, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      // Regression test for a crash
+      code: normalizeIndent`
+        function Podcasts() {
+          useEffect(() => {
+            setPodcasts([]);
+          }, []);
+          let [podcasts, setPodcasts] = useState(null);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function withFetch(fetchPodcasts) {
+          return function Podcasts({ id }) {
+            let [podcasts, setPodcasts] = useState(null);
+            useEffect(() => {
+              fetchPodcasts(id).then(setPodcasts);
+            }, [id]);
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Podcasts({ id }) {
+          let [podcasts, setPodcasts] = useState(null);
+          useEffect(() => {
+            function doFetch({ fetchPodcasts }) {
+              fetchPodcasts(id).then(setPodcasts);
+            }
+            doFetch({ fetchPodcasts: API.fetchPodcasts });
+          }, [id]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          let [count, setCount] = useState(0);
+
+          function increment(x) {
+            return x + 1;
+          }
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(increment);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          let [count, setCount] = useState(0);
+
+          function increment(x) {
+            return x + 1;
+          }
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => increment(count));
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import increment from './increment';
+        function Counter() {
+          let [count, setCount] = useState(0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => count + increment);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function withStuff(increment) {
+          return function Counter() {
+            let [count, setCount] = useState(0);
+
+            useEffect(() => {
+              let id = setInterval(() => {
+                setCount(count => count + increment);
+              }, 1000);
+              return () => clearInterval(id);
+            }, []);
+
+            return <h1>{count}</h1>;
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const [query, setQuery] = useState('react');
+          const [state, setState] = useState(null);
+          useEffect(() => {
+            let ignore = false;
+            fetchSomething();
+            async function fetchSomething() {
+              const result = await (await fetch('http://hn.algolia.com/api/v1/search?query=' + query)).json();
+              if (!ignore) setState(result);
+            }
+            return () => { ignore = true; };
+          }, [query]);
+          return (
+            <>
+              <input value={query} onChange={e => setQuery(e.target.value)} />
+              {JSON.stringify(state)}
+            </>
+          );
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Example() {
+          const foo = useCallback(() => {
+            foo();
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Example({ prop }) {
+          const foo = useCallback(() => {
+            if (prop) {
+              foo();
+            }
+          }, [prop]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Hello() {
+          const [state, setState] = useState(0);
+          useEffect(() => {
+            const handleResize = () => setState(window.innerWidth);
+            window.addEventListener('resize', handleResize);
+            return () => window.removeEventListener('resize', handleResize);
+          });
+        }
+      `,
+    },
+    // Ignore arguments keyword for arrow functions.
+    {
+      code: normalizeIndent`
+        function Example() {
+          useEffect(() => {
+            arguments
+          }, [])
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Example() {
+          useEffect(() => {
+            const bar = () => {
+              arguments;
+            };
+            bar();
+          }, [])
+        }
+      `,
+    },
+    // Regression test.
+    {
+      code: normalizeIndent`
+        function Example(props) {
+          useEffect(() => {
+            let topHeight = 0;
+            topHeight = props.upperViewHeight;
+          }, [props.upperViewHeight]);
+        }
+      `,
+    },
+    // Regression test.
+    {
+      code: normalizeIndent`
+        function Example(props) {
+          useEffect(() => {
+            let topHeight = 0;
+            topHeight = props?.upperViewHeight;
+          }, [props?.upperViewHeight]);
+        }
+      `,
+    },
+    // Regression test.
+    {
+      code: normalizeIndent`
+        function Example(props) {
+          useEffect(() => {
+            let topHeight = 0;
+            topHeight = props?.upperViewHeight;
+          }, [props]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useFoo(foo){
+          return useMemo(() => foo, [foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useFoo(){
+          const foo = "hi!";
+          return useMemo(() => foo, [foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useFoo(){
+          let {foo} = {foo: 1};
+          return useMemo(() => foo, [foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useFoo(){
+          let [foo] = [1];
+          return useMemo(() => foo, [foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useFoo() {
+          const foo = "fine";
+          if (true) {
+            // Shadowed variable with constant construction in a nested scope is fine.
+            const foo = {};
+          }
+          return useMemo(() => foo, [foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({foo}) {
+          return useMemo(() => foo, [foo])
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const foo = true ? "fine" : "also fine";
+          return useMemo(() => foo, [foo]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect(() => {
+            console.log('banana banana banana');
+          }, undefined);
+        }
+      `,
+    },
+    {
+      // Test settings-based additionalHooks - should work with settings
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          });
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: 'useCustomEffect',
+        },
+      },
+    },
+    {
+      // Test settings-based additionalHooks - should work with dependencies
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, [props.foo]);
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: 'useCustomEffect',
+        },
+      },
+    },
+    {
+      // Test that rule-level additionalHooks takes precedence over settings
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      options: [{additionalHooks: 'useAnotherEffect'}],
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: 'useCustomEffect',
+        },
+      },
+    },
+    {
+      // Test settings with multiple hooks pattern
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, [props.foo]);
+          useAnotherEffect(() => {
+            console.log(props.bar);
+          }, [props.bar]);
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: '(useCustomEffect|useAnotherEffect)',
+        },
+      },
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ theme }) {
+          const onStuff = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useEffect(() => {
+            onStuff();
+          }, []);
+          React.useEffect(() => {
+            onStuff();
+          }, []);
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useSpecialEffect(() => {
+            console.log(props.foo);
+          }, null);
+        }
+      `,
+      options: [{additionalHooks: 'useSpecialEffect'}],
+      errors: [
+        {
+          message:
+            "React Hook useSpecialEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.",
+        },
+        {
+          message:
+            "React Hook useSpecialEffect has a missing dependency: 'props.foo'. Either include it or remove the dependency array.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useSpecialEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.toString());
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCallback(() => {
+                    console.log(props.foo?.toString());
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Affected code should use React.useActionState instead
+      code: normalizeIndent`
+        function ComponentUsingFormState(props) {
+          const [state7, dispatch3] = useFormState();
+          const [state8, dispatch4] = ReactDOM.useFormState();
+          useEffect(() => {
+            dispatch3();
+            dispatch4();
+
+            // dynamic
+            console.log(state7);
+            console.log(state8);
+
+          }, [state7, state8]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'dispatch3' and 'dispatch4'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [dispatch3, dispatch4, state7, state8]',
+              output: normalizeIndent`
+                function ComponentUsingFormState(props) {
+                  const [state7, dispatch3] = useFormState();
+                  const [state8, dispatch4] = ReactDOM.useFormState();
+                  useEffect(() => {
+                    dispatch3();
+                    dispatch4();
+
+                    // dynamic
+                    console.log(state7);
+                    console.log(state8);
+
+                  }, [dispatch3, dispatch4, state7, state8]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.bar.baz);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo?.bar.baz'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo?.bar.baz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCallback(() => {
+                    console.log(props.foo?.bar.baz);
+                  }, [props.foo?.bar.baz]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.bar?.baz);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo?.bar?.baz'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo?.bar?.baz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCallback(() => {
+                    console.log(props.foo?.bar?.baz);
+                  }, [props.foo?.bar?.baz]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.bar.toString());
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo?.bar'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo?.bar]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCallback(() => {
+                    console.log(props.foo?.bar.toString());
+                  }, [props.foo?.bar]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          useEffect(() => {
+            console.log(local);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = someFunc();
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter(unstableProp) {
+          let [count, setCount] = useState(0);
+          setCount = unstableProp
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(c => c + 1);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'setCount'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [setCount]',
+              output: normalizeIndent`
+                function Counter(unstableProp) {
+                  let [count, setCount] = useState(0);
+                  setCount = unstableProp
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(c => c + 1);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [setCount]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Note: we *could* detect it's a primitive and never assigned
+      // even though it's not a constant -- but we currently don't.
+      // So this is an error.
+      code: normalizeIndent`
+        function MyComponent() {
+          let local = 42;
+          useEffect(() => {
+            console.log(local);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  let local = 42;
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Regexes are literals but potentially stateful.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = /foo/;
+          useEffect(() => {
+            console.log(local);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = /foo/;
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Invalid because they don't have a meaning without deps.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const value = useMemo(() => { return 2*2; });
+          const fn = useCallback(() => { alert('foo'); });
+        }
+      `,
+      // We don't know what you meant.
+      errors: [
+        {
+          message:
+            'React Hook useMemo does nothing when called with only one argument. ' +
+            'Did you forget to pass an array of dependencies?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'React Hook useCallback does nothing when called with only one argument. ' +
+            'Did you forget to pass an array of dependencies?',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      // Invalid because they don't have a meaning without deps.
+      code: normalizeIndent`
+        function MyComponent({ fn1, fn2 }) {
+          const value = useMemo(fn1);
+          const fn = useCallback(fn2);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useMemo does nothing when called with only one argument. ' +
+            'Did you forget to pass an array of dependencies?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'React Hook useCallback does nothing when called with only one argument. ' +
+            'Did you forget to pass an array of dependencies?',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect()
+          useLayoutEffect()
+          useCallback()
+          useMemo()
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect requires an effect callback. ' +
+            'Did you forget to pass a callback to the hook?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'React Hook useLayoutEffect requires an effect callback. ' +
+            'Did you forget to pass a callback to the hook?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'React Hook useCallback requires an effect callback. ' +
+            'Did you forget to pass a callback to the hook?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'React Hook useMemo requires an effect callback. ' +
+            'Did you forget to pass a callback to the hook?',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          useEffect(() => {
+            if (true) {
+              console.log(local);
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = someFunc();
+                  useEffect(() => {
+                    if (true) {
+                      console.log(local);
+                    }
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            try {
+              console.log(local);
+            } finally {}
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    try {
+                      console.log(local);
+                    } finally {}
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            function inner() {
+              console.log(local);
+            }
+            inner();
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    function inner() {
+                      console.log(local);
+                    }
+                    inner();
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = someFunc();
+          {
+            const local2 = someFunc();
+            useEffect(() => {
+              console.log(local1);
+              console.log(local2);
+            }, []);
+          }
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'local1' and 'local2'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1, local2]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = someFunc();
+                  {
+                    const local2 = someFunc();
+                    useEffect(() => {
+                      console.log(local1);
+                      console.log(local2);
+                    }, [local1, local2]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = {};
+          const local2 = {};
+          useEffect(() => {
+            console.log(local1);
+            console.log(local2);
+          }, [local1]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1, local2]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  const local2 = {};
+                  useEffect(() => {
+                    console.log(local1);
+                    console.log(local2);
+                  }, [local1, local2]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = {};
+          const local2 = {};
+          useMemo(() => {
+            console.log(local1);
+          }, [local1, local2]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useMemo has an unnecessary dependency: 'local2'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  const local2 = {};
+                  useMemo(() => {
+                    console.log(local1);
+                  }, [local1]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = someFunc();
+          function MyNestedComponent() {
+            const local2 = {};
+            useCallback(() => {
+              console.log(local1);
+              console.log(local2);
+            }, [local1]);
+          }
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'local2'. " +
+            'Either include it or remove the dependency array. ' +
+            "Outer scope values like 'local1' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local2]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = someFunc();
+                  function MyNestedComponent() {
+                    const local2 = {};
+                    useCallback(() => {
+                      console.log(local1);
+                      console.log(local2);
+                    }, [local2]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+            console.log(local);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+            console.log(local);
+          }, [local, local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a duplicate dependency: 'local'. " +
+            'Either omit it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useCallback(() => {}, [window]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'window'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Outer scope values like 'window' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  useCallback(() => {}, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // It is not valid for useCallback to specify extraneous deps
+      // because it doesn't serve as a side effect trigger unlike useEffect.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let local = props.foo;
+          useCallback(() => {}, [local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let local = props.foo;
+                  useCallback(() => {}, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ history }) {
+          useEffect(() => {
+            return history.listen();
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'history'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [history]',
+              output: normalizeIndent`
+                function MyComponent({ history }) {
+                  useEffect(() => {
+                    return history.listen();
+                  }, [history]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ history }) {
+          useEffect(() => {
+            return [
+              history.foo.bar[2].dobedo.listen(),
+              history.foo.bar().dobedo.listen[2]
+            ];
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'history.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [history.foo]',
+              output: normalizeIndent`
+                function MyComponent({ history }) {
+                  useEffect(() => {
+                    return [
+                      history.foo.bar[2].dobedo.listen(),
+                      history.foo.bar().dobedo.listen[2]
+                    ];
+                  }, [history.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ history }) {
+          useEffect(() => {
+            return [
+              history?.foo
+            ];
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'history?.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [history?.foo]',
+              output: normalizeIndent`
+                function MyComponent({ history }) {
+                  useEffect(() => {
+                    return [
+                      history?.foo
+                    ];
+                  }, [history?.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect(() => {}, ['foo']);
+        }
+      `,
+      errors: [
+        {
+          message:
+            // Don't assume user meant `foo` because it's not used in the effect.
+            "The 'foo' literal is not a valid dependency because it never changes. " +
+            'You can safely remove it.',
+          // TODO: provide suggestion.
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ foo, bar, baz }) {
+          useEffect(() => {
+            console.log(foo, bar, baz);
+          }, ['foo', 'bar']);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [bar, baz, foo]',
+              output: normalizeIndent`
+                function MyComponent({ foo, bar, baz }) {
+                  useEffect(() => {
+                    console.log(foo, bar, baz);
+                  }, [bar, baz, foo]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'foo' literal is not a valid dependency because it never changes. " +
+            'Did you mean to include foo in the array instead?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'bar' literal is not a valid dependency because it never changes. " +
+            'Did you mean to include bar in the array instead?',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ foo, bar, baz }) {
+          useEffect(() => {
+            console.log(foo, bar, baz);
+          }, [42, false, null]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [bar, baz, foo]',
+              output: normalizeIndent`
+                function MyComponent({ foo, bar, baz }) {
+                  useEffect(() => {
+                    console.log(foo, bar, baz);
+                  }, [bar, baz, foo]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'The 42 literal is not a valid dependency because it never changes. You can safely remove it.',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'The false literal is not a valid dependency because it never changes. You can safely remove it.',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'The null literal is not a valid dependency because it never changes. You can safely remove it.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const dependencies = [];
+          useEffect(() => {}, dependencies);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect was passed a dependency list that is not an ' +
+            "array literal. This means we can't statically verify whether you've " +
+            'passed the correct dependencies.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const dependencies = [local];
+          useEffect(() => {
+            console.log(local);
+          }, dependencies);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect was passed a dependency list that is not an ' +
+            "array literal. This means we can't statically verify whether you've " +
+            'passed the correct dependencies.',
+          // TODO: should this autofix or bail out?
+          suggestions: undefined,
+        },
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const dependencies = [local];
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const dependencies = [local];
+          useEffect(() => {
+            console.log(local);
+          }, [...dependencies]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const dependencies = [local];
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a spread element in its dependency array. ' +
+            "This means we can't statically verify whether you've passed the " +
+            'correct dependencies.',
+          // TODO: should this autofix or bail out?
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = someFunc();
+          useEffect(() => {
+            console.log(local);
+          }, [local, ...dependencies]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has a spread element in its dependency array. ' +
+            "This means we can't statically verify whether you've passed the " +
+            'correct dependencies.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          }, [computeCacheKey(local)]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          // TODO: I'm not sure this is a good idea.
+          // Maybe bail out?
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.items[0]);
+          }, [props.items[0]]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.items'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.items]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.items[0]);
+                  }, [props.items]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.items[0]);
+          }, [props.items, props.items[0]]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          // TODO: ideally suggestion would remove the bad expression?
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ items }) {
+          useEffect(() => {
+            console.log(items[0]);
+          }, [items[0]]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'items'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [items]',
+              output: normalizeIndent`
+                function MyComponent({ items }) {
+                  useEffect(() => {
+                    console.log(items[0]);
+                  }, [items]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ items }) {
+          useEffect(() => {
+            console.log(items[0]);
+          }, [items, items[0]]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          // TODO: ideally suggeston would remove the bad expression?
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      // It is not valid for useCallback to specify extraneous deps
+      // because it doesn't serve as a side effect trigger unlike useEffect.
+      // However, we generally allow specifying *broader* deps as escape hatch.
+      // So while [props, props.foo] is unnecessary, 'props' wins here as the
+      // broader one, and this is why 'props.foo' is reported as unnecessary.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = {};
+          useCallback(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, [props, props.foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'props.foo'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useCallback(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Since we don't have 'props' in the list, we'll suggest narrow dependencies.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = {};
+          useCallback(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has missing dependencies: 'props.bar' and 'props.foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.bar, props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useCallback(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                  }, [props.bar, props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Effects are allowed to over-specify deps. We'll complain about missing
+      // 'local', but we won't remove the already-specified 'local.id' from your list.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {id: 42};
+          useEffect(() => {
+            console.log(local);
+          }, [local.id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local, local.id]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {id: 42};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local, local.id]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Callbacks are not allowed to over-specify deps. So we'll complain about missing
+      // 'local' and we will also *remove* 'local.id' from your list.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {id: 42};
+          const fn = useCallback(() => {
+            console.log(local);
+          }, [local.id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {id: 42};
+                  const fn = useCallback(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Callbacks are not allowed to over-specify deps. So we'll complain about
+      // the unnecessary 'local.id'.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {id: 42};
+          const fn = useCallback(() => {
+            console.log(local);
+          }, [local.id, local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local.id'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {id: 42};
+                  const fn = useCallback(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const fn = useCallback(() => {
+            console.log(props.foo.bar.baz);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo.bar.baz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                  }, [props.foo.bar.baz]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let color = {}
+          const fn = useCallback(() => {
+            console.log(props.foo.bar.baz);
+            console.log(color);
+          }, [props.foo, props.foo.bar.baz]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'color'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [color, props.foo.bar.baz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let color = {}
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                    console.log(color);
+                  }, [color, props.foo.bar.baz]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Callbacks are not allowed to over-specify deps. So one of these is extra.
+      // However, it *is* allowed to specify broader deps then strictly necessary.
+      // So in this case we ask you to remove 'props.foo.bar.baz' because 'props.foo'
+      // already covers it, and having both is unnecessary.
+      // TODO: maybe consider suggesting a narrower one by default in these cases.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const fn = useCallback(() => {
+            console.log(props.foo.bar.baz);
+          }, [props.foo.bar.baz, props.foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'props.foo.bar.baz'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const fn = useCallback(() => {
+            console.log(props.foo.bar.baz);
+            console.log(props.foo.fizz.bizz);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has missing dependencies: 'props.foo.bar.baz' and 'props.foo.fizz.bizz'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo.bar.baz, props.foo.fizz.bizz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                    console.log(props.foo.fizz.bizz);
+                  }, [props.foo.bar.baz, props.foo.fizz.bizz]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Normally we allow specifying deps too broadly.
+      // So we'd be okay if 'props.foo.bar' was there rather than 'props.foo.bar.baz'.
+      // However, 'props.foo.bar.baz' is missing. So we know there is a mistake.
+      // When we're sure there is a mistake, for callbacks we will rebuild the list
+      // from scratch. This will set the user on a better path by default.
+      // This is why we end up with just 'props.foo.bar', and not them both.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const fn = useCallback(() => {
+            console.log(props.foo.bar);
+          }, [props.foo.bar.baz]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo.bar'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo.bar]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar);
+                  }, [props.foo.bar]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const fn = useCallback(() => {
+            console.log(props);
+            console.log(props.hello);
+          }, [props.foo.bar.baz]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props);
+                    console.log(props.hello);
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          }, [local, local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a duplicate dependency: 'local'. " +
+            'Either omit it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = {};
+          useCallback(() => {
+            const local1 = {};
+            console.log(local1);
+          }, [local1]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local1'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  useCallback(() => {
+                    const local1 = {};
+                    console.log(local1);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = {};
+          useCallback(() => {}, [local1]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local1'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  useCallback(() => {}, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'props.bar' and 'props.foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.bar, props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                  }, [props.bar, props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let a, b, c, d, e, f, g;
+          useEffect(() => {
+            console.log(b, e, d, c, a, g, f);
+          }, [c, a, g]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +
+            'Either include them or remove the dependency array.',
+          // Don't alphabetize if it wasn't alphabetized in the first place.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [c, a, g, b, e, d, f]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let a, b, c, d, e, f, g;
+                  useEffect(() => {
+                    console.log(b, e, d, c, a, g, f);
+                  }, [c, a, g, b, e, d, f]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let a, b, c, d, e, f, g;
+          useEffect(() => {
+            console.log(b, e, d, c, a, g, f);
+          }, [a, c, g]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +
+            'Either include them or remove the dependency array.',
+          // Alphabetize if it was alphabetized.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [a, b, c, d, e, f, g]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let a, b, c, d, e, f, g;
+                  useEffect(() => {
+                    console.log(b, e, d, c, a, g, f);
+                  }, [a, b, c, d, e, f, g]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let a, b, c, d, e, f, g;
+          useEffect(() => {
+            console.log(b, e, d, c, a, g, f);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'a', 'b', 'c', 'd', 'e', 'f', and 'g'. " +
+            'Either include them or remove the dependency array.',
+          // Alphabetize if it was empty.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [a, b, c, d, e, f, g]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let a, b, c, d, e, f, g;
+                  useEffect(() => {
+                    console.log(b, e, d, c, a, g, f);
+                  }, [a, b, c, d, e, f, g]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = {};
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+            console.log(local);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'local', 'props.bar', and 'props.foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local, props.bar, props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                    console.log(local);
+                  }, [local, props.bar, props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local = {};
+          useEffect(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+            console.log(local);
+          }, [props]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local, props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                    console.log(local);
+                  }, [local, props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+          }, []);
+          useCallback(() => {
+            console.log(props.foo);
+          }, []);
+          useMemo(() => {
+            console.log(props.foo);
+          }, []);
+          React.useEffect(() => {
+            console.log(props.foo);
+          }, []);
+          React.useCallback(() => {
+            console.log(props.foo);
+          }, []);
+          React.useMemo(() => {
+            console.log(props.foo);
+          }, []);
+          React.notReactiveHook(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useCallback has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useMemo has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, []);
+          useEffect(() => {
+            console.log(props.foo);
+          }, []);
+          React.useEffect(() => {
+            console.log(props.foo);
+          }, []);
+          React.useCustomEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      options: [{additionalHooks: 'useCustomEffect'}],
+      errors: [
+        {
+          message:
+            "React Hook useCustomEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Test settings-based additionalHooks - should detect missing dependency
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: 'useCustomEffect',
+        },
+      },
+      errors: [
+        {
+          message:
+            "React Hook useCustomEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          }, [a ? local : b]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          // TODO: should we bail out instead?
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          }, [a && local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          // TODO: should we bail out instead?
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {}, [props?.attribute.method()]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {}, [props.method()]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef();
+          const [state, setState] = useState();
+          useEffect(() => {
+            ref.current = {};
+            setState(state + 1);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [state]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  const [state, setState] = useState();
+                  useEffect(() => {
+                    ref.current = {};
+                    setState(state + 1);
+                  }, [state]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef();
+          const [state, setState] = useState();
+          useEffect(() => {
+            ref.current = {};
+            setState(state + 1);
+          }, [ref]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          // We don't ask to remove static deps but don't add them either.
+          // Don't suggest removing "ref" (it's fine either way)
+          // but *do* add "state". *Don't* add "setState" ourselves.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [ref, state]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  const [state, setState] = useState();
+                  useEffect(() => {
+                    ref.current = {};
+                    setState(state + 1);
+                  }, [ref, state]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const ref1 = useRef();
+          const ref2 = useRef();
+          useEffect(() => {
+            ref1.current.focus();
+            console.log(ref2.current.textContent);
+            alert(props.someOtherRefs.current.innerHTML);
+            fetch(props.color);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'props.color' and 'props.someOtherRefs'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.color, props.someOtherRefs]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1.current.focus();
+                    console.log(ref2.current.textContent);
+                    alert(props.someOtherRefs.current.innerHTML);
+                    fetch(props.color);
+                  }, [props.color, props.someOtherRefs]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const ref1 = useRef();
+          const ref2 = useRef();
+          useEffect(() => {
+            ref1.current.focus();
+            console.log(ref2.current.textContent);
+            alert(props.someOtherRefs.current.innerHTML);
+            fetch(props.color);
+          }, [ref1.current, ref2.current, props.someOtherRefs, props.color]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.someOtherRefs, props.color]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1.current.focus();
+                    console.log(ref2.current.textContent);
+                    alert(props.someOtherRefs.current.innerHTML);
+                    fetch(props.color);
+                  }, [props.someOtherRefs, props.color]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const ref1 = useRef();
+          const ref2 = useRef();
+          useEffect(() => {
+            ref1?.current?.focus();
+            console.log(ref2?.current?.textContent);
+            alert(props.someOtherRefs.current.innerHTML);
+            fetch(props.color);
+          }, [ref1?.current, ref2?.current, props.someOtherRefs, props.color]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.someOtherRefs, props.color]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1?.current?.focus();
+                    console.log(ref2?.current?.textContent);
+                    alert(props.someOtherRefs.current.innerHTML);
+                    fetch(props.color);
+                  }, [props.someOtherRefs, props.color]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef();
+          useEffect(() => {
+            console.log(ref.current);
+          }, [ref.current]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Mutable values like 'ref.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  useEffect(() => {
+                    console.log(ref.current);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ activeTab }) {
+          const ref1 = useRef();
+          const ref2 = useRef();
+          useEffect(() => {
+            ref1.current.scrollTop = 0;
+            ref2.current.scrollTop = 0;
+          }, [ref1.current, ref2.current, activeTab]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [activeTab]',
+              output: normalizeIndent`
+                function MyComponent({ activeTab }) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1.current.scrollTop = 0;
+                    ref2.current.scrollTop = 0;
+                  }, [activeTab]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ activeTab, initY }) {
+          const ref1 = useRef();
+          const ref2 = useRef();
+          const fn = useCallback(() => {
+            ref1.current.scrollTop = initY;
+            ref2.current.scrollTop = initY;
+          }, [ref1.current, ref2.current, activeTab, initY]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has unnecessary dependencies: 'activeTab', 'ref1.current', and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [initY]',
+              output: normalizeIndent`
+                function MyComponent({ activeTab, initY }) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  const fn = useCallback(() => {
+                    ref1.current.scrollTop = initY;
+                    ref2.current.scrollTop = initY;
+                  }, [initY]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef();
+          useEffect(() => {
+            console.log(ref.current);
+          }, [ref.current, ref]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Mutable values like 'ref.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [ref]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  useEffect(() => {
+                    console.log(ref.current);
+                  }, [ref]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        const MyComponent = forwardRef((props, ref) => {
+          useImperativeHandle(ref, () => ({
+            focus() {
+              alert(props.hello);
+            }
+          }), [])
+        });
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useImperativeHandle has a missing dependency: 'props.hello'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.hello]',
+              output: normalizeIndent`
+                const MyComponent = forwardRef((props, ref) => {
+                  useImperativeHandle(ref, () => ({
+                    focus() {
+                      alert(props.hello);
+                    }
+                  }), [props.hello])
+                });
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            if (props.onChange) {
+              props.onChange();
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    if (props.onChange) {
+                      props.onChange();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            if (props?.onChange) {
+              props?.onChange();
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    if (props?.onChange) {
+                      props?.onChange();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            function play() {
+              props.onPlay();
+            }
+            function pause() {
+              props.onPause();
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    function play() {
+                      props.onPlay();
+                    }
+                    function pause() {
+                      props.onPause();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            if (props.foo.onChange) {
+              props.foo.onChange();
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    if (props.foo.onChange) {
+                      props.foo.onChange();
+                    }
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            props.onChange();
+            if (props.foo.onChange) {
+              props.foo.onChange();
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    props.onChange();
+                    if (props.foo.onChange) {
+                      props.foo.onChange();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const [skillsCount] = useState();
+          useEffect(() => {
+            if (skillsCount === 0 && !props.isEditMode) {
+              props.toggleEditMode();
+            }
+          }, [skillsCount, props.isEditMode, props.toggleEditMode]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [skillsCount, props.isEditMode, props.toggleEditMode, props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const [skillsCount] = useState();
+                  useEffect(() => {
+                    if (skillsCount === 0 && !props.isEditMode) {
+                      props.toggleEditMode();
+                    }
+                  }, [skillsCount, props.isEditMode, props.toggleEditMode, props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const [skillsCount] = useState();
+          useEffect(() => {
+            if (skillsCount === 0 && !props.isEditMode) {
+              props.toggleEditMode();
+            }
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'props' and 'skillsCount'. " +
+            'Either include them or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props, skillsCount]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const [skillsCount] = useState();
+                  useEffect(() => {
+                    if (skillsCount === 0 && !props.isEditMode) {
+                      props.toggleEditMode();
+                    }
+                  }, [props, skillsCount]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            externalCall(props);
+            props.onChange();
+          }, []);
+        }
+      `,
+      // Don't suggest to destructure props here since you can't.
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    externalCall(props);
+                    props.onChange();
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            props.onChange();
+            externalCall(props);
+          }, []);
+        }
+      `,
+      // Don't suggest to destructure props here since you can't.
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    props.onChange();
+                    externalCall(props);
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let value;
+          let value2;
+          let value3;
+          let value4;
+          let asyncValue;
+          useEffect(() => {
+            if (value4) {
+              value = {};
+            }
+            value2 = 100;
+            value = 43;
+            value4 = true;
+            console.log(value2);
+            console.log(value3);
+            setTimeout(() => {
+              asyncValue = 100;
+            });
+          }, []);
+        }
+      `,
+      // This is a separate warning unrelated to others.
+      // We could've made a separate rule for it but it's rare enough to name it.
+      // No suggestions because the intent isn't clear.
+      errors: [
+        {
+          message:
+            // value2
+            `Assignments to the 'value2' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // value
+            `Assignments to the 'value' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // value4
+            `Assignments to the 'value4' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // asyncValue
+            `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let value;
+          let value2;
+          let value3;
+          let asyncValue;
+          useEffect(() => {
+            value = {};
+            value2 = 100;
+            value = 43;
+            console.log(value2);
+            console.log(value3);
+            setTimeout(() => {
+              asyncValue = 100;
+            });
+          }, [value, value2, value3]);
+        }
+      `,
+      // This is a separate warning unrelated to others.
+      // We could've made a separate rule for it but it's rare enough to name it.
+      // No suggestions because the intent isn't clear.
+      errors: [
+        {
+          message:
+            // value
+            `Assignments to the 'value' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // value2
+            `Assignments to the 'value2' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // asyncValue
+            `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef.current.addEventListener('mousemove', handleMove);
+            return () => myRef.current.removeEventListener('mousemove', handleMove);
+          }, []);
+          return <div ref={myRef} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            `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.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef?.current?.addEventListener('mousemove', handleMove);
+            return () => myRef?.current?.removeEventListener('mousemove', handleMove);
+          }, []);
+          return <div ref={myRef} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            `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.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const myRef = useRef();
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef.current.addEventListener('mousemove', handleMove);
+            return () => myRef.current.removeEventListener('mousemove', handleMove);
+          });
+          return <div ref={myRef} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            `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.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function useMyThing(myRef) {
+          useEffect(() => {
+            const handleMove = () => {};
+            myRef.current.addEventListener('mousemove', handleMove);
+            return () => myRef.current.removeEventListener('mousemove', handleMove);
+          }, [myRef]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `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.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function useMyThing(myRef) {
+          useEffect(() => {
+            const handleMouse = () => {};
+            myRef.current.addEventListener('mousemove', handleMouse);
+            myRef.current.addEventListener('mousein', handleMouse);
+            return function() {
+              setTimeout(() => {
+                myRef.current.removeEventListener('mousemove', handleMouse);
+                myRef.current.removeEventListener('mousein', handleMouse);
+              });
+            }
+          }, [myRef]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `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.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function useMyThing(myRef, active) {
+          useEffect(() => {
+            const handleMove = () => {};
+            if (active) {
+              myRef.current.addEventListener('mousemove', handleMove);
+              return function() {
+                setTimeout(() => {
+                  myRef.current.removeEventListener('mousemove', handleMove);
+                });
+              }
+            }
+          }, [myRef, active]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `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.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      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} />;
+        }
+      `,
+      // No changes
+      output: null,
+      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: normalizeIndent`
+        function MyComponent() {
+          const local1 = 42;
+          const local2 = '42';
+          const local3 = null;
+          const local4 = {};
+          useEffect(() => {
+            console.log(local1);
+            console.log(local2);
+            console.log(local3);
+            console.log(local4);
+          }, [local1, local3]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local4'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1, local3, local4]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = 42;
+                  const local2 = '42';
+                  const local3 = null;
+                  const local4 = {};
+                  useEffect(() => {
+                    console.log(local1);
+                    console.log(local2);
+                    console.log(local3);
+                    console.log(local4);
+                  }, [local1, local3, local4]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          useEffect(() => {
+            window.scrollTo(0, 0);
+          }, [window]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'window'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Outer scope values like 'window' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  useEffect(() => {
+                    window.scrollTo(0, 0);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        import MutableStore from 'store';
+
+        function MyComponent() {
+          useEffect(() => {
+            console.log(MutableStore.hello);
+          }, [MutableStore.hello]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'MutableStore.hello'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+
+                function MyComponent() {
+                  useEffect(() => {
+                    console.log(MutableStore.hello);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        import MutableStore from 'store';
+        let z = {};
+
+        function MyComponent(props) {
+          let x = props.foo;
+          {
+            let y = props.bar;
+            useEffect(() => {
+              console.log(MutableStore.hello.world, props.foo, x, y, z, global.stuff);
+            }, [MutableStore.hello.world, props.foo, x, y, z, global.stuff]);
+          }
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo, x, y]',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    useEffect(() => {
+                      console.log(MutableStore.hello.world, props.foo, x, y, z, global.stuff);
+                    }, [props.foo, x, y]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        import MutableStore from 'store';
+        let z = {};
+
+        function MyComponent(props) {
+          let x = props.foo;
+          {
+            let y = props.bar;
+            useEffect(() => {
+              // nothing
+            }, [MutableStore.hello.world, props.foo, x, y, z, global.stuff]);
+          }
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          // The output should contain the ones that are inside a component
+          // since there are legit reasons to over-specify them for effects.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo, x, y]',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    useEffect(() => {
+                      // nothing
+                    }, [props.foo, x, y]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        import MutableStore from 'store';
+        let z = {};
+
+        function MyComponent(props) {
+          let x = props.foo;
+          {
+            let y = props.bar;
+            const fn = useCallback(() => {
+              // nothing
+            }, [MutableStore.hello.world, props.foo, x, y, z, global.stuff]);
+          }
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useCallback has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', 'props.foo', 'x', 'y', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    const fn = useCallback(() => {
+                      // nothing
+                    }, []);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        import MutableStore from 'store';
+        let z = {};
+
+        function MyComponent(props) {
+          let x = props.foo;
+          {
+            let y = props.bar;
+            const fn = useCallback(() => {
+              // nothing
+            }, [MutableStore?.hello?.world, props.foo, x, y, z, global?.stuff]);
+          }
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useCallback has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', 'props.foo', 'x', 'y', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    const fn = useCallback(() => {
+                      // nothing
+                    }, []);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Every almost-static function is tainted by a dynamic value.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+          let [, dispatch] = React.useReducer();
+          let taint = props.foo;
+
+          function handleNext1(value) {
+            let value2 = value * taint;
+            setState(value2);
+            console.log('hello');
+          }
+          const handleNext2 = (value) => {
+            setState(taint(value));
+            console.log('hello');
+          };
+          let handleNext3 = function(value) {
+            setTimeout(() => console.log(taint));
+            dispatch({ type: 'x', value });
+          };
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+          }, []);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext2);
+          }, []);
+          useMemo(() => {
+            return Store.subscribe(handleNext3);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'handleNext1'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    setTimeout(() => console.log(taint));
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext2]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    setTimeout(() => console.log(taint));
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'handleNext3'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext3]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    setTimeout(() => console.log(taint));
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, [handleNext3]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+          let [, dispatch] = React.useReducer();
+          let taint = props.foo;
+
+          // Shouldn't affect anything
+          function handleChange() {}
+
+          function handleNext1(value) {
+            let value2 = value * taint;
+            setState(value2);
+            console.log('hello');
+          }
+          const handleNext2 = (value) => {
+            setState(taint(value));
+            console.log('hello');
+          };
+          let handleNext3 = function(value) {
+            console.log(taint);
+            dispatch({ type: 'x', value });
+          };
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+          }, []);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext2);
+          }, []);
+          useMemo(() => {
+            return Store.subscribe(handleNext3);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'handleNext1'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  function handleChange() {}
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext2]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  function handleChange() {}
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'handleNext3'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext3]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  function handleChange() {}
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, [handleNext3]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Regression test
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+          let [, dispatch] = React.useReducer();
+          let taint = props.foo;
+
+          // Shouldn't affect anything
+          const handleChange = () => {};
+
+          function handleNext1(value) {
+            let value2 = value * taint;
+            setState(value2);
+            console.log('hello');
+          }
+          const handleNext2 = (value) => {
+            setState(taint(value));
+            console.log('hello');
+          };
+          let handleNext3 = function(value) {
+            console.log(taint);
+            dispatch({ type: 'x', value });
+          };
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+          }, []);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext2);
+          }, []);
+          useMemo(() => {
+            return Store.subscribe(handleNext3);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'handleNext1'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  const handleChange = () => {};
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext2]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  const handleChange = () => {};
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'handleNext3'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext3]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  const handleChange = () => {};
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, [handleNext3]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+
+          function handleNext(value) {
+            setState(value);
+          }
+
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, [handleNext]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 11) change on every render. ` +
+            `Move it inside the useEffect callback. Alternatively, ` +
+            `wrap the definition of 'handleNext' in its own useCallback() Hook.`,
+          // Not gonna fix a function definition
+          // because it's not always safe due to hoisting.
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      // Even if the function only references static values,
+      // once you specify it in deps, it will invalidate them.
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+
+          const handleNext = (value) => {
+            setState(value);
+          };
+
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, [handleNext]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 11) change on every render. ` +
+            `Move it inside the useEffect callback. Alternatively, ` +
+            `wrap the definition of 'handleNext' in its own useCallback() Hook.`,
+          // We don't fix moving (too invasive). But that's the suggested fix
+          // when only effect uses this function. Otherwise, we'd useCallback.
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      // Even if the function only references static values,
+      // once you specify it in deps, it will invalidate them.
+      // However, we can't suggest moving handleNext into the
+      // effect because it is *also* used outside of it.
+      // So our suggestion is useCallback().
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+
+          const handleNext = (value) => {
+            setState(value);
+          };
+
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, [handleNext]);
+
+          return <div onClick={handleNext} />;
+        }
+      `,
+      errors: [
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 11) change on every render. ` +
+            `To fix this, wrap the definition of 'handleNext' in its own useCallback() Hook.`,
+          // We fix this one with useCallback since it's
+          // the easy fix and you can't just move it into effect.
+          suggestions: [
+            {
+              desc: "Wrap the definition of 'handleNext' in its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+
+                  const handleNext = useCallback((value) => {
+                    setState(value);
+                  });
+
+                  useEffect(() => {
+                    return Store.subscribe(handleNext);
+                  }, [handleNext]);
+
+                  return <div onClick={handleNext} />;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          function handleNext1() {
+            console.log('hello');
+          }
+          const handleNext2 = () => {
+            console.log('hello');
+          };
+          let handleNext3 = function() {
+            console.log('hello');
+          };
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+          }, [handleNext1]);
+          useLayoutEffect(() => {
+            return Store.subscribe(handleNext2);
+          }, [handleNext2]);
+          useMemo(() => {
+            return Store.subscribe(handleNext3);
+          }, [handleNext3]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 14) change on every render. Move it inside the useEffect callback. ' +
+            "Alternatively, wrap the definition of 'handleNext1' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
+            '(at line 17) change on every render. Move it inside the useLayoutEffect callback. ' +
+            "Alternatively, wrap the definition of 'handleNext2' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext3' function makes the dependencies of useMemo Hook " +
+            '(at line 20) change on every render. Move it inside the useMemo callback. ' +
+            "Alternatively, wrap the definition of 'handleNext3' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          function handleNext1() {
+            console.log('hello');
+          }
+          const handleNext2 = () => {
+            console.log('hello');
+          };
+          let handleNext3 = function() {
+            console.log('hello');
+          };
+          useEffect(() => {
+            handleNext1();
+            return Store.subscribe(() => handleNext1());
+          }, [handleNext1]);
+          useLayoutEffect(() => {
+            handleNext2();
+            return Store.subscribe(() => handleNext2());
+          }, [handleNext2]);
+          useMemo(() => {
+            handleNext3();
+            return Store.subscribe(() => handleNext3());
+          }, [handleNext3]);
+        }
+      `,
+      // Suggestions don't wrap into useCallback here
+      // because they are only referenced by effect itself.
+      errors: [
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 15) change on every render. Move it inside the useEffect callback. ' +
+            "Alternatively, wrap the definition of 'handleNext1' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
+            '(at line 19) change on every render. Move it inside the useLayoutEffect callback. ' +
+            "Alternatively, wrap the definition of 'handleNext2' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext3' function makes the dependencies of useMemo Hook " +
+            '(at line 23) change on every render. Move it inside the useMemo callback. ' +
+            "Alternatively, wrap the definition of 'handleNext3' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          function handleNext1() {
+            console.log('hello');
+          }
+          const handleNext2 = () => {
+            console.log('hello');
+          };
+          let handleNext3 = function() {
+            console.log('hello');
+          };
+          useEffect(() => {
+            handleNext1();
+            return Store.subscribe(() => handleNext1());
+          }, [handleNext1]);
+          useLayoutEffect(() => {
+            handleNext2();
+            return Store.subscribe(() => handleNext2());
+          }, [handleNext2]);
+          useMemo(() => {
+            handleNext3();
+            return Store.subscribe(() => handleNext3());
+          }, [handleNext3]);
+          return (
+            <div
+              onClick={() => {
+                handleNext1();
+                setTimeout(handleNext2);
+                setTimeout(() => {
+                  handleNext3();
+                });
+              }}
+            />
+          );
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 15) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext1' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
+            '(at line 19) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext2' in its own useCallback() Hook.",
+          // Suggestion wraps into useCallback where possible (variables only)
+          // because they are only referenced outside the effect.
+          suggestions: [
+            {
+              desc: "Wrap the definition of 'handleNext2' in its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  function handleNext1() {
+                    console.log('hello');
+                  }
+                  const handleNext2 = useCallback(() => {
+                    console.log('hello');
+                  });
+                  let handleNext3 = function() {
+                    console.log('hello');
+                  };
+                  useEffect(() => {
+                    handleNext1();
+                    return Store.subscribe(() => handleNext1());
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    handleNext2();
+                    return Store.subscribe(() => handleNext2());
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    handleNext3();
+                    return Store.subscribe(() => handleNext3());
+                  }, [handleNext3]);
+                  return (
+                    <div
+                      onClick={() => {
+                        handleNext1();
+                        setTimeout(handleNext2);
+                        setTimeout(() => {
+                          handleNext3();
+                        });
+                      }}
+                    />
+                  );
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'handleNext3' function makes the dependencies of useMemo Hook " +
+            '(at line 23) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext3' in its own useCallback() Hook.",
+          // Autofix wraps into useCallback where possible (variables only)
+          // because they are only referenced outside the effect.
+          suggestions: [
+            {
+              desc: "Wrap the definition of 'handleNext3' in its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  function handleNext1() {
+                    console.log('hello');
+                  }
+                  const handleNext2 = () => {
+                    console.log('hello');
+                  };
+                  let handleNext3 = useCallback(function() {
+                    console.log('hello');
+                  });
+                  useEffect(() => {
+                    handleNext1();
+                    return Store.subscribe(() => handleNext1());
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    handleNext2();
+                    return Store.subscribe(() => handleNext2());
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    handleNext3();
+                    return Store.subscribe(() => handleNext3());
+                  }, [handleNext3]);
+                  return (
+                    <div
+                      onClick={() => {
+                        handleNext1();
+                        setTimeout(handleNext2);
+                        setTimeout(() => {
+                          handleNext3();
+                        });
+                      }}
+                    />
+                  );
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const handleNext1 = () => {
+            console.log('hello');
+          };
+          function handleNext2() {
+            console.log('hello');
+          }
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+            return Store.subscribe(handleNext2);
+          }, [handleNext1, handleNext2]);
+          useEffect(() => {
+            return Store.subscribe(handleNext1);
+            return Store.subscribe(handleNext2);
+          }, [handleNext1, handleNext2]);
+        }
+      `,
+      // Normally we'd suggest moving handleNext inside an
+      // effect. But it's used by more than one. So we
+      // suggest useCallback() and use it for the autofix
+      // where possible (variable but not declaration).
+      // TODO: we could coalesce messages for the same function if it affects multiple Hooks.
+      errors: [
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 12) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext1' in its own useCallback() Hook.",
+          suggestions: [
+            {
+              desc: "Wrap the definition of 'handleNext1' in its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const handleNext1 = useCallback(() => {
+                    console.log('hello');
+                  });
+                  function handleNext2() {
+                    console.log('hello');
+                  }
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 16) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext1' in its own useCallback() Hook.",
+          suggestions: [
+            {
+              desc: "Wrap the definition of 'handleNext1' in its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const handleNext1 = useCallback(() => {
+                    console.log('hello');
+                  });
+                  function handleNext2() {
+                    console.log('hello');
+                  }
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useEffect Hook " +
+            '(at line 12) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext2' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useEffect Hook " +
+            '(at line 16) change on every render. To fix this, wrap the ' +
+            "definition of 'handleNext2' in its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let handleNext = () => {
+            console.log('hello');
+          };
+          if (props.foo) {
+            handleNext = () => {
+              console.log('hello');
+            };
+          }
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, [handleNext]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'handleNext' function makes the dependencies of useEffect Hook " +
+            '(at line 13) change on every render. To fix this, wrap the definition of ' +
+            "'handleNext' in its own useCallback() Hook.",
+          // Normally we'd suggest moving handleNext inside an
+          // effect. But it's used more than once.
+          // TODO: our autofix here isn't quite sufficient because
+          // it only wraps the first definition. But seems ok.
+          suggestions: [
+            {
+              desc: "Wrap the definition of 'handleNext' in its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let handleNext = useCallback(() => {
+                    console.log('hello');
+                  });
+                  if (props.foo) {
+                    handleNext = () => {
+                      console.log('hello');
+                    };
+                  }
+                  useEffect(() => {
+                    return Store.subscribe(handleNext);
+                  }, [handleNext]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let [, setState] = useState();
+          let taint = props.foo;
+
+          function handleNext(value) {
+            let value2 = value * taint;
+            setState(value2);
+            console.log('hello');
+          }
+
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, [handleNext]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 14) change on every render. ` +
+            `Move it inside the useEffect callback. Alternatively, wrap the ` +
+            `definition of 'handleNext' in its own useCallback() Hook.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          let [count, setCount] = useState(0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count + 1);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'count'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setCount(c => ...)' if you ` +
+            `only need 'count' in the 'setCount' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [count]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count + 1);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [count]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          let [count, setCount] = useState(0);
+          let [increment, setIncrement] = useState(0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count + increment);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'count' and 'increment'. " +
+            'Either include them or remove the dependency array. ' +
+            `You can also do a functional update 'setCount(c => ...)' if you ` +
+            `only need 'count' in the 'setCount' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [count, increment]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+                  let [increment, setIncrement] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [count, increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          let [count, setCount] = useState(0);
+          let [increment, setIncrement] = useState(0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => count + increment);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also replace multiple useState variables with useReducer ` +
+            `if 'setCount' needs the current value of 'increment'.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+                  let [increment, setIncrement] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          let [count, setCount] = useState(0);
+          let increment = useCustomHook();
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => count + increment);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      // This intentionally doesn't show the reducer message
+      // because we don't know if it's safe for it to close over a value.
+      // We only show it for state variables (and possibly props).
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+                  let increment = useCustomHook();
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter({ step }) {
+          let [count, setCount] = useState(0);
+
+          function increment(x) {
+            return x + step;
+          }
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => increment(count));
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      // This intentionally doesn't show the reducer message
+      // because we don't know if it's safe for it to close over a value.
+      // We only show it for state variables (and possibly props).
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter({ step }) {
+                  let [count, setCount] = useState(0);
+
+                  function increment(x) {
+                    return x + step;
+                  }
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => increment(count));
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter({ step }) {
+          let [count, setCount] = useState(0);
+
+          function increment(x) {
+            return x + step;
+          }
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => increment(count));
+            }, 1000);
+            return () => clearInterval(id);
+          }, [increment]);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      errors: [
+        {
+          message:
+            `The 'increment' function makes the dependencies of useEffect Hook ` +
+            `(at line 14) change on every render. Move it inside the useEffect callback. ` +
+            `Alternatively, wrap the definition of \'increment\' in its own ` +
+            `useCallback() Hook.`,
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter({ increment }) {
+          let [count, setCount] = useState(0);
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              setCount(count => count + increment);
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array. ' +
+            `If 'setCount' needs the current value of 'increment', ` +
+            `you can also switch to useReducer instead of useState and read 'increment' in the reducer.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter({ increment }) {
+                  let [count, setCount] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Counter() {
+          const [count, setCount] = useState(0);
+
+          function tick() {
+            setCount(count + 1);
+          }
+
+          useEffect(() => {
+            let id = setInterval(() => {
+              tick();
+            }, 1000);
+            return () => clearInterval(id);
+          }, []);
+
+          return <h1>{count}</h1>;
+        }
+      `,
+      // TODO: ideally this should suggest useState updater form
+      // since this code doesn't actually work. The autofix could
+      // at least avoid suggesting 'tick' since it's obviously
+      // always different, and thus useless.
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'tick'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [tick]',
+              output: normalizeIndent`
+                function Counter() {
+                  const [count, setCount] = useState(0);
+
+                  function tick() {
+                    setCount(count + 1);
+                  }
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      tick();
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [tick]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Regression test for a crash
+      code: normalizeIndent`
+        function Podcasts() {
+          useEffect(() => {
+            alert(podcasts);
+          }, []);
+          let [podcasts, setPodcasts] = useState(null);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'podcasts'. ` +
+            `Either include it or remove the dependency array.`,
+          // Note: this autofix is shady because
+          // the variable is used before declaration.
+          // TODO: Maybe we can catch those fixes and not autofix.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [podcasts]',
+              output: normalizeIndent`
+                function Podcasts() {
+                  useEffect(() => {
+                    alert(podcasts);
+                  }, [podcasts]);
+                  let [podcasts, setPodcasts] = useState(null);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Podcasts({ fetchPodcasts, id }) {
+          let [podcasts, setPodcasts] = useState(null);
+          useEffect(() => {
+            fetchPodcasts(id).then(setPodcasts);
+          }, [id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    fetchPodcasts(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Podcasts({ api: { fetchPodcasts }, id }) {
+          let [podcasts, setPodcasts] = useState(null);
+          useEffect(() => {
+            fetchPodcasts(id).then(setPodcasts);
+          }, [id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ api: { fetchPodcasts }, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    fetchPodcasts(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {
+          let [podcasts, setPodcasts] = useState(null);
+          useEffect(() => {
+            setTimeout(() => {
+              console.log(id);
+              fetchPodcasts(id).then(setPodcasts);
+              fetchPodcasts2(id).then(setPodcasts);
+            });
+          }, [id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has missing dependencies: 'fetchPodcasts' and 'fetchPodcasts2'. ` +
+            `Either include them or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, fetchPodcasts2, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    setTimeout(() => {
+                      console.log(id);
+                      fetchPodcasts(id).then(setPodcasts);
+                      fetchPodcasts2(id).then(setPodcasts);
+                    });
+                  }, [fetchPodcasts, fetchPodcasts2, id]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Podcasts({ fetchPodcasts, id }) {
+          let [podcasts, setPodcasts] = useState(null);
+          useEffect(() => {
+            console.log(fetchPodcasts);
+            fetchPodcasts(id).then(setPodcasts);
+          }, [id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    console.log(fetchPodcasts);
+                    fetchPodcasts(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Podcasts({ fetchPodcasts, id }) {
+          let [podcasts, setPodcasts] = useState(null);
+          useEffect(() => {
+            console.log(fetchPodcasts);
+            fetchPodcasts?.(id).then(setPodcasts);
+          }, [id]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    console.log(fetchPodcasts);
+                    fetchPodcasts?.(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // The mistake here is that it was moved inside the effect
+      // so it can't be referenced in the deps array.
+      code: normalizeIndent`
+        function Thing() {
+          useEffect(() => {
+            const fetchData = async () => {};
+            fetchData();
+          }, [fetchData]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect has an unnecessary dependency: 'fetchData'. ` +
+            `Either exclude it or remove the dependency array.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function Thing() {
+                  useEffect(() => {
+                    const fetchData = async () => {};
+                    fetchData();
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Hello() {
+          const [state, setState] = useState(0);
+          useEffect(() => {
+            setState({});
+          });
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect contains a call to 'setState'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: []',
+              output: normalizeIndent`
+                function Hello() {
+                  const [state, setState] = useState(0);
+                  useEffect(() => {
+                    setState({});
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Hello() {
+          const [data, setData] = useState(0);
+          useEffect(() => {
+            fetchData.then(setData);
+          });
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect contains a call to 'setData'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: []',
+              output: normalizeIndent`
+                function Hello() {
+                  const [data, setData] = useState(0);
+                  useEffect(() => {
+                    fetchData.then(setData);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Hello({ country }) {
+          const [data, setData] = useState(0);
+          useEffect(() => {
+            fetchData(country).then(setData);
+          });
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect contains a call to 'setData'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [country] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: [country]',
+              output: normalizeIndent`
+                function Hello({ country }) {
+                  const [data, setData] = useState(0);
+                  useEffect(() => {
+                    fetchData(country).then(setData);
+                  }, [country]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Hello({ prop1, prop2 }) {
+          const [state, setState] = useState(0);
+          useEffect(() => {
+            if (prop1) {
+              setState(prop2);
+            }
+          });
+        }
+      `,
+      errors: [
+        {
+          message:
+            `React Hook useEffect contains a call to 'setState'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [prop1, prop2] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: [prop1, prop2]',
+              output: normalizeIndent`
+                function Hello({ prop1, prop2 }) {
+                  const [state, setState] = useState(0);
+                  useEffect(() => {
+                    if (prop1) {
+                      setState(prop2);
+                    }
+                  }, [prop1, prop2]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Thing() {
+          useEffect(async () => {}, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Thing() {
+          useEffect(async () => {});
+        }
+      `,
+      errors: [
+        {
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Example() {
+          const foo = useCallback(() => {
+            foo();
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'foo'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function Example() {
+                  const foo = useCallback(() => {
+                    foo();
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Example({ prop }) {
+          const foo = useCallback(() => {
+            prop.hello(foo);
+          }, [foo]);
+          const bar = useCallback(() => {
+            foo();
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'prop'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [prop]',
+              output: normalizeIndent`
+                function Example({ prop }) {
+                  const foo = useCallback(() => {
+                    prop.hello(foo);
+                  }, [prop]);
+                  const bar = useCallback(() => {
+                    foo();
+                  }, [foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          function myEffect() {
+            console.log(local);
+          }
+          useEffect(myEffect, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  function myEffect() {
+                    console.log(local);
+                  }
+                  useEffect(myEffect, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const myEffect = () => {
+            console.log(local);
+          };
+          useEffect(myEffect, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const myEffect = () => {
+                    console.log(local);
+                  };
+                  useEffect(myEffect, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const myEffect = function() {
+            console.log(local);
+          };
+          useEffect(myEffect, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const myEffect = function() {
+                    console.log(local);
+                  };
+                  useEffect(myEffect, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const myEffect = () => {
+            otherThing();
+          };
+          const otherThing = () => {
+            console.log(local);
+          };
+          useEffect(myEffect, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'otherThing'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [otherThing]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const myEffect = () => {
+                    otherThing();
+                  };
+                  const otherThing = () => {
+                    console.log(local);
+                  };
+                  useEffect(myEffect, [otherThing]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const myEffect = debounce(() => {
+            console.log(local);
+          }, delay);
+          useEffect(myEffect, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'myEffect'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [myEffect]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const myEffect = debounce(() => {
+                    console.log(local);
+                  }, delay);
+                  useEffect(myEffect, [myEffect]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          const myEffect = debounce(() => {
+            console.log(local);
+          }, delay);
+          useEffect(myEffect, [local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'myEffect'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [myEffect]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const myEffect = debounce(() => {
+                    console.log(local);
+                  }, delay);
+                  useEffect(myEffect, [myEffect]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({myEffect}) {
+          useEffect(myEffect, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect received a function whose dependencies are unknown. Pass an inline function instead.',
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(debounce(() => {
+            console.log(local);
+          }, delay), []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useEffect received a function whose dependencies ' +
+            'are unknown. Pass an inline function instead.',
+          suggestions: [],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          }, []);
+        }
+      `,
+      // Dangerous autofix is enabled due to the option:
+      output: normalizeIndent`
+        function MyComponent() {
+          const local = {};
+          useEffect(() => {
+            console.log(local);
+          }, [local]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+      // Keep this until major IDEs and VS Code FB ESLint plugin support Suggestions API.
+      options: [{enableDangerousAutofixThisMayCauseInfiniteLoops: true}],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          let foo = {}
+          useEffect(() => {
+            foo.bar.baz = 43;
+            props.foo.bar.baz = 1;
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'foo.bar' and 'props.foo.bar'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [foo.bar, props.foo.bar]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let foo = {}
+                  useEffect(() => {
+                    foo.bar.baz = 43;
+                    props.foo.bar.baz = 1;
+                  }, [foo.bar, props.foo.bar]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = [];
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' array makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = () => {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' function makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own " +
+            'useCallback() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = function bar(){};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' function makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the definition of 'foo' in its own " +
+            'useCallback() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = class {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' class makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = true ? {} : "fine";
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' conditional could make the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = bar || {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' logical expression could make the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = bar ?? {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' logical expression could make the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = bar && {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' logical expression could make the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = bar ? baz ? {} : null : null;
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' conditional could make the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          let foo = {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          var foo = {};
+          useMemo(() => foo, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useMemo Hook (at line 4) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = {};
+          useCallback(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useCallback Hook (at line 6) change on every render. " +
+            "Move it inside the useCallback callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = {};
+          useEffect(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useEffect Hook (at line 6) change on every render. " +
+            "Move it inside the useEffect callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = {};
+          useLayoutEffect(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useLayoutEffect Hook (at line 6) change on every render. " +
+            "Move it inside the useLayoutEffect callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Component() {
+          const foo = {};
+          useImperativeHandle(
+            ref,
+            () => {
+               console.log(foo);
+            },
+            [foo]
+          );
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useImperativeHandle Hook (at line 9) change on every render. " +
+            "Move it inside the useImperativeHandle callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo(section) {
+          const foo = section.section_components?.edges ?? [];
+          useEffect(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' logical expression could make the dependencies of useEffect Hook (at line 6) change on every render. " +
+            "Move it inside the useEffect callback. Alternatively, wrap the initialization of 'foo' in its own " +
+            'useMemo() Hook.',
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo(section) {
+          const foo = {};
+          console.log(foo);
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useMemo Hook (at line 7) change on every render. " +
+            "To fix this, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = <>Hi!</>;
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' JSX fragment makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = <div>Hi!</div>;
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' JSX element makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = bar = {};
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' assignment expression makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = new String('foo'); // Note 'foo' will be boxed, and thus an object and thus compared by reference.
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object construction makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = new Map([]);
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object construction makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = /reg/;
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' regular expression makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+
+    {
+      code: normalizeIndent`
+        function Foo() {
+          class Bar {};
+          useMemo(() => {
+            console.log(new Bar());
+          }, [Bar]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'Bar' class makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'Bar' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = {};
+          useLayoutEffect(() => {
+            console.log(foo);
+          }, [foo]);
+          useEffect(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useLayoutEffect Hook (at line 6) change on every render. " +
+            "To fix this, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'foo' object makes the dependencies of useEffect Hook (at line 9) change on every render. " +
+            "To fix this, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function useCustomCallback(callback, deps) {
+          return useCallback(callback, deps)
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.',
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ theme }) {
+          const onStuff = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useEffect(() => {
+            onStuff();
+          }, [onStuff]);
+          React.useEffect(() => {
+            onStuff();
+          }, [onStuff]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +
+            'Remove `onStuff` from the list.',
+          suggestions: [
+            {
+              desc: 'Remove the dependency `onStuff`',
+              output: normalizeIndent`
+                function MyComponent({ theme }) {
+                  const onStuff = useEffectEvent(() => {
+                    showNotification(theme);
+                  });
+                  useEffect(() => {
+                    onStuff();
+                  }, []);
+                  React.useEffect(() => {
+                    onStuff();
+                  }, [onStuff]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +
+            'Remove `onStuff` from the list.',
+          suggestions: [
+            {
+              desc: 'Remove the dependency `onStuff`',
+              output: normalizeIndent`
+                function MyComponent({ theme }) {
+                  const onStuff = useEffectEvent(() => {
+                    showNotification(theme);
+                  });
+                  useEffect(() => {
+                    onStuff();
+                  }, [onStuff]);
+                  React.useEffect(() => {
+                    onStuff();
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+// Tests that are only valid/invalid across parsers supporting Flow
+const testsFlow = {
+  valid: [
+    // Ignore Generic Type Variables for arrow functions
+    {
+      code: normalizeIndent`
+        function Example({ prop }) {
+          const bar = useEffect(<T>(a: T): Hello => {
+            prop();
+          }, [prop]);
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: normalizeIndent`
+        hook useExample(a) {
+          useEffect(() => {
+            console.log(a);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'a'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [a]',
+              output: normalizeIndent`
+                hook useExample(a) {
+                  useEffect(() => {
+                    console.log(a);
+                  }, [a]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+      function Foo() {
+        const foo = ({}: any);
+        useMemo(() => {
+          console.log(foo);
+        }, [foo]);
+      }
+    `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+  ],
+};
+
+// Tests that are only valid/invalid across parsers supporting TypeScript
+const testsTypescript = {
+  valid: [
+    {
+      // `ref` is still constant, despite the cast.
+      code: normalizeIndent`
+        function MyComponent() {
+          const ref = useRef() as React.MutableRefObject<HTMLDivElement>;
+          useEffect(() => {
+            console.log(ref.current);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useEffect(() => {
+            const someNumber: typeof state = 2;
+            setState(prevState => prevState + someNumber);
+          }, [])
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useSpecialEffect(() => {
+            const someNumber: typeof state = 2;
+            setState(prevState => prevState + someNumber);
+          })
+        }
+      `,
+      options: [
+        {
+          additionalHooks: 'useSpecialEffect',
+          experimental_autoDependenciesHooks: ['useSpecialEffect'],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const foo = {x: 1};
+          React.useEffect(() => {
+            const bar = {x: 2};
+            const baz = bar as typeof foo;
+            console.log(baz);
+          }, []);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App(props) {
+          React.useEffect(() => {
+            console.log(props.test);
+          }, [props.test] as const);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App(props) {
+          React.useEffect(() => {
+            console.log(props.test);
+          }, [props.test] as any);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App(props) {
+          React.useEffect((() => {
+            console.log(props.test);
+          }) as any, [props.test]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useMyThing<T>(): void {
+          useEffect(() => {
+            let foo: T;
+            console.log(foo);
+          }, []);
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      // `local` is still non-constant, despite the cast.
+      code: normalizeIndent`
+        function MyComponent() {
+          const local = {} as string;
+          useEffect(() => {
+            console.log(local);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {} as string;
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const foo = {x: 1};
+          const bar = {x: 2};
+          useEffect(() => {
+            const baz = bar as typeof foo;
+            console.log(baz);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'bar'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [bar]',
+              output: normalizeIndent`
+                function App() {
+                  const foo = {x: 1};
+                  const bar = {x: 2};
+                  useEffect(() => {
+                    const baz = bar as typeof foo;
+                    console.log(baz);
+                  }, [bar]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const pizza = {};
+
+          useEffect(() => ({
+            crust: pizza.crust,
+            toppings: pizza?.toppings,
+          }), []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'pizza.crust' and 'pizza?.toppings'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [pizza.crust, pizza?.toppings]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const pizza = {};
+
+                  useEffect(() => ({
+                    crust: pizza.crust,
+                    toppings: pizza?.toppings,
+                  }), [pizza.crust, pizza?.toppings]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const pizza = {};
+
+          useEffect(() => ({
+            crust: pizza?.crust,
+            density: pizza.crust.density,
+          }), []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'pizza.crust'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [pizza.crust]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const pizza = {};
+
+                  useEffect(() => ({
+                    crust: pizza?.crust,
+                    density: pizza.crust.density,
+                  }), [pizza.crust]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const pizza = {};
+
+          useEffect(() => ({
+            crust: pizza.crust,
+            density: pizza?.crust.density,
+          }), []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'pizza.crust'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [pizza.crust]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const pizza = {};
+
+                  useEffect(() => ({
+                    crust: pizza.crust,
+                    density: pizza?.crust.density,
+                  }), [pizza.crust]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const pizza = {};
+
+          useEffect(() => ({
+            crust: pizza?.crust,
+            density: pizza?.crust.density,
+          }), []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'pizza?.crust'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [pizza?.crust]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const pizza = {};
+
+                  useEffect(() => ({
+                    crust: pizza?.crust,
+                    density: pizza?.crust.density,
+                  }), [pizza?.crust]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    // Regression test.
+    {
+      code: normalizeIndent`
+        function Example(props) {
+          useEffect(() => {
+            let topHeight = 0;
+            topHeight = props.upperViewHeight;
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.upperViewHeight'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.upperViewHeight]',
+              output: normalizeIndent`
+                function Example(props) {
+                  useEffect(() => {
+                    let topHeight = 0;
+                    topHeight = props.upperViewHeight;
+                  }, [props.upperViewHeight]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    // Regression test.
+    {
+      code: normalizeIndent`
+        function Example(props) {
+          useEffect(() => {
+            let topHeight = 0;
+            topHeight = props?.upperViewHeight;
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props?.upperViewHeight'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props?.upperViewHeight]',
+              output: normalizeIndent`
+                function Example(props) {
+                  useEffect(() => {
+                    let topHeight = 0;
+                    topHeight = props?.upperViewHeight;
+                  }, [props?.upperViewHeight]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useEffect(() => {
+            const someNumber: typeof state = 2;
+            setState(prevState => prevState + someNumber + state);
+          }, [])
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [state]',
+              output: normalizeIndent`
+              function MyComponent() {
+                const [state, setState] = React.useState<number>(0);
+
+                useEffect(() => {
+                  const someNumber: typeof state = 2;
+                  setState(prevState => prevState + someNumber + state);
+                }, [state])
+              }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useSpecialEffect(() => {
+            const someNumber: typeof state = 2;
+            setState(prevState => prevState + someNumber + state);
+          }, [])
+        }
+      `,
+      options: [
+        {
+          additionalHooks: 'useSpecialEffect',
+          experimental_autoDependenciesHooks: ['useSpecialEffect'],
+        },
+      ],
+      errors: [
+        {
+          message:
+            "React Hook useSpecialEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [state]',
+              output: normalizeIndent`
+              function MyComponent() {
+                const [state, setState] = React.useState<number>(0);
+
+                useSpecialEffect(() => {
+                  const someNumber: typeof state = 2;
+                  setState(prevState => prevState + someNumber + state);
+                }, [state])
+              }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useMemo(() => {
+            const someNumber: typeof state = 2;
+            console.log(someNumber);
+          }, [state])
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useMemo has an unnecessary dependency: 'state'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const [state, setState] = React.useState<number>(0);
+
+                  useMemo(() => {
+                    const someNumber: typeof state = 2;
+                    console.log(someNumber);
+                  }, [])
+                }
+                `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function Foo() {
+          const foo = {} as any;
+          useMemo(() => {
+            console.log(foo);
+          }, [foo]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "The 'foo' object makes the dependencies of useMemo Hook (at line 6) change on every render. " +
+            "Move it inside the useMemo callback. Alternatively, wrap the initialization of 'foo' in its own useMemo() Hook.",
+          suggestions: undefined,
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function useCustomCallback(callback, deps) {
+          return useCallback(callback as any, deps)
+        }
+      `,
+      errors: [
+        {
+          message:
+            'React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.',
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+          });
+        }
+      `,
+      options: [{requireExplicitEffectDeps: true}],
+      errors: [
+        {
+          message:
+            'React Hook useEffect always requires dependencies. Please add a dependency array or an explicit `undefined`',
+          suggestions: undefined,
+        },
+      ],
+    },
+  ],
+};
+
+// Tests that are only valid/invalid for `@typescript-eslint/parser@4.x`
+const testsTypescriptEslintParserV4 = {
+  valid: [],
+  invalid: [
+    // TODO: Should also be invalid as part of the JS test suite i.e. be invalid with babel eslint parsers.
+    // It doesn't use any explicit types but any JS is still valid TS.
+    {
+      code: normalizeIndent`
+        function Foo({ Component }) {
+          React.useEffect(() => {
+            console.log(<Component />);
+          }, []);
+        };
+      `,
+      errors: [
+        {
+          message:
+            "React Hook React.useEffect has a missing dependency: 'Component'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [Component]',
+              output: normalizeIndent`
+              function Foo({ Component }) {
+                React.useEffect(() => {
+                  console.log(<Component />);
+                }, [Component]);
+              };
+            `,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+// For easier local testing
+if (!process.env.CI) {
+  let only = [];
+  let skipped = [];
+  [
+    ...tests.valid,
+    ...tests.invalid,
+    ...testsFlow.valid,
+    ...testsFlow.invalid,
+    ...testsTypescript.valid,
+    ...testsTypescript.invalid,
+    ...testsTypescriptEslintParserV4.valid,
+    ...testsTypescriptEslintParserV4.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);
+  testsFlow.valid = testsFlow.valid.filter(predicate);
+  testsFlow.invalid = testsFlow.invalid.filter(predicate);
+  testsTypescript.valid = testsTypescript.valid.filter(predicate);
+  testsTypescript.invalid = testsTypescript.invalid.filter(predicate);
+  testsTypescriptEslintParserV4.valid =
+    testsTypescriptEslintParserV4.valid.filter(predicate);
+  testsTypescriptEslintParserV4.invalid =
+    testsTypescriptEslintParserV4.invalid.filter(predicate);
+}
+
+describe('rules-of-hooks/exhaustive-deps', () => {
+  const parserOptionsV7 = {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 6,
+    sourceType: 'module',
+  };
+
+  const languageOptionsV9 = {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  };
+
+  const testsBabelEslint = tests;
+
+  const testsHermesParser = {
+    valid: [...testsFlow.valid, ...tests.valid],
+    invalid: [...testsFlow.invalid, ...tests.invalid],
+  };
+
+  new ESLintTesterV7({
+    parser: require.resolve('babel-eslint'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: babel-eslint',
+    ReactHooksESLintRule,
+    testsBabelEslint
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@babel/eslint-parser'),
+    },
+  }).run(
+    'eslint: v9, parser: @babel/eslint-parser',
+    ReactHooksESLintRule,
+    testsBabelEslint
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('hermes-eslint'),
+    parserOptions: {
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    },
+  }).run(
+    'eslint: v7, parser: hermes-eslint',
+    ReactHooksESLintRule,
+    testsHermesParser
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('hermes-eslint'),
+      parserOptions: {
+        sourceType: 'module',
+        enableExperimentalComponentSyntax: true,
+      },
+    },
+  }).run(
+    'eslint: v9, parser: hermes-eslint',
+    ReactHooksESLintRule,
+    testsHermesParser
+  );
+
+  const testsTypescriptEslintParser = {
+    valid: [...testsTypescript.valid, ...tests.valid],
+    invalid: [...testsTypescript.invalid, ...tests.invalid],
+  };
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v2'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@2.x',
+    ReactHooksESLintRule,
+    testsTypescriptEslintParser
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v2'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@2.x',
+    ReactHooksESLintRule,
+    testsTypescriptEslintParser
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v3'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@3.x',
+    ReactHooksESLintRule,
+    testsTypescriptEslintParser
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v3'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@3.x',
+    ReactHooksESLintRule,
+    testsTypescriptEslintParser
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v4'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@4.x',
+    ReactHooksESLintRule,
+    {
+      valid: [
+        ...testsTypescriptEslintParserV4.valid,
+        ...testsTypescriptEslintParser.valid,
+      ],
+      invalid: [
+        ...testsTypescriptEslintParserV4.invalid,
+        ...testsTypescriptEslintParser.invalid,
+      ],
+    }
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v4'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@4.x',
+    ReactHooksESLintRule,
+    {
+      valid: [
+        ...testsTypescriptEslintParserV4.valid,
+        ...testsTypescriptEslintParser.valid,
+      ],
+      invalid: [
+        ...testsTypescriptEslintParserV4.invalid,
+        ...testsTypescriptEslintParser.invalid,
+      ],
+    }
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v5'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@^5.0.0-0',
+    ReactHooksESLintRule,
+    {
+      valid: [
+        ...testsTypescriptEslintParserV4.valid,
+        ...testsTypescriptEslintParser.valid,
+      ],
+      invalid: [
+        ...testsTypescriptEslintParserV4.invalid,
+        ...testsTypescriptEslintParser.invalid,
+      ],
+    }
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v5'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@^5.0.0',
+    ReactHooksESLintRule,
+    {
+      valid: [
+        ...testsTypescriptEslintParserV4.valid,
+        ...testsTypescriptEslintParser.valid,
+      ],
+      invalid: [
+        ...testsTypescriptEslintParserV4.invalid,
+        ...testsTypescriptEslintParser.invalid,
+      ],
+    }
+  );
+});
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
new file mode 100644
index 00000000000..3d60a36824d
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -0,0 +1,2285 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const ESLintTesterV7 = require('eslint-v7').RuleTester;
+const ESLintTesterV9 = require('eslint-v9').RuleTester;
+const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
+const ReactHooksESLintRule =
+  ReactHooksESLintPlugin.default.rules['rules-of-hooks'];
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+function normalizeIndent(strings) {
+  const codeLines = strings[0].split('\n');
+  const leftPadding = codeLines[1].match(/\s+/)[0];
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+// ***************************************************
+// For easier local testing, you can add to any case:
+// {
+//   skip: true,
+//   --or--
+//   only: true,
+//   ...
+// }
+// ***************************************************
+
+const allTests = {
+  valid: [
+    {
+      code: normalizeIndent`
+        // Valid because components can use hooks.
+        function ComponentWithHook() {
+          useHook();
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax
+        component Button() {
+          useHook();
+          return <div>Button!</div>;
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Hook syntax
+        hook useSampleHook() {
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because components can use hooks.
+        function createComponentWithHook() {
+          return function ComponentWithHook() {
+            useHook();
+          };
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can use hooks.
+        function useHookWithHook() {
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can use hooks.
+        function createHook() {
+          return function useHookWithHook() {
+            useHook();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because components can call functions.
+        function ComponentWithNormalFunction() {
+          doSomething();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions can call functions.
+        function normalFunctionWithNormalFunction() {
+          doSomething();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions can call functions.
+        function normalFunctionWithConditionalFunction() {
+          if (cond) {
+            doSomething();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions can call functions.
+        function functionThatStartsWithUseButIsntAHook() {
+          if (cond) {
+            userFetch();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid although unconditional return doesn't make sense and would fail other rules.
+        // We could make it invalid but it doesn't matter.
+        function useUnreachable() {
+          return;
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() { useState(); }
+        const whatever = function useHook() { useState(); };
+        const useHook1 = () => { useState(); };
+        let useHook2 = () => useState();
+        useHook2 = () => { useState(); };
+        ({useHook: () => { useState(); }});
+        ({useHook() { useState(); }});
+        const {useHook3 = () => { useState(); }} = {};
+        ({useHook = () => { useState(); }} = {});
+        Namespace.useHook = () => { useState(); };
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          useHook1();
+          useHook2();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function createHook() {
+          return function useHook() {
+            useHook1();
+            useHook2();
+          };
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          useState() && a;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          return useHook1() + useHook2();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can call hooks.
+        function useHook() {
+          return useHook1(useHook2());
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can be used in anonymous function arguments to
+        // forwardRef.
+        const FancyButton = forwardRef(function (props, ref) {
+          useHook();
+          return <button {...props} ref={ref} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can be used in anonymous function arguments to
+        // React.memo.
+        const MemoizedFunction = React.memo(props => {
+          useHook();
+          return <button {...props} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because hooks can be used in anonymous function arguments to
+        // memo.
+        const MemoizedFunction = memo(function (props) {
+          useHook();
+          return <button {...props} />
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because classes can call functions.
+        // We don't consider these to be hooks.
+        class C {
+          m() {
+            this.useHook();
+            super.useHook();
+          }
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid -- this is a regression test.
+        jest.useFakeTimers();
+        beforeEach(() => {
+          jest.useRealTimers();
+        })
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because they're not matching use[A-Z].
+        fooState();
+        _use();
+        _useState();
+        use_hook();
+        // also valid because it's not matching the PascalCase namespace
+        jest.useFakeTimer()
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Regression test for some internal code.
+        // This shows how the "callback rule" is more relaxed,
+        // and doesn't kick in unless we're confident we're in
+        // a component or a hook.
+        function makeListener(instance) {
+          each(pixelsWithInferredEvents, pixel => {
+            if (useExtendedSelector(pixel.id) && extendedButton) {
+              foo();
+            }
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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)
+          }
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // 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)
+          }
+        });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Regression test for incorrectly flagged valid code.
+        function RegressionTest() {
+          const foo = cond ? a : b;
+          useState();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because exceptions abort rendering
+        function RegressionTest() {
+          if (page == null) {
+            throw new Error('oh no!');
+          }
+          useState();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the loop doesn't change the order of hooks calls.
+        function RegressionTest() {
+          const res = [];
+          const additionalCond = true;
+          for (let i = 0; i !== 10 && additionalCond; ++i ) {
+            res.push(i);
+          }
+          React.useLayoutEffect(() => {});
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Is valid but hard to compute by brute-forcing
+        function MyComponent() {
+          // 40 conditions
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+          if (c) {} else {}
+
+          // 10 hooks
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+          useHook();
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the neither the conditions before or after the hook affect the hook call
+        // Failed prior to implementing BigInt because pathsFromStartToEnd and allPathsFromStartToEnd were too big and had rounding errors
+        const useSomeHook = () => {};
+
+        const SomeName = () => {
+          const filler = FILLER ?? FILLER ?? FILLER;
+          const filler2 = FILLER ?? FILLER ?? FILLER;
+          const filler3 = FILLER ?? FILLER ?? FILLER;
+          const filler4 = FILLER ?? FILLER ?? FILLER;
+          const filler5 = FILLER ?? FILLER ?? FILLER;
+          const filler6 = FILLER ?? FILLER ?? FILLER;
+          const filler7 = FILLER ?? FILLER ?? FILLER;
+          const filler8 = FILLER ?? FILLER ?? FILLER;
+
+          useSomeHook();
+
+          if (anyConditionCanEvenBeFalse) {
+            return null;
+          }
+
+          return (
+            <React.Fragment>
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+              {FILLER ? FILLER : FILLER}
+            </React.Fragment>
+          );
+        };
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the neither the condition nor the loop affect the hook call.
+        function App(props) {
+          const someObject = {propA: true};
+          for (const propName in someObject) {
+            if (propName === true) {
+            } else {
+            }
+          }
+          const [myState, setMyState] = useState(null);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const text = use(Promise.resolve('A'));
+          return <Text text={text} />
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import * as React from 'react';
+        function App() {
+          if (shouldShowText) {
+            const text = use(query);
+            const data = React.use(thing);
+            const data2 = react.use(thing2);
+            return <Text text={text} />
+          }
+          return <Text text={shouldFetchBackupText ? use(backupQuery) : "Nothing to see here"} />
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          let data = [];
+          for (const query of queries) {
+            const text = use(item);
+            data.push(text);
+          }
+          return <Child data={data} />
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const data = someCallback((x) => use(x));
+          return <Child data={data} />
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        export const notAComponent = () => {
+           return () => {
+            useState();
+          }
+        }
+      `,
+      // TODO: this should error but doesn't.
+      // errors: [functionError('use', 'notAComponent')],
+    },
+    {
+      code: normalizeIndent`
+        export default () => {
+          if (isVal) {
+            useState(0);
+          }
+        }
+      `,
+      // TODO: this should error but doesn't.
+      // errors: [genericError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        function notAComponent() {
+          return new Promise.then(() => {
+            useState();
+          });
+        }
+      `,
+      // TODO: this should error but doesn't.
+      // errors: [genericError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        // Valid because the hook is outside of the loop
+        const Component = () => {
+          const [state, setState] = useState(0);
+          for (let i = 0; i < 10; i++) {
+            console.log(i);
+          }
+          return <div></div>;
+        };
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useMyEffect(() => {
+            onClick();
+          });
+          useServerEffect(() => {
+            onClick();
+          });
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: '(useMyEffect|useServerEffect)',
+        },
+      },
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useMyEffect(() => {
+            onClick();
+          });
+          useServerEffect(() => {
+            onClick();  
+          });
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: '(useMyEffect|useServerEffect)',
+        },
+      },
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be called in a useEffect.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useEffect(() => {
+            onClick();
+          });
+          React.useEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Valid because functions created with useEffectEvent can be called in a useEffect.
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useEffect(() => {
+            onClick();
+          });
+          React.useEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be passed by reference in useEffect
+        // and useEffectEvent.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          const onClick2 = useEffectEvent(() => {
+            debounce(onClick);
+            debounce(() => onClick());
+            debounce(() => { onClick() });
+            deboucne(() => debounce(onClick));
+          });
+          useEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          React.useEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          return null;
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Valid because functions created with useEffectEvent can be passed by reference in useEffect
+        // and useEffectEvent.
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          const onClick2 = useEffectEvent(() => {
+            debounce(onClick);
+            debounce(() => onClick());
+            debounce(() => { onClick() });
+            deboucne(() => debounce(onClick));
+          });
+          useEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          React.useEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          return null;
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ theme }) {
+          useEffect(() => {
+            onClick();
+          });
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        component MyComponent(theme: any) {
+          useEffect(() => {
+            onClick();
+          });
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ theme }) {
+          // Can receive arguments
+          const onEvent = useEffectEvent((text) => {
+            console.log(text);
+          });
+
+          useEffect(() => {
+            onEvent('Hello world');
+          });
+          React.useEffect(() => {
+            onEvent('Hello world');
+          });
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        component MyComponent(theme: any) {
+          // Can receive arguments
+          const onEvent = useEffectEvent((text) => {
+            console.log(text);
+          });
+
+          useEffect(() => {
+            onEvent('Hello world');
+          });
+          React.useEffect(() => {
+            onEvent('Hello world');
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be called in useLayoutEffect.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useLayoutEffect(() => {
+            onClick();
+          });
+          React.useLayoutEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Valid because functions created with useEffectEvent can be called in useLayoutEffect.
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useLayoutEffect(() => {
+            onClick();
+          });
+          React.useLayoutEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be called in useInsertionEffect.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useInsertionEffect(() => {
+            onClick();
+          });
+          React.useInsertionEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Valid because functions created with useEffectEvent can be called in useInsertionEffect.
+        component MyComponent(theme) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useInsertionEffect(() => {
+            onClick();
+          });
+          React.useInsertionEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect 
+        // and useInsertionEffect.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          const onClick2 = useEffectEvent(() => {
+            debounce(onClick);
+            debounce(() => onClick());
+            debounce(() => { onClick() });
+            deboucne(() => debounce(onClick));
+          });
+          useLayoutEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          React.useLayoutEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          useInsertionEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          React.useInsertionEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          return null;
+        }
+      `,
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect.
+        // and useInsertionEffect.
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          const onClick2 = useEffectEvent(() => {
+            debounce(onClick);
+            debounce(() => onClick());
+            debounce(() => { onClick() });
+            deboucne(() => debounce(onClick));
+          });
+          useLayoutEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          React.useLayoutEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          useInsertionEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          React.useInsertionEffect(() => {
+            let id = setInterval(() => onClick(), 100);
+            return () => clearInterval(onClick);
+          }, []);
+          return null;
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        component Button(cond: boolean) {
+          if (cond) {
+            useConditionalHook();
+          }
+        }
+      `,
+      errors: [conditionalError('useConditionalHook')],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        hook useTest(cond: boolean) {
+          if (cond) {
+            useConditionalHook();
+          }
+        }
+      `,
+      errors: [conditionalError('useConditionalHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithConditionalHook() {
+          if (cond) {
+            useConditionalHook();
+          }
+        }
+      `,
+      errors: [conditionalError('useConditionalHook')],
+    },
+    {
+      code: normalizeIndent`
+        Hook.useState();
+        Hook._useState();
+        Hook.use42();
+        Hook.useHook();
+        Hook.use_hook();
+      `,
+      errors: [
+        topLevelError('Hook.useState'),
+        topLevelError('Hook.use42'),
+        topLevelError('Hook.useHook'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        class C {
+          m() {
+            This.useHook();
+            Super.useHook();
+          }
+        }
+      `,
+      errors: [classError('This.useHook'), classError('Super.useHook')],
+    },
+    {
+      code: normalizeIndent`
+        // This is a false positive (it's valid) that unfortunately
+        // we cannot avoid. Prefer to rename it to not start with "use"
+        class Foo extends Component {
+          render() {
+            if (cond) {
+              FooStore.useFeatureFlag();
+            }
+          }
+        }
+      `,
+      errors: [classError('FooStore.useFeatureFlag')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithConditionalHook() {
+          if (cond) {
+            Namespace.useConditionalHook();
+          }
+        }
+      `,
+      errors: [conditionalError('Namespace.useConditionalHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function createComponent() {
+          return function ComponentWithConditionalHook() {
+            if (cond) {
+              useConditionalHook();
+            }
+          }
+        }
+      `,
+      errors: [conditionalError('useConditionalHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookWithConditionalHook() {
+          if (cond) {
+            useConditionalHook();
+          }
+        }
+      `,
+      errors: [conditionalError('useConditionalHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function createHook() {
+          return function useHookWithConditionalHook() {
+            if (cond) {
+              useConditionalHook();
+            }
+          }
+        }
+      `,
+      errors: [conditionalError('useConditionalHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithTernaryHook() {
+          cond ? useTernaryHook() : null;
+        }
+      `,
+      errors: [conditionalError('useTernaryHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function ComponentWithHookInsideCallback() {
+          useEffect(() => {
+            useHookInsideCallback();
+          });
+        }
+      `,
+      errors: [genericError('useHookInsideCallback')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function createComponent() {
+          return function ComponentWithHookInsideCallback() {
+            useEffect(() => {
+              useHookInsideCallback();
+            });
+          }
+        }
+      `,
+      errors: [genericError('useHookInsideCallback')],
+    },
+    {
+      code: normalizeIndent`
+        // 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: normalizeIndent`
+        // 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: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function ComponentWithHookInsideCallback() {
+          function handleClick() {
+            useState();
+          }
+        }
+      `,
+      errors: [functionError('useState', 'handleClick')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's a common misunderstanding.
+        // We *could* make it valid but the runtime error could be confusing.
+        function createComponent() {
+          return function ComponentWithHookInsideCallback() {
+            function handleClick() {
+              useState();
+            }
+          }
+        }
+      `,
+      errors: [functionError('useState', 'handleClick')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithHookInsideLoop() {
+          while (cond) {
+            useHookInsideLoop();
+          }
+        }
+      `,
+      errors: [loopError('useHookInsideLoop')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithHookInsideLoop() {
+          do {
+            useHookInsideLoop();
+          } while (cond);
+        }
+      `,
+      errors: [loopError('useHookInsideLoop')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function ComponentWithHookInsideLoop() {
+          do {
+            foo();
+          } while (useHookInsideLoop());
+        }
+      `,
+      errors: [loopError('useHookInsideLoop')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function renderItem() {
+          useState();
+        }
+
+        function List(props) {
+          return props.items.map(renderItem);
+        }
+      `,
+      errors: [functionError('useState', 'renderItem')],
+    },
+    {
+      code: normalizeIndent`
+        // Currently invalid because it violates the convention and removes the "taint"
+        // from a hook. We *could* make it valid to avoid some false positives but let's
+        // ensure that we don't break the "renderItem" and "normalFunctionWithConditionalHook"
+        // cases which must remain invalid.
+        function normalFunctionWithHook() {
+          useHookInsideNormalFunction();
+        }
+      `,
+      errors: [
+        functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // These are neither functions nor hooks.
+        function _normalFunctionWithHook() {
+          useHookInsideNormalFunction();
+        }
+        function _useNotAHook() {
+          useHookInsideNormalFunction();
+        }
+      `,
+      errors: [
+        functionError('useHookInsideNormalFunction', '_normalFunctionWithHook'),
+        functionError('useHookInsideNormalFunction', '_useNotAHook'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function normalFunctionWithConditionalHook() {
+          if (cond) {
+            useHookInsideNormalFunction();
+          }
+        }
+      `,
+      errors: [
+        functionError(
+          'useHookInsideNormalFunction',
+          'normalFunctionWithConditionalHook'
+        ),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookInLoops() {
+          while (a) {
+            useHook1();
+            if (b) return;
+            useHook2();
+          }
+          while (c) {
+            useHook3();
+            if (d) return;
+            useHook4();
+          }
+        }
+      `,
+      errors: [
+        loopError('useHook1'),
+        loopError('useHook2'),
+        loopError('useHook3'),
+        loopError('useHook4'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookInLoops() {
+          while (a) {
+            useHook1();
+            if (b) continue;
+            useHook2();
+          }
+        }
+      `,
+      errors: [loopError('useHook1'), loopError('useHook2', true)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookInLoops() {
+          do {
+            useHook1();
+            if (a) return;
+            useHook2();
+          } while (b);
+
+          do {
+            useHook3();
+            if (c) return;
+            useHook4();
+          } while (d)
+        }
+      `,
+      errors: [
+        loopError('useHook1'),
+        loopError('useHook2'),
+        loopError('useHook3'),
+        loopError('useHook4'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHookInLoops() {
+          do {
+            useHook1();
+            if (a) continue;
+            useHook2();
+          } while (b);
+        }
+      `,
+      errors: [loopError('useHook1'), loopError('useHook2', true)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useLabeledBlock() {
+          label: {
+            if (a) break label;
+            useHook();
+          }
+        }
+      `,
+      errors: [conditionalError('useHook')],
+    },
+    {
+      code: normalizeIndent`
+        // Currently invalid.
+        // These are variations capturing the current heuristic--
+        // we only allow hooks in PascalCase or useFoo functions.
+        // We *could* make some of these valid. But before doing it,
+        // consider specific cases documented above that contain reasoning.
+        function a() { useState(); }
+        const whatever = function b() { useState(); };
+        const c = () => { useState(); };
+        let d = () => useState();
+        e = () => { useState(); };
+        ({f: () => { useState(); }});
+        ({g() { useState(); }});
+        const {j = () => { useState(); }} = {};
+        ({k = () => { useState(); }} = {});
+      `,
+      errors: [
+        functionError('useState', 'a'),
+        functionError('useState', 'b'),
+        functionError('useState', 'c'),
+        functionError('useState', 'd'),
+        functionError('useState', 'e'),
+        functionError('useState', 'f'),
+        functionError('useState', 'g'),
+        functionError('useState', 'j'),
+        functionError('useState', 'k'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          if (a) return;
+          useState();
+        }
+      `,
+      errors: [conditionalError('useState', true)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          if (a) return;
+          if (b) {
+            console.log('true');
+          } else {
+            console.log('false');
+          }
+          useState();
+        }
+      `,
+      errors: [conditionalError('useState', true)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          if (b) {
+            console.log('true');
+          } else {
+            console.log('false');
+          }
+          if (a) return;
+          useState();
+        }
+      `,
+      errors: [conditionalError('useState', true)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          a && useHook1();
+          b && useHook2();
+        }
+      `,
+      errors: [conditionalError('useHook1'), conditionalError('useHook2')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because it's dangerous and might not warn otherwise.
+        // This *must* be invalid.
+        function useHook() {
+          try {
+            f();
+            useState();
+          } catch {}
+        }
+      `,
+      errors: [
+        // NOTE: This is an error since `f()` could possibly throw.
+        conditionalError('useState'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // 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'),
+        conditionalError('useState'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        // 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: normalizeIndent`
+        // 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: normalizeIndent`
+        // 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: normalizeIndent`
+        // 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: normalizeIndent`
+        // 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: normalizeIndent`
+        // 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')],
+    },
+    {
+      code: normalizeIndent`
+        class ClassComponentWithFeatureFlag extends React.Component {
+          render() {
+            if (foo) {
+              useFeatureFlag();
+            }
+          }
+        }
+      `,
+      errors: [classError('useFeatureFlag')],
+    },
+    {
+      code: normalizeIndent`
+        class ClassComponentWithHook extends React.Component {
+          render() {
+            React.useState();
+          }
+        }
+      `,
+      errors: [classError('React.useState')],
+    },
+    {
+      code: normalizeIndent`
+        (class {useHook = () => { useState(); }});
+      `,
+      errors: [classError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        (class {useHook() { useState(); }});
+      `,
+      errors: [classError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        (class {h = () => { useState(); }});
+      `,
+      errors: [classError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        (class {i() { useState(); }});
+      `,
+      errors: [classError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        async function AsyncComponent() {
+          useState();
+        }
+      `,
+      errors: [asyncComponentHookError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        async function useAsyncHook() {
+          useState();
+        }
+      `,
+      errors: [asyncComponentHookError('useState')],
+    },
+    {
+      code: normalizeIndent`
+        async function Page() {
+          useId();
+          React.useId();
+        }
+      `,
+      errors: [
+        asyncComponentHookError('useId'),
+        asyncComponentHookError('React.useId'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        async function useAsyncHook() {
+          useId();
+        }
+      `,
+      errors: [asyncComponentHookError('useId')],
+    },
+    {
+      code: normalizeIndent`
+        async function notAHook() {
+          useId();
+        }
+      `,
+      errors: [functionError('useId', 'notAHook')],
+    },
+    {
+      code: normalizeIndent`
+        Hook.use();
+        Hook._use();
+        Hook.useState();
+        Hook._useState();
+        Hook.use42();
+        Hook.useHook();
+        Hook.use_hook();
+      `,
+      errors: [
+        topLevelError('Hook.use'),
+        topLevelError('Hook.useState'),
+        topLevelError('Hook.use42'),
+        topLevelError('Hook.useHook'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function notAComponent() {
+          use(promise);
+        }
+      `,
+      errors: [functionError('use', 'notAComponent')],
+    },
+    {
+      code: normalizeIndent`
+        const text = use(promise);
+        function App() {
+          return <Text text={text} />
+        }
+      `,
+      errors: [topLevelError('use')],
+    },
+    {
+      code: normalizeIndent`
+        class C {
+          m() {
+            use(promise);
+          }
+        }
+      `,
+      errors: [classError('use')],
+    },
+    {
+      code: normalizeIndent`
+        async function AsyncComponent() {
+          use();
+        }
+      `,
+      errors: [asyncComponentHookError('use')],
+    },
+    {
+      code: normalizeIndent`
+        function App({p1, p2}) {
+          try {
+            use(p1);
+          } catch (error) {
+            console.error(error);
+          }
+          use(p2);
+          return <div>App</div>;
+        }
+      `,
+      errors: [tryCatchUseError('use')],
+    },
+    {
+      code: normalizeIndent`
+        function App({p1, p2}) {
+          try {
+            doSomething();
+          } catch {
+            use(p1);
+          }
+          use(p2);
+          return <div>App</div>;
+        }
+      `,
+      errors: [tryCatchUseError('use')],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid: useEffectEvent should not be callable in regular custom hooks without additional configuration
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useCustomHook(() => {
+            onClick();
+          });
+        }
+      `,
+      errors: [useEffectEventError('onClick', true)],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+      // Component syntax version
+      // Invalid: useEffectEvent should not be callable in regular custom hooks without additional configuration
+      component MyComponent() {
+        const onClick = useEffectEvent(() => {
+          showNotification(theme);
+        });
+        useCustomHook(() => {
+          onClick();
+        });
+      }
+      `,
+      errors: [useEffectEventError('onClick', true)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useWrongHook(() => {
+            onClick();
+          });
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: 'useMyEffect',
+        },
+      },
+      errors: [useEffectEventError('onClick', true)],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useWrongHook(() => {
+            onClick();
+          });
+        }
+      `,
+      settings: {
+        'react-hooks': {
+          additionalEffectHooks: 'useMyEffect',
+        },
+      },
+      errors: [useEffectEventError('onClick', true)],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          return <Child onClick={onClick}></Child>;
+        }
+      `,
+      errors: [useEffectEventError('onClick', false)],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          return <Child onClick={onClick}></Child>;
+        }
+      `,
+      errors: [useEffectEventError('onClick', false)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because useEffectEvent is being passed down
+        function MyComponent({ theme }) {
+          return <Child onClick={useEffectEvent(() => {
+            showNotification(theme);
+          })} />;
+        }
+      `,
+      errors: [{...useEffectEventError(null, false), line: 4}],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Invalid because useEffectEvent is being passed down
+        component MyComponent(theme: any) {
+          return <Child onClick={useEffectEvent(() => {
+            showNotification(theme);
+          })} />;
+        }
+      `,
+      errors: [{...useEffectEventError(null, false), line: 5}],
+    },
+    {
+      code: normalizeIndent`
+        // This should error even though it shares an identifier name with the below
+        function MyComponent({theme}) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme)
+          });
+          return <Child onClick={onClick} />
+        }
+
+        // The useEffectEvent function shares an identifier name with the above
+        function MyOtherComponent({theme}) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme)
+          });
+          return <Child onClick={() => onClick()} />
+        }
+
+        // The useEffectEvent function shares an identifier name with the above
+        function MyLastComponent({theme}) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme)
+          });
+          useEffect(() => {
+            onClick(); // No error here, errors on all other uses
+            onClick;
+          })
+          return <Child />
+        }
+      `,
+      errors: [
+        {...useEffectEventError('onClick', false), line: 7},
+        {...useEffectEventError('onClick', true), line: 15},
+      ],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // This should error even though it shares an identifier name with the below
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme)
+          });
+          return <Child onClick={onClick} />
+        }
+
+        // The useEffectEvent function shares an identifier name with the above
+        component MyOtherComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme)
+          });
+          return <Child onClick={() => onClick()} />
+        }
+
+        // The useEffectEvent function shares an identifier name with the above
+        component MyLastComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme)
+          });
+          useEffect(() => {
+            onClick(); // No error here, errors on all other uses
+            onClick;
+          })
+          return <Child />
+        }
+      `,
+      errors: [
+        {...useEffectEventError('onClick', false), line: 8},
+        {...useEffectEventError('onClick', true), line: 16},
+      ],
+    },
+    {
+      code: normalizeIndent`
+        const MyComponent = ({ theme }) => {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          return <Child onClick={onClick}></Child>;
+        }
+      `,
+      errors: [useEffectEventError('onClick', false)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because onClick is being aliased to foo but not invoked
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          let foo = onClick;
+          return <Bar onClick={foo} />
+        }
+      `,
+      errors: [{...useEffectEventError('onClick', false), line: 7}],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Invalid because onClick is being aliased to foo but not invoked
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          let foo = onClick;
+          return <Bar onClick={foo} />
+        }
+      `,
+      errors: [{...useEffectEventError('onClick', false), line: 8}],
+    },
+    {
+      code: normalizeIndent`
+        // Should error because it's being passed down to JSX, although it's been referenced once
+        // in an effect
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(them);
+          });
+          useEffect(() => {
+            setTimeout(onClick, 100);
+          });
+          return <Child onClick={onClick} />
+        }
+      `,
+      errors: [useEffectEventError('onClick', false)],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Component syntax version
+        // Should error because it's being passed down to JSX, although it's been referenced once
+        // in an effect
+        component MyComponent(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(them);
+          });
+          useEffect(() => {
+            setTimeout(onClick, 100);
+          });
+          return <Child onClick={onClick} />
+        }
+      `,
+      errors: [useEffectEventError('onClick', false)],
+    },
+    {
+      code: normalizeIndent`
+        // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          // error message 1
+          const onClick2 = () => { onClick() };
+          // error message 2
+          const onClick3 = useCallback(() => onClick(), []);
+          // error message 3
+          const onClick4 = onClick;
+          return <>
+            {/** error message 4 */}
+            <Child onClick={onClick}></Child>
+            <Child onClick={onClick2}></Child>
+            <Child onClick={onClick3}></Child>
+          </>;
+        }
+      `,
+      // Explicitly test error messages here for various cases
+      errors: [
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          'Effects and Effect Events in the same component.',
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          'Effects and Effect Events in the same component.',
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          `Effects and Effect Events in the same component. ` +
+          `It cannot be assigned to a variable or passed down.`,
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          `Effects and Effect Events in the same component. ` +
+          `It cannot be assigned to a variable or passed down.`,
+      ],
+    },
+    {
+      syntax: 'flow',
+      code: normalizeIndent`
+        // Hook syntax version
+        // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures.
+        hook useMyHook(theme: any) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          // error message 1
+          const onClick2 = () => { onClick() };
+          // error message 2
+          const onClick3 = useCallback(() => onClick(), []);
+          // error message 3
+          const onClick4 = onClick;
+          return <>
+            {/** error message 4 */}
+            <Child onClick={onClick}></Child>
+            <Child onClick={onClick2}></Child>
+            <Child onClick={onClick3}></Child>
+          </>;
+        }
+      `,
+      // Explicitly test error messages here for various cases
+      errors: [
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          'Effects and Effect Events in the same component.',
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          'Effects and Effect Events in the same component.',
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          `Effects and Effect Events in the same component. ` +
+          `It cannot be assigned to a variable or passed down.`,
+        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+          `Effects and Effect Events in the same component. ` +
+          `It cannot be assigned to a variable or passed down.`,
+      ],
+    },
+  ],
+};
+
+function conditionalError(hook, hasPreviousFinalizer = false) {
+  return {
+    message:
+      `React Hook "${hook}" is called conditionally. React Hooks must be ` +
+      'called in the exact same order in every component render.' +
+      (hasPreviousFinalizer
+        ? ' Did you accidentally call a React Hook after an early return?'
+        : ''),
+  };
+}
+
+function loopError(hook) {
+  return {
+    message:
+      `React Hook "${hook}" may be executed more than once. Possibly ` +
+      'because it is called in a loop. React Hooks must be called in the ' +
+      'exact same order in every component render.',
+  };
+}
+
+function functionError(hook, fn) {
+  return {
+    message:
+      `React Hook "${hook}" is called in function "${fn}" that is neither ` +
+      'a React function component nor a custom React Hook function.' +
+      ' React component names must start with an uppercase letter.' +
+      ' React Hook names must start with the word "use".',
+  };
+}
+
+function genericError(hook) {
+  return {
+    message:
+      `React Hook "${hook}" cannot be called inside a callback. React Hooks ` +
+      'must be called in a React function component or a custom React ' +
+      '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.',
+  };
+}
+
+function classError(hook) {
+  return {
+    message:
+      `React Hook "${hook}" cannot be called in a class component. React Hooks ` +
+      'must be called in a React function component or a custom React ' +
+      'Hook function.',
+  };
+}
+
+function useEffectEventError(fn, called) {
+  if (fn === null) {
+    return {
+      message:
+        `React Hook "useEffectEvent" can only be called at the top level of your component.` +
+        ` It cannot be passed down.`,
+    };
+  }
+
+  return {
+    message:
+      `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+      'Effects and Effect Events in the same component.' +
+      (called ? '' : ' It cannot be assigned to a variable or passed down.'),
+  };
+}
+
+function asyncComponentHookError(fn) {
+  return {
+    message: `React Hook "${fn}" cannot be called in an async function.`,
+  };
+}
+
+function tryCatchUseError(fn) {
+  return {
+    message: `React Hook "${fn}" cannot be called in a try/catch block.`,
+  };
+}
+
+// For easier local testing
+if (!process.env.CI) {
+  let only = [];
+  let skipped = [];
+  [...allTests.valid, ...allTests.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;
+  };
+  allTests.valid = allTests.valid.filter(predicate);
+  allTests.invalid = allTests.invalid.filter(predicate);
+}
+
+function filteredTests(predicate) {
+  return {
+    valid: allTests.valid.filter(predicate),
+    invalid: allTests.invalid.filter(predicate),
+  };
+}
+
+const flowTests = filteredTests(t => t.syntax == null || t.syntax === 'flow');
+const tests = filteredTests(t => t.syntax !== 'flow');
+
+allTests.valid.forEach(t => delete t.syntax);
+allTests.invalid.forEach(t => delete t.syntax);
+
+describe('rules-of-hooks/rules-of-hooks', () => {
+  const parserOptionsV7 = {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 6,
+    sourceType: 'module',
+  };
+
+  const languageOptionsV9 = {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  };
+
+  new ESLintTesterV7({
+    parser: require.resolve('babel-eslint'),
+    parserOptions: parserOptionsV7,
+  }).run('eslint: v7, parser: babel-eslint', ReactHooksESLintRule, tests);
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@babel/eslint-parser'),
+    },
+  }).run(
+    'eslint: v9, parser: @babel/eslint-parser',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('hermes-eslint'),
+    parserOptions: {
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    },
+  }).run('eslint: v7, parser: hermes-eslint', ReactHooksESLintRule, flowTests);
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('hermes-eslint'),
+      parserOptions: {
+        sourceType: 'module',
+        enableExperimentalComponentSyntax: true,
+      },
+    },
+  }).run('eslint: v9, parser: hermes-eslint', ReactHooksESLintRule, flowTests);
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v2'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@2.x',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v2'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@2.x',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v3'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@3.x',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v3'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@3.x',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v4'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@4.x',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v4'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@4.x',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV7({
+    parser: require.resolve('@typescript-eslint/parser-v5'),
+    parserOptions: parserOptionsV7,
+  }).run(
+    'eslint: v7, parser: @typescript-eslint/parser@^5.0.0-0',
+    ReactHooksESLintRule,
+    tests
+  );
+
+  new ESLintTesterV9({
+    languageOptions: {
+      ...languageOptionsV9,
+      parser: require('@typescript-eslint/parser-v5'),
+    },
+  }).run(
+    'eslint: v9, parser: @typescript-eslint/parser@^5.0.0',
+    ReactHooksESLintRule,
+    tests
+  );
+});
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleFlow-test.ts b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleFlow-test.ts
new file mode 100644
index 00000000000..29d1437f86c
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleFlow-test.ts
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {RuleTester} from 'eslint';
+import {allRules} from '../src/shared/ReactCompiler';
+
+const ESLintTesterV8 = require('eslint-v8').RuleTester;
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+function normalizeIndent(strings: TemplateStringsArray): string {
+  const codeLines = strings[0]?.split('\n') ?? [];
+  const leftPadding = codeLines[1]?.match(/\s+/)![0] ?? '';
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+type CompilerTestCases = {
+  valid: RuleTester.ValidTestCase[];
+  invalid: RuleTester.InvalidTestCase[];
+};
+
+const tests: CompilerTestCases = {
+  valid: [
+    // ===========================================
+    // Tests for mayContainReactCode heuristic with Flow syntax
+    // Files that should be SKIPPED (no React-like function names)
+    // These contain code that WOULD trigger errors if compiled,
+    // but since the heuristic skips them, no errors are reported.
+    // ===========================================
+    {
+      name: '[Heuristic/Flow] Skips files with only lowercase utility functions',
+      filename: 'utils.js',
+      code: normalizeIndent`
+        function helper(obj) {
+          obj.key = 'value';
+          return obj;
+        }
+      `,
+    },
+    {
+      name: '[Heuristic/Flow] Skips lowercase arrow functions even with mutations',
+      filename: 'helpers.js',
+      code: normalizeIndent`
+        const processData = (input) => {
+          input.modified = true;
+          return input;
+        };
+      `,
+    },
+  ],
+  invalid: [
+    // ===========================================
+    // Tests for mayContainReactCode heuristic with Flow component/hook syntax
+    // These use Flow's component/hook declarations which should be detected
+    // ===========================================
+    {
+      name: '[Heuristic/Flow] Compiles Flow component declaration - detects prop mutation',
+      filename: 'component.js',
+      code: normalizeIndent`
+        component MyComponent(a: {key: string}) {
+          a.key = 'value';
+          return <div />;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic/Flow] Compiles exported Flow component declaration - detects prop mutation',
+      filename: 'component.js',
+      code: normalizeIndent`
+        export component MyComponent(a: {key: string}) {
+          a.key = 'value';
+          return <div />;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic/Flow] Compiles default exported Flow component declaration - detects prop mutation',
+      filename: 'component.js',
+      code: normalizeIndent`
+        export default component MyComponent(a: {key: string}) {
+          a.key = 'value';
+          return <div />;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic/Flow] Compiles Flow hook declaration - detects argument mutation',
+      filename: 'hooks.js',
+      code: normalizeIndent`
+        hook useMyHook(a: {key: string}) {
+          a.key = 'value';
+          return a;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props or hook arguments/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic/Flow] Compiles exported Flow hook declaration - detects argument mutation',
+      filename: 'hooks.js',
+      code: normalizeIndent`
+        export hook useMyHook(a: {key: string}) {
+          a.key = 'value';
+          return a;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props or hook arguments/,
+        },
+      ],
+    },
+  ],
+};
+
+const eslintTester = new ESLintTesterV8({
+  parser: require.resolve('hermes-eslint'),
+  parserOptions: {
+    sourceType: 'module',
+    enableExperimentalComponentSyntax: true,
+  },
+});
+eslintTester.run('react-compiler', allRules['immutability'].rule, tests);
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts
new file mode 100644
index 00000000000..a0d0f6bdbc8
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts
@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {RuleTester} from 'eslint';
+import {allRules} from '../src/shared/ReactCompiler';
+
+const ESLintTesterV8 = require('eslint-v8').RuleTester;
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+function normalizeIndent(strings: TemplateStringsArray): string {
+  const codeLines = strings[0]?.split('\n') ?? [];
+  const leftPadding = codeLines[1]?.match(/\s+/)![0] ?? '';
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+type CompilerTestCases = {
+  valid: RuleTester.ValidTestCase[];
+  invalid: RuleTester.InvalidTestCase[];
+};
+
+const tests: CompilerTestCases = {
+  valid: [
+    {
+      name: 'Basic example',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function Button(props) {
+          return null;
+        }
+      `,
+    },
+    {
+      name: 'Repro for hooks as normal values',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function Button(props) {
+          const scrollview = React.useRef<ScrollView>(null);
+          return <Button thing={scrollview} />;
+        }
+      `,
+    },
+    // ===========================================
+    // Tests for mayContainReactCode heuristic
+    // Files that should be SKIPPED (no React-like function names)
+    // These contain code that WOULD trigger errors if compiled,
+    // but since the heuristic skips them, no errors are reported.
+    // ===========================================
+    {
+      name: '[Heuristic] Skips files with only lowercase utility functions',
+      filename: 'utils.ts',
+      // This mutates an argument, which would be flagged in a component/hook,
+      // but this file is skipped because there are no React-like function names
+      code: normalizeIndent`
+        function helper(obj) {
+          obj.key = 'value';
+          return obj;
+        }
+      `,
+    },
+    {
+      name: '[Heuristic] Skips lowercase arrow functions even with mutations',
+      filename: 'helpers.ts',
+      // Would be flagged if compiled, but skipped due to lowercase name
+      code: normalizeIndent`
+        const processData = (input) => {
+          input.modified = true;
+          return input;
+        };
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'Mutating useState value',
+      filename: 'test.tsx',
+      code: `
+        import { useState } from 'react';
+        function Component(props) {
+          // typescript syntax that hermes-parser doesn't understand yet
+          const x: \`foo\${1}\` = 'foo1';
+          const [state, setState] = useState({a: 0});
+          state.a = 1;
+          return <div>{props.foo}</div>;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying a value returned from 'useState\(\)'/,
+          line: 7,
+        },
+      ],
+    },
+    // ===========================================
+    // Tests for mayContainReactCode heuristic
+    // Files that SHOULD be compiled (have React-like function names)
+    // These contain violations to prove compilation happens.
+    // ===========================================
+    {
+      name: '[Heuristic] Compiles PascalCase function declaration - detects prop mutation',
+      filename: 'component.tsx',
+      code: normalizeIndent`
+        function MyComponent({a}) {
+          a.key = 'value';
+          return <div />;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic] Compiles PascalCase arrow function - detects prop mutation',
+      filename: 'component.tsx',
+      code: normalizeIndent`
+        const MyComponent = ({a}) => {
+          a.key = 'value';
+          return <div />;
+        };
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic] Compiles PascalCase function expression - detects prop mutation',
+      filename: 'component.tsx',
+      code: normalizeIndent`
+        const MyComponent = function({a}) {
+          a.key = 'value';
+          return <div />;
+        };
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic] Compiles exported function declaration - detects prop mutation',
+      filename: 'component.tsx',
+      code: normalizeIndent`
+        export function MyComponent({a}) {
+          a.key = 'value';
+          return <div />;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic] Compiles exported arrow function - detects prop mutation',
+      filename: 'component.tsx',
+      code: normalizeIndent`
+        export const MyComponent = ({a}) => {
+          a.key = 'value';
+          return <div />;
+        };
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+    {
+      name: '[Heuristic] Compiles default exported function - detects prop mutation',
+      filename: 'component.tsx',
+      code: normalizeIndent`
+        export default function MyComponent({a}) {
+          a.key = 'value';
+          return <div />;
+        }
+      `,
+      errors: [
+        {
+          message: /Modifying component props/,
+        },
+      ],
+    },
+  ],
+};
+
+const eslintTester = new ESLintTesterV8({
+  parser: require.resolve('@typescript-eslint/parser-v5'),
+});
+eslintTester.run('react-compiler', allRules['immutability'].rule, tests);
diff --git a/packages/eslint-plugin-react-hooks/babel.config.js b/packages/eslint-plugin-react-hooks/babel.config.js
new file mode 100644
index 00000000000..3b947a7163b
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/babel.config.js
@@ -0,0 +1,8 @@
+/**
+ * This file is purely being used for local jest runs, and doesn't participate in the build process.
+ */
+'use strict';
+
+module.exports = {
+  extends: '../../babel.config-ts.js',
+};
diff --git a/packages/eslint-plugin-react-hooks/index.js b/packages/eslint-plugin-react-hooks/index.js
new file mode 100644
index 00000000000..ce26a10c315
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/index.js
@@ -0,0 +1 @@
+module.exports = require('./src/index.ts');
diff --git a/packages/eslint-plugin-react-hooks/jest.config.js b/packages/eslint-plugin-react-hooks/jest.config.js
new file mode 100644
index 00000000000..aa501cd4261
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/jest.config.js
@@ -0,0 +1,12 @@
+'use strict';
+
+process.env.NODE_ENV = 'development';
+
+module.exports = {
+  setupFiles: [require.resolve('../../scripts/jest/setupEnvironment.js')],
+  moduleFileExtensions: ['ts', 'js', 'json'],
+  moduleNameMapper: {
+    '^babel-plugin-react-compiler$':
+      '<rootDir>/../../compiler/packages/babel-plugin-react-compiler/dist/index.js',
+  },
+};
diff --git a/packages/eslint-plugin-react-hooks/npm/index.d.ts b/packages/eslint-plugin-react-hooks/npm/index.d.ts
new file mode 100644
index 00000000000..7516dc1e846
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/npm/index.d.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import reactHooks from './cjs/eslint-plugin-react-hooks';
+
+export = reactHooks;
diff --git a/packages/eslint-plugin-react-hooks/npm/index.js b/packages/eslint-plugin-react-hooks/npm/index.js
new file mode 100644
index 00000000000..3e8352af1e6
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/npm/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// TODO: this doesn't make sense for an ESLint rule.
+// We need to fix our build process to not create bundles for "raw" packages like this.
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/eslint-plugin-react-hooks.production.js');
+} else {
+  module.exports = require('./cjs/eslint-plugin-react-hooks.development.js');
+}
+
+// Hint to Node’s cjs-module-lexer to make named imports work
+// https://github.com/facebook/react/issues/34801#issuecomment-3433478810
+// eslint-disable-next-line ft-flow/no-unused-expressions
+0 &&
+  (module.exports = {
+    meta: true,
+    rules: true,
+    configs: true,
+  });
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
new file mode 100644
index 00000000000..9a8f8ac353f
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "eslint-plugin-react-hooks",
+  "description": "ESLint rules for React Hooks",
+  "version": "7.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/eslint-plugin-react-hooks"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "cjs",
+    "index.js",
+    "index.d.ts"
+  ],
+  "keywords": [
+    "eslint",
+    "eslint-plugin",
+    "eslintplugin",
+    "react"
+  ],
+  "scripts": {
+    "build:compiler": "cd ../../compiler && yarn workspace babel-plugin-react-compiler build",
+    "test": "yarn build:compiler && jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://react.dev/",
+  "peerDependencies": {
+    "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/parser": "^7.24.4",
+    "hermes-parser": "^0.25.1",
+    "zod": "^3.25.0 || ^4.0.0",
+    "zod-validation-error": "^3.5.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.11.4",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/types": "^7.19.0",
+    "@tsconfig/strictest": "^2.0.5",
+    "@types/eslint": "^9.6.1",
+    "@types/estree": "^1.0.6",
+    "@types/estree-jsx": "^1.0.5",
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/parser-v2": "npm:@typescript-eslint/parser@^2.26.0",
+    "@typescript-eslint/parser-v3": "npm:@typescript-eslint/parser@^3.10.0",
+    "@typescript-eslint/parser-v4": "npm:@typescript-eslint/parser@^4.1.0",
+    "@typescript-eslint/parser-v5": "npm:@typescript-eslint/parser@^5.62.0",
+    "babel-eslint": "^10.0.3",
+    "eslint-v7": "npm:eslint@^7.7.0",
+    "eslint-v8": "npm:eslint@^8.57.1",
+    "eslint-v9": "npm:eslint@^9.0.0",
+    "jest": "^29.5.0",
+    "typescript": "^5.4.3"
+  }
+}
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/LICENSE b/packages/eslint-plugin-react-hooks/src/code-path-analysis/LICENSE
new file mode 100644
index 00000000000..b607bb36e96
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/LICENSE
@@ -0,0 +1,19 @@
+Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
+
+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/eslint-plugin-react-hooks/src/code-path-analysis/README.md b/packages/eslint-plugin-react-hooks/src/code-path-analysis/README.md
new file mode 100644
index 00000000000..1109cb2f387
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/README.md
@@ -0,0 +1,6 @@
+# Code Path Analyzer
+
+This code is a forked version of ESLints Code Path Analyzer which includes
+support for Component Syntax.
+
+Forked from: https://github.com/eslint/eslint/tree/main/lib/linter/code-path-analysis
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/assert.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/assert.js
new file mode 100644
index 00000000000..d6dc3539f3a
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/assert.js
@@ -0,0 +1,9 @@
+'use strict';
+
+function assert(cond) {
+  if (!cond) {
+    throw new Error('Assertion violated.');
+  }
+}
+
+module.exports = assert;
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js
new file mode 100644
index 00000000000..8dd76e57129
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js
@@ -0,0 +1,802 @@
+'use strict';
+
+/* eslint-disable react-internal/no-primitive-constructors */
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+// eslint-disable-next-line
+const assert = require('./assert');
+// eslint-disable-next-line
+const CodePath = require('./code-path');
+// eslint-disable-next-line
+const CodePathSegment = require('./code-path-segment');
+// eslint-disable-next-line
+const IdGenerator = require('./id-generator');
+
+const breakableTypePattern =
+  /^(?:(?:Do)?While|For(?:In|Of)?|Switch)Statement$/u;
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Checks whether or not a given node is a `case` node (not `default` node).
+ * @param {ASTNode} node A `SwitchCase` node to check.
+ * @returns {boolean} `true` if the node is a `case` node (not `default` node).
+ */
+function isCaseNode(node) {
+  return Boolean(node.test);
+}
+
+/**
+ * Checks if a given node appears as the value of a PropertyDefinition node.
+ * @param {ASTNode} node THe node to check.
+ * @returns {boolean} `true` if the node is a PropertyDefinition value,
+ *      false if not.
+ */
+function isPropertyDefinitionValue(node) {
+  const parent = node.parent;
+
+  return (
+    parent && parent.type === 'PropertyDefinition' && parent.value === node
+  );
+}
+
+/**
+ * Checks whether the given logical operator is taken into account for the code
+ * path analysis.
+ * @param {string} operator The operator found in the LogicalExpression node
+ * @returns {boolean} `true` if the operator is "&&" or "||" or "??"
+ */
+function isHandledLogicalOperator(operator) {
+  return operator === '&&' || operator === '||' || operator === '??';
+}
+
+/**
+ * Checks whether the given assignment operator is a logical assignment operator.
+ * Logical assignments are taken into account for the code path analysis
+ * because of their short-circuiting semantics.
+ * @param {string} operator The operator found in the AssignmentExpression node
+ * @returns {boolean} `true` if the operator is "&&=" or "||=" or "??="
+ */
+function isLogicalAssignmentOperator(operator) {
+  return operator === '&&=' || operator === '||=' || operator === '??=';
+}
+
+/**
+ * Gets the label if the parent node of a given node is a LabeledStatement.
+ * @param {ASTNode} node A node to get.
+ * @returns {string|null} The label or `null`.
+ */
+function getLabel(node) {
+  if (node.parent.type === 'LabeledStatement') {
+    return node.parent.label.name;
+  }
+  return null;
+}
+
+/**
+ * Checks whether or not a given logical expression node goes different path
+ * between the `true` case and the `false` case.
+ * @param {ASTNode} node A node to check.
+ * @returns {boolean} `true` if the node is a test of a choice statement.
+ */
+function isForkingByTrueOrFalse(node) {
+  const parent = node.parent;
+
+  switch (parent.type) {
+    case 'ConditionalExpression':
+    case 'IfStatement':
+    case 'WhileStatement':
+    case 'DoWhileStatement':
+    case 'ForStatement':
+      return parent.test === node;
+
+    case 'LogicalExpression':
+      return isHandledLogicalOperator(parent.operator);
+
+    case 'AssignmentExpression':
+      return isLogicalAssignmentOperator(parent.operator);
+
+    default:
+      return false;
+  }
+}
+
+/**
+ * Gets the boolean value of a given literal node.
+ *
+ * This is used to detect infinity loops (e.g. `while (true) {}`).
+ * Statements preceded by an infinity loop are unreachable if the loop didn't
+ * have any `break` statement.
+ * @param {ASTNode} node A node to get.
+ * @returns {boolean|undefined} a boolean value if the node is a Literal node,
+ *   otherwise `undefined`.
+ */
+function getBooleanValueIfSimpleConstant(node) {
+  if (node.type === 'Literal') {
+    return Boolean(node.value);
+  }
+  return void 0;
+}
+
+/**
+ * Checks that a given identifier node is a reference or not.
+ *
+ * This is used to detect the first throwable node in a `try` block.
+ * @param {ASTNode} node An Identifier node to check.
+ * @returns {boolean} `true` if the node is a reference.
+ */
+function isIdentifierReference(node) {
+  const parent = node.parent;
+
+  switch (parent.type) {
+    case 'LabeledStatement':
+    case 'BreakStatement':
+    case 'ContinueStatement':
+    case 'ArrayPattern':
+    case 'RestElement':
+    case 'ImportSpecifier':
+    case 'ImportDefaultSpecifier':
+    case 'ImportNamespaceSpecifier':
+    case 'CatchClause':
+      return false;
+
+    case 'FunctionDeclaration':
+    case 'ComponentDeclaration':
+    case 'HookDeclaration':
+    case 'FunctionExpression':
+    case 'ArrowFunctionExpression':
+    case 'ClassDeclaration':
+    case 'ClassExpression':
+    case 'VariableDeclarator':
+      return parent.id !== node;
+
+    case 'Property':
+    case 'PropertyDefinition':
+    case 'MethodDefinition':
+      return parent.key !== node || parent.computed || parent.shorthand;
+
+    case 'AssignmentPattern':
+      return parent.key !== node;
+
+    default:
+      return true;
+  }
+}
+
+/**
+ * Updates the current segment with the head segment.
+ * This is similar to local branches and tracking branches of git.
+ *
+ * To separate the current and the head is in order to not make useless segments.
+ *
+ * In this process, both "onCodePathSegmentStart" and "onCodePathSegmentEnd"
+ * events are fired.
+ * @param {CodePathAnalyzer} analyzer The instance.
+ * @param {ASTNode} node The current AST node.
+ * @returns {void}
+ */
+function forwardCurrentToHead(analyzer, node) {
+  const codePath = analyzer.codePath;
+  const state = CodePath.getState(codePath);
+  const currentSegments = state.currentSegments;
+  const headSegments = state.headSegments;
+  const end = Math.max(currentSegments.length, headSegments.length);
+  let i, currentSegment, headSegment;
+
+  // Fires leaving events.
+  for (i = 0; i < end; ++i) {
+    currentSegment = currentSegments[i];
+    headSegment = headSegments[i];
+
+    if (currentSegment !== headSegment && currentSegment) {
+      if (currentSegment.reachable) {
+        analyzer.emitter.emit('onCodePathSegmentEnd', currentSegment, node);
+      }
+    }
+  }
+
+  // Update state.
+  state.currentSegments = headSegments;
+
+  // Fires entering events.
+  for (i = 0; i < end; ++i) {
+    currentSegment = currentSegments[i];
+    headSegment = headSegments[i];
+
+    if (currentSegment !== headSegment && headSegment) {
+      CodePathSegment.markUsed(headSegment);
+      if (headSegment.reachable) {
+        analyzer.emitter.emit('onCodePathSegmentStart', headSegment, node);
+      }
+    }
+  }
+}
+
+/**
+ * Updates the current segment with empty.
+ * This is called at the last of functions or the program.
+ * @param {CodePathAnalyzer} analyzer The instance.
+ * @param {ASTNode} node The current AST node.
+ * @returns {void}
+ */
+function leaveFromCurrentSegment(analyzer, node) {
+  const state = CodePath.getState(analyzer.codePath);
+  const currentSegments = state.currentSegments;
+
+  for (let i = 0; i < currentSegments.length; ++i) {
+    const currentSegment = currentSegments[i];
+    if (currentSegment.reachable) {
+      analyzer.emitter.emit('onCodePathSegmentEnd', currentSegment, node);
+    }
+  }
+
+  state.currentSegments = [];
+}
+
+/**
+ * Updates the code path due to the position of a given node in the parent node
+ * thereof.
+ *
+ * For example, if the node is `parent.consequent`, this creates a fork from the
+ * current path.
+ * @param {CodePathAnalyzer} analyzer The instance.
+ * @param {ASTNode} node The current AST node.
+ * @returns {void}
+ */
+function preprocess(analyzer, node) {
+  const codePath = analyzer.codePath;
+  const state = CodePath.getState(codePath);
+  const parent = node.parent;
+
+  switch (parent.type) {
+    // The `arguments.length == 0` case is in `postprocess` function.
+    case 'CallExpression':
+      if (
+        parent.optional === true &&
+        parent.arguments.length >= 1 &&
+        parent.arguments[0] === node
+      ) {
+        state.makeOptionalRight();
+      }
+      break;
+    case 'MemberExpression':
+      if (parent.optional === true && parent.property === node) {
+        state.makeOptionalRight();
+      }
+      break;
+
+    case 'LogicalExpression':
+      if (parent.right === node && isHandledLogicalOperator(parent.operator)) {
+        state.makeLogicalRight();
+      }
+      break;
+
+    case 'AssignmentExpression':
+      if (
+        parent.right === node &&
+        isLogicalAssignmentOperator(parent.operator)
+      ) {
+        state.makeLogicalRight();
+      }
+      break;
+
+    case 'ConditionalExpression':
+    case 'IfStatement':
+      /*
+       * Fork if this node is at `consequent`/`alternate`.
+       * `popForkContext()` exists at `IfStatement:exit` and
+       * `ConditionalExpression:exit`.
+       */
+      if (parent.consequent === node) {
+        state.makeIfConsequent();
+      } else if (parent.alternate === node) {
+        state.makeIfAlternate();
+      }
+      break;
+
+    case 'SwitchCase':
+      if (parent.consequent[0] === node) {
+        state.makeSwitchCaseBody(false, !parent.test);
+      }
+      break;
+
+    case 'TryStatement':
+      if (parent.handler === node) {
+        state.makeCatchBlock();
+      } else if (parent.finalizer === node) {
+        state.makeFinallyBlock();
+      }
+      break;
+
+    case 'WhileStatement':
+      if (parent.test === node) {
+        state.makeWhileTest(getBooleanValueIfSimpleConstant(node));
+      } else {
+        assert(parent.body === node);
+        state.makeWhileBody();
+      }
+      break;
+
+    case 'DoWhileStatement':
+      if (parent.body === node) {
+        state.makeDoWhileBody();
+      } else {
+        assert(parent.test === node);
+        state.makeDoWhileTest(getBooleanValueIfSimpleConstant(node));
+      }
+      break;
+
+    case 'ForStatement':
+      if (parent.test === node) {
+        state.makeForTest(getBooleanValueIfSimpleConstant(node));
+      } else if (parent.update === node) {
+        state.makeForUpdate();
+      } else if (parent.body === node) {
+        state.makeForBody();
+      }
+      break;
+
+    case 'ForInStatement':
+    case 'ForOfStatement':
+      if (parent.left === node) {
+        state.makeForInOfLeft();
+      } else if (parent.right === node) {
+        state.makeForInOfRight();
+      } else {
+        assert(parent.body === node);
+        state.makeForInOfBody();
+      }
+      break;
+
+    case 'AssignmentPattern':
+      /*
+       * Fork if this node is at `right`.
+       * `left` is executed always, so it uses the current path.
+       * `popForkContext()` exists at `AssignmentPattern:exit`.
+       */
+      if (parent.right === node) {
+        state.pushForkContext();
+        state.forkBypassPath();
+        state.forkPath();
+      }
+      break;
+
+    default:
+      break;
+  }
+}
+
+/**
+ * Updates the code path due to the type of a given node in entering.
+ * @param {CodePathAnalyzer} analyzer The instance.
+ * @param {ASTNode} node The current AST node.
+ * @returns {void}
+ */
+function processCodePathToEnter(analyzer, node) {
+  let codePath = analyzer.codePath;
+  let state = codePath && CodePath.getState(codePath);
+  const parent = node.parent;
+
+  /**
+   * Creates a new code path and trigger the onCodePathStart event
+   * based on the currently selected node.
+   * @param {string} origin The reason the code path was started.
+   * @returns {void}
+   */
+  function startCodePath(origin) {
+    if (codePath) {
+      // Emits onCodePathSegmentStart events if updated.
+      forwardCurrentToHead(analyzer, node);
+    }
+
+    // Create the code path of this scope.
+    codePath = analyzer.codePath = new CodePath({
+      id: analyzer.idGenerator.next(),
+      origin,
+      upper: codePath,
+      onLooped: analyzer.onLooped,
+    });
+    state = CodePath.getState(codePath);
+
+    // Emits onCodePathStart events.
+    analyzer.emitter.emit('onCodePathStart', codePath, node);
+  }
+
+  /*
+   * Special case: The right side of class field initializer is considered
+   * to be its own function, so we need to start a new code path in this
+   * case.
+   */
+  if (isPropertyDefinitionValue(node)) {
+    startCodePath('class-field-initializer');
+
+    /*
+     * Intentional fall through because `node` needs to also be
+     * processed by the code below. For example, if we have:
+     *
+     * class Foo {
+     *     a = () => {}
+     * }
+     *
+     * In this case, we also need start a second code path.
+     */
+  }
+
+  switch (node.type) {
+    case 'Program':
+      startCodePath('program');
+      break;
+
+    case 'FunctionDeclaration':
+    case 'ComponentDeclaration':
+    case 'HookDeclaration':
+    case 'FunctionExpression':
+    case 'ArrowFunctionExpression':
+      startCodePath('function');
+      break;
+
+    case 'StaticBlock':
+      startCodePath('class-static-block');
+      break;
+
+    case 'ChainExpression':
+      state.pushChainContext();
+      break;
+    case 'CallExpression':
+      if (node.optional === true) {
+        state.makeOptionalNode();
+      }
+      break;
+    case 'MemberExpression':
+      if (node.optional === true) {
+        state.makeOptionalNode();
+      }
+      break;
+
+    case 'LogicalExpression':
+      if (isHandledLogicalOperator(node.operator)) {
+        state.pushChoiceContext(node.operator, isForkingByTrueOrFalse(node));
+      }
+      break;
+
+    case 'AssignmentExpression':
+      if (isLogicalAssignmentOperator(node.operator)) {
+        state.pushChoiceContext(
+          node.operator.slice(0, -1), // removes `=` from the end
+          isForkingByTrueOrFalse(node),
+        );
+      }
+      break;
+
+    case 'ConditionalExpression':
+    case 'IfStatement':
+      state.pushChoiceContext('test', false);
+      break;
+
+    case 'SwitchStatement':
+      state.pushSwitchContext(node.cases.some(isCaseNode), getLabel(node));
+      break;
+
+    case 'TryStatement':
+      state.pushTryContext(Boolean(node.finalizer));
+      break;
+
+    case 'SwitchCase':
+      /*
+       * Fork if this node is after the 2st node in `cases`.
+       * It's similar to `else` blocks.
+       * The next `test` node is processed in this path.
+       */
+      if (parent.discriminant !== node && parent.cases[0] !== node) {
+        state.forkPath();
+      }
+      break;
+
+    case 'WhileStatement':
+    case 'DoWhileStatement':
+    case 'ForStatement':
+    case 'ForInStatement':
+    case 'ForOfStatement':
+      state.pushLoopContext(node.type, getLabel(node));
+      break;
+
+    case 'LabeledStatement':
+      if (!breakableTypePattern.test(node.body.type)) {
+        state.pushBreakContext(false, node.label.name);
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  // Emits onCodePathSegmentStart events if updated.
+  forwardCurrentToHead(analyzer, node);
+}
+
+/**
+ * Updates the code path due to the type of a given node in leaving.
+ * @param {CodePathAnalyzer} analyzer The instance.
+ * @param {ASTNode} node The current AST node.
+ * @returns {void}
+ */
+function processCodePathToExit(analyzer, node) {
+  const codePath = analyzer.codePath;
+  const state = CodePath.getState(codePath);
+  let dontForward = false;
+
+  switch (node.type) {
+    case 'ChainExpression':
+      state.popChainContext();
+      break;
+
+    case 'IfStatement':
+    case 'ConditionalExpression':
+      state.popChoiceContext();
+      break;
+
+    case 'LogicalExpression':
+      if (isHandledLogicalOperator(node.operator)) {
+        state.popChoiceContext();
+      }
+      break;
+
+    case 'AssignmentExpression':
+      if (isLogicalAssignmentOperator(node.operator)) {
+        state.popChoiceContext();
+      }
+      break;
+
+    case 'SwitchStatement':
+      state.popSwitchContext();
+      break;
+
+    case 'SwitchCase':
+      /*
+       * This is the same as the process at the 1st `consequent` node in
+       * `preprocess` function.
+       * Must do if this `consequent` is empty.
+       */
+      if (node.consequent.length === 0) {
+        state.makeSwitchCaseBody(true, !node.test);
+      }
+      if (state.forkContext.reachable) {
+        dontForward = true;
+      }
+      break;
+
+    case 'TryStatement':
+      state.popTryContext();
+      break;
+
+    case 'BreakStatement':
+      forwardCurrentToHead(analyzer, node);
+      state.makeBreak(node.label && node.label.name);
+      dontForward = true;
+      break;
+
+    case 'ContinueStatement':
+      forwardCurrentToHead(analyzer, node);
+      state.makeContinue(node.label && node.label.name);
+      dontForward = true;
+      break;
+
+    case 'ReturnStatement':
+      forwardCurrentToHead(analyzer, node);
+      state.makeReturn();
+      dontForward = true;
+      break;
+
+    case 'ThrowStatement':
+      forwardCurrentToHead(analyzer, node);
+      state.makeThrow();
+      dontForward = true;
+      break;
+
+    case 'Identifier':
+      if (isIdentifierReference(node)) {
+        state.makeFirstThrowablePathInTryBlock();
+        dontForward = true;
+      }
+      break;
+
+    case 'CallExpression':
+    case 'ImportExpression':
+    case 'MemberExpression':
+    case 'NewExpression':
+    case 'YieldExpression':
+      state.makeFirstThrowablePathInTryBlock();
+      break;
+
+    case 'WhileStatement':
+    case 'DoWhileStatement':
+    case 'ForStatement':
+    case 'ForInStatement':
+    case 'ForOfStatement':
+      state.popLoopContext();
+      break;
+
+    case 'AssignmentPattern':
+      state.popForkContext();
+      break;
+
+    case 'LabeledStatement':
+      if (!breakableTypePattern.test(node.body.type)) {
+        state.popBreakContext();
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  // Emits onCodePathSegmentStart events if updated.
+  if (!dontForward) {
+    forwardCurrentToHead(analyzer, node);
+  }
+}
+
+/**
+ * Updates the code path to finalize the current code path.
+ * @param {CodePathAnalyzer} analyzer The instance.
+ * @param {ASTNode} node The current AST node.
+ * @returns {void}
+ */
+function postprocess(analyzer, node) {
+  /**
+   * Ends the code path for the current node.
+   * @returns {void}
+   */
+  function endCodePath() {
+    let codePath = analyzer.codePath;
+
+    // Mark the current path as the final node.
+    CodePath.getState(codePath).makeFinal();
+
+    // Emits onCodePathSegmentEnd event of the current segments.
+    leaveFromCurrentSegment(analyzer, node);
+
+    // Emits onCodePathEnd event of this code path.
+    analyzer.emitter.emit('onCodePathEnd', codePath, node);
+
+    codePath = analyzer.codePath = analyzer.codePath.upper;
+  }
+
+  switch (node.type) {
+    case 'Program':
+    case 'FunctionDeclaration':
+    case 'ComponentDeclaration':
+    case 'HookDeclaration':
+    case 'FunctionExpression':
+    case 'ArrowFunctionExpression':
+    case 'StaticBlock': {
+      endCodePath();
+      break;
+    }
+
+    // The `arguments.length >= 1` case is in `preprocess` function.
+    case 'CallExpression':
+      if (node.optional === true && node.arguments.length === 0) {
+        CodePath.getState(analyzer.codePath).makeOptionalRight();
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  /*
+   * Special case: The right side of class field initializer is considered
+   * to be its own function, so we need to end a code path in this
+   * case.
+   *
+   * We need to check after the other checks in order to close the
+   * code paths in the correct order for code like this:
+   *
+   *
+   * class Foo {
+   *     a = () => {}
+   * }
+   *
+   * In this case, The ArrowFunctionExpression code path is closed first
+   * and then we need to close the code path for the PropertyDefinition
+   * value.
+   */
+  if (isPropertyDefinitionValue(node)) {
+    endCodePath();
+  }
+}
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * The class to analyze code paths.
+ * This class implements the EventGenerator interface.
+ */
+class CodePathAnalyzer {
+  /**
+   * @param {EventGenerator} eventGenerator An event generator to wrap.
+   */
+  constructor(emitters) {
+    this.emitter = {
+      emit(event, ...args) {
+        emitters[event]?.(...args);
+      },
+    };
+    this.codePath = null;
+    this.idGenerator = new IdGenerator('s');
+    this.currentNode = null;
+    this.onLooped = this.onLooped.bind(this);
+  }
+
+  /**
+   * Does the process to enter a given AST node.
+   * This updates state of analysis and calls `enterNode` of the wrapped.
+   * @param {ASTNode} node A node which is entering.
+   * @returns {void}
+   */
+  enterNode(node) {
+    this.currentNode = node;
+
+    // Updates the code path due to node's position in its parent node.
+    if (node.parent) {
+      preprocess(this, node);
+    }
+
+    /*
+     * Updates the code path.
+     * And emits onCodePathStart/onCodePathSegmentStart events.
+     */
+    processCodePathToEnter(this, node);
+
+    this.currentNode = null;
+  }
+
+  /**
+   * Does the process to leave a given AST node.
+   * This updates state of analysis and calls `leaveNode` of the wrapped.
+   * @param {ASTNode} node A node which is leaving.
+   * @returns {void}
+   */
+  leaveNode(node) {
+    this.currentNode = node;
+
+    /*
+     * Updates the code path.
+     * And emits onCodePathStart/onCodePathSegmentStart events.
+     */
+    processCodePathToExit(this, node);
+
+    // Emits the last onCodePathStart/onCodePathSegmentStart events.
+    postprocess(this, node);
+
+    this.currentNode = null;
+  }
+
+  /**
+   * This is called on a code path looped.
+   * Then this raises a looped event.
+   * @param {CodePathSegment} fromSegment A segment of prev.
+   * @param {CodePathSegment} toSegment A segment of next.
+   * @returns {void}
+   */
+  onLooped(fromSegment, toSegment) {
+    if (fromSegment.reachable && toSegment.reachable) {
+      this.emitter.emit(
+        'onCodePathSegmentLoop',
+        fromSegment,
+        toSegment,
+        this.currentNode,
+      );
+    }
+  }
+}
+
+module.exports = CodePathAnalyzer;
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-segment.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-segment.js
new file mode 100644
index 00000000000..fb015296a74
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-segment.js
@@ -0,0 +1,225 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Checks whether or not a given segment is reachable.
+ * @param {CodePathSegment} segment A segment to check.
+ * @returns {boolean} `true` if the segment is reachable.
+ */
+function isReachable(segment) {
+  return segment.reachable;
+}
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * A code path segment.
+ */
+class CodePathSegment {
+  /**
+   * @param {string} id An identifier.
+   * @param {CodePathSegment[]} allPrevSegments An array of the previous segments.
+   *   This array includes unreachable segments.
+   * @param {boolean} reachable A flag which shows this is reachable.
+   */
+  constructor(id, allPrevSegments, reachable) {
+    /**
+     * The identifier of this code path.
+     * Rules use it to store additional information of each rule.
+     * @type {string}
+     */
+    this.id = id;
+
+    /**
+     * An array of the next segments.
+     * @type {CodePathSegment[]}
+     */
+    this.nextSegments = [];
+
+    /**
+     * An array of the previous segments.
+     * @type {CodePathSegment[]}
+     */
+    this.prevSegments = allPrevSegments.filter(isReachable);
+
+    /**
+     * An array of the next segments.
+     * This array includes unreachable segments.
+     * @type {CodePathSegment[]}
+     */
+    this.allNextSegments = [];
+
+    /**
+     * An array of the previous segments.
+     * This array includes unreachable segments.
+     * @type {CodePathSegment[]}
+     */
+    this.allPrevSegments = allPrevSegments;
+
+    /**
+     * A flag which shows this is reachable.
+     * @type {boolean}
+     */
+    this.reachable = reachable;
+
+    // Internal data.
+    Object.defineProperty(this, 'internal', {
+      value: {
+        used: false,
+        loopedPrevSegments: [],
+      },
+    });
+  }
+
+  /**
+   * Checks a given previous segment is coming from the end of a loop.
+   * @param {CodePathSegment} segment A previous segment to check.
+   * @returns {boolean} `true` if the segment is coming from the end of a loop.
+   */
+  isLoopedPrevSegment(segment) {
+    return this.internal.loopedPrevSegments.includes(segment);
+  }
+
+  /**
+   * Creates the root segment.
+   * @param {string} id An identifier.
+   * @returns {CodePathSegment} The created segment.
+   */
+  static newRoot(id) {
+    return new CodePathSegment(id, [], true);
+  }
+
+  /**
+   * Creates a segment that follows given segments.
+   * @param {string} id An identifier.
+   * @param {CodePathSegment[]} allPrevSegments An array of the previous segments.
+   * @returns {CodePathSegment} The created segment.
+   */
+  static newNext(id, allPrevSegments) {
+    return new CodePathSegment(
+      id,
+      CodePathSegment.flattenUnusedSegments(allPrevSegments),
+      allPrevSegments.some(isReachable),
+    );
+  }
+
+  /**
+   * Creates an unreachable segment that follows given segments.
+   * @param {string} id An identifier.
+   * @param {CodePathSegment[]} allPrevSegments An array of the previous segments.
+   * @returns {CodePathSegment} The created segment.
+   */
+  static newUnreachable(id, allPrevSegments) {
+    const segment = new CodePathSegment(
+      id,
+      CodePathSegment.flattenUnusedSegments(allPrevSegments),
+      false,
+    );
+
+    /*
+     * In `if (a) return a; foo();` case, the unreachable segment preceded by
+     * the return statement is not used but must not be remove.
+     */
+    CodePathSegment.markUsed(segment);
+
+    return segment;
+  }
+
+  /**
+   * Creates a segment that follows given segments.
+   * This factory method does not connect with `allPrevSegments`.
+   * But this inherits `reachable` flag.
+   * @param {string} id An identifier.
+   * @param {CodePathSegment[]} allPrevSegments An array of the previous segments.
+   * @returns {CodePathSegment} The created segment.
+   */
+  static newDisconnected(id, allPrevSegments) {
+    return new CodePathSegment(id, [], allPrevSegments.some(isReachable));
+  }
+
+  /**
+   * Makes a given segment being used.
+   *
+   * And this function registers the segment into the previous segments as a next.
+   * @param {CodePathSegment} segment A segment to mark.
+   * @returns {void}
+   */
+  static markUsed(segment) {
+    if (segment.internal.used) {
+      return;
+    }
+    segment.internal.used = true;
+
+    let i;
+
+    if (segment.reachable) {
+      for (i = 0; i < segment.allPrevSegments.length; ++i) {
+        const prevSegment = segment.allPrevSegments[i];
+
+        prevSegment.allNextSegments.push(segment);
+        prevSegment.nextSegments.push(segment);
+      }
+    } else {
+      for (i = 0; i < segment.allPrevSegments.length; ++i) {
+        segment.allPrevSegments[i].allNextSegments.push(segment);
+      }
+    }
+  }
+
+  /**
+   * Marks a previous segment as looped.
+   * @param {CodePathSegment} segment A segment.
+   * @param {CodePathSegment} prevSegment A previous segment to mark.
+   * @returns {void}
+   */
+  static markPrevSegmentAsLooped(segment, prevSegment) {
+    segment.internal.loopedPrevSegments.push(prevSegment);
+  }
+
+  /**
+   * Replaces unused segments with the previous segments of each unused segment.
+   * @param {CodePathSegment[]} segments An array of segments to replace.
+   * @returns {CodePathSegment[]} The replaced array.
+   */
+  static flattenUnusedSegments(segments) {
+    const done = Object.create(null);
+    const retv = [];
+
+    for (let i = 0; i < segments.length; ++i) {
+      const segment = segments[i];
+
+      // Ignores duplicated.
+      if (done[segment.id]) {
+        continue;
+      }
+
+      // Use previous segments if unused.
+      if (!segment.internal.used) {
+        for (let j = 0; j < segment.allPrevSegments.length; ++j) {
+          const prevSegment = segment.allPrevSegments[j];
+
+          if (!done[prevSegment.id]) {
+            done[prevSegment.id] = true;
+            retv.push(prevSegment);
+          }
+        }
+      } else {
+        done[segment.id] = true;
+        retv.push(segment);
+      }
+    }
+
+    return retv;
+  }
+}
+
+module.exports = CodePathSegment;
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-state.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-state.js
new file mode 100644
index 00000000000..9a107fecd7f
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-state.js
@@ -0,0 +1,1441 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+// eslint-disable-next-line
+const CodePathSegment = require('./code-path-segment');
+// eslint-disable-next-line
+const ForkContext = require('./fork-context');
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Adds given segments into the `dest` array.
+ * If the `others` array does not includes the given segments, adds to the `all`
+ * array as well.
+ *
+ * This adds only reachable and used segments.
+ * @param {CodePathSegment[]} dest A destination array (`returnedSegments` or `thrownSegments`).
+ * @param {CodePathSegment[]} others Another destination array (`returnedSegments` or `thrownSegments`).
+ * @param {CodePathSegment[]} all The unified destination array (`finalSegments`).
+ * @param {CodePathSegment[]} segments Segments to add.
+ * @returns {void}
+ */
+function addToReturnedOrThrown(dest, others, all, segments) {
+  for (let i = 0; i < segments.length; ++i) {
+    const segment = segments[i];
+
+    dest.push(segment);
+    if (!others.includes(segment)) {
+      all.push(segment);
+    }
+  }
+}
+
+/**
+ * Gets a loop-context for a `continue` statement.
+ * @param {CodePathState} state A state to get.
+ * @param {string} label The label of a `continue` statement.
+ * @returns {LoopContext} A loop-context for a `continue` statement.
+ */
+function getContinueContext(state, label) {
+  if (!label) {
+    return state.loopContext;
+  }
+
+  let context = state.loopContext;
+
+  while (context) {
+    if (context.label === label) {
+      return context;
+    }
+    context = context.upper;
+  }
+
+  /* c8 ignore next */
+  return null;
+}
+
+/**
+ * Gets a context for a `break` statement.
+ * @param {CodePathState} state A state to get.
+ * @param {string} label The label of a `break` statement.
+ * @returns {LoopContext|SwitchContext} A context for a `break` statement.
+ */
+function getBreakContext(state, label) {
+  let context = state.breakContext;
+
+  while (context) {
+    if (label ? context.label === label : context.breakable) {
+      return context;
+    }
+    context = context.upper;
+  }
+
+  /* c8 ignore next */
+  return null;
+}
+
+/**
+ * Gets a context for a `return` statement.
+ * @param {CodePathState} state A state to get.
+ * @returns {TryContext|CodePathState} A context for a `return` statement.
+ */
+function getReturnContext(state) {
+  let context = state.tryContext;
+
+  while (context) {
+    if (context.hasFinalizer && context.position !== 'finally') {
+      return context;
+    }
+    context = context.upper;
+  }
+
+  return state;
+}
+
+/**
+ * Gets a context for a `throw` statement.
+ * @param {CodePathState} state A state to get.
+ * @returns {TryContext|CodePathState} A context for a `throw` statement.
+ */
+function getThrowContext(state) {
+  let context = state.tryContext;
+
+  while (context) {
+    if (
+      context.position === 'try' ||
+      (context.hasFinalizer && context.position === 'catch')
+    ) {
+      return context;
+    }
+    context = context.upper;
+  }
+
+  return state;
+}
+
+/**
+ * Removes a given element from a given array.
+ * @param {any[]} xs An array to remove the specific element.
+ * @param {any} x An element to be removed.
+ * @returns {void}
+ */
+function remove(xs, x) {
+  xs.splice(xs.indexOf(x), 1);
+}
+
+/**
+ * Disconnect given segments.
+ *
+ * This is used in a process for switch statements.
+ * If there is the "default" chunk before other cases, the order is different
+ * between node's and running's.
+ * @param {CodePathSegment[]} prevSegments Forward segments to disconnect.
+ * @param {CodePathSegment[]} nextSegments Backward segments to disconnect.
+ * @returns {void}
+ */
+function removeConnection(prevSegments, nextSegments) {
+  for (let i = 0; i < prevSegments.length; ++i) {
+    const prevSegment = prevSegments[i];
+    const nextSegment = nextSegments[i];
+
+    remove(prevSegment.nextSegments, nextSegment);
+    remove(prevSegment.allNextSegments, nextSegment);
+    remove(nextSegment.prevSegments, prevSegment);
+    remove(nextSegment.allPrevSegments, prevSegment);
+  }
+}
+
+/**
+ * Creates looping path.
+ * @param {CodePathState} state The instance.
+ * @param {CodePathSegment[]} unflattenedFromSegments Segments which are source.
+ * @param {CodePathSegment[]} unflattenedToSegments Segments which are destination.
+ * @returns {void}
+ */
+function makeLooped(state, unflattenedFromSegments, unflattenedToSegments) {
+  const fromSegments = CodePathSegment.flattenUnusedSegments(
+    unflattenedFromSegments,
+  );
+  const toSegments = CodePathSegment.flattenUnusedSegments(
+    unflattenedToSegments,
+  );
+
+  const end = Math.min(fromSegments.length, toSegments.length);
+
+  for (let i = 0; i < end; ++i) {
+    const fromSegment = fromSegments[i];
+    const toSegment = toSegments[i];
+
+    if (toSegment.reachable) {
+      fromSegment.nextSegments.push(toSegment);
+    }
+    if (fromSegment.reachable) {
+      toSegment.prevSegments.push(fromSegment);
+    }
+    fromSegment.allNextSegments.push(toSegment);
+    toSegment.allPrevSegments.push(fromSegment);
+
+    if (toSegment.allPrevSegments.length >= 2) {
+      CodePathSegment.markPrevSegmentAsLooped(toSegment, fromSegment);
+    }
+
+    state.notifyLooped(fromSegment, toSegment);
+  }
+}
+
+/**
+ * Finalizes segments of `test` chunk of a ForStatement.
+ *
+ * - Adds `false` paths to paths which are leaving from the loop.
+ * - Sets `true` paths to paths which go to the body.
+ * @param {LoopContext} context A loop context to modify.
+ * @param {ChoiceContext} choiceContext A choice context of this loop.
+ * @param {CodePathSegment[]} head The current head paths.
+ * @returns {void}
+ */
+function finalizeTestSegmentsOfFor(context, choiceContext, head) {
+  if (!choiceContext.processed) {
+    choiceContext.trueForkContext.add(head);
+    choiceContext.falseForkContext.add(head);
+    choiceContext.qqForkContext.add(head);
+  }
+
+  if (context.test !== true) {
+    context.brokenForkContext.addAll(choiceContext.falseForkContext);
+  }
+  context.endOfTestSegments = choiceContext.trueForkContext.makeNext(0, -1);
+}
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * A class which manages state to analyze code paths.
+ */
+class CodePathState {
+  /**
+   * @param {IdGenerator} idGenerator An id generator to generate id for code
+   *   path segments.
+   * @param {Function} onLooped A callback function to notify looping.
+   */
+  constructor(idGenerator, onLooped) {
+    this.idGenerator = idGenerator;
+    this.notifyLooped = onLooped;
+    this.forkContext = ForkContext.newRoot(idGenerator);
+    this.choiceContext = null;
+    this.switchContext = null;
+    this.tryContext = null;
+    this.loopContext = null;
+    this.breakContext = null;
+    this.chainContext = null;
+
+    this.currentSegments = [];
+    this.initialSegment = this.forkContext.head[0];
+
+    // returnedSegments and thrownSegments push elements into finalSegments also.
+    const final = (this.finalSegments = []);
+    const returned = (this.returnedForkContext = []);
+    const thrown = (this.thrownForkContext = []);
+
+    returned.add = addToReturnedOrThrown.bind(null, returned, thrown, final);
+    thrown.add = addToReturnedOrThrown.bind(null, thrown, returned, final);
+  }
+
+  /**
+   * The head segments.
+   * @type {CodePathSegment[]}
+   */
+  get headSegments() {
+    return this.forkContext.head;
+  }
+
+  /**
+   * The parent forking context.
+   * This is used for the root of new forks.
+   * @type {ForkContext}
+   */
+  get parentForkContext() {
+    const current = this.forkContext;
+
+    return current && current.upper;
+  }
+
+  /**
+   * Creates and stacks new forking context.
+   * @param {boolean} forkLeavingPath A flag which shows being in a
+   *   "finally" block.
+   * @returns {ForkContext} The created context.
+   */
+  pushForkContext(forkLeavingPath) {
+    this.forkContext = ForkContext.newEmpty(this.forkContext, forkLeavingPath);
+
+    return this.forkContext;
+  }
+
+  /**
+   * Pops and merges the last forking context.
+   * @returns {ForkContext} The last context.
+   */
+  popForkContext() {
+    const lastContext = this.forkContext;
+
+    this.forkContext = lastContext.upper;
+    this.forkContext.replaceHead(lastContext.makeNext(0, -1));
+
+    return lastContext;
+  }
+
+  /**
+   * Creates a new path.
+   * @returns {void}
+   */
+  forkPath() {
+    this.forkContext.add(this.parentForkContext.makeNext(-1, -1));
+  }
+
+  /**
+   * Creates a bypass path.
+   * This is used for such as IfStatement which does not have "else" chunk.
+   * @returns {void}
+   */
+  forkBypassPath() {
+    this.forkContext.add(this.parentForkContext.head);
+  }
+
+  //--------------------------------------------------------------------------
+  // ConditionalExpression, LogicalExpression, IfStatement
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates a context for ConditionalExpression, LogicalExpression, AssignmentExpression (logical assignments only),
+   * IfStatement, WhileStatement, DoWhileStatement, or ForStatement.
+   *
+   * LogicalExpressions have cases that it goes different paths between the
+   * `true` case and the `false` case.
+   *
+   * For Example:
+   *
+   *     if (a || b) {
+   *         foo();
+   *     } else {
+   *         bar();
+   *     }
+   *
+   * In this case, `b` is evaluated always in the code path of the `else`
+   * block, but it's not so in the code path of the `if` block.
+   * So there are 3 paths.
+   *
+   *     a -> foo();
+   *     a -> b -> foo();
+   *     a -> b -> bar();
+   * @param {string} kind A kind string.
+   *   If the new context is LogicalExpression's or AssignmentExpression's, this is `"&&"` or `"||"` or `"??"`.
+   *   If it's IfStatement's or ConditionalExpression's, this is `"test"`.
+   *   Otherwise, this is `"loop"`.
+   * @param {boolean} isForkingAsResult A flag that shows that goes different
+   *   paths between `true` and `false`.
+   * @returns {void}
+   */
+  pushChoiceContext(kind, isForkingAsResult) {
+    this.choiceContext = {
+      upper: this.choiceContext,
+      kind,
+      isForkingAsResult,
+      trueForkContext: ForkContext.newEmpty(this.forkContext),
+      falseForkContext: ForkContext.newEmpty(this.forkContext),
+      qqForkContext: ForkContext.newEmpty(this.forkContext),
+      processed: false,
+    };
+  }
+
+  /**
+   * Pops the last choice context and finalizes it.
+   * @throws {Error} (Unreachable.)
+   * @returns {ChoiceContext} The popped context.
+   */
+  popChoiceContext() {
+    const context = this.choiceContext;
+
+    this.choiceContext = context.upper;
+
+    const forkContext = this.forkContext;
+    const headSegments = forkContext.head;
+
+    switch (context.kind) {
+      case '&&':
+      case '||':
+      case '??':
+        /*
+         * If any result were not transferred from child contexts,
+         * this sets the head segments to both cases.
+         * The head segments are the path of the right-hand operand.
+         */
+        if (!context.processed) {
+          context.trueForkContext.add(headSegments);
+          context.falseForkContext.add(headSegments);
+          context.qqForkContext.add(headSegments);
+        }
+
+        /*
+         * Transfers results to upper context if this context is in
+         * test chunk.
+         */
+        if (context.isForkingAsResult) {
+          const parentContext = this.choiceContext;
+
+          parentContext.trueForkContext.addAll(context.trueForkContext);
+          parentContext.falseForkContext.addAll(context.falseForkContext);
+          parentContext.qqForkContext.addAll(context.qqForkContext);
+          parentContext.processed = true;
+
+          return context;
+        }
+
+        break;
+
+      case 'test':
+        if (!context.processed) {
+          /*
+           * The head segments are the path of the `if` block here.
+           * Updates the `true` path with the end of the `if` block.
+           */
+          context.trueForkContext.clear();
+          context.trueForkContext.add(headSegments);
+        } else {
+          /*
+           * The head segments are the path of the `else` block here.
+           * Updates the `false` path with the end of the `else`
+           * block.
+           */
+          context.falseForkContext.clear();
+          context.falseForkContext.add(headSegments);
+        }
+
+        break;
+
+      case 'loop':
+        /*
+         * Loops are addressed in popLoopContext().
+         * This is called from popLoopContext().
+         */
+        return context;
+
+      /* c8 ignore next */
+      default:
+        throw new Error('unreachable');
+    }
+
+    // Merges all paths.
+    const prevForkContext = context.trueForkContext;
+
+    prevForkContext.addAll(context.falseForkContext);
+    forkContext.replaceHead(prevForkContext.makeNext(0, -1));
+
+    return context;
+  }
+
+  /**
+   * Makes a code path segment of the right-hand operand of a logical
+   * expression.
+   * @throws {Error} (Unreachable.)
+   * @returns {void}
+   */
+  makeLogicalRight() {
+    const context = this.choiceContext;
+    const forkContext = this.forkContext;
+
+    if (context.processed) {
+      /*
+       * This got segments already from the child choice context.
+       * Creates the next path from own true/false fork context.
+       */
+      let prevForkContext;
+
+      switch (context.kind) {
+        case '&&': // if true then go to the right-hand side.
+          prevForkContext = context.trueForkContext;
+          break;
+        case '||': // if false then go to the right-hand side.
+          prevForkContext = context.falseForkContext;
+          break;
+        case '??': // Both true/false can short-circuit, so needs the third path to go to the right-hand side. That's qqForkContext.
+          prevForkContext = context.qqForkContext;
+          break;
+        default:
+          throw new Error('unreachable');
+      }
+
+      forkContext.replaceHead(prevForkContext.makeNext(0, -1));
+      prevForkContext.clear();
+      context.processed = false;
+    } else {
+      /*
+       * This did not get segments from the child choice context.
+       * So addresses the head segments.
+       * The head segments are the path of the left-hand operand.
+       */
+      switch (context.kind) {
+        case '&&': // the false path can short-circuit.
+          context.falseForkContext.add(forkContext.head);
+          break;
+        case '||': // the true path can short-circuit.
+          context.trueForkContext.add(forkContext.head);
+          break;
+        case '??': // both can short-circuit.
+          context.trueForkContext.add(forkContext.head);
+          context.falseForkContext.add(forkContext.head);
+          break;
+        default:
+          throw new Error('unreachable');
+      }
+
+      forkContext.replaceHead(forkContext.makeNext(-1, -1));
+    }
+  }
+
+  /**
+   * Makes a code path segment of the `if` block.
+   * @returns {void}
+   */
+  makeIfConsequent() {
+    const context = this.choiceContext;
+    const forkContext = this.forkContext;
+
+    /*
+     * If any result were not transferred from child contexts,
+     * this sets the head segments to both cases.
+     * The head segments are the path of the test expression.
+     */
+    if (!context.processed) {
+      context.trueForkContext.add(forkContext.head);
+      context.falseForkContext.add(forkContext.head);
+      context.qqForkContext.add(forkContext.head);
+    }
+
+    context.processed = false;
+
+    // Creates new path from the `true` case.
+    forkContext.replaceHead(context.trueForkContext.makeNext(0, -1));
+  }
+
+  /**
+   * Makes a code path segment of the `else` block.
+   * @returns {void}
+   */
+  makeIfAlternate() {
+    const context = this.choiceContext;
+    const forkContext = this.forkContext;
+
+    /*
+     * The head segments are the path of the `if` block.
+     * Updates the `true` path with the end of the `if` block.
+     */
+    context.trueForkContext.clear();
+    context.trueForkContext.add(forkContext.head);
+    context.processed = true;
+
+    // Creates new path from the `false` case.
+    forkContext.replaceHead(context.falseForkContext.makeNext(0, -1));
+  }
+
+  //--------------------------------------------------------------------------
+  // ChainExpression
+  //--------------------------------------------------------------------------
+
+  /**
+   * Push a new `ChainExpression` context to the stack.
+   * This method is called on entering to each `ChainExpression` node.
+   * This context is used to count forking in the optional chain then merge them on the exiting from the `ChainExpression` node.
+   * @returns {void}
+   */
+  pushChainContext() {
+    this.chainContext = {
+      upper: this.chainContext,
+      countChoiceContexts: 0,
+    };
+  }
+
+  /**
+   * Pop a `ChainExpression` context from the stack.
+   * This method is called on exiting from each `ChainExpression` node.
+   * This merges all forks of the last optional chaining.
+   * @returns {void}
+   */
+  popChainContext() {
+    const context = this.chainContext;
+
+    this.chainContext = context.upper;
+
+    // pop all choice contexts of this.
+    for (let i = context.countChoiceContexts; i > 0; --i) {
+      this.popChoiceContext();
+    }
+  }
+
+  /**
+   * Create a choice context for optional access.
+   * This method is called on entering to each `(Call|Member)Expression[optional=true]` node.
+   * This creates a choice context as similar to `LogicalExpression[operator="??"]` node.
+   * @returns {void}
+   */
+  makeOptionalNode() {
+    if (this.chainContext) {
+      this.chainContext.countChoiceContexts += 1;
+      this.pushChoiceContext('??', false);
+    }
+  }
+
+  /**
+   * Create a fork.
+   * This method is called on entering to the `arguments|property` property of each `(Call|Member)Expression` node.
+   * @returns {void}
+   */
+  makeOptionalRight() {
+    if (this.chainContext) {
+      this.makeLogicalRight();
+    }
+  }
+
+  //--------------------------------------------------------------------------
+  // SwitchStatement
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates a context object of SwitchStatement and stacks it.
+   * @param {boolean} hasCase `true` if the switch statement has one or more
+   *   case parts.
+   * @param {string|null} label The label text.
+   * @returns {void}
+   */
+  pushSwitchContext(hasCase, label) {
+    this.switchContext = {
+      upper: this.switchContext,
+      hasCase,
+      defaultSegments: null,
+      defaultBodySegments: null,
+      foundDefault: false,
+      lastIsDefault: false,
+      countForks: 0,
+    };
+
+    this.pushBreakContext(true, label);
+  }
+
+  /**
+   * Pops the last context of SwitchStatement and finalizes it.
+   *
+   * - Disposes all forking stack for `case` and `default`.
+   * - Creates the next code path segment from `context.brokenForkContext`.
+   * - If the last `SwitchCase` node is not a `default` part, creates a path
+   *   to the `default` body.
+   * @returns {void}
+   */
+  popSwitchContext() {
+    const context = this.switchContext;
+
+    this.switchContext = context.upper;
+
+    const forkContext = this.forkContext;
+    const brokenForkContext = this.popBreakContext().brokenForkContext;
+
+    if (context.countForks === 0) {
+      /*
+       * When there is only one `default` chunk and there is one or more
+       * `break` statements, even if forks are nothing, it needs to merge
+       * those.
+       */
+      if (!brokenForkContext.empty) {
+        brokenForkContext.add(forkContext.makeNext(-1, -1));
+        forkContext.replaceHead(brokenForkContext.makeNext(0, -1));
+      }
+
+      return;
+    }
+
+    const lastSegments = forkContext.head;
+
+    this.forkBypassPath();
+    const lastCaseSegments = forkContext.head;
+
+    /*
+     * `brokenForkContext` is used to make the next segment.
+     * It must add the last segment into `brokenForkContext`.
+     */
+    brokenForkContext.add(lastSegments);
+
+    /*
+     * A path which is failed in all case test should be connected to path
+     * of `default` chunk.
+     */
+    if (!context.lastIsDefault) {
+      if (context.defaultBodySegments) {
+        /*
+         * Remove a link from `default` label to its chunk.
+         * It's false route.
+         */
+        removeConnection(context.defaultSegments, context.defaultBodySegments);
+        makeLooped(this, lastCaseSegments, context.defaultBodySegments);
+      } else {
+        /*
+         * It handles the last case body as broken if `default` chunk
+         * does not exist.
+         */
+        brokenForkContext.add(lastCaseSegments);
+      }
+    }
+
+    // Pops the segment context stack until the entry segment.
+    for (let i = 0; i < context.countForks; ++i) {
+      this.forkContext = this.forkContext.upper;
+    }
+
+    /*
+     * Creates a path from all brokenForkContext paths.
+     * This is a path after switch statement.
+     */
+    this.forkContext.replaceHead(brokenForkContext.makeNext(0, -1));
+  }
+
+  /**
+   * Makes a code path segment for a `SwitchCase` node.
+   * @param {boolean} isEmpty `true` if the body is empty.
+   * @param {boolean} isDefault `true` if the body is the default case.
+   * @returns {void}
+   */
+  makeSwitchCaseBody(isEmpty, isDefault) {
+    const context = this.switchContext;
+
+    if (!context.hasCase) {
+      return;
+    }
+
+    /*
+     * Merge forks.
+     * The parent fork context has two segments.
+     * Those are from the current case and the body of the previous case.
+     */
+    const parentForkContext = this.forkContext;
+    const forkContext = this.pushForkContext();
+
+    forkContext.add(parentForkContext.makeNext(0, -1));
+
+    /*
+     * Save `default` chunk info.
+     * If the `default` label is not at the last, we must make a path from
+     * the last `case` to the `default` chunk.
+     */
+    if (isDefault) {
+      context.defaultSegments = parentForkContext.head;
+      if (isEmpty) {
+        context.foundDefault = true;
+      } else {
+        context.defaultBodySegments = forkContext.head;
+      }
+    } else {
+      if (!isEmpty && context.foundDefault) {
+        context.foundDefault = false;
+        context.defaultBodySegments = forkContext.head;
+      }
+    }
+
+    context.lastIsDefault = isDefault;
+    context.countForks += 1;
+  }
+
+  //--------------------------------------------------------------------------
+  // TryStatement
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates a context object of TryStatement and stacks it.
+   * @param {boolean} hasFinalizer `true` if the try statement has a
+   *   `finally` block.
+   * @returns {void}
+   */
+  pushTryContext(hasFinalizer) {
+    this.tryContext = {
+      upper: this.tryContext,
+      position: 'try',
+      hasFinalizer,
+
+      returnedForkContext: hasFinalizer
+        ? ForkContext.newEmpty(this.forkContext)
+        : null,
+
+      thrownForkContext: ForkContext.newEmpty(this.forkContext),
+      lastOfTryIsReachable: false,
+      lastOfCatchIsReachable: false,
+    };
+  }
+
+  /**
+   * Pops the last context of TryStatement and finalizes it.
+   * @returns {void}
+   */
+  popTryContext() {
+    const context = this.tryContext;
+
+    this.tryContext = context.upper;
+
+    if (context.position === 'catch') {
+      // Merges two paths from the `try` block and `catch` block merely.
+      this.popForkContext();
+      return;
+    }
+
+    /*
+     * The following process is executed only when there is the `finally`
+     * block.
+     */
+
+    const returned = context.returnedForkContext;
+    const thrown = context.thrownForkContext;
+
+    if (returned.empty && thrown.empty) {
+      return;
+    }
+
+    // Separate head to normal paths and leaving paths.
+    const headSegments = this.forkContext.head;
+
+    this.forkContext = this.forkContext.upper;
+    const normalSegments = headSegments.slice(0, (headSegments.length / 2) | 0);
+    const leavingSegments = headSegments.slice((headSegments.length / 2) | 0);
+
+    // Forwards the leaving path to upper contexts.
+    if (!returned.empty) {
+      getReturnContext(this).returnedForkContext.add(leavingSegments);
+    }
+    if (!thrown.empty) {
+      getThrowContext(this).thrownForkContext.add(leavingSegments);
+    }
+
+    // Sets the normal path as the next.
+    this.forkContext.replaceHead(normalSegments);
+
+    /*
+     * If both paths of the `try` block and the `catch` block are
+     * unreachable, the next path becomes unreachable as well.
+     */
+    if (!context.lastOfTryIsReachable && !context.lastOfCatchIsReachable) {
+      this.forkContext.makeUnreachable();
+    }
+  }
+
+  /**
+   * Makes a code path segment for a `catch` block.
+   * @returns {void}
+   */
+  makeCatchBlock() {
+    const context = this.tryContext;
+    const forkContext = this.forkContext;
+    const thrown = context.thrownForkContext;
+
+    // Update state.
+    context.position = 'catch';
+    context.thrownForkContext = ForkContext.newEmpty(forkContext);
+    context.lastOfTryIsReachable = forkContext.reachable;
+
+    // Merge thrown paths.
+    thrown.add(forkContext.head);
+    const thrownSegments = thrown.makeNext(0, -1);
+
+    // Fork to a bypass and the merged thrown path.
+    this.pushForkContext();
+    this.forkBypassPath();
+    this.forkContext.add(thrownSegments);
+  }
+
+  /**
+   * Makes a code path segment for a `finally` block.
+   *
+   * In the `finally` block, parallel paths are created. The parallel paths
+   * are used as leaving-paths. The leaving-paths are paths from `return`
+   * statements and `throw` statements in a `try` block or a `catch` block.
+   * @returns {void}
+   */
+  makeFinallyBlock() {
+    const context = this.tryContext;
+    let forkContext = this.forkContext;
+    const returned = context.returnedForkContext;
+    const thrown = context.thrownForkContext;
+    const headOfLeavingSegments = forkContext.head;
+
+    // Update state.
+    if (context.position === 'catch') {
+      // Merges two paths from the `try` block and `catch` block.
+      this.popForkContext();
+      forkContext = this.forkContext;
+
+      context.lastOfCatchIsReachable = forkContext.reachable;
+    } else {
+      context.lastOfTryIsReachable = forkContext.reachable;
+    }
+    context.position = 'finally';
+
+    if (returned.empty && thrown.empty) {
+      // This path does not leave.
+      return;
+    }
+
+    /*
+     * Create a parallel segment from merging returned and thrown.
+     * This segment will leave at the end of this finally block.
+     */
+    const segments = forkContext.makeNext(-1, -1);
+
+    for (let i = 0; i < forkContext.count; ++i) {
+      const prevSegsOfLeavingSegment = [headOfLeavingSegments[i]];
+
+      for (let j = 0; j < returned.segmentsList.length; ++j) {
+        prevSegsOfLeavingSegment.push(returned.segmentsList[j][i]);
+      }
+      for (let j = 0; j < thrown.segmentsList.length; ++j) {
+        prevSegsOfLeavingSegment.push(thrown.segmentsList[j][i]);
+      }
+
+      segments.push(
+        CodePathSegment.newNext(
+          this.idGenerator.next(),
+          prevSegsOfLeavingSegment,
+        ),
+      );
+    }
+
+    this.pushForkContext(true);
+    this.forkContext.add(segments);
+  }
+
+  /**
+   * Makes a code path segment from the first throwable node to the `catch`
+   * block or the `finally` block.
+   * @returns {void}
+   */
+  makeFirstThrowablePathInTryBlock() {
+    const forkContext = this.forkContext;
+
+    if (!forkContext.reachable) {
+      return;
+    }
+
+    const context = getThrowContext(this);
+
+    if (
+      context === this ||
+      context.position !== 'try' ||
+      !context.thrownForkContext.empty
+    ) {
+      return;
+    }
+
+    context.thrownForkContext.add(forkContext.head);
+    forkContext.replaceHead(forkContext.makeNext(-1, -1));
+  }
+
+  //--------------------------------------------------------------------------
+  // Loop Statements
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates a context object of a loop statement and stacks it.
+   * @param {string} type The type of the node which was triggered. One of
+   *   `WhileStatement`, `DoWhileStatement`, `ForStatement`, `ForInStatement`,
+   *   and `ForStatement`.
+   * @param {string|null} label A label of the node which was triggered.
+   * @throws {Error} (Unreachable - unknown type.)
+   * @returns {void}
+   */
+  pushLoopContext(type, label) {
+    const forkContext = this.forkContext;
+    const breakContext = this.pushBreakContext(true, label);
+
+    switch (type) {
+      case 'WhileStatement':
+        this.pushChoiceContext('loop', false);
+        this.loopContext = {
+          upper: this.loopContext,
+          type,
+          label,
+          test: void 0,
+          continueDestSegments: null,
+          brokenForkContext: breakContext.brokenForkContext,
+        };
+        break;
+
+      case 'DoWhileStatement':
+        this.pushChoiceContext('loop', false);
+        this.loopContext = {
+          upper: this.loopContext,
+          type,
+          label,
+          test: void 0,
+          entrySegments: null,
+          continueForkContext: ForkContext.newEmpty(forkContext),
+          brokenForkContext: breakContext.brokenForkContext,
+        };
+        break;
+
+      case 'ForStatement':
+        this.pushChoiceContext('loop', false);
+        this.loopContext = {
+          upper: this.loopContext,
+          type,
+          label,
+          test: void 0,
+          endOfInitSegments: null,
+          testSegments: null,
+          endOfTestSegments: null,
+          updateSegments: null,
+          endOfUpdateSegments: null,
+          continueDestSegments: null,
+          brokenForkContext: breakContext.brokenForkContext,
+        };
+        break;
+
+      case 'ForInStatement':
+      case 'ForOfStatement':
+        this.loopContext = {
+          upper: this.loopContext,
+          type,
+          label,
+          prevSegments: null,
+          leftSegments: null,
+          endOfLeftSegments: null,
+          continueDestSegments: null,
+          brokenForkContext: breakContext.brokenForkContext,
+        };
+        break;
+
+      /* c8 ignore next */
+      default:
+        throw new Error(`unknown type: "${type}"`);
+    }
+  }
+
+  /**
+   * Pops the last context of a loop statement and finalizes it.
+   * @throws {Error} (Unreachable - unknown type.)
+   * @returns {void}
+   */
+  popLoopContext() {
+    const context = this.loopContext;
+
+    this.loopContext = context.upper;
+
+    const forkContext = this.forkContext;
+    const brokenForkContext = this.popBreakContext().brokenForkContext;
+
+    // Creates a looped path.
+    switch (context.type) {
+      case 'WhileStatement':
+      case 'ForStatement':
+        this.popChoiceContext();
+        makeLooped(this, forkContext.head, context.continueDestSegments);
+        break;
+
+      case 'DoWhileStatement': {
+        const choiceContext = this.popChoiceContext();
+
+        if (!choiceContext.processed) {
+          choiceContext.trueForkContext.add(forkContext.head);
+          choiceContext.falseForkContext.add(forkContext.head);
+        }
+        if (context.test !== true) {
+          brokenForkContext.addAll(choiceContext.falseForkContext);
+        }
+
+        // `true` paths go to looping.
+        const segmentsList = choiceContext.trueForkContext.segmentsList;
+
+        for (let i = 0; i < segmentsList.length; ++i) {
+          makeLooped(this, segmentsList[i], context.entrySegments);
+        }
+        break;
+      }
+
+      case 'ForInStatement':
+      case 'ForOfStatement':
+        brokenForkContext.add(forkContext.head);
+        makeLooped(this, forkContext.head, context.leftSegments);
+        break;
+
+      /* c8 ignore next */
+      default:
+        throw new Error('unreachable');
+    }
+
+    // Go next.
+    if (brokenForkContext.empty) {
+      forkContext.replaceHead(forkContext.makeUnreachable(-1, -1));
+    } else {
+      forkContext.replaceHead(brokenForkContext.makeNext(0, -1));
+    }
+  }
+
+  /**
+   * Makes a code path segment for the test part of a WhileStatement.
+   * @param {boolean|undefined} test The test value (only when constant).
+   * @returns {void}
+   */
+  makeWhileTest(test) {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+    const testSegments = forkContext.makeNext(0, -1);
+
+    // Update state.
+    context.test = test;
+    context.continueDestSegments = testSegments;
+    forkContext.replaceHead(testSegments);
+  }
+
+  /**
+   * Makes a code path segment for the body part of a WhileStatement.
+   * @returns {void}
+   */
+  makeWhileBody() {
+    const context = this.loopContext;
+    const choiceContext = this.choiceContext;
+    const forkContext = this.forkContext;
+
+    if (!choiceContext.processed) {
+      choiceContext.trueForkContext.add(forkContext.head);
+      choiceContext.falseForkContext.add(forkContext.head);
+    }
+
+    // Update state.
+    if (context.test !== true) {
+      context.brokenForkContext.addAll(choiceContext.falseForkContext);
+    }
+    forkContext.replaceHead(choiceContext.trueForkContext.makeNext(0, -1));
+  }
+
+  /**
+   * Makes a code path segment for the body part of a DoWhileStatement.
+   * @returns {void}
+   */
+  makeDoWhileBody() {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+    const bodySegments = forkContext.makeNext(-1, -1);
+
+    // Update state.
+    context.entrySegments = bodySegments;
+    forkContext.replaceHead(bodySegments);
+  }
+
+  /**
+   * Makes a code path segment for the test part of a DoWhileStatement.
+   * @param {boolean|undefined} test The test value (only when constant).
+   * @returns {void}
+   */
+  makeDoWhileTest(test) {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+
+    context.test = test;
+
+    // Creates paths of `continue` statements.
+    if (!context.continueForkContext.empty) {
+      context.continueForkContext.add(forkContext.head);
+      const testSegments = context.continueForkContext.makeNext(0, -1);
+
+      forkContext.replaceHead(testSegments);
+    }
+  }
+
+  /**
+   * Makes a code path segment for the test part of a ForStatement.
+   * @param {boolean|undefined} test The test value (only when constant).
+   * @returns {void}
+   */
+  makeForTest(test) {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+    const endOfInitSegments = forkContext.head;
+    const testSegments = forkContext.makeNext(-1, -1);
+
+    // Update state.
+    context.test = test;
+    context.endOfInitSegments = endOfInitSegments;
+    context.continueDestSegments = context.testSegments = testSegments;
+    forkContext.replaceHead(testSegments);
+  }
+
+  /**
+   * Makes a code path segment for the update part of a ForStatement.
+   * @returns {void}
+   */
+  makeForUpdate() {
+    const context = this.loopContext;
+    const choiceContext = this.choiceContext;
+    const forkContext = this.forkContext;
+
+    // Make the next paths of the test.
+    if (context.testSegments) {
+      finalizeTestSegmentsOfFor(context, choiceContext, forkContext.head);
+    } else {
+      context.endOfInitSegments = forkContext.head;
+    }
+
+    // Update state.
+    const updateSegments = forkContext.makeDisconnected(-1, -1);
+
+    context.continueDestSegments = context.updateSegments = updateSegments;
+    forkContext.replaceHead(updateSegments);
+  }
+
+  /**
+   * Makes a code path segment for the body part of a ForStatement.
+   * @returns {void}
+   */
+  makeForBody() {
+    const context = this.loopContext;
+    const choiceContext = this.choiceContext;
+    const forkContext = this.forkContext;
+
+    // Update state.
+    if (context.updateSegments) {
+      context.endOfUpdateSegments = forkContext.head;
+
+      // `update` -> `test`
+      if (context.testSegments) {
+        makeLooped(this, context.endOfUpdateSegments, context.testSegments);
+      }
+    } else if (context.testSegments) {
+      finalizeTestSegmentsOfFor(context, choiceContext, forkContext.head);
+    } else {
+      context.endOfInitSegments = forkContext.head;
+    }
+
+    let bodySegments = context.endOfTestSegments;
+
+    if (!bodySegments) {
+      /*
+       * If there is not the `test` part, the `body` path comes from the
+       * `init` part and the `update` part.
+       */
+      const prevForkContext = ForkContext.newEmpty(forkContext);
+
+      prevForkContext.add(context.endOfInitSegments);
+      if (context.endOfUpdateSegments) {
+        prevForkContext.add(context.endOfUpdateSegments);
+      }
+
+      bodySegments = prevForkContext.makeNext(0, -1);
+    }
+    context.continueDestSegments = context.continueDestSegments || bodySegments;
+    forkContext.replaceHead(bodySegments);
+  }
+
+  /**
+   * Makes a code path segment for the left part of a ForInStatement and a
+   * ForOfStatement.
+   * @returns {void}
+   */
+  makeForInOfLeft() {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+    const leftSegments = forkContext.makeDisconnected(-1, -1);
+
+    // Update state.
+    context.prevSegments = forkContext.head;
+    context.leftSegments = context.continueDestSegments = leftSegments;
+    forkContext.replaceHead(leftSegments);
+  }
+
+  /**
+   * Makes a code path segment for the right part of a ForInStatement and a
+   * ForOfStatement.
+   * @returns {void}
+   */
+  makeForInOfRight() {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+    const temp = ForkContext.newEmpty(forkContext);
+
+    temp.add(context.prevSegments);
+    const rightSegments = temp.makeNext(-1, -1);
+
+    // Update state.
+    context.endOfLeftSegments = forkContext.head;
+    forkContext.replaceHead(rightSegments);
+  }
+
+  /**
+   * Makes a code path segment for the body part of a ForInStatement and a
+   * ForOfStatement.
+   * @returns {void}
+   */
+  makeForInOfBody() {
+    const context = this.loopContext;
+    const forkContext = this.forkContext;
+    const temp = ForkContext.newEmpty(forkContext);
+
+    temp.add(context.endOfLeftSegments);
+    const bodySegments = temp.makeNext(-1, -1);
+
+    // Make a path: `right` -> `left`.
+    makeLooped(this, forkContext.head, context.leftSegments);
+
+    // Update state.
+    context.brokenForkContext.add(forkContext.head);
+    forkContext.replaceHead(bodySegments);
+  }
+
+  //--------------------------------------------------------------------------
+  // Control Statements
+  //--------------------------------------------------------------------------
+
+  /**
+   * Creates new context for BreakStatement.
+   * @param {boolean} breakable The flag to indicate it can break by
+   *      an unlabeled BreakStatement.
+   * @param {string|null} label The label of this context.
+   * @returns {Object} The new context.
+   */
+  pushBreakContext(breakable, label) {
+    this.breakContext = {
+      upper: this.breakContext,
+      breakable,
+      label,
+      brokenForkContext: ForkContext.newEmpty(this.forkContext),
+    };
+    return this.breakContext;
+  }
+
+  /**
+   * Removes the top item of the break context stack.
+   * @returns {Object} The removed context.
+   */
+  popBreakContext() {
+    const context = this.breakContext;
+    const forkContext = this.forkContext;
+
+    this.breakContext = context.upper;
+
+    // Process this context here for other than switches and loops.
+    if (!context.breakable) {
+      const brokenForkContext = context.brokenForkContext;
+
+      if (!brokenForkContext.empty) {
+        brokenForkContext.add(forkContext.head);
+        forkContext.replaceHead(brokenForkContext.makeNext(0, -1));
+      }
+    }
+
+    return context;
+  }
+
+  /**
+   * Makes a path for a `break` statement.
+   *
+   * It registers the head segment to a context of `break`.
+   * It makes new unreachable segment, then it set the head with the segment.
+   * @param {string} label A label of the break statement.
+   * @returns {void}
+   */
+  makeBreak(label) {
+    const forkContext = this.forkContext;
+
+    if (!forkContext.reachable) {
+      return;
+    }
+
+    const context = getBreakContext(this, label);
+
+    if (context) {
+      context.brokenForkContext.add(forkContext.head);
+    }
+
+    /* c8 ignore next */
+    forkContext.replaceHead(forkContext.makeUnreachable(-1, -1));
+  }
+
+  /**
+   * Makes a path for a `continue` statement.
+   *
+   * It makes a looping path.
+   * It makes new unreachable segment, then it set the head with the segment.
+   * @param {string} label A label of the continue statement.
+   * @returns {void}
+   */
+  makeContinue(label) {
+    const forkContext = this.forkContext;
+
+    if (!forkContext.reachable) {
+      return;
+    }
+
+    const context = getContinueContext(this, label);
+
+    if (context) {
+      if (context.continueDestSegments) {
+        makeLooped(this, forkContext.head, context.continueDestSegments);
+
+        // If the context is a for-in/of loop, this effects a break also.
+        if (
+          context.type === 'ForInStatement' ||
+          context.type === 'ForOfStatement'
+        ) {
+          context.brokenForkContext.add(forkContext.head);
+        }
+      } else {
+        context.continueForkContext.add(forkContext.head);
+      }
+    }
+    forkContext.replaceHead(forkContext.makeUnreachable(-1, -1));
+  }
+
+  /**
+   * Makes a path for a `return` statement.
+   *
+   * It registers the head segment to a context of `return`.
+   * It makes new unreachable segment, then it set the head with the segment.
+   * @returns {void}
+   */
+  makeReturn() {
+    const forkContext = this.forkContext;
+
+    if (forkContext.reachable) {
+      getReturnContext(this).returnedForkContext.add(forkContext.head);
+      forkContext.replaceHead(forkContext.makeUnreachable(-1, -1));
+    }
+  }
+
+  /**
+   * Makes a path for a `throw` statement.
+   *
+   * It registers the head segment to a context of `throw`.
+   * It makes new unreachable segment, then it set the head with the segment.
+   * @returns {void}
+   */
+  makeThrow() {
+    const forkContext = this.forkContext;
+
+    if (forkContext.reachable) {
+      getThrowContext(this).thrownForkContext.add(forkContext.head);
+      forkContext.replaceHead(forkContext.makeUnreachable(-1, -1));
+    }
+  }
+
+  /**
+   * Makes the final path.
+   * @returns {void}
+   */
+  makeFinal() {
+    const segments = this.currentSegments;
+
+    if (segments.length > 0 && segments[0].reachable) {
+      this.returnedForkContext.add(segments);
+    }
+  }
+}
+
+module.exports = CodePathState;
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path.js
new file mode 100644
index 00000000000..167d9be7af8
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path.js
@@ -0,0 +1,239 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+// eslint-disable-next-line
+const CodePathState = require('./code-path-state');
+// eslint-disable-next-line
+const IdGenerator = require('./id-generator');
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * A code path.
+ */
+class CodePath {
+  /**
+   * Creates a new instance.
+   * @param {Object} options Options for the function (see below).
+   * @param {string} options.id An identifier.
+   * @param {string} options.origin The type of code path origin.
+   * @param {CodePath|null} options.upper The code path of the upper function scope.
+   * @param {Function} options.onLooped A callback function to notify looping.
+   */
+  constructor({id, origin, upper, onLooped}) {
+    /**
+     * The identifier of this code path.
+     * Rules use it to store additional information of each rule.
+     * @type {string}
+     */
+    this.id = id;
+
+    /**
+     * The reason that this code path was started. May be "program",
+     * "function", "class-field-initializer", or "class-static-block".
+     * @type {string}
+     */
+    this.origin = origin;
+
+    /**
+     * The code path of the upper function scope.
+     * @type {CodePath|null}
+     */
+    this.upper = upper;
+
+    /**
+     * The code paths of nested function scopes.
+     * @type {CodePath[]}
+     */
+    this.childCodePaths = [];
+
+    // Initializes internal state.
+    Object.defineProperty(this, 'internal', {
+      value: new CodePathState(new IdGenerator(`${id}_`), onLooped),
+    });
+
+    // Adds this into `childCodePaths` of `upper`.
+    if (upper) {
+      upper.childCodePaths.push(this);
+    }
+  }
+
+  /**
+   * Gets the state of a given code path.
+   * @param {CodePath} codePath A code path to get.
+   * @returns {CodePathState} The state of the code path.
+   */
+  static getState(codePath) {
+    return codePath.internal;
+  }
+
+  /**
+   * The initial code path segment.
+   * @type {CodePathSegment}
+   */
+  get initialSegment() {
+    return this.internal.initialSegment;
+  }
+
+  /**
+   * Final code path segments.
+   * This array is a mix of `returnedSegments` and `thrownSegments`.
+   * @type {CodePathSegment[]}
+   */
+  get finalSegments() {
+    return this.internal.finalSegments;
+  }
+
+  /**
+   * Final code path segments which is with `return` statements.
+   * This array contains the last path segment if it's reachable.
+   * Since the reachable last path returns `undefined`.
+   * @type {CodePathSegment[]}
+   */
+  get returnedSegments() {
+    return this.internal.returnedForkContext;
+  }
+
+  /**
+   * Final code path segments which is with `throw` statements.
+   * @type {CodePathSegment[]}
+   */
+  get thrownSegments() {
+    return this.internal.thrownForkContext;
+  }
+
+  /**
+   * Current code path segments.
+   * @type {CodePathSegment[]}
+   */
+  get currentSegments() {
+    return this.internal.currentSegments;
+  }
+
+  /**
+   * Traverses all segments in this code path.
+   *
+   *     codePath.traverseSegments(function(segment, controller) {
+   *         // do something.
+   *     });
+   *
+   * This method enumerates segments in order from the head.
+   *
+   * The `controller` object has two methods.
+   *
+   * - `controller.skip()` - Skip the following segments in this branch.
+   * - `controller.break()` - Skip all following segments.
+   * @param {Object} [options] Omittable.
+   * @param {CodePathSegment} [options.first] The first segment to traverse.
+   * @param {CodePathSegment} [options.last] The last segment to traverse.
+   * @param {Function} callback A callback function.
+   * @returns {void}
+   */
+  traverseSegments(options, callback) {
+    let resolvedOptions;
+    let resolvedCallback;
+
+    if (typeof options === 'function') {
+      resolvedCallback = options;
+      resolvedOptions = {};
+    } else {
+      resolvedOptions = options || {};
+      resolvedCallback = callback;
+    }
+
+    const startSegment = resolvedOptions.first || this.internal.initialSegment;
+    const lastSegment = resolvedOptions.last;
+
+    let item = null;
+    let index = 0;
+    let end = 0;
+    let segment = null;
+    const visited = Object.create(null);
+    const stack = [[startSegment, 0]];
+    let skippedSegment = null;
+    let broken = false;
+    const controller = {
+      skip() {
+        if (stack.length <= 1) {
+          broken = true;
+        } else {
+          skippedSegment = stack[stack.length - 2][0];
+        }
+      },
+      break() {
+        broken = true;
+      },
+    };
+
+    /**
+     * Checks a given previous segment has been visited.
+     * @param {CodePathSegment} prevSegment A previous segment to check.
+     * @returns {boolean} `true` if the segment has been visited.
+     */
+    function isVisited(prevSegment) {
+      return (
+        visited[prevSegment.id] || segment.isLoopedPrevSegment(prevSegment)
+      );
+    }
+
+    while (stack.length > 0) {
+      item = stack[stack.length - 1];
+      segment = item[0];
+      index = item[1];
+
+      if (index === 0) {
+        // Skip if this segment has been visited already.
+        if (visited[segment.id]) {
+          stack.pop();
+          continue;
+        }
+
+        // Skip if all previous segments have not been visited.
+        if (
+          segment !== startSegment &&
+          segment.prevSegments.length > 0 &&
+          !segment.prevSegments.every(isVisited)
+        ) {
+          stack.pop();
+          continue;
+        }
+
+        // Reset the flag of skipping if all branches have been skipped.
+        if (skippedSegment && segment.prevSegments.includes(skippedSegment)) {
+          skippedSegment = null;
+        }
+        visited[segment.id] = true;
+
+        // Call the callback when the first time.
+        if (!skippedSegment) {
+          resolvedCallback.call(this, segment, controller);
+          if (segment === lastSegment) {
+            controller.skip();
+          }
+          if (broken) {
+            break;
+          }
+        }
+      }
+
+      // Update the stack.
+      end = segment.nextSegments.length - 1;
+      if (index < end) {
+        item[1] += 1;
+        stack.push([segment.nextSegments[index], 0]);
+      } else if (index === end) {
+        item[0] = segment.nextSegments[index];
+        item[1] = 0;
+      } else {
+        stack.pop();
+      }
+    }
+  }
+}
+
+module.exports = CodePath;
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/fork-context.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/fork-context.js
new file mode 100644
index 00000000000..528aaa41e15
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/fork-context.js
@@ -0,0 +1,252 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+// eslint-disable-next-line
+const assert = require('./assert');
+// eslint-disable-next-line
+const CodePathSegment = require('./code-path-segment');
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Gets whether or not a given segment is reachable.
+ * @param {CodePathSegment} segment A segment to get.
+ * @returns {boolean} `true` if the segment is reachable.
+ */
+function isReachable(segment) {
+  return segment.reachable;
+}
+
+/**
+ * Creates new segments from the specific range of `context.segmentsList`.
+ *
+ * When `context.segmentsList` is `[[a, b], [c, d], [e, f]]`, `begin` is `0`, and
+ * `end` is `-1`, this creates `[g, h]`. This `g` is from `a`, `c`, and `e`.
+ * This `h` is from `b`, `d`, and `f`.
+ * @param {ForkContext} context An instance.
+ * @param {number} begin The first index of the previous segments.
+ * @param {number} end The last index of the previous segments.
+ * @param {Function} create A factory function of new segments.
+ * @returns {CodePathSegment[]} New segments.
+ */
+function makeSegments(context, begin, end, create) {
+  const list = context.segmentsList;
+
+  const normalizedBegin = begin >= 0 ? begin : list.length + begin;
+  const normalizedEnd = end >= 0 ? end : list.length + end;
+
+  const segments = [];
+
+  for (let i = 0; i < context.count; ++i) {
+    const allPrevSegments = [];
+
+    for (let j = normalizedBegin; j <= normalizedEnd; ++j) {
+      allPrevSegments.push(list[j][i]);
+    }
+
+    segments.push(create(context.idGenerator.next(), allPrevSegments));
+  }
+
+  return segments;
+}
+
+/**
+ * `segments` becomes doubly in a `finally` block. Then if a code path exits by a
+ * control statement (such as `break`, `continue`) from the `finally` block, the
+ * destination's segments may be half of the source segments. In that case, this
+ * merges segments.
+ * @param {ForkContext} context An instance.
+ * @param {CodePathSegment[]} segments Segments to merge.
+ * @returns {CodePathSegment[]} The merged segments.
+ */
+function mergeExtraSegments(context, segments) {
+  let currentSegments = segments;
+
+  while (currentSegments.length > context.count) {
+    const merged = [];
+
+    for (
+      let i = 0, length = (currentSegments.length / 2) | 0;
+      i < length;
+      ++i
+    ) {
+      merged.push(
+        CodePathSegment.newNext(context.idGenerator.next(), [
+          currentSegments[i],
+          currentSegments[i + length],
+        ]),
+      );
+    }
+    currentSegments = merged;
+  }
+  return currentSegments;
+}
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * A class to manage forking.
+ */
+class ForkContext {
+  /**
+   * @param {IdGenerator} idGenerator An identifier generator for segments.
+   * @param {ForkContext|null} upper An upper fork context.
+   * @param {number} count A number of parallel segments.
+   */
+  constructor(idGenerator, upper, count) {
+    this.idGenerator = idGenerator;
+    this.upper = upper;
+    this.count = count;
+    this.segmentsList = [];
+  }
+
+  /**
+   * The head segments.
+   * @type {CodePathSegment[]}
+   */
+  get head() {
+    const list = this.segmentsList;
+
+    return list.length === 0 ? [] : list[list.length - 1];
+  }
+
+  /**
+   * A flag which shows empty.
+   * @type {boolean}
+   */
+  get empty() {
+    return this.segmentsList.length === 0;
+  }
+
+  /**
+   * A flag which shows reachable.
+   * @type {boolean}
+   */
+  get reachable() {
+    const segments = this.head;
+
+    return segments.length > 0 && segments.some(isReachable);
+  }
+
+  /**
+   * Creates new segments from this context.
+   * @param {number} begin The first index of previous segments.
+   * @param {number} end The last index of previous segments.
+   * @returns {CodePathSegment[]} New segments.
+   */
+  makeNext(begin, end) {
+    return makeSegments(this, begin, end, CodePathSegment.newNext);
+  }
+
+  /**
+   * Creates new segments from this context.
+   * The new segments is always unreachable.
+   * @param {number} begin The first index of previous segments.
+   * @param {number} end The last index of previous segments.
+   * @returns {CodePathSegment[]} New segments.
+   */
+  makeUnreachable(begin, end) {
+    return makeSegments(this, begin, end, CodePathSegment.newUnreachable);
+  }
+
+  /**
+   * Creates new segments from this context.
+   * The new segments don't have connections for previous segments.
+   * But these inherit the reachable flag from this context.
+   * @param {number} begin The first index of previous segments.
+   * @param {number} end The last index of previous segments.
+   * @returns {CodePathSegment[]} New segments.
+   */
+  makeDisconnected(begin, end) {
+    return makeSegments(this, begin, end, CodePathSegment.newDisconnected);
+  }
+
+  /**
+   * Adds segments into this context.
+   * The added segments become the head.
+   * @param {CodePathSegment[]} segments Segments to add.
+   * @returns {void}
+   */
+  add(segments) {
+    assert(
+      segments.length >= this.count,
+      `${segments.length} >= ${this.count}`,
+    );
+
+    this.segmentsList.push(mergeExtraSegments(this, segments));
+  }
+
+  /**
+   * Replaces the head segments with given segments.
+   * The current head segments are removed.
+   * @param {CodePathSegment[]} segments Segments to add.
+   * @returns {void}
+   */
+  replaceHead(segments) {
+    assert(
+      segments.length >= this.count,
+      `${segments.length} >= ${this.count}`,
+    );
+
+    this.segmentsList.splice(-1, 1, mergeExtraSegments(this, segments));
+  }
+
+  /**
+   * Adds all segments of a given fork context into this context.
+   * @param {ForkContext} context A fork context to add.
+   * @returns {void}
+   */
+  addAll(context) {
+    assert(context.count === this.count);
+
+    const source = context.segmentsList;
+
+    for (let i = 0; i < source.length; ++i) {
+      this.segmentsList.push(source[i]);
+    }
+  }
+
+  /**
+   * Clears all segments in this context.
+   * @returns {void}
+   */
+  clear() {
+    this.segmentsList = [];
+  }
+
+  /**
+   * Creates the root fork context.
+   * @param {IdGenerator} idGenerator An identifier generator for segments.
+   * @returns {ForkContext} New fork context.
+   */
+  static newRoot(idGenerator) {
+    const context = new ForkContext(idGenerator, null, 1);
+
+    context.add([CodePathSegment.newRoot(idGenerator.next())]);
+
+    return context;
+  }
+
+  /**
+   * Creates an empty fork context preceded by a given context.
+   * @param {ForkContext} parentContext The parent fork context.
+   * @param {boolean} forkLeavingPath A flag which shows inside of `finally` block.
+   * @returns {ForkContext} New fork context.
+   */
+  static newEmpty(parentContext, forkLeavingPath) {
+    return new ForkContext(
+      parentContext.idGenerator,
+      parentContext,
+      (forkLeavingPath ? 2 : 1) * parentContext.count,
+    );
+  }
+}
+
+module.exports = ForkContext;
diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/id-generator.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/id-generator.js
new file mode 100644
index 00000000000..ed0f47d8346
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/id-generator.js
@@ -0,0 +1,37 @@
+'use strict';
+
+/* eslint-disable react-internal/safe-string-coercion */
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * A generator for unique ids.
+ */
+class IdGenerator {
+  /**
+   * @param {string} prefix Optional. A prefix of generated ids.
+   */
+  constructor(prefix) {
+    this.prefix = String(prefix);
+    this.n = 0;
+  }
+
+  /**
+   * Generates id.
+   * @returns {string} A generated id.
+   */
+  next() {
+    this.n = (1 + this.n) | 0;
+
+    /* c8 ignore start */
+    if (this.n < 0) {
+      this.n = 1;
+    } /* c8 ignore stop */
+
+    return this.prefix + this.n;
+  }
+}
+
+module.exports = IdGenerator;
diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts
new file mode 100644
index 00000000000..924299d8989
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/index.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type {Linter, Rule} from 'eslint';
+
+import ExhaustiveDeps from './rules/ExhaustiveDeps';
+import {
+  allRules,
+  mapErrorSeverityToESlint,
+  recommendedRules,
+  recommendedLatestRules,
+} from './shared/ReactCompiler';
+import RulesOfHooks from './rules/RulesOfHooks';
+
+const rules = {
+  'exhaustive-deps': ExhaustiveDeps,
+  'rules-of-hooks': RulesOfHooks,
+  ...Object.fromEntries(
+    Object.entries(allRules).map(([name, config]) => [name, config.rule]),
+  ),
+} satisfies Record<string, Rule.RuleModule>;
+
+const basicRuleConfigs = {
+  'react-hooks/rules-of-hooks': 'error',
+  'react-hooks/exhaustive-deps': 'warn',
+} as const satisfies Linter.RulesRecord;
+
+const recommendedCompilerRuleConfigs = Object.fromEntries(
+  Object.entries(recommendedRules).map(([name, ruleConfig]) => {
+    return [
+      `react-hooks/${name}` as const,
+      mapErrorSeverityToESlint(ruleConfig.severity),
+    ] as const;
+  }),
+) as Record<`react-hooks/${string}`, Linter.RuleEntry>;
+
+const recommendedLatestCompilerRuleConfigs = Object.fromEntries(
+  Object.entries(recommendedLatestRules).map(([name, ruleConfig]) => {
+    return [
+      `react-hooks/${name}` as const,
+      mapErrorSeverityToESlint(ruleConfig.severity),
+    ] as const;
+  }),
+) as Record<`react-hooks/${string}`, Linter.RuleEntry>;
+
+const recommendedRuleConfigs: Linter.RulesRecord = {
+  ...basicRuleConfigs,
+  ...recommendedCompilerRuleConfigs,
+};
+const recommendedLatestRuleConfigs: Linter.RulesRecord = {
+  ...basicRuleConfigs,
+  ...recommendedLatestCompilerRuleConfigs,
+};
+
+const plugins = ['react-hooks'];
+
+type ReactHooksFlatConfig = {
+  plugins: {react: any};
+  rules: Linter.RulesRecord;
+};
+
+const configs = {
+  recommended: {
+    plugins,
+    rules: recommendedRuleConfigs,
+  },
+  'recommended-latest': {
+    plugins,
+    rules: recommendedLatestRuleConfigs,
+  },
+  flat: {} as {
+    recommended: ReactHooksFlatConfig;
+    'recommended-latest': ReactHooksFlatConfig;
+  },
+};
+
+const plugin = {
+  meta: {
+    name: 'eslint-plugin-react-hooks',
+    version: '7.0.0',
+  },
+  rules,
+  configs,
+};
+
+Object.assign(configs.flat, {
+  'recommended-latest': {
+    plugins: {'react-hooks': plugin},
+    rules: configs['recommended-latest'].rules,
+  },
+  recommended: {
+    plugins: {'react-hooks': plugin},
+    rules: configs.recommended.rules,
+  },
+});
+
+export default plugin;
diff --git a/packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts b/packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts
new file mode 100644
index 00000000000..05321ffb46f
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts
@@ -0,0 +1,2135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-for-of-loops/no-for-of-loops */
+import type {Rule, Scope} from 'eslint';
+import type {
+  ArrayExpression,
+  ArrowFunctionExpression,
+  CallExpression,
+  Expression,
+  FunctionDeclaration,
+  FunctionExpression,
+  Identifier,
+  Node,
+  Pattern,
+  PrivateIdentifier,
+  Super,
+  VariableDeclarator,
+} from 'estree';
+
+import { getAdditionalEffectHooksFromSettings } from '../shared/Utils';
+
+type DeclaredDependency = {
+  key: string;
+  node: Node;
+};
+
+type Dependency = {
+  isStable: boolean;
+  references: Array<Scope.Reference>;
+};
+
+type DependencyTreeNode = {
+  isUsed: boolean; // True if used in code
+  isSatisfiedRecursively: boolean; // True if specified in deps
+  isSubtreeUsed: boolean; // True if something deeper is used by code
+  children: Map<string, DependencyTreeNode>; // Nodes for properties
+};
+
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'verifies the list of dependencies for Hooks like useEffect and similar',
+      recommended: true,
+      url: 'https://github.com/facebook/react/issues/14920',
+    },
+    fixable: 'code',
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        enableDangerousAutofixThisMayCauseInfiniteLoops: false,
+        properties: {
+          additionalHooks: {
+            type: 'string',
+          },
+          enableDangerousAutofixThisMayCauseInfiniteLoops: {
+            type: 'boolean',
+          },
+          experimental_autoDependenciesHooks: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+          requireExplicitEffectDeps: {
+            type: 'boolean',
+          },
+        },
+      },
+    ],
+  },
+  create(context: Rule.RuleContext) {
+    const rawOptions = context.options && context.options[0];
+    const settings = context.settings || {};
+
+
+    // Parse the `additionalHooks` regex.
+    // Use rule-level additionalHooks if provided, otherwise fall back to settings
+    const additionalHooks =
+      rawOptions && rawOptions.additionalHooks
+        ? new RegExp(rawOptions.additionalHooks)
+        : getAdditionalEffectHooksFromSettings(settings);
+
+    const enableDangerousAutofixThisMayCauseInfiniteLoops: boolean =
+      (rawOptions &&
+        rawOptions.enableDangerousAutofixThisMayCauseInfiniteLoops) ||
+      false;
+
+    const experimental_autoDependenciesHooks: ReadonlyArray<string> =
+      rawOptions && Array.isArray(rawOptions.experimental_autoDependenciesHooks)
+        ? rawOptions.experimental_autoDependenciesHooks
+        : [];
+
+    const requireExplicitEffectDeps: boolean =
+      (rawOptions && rawOptions.requireExplicitEffectDeps) || false;
+
+    const options = {
+      additionalHooks,
+      experimental_autoDependenciesHooks,
+      enableDangerousAutofixThisMayCauseInfiniteLoops,
+      requireExplicitEffectDeps,
+    };
+
+    function reportProblem(problem: Rule.ReportDescriptor) {
+      if (enableDangerousAutofixThisMayCauseInfiniteLoops) {
+        // Used to enable legacy behavior. Dangerous.
+        // Keep this as an option until major IDEs upgrade (including VSCode FB ESLint extension).
+        if (
+          Array.isArray(problem.suggest) &&
+          problem.suggest.length > 0 &&
+          problem.suggest[0]
+        ) {
+          problem.fix = problem.suggest[0].fix;
+        }
+      }
+      context.report(problem);
+    }
+
+    /**
+     * SourceCode that also works down to ESLint 3.0.0
+     */
+    const getSourceCode =
+      typeof context.getSourceCode === 'function'
+        ? () => {
+            return context.getSourceCode();
+          }
+        : () => {
+            return context.sourceCode;
+          };
+    /**
+     * SourceCode#getScope that also works down to ESLint 3.0.0
+     */
+    const getScope =
+      typeof context.getScope === 'function'
+        ? () => {
+            return context.getScope();
+          }
+        : (node: Node) => {
+            return context.sourceCode.getScope(node);
+          };
+
+    const scopeManager = getSourceCode().scopeManager;
+
+    // Should be shared between visitors.
+    const setStateCallSites = new WeakMap<
+      Expression | Super,
+      Pattern | null | undefined
+    >();
+    const stateVariables = new WeakSet<Identifier>();
+    const stableKnownValueCache = new WeakMap<Scope.Variable, boolean>();
+    const functionWithoutCapturedValueCache = new WeakMap<
+      Scope.Variable,
+      boolean
+    >();
+    const useEffectEventVariables = new WeakSet<Expression>();
+
+    function memoizeWithWeakMap(
+      fn: (resolved: Scope.Variable) => boolean,
+      map: WeakMap<Scope.Variable, boolean>,
+    ) {
+      return function (arg: Scope.Variable): boolean {
+        if (map.has(arg)) {
+          // to verify cache hits:
+          // console.log(arg.name)
+          return map.get(arg)!;
+        }
+        const result = fn(arg);
+        map.set(arg, result);
+        return result;
+      };
+    }
+    /**
+     * Visitor for both function expressions and arrow function expressions.
+     */
+    function visitFunctionWithDependencies(
+      node: ArrowFunctionExpression | FunctionDeclaration | FunctionExpression,
+      declaredDependenciesNode: Node | undefined,
+      reactiveHook: Node,
+      reactiveHookName: string,
+      isEffect: boolean,
+      isAutoDepsHook: boolean,
+    ): void {
+      if (isEffect && node.async) {
+        reportProblem({
+          node: node,
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching',
+        });
+      }
+
+      // Get the current scope.
+      const scope = scopeManager.acquire(node);
+      if (!scope) {
+        throw new Error(
+          'Unable to acquire scope for the current node. This is a bug in eslint-plugin-react-hooks, please file an issue.',
+        );
+      }
+
+      // Find all our "pure scopes". On every re-render of a component these
+      // pure scopes may have changes to the variables declared within. So all
+      // variables used in our reactive hook callback but declared in a pure
+      // scope need to be listed as dependencies of our reactive hook callback.
+      //
+      // According to the rules of React you can't read a mutable value in pure
+      // scope. We can't enforce this in a lint so we trust that all variables
+      // declared outside of pure scope are indeed frozen.
+      const pureScopes = new Set();
+      let componentScope: Scope.Scope | null = null;
+      {
+        let currentScope = scope.upper;
+        while (currentScope) {
+          pureScopes.add(currentScope);
+          if (
+            currentScope.type === 'function' ||
+            // @ts-expect-error incorrect TS types
+            currentScope.type === 'hook' ||
+            // @ts-expect-error incorrect TS types
+            currentScope.type === 'component'
+          ) {
+            break;
+          }
+          currentScope = currentScope.upper;
+        }
+        // If there is no parent function scope then there are no pure scopes.
+        // The ones we've collected so far are incorrect. So don't continue with
+        // the lint.
+        if (!currentScope) {
+          return;
+        }
+        componentScope = currentScope;
+      }
+
+      const isArray = Array.isArray;
+
+      // Next we'll define a few helpers that helps us
+      // tell if some values don't have to be declared as deps.
+
+      // Some are known to be stable based on Hook calls.
+      // const [state, setState] = useState() / React.useState()
+      //               ^^^ true for this reference
+      // const [state, dispatch] = useReducer() / React.useReducer()
+      //               ^^^ true for this reference
+      // const [state, dispatch] = useActionState() / React.useActionState()
+      //               ^^^ true for this reference
+      // const ref = useRef()
+      //       ^^^ true for this reference
+      // const onStuff = useEffectEvent(() => {})
+      //       ^^^ true for this reference
+      // False for everything else.
+      function isStableKnownHookValue(resolved: Scope.Variable): boolean {
+        if (!isArray(resolved.defs)) {
+          return false;
+        }
+        const def = resolved.defs[0];
+        if (def == null) {
+          return false;
+        }
+        // Look for `let stuff = ...`
+        const defNode: VariableDeclarator = def.node;
+        if (defNode.type !== 'VariableDeclarator') {
+          return false;
+        }
+        let init = defNode.init;
+        if (init == null) {
+          return false;
+        }
+        while (init.type === 'TSAsExpression' || init.type === 'AsExpression') {
+          init = init.expression;
+        }
+        // Detect primitive constants
+        // const foo = 42
+        let declaration = defNode.parent;
+        if (declaration == null && componentScope != null) {
+          // This might happen if variable is declared after the callback.
+          // In that case ESLint won't set up .parent refs.
+          // So we'll set them up manually.
+          fastFindReferenceWithParent(componentScope.block, def.node.id);
+          declaration = def.node.parent;
+          if (declaration == null) {
+            return false;
+          }
+        }
+        if (
+          declaration != null &&
+          'kind' in declaration &&
+          declaration.kind === 'const' &&
+          init.type === 'Literal' &&
+          (typeof init.value === 'string' ||
+            typeof init.value === 'number' ||
+            init.value === null)
+        ) {
+          // Definitely stable
+          return true;
+        }
+        // Detect known Hook calls
+        // const [_, setState] = useState()
+        if (init.type !== 'CallExpression') {
+          return false;
+        }
+        let callee: Expression | PrivateIdentifier | Super = init.callee;
+        // Step into `= React.something` initializer.
+        if (
+          callee.type === 'MemberExpression' &&
+          'name' in callee.object &&
+          callee.object.name === 'React' &&
+          callee.property != null &&
+          !callee.computed
+        ) {
+          callee = callee.property;
+        }
+        if (callee.type !== 'Identifier') {
+          return false;
+        }
+        const definitionNode: VariableDeclarator = def.node;
+        const id = definitionNode.id;
+        const {name} = callee;
+        if (name === 'useRef' && id.type === 'Identifier') {
+          // useRef() return value is stable.
+          return true;
+        } else if (
+          isUseEffectEventIdentifier(callee) &&
+          id.type === 'Identifier'
+        ) {
+          for (const ref of resolved.references) {
+            // @ts-expect-error These types are not compatible (Reference and Identifier)
+            if (ref !== id) {
+              useEffectEventVariables.add(ref.identifier);
+            }
+          }
+          // useEffectEvent() return value is always unstable.
+          return true;
+        } else if (
+          name === 'useState' ||
+          name === 'useReducer' ||
+          name === 'useActionState'
+        ) {
+          // Only consider second value in initializing tuple stable.
+          if (
+            id.type === 'ArrayPattern' &&
+            id.elements.length === 2 &&
+            isArray(resolved.identifiers)
+          ) {
+            // Is second tuple value the same reference we're checking?
+            if (id.elements[1] === resolved.identifiers[0]) {
+              if (name === 'useState') {
+                const references = resolved.references;
+                let writeCount = 0;
+                for (const reference of references) {
+                  if (reference.isWrite()) {
+                    writeCount++;
+                  }
+                  if (writeCount > 1) {
+                    return false;
+                  }
+                  setStateCallSites.set(reference.identifier, id.elements[0]);
+                }
+              }
+              // Setter is stable.
+              return true;
+            } else if (id.elements[0] === resolved.identifiers[0]) {
+              if (name === 'useState') {
+                const references = resolved.references;
+                for (const reference of references) {
+                  stateVariables.add(reference.identifier);
+                }
+              }
+              // State variable itself is dynamic.
+              return false;
+            }
+          }
+        } else if (name === 'useTransition') {
+          // Only consider second value in initializing tuple stable.
+          if (
+            id.type === 'ArrayPattern' &&
+            id.elements.length === 2 &&
+            Array.isArray(resolved.identifiers)
+          ) {
+            // Is second tuple value the same reference we're checking?
+            if (id.elements[1] === resolved.identifiers[0]) {
+              // Setter is stable.
+              return true;
+            }
+          }
+        }
+        // By default assume it's dynamic.
+        return false;
+      }
+
+      // Some are just functions that don't reference anything dynamic.
+      function isFunctionWithoutCapturedValues(
+        resolved: Scope.Variable,
+      ): boolean {
+        if (!isArray(resolved.defs)) {
+          return false;
+        }
+        const def = resolved.defs[0];
+        if (def == null) {
+          return false;
+        }
+        if (def.node == null || def.node.id == null) {
+          return false;
+        }
+        // Search the direct component subscopes for
+        // top-level function definitions matching this reference.
+        const fnNode: Node = def.node;
+        const childScopes = componentScope?.childScopes || [];
+        let fnScope = null;
+        for (const childScope of childScopes) {
+          const childScopeBlock = childScope.block;
+          if (
+            // function handleChange() {}
+            (fnNode.type === 'FunctionDeclaration' &&
+              childScopeBlock === fnNode) ||
+            // const handleChange = () => {}
+            // const handleChange = function() {}
+            (fnNode.type === 'VariableDeclarator' &&
+              childScopeBlock.parent === fnNode)
+          ) {
+            // Found it!
+            fnScope = childScope;
+            break;
+          }
+        }
+        if (fnScope == null) {
+          return false;
+        }
+        // Does this function capture any values
+        // that are in pure scopes (aka render)?
+        for (const ref of fnScope.through) {
+          if (ref.resolved == null) {
+            continue;
+          }
+          if (
+            pureScopes.has(ref.resolved.scope) &&
+            // Stable values are fine though,
+            // although we won't check functions deeper.
+            !memoizedIsStableKnownHookValue(ref.resolved)
+          ) {
+            return false;
+          }
+        }
+        // If we got here, this function doesn't capture anything
+        // from render--or everything it captures is known stable.
+        return true;
+      }
+
+      // Remember such values. Avoid re-running extra checks on them.
+      const memoizedIsStableKnownHookValue = memoizeWithWeakMap(
+        isStableKnownHookValue,
+        stableKnownValueCache,
+      );
+      const memoizedIsFunctionWithoutCapturedValues = memoizeWithWeakMap(
+        isFunctionWithoutCapturedValues,
+        functionWithoutCapturedValueCache,
+      );
+
+      // These are usually mistaken. Collect them.
+      const currentRefsInEffectCleanup = new Map<
+        string,
+        {
+          reference: Scope.Reference;
+          dependencyNode: Identifier;
+        }
+      >();
+
+      // Is this reference inside a cleanup function for this effect node?
+      // We can check by traversing scopes upwards from the reference, and checking
+      // if the last "return () => " we encounter is located directly inside the effect.
+      function isInsideEffectCleanup(reference: Scope.Reference): boolean {
+        let curScope: Scope.Scope | null = reference.from;
+        let isInReturnedFunction = false;
+        while (curScope != null && curScope.block !== node) {
+          if (curScope.type === 'function') {
+            isInReturnedFunction =
+              curScope.block.parent != null &&
+              curScope.block.parent.type === 'ReturnStatement';
+          }
+          curScope = curScope.upper;
+        }
+        return isInReturnedFunction;
+      }
+
+      // Get dependencies from all our resolved references in pure scopes.
+      // Key is dependency string, value is whether it's stable.
+      const dependencies = new Map<string, Dependency>();
+      const optionalChains = new Map<string, boolean>();
+      gatherDependenciesRecursively(scope);
+
+      function gatherDependenciesRecursively(currentScope: Scope.Scope): void {
+        for (const reference of currentScope.references) {
+          // If this reference is not resolved or it is not declared in a pure
+          // scope then we don't care about this reference.
+          if (!reference.resolved) {
+            continue;
+          }
+          if (!pureScopes.has(reference.resolved.scope)) {
+            continue;
+          }
+
+          // Narrow the scope of a dependency if it is, say, a member expression.
+          // Then normalize the narrowed dependency.
+          const referenceNode = fastFindReferenceWithParent(
+            node,
+            reference.identifier,
+          );
+          if (referenceNode == null) {
+            continue;
+          }
+          const dependencyNode = getDependency(referenceNode);
+          const dependency = analyzePropertyChain(
+            dependencyNode,
+            optionalChains,
+          );
+
+          // Accessing ref.current inside effect cleanup is bad.
+          if (
+            // We're in an effect...
+            isEffect &&
+            // ... and this look like accessing .current...
+            dependencyNode.type === 'Identifier' &&
+            (dependencyNode.parent?.type === 'MemberExpression' ||
+              dependencyNode.parent?.type === 'OptionalMemberExpression') &&
+            !dependencyNode.parent.computed &&
+            dependencyNode.parent.property.type === 'Identifier' &&
+            dependencyNode.parent.property.name === 'current' &&
+            // ...in a cleanup function or below...
+            isInsideEffectCleanup(reference)
+          ) {
+            currentRefsInEffectCleanup.set(dependency, {
+              reference,
+              dependencyNode,
+            });
+          }
+
+          if (
+            dependencyNode.parent?.type === 'TSTypeQuery' ||
+            dependencyNode.parent?.type === 'TSTypeReference'
+          ) {
+            continue;
+          }
+
+          const def = reference.resolved.defs[0];
+          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
+          // @ts-expect-error We don't have flow types
+          if (def.type === 'TypeParameter') {
+            continue;
+          }
+
+          // Add the dependency to a map so we can make sure it is referenced
+          // again in our dependencies array. Remember whether it's stable.
+          if (!dependencies.has(dependency)) {
+            const resolved = reference.resolved;
+            const isStable =
+              memoizedIsStableKnownHookValue(resolved) ||
+              memoizedIsFunctionWithoutCapturedValues(resolved);
+            dependencies.set(dependency, {
+              isStable,
+              references: [reference],
+            });
+          } else {
+            dependencies.get(dependency)?.references.push(reference);
+          }
+        }
+
+        for (const childScope of currentScope.childScopes) {
+          gatherDependenciesRecursively(childScope);
+        }
+      }
+
+      // Warn about accessing .current in cleanup effects.
+      currentRefsInEffectCleanup.forEach(
+        ({reference, dependencyNode}, dependency) => {
+          const references = reference.resolved?.references || [];
+          // Is React managing this ref or us?
+          // Let's see if we can find a .current assignment.
+          let foundCurrentAssignment = false;
+          for (const ref of references) {
+            const {identifier} = ref;
+            const {parent} = identifier;
+            if (
+              parent != null &&
+              // ref.current
+              // Note: no need to handle OptionalMemberExpression because it can't be LHS.
+              parent.type === 'MemberExpression' &&
+              !parent.computed &&
+              parent.property.type === 'Identifier' &&
+              parent.property.name === 'current' &&
+              // ref.current = <something>
+              parent.parent?.type === 'AssignmentExpression' &&
+              parent.parent.left === parent
+            ) {
+              foundCurrentAssignment = true;
+              break;
+            }
+          }
+          // We only want to warn about React-managed refs.
+          if (foundCurrentAssignment) {
+            return;
+          }
+          reportProblem({
+            // @ts-expect-error We can do better here (dependencyNode.parent has not been type narrowed)
+            node: dependencyNode.parent.property,
+            message:
+              `The ref value '${dependency}.current' will likely have ` +
+              `changed by the time this effect cleanup function runs. If ` +
+              `this ref points to a node rendered by React, copy ` +
+              `'${dependency}.current' to a variable inside the effect, and ` +
+              `use that variable in the cleanup function.`,
+          });
+        },
+      );
+
+      // Warn about assigning to variables in the outer scope.
+      // Those are usually bugs.
+      const staleAssignments = new Set<string>();
+      function reportStaleAssignment(writeExpr: Node, key: string): void {
+        if (staleAssignments.has(key)) {
+          return;
+        }
+        staleAssignments.add(key);
+        reportProblem({
+          node: writeExpr,
+          message:
+            `Assignments to the '${key}' variable from inside React Hook ` +
+            `${getSourceCode().getText(reactiveHook)} will be lost after each ` +
+            `render. To preserve the value over time, store it in a useRef ` +
+            `Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside ` +
+            `${getSourceCode().getText(reactiveHook)}.`,
+        });
+      }
+
+      // Remember which deps are stable and report bad usage first.
+      const stableDependencies = new Set<string>();
+      dependencies.forEach(({isStable, references}, key) => {
+        if (isStable) {
+          stableDependencies.add(key);
+        }
+        references.forEach(reference => {
+          if (reference.writeExpr) {
+            reportStaleAssignment(reference.writeExpr, key);
+          }
+        });
+      });
+
+      if (staleAssignments.size > 0) {
+        // The intent isn't clear so we'll wait until you fix those first.
+        return;
+      }
+
+      if (!declaredDependenciesNode) {
+        if (isAutoDepsHook) {
+          return;
+        }
+        // Check if there are any top-level setState() calls.
+        // Those tend to lead to infinite loops.
+        let setStateInsideEffectWithoutDeps: string | null = null;
+        dependencies.forEach(({references}, key) => {
+          if (setStateInsideEffectWithoutDeps) {
+            return;
+          }
+          references.forEach(reference => {
+            if (setStateInsideEffectWithoutDeps) {
+              return;
+            }
+
+            const id = reference.identifier;
+            const isSetState = setStateCallSites.has(id);
+            if (!isSetState) {
+              return;
+            }
+
+            let fnScope: Scope.Scope | null = reference.from;
+            while (fnScope != null && fnScope.type !== 'function') {
+              fnScope = fnScope.upper;
+            }
+            const isDirectlyInsideEffect = fnScope?.block === node;
+            if (isDirectlyInsideEffect) {
+              // TODO: we could potentially ignore early returns.
+              setStateInsideEffectWithoutDeps = key;
+            }
+          });
+        });
+        if (setStateInsideEffectWithoutDeps) {
+          const {suggestedDependencies} = collectRecommendations({
+            dependencies,
+            declaredDependencies: [],
+            stableDependencies,
+            externalDependencies: new Set<string>(),
+            isEffect: true,
+          });
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} contains a call to '${setStateInsideEffectWithoutDeps}'. ` +
+              `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+              `To fix this, pass [` +
+              suggestedDependencies.join(', ') +
+              `] as a second argument to the ${reactiveHookName} Hook.`,
+            suggest: [
+              {
+                desc: `Add dependencies array: [${suggestedDependencies.join(
+                  ', ',
+                )}]`,
+                fix(fixer) {
+                  return fixer.insertTextAfter(
+                    node,
+                    `, [${suggestedDependencies.join(', ')}]`,
+                  );
+                },
+              },
+            ],
+          });
+        }
+        return;
+      }
+      if (
+        isAutoDepsHook &&
+        declaredDependenciesNode.type === 'Literal' &&
+        declaredDependenciesNode.value === null
+      ) {
+        return;
+      }
+
+      const declaredDependencies: Array<DeclaredDependency> = [];
+      const externalDependencies = new Set<string>();
+      const isArrayExpression =
+        declaredDependenciesNode.type === 'ArrayExpression';
+      const isTSAsArrayExpression =
+        declaredDependenciesNode.type === 'TSAsExpression' &&
+        declaredDependenciesNode.expression.type === 'ArrayExpression';
+
+      if (!isArrayExpression && !isTSAsArrayExpression) {
+        // If the declared dependencies are not an array expression then we
+        // can't verify that the user provided the correct dependencies. Tell
+        // the user this in an error.
+        reportProblem({
+          node: declaredDependenciesNode,
+          message:
+            `React Hook ${getSourceCode().getText(reactiveHook)} was passed a ` +
+            'dependency list that is not an array literal. This means we ' +
+            "can't statically verify whether you've passed the correct " +
+            'dependencies.',
+        });
+      } else {
+        const arrayExpression = isTSAsArrayExpression
+          ? declaredDependenciesNode.expression
+          : declaredDependenciesNode;
+
+        (arrayExpression as ArrayExpression).elements.forEach(
+          declaredDependencyNode => {
+            // Skip elided elements.
+            if (declaredDependencyNode === null) {
+              return;
+            }
+            // If we see a spread element then add a special warning.
+            if (declaredDependencyNode.type === 'SpreadElement') {
+              reportProblem({
+                node: declaredDependencyNode,
+                message:
+                  `React Hook ${getSourceCode().getText(reactiveHook)} has a spread ` +
+                  "element in its dependency array. This means we can't " +
+                  "statically verify whether you've passed the " +
+                  'correct dependencies.',
+              });
+              return;
+            }
+            if (useEffectEventVariables.has(declaredDependencyNode)) {
+              reportProblem({
+                node: declaredDependencyNode,
+                message:
+                  'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +
+                  `Remove \`${getSourceCode().getText(
+                    declaredDependencyNode,
+                  )}\` from the list.`,
+                suggest: [
+                  {
+                    desc: `Remove the dependency \`${getSourceCode().getText(
+                      declaredDependencyNode,
+                    )}\``,
+                    fix(fixer) {
+                      return fixer.removeRange(declaredDependencyNode.range!);
+                    },
+                  },
+                ],
+              });
+            }
+            // Try to normalize the declared dependency. If we can't then an error
+            // will be thrown. We will catch that error and report an error.
+            let declaredDependency;
+            try {
+              declaredDependency = analyzePropertyChain(
+                declaredDependencyNode,
+                null,
+              );
+            } catch (error: unknown) {
+              if (
+                error instanceof Error &&
+                /Unsupported node type/.test(error.message)
+              ) {
+                if (declaredDependencyNode.type === 'Literal') {
+                  if (
+                    declaredDependencyNode.value &&
+                    dependencies.has(declaredDependencyNode.value as string)
+                  ) {
+                    reportProblem({
+                      node: declaredDependencyNode,
+                      message:
+                        `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +
+                        `because it never changes. ` +
+                        `Did you mean to include ${declaredDependencyNode.value} in the array instead?`,
+                    });
+                  } else {
+                    reportProblem({
+                      node: declaredDependencyNode,
+                      message:
+                        `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +
+                        'because it never changes. You can safely remove it.',
+                    });
+                  }
+                } else {
+                  reportProblem({
+                    node: declaredDependencyNode,
+                    message:
+                      `React Hook ${getSourceCode().getText(reactiveHook)} has a ` +
+                      `complex expression in the dependency array. ` +
+                      'Extract it to a separate variable so it can be statically checked.',
+                  });
+                }
+
+                return;
+              } else {
+                throw error;
+              }
+            }
+
+            let maybeID = declaredDependencyNode;
+            while (
+              maybeID.type === 'MemberExpression' ||
+              maybeID.type === 'OptionalMemberExpression' ||
+              maybeID.type === 'ChainExpression'
+            ) {
+              // @ts-expect-error This can be done better
+              maybeID = maybeID.object || maybeID.expression.object;
+            }
+            const isDeclaredInComponent = !componentScope.through.some(
+              ref => ref.identifier === maybeID,
+            );
+
+            // Add the dependency to our declared dependency map.
+            declaredDependencies.push({
+              key: declaredDependency,
+              node: declaredDependencyNode,
+            });
+
+            if (!isDeclaredInComponent) {
+              externalDependencies.add(declaredDependency);
+            }
+          },
+        );
+      }
+
+      const {
+        suggestedDependencies,
+        unnecessaryDependencies,
+        missingDependencies,
+        duplicateDependencies,
+      } = collectRecommendations({
+        dependencies,
+        declaredDependencies,
+        stableDependencies,
+        externalDependencies,
+        isEffect,
+      });
+
+      let suggestedDeps = suggestedDependencies;
+
+      const problemCount =
+        duplicateDependencies.size +
+        missingDependencies.size +
+        unnecessaryDependencies.size;
+
+      if (problemCount === 0) {
+        // If nothing else to report, check if some dependencies would
+        // invalidate on every render.
+        const constructions = scanForConstructions({
+          declaredDependencies,
+          declaredDependenciesNode,
+          componentScope,
+          scope,
+        });
+        constructions.forEach(
+          ({construction, isUsedOutsideOfHook, depType}) => {
+            const wrapperHook =
+              depType === 'function' ? 'useCallback' : 'useMemo';
+
+            const constructionType =
+              depType === 'function' ? 'definition' : 'initialization';
+
+            const defaultAdvice = `wrap the ${constructionType} of '${construction.name.name}' in its own ${wrapperHook}() Hook.`;
+
+            const advice = isUsedOutsideOfHook
+              ? `To fix this, ${defaultAdvice}`
+              : `Move it inside the ${reactiveHookName} callback. Alternatively, ${defaultAdvice}`;
+
+            const causation =
+              depType === 'conditional' || depType === 'logical expression'
+                ? 'could make'
+                : 'makes';
+
+            const message =
+              `The '${construction.name.name}' ${depType} ${causation} the dependencies of ` +
+              `${reactiveHookName} Hook (at line ${declaredDependenciesNode.loc?.start.line}) ` +
+              `change on every render. ${advice}`;
+
+            let suggest: Rule.ReportDescriptor['suggest'];
+            // Only handle the simple case of variable assignments.
+            // Wrapping function declarations can mess up hoisting.
+            if (
+              isUsedOutsideOfHook &&
+              construction.type === 'Variable' &&
+              // Objects may be mutated after construction, which would make this
+              // fix unsafe. Functions _probably_ won't be mutated, so we'll
+              // allow this fix for them.
+              depType === 'function'
+            ) {
+              suggest = [
+                {
+                  desc: `Wrap the ${constructionType} of '${construction.name.name}' in its own ${wrapperHook}() Hook.`,
+                  fix(fixer) {
+                    const [before, after] =
+                      wrapperHook === 'useMemo'
+                        ? [`useMemo(() => { return `, '; })']
+                        : ['useCallback(', ')'];
+                    return [
+                      // TODO: also add an import?
+                      fixer.insertTextBefore(construction.node.init!, before),
+                      // TODO: ideally we'd gather deps here but it would require
+                      // restructuring the rule code. This will cause a new lint
+                      // error to appear immediately for useCallback. Note we're
+                      // not adding [] because would that changes semantics.
+                      fixer.insertTextAfter(construction.node.init!, after),
+                    ];
+                  },
+                },
+              ];
+            }
+            // TODO: What if the function needs to change on every render anyway?
+            // Should we suggest removing effect deps as an appropriate fix too?
+            reportProblem({
+              // TODO: Why not report this at the dependency site?
+              node: construction.node,
+              message,
+              suggest,
+            });
+          },
+        );
+        return;
+      }
+
+      // If we're going to report a missing dependency,
+      // we might as well recalculate the list ignoring
+      // the currently specified deps. This can result
+      // in some extra deduplication. We can't do this
+      // for effects though because those have legit
+      // use cases for over-specifying deps.
+      if (!isEffect && missingDependencies.size > 0) {
+        suggestedDeps = collectRecommendations({
+          dependencies,
+          declaredDependencies: [], // Pretend we don't know
+          stableDependencies,
+          externalDependencies,
+          isEffect,
+        }).suggestedDependencies;
+      }
+
+      // Alphabetize the suggestions, but only if deps were already alphabetized.
+      function areDeclaredDepsAlphabetized(): boolean {
+        if (declaredDependencies.length === 0) {
+          return true;
+        }
+        const declaredDepKeys = declaredDependencies.map(dep => dep.key);
+        const sortedDeclaredDepKeys = declaredDepKeys.slice().sort();
+        return declaredDepKeys.join(',') === sortedDeclaredDepKeys.join(',');
+      }
+      if (areDeclaredDepsAlphabetized()) {
+        suggestedDeps.sort();
+      }
+
+      // Most of our algorithm deals with dependency paths with optional chaining stripped.
+      // This function is the last step before printing a dependency, so now is a good time to
+      // check whether any members in our path are always used as optional-only. In that case,
+      // we will use ?. instead of . to concatenate those parts of the path.
+      function formatDependency(path: string): string {
+        const members = path.split('.');
+        let finalPath = '';
+        for (let i = 0; i < members.length; i++) {
+          if (i !== 0) {
+            const pathSoFar = members.slice(0, i + 1).join('.');
+            const isOptional = optionalChains.get(pathSoFar) === true;
+            finalPath += isOptional ? '?.' : '.';
+          }
+          finalPath += members[i];
+        }
+        return finalPath;
+      }
+
+      function getWarningMessage(
+        deps: Set<string>,
+        singlePrefix: string,
+        label: string,
+        fixVerb: string,
+      ): string | null {
+        if (deps.size === 0) {
+          return null;
+        }
+        return (
+          (deps.size > 1 ? '' : singlePrefix + ' ') +
+          label +
+          ' ' +
+          (deps.size > 1 ? 'dependencies' : 'dependency') +
+          ': ' +
+          joinEnglish(
+            Array.from(deps)
+              .sort()
+              .map(name => "'" + formatDependency(name) + "'"),
+          ) +
+          `. Either ${fixVerb} ${
+            deps.size > 1 ? 'them' : 'it'
+          } or remove the dependency array.`
+        );
+      }
+
+      let extraWarning = '';
+      if (unnecessaryDependencies.size > 0) {
+        let badRef: string | null = null;
+        Array.from(unnecessaryDependencies.keys()).forEach(key => {
+          if (badRef !== null) {
+            return;
+          }
+          if (key.endsWith('.current')) {
+            badRef = key;
+          }
+        });
+        if (badRef !== null) {
+          extraWarning =
+            ` Mutable values like '${badRef}' aren't valid dependencies ` +
+            "because mutating them doesn't re-render the component.";
+        } else if (externalDependencies.size > 0) {
+          const dep = Array.from(externalDependencies)[0]!;
+          // Don't show this warning for things that likely just got moved *inside* the callback
+          // because in that case they're clearly not referring to globals.
+          if (!scope.set.has(dep)) {
+            extraWarning =
+              ` Outer scope values like '${dep}' aren't valid dependencies ` +
+              `because mutating them doesn't re-render the component.`;
+          }
+        }
+      }
+
+      // `props.foo()` marks `props` as a dependency because it has
+      // a `this` value. This warning can be confusing.
+      // So if we're going to show it, append a clarification.
+      if (!extraWarning && missingDependencies.has('props')) {
+        const propDep = dependencies.get('props');
+        if (propDep == null) {
+          return;
+        }
+        const refs = propDep.references;
+        if (!Array.isArray(refs)) {
+          return;
+        }
+        let isPropsOnlyUsedInMembers = true;
+        for (const ref of refs) {
+          const id = fastFindReferenceWithParent(
+            componentScope.block,
+            ref.identifier,
+          );
+          if (!id) {
+            isPropsOnlyUsedInMembers = false;
+            break;
+          }
+          const parent = id.parent;
+          if (parent == null) {
+            isPropsOnlyUsedInMembers = false;
+            break;
+          }
+          if (
+            parent.type !== 'MemberExpression' &&
+            parent.type !== 'OptionalMemberExpression'
+          ) {
+            isPropsOnlyUsedInMembers = false;
+            break;
+          }
+        }
+        if (isPropsOnlyUsedInMembers) {
+          extraWarning =
+            ` However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside of ` +
+            `the ${reactiveHookName} call and refer to those specific props ` +
+            `inside ${getSourceCode().getText(reactiveHook)}.`;
+        }
+      }
+
+      if (!extraWarning && missingDependencies.size > 0) {
+        // See if the user is trying to avoid specifying a callable prop.
+        // This usually means they're unaware of useCallback.
+        let missingCallbackDep: string | null = null;
+        missingDependencies.forEach(missingDep => {
+          if (missingCallbackDep) {
+            return;
+          }
+          // Is this a variable from top scope?
+          const topScopeRef = componentScope.set.get(missingDep);
+          const usedDep = dependencies.get(missingDep);
+          if (
+            !usedDep?.references ||
+            usedDep?.references[0]?.resolved !== topScopeRef
+          ) {
+            return;
+          }
+          // Is this a destructured prop?
+          const def = topScopeRef?.defs[0];
+          if (def == null || def.name == null || def.type !== 'Parameter') {
+            return;
+          }
+          // Was it called in at least one case? Then it's a function.
+          let isFunctionCall = false;
+          let id: Identifier | undefined;
+          for (const reference of usedDep.references) {
+            id = reference.identifier;
+            if (
+              id != null &&
+              id.parent != null &&
+              (id.parent.type === 'CallExpression' ||
+                id.parent.type === 'OptionalCallExpression') &&
+              id.parent.callee === id
+            ) {
+              isFunctionCall = true;
+              break;
+            }
+          }
+          if (!isFunctionCall) {
+            return;
+          }
+          // If it's missing (i.e. in component scope) *and* it's a parameter
+          // then it is definitely coming from props destructuring.
+          // (It could also be props itself but we wouldn't be calling it then.)
+          missingCallbackDep = missingDep;
+        });
+        if (missingCallbackDep !== null) {
+          extraWarning =
+            ` If '${missingCallbackDep}' changes too often, ` +
+            `find the parent component that defines it ` +
+            `and wrap that definition in useCallback.`;
+        }
+      }
+
+      if (!extraWarning && missingDependencies.size > 0) {
+        let setStateRecommendation: {
+          missingDep: string;
+          setter: string;
+          form: 'reducer' | 'updater' | 'inlineReducer';
+        } | null = null;
+        for (const missingDep of missingDependencies) {
+          if (setStateRecommendation !== null) {
+            break;
+          }
+          const usedDep = dependencies.get(missingDep)!;
+          const references = usedDep.references;
+          let id;
+          let maybeCall;
+          for (const reference of references) {
+            id = reference.identifier;
+            maybeCall = id.parent;
+            // Try to see if we have setState(someExpr(missingDep)).
+            while (maybeCall != null && maybeCall !== componentScope.block) {
+              if (maybeCall.type === 'CallExpression') {
+                const correspondingStateVariable = setStateCallSites.get(
+                  maybeCall.callee,
+                );
+                if (correspondingStateVariable != null) {
+                  if (
+                    'name' in correspondingStateVariable &&
+                    correspondingStateVariable.name === missingDep
+                  ) {
+                    // setCount(count + 1)
+                    setStateRecommendation = {
+                      missingDep,
+                      setter:
+                        'name' in maybeCall.callee ? maybeCall.callee.name : '',
+                      form: 'updater',
+                    };
+                  } else if (stateVariables.has(id)) {
+                    // setCount(count + increment)
+                    setStateRecommendation = {
+                      missingDep,
+                      setter:
+                        'name' in maybeCall.callee ? maybeCall.callee.name : '',
+                      form: 'reducer',
+                    };
+                  } else {
+                    const resolved = reference.resolved;
+                    if (resolved != null) {
+                      // If it's a parameter *and* a missing dep,
+                      // it must be a prop or something inside a prop.
+                      // Therefore, recommend an inline reducer.
+                      const def = resolved.defs[0];
+                      if (def != null && def.type === 'Parameter') {
+                        setStateRecommendation = {
+                          missingDep,
+                          setter:
+                            'name' in maybeCall.callee
+                              ? maybeCall.callee.name
+                              : '',
+                          form: 'inlineReducer',
+                        };
+                      }
+                    }
+                  }
+                  break;
+                }
+              }
+              maybeCall = maybeCall.parent;
+            }
+            if (setStateRecommendation !== null) {
+              break;
+            }
+          }
+        }
+        if (setStateRecommendation !== null) {
+          switch (setStateRecommendation.form) {
+            case 'reducer':
+              extraWarning =
+                ` You can also replace multiple useState variables with useReducer ` +
+                `if '${setStateRecommendation.setter}' needs the ` +
+                `current value of '${setStateRecommendation.missingDep}'.`;
+              break;
+            case 'inlineReducer':
+              extraWarning =
+                ` If '${setStateRecommendation.setter}' needs the ` +
+                `current value of '${setStateRecommendation.missingDep}', ` +
+                `you can also switch to useReducer instead of useState and ` +
+                `read '${setStateRecommendation.missingDep}' in the reducer.`;
+              break;
+            case 'updater':
+              extraWarning =
+                ` You can also do a functional update '${
+                  setStateRecommendation.setter
+                }(${setStateRecommendation.missingDep.slice(
+                  0,
+                  1,
+                )} => ...)' if you only need '${
+                  setStateRecommendation.missingDep
+                }'` + ` in the '${setStateRecommendation.setter}' call.`;
+              break;
+            default:
+              throw new Error('Unknown case.');
+          }
+        }
+      }
+
+      reportProblem({
+        node: declaredDependenciesNode,
+        message:
+          `React Hook ${getSourceCode().getText(reactiveHook)} has ` +
+          // To avoid a long message, show the next actionable item.
+          (getWarningMessage(missingDependencies, 'a', 'missing', 'include') ||
+            getWarningMessage(
+              unnecessaryDependencies,
+              'an',
+              'unnecessary',
+              'exclude',
+            ) ||
+            getWarningMessage(
+              duplicateDependencies,
+              'a',
+              'duplicate',
+              'omit',
+            )) +
+          extraWarning,
+        suggest: [
+          {
+            desc: `Update the dependencies array to be: [${suggestedDeps
+              .map(formatDependency)
+              .join(', ')}]`,
+            fix(fixer) {
+              // TODO: consider preserving the comments or formatting?
+              return fixer.replaceText(
+                declaredDependenciesNode,
+                `[${suggestedDeps.map(formatDependency).join(', ')}]`,
+              );
+            },
+          },
+        ],
+      });
+    }
+
+    function visitCallExpression(node: CallExpression): void {
+      const callbackIndex = getReactiveHookCallbackIndex(node.callee, options);
+      if (callbackIndex === -1) {
+        // Not a React Hook call that needs deps.
+        return;
+      }
+      let callback = node.arguments[callbackIndex];
+      const reactiveHook = node.callee;
+      const nodeWithoutNamespace = getNodeWithoutReactNamespace(reactiveHook);
+      const reactiveHookName =
+        'name' in nodeWithoutNamespace ? nodeWithoutNamespace.name : '';
+      const maybeNode = node.arguments[callbackIndex + 1];
+      const declaredDependenciesNode =
+        maybeNode &&
+        !(maybeNode.type === 'Identifier' && maybeNode.name === 'undefined')
+          ? maybeNode
+          : undefined;
+      const isEffect = /Effect($|[^a-z])/g.test(reactiveHookName);
+
+      // Check whether a callback is supplied. If there is no callback supplied
+      // then the hook will not work and React will throw a TypeError.
+      // So no need to check for dependency inclusion.
+      if (!callback) {
+        reportProblem({
+          node: reactiveHook,
+          message:
+            `React Hook ${reactiveHookName} requires an effect callback. ` +
+            `Did you forget to pass a callback to the hook?`,
+        });
+        return;
+      }
+
+      if (!maybeNode && isEffect && options.requireExplicitEffectDeps) {
+        reportProblem({
+          node: reactiveHook,
+          message:
+            `React Hook ${reactiveHookName} always requires dependencies. ` +
+            `Please add a dependency array or an explicit \`undefined\``,
+        });
+      }
+
+      const isAutoDepsHook =
+        options.experimental_autoDependenciesHooks.includes(reactiveHookName);
+
+      // Check the declared dependencies for this reactive hook. If there is no
+      // second argument then the reactive callback will re-run on every render.
+      // So no need to check for dependency inclusion.
+      if (
+        (!declaredDependenciesNode ||
+          (isAutoDepsHook &&
+            declaredDependenciesNode.type === 'Literal' &&
+            declaredDependenciesNode.value === null)) &&
+        !isEffect
+      ) {
+        // These are only used for optimization.
+        if (
+          reactiveHookName === 'useMemo' ||
+          reactiveHookName === 'useCallback'
+        ) {
+          // TODO: Can this have a suggestion?
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} does nothing when called with ` +
+              `only one argument. Did you forget to pass an array of ` +
+              `dependencies?`,
+          });
+        }
+        return;
+      }
+
+      while (
+        callback.type === 'TSAsExpression' ||
+        callback.type === 'AsExpression'
+      ) {
+        callback = callback.expression;
+      }
+
+      switch (callback.type) {
+        case 'FunctionExpression':
+        case 'ArrowFunctionExpression':
+          visitFunctionWithDependencies(
+            callback,
+            declaredDependenciesNode,
+            reactiveHook,
+            reactiveHookName,
+            isEffect,
+            isAutoDepsHook,
+          );
+          return; // Handled
+        case 'Identifier':
+          if (
+            !declaredDependenciesNode ||
+            (isAutoDepsHook &&
+              declaredDependenciesNode.type === 'Literal' &&
+              declaredDependenciesNode.value === null)
+          ) {
+            // Always runs, no problems.
+            return; // Handled
+          }
+          // The function passed as a callback is not written inline.
+          // But perhaps it's in the dependencies array?
+          if (
+            'elements' in declaredDependenciesNode &&
+            declaredDependenciesNode.elements &&
+            declaredDependenciesNode.elements.some(
+              el => el && el.type === 'Identifier' && el.name === callback.name,
+            )
+          ) {
+            // If it's already in the list of deps, we don't care because
+            // this is valid regardless.
+            return; // Handled
+          }
+          // We'll do our best effort to find it, complain otherwise.
+          const variable = getScope(callback).set.get(callback.name);
+          if (variable == null || variable.defs == null) {
+            // If it's not in scope, we don't care.
+            return; // Handled
+          }
+          // The function passed as a callback is not written inline.
+          // But it's defined somewhere in the render scope.
+          // We'll do our best effort to find and check it, complain otherwise.
+          const def = variable.defs[0];
+          if (!def || !def.node) {
+            break; // Unhandled
+          }
+          if (def.type === 'Parameter') {
+            reportProblem({
+              node: reactiveHook,
+              message: getUnknownDependenciesMessage(reactiveHookName),
+            });
+            return;
+          }
+          if (def.type !== 'Variable' && def.type !== 'FunctionName') {
+            // Parameter or an unusual pattern. Bail out.
+            break; // Unhandled
+          }
+          switch (def.node.type) {
+            case 'FunctionDeclaration':
+              // useEffect(() => { ... }, []);
+              visitFunctionWithDependencies(
+                def.node,
+                declaredDependenciesNode,
+                reactiveHook,
+                reactiveHookName,
+                isEffect,
+                isAutoDepsHook,
+              );
+              return; // Handled
+            case 'VariableDeclarator':
+              const init = def.node.init;
+              if (!init) {
+                break; // Unhandled
+              }
+              switch (init.type) {
+                // const effectBody = () => {...};
+                // useEffect(effectBody, []);
+                case 'ArrowFunctionExpression':
+                case 'FunctionExpression':
+                  // We can inspect this function as if it were inline.
+                  visitFunctionWithDependencies(
+                    init,
+                    declaredDependenciesNode,
+                    reactiveHook,
+                    reactiveHookName,
+                    isEffect,
+                    isAutoDepsHook,
+                  );
+                  return; // Handled
+              }
+              break; // Unhandled
+          }
+          break; // Unhandled
+        default:
+          // useEffect(generateEffectBody(), []);
+          reportProblem({
+            node: reactiveHook,
+            message: getUnknownDependenciesMessage(reactiveHookName),
+          });
+          return; // Handled
+      }
+
+      // Something unusual. Fall back to suggesting to add the body itself as a dep.
+      reportProblem({
+        node: reactiveHook,
+        message:
+          `React Hook ${reactiveHookName} has a missing dependency: '${callback.name}'. ` +
+          `Either include it or remove the dependency array.`,
+        suggest: [
+          {
+            desc: `Update the dependencies array to be: [${callback.name}]`,
+            fix(fixer) {
+              return fixer.replaceText(
+                declaredDependenciesNode,
+                `[${callback.name}]`,
+              );
+            },
+          },
+        ],
+      });
+    }
+
+    return {
+      CallExpression: visitCallExpression,
+    };
+  },
+} satisfies Rule.RuleModule;
+
+// The meat of the logic.
+function collectRecommendations({
+  dependencies,
+  declaredDependencies,
+  stableDependencies,
+  externalDependencies,
+  isEffect,
+}: {
+  dependencies: Map<string, Dependency>;
+  declaredDependencies: Array<DeclaredDependency>;
+  stableDependencies: Set<string>;
+  externalDependencies: Set<string>;
+  isEffect: boolean;
+}) {
+  // Our primary data structure.
+  // It is a logical representation of property chains:
+  // `props` -> `props.foo` -> `props.foo.bar` -> `props.foo.bar.baz`
+  //         -> `props.lol`
+  //         -> `props.huh` -> `props.huh.okay`
+  //         -> `props.wow`
+  // We'll use it to mark nodes that are *used* by the programmer,
+  // and the nodes that were *declared* as deps. Then we will
+  // traverse it to learn which deps are missing or unnecessary.
+  const depTree = createDepTree();
+  function createDepTree(): DependencyTreeNode {
+    return {
+      isUsed: false, // True if used in code
+      isSatisfiedRecursively: false, // True if specified in deps
+      isSubtreeUsed: false, // True if something deeper is used by code
+      children: new Map(), // Nodes for properties
+    };
+  }
+
+  // Mark all required nodes first.
+  // Imagine exclamation marks next to each used deep property.
+  dependencies.forEach((_, key) => {
+    const node = getOrCreateNodeByPath(depTree, key);
+    node.isUsed = true;
+    markAllParentsByPath(depTree, key, parent => {
+      parent.isSubtreeUsed = true;
+    });
+  });
+
+  // Mark all satisfied nodes.
+  // Imagine checkmarks next to each declared dependency.
+  declaredDependencies.forEach(({key}) => {
+    const node = getOrCreateNodeByPath(depTree, key);
+    node.isSatisfiedRecursively = true;
+  });
+  stableDependencies.forEach(key => {
+    const node = getOrCreateNodeByPath(depTree, key);
+    node.isSatisfiedRecursively = true;
+  });
+
+  // Tree manipulation helpers.
+  function getOrCreateNodeByPath(
+    rootNode: DependencyTreeNode,
+    path: string,
+  ): DependencyTreeNode {
+    const keys = path.split('.');
+    let node = rootNode;
+    for (const key of keys) {
+      let child = node.children.get(key);
+      if (!child) {
+        child = createDepTree();
+        node.children.set(key, child);
+      }
+      node = child;
+    }
+    return node;
+  }
+  function markAllParentsByPath(
+    rootNode: DependencyTreeNode,
+    path: string,
+    fn: (node: DependencyTreeNode) => void,
+  ): void {
+    const keys = path.split('.');
+    let node = rootNode;
+    for (const key of keys) {
+      const child = node.children.get(key);
+      if (!child) {
+        return;
+      }
+      fn(child);
+      node = child;
+    }
+  }
+
+  // Now we can learn which dependencies are missing or necessary.
+  const missingDependencies = new Set<string>();
+  const satisfyingDependencies = new Set<string>();
+  scanTreeRecursively(
+    depTree,
+    missingDependencies,
+    satisfyingDependencies,
+    key => key,
+  );
+  function scanTreeRecursively(
+    node: DependencyTreeNode,
+    missingPaths: Set<string>,
+    satisfyingPaths: Set<string>,
+    keyToPath: (key: string) => string,
+  ): void {
+    node.children.forEach((child, key) => {
+      const path = keyToPath(key);
+      if (child.isSatisfiedRecursively) {
+        if (child.isSubtreeUsed) {
+          // Remember this dep actually satisfied something.
+          satisfyingPaths.add(path);
+        }
+        // It doesn't matter if there's something deeper.
+        // It would be transitively satisfied since we assume immutability.
+        // `props.foo` is enough if you read `props.foo.id`.
+        return;
+      }
+      if (child.isUsed) {
+        // Remember that no declared deps satisfied this node.
+        missingPaths.add(path);
+        // If we got here, nothing in its subtree was satisfied.
+        // No need to search further.
+        return;
+      }
+      scanTreeRecursively(
+        child,
+        missingPaths,
+        satisfyingPaths,
+        childKey => path + '.' + childKey,
+      );
+    });
+  }
+
+  // Collect suggestions in the order they were originally specified.
+  const suggestedDependencies: Array<string> = [];
+  const unnecessaryDependencies = new Set<string>();
+  const duplicateDependencies = new Set<string>();
+  declaredDependencies.forEach(({key}) => {
+    // Does this declared dep satisfy a real need?
+    if (satisfyingDependencies.has(key)) {
+      if (suggestedDependencies.indexOf(key) === -1) {
+        // Good one.
+        suggestedDependencies.push(key);
+      } else {
+        // Duplicate.
+        duplicateDependencies.add(key);
+      }
+    } else {
+      if (
+        isEffect &&
+        !key.endsWith('.current') &&
+        !externalDependencies.has(key)
+      ) {
+        // Effects are allowed extra "unnecessary" deps.
+        // Such as resetting scroll when ID changes.
+        // Consider them legit.
+        // The exception is ref.current which is always wrong.
+        if (suggestedDependencies.indexOf(key) === -1) {
+          suggestedDependencies.push(key);
+        }
+      } else {
+        // It's definitely not needed.
+        unnecessaryDependencies.add(key);
+      }
+    }
+  });
+
+  // Then add the missing ones at the end.
+  missingDependencies.forEach(key => {
+    suggestedDependencies.push(key);
+  });
+
+  return {
+    suggestedDependencies,
+    unnecessaryDependencies,
+    duplicateDependencies,
+    missingDependencies,
+  };
+}
+
+// If the node will result in constructing a referentially unique value, return
+// its human readable type name, else return null.
+function getConstructionExpressionType(node: Node): string | null {
+  switch (node.type) {
+    case 'ObjectExpression':
+      return 'object';
+    case 'ArrayExpression':
+      return 'array';
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression':
+      return 'function';
+    case 'ClassExpression':
+      return 'class';
+    case 'ConditionalExpression':
+      if (
+        getConstructionExpressionType(node.consequent) != null ||
+        getConstructionExpressionType(node.alternate) != null
+      ) {
+        return 'conditional';
+      }
+      return null;
+    case 'LogicalExpression':
+      if (
+        getConstructionExpressionType(node.left) != null ||
+        getConstructionExpressionType(node.right) != null
+      ) {
+        return 'logical expression';
+      }
+      return null;
+    case 'JSXFragment':
+      return 'JSX fragment';
+    case 'JSXElement':
+      return 'JSX element';
+    case 'AssignmentExpression':
+      if (getConstructionExpressionType(node.right) != null) {
+        return 'assignment expression';
+      }
+      return null;
+    case 'NewExpression':
+      return 'object construction';
+    case 'Literal':
+      if (node.value instanceof RegExp) {
+        return 'regular expression';
+      }
+      return null;
+    case 'TypeCastExpression':
+    case 'AsExpression':
+    case 'TSAsExpression':
+      return getConstructionExpressionType(node.expression);
+  }
+  return null;
+}
+
+// Finds variables declared as dependencies
+// that would invalidate on every render.
+function scanForConstructions({
+  declaredDependencies,
+  declaredDependenciesNode,
+  componentScope,
+  scope,
+}: {
+  declaredDependencies: Array<DeclaredDependency>;
+  declaredDependenciesNode: Node;
+  componentScope: Scope.Scope;
+  scope: Scope.Scope;
+}) {
+  const constructions = declaredDependencies
+    .map(({key}) => {
+      const ref = componentScope.variables.find(v => v.name === key);
+      if (ref == null) {
+        return null;
+      }
+
+      const node = ref.defs[0];
+      if (node == null) {
+        return null;
+      }
+      // const handleChange = function () {}
+      // const handleChange = () => {}
+      // const foo = {}
+      // const foo = []
+      // etc.
+      if (
+        node.type === 'Variable' &&
+        node.node.type === 'VariableDeclarator' &&
+        node.node.id.type === 'Identifier' && // Ensure this is not destructed assignment
+        node.node.init != null
+      ) {
+        const constantExpressionType = getConstructionExpressionType(
+          node.node.init,
+        );
+        if (constantExpressionType) {
+          return [ref, constantExpressionType];
+        }
+      }
+      // function handleChange() {}
+      if (
+        node.type === 'FunctionName' &&
+        node.node.type === 'FunctionDeclaration'
+      ) {
+        return [ref, 'function'];
+      }
+
+      // class Foo {}
+      if (node.type === 'ClassName' && node.node.type === 'ClassDeclaration') {
+        return [ref, 'class'];
+      }
+      return null;
+    })
+    .filter(Boolean) as Array<[Scope.Variable, string]>;
+
+  function isUsedOutsideOfHook(ref: Scope.Variable): boolean {
+    let foundWriteExpr = false;
+    for (const reference of ref.references) {
+      if (reference.writeExpr) {
+        if (foundWriteExpr) {
+          // Two writes to the same function.
+          return true;
+        } else {
+          // Ignore first write as it's not usage.
+          foundWriteExpr = true;
+          continue;
+        }
+      }
+      let currentScope: Scope.Scope | null = reference.from;
+      while (currentScope !== scope && currentScope != null) {
+        currentScope = currentScope.upper;
+      }
+      if (currentScope !== scope) {
+        // This reference is outside the Hook callback.
+        // It can only be legit if it's the deps array.
+        if (!isAncestorNodeOf(declaredDependenciesNode, reference.identifier)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  return constructions.map(([ref, depType]) => ({
+    construction: ref.defs[0] as Scope.Definition,
+    depType,
+    isUsedOutsideOfHook: isUsedOutsideOfHook(ref),
+  }));
+}
+
+/**
+ * Assuming () means the passed/returned node:
+ * (props) => (props)
+ * props.(foo) => (props.foo)
+ * props.foo.(bar) => (props).foo.bar
+ * props.foo.bar.(baz) => (props).foo.bar.baz
+ */
+function getDependency(node: Node): Node {
+  if (
+    node.parent &&
+    (node.parent.type === 'MemberExpression' ||
+      node.parent.type === 'OptionalMemberExpression') &&
+    node.parent.object === node &&
+    'name' in node.parent.property &&
+    node.parent.property.name !== 'current' &&
+    !node.parent.computed &&
+    !(
+      node.parent.parent != null &&
+      (node.parent.parent.type === 'CallExpression' ||
+        node.parent.parent.type === 'OptionalCallExpression') &&
+      node.parent.parent.callee === node.parent
+    )
+  ) {
+    return getDependency(node.parent);
+  } else if (
+    // Note: we don't check OptionalMemberExpression because it can't be LHS.
+    node.type === 'MemberExpression' &&
+    node.parent &&
+    node.parent.type === 'AssignmentExpression' &&
+    node.parent.left === node
+  ) {
+    return node.object;
+  } else {
+    return node;
+  }
+}
+
+/**
+ * Mark a node as either optional or required.
+ * Note: If the node argument is an OptionalMemberExpression, it doesn't necessarily mean it is optional.
+ * It just means there is an optional member somewhere inside.
+ * This particular node might still represent a required member, so check .optional field.
+ */
+function markNode(
+  node: Node,
+  optionalChains: Map<string, boolean> | null,
+  result: string,
+): void {
+  if (optionalChains) {
+    if ('optional' in node && node.optional) {
+      // We only want to consider it optional if *all* usages were optional.
+      if (!optionalChains.has(result)) {
+        // Mark as (maybe) optional. If there's a required usage, this will be overridden.
+        optionalChains.set(result, true);
+      }
+    } else {
+      // Mark as required.
+      optionalChains.set(result, false);
+    }
+  }
+}
+
+/**
+ * Assuming () means the passed node.
+ * (foo) -> 'foo'
+ * foo(.)bar -> 'foo.bar'
+ * foo.bar(.)baz -> 'foo.bar.baz'
+ * Otherwise throw.
+ */
+function analyzePropertyChain(
+  node: Node,
+  optionalChains: Map<string, boolean> | null,
+): string {
+  if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
+    const result = node.name;
+    if (optionalChains) {
+      // Mark as required.
+      optionalChains.set(result, false);
+    }
+    return result;
+  } else if (node.type === 'MemberExpression' && !node.computed) {
+    const object = analyzePropertyChain(node.object, optionalChains);
+    const property = analyzePropertyChain(node.property, null);
+    const result = `${object}.${property}`;
+    markNode(node, optionalChains, result);
+    return result;
+  } else if (node.type === 'OptionalMemberExpression' && !node.computed) {
+    const object = analyzePropertyChain(node.object, optionalChains);
+    const property = analyzePropertyChain(node.property, null);
+    const result = `${object}.${property}`;
+    markNode(node, optionalChains, result);
+    return result;
+  } else if (
+    node.type === 'ChainExpression' &&
+    (!('computed' in node) || !node.computed)
+  ) {
+    const expression = node.expression;
+
+    if (expression.type === 'CallExpression') {
+      throw new Error(`Unsupported node type: ${expression.type}`);
+    }
+
+    const object = analyzePropertyChain(expression.object, optionalChains);
+    const property = analyzePropertyChain(expression.property, null);
+    const result = `${object}.${property}`;
+    markNode(expression, optionalChains, result);
+    return result;
+  } else {
+    throw new Error(`Unsupported node type: ${node.type}`);
+  }
+}
+
+function getNodeWithoutReactNamespace(
+  node: Expression | Super,
+): Expression | Identifier | Super {
+  if (
+    node.type === 'MemberExpression' &&
+    node.object.type === 'Identifier' &&
+    node.object.name === 'React' &&
+    node.property.type === 'Identifier' &&
+    !node.computed
+  ) {
+    return node.property;
+  }
+  return node;
+}
+
+// What's the index of callback that needs to be analyzed for a given Hook?
+// -1 if it's not a Hook we care about (e.g. useState).
+// 0 for useEffect/useMemo/useCallback(fn).
+// 1 for useImperativeHandle(ref, fn).
+// For additionally configured Hooks, assume that they're like useEffect (0).
+function getReactiveHookCallbackIndex(
+  calleeNode: Expression | Super,
+  options?: {
+    additionalHooks: RegExp | undefined;
+    enableDangerousAutofixThisMayCauseInfiniteLoops?: boolean;
+  },
+): 0 | -1 | 1 {
+  const node = getNodeWithoutReactNamespace(calleeNode);
+  if (node.type !== 'Identifier') {
+    return -1;
+  }
+  switch (node.name) {
+    case 'useEffect':
+    case 'useLayoutEffect':
+    case 'useCallback':
+    case 'useMemo':
+      // useEffect(fn)
+      return 0;
+    case 'useImperativeHandle':
+      // useImperativeHandle(ref, fn)
+      return 1;
+    default:
+      if (node === calleeNode && options && options.additionalHooks) {
+        // Allow the user to provide a regular expression which enables the lint to
+        // target custom reactive hooks.
+        let name;
+        try {
+          name = analyzePropertyChain(node, null);
+        } catch (error: unknown) {
+          if (
+            error instanceof Error &&
+            /Unsupported node type/.test(error.message)
+          ) {
+            return 0;
+          } else {
+            throw error;
+          }
+        }
+        return options.additionalHooks.test(name) ? 0 : -1;
+      } else {
+        return -1;
+      }
+  }
+}
+
+/**
+ * ESLint won't assign node.parent to references from context.getScope()
+ *
+ * So instead we search for the node from an ancestor assigning node.parent
+ * as we go. This mutates the AST.
+ *
+ * This traversal is:
+ * - optimized by only searching nodes with a range surrounding our target node
+ * - agnostic to AST node types, it looks for `{ type: string, ... }`
+ */
+function fastFindReferenceWithParent(start: Node, target: Node): Node | null {
+  const queue = [start];
+  let item: Node;
+
+  while (queue.length) {
+    item = queue.shift() as Node;
+
+    if (isSameIdentifier(item, target)) {
+      return item;
+    }
+
+    if (!isAncestorNodeOf(item, target)) {
+      continue;
+    }
+
+    for (const [key, value] of Object.entries(item)) {
+      if (key === 'parent') {
+        continue;
+      }
+      if (isNodeLike(value)) {
+        value.parent = item;
+        queue.push(value);
+      } else if (Array.isArray(value)) {
+        value.forEach(val => {
+          if (isNodeLike(val)) {
+            val.parent = item;
+            queue.push(val);
+          }
+        });
+      }
+    }
+  }
+
+  return null;
+}
+
+function joinEnglish(arr: Array<string>): string {
+  let s = '';
+  for (let i = 0; i < arr.length; i++) {
+    s += arr[i];
+    if (i === 0 && arr.length === 2) {
+      s += ' and ';
+    } else if (i === arr.length - 2 && arr.length > 2) {
+      s += ', and ';
+    } else if (i < arr.length - 1) {
+      s += ', ';
+    }
+  }
+  return s;
+}
+
+function isNodeLike(val: unknown): boolean {
+  return (
+    typeof val === 'object' &&
+    val !== null &&
+    !Array.isArray(val) &&
+    'type' in val &&
+    typeof val.type === 'string'
+  );
+}
+
+function isSameIdentifier(a: Node, b: Node): boolean {
+  return (
+    (a.type === 'Identifier' || a.type === 'JSXIdentifier') &&
+    a.type === b.type &&
+    a.name === b.name &&
+    !!a.range &&
+    !!b.range &&
+    a.range[0] === b.range[0] &&
+    a.range[1] === b.range[1]
+  );
+}
+
+function isAncestorNodeOf(a: Node, b: Node): boolean {
+  return (
+    !!a.range &&
+    !!b.range &&
+    a.range[0] <= b.range[0] &&
+    a.range[1] >= b.range[1]
+  );
+}
+
+function isUseEffectEventIdentifier(node: Node): boolean {
+  return node.type === 'Identifier' && node.name === 'useEffectEvent';
+}
+
+function getUnknownDependenciesMessage(reactiveHookName: string): string {
+  return (
+    `React Hook ${reactiveHookName} received a function whose dependencies ` +
+    `are unknown. Pass an inline function instead.`
+  );
+}
+
+export default rule;
diff --git a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts
new file mode 100644
index 00000000000..ca82c99e2f5
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts
@@ -0,0 +1,934 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-for-of-loops/no-for-of-loops */
+
+import type {Rule, Scope} from 'eslint';
+import type {
+  CallExpression,
+  CatchClause,
+  DoWhileStatement,
+  Expression,
+  Identifier,
+  Node,
+  Super,
+  TryStatement,
+} from 'estree';
+
+// @ts-expect-error untyped module
+import CodePathAnalyzer from '../code-path-analysis/code-path-analyzer';
+import {getAdditionalEffectHooksFromSettings} from '../shared/Utils';
+
+/**
+ * Catch all identifiers that begin with "use" followed by an uppercase Latin
+ * character to exclude identifiers like "user".
+ */
+function isHookName(s: string): boolean {
+  return s === 'use' || /^use[A-Z0-9]/.test(s);
+}
+
+/**
+ * We consider hooks to be a hook name identifier or a member expression
+ * containing a hook name.
+ */
+function isHook(node: Node): boolean {
+  if (node.type === 'Identifier') {
+    return isHookName(node.name);
+  } else if (
+    node.type === 'MemberExpression' &&
+    !node.computed &&
+    isHook(node.property)
+  ) {
+    const obj = node.object;
+    const isPascalCaseNameSpace = /^[A-Z].*/;
+    return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name);
+  } else {
+    return false;
+  }
+}
+
+/**
+ * Checks if the node is a React component name. React component names must
+ * always start with an uppercase letter.
+ */
+function isComponentName(node: Node): boolean {
+  return node.type === 'Identifier' && /^[A-Z]/.test(node.name);
+}
+
+function isReactFunction(node: Node, functionName: string): boolean {
+  return (
+    ('name' in node && node.name === functionName) ||
+    (node.type === 'MemberExpression' &&
+      'name' in node.object &&
+      node.object.name === 'React' &&
+      'name' in node.property &&
+      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: Node): boolean {
+  return !!(
+    node.parent &&
+    'callee' in 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: Node): boolean {
+  return !!(
+    node.parent &&
+    'callee' in node.parent &&
+    node.parent.callee &&
+    isReactFunction(node.parent.callee, 'memo')
+  );
+}
+
+function isInsideComponentOrHook(node: Node | undefined): boolean {
+  while (node) {
+    const functionName = getFunctionName(node);
+    if (functionName) {
+      if (isComponentName(functionName) || isHook(functionName)) {
+        return true;
+      }
+    }
+    if (isForwardRefCallback(node) || isMemoCallback(node)) {
+      return true;
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
+function isInsideDoWhileLoop(node: Node | undefined): node is DoWhileStatement {
+  while (node) {
+    if (node.type === 'DoWhileStatement') {
+      return true;
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
+function isInsideTryCatch(
+  node: Node | undefined,
+): node is TryStatement | CatchClause {
+  while (node) {
+    if (node.type === 'TryStatement' || node.type === 'CatchClause') {
+      return true;
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
+function getNodeWithoutReactNamespace(
+  node: Expression | Super,
+): Expression | Identifier | Super {
+  if (
+    node.type === 'MemberExpression' &&
+    node.object.type === 'Identifier' &&
+    node.object.name === 'React' &&
+    node.property.type === 'Identifier' &&
+    !node.computed
+  ) {
+    return node.property;
+  }
+  return node;
+}
+
+function isEffectIdentifier(node: Node, additionalHooks?: RegExp): boolean {
+  const isBuiltInEffect =
+    node.type === 'Identifier' &&
+    (node.name === 'useEffect' ||
+      node.name === 'useLayoutEffect' ||
+      node.name === 'useInsertionEffect');
+
+  if (isBuiltInEffect) {
+    return true;
+  }
+
+  // Check if this matches additional hooks configured by the user
+  if (additionalHooks && node.type === 'Identifier') {
+    return additionalHooks.test(node.name);
+  }
+
+  return false;
+}
+
+function isUseEffectEventIdentifier(node: Node): boolean {
+  return node.type === 'Identifier' && node.name === 'useEffectEvent';
+}
+
+function useEffectEventError(fn: string | null, called: boolean): string {
+  // no function identifier, i.e. it is not assigned to a variable
+  if (fn === null) {
+    return (
+      `React Hook "useEffectEvent" can only be called at the top level of your component.` +
+      ` It cannot be passed down.`
+    );
+  }
+
+  return (
+    `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
+    'Effects and Effect Events in the same component.' +
+    (called ? '' : ' It cannot be assigned to a variable or passed down.')
+  );
+}
+
+function isUseIdentifier(node: Node): boolean {
+  return isReactFunction(node, 'use');
+}
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforces the Rules of Hooks',
+      recommended: true,
+      url: 'https://react.dev/reference/rules/rules-of-hooks',
+    },
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          additionalHooks: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+  },
+  create(context: Rule.RuleContext) {
+    const settings = context.settings || {};
+
+    const additionalEffectHooks =
+      getAdditionalEffectHooksFromSettings(settings);
+
+    let lastEffect: CallExpression | null = null;
+    const codePathReactHooksMapStack: Array<
+      Map<Rule.CodePathSegment, Array<Node>>
+    > = [];
+    const codePathSegmentStack: Array<Rule.CodePathSegment> = [];
+    const useEffectEventFunctions = new WeakSet();
+
+    // For a given scope, iterate through the references and add all useEffectEvent definitions. We can
+    // do this in non-Program nodes because we can rely on the assumption that useEffectEvent functions
+    // can only be declared within a component or hook at its top level.
+    function recordAllUseEffectEventFunctions(scope: Scope.Scope): void {
+      for (const reference of scope.references) {
+        const parent = reference.identifier.parent;
+        if (
+          parent?.type === 'VariableDeclarator' &&
+          parent.init &&
+          parent.init.type === 'CallExpression' &&
+          parent.init.callee &&
+          isUseEffectEventIdentifier(parent.init.callee)
+        ) {
+          if (reference.resolved === null) {
+            throw new Error('Unexpected null reference.resolved');
+          }
+          for (const ref of reference.resolved.references) {
+            if (ref !== reference) {
+              useEffectEventFunctions.add(ref.identifier);
+            }
+          }
+        }
+      }
+    }
+
+    /**
+     * SourceCode that also works down to ESLint 3.0.0
+     */
+    const getSourceCode =
+      typeof context.getSourceCode === 'function'
+        ? () => {
+            return context.getSourceCode();
+          }
+        : () => {
+            return context.sourceCode;
+          };
+    /**
+     * SourceCode#getScope that also works down to ESLint 3.0.0
+     */
+    const getScope =
+      typeof context.getScope === 'function'
+        ? (): Scope.Scope => {
+            return context.getScope();
+          }
+        : (node: Node): Scope.Scope => {
+            return getSourceCode().getScope(node);
+          };
+
+    function hasFlowSuppression(node: Node, suppression: string) {
+      const sourceCode = getSourceCode();
+      const comments = sourceCode.getAllComments();
+      const flowSuppressionRegex = new RegExp(
+        '\\$FlowFixMe\\[' + suppression + '\\]',
+      );
+      return comments.some(
+        commentNode =>
+          flowSuppressionRegex.test(commentNode.value) &&
+          commentNode.loc != null &&
+          node.loc != null &&
+          commentNode.loc.end.line === node.loc.start.line - 1,
+      );
+    }
+
+    const analyzer = new CodePathAnalyzer({
+      // Maintain code segment path stack as we traverse.
+      onCodePathSegmentStart: (segment: Rule.CodePathSegment) =>
+        codePathSegmentStack.push(segment),
+      onCodePathSegmentEnd: () => codePathSegmentStack.pop(),
+
+      // Maintain code path stack as we traverse.
+      onCodePathStart: () =>
+        codePathReactHooksMapStack.push(
+          new Map<Rule.CodePathSegment, Array<Node>>(),
+        ),
+
+      // Process our code path.
+      //
+      // Everything is ok if all React Hooks are both reachable from the initial
+      // segment and reachable from every final segment.
+      onCodePathEnd(codePath: any, codePathNode: Node) {
+        const reactHooksMap = codePathReactHooksMapStack.pop();
+        if (reactHooksMap?.size === 0) {
+          return;
+        } else if (typeof reactHooksMap === 'undefined') {
+          throw new Error('Unexpected undefined reactHooksMap');
+        }
+
+        // All of the segments which are cyclic are recorded in this set.
+        const cyclic = new Set();
+
+        /**
+         * Count the number of code paths from the start of the function to this
+         * segment. For example:
+         *
+         * ```js
+         * function MyComponent() {
+         *   if (condition) {
+         *     // Segment 1
+         *   } else {
+         *     // Segment 2
+         *   }
+         *   // Segment 3
+         * }
+         * ```
+         *
+         * Segments 1 and 2 have one path to the beginning of `MyComponent` and
+         * segment 3 has two paths to the beginning of `MyComponent` since we
+         * could have either taken the path of segment 1 or segment 2.
+         *
+         * Populates `cyclic` with cyclic segments.
+         */
+        function countPathsFromStart(
+          segment: Rule.CodePathSegment,
+          pathHistory?: Set<string>,
+        ): bigint {
+          const {cache} = countPathsFromStart;
+          let paths = cache.get(segment.id);
+          const pathList = new Set<string>(pathHistory);
+
+          // If `pathList` includes the current segment then we've found a cycle!
+          // We need to fill `cyclic` with all segments inside cycle
+          if (pathList.has(segment.id)) {
+            const pathArray = [...pathList];
+            const cyclicSegments = pathArray.slice(
+              pathArray.indexOf(segment.id) + 1,
+            );
+            for (const cyclicSegment of cyclicSegments) {
+              cyclic.add(cyclicSegment);
+            }
+
+            return BigInt('0');
+          }
+
+          // add the current segment to pathList
+          pathList.add(segment.id);
+
+          // We have a cached `paths`. Return it.
+          if (paths !== undefined) {
+            return paths;
+          }
+
+          if (codePath.thrownSegments.includes(segment)) {
+            paths = BigInt('0');
+          } else if (segment.prevSegments.length === 0) {
+            paths = BigInt('1');
+          } else {
+            paths = BigInt('0');
+            for (const prevSegment of segment.prevSegments) {
+              paths += countPathsFromStart(prevSegment, pathList);
+            }
+          }
+
+          // If our segment is reachable then there should be at least one path
+          // to it from the start of our code path.
+          if (segment.reachable && paths === BigInt('0')) {
+            cache.delete(segment.id);
+          } else {
+            cache.set(segment.id, paths);
+          }
+
+          return paths;
+        }
+
+        /**
+         * Count the number of code paths from this segment to the end of the
+         * function. For example:
+         *
+         * ```js
+         * function MyComponent() {
+         *   // Segment 1
+         *   if (condition) {
+         *     // Segment 2
+         *   } else {
+         *     // Segment 3
+         *   }
+         * }
+         * ```
+         *
+         * Segments 2 and 3 have one path to the end of `MyComponent` and
+         * segment 1 has two paths to the end of `MyComponent` since we could
+         * either take the path of segment 1 or segment 2.
+         *
+         * Populates `cyclic` with cyclic segments.
+         */
+
+        function countPathsToEnd(
+          segment: Rule.CodePathSegment,
+          pathHistory?: Set<string>,
+        ): bigint {
+          const {cache} = countPathsToEnd;
+          let paths = cache.get(segment.id);
+          const pathList = new Set(pathHistory);
+
+          // If `pathList` includes the current segment then we've found a cycle!
+          // We need to fill `cyclic` with all segments inside cycle
+          if (pathList.has(segment.id)) {
+            const pathArray = Array.from(pathList);
+            const cyclicSegments = pathArray.slice(
+              pathArray.indexOf(segment.id) + 1,
+            );
+            for (const cyclicSegment of cyclicSegments) {
+              cyclic.add(cyclicSegment);
+            }
+
+            return BigInt('0');
+          }
+
+          // add the current segment to pathList
+          pathList.add(segment.id);
+
+          // We have a cached `paths`. Return it.
+          if (paths !== undefined) {
+            return paths;
+          }
+
+          if (codePath.thrownSegments.includes(segment)) {
+            paths = BigInt('0');
+          } else if (segment.nextSegments.length === 0) {
+            paths = BigInt('1');
+          } else {
+            paths = BigInt('0');
+            for (const nextSegment of segment.nextSegments) {
+              paths += countPathsToEnd(nextSegment, pathList);
+            }
+          }
+
+          cache.set(segment.id, paths);
+          return paths;
+        }
+
+        /**
+         * Gets the shortest path length to the start of a code path.
+         * For example:
+         *
+         * ```js
+         * function MyComponent() {
+         *   if (condition) {
+         *     // Segment 1
+         *   }
+         *   // Segment 2
+         * }
+         * ```
+         *
+         * There is only one path from segment 1 to the code path start. Its
+         * length is one so that is the shortest path.
+         *
+         * There are two paths from segment 2 to the code path start. One
+         * through segment 1 with a length of two and another directly to the
+         * start with a length of one. The shortest path has a length of one
+         * so we would return that.
+         */
+
+        function shortestPathLengthToStart(
+          segment: Rule.CodePathSegment,
+        ): number {
+          const {cache} = shortestPathLengthToStart;
+          let length = cache.get(segment.id);
+
+          // If `length` is null then we found a cycle! Return infinity since
+          // the shortest path is definitely not the one where we looped.
+          if (length === null) {
+            return Infinity;
+          }
+
+          // We have a cached `length`. Return it.
+          if (length !== undefined) {
+            return length;
+          }
+
+          // Compute `length` and cache it. Guarding against cycles.
+          cache.set(segment.id, null);
+          if (segment.prevSegments.length === 0) {
+            length = 1;
+          } else {
+            length = Infinity;
+            for (const prevSegment of segment.prevSegments) {
+              const prevLength = shortestPathLengthToStart(prevSegment);
+              if (prevLength < length) {
+                length = prevLength;
+              }
+            }
+            length += 1;
+          }
+          cache.set(segment.id, length);
+          return length;
+        }
+
+        countPathsFromStart.cache = new Map<string, bigint>();
+        countPathsToEnd.cache = new Map<string, bigint>();
+        shortestPathLengthToStart.cache = new Map<string, number | null>();
+
+        // Count all code paths to the end of our component/hook. Also primes
+        // the `countPathsToEnd` cache.
+        const allPathsFromStartToEnd = countPathsToEnd(codePath.initialSegment);
+
+        // Gets the function name for our code path. If the function name is
+        // `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 - 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
+        // function component or we are in a hook function.
+        const isSomewhereInsideComponentOrHook =
+          isInsideComponentOrHook(codePathNode);
+        const isDirectlyInsideComponentOrHook = codePathFunctionName
+          ? isComponentName(codePathFunctionName) ||
+            isHook(codePathFunctionName)
+          : 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
+        // after calling `visitSegment()`.
+        let shortestFinalPathLength = Infinity;
+        for (const finalSegment of codePath.finalSegments) {
+          if (!finalSegment.reachable) {
+            continue;
+          }
+          const length = shortestPathLengthToStart(finalSegment);
+          if (length < shortestFinalPathLength) {
+            shortestFinalPathLength = length;
+          }
+        }
+
+        // Make sure all React Hooks pass our lint invariants. Log warnings
+        // if not.
+        for (const [segment, reactHooks] of reactHooksMap) {
+          // NOTE: We could report here that the hook is not reachable, but
+          // that would be redundant with more general "no unreachable"
+          // lint rules.
+          if (!segment.reachable) {
+            continue;
+          }
+
+          // If there are any final segments with a shorter path to start then
+          // we possibly have an early return.
+          //
+          // If our segment is a final segment itself then siblings could
+          // possibly be early returns.
+          const possiblyHasEarlyReturn =
+            segment.nextSegments.length === 0
+              ? shortestFinalPathLength <= shortestPathLengthToStart(segment)
+              : shortestFinalPathLength < shortestPathLengthToStart(segment);
+
+          // Count all the paths from the start of our code path to the end of
+          // our code path that go _through_ this segment. The critical piece
+          // of this is _through_. If we just call `countPathsToEnd(segment)`
+          // then we neglect that we may have gone through multiple paths to get
+          // to this point! Consider:
+          //
+          // ```js
+          // function MyComponent() {
+          //   if (a) {
+          //     // Segment 1
+          //   } else {
+          //     // Segment 2
+          //   }
+          //   // Segment 3
+          //   if (b) {
+          //     // Segment 4
+          //   } else {
+          //     // Segment 5
+          //   }
+          // }
+          // ```
+          //
+          // In this component we have four code paths:
+          //
+          // 1. `a = true; b = true`
+          // 2. `a = true; b = false`
+          // 3. `a = false; b = true`
+          // 4. `a = false; b = false`
+          //
+          // From segment 3 there are two code paths to the end through segment
+          // 4 and segment 5. However, we took two paths to get here through
+          // segment 1 and segment 2.
+          //
+          // If we multiply the paths from start (two) by the paths to end (two)
+          // for segment 3 we get four. Which is our desired count.
+          const pathsFromStartToEnd =
+            countPathsFromStart(segment) * countPathsToEnd(segment);
+
+          // Is this hook a part of a cyclic segment?
+          const cycled = cyclic.has(segment.id);
+
+          for (const hook of reactHooks) {
+            // Skip reporting if this hook already has a relevant flow suppression.
+            if (hasFlowSuppression(hook, 'react-rule-hook')) {
+              continue;
+            }
+
+            // Report an error if use() is called inside try/catch.
+            if (isUseIdentifier(hook) && isInsideTryCatch(hook)) {
+              context.report({
+                node: hook,
+                message: `React Hook "${getSourceCode().getText(
+                  hook,
+                )}" cannot be called in a try/catch block.`,
+              });
+            }
+
+            // Report an error if a hook may be called more then once.
+            // `use(...)` can be called in loops.
+            if (
+              (cycled || isInsideDoWhileLoop(hook)) &&
+              !isUseIdentifier(hook)
+            ) {
+              context.report({
+                node: hook,
+                message:
+                  `React Hook "${getSourceCode().getText(
+                    hook,
+                  )}" may be executed ` +
+                  'more than once. Possibly because it is called in a loop. ' +
+                  'React Hooks must be called in the exact same order in ' +
+                  'every component render.',
+              });
+            }
+
+            // If this is not a valid code path for React hooks then we need to
+            // log a warning for every hook in this code path.
+            //
+            // Pick a special message depending on the scope this hook was
+            // called in.
+            if (isDirectlyInsideComponentOrHook) {
+              // Report an error if the hook is called inside an async function.
+              // @ts-expect-error the above check hasn't properly type-narrowed `codePathNode` (async doesn't exist on Node)
+              const isAsyncFunction = codePathNode.async;
+              if (isAsyncFunction) {
+                context.report({
+                  node: hook,
+                  message:
+                    `React Hook "${getSourceCode().getText(hook)}" cannot be ` +
+                    'called in an async function.',
+                });
+              }
+
+              // Report an error if a hook does not reach all finalizing code
+              // path segments.
+              //
+              // Special case when we think there might be an early return.
+              if (
+                !cycled &&
+                pathsFromStartToEnd !== allPathsFromStartToEnd &&
+                !isUseIdentifier(hook) && // `use(...)` can be called conditionally.
+                !isInsideDoWhileLoop(hook) // wrapping do/while loops are checked separately.
+              ) {
+                const message =
+                  `React Hook "${getSourceCode().getText(hook)}" is called ` +
+                  'conditionally. React Hooks must be called in the exact ' +
+                  'same order in every component render.' +
+                  (possiblyHasEarlyReturn
+                    ? ' Did you accidentally call a React Hook after an' +
+                      ' early return?'
+                    : '');
+                context.report({node: hook, message});
+              }
+            } else if (
+              codePathNode.parent != null &&
+              (codePathNode.parent.type === 'MethodDefinition' ||
+                // @ts-expect-error `ClassProperty` was removed from typescript-estree in https://github.com/typescript-eslint/typescript-eslint/pull/3806
+                codePathNode.parent.type === 'ClassProperty' ||
+                codePathNode.parent.type === 'PropertyDefinition') &&
+              codePathNode.parent.value === codePathNode
+            ) {
+              // Custom message for hooks inside a class
+              const message =
+                `React Hook "${getSourceCode().getText(
+                  hook,
+                )}" cannot be called ` +
+                'in a class component. React Hooks must be called in a ' +
+                'React function component or a custom React Hook function.';
+              context.report({node: hook, message});
+            } else if (codePathFunctionName) {
+              // Custom message if we found an invalid function name.
+              const message =
+                `React Hook "${getSourceCode().getText(hook)}" is called in ` +
+                `function "${getSourceCode().getText(codePathFunctionName)}" ` +
+                'that is neither a React function component nor a custom ' +
+                'React Hook function.' +
+                ' React component names must start with an uppercase letter.' +
+                ' React Hook names must start with the word "use".';
+              context.report({node: hook, message});
+            } else if (codePathNode.type === 'Program') {
+              // These are dangerous if you have inline requires enabled.
+              const message =
+                `React Hook "${getSourceCode().getText(
+                  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
+              // anonymous function expressions. Hopefully this is clarifying
+              // enough in the common case that the incorrect message in
+              // uncommon cases doesn't matter.
+              // `use(...)` can be called in callbacks.
+              if (isSomewhereInsideComponentOrHook && !isUseIdentifier(hook)) {
+                const message =
+                  `React Hook "${getSourceCode().getText(
+                    hook,
+                  )}" cannot be called ` +
+                  'inside a callback. React Hooks must be called in a ' +
+                  'React function component or a custom React Hook function.';
+                context.report({node: hook, message});
+              }
+            }
+          }
+        }
+      },
+    });
+
+    return {
+      '*'(node: any) {
+        analyzer.enterNode(node);
+      },
+
+      '*:exit'(node: any) {
+        analyzer.leaveNode(node);
+      },
+
+      // Missed opportunity...We could visit all `Identifier`s instead of all
+      // `CallExpression`s and check that _every use_ of a hook name is valid.
+      // But that gets complicated and enters type-system territory, so we're
+      // only being strict about hook calls for now.
+      CallExpression(node) {
+        if (isHook(node.callee)) {
+          // Add the hook node to a map keyed by the code path segment. We will
+          // do full code path analysis at the end of our code path.
+          const reactHooksMap = last(codePathReactHooksMapStack);
+          const codePathSegment = last(codePathSegmentStack);
+          let reactHooks = reactHooksMap.get(codePathSegment);
+          if (!reactHooks) {
+            reactHooks = [];
+            reactHooksMap.set(codePathSegment, reactHooks);
+          }
+          reactHooks.push(node.callee);
+        }
+
+        // useEffectEvent: useEffectEvent functions can be passed by reference within useEffect as well as in
+        // another useEffectEvent
+        // Check all `useEffect` and `React.useEffect`, `useEffectEvent`, and `React.useEffectEvent`
+        const nodeWithoutNamespace = getNodeWithoutReactNamespace(node.callee);
+        if (
+          (isEffectIdentifier(nodeWithoutNamespace, additionalEffectHooks) ||
+            isUseEffectEventIdentifier(nodeWithoutNamespace)) &&
+          node.arguments.length > 0
+        ) {
+          // Denote that we have traversed into a useEffect call, and stash the CallExpr for
+          // comparison later when we exit
+          lastEffect = node;
+        }
+
+        // Specifically disallow <Child onClick={useEffectEvent(...)} /> because this
+        // case can't be caught by `recordAllUseEffectEventFunctions` as it isn't assigned to a variable
+        if (
+          isUseEffectEventIdentifier(nodeWithoutNamespace) &&
+          node.parent?.type !== 'VariableDeclarator' &&
+          // like in other hooks, calling useEffectEvent at component's top level without assignment is valid
+          node.parent?.type !== 'ExpressionStatement'
+        ) {
+          const message = useEffectEventError(null, false);
+
+          context.report({
+            node,
+            message,
+          });
+        }
+      },
+
+      Identifier(node) {
+        // This identifier resolves to a useEffectEvent function, but isn't being referenced in an
+        // effect or another event function. It isn't being called either.
+        if (lastEffect == null && useEffectEventFunctions.has(node)) {
+          const message = useEffectEventError(
+            getSourceCode().getText(node),
+            node.parent.type === 'CallExpression',
+          );
+
+          context.report({
+            node,
+            message,
+          });
+        }
+      },
+
+      'CallExpression:exit'(node) {
+        if (node === lastEffect) {
+          lastEffect = null;
+        }
+      },
+
+      FunctionDeclaration(node) {
+        // function MyComponent() { const onClick = useEffectEvent(...) }
+        if (isInsideComponentOrHook(node)) {
+          recordAllUseEffectEventFunctions(getScope(node));
+        }
+      },
+
+      ArrowFunctionExpression(node) {
+        // const MyComponent = () => { const onClick = useEffectEvent(...) }
+        if (isInsideComponentOrHook(node)) {
+          recordAllUseEffectEventFunctions(getScope(node));
+        }
+      },
+
+      // @ts-expect-error parser-hermes produces these node types
+      ComponentDeclaration(node) {
+        // component MyComponent() { const onClick = useEffectEvent(...) }
+        recordAllUseEffectEventFunctions(getScope(node));
+      },
+
+      // @ts-expect-error parser-hermes produces these node types
+      HookDeclaration(node) {
+        // hook useMyHook() { const onClick = useEffectEvent(...) }
+        recordAllUseEffectEventFunctions(getScope(node));
+      },
+    };
+  },
+} satisfies Rule.RuleModule;
+
+/**
+ * Gets the static name of a function AST node. For function declarations it is
+ * easy. For anonymous function expressions it is much harder. If you search for
+ * `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
+ * where JS gives anonymous function expressions names. We roughly detect the
+ * same AST nodes with some exceptions to better fit our use case.
+ */
+
+function getFunctionName(node: Node) {
+  if (
+    // @ts-expect-error parser-hermes produces these node types
+    node.type === 'ComponentDeclaration' ||
+    // @ts-expect-error parser-hermes produces these node types
+    node.type === 'HookDeclaration' ||
+    node.type === 'FunctionDeclaration' ||
+    (node.type === 'FunctionExpression' && node.id)
+  ) {
+    // function useHook() {}
+    // const whatever = function useHook() {};
+    //
+    // Function declaration or function expression names win over any
+    // assignment statements or other renames.
+    return node.id;
+  } else if (
+    node.type === 'FunctionExpression' ||
+    node.type === 'ArrowFunctionExpression'
+  ) {
+    if (
+      node.parent?.type === 'VariableDeclarator' &&
+      node.parent.init === node
+    ) {
+      // const useHook = () => {};
+      return node.parent.id;
+    } else if (
+      node.parent?.type === 'AssignmentExpression' &&
+      node.parent.right === node &&
+      node.parent.operator === '='
+    ) {
+      // useHook = () => {};
+      return node.parent.left;
+    } else if (
+      node.parent?.type === 'Property' &&
+      node.parent.value === node &&
+      !node.parent.computed
+    ) {
+      // {useHook: () => {}}
+      // {useHook() {}}
+      return node.parent.key;
+
+      // NOTE: We could also support `ClassProperty` and `MethodDefinition`
+      // here to be pedantic. However, hooks in a class are an anti-pattern. So
+      // we don't allow it to error early.
+      //
+      // class {useHook = () => {}}
+      // class {useHook() {}}
+    } else if (
+      node.parent?.type === 'AssignmentPattern' &&
+      node.parent.right === node &&
+      // @ts-expect-error Property computed does not exist on type `AssignmentPattern`.
+      !node.parent.computed
+    ) {
+      // const {useHook = () => {}} = {};
+      // ({useHook = () => {}} = {});
+      //
+      // Kinda clowny, but we'd said we'd follow spec convention for
+      // `IsAnonymousFunctionDefinition()` usage.
+      return node.parent.left;
+    } else {
+      return undefined;
+    }
+  } else {
+    return undefined;
+  }
+}
+
+/**
+ * Convenience function for peeking the last item in a stack.
+ */
+function last<T>(array: Array<T>): T {
+  return array[array.length - 1] as T;
+}
+
+export default rule;
diff --git a/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts
new file mode 100644
index 00000000000..b35e62677df
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-for-of-loops/no-for-of-loops */
+
+import type {SourceLocation as BabelSourceLocation} from '@babel/types';
+import {
+  type CompilerDiagnosticOptions,
+  type CompilerErrorDetailOptions,
+  CompilerSuggestionOperation,
+  LintRules,
+  type LintRule,
+  ErrorSeverity,
+  LintRulePreset,
+} from 'babel-plugin-react-compiler';
+import {type Linter, type Rule} from 'eslint';
+import runReactCompiler, {RunCacheEntry} from './RunReactCompiler';
+
+function assertExhaustive(_: never, errorMsg: string): never {
+  throw new Error(errorMsg);
+}
+
+function makeSuggestions(
+  detail: CompilerErrorDetailOptions | CompilerDiagnosticOptions,
+): Array<Rule.SuggestionReportDescriptor> {
+  const suggest: Array<Rule.SuggestionReportDescriptor> = [];
+  if (Array.isArray(detail.suggestions)) {
+    for (const suggestion of detail.suggestions) {
+      switch (suggestion.op) {
+        case CompilerSuggestionOperation.InsertBefore:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.insertTextBeforeRange(
+                suggestion.range,
+                suggestion.text,
+              );
+            },
+          });
+          break;
+        case CompilerSuggestionOperation.InsertAfter:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.insertTextAfterRange(
+                suggestion.range,
+                suggestion.text,
+              );
+            },
+          });
+          break;
+        case CompilerSuggestionOperation.Replace:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.replaceTextRange(suggestion.range, suggestion.text);
+            },
+          });
+          break;
+        case CompilerSuggestionOperation.Remove:
+          suggest.push({
+            desc: suggestion.description,
+            fix(fixer) {
+              return fixer.removeRange(suggestion.range);
+            },
+          });
+          break;
+        default:
+          assertExhaustive(suggestion, 'Unhandled suggestion operation');
+      }
+    }
+  }
+  return suggest;
+}
+
+function getReactCompilerResult(context: Rule.RuleContext): RunCacheEntry {
+  // Compat with older versions of eslint
+  const sourceCode = context.sourceCode ?? context.getSourceCode();
+  const filename = context.filename ?? context.getFilename();
+  const userOpts = context.options[0] ?? {};
+
+  const results = runReactCompiler({
+    sourceCode,
+    filename,
+    userOpts,
+  });
+
+  return results;
+}
+
+function hasFlowSuppression(
+  program: RunCacheEntry,
+  nodeLoc: BabelSourceLocation,
+  suppressions: Array<string>,
+): boolean {
+  for (const commentNode of program.flowSuppressions) {
+    if (
+      suppressions.includes(commentNode.code) &&
+      commentNode.line === nodeLoc.start.line - 1
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function makeRule(rule: LintRule): Rule.RuleModule {
+  const create = (context: Rule.RuleContext): Rule.RuleListener => {
+    const result = getReactCompilerResult(context);
+
+    for (const event of result.events) {
+      if (event.kind === 'CompileError') {
+        const detail = event.detail;
+        if (detail.category === rule.category) {
+          const loc = detail.primaryLocation();
+          if (loc == null || typeof loc === 'symbol') {
+            continue;
+          }
+          if (
+            hasFlowSuppression(result, loc, [
+              'react-rule-hook',
+              'react-rule-unsafe-ref',
+            ])
+          ) {
+            // If Flow already caught this error, we don't need to report it again.
+            continue;
+          }
+          /*
+           * TODO: if multiple rules report the same linter category,
+           * we should deduplicate them with a "reported" set
+           */
+          context.report({
+            message: detail.printErrorMessage(result.sourceCode, {
+              eslint: true,
+            }),
+            loc,
+            suggest: makeSuggestions(detail.options),
+          });
+        }
+      }
+    }
+    return {};
+  };
+
+  return {
+    meta: {
+      type: 'problem',
+      docs: {
+        description: rule.description,
+        recommended: rule.preset === LintRulePreset.Recommended,
+        url: `https://react.dev/reference/eslint-plugin-react-hooks/lints/${rule.name}`,
+      },
+      fixable: 'code',
+      hasSuggestions: true,
+      // validation is done at runtime with zod
+      schema: [{type: 'object', additionalProperties: true}],
+    },
+    create,
+  };
+}
+
+type RulesConfig = {
+  [name: string]: {rule: Rule.RuleModule; severity: ErrorSeverity};
+};
+
+export const allRules: RulesConfig = LintRules.reduce((acc, rule) => {
+  acc[rule.name] = {rule: makeRule(rule), severity: rule.severity};
+  return acc;
+}, {} as RulesConfig);
+
+export const recommendedRules: RulesConfig = LintRules.filter(
+  rule => rule.preset === LintRulePreset.Recommended,
+).reduce((acc, rule) => {
+  acc[rule.name] = {rule: makeRule(rule), severity: rule.severity};
+  return acc;
+}, {} as RulesConfig);
+
+export const recommendedLatestRules: RulesConfig = LintRules.filter(
+  rule =>
+    rule.preset === LintRulePreset.Recommended ||
+    rule.preset === LintRulePreset.RecommendedLatest,
+).reduce((acc, rule) => {
+  acc[rule.name] = {rule: makeRule(rule), severity: rule.severity};
+  return acc;
+}, {} as RulesConfig);
+
+export function mapErrorSeverityToESlint(
+  severity: ErrorSeverity,
+): Linter.StringSeverity {
+  switch (severity) {
+    case ErrorSeverity.Error: {
+      return 'error';
+    }
+    case ErrorSeverity.Warning: {
+      return 'warn';
+    }
+    case ErrorSeverity.Hint:
+    case ErrorSeverity.Off: {
+      return 'off';
+    }
+    default: {
+      assertExhaustive(severity, `Unhandled severity: ${severity}`);
+    }
+  }
+}
diff --git a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts
new file mode 100644
index 00000000000..9aaddb07e65
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts
@@ -0,0 +1,346 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-for-of-loops/no-for-of-loops */
+
+import {transformFromAstSync} from '@babel/core';
+import {parse as babelParse} from '@babel/parser';
+import {File} from '@babel/types';
+import BabelPluginReactCompiler, {
+  parsePluginOptions,
+  validateEnvironmentConfig,
+  type PluginOptions,
+  Logger,
+  LoggerEvent,
+} from 'babel-plugin-react-compiler';
+import type {SourceCode} from 'eslint';
+import type * as ESTree from 'estree';
+import * as HermesParser from 'hermes-parser';
+import {isDeepStrictEqual} from 'util';
+import type {ParseResult} from '@babel/parser';
+
+// Pattern for component names: starts with uppercase letter
+const COMPONENT_NAME_PATTERN = /^[A-Z]/;
+// Pattern for hook names: starts with 'use' followed by uppercase letter or digit
+const HOOK_NAME_PATTERN = /^use[A-Z0-9]/;
+
+/**
+ * Quick heuristic using ESLint's already-parsed AST to detect if the file
+ * may contain React components or hooks based on function naming patterns.
+ * Only checks top-level declarations since components/hooks are declared at module scope.
+ * Returns true if compilation should proceed, false to skip.
+ */
+function mayContainReactCode(sourceCode: SourceCode): boolean {
+  const ast = sourceCode.ast;
+
+  // Only check top-level statements - components/hooks are declared at module scope
+  for (const node of ast.body) {
+    if (checkTopLevelNode(node)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function checkTopLevelNode(node: ESTree.Node): boolean {
+  // Handle Flow component/hook declarations (hermes-eslint produces these node types)
+  // @ts-expect-error not part of ESTree spec
+  if (node.type === 'ComponentDeclaration' || node.type === 'HookDeclaration') {
+    return true;
+  }
+
+  // Handle: export function MyComponent() {} or export const useHook = () => {}
+  if (node.type === 'ExportNamedDeclaration') {
+    const decl = (node as ESTree.ExportNamedDeclaration).declaration;
+    if (decl != null) {
+      return checkTopLevelNode(decl);
+    }
+    return false;
+  }
+
+  // Handle: export default function MyComponent() {} or export default () => {}
+  if (node.type === 'ExportDefaultDeclaration') {
+    const decl = (node as ESTree.ExportDefaultDeclaration).declaration;
+    // Anonymous default function export - compile conservatively
+    if (
+      decl.type === 'FunctionExpression' ||
+      decl.type === 'ArrowFunctionExpression' ||
+      (decl.type === 'FunctionDeclaration' &&
+        (decl as ESTree.FunctionDeclaration).id == null)
+    ) {
+      return true;
+    }
+    return checkTopLevelNode(decl as ESTree.Node);
+  }
+
+  // Handle: function MyComponent() {}
+  // Also handles Flow component/hook syntax transformed to FunctionDeclaration with flags
+  if (node.type === 'FunctionDeclaration') {
+    // Check for Hermes-added flags indicating Flow component/hook syntax
+    if (
+      '__componentDeclaration' in node ||
+      '__hookDeclaration' in node
+    ) {
+      return true;
+    }
+    const id = (node as ESTree.FunctionDeclaration).id;
+    if (id != null) {
+      const name = id.name;
+      if (COMPONENT_NAME_PATTERN.test(name) || HOOK_NAME_PATTERN.test(name)) {
+        return true;
+      }
+    }
+  }
+
+  // Handle: const MyComponent = () => {} or const useHook = function() {}
+  if (node.type === 'VariableDeclaration') {
+    for (const decl of (node as ESTree.VariableDeclaration).declarations) {
+      if (decl.id.type === 'Identifier') {
+        const init = decl.init;
+        if (
+          init != null &&
+          (init.type === 'ArrowFunctionExpression' ||
+            init.type === 'FunctionExpression')
+        ) {
+          const name = decl.id.name;
+          if (COMPONENT_NAME_PATTERN.test(name) || HOOK_NAME_PATTERN.test(name)) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+
+  return false;
+}
+
+const COMPILER_OPTIONS: PluginOptions = {
+  outputMode: 'lint',
+  panicThreshold: 'none',
+  // Don't emit errors on Flow suppressions--Flow already gave a signal
+  flowSuppressions: false,
+  environment: {
+    validateRefAccessDuringRender: true,
+    validateNoSetStateInRender: true,
+    validateNoSetStateInEffects: true,
+    validateNoJSXInTryStatements: true,
+    validateNoImpureFunctionsInRender: true,
+    validateStaticComponents: true,
+    validateNoFreezingKnownMutableFunctions: true,
+    validateNoVoidUseMemo: true,
+    // TODO: remove, this should be in the type system
+    validateNoCapitalizedCalls: [],
+    validateHooksUsage: true,
+    validateNoDerivedComputationsInEffects: true,
+    // Temporarily enabled for internal testing
+    enableUseKeyedState: true,
+    enableVerboseNoSetStateInEffect: true,
+    validateExhaustiveEffectDependencies: 'extra-only',
+  },
+};
+
+export type RunCacheEntry = {
+  sourceCode: string;
+  filename: string;
+  userOpts: PluginOptions;
+  flowSuppressions: Array<{line: number; code: string}>;
+  events: Array<LoggerEvent>;
+};
+
+type RunParams = {
+  sourceCode: SourceCode;
+  filename: string;
+  userOpts: PluginOptions;
+};
+const FLOW_SUPPRESSION_REGEX = /\$FlowFixMe\[([^\]]*)\]/g;
+
+function getFlowSuppressions(
+  sourceCode: SourceCode,
+): Array<{line: number; code: string}> {
+  const comments = sourceCode.getAllComments();
+  const results: Array<{line: number; code: string}> = [];
+
+  for (const commentNode of comments) {
+    const matches = commentNode.value.matchAll(FLOW_SUPPRESSION_REGEX);
+    for (const match of matches) {
+      if (match.index != null && commentNode.loc != null) {
+        const code = match[1];
+        results.push({
+          line: commentNode.loc!.end.line,
+          code,
+        });
+      }
+    }
+  }
+  return results;
+}
+
+function runReactCompilerImpl({
+  sourceCode,
+  filename,
+  userOpts,
+}: RunParams): RunCacheEntry {
+  // Compat with older versions of eslint
+  const options = parsePluginOptions({
+    ...COMPILER_OPTIONS,
+    ...userOpts,
+    environment: {
+      ...COMPILER_OPTIONS.environment,
+      ...userOpts.environment,
+    },
+  });
+  const results: RunCacheEntry = {
+    sourceCode: sourceCode.text,
+    filename,
+    userOpts,
+    flowSuppressions: [],
+    events: [],
+  };
+  const userLogger: Logger | null = options.logger;
+  options.logger = {
+    logEvent: (eventFilename, event): void => {
+      userLogger?.logEvent(eventFilename, event);
+      results.events.push(event);
+    },
+  };
+
+  try {
+    options.environment = validateEnvironmentConfig(options.environment ?? {});
+  } catch (err: unknown) {
+    options.logger?.logEvent(filename, err as LoggerEvent);
+  }
+
+  let babelAST: ParseResult<File> | null = null;
+
+  if (filename.endsWith('.tsx') || filename.endsWith('.ts')) {
+    try {
+      babelAST = babelParse(sourceCode.text, {
+        sourceFilename: filename,
+        sourceType: 'unambiguous',
+        plugins: ['typescript', 'jsx'],
+      });
+    } catch {
+      /* empty */
+    }
+  } else {
+    try {
+      babelAST = HermesParser.parse(sourceCode.text, {
+        babel: true,
+        enableExperimentalComponentSyntax: true,
+        sourceFilename: filename,
+        sourceType: 'module',
+      });
+    } catch {
+      /* empty */
+    }
+  }
+
+  if (babelAST != null) {
+    results.flowSuppressions = getFlowSuppressions(sourceCode);
+    try {
+      transformFromAstSync(babelAST, sourceCode.text, {
+        filename,
+        highlightCode: false,
+        retainLines: true,
+        plugins: [[BabelPluginReactCompiler, options]],
+        sourceType: 'module',
+        configFile: false,
+        babelrc: false,
+      });
+    } catch (err) {
+      /* errors handled by injected logger */
+    }
+  }
+
+  return results;
+}
+
+const SENTINEL = Symbol();
+
+// Array backed LRU cache -- should be small < 10 elements
+class LRUCache<K, T> {
+  // newest at headIdx, then headIdx + 1, ..., tailIdx
+  #values: Array<[K, T | Error] | [typeof SENTINEL, void]>;
+  #headIdx: number = 0;
+
+  constructor(size: number) {
+    this.#values = new Array(size).fill(SENTINEL);
+  }
+
+  // gets a value and sets it as "recently used"
+  get(key: K): T | null {
+    const idx = this.#values.findIndex(entry => entry[0] === key);
+    // If found, move to front
+    if (idx === this.#headIdx) {
+      return this.#values[this.#headIdx][1] as T;
+    } else if (idx < 0) {
+      return null;
+    }
+
+    const entry: [K, T] = this.#values[idx] as [K, T];
+
+    const len = this.#values.length;
+    for (let i = 0; i < Math.min(idx, len - 1); i++) {
+      this.#values[(this.#headIdx + i + 1) % len] =
+        this.#values[(this.#headIdx + i) % len];
+    }
+    this.#values[this.#headIdx] = entry;
+    return entry[1];
+  }
+  push(key: K, value: T): void {
+    this.#headIdx =
+      (this.#headIdx - 1 + this.#values.length) % this.#values.length;
+    this.#values[this.#headIdx] = [key, value];
+  }
+}
+const cache = new LRUCache<string, RunCacheEntry>(10);
+
+export default function runReactCompiler({
+  sourceCode,
+  filename,
+  userOpts,
+}: RunParams): RunCacheEntry {
+  const entry = cache.get(filename);
+  if (
+    entry != null &&
+    entry.sourceCode === sourceCode.text &&
+    isDeepStrictEqual(entry.userOpts, userOpts)
+  ) {
+    return entry;
+  }
+
+  // Quick heuristic: skip files that don't appear to contain React code.
+  // We still cache the empty result so subsequent rules don't re-run the check.
+  if (!mayContainReactCode(sourceCode)) {
+    const emptyResult: RunCacheEntry = {
+      sourceCode: sourceCode.text,
+      filename,
+      userOpts,
+      flowSuppressions: [],
+      events: [],
+    };
+    if (entry != null) {
+      Object.assign(entry, emptyResult);
+    } else {
+      cache.push(filename, emptyResult);
+    }
+    return {...emptyResult};
+  }
+
+  const runEntry = runReactCompilerImpl({
+    sourceCode,
+    filename,
+    userOpts,
+  });
+  // If we have a cache entry, we can update it
+  if (entry != null) {
+    Object.assign(entry, runEntry);
+  } else {
+    cache.push(filename, runEntry);
+  }
+  return {...runEntry};
+}
diff --git a/packages/eslint-plugin-react-hooks/src/shared/Utils.ts b/packages/eslint-plugin-react-hooks/src/shared/Utils.ts
new file mode 100644
index 00000000000..54bc2101197
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/shared/Utils.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Rule } from 'eslint';
+
+const SETTINGS_KEY = 'react-hooks';
+const SETTINGS_ADDITIONAL_EFFECT_HOOKS_KEY = 'additionalEffectHooks';
+
+export function getAdditionalEffectHooksFromSettings(
+  settings: Rule.RuleContext['settings'],
+): RegExp | undefined {
+  const additionalHooks = settings[SETTINGS_KEY]?.[SETTINGS_ADDITIONAL_EFFECT_HOOKS_KEY];
+  if (additionalHooks != null && typeof additionalHooks === 'string') {
+    return new RegExp(additionalHooks);
+  }
+
+  return undefined;
+}
diff --git a/packages/eslint-plugin-react-hooks/src/types/estree.d.ts b/packages/eslint-plugin-react-hooks/src/types/estree.d.ts
new file mode 100644
index 00000000000..f2663697048
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/types/estree.d.ts
@@ -0,0 +1,72 @@
+import {Expression, Identifier, Node} from 'estree-jsx';
+
+/**
+ * This file augments the `estree` types to include types that are not built-in to `estree` or `estree-jsx`.
+ * This is necessary because the `estree` types are used by ESLint, and ESLint does not natively support
+ * TypeScript or Flow types.  Since we're not using a ton of them, we can just add them here, rather than
+ * installing typescript estree or flow estree types.
+ *
+ * This also adds support for the AST mutation that the Exhaustive deps rule does to add parent nodes.
+ */
+declare module 'estree' {
+  // The Exhaustive deps rule mutates the AST to add parent nodes for efficient traversal.
+  // We need to augment the `estree` types to support that.
+  interface BaseNode {
+    parent?: Node;
+  }
+
+  // Adding types that aren't built-in to estree or estree-jsx.
+  // Namely, the specific TS and Flow types that we're using.
+  interface AsExpression extends BaseExpression {
+    type: 'AsExpression';
+    expression: Expression | Identifier;
+  }
+
+  interface OptionalCallExpression extends BaseCallExpression {
+    type: 'OptionalCallExpression';
+  }
+
+  interface OptionalMemberExpression extends MemberExpression {
+    type: 'OptionalMemberExpression';
+  }
+
+  interface TSAsExpression extends BaseExpression {
+    type: 'TSAsExpression';
+    expression: Expression | Identifier;
+  }
+
+  interface TSTypeQuery extends BaseNode {
+    type: 'TSTypeQuery';
+    exprName: Identifier;
+  }
+
+  interface TSTypeReference extends BaseNode {
+    type: 'TSTypeReference';
+    typeName: Identifier;
+  }
+
+  interface TypeCastExpression extends BaseExpression {
+    type: 'TypeCastExpression';
+    expression: Expression | Identifier;
+  }
+
+  // Extend the set of known Expression types
+  interface ExpressionMap {
+    AsExpression: AsExpression;
+    OptionalCallExpression: OptionalCallExpression;
+    OptionalMemberExpression: OptionalMemberExpression;
+    TSAsExpression: TSAsExpression;
+    TypeCastExpression: TypeCastExpression;
+  }
+
+  // Extend the set of known Node types
+  interface NodeMap {
+    AsExpression: AsExpression;
+    OptionalCallExpression: OptionalCallExpression;
+    OptionalMemberExpression: OptionalMemberExpression;
+    TSAsExpression: TSAsExpression;
+    TSTypeQuery: TSTypeQuery;
+    TSTypeReference: TSTypeReference;
+    TypeCastExpression: TypeCastExpression;
+  }
+}
diff --git a/packages/eslint-plugin-react-hooks/src/types/global.d.ts b/packages/eslint-plugin-react-hooks/src/types/global.d.ts
new file mode 100644
index 00000000000..b334f17ee53
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/types/global.d.ts
@@ -0,0 +1,4 @@
+// In order to support the __EXPERIMENTAL__ global in TypeScript,
+// we need to declare it here.  The value of this is set in both
+// the jest setup and CI build
+declare const __EXPERIMENTAL__: boolean;
diff --git a/packages/eslint-plugin-react-hooks/src/types/hermes-eslint.d.ts b/packages/eslint-plugin-react-hooks/src/types/hermes-eslint.d.ts
new file mode 100644
index 00000000000..280b1e1e00a
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/types/hermes-eslint.d.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// v0.17.1
+declare module 'hermes-eslint' {
+  // https://fburl.com/2vikhmaa
+  type ParseForESLintOptions = {
+    /**
+     * Whether the whole script is executed under node.js environment.
+     * When enabled, the scope manager adds a function scope immediately following the global scope.
+     * Defaults to `false`.
+     */
+    globalReturn: boolean;
+
+    /**
+     * The identifier that's used for JSX Element creation (after transpilation).
+     * This should not be a member expression - just the root identifier (i.e. use "React" instead of "React.createElement").
+     *
+     * To use the new global JSX transform function, you can explicitly set this to `null`.
+     *
+     * Defaults to `"React"`.
+     */
+    jsxPragma: string | null;
+
+    /**
+     * The identifier that's used for JSX fragment elements (after transpilation).
+     * If `null`, assumes transpilation will always use a member on `jsxFactory` (i.e. React.Fragment).
+     * This should not be a member expression - just the root identifier (i.e. use "h" instead of "h.Fragment").
+     * Defaults to `null`.
+     */
+    jsxFragmentName: string | null;
+
+    /**
+     * The source type of the script.
+     */
+    sourceType: 'script' | 'module';
+
+    /**
+     * Ignore <fbt /> JSX elements when adding references to the module-level `React` variable.
+     * FBT is JSX that's transformed to non-JSX and thus references differently
+     *
+     * https://facebook.github.io/fbt/
+     */
+    fbt: boolean;
+
+    /**
+     * Support experimental component syntax
+     *
+     * Defaults to `true`.
+     */
+    enableExperimentalComponentSyntax?: boolean;
+  };
+  export function parse(code: string, options?: Partial<ParseForESLintOptions>);
+}
diff --git a/packages/eslint-plugin-react-hooks/src/types/hermes-parser.d.ts b/packages/eslint-plugin-react-hooks/src/types/hermes-parser.d.ts
new file mode 100644
index 00000000000..b624caf19c5
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/src/types/hermes-parser.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// v0.17.1
+declare module 'hermes-parser' {
+  type HermesParserOptions = {
+    allowReturnOutsideFunction?: boolean;
+    babel?: boolean;
+    flow?: 'all' | 'detect';
+    enableExperimentalComponentSyntax?: boolean;
+    sourceFilename?: string;
+    sourceType?: 'module' | 'script' | 'unambiguous';
+    tokens?: boolean;
+  };
+  export function parse(code: string, options: Partial<HermesParserOptions>);
+}
diff --git a/packages/eslint-plugin-react-hooks/tsconfig.json b/packages/eslint-plugin-react-hooks/tsconfig.json
new file mode 100644
index 00000000000..c5d8847f1ec
--- /dev/null
+++ b/packages/eslint-plugin-react-hooks/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "target": "ES2015",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "dom"],
+    "sourceMap": false,
+    "types": ["estree-jsx", "node"],
+    "downlevelIteration": true,
+    "paths": {
+      "babel-plugin-react-compiler": ["../../compiler/packages/babel-plugin-react-compiler/src"]
+    },
+    "jsx": "react-jsxdev",
+    "rootDir": "../..",
+    "baseUrl": ".",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "checkJs": false,
+    "allowJs": false,
+
+    // weaken strictness from preset
+    "importsNotUsedAsValues": "remove",
+    "noUncheckedIndexedAccess": false,
+    "noUnusedParameters": false,
+    "useUnknownInCatchVariables": true,
+    // ideally turn off only during dev, or on a per-file basis
+    "noUnusedLocals": false,
+    "removeComments": true,
+  },
+  "include": ["src/**/*.ts", "__tests__/**/*.ts"]
+}
diff --git a/packages/internal-test-utils/ReactInternalTestUtils.js b/packages/internal-test-utils/ReactInternalTestUtils.js
new file mode 100644
index 00000000000..ed9b822457a
--- /dev/null
+++ b/packages/internal-test-utils/ReactInternalTestUtils.js
@@ -0,0 +1,379 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as SchedulerMock from 'scheduler/unstable_mock';
+import {diff} from 'jest-diff';
+import {equals} from '@jest/expect-utils';
+import enqueueTask from './enqueueTask';
+import simulateBrowserEventDispatch from './simulateBrowserEventDispatch';
+import {
+  clearLogs,
+  clearWarnings,
+  clearErrors,
+  createLogAssertion,
+} from './consoleMock';
+export {getDebugInfo} from './debugInfo';
+export {act, serverAct} from './internalAct';
+const {assertConsoleLogsCleared} = require('internal-test-utils/consoleMock');
+
+import {thrownErrors, actingUpdatesScopeDepth} from './internalAct';
+
+function assertYieldsWereCleared(caller) {
+  const actualYields = SchedulerMock.unstable_clearLog();
+  if (actualYields.length !== 0) {
+    const error = Error(
+      'The event log is not empty. Call assertLog(...) first.',
+    );
+    Error.captureStackTrace(error, caller);
+    throw error;
+  }
+  assertConsoleLogsCleared();
+}
+
+export async function waitForMicrotasks() {
+  return new Promise(resolve => {
+    enqueueTask(() => resolve());
+  });
+}
+
+export async function waitFor(expectedLog, options) {
+  assertYieldsWereCleared(waitFor);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, waitFor);
+
+  const stopAfter = expectedLog.length;
+  const actualLog = [];
+  do {
+    // Wait until end of current task/microtask.
+    await waitForMicrotasks();
+    if (SchedulerMock.unstable_hasPendingWork()) {
+      SchedulerMock.unstable_flushNumberOfYields(stopAfter - actualLog.length);
+      actualLog.push(...SchedulerMock.unstable_clearLog());
+      if (stopAfter > actualLog.length) {
+        // Continue flushing until we've logged the expected number of items.
+      } else {
+        // Once we've reached the expected sequence, wait one more microtask to
+        // flush any remaining synchronous work.
+        await waitForMicrotasks();
+        actualLog.push(...SchedulerMock.unstable_clearLog());
+        break;
+      }
+    } else {
+      // There's no pending work, even after a microtask.
+      break;
+    }
+  } while (true);
+
+  if (options && options.additionalLogsAfterAttemptingToYield) {
+    expectedLog = expectedLog.concat(
+      options.additionalLogsAfterAttemptingToYield,
+    );
+  }
+
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
+export async function waitForAll(expectedLog) {
+  assertYieldsWereCleared(waitForAll);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, waitForAll);
+
+  do {
+    // Wait until end of current task/microtask.
+    await waitForMicrotasks();
+    if (!SchedulerMock.unstable_hasPendingWork()) {
+      // There's no pending work, even after a microtask. Stop flushing.
+      break;
+    }
+    SchedulerMock.unstable_flushAllWithoutAsserting();
+  } while (true);
+
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
+function aggregateErrors(errors: Array<mixed>): mixed {
+  if (errors.length > 1 && typeof AggregateError === 'function') {
+    // eslint-disable-next-line no-undef
+    return new AggregateError(errors);
+  }
+  return errors[0];
+}
+
+export async function waitForThrow(expectedError: mixed): mixed {
+  assertYieldsWereCleared(waitForThrow);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, waitForThrow);
+
+  do {
+    // Wait until end of current task/microtask.
+    await waitForMicrotasks();
+    if (!SchedulerMock.unstable_hasPendingWork()) {
+      // There's no pending work, even after a microtask. Stop flushing.
+      error.message = 'Expected something to throw, but nothing did.';
+      throw error;
+    }
+
+    const errorHandlerDOM = function (event: ErrorEvent) {
+      // Prevent logs from reprinting this error.
+      event.preventDefault();
+      thrownErrors.push(event.error);
+    };
+    const errorHandlerNode = function (err: mixed) {
+      thrownErrors.push(err);
+    };
+    // We track errors that were logged globally as if they occurred in this scope and then rethrow them.
+    if (actingUpdatesScopeDepth === 0) {
+      if (
+        typeof window === 'object' &&
+        typeof window.addEventListener === 'function'
+      ) {
+        // We're in a JS DOM environment.
+        window.addEventListener('error', errorHandlerDOM);
+      } else if (typeof process === 'object') {
+        // Node environment
+        process.on('uncaughtException', errorHandlerNode);
+      }
+    }
+    try {
+      SchedulerMock.unstable_flushAllWithoutAsserting();
+    } catch (x) {
+      thrownErrors.push(x);
+    } finally {
+      if (actingUpdatesScopeDepth === 0) {
+        if (
+          typeof window === 'object' &&
+          typeof window.addEventListener === 'function'
+        ) {
+          // We're in a JS DOM environment.
+          window.removeEventListener('error', errorHandlerDOM);
+        } else if (typeof process === 'object') {
+          // Node environment
+          process.off('uncaughtException', errorHandlerNode);
+        }
+      }
+    }
+    if (thrownErrors.length > 0) {
+      const thrownError = aggregateErrors(thrownErrors);
+      thrownErrors.length = 0;
+
+      if (expectedError === undefined) {
+        // If no expected error was provided, then assume the caller is OK with
+        // any error being thrown. We're returning the error so they can do
+        // their own checks, if they wish.
+        return thrownError;
+      }
+      if (equals(thrownError, expectedError)) {
+        return thrownError;
+      }
+      if (
+        typeof expectedError === 'string' &&
+        typeof thrownError === 'object' &&
+        thrownError !== null &&
+        typeof thrownError.message === 'string'
+      ) {
+        if (thrownError.message.includes(expectedError)) {
+          return thrownError;
+        } else {
+          error.message = `
+Expected error was not thrown.
+
+${diff(expectedError, thrownError.message)}
+`;
+          throw error;
+        }
+      }
+      error.message = `
+Expected error was not thrown.
+
+${diff(expectedError, thrownError)}
+`;
+      throw error;
+    }
+  } while (true);
+}
+
+// This is prefixed with `unstable_` because you should almost always try to
+// avoid using it in tests. It's really only for testing a particular
+// implementation detail (update starvation prevention).
+export async function unstable_waitForExpired(expectedLog): mixed {
+  assertYieldsWereCleared(unstable_waitForExpired);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, unstable_waitForExpired);
+
+  // Wait until end of current task/microtask.
+  await waitForMicrotasks();
+  SchedulerMock.unstable_flushExpired();
+
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
+// TODO: This name is a bit misleading currently because it will stop as soon as
+// React yields for any reason, not just for a paint. I've left it this way for
+// now because that's how untable_flushUntilNextPaint already worked, but maybe
+// we should split these use cases into separate APIs.
+export async function waitForPaint(expectedLog) {
+  assertYieldsWereCleared(waitForPaint);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, waitForPaint);
+
+  // Wait until end of current task/microtask.
+  await waitForMicrotasks();
+  if (SchedulerMock.unstable_hasPendingWork()) {
+    // Flush until React yields.
+    SchedulerMock.unstable_flushUntilNextPaint();
+    // Wait one more microtask to flush any remaining synchronous work.
+    await waitForMicrotasks();
+  }
+
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
+export async function waitForDiscrete(expectedLog) {
+  assertYieldsWereCleared(waitForDiscrete);
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, waitForDiscrete);
+
+  // Wait until end of current task/microtask.
+  await waitForMicrotasks();
+
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  error.message = `
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`;
+  throw error;
+}
+
+export function assertLog(expectedLog) {
+  const actualLog = SchedulerMock.unstable_clearLog();
+  if (equals(actualLog, expectedLog)) {
+    return;
+  }
+
+  const error = new Error(`
+Expected sequence of events did not occur.
+
+${diff(expectedLog, actualLog)}
+`);
+  Error.captureStackTrace(error, assertLog);
+  throw error;
+}
+
+export const assertConsoleLogDev = createLogAssertion(
+  'log',
+  'assertConsoleLogDev',
+  clearLogs,
+);
+export const assertConsoleWarnDev = createLogAssertion(
+  'warn',
+  'assertConsoleWarnDev',
+  clearWarnings,
+);
+export const assertConsoleErrorDev = createLogAssertion(
+  'error',
+  'assertConsoleErrorDev',
+  clearErrors,
+);
+
+// Simulates dispatching events, waiting for microtasks in between.
+// This matches the browser behavior, which will flush microtasks
+// between each event handler. This will allow discrete events to
+// flush between events across different event handlers.
+export async function simulateEventDispatch(
+  node: Node,
+  eventType: string,
+): Promise<void> {
+  // Ensure the node is in the document.
+  for (let current = node; current; current = current.parentNode) {
+    if (current === document) {
+      break;
+    } else if (current.parentNode == null) {
+      return;
+    }
+  }
+
+  const customEvent = new Event(eventType, {
+    bubbles: true,
+  });
+
+  Object.defineProperty(customEvent, 'target', {
+    // Override the target to the node on which we dispatched the event.
+    value: node,
+  });
+
+  const impl = Object.getOwnPropertySymbols(node)[0];
+  const oldDispatch = node[impl].dispatchEvent;
+  try {
+    node[impl].dispatchEvent = simulateBrowserEventDispatch;
+
+    await node.dispatchEvent(customEvent);
+  } finally {
+    node[impl].dispatchEvent = oldDispatch;
+  }
+}
diff --git a/packages/internal-test-utils/ReactJSDOM.js b/packages/internal-test-utils/ReactJSDOM.js
new file mode 100644
index 00000000000..12ce6237182
--- /dev/null
+++ b/packages/internal-test-utils/ReactJSDOM.js
@@ -0,0 +1,20 @@
+const JSDOMModule = jest.requireActual('jsdom');
+
+const OriginalJSDOM = JSDOMModule.JSDOM;
+
+module.exports = JSDOMModule;
+module.exports.JSDOM = function JSDOM() {
+  let result;
+  if (new.target) {
+    result = Reflect.construct(OriginalJSDOM, arguments);
+  } else {
+    result = JSDOM.apply(undefined, arguments);
+  }
+
+  require('./ReactJSDOMUtils').setupDocumentReadyState(
+    result.window.document,
+    result.window.Event,
+  );
+
+  return result;
+};
diff --git a/packages/internal-test-utils/ReactJSDOMUtils.js b/packages/internal-test-utils/ReactJSDOMUtils.js
new file mode 100644
index 00000000000..04a0d18fc42
--- /dev/null
+++ b/packages/internal-test-utils/ReactJSDOMUtils.js
@@ -0,0 +1,33 @@
+export function setupDocumentReadyState(
+  document: Document,
+  Event: typeof Event,
+) {
+  let readyState: 0 | 1 | 2 = 0;
+  Object.defineProperty(document, 'readyState', {
+    get() {
+      switch (readyState) {
+        case 0:
+          return 'loading';
+        case 1:
+          return 'interactive';
+        case 2:
+          return 'complete';
+      }
+    },
+    set(value) {
+      if (value === 'interactive' && readyState < 1) {
+        readyState = 1;
+        document.dispatchEvent(new Event('readystatechange'));
+      } else if (value === 'complete' && readyState < 2) {
+        readyState = 2;
+        document.dispatchEvent(new Event('readystatechange'));
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+      } else if (value === 'loading') {
+        // We allow resetting the readyState to loading mostly for pragamtism.
+        // tests that use this environment don't reset the document between tests.
+        readyState = 0;
+      }
+    },
+    configurable: true,
+  });
+}
diff --git a/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js b/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js
new file mode 100644
index 00000000000..8560c508082
--- /dev/null
+++ b/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js
@@ -0,0 +1,3037 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+const React = require('react');
+const stripAnsi = require('strip-ansi');
+const {startTransition, useDeferredValue} = React;
+const ReactNoop = require('react-noop-renderer');
+const {
+  waitFor,
+  waitForAll,
+  waitForPaint,
+  waitForThrow,
+  assertLog,
+} = require('internal-test-utils');
+const act = require('internal-test-utils').act;
+const Scheduler = require('scheduler/unstable_mock');
+const {
+  assertConsoleLogsCleared,
+  resetAllUnexpectedConsoleCalls,
+  patchConsoleMethods,
+} = require('../consoleMock');
+const {
+  assertConsoleLogDev,
+  assertConsoleWarnDev,
+  assertConsoleErrorDev,
+} = require('../ReactInternalTestUtils');
+
+describe('ReactInternalTestUtils', () => {
+  it('waitFor', async () => {
+    const Yield = ({id}) => {
+      Scheduler.log(id);
+      return id;
+    };
+
+    const root = ReactNoop.createRoot();
+    startTransition(() => {
+      root.render(
+        <div>
+          <Yield id="foo" />
+          <Yield id="bar" />
+          <Yield id="baz" />
+        </div>
+      );
+    });
+
+    await waitFor(['foo', 'bar']);
+    expect(root).toMatchRenderedOutput(null);
+    await waitFor(['baz']);
+    expect(root).toMatchRenderedOutput(null);
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+  });
+
+  it('waitForAll', async () => {
+    const Yield = ({id}) => {
+      Scheduler.log(id);
+      return id;
+    };
+
+    const root = ReactNoop.createRoot();
+    startTransition(() => {
+      root.render(
+        <div>
+          <Yield id="foo" />
+          <Yield id="bar" />
+          <Yield id="baz" />
+        </div>
+      );
+    });
+
+    await waitForAll(['foo', 'bar', 'baz']);
+    expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+  });
+
+  it('waitForThrow', async () => {
+    const Yield = ({id}) => {
+      Scheduler.log(id);
+      return id;
+    };
+
+    function BadRender() {
+      throw new Error('Oh no!');
+    }
+
+    function App() {
+      return (
+        <div>
+          <Yield id="A" />
+          <Yield id="B" />
+          <BadRender />
+          <Yield id="C" />
+          <Yield id="D" />
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+
+    await waitForThrow('Oh no!');
+    assertLog([
+      'A',
+      'B',
+      // React will try one more time before giving up.
+      'A',
+      'B',
+    ]);
+  });
+
+  it('waitForPaint', async () => {
+    function App({prop}) {
+      const deferred = useDeferredValue(prop);
+      const text = `Urgent: ${prop}, Deferred: ${deferred}`;
+      Scheduler.log(text);
+      return text;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App prop="A" />);
+
+    await waitForAll(['Urgent: A, Deferred: A']);
+    expect(root).toMatchRenderedOutput('Urgent: A, Deferred: A');
+
+    // This update will result in two separate paints: an urgent one, and a
+    // deferred one.
+    root.render(<App prop="B" />);
+    // Urgent paint
+    await waitForPaint(['Urgent: B, Deferred: A']);
+    expect(root).toMatchRenderedOutput('Urgent: B, Deferred: A');
+
+    // Deferred paint
+    await waitForPaint(['Urgent: B, Deferred: B']);
+    expect(root).toMatchRenderedOutput('Urgent: B, Deferred: B');
+  });
+
+  it('assertLog', async () => {
+    const Yield = ({id}) => {
+      Scheduler.log(id);
+      React.useEffect(() => {
+        Scheduler.log(`create effect ${id}`);
+        return () => {
+          Scheduler.log(`cleanup effect ${id}`);
+        };
+      });
+      return id;
+    };
+
+    function App() {
+      return (
+        <div>
+          <Yield id="A" />
+          <Yield id="B" />
+          <Yield id="C" />
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      );
+    });
+    assertLog([
+      'A',
+      'B',
+      'C',
+      'create effect A',
+      'create effect B',
+      'create effect C',
+    ]);
+
+    await act(() => {
+      root.render(null);
+    });
+
+    assertLog(['cleanup effect A', 'cleanup effect B', 'cleanup effect C']);
+  });
+});
+
+describe('ReactInternalTestUtils console mocks', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    patchConsoleMethods({includeLog: true});
+  });
+
+  afterEach(() => {
+    resetAllUnexpectedConsoleCalls();
+    jest.resetAllMocks();
+  });
+
+  describe('console.log', () => {
+    it('should fail if not asserted', () => {
+      expect(() => {
+        console.log('hit');
+        assertConsoleLogsCleared();
+      }).toThrow(`console.log was called without assertConsoleLogDev`);
+    });
+
+    it('should not fail if mocked with spyOnDev', () => {
+      spyOnDev(console, 'log').mockImplementation(() => {});
+      expect(() => {
+        if (__DEV__) {
+          console.log('hit');
+        }
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+
+    // @gate !__DEV__
+    it('should not fail if mocked with spyOnProd', () => {
+      spyOnProd(console, 'log').mockImplementation(() => {});
+      expect(() => {
+        console.log('hit');
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+
+    it('should not fail if mocked with spyOnDevAndProd', () => {
+      spyOnDevAndProd(console, 'log').mockImplementation(() => {});
+      expect(() => {
+        console.log('hit');
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+  });
+
+  describe('console.warn', () => {
+    it('should fail if not asserted', () => {
+      expect(() => {
+        console.warn('hit');
+        assertConsoleLogsCleared();
+      }).toThrow('console.warn was called without assertConsoleWarnDev');
+    });
+
+    it('should not fail if mocked with spyOnDev', () => {
+      spyOnDev(console, 'warn').mockImplementation(() => {});
+      expect(() => {
+        if (__DEV__) {
+          console.warn('hit');
+        }
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+
+    // @gate !__DEV__
+    it('should not fail if mocked with spyOnProd', () => {
+      spyOnProd(console, 'warn').mockImplementation(() => {});
+      expect(() => {
+        console.warn('hit');
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+
+    it('should not fail if mocked with spyOnDevAndProd', () => {
+      spyOnDevAndProd(console, 'warn').mockImplementation(() => {});
+      expect(() => {
+        console.warn('hit');
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+  });
+
+  describe('console.error', () => {
+    it('should fail if console.error is not asserted', () => {
+      expect(() => {
+        console.error('hit');
+        assertConsoleLogsCleared();
+      }).toThrow('console.error was called without assertConsoleErrorDev');
+    });
+
+    it('should not fail if mocked with spyOnDev', () => {
+      spyOnDev(console, 'error').mockImplementation(() => {});
+      expect(() => {
+        if (__DEV__) {
+          console.error('hit');
+        }
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+
+    // @gate !__DEV__
+    it('should not fail if mocked with spyOnProd', () => {
+      spyOnProd(console, 'error').mockImplementation(() => {});
+      expect(() => {
+        console.error('hit');
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+
+    it('should not fail if mocked with spyOnDevAndProd', () => {
+      spyOnDevAndProd(console, 'error').mockImplementation(() => {});
+      expect(() => {
+        console.error('hit');
+        assertConsoleLogsCleared();
+      }).not.toThrow();
+    });
+  });
+});
+
+// Helper method to capture assertion failure.
+const expectToThrowFailure = expectBlock => {
+  let caughtError;
+  try {
+    expectBlock();
+  } catch (error) {
+    caughtError = error;
+  }
+  expect(caughtError).toBeDefined();
+  return stripAnsi(caughtError.message);
+};
+
+// Helper method to capture assertion failure with act.
+const awaitExpectToThrowFailure = async expectBlock => {
+  let caughtError;
+  try {
+    await expectBlock();
+  } catch (error) {
+    caughtError = error;
+  }
+  expect(caughtError).toBeDefined();
+  return stripAnsi(caughtError.message);
+};
+
+describe('ReactInternalTestUtils console assertions', () => {
+  beforeAll(() => {
+    patchConsoleMethods({includeLog: true});
+  });
+
+  describe('assertConsoleLogDev', () => {
+    it('passes for a single log', () => {
+      if (__DEV__) {
+        console.log('Hello');
+      }
+      assertConsoleLogDev(['Hello']);
+    });
+
+    it('passes for multiple logs', () => {
+      if (__DEV__) {
+        console.log('Hello');
+        console.log('Good day');
+        console.log('Bye');
+      }
+      assertConsoleLogDev(['Hello', 'Good day', 'Bye']);
+    });
+
+    it('fails if act is called without assertConsoleLogDev', async () => {
+      const Yield = ({id}) => {
+        console.log(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToThrowFailure(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + A
+        + B
+        + C
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if first expected log is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Wow');
+        console.log('Bye');
+        assertConsoleLogDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+        - Hi
+          Wow
+          Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle expected log is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Bye');
+        assertConsoleLogDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+          Hi
+        - Wow
+          Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last expected log is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Wow');
+        assertConsoleLogDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Expected log was not recorded.
+
+        - Expected logs
+        + Received logs
+
+          Hi
+          Wow
+        - Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if first received log is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Wow');
+        console.log('Bye');
+        assertConsoleLogDev(['Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+        + Hi
+          Wow
+          Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle received log is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Wow');
+        console.log('Bye');
+        assertConsoleLogDev(['Hi', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+          Hi
+        + Wow
+          Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last received log is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Wow');
+        console.log('Bye');
+        assertConsoleLogDev(['Hi', 'Wow']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+          Hi
+          Wow
+        + Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if both expected and received mismatch', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Wow');
+        console.log('Bye');
+        assertConsoleLogDev(['Hi', 'Wow', 'Yikes']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+          Hi
+          Wow
+        - Yikes
+        + Bye"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if both expected and received mismatch with multiple lines', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi\nFoo');
+        console.log('Wow\nBar');
+        console.log('Bye\nBaz');
+        assertConsoleLogDev(['Hi\nFoo', 'Wow\nBar', 'Yikes\nFaz']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Unexpected log(s) recorded.
+
+        - Expected logs
+        + Received logs
+
+          Hi Foo
+          Wow Bar
+        - Yikes Faz
+        + Bye Baz"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if local withoutStack passed to assertConsoleLogDev', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hello');
+        assertConsoleLogDev([['Hello', {withoutStack: true}]]);
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Do not pass withoutStack to assertConsoleLogDev logs, console.log does not have component stacks."
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if global withoutStack passed to assertConsoleLogDev', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hello');
+        assertConsoleLogDev(['Hello'], {withoutStack: true});
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Do not pass withoutStack to assertConsoleLogDev, console.log does not have component stacks."
+      `);
+
+      assertConsoleLogDev(['Hello']);
+    });
+
+    // @gate __DEV__
+    it('fails if the args is greater than %s argument number', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi %s', 'Sara', 'extra');
+        assertConsoleLogDev(['Hi']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Hi %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the args is greater than %s argument number for multiple logs', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi %s', 'Sara', 'extra');
+        console.log('Bye %s', 'Sara', 'extra');
+        assertConsoleLogDev(['Hi', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Hi %s"
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Bye %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the %s argument number is greater than args', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi %s');
+        assertConsoleLogDev(['Hi']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Hi %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the %s argument number is greater than args for multiple logs', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi %s');
+        console.log('Bye %s');
+        assertConsoleLogDev(['Hi', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Hi %s"
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Bye %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if first arg is not an array', () => {
+      const message = expectToThrowFailure(() => {
+        console.log('Hi');
+        console.log('Bye');
+        assertConsoleLogDev('Hi', 'Bye');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleLogDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+
+      assertConsoleLogDev(['Hi', 'Bye']);
+    });
+
+    it('should fail if waitFor is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      console.log('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitFor(['foo', 'bar']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+    });
+
+    it('should fail if waitForThrow is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      function BadRender() {
+        throw new Error('Oh no!');
+      }
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <BadRender />
+            <Yield id="C" />
+            <Yield id="D" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App />);
+
+      console.log('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForThrow('Oh no!');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['A', 'B', 'A', 'B']);
+    });
+
+    it('should fail if waitForPaint is called before asserting', async () => {
+      function App({prop}) {
+        const deferred = useDeferredValue(prop);
+        const text = `Urgent: ${prop}, Deferred: ${deferred}`;
+        Scheduler.log(text);
+        return text;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App prop="A" />);
+
+      await waitForAll(['Urgent: A, Deferred: A']);
+      expect(root).toMatchRenderedOutput('Urgent: A, Deferred: A');
+
+      // This update will result in two separate paints: an urgent one, and a
+      // deferred one.
+      root.render(<App prop="B" />);
+
+      console.log('Not asserted');
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForPaint(['Urgent: B, Deferred: A']);
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['Urgent: B, Deferred: A', 'Urgent: B, Deferred: B']);
+    });
+
+    it('should fail if waitForAll is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      console.log('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForAll(['foo', 'bar', 'baz']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+    });
+    it('should fail if toMatchRenderedOutput is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        console.log('Not asserted');
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      assertLog([]);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+      const message = expectToThrowFailure(() => {
+        expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+      });
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.log was called without assertConsoleLogDev:
+          + Not asserted
+          + Not asserted
+          + Not asserted
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.log was called without assertConsoleLogDev:
+          + Not asserted
+          + Not asserted
+          + Not asserted
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      }
+
+      expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+    });
+  });
+
+  describe('assertConsoleWarnDev', () => {
+    it('passes if an warning contains a stack', () => {
+      if (__DEV__) {
+        console.warn('Hello\n    in div');
+      }
+      assertConsoleWarnDev(['Hello\n    in div']);
+    });
+
+    it('passes if all warnings contain a stack', () => {
+      if (__DEV__) {
+        console.warn('Hello\n    in div');
+        console.warn('Good day\n    in div');
+        console.warn('Bye\n    in div');
+      }
+      assertConsoleWarnDev([
+        'Hello\n    in div',
+        'Good day\n    in div',
+        'Bye\n    in div',
+      ]);
+    });
+
+    it('fails if act is called without assertConsoleWarnDev', async () => {
+      const Yield = ({id}) => {
+        console.warn(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToThrowFailure(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.warn was called without assertConsoleWarnDev:
+          + A
+          + B
+          + C
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.warn was called without assertConsoleWarnDev:
+          + A%s,
+          +     in App (at **)
+          + B%s,
+          +     in App (at **)
+          + C%s,
+          +     in App (at **)
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      }
+    });
+
+    it('fails if act is called without any assertConsoleDev helpers', async () => {
+      const Yield = ({id}) => {
+        console.log(id);
+        console.warn(id);
+        console.error(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToThrowFailure(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.log was called without assertConsoleLogDev:
+          + A
+          + B
+          + C
+
+          console.warn was called without assertConsoleWarnDev:
+          + A
+          + B
+          + C
+
+          console.error was called without assertConsoleErrorDev:
+          + A
+          + B
+          + C
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.log was called without assertConsoleLogDev:
+          + A
+          + B
+          + C
+
+          console.warn was called without assertConsoleWarnDev:
+          + A%s,
+          +     in App (at **)
+          + B%s,
+          +     in App (at **)
+          + C%s,
+          +     in App (at **)
+
+          console.error was called without assertConsoleErrorDev:
+          + A%s,
+          +     in App (at **)
+          + B%s,
+          +     in App (at **)
+          + C%s,
+          +     in App (at **)
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      }
+    });
+
+    // @gate __DEV__
+    it('fails if first expected warning is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Wow \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hi
+        - Wow
+        - Bye
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle expected warning is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hi
+        - Wow
+        - Bye
+        + Hi      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last expected warning is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Wow \n    in div');
+        assertConsoleWarnDev([
+          'Hi \n    in div',
+          'Wow \n    in div',
+          'Bye \n    in div',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Expected warning was not recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hi      in div
+        - Wow      in div
+        - Bye      in div
+        + Hi      in div (at **)
+        + Wow      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if first received warning is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Wow \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev(['Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Wow
+        - Bye
+        + Hi      in div (at **)
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle received warning is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Wow \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev(['Hi', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hi
+        - Bye
+        + Hi      in div (at **)
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last received warning is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Wow \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev(['Hi', 'Wow']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hi
+        - Wow
+        + Hi      in div (at **)
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if only warning does not contain a stack', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hello');
+        assertConsoleWarnDev(['Hello']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Missing component stack for:
+          "Hello"
+
+        If this warning should omit a component stack, pass [log, {withoutStack: true}].
+        If all warnings should omit the component stack, add {withoutStack: true} to the assertConsoleWarnDev call."
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if first warning does not contain a stack', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hello');
+        console.warn('Good day\n    in div');
+        console.warn('Bye\n    in div');
+        assertConsoleWarnDev([
+          'Hello\n    in div',
+          'Good day\n    in div',
+          'Bye\n    in div',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hello     in div
+        - Good day     in div
+        - Bye     in div
+        + Hello
+        + Good day     in div (at **)
+        + Bye     in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle warning does not contain a stack', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hello\n    in div');
+        console.warn('Good day');
+        console.warn('Bye\n    in div');
+        assertConsoleWarnDev([
+          'Hello\n    in div',
+          'Good day\n    in div',
+          'Bye\n    in div',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hello     in div
+        - Good day     in div
+        - Bye     in div
+        + Hello     in div (at **)
+        + Good day
+        + Bye     in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last warning does not contain a stack', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hello\n    in div');
+        console.warn('Good day\n    in div');
+        console.warn('Bye');
+        assertConsoleWarnDev([
+          'Hello\n    in div',
+          'Good day\n    in div',
+          'Bye\n    in div',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+        - Hello     in div
+        - Good day     in div
+        - Bye     in div
+        + Hello     in div (at **)
+        + Good day     in div (at **)
+        + Bye"
+      `);
+    });
+
+    describe('global withoutStack', () => {
+      it('passes if warnings without stack explicitly opt out', () => {
+        if (__DEV__) {
+          console.warn('Hello');
+        }
+        assertConsoleWarnDev(['Hello'], {withoutStack: true});
+
+        if (__DEV__) {
+          console.warn('Hello');
+          console.warn('Good day');
+          console.warn('Bye');
+        }
+
+        assertConsoleWarnDev(['Hello', 'Good day', 'Bye'], {
+          withoutStack: true,
+        });
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid null value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev(['Hi'], {withoutStack: null});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          The second argument must be {withoutStack: true}.
+
+          Instead received {"withoutStack":null}."
+        `);
+        assertConsoleWarnDev(['Hi'], {withoutStack: true});
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid {} value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev(['Hi'], {withoutStack: {}});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          The second argument must be {withoutStack: true}.
+
+          Instead received {"withoutStack":{}}."
+        `);
+        assertConsoleWarnDev(['Hi'], {withoutStack: true});
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid string value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev(['Hi'], {withoutStack: 'haha'});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          The second argument must be {withoutStack: true}.
+
+          Instead received {"withoutStack":"haha"}."
+        `);
+        assertConsoleWarnDev(['Hi'], {withoutStack: true});
+      });
+
+      // @gate __DEV__
+      it('fails if only warning is not expected to have a stack, but does', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hello\n    in div');
+          assertConsoleWarnDev(['Hello'], {withoutStack: true});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Unexpected warning(s) recorded.
+
+          - Expected warnings
+          + Received warnings
+
+          - Hello
+          + Hello     in div (at **)"
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if warnings are not expected to have a stack, but some do', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Good day');
+          console.warn('Bye\n    in div');
+          assertConsoleWarnDev(['Hello', 'Good day', 'Bye'], {
+            withoutStack: true,
+          });
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Unexpected warning(s) recorded.
+
+          - Expected warnings
+          + Received warnings
+
+          - Hello
+          + Hello     in div (at **)
+            Good day
+          - Bye
+          + Bye     in div (at **)"
+        `);
+      });
+    });
+    describe('local withoutStack', () => {
+      it('passes when expected withoutStack logs matches the actual logs', () => {
+        if (__DEV__) {
+          console.warn('Hello\n    in div');
+          console.warn('Good day');
+          console.warn('Bye\n    in div');
+        }
+        assertConsoleWarnDev([
+          'Hello\n    in div',
+          ['Good day', {withoutStack: true}],
+          'Bye\n    in div',
+        ]);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid null value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev([['Hi', {withoutStack: null}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":null}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid {} value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev([['Hi', {withoutStack: {}}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":{}}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid string value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev([['Hi', {withoutStack: 'haha'}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":"haha"}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid number value', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hi');
+          assertConsoleWarnDev([['Hi', {withoutStack: 4}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":4}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if you forget to wrap local withoutStack in array', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Bye\n    in div');
+          assertConsoleWarnDev(['Hello', {withoutStack: true}, 'Bye']);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Did you forget to wrap a log with withoutStack in an array?
+
+          The expected message for assertConsoleWarnDev() must be a string or an array of length 2.
+
+          Instead received {"withoutStack":true}."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if you wrap in an array unnecessarily', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hello');
+          assertConsoleWarnDev([['Hello']]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Did you forget to remove the array around the log?
+
+          The expected message for assertConsoleWarnDev() must be a string or an array of length 2, but there's only one item in the array. If this is intentional, remove the extra array."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if only warning is not expected to have a stack, but does', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hello\n    in div');
+          assertConsoleWarnDev([['Hello', {withoutStack: true}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Unexpected warning(s) recorded.
+
+          - Expected warnings
+          + Received warnings
+
+          - Hello
+          + Hello     in div (at **)"
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if warnings are not expected to have a stack, but some do', () => {
+        const message = expectToThrowFailure(() => {
+          console.warn('Hello\n    in div');
+          console.warn('Good day');
+          console.warn('Bye\n    in div');
+          assertConsoleWarnDev([
+            [
+              'Hello',
+              {
+                withoutStack: true,
+              },
+            ],
+            'Good day',
+            [
+              'Bye',
+              {
+                withoutStack: true,
+              },
+            ],
+          ]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleWarnDev(expected)
+
+          Unexpected warning(s) recorded.
+
+          - Expected warnings
+          + Received warnings
+
+          - Hello
+          + Hello     in div (at **)
+            Good day
+          - Bye
+          + Bye     in div (at **)"
+        `);
+      });
+    });
+
+    // @gate __DEV__
+    it('fails if the args is greater than %s argument number', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi %s', 'Sara', 'extra');
+        assertConsoleWarnDev(['Hi'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Hi %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the args is greater than %s argument number for multiple warnings', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi %s', 'Sara', 'extra');
+        console.warn('Bye %s', 'Sara', 'extra');
+        assertConsoleWarnDev(['Hi', 'Bye'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Hi %s"
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Bye %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the %s argument number is greater than args', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi %s');
+        assertConsoleWarnDev(['Hi'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Hi %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the %s argument number is greater than args for multiple warnings', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi %s');
+        console.warn('Bye %s');
+        assertConsoleWarnDev(['Hi', 'Bye'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Hi %s"
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Bye %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if component stack is passed twice', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi %s%s', '\n    in div', '\n    in div');
+        assertConsoleWarnDev(['Hi \n    in div (at **)']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+          Hi      in div (at **)
+        +     in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if multiple logs pass component stack twice', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi %s%s', '\n    in div', '\n    in div');
+        console.warn('Bye %s%s', '\n    in div', '\n    in div');
+        assertConsoleWarnDev([
+          'Hi \n    in div (at **)',
+          'Bye \n    in div (at **)',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Unexpected warning(s) recorded.
+
+        - Expected warnings
+        + Received warnings
+
+          Hi      in div (at **)
+        +     in div (at **)
+          Bye      in div (at **)
+        +     in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if multiple strings are passed without an array wrapper for single log', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev('Hi', 'Bye');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+      assertConsoleWarnDev(['Hi \n    in div', 'Bye \n    in div']);
+    });
+
+    // @gate __DEV__
+    it('fails if multiple strings are passed without an array wrapper for multiple logs', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev('Hi', 'Bye');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+      assertConsoleWarnDev(['Hi \n    in div', 'Bye \n    in div']);
+    });
+
+    // @gate __DEV__
+    it('fails on more than two arguments', () => {
+      const message = expectToThrowFailure(() => {
+        console.warn('Hi \n    in div');
+        console.warn('Wow \n    in div');
+        console.warn('Bye \n    in div');
+        assertConsoleWarnDev('Hi', undefined, 'Bye');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleWarnDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+      assertConsoleWarnDev([
+        'Hi \n    in div',
+        'Wow \n    in div',
+        'Bye \n    in div',
+      ]);
+    });
+
+    it('should fail if waitFor is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      console.warn('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitFor(['foo', 'bar']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.warn was called without assertConsoleWarnDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+    });
+
+    it('should fail if waitForThrow is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      function BadRender() {
+        throw new Error('Oh no!');
+      }
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <BadRender />
+            <Yield id="C" />
+            <Yield id="D" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App />);
+
+      console.warn('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForThrow('Oh no!');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.warn was called without assertConsoleWarnDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['A', 'B', 'A', 'B']);
+    });
+
+    it('should fail if waitForPaint is called before asserting', async () => {
+      function App({prop}) {
+        const deferred = useDeferredValue(prop);
+        const text = `Urgent: ${prop}, Deferred: ${deferred}`;
+        Scheduler.log(text);
+        return text;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App prop="A" />);
+
+      await waitForAll(['Urgent: A, Deferred: A']);
+      expect(root).toMatchRenderedOutput('Urgent: A, Deferred: A');
+
+      // This update will result in two separate paints: an urgent one, and a
+      // deferred one.
+      root.render(<App prop="B" />);
+
+      console.warn('Not asserted');
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForPaint(['Urgent: B, Deferred: A']);
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.warn was called without assertConsoleWarnDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['Urgent: B, Deferred: A', 'Urgent: B, Deferred: B']);
+    });
+
+    it('should fail if waitForAll is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      console.warn('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForAll(['foo', 'bar', 'baz']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.warn was called without assertConsoleWarnDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+    });
+    it('should fail if toMatchRenderedOutput is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        console.warn('Not asserted');
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      assertLog([]);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+      const message = expectToThrowFailure(() => {
+        expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+      });
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.warn was called without assertConsoleWarnDev:
+          + Not asserted
+          + Not asserted
+          + Not asserted
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.warn was called without assertConsoleWarnDev:
+          + Not asserted%s,
+          +     in Yield (at **)
+          + Not asserted%s,
+          +     in Yield (at **)
+          + Not asserted%s,
+          +     in Yield (at **)
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      }
+
+      expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+    });
+  });
+
+  describe('assertConsoleErrorDev', () => {
+    it('passes if an error contains a stack', () => {
+      if (__DEV__) {
+        console.error('Hello\n    in div');
+      }
+      assertConsoleErrorDev(['Hello\n    in div']);
+    });
+
+    it('passes if all errors contain a stack', () => {
+      if (__DEV__) {
+        console.error('Hello\n    in div');
+        console.error('Good day\n    in div');
+        console.error('Bye\n    in div');
+      }
+      assertConsoleErrorDev([
+        'Hello\n    in div',
+        'Good day\n    in div',
+        'Bye\n    in div',
+      ]);
+    });
+
+    it('fails if act is called without assertConsoleErrorDev', async () => {
+      const Yield = ({id}) => {
+        console.error(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToThrowFailure(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.error was called without assertConsoleErrorDev:
+          + A
+          + B
+          + C
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+                  "asserConsoleLogsCleared(expected)
+
+                  console.error was called without assertConsoleErrorDev:
+                  + A%s,
+                  +     in App (at **)
+                  + B%s,
+                  +     in App (at **)
+                  + C%s,
+                  +     in App (at **)
+
+                  You must call one of the assertConsoleDev helpers between each act call."
+              `);
+      }
+    });
+
+    it('fails if act is called without any assertConsoleDev helpers', async () => {
+      const Yield = ({id}) => {
+        console.log(id);
+        console.warn(id);
+        console.error(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToThrowFailure(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.log was called without assertConsoleLogDev:
+          + A
+          + B
+          + C
+
+          console.warn was called without assertConsoleWarnDev:
+          + A
+          + B
+          + C
+
+          console.error was called without assertConsoleErrorDev:
+          + A
+          + B
+          + C
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+                  "asserConsoleLogsCleared(expected)
+
+                  console.log was called without assertConsoleLogDev:
+                  + A
+                  + B
+                  + C
+
+                  console.warn was called without assertConsoleWarnDev:
+                  + A%s,
+                  +     in App (at **)
+                  + B%s,
+                  +     in App (at **)
+                  + C%s,
+                  +     in App (at **)
+
+                  console.error was called without assertConsoleErrorDev:
+                  + A%s,
+                  +     in App (at **)
+                  + B%s,
+                  +     in App (at **)
+                  + C%s,
+                  +     in App (at **)
+
+                  You must call one of the assertConsoleDev helpers between each act call."
+              `);
+      }
+    });
+
+    // @gate __DEV__
+    it('fails if first expected error is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Wow \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+        - Hi
+        - Wow
+        - Bye
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle expected error is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev(['Hi', 'Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+        - Hi
+        - Wow
+        - Bye
+        + Hi      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last expected error is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Wow \n    in div');
+        assertConsoleErrorDev([
+          'Hi \n    in div',
+          'Wow \n    in div',
+          'Bye \n    in div',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Expected error was not recorded.
+
+        - Expected errors
+        + Received errors
+
+        - Hi      in div
+        - Wow      in div
+        - Bye      in div
+        + Hi      in div (at **)
+        + Wow      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if first received error is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Wow \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev(['Wow', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+        - Wow
+        - Bye
+        + Hi      in div (at **)
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if middle received error is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Wow \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev(['Hi', 'Bye']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+        - Hi
+        - Bye
+        + Hi      in div (at **)
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last received error is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Wow \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev(['Hi', 'Wow']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+        - Hi
+        - Wow
+        + Hi      in div (at **)
+        + Wow      in div (at **)
+        + Bye      in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if last received error containing "undefined" is not included', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi');
+        console.error(
+          "TypeError: Cannot read properties of undefined (reading 'stack')\n" +
+            '    in Foo (at **)'
+        );
+        assertConsoleErrorDev([['Hi', {withoutStack: true}]]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+          Hi
+        + TypeError: Cannot read properties of undefined (reading 'stack')     in Foo (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('regression: checks entire string, not just the first letter', async () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Message that happens to contain a "T"\n    in div');
+
+        assertConsoleErrorDev([
+          'This is a completely different message that happens to start with "T"',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+        - This is a completely different message that happens to start with "T"
+        + Message that happens to contain a "T"     in div (at **)"
+      `);
+    });
+
+    describe('global withoutStack', () => {
+      it('passes if errors without stack explicitly opt out', () => {
+        if (__DEV__) {
+          console.error('Hello');
+        }
+        assertConsoleErrorDev(['Hello'], {withoutStack: true});
+
+        if (__DEV__) {
+          console.error('Hello');
+          console.error('Good day');
+          console.error('Bye');
+        }
+
+        assertConsoleErrorDev(['Hello', 'Good day', 'Bye'], {
+          withoutStack: true,
+        });
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid null value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev(['Hi'], {withoutStack: null});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          The second argument must be {withoutStack: true}.
+
+          Instead received {"withoutStack":null}."
+        `);
+        assertConsoleErrorDev(['Hi'], {withoutStack: true});
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid {} value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev(['Hi'], {withoutStack: {}});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          The second argument must be {withoutStack: true}.
+
+          Instead received {"withoutStack":{}}."
+        `);
+        assertConsoleErrorDev(['Hi'], {withoutStack: true});
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid string value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev(['Hi'], {withoutStack: 'haha'});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          The second argument must be {withoutStack: true}.
+
+          Instead received {"withoutStack":"haha"}."
+        `);
+        assertConsoleErrorDev(['Hi'], {withoutStack: true});
+      });
+
+      // @gate __DEV__
+      it('fails if only error is not expected to have a stack, but does', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hello\n    in div');
+          assertConsoleErrorDev(['Hello'], {withoutStack: true});
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Unexpected error(s) recorded.
+
+          - Expected errors
+          + Received errors
+
+          - Hello
+          + Hello     in div (at **)"
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if errors are not expected to have a stack, but some do', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hello\n    in div');
+          console.error('Good day');
+          console.error('Bye\n    in div');
+          assertConsoleErrorDev(['Hello', 'Good day', 'Bye'], {
+            withoutStack: true,
+          });
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Unexpected error(s) recorded.
+
+          - Expected errors
+          + Received errors
+
+          - Hello
+          + Hello     in div (at **)
+            Good day
+          - Bye
+          + Bye     in div (at **)"
+        `);
+      });
+    });
+    describe('local withoutStack', () => {
+      it('passes when expected withoutStack logs matches the actual logs', () => {
+        if (__DEV__) {
+          console.error('Hello\n    in div');
+          console.error('Good day');
+          console.error('Bye\n    in div');
+        }
+        assertConsoleErrorDev([
+          'Hello\n    in div',
+          ['Good day', {withoutStack: true}],
+          'Bye\n    in div',
+        ]);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid null value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev([['Hi', {withoutStack: null}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":null}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid {} value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev([['Hi', {withoutStack: {}}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":{}}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid string value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev([['Hi', {withoutStack: 'haha'}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":"haha"}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if withoutStack is invalid number value', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hi');
+          assertConsoleErrorDev([['Hi', {withoutStack: 4}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Log entries that are arrays must be of the form [string, {withoutStack: true}]
+
+          Instead received [string, {"withoutStack":4}]."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if you forget to wrap local withoutStack in array', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hello\n    in div');
+          console.error('Bye\n    in div');
+          assertConsoleErrorDev(['Hello', {withoutStack: true}, 'Bye']);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Did you forget to wrap a log with withoutStack in an array?
+
+          The expected message for assertConsoleErrorDev() must be a string or an array of length 2.
+
+          Instead received {"withoutStack":true}."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if you wrap in an array unnecessarily', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hello');
+          assertConsoleErrorDev([['Hello']]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Did you forget to remove the array around the log?
+
+          The expected message for assertConsoleErrorDev() must be a string or an array of length 2, but there's only one item in the array. If this is intentional, remove the extra array."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if only error is not expected to have a stack, but does', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hello\n    in div');
+          assertConsoleErrorDev([['Hello', {withoutStack: true}]]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Unexpected error(s) recorded.
+
+          - Expected errors
+          + Received errors
+
+          - Hello
+          + Hello     in div (at **)"
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if errors are not expected to have a stack, but some do', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Hello\n    in div');
+          console.error('Good day');
+          console.error('Bye\n    in div');
+          assertConsoleErrorDev([
+            [
+              'Hello',
+              {
+                withoutStack: true,
+              },
+            ],
+            'Good day',
+            [
+              'Bye',
+              {
+                withoutStack: true,
+              },
+            ],
+          ]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Unexpected error(s) recorded.
+
+          - Expected errors
+          + Received errors
+
+          - Hello
+          + Hello     in div (at **)
+            Good day
+          - Bye
+          + Bye     in div (at **)"
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails with a helpful error message if the expected error message mismatches', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Bye\n    in div');
+          assertConsoleErrorDev([
+            [
+              'Hello',
+              {
+                withoutStack: true,
+              },
+            ],
+          ]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Unexpected error(s) recorded.
+
+          - Expected errors
+          + Received errors
+
+          - Hello
+          + Bye     in div (at **)"
+        `);
+      });
+    });
+
+    // @gate __DEV__
+    it('fails if the args is greater than %s argument number', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi %s', 'Sara', 'extra');
+        assertConsoleErrorDev(['Hi'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Hi %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the args is greater than %s argument number for multiple errors', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi %s', 'Sara', 'extra');
+        console.error('Bye %s', 'Sara', 'extra');
+        assertConsoleErrorDev(['Hi', 'Bye'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Hi %s"
+
+        Received 2 arguments for a message with 1 placeholders:
+          "Bye %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the %s argument number is greater than args', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi %s');
+        assertConsoleErrorDev(['Hi'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Hi %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if the %s argument number is greater than args for multiple errors', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi %s');
+        console.error('Bye %s');
+        assertConsoleErrorDev(['Hi', 'Bye'], {withoutStack: true});
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Hi %s"
+
+        Received 0 arguments for a message with 1 placeholders:
+          "Bye %s""
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if component stack is passed twice', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi %s%s', '\n    in div', '\n    in div');
+        assertConsoleErrorDev(['Hi \n    in div (at **)']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+          Hi      in div (at **)
+        +     in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if multiple logs pass component stack twice', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi %s%s', '\n    in div', '\n    in div');
+        console.error('Bye %s%s', '\n    in div', '\n    in div');
+        assertConsoleErrorDev([
+          'Hi \n    in div (at **)',
+          'Bye \n    in div (at **)',
+        ]);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Unexpected error(s) recorded.
+
+        - Expected errors
+        + Received errors
+
+          Hi      in div (at **)
+        +     in div (at **)
+          Bye      in div (at **)
+        +     in div (at **)"
+      `);
+    });
+
+    // @gate __DEV__
+    it('fails if multiple strings are passed without an array wrapper for single log', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev('Hi \n    in div', 'Bye \n    in div');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+      assertConsoleErrorDev(['Hi \n    in div', 'Bye \n    in div']);
+    });
+
+    // @gate __DEV__
+    it('fails if multiple strings are passed without an array wrapper for multiple logs', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev('Hi', 'Bye');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+      assertConsoleErrorDev(['Hi \n    in div', 'Bye \n    in div']);
+    });
+
+    // @gate __DEV__
+    it('fails on more than two arguments', () => {
+      const message = expectToThrowFailure(() => {
+        console.error('Hi \n    in div');
+        console.error('Wow \n    in div');
+        console.error('Bye \n    in div');
+        assertConsoleErrorDev('Hi', undefined, 'Bye');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "assertConsoleErrorDev(expected)
+
+        Expected messages should be an array of strings but was given type "string"."
+      `);
+      assertConsoleErrorDev([
+        'Hi \n    in div',
+        'Wow \n    in div',
+        'Bye \n    in div',
+      ]);
+    });
+
+    describe('in <stack> placeholder', () => {
+      // @gate __DEV__
+      it('fails if `in <stack>` is used for a component stack instead of an error stack', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Warning message\n    in div');
+          assertConsoleErrorDev(['Warning message\n    in <stack>']);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Incorrect use of \\n    in <stack> placeholder. The placeholder is for JavaScript Error stack traces (messages starting with "Error:"), not for React component stacks.
+
+          Expected: "Warning message
+              in <stack>"
+          Received: "Warning message
+              in div (at **)"
+
+          If this error has a component stack, include the full component stack in your expected message (e.g., "Warning message\\n    in ComponentName (at **)")."
+        `);
+      });
+
+      // @gate __DEV__
+      it('fails if `in <stack>` is used for multiple component stacks', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('First warning\n    in span');
+          console.error('Second warning\n    in div');
+          assertConsoleErrorDev([
+            'First warning\n    in <stack>',
+            'Second warning\n    in <stack>',
+          ]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Incorrect use of \\n    in <stack> placeholder. The placeholder is for JavaScript Error stack traces (messages starting with "Error:"), not for React component stacks.
+
+          Expected: "First warning
+              in <stack>"
+          Received: "First warning
+              in span (at **)"
+
+          If this error has a component stack, include the full component stack in your expected message (e.g., "Warning message\\n    in ComponentName (at **)").
+
+          Incorrect use of \\n    in <stack> placeholder. The placeholder is for JavaScript Error stack traces (messages starting with "Error:"), not for React component stacks.
+
+          Expected: "Second warning
+              in <stack>"
+          Received: "Second warning
+              in div (at **)"
+
+          If this error has a component stack, include the full component stack in your expected message (e.g., "Warning message\\n    in ComponentName (at **)")."
+        `);
+      });
+
+      it('allows `in <stack>` for actual error stack traces', () => {
+        // This should pass - \n    in <stack> is correctly used for an error stack
+        console.error(new Error('Something went wrong'));
+        assertConsoleErrorDev(['Error: Something went wrong\n    in <stack>']);
+      });
+
+      // @gate __DEV__
+      it('fails if error stack trace is present but \\n    in <stack> is not expected', () => {
+        const message = expectToThrowFailure(() => {
+          console.error(new Error('Something went wrong'));
+          assertConsoleErrorDev(['Error: Something went wrong']);
+        });
+        expect(message).toMatch(`Unexpected error stack trace for:`);
+        expect(message).toMatch(`Error: Something went wrong`);
+        expect(message).toMatch(
+          'If this error should include an error stack trace, add \\n    in <stack> to your expected message'
+        );
+      });
+
+      // @gate __DEV__
+      it('fails if `in <stack>` is expected but no stack is present', () => {
+        const message = expectToThrowFailure(() => {
+          console.error('Error: Something went wrong');
+          assertConsoleErrorDev([
+            'Error: Something went wrong\n    in <stack>',
+          ]);
+        });
+        expect(message).toMatchInlineSnapshot(`
+          "assertConsoleErrorDev(expected)
+
+          Missing error stack trace for:
+            "Error: Something went wrong"
+
+          The expected message uses \\n    in <stack> but the actual error doesn't include an error stack trace.
+          If this error should not have an error stack trace, remove \\n    in <stack> from your expected message."
+        `);
+      });
+    });
+
+    describe('[Environment] placeholder', () => {
+      // @gate __DEV__
+      it('expands [Server] to ANSI escape sequence for server badge', () => {
+        const badge = '\u001b[0m\u001b[7m Server \u001b[0m';
+        console.error(badge + 'Error: something went wrong');
+        assertConsoleErrorDev([
+          ['[Server] Error: something went wrong', {withoutStack: true}],
+        ]);
+      });
+
+      // @gate __DEV__
+      it('expands [Prerender] to ANSI escape sequence for server badge', () => {
+        const badge = '\u001b[0m\u001b[7m Prerender \u001b[0m';
+        console.error(badge + 'Error: something went wrong');
+        assertConsoleErrorDev([
+          ['[Prerender] Error: something went wrong', {withoutStack: true}],
+        ]);
+      });
+
+      // @gate __DEV__
+      it('expands [Cache] to ANSI escape sequence for server badge', () => {
+        const badge = '\u001b[0m\u001b[7m Cache \u001b[0m';
+        console.error(badge + 'Error: something went wrong');
+        assertConsoleErrorDev([
+          ['[Cache] Error: something went wrong', {withoutStack: true}],
+        ]);
+      });
+    });
+
+    it('should fail if waitFor is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      console.error('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitFor(['foo', 'bar']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.error was called without assertConsoleErrorDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+    });
+
+    it('should fail if waitForThrow is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      function BadRender() {
+        throw new Error('Oh no!');
+      }
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <BadRender />
+            <Yield id="C" />
+            <Yield id="D" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App />);
+
+      console.error('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForThrow('Oh no!');
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.error was called without assertConsoleErrorDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['A', 'B', 'A', 'B']);
+    });
+
+    it('should fail if waitForPaint is called before asserting', async () => {
+      function App({prop}) {
+        const deferred = useDeferredValue(prop);
+        const text = `Urgent: ${prop}, Deferred: ${deferred}`;
+        Scheduler.log(text);
+        return text;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App prop="A" />);
+
+      await waitForAll(['Urgent: A, Deferred: A']);
+      expect(root).toMatchRenderedOutput('Urgent: A, Deferred: A');
+
+      // This update will result in two separate paints: an urgent one, and a
+      // deferred one.
+      root.render(<App prop="B" />);
+
+      console.error('Not asserted');
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForPaint(['Urgent: B, Deferred: A']);
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.error was called without assertConsoleErrorDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['Urgent: B, Deferred: A', 'Urgent: B, Deferred: B']);
+    });
+
+    it('should fail if waitForAll is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      console.error('Not asserted');
+
+      const message = await awaitExpectToThrowFailure(async () => {
+        await waitForAll(['foo', 'bar', 'baz']);
+      });
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.error was called without assertConsoleErrorDev:
+        + Not asserted
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+    });
+    it('should fail if toMatchRenderedOutput is called before asserting', async () => {
+      const Yield = ({id}) => {
+        Scheduler.log(id);
+        console.error('Not asserted');
+        return id;
+      };
+
+      const root = ReactNoop.createRoot();
+      startTransition(() => {
+        root.render(
+          <div>
+            <Yield id="foo" />
+            <Yield id="bar" />
+            <Yield id="baz" />
+          </div>
+        );
+      });
+
+      assertLog([]);
+
+      await waitForAll(['foo', 'bar', 'baz']);
+      const message = expectToThrowFailure(() => {
+        expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+      });
+      if (!__DEV__) {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.error was called without assertConsoleErrorDev:
+          + Not asserted
+          + Not asserted
+          + Not asserted
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      } else {
+        expect(message).toMatchInlineSnapshot(`
+          "asserConsoleLogsCleared(expected)
+
+          console.error was called without assertConsoleErrorDev:
+          + Not asserted%s,
+          +     in Yield (at **)
+          + Not asserted%s,
+          +     in Yield (at **)
+          + Not asserted%s,
+          +     in Yield (at **)
+
+          You must call one of the assertConsoleDev helpers between each act call."
+        `);
+      }
+
+      expect(root).toMatchRenderedOutput(<div>foobarbaz</div>);
+    });
+  });
+});
diff --git a/packages/internal-test-utils/__tests__/ReactInternalTestUtilsDOM-test.js b/packages/internal-test-utils/__tests__/ReactInternalTestUtilsDOM-test.js
new file mode 100644
index 00000000000..6fe3aede714
--- /dev/null
+++ b/packages/internal-test-utils/__tests__/ReactInternalTestUtilsDOM-test.js
@@ -0,0 +1,566 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let Scheduler;
+let ReactDOMClient;
+let simulateEventDispatch;
+let assertLog;
+
+describe('ReactInternalTestUtilsDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    act = require('internal-test-utils').act;
+    simulateEventDispatch =
+      require('internal-test-utils').simulateEventDispatch;
+    Scheduler = require('scheduler/unstable_mock');
+    ReactDOMClient = require('react-dom/client');
+    React = require('react');
+    assertLog = require('internal-test-utils').assertLog;
+  });
+
+  describe('simulateEventDispatch', () => {
+    it('should batch discrete capture events', async () => {
+      let childRef;
+      function Component() {
+        const [state, setState] = React.useState(0);
+        Scheduler.log(`Render ${state}`);
+        return (
+          <div
+            onClickCapture={() => {
+              queueMicrotask(() => {
+                Scheduler.log('Parent microtask');
+              });
+              setState(1);
+              Scheduler.log('onClickCapture parent');
+            }}>
+            <button
+              ref={ref => (childRef = ref)}
+              onClickCapture={() => {
+                queueMicrotask(() => {
+                  Scheduler.log('Child microtask');
+                });
+                setState(2);
+                Scheduler.log('onClickCapture child');
+              }}
+            />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render 0']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef, 'click');
+      });
+
+      // Capture runs on every event we dispatch,
+      // which means we get two for the parent, and one for the child.
+      assertLog([
+        'onClickCapture parent',
+        'onClickCapture child',
+        'Parent microtask',
+        'Render 2',
+        'Child microtask',
+      ]);
+
+      document.body.removeChild(container);
+    });
+
+    it('should batch continuous capture events', async () => {
+      let childRef;
+      function Component() {
+        const [state, setState] = React.useState(0);
+        Scheduler.log(`Render ${state}`);
+        return (
+          <div
+            onMouseOutCapture={() => {
+              queueMicrotask(() => {
+                Scheduler.log('Parent microtask');
+              });
+              setState(1);
+              Scheduler.log('onMouseOutCapture parent');
+            }}>
+            <button
+              ref={ref => (childRef = ref)}
+              onMouseOutCapture={() => {
+                queueMicrotask(() => {
+                  Scheduler.log('Child microtask');
+                });
+                setState(2);
+                Scheduler.log('onMouseOutCapture child');
+              }}
+            />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render 0']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef, 'mouseout');
+      });
+
+      assertLog([
+        'onMouseOutCapture parent',
+        'onMouseOutCapture child',
+        'Parent microtask',
+        'Child microtask',
+        'Render 2',
+      ]);
+    });
+
+    it('should batch bubbling discrete events', async () => {
+      let childRef;
+      function Component() {
+        const [state, setState] = React.useState(0);
+        Scheduler.log(`Render ${state}`);
+        return (
+          <div
+            onClick={() => {
+              queueMicrotask(() => {
+                Scheduler.log('Parent microtask');
+              });
+              setState(1);
+              Scheduler.log('onClick parent');
+            }}>
+            <button
+              ref={ref => (childRef = ref)}
+              onClick={() => {
+                queueMicrotask(() => {
+                  Scheduler.log('Child microtask');
+                });
+                setState(2);
+                Scheduler.log('onClick child');
+              }}
+            />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render 0']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef, 'click');
+      });
+
+      assertLog([
+        'onClick child',
+        'onClick parent',
+        'Child microtask',
+        'Render 1',
+        'Parent microtask',
+      ]);
+    });
+
+    it('should batch bubbling continuous events', async () => {
+      let childRef;
+      function Component() {
+        const [state, setState] = React.useState(0);
+        Scheduler.log(`Render ${state}`);
+        return (
+          <div
+            onMouseOut={() => {
+              queueMicrotask(() => {
+                Scheduler.log('Parent microtask');
+              });
+              setState(1);
+              Scheduler.log('onMouseOut parent');
+            }}>
+            <button
+              ref={ref => (childRef = ref)}
+              onMouseOut={() => {
+                queueMicrotask(() => {
+                  Scheduler.log('Child microtask');
+                });
+                setState(2);
+                Scheduler.log('onMouseOut child');
+              }}
+            />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render 0']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef, 'mouseout');
+      });
+
+      assertLog([
+        'onMouseOut child',
+        'onMouseOut parent',
+        'Child microtask',
+        'Parent microtask',
+        'Render 1',
+      ]);
+    });
+
+    it('does not batch discrete events between handlers', async () => {
+      let childRef = React.createRef();
+      function Component() {
+        const [state, setState] = React.useState(0);
+        const parentRef = React.useRef();
+        React.useEffect(() => {
+          function handleParentEvent() {
+            queueMicrotask(() => {
+              Scheduler.log('Parent microtask');
+            });
+            setState(2);
+            Scheduler.log(`Click parent`);
+          }
+
+          function handleChildEvent() {
+            queueMicrotask(() => {
+              Scheduler.log('Child microtask');
+            });
+            setState(1);
+            Scheduler.log(`Click child`);
+          }
+          parentRef.current.addEventListener('click', handleParentEvent);
+
+          childRef.current.addEventListener('click', handleChildEvent);
+
+          return () => {
+            parentRef.current.removeEventListener('click', handleParentEvent);
+
+            childRef.current.removeEventListener('click', handleChildEvent);
+          };
+        });
+
+        Scheduler.log(`Render ${state}`);
+        return (
+          <div ref={parentRef}>
+            <button ref={childRef} />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render 0']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef.current, 'click');
+      });
+
+      assertLog([
+        'Click child',
+        'Child microtask',
+        'Render 1',
+        'Click parent',
+        'Parent microtask',
+        'Render 2',
+      ]);
+    });
+
+    it('should batch continuous events between handlers', async () => {
+      let childRef = React.createRef();
+      function Component() {
+        const [state, setState] = React.useState(0);
+        const parentRef = React.useRef();
+        React.useEffect(() => {
+          function handleChildEvent() {
+            queueMicrotask(() => {
+              Scheduler.log('Child microtask');
+            });
+            setState(1);
+            Scheduler.log(`Mouseout child`);
+          }
+          function handleParentEvent() {
+            queueMicrotask(() => {
+              Scheduler.log('Parent microtask');
+            });
+            setState(2);
+            Scheduler.log(`Mouseout parent`);
+          }
+          parentRef.current.addEventListener('mouseout', handleParentEvent);
+
+          childRef.current.addEventListener('mouseout', handleChildEvent);
+
+          return () => {
+            parentRef.current.removeEventListener(
+              'mouseout',
+              handleParentEvent
+            );
+
+            childRef.current.removeEventListener('mouseout', handleChildEvent);
+          };
+        });
+
+        Scheduler.log(`Render ${state}`);
+        return (
+          <div ref={parentRef}>
+            <button ref={childRef} />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render 0']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef.current, 'mouseout');
+      });
+
+      assertLog([
+        'Mouseout child',
+        'Child microtask',
+        'Mouseout parent',
+        'Parent microtask',
+        'Render 2',
+      ]);
+    });
+
+    it('should flush discrete events between handlers from different roots', async () => {
+      const childContainer = document.createElement('div');
+      const parentContainer = document.createElement('main');
+
+      const childRoot = ReactDOMClient.createRoot(childContainer);
+      const parentRoot = ReactDOMClient.createRoot(parentContainer);
+      let childSetState;
+
+      function Parent() {
+        // eslint-disable-next-line no-unused-vars
+        const [state, _] = React.useState('Parent');
+        const handleClick = () => {
+          Promise.resolve().then(() => Scheduler.log('Flush Parent microtask'));
+          childSetState(2);
+          Scheduler.log('Parent click');
+        };
+        return <section onClick={handleClick}>{state}</section>;
+      }
+
+      function Child() {
+        const [state, setState] = React.useState('Child');
+        childSetState = setState;
+        const handleClick = () => {
+          Promise.resolve().then(() => Scheduler.log('Flush Child microtask'));
+          setState(1);
+          Scheduler.log('Child click');
+        };
+        Scheduler.log('Render ' + state);
+        return <span onClick={handleClick}>{state}</span>;
+      }
+
+      await act(() => {
+        childRoot.render(<Child />);
+        parentRoot.render(<Parent />);
+      });
+
+      const childNode = childContainer.firstChild;
+      const parentNode = parentContainer.firstChild;
+
+      parentNode.appendChild(childContainer);
+      document.body.appendChild(parentContainer);
+
+      assertLog(['Render Child']);
+      try {
+        await act(async () => {
+          await simulateEventDispatch(childNode, 'click');
+        });
+
+        // Since discrete events flush in a microtasks, they flush before
+        // the handler for the other root is called, after the microtask
+        // scheduled in the event fires.
+        assertLog([
+          'Child click',
+          'Flush Child microtask',
+          'Render 1',
+          'Parent click',
+          'Flush Parent microtask',
+          'Render 2',
+        ]);
+      } finally {
+        document.body.removeChild(parentContainer);
+      }
+    });
+
+    it('should batch continuous events between handlers from different roots', async () => {
+      const childContainer = document.createElement('div');
+      const parentContainer = document.createElement('main');
+
+      const childRoot = ReactDOMClient.createRoot(childContainer);
+      const parentRoot = ReactDOMClient.createRoot(parentContainer);
+      let childSetState;
+
+      function Parent() {
+        // eslint-disable-next-line no-unused-vars
+        const [state, _] = React.useState('Parent');
+        const handleMouseOut = () => {
+          Promise.resolve().then(() => Scheduler.log('Flush Parent microtask'));
+          childSetState(2);
+          Scheduler.log('Parent mouseout');
+        };
+        return <section onMouseOut={handleMouseOut}>{state}</section>;
+      }
+
+      function Child() {
+        const [state, setState] = React.useState('Child');
+        childSetState = setState;
+        const handleMouseOut = () => {
+          Promise.resolve().then(() => Scheduler.log('Flush Child microtask'));
+          setState(1);
+          Scheduler.log('Child mouseout');
+        };
+        Scheduler.log('Render ' + state);
+        return <span onMouseOut={handleMouseOut}>{state}</span>;
+      }
+
+      await act(() => {
+        childRoot.render(<Child />);
+        parentRoot.render(<Parent />);
+      });
+
+      const childNode = childContainer.firstChild;
+      const parentNode = parentContainer.firstChild;
+
+      parentNode.appendChild(childContainer);
+      document.body.appendChild(parentContainer);
+
+      assertLog(['Render Child']);
+      try {
+        await act(async () => {
+          await simulateEventDispatch(childNode, 'mouseout');
+        });
+
+        // Since continuous events flush in a macrotask, they are batched after
+        // with the handler for the other root, but the microtasks scheduled
+        // in the event handlers still fire in between.
+        assertLog([
+          'Child mouseout',
+          'Flush Child microtask',
+          'Parent mouseout',
+          'Flush Parent microtask',
+          'Render 2',
+        ]);
+      } finally {
+        document.body.removeChild(parentContainer);
+      }
+    });
+
+    it('should fire on nodes removed while dispatching', async () => {
+      let childRef;
+      function Component() {
+        const parentRef = React.useRef();
+        const middleRef = React.useRef();
+        Scheduler.log(`Render`);
+        return (
+          <div
+            ref={parentRef}
+            onClick={() => {
+              Scheduler.log('onMouseOut parent');
+            }}>
+            <div ref={middleRef}>
+              <button
+                ref={ref => (childRef = ref)}
+                onClick={() => {
+                  Scheduler.log('onMouseOut child');
+                  childRef.parentNode.remove();
+                }}
+              />
+            </div>
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef, 'click');
+      });
+
+      assertLog(['onMouseOut child', 'onMouseOut parent']);
+    });
+
+    it('should not fire if node is not in the document', async () => {
+      let childRef;
+      function Component() {
+        Scheduler.log(`Render`);
+        return (
+          <div
+            onMouseOut={() => {
+              Scheduler.log('onMouseOut parent');
+            }}>
+            <button
+              ref={ref => (childRef = ref)}
+              onMouseOut={() => {
+                Scheduler.log('onMouseOut child');
+              }}
+            />
+          </div>
+        );
+      }
+
+      // Do not attach root to document.
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(<Component />);
+      });
+
+      assertLog(['Render']);
+
+      await act(async () => {
+        await simulateEventDispatch(childRef, 'mouseout');
+      });
+
+      // No events flushed, root not in document.
+      assertLog([]);
+    });
+  });
+});
diff --git a/packages/internal-test-utils/consoleMock.js b/packages/internal-test-utils/consoleMock.js
new file mode 100644
index 00000000000..8f33d807e64
--- /dev/null
+++ b/packages/internal-test-utils/consoleMock.js
@@ -0,0 +1,681 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 react-internal/no-production-logging */
+
+const chalk = require('chalk');
+const util = require('util');
+const shouldIgnoreConsoleError = require('./shouldIgnoreConsoleError');
+const shouldIgnoreConsoleWarn = require('./shouldIgnoreConsoleWarn');
+import {diff} from 'jest-diff';
+import {printReceived} from 'jest-matcher-utils';
+
+// Annoying: need to store the log array on the global or it would
+// change reference whenever you call jest.resetModules after patch.
+const loggedErrors = (global.__loggedErrors = global.__loggedErrors || []);
+const loggedWarns = (global.__loggedWarns = global.__loggedWarns || []);
+const loggedLogs = (global.__loggedLogs = global.__loggedLogs || []);
+
+const patchConsoleMethod = (methodName, logged) => {
+  const newMethod = function (format, ...args) {
+    // Ignore uncaught errors reported by jsdom
+    // and React addendums because they're too noisy.
+    if (shouldIgnoreConsoleError(format, args)) {
+      return;
+    }
+
+    // Ignore certain React warnings causing test failures
+    if (methodName === 'warn' && shouldIgnoreConsoleWarn(format)) {
+      return;
+    }
+
+    // Append Component Stacks. Simulates a framework or DevTools appending them.
+    if (
+      typeof format === 'string' &&
+      (methodName === 'error' || methodName === 'warn')
+    ) {
+      const React = require('react');
+
+      // Ideally we could remove this check, but we have some tests like
+      // useSyncExternalStoreShared-test that tests against React 17,
+      // which doesn't have the captureOwnerStack method.
+      if (React.captureOwnerStack) {
+        const stack = React.captureOwnerStack();
+        if (stack) {
+          format += '%s';
+          args.push(stack);
+        }
+      }
+    }
+
+    logged.push([format, ...args]);
+  };
+
+  console[methodName] = newMethod;
+
+  return newMethod;
+};
+
+let logMethod;
+export function patchConsoleMethods({includeLog} = {includeLog: false}) {
+  patchConsoleMethod('error', loggedErrors);
+  patchConsoleMethod('warn', loggedWarns);
+
+  // Only assert console.log isn't called in CI so you can debug tests in DEV.
+  // The matchers will still work in DEV, so you can assert locally.
+  if (includeLog) {
+    logMethod = patchConsoleMethod('log', loggedLogs);
+  }
+}
+
+export function resetAllUnexpectedConsoleCalls() {
+  loggedErrors.length = 0;
+  loggedWarns.length = 0;
+  if (logMethod) {
+    loggedLogs.length = 0;
+  }
+}
+
+export function clearLogs() {
+  const logs = Array.from(loggedLogs);
+  loggedLogs.length = 0;
+  return logs;
+}
+
+export function clearWarnings() {
+  const warnings = Array.from(loggedWarns);
+  loggedWarns.length = 0;
+  return warnings;
+}
+
+export function clearErrors() {
+  const errors = Array.from(loggedErrors);
+  loggedErrors.length = 0;
+  return errors;
+}
+
+export function assertConsoleLogsCleared() {
+  const logs = clearLogs();
+  const warnings = clearWarnings();
+  const errors = clearErrors();
+
+  if (logs.length > 0 || errors.length > 0 || warnings.length > 0) {
+    let message = `${chalk.dim('asserConsoleLogsCleared')}(${chalk.red(
+      'expected',
+    )})\n`;
+
+    if (logs.length > 0) {
+      message += `\nconsole.log was called without assertConsoleLogDev:\n${diff(
+        '',
+        logs.join('\n'),
+        {
+          omitAnnotationLines: true,
+        },
+      )}\n`;
+    }
+
+    if (warnings.length > 0) {
+      message += `\nconsole.warn was called without assertConsoleWarnDev:\n${diff(
+        '',
+        warnings.map(normalizeComponentStack).join('\n'),
+        {
+          omitAnnotationLines: true,
+        },
+      )}\n`;
+    }
+    if (errors.length > 0) {
+      message += `\nconsole.error was called without assertConsoleErrorDev:\n${diff(
+        '',
+        errors.map(normalizeComponentStack).join('\n'),
+        {
+          omitAnnotationLines: true,
+        },
+      )}\n`;
+    }
+
+    message += `\nYou must call one of the assertConsoleDev helpers between each act call.`;
+
+    const error = Error(message);
+    Error.captureStackTrace(error, assertConsoleLogsCleared);
+    throw error;
+  }
+}
+
+function normalizeCodeLocInfo(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  // This special case exists only for the special source location in
+  // ReactElementValidator. That will go away if we remove source locations.
+  str = str.replace(/Check your code at .+?:\d+/g, 'Check your code at **');
+  // V8 format:
+  //  at Component (/path/filename.js:123:45)
+  // React format:
+  //    in Component (at filename.js:123)
+  return str.replace(/\n +(?:at|in) ([^(\[\n]+)[^\n]*/g, function (m, name) {
+    name = name.trim();
+    if (name.endsWith('.render')) {
+      // Class components will have the `render` method as part of their stack trace.
+      // We strip that out in our normalization to make it look more like component stacks.
+      name = name.slice(0, name.length - 7);
+    }
+    name = name.replace(/.*\/([^\/]+):\d+:\d+/, '**/$1:**:**');
+    return '\n    in ' + name + ' (at **)';
+  });
+}
+
+// Expands environment placeholders like [Server] into ANSI escape sequences.
+// This allows test assertions to use a cleaner syntax like "[Server] Error:"
+// instead of the full escape sequence "\u001b[0m\u001b[7m Server \u001b[0mError:"
+function expandEnvironmentPlaceholders(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  // [Environment] -> ANSI escape sequence for environment badge
+  // The format is: reset + inverse + " Environment " + reset
+  return str.replace(
+    /^\[(\w+)] /g,
+    (match, env) => '\u001b[0m\u001b[7m ' + env + ' \u001b[0m',
+  );
+}
+
+// The error stack placeholder that can be used in expected messages
+const ERROR_STACK_PLACEHOLDER = '\n    in <stack>';
+// A marker used to protect the placeholder during normalization
+const ERROR_STACK_PLACEHOLDER_MARKER = '\n    in <__STACK_PLACEHOLDER__>';
+
+// Normalizes expected messages, handling special placeholders
+function normalizeExpectedMessage(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  // Protect the error stack placeholder from normalization
+  // (normalizeCodeLocInfo would add "(at **)" to it)
+  const hasStackPlaceholder = str.includes(ERROR_STACK_PLACEHOLDER);
+  let result = str;
+  if (hasStackPlaceholder) {
+    result = result.replace(
+      ERROR_STACK_PLACEHOLDER,
+      ERROR_STACK_PLACEHOLDER_MARKER,
+    );
+  }
+  result = normalizeCodeLocInfo(result);
+  result = expandEnvironmentPlaceholders(result);
+  if (hasStackPlaceholder) {
+    // Restore the placeholder (remove the "(at **)" that was added)
+    result = result.replace(
+      ERROR_STACK_PLACEHOLDER_MARKER + ' (at **)',
+      ERROR_STACK_PLACEHOLDER,
+    );
+  }
+  return result;
+}
+
+function normalizeComponentStack(entry) {
+  if (
+    typeof entry[0] === 'string' &&
+    entry[0].endsWith('%s') &&
+    isLikelyAComponentStack(entry[entry.length - 1])
+  ) {
+    const clone = entry.slice(0);
+    clone[clone.length - 1] = normalizeCodeLocInfo(entry[entry.length - 1]);
+    return clone;
+  }
+  return entry;
+}
+
+const isLikelyAComponentStack = message =>
+  typeof message === 'string' &&
+  (message.indexOf('<component stack>') > -1 ||
+    message.includes('\n    in ') ||
+    message.includes('\n    at '));
+
+// Error stack traces start with "*Error:" and contain "at" frames with file paths
+// Component stacks contain "in ComponentName" patterns
+// This helps validate that \n    in <stack> is used correctly
+const isLikelyAnErrorStackTrace = message =>
+  typeof message === 'string' &&
+  message.includes('Error:') &&
+  // Has "at" frames typical of error stacks (with file:line:col)
+  /\n\s+at .+\(.*:\d+:\d+\)/.test(message);
+
+export function createLogAssertion(
+  consoleMethod,
+  matcherName,
+  clearObservedErrors,
+) {
+  function logName() {
+    switch (consoleMethod) {
+      case 'log':
+        return 'log';
+      case 'error':
+        return 'error';
+      case 'warn':
+        return 'warning';
+    }
+  }
+
+  return function assertConsoleLog(expectedMessages, options = {}) {
+    if (__DEV__) {
+      // eslint-disable-next-line no-inner-declarations
+      function throwFormattedError(message) {
+        const error = new Error(
+          `${chalk.dim(matcherName)}(${chalk.red(
+            'expected',
+          )})\n\n${message.trim()}`,
+        );
+        Error.captureStackTrace(error, assertConsoleLog);
+        throw error;
+      }
+
+      // Warn about incorrect usage first arg.
+      if (!Array.isArray(expectedMessages)) {
+        throwFormattedError(
+          `Expected messages should be an array of strings ` +
+            `but was given type "${typeof expectedMessages}".`,
+        );
+      }
+
+      // Warn about incorrect usage second arg.
+      if (options != null) {
+        if (typeof options !== 'object' || Array.isArray(options)) {
+          throwFormattedError(
+            `The second argument should be an object. ` +
+              'Did you forget to wrap the messages into an array?',
+          );
+        }
+      }
+
+      const withoutStack = options.withoutStack;
+
+      if (consoleMethod === 'log' && withoutStack !== undefined) {
+        throwFormattedError(
+          `Do not pass withoutStack to assertConsoleLogDev, console.log does not have component stacks.`,
+        );
+      } else if (withoutStack !== undefined && withoutStack !== true) {
+        throwFormattedError(
+          `The second argument must be {withoutStack: true}.` +
+            `\n\nInstead received ${JSON.stringify(options)}.`,
+        );
+      }
+
+      const observedLogs = clearObservedErrors();
+      const receivedLogs = [];
+      const missingExpectedLogs = Array.from(expectedMessages);
+
+      const unexpectedLogs = [];
+      const unexpectedMissingComponentStack = [];
+      const unexpectedIncludingComponentStack = [];
+      const unexpectedMissingErrorStack = [];
+      const unexpectedIncludingErrorStack = [];
+      const logsMismatchingFormat = [];
+      const logsWithExtraComponentStack = [];
+      const stackTracePlaceholderMisuses = [];
+
+      // Loop over all the observed logs to determine:
+      //   - Which expected logs are missing
+      //   - Which received logs are unexpected
+      //   - Which logs have a component stack
+      //   - Which logs have the wrong format
+      //   - Which logs have extra stacks
+      for (let index = 0; index < observedLogs.length; index++) {
+        const log = observedLogs[index];
+        const [format, ...args] = log;
+        const message = util.format(format, ...args);
+
+        // Ignore uncaught errors reported by jsdom
+        // and React addendums because they're too noisy.
+        if (shouldIgnoreConsoleError(format, args)) {
+          return;
+        }
+
+        let expectedMessage;
+        let expectedWithoutStack;
+        const expectedMessageOrArray = expectedMessages[index];
+        if (
+          expectedMessageOrArray != null &&
+          Array.isArray(expectedMessageOrArray)
+        ) {
+          // Should be in the local form assert([['log', {withoutStack: true}]])
+
+          // Some validations for common mistakes.
+          if (expectedMessageOrArray.length === 1) {
+            throwFormattedError(
+              `Did you forget to remove the array around the log?` +
+                `\n\nThe expected message for ${matcherName}() must be a string or an array of length 2, but there's only one item in the array. If this is intentional, remove the extra array.`,
+            );
+          } else if (expectedMessageOrArray.length !== 2) {
+            throwFormattedError(
+              `The expected message for ${matcherName}() must be a string or an array of length 2. ` +
+                `Instead received ${expectedMessageOrArray}.`,
+            );
+          } else if (consoleMethod === 'log') {
+            // We don't expect any console.log calls to have a stack.
+            throwFormattedError(
+              `Do not pass withoutStack to assertConsoleLogDev logs, console.log does not have component stacks.`,
+            );
+          }
+
+          // Format is correct, check the values.
+          const currentExpectedMessage = expectedMessageOrArray[0];
+          const currentExpectedOptions = expectedMessageOrArray[1];
+          if (
+            typeof currentExpectedMessage !== 'string' ||
+            typeof currentExpectedOptions !== 'object' ||
+            currentExpectedOptions.withoutStack !== true
+          ) {
+            throwFormattedError(
+              `Log entries that are arrays must be of the form [string, {withoutStack: true}]` +
+                `\n\nInstead received [${typeof currentExpectedMessage}, ${JSON.stringify(
+                  currentExpectedOptions,
+                )}].`,
+            );
+          }
+
+          expectedMessage = normalizeExpectedMessage(currentExpectedMessage);
+          expectedWithoutStack = expectedMessageOrArray[1].withoutStack;
+        } else if (typeof expectedMessageOrArray === 'string') {
+          expectedMessage = normalizeExpectedMessage(expectedMessageOrArray);
+          // withoutStack: inherit from global option - simplify when withoutStack is removed.
+          if (consoleMethod === 'log') {
+            expectedWithoutStack = true;
+          } else {
+            expectedWithoutStack = withoutStack;
+          }
+        } else if (
+          typeof expectedMessageOrArray === 'object' &&
+          expectedMessageOrArray != null &&
+          expectedMessageOrArray.withoutStack != null
+        ) {
+          // Special case for common case of a wrong withoutStack value.
+          throwFormattedError(
+            `Did you forget to wrap a log with withoutStack in an array?` +
+              `\n\nThe expected message for ${matcherName}() must be a string or an array of length 2.` +
+              `\n\nInstead received ${JSON.stringify(expectedMessageOrArray)}.`,
+          );
+        } else if (expectedMessageOrArray != null) {
+          throwFormattedError(
+            `The expected message for ${matcherName}() must be a string or an array of length 2. ` +
+              `Instead received ${JSON.stringify(expectedMessageOrArray)}.`,
+          );
+        }
+
+        const normalizedMessage = normalizeCodeLocInfo(message);
+        receivedLogs.push(normalizedMessage);
+
+        // Check the number of %s interpolations.
+        // We'll fail the test if they mismatch.
+        let argIndex = 0;
+        // console.* could have been called with a non-string e.g. `console.error(new Error())`
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        String(format).replace(/%s|%c|%o/g, () => argIndex++);
+        if (argIndex !== args.length) {
+          if (format.includes('%c%s')) {
+            // We intentionally use mismatching formatting when printing badging because we don't know
+            // the best default to use for different types because the default varies by platform.
+          } else {
+            logsMismatchingFormat.push({
+              format,
+              args,
+              expectedArgCount: argIndex,
+            });
+          }
+        }
+
+        // Check for extra component stacks
+        if (
+          args.length >= 2 &&
+          isLikelyAComponentStack(args[args.length - 1]) &&
+          isLikelyAComponentStack(args[args.length - 2])
+        ) {
+          logsWithExtraComponentStack.push({
+            format,
+          });
+        }
+
+        // Main logic to check if log is expected, with the component stack.
+        // Check for exact match OR if the message matches with a component stack appended
+        let matchesExpectedMessage = false;
+        let expectsErrorStack = false;
+        const hasErrorStack = isLikelyAnErrorStackTrace(message);
+
+        if (typeof expectedMessage === 'string') {
+          if (normalizedMessage === expectedMessage) {
+            matchesExpectedMessage = true;
+          } else if (expectedMessage.includes('\n    in <stack>')) {
+            expectsErrorStack = true;
+            // \n    in <stack> is ONLY for JavaScript Error stack traces (e.g., "Error: message\n  at fn (file.js:1:2)")
+            // NOT for React component stacks (e.g., "\n    in ComponentName (at **)").
+            // Validate that the actual message looks like an error stack trace.
+            if (!hasErrorStack) {
+              // The actual message doesn't look like an error stack trace.
+              // This is likely a misuse - someone used \n    in <stack> for a component stack.
+              stackTracePlaceholderMisuses.push({
+                expected: expectedMessage,
+                received: normalizedMessage,
+              });
+            }
+
+            const expectedMessageWithoutStack = expectedMessage.replace(
+              '\n    in <stack>',
+              '',
+            );
+            if (normalizedMessage.startsWith(expectedMessageWithoutStack)) {
+              // Remove the stack trace
+              const remainder = normalizedMessage.slice(
+                expectedMessageWithoutStack.length,
+              );
+
+              // After normalization, both error stacks and component stacks look like
+              // component stacks (at frames are converted to "in ... (at **)" format).
+              // So we check isLikelyAComponentStack for matching purposes.
+              if (isLikelyAComponentStack(remainder)) {
+                const messageWithoutStack = normalizedMessage.replace(
+                  remainder,
+                  '',
+                );
+                if (messageWithoutStack === expectedMessageWithoutStack) {
+                  matchesExpectedMessage = true;
+                }
+              } else if (remainder === '') {
+                // \n    in <stack> was expected but there's no stack at all
+                matchesExpectedMessage = true;
+              }
+            } else if (normalizedMessage === expectedMessageWithoutStack) {
+              // \n    in <stack> was expected but actual has no stack at all (exact match without stack)
+              matchesExpectedMessage = true;
+            }
+          } else if (
+            hasErrorStack &&
+            !expectedMessage.includes('\n    in <stack>') &&
+            normalizedMessage.startsWith(expectedMessage)
+          ) {
+            matchesExpectedMessage = true;
+          }
+        }
+
+        if (matchesExpectedMessage) {
+          // withoutStack: Check for unexpected/missing component stacks.
+          // These checks can be simplified when withoutStack is removed.
+          if (isLikelyAComponentStack(normalizedMessage)) {
+            if (expectedWithoutStack === true && !hasErrorStack) {
+              // Only report unexpected component stack if it's not an error stack
+              // (error stacks look like component stacks after normalization)
+              unexpectedIncludingComponentStack.push(normalizedMessage);
+            }
+          } else if (expectedWithoutStack !== true && !expectsErrorStack) {
+            unexpectedMissingComponentStack.push(normalizedMessage);
+          }
+
+          // Check for unexpected/missing error stacks
+          if (hasErrorStack && !expectsErrorStack) {
+            // Error stack is present but \n    in <stack> was not in the expected message
+            unexpectedIncludingErrorStack.push(normalizedMessage);
+          } else if (
+            expectsErrorStack &&
+            !hasErrorStack &&
+            !isLikelyAComponentStack(normalizedMessage)
+          ) {
+            // \n    in <stack> was expected but the actual message doesn't have any stack at all
+            // (if it has a component stack, stackTracePlaceholderMisuses already handles it)
+            unexpectedMissingErrorStack.push(normalizedMessage);
+          }
+
+          // Found expected log, remove it from missing.
+          missingExpectedLogs.splice(0, 1);
+        } else {
+          unexpectedLogs.push(normalizedMessage);
+        }
+      }
+
+      // Helper for pretty printing diffs consistently.
+      // We inline multi-line logs for better diff printing.
+      // eslint-disable-next-line no-inner-declarations
+      function printDiff() {
+        return `${diff(
+          expectedMessages
+            .map(messageOrTuple => {
+              const message = Array.isArray(messageOrTuple)
+                ? messageOrTuple[0]
+                : messageOrTuple;
+              return message.replace('\n', ' ');
+            })
+            .join('\n'),
+          receivedLogs.map(message => message.replace('\n', ' ')).join('\n'),
+          {
+            aAnnotation: `Expected ${logName()}s`,
+            bAnnotation: `Received ${logName()}s`,
+          },
+        )}`;
+      }
+
+      // Wrong %s formatting is a failure.
+      // This is a common mistake when creating new warnings.
+      if (logsMismatchingFormat.length > 0) {
+        throwFormattedError(
+          logsMismatchingFormat
+            .map(
+              item =>
+                `Received ${item.args.length} arguments for a message with ${
+                  item.expectedArgCount
+                } placeholders:\n  ${printReceived(item.format)}`,
+            )
+            .join('\n\n'),
+        );
+      }
+
+      // Any unexpected warnings should be treated as a failure.
+      if (unexpectedLogs.length > 0) {
+        throwFormattedError(
+          `Unexpected ${logName()}(s) recorded.\n\n${printDiff()}`,
+        );
+      }
+
+      // Any remaining messages indicate a failed expectations.
+      if (missingExpectedLogs.length > 0) {
+        throwFormattedError(
+          `Expected ${logName()} was not recorded.\n\n${printDiff()}`,
+        );
+      }
+
+      // Any logs that include a component stack but shouldn't.
+      if (unexpectedIncludingComponentStack.length > 0) {
+        throwFormattedError(
+          `${unexpectedIncludingComponentStack
+            .map(
+              stack =>
+                `Unexpected component stack for:\n  ${printReceived(stack)}`,
+            )
+            .join(
+              '\n\n',
+            )}\n\nIf this ${logName()} should include a component stack, remove {withoutStack: true} from this ${logName()}.` +
+            `\nIf all ${logName()}s should include the component stack, you may need to remove {withoutStack: true} from the ${matcherName} call.`,
+        );
+      }
+
+      // Any logs that are missing a component stack without withoutStack.
+      if (unexpectedMissingComponentStack.length > 0) {
+        throwFormattedError(
+          `${unexpectedMissingComponentStack
+            .map(
+              stack =>
+                `Missing component stack for:\n  ${printReceived(stack)}`,
+            )
+            .join(
+              '\n\n',
+            )}\n\nIf this ${logName()} should omit a component stack, pass [log, {withoutStack: true}].` +
+            `\nIf all ${logName()}s should omit the component stack, add {withoutStack: true} to the ${matcherName} call.`,
+        );
+      }
+
+      // Any logs that include an error stack trace but \n    in <stack> wasn't expected.
+      if (unexpectedIncludingErrorStack.length > 0) {
+        throwFormattedError(
+          `${unexpectedIncludingErrorStack
+            .map(
+              stack =>
+                `Unexpected error stack trace for:\n  ${printReceived(stack)}`,
+            )
+            .join(
+              '\n\n',
+            )}\n\nIf this ${logName()} should include an error stack trace, add \\n    in <stack> to your expected message ` +
+            `(e.g., "Error: message\\n    in <stack>").`,
+        );
+      }
+
+      // Any logs that are missing an error stack trace when \n    in <stack> was expected.
+      if (unexpectedMissingErrorStack.length > 0) {
+        throwFormattedError(
+          `${unexpectedMissingErrorStack
+            .map(
+              stack =>
+                `Missing error stack trace for:\n  ${printReceived(stack)}`,
+            )
+            .join(
+              '\n\n',
+            )}\n\nThe expected message uses \\n    in <stack> but the actual ${logName()} doesn't include an error stack trace.` +
+            `\nIf this ${logName()} should not have an error stack trace, remove \\n    in <stack> from your expected message.`,
+        );
+      }
+
+      // Duplicate component stacks is a failure.
+      // This used to be a common mistake when creating new warnings,
+      // but might not be an issue anymore.
+      if (logsWithExtraComponentStack.length > 0) {
+        throwFormattedError(
+          logsWithExtraComponentStack
+            .map(
+              item =>
+                `Received more than one component stack for a warning:\n  ${printReceived(
+                  item.format,
+                )}`,
+            )
+            .join('\n\n'),
+        );
+      }
+
+      // Using \n    in <stack> for component stacks is a misuse.
+      // \n    in <stack> should only be used for JavaScript Error stack traces,
+      // not for React component stacks.
+      if (stackTracePlaceholderMisuses.length > 0) {
+        throwFormattedError(
+          `${stackTracePlaceholderMisuses
+            .map(
+              item =>
+                `Incorrect use of \\n    in <stack> placeholder. The placeholder is for JavaScript Error ` +
+                `stack traces (messages starting with "Error:"), not for React component stacks.\n\n` +
+                `Expected: ${printReceived(item.expected)}\n` +
+                `Received: ${printReceived(item.received)}\n\n` +
+                `If this ${logName()} has a component stack, include the full component stack in your expected message ` +
+                `(e.g., "Warning message\\n    in ComponentName (at **)").`,
+            )
+            .join('\n\n')}`,
+        );
+      }
+    }
+  };
+}
diff --git a/packages/internal-test-utils/debugInfo.js b/packages/internal-test-utils/debugInfo.js
new file mode 100644
index 00000000000..1bafceb503f
--- /dev/null
+++ b/packages/internal-test-utils/debugInfo.js
@@ -0,0 +1,139 @@
+'use strict';
+
+type DebugInfoConfig = {
+  ignoreProps?: boolean,
+  ignoreRscStreamInfo?: boolean,
+  useFixedTime?: boolean,
+  useV8Stack?: boolean,
+};
+
+function formatV8Stack(stack) {
+  let v8StyleStack = '';
+  if (stack) {
+    for (let i = 0; i < stack.length; i++) {
+      const [name] = stack[i];
+      if (v8StyleStack !== '') {
+        v8StyleStack += '\n';
+      }
+      v8StyleStack += '    in ' + name + ' (at **)';
+    }
+  }
+  return v8StyleStack;
+}
+
+function normalizeStack(stack) {
+  if (!stack) {
+    return stack;
+  }
+  const copy = [];
+  for (let i = 0; i < stack.length; i++) {
+    const [name, file, line, col, enclosingLine, enclosingCol] = stack[i];
+    copy.push([
+      name,
+      file.replace(__REACT_ROOT_PATH_TEST__, ''),
+      line,
+      col,
+      enclosingLine,
+      enclosingCol,
+    ]);
+  }
+  return copy;
+}
+
+function normalizeIOInfo(config: DebugInfoConfig, ioInfo) {
+  const {debugTask, debugStack, debugLocation, ...copy} = ioInfo;
+  if (ioInfo.stack) {
+    copy.stack = config.useV8Stack
+      ? formatV8Stack(ioInfo.stack)
+      : normalizeStack(ioInfo.stack);
+  }
+  if (ioInfo.owner) {
+    copy.owner = normalizeDebugInfo(config, ioInfo.owner);
+  }
+  if (typeof ioInfo.start === 'number' && config.useFixedTime) {
+    copy.start = 0;
+  }
+  if (typeof ioInfo.end === 'number' && config.useFixedTime) {
+    copy.end = 0;
+  }
+  const promise = ioInfo.value;
+  if (promise) {
+    promise.then(); // init
+    if (promise.status === 'fulfilled') {
+      if (ioInfo.name === 'rsc stream') {
+        copy.byteSize = 0;
+        copy.value = {
+          value: 'stream',
+        };
+      } else {
+        copy.value = {
+          value: promise.value,
+        };
+      }
+    } else if (promise.status === 'rejected') {
+      copy.value = {
+        reason: promise.reason,
+      };
+    } else {
+      copy.value = {
+        status: promise.status,
+      };
+    }
+  } else if ('value' in ioInfo) {
+    // If value exists in ioInfo but is undefined (e.g., WeakRef was GC'd),
+    // ensure we still include it in the normalized output for consistency
+    copy.value = {
+      value: undefined,
+    };
+  } else if (ioInfo.name && ioInfo.name !== 'rsc stream') {
+    // For non-rsc-stream IO that doesn't have a value field, add a default.
+    // This handles the case where the server doesn't send the field when WeakRef is GC'd.
+    copy.value = {
+      value: undefined,
+    };
+  }
+  return copy;
+}
+
+function normalizeDebugInfo(config: DebugInfoConfig, original) {
+  const {debugTask, debugStack, debugLocation, ...debugInfo} = original;
+  if (original.owner) {
+    debugInfo.owner = normalizeDebugInfo(config, original.owner);
+  }
+  if (original.awaited) {
+    debugInfo.awaited = normalizeIOInfo(config, original.awaited);
+  }
+  if (debugInfo.props && config.ignoreProps) {
+    debugInfo.props = {};
+  }
+  if (Array.isArray(debugInfo.stack)) {
+    debugInfo.stack = config.useV8Stack
+      ? formatV8Stack(debugInfo.stack)
+      : normalizeStack(debugInfo.stack);
+    return debugInfo;
+  } else if (typeof debugInfo.time === 'number' && config.useFixedTime) {
+    return {...debugInfo, time: 0};
+  } else {
+    return debugInfo;
+  }
+}
+
+export function getDebugInfo(config: DebugInfoConfig, obj) {
+  const debugInfo = obj._debugInfo;
+  if (debugInfo) {
+    const copy = [];
+    for (let i = 0; i < debugInfo.length; i++) {
+      if (
+        debugInfo[i].awaited &&
+        debugInfo[i].awaited.name === 'rsc stream' &&
+        config.ignoreRscStreamInfo
+      ) {
+        // Ignore RSC stream I/O info.
+      } else {
+        copy.push(normalizeDebugInfo(config, debugInfo[i]));
+      }
+    }
+    return copy;
+  }
+  return debugInfo;
+}
diff --git a/packages/internal-test-utils/enqueueTask.js b/packages/internal-test-utils/enqueueTask.js
new file mode 100644
index 00000000000..1edb75a7b18
--- /dev/null
+++ b/packages/internal-test-utils/enqueueTask.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {MessageChannel} = require('node:worker_threads');
+
+export default function enqueueTask(task: () => void): void {
+  const channel = new MessageChannel();
+  // $FlowFixMe[prop-missing]
+  channel.port1.onmessage = () => {
+    channel.port1.close();
+    task();
+  };
+  channel.port2.postMessage(undefined);
+}
diff --git a/packages/internal-test-utils/index.js b/packages/internal-test-utils/index.js
new file mode 100644
index 00000000000..7b6e30be372
--- /dev/null
+++ b/packages/internal-test-utils/index.js
@@ -0,0 +1 @@
+export * from './ReactInternalTestUtils';
diff --git a/packages/internal-test-utils/internalAct.js b/packages/internal-test-utils/internalAct.js
new file mode 100644
index 00000000000..1a420bcf203
--- /dev/null
+++ b/packages/internal-test-utils/internalAct.js
@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// This version of `act` is only used by our tests. Unlike the public version
+// of `act`, it's designed to work identically in both production and
+// development. It may have slightly different behavior from the public
+// version, too, since our constraints in our test suite are not the same as
+// those of developers using React — we're testing React itself, as opposed to
+// building an app with React.
+
+import type {Thenable} from 'shared/ReactTypes';
+
+import * as Scheduler from 'scheduler/unstable_mock';
+
+import enqueueTask from './enqueueTask';
+import {assertConsoleLogsCleared} from './consoleMock';
+import {diff} from 'jest-diff';
+
+export let actingUpdatesScopeDepth: number = 0;
+
+export const thrownErrors: Array<mixed> = [];
+
+async function waitForMicrotasks() {
+  return new Promise(resolve => {
+    enqueueTask(() => resolve());
+  });
+}
+
+function aggregateErrors(errors: Array<mixed>): mixed {
+  if (errors.length > 1 && typeof AggregateError === 'function') {
+    // eslint-disable-next-line no-undef
+    return new AggregateError(errors);
+  }
+  return errors[0];
+}
+
+export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
+  if (Scheduler.unstable_flushUntilNextPaint === undefined) {
+    throw Error(
+      'This version of `act` requires a special mock build of Scheduler.',
+    );
+  }
+
+  const actualYields = Scheduler.unstable_clearLog();
+  if (actualYields.length !== 0) {
+    const error = Error(
+      'Log of yielded values is not empty. Call assertLog first.\n\n' +
+        `Received:\n${diff('', actualYields.join('\n'), {
+          omitAnnotationLines: true,
+        })}`,
+    );
+    Error.captureStackTrace(error, act);
+    throw error;
+  }
+
+  // We require every `act` call to assert console logs
+  // with one of the assertion helpers. Fails if not empty.
+  assertConsoleLogsCleared();
+
+  // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+  if (!jest.isMockFunction(setTimeout)) {
+    throw Error(
+      "This version of `act` requires Jest's timer mocks " +
+        '(i.e. jest.useFakeTimers).',
+    );
+  }
+
+  const previousIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
+  const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
+  actingUpdatesScopeDepth++;
+  if (actingUpdatesScopeDepth === 1) {
+    // Because this is not the "real" `act`, we set this to `false` so React
+    // knows not to fire `act` warnings.
+    global.IS_REACT_ACT_ENVIRONMENT = false;
+  }
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, act);
+
+  // Call the provided scope function after an async gap. This is an extra
+  // precaution to ensure that our tests do not accidentally rely on the act
+  // scope adding work to the queue synchronously. We don't do this in the
+  // public version of `act`, though we maybe should in the future.
+  await waitForMicrotasks();
+
+  const errorHandlerDOM = function (event: ErrorEvent) {
+    // Prevent logs from reprinting this error.
+    event.preventDefault();
+    thrownErrors.push(event.error);
+  };
+  const errorHandlerNode = function (err: mixed) {
+    thrownErrors.push(err);
+  };
+  // We track errors that were logged globally as if they occurred in this scope and then rethrow them.
+  if (actingUpdatesScopeDepth === 1) {
+    if (
+      typeof window === 'object' &&
+      typeof window.addEventListener === 'function'
+    ) {
+      // We're in a JS DOM environment.
+      window.addEventListener('error', errorHandlerDOM);
+    } else if (typeof process === 'object') {
+      // Node environment
+      process.on('uncaughtException', errorHandlerNode);
+    }
+  }
+
+  try {
+    const result = await scope();
+
+    do {
+      // Wait until end of current task/microtask.
+      await waitForMicrotasks();
+
+      // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+      if (jest.isEnvironmentTornDown()) {
+        error.message =
+          'The Jest environment was torn down before `act` completed. This ' +
+          'probably means you forgot to `await` an `act` call.';
+        throw error;
+      }
+
+      if (!Scheduler.unstable_hasPendingWork()) {
+        // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+        const j = jest;
+        if (j.getTimerCount() > 0) {
+          // There's a pending timer. Flush it now. We only do this in order to
+          // force Suspense fallbacks to display; the fact that it's a timer
+          // is an implementation detail. If there are other timers scheduled,
+          // those will also fire now, too, which is not ideal. (The public
+          // version of `act` doesn't do this.) For this reason, we should try
+          // to avoid using timers in our internal tests.
+          j.runAllTicks();
+          j.runOnlyPendingTimers();
+          // If a committing a fallback triggers another update, it might not
+          // get scheduled until a microtask. So wait one more time.
+          await waitForMicrotasks();
+        }
+        if (Scheduler.unstable_hasPendingWork()) {
+          // Committing a fallback scheduled additional work. Continue flushing.
+        } else {
+          // There's no pending work, even after both the microtask queue
+          // and the timer queue are empty. Stop flushing.
+          break;
+        }
+      }
+      // flushUntilNextPaint stops when React yields execution. Allow microtasks
+      // queue to flush before continuing.
+      Scheduler.unstable_flushUntilNextPaint();
+    } while (true);
+
+    if (thrownErrors.length > 0) {
+      // Rethrow any errors logged by the global error handling.
+      const thrownError = aggregateErrors(thrownErrors);
+      thrownErrors.length = 0;
+      throw thrownError;
+    }
+
+    // $FlowFixMe[incompatible-return]
+    return result;
+  } finally {
+    const depth = actingUpdatesScopeDepth;
+    if (depth === 1) {
+      if (
+        typeof window === 'object' &&
+        typeof window.addEventListener === 'function'
+      ) {
+        // We're in a JS DOM environment.
+        window.removeEventListener('error', errorHandlerDOM);
+      } else if (typeof process === 'object') {
+        // Node environment
+        process.off('uncaughtException', errorHandlerNode);
+      }
+      global.IS_REACT_ACT_ENVIRONMENT = previousIsActEnvironment;
+    }
+    actingUpdatesScopeDepth = depth - 1;
+
+    if (actingUpdatesScopeDepth !== previousActingUpdatesScopeDepth) {
+      // if it's _less than_ previousActingUpdatesScopeDepth, then we can
+      // assume the 'other' one has warned
+      Scheduler.unstable_clearLog();
+      error.message =
+        'You seem to have overlapping act() calls, this is not supported. ' +
+        'Be sure to await previous act() calls before making a new one. ';
+      throw error;
+    }
+  }
+}
+
+async function waitForTasksAndTimers(error: Error) {
+  do {
+    // Wait until end of current task/microtask.
+    await waitForMicrotasks();
+
+    // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+    if (jest.isEnvironmentTornDown()) {
+      error.message =
+        'The Jest environment was torn down before `act` completed. This ' +
+        'probably means you forgot to `await` an `act` call.';
+      throw error;
+    }
+
+    // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+    const j = jest;
+    if (j.getTimerCount() > 0) {
+      // There's a pending timer. Flush it now. We only do this in order to
+      // force Suspense fallbacks to display; the fact that it's a timer
+      // is an implementation detail. If there are other timers scheduled,
+      // those will also fire now, too, which is not ideal. (The public
+      // version of `act` doesn't do this.) For this reason, we should try
+      // to avoid using timers in our internal tests.
+      j.runAllTicks();
+      j.runOnlyPendingTimers();
+      // If a committing a fallback triggers another update, it might not
+      // get scheduled until a microtask. So wait one more time.
+      await waitForMicrotasks();
+    } else {
+      break;
+    }
+  } while (true);
+}
+
+export async function serverAct<T>(scope: () => Thenable<T>): Thenable<T> {
+  // We require every `act` call to assert console logs
+  // with one of the assertion helpers. Fails if not empty.
+  assertConsoleLogsCleared();
+
+  // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
+  if (!jest.isMockFunction(setTimeout)) {
+    throw Error(
+      "This version of `act` requires Jest's timer mocks " +
+        '(i.e. jest.useFakeTimers).',
+    );
+  }
+
+  // Create the error object before doing any async work, to get a better
+  // stack trace.
+  const error = new Error();
+  Error.captureStackTrace(error, act);
+
+  // Call the provided scope function after an async gap. This is an extra
+  // precaution to ensure that our tests do not accidentally rely on the act
+  // scope adding work to the queue synchronously. We don't do this in the
+  // public version of `act`, though we maybe should in the future.
+  await waitForMicrotasks();
+
+  const errorHandlerNode = function (err: mixed) {
+    thrownErrors.push(err);
+  };
+  // We track errors that were logged globally as if they occurred in this scope and then rethrow them.
+  if (typeof process === 'object') {
+    // Node environment
+    process.on('uncaughtException', errorHandlerNode);
+  } else if (
+    typeof window === 'object' &&
+    typeof window.addEventListener === 'function'
+  ) {
+    throw new Error('serverAct is not supported in JSDOM environments');
+  }
+
+  try {
+    const promise = scope();
+    // $FlowFixMe[prop-missing]
+    if (promise && typeof promise.catch === 'function') {
+      // $FlowFixMe[incompatible-use]
+      promise.catch(() => {}); // Handle below
+    }
+    // See if we need to do some work to unblock the promise first.
+    await waitForTasksAndTimers(error);
+    const result = await promise;
+    // Then wait to flush the result.
+    await waitForTasksAndTimers(error);
+
+    if (thrownErrors.length > 0) {
+      // Rethrow any errors logged by the global error handling.
+      const thrownError = aggregateErrors(thrownErrors);
+      thrownErrors.length = 0;
+      throw thrownError;
+    }
+
+    // $FlowFixMe[incompatible-return]
+    return result;
+  } finally {
+    if (typeof process === 'object') {
+      // Node environment
+      process.off('uncaughtException', errorHandlerNode);
+    }
+  }
+}
diff --git a/packages/internal-test-utils/package.json b/packages/internal-test-utils/package.json
new file mode 100644
index 00000000000..4748827d800
--- /dev/null
+++ b/packages/internal-test-utils/package.json
@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "internal-test-utils",
+  "version": "0.0.0"
+}
diff --git a/packages/internal-test-utils/shouldIgnoreConsoleError.js b/packages/internal-test-utils/shouldIgnoreConsoleError.js
new file mode 100644
index 00000000000..0b5798d241a
--- /dev/null
+++ b/packages/internal-test-utils/shouldIgnoreConsoleError.js
@@ -0,0 +1,54 @@
+'use strict';
+
+module.exports = function shouldIgnoreConsoleError(format, args) {
+  if (__DEV__) {
+    if (typeof format === 'string') {
+      if (format.startsWith('%c%s')) {
+        // Looks like a badged error message
+        args.splice(0, 3);
+      }
+      if (
+        args[0] != null &&
+        ((typeof args[0] === 'object' &&
+          typeof args[0].message === 'string' &&
+          // This specific log has the same signature as error logging.
+          // The trick is to get rid of this whole file.
+          !format.includes('Failed to serialize an action') &&
+          typeof args[0].stack === 'string') ||
+          (typeof args[0] === 'string' &&
+            args[0].indexOf('An error occurred in ') === 0))
+      ) {
+        // This looks like an error with addendum from ReactFiberErrorLogger.
+        // They are noisy too so we'll try to ignore them.
+        return true;
+      }
+      if (
+        format.indexOf('ReactDOM.render was removed in React 19') !== -1 ||
+        format.indexOf('ReactDOM.hydrate was removed in React 19') !== -1 ||
+        format.indexOf(
+          'ReactDOM.render has not been supported since React 18',
+        ) !== -1 ||
+        format.indexOf(
+          'ReactDOM.hydrate has not been supported since React 18',
+        ) !== -1 ||
+        format.indexOf('react-test-renderer is deprecated.') !== -1
+      ) {
+        // We haven't finished migrating our tests to use createRoot.
+        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;
+};
diff --git a/packages/internal-test-utils/shouldIgnoreConsoleWarn.js b/packages/internal-test-utils/shouldIgnoreConsoleWarn.js
new file mode 100644
index 00000000000..cde6264e013
--- /dev/null
+++ b/packages/internal-test-utils/shouldIgnoreConsoleWarn.js
@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function shouldIgnoreConsoleWarn(format) {
+  return false;
+};
diff --git a/packages/internal-test-utils/simulateBrowserEventDispatch.js b/packages/internal-test-utils/simulateBrowserEventDispatch.js
new file mode 100644
index 00000000000..4dcf916a1d1
--- /dev/null
+++ b/packages/internal-test-utils/simulateBrowserEventDispatch.js
@@ -0,0 +1,391 @@
+const DOMException = require('domexception/webidl2js-wrapper');
+const {nodeRoot} = require('jsdom/lib/jsdom/living/helpers/node');
+const reportException = require('jsdom/lib/jsdom/living/helpers/runtime-script-errors');
+const {
+  isNode,
+  isShadowRoot,
+  isSlotable,
+  getEventTargetParent,
+  isShadowInclusiveAncestor,
+  retarget,
+} = require('jsdom/lib/jsdom/living/helpers/shadow-dom');
+
+const {waitForMicrotasks} = require('./ReactInternalTestUtils');
+
+const EVENT_PHASE = {
+  NONE: 0,
+  CAPTURING_PHASE: 1,
+  AT_TARGET: 2,
+  BUBBLING_PHASE: 3,
+};
+
+// Hack to get Symbol(wrapper) for target nodes.
+let wrapperSymbol;
+function wrapperForImpl(impl) {
+  if (impl == null) {
+    return null;
+  }
+
+  return impl[wrapperSymbol];
+}
+
+// This is a forked implementation of the jsdom dispatchEvent. The goal of
+// this fork is to match the actual browser behavior of user events more closely.
+// Real browser events yield to microtasks in-between event handlers, which is
+// different from programmatically calling dispatchEvent (which does not yield).
+// JSDOM correctly implements programmatic dispatchEvent, but sometimes we need
+// to test the behavior of real user interactions, so we simulate it.
+//
+// It's async because we need to wait for microtasks between event handlers.
+//
+// Taken from:
+// https://github.com/jsdom/jsdom/blob/2f8a7302a43fff92f244d5f3426367a8eb2b8896/lib/jsdom/living/events/EventTarget-impl.js#L88
+async function simulateEventDispatch(eventImpl) {
+  if (eventImpl._dispatchFlag || !eventImpl._initializedFlag) {
+    throw DOMException.create(this._globalObject, [
+      'Tried to dispatch an uninitialized event',
+      'InvalidStateError',
+    ]);
+  }
+  if (eventImpl.eventPhase !== EVENT_PHASE.NONE) {
+    throw DOMException.create(this._globalObject, [
+      'Tried to dispatch a dispatching event',
+      'InvalidStateError',
+    ]);
+  }
+
+  eventImpl.isTrusted = false;
+
+  await _dispatch.call(this, eventImpl);
+}
+
+async function _dispatch(eventImpl, legacyTargetOverrideFlag) {
+  // Hack: save the wrapper Symbol.
+  wrapperSymbol = Object.getOwnPropertySymbols(eventImpl)[0];
+
+  let targetImpl = this;
+  let clearTargets = false;
+  let activationTarget = null;
+
+  eventImpl._dispatchFlag = true;
+
+  const targetOverride = legacyTargetOverrideFlag
+    ? wrapperForImpl(targetImpl._globalObject._document)
+    : targetImpl;
+  let relatedTarget = retarget(eventImpl.relatedTarget, targetImpl);
+
+  if (targetImpl !== relatedTarget || targetImpl === eventImpl.relatedTarget) {
+    const touchTargets = [];
+
+    appendToEventPath(
+      eventImpl,
+      targetImpl,
+      targetOverride,
+      relatedTarget,
+      touchTargets,
+      false,
+    );
+
+    const isActivationEvent = false; // TODO Not ported in fork.
+
+    if (isActivationEvent && targetImpl._hasActivationBehavior) {
+      activationTarget = targetImpl;
+    }
+
+    let slotInClosedTree = false;
+    let slotable =
+      isSlotable(targetImpl) && targetImpl._assignedSlot ? targetImpl : null;
+    let parent = getEventTargetParent(targetImpl, eventImpl);
+
+    // Populate event path
+    // https://dom.spec.whatwg.org/#event-path
+    while (parent !== null) {
+      if (slotable !== null) {
+        if (parent.localName !== 'slot') {
+          throw new Error(`JSDOM Internal Error: Expected parent to be a Slot`);
+        }
+
+        slotable = null;
+
+        const parentRoot = nodeRoot(parent);
+        if (isShadowRoot(parentRoot) && parentRoot.mode === 'closed') {
+          slotInClosedTree = true;
+        }
+      }
+
+      if (isSlotable(parent) && parent._assignedSlot) {
+        slotable = parent;
+      }
+
+      relatedTarget = retarget(eventImpl.relatedTarget, parent);
+
+      if (
+        (isNode(parent) &&
+          isShadowInclusiveAncestor(nodeRoot(targetImpl), parent)) ||
+        wrapperForImpl(parent).constructor.name === 'Window'
+      ) {
+        if (
+          isActivationEvent &&
+          eventImpl.bubbles &&
+          activationTarget === null &&
+          parent._hasActivationBehavior
+        ) {
+          activationTarget = parent;
+        }
+
+        appendToEventPath(
+          eventImpl,
+          parent,
+          null,
+          relatedTarget,
+          touchTargets,
+          slotInClosedTree,
+        );
+      } else if (parent === relatedTarget) {
+        parent = null;
+      } else {
+        targetImpl = parent;
+
+        if (
+          isActivationEvent &&
+          activationTarget === null &&
+          targetImpl._hasActivationBehavior
+        ) {
+          activationTarget = targetImpl;
+        }
+
+        appendToEventPath(
+          eventImpl,
+          parent,
+          targetImpl,
+          relatedTarget,
+          touchTargets,
+          slotInClosedTree,
+        );
+      }
+
+      if (parent !== null) {
+        parent = getEventTargetParent(parent, eventImpl);
+      }
+
+      slotInClosedTree = false;
+    }
+
+    let clearTargetsStructIndex = -1;
+    for (
+      let i = eventImpl._path.length - 1;
+      i >= 0 && clearTargetsStructIndex === -1;
+      i--
+    ) {
+      if (eventImpl._path[i].target !== null) {
+        clearTargetsStructIndex = i;
+      }
+    }
+    const clearTargetsStruct = eventImpl._path[clearTargetsStructIndex];
+
+    clearTargets =
+      (isNode(clearTargetsStruct.target) &&
+        isShadowRoot(nodeRoot(clearTargetsStruct.target))) ||
+      (isNode(clearTargetsStruct.relatedTarget) &&
+        isShadowRoot(nodeRoot(clearTargetsStruct.relatedTarget)));
+
+    if (
+      activationTarget !== null &&
+      activationTarget._legacyPreActivationBehavior
+    ) {
+      activationTarget._legacyPreActivationBehavior();
+    }
+
+    for (let i = eventImpl._path.length - 1; i >= 0; --i) {
+      const struct = eventImpl._path[i];
+
+      if (struct.target !== null) {
+        eventImpl.eventPhase = EVENT_PHASE.AT_TARGET;
+      } else {
+        eventImpl.eventPhase = EVENT_PHASE.CAPTURING_PHASE;
+      }
+
+      await invokeEventListeners(struct, eventImpl, 'capturing');
+    }
+
+    for (let i = 0; i < eventImpl._path.length; i++) {
+      const struct = eventImpl._path[i];
+
+      if (struct.target !== null) {
+        eventImpl.eventPhase = EVENT_PHASE.AT_TARGET;
+      } else {
+        if (!eventImpl.bubbles) {
+          continue;
+        }
+
+        eventImpl.eventPhase = EVENT_PHASE.BUBBLING_PHASE;
+      }
+
+      await invokeEventListeners(struct, eventImpl, 'bubbling');
+    }
+  }
+
+  eventImpl.eventPhase = EVENT_PHASE.NONE;
+
+  eventImpl.currentTarget = null;
+  eventImpl._path = [];
+  eventImpl._dispatchFlag = false;
+  eventImpl._stopPropagationFlag = false;
+  eventImpl._stopImmediatePropagationFlag = false;
+
+  if (clearTargets) {
+    eventImpl.target = null;
+    eventImpl.relatedTarget = null;
+  }
+
+  if (activationTarget !== null) {
+    if (!eventImpl._canceledFlag) {
+      activationTarget._activationBehavior(eventImpl);
+    } else if (activationTarget._legacyCanceledActivationBehavior) {
+      activationTarget._legacyCanceledActivationBehavior();
+    }
+  }
+
+  return !eventImpl._canceledFlag;
+}
+
+async function invokeEventListeners(struct, eventImpl, phase) {
+  const structIndex = eventImpl._path.indexOf(struct);
+  for (let i = structIndex; i >= 0; i--) {
+    const t = eventImpl._path[i];
+    if (t.target) {
+      eventImpl.target = t.target;
+      break;
+    }
+  }
+
+  eventImpl.relatedTarget = wrapperForImpl(struct.relatedTarget);
+
+  if (eventImpl._stopPropagationFlag) {
+    return;
+  }
+
+  eventImpl.currentTarget = wrapperForImpl(struct.item);
+
+  const listeners = struct.item._eventListeners;
+  await innerInvokeEventListeners(
+    eventImpl,
+    listeners,
+    phase,
+    struct.itemInShadowTree,
+  );
+}
+
+async function innerInvokeEventListeners(
+  eventImpl,
+  listeners,
+  phase,
+  itemInShadowTree,
+) {
+  let found = false;
+
+  const {type, target} = eventImpl;
+  const wrapper = wrapperForImpl(target);
+
+  if (!listeners || !listeners[type]) {
+    return found;
+  }
+
+  // Copy event listeners before iterating since the list can be modified during the iteration.
+  const handlers = listeners[type].slice();
+
+  for (let i = 0; i < handlers.length; i++) {
+    const listener = handlers[i];
+    const {capture, once, passive} = listener.options;
+
+    // Check if the event listener has been removed since the listeners has been cloned.
+    if (!listeners[type].includes(listener)) {
+      continue;
+    }
+
+    found = true;
+
+    if (
+      (phase === 'capturing' && !capture) ||
+      (phase === 'bubbling' && capture)
+    ) {
+      continue;
+    }
+
+    if (once) {
+      listeners[type].splice(listeners[type].indexOf(listener), 1);
+    }
+
+    let window = null;
+    if (wrapper && wrapper._document) {
+      // Triggered by Window
+      window = wrapper;
+    } else if (target._ownerDocument) {
+      // Triggered by most webidl2js'ed instances
+      window = target._ownerDocument._defaultView;
+    } else if (wrapper._ownerDocument) {
+      // Currently triggered by some non-webidl2js things
+      window = wrapper._ownerDocument._defaultView;
+    }
+
+    let currentEvent;
+    if (window) {
+      currentEvent = window._currentEvent;
+      if (!itemInShadowTree) {
+        window._currentEvent = eventImpl;
+      }
+    }
+
+    if (passive) {
+      eventImpl._inPassiveListenerFlag = true;
+    }
+
+    try {
+      listener.callback.call(eventImpl.currentTarget, eventImpl);
+    } catch (e) {
+      if (window) {
+        reportException(window, e);
+      }
+      // Errors in window-less documents just get swallowed... can you think of anything better?
+    }
+
+    eventImpl._inPassiveListenerFlag = false;
+
+    if (window) {
+      window._currentEvent = currentEvent;
+    }
+
+    if (eventImpl._stopImmediatePropagationFlag) {
+      return found;
+    }
+
+    // IMPORTANT: Flush microtasks
+    await waitForMicrotasks();
+  }
+
+  return found;
+}
+
+function appendToEventPath(
+  eventImpl,
+  target,
+  targetOverride,
+  relatedTarget,
+  touchTargets,
+  slotInClosedTree,
+) {
+  const itemInShadowTree = isNode(target) && isShadowRoot(nodeRoot(target));
+  const rootOfClosedTree = isShadowRoot(target) && target.mode === 'closed';
+
+  eventImpl._path.push({
+    item: target,
+    itemInShadowTree,
+    target: targetOverride,
+    relatedTarget,
+    touchTargets,
+    rootOfClosedTree,
+    slotInClosedTree,
+  });
+}
+
+export default simulateEventDispatch;
diff --git a/packages/jest-react/README.md b/packages/jest-react/README.md
new file mode 100644
index 00000000000..1a93ab7cee2
--- /dev/null
+++ b/packages/jest-react/README.md
@@ -0,0 +1,3 @@
+# `jest-react`
+
+Jest matchers and utilities for testing React Test Renderer.
\ No newline at end of file
diff --git a/packages/jest-react/index.js b/packages/jest-react/index.js
new file mode 100644
index 00000000000..dbdcb851912
--- /dev/null
+++ b/packages/jest-react/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/JestReact';
diff --git a/packages/jest-react/npm/index.js b/packages/jest-react/npm/index.js
new file mode 100644
index 00000000000..e6bdc4c48b8
--- /dev/null
+++ b/packages/jest-react/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/jest-react.production.js');
+} else {
+  module.exports = require('./cjs/jest-react.development.js');
+}
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
new file mode 100644
index 00000000000..a5d6878294e
--- /dev/null
+++ b/packages/jest-react/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "jest-react",
+  "version": "0.17.0",
+  "description": "Jest matchers and utilities for testing React components.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/jest-react"
+  },
+  "keywords": [
+    "react",
+    "jest",
+    "react-testing"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "peerDependencies": {
+    "jest": "^23.0.1 || ^24.0.0 || ^25.1.0 || ^26.0.0 || ^27.0.0 || ^28.0.0 || ^29.0.0",
+    "react": "^19.0.0",
+    "react-test-renderer": "^19.0.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/"
+  ]
+}
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
new file mode 100644
index 00000000000..3cb9ab88f32
--- /dev/null
+++ b/packages/jest-react/src/JestReact.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
+const {assertConsoleLogsCleared} = require('internal-test-utils/consoleMock');
+
+import isArray from 'shared/isArray';
+
+function captureAssertion(fn) {
+  // Trick to use a Jest matcher inside another Jest matcher. `fn` contains an
+  // assertion; if it throws, we capture the error and return it, so the stack
+  // trace presented to the user points to the original assertion in the
+  // test file.
+  try {
+    fn();
+  } catch (error) {
+    return {
+      pass: false,
+      message: () => error.message,
+    };
+  }
+  return {pass: true};
+}
+
+function assertYieldsWereCleared(root) {
+  const Scheduler = root._Scheduler;
+  const actualYields = Scheduler.unstable_clearLog();
+  if (actualYields.length !== 0) {
+    const error = Error(
+      'Log of yielded values is not empty. ' +
+        'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
+    );
+    Error.captureStackTrace(error, assertYieldsWereCleared);
+    throw error;
+  }
+  assertConsoleLogsCleared();
+}
+
+function createJSXElementForTestComparison(type, props) {
+  if (__DEV__) {
+    const element = {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: type,
+      key: null,
+      props: props,
+      _owner: null,
+      _store: __DEV__ ? {} : undefined,
+    };
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      value: null,
+    });
+    return element;
+  } else {
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: type,
+      key: null,
+      ref: null,
+      props: props,
+    };
+  }
+}
+
+export function unstable_toMatchRenderedOutput(root, expectedJSX) {
+  assertYieldsWereCleared(root);
+  const actualJSON = root.toJSON();
+
+  let actualJSX;
+  if (actualJSON === null || typeof actualJSON === 'string') {
+    actualJSX = actualJSON;
+  } else if (isArray(actualJSON)) {
+    if (actualJSON.length === 0) {
+      actualJSX = null;
+    } else if (actualJSON.length === 1) {
+      actualJSX = jsonChildToJSXChild(actualJSON[0]);
+    } else {
+      const actualJSXChildren = jsonChildrenToJSXChildren(actualJSON);
+      if (actualJSXChildren === null || typeof actualJSXChildren === 'string') {
+        actualJSX = actualJSXChildren;
+      } else {
+        actualJSX = createJSXElementForTestComparison(REACT_FRAGMENT_TYPE, {
+          children: actualJSXChildren,
+        });
+      }
+    }
+  } else {
+    actualJSX = jsonChildToJSXChild(actualJSON);
+  }
+
+  return captureAssertion(() => {
+    expect(actualJSX).toEqual(expectedJSX);
+  });
+}
+
+function jsonChildToJSXChild(jsonChild) {
+  if (jsonChild === null || typeof jsonChild === 'string') {
+    return jsonChild;
+  } else {
+    const jsxChildren = jsonChildrenToJSXChildren(jsonChild.children);
+    return createJSXElementForTestComparison(
+      jsonChild.type,
+      jsxChildren === null
+        ? jsonChild.props
+        : {...jsonChild.props, children: jsxChildren},
+    );
+  }
+}
+
+function jsonChildrenToJSXChildren(jsonChildren) {
+  if (jsonChildren !== null) {
+    if (jsonChildren.length === 1) {
+      return jsonChildToJSXChild(jsonChildren[0]);
+    } else if (jsonChildren.length > 1) {
+      const jsxChildren = [];
+      let allJSXChildrenAreStrings = true;
+      let jsxChildrenString = '';
+      for (let i = 0; i < jsonChildren.length; i++) {
+        const jsxChild = jsonChildToJSXChild(jsonChildren[i]);
+        jsxChildren.push(jsxChild);
+        if (allJSXChildrenAreStrings) {
+          if (typeof jsxChild === 'string') {
+            jsxChildrenString += jsxChild;
+          } else if (jsxChild !== null) {
+            allJSXChildrenAreStrings = false;
+          }
+        }
+      }
+      return allJSXChildrenAreStrings ? jsxChildrenString : jsxChildren;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-art/Circle.js b/packages/react-art/Circle.js
new file mode 100644
index 00000000000..64e9a1f8567
--- /dev/null
+++ b/packages/react-art/Circle.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from './npm/Circle';
diff --git a/packages/react-art/README.md b/packages/react-art/README.md
new file mode 100644
index 00000000000..88dc3ce4f37
--- /dev/null
+++ b/packages/react-art/README.md
@@ -0,0 +1,7 @@
+# React ART
+
+React ART is a JavaScript library for drawing vector graphics using [React](https://github.com/facebook/react/).
+
+It provides declarative and reactive bindings to the [ART library](https://github.com/sebmarkbage/art/).
+
+Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).
diff --git a/packages/react-art/Rectangle.js b/packages/react-art/Rectangle.js
new file mode 100644
index 00000000000..efe62fd509d
--- /dev/null
+++ b/packages/react-art/Rectangle.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from './npm/Rectangle';
diff --git a/packages/react-art/Wedge.js b/packages/react-art/Wedge.js
new file mode 100644
index 00000000000..13264e9c7b1
--- /dev/null
+++ b/packages/react-art/Wedge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from './npm/Wedge';
diff --git a/packages/react-art/index.js b/packages/react-art/index.js
new file mode 100644
index 00000000000..67822d97acd
--- /dev/null
+++ b/packages/react-art/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactART';
diff --git a/packages/react-art/npm/Circle.js b/packages/react-art/npm/Circle.js
new file mode 100644
index 00000000000..e27b473dcb7
--- /dev/null
+++ b/packages/react-art/npm/Circle.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @typechecks
+ *
+ * Example usage:
+ * <Circle
+ *   radius={10}
+ *   stroke="green"
+ *   strokeWidth={3}
+ *   fill="blue"
+ * />
+ *
+ */
+
+'use strict';
+
+var assign = Object.assign;
+var React = require('react');
+var ReactART = require('react-art');
+
+var createReactClass = require('create-react-class');
+
+var Path = ReactART.Path;
+var Shape = ReactART.Shape;
+
+/**
+ * Circle is a React component for drawing circles. Like other ReactART
+ * components, it must be used in a <Surface>.
+ */
+var Circle = createReactClass({
+  displayName: 'Circle',
+
+  render: function render() {
+    var radius = this.props.radius;
+
+    var path = Path()
+      .moveTo(0, -radius)
+      .arc(0, radius * 2, radius)
+      .arc(0, radius * -2, radius)
+      .close();
+    return React.createElement(Shape, assign({}, this.props, {d: path}));
+  },
+});
+
+module.exports = Circle;
diff --git a/packages/react-art/npm/Rectangle.js b/packages/react-art/npm/Rectangle.js
new file mode 100644
index 00000000000..c71eeaf06d0
--- /dev/null
+++ b/packages/react-art/npm/Rectangle.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @typechecks
+ *
+ * Example usage:
+ * <Rectangle
+ *   width={50}
+ *   height={50}
+ *   stroke="green"
+ *   fill="blue"
+ * />
+ *
+ * Additional optional properties:
+ *   (Number) radius
+ *   (Number) radiusTopLeft
+ *   (Number) radiusTopRight
+ *   (Number) radiusBottomLeft
+ *   (Number) radiusBottomRight
+ *
+ */
+
+'use strict';
+
+var assign = Object.assign;
+var React = require('react');
+var ReactART = require('react-art');
+
+var createReactClass = require('create-react-class');
+
+var Shape = ReactART.Shape;
+var Path = ReactART.Path;
+
+/**
+ * Rectangle is a React component for drawing rectangles. Like other ReactART
+ * components, it must be used in a <Surface>.
+ */
+var Rectangle = createReactClass({
+  displayName: 'Rectangle',
+
+  render: function render() {
+    var width = this.props.width;
+    var height = this.props.height;
+    var radius = this.props.radius ? this.props.radius : 0;
+
+    // if unspecified, radius(Top|Bottom)(Left|Right) defaults to the radius
+    // property
+    var tl = this.props.radiusTopLeft ? this.props.radiusTopLeft : radius;
+    var tr = this.props.radiusTopRight ? this.props.radiusTopRight : radius;
+    var br = this.props.radiusBottomRight
+      ? this.props.radiusBottomRight
+      : radius;
+    var bl = this.props.radiusBottomLeft ? this.props.radiusBottomLeft : radius;
+
+    var path = Path();
+
+    // for negative width/height, offset the rectangle in the negative x/y
+    // direction. for negative radius, just default to 0.
+    if (width < 0) {
+      path.move(width, 0);
+      width = -width;
+    }
+    if (height < 0) {
+      path.move(0, height);
+      height = -height;
+    }
+    if (tl < 0) {
+      tl = 0;
+    }
+    if (tr < 0) {
+      tr = 0;
+    }
+    if (br < 0) {
+      br = 0;
+    }
+    if (bl < 0) {
+      bl = 0;
+    }
+
+    // disable border radius if it doesn't fit within the specified
+    // width/height
+    if (tl + tr > width) {
+      tl = 0;
+      tr = 0;
+    }
+    if (bl + br > width) {
+      bl = 0;
+      br = 0;
+    }
+    if (tl + bl > height) {
+      tl = 0;
+      bl = 0;
+    }
+    if (tr + br > height) {
+      tr = 0;
+      br = 0;
+    }
+
+    path.move(0, tl);
+
+    if (tl > 0) {
+      path.arc(tl, -tl);
+    }
+    path.line(width - (tr + tl), 0);
+
+    if (tr > 0) {
+      path.arc(tr, tr);
+    }
+    path.line(0, height - (tr + br));
+
+    if (br > 0) {
+      path.arc(-br, br);
+    }
+    path.line(-width + (br + bl), 0);
+
+    if (bl > 0) {
+      path.arc(-bl, -bl);
+    }
+    path.line(0, -height + (bl + tl));
+
+    return React.createElement(Shape, assign({}, this.props, {d: path}));
+  },
+});
+
+module.exports = Rectangle;
diff --git a/packages/react-art/npm/Wedge.js b/packages/react-art/npm/Wedge.js
new file mode 100644
index 00000000000..333cd228341
--- /dev/null
+++ b/packages/react-art/npm/Wedge.js
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @typechecks
+ *
+ * Example usage:
+ * <Wedge
+ *   outerRadius={50}
+ *   startAngle={0}
+ *   endAngle={360}
+ *   fill="blue"
+ * />
+ *
+ * Additional optional property:
+ *   (Int) innerRadius
+ *
+ */
+
+'use strict';
+
+var assign = Object.assign;
+var React = require('react');
+var ReactART = require('react-art');
+
+var createReactClass = require('create-react-class');
+
+var Shape = ReactART.Shape;
+var Path = ReactART.Path;
+
+/**
+ * Wedge is a React component for drawing circles, wedges and arcs. Like other
+ * ReactART components, it must be used in a <Surface>.
+ */
+var Wedge = createReactClass({
+  displayName: 'Wedge',
+
+  circleRadians: Math.PI * 2,
+
+  radiansPerDegree: Math.PI / 180,
+
+  /**
+   * _degreesToRadians(degrees)
+   *
+   * Helper function to convert degrees to radians
+   *
+   * @param {number} degrees
+   * @return {number}
+   */
+  _degreesToRadians: function _degreesToRadians(degrees) {
+    if (degrees !== 0 && degrees % 360 === 0) {
+      // 360, 720, etc.
+      return this.circleRadians;
+    } else {
+      return (degrees * this.radiansPerDegree) % this.circleRadians;
+    }
+  },
+
+  /**
+   * _createCirclePath(or, ir)
+   *
+   * Creates the ReactART Path for a complete circle.
+   *
+   * @param {number} or The outer radius of the circle
+   * @param {number} ir The inner radius, greater than zero for a ring
+   * @return {object}
+   */
+  _createCirclePath: function _createCirclePath(or, ir) {
+    var path = Path();
+
+    path
+      .move(0, or)
+      .arc(or * 2, 0, or)
+      .arc(-or * 2, 0, or);
+
+    if (ir) {
+      path
+        .move(or - ir, 0)
+        .counterArc(ir * 2, 0, ir)
+        .counterArc(-ir * 2, 0, ir);
+    }
+
+    path.close();
+
+    return path;
+  },
+
+  /**
+   * _createArcPath(sa, ea, ca, or, ir)
+   *
+   * Creates the ReactART Path for an arc or wedge.
+   *
+   * @param {number} startAngle The starting degrees relative to 12 o'clock
+   * @param {number} endAngle The ending degrees relative to 12 o'clock
+   * @param {number} or The outer radius in pixels
+   * @param {number} ir The inner radius in pixels, greater than zero for an arc
+   * @return {object}
+   */
+  _createArcPath: function _createArcPath(startAngle, endAngle, or, ir) {
+    var path = Path();
+
+    // angles in radians
+    var sa = this._degreesToRadians(startAngle);
+    var ea = this._degreesToRadians(endAngle);
+
+    // central arc angle in radians
+    var ca = sa > ea ? this.circleRadians - sa + ea : ea - sa;
+
+    // cached sine and cosine values
+    var ss = Math.sin(sa);
+    var es = Math.sin(ea);
+    var sc = Math.cos(sa);
+    var ec = Math.cos(ea);
+
+    // cached differences
+    var ds = es - ss;
+    var dc = ec - sc;
+    var dr = ir - or;
+
+    // if the angle is over pi radians (180 degrees)
+    // we will need to let the drawing method know.
+    var large = ca > Math.PI;
+
+    // TODO (sema) Please improve theses comments to make the math
+    // more understandable.
+    //
+    // Formula for a point on a circle at a specific angle with a center
+    // at (0, 0):
+    // x = radius * Math.sin(radians)
+    // y = radius * Math.cos(radians)
+    //
+    // For our starting point, we offset the formula using the outer
+    // radius because our origin is at (top, left).
+    // In typical web layout fashion, we are drawing in quadrant IV
+    // (a.k.a. Southeast) where x is positive and y is negative.
+    //
+    // The arguments for path.arc and path.counterArc used below are:
+    // (endX, endY, radiusX, radiusY, largeAngle)
+
+    path
+      .move(or + or * ss, or - or * sc) // move to starting point
+      .arc(or * ds, or * -dc, or, or, large) // outer arc
+      .line(dr * es, dr * -ec); // width of arc or wedge
+
+    if (ir) {
+      path.counterArc(ir * -ds, ir * dc, ir, ir, large); // inner arc
+    }
+
+    return path;
+  },
+
+  render: function render() {
+    // angles are provided in degrees
+    var startAngle = this.props.startAngle;
+    var endAngle = this.props.endAngle;
+    if (startAngle - endAngle === 0) {
+      return null;
+    }
+
+    // radii are provided in pixels
+    var innerRadius = this.props.innerRadius || 0;
+    var outerRadius = this.props.outerRadius;
+
+    // sorted radii
+    var ir = Math.min(innerRadius, outerRadius);
+    var or = Math.max(innerRadius, outerRadius);
+
+    var path;
+    if (endAngle >= startAngle + 360) {
+      path = this._createCirclePath(or, ir);
+    } else {
+      path = this._createArcPath(startAngle, endAngle, or, ir);
+    }
+
+    return React.createElement(Shape, assign({}, this.props, {d: path}));
+  },
+});
+
+module.exports = Wedge;
diff --git a/packages/react-art/npm/index.js b/packages/react-art/npm/index.js
new file mode 100644
index 00000000000..90873e0d3ca
--- /dev/null
+++ b/packages/react-art/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-art.production.js');
+} else {
+  module.exports = require('./cjs/react-art.development.js');
+}
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
new file mode 100644
index 00000000000..daeb4ad2950
--- /dev/null
+++ b/packages/react-art/package.json
@@ -0,0 +1,41 @@
+{
+  "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": "19.3.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-art"
+  },
+  "keywords": [
+    "react",
+    "art",
+    "svg",
+    "vml",
+    "canvas",
+    "jsx"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "dependencies": {
+    "art": "^0.10.1",
+    "create-react-class": "^15.6.2",
+    "scheduler": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/",
+    "Circle.js",
+    "Rectangle.js",
+    "Wedge.js"
+  ]
+}
diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
new file mode 100644
index 00000000000..f6756ba633e
--- /dev/null
+++ b/packages/react-art/src/ReactART.js
@@ -0,0 +1,181 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import ReactVersion from 'shared/ReactVersion';
+import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  createContainer,
+  updateContainerSync,
+  injectIntoDevTools,
+  flushSyncWork,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
+} from 'react-reconciler/src/ReactFiberReconciler';
+
+import Transform from 'art/core/transform';
+import Mode from 'art/modes/current';
+import FastNoSideEffects from 'art/modes/fast-noSideEffects';
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
+
+import {TYPES, childrenAsString} from './ReactARTInternals';
+
+function defaultOnDefaultTransitionIndicator() {
+  // Noop
+}
+
+Mode.setCurrent(
+  // Change to 'art/modes/dom' for easier debugging via SVG
+  FastNoSideEffects,
+);
+
+/** Declarative fill-type objects; API design not finalized */
+
+const slice = Array.prototype.slice;
+
+class LinearGradient {
+  constructor(stops, x1, y1, x2, y2) {
+    this._args = slice.call(arguments);
+  }
+
+  applyFill(node) {
+    node.fillLinear.apply(node, this._args);
+  }
+}
+
+class RadialGradient {
+  constructor(stops, fx, fy, rx, ry, cx, cy) {
+    this._args = slice.call(arguments);
+  }
+
+  applyFill(node) {
+    node.fillRadial.apply(node, this._args);
+  }
+}
+
+class Pattern {
+  constructor(url, width, height, left, top) {
+    this._args = slice.call(arguments);
+  }
+
+  applyFill(node) {
+    node.fillImage.apply(node, this._args);
+  }
+}
+
+/** React Components */
+
+class Surface extends React.Component {
+  componentDidMount() {
+    const {height, width} = this.props;
+
+    this._surface = Mode.Surface(+width, +height, this._tagRef);
+
+    this._mountNode = createContainer(
+      this._surface,
+      disableLegacyMode ? ConcurrentRoot : LegacyRoot,
+      null,
+      false,
+      false,
+      '',
+      defaultOnUncaughtError,
+      defaultOnCaughtError,
+      defaultOnRecoverableError,
+      defaultOnDefaultTransitionIndicator,
+      null,
+    );
+    // We synchronously flush updates coming from above so that they commit together
+    // and so that refs resolve before the parent life cycles.
+    updateContainerSync(this.props.children, this._mountNode, this);
+    flushSyncWork();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const props = this.props;
+
+    if (props.height !== prevProps.height || props.width !== prevProps.width) {
+      this._surface.resize(+props.width, +props.height);
+    }
+
+    // We synchronously flush updates coming from above so that they commit together
+    // and so that refs resolve before the parent life cycles.
+    updateContainerSync(this.props.children, this._mountNode, this);
+    flushSyncWork();
+
+    if (this._surface.render) {
+      this._surface.render();
+    }
+  }
+
+  componentWillUnmount() {
+    // We synchronously flush updates coming from above so that they commit together
+    // and so that refs resolve before the parent life cycles.
+    updateContainerSync(null, this._mountNode, this);
+    flushSyncWork();
+  }
+
+  render() {
+    // This is going to be a placeholder because we don't know what it will
+    // actually resolve to because ART may render canvas, vml or svg tags here.
+    // We only allow a subset of properties since others might conflict with
+    // ART's properties.
+    const props = this.props;
+
+    // TODO: ART's Canvas Mode overrides surface title and cursor
+    const Tag = Mode.Surface.tagName;
+
+    return (
+      <Tag
+        ref={ref => (this._tagRef = ref)}
+        accessKey={props.accessKey}
+        className={props.className}
+        draggable={props.draggable}
+        role={props.role}
+        style={props.style}
+        tabIndex={props.tabIndex}
+        title={props.title}
+      />
+    );
+  }
+}
+
+class Text extends React.Component {
+  constructor(props) {
+    super(props);
+    // We allow reading these props. Ideally we could expose the Text node as
+    // ref directly.
+    ['height', 'width', 'x', 'y'].forEach(key => {
+      Object.defineProperty(this, key, {
+        get: function () {
+          return this._text ? this._text[key] : undefined;
+        },
+      });
+    });
+  }
+  render() {
+    // This means you can't have children that render into strings...
+    const T = TYPES.TEXT;
+    return (
+      <T {...this.props} ref={t => (this._text = t)}>
+        {childrenAsString(this.props.children)}
+      </T>
+    );
+  }
+}
+
+injectIntoDevTools();
+
+/** API */
+
+export const ClippingRectangle = TYPES.CLIPPING_RECTANGLE;
+export const Group = TYPES.GROUP;
+export const Shape = TYPES.SHAPE;
+export const Path = Mode.Path;
+export {LinearGradient, Pattern, RadialGradient, Surface, Text, Transform};
+
+export {ReactVersion as version};
diff --git a/packages/react-art/src/ReactARTInternals.js b/packages/react-art/src/ReactARTInternals.js
new file mode 100644
index 00000000000..fd9ef9e0b95
--- /dev/null
+++ b/packages/react-art/src/ReactARTInternals.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const TYPES = {
+  CLIPPING_RECTANGLE: 'ClippingRectangle',
+  GROUP: 'Group',
+  SHAPE: 'Shape',
+  TEXT: 'Text',
+};
+
+export const EVENT_TYPES = {
+  onClick: 'click',
+  onMouseMove: 'mousemove',
+  onMouseOver: 'mouseover',
+  onMouseOut: 'mouseout',
+  onMouseUp: 'mouseup',
+  onMouseDown: 'mousedown',
+};
+
+export function childrenAsString(children) {
+  if (!children) {
+    return '';
+  } else if (typeof children === 'string') {
+    return children;
+  } else if (children.length) {
+    return children.join('');
+  } else {
+    return '';
+  }
+}
diff --git a/packages/react-art/src/ReactFiberConfigART.js b/packages/react-art/src/ReactFiberConfigART.js
new file mode 100644
index 00000000000..50873af6da0
--- /dev/null
+++ b/packages/react-art/src/ReactFiberConfigART.js
@@ -0,0 +1,644 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
+
+import Transform from 'art/core/transform';
+import Mode from 'art/modes/current';
+
+import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
+
+import {
+  DefaultEventPriority,
+  NoEventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
+import type {ReactContext} from 'shared/ReactTypes';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-art';
+export const extraDevToolsConfig = null;
+
+const pooledTransform = new Transform();
+
+const NO_CONTEXT = {};
+if (__DEV__) {
+  Object.freeze(NO_CONTEXT);
+}
+
+export type TransitionStatus = mixed;
+
+/** Helper Methods */
+
+function addEventListeners(instance, type, listener) {
+  // We need to explicitly unregister before unmount.
+  // For this reason we need to track subscriptions.
+  if (!instance._listeners) {
+    instance._listeners = {};
+    instance._subscriptions = {};
+  }
+
+  instance._listeners[type] = listener;
+
+  if (listener) {
+    if (!instance._subscriptions[type]) {
+      instance._subscriptions[type] = instance.subscribe(
+        type,
+        createEventHandler(instance),
+        instance,
+      );
+    }
+  } else {
+    if (instance._subscriptions[type]) {
+      instance._subscriptions[type]();
+      delete instance._subscriptions[type];
+    }
+  }
+}
+
+function createEventHandler(instance) {
+  return function handleEvent(event) {
+    const listener = instance._listeners[event.type];
+
+    if (!listener) {
+      // Noop
+    } else if (typeof listener === 'function') {
+      listener.call(instance, event);
+    } else if (listener.handleEvent) {
+      listener.handleEvent(event);
+    }
+  };
+}
+
+function destroyEventListeners(instance) {
+  if (instance._subscriptions) {
+    for (const type in instance._subscriptions) {
+      instance._subscriptions[type]();
+    }
+  }
+
+  instance._subscriptions = null;
+  instance._listeners = null;
+}
+
+function getScaleX(props) {
+  if (props.scaleX != null) {
+    return props.scaleX;
+  } else if (props.scale != null) {
+    return props.scale;
+  } else {
+    return 1;
+  }
+}
+
+function getScaleY(props) {
+  if (props.scaleY != null) {
+    return props.scaleY;
+  } else if (props.scale != null) {
+    return props.scale;
+  } else {
+    return 1;
+  }
+}
+
+function isSameFont(oldFont, newFont) {
+  if (oldFont === newFont) {
+    return true;
+  } else if (typeof newFont === 'string' || typeof oldFont === 'string') {
+    return false;
+  } else {
+    return (
+      newFont.fontSize === oldFont.fontSize &&
+      newFont.fontStyle === oldFont.fontStyle &&
+      newFont.fontVariant === oldFont.fontVariant &&
+      newFont.fontWeight === oldFont.fontWeight &&
+      newFont.fontFamily === oldFont.fontFamily
+    );
+  }
+}
+
+/** Render Methods */
+
+function applyClippingRectangleProps(instance, props, prevProps = {}) {
+  applyNodeProps(instance, props, prevProps);
+
+  instance.width = props.width;
+  instance.height = props.height;
+}
+
+function applyGroupProps(instance, props, prevProps = {}) {
+  applyNodeProps(instance, props, prevProps);
+
+  instance.width = props.width;
+  instance.height = props.height;
+}
+
+function applyNodeProps(instance, props, prevProps = {}) {
+  const scaleX = getScaleX(props);
+  const scaleY = getScaleY(props);
+
+  pooledTransform
+    .transformTo(1, 0, 0, 1, 0, 0)
+    .move(props.x || 0, props.y || 0)
+    .rotate(props.rotation || 0, props.originX, props.originY)
+    .scale(scaleX, scaleY, props.originX, props.originY);
+
+  if (props.transform != null) {
+    pooledTransform.transform(props.transform);
+  }
+
+  if (
+    instance.xx !== pooledTransform.xx ||
+    instance.yx !== pooledTransform.yx ||
+    instance.xy !== pooledTransform.xy ||
+    instance.yy !== pooledTransform.yy ||
+    instance.x !== pooledTransform.x ||
+    instance.y !== pooledTransform.y
+  ) {
+    instance.transformTo(pooledTransform);
+  }
+
+  if (props.cursor !== prevProps.cursor || props.title !== prevProps.title) {
+    instance.indicate(props.cursor, props.title);
+  }
+
+  if (instance.blend && props.opacity !== prevProps.opacity) {
+    instance.blend(props.opacity == null ? 1 : props.opacity);
+  }
+
+  if (props.visible !== prevProps.visible) {
+    if (props.visible == null || props.visible) {
+      instance.show();
+    } else {
+      instance.hide();
+    }
+  }
+
+  for (const type in EVENT_TYPES) {
+    addEventListeners(instance, EVENT_TYPES[type], props[type]);
+  }
+}
+
+function applyRenderableNodeProps(instance, props, prevProps = {}) {
+  applyNodeProps(instance, props, prevProps);
+
+  if (prevProps.fill !== props.fill) {
+    if (props.fill && props.fill.applyFill) {
+      props.fill.applyFill(instance);
+    } else {
+      instance.fill(props.fill);
+    }
+  }
+  if (
+    prevProps.stroke !== props.stroke ||
+    prevProps.strokeWidth !== props.strokeWidth ||
+    prevProps.strokeCap !== props.strokeCap ||
+    prevProps.strokeJoin !== props.strokeJoin ||
+    // TODO: Consider deep check of stokeDash; may benefit VML in IE.
+    prevProps.strokeDash !== props.strokeDash
+  ) {
+    instance.stroke(
+      props.stroke,
+      props.strokeWidth,
+      props.strokeCap,
+      props.strokeJoin,
+      props.strokeDash,
+    );
+  }
+}
+
+function applyShapeProps(instance, props, prevProps = {}) {
+  applyRenderableNodeProps(instance, props, prevProps);
+
+  const path = props.d || childrenAsString(props.children);
+
+  const prevDelta = instance._prevDelta;
+  const prevPath = instance._prevPath;
+
+  if (
+    path !== prevPath ||
+    path.delta !== prevDelta ||
+    prevProps.height !== props.height ||
+    prevProps.width !== props.width
+  ) {
+    instance.draw(path, props.width, props.height);
+
+    instance._prevDelta = path.delta;
+    instance._prevPath = path;
+  }
+}
+
+function applyTextProps(instance, props, prevProps = {}) {
+  applyRenderableNodeProps(instance, props, prevProps);
+
+  const string = props.children;
+
+  if (
+    instance._currentString !== string ||
+    !isSameFont(props.font, prevProps.font) ||
+    props.alignment !== prevProps.alignment ||
+    props.path !== prevProps.path
+  ) {
+    instance.draw(string, props.font, props.alignment, props.path);
+
+    instance._currentString = string;
+  }
+}
+
+export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoMicrotasks';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
+
+export function appendInitialChild(parentInstance, child) {
+  if (typeof child === 'string') {
+    // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
+    throw new Error('Text children should already be flattened.');
+  }
+
+  child.inject(parentInstance);
+}
+
+export function createInstance(type, props, internalInstanceHandle) {
+  let instance;
+
+  switch (type) {
+    case TYPES.CLIPPING_RECTANGLE:
+      instance = Mode.ClippingRectangle();
+      instance._applyProps = applyClippingRectangleProps;
+      break;
+    case TYPES.GROUP:
+      instance = Mode.Group();
+      instance._applyProps = applyGroupProps;
+      break;
+    case TYPES.SHAPE:
+      instance = Mode.Shape();
+      instance._applyProps = applyShapeProps;
+      break;
+    case TYPES.TEXT:
+      instance = Mode.Text(
+        props.children,
+        props.font,
+        props.alignment,
+        props.path,
+      );
+      instance._applyProps = applyTextProps;
+      break;
+  }
+
+  if (!instance) {
+    throw new Error(`ReactART does not support the type "${type}"`);
+  }
+
+  instance._applyProps(instance, props);
+
+  return instance;
+}
+
+export function cloneMutableInstance(instance, keepChildren) {
+  return instance;
+}
+
+export function createTextInstance(
+  text,
+  rootContainerInstance,
+  internalInstanceHandle,
+) {
+  return text;
+}
+
+export function cloneMutableTextInstance(textInstance) {
+  return textInstance;
+}
+
+export type FragmentInstanceType = null;
+
+export function createFragmentInstance(fiber): null {
+  return null;
+}
+
+export function updateFragmentInstanceFiber(fiber, instance): void {
+  // Noop
+}
+
+export function commitNewChildToFragmentInstance(
+  child,
+  fragmentInstance,
+): void {
+  // Noop
+}
+
+export function deleteChildFromFragmentInstance(child, fragmentInstance): void {
+  // Noop
+}
+
+export function finalizeInitialChildren(domElement, type, props) {
+  return false;
+}
+
+export function getPublicInstance(instance) {
+  return instance;
+}
+
+export function prepareForCommit() {
+  // Noop
+  return null;
+}
+
+export function resetAfterCommit() {
+  // Noop
+}
+
+export function resetTextContent(domElement) {
+  // Noop
+}
+
+export function getRootHostContext() {
+  return NO_CONTEXT;
+}
+
+export function getChildHostContext() {
+  return NO_CONTEXT;
+}
+
+export const scheduleTimeout = setTimeout;
+export const cancelTimeout = clearTimeout;
+export const noTimeout = -1;
+
+export function shouldSetTextContent(type, props) {
+  return (
+    typeof props.children === 'string' || typeof props.children === 'number'
+  );
+}
+
+let currentUpdatePriority: EventPriority = NoEventPriority;
+
+export function setCurrentUpdatePriority(newPriority: EventPriority): void {
+  currentUpdatePriority = newPriority;
+}
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return currentUpdatePriority;
+}
+
+export function resolveUpdatePriority(): EventPriority {
+  return currentUpdatePriority || DefaultEventPriority;
+}
+
+export function trackSchedulerEvent(): void {}
+
+export function resolveEventType(): null | string {
+  return null;
+}
+
+export function resolveEventTimeStamp(): number {
+  return -1.1;
+}
+
+export function shouldAttemptEagerTransition() {
+  return false;
+}
+
+// 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) {
+  if (child.parentNode === parentInstance) {
+    child.eject();
+  }
+  child.inject(parentInstance);
+}
+
+export function appendChildToContainer(parentInstance, child) {
+  if (child.parentNode === parentInstance) {
+    child.eject();
+  }
+  child.inject(parentInstance);
+}
+
+export function insertBefore(parentInstance, child, beforeChild) {
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
+  child.injectBefore(beforeChild);
+}
+
+export function insertInContainerBefore(parentInstance, child, beforeChild) {
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
+  child.injectBefore(beforeChild);
+}
+
+export function removeChild(parentInstance, child) {
+  destroyEventListeners(child);
+  child.eject();
+}
+
+export function removeChildFromContainer(parentInstance, child) {
+  destroyEventListeners(child);
+  child.eject();
+}
+
+export function commitTextUpdate(textInstance, oldText, newText) {
+  // Noop
+}
+
+export function commitMount(instance, type, newProps) {
+  // Noop
+}
+
+export function commitUpdate(instance, type, oldProps, newProps) {
+  instance._applyProps(instance, newProps, oldProps);
+}
+
+export function hideInstance(instance) {
+  instance.hide();
+}
+
+export function hideTextInstance(textInstance) {
+  // Noop
+}
+
+export function unhideInstance(instance, props) {
+  if (props.visible == null || props.visible) {
+    instance.show();
+  }
+}
+
+export function unhideTextInstance(textInstance, text): void {
+  // Noop
+}
+
+export function applyViewTransitionName(instance, name, className) {
+  // Noop
+}
+
+export function restoreViewTransitionName(instance, props) {
+  // Noop
+}
+
+export function cancelViewTransitionName(instance, name, props) {
+  // Noop
+}
+
+export function cancelRootViewTransitionName(rootContainer) {
+  // Noop
+}
+
+export function restoreRootViewTransitionName(rootContainer) {
+  // Noop
+}
+
+export function cloneRootViewTransitionContainer(rootContainer) {
+  throw new Error('Not implemented.');
+}
+
+export function removeRootViewTransitionClone(rootContainer, clone) {
+  throw new Error('Not implemented.');
+}
+
+export type InstanceMeasurement = null;
+
+export function measureInstance(instance) {
+  return null;
+}
+
+export function measureClonedInstance(instance) {
+  return null;
+}
+
+export function wasInstanceInViewport(measurement): boolean {
+  return true;
+}
+
+export function hasInstanceChanged(oldMeasurement, newMeasurement): boolean {
+  return false;
+}
+
+export function hasInstanceAffectedParent(
+  oldMeasurement,
+  newMeasurement,
+): boolean {
+  return false;
+}
+
+export function startViewTransition() {
+  return null;
+}
+
+export type RunningViewTransition = null;
+
+export function startGestureTransition() {
+  return null;
+}
+
+export function stopViewTransition(transition: RunningViewTransition) {}
+
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  callback();
+}
+
+export type ViewTransitionInstance = null | {name: string, ...};
+
+export function createViewTransitionInstance(
+  name: string,
+): ViewTransitionInstance {
+  return null;
+}
+
+export type GestureTimeline = null;
+
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
+  throw new Error('startGestureTransition is not yet supported in react-art.');
+}
+
+export function clearContainer(container) {
+  // TODO Implement this
+}
+
+export function getInstanceFromNode(node): null {
+  return null;
+}
+
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
+  // noop
+}
+
+export function afterActiveInstanceBlur() {
+  // noop
+}
+
+export function preparePortalMount(portalInstance: any): void {
+  // noop
+}
+
+// eslint-disable-next-line no-undef
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
+
+export function maySuspendCommit(type, props) {
+  return false;
+}
+
+export function maySuspendCommitOnUpdate(type, oldProps, newProps) {
+  return false;
+}
+
+export function maySuspendCommitInSyncRender(type, props) {
+  return false;
+}
+
+export function preloadInstance(type, props) {
+  // Return true to indicate it's already loaded
+  return true;
+}
+
+export function startSuspendingCommit() {
+  return null;
+}
+
+export function suspendInstance(state, instance, type, props) {}
+
+export function suspendOnActiveViewTransition(state, container) {}
+
+export function waitForCommitToBeReady(timeoutOffset) {
+  return null;
+}
+
+export function getSuspendedCommitReason(state, rootContainer) {
+  return null;
+}
+
+export const NotPendingTransition = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
+export function resetFormInstance() {}
diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js
new file mode 100644
index 00000000000..6658cde5f66
--- /dev/null
+++ b/packages/react-art/src/__tests__/ReactART-test.js
@@ -0,0 +1,530 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+/*jslint evil: true */
+
+'use strict';
+
+const React = require('react');
+const Scheduler = require('scheduler');
+
+import * as ReactART from 'react-art';
+import ARTSVGMode from 'art/modes/svg';
+import ARTCurrentMode from 'art/modes/current';
+// Since these are default exports, we need to import them using ESM.
+// Since they must be on top, we need to import this before ReactDOM.
+import Circle from 'react-art/Circle';
+import Rectangle from 'react-art/Rectangle';
+import Wedge from 'react-art/Wedge';
+
+const {act} = require('internal-test-utils');
+
+// Isolate DOM renderer.
+jest.resetModules();
+// share isomorphic
+jest.mock('scheduler', () => Scheduler);
+jest.mock('react', () => React);
+const ReactDOMClient = require('react-dom/client');
+
+let Group;
+let Shape;
+let Surface;
+let TestComponent;
+
+let groupRef;
+
+const Missing = {};
+
+function testDOMNodeStructure(domNode, expectedStructure) {
+  expect(domNode).toBeDefined();
+  expect(domNode.nodeName).toBe(expectedStructure.nodeName);
+  for (const prop in expectedStructure) {
+    if (!expectedStructure.hasOwnProperty(prop)) {
+      continue;
+    }
+    if (prop !== 'nodeName' && prop !== 'children') {
+      if (expectedStructure[prop] === Missing) {
+        expect(domNode.hasAttribute(prop)).toBe(false);
+      } else {
+        expect(domNode.getAttribute(prop)).toBe(expectedStructure[prop]);
+      }
+    }
+  }
+  if (expectedStructure.children) {
+    expectedStructure.children.forEach(function (subTree, index) {
+      testDOMNodeStructure(domNode.childNodes[index], subTree);
+    });
+  }
+}
+
+describe('ReactART', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    // share isomorphic
+    jest.mock('scheduler', () => Scheduler);
+    jest.mock('react', () => React);
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    ARTCurrentMode.setCurrent(ARTSVGMode);
+
+    Group = ReactART.Group;
+    Shape = ReactART.Shape;
+    Surface = ReactART.Surface;
+
+    groupRef = React.createRef();
+    TestComponent = class extends React.Component {
+      group = groupRef;
+
+      render() {
+        const a = (
+          <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}
+          />
+        );
+
+        const b = (
+          <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
+          </Shape>
+        );
+
+        const c = <Group key="c" />;
+
+        return (
+          <Surface width={150} height={200}>
+            <Group ref={this.group}>
+              {this.props.flipped ? [b, a, c] : [a, b, c]}
+            </Group>
+          </Surface>
+        );
+      }
+    };
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should have the correct lifecycle state', async () => {
+    const instance = <TestComponent />;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(instance);
+    });
+    const group = groupRef.current;
+    // Duck type test for an ART group
+    expect(typeof group.indicate).toBe('function');
+  });
+
+  it('should render a reasonable SVG structure in SVG mode', async () => {
+    const instance = <TestComponent />;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(instance);
+    });
+
+    const expectedStructure = {
+      nodeName: 'svg',
+      width: '150',
+      height: '200',
+      children: [
+        {nodeName: 'defs'},
+        {
+          nodeName: 'g',
+          children: [
+            {
+              nodeName: 'defs',
+              children: [{nodeName: 'linearGradient'}],
+            },
+            {nodeName: 'path'},
+            {nodeName: 'path'},
+            {nodeName: 'g'},
+          ],
+        },
+      ],
+    };
+
+    const realNode = container.firstChild;
+    testDOMNodeStructure(realNode, expectedStructure);
+  });
+
+  it('should be able to reorder components', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<TestComponent flipped={false} />);
+    });
+
+    const expectedStructure = {
+      nodeName: 'svg',
+      children: [
+        {nodeName: 'defs'},
+        {
+          nodeName: 'g',
+          children: [
+            {nodeName: 'defs'},
+            {nodeName: 'path', opacity: '0.1'},
+            {nodeName: 'path', opacity: Missing},
+            {nodeName: 'g'},
+          ],
+        },
+      ],
+    };
+
+    const realNode = container.firstChild;
+    testDOMNodeStructure(realNode, expectedStructure);
+
+    await act(() => {
+      root.render(<TestComponent flipped={true} />);
+    });
+
+    const expectedNewStructure = {
+      nodeName: 'svg',
+      children: [
+        {nodeName: 'defs'},
+        {
+          nodeName: 'g',
+          children: [
+            {nodeName: 'defs'},
+            {nodeName: 'path', opacity: Missing},
+            {nodeName: 'path', opacity: '0.1'},
+            {nodeName: 'g'},
+          ],
+        },
+      ],
+    };
+
+    testDOMNodeStructure(realNode, expectedNewStructure);
+  });
+
+  it('should be able to reorder many components', async () => {
+    class Component extends React.Component {
+      render() {
+        const chars = this.props.chars.split('');
+        return (
+          <Surface>
+            {chars.map(text => (
+              <Shape key={text} title={text} />
+            ))}
+          </Surface>
+        );
+      }
+    }
+
+    // Mini multi-child stress test: lots of reorders, some adds, some removes.
+    const before = 'abcdefghijklmnopqrst';
+    const after = 'mxhpgwfralkeoivcstzy';
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component chars={before} />);
+    });
+    const realNode = container.firstChild;
+    expect(realNode.textContent).toBe(before);
+
+    await act(() => {
+      root.render(<Component chars={after} />);
+    });
+    expect(realNode.textContent).toBe(after);
+  });
+
+  it('renders composite with lifecycle inside group', async () => {
+    let mounted = false;
+
+    class CustomShape extends React.Component {
+      render() {
+        return <Shape />;
+      }
+
+      componentDidMount() {
+        mounted = true;
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Surface>
+          <Group>
+            <CustomShape />
+          </Group>
+        </Surface>,
+      );
+    });
+    expect(mounted).toBe(true);
+  });
+
+  it('resolves refs before componentDidMount', async () => {
+    class CustomShape extends React.Component {
+      render() {
+        return <Shape />;
+      }
+    }
+
+    let ref = null;
+
+    class Outer extends React.Component {
+      test = React.createRef();
+
+      componentDidMount() {
+        ref = this.test.current;
+      }
+
+      render() {
+        return (
+          <Surface>
+            <Group>
+              <CustomShape ref={this.test} />
+            </Group>
+          </Surface>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
+    expect(ref.constructor).toBe(CustomShape);
+  });
+
+  it('resolves refs before componentDidUpdate', async () => {
+    class CustomShape extends React.Component {
+      render() {
+        return <Shape />;
+      }
+    }
+
+    let ref = {};
+
+    class Outer extends React.Component {
+      test = React.createRef();
+
+      componentDidMount() {
+        ref = this.test.current;
+      }
+
+      componentDidUpdate() {
+        ref = this.test.current;
+      }
+
+      render() {
+        return (
+          <Surface>
+            <Group>
+              {this.props.mountCustomShape && <CustomShape ref={this.test} />}
+            </Group>
+          </Surface>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
+    expect(ref).toBe(null);
+
+    await act(() => {
+      root.render(<Outer mountCustomShape={true} />);
+    });
+    expect(ref.constructor).toBe(CustomShape);
+  });
+
+  it('adds and updates event handlers', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    async function render(onClick) {
+      await act(() => {
+        root.render(
+          <Surface>
+            <Shape onClick={onClick} />
+          </Surface>,
+        );
+      });
+    }
+
+    function doClick(instance) {
+      const path = container.firstChild.querySelector('path');
+
+      path.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+    }
+
+    const onClick1 = jest.fn();
+    let instance = await render(onClick1);
+    doClick(instance);
+    expect(onClick1).toBeCalled();
+
+    const onClick2 = jest.fn();
+    instance = await render(onClick2);
+    doClick(instance);
+    expect(onClick2).toBeCalled();
+  });
+});
+
+describe('ReactARTComponents', () => {
+  let ReactTestRenderer;
+  beforeEach(() => {
+    jest.resetModules();
+    // share isomorphic
+    jest.mock('scheduler', () => Scheduler);
+    jest.mock('react', () => React);
+    // Isolate test renderer.
+    ReactTestRenderer = require('react-test-renderer');
+  });
+
+  it('should generate a <Shape> with props for drawing the Circle', async () => {
+    let circle;
+    await act(() => {
+      circle = ReactTestRenderer.create(
+        <Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(circle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with props for drawing the Rectangle', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle width={50} height={50} stroke="green" fill="blue" />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with positive width when width prop is negative', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle width={-50} height={50} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with positive height when height prop is negative', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle height={-50} width={50} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when top left radius prop is negative', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle radiusTopLeft={-25} width={50} height={50} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when top right radius prop is negative', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle radiusTopRight={-25} width={50} height={50} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle radiusBottomRight={-30} width={50} height={50} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle radiusBottomLeft={-25} width={50} height={50} />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> where top radius is 0 if the sum of the top radius is greater than width', async () => {
+    let rectangle;
+    await act(() => {
+      rectangle = ReactTestRenderer.create(
+        <Rectangle
+          radiusTopRight={25}
+          radiusTopLeft={26}
+          width={50}
+          height={40}
+        />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with props for drawing the Wedge', async () => {
+    let wedge;
+    await act(() => {
+      wedge = ReactTestRenderer.create(
+        <Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(wedge.toJSON()).toMatchSnapshot();
+  });
+
+  it('should return null if startAngle equals to endAngle on Wedge', async () => {
+    let wedge;
+    await act(() => {
+      wedge = ReactTestRenderer.create(
+        <Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(wedge.toJSON()).toBeNull();
+  });
+});
diff --git a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap
new file mode 100644
index 00000000000..7c39c18bc96
--- /dev/null
+++ b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap
@@ -0,0 +1,246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactARTComponents should generate a <Shape> where top radius is 0 if the sum of the top radius is greater than width 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": 0,
+      "penX": 0,
+      "penY": 0,
+    }
+  }
+  height={40}
+  radiusTopLeft={26}
+  radiusTopRight={25}
+  width={50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": 0,
+      "penX": 0,
+      "penY": 0,
+    }
+  }
+  height={50}
+  radiusBottomLeft={-25}
+  width={50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": 0,
+      "penX": 0,
+      "penY": 0,
+    }
+  }
+  height={50}
+  radiusBottomRight={-30}
+  width={50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with a radius property of 0 when top left radius prop is negative 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": 0,
+      "penX": 0,
+      "penY": 0,
+    }
+  }
+  height={50}
+  radiusTopLeft={-25}
+  width={50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with a radius property of 0 when top right radius prop is negative 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": 0,
+      "penX": 0,
+      "penY": 0,
+    }
+  }
+  height={50}
+  radiusTopRight={-25}
+  width={50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with positive height when height prop is negative 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": -50,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": -50,
+      "penX": 0,
+      "penY": -50,
+    }
+  }
+  height={-50}
+  width={50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with positive width when width prop is negative 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": -50,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": -50,
+      "penDownY": 0,
+      "penX": -50,
+      "penY": 0,
+    }
+  }
+  height={50}
+  width={-50}
+/>
+`;
+exports[`ReactARTComponents should generate a <Shape> with props for drawing the Circle 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": -10,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": null,
+      "penDownY": -10,
+      "penX": 0,
+      "penY": -10,
+    }
+  }
+  fill="blue"
+  radius={10}
+  stroke="green"
+  strokeWidth={3}
+/>
+`;
+
+exports[`ReactARTComponents should generate a <Shape> with props for drawing the Rectangle 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": 0,
+      "penDownY": 0,
+      "penX": 0,
+      "penY": 0,
+    }
+  }
+  fill="blue"
+  height={50}
+  stroke="green"
+  width={50}
+/>
+`;
+
+exports[`ReactARTComponents should generate a <Shape> with props for drawing the Wedge 1`] = `
+<Shape
+  d={
+    {
+      "_pivotX": 0,
+      "_pivotY": 50,
+      "path": [
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      ],
+      "penDownX": null,
+      "penDownY": 50,
+      "penX": 0,
+      "penY": 50,
+    }
+  }
+  endAngle={360}
+  fill="blue"
+  outerRadius={50}
+  startAngle={0}
+/>
+`;
diff --git a/packages/react-cache/README.md b/packages/react-cache/README.md
new file mode 100644
index 00000000000..d2b2e50d4f7
--- /dev/null
+++ b/packages/react-cache/README.md
@@ -0,0 +1,16 @@
+# react-cache
+
+A basic cache for React applications. It also serves as a reference for more
+advanced caching implementations.
+
+This package is meant to be used alongside yet-to-be-released, experimental
+React features. It's unlikely to be useful in any other context.
+
+**Do not use in a real application.** We're publishing this early for
+demonstration purposes.
+
+**Use it at your own risk.**
+
+# No, Really, It Is Unstable
+
+The API ~~may~~ will change wildly between versions.
diff --git a/packages/react-cache/index.js b/packages/react-cache/index.js
new file mode 100644
index 00000000000..0982d02d14d
--- /dev/null
+++ b/packages/react-cache/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/ReactCacheOld';
diff --git a/packages/react-cache/npm/index.js b/packages/react-cache/npm/index.js
new file mode 100644
index 00000000000..e9c3893af0a
--- /dev/null
+++ b/packages/react-cache/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-cache.production.js');
+} else {
+  module.exports = require('./cjs/react-cache.development.js');
+}
diff --git a/packages/react-cache/package.json b/packages/react-cache/package.json
new file mode 100644
index 00000000000..e0f8c0913ca
--- /dev/null
+++ b/packages/react-cache/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "name": "react-cache",
+  "description": "A basic cache for React applications",
+  "version": "2.0.0-alpha.0",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-cache"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0"
+  }
+}
diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js
new file mode 100644
index 00000000000..bf4e4d4c6de
--- /dev/null
+++ b/packages/react-cache/src/LRU.js
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as Scheduler from 'scheduler';
+
+// Intentionally not named imports because Rollup would
+// use dynamic dispatch for CommonJS interop named imports.
+const {
+  unstable_scheduleCallback: scheduleCallback,
+  unstable_IdlePriority: IdlePriority,
+} = Scheduler;
+
+type Entry<T> = {
+  value: T,
+  onDelete: () => mixed,
+  previous: Entry<T>,
+  next: Entry<T>,
+};
+
+type LRU<T> = {
+  add(value: Object, onDelete: () => mixed): Entry<Object>,
+  update(entry: Entry<T>, newValue: T): void,
+  access(entry: Entry<T>): T,
+  setLimit(newLimit: number): void,
+};
+
+export function createLRU<T>(limit: number): LRU<T> {
+  let LIMIT = limit;
+
+  // Circular, doubly-linked list
+  let first: Entry<T> | null = null;
+  let size: number = 0;
+
+  let cleanUpIsScheduled: boolean = false;
+
+  function scheduleCleanUp() {
+    if (cleanUpIsScheduled === false && size > LIMIT) {
+      // The cache size exceeds the limit. Schedule a callback to delete the
+      // least recently used entries.
+      cleanUpIsScheduled = true;
+      scheduleCallback(IdlePriority, cleanUp);
+    }
+  }
+
+  function cleanUp() {
+    cleanUpIsScheduled = false;
+    deleteLeastRecentlyUsedEntries(LIMIT);
+  }
+
+  function deleteLeastRecentlyUsedEntries(targetSize: number) {
+    // Delete entries from the cache, starting from the end of the list.
+    if (first !== null) {
+      const resolvedFirst: Entry<T> = (first: any);
+      let last: null | Entry<T> = resolvedFirst.previous;
+      while (size > targetSize && last !== null) {
+        const onDelete = last.onDelete;
+        const previous = last.previous;
+        last.onDelete = (null: any);
+
+        // Remove from the list
+        last.previous = last.next = (null: any);
+        if (last === first) {
+          // Reached the head of the list.
+          first = last = null;
+        } else {
+          (first: any).previous = previous;
+          previous.next = (first: any);
+          last = previous;
+        }
+
+        size -= 1;
+
+        // Call the destroy method after removing the entry from the list. If it
+        // throws, the rest of cache will not be deleted, but it will be in a
+        // valid state.
+        onDelete();
+      }
+    }
+  }
+
+  function add(value: Object, onDelete: () => mixed): Entry<Object> {
+    const entry = {
+      value,
+      onDelete,
+      next: (null: any),
+      previous: (null: any),
+    };
+    if (first === null) {
+      entry.previous = entry.next = entry;
+      first = entry;
+    } else {
+      // Append to head
+      const last = first.previous;
+      last.next = entry;
+      entry.previous = last;
+
+      first.previous = entry;
+      entry.next = first;
+
+      first = entry;
+    }
+    size += 1;
+    return entry;
+  }
+
+  function update(entry: Entry<T>, newValue: T): void {
+    entry.value = newValue;
+  }
+
+  function access(entry: Entry<T>): T {
+    const next = entry.next;
+    if (next !== null) {
+      // Entry already cached
+      const resolvedFirst: Entry<T> = (first: any);
+      if (first !== entry) {
+        // Remove from current position
+        const previous = entry.previous;
+        previous.next = next;
+        next.previous = previous;
+
+        // Append to head
+        const last = resolvedFirst.previous;
+        last.next = entry;
+        entry.previous = last;
+
+        resolvedFirst.previous = entry;
+        entry.next = resolvedFirst;
+
+        first = entry;
+      }
+    } else {
+      // Cannot access a deleted entry
+      // TODO: Error? Warning?
+    }
+    scheduleCleanUp();
+    return entry.value;
+  }
+
+  function setLimit(newLimit: number): void {
+    LIMIT = newLimit;
+    scheduleCleanUp();
+  }
+
+  return {
+    add,
+    update,
+    access,
+    setLimit,
+  };
+}
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
new file mode 100644
index 00000000000..7ea17286679
--- /dev/null
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, Thenable} from 'shared/ReactTypes';
+
+import * as React from 'react';
+
+import {createLRU} from './LRU';
+
+interface Suspender {
+  then(resolve: () => mixed, reject: () => mixed): mixed;
+}
+
+type PendingResult = {
+  status: 0,
+  value: Suspender,
+};
+
+type ResolvedResult<V> = {
+  status: 1,
+  value: V,
+};
+
+type RejectedResult = {
+  status: 2,
+  value: mixed,
+};
+
+type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
+
+type Resource<I, V> = {
+  read(I): V,
+  preload(I): void,
+  ...
+};
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+const SharedInternals =
+  React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+function readContext(Context: ReactContext<mixed>) {
+  const dispatcher = SharedInternals.H;
+  if (dispatcher === null) {
+    // This wasn't being minified but we're going to retire this package anyway.
+    // eslint-disable-next-line react-internal/prod-error-codes
+    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);
+}
+
+// $FlowFixMe[missing-local-annot]
+function identityHashFn(input) {
+  if (__DEV__) {
+    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;
+}
+
+const CACHE_LIMIT = 500;
+const lru = createLRU<$FlowFixMe>(CACHE_LIMIT);
+
+const entries: Map<Resource<any, any>, Map<any, any>> = new Map();
+
+const CacheContext = React.createContext<mixed>(null);
+
+function accessResult<I, K, V>(
+  resource: any,
+  fetch: I => Thenable<V>,
+  input: I,
+  key: K,
+): Result<V> {
+  let entriesForResource = entries.get(resource);
+  if (entriesForResource === undefined) {
+    entriesForResource = new Map();
+    entries.set(resource, entriesForResource);
+  }
+  const entry = entriesForResource.get(key);
+  if (entry === undefined) {
+    const thenable = fetch(input);
+    thenable.then(
+      value => {
+        if (newResult.status === Pending) {
+          const resolvedResult: ResolvedResult<V> = (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,
+    };
+    const newEntry = lru.add(newResult, deleteEntry.bind(null, resource, key));
+    entriesForResource.set(key, newEntry);
+    return newResult;
+  } else {
+    return (lru.access(entry): any);
+  }
+}
+
+function deleteEntry(resource: any, key: mixed) {
+  const entriesForResource = entries.get(resource);
+  if (entriesForResource !== undefined) {
+    entriesForResource.delete(key);
+    if (entriesForResource.size === 0) {
+      entries.delete(resource);
+    }
+  }
+}
+
+export function unstable_createResource<I, K: string | number, V>(
+  fetch: I => Thenable<V>,
+  maybeHashInput?: I => K,
+): Resource<I, V> {
+  const hashInput: I => K =
+    maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);
+
+  const resource = {
+    read(input: I): V {
+      // react-cache currently doesn't rely on context, but it may in the
+      // future, so we read anyway to prevent access outside of render.
+      readContext(CacheContext);
+      const key = hashInput(input);
+      const result: Result<V> = 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: I): void {
+      // react-cache currently doesn't rely on context, but it may in the
+      // future, so we read anyway to prevent access outside of render.
+      readContext(CacheContext);
+      const key = hashInput(input);
+      accessResult(resource, fetch, input, key);
+    },
+  };
+  return resource;
+}
+
+export function unstable_setGlobalCacheLimit(limit: number) {
+  lru.setLimit(limit);
+}
diff --git a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
new file mode 100644
index 00000000000..c9247f6a882
--- /dev/null
+++ b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
@@ -0,0 +1,422 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactCache;
+let createResource;
+let React;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let TextResource;
+let textResourceShouldFail;
+let waitForAll;
+let waitForPaint;
+let assertLog;
+let waitForThrow;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactCache', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    Suspense = React.Suspense;
+    ReactCache = require('react-cache');
+    createResource = ReactCache.unstable_createResource;
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitForThrow = InternalTestUtils.waitForThrow;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+    act = InternalTestUtils.act;
+
+    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.log(`Promise rejected [${text}]`);
+                      status = 'rejected';
+                      value = new Error('Failed to load: ' + text);
+                      listeners.forEach(listener => listener.reject(value));
+                    } else {
+                      Scheduler.log(`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;
+              }
+            }
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
+
+    textResourceShouldFail = false;
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return props.text;
+  }
+
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      TextResource.read([props.text, props.ms]);
+      Scheduler.log(text);
+      return text;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.log(`Suspend! [${text}]`);
+      } else {
+        Scheduler.log(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  it('throws a promise if the requested value is not in the cache', async () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText ms={100} text="Hi" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+
+    await waitForAll([
+      'Suspend! [Hi]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Hi]',
+    ]);
+
+    jest.advanceTimersByTime(100);
+    assertLog(['Promise resolved [Hi]']);
+    await waitForAll(['Hi']);
+  });
+
+  it('throws an error on the subsequent read if the promise is rejected', async () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText ms={100} text="Hi" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+
+    await waitForAll([
+      'Suspend! [Hi]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Hi]',
+    ]);
+
+    textResourceShouldFail = true;
+    let error;
+    try {
+      await act(() => jest.advanceTimersByTime(100));
+    } catch (e) {
+      error = e;
+    }
+    expect(error.message).toMatch('Failed to load: Hi');
+    assertLog(['Promise rejected [Hi]', 'Error! [Hi]', 'Error! [Hi]']);
+
+    // Should throw again on a subsequent read
+    root.render(<App />);
+    await waitForThrow('Failed to load: Hi');
+    assertLog(['Error! [Hi]', 'Error! [Hi]']);
+  });
+
+  it('warns if non-primitive key is passed to a resource without a hash function', async () => {
+    const BadTextResource = createResource(([text, ms = 0]) => {
+      return new Promise((resolve, reject) =>
+        setTimeout(() => {
+          resolve(text);
+        }, ms),
+      );
+    });
+
+    function App() {
+      Scheduler.log('App');
+      return BadTextResource.read(['Hi', 100]);
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <App />
+      </Suspense>,
+    );
+
+    if (__DEV__) {
+      await waitForAll([
+        'App',
+        'Loading...',
+        // pre-warming
+        'App',
+      ]);
+      assertConsoleErrorDev([
+        '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().\n' +
+          '    in App (at **)',
+
+        // pre-warming
+        '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().\n' +
+          '    in App (at **)',
+      ]);
+    } else {
+      await waitForAll([
+        'App',
+        'Loading...',
+        // pre-warming
+        'App',
+      ]);
+    }
+  });
+
+  it('evicts least recently used values', async () => {
+    ReactCache.unstable_setGlobalCacheLimit(3);
+
+    const root = ReactNoop.createRoot();
+    // Render 1, 2, and 3
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <AsyncText ms={100} text={1} />
+        <AsyncText ms={100} text={2} />
+        <AsyncText ms={100} text={3} />
+      </Suspense>,
+    );
+    await waitForPaint(['Suspend! [1]', 'Loading...']);
+    jest.advanceTimersByTime(100);
+    assertLog(['Promise resolved [1]']);
+    await waitForAll([
+      1,
+      'Suspend! [2]',
+      ...(gate('alwaysThrottleRetries')
+        ? []
+        : [1, 'Suspend! [2]', 'Suspend! [3]']),
+    ]);
+
+    jest.advanceTimersByTime(100);
+    assertLog([
+      'Promise resolved [2]',
+      ...(gate('alwaysThrottleRetries') ? [] : ['Promise resolved [3]']),
+    ]);
+    await waitForAll([
+      1,
+      2,
+      ...(gate('alwaysThrottleRetries') ? ['Suspend! [3]'] : [3]),
+    ]);
+
+    jest.advanceTimersByTime(100);
+    assertLog(gate('alwaysThrottleRetries') ? ['Promise resolved [3]'] : []);
+    await waitForAll(gate('alwaysThrottleRetries') ? [1, 2, 3] : []);
+
+    await act(() => jest.advanceTimersByTime(100));
+    expect(root).toMatchRenderedOutput('123');
+
+    // Render 1, 4, 5
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <AsyncText ms={100} text={1} />
+        <AsyncText ms={100} text={4} />
+        <AsyncText ms={100} text={5} />
+      </Suspense>,
+    );
+
+    await waitForAll([
+      1,
+      'Suspend! [4]',
+      'Loading...',
+      1,
+      'Suspend! [4]',
+      'Suspend! [5]',
+    ]);
+
+    await act(() => jest.advanceTimersByTime(100));
+    assertLog(['Promise resolved [4]', 'Promise resolved [5]', 1, 4, 5]);
+
+    expect(root).toMatchRenderedOutput('145');
+
+    // We've now rendered values 1, 2, 3, 4, 5, over our limit of 3. The least
+    // recently used values are 2 and 3. They should have been evicted.
+
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <AsyncText ms={100} text={1} />
+        <AsyncText ms={100} text={2} />
+        <AsyncText ms={100} text={3} />
+      </Suspense>,
+    );
+
+    await waitForAll([
+      // 1 is still cached
+      1,
+      // 2 and 3 suspend because they were evicted from the cache
+      'Suspend! [2]',
+      'Loading...',
+
+      1,
+      'Suspend! [2]',
+      'Suspend! [3]',
+    ]);
+
+    await act(() => jest.advanceTimersByTime(100));
+    assertLog(['Promise resolved [2]', 'Promise resolved [3]', 1, 2, 3]);
+    expect(root).toMatchRenderedOutput('123');
+  });
+
+  it('preloads during the render phase', async () => {
+    function App() {
+      TextResource.preload(['B', 1000]);
+      TextResource.read(['A', 1000]);
+      TextResource.read(['B', 1000]);
+      return <Text text="Result" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <App />
+      </Suspense>,
+    );
+
+    await waitForAll(['Loading...']);
+
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [B]', 'Promise resolved [A]', 'Result']);
+    expect(root).toMatchRenderedOutput('Result');
+  });
+
+  it('if a thenable resolves multiple times, does not update the first cached value', async () => {
+    let resolveThenable;
+    const BadTextResource = createResource(
+      ([text, ms = 0]) => {
+        let listeners = null;
+        const value = null;
+        return {
+          then(resolve, reject) {
+            if (value !== null) {
+              resolve(value);
+            } else {
+              if (listeners === null) {
+                listeners = [resolve];
+                resolveThenable = v => {
+                  listeners.forEach(listener => listener(v));
+                };
+              } else {
+                listeners.push(resolve);
+              }
+            }
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
+
+    function BadAsyncText(props) {
+      const text = props.text;
+      try {
+        const actualText = BadTextResource.read([props.text, props.ms]);
+        Scheduler.log(actualText);
+        return actualText;
+      } catch (promise) {
+        if (typeof promise.then === 'function') {
+          Scheduler.log(`Suspend! [${text}]`);
+        } else {
+          Scheduler.log(`Error! [${text}]`);
+        }
+        throw promise;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadAsyncText text="Hi" />
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [Hi]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Hi]',
+    ]);
+
+    resolveThenable('Hi');
+    // This thenable improperly resolves twice. We should not update the
+    // cached value.
+    resolveThenable('Hi muahahaha I am different');
+
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadAsyncText text="Hi" />
+      </Suspense>,
+    );
+
+    assertLog([]);
+    await waitForAll(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('throws if read is called outside render', () => {
+    expect(() => TextResource.read(['A', 1000])).toThrow(
+      "read and preload may only be called from within a component's render",
+    );
+  });
+
+  it('throws if preload is called outside render', () => {
+    expect(() => TextResource.preload(['A', 1000])).toThrow(
+      "read and preload may only be called from within a component's render",
+    );
+  });
+});
diff --git a/packages/react-client/README.md b/packages/react-client/README.md
new file mode 100644
index 00000000000..12ff567d0cc
--- /dev/null
+++ b/packages/react-client/README.md
@@ -0,0 +1,7 @@
+# react-client
+
+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-client/flight.js b/packages/react-client/flight.js
new file mode 100644
index 00000000000..9089ae80c70
--- /dev/null
+++ b/packages/react-client/flight.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactFlightClient';
diff --git a/packages/react-client/npm/flight.js b/packages/react-client/npm/flight.js
new file mode 100644
index 00000000000..b1256c4afac
--- /dev/null
+++ b/packages/react-client/npm/flight.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-client-flight.production.js');
+} else {
+  module.exports = require('./cjs/react-client-flight.development.js');
+}
diff --git a/packages/react-client/package.json b/packages/react-client/package.json
new file mode 100644
index 00000000000..82c7d855ad1
--- /dev/null
+++ b/packages/react-client/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "react-client",
+  "description": "React package for consuming streaming models.",
+  "version": "0.1.0",
+  "private": true,
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "flight.js",
+    "cjs/"
+  ],
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-client"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0"
+  }
+}
diff --git a/packages/react-client/src/ReactClientConsoleConfigBrowser.js b/packages/react-client/src/ReactClientConsoleConfigBrowser.js
new file mode 100644
index 00000000000..f67e4afa0c4
--- /dev/null
+++ b/packages/react-client/src/ReactClientConsoleConfigBrowser.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with ReactServerConsoleConfig
+const badgeFormat = '%c%s%c';
+// Same badge styling as DevTools.
+const badgeStyle =
+  // We use a fixed background if light-dark is not supported, otherwise
+  // we use a transparent background.
+  'background: #e6e6e6;' +
+  'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
+  'color: #000000;' +
+  'color: light-dark(#000000, #ffffff);' +
+  'border-radius: 2px';
+const resetStyle = '';
+const pad = ' ';
+
+const bind = Function.prototype.bind;
+
+export function bindToConsole(
+  methodName: string,
+  args: Array<any>,
+  badgeName: string,
+): () => any {
+  let offset = 0;
+  switch (methodName) {
+    case 'dir':
+    case 'dirxml':
+    case 'groupEnd':
+    case 'table': {
+      // These methods cannot be colorized because they don't take a formatting string.
+      // $FlowFixMe
+      return bind.apply(console[methodName], [console].concat(args)); // eslint-disable-line react-internal/no-production-logging
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+
+  const newArgs = args.slice(0);
+  if (typeof newArgs[offset] === 'string') {
+    newArgs.splice(
+      offset,
+      1,
+      badgeFormat + ' ' + newArgs[offset],
+      badgeStyle,
+      pad + badgeName + pad,
+      resetStyle,
+    );
+  } else {
+    newArgs.splice(
+      offset,
+      0,
+      badgeFormat,
+      badgeStyle,
+      pad + badgeName + pad,
+      resetStyle,
+    );
+  }
+
+  // The "this" binding in the "bind";
+  newArgs.unshift(console);
+
+  // $FlowFixMe
+  return bind.apply(console[methodName], newArgs); // eslint-disable-line react-internal/no-production-logging
+}
diff --git a/packages/react-client/src/ReactClientConsoleConfigPlain.js b/packages/react-client/src/ReactClientConsoleConfigPlain.js
new file mode 100644
index 00000000000..ee4c87ca613
--- /dev/null
+++ b/packages/react-client/src/ReactClientConsoleConfigPlain.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with ReactServerConsoleConfig
+const badgeFormat = '[%s]';
+const pad = ' ';
+
+const bind = Function.prototype.bind;
+
+export function bindToConsole(
+  methodName: string,
+  args: Array<any>,
+  badgeName: string,
+): () => any {
+  let offset = 0;
+  switch (methodName) {
+    case 'dir':
+    case 'dirxml':
+    case 'groupEnd':
+    case 'table': {
+      // These methods cannot be colorized because they don't take a formatting string.
+      // $FlowFixMe
+      return bind.apply(console[methodName], [console].concat(args)); // eslint-disable-line react-internal/no-production-logging
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+
+  const newArgs = args.slice(0);
+  if (typeof newArgs[offset] === 'string') {
+    newArgs.splice(
+      offset,
+      1,
+      badgeFormat + ' ' + newArgs[offset],
+      pad + badgeName + pad,
+    );
+  } else {
+    newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad);
+  }
+
+  // The "this" binding in the "bind";
+  newArgs.unshift(console);
+
+  // $FlowFixMe
+  return bind.apply(console[methodName], newArgs); // eslint-disable-line react-internal/no-production-logging
+}
diff --git a/packages/react-client/src/ReactClientConsoleConfigServer.js b/packages/react-client/src/ReactClientConsoleConfigServer.js
new file mode 100644
index 00000000000..6e69ef12a3c
--- /dev/null
+++ b/packages/react-client/src/ReactClientConsoleConfigServer.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with ReactServerConsoleConfig
+// This flips color using ANSI, then sets a color styling, then resets.
+const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c';
+// Same badge styling as DevTools.
+const badgeStyle =
+  // We use a fixed background if light-dark is not supported, otherwise
+  // we use a transparent background.
+  'background: #e6e6e6;' +
+  'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
+  'color: #000000;' +
+  'color: light-dark(#000000, #ffffff);' +
+  'border-radius: 2px';
+const resetStyle = '';
+const pad = ' ';
+
+const bind = Function.prototype.bind;
+
+export function bindToConsole(
+  methodName: string,
+  args: Array<any>,
+  badgeName: string,
+): () => any {
+  let offset = 0;
+  switch (methodName) {
+    case 'dir':
+    case 'dirxml':
+    case 'groupEnd':
+    case 'table': {
+      // These methods cannot be colorized because they don't take a formatting string.
+      // $FlowFixMe
+      return bind.apply(console[methodName], [console].concat(args)); // eslint-disable-line react-internal/no-production-logging
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+
+  const newArgs = args.slice(0);
+  if (typeof newArgs[offset] === 'string') {
+    newArgs.splice(
+      offset,
+      1,
+      badgeFormat + ' ' + newArgs[offset],
+      badgeStyle,
+      pad + badgeName + pad,
+      resetStyle,
+    );
+  } else {
+    newArgs.splice(
+      offset,
+      0,
+      badgeFormat,
+      badgeStyle,
+      pad + badgeName + pad,
+      resetStyle,
+    );
+  }
+
+  // The "this" binding in the "bind";
+  newArgs.unshift(console);
+
+  // $FlowFixMe
+  return bind.apply(console[methodName], newArgs); // eslint-disable-line react-internal/no-production-logging
+}
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
new file mode 100644
index 00000000000..0db63ecd3ef
--- /dev/null
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -0,0 +1,5221 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  ReactDebugInfo,
+  ReactDebugInfoEntry,
+  ReactComponentInfo,
+  ReactAsyncInfo,
+  ReactIOInfo,
+  ReactStackTrace,
+  ReactFunctionLocation,
+  ReactErrorInfoDev,
+} from 'shared/ReactTypes';
+import type {LazyComponent} from 'react/src/ReactLazy';
+
+import type {
+  ClientReference,
+  ClientReferenceMetadata,
+  ServerConsumerModuleMap,
+  ServerManifest,
+  StringDecoder,
+  ModuleLoading,
+} from './ReactFlightClientConfig';
+
+import type {
+  HintCode,
+  HintModel,
+} from 'react-server/src/ReactFlightServerConfig';
+
+import type {
+  CallServerCallback,
+  EncodeFormActionCallback,
+} from './ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences';
+
+import {
+  enableProfilerTimer,
+  enableComponentPerformanceTrack,
+  enableAsyncDebugInfo,
+} from 'shared/ReactFeatureFlags';
+
+import {
+  resolveClientReference,
+  resolveServerReference,
+  preloadModule,
+  requireModule,
+  getModuleDebugInfo,
+  dispatchHint,
+  readPartialStringChunk,
+  readFinalStringChunk,
+  createStringDecoder,
+  prepareDestinationForModule,
+  bindToConsole,
+  rendererVersion,
+  rendererPackageName,
+} from './ReactFlightClientConfig';
+
+import {
+  createBoundServerReference,
+  registerBoundServerReference,
+} from './ReactFlightReplyClient';
+
+import {readTemporaryReference} from './ReactFlightTemporaryReferences';
+
+import {
+  markAllTracksInOrder,
+  logComponentRender,
+  logDedupedComponentRender,
+  logComponentAborted,
+  logComponentErrored,
+  logIOInfo,
+  logIOInfoErrored,
+  logComponentAwait,
+  logComponentAwaitAborted,
+  logComponentAwaitErrored,
+} from './ReactFlightPerformanceTrack';
+
+import {
+  REACT_LAZY_TYPE,
+  REACT_ELEMENT_TYPE,
+  ASYNC_ITERATOR,
+  REACT_FRAGMENT_TYPE,
+} from 'shared/ReactSymbols';
+
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+
+import {getOwnerStackByComponentInfoInDev} from 'shared/ReactComponentInfoStack';
+
+import {injectInternals} from './ReactFlightClientDevToolsHook';
+
+import {OMITTED_PROP_ERROR} from 'shared/ReactFlightPropertyAccess';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import isArray from 'shared/isArray';
+
+import * as React from 'react';
+
+import type {SharedStateServer} from 'react/src/ReactSharedInternalsServer';
+import type {SharedStateClient} from 'react/src/ReactSharedInternalsClient';
+
+// TODO: This is an unfortunate hack. We shouldn't feature detect the internals
+// like this. It's just that for now we support the same build of the Flight
+// client both in the RSC environment, in the SSR environments as well as the
+// browser client. We should probably have a separate RSC build. This is DEV
+// only though.
+const ReactSharedInteralsServer: void | SharedStateServer = (React: any)
+  .__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+const ReactSharedInternals: SharedStateServer | SharedStateClient =
+  React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ||
+  ReactSharedInteralsServer;
+
+export type {CallServerCallback, EncodeFormActionCallback};
+
+interface FlightStreamController {
+  enqueueValue(value: any): void;
+  enqueueModel(json: UninitializedModel): void;
+  close(json: UninitializedModel): void;
+  error(error: Error): void;
+}
+
+type UninitializedModel = string;
+
+export type JSONValue =
+  | number
+  | null
+  | boolean
+  | string
+  | {+[key: string]: JSONValue}
+  | $ReadOnlyArray<JSONValue>;
+
+type ProfilingResult = {
+  track: number,
+  endTime: number,
+  component: null | ReactComponentInfo,
+};
+
+const ROW_ID = 0;
+const ROW_TAG = 1;
+const ROW_LENGTH = 2;
+const ROW_CHUNK_BY_NEWLINE = 3;
+const ROW_CHUNK_BY_LENGTH = 4;
+
+type RowParserState = 0 | 1 | 2 | 3 | 4;
+
+const PENDING = 'pending';
+const BLOCKED = 'blocked';
+const RESOLVED_MODEL = 'resolved_model';
+const RESOLVED_MODULE = 'resolved_module';
+const INITIALIZED = 'fulfilled';
+const ERRORED = 'rejected';
+const HALTED = 'halted'; // DEV-only. Means it never resolves even if connection closes.
+
+type PendingChunk<T> = {
+  status: 'pending',
+  value: null | Array<InitializationReference | (T => mixed)>,
+  reason: null | Array<InitializationReference | (mixed => mixed)>,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null | SomeChunk<ReactDebugInfoEntry>, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type BlockedChunk<T> = {
+  status: 'blocked',
+  value: null | Array<InitializationReference | (T => mixed)>,
+  reason: null | Array<InitializationReference | (mixed => mixed)>,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type ResolvedModelChunk<T> = {
+  status: 'resolved_model',
+  value: UninitializedModel,
+  reason: Response,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null | SomeChunk<ReactDebugInfoEntry>, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type ResolvedModuleChunk<T> = {
+  status: 'resolved_module',
+  value: ClientReference<T>,
+  reason: null,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type InitializedChunk<T> = {
+  status: 'fulfilled',
+  value: T,
+  reason: null | FlightStreamController,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type InitializedStreamChunk<
+  T: ReadableStream | $AsyncIterable<any, any, void>,
+> = {
+  status: 'fulfilled',
+  value: T,
+  reason: FlightStreamController,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (ReadableStream) => mixed, reject?: (mixed) => mixed): void,
+};
+type ErroredChunk<T> = {
+  status: 'rejected',
+  value: null,
+  reason: mixed,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type HaltedChunk<T> = {
+  status: 'halted',
+  value: null,
+  reason: null,
+  _children: Array<SomeChunk<any>> | ProfilingResult, // Profiling-only
+  _debugChunk: null, // DEV-only
+  _debugInfo: ReactDebugInfo, // DEV-only
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type SomeChunk<T> =
+  | PendingChunk<T>
+  | BlockedChunk<T>
+  | ResolvedModelChunk<T>
+  | ResolvedModuleChunk<T>
+  | InitializedChunk<T>
+  | ErroredChunk<T>
+  | HaltedChunk<T>;
+
+// $FlowFixMe[missing-this-annot]
+function ReactPromise(status: any, value: any, reason: any) {
+  this.status = status;
+  this.value = value;
+  this.reason = reason;
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    this._children = [];
+  }
+  if (__DEV__) {
+    this._debugChunk = null;
+    this._debugInfo = [];
+  }
+}
+// We subclass Promise.prototype so that we get other methods like .catch
+ReactPromise.prototype = (Object.create(Promise.prototype): any);
+// TODO: This doesn't return a new Promise chain unlike the real .then
+ReactPromise.prototype.then = function <T>(
+  this: SomeChunk<T>,
+  resolve: (value: T) => mixed,
+  reject?: (reason: mixed) => mixed,
+) {
+  const chunk: SomeChunk<T> = this;
+  // If we have resolved content, we try to initialize it first which
+  // might put us back into one of the other states.
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+    case RESOLVED_MODULE:
+      initializeModuleChunk(chunk);
+      break;
+  }
+  if (__DEV__ && enableAsyncDebugInfo) {
+    // Because only native Promises get picked up when we're awaiting we need to wrap
+    // this in a native Promise in DEV. This means that these callbacks are no longer sync
+    // but the lazy initialization is still sync and the .value can be inspected after,
+    // allowing it to be read synchronously anyway.
+    const resolveCallback = resolve;
+    const rejectCallback = reject;
+    const wrapperPromise: Promise<T> = new Promise((res, rej) => {
+      resolve = value => {
+        // $FlowFixMe
+        wrapperPromise._debugInfo = this._debugInfo;
+        res(value);
+      };
+      reject = reason => {
+        // $FlowFixMe
+        wrapperPromise._debugInfo = this._debugInfo;
+        rej(reason);
+      };
+    });
+    wrapperPromise.then(resolveCallback, rejectCallback);
+  }
+  // The status might have changed after initialization.
+  switch (chunk.status) {
+    case INITIALIZED:
+      if (typeof resolve === 'function') {
+        resolve(chunk.value);
+      }
+      break;
+    case PENDING:
+    case BLOCKED:
+      if (typeof resolve === 'function') {
+        if (chunk.value === null) {
+          chunk.value = ([]: Array<InitializationReference | (T => mixed)>);
+        }
+        chunk.value.push(resolve);
+      }
+      if (typeof reject === 'function') {
+        if (chunk.reason === null) {
+          chunk.reason = ([]: Array<
+            InitializationReference | (mixed => mixed),
+          >);
+        }
+        chunk.reason.push(reject);
+      }
+      break;
+    case HALTED: {
+      break;
+    }
+    default:
+      if (typeof reject === 'function') {
+        reject(chunk.reason);
+      }
+      break;
+  }
+};
+
+export type FindSourceMapURLCallback = (
+  fileName: string,
+  environmentName: string,
+) => null | string;
+
+export type DebugChannelCallback = (message: string) => void;
+
+export type DebugChannel = {
+  hasReadable: boolean,
+  callback: DebugChannelCallback | null,
+};
+
+type Response = {
+  _bundlerConfig: ServerConsumerModuleMap,
+  _serverReferenceConfig: null | ServerManifest,
+  _moduleLoading: ModuleLoading,
+  _callServer: CallServerCallback,
+  _encodeFormAction: void | EncodeFormActionCallback,
+  _nonce: ?string,
+  _chunks: Map<number, SomeChunk<any>>,
+  _fromJSON: (key: string, value: JSONValue) => any,
+  _stringDecoder: StringDecoder,
+  _closed: boolean,
+  _closedReason: mixed,
+  _tempRefs: void | TemporaryReferenceSet, // the set temporary references can be resolved from
+  _timeOrigin: number, // Profiling-only
+  _pendingInitialRender: null | TimeoutID, // Profiling-only,
+  _pendingChunks: number, // DEV-only
+  _weakResponse: WeakResponse, // DEV-only
+  _debugRootOwner?: null | ReactComponentInfo, // DEV-only
+  _debugRootStack?: null | Error, // DEV-only
+  _debugRootTask?: null | ConsoleTask, // DEV-only
+  _debugStartTime: number, // DEV-only
+  _debugEndTime?: number, // DEV-only
+  _debugIOStarted: boolean, // DEV-only
+  _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only
+  _debugChannel?: void | DebugChannel, // DEV-only
+  _blockedConsole?: null | SomeChunk<ConsoleEntry>, // DEV-only
+  _replayConsole: boolean, // DEV-only
+  _rootEnvironmentName: string, // DEV-only, the requested environment name.
+};
+
+// This indirection exists only to clean up DebugChannel when all Lazy References are GC:ed.
+// Therefore we only use the indirection in DEV.
+type WeakResponse = {
+  weak: WeakRef<Response>,
+  response: null | Response, // This is null when there are no pending chunks.
+};
+
+export type {WeakResponse as Response};
+
+function hasGCedResponse(weakResponse: WeakResponse): boolean {
+  return __DEV__ && weakResponse.weak.deref() === undefined;
+}
+
+function unwrapWeakResponse(weakResponse: WeakResponse): Response {
+  if (__DEV__) {
+    const response = weakResponse.weak.deref();
+    if (response === undefined) {
+      // eslint-disable-next-line react-internal/prod-error-codes
+      throw new Error(
+        'We did not expect to receive new data after GC:ing the response.',
+      );
+    }
+    return response;
+  } else {
+    return (weakResponse: any); // In prod we just use the real Response directly.
+  }
+}
+
+function getWeakResponse(response: Response): WeakResponse {
+  if (__DEV__) {
+    return response._weakResponse;
+  } else {
+    return (response: any); // In prod we just use the real Response directly.
+  }
+}
+
+function closeDebugChannel(debugChannel: DebugChannel): void {
+  if (debugChannel.callback) {
+    debugChannel.callback('');
+  }
+}
+
+// If FinalizationRegistry doesn't exist, we cannot use the debugChannel.
+const debugChannelRegistry =
+  __DEV__ && typeof FinalizationRegistry === 'function'
+    ? new FinalizationRegistry(closeDebugChannel)
+    : null;
+
+function readChunk<T>(chunk: SomeChunk<T>): T {
+  // If we have resolved content, we try to initialize it first which
+  // might put us back into one of the other states.
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+    case RESOLVED_MODULE:
+      initializeModuleChunk(chunk);
+      break;
+  }
+  // The status might have changed after initialization.
+  switch (chunk.status) {
+    case INITIALIZED:
+      return chunk.value;
+    case PENDING:
+    case BLOCKED:
+    case HALTED:
+      // eslint-disable-next-line no-throw-literal
+      throw ((chunk: any): Thenable<T>);
+    default:
+      throw chunk.reason;
+  }
+}
+
+export function getRoot<T>(weakResponse: WeakResponse): Thenable<T> {
+  const response = unwrapWeakResponse(weakResponse);
+  const chunk = getChunk(response, 0);
+  return (chunk: any);
+}
+
+function createPendingChunk<T>(response: Response): PendingChunk<T> {
+  if (__DEV__) {
+    // Retain a strong reference to the Response while we wait for the result.
+    if (response._pendingChunks++ === 0) {
+      response._weakResponse.response = response;
+      if (response._pendingInitialRender !== null) {
+        clearTimeout(response._pendingInitialRender);
+        response._pendingInitialRender = null;
+      }
+    }
+  }
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(PENDING, null, null);
+}
+
+function releasePendingChunk(response: Response, chunk: SomeChunk<any>): void {
+  if (__DEV__ && chunk.status === PENDING) {
+    if (--response._pendingChunks === 0) {
+      // We're no longer waiting for any more chunks. We can release the strong reference
+      // to the response. We'll regain it if we ask for any more data later on.
+      response._weakResponse.response = null;
+      // Wait a short period to see if any more chunks get asked for. E.g. by a React render.
+      // These chunks might discover more pending chunks.
+      // If we don't ask for more then we assume that those chunks weren't blocking initial
+      // render and are excluded from the performance track.
+      response._pendingInitialRender = setTimeout(
+        flushInitialRenderPerformance.bind(null, response),
+        100,
+      );
+    }
+  }
+}
+
+function createBlockedChunk<T>(response: Response): BlockedChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(BLOCKED, null, null);
+}
+
+function createErrorChunk<T>(
+  response: Response,
+  error: mixed,
+): ErroredChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(ERRORED, null, error);
+}
+
+function filterDebugInfo(
+  response: Response,
+  value: {_debugInfo: ReactDebugInfo, ...},
+) {
+  if (response._debugEndTime === null) {
+    // No end time was defined, so we keep all debug info entries.
+    return;
+  }
+
+  // Remove any debug info entries after the defined end time. For async info
+  // that means we're including anything that was awaited before the end time,
+  // but it doesn't need to be resolved before the end time.
+  const relativeEndTime =
+    response._debugEndTime -
+    // $FlowFixMe[prop-missing]
+    performance.timeOrigin;
+  const debugInfo = [];
+  for (let i = 0; i < value._debugInfo.length; i++) {
+    const info = value._debugInfo[i];
+    if (typeof info.time === 'number' && info.time > relativeEndTime) {
+      break;
+    }
+    debugInfo.push(info);
+  }
+  value._debugInfo = debugInfo;
+}
+
+function moveDebugInfoFromChunkToInnerValue<T>(
+  chunk: InitializedChunk<T> | InitializedStreamChunk<any>,
+  value: T,
+): void {
+  // Remove the debug info from the initialized chunk, and add it to the inner
+  // value instead. This can be a React element, an array, or an uninitialized
+  // Lazy.
+  const resolvedValue = resolveLazy(value);
+  if (
+    typeof resolvedValue === 'object' &&
+    resolvedValue !== null &&
+    (isArray(resolvedValue) ||
+      typeof resolvedValue[ASYNC_ITERATOR] === 'function' ||
+      resolvedValue.$$typeof === REACT_ELEMENT_TYPE ||
+      resolvedValue.$$typeof === REACT_LAZY_TYPE)
+  ) {
+    const debugInfo = chunk._debugInfo.splice(0);
+    if (isArray(resolvedValue._debugInfo)) {
+      // $FlowFixMe[method-unbinding]
+      resolvedValue._debugInfo.unshift.apply(
+        resolvedValue._debugInfo,
+        debugInfo,
+      );
+    } else {
+      Object.defineProperty((resolvedValue: any), '_debugInfo', {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugInfo,
+      });
+    }
+  }
+}
+
+function processChunkDebugInfo<T>(
+  response: Response,
+  chunk: InitializedChunk<T> | InitializedStreamChunk<any>,
+  value: T,
+): void {
+  filterDebugInfo(response, chunk);
+  moveDebugInfoFromChunkToInnerValue(chunk, value);
+}
+
+function wakeChunk<T>(
+  response: Response,
+  listeners: Array<InitializationReference | (T => mixed)>,
+  value: T,
+  chunk: InitializedChunk<T>,
+): void {
+  for (let i = 0; i < listeners.length; i++) {
+    const listener = listeners[i];
+    if (typeof listener === 'function') {
+      listener(value);
+    } else {
+      fulfillReference(response, listener, value, chunk);
+    }
+  }
+
+  if (__DEV__) {
+    processChunkDebugInfo(response, chunk, value);
+  }
+}
+
+function rejectChunk(
+  response: Response,
+  listeners: Array<InitializationReference | (mixed => mixed)>,
+  error: mixed,
+): void {
+  for (let i = 0; i < listeners.length; i++) {
+    const listener = listeners[i];
+    if (typeof listener === 'function') {
+      listener(error);
+    } else {
+      rejectReference(response, listener.handler, error);
+    }
+  }
+}
+
+function resolveBlockedCycle<T>(
+  resolvedChunk: SomeChunk<T>,
+  reference: InitializationReference,
+): null | InitializationHandler {
+  const referencedChunk = reference.handler.chunk;
+  if (referencedChunk === null) {
+    return null;
+  }
+  if (referencedChunk === resolvedChunk) {
+    // We found the cycle. We can resolve the blocked cycle now.
+    return reference.handler;
+  }
+  const resolveListeners = referencedChunk.value;
+  if (resolveListeners !== null) {
+    for (let i = 0; i < resolveListeners.length; i++) {
+      const listener = resolveListeners[i];
+      if (typeof listener !== 'function') {
+        const foundHandler = resolveBlockedCycle(resolvedChunk, listener);
+        if (foundHandler !== null) {
+          return foundHandler;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+function wakeChunkIfInitialized<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  resolveListeners: Array<InitializationReference | (T => mixed)>,
+  rejectListeners: null | Array<InitializationReference | (mixed => mixed)>,
+): void {
+  switch (chunk.status) {
+    case INITIALIZED:
+      wakeChunk(response, resolveListeners, chunk.value, chunk);
+      break;
+    case BLOCKED:
+      // It is possible that we're blocked on our own chunk if it's a cycle.
+      // Before adding back the listeners to the chunk, let's check if it would
+      // result in a cycle.
+      for (let i = 0; i < resolveListeners.length; i++) {
+        const listener = resolveListeners[i];
+        if (typeof listener !== 'function') {
+          const reference: InitializationReference = listener;
+          const cyclicHandler = resolveBlockedCycle(chunk, reference);
+          if (cyclicHandler !== null) {
+            // This reference points back to this chunk. We can resolve the cycle by
+            // using the value from that handler.
+            fulfillReference(response, reference, cyclicHandler.value, chunk);
+            resolveListeners.splice(i, 1);
+            i--;
+            if (rejectListeners !== null) {
+              const rejectionIdx = rejectListeners.indexOf(reference);
+              if (rejectionIdx !== -1) {
+                rejectListeners.splice(rejectionIdx, 1);
+              }
+            }
+            // The status might have changed after fulfilling the reference.
+            switch ((chunk: SomeChunk<T>).status) {
+              case INITIALIZED:
+                const initializedChunk: InitializedChunk<T> = (chunk: any);
+                wakeChunk(
+                  response,
+                  resolveListeners,
+                  initializedChunk.value,
+                  initializedChunk,
+                );
+                return;
+              case ERRORED:
+                if (rejectListeners !== null) {
+                  rejectChunk(response, rejectListeners, chunk.reason);
+                }
+                return;
+            }
+          }
+        }
+      }
+    // Fallthrough
+    case PENDING:
+      if (chunk.value) {
+        for (let i = 0; i < resolveListeners.length; i++) {
+          chunk.value.push(resolveListeners[i]);
+        }
+      } else {
+        chunk.value = resolveListeners;
+      }
+
+      if (chunk.reason) {
+        if (rejectListeners) {
+          for (let i = 0; i < rejectListeners.length; i++) {
+            chunk.reason.push(rejectListeners[i]);
+          }
+        }
+      } else {
+        chunk.reason = rejectListeners;
+      }
+
+      break;
+    case ERRORED:
+      if (rejectListeners) {
+        rejectChunk(response, rejectListeners, chunk.reason);
+      }
+      break;
+  }
+}
+
+function triggerErrorOnChunk<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  error: mixed,
+): void {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
+    // If we get more data to an already resolved ID, we assume that it's
+    // a stream chunk since any other row shouldn't have more than one entry.
+    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const controller = streamChunk.reason;
+    // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+    controller.error(error);
+    return;
+  }
+  releasePendingChunk(response, chunk);
+  const listeners = chunk.reason;
+
+  if (__DEV__ && chunk.status === PENDING) {
+    // Lazily initialize any debug info and block the initializing chunk on any unresolved entries.
+    if (chunk._debugChunk != null) {
+      const prevHandler = initializingHandler;
+      const prevChunk = initializingChunk;
+      initializingHandler = null;
+      const cyclicChunk: BlockedChunk<T> = (chunk: any);
+      cyclicChunk.status = BLOCKED;
+      cyclicChunk.value = null;
+      cyclicChunk.reason = null;
+      if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+        initializingChunk = cyclicChunk;
+      }
+      try {
+        initializeDebugChunk(response, chunk);
+        if (initializingHandler !== null) {
+          if (initializingHandler.errored) {
+            // Ignore error parsing debug info, we'll report the original error instead.
+          } else if (initializingHandler.deps > 0) {
+            // TODO: Block the resolution of the error until all the debug info has loaded.
+            // We currently don't have a way to throw an error after all dependencies have
+            // loaded because we currently treat errors as immediately cancelling the handler.
+          }
+        }
+      } finally {
+        initializingHandler = prevHandler;
+        initializingChunk = prevChunk;
+      }
+    }
+  }
+
+  const erroredChunk: ErroredChunk<T> = (chunk: any);
+  erroredChunk.status = ERRORED;
+  erroredChunk.reason = error;
+  if (listeners !== null) {
+    rejectChunk(response, listeners, error);
+  }
+}
+
+function createResolvedModelChunk<T>(
+  response: Response,
+  value: UninitializedModel,
+): ResolvedModelChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(RESOLVED_MODEL, value, response);
+}
+
+function createResolvedModuleChunk<T>(
+  response: Response,
+  value: ClientReference<T>,
+): ResolvedModuleChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(RESOLVED_MODULE, value, null);
+}
+
+function createInitializedTextChunk(
+  response: Response,
+  value: string,
+): InitializedChunk<string> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(INITIALIZED, value, null);
+}
+
+function createInitializedBufferChunk(
+  response: Response,
+  value: $ArrayBufferView | ArrayBuffer,
+): InitializedChunk<Uint8Array> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(INITIALIZED, value, null);
+}
+
+function createInitializedIteratorResultChunk<T>(
+  response: Response,
+  value: T,
+  done: boolean,
+): InitializedChunk<IteratorResult<T, T>> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(INITIALIZED, {done: done, value: value}, null);
+}
+
+function createInitializedStreamChunk<
+  T: ReadableStream | $AsyncIterable<any, any, void>,
+>(
+  response: Response,
+  value: T,
+  controller: FlightStreamController,
+): InitializedChunk<T> {
+  if (__DEV__) {
+    // Retain a strong reference to the Response while we wait for chunks.
+    if (response._pendingChunks++ === 0) {
+      response._weakResponse.response = response;
+    }
+  }
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(INITIALIZED, value, controller);
+}
+
+function createResolvedIteratorResultChunk<T>(
+  response: Response,
+  value: UninitializedModel,
+  done: boolean,
+): ResolvedModelChunk<IteratorResult<T, T>> {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  const iteratorResultJSON =
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(RESOLVED_MODEL, iteratorResultJSON, response);
+}
+
+function resolveIteratorResultChunk<T>(
+  response: Response,
+  chunk: SomeChunk<IteratorResult<T, T>>,
+  value: UninitializedModel,
+  done: boolean,
+): void {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  const iteratorResultJSON =
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(response, chunk, iteratorResultJSON);
+}
+
+function resolveModelChunk<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  value: UninitializedModel,
+): void {
+  if (chunk.status !== PENDING) {
+    // If we get more data to an already resolved ID, we assume that it's
+    // a stream chunk since any other row shouldn't have more than one entry.
+    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const controller = streamChunk.reason;
+    controller.enqueueModel(value);
+    return;
+  }
+  releasePendingChunk(response, chunk);
+  const resolveListeners = chunk.value;
+  const rejectListeners = chunk.reason;
+  const resolvedChunk: ResolvedModelChunk<T> = (chunk: any);
+  resolvedChunk.status = RESOLVED_MODEL;
+  resolvedChunk.value = value;
+  resolvedChunk.reason = response;
+  if (resolveListeners !== null) {
+    // This is unfortunate that we're reading this eagerly if
+    // we already have listeners attached since they might no
+    // longer be rendered or might not be the highest pri.
+    initializeModelChunk(resolvedChunk);
+    // The status might have changed after initialization.
+    wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners);
+  }
+}
+
+function resolveModuleChunk<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  value: ClientReference<T>,
+): void {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
+    // We already resolved. We didn't expect to see this.
+    return;
+  }
+  releasePendingChunk(response, chunk);
+  const resolveListeners = chunk.value;
+  const rejectListeners = chunk.reason;
+  const resolvedChunk: ResolvedModuleChunk<T> = (chunk: any);
+  resolvedChunk.status = RESOLVED_MODULE;
+  resolvedChunk.value = value;
+  resolvedChunk.reason = null;
+  if (__DEV__) {
+    const debugInfo = getModuleDebugInfo(value);
+    if (debugInfo !== null) {
+      // Add to the live set if it was already initialized.
+      // $FlowFixMe[method-unbinding]
+      resolvedChunk._debugInfo.push.apply(resolvedChunk._debugInfo, debugInfo);
+    }
+  }
+  if (resolveListeners !== null) {
+    initializeModuleChunk(resolvedChunk);
+    wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners);
+  }
+}
+
+type InitializationReference = {
+  handler: InitializationHandler,
+  parentObject: Object,
+  key: string,
+  map: (
+    response: Response,
+    model: any,
+    parentObject: Object,
+    key: string,
+  ) => any,
+  path: Array<string>,
+  isDebug?: boolean, // DEV-only
+};
+type InitializationHandler = {
+  parent: null | InitializationHandler,
+  chunk: null | BlockedChunk<any>,
+  value: any,
+  reason: any,
+  deps: number,
+  errored: boolean,
+};
+let initializingHandler: null | InitializationHandler = null;
+let initializingChunk: null | BlockedChunk<any> = null;
+
+function initializeDebugChunk(
+  response: Response,
+  chunk: ResolvedModelChunk<any> | PendingChunk<any>,
+): void {
+  const debugChunk = chunk._debugChunk;
+  if (debugChunk !== null) {
+    const debugInfo = chunk._debugInfo;
+    try {
+      if (debugChunk.status === RESOLVED_MODEL) {
+        // Find the index of this debug info by walking the linked list.
+        let idx = debugInfo.length;
+        let c = debugChunk._debugChunk;
+        while (c !== null) {
+          if (c.status !== INITIALIZED) {
+            idx++;
+          }
+          c = c._debugChunk;
+        }
+        // Initializing the model for the first time.
+        initializeModelChunk(debugChunk);
+        const initializedChunk = ((debugChunk: any): SomeChunk<any>);
+        switch (initializedChunk.status) {
+          case INITIALIZED: {
+            debugInfo[idx] = initializeDebugInfo(
+              response,
+              initializedChunk.value,
+            );
+            break;
+          }
+          case BLOCKED:
+          case PENDING: {
+            waitForReference(
+              initializedChunk,
+              debugInfo,
+              '' + idx,
+              response,
+              initializeDebugInfo,
+              [''], // path
+              true,
+            );
+            break;
+          }
+          default:
+            throw initializedChunk.reason;
+        }
+      } else {
+        switch (debugChunk.status) {
+          case INITIALIZED: {
+            // Already done.
+            break;
+          }
+          case BLOCKED:
+          case PENDING: {
+            // Signal to the caller that we need to wait.
+            waitForReference(
+              debugChunk,
+              {}, // noop, since we'll have already added an entry to debug info
+              'debug', // noop, but we need it to not be empty string since that indicates the root object
+              response,
+              initializeDebugInfo,
+              [''], // path
+              true,
+            );
+            break;
+          }
+          default:
+            throw debugChunk.reason;
+        }
+      }
+    } catch (error) {
+      triggerErrorOnChunk(response, chunk, error);
+    }
+  }
+}
+
+function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
+  const prevHandler = initializingHandler;
+  const prevChunk = initializingChunk;
+  initializingHandler = null;
+
+  const resolvedModel = chunk.value;
+  const response = chunk.reason;
+
+  // We go to the BLOCKED state until we've fully resolved this.
+  // We do this before parsing in case we try to initialize the same chunk
+  // while parsing the model. Such as in a cyclic reference.
+  const cyclicChunk: BlockedChunk<T> = (chunk: any);
+  cyclicChunk.status = BLOCKED;
+  cyclicChunk.value = null;
+  cyclicChunk.reason = null;
+
+  if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+    initializingChunk = cyclicChunk;
+  }
+
+  if (__DEV__) {
+    // Initialize any debug info and block the initializing chunk on any
+    // unresolved entries.
+    initializeDebugChunk(response, chunk);
+  }
+
+  try {
+    const value: T = parseModel(response, resolvedModel);
+    // Invoke any listeners added while resolving this model. I.e. cyclic
+    // references. This may or may not fully resolve the model depending on
+    // if they were blocked.
+    const resolveListeners = cyclicChunk.value;
+    if (resolveListeners !== null) {
+      cyclicChunk.value = null;
+      cyclicChunk.reason = null;
+      for (let i = 0; i < resolveListeners.length; i++) {
+        const listener = resolveListeners[i];
+        if (typeof listener === 'function') {
+          listener(value);
+        } else {
+          fulfillReference(response, listener, value, cyclicChunk);
+        }
+      }
+    }
+    if (initializingHandler !== null) {
+      if (initializingHandler.errored) {
+        throw initializingHandler.reason;
+      }
+      if (initializingHandler.deps > 0) {
+        // We discovered new dependencies on modules that are not yet resolved.
+        // We have to keep the BLOCKED state until they're resolved.
+        initializingHandler.value = value;
+        initializingHandler.chunk = cyclicChunk;
+        return;
+      }
+    }
+    const initializedChunk: InitializedChunk<T> = (chunk: any);
+    initializedChunk.status = INITIALIZED;
+    initializedChunk.value = value;
+
+    if (__DEV__) {
+      processChunkDebugInfo(response, initializedChunk, value);
+    }
+  } catch (error) {
+    const erroredChunk: ErroredChunk<T> = (chunk: any);
+    erroredChunk.status = ERRORED;
+    erroredChunk.reason = error;
+  } finally {
+    initializingHandler = prevHandler;
+    if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+      initializingChunk = prevChunk;
+    }
+  }
+}
+
+function initializeModuleChunk<T>(chunk: ResolvedModuleChunk<T>): void {
+  try {
+    const value: T = requireModule(chunk.value);
+    const initializedChunk: InitializedChunk<T> = (chunk: any);
+    initializedChunk.status = INITIALIZED;
+    initializedChunk.value = value;
+  } catch (error) {
+    const erroredChunk: ErroredChunk<T> = (chunk: any);
+    erroredChunk.status = ERRORED;
+    erroredChunk.reason = error;
+  }
+}
+
+// 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(
+  weakResponse: WeakResponse,
+  error: Error,
+): void {
+  if (hasGCedResponse(weakResponse)) {
+    // Ignore close signal if we are not awaiting any more pending chunks.
+    return;
+  }
+  const response = unwrapWeakResponse(weakResponse);
+  response._closed = true;
+  response._closedReason = error;
+  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.
+    if (chunk.status === PENDING) {
+      triggerErrorOnChunk(response, chunk, error);
+    } else if (chunk.status === INITIALIZED && chunk.reason !== null) {
+      chunk.reason.error(error);
+    }
+  });
+  if (__DEV__) {
+    const debugChannel = response._debugChannel;
+    if (debugChannel !== undefined) {
+      // If we don't have any more ways of reading data, we don't have to send
+      // any more neither. So we close the writable side.
+      closeDebugChannel(debugChannel);
+      response._debugChannel = undefined;
+      // Make sure the debug channel is not closed a second time when the
+      // Response gets GC:ed.
+      if (debugChannelRegistry !== null) {
+        debugChannelRegistry.unregister(response);
+      }
+    }
+  }
+}
+
+function nullRefGetter() {
+  if (__DEV__) {
+    return null;
+  }
+}
+
+function getIOInfoTaskName(ioInfo: ReactIOInfo): string {
+  return ioInfo.name || 'unknown';
+}
+
+function getAsyncInfoTaskName(asyncInfo: ReactAsyncInfo): string {
+  return 'await ' + getIOInfoTaskName(asyncInfo.awaited);
+}
+
+function getServerComponentTaskName(componentInfo: ReactComponentInfo): string {
+  return '<' + (componentInfo.name || '...') + '>';
+}
+
+function getTaskName(type: mixed): string {
+  if (type === REACT_FRAGMENT_TYPE) {
+    return '<>';
+  }
+  if (typeof type === 'function') {
+    // This is a function so it must have been a Client Reference that resolved to
+    // a function. We use "use client" to indicate that this is the boundary into
+    // the client. There should only be one for any given owner chain.
+    return '"use client"';
+  }
+  if (
+    typeof type === 'object' &&
+    type !== null &&
+    type.$$typeof === REACT_LAZY_TYPE
+  ) {
+    if (type._init === readChunk) {
+      // This is a lazy node created by Flight. It is probably a client reference.
+      // We use the "use client" string to indicate that this is the boundary into
+      // the client. There will only be one for any given owner chain.
+      return '"use client"';
+    }
+    // We don't want to eagerly initialize the initializer in DEV mode so we can't
+    // call it to extract the type so we don't know the type of this component.
+    return '<...>';
+  }
+  try {
+    const name = getComponentNameFromType(type);
+    return name ? '<' + name + '>' : '<...>';
+  } catch (x) {
+    return '<...>';
+  }
+}
+
+function initializeElement(
+  response: Response,
+  element: any,
+  lazyNode: null | LazyComponent<
+    React$Element<any>,
+    SomeChunk<React$Element<any>>,
+  >,
+): void {
+  if (!__DEV__) {
+    return;
+  }
+  const stack = element._debugStack;
+  const owner = element._owner;
+  if (owner === null) {
+    element._owner = response._debugRootOwner;
+  }
+  let env = response._rootEnvironmentName;
+  if (owner !== null && owner.env != null) {
+    // Interestingly we don't actually have the environment name of where
+    // this JSX was created if it doesn't have an owner but if it does
+    // it must be the same environment as the owner. We could send it separately
+    // but it seems a bit unnecessary for this edge case.
+    env = owner.env;
+  }
+  let normalizedStackTrace: null | Error = null;
+  if (owner === null && response._debugRootStack != null) {
+    // We override the stack if we override the owner since the stack where the root JSX
+    // was created on the server isn't very useful but where the request was made is.
+    normalizedStackTrace = response._debugRootStack;
+  } else if (stack !== null) {
+    // We create a fake stack and then create an Error object inside of it.
+    // This means that the stack trace is now normalized into the native format
+    // of the browser and the stack frames will have been registered with
+    // source mapping information.
+    // This can unfortunately happen within a user space callstack which will
+    // remain on the stack.
+    normalizedStackTrace = createFakeJSXCallStackInDEV(response, stack, env);
+  }
+  element._debugStack = normalizedStackTrace;
+  let task: null | ConsoleTask = null;
+  if (supportsCreateTask && stack !== null) {
+    const createTaskFn = (console: any).createTask.bind(
+      console,
+      getTaskName(element.type),
+    );
+    const callStack = buildFakeCallStack(
+      response,
+      stack,
+      env,
+      false,
+      createTaskFn,
+    );
+    // This owner should ideally have already been initialized to avoid getting
+    // user stack frames on the stack.
+    const ownerTask =
+      owner === null ? null : initializeFakeTask(response, owner);
+    if (ownerTask === null) {
+      const rootTask = response._debugRootTask;
+      if (rootTask != null) {
+        task = rootTask.run(callStack);
+      } else {
+        task = callStack();
+      }
+    } else {
+      task = ownerTask.run(callStack);
+    }
+  }
+  element._debugTask = task;
+
+  // This owner should ideally have already been initialized to avoid getting
+  // user stack frames on the stack.
+  if (owner !== null) {
+    initializeFakeStack(response, owner);
+  }
+
+  if (lazyNode !== null) {
+    // In case the JSX runtime has validated the lazy type as a static child, we
+    // need to transfer this information to the element.
+    if (
+      lazyNode._store &&
+      lazyNode._store.validated &&
+      !element._store.validated
+    ) {
+      element._store.validated = lazyNode._store.validated;
+    }
+
+    // If the lazy node is initialized, we move its debug info to the inner
+    // value.
+    if (lazyNode._payload.status === INITIALIZED && lazyNode._debugInfo) {
+      const debugInfo = lazyNode._debugInfo.splice(0);
+      if (element._debugInfo) {
+        // $FlowFixMe[method-unbinding]
+        element._debugInfo.unshift.apply(element._debugInfo, debugInfo);
+      } else {
+        Object.defineProperty(element, '_debugInfo', {
+          configurable: false,
+          enumerable: false,
+          writable: true,
+          value: debugInfo,
+        });
+      }
+    }
+  }
+
+  // TODO: We should be freezing the element but currently, we might write into
+  // _debugInfo later. We could move it into _store which remains mutable.
+  Object.freeze(element.props);
+}
+
+function createElement(
+  response: Response,
+  type: mixed,
+  key: mixed,
+  props: mixed,
+  owner: ?ReactComponentInfo, // DEV-only
+  stack: ?ReactStackTrace, // DEV-only
+  validated: 0 | 1 | 2, // DEV-only
+):
+  | React$Element<any>
+  | LazyComponent<React$Element<any>, SomeChunk<React$Element<any>>> {
+  let element: any;
+  if (__DEV__) {
+    // `ref` is non-enumerable in dev
+    element = ({
+      $$typeof: REACT_ELEMENT_TYPE,
+      type,
+      key,
+      props,
+      _owner: owner === undefined ? null : owner,
+    }: any);
+    Object.defineProperty(element, 'ref', {
+      enumerable: false,
+      get: nullRefGetter,
+    });
+  } else {
+    element = ({
+      // This tag allows us to uniquely identify this as a React Element
+      $$typeof: REACT_ELEMENT_TYPE,
+
+      type,
+      key,
+      ref: null,
+      props,
+    }: any);
+  }
+
+  if (__DEV__) {
+    // We don't really need to add any of these but keeping them for good measure.
+    // Unfortunately, _store is enumerable in jest matchers so for equality to
+    // work, I need to keep it or make _store non-enumerable in the other file.
+    element._store = ({}: {
+      validated?: number,
+    });
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: validated, // Whether the element has already been validated on the server.
+    });
+    // debugInfo contains Server Component debug information.
+    Object.defineProperty(element, '_debugInfo', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: null,
+    });
+    Object.defineProperty(element, '_debugStack', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: stack === undefined ? null : stack,
+    });
+    Object.defineProperty(element, '_debugTask', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: null,
+    });
+  }
+
+  if (initializingHandler !== null) {
+    const handler = initializingHandler;
+    // We pop the stack to the previous outer handler before leaving the Element.
+    // This is effectively the complete phase.
+    initializingHandler = handler.parent;
+    if (handler.errored) {
+      // Something errored inside this Element's props. We can turn this Element
+      // into a Lazy so that we can still render up until that Lazy is rendered.
+      const erroredChunk: ErroredChunk<React$Element<any>> = createErrorChunk(
+        response,
+        handler.reason,
+      );
+      if (__DEV__) {
+        initializeElement(response, element, null);
+        // Conceptually the error happened inside this Element but right before
+        // it was rendered. We don't have a client side component to render but
+        // we can add some DebugInfo to explain that this was conceptually a
+        // Server side error that errored inside this element. That way any stack
+        // traces will point to the nearest JSX that errored - e.g. during
+        // serialization.
+        const erroredComponent: ReactComponentInfo = {
+          name: getComponentNameFromType(element.type) || '',
+          owner: element._owner,
+        };
+        // $FlowFixMe[cannot-write]
+        erroredComponent.debugStack = element._debugStack;
+        if (supportsCreateTask) {
+          // $FlowFixMe[cannot-write]
+          erroredComponent.debugTask = element._debugTask;
+        }
+        erroredChunk._debugInfo = [erroredComponent];
+      }
+      return createLazyChunkWrapper(erroredChunk, validated);
+    }
+    if (handler.deps > 0) {
+      // We have blocked references inside this Element but we can turn this into
+      // a Lazy node referencing this Element to let everything around it proceed.
+      const blockedChunk: BlockedChunk<React$Element<any>> =
+        createBlockedChunk(response);
+      handler.value = element;
+      handler.chunk = blockedChunk;
+      const lazyNode = createLazyChunkWrapper(blockedChunk, validated);
+      if (__DEV__) {
+        // After we have initialized any blocked references, initialize stack etc.
+        const init = initializeElement.bind(null, response, element, lazyNode);
+        blockedChunk.then(init, init);
+      }
+      return lazyNode;
+    }
+  }
+  if (__DEV__) {
+    initializeElement(response, element, null);
+  }
+
+  return element;
+}
+
+function createLazyChunkWrapper<T>(
+  chunk: SomeChunk<T>,
+  validated: 0 | 1 | 2, // DEV-only
+): LazyComponent<T, SomeChunk<T>> {
+  const lazyType: LazyComponent<T, SomeChunk<T>> = {
+    $$typeof: REACT_LAZY_TYPE,
+    _payload: chunk,
+    _init: readChunk,
+  };
+  if (__DEV__) {
+    // Forward the live array
+    lazyType._debugInfo = chunk._debugInfo;
+    // Initialize a store for key validation by the JSX runtime.
+    lazyType._store = {validated: validated};
+  }
+  return lazyType;
+}
+
+function getChunk(response: Response, id: number): SomeChunk<any> {
+  const chunks = response._chunks;
+  let chunk = chunks.get(id);
+  if (!chunk) {
+    if (response._closed) {
+      // We have already errored the response and we're not going to get
+      // anything more streaming in so this will immediately error.
+      chunk = createErrorChunk(response, response._closedReason);
+    } else {
+      chunk = createPendingChunk(response);
+    }
+    chunks.set(id, chunk);
+  }
+  return chunk;
+}
+
+function fulfillReference(
+  response: Response,
+  reference: InitializationReference,
+  value: any,
+  fulfilledChunk: SomeChunk<any>,
+): void {
+  const {handler, parentObject, key, map, path} = reference;
+
+  try {
+    for (let i = 1; i < path.length; i++) {
+      while (
+        typeof value === 'object' &&
+        value !== null &&
+        value.$$typeof === REACT_LAZY_TYPE
+      ) {
+        // We never expect to see a Lazy node on this path because we encode those as
+        // separate models. This must mean that we have inserted an extra lazy node
+        // e.g. to replace a blocked element. We must instead look for it inside.
+        const referencedChunk: SomeChunk<any> = value._payload;
+        if (referencedChunk === handler.chunk) {
+          // This is a reference to the thing we're currently blocking. We can peak
+          // inside of it to get the value.
+          value = handler.value;
+          continue;
+        } else {
+          switch (referencedChunk.status) {
+            case RESOLVED_MODEL:
+              initializeModelChunk(referencedChunk);
+              break;
+            case RESOLVED_MODULE:
+              initializeModuleChunk(referencedChunk);
+              break;
+          }
+          switch (referencedChunk.status) {
+            case INITIALIZED: {
+              value = referencedChunk.value;
+              continue;
+            }
+            case BLOCKED: {
+              // It is possible that we're blocked on our own chunk if it's a cycle.
+              // Before adding the listener to the inner chunk, let's check if it would
+              // result in a cycle.
+              const cyclicHandler = resolveBlockedCycle(
+                referencedChunk,
+                reference,
+              );
+              if (cyclicHandler !== null) {
+                // This reference points back to this chunk. We can resolve the cycle by
+                // using the value from that handler.
+                value = cyclicHandler.value;
+                continue;
+              }
+              // Fallthrough
+            }
+            case PENDING: {
+              // If we're not yet initialized we need to skip what we've already drilled
+              // through and then wait for the next value to become available.
+              path.splice(0, i - 1);
+              // Add "listener" to our new chunk dependency.
+              if (referencedChunk.value === null) {
+                referencedChunk.value = [reference];
+              } else {
+                referencedChunk.value.push(reference);
+              }
+              if (referencedChunk.reason === null) {
+                referencedChunk.reason = [reference];
+              } else {
+                referencedChunk.reason.push(reference);
+              }
+              return;
+            }
+            case HALTED: {
+              // Do nothing. We couldn't fulfill.
+              // TODO: Mark downstreams as halted too.
+              return;
+            }
+            default: {
+              rejectReference(
+                response,
+                reference.handler,
+                referencedChunk.reason,
+              );
+              return;
+            }
+          }
+        }
+      }
+      value = value[path[i]];
+    }
+
+    while (
+      typeof value === 'object' &&
+      value !== null &&
+      value.$$typeof === REACT_LAZY_TYPE
+    ) {
+      // If what we're referencing is a Lazy it must be because we inserted one as a virtual node
+      // while it was blocked by other data. If it's no longer blocked, we can unwrap it.
+      const referencedChunk: SomeChunk<any> = value._payload;
+      if (referencedChunk === handler.chunk) {
+        // This is a reference to the thing we're currently blocking. We can peak
+        // inside of it to get the value.
+        value = handler.value;
+        continue;
+      } else {
+        switch (referencedChunk.status) {
+          case RESOLVED_MODEL:
+            initializeModelChunk(referencedChunk);
+            break;
+          case RESOLVED_MODULE:
+            initializeModuleChunk(referencedChunk);
+            break;
+        }
+        switch (referencedChunk.status) {
+          case INITIALIZED: {
+            value = referencedChunk.value;
+            continue;
+          }
+        }
+      }
+      break;
+    }
+
+    const mappedValue = map(response, value, parentObject, key);
+    parentObject[key] = mappedValue;
+
+    // If this is the root object for a model reference, where `handler.value`
+    // is a stale `null`, the resolved value can be used directly.
+    if (key === '' && handler.value === null) {
+      handler.value = mappedValue;
+    }
+
+    // If the parent object is an unparsed React element tuple, we also need to
+    // update the props and owner of the parsed element object (i.e.
+    // handler.value).
+    if (
+      parentObject[0] === REACT_ELEMENT_TYPE &&
+      typeof handler.value === 'object' &&
+      handler.value !== null &&
+      handler.value.$$typeof === REACT_ELEMENT_TYPE
+    ) {
+      const element: any = handler.value;
+      switch (key) {
+        case '3':
+          transferReferencedDebugInfo(handler.chunk, fulfilledChunk);
+          element.props = mappedValue;
+          break;
+        case '4':
+          // This path doesn't call transferReferencedDebugInfo because this reference is to a debug chunk.
+          if (__DEV__) {
+            element._owner = mappedValue;
+          }
+          break;
+        case '5':
+          // This path doesn't call transferReferencedDebugInfo because this reference is to a debug chunk.
+          if (__DEV__) {
+            element._debugStack = mappedValue;
+          }
+          break;
+        default:
+          transferReferencedDebugInfo(handler.chunk, fulfilledChunk);
+          break;
+      }
+    } else if (__DEV__ && !reference.isDebug) {
+      transferReferencedDebugInfo(handler.chunk, fulfilledChunk);
+    }
+  } catch (error) {
+    rejectReference(response, reference.handler, error);
+    return;
+  }
+
+  handler.deps--;
+
+  if (handler.deps === 0) {
+    const chunk = handler.chunk;
+    if (chunk === null || chunk.status !== BLOCKED) {
+      return;
+    }
+    const resolveListeners = chunk.value;
+    const initializedChunk: InitializedChunk<any> = (chunk: any);
+    initializedChunk.status = INITIALIZED;
+    initializedChunk.value = handler.value;
+    initializedChunk.reason = handler.reason; // Used by streaming chunks
+    if (resolveListeners !== null) {
+      wakeChunk(response, resolveListeners, handler.value, initializedChunk);
+    } else {
+      if (__DEV__) {
+        processChunkDebugInfo(response, initializedChunk, handler.value);
+      }
+    }
+  }
+}
+
+function rejectReference(
+  response: Response,
+  handler: InitializationHandler,
+  error: mixed,
+): void {
+  if (handler.errored) {
+    // We've already errored. We could instead build up an AggregateError
+    // but if there are multiple errors we just take the first one like
+    // Promise.all.
+    return;
+  }
+  const blockedValue = handler.value;
+  handler.errored = true;
+  handler.value = null;
+  handler.reason = error;
+  const chunk = handler.chunk;
+  if (chunk === null || chunk.status !== BLOCKED) {
+    return;
+  }
+
+  if (__DEV__) {
+    if (
+      typeof blockedValue === 'object' &&
+      blockedValue !== null &&
+      blockedValue.$$typeof === REACT_ELEMENT_TYPE
+    ) {
+      const element = blockedValue;
+      // Conceptually the error happened inside this Element but right before
+      // it was rendered. We don't have a client side component to render but
+      // we can add some DebugInfo to explain that this was conceptually a
+      // Server side error that errored inside this element. That way any stack
+      // traces will point to the nearest JSX that errored - e.g. during
+      // serialization.
+      const erroredComponent: ReactComponentInfo = {
+        name: getComponentNameFromType(element.type) || '',
+        owner: element._owner,
+      };
+      // $FlowFixMe[cannot-write]
+      erroredComponent.debugStack = element._debugStack;
+      if (supportsCreateTask) {
+        // $FlowFixMe[cannot-write]
+        erroredComponent.debugTask = element._debugTask;
+      }
+      chunk._debugInfo.push(erroredComponent);
+    }
+  }
+
+  triggerErrorOnChunk(response, chunk, error);
+}
+
+function waitForReference<T>(
+  referencedChunk: PendingChunk<T> | BlockedChunk<T>,
+  parentObject: Object,
+  key: string,
+  response: Response,
+  map: (response: Response, model: any, parentObject: Object, key: string) => T,
+  path: Array<string>,
+  isAwaitingDebugInfo: boolean, // DEV-only
+): T {
+  if (
+    __DEV__ &&
+    (response._debugChannel === undefined ||
+      !response._debugChannel.hasReadable)
+  ) {
+    if (
+      referencedChunk.status === PENDING &&
+      parentObject[0] === REACT_ELEMENT_TYPE &&
+      (key === '4' || key === '5')
+    ) {
+      // If the parent object is an unparsed React element tuple, and this is a reference
+      // to the owner or debug stack. Then we expect the chunk to have been emitted earlier
+      // in the stream. It might be blocked on other things but chunk should no longer be pending.
+      // If it's still pending that suggests that it was referencing an object in the debug
+      // channel, but no debug channel was wired up so it's missing. In this case we can just
+      // drop the debug info instead of halting the whole stream.
+      return (null: any);
+    }
+  }
+
+  let handler: InitializationHandler;
+  if (initializingHandler) {
+    handler = initializingHandler;
+    handler.deps++;
+  } else {
+    handler = initializingHandler = {
+      parent: null,
+      chunk: null,
+      value: null,
+      reason: null,
+      deps: 1,
+      errored: false,
+    };
+  }
+
+  const reference: InitializationReference = {
+    handler,
+    parentObject,
+    key,
+    map,
+    path,
+  };
+  if (__DEV__) {
+    reference.isDebug = isAwaitingDebugInfo;
+  }
+
+  // Add "listener".
+  if (referencedChunk.value === null) {
+    referencedChunk.value = [reference];
+  } else {
+    referencedChunk.value.push(reference);
+  }
+  if (referencedChunk.reason === null) {
+    referencedChunk.reason = [reference];
+  } else {
+    referencedChunk.reason.push(reference);
+  }
+
+  // Return a place holder value for now.
+  return (null: any);
+}
+
+function loadServerReference<A: Iterable<any>, T>(
+  response: Response,
+  metaData: {
+    id: any,
+    bound: null | Thenable<Array<any>>,
+    name?: string, // DEV-only
+    env?: string, // DEV-only
+    location?: ReactFunctionLocation, // DEV-only
+  },
+  parentObject: Object,
+  key: string,
+): (...A) => Promise<T> {
+  if (!response._serverReferenceConfig) {
+    // In the normal case, we can't load this Server Reference in the current environment and
+    // we just return a proxy to it.
+    return createBoundServerReference(
+      metaData,
+      response._callServer,
+      response._encodeFormAction,
+      __DEV__ ? response._debugFindSourceMapURL : undefined,
+    );
+  }
+  // If we have a module mapping we can load the real version of this Server Reference.
+  const serverReference: ClientReference<T> =
+    resolveServerReference<$FlowFixMe>(
+      response._serverReferenceConfig,
+      metaData.id,
+    );
+
+  let promise: null | Thenable<any> = preloadModule(serverReference);
+  if (!promise) {
+    if (!metaData.bound) {
+      const resolvedValue = (requireModule(serverReference): any);
+      registerBoundServerReference(
+        resolvedValue,
+        metaData.id,
+        metaData.bound,
+        response._encodeFormAction,
+      );
+      return resolvedValue;
+    } else {
+      promise = Promise.resolve(metaData.bound);
+    }
+  } else if (metaData.bound) {
+    promise = Promise.all([promise, metaData.bound]);
+  }
+
+  let handler: InitializationHandler;
+  if (initializingHandler) {
+    handler = initializingHandler;
+    handler.deps++;
+  } else {
+    handler = initializingHandler = {
+      parent: null,
+      chunk: null,
+      value: null,
+      reason: null,
+      deps: 1,
+      errored: false,
+    };
+  }
+
+  function fulfill(): void {
+    let resolvedValue = (requireModule(serverReference): any);
+
+    if (metaData.bound) {
+      // This promise is coming from us and should have initilialized by now.
+      const boundArgs: Array<any> = (metaData.bound: any).value.slice(0);
+      boundArgs.unshift(null); // this
+      resolvedValue = resolvedValue.bind.apply(resolvedValue, boundArgs);
+    }
+
+    registerBoundServerReference(
+      resolvedValue,
+      metaData.id,
+      metaData.bound,
+      response._encodeFormAction,
+    );
+
+    parentObject[key] = resolvedValue;
+
+    // If this is the root object for a model reference, where `handler.value`
+    // is a stale `null`, the resolved value can be used directly.
+    if (key === '' && handler.value === null) {
+      handler.value = resolvedValue;
+    }
+
+    // If the parent object is an unparsed React element tuple, we also need to
+    // update the props and owner of the parsed element object (i.e.
+    // handler.value).
+    if (
+      parentObject[0] === REACT_ELEMENT_TYPE &&
+      typeof handler.value === 'object' &&
+      handler.value !== null &&
+      handler.value.$$typeof === REACT_ELEMENT_TYPE
+    ) {
+      const element: any = handler.value;
+      switch (key) {
+        case '3':
+          element.props = resolvedValue;
+          break;
+        case '4':
+          if (__DEV__) {
+            element._owner = resolvedValue;
+          }
+          break;
+      }
+    }
+
+    handler.deps--;
+
+    if (handler.deps === 0) {
+      const chunk = handler.chunk;
+      if (chunk === null || chunk.status !== BLOCKED) {
+        return;
+      }
+      const resolveListeners = chunk.value;
+      const initializedChunk: InitializedChunk<T> = (chunk: any);
+      initializedChunk.status = INITIALIZED;
+      initializedChunk.value = handler.value;
+      initializedChunk.reason = null;
+      if (resolveListeners !== null) {
+        wakeChunk(response, resolveListeners, handler.value, initializedChunk);
+      } else {
+        if (__DEV__) {
+          processChunkDebugInfo(response, initializedChunk, handler.value);
+        }
+      }
+    }
+  }
+
+  function reject(error: mixed): void {
+    if (handler.errored) {
+      // We've already errored. We could instead build up an AggregateError
+      // but if there are multiple errors we just take the first one like
+      // Promise.all.
+      return;
+    }
+    const blockedValue = handler.value;
+    handler.errored = true;
+    handler.value = null;
+    handler.reason = error;
+    const chunk = handler.chunk;
+    if (chunk === null || chunk.status !== BLOCKED) {
+      return;
+    }
+
+    if (__DEV__) {
+      if (
+        typeof blockedValue === 'object' &&
+        blockedValue !== null &&
+        blockedValue.$$typeof === REACT_ELEMENT_TYPE
+      ) {
+        const element = blockedValue;
+        // Conceptually the error happened inside this Element but right before
+        // it was rendered. We don't have a client side component to render but
+        // we can add some DebugInfo to explain that this was conceptually a
+        // Server side error that errored inside this element. That way any stack
+        // traces will point to the nearest JSX that errored - e.g. during
+        // serialization.
+        const erroredComponent: ReactComponentInfo = {
+          name: getComponentNameFromType(element.type) || '',
+          owner: element._owner,
+        };
+        // $FlowFixMe[cannot-write]
+        erroredComponent.debugStack = element._debugStack;
+        if (supportsCreateTask) {
+          // $FlowFixMe[cannot-write]
+          erroredComponent.debugTask = element._debugTask;
+        }
+        chunk._debugInfo.push(erroredComponent);
+      }
+    }
+
+    triggerErrorOnChunk(response, chunk, error);
+  }
+
+  promise.then(fulfill, reject);
+
+  // Return a place holder value for now.
+  return (null: any);
+}
+
+function resolveLazy(value: any): mixed {
+  while (
+    typeof value === 'object' &&
+    value !== null &&
+    value.$$typeof === REACT_LAZY_TYPE
+  ) {
+    const payload: SomeChunk<any> = value._payload;
+    if (payload.status === INITIALIZED) {
+      value = payload.value;
+      continue;
+    }
+    break;
+  }
+
+  return value;
+}
+
+function transferReferencedDebugInfo(
+  parentChunk: null | SomeChunk<any>,
+  referencedChunk: SomeChunk<any>,
+): void {
+  if (__DEV__) {
+    // We add the debug info to the initializing chunk since the resolution of
+    // that promise is also blocked by the referenced debug info. By adding it
+    // to both we can track it even if the array/element/lazy is extracted, or
+    // if the root is rendered as is.
+    if (parentChunk !== null) {
+      const referencedDebugInfo = referencedChunk._debugInfo;
+      const parentDebugInfo = parentChunk._debugInfo;
+      for (let i = 0; i < referencedDebugInfo.length; ++i) {
+        const debugInfoEntry = referencedDebugInfo[i];
+        if (debugInfoEntry.name != null) {
+          (debugInfoEntry: ReactComponentInfo);
+          // We're not transferring Component info since we use Component info
+          // in Debug info to fill in gaps between Fibers for the parent stack.
+        } else {
+          parentDebugInfo.push(debugInfoEntry);
+        }
+      }
+    }
+  }
+}
+
+function getOutlinedModel<T>(
+  response: Response,
+  reference: string,
+  parentObject: Object,
+  key: string,
+  map: (response: Response, model: any, parentObject: Object, key: string) => T,
+): T {
+  const path = reference.split(':');
+  const id = parseInt(path[0], 16);
+  const chunk = getChunk(response, id);
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (initializingChunk !== null && isArray(initializingChunk._children)) {
+      initializingChunk._children.push(chunk);
+    }
+  }
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+    case RESOLVED_MODULE:
+      initializeModuleChunk(chunk);
+      break;
+  }
+  // The status might have changed after initialization.
+  switch (chunk.status) {
+    case INITIALIZED:
+      let value = chunk.value;
+      for (let i = 1; i < path.length; i++) {
+        while (
+          typeof value === 'object' &&
+          value !== null &&
+          value.$$typeof === REACT_LAZY_TYPE
+        ) {
+          const referencedChunk: SomeChunk<any> = value._payload;
+          switch (referencedChunk.status) {
+            case RESOLVED_MODEL:
+              initializeModelChunk(referencedChunk);
+              break;
+            case RESOLVED_MODULE:
+              initializeModuleChunk(referencedChunk);
+              break;
+          }
+          switch (referencedChunk.status) {
+            case INITIALIZED: {
+              value = referencedChunk.value;
+              break;
+            }
+            case BLOCKED:
+            case PENDING: {
+              return waitForReference(
+                referencedChunk,
+                parentObject,
+                key,
+                response,
+                map,
+                path.slice(i - 1),
+                false,
+              );
+            }
+            case HALTED: {
+              // Add a dependency that will never resolve.
+              // TODO: Mark downstreams as halted too.
+              let handler: InitializationHandler;
+              if (initializingHandler) {
+                handler = initializingHandler;
+                handler.deps++;
+              } else {
+                handler = initializingHandler = {
+                  parent: null,
+                  chunk: null,
+                  value: null,
+                  reason: null,
+                  deps: 1,
+                  errored: false,
+                };
+              }
+              return (null: any);
+            }
+            default: {
+              // This is an error. Instead of erroring directly, we're going to encode this on
+              // an initialization handler so that we can catch it at the nearest Element.
+              if (initializingHandler) {
+                initializingHandler.errored = true;
+                initializingHandler.value = null;
+                initializingHandler.reason = referencedChunk.reason;
+              } else {
+                initializingHandler = {
+                  parent: null,
+                  chunk: null,
+                  value: null,
+                  reason: referencedChunk.reason,
+                  deps: 0,
+                  errored: true,
+                };
+              }
+              return (null: any);
+            }
+          }
+        }
+        value = value[path[i]];
+      }
+
+      while (
+        typeof value === 'object' &&
+        value !== null &&
+        value.$$typeof === REACT_LAZY_TYPE
+      ) {
+        // If what we're referencing is a Lazy it must be because we inserted one as a virtual node
+        // while it was blocked by other data. If it's no longer blocked, we can unwrap it.
+        const referencedChunk: SomeChunk<any> = value._payload;
+        switch (referencedChunk.status) {
+          case RESOLVED_MODEL:
+            initializeModelChunk(referencedChunk);
+            break;
+          case RESOLVED_MODULE:
+            initializeModuleChunk(referencedChunk);
+            break;
+        }
+        switch (referencedChunk.status) {
+          case INITIALIZED: {
+            value = referencedChunk.value;
+            continue;
+          }
+        }
+        break;
+      }
+
+      const chunkValue = map(response, value, parentObject, key);
+      if (
+        parentObject[0] === REACT_ELEMENT_TYPE &&
+        (key === '4' || key === '5')
+      ) {
+        // If we're resolving the "owner" or "stack" slot of an Element array, we don't call
+        // transferReferencedDebugInfo because this reference is to a debug chunk.
+      } else {
+        transferReferencedDebugInfo(initializingChunk, chunk);
+      }
+      return chunkValue;
+    case PENDING:
+    case BLOCKED:
+      return waitForReference(
+        chunk,
+        parentObject,
+        key,
+        response,
+        map,
+        path,
+        false,
+      );
+    case HALTED: {
+      // Add a dependency that will never resolve.
+      // TODO: Mark downstreams as halted too.
+      let handler: InitializationHandler;
+      if (initializingHandler) {
+        handler = initializingHandler;
+        handler.deps++;
+      } else {
+        handler = initializingHandler = {
+          parent: null,
+          chunk: null,
+          value: null,
+          reason: null,
+          deps: 1,
+          errored: false,
+        };
+      }
+      return (null: any);
+    }
+    default:
+      // This is an error. Instead of erroring directly, we're going to encode this on
+      // an initialization handler so that we can catch it at the nearest Element.
+      if (initializingHandler) {
+        initializingHandler.errored = true;
+        initializingHandler.value = null;
+        initializingHandler.reason = chunk.reason;
+      } else {
+        initializingHandler = {
+          parent: null,
+          chunk: null,
+          value: null,
+          reason: chunk.reason,
+          deps: 0,
+          errored: true,
+        };
+      }
+      // Placeholder
+      return (null: any);
+  }
+}
+
+function createMap(
+  response: Response,
+  model: Array<[any, any]>,
+): Map<any, any> {
+  return new Map(model);
+}
+
+function createSet(response: Response, model: Array<any>): Set<any> {
+  return new Set(model);
+}
+
+function createBlob(response: Response, model: Array<any>): Blob {
+  return new Blob(model.slice(1), {type: model[0]});
+}
+
+function createFormData(
+  response: Response,
+  model: Array<[any, any]>,
+): FormData {
+  const formData = new FormData();
+  for (let i = 0; i < model.length; i++) {
+    formData.append(model[i][0], model[i][1]);
+  }
+  return formData;
+}
+
+function applyConstructor(
+  response: Response,
+  model: Function,
+  parentObject: Object,
+  key: string,
+): void {
+  Object.setPrototypeOf(parentObject, model.prototype);
+  // Delete the property. It was just a placeholder.
+  return undefined;
+}
+
+function defineLazyGetter<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  parentObject: Object,
+  key: string,
+): any {
+  // We don't immediately initialize it even if it's resolved.
+  // Instead, we wait for the getter to get accessed.
+  Object.defineProperty(parentObject, key, {
+    get: function () {
+      if (chunk.status === RESOLVED_MODEL) {
+        // If it was now resolved, then we initialize it. This may then discover
+        // a new set of lazy references that are then asked for eagerly in case
+        // we get that deep.
+        initializeModelChunk(chunk);
+      }
+      switch (chunk.status) {
+        case INITIALIZED: {
+          return chunk.value;
+        }
+        case ERRORED:
+          throw chunk.reason;
+      }
+      // Otherwise, we didn't have enough time to load the object before it was
+      // accessed or the connection closed. So we just log that it was omitted.
+      // TODO: We should ideally throw here to indicate a difference.
+      return OMITTED_PROP_ERROR;
+    },
+    enumerable: true,
+    configurable: false,
+  });
+  return null;
+}
+
+function extractIterator(response: Response, model: Array<any>): Iterator<any> {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response: Response, model: any): any {
+  return model;
+}
+
+const mightHaveStaticConstructor = /\bclass\b.*\bstatic\b/;
+
+function getInferredFunctionApproximate(code: string): () => void {
+  let slicedCode;
+  if (code.startsWith('Object.defineProperty(')) {
+    slicedCode = code.slice('Object.defineProperty('.length);
+  } else if (code.startsWith('(')) {
+    slicedCode = code.slice(1);
+  } else {
+    slicedCode = code;
+  }
+  if (slicedCode.startsWith('async function')) {
+    const idx = slicedCode.indexOf('(', 14);
+    if (idx !== -1) {
+      const name = slicedCode.slice(14, idx).trim();
+      // eslint-disable-next-line no-eval
+      return (0, eval)('({' + JSON.stringify(name) + ':async function(){}})')[
+        name
+      ];
+    }
+  } else if (slicedCode.startsWith('function')) {
+    const idx = slicedCode.indexOf('(', 8);
+    if (idx !== -1) {
+      const name = slicedCode.slice(8, idx).trim();
+      // eslint-disable-next-line no-eval
+      return (0, eval)('({' + JSON.stringify(name) + ':function(){}})')[name];
+    }
+  } else if (slicedCode.startsWith('class')) {
+    const idx = slicedCode.indexOf('{', 5);
+    if (idx !== -1) {
+      const name = slicedCode.slice(5, idx).trim();
+      // eslint-disable-next-line no-eval
+      return (0, eval)('({' + JSON.stringify(name) + ':class{}})')[name];
+    }
+  }
+  return function () {};
+}
+
+function parseModelString(
+  response: Response,
+  parentObject: Object,
+  key: string,
+  value: string,
+): any {
+  if (value[0] === '$') {
+    if (value === '$') {
+      // A very common symbol.
+      if (initializingHandler !== null && key === '0') {
+        // We we already have an initializing handler and we're abound to enter
+        // a new element, we need to shadow it because we're now in a new scope.
+        // This is effectively the "begin" or "push" phase of Element parsing.
+        // We'll pop later when we parse the array itself.
+        initializingHandler = {
+          parent: initializingHandler,
+          chunk: null,
+          value: null,
+          reason: null,
+          deps: 0,
+          errored: false,
+        };
+      }
+      return REACT_ELEMENT_TYPE;
+    }
+    switch (value[1]) {
+      case '$': {
+        // This was an escaped string value.
+        return value.slice(1);
+      }
+      case 'L': {
+        // Lazy node
+        const id = parseInt(value.slice(2), 16);
+        const chunk = getChunk(response, id);
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          if (
+            initializingChunk !== null &&
+            isArray(initializingChunk._children)
+          ) {
+            initializingChunk._children.push(chunk);
+          }
+        }
+        // We create a React.lazy wrapper around any lazy values.
+        // When passed into React, we'll know how to suspend on this.
+        return createLazyChunkWrapper(chunk, 0);
+      }
+      case '@': {
+        // Promise
+        const id = parseInt(value.slice(2), 16);
+        const chunk = getChunk(response, id);
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          if (
+            initializingChunk !== null &&
+            isArray(initializingChunk._children)
+          ) {
+            initializingChunk._children.push(chunk);
+          }
+        }
+        return chunk;
+      }
+      case 'S': {
+        // Symbol
+        return Symbol.for(value.slice(2));
+      }
+      case 'h': {
+        // Server Reference
+        const ref = value.slice(2);
+        return getOutlinedModel(
+          response,
+          ref,
+          parentObject,
+          key,
+          loadServerReference,
+        );
+      }
+      case 'T': {
+        // Temporary Reference
+        const reference = '$' + value.slice(2);
+        const temporaryReferences = response._tempRefs;
+        if (temporaryReferences == null) {
+          throw new Error(
+            'Missing a temporary reference set but the RSC response returned a temporary reference. ' +
+              'Pass a temporaryReference option with the set that was used with the reply.',
+          );
+        }
+        return readTemporaryReference(temporaryReferences, reference);
+      }
+      case 'Q': {
+        // Map
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, parentObject, key, createMap);
+      }
+      case 'W': {
+        // Set
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, parentObject, key, createSet);
+      }
+      case 'B': {
+        // Blob
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, parentObject, key, createBlob);
+      }
+      case 'K': {
+        // FormData
+        const ref = value.slice(2);
+        return getOutlinedModel(
+          response,
+          ref,
+          parentObject,
+          key,
+          createFormData,
+        );
+      }
+      case 'Z': {
+        // Error
+        if (__DEV__) {
+          const ref = value.slice(2);
+          return getOutlinedModel(
+            response,
+            ref,
+            parentObject,
+            key,
+            resolveErrorDev,
+          );
+        } else {
+          return resolveErrorProd(response);
+        }
+      }
+      case 'i': {
+        // Iterator
+        const ref = value.slice(2);
+        return getOutlinedModel(
+          response,
+          ref,
+          parentObject,
+          key,
+          extractIterator,
+        );
+      }
+      case 'I': {
+        // $Infinity
+        return Infinity;
+      }
+      case '-': {
+        // $-0 or $-Infinity
+        if (value === '$-0') {
+          return -0;
+        } else {
+          return -Infinity;
+        }
+      }
+      case 'N': {
+        // $NaN
+        return NaN;
+      }
+      case 'u': {
+        // matches "$undefined"
+        // Special encoding for `undefined` which can't be serialized as JSON otherwise.
+        return undefined;
+      }
+      case 'D': {
+        // Date
+        return new Date(Date.parse(value.slice(2)));
+      }
+      case 'n': {
+        // BigInt
+        return BigInt(value.slice(2));
+      }
+      case 'P': {
+        if (__DEV__) {
+          // In DEV mode we allow debug objects to specify themselves as instances of
+          // another constructor.
+          const ref = value.slice(2);
+          return getOutlinedModel(
+            response,
+            ref,
+            parentObject,
+            key,
+            applyConstructor,
+          );
+        }
+        //Fallthrough
+      }
+      case 'E': {
+        if (__DEV__) {
+          // In DEV mode we allow indirect eval to produce functions for logging.
+          // This should not compile to eval() because then it has local scope access.
+          const code = value.slice(2);
+          try {
+            // If this might be a class constructor with a static initializer or
+            // static constructor then don't eval it. It might cause unexpected
+            // side-effects. Instead, fallback to parsing out the function type
+            // and name.
+            if (!mightHaveStaticConstructor.test(code)) {
+              // eslint-disable-next-line no-eval
+              return (0, eval)(code);
+            }
+          } catch (x) {
+            // Fallthrough to fallback case.
+          }
+          // We currently use this to express functions so we fail parsing it,
+          // let's just return a blank function as a place holder.
+          let fn;
+          try {
+            fn = getInferredFunctionApproximate(code);
+            if (code.startsWith('Object.defineProperty(')) {
+              const DESCRIPTOR = ',"name",{value:"';
+              const idx = code.lastIndexOf(DESCRIPTOR);
+              if (idx !== -1) {
+                const name = JSON.parse(
+                  code.slice(idx + DESCRIPTOR.length - 1, code.length - 2),
+                );
+                // $FlowFixMe[cannot-write]
+                Object.defineProperty(fn, 'name', {value: name});
+              }
+            }
+          } catch (_) {
+            fn = function () {};
+          }
+          return fn;
+        }
+        // Fallthrough
+      }
+      case 'Y': {
+        if (__DEV__) {
+          if (value.length > 2) {
+            const debugChannelCallback =
+              response._debugChannel && response._debugChannel.callback;
+            if (debugChannelCallback) {
+              if (value[2] === '@') {
+                // This is a deferred Promise.
+                const ref = value.slice(3); // We assume this doesn't have a path just id.
+                const id = parseInt(ref, 16);
+                if (!response._chunks.has(id)) {
+                  // We haven't seen this id before. Query the server to start sending it.
+                  debugChannelCallback('P:' + ref);
+                }
+                // Start waiting. This now creates a pending chunk if it doesn't already exist.
+                // This is the actual Promise we're waiting for.
+                return getChunk(response, id);
+              }
+              const ref = value.slice(2); // We assume this doesn't have a path just id.
+              const id = parseInt(ref, 16);
+              if (!response._chunks.has(id)) {
+                // We haven't seen this id before. Query the server to start sending it.
+                debugChannelCallback('Q:' + ref);
+              }
+              // Start waiting. This now creates a pending chunk if it doesn't already exist.
+              const chunk = getChunk(response, id);
+              if (chunk.status === INITIALIZED) {
+                // We already loaded this before. We can just use the real value.
+                return chunk.value;
+              }
+              return defineLazyGetter(response, chunk, parentObject, key);
+            }
+          }
+
+          // In DEV mode we encode omitted objects in logs as a getter that throws
+          // so that when you try to access it on the client, you know why that
+          // happened.
+          Object.defineProperty(parentObject, key, {
+            get: function () {
+              // TODO: We should ideally throw here to indicate a difference.
+              return OMITTED_PROP_ERROR;
+            },
+            enumerable: true,
+            configurable: false,
+          });
+          return null;
+        }
+        // Fallthrough
+      }
+      default: {
+        // We assume that anything else is a reference ID.
+        const ref = value.slice(1);
+        return getOutlinedModel(response, ref, parentObject, key, createModel);
+      }
+    }
+  }
+  return value;
+}
+
+function parseModelTuple(
+  response: Response,
+  value: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>,
+): any {
+  const tuple: [mixed, mixed, mixed, mixed] = (value: any);
+
+  if (tuple[0] === REACT_ELEMENT_TYPE) {
+    // TODO: Consider having React just directly accept these arrays as elements.
+    // Or even change the ReactElement type to be an array.
+    return createElement(
+      response,
+      tuple[1],
+      tuple[2],
+      tuple[3],
+      __DEV__ ? (tuple: any)[4] : null,
+      __DEV__ ? (tuple: any)[5] : null,
+      __DEV__ ? (tuple: any)[6] : 0,
+    );
+  }
+  return value;
+}
+
+function missingCall() {
+  throw new Error(
+    'Trying to call a function from "use server" but the callServer option ' +
+      'was not implemented in your router runtime.',
+  );
+}
+
+function markIOStarted(this: Response) {
+  this._debugIOStarted = true;
+}
+
+function ResponseInstance(
+  this: $FlowFixMe,
+  bundlerConfig: ServerConsumerModuleMap,
+  serverReferenceConfig: null | ServerManifest,
+  moduleLoading: ModuleLoading,
+  callServer: void | CallServerCallback,
+  encodeFormAction: void | EncodeFormActionCallback,
+  nonce: void | string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  findSourceMapURL: void | FindSourceMapURLCallback, // DEV-only
+  replayConsole: boolean, // DEV-only
+  environmentName: void | string, // DEV-only
+  debugStartTime: void | number, // DEV-only
+  debugEndTime: void | number, // DEV-only
+  debugChannel: void | DebugChannel, // DEV-only
+) {
+  const chunks: Map<number, SomeChunk<any>> = new Map();
+  this._bundlerConfig = bundlerConfig;
+  this._serverReferenceConfig = serverReferenceConfig;
+  this._moduleLoading = moduleLoading;
+  this._callServer = callServer !== undefined ? callServer : missingCall;
+  this._encodeFormAction = encodeFormAction;
+  this._nonce = nonce;
+  this._chunks = chunks;
+  this._stringDecoder = createStringDecoder();
+  this._fromJSON = (null: any);
+  this._closed = false;
+  this._closedReason = null;
+  this._tempRefs = temporaryReferences;
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    this._timeOrigin = 0;
+    this._pendingInitialRender = null;
+  }
+  if (__DEV__) {
+    this._pendingChunks = 0;
+    this._weakResponse = {
+      weak: new WeakRef(this),
+      response: this,
+    };
+    // TODO: The Flight Client can be used in a Client Environment too and we should really support
+    // getting the owner there as well, but currently the owner of ReactComponentInfo is typed as only
+    // supporting other ReactComponentInfo as owners (and not Fiber or Fizz's ComponentStackNode).
+    // We need to update all the callsites consuming ReactComponentInfo owners to support those.
+    // In the meantime we only check ReactSharedInteralsServer since we know that in an RSC environment
+    // the only owners will be ReactComponentInfo.
+    const rootOwner: null | ReactComponentInfo =
+      ReactSharedInteralsServer === undefined ||
+      ReactSharedInteralsServer.A === null
+        ? null
+        : (ReactSharedInteralsServer.A.getOwner(): any);
+
+    this._debugRootOwner = rootOwner;
+    this._debugRootStack =
+      rootOwner !== null
+        ? // TODO: Consider passing the top frame in so we can avoid internals showing up.
+          new Error('react-stack-top-frame')
+        : null;
+
+    const rootEnv = environmentName === undefined ? 'Server' : environmentName;
+    if (supportsCreateTask) {
+      // Any stacks that appear on the server need to be rooted somehow on the client
+      // so we create a root Task for this response which will be the root owner for any
+      // elements created by the server. We use the "use server" string to indicate that
+      // this is where we enter the server from the client.
+      // TODO: Make this string configurable.
+      this._debugRootTask = (console: any).createTask(
+        '"use ' + rootEnv.toLowerCase() + '"',
+      );
+    }
+    if (enableAsyncDebugInfo) {
+      // Track the start of the fetch to the best of our knowledge.
+      // Note: createFromFetch allows this to be marked at the start of the fetch
+      // where as if you use createFromReadableStream from the body of the fetch
+      // then the start time is when the headers resolved.
+      this._debugStartTime =
+        debugStartTime == null ? performance.now() : debugStartTime;
+      this._debugIOStarted = false;
+      // We consider everything before the first setTimeout task to be cached data
+      // and is not considered I/O required to load the stream.
+      setTimeout(markIOStarted.bind(this), 0);
+    }
+    this._debugEndTime = debugEndTime == null ? null : debugEndTime;
+    this._debugFindSourceMapURL = findSourceMapURL;
+    this._debugChannel = debugChannel;
+    this._blockedConsole = null;
+    this._replayConsole = replayConsole;
+    this._rootEnvironmentName = rootEnv;
+    if (debugChannel) {
+      if (debugChannelRegistry === null) {
+        // We can't safely clean things up later, so we immediately close the
+        // debug channel.
+        closeDebugChannel(debugChannel);
+        this._debugChannel = undefined;
+      } else {
+        // When a Response gets GC:ed because nobody is referring to any of the
+        // objects that lazily load from the Response anymore, then we can close
+        // the debug channel.
+        debugChannelRegistry.register(this, debugChannel, this);
+      }
+    }
+  }
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // Since we don't know when recording of profiles will start and stop, we have to
+    // mark the order over and over again.
+    if (replayConsole) {
+      markAllTracksInOrder();
+    }
+  }
+
+  // Don't inline this call because it causes closure to outline the call above.
+  this._fromJSON = createFromJSONCallback(this);
+}
+
+export function createResponse(
+  bundlerConfig: ServerConsumerModuleMap,
+  serverReferenceConfig: null | ServerManifest,
+  moduleLoading: ModuleLoading,
+  callServer: void | CallServerCallback,
+  encodeFormAction: void | EncodeFormActionCallback,
+  nonce: void | string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  findSourceMapURL: void | FindSourceMapURLCallback, // DEV-only
+  replayConsole: boolean, // DEV-only
+  environmentName: void | string, // DEV-only
+  debugStartTime: void | number, // DEV-only
+  debugEndTime: void | number, // DEV-only
+  debugChannel: void | DebugChannel, // DEV-only
+): WeakResponse {
+  return getWeakResponse(
+    // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
+    new ResponseInstance(
+      bundlerConfig,
+      serverReferenceConfig,
+      moduleLoading,
+      callServer,
+      encodeFormAction,
+      nonce,
+      temporaryReferences,
+      findSourceMapURL,
+      replayConsole,
+      environmentName,
+      debugStartTime,
+      debugEndTime,
+      debugChannel,
+    ),
+  );
+}
+
+export type StreamState = {
+  _rowState: RowParserState,
+  _rowID: number, // parts of a row ID parsed so far
+  _rowTag: number, // 0 indicates that we're currently parsing the row ID
+  _rowLength: number, // remaining bytes in the row. 0 indicates that we're looking for a newline.
+  _buffer: Array<Uint8Array>, // chunks received so far as part of this row
+  _debugInfo: ReactIOInfo, // DEV-only
+  _debugTargetChunkSize: number, // DEV-only
+};
+
+export function createStreamState(
+  weakResponse: WeakResponse, // DEV-only
+  streamDebugValue: mixed, // DEV-only
+): StreamState {
+  const streamState: StreamState = (({
+    _rowState: 0,
+    _rowID: 0,
+    _rowTag: 0,
+    _rowLength: 0,
+    _buffer: [],
+  }: Omit<StreamState, '_debugInfo' | '_debugTargetChunkSize'>): any);
+  if (__DEV__ && enableAsyncDebugInfo) {
+    const response = unwrapWeakResponse(weakResponse);
+    // Create an entry for the I/O to load the stream itself.
+    const debugValuePromise = Promise.resolve(streamDebugValue);
+    (debugValuePromise: any).status = 'fulfilled';
+    (debugValuePromise: any).value = streamDebugValue;
+    streamState._debugInfo = {
+      name: 'rsc stream',
+      start: response._debugStartTime,
+      end: response._debugStartTime, // will be updated once we finish a chunk
+      byteSize: 0, // will be updated as we resolve a data chunk
+      value: debugValuePromise,
+      owner: response._debugRootOwner,
+      debugStack: response._debugRootStack,
+      debugTask: response._debugRootTask,
+    };
+    streamState._debugTargetChunkSize = MIN_CHUNK_SIZE;
+  }
+  return streamState;
+}
+
+// Depending on set up the chunks of a TLS connection can vary in size. However in practice it's often
+// at 64kb or even multiples of 64kb. It can also be smaller but in practice it also happens that 64kb
+// is around what you can download on fast 4G connection in 300ms which is what we throttle reveals at
+// anyway. The net effect is that in practice, you won't really reveal anything in smaller units than
+// 64kb if they're revealing at maximum speed in production. Therefore we group smaller chunks into
+// these larger chunks since in production that's more realistic.
+// TODO: If the stream is compressed, then you could fit much more in a single 300ms so maybe it should
+// actually be larger.
+const MIN_CHUNK_SIZE = 65536;
+
+function incrementChunkDebugInfo(
+  streamState: StreamState,
+  chunkLength: number,
+): void {
+  if (__DEV__ && enableAsyncDebugInfo) {
+    const debugInfo: ReactIOInfo = streamState._debugInfo;
+    const endTime = performance.now();
+    const previousEndTime = debugInfo.end;
+    const newByteLength = ((debugInfo.byteSize: any): number) + chunkLength;
+    if (
+      newByteLength > streamState._debugTargetChunkSize ||
+      endTime > previousEndTime + 10
+    ) {
+      // This new chunk would overshoot the chunk size so therefore we treat it as its own new chunk
+      // by cloning the old one. Similarly, if some time has passed we assume that it was actually
+      // due to the server being unable to flush chunks faster e.g. due to I/O so it would be a
+      // new chunk in production even if the buffer hasn't been reached.
+      streamState._debugInfo = {
+        name: debugInfo.name,
+        start: debugInfo.start,
+        end: endTime,
+        byteSize: newByteLength,
+        value: debugInfo.value,
+        owner: debugInfo.owner,
+        debugStack: debugInfo.debugStack,
+        debugTask: debugInfo.debugTask,
+      };
+      streamState._debugTargetChunkSize = newByteLength + MIN_CHUNK_SIZE;
+    } else {
+      // Otherwise we reuse the old chunk but update the end time and byteSize to the latest.
+      // $FlowFixMe[cannot-write]
+      debugInfo.end = endTime;
+      // $FlowFixMe[cannot-write]
+      debugInfo.byteSize = newByteLength;
+    }
+  }
+}
+
+function addAsyncInfo(chunk: SomeChunk<any>, asyncInfo: ReactAsyncInfo): void {
+  const value = resolveLazy(chunk.value);
+  if (
+    typeof value === 'object' &&
+    value !== null &&
+    (isArray(value) ||
+      typeof value[ASYNC_ITERATOR] === 'function' ||
+      value.$$typeof === REACT_ELEMENT_TYPE ||
+      value.$$typeof === REACT_LAZY_TYPE)
+  ) {
+    if (isArray(value._debugInfo)) {
+      // $FlowFixMe[method-unbinding]
+      value._debugInfo.push(asyncInfo);
+    } else {
+      Object.defineProperty((value: any), '_debugInfo', {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: [asyncInfo],
+      });
+    }
+  } else {
+    // $FlowFixMe[method-unbinding]
+    chunk._debugInfo.push(asyncInfo);
+  }
+}
+
+function resolveChunkDebugInfo(
+  response: Response,
+  streamState: StreamState,
+  chunk: SomeChunk<any>,
+): void {
+  if (__DEV__ && enableAsyncDebugInfo) {
+    // Only include stream information after a macrotask. Any chunk processed
+    // before that is considered cached data.
+    if (response._debugIOStarted) {
+      // Add the currently resolving chunk's debug info representing the stream
+      // to the Promise that was waiting on the stream, or its underlying value.
+      const asyncInfo: ReactAsyncInfo = {awaited: streamState._debugInfo};
+      if (chunk.status === PENDING || chunk.status === BLOCKED) {
+        const boundAddAsyncInfo = addAsyncInfo.bind(null, chunk, asyncInfo);
+        chunk.then(boundAddAsyncInfo, boundAddAsyncInfo);
+      } else {
+        addAsyncInfo(chunk, asyncInfo);
+      }
+    }
+  }
+}
+
+function resolveDebugHalt(response: Response, id: number): void {
+  const chunks = response._chunks;
+  let chunk = chunks.get(id);
+  if (!chunk) {
+    chunks.set(id, (chunk = createPendingChunk(response)));
+  } else {
+  }
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
+    return;
+  }
+  releasePendingChunk(response, chunk);
+  const haltedChunk: HaltedChunk<any> = (chunk: any);
+  haltedChunk.status = HALTED;
+  haltedChunk.value = null;
+  haltedChunk.reason = null;
+}
+
+function resolveModel(
+  response: Response,
+  id: number,
+  model: UninitializedModel,
+  streamState: StreamState,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    const newChunk: ResolvedModelChunk<any> = createResolvedModelChunk(
+      response,
+      model,
+    );
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, newChunk);
+    }
+    chunks.set(id, newChunk);
+  } else {
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, chunk);
+    }
+    resolveModelChunk(response, chunk, model);
+  }
+}
+
+function resolveText(
+  response: Response,
+  id: number,
+  text: string,
+  streamState: StreamState,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (chunk && chunk.status !== PENDING) {
+    // If we get more data to an already resolved ID, we assume that it's
+    // a stream chunk since any other row shouldn't have more than one entry.
+    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const controller = streamChunk.reason;
+    controller.enqueueValue(text);
+    return;
+  }
+  if (chunk) {
+    releasePendingChunk(response, chunk);
+  }
+  const newChunk = createInitializedTextChunk(response, text);
+  if (__DEV__) {
+    resolveChunkDebugInfo(response, streamState, newChunk);
+  }
+  chunks.set(id, newChunk);
+}
+
+function resolveBuffer(
+  response: Response,
+  id: number,
+  buffer: $ArrayBufferView | ArrayBuffer,
+  streamState: StreamState,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (chunk && chunk.status !== PENDING) {
+    // If we get more data to an already resolved ID, we assume that it's
+    // a stream chunk since any other row shouldn't have more than one entry.
+    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const controller = streamChunk.reason;
+    controller.enqueueValue(buffer);
+    return;
+  }
+  if (chunk) {
+    releasePendingChunk(response, chunk);
+  }
+  const newChunk = createInitializedBufferChunk(response, buffer);
+  if (__DEV__) {
+    resolveChunkDebugInfo(response, streamState, newChunk);
+  }
+  chunks.set(id, newChunk);
+}
+
+function resolveModule(
+  response: Response,
+  id: number,
+  model: UninitializedModel,
+  streamState: StreamState,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  const clientReferenceMetadata: ClientReferenceMetadata = parseModel(
+    response,
+    model,
+  );
+  const clientReference = resolveClientReference<$FlowFixMe>(
+    response._bundlerConfig,
+    clientReferenceMetadata,
+  );
+
+  prepareDestinationForModule(
+    response._moduleLoading,
+    response._nonce,
+    clientReferenceMetadata,
+  );
+
+  // TODO: Add an option to encode modules that are lazy loaded.
+  // For now we preload all modules as early as possible since it's likely
+  // that we'll need them.
+  const promise = preloadModule(clientReference);
+  if (promise) {
+    let blockedChunk: BlockedChunk<any>;
+    if (!chunk) {
+      // Technically, we should just treat promise as the chunk in this
+      // case. Because it'll just behave as any other promise.
+      blockedChunk = createBlockedChunk(response);
+      chunks.set(id, blockedChunk);
+    } else {
+      releasePendingChunk(response, chunk);
+      // This can't actually happen because we don't have any forward
+      // references to modules.
+      blockedChunk = (chunk: any);
+      blockedChunk.status = BLOCKED;
+    }
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, blockedChunk);
+    }
+    promise.then(
+      () => resolveModuleChunk(response, blockedChunk, clientReference),
+      error => triggerErrorOnChunk(response, blockedChunk, error),
+    );
+  } else {
+    if (!chunk) {
+      const newChunk = createResolvedModuleChunk(response, clientReference);
+      if (__DEV__) {
+        resolveChunkDebugInfo(response, streamState, newChunk);
+      }
+      chunks.set(id, newChunk);
+    } else {
+      if (__DEV__) {
+        resolveChunkDebugInfo(response, streamState, chunk);
+      }
+      // This can't actually happen because we don't have any forward
+      // references to modules.
+      resolveModuleChunk(response, chunk, clientReference);
+    }
+  }
+}
+
+function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
+  response: Response,
+  id: number,
+  stream: T,
+  controller: FlightStreamController,
+  streamState: StreamState,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    const newChunk = createInitializedStreamChunk(response, stream, controller);
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, newChunk);
+    }
+    chunks.set(id, newChunk);
+    return;
+  }
+  if (__DEV__) {
+    resolveChunkDebugInfo(response, streamState, chunk);
+  }
+  if (chunk.status !== PENDING) {
+    // We already resolved. We didn't expect to see this.
+    return;
+  }
+
+  const resolveListeners = chunk.value;
+
+  if (__DEV__) {
+    // Initialize any debug info and block the initializing chunk on any
+    // unresolved entries.
+    if (chunk._debugChunk != null) {
+      const prevHandler = initializingHandler;
+      const prevChunk = initializingChunk;
+      initializingHandler = null;
+      const cyclicChunk: BlockedChunk<T> = (chunk: any);
+      cyclicChunk.status = BLOCKED;
+      cyclicChunk.value = null;
+      cyclicChunk.reason = null;
+      if ((enableProfilerTimer && enableComponentPerformanceTrack) || __DEV__) {
+        initializingChunk = cyclicChunk;
+      }
+      try {
+        initializeDebugChunk(response, chunk);
+        if (initializingHandler !== null) {
+          if (initializingHandler.errored) {
+            // Ignore error parsing debug info, we'll report the original error instead.
+          } else if (initializingHandler.deps > 0) {
+            // Leave blocked until we can resolve all the debug info.
+            initializingHandler.value = stream;
+            initializingHandler.reason = controller;
+            initializingHandler.chunk = cyclicChunk;
+            return;
+          }
+        }
+      } finally {
+        initializingHandler = prevHandler;
+        initializingChunk = prevChunk;
+      }
+    }
+  }
+
+  const resolvedChunk: InitializedStreamChunk<T> = (chunk: any);
+  resolvedChunk.status = INITIALIZED;
+  resolvedChunk.value = stream;
+  resolvedChunk.reason = controller;
+  if (resolveListeners !== null) {
+    wakeChunk(response, resolveListeners, chunk.value, (chunk: any));
+  } else {
+    if (__DEV__) {
+      processChunkDebugInfo(response, resolvedChunk, stream);
+    }
+  }
+}
+
+function startReadableStream<T>(
+  response: Response,
+  id: number,
+  type: void | 'bytes',
+  streamState: StreamState,
+): void {
+  let controller: ReadableStreamController = (null: any);
+  let closed = false;
+  const stream = new ReadableStream({
+    type: type,
+    start(c) {
+      controller = c;
+    },
+  });
+  let previousBlockedChunk: SomeChunk<T> | null = null;
+  const flightController = {
+    enqueueValue(value: T): void {
+      if (previousBlockedChunk === null) {
+        controller.enqueue(value);
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        previousBlockedChunk.then(function () {
+          controller.enqueue(value);
+        });
+      }
+    },
+    enqueueModel(json: UninitializedModel): void {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        const chunk: ResolvedModelChunk<T> = createResolvedModelChunk(
+          response,
+          json,
+        );
+        initializeModelChunk(chunk);
+        const initializedChunk: SomeChunk<T> = chunk;
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(
+            v => controller.enqueue(v),
+            e => controller.error((e: any)),
+          );
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        const blockedChunk = previousBlockedChunk;
+        const chunk: SomeChunk<T> = createPendingChunk(response);
+        chunk.then(
+          v => controller.enqueue(v),
+          e => controller.error((e: any)),
+        );
+        previousBlockedChunk = chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+          resolveModelChunk(response, chunk, json);
+        });
+      }
+    },
+    close(json: UninitializedModel): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        const blockedChunk = previousBlockedChunk;
+        // We shouldn't get any more enqueues after this so we can set it back to null.
+        previousBlockedChunk = null;
+        blockedChunk.then(() => controller.close());
+      }
+    },
+    error(error: mixed): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        const blockedChunk = previousBlockedChunk;
+        // We shouldn't get any more enqueues after this so we can set it back to null.
+        previousBlockedChunk = null;
+        blockedChunk.then(() => controller.error((error: any)));
+      }
+    },
+  };
+  resolveStream(response, id, stream, flightController, streamState);
+}
+
+function asyncIterator(this: $AsyncIterator<any, any, void>) {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator<T>(
+  next: (arg: void) => SomeChunk<IteratorResult<T, T>>,
+): $AsyncIterator<T, T, void> {
+  const iterator: any = {
+    next: next,
+    // TODO: Add return/throw as options for aborting.
+  };
+  // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+  (iterator: any)[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function startAsyncIterable<T>(
+  response: Response,
+  id: number,
+  iterator: boolean,
+  streamState: StreamState,
+): void {
+  const buffer: Array<SomeChunk<IteratorResult<T, T>>> = [];
+  let closed = false;
+  let nextWriteIndex = 0;
+  const flightController = {
+    enqueueValue(value: T): void {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createInitializedIteratorResultChunk(
+          response,
+          value,
+          false,
+        );
+      } else {
+        const chunk: PendingChunk<IteratorResult<T, T>> = (buffer[
+          nextWriteIndex
+        ]: any);
+        const resolveListeners = chunk.value;
+        const rejectListeners = chunk.reason;
+        const initializedChunk: InitializedChunk<IteratorResult<T, T>> =
+          (chunk: any);
+        initializedChunk.status = INITIALIZED;
+        initializedChunk.value = {done: false, value: value};
+        initializedChunk.reason = null;
+        if (resolveListeners !== null) {
+          wakeChunkIfInitialized(
+            response,
+            chunk,
+            resolveListeners,
+            rejectListeners,
+          );
+        }
+      }
+      nextWriteIndex++;
+    },
+    enqueueModel(value: UninitializedModel): void {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+          response,
+          value,
+          false,
+        );
+      } else {
+        resolveIteratorResultChunk(
+          response,
+          buffer[nextWriteIndex],
+          value,
+          false,
+        );
+      }
+      nextWriteIndex++;
+    },
+    close(value: UninitializedModel): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+          response,
+          value,
+          true,
+        );
+      } else {
+        resolveIteratorResultChunk(
+          response,
+          buffer[nextWriteIndex],
+          value,
+          true,
+        );
+      }
+      nextWriteIndex++;
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(
+          response,
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          true,
+        );
+      }
+    },
+    error(error: Error): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] =
+          createPendingChunk<IteratorResult<T, T>>(response);
+      }
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(response, buffer[nextWriteIndex++], error);
+      }
+    },
+  };
+
+  const iterable: $AsyncIterable<T, T, void> = ({}: any);
+  // $FlowFixMe[cannot-write]
+  iterable[ASYNC_ITERATOR] = (): $AsyncIterator<T, T, void> => {
+    let nextReadIndex = 0;
+    return createIterator(arg => {
+      if (arg !== undefined) {
+        throw new Error(
+          'Values cannot be passed to next() of AsyncIterables passed to Client Components.',
+        );
+      }
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new ReactPromise(
+            INITIALIZED,
+            {done: true, value: undefined},
+            null,
+          );
+        }
+        buffer[nextReadIndex] =
+          createPendingChunk<IteratorResult<T, T>>(response);
+      }
+      return buffer[nextReadIndex++];
+    });
+  };
+
+  // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+  resolveStream(
+    response,
+    id,
+    iterator ? iterable[ASYNC_ITERATOR]() : iterable,
+    flightController,
+    streamState,
+  );
+}
+
+function stopStream(
+  response: Response,
+  id: number,
+  row: UninitializedModel,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk || chunk.status !== INITIALIZED) {
+    // We didn't expect not to have an existing stream;
+    return;
+  }
+  if (__DEV__) {
+    if (--response._pendingChunks === 0) {
+      // We're no longer waiting for any more chunks. We can release the strong
+      // reference to the response. We'll regain it if we ask for any more data
+      // later on.
+      response._weakResponse.response = null;
+    }
+  }
+  const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+  const controller = streamChunk.reason;
+  controller.close(row === '' ? '"$undefined"' : row);
+}
+
+type ErrorWithDigest = Error & {digest?: string};
+function resolveErrorProd(response: Response): Error {
+  if (__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveErrorProd should never be called in development mode. Use resolveErrorDev instead. This is a bug in React.',
+    );
+  }
+  const error = new Error(
+    'An error occurred in the Server Components render. The specific message is omitted in production' +
+      ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
+      ' may provide additional details about the nature of the error.',
+  );
+  error.stack = 'Error: ' + error.message;
+  return error;
+}
+
+function resolveErrorDev(
+  response: Response,
+  errorInfo: ReactErrorInfoDev,
+): Error {
+  const name = errorInfo.name;
+  const message = errorInfo.message;
+  const stack = errorInfo.stack;
+  const env = errorInfo.env;
+
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveErrorDev should never be called in production mode. Use resolveErrorProd instead. This is a bug in React.',
+    );
+  }
+
+  let error;
+  const callStack = buildFakeCallStack(
+    response,
+    stack,
+    env,
+    false,
+    // $FlowFixMe[incompatible-use]
+    Error.bind(
+      null,
+      message ||
+        'An error occurred in the Server Components render but no message was provided',
+    ),
+  );
+
+  let ownerTask: null | ConsoleTask = null;
+  if (errorInfo.owner != null) {
+    const ownerRef = errorInfo.owner.slice(1);
+    // TODO: This is not resilient to the owner loading later in an Error like a debug channel.
+    // The whole error serialization should probably go through the regular model at least for DEV.
+    const owner = getOutlinedModel(response, ownerRef, {}, '', createModel);
+    if (owner !== null) {
+      ownerTask = initializeFakeTask(response, owner);
+    }
+  }
+
+  if (ownerTask === null) {
+    const rootTask = getRootTask(response, env);
+    if (rootTask != null) {
+      error = rootTask.run(callStack);
+    } else {
+      error = callStack();
+    }
+  } else {
+    error = ownerTask.run(callStack);
+  }
+
+  (error: any).name = name;
+  (error: any).environmentName = env;
+  return error;
+}
+
+function resolveErrorModel(
+  response: Response,
+  id: number,
+  row: UninitializedModel,
+  streamState: StreamState,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  const errorInfo = JSON.parse(row);
+  let error;
+  if (__DEV__) {
+    error = resolveErrorDev(response, errorInfo);
+  } else {
+    error = resolveErrorProd(response);
+  }
+  (error: any).digest = errorInfo.digest;
+  const errorWithDigest: ErrorWithDigest = (error: any);
+  if (!chunk) {
+    const newChunk: ErroredChunk<any> = createErrorChunk(
+      response,
+      errorWithDigest,
+    );
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, newChunk);
+    }
+    chunks.set(id, newChunk);
+  } else {
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, chunk);
+    }
+    triggerErrorOnChunk(response, chunk, errorWithDigest);
+  }
+}
+
+function resolveHint<Code: HintCode>(
+  response: Response,
+  code: Code,
+  model: UninitializedModel,
+): void {
+  const hintModel: HintModel<Code> = parseModel(response, model);
+  dispatchHint(code, hintModel);
+}
+
+const supportsCreateTask = __DEV__ && !!(console: any).createTask;
+
+type FakeFunction<T> = (() => T) => T;
+const fakeFunctionCache: Map<string, FakeFunction<any>> = __DEV__
+  ? new Map()
+  : (null: any);
+
+let fakeFunctionIdx = 0;
+function createFakeFunction<T>(
+  name: string,
+  filename: string,
+  sourceMap: null | string,
+  line: number,
+  col: number,
+  enclosingLine: number,
+  enclosingCol: number,
+  environmentName: string,
+): FakeFunction<T> {
+  // This creates a fake copy of a Server Module. It represents a module that has already
+  // executed on the server but we re-execute a blank copy for its stack frames on the client.
+
+  const comment =
+    '/* This module was rendered by a Server Component. Turn on Source Maps to see the server source. */';
+
+  if (!name) {
+    // An eval:ed function with no name gets the name "eval". We give it something more descriptive.
+    name = '<anonymous>';
+  }
+  const encodedName = JSON.stringify(name);
+  // We generate code where the call is at the line and column of the server executed code.
+  // This allows us to use the original source map as the source map of this fake file to
+  // point to the original source.
+  let code;
+  // Normalize line/col to zero based.
+  if (enclosingLine < 1) {
+    enclosingLine = 0;
+  } else {
+    enclosingLine--;
+  }
+  if (enclosingCol < 1) {
+    enclosingCol = 0;
+  } else {
+    enclosingCol--;
+  }
+  if (line < 1) {
+    line = 0;
+  } else {
+    line--;
+  }
+  if (col < 1) {
+    col = 0;
+  } else {
+    col--;
+  }
+  if (line < enclosingLine || (line === enclosingLine && col < enclosingCol)) {
+    // Protection against invalid enclosing information. Should not happen.
+    enclosingLine = 0;
+    enclosingCol = 0;
+  }
+  if (line < 1) {
+    // Fit everything on the first line.
+    const minCol = encodedName.length + 3;
+    let enclosingColDistance = enclosingCol - minCol;
+    if (enclosingColDistance < 0) {
+      enclosingColDistance = 0;
+    }
+    let colDistance = col - enclosingColDistance - minCol - 3;
+    if (colDistance < 0) {
+      colDistance = 0;
+    }
+    code =
+      '({' +
+      encodedName +
+      ':' +
+      ' '.repeat(enclosingColDistance) +
+      '_=>' +
+      ' '.repeat(colDistance) +
+      '_()})';
+  } else if (enclosingLine < 1) {
+    // Fit just the enclosing function on the first line.
+    const minCol = encodedName.length + 3;
+    let enclosingColDistance = enclosingCol - minCol;
+    if (enclosingColDistance < 0) {
+      enclosingColDistance = 0;
+    }
+    code =
+      '({' +
+      encodedName +
+      ':' +
+      ' '.repeat(enclosingColDistance) +
+      '_=>' +
+      '\n'.repeat(line - enclosingLine) +
+      ' '.repeat(col) +
+      '_()})';
+  } else if (enclosingLine === line) {
+    // Fit the enclosing function and callsite on same line.
+    let colDistance = col - enclosingCol - 3;
+    if (colDistance < 0) {
+      colDistance = 0;
+    }
+    code =
+      '\n'.repeat(enclosingLine - 1) +
+      '({' +
+      encodedName +
+      ':\n' +
+      ' '.repeat(enclosingCol) +
+      '_=>' +
+      ' '.repeat(colDistance) +
+      '_()})';
+  } else {
+    // This is the ideal because we can always encode any position.
+    code =
+      '\n'.repeat(enclosingLine - 1) +
+      '({' +
+      encodedName +
+      ':\n' +
+      ' '.repeat(enclosingCol) +
+      '_=>' +
+      '\n'.repeat(line - enclosingLine) +
+      ' '.repeat(col) +
+      '_()})';
+  }
+
+  if (enclosingLine < 1) {
+    // If the function starts at the first line, we append the comment after.
+    code = code + '\n' + comment;
+  } else {
+    // Otherwise we prepend the comment on the first line.
+    code = comment + code;
+  }
+
+  if (filename.startsWith('/')) {
+    // If the filename starts with `/` we assume that it is a file system file
+    // rather than relative to the current host. Since on the server fully qualified
+    // stack traces use the file path.
+    // TODO: What does this look like on Windows?
+    filename = 'file://' + filename;
+  }
+
+  if (sourceMap) {
+    // We use the prefix about://React/ to separate these from other files listed in
+    // the Chrome DevTools. We need a "host name" and not just a protocol because
+    // otherwise the group name becomes the root folder. Ideally we don't want to
+    // show these at all but there's two reasons to assign a fake URL.
+    // 1) A printed stack trace string needs a unique URL to be able to source map it.
+    // 2) If source maps are disabled or fails, you should at least be able to tell
+    //    which file it was.
+    code +=
+      '\n//# sourceURL=about://React/' +
+      encodeURIComponent(environmentName) +
+      '/' +
+      encodeURI(filename) +
+      '?' +
+      fakeFunctionIdx++;
+    code += '\n//# sourceMappingURL=' + sourceMap;
+  } else if (filename) {
+    code += '\n//# sourceURL=' + encodeURI(filename);
+  } else {
+    code += '\n//# sourceURL=<anonymous>';
+  }
+
+  let fn: FakeFunction<T>;
+  try {
+    // eslint-disable-next-line no-eval
+    fn = (0, eval)(code)[name];
+  } catch (x) {
+    // If eval fails, such as if in an environment that doesn't support it,
+    // we fallback to creating a function here. It'll still have the right
+    // name but it'll lose line/column number and file name.
+    fn = function (_) {
+      return _();
+    };
+  }
+  return fn;
+}
+
+function buildFakeCallStack<T>(
+  response: Response,
+  stack: ReactStackTrace,
+  environmentName: string,
+  useEnclosingLine: boolean,
+  innerCall: () => T,
+): () => T {
+  let callStack = innerCall;
+  for (let i = 0; i < stack.length; i++) {
+    const frame = stack[i];
+    const frameKey =
+      frame.join('-') +
+      '-' +
+      environmentName +
+      (useEnclosingLine ? '-e' : '-n');
+    let fn = fakeFunctionCache.get(frameKey);
+    if (fn === undefined) {
+      const [name, filename, line, col, enclosingLine, enclosingCol] = frame;
+      const findSourceMapURL = response._debugFindSourceMapURL;
+      const sourceMap = findSourceMapURL
+        ? findSourceMapURL(filename, environmentName)
+        : null;
+      fn = createFakeFunction(
+        name,
+        filename,
+        sourceMap,
+        line,
+        col,
+        useEnclosingLine ? line : enclosingLine,
+        useEnclosingLine ? col : enclosingCol,
+        environmentName,
+      );
+      // TODO: This cache should technically live on the response since the _debugFindSourceMapURL
+      // function is an input and can vary by response.
+      fakeFunctionCache.set(frameKey, fn);
+    }
+    callStack = fn.bind(null, callStack);
+  }
+  return callStack;
+}
+
+function getRootTask(
+  response: Response,
+  childEnvironmentName: string,
+): null | ConsoleTask {
+  const rootTask = response._debugRootTask;
+  if (!rootTask) {
+    return null;
+  }
+  if (response._rootEnvironmentName !== childEnvironmentName) {
+    // If the root most owner component is itself in a different environment than the requested
+    // environment then we create an extra task to indicate that we're transitioning into it.
+    // Like if one environment just requests another environment.
+    const createTaskFn = (console: any).createTask.bind(
+      console,
+      '"use ' + childEnvironmentName.toLowerCase() + '"',
+    );
+    return rootTask.run(createTaskFn);
+  }
+  return rootTask;
+}
+
+function initializeFakeTask(
+  response: Response,
+  debugInfo: ReactComponentInfo | ReactAsyncInfo | ReactIOInfo,
+): null | ConsoleTask {
+  if (!supportsCreateTask) {
+    return null;
+  }
+  if (debugInfo.stack == null) {
+    // If this is an error, we should've really already initialized the task.
+    // If it's null, we can't initialize a task.
+    return null;
+  }
+  const cachedEntry = debugInfo.debugTask;
+  if (cachedEntry !== undefined) {
+    return cachedEntry;
+  }
+
+  // Workaround for a bug where Chrome Performance tracking uses the enclosing line/column
+  // instead of the callsite. For ReactAsyncInfo/ReactIOInfo, the only thing we're going
+  // to use the fake task for is the Performance tracking so we encode the enclosing line/
+  // column at the callsite to get a better line number. We could do this for Components too
+  // but we're going to use those for other things too like console logs and it's not worth
+  // duplicating. If this bug is every fixed in Chrome, this should be set to false.
+  const useEnclosingLine = debugInfo.key === undefined;
+
+  const stack = debugInfo.stack;
+  const env: string =
+    debugInfo.env == null ? response._rootEnvironmentName : debugInfo.env;
+  const ownerEnv: string =
+    debugInfo.owner == null || debugInfo.owner.env == null
+      ? response._rootEnvironmentName
+      : debugInfo.owner.env;
+  const ownerTask =
+    debugInfo.owner == null
+      ? null
+      : initializeFakeTask(response, debugInfo.owner);
+  const taskName =
+    // This is the boundary between two environments so we'll annotate the task name.
+    // We assume that the stack frame of the entry into the new environment was done
+    // from the old environment. So we use the owner's environment as the current.
+    env !== ownerEnv
+      ? '"use ' + env.toLowerCase() + '"'
+      : // Some unfortunate pattern matching to refine the type.
+        debugInfo.key !== undefined
+        ? getServerComponentTaskName(((debugInfo: any): ReactComponentInfo))
+        : debugInfo.name !== undefined
+          ? getIOInfoTaskName(((debugInfo: any): ReactIOInfo))
+          : getAsyncInfoTaskName(((debugInfo: any): ReactAsyncInfo));
+  // $FlowFixMe[cannot-write]: We consider this part of initialization.
+  return (debugInfo.debugTask = buildFakeTask(
+    response,
+    ownerTask,
+    stack,
+    taskName,
+    ownerEnv,
+    useEnclosingLine,
+  ));
+}
+
+function buildFakeTask(
+  response: Response,
+  ownerTask: null | ConsoleTask,
+  stack: ReactStackTrace,
+  taskName: string,
+  env: string,
+  useEnclosingLine: boolean,
+): ConsoleTask {
+  const createTaskFn = (console: any).createTask.bind(console, taskName);
+  const callStack = buildFakeCallStack(
+    response,
+    stack,
+    env,
+    useEnclosingLine,
+    createTaskFn,
+  );
+  if (ownerTask === null) {
+    const rootTask = getRootTask(response, env);
+    if (rootTask != null) {
+      return rootTask.run(callStack);
+    } else {
+      return callStack();
+    }
+  } else {
+    return ownerTask.run(callStack);
+  }
+}
+
+const createFakeJSXCallStack = {
+  react_stack_bottom_frame: function (
+    response: Response,
+    stack: ReactStackTrace,
+    environmentName: string,
+  ): Error {
+    const callStackForError = buildFakeCallStack(
+      response,
+      stack,
+      environmentName,
+      false,
+      fakeJSXCallSite,
+    );
+    return callStackForError();
+  },
+};
+
+const createFakeJSXCallStackInDEV: (
+  response: Response,
+  stack: ReactStackTrace,
+  environmentName: string,
+) => Error = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (createFakeJSXCallStack.react_stack_bottom_frame.bind(
+      createFakeJSXCallStack,
+    ): any)
+  : (null: any);
+
+/** @noinline */
+function fakeJSXCallSite() {
+  // This extra call frame represents the JSX creation function. We always pop this frame
+  // off before presenting so it needs to be part of the stack.
+  return new Error('react-stack-top-frame');
+}
+
+function initializeFakeStack(
+  response: Response,
+  debugInfo: ReactComponentInfo | ReactAsyncInfo | ReactIOInfo,
+): void {
+  const cachedEntry = debugInfo.debugStack;
+  if (cachedEntry !== undefined) {
+    return;
+  }
+  if (debugInfo.stack != null) {
+    const stack = debugInfo.stack;
+    const env = debugInfo.env == null ? '' : debugInfo.env;
+    // $FlowFixMe[cannot-write]
+    debugInfo.debugStack = createFakeJSXCallStackInDEV(response, stack, env);
+  }
+  const owner = debugInfo.owner;
+  if (owner != null) {
+    // Initialize any owners not yet initialized.
+    initializeFakeStack(response, owner);
+    if (owner.debugLocation === undefined && debugInfo.debugStack != null) {
+      // If we are the child of this owner, then the owner should be the bottom frame
+      // our stack. We can use it as the implied location of the owner.
+      owner.debugLocation = debugInfo.debugStack;
+    }
+  }
+}
+
+function initializeDebugInfo(
+  response: Response,
+  debugInfo: ReactDebugInfoEntry,
+): ReactDebugInfoEntry {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'initializeDebugInfo should never be called in production mode. This is a bug in React.',
+    );
+  }
+  if (debugInfo.stack !== undefined) {
+    const componentInfoOrAsyncInfo: ReactComponentInfo | ReactAsyncInfo =
+      // $FlowFixMe[incompatible-type]
+      debugInfo;
+    // We eagerly initialize the fake task because this resolving happens outside any
+    // render phase so we're not inside a user space stack at this point. If we waited
+    // to initialize it when we need it, we might be inside user code.
+    initializeFakeTask(response, componentInfoOrAsyncInfo);
+  }
+  if (debugInfo.owner == null && response._debugRootOwner != null) {
+    const componentInfoOrAsyncInfo: ReactComponentInfo | ReactAsyncInfo =
+      // $FlowFixMe: By narrowing `owner` to `null`, we narrowed `debugInfo` to `ReactComponentInfo`
+      debugInfo;
+    // $FlowFixMe[cannot-write]
+    componentInfoOrAsyncInfo.owner = response._debugRootOwner;
+    // We clear the parsed stack frames to indicate that it needs to be re-parsed from debugStack.
+    // $FlowFixMe[cannot-write]
+    componentInfoOrAsyncInfo.stack = null;
+    // We override the stack if we override the owner since the stack where the root JSX
+    // was created on the server isn't very useful but where the request was made is.
+    // $FlowFixMe[cannot-write]
+    componentInfoOrAsyncInfo.debugStack = response._debugRootStack;
+    // $FlowFixMe[cannot-write]
+    componentInfoOrAsyncInfo.debugTask = response._debugRootTask;
+  } else if (debugInfo.stack !== undefined) {
+    const componentInfoOrAsyncInfo: ReactComponentInfo | ReactAsyncInfo =
+      // $FlowFixMe[incompatible-type]
+      debugInfo;
+    initializeFakeStack(response, componentInfoOrAsyncInfo);
+  }
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (typeof debugInfo.time === 'number') {
+      // Adjust the time to the current environment's time space.
+      // Since this might be a deduped object, we clone it to avoid
+      // applying the adjustment twice.
+      debugInfo = {
+        time: debugInfo.time + response._timeOrigin,
+      };
+    }
+  }
+  return debugInfo;
+}
+
+function resolveDebugModel(
+  response: Response,
+  id: number,
+  json: UninitializedModel,
+): void {
+  const parentChunk = getChunk(response, id);
+  if (
+    parentChunk.status === INITIALIZED ||
+    parentChunk.status === ERRORED ||
+    parentChunk.status === HALTED ||
+    parentChunk.status === BLOCKED
+  ) {
+    // We shouldn't really get debug info late. It's too late to add it after we resolved.
+    return;
+  }
+  if (parentChunk.status === RESOLVED_MODULE) {
+    // We don't expect to get debug info on modules.
+    return;
+  }
+  const previousChunk = parentChunk._debugChunk;
+  const debugChunk: ResolvedModelChunk<ReactDebugInfoEntry> =
+    createResolvedModelChunk(response, json);
+  debugChunk._debugChunk = previousChunk; // Linked list of the debug chunks
+  parentChunk._debugChunk = debugChunk;
+  initializeDebugChunk(response, parentChunk);
+  if (
+    __DEV__ &&
+    ((debugChunk: any): SomeChunk<any>).status === BLOCKED &&
+    (response._debugChannel === undefined ||
+      !response._debugChannel.hasReadable)
+  ) {
+    if (json[0] === '"' && json[1] === '$') {
+      const path = json.slice(2, json.length - 1).split(':');
+      const outlinedId = parseInt(path[0], 16);
+      const chunk = getChunk(response, outlinedId);
+      if (chunk.status === PENDING) {
+        // We expect the debug chunk to have been emitted earlier in the stream. It might be
+        // blocked on other things but chunk should no longer be pending.
+        // If it's still pending that suggests that it was referencing an object in the debug
+        // channel, but no debug channel was wired up so it's missing. In this case we can just
+        // drop the debug info instead of halting the whole stream.
+        parentChunk._debugChunk = null;
+      }
+    }
+  }
+}
+
+let currentOwnerInDEV: null | ReactComponentInfo = null;
+function getCurrentStackInDEV(): string {
+  if (__DEV__) {
+    const owner: null | ReactComponentInfo = currentOwnerInDEV;
+    if (owner === null) {
+      return '';
+    }
+    return getOwnerStackByComponentInfoInDev(owner);
+  }
+  return '';
+}
+
+const replayConsoleWithCallStack = {
+  react_stack_bottom_frame: function (
+    response: Response,
+    payload: ConsoleEntry,
+  ): void {
+    const methodName = payload[0];
+    const stackTrace = payload[1];
+    const owner = payload[2];
+    const env = payload[3];
+    const args = payload.slice(4);
+
+    // There really shouldn't be anything else on the stack atm.
+    const prevStack = ReactSharedInternals.getCurrentStack;
+    ReactSharedInternals.getCurrentStack = getCurrentStackInDEV;
+    currentOwnerInDEV =
+      owner === null ? (response._debugRootOwner: any) : owner;
+
+    try {
+      const callStack = buildFakeCallStack(
+        response,
+        stackTrace,
+        env,
+        false,
+        bindToConsole(methodName, args, env),
+      );
+      if (owner != null) {
+        const task = initializeFakeTask(response, owner);
+        initializeFakeStack(response, owner);
+        if (task !== null) {
+          task.run(callStack);
+          return;
+        }
+      }
+      const rootTask = getRootTask(response, env);
+      if (rootTask != null) {
+        rootTask.run(callStack);
+        return;
+      }
+      callStack();
+    } finally {
+      currentOwnerInDEV = null;
+      ReactSharedInternals.getCurrentStack = prevStack;
+    }
+  },
+};
+
+const replayConsoleWithCallStackInDEV: (
+  response: Response,
+  payload: ConsoleEntry,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (replayConsoleWithCallStack.react_stack_bottom_frame.bind(
+      replayConsoleWithCallStack,
+    ): any)
+  : (null: any);
+
+type ConsoleEntry = [
+  string,
+  ReactStackTrace,
+  null | ReactComponentInfo,
+  string,
+  mixed,
+];
+
+function resolveConsoleEntry(
+  response: Response,
+  json: UninitializedModel,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveConsoleEntry should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  if (!response._replayConsole) {
+    return;
+  }
+
+  const blockedChunk = response._blockedConsole;
+  if (blockedChunk == null) {
+    // If we're not blocked on any other chunks, we can try to eagerly initialize
+    // this as a fast-path to avoid awaiting them.
+    const chunk: ResolvedModelChunk<ConsoleEntry> = createResolvedModelChunk(
+      response,
+      json,
+    );
+    initializeModelChunk(chunk);
+    const initializedChunk: SomeChunk<ConsoleEntry> = chunk;
+    if (initializedChunk.status === INITIALIZED) {
+      replayConsoleWithCallStackInDEV(response, initializedChunk.value);
+    } else {
+      chunk.then(
+        v => replayConsoleWithCallStackInDEV(response, v),
+        e => {
+          // Ignore console errors for now. Unnecessary noise.
+        },
+      );
+      response._blockedConsole = chunk;
+    }
+  } else {
+    // We're still waiting on a previous chunk so we can't enqueue quite yet.
+    const chunk: SomeChunk<ConsoleEntry> = createPendingChunk(response);
+    chunk.then(
+      v => replayConsoleWithCallStackInDEV(response, v),
+      e => {
+        // Ignore console errors for now. Unnecessary noise.
+      },
+    );
+    response._blockedConsole = chunk;
+    const unblock = () => {
+      if (response._blockedConsole === chunk) {
+        // We were still the last chunk so we can now clear the queue and return
+        // to synchronous emitting.
+        response._blockedConsole = null;
+      }
+      resolveModelChunk(response, chunk, json);
+    };
+    blockedChunk.then(unblock, unblock);
+  }
+}
+
+function initializeIOInfo(response: Response, ioInfo: ReactIOInfo): void {
+  if (ioInfo.stack !== undefined) {
+    initializeFakeTask(response, ioInfo);
+    initializeFakeStack(response, ioInfo);
+  }
+  // Adjust the time to the current environment's time space.
+  // $FlowFixMe[cannot-write]
+  ioInfo.start += response._timeOrigin;
+  // $FlowFixMe[cannot-write]
+  ioInfo.end += response._timeOrigin;
+
+  if (enableComponentPerformanceTrack && response._replayConsole) {
+    const env = response._rootEnvironmentName;
+    const promise = ioInfo.value;
+    if (promise) {
+      const thenable: Thenable<mixed> = (promise: any);
+      switch (thenable.status) {
+        case INITIALIZED:
+          logIOInfo(ioInfo, env, thenable.value);
+          break;
+        case ERRORED:
+          logIOInfoErrored(ioInfo, env, thenable.reason);
+          break;
+        default:
+          // If we haven't resolved the Promise yet, wait to log until have so we can include
+          // its data in the log.
+          promise.then(
+            logIOInfo.bind(null, ioInfo, env),
+            logIOInfoErrored.bind(null, ioInfo, env),
+          );
+          break;
+      }
+    } else {
+      logIOInfo(ioInfo, env, undefined);
+    }
+  }
+}
+
+function resolveIOInfo(
+  response: Response,
+  id: number,
+  model: UninitializedModel,
+): void {
+  const chunks = response._chunks;
+  let chunk = chunks.get(id);
+  if (!chunk) {
+    chunk = createResolvedModelChunk(response, model);
+    chunks.set(id, chunk);
+    initializeModelChunk(chunk);
+  } else {
+    resolveModelChunk(response, chunk, model);
+    if (chunk.status === RESOLVED_MODEL) {
+      initializeModelChunk(chunk);
+    }
+  }
+  if (chunk.status === INITIALIZED) {
+    initializeIOInfo(response, chunk.value);
+  } else {
+    chunk.then(
+      v => {
+        initializeIOInfo(response, v);
+      },
+      e => {
+        // Ignore debug info errors for now. Unnecessary noise.
+      },
+    );
+  }
+}
+
+function mergeBuffer(
+  buffer: Array<Uint8Array>,
+  lastChunk: Uint8Array,
+): Uint8Array {
+  const l = buffer.length;
+  // Count the bytes we'll need
+  let byteLength = lastChunk.length;
+  for (let i = 0; i < l; i++) {
+    byteLength += buffer[i].byteLength;
+  }
+  // Allocate enough contiguous space
+  const result = new Uint8Array(byteLength);
+  let offset = 0;
+  // Copy all the buffers into it.
+  for (let i = 0; i < l; i++) {
+    const chunk = buffer[i];
+    result.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  result.set(lastChunk, offset);
+  return result;
+}
+
+function resolveTypedArray(
+  response: Response,
+  id: number,
+  buffer: Array<Uint8Array>,
+  lastChunk: Uint8Array,
+  constructor: any,
+  bytesPerElement: number,
+  streamState: StreamState,
+): void {
+  // If the view fits into one original buffer, we just reuse that buffer instead of
+  // copying it out to a separate copy. This means that it's not always possible to
+  // transfer these values to other threads without copying first since they may
+  // share array buffer. For this to work, it must also have bytes aligned to a
+  // multiple of a size of the type.
+  const chunk =
+    buffer.length === 0 && lastChunk.byteOffset % bytesPerElement === 0
+      ? lastChunk
+      : mergeBuffer(buffer, lastChunk);
+  // TODO: The transfer protocol of RSC is little-endian. If the client isn't little-endian
+  // we should convert it instead. In practice big endian isn't really Web compatible so it's
+  // somewhat safe to assume that browsers aren't going to run it, but maybe there's some SSR
+  // server that's affected.
+  const view: $ArrayBufferView = new constructor(
+    chunk.buffer,
+    chunk.byteOffset,
+    chunk.byteLength / bytesPerElement,
+  );
+  resolveBuffer(response, id, view, streamState);
+}
+
+function logComponentInfo(
+  response: Response,
+  root: SomeChunk<any>,
+  componentInfo: ReactComponentInfo,
+  trackIdx: number,
+  startTime: number,
+  componentEndTime: number,
+  childrenEndTime: number,
+  isLastComponent: boolean,
+): void {
+  // $FlowFixMe: Refined.
+  if (
+    isLastComponent &&
+    root.status === ERRORED &&
+    root.reason !== response._closedReason
+  ) {
+    // If this is the last component to render before this chunk rejected, then conceptually
+    // this component errored. If this was a cancellation then it wasn't this component that
+    // errored.
+    logComponentErrored(
+      componentInfo,
+      trackIdx,
+      startTime,
+      componentEndTime,
+      childrenEndTime,
+      response._rootEnvironmentName,
+      root.reason,
+    );
+  } else {
+    logComponentRender(
+      componentInfo,
+      trackIdx,
+      startTime,
+      componentEndTime,
+      childrenEndTime,
+      response._rootEnvironmentName,
+    );
+  }
+}
+
+function flushComponentPerformance(
+  response: Response,
+  root: SomeChunk<any>,
+  trackIdx: number, // Next available track
+  trackTime: number, // The time after which it is available,
+  parentEndTime: number,
+): ProfilingResult {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'flushComponentPerformance should never be called in production mode. This is a bug in React.',
+    );
+  }
+  // Write performance.measure() entries for Server Components in tree order.
+  // This must be done at the end to collect the end time from the whole tree.
+  if (!isArray(root._children)) {
+    // We have already written this chunk. If this was a cycle, then this will
+    // be -Infinity and it won't contribute to the parent end time.
+    // If this was already emitted by another sibling then we reused the same
+    // chunk in two places. We should extend the current end time as if it was
+    // rendered as part of this tree.
+    const previousResult: ProfilingResult = root._children;
+    const previousEndTime = previousResult.endTime;
+    if (
+      parentEndTime > -Infinity &&
+      parentEndTime < previousEndTime &&
+      previousResult.component !== null
+    ) {
+      // Log a placeholder for the deduped value under this child starting
+      // from the end of the self time of the parent and spanning until the
+      // the deduped end.
+      logDedupedComponentRender(
+        previousResult.component,
+        trackIdx,
+        parentEndTime,
+        previousEndTime,
+        response._rootEnvironmentName,
+      );
+    }
+    // Since we didn't bump the track this time, we just return the same track.
+    previousResult.track = trackIdx;
+    return previousResult;
+  }
+  const children = root._children;
+
+  // First find the start time of the first component to know if it was running
+  // in parallel with the previous.
+  let debugInfo = null;
+  if (__DEV__) {
+    debugInfo = root._debugInfo;
+    if (debugInfo.length === 0 && root.status === 'fulfilled') {
+      const resolvedValue = resolveLazy(root.value);
+      if (
+        typeof resolvedValue === 'object' &&
+        resolvedValue !== null &&
+        (isArray(resolvedValue) ||
+          typeof resolvedValue[ASYNC_ITERATOR] === 'function' ||
+          resolvedValue.$$typeof === REACT_ELEMENT_TYPE ||
+          resolvedValue.$$typeof === REACT_LAZY_TYPE) &&
+        isArray(resolvedValue._debugInfo)
+      ) {
+        // It's possible that the value has been given the debug info.
+        // In that case we need to look for it on the resolved value.
+        debugInfo = resolvedValue._debugInfo;
+      }
+    }
+  }
+  if (debugInfo) {
+    let startTime = 0;
+    for (let i = 0; i < debugInfo.length; i++) {
+      const info = debugInfo[i];
+      if (typeof info.time === 'number') {
+        startTime = info.time;
+      }
+      if (typeof info.name === 'string') {
+        if (startTime < trackTime) {
+          // The start time of this component is before the end time of the previous
+          // component on this track so we need to bump the next one to a parallel track.
+          trackIdx++;
+        }
+        trackTime = startTime;
+        break;
+      }
+    }
+    for (let i = debugInfo.length - 1; i >= 0; i--) {
+      const info = debugInfo[i];
+      if (typeof info.time === 'number') {
+        if (info.time > parentEndTime) {
+          parentEndTime = info.time;
+          break; // We assume the highest number is at the end.
+        }
+      }
+    }
+  }
+
+  const result: ProfilingResult = {
+    track: trackIdx,
+    endTime: -Infinity,
+    component: null,
+  };
+  root._children = result;
+  let childrenEndTime = -Infinity;
+  let childTrackIdx = trackIdx;
+  let childTrackTime = trackTime;
+  for (let i = 0; i < children.length; i++) {
+    const childResult = flushComponentPerformance(
+      response,
+      children[i],
+      childTrackIdx,
+      childTrackTime,
+      parentEndTime,
+    );
+    if (childResult.component !== null) {
+      result.component = childResult.component;
+    }
+    childTrackIdx = childResult.track;
+    const childEndTime = childResult.endTime;
+    if (childEndTime > childTrackTime) {
+      childTrackTime = childEndTime;
+    }
+    if (childEndTime > childrenEndTime) {
+      childrenEndTime = childEndTime;
+    }
+  }
+
+  if (debugInfo) {
+    // Write debug info in reverse order (just like stack traces).
+    let componentEndTime = 0;
+    let isLastComponent = true;
+    let endTime = -1;
+    let endTimeIdx = -1;
+    for (let i = debugInfo.length - 1; i >= 0; i--) {
+      const info = debugInfo[i];
+      if (typeof info.time !== 'number') {
+        continue;
+      }
+      if (componentEndTime === 0) {
+        // Last timestamp is the end of the last component.
+        componentEndTime = info.time;
+      }
+      const time = info.time;
+      if (endTimeIdx > -1) {
+        // Now that we know the start and end time, we can emit the entries between.
+        for (let j = endTimeIdx - 1; j > i; j--) {
+          const candidateInfo = debugInfo[j];
+          if (typeof candidateInfo.name === 'string') {
+            if (componentEndTime > childrenEndTime) {
+              childrenEndTime = componentEndTime;
+            }
+            // $FlowFixMe: Refined.
+            const componentInfo: ReactComponentInfo = candidateInfo;
+            logComponentInfo(
+              response,
+              root,
+              componentInfo,
+              trackIdx,
+              time,
+              componentEndTime,
+              childrenEndTime,
+              isLastComponent,
+            );
+            componentEndTime = time; // The end time of previous component is the start time of the next.
+            // Track the root most component of the result for deduping logging.
+            result.component = componentInfo;
+            isLastComponent = false;
+          } else if (
+            candidateInfo.awaited &&
+            // Skip awaits on client resources since they didn't block the server component.
+            candidateInfo.awaited.env != null
+          ) {
+            if (endTime > childrenEndTime) {
+              childrenEndTime = endTime;
+            }
+            // $FlowFixMe: Refined.
+            const asyncInfo: ReactAsyncInfo = candidateInfo;
+            const env = response._rootEnvironmentName;
+            const promise = asyncInfo.awaited.value;
+            if (promise) {
+              const thenable: Thenable<mixed> = (promise: any);
+              switch (thenable.status) {
+                case INITIALIZED:
+                  logComponentAwait(
+                    asyncInfo,
+                    trackIdx,
+                    time,
+                    endTime,
+                    env,
+                    thenable.value,
+                  );
+                  break;
+                case ERRORED:
+                  logComponentAwaitErrored(
+                    asyncInfo,
+                    trackIdx,
+                    time,
+                    endTime,
+                    env,
+                    thenable.reason,
+                  );
+                  break;
+                default:
+                  // We assume that we should have received the data by now since this is logged at the
+                  // end of the response stream. This is more sensitive to ordering so we don't wait
+                  // to log it.
+                  logComponentAwait(
+                    asyncInfo,
+                    trackIdx,
+                    time,
+                    endTime,
+                    env,
+                    undefined,
+                  );
+                  break;
+              }
+            } else {
+              logComponentAwait(
+                asyncInfo,
+                trackIdx,
+                time,
+                endTime,
+                env,
+                undefined,
+              );
+            }
+          }
+        }
+      } else {
+        // Anything between the end and now was aborted if it has no end time.
+        // Either because the client stream was aborted reading it or the server stream aborted.
+        endTime = time; // If we don't find anything else the endTime is the start time.
+        for (let j = debugInfo.length - 1; j > i; j--) {
+          const candidateInfo = debugInfo[j];
+          if (typeof candidateInfo.name === 'string') {
+            if (componentEndTime > childrenEndTime) {
+              childrenEndTime = componentEndTime;
+            }
+            // $FlowFixMe: Refined.
+            const componentInfo: ReactComponentInfo = candidateInfo;
+            const env = response._rootEnvironmentName;
+            logComponentAborted(
+              componentInfo,
+              trackIdx,
+              time,
+              componentEndTime,
+              childrenEndTime,
+              env,
+            );
+            componentEndTime = time; // The end time of previous component is the start time of the next.
+            // Track the root most component of the result for deduping logging.
+            result.component = componentInfo;
+            isLastComponent = false;
+          } else if (
+            candidateInfo.awaited &&
+            // Skip awaits on client resources since they didn't block the server component.
+            candidateInfo.awaited.env != null
+          ) {
+            // If we don't have an end time for an await, that means we aborted.
+            const asyncInfo: ReactAsyncInfo = candidateInfo;
+            const env = response._rootEnvironmentName;
+            if (asyncInfo.awaited.end > endTime) {
+              endTime = asyncInfo.awaited.end; // Take the end time of the I/O as the await end.
+            }
+            if (endTime > childrenEndTime) {
+              childrenEndTime = endTime;
+            }
+            logComponentAwaitAborted(asyncInfo, trackIdx, time, endTime, env);
+          }
+        }
+      }
+      endTime = time; // The end time of the next entry is this time.
+      endTimeIdx = i;
+    }
+  }
+  result.endTime = childrenEndTime;
+  return result;
+}
+
+function flushInitialRenderPerformance(response: Response): void {
+  if (
+    enableProfilerTimer &&
+    enableComponentPerformanceTrack &&
+    response._replayConsole
+  ) {
+    const rootChunk = getChunk(response, 0);
+    if (isArray(rootChunk._children)) {
+      markAllTracksInOrder();
+      flushComponentPerformance(response, rootChunk, 0, -Infinity, -Infinity);
+    }
+  }
+}
+
+function processFullBinaryRow(
+  response: Response,
+  streamState: StreamState,
+  id: number,
+  tag: number,
+  buffer: Array<Uint8Array>,
+  chunk: Uint8Array,
+): void {
+  switch (tag) {
+    case 65 /* "A" */:
+      // We must always clone to extract it into a separate buffer instead of just a view.
+      resolveBuffer(
+        response,
+        id,
+        mergeBuffer(buffer, chunk).buffer,
+        streamState,
+      );
+      return;
+    case 79 /* "O" */:
+      resolveTypedArray(response, id, buffer, chunk, Int8Array, 1, streamState);
+      return;
+    case 111 /* "o" */:
+      resolveBuffer(
+        response,
+        id,
+        buffer.length === 0 ? chunk : mergeBuffer(buffer, chunk),
+        streamState,
+      );
+      return;
+    case 85 /* "U" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Uint8ClampedArray,
+        1,
+        streamState,
+      );
+      return;
+    case 83 /* "S" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Int16Array,
+        2,
+        streamState,
+      );
+      return;
+    case 115 /* "s" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Uint16Array,
+        2,
+        streamState,
+      );
+      return;
+    case 76 /* "L" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Int32Array,
+        4,
+        streamState,
+      );
+      return;
+    case 108 /* "l" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Uint32Array,
+        4,
+        streamState,
+      );
+      return;
+    case 71 /* "G" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Float32Array,
+        4,
+        streamState,
+      );
+      return;
+    case 103 /* "g" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        Float64Array,
+        8,
+        streamState,
+      );
+      return;
+    case 77 /* "M" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        BigInt64Array,
+        8,
+        streamState,
+      );
+      return;
+    case 109 /* "m" */:
+      resolveTypedArray(
+        response,
+        id,
+        buffer,
+        chunk,
+        BigUint64Array,
+        8,
+        streamState,
+      );
+      return;
+    case 86 /* "V" */:
+      resolveTypedArray(response, id, buffer, chunk, DataView, 1, streamState);
+      return;
+  }
+
+  const stringDecoder = response._stringDecoder;
+  let row = '';
+  for (let i = 0; i < buffer.length; i++) {
+    row += readPartialStringChunk(stringDecoder, buffer[i]);
+  }
+  row += readFinalStringChunk(stringDecoder, chunk);
+  processFullStringRow(response, streamState, id, tag, row);
+}
+
+function processFullStringRow(
+  response: Response,
+  streamState: StreamState,
+  id: number,
+  tag: number,
+  row: string,
+): void {
+  switch (tag) {
+    case 73 /* "I" */: {
+      resolveModule(response, id, row, streamState);
+      return;
+    }
+    case 72 /* "H" */: {
+      const code: HintCode = (row[0]: any);
+      resolveHint(response, code, row.slice(1));
+      return;
+    }
+    case 69 /* "E" */: {
+      resolveErrorModel(response, id, row, streamState);
+      return;
+    }
+    case 84 /* "T" */: {
+      resolveText(response, id, row, streamState);
+      return;
+    }
+    case 78 /* "N" */: {
+      if (
+        enableProfilerTimer &&
+        (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ) {
+        // Track the time origin for future debug info. We track it relative
+        // to the current environment's time space.
+        const timeOrigin: number = +row;
+        response._timeOrigin =
+          timeOrigin -
+          // $FlowFixMe[prop-missing]
+          performance.timeOrigin;
+        return;
+      }
+      // Fallthrough to share the error with Debug and Console entries.
+    }
+    case 68 /* "D" */: {
+      if (__DEV__) {
+        resolveDebugModel(response, id, row);
+        return;
+      }
+      // Fallthrough to share the error with Console entries.
+    }
+    case 74 /* "J" */: {
+      if (enableProfilerTimer && enableAsyncDebugInfo) {
+        resolveIOInfo(response, id, row);
+        return;
+      }
+      // Fallthrough to share the error with Console entries.
+    }
+    case 87 /* "W" */: {
+      if (__DEV__) {
+        resolveConsoleEntry(response, row);
+        return;
+      }
+      throw new Error(
+        'Failed to read a RSC payload created by a development version of React ' +
+          'on the server while using a production version on the client. Always use ' +
+          'matching versions on the server and the client.',
+      );
+    }
+    case 82 /* "R" */: {
+      startReadableStream(response, id, undefined, streamState);
+      return;
+    }
+    // Fallthrough
+    case 114 /* "r" */: {
+      startReadableStream(response, id, 'bytes', streamState);
+      return;
+    }
+    // Fallthrough
+    case 88 /* "X" */: {
+      startAsyncIterable(response, id, false, streamState);
+      return;
+    }
+    // Fallthrough
+    case 120 /* "x" */: {
+      startAsyncIterable(response, id, true, streamState);
+      return;
+    }
+    // Fallthrough
+    case 67 /* "C" */: {
+      stopStream(response, id, row);
+      return;
+    }
+    // Fallthrough
+    default: /* """ "{" "[" "t" "f" "n" "0" - "9" */ {
+      if (__DEV__ && row === '') {
+        resolveDebugHalt(response, id);
+        return;
+      }
+      // We assume anything else is JSON.
+      resolveModel(response, id, row, streamState);
+      return;
+    }
+  }
+}
+
+export function processBinaryChunk(
+  weakResponse: WeakResponse,
+  streamState: StreamState,
+  chunk: Uint8Array,
+): void {
+  if (hasGCedResponse(weakResponse)) {
+    // Ignore more chunks if we've already GC:ed all listeners.
+    return;
+  }
+  const response = unwrapWeakResponse(weakResponse);
+  let i = 0;
+  let rowState = streamState._rowState;
+  let rowID = streamState._rowID;
+  let rowTag = streamState._rowTag;
+  let rowLength = streamState._rowLength;
+  const buffer = streamState._buffer;
+  const chunkLength = chunk.length;
+  incrementChunkDebugInfo(streamState, chunkLength);
+  while (i < chunkLength) {
+    let lastIdx = -1;
+    switch (rowState) {
+      case ROW_ID: {
+        const byte = chunk[i++];
+        if (byte === 58 /* ":" */) {
+          // Finished the rowID, next we'll parse the tag.
+          rowState = ROW_TAG;
+        } else {
+          rowID = (rowID << 4) | (byte > 96 ? byte - 87 : byte - 48);
+        }
+        continue;
+      }
+      case ROW_TAG: {
+        const resolvedRowTag = chunk[i];
+        if (
+          resolvedRowTag === 84 /* "T" */ ||
+          resolvedRowTag === 65 /* "A" */ ||
+          resolvedRowTag === 79 /* "O" */ ||
+          resolvedRowTag === 111 /* "o" */ ||
+          resolvedRowTag === 98 /* "b" */ ||
+          resolvedRowTag === 85 /* "U" */ ||
+          resolvedRowTag === 83 /* "S" */ ||
+          resolvedRowTag === 115 /* "s" */ ||
+          resolvedRowTag === 76 /* "L" */ ||
+          resolvedRowTag === 108 /* "l" */ ||
+          resolvedRowTag === 71 /* "G" */ ||
+          resolvedRowTag === 103 /* "g" */ ||
+          resolvedRowTag === 77 /* "M" */ ||
+          resolvedRowTag === 109 /* "m" */ ||
+          resolvedRowTag === 86 /* "V" */
+        ) {
+          rowTag = resolvedRowTag;
+          rowState = ROW_LENGTH;
+          i++;
+        } else if (
+          (resolvedRowTag > 64 && resolvedRowTag < 91) /* "A"-"Z" */ ||
+          resolvedRowTag === 35 /* "#" */ ||
+          resolvedRowTag === 114 /* "r" */ ||
+          resolvedRowTag === 120 /* "x" */
+        ) {
+          rowTag = resolvedRowTag;
+          rowState = ROW_CHUNK_BY_NEWLINE;
+          i++;
+        } else {
+          rowTag = 0;
+          rowState = ROW_CHUNK_BY_NEWLINE;
+          // This was an unknown tag so it was probably part of the data.
+        }
+        continue;
+      }
+      case ROW_LENGTH: {
+        const byte = chunk[i++];
+        if (byte === 44 /* "," */) {
+          // Finished the rowLength, next we'll buffer up to that length.
+          rowState = ROW_CHUNK_BY_LENGTH;
+        } else {
+          rowLength = (rowLength << 4) | (byte > 96 ? byte - 87 : byte - 48);
+        }
+        continue;
+      }
+      case ROW_CHUNK_BY_NEWLINE: {
+        // We're looking for a newline
+        lastIdx = chunk.indexOf(10 /* "\n" */, i);
+        break;
+      }
+      case ROW_CHUNK_BY_LENGTH: {
+        // We're looking for the remaining byte length
+        lastIdx = i + rowLength;
+        if (lastIdx > chunk.length) {
+          lastIdx = -1;
+        }
+        break;
+      }
+    }
+    const offset = chunk.byteOffset + i;
+    if (lastIdx > -1) {
+      // We found the last chunk of the row
+      const length = lastIdx - i;
+      const lastChunk = new Uint8Array(chunk.buffer, offset, length);
+
+      // Check if this is a Uint8Array for a byte stream. We enqueue it
+      // immediately but need to determine if we can use zero-copy or must copy.
+      if (rowTag === 98 /* "b" */) {
+        resolveBuffer(
+          response,
+          rowID,
+          // If we're at the end of the RSC chunk, no more parsing will access
+          // this buffer and we don't need to copy the chunk to allow detaching
+          // the buffer, otherwise we need to copy.
+          lastIdx === chunkLength ? lastChunk : lastChunk.slice(),
+          streamState,
+        );
+      } else {
+        // Process all other row types.
+        processFullBinaryRow(
+          response,
+          streamState,
+          rowID,
+          rowTag,
+          buffer,
+          lastChunk,
+        );
+      }
+
+      // Reset state machine for a new row
+      i = lastIdx;
+      if (rowState === ROW_CHUNK_BY_NEWLINE) {
+        // If we're trailing by a newline we need to skip it.
+        i++;
+      }
+      rowState = ROW_ID;
+      rowTag = 0;
+      rowID = 0;
+      rowLength = 0;
+      buffer.length = 0;
+    } else {
+      // The rest of this row is in a future chunk.
+      const length = chunk.byteLength - i;
+      const remainingSlice = new Uint8Array(chunk.buffer, offset, length);
+
+      // For byte streams, we can enqueue the partial row immediately without
+      // copying since we're at the end of the RSC chunk and no more parsing
+      // will access this buffer.
+      if (rowTag === 98 /* "b" */) {
+        // Update how many bytes we're still waiting for. We need to do this
+        // before enqueueing, as enqueue will detach the buffer and byteLength
+        // will become 0.
+        rowLength -= remainingSlice.byteLength;
+        resolveBuffer(response, rowID, remainingSlice, streamState);
+      } else {
+        // For other row types, stash the rest of the current chunk until we can
+        // process the full row.
+        buffer.push(remainingSlice);
+        // Update how many bytes we're still waiting for. If we're looking for
+        // a newline, this doesn't hurt since we'll just ignore it.
+        rowLength -= remainingSlice.byteLength;
+      }
+      break;
+    }
+  }
+  streamState._rowState = rowState;
+  streamState._rowID = rowID;
+  streamState._rowTag = rowTag;
+  streamState._rowLength = rowLength;
+}
+
+export function processStringChunk(
+  weakResponse: WeakResponse,
+  streamState: StreamState,
+  chunk: string,
+): void {
+  if (hasGCedResponse(weakResponse)) {
+    // Ignore more chunks if we've already GC:ed all listeners.
+    return;
+  }
+  const response = unwrapWeakResponse(weakResponse);
+  // This is a fork of processBinaryChunk that takes a string as input.
+  // This can't be just any binary chunk coverted to a string. It needs to be
+  // in the same offsets given from the Flight Server. E.g. if it's shifted by
+  // one byte then it won't line up to the UCS-2 encoding. It also needs to
+  // be valid Unicode. Also binary chunks cannot use this even if they're
+  // value Unicode. Large strings are encoded as binary and cannot be passed
+  // here. Basically, only if Flight Server gave you this string as a chunk,
+  // you can use it here.
+  let i = 0;
+  let rowState = streamState._rowState;
+  let rowID = streamState._rowID;
+  let rowTag = streamState._rowTag;
+  let rowLength = streamState._rowLength;
+  const buffer = streamState._buffer;
+  const chunkLength = chunk.length;
+  incrementChunkDebugInfo(streamState, chunkLength);
+  while (i < chunkLength) {
+    let lastIdx = -1;
+    switch (rowState) {
+      case ROW_ID: {
+        const byte = chunk.charCodeAt(i++);
+        if (byte === 58 /* ":" */) {
+          // Finished the rowID, next we'll parse the tag.
+          rowState = ROW_TAG;
+        } else {
+          rowID = (rowID << 4) | (byte > 96 ? byte - 87 : byte - 48);
+        }
+        continue;
+      }
+      case ROW_TAG: {
+        const resolvedRowTag = chunk.charCodeAt(i);
+        if (
+          resolvedRowTag === 84 /* "T" */ ||
+          resolvedRowTag === 65 /* "A" */ ||
+          resolvedRowTag === 79 /* "O" */ ||
+          resolvedRowTag === 111 /* "o" */ ||
+          resolvedRowTag === 85 /* "U" */ ||
+          resolvedRowTag === 83 /* "S" */ ||
+          resolvedRowTag === 115 /* "s" */ ||
+          resolvedRowTag === 76 /* "L" */ ||
+          resolvedRowTag === 108 /* "l" */ ||
+          resolvedRowTag === 71 /* "G" */ ||
+          resolvedRowTag === 103 /* "g" */ ||
+          resolvedRowTag === 77 /* "M" */ ||
+          resolvedRowTag === 109 /* "m" */ ||
+          resolvedRowTag === 86 /* "V" */
+        ) {
+          rowTag = resolvedRowTag;
+          rowState = ROW_LENGTH;
+          i++;
+        } else if (
+          (resolvedRowTag > 64 && resolvedRowTag < 91) /* "A"-"Z" */ ||
+          resolvedRowTag === 114 /* "r" */ ||
+          resolvedRowTag === 120 /* "x" */
+        ) {
+          rowTag = resolvedRowTag;
+          rowState = ROW_CHUNK_BY_NEWLINE;
+          i++;
+        } else {
+          rowTag = 0;
+          rowState = ROW_CHUNK_BY_NEWLINE;
+          // This was an unknown tag so it was probably part of the data.
+        }
+        continue;
+      }
+      case ROW_LENGTH: {
+        const byte = chunk.charCodeAt(i++);
+        if (byte === 44 /* "," */) {
+          // Finished the rowLength, next we'll buffer up to that length.
+          rowState = ROW_CHUNK_BY_LENGTH;
+        } else {
+          rowLength = (rowLength << 4) | (byte > 96 ? byte - 87 : byte - 48);
+        }
+        continue;
+      }
+      case ROW_CHUNK_BY_NEWLINE: {
+        // We're looking for a newline
+        lastIdx = chunk.indexOf('\n', i);
+        break;
+      }
+      case ROW_CHUNK_BY_LENGTH: {
+        if (rowTag !== 84) {
+          throw new Error(
+            'Binary RSC chunks cannot be encoded as strings. ' +
+              'This is a bug in the wiring of the React streams.',
+          );
+        }
+        // For a large string by length, we don't know how many unicode characters
+        // we are looking for but we can assume that the raw string will be its own
+        // chunk. We add extra validation that the length is at least within the
+        // possible byte range it could possibly be to catch mistakes.
+        if (rowLength < chunk.length || chunk.length > rowLength * 3) {
+          throw new Error(
+            'String chunks need to be passed in their original shape. ' +
+              'Not split into smaller string chunks. ' +
+              'This is a bug in the wiring of the React streams.',
+          );
+        }
+        lastIdx = chunk.length;
+        break;
+      }
+    }
+    if (lastIdx > -1) {
+      // We found the last chunk of the row
+      if (buffer.length > 0) {
+        // If we had a buffer already, it means that this chunk was split up into
+        // binary chunks preceeding it.
+        throw new Error(
+          'String chunks need to be passed in their original shape. ' +
+            'Not split into smaller string chunks. ' +
+            'This is a bug in the wiring of the React streams.',
+        );
+      }
+      const lastChunk = chunk.slice(i, lastIdx);
+      processFullStringRow(response, streamState, rowID, rowTag, lastChunk);
+      // Reset state machine for a new row
+      i = lastIdx;
+      if (rowState === ROW_CHUNK_BY_NEWLINE) {
+        // If we're trailing by a newline we need to skip it.
+        i++;
+      }
+      rowState = ROW_ID;
+      rowTag = 0;
+      rowID = 0;
+      rowLength = 0;
+      buffer.length = 0;
+    } else if (chunk.length !== i) {
+      // The rest of this row is in a future chunk. We only support passing the
+      // string from chunks in their entirety. Not split up into smaller string chunks.
+      // We could support this by buffering them but we shouldn't need to for
+      // this use case.
+      throw new Error(
+        'String chunks need to be passed in their original shape. ' +
+          'Not split into smaller string chunks. ' +
+          'This is a bug in the wiring of the React streams.',
+      );
+    }
+  }
+  streamState._rowState = rowState;
+  streamState._rowID = rowID;
+  streamState._rowTag = rowTag;
+  streamState._rowLength = rowLength;
+}
+
+function parseModel<T>(response: Response, json: UninitializedModel): T {
+  return JSON.parse(json, response._fromJSON);
+}
+
+function createFromJSONCallback(response: Response) {
+  // $FlowFixMe[missing-this-annot]
+  return function (key: string, value: JSONValue) {
+    if (typeof value === 'string') {
+      // We can't use .bind here because we need the "this" value.
+      return parseModelString(response, this, key, value);
+    }
+    if (typeof value === 'object' && value !== null) {
+      return parseModelTuple(response, value);
+    }
+    return value;
+  };
+}
+
+export function close(weakResponse: WeakResponse): 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(weakResponse, new Error('Connection closed.'));
+}
+
+function getCurrentOwnerInDEV(): null | ReactComponentInfo {
+  return currentOwnerInDEV;
+}
+
+export function injectIntoDevTools(): boolean {
+  const internals: Object = {
+    bundleType: __DEV__ ? 1 : 0, // Might add PROFILE later.
+    version: rendererVersion,
+    rendererPackageName: rendererPackageName,
+    currentDispatcherRef: ReactSharedInternals,
+    // Enables DevTools to detect reconciler version rather than renderer version
+    // which may not match for third party renderers.
+    reconcilerVersion: ReactVersion,
+    getCurrentComponentInfo: getCurrentOwnerInDEV,
+  };
+  return injectInternals(internals);
+}
diff --git a/packages/react-client/src/ReactFlightClientConfig.js b/packages/react-client/src/ReactFlightClientConfig.js
new file mode 100644
index 00000000000..4d6251b12a5
--- /dev/null
+++ b/packages/react-client/src/ReactFlightClientConfig.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/prod-error-codes */
+
+// 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.
+
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-client/src/ReactFlightClientDevToolsHook.js b/packages/react-client/src/ReactFlightClientDevToolsHook.js
new file mode 100644
index 00000000000..4f5a716eb32
--- /dev/null
+++ b/packages/react-client/src/ReactFlightClientDevToolsHook.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 const __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
+
+export function injectInternals(internals: Object): boolean {
+  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+    // No DevTools
+    return false;
+  }
+  const hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook.isDisabled) {
+    // This isn't a real property on the hook, but it can be set to opt out
+    // of DevTools integration and associated warnings and logs.
+    // https://github.com/facebook/react/issues/3877
+    return true;
+  }
+  if (!hook.supportsFlight) {
+    // DevTools exists, even though it doesn't support Flight.
+    return true;
+  }
+  try {
+    hook.inject(internals);
+  } catch (err) {
+    // Catch all errors because it is unsafe to throw during initialization.
+    if (__DEV__) {
+      console.error('React instrumentation encountered an error: %o.', err);
+    }
+  }
+  if (hook.checkDCE) {
+    // This is the real DevTools.
+    return true;
+  } else {
+    // This is likely a hook installed by Fast Refresh runtime.
+    return false;
+  }
+}
diff --git a/packages/react-client/src/ReactFlightClientStreamConfigNode.js b/packages/react-client/src/ReactFlightClientStreamConfigNode.js
new file mode 100644
index 00000000000..f544759ccce
--- /dev/null
+++ b/packages/react-client/src/ReactFlightClientStreamConfigNode.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {TextDecoder} from 'util';
+
+export type StringDecoder = TextDecoder;
+
+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-client/src/ReactFlightClientStreamConfigWeb.js b/packages/react-client/src/ReactFlightClientStreamConfigWeb.js
new file mode 100644
index 00000000000..5aaee08f627
--- /dev/null
+++ b/packages/react-client/src/ReactFlightClientStreamConfigWeb.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 StringDecoder = TextDecoder;
+
+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-client/src/ReactFlightPerformanceTrack.js b/packages/react-client/src/ReactFlightPerformanceTrack.js
new file mode 100644
index 00000000000..fb29fb45d0b
--- /dev/null
+++ b/packages/react-client/src/ReactFlightPerformanceTrack.js
@@ -0,0 +1,649 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/no-production-logging */
+
+import type {
+  ReactComponentInfo,
+  ReactIOInfo,
+  ReactAsyncInfo,
+} from 'shared/ReactTypes';
+
+import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+
+import {
+  addValueToProperties,
+  addObjectToProperties,
+} from 'shared/ReactPerformanceTrackProperties';
+
+import {getIODescription} from 'shared/ReactIODescription';
+
+const supportsUserTiming =
+  enableProfilerTimer &&
+  typeof console !== 'undefined' &&
+  typeof console.timeStamp === 'function' &&
+  typeof performance !== 'undefined' &&
+  // $FlowFixMe[method-unbinding]
+  typeof performance.measure === 'function';
+
+const IO_TRACK = 'Server Requests ⚛';
+const COMPONENTS_TRACK = 'Server Components ⚛';
+
+export function markAllTracksInOrder() {
+  if (supportsUserTiming) {
+    // Ensure we create the Server Component track groups earlier than the Client Scheduler
+    // and Client Components. We can always add the 0 time slot even if it's in the past.
+    // That's still considered for ordering.
+    console.timeStamp(
+      'Server Requests Track',
+      0.001,
+      0.001,
+      IO_TRACK,
+      undefined,
+      'primary-light',
+    );
+    console.timeStamp(
+      'Server Components Track',
+      0.001,
+      0.001,
+      'Primary',
+      COMPONENTS_TRACK,
+      'primary-light',
+    );
+  }
+}
+
+const trackNames = [
+  'Primary',
+  'Parallel',
+  'Parallel\u200b', // Padded with zero-width space to give each track a unique name.
+  'Parallel\u200b\u200b',
+  'Parallel\u200b\u200b\u200b',
+  'Parallel\u200b\u200b\u200b\u200b',
+  'Parallel\u200b\u200b\u200b\u200b\u200b',
+  'Parallel\u200b\u200b\u200b\u200b\u200b\u200b',
+  'Parallel\u200b\u200b\u200b\u200b\u200b\u200b\u200b',
+  'Parallel\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b',
+];
+
+export function logComponentRender(
+  componentInfo: ReactComponentInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  childrenEndTime: number,
+  rootEnv: string,
+): void {
+  if (supportsUserTiming && childrenEndTime >= 0 && trackIdx < 10) {
+    const env = componentInfo.env;
+    const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const selfTime = endTime - startTime;
+    const color =
+      selfTime < 0.5
+        ? isPrimaryEnv
+          ? 'primary-light'
+          : 'secondary-light'
+        : selfTime < 50
+          ? isPrimaryEnv
+            ? 'primary'
+            : 'secondary'
+          : selfTime < 500
+            ? isPrimaryEnv
+              ? 'primary-dark'
+              : 'secondary-dark'
+            : 'error';
+    const entryName =
+      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
+    const debugTask = componentInfo.debugTask;
+    const measureName = '\u200b' + entryName;
+    if (__DEV__ && debugTask) {
+      const properties: Array<[string, string]> = [];
+      if (componentInfo.key != null) {
+        addValueToProperties('key', componentInfo.key, properties, 0, '');
+      }
+      if (componentInfo.props != null) {
+        addObjectToProperties(componentInfo.props, properties, 0, '');
+      }
+
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(performance, measureName, {
+          start: startTime < 0 ? 0 : startTime,
+          end: childrenEndTime,
+          detail: {
+            devtools: {
+              color: color,
+              track: trackNames[trackIdx],
+              trackGroup: COMPONENTS_TRACK,
+              properties,
+            },
+          },
+        }),
+      );
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        measureName,
+        startTime < 0 ? 0 : startTime,
+        childrenEndTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        color,
+      );
+    }
+  }
+}
+
+export function logComponentAborted(
+  componentInfo: ReactComponentInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  childrenEndTime: number,
+  rootEnv: string,
+): void {
+  if (supportsUserTiming) {
+    const env = componentInfo.env;
+    const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const entryName =
+      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
+    const measureName = '\u200b' + entryName;
+    if (__DEV__) {
+      const properties: Array<[string, string]> = [
+        [
+          'Aborted',
+          'The stream was aborted before this Component finished rendering.',
+        ],
+      ];
+      if (componentInfo.key != null) {
+        addValueToProperties('key', componentInfo.key, properties, 0, '');
+      }
+      if (componentInfo.props != null) {
+        addObjectToProperties(componentInfo.props, properties, 0, '');
+      }
+
+      performance.measure(measureName, {
+        start: startTime < 0 ? 0 : startTime,
+        end: childrenEndTime,
+        detail: {
+          devtools: {
+            color: 'warning',
+            track: trackNames[trackIdx],
+            trackGroup: COMPONENTS_TRACK,
+            tooltipText: entryName + ' Aborted',
+            properties,
+          },
+        },
+      });
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        measureName,
+        startTime < 0 ? 0 : startTime,
+        childrenEndTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        'warning',
+      );
+    }
+  }
+}
+
+export function logComponentErrored(
+  componentInfo: ReactComponentInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  childrenEndTime: number,
+  rootEnv: string,
+  error: mixed,
+): void {
+  if (supportsUserTiming) {
+    const env = componentInfo.env;
+    const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const entryName =
+      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
+    const measureName = '\u200b' + entryName;
+    if (__DEV__) {
+      const message =
+        typeof error === 'object' &&
+        error !== null &&
+        typeof error.message === 'string'
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error.message)
+          : // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error);
+      const properties: Array<[string, string]> = [['Error', message]];
+      if (componentInfo.key != null) {
+        addValueToProperties('key', componentInfo.key, properties, 0, '');
+      }
+      if (componentInfo.props != null) {
+        addObjectToProperties(componentInfo.props, properties, 0, '');
+      }
+
+      performance.measure(measureName, {
+        start: startTime < 0 ? 0 : startTime,
+        end: childrenEndTime,
+        detail: {
+          devtools: {
+            color: 'error',
+            track: trackNames[trackIdx],
+            trackGroup: COMPONENTS_TRACK,
+            tooltipText: entryName + ' Errored',
+            properties,
+          },
+        },
+      });
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        measureName,
+        startTime < 0 ? 0 : startTime,
+        childrenEndTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        'error',
+      );
+    }
+  }
+}
+
+export function logDedupedComponentRender(
+  componentInfo: ReactComponentInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  rootEnv: string,
+): void {
+  if (supportsUserTiming && endTime >= 0 && trackIdx < 10) {
+    const env = componentInfo.env;
+    const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const color = isPrimaryEnv ? 'primary-light' : 'secondary-light';
+    const entryName = name + ' [deduped]';
+    const debugTask = componentInfo.debugTask;
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          entryName,
+          startTime < 0 ? 0 : startTime,
+          endTime,
+          trackNames[trackIdx],
+          COMPONENTS_TRACK,
+          color,
+        ),
+      );
+    } else {
+      console.timeStamp(
+        entryName,
+        startTime < 0 ? 0 : startTime,
+        endTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        color,
+      );
+    }
+  }
+}
+
+function getIOColor(
+  functionName: string,
+): 'tertiary-light' | 'tertiary' | 'tertiary-dark' {
+  // Add some color variation to be able to distinguish various sources.
+  switch (functionName.charCodeAt(0) % 3) {
+    case 0:
+      return 'tertiary-light';
+    case 1:
+      return 'tertiary';
+    default:
+      return 'tertiary-dark';
+  }
+}
+
+function getIOLongName(
+  ioInfo: ReactIOInfo,
+  description: string,
+  env: void | string,
+  rootEnv: string,
+): string {
+  const name = ioInfo.name;
+  const longName = description === '' ? name : name + ' (' + description + ')';
+  const isPrimaryEnv = env === rootEnv;
+  return isPrimaryEnv || env === undefined
+    ? longName
+    : longName + ' [' + env + ']';
+}
+
+function getIOShortName(
+  ioInfo: ReactIOInfo,
+  description: string,
+  env: void | string,
+  rootEnv: string,
+): string {
+  const name = ioInfo.name;
+  const isPrimaryEnv = env === rootEnv;
+  const envSuffix = isPrimaryEnv || env === undefined ? '' : ' [' + env + ']';
+  let desc = '';
+  const descMaxLength = 30 - name.length - envSuffix.length;
+  if (descMaxLength > 1) {
+    const l = description.length;
+    if (l > 0 && l <= descMaxLength) {
+      // We can fit the full description
+      desc = ' (' + description + ')';
+    } else if (
+      description.startsWith('http://') ||
+      description.startsWith('https://') ||
+      description.startsWith('/')
+    ) {
+      // Looks like a URL. Let's see if we can extract something shorter.
+      // We don't have to do a full parse so let's try something cheaper.
+      let queryIdx = description.indexOf('?');
+      if (queryIdx === -1) {
+        queryIdx = description.length;
+      }
+      if (description.charCodeAt(queryIdx - 1) === 47 /* "/" */) {
+        // Ends with slash. Look before that.
+        queryIdx--;
+      }
+      const slashIdx = description.lastIndexOf('/', queryIdx - 1);
+      if (queryIdx - slashIdx < descMaxLength) {
+        // This may now be either the file name or the host.
+        // Include the slash to make it more obvious what we trimmed.
+        desc = ' (…' + description.slice(slashIdx, queryIdx) + ')';
+      } else {
+        // cut out the middle to not exceed the max length
+        const start = description.slice(slashIdx, slashIdx + descMaxLength / 2);
+        const end = description.slice(queryIdx - descMaxLength / 2, queryIdx);
+        desc = ' (' + (slashIdx > 0 ? '…' : '') + start + '…' + end + ')';
+      }
+    }
+  }
+  return name + desc + envSuffix;
+}
+
+export function logComponentAwaitAborted(
+  asyncInfo: ReactAsyncInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  rootEnv: string,
+): void {
+  if (supportsUserTiming && endTime > 0) {
+    const entryName =
+      'await ' + getIOShortName(asyncInfo.awaited, '', asyncInfo.env, rootEnv);
+    const debugTask = asyncInfo.debugTask || asyncInfo.awaited.debugTask;
+    if (__DEV__ && debugTask) {
+      const properties = [
+        ['Aborted', 'The stream was aborted before this Promise resolved.'],
+      ];
+      const tooltipText =
+        getIOLongName(asyncInfo.awaited, '', asyncInfo.env, rootEnv) +
+        ' Aborted';
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(performance, entryName, {
+          start: startTime < 0 ? 0 : startTime,
+          end: endTime,
+          detail: {
+            devtools: {
+              color: 'warning',
+              track: trackNames[trackIdx],
+              trackGroup: COMPONENTS_TRACK,
+              properties,
+              tooltipText,
+            },
+          },
+        }),
+      );
+      performance.clearMeasures(entryName);
+    } else {
+      console.timeStamp(
+        entryName,
+        startTime < 0 ? 0 : startTime,
+        endTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        'warning',
+      );
+    }
+  }
+}
+
+export function logComponentAwaitErrored(
+  asyncInfo: ReactAsyncInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  rootEnv: string,
+  error: mixed,
+): void {
+  if (supportsUserTiming && endTime > 0) {
+    const description = getIODescription(error);
+    const entryName =
+      'await ' +
+      getIOShortName(asyncInfo.awaited, description, asyncInfo.env, rootEnv);
+    const debugTask = asyncInfo.debugTask || asyncInfo.awaited.debugTask;
+    if (__DEV__ && debugTask) {
+      const message =
+        typeof error === 'object' &&
+        error !== null &&
+        typeof error.message === 'string'
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error.message)
+          : // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error);
+      const properties = [['Rejected', message]];
+      const tooltipText =
+        getIOLongName(asyncInfo.awaited, description, asyncInfo.env, rootEnv) +
+        ' Rejected';
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(performance, entryName, {
+          start: startTime < 0 ? 0 : startTime,
+          end: endTime,
+          detail: {
+            devtools: {
+              color: 'error',
+              track: trackNames[trackIdx],
+              trackGroup: COMPONENTS_TRACK,
+              properties,
+              tooltipText,
+            },
+          },
+        }),
+      );
+      performance.clearMeasures(entryName);
+    } else {
+      console.timeStamp(
+        entryName,
+        startTime < 0 ? 0 : startTime,
+        endTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        'error',
+      );
+    }
+  }
+}
+
+export function logComponentAwait(
+  asyncInfo: ReactAsyncInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  rootEnv: string,
+  value: mixed,
+): void {
+  if (supportsUserTiming && endTime > 0) {
+    const description = getIODescription(value);
+    const name = getIOShortName(
+      asyncInfo.awaited,
+      description,
+      asyncInfo.env,
+      rootEnv,
+    );
+    const entryName = 'await ' + name;
+    const color = getIOColor(name);
+    const debugTask = asyncInfo.debugTask || asyncInfo.awaited.debugTask;
+    if (__DEV__ && debugTask) {
+      const properties: Array<[string, string]> = [];
+      if (typeof value === 'object' && value !== null) {
+        addObjectToProperties(value, properties, 0, '');
+      } else if (value !== undefined) {
+        addValueToProperties('awaited value', value, properties, 0, '');
+      }
+      const tooltipText = getIOLongName(
+        asyncInfo.awaited,
+        description,
+        asyncInfo.env,
+        rootEnv,
+      );
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(performance, entryName, {
+          start: startTime < 0 ? 0 : startTime,
+          end: endTime,
+          detail: {
+            devtools: {
+              color: color,
+              track: trackNames[trackIdx],
+              trackGroup: COMPONENTS_TRACK,
+              properties,
+              tooltipText,
+            },
+          },
+        }),
+      );
+      performance.clearMeasures(entryName);
+    } else {
+      console.timeStamp(
+        entryName,
+        startTime < 0 ? 0 : startTime,
+        endTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        color,
+      );
+    }
+  }
+}
+
+export function logIOInfoErrored(
+  ioInfo: ReactIOInfo,
+  rootEnv: string,
+  error: mixed,
+): void {
+  const startTime = ioInfo.start;
+  const endTime = ioInfo.end;
+  if (supportsUserTiming && endTime >= 0) {
+    const description = getIODescription(error);
+    const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv);
+    const debugTask = ioInfo.debugTask;
+    const measureName = '\u200b' + entryName;
+    if (__DEV__ && debugTask) {
+      const message =
+        typeof error === 'object' &&
+        error !== null &&
+        typeof error.message === 'string'
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error.message)
+          : // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error);
+      const properties = [['rejected with', message]];
+      const tooltipText =
+        getIOLongName(ioInfo, description, ioInfo.env, rootEnv) + ' Rejected';
+
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(performance, measureName, {
+          start: startTime < 0 ? 0 : startTime,
+          end: endTime,
+          detail: {
+            devtools: {
+              color: 'error',
+              track: IO_TRACK,
+              properties,
+              tooltipText,
+            },
+          },
+        }),
+      );
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        measureName,
+        startTime < 0 ? 0 : startTime,
+        endTime,
+        IO_TRACK,
+        undefined,
+        'error',
+      );
+    }
+  }
+}
+
+export function logIOInfo(
+  ioInfo: ReactIOInfo,
+  rootEnv: string,
+  value: mixed,
+): void {
+  const startTime = ioInfo.start;
+  const endTime = ioInfo.end;
+  if (supportsUserTiming && endTime >= 0) {
+    const description = getIODescription(value);
+    const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv);
+    const color = getIOColor(entryName);
+    const debugTask = ioInfo.debugTask;
+    const measureName = '\u200b' + entryName;
+    if (__DEV__ && debugTask) {
+      const properties: Array<[string, string]> = [];
+      if (typeof value === 'object' && value !== null) {
+        addObjectToProperties(value, properties, 0, '');
+      } else if (value !== undefined) {
+        addValueToProperties('Resolved', value, properties, 0, '');
+      }
+      const tooltipText = getIOLongName(
+        ioInfo,
+        description,
+        ioInfo.env,
+        rootEnv,
+      );
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(performance, measureName, {
+          start: startTime < 0 ? 0 : startTime,
+          end: endTime,
+          detail: {
+            devtools: {
+              color: color,
+              track: IO_TRACK,
+              properties,
+              tooltipText,
+            },
+          },
+        }),
+      );
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        measureName,
+        startTime < 0 ? 0 : startTime,
+        endTime,
+        IO_TRACK,
+        undefined,
+        color,
+      );
+    }
+  }
+}
diff --git a/packages/react-client/src/ReactFlightReplyClient.js b/packages/react-client/src/ReactFlightReplyClient.js
new file mode 100644
index 00000000000..4dc13ce4860
--- /dev/null
+++ b/packages/react-client/src/ReactFlightReplyClient.js
@@ -0,0 +1,1414 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactCustomFormAction,
+  ReactFunctionLocation,
+} from 'shared/ReactTypes';
+import type {LazyComponent} from 'react/src/ReactLazy';
+import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences';
+
+import {
+  REACT_ELEMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_CONTEXT_TYPE,
+  getIteratorFn,
+  ASYNC_ITERATOR,
+} from 'shared/ReactSymbols';
+
+import {
+  describeObjectForErrorMessage,
+  isSimpleObject,
+  objectName,
+} from 'shared/ReactSerializationErrors';
+
+import {writeTemporaryReference} from './ReactFlightTemporaryReferences';
+
+import isArray from 'shared/isArray';
+import getPrototypeOf from 'shared/getPrototypeOf';
+
+const ObjectPrototype = Object.prototype;
+
+import {usedWithSSR} from './ReactFlightClientConfig';
+
+type ReactJSONValue =
+  | string
+  | boolean
+  | number
+  | null
+  | $ReadOnlyArray<ReactJSONValue>
+  | ReactServerObject;
+
+export opaque type ServerReference<T> = T;
+
+export type CallServerCallback = <A, T>(id: any, args: A) => Promise<T>;
+
+export type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type ServerReferenceId = any;
+
+type ServerReferenceClosure = {
+  id: ServerReferenceId,
+  originalBind: Function,
+  bound: null | Thenable<Array<any>>,
+};
+
+const knownServerReferences: WeakMap<Function, ServerReferenceClosure> =
+  new WeakMap();
+
+// Serializable values
+export type ReactServerValue =
+  // References are passed by their value
+  | ServerReference<any>
+  // The rest are passed as is. Sub-types can be passed in but lose their
+  // subtype, so the receiver can only accept once of these.
+  | string
+  | boolean
+  | number
+  | null
+  | void
+  | bigint
+  | $AsyncIterable<ReactServerValue, ReactServerValue, void>
+  | $AsyncIterator<ReactServerValue, ReactServerValue, void>
+  | Iterable<ReactServerValue>
+  | Iterator<ReactServerValue>
+  | Array<ReactServerValue>
+  | Map<ReactServerValue, ReactServerValue>
+  | Set<ReactServerValue>
+  | FormData
+  | Date
+  | ReactServerObject
+  | Promise<ReactServerValue>; // Thenable<ReactServerValue>
+
+type ReactServerObject = {+[key: string]: ReactServerValue};
+
+function serializeByValueID(id: number): string {
+  return '$' + id.toString(16);
+}
+
+function serializePromiseID(id: number): string {
+  return '$@' + id.toString(16);
+}
+
+function serializeServerReferenceID(id: number): string {
+  return '$h' + id.toString(16);
+}
+
+function serializeTemporaryReferenceMarker(): string {
+  return '$T';
+}
+
+function serializeFormDataReference(id: number): string {
+  return '$K' + id.toString(16);
+}
+
+function serializeNumber(number: number): string | number {
+  if (Number.isFinite(number)) {
+    if (number === 0 && 1 / number === -Infinity) {
+      return '$-0';
+    } else {
+      return number;
+    }
+  } else {
+    if (number === Infinity) {
+      return '$Infinity';
+    } else if (number === -Infinity) {
+      return '$-Infinity';
+    } else {
+      return '$NaN';
+    }
+  }
+}
+
+function serializeUndefined(): string {
+  return '$undefined';
+}
+
+function serializeDateFromDateJSON(dateJSON: string): string {
+  // JSON.stringify automatically calls Date.prototype.toJSON which calls toISOString.
+  // We need only tack on a $D prefix.
+  return '$D' + dateJSON;
+}
+
+function serializeBigInt(n: bigint): string {
+  return '$n' + n.toString(10);
+}
+
+function serializeMapID(id: number): string {
+  return '$Q' + id.toString(16);
+}
+
+function serializeSetID(id: number): string {
+  return '$W' + id.toString(16);
+}
+
+function serializeBlobID(id: number): string {
+  return '$B' + id.toString(16);
+}
+
+function serializeIteratorID(id: number): string {
+  return '$i' + id.toString(16);
+}
+
+function escapeStringValue(value: string): string {
+  if (value[0] === '$') {
+    // We need to escape $ prefixed strings since we use those to encode
+    // references to IDs and as special symbol values.
+    return '$' + value;
+  } else {
+    return value;
+  }
+}
+
+interface Reference {}
+
+export function processReply(
+  root: ReactServerValue,
+  formFieldPrefix: string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  resolve: (string | FormData) => void,
+  reject: (error: mixed) => void,
+): (reason: mixed) => void {
+  let nextPartId = 1;
+  let pendingParts = 0;
+  let formData: null | FormData = null;
+  const writtenObjects: WeakMap<Reference, string> = new WeakMap();
+  let modelRoot: null | ReactServerValue = root;
+
+  function serializeTypedArray(
+    tag: string,
+    typedArray: $ArrayBufferView,
+  ): string {
+    const blob = new Blob([
+      // We should be able to pass the buffer straight through but Node < 18 treat
+      // multi-byte array blobs differently so we first convert it to single-byte.
+      new Uint8Array(
+        typedArray.buffer,
+        typedArray.byteOffset,
+        typedArray.byteLength,
+      ),
+    ]);
+    const blobId = nextPartId++;
+    if (formData === null) {
+      formData = new FormData();
+    }
+    formData.append(formFieldPrefix + blobId, blob);
+    return '$' + tag + blobId.toString(16);
+  }
+
+  function serializeBinaryReader(reader: any): string {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+    const data = formData;
+
+    pendingParts++;
+    const streamId = nextPartId++;
+
+    const buffer = [];
+
+    function progress(entry: {done: boolean, value: ReactServerValue, ...}) {
+      if (entry.done) {
+        const blobId = nextPartId++;
+        data.append(formFieldPrefix + blobId, new Blob(buffer));
+        data.append(
+          formFieldPrefix + streamId,
+          '"$o' + blobId.toString(16) + '"',
+        );
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        pendingParts--;
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader: ReadableStreamReader): string {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+    const data = formData;
+
+    pendingParts++;
+    const streamId = nextPartId++;
+
+    function progress(entry: {done: boolean, value: ReactServerValue, ...}) {
+      if (entry.done) {
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        pendingParts--;
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          const partJSON: string = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+    reader.read().then(progress, reject);
+
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream: ReadableStream): string {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    let binaryReader;
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({mode: 'byob'});
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(
+    iterable: $AsyncIterable<ReactServerValue, ReactServerValue, void>,
+    iterator: $AsyncIterator<ReactServerValue, ReactServerValue, void>,
+  ): string {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+    const data = formData;
+
+    pendingParts++;
+    const streamId = nextPartId++;
+
+    // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+    const isIterator = iterable === iterator;
+
+    // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+    function progress(
+      entry:
+        | {done: false, +value: ReactServerValue, ...}
+        | {done: true, +value: ReactServerValue, ...},
+    ) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            const partJSON: string = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+        pendingParts--;
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          const partJSON: string = JSON.stringify(entry.value, resolveToJSON);
+          data.append(formFieldPrefix + streamId, partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
+
+  function resolveToJSON(
+    this:
+      | {+[key: string | number]: ReactServerValue}
+      | $ReadOnlyArray<ReactServerValue>,
+    key: string,
+    value: ReactServerValue,
+  ): ReactJSONValue {
+    const parent = this;
+
+    // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
+    if (__DEV__) {
+      // $FlowFixMe[incompatible-use]
+      const originalValue = parent[key];
+      if (
+        typeof originalValue === 'object' &&
+        originalValue !== value &&
+        !(originalValue instanceof Date)
+      ) {
+        if (objectName(originalValue) !== 'Object') {
+          console.error(
+            'Only plain objects can be passed to Server Functions from the Client. ' +
+              '%s objects are not supported.%s',
+            objectName(originalValue),
+            describeObjectForErrorMessage(parent, key),
+          );
+        } else {
+          console.error(
+            'Only plain objects can be passed to Server Functions from the Client. ' +
+              'Objects with toJSON methods are not supported. Convert it manually ' +
+              'to a simple value before passing it to props.%s',
+            describeObjectForErrorMessage(parent, key),
+          );
+        }
+      }
+    }
+
+    if (value === null) {
+      return null;
+    }
+
+    if (typeof value === 'object') {
+      switch ((value: any).$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
+            // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+            const parentReference = writtenObjects.get(parent);
+            if (parentReference !== undefined) {
+              // If the parent has a reference, we can refer to this object indirectly
+              // through the property name inside that parent.
+              const reference = parentReference + ':' + key;
+              // Store this object so that the server can refer to it later in responses.
+              writeTemporaryReference(temporaryReferences, reference, value);
+              return serializeTemporaryReferenceMarker();
+            }
+          }
+          throw new Error(
+            'React Element cannot be passed to Server Functions from the Client without a ' +
+              'temporary reference set. Pass a TemporaryReferenceSet to the options.' +
+              (__DEV__ ? describeObjectForErrorMessage(parent, key) : ''),
+          );
+        }
+        case REACT_LAZY_TYPE: {
+          // Resolve lazy as if it wasn't here. In the future this will be encoded as a Promise.
+          const lazy: LazyComponent<any, any> = (value: any);
+          const payload = lazy._payload;
+          const init = lazy._init;
+          if (formData === null) {
+            // Upgrade to use FormData to allow us to stream this value.
+            formData = new FormData();
+          }
+          pendingParts++;
+          try {
+            const resolvedModel = init(payload);
+            // We always outline this as a separate part even though we could inline it
+            // because it ensures a more deterministic encoding.
+            const lazyId = nextPartId++;
+            const partJSON = serializeModel(resolvedModel, lazyId);
+            // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            const data: FormData = formData;
+            data.append(formFieldPrefix + lazyId, partJSON);
+            return serializeByValueID(lazyId);
+          } catch (x) {
+            if (
+              typeof x === 'object' &&
+              x !== null &&
+              typeof x.then === 'function'
+            ) {
+              // Suspended
+              pendingParts++;
+              const lazyId = nextPartId++;
+              const thenable: Thenable<any> = (x: any);
+              const retry = function () {
+                // While the first promise resolved, its value isn't necessarily what we'll
+                // resolve into because we might suspend again.
+                try {
+                  const partJSON = serializeModel(value, lazyId);
+                  // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                  const data: FormData = formData;
+                  data.append(formFieldPrefix + lazyId, partJSON);
+                  pendingParts--;
+                  if (pendingParts === 0) {
+                    resolve(data);
+                  }
+                } catch (reason) {
+                  reject(reason);
+                }
+              };
+              thenable.then(retry, retry);
+              return serializeByValueID(lazyId);
+            } else {
+              // In the future we could consider serializing this as an error
+              // that throws on the server instead.
+              reject(x);
+              return null;
+            }
+          } finally {
+            pendingParts--;
+          }
+        }
+      }
+
+      const existingReference = writtenObjects.get(value);
+
+      // $FlowFixMe[method-unbinding]
+      if (typeof value.then === 'function') {
+        if (existingReference !== undefined) {
+          if (modelRoot === value) {
+            // This is the ID we're currently emitting so we need to write it
+            // once but if we discover it again, we refer to it by id.
+            modelRoot = null;
+          } else {
+            // We've already emitted this as an outlined object, so we can
+            // just refer to that by its existing ID.
+            return existingReference;
+          }
+        }
+
+        // We assume that any object with a .then property is a "Thenable" type,
+        // or a Promise type. Either of which can be represented by a Promise.
+        if (formData === null) {
+          // Upgrade to use FormData to allow us to stream this value.
+          formData = new FormData();
+        }
+        pendingParts++;
+        const promiseId = nextPartId++;
+        const promiseReference = serializePromiseID(promiseId);
+        writtenObjects.set(value, promiseReference);
+        const thenable: Thenable<any> = (value: any);
+        thenable.then(
+          partValue => {
+            try {
+              const previousReference = writtenObjects.get(partValue);
+              let partJSON;
+              if (previousReference !== undefined) {
+                partJSON = JSON.stringify(previousReference);
+              } else {
+                partJSON = serializeModel(partValue, promiseId);
+              }
+              // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+              const data: FormData = formData;
+              data.append(formFieldPrefix + promiseId, partJSON);
+              pendingParts--;
+              if (pendingParts === 0) {
+                resolve(data);
+              }
+            } catch (reason) {
+              reject(reason);
+            }
+          },
+          // In the future we could consider serializing this as an error
+          // that throws on the server instead.
+          reject,
+        );
+        return promiseReference;
+      }
+
+      if (existingReference !== undefined) {
+        if (modelRoot === value) {
+          // This is the ID we're currently emitting so we need to write it
+          // once but if we discover it again, we refer to it by id.
+          modelRoot = null;
+        } else {
+          // We've already emitted this as an outlined object, so we can
+          // just refer to that by its existing ID.
+          return existingReference;
+        }
+      } else if (key.indexOf(':') === -1) {
+        // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+        const parentReference = writtenObjects.get(parent);
+        if (parentReference !== undefined) {
+          // If the parent has a reference, we can refer to this object indirectly
+          // through the property name inside that parent.
+          const reference = parentReference + ':' + key;
+          writtenObjects.set(value, reference);
+          if (temporaryReferences !== undefined) {
+            // Store this object so that the server can refer to it later in responses.
+            writeTemporaryReference(temporaryReferences, reference, value);
+          }
+        }
+      }
+
+      if (isArray(value)) {
+        // $FlowFixMe[incompatible-return]
+        return value;
+      }
+      // TODO: Should we the Object.prototype.toString.call() to test for cross-realm objects?
+      if (value instanceof FormData) {
+        if (formData === null) {
+          // Upgrade to use FormData to allow us to use rich objects as its values.
+          formData = new FormData();
+        }
+        const data: FormData = formData;
+        const refId = nextPartId++;
+        // Copy all the form fields with a prefix for this reference.
+        // These must come first in the form order because we assume that all the
+        // fields are available before this is referenced.
+        const prefix = formFieldPrefix + refId + '_';
+        // $FlowFixMe[prop-missing]: FormData has forEach.
+        value.forEach((originalValue: string | File, originalKey: string) => {
+          // $FlowFixMe[incompatible-call]
+          data.append(prefix + originalKey, originalValue);
+        });
+        return serializeFormDataReference(refId);
+      }
+      if (value instanceof Map) {
+        const mapId = nextPartId++;
+        const partJSON = serializeModel(Array.from(value), mapId);
+        if (formData === null) {
+          formData = new FormData();
+        }
+        formData.append(formFieldPrefix + mapId, partJSON);
+        return serializeMapID(mapId);
+      }
+      if (value instanceof Set) {
+        const setId = nextPartId++;
+        const partJSON = serializeModel(Array.from(value), setId);
+        if (formData === null) {
+          formData = new FormData();
+        }
+        formData.append(formFieldPrefix + setId, partJSON);
+        return serializeSetID(setId);
+      }
+
+      if (value instanceof ArrayBuffer) {
+        const blob = new Blob([value]);
+        const blobId = nextPartId++;
+        if (formData === null) {
+          formData = new FormData();
+        }
+        formData.append(formFieldPrefix + blobId, blob);
+        return '$' + 'A' + blobId.toString(16);
+      }
+      if (value instanceof Int8Array) {
+        // char
+        return serializeTypedArray('O', value);
+      }
+      if (value instanceof Uint8Array) {
+        // unsigned char
+        return serializeTypedArray('o', value);
+      }
+      if (value instanceof Uint8ClampedArray) {
+        // unsigned clamped char
+        return serializeTypedArray('U', value);
+      }
+      if (value instanceof Int16Array) {
+        // sort
+        return serializeTypedArray('S', value);
+      }
+      if (value instanceof Uint16Array) {
+        // unsigned short
+        return serializeTypedArray('s', value);
+      }
+      if (value instanceof Int32Array) {
+        // long
+        return serializeTypedArray('L', value);
+      }
+      if (value instanceof Uint32Array) {
+        // unsigned long
+        return serializeTypedArray('l', value);
+      }
+      if (value instanceof Float32Array) {
+        // float
+        return serializeTypedArray('G', value);
+      }
+      if (value instanceof Float64Array) {
+        // double
+        return serializeTypedArray('g', value);
+      }
+      if (value instanceof BigInt64Array) {
+        // number
+        return serializeTypedArray('M', value);
+      }
+      if (value instanceof BigUint64Array) {
+        // unsigned number
+        // We use "m" instead of "n" since JSON can start with "null"
+        return serializeTypedArray('m', value);
+      }
+      if (value instanceof DataView) {
+        return serializeTypedArray('V', value);
+      }
+      // TODO: Blob is not available in old Node/browsers. Remove the typeof check later.
+      if (typeof Blob === 'function' && value instanceof Blob) {
+        if (formData === null) {
+          formData = new FormData();
+        }
+        const blobId = nextPartId++;
+        formData.append(formFieldPrefix + blobId, value);
+        return serializeBlobID(blobId);
+      }
+
+      const iteratorFn = getIteratorFn(value);
+      if (iteratorFn) {
+        const iterator = iteratorFn.call(value);
+        if (iterator === value) {
+          // Iterator, not Iterable
+          const iteratorId = nextPartId++;
+          const partJSON = serializeModel(
+            Array.from((iterator: any)),
+            iteratorId,
+          );
+          if (formData === null) {
+            formData = new FormData();
+          }
+          formData.append(formFieldPrefix + iteratorId, partJSON);
+          return serializeIteratorID(iteratorId);
+        }
+        return Array.from((iterator: any));
+      }
+
+      // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+      if (
+        typeof ReadableStream === 'function' &&
+        value instanceof ReadableStream
+      ) {
+        return serializeReadableStream(value);
+      }
+      const getAsyncIterator: void | (() => $AsyncIterator<any, any, any>) =
+        (value: any)[ASYNC_ITERATOR];
+      if (typeof getAsyncIterator === 'function') {
+        // We treat AsyncIterables as a Fragment and as such we might need to key them.
+        return serializeAsyncIterable(
+          (value: any),
+          getAsyncIterator.call((value: any)),
+        );
+      }
+
+      // Verify that this is a simple plain object.
+      const proto = getPrototypeOf(value);
+      if (
+        proto !== ObjectPrototype &&
+        (proto === null || getPrototypeOf(proto) !== null)
+      ) {
+        if (temporaryReferences === undefined) {
+          throw new Error(
+            'Only plain objects, and a few built-ins, can be passed to Server Functions. ' +
+              'Classes or null prototypes are not supported.' +
+              (__DEV__ ? describeObjectForErrorMessage(parent, key) : ''),
+          );
+        }
+        // We will have written this object to the temporary reference set above
+        // so we can replace it with a marker to refer to this slot later.
+        return serializeTemporaryReferenceMarker();
+      }
+      if (__DEV__) {
+        if ((value: any).$$typeof === REACT_CONTEXT_TYPE) {
+          console.error(
+            'React Context Providers cannot be passed to Server Functions from the Client.%s',
+            describeObjectForErrorMessage(parent, key),
+          );
+        } else if (objectName(value) !== 'Object') {
+          console.error(
+            'Only plain objects can be passed to Server Functions from the Client. ' +
+              '%s objects are not supported.%s',
+            objectName(value),
+            describeObjectForErrorMessage(parent, key),
+          );
+        } else if (!isSimpleObject(value)) {
+          console.error(
+            'Only plain objects can be passed to Server Functions from the Client. ' +
+              'Classes or other objects with methods are not supported.%s',
+            describeObjectForErrorMessage(parent, key),
+          );
+        } else if (Object.getOwnPropertySymbols) {
+          const symbols = Object.getOwnPropertySymbols(value);
+          if (symbols.length > 0) {
+            console.error(
+              'Only plain objects can be passed to Server Functions from the Client. ' +
+                'Objects with symbol properties like %s are not supported.%s',
+              symbols[0].description,
+              describeObjectForErrorMessage(parent, key),
+            );
+          }
+        }
+      }
+
+      // $FlowFixMe[incompatible-return]
+      return value;
+    }
+
+    if (typeof value === 'string') {
+      // TODO: Maybe too clever. If we support URL there's no similar trick.
+      if (value[value.length - 1] === 'Z') {
+        // Possibly a Date, whose toJSON automatically calls toISOString
+        // $FlowFixMe[incompatible-use]
+        const originalValue = parent[key];
+        if (originalValue instanceof Date) {
+          return serializeDateFromDateJSON(value);
+        }
+      }
+
+      return escapeStringValue(value);
+    }
+
+    if (typeof value === 'boolean') {
+      return value;
+    }
+
+    if (typeof value === 'number') {
+      return serializeNumber(value);
+    }
+
+    if (typeof value === 'undefined') {
+      return serializeUndefined();
+    }
+
+    if (typeof value === 'function') {
+      const referenceClosure = knownServerReferences.get(value);
+      if (referenceClosure !== undefined) {
+        const {id, bound} = referenceClosure;
+        const referenceClosureJSON = JSON.stringify({id, bound}, resolveToJSON);
+        if (formData === null) {
+          // Upgrade to use FormData to allow us to stream this value.
+          formData = new FormData();
+        }
+        // The reference to this function came from the same client so we can pass it back.
+        const refId = nextPartId++;
+        formData.set(formFieldPrefix + refId, referenceClosureJSON);
+        return serializeServerReferenceID(refId);
+      }
+      if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
+        // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+        const parentReference = writtenObjects.get(parent);
+        if (parentReference !== undefined) {
+          // If the parent has a reference, we can refer to this object indirectly
+          // through the property name inside that parent.
+          const reference = parentReference + ':' + key;
+          // Store this object so that the server can refer to it later in responses.
+          writeTemporaryReference(temporaryReferences, reference, value);
+          return serializeTemporaryReferenceMarker();
+        }
+      }
+      throw new Error(
+        'Client Functions cannot be passed directly to Server Functions. ' +
+          'Only Functions passed from the Server can be passed back again.',
+      );
+    }
+
+    if (typeof value === 'symbol') {
+      if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
+        // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+        const parentReference = writtenObjects.get(parent);
+        if (parentReference !== undefined) {
+          // If the parent has a reference, we can refer to this object indirectly
+          // through the property name inside that parent.
+          const reference = parentReference + ':' + key;
+          // Store this object so that the server can refer to it later in responses.
+          writeTemporaryReference(temporaryReferences, reference, value);
+          return serializeTemporaryReferenceMarker();
+        }
+      }
+      throw new Error(
+        'Symbols cannot be passed to a Server Function without a ' +
+          'temporary reference set. Pass a TemporaryReferenceSet to the options.' +
+          (__DEV__ ? describeObjectForErrorMessage(parent, key) : ''),
+      );
+    }
+
+    if (typeof value === 'bigint') {
+      return serializeBigInt(value);
+    }
+
+    throw new Error(
+      `Type ${typeof value} is not supported as an argument to a Server Function.`,
+    );
+  }
+
+  function serializeModel(model: ReactServerValue, id: number): string {
+    if (typeof model === 'object' && model !== null) {
+      const reference = serializeByValueID(id);
+      writtenObjects.set(model, reference);
+      if (temporaryReferences !== undefined) {
+        // Store this object so that the server can refer to it later in responses.
+        writeTemporaryReference(temporaryReferences, reference, model);
+      }
+    }
+    modelRoot = model;
+    // $FlowFixMe[incompatible-return] it's not going to be undefined because we'll encode it.
+    return JSON.stringify(model, resolveToJSON);
+  }
+
+  function abort(reason: mixed): void {
+    if (pendingParts > 0) {
+      pendingParts = 0; // Don't resolve again later.
+      // Resolve with what we have so far, which may have holes at this point.
+      // They'll error when the stream completes on the server.
+      if (formData === null) {
+        resolve(json);
+      } else {
+        resolve(formData);
+      }
+    }
+  }
+
+  const json = serializeModel(root, 0);
+
+  if (formData === null) {
+    // If it's a simple data structure, we just use plain JSON.
+    resolve(json);
+  } else {
+    // Otherwise, we use FormData to let us stream in the result.
+    formData.set(formFieldPrefix + '0', json);
+    if (pendingParts === 0) {
+      // $FlowFixMe[incompatible-call] this has already been refined.
+      resolve(formData);
+    }
+  }
+
+  return abort;
+}
+
+const boundCache: WeakMap<
+  ServerReferenceClosure,
+  Thenable<FormData>,
+> = new WeakMap();
+
+function encodeFormData(reference: any): Thenable<FormData> {
+  let resolve, reject;
+  // We need to have a handle on the thenable so that we can synchronously set
+  // its status from processReply, when it can complete synchronously.
+  const thenable: Thenable<FormData> = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  processReply(
+    reference,
+    '',
+    undefined, // TODO: This means React Elements can't be used as state in progressive enhancement.
+    (body: string | FormData) => {
+      if (typeof body === 'string') {
+        const data = new FormData();
+        data.append('0', body);
+        body = data;
+      }
+      const fulfilled: FulfilledThenable<FormData> = (thenable: any);
+      fulfilled.status = 'fulfilled';
+      fulfilled.value = body;
+      resolve(body);
+    },
+    e => {
+      const rejected: RejectedThenable<FormData> = (thenable: any);
+      rejected.status = 'rejected';
+      rejected.reason = e;
+      reject(e);
+    },
+  );
+  return thenable;
+}
+
+function defaultEncodeFormAction(
+  this: any => Promise<any>,
+  identifierPrefix: string,
+): ReactCustomFormAction {
+  const referenceClosure = knownServerReferences.get(this);
+  if (!referenceClosure) {
+    throw new Error(
+      'Tried to encode a Server Action from a different instance than the encoder is from. ' +
+        'This is a bug in React.',
+    );
+  }
+  let data: null | FormData = null;
+  let name;
+  const boundPromise = referenceClosure.bound;
+  if (boundPromise !== null) {
+    let thenable = boundCache.get(referenceClosure);
+    if (!thenable) {
+      const {id, bound} = referenceClosure;
+      thenable = encodeFormData({id, bound});
+      boundCache.set(referenceClosure, thenable);
+    }
+    if (thenable.status === 'rejected') {
+      throw thenable.reason;
+    } else if (thenable.status !== 'fulfilled') {
+      throw thenable;
+    }
+    const encodedFormData = thenable.value;
+    // This is hacky but we need the identifier prefix to be added to
+    // all fields but the suspense cache would break since we might get
+    // a new identifier each time. So we just append it at the end instead.
+    const prefixedData = new FormData();
+    // $FlowFixMe[prop-missing]
+    encodedFormData.forEach((value: string | File, key: string) => {
+      // $FlowFixMe[incompatible-call]
+      prefixedData.append('$ACTION_' + identifierPrefix + ':' + key, value);
+    });
+    data = prefixedData;
+    // We encode the name of the prefix containing the data.
+    name = '$ACTION_REF_' + identifierPrefix;
+  } else {
+    // This is the simple case so we can just encode the ID.
+    name = '$ACTION_ID_' + referenceClosure.id;
+  }
+  return {
+    name: name,
+    method: 'POST',
+    encType: 'multipart/form-data',
+    data: data,
+  };
+}
+
+function customEncodeFormAction(
+  reference: any => Promise<any>,
+  identifierPrefix: string,
+  encodeFormAction: EncodeFormActionCallback,
+): ReactCustomFormAction {
+  const referenceClosure = knownServerReferences.get(reference);
+  if (!referenceClosure) {
+    throw new Error(
+      'Tried to encode a Server Action from a different instance than the encoder is from. ' +
+        'This is a bug in React.',
+    );
+  }
+  let boundPromise: Promise<Array<any>> = (referenceClosure.bound: any);
+  if (boundPromise === null) {
+    boundPromise = Promise.resolve([]);
+  }
+  return encodeFormAction(referenceClosure.id, boundPromise);
+}
+
+function isSignatureEqual(
+  this: any => Promise<any>,
+  referenceId: ServerReferenceId,
+  numberOfBoundArgs: number,
+): boolean {
+  const referenceClosure = knownServerReferences.get(this);
+  if (!referenceClosure) {
+    throw new Error(
+      'Tried to encode a Server Action from a different instance than the encoder is from. ' +
+        'This is a bug in React.',
+    );
+  }
+  if (referenceClosure.id !== referenceId) {
+    // These are different functions.
+    return false;
+  }
+  // Now check if the number of bound arguments is the same.
+  const boundPromise = referenceClosure.bound;
+  if (boundPromise === null) {
+    // No bound arguments.
+    return numberOfBoundArgs === 0;
+  }
+  // Unwrap the bound arguments array by suspending, if necessary. As with
+  // encodeFormData, this means isSignatureEqual can only be called while React
+  // is rendering.
+  switch (boundPromise.status) {
+    case 'fulfilled': {
+      const boundArgs = boundPromise.value;
+      return boundArgs.length === numberOfBoundArgs;
+    }
+    case 'pending': {
+      throw boundPromise;
+    }
+    case 'rejected': {
+      throw boundPromise.reason;
+    }
+    default: {
+      if (typeof boundPromise.status === 'string') {
+        // Only instrument the thenable if the status if not defined.
+      } else {
+        const pendingThenable: PendingThenable<Array<any>> =
+          (boundPromise: any);
+        pendingThenable.status = 'pending';
+        pendingThenable.then(
+          (boundArgs: Array<any>) => {
+            const fulfilledThenable: FulfilledThenable<Array<any>> =
+              (boundPromise: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = boundArgs;
+          },
+          (error: mixed) => {
+            const rejectedThenable: RejectedThenable<number> =
+              (boundPromise: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          },
+        );
+      }
+      throw boundPromise;
+    }
+  }
+}
+
+let fakeServerFunctionIdx = 0;
+
+function createFakeServerFunction<A: Iterable<any>, T>(
+  name: string,
+  filename: string,
+  sourceMap: null | string,
+  line: number,
+  col: number,
+  environmentName: string,
+  innerFunction: (...A) => Promise<T>,
+): (...A) => Promise<T> {
+  // This creates a fake copy of a Server Module. It represents the Server Action on the server.
+  // We use an eval so we can source map it to the original location.
+
+  const comment =
+    '/* This module is a proxy to a Server Action. Turn on Source Maps to see the server source. */';
+
+  if (!name) {
+    // An eval:ed function with no name gets the name "eval". We give it something more descriptive.
+    name = '<anonymous>';
+  }
+  const encodedName = JSON.stringify(name);
+  // We generate code where both the beginning of the function and its parenthesis is at the line
+  // and column of the server executed code. We use a method form since that lets us name it
+  // anything we want and because the beginning of the function and its parenthesis is the same
+  // column. Because Chrome inspects the location of the parenthesis and Firefox inspects the
+  // location of the beginning of the function. By not using a function expression we avoid the
+  // ambiguity.
+  let code;
+  if (line <= 1) {
+    const minSize = encodedName.length + 7;
+    code =
+      's=>({' +
+      encodedName +
+      ' '.repeat(col < minSize ? 0 : col - minSize) +
+      ':' +
+      '(...args) => s(...args)' +
+      '})\n' +
+      comment;
+  } else {
+    code =
+      comment +
+      '\n'.repeat(line - 2) +
+      'server=>({' +
+      encodedName +
+      ':\n' +
+      ' '.repeat(col < 1 ? 0 : col - 1) +
+      // The function body can get printed so we make it look nice.
+      // This "calls the server with the arguments".
+      '(...args) => server(...args)' +
+      '})';
+  }
+
+  if (filename.startsWith('/')) {
+    // If the filename starts with `/` we assume that it is a file system file
+    // rather than relative to the current host. Since on the server fully qualified
+    // stack traces use the file path.
+    // TODO: What does this look like on Windows?
+    filename = 'file://' + filename;
+  }
+
+  if (sourceMap) {
+    // We use the prefix about://React/ to separate these from other files listed in
+    // the Chrome DevTools. We need a "host name" and not just a protocol because
+    // otherwise the group name becomes the root folder. Ideally we don't want to
+    // show these at all but there's two reasons to assign a fake URL.
+    // 1) A printed stack trace string needs a unique URL to be able to source map it.
+    // 2) If source maps are disabled or fails, you should at least be able to tell
+    //    which file it was.
+    code +=
+      '\n//# sourceURL=about://React/' +
+      encodeURIComponent(environmentName) +
+      '/' +
+      encodeURI(filename) +
+      '?s' + // We add an extra s here to distinguish from the fake stack frames
+      fakeServerFunctionIdx++;
+    code += '\n//# sourceMappingURL=' + sourceMap;
+  } else if (filename) {
+    code += '\n//# sourceURL=' + filename;
+  }
+
+  try {
+    // Eval a factory and then call it to create a closure over the inner function.
+    // eslint-disable-next-line no-eval
+    return (0, eval)(code)(innerFunction)[name];
+  } catch (x) {
+    // If eval fails, such as if in an environment that doesn't support it,
+    // we fallback to just returning the inner function.
+    return innerFunction;
+  }
+}
+
+export function registerBoundServerReference<T: Function>(
+  reference: T,
+  id: ServerReferenceId,
+  bound: null | Thenable<Array<any>>,
+  encodeFormAction: void | EncodeFormActionCallback,
+): void {
+  if (knownServerReferences.has(reference)) {
+    return;
+  }
+
+  knownServerReferences.set(reference, {
+    id,
+    originalBind: reference.bind,
+    bound,
+  });
+
+  // Expose encoder for use by SSR, as well as a special bind that can be used to
+  // keep server capabilities.
+  if (usedWithSSR) {
+    // Only expose this in builds that would actually use it. Not needed in the browser.
+    const $$FORM_ACTION =
+      encodeFormAction === undefined
+        ? defaultEncodeFormAction
+        : function (
+            this: any => Promise<any>,
+            identifierPrefix: string,
+          ): ReactCustomFormAction {
+            return customEncodeFormAction(
+              this,
+              identifierPrefix,
+              encodeFormAction,
+            );
+          };
+    Object.defineProperties((reference: any), {
+      $$FORM_ACTION: {value: $$FORM_ACTION},
+      $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},
+      bind: {value: bind},
+    });
+  }
+}
+
+export function registerServerReference<T: Function>(
+  reference: T,
+  id: ServerReferenceId,
+  encodeFormAction?: EncodeFormActionCallback,
+): ServerReference<T> {
+  registerBoundServerReference(reference, id, null, encodeFormAction);
+  return reference;
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: Function): Function {
+  const referenceClosure = knownServerReferences.get(this);
+
+  if (!referenceClosure) {
+    // $FlowFixMe[incompatible-call]
+    return FunctionBind.apply(this, arguments);
+  }
+
+  const newFn = referenceClosure.originalBind.apply(this, arguments);
+
+  if (__DEV__) {
+    const thisBind = arguments[0];
+    if (thisBind != null) {
+      // This doesn't warn in browser environments since it's not instrumented outside
+      // usedWithSSR. This makes this an SSR only warning which we don't generally do.
+      // TODO: Consider a DEV only instrumentation in the browser.
+      console.error(
+        'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+      );
+    }
+  }
+
+  const args = ArraySlice.call(arguments, 1);
+  let boundPromise = null;
+  if (referenceClosure.bound !== null) {
+    boundPromise = Promise.resolve((referenceClosure.bound: any)).then(
+      boundArgs => boundArgs.concat(args),
+    );
+  } else {
+    boundPromise = Promise.resolve(args);
+  }
+
+  knownServerReferences.set(newFn, {
+    id: referenceClosure.id,
+    originalBind: newFn.bind,
+    bound: boundPromise,
+  });
+
+  // Expose encoder for use by SSR, as well as a special bind that can be used to
+  // keep server capabilities.
+  if (usedWithSSR) {
+    // Only expose this in builds that would actually use it. Not needed on the client.
+    Object.defineProperties((newFn: any), {
+      $$FORM_ACTION: {value: this.$$FORM_ACTION},
+      $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},
+      bind: {value: bind},
+    });
+  }
+
+  return newFn;
+}
+
+export type FindSourceMapURLCallback = (
+  fileName: string,
+  environmentName: string,
+) => null | string;
+
+export function createBoundServerReference<A: Iterable<any>, T>(
+  metaData: {
+    id: ServerReferenceId,
+    bound: null | Thenable<Array<any>>,
+    name?: string, // DEV-only
+    env?: string, // DEV-only
+    location?: ReactFunctionLocation, // DEV-only
+  },
+  callServer: CallServerCallback,
+  encodeFormAction?: EncodeFormActionCallback,
+  findSourceMapURL?: FindSourceMapURLCallback, // DEV-only
+): (...A) => Promise<T> {
+  const id = metaData.id;
+  const bound = metaData.bound;
+  let action = function (): Promise<T> {
+    // $FlowFixMe[method-unbinding]
+    const args = Array.prototype.slice.call(arguments);
+    const p = bound;
+    if (!p) {
+      return callServer(id, args);
+    }
+    if (p.status === 'fulfilled') {
+      const boundArgs = p.value;
+      return callServer(id, boundArgs.concat(args));
+    }
+    // Since this is a fake Promise whose .then doesn't chain, we have to wrap it.
+    // TODO: Remove the wrapper once that's fixed.
+    return ((Promise.resolve(p): any): Promise<Array<any>>).then(
+      function (boundArgs) {
+        return callServer(id, boundArgs.concat(args));
+      },
+    );
+  };
+  if (__DEV__) {
+    const location = metaData.location;
+    if (location) {
+      const functionName = metaData.name || '';
+      const [, filename, line, col] = location;
+      const env = metaData.env || 'Server';
+      const sourceMap =
+        findSourceMapURL == null ? null : findSourceMapURL(filename, env);
+      action = createFakeServerFunction(
+        functionName,
+        filename,
+        sourceMap,
+        line,
+        col,
+        env,
+        action,
+      );
+    }
+  }
+  registerBoundServerReference(action, id, bound, encodeFormAction);
+  return action;
+}
+
+// This matches either of these V8 formats.
+//     at name (filename:0:0)
+//     at filename:0:0
+//     at async filename:0:0
+const v8FrameRegExp =
+  /^ {3} at (?:(.+) \((.+):(\d+):(\d+)\)|(?:async )?(.+):(\d+):(\d+))$/;
+// This matches either of these JSC/SpiderMonkey formats.
+// name@filename:0:0
+// filename:0:0
+const jscSpiderMonkeyFrameRegExp = /(?:(.*)@)?(.*):(\d+):(\d+)/;
+
+function parseStackLocation(error: Error): null | ReactFunctionLocation {
+  // This parsing is special in that we know that the calling function will always
+  // be a module that initializes the server action. We also need this part to work
+  // cross-browser so not worth a Config. It's DEV only so not super code size
+  // sensitive but also a non-essential feature.
+  let stack = error.stack;
+  if (stack.startsWith('Error: react-stack-top-frame\n')) {
+    // V8's default formatting prefixes with the error message which we
+    // don't want/need.
+    stack = stack.slice(29);
+  }
+  const endOfFirst = stack.indexOf('\n');
+  let secondFrame;
+  if (endOfFirst !== -1) {
+    // Skip the first frame.
+    const endOfSecond = stack.indexOf('\n', endOfFirst + 1);
+    if (endOfSecond === -1) {
+      secondFrame = stack.slice(endOfFirst + 1);
+    } else {
+      secondFrame = stack.slice(endOfFirst + 1, endOfSecond);
+    }
+  } else {
+    secondFrame = stack;
+  }
+
+  let parsed = v8FrameRegExp.exec(secondFrame);
+  if (!parsed) {
+    parsed = jscSpiderMonkeyFrameRegExp.exec(secondFrame);
+    if (!parsed) {
+      return null;
+    }
+  }
+
+  let name = parsed[1] || '';
+  if (name === '<anonymous>') {
+    name = '';
+  }
+  let filename = parsed[2] || parsed[5] || '';
+  if (filename === '<anonymous>') {
+    filename = '';
+  }
+  // This is really the enclosingLine/Column.
+  const line = +(parsed[3] || parsed[6]);
+  const col = +(parsed[4] || parsed[7]);
+
+  return [name, filename, line, col];
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: ServerReferenceId,
+  callServer: CallServerCallback,
+  encodeFormAction?: EncodeFormActionCallback,
+  findSourceMapURL?: FindSourceMapURLCallback, // DEV-only
+  functionName?: string,
+): (...A) => Promise<T> {
+  let action = function (): Promise<T> {
+    // $FlowFixMe[method-unbinding]
+    const args = Array.prototype.slice.call(arguments);
+    return callServer(id, args);
+  };
+  if (__DEV__) {
+    // Let's see if we can find a source map for the file which contained the
+    // server action. We extract it from the runtime so that it's resilient to
+    // multiple passes of compilation as long as we can find the final source map.
+    const location = parseStackLocation(new Error('react-stack-top-frame'));
+    if (location !== null) {
+      const [, filename, line, col] = location;
+      // While the environment that the Server Reference points to can be
+      // in any environment, what matters here is where the compiled source
+      // is from and that's in the currently executing environment. We hard
+      // code that as the value "Client" in case the findSourceMapURL helper
+      // needs it.
+      const env = 'Client';
+      const sourceMap =
+        findSourceMapURL == null ? null : findSourceMapURL(filename, env);
+      action = createFakeServerFunction(
+        functionName || '',
+        filename,
+        sourceMap,
+        line,
+        col,
+        env,
+        action,
+      );
+    }
+  }
+  registerBoundServerReference(action, id, null, encodeFormAction);
+  return action;
+}
diff --git a/packages/react-client/src/ReactFlightTemporaryReferences.js b/packages/react-client/src/ReactFlightTemporaryReferences.js
new file mode 100644
index 00000000000..5ad92b3a106
--- /dev/null
+++ b/packages/react-client/src/ReactFlightTemporaryReferences.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+interface Reference {}
+
+export opaque type TemporaryReferenceSet = Map<string, Reference | symbol>;
+
+export function createTemporaryReferenceSet(): TemporaryReferenceSet {
+  return new Map();
+}
+
+export function writeTemporaryReference(
+  set: TemporaryReferenceSet,
+  reference: string,
+  object: Reference | symbol,
+): void {
+  set.set(reference, object);
+}
+
+export function readTemporaryReference<T>(
+  set: TemporaryReferenceSet,
+  reference: string,
+): T {
+  return (set.get(reference): any);
+}
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
new file mode 100644
index 00000000000..0a543a3464c
--- /dev/null
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -0,0 +1,3918 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (typeof Blob === 'undefined') {
+  global.Blob = require('buffer').Blob;
+}
+if (typeof File === 'undefined' || typeof FormData === 'undefined') {
+  global.File = require('undici').File;
+  global.FormData = require('undici').FormData;
+}
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+      const dot = name.lastIndexOf('.');
+      if (dot !== -1) {
+        name = name.slice(dot + 1);
+      }
+      return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+    })
+  );
+}
+
+function normalizeReactCodeLocInfo(str) {
+  const repoRootForRegexp = __REACT_ROOT_PATH_TEST__.replace(/\//g, '\\/');
+  const repoFileLocMatch = new RegExp(`${repoRootForRegexp}.+?:\\d+:\\d+`, 'g');
+  return str && str.replace(repoFileLocMatch, '**');
+}
+
+// If we just use the original Error prototype, Jest will only display the error message if assertions fail.
+// But we usually want to also assert on our expando properties or even the stack.
+// By hiding the fact from Jest that this is an error, it will show all enumerable properties on mismatch.
+
+function getErrorForJestMatcher(error) {
+  return {
+    ...error,
+    // non-enumerable properties that are still relevant for testing
+    message: error.message,
+    stack: normalizeReactCodeLocInfo(error.stack),
+  };
+}
+
+const finalizationRegistries = [];
+function FinalizationRegistryMock(callback) {
+  this._heldValues = [];
+  this._callback = callback;
+  finalizationRegistries.push(this);
+}
+FinalizationRegistryMock.prototype.register = function (target, heldValue) {
+  this._heldValues.push(heldValue);
+};
+global.FinalizationRegistry = FinalizationRegistryMock;
+
+function gc() {
+  for (let i = 0; i < finalizationRegistries.length; i++) {
+    const registry = finalizationRegistries[i];
+    const callback = registry._callback;
+    const heldValues = registry._heldValues;
+    for (let j = 0; j < heldValues.length; j++) {
+      callback(heldValues[j]);
+    }
+    heldValues.length = 0;
+  }
+}
+
+let act;
+let use;
+let startTransition;
+let React;
+let ReactServer;
+let ReactNoop;
+let ReactNoopFlightServer;
+let ReactNoopFlightClient;
+let ErrorBoundary;
+let NoErrorExpected;
+let Scheduler;
+let assertLog;
+let assertConsoleErrorDev;
+let getDebugInfo;
+
+describe('ReactFlight', () => {
+  beforeEach(() => {
+    // Mock performance.now for timing tests
+    let time = 10;
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    // This stores the state so we need to preserve it
+    const flightModules = require('react-noop-renderer/flight-modules');
+    jest.resetModules();
+    __unmockReact();
+    jest.mock('react-noop-renderer/flight-modules', () => flightModules);
+    React = require('react');
+    startTransition = React.startTransition;
+    use = React.use;
+    ReactNoop = require('react-noop-renderer');
+    ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    act = require('internal-test-utils').act;
+    Scheduler = require('scheduler');
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    getDebugInfo = InternalTestUtils.getDebugInfo.bind(null, {
+      useV8Stack: true,
+      ignoreRscStreamInfo: true,
+    });
+
+    ErrorBoundary = class extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      componentDidCatch(error, errorInfo) {
+        expect(error).toBe(this.state.error);
+        if (this.props.expectedStack !== undefined) {
+          expect(normalizeCodeLocInfo(errorInfo.componentStack)).toBe(
+            this.props.expectedStack,
+          );
+        }
+      }
+      componentDidMount() {
+        expect(this.state.hasError).toBe(true);
+        expect(this.state.error).toBeTruthy();
+        if (__DEV__) {
+          expect(this.state.error.message).toContain(
+            this.props.expectedMessage,
+          );
+          expect(this.state.error.digest).toBe('a dev digest');
+          expect(this.state.error.environmentName).toBe(
+            this.props.expectedEnviromentName || 'Server',
+          );
+          if (this.props.expectedErrorStack !== undefined) {
+            expect(this.state.error.stack).toContain(
+              this.props.expectedErrorStack,
+            );
+          }
+        } else {
+          expect(this.state.error.message).toBe(
+            'An error occurred in the Server Components render. The specific message is omitted in production' +
+              ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
+              ' may provide additional details about the nature of the error.',
+          );
+          let expectedDigest = this.props.expectedMessage;
+          if (
+            expectedDigest.startsWith('{') ||
+            expectedDigest.startsWith('<')
+          ) {
+            expectedDigest = '{}';
+          } else if (expectedDigest.startsWith('[')) {
+            expectedDigest = '[]';
+          }
+          expect(this.state.error.digest).toContain(expectedDigest);
+          expect(this.state.error.environmentName).toBe(undefined);
+          expect(this.state.error.stack).toBe(
+            'Error: ' + this.state.error.message,
+          );
+        }
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    };
+
+    NoErrorExpected = class extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      componentDidMount() {
+        expect(this.state.error).toBe(null);
+        expect(this.state.hasError).toBe(false);
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    };
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  function clientReference(value) {
+    return Object.defineProperties(
+      function () {
+        throw new Error('Cannot call a client function from the server.');
+      },
+      {
+        $$typeof: {value: Symbol.for('react.client.reference')},
+        value: {value: value},
+      },
+    );
+  }
+
+  it('can render a Server Component', async () => {
+    function Bar({text}) {
+      return text.toUpperCase();
+    }
+    function Foo() {
+      return {
+        bar: (
+          <div>
+            <Bar text="a" />, <Bar text="b" />
+          </div>
+        ),
+      };
+    }
+    const transport = ReactNoopFlightServer.render({
+      foo: <Foo />,
+    });
+    const model = await ReactNoopFlightClient.read(transport);
+    expect(model).toEqual({
+      foo: {
+        bar: (
+          <div>
+            {'A'}
+            {', '}
+            {'B'}
+          </div>
+        ),
+      },
+    });
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('can render a Client Component using a module reference and render there', async () => {
+    function UserClient(props) {
+      return (
+        <span>
+          {props.greeting}, {props.name}
+        </span>
+      );
+    }
+    const User = clientReference(UserClient);
+
+    function Greeting({firstName, lastName}) {
+      return <User greeting="Hello" name={firstName + ' ' + lastName} />;
+    }
+
+    const model = {
+      greeting: <Greeting firstName="Seb" lastName="Smith" />,
+    };
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      const greeting = rootModel.greeting;
+      expect(getDebugInfo(greeting)).toEqual(
+        __DEV__
+          ? [
+              {time: 12},
+              {
+                name: 'Greeting',
+                env: 'Server',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {
+                  firstName: 'Seb',
+                  lastName: 'Smith',
+                },
+              },
+              {time: 13},
+            ]
+          : undefined,
+      );
+      ReactNoop.render(greeting);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('can render a shared forwardRef Component', async () => {
+    const Greeting = React.forwardRef(function Greeting(
+      {firstName, lastName},
+      ref,
+    ) {
+      return (
+        <span ref={ref}>
+          Hello, {firstName} {lastName}
+        </span>
+      );
+    });
+
+    const root = <Greeting firstName="Seb" lastName="Smith" />;
+
+    const transport = ReactNoopFlightServer.render(root);
+
+    await act(async () => {
+      const result = await ReactNoopFlightClient.read(transport);
+      expect(getDebugInfo(result)).toEqual(
+        __DEV__
+          ? [
+              {time: 12},
+              {
+                name: 'Greeting',
+                env: 'Server',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {
+                  firstName: 'Seb',
+                  lastName: 'Smith',
+                },
+              },
+              {time: 13},
+            ]
+          : undefined,
+      );
+      ReactNoop.render(result);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
+  });
+
+  it('can render an iterable as an array', async () => {
+    function ItemListClient(props) {
+      return <span>{props.items}</span>;
+    }
+    const ItemList = clientReference(ItemListClient);
+
+    function Items() {
+      const iterable = {
+        [Symbol.iterator]: function* () {
+          yield 'A';
+          yield 'B';
+          yield 'C';
+        },
+      };
+      return <ItemList items={iterable} />;
+    }
+
+    const model = <Items />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>ABC</span>);
+  });
+
+  it('can render an iterator as a single shot iterator', async () => {
+    const iterator = (function* () {
+      yield 'A';
+      yield 'B';
+      yield 'C';
+    })();
+
+    const transport = ReactNoopFlightServer.render(iterator);
+    const result = await ReactNoopFlightClient.read(transport);
+
+    // The iterator should be the same as itself.
+    expect(result[Symbol.iterator]()).toBe(result);
+
+    expect(Array.from(result)).toEqual(['A', 'B', 'C']);
+    // We've already consumed this iterator.
+    expect(Array.from(result)).toEqual([]);
+  });
+
+  it('can render a Generator Server Component as a fragment', async () => {
+    function ItemListClient(props) {
+      return <span>{props.children}</span>;
+    }
+    const ItemList = clientReference(ItemListClient);
+
+    function* Items() {
+      yield 'A';
+      yield 'B';
+      yield 'C';
+    }
+
+    const model = (
+      <ItemList>
+        <Items />
+      </ItemList>
+    );
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>ABC</span>);
+  });
+
+  it('can render undefined', async () => {
+    function Undefined() {
+      return undefined;
+    }
+
+    const model = <Undefined />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  // @gate FIXME
+  it('should transport undefined object values', async () => {
+    function ServerComponent(props) {
+      return 'prop' in props
+        ? `\`prop\` in props as '${props.prop}'`
+        : '`prop` not in props';
+    }
+    const ClientComponent = clientReference(ServerComponent);
+
+    const model = (
+      <>
+        <div>
+          Server: <ServerComponent prop={undefined} />
+        </div>
+        <div>
+          Client: <ClientComponent prop={undefined} />
+        </div>
+      </>
+    );
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Server: `prop` in props as 'undefined'</div>
+        <div>Client: `prop` in props as 'undefined'</div>
+      </>,
+    );
+  });
+
+  it('can render an empty fragment', async () => {
+    function Empty() {
+      return <React.Fragment />;
+    }
+
+    const model = <Empty />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('can transport weird numbers', async () => {
+    const nums = [0, -0, Infinity, -Infinity, NaN];
+    function ComponentClient({prop}) {
+      expect(prop).not.toBe(nums);
+      expect(prop).toEqual(nums);
+      expect(prop.every((p, i) => Object.is(p, nums[i]))).toBe(true);
+      return `prop: ${prop}`;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const model = <Component prop={nums} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      // already checked -0 with expects above
+      'prop: 0,0,Infinity,-Infinity,NaN',
+    );
+  });
+
+  it('can transport BigInt', async () => {
+    function ComponentClient({prop}) {
+      return `prop: ${prop} (${typeof prop})`;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const model = <Component prop={90071992547409910000n} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      'prop: 90071992547409910000 (bigint)',
+    );
+  });
+
+  it('can transport Date', async () => {
+    function ComponentClient({prop}) {
+      return `prop: ${prop.toISOString()}`;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const model = <Component prop={new Date(1234567890123)} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput('prop: 2009-02-13T23:31:30.123Z');
+  });
+
+  it('can transport Map', async () => {
+    function ComponentClient({prop, selected}) {
+      return `
+        map: ${prop instanceof Map}
+        size: ${prop.size}
+        greet: ${prop.get('hi').greet}
+        content: ${JSON.stringify(Array.from(prop))}
+        selected: ${prop.get(selected)}
+      `;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const objKey = {obj: 'key'};
+    const map = new Map([
+      ['hi', {greet: 'world'}],
+      [objKey, 123],
+    ]);
+    const model = <Component prop={map} selected={objKey} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(`
+        map: true
+        size: 2
+        greet: world
+        content: [["hi",{"greet":"world"}],[{"obj":"key"},123]]
+        selected: 123
+      `);
+  });
+
+  it('can transport Set', async () => {
+    function ComponentClient({prop, selected}) {
+      return `
+        set: ${prop instanceof Set}
+        size: ${prop.size}
+        hi: ${prop.has('hi')}
+        content: ${JSON.stringify(Array.from(prop))}
+        selected: ${prop.has(selected)}
+      `;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const objKey = {obj: 'key'};
+    const set = new Set(['hi', objKey]);
+    const model = <Component prop={set} selected={objKey} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(`
+        set: true
+        size: 2
+        hi: true
+        content: ["hi",{"obj":"key"}]
+        selected: true
+      `);
+  });
+
+  it('can transport FormData (no blobs)', async () => {
+    function ComponentClient({prop}) {
+      return `
+        formData: ${prop instanceof FormData}
+        hi: ${prop.get('hi')}
+        multiple: ${prop.getAll('multiple')}
+        content: ${JSON.stringify(Array.from(prop))}
+      `;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const formData = new FormData();
+    formData.append('hi', 'world');
+    formData.append('multiple', 1);
+    formData.append('multiple', 2);
+
+    const model = <Component prop={formData} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(`
+        formData: true
+        hi: world
+        multiple: 1,2
+        content: [["hi","world"],["multiple","1"],["multiple","2"]]
+      `);
+  });
+
+  it('can transport Date as a top-level value', async () => {
+    const date = new Date(0);
+    const transport = ReactNoopFlightServer.render(date);
+
+    let readValue;
+    await act(async () => {
+      readValue = await ReactNoopFlightClient.read(transport);
+    });
+
+    expect(readValue).toEqual(date);
+  });
+
+  it('can transport Error objects as values', async () => {
+    class CustomError extends Error {
+      constructor(message) {
+        super(message);
+        this.name = 'Custom';
+      }
+    }
+
+    function ComponentClient({prop}) {
+      return `
+        is error: ${prop instanceof Error}
+        name: ${prop.name}
+        message: ${prop.message}
+        stack: ${normalizeCodeLocInfo(prop.stack).split('\n').slice(0, 2).join('\n')}
+        environmentName: ${prop.environmentName}
+      `;
+    }
+    const Component = clientReference(ComponentClient);
+
+    function ServerComponent() {
+      const error = new CustomError('hello');
+      return <Component prop={error} />;
+    }
+
+    const transport = ReactNoopFlightServer.render(<ServerComponent />);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    if (__DEV__) {
+      expect(ReactNoop).toMatchRenderedOutput(`
+        is error: true
+        name: Custom
+        message: hello
+        stack: Custom: hello
+    in ServerComponent (at **)
+        environmentName: Server
+      `);
+    } else {
+      expect(ReactNoop).toMatchRenderedOutput(`
+        is error: true
+        name: Error
+        message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+        stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+        environmentName: undefined
+      `);
+    }
+  });
+
+  it('can transport cyclic objects', async () => {
+    function ComponentClient({prop}) {
+      expect(prop.obj.obj.obj).toBe(prop.obj.obj);
+    }
+    const Component = clientReference(ComponentClient);
+
+    const cyclic = {obj: null};
+    cyclic.obj = cyclic;
+    const model = <Component prop={cyclic} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+  });
+
+  it('can transport cyclic arrays', async () => {
+    function ComponentClient({prop, obj}) {
+      expect(prop[1]).toBe(prop);
+      expect(prop[0]).toBe(obj);
+    }
+    const Component = clientReference(ComponentClient);
+
+    const obj = {};
+    const cyclic = [obj];
+    cyclic[1] = cyclic;
+    const model = <Component prop={cyclic} obj={obj} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+  });
+
+  it('can render a lazy component as a shared component on the server', async () => {
+    function SharedComponent({text}) {
+      return (
+        <div>
+          shared<span>{text}</span>
+        </div>
+      );
+    }
+
+    let load = null;
+    const loadSharedComponent = () => {
+      return new Promise(res => {
+        load = () => res({default: SharedComponent});
+      });
+    };
+
+    const LazySharedComponent = React.lazy(loadSharedComponent);
+
+    function ServerComponent() {
+      return (
+        <React.Suspense fallback={'Loading...'}>
+          <LazySharedComponent text={'a'} />
+        </React.Suspense>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<ServerComponent />);
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    await load();
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        shared<span>a</span>
+      </div>,
+    );
+  });
+
+  it('errors on a Lazy element being used in Component position', async () => {
+    function SharedComponent({text}) {
+      return (
+        <div>
+          shared<span>{text}</span>
+        </div>
+      );
+    }
+
+    let load = null;
+
+    const LazyElementDisguisedAsComponent = React.lazy(() => {
+      return new Promise(res => {
+        load = () => res({default: <SharedComponent text={'a'} />});
+      });
+    });
+
+    function ServerComponent() {
+      return (
+        <React.Suspense fallback={'Loading...'}>
+          <LazyElementDisguisedAsComponent text={'b'} />
+        </React.Suspense>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<ServerComponent />);
+
+    await load();
+
+    await expect(async () => {
+      await act(async () => {
+        const rootModel = await ReactNoopFlightClient.read(transport);
+        ReactNoop.render(rootModel);
+      });
+    }).rejects.toThrow(
+      __DEV__
+        ? 'Element type is invalid: expected a string (for built-in components) or a class/function ' +
+            '(for composite components) but got: <div />. ' +
+            'Did you accidentally export a JSX literal instead of a component?'
+        : 'Element type is invalid: expected a string (for built-in components) or a class/function ' +
+            '(for composite components) but got: object.',
+    );
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('can render a lazy element', async () => {
+    function SharedComponent({text}) {
+      return (
+        <div>
+          shared<span>{text}</span>
+        </div>
+      );
+    }
+
+    let load = null;
+
+    const lazySharedElement = React.lazy(() => {
+      return new Promise(res => {
+        load = () => res({default: <SharedComponent text={'a'} />});
+      });
+    });
+
+    function ServerComponent() {
+      return (
+        <React.Suspense fallback={'Loading...'}>
+          {lazySharedElement}
+        </React.Suspense>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<ServerComponent />);
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    await load();
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        shared<span>a</span>
+      </div>,
+    );
+  });
+
+  it('errors with lazy value in element position that resolves to Component', async () => {
+    function SharedComponent({text}) {
+      return (
+        <div>
+          shared<span>{text}</span>
+        </div>
+      );
+    }
+
+    let load = null;
+
+    const componentDisguisedAsElement = React.lazy(() => {
+      return new Promise(res => {
+        load = () => res({default: SharedComponent});
+      });
+    });
+
+    function ServerComponent() {
+      return (
+        <React.Suspense fallback={'Loading...'}>
+          {componentDisguisedAsElement}
+        </React.Suspense>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<ServerComponent />);
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    spyOnDevAndProd(console, 'error').mockImplementation(() => {});
+    await load();
+    expect(console.error).toHaveBeenCalledTimes(1);
+  });
+
+  it('can render a lazy module reference', async () => {
+    function ClientComponent() {
+      return <div>I am client</div>;
+    }
+
+    const ClientComponentReference = clientReference(ClientComponent);
+
+    let load = null;
+    const loadClientComponentReference = () => {
+      return new Promise(res => {
+        load = () => res({default: ClientComponentReference});
+      });
+    };
+
+    const LazyClientComponentReference = React.lazy(
+      loadClientComponentReference,
+    );
+
+    function ServerComponent() {
+      return (
+        <React.Suspense fallback={'Loading...'}>
+          <LazyClientComponentReference />
+        </React.Suspense>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<ServerComponent />);
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    await load();
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput(<div>I am client</div>);
+  });
+
+  it('should error if a non-serializable value is passed to a host component', async () => {
+    function ClientImpl({children}) {
+      return children;
+    }
+    const Client = clientReference(ClientImpl);
+
+    function EventHandlerProp() {
+      return (
+        <div className="foo" onClick={function () {}}>
+          Test
+        </div>
+      );
+    }
+    function FunctionProp() {
+      return <div>{function fn() {}}</div>;
+    }
+    function SymbolProp() {
+      return <div foo={Symbol('foo')} />;
+    }
+
+    const ref = React.createRef();
+    function RefProp() {
+      return <div ref={ref} />;
+    }
+
+    function EventHandlerPropClient() {
+      return (
+        <Client className="foo" onClick={function () {}}>
+          Test
+        </Client>
+      );
+    }
+    function FunctionChildrenClient() {
+      return <Client>{function Component() {}}</Client>;
+    }
+    function FunctionPropClient() {
+      return <Client foo={() => {}} />;
+    }
+    function SymbolPropClient() {
+      return <Client foo={Symbol('foo')} />;
+    }
+
+    function RefPropClient() {
+      return <Client ref={ref} />;
+    }
+
+    const options = {
+      onError(x) {
+        return __DEV__ ? 'a dev digest' : `digest("${x.message}")`;
+      },
+    };
+    const event = ReactNoopFlightServer.render(<EventHandlerProp />, options);
+    const fn = ReactNoopFlightServer.render(<FunctionProp />, options);
+    const symbol = ReactNoopFlightServer.render(<SymbolProp />, options);
+    const refs = ReactNoopFlightServer.render(<RefProp />, options);
+    const eventClient = ReactNoopFlightServer.render(
+      <EventHandlerPropClient />,
+      options,
+    );
+    const fnChildrenClient = ReactNoopFlightServer.render(
+      <FunctionChildrenClient />,
+      options,
+    );
+    const fnClient = ReactNoopFlightServer.render(
+      <FunctionPropClient />,
+      options,
+    );
+    const symbolClient = ReactNoopFlightServer.render(
+      <SymbolPropClient />,
+      options,
+    );
+    const refsClient = ReactNoopFlightServer.render(<RefPropClient />, options);
+
+    function Render({promise}) {
+      return use(promise);
+    }
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(
+          <>
+            <ErrorBoundary expectedMessage="Event handlers cannot be passed to Client Component props.">
+              <Render promise={ReactNoopFlightClient.read(event)} />
+            </ErrorBoundary>
+            <ErrorBoundary
+              expectedMessage={
+                __DEV__
+                  ? 'Functions are not valid as a child of Client Components. This may happen if you return fn instead of <fn /> from render. Or maybe you meant to call this function rather than return it.'
+                  : 'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".'
+              }>
+              <Render promise={ReactNoopFlightClient.read(fn)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Only global symbols received from Symbol.for(...) can be passed to Client Components.">
+              <Render promise={ReactNoopFlightClient.read(symbol)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Refs cannot be used in Server Components, nor passed to Client Components.">
+              <Render promise={ReactNoopFlightClient.read(refs)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Event handlers cannot be passed to Client Component props.">
+              <Render promise={ReactNoopFlightClient.read(eventClient)} />
+            </ErrorBoundary>
+            <ErrorBoundary
+              expectedMessage={
+                __DEV__
+                  ? 'Functions are not valid as a child of Client Components. This may happen if you return Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.'
+                  : 'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".'
+              }>
+              <Render promise={ReactNoopFlightClient.read(fnChildrenClient)} />
+            </ErrorBoundary>
+            <ErrorBoundary
+              expectedMessage={
+                'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".'
+              }>
+              <Render promise={ReactNoopFlightClient.read(fnClient)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Only global symbols received from Symbol.for(...) can be passed to Client Components.">
+              <Render promise={ReactNoopFlightClient.read(symbolClient)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Refs cannot be used in Server Components, nor passed to Client Components.">
+              <Render promise={ReactNoopFlightClient.read(refsClient)} />
+            </ErrorBoundary>
+          </>,
+        );
+      });
+    });
+  });
+
+  it('should emit descriptions of errors in dev', async () => {
+    const ClientErrorBoundary = clientReference(ErrorBoundary);
+
+    function Throw({value}) {
+      throw value;
+    }
+
+    function RenderInlined() {
+      const inlinedElement = {
+        $$typeof: Symbol.for('react.element'),
+        type: () => {},
+        key: null,
+        ref: null,
+        props: {},
+        _owner: null,
+      };
+      return inlinedElement;
+    }
+
+    // We wrap in lazy to ensure the errors throws lazily.
+    const LazyInlined = React.lazy(async () => ({default: RenderInlined}));
+
+    const testCases = (
+      <>
+        <ClientErrorBoundary expectedMessage="This is a real Error.">
+          <Throw value={new TypeError('This is a real Error.')} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="This is a string error.">
+          <Throw value="This is a string error." />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="{message: ..., extra: ..., nested: ...}">
+          <Throw
+            value={{
+              message: 'This is a long message',
+              extra: 'properties',
+              nested: {more: 'prop'},
+            }}
+          />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary
+          expectedMessage={'{message: "Short", extra: ..., nested: ...}'}>
+          <Throw
+            value={{
+              message: 'Short',
+              extra: 'properties',
+              nested: {more: 'prop'},
+            }}
+          />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Symbol(hello)">
+          <Throw value={Symbol('hello')} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="123">
+          <Throw value={123} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="undefined">
+          <Throw value={undefined} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="<div/>">
+          <Throw value={<div />} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="function Foo() {}">
+          <Throw value={function Foo() {}} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage={'["array"]'}>
+          <Throw value={['array']} />
+        </ClientErrorBoundary>
+        <ClientErrorBoundary
+          expectedMessage={
+            'A React Element from an older version of React was rendered. ' +
+            'This is not supported. It can happen if:\n' +
+            '- Multiple copies of the "react" package is used.\n' +
+            '- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' +
+            '- A compiler tries to "inline" JSX instead of using the runtime.'
+          }>
+          <LazyInlined />
+        </ClientErrorBoundary>
+      </>
+    );
+
+    const transport = ReactNoopFlightServer.render(testCases, {
+      onError(x) {
+        if (__DEV__) {
+          return 'a dev digest';
+        }
+        if (x instanceof Error) {
+          return `digest("${x.message}")`;
+        } else if (Array.isArray(x)) {
+          return `digest([])`;
+        } else if (typeof x === 'object' && x !== null) {
+          return `digest({})`;
+        }
+        return `digest(${String(x)})`;
+      },
+    });
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    });
+  });
+
+  it('should include server components in error boundary stacks in dev', async () => {
+    const ClientErrorBoundary = clientReference(ErrorBoundary);
+
+    function Throw({value}) {
+      throw value;
+    }
+
+    const expectedStack = __DEV__
+      ? '\n    in Throw' +
+        '\n    in div' +
+        '\n    in ErrorBoundary (at **)' +
+        '\n    in App'
+      : '\n    in div' + '\n    in ErrorBoundary (at **)';
+
+    function App() {
+      return (
+        <ClientErrorBoundary
+          expectedMessage="This is a real Error."
+          expectedStack={expectedStack}>
+          <div>
+            <Throw value={new TypeError('This is a real Error.')} />
+          </div>
+        </ClientErrorBoundary>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<App />, {
+      onError(x) {
+        if (__DEV__) {
+          return 'a dev digest';
+        }
+        if (x instanceof Error) {
+          return `digest("${x.message}")`;
+        } else if (Array.isArray(x)) {
+          return `digest([])`;
+        } else if (typeof x === 'object' && x !== null) {
+          return `digest({})`;
+        }
+        return `digest(${String(x)})`;
+      },
+    });
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    });
+  });
+
+  it('should handle serialization errors in element inside error boundary', async () => {
+    const ClientErrorBoundary = clientReference(ErrorBoundary);
+
+    const expectedStack = __DEV__
+      ? '\n    in div' + '\n    in ErrorBoundary (at **)' + '\n    in App'
+      : '\n    in ErrorBoundary (at **)';
+
+    function App() {
+      return (
+        <ClientErrorBoundary
+          expectedMessage="Event handlers cannot be passed to Client Component props."
+          expectedStack={expectedStack}>
+          <div onClick={function () {}} />
+        </ClientErrorBoundary>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<App />, {
+      onError(x) {
+        if (__DEV__) {
+          return 'a dev digest';
+        }
+        if (x instanceof Error) {
+          return `digest("${x.message}")`;
+        } else if (Array.isArray(x)) {
+          return `digest([])`;
+        } else if (typeof x === 'object' && x !== null) {
+          return `digest({})`;
+        }
+        return `digest(${String(x)})`;
+      },
+    });
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    });
+  });
+
+  it('should handle exotic stack frames', async () => {
+    function ServerComponent() {
+      const error = new Error('This is an error');
+      const originalStackLines = error.stack.split('\n');
+      // Fake a stack
+      error.stack = [
+        originalStackLines[0],
+        // original
+        // '    at ServerComponentError (file://~/react/packages/react-client/src/__tests__/ReactFlight-test.js:1166:19)',
+        // nested eval (https://github.com/ChromeDevTools/devtools-frontend/blob/831be28facb4e85de5ee8c1acc4d98dfeda7a73b/test/unittests/front_end/panels/console/ErrorStackParser_test.ts#L198)
+        '    at eval (eval at testFunction (inspected-page.html:29:11), <anonymous>:1:10)',
+        // parens may be added by Webpack when bundle layers are used. They're also valid in directory names.
+        '    at ServerComponentError (file://~/(some)(really)(exotic-directory)/ReactFlight-test.js:1166:19)',
+        // anon function (https://github.com/ChromeDevTools/devtools-frontend/blob/831be28facb4e85de5ee8c1acc4d98dfeda7a73b/test/unittests/front_end/panels/console/ErrorStackParser_test.ts#L115C9-L115C35)
+        '    at file:///testing.js:42:3',
+        // async anon function (https://github.com/ChromeDevTools/devtools-frontend/blob/831be28facb4e85de5ee8c1acc4d98dfeda7a73b/test/unittests/front_end/panels/console/ErrorStackParser_test.ts#L130C9-L130C41)
+        '    at async file:///testing.js:42:3',
+        // third-party RSC frame
+        // Ideally this would be a real frame produced by React not a mocked one.
+        '    at ThirdParty (about://React/ThirdParty/file:///code/%5Broot%2520of%2520the%2520server%5D.js?42:1:1)',
+        // We'll later filter this out based on line/column in `filterStackFrame`.
+        '    at ThirdPartyModule (file:///file-with-index-source-map.js:52656:16374)',
+        // host component in parent stack
+        '    at div (<anonymous>)',
+        ...originalStackLines.slice(2),
+      ].join('\n');
+      throw error;
+    }
+
+    const findSourceMapURL = jest.fn(() => null);
+    const errors = [];
+    class MyErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      componentDidCatch(error, componentInfo) {
+        errors.push(error);
+      }
+      render() {
+        if (this.state.error) {
+          return null;
+        }
+        return this.props.children;
+      }
+    }
+    const ClientErrorBoundary = clientReference(MyErrorBoundary);
+
+    function App() {
+      return ReactServer.createElement(
+        ClientErrorBoundary,
+        null,
+        ReactServer.createElement(ServerComponent),
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<App />, {
+      onError(x) {
+        if (__DEV__) {
+          return 'a dev digest';
+        }
+        if (x instanceof Error) {
+          return `digest("${x.message}")`;
+        } else if (Array.isArray(x)) {
+          return `digest([])`;
+        } else if (typeof x === 'object' && x !== null) {
+          return `digest({})`;
+        }
+        return `digest(${String(x)})`;
+      },
+      filterStackFrame(filename, functionName, lineNumber, columnNumber) {
+        if (lineNumber === 52656 && columnNumber === 16374) {
+          return false;
+        }
+        if (!filename) {
+          // Allow anonymous
+          return functionName === 'div';
+        }
+        return (
+          !filename.startsWith('node:') &&
+          !filename.includes('node_modules') &&
+          // sourceURL from an ES module in `/code/[root of the server].js`
+          filename !== 'file:///code/[root%20of%20the%20server].js'
+        );
+      },
+    });
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(
+          ReactNoopFlightClient.read(transport, {findSourceMapURL}),
+        );
+      });
+    });
+
+    if (__DEV__) {
+      expect({
+        errors: errors.map(getErrorForJestMatcher),
+        findSourceMapURLCalls: findSourceMapURL.mock.calls,
+      }).toEqual({
+        errors: [
+          {
+            message: 'This is an error',
+            name: 'Error',
+            stack: expect.stringContaining(
+              'Error: This is an error\n' +
+                '    at eval (eval at testFunction (inspected-page.html:29:11),%20%3Canonymous%3E:1:35)\n' +
+                '    at ServerComponentError (file://~/(some)(really)(exotic-directory)/ReactFlight-test.js:1166:19)\n' +
+                '    at <anonymous> (file:///testing.js:42:3)\n' +
+                '    at <anonymous> (file:///testing.js:42:3)\n' +
+                '    at div (<anonymous>',
+            ),
+            digest: 'a dev digest',
+            environmentName: 'Server',
+          },
+        ],
+        findSourceMapURLCalls: expect.arrayContaining([
+          // TODO: What should we request here? The outer (<anonymous>) or the inner (inspected-page.html)?
+          ['inspected-page.html:29:11), <anonymous>', 'Server'],
+          [
+            'file://~/(some)(really)(exotic-directory)/ReactFlight-test.js',
+            'Server',
+          ],
+          ['file:///testing.js', 'Server'],
+          ['', 'Server'],
+        ]),
+      });
+    } else {
+      expect(errors.map(getErrorForJestMatcher)).toEqual([
+        {
+          message:
+            'An error occurred in the Server Components render. The specific message is omitted in production' +
+            ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
+            ' may provide additional details about the nature of the error.',
+          stack:
+            'Error: An error occurred in the Server Components render. The specific message is omitted in production' +
+            ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
+            ' may provide additional details about the nature of the error.',
+          digest: 'digest("This is an error")',
+        },
+      ]);
+    }
+  });
+
+  it('should include server components in warning stacks', async () => {
+    function Component() {
+      // Trigger key warning
+      return <div>{[<span />]}</div>;
+    }
+    const ClientComponent = clientReference(Component);
+
+    function Indirection({children}) {
+      return children;
+    }
+
+    function App() {
+      // We use the ReactServer runtime here to get the Server owner.
+      return ReactServer.createElement(
+        Indirection,
+        null,
+        ReactServer.createElement(ClientComponent),
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(<App />);
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n' +
+        '\n' +
+        'Check the render method of `Component`. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Component (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('should trigger the inner most error boundary inside a Client Component', async () => {
+    function ServerComponent() {
+      throw new Error('This was thrown in the Server Component.');
+    }
+
+    function ClientComponent({children}) {
+      // This should catch the error thrown by the Server Component, even though it has already happened.
+      // We currently need to wrap it in a div because as it's set up right now, a lazy reference will
+      // throw during reconciliation which will trigger the parent of the error boundary.
+      // This is similar to how these will suspend the parent if it's a direct child of a Suspense boundary.
+      // That's a bug.
+      return (
+        <ErrorBoundary expectedMessage="This was thrown in the Server Component.">
+          <div>{children}</div>
+        </ErrorBoundary>
+      );
+    }
+
+    const ClientComponentReference = clientReference(ClientComponent);
+
+    function Server() {
+      return (
+        <ClientComponentReference>
+          <ServerComponent />
+        </ClientComponentReference>
+      );
+    }
+
+    const data = ReactNoopFlightServer.render(<Server />, {
+      onError(x) {
+        // ignore
+      },
+    });
+
+    function Client({promise}) {
+      return use(promise);
+    }
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(
+          <NoErrorExpected>
+            <Client promise={ReactNoopFlightClient.read(data)} />
+          </NoErrorExpected>,
+        );
+      });
+    });
+  });
+
+  it('should warn in DEV if a toJSON instance is passed to a host component', () => {
+    const obj = {
+      toJSON() {
+        return 123;
+      },
+    };
+    const transport = ReactNoopFlightServer.render(<input value={obj} />);
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Objects with toJSON methods are not supported. ' +
+          'Convert it manually to a simple value before passing it to props.\n' +
+          '  <input value={{toJSON: ...}}>\n' +
+          '               ^^^^^^^^^^^^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Objects with toJSON methods are not supported. ' +
+        'Convert it manually to a simple value before passing it to props.\n' +
+        '  <input value={{toJSON: ...}}>\n' +
+        '               ^^^^^^^^^^^^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if a toJSON instance is passed to a host component child', () => {
+    class MyError extends Error {
+      toJSON() {
+        return 123;
+      }
+    }
+    const transport = ReactNoopFlightServer.render(
+      <div>Womp womp: {new MyError('spaghetti')}</div>,
+    );
+    assertConsoleErrorDev(
+      [
+        'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
+          '  <div>Womp womp: {Error}</div>\n' +
+          '                  ^^^^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
+        '  <div>Womp womp: {Error}</div>\n' +
+        '                  ^^^^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if a special object is passed to a host component', () => {
+    const transport = ReactNoopFlightServer.render(<input value={Math} />);
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Math objects are not supported.\n' +
+          '  <input value={Math}>\n' +
+          '               ^^^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Math objects are not supported.\n' +
+        '  <input value={Math}>\n' +
+        '               ^^^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if an object with symbols is passed to a host component', () => {
+    const transport = ReactNoopFlightServer.render(
+      <input value={{[Symbol.iterator]: {}}} />,
+    );
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Objects with symbol properties like Symbol.iterator are not supported.\n' +
+          '  <input value={{}}>\n' +
+          '               ^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Objects with symbol properties like Symbol.iterator are not supported.\n' +
+        '  <input value={{}}>\n' +
+        '               ^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if a toJSON instance is passed to a Client Component', () => {
+    const obj = {
+      toJSON() {
+        return 123;
+      },
+    };
+    function ClientImpl({value}) {
+      return <div>{value}</div>;
+    }
+    const Client = clientReference(ClientImpl);
+    const transport = ReactNoopFlightServer.render(<Client value={obj} />);
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Objects with toJSON methods are not supported. ' +
+          'Convert it manually to a simple value before passing it to props.\n' +
+          '  <... value={{toJSON: ...}}>\n' +
+          '             ^^^^^^^^^^^^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Objects with toJSON methods are not supported. ' +
+        'Convert it manually to a simple value before passing it to props.\n' +
+        '  <... value={{toJSON: ...}}>\n' +
+        '             ^^^^^^^^^^^^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if a toJSON instance is passed to a Client Component child', () => {
+    const obj = {
+      toJSON() {
+        return 123;
+      },
+    };
+    function ClientImpl({children}) {
+      return <div>{children}</div>;
+    }
+    const Client = clientReference(ClientImpl);
+    const transport = ReactNoopFlightServer.render(
+      <Client>Current date: {obj}</Client>,
+    );
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Objects with toJSON methods are not supported. ' +
+          'Convert it manually to a simple value before passing it to props.\n' +
+          '  <>Current date: {{toJSON: ...}}</>\n' +
+          '                  ^^^^^^^^^^^^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Objects with toJSON methods are not supported. ' +
+        'Convert it manually to a simple value before passing it to props.\n' +
+        '  <>Current date: {{toJSON: ...}}</>\n' +
+        '                  ^^^^^^^^^^^^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if a special object is passed to a Client Component', () => {
+    function ClientImpl({value}) {
+      return <div>{value}</div>;
+    }
+    const Client = clientReference(ClientImpl);
+    const transport = ReactNoopFlightServer.render(<Client value={Math} />);
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Math objects are not supported.\n' +
+          '  <... value={Math}>\n' +
+          '             ^^^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Math objects are not supported.\n' +
+        '  <... value={Math}>\n' +
+        '             ^^^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if an object with symbols is passed to a Client Component', () => {
+    function ClientImpl({value}) {
+      return <div>{value}</div>;
+    }
+    const Client = clientReference(ClientImpl);
+    assertConsoleErrorDev([]);
+    const transport = ReactNoopFlightServer.render(
+      <Client value={{[Symbol.iterator]: {}}} />,
+    );
+    assertConsoleErrorDev(
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Objects with symbol properties like Symbol.iterator are not supported.\n' +
+          '  <... value={{}}>\n' +
+          '             ^^^^',
+      ],
+      {withoutStack: true},
+    );
+
+    ReactNoopFlightClient.read(transport);
+
+    assertConsoleErrorDev([
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Objects with symbol properties like Symbol.iterator are not supported.\n' +
+        '  <... value={{}}>\n' +
+        '             ^^^^\n' +
+        '    in  (at **)',
+    ]);
+  });
+
+  it('should warn in DEV if a special object is passed to a nested object in Client Component', () => {
+    function ClientImpl({value}) {
+      return <div>{value}</div>;
+    }
+    const Client = clientReference(ClientImpl);
+    const transport = ReactNoopFlightServer.render(
+      <Client value={{[Symbol.iterator]: {}}} />,
+    );
+    ReactNoopFlightClient.read(transport);
+
+    assertConsoleErrorDev([
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Objects with symbol properties like Symbol.iterator are not supported.\n' +
+          '  <... value={{}}>\n' +
+          '             ^^^^',
+        {withoutStack: true},
+      ],
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Objects with symbol properties like Symbol.iterator are not supported.\n' +
+        '  <... value={{}}>\n' +
+        '             ^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should warn in DEV if a special object is passed to a nested array in Client Component', () => {
+    function ClientImpl({value}) {
+      return <div>{value}</div>;
+    }
+    const Client = clientReference(ClientImpl);
+    const transport = ReactNoopFlightServer.render(
+      <Client value={['looooong string takes up noise', Math, <h1>hi</h1>]} />,
+    );
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      [
+        'Only plain objects can be passed to Client Components from Server Components. ' +
+          'Math objects are not supported.\n' +
+          '  [..., Math, <h1/>]\n' +
+          '        ^^^^',
+        {withoutStack: true},
+      ],
+      'Only plain objects can be passed to Client Components from Server Components. ' +
+        'Math objects are not supported.\n' +
+        '  [..., Math, <h1/>]\n' +
+        '        ^^^^\n' +
+        '    at  (<anonymous>)',
+    ]);
+  });
+
+  it('should NOT warn in DEV for key getters', () => {
+    const transport = ReactNoopFlightServer.render(<div key="a" />);
+    ReactNoopFlightClient.read(transport);
+  });
+
+  it('should warn in DEV a child is missing keys on server component', () => {
+    function NoKey({children}) {
+      return ReactServer.createElement('div', {
+        key: "this has a key but parent doesn't",
+      });
+    }
+    // While we're on the server we need to have the Server version active to track component stacks.
+    jest.resetModules();
+    jest.mock('react', () => ReactServer);
+    const transport = ReactNoopFlightServer.render(
+      ReactServer.createElement(
+        'div',
+        null,
+        Array(6).fill(ReactServer.createElement(NoKey)),
+      ),
+    );
+    jest.resetModules();
+    jest.mock('react', () => React);
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in NoKey (at **)',
+      'Each child in a list should have a unique "key" prop. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in NoKey (at **)',
+    ]);
+  });
+
+  it('should warn in DEV a child is missing keys on a fragment', () => {
+    // While we're on the server we need to have the Server version active to track component stacks.
+    jest.resetModules();
+    jest.mock('react', () => ReactServer);
+    const transport = ReactNoopFlightServer.render(
+      ReactServer.createElement(
+        'div',
+        null,
+        Array(6).fill(ReactServer.createElement(ReactServer.Fragment)),
+      ),
+    );
+    jest.resetModules();
+    jest.mock('react', () => React);
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Fragment (at **)',
+      'Each child in a list should have a unique "key" prop. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Fragment (at **)',
+    ]);
+  });
+
+  it('should warn in DEV a child is missing keys in client component', async () => {
+    function ParentClient({children}) {
+      return children;
+    }
+
+    await act(async () => {
+      const Parent = clientReference(ParentClient);
+      const transport = ReactNoopFlightServer.render(
+        <Parent>{Array(6).fill(<div>no key</div>)}</Parent>,
+      );
+      ReactNoopFlightClient.read(transport);
+
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the top-level render call using <ParentClient>. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('should error if a class instance is passed to a host component', () => {
+    class Foo {
+      method() {}
+    }
+    const errors = [];
+    ReactNoopFlightServer.render(<input value={new Foo()} />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual([
+      'Only plain objects, and a few built-ins, can be passed to Client Components ' +
+        'from Server Components. Classes or null prototypes are not supported.' +
+        (__DEV__
+          ? '\n' + '  <input value={{}}>\n' + '               ^^^^'
+          : '\n' + '  {value: {}}\n' + '          ^^'),
+    ]);
+  });
+
+  it('should error if useContext is called()', () => {
+    function ServerComponent() {
+      return ReactServer.useContext();
+    }
+    const errors = [];
+    ReactNoopFlightServer.render(<ServerComponent />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+    expect(errors).toEqual(['ReactServer.useContext is not a function']);
+  });
+
+  it('should error if a context without a client reference is passed to use()', () => {
+    const Context = React.createContext();
+    function ServerComponent() {
+      return ReactServer.use(Context);
+    }
+    const errors = [];
+    ReactNoopFlightServer.render(<ServerComponent />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+    expect(errors).toEqual([
+      'Cannot read a Client Context from a Server Component.',
+    ]);
+  });
+
+  it('should error if a client reference is passed to use()', () => {
+    const Context = React.createContext();
+    const ClientContext = clientReference(Context);
+    function ServerComponent() {
+      return ReactServer.use(ClientContext);
+    }
+    const errors = [];
+    ReactNoopFlightServer.render(<ServerComponent />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+    expect(errors).toEqual([
+      'Cannot read a Client Context from a Server Component.',
+    ]);
+  });
+
+  describe('Hooks', () => {
+    function DivWithId({children}) {
+      const id = ReactServer.useId();
+      return <div prop={id}>{children}</div>;
+    }
+
+    it('should support useId', async () => {
+      function App() {
+        return (
+          <>
+            <DivWithId />
+            <DivWithId />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<App />);
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop="_S_1_" />
+          <div prop="_S_2_" />
+        </>,
+      );
+    });
+
+    it('accepts an identifier prefix that prefixes generated ids', async () => {
+      function App() {
+        return (
+          <>
+            <DivWithId />
+            <DivWithId />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<App />, {
+        identifierPrefix: 'foo',
+      });
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop="_fooS_1_" />
+          <div prop="_fooS_2_" />
+        </>,
+      );
+    });
+
+    it('[TODO] it does not warn if you render a server element passed to a client module reference twice on the client when using useId', async () => {
+      // @TODO Today if you render a Server Component with useId and pass it to a Client Component and that Client Component renders the element in two or more
+      // places the id used on the server will be duplicated in the client. This is a deviation from the guarantees useId makes for Fizz/Client and is a consequence
+      // of the fact that the Server Component is actually rendered on the server and is reduced to a set of host elements before being passed to the Client component
+      // so the output passed to the Client has no knowledge of the useId use. In the future we would like to add a DEV warning when this happens. For now
+      // we just accept that it is a nuance of useId in Flight
+      function App() {
+        const id = ReactServer.useId();
+        const div = <div prop={id}>{id}</div>;
+        return <ClientDoublerModuleRef el={div} />;
+      }
+
+      function ClientDoubler({el}) {
+        Scheduler.log('ClientDoubler');
+        return (
+          <>
+            {el}
+            {el}
+          </>
+        );
+      }
+
+      const ClientDoublerModuleRef = clientReference(ClientDoubler);
+
+      const transport = ReactNoopFlightServer.render(<App />);
+      assertLog([]);
+
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
+      });
+
+      assertLog(['ClientDoubler']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop="_S_1_">_S_1_</div>
+          <div prop="_S_1_">_S_1_</div>
+        </>,
+      );
+    });
+  });
+
+  // @gate enableTaint
+  it('errors when a tainted object is serialized', async () => {
+    function UserClient({user}) {
+      return <span>{user.name}</span>;
+    }
+    const User = clientReference(UserClient);
+
+    const user = {
+      name: 'Seb',
+      age: 'rather not say',
+    };
+    ReactServer.experimental_taintObjectReference(
+      "Don't pass the raw user object to the client",
+      user,
+    );
+    const errors = [];
+    ReactNoopFlightServer.render(<User user={user} />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual(["Don't pass the raw user object to the client"]);
+  });
+
+  // @gate enableTaint
+  it('errors with a specific message when a tainted function is serialized', async () => {
+    function UserClient({user}) {
+      return <span>{user.name}</span>;
+    }
+    const User = clientReference(UserClient);
+
+    function change() {}
+    ReactServer.experimental_taintObjectReference(
+      'A change handler cannot be passed to a client component',
+      change,
+    );
+    const errors = [];
+    ReactNoopFlightServer.render(<User onChange={change} />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual([
+      'A change handler cannot be passed to a client component',
+    ]);
+  });
+
+  // @gate enableTaint
+  it('errors when a tainted string is serialized', async () => {
+    function UserClient({user}) {
+      return <span>{user.name}</span>;
+    }
+    const User = clientReference(UserClient);
+
+    const process = {
+      env: {
+        SECRET: '3e971ecc1485fe78625598bf9b6f85db',
+      },
+    };
+    ReactServer.experimental_taintUniqueValue(
+      'Cannot pass a secret token to the client',
+      process,
+      process.env.SECRET,
+    );
+
+    const errors = [];
+    ReactNoopFlightServer.render(<User token={process.env.SECRET} />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual(['Cannot pass a secret token to the client']);
+
+    // This just ensures the process object is kept alive for the life time of
+    // the test since we're simulating a global as an example.
+    expect(process.env.SECRET).toBe('3e971ecc1485fe78625598bf9b6f85db');
+  });
+
+  // @gate enableTaint
+  it('errors when a tainted bigint is serialized', async () => {
+    function UserClient({user}) {
+      return <span>{user.name}</span>;
+    }
+    const User = clientReference(UserClient);
+
+    const currentUser = {
+      name: 'Seb',
+      token: BigInt('0x3e971ecc1485fe78625598bf9b6f85dc'),
+    };
+    ReactServer.experimental_taintUniqueValue(
+      'Cannot pass a secret token to the client',
+      currentUser,
+      currentUser.token,
+    );
+
+    function App({user}) {
+      return <User token={user.token} />;
+    }
+
+    const errors = [];
+    ReactNoopFlightServer.render(<App user={currentUser} />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual(['Cannot pass a secret token to the client']);
+  });
+
+  // @gate enableTaint
+  it('errors when a tainted binary value is serialized', async () => {
+    function UserClient({user}) {
+      return <span>{user.name}</span>;
+    }
+    const User = clientReference(UserClient);
+
+    const currentUser = {
+      name: 'Seb',
+      token: new Uint32Array([0x3e971ecc, 0x1485fe78, 0x625598bf, 0x9b6f85dd]),
+    };
+    ReactServer.experimental_taintUniqueValue(
+      'Cannot pass a secret token to the client',
+      currentUser,
+      currentUser.token,
+    );
+
+    function App({user}) {
+      const clone = user.token.slice();
+      return <User token={clone} />;
+    }
+
+    const errors = [];
+    ReactNoopFlightServer.render(<App user={currentUser} />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual(['Cannot pass a secret token to the client']);
+  });
+
+  // @gate enableTaint
+  it('keep a tainted value tainted until the end of any pending requests', async () => {
+    function UserClient({user}) {
+      return <span>{user.name}</span>;
+    }
+    const User = clientReference(UserClient);
+
+    function getUser() {
+      const user = {
+        name: 'Seb',
+        token: '3e971ecc1485fe78625598bf9b6f85db',
+      };
+      ReactServer.experimental_taintUniqueValue(
+        'Cannot pass a secret token to the client',
+        user,
+        user.token,
+      );
+      return user;
+    }
+
+    function App() {
+      const user = getUser();
+      const derivedValue = {...user};
+      // A garbage collection can happen at any time. Even before the end of
+      // this request. This would clean up the user object.
+      gc();
+      // We should still block the tainted value.
+      return <User user={derivedValue} />;
+    }
+
+    let errors = [];
+    ReactNoopFlightServer.render(<App />, {
+      onError(x) {
+        errors.push(x.message);
+      },
+    });
+
+    expect(errors).toEqual(['Cannot pass a secret token to the client']);
+
+    // After the previous requests finishes, the token can be rendered again.
+
+    errors = [];
+    ReactNoopFlightServer.render(
+      <User user={{token: '3e971ecc1485fe78625598bf9b6f85db'}} />,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    expect(errors).toEqual([]);
+  });
+
+  it('preserves state when keying a server component', async () => {
+    function StatefulClient({name}) {
+      const [state] = React.useState(name.toLowerCase());
+      return state;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    function Item({item}) {
+      return (
+        <div>
+          {item}
+          <Stateful name={item} />
+        </div>
+      );
+    }
+
+    function Items({items}) {
+      return items.map(item => {
+        return <Item key={item} item={item} />;
+      });
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      <Items items={['A', 'B', 'C']} />,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Aa</div>
+        <div>Bb</div>
+        <div>Cc</div>
+      </>,
+    );
+
+    const transport2 = ReactNoopFlightServer.render(
+      <Items items={['B', 'A', 'D', 'C']} />,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Bb</div>
+        <div>Aa</div>
+        <div>Dd</div>
+        <div>Cc</div>
+      </>,
+    );
+  });
+
+  it('does not inherit keys of children inside a server component', async () => {
+    function StatefulClient({name, initial}) {
+      const [state] = React.useState(initial);
+      return state;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    function Item({item, initial}) {
+      // This key is the key of the single item of this component.
+      // It's NOT part of the key of the list the parent component is
+      // in.
+      return (
+        <div key={item}>
+          {item}
+          <Stateful name={item} initial={initial} />
+        </div>
+      );
+    }
+
+    function IndirectItem({item, initial}) {
+      // Even though we render two items with the same child key this key
+      // should not conflict, because the key belongs to the parent slot.
+      return <Item key="parent" item={item} initial={initial} />;
+    }
+
+    // These items don't have their own keys because they're in a fixed set
+    const transport = ReactNoopFlightServer.render(
+      <>
+        <Item item="A" initial={1} />
+        <Item item="B" initial={2} />
+        <IndirectItem item="C" initial={5} />
+        <IndirectItem item="C" initial={6} />
+      </>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>A1</div>
+        <div>B2</div>
+        <div>C5</div>
+        <div>C6</div>
+      </>,
+    );
+
+    // This means that they shouldn't swap state when the properties update
+    const transport2 = ReactNoopFlightServer.render(
+      <>
+        <Item item="B" initial={3} />
+        <Item item="A" initial={4} />
+        <IndirectItem item="C" initial={7} />
+        <IndirectItem item="C" initial={8} />
+      </>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>B3</div>
+        <div>A4</div>
+        <div>C5</div>
+        <div>C6</div>
+      </>,
+    );
+  });
+
+  it('shares state between single return and array return in a parent', async () => {
+    function StatefulClient({name, initial}) {
+      const [state] = React.useState(initial);
+      return state;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    function Item({item, initial}) {
+      // This key is the key of the single item of this component.
+      // It's NOT part of the key of the list the parent component is
+      // in.
+      return (
+        <span key={item}>
+          {item}
+          <Stateful name={item} initial={initial} />
+        </span>
+      );
+    }
+
+    function Condition({condition}) {
+      if (condition) {
+        return <Item item="A" initial={1} />;
+      }
+      // The first item in the fragment is the same as the single item.
+      return (
+        <>
+          <Item item="A" initial={2} />
+          <Item item="B" initial={3} />
+        </>
+      );
+    }
+
+    function ConditionPlain({condition}) {
+      if (condition) {
+        return (
+          <span>
+            C
+            <Stateful name="C" initial={1} />
+          </span>
+        );
+      }
+      // The first item in the fragment is the same as the single item.
+      return (
+        <>
+          <span>
+            C
+            <Stateful name="C" initial={2} />
+          </span>
+          <span>
+            D
+            <Stateful name="D" initial={3} />
+          </span>
+        </>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      // This two item wrapper ensures we're already one step inside an array.
+      // A single item is not the same as a set when it's nested one level.
+      <>
+        <div>
+          <Condition condition={true} />
+        </div>
+        <div>
+          <ConditionPlain condition={true} />
+        </div>
+        <div key="keyed">
+          <ConditionPlain condition={true} />
+        </div>
+      </>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>A1</span>
+        </div>
+        <div>
+          <span>C1</span>
+        </div>
+        <div>
+          <span>C1</span>
+        </div>
+      </>,
+    );
+
+    const transport2 = ReactNoopFlightServer.render(
+      <>
+        <div>
+          <Condition condition={false} />
+        </div>
+        <div>
+          <ConditionPlain condition={false} />
+        </div>
+        {null}
+        <div key="keyed">
+          <ConditionPlain condition={false} />
+        </div>
+      </>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    // We're intentionally breaking from the semantics here for efficiency of the protocol.
+    // In the case a Server Component inside a fragment is itself implicitly keyed but its
+    // return value has a key, then we need a wrapper fragment. This means they can't
+    // reconcile. To solve this we would need to add a wrapper fragment to every Server
+    // Component just in case it returns a fragment later which is a lot.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>A2{/* This should be A1 ideally */}</span>
+          <span>B3</span>
+        </div>
+        <div>
+          <span>C1</span>
+          <span>D3</span>
+        </div>
+        <div>
+          <span>C1</span>
+          <span>D3</span>
+        </div>
+      </>,
+    );
+  });
+
+  it('shares state between single return and array return in a set', async () => {
+    function StatefulClient({name, initial}) {
+      const [state] = React.useState(initial);
+      return state;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    function Item({item, initial}) {
+      // This key is the key of the single item of this component.
+      // It's NOT part of the key of the list the parent component is
+      // in.
+      return (
+        <span key={item}>
+          {item}
+          <Stateful name={item} initial={initial} />
+        </span>
+      );
+    }
+
+    function Condition({condition}) {
+      if (condition) {
+        return <Item item="A" initial={1} />;
+      }
+      // The first item in the fragment is the same as the single item.
+      return (
+        <>
+          <Item item="A" initial={2} />
+          <Item item="B" initial={3} />
+        </>
+      );
+    }
+
+    function ConditionPlain({condition}) {
+      if (condition) {
+        return (
+          <span>
+            C
+            <Stateful name="C" initial={1} />
+          </span>
+        );
+      }
+      // The first item in the fragment is the same as the single item.
+      return (
+        <>
+          <span>
+            C
+            <Stateful name="C" initial={2} />
+          </span>
+          <span>
+            D
+            <Stateful name="D" initial={3} />
+          </span>
+        </>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      // This two item wrapper ensures we're already one step inside an array.
+      // A single item is not the same as a set when it's nested one level.
+      <div>
+        <Condition condition={true} />
+        <ConditionPlain condition={true} />
+        <ConditionPlain key="keyed" condition={true} />
+      </div>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A1</span>
+        <span>C1</span>
+        <span>C1</span>
+      </div>,
+    );
+
+    const transport2 = ReactNoopFlightServer.render(
+      <div>
+        <Condition condition={false} />
+        <ConditionPlain condition={false} />
+        {null}
+        <ConditionPlain key="keyed" condition={false} />
+      </div>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    // We're intentionally breaking from the semantics here for efficiency of the protocol.
+    // The issue with this test scenario is that when the Server Component is in a set,
+    // the next slot can't be conditionally a fragment or single. That would require wrapping
+    // in an additional fragment for every single child just in case it every expands to a
+    // fragment.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A2{/* Should be A1 */}</span>
+        <span>B3</span>
+        <span>C2{/* Should be C1 */}</span>
+        <span>D3</span>
+        <span>C2{/* Should be C1 */}</span>
+        <span>D3</span>
+      </div>,
+    );
+  });
+
+  it('preserves state with keys split across async work', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    function StatefulClient({name}) {
+      const [state] = React.useState(name.toLowerCase());
+      return state;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    function Item({name}) {
+      if (name === 'A') {
+        return promise.then(() => (
+          <div>
+            {name}
+            <Stateful name={name} />
+          </div>
+        ));
+      }
+      return (
+        <div>
+          {name}
+          <Stateful name={name} />
+        </div>
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render([
+      <Item key="a" name="A" />,
+      null,
+    ]);
+
+    // Create a gap in the stream
+    await resolve();
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>Aa</div>);
+
+    const transport2 = ReactNoopFlightServer.render([
+      null,
+      <Item key="a" name="B" />,
+    ]);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>Ba</div>);
+  });
+
+  it('shares state when moving keyed Server Components that render fragments', async () => {
+    function StatefulClient({name, initial}) {
+      const [state] = React.useState(initial);
+      return <span>{state}</span>;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    function ServerComponent({item, initial}) {
+      return [
+        <Stateful key="a" initial={'a' + initial} />,
+        <Stateful key="b" initial={'b' + initial} />,
+      ];
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      <div>
+        <ServerComponent key="A" initial={1} />
+        <ServerComponent key="B" initial={2} />
+      </div>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>a1</span>
+        <span>b1</span>
+        <span>a2</span>
+        <span>b2</span>
+      </div>,
+    );
+
+    // We swap the Server Components and the state of each child inside each fragment should move.
+    // Really the Fragment itself moves.
+    const transport2 = ReactNoopFlightServer.render(
+      <div>
+        <ServerComponent key="B" initial={4} />
+        <ServerComponent key="A" initial={3} />
+      </div>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>a2</span>
+        <span>b2</span>
+        <span>a1</span>
+        <span>b1</span>
+      </div>,
+    );
+  });
+
+  // @gate enableAsyncIterableChildren
+  it('shares state when moving keyed Server Components that render async iterables', async () => {
+    function StatefulClient({name, initial}) {
+      const [state] = React.useState(initial);
+      return <span>{state}</span>;
+    }
+    const Stateful = clientReference(StatefulClient);
+
+    async function* ServerComponent({item, initial}) {
+      yield <Stateful key="a" initial={'a' + initial} />;
+      yield <Stateful key="b" initial={'b' + initial} />;
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      <div>
+        <ServerComponent key="A" initial={1} />
+        <ServerComponent key="B" initial={2} />
+      </div>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>a1</span>
+        <span>b1</span>
+        <span>a2</span>
+        <span>b2</span>
+      </div>,
+    );
+
+    // We swap the Server Components and the state of each child inside each fragment should move.
+    // Really the Fragment itself moves.
+    const transport2 = ReactNoopFlightServer.render(
+      <div>
+        <ServerComponent key="B" initial={4} />
+        <ServerComponent key="A" initial={3} />
+      </div>,
+    );
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport2));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>a2</span>
+        <span>b2</span>
+        <span>a1</span>
+        <span>b1</span>
+      </div>,
+    );
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('preserves debug info for server-to-server pass through', async () => {
+    function ThirdPartyLazyComponent() {
+      return <span>!</span>;
+    }
+
+    const lazy = React.lazy(async function myLazy() {
+      return {
+        default: <ThirdPartyLazyComponent />,
+      };
+    });
+
+    function ThirdPartyComponent() {
+      return <span>stranger</span>;
+    }
+
+    function ThirdPartyFragmentComponent() {
+      return [<span key="1">Who</span>, ' ', <span key="2">dis?</span>];
+    }
+
+    function ServerComponent({transport}) {
+      // This is a Server Component that receives other Server Components from a third party.
+      const children = ReactNoopFlightClient.read(transport);
+      return <div>Hello, {children}</div>;
+    }
+
+    const promiseComponent = Promise.resolve(<ThirdPartyComponent />);
+
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      [promiseComponent, lazy, <ThirdPartyFragmentComponent key="3" />],
+      {
+        environmentName: 'third-party',
+      },
+    );
+
+    // Wait for the lazy component to initialize
+    await 0;
+
+    const transport = ReactNoopFlightServer.render(
+      <ServerComponent transport={thirdPartyTransport} />,
+    );
+
+    await act(async () => {
+      const result = await ReactNoopFlightClient.read(transport);
+      expect(getDebugInfo(result)).toEqual(
+        __DEV__
+          ? [
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 22 : 20},
+              {
+                name: 'ServerComponent',
+                env: 'Server',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {
+                  transport: expect.arrayContaining([]),
+                },
+              },
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 53 : 21},
+            ]
+          : undefined,
+      );
+
+      const thirdPartyChildren = await result.props.children[1];
+      // We expect the debug info to be transferred from the inner stream to the outer.
+      expect(getDebugInfo(await thirdPartyChildren[0])).toEqual(
+        __DEV__
+          ? [
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, // Clamped to the start
+              {
+                name: 'ThirdPartyComponent',
+                env: 'third-party',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {},
+              },
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 55 : 23}, // This last one is when the promise resolved into the first party.
+            ]
+          : undefined,
+      );
+      expect(getDebugInfo(thirdPartyChildren[1])).toEqual(
+        __DEV__
+          ? [
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, // Clamped to the start
+              {
+                name: 'ThirdPartyLazyComponent',
+                env: 'third-party',
+                key: null,
+                stack: '    in myLazy (at **)\n    in lazyInitializer (at **)',
+                props: {},
+              },
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
+            ]
+          : undefined,
+      );
+      expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
+        __DEV__
+          ? [
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
+              {
+                name: 'ThirdPartyFragmentComponent',
+                env: 'third-party',
+                key: '3',
+                stack: '    in Object.<anonymous> (at **)',
+                props: {},
+              },
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
+            ]
+          : undefined,
+      );
+      ReactNoop.render(result);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        Hello, <span>stranger</span>
+        <span>!</span>
+        <span>Who</span> <span>dis?</span>
+      </div>,
+    );
+  });
+
+  // @gate enableAsyncIterableChildren && enableComponentPerformanceTrack
+  it('preserves debug info for server-to-server pass through of async iterables', async () => {
+    let resolve;
+    const iteratorPromise = new Promise(r => (resolve = r));
+
+    async function* ThirdPartyAsyncIterableComponent({item, initial}) {
+      yield <span key="1">Who</span>;
+      yield <span key="2">dis?</span>;
+      resolve();
+    }
+
+    function Keyed({children}) {
+      // Keying this should generate a fragment.
+      return children;
+    }
+
+    function ServerComponent({transport}) {
+      // This is a Server Component that receives other Server Components from a third party.
+      const children = ReactServer.use(
+        ReactNoopFlightClient.read(transport),
+      ).root;
+      return (
+        <div>
+          <Keyed key="keyed">{children}</Keyed>
+        </div>
+      );
+    }
+
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      {root: <ThirdPartyAsyncIterableComponent />},
+      {
+        environmentName: 'third-party',
+      },
+    );
+
+    // Wait for the iterator to finish
+    await iteratorPromise;
+
+    await 0; // One more tick for the return value / closing.
+
+    const transport = ReactNoopFlightServer.render(
+      <ServerComponent transport={thirdPartyTransport} />,
+    );
+
+    await act(async () => {
+      const result = await ReactNoopFlightClient.read(transport);
+      expect(getDebugInfo(result)).toEqual(
+        __DEV__
+          ? [
+              {time: 16},
+              {
+                name: 'ServerComponent',
+                env: 'Server',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {
+                  transport: expect.arrayContaining([]),
+                },
+              },
+              {time: 31},
+            ]
+          : undefined,
+      );
+      const thirdPartyFragment = await result.props.children;
+      expect(getDebugInfo(thirdPartyFragment)).toEqual(
+        __DEV__
+          ? [
+              {time: 32},
+              {
+                name: 'Keyed',
+                env: 'Server',
+                key: 'keyed',
+                stack: '    in ServerComponent (at **)',
+                props: {
+                  children: {},
+                },
+              },
+              {time: 33},
+            ]
+          : undefined,
+      );
+      // We expect the debug info to be transferred from the inner stream to the outer.
+      expect(getDebugInfo(thirdPartyFragment.props.children)).toEqual(
+        __DEV__
+          ? [
+              {time: 33}, // Clamp to the start
+              {
+                name: 'ThirdPartyAsyncIterableComponent',
+                env: 'third-party',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {},
+              },
+              {time: 33},
+            ]
+          : undefined,
+      );
+
+      ReactNoop.render(result);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Who</span>
+        <span>dis?</span>
+      </div>,
+    );
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('preserves debug info for server-to-server through use()', async () => {
+    function ThirdPartyComponent() {
+      return 'hi';
+    }
+
+    function ServerComponent({transport}) {
+      // This is a Server Component that receives other Server Components from a third party.
+      const text = ReactServer.use(ReactNoopFlightClient.read(transport));
+      return <div>{text.toUpperCase()}</div>;
+    }
+
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      <ThirdPartyComponent />,
+      {
+        environmentName: 'third-party',
+      },
+    );
+
+    const transport = ReactNoopFlightServer.render(
+      <ServerComponent transport={thirdPartyTransport} />,
+    );
+
+    await act(async () => {
+      const result = await ReactNoopFlightClient.read(transport);
+      expect(getDebugInfo(result)).toEqual(
+        __DEV__
+          ? [
+              {time: 16},
+              {
+                name: 'ServerComponent',
+                env: 'Server',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {
+                  transport: expect.arrayContaining([]),
+                },
+              },
+              {time: 16},
+              {
+                name: 'ThirdPartyComponent',
+                env: 'third-party',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {},
+              },
+              {time: 16},
+              {time: gate(flags => flags.enableAsyncDebugInfo) ? 24 : 17},
+            ]
+          : undefined,
+      );
+      ReactNoop.render(result);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>HI</div>);
+  });
+
+  it('preserves error stacks passed through server-to-server with source maps', async () => {
+    async function ServerComponent({transport}) {
+      // This is a Server Component that receives other Server Components from a third party.
+      const thirdParty = ReactServer.use(
+        ReactNoopFlightClient.read(transport, {
+          findSourceMapURL(url) {
+            // By giving a source map url we're saying that we can't use the original
+            // file as the sourceURL, which gives stack traces a about://React/ prefix.
+            return 'source-map://' + url;
+          },
+        }),
+      );
+      // This will throw a third-party error inside the first-party server component.
+      await thirdParty.model;
+      return 'Should never render';
+    }
+
+    async function bar() {
+      throw new Error('third-party-error');
+    }
+
+    async function foo() {
+      await bar();
+    }
+
+    const rejectedPromise = foo();
+
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      {model: rejectedPromise},
+      {
+        environmentName: 'third-party',
+        onError(x) {
+          if (__DEV__) {
+            return 'a dev digest';
+          }
+          return `digest("${x.message}")`;
+        },
+      },
+    );
+
+    let originalError;
+    try {
+      await rejectedPromise;
+    } catch (x) {
+      originalError = x;
+    }
+    expect(originalError.message).toBe('third-party-error');
+
+    const transport = ReactNoopFlightServer.render(
+      <ServerComponent transport={thirdPartyTransport} />,
+      {
+        onError(x) {
+          if (__DEV__) {
+            return 'a dev digest';
+          }
+          return x.digest; // passthrough
+        },
+      },
+    );
+
+    await 0;
+    await 0;
+    await 0;
+
+    const expectedErrorStack = originalError.stack
+      // Test only the first rows since there's a lot of noise after that is eliminated.
+      .split('\n')
+      .slice(0, 4)
+      .join('\n')
+      .replaceAll(' (/', ' (file:///'); // The eval will end up normalizing these
+
+    let sawReactPrefix = false;
+    const environments = [];
+    await act(async () => {
+      ReactNoop.render(
+        <ErrorBoundary
+          expectedMessage="third-party-error"
+          expectedEnviromentName="third-party"
+          expectedErrorStack={expectedErrorStack}>
+          {ReactNoopFlightClient.read(transport, {
+            findSourceMapURL(url, environmentName) {
+              if (url.startsWith('about://React/')) {
+                // We don't expect to see any React prefixed URLs here.
+                sawReactPrefix = true;
+              }
+              environments.push(environmentName);
+              // My not giving a source map, we should leave it intact.
+              return null;
+            },
+          })}
+        </ErrorBoundary>,
+      );
+    });
+
+    expect(sawReactPrefix).toBe(false);
+    if (__DEV__) {
+      expect(environments.slice(0, 4)).toEqual([
+        'Server',
+        'third-party',
+        'third-party',
+        'third-party',
+      ]);
+    } else {
+      expect(environments).toEqual([]);
+    }
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('can change the environment name inside a component', async () => {
+    let env = 'A';
+    function Component(props) {
+      env = 'B';
+      return <div>hi</div>;
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      {
+        greeting: <Component />,
+      },
+      {
+        environmentName() {
+          return env;
+        },
+      },
+    );
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      const greeting = rootModel.greeting;
+      expect(getDebugInfo(greeting)).toEqual(
+        __DEV__
+          ? [
+              {time: 12},
+              {
+                name: 'Component',
+                env: 'A',
+                key: null,
+                stack: '    in Object.<anonymous> (at **)',
+                props: {},
+              },
+              {
+                env: 'B',
+              },
+              {time: 13},
+            ]
+          : undefined,
+      );
+      ReactNoop.render(greeting);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>hi</div>);
+  });
+
+  // @gate __DEV__
+  it('replays logs, but not onError logs', async () => {
+    function foo() {
+      return 'hello';
+    }
+
+    class MyClass {
+      constructor() {
+        this.x = 1;
+      }
+      method() {}
+      get y() {
+        return this.x + 1;
+      }
+      get z() {
+        return this.x + 5;
+      }
+    }
+    Object.defineProperty(MyClass.prototype, 'y', {enumerable: true});
+
+    Object.defineProperty(MyClass, 'name', {value: 'MyClassName'});
+
+    function ServerComponent() {
+      console.log('hi', {
+        prop: 123,
+        fn: foo,
+        map: new Map([['foo', foo]]),
+        promise: Promise.resolve('yo'),
+        infinitePromise: new Promise(() => {}),
+        Class: MyClass,
+        instance: new MyClass(),
+      });
+      throw new Error('err');
+    }
+
+    function App() {
+      return ReactServer.createElement(ServerComponent);
+    }
+
+    let ownerStacks = [];
+
+    // These tests are specifically testing console.log.
+    // Assign to `mockConsoleLog` so we can still inspect it when `console.log`
+    // is overridden by the test modules. The original function will be restored
+    // after this test finishes by `jest.restoreAllMocks()`.
+    const mockConsoleLog = spyOnDevAndProd(console, 'log').mockImplementation(
+      () => {
+        // Uses server React.
+        ownerStacks.push(normalizeCodeLocInfo(ReactServer.captureOwnerStack()));
+      },
+    );
+
+    // Reset the modules so that we get a new overridden console on top of the
+    // one installed by expect. This ensures that we still emit console.error
+    // calls.
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    const transport = ReactNoopFlightServer.render({
+      root: ReactServer.createElement(App),
+    });
+    assertConsoleErrorDev(['Error: err' + '\n    in <stack>']);
+
+    expect(mockConsoleLog).toHaveBeenCalledTimes(1);
+    expect(mockConsoleLog.mock.calls[0][0]).toBe('hi');
+    expect(mockConsoleLog.mock.calls[0][1].prop).toBe(123);
+    expect(ownerStacks).toEqual(['\n    in App (at **)']);
+    mockConsoleLog.mockClear();
+    mockConsoleLog.mockImplementation(() => {
+      // Switching to client React.
+      ownerStacks.push(normalizeCodeLocInfo(React.captureOwnerStack()));
+    });
+    ownerStacks = [];
+
+    // Let the Promises resolve.
+    await 0;
+    await 0;
+    await 0;
+
+    // The error should not actually get logged because we're not awaiting the root
+    // so it's not thrown but the server log also shouldn't be replayed.
+    await ReactNoopFlightClient.read(transport, {close: true});
+
+    expect(mockConsoleLog).toHaveBeenCalledTimes(1);
+    expect(mockConsoleLog.mock.calls[0][0]).toBe('hi');
+    expect(mockConsoleLog.mock.calls[0][1].prop).toBe(123);
+    const loggedFn = mockConsoleLog.mock.calls[0][1].fn;
+    expect(typeof loggedFn).toBe('function');
+    expect(loggedFn).not.toBe(foo);
+    expect(loggedFn.toString()).toBe(foo.toString());
+
+    const loggedMap = mockConsoleLog.mock.calls[0][1].map;
+    expect(loggedMap instanceof Map).toBe(true);
+    const loggedFn2 = loggedMap.get('foo');
+    expect(typeof loggedFn2).toBe('function');
+    expect(loggedFn2).not.toBe(foo);
+    expect(loggedFn2.toString()).toBe(foo.toString());
+    expect(loggedFn2).toBe(loggedFn);
+
+    const promise = mockConsoleLog.mock.calls[0][1].promise;
+    expect(promise).toBeInstanceOf(Promise);
+    expect(await promise).toBe('yo');
+
+    const infinitePromise = mockConsoleLog.mock.calls[0][1].infinitePromise;
+    expect(infinitePromise).toBeInstanceOf(Promise);
+    let resolved = false;
+    infinitePromise.then(
+      () => (resolved = true),
+      x => {
+        console.error(x);
+        resolved = true;
+      },
+    );
+    await 0;
+    await 0;
+    await 0;
+    // This should not reject upon aborting the stream.
+    expect(resolved).toBe(false);
+
+    const Class = mockConsoleLog.mock.calls[0][1].Class;
+    const instance = mockConsoleLog.mock.calls[0][1].instance;
+    expect(typeof Class).toBe('function');
+    expect(Class.prototype.constructor).toBe(Class);
+    expect(Class.name).toBe('MyClassName');
+    expect(instance instanceof Class).toBe(true);
+    expect(Object.getPrototypeOf(instance)).toBe(Class.prototype);
+    expect(instance.x).toBe(1);
+    expect(instance.hasOwnProperty('y')).toBe(true);
+    expect(instance.y).toBe(2); // Enumerable getter was reified
+    expect(instance.hasOwnProperty('z')).toBe(false);
+    expect(instance.z).toBe(6); // Not enumerable getter was transferred as part of the toString() of the class
+    expect(typeof instance.method).toBe('function'); // Methods are included only if they're part of the toString()
+
+    expect(ownerStacks).toEqual(['\n    in App (at **)']);
+  });
+
+  // @gate __DEV__
+  it('replays logs with cyclic objects', async () => {
+    const cyclic = {cycle: null};
+    cyclic.cycle = cyclic;
+
+    function ServerComponent() {
+      console.log('hi', {cyclic});
+      return null;
+    }
+
+    function App() {
+      return ReactServer.createElement(ServerComponent);
+    }
+
+    // These tests are specifically testing console.log.
+    // Assign to `mockConsoleLog` so we can still inspect it when `console.log`
+    // is overridden by the test modules. The original function will be restored
+    // after this test finishes by `jest.restoreAllMocks()`.
+    const mockConsoleLog = spyOnDevAndProd(console, 'log').mockImplementation(
+      () => {},
+    );
+
+    // Reset the modules so that we get a new overridden console on top of the
+    // one installed by expect. This ensures that we still emit console.error
+    // calls.
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    const transport = ReactNoopFlightServer.render({
+      root: ReactServer.createElement(App),
+    });
+
+    expect(mockConsoleLog).toHaveBeenCalledTimes(1);
+    expect(mockConsoleLog.mock.calls[0][0]).toBe('hi');
+    expect(mockConsoleLog.mock.calls[0][1].cyclic).toBe(cyclic);
+    mockConsoleLog.mockClear();
+    mockConsoleLog.mockImplementation(() => {});
+
+    // The error should not actually get logged because we're not awaiting the root
+    // so it's not thrown but the server log also shouldn't be replayed.
+    await ReactNoopFlightClient.read(transport);
+
+    expect(mockConsoleLog).toHaveBeenCalledTimes(1);
+    expect(mockConsoleLog.mock.calls[0][0]).toBe('hi');
+    const cyclic2 = mockConsoleLog.mock.calls[0][1].cyclic;
+    expect(cyclic2).not.toBe(cyclic); // Was serialized and therefore cloned
+    expect(cyclic2.cycle).toBe(cyclic2);
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('uses the server component debug info as the element owner in DEV', async () => {
+    function Container({children}) {
+      return children;
+    }
+
+    function Greeting({firstName}) {
+      // We can't use JSX here because it'll use the Client React.
+      return ReactServer.createElement(
+        Container,
+        null,
+        ReactServer.createElement('span', null, 'Hello, ', firstName),
+      );
+    }
+
+    const model = {
+      greeting: ReactServer.createElement(Greeting, {firstName: 'Seb'}),
+    };
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      const greeting = rootModel.greeting;
+      // We've rendered down to the span.
+      expect(greeting.type).toBe('span');
+      if (__DEV__) {
+        const greetInfo = {
+          name: 'Greeting',
+          env: 'Server',
+          key: null,
+          stack: '    in Object.<anonymous> (at **)',
+          props: {
+            firstName: 'Seb',
+          },
+        };
+        expect(getDebugInfo(greeting)).toEqual([
+          {time: 12},
+          greetInfo,
+          {time: 13},
+          {
+            name: 'Container',
+            env: 'Server',
+            key: null,
+            owner: greetInfo,
+            stack: '    in Greeting (at **)',
+            props: {
+              children: expect.objectContaining({
+                type: 'span',
+                props: {
+                  children: ['Hello, ', 'Seb'],
+                },
+              }),
+            },
+          },
+          {time: 14},
+        ]);
+        // The owner that created the span was the outer server component.
+        // We expect the debug info to be referentially equal to the owner.
+        expect(greeting._owner).toBe(greeting._debugInfo[1]);
+      } else {
+        expect(greeting._debugInfo).toBe(undefined);
+        expect(greeting._owner).toBe(undefined);
+      }
+      ReactNoop.render(greeting);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb</span>);
+  });
+
+  // @gate __DEV__
+  it('can get the component owner stacks during rendering in dev', () => {
+    let stack;
+
+    function Foo() {
+      return ReactServer.createElement(Bar, null);
+    }
+    function Bar() {
+      return ReactServer.createElement(
+        'div',
+        null,
+        ReactServer.createElement(Baz, null),
+      );
+    }
+
+    function Baz() {
+      stack = ReactServer.captureOwnerStack();
+      return ReactServer.createElement('span', null, 'hi');
+    }
+    ReactNoopFlightServer.render(
+      ReactServer.createElement(
+        'div',
+        null,
+        ReactServer.createElement(Foo, null),
+      ),
+    );
+
+    expect(normalizeCodeLocInfo(stack)).toBe(
+      '\n    in Bar (at **)' + '\n    in Foo (at **)',
+    );
+  });
+
+  // @gate __DEV__
+  it('can track owner for a flight response created in another render', async () => {
+    jest.resetModules();
+    jest.mock('react', () => ReactServer);
+    // For this to work the Flight Client needs to be the react-server version.
+    const ReactNoopFlightClienOnTheServer = require('react-noop-renderer/flight-client');
+    jest.resetModules();
+    jest.mock('react', () => React);
+
+    let stack;
+
+    function Component() {
+      stack = ReactServer.captureOwnerStack();
+      return ReactServer.createElement('span', null, 'hi');
+    }
+
+    const ClientComponent = clientReference(Component);
+
+    function ThirdPartyComponent() {
+      return ReactServer.createElement(ClientComponent);
+    }
+
+    // This is rendered outside the render to ensure we don't inherit anything accidental
+    // by being in the same environment which would make it seem like it works when it doesn't.
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      {children: ReactServer.createElement(ThirdPartyComponent)},
+      {
+        environmentName: 'third-party',
+      },
+    );
+
+    async function fetchThirdParty() {
+      return ReactNoopFlightClienOnTheServer.read(thirdPartyTransport);
+    }
+
+    async function FirstPartyComponent() {
+      // This component fetches from a third party
+      const thirdParty = await fetchThirdParty();
+      return thirdParty.children;
+    }
+    function App() {
+      return ReactServer.createElement(FirstPartyComponent);
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      ReactServer.createElement(App),
+    );
+
+    await act(async () => {
+      const root = await ReactNoopFlightClient.read(transport);
+      ReactNoop.render(root);
+    });
+
+    expect(normalizeCodeLocInfo(stack)).toBe(
+      '\n    in ThirdPartyComponent (at **)' +
+        '\n    in createResponse (at **)' + // These two internal frames should
+        '\n    in read (at **)' + // ideally not be included.
+        '\n    in fetchThirdParty (at **)' +
+        '\n    in FirstPartyComponent (at **)' +
+        '\n    in App (at **)',
+    );
+  });
+
+  // @gate __DEV__
+  it('can get the component owner stacks for onError in dev', async () => {
+    const thrownError = new Error('hi');
+    let caughtError;
+    let ownerStack;
+
+    function Foo() {
+      return ReactServer.createElement(Bar, null);
+    }
+    function Bar() {
+      return ReactServer.createElement(
+        'div',
+        null,
+        ReactServer.createElement(Baz, null),
+      );
+    }
+    function Baz() {
+      throw thrownError;
+    }
+
+    ReactNoopFlightServer.render(
+      ReactServer.createElement(
+        'div',
+        null,
+        ReactServer.createElement(Foo, null),
+      ),
+      {
+        onError(error, errorInfo) {
+          caughtError = error;
+          ownerStack = ReactServer.captureOwnerStack
+            ? ReactServer.captureOwnerStack()
+            : null;
+        },
+      },
+    );
+
+    expect(caughtError).toBe(thrownError);
+    expect(normalizeCodeLocInfo(ownerStack)).toBe(
+      '\n    in Bar (at **)' + '\n    in Foo (at **)',
+    );
+  });
+
+  it('should include only one component stack in replayed logs (if DevTools or polyfill adds them)', () => {
+    class MyError extends Error {
+      toJSON() {
+        return 123;
+      }
+    }
+
+    function Foo() {
+      return ReactServer.createElement('div', null, [
+        'Womp womp: ',
+        new MyError('spaghetti'),
+      ]);
+    }
+
+    function Bar() {
+      const array = [];
+      // Trigger key warning
+      array.push(ReactServer.createElement(Foo));
+      return ReactServer.createElement('div', null, array);
+    }
+
+    function App() {
+      return ReactServer.createElement(Bar);
+    }
+
+    // While we're on the server we need to have the Server version active to track component stacks.
+    jest.resetModules();
+    jest.mock('react', () => ReactServer);
+    const transport = ReactNoopFlightServer.render(
+      ReactServer.createElement(App),
+    );
+
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        ' See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Bar (at **)\n' +
+        '    in App (at **)',
+      'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
+        '  <div>Womp womp: {Error}</div>\n' +
+        '                  ^^^^^^^\n' +
+        '    in Foo (at **)\n' +
+        '    in Bar (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    // Replay logs on the client
+    jest.resetModules();
+    jest.mock('react', () => React);
+    ReactNoopFlightClient.read(transport);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        ' See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Bar (at **)\n' +
+        '    in App (at **)',
+      'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
+        '  <div>Womp womp: {Error}</div>\n' +
+        '                  ^^^^^^^\n' +
+        '    in Foo (at **)\n' +
+        '    in Bar (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('can filter out stack frames of a serialized error in dev', async () => {
+    async function bar() {
+      throw new Error('my-error');
+    }
+
+    async function intermediate() {
+      await bar();
+    }
+
+    async function foo() {
+      await intermediate();
+    }
+
+    const rejectedPromise = foo();
+    const transport = ReactNoopFlightServer.render(
+      {model: rejectedPromise},
+      {
+        onError(x) {
+          return `digest("${x.message}")`;
+        },
+        filterStackFrame(url, functionName, lineNumber, columnNumber) {
+          return functionName !== 'intermediate';
+        },
+      },
+    );
+
+    let originalError;
+    try {
+      await rejectedPromise;
+    } catch (x) {
+      originalError = x;
+    }
+
+    const root = await ReactNoopFlightClient.read(transport);
+    let caughtError;
+    try {
+      await root.model;
+    } catch (x) {
+      caughtError = x;
+    }
+    if (__DEV__) {
+      expect(caughtError.message).toBe(originalError.message);
+      expect(normalizeCodeLocInfo(caughtError.stack)).toContain(
+        '\n    in bar (at **)' + '\n    in foo (at **)',
+      );
+    }
+    expect(normalizeCodeLocInfo(originalError.stack)).toContain(
+      '\n    in bar (at **)' +
+        '\n    in intermediate (at **)' +
+        '\n    in foo (at **)',
+    );
+    expect(caughtError.digest).toBe('digest("my-error")');
+  });
+
+  // @gate __DEV__  && enableComponentPerformanceTrack
+  it('can render deep but cut off JSX in debug info', async () => {
+    function createDeepJSX(n) {
+      if (n <= 0) {
+        return null;
+      }
+      return <div>{createDeepJSX(n - 1)}</div>;
+    }
+
+    function ServerComponent(props) {
+      return <div>not using props</div>;
+    }
+
+    const transport = ReactNoopFlightServer.render({
+      root: (
+        <ServerComponent>
+          {createDeepJSX(100) /* deper than objectLimit */}
+        </ServerComponent>
+      ),
+    });
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      const root = rootModel.root;
+      const children = root._debugInfo[1].props.children;
+      expect(children.type).toBe('div');
+      expect(children.props.children.type).toBe('div');
+      ReactNoop.render(root);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>not using props</div>);
+  });
+
+  // @gate __DEV__ && enableComponentPerformanceTrack
+  it('can render deep but cut off Map/Set in debug info', async () => {
+    function createDeepMap(n) {
+      if (n <= 0) {
+        return null;
+      }
+      const map = new Map();
+      map.set('key', createDeepMap(n - 1));
+      return map;
+    }
+
+    function createDeepSet(n) {
+      if (n <= 0) {
+        return null;
+      }
+      const set = new Set();
+      set.add(createDeepSet(n - 1));
+      return set;
+    }
+
+    function ServerComponent(props) {
+      return <div>not using props</div>;
+    }
+
+    const transport = ReactNoopFlightServer.render({
+      set: (
+        <ServerComponent
+          set={createDeepSet(100) /* deper than objectLimit */}
+        />
+      ),
+      map: (
+        <ServerComponent
+          map={createDeepMap(100) /* deper than objectLimit */}
+        />
+      ),
+    });
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
+      const set = rootModel.set._debugInfo[1].props.set;
+      const map = rootModel.map._debugInfo[1].props.map;
+      expect(set instanceof Set).toBe(true);
+      expect(set.size).toBe(1);
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const entry of set) {
+        expect(entry instanceof Set).toBe(true);
+        break;
+      }
+
+      expect(map instanceof Map).toBe(true);
+      expect(map.size).toBe(1);
+      expect(map.get('key') instanceof Map).toBe(true);
+
+      ReactNoop.render(rootModel.set);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>not using props</div>);
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('produces correct parent stacks', async () => {
+    function Container() {
+      return ReactServer.createElement('div', null);
+    }
+    function ContainerParent() {
+      return ReactServer.createElement(Container, null);
+    }
+    function App() {
+      return ReactServer.createElement(
+        'main',
+        null,
+        ReactServer.createElement(ContainerParent, null),
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render({
+      root: ReactServer.createElement(App, null),
+    });
+
+    await act(async () => {
+      const {root} = await ReactNoopFlightClient.read(transport);
+
+      ReactNoop.render(root);
+
+      expect(root.type).toBe('main');
+      if (__DEV__) {
+        const div = root.props.children;
+        expect(getDebugInfo(div)).toEqual([
+          {
+            time: 14,
+          },
+          {
+            env: 'Server',
+            key: null,
+            name: 'ContainerParent',
+            owner: {
+              env: 'Server',
+              key: null,
+              name: 'App',
+              props: {},
+              stack: '    in Object.<anonymous> (at **)',
+            },
+            props: {},
+            stack: '    in App (at **)',
+          },
+          {
+            time: 15,
+          },
+          {
+            env: 'Server',
+            key: null,
+            name: 'Container',
+            owner: {
+              env: 'Server',
+              key: null,
+              name: 'ContainerParent',
+              owner: {
+                env: 'Server',
+                key: null,
+                name: 'App',
+                props: {},
+                stack: '    in Object.<anonymous> (at **)',
+              },
+              props: {},
+              stack: '    in App (at **)',
+            },
+            props: {},
+            stack: '    in ContainerParent (at **)',
+          },
+          {
+            time: 16,
+          },
+        ]);
+        expect(getDebugInfo(root)).toEqual([
+          {
+            time: 12,
+          },
+          {
+            env: 'Server',
+            key: null,
+            name: 'App',
+            props: {},
+            stack: '    in Object.<anonymous> (at **)',
+          },
+          {
+            time: 13,
+          },
+        ]);
+      } else {
+        expect(root._debugInfo).toBe(undefined);
+        expect(root._owner).toBe(undefined);
+      }
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <main>
+        <div />
+      </main>,
+    );
+  });
+
+  // @gate enableOptimisticKey
+  it('collapses optimistic keys to an optimistic key', async () => {
+    function Bar({text}) {
+      return <div />;
+    }
+    function Foo() {
+      return <Bar key={ReactServer.optimisticKey} />;
+    }
+    const transport = ReactNoopFlightServer.render({
+      element: <Foo key="Outer Key" />,
+    });
+    const model = await ReactNoopFlightClient.read(transport);
+    expect(model.element.key).toBe(React.optimisticKey);
+  });
+});
diff --git a/packages/react-client/src/__tests__/ReactFlightDebugChannel-test.js b/packages/react-client/src/__tests__/ReactFlightDebugChannel-test.js
new file mode 100644
index 00000000000..6d691692614
--- /dev/null
+++ b/packages/react-client/src/__tests__/ReactFlightDebugChannel-test.js
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (typeof Blob === 'undefined') {
+  global.Blob = require('buffer').Blob;
+}
+if (typeof File === 'undefined' || typeof FormData === 'undefined') {
+  global.File = require('undici').File;
+  global.FormData = require('undici').FormData;
+}
+
+let act;
+let React;
+let ReactNoop;
+let ReactNoopFlightServer;
+let ReactNoopFlightClient;
+let getDebugInfo;
+
+describe('ReactFlight', () => {
+  beforeEach(() => {
+    // Mock performance.now for timing tests
+    let time = 10;
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    // This stores the state so we need to preserve it
+    const flightModules = require('react-noop-renderer/flight-modules');
+    jest.resetModules();
+    __unmockReact();
+    jest.mock('react-noop-renderer/flight-modules', () => flightModules);
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    act = require('internal-test-utils').act;
+
+    getDebugInfo = require('internal-test-utils').getDebugInfo.bind(null, {
+      useV8Stack: true,
+      ignoreRscStreamInfo: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // @gate __DEV__ && enableComponentPerformanceTrack
+  it('can render deep but cut off JSX in debug info', async () => {
+    function createDeepJSX(n) {
+      if (n <= 0) {
+        return null;
+      }
+      return <div>{createDeepJSX(n - 1)}</div>;
+    }
+
+    function ServerComponent(props) {
+      return <div>not using props</div>;
+    }
+
+    const debugChannel = {onMessage(message) {}};
+
+    const transport = ReactNoopFlightServer.render(
+      {
+        root: (
+          <ServerComponent>
+            {createDeepJSX(100) /* deper than objectLimit */}
+          </ServerComponent>
+        ),
+      },
+      {debugChannel},
+    );
+
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport, {
+        debugChannel,
+      });
+      const root = rootModel.root;
+      const children = getDebugInfo(root)[1].props.children;
+      expect(children.type).toBe('div');
+      expect(children.props.children.type).toBe('div');
+      ReactNoop.render(root);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>not using props</div>);
+  });
+});
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.custom.js b/packages/react-client/src/forks/ReactFlightClientConfig.custom.js
new file mode 100644
index 00000000000..a6c0c933d2a
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.custom.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 const $$$config: any;
+
+export opaque type ModuleLoading = mixed;
+export opaque type ServerConsumerModuleMap = mixed;
+export opaque type ServerManifest = mixed;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference = $$$config.resolveClientReference;
+export const resolveServerReference = $$$config.resolveServerReference;
+export const preloadModule = $$$config.preloadModule;
+export const requireModule = $$$config.requireModule;
+export const getModuleDebugInfo = $$$config.getModuleDebugInfo;
+export const dispatchHint = $$$config.dispatchHint;
+export const prepareDestinationForModule =
+  $$$config.prepareDestinationForModule;
+export const usedWithSSR = true;
+
+export opaque type Source = mixed;
+
+export opaque type StringDecoder = mixed;
+
+export const createStringDecoder = $$$config.createStringDecoder;
+export const readPartialStringChunk = $$$config.readPartialStringChunk;
+export const readFinalStringChunk = $$$config.readFinalStringChunk;
+
+export const bindToConsole = $$$config.bindToConsole;
+
+export const rendererVersion = $$$config.rendererVersion;
+export const rendererPackageName = $$$config.rendererPackageName;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
new file mode 100644
index 00000000000..dbc89a2677d
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-esm';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js
new file mode 100644
index 00000000000..89b834784f0
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-parcel';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel';
+export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelBrowser';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
new file mode 100644
index 00000000000..6a071981be9
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-turbopack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
new file mode 100644
index 00000000000..73d27adefa8
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
new file mode 100644
index 00000000000..24caf0df88f
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-bun';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+
+export opaque type ModuleLoading = mixed;
+export opaque type ServerConsumerModuleMap = mixed;
+export opaque type ServerManifest = mixed;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference: any = null;
+export const resolveServerReference: any = null;
+export const preloadModule: any = null;
+export const requireModule: any = null;
+export const getModuleDebugInfo: any = null;
+export const prepareDestinationForModule: any = null;
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-parcel.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-parcel.js
new file mode 100644
index 00000000000..626f26903ed
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-parcel.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-parcel';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel';
+export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
new file mode 100644
index 00000000000..fbdb9fc683a
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-turbopack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
new file mode 100644
index 00000000000..f328a3e2ed7
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
new file mode 100644
index 00000000000..0f7381fc5a3
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'not-used';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+
+export type Response = any;
+export opaque type ModuleLoading = mixed;
+export opaque type ServerConsumerModuleMap = mixed;
+export opaque type ServerManifest = mixed;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference: any = null;
+export const resolveServerReference: any = null;
+export const preloadModule: any = null;
+export const requireModule: any = null;
+export const getModuleDebugInfo: any = null;
+export const dispatchHint: any = null;
+export const prepareDestinationForModule: any = null;
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
new file mode 100644
index 00000000000..8cb512ea44a
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-esm';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigNode';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-parcel.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-parcel.js
new file mode 100644
index 00000000000..466d21164cc
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-parcel.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-parcel';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigNode';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel';
+export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
new file mode 100644
index 00000000000..ec97d45077b
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-turbopack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigNode';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-unbundled.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-unbundled.js
new file mode 100644
index 00000000000..c95a3ba07f5
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-unbundled.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-unbundled';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigNode';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-unbundled/src/client/ReactFlightClientConfigBundlerNode';
+export * from 'react-server-dom-unbundled/src/client/ReactFlightClientConfigTargetNodeServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
new file mode 100644
index 00000000000..9840d5bc911
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-server-dom-webpack';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigNode';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.markup.js b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
new file mode 100644
index 00000000000..fcd67245044
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-markup';
+
+import type {Thenable} from 'shared/ReactTypes';
+
+export * from 'react-markup/src/ReactMarkupLegacyClientStreamConfig.js';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
+
+export type ModuleLoading = null;
+export type ServerConsumerModuleMap = null;
+export opaque type ServerManifest = null;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = null;
+export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars
+
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  throw new Error(
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: ServerConsumerModuleMap,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  throw new Error(
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export function resolveServerReference<T>(
+  config: ServerManifest,
+  id: ServerReferenceId,
+): ClientReference<T> {
+  throw new Error(
+    'renderToHTML should not have emitted Server References. This is a bug in React.',
+  );
+}
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<T> {
+  return null;
+}
+
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  throw new Error(
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export function getModuleDebugInfo<T>(metadata: ClientReference<T>): null {
+  throw new Error(
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export const usedWithSSR = true;
+
+type HintCode = string;
+type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars
+
+export function dispatchHint<Code: HintCode>(
+  code: Code,
+  model: HintModel<Code>,
+): void {
+  // Should never happen.
+}
+
+export function preinitModuleForSSR(
+  href: string,
+  nonce: ?string,
+  crossOrigin: ?string,
+) {
+  // Should never happen.
+}
+
+export function preinitScriptForSSR(
+  href: string,
+  nonce: ?string,
+  crossOrigin: ?string,
+) {
+  // Should never happen.
+}
diff --git a/packages/react-debug-tools/README.md b/packages/react-debug-tools/README.md
new file mode 100644
index 00000000000..5d8c0ac8729
--- /dev/null
+++ b/packages/react-debug-tools/README.md
@@ -0,0 +1,7 @@
+# react-debug-tools
+
+This is an experimental package for debugging React 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-debug-tools/index.js b/packages/react-debug-tools/index.js
new file mode 100644
index 00000000000..94fc8103fb0
--- /dev/null
+++ b/packages/react-debug-tools/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './src/ReactDebugTools';
diff --git a/packages/react-debug-tools/npm/index.js b/packages/react-debug-tools/npm/index.js
new file mode 100644
index 00000000000..d1b6699df97
--- /dev/null
+++ b/packages/react-debug-tools/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-debug-tools.production.js');
+} else {
+  module.exports = require('./cjs/react-debug-tools.development.js');
+}
diff --git a/packages/react-debug-tools/package.json b/packages/react-debug-tools/package.json
new file mode 100644
index 00000000000..dcd5e888ff9
--- /dev/null
+++ b/packages/react-debug-tools/package.json
@@ -0,0 +1,33 @@
+{
+  "private": true,
+  "name": "react-debug-tools",
+  "description": "React package for debugging React trees.",
+  "version": "0.16.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "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-debug-tools"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0"
+  },
+  "dependencies": {
+    "error-stack-parser": "^2.1.4"
+  }
+}
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
new file mode 100644
index 00000000000..b4eb6c2b596
--- /dev/null
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -0,0 +1,1394 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {StackFrame as ParsedStackFrame} from 'error-stack-parser';
+import type {
+  Awaited,
+  ReactContext,
+  StartTransitionOptions,
+  Usable,
+  Thenable,
+  ReactDebugInfo,
+} from 'shared/ReactTypes';
+import type {
+  ContextDependency,
+  Dependencies,
+  Fiber,
+  Dispatcher as DispatcherType,
+} from 'react-reconciler/src/ReactInternalTypes';
+import type {TransitionStatus} from 'react-reconciler/src/ReactFiberConfig';
+
+import ErrorStackParser from 'error-stack-parser';
+import assign from 'shared/assign';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  FunctionComponent,
+  SimpleMemoComponent,
+  ContextProvider,
+  ForwardRef,
+} from 'react-reconciler/src/ReactWorkTags';
+import {
+  REACT_MEMO_CACHE_SENTINEL,
+  REACT_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+type CurrentDispatcherRef = typeof ReactSharedInternals;
+
+// Used to track hooks called during a render
+
+type HookLogEntry = {
+  displayName: string | null,
+  primitive: string,
+  stackError: Error,
+  value: mixed,
+  debugInfo: ReactDebugInfo | null,
+  dispatcherHookName: string,
+};
+
+let hookLog: Array<HookLogEntry> = [];
+
+// Primitives
+
+type BasicStateAction<S> = (S => S) | S;
+
+type Dispatch<A> = A => void;
+
+let primitiveStackCache: null | Map<string, Array<any>> = null;
+
+type Hook = {
+  memoizedState: any,
+  next: Hook | null,
+};
+
+function getPrimitiveStackCache(): Map<string, Array<any>> {
+  // This initializes a cache of all primitive hooks so that the top
+  // most stack frames added by calling the primitive hook can be removed.
+  if (primitiveStackCache === null) {
+    const cache = new Map<string, Array<any>>();
+    let readHookLog;
+    try {
+      // Use all hooks here to add them to the hook log.
+      Dispatcher.useContext(({_currentValue: null}: any));
+      Dispatcher.useState(null);
+      Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
+      Dispatcher.useRef(null);
+      if (typeof Dispatcher.useCacheRefresh === 'function') {
+        // This type check is for Flow only.
+        Dispatcher.useCacheRefresh();
+      }
+      Dispatcher.useLayoutEffect(() => {});
+      Dispatcher.useInsertionEffect(() => {});
+      Dispatcher.useEffect(() => {});
+      Dispatcher.useImperativeHandle(undefined, () => null);
+      Dispatcher.useDebugValue(null);
+      Dispatcher.useCallback(() => {});
+      Dispatcher.useTransition();
+      Dispatcher.useSyncExternalStore(
+        () => () => {},
+        () => null,
+        () => null,
+      );
+      Dispatcher.useDeferredValue(null);
+      Dispatcher.useMemo(() => null);
+      Dispatcher.useOptimistic(null, (s: mixed, a: mixed) => s);
+      Dispatcher.useFormState((s: mixed, p: mixed) => s, null);
+      Dispatcher.useActionState((s: mixed, p: mixed) => s, null);
+      Dispatcher.useHostTransitionStatus();
+      if (typeof Dispatcher.useMemoCache === 'function') {
+        // This type check is for Flow only.
+        Dispatcher.useMemoCache(0);
+      }
+      if (typeof Dispatcher.use === 'function') {
+        // This type check is for Flow only.
+        Dispatcher.use(
+          ({
+            $$typeof: REACT_CONTEXT_TYPE,
+            _currentValue: null,
+          }: any),
+        );
+        Dispatcher.use({
+          then() {},
+          status: 'fulfilled',
+          value: null,
+        });
+        try {
+          Dispatcher.use(
+            ({
+              then() {},
+            }: any),
+          );
+        } catch (x) {}
+      }
+
+      Dispatcher.useId();
+
+      if (typeof Dispatcher.useEffectEvent === 'function') {
+        Dispatcher.useEffectEvent((args: empty) => {});
+      }
+    } finally {
+      readHookLog = hookLog;
+      hookLog = [];
+    }
+    for (let i = 0; i < readHookLog.length; i++) {
+      const hook = readHookLog[i];
+      cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));
+    }
+    primitiveStackCache = cache;
+  }
+  return primitiveStackCache;
+}
+
+let currentFiber: null | Fiber = null;
+let currentHook: null | Hook = null;
+let currentContextDependency: null | ContextDependency<mixed> = null;
+let currentThenableIndex: number = 0;
+let currentThenableState: null | Array<Thenable<mixed>> = null;
+
+function nextHook(): null | Hook {
+  const hook = currentHook;
+  if (hook !== null) {
+    currentHook = hook.next;
+  }
+  return hook;
+}
+
+function readContext<T>(context: ReactContext<T>): T {
+  if (currentFiber === null) {
+    // Hook inspection without access to the Fiber tree
+    // e.g. when warming up the primitive stack cache or during `ReactDebugTools.inspectHooks()`.
+    return context._currentValue;
+  } else {
+    if (currentContextDependency === null) {
+      throw new Error(
+        'Context reads do not line up with context dependencies. This is a bug in React Debug Tools.',
+      );
+    }
+
+    let value: T;
+    // For now we don't expose readContext usage in the hooks debugging info.
+    if (hasOwnProperty.call(currentContextDependency, 'memoizedValue')) {
+      // $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`
+      value = ((currentContextDependency.memoizedValue: any): T);
+
+      // $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`
+      currentContextDependency = currentContextDependency.next;
+    } else {
+      // Before React 18, we did not have `memoizedValue` so we rely on `setupContexts` in those versions.
+      // Multiple reads of the same context were also only tracked as a single dependency.
+      // We just give up on advancing context dependencies and solely rely on `setupContexts`.
+      value = context._currentValue;
+    }
+
+    return value;
+  }
+}
+
+const SuspenseException: mixed = new Error(
+  "Suspense Exception: This is not a real error! It's an implementation " +
+    'detail of `use` to interrupt the current render. You must either ' +
+    'rethrow it immediately, or move the `use` call outside of the ' +
+    '`try/catch` block. Capturing without rethrowing will lead to ' +
+    'unexpected behavior.\n\n' +
+    'To handle async errors, wrap your component in an error boundary, or ' +
+    "call the promise's `.catch` method and pass the result to `use`.",
+);
+
+function use<T>(usable: Usable<T>): T {
+  if (usable !== null && typeof usable === 'object') {
+    // $FlowFixMe[method-unbinding]
+    if (typeof usable.then === 'function') {
+      const thenable: Thenable<any> =
+        // If we have thenable state, then the actually used thenable will be the one
+        // stashed in it. It's possible for uncached Promises to be new each render
+        // and in that case the one we're inspecting is the in the thenable state.
+        currentThenableState !== null &&
+        currentThenableIndex < currentThenableState.length
+          ? currentThenableState[currentThenableIndex++]
+          : (usable: any);
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          hookLog.push({
+            displayName: null,
+            primitive: 'Promise',
+            stackError: new Error(),
+            value: fulfilledValue,
+            debugInfo:
+              thenable._debugInfo === undefined ? null : thenable._debugInfo,
+            dispatcherHookName: 'Use',
+          });
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+      }
+      // If this was an uncached Promise we have to abandon this attempt
+      // but we can still emit anything up until this point.
+      hookLog.push({
+        displayName: null,
+        primitive: 'Unresolved',
+        stackError: new Error(),
+        value: thenable,
+        debugInfo:
+          thenable._debugInfo === undefined ? null : thenable._debugInfo,
+        dispatcherHookName: 'Use',
+      });
+      throw SuspenseException;
+    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
+      const context: ReactContext<T> = (usable: any);
+      const value = readContext(context);
+
+      hookLog.push({
+        displayName: context.displayName || 'Context',
+        primitive: 'Context (use)',
+        stackError: new Error(),
+        value,
+        debugInfo: null,
+        dispatcherHookName: 'Use',
+      });
+
+      return value;
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
+
+function useContext<T>(context: ReactContext<T>): T {
+  const value = readContext(context);
+  hookLog.push({
+    displayName: context.displayName || null,
+    primitive: 'Context',
+    stackError: new Error(),
+    value: value,
+    debugInfo: null,
+    dispatcherHookName: 'Context',
+  });
+  return value;
+}
+
+function useState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  const hook = nextHook();
+  const state: S =
+    hook !== null
+      ? hook.memoizedState
+      : typeof initialState === 'function'
+        ? // $FlowFixMe[incompatible-use]: Flow doesn't like mixed types
+          initialState()
+        : initialState;
+  hookLog.push({
+    displayName: null,
+    primitive: 'State',
+    stackError: new Error(),
+    value: state,
+    debugInfo: null,
+    dispatcherHookName: 'State',
+  });
+  return [state, (action: BasicStateAction<S>) => {}];
+}
+
+function useReducer<S, I, A>(
+  reducer: (S, A) => S,
+  initialArg: I,
+  init?: I => S,
+): [S, Dispatch<A>] {
+  const hook = nextHook();
+  let state;
+  if (hook !== null) {
+    state = hook.memoizedState;
+  } else {
+    state = init !== undefined ? init(initialArg) : ((initialArg: any): S);
+  }
+  hookLog.push({
+    displayName: null,
+    primitive: 'Reducer',
+    stackError: new Error(),
+    value: state,
+    debugInfo: null,
+    dispatcherHookName: 'Reducer',
+  });
+  return [state, (action: A) => {}];
+}
+
+function useRef<T>(initialValue: T): {current: T} {
+  const hook = nextHook();
+  const ref = hook !== null ? hook.memoizedState : {current: initialValue};
+  hookLog.push({
+    displayName: null,
+    primitive: 'Ref',
+    stackError: new Error(),
+    value: ref.current,
+    debugInfo: null,
+    dispatcherHookName: 'Ref',
+  });
+  return ref;
+}
+
+function useCacheRefresh(): () => void {
+  const hook = nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'CacheRefresh',
+    stackError: new Error(),
+    value: hook !== null ? hook.memoizedState : function refresh() {},
+    debugInfo: null,
+    dispatcherHookName: 'CacheRefresh',
+  });
+  return () => {};
+}
+
+function useLayoutEffect(
+  create: () => (() => void) | void,
+  inputs: Array<mixed> | void | null,
+): void {
+  nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'LayoutEffect',
+    stackError: new Error(),
+    value: create,
+    debugInfo: null,
+    dispatcherHookName: 'LayoutEffect',
+  });
+}
+
+function useInsertionEffect(
+  create: () => mixed,
+  inputs: Array<mixed> | void | null,
+): void {
+  nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'InsertionEffect',
+    stackError: new Error(),
+    value: create,
+    debugInfo: null,
+    dispatcherHookName: 'InsertionEffect',
+  });
+}
+
+function useEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'Effect',
+    stackError: new Error(),
+    value: create,
+    debugInfo: null,
+    dispatcherHookName: 'Effect',
+  });
+}
+
+function useImperativeHandle<T>(
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  create: () => T,
+  inputs: Array<mixed> | void | null,
+): void {
+  nextHook();
+  // We don't actually store the instance anywhere if there is no ref callback
+  // and if there is a ref callback it might not store it but if it does we
+  // have no way of knowing where. So let's only enable introspection of the
+  // ref itself if it is using the object form.
+  let instance: ?T = undefined;
+  if (ref !== null && typeof ref === 'object') {
+    instance = ref.current;
+  }
+  hookLog.push({
+    displayName: null,
+    primitive: 'ImperativeHandle',
+    stackError: new Error(),
+    value: instance,
+    debugInfo: null,
+    dispatcherHookName: 'ImperativeHandle',
+  });
+}
+
+function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
+  hookLog.push({
+    displayName: null,
+    primitive: 'DebugValue',
+    stackError: new Error(),
+    value: typeof formatterFn === 'function' ? formatterFn(value) : value,
+    debugInfo: null,
+    dispatcherHookName: 'DebugValue',
+  });
+}
+
+function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
+  const hook = nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'Callback',
+    stackError: new Error(),
+    value: hook !== null ? hook.memoizedState[0] : callback,
+    debugInfo: null,
+    dispatcherHookName: 'Callback',
+  });
+  return callback;
+}
+
+function useMemo<T>(
+  nextCreate: () => T,
+  inputs: Array<mixed> | void | null,
+): T {
+  const hook = nextHook();
+  const value = hook !== null ? hook.memoizedState[0] : nextCreate();
+  hookLog.push({
+    displayName: null,
+    primitive: 'Memo',
+    stackError: new Error(),
+    value,
+    debugInfo: null,
+    dispatcherHookName: 'Memo',
+  });
+  return value;
+}
+
+function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  // useSyncExternalStore() composes multiple hooks internally.
+  // Advance the current hook index the same number of times
+  // so that subsequent hooks have the right memoized state.
+  const hook = nextHook(); // SyncExternalStore
+  nextHook(); // Effect
+  // Read from hook.memoizedState to get the value that was used during render,
+  // not the current value from getSnapshot() which may have changed.
+  const value = hook !== null ? hook.memoizedState : getSnapshot();
+  hookLog.push({
+    displayName: null,
+    primitive: 'SyncExternalStore',
+    stackError: new Error(),
+    value,
+    debugInfo: null,
+    dispatcherHookName: 'SyncExternalStore',
+  });
+  return value;
+}
+
+function useTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
+  // useTransition() composes multiple hooks internally.
+  // Advance the current hook index the same number of times
+  // so that subsequent hooks have the right memoized state.
+  const stateHook = nextHook();
+  nextHook(); // Callback
+
+  const isPending = stateHook !== null ? stateHook.memoizedState : false;
+
+  hookLog.push({
+    displayName: null,
+    primitive: 'Transition',
+    stackError: new Error(),
+    value: isPending,
+    debugInfo: null,
+    dispatcherHookName: 'Transition',
+  });
+  return [isPending, () => {}];
+}
+
+function useDeferredValue<T>(value: T, initialValue?: T): T {
+  const hook = nextHook();
+  const prevValue = hook !== null ? hook.memoizedState : value;
+  hookLog.push({
+    displayName: null,
+    primitive: 'DeferredValue',
+    stackError: new Error(),
+    value: prevValue,
+    debugInfo: null,
+    dispatcherHookName: 'DeferredValue',
+  });
+  return prevValue;
+}
+
+function useId(): string {
+  const hook = nextHook();
+  const id = hook !== null ? hook.memoizedState : '';
+  hookLog.push({
+    displayName: null,
+    primitive: 'Id',
+    stackError: new Error(),
+    value: id,
+    debugInfo: null,
+    dispatcherHookName: 'Id',
+  });
+  return id;
+}
+
+// useMemoCache is an implementation detail of Forget's memoization
+// it should not be called directly in user-generated code
+function useMemoCache(size: number): Array<mixed> {
+  const fiber = currentFiber;
+  // Don't throw, in case this is called from getPrimitiveStackCache
+  if (fiber == null) {
+    return [];
+  }
+
+  const memoCache =
+    // $FlowFixMe[incompatible-use]: updateQueue is mixed
+    fiber.updateQueue != null ? fiber.updateQueue.memoCache : null;
+  if (memoCache == null) {
+    return [];
+  }
+
+  let data = memoCache.data[memoCache.index];
+  if (data === undefined) {
+    data = memoCache.data[memoCache.index] = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_MEMO_CACHE_SENTINEL;
+    }
+  }
+
+  // We don't write anything to hookLog on purpose, so this hook remains invisible to users.
+
+  memoCache.index++;
+  return data;
+}
+
+function useOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  const hook = nextHook();
+  let state;
+  if (hook !== null) {
+    state = hook.memoizedState;
+  } else {
+    state = passthrough;
+  }
+  hookLog.push({
+    displayName: null,
+    primitive: 'Optimistic',
+    stackError: new Error(),
+    value: state,
+    debugInfo: null,
+    dispatcherHookName: 'Optimistic',
+  });
+  return [state, (action: A) => {}];
+}
+
+function useFormState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  const hook = nextHook(); // FormState
+  nextHook(); // PendingState
+  nextHook(); // ActionQueue
+  const stackError = new Error();
+  let value;
+  let debugInfo = null;
+  let error = null;
+
+  if (hook !== null) {
+    const actionResult = hook.memoizedState;
+    if (
+      typeof actionResult === 'object' &&
+      actionResult !== null &&
+      // $FlowFixMe[method-unbinding]
+      typeof actionResult.then === 'function'
+    ) {
+      const thenable: Thenable<Awaited<S>> = (actionResult: any);
+      switch (thenable.status) {
+        case 'fulfilled': {
+          value = thenable.value;
+          debugInfo =
+            thenable._debugInfo === undefined ? null : thenable._debugInfo;
+          break;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          error = rejectedError;
+          break;
+        }
+        default:
+          // If this was an uncached Promise we have to abandon this attempt
+          // but we can still emit anything up until this point.
+          error = SuspenseException;
+          debugInfo =
+            thenable._debugInfo === undefined ? null : thenable._debugInfo;
+          value = thenable;
+      }
+    } else {
+      value = (actionResult: any);
+    }
+  } else {
+    value = initialState;
+  }
+
+  hookLog.push({
+    displayName: null,
+    primitive: 'FormState',
+    stackError: stackError,
+    value: value,
+    debugInfo: debugInfo,
+    dispatcherHookName: 'FormState',
+  });
+
+  if (error !== null) {
+    throw error;
+  }
+
+  // value being a Thenable is equivalent to error being not null
+  // i.e. we only reach this point with Awaited<S>
+  const state = ((value: any): Awaited<S>);
+
+  // TODO: support displaying pending value
+  return [state, (payload: P) => {}, false];
+}
+
+function useActionState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  const hook = nextHook(); // FormState
+  nextHook(); // PendingState
+  nextHook(); // ActionQueue
+  const stackError = new Error();
+  let value;
+  let debugInfo = null;
+  let error = null;
+
+  if (hook !== null) {
+    const actionResult = hook.memoizedState;
+    if (
+      typeof actionResult === 'object' &&
+      actionResult !== null &&
+      // $FlowFixMe[method-unbinding]
+      typeof actionResult.then === 'function'
+    ) {
+      const thenable: Thenable<Awaited<S>> = (actionResult: any);
+      switch (thenable.status) {
+        case 'fulfilled': {
+          value = thenable.value;
+          debugInfo =
+            thenable._debugInfo === undefined ? null : thenable._debugInfo;
+          break;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          error = rejectedError;
+          break;
+        }
+        default:
+          // If this was an uncached Promise we have to abandon this attempt
+          // but we can still emit anything up until this point.
+          error = SuspenseException;
+          debugInfo =
+            thenable._debugInfo === undefined ? null : thenable._debugInfo;
+          value = thenable;
+      }
+    } else {
+      value = (actionResult: any);
+    }
+  } else {
+    value = initialState;
+  }
+
+  hookLog.push({
+    displayName: null,
+    primitive: 'ActionState',
+    stackError: stackError,
+    value: value,
+    debugInfo: debugInfo,
+    dispatcherHookName: 'ActionState',
+  });
+
+  if (error !== null) {
+    throw error;
+  }
+
+  // value being a Thenable is equivalent to error being not null
+  // i.e. we only reach this point with Awaited<S>
+  const state = ((value: any): Awaited<S>);
+
+  // TODO: support displaying pending value
+  return [state, (payload: P) => {}, false];
+}
+
+function useHostTransitionStatus(): TransitionStatus {
+  const status = readContext<TransitionStatus>(
+    // $FlowFixMe[prop-missing] `readContext` only needs _currentValue
+    ({
+      // $FlowFixMe[incompatible-cast] TODO: Incorrect bottom value without access to Fiber config.
+      _currentValue: null,
+    }: ReactContext<TransitionStatus>),
+  );
+
+  hookLog.push({
+    displayName: null,
+    primitive: 'HostTransitionStatus',
+    stackError: new Error(),
+    value: status,
+    debugInfo: null,
+    dispatcherHookName: 'HostTransitionStatus',
+  });
+
+  return status;
+}
+
+function useEffectEvent<Args, F: (...Array<Args>) => mixed>(callback: F): F {
+  nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'EffectEvent',
+    stackError: new Error(),
+    value: callback,
+    debugInfo: null,
+    dispatcherHookName: 'EffectEvent',
+  });
+
+  return callback;
+}
+
+const Dispatcher: DispatcherType = {
+  readContext,
+
+  use,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useInsertionEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  useDebugValue,
+  useDeferredValue,
+  useTransition,
+  useSyncExternalStore,
+  useId,
+  useHostTransitionStatus,
+  useFormState,
+  useActionState,
+  useOptimistic,
+  useMemoCache,
+  useCacheRefresh,
+  useEffectEvent,
+};
+
+// create a proxy to throw a custom error
+// in case future versions of React adds more hooks
+const DispatcherProxyHandler: Proxy$traps<DispatcherType> = {
+  get(target: DispatcherType, prop: string) {
+    if (target.hasOwnProperty(prop)) {
+      // $FlowFixMe[invalid-computed-prop]
+      return target[prop];
+    }
+    const error = new Error('Missing method in Dispatcher: ' + prop);
+    // Note: This error name needs to stay in sync with react-devtools-shared
+    // TODO: refactor this if we ever combine the devtools and debug tools packages
+    error.name = 'ReactDebugToolsUnsupportedHookError';
+    throw error;
+  },
+};
+
+// `Proxy` may not exist on some platforms
+const DispatcherProxy =
+  typeof Proxy === 'undefined'
+    ? Dispatcher
+    : new Proxy(Dispatcher, DispatcherProxyHandler);
+
+// Inspect
+
+export type HookSource = {
+  lineNumber: number | null,
+  columnNumber: number | null,
+  fileName: string | null,
+  functionName: string | null,
+};
+
+export type HooksNode = {
+  id: number | null,
+  isStateEditable: boolean,
+  name: string,
+  value: mixed,
+  subHooks: Array<HooksNode>,
+  debugInfo: null | ReactDebugInfo,
+  hookSource: null | HookSource,
+};
+export type HooksTree = Array<HooksNode>;
+
+// Don't assume
+//
+// We can't assume that stack frames are nth steps away from anything.
+// E.g. we can't assume that the root call shares all frames with the stack
+// of a hook call. A simple way to demonstrate this is wrapping `new Error()`
+// in a wrapper constructor like a polyfill. That'll add an extra frame.
+// Similar things can happen with the call to the dispatcher. The top frame
+// may not be the primitive.
+//
+// We also can't assume that the last frame of the root call is the same
+// frame as the last frame of the hook call because long stack traces can be
+// truncated to a stack trace limit.
+
+let mostLikelyAncestorIndex = 0;
+
+function findSharedIndex(
+  hookStack: ParsedStackFrame[],
+  rootStack: ParsedStackFrame[],
+  rootIndex: number,
+) {
+  const source = rootStack[rootIndex].source;
+  hookSearch: for (let i = 0; i < hookStack.length; i++) {
+    if (hookStack[i].source === source) {
+      // This looks like a match. Validate that the rest of both stack match up.
+      for (
+        let a = rootIndex + 1, b = i + 1;
+        a < rootStack.length && b < hookStack.length;
+        a++, b++
+      ) {
+        if (hookStack[b].source !== rootStack[a].source) {
+          // If not, give up and try a different match.
+          continue hookSearch;
+        }
+      }
+      return i;
+    }
+  }
+  return -1;
+}
+
+function findCommonAncestorIndex(
+  rootStack: ParsedStackFrame[],
+  hookStack: ParsedStackFrame[],
+) {
+  let rootIndex = findSharedIndex(
+    hookStack,
+    rootStack,
+    mostLikelyAncestorIndex,
+  );
+  if (rootIndex !== -1) {
+    return rootIndex;
+  }
+  // If the most likely one wasn't a hit, try any other frame to see if it is shared.
+  // If that takes more than 5 frames, something probably went wrong.
+  for (let i = 0; i < rootStack.length && i < 5; i++) {
+    rootIndex = findSharedIndex(hookStack, rootStack, i);
+    if (rootIndex !== -1) {
+      mostLikelyAncestorIndex = i;
+      return rootIndex;
+    }
+  }
+  return -1;
+}
+
+function isReactWrapper(functionName: void | string, wrapperName: string) {
+  const hookName = parseHookName(functionName);
+  if (wrapperName === 'HostTransitionStatus') {
+    return hookName === wrapperName || hookName === 'FormStatus';
+  }
+
+  return hookName === wrapperName;
+}
+
+function findPrimitiveIndex(hookStack: ParsedStackFrame[], hook: HookLogEntry) {
+  const stackCache = getPrimitiveStackCache();
+  const primitiveStack = stackCache.get(hook.primitive);
+  if (primitiveStack === undefined) {
+    return -1;
+  }
+  for (let i = 0; i < primitiveStack.length && i < hookStack.length; i++) {
+    // Note: there is no guarantee that we will find the top-most primitive frame in the stack
+    // For React Native (uses Hermes), these source fields will be identical and skipped
+    if (primitiveStack[i].source !== hookStack[i].source) {
+      // If the next two frames are functions called `useX` then we assume that they're part of the
+      // wrappers that the React package or other packages adds around the dispatcher.
+      if (
+        i < hookStack.length - 1 &&
+        isReactWrapper(hookStack[i].functionName, hook.dispatcherHookName)
+      ) {
+        i++;
+      }
+      if (
+        i < hookStack.length - 1 &&
+        isReactWrapper(hookStack[i].functionName, hook.dispatcherHookName)
+      ) {
+        i++;
+      }
+
+      return i;
+    }
+  }
+  return -1;
+}
+
+function parseTrimmedStack(rootStack: ParsedStackFrame[], hook: HookLogEntry) {
+  // Get the stack trace between the primitive hook function and
+  // the root function call. I.e. the stack frames of custom hooks.
+  const hookStack = ErrorStackParser.parse(hook.stackError);
+  const rootIndex = findCommonAncestorIndex(rootStack, hookStack);
+  const primitiveIndex = findPrimitiveIndex(hookStack, hook);
+  if (
+    rootIndex === -1 ||
+    primitiveIndex === -1 ||
+    rootIndex - primitiveIndex < 2
+  ) {
+    if (primitiveIndex === -1) {
+      // Something went wrong. Give up.
+      return [null, null];
+    } else {
+      return [hookStack[primitiveIndex - 1], null];
+    }
+  }
+  return [
+    hookStack[primitiveIndex - 1],
+    hookStack.slice(primitiveIndex, rootIndex - 1),
+  ];
+}
+
+function parseHookName(functionName: void | string): string {
+  if (!functionName) {
+    return '';
+  }
+  let startIndex = functionName.lastIndexOf('[as ');
+
+  if (startIndex !== -1) {
+    // Workaround for sourcemaps in Jest and Chrome.
+    // In `node --enable-source-maps`, we don't see "Object.useHostTransitionStatus [as useFormStatus]" but "Object.useFormStatus"
+    // "Object.useHostTransitionStatus [as useFormStatus]" -> "useFormStatus"
+    return parseHookName(functionName.slice(startIndex + '[as '.length, -1));
+  }
+  startIndex = functionName.lastIndexOf('.');
+  if (startIndex === -1) {
+    startIndex = 0;
+  } else {
+    startIndex += 1;
+  }
+
+  if (functionName.slice(startIndex).startsWith('unstable_')) {
+    startIndex += 'unstable_'.length;
+  }
+
+  if (functionName.slice(startIndex).startsWith('experimental_')) {
+    startIndex += 'experimental_'.length;
+  }
+
+  if (functionName.slice(startIndex, startIndex + 3) === 'use') {
+    if (functionName.length - startIndex === 3) {
+      return 'Use';
+    }
+    startIndex += 3;
+  }
+  return functionName.slice(startIndex);
+}
+
+function buildTree(
+  rootStack: ParsedStackFrame[],
+  readHookLog: Array<HookLogEntry>,
+): HooksTree {
+  const rootChildren: Array<HooksNode> = [];
+  let prevStack = null;
+  let levelChildren = rootChildren;
+  let nativeHookID = 0;
+  const stackOfChildren = [];
+  for (let i = 0; i < readHookLog.length; i++) {
+    const hook = readHookLog[i];
+    const parseResult = parseTrimmedStack(rootStack, hook);
+    const primitiveFrame = parseResult[0];
+    const stack = parseResult[1];
+    let displayName = hook.displayName;
+    if (displayName === null && primitiveFrame !== null) {
+      displayName =
+        parseHookName(primitiveFrame.functionName) ||
+        // Older versions of React do not have sourcemaps.
+        // In those versions there was always a 1:1 mapping between wrapper and dispatcher method.
+        parseHookName(hook.dispatcherHookName);
+    }
+    if (stack !== null) {
+      // Note: The indices 0 <= n < length-1 will contain the names.
+      // The indices 1 <= n < length will contain the source locations.
+      // That's why we get the name from n - 1 and don't check the source
+      // of index 0.
+      let commonSteps = 0;
+      if (prevStack !== null) {
+        // Compare the current level's stack to the new stack.
+        while (commonSteps < stack.length && commonSteps < prevStack.length) {
+          const stackSource = stack[stack.length - commonSteps - 1].source;
+          const prevSource =
+            prevStack[prevStack.length - commonSteps - 1].source;
+          if (stackSource !== prevSource) {
+            break;
+          }
+          commonSteps++;
+        }
+        // Pop back the stack as many steps as were not common.
+        for (let j = prevStack.length - 1; j > commonSteps; j--) {
+          // $FlowFixMe[incompatible-type]
+          levelChildren = stackOfChildren.pop();
+        }
+      }
+      // The remaining part of the new stack are custom hooks. Push them
+      // to the tree.
+      for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
+        const children: Array<HooksNode> = [];
+        const stackFrame = stack[j];
+        const levelChild: HooksNode = {
+          id: null,
+          isStateEditable: false,
+          name: parseHookName(stack[j - 1].functionName),
+          value: undefined,
+          subHooks: children,
+          debugInfo: null,
+          hookSource: {
+            lineNumber:
+              stackFrame.lineNumber === undefined
+                ? null
+                : stackFrame.lineNumber,
+            columnNumber:
+              stackFrame.columnNumber === undefined
+                ? null
+                : stackFrame.columnNumber,
+            functionName:
+              stackFrame.functionName === undefined
+                ? null
+                : stackFrame.functionName,
+            fileName:
+              stackFrame.fileName === undefined ? null : stackFrame.fileName,
+          },
+        };
+
+        levelChildren.push(levelChild);
+        stackOfChildren.push(levelChildren);
+        levelChildren = children;
+      }
+      prevStack = stack;
+    }
+    const {primitive, debugInfo} = hook;
+
+    // For now, the "id" of stateful hooks is just the stateful hook index.
+    // Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).
+    const id =
+      primitive === 'Context' ||
+      primitive === 'Context (use)' ||
+      primitive === 'DebugValue' ||
+      primitive === 'Promise' ||
+      primitive === 'Unresolved' ||
+      primitive === 'HostTransitionStatus'
+        ? null
+        : nativeHookID++;
+
+    // For the time being, only State and Reducer hooks support runtime overrides.
+    const isStateEditable = primitive === 'Reducer' || primitive === 'State';
+    const name = displayName || primitive;
+    const levelChild: HooksNode = {
+      id,
+      isStateEditable,
+      name,
+      value: hook.value,
+      subHooks: [],
+      debugInfo: debugInfo,
+      hookSource: null,
+    };
+
+    const hookSource: HookSource = {
+      lineNumber: null,
+      functionName: null,
+      fileName: null,
+      columnNumber: null,
+    };
+    if (stack && stack.length >= 1) {
+      const stackFrame = stack[0];
+      hookSource.lineNumber =
+        stackFrame.lineNumber === undefined ? null : stackFrame.lineNumber;
+      hookSource.functionName =
+        stackFrame.functionName === undefined ? null : stackFrame.functionName;
+      hookSource.fileName =
+        stackFrame.fileName === undefined ? null : stackFrame.fileName;
+      hookSource.columnNumber =
+        stackFrame.columnNumber === undefined ? null : stackFrame.columnNumber;
+    }
+
+    levelChild.hookSource = hookSource;
+
+    levelChildren.push(levelChild);
+  }
+
+  // Associate custom hook values (useDebugValue() hook entries) with the correct hooks.
+  processDebugValues(rootChildren, null);
+
+  return rootChildren;
+}
+
+// Custom hooks support user-configurable labels (via the special useDebugValue() hook).
+// That hook adds user-provided values to the hooks tree,
+// but these values aren't intended to appear alongside of the other hooks.
+// Instead they should be attributed to their parent custom hook.
+// This method walks the tree and assigns debug values to their custom hook owners.
+function processDebugValues(
+  hooksTree: HooksTree,
+  parentHooksNode: HooksNode | null,
+): void {
+  const debugValueHooksNodes: Array<HooksNode> = [];
+
+  for (let i = 0; i < hooksTree.length; i++) {
+    const hooksNode = hooksTree[i];
+    if (hooksNode.name === 'DebugValue' && hooksNode.subHooks.length === 0) {
+      hooksTree.splice(i, 1);
+      i--;
+      debugValueHooksNodes.push(hooksNode);
+    } else {
+      processDebugValues(hooksNode.subHooks, hooksNode);
+    }
+  }
+
+  // Bubble debug value labels to their custom hook owner.
+  // If there is no parent hook, just ignore them for now.
+  // (We may warn about this in the future.)
+  if (parentHooksNode !== null) {
+    if (debugValueHooksNodes.length === 1) {
+      parentHooksNode.value = debugValueHooksNodes[0].value;
+    } else if (debugValueHooksNodes.length > 1) {
+      parentHooksNode.value = debugValueHooksNodes.map(({value}) => value);
+    }
+  }
+}
+
+function handleRenderFunctionError(error: any): void {
+  // original error might be any type.
+  if (error === SuspenseException) {
+    // An uncached Promise was used. We can't synchronously resolve the rest of
+    // the Hooks but we can at least show what ever we got so far.
+    return;
+  }
+  if (
+    error instanceof Error &&
+    error.name === 'ReactDebugToolsUnsupportedHookError'
+  ) {
+    throw error;
+  }
+  // If the error is not caused by an unsupported feature, it means
+  // that the error is caused by user's code in renderFunction.
+  // In this case, we should wrap the original error inside a custom error
+  // so that devtools can give a clear message about it.
+  // $FlowFixMe[extra-arg]: Flow doesn't know about 2nd argument of Error constructor
+  const wrapperError = new Error('Error rendering inspected component', {
+    cause: error,
+  });
+  // Note: This error name needs to stay in sync with react-devtools-shared
+  // TODO: refactor this if we ever combine the devtools and debug tools packages
+  wrapperError.name = 'ReactDebugToolsRenderError';
+  // this stage-4 proposal is not supported by all environments yet.
+  // $FlowFixMe[prop-missing] Flow doesn't have this type yet.
+  wrapperError.cause = error;
+  throw wrapperError;
+}
+
+export function inspectHooks<Props>(
+  renderFunction: Props => React$Node,
+  props: Props,
+  currentDispatcher: ?CurrentDispatcherRef,
+): HooksTree {
+  // DevTools will pass the current renderer's injected dispatcher.
+  // Other apps might compile debug hooks as part of their app though.
+  if (currentDispatcher == null) {
+    currentDispatcher = ReactSharedInternals;
+  }
+
+  const previousDispatcher = currentDispatcher.H;
+  currentDispatcher.H = DispatcherProxy;
+
+  let readHookLog;
+  let ancestorStackError;
+
+  try {
+    ancestorStackError = new Error();
+    renderFunction(props);
+  } catch (error) {
+    handleRenderFunctionError(error);
+  } finally {
+    readHookLog = hookLog;
+    hookLog = [];
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    currentDispatcher.H = previousDispatcher;
+  }
+  const rootStack =
+    ancestorStackError === undefined
+      ? ([]: ParsedStackFrame[])
+      : ErrorStackParser.parse(ancestorStackError);
+  return buildTree(rootStack, readHookLog);
+}
+
+function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
+  let current: null | Fiber = fiber;
+  while (current) {
+    if (current.tag === ContextProvider) {
+      let context: ReactContext<any> = current.type;
+      if ((context: any)._context !== undefined) {
+        // Support inspection of pre-19+ providers.
+        context = (context: any)._context;
+      }
+      if (!contextMap.has(context)) {
+        // Store the current value that we're going to restore later.
+        contextMap.set(context, context._currentValue);
+        // Set the inner most provider value on the context.
+        context._currentValue = current.memoizedProps.value;
+      }
+    }
+    current = current.return;
+  }
+}
+
+function restoreContexts(contextMap: Map<ReactContext<any>, any>) {
+  contextMap.forEach((value, context) => (context._currentValue = value));
+}
+
+function inspectHooksOfForwardRef<Props, Ref>(
+  renderFunction: (Props, Ref) => React$Node,
+  props: Props,
+  ref: Ref,
+  currentDispatcher: CurrentDispatcherRef,
+): HooksTree {
+  const previousDispatcher = currentDispatcher.H;
+  let readHookLog;
+  currentDispatcher.H = DispatcherProxy;
+  let ancestorStackError;
+  try {
+    ancestorStackError = new Error();
+    renderFunction(props, ref);
+  } catch (error) {
+    handleRenderFunctionError(error);
+  } finally {
+    readHookLog = hookLog;
+    hookLog = [];
+    currentDispatcher.H = previousDispatcher;
+  }
+  const rootStack =
+    ancestorStackError === undefined
+      ? ([]: ParsedStackFrame[])
+      : ErrorStackParser.parse(ancestorStackError);
+  return buildTree(rootStack, readHookLog);
+}
+
+function resolveDefaultProps(Component: any, baseProps: any) {
+  if (Component && Component.defaultProps) {
+    // Resolve default props. Taken from ReactElement
+    const props = assign({}, baseProps);
+    const defaultProps = Component.defaultProps;
+    for (const propName in defaultProps) {
+      if (props[propName] === undefined) {
+        props[propName] = defaultProps[propName];
+      }
+    }
+    return props;
+  }
+  return baseProps;
+}
+
+export function inspectHooksOfFiber(
+  fiber: Fiber,
+  currentDispatcher: ?CurrentDispatcherRef,
+): HooksTree {
+  // DevTools will pass the current renderer's injected dispatcher.
+  // Other apps might compile debug hooks as part of their app though.
+  if (currentDispatcher == null) {
+    currentDispatcher = ReactSharedInternals;
+  }
+
+  if (
+    fiber.tag !== FunctionComponent &&
+    fiber.tag !== SimpleMemoComponent &&
+    fiber.tag !== ForwardRef
+  ) {
+    throw new Error(
+      'Unknown Fiber. Needs to be a function component to inspect hooks.',
+    );
+  }
+
+  // Warm up the cache so that it doesn't consume the currentHook.
+  getPrimitiveStackCache();
+
+  // Set up the current hook so that we can step through and read the
+  // current state from them.
+  currentHook = (fiber.memoizedState: Hook);
+  currentFiber = fiber;
+  const thenableState =
+    fiber.dependencies && fiber.dependencies._debugThenableState;
+  // In DEV the thenableState is an inner object.
+  const usedThenables: any = thenableState
+    ? thenableState.thenables || thenableState
+    : null;
+  currentThenableState = Array.isArray(usedThenables) ? usedThenables : null;
+  currentThenableIndex = 0;
+
+  if (hasOwnProperty.call(currentFiber, 'dependencies')) {
+    // $FlowFixMe[incompatible-use]: Flow thinks hasOwnProperty might have nulled `currentFiber`
+    const dependencies = currentFiber.dependencies;
+    currentContextDependency =
+      dependencies !== null ? dependencies.firstContext : null;
+  } else if (hasOwnProperty.call(currentFiber, 'dependencies_old')) {
+    const dependencies: Dependencies = (currentFiber: any).dependencies_old;
+    currentContextDependency =
+      dependencies !== null ? dependencies.firstContext : null;
+  } else if (hasOwnProperty.call(currentFiber, 'dependencies_new')) {
+    const dependencies: Dependencies = (currentFiber: any).dependencies_new;
+    currentContextDependency =
+      dependencies !== null ? dependencies.firstContext : null;
+  } else if (hasOwnProperty.call(currentFiber, 'contextDependencies')) {
+    const contextDependencies = (currentFiber: any).contextDependencies;
+    currentContextDependency =
+      contextDependencies !== null ? contextDependencies.first : null;
+  } else {
+    throw new Error(
+      'Unsupported React version. This is a bug in React Debug Tools.',
+    );
+  }
+
+  const type = fiber.type;
+  let props = fiber.memoizedProps;
+  if (type !== fiber.elementType) {
+    props = resolveDefaultProps(type, props);
+  }
+
+  // Only used for versions of React without memoized context value in context dependencies.
+  const contextMap = new Map<ReactContext<any>, any>();
+  try {
+    if (
+      currentContextDependency !== null &&
+      !hasOwnProperty.call(currentContextDependency, 'memoizedValue')
+    ) {
+      setupContexts(contextMap, fiber);
+    }
+
+    if (fiber.tag === ForwardRef) {
+      return inspectHooksOfForwardRef(
+        type.render,
+        props,
+        fiber.ref,
+        currentDispatcher,
+      );
+    }
+
+    return inspectHooks(type, props, currentDispatcher);
+  } finally {
+    currentFiber = null;
+    currentHook = null;
+    currentContextDependency = null;
+    currentThenableState = null;
+    currentThenableIndex = 0;
+
+    restoreContexts(contextMap);
+  }
+}
diff --git a/packages/react-debug-tools/src/ReactDebugTools.js b/packages/react-debug-tools/src/ReactDebugTools.js
new file mode 100644
index 00000000000..23d568a68b2
--- /dev/null
+++ b/packages/react-debug-tools/src/ReactDebugTools.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {inspectHooks, inspectHooksOfFiber} from './ReactDebugHooks';
+
+export {inspectHooks, inspectHooksOfFiber};
diff --git a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
new file mode 100644
index 00000000000..9e670ec7f71
--- /dev/null
+++ b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
@@ -0,0 +1,330 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('React hooks DevTools integration', () => {
+  let React;
+  let ReactDebugTools;
+  let ReactTestRenderer;
+  let act;
+  let overrideHookState;
+  let scheduleUpdate;
+  let scheduleRetry;
+  let setSuspenseHandler;
+  let waitForAll;
+
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
+  beforeEach(() => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      inject: injected => {
+        overrideHookState = injected.overrideHookState;
+        scheduleUpdate = injected.scheduleUpdate;
+        scheduleRetry = injected.scheduleRetry;
+        setSuspenseHandler = injected.setSuspenseHandler;
+      },
+      supportsFiber: true,
+      onCommitFiberRoot: () => {},
+      onCommitFiberUnmount: () => {},
+    };
+
+    jest.resetModules();
+
+    React = require('react');
+    ReactDebugTools = require('react-debug-tools');
+    ReactTestRenderer = require('react-test-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+
+    act = require('internal-test-utils').act;
+  });
+
+  it('should support editing useState hooks', async () => {
+    let setCountFn;
+
+    function MyComponent() {
+      const [count, setCount] = React.useState(0);
+      setCountFn = setCount;
+      return <div>count:{count}</div>;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<MyComponent />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['count:', '0'],
+    });
+
+    const fiber = renderer.root.findByType(MyComponent)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(fiber);
+    const stateHook = tree[0];
+    expect(stateHook.isStateEditable).toBe(true);
+
+    if (__DEV__) {
+      await act(() => overrideHookState(fiber, stateHook.id, [], 10));
+      expect(renderer.toJSON()).toEqual({
+        type: 'div',
+        props: {},
+        children: ['count:', '10'],
+      });
+
+      await act(() => setCountFn(count => count + 1));
+      expect(renderer.toJSON()).toEqual({
+        type: 'div',
+        props: {},
+        children: ['count:', '11'],
+      });
+    }
+  });
+
+  it('should support editable useReducer hooks', async () => {
+    const initialData = {foo: 'abc', bar: 123};
+
+    function reducer(state, action) {
+      switch (action.type) {
+        case 'swap':
+          return {foo: state.bar, bar: state.foo};
+        default:
+          throw new Error();
+      }
+    }
+
+    let dispatchFn;
+    function MyComponent() {
+      const [state, dispatch] = React.useReducer(reducer, initialData);
+      dispatchFn = dispatch;
+      return (
+        <div>
+          foo:{state.foo}, bar:{state.bar}
+        </div>
+      );
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<MyComponent />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['foo:', 'abc', ', bar:', '123'],
+    });
+
+    const fiber = renderer.root.findByType(MyComponent)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(fiber);
+    const reducerHook = tree[0];
+    expect(reducerHook.isStateEditable).toBe(true);
+
+    if (__DEV__) {
+      await act(() => overrideHookState(fiber, reducerHook.id, ['foo'], 'def'));
+      expect(renderer.toJSON()).toEqual({
+        type: 'div',
+        props: {},
+        children: ['foo:', 'def', ', bar:', '123'],
+      });
+
+      await act(() => dispatchFn({type: 'swap'}));
+      expect(renderer.toJSON()).toEqual({
+        type: 'div',
+        props: {},
+        children: ['foo:', '123', ', bar:', 'def'],
+      });
+    }
+  });
+
+  // This test case is based on an open source bug report:
+  // https://github.com/facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
+  it('should handle interleaved stateful hooks (e.g. useState) and non-stateful hooks (e.g. useContext)', async () => {
+    const MyContext = React.createContext(1);
+
+    let setStateFn;
+    function useCustomHook() {
+      const context = React.useContext(MyContext);
+      const [state, setState] = React.useState({count: context});
+      React.useDebugValue(state.count);
+      setStateFn = setState;
+      return state.count;
+    }
+
+    function MyComponent() {
+      const count = useCustomHook();
+      return <div>count:{count}</div>;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<MyComponent />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['count:', '1'],
+    });
+
+    const fiber = renderer.root.findByType(MyComponent)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(fiber);
+    const stateHook = tree[0].subHooks[1];
+    expect(stateHook.isStateEditable).toBe(true);
+
+    if (__DEV__) {
+      await act(() => overrideHookState(fiber, stateHook.id, ['count'], 10));
+      expect(renderer.toJSON()).toEqual({
+        type: 'div',
+        props: {},
+        children: ['count:', '10'],
+      });
+      await act(() => setStateFn(state => ({count: state.count + 1})));
+      expect(renderer.toJSON()).toEqual({
+        type: 'div',
+        props: {},
+        children: ['count:', '11'],
+      });
+    }
+  });
+
+  it('should support overriding suspense in legacy mode', async () => {
+    if (__DEV__) {
+      // Lock the first render
+      setSuspenseHandler(() => true);
+    }
+
+    function MyComponent() {
+      return 'Done';
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <div>
+          <React.Suspense fallback={'Loading'}>
+            <MyComponent />
+          </React.Suspense>
+        </div>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    const fiber = renderer.root._currentFiber().child;
+    if (__DEV__) {
+      // First render was locked
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+
+      // Release the lock
+      setSuspenseHandler(() => false);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+
+      // Lock again
+      setSuspenseHandler(() => true);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+
+      // Release the lock again
+      setSuspenseHandler(() => false);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+
+      // Ensure it checks specific fibers.
+      setSuspenseHandler(f => f === fiber || f === fiber.alternate);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+      setSuspenseHandler(f => f !== fiber && f !== fiber.alternate);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+    } else {
+      expect(renderer.toJSON().children).toEqual(['Done']);
+    }
+  });
+
+  it('should support overriding suspense in concurrent mode', async () => {
+    if (__DEV__) {
+      // Lock the first render
+      setSuspenseHandler(() => true);
+    }
+
+    function MyComponent() {
+      return 'Done';
+    }
+
+    const renderer = await act(() =>
+      ReactTestRenderer.create(
+        <div>
+          <React.Suspense fallback={'Loading'}>
+            <MyComponent />
+          </React.Suspense>
+        </div>,
+        {unstable_isConcurrent: true},
+      ),
+    );
+
+    await waitForAll([]);
+    // Ensure we timeout any suspense time.
+    jest.advanceTimersByTime(1000);
+    const fiber = renderer.root._currentFiber().child;
+    if (__DEV__) {
+      // First render was locked
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+
+      // Release the lock
+      setSuspenseHandler(() => false);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+
+      // Lock again
+      setSuspenseHandler(() => true);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+
+      // Release the lock again
+      setSuspenseHandler(() => false);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+
+      // Ensure it checks specific fibers.
+      setSuspenseHandler(f => f === fiber || f === fiber.alternate);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+      setSuspenseHandler(f => f !== fiber && f !== fiber.alternate);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+    } else {
+      expect(renderer.toJSON().children).toEqual(['Done']);
+    }
+
+    if (scheduleRetry) {
+      // Lock again, synchronously
+      setSuspenseHandler(() => true);
+      await act(() => scheduleUpdate(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Loading']);
+
+      // Release the lock again but this time using retry lane
+      setSuspenseHandler(() => false);
+      await act(() => scheduleRetry(fiber)); // Re-render
+      expect(renderer.toJSON().children).toEqual(['Done']);
+    }
+  });
+});
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
new file mode 100644
index 00000000000..a12abba4e63
--- /dev/null
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
@@ -0,0 +1,866 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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;
+
+function normalizeSourceLoc(tree) {
+  tree.forEach(node => {
+    if (node.hookSource) {
+      node.hookSource.fileName = '**';
+      node.hookSource.lineNumber = 0;
+      node.hookSource.columnNumber = 0;
+    }
+    normalizeSourceLoc(node.subHooks);
+  });
+  return tree;
+}
+
+describe('ReactHooksInspection', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDebugTools = require('react-debug-tools');
+  });
+
+  it('should inspect a simple useState hook', () => {
+    function Foo(props) {
+      const [state] = React.useState('hello world');
+      return <div>{state}</div>;
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "hello world",
+        },
+      ]
+    `);
+  });
+
+  it('should inspect a simple custom hook', () => {
+    function useCustom(value) {
+      const [state] = React.useState(value);
+      React.useDebugValue('custom hook label');
+      return state;
+    }
+    function Foo(props) {
+      const value = useCustom('hello world');
+      return <div>{value}</div>;
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    if (__DEV__) {
+      expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+              [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "Foo",
+                    "lineNumber": 0,
+                  },
+                  "id": null,
+                  "isStateEditable": false,
+                  "name": "Custom",
+                  "subHooks": [
+                    {
+                      "debugInfo": null,
+                      "hookSource": {
+                        "columnNumber": 0,
+                        "fileName": "**",
+                        "functionName": "useCustom",
+                        "lineNumber": 0,
+                      },
+                      "id": 0,
+                      "isStateEditable": true,
+                      "name": "State",
+                      "subHooks": [],
+                      "value": "hello world",
+                    },
+                  ],
+                  "value": "custom hook label",
+                },
+              ]
+          `);
+    } else {
+      expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+        [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": 0,
+              "fileName": "**",
+              "functionName": "Foo",
+              "lineNumber": 0,
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "Custom",
+            "subHooks": [
+              {
+                "debugInfo": null,
+                "hookSource": {
+                  "columnNumber": 0,
+                  "fileName": "**",
+                  "functionName": "useCustom",
+                  "lineNumber": 0,
+                },
+                "id": 0,
+                "isStateEditable": true,
+                "name": "State",
+                "subHooks": [],
+                "value": "hello world",
+              },
+            ],
+            "value": undefined,
+          },
+        ]
+      `);
+    }
+  });
+
+  it('should inspect a tree of multiple hooks', () => {
+    function effect() {}
+    function useCustom(value) {
+      const [state] = React.useState(value);
+      React.useEffect(effect);
+      return state;
+    }
+    function Foo(props) {
+      const value1 = useCustom('hello');
+      const value2 = useCustom('world');
+      return (
+        <div>
+          {value1} {value2}
+        </div>
+      );
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Custom",
+          "subHooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": "hello",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": 1,
+              "isStateEditable": false,
+              "name": "Effect",
+              "subHooks": [],
+              "value": [Function],
+            },
+          ],
+          "value": undefined,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Custom",
+          "subHooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": 2,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": "world",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": 3,
+              "isStateEditable": false,
+              "name": "Effect",
+              "subHooks": [],
+              "value": [Function],
+            },
+          ],
+          "value": undefined,
+        },
+      ]
+    `);
+  });
+
+  it('should inspect a tree of multiple levels of hooks', () => {
+    function effect() {}
+    function useCustom(value) {
+      const [state] = React.useReducer((s, a) => s, value);
+      React.useEffect(effect);
+      return state;
+    }
+    function useBar(value) {
+      const result = useCustom(value);
+      React.useLayoutEffect(effect);
+      return result;
+    }
+    function useBaz(value) {
+      React.useLayoutEffect(effect);
+      const result = useCustom(value);
+      return result;
+    }
+    function Foo(props) {
+      const value1 = useBar('hello');
+      const value2 = useBaz('world');
+      return (
+        <div>
+          {value1} {value2}
+        </div>
+      );
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Bar",
+          "subHooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useBar",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Custom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "Reducer",
+                  "subHooks": [],
+                  "value": "hello",
+                },
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 1,
+                  "isStateEditable": false,
+                  "name": "Effect",
+                  "subHooks": [],
+                  "value": [Function],
+                },
+              ],
+              "value": undefined,
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useBar",
+                "lineNumber": 0,
+              },
+              "id": 2,
+              "isStateEditable": false,
+              "name": "LayoutEffect",
+              "subHooks": [],
+              "value": [Function],
+            },
+          ],
+          "value": undefined,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Baz",
+          "subHooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useBaz",
+                "lineNumber": 0,
+              },
+              "id": 3,
+              "isStateEditable": false,
+              "name": "LayoutEffect",
+              "subHooks": [],
+              "value": [Function],
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useBaz",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Custom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 4,
+                  "isStateEditable": true,
+                  "name": "Reducer",
+                  "subHooks": [],
+                  "value": "world",
+                },
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 5,
+                  "isStateEditable": false,
+                  "name": "Effect",
+                  "subHooks": [],
+                  "value": [Function],
+                },
+              ],
+              "value": undefined,
+            },
+          ],
+          "value": undefined,
+        },
+      ]
+    `);
+  });
+
+  it('should not confuse built-in hooks with custom hooks that have the same name', () => {
+    function useState(value) {
+      React.useState(value);
+      React.useDebugValue('custom useState');
+    }
+    function useFormStatus() {
+      React.useState('custom useState');
+      React.useDebugValue('custom useFormStatus');
+    }
+    function Foo(props) {
+      useFormStatus();
+      useState('Hello, Dave!');
+      return null;
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    if (__DEV__) {
+      expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+        [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": 0,
+              "fileName": "**",
+              "functionName": "Foo",
+              "lineNumber": 0,
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "FormStatus",
+            "subHooks": [
+              {
+                "debugInfo": null,
+                "hookSource": {
+                  "columnNumber": 0,
+                  "fileName": "**",
+                  "functionName": "useFormStatus",
+                  "lineNumber": 0,
+                },
+                "id": 0,
+                "isStateEditable": true,
+                "name": "State",
+                "subHooks": [],
+                "value": "custom useState",
+              },
+            ],
+            "value": "custom useFormStatus",
+          },
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": 0,
+              "fileName": "**",
+              "functionName": "Foo",
+              "lineNumber": 0,
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "State",
+            "subHooks": [
+              {
+                "debugInfo": null,
+                "hookSource": {
+                  "columnNumber": 0,
+                  "fileName": "**",
+                  "functionName": "useState",
+                  "lineNumber": 0,
+                },
+                "id": 1,
+                "isStateEditable": true,
+                "name": "State",
+                "subHooks": [],
+                "value": "Hello, Dave!",
+              },
+            ],
+            "value": "custom useState",
+          },
+        ]
+      `);
+    } else {
+      expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+        [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": 0,
+              "fileName": "**",
+              "functionName": "Foo",
+              "lineNumber": 0,
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "FormStatus",
+            "subHooks": [
+              {
+                "debugInfo": null,
+                "hookSource": {
+                  "columnNumber": 0,
+                  "fileName": "**",
+                  "functionName": "useFormStatus",
+                  "lineNumber": 0,
+                },
+                "id": 0,
+                "isStateEditable": true,
+                "name": "State",
+                "subHooks": [],
+                "value": "custom useState",
+              },
+            ],
+            "value": undefined,
+          },
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": 0,
+              "fileName": "**",
+              "functionName": "Foo",
+              "lineNumber": 0,
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "State",
+            "subHooks": [
+              {
+                "debugInfo": null,
+                "hookSource": {
+                  "columnNumber": 0,
+                  "fileName": "**",
+                  "functionName": "useState",
+                  "lineNumber": 0,
+                },
+                "id": 1,
+                "isStateEditable": true,
+                "name": "State",
+                "subHooks": [],
+                "value": "Hello, Dave!",
+              },
+            ],
+            "value": undefined,
+          },
+        ]
+      `);
+    }
+  });
+
+  it('should inspect the default value using the useContext hook', () => {
+    const MyContext = React.createContext('default');
+    function Foo(props) {
+      const value = React.useContext(MyContext);
+      return <div>{value}</div>;
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": "default",
+        },
+      ]
+    `);
+  });
+
+  it('should inspect use() calls for Promise and Context', async () => {
+    const MyContext = React.createContext('hi');
+    const promise = Promise.resolve('world');
+    await promise;
+    promise.status = 'fulfilled';
+    promise.value = 'world';
+    promise._debugInfo = [{name: 'Hello'}];
+
+    function useCustom() {
+      const value = React.use(promise);
+      const [state] = React.useState(value);
+      return state;
+    }
+    function Foo(props) {
+      const value1 = React.use(MyContext);
+      const value2 = useCustom();
+      return (
+        <div>
+          {value1} {value2}
+        </div>
+      );
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": "hi",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Custom",
+          "subHooks": [
+            {
+              "debugInfo": [
+                {
+                  "name": "Hello",
+                },
+              ],
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Use",
+              "subHooks": [],
+              "value": "world",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": "world",
+            },
+          ],
+          "value": undefined,
+        },
+      ]
+    `);
+  });
+
+  it('should inspect use() calls for unresolved Promise', () => {
+    const promise = Promise.resolve('hi');
+
+    function Foo(props) {
+      const value = React.use(promise);
+      return <div>{value}</div>;
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {});
+    const results = normalizeSourceLoc(tree);
+    expect(results).toHaveLength(1);
+    expect(results[0]).toMatchInlineSnapshot(
+      {
+        value: expect.any(Promise),
+      },
+      `
+      {
+        "debugInfo": null,
+        "hookSource": {
+          "columnNumber": 0,
+          "fileName": "**",
+          "functionName": "Foo",
+          "lineNumber": 0,
+        },
+        "id": null,
+        "isStateEditable": false,
+        "name": "Use",
+        "subHooks": [],
+        "value": Any<Promise>,
+      }
+    `,
+    );
+  });
+
+  it('should inspect use() calls in anonymous loops', () => {
+    function Foo({entries}) {
+      const values = Object.fromEntries(
+        Object.entries(entries).map(([key, value]) => {
+          return [key, React.use(value)];
+        }),
+      );
+      return <div>{values}</div>;
+    }
+    const tree = ReactDebugTools.inspectHooks(Foo, {
+      entries: {one: Promise.resolve('one'), two: Promise.resolve('two')},
+    });
+    const results = normalizeSourceLoc(tree);
+    expect(results).toHaveLength(1);
+    expect(results[0]).toMatchInlineSnapshot(
+      {
+        subHooks: [{value: expect.any(Promise)}],
+      },
+      `
+      {
+        "debugInfo": null,
+        "hookSource": {
+          "columnNumber": 0,
+          "fileName": "**",
+          "functionName": "Foo",
+          "lineNumber": 0,
+        },
+        "id": null,
+        "isStateEditable": false,
+        "name": "",
+        "subHooks": [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": 0,
+              "fileName": "**",
+              "functionName": null,
+              "lineNumber": 0,
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "Use",
+            "subHooks": [],
+            "value": Any<Promise>,
+          },
+        ],
+        "value": undefined,
+      }
+    `,
+    );
+  });
+
+  describe('useDebugValue', () => {
+    it('should be ignored when called outside of a custom hook', () => {
+      function Foo(props) {
+        React.useDebugValue('this is invalid');
+        return null;
+      }
+      const tree = ReactDebugTools.inspectHooks(Foo, {});
+      expect(tree).toHaveLength(0);
+    });
+
+    it('should support an optional formatter function param', () => {
+      function useCustom() {
+        React.useDebugValue({bar: 123}, object => `bar:${object.bar}`);
+        React.useState(0);
+      }
+      function Foo(props) {
+        useCustom();
+        return null;
+      }
+      const tree = ReactDebugTools.inspectHooks(Foo, {});
+      if (__DEV__) {
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+                  [
+                    {
+                      "debugInfo": null,
+                      "hookSource": {
+                        "columnNumber": 0,
+                        "fileName": "**",
+                        "functionName": "Foo",
+                        "lineNumber": 0,
+                      },
+                      "id": null,
+                      "isStateEditable": false,
+                      "name": "Custom",
+                      "subHooks": [
+                        {
+                          "debugInfo": null,
+                          "hookSource": {
+                            "columnNumber": 0,
+                            "fileName": "**",
+                            "functionName": "useCustom",
+                            "lineNumber": 0,
+                          },
+                          "id": 0,
+                          "isStateEditable": true,
+                          "name": "State",
+                          "subHooks": [],
+                          "value": 0,
+                        },
+                      ],
+                      "value": "bar:123",
+                    },
+                  ]
+              `);
+      } else {
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Foo",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Custom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": undefined,
+            },
+          ]
+        `);
+      }
+    });
+  });
+});
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
new file mode 100644
index 00000000000..a150ded10f7
--- /dev/null
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -0,0 +1,2661 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactTestRenderer;
+let ReactDebugTools;
+let act;
+let useMemoCache;
+
+function normalizeSourceLoc(tree) {
+  tree.forEach(node => {
+    if (node.hookSource) {
+      node.hookSource.fileName = '**';
+      node.hookSource.lineNumber = 0;
+      node.hookSource.columnNumber = 0;
+    }
+    normalizeSourceLoc(node.subHooks);
+  });
+  return tree;
+}
+
+describe('ReactHooksInspectionIntegration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    ({act} = require('internal-test-utils'));
+    ReactDebugTools = require('react-debug-tools');
+    useMemoCache = require('react/compiler-runtime').c;
+  });
+
+  it('should inspect the current state of useState hooks', async () => {
+    const useState = React.useState;
+    function Foo(props) {
+      const [state1, setState1] = useState('hello');
+      const [state2, setState2] = useState('world');
+      return (
+        <div onMouseDown={setState1} onMouseUp={setState2}>
+          {state1} {state2}
+        </div>
+      );
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo prop="prop" />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    let childFiber = renderer.root.findByType(Foo)._currentFiber();
+    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "world",
+        },
+      ]
+    `);
+
+    const {onMouseDown: setStateA, onMouseUp: setStateB} =
+      renderer.root.findByType('div').props;
+
+    await act(() => setStateA('Hi'));
+
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "Hi",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "world",
+        },
+      ]
+    `);
+
+    await act(() => setStateB('world!'));
+
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "Hi",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "world!",
+        },
+      ]
+    `);
+  });
+
+  it('should inspect the current state of all stateful hooks', async () => {
+    const outsideRef = React.createRef();
+    function effect() {}
+    function Foo(props) {
+      const [state1, setState] = React.useState('a');
+      const [state2, dispatch] = React.useReducer((s, a) => a.value, 'b');
+      const ref = React.useRef('c');
+
+      React.useLayoutEffect(effect);
+      React.useEffect(effect);
+
+      React.useImperativeHandle(outsideRef, () => {
+        // Return a function so that jest treats them as non-equal.
+        return function Instance() {};
+      }, []);
+
+      React.useMemo(() => state1 + state2, [state1]);
+
+      function update() {
+        setState('A');
+        dispatch({value: 'B'});
+        ref.current = 'C';
+      }
+      const memoizedUpdate = React.useCallback(update, []);
+      return (
+        <div onClick={memoizedUpdate}>
+          {state1} {state2}
+        </div>
+      );
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo prop="prop" />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    let childFiber = renderer.root.findByType(Foo)._currentFiber();
+
+    const {onClick: updateStates} = renderer.root.findByType('div').props;
+
+    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "a",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "Reducer",
+          "subHooks": [],
+          "value": "b",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Ref",
+          "subHooks": [],
+          "value": "c",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "LayoutEffect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 4,
+          "isStateEditable": false,
+          "name": "Effect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 5,
+          "isStateEditable": false,
+          "name": "ImperativeHandle",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 6,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "ab",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 7,
+          "isStateEditable": false,
+          "name": "Callback",
+          "subHooks": [],
+          "value": [Function],
+        },
+      ]
+    `);
+
+    await act(() => {
+      updateStates();
+    });
+
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "A",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "Reducer",
+          "subHooks": [],
+          "value": "B",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Ref",
+          "subHooks": [],
+          "value": "C",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "LayoutEffect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 4,
+          "isStateEditable": false,
+          "name": "Effect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 5,
+          "isStateEditable": false,
+          "name": "ImperativeHandle",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 6,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "AB",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 7,
+          "isStateEditable": false,
+          "name": "Callback",
+          "subHooks": [],
+          "value": [Function],
+        },
+      ]
+    `);
+  });
+
+  it('should inspect the current state of all stateful hooks, including useInsertionEffect', async () => {
+    const useInsertionEffect = React.useInsertionEffect;
+    const outsideRef = React.createRef();
+    function effect() {}
+    function Foo(props) {
+      const [state1, setState] = React.useState('a');
+      const [state2, dispatch] = React.useReducer((s, a) => a.value, 'b');
+      const ref = React.useRef('c');
+
+      useInsertionEffect(effect);
+      React.useLayoutEffect(effect);
+      React.useEffect(effect);
+
+      React.useImperativeHandle(outsideRef, () => {
+        // Return a function so that jest treats them as non-equal.
+        return function Instance() {};
+      }, []);
+
+      React.useMemo(() => state1 + state2, [state1]);
+
+      async function update() {
+        setState('A');
+        dispatch({value: 'B'});
+        ref.current = 'C';
+      }
+      const memoizedUpdate = React.useCallback(update, []);
+      return (
+        <div onClick={memoizedUpdate}>
+          {state1} {state2}
+        </div>
+      );
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo prop="prop" />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    let childFiber = renderer.root.findByType(Foo)._currentFiber();
+
+    const {onClick: updateStates} = renderer.root.findByType('div').props;
+
+    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "a",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "Reducer",
+          "subHooks": [],
+          "value": "b",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Ref",
+          "subHooks": [],
+          "value": "c",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "InsertionEffect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 4,
+          "isStateEditable": false,
+          "name": "LayoutEffect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 5,
+          "isStateEditable": false,
+          "name": "Effect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 6,
+          "isStateEditable": false,
+          "name": "ImperativeHandle",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 7,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "ab",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 8,
+          "isStateEditable": false,
+          "name": "Callback",
+          "subHooks": [],
+          "value": [Function],
+        },
+      ]
+    `);
+
+    await act(() => {
+      updateStates();
+    });
+
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "A",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": true,
+          "name": "Reducer",
+          "subHooks": [],
+          "value": "B",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Ref",
+          "subHooks": [],
+          "value": "C",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "InsertionEffect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 4,
+          "isStateEditable": false,
+          "name": "LayoutEffect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 5,
+          "isStateEditable": false,
+          "name": "Effect",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 6,
+          "isStateEditable": false,
+          "name": "ImperativeHandle",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 7,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "AB",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 8,
+          "isStateEditable": false,
+          "name": "Callback",
+          "subHooks": [],
+          "value": [Function],
+        },
+      ]
+    `);
+  });
+
+  it('should inspect the value of the current provider in useContext', async () => {
+    const MyContext = React.createContext('default');
+    const ThemeContext = React.createContext('default');
+    ThemeContext.displayName = 'Theme';
+    function Foo(props) {
+      const value = React.useContext(MyContext);
+      React.useContext(ThemeContext);
+      return <div>{value}</div>;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <MyContext.Provider value="contextual">
+          <Foo prop="prop" />
+        </MyContext.Provider>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": "contextual",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Theme",
+          "subHooks": [],
+          "value": "default",
+        },
+      ]
+    `);
+  });
+
+  // @reactVersion >= 16.8
+  it('should inspect the value of the current provider in useContext reading the same context multiple times', async () => {
+    const ContextA = React.createContext('default A');
+    const ContextB = React.createContext('default B');
+    function Foo(props) {
+      React.useContext(ContextA);
+      React.useContext(ContextA);
+      React.useContext(ContextB);
+      React.useContext(ContextB);
+      React.useContext(ContextA);
+      React.useContext(ContextB);
+      React.useContext(ContextB);
+      React.useContext(ContextB);
+      return null;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <ContextA.Provider value="contextual A">
+          <Foo prop="prop" />
+        </ContextA.Provider>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(normalizeSourceLoc(tree)).toEqual([
+      expect.objectContaining({value: 'contextual A'}),
+      expect.objectContaining({value: 'contextual A'}),
+      expect.objectContaining({value: 'default B'}),
+      expect.objectContaining({value: 'default B'}),
+      expect.objectContaining({value: 'contextual A'}),
+      expect.objectContaining({value: 'default B'}),
+      expect.objectContaining({value: 'default B'}),
+      expect.objectContaining({value: 'default B'}),
+    ]);
+  });
+
+  it('should inspect forwardRef', async () => {
+    const obj = function () {};
+    const Foo = React.forwardRef(function (props, ref) {
+      React.useImperativeHandle(ref, () => obj);
+      return <div />;
+    });
+    const ref = React.createRef();
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo ref={ref} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": null,
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "ImperativeHandle",
+          "subHooks": [],
+          "value": [Function],
+        },
+      ]
+    `);
+  });
+
+  it('should inspect memo', async () => {
+    function InnerFoo(props) {
+      const [value] = React.useState('hello');
+      return <div>{value}</div>;
+    }
+    const Foo = React.memo(InnerFoo);
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    // TODO: Test renderer findByType is broken for memo. Have to search for the inner.
+    const childFiber = renderer.root.findByType(InnerFoo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "InnerFoo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": "hello",
+        },
+      ]
+    `);
+  });
+
+  it('should inspect custom hooks', async () => {
+    function useCustom() {
+      const [value] = React.useState('hello');
+      return value;
+    }
+    function Foo(props) {
+      const value = useCustom();
+      return <div>{value}</div>;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Custom",
+          "subHooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "useCustom",
+                "lineNumber": 0,
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": "hello",
+            },
+          ],
+          "value": undefined,
+        },
+      ]
+    `);
+  });
+
+  it('should support composite useTransition hook', async () => {
+    function Foo(props) {
+      React.useTransition();
+      const memoizedValue = React.useMemo(() => 'hello', []);
+      React.useMemo(() => 'not used', []);
+      return <div>{memoizedValue}</div>;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "Transition",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+
+  it('should update isPending returned from useTransition', async () => {
+    const IndefiniteSuspender = React.lazy(() => new Promise(() => {}));
+    let startTransition;
+    function Foo(props) {
+      const [show, setShow] = React.useState(false);
+      const [isPending, _startTransition] = React.useTransition();
+      React.useMemo(() => 'hello', []);
+      React.useMemo(() => 'not used', []);
+
+      // Otherwise we capture the version from the react-debug-tools dispatcher.
+      if (startTransition === undefined) {
+        startTransition = () => {
+          _startTransition(() => {
+            setShow(true);
+          });
+        };
+      }
+
+      return (
+        <React.Suspense fallback="Loading">
+          {isPending ? 'Pending' : null}
+          {show ? <IndefiniteSuspender /> : null}
+        </React.Suspense>
+      );
+    }
+    const renderer = await act(() => {
+      return ReactTestRenderer.create(<Foo />, {unstable_isConcurrent: true});
+    });
+    expect(renderer).toMatchRenderedOutput(null);
+    let childFiber = renderer.root.findByType(Foo)._currentFiber();
+    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Transition",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+
+    await act(() => {
+      startTransition();
+    });
+
+    expect(renderer).toMatchRenderedOutput('Pending');
+
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Transition",
+          "subHooks": [],
+          "value": true,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+
+  it('should support useDeferredValue hook', async () => {
+    function Foo(props) {
+      React.useDeferredValue('abc');
+      const memoizedValue = React.useMemo(() => 1, []);
+      React.useMemo(() => 2, []);
+      return <div>{memoizedValue}</div>;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "DeferredValue",
+          "subHooks": [],
+          "value": "abc",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": 1,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": 2,
+        },
+      ]
+    `);
+  });
+
+  it('should return the deferred value', async () => {
+    let unsuspend;
+    function Lazy() {
+      return 'Lazy';
+    }
+    const Suspender = React.lazy(
+      () =>
+        new Promise(resolve => {
+          unsuspend = () => resolve({default: Lazy});
+        }),
+    );
+    const Context = React.createContext('default');
+    let setShow;
+    function Foo(props) {
+      const [show, _setShow] = React.useState(false);
+      const deferredShow = React.useDeferredValue(show);
+      const isPending = show !== deferredShow;
+      const contextDisplay = isPending ? React.use(Context) : '<none>';
+      React.useMemo(() => 'hello', []);
+      React.useMemo(() => 'not used', []);
+
+      // Otherwise we capture the version from the react-debug-tools dispatcher.
+      if (setShow === undefined) {
+        setShow = _setShow;
+      }
+
+      return (
+        <React.Suspense fallback="Loading">
+          Context: {contextDisplay}, {isPending ? 'Pending' : 'Nothing Pending'}
+          {deferredShow ? [', ', <Suspender key="suspender" />] : null}
+        </React.Suspense>
+      );
+    }
+    const renderer = await act(() => {
+      return ReactTestRenderer.create(
+        <Context.Provider value="provided">
+          <Foo />
+        </Context.Provider>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    let childFiber = renderer.root.findByType(Foo)._currentFiber();
+    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(renderer).toMatchRenderedOutput('Context: <none>, Nothing Pending');
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "DeferredValue",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+
+    await act(() => {
+      setShow(true);
+    });
+
+    expect(renderer).toMatchRenderedOutput('Context: provided, Pending');
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": true,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "DeferredValue",
+          "subHooks": [],
+          "value": false,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": "provided",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+
+    await act(() => {
+      unsuspend();
+    });
+
+    expect(renderer).toMatchRenderedOutput(
+      'Context: <none>, Nothing Pending, Lazy',
+    );
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": true,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "DeferredValue",
+          "subHooks": [],
+          "value": true,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "hello",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 3,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+
+  it('should support useId hook', async () => {
+    function Foo(props) {
+      const id = React.useId();
+      const [state] = React.useState('hello');
+      return <div id={id}>{state}</div>;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(tree.length).toEqual(2);
+
+    expect(tree[0].id).toEqual(0);
+    expect(tree[0].isStateEditable).toEqual(false);
+    expect(tree[0].name).toEqual('Id');
+    expect(String(tree[0].value).startsWith('_r_')).toBe(true);
+
+    expect(normalizeSourceLoc(tree)[1]).toMatchInlineSnapshot(`
+      {
+        "debugInfo": null,
+        "hookSource": {
+          "columnNumber": 0,
+          "fileName": "**",
+          "functionName": "Foo",
+          "lineNumber": 0,
+        },
+        "id": 1,
+        "isStateEditable": true,
+        "name": "State",
+        "subHooks": [],
+        "value": "hello",
+      }
+    `);
+  });
+
+  describe('useMemoCache', () => {
+    it('should not be inspectable', async () => {
+      function Foo() {
+        const $ = useMemoCache(1);
+        let t0;
+
+        if ($[0] === Symbol.for('react.memo_cache_sentinel')) {
+          t0 = <div>{1}</div>;
+          $[0] = t0;
+        } else {
+          t0 = $[0];
+        }
+
+        return t0;
+      }
+
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Foo />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+      expect(tree.length).toEqual(0);
+    });
+
+    it('should work in combination with other hooks', async () => {
+      function useSomething() {
+        const [something] = React.useState(null);
+        const changeOtherSomething = React.useCallback(() => {}, [something]);
+
+        return [something, changeOtherSomething];
+      }
+
+      function Foo() {
+        const $ = useMemoCache(10);
+
+        useSomething();
+        React.useState(1);
+        React.useEffect(() => {});
+
+        let t0;
+
+        if ($[0] === Symbol.for('react.memo_cache_sentinel')) {
+          t0 = <div>{1}</div>;
+          $[0] = t0;
+        } else {
+          t0 = $[0];
+        }
+
+        return t0;
+      }
+
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Foo />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+      expect(tree.length).toEqual(3);
+    });
+  });
+
+  describe('useDebugValue', () => {
+    it('should support inspectable values for multiple custom hooks', async () => {
+      function useLabeledValue(label) {
+        const [value] = React.useState(label);
+        React.useDebugValue(`custom label ${label}`);
+        return value;
+      }
+      function useAnonymous(label) {
+        const [value] = React.useState(label);
+        return value;
+      }
+      function Example() {
+        useLabeledValue('a');
+        React.useState('b');
+        useAnonymous('c');
+        useLabeledValue('d');
+        return null;
+      }
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Example />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      if (__DEV__) {
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "LabeledValue",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useLabeledValue",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": "a",
+                },
+              ],
+              "value": "custom label a",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": 1,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": "b",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Anonymous",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useAnonymous",
+                    "lineNumber": 0,
+                  },
+                  "id": 2,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": "c",
+                },
+              ],
+              "value": undefined,
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "LabeledValue",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useLabeledValue",
+                    "lineNumber": 0,
+                  },
+                  "id": 3,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": "d",
+                },
+              ],
+              "value": "custom label d",
+            },
+          ]
+        `);
+      } else
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "LabeledValue",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useLabeledValue",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": "a",
+                },
+              ],
+              "value": undefined,
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": 1,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": "b",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Anonymous",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useAnonymous",
+                    "lineNumber": 0,
+                  },
+                  "id": 2,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": "c",
+                },
+              ],
+              "value": undefined,
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "LabeledValue",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useLabeledValue",
+                    "lineNumber": 0,
+                  },
+                  "id": 3,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": "d",
+                },
+              ],
+              "value": undefined,
+            },
+          ]
+        `);
+    });
+
+    it('should support inspectable values for nested custom hooks', async () => {
+      function useInner() {
+        React.useDebugValue('inner');
+        React.useState(0);
+      }
+      function useOuter() {
+        React.useDebugValue('outer');
+        useInner();
+      }
+      function Example() {
+        useOuter();
+        return null;
+      }
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Example />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      if (__DEV__) {
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Outer",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useOuter",
+                    "lineNumber": 0,
+                  },
+                  "id": null,
+                  "isStateEditable": false,
+                  "name": "Inner",
+                  "subHooks": [
+                    {
+                      "debugInfo": null,
+                      "hookSource": {
+                        "columnNumber": 0,
+                        "fileName": "**",
+                        "functionName": "useInner",
+                        "lineNumber": 0,
+                      },
+                      "id": 0,
+                      "isStateEditable": true,
+                      "name": "State",
+                      "subHooks": [],
+                      "value": 0,
+                    },
+                  ],
+                  "value": "inner",
+                },
+              ],
+              "value": "outer",
+            },
+          ]
+        `);
+      } else
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Outer",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useOuter",
+                    "lineNumber": 0,
+                  },
+                  "id": null,
+                  "isStateEditable": false,
+                  "name": "Inner",
+                  "subHooks": [
+                    {
+                      "debugInfo": null,
+                      "hookSource": {
+                        "columnNumber": 0,
+                        "fileName": "**",
+                        "functionName": "useInner",
+                        "lineNumber": 0,
+                      },
+                      "id": 0,
+                      "isStateEditable": true,
+                      "name": "State",
+                      "subHooks": [],
+                      "value": 0,
+                    },
+                  ],
+                  "value": undefined,
+                },
+              ],
+              "value": undefined,
+            },
+          ]
+        `);
+    });
+
+    it('should support multiple inspectable values per custom hooks', async () => {
+      function useMultiLabelCustom() {
+        React.useDebugValue('one');
+        React.useDebugValue('two');
+        React.useDebugValue('three');
+        React.useState(0);
+      }
+      function useSingleLabelCustom(value) {
+        React.useDebugValue(`single ${value}`);
+        React.useState(0);
+      }
+      function Example() {
+        useSingleLabelCustom('one');
+        useMultiLabelCustom();
+        useSingleLabelCustom('two');
+        return null;
+      }
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Example />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      if (__DEV__) {
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "SingleLabelCustom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useSingleLabelCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": "single one",
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "MultiLabelCustom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useMultiLabelCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 1,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": [
+                "one",
+                "two",
+                "three",
+              ],
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "SingleLabelCustom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useSingleLabelCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 2,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": "single two",
+            },
+          ]
+        `);
+      } else
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "SingleLabelCustom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useSingleLabelCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": undefined,
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "MultiLabelCustom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useMultiLabelCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 1,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": undefined,
+            },
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "SingleLabelCustom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useSingleLabelCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 2,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": undefined,
+            },
+          ]
+        `);
+    });
+
+    it('should ignore useDebugValue() made outside of a custom hook', async () => {
+      function Example() {
+        React.useDebugValue('this is invalid');
+        return null;
+      }
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Example />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      expect(tree).toHaveLength(0);
+    });
+
+    it('should support an optional formatter function param', async () => {
+      function useCustom() {
+        React.useDebugValue({bar: 123}, object => `bar:${object.bar}`);
+        React.useState(0);
+      }
+      function Example() {
+        useCustom();
+        return null;
+      }
+      let renderer;
+      await act(() => {
+        renderer = ReactTestRenderer.create(<Example />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      const childFiber = renderer.root.findByType(Example)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+      if (__DEV__) {
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Custom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": "bar:123",
+            },
+          ]
+        `);
+      } else
+        expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+          [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": 0,
+                "fileName": "**",
+                "functionName": "Example",
+                "lineNumber": 0,
+              },
+              "id": null,
+              "isStateEditable": false,
+              "name": "Custom",
+              "subHooks": [
+                {
+                  "debugInfo": null,
+                  "hookSource": {
+                    "columnNumber": 0,
+                    "fileName": "**",
+                    "functionName": "useCustom",
+                    "lineNumber": 0,
+                  },
+                  "id": 0,
+                  "isStateEditable": true,
+                  "name": "State",
+                  "subHooks": [],
+                  "value": 0,
+                },
+              ],
+              "value": undefined,
+            },
+          ]
+        `);
+    });
+  });
+
+  // This test case is based on an open source bug report:
+  // https://github.com/facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
+  it('should properly advance the current hook for useContext', async () => {
+    const MyContext = React.createContext(1);
+
+    let incrementCount;
+
+    function Foo(props) {
+      const context = React.useContext(MyContext);
+      const [data, setData] = React.useState({count: context});
+
+      incrementCount = () => setData(({count}) => ({count: count + 1}));
+
+      return <div>count: {data.count}</div>;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['count: ', '1'],
+    });
+
+    await act(() => incrementCount());
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['count: ', '2'],
+    });
+
+    const childFiber = renderer.root._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": 1,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": {
+            "count": 2,
+          },
+        },
+      ]
+    `);
+  });
+
+  it('should support composite useSyncExternalStore hook', async () => {
+    const useSyncExternalStore = React.useSyncExternalStore;
+    function Foo() {
+      const value = useSyncExternalStore(
+        () => () => {},
+        () => 'snapshot',
+      );
+      React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
+      return value;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "SyncExternalStore",
+          "subHooks": [],
+          "value": "snapshot",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "memo",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+
+  it('should support use(Context) hook', async () => {
+    const Context = React.createContext('default');
+    function Foo() {
+      const value = React.use(Context);
+      React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
+
+      return value;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": "default",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "memo",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+
+  it('should support useOptimistic hook', async () => {
+    const useOptimistic = React.useOptimistic;
+    function Foo() {
+      const [value] = useOptimistic('abc', currentState => currentState);
+      React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
+      return value;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "Optimistic",
+          "subHooks": [],
+          "value": "abc",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "memo",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+
+  it('should support useActionState hook', async () => {
+    function Foo() {
+      const [value] = React.useActionState(function increment(n) {
+        return n;
+      }, 0);
+      React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
+
+      return value;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": false,
+          "name": "ActionState",
+          "subHooks": [],
+          "value": 0,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "memo",
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "not used",
+        },
+      ]
+    `);
+  });
+});
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js
new file mode 100644
index 00000000000..3ef3c2f3a7b
--- /dev/null
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 jsdom
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDebugTools;
+let act;
+
+function normalizeSourceLoc(tree) {
+  tree.forEach(node => {
+    if (node.hookSource) {
+      node.hookSource.fileName = '**';
+      node.hookSource.lineNumber = 0;
+      node.hookSource.columnNumber = 0;
+    }
+    normalizeSourceLoc(node.subHooks);
+  });
+  return tree;
+}
+
+describe('ReactHooksInspectionIntegration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ReactDebugTools = require('react-debug-tools');
+  });
+
+  it('should support useFormStatus hook', async () => {
+    function FormStatus() {
+      const status = ReactDOM.useFormStatus();
+      React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
+
+      return JSON.stringify(status);
+    }
+
+    const treeWithoutFiber = ReactDebugTools.inspectHooks(FormStatus);
+    expect(normalizeSourceLoc(treeWithoutFiber)).toEqual([
+      {
+        debugInfo: null,
+        hookSource: {
+          columnNumber: 0,
+          fileName: '**',
+          functionName: 'FormStatus',
+          lineNumber: 0,
+        },
+        id: null,
+        isStateEditable: false,
+        name: 'FormStatus',
+        subHooks: [],
+        value: null,
+      },
+      {
+        debugInfo: null,
+        hookSource: {
+          columnNumber: 0,
+          fileName: '**',
+          functionName: 'FormStatus',
+          lineNumber: 0,
+        },
+        id: 0,
+        isStateEditable: false,
+        name: 'Memo',
+        subHooks: [],
+        value: 'memo',
+      },
+      {
+        debugInfo: null,
+        hookSource: {
+          columnNumber: 0,
+          fileName: '**',
+          functionName: 'FormStatus',
+          lineNumber: 0,
+        },
+        id: 1,
+        isStateEditable: false,
+        name: 'Memo',
+        subHooks: [],
+        value: 'not used',
+      },
+    ]);
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    await act(() => {
+      root.render(
+        <form>
+          <FormStatus />
+        </form>,
+      );
+    });
+
+    // Implementation detail. Feel free to adjust the position of the Fiber in the tree.
+    const formStatusFiber = root._internalRoot.current.child.child;
+    const treeWithFiber = ReactDebugTools.inspectHooksOfFiber(formStatusFiber);
+    expect(normalizeSourceLoc(treeWithFiber)).toEqual([
+      {
+        debugInfo: null,
+        hookSource: {
+          columnNumber: 0,
+          fileName: '**',
+          functionName: 'FormStatus',
+          lineNumber: 0,
+        },
+        id: null,
+        isStateEditable: false,
+        name: 'FormStatus',
+        subHooks: [],
+        value: {
+          action: null,
+          data: null,
+          method: null,
+          pending: false,
+        },
+      },
+      {
+        debugInfo: null,
+        hookSource: {
+          columnNumber: 0,
+          fileName: '**',
+          functionName: 'FormStatus',
+          lineNumber: 0,
+        },
+        id: 0,
+        isStateEditable: false,
+        name: 'Memo',
+        subHooks: [],
+        value: 'memo',
+      },
+      {
+        debugInfo: null,
+        hookSource: {
+          columnNumber: 0,
+          fileName: '**',
+          functionName: 'FormStatus',
+          lineNumber: 0,
+        },
+        id: 1,
+        isStateEditable: false,
+        name: 'Memo',
+        subHooks: [],
+        value: 'not used',
+      },
+    ]);
+  });
+});
diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
new file mode 100644
index 00000000000..21f4f697cf3
--- /dev/null
+++ b/packages/react-devtools-core/README.md
@@ -0,0 +1,152 @@
+# `react-devtools-core`
+
+This package provides low-level APIs to support renderers like [React Native](https://github.com/facebook/react-native). If you're looking for the standalone React DevTools UI, **we suggest using [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools) instead of using this package directly**.
+
+This package provides two entrypoints: labeled "backend" and "standalone" (frontend). Both APIs are described below.
+
+# Backend API
+
+Backend APIs are embedded in _development_ builds of renderers like [React Native](https://github.com/facebook/react-native) in order to connect to the React DevTools UI.
+
+### Example
+
+If you are building a non-browser-based React renderer, you can use the backend API like so:
+
+```js
+if (process.env.NODE_ENV !== 'production') {
+  const { initialize, connectToDevTools } = require("react-devtools-core");
+
+  initialize(settings);
+  // Must be called before packages like react or react-native are imported
+  connectToDevTools({...config});
+}
+```
+
+> **NOTE** that this API (`connectToDevTools`) must be (1) run in the same context as React and (2) must be called before React packages are imported (e.g. `react`, `react-dom`, `react-native`).
+
+### `initialize` arguments
+| Argument   | Description                                                                                                                                                                                                                                                                                   |
+|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `settings` | Optional. If not specified, or received as null, then default settings are used. Can be plain object or a Promise that resolves with the [plain settings object](#Settings). If Promise rejects, the console will not be patched and some console features from React DevTools will not work. |
+
+#### `Settings`
+| Spec                                                                                                                                                                           | Default value                                                                                                                                                        |
+|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| <pre>{<br>  appendComponentStack: boolean,<br>  breakOnConsoleErrors: boolean,<br>  showInlineWarningsAndErrors: boolean,<br>  hideConsoleLogsInStrictMode: boolean,<br>  disableSecondConsoleLogDimmingInStrictMode: boolean<br>}</pre> | <pre>{<br>  appendComponentStack: true,<br>  breakOnConsoleErrors: false,<br>  showInlineWarningsAndErrors: true,<br>  hideConsoleLogsInStrictMode: false,<br>  disableSecondConsoleLogDimmingInStrictMode: false<br>}</pre> |
+
+### `connectToDevTools` options
+| Prop                   | Default       | Description                                                                                                               |
+|------------------------|---------------|---------------------------------------------------------------------------------------------------------------------------|
+| `host`                 | `"localhost"` | Socket connection to frontend should use this host.                                                                       |
+| `isAppActive`          |               | (Optional) function that returns true/false, telling DevTools when it's ready to connect to React.                        |
+| `port`                 | `8097`        | Socket connection to frontend should use this port.                                                                       |
+| `resolveRNStyle`       |               | (Optional) function that accepts a key (number) and returns a style (object); used by React Native.                       |
+| `retryConnectionDelay` | `200`         | Delay (ms) to wait between retrying a failed Websocket connection                                                         |
+| `useHttps`             | `false`       | Socket connection to frontend should use secure protocol (wss).                                                           |
+| `websocket`            |               | Custom `WebSocket` connection to frontend; overrides `host` and `port` settings.                                          |
+| `onSettingsUpdated`    |               | A callback that will be called when the user updates the settings in the UI. You can use it for persisting user settings. |                                                                                         |
+
+
+### `connectWithCustomMessagingProtocol` options
+| Prop                | Description                                                                                                                                                    |
+|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `onSubscribe`       | Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). |
+| `onUnsubscribe`     | Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend).                       |
+| `onMessage`         | Function, which receives 2 arguments: event (string) and payload (any). Called when backend emits a message, which should be sent to the frontend.             |
+| `onSettingsUpdated` | A callback that will be called when the user updates the settings in the UI. You can use it for persisting user settings.                                      |
+
+Unlike `connectToDevTools`, `connectWithCustomMessagingProtocol` returns a callback, which can be used for unsubscribing the backend from the global DevTools hook.
+
+# Frontend API
+
+Frontend APIs can be used to render the DevTools UI into a DOM node. One example of this is [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools) which wraps DevTools in an Electron app.
+
+### Example
+```js
+import DevtoolsUI from "react-devtools-core/standalone";
+
+// See the full list of API methods in documentation below.
+const { setContentDOMNode, startServer } = DevtoolsUI;
+
+// Render DevTools UI into a DOM element.
+setContentDOMNode(document.getElementById("container"));
+
+// Start socket server used to communicate between backend and frontend.
+startServer(
+  // Port defaults to 8097
+  1234,
+
+  // Host defaults to "localhost"
+  "example.devserver.com",
+
+  // Optional config for secure socket (WSS).
+  {
+    key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
+    cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
+  }
+);
+```
+
+### Exported methods
+The `default` export is an object defining the methods described below.
+
+These methods support chaining for convenience. For example:
+```js
+const DevtoolsUI = require("react-devtools-core/standalone");
+DevtoolsUI.setContentDOMNode(element).startServer();
+```
+
+#### `connectToSocket(socket: WebSocket)`
+> This is an advanced config function that is typically not used.
+
+Custom `WebSocket` connection to use for communication between DevTools frontend and backend. Calling this method automatically initializes the DevTools UI (similar to calling `startServer()`).
+
+#### `openProfiler()`
+Automatically select the "Profiler" tab in the DevTools UI.
+
+#### `setContentDOMNode(element: HTMLElement)`
+Set the DOM element DevTools UI should be rendered into on initialization.
+
+#### `setDisconnectedCallback(callback: Function)`
+_Optional_ callback to be notified when DevTools `WebSocket` closes (or errors).
+
+#### `setProjectRoots(roots: Array<string>)`
+_Optional_ set of root directories for source files. These roots can be used to open an inspected component's source code using an IDE.
+
+#### `setStatusListener(callback: Function)`
+_Optional_ callback to be notified of socket server events (e.g. initialized, errored, connected).
+
+This callback receives two parameters:
+```js
+function onStatus(
+  message: string,
+  status: 'server-connected' | 'devtools-connected' | 'error'
+): void {
+  // ...
+}
+```
+
+#### `startServer(port?: number, host?: string, httpsOptions?: Object, loggerOptions?: Object)`
+Start a socket server (used to communicate between backend and frontend) and renders the DevTools UI.
+
+This method accepts the following parameters:
+| Name | Default | Description |
+|---|---|---|
+| `port` | `8097` | Socket connection to backend should use this port. |
+| `host` | `"localhost"` | Socket connection to backend should use this host. |
+| `httpsOptions` | | _Optional_ object defining `key` and `cert` strings. |
+| `loggerOptions` | | _Optional_ object defining a `surface` string (to be included with DevTools logging events). |
+
+# 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
+```
+
+Run the standalone UI using `yarn start` in the [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools).
diff --git a/packages/react-devtools-core/backend.js b/packages/react-devtools-core/backend.js
new file mode 100644
index 00000000000..2c2a32d4512
--- /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 00000000000..54b89e72e8a
--- /dev/null
+++ b/packages/react-devtools-core/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-devtools-core",
+  "version": "7.0.1",
+  "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",
+    "standalone.js"
+  ],
+  "scripts": {
+    "build": "yarn build:backend && yarn build:standalone",
+    "build:backend": "cross-env NODE_ENV=production webpack --config webpack.backend.js",
+    "build:backend:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/backend-fb webpack --config webpack.backend.js",
+    "build:standalone": "cross-env NODE_ENV=production webpack --config webpack.standalone.js",
+    "build:standalone:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/standalone-fb 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": {
+    "shell-quote": "^1.6.1",
+    "ws": "^7"
+  },
+  "devDependencies": {
+    "cross-env": "^3.1.4",
+    "process": "0.11.10",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "workerize-loader": "^2.0.2"
+  }
+}
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
new file mode 100644
index 00000000000..4cca0887c57
--- /dev/null
+++ b/packages/react-devtools-core/src/backend.js
@@ -0,0 +1,426 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  getIsReloadAndProfileSupported,
+} from 'react-devtools-shared/src/utils';
+
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  ComponentFilter,
+  Wall,
+} from 'react-devtools-shared/src/frontend/types';
+import type {
+  DevToolsHook,
+  DevToolsHookSettings,
+  ProfilingSettings,
+} 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,
+  useHttps?: boolean,
+  resolveRNStyle?: ResolveNativeStyle,
+  retryConnectionDelay?: number,
+  isAppActive?: () => boolean,
+  websocket?: ?WebSocket,
+  onSettingsUpdated?: (settings: $ReadOnly<DevToolsHookSettings>) => void,
+  isReloadAndProfileSupported?: boolean,
+  isProfiling?: boolean,
+  onReloadAndProfile?: (recordChangeDescriptions: boolean) => void,
+  onReloadAndProfileFlagsReset?: () => void,
+};
+
+let savedComponentFilters: Array<ComponentFilter> =
+  getDefaultComponentFilters();
+
+function debug(methodName: string, ...args: Array<mixed>) {
+  if (__DEBUG__) {
+    console.log(
+      `%c[core/backend] %c${methodName}`,
+      'color: teal; font-weight: bold;',
+      'font-weight: bold;',
+      ...args,
+    );
+  }
+}
+
+export function initialize(
+  maybeSettingsOrSettingsPromise?:
+    | DevToolsHookSettings
+    | Promise<DevToolsHookSettings>,
+  shouldStartProfilingNow: boolean = false,
+  profilingSettings?: ProfilingSettings,
+) {
+  installHook(
+    window,
+    maybeSettingsOrSettingsPromise,
+    shouldStartProfilingNow,
+    profilingSettings,
+  );
+}
+
+export function connectToDevTools(options: ?ConnectOptions) {
+  const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook == null) {
+    // DevTools didn't get injected into this page (maybe b'c of the contentType).
+    return;
+  }
+
+  const {
+    host = 'localhost',
+    nativeStyleEditorValidAttributes,
+    useHttps = false,
+    port = 8097,
+    websocket,
+    resolveRNStyle = (null: $FlowFixMe),
+    retryConnectionDelay = 2000,
+    isAppActive = () => true,
+    onSettingsUpdated,
+    isReloadAndProfileSupported = getIsReloadAndProfileSupported(),
+    isProfiling,
+    onReloadAndProfile,
+    onReloadAndProfileFlagsReset,
+  } = options || {};
+
+  const protocol = useHttps ? 'wss' : 'ws';
+  let retryTimeoutID: TimeoutID | null = null;
+
+  function scheduleRetry() {
+    if (retryTimeoutID === null) {
+      // Two seconds because RN had issues with quick retries.
+      retryTimeoutID = setTimeout(
+        () => connectToDevTools(options),
+        retryConnectionDelay,
+      );
+    }
+  }
+
+  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 = protocol + '://' + 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(
+      '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) {
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      bridge.send('overrideComponentFilters', savedComponentFilters);
+    }
+
+    // TODO (npm-packages) Warn if "isBackendStorageAPISupported"
+    // $FlowFixMe[incompatible-call] found when upgrading Flow
+    const agent = new Agent(bridge, isProfiling, onReloadAndProfile);
+    if (typeof onReloadAndProfileFlagsReset === 'function') {
+      onReloadAndProfileFlagsReset();
+    }
+
+    if (onSettingsUpdated != null) {
+      agent.addListener('updateHookSettings', onSettingsUpdated);
+    }
+    agent.addListener('shutdown', () => {
+      if (onSettingsUpdated != null) {
+        agent.removeListener('updateHookSettings', onSettingsUpdated);
+      }
+
+      // 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, isReloadAndProfileSupported);
+
+    // Setup React Native style editor if the environment supports it.
+    if (resolveRNStyle != null || hook.resolveRNStyle != null) {
+      setupNativeStyleEditor(
+        // $FlowFixMe[incompatible-call] found when upgrading Flow
+        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: $FlowFixMe) {
+              lazyResolveRNStyle = value;
+              initAfterTick();
+            },
+          }: Object),
+        );
+      }
+      if (!hook.hasOwnProperty('nativeStyleEditorValidAttributes')) {
+        Object.defineProperty(
+          hook,
+          'nativeStyleEditorValidAttributes',
+          ({
+            enumerable: false,
+            get() {
+              return lazyNativeStyleEditorValidAttributes;
+            },
+            set(value: $FlowFixMe) {
+              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: MessageEvent<>) {
+    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;
+      }
+    });
+  }
+}
+
+type ConnectWithCustomMessagingOptions = {
+  onSubscribe: (cb: Function) => void,
+  onUnsubscribe: (cb: Function) => void,
+  onMessage: (event: string, payload: any) => void,
+  nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
+  resolveRNStyle?: ResolveNativeStyle,
+  onSettingsUpdated?: (settings: $ReadOnly<DevToolsHookSettings>) => void,
+  isReloadAndProfileSupported?: boolean,
+  isProfiling?: boolean,
+  onReloadAndProfile?: (recordChangeDescriptions: boolean) => void,
+  onReloadAndProfileFlagsReset?: () => void,
+};
+
+export function connectWithCustomMessagingProtocol({
+  onSubscribe,
+  onUnsubscribe,
+  onMessage,
+  nativeStyleEditorValidAttributes,
+  resolveRNStyle,
+  onSettingsUpdated,
+  isReloadAndProfileSupported = getIsReloadAndProfileSupported(),
+  isProfiling,
+  onReloadAndProfile,
+  onReloadAndProfileFlagsReset,
+}: ConnectWithCustomMessagingOptions): Function {
+  const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook == null) {
+    // DevTools didn't get injected into this page (maybe b'c of the contentType).
+    return;
+  }
+
+  const wall: Wall = {
+    listen(fn: Function) {
+      onSubscribe(fn);
+
+      return () => {
+        onUnsubscribe(fn);
+      };
+    },
+    send(event: string, payload: any) {
+      onMessage(event, payload);
+    },
+  };
+
+  const bridge: BackendBridge = new Bridge(wall);
+
+  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;
+    },
+  );
+
+  if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {
+    bridge.send('overrideComponentFilters', savedComponentFilters);
+  }
+
+  const agent = new Agent(bridge, isProfiling, onReloadAndProfile);
+  if (typeof onReloadAndProfileFlagsReset === 'function') {
+    onReloadAndProfileFlagsReset();
+  }
+
+  if (onSettingsUpdated != null) {
+    agent.addListener('updateHookSettings', onSettingsUpdated);
+  }
+  agent.addListener('shutdown', () => {
+    if (onSettingsUpdated != null) {
+      agent.removeListener('updateHookSettings', onSettingsUpdated);
+    }
+
+    // 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');
+  });
+
+  const unsubscribeBackend = initBackend(
+    hook,
+    agent,
+    window,
+    isReloadAndProfileSupported,
+  );
+
+  const nativeStyleResolver: ResolveNativeStyle | void =
+    resolveRNStyle || hook.resolveRNStyle;
+
+  if (nativeStyleResolver != null) {
+    const validAttributes =
+      nativeStyleEditorValidAttributes ||
+      hook.nativeStyleEditorValidAttributes ||
+      null;
+
+    setupNativeStyleEditor(bridge, agent, nativeStyleResolver, validAttributes);
+  }
+
+  return unsubscribeBackend;
+}
diff --git a/packages/react-devtools-core/src/editor.js b/packages/react-devtools-core/src/editor.js
new file mode 100644
index 00000000000..50728c941cf
--- /dev/null
+++ b/packages/react-devtools-core/src/editor.js
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-school 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;
+  }
+
+  const [editor, ...destructuredArgs] = guessEditor();
+  if (!editor) {
+    return;
+  }
+
+  let args = destructuredArgs;
+
+  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.
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    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 () {});
+  // $FlowFixMe[incompatible-use] found when upgrading Flow
+  childProcess.on('exit', function () {
+    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 00000000000..f8286783a9b
--- /dev/null
+++ b/packages/react-devtools-core/src/standalone.js
@@ -0,0 +1,414 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {flushSync} from 'react-dom';
+import {createRoot} from 'react-dom/client';
+import Bridge from 'react-devtools-shared/src/bridge';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {getSavedComponentFilters} from 'react-devtools-shared/src/utils';
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
+import {Server} from 'ws';
+import {join} from 'path';
+import {readFileSync} from 'fs';
+import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+import {doesFilePathExist, launchEditor} from './editor';
+import {
+  __DEBUG__,
+  LOCAL_STORAGE_DEFAULT_TAB_KEY,
+} from 'react-devtools-shared/src/constants';
+import {localStorageSetItem} from 'react-devtools-shared/src/storage';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
+
+export type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
+export type StatusListener = (message: string, status: StatusTypes) => void;
+export type OnDisconnectedCallback = () => void;
+
+let node: HTMLElement = ((null: any): HTMLElement);
+let nodeWaitingToConnectHTML: string = '';
+let projectRoots: Array<string> = [];
+let statusListener: StatusListener = (
+  message: string,
+  status?: StatusTypes,
+) => {};
+let disconnectedCallback: OnDisconnectedCallback = () => {};
+
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+function hookNamesModuleLoaderFunction() {
+  return import(
+    /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+  );
+}
+
+function setContentDOMNode(value: HTMLElement): typeof DevtoolsUI {
+  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): typeof DevtoolsUI {
+  statusListener = value;
+  return DevtoolsUI;
+}
+
+function setDisconnectedCallback(
+  value: OnDisconnectedCallback,
+): typeof DevtoolsUI {
+  disconnectedCallback = value;
+  return DevtoolsUI;
+}
+
+let bridge: FrontendBridge | null = null;
+let store: Store | null = null;
+let root = null;
+
+const log = (...args: Array<mixed>) => console.log('[React DevTools]', ...args);
+log.warn = (...args: Array<mixed>) => console.warn('[React DevTools]', ...args);
+log.error = (...args: Array<mixed>) =>
+  console.error('[React DevTools]', ...args);
+
+function debug(methodName: string, ...args: Array<mixed>) {
+  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,
+        hookNamesModuleLoaderFunction,
+        showTabBar: true,
+        store: ((store: any): Store),
+        warnIfLegacyBackendDetected: true,
+        viewElementSourceFunction,
+        fetchFileWithCaching,
+      }),
+    );
+  }, 100);
+}
+
+const resourceCache: Map<string, string> = new Map();
+
+// As a potential improvement, this should be done from the backend of RDT.
+// Browser extension is doing this via exchanging messages
+// between devtools_page and dedicated content script for it, see `fetchFileWithCaching.js`.
+async function fetchFileWithCaching(url: string) {
+  if (resourceCache.has(url)) {
+    return Promise.resolve(resourceCache.get(url));
+  }
+
+  return fetch(url)
+    .then(data => data.text())
+    .then(content => {
+      resourceCache.set(url, content);
+
+      return content;
+    });
+}
+
+function canViewElementSourceFunction(
+  _source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
+): boolean {
+  if (symbolicatedSource == null) {
+    return false;
+  }
+  const [, sourceURL, ,] = symbolicatedSource;
+
+  return doesFilePathExist(sourceURL, projectRoots);
+}
+
+function viewElementSourceFunction(
+  _source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
+): void {
+  if (symbolicatedSource == null) {
+    return;
+  }
+
+  const [, sourceURL, line] = symbolicatedSource;
+  launchEditor(sourceURL, line, projectRoots);
+}
+
+function onDisconnected() {
+  safeUnmount();
+
+  node.innerHTML = nodeWaitingToConnectHTML;
+
+  disconnectedCallback();
+}
+
+function onError({code, message}: $FlowFixMe) {
+  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 openProfiler() {
+  // Mocked up bridge and store to allow the DevTools to be rendered
+  bridge = new Bridge({listen: () => {}, send: () => {}});
+  store = new Store(bridge, {});
+
+  // Ensure the Profiler tab is shown initially.
+  localStorageSetItem(
+    LOCAL_STORAGE_DEFAULT_TAB_KEY,
+    JSON.stringify('profiler'),
+  );
+
+  reload();
+}
+
+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();
+  });
+
+  // $FlowFixMe[incompatible-call] found when upgrading Flow
+  store = new Store(bridge, {
+    checkBridgeProtocolCompatibility: true,
+    supportsTraceUpdates: true,
+    supportsClickToInspect: true,
+  });
+
+  log('Connected');
+  statusListener('DevTools initialized.', 'devtools-connected');
+  reload();
+}
+
+let startServerTimeoutID: TimeoutID | null = null;
+
+function connectToSocket(socket: WebSocket): {close(): void} {
+  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();
+    },
+  };
+}
+
+type ServerOptions = {
+  key?: string,
+  cert?: string,
+};
+
+type LoggerOptions = {
+  surface?: ?string,
+};
+
+function startServer(
+  port: number = 8097,
+  host: string = 'localhost',
+  httpsOptions?: ServerOptions,
+  loggerOptions?: LoggerOptions,
+): {close(): void} {
+  registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
+
+  const useHttps = !!httpsOptions;
+  const httpServer = useHttps
+    ? require('https').createServer(httpsOptions)
+    : require('http').createServer();
+  const server = new Server({server: httpServer, maxPayload: 1e9});
+  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: $FlowFixMe) => {
+    onError(event);
+    log.error('Failed to start the DevTools server', event);
+    startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+  });
+
+  httpServer.on('request', (request: $FlowFixMe, response: $FlowFixMe) => {
+    // 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(),
+      )};`;
+
+    response.end(
+      savedPreferencesString +
+        '\n;' +
+        backendFile.toString() +
+        '\n;' +
+        'ReactDevToolsBackend.initialize();' +
+        '\n' +
+        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', useHttps: ${
+          useHttps ? 'true' : 'false'
+        }});
+        `,
+    );
+  });
+
+  httpServer.on('error', (event: $FlowFixMe) => {
+    onError(event);
+    statusListener('Failed to start the server.', 'error');
+    startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+  });
+
+  httpServer.listen(port, () => {
+    statusListener(
+      'The server is listening on the port ' + port + '.',
+      'server-connected',
+    );
+  });
+
+  return {
+    close: function () {
+      connected = null;
+      onDisconnected();
+      if (startServerTimeoutID !== null) {
+        clearTimeout(startServerTimeoutID);
+      }
+      server.close();
+      httpServer.close();
+    },
+  };
+}
+
+const DevtoolsUI = {
+  connectToSocket,
+  setContentDOMNode,
+  setProjectRoots,
+  setStatusListener,
+  setDisconnectedCallback,
+  startServer,
+  openProfiler,
+};
+
+export default DevtoolsUI;
diff --git a/packages/react-devtools-core/standalone.js b/packages/react-devtools-core/standalone.js
new file mode 100644
index 00000000000..fe55aa11d5d
--- /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 00000000000..c1312fc6d8e
--- /dev/null
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -0,0 +1,100 @@
+const {resolve} = require('path');
+const Webpack = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'core/backend-oss';
+
+// This targets RN/Hermes.
+process.env.BABEL_CONFIG_ADDITIONAL_TARGETS = JSON.stringify({
+  ie: '11',
+});
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'eval-cheap-module-source-map' : 'source-map',
+  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-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  node: {
+    global: false,
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__,
+      __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
+      __IS_FIREFOX__: false,
+      __IS_CHROME__: false,
+      __IS_EDGE__: false,
+      __IS_NATIVE__: true,
+      __IS_INTERNAL_MCP_BUILD__: false,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+    }),
+  ],
+  optimization: {
+    minimize: false,
+  },
+  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 00000000000..6279ba7fb34
--- /dev/null
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -0,0 +1,149 @@
+const {resolve} = require('path');
+const Webpack = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+const EDITOR_URL = process.env.EDITOR_URL || null;
+const LOGGING_URL = process.env.LOGGING_URL || null;
+
+const featureFlagTarget =
+  process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss';
+
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'eval-cheap-module-source-map' : 'source-map',
+  target: 'electron-main',
+  entry: {
+    standalone: './src/standalone.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
+    library: {
+      type: 'commonjs2',
+    },
+  },
+  externals: {
+    bufferutil: 'commonjs bufferutil',
+    'utf-8-validate': 'commonjs utf-8-validate',
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      '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,
+
+    global: false,
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__,
+      __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
+      __IS_NATIVE__: true,
+      __IS_FIREFOX__: false,
+      __IS_CHROME__: false,
+      __IS_EDGE__: false,
+      __IS_INTERNAL_MCP_BUILD__: false,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              // Workers would have to be exposed on a public path in order to outline them.
+              inline: true,
+              name: '[name]',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: babelOptions,
+      },
+      {
+        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 00000000000..ebec77b77e7
--- /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 00000000000..d3e7689ea7e
--- /dev/null
+++ b/packages/react-devtools-extensions/README.md
@@ -0,0 +1,49 @@
+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/)
+* [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
+
+## 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.
+
+To install all necessary dependencies, run the following command from the root of the repository:
+
+```sh
+yarn install
+```
+
+#### 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 commands starting from the root of the repository:
+```sh
+cd scripts/release
+yarn install
+./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
+
+yarn build:edge # => packages/react-devtools-extensions/edge/build
+yarn run test:edge # Test Edge extension
+```
diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
new file mode 100644
index 00000000000..1c8322cd5c9
--- /dev/null
+++ b/packages/react-devtools-extensions/build.js
@@ -0,0 +1,198 @@
+#!/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, pathExistsSync} = require('fs-extra');
+const {join, resolve, basename} = 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'];
+
+/**
+ * Ensures that a local build of the dependencies exist either by downloading
+ * or running a local build via one of the `react-build-fordevtools*` scripts.
+ */
+const ensureLocalBuild = async () => {
+  const buildDir = resolve(__dirname, '..', '..', 'build');
+  const nodeModulesDir = join(buildDir, 'node_modules');
+
+  // TODO: remove this check whenever the CI pipeline is complete.
+  // See build-all-release-channels.js
+  const currentBuildDir = resolve(
+    __dirname,
+    '..',
+    '..',
+    'build',
+    'oss-experimental',
+  );
+
+  if (pathExistsSync(buildDir)) {
+    return; // all good.
+  }
+
+  if (pathExistsSync(currentBuildDir)) {
+    await ensureDir(buildDir);
+    await copy(currentBuildDir, nodeModulesDir);
+    return; // all good.
+  }
+
+  throw Error(
+    'Could not find build artifacts in repo root. See README for prerequisites.',
+  );
+};
+
+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, envExtension = {}) => {
+  const binPath = join(tempPath, 'bin');
+  const zipPath = join(tempPath, 'zip');
+  const mergedEnv = {...process.env, ...envExtension};
+
+  const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
+  execSync(
+    `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: mergedEnv,
+      stdio: 'inherit',
+    },
+  );
+
+  // Make temp dir
+  await ensureDir(zipPath);
+
+  const copiedManifestPath = join(zipPath, 'manifest.json');
+
+  let webpackStatsFilePath = null;
+  // Copy unbuilt source files to zip dir to be packaged:
+  await copy(binPath, join(zipPath, 'build'), {
+    filter: filePath => {
+      if (basename(filePath).startsWith('webpack-stats.')) {
+        webpackStatsFilePath = filePath;
+        // The ZIP is the actual extension and doesn't need this metadata.
+        return false;
+      }
+      return true;
+    },
+  });
+  if (webpackStatsFilePath !== null) {
+    await copy(
+      webpackStatsFilePath,
+      join(tempPath, basename(webpackStatsFilePath)),
+    );
+    webpackStatsFilePath = join(tempPath, basename(webpackStatsFilePath));
+  }
+  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}.`;
+
+  if (process.env.NODE_ENV === 'development') {
+    // When building the local development version of the
+    // extension we want to be able to have a stable extension ID
+    // for the local build (in order to be able to reliably detect
+    // duplicate installations of DevTools).
+    // By specifying a key in the built manifest.json file,
+    // we can make it so the generated extension ID is stable.
+    // For more details see the docs here: https://developer.chrome.com/docs/extensions/mv2/manifest/key/
+    manifest.key = 'reactdevtoolslocalbuilduniquekey';
+  }
+
+  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((resolvePromise, rejectPromise) => {
+    archive
+      .directory(zipPath, false)
+      .on('error', err => rejectPromise(err))
+      .pipe(zipStream);
+    archive.finalize();
+    zipStream.on('close', () => resolvePromise());
+  });
+
+  return webpackStatsFilePath;
+};
+
+const postProcess = async (tempPath, destinationPath, webpackStatsFilePath) => {
+  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
+  if (webpackStatsFilePath !== null) {
+    await move(
+      webpackStatsFilePath,
+      join(destinationPath, basename(webpackStatsFilePath)),
+    );
+  } else {
+    console.log('No webpack-stats.json file was generated.');
+  }
+  await remove(tempPath); // Clean up temp directory and files
+};
+
+const SUPPORTED_BUILDS = ['chrome', 'firefox', 'edge'];
+
+const main = async buildId => {
+  if (!SUPPORTED_BUILDS.includes(buildId)) {
+    throw new Error(
+      `Unexpected build id - "${buildId}". Use one of ${JSON.stringify(
+        SUPPORTED_BUILDS,
+      )}.`,
+    );
+  }
+
+  const root = join(__dirname, buildId);
+  const manifestPath = join(root, 'manifest.json');
+  const destinationPath = join(root, 'build');
+
+  const envExtension = {
+    IS_CHROME: buildId === 'chrome',
+    IS_FIREFOX: buildId === 'firefox',
+    IS_EDGE: buildId === 'edge',
+  };
+
+  try {
+    const tempPath = join(__dirname, 'build', buildId);
+    await ensureLocalBuild();
+    await preProcess(destinationPath, tempPath);
+    const webpackStatsFilePath = await build(
+      tempPath,
+      manifestPath,
+      envExtension,
+    );
+
+    const builtUnpackedPath = join(destinationPath, 'unpacked');
+    await postProcess(tempPath, destinationPath, webpackStatsFilePath);
+
+    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 00000000000..dd77d072c82
--- /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 00000000000..1cadb6c824f
--- /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 00000000000..b8c276ec0ec
--- /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 00000000000..9bb0ab1177a
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -0,0 +1,65 @@
+{
+  "manifest_version": 3,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Chrome Developer Tools.",
+  "version": "7.0.1",
+  "version_name": "7.0.1",
+  "minimum_chrome_version": "114",
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+  "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": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "main.html",
+        "panel.html",
+        "build/*.js"
+      ],
+      "matches": [
+        "<all_urls>"
+      ],
+      "extension_ids": []
+    }
+  ],
+  "background": {
+    "service_worker": "build/background.js"
+  },
+  "permissions": [
+    "scripting",
+    "storage",
+    "tabs"
+  ],
+  "optional_permissions": [
+    "clipboardWrite"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/prepareInjection.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 00000000000..e541ec866d0
--- /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 00000000000..868f1c90c90
--- /dev/null
+++ b/packages/react-devtools-extensions/chrome/test.js
@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chromeLaunch = require('chrome-launch');
+const {resolve} = require('path');
+const {argv} = require('yargs');
+
+const EXTENSION_PATH = resolve('./chrome/build/unpacked');
+const START_URL = argv.url || 'https://react.dev/';
+
+chromeLaunch(START_URL, {
+  args: [
+    // Load the React DevTools extension
+    `--load-extension=${EXTENSION_PATH}`,
+
+    // Automatically open DevTools window
+    '--auto-open-devtools-for-tabs',
+
+    // Remembers previous session settings (e.g. DevTools size/position)
+    '--user-data-dir=./.tempUserDataDir',
+  ],
+});
diff --git a/packages/react-devtools-extensions/deploy.chrome.html b/packages/react-devtools-extensions/deploy.chrome.html
new file mode 100644
index 00000000000..eb70be0024e
--- /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.edge.html b/packages/react-devtools-extensions/deploy.edge.html
new file mode 100644
index 00000000000..10f51c570e6
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.edge.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>edge://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 00000000000..d2879a17c49
--- /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 00000000000..7bc40cdc73e
--- /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="https://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 00000000000..046a1b4696c
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.js
@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec, execSync} = require('child_process');
+const {readFileSync, writeFileSync} = require('fs');
+const {join} = require('path');
+const shell = require('shelljs');
+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',
+  });
+  shell.cp(join(root, 'now.json'), join(buildPath, 'now.json'));
+  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().slice(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/edge/README.md b/packages/react-devtools-extensions/edge/README.md
new file mode 100644
index 00000000000..af7ff30a204
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/README.md
@@ -0,0 +1,12 @@
+# The Microsoft Edge 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:edge` from the root directory.
+
+## Testing in Microsoft Edge
+
+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/edge/build.js b/packages/react-devtools-extensions/edge/build.js
new file mode 100644
index 00000000000..246f49e6897
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/build.js
@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const {execSync} = require('child_process');
+const {join} = require('path');
+const {argv} = require('yargs');
+
+const build = require('../build');
+
+const main = async () => {
+  const {crx} = argv;
+
+  await build('edge');
+
+  const cwd = join(__dirname, 'build');
+  if (crx) {
+    const crxPath = join(__dirname, '..', 'node_modules', '.bin', 'crx');
+
+    execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
+      cwd,
+    });
+  }
+
+  console.log(chalk.green('\nThe Microsoft Edge extension has been built!'));
+
+  console.log(chalk.green('\nTo load this extension:'));
+  console.log(chalk.yellow('Navigate to edge://extensions/'));
+  console.log(chalk.yellow('Enable "Developer mode"'));
+  console.log(chalk.yellow('Click "LOAD UNPACKED"'));
+  console.log(chalk.yellow('Select extension folder - ' + cwd + '\\unpacked'));
+
+  console.log(chalk.green('\nYou can test this build by running:'));
+  console.log(chalk.gray('\n# From the react-devtools root directory:'));
+  console.log('yarn run test:edge\n');
+};
+
+main();
diff --git a/packages/react-devtools-extensions/edge/deploy.js b/packages/react-devtools-extensions/edge/deploy.js
new file mode 100644
index 00000000000..33d102c6884
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/deploy.js
@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const deploy = require('../deploy');
+
+const main = async () => await deploy('edge');
+
+main();
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
new file mode 100644
index 00000000000..55b7248f255
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -0,0 +1,65 @@
+{
+  "manifest_version": 3,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
+  "version": "7.0.1",
+  "version_name": "7.0.1",
+  "minimum_chrome_version": "114",
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+  "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": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "main.html",
+        "panel.html",
+        "build/*.js"
+      ],
+      "matches": [
+        "<all_urls>"
+      ],
+      "extension_ids": []
+    }
+  ],
+  "background": {
+    "service_worker": "build/background.js"
+  },
+  "permissions": [
+    "scripting",
+    "storage",
+    "tabs"
+  ],
+  "optional_permissions": [
+    "clipboardWrite"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/prepareInjection.js"
+      ],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/packages/react-devtools-extensions/edge/now.json b/packages/react-devtools-extensions/edge/now.json
new file mode 100644
index 00000000000..6faa13a7efe
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-edge",
+  "alias": ["react-devtools-experimental-edge"],
+  "files": ["index.html", "ReactDevTools.zip"]
+}
diff --git a/packages/react-devtools-extensions/edge/test.js b/packages/react-devtools-extensions/edge/test.js
new file mode 100644
index 00000000000..5d9c416c279
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/test.js
@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const open = require('open');
+const os = require('os');
+const osName = require('os-name');
+const {resolve} = require('path');
+const {argv} = require('yargs');
+
+const EXTENSION_PATH = resolve('./edge/build/unpacked');
+const START_URL = argv.url || 'https://react.dev/';
+
+const extargs = `--load-extension=${EXTENSION_PATH}`;
+
+const osname = osName(os.platform());
+let appname;
+
+if (osname && osname.toLocaleLowerCase().startsWith('windows')) {
+  appname = 'msedge';
+} else if (osname && osname.toLocaleLowerCase().startsWith('mac')) {
+  appname = 'Microsoft Edge';
+} else if (osname && osname.toLocaleLowerCase().startsWith('linux')) {
+  //Coming soon
+}
+
+if (appname) {
+  (async () => {
+    await open(START_URL, {app: [appname, extargs]});
+  })();
+}
diff --git a/packages/react-devtools-extensions/firefox/README.md b/packages/react-devtools-extensions/firefox/README.md
new file mode 100644
index 00000000000..92c763c8bc8
--- /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: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 00000000000..65cd0187c09
--- /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 00000000000..49d83ead461
--- /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 00000000000..f401708c217
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -0,0 +1,70 @@
+{
+  "manifest_version": 3,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Firefox Developer Tools.",
+  "version": "7.0.1",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "@react-devtools",
+      "strict_min_version": "128.0"
+    }
+  },
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+  "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": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "main.html",
+        "panel.html",
+        "build/*.js",
+        "build/*.js.map"
+      ],
+      "matches": [
+        "<all_urls>"
+      ],
+      "extension_ids": []
+    }
+  ],
+  "background": {
+    "scripts": [
+      "build/background.js"
+    ]
+  },
+  "permissions": [
+    "scripting",
+    "storage",
+    "tabs",
+    "clipboardWrite"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/prepareInjection.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 00000000000..5e61bb442f5
--- /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 00000000000..30328b16d1f
--- /dev/null
+++ b/packages/react-devtools-extensions/firefox/test.js
@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {Finder} = require('firefox-profile');
+const {resolve} = require('path');
+const {argv} = require('yargs');
+
+const EXTENSION_PATH = resolve('./firefox/build/unpacked');
+const START_URL = argv.url || 'https://react.dev/';
+
+const firefoxVersion = process.env.WEB_EXT_FIREFOX;
+
+const getFirefoxProfileName = () => {
+  // Keys are pulled from https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#--firefox
+  // and profile names from https://searchfox.org/mozilla-central/source/toolkit/profile/xpcshell/head.js#96
+  switch (firefoxVersion) {
+    case 'firefox':
+      return 'default-release';
+    case 'beta':
+      return 'default-beta';
+    case 'nightly':
+      return 'default-nightly';
+    case 'firefoxdeveloperedition':
+      return 'dev-edition-default';
+    default:
+      // Fall back to using the default Firefox profile for testing purposes.
+      // This prevents users from having to re-login-to sites before testing.
+      return 'default';
+  }
+};
+
+const main = async () => {
+  const finder = new Finder();
+
+  const findPathPromise = new Promise((resolvePromise, rejectPromise) => {
+    finder.getPath(getFirefoxProfileName(), (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 00000000000..66c8f0d41fe
--- /dev/null
+++ b/packages/react-devtools-extensions/flow-typed/jest.js
@@ -0,0 +1,1171 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+/* eslint-disable no-unused-vars */
+
+type JestMockFn<TArguments: $ReadOnlyArray<any>, 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.
+   */
+  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.
+   */
+  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<any>): 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;
+  /**
+   * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
+   * with specific arguments.
+   */
+  toHaveBeenLastCalledWith(...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<any>, 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 const 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 const 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 const test: typeof it;
+/** A disabled group of tests */
+declare const xdescribe: typeof describe;
+/** A focused group of tests */
+declare const fdescribe: typeof describe;
+/** A disabled individual test */
+declare const xit: typeof it;
+/** A disabled individual test */
+declare const 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;
+type JestPrettyFormatRefs = Array<any>;
+type JestPrettyFormatPrint = any => string;
+type JestPrettyFormatStringOrNull = string | null;
+
+type JestPrettyFormatOptions = {
+  callToJSON: boolean,
+  edgeSpacing: string,
+  escapeRegex: boolean,
+  highlight: boolean,
+  indent: number,
+  maxDepth: number,
+  min: boolean,
+  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 const 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,
+  },
+};
+
+/** Holds all functions related to manipulating test runner */
+declare const jest: JestObjectType;
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 00000000000..c9a96b1d4b9
--- /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';
+
+/* eslint-disable no-unused-vars */
+
+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' {
+  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;
+    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 00000000000..8eaefb2c076
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 00000000000..8eaefb2c076
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 00000000000..eff8120d00e
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 00000000000..ddf7cd16e2c
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 00000000000..91cb5b56b09
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-production.png differ
diff --git a/packages/react-devtools-extensions/icons/128-restricted.png b/packages/react-devtools-extensions/icons/128-restricted.png
new file mode 100644
index 00000000000..eff8120d00e
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-restricted.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 00000000000..8eaefb2c076
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 00000000000..1017fdab456
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 00000000000..1017fdab456
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 00000000000..5426c9fb4d3
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 00000000000..9108d151cc6
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 00000000000..fb7e5a92c04
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-production.png differ
diff --git a/packages/react-devtools-extensions/icons/16-restricted.png b/packages/react-devtools-extensions/icons/16-restricted.png
new file mode 100644
index 00000000000..5426c9fb4d3
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-restricted.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 00000000000..1017fdab456
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 00000000000..2376a50e3e9
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 00000000000..2376a50e3e9
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 00000000000..3c984726dad
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 00000000000..a72807b3af3
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 00000000000..d730dc4f594
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-production.png differ
diff --git a/packages/react-devtools-extensions/icons/32-restricted.png b/packages/react-devtools-extensions/icons/32-restricted.png
new file mode 100644
index 00000000000..3c984726dad
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-restricted.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 00000000000..2376a50e3e9
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 00000000000..01eeb6e85c8
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 00000000000..01eeb6e85c8
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 00000000000..43cc19e3643
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 00000000000..4a86731fb88
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 00000000000..07af622e458
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-production.png differ
diff --git a/packages/react-devtools-extensions/icons/48-restricted.png b/packages/react-devtools-extensions/icons/48-restricted.png
new file mode 100644
index 00000000000..43cc19e3643
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-restricted.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 00000000000..01eeb6e85c8
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 00000000000..ccd6e669061
--- /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 00000000000..ccd6e669061
--- /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 00000000000..73c2bb51cdb
--- /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 00000000000..03b83c1eb55
--- /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 00000000000..1e974f51310
--- /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/icons/restricted.svg b/packages/react-devtools-extensions/icons/restricted.svg
new file mode 100644
index 00000000000..73c2bb51cdb
--- /dev/null
+++ b/packages/react-devtools-extensions/icons/restricted.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/improveImages.mjs b/packages/react-devtools-extensions/improveImages.mjs
new file mode 100644
index 00000000000..385624a26bd
--- /dev/null
+++ b/packages/react-devtools-extensions/improveImages.mjs
@@ -0,0 +1,90 @@
+import fs from 'fs'
+import find from 'find'
+import filesize from 'filesize'
+import imagemin from 'imagemin'
+import imageminGifsicle from 'imagemin-gifsicle'
+import imageminJpegtran from 'imagemin-jpegtran'
+import imageminOptipng from 'imagemin-optipng'
+import imageminSvgo from 'imagemin-svgo'
+import parseFilepath from 'parse-filepath'
+import chalk from 'chalk'
+
+const plugins = [
+  imageminGifsicle({}),
+  imageminJpegtran({}),
+  imageminOptipng({}),
+  imageminSvgo({})
+]
+
+let savedSize = 0
+
+const run = async () => {
+  const regex = new RegExp(/\.gif|\.jpeg|\.jpg|\.png$/)
+
+  const files = find.fileSync(regex, 'icons/');
+
+  for (const file of files) {
+    await optimized(file)
+  }
+
+  if (savedSize > 0) {
+    console.info(`\n🎉 You saved ${readableSize(savedSize)}.`)
+  } else {
+    console.info(`\n🎉 Nothing to optimize.`)
+  }
+}
+
+const size = (filename) => {
+  return fs.statSync(filename).size
+}
+
+const readableSize = (size) => {
+  return filesize(size, { round: 5 })
+}
+
+const optimized = async (filename) => {
+  let output = parseFilepath(filename).dir || './'
+
+  const fileSizeBefore = size(filename)
+
+  if (fileSizeBefore === 0){
+    console.info(chalk.blue(`Skipping ${filename}, it has ${readableSize(fileSizeBefore)}`))
+    return
+  }
+
+  const pluginsOptions = {
+    destination: output,
+    plugins
+  }
+
+  const filenameBackup = `${filename}.bak`
+  fs.copyFileSync(filename, filenameBackup)
+
+  try {
+    await imagemin([filename], pluginsOptions)
+
+    const fileSizeAfter = size(filename)
+    const fileSizeDiff = fileSizeBefore - fileSizeAfter
+    if (fileSizeDiff > 0){
+      savedSize += fileSizeDiff
+      console.info(chalk.green(`Optimized ${filename}: ${chalk.yellow(readableSize(fileSizeAfter))}`))
+    } else { // file after same or bigger
+      // restore previous file
+      fs.renameSync(filenameBackup, filename)
+
+      console.info(`${filename} ${chalk.red(`already optimized`)}`)
+    }
+
+  } catch (err) {
+    console.info(chalk.red(`Skip ${filename} due to error when optimizing`));
+  }
+
+  // delete backup file
+  if (fs.existsSync(filenameBackup)) {
+    fs.unlinkSync(filenameBackup)
+  }
+}
+
+(async () => {
+  await run();
+})();
diff --git a/packages/react-devtools-extensions/main.html b/packages/react-devtools-extensions/main.html
new file mode 100644
index 00000000000..f1c96d4a7a0
--- /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 00000000000..9dfceea840a
--- /dev/null
+++ b/packages/react-devtools-extensions/package.json
@@ -0,0 +1,74 @@
+{
+  "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 && yarn run build:edge",
+    "build:local": "cross-env NODE_ENV=development yarn run build:chrome:local && yarn run build:firefox:local && yarn run build:edge:local",
+    "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
+    "build:chrome:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
+    "build:chrome:local": "cross-env NODE_ENV=development node ./chrome/build",
+    "build:chrome:fb:local": "cross-env NODE_ENV=development FEATURE_FLAG_TARGET=extension-fb node ./chrome/build",
+    "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
+    "build:firefox:local": "cross-env NODE_ENV=development node ./firefox/build",
+    "build:edge": "cross-env NODE_ENV=production node ./edge/build",
+    "build:edge:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./edge/build --crx",
+    "build:edge:local": "cross-env NODE_ENV=development node ./edge/build",
+    "test:chrome": "node ./chrome/test",
+    "test:firefox": "node ./firefox/test",
+    "test:edge": "node ./edge/test",
+    "improve-images": "node ./improveImages.mjs"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/node": "^7.14.7",
+    "@babel/parser": "^7.14.8",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/preset-react": "^7.10.4",
+    "@jridgewell/sourcemap-codec": "1.5.5",
+    "acorn-jsx": "^5.2.0",
+    "archiver": "^3.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.4",
+    "babel-preset-minify": "^0.5.1",
+    "buffer": "^6.0.3",
+    "chalk": "^4.1.1",
+    "child-process-promise": "^2.2.1",
+    "chrome-launch": "^1.1.4",
+    "crx": "^5.0.0",
+    "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
+    "filesize": "^6.0.1",
+    "find": "^0.3.0",
+    "firefox-profile": "^1.0.2",
+    "fs-extra": "^4.0.2",
+    "imagemin": "^8.0.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^6.0.0",
+    "imagemin-optipng": "^7.0.0",
+    "imagemin-svgo": "^7.0.0",
+    "jest-fetch-mock": "^3.0.3",
+    "node-libs-browser": "0.5.3",
+    "nullthrows": "^1.0.0",
+    "open": "^7.0.2",
+    "os-name": "^3.1.0",
+    "parse-filepath": "^1.0.2",
+    "process": "0.11.10",
+    "raw-loader": "^3.1.0",
+    "rimraf": "^5.0.1",
+    "source-map-js": "^0.6.2",
+    "style-loader": "^0.23.1",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "webpack-stats-plugin": "^1.1.3",
+    "workerize-loader": "^2.0.2"
+  },
+  "dependencies": {
+    "web-ext": "^8"
+  }
+}
diff --git a/packages/react-devtools-extensions/panel.html b/packages/react-devtools-extensions/panel.html
new file mode 100644
index 00000000000..ccbb16ad25c
--- /dev/null
+++ b/packages/react-devtools-extensions/panel.html
@@ -0,0 +1,65 @@
+<!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;
+            }
+            .no-react-disclaimer {
+              margin: 16px;
+              font-family: Courier, monospace, serif;
+              font-size: 16px;
+              animation: fadeIn .5s ease-in-out forwards;
+            }
+
+            @keyframes fadeIn {
+              0% {
+                opacity: 0;
+              }
+              100% {
+                opacity: 1;
+              }
+            }
+
+            @media (prefers-color-scheme: dark) {
+              :root {
+                color-scheme: dark;
+              }
+
+              @supports (-moz-appearance:none) {
+                :root {
+                  background: black;
+                }
+
+                body {
+                  color: white;
+                }
+              }
+            }
+        </style>
+    </head>
+    <body>
+        <!-- main react mount point -->
+        <div id="container">
+          <h1 class="no-react-disclaimer">Looks like this page doesn't have React, or it hasn't been loaded yet.</h1>
+        </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 00000000000..5b458981e00
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/deadcode.html
@@ -0,0 +1,28 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 133px;
+  }
+
+  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://reactjs.org/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 00000000000..a0d27ecc6e5
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/development.html
@@ -0,0 +1,24 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 101px;
+  }
+
+  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://reactjs.org/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 00000000000..52f762253ff
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/disabled.html
@@ -0,0 +1,17 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 410px;
+    min-height: 33px;
+  }
+
+  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/main/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 00000000000..ebeabc77874
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/outdated.html
@@ -0,0 +1,25 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 117px;
+  }
+
+  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://reactjs.org/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 00000000000..44ae17939e2
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/production.html
@@ -0,0 +1,17 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 39px;
+  }
+
+  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/restricted.html b/packages/react-devtools-extensions/popups/restricted.html
new file mode 100644
index 00000000000..77acf08f37b
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/restricted.html
@@ -0,0 +1,14 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 286px;
+    min-height: 33px;
+  }
+
+</style>
+<p>
+  <b>This is a restricted browser page.</b>
+  <br />
+  React devtools cannot access this page.
+</p>
diff --git a/packages/react-devtools-extensions/popups/shared.css b/packages/react-devtools-extensions/popups/shared.css
new file mode 100644
index 00000000000..731a2036c37
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/shared.css
@@ -0,0 +1,23 @@
+html, body {
+  font-size: 14px;
+}
+
+body {
+  margin: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+
+  @supports (-moz-appearance:none) {
+    :root {
+      background: black;
+    }
+
+    body {
+      color: white;
+    }
+  }
+}
diff --git a/packages/react-devtools-extensions/popups/shared.js b/packages/react-devtools-extensions/popups/shared.js
new file mode 100644
index 00000000000..9793429b499
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/shared.js
@@ -0,0 +1,25 @@
+/* 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});
+        return false;
+      };
+    })();
+  }
+
+  // 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 00000000000..b61fb78519b
--- /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://reactjs.org/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/__tests__/ignoreList-test.js b/packages/react-devtools-extensions/src/__tests__/ignoreList-test.js
new file mode 100644
index 00000000000..70845d0582d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/ignoreList-test.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {exec} from 'child-process-promise';
+import {readFileSync} from 'fs';
+import path from 'path';
+import {rimrafSync} from 'rimraf';
+
+describe('ignoreList source map extension', () => {
+  jest.setTimeout(60 * 1000);
+
+  const pathToExtensionsPackage = path.resolve(__dirname, '..', '..');
+  const pathToChromeExtensionBuild = path.join(
+    pathToExtensionsPackage,
+    'chrome/build',
+  );
+  const pathToSourceMap = path.resolve(
+    pathToChromeExtensionBuild,
+    'unpacked/build/react_devtools_backend_compact.js.map',
+  );
+
+  afterAll(() => {
+    rimrafSync(pathToChromeExtensionBuild);
+  });
+
+  describe('for dev builds', () => {
+    it('should not ignore list anything', async () => {
+      await exec('yarn build:chrome:local', {
+        cwd: pathToExtensionsPackage,
+      });
+
+      const sourceMapJSON = readFileSync(pathToSourceMap);
+      const sourceMap = JSON.parse(sourceMapJSON);
+
+      const {ignoreList} = sourceMap;
+      expect(ignoreList).toEqual([]);
+    });
+  });
+
+  describe('for production builds', function () {
+    it('should include every source', async () => {
+      await exec('yarn build:chrome', {cwd: pathToExtensionsPackage});
+
+      const sourceMapJSON = readFileSync(pathToSourceMap);
+      const sourceMap = JSON.parse(sourceMapJSON);
+
+      const {sources, ignoreList} = sourceMap;
+
+      expect(sources.length).toBe(ignoreList.length);
+    });
+  });
+});
diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
new file mode 100644
index 00000000000..c7947da9631
--- /dev/null
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DevToolsHook} from 'react-devtools-shared/src/backend/types';
+
+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 setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+
+import {COMPACT_VERSION_NAME} from './utils';
+
+setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+
+function setup(hook: ?DevToolsHook) {
+  if (hook == null) {
+    return;
+  }
+
+  hook.backends.set(COMPACT_VERSION_NAME, {
+    Agent,
+    Bridge,
+    initBackend,
+    setupNativeStyleEditor,
+  });
+
+  hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME);
+}
diff --git a/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js
new file mode 100644
index 00000000000..84624b021bc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js
@@ -0,0 +1,62 @@
+/* global chrome */
+
+const contentScriptsToInject = [
+  {
+    id: '@react-devtools/proxy',
+    js: ['build/proxy.js'],
+    matches: ['<all_urls>'],
+    persistAcrossSessions: true,
+    runAt: 'document_start',
+    world: chrome.scripting.ExecutionWorld.ISOLATED,
+  },
+  {
+    id: '@react-devtools/file-fetcher',
+    js: ['build/fileFetcher.js'],
+    matches: ['<all_urls>'],
+    persistAcrossSessions: true,
+    runAt: 'document_end',
+    world: chrome.scripting.ExecutionWorld.ISOLATED,
+  },
+  {
+    id: '@react-devtools/fallback-eval-context',
+    js: ['build/fallbackEvalContext.js'],
+    matches: ['<all_urls>'],
+    persistAcrossSessions: true,
+    runAt: 'document_start',
+    world: chrome.scripting.ExecutionWorld.MAIN,
+  },
+  {
+    id: '@react-devtools/hook',
+    js: ['build/installHook.js'],
+    matches: ['<all_urls>'],
+    persistAcrossSessions: true,
+    runAt: 'document_start',
+    world: chrome.scripting.ExecutionWorld.MAIN,
+  },
+  {
+    id: '@react-devtools/hook-settings-injector',
+    js: ['build/hookSettingsInjector.js'],
+    matches: ['<all_urls>'],
+    persistAcrossSessions: true,
+    runAt: 'document_start',
+  },
+];
+
+async function dynamicallyInjectContentScripts() {
+  try {
+    // Using this, instead of filtering registered scrips with `chrome.scripting.getRegisteredScripts`
+    // because of https://bugs.chromium.org/p/chromium/issues/detail?id=1393762
+    // This fixes registering proxy content script in incognito mode
+    await chrome.scripting.unregisterContentScripts();
+
+    // Note: the "world" option in registerContentScripts is only available in Chrome v102+
+    // It's critical since it allows us to directly run scripts on the "main" world on the page
+    // "document_start" allows it to run before the page's scripts
+    // so the hook can be detected by react reconciler
+    await chrome.scripting.registerContentScripts(contentScriptsToInject);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+dynamicallyInjectContentScripts();
diff --git a/packages/react-devtools-extensions/src/background/executeScript.js b/packages/react-devtools-extensions/src/background/executeScript.js
new file mode 100644
index 00000000000..a196a7391cd
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/executeScript.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+/* global chrome */
+
+export function executeScriptInIsolatedWorld({
+  target,
+  files,
+}: {
+  files: any,
+  target: any,
+}): Promise<void> {
+  return chrome.scripting.executeScript({
+    target,
+    files,
+    world: chrome.scripting.ExecutionWorld.ISOLATED,
+  });
+}
+
+export function executeScriptInMainWorld({
+  target,
+  files,
+  injectImmediately,
+}: {
+  files: any,
+  target: any,
+  // It's nice to have this required to make active choices.
+  injectImmediately: boolean,
+}): Promise<void> {
+  return chrome.scripting.executeScript({
+    target,
+    files,
+    injectImmediately,
+    world: chrome.scripting.ExecutionWorld.MAIN,
+  });
+}
diff --git a/packages/react-devtools-extensions/src/background/index.js b/packages/react-devtools-extensions/src/background/index.js
new file mode 100644
index 00000000000..b25eb530331
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/index.js
@@ -0,0 +1,214 @@
+/* global chrome */
+
+'use strict';
+
+import './dynamicallyInjectContentScripts';
+import './tabsManager';
+
+import {
+  handleDevToolsPageMessage,
+  handleBackendManagerMessage,
+  handleReactDevToolsHookMessage,
+  handleFetchResourceContentScriptMessage,
+} from './messageHandlers';
+
+/*
+  {
+    [tabId]: {
+      extension: ExtensionPort,
+      proxy: ProxyPort,
+      disconnectPipe: Function,
+    },
+    ...
+   }
+ */
+const ports = {};
+
+function registerTab(tabId) {
+  if (!ports[tabId]) {
+    ports[tabId] = {
+      extension: null,
+      proxy: null,
+      disconnectPipe: null,
+    };
+  }
+}
+
+function registerExtensionPort(port, tabId) {
+  ports[tabId].extension = port;
+
+  port.onDisconnect.addListener(() => {
+    // This should delete disconnectPipe from ports dictionary
+    ports[tabId].disconnectPipe?.();
+
+    delete ports[tabId].extension;
+  });
+}
+
+function registerProxyPort(port, tabId) {
+  ports[tabId].proxy = port;
+
+  // In case proxy port was disconnected from the other end, from content script
+  // This can happen if content script was detached, when user does in-tab navigation
+  // This listener should never be called when we call port.disconnect() from this (background/index.js) script
+  port.onDisconnect.addListener(() => {
+    ports[tabId].disconnectPipe?.();
+
+    delete ports[tabId].proxy;
+  });
+}
+
+function isNumeric(str: string): boolean {
+  return +str + '' === str;
+}
+
+chrome.runtime.onConnect.addListener(port => {
+  if (port.name === 'proxy') {
+    // Might not be present for restricted pages in Firefox
+    if (port.sender?.tab?.id == null) {
+      // Not disconnecting it, so it would not reconnect
+      return;
+    }
+
+    // Proxy content script is executed in tab, so it should have it specified.
+    const tabId = port.sender.tab.id;
+
+    if (ports[tabId]?.proxy) {
+      ports[tabId].disconnectPipe?.();
+      ports[tabId].proxy.disconnect();
+    }
+
+    registerTab(tabId);
+    registerProxyPort(port, tabId);
+
+    if (ports[tabId].extension) {
+      connectExtensionAndProxyPorts(
+        ports[tabId].extension,
+        ports[tabId].proxy,
+        tabId,
+      );
+    }
+
+    return;
+  }
+
+  if (isNumeric(port.name)) {
+    // DevTools page port doesn't have tab id specified, because its sender is the extension.
+    const tabId = +port.name;
+
+    registerTab(tabId);
+    registerExtensionPort(port, tabId);
+
+    if (ports[tabId].proxy) {
+      connectExtensionAndProxyPorts(
+        ports[tabId].extension,
+        ports[tabId].proxy,
+        tabId,
+      );
+    }
+
+    return;
+  }
+
+  // I am not sure if we should throw here
+  console.warn(`Unknown port ${port.name} connected`);
+});
+
+function connectExtensionAndProxyPorts(extensionPort, proxyPort, tabId) {
+  if (!extensionPort) {
+    throw new Error(
+      `Attempted to connect ports, when extension port is not present`,
+    );
+  }
+
+  if (!proxyPort) {
+    throw new Error(
+      `Attempted to connect ports, when proxy port is not present`,
+    );
+  }
+
+  if (ports[tabId].disconnectPipe) {
+    throw new Error(
+      `Attempted to connect already connected ports for tab with id ${tabId}`,
+    );
+  }
+
+  function extensionPortMessageListener(message) {
+    try {
+      proxyPort.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+
+      disconnectListener();
+    }
+  }
+
+  function proxyPortMessageListener(message) {
+    try {
+      extensionPort.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+
+      disconnectListener();
+    }
+  }
+
+  function disconnectListener() {
+    extensionPort.onMessage.removeListener(extensionPortMessageListener);
+    proxyPort.onMessage.removeListener(proxyPortMessageListener);
+
+    // We handle disconnect() calls manually, based on each specific case
+    // No need to disconnect other port here
+
+    delete ports[tabId].disconnectPipe;
+  }
+
+  ports[tabId].disconnectPipe = disconnectListener;
+
+  extensionPort.onMessage.addListener(extensionPortMessageListener);
+  proxyPort.onMessage.addListener(proxyPortMessageListener);
+
+  extensionPort.onDisconnect.addListener(disconnectListener);
+  proxyPort.onDisconnect.addListener(disconnectListener);
+}
+
+chrome.runtime.onMessage.addListener((message, sender) => {
+  switch (message?.source) {
+    case 'devtools-page': {
+      handleDevToolsPageMessage(message);
+      break;
+    }
+    case 'react-devtools-fetch-resource-content-script': {
+      handleFetchResourceContentScriptMessage(message);
+      break;
+    }
+    case 'react-devtools-backend-manager': {
+      handleBackendManagerMessage(message, sender);
+      break;
+    }
+    case 'react-devtools-hook': {
+      handleReactDevToolsHookMessage(message, sender);
+    }
+  }
+});
+
+chrome.tabs.onActivated.addListener(({tabId: activeTabId}) => {
+  for (const registeredTabId in ports) {
+    if (
+      ports[registeredTabId].proxy != null &&
+      ports[registeredTabId].extension != null
+    ) {
+      const numericRegisteredTabId = +registeredTabId;
+      const event =
+        activeTabId === numericRegisteredTabId
+          ? 'resumeElementPolling'
+          : 'pauseElementPolling';
+
+      ports[registeredTabId].extension.postMessage({event});
+    }
+  }
+});
diff --git a/packages/react-devtools-extensions/src/background/messageHandlers.js b/packages/react-devtools-extensions/src/background/messageHandlers.js
new file mode 100644
index 00000000000..f762d6464ca
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/messageHandlers.js
@@ -0,0 +1,171 @@
+/* global chrome */
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import setExtensionIconAndPopup from './setExtensionIconAndPopup';
+import {executeScriptInMainWorld} from './executeScript';
+
+import {EXTENSION_CONTAINED_VERSIONS} from '../utils';
+
+export function handleReactDevToolsHookMessage(message, sender) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    case 'react-renderer-attached': {
+      setExtensionIconAndPopup(payload.reactBuildType, sender.tab.id);
+
+      break;
+    }
+  }
+}
+
+export function handleBackendManagerMessage(message, sender) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    case 'require-backends': {
+      payload.versions.forEach(version => {
+        if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
+          executeScriptInMainWorld({
+            injectImmediately: true,
+            target: {tabId: sender.tab.id},
+            files: [`/build/react_devtools_backend_${version}.js`],
+          });
+        }
+      });
+
+      break;
+    }
+  }
+}
+
+export function handleDevToolsPageMessage(message) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    // Proxy this message from DevTools page to content script via chrome.tabs.sendMessage
+    case 'fetch-file-with-cache': {
+      const {
+        payload: {tabId, url},
+      } = message;
+
+      if (!tabId || !url) {
+        // Send a response straight away to get the Promise fulfilled.
+        chrome.runtime.sendMessage({
+          source: 'react-devtools-background',
+          payload: {
+            type: 'fetch-file-with-cache-error',
+            url,
+            value: null,
+          },
+        });
+      } else {
+        chrome.tabs.sendMessage(tabId, {
+          source: 'devtools-page',
+          payload: {
+            type: 'fetch-file-with-cache',
+            url,
+          },
+        });
+      }
+
+      break;
+    }
+
+    case 'inject-backend-manager': {
+      const {
+        payload: {tabId},
+      } = message;
+
+      if (!tabId) {
+        throw new Error("Couldn't inject backend manager: tabId not specified");
+      }
+
+      executeScriptInMainWorld({
+        injectImmediately: true,
+        target: {tabId},
+        files: ['/build/backendManager.js'],
+      }).then(
+        () => {
+          if (__DEBUG__) {
+            console.log('Successfully injected backend manager');
+          }
+        },
+        reason => {
+          console.error('Failed to inject backend manager:', reason);
+        },
+      );
+
+      break;
+    }
+
+    case 'eval-in-inspected-window': {
+      const {
+        payload: {tabId, requestId, scriptId, args},
+      } = message;
+
+      chrome.tabs
+        .sendMessage(tabId, {
+          source: 'devtools-page-eval',
+          payload: {
+            scriptId,
+            args,
+          },
+        })
+        .then(response => {
+          if (!response) {
+            chrome.runtime.sendMessage({
+              source: 'react-devtools-background',
+              payload: {
+                type: 'eval-in-inspected-window-response',
+                requestId,
+                result: null,
+                error: 'No response from content script',
+              },
+            });
+            return;
+          }
+          const {result, error} = response;
+          chrome.runtime.sendMessage({
+            source: 'react-devtools-background',
+            payload: {
+              type: 'eval-in-inspected-window-response',
+              requestId,
+              result,
+              error,
+            },
+          });
+        })
+        .catch(error => {
+          chrome.runtime.sendMessage({
+            source: 'react-devtools-background',
+            payload: {
+              type: 'eval-in-inspected-window-response',
+              requestId,
+              result: null,
+              error: error?.message || String(error),
+            },
+          });
+        });
+
+      break;
+    }
+  }
+}
+
+export function handleFetchResourceContentScriptMessage(message) {
+  const {payload} = message;
+
+  switch (payload?.type) {
+    case 'fetch-file-with-cache-complete':
+    case 'fetch-file-with-cache-error':
+      // Forward the result of fetch-in-page requests back to the DevTools page.
+      // We switch the source here because of inconsistency between Firefox and Chrome
+      // In Chromium this message will be propagated from content script to DevTools page
+      // For Firefox, only background script will get this message, so we need to forward it to DevTools page
+      chrome.runtime.sendMessage({
+        source: 'react-devtools-background',
+        payload,
+      });
+      break;
+  }
+}
diff --git a/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js b/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js
new file mode 100644
index 00000000000..51f233e284f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js
@@ -0,0 +1,22 @@
+/* global chrome */
+
+'use strict';
+
+function setExtensionIconAndPopup(reactBuildType, tabId) {
+  chrome.action.setIcon({
+    tabId,
+    path: {
+      '16': chrome.runtime.getURL(`icons/16-${reactBuildType}.png`),
+      '32': chrome.runtime.getURL(`icons/32-${reactBuildType}.png`),
+      '48': chrome.runtime.getURL(`icons/48-${reactBuildType}.png`),
+      '128': chrome.runtime.getURL(`icons/128-${reactBuildType}.png`),
+    },
+  });
+
+  chrome.action.setPopup({
+    tabId,
+    popup: chrome.runtime.getURL(`popups/${reactBuildType}.html`),
+  });
+}
+
+export default setExtensionIconAndPopup;
diff --git a/packages/react-devtools-extensions/src/background/tabsManager.js b/packages/react-devtools-extensions/src/background/tabsManager.js
new file mode 100644
index 00000000000..d46c14c6ea7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/background/tabsManager.js
@@ -0,0 +1,31 @@
+/* global chrome */
+
+'use strict';
+
+import setExtensionIconAndPopup from './setExtensionIconAndPopup';
+
+function isRestrictedBrowserPage(url) {
+  if (!url) {
+    return true;
+  }
+
+  const urlProtocol = new URL(url).protocol;
+  return urlProtocol === 'chrome:' || urlProtocol === 'about:';
+}
+
+function checkAndHandleRestrictedPageIfSo(tab) {
+  if (tab && isRestrictedBrowserPage(tab.url)) {
+    setExtensionIconAndPopup('restricted', tab.id);
+  }
+}
+
+// Update popup page of any existing open tabs, if they are restricted browser pages
+chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
+chrome.tabs.onCreated.addListener(tab => checkAndHandleRestrictedPageIfSo(tab));
+
+// Listen to URL changes on the active tab and update the DevTools icon.
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.url && isRestrictedBrowserPage(changeInfo.url)) {
+    setExtensionIconAndPopup('restricted', tabId);
+  }
+});
diff --git a/packages/react-devtools-extensions/src/contentScripts/backendManager.js b/packages/react-devtools-extensions/src/contentScripts/backendManager.js
new file mode 100644
index 00000000000..402a1378576
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/backendManager.js
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  DevToolsHook,
+  ReactRenderer,
+} from 'react-devtools-shared/src/backend/types';
+import {hasAssignedBackend} from 'react-devtools-shared/src/backend/utils';
+import {COMPACT_VERSION_NAME} from 'react-devtools-extensions/src/utils';
+import {getIsReloadAndProfileSupported} from 'react-devtools-shared/src/utils';
+import {
+  getIfReloadedAndProfiling,
+  onReloadAndProfile,
+  onReloadAndProfileFlagsReset,
+} from 'react-devtools-shared/src/utils';
+
+let welcomeHasInitialized = false;
+const requiredBackends = new Set<string>();
+
+function welcome(event: $FlowFixMe) {
+  if (
+    event.source !== window ||
+    event.data.source !== 'react-devtools-content-script'
+  ) {
+    return;
+  }
+
+  // In some circumstances, this method is called more than once for a single welcome message.
+  // The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
+  //
+  // Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
+  // (and throw an error) or worse yet, choke up entirely and freeze the browser.
+  //
+  // The simplest solution is to ignore the duplicate events.
+  // To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
+  //
+  // See https://github.com/facebook/react/issues/24162
+  if (welcomeHasInitialized) {
+    console.warn(
+      'React DevTools detected duplicate welcome "message" events from the content script.',
+    );
+    return;
+  }
+
+  welcomeHasInitialized = true;
+
+  window.removeEventListener('message', welcome);
+
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+}
+
+function setup(hook: ?DevToolsHook) {
+  // this should not happen, but Chrome can be weird sometimes
+  if (hook == null) {
+    return;
+  }
+
+  // register renderers that have already injected themselves.
+  hook.renderers.forEach(renderer => {
+    registerRenderer(renderer, hook);
+  });
+
+  // Activate and remove from required all present backends, registered within the hook
+  hook.backends.forEach((_, backendVersion) => {
+    requiredBackends.delete(backendVersion);
+    activateBackend(backendVersion, hook);
+  });
+
+  updateRequiredBackends();
+
+  // register renderers that inject themselves later.
+  const unsubscribeRendererListener = hook.sub('renderer', ({renderer}) => {
+    registerRenderer(renderer, hook);
+    updateRequiredBackends();
+  });
+
+  // listen for backend installations.
+  const unsubscribeBackendInstallationListener = hook.sub(
+    'devtools-backend-installed',
+    version => {
+      activateBackend(version, hook);
+      updateRequiredBackends();
+    },
+  );
+
+  const unsubscribeShutdownListener: () => void = hook.sub('shutdown', () => {
+    unsubscribeRendererListener();
+    unsubscribeBackendInstallationListener();
+    unsubscribeShutdownListener();
+  });
+}
+
+function registerRenderer(renderer: ReactRenderer, hook: DevToolsHook) {
+  let version = renderer.reconcilerVersion || renderer.version;
+  if (!hasAssignedBackend(version)) {
+    version = COMPACT_VERSION_NAME;
+  }
+
+  // Check if required backend is already activated, no need to require again
+  if (!hook.backends.has(version)) {
+    requiredBackends.add(version);
+  }
+}
+
+function activateBackend(version: string, hook: DevToolsHook) {
+  const backend = hook.backends.get(version);
+  if (!backend) {
+    throw new Error(`Could not find backend for version "${version}"`);
+  }
+
+  const {Agent, Bridge, initBackend, setupNativeStyleEditor} = backend;
+  const bridge = new Bridge({
+    listen(fn) {
+      const listener = (event: $FlowFixMe) => {
+        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,
+    getIfReloadedAndProfiling(),
+    onReloadAndProfile,
+  );
+  // Agent read flags successfully, we can count it as successful launch
+  // Clean up flags, so that next reload won't start profiling
+  onReloadAndProfileFlagsReset();
+
+  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');
+    delete window.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__;
+  });
+
+  initBackend(hook, agent, window, getIsReloadAndProfileSupported());
+
+  // Setup React Native style editor if a renderer like react-native-web has injected it.
+  if (typeof setupNativeStyleEditor === 'function' && hook.resolveRNStyle) {
+    setupNativeStyleEditor(
+      bridge,
+      agent,
+      hook.resolveRNStyle,
+      hook.nativeStyleEditorValidAttributes,
+    );
+  }
+
+  // Let the frontend know that the backend has attached listeners and is ready for messages.
+  // This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
+  bridge.send('extensionBackendInitialized');
+
+  // this backend is activated
+  requiredBackends.delete(version);
+}
+
+// tell the service worker which versions of backends are needed for the current page
+function updateRequiredBackends() {
+  if (requiredBackends.size === 0) {
+    return;
+  }
+
+  window.postMessage(
+    {
+      source: 'react-devtools-backend-manager',
+      payload: {
+        type: 'require-backends',
+        versions: Array.from(requiredBackends),
+      },
+    },
+    '*',
+  );
+}
+
+/*
+ * Make sure this is executed only once in case Frontend is reloaded multiple times while Backend is initializing
+ * We can't use `reactDevToolsAgent` field on a global Hook object, because it only cleaned up after both Frontend and Backend initialized
+ */
+if (!window.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__) {
+  window.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__ = true;
+
+  window.addEventListener('message', welcome);
+}
diff --git a/packages/react-devtools-extensions/src/contentScripts/fallbackEvalContext.js b/packages/react-devtools-extensions/src/contentScripts/fallbackEvalContext.js
new file mode 100644
index 00000000000..e274f886ee5
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/fallbackEvalContext.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {evalScripts} from '../evalScripts';
+
+window.addEventListener('message', event => {
+  if (event.data?.source === 'react-devtools-content-script-eval') {
+    const {scriptId, args, requestId} = event.data.payload;
+    const response = {result: null, error: null};
+    try {
+      if (!evalScripts[scriptId]) {
+        throw new Error(`No eval script with id "${scriptId}" exists.`);
+      }
+      response.result = evalScripts[scriptId].fn.apply(null, args);
+    } catch (err) {
+      response.error = err.message;
+    }
+    window.postMessage(
+      {
+        source: 'react-devtools-content-script-eval-response',
+        payload: {
+          requestId,
+          response,
+        },
+      },
+      '*',
+    );
+  }
+});
diff --git a/packages/react-devtools-extensions/src/contentScripts/fileFetcher.js b/packages/react-devtools-extensions/src/contentScripts/fileFetcher.js
new file mode 100644
index 00000000000..78663acc74f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/fileFetcher.js
@@ -0,0 +1,48 @@
+/* global chrome */
+
+function fetchResource(url) {
+  const reject = value => {
+    chrome.runtime.sendMessage({
+      source: 'react-devtools-fetch-resource-content-script',
+      payload: {
+        type: 'fetch-file-with-cache-error',
+        url,
+        value,
+      },
+    });
+  };
+
+  const resolve = value => {
+    chrome.runtime.sendMessage({
+      source: 'react-devtools-fetch-resource-content-script',
+      payload: {
+        type: 'fetch-file-with-cache-complete',
+        url,
+        value,
+      },
+    });
+  };
+
+  fetch(url, {cache: 'force-cache', signal: AbortSignal.timeout(60000)}).then(
+    response => {
+      if (response.ok) {
+        response
+          .text()
+          .then(text => resolve(text))
+          .catch(error => reject(null));
+      } else {
+        reject(null);
+      }
+    },
+    error => reject(null),
+  );
+}
+
+chrome.runtime.onMessage.addListener(message => {
+  if (
+    message?.source === 'devtools-page' &&
+    message?.payload?.type === 'fetch-file-with-cache'
+  ) {
+    fetchResource(message.payload.url);
+  }
+});
diff --git a/packages/react-devtools-extensions/src/contentScripts/hookSettingsInjector.js b/packages/react-devtools-extensions/src/contentScripts/hookSettingsInjector.js
new file mode 100644
index 00000000000..196369e71d9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/hookSettingsInjector.js
@@ -0,0 +1,59 @@
+/* global chrome */
+/** @flow */
+
+// We can't use chrome.storage domain from scripts which are injected in ExecutionWorld.MAIN
+// This is the only purpose of this script - to send persisted settings to installHook.js content script
+
+import type {UnknownMessageEvent} from './messages';
+import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
+import {postMessage} from './messages';
+
+async function messageListener(event: UnknownMessageEvent) {
+  if (event.source !== window) {
+    return;
+  }
+
+  if (event.data.source === 'react-devtools-hook-installer') {
+    if (event.data.payload.handshake) {
+      const settings: Partial<DevToolsHookSettings> =
+        await chrome.storage.local.get();
+      // If storage was empty (first installation), define default settings
+      const hookSettings: DevToolsHookSettings = {
+        appendComponentStack:
+          typeof settings.appendComponentStack === 'boolean'
+            ? settings.appendComponentStack
+            : true,
+        breakOnConsoleErrors:
+          typeof settings.breakOnConsoleErrors === 'boolean'
+            ? settings.breakOnConsoleErrors
+            : false,
+        showInlineWarningsAndErrors:
+          typeof settings.showInlineWarningsAndErrors === 'boolean'
+            ? settings.showInlineWarningsAndErrors
+            : true,
+        hideConsoleLogsInStrictMode:
+          typeof settings.hideConsoleLogsInStrictMode === 'boolean'
+            ? settings.hideConsoleLogsInStrictMode
+            : false,
+        disableSecondConsoleLogDimmingInStrictMode:
+          typeof settings.disableSecondConsoleLogDimmingInStrictMode ===
+          'boolean'
+            ? settings.disableSecondConsoleLogDimmingInStrictMode
+            : false,
+      };
+
+      postMessage({
+        source: 'react-devtools-hook-settings-injector',
+        payload: {settings: hookSettings},
+      });
+
+      window.removeEventListener('message', messageListener);
+    }
+  }
+}
+
+window.addEventListener('message', messageListener);
+postMessage({
+  source: 'react-devtools-hook-settings-injector',
+  payload: {handshake: true},
+});
diff --git a/packages/react-devtools-extensions/src/contentScripts/installHook.js b/packages/react-devtools-extensions/src/contentScripts/installHook.js
new file mode 100644
index 00000000000..8f30d6f0892
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/installHook.js
@@ -0,0 +1,74 @@
+/** @flow */
+
+import type {UnknownMessageEvent} from './messages';
+import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
+
+import {installHook} from 'react-devtools-shared/src/hook';
+import {
+  getIfReloadedAndProfiling,
+  getProfilingSettings,
+} from 'react-devtools-shared/src/utils';
+import {postMessage} from './messages';
+
+let resolveHookSettingsInjection: (settings: DevToolsHookSettings) => void;
+
+function messageListener(event: UnknownMessageEvent) {
+  if (event.source !== window) {
+    return;
+  }
+
+  if (event.data.source === 'react-devtools-hook-settings-injector') {
+    const payload = event.data.payload;
+    // In case handshake message was sent prior to hookSettingsInjector execution
+    // We can't guarantee order
+    if (payload.handshake) {
+      postMessage({
+        source: 'react-devtools-hook-installer',
+        payload: {handshake: true},
+      });
+    } else if (payload.settings) {
+      window.removeEventListener('message', messageListener);
+      resolveHookSettingsInjection(payload.settings);
+    }
+  }
+}
+
+// Avoid double execution
+if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
+  const hookSettingsPromise = new Promise<DevToolsHookSettings>(resolve => {
+    resolveHookSettingsInjection = resolve;
+  });
+
+  window.addEventListener('message', messageListener);
+  postMessage({
+    source: 'react-devtools-hook-installer',
+    payload: {handshake: true},
+  });
+
+  const shouldStartProfiling = getIfReloadedAndProfiling();
+  const profilingSettings = getProfilingSettings();
+  // Can't delay hook installation, inject settings lazily
+  installHook(
+    window,
+    hookSettingsPromise,
+    shouldStartProfiling,
+    profilingSettings,
+  );
+
+  // Detect React
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on(
+    'renderer',
+    function ({reactBuildType}) {
+      window.postMessage(
+        {
+          source: 'react-devtools-hook',
+          payload: {
+            type: 'react-renderer-attached',
+            reactBuildType,
+          },
+        },
+        '*',
+      );
+    },
+  );
+}
diff --git a/packages/react-devtools-extensions/src/contentScripts/messages.js b/packages/react-devtools-extensions/src/contentScripts/messages.js
new file mode 100644
index 00000000000..e65d46b4b26
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/messages.js
@@ -0,0 +1,42 @@
+/** @flow */
+
+import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
+
+export function postMessage(event: UnknownMessageEventData): void {
+  window.postMessage(event);
+}
+
+export interface UnknownMessageEvent
+  extends MessageEvent<UnknownMessageEventData> {}
+
+export type UnknownMessageEventData =
+  | HookSettingsInjectorEventData
+  | HookInstallerEventData;
+
+export type HookInstallerEventData = {
+  source: 'react-devtools-hook-installer',
+  payload: HookInstallerEventPayload,
+};
+
+export type HookInstallerEventPayload = HookInstallerEventPayloadHandshake;
+
+export type HookInstallerEventPayloadHandshake = {
+  handshake: true,
+};
+
+export type HookSettingsInjectorEventData = {
+  source: 'react-devtools-hook-settings-injector',
+  payload: HookSettingsInjectorEventPayload,
+};
+
+export type HookSettingsInjectorEventPayload =
+  | HookSettingsInjectorEventPayloadHandshake
+  | HookSettingsInjectorEventPayloadSettings;
+
+export type HookSettingsInjectorEventPayloadHandshake = {
+  handshake: true,
+};
+
+export type HookSettingsInjectorEventPayloadSettings = {
+  settings: DevToolsHookSettings,
+};
diff --git a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
new file mode 100644
index 00000000000..1b9962a9a82
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
@@ -0,0 +1,36 @@
+/* global chrome */
+
+let lastSentDevToolsHookMessage;
+
+// 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 onMessage({data, source}) {
+  if (source !== window || !data) {
+    return;
+  }
+
+  // We keep this logic here and not in `proxy.js`, because proxy content script is injected later at `document_end`
+  if (data.source === 'react-devtools-hook') {
+    const {source: messageSource, payload} = data;
+    const message = {source: messageSource, payload};
+
+    lastSentDevToolsHookMessage = message;
+    chrome.runtime.sendMessage(message);
+  }
+});
+
+// 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 ({target}) {
+  if (!lastSentDevToolsHookMessage || target !== window.document) {
+    return;
+  }
+
+  chrome.runtime.sendMessage(lastSentDevToolsHookMessage);
+});
diff --git a/packages/react-devtools-extensions/src/contentScripts/proxy.js b/packages/react-devtools-extensions/src/contentScripts/proxy.js
new file mode 100644
index 00000000000..a4e7dd68241
--- /dev/null
+++ b/packages/react-devtools-extensions/src/contentScripts/proxy.js
@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+/* global chrome */
+
+'use strict';
+
+function injectProxy({target}: {target: any}) {
+  // Firefox's behaviour for injecting this content script can be unpredictable
+  // While navigating the history, some content scripts might not be re-injected and still be alive
+  if (!window.__REACT_DEVTOOLS_PROXY_INJECTED__) {
+    window.__REACT_DEVTOOLS_PROXY_INJECTED__ = true;
+
+    connectPort();
+    sayHelloToBackendManager();
+
+    // 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 manager is injected.
+    // Because of this we need to poll the backend manager until it has been initialized.
+    const intervalID: IntervalID = setInterval(() => {
+      if (backendInitialized) {
+        clearInterval(intervalID);
+      } else {
+        sayHelloToBackendManager();
+      }
+    }, 500);
+  }
+}
+
+window.addEventListener('pagereveal', injectProxy);
+// For backwards compat with browsers not implementing `pagereveal` which is a fairly new event.
+window.addEventListener('pageshow', injectProxy);
+
+window.addEventListener('pagehide', function ({target}) {
+  if (target !== window.document) {
+    return;
+  }
+
+  delete window.__REACT_DEVTOOLS_PROXY_INJECTED__;
+});
+
+let port = null;
+let backendInitialized: boolean = false;
+
+function sayHelloToBackendManager() {
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      hello: true,
+    },
+    '*',
+  );
+}
+
+function handleMessageFromDevtools(message: any) {
+  window.postMessage(
+    {
+      source: 'react-devtools-content-script',
+      payload: message,
+    },
+    '*',
+  );
+}
+
+function handleMessageFromPage(event: any) {
+  if (event.source !== window || !event.data) {
+    return;
+  }
+
+  switch (event.data.source) {
+    // This is a message from a bridge (initialized by a devtools backend)
+    case 'react-devtools-bridge': {
+      backendInitialized = true;
+
+      // $FlowFixMe[incompatible-use]
+      port.postMessage(event.data.payload);
+      break;
+    }
+
+    // This is a message from the backend manager, which runs in ExecutionWorld.MAIN
+    // and can't use `chrome.runtime.sendMessage`
+    case 'react-devtools-backend-manager': {
+      const {source, payload} = event.data;
+
+      chrome.runtime.sendMessage({
+        source,
+        payload,
+      });
+      break;
+    }
+  }
+}
+
+function handleDisconnect() {
+  window.removeEventListener('message', handleMessageFromPage);
+  port = null;
+
+  connectPort();
+}
+
+// Creates port from application page to the React DevTools' service worker
+// Which then connects it with extension port
+function connectPort() {
+  port = chrome.runtime.connect({
+    name: 'proxy',
+  });
+
+  window.addEventListener('message', handleMessageFromPage);
+
+  // $FlowFixMe[incompatible-use]
+  port.onMessage.addListener(handleMessageFromDevtools);
+  // $FlowFixMe[incompatible-use]
+  port.onDisconnect.addListener(handleDisconnect);
+}
+
+let evalRequestId = 0;
+const evalRequestCallbacks = new Map<number, Function>();
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  switch (msg?.source) {
+    case 'devtools-page-eval': {
+      const {scriptId, args} = msg.payload;
+      const requestId = evalRequestId++;
+      window.postMessage(
+        {
+          source: 'react-devtools-content-script-eval',
+          payload: {
+            requestId,
+            scriptId,
+            args,
+          },
+        },
+        '*',
+      );
+      evalRequestCallbacks.set(requestId, sendResponse);
+      return true; // Indicate we will respond asynchronously
+    }
+  }
+});
+
+window.addEventListener('message', event => {
+  if (event.data?.source === 'react-devtools-content-script-eval-response') {
+    const {requestId, response} = event.data.payload;
+    const callback = evalRequestCallbacks.get(requestId);
+    try {
+      if (!callback)
+        throw new Error(
+          `No eval request callback for id "${requestId}" exists.`,
+        );
+      callback(response);
+    } catch (e) {
+      console.warn(
+        'React DevTools Content Script eval response error occurred:',
+        e,
+      );
+    } finally {
+      evalRequestCallbacks.delete(requestId);
+    }
+  }
+});
diff --git a/packages/react-devtools-extensions/src/evalScripts.js b/packages/react-devtools-extensions/src/evalScripts.js
new file mode 100644
index 00000000000..60757caaaa2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/evalScripts.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 EvalScriptIds =
+  | 'checkIfReactPresentInInspectedWindow'
+  | 'reload'
+  | 'setBrowserSelectionFromReact'
+  | 'setReactSelectionFromBrowser'
+  | 'viewAttributeSource'
+  | 'viewElementSource';
+
+/*
+ .fn for fallback in Content Script context
+ .code for chrome.devtools.inspectedWindow.eval()
+*/
+type EvalScriptEntry = {
+  fn: (...args: any[]) => any,
+  code: (...args: any[]) => string,
+};
+
+/*
+  Can not access `Developer Tools Console API` (e.g., inspect(), $0) in this context.
+  So some fallback functions are no-op or throw error.
+*/
+export const evalScripts: {[key: EvalScriptIds]: EvalScriptEntry} = {
+  checkIfReactPresentInInspectedWindow: {
+    fn: () =>
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0,
+    code: () =>
+      'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&' +
+      'window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
+  },
+  reload: {
+    fn: () => window.location.reload(),
+    code: () => 'window.location.reload();',
+  },
+  setBrowserSelectionFromReact: {
+    fn: () => {
+      throw new Error('Not supported in fallback eval context');
+    },
+    code: () =>
+      '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+      '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+      'false',
+  },
+  setReactSelectionFromBrowser: {
+    fn: () => {
+      throw new Error('Not supported in fallback eval context');
+    },
+    code: () =>
+      '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+      '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+      'false',
+  },
+  viewAttributeSource: {
+    fn: ({rendererID, elementID, path}) => {
+      return false; // Not supported in fallback eval context
+    },
+    code: ({rendererID, elementID, path}) =>
+      '{' + // The outer block is important because it means we can declare local variables.
+      'const renderer = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(' +
+      JSON.stringify(rendererID) +
+      ');' +
+      'if (renderer) {' +
+      '  const value = renderer.getElementAttributeByPath(' +
+      JSON.stringify(elementID) +
+      ',' +
+      JSON.stringify(path) +
+      ');' +
+      '  if (value) {' +
+      '    inspect(value);' +
+      '    true;' +
+      '  } else {' +
+      '    false;' +
+      '  }' +
+      '} else {' +
+      '  false;' +
+      '}' +
+      '}',
+  },
+  viewElementSource: {
+    fn: ({rendererID, elementID}) => {
+      return false; // Not supported in fallback eval context
+    },
+    code: ({rendererID, elementID}) =>
+      '{' + // The outer block is important because it means we can declare local variables.
+      'const renderer = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(' +
+      JSON.stringify(rendererID) +
+      ');' +
+      'if (renderer) {' +
+      '  const value = renderer.getElementSourceFunctionById(' +
+      JSON.stringify(elementID) +
+      ');' +
+      '  if (value) {' +
+      '    inspect(value);' +
+      '    true;' +
+      '  } else {' +
+      '    false;' +
+      '  }' +
+      '} else {' +
+      '  false;' +
+      '}' +
+      '}',
+  },
+};
diff --git a/packages/react-devtools-extensions/src/main/cloneStyleTags.js b/packages/react-devtools-extensions/src/main/cloneStyleTags.js
new file mode 100644
index 00000000000..caad2a361ca
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/cloneStyleTags.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 cloneStyleTags(): Array<HTMLLinkElement | HTMLStyleElement> {
+  const tags: Array<HTMLLinkElement | HTMLStyleElement> = [];
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const 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 (const attribute of linkTag.attributes) {
+        newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
+      }
+
+      tags.push(newLinkTag);
+    }
+  }
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const styleTag of document.getElementsByTagName('style')) {
+    const newStyleTag = document.createElement('style');
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const attribute of styleTag.attributes) {
+      newStyleTag.setAttribute(attribute.nodeName, attribute.nodeValue);
+    }
+
+    newStyleTag.textContent = styleTag.textContent;
+
+    tags.push(newStyleTag);
+  }
+
+  return tags;
+}
diff --git a/packages/react-devtools-extensions/src/main/debounce.js b/packages/react-devtools-extensions/src/main/debounce.js
new file mode 100644
index 00000000000..5ca765002f2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/debounce.js
@@ -0,0 +1,10 @@
+function debounce(fn, timeout) {
+  let executionTimeoutId = null;
+
+  return (...args) => {
+    clearTimeout(executionTimeoutId);
+    executionTimeoutId = setTimeout(fn, timeout, ...args);
+  };
+}
+
+export default debounce;
diff --git a/packages/react-devtools-extensions/src/main/elementSelection.js b/packages/react-devtools-extensions/src/main/elementSelection.js
new file mode 100644
index 00000000000..10dd81dd634
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/elementSelection.js
@@ -0,0 +1,40 @@
+import {evalInInspectedWindow} from './evalInInspectedWindow';
+
+export 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.
+  evalInInspectedWindow(
+    'setBrowserSelectionFromReact',
+    [],
+    (didSelectionChange, evalError) => {
+      if (evalError) {
+        console.error(evalError);
+      }
+    },
+  );
+}
+
+export function setReactSelectionFromBrowser(bridge) {
+  // 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.
+  evalInInspectedWindow(
+    'setReactSelectionFromBrowser',
+    [],
+    (didSelectionChange, evalError) => {
+      if (evalError) {
+        console.error(evalError);
+      } else if (didSelectionChange) {
+        if (!bridge) {
+          console.error(
+            'Browser element selection changed, but bridge was not initialized',
+          );
+          return;
+        }
+
+        // Remember to sync the selection next time we show inspected element
+        bridge.send('syncSelectionFromBuiltinElementsPanel');
+      }
+    },
+  );
+}
diff --git a/packages/react-devtools-extensions/src/main/evalInInspectedWindow.js b/packages/react-devtools-extensions/src/main/evalInInspectedWindow.js
new file mode 100644
index 00000000000..27a339f4e8a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/evalInInspectedWindow.js
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {EvalScriptIds} from '../evalScripts';
+
+import {evalScripts} from '../evalScripts';
+
+type ExceptionInfo = {
+  code: ?string,
+  description: ?string,
+  isError: boolean,
+  isException: boolean,
+  value: any,
+};
+
+const EVAL_TIMEOUT = 1000 * 10;
+
+let evalRequestId = 0;
+const evalRequestCallbacks = new Map<
+  number,
+  (value: {result: any, error: any}) => void,
+>();
+
+function fallbackEvalInInspectedWindow(
+  scriptId: EvalScriptIds,
+  args: any[],
+  callback: (value: any, exceptionInfo: ?ExceptionInfo) => void,
+) {
+  if (!evalScripts[scriptId]) {
+    throw new Error(`No eval script with id "${scriptId}" exists.`);
+  }
+  const code = evalScripts[scriptId].code.apply(null, args);
+  const tabId = chrome.devtools.inspectedWindow.tabId;
+  const requestId = evalRequestId++;
+  chrome.runtime.sendMessage({
+    source: 'devtools-page',
+    payload: {
+      type: 'eval-in-inspected-window',
+      tabId,
+      requestId,
+      scriptId,
+      args,
+    },
+  });
+  const timeout = setTimeout(() => {
+    evalRequestCallbacks.delete(requestId);
+    if (callback) {
+      callback(null, {
+        code,
+        description:
+          'Timed out while waiting for eval response from the inspected window.',
+        isError: true,
+        isException: false,
+        value: undefined,
+      });
+    }
+  }, EVAL_TIMEOUT);
+  evalRequestCallbacks.set(requestId, ({result, error}) => {
+    clearTimeout(timeout);
+    evalRequestCallbacks.delete(requestId);
+    if (callback) {
+      if (error) {
+        callback(null, {
+          code,
+          description: undefined,
+          isError: false,
+          isException: true,
+          value: error,
+        });
+        return;
+      }
+      callback(result, null);
+    }
+  });
+}
+
+export function evalInInspectedWindow(
+  scriptId: EvalScriptIds,
+  args: any[],
+  callback: (value: any, exceptionInfo: ?ExceptionInfo) => void,
+) {
+  if (!evalScripts[scriptId]) {
+    throw new Error(`No eval script with id "${scriptId}" exists.`);
+  }
+  const code = evalScripts[scriptId].code.apply(null, args);
+  chrome.devtools.inspectedWindow.eval(code, (result, exceptionInfo) => {
+    if (!exceptionInfo) {
+      callback(result, exceptionInfo);
+      return;
+    }
+    // If an exception (e.g. CSP Blocked) occurred,
+    // fallback to the content script eval context
+    fallbackEvalInInspectedWindow(scriptId, args, callback);
+  });
+}
+
+chrome.runtime.onMessage.addListener(({payload, source}) => {
+  if (source === 'react-devtools-background') {
+    switch (payload?.type) {
+      case 'eval-in-inspected-window-response': {
+        const {requestId, result, error} = payload;
+        const callback = evalRequestCallbacks.get(requestId);
+        if (callback) {
+          callback({result, error});
+        }
+        break;
+      }
+    }
+  }
+});
diff --git a/packages/react-devtools-extensions/src/main/fetchFileWithCaching.js b/packages/react-devtools-extensions/src/main/fetchFileWithCaching.js
new file mode 100644
index 00000000000..f8863372ff9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/fetchFileWithCaching.js
@@ -0,0 +1,158 @@
+/* global chrome */
+
+import {normalizeUrlIfValid} from 'react-devtools-shared/src/utils';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+
+let debugIDCounter = 0;
+
+const debugLog = (...args) => {
+  if (__DEBUG__) {
+    console.log(...args);
+  }
+};
+
+const fetchFromNetworkCache = (url, resolve, reject) => {
+  // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
+  // while also still associating (potentially) interleaved logs with the original request.
+  let debugID = null;
+
+  if (__DEBUG__) {
+    debugID = debugIDCounter++;
+    debugLog(`[main] fetchFromNetworkCache(${debugID})`, url);
+  }
+
+  chrome.devtools.network.getHAR(harLog => {
+    for (let i = 0; i < harLog.entries.length; i++) {
+      const entry = harLog.entries[i];
+      if (url !== entry.request.url) {
+        continue;
+      }
+
+      debugLog(
+        `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+        url,
+      );
+
+      if (entry.getContent != null) {
+        entry.getContent(content => {
+          if (content) {
+            debugLog(
+              `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+            );
+
+            resolve(content);
+          } else {
+            debugLog(
+              `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+              content,
+            );
+
+            // Edge case where getContent() returned null; fall back to fetch.
+            fetchFromPage(url, resolve, reject);
+          }
+        });
+      } else {
+        const content = entry.response.content.text;
+
+        if (content != null) {
+          debugLog(
+            `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+          );
+          resolve(content);
+        } else {
+          debugLog(
+            `[main] fetchFromNetworkCache(${debugID}) Invalid content returned from entry.response.content`,
+            content,
+          );
+          fetchFromPage(url, resolve, reject);
+        }
+      }
+    }
+
+    debugLog(
+      `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+    );
+
+    // No matching URL found; fall back to fetch.
+    fetchFromPage(url, resolve, reject);
+  });
+};
+
+const pendingFetchRequests = new Set();
+function pendingFetchRequestsCleanup({payload, source}) {
+  if (source === 'react-devtools-background') {
+    switch (payload?.type) {
+      case 'fetch-file-with-cache-complete':
+      case 'fetch-file-with-cache-error':
+        pendingFetchRequests.delete(payload.url);
+    }
+  }
+}
+chrome.runtime.onMessage.addListener(pendingFetchRequestsCleanup);
+
+const fetchFromPage = async (url, resolve, reject) => {
+  debugLog('[main] fetchFromPage()', url);
+
+  function onPortMessage({payload, source}) {
+    if (source === 'react-devtools-background' && payload?.url === url) {
+      switch (payload?.type) {
+        case 'fetch-file-with-cache-complete':
+          chrome.runtime.onMessage.removeListener(onPortMessage);
+          resolve(payload.value);
+          break;
+        case 'fetch-file-with-cache-error':
+          chrome.runtime.onMessage.removeListener(onPortMessage);
+          reject(payload.value);
+          break;
+      }
+    }
+  }
+
+  chrome.runtime.onMessage.addListener(onPortMessage);
+  if (pendingFetchRequests.has(url)) {
+    return;
+  }
+
+  pendingFetchRequests.add(url);
+  chrome.runtime.sendMessage({
+    source: 'devtools-page',
+    payload: {
+      type: 'fetch-file-with-cache',
+      tabId: chrome.devtools.inspectedWindow.tabId,
+      url,
+    },
+  });
+};
+
+// 1. Check if resource is available via chrome.devtools.inspectedWindow.getResources
+// 2. Check if resource was loaded previously and available in network cache via chrome.devtools.network.getHAR
+// 3. Fallback to fetching directly from the page context (from backend)
+async function fetchFileWithCaching(url: string): Promise<string> {
+  if (__IS_CHROME__ || __IS_EDGE__) {
+    const resources = await new Promise(resolve =>
+      chrome.devtools.inspectedWindow.getResources(r => resolve(r)),
+    );
+
+    const normalizedReferenceURL = normalizeUrlIfValid(url);
+    const resource = resources.find(r => r.url === normalizedReferenceURL);
+
+    if (resource != null) {
+      const content = await new Promise(resolve =>
+        resource.getContent(fetchedContent => resolve(fetchedContent)),
+      );
+
+      if (content) {
+        return content;
+      }
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    // Try fetching from the Network cache first.
+    // If DevTools was opened after the page started loading, we may have missed some requests.
+    // So fall back to a fetch() from the page and hope we get a cached response that way.
+    fetchFromNetworkCache(url, resolve, reject);
+  });
+}
+
+export default fetchFileWithCaching;
diff --git a/packages/react-devtools-extensions/src/main/getProfilingFlags.js b/packages/react-devtools-extensions/src/main/getProfilingFlags.js
new file mode 100644
index 00000000000..4fcc7a8ea3f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/getProfilingFlags.js
@@ -0,0 +1,21 @@
+import {
+  localStorageGetItem,
+  localStorageRemoveItem,
+} from 'react-devtools-shared/src/storage';
+import {LOCAL_STORAGE_SUPPORTS_PROFILING_KEY} from 'react-devtools-shared/src/constants';
+
+function getProfilingFlags() {
+  // 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;
+
+  if (localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true') {
+    isProfiling = true;
+    localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
+  }
+
+  return {isProfiling};
+}
+
+export default getProfilingFlags;
diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js
new file mode 100644
index 00000000000..c2616cf04a1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/index.js
@@ -0,0 +1,723 @@
+/* global chrome */
+/** @flow */
+
+import type {RootType} from 'react-dom/src/client/ReactDOMRoot';
+import type {FrontendBridge, Message} from 'react-devtools-shared/src/bridge';
+import type {
+  TabID,
+  ViewElementSource,
+} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {SourceSelection} from 'react-devtools-shared/src/devtools/views/Editor/EditorPane';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+
+import {createElement} from 'react';
+import {flushSync} from 'react-dom';
+import {createRoot} from 'react-dom/client';
+import Bridge from 'react-devtools-shared/src/bridge';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {getBrowserTheme} from '../utils';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+import {
+  LOCAL_STORAGE_SUPPORTS_PROFILING_KEY,
+  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+} from 'react-devtools-shared/src/constants';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+import {
+  getAlwaysOpenInEditor,
+  getOpenInEditorURL,
+  normalizeUrlIfValid,
+} from 'react-devtools-shared/src/utils';
+import {checkConditions} from 'react-devtools-shared/src/devtools/views/Editor/utils';
+import * as parseHookNames from 'react-devtools-shared/src/hooks/parseHookNames';
+
+import {
+  setBrowserSelectionFromReact,
+  setReactSelectionFromBrowser,
+} from './elementSelection';
+import {viewAttributeSource} from './sourceSelection';
+
+import {evalInInspectedWindow} from './evalInInspectedWindow';
+import {startReactPolling} from './reactPolling';
+import {cloneStyleTags} from './cloneStyleTags';
+import fetchFileWithCaching from './fetchFileWithCaching';
+import injectBackendManager from './injectBackendManager';
+import registerEventsLogger from './registerEventsLogger';
+import getProfilingFlags from './getProfilingFlags';
+import debounce from './debounce';
+import './requestAnimationFramePolyfill';
+
+const resolvedParseHookNames = Promise.resolve(parseHookNames);
+// DevTools assumes this is a dynamically imported module. Since we outline
+// workers in this bundle, we can sync require the module since it's just a thin
+// wrapper around calling the worker.
+const hookNamesModuleLoaderFunction = () => resolvedParseHookNames;
+
+function createBridge() {
+  bridge = new Bridge({
+    listen(fn) {
+      const bridgeListener = (message: Message) => fn(message);
+      // Store the reference so that we unsubscribe from the same object.
+      const portOnMessage = ((port: any): ExtensionPort).onMessage;
+      portOnMessage.addListener(bridgeListener);
+
+      lastSubscribedBridgeListener = bridgeListener;
+
+      return () => {
+        port?.onMessage.removeListener(bridgeListener);
+        lastSubscribedBridgeListener = null;
+      };
+    },
+
+    send(event: string, payload: any, transferable?: Array<any>) {
+      port?.postMessage({event, payload}, transferable);
+    },
+  });
+
+  bridge.addListener('reloadAppForProfiling', () => {
+    localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+    evalInInspectedWindow('reload', [], () => {});
+  });
+
+  bridge.addListener(
+    'syncSelectionToBuiltinElementsPanel',
+    setBrowserSelectionFromReact,
+  );
+
+  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',
+    );
+  });
+
+  const sourcesPanel = chrome.devtools.panels.sources;
+
+  const onBrowserElementSelectionChanged = () =>
+    setReactSelectionFromBrowser(bridge);
+  const onBrowserSourceSelectionChanged = (location: {
+    url: string,
+    startLine: number,
+    startColumn: number,
+    endLine: number,
+    endColumn: number,
+  }) => {
+    if (
+      currentSelectedSource === null ||
+      currentSelectedSource.url !== location.url
+    ) {
+      currentSelectedSource = {
+        url: location.url,
+        selectionRef: {
+          // We use 1-based line and column, Chrome provides them 0-based.
+          line: location.startLine + 1,
+          column: location.startColumn + 1,
+        },
+      };
+      // Rerender with the new file selection.
+      render();
+    } else {
+      // Update the ref to the latest position without updating the url. No need to rerender.
+      const selectionRef = currentSelectedSource.selectionRef;
+      selectionRef.line = location.startLine + 1;
+      selectionRef.column = location.startColumn + 1;
+    }
+  };
+  const onBridgeShutdown = () => {
+    chrome.devtools.panels.elements.onSelectionChanged.removeListener(
+      onBrowserElementSelectionChanged,
+    );
+    if (sourcesPanel && sourcesPanel.onSelectionChanged) {
+      currentSelectedSource = null;
+      sourcesPanel.onSelectionChanged.removeListener(
+        onBrowserSourceSelectionChanged,
+      );
+    }
+  };
+
+  bridge.addListener('shutdown', onBridgeShutdown);
+
+  chrome.devtools.panels.elements.onSelectionChanged.addListener(
+    onBrowserElementSelectionChanged,
+  );
+  if (sourcesPanel && sourcesPanel.onSelectionChanged) {
+    sourcesPanel.onSelectionChanged.addListener(
+      onBrowserSourceSelectionChanged,
+    );
+  }
+}
+
+function createBridgeAndStore() {
+  createBridge();
+
+  const {isProfiling} = getProfilingFlags();
+
+  store = new Store(bridge, {
+    isProfiling,
+    supportsReloadAndProfile: __IS_CHROME__ || __IS_EDGE__,
+    // At this time, the timeline can only parse Chrome performance profiles.
+    supportsTimeline: __IS_CHROME__,
+    supportsTraceUpdates: true,
+    supportsInspectMatchingDOMElement: true,
+    supportsClickToInspect: true,
+  });
+
+  store.addListener('enableSuspenseTab', () => {
+    createSuspensePanel();
+  });
+
+  store.addListener('settingsUpdated', settings => {
+    chrome.storage.local.set(settings);
+  });
+
+  if (!isProfiling) {
+    // We previously stored this in performCleanup function
+    store.profilerStore.profilingData = profilingData;
+  }
+
+  // Initialize the backend only once the Store has been initialized.
+  // Otherwise, the Store may miss important initial tree op codes.
+  injectBackendManager(chrome.devtools.inspectedWindow.tabId);
+
+  const viewAttributeSourceFunction = (
+    id: Element['id'],
+    path: Array<string | number>,
+  ) => {
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID != null) {
+      viewAttributeSource(rendererID, id, path);
+    }
+  };
+
+  const viewElementSourceFunction: ViewElementSource = (
+    source,
+    symbolicatedSource,
+  ) => {
+    const [, sourceURL, line, column] = symbolicatedSource
+      ? symbolicatedSource
+      : source;
+
+    // We use 1-based line and column, Chrome expects them 0-based.
+    chrome.devtools.panels.openResource(
+      normalizeUrlIfValid(sourceURL),
+      line - 1,
+      column - 1,
+    );
+  };
+
+  root = createRoot(document.createElement('div'));
+
+  render = (overrideTab: TabID | null = mostRecentOverrideTab) => {
+    mostRecentOverrideTab = overrideTab;
+
+    root.render(
+      createElement(DevTools, {
+        bridge,
+        browserTheme: getBrowserTheme(),
+        componentsPortalContainer,
+        inspectedElementPortalContainer,
+        profilerPortalContainer,
+        editorPortalContainer,
+        currentSelectedSource,
+        enabledInspectedElementContextMenu: true,
+        fetchFileWithCaching,
+        hookNamesModuleLoaderFunction,
+        overrideTab,
+        showTabBar: false,
+        store,
+        suspensePortalContainer,
+        warnIfUnsupportedVersionDetected: true,
+        viewAttributeSourceFunction,
+        // Firefox doesn't support chrome.devtools.panels.openResource yet
+        canViewElementSourceFunction: () => __IS_CHROME__ || __IS_EDGE__,
+        viewElementSourceFunction,
+      }),
+    );
+  };
+}
+
+function ensureInitialHTMLIsCleared(
+  container: HTMLElement & {_hasInitialHTMLBeenCleared?: boolean},
+) {
+  if (container._hasInitialHTMLBeenCleared) {
+    return;
+  }
+
+  container.innerHTML = '';
+  container._hasInitialHTMLBeenCleared = true;
+}
+
+function createComponentsPanel() {
+  if (componentsPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(componentsPortalContainer);
+    render('components');
+
+    return;
+  }
+
+  if (componentsPanel) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  chrome.devtools.panels.create(
+    __IS_CHROME__ || __IS_EDGE__ ? 'Components ⚛' : 'Components',
+    __IS_EDGE__ ? 'icons/production.svg' : '',
+    'panel.html',
+    createdPanel => {
+      componentsPanel = createdPanel;
+
+      createdPanel.onShown.addListener(portal => {
+        componentsPortalContainer = portal.container;
+        if (componentsPortalContainer != null && render) {
+          ensureInitialHTMLIsCleared(componentsPortalContainer);
+
+          render('components');
+          portal.injectStyles(cloneStyleTags);
+
+          logEvent({event_name: 'selected-components-tab'});
+        }
+      });
+
+      createdPanel.onShown.addListener(() => {
+        bridge.emit('extensionComponentsPanelShown');
+      });
+      createdPanel.onHidden.addListener(() => {
+        bridge.emit('extensionComponentsPanelHidden');
+      });
+    },
+  );
+}
+
+function createElementsInspectPanel() {
+  if (inspectedElementPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
+    render();
+
+    return;
+  }
+
+  if (inspectedElementPane) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  const elementsPanel = chrome.devtools.panels.elements;
+  if (__IS_FIREFOX__ || !elementsPanel || !elementsPanel.createSidebarPane) {
+    // Firefox will not pass the window to the onShown listener despite setPage
+    // being called.
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=2010549
+
+    // May not be supported in some browsers.
+    // See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel/createSidebarPane#browser_compatibility
+    return;
+  }
+
+  elementsPanel.createSidebarPane('React Element ⚛', createdPane => {
+    inspectedElementPane = createdPane;
+
+    createdPane.setPage('panel.html');
+    createdPane.setHeight('75px');
+
+    createdPane.onShown.addListener(portal => {
+      inspectedElementPortalContainer = portal.container;
+      if (inspectedElementPortalContainer != null && render) {
+        ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
+        bridge.send('syncSelectionFromBuiltinElementsPanel');
+
+        render();
+        portal.injectStyles(cloneStyleTags);
+
+        logEvent({event_name: 'selected-inspected-element-pane'});
+      }
+    });
+  });
+}
+
+function createProfilerPanel() {
+  if (profilerPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(profilerPortalContainer);
+    render('profiler');
+
+    return;
+  }
+
+  if (profilerPanel) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  chrome.devtools.panels.create(
+    __IS_CHROME__ || __IS_EDGE__ ? 'Profiler ⚛' : 'Profiler',
+    __IS_EDGE__ ? 'icons/production.svg' : '',
+    'panel.html',
+    createdPanel => {
+      profilerPanel = createdPanel;
+
+      createdPanel.onShown.addListener(portal => {
+        profilerPortalContainer = portal.container;
+        if (profilerPortalContainer != null && render) {
+          ensureInitialHTMLIsCleared(profilerPortalContainer);
+
+          render('profiler');
+          portal.injectStyles(cloneStyleTags);
+
+          logEvent({event_name: 'selected-profiler-tab'});
+        }
+      });
+    },
+  );
+}
+
+function createSourcesEditorPanel() {
+  if (editorPortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(editorPortalContainer);
+    render();
+
+    return;
+  }
+
+  if (editorPane) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  const sourcesPanel = chrome.devtools.panels.sources;
+  if (!sourcesPanel || !sourcesPanel.createSidebarPane) {
+    // Firefox doesn't currently support extending the source panel.
+    return;
+  }
+
+  sourcesPanel.createSidebarPane('Code Editor ⚛', createdPane => {
+    editorPane = createdPane;
+
+    createdPane.setPage('panel.html');
+    createdPane.setHeight('75px');
+
+    createdPane.onShown.addListener(portal => {
+      editorPortalContainer = portal.container;
+      if (editorPortalContainer != null && render) {
+        ensureInitialHTMLIsCleared(editorPortalContainer);
+
+        render();
+        portal.injectStyles(cloneStyleTags);
+
+        logEvent({event_name: 'selected-editor-pane'});
+      }
+    });
+  });
+}
+
+function createSuspensePanel() {
+  if (suspensePortalContainer) {
+    // Panel is created and user opened it at least once
+    ensureInitialHTMLIsCleared(suspensePortalContainer);
+    render('suspense');
+
+    return;
+  }
+
+  if (suspensePanel) {
+    // Panel is created, but wasn't opened yet, so no document is present for it
+    return;
+  }
+
+  chrome.devtools.panels.create(
+    __IS_CHROME__ || __IS_EDGE__ ? 'Suspense ⚛' : 'Suspense',
+    __IS_EDGE__ ? 'icons/production.svg' : '',
+    'panel.html',
+    createdPanel => {
+      suspensePanel = createdPanel;
+
+      createdPanel.onShown.addListener(portal => {
+        suspensePortalContainer = portal.container;
+        if (suspensePortalContainer != null && render) {
+          ensureInitialHTMLIsCleared(suspensePortalContainer);
+
+          render('suspense');
+          portal.injectStyles(cloneStyleTags);
+
+          logEvent({event_name: 'selected-suspense-tab'});
+        }
+      });
+    },
+  );
+}
+
+function performInTabNavigationCleanup() {
+  // Potentially, if react hasn't loaded yet and user performs in-tab navigation
+  clearReactPollingInstance();
+
+  if (store !== null) {
+    // Store profiling data, so it can be used later
+    profilingData = store.profilerStore.profilingData;
+  }
+
+  // If panels were already created, and we have already mounted React root to display
+  // tabs (Components or Profiler), we should unmount root first and render them again
+  if (
+    (componentsPortalContainer ||
+      profilerPortalContainer ||
+      suspensePortalContainer) &&
+    root
+  ) {
+    // 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.
+    // This should also emit bridge.shutdown, but only if this root was mounted
+    flushSync(() => root.unmount());
+  } else {
+    // In case Browser DevTools were opened, but user never pressed on extension panels
+    // They were never mounted and there is nothing to unmount, but we need to emit shutdown event
+    // because bridge was already created
+    bridge?.shutdown();
+  }
+
+  // Do not nullify componentsPanelPortal and profilerPanelPortal on purpose,
+  // They are not recreated when user does in-tab navigation, and they can only be accessed via
+  // callback in onShown listener, which is called only when panel has been shown
+  // This event won't be emitted again after in-tab navigation, if DevTools panel keeps being opened
+
+  // Do not clean mostRecentOverrideTab on purpose, so we remember last opened
+  // React DevTools tab, when user does in-tab navigation
+
+  store = (null: $FlowFixMe);
+  bridge = (null: $FlowFixMe);
+  render = (null: $FlowFixMe);
+  root = (null: $FlowFixMe);
+}
+
+function performFullCleanup() {
+  // Potentially, if react hasn't loaded yet and user closed the browser DevTools
+  clearReactPollingInstance();
+
+  if (
+    (componentsPortalContainer ||
+      profilerPortalContainer ||
+      suspensePortalContainer) &&
+    root
+  ) {
+    // This should also emit bridge.shutdown, but only if this root was mounted
+    flushSync(() => root.unmount());
+  } else {
+    bridge?.shutdown();
+  }
+
+  componentsPortalContainer = null;
+  profilerPortalContainer = null;
+  suspensePortalContainer = null;
+  root = (null: $FlowFixMe);
+
+  mostRecentOverrideTab = null;
+  store = (null: $FlowFixMe);
+  bridge = (null: $FlowFixMe);
+  render = (null: $FlowFixMe);
+
+  port?.disconnect();
+  port = (null: $FlowFixMe);
+}
+
+function connectExtensionPort(): void {
+  if (port) {
+    throw new Error('DevTools port was already connected');
+  }
+
+  const tabId = chrome.devtools.inspectedWindow.tabId;
+  port = chrome.runtime.connect({
+    name: String(tabId),
+  });
+
+  // If DevTools port was reconnected and Bridge was already created
+  // We should subscribe bridge to this port events
+  // This could happen if service worker dies and all ports are disconnected,
+  // but later user continues the session and Chrome reconnects all ports
+  // Bridge object is still in-memory, though
+  if (lastSubscribedBridgeListener) {
+    port.onMessage.addListener(lastSubscribedBridgeListener);
+  }
+
+  // This port may be disconnected by Chrome at some point, this callback
+  // will be executed only if this port was disconnected from the other end
+  // so, when we call `port.disconnect()` from this script,
+  // this should not trigger this callback and port reconnection
+  port.onDisconnect.addListener(() => {
+    port = (null: $FlowFixMe);
+    connectExtensionPort();
+  });
+}
+
+function mountReactDevTools() {
+  reactPollingInstance = null;
+
+  registerEventsLogger();
+
+  createBridgeAndStore();
+
+  createComponentsPanel();
+  createProfilerPanel();
+  createSourcesEditorPanel();
+  createElementsInspectPanel();
+  // Suspense Tab is created via the hook
+  // TODO(enableSuspenseTab): Create eagerly once Suspense tab is stable
+}
+
+let reactPollingInstance = null;
+function clearReactPollingInstance() {
+  reactPollingInstance?.abort();
+  reactPollingInstance = null;
+}
+
+function showNoReactDisclaimer() {
+  if (componentsPortalContainer) {
+    componentsPortalContainer.innerHTML =
+      '<h1 class="no-react-disclaimer">Looks like this page doesn\'t have React, or it hasn\'t been loaded yet.</h1>';
+    delete componentsPortalContainer._hasInitialHTMLBeenCleared;
+  }
+
+  if (profilerPortalContainer) {
+    profilerPortalContainer.innerHTML =
+      '<h1 class="no-react-disclaimer">Looks like this page doesn\'t have React, or it hasn\'t been loaded yet.</h1>';
+    delete profilerPortalContainer._hasInitialHTMLBeenCleared;
+  }
+
+  if (suspensePortalContainer) {
+    suspensePortalContainer.innerHTML =
+      '<h1 class="no-react-disclaimer">Looks like this page doesn\'t have React, or it hasn\'t been loaded yet.</h1>';
+    delete suspensePortalContainer._hasInitialHTMLBeenCleared;
+  }
+}
+
+function mountReactDevToolsWhenReactHasLoaded() {
+  reactPollingInstance = startReactPolling(
+    mountReactDevTools,
+    5, // ~5 seconds
+    showNoReactDisclaimer,
+  );
+}
+
+let bridge: FrontendBridge = (null: $FlowFixMe);
+let lastSubscribedBridgeListener = null;
+let store: Store = (null: $FlowFixMe);
+
+let profilingData = null;
+
+let componentsPanel = null;
+let profilerPanel = null;
+let suspensePanel = null;
+let editorPane = null;
+let inspectedElementPane = null;
+let componentsPortalContainer = null;
+let profilerPortalContainer = null;
+let suspensePortalContainer = null;
+let editorPortalContainer = null;
+let inspectedElementPortalContainer = null;
+
+let mostRecentOverrideTab: null | TabID = null;
+let render: (overrideTab?: TabID) => void = (null: $FlowFixMe);
+let root: RootType = (null: $FlowFixMe);
+
+let currentSelectedSource: null | SourceSelection = null;
+
+type ExtensionEvent = {
+  addListener(callback: (message: Message, port: ExtensionPort) => void): void,
+  removeListener(
+    callback: (message: Message, port: ExtensionPort) => void,
+  ): void,
+};
+
+/** https://developer.chrome.com/docs/extensions/reference/api/runtime#type-Port */
+type ExtensionPort = {
+  onDisconnect: ExtensionEvent,
+  onMessage: ExtensionEvent,
+  postMessage(message: mixed, transferable?: Array<mixed>): void,
+  disconnect(): void,
+};
+
+let port: ExtensionPort = (null: $FlowFixMe);
+
+// In case when multiple navigation events emitted in a short period of time
+// This debounced callback primarily used to avoid mounting React DevTools multiple times, which results
+// into subscribing to the same events from Bridge and window multiple times
+// In this case, we will handle `operations` event twice or more and user will see
+// `Cannot add node "1" because a node with that id is already in the Store.`
+const debouncedMountReactDevToolsCallback = debounce(
+  mountReactDevToolsWhenReactHasLoaded,
+  500,
+);
+
+// Clean up everything, but start mounting React DevTools panels if user stays at this page
+function onNavigatedToOtherPage() {
+  performInTabNavigationCleanup();
+  debouncedMountReactDevToolsCallback();
+}
+
+// Cleanup previous page state and remount everything
+chrome.devtools.network.onNavigated.addListener(onNavigatedToOtherPage);
+
+// Should be emitted when browser DevTools are closed
+if (__IS_FIREFOX__) {
+  // For some reason Firefox doesn't emit onBeforeUnload event
+  window.addEventListener('unload', performFullCleanup);
+} else {
+  window.addEventListener('beforeunload', performFullCleanup);
+}
+
+connectExtensionPort();
+
+mountReactDevToolsWhenReactHasLoaded();
+
+function onThemeChanged() {
+  // Rerender with the new theme
+  render();
+}
+
+if (chrome.devtools.panels.setThemeChangeHandler) {
+  // Chrome
+  chrome.devtools.panels.setThemeChangeHandler(onThemeChanged);
+} else if (chrome.devtools.panels.onThemeChanged) {
+  // Firefox
+  chrome.devtools.panels.onThemeChanged.addListener(onThemeChanged);
+}
+
+// Firefox doesn't support resources handlers yet.
+if (chrome.devtools.panels.setOpenResourceHandler) {
+  chrome.devtools.panels.setOpenResourceHandler(
+    (
+      resource,
+      lineNumber = 1,
+      // The column is a new feature so we have to specify a default if it doesn't exist
+      columnNumber = 1,
+    ) => {
+      const alwaysOpenInEditor = getAlwaysOpenInEditor();
+      const editorURL = getOpenInEditorURL();
+      if (alwaysOpenInEditor && editorURL) {
+        const location = ['', resource.url, lineNumber, columnNumber];
+        const {url, shouldDisableButton} = checkConditions(editorURL, location);
+        if (!shouldDisableButton) {
+          window.open(url);
+          return;
+        }
+      }
+      // Otherwise fallback to the built-in behavior.
+      chrome.devtools.panels.openResource(
+        resource.url,
+        lineNumber - 1,
+        columnNumber - 1,
+        maybeError => {
+          if (maybeError && maybeError.isError) {
+            // Not a resource Chrome can open. Fallback to browser default behavior.
+            window.open(resource.url);
+          }
+        },
+      );
+    },
+  );
+}
diff --git a/packages/react-devtools-extensions/src/main/injectBackendManager.js b/packages/react-devtools-extensions/src/main/injectBackendManager.js
new file mode 100644
index 00000000000..e70cb95a9a5
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/injectBackendManager.js
@@ -0,0 +1,13 @@
+/* global chrome */
+
+function injectBackendManager(tabId) {
+  chrome.runtime.sendMessage({
+    source: 'devtools-page',
+    payload: {
+      type: 'inject-backend-manager',
+      tabId,
+    },
+  });
+}
+
+export default injectBackendManager;
diff --git a/packages/react-devtools-extensions/src/main/reactPolling.js b/packages/react-devtools-extensions/src/main/reactPolling.js
new file mode 100644
index 00000000000..d4b3c22e66e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/reactPolling.js
@@ -0,0 +1,104 @@
+import {evalInInspectedWindow} from './evalInInspectedWindow';
+
+class CouldNotFindReactOnThePageError extends Error {
+  constructor() {
+    super("Could not find React, or it hasn't been loaded yet");
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CouldNotFindReactOnThePageError);
+    }
+
+    this.name = 'CouldNotFindReactOnThePageError';
+  }
+}
+
+export function startReactPolling(
+  onReactFound,
+  attemptsThreshold,
+  onCouldNotFindReactAfterReachingAttemptsThreshold,
+) {
+  let status = 'idle';
+
+  function abort() {
+    status = 'aborted';
+  }
+
+  // This function will call onSuccess only if React was found and polling is not aborted, onError will be called for every other case
+  function checkIfReactPresentInInspectedWindow(onSuccess, onError) {
+    evalInInspectedWindow(
+      'checkIfReactPresentInInspectedWindow',
+      [],
+      (pageHasReact, exceptionInfo) => {
+        if (status === 'aborted') {
+          onError(
+            'Polling was aborted, user probably navigated to the other page',
+          );
+          return;
+        }
+
+        if (exceptionInfo) {
+          const {code, description, isError, isException, value} =
+            exceptionInfo;
+
+          if (isException) {
+            onError(
+              `Received error while checking if react has loaded: ${value}`,
+            );
+            return;
+          }
+
+          if (isError) {
+            onError(
+              `Received error with code ${code} while checking if react has loaded: "${description}"`,
+            );
+            return;
+          }
+        }
+
+        if (pageHasReact) {
+          onSuccess();
+          return;
+        }
+
+        onError(new CouldNotFindReactOnThePageError());
+      },
+    );
+  }
+
+  // Just a Promise wrapper around `checkIfReactPresentInInspectedWindow`
+  // returns a Promise, which will resolve only if React has been found on the page
+  function poll(attempt) {
+    return new Promise((resolve, reject) => {
+      checkIfReactPresentInInspectedWindow(resolve, reject);
+    }).catch(error => {
+      if (error instanceof CouldNotFindReactOnThePageError) {
+        if (attempt === attemptsThreshold) {
+          onCouldNotFindReactAfterReachingAttemptsThreshold();
+        }
+
+        // Start next attempt in 0.5s
+        return new Promise(r => setTimeout(r, 500)).then(() =>
+          poll(attempt + 1),
+        );
+      }
+
+      // Propagating every other Error
+      throw error;
+    });
+  }
+
+  poll(1)
+    .then(onReactFound)
+    .catch(error => {
+      // Log propagated errors only if polling was not aborted
+      // Some errors are expected when user performs in-tab navigation and `.eval()` is still being executed
+      if (status === 'aborted') {
+        return;
+      }
+
+      console.error(error);
+    });
+
+  return {abort};
+}
diff --git a/packages/react-devtools-extensions/src/main/registerEventsLogger.js b/packages/react-devtools-extensions/src/main/registerEventsLogger.js
new file mode 100644
index 00000000000..ec57d173e42
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/registerEventsLogger.js
@@ -0,0 +1,12 @@
+/* global chrome */
+
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
+
+function registerEventsLogger() {
+  registerDevToolsEventLogger('extension', async () => {
+    const tabs = await chrome.tabs.query({active: true});
+    return {page_url: tabs[0]?.url};
+  });
+}
+
+export default registerEventsLogger;
diff --git a/packages/react-devtools-extensions/src/main/requestAnimationFramePolyfill.js b/packages/react-devtools-extensions/src/main/requestAnimationFramePolyfill.js
new file mode 100644
index 00000000000..ccd9a361d9c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/requestAnimationFramePolyfill.js
@@ -0,0 +1,17 @@
+// rAF never fires on devtools_page (because it's in the background)
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1241986#c31
+// Since we render React elements here, we need to polyfill it with setTimeout
+// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
+const FRAME_TIME = 16;
+let lastTime = 0;
+
+window.requestAnimationFrame = function (callback, element) {
+  const now = window.performance.now();
+  const nextTime = Math.max(lastTime + FRAME_TIME, now);
+
+  return setTimeout(function () {
+    callback((lastTime = nextTime));
+  }, nextTime - now);
+};
+
+window.cancelAnimationFrame = clearTimeout;
diff --git a/packages/react-devtools-extensions/src/main/sourceSelection.js b/packages/react-devtools-extensions/src/main/sourceSelection.js
new file mode 100644
index 00000000000..49ee99eaa4a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/main/sourceSelection.js
@@ -0,0 +1,25 @@
+import {evalInInspectedWindow} from './evalInInspectedWindow';
+
+export function viewAttributeSource(rendererID, elementID, path) {
+  evalInInspectedWindow(
+    'viewAttributeSource',
+    [{rendererID, elementID, path}],
+    (didInspect, evalError) => {
+      if (evalError) {
+        console.error(evalError);
+      }
+    },
+  );
+}
+
+export function viewElementSource(rendererID, elementID) {
+  evalInInspectedWindow(
+    'viewElementSource',
+    [{rendererID, elementID}],
+    (didInspect, evalError) => {
+      if (evalError) {
+        console.error(evalError);
+      }
+    },
+  );
+}
diff --git a/packages/react-devtools-extensions/src/panel.js b/packages/react-devtools-extensions/src/panel.js
new file mode 100644
index 00000000000..202b7cf4d68
--- /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 (const linkTag of linkTags) {
+      document.head.appendChild(linkTag);
+    }
+  }
+};
diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
new file mode 100644
index 00000000000..3219b58ebc9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -0,0 +1,25 @@
+/* global chrome */
+
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+
+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';
+      }
+    }
+  }
+}
+
+export const COMPACT_VERSION_NAME = 'compact';
+export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME];
diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
new file mode 100644
index 00000000000..9f02e98d198
--- /dev/null
+++ b/packages/react-devtools-extensions/utils.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {execSync} = require('child_process');
+const {existsSync, readFileSync} = require('fs');
+const {resolve} = require('path');
+
+const GITHUB_URL = 'https://github.com/facebook/react';
+
+function getGitCommit() {
+  try {
+    return execSync('git show -s --no-show-signature --format=%h')
+      .toString()
+      .trim();
+  } catch (error) {
+    // Mozilla runs this command from a git archive.
+    // In that context, there is no Git context.
+    // Using the commit hash specified to download-experimental-build.js script as a fallback.
+
+    // Try to read from build/COMMIT_SHA file
+    const commitShaPath = resolve(__dirname, '..', '..', 'build', 'COMMIT_SHA');
+    if (!existsSync(commitShaPath)) {
+      throw new Error(
+        'Could not find build/COMMIT_SHA file. Did you run scripts/release/download-experimental-build.js script?',
+      );
+    }
+
+    try {
+      const commitHash = readFileSync(commitShaPath, 'utf8').trim();
+      // Return short hash (first 7 characters) to match abbreviated commit hash format
+      return commitHash.slice(0, 7);
+    } catch (readError) {
+      throw new Error(
+        `Failed to read build/COMMIT_SHA file: ${readError.message}`,
+      );
+    }
+  }
+}
+
+function getVersionString(packageVersion = null) {
+  if (packageVersion == null) {
+    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.config.js b/packages/react-devtools-extensions/webpack.config.js
new file mode 100644
index 00000000000..7b5acca6cc2
--- /dev/null
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -0,0 +1,298 @@
+'use strict';
+
+const {resolve, isAbsolute, relative} = require('path');
+const Webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const {GITHUB_URL, getVersionString} = require('./utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
+const {StatsWriterPlugin} = require('webpack-stats-plugin');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
+
+const EDITOR_URL = process.env.EDITOR_URL || null;
+const LOGGING_URL = process.env.LOGGING_URL || null;
+
+const IS_CHROME = process.env.IS_CHROME === 'true';
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
+const IS_EDGE = process.env.IS_EDGE === 'true';
+const IS_INTERNAL_VERSION = process.env.FEATURE_FLAG_TARGET === 'extension-fb';
+
+const IS_INTERNAL_MCP_BUILD = process.env.IS_INTERNAL_MCP_BUILD === 'true';
+
+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
+
+let statsFileName = `webpack-stats.${featureFlagTarget}.${__DEV__ ? 'development' : 'production'}`;
+if (IS_CHROME) {
+  statsFileName += `.chrome`;
+}
+if (IS_FIREFOX) {
+  statsFileName += `.firefox`;
+}
+if (IS_EDGE) {
+  statsFileName += `.edge`;
+}
+if (IS_INTERNAL_MCP_BUILD) {
+  statsFileName += `.mcp`;
+}
+statsFileName += '.json';
+
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: false,
+  entry: {
+    backend: './src/backend.js',
+    background: './src/background/index.js',
+    backendManager: './src/contentScripts/backendManager.js',
+    fallbackEvalContext: './src/contentScripts/fallbackEvalContext.js',
+    fileFetcher: './src/contentScripts/fileFetcher.js',
+    main: './src/main/index.js',
+    panel: './src/panel.js',
+    proxy: './src/contentScripts/proxy.js',
+    prepareInjection: './src/contentScripts/prepareInjection.js',
+    installHook: './src/contentScripts/installHook.js',
+    hookSettingsInjector: './src/contentScripts/hookSettingsInjector.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    publicPath: '/build/',
+    filename: chunkData => {
+      switch (chunkData.chunk.name) {
+        case 'backend':
+          return 'react_devtools_backend_compact.js';
+        default:
+          return '[name].js';
+      }
+    },
+    chunkFilename: '[name].chunk.js',
+  },
+  node: {
+    global: false,
+  },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  optimization: {
+    minimize: !__DEV__,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            unused: true,
+            dead_code: true,
+          },
+          mangle: {
+            keep_fnames: true,
+          },
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__,
+      __EXPERIMENTAL__: true,
+      __EXTENSION__: true,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
+      __IS_CHROME__: IS_CHROME,
+      __IS_FIREFOX__: IS_FIREFOX,
+      __IS_EDGE__: IS_EDGE,
+      __IS_NATIVE__: false,
+      __IS_INTERNAL_MCP_BUILD__: IS_INTERNAL_MCP_BUILD,
+      __IS_INTERNAL_VERSION__: IS_INTERNAL_VERSION,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+    new Webpack.SourceMapDevToolPlugin({
+      filename: '[file].map',
+      include: ['installHook.js', 'react_devtools_backend_compact.js'],
+      noSources: !__DEV__,
+      // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144
+      moduleFilenameTemplate(info) {
+        const {absoluteResourcePath, namespace, resourcePath} = info;
+
+        if (isAbsolute(absoluteResourcePath)) {
+          return relative(__dirname + '/build', absoluteResourcePath);
+        }
+
+        // Mimic Webpack's default behavior:
+        return `webpack://${namespace}/${resourcePath}`;
+      },
+    }),
+    new SourceMapIgnoreListPlugin({
+      shouldIgnoreSource: (assetName, _source) => {
+        if (__DEV__) {
+          // Don't ignore list anything in DEV build for debugging purposes
+          return false;
+        }
+
+        const contentScriptNamesToIgnoreList = [
+          'react_devtools_backend_compact',
+          // This is where we override console
+          'installHook',
+        ];
+
+        return contentScriptNamesToIgnoreList.some(ignoreListName =>
+          assetName.startsWith(ignoreListName),
+        );
+      },
+    }),
+    {
+      apply(compiler) {
+        if (__DEV__) {
+          return;
+        }
+
+        const {RawSource} = compiler.webpack.sources;
+        compiler.hooks.compilation.tap(
+          'CustomContentForHookScriptPlugin',
+          compilation => {
+            compilation.hooks.processAssets.tap(
+              {
+                name: 'CustomContentForHookScriptPlugin',
+                stage: Webpack.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+                additionalAssets: true,
+              },
+              assets => {
+                // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+                for (const [name, asset] of Object.entries(assets)) {
+                  if (name !== 'installHook.js.map') {
+                    continue;
+                  }
+
+                  const mapContent = asset.source().toString();
+                  if (!mapContent) {
+                    continue;
+                  }
+
+                  const map = JSON.parse(mapContent);
+                  map.sourcesContent = map.sources.map(sourceName => {
+                    if (!sourceName.endsWith('/hook.js')) {
+                      return null;
+                    }
+
+                    return (
+                      '/*\n' +
+                      ' * This script is from React DevTools.\n' +
+                      " * You're likely here because you thought it sent an error or warning to the console.\n" +
+                      ' * React DevTools patches the console to support features like appending component stacks, \n' +
+                      ' * so this file appears as a source. However, the console call actually came from another script.\n' +
+                      " * To remove this script from stack traces, open your browser's DevTools (to enable source mapping) before these console calls happen.\n" +
+                      ' */'
+                    );
+                  });
+
+                  compilation.updateAsset(
+                    name,
+                    new RawSource(JSON.stringify(map)),
+                  );
+                }
+              },
+            );
+          },
+        );
+      },
+    },
+    new StatsWriterPlugin({
+      stats: 'verbose',
+      filename: statsFileName,
+    }),
+  ],
+  module: {
+    defaultRules: [
+      {
+        type: 'javascript/auto',
+        resolve: {},
+      },
+      {
+        test: /\.json$/i,
+        type: 'json',
+      },
+    ],
+
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: false,
+              name: '[name]',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: babelOptions,
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: __DEV__,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-fusebox/README.md b/packages/react-devtools-fusebox/README.md
new file mode 100644
index 00000000000..81ba3e5037c
--- /dev/null
+++ b/packages/react-devtools-fusebox/README.md
@@ -0,0 +1,6 @@
+# react-native-fusebox
+
+This package is private and not expected to become public anytime soon. Consider using [react-devtools-inline](https://github.com/facebook/react/tree/main/packages/react-devtools-inline) or [react-devtools-core](https://github.com/facebook/react/tree/main/packages/react-devtools-core).
+
+## What is Fusebox?
+"Fusebox" is the internal codename for the new React Native debugger stack based on Chrome DevTools.
diff --git a/packages/react-devtools-fusebox/package.json b/packages/react-devtools-fusebox/package.json
new file mode 100644
index 00000000000..bf5456d4cda
--- /dev/null
+++ b/packages/react-devtools-fusebox/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-devtools-fusebox",
+  "version": "0.0.0",
+  "private": "true",
+  "license": "MIT",
+  "files": ["dist"],
+  "scripts": {
+    "build:frontend:copy-types": "cp src/*.d.ts dist/",
+    "build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
+    "build:frontend": "cross-env NODE_ENV=production webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
+    "build": "yarn build:frontend"
+  },
+  "devDependencies": {
+    "buffer": "^6.0.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.9.1",
+    "mini-css-extract-plugin": "^2.7.7",
+    "process": "^0.11.10",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "workerize-loader": "^2.0.2"
+  }
+}
diff --git a/packages/react-devtools-fusebox/src/frontend.d.ts b/packages/react-devtools-fusebox/src/frontend.d.ts
new file mode 100644
index 00000000000..988197e89ca
--- /dev/null
+++ b/packages/react-devtools-fusebox/src/frontend.d.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export type MessagePayload =
+  | null
+  | string
+  | number
+  | boolean
+  | {[key: string]: MessagePayload}
+  | MessagePayload[];
+export type Message = {event: string; payload?: MessagePayload};
+
+export type WallListener = (message: Message) => void;
+export type Wall = {
+  listen: (fn: WallListener) => Function;
+  send: (event: string, payload?: MessagePayload) => void;
+};
+
+export type Bridge = {
+  addListener(event: string, listener: (params: unknown) => any): void;
+  removeListener(event: string, listener: Function): void;
+  shutdown: () => void;
+};
+export type Store = Object;
+export type BrowserTheme = 'dark' | 'light';
+export type Config = {
+  supportsReloadAndProfile?: boolean;
+};
+
+export function createBridge(wall: Wall): Bridge;
+export function createStore(bridge: Bridge, config?: Config): Store;
+
+export type ReactFunctionLocation = [
+  string, // function name
+  string, // file name TODO: model nested eval locations as nested arrays
+  number, // enclosing line number
+  number, // enclosing column number
+];
+export type ReactCallSite = [
+  string, // function name
+  string, // file name TODO: model nested eval locations as nested arrays
+  number, // line number
+  number, // column number
+  number, // enclosing line number
+  number, // enclosing column number
+  boolean, // async resume
+];
+export type ViewElementSource = (
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
+) => void;
+export type ViewAttributeSource = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+export type CanViewElementSource = (
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
+) => boolean;
+export type FetchFileWithCaching = (url: string) => Promise<string>;
+
+export type InitializationOptions = {
+  bridge: Bridge;
+  store: Store;
+  theme?: BrowserTheme;
+  viewAttributeSourceFunction?: ViewAttributeSource;
+  viewElementSourceFunction?: ViewElementSource;
+  canViewElementSourceFunction?: CanViewElementSource;
+  fetchFileWithCaching?: FetchFileWithCaching;
+};
+
+export function initializeComponents(
+  node: Element | Document,
+  options: InitializationOptions,
+): void;
+export function initializeProfiler(
+  node: Element | Document,
+  options: InitializationOptions,
+): void;
diff --git a/packages/react-devtools-fusebox/src/frontend.js b/packages/react-devtools-fusebox/src/frontend.js
new file mode 100644
index 00000000000..7d09e280233
--- /dev/null
+++ b/packages/react-devtools-fusebox/src/frontend.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {createRoot} from 'react-dom/client';
+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 type {
+  BrowserTheme,
+  Wall,
+} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  CanViewElementSource,
+  TabID,
+  ViewAttributeSource,
+  ViewElementSource,
+} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+import type {Config} from 'react-devtools-shared/src/devtools/store';
+
+export function createBridge(wall?: Wall): FrontendBridge {
+  if (wall != null) {
+    return new Bridge(wall);
+  }
+
+  return new Bridge({listen: () => {}, send: () => {}});
+}
+
+export function createStore(bridge: FrontendBridge, config?: Config): Store {
+  return new Store(bridge, {
+    checkBridgeProtocolCompatibility: true,
+    supportsTraceUpdates: true,
+    supportsClickToInspect: true,
+    ...config,
+  });
+}
+
+type InitializationOptions = {
+  bridge: FrontendBridge,
+  store: Store,
+  theme?: BrowserTheme,
+  viewAttributeSourceFunction?: ViewAttributeSource,
+  viewElementSourceFunction?: ViewElementSource,
+  canViewElementSourceFunction?: CanViewElementSource,
+  fetchFileWithCaching?: FetchFileWithCaching,
+};
+
+function initializeTab(
+  tab: TabID,
+  contentWindow: Element | Document,
+  options: InitializationOptions,
+) {
+  const {
+    bridge,
+    store,
+    theme = 'light',
+    viewAttributeSourceFunction,
+    viewElementSourceFunction,
+    canViewElementSourceFunction,
+    fetchFileWithCaching,
+  } = options;
+  const root = createRoot(contentWindow);
+
+  root.render(
+    <DevTools
+      bridge={bridge}
+      browserTheme={theme}
+      store={store}
+      showTabBar={false}
+      overrideTab={tab}
+      warnIfLegacyBackendDetected={true}
+      enabledInspectedElementContextMenu={true}
+      viewAttributeSourceFunction={viewAttributeSourceFunction}
+      viewElementSourceFunction={viewElementSourceFunction}
+      canViewElementSourceFunction={canViewElementSourceFunction}
+      fetchFileWithCaching={fetchFileWithCaching}
+    />,
+  );
+}
+
+export function initializeComponents(
+  contentWindow: Element | Document,
+  options: InitializationOptions,
+): void {
+  initializeTab('components', contentWindow, options);
+}
+
+export function initializeProfiler(
+  contentWindow: Element | Document,
+  options: InitializationOptions,
+): void {
+  initializeTab('profiler', contentWindow, options);
+}
diff --git a/packages/react-devtools-fusebox/webpack.config.frontend.js b/packages/react-devtools-fusebox/webpack.config.frontend.js
new file mode 100644
index 00000000000..0d56e81a34b
--- /dev/null
+++ b/packages/react-devtools-fusebox/webpack.config.frontend.js
@@ -0,0 +1,134 @@
+const {resolve} = require('path');
+const Webpack = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
+const __DEV__ = NODE_ENV === 'development';
+
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
+const DEVTOOLS_VERSION = getVersionString();
+
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  entry: {
+    frontend: './src/frontend.js',
+  },
+  experiments: {
+    outputModule: true,
+  },
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
+    library: {
+      type: 'module',
+    },
+  },
+  node: {
+    global: false,
+  },
+  resolve: {
+    alias: {
+      'react-devtools-feature-flags': resolveFeatureFlags('fusebox'),
+      react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__,
+      __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
+      __IS_NATIVE__: true,
+      __IS_CHROME__: false,
+      __IS_FIREFOX__: false,
+      __IS_EDGE__: false,
+      __IS_INTERNAL_MCP_BUILD__: false,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-fusebox"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              // Workers would have to be exposed on a public path in order to outline them.
+              inline: true,
+              name: '[name]',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: babelOptions,
+      },
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {modules: true},
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
new file mode 100644
index 00000000000..cd242236c76
--- /dev/null
+++ b/packages/react-devtools-inline/README.md
@@ -0,0 +1,363 @@
+# `react-devtools-inline`
+
+This package can be used to embed React DevTools into browser-based tools like [CodeSandbox](https://codesandbox.io/), [StackBlitz](https://stackblitz.com/), and [Replay](https://replay.io).
+
+If you're looking for the standalone React DevTools UI, **we suggest using [`react-devtools`](https://github.com/facebook/react/tree/main/packages/react-devtools) instead of using this package directly**.
+
+---
+
+> **Note** that this package (and the DevTools UI) relies on several _experimental_ APIs that are **only available in the [experimental release channel](https://reactjs.org/docs/release-channels.html#experimental-channel)**. This means that you will need to install `react@experimental` and `react-dom@experimental`.
+
+---
+
+# 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 the frontend initialization has completed**. 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.
+
+# Backend APIs
+### `initialize(windowOrGlobal)`
+
+Installs the global hook on the window/global object. This hook is how React and DevTools communicate.
+
+> **This method must be called before React is loaded.** (This includes `import`/`require` statements and `<script>` tags that include React.)
+
+### `activate(windowOrGlobal)`
+
+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.
+
+### Example
+```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);
+```
+
+# Frontend APIs
+
+### `initialize(windowOrGlobal)`
+Configures the DevTools interface to listen to the `window` (or `global` object) the backend was injected into. This method returns a React component that can be rendered directly.
+
+> Because the DevTools interface makes use of several new React concurrent features (like Suspense) **it should be rendered using `ReactDOMClient.createRoot` instead of `ReactDOM.render`.**
+
+### Example
+```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.
+// e.g. render(<DevTools {...props} />);
+const DevTools = initialize(contentWindow);
+```
+
+# Advanced examples
+
+### Supporting named hooks
+
+DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and inferring the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
+
+To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
+```js
+// Follow code examples above to configure the backend and frontend.
+// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop.
+const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');
+
+// Render:
+<DevTools
+  hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
+  {...otherProps}
+/>;
+```
+
+### 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);
+
+// Initialize DevTools UI to listen to the hook we just installed.
+// This returns a React component we can render anywhere in the parent window.
+// This also must be called before React is loaded into the iframe
+const DevTools = initializeFrontend(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 (without the injected backend).
+
+// <DevTools /> interface can be rendered in the parent window at any time now...
+// Be sure to use ReactDOMClient.createRoot() 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 DevTools 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 ReactDOMClient.createRoot() 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"
+    },
+    "*"
+  );
+};
+```
+
+### Advanced: Custom "wall"
+
+Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/) or Code Sandbox's Sandpack (where more than one DevTools instance may be rendered per page).
+
+```js
+import {
+  activate as activateBackend,
+  createBridge as createBackendBridge,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {
+  createBridge as createFrontendBridge,
+  createStore,
+  initialize as createDevTools,
+} from 'react-devtools-inline/frontend';
+
+// DevTools uses "message" events and window.postMessage() by default,
+// but we can override this behavior by creating a custom "Wall" object.
+// For example...
+const wall = {
+  _listeners: [],
+  listen(listener) {
+    wall._listeners.push(listener);
+  },
+  send(event, payload) {
+    wall._listeners.forEach(listener => listener({event, payload}));
+  },
+};
+
+// Initialize the DevTools backend before importing React (or any other packages that might import React).
+initializeBackend(contentWindow);
+
+// Prepare DevTools for rendering.
+// To use the custom Wall we've created, we need to also create our own "Bridge" and "Store" objects.
+const bridge = createFrontendBridge(contentWindow, wall);
+const store = createStore(bridge);
+const DevTools = createDevTools(contentWindow, { bridge, store });
+
+// You can render DevTools now:
+const root = createRoot(container);
+root.render(<DevTools {...otherProps} />);
+
+// Lastly, let the DevTools backend know that the frontend is ready.
+// To use the custom Wall we've created, we need to also pass in the "Bridge".
+activateBackend(contentWindow, {
+  bridge: createBackendBridge(contentWindow, wall),
+});
+```
+
+Alternately, if your code can't share the same `wall` object, you can still provide a custom Wall that connects a specific DevTools frontend to a specific backend like so:
+```js
+const uid = "some-unique-string-shared-between-both-pieces";
+const wall = {
+  listen(listener) {
+    window.addEventListener("message", (event) => {
+      if (event.data.uid === uid) {
+        listener(event.data);
+      }
+    });
+  },
+  send(event, payload) {
+    window.postMessage({ event, payload, uid }, "*");
+  },
+};
+```
+
+### Advanced: Node + browser
+
+Below is an example of an advanced integration that could be used to connect React running in a Node process to React DevTools running in a browser.
+
+##### Sample Node backend
+```js
+const {
+  activate,
+  createBridge,
+  initialize,
+} = require('react-devtools-inline/backend');
+const { createServer } = require('http');
+const SocketIO = require('socket.io');
+
+const server = createServer();
+const socket = SocketIO(server, {
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"],
+    allowedHeaders: [],
+    credentials: true
+  }
+});
+socket.on('connection', client => {
+  const wall = {
+    listen(listener) {
+      client.on('message', data => {
+        if (data.uid === UID) {
+          listener(data);
+        }
+      });
+    },
+    send(event, payload) {
+      const data = {event, payload, uid: UID};
+      client.emit('message', data);
+    },
+  };
+
+  const bridge = createBridge(global, wall);
+
+  client.on('disconnect', () => {
+    bridge.shutdown();
+  });
+
+  activate(global, { bridge });
+});
+socket.listen(PORT);
+```
+
+##### Sample Web frontend
+```js
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  createBridge,
+  createStore,
+  initialize as createDevTools,
+} from 'react-devtools-inline/frontend';
+import { io } from "socket.io-client";
+
+let root = null;
+
+const socket = io(`http://${HOST}:${PORT}`);
+socket.on("connect", () => {
+  const wall = {
+    listen(listener) {
+      socket.on("message", (data) => {
+        if (data.uid === UID) {
+          listener(data);
+        }
+      });
+    },
+    send(event, payload) {
+      const data = { event, payload, uid: UID };
+      socket.emit('message', data);
+    },
+  };
+
+  const bridge = createBridge(window, wall);
+  const store = createStore(bridge);
+  const DevTools = createDevTools(window, { bridge, store });
+
+  root = createRoot(document.getElementById('root'));
+  root.render(createElement(DevTools));
+});
+socket.on("disconnect", () => {
+  root.unmount();
+  root = null;
+});
+```
+
+# 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, go to `scripts/release/` and run the following commands:
+```sh
+yarn
+./download-experimental-build.js --commit=main
+```
+
+## 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/main/packages/react-devtools-shell/README.md).
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
new file mode 100644
index 00000000000..3d187c3ddab
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
@@ -0,0 +1,268 @@
+/** @flow */
+
+'use strict';
+
+const {runOnlyForReactRange} = require('./utils');
+const listAppUtils = require('./list-app-utils');
+const devToolsUtils = require('./devtools-utils');
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+const semver = require('semver');
+
+test.use(config);
+test.describe('Components', () => {
+  let page;
+
+  test.beforeEach(async ({browser}) => {
+    page = await browser.newPage();
+
+    await page.goto(config.use.url, {
+      waitUntil: 'domcontentloaded',
+    });
+
+    await page.waitForSelector('#iframe');
+
+    await devToolsUtils.clickButton(page, 'TabBarButton-components');
+  });
+
+  test('Should display initial React components', async () => {
+    const appRowCount = await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
+      const container = document.getElementById('iframe').contentDocument;
+      const rows = findAllNodes(container, [
+        createTestNameSelector('ListItem'),
+      ]);
+      return rows.length;
+    });
+    expect(appRowCount).toBe(3);
+
+    const devToolsRowCount = await devToolsUtils.getElementCount(
+      page,
+      'ListItem'
+    );
+    expect(devToolsRowCount).toBe(3);
+  });
+
+  test('Should display newly added React components', async () => {
+    await listAppUtils.addItem(page, 'four');
+
+    const count = await devToolsUtils.getElementCount(page, 'ListItem');
+    expect(count).toBe(4);
+  });
+
+  test('Should allow elements to be inspected', async () => {
+    // Select the first list item in DevTools.
+    await devToolsUtils.selectElement(page, 'ListItem', '<List>\n<App>');
+
+    // Prop names/values may not be editable based on the React version.
+    // If they're not editable, make sure they degrade gracefully
+    const isEditableName = semver.gte(config.use.react_version, '17.0.0');
+    const isEditableValue = semver.gte(config.use.react_version, '16.8.0');
+
+    // Then read the inspected values.
+    const {
+      name: propName,
+      value: propValue,
+      existingNameElementsSize,
+      existingValueElementsSize,
+    } = await page.evaluate(
+      isEditable => {
+        const {createTestNameSelector, findAllNodes} =
+          window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        // Get name of first prop
+        const nameSelector = isEditable.name
+          ? 'EditableName'
+          : 'NonEditableName';
+        // Get value of first prop
+        const valueSelector = isEditable.value
+          ? 'EditableValue'
+          : 'NonEditableValue';
+
+        const existingNameElements = findAllNodes(container, [
+          createTestNameSelector('InspectedElementPropsTree'),
+          createTestNameSelector('KeyValue'),
+          createTestNameSelector(nameSelector),
+        ]);
+        const existingValueElements = findAllNodes(container, [
+          createTestNameSelector('InspectedElementPropsTree'),
+          createTestNameSelector('KeyValue'),
+          createTestNameSelector(valueSelector),
+        ]);
+
+        const name = isEditable.name
+          ? existingNameElements[0].value
+          : existingNameElements[0].innerText
+              // remove trailing colon
+              .slice(0, -1);
+        const value = isEditable.value
+          ? existingValueElements[0].value
+          : existingValueElements[0].innerText;
+
+        return {
+          name,
+          value,
+          existingNameElementsSize: existingNameElements.length,
+          existingValueElementsSize: existingValueElements.length,
+        };
+      },
+      {name: isEditableName, value: isEditableValue}
+    );
+
+    expect(existingNameElementsSize).toBe(1);
+    expect(existingValueElementsSize).toBe(1);
+    expect(propName).toBe('label');
+    expect(propValue).toBe('"one"');
+  });
+
+  test('Should allow inspecting source of the element', async () => {
+    // Source inspection is available only in modern renderer.
+    runOnlyForReactRange('>=16.8');
+
+    // Select the first list item in DevTools.
+    await devToolsUtils.selectElement(page, 'ListItem', '<List>\n<App>', true);
+
+    // Then read the inspected values.
+    const sourceText = await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const source = findAllNodes(container, [
+        createTestNameSelector('InspectedElementView-FormattedSourceString'),
+      ])[0];
+
+      return source.innerText;
+    });
+
+    // If React version is specified, the e2e-regression.html page will be used
+    // If not, then e2e.html, see playwright.config.js, how url is constructed
+    expect(sourceText).toMatch(/e2e-app[\-a-zA-Z]*\.js/);
+  });
+
+  test('should allow props to be edited', async () => {
+    runOnlyForReactRange('>=16.8');
+
+    // Select the first list item in DevTools.
+    await devToolsUtils.selectElement(page, 'ListItem', '<List>\n<App>');
+
+    // Then edit the label prop.
+    await page.evaluate(() => {
+      const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      focusWithin(container, [
+        createTestNameSelector('InspectedElementPropsTree'),
+        createTestNameSelector('KeyValue'),
+        createTestNameSelector('EditableValue'),
+      ]);
+    });
+
+    page.keyboard.press('Backspace'); // "
+    page.keyboard.press('Backspace'); // e
+    page.keyboard.press('Backspace'); // n
+    page.keyboard.press('Backspace'); // o
+    page.keyboard.insertText('new"');
+    page.keyboard.press('Enter');
+
+    await page.waitForFunction(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
+      const container = document.getElementById('iframe').contentDocument;
+      const rows = findAllNodes(container, [
+        createTestNameSelector('ListItem'),
+      ])[0];
+      return rows.innerText === 'new';
+    });
+  });
+
+  test('should load and parse hook names for the inspected element', async () => {
+    runOnlyForReactRange('>=16.8');
+
+    // Select the List component DevTools.
+    await devToolsUtils.selectElement(page, 'List', '<App>');
+
+    // Then click to load and parse hook names.
+    await devToolsUtils.clickButton(page, 'LoadHookNamesButton');
+
+    // Make sure the expected hook names are parsed and displayed eventually.
+    await page.waitForFunction(
+      hookNames => {
+        const {createTestNameSelector, findAllNodes} =
+          window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const hooksTree = findAllNodes(container, [
+          createTestNameSelector('InspectedElementHooksTree'),
+        ])[0];
+
+        if (!hooksTree) {
+          return false;
+        }
+
+        const hooksTreeText = hooksTree.innerText;
+
+        for (let i = 0; i < hookNames.length; i++) {
+          if (!hooksTreeText.includes(hookNames[i])) {
+            return false;
+          }
+        }
+
+        return true;
+      },
+      ['State(items)', 'Ref(inputRef)']
+    );
+  });
+
+  test('should allow searching for component by name', async () => {
+    async function waitForComponentSearchResultsCount(text) {
+      return await page.waitForFunction(expectedElementText => {
+        const {createTestNameSelector, findAllNodes} =
+          window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const element = findAllNodes(container, [
+          createTestNameSelector('ComponentSearchInput-ResultsCount'),
+        ])[0];
+        return element !== undefined
+          ? element.innerText === expectedElementText
+          : false;
+      }, text);
+    }
+
+    async function focusComponentSearch() {
+      await page.evaluate(() => {
+        const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        focusWithin(container, [
+          createTestNameSelector('ComponentSearchInput-Input'),
+        ]);
+      });
+    }
+
+    await focusComponentSearch();
+    await page.keyboard.insertText('List');
+    await waitForComponentSearchResultsCount('1 | 4');
+
+    await page.keyboard.insertText('Item');
+    await waitForComponentSearchResultsCount('1 | 3');
+
+    await page.keyboard.press('Enter');
+    await waitForComponentSearchResultsCount('2 | 3');
+
+    await page.keyboard.press('Enter');
+    await waitForComponentSearchResultsCount('3 | 3');
+
+    await page.keyboard.press('Enter');
+    await waitForComponentSearchResultsCount('1 | 3');
+
+    await page.keyboard.press('Shift+Enter');
+    await waitForComponentSearchResultsCount('3 | 3');
+
+    await page.keyboard.press('Shift+Enter');
+    await waitForComponentSearchResultsCount('2 | 3');
+
+    await page.keyboard.press('Shift+Enter');
+    await waitForComponentSearchResultsCount('1 | 3');
+  });
+});
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js b/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
new file mode 100644
index 00000000000..c39f63dc5bb
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
@@ -0,0 +1,108 @@
+'use strict';
+
+/** @flow */
+
+async function clickButton(page, buttonTestName) {
+  await page.evaluate(testName => {
+    const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+    const container = document.getElementById('devtools');
+
+    const button = findAllNodes(container, [
+      createTestNameSelector(testName),
+    ])[0];
+    button.click();
+  }, buttonTestName);
+}
+
+async function getElementCount(page, displayName) {
+  return await page.evaluate(listItemText => {
+    const {createTestNameSelector, createTextSelector, findAllNodes} =
+      window.REACT_DOM_DEVTOOLS;
+    const container = document.getElementById('devtools');
+    const rows = findAllNodes(container, [
+      createTestNameSelector('ComponentTreeListItem'),
+      createTextSelector(listItemText),
+    ]);
+    return rows.length;
+  }, displayName);
+}
+
+async function selectElement(
+  page,
+  displayName,
+  waitForOwnersText,
+  waitForSourceLoaded = false
+) {
+  await page.evaluate(listItemText => {
+    const {createTestNameSelector, createTextSelector, findAllNodes} =
+      window.REACT_DOM_DEVTOOLS;
+    const container = document.getElementById('devtools');
+
+    const listItem = findAllNodes(container, [
+      createTestNameSelector('ComponentTreeListItem'),
+      createTextSelector(listItemText),
+    ])[0];
+
+    listItem.dispatchEvent(
+      new MouseEvent('mousedown', {bubbles: true, cancelable: true})
+    );
+  }, displayName);
+
+  if (waitForOwnersText) {
+    // Wait for selected element's props to load.
+    await page.waitForFunction(
+      ({titleText, ownersListText}) => {
+        const {createTestNameSelector, findAllNodes} =
+          window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const title = findAllNodes(container, [
+          createTestNameSelector('InspectedElement-Title'),
+        ])[0];
+
+        const ownersList = findAllNodes(container, [
+          createTestNameSelector('InspectedElementView-Owners'),
+        ])[0];
+
+        if (!ownersList) {
+          return false;
+        }
+
+        const owners = findAllNodes(ownersList, [
+          createTestNameSelector('OwnerView'),
+        ]);
+
+        return (
+          title &&
+          title.innerText.includes(titleText) &&
+          owners &&
+          owners
+            .map(node => node.innerText)
+            .join('\n')
+            .includes(ownersListText)
+        );
+      },
+      {titleText: displayName, ownersListText: waitForOwnersText}
+    );
+  }
+
+  if (waitForSourceLoaded) {
+    await page.waitForFunction(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const sourceStringBlock = findAllNodes(container, [
+        createTestNameSelector('InspectedElementView-FormattedSourceString'),
+      ])[0];
+
+      // Wait for a new source line to be fetched
+      return sourceStringBlock != null && sourceStringBlock.innerText != null;
+    });
+  }
+}
+
+module.exports = {
+  clickButton,
+  getElementCount,
+  selectElement,
+};
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/list-app-utils.js b/packages/react-devtools-inline/__tests__/__e2e__/list-app-utils.js
new file mode 100644
index 00000000000..1ac4af2b3d9
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/list-app-utils.js
@@ -0,0 +1,25 @@
+'use strict';
+
+/** @flow */
+
+async function addItem(page, newItemText) {
+  await page.evaluate(text => {
+    const {createTestNameSelector, findAllNodes} = window.REACT_DOM_APP;
+    const container = document.getElementById('iframe').contentDocument;
+
+    const input = findAllNodes(container, [
+      createTestNameSelector('AddItemInput'),
+    ])[0];
+    input.value = text;
+
+    const button = findAllNodes(container, [
+      createTestNameSelector('AddItemButton'),
+    ])[0];
+
+    button.click();
+  }, newItemText);
+}
+
+module.exports = {
+  addItem,
+};
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
new file mode 100644
index 00000000000..a5bda6fb705
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
@@ -0,0 +1,104 @@
+/** @flow */
+
+'use strict';
+
+const {runOnlyForReactRange} = require('./utils');
+const listAppUtils = require('./list-app-utils');
+const devToolsUtils = require('./devtools-utils');
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+test.use(config);
+test.describe('Profiler', () => {
+  let page;
+
+  test.beforeEach(async ({browser}) => {
+    page = await browser.newPage();
+    await page.goto(config.use.url, {
+      waitUntil: 'domcontentloaded',
+    });
+
+    await page.waitForSelector('#iframe');
+
+    await devToolsUtils.clickButton(page, 'TabBarButton-profiler');
+  });
+
+  test('should record renders and commits when active', async () => {
+    // Profiling is only available in 16.5 and over
+    runOnlyForReactRange('>=16.5');
+    async function getSnapshotSelectorText() {
+      return await page.evaluate(() => {
+        const {createTestNameSelector, findAllNodes} =
+          window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const input = findAllNodes(container, [
+          createTestNameSelector('SnapshotSelector-Input'),
+        ])[0];
+        const label = findAllNodes(container, [
+          createTestNameSelector('SnapshotSelector-Label'),
+        ])[0];
+        return `${input.value}${label.innerText}`;
+      });
+    }
+
+    async function clickButtonAndVerifySnapshotSelectorText(
+      buttonTagName,
+      expectedText
+    ) {
+      await devToolsUtils.clickButton(page, buttonTagName);
+      const text = await getSnapshotSelectorText();
+      expect(text).toBe(expectedText);
+    }
+
+    await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
+
+    await listAppUtils.addItem(page, 'four');
+    await listAppUtils.addItem(page, 'five');
+    await listAppUtils.addItem(page, 'six');
+
+    await devToolsUtils.clickButton(page, 'ProfilerToggleButton');
+
+    await page.waitForFunction(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const input = findAllNodes(container, [
+        createTestNameSelector('SnapshotSelector-Input'),
+      ]);
+
+      return input.length === 1;
+    });
+
+    const text = await getSnapshotSelectorText();
+    expect(text).toBe('1 / 3');
+
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-NextButton',
+      '2 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-NextButton',
+      '3 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-NextButton',
+      '1 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-PreviousButton',
+      '3 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-PreviousButton',
+      '2 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-PreviousButton',
+      '1 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelectorText(
+      'SnapshotSelector-PreviousButton',
+      '3 / 3'
+    );
+  });
+});
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/utils.js b/packages/react-devtools-inline/__tests__/__e2e__/utils.js
new file mode 100644
index 00000000000..5f0505b71e0
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/utils.js
@@ -0,0 +1,17 @@
+'use strict';
+
+/** @flow */
+
+const semver = require('semver');
+const config = require('../../playwright.config');
+const {test} = require('@playwright/test');
+
+function runOnlyForReactRange(range) {
+  test.skip(
+    !semver.satisfies(config.use.react_version, range),
+    `This test requires a React version of ${range} to run. ` +
+      `The React version you're using is ${config.use.react_version}`
+  );
+}
+
+module.exports = {runOnlyForReactRange};
diff --git a/packages/react-devtools-inline/backend.js b/packages/react-devtools-inline/backend.js
new file mode 100644
index 00000000000..2c2a32d4512
--- /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 00000000000..a86be22376f
--- /dev/null
+++ b/packages/react-devtools-inline/frontend.js
@@ -0,0 +1 @@
+module.exports = require('./dist/frontend');
diff --git a/packages/react-devtools-inline/hookNames.js b/packages/react-devtools-inline/hookNames.js
new file mode 100644
index 00000000000..6a319e2de30
--- /dev/null
+++ b/packages/react-devtools-inline/hookNames.js
@@ -0,0 +1 @@
+module.exports = require('./dist/hookNames');
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
new file mode 100644
index 00000000000..cc5fc51a6ef
--- /dev/null
+++ b/packages/react-devtools-inline/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "react-devtools-inline",
+  "version": "7.0.1",
+  "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",
+    "frontend.js",
+    "hookNames.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",
+    "test:e2e": "playwright test --config=playwright.config.js"
+  },
+  "dependencies": {
+    "@jridgewell/sourcemap-codec": "1.5.5",
+    "source-map-js": "^0.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@playwright/test": "^1.51.1",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.4",
+    "buffer": "^6.0.3",
+    "cross-env": "^3.1.4",
+    "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
+    "process": "^0.11.10",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "workerize-loader": "^2.0.2"
+  }
+}
diff --git a/packages/react-devtools-inline/playwright.config.js b/packages/react-devtools-inline/playwright.config.js
new file mode 100644
index 00000000000..9054af7ccf5
--- /dev/null
+++ b/packages/react-devtools-inline/playwright.config.js
@@ -0,0 +1,27 @@
+const semver = require('semver');
+const fs = require('fs');
+const ReactVersionSrc = fs.readFileSync(require.resolve('shared/ReactVersion'));
+const reactVersion = /export default '([^']+)';/.exec(ReactVersionSrc)[1];
+
+const config = {
+  use: {
+    headless: true,
+    browserName: 'chromium',
+    launchOptions: {
+      // This bit of delay gives async React time to render
+      // and DevTools operations to be sent across the bridge.
+      slowMo: 100,
+    },
+    url: process.env.REACT_VERSION
+      ? 'http://localhost:8080/e2e-regression.html'
+      : 'http://localhost:8080/e2e.html',
+    react_version: process.env.REACT_VERSION
+      ? semver.coerce(process.env.REACT_VERSION).version
+      : reactVersion,
+    trace: 'retain-on-failure',
+  },
+  // Some of our e2e tests can be flaky. Retry tests to make sure the error isn't transient
+  retries: 3,
+};
+
+module.exports = config;
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
new file mode 100644
index 00000000000..2dd03417121
--- /dev/null
+++ b/packages/react-devtools-inline/src/backend.js
@@ -0,0 +1,117 @@
+/** @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 type {
+  BackendBridge,
+  SavedPreferencesParams,
+} from 'react-devtools-shared/src/bridge';
+import type {Wall} from 'react-devtools-shared/src/frontend/types';
+import {
+  getIfReloadedAndProfiling,
+  getIsReloadAndProfileSupported,
+  onReloadAndProfile,
+  onReloadAndProfileFlagsReset,
+} from 'react-devtools-shared/src/utils';
+
+function startActivation(contentWindow: any, bridge: BackendBridge) {
+  const onSavedPreferences = (data: SavedPreferencesParams) => {
+    // This is the only message we're listening for,
+    // so it's safe to cleanup after we've received it.
+    bridge.removeListener('savedPreferences', onSavedPreferences);
+
+    const {componentFilters} = data;
+
+    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_COMPONENT_FILTERS__ = componentFilters;
+    }
+
+    finishActivation(contentWindow, bridge);
+  };
+
+  bridge.addListener('savedPreferences', onSavedPreferences);
+
+  // 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().
+  bridge.send('getSavedPreferences');
+}
+
+function finishActivation(contentWindow: any, bridge: BackendBridge) {
+  const agent = new Agent(
+    bridge,
+    getIfReloadedAndProfiling(),
+    onReloadAndProfile,
+  );
+  onReloadAndProfileFlagsReset();
+
+  const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) {
+    initBackend(hook, agent, contentWindow, getIsReloadAndProfileSupported());
+
+    // 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: any,
+  {
+    bridge,
+  }: {
+    bridge?: BackendBridge,
+  } = {},
+): void {
+  if (bridge == null) {
+    bridge = createBridge(contentWindow);
+  }
+
+  startActivation(contentWindow, bridge);
+}
+
+export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {
+  const {parent} = contentWindow;
+
+  if (wall == null) {
+    wall = {
+      listen(fn) {
+        const onMessage = ({data}: $FlowFixMe) => {
+          fn(data);
+        };
+        contentWindow.addEventListener('message', onMessage);
+        return () => {
+          contentWindow.removeEventListener('message', onMessage);
+        };
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        parent.postMessage({event, payload}, '*', transferable);
+      },
+    };
+  }
+
+  return (new Bridge(wall): BackendBridge);
+}
+
+export function initialize(contentWindow: any): void {
+  installHook(contentWindow);
+}
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
new file mode 100644
index 00000000000..b8d1b2ef4d8
--- /dev/null
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -0,0 +1,90 @@
+/** @flow */
+
+import * as React from 'react';
+import {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} from 'react-devtools-shared/src/utils';
+
+import type {Wall} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {Config} from 'react-devtools-shared/src/devtools/store';
+
+export function createStore(bridge: FrontendBridge, config?: Config): Store {
+  return new Store(bridge, {
+    checkBridgeProtocolCompatibility: true,
+    supportsTraceUpdates: true,
+    supportsTimeline: true,
+    ...config,
+  });
+}
+
+export function createBridge(contentWindow: any, wall?: Wall): FrontendBridge {
+  if (wall == null) {
+    wall = {
+      listen(fn) {
+        // $FlowFixMe[missing-local-annot]
+        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);
+      },
+    };
+  }
+
+  return (new Bridge(wall): FrontendBridge);
+}
+
+export function initialize(
+  contentWindow: any,
+  {
+    bridge,
+    store,
+  }: {
+    bridge?: FrontendBridge,
+    store?: Store,
+  } = {},
+): component(...props: Props) {
+  if (bridge == null) {
+    bridge = createBridge(contentWindow);
+  }
+
+  // Type refinement.
+  const frontendBridge = ((bridge: any): FrontendBridge);
+
+  if (store == null) {
+    store = createStore(frontendBridge);
+  }
+
+  const onGetSavedPreferences = () => {
+    // This is the only message we're listening for,
+    // so it's safe to cleanup after we've received it.
+    frontendBridge.removeListener('getSavedPreferences', onGetSavedPreferences);
+
+    const data = {
+      componentFilters: getSavedComponentFilters(),
+    };
+
+    // 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.
+    frontendBridge.send('savedPreferences', data);
+  };
+
+  frontendBridge.addListener('getSavedPreferences', onGetSavedPreferences);
+
+  const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
+    <DevTools ref={ref} bridge={frontendBridge} store={store} {...props} />
+  ));
+  ForwardRef.displayName = 'DevTools';
+
+  return ForwardRef;
+}
diff --git a/packages/react-devtools-inline/src/hookNames.js b/packages/react-devtools-inline/src/hookNames.js
new file mode 100644
index 00000000000..7436ef7d01d
--- /dev/null
+++ b/packages/react-devtools-inline/src/hookNames.js
@@ -0,0 +1,9 @@
+/** @flow */
+
+import {
+  parseHookNames,
+  parseSourceAndMetadata,
+  purgeCachedMetadata,
+} from 'react-devtools-shared/src/hooks/parseHookNames';
+
+export {parseHookNames, parseSourceAndMetadata, purgeCachedMetadata};
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
new file mode 100644
index 00000000000..a0300069bfa
--- /dev/null
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -0,0 +1,130 @@
+const {resolve} = require('path');
+const Webpack = require('webpack');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
+
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
+const DEVTOOLS_VERSION = getVersionString();
+
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
+module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
+  entry: {
+    backend: './src/backend.js',
+    frontend: './src/frontend.js',
+    hookNames: './src/hookNames.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
+    library: {
+      type: 'commonjs2',
+    },
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    'react-dom/client': 'react-dom/client',
+    'react-is': 'react-is',
+    scheduler: 'scheduler',
+  },
+  node: {
+    global: false,
+  },
+  resolve: {
+    alias: {
+      'react-devtools-feature-flags': resolveFeatureFlags('inline'),
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__,
+      __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
+      // TODO: Should this be feature tested somehow?
+      __IS_CHROME__: false,
+      __IS_FIREFOX__: false,
+      __IS_EDGE__: false,
+      __IS_NATIVE__: false,
+      __IS_INTERNAL_MCP_BUILD__: false,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.NODE_ENV': `"${NODE_ENV}"`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              // Workers would have to be exposed on a public path in order to outline them.
+              inline: true,
+              name: '[name]',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: babelOptions,
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: __DEV__,
+              modules: true,
+              localIdentName: '[local]___[hash:base64:5]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/react-devtools-shared/README.md b/packages/react-devtools-shared/README.md
new file mode 100644
index 00000000000..6dafc8eb034
--- /dev/null
+++ b/packages/react-devtools-shared/README.md
@@ -0,0 +1,6 @@
+This directory contains code shared between several DevTools packages:
+* /packages/react-devtools-core
+* /packages/react-devtools-extensions
+* /packages/react-devtools-inline
+
+It is not published or released anywhere directly.
\ No newline at end of file
diff --git a/packages/react-devtools-shared/SourceMapIgnoreListPlugin.js b/packages/react-devtools-shared/SourceMapIgnoreListPlugin.js
new file mode 100644
index 00000000000..b6ba81ffd15
--- /dev/null
+++ b/packages/react-devtools-shared/SourceMapIgnoreListPlugin.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * The implementation of this plugin is based on similar webpack plugin in Angular CLI
+ * https://github.com/angular/angular-cli/blob/16d8c552e99bfe65ded9e843e917dbb95eb8ec01/packages/angular_devkit/build_angular/src/tools/webpack/plugins/devtools-ignore-plugin.ts
+ * and devtools-ignore-webpack-plugin
+ * https://github.com/mondaychen/devtools-ignore-webpack-plugin/blob/d15274e4d2fdb74f73aa644f14773a5523823999/src/index.ts
+ * which both are licensed under MIT
+ */
+
+const {Compilation} = require('webpack');
+
+const IGNORE_LIST = 'ignoreList';
+const PLUGIN_NAME = 'source-map-ignore-list-plugin';
+
+class SourceMapIgnoreListPlugin {
+  constructor({shouldIgnoreSource}) {
+    this.shouldIgnoreSource = shouldIgnoreSource;
+  }
+
+  apply(compiler) {
+    const {RawSource} = compiler.webpack.sources;
+
+    compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+          additionalAssets: true,
+        },
+        assets => {
+          // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+          for (const [name, asset] of Object.entries(assets)) {
+            if (!name.endsWith('.map')) {
+              continue;
+            }
+
+            const mapContent = asset.source().toString();
+            if (!mapContent) {
+              continue;
+            }
+
+            const map = JSON.parse(mapContent);
+            const ignoreList = [];
+
+            const sourcesCount = map.sources.length;
+            for (
+              let potentialSourceIndex = 0;
+              potentialSourceIndex < sourcesCount;
+              ++potentialSourceIndex
+            ) {
+              const source = map.sources[potentialSourceIndex];
+
+              if (this.shouldIgnoreSource(name, source)) {
+                ignoreList.push(potentialSourceIndex);
+              }
+            }
+
+            map[IGNORE_LIST] = ignoreList;
+            compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
+          }
+        },
+      );
+    });
+  }
+}
+
+module.exports = SourceMapIgnoreListPlugin;
diff --git a/packages/react-devtools-shared/babel.config.js b/packages/react-devtools-shared/babel.config.js
new file mode 100644
index 00000000000..dfd46013e94
--- /dev/null
+++ b/packages/react-devtools-shared/babel.config.js
@@ -0,0 +1,52 @@
+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.browser_specific_settings.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();
+
+    let additionalTargets = process.env.BABEL_CONFIG_ADDITIONAL_TARGETS;
+    if (additionalTargets) {
+      additionalTargets = JSON.parse(additionalTargets);
+      for (const target in additionalTargets) {
+        targets[target] = additionalTargets[target];
+      }
+    }
+  }
+  const plugins = [
+    ['babel-plugin-syntax-hermes-parser'],
+    ['@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/buildUtils.js b/packages/react-devtools-shared/buildUtils.js
new file mode 100644
index 00000000000..a08c61d20ec
--- /dev/null
+++ b/packages/react-devtools-shared/buildUtils.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const {resolve} = require('path');
+
+function resolveFeatureFlags(target) {
+  let flagsPath;
+  switch (target) {
+    case 'inline':
+    case 'shell':
+    case 'fusebox':
+      flagsPath = 'DevToolsFeatureFlags.default';
+      break;
+    case 'core/backend-oss':
+    case 'core/standalone-oss':
+      flagsPath = 'DevToolsFeatureFlags.core-oss';
+      break;
+    case 'core/backend-fb':
+    case 'core/standalone-fb':
+      flagsPath = 'DevToolsFeatureFlags.core-fb';
+      break;
+    case 'extension-oss':
+      flagsPath = 'DevToolsFeatureFlags.extension-oss';
+      break;
+    case 'extension-fb':
+      flagsPath = 'DevToolsFeatureFlags.extension-fb';
+      break;
+    default:
+      console.error(`Invalid target "${target}"`);
+      process.exit(1);
+  }
+
+  return resolve(__dirname, 'src/config/', flagsPath);
+}
+
+module.exports = {
+  resolveFeatureFlags,
+};
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
new file mode 100644
index 00000000000..721cc9954b3
--- /dev/null
+++ b/packages/react-devtools-shared/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "react-devtools-shared",
+  "version": "0.0.0",
+  "scripts": {
+    "update-mock-source-maps": "babel-node --presets=@babel/preset-env,@babel/preset-flow ./src/hooks/__tests__/updateMockSourceMaps.js"
+  },
+  "devDependencies": {
+    "react-15": "npm:react@^15",
+    "react-dom-15": "npm:react-dom@^15"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.28.3",
+    "@babel/preset-env": "7.26.9",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/runtime": "^7.11.2",
+    "@babel/traverse": "^7.28.3",
+    "@reach/menu-button": "^0.16.1",
+    "@reach/tooltip": "^0.16.0",
+    "clipboard-js": "^0.3.6",
+    "compare-versions": "^5.0.3",
+    "jsc-safe-url": "^0.2.4",
+    "json5": "^2.2.3",
+    "local-storage-fallback": "^4.1.1",
+    "react-virtualized-auto-sizer": "^1.0.23",
+    "react-window": "^1.8.10",
+    "rbush": "4.0.1"
+  }
+}
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
new file mode 100644
index 00000000000..0d1324d0d70
--- /dev/null
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import {enableLogger} from 'react-devtools-feature-flags';
+
+export type LoggerEvent =
+  | {
+      +event_name: 'loaded-dev-tools',
+    }
+  | {
+      +event_name: 'error',
+      +error_message: string | null,
+      +error_stack: string | null,
+      +error_component_stack: string | null,
+    }
+  | {
+      +event_name: 'selected-components-tab',
+    }
+  | {
+      +event_name: 'selected-profiler-tab',
+    }
+  | {
+      +event_name: 'selected-suspense-tab',
+    }
+  | {
+      +event_name: 'load-hook-names',
+      +event_status: 'success' | 'error' | 'timeout' | 'unknown',
+      +duration_ms: number,
+      +inspected_element_display_name: string | null,
+      +inspected_element_number_of_hooks: number | null,
+    }
+  | {
+      +event_name: 'select-element',
+      +metadata: {
+        +source: string,
+      },
+    }
+  | {
+      +event_name: 'inspect-element-button-clicked',
+    }
+  | {
+      +event_name: 'profiling-start',
+      +metadata: {
+        +current_tab: string,
+      },
+    }
+  | {
+      +event_name: 'profiler-tab-changed',
+      +metadata: {
+        +tabId: string,
+      },
+    }
+  | {
+      +event_name: 'settings-changed',
+      +metadata: {
+        +key: string,
+        +value: any,
+        ...
+      },
+    }
+  | {
+      +event_name: 'selected-editor-pane',
+    }
+  | {+event_name: 'selected-inspected-element-pane'};
+
+export type LogFunction = LoggerEvent => void | Promise<void>;
+
+let logFunctions: Array<LogFunction> = [];
+export const logEvent: LogFunction =
+  enableLogger === true
+    ? function logEvent(event: LoggerEvent): void {
+        logFunctions.forEach(log => {
+          log(event);
+        });
+      }
+    : function logEvent() {};
+
+export const registerEventLogger: (logFunction: LogFunction) => () => void =
+  enableLogger === true
+    ? function registerEventLogger(logFunction: LogFunction): () => void {
+        if (enableLogger) {
+          logFunctions.push(logFunction);
+          return function unregisterEventLogger() {
+            logFunctions = logFunctions.filter(log => log !== logFunction);
+          };
+        }
+        return () => {};
+      }
+    : function registerEventLogger(logFunction: LogFunction) {
+        return () => {};
+      };
diff --git a/packages/react-devtools-shared/src/PerformanceLoggingUtils.js b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
new file mode 100644
index 00000000000..68741a89926
--- /dev/null
+++ b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import {__PERFORMANCE_PROFILE__} from './constants';
+
+const supportsUserTiming =
+  typeof performance !== 'undefined' &&
+  // $FlowFixMe[method-unbinding]
+  typeof performance.mark === 'function' &&
+  // $FlowFixMe[method-unbinding]
+  typeof performance.clearMarks === 'function';
+
+const supportsPerformanceNow =
+  // $FlowFixMe[method-unbinding]
+  typeof performance !== 'undefined' && typeof performance.now === 'function';
+
+function mark(markName: string): void {
+  if (supportsUserTiming) {
+    performance.mark(markName + '-start');
+  }
+}
+
+function measure(markName: string): void {
+  if (supportsUserTiming) {
+    performance.mark(markName + '-end');
+    performance.measure(markName, markName + '-start', markName + '-end');
+    performance.clearMarks(markName + '-start');
+    performance.clearMarks(markName + '-end');
+  }
+}
+
+function now(): number {
+  if (supportsPerformanceNow) {
+    return performance.now();
+  }
+  return Date.now();
+}
+
+export async function withAsyncPerfMeasurements<TReturn>(
+  markName: string,
+  callback: () => Promise<TReturn>,
+  onComplete?: number => void,
+): Promise<TReturn> {
+  const start = now();
+  if (__PERFORMANCE_PROFILE__) {
+    mark(markName);
+  }
+  const result = await callback();
+
+  if (__PERFORMANCE_PROFILE__) {
+    measure(markName);
+  }
+
+  if (onComplete != null) {
+    const duration = now() - start;
+    onComplete(duration);
+  }
+
+  return result;
+}
+
+export function withSyncPerfMeasurements<TReturn>(
+  markName: string,
+  callback: () => TReturn,
+  onComplete?: number => void,
+): TReturn {
+  const start = now();
+  if (__PERFORMANCE_PROFILE__) {
+    mark(markName);
+  }
+  const result = callback();
+
+  if (__PERFORMANCE_PROFILE__) {
+    measure(markName);
+  }
+
+  if (onComplete != null) {
+    const duration = now() - start;
+    onComplete(duration);
+  }
+
+  return result;
+}
+
+export function withCallbackPerfMeasurements<TReturn>(
+  markName: string,
+  callback: (done: () => void) => TReturn,
+  onComplete?: number => void,
+): TReturn {
+  const start = now();
+  if (__PERFORMANCE_PROFILE__) {
+    mark(markName);
+  }
+
+  const done = () => {
+    if (__PERFORMANCE_PROFILE__) {
+      measure(markName);
+    }
+
+    if (onComplete != null) {
+      const duration = now() - start;
+      onComplete(duration);
+    }
+  };
+  return callback(done);
+}
diff --git a/packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js b/packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js
new file mode 100644
index 00000000000..9a279d11aa8
--- /dev/null
+++ b/packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class UnsupportedBridgeOperationError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, UnsupportedBridgeOperationError);
+    }
+
+    this.name = 'UnsupportedBridgeOperationError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
new file mode 100644
index 00000000000..a80a11fde12
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -0,0 +1,339 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {getVersionedRenderImplementation} from './utils';
+
+describe('Fast Refresh', () => {
+  let React;
+  let ReactFreshRuntime;
+  let act;
+  let babel;
+  let exportsObj;
+  let freshPlugin;
+  let store;
+  let withErrorsOrWarningsIgnored;
+
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    exportsObj = undefined;
+
+    babel = require('@babel/core');
+    freshPlugin = require('react-refresh/babel');
+
+    store = global.store;
+
+    React = require('react');
+
+    ReactFreshRuntime = require('react-refresh/runtime');
+    ReactFreshRuntime.injectIntoGlobalHook(global);
+
+    const utils = require('./utils');
+    act = utils.act;
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
+  });
+
+  const {render: renderImplementation, getContainer} =
+    getVersionedRenderImplementation();
+
+  function execute(source) {
+    const compiled = babel.transform(source, {
+      babelrc: false,
+      presets: ['@babel/react'],
+      plugins: [
+        [freshPlugin, {skipEnvCheck: true}],
+        '@babel/plugin-transform-modules-commonjs',
+        '@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(() => {
+      renderImplementation(<Component />);
+    });
+    // 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.
+    const 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(() => {
+        renderImplementation(<NextComponent />);
+      });
+    }
+    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();
+  }
+
+  // @reactVersion >= 16.9
+  it('should not break the DevTools store', () => {
+    render(`
+      function Parent() {
+        return <Child key="A" />;
+      };
+
+      function Child() {
+        return <div />;
+      };
+
+      export default Parent;
+    `);
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="A">
+    `);
+
+    let element = getContainer().firstChild;
+    expect(getContainer().firstChild).not.toBe(null);
+
+    patch(`
+      function Parent() {
+        return <Child key="A" />;
+      };
+
+      function Child() {
+        return <div />;
+      };
+
+      export default Parent;
+    `);
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="A">
+    `);
+
+    // State is preserved; this verifies that Fast Refresh is wired up.
+    expect(getContainer().firstChild).toBe(element);
+    element = getContainer().firstChild;
+
+    patch(`
+      function Parent() {
+        return <Child key="B" />;
+      };
+
+      function Child() {
+        return <div />;
+      };
+
+      export default Parent;
+    `);
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="B">
+    `);
+
+    // State is reset because hooks changed.
+    expect(getContainer().firstChild).not.toBe(element);
+  });
+
+  // @reactVersion < 18.0
+  // @reactVersion >= 16.9
+  it('should not break when there are warnings in between patching (before post commit hook)', () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      render(`
+      const {useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        useEffect(() => {
+          console.error("Expected: error during effect");
+        });
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+  });
+
+  // @reactVersion >= 18.0
+  it('should not break when there are warnings in between patching (with post commit hook)', () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      render(`
+      const {useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        useEffect(() => {
+          console.error("Expected: error during effect");
+        });
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 1, ⚠ 1
+      [root]
+          <Component> ✕⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+  });
+
+  // TODO (bvaughn) Write a test that checks in between the steps of patch
+});
diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
new file mode 100644
index 00000000000..8d9f34371b3
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -0,0 +1,2643 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {
+  getLegacyRenderImplementation,
+  getModernRenderImplementation,
+  normalizeCodeLocInfo,
+} from './utils';
+
+let React = require('react');
+let Scheduler;
+let store;
+let utils;
+
+// This flag is on experimental which disables timeline profiler.
+const enableComponentPerformanceTrack =
+  React.version.startsWith('19') && React.version.includes('experimental');
+
+describe('Timeline profiler', () => {
+  if (enableComponentPerformanceTrack) {
+    test('no tests', () => {});
+    // Ignore all tests.
+    return;
+  }
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    React = require('react');
+    Scheduler = require('scheduler');
+
+    store = global.store;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('User Timing API', () => {
+    let currentlyNotClearedMarks;
+    let registeredMarks;
+    let featureDetectionMarkName = null;
+    let setPerformanceMock;
+
+    function createUserTimingPolyfill() {
+      featureDetectionMarkName = null;
+
+      currentlyNotClearedMarks = [];
+      registeredMarks = [];
+
+      // Remove file-system specific bits or version-specific bits of information from the module range marks.
+      function filterMarkData(markName) {
+        if (markName.startsWith('--react-internal-module-start')) {
+          return '--react-internal-module-start-  at filtered (<anonymous>:0:0)';
+        } else if (markName.startsWith('--react-internal-module-stop')) {
+          return '--react-internal-module-stop-  at filtered (<anonymous>:1:1)';
+        } else if (markName.startsWith('--react-version')) {
+          return '--react-version-<filtered-version>';
+        } else {
+          return markName;
+        }
+      }
+
+      // This is not a true polyfill, but it gives us enough to capture marks.
+      // Reference: https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API
+      return {
+        clearMarks(markName) {
+          markName = filterMarkData(markName);
+
+          currentlyNotClearedMarks = currentlyNotClearedMarks.filter(
+            mark => mark !== markName,
+          );
+        },
+        mark(markName, markOptions) {
+          markName = filterMarkData(markName);
+
+          if (featureDetectionMarkName === null) {
+            featureDetectionMarkName = markName;
+          }
+
+          registeredMarks.push(markName);
+          currentlyNotClearedMarks.push(markName);
+
+          if (markOptions != null) {
+            // This is triggers the feature detection.
+            markOptions.startTime++;
+          }
+        },
+      };
+    }
+
+    function eraseRegisteredMarks() {
+      registeredMarks.splice(0);
+    }
+
+    function dispatchAndSetCurrentEvent(element, event) {
+      try {
+        window.event = event;
+        element.dispatchEvent(event);
+      } finally {
+        window.event = undefined;
+      }
+    }
+
+    beforeEach(() => {
+      setPerformanceMock =
+        require('react-devtools-shared/src/backend/profilingHooks').setPerformanceMock_ONLY_FOR_TESTING;
+      setPerformanceMock(createUserTimingPolyfill());
+    });
+
+    afterEach(() => {
+      // Verify all logged marks also get cleared.
+      expect(currentlyNotClearedMarks).toHaveLength(0);
+
+      setPerformanceMock(null);
+    });
+
+    describe('with legacy render', () => {
+      const {render: legacyRender} = getLegacyRenderImplementation();
+
+      // @reactVersion <= 18.2
+      // @reactVersion >= 18.0
+      it('should mark sync render without suspends or state updates', () => {
+        utils.act(() => store.profilerStore.startProfiling());
+        legacyRender(<div />);
+        utils.act(() => store.profilerStore.stopProfiling());
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--schedule-render-1",
+            "--render-start-1",
+            "--render-stop",
+            "--commit-start-1",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+            "--layout-effects-start-1",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      // TODO(hoxyq): investigate why running this test with React 18 fails
+      // @reactVersion <= 18.2
+      // @reactVersion >= 18.0
+      // eslint-disable-next-line jest/no-disabled-tests
+      it.skip('should mark sync render with suspense that resolves', async () => {
+        const fakeSuspensePromise = Promise.resolve(true);
+        function Example() {
+          throw fakeSuspensePromise;
+        }
+
+        legacyRender(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-2",
+                    "--render-start-2",
+                    "--component-render-start-Example",
+                    "--component-render-stop",
+                    "--suspense-suspend-0-Example-mount-2-",
+                    "--render-stop",
+                    "--commit-start-2",
+                    "--react-version-<filtered-version>",
+                    "--profiler-version-1",
+                    "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+                    "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+                    "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+                    "--layout-effects-start-2",
+                    "--layout-effects-stop",
+                    "--commit-stop",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await fakeSuspensePromise;
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                [
+                  "--suspense-resolved-0-Example",
+                ]
+          `);
+      });
+
+      // TODO(hoxyq): investigate why running this test with React 18 fails
+      // @reactVersion <= 18.2
+      // @reactVersion >= 18.0
+      // eslint-disable-next-line jest/no-disabled-tests
+      it.skip('should mark sync render with suspense that rejects', async () => {
+        const fakeSuspensePromise = Promise.reject(new Error('error'));
+        function Example() {
+          throw fakeSuspensePromise;
+        }
+
+        legacyRender(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-2",
+                    "--render-start-2",
+                    "--component-render-start-Example",
+                    "--component-render-stop",
+                    "--suspense-suspend-0-Example-mount-2-",
+                    "--render-stop",
+                    "--commit-start-2",
+                    "--react-version-<filtered-version>",
+                    "--profiler-version-1",
+                    "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+                    "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+                    "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+                    "--layout-effects-start-2",
+                    "--layout-effects-stop",
+                    "--commit-stop",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await expect(fakeSuspensePromise).rejects.toThrow();
+        expect(registeredMarks).toContain(`--suspense-rejected-0-Example`);
+      });
+
+      // @reactVersion <= 18.2
+      // @reactVersion >= 18.0
+      it('should mark sync render that throws', async () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          componentDidCatch(error) {
+            this.setState({error});
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        function ExampleThatThrows() {
+          throw Error('Expected error');
+        }
+
+        utils.act(() => store.profilerStore.startProfiling());
+        legacyRender(
+          <ErrorBoundary>
+            <ExampleThatThrows />
+          </ErrorBoundary>,
+        );
+        utils.act(() => store.profilerStore.stopProfiling());
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--schedule-render-1",
+            "--render-start-1",
+            "--component-render-start-ErrorBoundary",
+            "--component-render-stop",
+            "--component-render-start-ExampleThatThrows",
+            "--component-render-start-ExampleThatThrows",
+            "--component-render-stop",
+            "--error-ExampleThatThrows-mount-Expected error",
+            "--render-stop",
+            "--commit-start-1",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+            "--layout-effects-start-1",
+            "--schedule-state-update-1-ErrorBoundary",
+            "--layout-effects-stop",
+            "--commit-stop",
+            "--render-start-1",
+            "--component-render-start-ErrorBoundary",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-1",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+            "--commit-stop",
+          ]
+        `);
+      });
+    });
+
+    describe('with createRoot', () => {
+      let waitFor;
+      let waitForAll;
+      let waitForPaint;
+      let assertLog;
+
+      beforeEach(() => {
+        const InternalTestUtils = require('internal-test-utils');
+        waitFor = InternalTestUtils.waitFor;
+        waitForAll = InternalTestUtils.waitForAll;
+        waitForPaint = InternalTestUtils.waitForPaint;
+        assertLog = InternalTestUtils.assertLog;
+      });
+
+      const {render: modernRender} = getModernRenderImplementation();
+
+      it('should mark concurrent render without suspends or state updates', async () => {
+        modernRender(<div />);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark render yields', async () => {
+        function Bar() {
+          Scheduler.log('Bar');
+          return null;
+        }
+
+        function Foo() {
+          Scheduler.log('Foo');
+          return <Bar />;
+        }
+
+        React.startTransition(() => {
+          modernRender(<Foo />);
+        });
+
+        await waitFor(['Foo']);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-128",
+                    "--render-start-128",
+                    "--component-render-start-Foo",
+                    "--component-render-stop",
+                    "--render-yield",
+                  ]
+              `);
+      });
+
+      it('should mark concurrent render with suspense that resolves', async () => {
+        let resolveFakePromise;
+        const fakeSuspensePromise = new Promise(
+          resolve => (resolveFakePromise = resolve),
+        );
+
+        function Example() {
+          throw fakeSuspensePromise;
+        }
+
+        modernRender(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--suspense-suspend-0-Example-mount-32-",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+
+        eraseRegisteredMarks();
+
+        await resolveFakePromise();
+        expect(registeredMarks).toMatchInlineSnapshot(`
+            [
+              "--suspense-resolved-0-Example",
+            ]
+        `);
+      });
+
+      it('should mark concurrent render with suspense that rejects', async () => {
+        let rejectFakePromise;
+        const fakeSuspensePromise = new Promise(
+          (_, reject) => (rejectFakePromise = reject),
+        );
+
+        function Example() {
+          throw fakeSuspensePromise;
+        }
+
+        modernRender(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--suspense-suspend-0-Example-mount-32-",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+
+        eraseRegisteredMarks();
+
+        await expect(() => {
+          rejectFakePromise(new Error('error'));
+          return fakeSuspensePromise;
+        }).rejects.toThrow();
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                [
+                  "--suspense-rejected-0-Example",
+                ]
+          `);
+      });
+
+      it('should mark cascading class component state updates', async () => {
+        class Example extends React.Component {
+          state = {didMount: false};
+          componentDidMount() {
+            this.setState({didMount: true});
+          }
+          render() {
+            return null;
+          }
+        }
+
+        modernRender(<Example />);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--schedule-state-update-2-Example",
+            "--layout-effects-stop",
+            "--render-start-2",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-2",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--commit-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark cascading class component force updates', async () => {
+        class Example extends React.Component {
+          componentDidMount() {
+            this.forceUpdate();
+          }
+          render() {
+            return null;
+          }
+        }
+
+        modernRender(<Example />);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--schedule-forced-update-2-Example",
+            "--layout-effects-stop",
+            "--render-start-2",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-2",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--commit-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark render phase state updates for class component', async () => {
+        class Example extends React.Component {
+          state = {didRender: false};
+          render() {
+            if (this.state.didRender === false) {
+              this.setState({didRender: true});
+            }
+            return null;
+          }
+        }
+
+        modernRender(<Example />);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        let errorMessage;
+        jest.spyOn(console, 'error').mockImplementation(message => {
+          errorMessage = message;
+        });
+
+        await waitForPaint([]);
+
+        expect(console.error).toHaveBeenCalledTimes(1);
+        expect(errorMessage).toContain(
+          'Cannot update during an existing state transition',
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--schedule-state-update-32-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark render phase force updates for class component', async () => {
+        let forced = false;
+        class Example extends React.Component {
+          render() {
+            if (!forced) {
+              forced = true;
+              this.forceUpdate();
+            }
+            return null;
+          }
+        }
+
+        modernRender(<Example />);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        let errorMessage;
+        jest.spyOn(console, 'error').mockImplementation(message => {
+          errorMessage = message;
+        });
+
+        await waitForPaint([]);
+
+        expect(console.error).toHaveBeenCalledTimes(1);
+        expect(errorMessage).toContain(
+          'Cannot update during an existing state transition',
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--schedule-forced-update-32-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark cascading layout updates', async () => {
+        function Example() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useLayoutEffect(() => {
+            setDidMount(true);
+          }, []);
+          return didMount;
+        }
+
+        modernRender(<Example />);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--component-layout-effect-mount-start-Example",
+            "--schedule-state-update-2-Example",
+            "--component-layout-effect-mount-stop",
+            "--layout-effects-stop",
+            "--render-start-2",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-2",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--commit-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark cascading passive updates', async () => {
+        function Example() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useEffect(() => {
+            setDidMount(true);
+          }, []);
+          return didMount;
+        }
+
+        modernRender(<Example />);
+
+        await waitForAll([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--schedule-render-32",
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+            "--passive-effects-start-32",
+            "--component-passive-effect-mount-start-Example",
+            "--schedule-state-update-32-Example",
+            "--component-passive-effect-mount-stop",
+            "--passive-effects-stop",
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark render phase updates', async () => {
+        function Example() {
+          const [didRender, setDidRender] = React.useState(false);
+          if (!didRender) {
+            setDidRender(true);
+          }
+          return didRender;
+        }
+
+        modernRender(<Example />);
+
+        await waitForAll([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--schedule-render-32",
+            "--render-start-32",
+            "--component-render-start-Example",
+            "--schedule-state-update-32-Example",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark concurrent render that throws', async () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          componentDidCatch(error) {
+            this.setState({error});
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        function ExampleThatThrows() {
+          // eslint-disable-next-line no-throw-literal
+          throw 'Expected error';
+        }
+
+        modernRender(
+          <ErrorBoundary>
+            <ExampleThatThrows />
+          </ErrorBoundary>,
+        );
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--schedule-render-32",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForPaint([]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--render-start-32",
+            "--component-render-start-ErrorBoundary",
+            "--component-render-stop",
+            "--component-render-start-ExampleThatThrows",
+            "--component-render-stop",
+            "--error-ExampleThatThrows-mount-Expected error",
+            "--render-stop",
+            "--render-start-32",
+            "--component-render-start-ErrorBoundary",
+            "--component-render-stop",
+            "--component-render-start-ExampleThatThrows",
+            "--component-render-stop",
+            "--error-ExampleThatThrows-mount-Expected error",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--schedule-state-update-2-ErrorBoundary",
+            "--layout-effects-stop",
+            "--render-start-2",
+            "--component-render-start-ErrorBoundary",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-2",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--commit-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+
+      it('should mark passive and layout effects', async () => {
+        function ComponentWithEffects() {
+          React.useLayoutEffect(() => {
+            Scheduler.log('layout 1 mount');
+            return () => {
+              Scheduler.log('layout 1 unmount');
+            };
+          }, []);
+
+          React.useEffect(() => {
+            Scheduler.log('passive 1 mount');
+            return () => {
+              Scheduler.log('passive 1 unmount');
+            };
+          }, []);
+
+          React.useLayoutEffect(() => {
+            Scheduler.log('layout 2 mount');
+            return () => {
+              Scheduler.log('layout 2 unmount');
+            };
+          }, []);
+
+          React.useEffect(() => {
+            Scheduler.log('passive 2 mount');
+            return () => {
+              Scheduler.log('passive 2 unmount');
+            };
+          }, []);
+
+          React.useEffect(() => {
+            Scheduler.log('passive 3 mount');
+            return () => {
+              Scheduler.log('passive 3 unmount');
+            };
+          }, []);
+
+          return null;
+        }
+
+        const unmount = modernRender(<ComponentWithEffects />);
+
+        await waitForPaint(['layout 1 mount', 'layout 2 mount']);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--schedule-render-32",
+            "--render-start-32",
+            "--component-render-start-ComponentWithEffects",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-32",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--layout-effects-start-32",
+            "--component-layout-effect-mount-start-ComponentWithEffects",
+            "--component-layout-effect-mount-stop",
+            "--component-layout-effect-mount-start-ComponentWithEffects",
+            "--component-layout-effect-mount-stop",
+            "--layout-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+
+        eraseRegisteredMarks();
+
+        await waitForAll([
+          'passive 1 mount',
+          'passive 2 mount',
+          'passive 3 mount',
+        ]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+                  [
+                    "--passive-effects-start-32",
+                    "--component-passive-effect-mount-start-ComponentWithEffects",
+                    "--component-passive-effect-mount-stop",
+                    "--component-passive-effect-mount-start-ComponentWithEffects",
+                    "--component-passive-effect-mount-stop",
+                    "--component-passive-effect-mount-start-ComponentWithEffects",
+                    "--component-passive-effect-mount-stop",
+                    "--passive-effects-stop",
+                  ]
+              `);
+
+        eraseRegisteredMarks();
+
+        await waitForAll([]);
+
+        unmount();
+
+        assertLog([
+          'layout 1 unmount',
+          'layout 2 unmount',
+          'passive 1 unmount',
+          'passive 2 unmount',
+          'passive 3 unmount',
+        ]);
+
+        expect(registeredMarks).toMatchInlineSnapshot(`
+          [
+            "--schedule-render-2",
+            "--render-start-2",
+            "--render-stop",
+            "--commit-start-2",
+            "--react-version-<filtered-version>",
+            "--profiler-version-1",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+            "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+            "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+            "--component-layout-effect-unmount-start-ComponentWithEffects",
+            "--component-layout-effect-unmount-stop",
+            "--component-layout-effect-unmount-start-ComponentWithEffects",
+            "--component-layout-effect-unmount-stop",
+            "--layout-effects-start-2",
+            "--layout-effects-stop",
+            "--passive-effects-start-2",
+            "--component-passive-effect-unmount-start-ComponentWithEffects",
+            "--component-passive-effect-unmount-stop",
+            "--component-passive-effect-unmount-start-ComponentWithEffects",
+            "--component-passive-effect-unmount-stop",
+            "--component-passive-effect-unmount-start-ComponentWithEffects",
+            "--component-passive-effect-unmount-stop",
+            "--passive-effects-stop",
+            "--commit-stop",
+          ]
+        `);
+      });
+    });
+
+    describe('lane labels', () => {
+      describe('with legacy render', () => {
+        const {render: legacyRender} = getLegacyRenderImplementation();
+
+        // @reactVersion <= 18.2
+        // @reactVersion >= 18.0
+        it('regression test SyncLane', () => {
+          utils.act(() => store.profilerStore.startProfiling());
+          legacyRender(<div />);
+          utils.act(() => store.profilerStore.stopProfiling());
+
+          expect(registeredMarks).toMatchInlineSnapshot(`
+            [
+              "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+              "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+              "--schedule-render-1",
+              "--render-start-1",
+              "--render-stop",
+              "--commit-start-1",
+              "--react-version-<filtered-version>",
+              "--profiler-version-1",
+              "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+              "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+              "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+              "--layout-effects-start-1",
+              "--layout-effects-stop",
+              "--commit-stop",
+            ]
+          `);
+        });
+      });
+
+      describe('with createRoot()', () => {
+        let waitForAll;
+
+        beforeEach(() => {
+          const InternalTestUtils = require('internal-test-utils');
+          waitForAll = InternalTestUtils.waitForAll;
+        });
+
+        const {render: modernRender} = getModernRenderImplementation();
+
+        it('regression test DefaultLane', () => {
+          modernRender(<div />);
+          expect(registeredMarks).toMatchInlineSnapshot(`
+                      [
+                        "--schedule-render-32",
+                      ]
+                  `);
+        });
+
+        it('regression test InputDiscreteLane', async () => {
+          const targetRef = React.createRef(null);
+
+          function App() {
+            const [count, setCount] = React.useState(0);
+            const handleClick = () => {
+              setCount(count + 1);
+            };
+            return <button ref={targetRef} onClick={handleClick} />;
+          }
+
+          modernRender(<App />);
+          await waitForAll([]);
+
+          eraseRegisteredMarks();
+
+          targetRef.current.click();
+
+          // Wait a frame, for React to process the "click" update.
+          await Promise.resolve();
+
+          expect(registeredMarks).toMatchInlineSnapshot(`
+            [
+              "--schedule-state-update-2-App",
+              "--render-start-2",
+              "--component-render-start-App",
+              "--component-render-stop",
+              "--render-stop",
+              "--commit-start-2",
+              "--react-version-<filtered-version>",
+              "--profiler-version-1",
+              "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+              "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+              "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+              "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+              "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+              "--layout-effects-start-2",
+              "--layout-effects-stop",
+              "--commit-stop",
+            ]
+          `);
+        });
+
+        it('regression test InputContinuousLane', async () => {
+          const targetRef = React.createRef(null);
+
+          function App() {
+            const [count, setCount] = React.useState(0);
+            const handleMouseOver = () => setCount(count + 1);
+            return <div ref={targetRef} onMouseOver={handleMouseOver} />;
+          }
+
+          modernRender(<App />);
+          await waitForAll([]);
+
+          eraseRegisteredMarks();
+
+          const event = document.createEvent('MouseEvents');
+          event.initEvent('mouseover', true, true);
+          dispatchAndSetCurrentEvent(targetRef.current, event);
+
+          await waitForAll([]);
+
+          expect(registeredMarks).toMatchInlineSnapshot(`
+            [
+              "--schedule-state-update-8-App",
+              "--render-start-8",
+              "--component-render-start-App",
+              "--component-render-stop",
+              "--render-stop",
+              "--commit-start-8",
+              "--react-version-<filtered-version>",
+              "--profiler-version-1",
+              "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+              "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+              "--react-internal-module-start-  at filtered (<anonymous>:0:0)",
+              "--react-internal-module-stop-  at filtered (<anonymous>:1:1)",
+              "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
+              "--layout-effects-start-8",
+              "--layout-effects-stop",
+              "--commit-stop",
+            ]
+          `);
+        });
+      });
+    });
+  });
+
+  describe('DevTools hook (in memory)', () => {
+    let getBatchOfWork;
+    let stopProfilingAndGetTimelineData;
+
+    beforeEach(() => {
+      getBatchOfWork = index => {
+        const timelineData = stopProfilingAndGetTimelineData();
+        if (timelineData) {
+          if (timelineData.batchUIDToMeasuresMap.size > index) {
+            return Array.from(timelineData.batchUIDToMeasuresMap.values())[
+              index
+            ];
+          }
+        }
+
+        return null;
+      };
+
+      stopProfilingAndGetTimelineData = () => {
+        utils.act(() => store.profilerStore.stopProfiling());
+
+        const timelineData = store.profilerStore.profilingData?.timelineData;
+
+        if (timelineData) {
+          expect(timelineData).toHaveLength(1);
+
+          // normalize the location for component stack source
+          // for snapshot testing
+          timelineData.forEach(data => {
+            data.schedulingEvents.forEach(event => {
+              if (event.componentStack) {
+                event.componentStack = normalizeCodeLocInfo(
+                  event.componentStack,
+                );
+              }
+            });
+          });
+
+          return timelineData[0];
+        } else {
+          return null;
+        }
+      };
+    });
+
+    describe('when profiling', () => {
+      describe('with legacy render', () => {
+        const {render: legacyRender} = getLegacyRenderImplementation();
+
+        beforeEach(() => {
+          utils.act(() => store.profilerStore.startProfiling());
+        });
+
+        // @reactVersion <= 18.2
+        // @reactVersion >= 18.0
+        it('should mark sync render without suspends or state updates', () => {
+          legacyRender(<div />);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000000001",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        // @reactVersion <= 18.2
+        // @reactVersion >= 18.0
+        it('should mark sync render that throws', async () => {
+          jest.spyOn(console, 'error').mockImplementation(() => {});
+
+          class ErrorBoundary extends React.Component {
+            state = {error: null};
+            componentDidCatch(error) {
+              this.setState({error});
+            }
+            render() {
+              Scheduler.unstable_advanceTime(10);
+              if (this.state.error) {
+                Scheduler.unstable_yieldValue('ErrorBoundary fallback');
+                return null;
+              }
+              Scheduler.unstable_yieldValue('ErrorBoundary render');
+              return this.props.children;
+            }
+          }
+
+          function ExampleThatThrows() {
+            Scheduler.unstable_yieldValue('ExampleThatThrows');
+            throw Error('Expected error');
+          }
+
+          legacyRender(
+            <ErrorBoundary>
+              <ExampleThatThrows />
+            </ErrorBoundary>,
+          );
+
+          expect(Scheduler.unstable_clearYields()).toEqual([
+            'ErrorBoundary render',
+            'ExampleThatThrows',
+            'ExampleThatThrows',
+            'ErrorBoundary fallback',
+          ]);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "ErrorBoundary",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ExampleThatThrows",
+                          "duration": 0,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ErrorBoundary",
+                          "duration": 10,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000000001",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ErrorBoundary",
+                          "componentStack": "
+                          in ErrorBoundary (at **)",
+                          "lanes": "0b0000000000000000000000000000001",
+                          "timestamp": 20,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.thrownErrors).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "ExampleThatThrows",
+                          "message": "Expected error",
+                          "phase": "mount",
+                          "timestamp": 20,
+                          "type": "thrown-error",
+                        },
+                      ]
+                  `);
+        });
+
+        // @reactVersion <= 18.2
+        // @reactVersion >= 18.0
+        it('should mark sync render with suspense that resolves', async () => {
+          let resolveFn;
+          let resolved = false;
+          const suspensePromise = new Promise(resolve => {
+            resolveFn = () => {
+              resolved = true;
+              resolve();
+            };
+          });
+
+          function Example() {
+            Scheduler.unstable_yieldValue(resolved ? 'resolved' : 'suspended');
+            if (!resolved) {
+              throw suspensePromise;
+            }
+            return null;
+          }
+
+          legacyRender(
+            <React.Suspense fallback={null}>
+              <Example />
+            </React.Suspense>,
+          );
+
+          expect(Scheduler.unstable_clearYields()).toEqual(['suspended']);
+
+          Scheduler.unstable_advanceTime(10);
+          resolveFn();
+          await suspensePromise;
+
+          await Scheduler.unstable_flushAllWithoutAsserting();
+          expect(Scheduler.unstable_clearYields()).toEqual(['resolved']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+
+          // Verify the Suspense event and duration was recorded.
+          expect(timelineData.suspenseEvents).toHaveLength(1);
+          const suspenseEvent = timelineData.suspenseEvents[0];
+          expect(suspenseEvent).toMatchInlineSnapshot(`
+            {
+              "componentName": "Example",
+              "depth": 0,
+              "duration": 0,
+              "id": "0",
+              "phase": "mount",
+              "promiseName": "",
+              "resolution": "unresolved",
+              "timestamp": 10,
+              "type": "suspense",
+              "warning": null,
+            }
+          `);
+
+          // There should be two batches of renders: Suspeneded and resolved.
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toHaveLength(2);
+        });
+
+        // @reactVersion = 18.2
+        it('should mark sync render with suspense that rejects', async () => {
+          let rejectFn;
+          let rejected = false;
+          const suspensePromise = new Promise((resolve, reject) => {
+            rejectFn = () => {
+              rejected = true;
+              reject(new Error('error'));
+            };
+          });
+
+          function Example() {
+            Scheduler.unstable_yieldValue(rejected ? 'rejected' : 'suspended');
+            if (!rejected) {
+              throw suspensePromise;
+            }
+            return null;
+          }
+
+          legacyRender(
+            <React.Suspense fallback={null}>
+              <Example />
+            </React.Suspense>,
+          );
+
+          expect(Scheduler.unstable_clearYields()).toEqual(['suspended']);
+
+          Scheduler.unstable_advanceTime(10);
+          rejectFn();
+          await expect(suspensePromise).rejects.toThrow();
+
+          expect(Scheduler.unstable_clearYields()).toEqual(['rejected']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+
+          // Verify the Suspense event and duration was recorded.
+          expect(timelineData.suspenseEvents).toHaveLength(1);
+          const suspenseEvent = timelineData.suspenseEvents[0];
+          expect(suspenseEvent).toMatchInlineSnapshot(`
+            {
+              "componentName": "Example",
+              "depth": 0,
+              "duration": 0,
+              "id": "0",
+              "phase": "mount",
+              "promiseName": "",
+              "resolution": "unresolved",
+              "timestamp": 10,
+              "type": "suspense",
+              "warning": null,
+            }
+          `);
+
+          // There should be two batches of renders: Suspeneded and resolved.
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toHaveLength(2);
+        });
+      });
+
+      describe('with createRoot()', () => {
+        let waitFor;
+        let waitForAll;
+        let waitForPaint;
+        let assertLog;
+
+        beforeEach(() => {
+          const InternalTestUtils = require('internal-test-utils');
+          waitFor = InternalTestUtils.waitFor;
+          waitForAll = InternalTestUtils.waitForAll;
+          waitForPaint = InternalTestUtils.waitForPaint;
+          assertLog = InternalTestUtils.assertLog;
+        });
+
+        const {render: modernRender} = getModernRenderImplementation();
+
+        beforeEach(() => {
+          utils.act(() => store.profilerStore.startProfiling());
+        });
+
+        it('should mark concurrent render without suspends or state updates', () => {
+          utils.act(() => modernRender(<div />));
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark concurrent render without suspends with state updates', () => {
+          let updaterFn;
+
+          function Example() {
+            const setHigh = React.useState(0)[1];
+            const setLow = React.useState(0)[1];
+
+            updaterFn = () => {
+              React.startTransition(() => {
+                setLow(prevLow => prevLow + 1);
+              });
+              setHigh(prevHigh => prevHigh + 1);
+            };
+
+            Scheduler.unstable_advanceTime(10);
+
+            return null;
+          }
+
+          utils.act(() => modernRender(<Example />));
+          utils.act(() => store.profilerStore.stopProfiling());
+          utils.act(() => store.profilerStore.startProfiling());
+          utils.act(updaterFn);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000010000000",
+                          "timestamp": 10,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+        });
+
+        it('should mark render yields', async () => {
+          function Bar() {
+            Scheduler.log('Bar');
+            return null;
+          }
+
+          function Foo() {
+            Scheduler.log('Foo');
+            return <Bar />;
+          }
+
+          React.startTransition(() => {
+            modernRender(<Foo />);
+          });
+
+          // Do one step of work.
+          await waitFor(['Foo']);
+
+          // Finish flushing so React commits;
+          // Unless we do this, the ProfilerStore won't collect Profiling data.
+          await waitForAll(['Bar']);
+
+          // Since we yielded, the batch should report two separate "render" chunks.
+          const batch = getBatchOfWork(0);
+          expect(batch.filter(({type}) => type === 'render')).toHaveLength(2);
+        });
+
+        it('should mark concurrent render with suspense that resolves', async () => {
+          let resolveFn;
+          let resolved = false;
+          const suspensePromise = new Promise(resolve => {
+            resolveFn = () => {
+              resolved = true;
+              resolve();
+            };
+          });
+
+          function Example() {
+            Scheduler.log(resolved ? 'resolved' : 'suspended');
+            if (!resolved) {
+              throw suspensePromise;
+            }
+            return null;
+          }
+
+          modernRender(
+            <React.Suspense fallback={null}>
+              <Example />
+            </React.Suspense>,
+          );
+
+          await waitForAll([
+            'suspended',
+            // pre-warming
+            'suspended',
+          ]);
+
+          Scheduler.unstable_advanceTime(10);
+          resolveFn();
+          await suspensePromise;
+
+          await waitForAll(['resolved']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+
+          // Verify the Suspense event and duration was recorded.
+          expect(timelineData.suspenseEvents).toMatchInlineSnapshot(`
+              [
+                {
+                  "componentName": "Example",
+                  "depth": 0,
+                  "duration": 10,
+                  "id": "0",
+                  "phase": "mount",
+                  "promiseName": "",
+                  "resolution": "resolved",
+                  "timestamp": 10,
+                  "type": "suspense",
+                  "warning": null,
+                },
+                {
+                  "componentName": "Example",
+                  "depth": 0,
+                  "duration": 10,
+                  "id": "0",
+                  "phase": "mount",
+                  "promiseName": "",
+                  "resolution": "resolved",
+                  "timestamp": 10,
+                  "type": "suspense",
+                  "warning": null,
+                },
+              ]
+            `);
+
+          // There should be two batches of renders: Suspeneded and resolved.
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          // An additional measure with pre-warming
+          expect(timelineData.componentMeasures).toHaveLength(3);
+        });
+
+        it('should mark concurrent render with suspense that rejects', async () => {
+          let rejectFn;
+          let rejected = false;
+          const suspensePromise = new Promise((resolve, reject) => {
+            rejectFn = () => {
+              rejected = true;
+              reject(new Error('error'));
+            };
+          });
+
+          function Example() {
+            Scheduler.log(rejected ? 'rejected' : 'suspended');
+            if (!rejected) {
+              throw suspensePromise;
+            }
+            return null;
+          }
+
+          modernRender(
+            <React.Suspense fallback={null}>
+              <Example />
+            </React.Suspense>,
+          );
+
+          await waitForAll(['suspended', 'suspended']);
+
+          Scheduler.unstable_advanceTime(10);
+          rejectFn();
+          await expect(suspensePromise).rejects.toThrow();
+
+          await waitForAll(['rejected']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+
+          // Verify the Suspense event and duration was recorded.
+          expect(timelineData.suspenseEvents).toMatchInlineSnapshot(`
+              [
+                {
+                  "componentName": "Example",
+                  "depth": 0,
+                  "duration": 10,
+                  "id": "0",
+                  "phase": "mount",
+                  "promiseName": "",
+                  "resolution": "rejected",
+                  "timestamp": 10,
+                  "type": "suspense",
+                  "warning": null,
+                },
+                {
+                  "componentName": "Example",
+                  "depth": 0,
+                  "duration": 10,
+                  "id": "0",
+                  "phase": "mount",
+                  "promiseName": "",
+                  "resolution": "rejected",
+                  "timestamp": 10,
+                  "type": "suspense",
+                  "warning": null,
+                },
+              ]
+            `);
+
+          // There should be two batches of renders: Suspeneded and resolved.
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          // An additional measure with pre-warming
+          expect(timelineData.componentMeasures).toHaveLength(3);
+        });
+
+        it('should mark cascading class component state updates', async () => {
+          class Example extends React.Component {
+            state = {didMount: false};
+            componentDidMount() {
+              this.setState({didMount: true});
+            }
+            render() {
+              Scheduler.unstable_advanceTime(10);
+              Scheduler.log(this.state.didMount ? 'update' : 'mount');
+              return null;
+            }
+          }
+
+          modernRender(<Example />);
+
+          await waitForPaint(['mount', 'update']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000000000010",
+                          "timestamp": 20,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark cascading class component force updates', async () => {
+          let forced = false;
+          class Example extends React.Component {
+            componentDidMount() {
+              forced = true;
+              this.forceUpdate();
+            }
+            render() {
+              Scheduler.unstable_advanceTime(10);
+              Scheduler.log(forced ? 'force update' : 'mount');
+              return null;
+            }
+          }
+
+          modernRender(<Example />);
+
+          await waitForPaint(['mount', 'force update']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "lanes": "0b0000000000000000000000000000010",
+                          "timestamp": 20,
+                          "type": "schedule-force-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark render phase state updates for class component', async () => {
+          class Example extends React.Component {
+            state = {didRender: false};
+            render() {
+              if (this.state.didRender === false) {
+                this.setState({didRender: true});
+              }
+              Scheduler.unstable_advanceTime(10);
+              Scheduler.log(
+                this.state.didRender ? 'second render' : 'first render',
+              );
+              return null;
+            }
+          }
+
+          modernRender(<Example />);
+
+          let errorMessage;
+          jest.spyOn(console, 'error').mockImplementation(message => {
+            errorMessage = message;
+          });
+
+          await waitForAll(['first render', 'second render']);
+
+          expect(console.error).toHaveBeenCalledTimes(1);
+          expect(errorMessage).toContain(
+            'Cannot update during an existing state transition',
+          );
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark render phase force updates for class component', async () => {
+          let forced = false;
+          class Example extends React.Component {
+            render() {
+              Scheduler.unstable_advanceTime(10);
+              Scheduler.log(forced ? 'force update' : 'render');
+              if (!forced) {
+                forced = true;
+                this.forceUpdate();
+              }
+              return null;
+            }
+          }
+
+          modernRender(<Example />);
+
+          let errorMessage;
+          jest.spyOn(console, 'error').mockImplementation(message => {
+            errorMessage = message;
+          });
+
+          await waitForAll(['render', 'force update']);
+
+          expect(console.error).toHaveBeenCalledTimes(1);
+          expect(errorMessage).toContain(
+            'Cannot update during an existing state transition',
+          );
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 20,
+                          "type": "schedule-force-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark cascading layout updates', async () => {
+          function Example() {
+            const [didMount, setDidMount] = React.useState(false);
+            React.useLayoutEffect(() => {
+              Scheduler.unstable_advanceTime(1);
+              setDidMount(true);
+            }, []);
+            Scheduler.unstable_advanceTime(10);
+            Scheduler.log(didMount ? 'update' : 'mount');
+            return didMount;
+          }
+
+          modernRender(<Example />);
+
+          await waitForAll(['mount', 'update']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 1,
+                          "timestamp": 20,
+                          "type": "layout-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 21,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000000000010",
+                          "timestamp": 21,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark cascading passive updates', async () => {
+          function Example() {
+            const [didMount, setDidMount] = React.useState(false);
+            React.useEffect(() => {
+              Scheduler.unstable_advanceTime(1);
+              setDidMount(true);
+            }, []);
+            Scheduler.unstable_advanceTime(10);
+            Scheduler.log(didMount ? 'update' : 'mount');
+            return didMount;
+          }
+
+          modernRender(<Example />);
+          await waitForAll(['mount', 'update']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 1,
+                          "timestamp": 20,
+                          "type": "passive-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "duration": 10,
+                          "timestamp": 21,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 21,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark render phase updates', async () => {
+          function Example() {
+            const [didRender, setDidRender] = React.useState(false);
+            Scheduler.unstable_advanceTime(10);
+            if (!didRender) {
+              setDidRender(true);
+            }
+            Scheduler.log(didRender ? 'update' : 'mount');
+            return didRender;
+          }
+
+          modernRender(<Example />);
+          await waitForAll(['mount', 'update']);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          // Render phase updates should be retried as part of the same batch.
+          expect(timelineData.batchUIDToMeasuresMap.size).toBe(1);
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "Example",
+                          "duration": 20,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Example",
+                          "componentStack": "
+                          in Example (at **)",
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 20,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark concurrent render that throws', async () => {
+          jest.spyOn(console, 'error').mockImplementation(() => {});
+
+          class ErrorBoundary extends React.Component {
+            state = {error: null};
+            componentDidCatch(error) {
+              this.setState({error});
+            }
+            render() {
+              Scheduler.unstable_advanceTime(10);
+              if (this.state.error) {
+                Scheduler.log('ErrorBoundary fallback');
+                return null;
+              }
+              Scheduler.log('ErrorBoundary render');
+              return this.props.children;
+            }
+          }
+
+          function ExampleThatThrows() {
+            Scheduler.log('ExampleThatThrows');
+            // eslint-disable-next-line no-throw-literal
+            throw 'Expected error';
+          }
+
+          modernRender(
+            <ErrorBoundary>
+              <ExampleThatThrows />
+            </ErrorBoundary>,
+          );
+
+          await waitForAll([
+            'ErrorBoundary render',
+            'ExampleThatThrows',
+            'ErrorBoundary render',
+            'ExampleThatThrows',
+            'ErrorBoundary fallback',
+          ]);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "ErrorBoundary",
+                          "duration": 10,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ExampleThatThrows",
+                          "duration": 0,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ErrorBoundary",
+                          "duration": 10,
+                          "timestamp": 20,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ExampleThatThrows",
+                          "duration": 0,
+                          "timestamp": 30,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ErrorBoundary",
+                          "duration": 10,
+                          "timestamp": 30,
+                          "type": "render",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ErrorBoundary",
+                          "componentStack": "
+                          in ErrorBoundary (at **)",
+                          "lanes": "0b0000000000000000000000000000010",
+                          "timestamp": 30,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.thrownErrors).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "ExampleThatThrows",
+                          "message": "Expected error",
+                          "phase": "mount",
+                          "timestamp": 20,
+                          "type": "thrown-error",
+                        },
+                        {
+                          "componentName": "ExampleThatThrows",
+                          "message": "Expected error",
+                          "phase": "mount",
+                          "timestamp": 30,
+                          "type": "thrown-error",
+                        },
+                      ]
+                  `);
+        });
+
+        it('should mark passive and layout effects', async () => {
+          function ComponentWithEffects() {
+            React.useLayoutEffect(() => {
+              Scheduler.log('layout 1 mount');
+              return () => {
+                Scheduler.log('layout 1 unmount');
+              };
+            }, []);
+
+            React.useEffect(() => {
+              Scheduler.log('passive 1 mount');
+              return () => {
+                Scheduler.log('passive 1 unmount');
+              };
+            }, []);
+
+            React.useLayoutEffect(() => {
+              Scheduler.log('layout 2 mount');
+              return () => {
+                Scheduler.log('layout 2 unmount');
+              };
+            }, []);
+
+            React.useEffect(() => {
+              Scheduler.log('passive 2 mount');
+              return () => {
+                Scheduler.log('passive 2 unmount');
+              };
+            }, []);
+
+            React.useEffect(() => {
+              Scheduler.log('passive 3 mount');
+              return () => {
+                Scheduler.log('passive 3 unmount');
+              };
+            }, []);
+
+            return null;
+          }
+
+          const unmount = modernRender(<ComponentWithEffects />);
+
+          await waitForPaint(['layout 1 mount', 'layout 2 mount']);
+
+          await waitForAll([
+            'passive 1 mount',
+            'passive 2 mount',
+            'passive 3 mount',
+          ]);
+
+          await waitForAll([]);
+
+          unmount();
+
+          assertLog([
+            'layout 1 unmount',
+            'layout 2 unmount',
+            'passive 1 unmount',
+            'passive 2 unmount',
+            'passive 3 unmount',
+          ]);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "layout-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "layout-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "passive-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "passive-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "passive-effect-mount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "layout-effect-unmount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "layout-effect-unmount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "passive-effect-unmount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "passive-effect-unmount",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "ComponentWithEffects",
+                          "duration": 0,
+                          "timestamp": 10,
+                          "type": "passive-effect-unmount",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+          expect(timelineData.batchUIDToMeasuresMap).toMatchInlineSnapshot(`
+                      Map {
+                        1 => [
+                          {
+                            "batchUID": 1,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000100000",
+                            "timestamp": 10,
+                            "type": "render-idle",
+                          },
+                          {
+                            "batchUID": 1,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000100000",
+                            "timestamp": 10,
+                            "type": "render",
+                          },
+                          {
+                            "batchUID": 1,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000100000",
+                            "timestamp": 10,
+                            "type": "commit",
+                          },
+                          {
+                            "batchUID": 1,
+                            "depth": 1,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000100000",
+                            "timestamp": 10,
+                            "type": "layout-effects",
+                          },
+                          {
+                            "batchUID": 1,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000100000",
+                            "timestamp": 10,
+                            "type": "passive-effects",
+                          },
+                        ],
+                        2 => [
+                          {
+                            "batchUID": 2,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000000010",
+                            "timestamp": 10,
+                            "type": "render-idle",
+                          },
+                          {
+                            "batchUID": 2,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000000010",
+                            "timestamp": 10,
+                            "type": "render",
+                          },
+                          {
+                            "batchUID": 2,
+                            "depth": 0,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000000010",
+                            "timestamp": 10,
+                            "type": "commit",
+                          },
+                          {
+                            "batchUID": 2,
+                            "depth": 1,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000000010",
+                            "timestamp": 10,
+                            "type": "layout-effects",
+                          },
+                          {
+                            "batchUID": 2,
+                            "depth": 1,
+                            "duration": 0,
+                            "lanes": "0b0000000000000000000000000000010",
+                            "timestamp": 10,
+                            "type": "passive-effects",
+                          },
+                        ],
+                      }
+                  `);
+        });
+
+        it('should generate component stacks for state update', async () => {
+          function CommponentWithChildren({initialRender}) {
+            Scheduler.log('Render ComponentWithChildren');
+            return <Child initialRender={initialRender} />;
+          }
+
+          function Child({initialRender}) {
+            const [didRender, setDidRender] = React.useState(initialRender);
+            if (!didRender) {
+              setDidRender(true);
+            }
+            Scheduler.log('Render Child');
+            return null;
+          }
+
+          modernRender(<CommponentWithChildren initialRender={false} />);
+
+          await waitForAll([
+            'Render ComponentWithChildren',
+            'Render Child',
+            'Render Child',
+          ]);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+                      [
+                        {
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-render",
+                          "warning": null,
+                        },
+                        {
+                          "componentName": "Child",
+                          "componentStack": "
+                          in Child (at **)
+                          in CommponentWithChildren (at **)",
+                          "lanes": "0b0000000000000000000000000100000",
+                          "timestamp": 10,
+                          "type": "schedule-state-update",
+                          "warning": null,
+                        },
+                      ]
+                  `);
+        });
+      });
+    });
+
+    describe('when not profiling', () => {
+      describe('with legacy render', () => {
+        const {render: legacyRender} = getLegacyRenderImplementation();
+
+        // @reactVersion <= 18.2
+        // @reactVersion >= 18.0
+        it('should not log any marks', () => {
+          legacyRender(<div />);
+
+          const timelineData = stopProfilingAndGetTimelineData();
+          expect(timelineData).toBeNull();
+        });
+      });
+    });
+  });
+});
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 00000000000..f053ebf7976
--- /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__/__serializers__/dehydratedValueSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js
new file mode 100644
index 00000000000..b3797f6e66b
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// `test` is part of Jest's serializer API
+export function test(maybeDehydratedValue) {
+  const {meta} = require('react-devtools-shared/src/hydration');
+
+  const hasOwnProperty =
+    Object.prototype.hasOwnProperty.bind(maybeDehydratedValue);
+  return (
+    maybeDehydratedValue !== null &&
+    typeof maybeDehydratedValue === 'object' &&
+    hasOwnProperty(meta.inspectable) &&
+    maybeDehydratedValue[meta.inspected] !== true
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(dehydratedValue, serialize, indent) {
+  const {meta} = require('react-devtools-shared/src/hydration');
+  const indentation = Math.max(indent('.').indexOf('.') - 2, 0);
+  const paddingLeft = ' '.repeat(indentation);
+  return (
+    'Dehydrated {\n' +
+    paddingLeft +
+    '  "preview_short": ' +
+    dehydratedValue[meta.preview_short] +
+    ',\n' +
+    paddingLeft +
+    '  "preview_long": ' +
+    dehydratedValue[meta.preview_long] +
+    ',\n' +
+    paddingLeft +
+    '}'
+  );
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js
new file mode 100644
index 00000000000..cd27eac5736
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js
@@ -0,0 +1,60 @@
+function hasAbsoluteFileName(hook) {
+  const fileName = hook.hookSource ? hook.hookSource.fileName : null;
+  if (fileName == null) {
+    return false;
+  } else {
+    return fileName.indexOf('/react-devtools-shared/') > 0;
+  }
+}
+
+function serializeHook(hook) {
+  if (!hook.hookSource) return hook;
+
+  // Remove user-specific portions of this file path.
+  let fileName = hook.hookSource.fileName;
+  const index = fileName.lastIndexOf('/react-devtools-shared/');
+  fileName = fileName.slice(index + 1);
+
+  let subHooks = hook.subHooks;
+  if (subHooks) {
+    subHooks = subHooks.map(serializeHook);
+  }
+
+  return {
+    ...hook,
+    hookSource: {
+      ...hook.hookSource,
+      fileName,
+
+      // Otherwise changes in any test case or formatting might invalidate other tests.
+      columnNumber: 'removed by Jest serializer',
+      lineNumber: 'removed by Jest serializer',
+    },
+    subHooks,
+  };
+}
+
+// `test` is part of Jest's serializer API
+export function test(maybeHook) {
+  if (maybeHook === null || typeof maybeHook !== 'object') {
+    return false;
+  }
+
+  const hasOwnProperty = Object.prototype.hasOwnProperty.bind(maybeHook);
+
+  return (
+    hasOwnProperty('id') &&
+    hasOwnProperty('isStateEditable') &&
+    hasOwnProperty('name') &&
+    hasOwnProperty('subHooks') &&
+    hasOwnProperty('value') &&
+    // Don't re-process an already printed hook.
+    hasAbsoluteFileName(maybeHook)
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(hook, serialize, indent) {
+  // Don't stringify this object; that would break nested serializers.
+  return serialize(serializeHook(hook));
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
new file mode 100644
index 00000000000..55029252843
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
@@ -0,0 +1,35 @@
+// `test` is part of Jest's serializer API
+export function test(maybeInspectedElement) {
+  if (
+    maybeInspectedElement === null ||
+    typeof maybeInspectedElement !== 'object'
+  ) {
+    return false;
+  }
+
+  const hasOwnProperty = Object.prototype.hasOwnProperty.bind(
+    maybeInspectedElement,
+  );
+
+  return (
+    hasOwnProperty('canEditFunctionProps') &&
+    hasOwnProperty('canEditHooks') &&
+    hasOwnProperty('canToggleSuspense') &&
+    hasOwnProperty('canToggleError')
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(inspectedElement, serialize, indent) {
+  // Don't stringify this object; that would break nested serializers.
+  return serialize({
+    context: inspectedElement.context,
+    events: inspectedElement.events,
+    hooks: inspectedElement.hooks,
+    id: inspectedElement.id,
+    owners: inspectedElement.owners,
+    props: inspectedElement.props,
+    rootType: inspectedElement.rootType,
+    state: inspectedElement.state,
+  });
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js
new file mode 100644
index 00000000000..d9e513d2490
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js
@@ -0,0 +1,24 @@
+const MAX_DECIMAL_PLACES = 3;
+
+// `test` is part of Jest's serializer API
+export function test(maybeNumber) {
+  return (
+    typeof maybeNumber === 'number' &&
+    Number.isFinite(maybeNumber) &&
+    !Number.isInteger(maybeNumber) &&
+    !Number.isNaN(maybeNumber)
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(number, serialize, indent) {
+  const string = number.toString();
+  const pieces = string.split('.');
+  if (pieces.length === 2) {
+    if (pieces[1].length > MAX_DECIMAL_PLACES) {
+      return number.toFixed(MAX_DECIMAL_PLACES);
+    }
+  }
+
+  return string;
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/profilingSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/profilingSerializer.js
new file mode 100644
index 00000000000..bfe6b9ecc11
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/profilingSerializer.js
@@ -0,0 +1,25 @@
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+const FILTERED_VERSION_STRING = '<filtered-version>';
+
+// `test` is part of Jest's serializer API
+export function test(maybeProfile) {
+  if (
+    maybeProfile != null &&
+    typeof maybeProfile === 'object' &&
+    hasOwnProperty.call(maybeProfile, 'reactVersion') &&
+    maybeProfile.reactVersion !== FILTERED_VERSION_STRING
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+// print() is part of Jest's serializer API
+export function print(profile, serialize, indent) {
+  return serialize({
+    ...profile,
+    reactVersion: FILTERED_VERSION_STRING,
+  });
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js
new file mode 100644
index 00000000000..9c13799214d
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/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, includeSuspense = true) {
+  return printStore(store, false, null, includeSuspense);
+}
+
+// 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__/__serializers__/timelineDataSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/timelineDataSerializer.js
new file mode 100644
index 00000000000..fc406ca4d67
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/timelineDataSerializer.js
@@ -0,0 +1,29 @@
+import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
+
+function formatLanes(laneArray) {
+  const lanes = laneArray.reduce((current, reduced) => current + reduced, 0);
+  return '0b' + lanes.toString(2).padStart(31, '0');
+}
+
+// `test` is part of Jest's serializer API
+export function test(maybeTimelineData) {
+  if (
+    maybeTimelineData != null &&
+    typeof maybeTimelineData === 'object' &&
+    hasOwnProperty.call(maybeTimelineData, 'lanes') &&
+    isArray(maybeTimelineData.lanes)
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+// print() is part of Jest's serializer API
+export function print(timelineData, serialize, indent) {
+  return serialize({
+    ...timelineData,
+    lanes: formatLanes(timelineData.lanes),
+  });
+}
diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js
new file mode 100644
index 00000000000..e5797fda3cc
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js
@@ -0,0 +1,25 @@
+import {printStore} from 'react-devtools-shared/src/devtools/utils';
+
+// `test` is part of Jest's serializer API
+export function test(maybeState) {
+  if (maybeState === null || typeof maybeState !== 'object') {
+    return false;
+  }
+
+  const hasOwnProperty = Object.prototype.hasOwnProperty.bind(maybeState);
+  // Duck typing at its finest.
+  return (
+    hasOwnProperty('inspectedElementID') &&
+    hasOwnProperty('ownerFlatTree') &&
+    hasOwnProperty('ownerSubtreeLeafElementID')
+  );
+}
+
+// print() is part of Jest's serializer API
+export function print(state, serialize, indent) {
+  // This is a big of a hack but it works around having to pass in a meta object e.g. {store, state}.
+  // DevTools tests depend on a global Store object anyway (initialized via setupTest).
+  const store = global.store;
+
+  return printStore(store, false, state);
+}
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 00000000000..1cc47fbe5d8
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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;
+  });
+
+  // @reactVersion >=16.0
+  it('should shutdown properly', () => {
+    const wall = {
+      listen: jest.fn(() => () => {}),
+      send: jest.fn(),
+    };
+    const bridge = new Bridge(wall);
+    const shutdownCallback = jest.fn();
+    bridge.addListener('shutdown', shutdownCallback);
+
+    // Check that we're wired up correctly.
+    bridge.send('reloadAppForProfiling');
+    jest.runAllTimers();
+    expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling', undefined);
+
+    // 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', undefined);
+    expect(shutdownCallback).toHaveBeenCalledTimes(1);
+
+    // Verify that the Bridge doesn't send messages after shutdown.
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    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__/compiler-integration-test.js b/packages/react-devtools-shared/src/__tests__/compiler-integration-test.js
new file mode 100644
index 00000000000..25bbf59488f
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/compiler-integration-test.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {getVersionedRenderImplementation} from './utils';
+
+describe('CompilerIntegration', () => {
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+  let React;
+  let act;
+  let useMemoCache;
+
+  beforeEach(() => {
+    React = require('react');
+    require('react-dom');
+    require('react-dom/client');
+    useMemoCache = require('react/compiler-runtime').c;
+
+    const utils = require('./utils');
+    act = utils.act;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  // @reactVersion >= 18.2
+  it('By default, component display names should not have Forget prefix', () => {
+    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    const reactDOMFiberRendererInterface = hook.rendererInterfaces.get(1);
+    expect(reactDOMFiberRendererInterface).not.toBeFalsy();
+
+    const Foo = () => {
+      // eslint-disable-next-line no-unused-vars
+      const [val, setVal] = React.useState(null);
+
+      return (
+        <div>
+          <Bar />
+        </div>
+      );
+    };
+    const Bar = () => <div>Hi!</div>;
+
+    act(() => render(<Foo />));
+
+    expect(
+      reactDOMFiberRendererInterface
+        .getDisplayNameForElementID(2)
+        .indexOf('Forget'),
+    ).toBe(-1);
+    expect(
+      reactDOMFiberRendererInterface
+        .getDisplayNameForElementID(3)
+        .indexOf('Forget'),
+    ).toBe(-1);
+  });
+
+  // For React 18.2, this will install uMC polyfill from react-compiler-runtime available on npm.
+  // @reactVersion >= 18.2
+  it('If useMemoCache used, the corresponding displayName for a component should have Forget prefix', () => {
+    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    const reactDOMFiberRendererInterface = hook.rendererInterfaces.get(1);
+    expect(reactDOMFiberRendererInterface).not.toBeFalsy();
+
+    const Foo = () => {
+      // eslint-disable-next-line no-unused-vars
+      const $ = useMemoCache(1);
+      // eslint-disable-next-line no-unused-vars
+      const [val, setVal] = React.useState(null);
+
+      return (
+        <div>
+          <Bar />
+        </div>
+      );
+    };
+    const Bar = () => <div>Hi!</div>;
+
+    act(() => render(<Foo />));
+
+    // useMemoCache is only used by Foo component
+    expect(
+      reactDOMFiberRendererInterface
+        .getDisplayNameForElementID(2)
+        .indexOf('Forget'),
+    ).toBe(0);
+    expect(
+      reactDOMFiberRendererInterface
+        .getDisplayNameForElementID(3)
+        .indexOf('Forget'),
+    ).toBe(-1);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
new file mode 100644
index 00000000000..54af62db44e
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  getVersionedRenderImplementation,
+  normalizeCodeLocInfo,
+} from 'react-devtools-shared/src/__tests__/utils';
+
+describe('component stack', () => {
+  let React;
+  let act;
+  let supportsOwnerStacks;
+
+  beforeEach(() => {
+    const utils = require('./utils');
+    act = utils.act;
+
+    React = require('react');
+    if (
+      React.version.startsWith('19') &&
+      React.version.includes('experimental')
+    ) {
+      supportsOwnerStacks = true;
+    }
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  // @reactVersion >=16.9
+  it('should log the current component stack along with an error or warning', () => {
+    const Grandparent = () => <Parent />;
+    const Parent = () => <Child />;
+    const Child = () => {
+      console.error('Test error.');
+      console.warn('Test warning.');
+      return null;
+    };
+
+    act(() => render(<Grandparent />));
+
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'Test error.',
+      '\n    in Child (at **)' +
+        '\n    in Parent (at **)' +
+        '\n    in Grandparent (at **)',
+    ]);
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'Test warning.',
+      '\n    in Child (at **)' +
+        '\n    in Parent (at **)' +
+        '\n    in Grandparent (at **)',
+    ]);
+  });
+
+  // This test should have caught #19911
+  // but didn't because both DevTools and ReactDOM are running in the same memory space,
+  // so the case we're testing against (DevTools prod build and React DEV build) doesn't exist.
+  // It would be nice to figure out a way to test this combination at some point...
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should disable the current dispatcher before shallow rendering so no effects get scheduled', () => {
+    let useEffectCount = 0;
+
+    const Example = props => {
+      React.useEffect(() => {
+        useEffectCount++;
+        expect(props).toBeDefined();
+      }, [props]);
+      console.warn('Warning to trigger appended component stacks.');
+      return null;
+    };
+
+    act(() => render(<Example test="abc" />));
+
+    expect(useEffectCount).toBe(1);
+
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'Warning to trigger appended component stacks.',
+      '\n    in Example (at **)',
+    ]);
+  });
+
+  // @reactVersion >= 18.3
+  it('should log the current component stack with debug info from promises', () => {
+    const Child = () => {
+      console.error('Test error.');
+      console.warn('Test warning.');
+      return null;
+    };
+    const ChildPromise = Promise.resolve(<Child />);
+    ChildPromise.status = 'fulfilled';
+    ChildPromise.value = <Child />;
+    ChildPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const Parent = () => ChildPromise;
+    const Grandparent = () => <Parent />;
+
+    act(() => render(<Grandparent />));
+
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'Test error.',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)'
+        : '\n    in Child (at **)' +
+          '\n    in ServerComponent (at **)' +
+          '\n    in Parent (at **)' +
+          '\n    in Grandparent (at **)',
+    ]);
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'Test warning.',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)'
+        : '\n    in Child (at **)' +
+          '\n    in ServerComponent (at **)' +
+          '\n    in Parent (at **)' +
+          '\n    in Grandparent (at **)',
+    ]);
+  });
+});
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 00000000000..c37285e855a
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -0,0 +1,817 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  getVersionedRenderImplementation,
+  normalizeCodeLocInfo,
+} from 'react-devtools-shared/src/__tests__/utils';
+
+let React;
+let ReactDOMClient;
+let act;
+let rendererID;
+let supportsOwnerStacks = false;
+
+describe('console', () => {
+  beforeEach(() => {
+    const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
+      rendererID = inject(internals);
+
+      return rendererID;
+    };
+
+    React = require('react');
+    if (
+      React.version.startsWith('19') &&
+      React.version.includes('experimental')
+    ) {
+      supportsOwnerStacks = true;
+    }
+    ReactDOMClient = require('react-dom/client');
+
+    const utils = require('./utils');
+    act = utils.act;
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  // @reactVersion >= 18.0
+  it('should pass through logs when there is no current fiber', () => {
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(0);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(0);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(0);
+
+    console.log('log');
+    console.warn('warn');
+    console.error('error');
+
+    expect(global.consoleLogMock.mock.calls).toEqual([['log']]);
+    expect(global.consoleWarnMock.mock.calls).toEqual([['warn']]);
+    expect(global.consoleErrorMock.mock.calls).toEqual([['error']]);
+  });
+
+  // @reactVersion >= 18.0
+  it('should not append multiple stacks', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = true;
+
+    const Child = ({children}) => {
+      console.warn('warn', '\n    in Child (at fake.js:123)');
+      console.error('error', '\n    in Child (at fake.js:123)');
+      return null;
+    };
+
+    act(() => render(<Child />));
+
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual(['warn', '\n    in Child (at **)']);
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual(['error', '\n    in Child (at **)']);
+  });
+
+  // @reactVersion >= 18.0
+  it('should append component stacks to errors and warnings logged during render', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = true;
+
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = ({children}) => {
+      console.error('error');
+      console.log('log');
+      console.warn('warn');
+      return null;
+    };
+
+    act(() => render(<Parent />));
+
+    expect(global.consoleLogMock.mock.calls).toEqual([['log']]);
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'warn',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'error',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+  });
+
+  // @reactVersion >= 18.0
+  it('should append component stacks to errors and warnings logged from effects', () => {
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = ({children}) => {
+      React.useLayoutEffect(function Child_useLayoutEffect() {
+        console.error('active error');
+        console.log('active log');
+        console.warn('active warn');
+      });
+      React.useEffect(function Child_useEffect() {
+        console.error('passive error');
+        console.log('passive log');
+        console.warn('passive warn');
+      });
+      return null;
+    };
+
+    act(() => render(<Parent />));
+
+    expect(global.consoleLogMock.mock.calls).toEqual([
+      ['active log'],
+      ['passive log'],
+    ]);
+
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'active warn',
+      supportsOwnerStacks
+        ? '\n    in Child_useLayoutEffect (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleWarnMock.mock.calls[1].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'passive warn',
+      supportsOwnerStacks
+        ? '\n    in Child_useEffect (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'active error',
+      supportsOwnerStacks
+        ? '\n    in Child_useLayoutEffect (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleErrorMock.mock.calls[1].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'passive error',
+      supportsOwnerStacks
+        ? '\n    in Child_useEffect (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+  });
+
+  // @reactVersion >= 18.0
+  it('should append component stacks to errors and warnings logged from commit hooks', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = true;
+
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    class Child extends React.Component<any> {
+      componentDidMount() {
+        console.error('didMount error');
+        console.log('didMount log');
+        console.warn('didMount warn');
+      }
+      componentDidUpdate() {
+        console.error('didUpdate error');
+        console.log('didUpdate log');
+        console.warn('didUpdate warn');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    act(() => render(<Parent />));
+    act(() => render(<Parent />));
+
+    expect(global.consoleLogMock.mock.calls).toEqual([
+      ['didMount log'],
+      ['didUpdate log'],
+    ]);
+
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'didMount warn',
+      supportsOwnerStacks
+        ? '\n    in Child.componentDidMount (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleWarnMock.mock.calls[1].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'didUpdate warn',
+      supportsOwnerStacks
+        ? '\n    in Child.componentDidUpdate (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'didMount error',
+      supportsOwnerStacks
+        ? '\n    in Child.componentDidMount (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleErrorMock.mock.calls[1].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'didUpdate error',
+      supportsOwnerStacks
+        ? '\n    in Child.componentDidUpdate (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+  });
+
+  // @reactVersion >= 18.0
+  it('should append component stacks to errors and warnings logged from gDSFP', () => {
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    class Child extends React.Component<any, any> {
+      state = {};
+      static getDerivedStateFromProps() {
+        console.error('error');
+        console.log('log');
+        console.warn('warn');
+        return null;
+      }
+      render() {
+        return null;
+      }
+    }
+
+    act(() => render(<Parent />));
+
+    expect(global.consoleLogMock.mock.calls).toEqual([['log']]);
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'warn',
+      supportsOwnerStacks
+        ? '\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'error',
+      supportsOwnerStacks
+        ? '\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+  });
+
+  // @reactVersion >= 18.0
+  it('should be resilient to prepareStackTrace', () => {
+    Error.prepareStackTrace = function (error, callsites) {
+      const stack = ['An error occurred:', error.message];
+      for (let i = 0; i < callsites.length; i++) {
+        const callsite = callsites[i];
+        stack.push(
+          '\t' + callsite.getFunctionName(),
+          '\t\tat ' + callsite.getFileName(),
+          '\t\ton line ' + callsite.getLineNumber(),
+        );
+      }
+
+      return stack.join('\n');
+    };
+
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = ({children}) => {
+      console.error('error');
+      console.log('log');
+      console.warn('warn');
+      return null;
+    };
+
+    act(() => render(<Parent />));
+
+    expect(global.consoleLogMock.mock.calls).toEqual([['log']]);
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'warn',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'error',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+  });
+
+  // @reactVersion >= 18.0
+  it('should correctly log Symbols', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+
+    const Component = ({children}) => {
+      console.warn('Symbol:', Symbol(''));
+      return null;
+    };
+
+    act(() => render(<Component />));
+
+    expect(global.consoleWarnMock.mock.calls).toMatchInlineSnapshot(`
+    [
+      [
+        "Symbol:",
+        Symbol(),
+      ],
+    ]
+    `);
+  });
+
+  it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      console.log('log');
+      console.warn('warn');
+      console.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleLogMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'log',
+    ]);
+
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleWarnMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'warn',
+    ]);
+
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleErrorMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'error',
+    ]);
+  });
+
+  it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      true;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      console.log('log');
+      console.warn('warn');
+      console.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should double log from Effects if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      React.useEffect(() => {
+        console.log('log effect create');
+        console.warn('warn effect create');
+        console.error('error effect create');
+
+        return () => {
+          console.log('log effect cleanup');
+          console.warn('warn effect cleanup');
+          console.error('error effect cleanup');
+        };
+      });
+
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+    expect(global.consoleLogMock.mock.calls).toEqual([
+      ['log effect create'],
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect cleanup'],
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect create'],
+    ]);
+    expect(global.consoleWarnMock.mock.calls).toEqual([
+      ['warn effect create'],
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect cleanup'],
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect create'],
+    ]);
+    expect(global.consoleErrorMock.mock.calls).toEqual([
+      ['error effect create'],
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect cleanup'],
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect create'],
+    ]);
+  });
+
+  it('should not double log from Effects if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      true;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      React.useEffect(() => {
+        console.log('log effect create');
+        console.warn('warn effect create');
+        console.error('error effect create');
+
+        return () => {
+          console.log('log effect cleanup');
+          console.warn('warn effect cleanup');
+          console.error('error effect cleanup');
+        };
+      });
+
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should double log from useMemo if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      React.useMemo(() => {
+        console.log('log');
+        console.warn('warn');
+        console.error('error');
+      }, []);
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleLogMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'log',
+    ]);
+
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleWarnMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'warn',
+    ]);
+
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleErrorMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'error',
+    ]);
+  });
+
+  it('should not double log from useMemo fns if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      true;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      React.useMemo(() => {
+        console.log('log');
+        console.warn('warn');
+        console.error('error');
+      }, []);
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should double log in Strict mode initial render for extension', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+
+    // This simulates a render that happens before React DevTools have finished
+    // their handshake to attach the React DOM renderer functions to DevTools
+    // In this case, we should still be able to mock the console in Strict mode
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.delete(rendererID);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      console.log('log');
+      console.warn('warn');
+      console.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleLogMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'log',
+    ]);
+
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleWarnMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'warn',
+    ]);
+
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleErrorMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'error',
+    ]);
+  });
+
+  it('should not double log in Strict mode initial render for extension', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      true;
+
+    // This simulates a render that happens before React DevTools have finished
+    // their handshake to attach the React DOM renderer functions to DevTools
+    // In this case, we should still be able to mock the console in Strict mode
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.delete(rendererID);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      console.log('log');
+      console.warn('warn');
+      console.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(1);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should properly dim component stacks during strict mode double log', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = true;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = ({children}) => {
+      console.error('error');
+      console.warn('warn');
+      return null;
+    };
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <Parent />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(
+      global.consoleWarnMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'warn',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+
+    expect(
+      global.consoleWarnMock.mock.calls[1].map(normalizeCodeLocInfo),
+    ).toEqual([
+      '\x1b[2;38;2;124;124;124m%s %o\x1b[0m',
+      'warn',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : 'in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+
+    expect(
+      global.consoleErrorMock.mock.calls[0].map(normalizeCodeLocInfo),
+    ).toEqual([
+      'error',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+    expect(
+      global.consoleErrorMock.mock.calls[1].map(normalizeCodeLocInfo),
+    ).toEqual([
+      '\x1b[2;38;2;124;124;124m%s %o\x1b[0m',
+      'error',
+      supportsOwnerStacks
+        ? '\n    in Child (at **)\n    in Parent (at **)'
+        : 'in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    ]);
+  });
+
+  it('should not dim console logs if disableSecondConsoleLogDimmingInStrictMode is enabled', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.disableSecondConsoleLogDimmingInStrictMode =
+      true;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      console.log('log');
+      console.warn('warn');
+      console.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    // Both logs should be called (double logging)
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(2);
+
+    // The second log should NOT have dimming (no ANSI codes)
+    expect(global.consoleLogMock.mock.calls[1]).toEqual(['log']);
+    expect(global.consoleWarnMock.mock.calls[1]).toEqual(['warn']);
+    expect(global.consoleErrorMock.mock.calls[1]).toEqual(['error']);
+  });
+
+  it('should dim console logs if disableSecondConsoleLogDimmingInStrictMode is disabled', () => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.appendComponentStack = false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.hideConsoleLogsInStrictMode =
+      false;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.settings.disableSecondConsoleLogDimmingInStrictMode =
+      false;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      console.log('log');
+      console.warn('warn');
+      console.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    // Both logs should be called (double logging)
+    expect(global.consoleLogMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleWarnMock).toHaveBeenCalledTimes(2);
+    expect(global.consoleErrorMock).toHaveBeenCalledTimes(2);
+
+    // The second log should have dimming (ANSI codes present)
+    expect(global.consoleLogMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'log',
+    ]);
+    expect(global.consoleWarnMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'warn',
+    ]);
+    expect(global.consoleErrorMock.mock.calls[1]).toEqual([
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
+      'error',
+    ]);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/editing-test.js b/packages/react-devtools-shared/src/__tests__/editing-test.js
new file mode 100644
index 00000000000..750e13e38d5
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/editing-test.js
@@ -0,0 +1,1157 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('editing interface', () => {
+  let PropTypes;
+  let React;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  const flushPendingUpdates = () => {
+    utils.act(() => jest.runOnlyPendingTimers());
+  };
+
+  beforeEach(() => {
+    utils = require('./utils');
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.componentFilters = [];
+
+    PropTypes = require('prop-types');
+    React = require('react');
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  describe('props', () => {
+    let committedClassProps;
+    let committedFunctionProps;
+    let inputRef;
+    let classID;
+    let functionID;
+    let hostComponentID;
+
+    async function mountTestApp() {
+      class ClassComponent extends React.Component {
+        componentDidMount() {
+          committedClassProps = this.props;
+        }
+        componentDidUpdate() {
+          committedClassProps = this.props;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      function FunctionComponent(props) {
+        React.useLayoutEffect(() => {
+          committedFunctionProps = props;
+        });
+        return null;
+      }
+
+      inputRef = React.createRef(null);
+
+      await utils.actAsync(() =>
+        render(
+          <>
+            <ClassComponent
+              array={[1, 2, 3]}
+              object={{nested: 'initial'}}
+              shallow="initial"
+            />
+            ,
+            <FunctionComponent
+              array={[1, 2, 3]}
+              object={{nested: 'initial'}}
+              shallow="initial"
+            />
+            ,
+            <input ref={inputRef} onChange={jest.fn()} value="initial" />
+          </>,
+        ),
+      );
+
+      classID = ((store.getElementIDAtIndex(0): any): number);
+      functionID = ((store.getElementIDAtIndex(1): any): number);
+      hostComponentID = ((store.getElementIDAtIndex(2): any): number);
+
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+      expect(inputRef.current.value).toBe('initial');
+    }
+
+    // @reactVersion >= 16.9
+    it('should have editable values', async () => {
+      await mountTestApp();
+
+      function overrideProps(id, path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideProps(classID, ['shallow'], 'updated');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+      overrideProps(classID, ['object', 'nested'], 'updated');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+      overrideProps(classID, ['array', 1], 'updated');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+
+      overrideProps(functionID, ['shallow'], 'updated');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+      overrideProps(functionID, ['object', 'nested'], 'updated');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+      overrideProps(functionID, ['array', 1], 'updated');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
+    it('should still support overriding prop values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideProps(id, path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideProps', {
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideProps(classID, ['object', 'nested'], 'updated');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'initial',
+      });
+
+      overrideProps(functionID, ['shallow'], 'updated');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 17.0
+    it('should have editable paths', async () => {
+      await mountTestApp();
+
+      function renamePath(id, oldPath, newPath) {
+        const rendererID = utils.getRendererID();
+        bridge.send('renamePath', {
+          id,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'props',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(classID, ['shallow'], ['after']);
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+      renamePath(classID, ['object', 'nested'], ['object', 'after']);
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+
+      renamePath(functionID, ['shallow'], ['after']);
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+      renamePath(functionID, ['object', 'nested'], ['object', 'after']);
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideProps(id, path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideProps(classID, ['new'], 'value');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(classID, ['object', 'new'], 'value');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(classID, ['array', 3], 'new value');
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(functionID, ['new'], 'value');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(functionID, ['object', 'new'], 'value');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(functionID, ['array', 3], 'new value');
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 17.0
+    it('should have deletable keys', async () => {
+      await mountTestApp();
+
+      function deletePath(id, path) {
+        const rendererID = utils.getRendererID();
+        bridge.send('deletePath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(classID, ['shallow']);
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+      deletePath(classID, ['object', 'nested']);
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+      deletePath(classID, ['array', 1]);
+      expect(committedClassProps).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+
+      deletePath(functionID, ['shallow']);
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+      deletePath(functionID, ['object', 'nested']);
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+      deletePath(functionID, ['array', 1]);
+      expect(committedFunctionProps).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+
+    // @reactVersion >= 16.9
+    it('should support editing host component values', async () => {
+      await mountTestApp();
+
+      function overrideProps(id, path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideProps(hostComponentID, ['value'], 'updated');
+      expect(inputRef.current.value).toBe('updated');
+    });
+  });
+
+  describe('state', () => {
+    let committedState;
+    let id;
+
+    async function mountTestApp() {
+      class ClassComponent extends React.Component {
+        state = {
+          array: [1, 2, 3],
+          object: {
+            nested: 'initial',
+          },
+          shallow: 'initial',
+        };
+        componentDidMount() {
+          committedState = this.state;
+        }
+        componentDidUpdate() {
+          committedState = this.state;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      await utils.actAsync(() =>
+        render(
+          <ClassComponent object={{nested: 'initial'}} shallow="initial" />,
+        ),
+      );
+
+      id = ((store.getElementIDAtIndex(0): any): number);
+
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+    }
+
+    // @reactVersion >= 16.9
+    it('should have editable values', async () => {
+      await mountTestApp();
+
+      function overrideState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'state',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideState(['shallow'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {nested: 'initial'},
+        shallow: 'updated',
+      });
+
+      overrideState(['object', 'nested'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {nested: 'updated'},
+        shallow: 'updated',
+      });
+
+      overrideState(['array', 1], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {nested: 'updated'},
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
+    it('should still support overriding state values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideState', {
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideState(['array', 1], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {nested: 'initial'},
+        shallow: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    it('should have editable paths', async () => {
+      await mountTestApp();
+
+      function renamePath(oldPath, newPath) {
+        const rendererID = utils.getRendererID();
+        bridge.send('renamePath', {
+          id,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'state',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(['shallow'], ['after']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+
+      renamePath(['object', 'nested'], ['object', 'after']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'state',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideState(['new'], 'value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideState(['object', 'new'], 'value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideState(['array', 3], 'new value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    it('should have deletable keys', async () => {
+      await mountTestApp();
+
+      function deletePath(path) {
+        const rendererID = utils.getRendererID();
+        bridge.send('deletePath', {
+          id,
+          path,
+          rendererID,
+          type: 'state',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(['shallow']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+
+      deletePath(['object', 'nested']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+
+      deletePath(['array', 1]);
+      expect(committedState).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+  });
+
+  describe('hooks', () => {
+    let committedState;
+    let hookID;
+    let id;
+
+    async function mountTestApp() {
+      function FunctionComponent() {
+        const [state] = React.useState({
+          array: [1, 2, 3],
+          object: {
+            nested: 'initial',
+          },
+          shallow: 'initial',
+        });
+        React.useLayoutEffect(() => {
+          committedState = state;
+        });
+        return null;
+      }
+
+      await utils.actAsync(() => render(<FunctionComponent />));
+
+      hookID = 0; // index
+      id = ((store.getElementIDAtIndex(0): any): number);
+
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+    }
+
+    // @reactVersion >= 16.9
+    it('should have editable values', async () => {
+      await mountTestApp();
+
+      function overrideHookState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          hookID,
+          id,
+          path,
+          rendererID,
+          type: 'hooks',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideHookState(['shallow'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+
+      overrideHookState(['object', 'nested'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+
+      overrideHookState(['array', 1], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
+    it('should still support overriding hook values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideHookState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideHookState', {
+          hookID,
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideHookState(['shallow'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 17.0
+    it('should have editable paths', async () => {
+      await mountTestApp();
+
+      function renamePath(oldPath, newPath) {
+        const rendererID = utils.getRendererID();
+        bridge.send('renamePath', {
+          id,
+          hookID,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'hooks',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(['shallow'], ['after']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+
+      renamePath(['object', 'nested'], ['object', 'after']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideHookState(path, value) {
+        const rendererID = utils.getRendererID();
+        bridge.send('overrideValueAtPath', {
+          hookID,
+          id,
+          path,
+          rendererID,
+          type: 'hooks',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideHookState(['new'], 'value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideHookState(['object', 'new'], 'value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideHookState(['array', 3], 'new value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 17.0
+    it('should have deletable keys', async () => {
+      await mountTestApp();
+
+      function deletePath(path) {
+        const rendererID = utils.getRendererID();
+        bridge.send('deletePath', {
+          hookID,
+          id,
+          path,
+          rendererID,
+          type: 'hooks',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(['shallow']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+
+      deletePath(['object', 'nested']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+
+      deletePath(['array', 1]);
+      expect(committedState).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+  });
+
+  describe('context', () => {
+    let committedContext;
+    let id;
+
+    async function mountTestApp() {
+      class LegacyContextProvider extends React.Component<any> {
+        static childContextTypes = {
+          array: PropTypes.array,
+          object: PropTypes.object,
+          shallow: PropTypes.string,
+        };
+        getChildContext() {
+          return {
+            array: [1, 2, 3],
+            object: {
+              nested: 'initial',
+            },
+            shallow: 'initial',
+          };
+        }
+        render() {
+          return this.props.children;
+        }
+      }
+
+      class ClassComponent extends React.Component<any> {
+        static contextTypes = {
+          array: PropTypes.array,
+          object: PropTypes.object,
+          shallow: PropTypes.string,
+        };
+        componentDidMount() {
+          committedContext = this.context;
+        }
+        componentDidUpdate() {
+          committedContext = this.context;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      await utils.actAsync(() =>
+        render(
+          <LegacyContextProvider>
+            <ClassComponent />
+          </LegacyContextProvider>,
+        ),
+      );
+
+      // This test only covers Class components.
+      // Function components using legacy context are not editable.
+
+      id = ((store.getElementIDAtIndex(1): any): number);
+
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+    }
+
+    // @reactVersion >= 16.9
+    // @gate !disableLegacyContext
+    it('should have editable values', async () => {
+      await mountTestApp();
+
+      function overrideContext(path, value) {
+        const rendererID = utils.getRendererID();
+
+        // To simplify hydration and display of primitive context values (e.g. number, string)
+        // the inspectElement() method wraps context in a {value: ...} object.
+        path = ['value', ...path];
+
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'context',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideContext(['shallow'], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+
+      overrideContext(['object', 'nested'], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+
+      overrideContext(['array', 1], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // @gate !disableLegacyContext
+    // Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
+    it('should still support overriding context values with legacy backend methods', async () => {
+      await mountTestApp();
+
+      function overrideContext(path, value) {
+        const rendererID = utils.getRendererID();
+
+        // To simplify hydration and display of primitive context values (e.g. number, string)
+        // the inspectElement() method wraps context in a {value: ...} object.
+        path = ['value', ...path];
+
+        bridge.send('overrideContext', {
+          id,
+          path,
+          rendererID,
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideContext(['object', 'nested'], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // @gate !disableLegacyContext
+    it('should have editable paths', async () => {
+      await mountTestApp();
+
+      function renamePath(oldPath, newPath) {
+        const rendererID = utils.getRendererID();
+
+        // To simplify hydration and display of primitive context values (e.g. number, string)
+        // the inspectElement() method wraps context in a {value: ...} object.
+        oldPath = ['value', ...oldPath];
+        newPath = ['value', ...newPath];
+
+        bridge.send('renamePath', {
+          id,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'context',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(['shallow'], ['after']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+
+      renamePath(['object', 'nested'], ['object', 'after']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // @gate !disableLegacyContext
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideContext(path, value) {
+        const rendererID = utils.getRendererID();
+
+        // To simplify hydration and display of primitive context values (e.g. number, string)
+        // the inspectElement() method wraps context in a {value: ...} object.
+        path = ['value', ...path];
+
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'context',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideContext(['new'], 'value');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideContext(['object', 'new'], 'value');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideContext(['array', 3], 'new value');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 16.9
+    // @gate !disableLegacyContext
+    it('should have deletable keys', async () => {
+      await mountTestApp();
+
+      function deletePath(path) {
+        const rendererID = utils.getRendererID();
+
+        // To simplify hydration and display of primitive context values (e.g. number, string)
+        // the inspectElement() method wraps context in a {value: ...} object.
+        path = ['value', ...path];
+
+        bridge.send('deletePath', {
+          id,
+          path,
+          rendererID,
+          type: 'context',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(['shallow']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+
+      deletePath(['object', 'nested']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+
+      deletePath(['array', 1]);
+      expect(committedContext).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/events-test.js b/packages/react-devtools-shared/src/__tests__/events-test.js
new file mode 100644
index 00000000000..1d68acaab58
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/events-test.js
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('events', () => {
+  let dispatcher;
+
+  beforeEach(() => {
+    const EventEmitter = require('../events').default;
+
+    dispatcher = new EventEmitter();
+  });
+
+  // @reactVersion >=16
+  it('can dispatch an event with no listeners', () => {
+    dispatcher.emit('event', 123);
+  });
+
+  // @reactVersion >=16
+  it('handles a listener being attached multiple times', () => {
+    const callback = jest.fn();
+
+    dispatcher.addListener('event', callback);
+    dispatcher.addListener('event', callback);
+
+    dispatcher.emit('event', 123);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(123);
+  });
+
+  // @reactVersion >=16
+  it('notifies all attached listeners of events', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+    const callback3 = jest.fn();
+
+    dispatcher.addListener('event', callback1);
+    dispatcher.addListener('event', callback2);
+    dispatcher.addListener('other-event', callback3);
+    dispatcher.emit('event', 123);
+
+    expect(callback1).toHaveBeenCalledTimes(1);
+    expect(callback1).toHaveBeenCalledWith(123);
+    expect(callback2).toHaveBeenCalledTimes(1);
+    expect(callback2).toHaveBeenCalledWith(123);
+    expect(callback3).not.toHaveBeenCalled();
+  });
+
+  // @reactVersion >= 16.0
+  it('calls later listeners before re-throwing if an earlier one throws', () => {
+    const callbackThatThrows = jest.fn(() => {
+      throw Error('expected');
+    });
+    const callback = jest.fn();
+
+    dispatcher.addListener('event', callbackThatThrows);
+    dispatcher.addListener('event', callback);
+
+    expect(() => {
+      dispatcher.emit('event', 123);
+    }).toThrow('expected');
+
+    expect(callbackThatThrows).toHaveBeenCalledTimes(1);
+    expect(callbackThatThrows).toHaveBeenCalledWith(123);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(123);
+  });
+
+  // @reactVersion >= 16.0
+  it('removes attached listeners', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    dispatcher.addListener('event', callback1);
+    dispatcher.addListener('other-event', callback2);
+    dispatcher.removeListener('event', callback1);
+    dispatcher.emit('event', 123);
+    expect(callback1).not.toHaveBeenCalled();
+    dispatcher.emit('other-event', 123);
+    expect(callback2).toHaveBeenCalledTimes(1);
+    expect(callback2).toHaveBeenCalledWith(123);
+  });
+
+  // @reactVersion >= 16.0
+  it('removes all listeners', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+    const callback3 = jest.fn();
+
+    dispatcher.addListener('event', callback1);
+    dispatcher.addListener('event', callback2);
+    dispatcher.addListener('other-event', callback3);
+    dispatcher.removeAllListeners();
+    dispatcher.emit('event', 123);
+    dispatcher.emit('other-event', 123);
+
+    expect(callback1).not.toHaveBeenCalled();
+    expect(callback2).not.toHaveBeenCalled();
+    expect(callback3).not.toHaveBeenCalled();
+  });
+
+  // @reactVersion >= 16.0
+  it('should call the initial listeners even if others are added or removed during a dispatch', () => {
+    const callback1 = jest.fn(() => {
+      dispatcher.removeListener('event', callback2);
+      dispatcher.addListener('event', callback3);
+    });
+    const callback2 = jest.fn();
+    const callback3 = jest.fn();
+
+    dispatcher.addListener('event', callback1);
+    dispatcher.addListener('event', callback2);
+
+    dispatcher.emit('event', 123);
+    expect(callback1).toHaveBeenCalledTimes(1);
+    expect(callback1).toHaveBeenCalledWith(123);
+    expect(callback2).toHaveBeenCalledTimes(1);
+    expect(callback2).toHaveBeenCalledWith(123);
+    expect(callback3).not.toHaveBeenCalled();
+
+    dispatcher.emit('event', 456);
+    expect(callback1).toHaveBeenCalledTimes(2);
+    expect(callback1).toHaveBeenCalledWith(456);
+    expect(callback2).toHaveBeenCalledTimes(1);
+    expect(callback3).toHaveBeenCalledTimes(1);
+    expect(callback3).toHaveBeenCalledWith(456);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/gate-test.js b/packages/react-devtools-shared/src/__tests__/gate-test.js
new file mode 100644
index 00000000000..73f81ab5f9d
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/gate-test.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('gate', () => {
+  //@gate false
+  it('should expect an error for this test', () => {
+    throw new Error('This test should fail');
+  });
+
+  //@gate true
+  it('should not an error for this test', () => {});
+});
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
new file mode 100644
index 00000000000..09f811172f3
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -0,0 +1,3311 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  withErrorsOrWarningsIgnored,
+  getLegacyRenderImplementation,
+  getModernRenderImplementation,
+  getVersionedRenderImplementation,
+} from 'react-devtools-shared/src/__tests__/utils';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+describe('InspectedElement', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let PropTypes;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+
+  let BridgeContext;
+  let InspectedElementContext;
+  let InspectedElementContextController;
+  let SettingsContextController;
+  let StoreContext;
+  let TreeContextController;
+  let TreeStateContext;
+  let TreeDispatcherContext;
+
+  let TestUtilsAct;
+  let TestRendererAct;
+
+  let testRendererInstance;
+
+  let ErrorBoundary;
+  let errorBoundaryInstance;
+
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    PropTypes = require('prop-types');
+    TestUtilsAct = require('internal-test-utils').act;
+    TestRenderer = utils.requireTestRenderer();
+    TestRendererAct = require('internal-test-utils').act;
+
+    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;
+    SettingsContextController =
+      require('react-devtools-shared/src/devtools/views/Settings/SettingsContext').SettingsContextController;
+    StoreContext =
+      require('react-devtools-shared/src/devtools/views/context').StoreContext;
+    TreeContextController =
+      require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeContextController;
+    TreeStateContext =
+      require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeStateContext;
+    TreeDispatcherContext =
+      require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeDispatcherContext;
+
+    // Used by inspectElementAtIndex() helper function
+    utils.act(() => {
+      testRendererInstance = TestRenderer.create(null, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    errorBoundaryInstance = null;
+
+    ErrorBoundary = class extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        errorBoundaryInstance = this;
+
+        if (this.state.error) {
+          return null;
+        }
+        return this.props.children;
+      }
+    };
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const {render: legacyRender} = getLegacyRenderImplementation();
+  const {render: modernRender} = getModernRenderImplementation();
+  const {render} = getVersionedRenderImplementation();
+
+  const Contexts = ({
+    children,
+    defaultInspectedElementID = null,
+    defaultInspectedElementIndex = null,
+  }) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <SettingsContextController>
+          <TreeContextController
+            defaultInspectedElementID={defaultInspectedElementID}
+            defaultInspectedElementIndex={defaultInspectedElementIndex}>
+            <InspectedElementContextController>
+              {children}
+            </InspectedElementContextController>
+          </TreeContextController>
+        </SettingsContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  function useInspectedElement() {
+    const {inspectedElement} = React.useContext(InspectedElementContext);
+    return inspectedElement;
+  }
+
+  function useInspectElementPath() {
+    const {inspectPaths} = React.useContext(InspectedElementContext);
+    return inspectPaths;
+  }
+
+  function noop() {}
+
+  async function inspectElementAtIndex(
+    index,
+    useCustomHook = noop,
+    shouldThrow = false,
+  ) {
+    let didFinish = false;
+    let inspectedElement = null;
+
+    function Suspender() {
+      useCustomHook();
+      inspectedElement = useInspectedElement();
+      didFinish = true;
+      return null;
+    }
+
+    const id = ((store.getElementIDAtIndex(index): any): number);
+
+    await utils.actAsync(() => {
+      testRendererInstance.update(
+        <ErrorBoundary>
+          <Contexts
+            defaultInspectedElementID={id}
+            defaultInspectedElementIndex={index}>
+            <React.Suspense fallback={null}>
+              <Suspender id={id} index={index} />
+            </React.Suspense>
+          </Contexts>
+        </ErrorBoundary>,
+      );
+    }, false);
+
+    if (!shouldThrow) {
+      expect(didFinish).toBe(true);
+    }
+
+    return inspectedElement;
+  }
+
+  // TODO(hoxyq): Enable this test for versions ~18, currently broken
+  // @reactVersion <= 18.2
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should inspect the currently selected element (legacy render)', async () => {
+    const Example = () => {
+      const [count] = React.useState(1);
+      return count;
+    };
+
+    await utils.actAsync(() => {
+      legacyRender(<Example a={1} b="abc" />);
+    });
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": "removed by Jest serializer",
+              "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+              "functionName": "Example",
+              "lineNumber": "removed by Jest serializer",
+            },
+            "id": 0,
+            "isStateEditable": true,
+            "name": "State",
+            "subHooks": [],
+            "value": 1,
+          },
+        ],
+        "id": 2,
+        "owners": null,
+        "props": {
+          "a": 1,
+          "b": "abc",
+        },
+        "rootType": "render()",
+        "state": null,
+      }
+    `);
+  });
+
+  it('should inspect the currently selected element (createRoot)', async () => {
+    const Example = () => {
+      const [count] = React.useState(1);
+      return count;
+    };
+
+    await utils.actAsync(() => {
+      modernRender(<Example a={1} b="abc" />);
+    });
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": "removed by Jest serializer",
+              "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+              "functionName": "Example",
+              "lineNumber": "removed by Jest serializer",
+            },
+            "id": 0,
+            "isStateEditable": true,
+            "name": "State",
+            "subHooks": [],
+            "value": 1,
+          },
+        ],
+        "id": 2,
+        "owners": null,
+        "props": {
+          "a": 1,
+          "b": "abc",
+        },
+        "rootType": "createRoot()",
+        "state": null,
+      }
+    `);
+  });
+
+  it('should have hasLegacyContext flag set to either "true" or "false" depending on which context API is used.', async () => {
+    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';
+
+    await utils.actAsync(() =>
+      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>,
+      ),
+    );
+
+    const cases = [
+      {
+        // <LegacyContextConsumer />
+        index: 1,
+        shouldHaveLegacyContext: true,
+      },
+      {
+        // <BoolContext.Consumer>
+        index: 2,
+        shouldHaveLegacyContext: false,
+      },
+      {
+        // <ModernContextType />
+        index: 3,
+        shouldHaveLegacyContext: false,
+      },
+      {
+        // <ModernContext.Consumer>
+        index: 5,
+        shouldHaveLegacyContext: false,
+      },
+    ];
+
+    for (let i = 0; i < cases.length; i++) {
+      const {index, shouldHaveLegacyContext} = cases[i];
+
+      // HACK: Recreate TestRenderer instance because we rely on default state values
+      // from props like defaultInspectedElementID and it's easier to reset here than
+      // to read the TreeDispatcherContext and update the selected ID that way.
+      // We're testing the inspected values here, not the context wiring, so that's ok.
+      withErrorsOrWarningsIgnored(
+        ['An update to %s inside a test was not wrapped in act'],
+        () => {
+          testRendererInstance = TestRenderer.create(null, {
+            unstable_isConcurrent: true,
+          });
+        },
+      );
+
+      const inspectedElement = await inspectElementAtIndex(index);
+
+      expect(inspectedElement.context).not.toBe(null);
+      expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);
+    }
+  });
+
+  it('should poll for updates for the currently selected element', async () => {
+    const Example = () => null;
+
+    await utils.actAsync(() => render(<Example a={1} b="abc" />), false);
+
+    let inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
+
+    await utils.actAsync(() => render(<Example a={2} b="def" />), false);
+
+    // TODO (cache)
+    // This test only passes if both the check-for-updates poll AND the test renderer.update() call are included below.
+    // It seems like either one of the two should be sufficient but:
+    // 1. Running only check-for-updates schedules a transition that React never renders.
+    // 2. Running only renderer.update() loads stale data (first props)
+
+    // Wait for our check-for-updates poll to get the new data.
+    jest.runOnlyPendingTimers();
+    await Promise.resolve();
+
+    inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "a": 2,
+        "b": "def",
+      }
+    `);
+  });
+
+  it('should not re-render a function with hooks if it did not update since it was last inspected', async () => {
+    let targetRenderCount = 0;
+
+    const Wrapper = ({children}) => children;
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      // Even though his hook isn't referenced, it's used to observe backend rendering.
+      React.useState(0);
+      return null;
+    });
+
+    await utils.actAsync(() =>
+      render(
+        <Wrapper>
+          <Target a={1} b="abc" />
+        </Wrapper>,
+      ),
+    );
+
+    targetRenderCount = 0;
+
+    let inspectedElement = await inspectElementAtIndex(1);
+    // One more because we call render function for generating component stack,
+    // which is required for defining source location
+    expect(targetRenderCount).toBe(2);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
+
+    const prevInspectedElement = inspectedElement;
+
+    targetRenderCount = 0;
+    inspectedElement = await inspectElementAtIndex(1);
+    expect(targetRenderCount).toBe(0);
+    expect(inspectedElement).toEqual(prevInspectedElement);
+
+    targetRenderCount = 0;
+
+    await utils.actAsync(
+      () =>
+        render(
+          <Wrapper>
+            <Target a={2} b="def" />
+          </Wrapper>,
+        ),
+      false,
+    );
+
+    // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
+    inspectedElement = await inspectElementAtIndex(1);
+    expect(targetRenderCount).toBe(2);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "a": 2,
+        "b": "def",
+      }
+    `);
+  });
+
+  // See github.com/facebook/react/issues/22241#issuecomment-931299972
+  it('should properly recover from a cache miss on the frontend', async () => {
+    let targetRenderCount = 0;
+
+    const Wrapper = ({children}) => children;
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      // Even though his hook isn't referenced, it's used to observe backend rendering.
+      React.useState(0);
+      return null;
+    });
+
+    await utils.actAsync(() =>
+      render(
+        <Wrapper>
+          <Target a={1} b="abc" />
+        </Wrapper>,
+      ),
+    );
+
+    targetRenderCount = 0;
+
+    let inspectedElement = await inspectElementAtIndex(1);
+    // One more because we call render function for generating component stack,
+    // which is required for defining source location
+    expect(targetRenderCount).toBe(2);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
+
+    const prevInspectedElement = inspectedElement;
+
+    // This test causes an intermediate error to be logged but we can ignore it.
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    // Clear the frontend cache to simulate DevTools being closed and re-opened.
+    // The backend still thinks the most recently-inspected element is still cached,
+    // so the frontend needs to tell it to resend a full value.
+    // We can verify this by asserting that the component is re-rendered again.
+    withErrorsOrWarningsIgnored(
+      ['An update to %s inside a test was not wrapped in act'],
+      () => {
+        testRendererInstance = TestRenderer.create(null, {
+          unstable_isConcurrent: true,
+        });
+      },
+    );
+
+    const {
+      clearCacheForTests,
+    } = require('react-devtools-shared/src/inspectedElementMutableSource');
+    clearCacheForTests();
+
+    targetRenderCount = 0;
+    inspectedElement = await inspectElementAtIndex(1);
+    expect(targetRenderCount).toBe(1);
+    expect(inspectedElement).toEqual(prevInspectedElement);
+  });
+
+  it('should temporarily disable console logging when re-running a component to inspect its hooks', async () => {
+    let targetRenderCount = 0;
+
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.spyOn(console, 'info').mockImplementation(() => {});
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      console.error('error');
+      console.info('info');
+      console.log('log');
+      console.warn('warn');
+      React.useState(0);
+      return null;
+    });
+
+    await utils.actAsync(() => render(<Target a={1} b="abc" />));
+
+    expect(targetRenderCount).toBe(1);
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalledWith('error');
+    expect(console.info).toHaveBeenCalledTimes(1);
+    expect(console.info).toHaveBeenCalledWith('info');
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledWith('log');
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith('warn');
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement).not.toBe(null);
+    // One more because we call render function for generating component stack,
+    // which is required for defining source location
+    expect(targetRenderCount).toBe(3);
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.info).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should support simple data types', async () => {
+    const Example = () => null;
+
+    await utils.actAsync(() =>
+      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}
+        />,
+      ),
+    );
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "boolean_false": false,
+        "boolean_true": true,
+        "float": 1.23,
+        "infinity": Infinity,
+        "integer_one": 1,
+        "integer_zero": 0,
+        "nan": NaN,
+        "string": "abc",
+        "string_empty": "",
+        "value_null": null,
+        "value_undefined": undefined,
+      }
+    `);
+  });
+
+  it('should support complex data types', async () => {
+    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 objectWithSymbol = {
+      [Symbol('name')]: 'hello',
+    };
+    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 proxyInstance = new Proxy(() => {}, {
+      get: function (_, name) {
+        return function () {
+          return null;
+        };
+      },
+    });
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          anonymous_fn={instance.anonymousFunction}
+          array_buffer={arrayBuffer}
+          array_of_arrays={arrayOfArrays}
+          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}
+          object_with_symbol={objectWithSymbol}
+          proxy={proxyInstance}
+          react_element={<span />}
+          react_lazy={React.lazy(async () => ({default: 'foo'}))}
+          regexp={/abc/giu}
+          set={setShallow}
+          set_of_sets={setOfSets}
+          symbol={Symbol('symbol')}
+          typed_array={typedArray}
+        />,
+      ),
+    );
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "anonymous_fn": Dehydrated {
+          "preview_short": () => {},
+          "preview_long": () => {},
+        },
+        "array_buffer": Dehydrated {
+          "preview_short": ArrayBuffer(3),
+          "preview_long": ArrayBuffer(3),
+        },
+        "array_of_arrays": [
+          Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": [Array(3), Array(0)],
+          },
+        ],
+        "big_int": Dehydrated {
+          "preview_short": 123n,
+          "preview_long": 123n,
+        },
+        "bound_fn": Dehydrated {
+          "preview_short": bound exampleFunction() {},
+          "preview_long": bound exampleFunction() {},
+        },
+        "data_view": Dehydrated {
+          "preview_short": DataView(3),
+          "preview_long": DataView(3),
+        },
+        "date": Dehydrated {
+          "preview_short": Tue Dec 31 2019 23:42:42 GMT+0000 (Coordinated Universal Time),
+          "preview_long": Tue Dec 31 2019 23:42:42 GMT+0000 (Coordinated Universal Time),
+        },
+        "fn": Dehydrated {
+          "preview_short": exampleFunction() {},
+          "preview_long": exampleFunction() {},
+        },
+        "html_element": Dehydrated {
+          "preview_short": <div />,
+          "preview_long": <div />,
+        },
+        "immutable": {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["a", List(3)],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["b", 123],
+          },
+          "2": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["c", Map(2)],
+          },
+        },
+        "map": {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["name", "Brian"],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["food", "sushi"],
+          },
+        },
+        "map_of_maps": {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["first", Map(2)],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["second", Map(2)],
+          },
+        },
+        "object_of_objects": {
+          "inner": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {boolean: true, number: 123, string: "abc"},
+          },
+        },
+        "object_with_symbol": {
+          "Symbol(name)": "hello",
+        },
+        "proxy": Dehydrated {
+          "preview_short": () => {},
+          "preview_long": () => {},
+        },
+        "react_element": {
+          "key": null,
+          "props": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {},
+          },
+        },
+        "react_lazy": {
+          "_payload": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {_ioInfo: {…}, _result: () => {}, _status: -1},
+          },
+        },
+        "regexp": Dehydrated {
+          "preview_short": /abc/giu,
+          "preview_long": /abc/giu,
+        },
+        "set": {
+          "0": "abc",
+          "1": 123,
+        },
+        "set_of_sets": {
+          "0": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {"a", "b", "c"},
+          },
+          "1": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {1, 2, 3},
+          },
+        },
+        "symbol": Dehydrated {
+          "preview_short": Symbol(symbol),
+          "preview_long": Symbol(symbol),
+        },
+        "typed_array": {
+          "0": 100,
+          "1": -100,
+          "2": 0,
+        },
+      }
+    `);
+  });
+
+  it('should support Thenables in React 19', async () => {
+    const Example = () => null;
+
+    class SubclassedPromise extends Promise {}
+
+    const plainThenable = {then() {}};
+    const subclassedPromise = new SubclassedPromise(() => {});
+    const unusedPromise = Promise.resolve();
+    const usedFulfilledPromise = Promise.resolve();
+    const usedFulfilledRichPromise = Promise.resolve({
+      some: {
+        deeply: {
+          nested: {
+            object: {
+              string: 'test',
+              fn: () => {},
+            },
+          },
+        },
+      },
+    });
+    const usedPendingPromise = new Promise(resolve => {});
+    const usedRejectedPromise = Promise.reject(
+      new Error('test-error-do-not-surface'),
+    );
+
+    function Use({value}) {
+      React.use(value);
+    }
+
+    await utils.actAsync(() =>
+      render(
+        <>
+          <Example
+            plainThenable={plainThenable}
+            subclassedPromise={subclassedPromise}
+            unusedPromise={unusedPromise}
+            usedFulfilledPromise={usedFulfilledPromise}
+            usedFulfilledRichPromise={usedFulfilledRichPromise}
+            usedPendingPromise={usedPendingPromise}
+            usedRejectedPromise={usedRejectedPromise}
+          />
+          <React.Suspense>
+            <Use value={usedPendingPromise} />
+          </React.Suspense>
+          <React.Suspense>
+            <Use value={usedFulfilledPromise} />
+          </React.Suspense>
+          <React.Suspense>
+            <Use value={usedFulfilledRichPromise} />
+          </React.Suspense>
+          <ErrorBoundary>
+            <React.Suspense>
+              <Use value={usedRejectedPromise} />
+            </React.Suspense>
+          </ErrorBoundary>
+        </>,
+      ),
+    );
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "plainThenable": Dehydrated {
+          "preview_short": Thenable,
+          "preview_long": Thenable,
+        },
+        "subclassedPromise": Dehydrated {
+          "preview_short": SubclassedPromise,
+          "preview_long": SubclassedPromise,
+        },
+        "unusedPromise": Dehydrated {
+          "preview_short": Promise,
+          "preview_long": Promise,
+        },
+        "usedFulfilledPromise": {
+          "value": undefined,
+        },
+        "usedFulfilledRichPromise": {
+          "value": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {some: {…}},
+          },
+        },
+        "usedPendingPromise": Dehydrated {
+          "preview_short": pending Promise,
+          "preview_long": pending Promise,
+        },
+        "usedRejectedPromise": {
+          "reason": Dehydrated {
+            "preview_short": Error: test-error-do-not-surface,
+            "preview_long": Error: test-error-do-not-surface,
+          },
+        },
+      }
+    `);
+  });
+
+  it('should support Promises in React 18', async () => {
+    const Example = () => null;
+
+    const unusedPromise = Promise.resolve();
+
+    await utils.actAsync(() =>
+      render(
+        <>
+          <Example unusedPromise={unusedPromise} />
+        </>,
+      ),
+    );
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+          {
+            "unusedPromise": Dehydrated {
+              "preview_short": Promise,
+              "preview_long": Promise,
+            },
+          }
+      `);
+  });
+
+  it('should not consume iterables while inspecting', async () => {
+    const Example = () => null;
+
+    function* generator() {
+      throw Error('Should not be consumed!');
+    }
+
+    const iterable = generator();
+    await utils.actAsync(() => render(<Example prop={iterable} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "prop": Dehydrated {
+          "preview_short": Generator,
+          "preview_long": Generator,
+        },
+      }
+    `);
+  });
+
+  it('should support objects with no prototype', async () => {
+    const Example = () => null;
+
+    const object = Object.create(null);
+    object.string = 'abc';
+    object.number = 123;
+    object.boolean = true;
+
+    await utils.actAsync(() => render(<Example object={object} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "object": {
+          "boolean": true,
+          "number": 123,
+          "string": "abc",
+        },
+      }
+    `);
+  });
+
+  it('should support objects with overridden hasOwnProperty', async () => {
+    const Example = () => null;
+
+    const object = {
+      name: 'blah',
+      hasOwnProperty: true,
+    };
+
+    await utils.actAsync(() => render(<Example object={object} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "object": {
+          "hasOwnProperty": true,
+          "name": "blah",
+        },
+      }
+    `);
+  });
+
+  it('should support custom objects with enumerable properties and getters', async () => {
+    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;
+
+    await utils.actAsync(() => render(<Example data={new CustomData()} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "data": {
+          "_number": 42,
+          "number": 42,
+        },
+      }
+    `);
+  });
+
+  it('should support objects with inherited keys', async () => {
+    const Example = () => null;
+
+    const base = Object.create(Object.prototype, {
+      enumerableStringBase: {
+        value: 1,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      [Symbol('enumerableSymbolBase')]: {
+        value: 1,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      nonEnumerableStringBase: {
+        value: 1,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      [Symbol('nonEnumerableSymbolBase')]: {
+        value: 1,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+    });
+
+    const object = Object.create(base, {
+      enumerableString: {
+        value: 2,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      nonEnumerableString: {
+        value: 3,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      123: {
+        value: 3,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      [Symbol('nonEnumerableSymbol')]: {
+        value: 2,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      [Symbol('enumerableSymbol')]: {
+        value: 3,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+    });
+
+    await utils.actAsync(() => render(<Example object={object} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "object": {
+          "123": 3,
+          "Symbol(enumerableSymbol)": 3,
+          "Symbol(enumerableSymbolBase)": 1,
+          "enumerableString": 2,
+          "enumerableStringBase": 1,
+        },
+      }
+    `);
+  });
+
+  it('should allow component prop value and value`s prototype has same name params.', async () => {
+    const testData = Object.create(
+      {
+        a: undefined,
+        b: Infinity,
+        c: NaN,
+        d: 'normal',
+      },
+      {
+        a: {
+          value: undefined,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+        b: {
+          value: Infinity,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+        c: {
+          value: NaN,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+        d: {
+          value: 'normal',
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+      },
+    );
+    const Example = ({data}) => null;
+
+    await utils.actAsync(() => render(<Example data={testData} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "data": {
+          "a": undefined,
+          "b": Infinity,
+          "c": NaN,
+          "d": "normal",
+        },
+      }
+    `);
+  });
+
+  it('should not dehydrate nested values until explicitly requested', async () => {
+    const Example = () => {
+      const [state] = React.useState({
+        foo: {
+          bar: {
+            baz: 'hi',
+          },
+        },
+      });
+
+      return state.foo.bar.baz;
+    };
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          nestedObject={{
+            a: {
+              b: {
+                c: [
+                  {
+                    d: {
+                      e: {},
+                    },
+                  },
+                ],
+              },
+            },
+          }}
+        />,
+      ),
+    );
+
+    let inspectedElement = null;
+    let inspectElementPath = null;
+
+    // Render once to get a handle on inspectElementPath()
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
+
+    async function loadPath(path) {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
+          inspectElementPath(path);
+        });
+      });
+
+      inspectedElement = await inspectElementAtIndex(0);
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}},
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "c": Dehydrated {
+                "preview_short": Array(1),
+                "preview_long": [{…}],
+              },
+            },
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a', 'b', 'c']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "c": [
+                {
+                  "d": Dehydrated {
+                    "preview_short": {…},
+                    "preview_long": {e: {…}},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a', 'b', 'c', 0, 'd']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "c": [
+                {
+                  "d": {
+                    "e": {},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
+
+    await loadPath(['hooks', 0, 'value']);
+
+    expect(inspectedElement.hooks).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": "removed by Jest serializer",
+            "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+            "functionName": "Example",
+            "lineNumber": "removed by Jest serializer",
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": {
+            "foo": {
+              "bar": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {baz: "hi"},
+              },
+            },
+          },
+        },
+      ]
+    `);
+
+    await loadPath(['hooks', 0, 'value', 'foo', 'bar']);
+
+    expect(inspectedElement.hooks).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": "removed by Jest serializer",
+            "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+            "functionName": "Example",
+            "lineNumber": "removed by Jest serializer",
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": {
+            "foo": {
+              "bar": {
+                "baz": "hi",
+              },
+            },
+          },
+        },
+      ]
+    `);
+  });
+
+  it('should dehydrate complex nested values when requested', async () => {
+    const Example = () => null;
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          set_of_sets={new Set([new Set([1, 2, 3]), new Set(['a', 'b', 'c'])])}
+        />,
+      ),
+    );
+
+    let inspectedElement = null;
+    let inspectElementPath = null;
+
+    // Render once to get a handle on inspectElementPath()
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
+
+    async function loadPath(path) {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
+          inspectElementPath(path);
+        });
+      });
+
+      inspectedElement = await inspectElementAtIndex(0);
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "set_of_sets": {
+          "0": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {1, 2, 3},
+          },
+          "1": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {"a", "b", "c"},
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'set_of_sets', 0]);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "set_of_sets": {
+          "0": {
+            "0": 1,
+            "1": 2,
+            "2": 3,
+          },
+          "1": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {"a", "b", "c"},
+          },
+        },
+      }
+    `);
+  });
+
+  it('should include updates for nested values that were previously hydrated', async () => {
+    const Example = () => null;
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+            c: {
+              value: 1,
+              d: {
+                value: 1,
+                e: {
+                  value: 1,
+                },
+              },
+            },
+          }}
+        />,
+      ),
+    );
+
+    let inspectedElement = null;
+    let inspectElementPath = null;
+
+    // Render once to get a handle on inspectElementPath()
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
+
+    async function loadPath(path) {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
+          inspectElementPath(path);
+        });
+      });
+
+      inspectedElement = await inspectElementAtIndex(0);
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}, value: 1},
+          },
+          "c": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {d: {…}, value: 1},
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "value": 1,
+            },
+            "value": 1,
+          },
+          "c": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {d: {…}, value: 1},
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'c']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "value": 1,
+            },
+            "value": 1,
+          },
+          "c": {
+            "d": {
+              "e": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {value: 1},
+              },
+              "value": 1,
+            },
+            "value": 1,
+          },
+        },
+      }
+    `);
+
+    await TestRendererAct(async () => {
+      await TestUtilsAct(async () => {
+        render(
+          <Example
+            nestedObject={{
+              a: {
+                value: 2,
+                b: {
+                  value: 2,
+                },
+              },
+              c: {
+                value: 2,
+                d: {
+                  value: 2,
+                  e: {
+                    value: 2,
+                  },
+                },
+              },
+            }}
+          />,
+        );
+      });
+    });
+
+    // Wait for pending poll-for-update and then update inspected element data.
+    jest.runOnlyPendingTimers();
+    await Promise.resolve();
+    inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "value": 2,
+            },
+            "value": 2,
+          },
+          "c": {
+            "d": {
+              "e": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {value: 2},
+              },
+              "value": 2,
+            },
+            "value": 2,
+          },
+        },
+      }
+    `);
+  });
+
+  it('should return a full update if a path is inspected for an object that has other pending changes', async () => {
+    const Example = () => null;
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+            c: {
+              value: 1,
+              d: {
+                value: 1,
+                e: {
+                  value: 1,
+                },
+              },
+            },
+          }}
+        />,
+      ),
+    );
+
+    let inspectedElement = null;
+    let inspectElementPath = null;
+
+    // Render once to get a handle on inspectElementPath()
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
+
+    async function loadPath(path) {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(() => {
+          inspectElementPath(path);
+        });
+      });
+
+      inspectedElement = await inspectElementAtIndex(0);
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}, value: 1},
+          },
+          "c": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {d: {…}, value: 1},
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "value": 1,
+            },
+            "value": 1,
+          },
+          "c": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {d: {…}, value: 1},
+          },
+        },
+      }
+    `);
+
+    await TestRendererAct(async () => {
+      await TestUtilsAct(async () => {
+        render(
+          <Example
+            nestedObject={{
+              a: {
+                value: 2,
+                b: {
+                  value: 2,
+                },
+              },
+              c: {
+                value: 2,
+                d: {
+                  value: 2,
+                  e: {
+                    value: 2,
+                  },
+                },
+              },
+            }}
+          />,
+        );
+      });
+    });
+
+    await loadPath(['props', 'nestedObject', 'c']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "value": 2,
+            },
+            "value": 2,
+          },
+          "c": {
+            "d": {
+              "e": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {value: 2},
+              },
+              "value": 2,
+            },
+            "value": 2,
+          },
+        },
+      }
+    `);
+  });
+
+  it('should not tear if hydration is requested after an update', async () => {
+    const Example = () => null;
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          nestedObject={{
+            value: 1,
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+          }}
+        />,
+      ),
+    );
+
+    let inspectedElement = null;
+    let inspectElementPath = null;
+
+    // Render once to get a handle on inspectElementPath()
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
+
+    async function loadPath(path) {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(() => {
+          inspectElementPath(path);
+        });
+      });
+
+      inspectedElement = await inspectElementAtIndex(0);
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}, value: 1},
+          },
+          "value": 1,
+        },
+      }
+    `);
+
+    await TestUtilsAct(async () => {
+      render(
+        <Example
+          nestedObject={{
+            value: 2,
+            a: {
+              value: 2,
+              b: {
+                value: 2,
+              },
+            },
+          }}
+        />,
+      );
+    });
+
+    await loadPath(['props', 'nestedObject', 'a']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "value": 2,
+            },
+            "value": 2,
+          },
+          "value": 2,
+        },
+      }
+    `);
+  });
+
+  // TODO(hoxyq): Enable this test for versions ~18, currently broken
+  // @reactVersion <= 18.2
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should inspect hooks for components that only use context (legacy render)', async () => {
+    const Context = React.createContext(true);
+    const Example = () => {
+      const value = React.useContext(Context);
+      return value;
+    };
+
+    await utils.actAsync(() => legacyRender(<Example a={1} b="abc" />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": "removed by Jest serializer",
+              "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+              "functionName": "Example",
+              "lineNumber": "removed by Jest serializer",
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "Context",
+            "subHooks": [],
+            "value": true,
+          },
+        ],
+        "id": 2,
+        "owners": null,
+        "props": {
+          "a": 1,
+          "b": "abc",
+        },
+        "rootType": "render()",
+        "state": null,
+      }
+    `);
+  });
+
+  it('should inspect hooks for components that only use context (createRoot)', async () => {
+    const Context = React.createContext(true);
+    const Example = () => {
+      const value = React.useContext(Context);
+      return value;
+    };
+
+    await utils.actAsync(() => modernRender(<Example a={1} b="abc" />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": [
+          {
+            "debugInfo": null,
+            "hookSource": {
+              "columnNumber": "removed by Jest serializer",
+              "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+              "functionName": "Example",
+              "lineNumber": "removed by Jest serializer",
+            },
+            "id": null,
+            "isStateEditable": false,
+            "name": "Context",
+            "subHooks": [],
+            "value": true,
+          },
+        ],
+        "id": 2,
+        "owners": null,
+        "props": {
+          "a": 1,
+          "b": "abc",
+        },
+        "rootType": "createRoot()",
+        "state": null,
+      }
+    `);
+  });
+
+  it('should enable inspected values to be stored as global variables', async () => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    await utils.actAsync(() => render(<Example nestedObject={nestedObject} />));
+
+    let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    await inspectElementAtIndex(0, () => {
+      storeAsGlobal = (path: Array<string | number>) => {
+        const rendererID = store.getRendererIDForElement(id);
+        if (rendererID !== null) {
+          const {
+            storeAsGlobal: storeAsGlobalAPI,
+          } = require('react-devtools-shared/src/backendAPI');
+          storeAsGlobalAPI({
+            bridge,
+            id,
+            path,
+            rendererID,
+          });
+        }
+      };
+    });
+
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+
+    // Should store the whole value (not just the hydrated parts)
+    storeAsGlobal(['props', 'nestedObject']);
+    jest.runOnlyPendingTimers();
+    expect(console.log).toHaveBeenCalledWith('$reactTemp0');
+    expect(global.$reactTemp0).toBe(nestedObject);
+
+    console.log.mockReset();
+
+    // Should store the nested property specified (not just the outer value)
+    storeAsGlobal(['props', 'nestedObject', 'a', 'b']);
+    jest.runOnlyPendingTimers();
+    expect(console.log).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject.a.b);
+  });
+
+  it('should enable inspected values to be copied to the clipboard', async () => {
+    const Example = () => null;
+
+    const nestedObject = {
+      a: {
+        value: 1,
+        b: {
+          value: 1,
+          c: {
+            value: 1,
+          },
+        },
+      },
+    };
+
+    await utils.actAsync(() => render(<Example nestedObject={nestedObject} />));
+
+    let copyPath: CopyInspectedElementPath =
+      ((null: any): CopyInspectedElementPath);
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    await inspectElementAtIndex(0, () => {
+      copyPath = (path: Array<string | number>) => {
+        const rendererID = store.getRendererIDForElement(id);
+        if (rendererID !== null) {
+          const {
+            copyInspectedElementPath,
+          } = require('react-devtools-shared/src/backendAPI');
+          copyInspectedElementPath({
+            bridge,
+            id,
+            path,
+            rendererID,
+          });
+        }
+      };
+    });
+
+    // Should copy the whole value (not just the hydrated parts)
+    copyPath(['props', 'nestedObject']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject, undefined, 2),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    copyPath(['props', 'nestedObject', 'a', 'b']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject.a.b, undefined, 2),
+    );
+  });
+
+  it('should enable complex values to be copied to the clipboard', async () => {
+    const Immutable = require('immutable');
+
+    const Example = () => null;
+
+    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,
+      },
+    });
+    const bigInt = BigInt(123);
+
+    await utils.actAsync(() =>
+      render(
+        <Example
+          arrayBuffer={arrayBuffer}
+          dataView={dataView}
+          map={map}
+          set={set}
+          mapOfMaps={mapOfMaps}
+          setOfSets={setOfSets}
+          typedArray={typedArray}
+          immutable={immutable}
+          bigInt={bigInt}
+        />,
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let copyPath: CopyInspectedElementPath =
+      ((null: any): CopyInspectedElementPath);
+
+    await inspectElementAtIndex(0, () => {
+      copyPath = (path: Array<string | number>) => {
+        const rendererID = store.getRendererIDForElement(id);
+        if (rendererID !== null) {
+          const {
+            copyInspectedElementPath,
+          } = require('react-devtools-shared/src/backendAPI');
+          copyInspectedElementPath({
+            bridge,
+            id,
+            path,
+            rendererID,
+          });
+        }
+      };
+    });
+
+    // Should copy the whole value (not just the hydrated parts)
+    copyPath(['props']);
+    jest.runOnlyPendingTimers();
+    // Should not error despite lots of unserialized values.
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    copyPath(['props', 'bigInt']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify('123n', undefined, 2),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    copyPath(['props', 'typedArray']);
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify({0: 100, 1: -100, 2: 0}, undefined, 2),
+    );
+  });
+
+  it('should display complex values of useDebugValue', async () => {
+    function useDebuggableHook() {
+      React.useDebugValue({foo: 2});
+      React.useState(1);
+      return 1;
+    }
+    function DisplayedComplexValue() {
+      useDebuggableHook();
+      return null;
+    }
+
+    await utils.actAsync(() => render(<DisplayedComplexValue />));
+
+    const {hooks} = await inspectElementAtIndex(0);
+    expect(hooks).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": "removed by Jest serializer",
+            "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+            "functionName": "DisplayedComplexValue",
+            "lineNumber": "removed by Jest serializer",
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "DebuggableHook",
+          "subHooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": "removed by Jest serializer",
+                "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+                "functionName": "useDebuggableHook",
+                "lineNumber": "removed by Jest serializer",
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": 1,
+            },
+          ],
+          "value": {
+            "foo": 2,
+          },
+        },
+      ]
+    `);
+  });
+
+  // See github.com/facebook/react/issues/21654
+  it('should support Proxies that dont return an iterator', async () => {
+    const Example = () => null;
+    const proxy = new Proxy(
+      {},
+      {
+        get: (target, prop, receiver) => {
+          target[prop] = value => {};
+          return target[prop];
+        },
+      },
+    );
+
+    await utils.actAsync(() => render(<Example proxy={proxy} />));
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "proxy": {
+          "$$typeof": Dehydrated {
+            "preview_short": () => {},
+            "preview_long": () => {},
+          },
+          "Symbol(Symbol.iterator)": Dehydrated {
+            "preview_short": () => {},
+            "preview_long": () => {},
+          },
+          "constructor": Dehydrated {
+            "preview_short": () => {},
+            "preview_long": () => {},
+          },
+        },
+      }
+    `);
+  });
+
+  // TODO(hoxyq): Enable this test for versions ~18, currently broken
+  // Regression test for github.com/facebook/react/issues/22099
+  // @reactVersion <= 18.2
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should not error when an unchanged component is re-inspected after component filters changed (legacy render)', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => legacyRender(<Example />));
+
+    // Select/inspect element
+    let inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {},
+        "rootType": "render()",
+        "state": null,
+      }
+    `);
+
+    await utils.actAsync(async () => {
+      // Ignore transient warning this causes
+      withErrorsOrWarningsIgnored(['No element found with id'], () => {
+        store.componentFilters = [];
+
+        // Flush events to the renderer.
+        jest.runOnlyPendingTimers();
+      });
+    }, false);
+
+    // HACK: Recreate TestRenderer instance because we rely on default state values
+    // from props like defaultInspectedElementID and it's easier to reset here than
+    // to read the TreeDispatcherContext and update the selected ID that way.
+    // We're testing the inspected values here, not the context wiring, so that's ok.
+    withErrorsOrWarningsIgnored(
+      ['An update to %s inside a test was not wrapped in act'],
+      () => {
+        testRendererInstance = TestRenderer.create(null, {
+          unstable_isConcurrent: true,
+        });
+      },
+    );
+
+    // Select/inspect the same element again
+    inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {},
+        "rootType": "render()",
+        "state": null,
+      }
+    `);
+  });
+
+  // Regression test for github.com/facebook/react/issues/22099
+  it('should not error when an unchanged component is re-inspected after component filters changed (createRoot)', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => modernRender(<Example />));
+
+    // Select/inspect element
+    let inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {},
+        "rootType": "createRoot()",
+        "state": null,
+      }
+    `);
+
+    await utils.actAsync(async () => {
+      // Ignore transient warning this causes
+      withErrorsOrWarningsIgnored(['No element found with id'], () => {
+        store.componentFilters = [];
+
+        // Flush events to the renderer.
+        jest.runOnlyPendingTimers();
+      });
+    }, false);
+
+    // HACK: Recreate TestRenderer instance because we rely on default state values
+    // from props like defaultInspectedElementID and it's easier to reset here than
+    // to read the TreeDispatcherContext and update the selected ID that way.
+    // We're testing the inspected values here, not the context wiring, so that's ok.
+    withErrorsOrWarningsIgnored(
+      ['An update to %s inside a test was not wrapped in act'],
+      () => {
+        testRendererInstance = TestRenderer.create(null, {
+          unstable_isConcurrent: true,
+        });
+      },
+    );
+
+    // Select/inspect the same element again
+    inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 4,
+        "owners": null,
+        "props": {},
+        "rootType": "createRoot()",
+        "state": null,
+      }
+    `);
+  });
+
+  // TODO(hoxyq): Enable this test for versions ~18, currently broken
+  // @reactVersion <= 18.2
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should display the root type for ReactDOM.hydrate', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      container.innerHTML = '<div></div>';
+      withErrorsOrWarningsIgnored(
+        ['ReactDOM.hydrate has not been supported since React 18'],
+        () => {
+          ReactDOM.hydrate(<Example />, container);
+        },
+      );
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
+  });
+
+  // TODO(hoxyq): Enable this test for versions ~18, currently broken
+  // @reactVersion <= 18.2
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should display the root type for ReactDOM.render', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      legacyRender(<Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
+  });
+
+  it('should display the root type for ReactDOMClient.hydrateRoot', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      container.innerHTML = '<div></div>';
+      ReactDOMClient.hydrateRoot(container, <Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
+  });
+
+  it('should display the root type for ReactDOMClient.createRoot', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      ReactDOMClient.createRoot(container).render(<Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
+  });
+
+  it('should gracefully surface backend errors on the frontend rather than timing out', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    let shouldThrow = false;
+
+    const Example = () => {
+      const [count] = React.useState(0);
+
+      if (shouldThrow) {
+        throw Error('Expected');
+      } else {
+        return count;
+      }
+    };
+
+    await utils.actAsync(() => {
+      render(<Example />);
+    }, false);
+
+    shouldThrow = true;
+
+    const value = await inspectElementAtIndex(0, noop, true);
+
+    expect(value).toBe(null);
+
+    const error = errorBoundaryInstance.state.error;
+    expect(error.message).toBe('Expected');
+    expect(error.stack).toContain('inspectHooksOfFiber');
+  });
+
+  describe('$r', () => {
+    it('should support function components', async () => {
+      const Example = () => {
+        const [count] = React.useState(1);
+        return count;
+      };
+
+      await utils.actAsync(() => render(<Example a={1} b="abc" />));
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r).toMatchInlineSnapshot(`
+        {
+          "hooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": "removed by Jest serializer",
+                "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+                "functionName": "Example",
+                "lineNumber": "removed by Jest serializer",
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": 1,
+            },
+          ],
+          "props": {
+            "a": 1,
+            "b": "abc",
+          },
+          "type": [Function],
+        }
+      `);
+    });
+
+    it('should support memoized function components', async () => {
+      const Example = React.memo(function Example(props) {
+        const [count] = React.useState(1);
+        return count;
+      });
+
+      await utils.actAsync(() => render(<Example a={1} b="abc" />));
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r).toMatchInlineSnapshot(`
+        {
+          "hooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": "removed by Jest serializer",
+                "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+                "functionName": "Example",
+                "lineNumber": "removed by Jest serializer",
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": 1,
+            },
+          ],
+          "props": {
+            "a": 1,
+            "b": "abc",
+          },
+          "type": [Function],
+        }
+      `);
+    });
+
+    it('should support forward refs', async () => {
+      const Example = React.forwardRef(function Example(props, ref) {
+        const [count] = React.useState(1);
+        return count;
+      });
+
+      await utils.actAsync(() => render(<Example a={1} b="abc" />));
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r).toMatchInlineSnapshot(`
+        {
+          "hooks": [
+            {
+              "debugInfo": null,
+              "hookSource": {
+                "columnNumber": "removed by Jest serializer",
+                "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js",
+                "functionName": "Example",
+                "lineNumber": "removed by Jest serializer",
+              },
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": [],
+              "value": 1,
+            },
+          ],
+          "props": {
+            "a": 1,
+            "b": "abc",
+          },
+          "type": [Function],
+        }
+      `);
+    });
+
+    it('should support class components', async () => {
+      class Example extends React.Component {
+        state = {
+          count: 0,
+        };
+        render() {
+          return null;
+        }
+      }
+
+      await utils.actAsync(() => render(<Example a={1} b="abc" />));
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r.props).toMatchInlineSnapshot(`
+              {
+                "a": 1,
+                "b": "abc",
+              }
+            `);
+      expect(global.$r.state).toMatchInlineSnapshot(`
+              {
+                "count": 0,
+              }
+            `);
+    });
+  });
+
+  describe('inline errors and warnings', () => {
+    async function getErrorsAndWarningsForElementAtIndex(index) {
+      const id = ((store.getElementIDAtIndex(index): any): number);
+      if (id == null) {
+        throw Error(`Element at index "${index}"" not found in store`);
+      }
+
+      let errors = null;
+      let warnings = null;
+
+      function Suspender({target}) {
+        const inspectedElement = useInspectedElement();
+        errors = inspectedElement.errors;
+        warnings = inspectedElement.warnings;
+        return null;
+      }
+
+      let root;
+      await utils.actAsync(() => {
+        root = TestRenderer.create(
+          <Contexts
+            defaultInspectedElementID={id}
+            defaultInspectedElementIndex={index}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+          {unstable_isConcurrent: true},
+        );
+      }, false);
+      await utils.actAsync(() => {
+        root.unmount();
+      }, false);
+
+      return {errors, warnings};
+    }
+
+    it('during render get recorded', async () => {
+      const Example = () => {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only: '], async () => {
+        await utils.actAsync(() => render(<Example repeatWarningCount={1} />));
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        {
+          "errors": [
+            [
+              "test-only: render error",
+              1,
+            ],
+          ],
+          "warnings": [
+            [
+              "test-only: render warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('during render get deduped', async () => {
+      const Example = () => {
+        console.error('test-only: render error');
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        console.warn('test-only: render warning');
+        console.warn('test-only: render warning');
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() => render(<Example repeatWarningCount={1} />));
+      });
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        {
+          "errors": [
+            [
+              "test-only: render error",
+              2,
+            ],
+          ],
+          "warnings": [
+            [
+              "test-only: render warning",
+              3,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('during layout (mount) get recorded', async () => {
+      const Example = () => {
+        // Note we only test mount because once the component unmounts,
+        // it is no longer in the store and warnings are ignored.
+        React.useLayoutEffect(() => {
+          console.error('test-only: useLayoutEffect error');
+          console.warn('test-only: useLayoutEffect warning');
+        }, []);
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() => render(<Example repeatWarningCount={1} />));
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        {
+          "errors": [
+            [
+              "test-only: useLayoutEffect error",
+              1,
+            ],
+          ],
+          "warnings": [
+            [
+              "test-only: useLayoutEffect warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('during passive (mount) get recorded', async () => {
+      const Example = () => {
+        // Note we only test mount because once the component unmounts,
+        // it is no longer in the store and warnings are ignored.
+        React.useEffect(() => {
+          console.error('test-only: useEffect error');
+          console.warn('test-only: useEffect warning');
+        }, []);
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() => render(<Example repeatWarningCount={1} />));
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        {
+          "errors": [
+            [
+              "test-only: useEffect error",
+              1,
+            ],
+          ],
+          "warnings": [
+            [
+              "test-only: useEffect warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('from react get recorded without a component stack', async () => {
+      const Example = () => {
+        return [<div />];
+      };
+
+      await withErrorsOrWarningsIgnored(
+        ['Each child in a list should have a unique "key" prop.'],
+        async () => {
+          await utils.actAsync(() =>
+            render(<Example repeatWarningCount={1} />),
+          );
+        },
+      );
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        {
+          "errors": [],
+          "warnings": [],
+        }
+      `);
+    });
+
+    it('can be cleared for the whole app', async () => {
+      const Example = () => {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() => render(<Example repeatWarningCount={1} />));
+      });
+
+      const {
+        clearErrorsAndWarnings,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearErrorsAndWarnings({bridge, store});
+
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        {
+          "errors": [],
+          "warnings": [],
+        }
+      `);
+    });
+
+    it('can be cleared for a particular Fiber (only warnings)', async () => {
+      const Example = ({id}) => {
+        console.error(`test-only: render error #${id}`);
+        console.warn(`test-only: render warning #${id}`);
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          render(
+            <React.Fragment>
+              <Example id={1} />
+              <Example id={2} />
+            </React.Fragment>,
+          ),
+        );
+      });
+
+      let id = ((store.getElementIDAtIndex(1): any): number);
+      const rendererID = store.getRendererIDForElement(id);
+
+      const {
+        clearWarningsForElement,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearWarningsForElement({bridge, id, rendererID});
+
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      let data = [
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        [
+          {
+            "errors": [
+              [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": [
+              [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          {
+            "errors": [
+              [
+                "test-only: render error #2",
+                1,
+              ],
+            ],
+            "warnings": [],
+          },
+        ]
+      `);
+
+      id = ((store.getElementIDAtIndex(0): any): number);
+      clearWarningsForElement({bridge, id, rendererID});
+
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      data = [
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        [
+          {
+            "errors": [
+              [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": [],
+          },
+          {
+            "errors": [
+              [
+                "test-only: render error #2",
+                1,
+              ],
+            ],
+            "warnings": [],
+          },
+        ]
+      `);
+    });
+
+    it('can be cleared for a particular Fiber (only errors)', async () => {
+      const Example = ({id}) => {
+        console.error(`test-only: render error #${id}`);
+        console.warn(`test-only: render warning #${id}`);
+        return null;
+      };
+
+      await withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          render(
+            <React.Fragment>
+              <Example id={1} />
+              <Example id={2} />
+            </React.Fragment>,
+          ),
+        );
+      });
+
+      let id = ((store.getElementIDAtIndex(1): any): number);
+      const rendererID = store.getRendererIDForElement(id);
+
+      const {
+        clearErrorsForElement,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearErrorsForElement({bridge, id, rendererID});
+
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      let data = [
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        [
+          {
+            "errors": [
+              [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": [
+              [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          {
+            "errors": [],
+            "warnings": [
+              [
+                "test-only: render warning #2",
+                1,
+              ],
+            ],
+          },
+        ]
+      `);
+
+      id = ((store.getElementIDAtIndex(0): any): number);
+      clearErrorsForElement({bridge, id, rendererID});
+
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      data = [
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        [
+          {
+            "errors": [],
+            "warnings": [
+              [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          {
+            "errors": [],
+            "warnings": [
+              [
+                "test-only: render warning #2",
+                1,
+              ],
+            ],
+          },
+        ]
+      `);
+    });
+  });
+
+  // TODO(hoxyq): Enable this test for versions ~18, currently broken
+  // @reactVersion <= 18.2
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('inspecting nested renderers should not throw (legacy render)', async () => {
+    // Ignoring react art warnings
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    const ReactArt = require('react-art');
+    const ArtSVGMode = require('art/modes/svg');
+    const ARTCurrentMode = require('art/modes/current');
+    store.componentFilters = [];
+
+    ARTCurrentMode.setCurrent(ArtSVGMode);
+    const {Surface, Group} = ReactArt;
+
+    function Child() {
+      return (
+        <Surface width={1} height={1}>
+          <Group />
+        </Surface>
+      );
+    }
+    function App() {
+      return <Child />;
+    }
+
+    await utils.actAsync(() => {
+      legacyRender(<App />);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Child>
+            ▾ <Surface>
+                <svg>
+      [root]
+          <Group>
+    `);
+
+    const inspectedElement = await inspectElementAtIndex(4);
+    expect(inspectedElement.owners).toMatchInlineSnapshot(`
+      [
+        {
+          "compiledWithForget": false,
+          "displayName": "Child",
+          "hocDisplayNames": null,
+          "id": 3,
+          "key": null,
+          "type": 5,
+        },
+        {
+          "compiledWithForget": false,
+          "displayName": "App",
+          "hocDisplayNames": null,
+          "id": 2,
+          "key": null,
+          "type": 5,
+        },
+      ]
+    `);
+  });
+
+  it('inspecting nested renderers should not throw (createRoot)', async () => {
+    // Ignoring react art warnings
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    const ReactArt = require('react-art');
+    const ArtSVGMode = require('art/modes/svg');
+    const ARTCurrentMode = require('art/modes/current');
+    store.componentFilters = [];
+
+    ARTCurrentMode.setCurrent(ArtSVGMode);
+    const {Surface, Group} = ReactArt;
+
+    function Child() {
+      return (
+        <Surface width={1} height={1}>
+          <Group />
+        </Surface>
+      );
+    }
+    function App() {
+      return <Child />;
+    }
+
+    await utils.actAsync(() => {
+      modernRender(<App />);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Child>
+            ▾ <Surface>
+                <svg>
+      [root]
+          <Group>
+    `);
+
+    const inspectedElement = await inspectElementAtIndex(4);
+    // TODO: Ideally this should match the owners of the Group but those are
+    // part of a different parent tree. Ideally the Group would be parent of
+    // that parent tree though which would fix this issue.
+    //
+    // [
+    //   {
+    //     "compiledWithForget": false,
+    //     "displayName": "Child",
+    //     "hocDisplayNames": null,
+    //     "id": 8,
+    //     "key": null,
+    //     "type": 5,
+    //   },
+    //   {
+    //     "compiledWithForget": false,
+    //     "displayName": "App",
+    //     "hocDisplayNames": null,
+    //     "id": 7,
+    //     "key": null,
+    //     "type": 5,
+    //   },
+    // ]
+    expect(inspectedElement.owners).toMatchInlineSnapshot(`[]`);
+  });
+
+  describe('error boundary', () => {
+    it('can toggle error', async () => {
+      class LocalErrorBoundary extends React.Component<any> {
+        state = {hasError: false};
+        static getDerivedStateFromError(error) {
+          return {hasError: true};
+        }
+        render() {
+          const {hasError} = this.state;
+          return hasError ? 'has-error' : this.props.children;
+        }
+      }
+
+      const Example = () => 'example';
+
+      await utils.actAsync(() =>
+        render(
+          <LocalErrorBoundary>
+            <Example />
+          </LocalErrorBoundary>,
+        ),
+      );
+
+      const targetErrorBoundaryID = ((store.getElementIDAtIndex(
+        0,
+      ): any): number);
+      const inspect = index => {
+        // HACK: Recreate TestRenderer instance so we can inspect different elements
+        withErrorsOrWarningsIgnored(
+          ['An update to %s inside a test was not wrapped in act'],
+          () => {
+            testRendererInstance = TestRenderer.create(null, {
+              unstable_isConcurrent: true,
+            });
+          },
+        );
+        return inspectElementAtIndex(index);
+      };
+      const toggleError = async forceError => {
+        await withErrorsOrWarningsIgnored(['ErrorBoundary'], async () => {
+          await TestUtilsAct(async () => {
+            bridge.send('overrideError', {
+              id: targetErrorBoundaryID,
+              rendererID: store.getRendererIDForElement(targetErrorBoundaryID),
+              forceError,
+            });
+          });
+        });
+
+        await TestUtilsAct(async () => {
+          jest.runOnlyPendingTimers();
+        });
+      };
+
+      // Inspect <ErrorBoundary /> and see that we cannot toggle error state
+      // on error boundary itself
+      let inspectedElement = await inspect(0);
+      expect(inspectedElement.canToggleError).toBe(true);
+
+      // Inspect <Example />
+      inspectedElement = await inspect(1);
+      expect(inspectedElement.canToggleError).toBe(true);
+      expect(inspectedElement.isErrored).toBe(false);
+
+      // Suppress expected error and warning.
+      const consoleErrorMock = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+      const consoleWarnMock = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {});
+
+      // now force error state on <Example />
+      await toggleError(true);
+
+      consoleErrorMock.mockRestore();
+      consoleWarnMock.mockRestore();
+
+      // we are in error state now, <Example /> won't show up
+      withErrorsOrWarningsIgnored(['Invalid index'], () => {
+        expect(store.getElementIDAtIndex(1)).toBe(null);
+      });
+
+      // Inpsect <ErrorBoundary /> to toggle off the error state
+      inspectedElement = await inspect(0);
+      expect(inspectedElement.canToggleError).toBe(true);
+      expect(inspectedElement.isErrored).toBe(true);
+
+      await toggleError(false);
+
+      // We can now inspect <Example /> with ability to toggle again
+      inspectedElement = await inspect(1);
+      expect(inspectedElement.canToggleError).toBe(true);
+      expect(inspectedElement.isErrored).toBe(false);
+    });
+  });
+
+  it('should properly handle when components filters are updated', async () => {
+    const Wrapper = ({children}) => children;
+
+    let state;
+    let dispatch;
+    const Capture = () => {
+      dispatch = React.useContext(TreeDispatcherContext);
+      state = React.useContext(TreeStateContext);
+      return null;
+    };
+
+    function Child({logError = false, logWarning = false}) {
+      if (logError === true) {
+        console.error('test-only: error');
+      }
+      if (logWarning === true) {
+        console.warn('test-only: warning');
+      }
+      return null;
+    }
+
+    async function selectNextErrorOrWarning() {
+      await utils.actAsync(
+        () =>
+          dispatch({type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'}),
+        false,
+      );
+    }
+
+    async function selectPreviousErrorOrWarning() {
+      await utils.actAsync(
+        () =>
+          dispatch({
+            type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+          }),
+        false,
+      );
+    }
+
+    withErrorsOrWarningsIgnored(['test-only:'], () =>
+      utils.act(() =>
+        render(
+          <React.Fragment>
+            <Wrapper>
+              <Child logWarning={true} />
+            </Wrapper>
+            <Wrapper>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+            </Wrapper>
+          </React.Fragment>,
+        ),
+      ),
+    );
+
+    utils.act(() =>
+      TestRenderer.create(
+        <Contexts>
+          <Capture />
+        </Contexts>,
+      ),
+    );
+    expect(state).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+         ▾ <Wrapper>
+             <Child> ⚠
+         ▾ <Wrapper>
+           ▾ <Wrapper>
+               <Child> ⚠
+    `);
+
+    await selectNextErrorOrWarning();
+    expect(state).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+         ▾ <Wrapper>
+      →      <Child> ⚠
+         ▾ <Wrapper>
+           ▾ <Wrapper>
+               <Child> ⚠
+    `);
+
+    await utils.actAsync(() => {
+      store.componentFilters = [utils.createDisplayNameFilter('Wrapper')];
+      jest.runOnlyPendingTimers();
+    }, false);
+
+    expect(state).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+      →    <Child> ⚠
+           <Child> ⚠
+    `);
+
+    await selectNextErrorOrWarning();
+    expect(state).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+           <Child> ⚠
+      →    <Child> ⚠
+    `);
+
+    await utils.actAsync(() => {
+      store.componentFilters = [];
+      jest.runOnlyPendingTimers();
+    }, false);
+    expect(state).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+         ▾ <Wrapper>
+             <Child> ⚠
+         ▾ <Wrapper>
+           ▾ <Wrapper>
+      →        <Child> ⚠
+    `);
+
+    await selectPreviousErrorOrWarning();
+    expect(state).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+         ▾ <Wrapper>
+      →      <Child> ⚠
+         ▾ <Wrapper>
+           ▾ <Wrapper>
+               <Child> ⚠
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('should inspect server components', async () => {
+    const ChildPromise = Promise.resolve(<div />);
+    ChildPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const Parent = () => ChildPromise;
+
+    await utils.actAsync(() => {
+      modernRender(<Parent />);
+    });
+
+    const inspectedElement = await inspectElementAtIndex(1);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 3,
+        "owners": null,
+        "props": null,
+        "rootType": "createRoot()",
+        "state": null,
+      }
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js b/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
new file mode 100644
index 00000000000..c6da4b5eccd
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
@@ -0,0 +1,686 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('editing interface', () => {
+  let PropTypes;
+  let React;
+  let ReactDOM;
+  let bridge: FrontendBridge;
+  let store: Store;
+
+  const act = (callback: Function) => {
+    callback();
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  const flushPendingUpdates = () => {
+    jest.runOnlyPendingTimers();
+  };
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    PropTypes = require('prop-types');
+
+    // 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');
+  });
+
+  describe('props', () => {
+    let committedProps;
+    let id;
+
+    function mountTestApp() {
+      class ClassComponent extends React.Component {
+        componentDidMount() {
+          committedProps = this.props;
+        }
+        componentDidUpdate() {
+          committedProps = this.props;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      act(() =>
+        ReactDOM.render(
+          React.createElement(ClassComponent, {
+            array: [1, 2, 3],
+            object: {nested: 'initial'},
+            shallow: 'initial',
+          }),
+          document.createElement('div'),
+        ),
+      );
+
+      id = ((store.getElementIDAtIndex(0): any): number);
+
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+    }
+
+    // @reactVersion >= 16.0
+    it('should have editable values', () => {
+      mountTestApp();
+
+      function overrideProps(path, value) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideProps(['shallow'], 'updated');
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+      overrideProps(['object', 'nested'], 'updated');
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+      overrideProps(['array', 1], 'updated');
+      expect(committedProps).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should have editable paths', () => {
+      mountTestApp();
+
+      function renamePath(oldPath, newPath) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('renamePath', {
+          id,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'props',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(['shallow'], ['after']);
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+      renamePath(['object', 'nested'], ['object', 'after']);
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideProps(path, value) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideProps(['new'], 'value');
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(['object', 'new'], 'value');
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideProps(['array', 3], 'new value');
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should have deletable keys', () => {
+      mountTestApp();
+
+      function deletePath(path) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('deletePath', {
+          id,
+          path,
+          rendererID,
+          type: 'props',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(['shallow']);
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+      deletePath(['object', 'nested']);
+      expect(committedProps).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+      deletePath(['array', 1]);
+      expect(committedProps).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+  });
+
+  describe('state', () => {
+    let committedState;
+    let id;
+
+    function mountTestApp() {
+      class ClassComponent extends React.Component {
+        state = {
+          array: [1, 2, 3],
+          object: {
+            nested: 'initial',
+          },
+          shallow: 'initial',
+        };
+        componentDidMount() {
+          committedState = this.state;
+        }
+        componentDidUpdate() {
+          committedState = this.state;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      act(() =>
+        ReactDOM.render(
+          React.createElement(ClassComponent, {
+            object: {nested: 'initial'},
+            shallow: 'initial',
+          }),
+          document.createElement('div'),
+        ),
+      );
+
+      id = ((store.getElementIDAtIndex(0): any): number);
+
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+    }
+
+    // @reactVersion >= 16.0
+    it('should have editable values', () => {
+      mountTestApp();
+
+      function overrideState(path, value) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'state',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideState(['shallow'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {nested: 'initial'},
+        shallow: 'updated',
+      });
+
+      overrideState(['object', 'nested'], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {nested: 'updated'},
+        shallow: 'updated',
+      });
+
+      overrideState(['array', 1], 'updated');
+      expect(committedState).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {nested: 'updated'},
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should have editable paths', () => {
+      mountTestApp();
+
+      function renamePath(oldPath, newPath) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('renamePath', {
+          id,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'state',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(['shallow'], ['after']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+
+      renamePath(['object', 'nested'], ['object', 'after']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideState(path, value) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'state',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideState(['new'], 'value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideState(['object', 'new'], 'value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideState(['array', 3], 'new value');
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should have deletable keys', () => {
+      mountTestApp();
+
+      function deletePath(path) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+        bridge.send('deletePath', {
+          id,
+          path,
+          rendererID,
+          type: 'state',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(['shallow']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+
+      deletePath(['object', 'nested']);
+      expect(committedState).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+
+      deletePath(['array', 1]);
+      expect(committedState).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+  });
+
+  describe('context', () => {
+    let committedContext;
+    let id;
+
+    function mountTestApp() {
+      class LegacyContextProvider extends React.Component<any> {
+        static childContextTypes = {
+          array: PropTypes.array,
+          object: PropTypes.object,
+          shallow: PropTypes.string,
+        };
+        getChildContext() {
+          return {
+            array: [1, 2, 3],
+            object: {
+              nested: 'initial',
+            },
+            shallow: 'initial',
+          };
+        }
+        render() {
+          return this.props.children;
+        }
+      }
+
+      class ClassComponent extends React.Component<any> {
+        static contextTypes = {
+          array: PropTypes.array,
+          object: PropTypes.object,
+          shallow: PropTypes.string,
+        };
+        componentDidMount() {
+          committedContext = this.context;
+        }
+        componentDidUpdate() {
+          committedContext = this.context;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      act(() =>
+        ReactDOM.render(
+          React.createElement(
+            LegacyContextProvider,
+            null,
+            React.createElement(ClassComponent),
+          ),
+          document.createElement('div'),
+        ),
+      );
+
+      // This test only covers Class components.
+      // Function components using legacy context are not editable.
+
+      id = ((store.getElementIDAtIndex(1): any): number);
+
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+      });
+    }
+
+    // @reactVersion >= 16.0
+    it('should have editable values', () => {
+      mountTestApp();
+
+      function overrideContext(path, value) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'context',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideContext(['shallow'], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'updated',
+      });
+
+      overrideContext(['object', 'nested'], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+
+      overrideContext(['array', 1], 'updated');
+      expect(committedContext).toStrictEqual({
+        array: [1, 'updated', 3],
+        object: {
+          nested: 'updated',
+        },
+        shallow: 'updated',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should have editable paths', () => {
+      mountTestApp();
+
+      function renamePath(oldPath, newPath) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+        bridge.send('renamePath', {
+          id,
+          oldPath,
+          newPath,
+          rendererID,
+          type: 'context',
+        });
+        flushPendingUpdates();
+      }
+
+      renamePath(['shallow'], ['after']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        after: 'initial',
+      });
+
+      renamePath(['object', 'nested'], ['object', 'after']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          after: 'initial',
+        },
+        after: 'initial',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should enable adding new object properties and array values', async () => {
+      await mountTestApp();
+
+      function overrideContext(path, value) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+        bridge.send('overrideValueAtPath', {
+          id,
+          path,
+          rendererID,
+          type: 'context',
+          value,
+        });
+        flushPendingUpdates();
+      }
+
+      overrideContext(['new'], 'value');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideContext(['object', 'new'], 'value');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+
+      overrideContext(['array', 3], 'new value');
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3, 'new value'],
+        object: {
+          nested: 'initial',
+          new: 'value',
+        },
+        shallow: 'initial',
+        new: 'value',
+      });
+    });
+
+    // @reactVersion >= 16.0
+    it('should have deletable keys', () => {
+      mountTestApp();
+
+      function deletePath(path) {
+        const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+        bridge.send('deletePath', {
+          id,
+          path,
+          rendererID,
+          type: 'context',
+        });
+        flushPendingUpdates();
+      }
+
+      deletePath(['shallow']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {
+          nested: 'initial',
+        },
+      });
+
+      deletePath(['object', 'nested']);
+      expect(committedContext).toStrictEqual({
+        array: [1, 2, 3],
+        object: {},
+      });
+
+      deletePath(['array', 1]);
+      expect(committedContext).toStrictEqual({
+        array: [1, 3],
+        object: {},
+      });
+    });
+  });
+});
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 00000000000..f306ab97093
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -0,0 +1,942 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('InspectedElementContext', () => {
+  let React;
+  let ReactDOM;
+  let bridge: FrontendBridge;
+  let store: Store;
+
+  let backendAPI;
+
+  const act = (callback: Function) => {
+    callback();
+
+    jest.runAllTimers(); // Flush Bridge operations
+  };
+
+  async function read(
+    id: number,
+    path: Array<string | number> = null,
+  ): Promise<Object> {
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+    const promise = backendAPI
+      .inspectElement(bridge, false, id, path, rendererID)
+      .then(data =>
+        backendAPI.convertInspectedElementBackendToFrontend(data.value),
+      );
+
+    jest.runOnlyPendingTimers();
+
+    return promise;
+  }
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+
+    backendAPI = require('react-devtools-shared/src/backendAPI');
+
+    // 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');
+  });
+
+  // @reactVersion >= 16.0
+  it('should inspect the currently selected element', async () => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {a: 1, b: 'abc'}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {
+          "a": 1,
+          "b": "abc",
+        },
+        "rootType": null,
+        "state": null,
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should support simple data types', async () => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(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).toMatchInlineSnapshot(`
+      {
+        "context": {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {
+          "boolean_false": false,
+          "boolean_true": true,
+          "float": 1.23,
+          "infinity": Infinity,
+          "integer_one": 1,
+          "integer_zero": 0,
+          "nan": NaN,
+          "string": "abc",
+          "string_empty": "",
+          "value_null": null,
+          "value_undefined": undefined,
+        },
+        "rootType": null,
+        "state": null,
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should support complex data types', async () => {
+    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(
+        React.createElement(Example, {
+          anonymous_fn: instance.anonymousFunction,
+          array_buffer: arrayBuffer,
+          array_of_arrays: arrayOfArrays,
+          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: React.createElement('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.props).toMatchInlineSnapshot(`
+      {
+        "anonymous_fn": Dehydrated {
+          "preview_short": () => {},
+          "preview_long": () => {},
+        },
+        "array_buffer": Dehydrated {
+          "preview_short": ArrayBuffer(3),
+          "preview_long": ArrayBuffer(3),
+        },
+        "array_of_arrays": [
+          Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": [Array(3), Array(0)],
+          },
+        ],
+        "big_int": Dehydrated {
+          "preview_short": 123n,
+          "preview_long": 123n,
+        },
+        "bound_fn": Dehydrated {
+          "preview_short": bound exampleFunction() {},
+          "preview_long": bound exampleFunction() {},
+        },
+        "data_view": Dehydrated {
+          "preview_short": DataView(3),
+          "preview_long": DataView(3),
+        },
+        "date": Dehydrated {
+          "preview_short": Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time),
+          "preview_long": Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time),
+        },
+        "fn": Dehydrated {
+          "preview_short": exampleFunction() {},
+          "preview_long": exampleFunction() {},
+        },
+        "html_element": Dehydrated {
+          "preview_short": <div />,
+          "preview_long": <div />,
+        },
+        "immutable": {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["a", List(3)],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["b", 123],
+          },
+          "2": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["c", Map(2)],
+          },
+        },
+        "map": {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["name", "Brian"],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["food", "sushi"],
+          },
+        },
+        "map_of_maps": {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["first", Map(2)],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["second", Map(2)],
+          },
+        },
+        "object_of_objects": {
+          "inner": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {boolean: true, number: 123, string: "abc"},
+          },
+        },
+        "react_element": {
+          "key": null,
+          "props": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {},
+          },
+          "ref": null,
+        },
+        "regexp": Dehydrated {
+          "preview_short": /abc/giu,
+          "preview_long": /abc/giu,
+        },
+        "set": {
+          "0": "abc",
+          "1": 123,
+        },
+        "set_of_sets": {
+          "0": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {"a", "b", "c"},
+          },
+          "1": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {1, 2, 3},
+          },
+        },
+        "symbol": Dehydrated {
+          "preview_short": Symbol(symbol),
+          "preview_long": Symbol(symbol),
+        },
+        "typed_array": {
+          "0": 100,
+          "1": -100,
+          "2": 0,
+        },
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should support objects with no prototype', async () => {
+    const Example = () => null;
+
+    const object = Object.create(null);
+    object.string = 'abc';
+    object.number = 123;
+    object.boolean = true;
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {object}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "object": {
+          "boolean": true,
+          "number": 123,
+          "string": "abc",
+        },
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should support objects with overridden hasOwnProperty', async () => {
+    const Example = () => null;
+
+    const object = {
+      name: 'blah',
+      hasOwnProperty: true,
+    };
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {object}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    // TRICKY: Don't use toMatchInlineSnapshot() for this test!
+    // Our snapshot serializer relies on hasOwnProperty() for feature detection.
+    expect(inspectedElement.props.object.name).toBe('blah');
+    expect(inspectedElement.props.object.hasOwnProperty).toBe(true);
+  });
+
+  // @reactVersion >= 16.0
+  it('should not consume iterables while inspecting', async () => {
+    const Example = () => null;
+
+    function* generator() {
+      yield 1;
+      yield 2;
+    }
+
+    const iteratable = generator();
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {iteratable}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {
+          "iteratable": Dehydrated {
+            "preview_short": Generator,
+            "preview_long": Generator,
+          },
+        },
+        "rootType": null,
+        "state": null,
+      }
+    `);
+
+    // Inspecting should not consume the iterable.
+    expect(iteratable.next().value).toEqual(1);
+    expect(iteratable.next().value).toEqual(2);
+    expect(iteratable.next().value).toBeUndefined();
+  });
+
+  // @reactVersion >= 16.0
+  it('should support custom objects with enumerable properties and getters', async () => {
+    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(
+        React.createElement(Example, {data: new CustomData()}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {
+          "data": {
+            "_number": 42,
+            "number": 42,
+          },
+        },
+        "rootType": null,
+        "state": null,
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should support objects with inherited keys', async () => {
+    const Example = () => null;
+
+    const base = Object.create(Object.prototype, {
+      enumerableStringBase: {
+        value: 1,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      [Symbol('enumerableSymbolBase')]: {
+        value: 1,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      nonEnumerableStringBase: {
+        value: 1,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      [Symbol('nonEnumerableSymbolBase')]: {
+        value: 1,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+    });
+
+    const object = Object.create(base, {
+      enumerableString: {
+        value: 2,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      nonEnumerableString: {
+        value: 3,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      123: {
+        value: 3,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+      [Symbol('nonEnumerableSymbol')]: {
+        value: 2,
+        writable: true,
+        enumerable: false,
+        configurable: true,
+      },
+      [Symbol('enumerableSymbol')]: {
+        value: 3,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      },
+    });
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {data: object}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": {
+          "data": {
+            "123": 3,
+            "Symbol(enumerableSymbol)": 3,
+            "Symbol(enumerableSymbolBase)": 1,
+            "enumerableString": 2,
+            "enumerableStringBase": 1,
+          },
+        },
+        "rootType": null,
+        "state": null,
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should allow component prop value and value`s prototype has same name params.', async () => {
+    const testData = Object.create(
+      {
+        a: undefined,
+        b: Infinity,
+        c: NaN,
+        d: 'normal',
+      },
+      {
+        a: {
+          value: undefined,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+        b: {
+          value: Infinity,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+        c: {
+          value: NaN,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+        d: {
+          value: 'normal',
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+      },
+    );
+
+    const Example = ({data}) => null;
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {data: testData}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "data": {
+          "a": undefined,
+          "b": Infinity,
+          "c": NaN,
+          "d": "normal",
+        },
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should not dehydrate nested values until explicitly requested', async () => {
+    const Example = () => null;
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {
+          nestedObject: {
+            a: {
+              b: {
+                c: [
+                  {
+                    d: {
+                      e: {},
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        }),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = await read(id);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}},
+          },
+        },
+      }
+    `);
+
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a']);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "c": Dehydrated {
+                "preview_short": Array(1),
+                "preview_long": [{…}],
+              },
+            },
+          },
+        },
+      }
+    `);
+
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "c": [
+                {
+                  "d": Dehydrated {
+                    "preview_short": {…},
+                    "preview_long": {e: {…}},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
+
+    inspectedElement = await read(id, [
+      'props',
+      'nestedObject',
+      'a',
+      'b',
+      'c',
+      0,
+      'd',
+    ]);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      {
+        "nestedObject": {
+          "a": {
+            "b": {
+              "c": [
+                {
+                  "d": {
+                    "e": {},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  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(
+        React.createElement(Example, {nestedObject}),
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+
+    const logSpy = jest.fn();
+    jest.spyOn(console, 'log').mockImplementation(logSpy);
+
+    // Should store the whole value (not just the hydrated parts)
+    backendAPI.storeAsGlobal({
+      bridge,
+      id,
+      path: ['props', 'nestedObject'],
+      rendererID,
+    });
+
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp0');
+    expect(global.$reactTemp0).toBe(nestedObject);
+
+    logSpy.mockReset();
+
+    // Should store the nested property specified (not just the outer value)
+    backendAPI.storeAsGlobal({
+      bridge,
+      id,
+      path: ['props', 'nestedObject', 'a', 'b'],
+      rendererID,
+    });
+
+    jest.runOnlyPendingTimers();
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject.a.b);
+  });
+
+  // @reactVersion >= 16.0
+  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(
+        React.createElement(Example, {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)
+    backendAPI.copyInspectedElementPath({
+      bridge,
+      id,
+      path: ['props', 'nestedObject'],
+      rendererID,
+    });
+
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject, undefined, 2),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    backendAPI.copyInspectedElementPath({
+      bridge,
+      id,
+      path: ['props', 'nestedObject', 'a', 'b'],
+      rendererID,
+    });
+
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify(nestedObject.a.b, undefined, 2),
+    );
+  });
+
+  // @reactVersion >= 16.0
+  it('should enable complex values to be copied to the clipboard', () => {
+    const Immutable = require('immutable');
+
+    const Example = () => null;
+
+    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,
+      },
+    });
+    const bigInt = BigInt(123);
+
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Example, {
+          arrayBuffer: arrayBuffer,
+          dataView: dataView,
+          map: map,
+          set: set,
+          mapOfMaps: mapOfMaps,
+          setOfSets: setOfSets,
+          typedArray: typedArray,
+          immutable: immutable,
+          bigInt: bigInt,
+        }),
+        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)
+    backendAPI.copyInspectedElementPath({
+      bridge,
+      id,
+      path: ['props'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    // Should not error despite lots of unserialized values.
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    backendAPI.copyInspectedElementPath({
+      bridge,
+      id,
+      path: ['props', 'bigInt'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify('123n'),
+    );
+
+    global.mockClipboardCopy.mockReset();
+
+    // Should copy the nested property specified (not just the outer value)
+    backendAPI.copyInspectedElementPath({
+      bridge,
+      id,
+      path: ['props', 'typedArray'],
+      rendererID,
+    });
+    jest.runOnlyPendingTimers();
+    expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
+    expect(global.mockClipboardCopy).toHaveBeenCalledWith(
+      JSON.stringify({0: 100, 1: -100, 2: 0}, undefined, 2),
+    );
+  });
+});
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 00000000000..e4ef6612ecb
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -0,0 +1,952 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = () => React.createElement('div', null, 'Hi');
+    act(() =>
+      ReactDOM.render(
+        React.createElement(Component, {
+          count: 4,
+        }),
+        document.createElement('div'),
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
+    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}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Parent, {
+            count: count,
+          }),
+          React.createElement(Parent, {
+            count: count,
+          }),
+        );
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+          }),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [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>
+      `);
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 2,
+          }),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+      act(() => {
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 3,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 2,
+          }),
+          containerB,
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [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>
+      `);
+      act(() => {
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 4,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 1,
+          }),
+          containerB,
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [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>
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+            ▾ <div>
+              ▾ <Child key="0">
+                  <div>
+              ▾ <Child key="1">
+                  <div>
+              ▾ <Child key="2">
+                  <div>
+              ▾ <Child key="3">
+                  <div>
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+    it('should not filter DOM nodes from the store tree', () => {
+      const Grandparent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              flip: flip,
+            }),
+          ),
+          React.createElement(Parent, {
+            flip: flip,
+          }),
+          React.createElement(Nothing, null),
+        );
+      const Parent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          flip ? 'foo' : null,
+          React.createElement(Child, null),
+          flip && [null, 'hello', 42],
+          flip ? 'bar' : 'baz',
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      const Nothing = () => null;
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: false,
+          }),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <div>
+                ▾ <Parent>
+                  ▾ <div>
+                    ▾ <Child>
+                        <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child>
+                      <div>
+                <Nothing>
+      `);
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: true,
+          }),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <div>
+                ▾ <Parent>
+                  ▾ <div>
+                    ▾ <Child>
+                        <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child>
+                      <div>
+                <Nothing>
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+    it('should support collapsing parts of the tree', () => {
+      const Grandparent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Parent, {
+            count: count,
+          }),
+          React.createElement(Parent, {
+            count: count,
+          }),
+        );
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 2,
+          }),
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+      `);
+      const grandparentID = store.getElementIDAtIndex(0);
+      const parentOneID = store.getElementIDAtIndex(2);
+      const parentTwoID = store.getElementIDAtIndex(8);
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+      `);
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▸ <Parent>
+      `);
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+              ▸ <Parent>
+      `);
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+              ▸ <Parent>
+      `);
+    });
+    it('should support adding and removing children', () => {
+      const Root = ({children}) => React.createElement('div', null, children);
+      const Component = () => React.createElement('div', null);
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(
+            Root,
+            null,
+            React.createElement(Component, {
+              key: 'a',
+            }),
+          ),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Component key="a">
+                  <div>
+      `);
+      act(() =>
+        ReactDOM.render(
+          React.createElement(
+            Root,
+            null,
+            React.createElement(Component, {
+              key: 'a',
+            }),
+            React.createElement(Component, {
+              key: 'b',
+            }),
+          ),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Component key="a">
+                  <div>
+              ▾ <Component key="b">
+                  <div>
+      `);
+      act(() =>
+        ReactDOM.render(
+          React.createElement(
+            Root,
+            null,
+            React.createElement(Component, {
+              key: 'b',
+            }),
+          ),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Component key="b">
+                  <div>
+      `);
+    });
+    it('should support reordering of children', () => {
+      const Root = ({children}) => React.createElement('div', null, children);
+      const Component = () => React.createElement('div', null);
+      const Foo = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+        ]);
+      const Bar = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+          React.createElement(Component, {
+            key: '1',
+          }),
+        ]);
+      const foo = React.createElement(Foo, {
+        key: 'foo',
+      });
+      const bar = React.createElement(Bar, {
+        key: 'bar',
+      });
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [foo, bar]), container),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Foo key="foo">
+                ▾ <div>
+                  ▾ <Component key="0">
+                      <div>
+              ▾ <Bar key="bar">
+                ▾ <div>
+                  ▾ <Component key="0">
+                      <div>
+                  ▾ <Component key="1">
+                      <div>
+      `);
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [bar, foo]), container),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Bar key="bar">
+                ▾ <div>
+                  ▾ <Component key="0">
+                      <div>
+                  ▾ <Component key="1">
+                      <div>
+              ▾ <Foo key="foo">
+                ▾ <div>
+                  ▾ <Component key="0">
+                      <div>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Bar key="bar">
+                ▾ <div>
+                  ▾ <Component key="0">
+                      <div>
+                  ▾ <Component key="1">
+                      <div>
+              ▾ <Foo key="foo">
+                ▾ <div>
+                  ▾ <Component key="0">
+                      <div>
+      `);
+    });
+  });
+  describe('collapseNodesByDefault:true', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = true;
+    });
+    it('should support mount and update operations', () => {
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              count: 1,
+            }),
+            React.createElement(Parent, {
+              count: 3,
+            }),
+          ),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <div>
+      `);
+      act(() =>
+        ReactDOM.render(
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              count: 2,
+            }),
+            React.createElement(Parent, {
+              count: 1,
+            }),
+          ),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <div>
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+    it('should support mount and update operations for multiple roots', () => {
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+      act(() => {
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 3,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 2,
+          }),
+          containerB,
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
+      act(() => {
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'A',
+            count: 4,
+          }),
+          containerA,
+        );
+        ReactDOM.render(
+          React.createElement(Parent, {
+            key: 'B',
+            count: 1,
+          }),
+          containerB,
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+    it('should not filter DOM nodes from the store tree', () => {
+      const Grandparent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'div',
+            null,
+            React.createElement(Parent, {
+              flip: flip,
+            }),
+          ),
+          React.createElement(Parent, {
+            flip: flip,
+          }),
+          React.createElement(Nothing, null),
+        );
+      const Parent = ({flip}) =>
+        React.createElement(
+          'div',
+          null,
+          flip ? 'foo' : null,
+          React.createElement(Child, null),
+          flip && [null, 'hello', 42],
+          flip ? 'bar' : 'baz',
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      const Nothing = () => null;
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: false,
+          }),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <div>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <div>
+              ▸ <Parent>
+                <Nothing>
+      `);
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 4,
+            flip: true,
+          }),
+          container,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <div>
+              ▸ <Parent>
+                <Nothing>
+      `);
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+    it('should support expanding parts of the tree', () => {
+      const Grandparent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Parent, {
+            count: count,
+          }),
+          React.createElement(Parent, {
+            count: count,
+          }),
+        );
+      const Parent = ({count}) =>
+        React.createElement(
+          'div',
+          null,
+          new Array(count).fill(true).map((_, index) =>
+            React.createElement(Child, {
+              key: index,
+            }),
+          ),
+        );
+      const Child = () => React.createElement('div', null, 'Hi!');
+      act(() =>
+        ReactDOM.render(
+          React.createElement(Grandparent, {
+            count: 2,
+          }),
+          document.createElement('div'),
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+      const grandparentID = store.getElementIDAtIndex(0);
+      act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <div>
+      `);
+      const parentDivID = store.getElementIDAtIndex(1);
+      act(() => store.toggleIsCollapsed(parentDivID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▸ <Parent>
+      `);
+      const parentOneID = store.getElementIDAtIndex(2);
+      const parentTwoID = store.getElementIDAtIndex(3);
+      act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▸ <div>
+              ▸ <Parent>
+      `);
+      act(() => store.toggleIsCollapsed(parentTwoID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▸ <div>
+              ▾ <Parent>
+                ▸ <div>
+      `);
+      act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▾ <Parent>
+                ▸ <div>
+      `);
+      act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▸ <Parent>
+      `);
+      act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+    });
+
+    it('should support reordering of children', () => {
+      const Root = ({children}) => React.createElement('div', null, children);
+      const Component = () => React.createElement('div', null);
+      const Foo = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+        ]);
+      const Bar = () =>
+        React.createElement('div', null, [
+          React.createElement(Component, {
+            key: '0',
+          }),
+          React.createElement(Component, {
+            key: '1',
+          }),
+        ]);
+      const foo = React.createElement(Foo, {
+        key: 'foo',
+      });
+      const bar = React.createElement(Bar, {
+        key: 'bar',
+      });
+      const container = document.createElement('div');
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [foo, bar]), container),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+      act(() =>
+        ReactDOM.render(React.createElement(Root, null, [bar, foo]), container),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▸ <div>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▸ <Bar key="bar">
+              ▸ <Foo key="foo">
+      `);
+      act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Bar key="bar">
+                ▸ <div>
+              ▾ <Foo key="foo">
+                ▸ <div>
+      `);
+      act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+    });
+  });
+  describe('StrictMode compliance', () => {
+    it('should mark all elements as strict mode compliant', () => {
+      const App = () => null;
+      const container = document.createElement('div');
+      act(() => ReactDOM.render(React.createElement(App, null), container));
+      expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
+    });
+  });
+});
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 00000000000..2792541eace
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('OwnersListContext', () => {
+  let React;
+  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');
+    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 {render} = getVersionedRenderImplementation();
+
+  const Contexts = ({children, defaultOwnerID = null}) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController defaultOwnerID={defaultOwnerID}>
+          <OwnersListContextController>{children}</OwnersListContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  async function getOwnersListForOwner(owner) {
+    let ownerDisplayNames = null;
+
+    function Suspender() {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      ownerDisplayNames = owners.map(({displayName}) => displayName);
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={owner.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={owner} />
+          </React.Suspense>
+        </Contexts>,
+      ),
+    );
+
+    expect(ownerDisplayNames).not.toBeNull();
+
+    return ownerDisplayNames;
+  }
+
+  it('should fetch the owners list for the selected element', async () => {
+    const Grandparent = () => <Parent />;
+    const Parent = () => {
+      return (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+    };
+    const Child = () => null;
+
+    utils.act(() => render(<Grandparent />));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+          ▾ <Parent>
+              <Child>
+              <Child>
+    `);
+
+    const parent = ((store.getElementAtIndex(1): any): Element);
+    const firstChild = ((store.getElementAtIndex(2): any): Element);
+
+    expect(await getOwnersListForOwner(parent)).toMatchInlineSnapshot(`
+      [
+        "Grandparent",
+        "Parent",
+      ]
+    `);
+
+    expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
+      [
+        "Grandparent",
+        "Parent",
+        "Child",
+      ]
+    `);
+  });
+
+  it('should fetch the owners list for the selected element that includes filtered components', async () => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => <Parent />;
+    const Parent = () => {
+      return (
+        <React.Fragment>
+          <Child />
+          <Child />
+        </React.Fragment>
+      );
+    };
+    const Child = () => null;
+
+    utils.act(() => render(<Grandparent />));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+            <Child>
+            <Child>
+    `);
+
+    const firstChild = ((store.getElementAtIndex(1): any): Element);
+
+    expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
+      [
+        "Grandparent",
+        "Child",
+      ]
+    `);
+  });
+
+  it('should include the current element even if there are no other owners', async () => {
+    store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
+
+    const Grandparent = () => <Parent />;
+    const Parent = () => null;
+
+    utils.act(() => render(<Grandparent />));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Grandparent>
+    `);
+
+    const grandparent = ((store.getElementAtIndex(0): any): Element);
+
+    expect(await getOwnersListForOwner(grandparent)).toMatchInlineSnapshot(`
+      [
+        "Grandparent",
+      ]
+    `);
+  });
+
+  it('should include all owners for a component wrapped in react memo', async () => {
+    const InnerComponent = (props, ref) => <div ref={ref} />;
+    const ForwardRef = React.forwardRef(InnerComponent);
+    const Memo = React.memo(ForwardRef);
+    const Grandparent = () => {
+      const ref = React.createRef();
+      return <Memo ref={ref} />;
+    };
+
+    utils.act(() => render(<Grandparent />));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+          ▾ <InnerComponent> [Memo]
+              <InnerComponent> [ForwardRef]
+    `);
+
+    const wrapped = ((store.getElementAtIndex(2): any): Element);
+
+    expect(await getOwnersListForOwner(wrapped)).toMatchInlineSnapshot(`
+      [
+        "Grandparent",
+        "InnerComponent",
+        "InnerComponent",
+      ]
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
new file mode 100644
index 00000000000..be2e0377d42
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -0,0 +1,2457 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import semver from 'semver';
+
+import {getLegacyRenderImplementation, normalizeCodeLocInfo} from './utils';
+import {ReactVersion} from '../../../../ReactVersions';
+
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
+
+let React = require('react');
+let ReactDOM;
+let ReactDOMClient;
+let Scheduler;
+let utils;
+let assertLog;
+let waitFor;
+
+describe('Timeline profiler', () => {
+  describe('User Timing API', () => {
+    let currentlyNotClearedMarks;
+    let registeredMarks;
+    let featureDetectionMarkName = null;
+    let setPerformanceMock;
+
+    function createUserTimingPolyfill() {
+      featureDetectionMarkName = null;
+
+      currentlyNotClearedMarks = [];
+      registeredMarks = [];
+
+      // Remove file-system specific bits or version-specific bits of information from the module range marks.
+      function filterMarkData(markName) {
+        if (markName.startsWith('--react-internal-module-start')) {
+          return '--react-internal-module-start-  at filtered (<anonymous>:0:0)';
+        } else if (markName.startsWith('--react-internal-module-stop')) {
+          return '--react-internal-module-stop-  at filtered (<anonymous>:1:1)';
+        } else if (markName.startsWith('--react-version')) {
+          return '--react-version-<filtered-version>';
+        } else {
+          return markName;
+        }
+      }
+
+      // This is not a true polyfill, but it gives us enough to capture marks.
+      // Reference: https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API
+      return {
+        clearMarks(markName) {
+          markName = filterMarkData(markName);
+
+          currentlyNotClearedMarks = currentlyNotClearedMarks.filter(
+            mark => mark !== markName,
+          );
+        },
+        mark(markName, markOptions) {
+          markName = filterMarkData(markName);
+
+          if (featureDetectionMarkName === null) {
+            featureDetectionMarkName = markName;
+          }
+
+          registeredMarks.push(markName);
+          currentlyNotClearedMarks.push(markName);
+
+          if (markOptions != null) {
+            // This is triggers the feature detection.
+            markOptions.startTime++;
+          }
+        },
+      };
+    }
+
+    function eraseRegisteredMarks() {
+      registeredMarks.splice(0);
+    }
+
+    beforeEach(() => {
+      // Mock react/jsx-dev-runtime for React 16.x
+      // Although there are no tests in this suite which will run for React 16,
+      // Jest will report an error trying to resolve this dependency
+      if (semver.lt(ReactVersionTestingAgainst, '17.0.0')) {
+        jest.mock('react/jsx-dev-runtime', () => {});
+      }
+
+      utils = require('./utils');
+      utils.beforeEachProfiling();
+
+      React = require('react');
+      ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler');
+
+      if (typeof Scheduler.log !== 'function') {
+        // backwards compat for older scheduler versions
+        Scheduler.log = Scheduler.unstable_yieldValue;
+        Scheduler.unstable_clearLog = Scheduler.unstable_clearYields;
+        const InternalTestUtils = require('internal-test-utils');
+        assertLog = InternalTestUtils.assertLog;
+
+        // polyfill waitFor as Scheduler.toFlushAndYieldThrough
+        waitFor = expectedYields => {
+          let actualYields = Scheduler.unstable_clearYields();
+          if (actualYields.length !== 0) {
+            throw new Error(
+              'Log of yielded values is not empty. ' +
+                'Call expect(Scheduler).toHaveYielded(...) first.',
+            );
+          }
+          Scheduler.unstable_flushNumberOfYields(expectedYields.length);
+          actualYields = Scheduler.unstable_clearYields();
+          expect(actualYields).toEqual(expectedYields);
+        };
+      } else {
+        const InternalTestUtils = require('internal-test-utils');
+        assertLog = InternalTestUtils.assertLog;
+        waitFor = InternalTestUtils.waitFor;
+      }
+
+      setPerformanceMock =
+        require('react-devtools-shared/src/backend/profilingHooks').setPerformanceMock_ONLY_FOR_TESTING;
+      setPerformanceMock(createUserTimingPolyfill());
+
+      const store = global.store;
+
+      // Start profiling so that data will actually be recorded.
+      utils.act(() => store.profilerStore.startProfiling());
+
+      global.IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    afterEach(() => {
+      // Verify all logged marks also get cleared.
+      expect(currentlyNotClearedMarks).toHaveLength(0);
+
+      eraseRegisteredMarks();
+      setPerformanceMock(null);
+    });
+
+    const {render: legacyRender} = getLegacyRenderImplementation();
+
+    describe('getLanesFromTransportDecimalBitmask', () => {
+      let getLanesFromTransportDecimalBitmask;
+
+      beforeEach(() => {
+        getLanesFromTransportDecimalBitmask =
+          require('react-devtools-timeline/src/import-worker/preprocessData').getLanesFromTransportDecimalBitmask;
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should return array of lane numbers from bitmask string', () => {
+        expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
+        expect(getLanesFromTransportDecimalBitmask('512')).toEqual([9]);
+        expect(getLanesFromTransportDecimalBitmask('3')).toEqual([0, 1]);
+        expect(getLanesFromTransportDecimalBitmask('1234')).toEqual([
+          1, 4, 6, 7, 10,
+        ]); // 2 + 16 + 64 + 128 + 1024
+        expect(
+          getLanesFromTransportDecimalBitmask('1073741824'), // 0b1000000000000000000000000000000
+        ).toEqual([30]);
+        expect(
+          getLanesFromTransportDecimalBitmask('2147483647'), // 0b1111111111111111111111111111111
+        ).toEqual(Array.from(Array(31).keys()));
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should return empty array if laneBitmaskString is not a bitmask', () => {
+        expect(getLanesFromTransportDecimalBitmask('')).toEqual([]);
+        expect(getLanesFromTransportDecimalBitmask('hello')).toEqual([]);
+        expect(getLanesFromTransportDecimalBitmask('-1')).toEqual([]);
+        expect(getLanesFromTransportDecimalBitmask('-0')).toEqual([]);
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should ignore lanes outside REACT_TOTAL_NUM_LANES', () => {
+        const REACT_TOTAL_NUM_LANES =
+          require('react-devtools-timeline/src/constants').REACT_TOTAL_NUM_LANES;
+
+        // Sanity check; this test may need to be updated when the no. of fiber lanes are changed.
+        expect(REACT_TOTAL_NUM_LANES).toBe(31);
+
+        expect(
+          getLanesFromTransportDecimalBitmask(
+            '4294967297', // 2^32 + 1
+          ),
+        ).toEqual([0]);
+      });
+    });
+
+    describe('preprocessData', () => {
+      let preprocessData;
+
+      beforeEach(() => {
+        preprocessData =
+          require('react-devtools-timeline/src/import-worker/preprocessData').default;
+      });
+
+      // These should be dynamic to mimic a real profile,
+      // but reprooducible between test runs.
+      let pid = 0;
+      let tid = 0;
+      let startTime = 0;
+
+      function createUserTimingEntry(data) {
+        return {
+          pid: ++pid,
+          tid: ++tid,
+          ts: ++startTime,
+          ...data,
+        };
+      }
+
+      function createProfilerVersionEntry() {
+        const SCHEDULING_PROFILER_VERSION =
+          require('react-devtools-timeline/src/constants').SCHEDULING_PROFILER_VERSION;
+        return createUserTimingEntry({
+          cat: 'blink.user_timing',
+          name: '--profiler-version-' + SCHEDULING_PROFILER_VERSION,
+        });
+      }
+
+      function createReactVersionEntry() {
+        return createUserTimingEntry({
+          cat: 'blink.user_timing',
+          name: '--react-version-<filtered-version>',
+        });
+      }
+
+      function createLaneLabelsEntry() {
+        return createUserTimingEntry({
+          cat: 'blink.user_timing',
+          name: '--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen',
+        });
+      }
+
+      function createNativeEventEntry(type, duration) {
+        return createUserTimingEntry({
+          cat: 'devtools.timeline',
+          name: 'EventDispatch',
+          args: {data: {type}},
+          dur: duration,
+          tdur: duration,
+        });
+      }
+
+      function creactCpuProfilerSample() {
+        return createUserTimingEntry({
+          args: {data: {startTime: ++startTime}},
+          cat: 'disabled-by-default-v8.cpu_profiler',
+          id: '0x1',
+          name: 'Profile',
+          ph: 'P',
+        });
+      }
+
+      function createBoilerplateEntries() {
+        return [
+          createProfilerVersionEntry(),
+          createReactVersionEntry(),
+          createLaneLabelsEntry(),
+        ];
+      }
+
+      function createUserTimingData(sampleMarks) {
+        const cpuProfilerSample = creactCpuProfilerSample();
+
+        const randomSample = createUserTimingEntry({
+          dur: 100,
+          tdur: 200,
+          ph: 'X',
+          cat: 'disabled-by-default-devtools.timeline',
+          name: 'RunTask',
+          args: {},
+        });
+
+        const userTimingData = [cpuProfilerSample, randomSample];
+
+        sampleMarks.forEach(markName => {
+          userTimingData.push({
+            pid: ++pid,
+            tid: ++tid,
+            ts: ++startTime,
+            args: {data: {}},
+            cat: 'blink.user_timing',
+            name: markName,
+            ph: 'R',
+          });
+        });
+
+        return userTimingData;
+      }
+
+      beforeEach(() => {
+        tid = 0;
+        pid = 0;
+        startTime = 0;
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should throw given an empty timeline', async () => {
+        await expect(async () => preprocessData([])).rejects.toThrow();
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should throw given a timeline with no Profile event', async () => {
+        const randomSample = createUserTimingEntry({
+          dur: 100,
+          tdur: 200,
+          ph: 'X',
+          cat: 'disabled-by-default-devtools.timeline',
+          name: 'RunTask',
+          args: {},
+        });
+
+        await expect(async () =>
+          preprocessData([randomSample]),
+        ).rejects.toThrow();
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should throw given a timeline without an explicit profiler version mark nor any other React marks', async () => {
+        const cpuProfilerSample = creactCpuProfilerSample();
+
+        await expect(
+          async () => await preprocessData([cpuProfilerSample]),
+        ).rejects.toThrow(
+          'Please provide profiling data from an React application',
+        );
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should throw given a timeline with React scheduling marks, but without an explicit profiler version mark', async () => {
+        const cpuProfilerSample = creactCpuProfilerSample();
+        const scheduleRenderSample = createUserTimingEntry({
+          cat: 'blink.user_timing',
+          name: '--schedule-render-512-',
+        });
+        const samples = [cpuProfilerSample, scheduleRenderSample];
+
+        await expect(async () => await preprocessData(samples)).rejects.toThrow(
+          'This version of profiling data is not supported',
+        );
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should return empty data given a timeline with no React scheduling profiling marks', async () => {
+        const cpuProfilerSample = creactCpuProfilerSample();
+        const randomSample = createUserTimingEntry({
+          dur: 100,
+          tdur: 200,
+          ph: 'X',
+          cat: 'disabled-by-default-devtools.timeline',
+          name: 'RunTask',
+          args: {},
+        });
+
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          cpuProfilerSample,
+          randomSample,
+        ]);
+        expect(data).toMatchInlineSnapshot(`
+                {
+                  "batchUIDToMeasuresMap": Map {},
+                  "componentMeasures": [],
+                  "duration": 0.005,
+                  "flamechart": [],
+                  "internalModuleSourceToRanges": Map {},
+                  "laneToLabelMap": Map {
+                    0 => "Sync",
+                    1 => "InputContinuousHydration",
+                    2 => "InputContinuous",
+                    3 => "DefaultHydration",
+                    4 => "Default",
+                    5 => "TransitionHydration",
+                    6 => "Transition",
+                    7 => "Transition",
+                    8 => "Transition",
+                    9 => "Transition",
+                    10 => "Transition",
+                    11 => "Transition",
+                    12 => "Transition",
+                    13 => "Transition",
+                    14 => "Transition",
+                    15 => "Transition",
+                    16 => "Transition",
+                    17 => "Transition",
+                    18 => "Transition",
+                    19 => "Transition",
+                    20 => "Transition",
+                    21 => "Transition",
+                    22 => "Retry",
+                    23 => "Retry",
+                    24 => "Retry",
+                    25 => "Retry",
+                    26 => "Retry",
+                    27 => "SelectiveHydration",
+                    28 => "IdleHydration",
+                    29 => "Idle",
+                    30 => "Offscreen",
+                  },
+                  "laneToReactMeasureMap": Map {
+                    0 => [],
+                    1 => [],
+                    2 => [],
+                    3 => [],
+                    4 => [],
+                    5 => [],
+                    6 => [],
+                    7 => [],
+                    8 => [],
+                    9 => [],
+                    10 => [],
+                    11 => [],
+                    12 => [],
+                    13 => [],
+                    14 => [],
+                    15 => [],
+                    16 => [],
+                    17 => [],
+                    18 => [],
+                    19 => [],
+                    20 => [],
+                    21 => [],
+                    22 => [],
+                    23 => [],
+                    24 => [],
+                    25 => [],
+                    26 => [],
+                    27 => [],
+                    28 => [],
+                    29 => [],
+                    30 => [],
+                  },
+                  "nativeEvents": [],
+                  "networkMeasures": [],
+                  "otherUserTimingMarks": [],
+                  "reactVersion": "<filtered-version>",
+                  "schedulingEvents": [],
+                  "snapshotHeight": 0,
+                  "snapshots": [],
+                  "startTime": 1,
+                  "suspenseEvents": [],
+                  "thrownErrors": [],
+                }
+          `);
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should process legacy data format (before lane labels were added)', async () => {
+        const cpuProfilerSample = creactCpuProfilerSample();
+
+        // Data below is hard-coded based on an older profile sample.
+        // Should be fine since this is explicitly a legacy-format test.
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          cpuProfilerSample,
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--schedule-render-512-',
+          }),
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--render-start-512',
+          }),
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--render-stop',
+          }),
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--commit-start-512',
+          }),
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--layout-effects-start-512',
+          }),
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--layout-effects-stop',
+          }),
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--commit-stop',
+          }),
+        ]);
+        expect(data).toMatchInlineSnapshot(`
+          {
+            "batchUIDToMeasuresMap": Map {
+              0 => [
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.005,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.009,
+                  "type": "layout-effects",
+                },
+              ],
+            },
+            "componentMeasures": [],
+            "duration": 0.011,
+            "flamechart": [],
+            "internalModuleSourceToRanges": Map {},
+            "laneToLabelMap": Map {
+              0 => "Sync",
+              1 => "InputContinuousHydration",
+              2 => "InputContinuous",
+              3 => "DefaultHydration",
+              4 => "Default",
+              5 => "TransitionHydration",
+              6 => "Transition",
+              7 => "Transition",
+              8 => "Transition",
+              9 => "Transition",
+              10 => "Transition",
+              11 => "Transition",
+              12 => "Transition",
+              13 => "Transition",
+              14 => "Transition",
+              15 => "Transition",
+              16 => "Transition",
+              17 => "Transition",
+              18 => "Transition",
+              19 => "Transition",
+              20 => "Transition",
+              21 => "Transition",
+              22 => "Retry",
+              23 => "Retry",
+              24 => "Retry",
+              25 => "Retry",
+              26 => "Retry",
+              27 => "SelectiveHydration",
+              28 => "IdleHydration",
+              29 => "Idle",
+              30 => "Offscreen",
+            },
+            "laneToReactMeasureMap": Map {
+              0 => [],
+              1 => [],
+              2 => [],
+              3 => [],
+              4 => [],
+              5 => [],
+              6 => [],
+              7 => [],
+              8 => [],
+              9 => [
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.005,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.009,
+                  "type": "layout-effects",
+                },
+              ],
+              10 => [],
+              11 => [],
+              12 => [],
+              13 => [],
+              14 => [],
+              15 => [],
+              16 => [],
+              17 => [],
+              18 => [],
+              19 => [],
+              20 => [],
+              21 => [],
+              22 => [],
+              23 => [],
+              24 => [],
+              25 => [],
+              26 => [],
+              27 => [],
+              28 => [],
+              29 => [],
+              30 => [],
+            },
+            "nativeEvents": [],
+            "networkMeasures": [],
+            "otherUserTimingMarks": [],
+            "reactVersion": "<filtered-version>",
+            "schedulingEvents": [
+              {
+                "lanes": "0b0000000000000000000000000001001",
+                "timestamp": 0.005,
+                "type": "schedule-render",
+                "warning": null,
+              },
+            ],
+            "snapshotHeight": 0,
+            "snapshots": [],
+            "startTime": 1,
+            "suspenseEvents": [],
+            "thrownErrors": [],
+          }
+        `);
+      });
+
+      // @reactVersion <= 18.2
+      // @reactVersion >= 18.0
+      it('should process a sample legacy render sequence', async () => {
+        legacyRender(<div />);
+
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          ...createUserTimingData(registeredMarks),
+        ]);
+        expect(data).toMatchInlineSnapshot(`
+          {
+            "batchUIDToMeasuresMap": Map {
+              0 => [
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.01,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.014,
+                  "type": "layout-effects",
+                },
+              ],
+            },
+            "componentMeasures": [],
+            "duration": 0.016,
+            "flamechart": [],
+            "internalModuleSourceToRanges": Map {
+              undefined => [
+                [
+                  {
+                    "columnNumber": 0,
+                    "functionName": "filtered",
+                    "lineNumber": 0,
+                    "source": "  at filtered (<anonymous>:0:0)",
+                  },
+                  {
+                    "columnNumber": 1,
+                    "functionName": "filtered",
+                    "lineNumber": 1,
+                    "source": "  at filtered (<anonymous>:1:1)",
+                  },
+                ],
+              ],
+            },
+            "laneToLabelMap": Map {
+              0 => "Sync",
+              1 => "InputContinuousHydration",
+              2 => "InputContinuous",
+              3 => "DefaultHydration",
+              4 => "Default",
+              5 => "TransitionHydration",
+              6 => "Transition",
+              7 => "Transition",
+              8 => "Transition",
+              9 => "Transition",
+              10 => "Transition",
+              11 => "Transition",
+              12 => "Transition",
+              13 => "Transition",
+              14 => "Transition",
+              15 => "Transition",
+              16 => "Transition",
+              17 => "Transition",
+              18 => "Transition",
+              19 => "Transition",
+              20 => "Transition",
+              21 => "Transition",
+              22 => "Retry",
+              23 => "Retry",
+              24 => "Retry",
+              25 => "Retry",
+              26 => "Retry",
+              27 => "SelectiveHydration",
+              28 => "IdleHydration",
+              29 => "Idle",
+              30 => "Offscreen",
+            },
+            "laneToReactMeasureMap": Map {
+              0 => [
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.01,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.014,
+                  "type": "layout-effects",
+                },
+              ],
+              1 => [],
+              2 => [],
+              3 => [],
+              4 => [],
+              5 => [],
+              6 => [],
+              7 => [],
+              8 => [],
+              9 => [],
+              10 => [],
+              11 => [],
+              12 => [],
+              13 => [],
+              14 => [],
+              15 => [],
+              16 => [],
+              17 => [],
+              18 => [],
+              19 => [],
+              20 => [],
+              21 => [],
+              22 => [],
+              23 => [],
+              24 => [],
+              25 => [],
+              26 => [],
+              27 => [],
+              28 => [],
+              29 => [],
+              30 => [],
+            },
+            "nativeEvents": [],
+            "networkMeasures": [],
+            "otherUserTimingMarks": [],
+            "reactVersion": "<filtered-version>",
+            "schedulingEvents": [
+              {
+                "lanes": "0b0000000000000000000000000000000",
+                "timestamp": 0.005,
+                "type": "schedule-render",
+                "warning": null,
+              },
+            ],
+            "snapshotHeight": 0,
+            "snapshots": [],
+            "startTime": 4,
+            "suspenseEvents": [],
+            "thrownErrors": [],
+          }
+        `);
+      });
+
+      // @reactVersion >= 19.1
+      // @reactVersion < 19.2
+      it('should process a sample createRoot render sequence', async () => {
+        function App() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useEffect(() => {
+            if (!didMount) {
+              setDidMount(true);
+            }
+          });
+          return true;
+        }
+
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
+        utils.act(() => root.render(<App />));
+
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          ...createUserTimingData(registeredMarks),
+        ]);
+        expect(data).toMatchInlineSnapshot(`
+          {
+            "batchUIDToMeasuresMap": Map {
+              0 => [
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.008,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.008,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.012,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.004,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.021,
+                  "type": "passive-effects",
+                },
+              ],
+              1 => [
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.026,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.026,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.03,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.039,
+                  "type": "passive-effects",
+                },
+              ],
+            },
+            "componentMeasures": [
+              {
+                "componentName": "App",
+                "duration": 0.001,
+                "timestamp": 0.009,
+                "type": "render",
+                "warning": null,
+              },
+              {
+                "componentName": "App",
+                "duration": 0.002,
+                "timestamp": 0.022,
+                "type": "passive-effect-mount",
+                "warning": null,
+              },
+              {
+                "componentName": "App",
+                "duration": 0.001,
+                "timestamp": 0.027,
+                "type": "render",
+                "warning": null,
+              },
+              {
+                "componentName": "App",
+                "duration": 0.001,
+                "timestamp": 0.04,
+                "type": "passive-effect-mount",
+                "warning": null,
+              },
+            ],
+            "duration": 0.042,
+            "flamechart": [],
+            "internalModuleSourceToRanges": Map {
+              undefined => [
+                [
+                  {
+                    "columnNumber": 0,
+                    "functionName": "filtered",
+                    "lineNumber": 0,
+                    "source": "  at filtered (<anonymous>:0:0)",
+                  },
+                  {
+                    "columnNumber": 1,
+                    "functionName": "filtered",
+                    "lineNumber": 1,
+                    "source": "  at filtered (<anonymous>:1:1)",
+                  },
+                ],
+              ],
+            },
+            "laneToLabelMap": Map {
+              0 => "Sync",
+              1 => "InputContinuousHydration",
+              2 => "InputContinuous",
+              3 => "DefaultHydration",
+              4 => "Default",
+              5 => "TransitionHydration",
+              6 => "Transition",
+              7 => "Transition",
+              8 => "Transition",
+              9 => "Transition",
+              10 => "Transition",
+              11 => "Transition",
+              12 => "Transition",
+              13 => "Transition",
+              14 => "Transition",
+              15 => "Transition",
+              16 => "Transition",
+              17 => "Transition",
+              18 => "Transition",
+              19 => "Transition",
+              20 => "Transition",
+              21 => "Transition",
+              22 => "Retry",
+              23 => "Retry",
+              24 => "Retry",
+              25 => "Retry",
+              26 => "Retry",
+              27 => "SelectiveHydration",
+              28 => "IdleHydration",
+              29 => "Idle",
+              30 => "Offscreen",
+            },
+            "laneToReactMeasureMap": Map {
+              0 => [],
+              1 => [],
+              2 => [],
+              3 => [],
+              4 => [],
+              5 => [
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.008,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.008,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.012,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.004,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.021,
+                  "type": "passive-effects",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.026,
+                  "type": "render-idle",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.026,
+                  "type": "render",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.03,
+                  "type": "commit",
+                },
+                {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000101",
+                  "timestamp": 0.039,
+                  "type": "passive-effects",
+                },
+              ],
+              6 => [],
+              7 => [],
+              8 => [],
+              9 => [],
+              10 => [],
+              11 => [],
+              12 => [],
+              13 => [],
+              14 => [],
+              15 => [],
+              16 => [],
+              17 => [],
+              18 => [],
+              19 => [],
+              20 => [],
+              21 => [],
+              22 => [],
+              23 => [],
+              24 => [],
+              25 => [],
+              26 => [],
+              27 => [],
+              28 => [],
+              29 => [],
+              30 => [],
+            },
+            "nativeEvents": [],
+            "networkMeasures": [],
+            "otherUserTimingMarks": [],
+            "reactVersion": "<filtered-version>",
+            "schedulingEvents": [
+              {
+                "lanes": "0b0000000000000000000000000000101",
+                "timestamp": 0.007,
+                "type": "schedule-render",
+                "warning": null,
+              },
+              {
+                "componentName": "App",
+                "lanes": "0b0000000000000000000000000000101",
+                "timestamp": 0.023,
+                "type": "schedule-state-update",
+                "warning": null,
+              },
+            ],
+            "snapshotHeight": 0,
+            "snapshots": [],
+            "startTime": 4,
+            "suspenseEvents": [],
+            "thrownErrors": [],
+          }
+        `);
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion <= 18.2
+      it('should error if events and measures are incomplete', async () => {
+        legacyRender(<div />);
+
+        const invalidMarks = registeredMarks.filter(
+          mark => !mark.includes('render-stop'),
+        );
+        const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+        const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+        preprocessData([
+          ...createBoilerplateEntries(),
+          ...invalidUserTimingData,
+        ]);
+        expect(error).toHaveBeenCalled();
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion <= 18.2
+      it('should error if work is completed without being started', async () => {
+        legacyRender(<div />);
+
+        const invalidMarks = registeredMarks.filter(
+          mark => !mark.includes('render-start'),
+        );
+        const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+        const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+        preprocessData([
+          ...createBoilerplateEntries(),
+          ...invalidUserTimingData,
+        ]);
+        expect(error).toHaveBeenCalled();
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should populate other user timing marks', async () => {
+        const userTimingData = createUserTimingData([]);
+        userTimingData.push(
+          createUserTimingEntry({
+            args: {},
+            cat: 'blink.user_timing',
+            id: '0xcdf75f7c',
+            name: 'VCWithoutImage: root',
+            ph: 'n',
+            scope: 'blink.user_timing',
+          }),
+        );
+        userTimingData.push(
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: '--a-mark-that-looks-like-one-of-ours',
+            ph: 'R',
+          }),
+        );
+        userTimingData.push(
+          createUserTimingEntry({
+            cat: 'blink.user_timing',
+            name: 'Some other mark',
+            ph: 'R',
+          }),
+        );
+
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          ...userTimingData,
+        ]);
+        expect(data.otherUserTimingMarks).toMatchInlineSnapshot(`
+                [
+                  {
+                    "name": "VCWithoutImage: root",
+                    "timestamp": 0.003,
+                  },
+                  {
+                    "name": "--a-mark-that-looks-like-one-of-ours",
+                    "timestamp": 0.004,
+                  },
+                  {
+                    "name": "Some other mark",
+                    "timestamp": 0.005,
+                  },
+                ]
+          `);
+      });
+
+      // @reactVersion >= 18.0
+      // @reactVersion < 19.2
+      it('should include a suspended resource "displayName" if one is set', async () => {
+        let promise = null;
+        let resolvedValue = null;
+        function readValue(value) {
+          if (React.use) {
+            if (promise === null) {
+              promise = Promise.resolve(true).then(() => {
+                return value;
+              });
+              promise.displayName = 'Testing displayName';
+            }
+            return React.use(promise);
+          }
+          if (resolvedValue !== null) {
+            return resolvedValue;
+          } else if (promise === null) {
+            promise = Promise.resolve(true).then(() => {
+              resolvedValue = value;
+            });
+            promise.displayName = 'Testing displayName';
+          }
+          throw promise;
+        }
+
+        function Component() {
+          const value = readValue(123);
+          return value;
+        }
+
+        const testMarks = [creactCpuProfilerSample()];
+
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
+        await utils.actAsync(() =>
+          root.render(
+            <React.Suspense fallback="Loading...">
+              <Component />
+            </React.Suspense>,
+          ),
+        );
+
+        testMarks.push(...createUserTimingData(registeredMarks));
+
+        let data;
+        await utils.actAsync(async () => {
+          data = await preprocessData(testMarks);
+        });
+        expect(data.suspenseEvents).toHaveLength(1);
+        expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
+      });
+
+      describe('warnings', () => {
+        describe('long event handlers', () => {
+          // @reactVersion >= 18.0
+          // @reactVersion <= 18.2
+          it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
+            function App() {
+              return null;
+            }
+
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+              createNativeEventEntry('click', 5),
+            ];
+
+            eraseRegisteredMarks();
+            legacyRender(<App />);
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toBe(null);
+          });
+
+          // @reactVersion >= 18.0
+          // @reactVersion <= 18.2
+          it('should not warn about long events if the cause was non-React JavaScript', async () => {
+            function App() {
+              return null;
+            }
+
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+              createNativeEventEntry('click', 25000),
+            ];
+
+            startTime += 2000;
+
+            eraseRegisteredMarks();
+            legacyRender(<App />);
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toBe(null);
+          });
+
+          // @reactVersion >= 18.0
+          // @reactVersion <= 18.2
+          it('should warn when React scedules a long (sync) update inside of an event', async () => {
+            function App() {
+              return null;
+            }
+
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+              createNativeEventEntry('click', 25000),
+            ];
+
+            eraseRegisteredMarks();
+            legacyRender(<App />);
+
+            registeredMarks.forEach(markName => {
+              if (markName === '--render-stop') {
+                // Fake a long running render
+                startTime += 20000;
+              }
+
+              testMarks.push({
+                pid: ++pid,
+                tid: ++tid,
+                ts: ++startTime,
+                args: {data: {}},
+                cat: 'blink.user_timing',
+                name: markName,
+                ph: 'R',
+              });
+            });
+
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toMatchInlineSnapshot(
+              `"An event handler scheduled a big update with React. Consider using the Transition API to defer some of this work."`,
+            );
+          });
+
+          // @reactVersion >= 18.2
+          // @reactVersion < 19.2
+          it('should not warn when React finishes a previously long (async) update with a short (sync) update inside of an event', async () => {
+            function Yield({id, value}) {
+              Scheduler.log(`${id}:${value}`);
+              return null;
+            }
+
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+            ];
+
+            // Advance the clock by some arbitrary amount.
+            startTime += 50000;
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+
+            // Temporarily turn off the act environment, since we're intentionally using Scheduler instead.
+            global.IS_REACT_ACT_ENVIRONMENT = false;
+            React.startTransition(() => {
+              // Start rendering an async update (but don't finish).
+              root.render(
+                <>
+                  <Yield id="A" value={1} />
+                  <Yield id="B" value={1} />
+                </>,
+              );
+            });
+
+            await waitFor(['A:1']);
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+            eraseRegisteredMarks();
+
+            // Advance the clock some more to make the pending React update seem long.
+            startTime += 20000;
+
+            // Fake a long "click" event in the middle
+            // and schedule a sync update that will also flush the previous work.
+            testMarks.push(createNativeEventEntry('click', 25000));
+            ReactDOM.flushSync(() => {
+              root.render(
+                <>
+                  <Yield id="A" value={2} />
+                  <Yield id="B" value={2} />
+                </>,
+              );
+            });
+
+            assertLog(['A:2', 'B:2']);
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toBe(null);
+          });
+        });
+
+        describe('nested updates', () => {
+          // @reactVersion >= 18.2
+          // @reactVersion < 19.2
+          it('should not warn about short nested (state) updates during layout effects', async () => {
+            function Component() {
+              const [didMount, setDidMount] = React.useState(false);
+              Scheduler.log(`Component ${didMount ? 'update' : 'mount'}`);
+              React.useLayoutEffect(() => {
+                setDidMount(true);
+              }, []);
+              return didMount;
+            }
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            assertLog(['Component mount', 'Component update']);
+
+            const data = await preprocessData([
+              ...createBoilerplateEntries(),
+              ...createUserTimingData(registeredMarks),
+            ]);
+
+            const event = data.schedulingEvents.find(
+              ({type}) => type === 'schedule-state-update',
+            );
+            expect(event.warning).toBe(null);
+          });
+
+          // @reactVersion >= 18.2
+          // @reactVersion < 19.2
+          it('should not warn about short (forced) updates during layout effects', async () => {
+            class Component extends React.Component {
+              _didMount: boolean = false;
+              componentDidMount() {
+                this._didMount = true;
+                this.forceUpdate();
+              }
+              render() {
+                Scheduler.log(
+                  `Component ${this._didMount ? 'update' : 'mount'}`,
+                );
+                return null;
+              }
+            }
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            assertLog(['Component mount', 'Component update']);
+
+            const data = await preprocessData([
+              ...createBoilerplateEntries(),
+              ...createUserTimingData(registeredMarks),
+            ]);
+
+            const event = data.schedulingEvents.find(
+              ({type}) => type === 'schedule-force-update',
+            );
+            expect(event.warning).toBe(null);
+          });
+
+          // This is temporarily disabled because the warning doesn't work
+          // with useDeferredValue
+          // eslint-disable-next-line jest/no-disabled-tests
+          it.skip('should warn about long nested (state) updates during layout effects', async () => {
+            function Component() {
+              const [didMount, setDidMount] = React.useState(false);
+              Scheduler.log(`Component ${didMount ? 'update' : 'mount'}`);
+              // Fake a long render
+              startTime += 20000;
+              React.useLayoutEffect(() => {
+                setDidMount(true);
+              }, []);
+              return didMount;
+            }
+
+            const cpuProfilerSample = creactCpuProfilerSample();
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            assertLog(['Component mount', 'Component update']);
+
+            const testMarks = [];
+            registeredMarks.forEach(markName => {
+              if (markName === '--component-render-start-Component') {
+                // Fake a long running render
+                startTime += 20000;
+              }
+
+              testMarks.push({
+                pid: ++pid,
+                tid: ++tid,
+                ts: ++startTime,
+                args: {data: {}},
+                cat: 'blink.user_timing',
+                name: markName,
+                ph: 'R',
+              });
+            });
+
+            const data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
+
+            const event = data.schedulingEvents.find(
+              ({type}) => type === 'schedule-state-update',
+            );
+            expect(event.warning).toMatchInlineSnapshot(
+              `"A big nested update was scheduled during layout. Nested updates require React to re-render synchronously before the browser can paint. Consider delaying this update by moving it to a passive effect (useEffect)."`,
+            );
+          });
+
+          // This is temporarily disabled because the warning doesn't work
+          // with useDeferredValue
+          // eslint-disable-next-line jest/no-disabled-tests
+          it.skip('should warn about long nested (forced) updates during layout effects', async () => {
+            class Component extends React.Component {
+              _didMount: boolean = false;
+              componentDidMount() {
+                this._didMount = true;
+                this.forceUpdate();
+              }
+              render() {
+                Scheduler.log(
+                  `Component ${this._didMount ? 'update' : 'mount'}`,
+                );
+                return null;
+              }
+            }
+
+            const cpuProfilerSample = creactCpuProfilerSample();
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            assertLog(['Component mount', 'Component update']);
+
+            const testMarks = [];
+            registeredMarks.forEach(markName => {
+              if (markName === '--component-render-start-Component') {
+                // Fake a long running render
+                startTime += 20000;
+              }
+
+              testMarks.push({
+                pid: ++pid,
+                tid: ++tid,
+                ts: ++startTime,
+                args: {data: {}},
+                cat: 'blink.user_timing',
+                name: markName,
+                ph: 'R',
+              });
+            });
+
+            const data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
+
+            const event = data.schedulingEvents.find(
+              ({type}) => type === 'schedule-force-update',
+            );
+            expect(event.warning).toMatchInlineSnapshot(
+              `"A big nested update was scheduled during layout. Nested updates require React to re-render synchronously before the browser can paint. Consider delaying this update by moving it to a passive effect (useEffect)."`,
+            );
+          });
+
+          // @reactVersion >= 18.2
+          // @reactVersion < 19.2
+          it('should not warn about transition updates scheduled during commit phase', async () => {
+            function Component() {
+              const [value, setValue] = React.useState(0);
+              // eslint-disable-next-line no-unused-vars
+              const [isPending, startTransition] = React.useTransition();
+
+              Scheduler.log(`Component rendered with value ${value}`);
+
+              // Fake a long render
+              if (value !== 0) {
+                Scheduler.log('Long render');
+                startTime += 20000;
+              }
+
+              React.useLayoutEffect(() => {
+                startTransition(() => {
+                  setValue(1);
+                });
+              }, []);
+
+              return value;
+            }
+
+            const cpuProfilerSample = creactCpuProfilerSample();
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            assertLog([
+              'Component rendered with value 0',
+              'Component rendered with value 0',
+              'Component rendered with value 1',
+              'Long render',
+            ]);
+
+            const testMarks = [];
+            registeredMarks.forEach(markName => {
+              if (markName === '--component-render-start-Component') {
+                // Fake a long running render
+                startTime += 20000;
+              }
+
+              testMarks.push({
+                pid: ++pid,
+                tid: ++tid,
+                ts: ++startTime,
+                args: {data: {}},
+                cat: 'blink.user_timing',
+                name: markName,
+                ph: 'R',
+              });
+            });
+
+            const data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
+
+            data.schedulingEvents.forEach(event => {
+              expect(event.warning).toBeNull();
+            });
+          });
+
+          // This is temporarily disabled because the warning doesn't work
+          // with useDeferredValue
+          // eslint-disable-next-line jest/no-disabled-tests
+          it.skip('should not warn about deferred value updates scheduled during commit phase', async () => {
+            function Component() {
+              const [value, setValue] = React.useState(0);
+              const deferredValue = React.useDeferredValue(value);
+
+              Scheduler.log(
+                `Component rendered with value ${value} and deferredValue ${deferredValue}`,
+              );
+
+              // Fake a long render
+              if (deferredValue !== 0) {
+                Scheduler.log('Long render');
+                startTime += 20000;
+              }
+
+              React.useLayoutEffect(() => {
+                setValue(1);
+              }, []);
+
+              return value + deferredValue;
+            }
+
+            const cpuProfilerSample = creactCpuProfilerSample();
+
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            assertLog([
+              'Component rendered with value 0 and deferredValue 0',
+              'Component rendered with value 1 and deferredValue 0',
+              'Component rendered with value 1 and deferredValue 1',
+              'Long render',
+            ]);
+
+            const testMarks = [];
+            registeredMarks.forEach(markName => {
+              if (markName === '--component-render-start-Component') {
+                // Fake a long running render
+                startTime += 20000;
+              }
+
+              testMarks.push({
+                pid: ++pid,
+                tid: ++tid,
+                ts: ++startTime,
+                args: {data: {}},
+                cat: 'blink.user_timing',
+                name: markName,
+                ph: 'R',
+              });
+            });
+
+            const data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
+
+            data.schedulingEvents.forEach(event => {
+              expect(event.warning).toBeNull();
+            });
+          });
+        });
+
+        describe('errors thrown while rendering', () => {
+          // @reactVersion >= 18.0
+          // @reactVersion < 19.2
+          it('shoult parse Errors thrown during render', async () => {
+            jest.spyOn(console, 'error');
+
+            class ErrorBoundary extends React.Component {
+              state = {error: null};
+              componentDidCatch(error) {
+                this.setState({error});
+              }
+              render() {
+                if (this.state.error) {
+                  return null;
+                }
+                return this.props.children;
+              }
+            }
+
+            function ExampleThatThrows() {
+              throw Error('Expected error');
+            }
+
+            const testMarks = [creactCpuProfilerSample()];
+
+            // Mount and commit the app
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() =>
+              root.render(
+                <ErrorBoundary>
+                  <ExampleThatThrows />
+                </ErrorBoundary>,
+              ),
+            );
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+
+            const data = await preprocessData(testMarks);
+            expect(data.thrownErrors).toHaveLength(2);
+            expect(data.thrownErrors[0].message).toMatchInlineSnapshot(
+              '"Expected error"',
+            );
+          });
+        });
+
+        describe('suspend during an update', () => {
+          // This also tests an edge case where a component suspends while profiling
+          // before the first commit is logged (so the lane-to-labels map will not yet exist).
+          // @reactVersion >= 18.2
+          // @reactVersion < 19.2
+          it('should warn about suspending during an update', async () => {
+            let promise = null;
+            let resolvedValue = null;
+            function readValue(value) {
+              if (React.use) {
+                if (promise === null) {
+                  promise = Promise.resolve(true).then(() => {
+                    return value;
+                  });
+                }
+                return React.use(promise);
+              }
+              if (resolvedValue !== null) {
+                return resolvedValue;
+              } else if (promise === null) {
+                promise = Promise.resolve(true).then(() => {
+                  resolvedValue = value;
+                });
+              }
+              throw promise;
+            }
+
+            function Component({shouldSuspend}) {
+              Scheduler.log(`Component ${shouldSuspend}`);
+              if (shouldSuspend) {
+                readValue(123);
+              }
+              return null;
+            }
+
+            // Mount and commit the app
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() =>
+              root.render(
+                <React.Suspense fallback="Loading...">
+                  <Component shouldSuspend={false} />
+                </React.Suspense>,
+              ),
+            );
+
+            const testMarks = [creactCpuProfilerSample()];
+
+            // Start profiling and suspend during a render.
+            utils.act(() =>
+              root.render(
+                <React.Suspense fallback="Loading...">
+                  <Component shouldSuspend={true} />
+                </React.Suspense>,
+              ),
+            );
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+
+            let data;
+            await utils.actAsync(async () => {
+              data = await preprocessData(testMarks);
+            });
+            expect(data.suspenseEvents).toHaveLength(1);
+            expect(data.suspenseEvents[0].warning).toMatchInlineSnapshot(
+              `"A component suspended during an update which caused a fallback to be shown. Consider using the Transition API to avoid hiding components after they've been mounted."`,
+            );
+          });
+
+          // @reactVersion >= 18.2
+          // @reactVersion < 19.2
+          it('should not warn about suspending during an transition', async () => {
+            let promise = null;
+            let resolvedValue = null;
+            function readValue(value) {
+              if (React.use) {
+                if (promise === null) {
+                  promise = Promise.resolve(true).then(() => {
+                    return value;
+                  });
+                }
+                return React.use(promise);
+              }
+              if (resolvedValue !== null) {
+                return resolvedValue;
+              } else if (promise === null) {
+                promise = Promise.resolve(true).then(() => {
+                  resolvedValue = value;
+                });
+              }
+              throw promise;
+            }
+
+            function Component({shouldSuspend}) {
+              Scheduler.log(`Component ${shouldSuspend}`);
+              if (shouldSuspend) {
+                readValue(123);
+              }
+              return null;
+            }
+
+            // Mount and commit the app
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            utils.act(() =>
+              root.render(
+                <React.Suspense fallback="Loading...">
+                  <Component shouldSuspend={false} />
+                </React.Suspense>,
+              ),
+            );
+
+            const testMarks = [creactCpuProfilerSample()];
+
+            // Start profiling and suspend during a render.
+            await utils.actAsync(async () =>
+              React.startTransition(() =>
+                root.render(
+                  <React.Suspense fallback="Loading...">
+                    <Component shouldSuspend={true} />
+                  </React.Suspense>,
+                ),
+              ),
+            );
+
+            testMarks.push(...createUserTimingData(registeredMarks));
+
+            let data;
+            await utils.actAsync(async () => {
+              data = await preprocessData(testMarks);
+            });
+            expect(data.suspenseEvents).toHaveLength(1);
+            expect(data.suspenseEvents[0].warning).toBe(null);
+          });
+        });
+      });
+
+      // TODO: Add test for snapshot base64 parsing
+
+      // TODO: Add test for flamechart parsing
+    });
+  });
+
+  // Note the in-memory tests vary slightly (e.g. timestamp values, lane numbers) from the above tests.
+  // That's okay; the important thing is the lane-to-label matches the subsequent events/measures.
+  describe('DevTools hook (in memory)', () => {
+    let store;
+
+    beforeEach(() => {
+      utils = require('./utils');
+      utils.beforeEachProfiling();
+
+      React = require('react');
+      ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler');
+
+      store = global.store;
+
+      // Start profiling so that data will actually be recorded.
+      utils.act(() => store.profilerStore.startProfiling());
+
+      global.IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    const {render: legacyRender} = getLegacyRenderImplementation();
+
+    // @reactVersion <= 18.2
+    // @reactVersion >= 18.0
+    it('should process a sample legacy render sequence', async () => {
+      legacyRender(<div />);
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const data = store.profilerStore.profilingData?.timelineData;
+      expect(data).toHaveLength(1);
+      const timelineData = data[0];
+      expect(timelineData).toMatchInlineSnapshot(`
+        {
+          "batchUIDToMeasuresMap": Map {
+            1 => [
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+            ],
+          },
+          "componentMeasures": [],
+          "duration": 20,
+          "flamechart": [],
+          "internalModuleSourceToRanges": Map {},
+          "laneToLabelMap": Map {
+            1 => "Sync",
+            2 => "InputContinuousHydration",
+            4 => "InputContinuous",
+            8 => "DefaultHydration",
+            16 => "Default",
+            32 => "TransitionHydration",
+            64 => "Transition",
+            128 => "Transition",
+            256 => "Transition",
+            512 => "Transition",
+            1024 => "Transition",
+            2048 => "Transition",
+            4096 => "Transition",
+            8192 => "Transition",
+            16384 => "Transition",
+            32768 => "Transition",
+            65536 => "Transition",
+            131072 => "Transition",
+            262144 => "Transition",
+            524288 => "Transition",
+            1048576 => "Transition",
+            2097152 => "Transition",
+            4194304 => "Retry",
+            8388608 => "Retry",
+            16777216 => "Retry",
+            33554432 => "Retry",
+            67108864 => "Retry",
+            134217728 => "SelectiveHydration",
+            268435456 => "IdleHydration",
+            536870912 => "Idle",
+            1073741824 => "Offscreen",
+          },
+          "laneToReactMeasureMap": Map {
+            1 => [
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+            ],
+            2 => [],
+            4 => [],
+            8 => [],
+            16 => [],
+            32 => [],
+            64 => [],
+            128 => [],
+            256 => [],
+            512 => [],
+            1024 => [],
+            2048 => [],
+            4096 => [],
+            8192 => [],
+            16384 => [],
+            32768 => [],
+            65536 => [],
+            131072 => [],
+            262144 => [],
+            524288 => [],
+            1048576 => [],
+            2097152 => [],
+            4194304 => [],
+            8388608 => [],
+            16777216 => [],
+            33554432 => [],
+            67108864 => [],
+            134217728 => [],
+            268435456 => [],
+            536870912 => [],
+            1073741824 => [],
+          },
+          "nativeEvents": [],
+          "networkMeasures": [],
+          "otherUserTimingMarks": [],
+          "reactVersion": "<filtered-version>",
+          "schedulingEvents": [
+            {
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+          ],
+          "snapshotHeight": 0,
+          "snapshots": [],
+          "startTime": -10,
+          "suspenseEvents": [],
+          "thrownErrors": [],
+        }
+      `);
+    });
+
+    // @reactVersion >= 19.1
+    // @reactVersion < 19.2
+    it('should process a sample createRoot render sequence', async () => {
+      function App() {
+        const [didMount, setDidMount] = React.useState(false);
+        React.useEffect(() => {
+          if (!didMount) {
+            setDidMount(true);
+          }
+        });
+        return true;
+      }
+
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      utils.act(() => root.render(<App />));
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const data = store.profilerStore.profilingData?.timelineData;
+      expect(data).toHaveLength(1);
+      const timelineData = data[0];
+
+      // normalize the location for component stack source
+      // for snapshot testing
+      timelineData.schedulingEvents.forEach(event => {
+        if (event.componentStack) {
+          event.componentStack = normalizeCodeLocInfo(event.componentStack);
+        }
+      });
+
+      expect(timelineData).toMatchInlineSnapshot(`
+        {
+          "batchUIDToMeasuresMap": Map {
+            1 => [
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+            2 => [
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+          },
+          "componentMeasures": [
+            {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+            {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+          ],
+          "duration": 20,
+          "flamechart": [],
+          "internalModuleSourceToRanges": Map {},
+          "laneToLabelMap": Map {
+            1 => "SyncHydrationLane",
+            2 => "Sync",
+            4 => "InputContinuousHydration",
+            8 => "InputContinuous",
+            16 => "DefaultHydration",
+            32 => "Default",
+            64 => undefined,
+            128 => "TransitionHydration",
+            256 => "Transition",
+            512 => "Transition",
+            1024 => "Transition",
+            2048 => "Transition",
+            4096 => "Transition",
+            8192 => "Transition",
+            16384 => "Transition",
+            32768 => "Transition",
+            65536 => "Transition",
+            131072 => "Transition",
+            262144 => "Transition",
+            524288 => "Transition",
+            1048576 => "Transition",
+            2097152 => "Transition",
+            4194304 => "Retry",
+            8388608 => "Retry",
+            16777216 => "Retry",
+            33554432 => "Retry",
+            67108864 => "SelectiveHydration",
+            134217728 => "IdleHydration",
+            268435456 => "Idle",
+            536870912 => "Offscreen",
+            1073741824 => "Deferred",
+          },
+          "laneToReactMeasureMap": Map {
+            1 => [],
+            2 => [],
+            4 => [],
+            8 => [],
+            16 => [],
+            32 => [
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000100000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+            64 => [],
+            128 => [],
+            256 => [],
+            512 => [],
+            1024 => [],
+            2048 => [],
+            4096 => [],
+            8192 => [],
+            16384 => [],
+            32768 => [],
+            65536 => [],
+            131072 => [],
+            262144 => [],
+            524288 => [],
+            1048576 => [],
+            2097152 => [],
+            4194304 => [],
+            8388608 => [],
+            16777216 => [],
+            33554432 => [],
+            67108864 => [],
+            134217728 => [],
+            268435456 => [],
+            536870912 => [],
+            1073741824 => [],
+          },
+          "nativeEvents": [],
+          "networkMeasures": [],
+          "otherUserTimingMarks": [],
+          "reactVersion": "<filtered-version>",
+          "schedulingEvents": [
+            {
+              "lanes": "0b0000000000000000000000000100000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            {
+              "componentName": "App",
+              "componentStack": "
+            in App (at **)",
+              "lanes": "0b0000000000000000000000000100000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ],
+          "snapshotHeight": 0,
+          "snapshots": [],
+          "startTime": -10,
+          "suspenseEvents": [],
+          "thrownErrors": [],
+        }
+      `);
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
new file mode 100644
index 00000000000..4710f5cd1b2
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {getVersionedRenderImplementation} from './utils';
+
+describe('Profiler change descriptions', () => {
+  let React;
+  let store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  // @reactVersion >=18.0
+  it('should identify useContext as the cause for a re-render', () => {
+    const Context = React.createContext(0);
+
+    function Child() {
+      const context = React.useContext(Context);
+      return context;
+    }
+
+    function areEqual() {
+      return true;
+    }
+
+    const MemoizedChild = React.memo(Child, areEqual);
+    const ForwardRefChild = React.forwardRef(
+      function RefForwardingComponent(props, ref) {
+        return <Child />;
+      },
+    );
+
+    let forceUpdate = null;
+
+    const App = function App() {
+      const [val, dispatch] = React.useReducer(x => x + 1, 0);
+
+      forceUpdate = dispatch;
+
+      return (
+        <Context.Provider value={val}>
+          <Child />
+          <MemoizedChild />
+          <ForwardRefChild />
+        </Context.Provider>
+      );
+    };
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => render(<App />));
+    utils.act(() => forceUpdate());
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getCommitData(rootID, 1);
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Context.Provider>
+              <Child>
+            ▾ <Child> [Memo]
+                <Child>
+            ▾ <RefForwardingComponent> [ForwardRef]
+                <Child>
+    `);
+
+    let element = store.getElementAtIndex(2);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": [],
+        "isFirstMount": false,
+        "props": [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(3);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toEqual(['Memo']);
+    expect(commitData.changeDescriptions.get(element.id)).toBeUndefined();
+
+    element = store.getElementAtIndex(4);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": [],
+        "isFirstMount": false,
+        "props": [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(5);
+    expect(element.displayName).toBe('RefForwardingComponent');
+    expect(element.hocDisplayNames).toEqual(['ForwardRef']);
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      {
+        "context": false,
+        "didHooksChange": false,
+        "hooks": [],
+        "isFirstMount": false,
+        "props": [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(6);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": [],
+        "isFirstMount": false,
+        "props": [],
+        "state": null,
+      }
+    `);
+  });
+});
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 00000000000..a1e47defa2a
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -0,0 +1,942 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('ProfilerContext', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let legacyRender;
+  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();
+
+    legacyRender = utils.legacyRender;
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    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 {render} = getVersionedRenderImplementation();
+
+  const Contexts = ({
+    children = null,
+    defaultInspectedElementID = null,
+    defaultInspectedElementIndex = null,
+  }: any) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController
+          defaultInspectedElementID={defaultInspectedElementID}
+          defaultInspectedElementIndex={defaultInspectedElementIndex}>
+          <ProfilerContextController>{children}</ProfilerContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  // @reactVersion <= 18.2
+  // @reactVersion >= 18.0
+  it('updates updates profiling support based on the attached roots (legacy render)', async () => {
+    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(() => legacyRender(<Component />, containerA));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => legacyRender(<Component />, containerB));
+    await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(context.supportsProfiling).toBe(false);
+  });
+
+  // @reactVersion >= 18
+  it('updates updates profiling support based on the attached roots (createRoot)', async () => {
+    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');
+
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+
+    await utils.actAsync(() => rootA.render(<Component />));
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => rootB.render(<Component />));
+    await utils.actAsync(() => rootA.unmount());
+    expect(context.supportsProfiling).toBe(true);
+
+    await utils.actAsync(() => rootB.unmount());
+    expect(context.supportsProfiling).toBe(false);
+  });
+
+  it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {
+    const Example = () => null;
+
+    utils.act(() => render(<Example />));
+
+    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);
+  });
+
+  // @reactVersion <= 18.2
+  // @reactVersion >= 18.0
+  it('should auto-select the root ID matching the Components tab selection if it has profiling data (legacy render)', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+    utils.act(() => legacyRender(<Parent />, containerOne));
+    utils.act(() => legacyRender(<Parent />, containerTwo));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
+
+    // Profile and record updates to both roots.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => legacyRender(<Parent />, containerOne));
+    await utils.actAsync(() => legacyRender(<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
+          defaultInspectedElementID={store.getElementIDAtIndex(3)}
+          defaultInspectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(
+      store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)),
+    );
+  });
+
+  // @reactVersion >= 18
+  it('should auto-select the root ID matching the Components tab selection if it has profiling data (createRoot)', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+
+    const rootOne = ReactDOMClient.createRoot(containerOne);
+    const rootTwo = ReactDOMClient.createRoot(containerTwo);
+
+    utils.act(() => rootOne.render(<Parent />));
+    utils.act(() => rootTwo.render(<Parent />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
+
+    // Profile and record updates to both roots.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => rootOne.render(<Parent />));
+    await utils.actAsync(() => rootTwo.render(<Parent />));
+    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
+          defaultInspectedElementID={store.getElementIDAtIndex(3)}
+          defaultInspectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(
+      store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)),
+    );
+  });
+
+  // @reactVersion <= 18.2
+  // @reactVersion >= 18.0
+  it('should not select the root ID matching the Components tab selection if it has no profiling data (legacy render)', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+    utils.act(() => legacyRender(<Parent />, containerOne));
+    utils.act(() => legacyRender(<Parent />, containerTwo));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
+
+    // Profile and record updates to only the first root.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => legacyRender(<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
+          defaultInspectedElementID={store.getElementIDAtIndex(3)}
+          defaultInspectedElementIndex={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)),
+    );
+  });
+
+  // @reactVersion >= 18
+  it('should not select the root ID matching the Components tab selection if it has no profiling data (createRoot)', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerOne = document.createElement('div');
+    const containerTwo = document.createElement('div');
+
+    const rootOne = ReactDOMClient.createRoot(containerOne);
+    const rootTwo = ReactDOMClient.createRoot(containerTwo);
+
+    utils.act(() => rootOne.render(<Parent />));
+    utils.act(() => rootTwo.render(<Parent />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
+
+    // Profile and record updates to only the first root.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => rootOne.render(<Parent />));
+    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
+          defaultInspectedElementID={store.getElementIDAtIndex(3)}
+          defaultInspectedElementIndex={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)),
+    );
+  });
+
+  // @reactVersion <= 18.2
+  // @reactVersion >= 18.0
+  it('should maintain root selection between profiling sessions so long as there is data for that root (legacy render)', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    utils.act(() => legacyRender(<Parent />, containerA));
+    utils.act(() => legacyRender(<Parent />, containerB));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
+
+    // Profile and record updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => legacyRender(<Parent />, containerA));
+    await utils.actAsync(() => legacyRender(<Parent />, containerB));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    let dispatch: DispatcherContext = ((null: any): DispatcherContext);
+    let inspectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      dispatch = React.useContext(TreeDispatcherContext);
+      inspectedElementID =
+        React.useContext(TreeStateContext).inspectedElementID;
+      return null;
+    }
+
+    const id = ((store.getElementIDAtIndex(3): any): number);
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultInspectedElementID={id}
+          defaultInspectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    expect(inspectedElementID).toBe(id);
+
+    // Profile and record more updates to both roots
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => legacyRender(<Parent />, containerA));
+    await utils.actAsync(() => legacyRender(<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(inspectedElementID).toBe(otherID);
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(store.getRootIDForElement(id));
+  });
+
+  // @reactVersion >= 18.0
+  it('should maintain root selection between profiling sessions so long as there is data for that root (createRoot)', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+
+    utils.act(() => rootA.render(<Parent />));
+    utils.act(() => rootB.render(<Parent />));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
+
+    // Profile and record updates.
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => rootA.render(<Parent />));
+    await utils.actAsync(() => rootB.render(<Parent />));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    let context: Context = ((null: any): Context);
+    let dispatch: DispatcherContext = ((null: any): DispatcherContext);
+    let inspectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      dispatch = React.useContext(TreeDispatcherContext);
+      inspectedElementID =
+        React.useContext(TreeStateContext).inspectedElementID;
+      return null;
+    }
+
+    const id = ((store.getElementIDAtIndex(3): any): number);
+
+    // Select an element within the second root.
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts
+          defaultInspectedElementID={id}
+          defaultInspectedElementIndex={3}>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+
+    expect(inspectedElementID).toBe(id);
+
+    // Profile and record more updates to both roots
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => rootA.render(<Parent />));
+    await utils.actAsync(() => rootB.render(<Parent />));
+    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(inspectedElementID).toBe(otherID);
+    expect(context).not.toBeNull();
+    expect(context.rootID).toBe(store.getRootIDForElement(id));
+  });
+
+  it('should sync selected element in the Components tab too, provided the element is a match', async () => {
+    const GrandParent = ({includeChild}) => (
+      <Parent includeChild={includeChild} />
+    );
+    const Parent = ({includeChild}) => (includeChild ? <Child /> : null);
+    const Child = () => null;
+
+    utils.act(() => render(<GrandParent includeChild={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <GrandParent>
+          ▾ <Parent>
+              <Child>
+    `);
+
+    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(() => render(<GrandParent includeChild={true} />));
+    await utils.actAsync(() => render(<GrandParent includeChild={false} />));
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <GrandParent>
+            <Parent>
+    `);
+
+    let context: Context = ((null: any): Context);
+    let inspectedElementID = null;
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      inspectedElementID =
+        React.useContext(TreeStateContext).inspectedElementID;
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts>
+          <ContextReader />
+        </Contexts>,
+      ),
+    );
+    expect(inspectedElementID).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(inspectedElementID).toBe(parentID);
+
+    // Select an unmounted element and verify no Components tab selection doesn't change.
+    await utils.actAsync(() => context.selectFiber(childID, 'Child'));
+    expect(inspectedElementID).toBe(parentID);
+  });
+
+  it('should toggle profiling when the keyboard shortcut is pressed', async () => {
+    // Context providers
+    const Profiler =
+      require('react-devtools-shared/src/devtools/views/Profiler/Profiler').default;
+    const {
+      TimelineContextController,
+    } = require('react-devtools-timeline/src/TimelineContext');
+    const {
+      SettingsContextController,
+    } = require('react-devtools-shared/src/devtools/views/Settings/SettingsContext');
+    const {
+      ModalDialogContextController,
+    } = require('react-devtools-shared/src/devtools/views/ModalDialog');
+
+    // Dom component for profiling to be enabled
+    const Component = () => null;
+    utils.act(() => render(<Component />));
+
+    const profilerContainer = document.createElement('div');
+    document.body.appendChild(profilerContainer);
+
+    // Create a root for the profiler
+    const profilerRoot = ReactDOMClient.createRoot(profilerContainer);
+
+    // Render the profiler
+    utils.act(() => {
+      profilerRoot.render(
+        <Contexts>
+          <SettingsContextController browserTheme="light">
+            <ModalDialogContextController>
+              <TimelineContextController>
+                <Profiler />
+              </TimelineContextController>
+            </ModalDialogContextController>
+          </SettingsContextController>
+        </Contexts>,
+      );
+    });
+
+    // Verify that the profiler is not profiling.
+    expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
+
+    // Trigger the keyboard shortcut.
+    const ownerWindow = profilerContainer.ownerDocument.defaultView;
+    const isMac =
+      typeof navigator !== 'undefined' &&
+      navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: 'e',
+      metaKey: isMac,
+      ctrlKey: !isMac,
+      bubbles: true,
+    });
+
+    // Dispatch keyboard event to toggle profiling on
+    // Try utils.actAsync with recursivelyFlush=false
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(keyEvent);
+    }, false);
+    expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(true);
+
+    // Dispatch keyboard event to toggle profiling off
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(keyEvent);
+    }, false);
+    expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
+
+    document.body.removeChild(profilerContainer);
+  }, 20000);
+
+  it('should navigate between commits when the keyboard shortcut is pressed', async () => {
+    const Parent = () => <Child />;
+    const Child = () => null;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    utils.act(() => root.render(<Parent />));
+
+    // Profile and record multiple commits
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => root.render(<Parent />)); // Commit 1
+    await utils.actAsync(() => root.render(<Parent />)); // Commit 2
+    await utils.actAsync(() => root.render(<Parent />)); // Commit 3
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    const Profiler =
+      require('react-devtools-shared/src/devtools/views/Profiler/Profiler').default;
+    const {
+      TimelineContextController,
+    } = require('react-devtools-timeline/src/TimelineContext');
+    const {
+      SettingsContextController,
+    } = require('react-devtools-shared/src/devtools/views/Settings/SettingsContext');
+    const {
+      ModalDialogContextController,
+    } = require('react-devtools-shared/src/devtools/views/ModalDialog');
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    const profilerContainer = document.createElement('div');
+    document.body.appendChild(profilerContainer);
+
+    const profilerRoot = ReactDOMClient.createRoot(profilerContainer);
+
+    await utils.actAsync(() => {
+      profilerRoot.render(
+        <Contexts>
+          <SettingsContextController browserTheme="light">
+            <ModalDialogContextController>
+              <TimelineContextController>
+                <Profiler />
+                <ContextReader />
+              </TimelineContextController>
+            </ModalDialogContextController>
+          </SettingsContextController>
+        </Contexts>,
+      );
+    });
+
+    // Verify we have profiling data with 3 commits
+    expect(context.didRecordCommits).toBe(true);
+    expect(context.profilingData).not.toBeNull();
+    const rootID = context.rootID;
+    expect(rootID).not.toBeNull();
+    const dataForRoot = context.profilingData.dataForRoots.get(rootID);
+    expect(dataForRoot.commitData.length).toBe(3);
+    // Should start at the first commit
+    expect(context.selectedCommitIndex).toBe(0);
+
+    const ownerWindow = profilerContainer.ownerDocument.defaultView;
+    const isMac =
+      typeof navigator !== 'undefined' &&
+      navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+    // Test ArrowRight navigation (forward) with correct modifier
+    const arrowRightEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowRight',
+      metaKey: isMac,
+      ctrlKey: !isMac,
+      bubbles: true,
+    });
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(2);
+
+    // Test wrap-around (last -> first)
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(0);
+
+    // Test ArrowLeft navigation (backward) with correct modifier
+    const arrowLeftEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowLeft',
+      metaKey: isMac,
+      ctrlKey: !isMac,
+      bubbles: true,
+    });
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowLeftEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(2);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowLeftEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowLeftEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(0);
+
+    // Cleanup
+    await utils.actAsync(() => profilerRoot.unmount());
+    document.body.removeChild(profilerContainer);
+  });
+
+  it('should handle commit selection edge cases when filtering commits', async () => {
+    const Scheduler = require('scheduler');
+
+    // Create components that do varying amounts of work to generate different commit durations
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      const items = [];
+      for (let i = 0; i < count; i++) {
+        items.push(<Child key={i} duration={i} />);
+      }
+      return <div>{items}</div>;
+    };
+    const Child = ({duration}) => {
+      Scheduler.unstable_advanceTime(duration);
+      return <span>{duration}</span>;
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    utils.act(() => root.render(<Parent count={1} />));
+
+    // Profile and record multiple commits with different amounts of work
+    await utils.actAsync(() => store.profilerStore.startProfiling());
+    await utils.actAsync(() => root.render(<Parent count={5} />)); // Commit 1 - 20ms
+    await utils.actAsync(() => root.render(<Parent count={20} />)); // Commit 2 - 200ms
+    await utils.actAsync(() => root.render(<Parent count={50} />)); // Commit 3 - 1235ms
+    await utils.actAsync(() => root.render(<Parent count={10} />)); // Commit 4 - 55ms
+    await utils.actAsync(() => store.profilerStore.stopProfiling());
+
+    // Context providers
+    const Profiler =
+      require('react-devtools-shared/src/devtools/views/Profiler/Profiler').default;
+    const {
+      TimelineContextController,
+    } = require('react-devtools-timeline/src/TimelineContext');
+    const {
+      SettingsContextController,
+    } = require('react-devtools-shared/src/devtools/views/Settings/SettingsContext');
+    const {
+      ModalDialogContextController,
+    } = require('react-devtools-shared/src/devtools/views/ModalDialog');
+
+    let context: Context = ((null: any): Context);
+    function ContextReader() {
+      context = React.useContext(ProfilerContext);
+      return null;
+    }
+
+    const profilerContainer = document.createElement('div');
+    document.body.appendChild(profilerContainer);
+
+    const profilerRoot = ReactDOMClient.createRoot(profilerContainer);
+
+    await utils.actAsync(() => {
+      profilerRoot.render(
+        <Contexts>
+          <SettingsContextController browserTheme="light">
+            <ModalDialogContextController>
+              <TimelineContextController>
+                <Profiler />
+                <ContextReader />
+              </TimelineContextController>
+            </ModalDialogContextController>
+          </SettingsContextController>
+        </Contexts>,
+      );
+    });
+
+    // Verify we have profiling data with 4 commits
+    expect(context.didRecordCommits).toBe(true);
+    expect(context.profilingData).not.toBeNull();
+    const rootID = context.rootID;
+    expect(rootID).not.toBeNull();
+    const dataForRoot = context.profilingData.dataForRoots.get(rootID);
+    expect(dataForRoot.commitData.length).toBe(4);
+    // Edge case 1: Should start at the first commit
+    expect(context.selectedCommitIndex).toBe(0);
+
+    const ownerWindow = profilerContainer.ownerDocument.defaultView;
+    const isMac =
+      typeof navigator !== 'undefined' &&
+      navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+    const arrowRightEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowRight',
+      metaKey: isMac,
+      ctrlKey: !isMac,
+      bubbles: true,
+    });
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      context.setIsCommitFilterEnabled(true);
+    });
+
+    // Edge case 2:  When filtering is enabled, selected commit should remain if it's still visible
+    expect(context.filteredCommitIndices.length).toBe(4);
+    expect(context.selectedCommitIndex).toBe(1);
+    expect(context.selectedFilteredCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      context.setMinCommitDuration(1000000);
+    });
+
+    // Edge case 3: When all commits are filtered out, selection should be null
+    expect(context.filteredCommitIndices).toEqual([]);
+    expect(context.selectedCommitIndex).toBe(null);
+    expect(context.selectedFilteredCommitIndex).toBe(null);
+
+    await utils.actAsync(() => {
+      context.setMinCommitDuration(0);
+    });
+
+    // Edge case 4: After restoring commits, first commit should be auto-selected
+    expect(context.filteredCommitIndices.length).toBe(4);
+    expect(context.selectedCommitIndex).toBe(0);
+    expect(context.selectedFilteredCommitIndex).toBe(0);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(2);
+
+    await utils.actAsync(() => {
+      ownerWindow.dispatchEvent(arrowRightEvent);
+    }, false);
+    expect(context.selectedCommitIndex).toBe(3);
+
+    // Filter out the currently selected commit using actual commit data
+    const commitDurations = dataForRoot.commitData.map(
+      commit => commit.duration,
+    );
+    const selectedCommitDuration = commitDurations[3];
+    const filterThreshold = selectedCommitDuration + 0.001;
+    await utils.actAsync(() => {
+      context.setMinCommitDuration(filterThreshold);
+    });
+
+    // Edge case 5: Should auto-select first available commit when current one is filtered
+    expect(context.selectedCommitIndex).not.toBe(null);
+    expect(context.selectedFilteredCommitIndex).toBe(1);
+
+    await utils.actAsync(() => {
+      context.setIsCommitFilterEnabled(false);
+    });
+
+    // Edge case 6: When filtering is disabled, selected commit should remain
+    expect(context.filteredCommitIndices.length).toBe(4);
+    expect(context.selectedCommitIndex).toBe(2);
+    expect(context.selectedFilteredCommitIndex).toBe(2);
+
+    await utils.actAsync(() => profilerRoot.unmount());
+    document.body.removeChild(profilerContainer);
+  });
+});
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 00000000000..c8384b2fa42
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -0,0 +1,236 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('ProfilerStore', () => {
+  let React;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+  });
+
+  const {render, unmount} = getVersionedRenderImplementation();
+  const {render: renderOther, unmount: unmountOther} =
+    getVersionedRenderImplementation();
+
+  // @reactVersion >= 16.9
+  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>;
+
+    utils.act(() => {
+      render(<Parent key="A" count={3} />);
+      renderOther(<Parent key="B" count={2} />);
+    });
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    utils.act(() => {
+      render(<Parent key="A" count={4} />);
+      renderOther(<Parent key="B" count={1} />);
+    });
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootA = store.roots[0];
+    const rootB = store.roots[1];
+
+    utils.act(() => unmountOther());
+    expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();
+
+    utils.act(() => unmount());
+    expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();
+  });
+
+  // @reactVersion >= 16.9
+  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(),
+    };
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    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);
+  });
+
+  // @reactVersion >= 16.9
+  // 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} />;
+    };
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    utils.act(() => render(<ControlledInput />));
+
+    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);
+  });
+
+  // @reactVersion >= 16.9
+  it('should filter empty commits alt', () => {
+    let commitCount = 0;
+
+    const inputRef = React.createRef();
+    const Example = () => {
+      const [, setTouched] = React.useState(false);
+
+      const handleBlur = () => {
+        setTouched(true);
+      };
+
+      require('scheduler').unstable_advanceTime(1);
+
+      React.useLayoutEffect(() => {
+        commitCount++;
+      });
+
+      return <input ref={inputRef} onBlur={handleBlur} />;
+    };
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    utils.act(() => render(<Example />));
+
+    expect(commitCount).toBe(1);
+    commitCount = 0;
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    // Focus and blur.
+    const target = inputRef.current;
+    utils.act(() => target.focus());
+    utils.act(() => target.blur());
+    utils.act(() => target.focus());
+    utils.act(() => target.blur());
+    expect(commitCount).toBe(1);
+
+    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);
+  });
+
+  // @reactVersion >= 16.9
+  it('should throw if component filters are modified while profiling', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+
+    expect(() => {
+      utils.act(() => {
+        const {
+          ElementTypeHostComponent,
+        } = require('react-devtools-shared/src/frontend/types');
+        store.componentFilters = [
+          utils.createElementTypeFilter(ElementTypeHostComponent),
+        ];
+      });
+    }).toThrow('Cannot modify filter preferences while profiling');
+  });
+
+  // @reactVersion >= 16.9
+  it('should not throw if state contains a property hasOwnProperty', () => {
+    let setStateCallback;
+    const ControlledInput = () => {
+      const [state, setState] = React.useState({hasOwnProperty: true});
+      setStateCallback = setState;
+      return state.hasOwnProperty;
+    };
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    utils.act(() => render(<ControlledInput />));
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      setStateCallback({
+        hasOwnProperty: false,
+      }),
+    );
+    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);
+  });
+
+  // @reactVersion >= 18.0
+  it('should not throw while initializing context values for Fibers within a not-yet-mounted subtree', () => {
+    const promise = new Promise(resolve => {});
+    const SuspendingView = () => {
+      if (React.use) {
+        React.use(promise);
+      } else {
+        throw promise;
+      }
+    };
+
+    const App = () => {
+      return (
+        <React.Suspense fallback="Fallback">
+          <SuspendingView />
+        </React.Suspense>
+      );
+    };
+
+    utils.act(() => render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+  });
+});
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 00000000000..c17a59c2925
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -0,0 +1,1432 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('ProfilingCache', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let Scheduler;
+  let bridge: FrontendBridge;
+  let legacyRender;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    legacyRender = utils.legacyRender;
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+  });
+
+  const {render, getContainer} = getVersionedRenderImplementation();
+
+  // @reactVersion >= 16.9
+  // @reactVersion <= 18.2
+  it('should collect data for each root (including ones added or mounted after profiling started) (legacy render)', () => {
+    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 RootA = ({children}) => children;
+    const RootB = ({children}) => children;
+    const RootC = ({children}) => children;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
+
+    utils.act(() =>
+      legacyRender(
+        <RootA>
+          <Parent count={2} />
+        </RootA>,
+        containerA,
+      ),
+    );
+    utils.act(() =>
+      legacyRender(
+        <RootB>
+          <Parent count={1} />
+        </RootB>,
+        containerB,
+      ),
+    );
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      legacyRender(
+        <RootA>
+          <Parent count={3} />
+        </RootA>,
+        containerA,
+      ),
+    );
+    utils.act(() =>
+      legacyRender(
+        <RootC>
+          <Parent count={1} />
+        </RootC>,
+        containerC,
+      ),
+    );
+    utils.act(() =>
+      legacyRender(
+        <RootA>
+          <Parent count={1} />
+        </RootA>,
+        containerA,
+      ),
+    );
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
+    utils.act(() =>
+      legacyRender(
+        <RootA>
+          <Parent count={0} />
+        </RootA>,
+        containerA,
+      ),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
+
+    const rootIDs = Array.from(
+      store.profilerStore.profilingData.dataForRoots.values(),
+    ).map(({rootID}) => rootID);
+    expect(rootIDs).toHaveLength(3);
+
+    const originalProfilingDataForRoot = [];
+
+    let data = store.profilerStore.getDataForRoot(rootIDs[0]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootA"`);
+    expect(data.commitData).toHaveLength(3);
+    originalProfilingDataForRoot.push(data);
+
+    data = store.profilerStore.getDataForRoot(rootIDs[1]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootC"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
+
+    data = store.profilerStore.getDataForRoot(rootIDs[2]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
+
+    utils.exportImportHelper(bridge, store);
+
+    rootIDs.forEach((rootID, index) => {
+      const current = store.profilerStore.getDataForRoot(rootID);
+      const prev = originalProfilingDataForRoot[index];
+      expect(current).toEqual(prev);
+    });
+  });
+
+  // @reactVersion >= 18
+  it('should collect data for each root (including ones added or mounted after profiling started) (createRoot)', () => {
+    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 RootA = ({children}) => children;
+    const RootB = ({children}) => children;
+    const RootC = ({children}) => children;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
+
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+    const rootC = ReactDOMClient.createRoot(containerC);
+
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={2} />
+        </RootA>,
+      ),
+    );
+    utils.act(() =>
+      rootB.render(
+        <RootB>
+          <Parent count={1} />
+        </RootB>,
+      ),
+    );
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={3} />
+        </RootA>,
+      ),
+    );
+    utils.act(() =>
+      rootC.render(
+        <RootC>
+          <Parent count={1} />
+        </RootC>,
+      ),
+    );
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={1} />
+        </RootA>,
+      ),
+    );
+    utils.act(() => rootB.unmount());
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={0} />
+        </RootA>,
+      ),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+    utils.act(() => rootA.unmount());
+
+    const rootIDs = Array.from(
+      store.profilerStore.profilingData.dataForRoots.values(),
+    ).map(({rootID}) => rootID);
+    expect(rootIDs).toHaveLength(3);
+
+    const originalProfilingDataForRoot = [];
+
+    let data = store.profilerStore.getDataForRoot(rootIDs[0]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootA"`);
+    expect(data.commitData).toHaveLength(3);
+    originalProfilingDataForRoot.push(data);
+
+    data = store.profilerStore.getDataForRoot(rootIDs[1]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootC"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
+
+    data = store.profilerStore.getDataForRoot(rootIDs[2]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
+
+    utils.exportImportHelper(bridge, store);
+
+    rootIDs.forEach((rootID, index) => {
+      const current = store.profilerStore.getDataForRoot(rootID);
+      const prev = originalProfilingDataForRoot[index];
+      expect(current).toEqual(prev);
+    });
+  });
+
+  // @reactVersion >= 16.9
+  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);
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => render(<Parent count={2} />));
+    utils.act(() => render(<Parent count={3} />));
+    utils.act(() => render(<Parent count={1} />));
+    utils.act(() => render(<Parent count={0} />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+
+    const prevCommitData =
+      store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(prevCommitData).toHaveLength(4);
+
+    utils.exportImportHelper(bridge, store);
+
+    const nextCommitData =
+      store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(nextCommitData).toHaveLength(4);
+    nextCommitData.forEach((commitData, index) => {
+      expect(commitData).toEqual(prevCommitData[index]);
+    });
+  });
+
+  // @reactVersion >= 18.0
+  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 snapshot = 0;
+    function getServerSnapshot() {
+      return snapshot;
+    }
+    function getClientSnapshot() {
+      return snapshot;
+    }
+
+    let syncExternalStoreCallback;
+    function subscribe(callback) {
+      syncExternalStoreCallback = callback;
+    }
+
+    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];
+      React.useSyncExternalStore(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+      );
+
+      // This hook's return value may change between renders,
+      // but the hook itself isn't stateful.
+      React.useContext(Context);
+
+      // These hooks never change in a way that schedules an update.
+      React.useCallback(() => () => {}, [string]);
+      React.useMemo(() => string, [string]);
+      React.useCallback(() => () => {}, [count]);
+      React.useMemo(() => count, [count]);
+      React.useCallback(() => () => {});
+      React.useMemo(() => string);
+
+      // These hooks never change in a way that schedules an update.
+      React.useEffect(() => {}, [string]);
+      React.useLayoutEffect(() => {}, [string]);
+      React.useEffect(() => {}, [count]);
+      React.useLayoutEffect(() => {}, [count]);
+      React.useEffect(() => {});
+      React.useLayoutEffect(() => {});
+
+      return null;
+    };
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      render(
+        <Context.Provider value={true}>
+          <Component count={1} />
+        </Context.Provider>,
+      ),
+    );
+
+    // Save references to the real dispatch/setState functions.
+    // inspectHooks() re-runs the component with a mock dispatcher,
+    // which would overwrite these variables with mock functions that do nothing.
+    const realDispatch = dispatch;
+    const realSetState = setState;
+
+    // Second render has no changed hooks, only changed props.
+    utils.act(() =>
+      render(
+        <Context.Provider value={true}>
+          <Component count={2} />
+        </Context.Provider>,
+      ),
+    );
+
+    // Third render has a changed reducer hook.
+    utils.act(() => realDispatch({type: 'invert'}));
+
+    // Fourth render has a changed state hook.
+    utils.act(() => realSetState('def'));
+
+    // Fifth render has a changed context value, but no changed hook.
+    utils.act(() =>
+      render(
+        <Context.Provider value={false}>
+          <Component count={2} />
+        </Context.Provider>,
+      ),
+    );
+
+    // 6th renderer is triggered by a sync external store change.
+    utils.act(() => {
+      snapshot++;
+      syncExternalStoreCallback();
+    });
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+
+    const changeDescriptions = store.profilerStore
+      .getDataForRoot(rootID)
+      .commitData.map(commitData => commitData.changeDescriptions);
+    expect(changeDescriptions).toHaveLength(6);
+
+    // 1st render: No change
+    expect(changeDescriptions[0]).toMatchInlineSnapshot(`
+      Map {
+        3 => {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+      }
+    `);
+
+    // 2nd render: Changed props
+    expect(changeDescriptions[1]).toMatchInlineSnapshot(`
+      Map {
+        3 => {
+          "context": false,
+          "didHooksChange": false,
+          "hooks": [],
+          "isFirstMount": false,
+          "props": [
+            "count",
+          ],
+          "state": null,
+        },
+      }
+    `);
+
+    // 3rd render: Changed useReducer
+    expect(changeDescriptions[2]).toMatchInlineSnapshot(`
+      Map {
+        3 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            1,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 4th render: Changed useState
+    expect(changeDescriptions[3]).toMatchInlineSnapshot(`
+      Map {
+        3 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            0,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 5th render: Changed context
+    expect(changeDescriptions[4]).toMatchInlineSnapshot(`
+      Map {
+        3 => {
+          "context": true,
+          "didHooksChange": false,
+          "hooks": [],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 6th render: Sync external store
+    expect(changeDescriptions[5]).toMatchInlineSnapshot(`
+      Map {
+        3 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            2,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    expect(changeDescriptions).toHaveLength(6);
+
+    // Export and re-import profile data and make sure it is retained.
+    utils.exportImportHelper(bridge, store);
+
+    for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      expect(commitData.changeDescriptions).toEqual(
+        changeDescriptions[commitIndex],
+      );
+    }
+  });
+
+  // @reactVersion >= 19.0
+  it('should detect what hooks changed in a render with custom and composite hooks', () => {
+    let snapshot = 0;
+    let syncExternalStoreCallback;
+
+    function subscribe(callback) {
+      syncExternalStoreCallback = callback;
+      return () => {};
+    }
+
+    function getSnapshot() {
+      return snapshot;
+    }
+
+    // Custom hook wrapping multiple primitive hooks
+    function useCustomHook() {
+      const [value, setValue] = React.useState('custom');
+      React.useEffect(() => {}, [value]);
+      return [value, setValue];
+    }
+
+    let setState = null;
+    let startTransition = null;
+    let actionStateDispatch = null;
+    let setCustomValue = null;
+    let setFinalState = null;
+
+    const Component = () => {
+      // Hook 0: useState
+      const [state, _setState] = React.useState('initial');
+      setState = _setState;
+
+      // Hook 1: useSyncExternalStore (composite hook - internally uses multiple hooks)
+      const storeValue = React.useSyncExternalStore(
+        subscribe,
+        getSnapshot,
+        getSnapshot,
+      );
+
+      // Hook 2: useTransition (composite hook - internally uses multiple hooks)
+      const [isPending, _startTransition] = React.useTransition();
+      startTransition = _startTransition;
+
+      // Hook 3: useActionState (composite hook - internally uses multiple hooks)
+      const [actionState, _actionStateDispatch] = React.useActionState(
+        (_prev, action) => action,
+        'action-initial',
+      );
+      actionStateDispatch = _actionStateDispatch;
+
+      // Hook 4: useState inside custom hook (flattened)
+      // Hook 5: useEffect inside custom hook (not stateful, won't show in changes)
+      const [customValue, _setCustomValue] = useCustomHook();
+      setCustomValue = _setCustomValue;
+
+      // Hook 6: direct useState at the end
+      const [finalState, _setFinalState] = React.useState('final');
+      setFinalState = _setFinalState;
+
+      return `${state}-${storeValue}-${isPending}-${actionState}-${customValue}-${finalState}`;
+    };
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => render(<Component />));
+
+    // Save references before inspectHooks() overwrites them
+    const realSetState = setState;
+    const realStartTransition = startTransition;
+    const realActionStateDispatch = actionStateDispatch;
+    const realSetCustomValue = setCustomValue;
+    const realSetFinalState = setFinalState;
+
+    // 2nd render: change useState (hook 0)
+    utils.act(() => realSetState('changed'));
+
+    // 3rd render: change useSyncExternalStore (hook 1)
+    utils.act(() => {
+      snapshot = 1;
+      syncExternalStoreCallback();
+    });
+
+    // 4th render: trigger useTransition (hook 2)
+    // Note: useTransition triggers two renders - one when isPending becomes true,
+    // and another when isPending becomes false after the transition completes
+    utils.act(() => {
+      realStartTransition(() => {});
+    });
+
+    // 6th render: change useActionState (hook 3)
+    utils.act(() => realActionStateDispatch('action-changed'));
+
+    // 7th render: change custom hook's useState (hook 4)
+    utils.act(() => realSetCustomValue('custom-changed'));
+
+    // 8th render: change final useState (hook 6)
+    utils.act(() => realSetFinalState('final-changed'));
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+
+    const changeDescriptions = store.profilerStore
+      .getDataForRoot(rootID)
+      .commitData.map(commitData => commitData.changeDescriptions);
+    expect(changeDescriptions).toHaveLength(8);
+
+    // 1st render: Initial mount
+    expect(changeDescriptions[0]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+      }
+    `);
+
+    // 2nd render: Changed hook 0 (useState)
+    expect(changeDescriptions[1]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            0,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 3rd render: Changed hook 1 (useSyncExternalStore)
+    expect(changeDescriptions[2]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            1,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 4th render: Changed hook 2 (useTransition - isPending becomes true)
+    expect(changeDescriptions[3]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            2,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 5th render: Changed hook 2 (useTransition - isPending becomes false)
+    expect(changeDescriptions[4]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            2,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 6th render: Changed hook 3 (useActionState)
+    expect(changeDescriptions[5]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            3,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 7th render: Changed hook 4 (useState inside useCustomHook)
+    expect(changeDescriptions[6]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            4,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 8th render: Changed hook 6 (final useState)
+    expect(changeDescriptions[7]).toMatchInlineSnapshot(`
+      Map {
+        2 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            6,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+  });
+
+  // @reactVersion >= 19.0
+  it('should detect context changes or lack of changes with conditional use()', () => {
+    const ContextA = React.createContext(0);
+    const ContextB = React.createContext(1);
+    let setState = null;
+
+    const Component = () => {
+      // These hooks may change and initiate re-renders.
+      let state;
+      [state, setState] = React.useState('abc');
+
+      let result = state;
+
+      if (state.includes('a')) {
+        result += React.use(ContextA);
+      }
+
+      result += React.use(ContextB);
+
+      return result;
+    };
+
+    utils.act(() =>
+      render(
+        <ContextA.Provider value={1}>
+          <ContextB.Provider value={1}>
+            <Component />
+          </ContextB.Provider>
+        </ContextA.Provider>,
+      ),
+    );
+
+    // Save reference to the real setState function before profiling starts.
+    // inspectHooks() re-runs the component with a mock dispatcher,
+    // which would overwrite setState with a mock function that does nothing.
+    const realSetState = setState;
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    // First render changes Context.
+    utils.act(() =>
+      render(
+        <ContextA.Provider value={0}>
+          <ContextB.Provider value={1}>
+            <Component />
+          </ContextB.Provider>
+        </ContextA.Provider>,
+      ),
+    );
+
+    // Second render has no changed Context, only changed state.
+    utils.act(() => realSetState('def'));
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+
+    const changeDescriptions = store.profilerStore
+      .getDataForRoot(rootID)
+      .commitData.map(commitData => commitData.changeDescriptions);
+    expect(changeDescriptions).toHaveLength(2);
+
+    // 1st render: Change to Context
+    expect(changeDescriptions[0]).toMatchInlineSnapshot(`
+      Map {
+        4 => {
+          "context": true,
+          "didHooksChange": false,
+          "hooks": [],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 2nd render: Change to State
+    expect(changeDescriptions[1]).toMatchInlineSnapshot(`
+      Map {
+        4 => {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": [
+            0,
+          ],
+          "isFirstMount": false,
+          "props": [],
+          "state": null,
+        },
+      }
+    `);
+
+    expect(changeDescriptions).toHaveLength(2);
+
+    // Export and re-import profile data and make sure it is retained.
+    utils.exportImportHelper(bridge, store);
+
+    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      expect(commitData.changeDescriptions).toEqual(
+        changeDescriptions[commitIndex],
+      );
+    }
+  });
+
+  // @reactVersion >= 18.0
+  it('should calculate durations 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(() => render(<Grandparent />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+            <Child>
+            <Child>
+    `);
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toHaveLength(1);
+
+    // Actual duration should also include both filtered <Parent> components.
+    expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
+      Map {
+        1 => 16,
+        2 => 16,
+        3 => 1,
+        4 => 1,
+      }
+    `);
+
+    expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
+      Map {
+        1 => 0,
+        2 => 10,
+        3 => 1,
+        4 => 1,
+      }
+    `);
+  });
+
+  // @reactVersion >= 17.0
+  it('should calculate durations correctly for suspended views', async () => {
+    let data;
+    const getData = () => {
+      if (React.use) {
+        if (!data) {
+          data = new Promise(resolve => {
+            resolve('abc');
+          });
+        }
+        return React.use(data);
+      }
+      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(() => render(<Parent />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toHaveLength(2);
+
+    if (React.version.startsWith('17')) {
+      // React 17 will mount all children until it suspends in a LegacyHidden
+      // The ID gap is from the Fiber for <Async> that's in the disconnected tree.
+      expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 15,
+          2 => 15,
+          3 => 5,
+          5 => 2,
+        }
+      `);
+      expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 0,
+          2 => 10,
+          3 => 3,
+          5 => 2,
+        }
+      `);
+      expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          6 => 3,
+          3 => 3,
+        }
+      `);
+      expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          6 => 3,
+          3 => 0,
+        }
+      `);
+    } else {
+      expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 15,
+          2 => 15,
+          3 => 5,
+          4 => 2,
+        }
+      `);
+      expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 0,
+          2 => 10,
+          3 => 3,
+          4 => 2,
+        }
+      `);
+      expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          5 => 3,
+          3 => 3,
+        }
+      `);
+      expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          5 => 3,
+          3 => 0,
+        }
+      `);
+    }
+  });
+
+  // @reactVersion >= 16.9
+  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);
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => render(<Parent count={1} />));
+    utils.act(() => render(<Parent count={2} />));
+    utils.act(() => render(<Parent count={3} />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const allFiberCommits = [];
+    for (let index = 0; index < store.numElements; index++) {
+      const fiberID = store.getElementIDAtIndex(index);
+      const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
+        fiberID,
+        rootID,
+      });
+
+      allFiberCommits.push(fiberCommits);
+    }
+
+    expect(allFiberCommits).toMatchInlineSnapshot(`
+      [
+        [
+          0,
+          1,
+          2,
+        ],
+        [
+          0,
+          1,
+          2,
+        ],
+        [
+          1,
+          2,
+        ],
+        [
+          2,
+        ],
+        [
+          0,
+        ],
+      ]
+    `);
+
+    utils.exportImportHelper(bridge, store);
+
+    for (let index = 0; index < store.numElements; index++) {
+      const fiberID = store.getElementIDAtIndex(index);
+      const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
+        fiberID,
+        rootID,
+      });
+
+      expect(fiberCommits).toEqual(allFiberCommits[index]);
+    }
+  });
+
+  // @reactVersion >= 18.0.0
+  // @reactVersion <= 18.2.0
+  it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0] (legacy render)', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      legacyRender(<React.Suspense />, document.createElement('div')),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toMatchInlineSnapshot(`
+      [
+        {
+          "changeDescriptions": Map {},
+          "duration": 0,
+          "effectDuration": null,
+          "fiberActualDurations": Map {
+            1 => 0,
+            2 => 0,
+          },
+          "fiberSelfDurations": Map {
+            1 => 0,
+            2 => 0,
+          },
+          "passiveEffectDuration": null,
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+          "updaters": [
+            {
+              "compiledWithForget": false,
+              "displayName": "render()",
+              "env": null,
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "stack": null,
+              "type": 11,
+            },
+          ],
+        },
+      ]
+    `);
+  });
+
+  // @reactVersion >= 18.0.0
+  // @reactVersion <= 18.2.0
+  it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0] (createRoot)', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => render(<React.Suspense />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toMatchInlineSnapshot(`
+      [
+        {
+          "changeDescriptions": Map {},
+          "duration": 0,
+          "effectDuration": null,
+          "fiberActualDurations": Map {
+            1 => 0,
+            2 => 0,
+          },
+          "fiberSelfDurations": Map {
+            1 => 0,
+            2 => 0,
+          },
+          "passiveEffectDuration": null,
+          "priorityLevel": "Normal",
+          "timestamp": 0,
+          "updaters": [
+            {
+              "compiledWithForget": false,
+              "displayName": "createRoot()",
+              "env": null,
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "stack": null,
+              "type": 11,
+            },
+          ],
+        },
+      ]
+    `);
+  });
+
+  // @reactVersion > 18.2.0
+  it('should handle unexpectedly shallow suspense trees', () => {
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => render(<React.Suspense />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toMatchInlineSnapshot(`
+      [
+        {
+          "changeDescriptions": Map {},
+          "duration": 0,
+          "effectDuration": null,
+          "fiberActualDurations": Map {
+            1 => 0,
+            2 => 0,
+          },
+          "fiberSelfDurations": Map {
+            1 => 0,
+            2 => 0,
+          },
+          "passiveEffectDuration": null,
+          "priorityLevel": "Normal",
+          "timestamp": 0,
+          "updaters": [
+            {
+              "compiledWithForget": false,
+              "displayName": "createRoot()",
+              "env": null,
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "stack": null,
+              "type": 11,
+            },
+          ],
+        },
+      ]
+    `);
+  });
+
+  // See https://github.com/facebook/react/issues/18831
+  // @reactVersion >= 16.9
+  it('should not crash during route transitions with Suspense', () => {
+    const RouterContext = React.createContext();
+
+    function App() {
+      return (
+        <Router>
+          <Switch>
+            <Route path="/">
+              <Home />
+            </Route>
+            <Route path="/about">
+              <About />
+            </Route>
+          </Switch>
+        </Router>
+      );
+    }
+
+    const Home = () => {
+      return (
+        <React.Suspense>
+          <Link path="/about">Home</Link>
+        </React.Suspense>
+      );
+    };
+
+    const About = () => <div>About</div>;
+
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js
+    function Router({children}) {
+      const [path, setPath] = React.useState('/');
+      return (
+        <RouterContext.Provider value={{path, setPath}}>
+          {children}
+        </RouterContext.Provider>
+      );
+    }
+
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js
+    function Switch({children}) {
+      return (
+        <RouterContext.Consumer>
+          {context => {
+            let element = null;
+            React.Children.forEach(children, child => {
+              if (context.path === child.props.path) {
+                element = child.props.children;
+              }
+            });
+            return element ? React.cloneElement(element) : null;
+          }}
+        </RouterContext.Consumer>
+      );
+    }
+
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js
+    function Route({children, path}) {
+      return null;
+    }
+
+    const linkRef = React.createRef();
+
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
+    function Link({children, path}) {
+      return (
+        <RouterContext.Consumer>
+          {context => {
+            return (
+              <button ref={linkRef} onClick={() => context.setPath(path)}>
+                {children}
+              </button>
+            );
+          }}
+        </RouterContext.Consumer>
+      );
+    }
+
+    utils.act(() => render(<App />));
+    expect(getContainer().textContent).toBe('Home');
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      linkRef.current.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      ),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+    expect(getContainer().textContent).toBe('About');
+  });
+
+  // @reactVersion >= 18.0
+  it('components that were deleted and added to updaters during the layout phase should not crash', () => {
+    let setChildUnmounted;
+    function Child() {
+      const [, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        return () => setState(true);
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [childUnmounted, _setChildUnmounted] = React.useState(false);
+      setChildUnmounted = _setChildUnmounted;
+      return <>{!childUnmounted && <Child />}</>;
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    utils.act(() => root.render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => setChildUnmounted(true));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const updaters = store.profilerStore.getCommitData(
+      store.roots[0],
+      0,
+    ).updaters;
+    expect(updaters.length).toEqual(1);
+    expect(updaters[0].displayName).toEqual('App');
+  });
+
+  // @reactVersion >= 18.0
+  it('components in a deleted subtree and added to updaters during the layout phase should not crash', () => {
+    let setChildUnmounted;
+    function Child() {
+      return <GrandChild />;
+    }
+
+    function GrandChild() {
+      const [, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        return () => setState(true);
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [childUnmounted, _setChildUnmounted] = React.useState(false);
+      setChildUnmounted = _setChildUnmounted;
+      return <>{!childUnmounted && <Child />}</>;
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    utils.act(() => root.render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => setChildUnmounted(true));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const updaters = store.profilerStore.getCommitData(
+      store.roots[0],
+      0,
+    ).updaters;
+    expect(updaters.length).toEqual(1);
+    expect(updaters[0].displayName).toEqual('App');
+  });
+
+  // @reactVersion >= 18.0
+  it('components that were deleted should not be added to updaters during the passive phase', () => {
+    let setChildUnmounted;
+    function Child() {
+      const [, setState] = React.useState(false);
+      React.useEffect(() => {
+        return () => setState(true);
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [childUnmounted, _setChildUnmounted] = React.useState(false);
+      setChildUnmounted = _setChildUnmounted;
+      return <>{!childUnmounted && <Child />}</>;
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    utils.act(() => root.render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => setChildUnmounted(true));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const updaters = store.profilerStore.getCommitData(
+      store.roots[0],
+      0,
+    ).updaters;
+    expect(updaters.length).toEqual(1);
+    expect(updaters[0].displayName).toEqual('App');
+  });
+});
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 00000000000..e54af61d620
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -0,0 +1,301 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('profiling charts', () => {
+  let React;
+  let Scheduler;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    Scheduler = require('scheduler');
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  function getFlamegraphChartData(rootID, commitIndex) {
+    const commitTree = store.profilerStore.profilingCache.getCommitTree({
+      commitIndex,
+      rootID,
+    });
+    const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
+      {
+        commitIndex,
+        commitTree,
+        rootID,
+      },
+    );
+    return {commitTree, chartData};
+  }
+
+  function getRankedChartData(rootID, commitIndex) {
+    const commitTree = store.profilerStore.profilingCache.getCommitTree({
+      commitIndex,
+      rootID,
+    });
+    const chartData = store.profilerStore.profilingCache.getRankedChartData({
+      commitIndex,
+      commitTree,
+      rootID,
+    });
+    return {commitTree, chartData};
+  }
+
+  describe('flamegraph chart', () => {
+    // @reactVersion >= 16.9
+    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;
+      });
+
+      utils.act(() => store.profilerStore.startProfiling());
+
+      utils.act(() => render(<Parent />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
+
+      utils.act(() => render(<Parent />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
+
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const rootID = store.roots[0];
+
+      const firstCommitData = getFlamegraphChartData(rootID, 0);
+      expect(firstCommitData.commitTree.nodes.size).toBe(5);
+      expect(firstCommitData.chartData.rows).toMatchInlineSnapshot(`
+        [
+          [
+            {
+              "actualDuration": 15,
+              "didRender": true,
+              "id": 2,
+              "label": "Parent (10ms of 15ms)",
+              "name": "Parent",
+              "offset": 0,
+              "selfDuration": 10,
+              "treeBaseDuration": 15,
+            },
+          ],
+          [
+            {
+              "actualDuration": 0,
+              "didRender": true,
+              "id": 5,
+              "label": "Child (Memo) key="third" (<0.1ms of <0.1ms)",
+              "name": "Child",
+              "offset": 15,
+              "selfDuration": 0,
+              "treeBaseDuration": 0,
+            },
+            {
+              "actualDuration": 2,
+              "didRender": true,
+              "id": 4,
+              "label": "Child (Memo) key="second" (2ms of 2ms)",
+              "name": "Child",
+              "offset": 13,
+              "selfDuration": 2,
+              "treeBaseDuration": 2,
+            },
+            {
+              "actualDuration": 3,
+              "didRender": true,
+              "id": 3,
+              "label": "Child (Memo) key="first" (3ms of 3ms)",
+              "name": "Child",
+              "offset": 10,
+              "selfDuration": 3,
+              "treeBaseDuration": 3,
+            },
+          ],
+        ]
+      `);
+
+      const secondCommitData = getFlamegraphChartData(rootID, 1);
+      expect(secondCommitData.commitTree.nodes.size).toBe(5);
+      expect(secondCommitData.chartData.rows).toMatchInlineSnapshot(`
+        [
+          [
+            {
+              "actualDuration": 10,
+              "didRender": true,
+              "id": 2,
+              "label": "Parent (10ms of 10ms)",
+              "name": "Parent",
+              "offset": 0,
+              "selfDuration": 10,
+              "treeBaseDuration": 15,
+            },
+          ],
+          [
+            {
+              "actualDuration": 0,
+              "didRender": false,
+              "id": 5,
+              "label": "Child (Memo) key="third"",
+              "name": "Child",
+              "offset": 15,
+              "selfDuration": 0,
+              "treeBaseDuration": 0,
+            },
+            {
+              "actualDuration": 0,
+              "didRender": false,
+              "id": 4,
+              "label": "Child (Memo) key="second"",
+              "name": "Child",
+              "offset": 13,
+              "selfDuration": 0,
+              "treeBaseDuration": 2,
+            },
+            {
+              "actualDuration": 0,
+              "didRender": false,
+              "id": 3,
+              "label": "Child (Memo) key="first"",
+              "name": "Child",
+              "offset": 10,
+              "selfDuration": 0,
+              "treeBaseDuration": 3,
+            },
+          ],
+        ]
+      `);
+    });
+  });
+
+  describe('ranked chart', () => {
+    // @reactVersion >= 16.9
+    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;
+      });
+
+      utils.act(() => store.profilerStore.startProfiling());
+
+      utils.act(() => render(<Parent />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
+
+      utils.act(() => render(<Parent />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
+
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const rootID = store.roots[0];
+
+      // Everything should render the first time.
+      const firstCommitData = getRankedChartData(rootID, 0);
+      expect(firstCommitData.commitTree.nodes.size).toBe(5);
+      expect(firstCommitData.chartData.nodes).toMatchInlineSnapshot(`
+        [
+          {
+            "id": 2,
+            "label": "Parent (10ms)",
+            "name": "Parent",
+            "value": 10,
+          },
+          {
+            "id": 3,
+            "label": "Child (Memo) key="first" (3ms)",
+            "name": "Child",
+            "value": 3,
+          },
+          {
+            "id": 4,
+            "label": "Child (Memo) key="second" (2ms)",
+            "name": "Child",
+            "value": 2,
+          },
+          {
+            "id": 5,
+            "label": "Child (Memo) key="third" (<0.1ms)",
+            "name": "Child",
+            "value": 0,
+          },
+        ]
+      `);
+
+      // Only parent should render the second time, since child props have not changed.
+      const secondCommitData = getRankedChartData(rootID, 1);
+      expect(secondCommitData.commitTree.nodes.size).toBe(5);
+      expect(secondCommitData.chartData.nodes).toMatchInlineSnapshot(`
+        [
+          {
+            "id": 2,
+            "label": "Parent (10ms)",
+            "name": "Parent",
+            "value": 10,
+          },
+        ]
+      `);
+    });
+  });
+});
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 00000000000..968fda10dab
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {
+  getLegacyRenderImplementation,
+  getModernRenderImplementation,
+} from './utils';
+
+describe('commit tree', () => {
+  let React = require('react');
+  let Scheduler;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    Scheduler = require('scheduler');
+  });
+
+  const {render: legacyRender} = getLegacyRenderImplementation();
+  const {render: modernRender} = getModernRenderImplementation();
+
+  // @reactVersion >= 16.9
+  // @reactVersion <= 18.2
+  it('should be able to rebuild the store tree for each commit (legacy render)', () => {
+    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;
+    });
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => legacyRender(<Parent count={1} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+    `);
+    utils.act(() => legacyRender(<Parent count={3} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+            <Child key="1"> [Memo]
+            <Child key="2"> [Memo]
+    `);
+    utils.act(() => legacyRender(<Parent count={2} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+            <Child key="1"> [Memo]
+    `);
+    utils.act(() => legacyRender(<Parent count={0} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Parent>
+    `);
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitTrees = [];
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      commitTrees.push(
+        store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        }),
+      );
+    }
+
+    expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <Parent> + <Child>
+    expect(commitTrees[1].nodes.size).toBe(5); // <Root> + <Parent> + <Child> x 3
+    expect(commitTrees[2].nodes.size).toBe(4); // <Root> + <Parent> + <Child> x 2
+    expect(commitTrees[3].nodes.size).toBe(2); // <Root> + <Parent>
+  });
+
+  // @reactVersion >= 18
+  it('should be able to rebuild the store tree for each commit (createRoot)', () => {
+    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;
+    });
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => modernRender(<Parent count={1} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+    `);
+    utils.act(() => modernRender(<Parent count={3} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+            <Child key="1"> [Memo]
+            <Child key="2"> [Memo]
+    `);
+    utils.act(() => modernRender(<Parent count={2} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+            <Child key="1"> [Memo]
+    `);
+    utils.act(() => modernRender(<Parent count={0} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Parent>
+    `);
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitTrees = [];
+    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
+      commitTrees.push(
+        store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        }),
+      );
+    }
+
+    expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <Parent> + <Child>
+    expect(commitTrees[1].nodes.size).toBe(5); // <Root> + <Parent> + <Child> x 3
+    expect(commitTrees[2].nodes.size).toBe(4); // <Root> + <Parent> + <Child> x 2
+    expect(commitTrees[3].nodes.size).toBe(2); // <Root> + <Parent>
+  });
+
+  describe('Lazy', () => {
+    async function fakeImport(result) {
+      return {default: result};
+    }
+
+    const LazyInnerComponent = () => null;
+
+    const App = ({renderChildren}) => {
+      if (renderChildren) {
+        return (
+          <React.Suspense fallback="Loading...">
+            <LazyComponent />
+          </React.Suspense>
+        );
+      } else {
+        return null;
+      }
+    };
+
+    let LazyComponent;
+    beforeEach(() => {
+      LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));
+    });
+
+    // @reactVersion >= 16.9
+    // @reactVersion <= 18.2
+    it('should support Lazy components (legacy render)', async () => {
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() => legacyRender(<App renderChildren={true} />));
+      await Promise.resolve();
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+      utils.act(() => legacyRender(<App renderChildren={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+      utils.act(() => legacyRender(<App renderChildren={false} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const rootID = store.roots[0];
+      const commitTrees = [];
+      for (let commitIndex = 0; commitIndex < 3; commitIndex++) {
+        commitTrees.push(
+          store.profilerStore.profilingCache.getCommitTree({
+            commitIndex,
+            rootID,
+          }),
+        );
+      }
+
+      expect(commitTrees[0].nodes.size).toBe(3);
+      expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
+      expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
+    });
+
+    // @reactVersion >= 18.0
+    it('should support Lazy components (createRoot)', async () => {
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() => modernRender(<App renderChildren={true} />));
+      await Promise.resolve();
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+      utils.act(() => modernRender(<App renderChildren={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+      utils.act(() => modernRender(<App renderChildren={false} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const rootID = store.roots[0];
+      const commitTrees = [];
+      for (let commitIndex = 0; commitIndex < 3; commitIndex++) {
+        commitTrees.push(
+          store.profilerStore.profilingCache.getCommitTree({
+            commitIndex,
+            rootID,
+          }),
+        );
+      }
+
+      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
+      expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
+      expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
+    });
+
+    // @reactVersion >= 16.9
+    // @reactVersion <= 18.2
+    it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() => legacyRender(<App renderChildren={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+      utils.act(() => legacyRender(<App renderChildren={false} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const rootID = store.roots[0];
+      const commitTrees = [];
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        commitTrees.push(
+          store.profilerStore.profilingCache.getCommitTree({
+            commitIndex,
+            rootID,
+          }),
+        );
+      }
+
+      expect(commitTrees[0].nodes.size).toBe(3);
+      expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
+    });
+
+    // @reactVersion >= 18.0
+    it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() => modernRender(<App renderChildren={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+      utils.act(() => modernRender(<App renderChildren={false} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const rootID = store.roots[0];
+      const commitTrees = [];
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        commitTrees.push(
+          store.profilerStore.profilingCache.getCommitTree({
+            commitIndex,
+            rootID,
+          }),
+        );
+      }
+
+      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
+      expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
+    });
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
new file mode 100644
index 00000000000..f2f4ee10ca2
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  getLegacyRenderImplementation,
+  getModernRenderImplementation,
+} from './utils';
+
+describe('profiling HostRoot', () => {
+  let React;
+  let Scheduler;
+  let store;
+  let utils;
+  let getEffectDurations;
+  let effectDurations;
+  let passiveEffectDurations;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    getEffectDurations = require('../backend/utils').getEffectDurations;
+
+    store = global.store;
+
+    React = require('react');
+    Scheduler = require('scheduler');
+
+    effectDurations = [];
+    passiveEffectDurations = [];
+
+    // This is the DevTools hook installed by the env.beforEach()
+    // The hook is installed as a read-only property on the window,
+    // so for our test purposes we can just override the commit hook.
+    const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    hook.onPostCommitFiberRoot = function onPostCommitFiberRoot(
+      rendererID,
+      root,
+    ) {
+      const {effectDuration, passiveEffectDuration} = getEffectDurations(root);
+      effectDurations.push(effectDuration);
+      passiveEffectDurations.push(passiveEffectDuration);
+    };
+  });
+
+  const {render: legacyRender} = getLegacyRenderImplementation();
+  const {render: modernRender} = getModernRenderImplementation();
+
+  // @reactVersion >= 18.0
+  // @reactVersion <= 18.2
+  it('should expose passive and layout effect durations for render()', () => {
+    function App() {
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(10);
+      });
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(100);
+      });
+      return null;
+    }
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => {
+      legacyRender(<App />);
+    });
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    expect(effectDurations).toHaveLength(1);
+    const effectDuration = effectDurations[0];
+    expect(effectDuration === null || effectDuration === 100).toBe(true);
+    expect(passiveEffectDurations).toHaveLength(1);
+    const passiveEffectDuration = passiveEffectDurations[0];
+    expect(passiveEffectDuration === null || passiveEffectDuration === 10).toBe(
+      true,
+    );
+  });
+
+  // @reactVersion >=18.0
+  it('should expose passive and layout effect durations for createRoot()', () => {
+    function App() {
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(10);
+      });
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(100);
+      });
+      return null;
+    }
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => {
+      modernRender(<App />);
+    });
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    expect(effectDurations).toHaveLength(1);
+    const effectDuration = effectDurations[0];
+    expect(effectDuration === null || effectDuration === 100).toBe(true);
+    expect(passiveEffectDurations).toHaveLength(1);
+    const passiveEffectDuration = passiveEffectDurations[0];
+    expect(passiveEffectDuration === null || passiveEffectDuration === 10).toBe(
+      true,
+    );
+  });
+
+  // @reactVersion >=18.0
+  it('should properly reset passive and layout effect durations between commits', () => {
+    function App({shouldCascade}) {
+      const [, setState] = React.useState(false);
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(10);
+      });
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(100);
+      });
+      React.useLayoutEffect(() => {
+        if (shouldCascade) {
+          setState(true);
+        }
+      }, [shouldCascade]);
+      return null;
+    }
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => modernRender(<App />));
+    utils.act(() => modernRender(<App shouldCascade={true} />));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    expect(effectDurations).toHaveLength(3);
+    expect(passiveEffectDurations).toHaveLength(3);
+
+    for (let i = 0; i < effectDurations.length; i++) {
+      const effectDuration = effectDurations[i];
+      expect(effectDuration === null || effectDuration === 100).toBe(true);
+      const passiveEffectDuration = passiveEffectDurations[i];
+      expect(
+        passiveEffectDuration === null || passiveEffectDuration === 10,
+      ).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 00000000000..b9c190d48f7
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 profile export version');
+  });
+});
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 00000000000..5774a573b31
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -0,0 +1,299 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {CustomConsole} from '@jest/console';
+
+import type {
+  BackendBridge,
+  FrontendBridge,
+} from 'react-devtools-shared/src/bridge';
+
+const {getTestFlags} = require('../../../../scripts/jest/TestFlags');
+
+// Argument is serialized when passed from jest-cli script through to setupTests.
+const compactConsole = process.env.compactConsole === 'true';
+if (compactConsole) {
+  const formatter = (type, message) => {
+    switch (type) {
+      case 'error':
+        return '\x1b[31m' + message + '\x1b[0m';
+      case 'warn':
+        return '\x1b[33m' + message + '\x1b[0m';
+      case 'log':
+      default:
+        return message;
+    }
+  };
+
+  global.console = new CustomConsole(process.stdout, process.stderr, formatter);
+}
+
+const expectTestToFail = async (callback, error) => {
+  if (callback.length > 0) {
+    throw Error(
+      'Gated test helpers do not support the `done` callback. Return a ' +
+        'promise instead.',
+    );
+  }
+  try {
+    const maybePromise = callback();
+    if (
+      maybePromise !== undefined &&
+      maybePromise !== null &&
+      typeof maybePromise.then === 'function'
+    ) {
+      await maybePromise;
+    }
+  } catch (testError) {
+    return;
+  }
+  throw error;
+};
+
+const gatedErrorMessage = 'Gated test was expected to fail, but it passed.';
+global._test_gate = (gateFn, testName, callback) => {
+  let shouldPass;
+  try {
+    const flags = getTestFlags();
+    shouldPass = gateFn(flags);
+  } catch (e) {
+    test(testName, () => {
+      throw e;
+    });
+    return;
+  }
+  if (shouldPass) {
+    test(testName, callback);
+  } else {
+    const error = new Error(gatedErrorMessage);
+    Error.captureStackTrace(error, global._test_gate);
+    test(`[GATED, SHOULD FAIL] ${testName}`, () =>
+      expectTestToFail(callback, error));
+  }
+};
+global._test_gate_focus = (gateFn, testName, callback) => {
+  let shouldPass;
+  try {
+    const flags = getTestFlags();
+    shouldPass = gateFn(flags);
+  } catch (e) {
+    test.only(testName, () => {
+      throw e;
+    });
+    return;
+  }
+  if (shouldPass) {
+    test.only(testName, callback);
+  } else {
+    const error = new Error(gatedErrorMessage);
+    Error.captureStackTrace(error, global._test_gate_focus);
+    test.only(`[GATED, SHOULD FAIL] ${testName}`, () =>
+      expectTestToFail(callback, error));
+  }
+};
+
+// Dynamic version of @gate pragma
+global.gate = fn => {
+  const flags = getTestFlags();
+  return fn(flags);
+};
+
+function shouldIgnoreConsoleErrorOrWarn(args) {
+  let firstArg = args[0];
+  if (
+    firstArg !== null &&
+    typeof firstArg === 'object' &&
+    String(firstArg).indexOf('Error: Uncaught [') === 0
+  ) {
+    firstArg = String(firstArg);
+  } else if (typeof firstArg !== 'string') {
+    return false;
+  }
+
+  const maybeError = args[1];
+  if (
+    maybeError !== null &&
+    typeof maybeError === 'object' &&
+    maybeError.message === 'Simulated error coming from DevTools'
+  ) {
+    // Error from forcing an error boundary.
+    return true;
+  }
+
+  return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => {
+    return firstArg.indexOf(errorOrWarningMessage) !== -1;
+  });
+}
+
+function patchConsoleForTestingBeforeHookInstallation() {
+  const originalConsoleError = console.error;
+  const originalConsoleWarn = console.warn;
+  const originalConsoleLog = console.log;
+
+  const consoleErrorMock = jest.fn();
+  const consoleWarnMock = jest.fn();
+  const consoleLogMock = jest.fn();
+
+  global.consoleErrorMock = consoleErrorMock;
+  global.consoleWarnMock = consoleWarnMock;
+  global.consoleLogMock = consoleLogMock;
+
+  console.error = (...args) => {
+    let firstArg = args[0];
+    if (typeof firstArg === 'string' && firstArg.startsWith('Warning: ')) {
+      // Older React versions might use the Warning: prefix. I'm not sure
+      // if they use this code path.
+      firstArg = firstArg.slice(9);
+    }
+    if (firstArg === 'React instrumentation encountered an error: %o') {
+      // Rethrow errors from React.
+      throw args[1];
+    } else if (
+      typeof firstArg === 'string' &&
+      (firstArg.startsWith("It looks like you're using the wrong act()") ||
+        firstArg.startsWith(
+          'The current testing environment is not configured to support act',
+        ) ||
+        firstArg.startsWith('You seem to have overlapping act() calls') ||
+        firstArg.startsWith(
+          'ReactDOM.render is no longer supported in React 18.',
+        ))
+    ) {
+      // DevTools intentionally wraps updates with acts from both DOM and test-renderer,
+      // since test updates are expected to impact both renderers.
+      return;
+    } else if (shouldIgnoreConsoleErrorOrWarn(args)) {
+      // Allows testing how DevTools behaves when it encounters console.error without cluttering the test output.
+      // Errors can be ignored by running in a special context provided by utils.js#withErrorsOrWarningsIgnored
+      return;
+    }
+
+    consoleErrorMock(...args);
+    originalConsoleError.apply(console, args);
+  };
+  console.warn = (...args) => {
+    if (shouldIgnoreConsoleErrorOrWarn(args)) {
+      // Allows testing how DevTools behaves when it encounters console.warn without cluttering the test output.
+      // Warnings can be ignored by running in a special context provided by utils.js#withErrorsOrWarningsIgnored
+      return;
+    }
+
+    consoleWarnMock(...args);
+    originalConsoleWarn.apply(console, args);
+  };
+  console.log = (...args) => {
+    consoleLogMock(...args);
+    originalConsoleLog.apply(console, args);
+  };
+}
+
+function unpatchConsoleAfterTesting() {
+  delete global.consoleErrorMock;
+  delete global.consoleWarnMock;
+  delete global.consoleLogMock;
+}
+
+beforeEach(() => {
+  patchConsoleForTestingBeforeHookInstallation();
+
+  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-required) 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,
+    setSavedComponentFilters,
+  } = require('react-devtools-shared/src/utils');
+
+  // Fake timers let us flush Bridge operations between setup and assertions.
+  jest.useFakeTimers();
+
+  // We use fake timers heavily in tests but the bridge batching now uses microtasks.
+  global.devtoolsJestTestScheduler = callback => {
+    setTimeout(callback, 0);
+  };
+
+  // Use utils.js#withErrorsOrWarningsIgnored instead of directly mutating this array.
+  global._ignoredErrorOrWarningMessages = [
+    'react-test-renderer is deprecated.',
+  ];
+
+  // Initialize filters to a known good state.
+  setSavedComponentFilters(getDefaultComponentFilters());
+  global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
+
+  installHook(global, {
+    appendComponentStack: true,
+    breakOnConsoleErrors: false,
+    showInlineWarningsAndErrors: true,
+    hideConsoleLogsInStrictMode: false,
+    disableSecondConsoleLogDimmingInStrictMode: false,
+  });
+
+  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 store = new Store(((bridge: any): FrontendBridge), {
+    supportsTimeline: true,
+  });
+
+  const agent = new Agent(((bridge: any): BackendBridge));
+  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  initBackend(hook, agent, global);
+
+  global.agent = agent;
+  global.bridge = bridge;
+  global.store = store;
+
+  const readFileSync = require('fs').readFileSync;
+  async function mockFetch(url) {
+    return {
+      ok: true,
+      status: 200,
+      text: async () => readFileSync(__dirname + url, 'utf-8'),
+    };
+  }
+  global.fetch = mockFetch;
+});
+
+afterEach(() => {
+  delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  unpatchConsoleAfterTesting();
+
+  // 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 00000000000..8c9beb18544
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -0,0 +1,3541 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 semver from 'semver';
+
+import {getVersionedRenderImplementation} from './utils';
+import {ReactVersion} from '../../../../ReactVersions';
+
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
+
+describe('Store', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let agent;
+  let act;
+  let actAsync;
+  let bridge;
+  let createDisplayNameFilter;
+  let getRendererID;
+  let legacyRender;
+  let previousComponentFilters;
+  let store;
+  let withErrorsOrWarningsIgnored;
+
+  function readValue(promise) {
+    if (typeof React.use === 'function') {
+      return React.use(promise);
+    }
+
+    // Support for React < 19.0
+    switch (promise.status) {
+      case 'fulfilled':
+        return promise.value;
+      case 'rejected':
+        throw promise.reason;
+      case 'pending':
+        throw promise;
+      default:
+        promise.status = 'pending';
+        promise.then(
+          value => {
+            promise.status = 'fulfilled';
+            promise.value = value;
+          },
+          reason => {
+            promise.status = 'rejected';
+            promise.reason = reason;
+          },
+        );
+        throw promise;
+    }
+  }
+
+  beforeAll(() => {
+    // JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
+    Element.prototype.getClientRects = function (this: Element) {
+      const textContent = this.textContent;
+      return [
+        new DOMRect(1, 2, textContent.length, textContent.split('\n').length),
+      ];
+    };
+  });
+
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    agent = global.agent;
+    bridge = global.bridge;
+    store = global.store;
+
+    previousComponentFilters = store.componentFilters;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+
+    const utils = require('./utils');
+    act = utils.act;
+    actAsync = utils.actAsync;
+    getRendererID = utils.getRendererID;
+    legacyRender = utils.legacyRender;
+    createDisplayNameFilter = utils.createDisplayNameFilter;
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
+  });
+
+  afterEach(() => {
+    store.componentFilters = previousComponentFilters;
+  });
+
+  const {render, unmount, createContainer} = getVersionedRenderImplementation();
+
+  // @reactVersion >= 18.0
+  it('should not allow a root node to be collapsed', async () => {
+    const Component = () => <div>Hi</div>;
+
+    await act(() => render(<Component count={4} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Component>
+    `);
+
+    expect(store.roots).toHaveLength(1);
+
+    const rootID = store.roots[0];
+
+    expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
+      'Root nodes cannot be collapsed',
+    );
+  });
+
+  // @reactVersion >= 18.0
+  it('should properly handle a root with no visible nodes', async () => {
+    const Root = ({children}) => children;
+
+    await act(() => render(<Root>{null}</Root>));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Root>
+    `);
+
+    await act(() => render(<div />));
+    expect(store).toMatchInlineSnapshot(`[root]`);
+  });
+
+  // This test is not the same cause as what's reported on GitHub,
+  // but the resulting behavior (owner mounting after descendant) is the same.
+  // Thec ase below is admittedly contrived and relies on side effects.
+  // I'mnot yet sure of how to reduce the GitHub reported production case to a test though.
+  // See https://github.com/facebook/react/issues/21445
+  // @reactVersion >= 18.0
+  it('should handle when a component mounts before its owner', async () => {
+    const promise = new Promise(resolve => {});
+
+    let Dynamic = null;
+    const Owner = () => {
+      Dynamic = <Child />;
+      readValue(promise);
+    };
+    const Parent = () => {
+      return Dynamic;
+    };
+    const Child = () => null;
+
+    await act(() =>
+      render(
+        <>
+          <React.Suspense fallback="Loading...">
+            <Owner />
+          </React.Suspense>
+          <Parent />
+        </>,
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Suspense>
+        ▾ <Parent>
+            <Child>
+      [suspense-root]  rects={null}
+        <Suspense name="Unknown" rects={null}>
+    `);
+  });
+
+  // @reactVersion >= 18.0
+  it('should handle multibyte character strings', async () => {
+    const Component = () => null;
+    Component.displayName = '🟩💜🔵';
+
+    await act(() => render(<Component />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <🟩💜🔵>
+    `);
+  });
+
+  it('should handle reorder of filtered elements', async () => {
+    function IgnoreMePassthrough({children}) {
+      return children;
+    }
+    function PassThrough({children}) {
+      return children;
+    }
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [createDisplayNameFilter('^IgnoreMe', true)]),
+    );
+
+    await act(() => {
+      render(
+        <PassThrough key="e" name="e">
+          <IgnoreMePassthrough key="e1">
+            <PassThrough name="e-child-one">
+              <p>e1</p>
+            </PassThrough>
+          </IgnoreMePassthrough>
+          <IgnoreMePassthrough key="e2">
+            <PassThrough name="e-child-two">
+              <div>e2</div>
+            </PassThrough>
+          </IgnoreMePassthrough>
+        </PassThrough>,
+      );
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <PassThrough key="e">
+          ▾ <PassThrough>
+              <p>
+          ▾ <PassThrough>
+              <div>
+    `);
+
+    await act(() => {
+      render(
+        <PassThrough key="e" name="e">
+          <IgnoreMePassthrough key="e2">
+            <PassThrough name="e-child-two">
+              <div>e2</div>
+            </PassThrough>
+          </IgnoreMePassthrough>
+          <IgnoreMePassthrough key="e1">
+            <PassThrough name="e-child-one">
+              <p>e1</p>
+            </PassThrough>
+          </IgnoreMePassthrough>
+        </PassThrough>,
+      );
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <PassThrough key="e">
+          ▾ <PassThrough>
+              <div>
+          ▾ <PassThrough>
+              <p>
+    `);
+  });
+
+  describe('StrictMode compliance', () => {
+    it('should mark strict root elements as strict', async () => {
+      const App = () => <Component />;
+      const Component = () => null;
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container, {
+        unstable_strictMode: true,
+      });
+      await act(() => {
+        root.render(<App />);
+      });
+
+      expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
+      expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(false);
+    });
+
+    // @reactVersion >= 18.0
+    it('should mark non strict root elements as not strict', async () => {
+      const App = () => <Component />;
+      const Component = () => null;
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<App />);
+      });
+
+      expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(true);
+      expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(true);
+    });
+
+    it('should mark StrictMode subtree elements as strict', async () => {
+      const App = () => (
+        <React.StrictMode>
+          <Component />
+        </React.StrictMode>
+      );
+      const Component = () => null;
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<App />);
+      });
+
+      expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(true);
+      expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(false);
+    });
+  });
+
+  describe('collapseNodesByDefault:false', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    // @reactVersion >= 18.0
+    it('should support mount and update operations', async () => {
+      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>;
+
+      await act(() => render(<Grandparent count={4} />));
+      expect(store).toMatchInlineSnapshot(`
+        [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">
+      `);
+
+      await act(() => render(<Grandparent count={2} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
+
+      await act(() => unmount());
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    // @reactVersion >= 18.0
+    // @reactVersion < 19
+    // @gate !disableLegacyMode
+    it('should support mount and update operations for multiple roots (legacy render)', async () => {
+      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');
+
+      await act(() => {
+        legacyRender(<Parent key="A" count={3} />, containerA);
+        legacyRender(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+        [root]
+          ▾ <Parent key="B">
+              <Child key="0">
+              <Child key="1">
+      `);
+
+      await act(() => {
+        legacyRender(<Parent key="A" count={4} />, containerA);
+        legacyRender(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+              <Child key="3">
+        [root]
+          ▾ <Parent key="B">
+              <Child key="0">
+      `);
+
+      await act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+              <Child key="3">
+      `);
+
+      await act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support mount and update operations for multiple roots (createRoot)', async () => {
+      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');
+
+      const rootA = ReactDOMClient.createRoot(containerA);
+      const rootB = ReactDOMClient.createRoot(containerB);
+
+      await act(() => {
+        rootA.render(<Parent key="A" count={3} />);
+        rootB.render(<Parent key="B" count={2} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+        [root]
+          ▾ <Parent key="B">
+              <Child key="0">
+              <Child key="1">
+      `);
+
+      await act(() => {
+        rootA.render(<Parent key="A" count={4} />);
+        rootB.render(<Parent key="B" count={1} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+              <Child key="3">
+        [root]
+          ▾ <Parent key="B">
+              <Child key="0">
+      `);
+
+      await act(() => rootB.unmount());
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+              <Child key="3">
+      `);
+
+      await act(() => rootA.unmount());
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    // @reactVersion >= 18.0
+    it('should filter DOM nodes from the store tree', async () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      await act(() => render(<Grandparent count={4} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child>
+            ▾ <Parent>
+                <Child>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should display Suspense nodes properly in various states', async () => {
+      const Loading = () => <div>Loading...</div>;
+      const never = new Promise(() => {});
+      const SuspendingComponent = () => {
+        readValue(never);
+      };
+      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>
+      );
+
+      await act(() => render(<Wrapper shouldSuspense={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading>
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="Wrapper" rects={null}>
+      `);
+
+      await act(() => {
+        render(<Wrapper shouldSuspense={false} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Inside">
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
+          <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support nested Suspense nodes', async () => {
+      const Component = () => null;
+      const Loading = () => <div>Loading...</div>;
+      const never = new Promise(() => {});
+      const Never = () => {
+        readValue(never);
+      };
+
+      const Wrapper = ({
+        suspendFirst = false,
+        suspendSecond = false,
+        suspendParent = false,
+      }) => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense
+            name="parent"
+            fallback={<Loading key="Parent Fallback" />}>
+            <Component key="Unrelated at Start" />
+            <React.Suspense
+              name="one"
+              fallback={<Loading key="Suspense 1 Fallback" />}>
+              {suspendFirst ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 1 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense
+              name="two"
+              fallback={<Loading key="Suspense 2 Fallback" />}>
+              {suspendSecond ? (
+                <Never />
+              ) : (
+                <Component key="Suspense 2 Content" />
+              )}
+            </React.Suspense>
+            <React.Suspense
+              name="three"
+              fallback={<Loading key="Suspense 3 Fallback" />}>
+              <Never />
+            </React.Suspense>
+            {suspendParent && <Never />}
+            <Component key="Unrelated at End" />
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      await actAsync(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={true}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={true}
+            suspendFirst={true}
+            suspendSecond={false}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Loading key="Parent Fallback">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+
+      const rendererID = getRendererID();
+      await act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: true,
+        }),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: true,
+        }),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Loading key="Parent Fallback">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={true}
+            suspendSecond={true}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Loading key="Parent Fallback">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await actAsync(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(2),
+          rendererID,
+          forceFallback: false,
+        }),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        agent.overrideSuspense({
+          id: store.getElementIDAtIndex(4),
+          rendererID,
+          forceFallback: false,
+        }),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+      await act(() =>
+        render(
+          <Wrapper
+            suspendParent={false}
+            suspendFirst={false}
+            suspendSecond={false}
+          />,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
+            <Suspense name="one" rects={null}>
+            <Suspense name="two" rects={null}>
+            <Suspense name="three" rects={null}>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('can override multiple Suspense simultaneously', async () => {
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const App = () => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense
+            name="parent"
+            fallback={<Component key="Parent Fallback" />}>
+            <Component key="Unrelated at Start" />
+            <React.Suspense
+              name="one"
+              fallback={<Component key="Suspense 1 Fallback" />}>
+              <Component key="Suspense 1 Content" />
+            </React.Suspense>
+            <React.Suspense
+              name="two"
+              fallback={<Component key="Suspense 2 Fallback" />}>
+              <Component key="Suspense 2 Content" />
+            </React.Suspense>
+            <React.Suspense
+              name="three"
+              fallback={<Component key="Suspense 3 Fallback" />}>
+              <Component key="Suspense 3 Content" />
+            </React.Suspense>
+            <Component key="Unrelated at End" />
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      await actAsync(() => render(<App />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Component key="Suspense 3 Content">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
+            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+
+      await actAsync(() => {
+        agent.overrideSuspenseMilestone({
+          suspendedSet: [
+            store.getElementIDAtIndex(4),
+            store.getElementIDAtIndex(8),
+          ],
+        });
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Component key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
+            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+
+      await actAsync(() => {
+        agent.overrideSuspenseMilestone({
+          suspendedSet: [],
+        });
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Component key="Suspense 3 Content">
+                <Component key="Unrelated at End">
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
+          <Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
+            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+    });
+
+    it('should display a partially rendered SuspenseList', async () => {
+      const Loading = () => <div>Loading...</div>;
+      const never = new Promise(() => {});
+      const SuspendingComponent = () => {
+        readValue(never);
+      };
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const Wrapper = ({shouldSuspense}) => (
+        <React.Fragment>
+          <React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
+            <Component key="A" />
+            <React.Suspense fallback={<Loading />}>
+              {shouldSuspense ? <SuspendingComponent /> : <Component key="B" />}
+            </React.Suspense>
+            <Component key="C" />
+          </React.unstable_SuspenseList>
+        </React.Fragment>
+      );
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Wrapper shouldSuspense={true} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <SuspenseList>
+                <Component key="A">
+              ▾ <Suspense>
+                  <Loading>
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="Wrapper" rects={null}>
+      `);
+
+      await act(() => {
+        root.render(<Wrapper shouldSuspense={false} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <SuspenseList>
+                <Component key="A">
+              ▾ <Suspense>
+                  <Component key="B">
+                <Component key="C">
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
+          <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support collapsing parts of the tree', async () => {
+      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>;
+
+      await act(() => render(<Grandparent count={2} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
+
+      const grandparentID = store.getElementIDAtIndex(0);
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(4);
+
+      await act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
+
+      await act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
+
+      await act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▸ <Parent>
+      `);
+
+      await act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+
+      await act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▸ <Parent>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support reordering of children', async () => {
+      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" />;
+
+      await act(() => render(<Root>{[foo, bar]}</Root>));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Foo key="foo">
+                <Component key="0">
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+      `);
+
+      await act(() => render(<Root>{[bar, foo]}</Root>));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+            ▾ <Foo key="foo">
+                <Component key="0">
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), true),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), false),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+            ▾ <Foo key="foo">
+                <Component key="0">
+      `);
+    });
+  });
+
+  describe('collapseNodesByDefault:true', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = true;
+    });
+
+    // @reactVersion >= 18.0
+    it('should support mount and update operations', async () => {
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => <div>Hi!</div>;
+
+      await act(() =>
+        render(
+          <React.Fragment>
+            <Parent count={1} />
+            <Parent count={3} />
+          </React.Fragment>,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent>
+          ▸ <Parent>
+      `);
+
+      await act(() =>
+        render(
+          <React.Fragment>
+            <Parent count={2} />
+            <Parent count={1} />
+          </React.Fragment>,
+        ),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent>
+          ▸ <Parent>
+      `);
+
+      await act(() => unmount());
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    // @reactVersion >= 18.0
+    // @reactVersion < 19
+    // @gate !disableLegacyMode
+    it('should support mount and update operations for multiple roots (legacy render)', async () => {
+      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');
+
+      await act(() => {
+        legacyRender(<Parent key="A" count={3} />, containerA);
+        legacyRender(<Parent key="B" count={2} />, containerB);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
+
+      await act(() => {
+        legacyRender(<Parent key="A" count={4} />, containerA);
+        legacyRender(<Parent key="B" count={1} />, containerB);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
+
+      await act(() => ReactDOM.unmountComponentAtNode(containerB));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+      `);
+
+      await act(() => ReactDOM.unmountComponentAtNode(containerA));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support mount and update operations for multiple roots (createRoot)', async () => {
+      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');
+
+      const rootA = ReactDOMClient.createRoot(containerA);
+      const rootB = ReactDOMClient.createRoot(containerB);
+
+      await act(() => {
+        rootA.render(<Parent key="A" count={3} />);
+        rootB.render(<Parent key="B" count={2} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
+
+      await act(() => {
+        rootA.render(<Parent key="A" count={4} />);
+        rootB.render(<Parent key="B" count={1} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
+
+      await act(() => rootB.unmount());
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+      `);
+
+      await act(() => rootA.unmount());
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    // @reactVersion >= 18.0
+    it('should filter DOM nodes from the store tree', async () => {
+      const Grandparent = () => (
+        <div>
+          <div>
+            <Parent />
+          </div>
+          <Parent />
+        </div>
+      );
+      const Parent = () => (
+        <div>
+          <Child />
+        </div>
+      );
+      const Child = () => <div>Hi!</div>;
+
+      await act(() => render(<Grandparent count={4} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), false),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child>
+            ▸ <Parent>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should display Suspense nodes properly in various states', async () => {
+      const Loading = () => <div>Loading...</div>;
+      const never = new Promise(() => {});
+      const SuspendingComponent = () => {
+        readValue(never);
+      };
+      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>
+      );
+
+      await act(() => render(<Wrapper shouldSuspense={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="Wrapper" rects={null}>
+      `);
+
+      // This test isn't meaningful unless we expand the suspended tree
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), false),
+      );
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading>
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
+          <Suspense name="Wrapper" rects={null}>
+      `);
+
+      await act(() => {
+        render(<Wrapper shouldSuspense={false} />);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Inside">
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
+          <Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support expanding parts of the tree', async () => {
+      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>;
+
+      await act(() => render(<Grandparent count={2} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+
+      const grandparentID = store.getElementIDAtIndex(0);
+
+      await act(() => store.toggleIsCollapsed(grandparentID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
+
+      const parentOneID = store.getElementIDAtIndex(1);
+      const parentTwoID = store.getElementIDAtIndex(2);
+
+      await act(() => store.toggleIsCollapsed(parentOneID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▸ <Parent>
+      `);
+
+      await act(() => store.toggleIsCollapsed(parentTwoID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
+
+      await act(() => store.toggleIsCollapsed(parentOneID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
+
+      await act(() => store.toggleIsCollapsed(parentTwoID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
+
+      await act(() => store.toggleIsCollapsed(grandparentID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support expanding deep parts of the tree', async () => {
+      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();
+
+      await act(() => render(<Wrapper forwardedRef={ref} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
+
+      const deepestedNodeID = agent.getIDForHostInstance(ref.current).id;
+
+      await act(() => store.toggleIsCollapsed(deepestedNodeID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                    <Nested>
+      `);
+
+      const rootID = store.getElementIDAtIndex(0);
+
+      await act(() => store.toggleIsCollapsed(rootID, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
+
+      await act(() => store.toggleIsCollapsed(rootID, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                    <Nested>
+      `);
+
+      const id = store.getElementIDAtIndex(1);
+
+      await act(() => store.toggleIsCollapsed(id, true));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▸ <Nested>
+      `);
+
+      await act(() => store.toggleIsCollapsed(id, false));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                    <Nested>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support reordering of children', async () => {
+      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" />;
+
+      await act(() => render(<Root>{[foo, bar]}</Root>));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+
+      await act(() => render(<Root>{[bar, foo]}</Root>));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), false),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▸ <Bar key="bar">
+            ▸ <Foo key="foo">
+      `);
+
+      await act(() => {
+        store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
+        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
+      });
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+            ▾ <Foo key="foo">
+                <Component key="0">
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), true),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should not add new nodes when suspense is toggled', async () => {
+      const SuspenseTree = () => {
+        return (
+          <React.Suspense fallback={<Fallback>Loading outer</Fallback>}>
+            <Parent />
+          </React.Suspense>
+        );
+      };
+
+      const Fallback = () => null;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      await act(() => render(<SuspenseTree />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <SuspenseTree>
+        [suspense-root]  rects={null}
+          <Suspense name="SuspenseTree" rects={null}>
+      `);
+
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(0), false),
+      );
+      await act(() =>
+        store.toggleIsCollapsed(store.getElementIDAtIndex(1), false),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <SuspenseTree>
+            ▾ <Suspense>
+              ▸ <Parent>
+        [suspense-root]  rects={null}
+          <Suspense name="SuspenseTree" rects={null}>
+      `);
+
+      const rendererID = getRendererID();
+      const suspenseID = store.getElementIDAtIndex(1);
+
+      await act(() =>
+        agent.overrideSuspense({
+          id: suspenseID,
+          rendererID,
+          forceFallback: true,
+        }),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <SuspenseTree>
+            ▾ <Suspense>
+                <Fallback>
+        [suspense-root]  rects={null}
+          <Suspense name="SuspenseTree" rects={null}>
+      `);
+
+      await act(() =>
+        agent.overrideSuspense({
+          id: suspenseID,
+          rendererID,
+          forceFallback: false,
+        }),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <SuspenseTree>
+            ▾ <Suspense>
+              ▸ <Parent>
+        [suspense-root]  rects={null}
+          <Suspense name="SuspenseTree" rects={null}>
+      `);
+    });
+  });
+
+  describe('getIndexOfElementID', () => {
+    beforeEach(() => {
+      store.collapseNodesByDefault = false;
+    });
+
+    // @reactVersion >= 18.0
+    it('should support a single root with a single child', async () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      await act(() => render(<Grandparent />));
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    // @reactVersion >= 18.0
+    it('should support multiple roots with one children each', async () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      await act(() => {
+        render(<Grandparent />);
+        render(<Grandparent />);
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    // @reactVersion >= 18.0
+    it('should support a single root with multiple top level children', async () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      await act(() =>
+        render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+        ),
+      );
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+
+    // @reactVersion >= 18.0
+    it('should support multiple roots with multiple top level children', async () => {
+      const Grandparent = () => <Parent />;
+      const Parent = () => <Child />;
+      const Child = () => null;
+
+      await act(() => {
+        render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+        );
+
+        createContainer();
+
+        render(
+          <React.Fragment>
+            <Grandparent />
+            <Grandparent />
+          </React.Fragment>,
+        );
+      });
+
+      for (let i = 0; i < store.numElements; i++) {
+        expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
+      }
+    });
+  });
+
+  // @reactVersion >= 18.0
+  // @reactVersion < 19
+  // @gate !disableLegacyMode
+  it('detects and updates profiling support based on the attached roots (legacy render)', async () => {
+    const Component = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    expect(store.rootSupportsBasicProfiling).toBe(false);
+
+    await act(() => legacyRender(<Component />, containerA));
+    expect(store.rootSupportsBasicProfiling).toBe(true);
+
+    await act(() => legacyRender(<Component />, containerB));
+    await act(() => ReactDOM.unmountComponentAtNode(containerA));
+    expect(store.rootSupportsBasicProfiling).toBe(true);
+
+    await act(() => ReactDOM.unmountComponentAtNode(containerB));
+    expect(store.rootSupportsBasicProfiling).toBe(false);
+  });
+
+  // @reactVersion >= 18
+  it('detects and updates profiling support based on the attached roots (createRoot)', async () => {
+    const Component = () => null;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+
+    expect(store.rootSupportsBasicProfiling).toBe(false);
+
+    await act(() => rootA.render(<Component />));
+    expect(store.rootSupportsBasicProfiling).toBe(true);
+
+    await act(() => rootB.render(<Component />));
+    await act(() => rootA.unmount());
+    expect(store.rootSupportsBasicProfiling).toBe(true);
+
+    await act(() => rootB.unmount());
+    expect(store.rootSupportsBasicProfiling).toBe(false);
+  });
+
+  // @reactVersion >= 18.0
+  it('should properly serialize non-string key values', async () => {
+    const Child = () => null;
+
+    // Bypass React element's automatic stringifying of keys intentionally.
+    // This is pretty hacky.
+    const fauxElement = Object.assign({}, <Child />, {key: 123});
+
+    await act(() => render([fauxElement]));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Child key="123">
+    `);
+  });
+
+  it('should show the right display names for special component types', async () => {
+    const MyComponent = (props, ref) => null;
+    const ForwardRefComponent = React.forwardRef(MyComponent);
+    const MyComponent2 = (props, ref) => null;
+    const ForwardRefComponentWithAnonymousFunction = React.forwardRef(() => (
+      <MyComponent2 />
+    ));
+    const MyComponent3 = (props, ref) => null;
+    const ForwardRefComponentWithCustomDisplayName =
+      React.forwardRef(MyComponent3);
+    ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
+    const MyComponent4 = (props, ref) => null;
+    const MemoComponent = React.memo(MyComponent4);
+    const MemoForwardRefComponent = React.memo(ForwardRefComponent);
+
+    const FakeHigherOrderComponent = () => null;
+    FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';
+
+    const MemoizedFakeHigherOrderComponent = React.memo(
+      FakeHigherOrderComponent,
+    );
+    const ForwardRefFakeHigherOrderComponent = React.forwardRef(
+      FakeHigherOrderComponent,
+    );
+
+    const MemoizedFakeHigherOrderComponentWithDisplayNameOverride = React.memo(
+      FakeHigherOrderComponent,
+    );
+    MemoizedFakeHigherOrderComponentWithDisplayNameOverride.displayName =
+      'memoRefOverride';
+    const ForwardRefFakeHigherOrderComponentWithDisplayNameOverride =
+      React.forwardRef(FakeHigherOrderComponent);
+    ForwardRefFakeHigherOrderComponentWithDisplayNameOverride.displayName =
+      'forwardRefOverride';
+
+    const App = () => (
+      <React.Fragment>
+        <MyComponent />
+        <ForwardRefComponent />
+        <ForwardRefComponentWithAnonymousFunction />
+        <ForwardRefComponentWithCustomDisplayName />
+        <MemoComponent />
+        <MemoForwardRefComponent />
+        <FakeHigherOrderComponent />
+        <MemoizedFakeHigherOrderComponent />
+        <ForwardRefFakeHigherOrderComponent />
+        <MemoizedFakeHigherOrderComponentWithDisplayNameOverride />
+        <ForwardRefFakeHigherOrderComponentWithDisplayNameOverride />
+      </React.Fragment>
+    );
+
+    // Render once to start fetching the lazy component
+    await act(() => render(<App />));
+
+    await Promise.resolve();
+
+    // Render again after it resolves
+    await act(() => render(<App />));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+            <MyComponent>
+            <MyComponent> [ForwardRef]
+          ▾ <Anonymous> [ForwardRef]
+              <MyComponent2>
+            <Custom>
+            <MyComponent4> [Memo]
+          ▾ <MyComponent> [Memo]
+              <MyComponent> [ForwardRef]
+            <Baz> [withFoo][withBar]
+            <Baz> [Memo][withFoo][withBar]
+            <Baz> [ForwardRef][withFoo][withBar]
+            <memoRefOverride>
+            <forwardRefOverride>
+    `);
+  });
+
+  describe('Lazy', () => {
+    async function fakeImport(result) {
+      return {default: result};
+    }
+
+    const LazyInnerComponent = () => null;
+
+    const App = ({renderChildren}) => {
+      if (renderChildren) {
+        return (
+          <React.Suspense fallback="Loading...">
+            <LazyComponent />
+          </React.Suspense>
+        );
+      } else {
+        return null;
+      }
+    };
+
+    let LazyComponent;
+    beforeEach(() => {
+      LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));
+    });
+
+    // @reactVersion >= 18.0
+    // @reactVersion < 19
+    // @gate !disableLegacyMode
+    it('should support Lazy components (legacy render)', async () => {
+      const container = document.createElement('div');
+
+      // Render once to start fetching the lazy component
+      await act(() => legacyRender(<App renderChildren={true} />, container));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
+
+      await Promise.resolve();
+
+      // Render again after it resolves
+      await act(() => legacyRender(<App renderChildren={true} />, container));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+      `);
+
+      // Render again to unmount it
+      await act(() => legacyRender(<App renderChildren={false} />, container));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('should support Lazy components in (createRoot)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      // Render once to start fetching the lazy component
+      await act(() => root.render(<App renderChildren={true} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+
+      await Promise.resolve();
+
+      // Render again after it resolves
+      await act(() => root.render(<App renderChildren={true} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+
+      // Render again to unmount it
+      await act(() => root.render(<App renderChildren={false} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    // @reactVersion < 19
+    // @gate !disableLegacyMode
+    it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => {
+      const container = document.createElement('div');
+
+      // Render once to start fetching the lazy component
+      await act(() => legacyRender(<App renderChildren={true} />, container));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
+
+      // Render again to unmount it before it finishes loading
+      await act(() => legacyRender(<App renderChildren={false} />, container));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    // @reactVersion < 19
+    it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      // Render once to start fetching the lazy component
+      await act(() => root.render(<App renderChildren={true} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+
+      // Render again to unmount it before it finishes loading
+      await act(() => root.render(<App renderChildren={false} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
+    });
+  });
+
+  describe('inline errors and warnings', () => {
+    // @reactVersion >= 18.0
+    it('during render are counted', async () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() => render(<Example />));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() => render(<Example rerender={1} />));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('during layout get counted', async () => {
+      function Example() {
+        React.useLayoutEffect(() => {
+          console.error('test-only: layout error');
+          console.warn('test-only: layout warning');
+        });
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() => render(<Example />));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() => render(<Example rerender={1} />));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+      `);
+    });
+
+    describe('during passive effects', () => {
+      function flushPendingBridgeOperations() {
+        jest.runOnlyPendingTimers();
+      }
+
+      // @reactVersion >= 18.0
+      it('are counted (after no delay)', async () => {
+        function Example() {
+          React.useEffect(() => {
+            console.error('test-only: passive error');
+            console.warn('test-only: passive warning');
+          });
+          return null;
+        }
+
+        withErrorsOrWarningsIgnored(['test-only:'], async () => {
+          await act(() => {
+            render(<Example />);
+          }, false);
+        });
+        flushPendingBridgeOperations();
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 1
+          [root]
+              <Example> ✕⚠
+        `);
+
+        await act(() => unmount());
+        expect(store).toMatchInlineSnapshot(``);
+      });
+
+      // @reactVersion >= 18.0
+      it('are flushed early when there is a new commit', async () => {
+        function Example() {
+          React.useEffect(() => {
+            console.error('test-only: passive error');
+            console.warn('test-only: passive warning');
+          });
+          return null;
+        }
+
+        function Noop() {
+          return null;
+        }
+
+        withErrorsOrWarningsIgnored(['test-only:'], () => {
+          act(() => {
+            render(
+              <>
+                <Example />
+              </>,
+            );
+          }, false);
+          flushPendingBridgeOperations();
+          expect(store).toMatchInlineSnapshot(`
+            ✕ 1, ⚠ 1
+            [root]
+                <Example> ✕⚠
+          `);
+
+          // Before warnings and errors have flushed, flush another commit.
+          act(() => {
+            render(
+              <>
+                <Example />
+                <Noop />
+              </>,
+            );
+          }, false);
+          flushPendingBridgeOperations();
+          expect(store).toMatchInlineSnapshot(`
+            ✕ 2, ⚠ 2
+            [root]
+                <Example> ✕⚠
+                <Noop>
+          `);
+        });
+
+        await act(() => unmount());
+        expect(store).toMatchInlineSnapshot(``);
+      });
+    });
+
+    // In React 19, JSX warnings were moved into the renderer - https://github.com/facebook/react/pull/29088
+    // The warning is moved to the Child instead of the Parent.
+    // @reactVersion >= 19.0.1
+    it('from react get counted [React >= 19.0.1]', async () => {
+      function Example() {
+        return [<Child />];
+      }
+      function Child() {
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(
+        ['Each child in a list should have a unique "key" prop'],
+        () => {
+          act(() => render(<Example />));
+        },
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+          ▾ <Example>
+              <Child> ✕
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    // @reactVersion < 19.0
+    it('from react get counted [React 18.x]', async () => {
+      function Example() {
+        return [<Child />];
+      }
+      function Child() {
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(
+        ['Each child in a list should have a unique "key" prop'],
+        () => {
+          act(() => render(<Example />));
+        },
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+          ▾ <Example> ✕
+              <Child>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('can be cleared for the whole app', async () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() =>
+          render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      const {
+        clearErrorsAndWarnings,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearErrorsAndWarnings({bridge, store});
+
+      // flush events to the renderer
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <Example>
+            <Example>
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('can be cleared for particular Fiber (only warnings)', async () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() =>
+          render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      const id = ((store.getElementIDAtIndex(1): any): number);
+      const rendererID = store.getRendererIDForElement(id);
+
+      const {
+        clearWarningsForElement,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearWarningsForElement({bridge, id, rendererID});
+
+      // Flush events to the renderer.
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 1
+        [root]
+            <Example> ✕⚠
+            <Example> ✕
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('can be cleared for a particular Fiber (only errors)', async () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() =>
+          render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      const id = ((store.getElementIDAtIndex(1): any): number);
+      const rendererID = store.getRendererIDForElement(id);
+
+      const {
+        clearErrorsForElement,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearErrorsForElement({bridge, id, rendererID});
+
+      // Flush events to the renderer.
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ⚠
+      `);
+    });
+
+    // @reactVersion >= 18.0
+    it('are updated when fibers are removed from the tree', async () => {
+      function ComponentWithWarning() {
+        console.warn('test-only: render warning');
+        return null;
+      }
+      function ComponentWithError() {
+        console.error('test-only: render error');
+        return null;
+      }
+      function ComponentWithWarningAndError() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() =>
+          render(
+            <React.Fragment>
+              <ComponentWithError />
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() =>
+          render(
+            <React.Fragment>
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() =>
+          render(
+            <React.Fragment>
+              <ComponentWithWarning />
+            </React.Fragment>,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await act(() => render(<React.Fragment />));
+      });
+      expect(store).toMatchInlineSnapshot(``);
+      expect(store.componentWithErrorCount).toBe(0);
+      expect(store.componentWithWarningCount).toBe(0);
+    });
+
+    // Regression test for https://github.com/facebook/react/issues/23202
+    // @reactVersion >= 18.0
+    it('suspense boundary children should not double unmount and error', async () => {
+      async function fakeImport(result) {
+        return {default: result};
+      }
+
+      const ChildA = () => null;
+      const ChildB = () => null;
+
+      const LazyChildA = React.lazy(() => fakeImport(ChildA));
+      const LazyChildB = React.lazy(() => fakeImport(ChildB));
+
+      function App({renderA}) {
+        return (
+          <React.Suspense>
+            {renderA ? <LazyChildA /> : <LazyChildB />}
+          </React.Suspense>
+        );
+      }
+
+      await actAsync(() => render(<App renderA={true} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <ChildA>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+
+      await actAsync(() => render(<App renderA={false} />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <ChildB>
+        [suspense-root]  rects={null}
+          <Suspense name="App" rects={null}>
+      `);
+    });
+  });
+
+  // @reactVersion > 18.2
+  it('does not show server components without any children reified children', async () => {
+    // A Server Component that doesn't render into anything on the client doesn't show up.
+    const ServerPromise = Promise.resolve(null);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = () => ServerPromise;
+
+    await actAsync(() => render(<App />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <App>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('does show a server component that renders into a filtered node', async () => {
+    const ServerPromise = Promise.resolve(<div />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = () => ServerPromise;
+
+    await actAsync(() => render(<App />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+            <ServerComponent> [Server]
+    `);
+  });
+
+  it('can render the same server component twice', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = () => (
+      <>
+        {ServerPromise}
+        <ClientComponent />
+        {ServerPromise}
+      </>
+    );
+
+    await actAsync(() => render(<App />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+            <ClientComponent>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('collapses multiple parent server components into one', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const ServerPromise2 = Promise.resolve(<ClientComponent />);
+    ServerPromise2._debugInfo = [
+      {
+        name: 'ServerComponent2',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = ({initial}) => (
+      <>
+        {ServerPromise}
+        {ServerPromise}
+        {ServerPromise2}
+        {initial ? null : ServerPromise2}
+      </>
+    );
+
+    await actAsync(() => render(<App initial={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+              <ClientComponent>
+          ▾ <ServerComponent2> [Server]
+              <ClientComponent>
+    `);
+
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+              <ClientComponent>
+          ▾ <ServerComponent2> [Server]
+              <ClientComponent>
+              <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('can reparent a child when the server components change', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerAB',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const ServerPromise2 = Promise.resolve(<ClientComponent />);
+    ServerPromise2._debugInfo = [
+      {
+        name: 'ServerA',
+        env: 'Server',
+        owner: null,
+      },
+      {
+        name: 'ServerB',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = ({initial}) => (initial ? ServerPromise : ServerPromise2);
+
+    await actAsync(() => render(<App initial={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerAB> [Server]
+              <ClientComponent>
+    `);
+
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerA> [Server]
+            ▾ <ServerB> [Server]
+                <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('splits a server component parent when a different child appears between', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = ({initial}) =>
+      initial ? (
+        <>
+          {ServerPromise}
+          {null}
+          {ServerPromise}
+        </>
+      ) : (
+        <>
+          {ServerPromise}
+          <ClientComponent />
+          {ServerPromise}
+        </>
+      );
+
+    await actAsync(() => render(<App initial={true} />));
+    // Initially the Server Component only appears once because the children
+    // are consecutive.
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+              <ClientComponent>
+    `);
+
+    // Later the same instance gets split into two when it is no longer
+    // consecutive so we need two virtual instances to represent two parents.
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+            <ClientComponent>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('can reorder keyed server components', async () => {
+    function ClientComponent({text}) {
+      return <div>{text}</div>;
+    }
+    function getServerComponent(key) {
+      const ServerPromise = Promise.resolve(
+        <ClientComponent key={key} text={key} />,
+      );
+      ServerPromise._debugInfo = [
+        {
+          name: 'ServerComponent',
+          env: 'Server',
+          owner: null,
+          key: key,
+        },
+      ];
+      return ServerPromise;
+    }
+    const set1 = ['A', 'B', 'C'].map(getServerComponent);
+    const set2 = ['B', 'A', 'D'].map(getServerComponent);
+
+    const App = ({initial}) => (initial ? set1 : set2);
+
+    await actAsync(() => render(<App initial={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent key="A"> [Server]
+              <ClientComponent key="A">
+          ▾ <ServerComponent key="B"> [Server]
+              <ClientComponent key="B">
+          ▾ <ServerComponent key="C"> [Server]
+              <ClientComponent key="C">
+      `);
+
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent key="B"> [Server]
+              <ClientComponent key="B">
+          ▾ <ServerComponent key="A"> [Server]
+              <ClientComponent key="A">
+          ▾ <ServerComponent key="D"> [Server]
+              <ClientComponent key="D">
+      `);
+  });
+
+  // @reactVersion >= 17.0
+  it('can reconcile Suspense in fallback positions', async () => {
+    let resolveFallback;
+    const fallbackPromise = new Promise(resolve => {
+      resolveFallback = resolve;
+    });
+    let resolveContent;
+    const contentPromise = new Promise(resolve => {
+      resolveContent = resolve;
+    });
+
+    function Component({children, promise}) {
+      if (promise) {
+        readValue(promise);
+      }
+      return <div>{children}</div>;
+    }
+
+    await actAsync(() =>
+      render(
+        <React.Suspense
+          name="content"
+          fallback={
+            <React.Suspense
+              name="fallback"
+              fallback={
+                <Component key="fallback-fallback">
+                  Loading fallback...
+                </Component>
+              }>
+              <Component key="fallback-content" promise={fallbackPromise}>
+                Loading...
+              </Component>
+            </React.Suspense>
+          }>
+          <Component key="content" promise={contentPromise}>
+            done
+          </Component>
+        </React.Suspense>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense name="content">
+          ▾ <Suspense name="fallback">
+              <Component key="fallback-fallback">
+      [suspense-root]  rects={[{x:1,y:2,width:19,height:1}]}
+        <Suspense name="content" rects={null}>
+        <Suspense name="fallback" rects={null}>
+    `);
+
+    await actAsync(() => {
+      resolveFallback();
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense name="content">
+          ▾ <Suspense name="fallback">
+              <Component key="fallback-content">
+      [suspense-root]  rects={[{x:1,y:2,width:10,height:1}]}
+        <Suspense name="content" rects={null}>
+        <Suspense name="fallback" rects={[{x:1,y:2,width:10,height:1}]}>
+    `);
+
+    await actAsync(() => {
+      resolveContent();
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense name="content">
+            <Component key="content">
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}]}
+        <Suspense name="content" rects={[{x:1,y:2,width:4,height:1}]}>
+    `);
+  });
+
+  // @reactVersion >= 17.0
+  it('can reconcile resuspended Suspense with Suspense in fallback positions', async () => {
+    let resolveHeadFallback;
+    let resolveHeadContent;
+    let resolveMainFallback;
+    let resolveMainContent;
+
+    function Component({children, promise}) {
+      if (promise) {
+        readValue(promise);
+      }
+      return <div>{children}</div>;
+    }
+
+    function WithSuspenseInFallback({fallbackPromise, contentPromise, name}) {
+      return (
+        <React.Suspense
+          name={name}
+          fallback={
+            <React.Suspense
+              name={`${name}-fallback`}
+              fallback={
+                <Component key={`${name}-fallback-fallback`}>
+                  Loading fallback...
+                </Component>
+              }>
+              <Component
+                key={`${name}-fallback-content`}
+                promise={fallbackPromise}>
+                Loading...
+              </Component>
+            </React.Suspense>
+          }>
+          <Component key={`${name}-content`} promise={contentPromise}>
+            done
+          </Component>
+        </React.Suspense>
+      );
+    }
+
+    function App({
+      headFallbackPromise,
+      headContentPromise,
+      mainContentPromise,
+      mainFallbackPromise,
+      tailContentPromise,
+      tailFallbackPromise,
+    }) {
+      return (
+        <>
+          <WithSuspenseInFallback
+            fallbackPromise={headFallbackPromise}
+            contentPromise={headContentPromise}
+            name="head"
+          />
+          <WithSuspenseInFallback
+            fallbackPromise={mainFallbackPromise}
+            contentPromise={mainContentPromise}
+            name="main"
+          />
+        </>
+      );
+    }
+
+    const initialHeadContentPromise = new Promise(resolve => {
+      resolveHeadContent = resolve;
+    });
+    const initialHeadFallbackPromise = new Promise(resolve => {
+      resolveHeadFallback = resolve;
+    });
+    const initialMainContentPromise = new Promise(resolve => {
+      resolveMainContent = resolve;
+    });
+    const initialMainFallbackPromise = new Promise(resolve => {
+      resolveMainFallback = resolve;
+    });
+    await actAsync(() =>
+      render(
+        <App
+          headFallbackPromise={initialHeadFallbackPromise}
+          headContentPromise={initialHeadContentPromise}
+          mainContentPromise={initialMainContentPromise}
+          mainFallbackPromise={initialMainFallbackPromise}
+        />,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="head">
+              ▾ <Suspense name="head-fallback">
+                  <Component key="head-fallback-fallback">
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="main">
+              ▾ <Suspense name="main-fallback">
+                  <Component key="main-fallback-fallback">
+      [suspense-root]  rects={[{x:1,y:2,width:19,height:1}, {x:1,y:2,width:19,height:1}]}
+        <Suspense name="head" rects={null}>
+        <Suspense name="head-fallback" rects={null}>
+        <Suspense name="main" rects={null}>
+        <Suspense name="main-fallback" rects={null}>
+    `);
+
+    await actAsync(() => {
+      resolveHeadFallback();
+      resolveMainFallback();
+      resolveHeadContent();
+      resolveMainContent();
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="head">
+                <Component key="head-content">
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="main">
+                <Component key="main-content">
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:4,height:1}]}
+        <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
+    `);
+
+    // Resuspend head content
+    const nextHeadContentPromise = new Promise(resolve => {
+      resolveHeadContent = resolve;
+    });
+    await actAsync(() =>
+      render(
+        <App
+          headFallbackPromise={initialHeadFallbackPromise}
+          headContentPromise={nextHeadContentPromise}
+          mainContentPromise={initialMainContentPromise}
+          mainFallbackPromise={initialMainFallbackPromise}
+        />,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="head">
+              ▾ <Suspense name="head-fallback">
+                  <Component key="head-fallback-content">
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="main">
+                <Component key="main-content">
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:4,height:1}]}
+        <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
+        <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
+    `);
+
+    // Resuspend head fallback
+    const nextHeadFallbackPromise = new Promise(resolve => {
+      resolveHeadFallback = resolve;
+    });
+    await actAsync(() =>
+      render(
+        <App
+          headFallbackPromise={nextHeadFallbackPromise}
+          headContentPromise={nextHeadContentPromise}
+          mainContentPromise={initialMainContentPromise}
+          mainFallbackPromise={initialMainFallbackPromise}
+        />,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="head">
+              ▾ <Suspense name="head-fallback">
+                  <Component key="head-fallback-fallback">
+          ▾ <WithSuspenseInFallback>
+            ▾ <Suspense name="main">
+                <Component key="main-content">
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:19,height:1}, {x:1,y:2,width:4,height:1}]}
+        <Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
+        <Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
+        <Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
+    `);
+
+    await actAsync(() => render(null));
+
+    expect(store).toMatchInlineSnapshot(``);
+  });
+
+  it('should handle an empty root', async () => {
+    await actAsync(() => render(null));
+    expect(store).toMatchInlineSnapshot(``);
+
+    await actAsync(() => render(<span />));
+    expect(store).toMatchInlineSnapshot(`[root]`);
+  });
+
+  // @reactVersion >= 19.0
+  it('should reconcile promise-as-a-child', async () => {
+    function Component({children}) {
+      return <div>{children}</div>;
+    }
+
+    await actAsync(() =>
+      render(
+        <React.Suspense>
+          {Promise.resolve(<Component key="A">A</Component>)}
+        </React.Suspense>,
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <Component key="A">
+      [suspense-root]  rects={[{x:1,y:2,width:1,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:1,height:1}]}>
+    `);
+
+    await actAsync(() =>
+      render(
+        <React.Suspense>
+          {Promise.resolve(<Component key="not-A">not A</Component>)}
+        </React.Suspense>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <Component key="not-A">
+      [suspense-root]  rects={[{x:1,y:2,width:5,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:5,height:1}]}>
+    `);
+
+    await actAsync(() => render(null));
+    expect(store).toMatchInlineSnapshot(``);
+  });
+
+  // Can't suspend the root in React 17.
+  // @reactVersion >= 18.0
+  it('should track suspended-by in filtered fallback suspending the root', async () => {
+    function IgnoreMe({promise}) {
+      return readValue(promise);
+    }
+
+    function Component({promise}) {
+      return readValue(promise);
+    }
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [createDisplayNameFilter('^IgnoreMe', true)]),
+    );
+
+    let resolveFallback;
+    const fallbackPromise = new Promise(resolve => {
+      resolveFallback = resolve;
+    });
+    let resolveContent;
+    const contentPromise = new Promise(resolve => {
+      resolveContent = resolve;
+    });
+
+    await actAsync(() =>
+      render(
+        <React.Suspense
+          name="main"
+          fallback={<IgnoreMe promise={fallbackPromise} />}>
+          <Component promise={contentPromise} />
+        </React.Suspense>,
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(``);
+
+    await actAsync(() => resolveFallback('loading'));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Suspense name="main">
+      [suspense-root]  rects={null}
+        <Suspense name="main" rects={null}>
+    `);
+
+    await actAsync(() => resolveContent('content'));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense name="main">
+            <Component>
+      [suspense-root]  rects={null}
+        <Suspense name="main" rects={null}>
+    `);
+  });
+
+  // @reactVersion >= 17.0
+  it('should track suspended-by in filtered fallback', async () => {
+    function IgnoreMe({promise}) {
+      return readValue(promise);
+    }
+
+    function Component({promise}) {
+      if (promise) {
+        return readValue(promise);
+      }
+      return null;
+    }
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [createDisplayNameFilter('^IgnoreMe', true)]),
+    );
+
+    let resolveFallback;
+    const fallbackPromise = new Promise(resolve => {
+      resolveFallback = resolve;
+    });
+    let resolveContent;
+    const contentPromise = new Promise(resolve => {
+      resolveContent = resolve;
+    });
+
+    await actAsync(() =>
+      render(
+        <React.Suspense
+          fallback={<Component key="root-fallback" />}
+          name="root">
+          <React.Suspense
+            name="main"
+            fallback={<IgnoreMe promise={fallbackPromise} />}>
+            <Component promise={contentPromise} />
+          </React.Suspense>
+        </React.Suspense>,
+      ),
+    );
+
+    if (semver.lt(ReactVersionTestingAgainst, '18.0.0')) {
+      // React 17 commits partial trees hidden which causes the "main"
+      // Suspense boundary to be included.
+      // React 18 and upwards excluded partial tree entirely.
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Suspense name="root">
+              <Component key="root-fallback">
+        [suspense-root]  rects={null}
+          <Suspense name="root" rects={null}>
+            <Suspense name="main" rects={null}>
+      `);
+    } else {
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Suspense name="root">
+              <Component key="root-fallback">
+        [suspense-root]  rects={null}
+          <Suspense name="root" rects={null}>
+      `);
+    }
+
+    await actAsync(() => resolveFallback('loading'));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense name="root">
+            <Suspense name="main">
+      [suspense-root]  rects={null}
+        <Suspense name="root" rects={null}>
+          <Suspense name="main" rects={null}>
+    `);
+
+    await actAsync(() => resolveContent('content'));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense name="root">
+          ▾ <Suspense name="main">
+              <Component>
+      [suspense-root]  rects={null}
+        <Suspense name="root" rects={null}>
+          <Suspense name="main" rects={null}>
+    `);
+  });
+
+  // @reactVersion >= 19
+  it('should keep suspended boundaries in the Suspense tree but not hidden Activity', async () => {
+    const Activity = React.Activity || React.unstable_Activity;
+
+    const never = new Promise(() => {});
+    function Never() {
+      readValue(never);
+      return null;
+    }
+    function Component({children}) {
+      return <div>{children}</div>;
+    }
+
+    function App({hidden}) {
+      return (
+        <>
+          <Activity mode={hidden ? 'hidden' : 'visible'}>
+            <React.Suspense name="inside-activity">
+              <Component key="inside-activity">inside Activity</Component>
+            </React.Suspense>
+          </Activity>
+          <React.Suspense name="outer-suspense">
+            <React.Suspense name="inner-suspense">
+              <Component key="inside-suspense">inside Suspense</Component>
+            </React.Suspense>
+            {hidden ? <Never /> : null}
+          </React.Suspense>
+        </>
+      );
+    }
+
+    await actAsync(() => {
+      render(<App hidden={true} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+            <Activity>
+            <Suspense name="outer-suspense">
+      [suspense-root]  rects={[{x:1,y:2,width:15,height:1}]}
+        <Suspense name="outer-suspense" rects={null}>
+    `);
+
+    // mount as visible
+    await actAsync(() => {
+      render(null);
+    });
+    await actAsync(() => {
+      render(<App hidden={false} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Activity>
+            ▾ <Suspense name="inside-activity">
+                <Component key="inside-activity">
+          ▾ <Suspense name="outer-suspense">
+            ▾ <Suspense name="inner-suspense">
+                <Component key="inside-suspense">
+      [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
+        <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+          <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+    `);
+
+    await actAsync(() => {
+      render(<App hidden={true} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+            <Activity>
+            <Suspense name="outer-suspense">
+      [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
+        <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+          <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+    `);
+
+    await actAsync(() => {
+      render(<App hidden={false} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Activity>
+            ▾ <Suspense name="inside-activity">
+                <Component key="inside-activity">
+          ▾ <Suspense name="outer-suspense">
+            ▾ <Suspense name="inner-suspense">
+                <Component key="inside-suspense">
+      [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
+        <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
+        <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+          <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
+    `);
+  });
+
+  // @reactVersion >= 19.0
+  it('guesses a Suspense name based on the owner', async () => {
+    let resolve;
+    const promise = new Promise(_resolve => {
+      resolve = _resolve;
+    });
+    function Inner() {
+      return (
+        <React.Suspense fallback={<p>Loading inner</p>}>
+          <p>{promise}</p>
+        </React.Suspense>
+      );
+    }
+
+    function Outer({children}) {
+      return (
+        <React.Suspense fallback={<p>Loading outer</p>}>
+          <p>{promise}</p>
+          {children}
+        </React.Suspense>
+      );
+    }
+
+    await actAsync(() => {
+      render(
+        <Outer>
+          <Inner />
+        </Outer>,
+      );
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Outer>
+            <Suspense>
+      [suspense-root]  rects={[{x:1,y:2,width:13,height:1}]}
+        <Suspense name="Outer" rects={null}>
+    `);
+
+    await actAsync(() => {
+      resolve('loaded');
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Outer>
+          ▾ <Suspense>
+            ▾ <Inner>
+                <Suspense>
+      [suspense-root]  rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Outer" rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}>
+          <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}>
+    `);
+  });
+
+  // @reactVersion >= 19.0
+  it('measures rects when reconnecting', async () => {
+    function Component({children, promise}) {
+      let content = '';
+      if (promise) {
+        const value = readValue(promise);
+        if (typeof value === 'string') {
+          content += value;
+        }
+      }
+      return (
+        <div>
+          {content}
+          {children}
+        </div>
+      );
+    }
+
+    function App({outer, inner}) {
+      return (
+        <React.Suspense
+          name="outer"
+          fallback={<Component key="outer-fallback">loading outer</Component>}>
+          <Component key="outer-content" promise={outer}>
+            outer content
+          </Component>
+          <React.Suspense
+            name="inner"
+            fallback={
+              <Component key="inner-fallback">loading inner</Component>
+            }>
+            <Component key="inner-content" promise={inner}>
+              inner content
+            </Component>
+          </React.Suspense>
+        </React.Suspense>
+      );
+    }
+
+    await actAsync(() => {
+      render(<App outer={null} inner={null} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Suspense name="outer">
+              <Component key="outer-content">
+            ▾ <Suspense name="inner">
+                <Component key="inner-content">
+      [suspense-root]  rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
+    `);
+
+    let outerResolve;
+    const outerPromise = new Promise(resolve => {
+      outerResolve = resolve;
+    });
+
+    let innerResolve;
+    const innerPromise = new Promise(resolve => {
+      innerResolve = resolve;
+    });
+    await actAsync(() => {
+      render(<App outer={outerPromise} inner={innerPromise} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Suspense name="outer">
+              <Component key="outer-fallback">
+      [suspense-root]  rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
+    `);
+
+    await actAsync(() => {
+      outerResolve('..');
+      innerResolve('.');
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Suspense name="outer">
+              <Component key="outer-content">
+            ▾ <Suspense name="inner">
+                <Component key="inner-content">
+      [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}
+        <Suspense name="outer" rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
+          <Suspense name="inner" rects={[{x:1,y:2,width:14,height:1}]}>
+    `);
+  });
+});
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 00000000000..16b013cb4ec
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -0,0 +1,931 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {
+  getLegacyRenderImplementation,
+  getVersionedRenderImplementation,
+} from './utils';
+
+describe('Store component filters', () => {
+  let React;
+  let Types;
+  let agent;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+  let actAsync;
+
+  beforeAll(() => {
+    // JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
+    Element.prototype.getClientRects = function (this: Element) {
+      const textContent = this.textContent;
+      return [
+        new DOMRect(1, 2, textContent.length, textContent.split('\n').length),
+      ];
+    };
+  });
+
+  beforeEach(() => {
+    agent = global.agent;
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.componentFilters = [];
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    Types = require('react-devtools-shared/src/frontend/types');
+    utils = require('./utils');
+
+    actAsync = utils.actAsync;
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  // @reactVersion >= 16.0
+  it('should throw if filters are updated while profiling', async () => {
+    await actAsync(async () => store.profilerStore.startProfiling());
+    expect(() => (store.componentFilters = [])).toThrow(
+      'Cannot modify filter preferences while profiling',
+    );
+  });
+
+  // @reactVersion >= 16.0
+  it('should support filtering by element type', async () => {
+    class ClassComponent extends React.Component<{children: React$Node}> {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+    const FunctionComponent = () => <div>Hi</div>;
+
+    await actAsync(async () =>
+      render(
+        <ClassComponent>
+          <FunctionComponent />
+        </ClassComponent>,
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeHostComponent),
+        ]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+            <FunctionComponent>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeClass),
+        ]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <div>
+          ▾ <FunctionComponent>
+              <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeClass),
+          utils.createElementTypeFilter(Types.ElementTypeFunction),
+        ]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <div>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeClass, false),
+          utils.createElementTypeFilter(Types.ElementTypeFunction, false),
+        ]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
+
+    await actAsync(async () => (store.componentFilters = []));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
+  });
+
+  // @reactVersion >= 16.6
+  it('should filter Suspense', async () => {
+    const Suspense = React.Suspense;
+    await actAsync(async () =>
+      render(
+        <React.Fragment>
+          <Suspense>
+            <div>Visible</div>
+          </Suspense>
+          <Suspense>
+            <div>Hidden</div>
+          </Suspense>
+        </React.Fragment>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div>
+        ▾ <Suspense>
+            <div>
+      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div>
+        ▾ <Suspense>
+            <div>
+      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity, false),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div>
+        ▾ <Suspense>
+            <div>
+      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+    `);
+  });
+
+  it('should filter Activity', async () => {
+    const Activity = React.Activity || React.unstable_Activity;
+
+    if (Activity != null) {
+      await actAsync(async () =>
+        render(
+          <React.Fragment>
+            <Activity mode="visible">
+              <div>Visible</div>
+            </Activity>
+            <Activity mode="hidden">
+              <div>Hidden</div>
+            </Activity>
+          </React.Fragment>,
+        ),
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Activity>
+              <div>
+            <Activity>
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createElementTypeFilter(Types.ElementTypeActivity),
+          ]),
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <div>
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createElementTypeFilter(Types.ElementTypeActivity, false),
+          ]),
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Activity>
+              <div>
+            <Activity>
+      `);
+    }
+  });
+
+  it('should filter ViewTransition', async () => {
+    const ViewTransition =
+      React.ViewTransition || React.unstable_ViewTransition;
+
+    if (ViewTransition != null) {
+      await actAsync(async () =>
+        render(
+          <React.Fragment>
+            <ViewTransition>
+              <div>Visible</div>
+            </ViewTransition>
+            <ViewTransition>
+              <div>Hidden</div>
+            </ViewTransition>
+          </React.Fragment>,
+        ),
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+              [root]
+                ▾ <ViewTransition>
+                    <div>
+                ▾ <ViewTransition>
+                    <div>
+          `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createElementTypeFilter(Types.ElementTypeActivity),
+          ]),
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+              [root]
+                ▾ <ViewTransition>
+                    <div>
+                ▾ <ViewTransition>
+                    <div>
+          `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createElementTypeFilter(Types.ElementTypeActivity, false),
+          ]),
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+              [root]
+                ▾ <ViewTransition>
+                    <div>
+                ▾ <ViewTransition>
+                    <div>
+          `);
+    }
+  });
+
+  it('should ignore invalid ElementTypeRoot filter', async () => {
+    const Component = () => <div>Hi</div>;
+
+    await actAsync(async () => render(<Component />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeRoot),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
+  });
+
+  // @reactVersion >= 16.2
+  it('should filter by display name', async () => {
+    const Text = ({label}) => label;
+    const Foo = () => <Text label="foo" />;
+    const Bar = () => <Text label="bar" />;
+    const Baz = () => <Text label="baz" />;
+
+    await actAsync(async () =>
+      render(
+        <React.Fragment>
+          <Foo />
+          <Bar />
+          <Baz />
+        </React.Fragment>,
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+        ▾ <Bar>
+            <Text>
+        ▾ <Baz>
+            <Text>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Text>
+        ▾ <Bar>
+            <Text>
+        ▾ <Baz>
+            <Text>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [utils.createDisplayNameFilter('Ba')]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+          <Text>
+          <Text>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+        ▾ <Bar>
+            <Text>
+          <Text>
+    `);
+  });
+
+  // Disabled: filtering by path was removed, source is now determined lazily, including symbolication if applicable
+  // @reactVersion >= 16.0
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should filter by path', async () => {
+    // This component should use props object in order to throw for component stack generation
+    // See ReactComponentStackFrame:155 or DevToolsComponentStackFrame:147
+    const Component = props => {
+      return <div>{props.message}</div>;
+    };
+
+    await actAsync(async () => render(<Component message="Hi" />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createLocationFilter(__filename.replace(__dirname, '')),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`[root]`);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createLocationFilter('this:is:a:made:up:path'),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should filter HOCs', async () => {
+    const Component = () => <div>Hi</div>;
+    const Foo = () => <Component />;
+    Foo.displayName = 'Foo(Component)';
+    const Bar = () => <Foo />;
+    Bar.displayName = 'Bar(Foo(Component))';
+
+    await actAsync(async () => render(<Bar />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component> [Bar][Foo]
+          ▾ <Component> [Foo]
+            ▾ <Component>
+                <div>
+    `);
+
+    await actAsync(
+      async () => (store.componentFilters = [utils.createHOCFilter(true)]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
+
+    await actAsync(
+      async () => (store.componentFilters = [utils.createHOCFilter(false)]),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component> [Bar][Foo]
+          ▾ <Component> [Foo]
+            ▾ <Component>
+                <div>
+    `);
+  });
+
+  // @reactVersion >= 16.0
+  it('should not send a bridge update if the set of enabled filters has not changed', async () => {
+    await actAsync(
+      async () => (store.componentFilters = [utils.createHOCFilter(true)]),
+    );
+
+    bridge.addListener('updateComponentFilters', componentFilters => {
+      throw Error('Unexpected component update');
+    });
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(false),
+          utils.createHOCFilter(true),
+        ]),
+    );
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(true),
+          utils.createLocationFilter('abc', false),
+        ]),
+    );
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createHOCFilter(true),
+          utils.createElementTypeFilter(Types.ElementTypeHostComponent, false),
+        ]),
+    );
+  });
+
+  // @reactVersion >= 18.0
+  it('should not break when Suspense nodes are filtered from the tree', async () => {
+    const promise = new Promise(() => {});
+
+    const Loading = () => <div>Loading...</div>;
+
+    const Component = ({shouldSuspend}) => {
+      if (shouldSuspend) {
+        if (React.use) {
+          React.use(promise);
+        } else {
+          throw promise;
+        }
+      }
+      return null;
+    };
+
+    const Wrapper = ({shouldSuspend}) => (
+      <React.Suspense fallback={<Loading />}>
+        <Component shouldSuspend={shouldSuspend} />
+      </React.Suspense>
+    );
+
+    store.componentFilters = [
+      utils.createElementTypeFilter(Types.ElementTypeSuspense),
+    ];
+
+    await actAsync(async () => render(<Wrapper shouldSuspend={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+          ▾ <Loading>
+              <div>
+    `);
+
+    await actAsync(async () => render(<Wrapper shouldSuspend={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+            <Component>
+    `);
+
+    await actAsync(async () => render(<Wrapper shouldSuspend={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+          ▾ <Loading>
+              <div>
+    `);
+  });
+
+  describe('inline errors and warnings', () => {
+    const {render: legacyRender} = getLegacyRenderImplementation();
+
+    // @reactVersion >= 17.0
+    // @reactVersion <= 18.2
+    it('only counts for unfiltered components (legacy render)', async () => {
+      function ComponentWithWarning() {
+        console.warn('test-only: render warning');
+        return null;
+      }
+      function ComponentWithError() {
+        console.error('test-only: render error');
+        return null;
+      }
+      function ComponentWithWarningAndError() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createDisplayNameFilter('Warning'),
+            utils.createDisplayNameFilter('Error'),
+          ]),
+      );
+      utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
+        legacyRender(
+          <React.Fragment>
+            <ComponentWithError />
+            <ComponentWithWarning />
+            <ComponentWithWarningAndError />
+          </React.Fragment>,
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(``);
+      expect(store.componentWithErrorCount).toBe(0);
+      expect(store.componentWithWarningCount).toBe(0);
+
+      await actAsync(async () => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+            <ComponentWithError> ✕
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Error')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 1
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createDisplayNameFilter('Warning'),
+            utils.createDisplayNameFilter('Error'),
+          ]),
+      );
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.componentWithErrorCount).toBe(0);
+      expect(store.componentWithWarningCount).toBe(0);
+
+      await actAsync(async () => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+    });
+
+    // @reactVersion >= 18
+    it('only counts for unfiltered components (createRoot)', async () => {
+      function ComponentWithWarning() {
+        console.warn('test-only: render warning');
+        return null;
+      }
+      function ComponentWithError() {
+        console.error('test-only: render error');
+        return null;
+      }
+      function ComponentWithWarningAndError() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createDisplayNameFilter('Warning'),
+            utils.createDisplayNameFilter('Error'),
+          ]),
+      );
+
+      utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
+        utils.act(() => {
+          render(
+            <React.Fragment>
+              <ComponentWithError />
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+          );
+        }, false);
+      });
+
+      expect(store).toMatchInlineSnapshot(``);
+      expect(store.componentWithErrorCount).toBe(0);
+      expect(store.componentWithWarningCount).toBe(0);
+
+      await actAsync(async () => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+            <ComponentWithError> ✕
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Error')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 1
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      await actAsync(
+        async () =>
+          (store.componentFilters = [
+            utils.createDisplayNameFilter('Warning'),
+            utils.createDisplayNameFilter('Error'),
+          ]),
+      );
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.componentWithErrorCount).toBe(0);
+      expect(store.componentWithWarningCount).toBe(0);
+
+      await actAsync(async () => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+    });
+  });
+
+  // @reactVersion >= 18.0
+  it('resets forced error and fallback states when filters are changed', async () => {
+    store.componentFilters = [];
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false};
+
+      static getDerivedStateFromError() {
+        return {hasError: true};
+      }
+
+      render() {
+        if (this.state.hasError) {
+          return <div key="did-error" />;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App() {
+      return (
+        <>
+          <React.Suspense fallback={<div key="loading" />}>
+            <div key="suspense-content" />
+          </React.Suspense>
+          <ErrorBoundary>
+            <div key="error-content" />
+          </ErrorBoundary>
+        </>
+      );
+    }
+
+    await actAsync(async () => {
+      render(<App />);
+    });
+    const rendererID = utils.getRendererID();
+    await actAsync(() => {
+      agent.overrideSuspense({
+        id: store.getElementIDAtIndex(2),
+        rendererID,
+        forceFallback: true,
+      });
+      agent.overrideError({
+        id: store.getElementIDAtIndex(4),
+        rendererID,
+        forceError: true,
+      });
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Suspense>
+              <div key="loading">
+          ▾ <ErrorBoundary>
+              <div key="did-error">
+      [suspense-root]  rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
+        <Suspense name="App" rects={[{x:1,y:2,width:0,height:1}]}>
+    `);
+
+    await actAsync(() => {
+      store.componentFilters = [
+        utils.createElementTypeFilter(Types.ElementTypeFunction, true),
+      ];
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div key="suspense-content">
+        ▾ <ErrorBoundary>
+            <div key="error-content">
+      [suspense-root]  rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:0,height:1}]}>
+    `);
+  });
+
+  // @reactVersion >= 19.2
+  it('can filter by Activity slices', async () => {
+    const Activity = React.Activity;
+    const immediate = Promise.resolve(<div>Immediate</div>);
+
+    function Root({children}) {
+      return (
+        <Activity name="/" mode="visible">
+          <React.Suspense fallback="Loading...">
+            <h1>Root</h1>
+            <main>{children}</main>
+          </React.Suspense>
+        </Activity>
+      );
+    }
+
+    function Layout({children}) {
+      return (
+        <Activity name="/blog" mode="visible">
+          <h2>Blog</h2>
+          <section>{children}</section>
+        </Activity>
+      );
+    }
+
+    function Page() {
+      return <React.Suspense fallback="Loading...">{immediate}</React.Suspense>;
+    }
+
+    await actAsync(async () =>
+      render(
+        <Root>
+          <Layout>
+            <Page />
+          </Layout>
+        </Root>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Activity name="/">
+            ▾ <Suspense>
+                <h1>
+              ▾ <main>
+                ▾ <Layout>
+                  ▾ <Activity name="/blog">
+                      <h2>
+                    ▾ <section>
+                      ▾ <Page>
+                        ▾ <Suspense>
+                            <div>
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createActivitySliceFilter(store.getElementIDAtIndex(1)),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Activity name="/">
+          ▾ <Suspense>
+              <h1>
+            ▾ <main>
+              ▾ <Layout>
+                ▸ <Activity name="/blog">
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+    `);
+
+    await actAsync(async () => (store.componentFilters = []));
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Activity name="/">
+            ▾ <Suspense>
+                <h1>
+              ▾ <main>
+                ▾ <Layout>
+                  ▾ <Activity name="/blog">
+                      <h2>
+                    ▾ <section>
+                      ▾ <Page>
+                        ▾ <Suspense>
+                            <div>
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+    `);
+  });
+});
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 00000000000..f4fd6ba2ba8
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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');
+const {getVersionedRenderImplementation} = require('./utils');
+
+describe('Store owners list', () => {
+  let React;
+  let act;
+  let store;
+
+  beforeEach(() => {
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+
+    const utils = require('./utils');
+    act = utils.act;
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  function getFormattedOwnersList(elementID) {
+    const ownersList = store.getOwnersListForElement(elementID);
+    return printOwnersList(ownersList);
+  }
+
+  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(() => render(<Root />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Intermediate>
+            ▾ <Wrapper>
+                <Leaf>
+    `);
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+          ▾ <Intermediate>
+              <Leaf>"
+    `);
+
+    const intermediateID = store.getElementIDAtIndex(1);
+    expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
+      "  ▾ <Intermediate>
+          ▾ <Wrapper>"
+    `);
+  });
+
+  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(() => render(<Root />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Intermediate key="intermediate">
+              <Leaf key="leaf">
+            ▾ <Wrapper key="wrapper">
+                <Leaf>
+            <Leaf key="leaf">
+    `);
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+          ▾ <Intermediate key="intermediate">
+              <Leaf>
+            <Leaf key="leaf">"
+    `);
+
+    const intermediateID = store.getElementIDAtIndex(1);
+    expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
+      "  ▾ <Intermediate key="intermediate">
+            <Leaf key="leaf">
+          ▾ <Wrapper key="wrapper">"
+    `);
+  });
+
+  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>;
+
+    act(() => render(<Root includeDirect={false} includeIndirect={true} />));
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Intermediate>
+            ▾ <Wrapper>
+                <Leaf>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+          ▾ <Intermediate>
+              <Leaf>"
+    `);
+
+    act(() => render(<Root includeDirect={true} includeIndirect={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+            <Leaf>
+          ▾ <Intermediate>
+            ▾ <Wrapper>
+                <Leaf>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+            <Leaf>
+          ▾ <Intermediate>
+              <Leaf>"
+    `);
+
+    act(() => render(<Root includeDirect={true} includeIndirect={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+            <Leaf>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+            <Leaf>"
+    `);
+
+    act(() => render(<Root includeDirect={false} includeIndirect={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Root>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(
+      `"    <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>;
+
+    act(() => render(<Root ascending={true} />));
+
+    const rootID = store.getElementIDAtIndex(0);
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+            <Leaf key="A">
+            <Leaf key="B">
+            <Leaf key="C">
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+            <Leaf key="A">
+            <Leaf key="B">
+            <Leaf key="C">"
+    `);
+
+    act(() => render(<Root ascending={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+            <Leaf key="C">
+            <Leaf key="B">
+            <Leaf key="A">
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+            <Leaf key="C">
+            <Leaf key="B">
+            <Leaf key="A">"
+    `);
+  });
+});
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 00000000000..db93c280cdf
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -0,0 +1,1646 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {getLegacyRenderImplementation} from './utils';
+
+describe('StoreStress (Legacy Mode)', () => {
+  let React;
+  let act;
+  let bridge;
+  let store;
+  let print;
+
+  function readValue(promise) {
+    if (typeof React.use === 'function') {
+      return React.use(promise);
+    }
+
+    // Support for React < 19.0
+    switch (promise.status) {
+      case 'fulfilled':
+        return promise.value;
+      case 'rejected':
+        throw promise.reason;
+      case 'pending':
+        throw promise;
+      default:
+        promise.status = 'pending';
+        promise.then(
+          value => {
+            promise.status = 'fulfilled';
+            promise.value = value;
+          },
+          reason => {
+            promise.status = 'rejected';
+            promise.reason = reason;
+          },
+        );
+        throw promise;
+    }
+  }
+
+  beforeEach(() => {
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+
+    const utils = require('./utils');
+    act = utils.act;
+
+    print = require('./__serializers__/storeSerializer').print;
+  });
+
+  const {render, unmount, createContainer, getContainer} =
+    getLegacyRenderImplementation();
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  // @reactVersion >= 16.9
+  // @reactVersion < 19
+  // @gate !disableLegacyMode
+  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.
+      const [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].
+    act(() => 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(getContainer().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(getContainer().textContent).toMatch('abxde');
+    const snapshotForABXDE = print(store);
+
+    // 3. Verify flipping it back produces the original result.
+    act(() => {
+      setShowX(false);
+    });
+    expect(getContainer().textContent).toMatch('abcde');
+    expect(print(store)).toBe(snapshotForABCDE);
+
+    // 4. Clean up.
+    act(() => 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
+    const 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.
+      createContainer();
+
+      // Verify mounting 'abcde'.
+      act(() => render(<Parent>{cases[i]}</Parent>));
+      expect(getContainer().textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(getContainer().textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(getContainer().textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      act(() => unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 6. Verify *updates* by reusing the container between iterations.
+    // There'll be no unmounting until the very end.
+    createContainer();
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      act(() => render(<Parent>{cases[i]}</Parent>));
+      expect(getContainer().textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      act(() => {
+        setShowX(true);
+      });
+      expect(getContainer().textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      act(() => {
+        setShowX(false);
+      });
+      expect(getContainer().textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+      // Don't unmount. Reuse the container between iterations.
+    }
+    act(() => unmount());
+    expect(print(store)).toBe('');
+  });
+
+  // @reactVersion >= 16.9
+  // @reactVersion <= 18.2
+  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
+    const steps = [
+      a,
+      b,
+      c,
+      d,
+      e,
+      [a],
+      [b],
+      [c],
+      [d],
+      [e],
+      [a, b],
+      [b, a],
+      [b, c],
+      [c, b],
+      [a, c],
+      [c, a],
+    ];
+
+    const stepsSnapshot = [
+      `
+      [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">
+      `,
+    ];
+
+    const Root = ({children}) => {
+      return children;
+    };
+
+    // 1. Capture the expected render result.
+    const snapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      createContainer();
+
+      act(() => render(<Root>{steps[i]}</Root>));
+      // We snapshot each step once so it doesn't regress.
+      expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
+      snapshots.push(print(store));
+      act(() => unmount());
+      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++) {
+        createContainer();
+
+        act(() => render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => render(<Root>{steps[j]}</Root>));
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() => render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => 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++) {
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() =>
+          render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        act(() =>
+          render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        act(() => unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  // @reactVersion >= 18.0
+  // @reactVersion <= 18.2
+  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,
+    ];
+
+    // Excluding Suspense tree here due to different measurement semantics for fallbacks
+    const stepsSnapshot = [
+      `
+        "[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>"
+      `,
+    ];
+
+    const never = new Promise(() => {});
+    const Never = () => {
+      readValue(never);
+    };
+
+    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.
+    const snapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      createContainer();
+
+      act(() =>
+        render(
+          <Root>
+            <X />
+            <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      // We snapshot each step once so it doesn't regress.
+      expect(print(store, undefined, undefined, false)).toMatchInlineSnapshot(
+        stepsSnapshot[i],
+      );
+      snapshots.push(print(store, undefined, undefined, false));
+      act(() => unmount());
+      expect(print(store)).toBe('');
+    }
+
+    // 2. Verify check Suspense can render same steps as initial fallback content.
+    for (let i = 0; i < steps.length; i++) {
+      createContainer();
+
+      act(() =>
+        render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+      act(() => 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].
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => 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].
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          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, undefined, undefined, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => 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].
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          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, undefined, undefined, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => 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].
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Verify the successful transition to steps[j].
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        act(() => 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].
+        createContainer();
+
+        act(() =>
+          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, undefined, undefined, false)).toEqual(snapshots[i]);
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store, undefined, undefined, false)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).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, undefined, undefined, false)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Fallback is still forced though.
+        expect(print(store, undefined, undefined, false)).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, undefined, undefined, false)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        act(() => unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  // @reactVersion >= 18.0
+  // @reactVersion <= 18.2
+  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 stepsSnapshot = [
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <A key="a">
+                  <B key="b">
+                  <C key="c">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <C key="c">
+                  <B key="b">
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <C key="c">
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <C key="c">
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <C key="c">
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <A key="a">
+                  <B key="b">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <B key="b">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+              ▾ <MaybeSuspend>
+                  <A key="a">
+                  <Z>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={[]}>
+      `,
+    ];
+
+    const stepsSnapshotTwo = [
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <A key="a">
+                <B key="b">
+                <C key="c">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <C key="c">
+                <B key="b">
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <C key="c">
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <C key="c">
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <C key="c">
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <A key="a">
+                <B key="b">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+              <Suspense>
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <B key="b">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+      `
+        [root]
+          ▾ <Root>
+              <X>
+            ▾ <Suspense>
+                <A key="a">
+              <Y>
+        [suspense-root]  rects={[]}
+          <Suspense name="Unknown" rects={null}>
+      `,
+    ];
+
+    const never = new Promise(() => {});
+    const Never = () => {
+      readValue(never);
+    };
+
+    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.
+    const snapshots = [];
+
+    for (let i = 0; i < steps.length; i++) {
+      createContainer();
+
+      act(() =>
+        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.
+      expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
+      snapshots.push(print(store));
+      act(() => 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.
+    const fallbackSnapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      createContainer();
+
+      act(() =>
+        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.
+      expect(store).toMatchInlineSnapshot(stepsSnapshotTwo[i]);
+      fallbackSnapshots.push(print(store, undefined, undefined, false));
+      act(() => 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].
+        createContainer();
+
+        act(() =>
+          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(() =>
+          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(() =>
+          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(() => 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].
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[i],
+        );
+        // Re-render with steps[j].
+        act(() =>
+          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, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[j],
+        );
+        // Check that we can transition back again.
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <MaybeSuspend suspend={true}>
+                  <X />
+                  <Y />
+                </MaybeSuspend>
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[i],
+        );
+        // Clean up after every iteration.
+        act(() => 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].
+        createContainer();
+
+        act(() =>
+          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(() =>
+          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, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[j],
+        );
+        // Check that we can transition back again.
+        act(() =>
+          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(() => 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].
+        createContainer();
+
+        act(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[i],
+        );
+        // Re-render with steps[j].
+        act(() =>
+          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(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[i],
+        );
+        // Clean up after every iteration.
+        act(() => 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].
+        createContainer();
+
+        act(() =>
+          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, undefined, undefined, false)).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(() =>
+          render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, undefined, undefined, false)).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, undefined, undefined, false)).toEqual(
+          fallbackSnapshots[j],
+        );
+
+        // Switch to primary mode.
+        act(() =>
+          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, undefined, undefined, false)).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(() => unmount());
+        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 00000000000..e060cb3f06b
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -0,0 +1,1367 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+  let act;
+  let actAsync;
+  let bridge;
+  let store;
+  let print;
+
+  jest.setTimeout(15000);
+
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('./utils').act;
+    // TODO: Figure out recommendation for concurrent mode tests, then replace
+    // this helper with the real thing.
+    actAsync = require('./utils').actAsync;
+
+    print = require('./__serializers__/storeSerializer').printStore;
+  });
+
+  // This is a stress test for the tree mount/update/unmount traversal.
+  // It renders different trees that should produce the same output.
+  // @reactVersion >= 18.0
+  it('should handle a stress test with different tree operations (Concurrent Mode)', async () => {
+    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.
+      const [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');
+    let root = ReactDOMClient.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
+    const 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');
+      root = ReactDOMClient.createRoot(container);
+
+      // Verify mounting 'abcde'.
+      await act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      await act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      await act(() => {
+        setShowX(false);
+      });
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toBe(snapshotForABCDE);
+
+      // Clean up.
+      await 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');
+    root = ReactDOMClient.createRoot(container);
+    for (let i = 0; i < cases.length; i++) {
+      // Verify mounting 'abcde'.
+      await act(() => root.render(<Parent>{cases[i]}</Parent>));
+      expect(container.textContent).toMatch('abcde');
+      expect(print(store)).toEqual(snapshotForABCDE);
+
+      // Verify switching to 'abxde'.
+      await act(() => {
+        setShowX(true);
+      });
+      expect(container.textContent).toMatch('abxde');
+      expect(print(store)).toBe(snapshotForABXDE);
+
+      // Verify switching back to 'abcde'.
+      await 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('');
+  });
+
+  // @reactVersion >= 18.0
+  it('should handle stress test with reordering (Concurrent Mode)', async () => {
+    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
+    const 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.
+    const snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Root>{steps[i]}</Root>));
+      // We snapshot each step once so it doesn't regress.
+      snapshots.push(print(store));
+      await act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    expect(snapshots).toMatchInlineSnapshot(`
+      [
+        "[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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => root.render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        await act(() => root.render(<Root>{steps[j]}</Root>));
+        expect(print(store)).toMatch(snapshots[j]);
+        await act(() => root.render(<Root>{steps[i]}</Root>));
+        expect(print(store)).toMatch(snapshots[i]);
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        await act(() =>
+          root.render(
+            <Root>
+              <div>{steps[j]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[j]);
+        await act(() =>
+          root.render(
+            <Root>
+              <div>{steps[i]}</div>
+            </Root>,
+          ),
+        );
+        expect(print(store)).toMatch(snapshots[i]);
+        await act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  // @reactVersion >= 18.0
+  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 = () => {
+      if (React.use) {
+        React.use(new Promise(() => {}));
+      } else {
+        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.
+    const snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      const root = ReactDOMClient.createRoot(container);
+      await 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, false, null, false));
+      await act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    expect(snapshots).toMatchInlineSnapshot(`
+      [
+        "[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++) {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() =>
+        root.render(
+          <Root>
+            <X />
+            <React.Suspense fallback={steps[i]}>
+              <Z />
+              <Never />
+              <Z />
+            </React.Suspense>
+            <Y />
+          </Root>,
+        ),
+      );
+      expect(print(store, false, null, false)).toEqual(snapshots[i]);
+      await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await 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, false, null, false)).toEqual(snapshots[i]);
+        await actAsync(async () => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store, false, null, false)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback.
+        await actAsync(async () => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <Z />
+                <Never />
+                <Z />
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        await act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store, false, null, false)).toEqual(snapshots[j]);
+
+        // Switch to primary mode.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        // Fallback is still forced though.
+        expect(print(store, false, null, false)).toEqual(snapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        await actAsync(async () => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        await actAsync(async () => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+
+  // @reactVersion >= 18.0
+  it('should handle a stress test for Suspense without type change (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 = () => {
+      if (React.use) {
+        React.use(new Promise(() => {}));
+      } else {
+        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.
+    const snapshots = [];
+    let container = document.createElement('div');
+    for (let i = 0; i < steps.length; i++) {
+      const root = ReactDOMClient.createRoot(container);
+      await 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, false, null, false));
+      await 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.
+    const fallbackSnapshots = [];
+    for (let i = 0; i < steps.length; i++) {
+      const root = ReactDOMClient.createRoot(container);
+      await 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, false, null, false));
+      await act(() => root.unmount());
+      expect(print(store)).toBe('');
+    }
+
+    expect(snapshots).toMatchInlineSnapshot(`
+      [
+        "[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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await 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, false, null, false)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        await 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, false, null, false)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(fallbackSnapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={z}>
+                <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(fallbackSnapshots[i]);
+        // Re-render with steps[j].
+        await 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, false, null, false)).toEqual(snapshots[j]);
+        // Check that we can transition back again.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[i]}>
+                <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(fallbackSnapshots[i]);
+        // Clean up after every iteration.
+        await 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');
+        const root = ReactDOMClient.createRoot(container);
+        await 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, false, null, false)).toEqual(snapshots[i]);
+        await actAsync(async () => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        expect(print(store, false, null, false)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback.
+        await actAsync(async () => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+
+        // Trigger actual fallback.
+        await act(() =>
+          root.render(
+            <Root>
+              <X />
+              <React.Suspense fallback={steps[j]}>
+                <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
+              </React.Suspense>
+              <Y />
+            </Root>,
+          ),
+        );
+        expect(print(store, false, null, false)).toEqual(fallbackSnapshots[j]);
+
+        // Force fallback while we're in fallback mode.
+        await act(() => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: true,
+          });
+        });
+        // Keep seeing fallback content.
+        expect(print(store, false, null, false)).toEqual(fallbackSnapshots[j]);
+
+        // Switch to primary mode.
+        await 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, false, null, false)).toEqual(fallbackSnapshots[j]);
+
+        // Stop forcing fallback. This reverts to primary content.
+        await actAsync(async () => {
+          bridge.send('overrideSuspense', {
+            id: suspenseID,
+            rendererID: store.getRendererIDForElement(suspenseID),
+            forceFallback: false,
+          });
+        });
+        // Now we see primary content.
+        expect(print(store, false, null, false)).toEqual(snapshots[i]);
+
+        // Clean up after every iteration.
+        await act(() => root.unmount());
+        expect(print(store)).toBe('');
+      }
+    }
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/traceUpdates-test.js b/packages/react-devtools-shared/src/__tests__/traceUpdates-test.js
new file mode 100644
index 00000000000..b8aa978a149
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/traceUpdates-test.js
@@ -0,0 +1,269 @@
+import {groupAndSortNodes} from 'react-devtools-shared/src/backend/views/TraceUpdates/canvas';
+
+describe('Trace updates group and sort nodes', () => {
+  test('should group nodes by position without changing order within group', () => {
+    const nodeToData = new Map([
+      [
+        {id: 1},
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#80b393',
+          displayName: 'Node1',
+          count: 3,
+        },
+      ],
+      [
+        {id: 2},
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#63b19e',
+          displayName: 'Node2',
+          count: 2,
+        },
+      ],
+    ]);
+
+    const result = groupAndSortNodes(nodeToData);
+
+    expect(result).toEqual([
+      [
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#80b393',
+          displayName: 'Node1',
+          count: 3,
+        },
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#63b19e',
+          displayName: 'Node2',
+          count: 2,
+        },
+      ],
+    ]);
+  });
+
+  test('should sort groups by lowest count in each group', () => {
+    const nodeToData = new Map([
+      [
+        {id: 1},
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#97b488',
+          displayName: 'Group1',
+          count: 4,
+        },
+      ],
+      [
+        {id: 2},
+        {
+          rect: {left: 100, top: 0, width: 100, height: 100},
+          color: '#37afa9',
+          displayName: 'Group2',
+          count: 1,
+        },
+      ],
+      [
+        {id: 3},
+        {
+          rect: {left: 200, top: 0, width: 100, height: 100},
+          color: '#63b19e',
+          displayName: 'Group3',
+          count: 2,
+        },
+      ],
+    ]);
+
+    const result = groupAndSortNodes(nodeToData);
+
+    expect(result).toEqual([
+      [
+        {
+          rect: {left: 100, top: 0, width: 100, height: 100},
+          color: '#37afa9',
+          displayName: 'Group2',
+          count: 1,
+        },
+      ],
+      [
+        {
+          rect: {left: 200, top: 0, width: 100, height: 100},
+          color: '#63b19e',
+          displayName: 'Group3',
+          count: 2,
+        },
+      ],
+      [
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#97b488',
+          displayName: 'Group1',
+          count: 4,
+        },
+      ],
+    ]);
+  });
+
+  test('should maintain order within groups while sorting groups by lowest count', () => {
+    const nodeToData = new Map([
+      [
+        {id: 1},
+        {
+          rect: {left: 0, top: 0, width: 50, height: 50},
+          color: '#97b488',
+          displayName: 'Pos1Node1',
+          count: 4,
+        },
+      ],
+      [
+        {id: 2},
+        {
+          rect: {left: 0, top: 0, width: 60, height: 60},
+          color: '#63b19e',
+          displayName: 'Pos1Node2',
+          count: 2,
+        },
+      ],
+      [
+        {id: 3},
+        {
+          rect: {left: 100, top: 0, width: 70, height: 70},
+          color: '#80b393',
+          displayName: 'Pos2Node1',
+          count: 3,
+        },
+      ],
+      [
+        {id: 4},
+        {
+          rect: {left: 100, top: 0, width: 80, height: 80},
+          color: '#37afa9',
+          displayName: 'Pos2Node2',
+          count: 1,
+        },
+      ],
+    ]);
+
+    const result = groupAndSortNodes(nodeToData);
+
+    expect(result).toEqual([
+      [
+        {
+          rect: {left: 100, top: 0, width: 70, height: 70},
+          color: '#80b393',
+          displayName: 'Pos2Node1',
+          count: 3,
+        },
+        {
+          rect: {left: 100, top: 0, width: 80, height: 80},
+          color: '#37afa9',
+          displayName: 'Pos2Node2',
+          count: 1,
+        },
+      ],
+      [
+        {
+          rect: {left: 0, top: 0, width: 50, height: 50},
+          color: '#97b488',
+          displayName: 'Pos1Node1',
+          count: 4,
+        },
+        {
+          rect: {left: 0, top: 0, width: 60, height: 60},
+          color: '#63b19e',
+          displayName: 'Pos1Node2',
+          count: 2,
+        },
+      ],
+    ]);
+  });
+
+  test('should handle multiple groups with same minimum count', () => {
+    const nodeToData = new Map([
+      [
+        {id: 1},
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#37afa9',
+          displayName: 'Group1Node1',
+          count: 1,
+        },
+      ],
+      [
+        {id: 2},
+        {
+          rect: {left: 100, top: 0, width: 100, height: 100},
+          color: '#37afa9',
+          displayName: 'Group2Node1',
+          count: 1,
+        },
+      ],
+    ]);
+
+    const result = groupAndSortNodes(nodeToData);
+
+    expect(result).toEqual([
+      [
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#37afa9',
+          displayName: 'Group1Node1',
+          count: 1,
+        },
+      ],
+      [
+        {
+          rect: {left: 100, top: 0, width: 100, height: 100},
+          color: '#37afa9',
+          displayName: 'Group2Node1',
+          count: 1,
+        },
+      ],
+    ]);
+  });
+
+  test('should filter out nodes without rect property', () => {
+    const nodeToData = new Map([
+      [
+        {id: 1},
+        {
+          rect: null,
+          color: '#37afa9',
+          displayName: 'NoRectNode',
+          count: 1,
+        },
+      ],
+      [
+        {id: 2},
+        {
+          rect: undefined,
+          color: '#63b19e',
+          displayName: 'UndefinedRectNode',
+          count: 2,
+        },
+      ],
+      [
+        {id: 3},
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#80b393',
+          displayName: 'ValidNode',
+          count: 3,
+        },
+      ],
+    ]);
+
+    const result = groupAndSortNodes(nodeToData);
+
+    expect(result).toEqual([
+      [
+        {
+          rect: {left: 0, top: 0, width: 100, height: 100},
+          color: '#80b393',
+          displayName: 'ValidNode',
+          count: 3,
+        },
+      ],
+    ]);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js b/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
new file mode 100644
index 00000000000..fd84deb29b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 semver = require('semver');
+
+let shouldPass;
+let isFocused;
+describe('transform-react-version-pragma', () => {
+  const originalTest = test;
+
+  // eslint-disable-next-line no-unused-vars
+  const _test_react_version = (range, testName, cb) => {
+    originalTest(testName, (...args) => {
+      shouldPass = !!semver.satisfies('18.0.0', range);
+      return cb(...args);
+    });
+  };
+
+  // eslint-disable-next-line no-unused-vars
+  const _test_react_version_focus = (range, testName, cb) => {
+    originalTest(testName, (...args) => {
+      shouldPass = !!semver.satisfies('18.0.0', range);
+      isFocused = true;
+      return cb(...args);
+    });
+  };
+
+  // eslint-disable-next-line no-unused-vars
+  const _test_ignore_for_react_version = (testName, cb) => {
+    originalTest(testName, (...args) => {
+      shouldPass = false;
+      return cb(...args);
+    });
+  };
+
+  beforeEach(() => {
+    shouldPass = null;
+    isFocused = false;
+  });
+
+  // @reactVersion >= 17.9
+  it('reactVersion flag is on >=', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion >= 18.1
+  it('reactVersion flag is off >=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  it('reactVersion flag is on <=', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion <= 17.9
+  it('reactVersion flag is off <=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion > 17.9
+  it('reactVersion flag is on >', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion > 18.1
+  it('reactVersion flag is off >', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion < 18.1
+  it('reactVersion flag is on <', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion < 17.0.0
+  it('reactVersion flag is off <', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion = 18.0
+  it('reactVersion flag is on =', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion = 18.1
+  it('reactVersion flag is off =', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  /* eslint-disable jest/no-focused-tests */
+
+  // @reactVersion >= 18.1
+  it.only('reactVersion fit', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  it.only('reactVersion test.only', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion <= 17.1
+  it('reactVersion multiple pragmas fail', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion >= 17.1
+  it('reactVersion multiple pragmas pass', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion <= 17.1
+  it.only('reactVersion focused multiple pragmas fail', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion >= 17.1
+  it.only('reactVersion focused multiple pragmas pass', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(true);
+  });
+});
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 00000000000..9b6b7e7ab07
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -0,0 +1,2653 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {getVersionedRenderImplementation} from './utils';
+
+describe('TreeListContext', () => {
+  let React;
+  let TestRenderer: ReactTestRenderer;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+  let withErrorsOrWarningsIgnored;
+
+  let BridgeContext;
+  let StoreContext;
+  let TreeContext;
+
+  let dispatch: DispatcherContext;
+  let state: StateContext;
+
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    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');
+  });
+
+  const {render, unmount, createContainer} = getVersionedRenderImplementation();
+
+  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(() => render(<Grandparent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Test stepping through to the end
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Test stepping back to the beginning
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Test wrap around behavior
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+    });
+
+    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(() => render(<Grandparent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // 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).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+    });
+
+    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(() => render(<Grandparent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      const lastChildID = store.getElementIDAtIndex(store.numElements - 1);
+
+      // Select the last child
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Select its parent
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Select grandparent
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // No-op
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      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 () => {
+      const Grandparent = props => props.children || null;
+      const Parent = props => props.children || null;
+      const Child = () => null;
+
+      utils.act(() =>
+        render(
+          <Grandparent>
+            <Parent>
+              <Child />
+              <Child />
+            </Parent>
+          </Grandparent>,
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      // Select the second child
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 3}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Remove the child (which should auto-select the parent)
+      await utils.actAsync(() =>
+        render(
+          <Grandparent>
+            <Parent />
+          </Grandparent>,
+        ),
+      );
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →      <Parent>
+      `);
+
+      // Unmount the root (so that nothing is selected)
+      await utils.actAsync(() => unmount());
+      expect(state).toMatchInlineSnapshot(``);
+    });
+
+    it('should navigate next/previous sibling and skip over children in between', () => {
+      const Grandparent = () => (
+        <React.Fragment>
+          <Parent numChildren={1} />
+          <Parent numChildren={3} />
+          <Parent numChildren={2} />
+        </React.Fragment>
+      );
+      const Parent = ({numChildren}) =>
+        new Array(numChildren)
+          .fill(true)
+          .map((_, index) => <Child key={index} />);
+      const Child = () => null;
+
+      utils.act(() => render(<Grandparent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+
+      const firstParentID = ((store.getElementIDAtIndex(1): any): number);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: firstParentID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+                 <Child key="2">
+        →    ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+    });
+
+    it('should navigate the owner hierarchy', () => {
+      const Wrapper = ({children}) => children;
+      const Grandparent = () => (
+        <React.Fragment>
+          <Wrapper>
+            <Parent numChildren={1} />
+          </Wrapper>
+          <Wrapper>
+            <Parent numChildren={3} />
+          </Wrapper>
+          <Wrapper>
+            <Parent numChildren={2} />
+          </Wrapper>
+        </React.Fragment>
+      );
+      const Parent = ({numChildren}) =>
+        new Array(numChildren)
+          .fill(true)
+          .map((_, index) => <Child key={index} />);
+      const Child = () => null;
+
+      utils.act(() => render(<Grandparent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+
+      const childID = ((store.getElementIDAtIndex(7): any): number);
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: childID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+        →          <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Basic navigation test
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the root already)
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+        →          <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the leaf node)
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+        →          <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Other navigational actions should clear out the temporary owner chain.
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+        →          <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Start a new tree on parent
+      const parentID = ((store.getElementIDAtIndex(5): any): number);
+      utils.act(() =>
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: parentID}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the top)
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+
+      // Noop (since we're at the leaf of this owner tree)
+      // It should not be possible to navigate beyond the owner chain leaf.
+      utils.act(() =>
+        dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'}),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+             ▾ <Wrapper>
+        →      ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+                   <Child key="2">
+             ▾ <Wrapper>
+               ▾ <Parent>
+                   <Child key="0">
+                   <Child key="1">
+      `);
+    });
+  });
+
+  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(() =>
+        render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+            <Qux />
+          </React.Fragment>,
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
+
+      // NOTE: multi-match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
+
+      // NOTE: single match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'f'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Foo>
+             <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
+
+      // NOTE: no match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'y'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Foo>
+             <Bar>
+             <Baz>
+             <Qux> [withHOC]
+      `);
+
+      // NOTE: HOC match
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'w'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+        →    <Qux> [withHOC]
+      `);
+    });
+
+    it('should select the next and previous items within the search results', () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      utils.act(() =>
+        render(
+          <React.Fragment>
+            <Foo />
+            <Baz />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+             <Bar>
+             <Baz>
+      `);
+
+      // search for "ba"
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Baz>
+             <Bar>
+             <Baz>
+      `);
+
+      // go to second result
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+        →    <Bar>
+             <Baz>
+      `);
+
+      // go to third result
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+             <Bar>
+        →    <Baz>
+      `);
+
+      // go to second result
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+        →    <Bar>
+             <Baz>
+      `);
+
+      // go to first result
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Baz>
+             <Bar>
+             <Baz>
+      `);
+
+      // wrap to last result
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Baz>
+             <Bar>
+        →    <Baz>
+      `);
+
+      // wrap to first result
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Baz>
+             <Bar>
+             <Baz>
+      `);
+    });
+
+    it('should add newly mounted elements to the search results set if they match the current text', async () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      utils.act(() =>
+        render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+          </React.Fragment>,
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+      `);
+
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
+
+      await utils.actAsync(() =>
+        render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+        ),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+      `);
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+        →    <Baz>
+      `);
+    });
+
+    it('should remove unmounted elements from the search results set', async () => {
+      const Foo = () => null;
+      const Bar = () => null;
+      const Baz = () => null;
+
+      utils.act(() =>
+        render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+            <Baz />
+          </React.Fragment>,
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+      `);
+
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+      `);
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+        →    <Baz>
+      `);
+
+      await utils.actAsync(() =>
+        render(
+          <React.Fragment>
+            <Foo />
+            <Bar />
+          </React.Fragment>,
+        ),
+      );
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+      `);
+
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
+
+      // Noop since the list is now one item long
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
+    });
+  });
+
+  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(() => render(<Grandparent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+
+      const parentID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child>
+               <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'RESET_OWNER_STACK'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
+    });
+
+    it('should remove an element from the owners list if it is unmounted', async () => {
+      const Grandparent = ({count}) => <Parent count={count} />;
+      const Parent = ({count}) =>
+        new Array(count).fill(true).map((_, index) => <Child key={index} />);
+      const Child = () => null;
+
+      utils.act(() => render(<Grandparent count={2} />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child key="0">
+                 <Child key="1">
+      `);
+
+      const parentID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child key="0">
+               <Child key="1">
+      `);
+
+      await utils.actAsync(() => render(<Grandparent count={1} />));
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child key="0">
+      `);
+
+      await utils.actAsync(() => render(<Grandparent count={0} />));
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Parent>
+      `);
+    });
+
+    it('should exit the owners list if the current owner is unmounted', async () => {
+      const Parent = props => props.children || null;
+      const Child = () => null;
+
+      utils.act(() =>
+        render(
+          <Parent>
+            <Child />
+          </Parent>,
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+               <Child>
+      `);
+
+      const childID = ((store.getElementIDAtIndex(1): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Child>
+      `);
+
+      await utils.actAsync(() => render(<Parent />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Parent>
+      `);
+
+      const parentID = ((store.getElementIDAtIndex(0): any): number);
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Parent>
+      `);
+
+      await utils.actAsync(() => unmount());
+      expect(state).toMatchInlineSnapshot(``);
+    });
+
+    // 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>
+      );
+
+      utils.act(() => render(<Parent />));
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+             ▾ <Suspense>
+               ▾ <Child>
+                 ▾ <Suspense>
+                     <Grandchild>
+        [suspense-root]  rects={null}
+          <Suspense name="Parent" rects={null}>
+            <Suspense name="Child" rects={null}>
+      `);
+
+      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).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Child>
+             ▾ <Suspense>
+                 <Grandchild>
+      `);
+
+      // 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).toMatchInlineSnapshot(`
+        [owners]
+           ▾ <Child>
+        →    ▾ <Suspense>
+                 <Grandchild>
+      `);
+
+      // 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).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+        →    ▾ <Suspense>
+               ▾ <Child>
+                 ▾ <Suspense>
+                     <Grandchild>
+        [suspense-root]  rects={null}
+          <Suspense name="Parent" rects={null}>
+            <Suspense name="Child" rects={null}>
+      `);
+    });
+  });
+
+  describe('inline errors/warnings state', () => {
+    const {
+      clearErrorsAndWarnings: clearErrorsAndWarningsAPI,
+      clearErrorsForElement: clearErrorsForElementAPI,
+      clearWarningsForElement: clearWarningsForElementAPI,
+    } = require('react-devtools-shared/src/backendAPI');
+
+    function clearAllErrors() {
+      utils.act(() => clearErrorsAndWarningsAPI({bridge, store}));
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function clearErrorsForElement(id) {
+      const rendererID = store.getRendererIDForElement(id);
+      utils.act(() => clearErrorsForElementAPI({bridge, id, rendererID}));
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function clearWarningsForElement(id) {
+      const rendererID = store.getRendererIDForElement(id);
+      utils.act(() => clearWarningsForElementAPI({bridge, id, rendererID}));
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function selectNextErrorOrWarning() {
+      utils.act(() =>
+        dispatch({type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'}),
+      );
+    }
+
+    function selectPreviousErrorOrWarning() {
+      utils.act(() =>
+        dispatch({
+          type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+        }),
+      );
+    }
+
+    function Child({logError = false, logWarning = false}) {
+      if (logError === true) {
+        console.error('test-only: error');
+      }
+      if (logWarning === true) {
+        console.warn('test-only: warning');
+      }
+      return null;
+    }
+
+    it('should handle when there are no errors/warnings', () => {
+      utils.act(() =>
+        render(
+          <React.Fragment>
+            <Child />
+            <Child />
+            <Child />
+          </React.Fragment>,
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Child>
+             <Child>
+             <Child>
+      `);
+
+      // Next/previous errors should be a no-op
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Child>
+             <Child>
+             <Child>
+      `);
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Child>
+             <Child>
+             <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+             <Child>
+      `);
+
+      // Next/previous errors should still be a no-op
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+             <Child>
+      `);
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+             <Child>
+      `);
+    });
+
+    it('should cycle through the next errors/warnings and wrap around', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should cycle through the previous errors/warnings and wrap around', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should cycle through the next errors/warnings and wrap around with multiple roots', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        utils.act(() => {
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />,
+            </React.Fragment>,
+          );
+
+          createContainer();
+
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+          );
+        });
+      });
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should cycle through the previous errors/warnings and wrap around with multiple roots', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        utils.act(() => {
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />,
+            </React.Fragment>,
+          );
+
+          createContainer();
+
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+          );
+        });
+      });
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+        [root]
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        [root]
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should select the next or previous element relative to the current selection', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 2}));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        →    <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+             <Child>
+      `);
+
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 2}));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+             <Child> ⚠
+        →    <Child>
+             <Child> ✕
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child>
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+             <Child>
+      `);
+    });
+
+    it('should update correctly when errors/warnings are cleared for a fiber in the list', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+              <Child logError={true} />
+              <Child logWarning={true} />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+             <Child> ⚠
+             <Child> ✕
+             <Child> ✕
+             <Child> ⚠
+      `);
+
+      // Select the first item in the list
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+        →    <Child> ⚠
+             <Child> ✕
+             <Child> ✕
+             <Child> ⚠
+      `);
+
+      // Clear warnings (but the next Fiber has only errors)
+      clearWarningsForElement(store.getElementIDAtIndex(1));
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ✕
+             <Child> ✕
+             <Child> ⚠
+      `);
+
+      clearErrorsForElement(store.getElementIDAtIndex(2));
+
+      // Should step to the (now) next one in the list.
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+             <Child> ✕
+             <Child>
+        →    <Child> ⚠
+      `);
+
+      // Should skip over the (now) cleared Fiber
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ✕
+             <Child>
+             <Child> ⚠
+      `);
+    });
+
+    it('should update correctly when errors/warnings are cleared for the currently selected fiber', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child> ⚠
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+        →    <Child> ⚠
+             <Child> ✕
+      `);
+
+      clearWarningsForElement(store.getElementIDAtIndex(0));
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <Child>
+        →    <Child> ✕
+      `);
+    });
+
+    it('should update correctly when new errors/warnings are added', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child />
+              <Child />
+              <Child logError={true} />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child> ⚠
+             <Child>
+             <Child>
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+        →    <Child> ⚠
+             <Child>
+             <Child>
+             <Child> ✕
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ⚠
+             <Child>
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+             <Child> ⚠
+             <Child> ⚠
+             <Child>
+        →    <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+        →    <Child> ⚠
+             <Child> ⚠
+             <Child>
+             <Child> ✕
+      `);
+    });
+
+    it('should update correctly when all errors/warnings are cleared', () => {
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+             <Child> ⚠
+             <Child> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+        →    <Child> ⚠
+             <Child> ✕
+      `);
+
+      clearAllErrors();
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+      `);
+
+      selectPreviousErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →    <Child>
+             <Child>
+      `);
+    });
+
+    it('should update correctly when elements are added/removed', () => {
+      let errored = false;
+      function ErrorOnce() {
+        if (!errored) {
+          errored = true;
+          console.error('test-only:one-time-error');
+        }
+        return null;
+      }
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <ErrorOnce key="error" />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <ErrorOnce key="error"> ✕
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child />
+              <ErrorOnce key="error" />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <Child>
+             <ErrorOnce key="error"> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <Child>
+        →    <ErrorOnce key="error"> ✕
+      `);
+    });
+
+    it('should update correctly when elements are re-ordered', () => {
+      function ErrorOnce() {
+        const didErrorRef = React.useRef(false);
+        if (!didErrorRef.current) {
+          didErrorRef.current = true;
+          console.error('test-only:one-time-error');
+        }
+        return null;
+      }
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Child key="A" />
+              <ErrorOnce key="B" />
+              <Child key="C" />
+              <ErrorOnce key="D" />
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 0
+        [root]
+             <Child key="A">
+             <ErrorOnce key="B"> ✕
+             <Child key="C">
+             <ErrorOnce key="D"> ✕
+      `);
+
+      // Select a child
+      selectNextErrorOrWarning();
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 0
+        [root]
+             <Child key="A">
+        →    <ErrorOnce key="B"> ✕
+             <Child key="C">
+             <ErrorOnce key="D"> ✕
+      `);
+
+      // Re-order the tree and ensure indices are updated.
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <ErrorOnce key="B" />
+              <Child key="A" />
+              <ErrorOnce key="D" />
+              <Child key="C" />
+            </React.Fragment>,
+          ),
+        ),
+      );
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 0
+        [root]
+        →    <ErrorOnce key="B"> ✕
+             <Child key="A">
+             <ErrorOnce key="D"> ✕
+             <Child key="C">
+      `);
+
+      // Select the next child and ensure the index doesn't break.
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 0
+        [root]
+             <ErrorOnce key="B"> ✕
+             <Child key="A">
+        →    <ErrorOnce key="D"> ✕
+             <Child key="C">
+      `);
+
+      // Re-order the tree and ensure indices are updated.
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <ErrorOnce key="D" />
+              <ErrorOnce key="B" />
+              <Child key="A" />
+              <Child key="C" />
+            </React.Fragment>,
+          ),
+        ),
+      );
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 0
+        [root]
+        →    <ErrorOnce key="D"> ✕
+             <ErrorOnce key="B"> ✕
+             <Child key="A">
+             <Child key="C">
+      `);
+    });
+
+    it('should update select and auto-expand parts components within hidden parts of the tree', () => {
+      const Wrapper = ({children}) => children;
+
+      store.collapseNodesByDefault = true;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▸ <Wrapper>
+           ▸ <Wrapper>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▸ <Wrapper>
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+        →        <Child> ⚠
+      `);
+    });
+
+    it('should preserve errors for fibers even if they are filtered out of the tree initially', () => {
+      const Wrapper = ({children}) => children;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+          ),
+        ),
+      );
+
+      store.componentFilters = [utils.createDisplayNameFilter('Child')];
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Wrapper>
+           ▾ <Wrapper>
+               <Wrapper>
+      `);
+
+      utils.act(() => {
+        store.componentFilters = [];
+      });
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+    });
+
+    describe('suspense', () => {
+      // This verifies that we don't flush before the tree has been committed.
+      it('should properly handle errors/warnings from components inside of delayed Suspense', async () => {
+        const NeverResolves = React.lazy(() => new Promise(() => {}));
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <NeverResolves />
+              </React.Suspense>,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        jest.runAllTimers();
+
+        expect(state).toMatchInlineSnapshot(`
+          [root]
+               <Suspense>
+          [suspense-root]  rects={null}
+            <Suspense name="Unknown" rects={null}>
+        `);
+
+        selectNextErrorOrWarning();
+
+        expect(state).toMatchInlineSnapshot(`
+          [root]
+               <Suspense>
+          [suspense-root]  rects={null}
+            <Suspense name="Unknown" rects={null}>
+        `);
+      });
+
+      it('should properly handle errors/warnings from components that dont mount because of Suspense', async () => {
+        async function fakeImport(result) {
+          return {default: result};
+        }
+        const LazyComponent = React.lazy(() => fakeImport(Child));
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <LazyComponent />
+              </React.Suspense>,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(state).toMatchInlineSnapshot(`
+          [root]
+               <Suspense>
+          [suspense-root]  rects={null}
+            <Suspense name="Unknown" rects={null}>
+        `);
+
+        await Promise.resolve();
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <LazyComponent />
+              </React.Suspense>,
+            ),
+          ),
+        );
+
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 0, ⚠ 1
+          [root]
+             ▾ <Suspense>
+                 <Child> ⚠
+                 <Child>
+          [suspense-root]  rects={null}
+            <Suspense name="Unknown" rects={null}>
+        `);
+      });
+
+      it('should properly show errors/warnings from components in the Suspense fallback tree', async () => {
+        async function fakeImport(result) {
+          return {default: result};
+        }
+        const LazyComponent = React.lazy(() => fakeImport(Child));
+
+        const Fallback = () => <Child logError={true} />;
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            render(
+              <React.Suspense fallback={<Fallback />}>
+                <LazyComponent />
+              </React.Suspense>,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+             ▾ <Suspense>
+               ▾ <Fallback>
+                   <Child> ✕
+          [suspense-root]  rects={null}
+            <Suspense name="Unknown" rects={null}>
+        `);
+
+        await Promise.resolve();
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            render(
+              <React.Suspense fallback={<Fallback />}>
+                <LazyComponent />
+              </React.Suspense>,
+            ),
+          ),
+        );
+
+        expect(state).toMatchInlineSnapshot(`
+          [root]
+             ▾ <Suspense>
+                 <Child>
+          [suspense-root]  rects={null}
+            <Suspense name="Unknown" rects={null}>
+        `);
+      });
+    });
+
+    describe('error boundaries', () => {
+      it('should properly handle errors from components that dont mount because of an error', () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        class BadRender extends React.Component {
+          render() {
+            console.error('test-only: I am about to throw!');
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              render(
+                <ErrorBoundary>
+                  <BadRender />
+                </ErrorBoundary>,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+              <ErrorBoundary>
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          [root]
+               <ErrorBoundary>
+        `);
+
+        utils.act(() => unmount());
+        expect(state).toMatchInlineSnapshot(``);
+
+        // Should be a noop
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(``);
+      });
+
+      it('should properly handle warnings from components that dont mount because of an error', () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        class LogsWarning extends React.Component {
+          render() {
+            console.warn('test-only: I am about to throw!');
+            return <ThrowsError />;
+          }
+        }
+        class ThrowsError extends React.Component {
+          render() {
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              render(
+                <ErrorBoundary>
+                  <LogsWarning />
+                </ErrorBoundary>,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+              <ErrorBoundary>
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          [root]
+               <ErrorBoundary>
+        `);
+
+        utils.act(() => unmount());
+        expect(state).toMatchInlineSnapshot(``);
+
+        // Should be a noop
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(``);
+      });
+
+      it('should properly handle errors/warnings from inside of an error boundary', () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return <Child logError={true} />;
+            }
+            return this.props.children;
+          }
+        }
+
+        class BadRender extends React.Component {
+          render() {
+            console.error('test-only: I am about to throw!');
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              render(
+                <ErrorBoundary>
+                  <BadRender />
+                </ErrorBoundary>,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+            ▾ <ErrorBoundary>
+                <Child> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+             ▾ <ErrorBoundary>
+          →      <Child> ✕
+        `);
+      });
+    });
+  });
+});
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 00000000000..61b538e2d2e
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {getVersionedRenderImplementation} from './utils';
+
+describe('useEditableValue', () => {
+  let act;
+  let React;
+  let useEditableValue;
+
+  beforeEach(() => {
+    const utils = require('./utils');
+    act = utils.act;
+
+    React = require('react');
+
+    useEditableValue = require('../devtools/views/hooks').useEditableValue;
+  });
+
+  const {render} = getVersionedRenderImplementation();
+
+  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;
+    }
+
+    act(() => render(<Example />));
+
+    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;
+    }
+
+    act(() => render(<Example value={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);
+
+    // If there are NO pending changes,
+    // an update to the external prop value should override the local/pending value.
+    act(() => render(<Example value={2} />));
+
+    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;
+    }
+
+    act(() => render(<Example value={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);
+
+    // 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.
+    act(() => render(<Example value={3} />));
+
+    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;
+    }
+
+    act(() => render(<Example value={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);
+
+    // 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;
+    }
+
+    act(() => render(<Example value={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);
+
+    // 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 00000000000..9b9e82102cc
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -0,0 +1,505 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  getDisplayNameForReactElement,
+  isPlainObject,
+} from 'react-devtools-shared/src/utils';
+import {stackToComponentLocations} from 'react-devtools-shared/src/devtools/utils';
+import {
+  formatConsoleArguments,
+  formatConsoleArgumentsToSingleString,
+  formatWithStyles,
+  gt,
+  gte,
+} from 'react-devtools-shared/src/backend/utils';
+import {extractLocationFromComponentStack} from 'react-devtools-shared/src/backend/utils/parseStackTrace';
+import {
+  REACT_SUSPENSE_LIST_TYPE as SuspenseList,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+} from 'shared/ReactSymbols';
+import {createElement} from 'react';
+import {symbolicateSource} from '../symbolicateSource';
+
+describe('utils', () => {
+  describe('getDisplayName', () => {
+    // @reactVersion >= 16.0
+    it('should return a function name', () => {
+      function FauxComponent() {}
+      expect(getDisplayName(FauxComponent)).toEqual('FauxComponent');
+    });
+
+    // @reactVersion >= 16.0
+    it('should return a displayName name if specified', () => {
+      function FauxComponent() {}
+      FauxComponent.displayName = 'OverrideDisplayName';
+      expect(getDisplayName(FauxComponent)).toEqual('OverrideDisplayName');
+    });
+
+    // @reactVersion >= 16.0
+    it('should return the fallback for anonymous functions', () => {
+      expect(getDisplayName(() => {}, 'Fallback')).toEqual('Fallback');
+    });
+
+    // @reactVersion >= 16.0
+    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
+    // @reactVersion >= 16.0
+    it('should return a fallback when the name prop is not a string', () => {
+      const FauxComponent = {name: {}};
+      expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback');
+    });
+
+    it('should parse a component stack trace', () => {
+      expect(
+        stackToComponentLocations(`
+    at Foobar (http://localhost:3000/static/js/bundle.js:103:74)
+    at a
+    at header
+    at div
+    at App`),
+      ).toEqual([
+        [
+          'Foobar',
+          ['Foobar', 'http://localhost:3000/static/js/bundle.js', 103, 74],
+        ],
+        ['a', null],
+        ['header', null],
+        ['div', null],
+        ['App', null],
+      ]);
+    });
+  });
+
+  describe('getDisplayNameForReactElement', () => {
+    // @reactVersion >= 16.0
+    it('should return correct display name for an element with function type', () => {
+      function FauxComponent() {}
+      FauxComponent.displayName = 'OverrideDisplayName';
+      const element = createElement(FauxComponent);
+      expect(getDisplayNameForReactElement(element)).toEqual(
+        'OverrideDisplayName',
+      );
+    });
+
+    // @reactVersion >= 16.0
+    it('should return correct display name for an element with a type of StrictMode', () => {
+      const element = createElement(StrictMode);
+      expect(getDisplayNameForReactElement(element)).toEqual('StrictMode');
+    });
+
+    // @reactVersion >= 16.0
+    it('should return correct display name for an element with a type of SuspenseList', () => {
+      const element = createElement(SuspenseList);
+      expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList');
+    });
+
+    // @reactVersion >= 16.0
+    it('should return NotImplementedInDevtools for an element with invalid symbol type', () => {
+      const element = createElement(Symbol('foo'));
+      expect(getDisplayNameForReactElement(element)).toEqual(
+        'NotImplementedInDevtools',
+      );
+    });
+
+    // @reactVersion >= 16.0
+    it('should return NotImplementedInDevtools for an element with invalid type', () => {
+      const element = createElement(true);
+      expect(getDisplayNameForReactElement(element)).toEqual(
+        'NotImplementedInDevtools',
+      );
+    });
+
+    // @reactVersion >= 16.0
+    it('should return Element for null type', () => {
+      const element = createElement();
+      expect(getDisplayNameForReactElement(element)).toEqual('Element');
+    });
+  });
+
+  describe('formatConsoleArgumentsToSingleString', () => {
+    it('should format simple strings', () => {
+      expect(formatConsoleArgumentsToSingleString('a', 'b', 'c')).toEqual(
+        'a b c',
+      );
+    });
+
+    it('should format multiple argument types', () => {
+      expect(formatConsoleArgumentsToSingleString('abc', 123, true)).toEqual(
+        'abc 123 true',
+      );
+    });
+
+    it('should support string substitutions', () => {
+      expect(
+        formatConsoleArgumentsToSingleString('a %s b %s c', 123, true),
+      ).toEqual('a 123 b true c');
+    });
+
+    it('should gracefully handle Symbol types', () => {
+      expect(
+        formatConsoleArgumentsToSingleString(Symbol('a'), 'b', Symbol('c')),
+      ).toEqual('Symbol(a) b Symbol(c)');
+    });
+
+    it('should gracefully handle Symbol type for the first argument', () => {
+      expect(formatConsoleArgumentsToSingleString(Symbol('abc'), 123)).toEqual(
+        'Symbol(abc) 123',
+      );
+    });
+
+    it('should gracefully handle objects with no prototype', () => {
+      expect(
+        formatConsoleArgumentsToSingleString('%o', Object.create(null)),
+      ).toEqual('%o [object Object]');
+    });
+  });
+
+  describe('formatWithStyles', () => {
+    it('should format empty arrays', () => {
+      expect(formatWithStyles([])).toEqual([]);
+      expect(formatWithStyles([], 'gray')).toEqual([]);
+      expect(formatWithStyles(undefined)).toEqual(undefined);
+    });
+
+    it('should bail out of strings with styles', () => {
+      expect(
+        formatWithStyles(['%ca', 'color: green', 'b', 'c'], 'color: gray'),
+      ).toEqual(['%ca', 'color: green', 'b', 'c']);
+    });
+
+    it('should format simple strings', () => {
+      expect(formatWithStyles(['a'])).toEqual(['a']);
+
+      expect(formatWithStyles(['a', 'b', 'c'])).toEqual(['a', 'b', 'c']);
+      expect(formatWithStyles(['a'], 'color: gray')).toEqual([
+        '%c%s',
+        'color: gray',
+        'a',
+      ]);
+      expect(formatWithStyles(['a', 'b', 'c'], 'color: gray')).toEqual([
+        '%c%s %s %s',
+        'color: gray',
+        'a',
+        'b',
+        'c',
+      ]);
+    });
+
+    it('should format string substituions', () => {
+      expect(
+        formatWithStyles(['%s %s %s', 'a', 'b', 'c'], 'color: gray'),
+      ).toEqual(['%c%s %s %s', 'color: gray', 'a', 'b', 'c']);
+
+      // The last letter isn't gray here but I think it's not a big
+      // deal, since there is a string substituion but it's incorrect
+      expect(formatWithStyles(['%s %s', 'a', 'b', 'c'], 'color: gray')).toEqual(
+        ['%c%s %s', 'color: gray', 'a', 'b', 'c'],
+      );
+    });
+
+    it('should support multiple argument types', () => {
+      const symbol = Symbol('a');
+      expect(
+        formatWithStyles(
+          ['abc', 123, 12.3, true, {hello: 'world'}, symbol],
+          'color: gray',
+        ),
+      ).toEqual([
+        '%c%s %i %f %s %o %s',
+        'color: gray',
+        'abc',
+        123,
+        12.3,
+        true,
+        {hello: 'world'},
+        symbol,
+      ]);
+    });
+
+    it('should properly format escaped string substituions', () => {
+      expect(formatWithStyles(['%%s'], 'color: gray')).toEqual([
+        '%c%s',
+        'color: gray',
+        '%%s',
+      ]);
+      expect(formatWithStyles(['%%c'], 'color: gray')).toEqual([
+        '%c%s',
+        'color: gray',
+        '%%c',
+      ]);
+      expect(formatWithStyles(['%%c%c'], 'color: gray')).toEqual(['%%c%c']);
+    });
+
+    it('should format non string inputs as the first argument', () => {
+      expect(formatWithStyles([{foo: 'bar'}])).toEqual([{foo: 'bar'}]);
+      expect(formatWithStyles([[1, 2, 3]])).toEqual([[1, 2, 3]]);
+      expect(formatWithStyles([{foo: 'bar'}], 'color: gray')).toEqual([
+        '%c%o',
+        'color: gray',
+        {foo: 'bar'},
+      ]);
+      expect(formatWithStyles([[1, 2, 3]], 'color: gray')).toEqual([
+        '%c%o',
+        'color: gray',
+        [1, 2, 3],
+      ]);
+      expect(formatWithStyles([{foo: 'bar'}, 'hi'], 'color: gray')).toEqual([
+        '%c%o %s',
+        'color: gray',
+        {foo: 'bar'},
+        'hi',
+      ]);
+    });
+  });
+
+  describe('semver comparisons', () => {
+    it('gte should compare versions correctly', () => {
+      expect(gte('1.2.3', '1.2.1')).toBe(true);
+      expect(gte('1.2.1', '1.2.1')).toBe(true);
+      expect(gte('1.2.1', '1.2.2')).toBe(false);
+      expect(gte('10.0.0', '9.0.0')).toBe(true);
+    });
+
+    it('gt should compare versions correctly', () => {
+      expect(gt('1.2.3', '1.2.1')).toBe(true);
+      expect(gt('1.2.1', '1.2.1')).toBe(false);
+      expect(gt('1.2.1', '1.2.2')).toBe(false);
+      expect(gte('10.0.0', '9.0.0')).toBe(true);
+    });
+  });
+
+  describe('isPlainObject', () => {
+    it('should return true for plain objects', () => {
+      expect(isPlainObject({})).toBe(true);
+      expect(isPlainObject({a: 1})).toBe(true);
+      expect(isPlainObject({a: {b: {c: 123}}})).toBe(true);
+    });
+
+    it('should return false if object is a class instance', () => {
+      expect(isPlainObject(new (class C {})())).toBe(false);
+    });
+
+    it('should return false for objects, which have not only Object in its prototype chain', () => {
+      expect(isPlainObject([])).toBe(false);
+      expect(isPlainObject(Symbol())).toBe(false);
+    });
+
+    it('should return false for primitives', () => {
+      expect(isPlainObject(5)).toBe(false);
+      expect(isPlainObject(true)).toBe(false);
+    });
+
+    it('should return true for objects with no prototype', () => {
+      expect(isPlainObject(Object.create(null))).toBe(true);
+    });
+  });
+
+  describe('extractLocationFromComponentStack', () => {
+    it('should return null if passed empty string', () => {
+      expect(extractLocationFromComponentStack('')).toEqual(null);
+    });
+
+    it('should construct the source from the first frame if available', () => {
+      expect(
+        extractLocationFromComponentStack(
+          'at l (https://react.dev/_next/static/chunks/main-78a3b4c2aa4e4850.js:1:10389)\n' +
+            'at f (https://react.dev/_next/static/chunks/pages/%5B%5B...markdownPath%5D%5D-af2ed613aedf1d57.js:1:8519)\n' +
+            'at r (https://react.dev/_next/static/chunks/pages/_app-dd0b77ea7bd5b246.js:1:498)\n',
+        ),
+      ).toEqual([
+        'l',
+        'https://react.dev/_next/static/chunks/main-78a3b4c2aa4e4850.js',
+        1,
+        10389,
+      ]);
+    });
+
+    it('should construct the source from highest available frame', () => {
+      expect(
+        extractLocationFromComponentStack(
+          '    at Q\n' +
+            '    at a\n' +
+            '    at m (https://react.dev/_next/static/chunks/848-122f91e9565d9ffa.js:5:9236)\n' +
+            '    at div\n' +
+            '    at div\n' +
+            '    at div\n' +
+            '    at nav\n' +
+            '    at div\n' +
+            '    at te (https://react.dev/_next/static/chunks/363-3c5f1b553b6be118.js:1:158857)\n' +
+            '    at tt (https://react.dev/_next/static/chunks/363-3c5f1b553b6be118.js:1:165520)\n' +
+            '    at f (https://react.dev/_next/static/chunks/pages/%5B%5B...markdownPath%5D%5D-af2ed613aedf1d57.js:1:8519)',
+        ),
+      ).toEqual([
+        'm',
+        'https://react.dev/_next/static/chunks/848-122f91e9565d9ffa.js',
+        5,
+        9236,
+      ]);
+    });
+
+    it('should construct the source from frame, which has only url specified', () => {
+      expect(
+        extractLocationFromComponentStack(
+          '    at Q\n' +
+            '    at a\n' +
+            '    at https://react.dev/_next/static/chunks/848-122f91e9565d9ffa.js:5:9236\n',
+        ),
+      ).toEqual([
+        '',
+        'https://react.dev/_next/static/chunks/848-122f91e9565d9ffa.js',
+        5,
+        9236,
+      ]);
+    });
+
+    it('should parse sourceURL correctly if it includes parentheses', () => {
+      expect(
+        extractLocationFromComponentStack(
+          'at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)\n' +
+            '    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:181:11)\n' +
+            '    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)',
+        ),
+      ).toEqual([
+        'HotReload',
+        'webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js',
+        307,
+        11,
+      ]);
+    });
+
+    it('should support Firefox stack', () => {
+      expect(
+        extractLocationFromComponentStack(
+          'tt@https://react.dev/_next/static/chunks/363-3c5f1b553b6be118.js:1:165558\n' +
+            'f@https://react.dev/_next/static/chunks/pages/%5B%5B...markdownPath%5D%5D-af2ed613aedf1d57.js:1:8535\n' +
+            'r@https://react.dev/_next/static/chunks/pages/_app-dd0b77ea7bd5b246.js:1:513',
+        ),
+      ).toEqual([
+        'tt',
+        'https://react.dev/_next/static/chunks/363-3c5f1b553b6be118.js',
+        1,
+        165558,
+      ]);
+    });
+  });
+
+  describe('symbolicateSource', () => {
+    const source = `"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.f = f;
+function f() { }
+//# sourceMappingURL=`;
+    const result = {
+      location: ['', 'http://test/a.mts', 1, 17],
+      ignored: false,
+    };
+    const fs = {
+      'http://test/a.mts': `export function f() {}`,
+      'http://test/a.mjs.map': `{"version":3,"file":"a.mjs","sourceRoot":"","sources":["a.mts"],"names":[],"mappings":";;AAAA,cAAsB;AAAtB,SAAgB,CAAC,KAAI,CAAC"}`,
+      'http://test/a.mjs': `${source}a.mjs.map`,
+      'http://test/b.mjs': `${source}./a.mjs.map`,
+      'http://test/c.mjs': `${source}http://test/a.mjs.map`,
+      'http://test/d.mjs': `${source}/a.mjs.map`,
+    };
+    const fetchFileWithCaching = async (url: string) => fs[url] || null;
+    it('should parse source map urls', async () => {
+      const run = url => symbolicateSource(fetchFileWithCaching, url, 4, 10);
+      await expect(run('http://test/a.mjs')).resolves.toStrictEqual(result);
+      await expect(run('http://test/b.mjs')).resolves.toStrictEqual(result);
+      await expect(run('http://test/c.mjs')).resolves.toStrictEqual(result);
+      await expect(run('http://test/d.mjs')).resolves.toStrictEqual(result);
+    });
+
+    it('should not throw for invalid base URL with relative source map', async () => {
+      const fs2 = {
+        'bundle.js': `${source}bundle.js.map`,
+      };
+      const fetch2 = async url => fs2[url] || null;
+      const run = url => symbolicateSource(fetch2, url, 1, 1);
+      await expect(run('bundle.js')).resolves.toBe(null);
+    });
+
+    it('should resolve absolute source map even if base URL is invalid', async () => {
+      const fs3 = {
+        'invalid-base.js': `${source}http://test/a.mjs.map`,
+        'http://test/a.mts': `export function f() {}`,
+        'http://test/a.mjs.map': `{"version":3,"file":"a.mjs","sourceRoot":"","sources":["a.mts"],"names":[],"mappings":";;AAAA,cAAsB;AAAtB,SAAgB,CAAC,KAAI,CAAC"}`,
+      };
+      const fetch3 = async url => fs3[url] || null;
+      const run = url => symbolicateSource(fetch3, url, 4, 10);
+      await expect(run('invalid-base.js')).resolves.toStrictEqual(result);
+    });
+  });
+
+  describe('formatConsoleArguments', () => {
+    it('works with empty arguments list', () => {
+      expect(formatConsoleArguments(...[])).toEqual([]);
+    });
+
+    it('works for string without escape sequences', () => {
+      expect(
+        formatConsoleArguments('This is the template', 'And another string'),
+      ).toEqual(['This is the template', 'And another string']);
+    });
+
+    it('works with strings templates', () => {
+      expect(formatConsoleArguments('This is %s template', 'the')).toEqual([
+        'This is the template',
+      ]);
+    });
+
+    it('skips %%s', () => {
+      expect(formatConsoleArguments('This %%s is %s template', 'the')).toEqual([
+        'This %%s is the template',
+      ]);
+    });
+
+    it('works with %%%s', () => {
+      expect(
+        formatConsoleArguments('This %%%s is %s template', 'test', 'the'),
+      ).toEqual(['This %%test is the template']);
+    });
+
+    it("doesn't inline objects", () => {
+      expect(
+        formatConsoleArguments('This is %s template with object %o', 'the', {}),
+      ).toEqual(['This is the template with object %o', {}]);
+    });
+
+    it("doesn't inline css", () => {
+      expect(
+        formatConsoleArguments(
+          'This is template with %c %s object %o',
+          'color: rgba(...)',
+          'the',
+          {},
+        ),
+      ).toEqual([
+        'This is template with %c the object %o',
+        'color: rgba(...)',
+        {},
+      ]);
+    });
+
+    it('formats nullish values', () => {
+      expect(formatConsoleArguments('This is the %s template', null)).toEqual([
+        'This is the null template',
+      ]);
+      expect(
+        formatConsoleArguments('This is the %s template', undefined),
+      ).toEqual(['This is the undefined template']);
+    });
+  });
+});
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 00000000000..e84382f6fc0
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -0,0 +1,508 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 semver from 'semver';
+
+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/frontend/types';
+import type {Node as ReactNode} from 'react';
+
+import {ReactVersion} from '../../../../ReactVersions';
+
+const requestedReactVersion = process.env.REACT_VERSION || ReactVersion;
+export function getActDOMImplementation(): () => void | Promise<void> {
+  // This is for React < 17, where act wasn't shipped yet.
+  if (semver.lt(requestedReactVersion, '17.0.0')) {
+    require('react-dom/test-utils');
+    return cb => cb();
+  }
+
+  // This is for React < 18, where act was distributed in react-dom/test-utils.
+  if (semver.lt(requestedReactVersion, '18.0.0')) {
+    const ReactDOMTestUtils = require('react-dom/test-utils');
+    return ReactDOMTestUtils.act;
+  }
+
+  const React = require('react');
+  // This is for React 18, where act was distributed in react as unstable.
+  if (React.unstable_act) {
+    return React.unstable_act;
+  }
+
+  // This is for React > 18, where act is marked as stable.
+  if (React.act) {
+    return React.act;
+  }
+
+  throw new Error("Couldn't find any available act implementation");
+}
+
+export function getActTestRendererImplementation(): () => void | Promise<void> {
+  // This is for React < 17, where act wasn't shipped yet.
+  if (semver.lt(requestedReactVersion, '17.0.0')) {
+    require('react-test-renderer');
+    return cb => cb();
+  }
+
+  const RTR = require('react-test-renderer');
+  if (RTR.act) {
+    return RTR.act;
+  }
+
+  throw new Error(
+    "Couldn't find any available act implementation in react-test-renderer",
+  );
+}
+
+export function act(
+  callback: Function,
+  recursivelyFlush: boolean = true,
+): void {
+  // act from react-test-renderer has some side effects on React DevTools
+  // it injects the renderer for DevTools, see ReactTestRenderer.js
+  const actTestRenderer = getActTestRendererImplementation();
+  const actDOM = getActDOMImplementation();
+
+  actDOM(() => {
+    actTestRenderer(() => {
+      callback();
+    });
+  });
+
+  if (recursivelyFlush) {
+    // Flush Bridge operations
+    while (jest.getTimerCount() > 0) {
+      actDOM(() => {
+        actTestRenderer(() => {
+          jest.runAllTimers();
+        });
+      });
+    }
+  }
+}
+
+export async function actAsync(
+  cb: () => *,
+  recursivelyFlush: boolean = true,
+): Promise<void> {
+  // act from react-test-renderer has some side effects on React DevTools
+  // it injects the renderer for DevTools, see ReactTestRenderer.js
+  const actTestRenderer = getActTestRendererImplementation();
+  const actDOM = getActDOMImplementation();
+
+  await actDOM(async () => {
+    await actTestRenderer(async () => {
+      await cb();
+    });
+  });
+
+  if (recursivelyFlush) {
+    while (jest.getTimerCount() > 0) {
+      await actDOM(async () => {
+        await actTestRenderer(async () => {
+          jest.runAllTimers();
+        });
+      });
+    }
+  } else {
+    await actDOM(async () => {
+      await actTestRenderer(async () => {
+        jest.runOnlyPendingTimers();
+      });
+    });
+  }
+}
+
+type RenderImplementation = {
+  render: (elements: ?ReactNode) => () => void,
+  unmount: () => void,
+  createContainer: () => void,
+  getContainer: () => ?HTMLElement,
+};
+
+export function getLegacyRenderImplementation(): RenderImplementation {
+  let ReactDOM;
+  let container;
+  const containersToRemove = [];
+
+  beforeEach(() => {
+    ReactDOM = require('react-dom');
+
+    createContainer();
+  });
+
+  afterEach(() => {
+    containersToRemove.forEach(c => document.body.removeChild(c));
+    containersToRemove.splice(0, containersToRemove.length);
+
+    ReactDOM = null;
+    container = null;
+  });
+
+  function render(elements) {
+    withErrorsOrWarningsIgnored(
+      ['ReactDOM.render has not been supported since React 18'],
+      () => {
+        ReactDOM.render(elements, container);
+      },
+    );
+
+    return unmount;
+  }
+
+  function unmount() {
+    ReactDOM.unmountComponentAtNode(container);
+  }
+
+  function createContainer() {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    containersToRemove.push(container);
+  }
+
+  function getContainer() {
+    return container;
+  }
+
+  return {
+    render,
+    unmount,
+    createContainer,
+    getContainer,
+  };
+}
+
+export function getModernRenderImplementation(): RenderImplementation {
+  let ReactDOMClient;
+  let container;
+  let root;
+  const containersToRemove = [];
+
+  beforeEach(() => {
+    ReactDOMClient = require('react-dom/client');
+
+    createContainer();
+  });
+
+  afterEach(() => {
+    containersToRemove.forEach(c => document.body.removeChild(c));
+    containersToRemove.splice(0, containersToRemove.length);
+
+    ReactDOMClient = null;
+    container = null;
+    root = null;
+  });
+
+  function render(elements) {
+    if (root == null) {
+      root = ReactDOMClient.createRoot(container);
+    }
+    root.render(elements);
+
+    return unmount;
+  }
+
+  function unmount() {
+    root.unmount();
+  }
+
+  function createContainer() {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    root = null;
+
+    containersToRemove.push(container);
+  }
+
+  function getContainer() {
+    return container;
+  }
+
+  return {
+    render,
+    unmount,
+    createContainer,
+    getContainer,
+  };
+}
+
+export const getVersionedRenderImplementation: () => RenderImplementation =
+  semver.lt(requestedReactVersion, '18.0.0')
+    ? getLegacyRenderImplementation
+    : getModernRenderImplementation;
+
+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/frontend/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/frontend/types');
+  return {
+    type: Types.ComponentFilterHOC,
+    isEnabled,
+    isValid: true,
+  };
+}
+
+export function createEnvironmentNameFilter(
+  env: string,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/frontend/types');
+  return {
+    type: Types.ComponentFilterEnvironmentName,
+    isEnabled,
+    isValid: true,
+    value: env,
+  };
+}
+
+export function createElementTypeFilter(
+  elementType: ElementType,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/frontend/types');
+  return {
+    type: Types.ComponentFilterElementType,
+    isEnabled,
+    value: elementType,
+  };
+}
+
+export function createLocationFilter(
+  source: string,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/frontend/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 createActivitySliceFilter(
+  activityID: Element['id'],
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/frontend/types');
+  return {
+    type: Types.ComponentFilterActivitySlice,
+    isEnabled,
+    isValid: true,
+    activityID: activityID,
+  };
+}
+
+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 (id == null) {
+    throw Error('Could not find renderer.');
+  }
+
+  return parseInt(id, 10);
+}
+
+export function legacyRender(elements, container) {
+  if (container == null) {
+    container = document.createElement('div');
+  }
+
+  const ReactDOM = require('react-dom');
+  withErrorsOrWarningsIgnored(
+    ['ReactDOM.render has not been supported since React 18'],
+    () => {
+      ReactDOM.render(elements, container);
+    },
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(container);
+  };
+}
+
+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);
+  expect(profilingDataFrontendInitial.imported).toBe(false);
+
+  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),
+  );
+  expect(profilingDataFrontend.imported).toBe(true);
+
+  // Sanity check that profiling snapshots are serialized correctly.
+  expect(profilingDataFrontendInitial.dataForRoots).toEqual(
+    profilingDataFrontend.dataForRoots,
+  );
+  expect(profilingDataFrontendInitial.timelineData).toEqual(
+    profilingDataFrontend.timelineData,
+  );
+
+  // 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-imported data so tests can re-run assertions.
+    profilerStore.profilingData = profilingDataFrontend;
+  });
+}
+
+/**
+ * Runs `fn` while preventing console error and warnings that partially match any given `errorOrWarningMessages` from appearing in the console.
+ * @param errorOrWarningMessages Messages are matched partially (i.e. indexOf), pre-formatting.
+ * @param fn
+ */
+export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
+  errorOrWarningMessages: string[],
+  fn: () => T,
+): T {
+  // withErrorsOrWarningsIgnored() may be nested.
+  const prev = global._ignoredErrorOrWarningMessages || [];
+
+  let resetIgnoredErrorOrWarningMessages = true;
+  try {
+    global._ignoredErrorOrWarningMessages = [
+      ...prev,
+      ...errorOrWarningMessages,
+    ];
+    const maybeThenable = fn();
+    if (
+      maybeThenable !== undefined &&
+      typeof maybeThenable.then === 'function'
+    ) {
+      resetIgnoredErrorOrWarningMessages = false;
+      return maybeThenable.then(
+        () => {
+          global._ignoredErrorOrWarningMessages = prev;
+        },
+        () => {
+          global._ignoredErrorOrWarningMessages = prev;
+        },
+      );
+    }
+  } finally {
+    if (resetIgnoredErrorOrWarningMessages) {
+      global._ignoredErrorOrWarningMessages = prev;
+    }
+  }
+}
+
+export function overrideFeatureFlags(overrideFlags) {
+  jest.mock('react-devtools-feature-flags', () => {
+    const actualFlags = jest.requireActual('react-devtools-feature-flags');
+    return {
+      ...actualFlags,
+      ...overrideFlags,
+    };
+  });
+}
+
+export function normalizeCodeLocInfo(str) {
+  if (typeof str === 'object' && str !== null) {
+    str = str.stack;
+  }
+  if (typeof str !== 'string') {
+    return str;
+  }
+  // This special case exists only for the special source location in
+  // ReactElementValidator. That will go away if we remove source locations.
+  str = str.replace(/Check your code at .+?:\d+/g, 'Check your code at **');
+  // V8 format:
+  //  at Component (/path/filename.js:123:45)
+  // React format:
+  //    in Component (at filename.js:123)
+  return str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+    return '\n    in ' + name + ' (at **)';
+  });
+}
diff --git a/packages/react-devtools-shared/src/attachRenderer.js b/packages/react-devtools-shared/src/attachRenderer.js
new file mode 100644
index 00000000000..fedf76293cb
--- /dev/null
+++ b/packages/react-devtools-shared/src/attachRenderer.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactRenderer,
+  RendererInterface,
+  DevToolsHook,
+  RendererID,
+  ProfilingSettings,
+} from 'react-devtools-shared/src/backend/types';
+
+import {attach as attachFlight} from 'react-devtools-shared/src/backend/flight/renderer';
+import {attach as attachFiber} from 'react-devtools-shared/src/backend/fiber/renderer';
+import {attach as attachLegacy} from 'react-devtools-shared/src/backend/legacy/renderer';
+import {hasAssignedBackend} from 'react-devtools-shared/src/backend/utils';
+
+// this is the backend that is compatible with all older React versions
+function isMatchingRender(version: string): boolean {
+  return !hasAssignedBackend(version);
+}
+
+export default function attachRenderer(
+  hook: DevToolsHook,
+  id: RendererID,
+  renderer: ReactRenderer,
+  global: Object,
+  shouldStartProfilingNow: boolean,
+  profilingSettings: ProfilingSettings,
+): RendererInterface | void {
+  // only attach if the renderer is compatible with the current version of the backend
+  if (!isMatchingRender(renderer.reconcilerVersion || renderer.version)) {
+    return;
+  }
+  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.getCurrentComponentInfo === 'function') {
+      // react-flight/client
+      rendererInterface = attachFlight(hook, id, renderer, global);
+    } else if (
+      // v16-19
+      typeof renderer.findFiberByHostInstance === 'function' ||
+      // v16.8+
+      renderer.currentDispatcherRef != null
+    ) {
+      // react-reconciler v16+
+      rendererInterface = attachFiber(
+        hook,
+        id,
+        renderer,
+        global,
+        shouldStartProfilingNow,
+        profilingSettings,
+      );
+    } else if (renderer.ComponentTree) {
+      // react-dom v15
+      rendererInterface = attachLegacy(hook, id, renderer, global);
+    } else {
+      // Older react-dom or other unsupported renderer version
+    }
+  }
+
+  return rendererInterface;
+}
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 00000000000..ea7e0484bae
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 00000000000..7a8bfff43bf
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -0,0 +1,327 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isArray from 'react-devtools-shared/src/isArray';
+
+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 type SetupNativeStyleEditor = typeof setupNativeStyleEditor;
+
+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;
+  }
+
+  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: {[string]: $FlowFixMe} = {};
+  for (const 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: string | void), [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 (isArray(style)) {
+    const lastIndex = style.length - 1;
+    if (typeof style[lastIndex] === 'object' && !isArray(style[lastIndex])) {
+      customStyle = shallowClone(style[lastIndex]);
+      delete customStyle[oldName];
+      if (newName) {
+        customStyle[newName] = value;
+      } else {
+        customStyle[oldName] = undefined;
+      }
+
+      agent.overrideValueAtPath({
+        type: 'props',
+        id,
+        rendererID,
+        path: ['style', lastIndex],
+        value: customStyle,
+      });
+    } else {
+      agent.overrideValueAtPath({
+        type: 'props',
+        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.overrideValueAtPath({
+      type: 'props',
+      id,
+      rendererID,
+      path: ['style'],
+      value: customStyle,
+    });
+  } else {
+    agent.overrideValueAtPath({
+      type: 'props',
+      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 (isArray(style)) {
+    const lastLength = style.length - 1;
+    if (typeof style[lastLength] === 'object' && !isArray(style[lastLength])) {
+      agent.overrideValueAtPath({
+        type: 'props',
+        id,
+        rendererID,
+        path: ['style', lastLength, name],
+        value,
+      });
+    } else {
+      agent.overrideValueAtPath({
+        type: 'props',
+        id,
+        rendererID,
+        path: ['style'],
+        value: style.concat([newStyle]),
+      });
+    }
+  } else {
+    agent.overrideValueAtPath({
+      type: 'props',
+      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 00000000000..eb51036b42d
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/StyleX/__tests__/utils-test.js b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
new file mode 100644
index 00000000000..00d587ec048
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('Stylex plugin utils', () => {
+  let getStyleXData;
+  let styleElements;
+
+  function defineStyles(style) {
+    const styleElement = document.createElement('style');
+    styleElement.type = 'text/css';
+    styleElement.appendChild(document.createTextNode(style));
+
+    styleElements.push(styleElement);
+
+    document.head.appendChild(styleElement);
+  }
+
+  beforeEach(() => {
+    getStyleXData = require('../utils').getStyleXData;
+
+    styleElements = [];
+  });
+
+  afterEach(() => {
+    styleElements.forEach(styleElement => {
+      document.head.removeChild(styleElement);
+    });
+  });
+
+  it('should gracefully handle empty values', () => {
+    expect(getStyleXData(null)).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {},
+        "sources": [],
+      }
+    `);
+
+    expect(getStyleXData(undefined)).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {},
+        "sources": [],
+      }
+    `);
+
+    expect(getStyleXData('')).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {},
+        "sources": [],
+      }
+    `);
+
+    expect(getStyleXData([undefined])).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {},
+        "sources": [],
+      }
+    `);
+  });
+
+  it('should support simple style objects', () => {
+    defineStyles(`
+      .foo {
+        display: flex;
+      }
+      .bar: {
+        align-items: center;
+      }
+      .baz {
+        flex-direction: center;
+      }
+    `);
+
+    expect(
+      getStyleXData({
+        // The source/module styles are defined in
+        Example__style: 'Example__style',
+
+        // Map of CSS style to StyleX class name, booleans, or nested structures
+        display: 'foo',
+        flexDirection: 'baz',
+        alignItems: 'bar',
+      }),
+    ).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": [
+          "Example__style",
+        ],
+      }
+    `);
+  });
+
+  it('should support multiple style objects', () => {
+    defineStyles(`
+      .foo {
+        display: flex;
+      }
+      .bar: {
+        align-items: center;
+      }
+      .baz {
+        flex-direction: center;
+      }
+    `);
+
+    expect(
+      getStyleXData([
+        {Example1__style: 'Example1__style', display: 'foo'},
+        {
+          Example2__style: 'Example2__style',
+          flexDirection: 'baz',
+          alignItems: 'bar',
+        },
+      ]),
+    ).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": [
+          "Example1__style",
+          "Example2__style",
+        ],
+      }
+    `);
+  });
+
+  it('should filter empty rules', () => {
+    defineStyles(`
+      .foo {
+        display: flex;
+      }
+      .bar: {
+        align-items: center;
+      }
+      .baz {
+        flex-direction: center;
+      }
+    `);
+
+    expect(
+      getStyleXData([
+        false,
+        {Example1__style: 'Example1__style', display: 'foo'},
+        false,
+        false,
+        {
+          Example2__style: 'Example2__style',
+          flexDirection: 'baz',
+          alignItems: 'bar',
+        },
+        false,
+      ]),
+    ).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": [
+          "Example1__style",
+          "Example2__style",
+        ],
+      }
+    `);
+  });
+
+  it('should support pseudo-classes', () => {
+    defineStyles(`
+      .foo {
+        color: black;
+      }
+      .bar: {
+        color: blue;
+      }
+      .baz {
+        text-decoration: none;
+      }
+    `);
+
+    expect(
+      getStyleXData({
+        // The source/module styles are defined in
+        Example__style: 'Example__style',
+
+        // Map of CSS style to StyleX class name, booleans, or nested structures
+        color: 'foo',
+        ':hover': {
+          color: 'bar',
+          textDecoration: 'baz',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {
+          ":hover": {
+            "color": "blue",
+            "textDecoration": "none",
+          },
+          "color": "black",
+        },
+        "sources": [
+          "Example__style",
+        ],
+      }
+    `);
+  });
+
+  it('should support nested selectors', () => {
+    defineStyles(`
+      .foo {
+        display: flex;
+      }
+      .bar: {
+        align-items: center;
+      }
+      .baz {
+        flex-direction: center;
+      }
+    `);
+
+    expect(
+      getStyleXData([
+        {Example1__style: 'Example1__style', display: 'foo'},
+        false,
+        [
+          false,
+          {Example2__style: 'Example2__style', flexDirection: 'baz'},
+          {Example3__style: 'Example3__style', alignItems: 'bar'},
+        ],
+        false,
+      ]),
+    ).toMatchInlineSnapshot(`
+      {
+        "resolvedStyles": {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": [
+          "Example1__style",
+          "Example2__style",
+          "Example3__style",
+        ],
+      }
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/backend/StyleX/utils.js b/packages/react-devtools-shared/src/backend/StyleX/utils.js
new file mode 100644
index 00000000000..ad137c7184e
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {StyleXPlugin} from 'react-devtools-shared/src/frontend/types';
+import isArray from 'react-devtools-shared/src/isArray';
+
+const cachedStyleNameToValueMap: Map<string, string> = new Map();
+
+export function getStyleXData(data: any): StyleXPlugin {
+  const sources = new Set<string>();
+  const resolvedStyles = {};
+
+  crawlData(data, sources, resolvedStyles);
+
+  return {
+    sources: Array.from(sources).sort(),
+    resolvedStyles,
+  };
+}
+
+export function crawlData(
+  data: any,
+  sources: Set<string>,
+  resolvedStyles: Object,
+): void {
+  if (data == null) {
+    return;
+  }
+
+  if (isArray(data)) {
+    data.forEach(entry => {
+      if (entry == null) {
+        return;
+      }
+
+      if (isArray(entry)) {
+        crawlData(entry, sources, resolvedStyles);
+      } else {
+        crawlObjectProperties(entry, sources, resolvedStyles);
+      }
+    });
+  } else {
+    crawlObjectProperties(data, sources, resolvedStyles);
+  }
+
+  resolvedStyles = Object.fromEntries<string, any>(
+    Object.entries(resolvedStyles).sort(),
+  );
+}
+
+function crawlObjectProperties(
+  entry: Object,
+  sources: Set<string>,
+  resolvedStyles: Object,
+): void {
+  const keys = Object.keys(entry);
+  keys.forEach(key => {
+    const value = entry[key];
+    if (typeof value === 'string') {
+      if (key === value) {
+        // Special case; this key is the name of the style's source/file/module.
+        sources.add(key);
+      } else {
+        const propertyValue = getPropertyValueForStyleName(value);
+        if (propertyValue != null) {
+          resolvedStyles[key] = propertyValue;
+        }
+      }
+    } else {
+      const nestedStyle = {};
+      resolvedStyles[key] = nestedStyle;
+      crawlData([value], sources, nestedStyle);
+    }
+  });
+}
+
+function getPropertyValueForStyleName(styleName: string): string | null {
+  if (cachedStyleNameToValueMap.has(styleName)) {
+    return ((cachedStyleNameToValueMap.get(styleName): any): string);
+  }
+
+  for (
+    let styleSheetIndex = 0;
+    styleSheetIndex < document.styleSheets.length;
+    styleSheetIndex++
+  ) {
+    const styleSheet = ((document.styleSheets[
+      styleSheetIndex
+    ]: any): CSSStyleSheet);
+    let rules: CSSRuleList | null = null;
+    // this might throw if CORS rules are enforced https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
+    try {
+      rules = styleSheet.cssRules;
+    } catch (_e) {
+      continue;
+    }
+
+    for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+      if (!(rules[ruleIndex] instanceof CSSStyleRule)) {
+        continue;
+      }
+      const rule = ((rules[ruleIndex]: any): CSSStyleRule);
+      const {cssText, selectorText, style} = rule;
+
+      if (selectorText != null) {
+        if (selectorText.startsWith(`.${styleName}`)) {
+          const match = cssText.match(/{ *([a-z\-]+):/);
+          if (match !== null) {
+            const property = match[1];
+            const value = style.getPropertyValue(property);
+
+            cachedStyleNameToValueMap.set(styleName, value);
+
+            return value;
+          } else {
+            return null;
+          }
+        }
+      }
+    }
+  }
+
+  return 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 00000000000..a7c237be721
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -0,0 +1,1211 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  SESSION_STORAGE_LAST_SELECTION_KEY,
+  UNKNOWN_SUSPENDERS_NONE,
+  __DEBUG__,
+} from '../constants';
+import setupHighlighter from './views/Highlighter';
+import {
+  initialize as setupTraceUpdates,
+  toggleEnabled as setTraceUpdatesEnabled,
+} from './views/TraceUpdates';
+import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
+
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  InstanceAndStyle,
+  HostInstance,
+  OwnersList,
+  PathFrame,
+  PathMatch,
+  RendererID,
+  RendererInterface,
+  DevToolsHookSettings,
+  InspectedElement,
+} from './types';
+import type {
+  ComponentFilter,
+  DehydratedData,
+  ElementType,
+} from 'react-devtools-shared/src/frontend/types';
+import type {GroupItem} from './views/TraceUpdates/canvas';
+import {gte, isReactNativeEnvironment} from './utils';
+import {
+  sessionStorageGetItem,
+  sessionStorageRemoveItem,
+  sessionStorageSetItem,
+} from '../storage';
+
+const debug = (methodName: string, ...args: Array<string>) => {
+  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 = {
+  forceFullData: boolean,
+  id: number,
+  path: Array<string | number> | null,
+  rendererID: number,
+  requestID: number,
+};
+
+type InspectScreenParams = {
+  forceFullData: boolean,
+  id: number,
+  path: Array<string | number> | null,
+  requestID: number,
+};
+
+type OverrideHookParams = {
+  id: number,
+  hookID: number,
+  path: Array<string | number>,
+  rendererID: number,
+  wasForwarded?: boolean,
+  value: any,
+};
+
+type SetInParams = {
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+  wasForwarded?: boolean,
+  value: any,
+};
+
+type PathType = 'props' | 'hooks' | 'state' | 'context';
+
+type DeletePathParams = {
+  type: PathType,
+  hookID?: ?number,
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+};
+
+type RenamePathParams = {
+  type: PathType,
+  hookID?: ?number,
+  id: number,
+  oldPath: Array<string | number>,
+  newPath: Array<string | number>,
+  rendererID: number,
+};
+
+type OverrideValueAtPathParams = {
+  type: PathType,
+  hookID?: ?number,
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+  value: any,
+};
+
+type OverrideErrorParams = {
+  id: number,
+  rendererID: number,
+  forceError: boolean,
+};
+
+type OverrideSuspenseParams = {
+  id: number,
+  rendererID: number,
+  forceFallback: boolean,
+};
+
+type OverrideSuspenseMilestoneParams = {
+  suspendedSet: Array<number>,
+};
+
+type PersistedSelection = {
+  rendererID: number,
+  path: Array<PathFrame>,
+};
+
+function createEmptyInspectedScreen(
+  arbitraryRootID: number,
+  type: ElementType,
+): InspectedElement {
+  const suspendedBy: DehydratedData = {
+    cleaned: [],
+    data: [],
+    unserializable: [],
+  };
+  return {
+    // invariants
+    id: arbitraryRootID,
+    type: type,
+    // Properties we merge
+    isErrored: false,
+    errors: [],
+    warnings: [],
+    suspendedBy,
+    suspendedByRange: null,
+    // TODO: How to merge these?
+    unknownSuspenders: UNKNOWN_SUSPENDERS_NONE,
+    // Properties where merging doesn't make sense so we ignore them entirely in the UI
+    rootType: null,
+    plugins: {stylex: null},
+    nativeTag: null,
+    env: null,
+    source: null,
+    stack: null,
+    rendererPackageName: null,
+    rendererVersion: null,
+    // These don't make sense for a Root. They're just bottom values.
+    key: null,
+    canEditFunctionProps: false,
+    canEditHooks: false,
+    canEditFunctionPropsDeletePaths: false,
+    canEditFunctionPropsRenamePaths: false,
+    canEditHooksAndDeletePaths: false,
+    canEditHooksAndRenamePaths: false,
+    canToggleError: false,
+    canToggleSuspense: false,
+    isSuspended: false,
+    hasLegacyContext: false,
+    context: null,
+    hooks: null,
+    props: null,
+    state: null,
+    owners: null,
+  };
+}
+
+function mergeRoots(
+  left: InspectedElement,
+  right: InspectedElement,
+  suspendedByOffset: number,
+): void {
+  const leftSuspendedByRange = left.suspendedByRange;
+  const rightSuspendedByRange = right.suspendedByRange;
+
+  if (right.isErrored) {
+    left.isErrored = true;
+  }
+  for (let i = 0; i < right.errors.length; i++) {
+    left.errors.push(right.errors[i]);
+  }
+  for (let i = 0; i < right.warnings.length; i++) {
+    left.warnings.push(right.warnings[i]);
+  }
+
+  const leftSuspendedBy: DehydratedData = left.suspendedBy;
+  const {data, cleaned, unserializable} = (right.suspendedBy: DehydratedData);
+  const leftSuspendedByData = ((leftSuspendedBy.data: any): Array<mixed>);
+  const rightSuspendedByData = ((data: any): Array<mixed>);
+  for (let i = 0; i < rightSuspendedByData.length; i++) {
+    leftSuspendedByData.push(rightSuspendedByData[i]);
+  }
+  for (let i = 0; i < cleaned.length; i++) {
+    leftSuspendedBy.cleaned.push(
+      [suspendedByOffset + cleaned[i][0]].concat(cleaned[i].slice(1)),
+    );
+  }
+  for (let i = 0; i < unserializable.length; i++) {
+    leftSuspendedBy.unserializable.push(
+      [suspendedByOffset + unserializable[i][0]].concat(
+        unserializable[i].slice(1),
+      ),
+    );
+  }
+
+  if (rightSuspendedByRange !== null) {
+    if (leftSuspendedByRange === null) {
+      left.suspendedByRange = [
+        rightSuspendedByRange[0],
+        rightSuspendedByRange[1],
+      ];
+    } else {
+      if (rightSuspendedByRange[0] < leftSuspendedByRange[0]) {
+        leftSuspendedByRange[0] = rightSuspendedByRange[0];
+      }
+      if (rightSuspendedByRange[1] > leftSuspendedByRange[1]) {
+        leftSuspendedByRange[1] = rightSuspendedByRange[1];
+      }
+    }
+  }
+}
+
+export default class Agent extends EventEmitter<{
+  hideNativeHighlight: [],
+  showNativeHighlight: [HostInstance],
+  startInspectingNative: [],
+  stopInspectingNative: [],
+  shutdown: [],
+  traceUpdates: [Set<HostInstance>],
+  drawTraceUpdates: [Array<HostInstance>],
+  drawGroupedTraceUpdatesWithNames: [Array<Array<GroupItem>>],
+  disableTraceUpdates: [],
+  getIfHasUnsupportedRendererVersion: [],
+  updateHookSettings: [$ReadOnly<DevToolsHookSettings>],
+  getHookSettings: [],
+}> {
+  _bridge: BackendBridge;
+  _isProfiling: boolean = false;
+  _rendererInterfaces: {[key: RendererID]: RendererInterface, ...} = {};
+  _persistedSelection: PersistedSelection | null = null;
+  _persistedSelectionMatch: PathMatch | null = null;
+  _traceUpdatesEnabled: boolean = false;
+  _onReloadAndProfile:
+    | ((recordChangeDescriptions: boolean, recordTimeline: boolean) => void)
+    | void;
+
+  constructor(
+    bridge: BackendBridge,
+    isProfiling: boolean = false,
+    onReloadAndProfile?: (
+      recordChangeDescriptions: boolean,
+      recordTimeline: boolean,
+    ) => void,
+  ) {
+    super();
+
+    this._isProfiling = isProfiling;
+    this._onReloadAndProfile = onReloadAndProfile;
+
+    const persistedSelectionString = sessionStorageGetItem(
+      SESSION_STORAGE_LAST_SELECTION_KEY,
+    );
+    if (persistedSelectionString != null) {
+      this._persistedSelection = JSON.parse(persistedSelectionString);
+    }
+
+    this._bridge = bridge;
+
+    bridge.addListener('clearErrorsAndWarnings', this.clearErrorsAndWarnings);
+    bridge.addListener('clearErrorsForElementID', this.clearErrorsForElementID);
+    bridge.addListener(
+      'clearWarningsForElementID',
+      this.clearWarningsForElementID,
+    );
+    bridge.addListener('copyElementPath', this.copyElementPath);
+    bridge.addListener('deletePath', this.deletePath);
+    bridge.addListener('getBackendVersion', this.getBackendVersion);
+    bridge.addListener('getBridgeProtocol', this.getBridgeProtocol);
+    bridge.addListener('getProfilingData', this.getProfilingData);
+    bridge.addListener('getProfilingStatus', this.getProfilingStatus);
+    bridge.addListener('getOwnersList', this.getOwnersList);
+    bridge.addListener('inspectElement', this.inspectElement);
+    bridge.addListener('inspectScreen', this.inspectScreen);
+    bridge.addListener('logElementToConsole', this.logElementToConsole);
+    bridge.addListener('overrideError', this.overrideError);
+    bridge.addListener('overrideSuspense', this.overrideSuspense);
+    bridge.addListener(
+      'overrideSuspenseMilestone',
+      this.overrideSuspenseMilestone,
+    );
+    bridge.addListener('overrideValueAtPath', this.overrideValueAtPath);
+    bridge.addListener('reloadAndProfile', this.reloadAndProfile);
+    bridge.addListener('renamePath', this.renamePath);
+    bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);
+    bridge.addListener('startProfiling', this.startProfiling);
+    bridge.addListener('stopProfiling', this.stopProfiling);
+    bridge.addListener('storeAsGlobal', this.storeAsGlobal);
+    bridge.addListener(
+      'syncSelectionFromBuiltinElementsPanel',
+      this.syncSelectionFromBuiltinElementsPanel,
+    );
+    bridge.addListener('shutdown', this.shutdown);
+
+    bridge.addListener('updateHookSettings', this.updateHookSettings);
+    bridge.addListener('getHookSettings', this.getHookSettings);
+
+    bridge.addListener('updateComponentFilters', this.updateComponentFilters);
+    bridge.addListener('getEnvironmentNames', this.getEnvironmentNames);
+    bridge.addListener(
+      'getIfHasUnsupportedRendererVersion',
+      this.getIfHasUnsupportedRendererVersion,
+    );
+
+    // Temporarily support older standalone front-ends sending commands to newer embedded backends.
+    // We do this because React Native embeds the React DevTools backend,
+    // but cannot control which version of the frontend users use.
+    bridge.addListener('overrideContext', this.overrideContext);
+    bridge.addListener('overrideHookState', this.overrideHookState);
+    bridge.addListener('overrideProps', this.overrideProps);
+    bridge.addListener('overrideState', this.overrideState);
+
+    setupHighlighter(bridge, this);
+    setupTraceUpdates(this);
+
+    // By this time, Store should already be initialized and intercept events
+    bridge.send('backendInitialized');
+
+    if (this._isProfiling) {
+      bridge.send('profilingStatus', true);
+    }
+  }
+
+  get rendererInterfaces(): {[key: RendererID]: RendererInterface, ...} {
+    return this._rendererInterfaces;
+  }
+
+  clearErrorsAndWarnings: ({rendererID: RendererID}) => void = ({
+    rendererID,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearErrorsAndWarnings();
+    }
+  };
+
+  clearErrorsForElementID: ElementAndRendererID => void = ({
+    id,
+    rendererID,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearErrorsForElementID(id);
+    }
+  };
+
+  clearWarningsForElementID: ElementAndRendererID => void = ({
+    id,
+    rendererID,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearWarningsForElementID(id);
+    }
+  };
+
+  copyElementPath: CopyElementParams => void = ({
+    id,
+    path,
+    rendererID,
+  }: CopyElementParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      const value = renderer.getSerializedElementValueByPath(id, path);
+
+      if (value != null) {
+        this._bridge.send('saveToClipboard', value);
+      } else {
+        console.warn(`Unable to obtain serialized value for element "${id}"`);
+      }
+    }
+  };
+
+  deletePath: DeletePathParams => void = ({
+    hookID,
+    id,
+    path,
+    rendererID,
+    type,
+  }: DeletePathParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.deletePath(type, id, hookID, 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);
+  }
+
+  getIDForHostInstance(
+    target: HostInstance,
+    onlySuspenseNodes?: boolean,
+  ): null | {id: number, rendererID: number} {
+    if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
+      // In React Native or non-DOM we simply pick any renderer that has a match.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        try {
+          const id = onlySuspenseNodes
+            ? renderer.getSuspenseNodeIDForHostInstance(target)
+            : renderer.getElementIDForHostInstance(target);
+          if (id !== null) {
+            return {
+              id: id,
+              rendererID: +rendererID,
+            };
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
+        }
+      }
+      return null;
+    } else {
+      // In the DOM we use a smarter mechanism to find the deepest a DOM node
+      // that is registered if there isn't an exact match.
+      let bestMatch: null | Element = null;
+      let bestRenderer: null | RendererInterface = null;
+      let bestRendererID: number = 0;
+      // Find the nearest ancestor which is mounted by a React.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        const nearestNode: null | Element = renderer.getNearestMountedDOMNode(
+          (target: any),
+        );
+        if (nearestNode !== null) {
+          if (nearestNode === target) {
+            // Exact match we can exit early.
+            bestMatch = nearestNode;
+            bestRenderer = renderer;
+            bestRendererID = +rendererID;
+            break;
+          }
+          if (bestMatch === null || bestMatch.contains(nearestNode)) {
+            // If this is the first match or the previous match contains the new match,
+            // so the new match is a deeper and therefore better match.
+            bestMatch = nearestNode;
+            bestRenderer = renderer;
+            bestRendererID = +rendererID;
+          }
+        }
+      }
+      if (bestRenderer != null && bestMatch != null) {
+        try {
+          const id = onlySuspenseNodes
+            ? bestRenderer.getSuspenseNodeIDForHostInstance(bestMatch)
+            : bestRenderer.getElementIDForHostInstance(bestMatch);
+          if (id !== null) {
+            return {
+              id,
+              rendererID: bestRendererID,
+            };
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
+        }
+      }
+      return null;
+    }
+  }
+
+  getComponentNameForHostInstance(target: HostInstance): string | null {
+    const match = this.getIDForHostInstance(target);
+    if (match !== null) {
+      const renderer = ((this._rendererInterfaces[
+        (match.rendererID: any)
+      ]: any): RendererInterface);
+      return renderer.getDisplayNameForElementID(match.id);
+    }
+    return null;
+  }
+
+  getBackendVersion: () => void = () => {
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
+  };
+
+  getBridgeProtocol: () => void = () => {
+    this._bridge.send('bridgeProtocol', currentBridgeProtocol);
+  };
+
+  getProfilingData: ({rendererID: RendererID}) => void = ({rendererID}) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    }
+
+    this._bridge.send('profilingData', renderer.getProfilingData());
+  };
+
+  getProfilingStatus: () => void = () => {
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
+  getOwnersList: ElementAndRendererID => void = ({id, rendererID}) => {
+    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: InspectElementParams => void = ({
+    forceFullData,
+    id,
+    path,
+    rendererID,
+    requestID,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      this._bridge.send(
+        'inspectedElement',
+        renderer.inspectElement(requestID, id, path, forceFullData),
+      );
+
+      // 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);
+        // Throttle persisting the selection.
+        this._lastSelectedElementID = id;
+        this._lastSelectedRendererID = rendererID;
+        if (!this._persistSelectionTimerScheduled) {
+          this._persistSelectionTimerScheduled = true;
+          setTimeout(this._persistSelection, 1000);
+        }
+      }
+
+      // TODO: If there was a way to change the selected DOM element
+      // in built-in 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.)
+    }
+  };
+
+  inspectScreen: InspectScreenParams => void = ({
+    requestID,
+    id,
+    forceFullData,
+    path: screenPath,
+  }) => {
+    let inspectedScreen: InspectedElement | null = null;
+    let found = false;
+    // the suspendedBy index will be from the previously merged roots.
+    // We need to keep track of how many suspendedBy we've already seen to know
+    // to which renderer the index belongs.
+    let suspendedByOffset = 0;
+    let suspendedByPathIndex: number | null = null;
+    // The path to hydrate for a specific renderer
+    let rendererPath: InspectElementParams['path'] = null;
+    if (screenPath !== null && screenPath.length > 1) {
+      const secondaryCategory = screenPath[0];
+      if (secondaryCategory !== 'suspendedBy') {
+        throw new Error(
+          'Only hydrating suspendedBy paths is supported. This is a bug.',
+        );
+      }
+      if (typeof screenPath[1] !== 'number') {
+        throw new Error(
+          `Expected suspendedBy index to be a number. Received '${screenPath[1]}' instead. This is a bug.`,
+        );
+      }
+      suspendedByPathIndex = screenPath[1];
+      rendererPath = screenPath.slice(2);
+    }
+
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      let path: InspectElementParams['path'] = null;
+      if (suspendedByPathIndex !== null && rendererPath !== null) {
+        const suspendedByPathRendererIndex =
+          suspendedByPathIndex - suspendedByOffset;
+        const rendererHasRequestedSuspendedByPath =
+          renderer.getElementAttributeByPath(id, [
+            'suspendedBy',
+            suspendedByPathRendererIndex,
+          ]) !== undefined;
+        if (rendererHasRequestedSuspendedByPath) {
+          path = ['suspendedBy', suspendedByPathRendererIndex].concat(
+            rendererPath,
+          );
+        }
+      }
+
+      const inspectedRootsPayload = renderer.inspectElement(
+        requestID,
+        id,
+        path,
+        forceFullData,
+      );
+      switch (inspectedRootsPayload.type) {
+        case 'hydrated-path':
+          // The path will be relative to the Roots of this renderer. We adjust it
+          // to be relative to all Roots of this implementation.
+          inspectedRootsPayload.path[1] += suspendedByOffset;
+          // TODO: Hydration logic is flawed since the Frontend path is not based
+          // on the original backend data but rather its own representation of it (e.g. due to reorder).
+          // So we can receive null here instead when hydration fails
+          if (inspectedRootsPayload.value !== null) {
+            for (
+              let i = 0;
+              i < inspectedRootsPayload.value.cleaned.length;
+              i++
+            ) {
+              inspectedRootsPayload.value.cleaned[i][1] += suspendedByOffset;
+            }
+          }
+          this._bridge.send('inspectedScreen', inspectedRootsPayload);
+          // If we hydrated a path, it must've been in a specific renderer so we can stop here.
+          return;
+        case 'full-data':
+          const inspectedRoots = inspectedRootsPayload.value;
+          if (inspectedScreen === null) {
+            inspectedScreen = createEmptyInspectedScreen(
+              inspectedRoots.id,
+              inspectedRoots.type,
+            );
+          }
+          mergeRoots(inspectedScreen, inspectedRoots, suspendedByOffset);
+          const dehydratedSuspendedBy: DehydratedData =
+            inspectedRoots.suspendedBy;
+          const suspendedBy = ((dehydratedSuspendedBy.data: any): Array<mixed>);
+          suspendedByOffset += suspendedBy.length;
+          found = true;
+          break;
+        case 'no-change':
+          found = true;
+          const rootsSuspendedBy: Array<mixed> =
+            (renderer.getElementAttributeByPath(id, ['suspendedBy']): any);
+          suspendedByOffset += rootsSuspendedBy.length;
+          break;
+        case 'not-found':
+          break;
+        case 'error':
+          // bail out and show the error
+          // TODO: aggregate errors
+          this._bridge.send('inspectedScreen', inspectedRootsPayload);
+          return;
+      }
+    }
+
+    if (inspectedScreen === null) {
+      if (found) {
+        this._bridge.send('inspectedScreen', {
+          type: 'no-change',
+          responseID: requestID,
+          id,
+        });
+      } else {
+        this._bridge.send('inspectedScreen', {
+          type: 'not-found',
+          responseID: requestID,
+          id,
+        });
+      }
+    } else {
+      this._bridge.send('inspectedScreen', {
+        type: 'full-data',
+        responseID: requestID,
+        id,
+        value: inspectedScreen,
+      });
+    }
+  };
+
+  logElementToConsole: ElementAndRendererID => void = ({id, rendererID}) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.logElementToConsole(id);
+    }
+  };
+
+  overrideError: OverrideErrorParams => void = ({
+    id,
+    rendererID,
+    forceError,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.overrideError(id, forceError);
+    }
+  };
+
+  overrideSuspense: OverrideSuspenseParams => void = ({
+    id,
+    rendererID,
+    forceFallback,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.overrideSuspense(id, forceFallback);
+    }
+  };
+
+  overrideSuspenseMilestone: OverrideSuspenseMilestoneParams => void = ({
+    suspendedSet,
+  }) => {
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      if (renderer.supportsTogglingSuspense) {
+        renderer.overrideSuspenseMilestone(suspendedSet);
+      }
+    }
+  };
+
+  overrideValueAtPath: OverrideValueAtPathParams => void = ({
+    hookID,
+    id,
+    path,
+    rendererID,
+    type,
+    value,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.overrideValueAtPath(type, id, hookID, path, value);
+    }
+  };
+
+  // Temporarily support older standalone front-ends by forwarding the older message types
+  // to the new "overrideValueAtPath" command the backend is now listening to.
+  overrideContext: SetInParams => void = ({
+    id,
+    path,
+    rendererID,
+    wasForwarded,
+    value,
+  }) => {
+    // Don't forward a message that's already been forwarded by the front-end Bridge.
+    // We only need to process the override command once!
+    if (!wasForwarded) {
+      this.overrideValueAtPath({
+        id,
+        path,
+        rendererID,
+        type: 'context',
+        value,
+      });
+    }
+  };
+
+  // Temporarily support older standalone front-ends by forwarding the older message types
+  // to the new "overrideValueAtPath" command the backend is now listening to.
+  overrideHookState: OverrideHookParams => void = ({
+    id,
+    hookID,
+    path,
+    rendererID,
+    wasForwarded,
+    value,
+  }) => {
+    // Don't forward a message that's already been forwarded by the front-end Bridge.
+    // We only need to process the override command once!
+    if (!wasForwarded) {
+      this.overrideValueAtPath({
+        id,
+        path,
+        rendererID,
+        type: 'hooks',
+        value,
+      });
+    }
+  };
+
+  // Temporarily support older standalone front-ends by forwarding the older message types
+  // to the new "overrideValueAtPath" command the backend is now listening to.
+  overrideProps: SetInParams => void = ({
+    id,
+    path,
+    rendererID,
+    wasForwarded,
+    value,
+  }) => {
+    // Don't forward a message that's already been forwarded by the front-end Bridge.
+    // We only need to process the override command once!
+    if (!wasForwarded) {
+      this.overrideValueAtPath({
+        id,
+        path,
+        rendererID,
+        type: 'props',
+        value,
+      });
+    }
+  };
+
+  // Temporarily support older standalone front-ends by forwarding the older message types
+  // to the new "overrideValueAtPath" command the backend is now listening to.
+  overrideState: SetInParams => void = ({
+    id,
+    path,
+    rendererID,
+    wasForwarded,
+    value,
+  }) => {
+    // Don't forward a message that's already been forwarded by the front-end Bridge.
+    // We only need to process the override command once!
+    if (!wasForwarded) {
+      this.overrideValueAtPath({
+        id,
+        path,
+        rendererID,
+        type: 'state',
+        value,
+      });
+    }
+  };
+
+  onReloadAndProfileSupportedByHost: () => void = () => {
+    this._bridge.send('isReloadAndProfileSupportedByBackend', true);
+  };
+
+  reloadAndProfile: ({
+    recordChangeDescriptions: boolean,
+    recordTimeline: boolean,
+  }) => void = ({recordChangeDescriptions, recordTimeline}) => {
+    if (typeof this._onReloadAndProfile === 'function') {
+      this._onReloadAndProfile(recordChangeDescriptions, recordTimeline);
+    }
+
+    // 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');
+  };
+
+  renamePath: RenamePathParams => void = ({
+    hookID,
+    id,
+    newPath,
+    oldPath,
+    rendererID,
+    type,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.renamePath(type, id, hookID, oldPath, newPath);
+    }
+  };
+
+  selectNode(target: HostInstance | null): void {
+    const match = target !== null ? this.getIDForHostInstance(target) : null;
+    this._bridge.send(
+      'selectElement',
+      match !== null
+        ? match.id
+        : // If you click outside a React root in the Elements panel, we want to give
+          // feedback that no selection is possible so we clear the selection.
+          // Otherwise clicking outside a React root is indistinguishable from clicking
+          // a different host node that leads to the same selected React element
+          // due to Component filters
+          null,
+    );
+  }
+
+  registerRendererInterface(
+    rendererID: RendererID,
+    rendererInterface: RendererInterface,
+  ) {
+    this._rendererInterfaces[rendererID] = rendererInterface;
+
+    rendererInterface.setTraceUpdatesEnabled(this._traceUpdatesEnabled);
+
+    const renderer = rendererInterface.renderer;
+    if (renderer !== null) {
+      const devRenderer = renderer.bundleType === 1;
+      const enableSuspenseTab =
+        devRenderer && gte(renderer.version, '19.3.0-canary');
+      if (enableSuspenseTab) {
+        this._bridge.send('enableSuspenseTab');
+      }
+    }
+
+    // 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) => void =
+    traceUpdatesEnabled => {
+      this._traceUpdatesEnabled = traceUpdatesEnabled;
+
+      setTraceUpdatesEnabled(traceUpdatesEnabled);
+
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        renderer.setTraceUpdatesEnabled(traceUpdatesEnabled);
+      }
+    };
+
+  syncSelectionFromBuiltinElementsPanel: () => void = () => {
+    const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
+    this.selectNode(target == null ? null : target);
+  };
+
+  shutdown: () => void = () => {
+    // Clean up the overlay if visible, and associated events.
+    this.emit('shutdown');
+
+    this._bridge.removeAllListeners();
+    this.removeAllListeners();
+  };
+
+  startProfiling: ({
+    recordChangeDescriptions: boolean,
+    recordTimeline: boolean,
+  }) => void = ({recordChangeDescriptions, recordTimeline}) => {
+    this._isProfiling = true;
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.startProfiling(recordChangeDescriptions, recordTimeline);
+    }
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
+  stopProfiling: () => void = () => {
+    this._isProfiling = false;
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.stopProfiling();
+    }
+    this._bridge.send('profilingStatus', this._isProfiling);
+  };
+
+  stopInspectingNative: (selected: boolean) => void = selected => {
+    this._bridge.send('stopInspectingHost', selected);
+  };
+
+  storeAsGlobal: StoreAsGlobalParams => void = ({
+    count,
+    id,
+    path,
+    rendererID,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.storeAsGlobal(id, path, count);
+    }
+  };
+
+  updateHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
+    settings => {
+      // Propagate the settings, so Backend can subscribe to it and modify hook
+      this.emit('updateHookSettings', settings);
+    };
+
+  getHookSettings: () => void = () => {
+    this.emit('getHookSettings');
+  };
+
+  onHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
+    settings => {
+      this._bridge.send('hookSettings', settings);
+    };
+
+  updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void =
+    componentFilters => {
+      for (const rendererIDString in this._rendererInterfaces) {
+        const rendererID = +rendererIDString;
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        if (this._lastSelectedRendererID === rendererID) {
+          // Changing component filters will unmount and remount the DevTools tree.
+          // Track the last selection's path so we can restore the selection.
+          const path = renderer.getPathForElement(this._lastSelectedElementID);
+          if (path !== null) {
+            renderer.setTrackedPath(path);
+            this._persistedSelection = {
+              rendererID,
+              path,
+            };
+          }
+        }
+        renderer.updateComponentFilters(componentFilters);
+      }
+    };
+
+  getEnvironmentNames: () => void = () => {
+    let accumulatedNames = null;
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = this._rendererInterfaces[+rendererID];
+      const names = renderer.getEnvironmentNames();
+      if (accumulatedNames === null) {
+        accumulatedNames = names;
+      } else {
+        for (let i = 0; i < names.length; i++) {
+          if (accumulatedNames.indexOf(names[i]) === -1) {
+            accumulatedNames.push(names[i]);
+          }
+        }
+      }
+    }
+    this._bridge.send('environmentNames', accumulatedNames || []);
+  };
+
+  onTraceUpdates: (nodes: Set<HostInstance>) => void = nodes => {
+    this.emit('traceUpdates', nodes);
+  };
+
+  onFastRefreshScheduled: () => void = () => {
+    if (__DEBUG__) {
+      debug('onFastRefreshScheduled');
+    }
+
+    this._bridge.send('fastRefreshScheduled');
+  };
+
+  onHookOperations: (operations: Array<number>) => void = operations => {
+    if (__DEBUG__) {
+      debug(
+        'onHookOperations',
+        `(${operations.length}) [${operations.join(', ')}]`,
+      );
+    }
+
+    // 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('selectElement', 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);
+          }
+        }
+      }
+    }
+  };
+
+  getIfHasUnsupportedRendererVersion: () => void = () => {
+    this.emit('getIfHasUnsupportedRendererVersion');
+  };
+
+  onUnsupportedRenderer() {
+    this._bridge.send('unsupportedRendererVersion');
+  }
+
+  _persistSelectionTimerScheduled: boolean = false;
+  _lastSelectedRendererID: number = -1;
+  _lastSelectedElementID: number = -1;
+  _persistSelection: any = () => {
+    this._persistSelectionTimerScheduled = false;
+    const rendererID = this._lastSelectedRendererID;
+    const id = this._lastSelectedElementID;
+    // 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);
+    }
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
new file mode 100644
index 00000000000..c938b673632
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DevTools fork of ReactFiberComponentStack.
+// This fork enables DevTools to use the same "native" component stack format,
+// while still maintaining support for multiple renderer versions
+// (which use different values for ReactTypeOfWork).
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {CurrentDispatcherRef, WorkTagMap} from '../types';
+
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+import {
+  describeBuiltInComponentFrame,
+  describeFunctionComponentFrame,
+  describeClassComponentFrame,
+  describeDebugInfoFrame,
+} from '../shared/DevToolsComponentStackFrame';
+
+import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
+
+export function describeFiber(
+  workTagMap: WorkTagMap,
+  workInProgress: Fiber,
+  currentDispatcherRef: CurrentDispatcherRef,
+): string {
+  const {
+    HostHoistable,
+    HostSingleton,
+    HostComponent,
+    LazyComponent,
+    SuspenseComponent,
+    SuspenseListComponent,
+    FunctionComponent,
+    IndeterminateComponent,
+    SimpleMemoComponent,
+    ForwardRef,
+    ClassComponent,
+    ViewTransitionComponent,
+    ActivityComponent,
+  } = workTagMap;
+
+  switch (workInProgress.tag) {
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent:
+      return describeBuiltInComponentFrame(workInProgress.type);
+    case LazyComponent:
+      // TODO: When we support Thenables as component types we should rename this.
+      return describeBuiltInComponentFrame('Lazy');
+    case SuspenseComponent:
+      return describeBuiltInComponentFrame('Suspense');
+    case SuspenseListComponent:
+      return describeBuiltInComponentFrame('SuspenseList');
+    case ViewTransitionComponent:
+      return describeBuiltInComponentFrame('ViewTransition');
+    case ActivityComponent:
+      return describeBuiltInComponentFrame('Activity');
+    case FunctionComponent:
+    case IndeterminateComponent:
+    case SimpleMemoComponent:
+      return describeFunctionComponentFrame(
+        workInProgress.type,
+        currentDispatcherRef,
+      );
+    case ForwardRef:
+      return describeFunctionComponentFrame(
+        workInProgress.type.render,
+        currentDispatcherRef,
+      );
+    case ClassComponent:
+      return describeClassComponentFrame(
+        workInProgress.type,
+        currentDispatcherRef,
+      );
+    default:
+      return '';
+  }
+}
+
+export function getStackByFiberInDevAndProd(
+  workTagMap: WorkTagMap,
+  workInProgress: Fiber,
+  currentDispatcherRef: CurrentDispatcherRef,
+): string {
+  try {
+    let info = '';
+    let node: Fiber = workInProgress;
+    do {
+      info += describeFiber(workTagMap, node, currentDispatcherRef);
+      // Add any Server Component stack frames in reverse order.
+      const debugInfo = node._debugInfo;
+      if (debugInfo) {
+        for (let i = debugInfo.length - 1; i >= 0; i--) {
+          const entry = debugInfo[i];
+          if (typeof entry.name === 'string') {
+            info += describeDebugInfoFrame(entry.name, entry.env);
+          }
+        }
+      }
+      // $FlowFixMe[incompatible-type] we bail out when we get a null
+      node = node.return;
+    } while (node);
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
+
+export function getSourceLocationByFiber(
+  workTagMap: WorkTagMap,
+  fiber: Fiber,
+  currentDispatcherRef: CurrentDispatcherRef,
+): null | string {
+  // This is like getStackByFiberInDevAndProd but just the first stack frame.
+  try {
+    const info = describeFiber(workTagMap, fiber, currentDispatcherRef);
+    if (info !== '') {
+      return info.slice(1); // skip the leading newline
+    }
+  } catch (x) {
+    console.error(x);
+  }
+  return null;
+}
+
+export function supportsConsoleTasks(fiber: Fiber): boolean {
+  // If this Fiber supports native console.createTask then we are already running
+  // inside a native async stack trace if it's active - meaning the DevTools is open.
+  // Ideally we'd detect if this task was created while the DevTools was open or not.
+  return !!fiber._debugTask;
+}
+
+export function supportsOwnerStacks(fiber: Fiber): boolean {
+  // If this Fiber supports owner stacks then it'll have the _debugStack field.
+  // It might be null but that still means we should use the owner stack logic.
+  return fiber._debugStack !== undefined;
+}
+
+export function getOwnerStackByFiberInDev(
+  workTagMap: WorkTagMap,
+  workInProgress: Fiber,
+  currentDispatcherRef: CurrentDispatcherRef,
+): string {
+  const {
+    HostHoistable,
+    HostSingleton,
+    HostText,
+    HostComponent,
+    SuspenseComponent,
+    SuspenseListComponent,
+    ViewTransitionComponent,
+    ActivityComponent,
+  } = workTagMap;
+  try {
+    let info = '';
+
+    if (workInProgress.tag === HostText) {
+      // Text nodes never have an owner/stack because they're not created through JSX.
+      // We use the parent since text nodes are always created through a host parent.
+      workInProgress = (workInProgress.return: any);
+    }
+
+    // The owner stack of the current fiber will be where it was created, i.e. inside its owner.
+    // There's no actual name of the currently executing component. Instead, that is available
+    // on the regular stack that's currently executing. However, for built-ins there is no such
+    // named stack frame and it would be ignored as being internal anyway. Therefore we add
+    // add one extra frame just to describe the "current" built-in component by name.
+    switch (workInProgress.tag) {
+      case HostHoistable:
+      case HostSingleton:
+      case HostComponent:
+        info += describeBuiltInComponentFrame(workInProgress.type);
+        break;
+      case SuspenseComponent:
+        info += describeBuiltInComponentFrame('Suspense');
+        break;
+      case SuspenseListComponent:
+        info += describeBuiltInComponentFrame('SuspenseList');
+        break;
+      case ViewTransitionComponent:
+        info += describeBuiltInComponentFrame('ViewTransition');
+        break;
+      case ActivityComponent:
+        info += describeBuiltInComponentFrame('Activity');
+        break;
+    }
+
+    let owner: void | null | Fiber | ReactComponentInfo = workInProgress;
+
+    while (owner) {
+      if (typeof owner.tag === 'number') {
+        const fiber: Fiber = (owner: any);
+        owner = fiber._debugOwner;
+        let debugStack: void | null | string | Error = fiber._debugStack;
+        // If we don't actually print the stack if there is no owner of this JSX element.
+        // In a real app it's typically not useful since the root app is always controlled
+        // by the framework. These also tend to have noisy stacks because they're not rooted
+        // in a React render but in some imperative bootstrapping code. It could be useful
+        // if the element was created in module scope. E.g. hoisted. We could add a a single
+        // stack frame for context for example but it doesn't say much if that's a wrapper.
+        if (owner && debugStack) {
+          if (typeof debugStack !== 'string') {
+            debugStack = formatOwnerStack(debugStack);
+          }
+          if (debugStack !== '') {
+            info += '\n' + debugStack;
+          }
+        }
+      } else if (owner.debugStack != null) {
+        // Server Component
+        const ownerStack: Error = owner.debugStack;
+        owner = owner.owner;
+        if (owner && ownerStack) {
+          info += '\n' + formatOwnerStack(ownerStack);
+        }
+      } else {
+        break;
+      }
+    }
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
new file mode 100644
index 00000000000..892a3c6fc77
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -0,0 +1,8940 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  ReactComponentInfo,
+  ReactDebugInfo,
+  ReactAsyncInfo,
+  ReactIOInfo,
+  ReactStackTrace,
+  ReactCallSite,
+  Wakeable,
+} from 'shared/ReactTypes';
+
+import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+
+import {
+  ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterHOC,
+  ComponentFilterLocation,
+  ComponentFilterEnvironmentName,
+  ComponentFilterActivitySlice,
+  ElementTypeClass,
+  ElementTypeContext,
+  ElementTypeFunction,
+  ElementTypeForwardRef,
+  ElementTypeHostComponent,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeRoot,
+  ElementTypeSuspense,
+  ElementTypeSuspenseList,
+  ElementTypeTracingMarker,
+  ElementTypeViewTransition,
+  ElementTypeActivity,
+  ElementTypeVirtual,
+  StrictMode,
+} from 'react-devtools-shared/src/frontend/types';
+import {
+  deletePathInObject,
+  getDisplayName,
+  getWrappedDisplayName,
+  getDefaultComponentFilters,
+  getInObject,
+  getUID,
+  renamePathInObject,
+  setInObject,
+  utfEncodeString,
+  persistableComponentFilters,
+} from 'react-devtools-shared/src/utils';
+import {
+  formatConsoleArgumentsToSingleString,
+  formatDurationToMicrosecondsGranularity,
+  gt,
+  gte,
+  serializeToString,
+} from 'react-devtools-shared/src/backend/utils';
+import {
+  extractLocationFromComponentStack,
+  extractLocationFromOwnerStack,
+  parseStackTrace,
+} from 'react-devtools-shared/src/backend/utils/parseStackTrace';
+import {
+  cleanForBridge,
+  copyWithDelete,
+  copyWithRename,
+  copyWithSet,
+  getEffectDurations,
+} from '../utils';
+import {
+  __DEBUG__,
+  PROFILING_FLAG_BASIC_SUPPORT,
+  PROFILING_FLAG_TIMELINE_SUPPORT,
+  PROFILING_FLAG_PERFORMANCE_TRACKS_SUPPORT,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_SET_SUBTREE_MODE,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
+  SUSPENSE_TREE_OPERATION_ADD,
+  SUSPENSE_TREE_OPERATION_REMOVE,
+  SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
+  SUSPENSE_TREE_OPERATION_RESIZE,
+  SUSPENSE_TREE_OPERATION_SUSPENDERS,
+  UNKNOWN_SUSPENDERS_NONE,
+  UNKNOWN_SUSPENDERS_REASON_PRODUCTION,
+  UNKNOWN_SUSPENDERS_REASON_OLD_VERSION,
+  UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE,
+} from '../../constants';
+import {inspectHooksOfFiber} from 'react-debug-tools';
+import {
+  CONCURRENT_MODE_NUMBER,
+  CONCURRENT_MODE_SYMBOL_STRING,
+  DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
+  PROVIDER_NUMBER,
+  PROVIDER_SYMBOL_STRING,
+  CONTEXT_NUMBER,
+  CONTEXT_SYMBOL_STRING,
+  CONSUMER_SYMBOL_STRING,
+  STRICT_MODE_NUMBER,
+  STRICT_MODE_SYMBOL_STRING,
+  PROFILER_NUMBER,
+  PROFILER_SYMBOL_STRING,
+  REACT_MEMO_CACHE_SENTINEL,
+  SCOPE_NUMBER,
+  SCOPE_SYMBOL_STRING,
+  FORWARD_REF_NUMBER,
+  FORWARD_REF_SYMBOL_STRING,
+  MEMO_NUMBER,
+  MEMO_SYMBOL_STRING,
+  SERVER_CONTEXT_SYMBOL_STRING,
+  LAZY_SYMBOL_STRING,
+  REACT_OPTIMISTIC_KEY,
+} from '../shared/ReactSymbols';
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
+
+import {componentInfoToComponentLogsMap} from '../shared/DevToolsServerComponentLogs';
+
+import is from 'shared/objectIs';
+
+import {getIODescription} from 'shared/ReactIODescription';
+
+import {
+  getStackByFiberInDevAndProd,
+  getOwnerStackByFiberInDev,
+  supportsOwnerStacks,
+  supportsConsoleTasks,
+} from './DevToolsFiberComponentStack';
+
+// $FlowFixMe[method-unbinding]
+const toString = Object.prototype.toString;
+
+function isError(object: mixed) {
+  return toString.call(object) === '[object Error]';
+}
+
+import {getStyleXData} from '../StyleX/utils';
+import {createProfilingHooks} from '../profilingHooks';
+
+import type {GetTimelineData, ToggleProfilingStatus} from '../profilingHooks';
+import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  ChangeDescription,
+  CommitDataBackend,
+  DevToolsHook,
+  InspectedElement,
+  InspectedElementPayload,
+  InstanceAndStyle,
+  HostInstance,
+  PathFrame,
+  PathMatch,
+  ProfilingDataBackend,
+  ProfilingDataForRootBackend,
+  ReactRenderer,
+  RendererInterface,
+  SerializedElement,
+  SerializedAsyncInfo,
+  WorkTagMap,
+  CurrentDispatcherRef,
+  LegacyDispatcherRef,
+  ProfilingSettings,
+} from '../types';
+import type {
+  ComponentFilter,
+  ActivitySliceFilter,
+  ElementType,
+  Plugins,
+} from 'react-devtools-shared/src/frontend/types';
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import {getSourceLocationByFiber} from './DevToolsFiberComponentStack';
+import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
+
+// Kinds
+const FIBER_INSTANCE = 0;
+const VIRTUAL_INSTANCE = 1;
+const FILTERED_FIBER_INSTANCE = 2;
+
+// This type represents a stateful instance of a Client Component i.e. a Fiber pair.
+// These instances also let us track stateful DevTools meta data like id and warnings.
+type FiberInstance = {
+  kind: 0,
+  id: number,
+  parent: null | DevToolsInstance,
+  firstChild: null | DevToolsInstance,
+  nextSibling: null | DevToolsInstance,
+  source: null | string | Error | ReactFunctionLocation, // source location of this component function, or owned child stack
+  logCount: number, // total number of errors/warnings last seen
+  treeBaseDuration: number, // the profiled time of the last render of this subtree
+  suspendedBy: null | Array<ReactAsyncInfo>, // things that suspended in the children position of this component
+  suspenseNode: null | SuspenseNode,
+  data: Fiber, // one of a Fiber pair
+};
+
+function createFiberInstance(fiber: Fiber): FiberInstance {
+  return {
+    kind: FIBER_INSTANCE,
+    id: getUID(),
+    parent: null,
+    firstChild: null,
+    nextSibling: null,
+    source: null,
+    logCount: 0,
+    treeBaseDuration: 0,
+    suspendedBy: null,
+    suspenseNode: null,
+    data: fiber,
+  };
+}
+
+type FilteredFiberInstance = {
+  kind: 2,
+  // We exclude id from the type to get errors if we try to access it.
+  // However it is still in the object to preserve hidden class.
+  // id: number,
+  parent: null | DevToolsInstance,
+  firstChild: null | DevToolsInstance,
+  nextSibling: null | DevToolsInstance,
+  source: null | string | Error | ReactFunctionLocation, // always null here.
+  logCount: number, // total number of errors/warnings last seen
+  treeBaseDuration: number, // the profiled time of the last render of this subtree
+  suspendedBy: null | Array<ReactAsyncInfo>, // only used at the root
+  suspenseNode: null | SuspenseNode,
+  data: Fiber, // one of a Fiber pair
+};
+
+// This is used to represent a filtered Fiber but still lets us find its host instance.
+function createFilteredFiberInstance(fiber: Fiber): FilteredFiberInstance {
+  return ({
+    kind: FILTERED_FIBER_INSTANCE,
+    id: 0,
+    parent: null,
+    firstChild: null,
+    nextSibling: null,
+    source: null,
+    logCount: 0,
+    treeBaseDuration: 0,
+    suspendedBy: null,
+    suspenseNode: null,
+    data: fiber,
+  }: any);
+}
+
+// This type represents a stateful instance of a Server Component or a Component
+// that gets optimized away - e.g. call-through without creating a Fiber.
+// It's basically a virtual Fiber. This is not a semantic concept in React.
+// It only exists as a virtual concept to let the same Element in the DevTools
+// persist. To be selectable separately from all ReactComponentInfo and overtime.
+type VirtualInstance = {
+  kind: 1,
+  id: number,
+  parent: null | DevToolsInstance,
+  firstChild: null | DevToolsInstance,
+  nextSibling: null | DevToolsInstance,
+  source: null | string | Error | ReactFunctionLocation, // source location of this server component, or owned child stack
+  logCount: number, // total number of errors/warnings last seen
+  treeBaseDuration: number, // the profiled time of the last render of this subtree
+  suspendedBy: null | Array<ReactAsyncInfo>, // things that blocked the server component's child from rendering
+  suspenseNode: null,
+  // The latest info for this instance. This can be updated over time and the
+  // same info can appear in more than once ServerComponentInstance.
+  data: ReactComponentInfo,
+};
+
+function createVirtualInstance(
+  debugEntry: ReactComponentInfo,
+): VirtualInstance {
+  return {
+    kind: VIRTUAL_INSTANCE,
+    id: getUID(),
+    parent: null,
+    firstChild: null,
+    nextSibling: null,
+    source: null,
+    logCount: 0,
+    treeBaseDuration: 0,
+    suspendedBy: null,
+    suspenseNode: null,
+    data: debugEntry,
+  };
+}
+
+type DevToolsInstance = FiberInstance | VirtualInstance | FilteredFiberInstance;
+
+// A Generic Rect super type which can include DOMRect and other objects with similar shape like in React Native.
+type Rect = {x: number, y: number, width: number, height: number, ...};
+
+type SuspenseNode = {
+  // The Instance can be a Suspense boundary, a SuspenseList Row, or HostRoot.
+  // It can also be disconnected from the main tree if it's a Filtered Instance.
+  instance: FiberInstance | FilteredFiberInstance,
+  parent: null | SuspenseNode,
+  firstChild: null | SuspenseNode,
+  nextSibling: null | SuspenseNode,
+  rects: null | Array<Rect>, // The bounding rects of content children.
+  suspendedBy: Map<ReactIOInfo, Set<DevToolsInstance>>, // Tracks which data we're suspended by and the children that suspend it.
+  environments: Map<string, number>, // Tracks the Flight environment names that suspended this. I.e. if the server blocked this.
+  endTime: number, // Track a short cut to the maximum end time value within the suspendedBy set.
+  // Track whether any of the items in suspendedBy are unique this this Suspense boundaries or if they're all
+  // also in the parent sets. This determine whether this could contribute in the loading sequence.
+  hasUniqueSuspenders: boolean,
+  // Track whether anything suspended in this boundary that we can't track either because it was using throw
+  // a promise, an older version of React or because we're inspecting prod.
+  hasUnknownSuspenders: boolean,
+};
+
+// Update flags need to be propagated up until the caller that put the corresponding
+// node on the stack.
+// If you push a new node, you need to handle ShouldResetChildren when you pop it.
+// If you push a new Suspense node, you need to handle ShouldResetSuspenseChildren when you pop it.
+type UpdateFlags = number;
+const NoUpdate = /*                          */ 0b000;
+const ShouldResetChildren = /*               */ 0b001;
+const ShouldResetSuspenseChildren = /*       */ 0b010;
+const ShouldResetParentSuspenseChildren = /* */ 0b100;
+
+function createSuspenseNode(
+  instance: FiberInstance | FilteredFiberInstance,
+): SuspenseNode {
+  return (instance.suspenseNode = {
+    instance: instance,
+    parent: null,
+    firstChild: null,
+    nextSibling: null,
+    rects: null,
+    suspendedBy: new Map(),
+    environments: new Map(),
+    endTime: 0,
+    hasUniqueSuspenders: false,
+    hasUnknownSuspenders: false,
+  });
+}
+
+type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
+type getTypeSymbolType = (type: any) => symbol | string | number;
+
+type ReactPriorityLevelsType = {
+  ImmediatePriority: number,
+  UserBlockingPriority: number,
+  NormalPriority: number,
+  LowPriority: number,
+  IdlePriority: number,
+  NoPriority: number,
+};
+
+export function getDispatcherRef(renderer: {
+  +currentDispatcherRef?: LegacyDispatcherRef | CurrentDispatcherRef,
+  ...
+}): void | CurrentDispatcherRef {
+  if (renderer.currentDispatcherRef === undefined) {
+    return undefined;
+  }
+  const injectedRef = renderer.currentDispatcherRef;
+  if (
+    typeof injectedRef.H === 'undefined' &&
+    typeof injectedRef.current !== 'undefined'
+  ) {
+    // We got a legacy dispatcher injected, let's create a wrapper proxy to translate.
+    return {
+      get H() {
+        return (injectedRef: any).current;
+      },
+      set H(value) {
+        (injectedRef: any).current = value;
+      },
+    };
+  }
+  return (injectedRef: any);
+}
+
+function getFiberFlags(fiber: Fiber): number {
+  // The name of this field changed from "effectTag" to "flags"
+  return fiber.flags !== undefined ? fiber.flags : (fiber: any).effectTag;
+}
+
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
+const getCurrentTime =
+  // $FlowFixMe[method-unbinding]
+  typeof performance === 'object' && typeof performance.now === 'function'
+    ? () => performance.now()
+    : () => Date.now();
+
+export function getInternalReactConstants(version: string): {
+  getDisplayNameForFiber: getDisplayNameForFiberType,
+  getTypeSymbol: getTypeSymbolType,
+  ReactPriorityLevels: ReactPriorityLevelsType,
+  ReactTypeOfWork: WorkTagMap,
+  StrictModeBits: number,
+  SuspenseyImagesMode: number,
+} {
+  // **********************************************************
+  // 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.
+  let ReactPriorityLevels: ReactPriorityLevelsType = {
+    ImmediatePriority: 99,
+    UserBlockingPriority: 98,
+    NormalPriority: 97,
+    LowPriority: 96,
+    IdlePriority: 95,
+    NoPriority: 90,
+  };
+
+  if (gt(version, '17.0.2')) {
+    ReactPriorityLevels = {
+      ImmediatePriority: 1,
+      UserBlockingPriority: 2,
+      NormalPriority: 3,
+      LowPriority: 4,
+      IdlePriority: 5,
+      NoPriority: 0,
+    };
+  }
+
+  let StrictModeBits = 0;
+  if (gte(version, '18.0.0-alpha')) {
+    // 18+
+    StrictModeBits = 0b011000;
+  } else if (gte(version, '16.9.0')) {
+    // 16.9 - 17
+    StrictModeBits = 0b1;
+  } else if (gte(version, '16.3.0')) {
+    // 16.3 - 16.8
+    StrictModeBits = 0b10;
+  }
+
+  const SuspenseyImagesMode = 0b0100000;
+
+  let ReactTypeOfWork: WorkTagMap = ((null: any): WorkTagMap);
+
+  // **********************************************************
+  // The section below is copied from files in React repo.
+  // Keep it in sync, and add version guards if it changes.
+  //
+  // TODO Update the gt() check below to be gte() whichever the next version number is.
+  // Currently the version in Git is 17.0.2 (but that version has not been/may not end up being released).
+  if (gt(version, '17.0.1')) {
+    ReactTypeOfWork = {
+      CacheComponent: 24, // Experimental
+      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,
+      HostHoistable: 26, // In reality, 18.2+. But doesn't hurt to include it here
+      HostSingleton: 27, // Same as above
+      HostText: 6,
+      IncompleteClassComponent: 17,
+      IncompleteFunctionComponent: 28,
+      IndeterminateComponent: 2, // removed in 19.0.0
+      LazyComponent: 16,
+      LegacyHiddenComponent: 23, // Does not exist in 18+ OSS but exists in fb builds
+      MemoComponent: 14,
+      Mode: 8,
+      OffscreenComponent: 22, // Experimental in 17. Stable in 18+
+      Profiler: 12,
+      ScopeComponent: 21, // Experimental
+      SimpleMemoComponent: 15,
+      SuspenseComponent: 13,
+      SuspenseListComponent: 19, // Experimental
+      TracingMarkerComponent: 25, // Experimental - This is technically in 18 but we don't
+      // want to fork again so we're adding it here instead
+      YieldComponent: -1, // Removed
+      Throw: 29,
+      ViewTransitionComponent: 30, // Experimental
+      ActivityComponent: 31,
+    };
+  } else if (gte(version, '17.0.0-alpha')) {
+    ReactTypeOfWork = {
+      CacheComponent: -1, // Doesn't exist yet
+      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,
+      HostHoistable: -1, // Doesn't exist yet
+      HostSingleton: -1, // Doesn't exist yet
+      HostText: 6,
+      IncompleteClassComponent: 17,
+      IncompleteFunctionComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 2,
+      LazyComponent: 16,
+      LegacyHiddenComponent: 24,
+      MemoComponent: 14,
+      Mode: 8,
+      OffscreenComponent: 23, // Experimental
+      Profiler: 12,
+      ScopeComponent: 21, // Experimental
+      SimpleMemoComponent: 15,
+      SuspenseComponent: 13,
+      SuspenseListComponent: 19, // Experimental
+      TracingMarkerComponent: -1, // Doesn't exist yet
+      YieldComponent: -1, // Removed
+      Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
+    };
+  } else if (gte(version, '16.6.0-beta.0')) {
+    ReactTypeOfWork = {
+      CacheComponent: -1, // Doesn't exist yet
+      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,
+      HostHoistable: -1, // Doesn't exist yet
+      HostSingleton: -1, // Doesn't exist yet
+      HostText: 6,
+      IncompleteClassComponent: 17,
+      IncompleteFunctionComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 2,
+      LazyComponent: 16,
+      LegacyHiddenComponent: -1,
+      MemoComponent: 14,
+      Mode: 8,
+      OffscreenComponent: -1, // Experimental
+      Profiler: 12,
+      ScopeComponent: -1, // Experimental
+      SimpleMemoComponent: 15,
+      SuspenseComponent: 13,
+      SuspenseListComponent: 19, // Experimental
+      TracingMarkerComponent: -1, // Doesn't exist yet
+      YieldComponent: -1, // Removed
+      Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
+    };
+  } else if (gte(version, '16.4.3-alpha')) {
+    ReactTypeOfWork = {
+      CacheComponent: -1, // Doesn't exist yet
+      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,
+      HostHoistable: -1, // Doesn't exist yet
+      HostSingleton: -1, // Doesn't exist yet
+      HostText: 8,
+      IncompleteClassComponent: -1, // Doesn't exist yet
+      IncompleteFunctionComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 4,
+      LazyComponent: -1, // Doesn't exist yet
+      LegacyHiddenComponent: -1,
+      MemoComponent: -1, // Doesn't exist yet
+      Mode: 10,
+      OffscreenComponent: -1, // Experimental
+      Profiler: 15,
+      ScopeComponent: -1, // Experimental
+      SimpleMemoComponent: -1, // Doesn't exist yet
+      SuspenseComponent: 16,
+      SuspenseListComponent: -1, // Doesn't exist yet
+      TracingMarkerComponent: -1, // Doesn't exist yet
+      YieldComponent: -1, // Removed
+      Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
+    };
+  } else {
+    ReactTypeOfWork = {
+      CacheComponent: -1, // Doesn't exist yet
+      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,
+      HostHoistable: -1, // Doesn't exist yet
+      HostSingleton: -1, // Doesn't exist yet
+      HostText: 6,
+      IncompleteClassComponent: -1, // Doesn't exist yet
+      IncompleteFunctionComponent: -1, // Doesn't exist yet
+      IndeterminateComponent: 0,
+      LazyComponent: -1, // Doesn't exist yet
+      LegacyHiddenComponent: -1,
+      MemoComponent: -1, // Doesn't exist yet
+      Mode: 11,
+      OffscreenComponent: -1, // Experimental
+      Profiler: 15,
+      ScopeComponent: -1, // Experimental
+      SimpleMemoComponent: -1, // Doesn't exist yet
+      SuspenseComponent: 16,
+      SuspenseListComponent: -1, // Doesn't exist yet
+      TracingMarkerComponent: -1, // Doesn't exist yet
+      YieldComponent: 9,
+      Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
+    };
+  }
+  // **********************************************************
+  // End of copied code.
+  // **********************************************************
+
+  function getTypeSymbol(type: any): symbol | string | number {
+    const symbolOrNumber =
+      typeof type === 'object' && type !== null ? type.$$typeof : type;
+
+    return typeof symbolOrNumber === 'symbol'
+      ? symbolOrNumber.toString()
+      : symbolOrNumber;
+  }
+
+  const {
+    CacheComponent,
+    ClassComponent,
+    IncompleteClassComponent,
+    IncompleteFunctionComponent,
+    FunctionComponent,
+    IndeterminateComponent,
+    ForwardRef,
+    HostRoot,
+    HostHoistable,
+    HostSingleton,
+    HostComponent,
+    HostPortal,
+    HostText,
+    Fragment,
+    LazyComponent,
+    LegacyHiddenComponent,
+    MemoComponent,
+    OffscreenComponent,
+    Profiler,
+    ScopeComponent,
+    SimpleMemoComponent,
+    SuspenseComponent,
+    SuspenseListComponent,
+    TracingMarkerComponent,
+    Throw,
+    ViewTransitionComponent,
+    ActivityComponent,
+  } = ReactTypeOfWork;
+
+  function resolveFiberType(type: any): $FlowFixMe {
+    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,
+    shouldSkipForgetCheck: boolean = false,
+  ): string | null {
+    const {elementType, type, tag} = fiber;
+
+    let resolvedType = type;
+    if (typeof type === 'object' && type !== null) {
+      resolvedType = resolveFiberType(type);
+    }
+
+    let resolvedContext: any = null;
+    if (
+      !shouldSkipForgetCheck &&
+      // $FlowFixMe[incompatible-type] fiber.updateQueue is mixed
+      (fiber.updateQueue?.memoCache != null ||
+        (Array.isArray(fiber.memoizedState?.memoizedState) &&
+          fiber.memoizedState.memoizedState[0]?.[REACT_MEMO_CACHE_SENTINEL]) ||
+        fiber.memoizedState?.memoizedState?.[REACT_MEMO_CACHE_SENTINEL])
+    ) {
+      const displayNameWithoutForgetWrapper = getDisplayNameForFiber(
+        fiber,
+        true,
+      );
+      if (displayNameWithoutForgetWrapper == null) {
+        return null;
+      }
+
+      return `Forget(${displayNameWithoutForgetWrapper})`;
+    }
+
+    switch (tag) {
+      case ActivityComponent:
+        return 'Activity';
+      case CacheComponent:
+        return 'Cache';
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IncompleteFunctionComponent:
+      case FunctionComponent:
+      case IndeterminateComponent:
+        return getDisplayName(resolvedType);
+      case ForwardRef:
+        return getWrappedDisplayName(
+          elementType,
+          resolvedType,
+          'ForwardRef',
+          'Anonymous',
+        );
+      case HostRoot:
+        const fiberRoot = fiber.stateNode;
+        if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+          return fiberRoot._debugRootType;
+        }
+        return null;
+      case HostComponent:
+      case HostSingleton:
+      case HostHoistable:
+        return type;
+      case HostPortal:
+      case HostText:
+        return null;
+      case Fragment:
+        return 'Fragment';
+      case LazyComponent:
+        // This display name will not be user visible.
+        // Once a Lazy component loads its inner component, React replaces the tag and type.
+        // This display name will only show up in console logs when DevTools DEBUG mode is on.
+        return 'Lazy';
+      case MemoComponent:
+      case SimpleMemoComponent:
+        // Display name in React does not use `Memo` as a wrapper but fallback name.
+        return getWrappedDisplayName(
+          elementType,
+          resolvedType,
+          'Memo',
+          'Anonymous',
+        );
+      case SuspenseComponent:
+        return 'Suspense';
+      case LegacyHiddenComponent:
+        return 'LegacyHidden';
+      case OffscreenComponent:
+        return 'Offscreen';
+      case ScopeComponent:
+        return 'Scope';
+      case SuspenseListComponent:
+        return 'SuspenseList';
+      case Profiler:
+        return 'Profiler';
+      case TracingMarkerComponent:
+        return 'TracingMarker';
+      case ViewTransitionComponent:
+        return 'ViewTransition';
+      case Throw:
+        // This should really never be visible.
+        return 'Error';
+      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 PROVIDER_NUMBER:
+          case 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_NUMBER:
+          case CONTEXT_SYMBOL_STRING:
+          case SERVER_CONTEXT_SYMBOL_STRING:
+            if (
+              fiber.type._context === undefined &&
+              fiber.type.Provider === fiber.type
+            ) {
+              // In 19+, Context.Provider === Context, so this is a provider.
+              resolvedContext = fiber.type;
+              return `${resolvedContext.displayName || 'Context'}.Provider`;
+            }
+
+            // 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 CONSUMER_SYMBOL_STRING:
+            // 19+
+            resolvedContext = fiber.type._context;
+            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,
+    StrictModeBits,
+    SuspenseyImagesMode,
+  };
+}
+
+// All environment names we've seen so far. This lets us create a list of filters to apply.
+// This should ideally include env of filtered Components too so that you can add those as
+// filters at the same time as removing some other filter.
+const knownEnvironmentNames: Set<string> = new Set();
+
+// Map of FiberRoot to their root FiberInstance.
+const rootToFiberInstanceMap: Map<FiberRoot, FiberInstance> = new Map();
+
+// Map of id to FiberInstance or VirtualInstance.
+// This Map is used to e.g. get the display name for a Fiber or schedule an update,
+// operations that should be the same whether the current and work-in-progress Fiber is used.
+const idToDevToolsInstanceMap: Map<
+  FiberInstance['id'] | VirtualInstance['id'],
+  FiberInstance | VirtualInstance,
+> = new Map();
+
+let focusedActivityID: null | FiberInstance['id'] = null;
+let focusedActivity: null | Fiber = null;
+
+const idToSuspenseNodeMap: Map<FiberInstance['id'], SuspenseNode> = new Map();
+
+// Map of canonical HostInstances to the nearest parent DevToolsInstance.
+const publicInstanceToDevToolsInstanceMap: Map<HostInstance, DevToolsInstance> =
+  new Map();
+// Map of resource DOM nodes to all the nearest DevToolsInstances that depend on it.
+const hostResourceToDevToolsInstanceMap: Map<
+  HostInstance,
+  Set<DevToolsInstance>,
+> = new Map();
+
+// Ideally, this should be injected from Reconciler config
+function getPublicInstance(instance: HostInstance): HostInstance {
+  // Typically the PublicInstance and HostInstance is the same thing but not in Fabric.
+  // So we need to detect this and use that as the public instance.
+
+  // React Native. Modern. Fabric.
+  if (typeof instance === 'object' && instance !== null) {
+    if (typeof instance.canonical === 'object' && instance.canonical !== null) {
+      if (
+        typeof instance.canonical.publicInstance === 'object' &&
+        instance.canonical.publicInstance !== null
+      ) {
+        return instance.canonical.publicInstance;
+      }
+    }
+
+    // React Native. Legacy. Paper.
+    if (typeof instance._nativeTag === 'number') {
+      return instance._nativeTag;
+    }
+  }
+
+  // React Web. Usually a DOM element.
+  return instance;
+}
+
+function getNativeTag(instance: HostInstance): number | null {
+  if (typeof instance !== 'object' || instance === null) {
+    return null;
+  }
+
+  // Modern. Fabric.
+  if (
+    instance.canonical != null &&
+    typeof instance.canonical.nativeTag === 'number'
+  ) {
+    return instance.canonical.nativeTag;
+  }
+
+  // Legacy.  Paper.
+  if (typeof instance._nativeTag === 'number') {
+    return instance._nativeTag;
+  }
+
+  return null;
+}
+
+function aquireHostInstance(
+  nearestInstance: DevToolsInstance,
+  hostInstance: HostInstance,
+): void {
+  const publicInstance = getPublicInstance(hostInstance);
+  publicInstanceToDevToolsInstanceMap.set(publicInstance, nearestInstance);
+}
+
+function releaseHostInstance(
+  nearestInstance: DevToolsInstance,
+  hostInstance: HostInstance,
+): void {
+  const publicInstance = getPublicInstance(hostInstance);
+  if (
+    publicInstanceToDevToolsInstanceMap.get(publicInstance) === nearestInstance
+  ) {
+    publicInstanceToDevToolsInstanceMap.delete(publicInstance);
+  }
+}
+
+function aquireHostResource(
+  nearestInstance: DevToolsInstance,
+  resource: ?{instance?: HostInstance},
+): void {
+  const hostInstance = resource && resource.instance;
+  if (hostInstance) {
+    const publicInstance = getPublicInstance(hostInstance);
+    let resourceInstances =
+      hostResourceToDevToolsInstanceMap.get(publicInstance);
+    if (resourceInstances === undefined) {
+      resourceInstances = new Set();
+      hostResourceToDevToolsInstanceMap.set(publicInstance, resourceInstances);
+      // Store the first match in the main map for quick access when selecting DOM node.
+      publicInstanceToDevToolsInstanceMap.set(publicInstance, nearestInstance);
+    }
+    resourceInstances.add(nearestInstance);
+  }
+}
+
+function releaseHostResource(
+  nearestInstance: DevToolsInstance,
+  resource: ?{instance?: HostInstance},
+): void {
+  const hostInstance = resource && resource.instance;
+  if (hostInstance) {
+    const publicInstance = getPublicInstance(hostInstance);
+    const resourceInstances =
+      hostResourceToDevToolsInstanceMap.get(publicInstance);
+    if (resourceInstances !== undefined) {
+      resourceInstances.delete(nearestInstance);
+      if (resourceInstances.size === 0) {
+        hostResourceToDevToolsInstanceMap.delete(publicInstance);
+        publicInstanceToDevToolsInstanceMap.delete(publicInstance);
+      } else if (
+        publicInstanceToDevToolsInstanceMap.get(publicInstance) ===
+        nearestInstance
+      ) {
+        // This was the first one. Store the next first one in the main map for easy access.
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const firstInstance of resourceInstances) {
+          publicInstanceToDevToolsInstanceMap.set(
+            firstInstance,
+            nearestInstance,
+          );
+          break;
+        }
+      }
+    }
+  }
+}
+
+export function attach(
+  hook: DevToolsHook,
+  rendererID: number,
+  renderer: ReactRenderer,
+  global: Object,
+  shouldStartProfilingNow: boolean,
+  profilingSettings: ProfilingSettings,
+): RendererInterface {
+  // Newer versions of the reconciler package also specific reconciler version.
+  // If that version number is present, use it.
+  // Third party renderer versions may not match the reconciler version,
+  // and the latter is what's important in terms of tags and symbols.
+  const version = renderer.reconcilerVersion || renderer.version;
+
+  const {
+    getDisplayNameForFiber,
+    getTypeSymbol,
+    ReactPriorityLevels,
+    ReactTypeOfWork,
+    StrictModeBits,
+    SuspenseyImagesMode,
+  } = getInternalReactConstants(version);
+  const {
+    ActivityComponent,
+    ClassComponent,
+    ContextConsumer,
+    DehydratedSuspenseComponent,
+    ForwardRef,
+    Fragment,
+    FunctionComponent,
+    HostRoot,
+    HostHoistable,
+    HostSingleton,
+    HostPortal,
+    HostComponent,
+    HostText,
+    IncompleteClassComponent,
+    IncompleteFunctionComponent,
+    IndeterminateComponent,
+    LegacyHiddenComponent,
+    MemoComponent,
+    OffscreenComponent,
+    SimpleMemoComponent,
+    SuspenseComponent,
+    SuspenseListComponent,
+    TracingMarkerComponent,
+    Throw,
+    ViewTransitionComponent,
+  } = ReactTypeOfWork;
+  const {
+    ImmediatePriority,
+    UserBlockingPriority,
+    NormalPriority,
+    LowPriority,
+    IdlePriority,
+    NoPriority,
+  } = ReactPriorityLevels;
+
+  const {
+    getLaneLabelMap,
+    injectProfilingHooks,
+    overrideHookState,
+    overrideHookStateDeletePath,
+    overrideHookStateRenamePath,
+    overrideProps,
+    overridePropsDeletePath,
+    overridePropsRenamePath,
+    scheduleRefresh,
+    setErrorHandler,
+    setSuspenseHandler,
+    scheduleUpdate,
+    scheduleRetry,
+    getCurrentFiber,
+  } = renderer;
+  const supportsTogglingError =
+    typeof setErrorHandler === 'function' &&
+    typeof scheduleUpdate === 'function';
+  const supportsTogglingSuspense =
+    typeof setSuspenseHandler === 'function' &&
+    typeof scheduleUpdate === 'function';
+  const supportsPerformanceTracks = gte(version, '19.2.0');
+
+  if (typeof scheduleRefresh === 'function') {
+    // When Fast Refresh updates a component, the frontend may need to purge cached information.
+    // For example, ASTs cached for the component (for named hooks) may no longer be valid.
+    // Send a signal to the frontend to purge this cached information.
+    // The "fastRefreshScheduled" dispatched is global (not Fiber or even Renderer specific).
+    // This is less effecient since it means the front-end will need to purge the entire cache,
+    // but this is probably an okay trade off in order to reduce coupling between the DevTools and Fast Refresh.
+    renderer.scheduleRefresh = (...args) => {
+      try {
+        hook.emit('fastRefreshScheduled');
+      } finally {
+        return scheduleRefresh(...args);
+      }
+    };
+  }
+
+  let getTimelineData: null | GetTimelineData = null;
+  let toggleProfilingStatus: null | ToggleProfilingStatus = null;
+  if (typeof injectProfilingHooks === 'function') {
+    const response = createProfilingHooks({
+      getDisplayNameForFiber,
+      getIsProfiling: () => isProfiling,
+      getLaneLabelMap,
+      currentDispatcherRef: getDispatcherRef(renderer),
+      workTagMap: ReactTypeOfWork,
+      reactVersion: version,
+    });
+
+    // Pass the Profiling hooks to the reconciler for it to call during render.
+    injectProfilingHooks(response.profilingHooks);
+
+    // Hang onto this toggle so we can notify the external methods of profiling status changes.
+    getTimelineData = response.getTimelineData;
+    toggleProfilingStatus = response.toggleProfilingStatus;
+  }
+
+  type ComponentLogs = {
+    errors: Map<string, number>,
+    errorsCount: number,
+    warnings: Map<string, number>,
+    warningsCount: number,
+  };
+  // Tracks Errors/Warnings logs added to a Fiber. They are added before the commit and get
+  // picked up a FiberInstance. This keeps it around as long as the Fiber is alive which
+  // lets the Fiber get reparented/remounted and still observe the previous errors/warnings.
+  // Unless we explicitly clear the logs from a Fiber.
+  const fiberToComponentLogsMap: WeakMap<Fiber, ComponentLogs> = new WeakMap();
+  // Tracks whether we've performed a commit since the last log. This is used to know
+  // whether we received any new logs between the commit and post commit phases. I.e.
+  // if any passive effects called console.warn / console.error.
+  let needsToFlushComponentLogs = false;
+
+  function bruteForceFlushErrorsAndWarnings() {
+    // Refresh error/warning count for all mounted unfiltered Fibers.
+    let hasChanges = false;
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const devtoolsInstance of idToDevToolsInstanceMap.values()) {
+      if (devtoolsInstance.kind === FIBER_INSTANCE) {
+        const fiber = devtoolsInstance.data;
+        const componentLogsEntry = fiberToComponentLogsMap.get(fiber);
+        const changed = recordConsoleLogs(devtoolsInstance, componentLogsEntry);
+        if (changed) {
+          hasChanges = true;
+          updateMostRecentlyInspectedElementIfNecessary(devtoolsInstance.id);
+        }
+      } else {
+        // Virtual Instances cannot log in passive effects and so never appear here.
+      }
+    }
+    if (hasChanges) {
+      flushPendingEvents();
+    }
+  }
+
+  function clearErrorsAndWarnings() {
+    // Note, this only clears logs for Fibers that have instances. If they're filtered
+    // and then mount, the logs are there. Ensuring we only clear what you've seen.
+    // If we wanted to clear the whole set, we'd replace fiberToComponentLogsMap with a
+    // new WeakMap. It's unclear whether we should clear componentInfoToComponentLogsMap
+    // since it's shared by other renderers but presumably it would.
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const devtoolsInstance of idToDevToolsInstanceMap.values()) {
+      if (devtoolsInstance.kind === FIBER_INSTANCE) {
+        const fiber = devtoolsInstance.data;
+        fiberToComponentLogsMap.delete(fiber);
+        if (fiber.alternate) {
+          fiberToComponentLogsMap.delete(fiber.alternate);
+        }
+      } else {
+        componentInfoToComponentLogsMap.delete(devtoolsInstance.data);
+      }
+      const changed = recordConsoleLogs(devtoolsInstance, undefined);
+      if (changed) {
+        updateMostRecentlyInspectedElementIfNecessary(devtoolsInstance.id);
+      }
+    }
+    flushPendingEvents();
+  }
+
+  function clearConsoleLogsHelper(instanceID: number, type: 'error' | 'warn') {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(instanceID);
+    if (devtoolsInstance !== undefined) {
+      let componentLogsEntry;
+      if (devtoolsInstance.kind === FIBER_INSTANCE) {
+        const fiber = devtoolsInstance.data;
+        componentLogsEntry = fiberToComponentLogsMap.get(fiber);
+
+        if (componentLogsEntry === undefined && fiber.alternate !== null) {
+          componentLogsEntry = fiberToComponentLogsMap.get(fiber.alternate);
+        }
+      } else {
+        const componentInfo = devtoolsInstance.data;
+        componentLogsEntry = componentInfoToComponentLogsMap.get(componentInfo);
+      }
+      if (componentLogsEntry !== undefined) {
+        if (type === 'error') {
+          componentLogsEntry.errors.clear();
+          componentLogsEntry.errorsCount = 0;
+        } else {
+          componentLogsEntry.warnings.clear();
+          componentLogsEntry.warningsCount = 0;
+        }
+        const changed = recordConsoleLogs(devtoolsInstance, componentLogsEntry);
+        if (changed) {
+          flushPendingEvents();
+          updateMostRecentlyInspectedElementIfNecessary(devtoolsInstance.id);
+        }
+      }
+    }
+  }
+
+  function clearErrorsForElementID(instanceID: number) {
+    clearConsoleLogsHelper(instanceID, 'error');
+  }
+
+  function clearWarningsForElementID(instanceID: number) {
+    clearConsoleLogsHelper(instanceID, 'warn');
+  }
+
+  function updateMostRecentlyInspectedElementIfNecessary(
+    fiberID: number,
+  ): void {
+    if (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id === fiberID
+    ) {
+      hasElementUpdatedSinceLastInspected = true;
+    }
+  }
+
+  function getComponentStack(
+    topFrame: Error,
+  ): null | {enableOwnerStacks: boolean, componentStack: string} {
+    if (getCurrentFiber == null) {
+      // Expected this to be part of the renderer. Ignore.
+      return null;
+    }
+    const current = getCurrentFiber();
+    if (current === null) {
+      // Outside of our render scope.
+      return null;
+    }
+
+    if (supportsConsoleTasks(current)) {
+      // This will be handled natively by console.createTask. No need for
+      // DevTools to add it.
+      return null;
+    }
+
+    const dispatcherRef = getDispatcherRef(renderer);
+    if (dispatcherRef === undefined) {
+      return null;
+    }
+
+    const enableOwnerStacks = supportsOwnerStacks(current);
+    let componentStack = '';
+    if (enableOwnerStacks) {
+      // Prefix the owner stack with the current stack. I.e. what called
+      // console.error. While this will also be part of the native stack,
+      // it is hidden and not presented alongside this argument so we print
+      // them all together.
+      const topStackFrames = formatOwnerStack(topFrame);
+      if (topStackFrames) {
+        componentStack += '\n' + topStackFrames;
+      }
+      componentStack += getOwnerStackByFiberInDev(
+        ReactTypeOfWork,
+        current,
+        dispatcherRef,
+      );
+    } else {
+      componentStack = getStackByFiberInDevAndProd(
+        ReactTypeOfWork,
+        current,
+        dispatcherRef,
+      );
+    }
+    return {enableOwnerStacks, componentStack};
+  }
+
+  // Called when an error or warning is logged during render, commit, or passive (including unmount functions).
+  function onErrorOrWarning(
+    type: 'error' | 'warn',
+    args: $ReadOnlyArray<any>,
+  ): void {
+    if (getCurrentFiber == null) {
+      // Expected this to be part of the renderer. Ignore.
+      return;
+    }
+    const fiber = getCurrentFiber();
+    if (fiber === null) {
+      // Outside of our render scope.
+      return;
+    }
+    if (type === 'error') {
+      // if this is an error simulated by us to trigger error boundary, ignore
+      if (
+        forceErrorForFibers.get(fiber) === true ||
+        (fiber.alternate !== null &&
+          forceErrorForFibers.get(fiber.alternate) === true)
+      ) {
+        return;
+      }
+    }
+
+    // We can't really use this message as a unique key, since we can't distinguish
+    // different objects in this implementation. We have to delegate displaying of the objects
+    // to the environment, the browser console, for example, so this is why this should be kept
+    // as an array of arguments, instead of the plain string.
+    // [Warning: %o, {...}] and [Warning: %o, {...}] will be considered as the same message,
+    // even if objects are different
+    const message = formatConsoleArgumentsToSingleString(...args);
+
+    // Track the warning/error for later.
+    let componentLogsEntry = fiberToComponentLogsMap.get(fiber);
+    if (componentLogsEntry === undefined && fiber.alternate !== null) {
+      componentLogsEntry = fiberToComponentLogsMap.get(fiber.alternate);
+      if (componentLogsEntry !== undefined) {
+        // Use the same set for both Fibers.
+        fiberToComponentLogsMap.set(fiber, componentLogsEntry);
+      }
+    }
+    if (componentLogsEntry === undefined) {
+      componentLogsEntry = {
+        errors: new Map(),
+        errorsCount: 0 as number,
+        warnings: new Map(),
+        warningsCount: 0 as number,
+      };
+      fiberToComponentLogsMap.set(fiber, componentLogsEntry);
+    }
+
+    const messageMap =
+      type === 'error'
+        ? componentLogsEntry.errors
+        : componentLogsEntry.warnings;
+    const count = messageMap.get(message) || 0;
+    messageMap.set(message, count + 1);
+    if (type === 'error') {
+      componentLogsEntry.errorsCount++;
+    } else {
+      componentLogsEntry.warningsCount++;
+    }
+
+    // The changes will be flushed later when we commit.
+
+    // If the log happened in a passive effect, then this happens after we've
+    // already committed the new tree so the change won't show up until we rerender
+    // that component again. We need to visit a Component with passive effects in
+    // handlePostCommitFiberRoot again to ensure that we flush the changes after passive.
+    needsToFlushComponentLogs = true;
+  }
+
+  function debug(
+    name: string,
+    instance: DevToolsInstance,
+    parentInstance: null | DevToolsInstance,
+    extraString: string = '',
+  ): void {
+    if (__DEBUG__) {
+      const displayName =
+        instance.kind === VIRTUAL_INSTANCE
+          ? instance.data.name || 'null'
+          : instance.data.tag +
+            ':' +
+            (getDisplayNameForFiber(instance.data) || 'null');
+
+      const maybeID =
+        instance.kind === FILTERED_FIBER_INSTANCE ? '<no id>' : instance.id;
+
+      const parentDisplayName =
+        parentInstance === null
+          ? ''
+          : parentInstance.kind === VIRTUAL_INSTANCE
+            ? parentInstance.data.name || 'null'
+            : parentInstance.data.tag +
+              ':' +
+              (getDisplayNameForFiber(parentInstance.data) || 'null');
+
+      const maybeParentID =
+        parentInstance === null ||
+        parentInstance.kind === FILTERED_FIBER_INSTANCE
+          ? '<no id>'
+          : parentInstance.id;
+
+      console.groupCollapsed(
+        `[renderer] %c${name} %c${displayName} (${maybeID}) %c${
+          parentInstance ? `${parentDisplayName} (${maybeParentID})` : ''
+        } %c${extraString}`,
+        'color: red; font-weight: bold;',
+        'color: blue;',
+        'color: purple;',
+        'color: black;',
+      );
+      console.log(new Error().stack.split('\n').slice(1).join('\n'));
+      console.groupEnd();
+    }
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  function debugTree(instance: DevToolsInstance, indent: number = 0) {
+    if (__DEBUG__) {
+      const name =
+        (instance.kind !== VIRTUAL_INSTANCE
+          ? getDisplayNameForFiber(instance.data)
+          : instance.data.name) || '';
+      console.log(
+        '  '.repeat(indent) +
+          '- ' +
+          (instance.kind === FILTERED_FIBER_INSTANCE ? 0 : instance.id) +
+          ' (' +
+          name +
+          ')',
+        'parent',
+        instance.parent === null
+          ? ' '
+          : instance.parent.kind === FILTERED_FIBER_INSTANCE
+            ? 0
+            : instance.parent.id,
+        'next',
+        instance.nextSibling === null ? ' ' : instance.nextSibling.id,
+      );
+      let child = instance.firstChild;
+      while (child !== null) {
+        debugTree(child, indent + 1);
+        child = child.nextSibling;
+      }
+    }
+  }
+
+  // Configurable Components tree filters.
+  const hideElementsWithDisplayNames: Set<RegExp> = new Set();
+  const hideElementsWithPaths: Set<RegExp> = new Set();
+  const hideElementsWithTypes: Set<ElementType> = new Set();
+  const hideElementsWithEnvs: Set<string> = new Set();
+  let isInFocusedActivity: boolean = true;
+
+  // Highlight updates
+  let traceUpdatesEnabled: boolean = false;
+  const traceUpdatesForNodes: Set<HostInstance> = new Set();
+
+  function applyComponentFilters(
+    componentFilters: Array<ComponentFilter>,
+    nextActivitySlice: null | Fiber,
+  ) {
+    hideElementsWithTypes.clear();
+    hideElementsWithDisplayNames.clear();
+    hideElementsWithPaths.clear();
+    hideElementsWithEnvs.clear();
+    const previousFocusedActivityID = focusedActivityID;
+    focusedActivityID = null;
+    focusedActivity = null;
+    // Consider everything in the slice by default
+    isInFocusedActivity = true;
+
+    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;
+        case ComponentFilterEnvironmentName:
+          hideElementsWithEnvs.add(componentFilter.value);
+          break;
+        case ComponentFilterActivitySlice:
+          if (
+            nextActivitySlice !== null &&
+            nextActivitySlice.tag === ActivityComponent
+          ) {
+            focusedActivity = nextActivitySlice;
+            isInFocusedActivity = false;
+            if (componentFilter.rendererID !== rendererID) {
+              // We filtered an Activity from another renderer.
+              // We need to restore the instance ID since we won't be mounting it
+              // in this renderer.
+              focusedActivityID = previousFocusedActivityID;
+            }
+          } else {
+            // We're not filtering by activity slice after all.
+            // Don't mark the filter as disabled here.
+            // Otherwise updateComponentFilters() will think no enabled filter was changed.
+          }
+          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) {
+    const restoredComponentFilters: Array<ComponentFilter> =
+      persistableComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
+    applyComponentFilters(restoredComponentFilters, null);
+  } 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(), null);
+  }
+
+  // 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 operations 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');
+    }
+
+    const previousForcedFallbacks =
+      forceFallbackForFibers.size > 0 ? new Set(forceFallbackForFibers) : null;
+    const previousForcedErrors =
+      forceErrorForFibers.size > 0 ? new Map(forceErrorForFibers) : null;
+
+    // The ID will be based on the old tree. We need to find the Fiber based on
+    // that ID before we unmount everything. We set the activity slice ID once
+    // we mount it again.
+    let nextFocusedActivity: null | Fiber = null;
+    let focusedActivityFilter: null | ActivitySliceFilter = null;
+    for (let i = 0; i < componentFilters.length; i++) {
+      const filter = componentFilters[i];
+      if (filter.type === ComponentFilterActivitySlice && filter.isEnabled) {
+        focusedActivityFilter = filter;
+        const instance = idToDevToolsInstanceMap.get(filter.activityID);
+        if (instance !== undefined && instance.kind === FIBER_INSTANCE) {
+          nextFocusedActivity = instance.data;
+        }
+      }
+    }
+
+    // Recursively unmount all roots.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      const rootInstance = rootToFiberInstanceMap.get(root);
+      if (rootInstance === undefined) {
+        throw new Error(
+          'Expected the root instance to already exist when applying filters',
+        );
+      }
+      currentRoot = rootInstance;
+      unmountInstanceRecursively(rootInstance);
+      rootToFiberInstanceMap.delete(root);
+      currentRoot = (null: any);
+    });
+
+    if (
+      nextFocusedActivity !== focusedActivity &&
+      (focusedActivityFilter === null ||
+        focusedActivityFilter.rendererID === rendererID)
+    ) {
+      // When we find the applied instance during mount we will send the actual ID.
+      // Otherwise 0 will indicate that we unfocused the activity slice.
+      pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);
+      pushOperation(0);
+    }
+    applyComponentFilters(componentFilters, nextFocusedActivity);
+
+    // Reset pseudo counters so that new path selections will be persisted.
+    rootDisplayNameCounter.clear();
+
+    // We just cleared all the forced states. Schedule updates on the affected Fibers
+    // so that we get their initial states again according to the new filters.
+    if (typeof scheduleUpdate === 'function') {
+      if (previousForcedFallbacks !== null) {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const fiber of previousForcedFallbacks) {
+          if (typeof scheduleRetry === 'function') {
+            scheduleRetry(fiber);
+          } else {
+            scheduleUpdate(fiber);
+          }
+        }
+      }
+      if (
+        previousForcedErrors !== null &&
+        typeof setErrorHandler === 'function'
+      ) {
+        // Unlike for Suspense, disabling the forced error state requires setting
+        // the status to false first. `shouldErrorFiberAccordingToMap` will clear
+        // the Fibers later.
+        setErrorHandler(shouldErrorFiberAccordingToMap);
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const [fiber, shouldError] of previousForcedErrors) {
+          forceErrorForFibers.set(fiber, false);
+          if (shouldError) {
+            if (typeof scheduleRetry === 'function') {
+              scheduleRetry(fiber);
+            } else {
+              scheduleUpdate(fiber);
+            }
+          }
+        }
+      }
+    }
+
+    // Recursively re-mount all roots with new filter criteria applied.
+    hook.getFiberRoots(rendererID).forEach(root => {
+      const current = root.current;
+      const newRoot = createFiberInstance(current);
+      rootToFiberInstanceMap.set(root, newRoot);
+      idToDevToolsInstanceMap.set(newRoot.id, newRoot);
+
+      // Before the traversals, remember to start tracking
+      // our path in case we have selection to restore.
+      if (trackedPath !== null) {
+        mightBeOnTrackedPath = true;
+      }
+
+      currentRoot = newRoot;
+      setRootPseudoKey(currentRoot.id, root.current);
+      mountFiberRecursively(root.current, false);
+      currentRoot = (null: any);
+    });
+
+    // We need to write back the new ID for the focused Fiber.
+    // Otherwise subsequent filter applications will try to focus based on the old ID.
+    // This is also relevant to filter across renderers.
+    if (focusedActivityFilter !== null && focusedActivityID !== null) {
+      focusedActivityFilter.activityID = focusedActivityID;
+    }
+
+    flushPendingEvents();
+
+    needsToFlushComponentLogs = false;
+  }
+
+  function getEnvironmentNames(): Array<string> {
+    return Array.from(knownEnvironmentNames);
+  }
+
+  function isFiberHydrated(fiber: Fiber): boolean {
+    if (OffscreenComponent === -1) {
+      throw new Error('not implemented for legacy suspense');
+    }
+    switch (fiber.tag) {
+      case HostRoot:
+        const rootState = fiber.memoizedState;
+        return !rootState.isDehydrated;
+      case SuspenseComponent:
+        const suspenseState = fiber.memoizedState;
+        return suspenseState === null || suspenseState.dehydrated === null;
+      default:
+        throw new Error('not implemented for work tag ' + fiber.tag);
+    }
+  }
+
+  function shouldFilterVirtual(
+    data: ReactComponentInfo,
+    secondaryEnv: null | string,
+  ): boolean {
+    if (!isInFocusedActivity) {
+      return true;
+    }
+
+    // For purposes of filtering Server Components are always Function Components.
+    // Environment will be used to filter Server vs Client.
+    // Technically they can be forwardRef and memo too but those filters will go away
+    // as those become just plain user space function components like any HoC.
+    if (hideElementsWithTypes.has(ElementTypeFunction)) {
+      return true;
+    }
+
+    if (hideElementsWithDisplayNames.size > 0) {
+      const displayName = data.name;
+      if (displayName != null) {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const displayNameRegExp of hideElementsWithDisplayNames) {
+          if (displayNameRegExp.test(displayName)) {
+            return true;
+          }
+        }
+      }
+    }
+
+    if (
+      (data.env == null || hideElementsWithEnvs.has(data.env)) &&
+      (secondaryEnv === null || hideElementsWithEnvs.has(secondaryEnv))
+    ) {
+      // If a Component has two environments, you have to filter both for it not to appear.
+      return true;
+    }
+
+    return false;
+  }
+
+  // NOTICE Keep in sync with get*ForFiber methods
+  function shouldFilterFiber(fiber: Fiber): boolean {
+    const {tag, type, key} = fiber;
+
+    // It is never valid to filter the root element.
+    if (tag !== HostRoot && !isInFocusedActivity) {
+      return true;
+    }
+
+    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 LegacyHiddenComponent:
+      case OffscreenComponent:
+      case Throw:
+        return true;
+      case HostRoot:
+        // It is never valid to filter the root element.
+        return false;
+      case Fragment:
+        return key === null;
+      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 (const displayNameRegExp of hideElementsWithDisplayNames) {
+          if (displayNameRegExp.test(displayName)) {
+            return true;
+          }
+        }
+      }
+    }
+
+    if (hideElementsWithEnvs.has('Client')) {
+      // If we're filtering out the Client environment we should filter out all
+      // "Client Components". Technically that also includes the built-ins but
+      // since that doesn't actually include any additional code loading it's
+      // useful to not filter out the built-ins. Those can be filtered separately.
+      // There's no other way to filter out just Function components on the Client.
+      // Therefore, this only filters Class and Function components.
+      switch (tag) {
+        case ClassComponent:
+        case IncompleteClassComponent:
+        case IncompleteFunctionComponent:
+        case FunctionComponent:
+        case IndeterminateComponent:
+        case ForwardRef:
+        case MemoComponent:
+        case SimpleMemoComponent:
+          return true;
+      }
+    }
+
+    /* DISABLED: https://github.com/facebook/react/pull/28417
+    if (hideElementsWithPaths.size > 0) {
+      const source = getSourceForFiber(fiber);
+
+      if (source != null) {
+        const {fileName} = source;
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const 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 ActivityComponent:
+        return ElementTypeActivity;
+      case ClassComponent:
+      case IncompleteClassComponent:
+        return ElementTypeClass;
+      case IncompleteFunctionComponent:
+      case FunctionComponent:
+      case IndeterminateComponent:
+        return ElementTypeFunction;
+      case ForwardRef:
+        return ElementTypeForwardRef;
+      case HostRoot:
+        return ElementTypeRoot;
+      case HostComponent:
+      case HostHoistable:
+      case HostSingleton:
+        return ElementTypeHostComponent;
+      case HostPortal:
+      case HostText:
+      case Fragment:
+        return ElementTypeOtherOrUnknown;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        return ElementTypeMemo;
+      case SuspenseComponent:
+        return ElementTypeSuspense;
+      case SuspenseListComponent:
+        return ElementTypeSuspenseList;
+      case TracingMarkerComponent:
+        return ElementTypeTracingMarker;
+      case ViewTransitionComponent:
+        return ElementTypeViewTransition;
+      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 PROVIDER_NUMBER:
+          case PROVIDER_SYMBOL_STRING:
+            return ElementTypeContext;
+          case CONTEXT_NUMBER:
+          case CONTEXT_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;
+        }
+    }
+  }
+
+  // When a mount or update is in progress, this value tracks the root that is being operated on.
+  let currentRoot: FiberInstance = (null: any);
+
+  // Removes a Fiber (and its alternate) from the Maps used to track their id.
+  // This method should always be called when a Fiber is unmounting.
+  function untrackFiber(nearestInstance: DevToolsInstance, fiber: Fiber) {
+    if (forceErrorForFibers.size > 0) {
+      forceErrorForFibers.delete(fiber);
+      if (fiber.alternate) {
+        forceErrorForFibers.delete(fiber.alternate);
+      }
+      if (forceErrorForFibers.size === 0 && setErrorHandler != null) {
+        setErrorHandler(shouldErrorFiberAlwaysNull);
+      }
+    }
+
+    if (forceFallbackForFibers.size > 0) {
+      forceFallbackForFibers.delete(fiber);
+      if (fiber.alternate) {
+        forceFallbackForFibers.delete(fiber.alternate);
+      }
+      if (forceFallbackForFibers.size === 0 && setSuspenseHandler != null) {
+        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+      }
+    }
+
+    // TODO: Consider using a WeakMap instead. The only thing where that doesn't work
+    // is React Native Paper which tracks tags but that support is eventually going away
+    // and can use the old findFiberByHostInstance strategy.
+
+    if (fiber.tag === HostHoistable) {
+      releaseHostResource(nearestInstance, fiber.memoizedState);
+    } else if (
+      fiber.tag === HostComponent ||
+      fiber.tag === HostText ||
+      fiber.tag === HostSingleton
+    ) {
+      releaseHostInstance(nearestInstance, fiber.stateNode);
+    }
+
+    // Recursively clean up any filtered Fibers below this one as well since
+    // we won't recordUnmount on those.
+    for (let child = fiber.child; child !== null; child = child.sibling) {
+      if (shouldFilterFiber(child)) {
+        untrackFiber(nearestInstance, child);
+      }
+    }
+  }
+
+  function getChangeDescription(
+    prevFiber: Fiber | null,
+    nextFiber: Fiber,
+  ): ChangeDescription | null {
+    switch (nextFiber.tag) {
+      case ClassComponent:
+        if (prevFiber === null) {
+          return {
+            context: null,
+            didHooksChange: false,
+            isFirstMount: true,
+            props: null,
+            state: null,
+          };
+        } else {
+          const data: ChangeDescription = {
+            context: getContextChanged(prevFiber, nextFiber),
+            didHooksChange: false,
+            isFirstMount: false,
+            props: getChangedKeys(
+              prevFiber.memoizedProps,
+              nextFiber.memoizedProps,
+            ),
+            state: getChangedKeys(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState,
+            ),
+          };
+          return data;
+        }
+      case IncompleteFunctionComponent:
+      case FunctionComponent:
+      case IndeterminateComponent:
+      case ForwardRef:
+      case MemoComponent:
+      case SimpleMemoComponent:
+        if (prevFiber === null) {
+          return {
+            context: null,
+            didHooksChange: false,
+            isFirstMount: true,
+            props: null,
+            state: null,
+          };
+        } else {
+          const prevHooks = inspectHooks(prevFiber);
+          const nextHooks = inspectHooks(nextFiber);
+          const indices = getChangedHooksIndices(prevHooks, nextHooks);
+          const data: ChangeDescription = {
+            context: getContextChanged(prevFiber, nextFiber),
+            didHooksChange: indices !== null && indices.length > 0,
+            isFirstMount: false,
+            props: getChangedKeys(
+              prevFiber.memoizedProps,
+              nextFiber.memoizedProps,
+            ),
+            state: null,
+            hooks: indices,
+          };
+          // Only traverse the hooks list once, depending on what info we're returning.
+          return data;
+        }
+      default:
+        return null;
+    }
+  }
+
+  function getContextChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
+    let prevContext =
+      prevFiber.dependencies && prevFiber.dependencies.firstContext;
+    let nextContext =
+      nextFiber.dependencies && nextFiber.dependencies.firstContext;
+
+    while (prevContext && nextContext) {
+      // Note this only works for versions of React that support this key (e.v. 18+)
+      // For older versions, there's no good way to read the current context value after render has completed.
+      // This is because React maintains a stack of context values during render,
+      // but by the time DevTools is called, render has finished and the stack is empty.
+      if (prevContext.context !== nextContext.context) {
+        // If the order of context has changed, then the later context values might have
+        // changed too but the main reason it rerendered was earlier. Either an earlier
+        // context changed value but then we would have exited already. If we end up here
+        // it's because a state or props change caused the order of contexts used to change.
+        // So the main cause is not the contexts themselves.
+        return false;
+      }
+      if (!is(prevContext.memoizedValue, nextContext.memoizedValue)) {
+        return true;
+      }
+
+      prevContext = prevContext.next;
+      nextContext = nextContext.next;
+    }
+    return false;
+  }
+
+  function didStatefulHookChange(prev: HooksNode, next: HooksNode): boolean {
+    // Detect the shape of useState() / useReducer() / useTransition() / useSyncExternalStore() / useActionState()
+    const isStatefulHook =
+      prev.isStateEditable === true ||
+      prev.name === 'SyncExternalStore' ||
+      prev.name === 'Transition' ||
+      prev.name === 'ActionState' ||
+      prev.name === 'FormState';
+
+    // Compare the values to see if they changed
+    if (isStatefulHook) {
+      return prev.value !== next.value;
+    }
+
+    return false;
+  }
+
+  function getChangedHooksIndices(
+    prevHooks: HooksTree | null,
+    nextHooks: HooksTree | null,
+  ): null | Array<number> {
+    if (prevHooks == null || nextHooks == null) {
+      return null;
+    }
+
+    const indices: Array<number> = [];
+    let index = 0;
+
+    function traverse(prevTree: HooksTree, nextTree: HooksTree): void {
+      for (let i = 0; i < prevTree.length; i++) {
+        const prevHook = prevTree[i];
+        const nextHook = nextTree[i];
+
+        if (prevHook.subHooks.length > 0 && nextHook.subHooks.length > 0) {
+          traverse(prevHook.subHooks, nextHook.subHooks);
+          continue;
+        }
+
+        if (didStatefulHookChange(prevHook, nextHook)) {
+          indices.push(index);
+        }
+
+        index++;
+      }
+    }
+
+    traverse(prevHooks, nextHooks);
+    return indices;
+  }
+
+  function getChangedKeys(prev: any, next: any): null | Array<string> {
+    if (prev == null || next == null) {
+      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 (const key of keys) {
+      if (prev[key] !== next[key]) {
+        changedKeys.push(key);
+      }
+    }
+
+    return changedKeys;
+  }
+
+  function didFiberRender(prevFiber: Fiber, nextFiber: Fiber): boolean {
+    switch (nextFiber.tag) {
+      case ClassComponent:
+      case FunctionComponent:
+      case ContextConsumer:
+      case MemoComponent:
+      case SimpleMemoComponent:
+      case ForwardRef:
+        // For types that execute user code, we check PerformedWork effect.
+        // We don't reflect bailouts (either referential or sCU) in DevTools.
+        // TODO: This flag is a leaked implementation detail. Once we start
+        // releasing DevTools in lockstep with React, we should import a
+        // function from the reconciler instead.
+        const PerformedWork = 0b000000000000000000000000001;
+        return (getFiberFlags(nextFiber) & 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
+        );
+    }
+  }
+
+  type OperationsArray = Array<number>;
+
+  type StringTableEntry = {
+    encodedString: Array<number>,
+    id: number,
+  };
+
+  const pendingOperations: OperationsArray = [];
+  const pendingRealUnmountedIDs: Array<FiberInstance['id']> = [];
+  const pendingRealUnmountedSuspenseIDs: Array<FiberInstance['id']> = [];
+  const pendingSuspenderChanges: Set<FiberInstance['id']> = new Set();
+  let pendingOperationsQueue: Array<OperationsArray> | null = [];
+  const pendingStringTable: Map<string, StringTableEntry> = new Map();
+  let pendingStringTableLength: number = 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 shouldBailoutWithPendingOperations() {
+    if (isProfiling) {
+      if (
+        currentCommitProfilingMetadata != null &&
+        currentCommitProfilingMetadata.durations.length > 0
+      ) {
+        return false;
+      }
+    }
+
+    return (
+      pendingOperations.length === 0 &&
+      pendingRealUnmountedIDs.length === 0 &&
+      pendingRealUnmountedSuspenseIDs.length === 0 &&
+      pendingSuspenderChanges.size === 0
+    );
+  }
+
+  function flushOrQueueOperations(operations: OperationsArray): void {
+    if (shouldBailoutWithPendingOperations()) {
+      return;
+    }
+
+    if (pendingOperationsQueue !== null) {
+      pendingOperationsQueue.push(operations);
+    } else {
+      hook.emit('operations', operations);
+    }
+  }
+
+  function recordConsoleLogs(
+    instance: FiberInstance | VirtualInstance,
+    componentLogsEntry: void | ComponentLogs,
+  ): boolean {
+    if (componentLogsEntry === undefined) {
+      if (instance.logCount === 0) {
+        // Nothing has changed.
+        return false;
+      }
+      // Reset to zero.
+      instance.logCount = 0;
+      pushOperation(TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS);
+      pushOperation(instance.id);
+      pushOperation(0);
+      pushOperation(0);
+      return true;
+    } else {
+      const totalCount =
+        componentLogsEntry.errorsCount + componentLogsEntry.warningsCount;
+      if (instance.logCount === totalCount) {
+        // Nothing has changed.
+        return false;
+      }
+      // Update counts.
+      instance.logCount = totalCount;
+      pushOperation(TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS);
+      pushOperation(instance.id);
+      pushOperation(componentLogsEntry.errorsCount);
+      pushOperation(componentLogsEntry.warningsCount);
+      return true;
+    }
+  }
+
+  function flushPendingEvents(): void {
+    if (shouldBailoutWithPendingOperations()) {
+      // 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 omit even empty operations while profiling is active.
+      return;
+    }
+
+    const numUnmountIDs = pendingRealUnmountedIDs.length;
+    const numUnmountSuspenseIDs = pendingRealUnmountedSuspenseIDs.length;
+    const numSuspenderChanges = pendingSuspenderChanges.size;
+
+    const operations = new Array<number>(
+      // 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 of Suspense boundaries are batched in a single message.
+        // [TREE_OPERATION_REMOVE_SUSPENSE, removedSuspenseIDLength, ...ids]
+        (numUnmountSuspenseIDs > 0 ? 2 + numUnmountSuspenseIDs : 0) +
+        // All unmounts are batched in a single message.
+        // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
+        (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
+        // Regular operations
+        pendingOperations.length +
+        // All suspender changes are batched in a single message.
+        // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, endTime, isSuspended]]
+        (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 4 : 0),
+    );
+
+    // 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;
+    if (currentRoot === null) {
+      // TODO: This is not always safe so this field is probably not needed.
+      operations[i++] = -1;
+    } else {
+      operations[i++] = currentRoot.id;
+    }
+
+    // Now fill in the string table.
+    // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
+    operations[i++] = pendingStringTableLength;
+    pendingStringTable.forEach((entry, stringKey) => {
+      const encodedString = entry.encodedString;
+
+      // Don't use the string length.
+      // It won't work for multibyte characters (like emoji).
+      const length = encodedString.length;
+
+      operations[i++] = length;
+      for (let j = 0; j < length; j++) {
+        operations[i + j] = encodedString[j];
+      }
+
+      i += length;
+    });
+
+    if (numUnmountSuspenseIDs > 0) {
+      // All unmounts of Suspense boundaries are batched in a single message.
+      operations[i++] = SUSPENSE_TREE_OPERATION_REMOVE;
+      // The first number is how many unmounted IDs we're gonna send.
+      operations[i++] = numUnmountSuspenseIDs;
+      // 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 = 0; j < pendingRealUnmountedSuspenseIDs.length; j++) {
+        operations[i++] = pendingRealUnmountedSuspenseIDs[j];
+      }
+    }
+
+    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 = 0; j < pendingRealUnmountedIDs.length; j++) {
+        operations[i++] = pendingRealUnmountedIDs[j];
+      }
+    }
+
+    // Fill in pending operations.
+    for (let j = 0; j < pendingOperations.length; j++) {
+      operations[i + j] = pendingOperations[j];
+    }
+    i += pendingOperations.length;
+
+    // Suspender changes might affect newly mounted nodes that we already recorded
+    // in pending operations.
+    if (numSuspenderChanges > 0) {
+      operations[i++] = SUSPENSE_TREE_OPERATION_SUSPENDERS;
+      operations[i++] = numSuspenderChanges;
+      pendingSuspenderChanges.forEach(fiberIdWithChanges => {
+        const suspense = idToSuspenseNodeMap.get(fiberIdWithChanges);
+        if (suspense === undefined) {
+          // Probably forgot to cleanup pendingSuspenderChanges when this node was removed.
+          throw new Error(
+            `Could not send suspender changes for "${fiberIdWithChanges}" since the Fiber no longer exists.`,
+          );
+        }
+        operations[i++] = fiberIdWithChanges;
+        operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0;
+        operations[i++] = Math.round(suspense.endTime * 1000);
+        const instance = suspense.instance;
+        const isSuspended =
+          // TODO: Track if other SuspenseNode like SuspenseList rows are suspended.
+          (instance.kind === FIBER_INSTANCE ||
+            instance.kind === FILTERED_FIBER_INSTANCE) &&
+          instance.data.tag === SuspenseComponent &&
+          instance.data.memoizedState !== null;
+        operations[i++] = isSuspended ? 1 : 0;
+        operations[i++] = suspense.environments.size;
+        suspense.environments.forEach((count, env) => {
+          operations[i++] = getStringID(env);
+        });
+      });
+    }
+
+    // Let the frontend know about tree operations.
+    flushOrQueueOperations(operations);
+
+    // Reset all of the pending state now that we've told the frontend about it.
+    pendingOperations.length = 0;
+    pendingRealUnmountedIDs.length = 0;
+    pendingRealUnmountedSuspenseIDs.length = 0;
+    pendingSuspenderChanges.clear();
+    pendingStringTable.clear();
+    pendingStringTableLength = 0;
+  }
+
+  function measureHostInstance(instance: HostInstance): null | Array<Rect> {
+    // Feature detect measurement capabilities of this environment.
+    // TODO: Consider making this capability injected by the ReactRenderer.
+    if (typeof instance !== 'object' || instance === null) {
+      return null;
+    }
+    if (
+      typeof instance.getClientRects === 'function' ||
+      instance.nodeType === 3
+    ) {
+      // DOM
+      const doc = instance.ownerDocument;
+      if (instance === doc.documentElement) {
+        // This is the document element. The size of this element is not actually
+        // what determines the whole scrollable area of the screen. Because any
+        // thing that overflows the document will also contribute to the scrollable.
+        // This is unlike overflow: scroll which clips those.
+        // Therefore, we use the scrollable size for this rect instead.
+        return [
+          {
+            x: 0,
+            y: 0,
+            width: instance.scrollWidth,
+            height: instance.scrollHeight,
+          },
+        ];
+      }
+      const result: Array<Rect> = [];
+      const win = doc && doc.defaultView;
+      const scrollX = win ? win.scrollX : 0;
+      const scrollY = win ? win.scrollY : 0;
+      let rects;
+      if (instance.nodeType === 3) {
+        // Text nodes cannot be measured directly but we can measure a Range.
+        if (typeof doc.createRange !== 'function') {
+          return null;
+        }
+        const range = doc.createRange();
+        if (typeof range.getClientRects !== 'function') {
+          return null;
+        }
+        range.selectNodeContents(instance);
+        rects = range.getClientRects();
+      } else {
+        rects = instance.getClientRects();
+      }
+      for (let i = 0; i < rects.length; i++) {
+        const rect = rects[i];
+        result.push({
+          x: rect.x + scrollX,
+          y: rect.y + scrollY,
+          width: rect.width,
+          height: rect.height,
+        });
+      }
+      return result;
+    }
+    if (instance.canonical) {
+      // Native
+      const publicInstance = instance.canonical.publicInstance;
+      if (!publicInstance) {
+        // The publicInstance may not have been initialized yet if there was no ref on this node.
+        // We can't initialize it from any existing Hook but we could fallback to this async form:
+        // renderer.extraDevToolsConfig.getInspectorDataForInstance(instance).hierarchy[last].getInspectorData().measure(callback)
+        return null;
+      }
+      if (typeof publicInstance.getBoundingClientRect === 'function') {
+        // enableAccessToHostTreeInFabric / ReadOnlyElement
+        return [publicInstance.getBoundingClientRect()];
+      }
+      if (typeof publicInstance.unstable_getBoundingClientRect === 'function') {
+        // ReactFabricHostComponent
+        return [publicInstance.unstable_getBoundingClientRect()];
+      }
+    }
+    return null;
+  }
+
+  function measureInstance(instance: DevToolsInstance): null | Array<Rect> {
+    // Synchronously return the client rects of the Host instances directly inside this Instance.
+    const hostInstances = findAllCurrentHostInstances(instance);
+    let result: null | Array<Rect> = null;
+    for (let i = 0; i < hostInstances.length; i++) {
+      const childResult = measureHostInstance(hostInstances[i]);
+      if (childResult !== null) {
+        if (result === null) {
+          result = childResult;
+        } else {
+          result = result.concat(childResult);
+        }
+      }
+    }
+    return result;
+  }
+
+  function getStringID(string: string | null): number {
+    if (string === null) {
+      return 0;
+    }
+    const existingEntry = pendingStringTable.get(string);
+    if (existingEntry !== undefined) {
+      return existingEntry.id;
+    }
+
+    const id = pendingStringTable.size + 1;
+    const encodedString = utfEncodeString(string);
+
+    pendingStringTable.set(string, {
+      encodedString,
+      id,
+    });
+
+    // The string table total length needs to account both for the string length,
+    // and for the array item that contains the length itself.
+    //
+    // Don't use string length for this table.
+    // It won't work for multibyte characters (like emoji).
+    pendingStringTableLength += encodedString.length + 1;
+
+    return id;
+  }
+
+  let isInDisconnectedSubtree = false;
+
+  function recordMount(
+    fiber: Fiber,
+    parentInstance: DevToolsInstance | null,
+  ): FiberInstance {
+    const isRoot = fiber.tag === HostRoot;
+    let fiberInstance;
+    if (isRoot) {
+      const entry = rootToFiberInstanceMap.get(fiber.stateNode);
+      if (entry === undefined) {
+        throw new Error('The root should have been registered at this point');
+      }
+      fiberInstance = entry;
+    } else {
+      fiberInstance = createFiberInstance(fiber);
+    }
+    idToDevToolsInstanceMap.set(fiberInstance.id, fiberInstance);
+
+    if (__DEBUG__) {
+      debug('recordMount()', fiberInstance, parentInstance);
+    }
+
+    recordReconnect(fiberInstance, parentInstance);
+    return fiberInstance;
+  }
+
+  function recordReconnect(
+    fiberInstance: FiberInstance,
+    parentInstance: DevToolsInstance | null,
+  ): void {
+    if (isInDisconnectedSubtree) {
+      // We're disconnected. We'll reconnect a hidden mount after the parent reappears.
+      return;
+    }
+    const id = fiberInstance.id;
+    const fiber = fiberInstance.data;
+
+    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+
+    const isRoot = fiber.tag === HostRoot;
+
+    if (isRoot) {
+      const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
+
+      // Adding a new field here would require a bridge protocol version bump (a backwads breaking change).
+      // Instead let's re-purpose a pre-existing field to carry more information.
+      let profilingFlags = 0;
+      if (isProfilingSupported) {
+        profilingFlags = PROFILING_FLAG_BASIC_SUPPORT;
+        if (typeof injectProfilingHooks === 'function') {
+          profilingFlags |= PROFILING_FLAG_TIMELINE_SUPPORT;
+        }
+        if (supportsPerformanceTracks) {
+          profilingFlags |= PROFILING_FLAG_PERFORMANCE_TRACKS_SUPPORT;
+        }
+      }
+
+      // Set supportsStrictMode to false for production renderer builds
+      const isProductionBuildOfRenderer = renderer.bundleType === 0;
+
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(ElementTypeRoot);
+      pushOperation((fiber.mode & StrictModeBits) !== 0 ? 1 : 0);
+      pushOperation(profilingFlags);
+      pushOperation(
+        !isProductionBuildOfRenderer && StrictModeBits !== 0 ? 1 : 0,
+      );
+      pushOperation(hasOwnerMetadata ? 1 : 0);
+
+      if (isProfiling) {
+        if (displayNamesByRootID !== null) {
+          displayNamesByRootID.set(id, getDisplayNameForRoot(fiber));
+        }
+      }
+    } else {
+      const suspenseNode = fiberInstance.suspenseNode;
+      if (suspenseNode !== null && fiber.memoizedState === null) {
+        // We're reconnecting an unsuspended Suspense. Measure to see if anything changed.
+        const prevRects = suspenseNode.rects;
+        const nextRects = measureInstance(fiberInstance);
+        if (!areEqualRects(prevRects, nextRects)) {
+          suspenseNode.rects = nextRects;
+          recordSuspenseResize(suspenseNode);
+        }
+      }
+
+      const {key} = fiber;
+      const displayName = getDisplayNameForFiber(fiber);
+      const elementType = getElementTypeForFiber(fiber);
+
+      // Finding the owner instance might require traversing the whole parent path which
+      // doesn't have great big O notation. Ideally we'd lazily fetch the owner when we
+      // need it but we have some synchronous operations in the front end like Alt+Left
+      // which selects the owner immediately. Typically most owners are only a few parents
+      // away so maybe it's not so bad.
+      const debugOwner = getUnfilteredOwner(fiber);
+      const ownerInstance = findNearestOwnerInstance(
+        parentInstance,
+        debugOwner,
+      );
+      if (
+        ownerInstance !== null &&
+        debugOwner === fiber._debugOwner &&
+        fiber._debugStack != null &&
+        ownerInstance.source === null
+      ) {
+        // The new Fiber is directly owned by the ownerInstance. Therefore somewhere on
+        // the debugStack will be a stack frame inside the ownerInstance's source.
+        ownerInstance.source = fiber._debugStack;
+      }
+
+      let unfilteredParent = parentInstance;
+      while (
+        unfilteredParent !== null &&
+        unfilteredParent.kind === FILTERED_FIBER_INSTANCE
+      ) {
+        unfilteredParent = unfilteredParent.parent;
+      }
+
+      const ownerID = ownerInstance === null ? 0 : ownerInstance.id;
+      const parentID = unfilteredParent === null ? 0 : unfilteredParent.id;
+
+      const 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.
+      const keyString = key === null ? null : String(key);
+      const keyStringID = getStringID(keyString);
+
+      const nameProp =
+        fiber.tag === SuspenseComponent
+          ? fiber.memoizedProps.name
+          : fiber.tag === ActivityComponent
+            ? fiber.memoizedProps.name
+            : null;
+      const namePropString = nameProp == null ? null : String(nameProp);
+      const namePropStringID = getStringID(namePropString);
+
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(elementType);
+      pushOperation(parentID);
+      pushOperation(ownerID);
+      pushOperation(displayNameStringID);
+      pushOperation(keyStringID);
+      pushOperation(namePropStringID);
+
+      // If this subtree has a new mode, let the frontend know.
+      if ((fiber.mode & StrictModeBits) !== 0) {
+        let parentFiber = null;
+        let parentFiberInstance = parentInstance;
+        while (parentFiberInstance !== null) {
+          if (parentFiberInstance.kind === FIBER_INSTANCE) {
+            parentFiber = parentFiberInstance.data;
+            break;
+          }
+          parentFiberInstance = parentFiberInstance.parent;
+        }
+        if (parentFiber === null || (parentFiber.mode & StrictModeBits) === 0) {
+          pushOperation(TREE_OPERATION_SET_SUBTREE_MODE);
+          pushOperation(id);
+          pushOperation(StrictMode);
+        }
+      }
+    }
+
+    let componentLogsEntry = fiberToComponentLogsMap.get(fiber);
+    if (componentLogsEntry === undefined && fiber.alternate !== null) {
+      componentLogsEntry = fiberToComponentLogsMap.get(fiber.alternate);
+    }
+    recordConsoleLogs(fiberInstance, componentLogsEntry);
+
+    if (isProfilingSupported) {
+      recordProfilingDurations(fiberInstance, null);
+    }
+  }
+
+  function recordVirtualMount(
+    instance: VirtualInstance,
+    parentInstance: DevToolsInstance | null,
+    secondaryEnv: null | string,
+  ): void {
+    const id = instance.id;
+
+    idToDevToolsInstanceMap.set(id, instance);
+
+    recordVirtualReconnect(instance, parentInstance, secondaryEnv);
+  }
+
+  function recordVirtualReconnect(
+    instance: VirtualInstance,
+    parentInstance: DevToolsInstance | null,
+    secondaryEnv: null | string,
+  ): void {
+    if (isInDisconnectedSubtree) {
+      // We're disconnected. We'll reconnect a hidden mount after the parent reappears.
+      return;
+    }
+    const componentInfo = instance.data;
+
+    const key =
+      typeof componentInfo.key === 'string' ? componentInfo.key : null;
+    const env = componentInfo.env;
+    let displayName = componentInfo.name || '';
+    if (typeof env === 'string') {
+      // We model environment as an HoC name for now.
+      if (secondaryEnv !== null) {
+        displayName = secondaryEnv + '(' + displayName + ')';
+      }
+      displayName = env + '(' + displayName + ')';
+    }
+    const elementType = ElementTypeVirtual;
+
+    // Finding the owner instance might require traversing the whole parent path which
+    // doesn't have great big O notation. Ideally we'd lazily fetch the owner when we
+    // need it but we have some synchronous operations in the front end like Alt+Left
+    // which selects the owner immediately. Typically most owners are only a few parents
+    // away so maybe it's not so bad.
+    const debugOwner = getUnfilteredOwner(componentInfo);
+    const ownerInstance = findNearestOwnerInstance(parentInstance, debugOwner);
+    if (
+      ownerInstance !== null &&
+      debugOwner === componentInfo.owner &&
+      componentInfo.debugStack != null &&
+      ownerInstance.source === null
+    ) {
+      // The new Fiber is directly owned by the ownerInstance. Therefore somewhere on
+      // the debugStack will be a stack frame inside the ownerInstance's source.
+      ownerInstance.source = componentInfo.debugStack;
+    }
+
+    let unfilteredParent = parentInstance;
+    while (
+      unfilteredParent !== null &&
+      unfilteredParent.kind === FILTERED_FIBER_INSTANCE
+    ) {
+      unfilteredParent = unfilteredParent.parent;
+    }
+
+    const ownerID = ownerInstance === null ? 0 : ownerInstance.id;
+    const parentID = unfilteredParent === null ? 0 : unfilteredParent.id;
+
+    const 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.
+    const keyString = key === null ? null : String(key);
+    const keyStringID = getStringID(keyString);
+    const namePropStringID = getStringID(null);
+
+    const id = instance.id;
+
+    pushOperation(TREE_OPERATION_ADD);
+    pushOperation(id);
+    pushOperation(elementType);
+    pushOperation(parentID);
+    pushOperation(ownerID);
+    pushOperation(displayNameStringID);
+    pushOperation(keyStringID);
+    pushOperation(namePropStringID);
+
+    const componentLogsEntry =
+      componentInfoToComponentLogsMap.get(componentInfo);
+    recordConsoleLogs(instance, componentLogsEntry);
+  }
+
+  function recordSuspenseMount(
+    suspenseInstance: SuspenseNode,
+    parentSuspenseInstance: SuspenseNode | null,
+  ): void {
+    const fiberInstance = suspenseInstance.instance;
+    if (fiberInstance.kind === FILTERED_FIBER_INSTANCE) {
+      throw new Error('Cannot record a mount for a filtered Fiber instance.');
+    }
+    const fiberID = fiberInstance.id;
+
+    let unfilteredParent = parentSuspenseInstance;
+    while (
+      unfilteredParent !== null &&
+      unfilteredParent.instance.kind === FILTERED_FIBER_INSTANCE
+    ) {
+      unfilteredParent = unfilteredParent.parent;
+    }
+    const unfilteredParentInstance =
+      unfilteredParent !== null ? unfilteredParent.instance : null;
+    if (
+      unfilteredParentInstance !== null &&
+      unfilteredParentInstance.kind === FILTERED_FIBER_INSTANCE
+    ) {
+      throw new Error(
+        'Should not have a filtered instance at this point. This is a bug.',
+      );
+    }
+    const parentID =
+      unfilteredParentInstance === null ? 0 : unfilteredParentInstance.id;
+
+    const fiber = fiberInstance.data;
+    const props = fiber.memoizedProps;
+    // The frontend will guess a name based on heuristics (e.g. owner) if no explicit name is given.
+    const name =
+      fiber.tag !== SuspenseComponent || props === null
+        ? null
+        : props.name || null;
+    const nameStringID = getStringID(name);
+
+    const isSuspended =
+      fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
+
+    if (__DEBUG__) {
+      console.log('recordSuspenseMount()', suspenseInstance);
+    }
+
+    idToSuspenseNodeMap.set(fiberID, suspenseInstance);
+
+    pushOperation(SUSPENSE_TREE_OPERATION_ADD);
+    pushOperation(fiberID);
+    pushOperation(parentID);
+    pushOperation(nameStringID);
+    pushOperation(isSuspended ? 1 : 0);
+
+    const rects = suspenseInstance.rects;
+    if (rects === null) {
+      pushOperation(-1);
+    } else {
+      pushOperation(rects.length);
+      for (let i = 0; i < rects.length; ++i) {
+        const rect = rects[i];
+        pushOperation(Math.round(rect.x * 1000));
+        pushOperation(Math.round(rect.y * 1000));
+        pushOperation(Math.round(rect.width * 1000));
+        pushOperation(Math.round(rect.height * 1000));
+      }
+    }
+  }
+
+  function recordUnmount(fiberInstance: FiberInstance): void {
+    if (__DEBUG__) {
+      debug('recordUnmount()', fiberInstance, reconcilingParent);
+    }
+
+    recordDisconnect(fiberInstance);
+
+    const suspenseNode = fiberInstance.suspenseNode;
+    if (suspenseNode !== null) {
+      recordSuspenseUnmount(suspenseNode);
+    }
+
+    idToDevToolsInstanceMap.delete(fiberInstance.id);
+
+    untrackFiber(fiberInstance, fiberInstance.data);
+  }
+
+  function recordDisconnect(fiberInstance: FiberInstance): void {
+    if (isInDisconnectedSubtree) {
+      // Already disconnected.
+      return;
+    }
+
+    if (trackedPathMatchInstance === fiberInstance) {
+      // We're in the process of trying to restore previous selection.
+      // If this fiber matched but is being hidden, there's no use trying.
+      // Reset the state so we don't keep holding onto it.
+      setTrackedPath(null);
+    }
+
+    const id = fiberInstance.id;
+    pendingRealUnmountedIDs.push(id);
+  }
+
+  function recordSuspenseResize(suspenseNode: SuspenseNode): void {
+    if (__DEBUG__) {
+      console.log('recordSuspenseResize()', suspenseNode);
+    }
+    const fiberInstance = suspenseNode.instance;
+    if (fiberInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Resizes of filtered Suspense nodes are currently dropped.
+      return;
+    }
+
+    pushOperation(SUSPENSE_TREE_OPERATION_RESIZE);
+    pushOperation(fiberInstance.id);
+    const rects = suspenseNode.rects;
+    if (rects === null) {
+      pushOperation(-1);
+    } else {
+      pushOperation(rects.length);
+      for (let i = 0; i < rects.length; ++i) {
+        const rect = rects[i];
+        pushOperation(Math.round(rect.x * 1000));
+        pushOperation(Math.round(rect.y * 1000));
+        pushOperation(Math.round(rect.width * 1000));
+        pushOperation(Math.round(rect.height * 1000));
+      }
+    }
+  }
+
+  function recordSuspenseSuspenders(suspenseNode: SuspenseNode): void {
+    if (__DEBUG__) {
+      console.log('recordSuspenseSuspenders()', suspenseNode);
+    }
+    const fiberInstance = suspenseNode.instance;
+    if (fiberInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Suspender updates of filtered Suspense nodes are currently dropped.
+      return;
+    }
+
+    // TODO: Just enqueue the operations here instead of stashing by id.
+
+    // Ensure each environment gets recorded in the string table since it is emitted
+    // before we loop it over again later during flush.
+    suspenseNode.environments.forEach((count, env) => {
+      getStringID(env);
+    });
+    pendingSuspenderChanges.add(fiberInstance.id);
+  }
+
+  function recordSuspenseUnmount(suspenseInstance: SuspenseNode): void {
+    if (__DEBUG__) {
+      console.log(
+        'recordSuspenseUnmount()',
+        suspenseInstance,
+        reconcilingParentSuspenseNode,
+      );
+    }
+
+    const devtoolsInstance = suspenseInstance.instance;
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      throw new Error("Can't unmount a filtered SuspenseNode. This is a bug.");
+    }
+    const fiberInstance = devtoolsInstance;
+    const id = fiberInstance.id;
+
+    // To maintain child-first ordering,
+    // we'll push it into one of these queues,
+    // and later arrange them in the correct order.
+    pendingRealUnmountedSuspenseIDs.push(id);
+
+    pendingSuspenderChanges.delete(id);
+    idToSuspenseNodeMap.delete(id);
+  }
+
+  // Running state of the remaining children from the previous version of this parent that
+  // we haven't yet added back. This should be reset anytime we change parent.
+  // Any remaining ones at the end will be deleted.
+  let remainingReconcilingChildren: null | DevToolsInstance = null;
+  // The previously placed child.
+  let previouslyReconciledSibling: null | DevToolsInstance = null;
+  // To save on stack allocation and ensure that they are updated as a pair, we also store
+  // the current parent here as well.
+  let reconcilingParent: null | DevToolsInstance = null;
+
+  let remainingReconcilingChildrenSuspenseNodes: null | SuspenseNode = null;
+  // The previously placed child.
+  let previouslyReconciledSiblingSuspenseNode: null | SuspenseNode = null;
+  // To save on stack allocation and ensure that they are updated as a pair, we also store
+  // the current parent here as well.
+  let reconcilingParentSuspenseNode: null | SuspenseNode = null;
+
+  function ioExistsInSuspenseAncestor(
+    suspenseNode: SuspenseNode,
+    ioInfo: ReactIOInfo,
+  ): boolean {
+    let ancestor = suspenseNode.parent;
+    while (ancestor !== null) {
+      if (ancestor.suspendedBy.has(ioInfo)) {
+        return true;
+      }
+      ancestor = ancestor.parent;
+    }
+    return false;
+  }
+
+  function insertSuspendedBy(asyncInfo: ReactAsyncInfo): void {
+    if (reconcilingParent === null || reconcilingParentSuspenseNode === null) {
+      throw new Error(
+        'It should not be possible to have suspended data outside the root. ' +
+          'Even suspending at the first position is still a child of the root.',
+      );
+    }
+    const parentSuspenseNode = reconcilingParentSuspenseNode;
+    // Use the nearest unfiltered parent so that there's always some component that has
+    // the entry on it even if you filter, or the root if all are filtered.
+    let parentInstance = reconcilingParent;
+    while (
+      parentInstance.kind === FILTERED_FIBER_INSTANCE &&
+      parentInstance.parent !== null &&
+      // We can't move past the parent Suspense node.
+      // The Suspense node holding async info must be a parent of the devtools instance (or the instance itself)
+      parentInstance !== parentSuspenseNode.instance
+    ) {
+      parentInstance = parentInstance.parent;
+    }
+    if (parentInstance.kind === FIBER_INSTANCE) {
+      const fiber = parentInstance.data;
+
+      if (
+        fiber.tag === SuspenseComponent &&
+        parentInstance !== parentSuspenseNode.instance
+      ) {
+        // We're about to attach async info to a Suspense boundary we're not
+        // actually considering the parent Suspense boundary for this async info.
+        // We must have not found a suitable Fiber inside the fallback (e.g. due to filtering).
+        // Use the parent of this instance instead since we treat async info
+        // attached to a Suspense boundary as that async info triggering the
+        // fallback of that boundary.
+        const parent = parentInstance.parent;
+        if (parent === null) {
+          // This shouldn't happen. Any <Suspense> would have at least have the
+          // host root as the parent which can't have a fallback.
+          throw new Error(
+            'Did not find a suitable instance for this async info. This is a bug in React.',
+          );
+        }
+        parentInstance = parent;
+      }
+    }
+
+    const suspenseNodeSuspendedBy = parentSuspenseNode.suspendedBy;
+    const ioInfo = asyncInfo.awaited;
+    let suspendedBySet = suspenseNodeSuspendedBy.get(ioInfo);
+    if (suspendedBySet === undefined) {
+      suspendedBySet = new Set();
+      suspenseNodeSuspendedBy.set(ioInfo, suspendedBySet);
+      // We've added a dependency. We must increment the ref count of the environment.
+      const env = ioInfo.env;
+      if (env != null) {
+        const environmentCounts = parentSuspenseNode.environments;
+        const count = environmentCounts.get(env);
+        if (count === undefined || count === 0) {
+          environmentCounts.set(env, 1);
+          // We've discovered a new environment for this SuspenseNode. We'll to update the node.
+          recordSuspenseSuspenders(parentSuspenseNode);
+        } else {
+          environmentCounts.set(env, count + 1);
+        }
+      }
+    }
+    // The child of the Suspense boundary that was suspended on this, or null if suspended at the root.
+    // This is used to keep track of how many dependents are still alive and also to get information
+    // like owner instances to link down into the tree.
+    if (!suspendedBySet.has(parentInstance)) {
+      suspendedBySet.add(parentInstance);
+      const virtualEndTime = getVirtualEndTime(ioInfo);
+      if (
+        !parentSuspenseNode.hasUniqueSuspenders &&
+        !ioExistsInSuspenseAncestor(parentSuspenseNode, ioInfo)
+      ) {
+        // This didn't exist in the parent before, so let's mark this boundary as having a unique suspender.
+        parentSuspenseNode.hasUniqueSuspenders = true;
+        if (parentSuspenseNode.endTime < virtualEndTime) {
+          parentSuspenseNode.endTime = virtualEndTime;
+        }
+        recordSuspenseSuspenders(parentSuspenseNode);
+      } else if (parentSuspenseNode.endTime < virtualEndTime) {
+        parentSuspenseNode.endTime = virtualEndTime;
+        recordSuspenseSuspenders(parentSuspenseNode);
+      }
+    }
+    // We have observed at least one known reason this might have been suspended.
+    parentSuspenseNode.hasUnknownSuspenders = false;
+    // Suspending right below the root is not attributed to any particular component in UI
+    // other than the SuspenseNode and the HostRoot's FiberInstance.
+    const suspendedBy = parentInstance.suspendedBy;
+    if (suspendedBy === null) {
+      parentInstance.suspendedBy = [asyncInfo];
+    } else if (suspendedBy.indexOf(asyncInfo) === -1) {
+      suspendedBy.push(asyncInfo);
+    }
+  }
+
+  function getAwaitInSuspendedByFromIO(
+    suspensedBy: Array<ReactAsyncInfo>,
+    ioInfo: ReactIOInfo,
+  ): null | ReactAsyncInfo {
+    for (let i = 0; i < suspensedBy.length; i++) {
+      const asyncInfo = suspensedBy[i];
+      if (asyncInfo.awaited === ioInfo) {
+        return asyncInfo;
+      }
+    }
+    return null;
+  }
+
+  function unblockSuspendedBy(
+    parentSuspenseNode: SuspenseNode,
+    ioInfo: ReactIOInfo,
+  ): void {
+    const firstChild = parentSuspenseNode.firstChild;
+    if (firstChild === null) {
+      return;
+    }
+    let node: SuspenseNode = firstChild;
+    while (node !== null) {
+      if (node.suspendedBy.has(ioInfo)) {
+        // We have found a child boundary that depended on the unblocked I/O.
+        // It can now be marked as having unique suspenders. We can skip its children
+        // since they'll still be blocked by this one.
+        if (!node.hasUniqueSuspenders) {
+          recordSuspenseSuspenders(node);
+        }
+        node.hasUniqueSuspenders = true;
+        node.hasUnknownSuspenders = false;
+      } else if (node.firstChild !== null) {
+        node = node.firstChild;
+        continue;
+      }
+      while (node.nextSibling === null) {
+        if (node.parent === null || node.parent === parentSuspenseNode) {
+          return;
+        }
+        node = node.parent;
+      }
+      node = node.nextSibling;
+    }
+  }
+
+  function getVirtualEndTime(ioInfo: ReactIOInfo): number {
+    if (ioInfo.env != null) {
+      // Sort client side content first so that scripts and streams don't
+      // cover up the effect of server time.
+      return ioInfo.end + 1000000;
+    }
+    return ioInfo.end;
+  }
+
+  function computeEndTime(suspenseNode: SuspenseNode) {
+    let maxEndTime = 0;
+    suspenseNode.suspendedBy.forEach((set, ioInfo) => {
+      const virtualEndTime = getVirtualEndTime(ioInfo);
+      if (virtualEndTime > maxEndTime) {
+        maxEndTime = virtualEndTime;
+      }
+    });
+    return maxEndTime;
+  }
+
+  function removePreviousSuspendedBy(
+    instance: DevToolsInstance,
+    previousSuspendedBy: null | Array<ReactAsyncInfo>,
+    parentSuspenseNode: null | SuspenseNode,
+  ): void {
+    // Remove any async info if they were in the previous set but
+    // is no longer in the new set.
+    // If we just reconciled a SuspenseNode, we need to remove from that node instead of the parent.
+    // This is different from inserting because inserting is done during reconiliation
+    // whereas removal is done after we're done reconciling.
+    const suspenseNode =
+      instance.suspenseNode === null
+        ? parentSuspenseNode
+        : instance.suspenseNode;
+    if (previousSuspendedBy !== null && suspenseNode !== null) {
+      const nextSuspendedBy = instance.suspendedBy;
+      let changedEnvironment = false;
+      let mayHaveChangedEndTime = false;
+      for (let i = 0; i < previousSuspendedBy.length; i++) {
+        const asyncInfo = previousSuspendedBy[i];
+        if (
+          nextSuspendedBy === null ||
+          (nextSuspendedBy.indexOf(asyncInfo) === -1 &&
+            getAwaitInSuspendedByFromIO(nextSuspendedBy, asyncInfo.awaited) ===
+              null)
+        ) {
+          // This IO entry is no longer blocking the current tree.
+          // Let's remove it from the parent SuspenseNode.
+          const ioInfo = asyncInfo.awaited;
+          const suspendedBySet = suspenseNode.suspendedBy.get(ioInfo);
+
+          if (suspenseNode.endTime === getVirtualEndTime(ioInfo)) {
+            // This may be the only remaining entry at this end time. Recompute the end time.
+            mayHaveChangedEndTime = true;
+          }
+
+          if (
+            suspendedBySet === undefined ||
+            !suspendedBySet.delete(instance)
+          ) {
+            // A boundary can await the same IO multiple times.
+            // We still want to error if we're trying to remove IO that isn't present on
+            // this boundary so we need to check if we've already removed it.
+            // We're assuming previousSuspendedBy is a small array so this should be faster
+            // than allocating and maintaining a Set.
+            let alreadyRemovedIO = false;
+            for (let j = 0; j < i; j++) {
+              const removedIOInfo = previousSuspendedBy[j].awaited;
+              if (removedIOInfo === ioInfo) {
+                alreadyRemovedIO = true;
+                break;
+              }
+            }
+            if (!alreadyRemovedIO) {
+              throw new Error(
+                'We are cleaning up async info that was not on the parent Suspense boundary. ' +
+                  'This is a bug in React.',
+              );
+            }
+          }
+          if (suspendedBySet !== undefined && suspendedBySet.size === 0) {
+            suspenseNode.suspendedBy.delete(ioInfo);
+            // Successfully removed all dependencies. We can decrement the ref count of the environment.
+            const env = ioInfo.env;
+            if (env != null) {
+              const environmentCounts = suspenseNode.environments;
+              const count = environmentCounts.get(env);
+              if (count === undefined || count === 0) {
+                throw new Error(
+                  'We are removing an environment but it was not in the set. ' +
+                    'This is a bug in React.',
+                );
+              }
+              if (count === 1) {
+                environmentCounts.delete(env);
+                // Last one. We've now change the set of environments. We'll need to update the node.
+                changedEnvironment = true;
+              } else {
+                environmentCounts.set(env, count - 1);
+              }
+            }
+          }
+          if (
+            suspenseNode.hasUniqueSuspenders &&
+            !ioExistsInSuspenseAncestor(suspenseNode, ioInfo)
+          ) {
+            // This entry wasn't in any ancestor and is no longer in this suspense boundary.
+            // This means that a child might now be the unique suspender for this IO.
+            // Search the child boundaries to see if we can reveal any of them.
+            unblockSuspendedBy(suspenseNode, ioInfo);
+          }
+        }
+      }
+      const newEndTime = mayHaveChangedEndTime
+        ? computeEndTime(suspenseNode)
+        : suspenseNode.endTime;
+      if (changedEnvironment || newEndTime !== suspenseNode.endTime) {
+        suspenseNode.endTime = newEndTime;
+        recordSuspenseSuspenders(suspenseNode);
+      }
+    }
+  }
+
+  function insertChild(instance: DevToolsInstance): void {
+    const parentInstance = reconcilingParent;
+    if (parentInstance === null) {
+      // This instance is at the root.
+      return;
+    }
+    // Place it in the parent.
+    instance.parent = parentInstance;
+    if (previouslyReconciledSibling === null) {
+      previouslyReconciledSibling = instance;
+      parentInstance.firstChild = instance;
+    } else {
+      previouslyReconciledSibling.nextSibling = instance;
+      previouslyReconciledSibling = instance;
+    }
+    instance.nextSibling = null;
+    // Insert any SuspenseNode into its parent Node.
+    const suspenseNode = instance.suspenseNode;
+    if (suspenseNode !== null) {
+      const parentNode = reconcilingParentSuspenseNode;
+      if (parentNode !== null) {
+        suspenseNode.parent = parentNode;
+        if (previouslyReconciledSiblingSuspenseNode === null) {
+          previouslyReconciledSiblingSuspenseNode = suspenseNode;
+          parentNode.firstChild = suspenseNode;
+        } else {
+          previouslyReconciledSiblingSuspenseNode.nextSibling = suspenseNode;
+          previouslyReconciledSiblingSuspenseNode = suspenseNode;
+        }
+        suspenseNode.nextSibling = null;
+      }
+    }
+  }
+
+  function moveChild(
+    instance: DevToolsInstance,
+    previousSibling: null | DevToolsInstance,
+  ): void {
+    removeChild(instance, previousSibling);
+    insertChild(instance);
+  }
+
+  function removeChild(
+    instance: DevToolsInstance,
+    previousSibling: null | DevToolsInstance,
+  ): void {
+    if (instance.parent === null) {
+      if (remainingReconcilingChildren === instance) {
+        throw new Error(
+          'Remaining children should not have items with no parent',
+        );
+      } else if (instance.nextSibling !== null) {
+        throw new Error('A deleted instance should not have next siblings');
+      }
+      // Already deleted.
+      return;
+    }
+    const parentInstance = reconcilingParent;
+    if (parentInstance === null) {
+      throw new Error('Should not have a parent if we are at the root');
+    }
+    if (instance.parent !== parentInstance) {
+      throw new Error(
+        'Cannot remove a node from a different parent than is being reconciled.',
+      );
+    }
+    // Remove an existing child from its current position, which we assume is in the
+    // remainingReconcilingChildren set.
+    if (previousSibling === null) {
+      // We're first in the remaining set. Remove us.
+      if (remainingReconcilingChildren !== instance) {
+        throw new Error(
+          'Expected a placed child to be moved from the remaining set.',
+        );
+      }
+      remainingReconcilingChildren = instance.nextSibling;
+    } else {
+      previousSibling.nextSibling = instance.nextSibling;
+    }
+    instance.nextSibling = null;
+    instance.parent = null;
+
+    // Remove any SuspenseNode from its parent.
+    const suspenseNode = instance.suspenseNode;
+    if (suspenseNode !== null && suspenseNode.parent !== null) {
+      const parentNode = reconcilingParentSuspenseNode;
+      if (parentNode === null) {
+        throw new Error('Should not have a parent if we are at the root');
+      }
+      if (suspenseNode.parent !== parentNode) {
+        throw new Error(
+          'Cannot remove a Suspense node from a different parent than is being reconciled.',
+        );
+      }
+      let previousSuspenseSibling = remainingReconcilingChildrenSuspenseNodes;
+      if (previousSuspenseSibling === suspenseNode) {
+        // We're first in the remaining set. Remove us.
+        remainingReconcilingChildrenSuspenseNodes = suspenseNode.nextSibling;
+      } else {
+        // Search for our previous sibling and remove us.
+        while (previousSuspenseSibling !== null) {
+          if (previousSuspenseSibling.nextSibling === suspenseNode) {
+            previousSuspenseSibling.nextSibling = suspenseNode.nextSibling;
+            break;
+          }
+          previousSuspenseSibling = previousSuspenseSibling.nextSibling;
+        }
+      }
+      suspenseNode.nextSibling = null;
+      suspenseNode.parent = null;
+    }
+  }
+
+  function isHiddenOffscreen(fiber: Fiber): boolean {
+    switch (fiber.tag) {
+      case LegacyHiddenComponent:
+      // fallthrough since all published implementations currently implement the same state as Offscreen.
+      case OffscreenComponent:
+        return fiber.memoizedState !== null;
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * Offscreen of suspended Suspense
+   */
+  function isSuspendedOffscreen(fiber: Fiber): boolean {
+    switch (fiber.tag) {
+      case LegacyHiddenComponent:
+      // fallthrough since all published implementations currently implement the same state as Offscreen.
+      case OffscreenComponent:
+        return (
+          fiber.memoizedState !== null &&
+          fiber.return !== null &&
+          fiber.return.tag === SuspenseComponent
+        );
+      default:
+        return false;
+    }
+  }
+
+  function unmountRemainingChildren() {
+    if (
+      reconcilingParent !== null &&
+      (reconcilingParent.kind === FIBER_INSTANCE ||
+        reconcilingParent.kind === FILTERED_FIBER_INSTANCE) &&
+      isSuspendedOffscreen(reconcilingParent.data) &&
+      !isInDisconnectedSubtree
+    ) {
+      // This is a hidden offscreen, we need to execute this in the context of a disconnected subtree.
+      isInDisconnectedSubtree = true;
+      try {
+        let child = remainingReconcilingChildren;
+        while (child !== null) {
+          unmountInstanceRecursively(child);
+          child = remainingReconcilingChildren;
+        }
+      } finally {
+        isInDisconnectedSubtree = false;
+      }
+    } else {
+      let child = remainingReconcilingChildren;
+      while (child !== null) {
+        unmountInstanceRecursively(child);
+        child = remainingReconcilingChildren;
+      }
+    }
+  }
+
+  function unmountSuspenseChildrenRecursively(
+    contentInstance: DevToolsInstance,
+    stashedSuspenseParent: null | SuspenseNode,
+    stashedSuspensePrevious: null | SuspenseNode,
+    stashedSuspenseRemaining: null | SuspenseNode,
+  ): void {
+    // First unmount only the Offscreen boundary. I.e. the main content.
+    unmountInstanceRecursively(contentInstance);
+
+    // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
+    // unmount the fallback, unmounting anything in the context of the parent SuspenseNode.
+    // Since the fallback conceptually blocks the parent.
+    reconcilingParentSuspenseNode = stashedSuspenseParent;
+    previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+    remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+    unmountRemainingChildren();
+  }
+
+  function isChildOf(
+    parentInstance: DevToolsInstance,
+    childInstance: DevToolsInstance,
+    grandParent: DevToolsInstance,
+  ): boolean {
+    let instance = childInstance.parent;
+    while (instance !== null) {
+      if (parentInstance === instance) {
+        return true;
+      }
+      if (instance === parentInstance.parent || instance === grandParent) {
+        // This was a sibling but not inside the FiberInstance. We can bail out.
+        break;
+      }
+      instance = instance.parent;
+    }
+    return false;
+  }
+
+  function areEqualRects(
+    a: null | Array<Rect>,
+    b: null | Array<Rect>,
+  ): boolean {
+    if (a === null) {
+      return b === null;
+    }
+    if (b === null) {
+      return false;
+    }
+    if (a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      const aRect = a[i];
+      const bRect = b[i];
+      if (
+        aRect.x !== bRect.x ||
+        aRect.y !== bRect.y ||
+        aRect.width !== bRect.width ||
+        aRect.height !== bRect.height
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function measureUnchangedSuspenseNodesRecursively(
+    suspenseNode: SuspenseNode,
+  ): void {
+    if (isInDisconnectedSubtree) {
+      // We don't update rects inside disconnected subtrees.
+      return;
+    }
+    const instance = suspenseNode.instance;
+
+    const isSuspendedSuspenseComponent =
+      (instance.kind === FIBER_INSTANCE ||
+        instance.kind === FILTERED_FIBER_INSTANCE) &&
+      instance.data.tag === SuspenseComponent &&
+      instance.data.memoizedState !== null;
+    if (isSuspendedSuspenseComponent) {
+      // This boundary itself was suspended and we don't measure those since that would measure
+      // the fallback. We want to keep a ghost of the rectangle of the content not currently shown.
+      return;
+    }
+
+    // While this boundary wasn't suspended and the bailed out root and wasn't in a disconnected subtree,
+    // it's possible that this node was in one. So we need to check if we're offscreen.
+    let parent = instance.parent;
+    while (parent !== null) {
+      if (
+        (parent.kind === FIBER_INSTANCE ||
+          parent.kind === FILTERED_FIBER_INSTANCE) &&
+        isHiddenOffscreen(parent.data)
+      ) {
+        // We're inside a hidden offscreen Fiber. We're in a disconnected tree.
+        return;
+      }
+      if (parent.suspenseNode !== null) {
+        // Found our parent SuspenseNode. We can bail out now.
+        break;
+      }
+      parent = parent.parent;
+    }
+
+    const nextRects = measureInstance(suspenseNode.instance);
+    const prevRects = suspenseNode.rects;
+    if (areEqualRects(prevRects, nextRects)) {
+      return; // Unchanged
+    }
+
+    // We changed inside a visible tree.
+    // Since this boundary changed, it's possible it also affected its children so lets
+    // measure them as well.
+    for (
+      let child = suspenseNode.firstChild;
+      child !== null;
+      child = child.nextSibling
+    ) {
+      measureUnchangedSuspenseNodesRecursively(child);
+    }
+    suspenseNode.rects = nextRects;
+    recordSuspenseResize(suspenseNode);
+  }
+
+  function consumeSuspenseNodesOfExistingInstance(
+    instance: DevToolsInstance,
+  ): void {
+    // We need to also consume any unchanged Suspense boundaries.
+    let suspenseNode = remainingReconcilingChildrenSuspenseNodes;
+    if (suspenseNode === null) {
+      return;
+    }
+    const parentSuspenseNode = reconcilingParentSuspenseNode;
+    if (parentSuspenseNode === null) {
+      throw new Error(
+        'The should not be any remaining suspense node children if there is no parent.',
+      );
+    }
+    let foundOne = false;
+    let previousSkippedSibling = null;
+    while (suspenseNode !== null) {
+      // Check if this SuspenseNode was a child of the bailed out FiberInstance.
+      if (
+        isChildOf(instance, suspenseNode.instance, parentSuspenseNode.instance)
+      ) {
+        foundOne = true;
+        // The suspenseNode was child of the bailed out Fiber.
+        // First, remove it from the remaining children set.
+        const nextRemainingSibling = suspenseNode.nextSibling;
+        if (previousSkippedSibling === null) {
+          remainingReconcilingChildrenSuspenseNodes = nextRemainingSibling;
+        } else {
+          previousSkippedSibling.nextSibling = nextRemainingSibling;
+        }
+        suspenseNode.nextSibling = null;
+        // Then, re-insert it into the newly reconciled set.
+        if (previouslyReconciledSiblingSuspenseNode === null) {
+          parentSuspenseNode.firstChild = suspenseNode;
+        } else {
+          previouslyReconciledSiblingSuspenseNode.nextSibling = suspenseNode;
+        }
+        previouslyReconciledSiblingSuspenseNode = suspenseNode;
+        // While React didn't rerender this node, it's possible that it was affected by
+        // layout due to mutation of a parent or sibling. Check if it changed size.
+        measureUnchangedSuspenseNodesRecursively(suspenseNode);
+        // Continue
+        suspenseNode = nextRemainingSibling;
+      } else if (foundOne) {
+        // If we found one and then hit a miss, we assume that we're passed the sequence because
+        // they should've all been consecutive.
+        break;
+      } else {
+        previousSkippedSibling = suspenseNode;
+        suspenseNode = suspenseNode.nextSibling;
+      }
+    }
+  }
+
+  function mountVirtualInstanceRecursively(
+    virtualInstance: VirtualInstance,
+    firstChild: Fiber,
+    lastChild: null | Fiber, // non-inclusive
+    traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
+  ): void {
+    // If we have the tree selection from previous reload, try to match this Instance.
+    // Also remember whether to do the same for siblings.
+    const mightSiblingsBeOnTrackedPath =
+      updateVirtualTrackedPathStateBeforeMount(
+        virtualInstance,
+        reconcilingParent,
+      );
+
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    // Push a new DevTools instance parent while reconciling this subtree.
+    reconcilingParent = virtualInstance;
+    previouslyReconciledSibling = null;
+    remainingReconcilingChildren = null;
+    try {
+      mountVirtualChildrenRecursively(
+        firstChild,
+        lastChild,
+        traceNearestHostComponentUpdate,
+        virtualLevel + 1,
+      );
+      // Must be called after all children have been appended.
+      recordVirtualProfilingDurations(virtualInstance);
+    } finally {
+      reconcilingParent = stashedParent;
+      previouslyReconciledSibling = stashedPrevious;
+      remainingReconcilingChildren = stashedRemaining;
+      updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);
+    }
+  }
+
+  function recordVirtualUnmount(instance: VirtualInstance) {
+    recordVirtualDisconnect(instance);
+    idToDevToolsInstanceMap.delete(instance.id);
+  }
+
+  function recordVirtualDisconnect(instance: VirtualInstance) {
+    if (isInDisconnectedSubtree) {
+      return;
+    }
+    if (trackedPathMatchInstance === instance) {
+      // 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.
+      setTrackedPath(null);
+    }
+
+    const id = instance.id;
+    pendingRealUnmountedIDs.push(id);
+  }
+
+  function getSecondaryEnvironmentName(
+    debugInfo: ?ReactDebugInfo,
+    index: number,
+  ): null | string {
+    if (debugInfo != null) {
+      const componentInfo: ReactComponentInfo = (debugInfo[index]: any);
+      for (let i = index + 1; i < debugInfo.length; i++) {
+        const debugEntry = debugInfo[i];
+        if (typeof debugEntry.env === 'string') {
+          // If the next environment is different then this component was the boundary
+          // and it changed before entering the next component. So we assign this
+          // component a secondary environment.
+          return componentInfo.env !== debugEntry.env ? debugEntry.env : null;
+        }
+      }
+    }
+    return null;
+  }
+
+  function trackDebugInfoFromLazyType(fiber: Fiber): void {
+    // The debugInfo from a Lazy isn't propagated onto _debugInfo of the parent Fiber the way
+    // it is when used in child position. So we need to pick it up explicitly.
+    const type = fiber.elementType;
+    const typeSymbol = getTypeSymbol(type); // The elementType might be have been a LazyComponent.
+    if (typeSymbol === LAZY_SYMBOL_STRING) {
+      const debugInfo: ?ReactDebugInfo = type._debugInfo;
+      if (debugInfo) {
+        for (let i = 0; i < debugInfo.length; i++) {
+          const debugEntry = debugInfo[i];
+          if (debugEntry.awaited) {
+            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            insertSuspendedBy(asyncInfo);
+          }
+        }
+      }
+    }
+  }
+
+  function trackDebugInfoFromUsedThenables(fiber: Fiber): void {
+    // If a Fiber called use() in DEV mode then we may have collected _debugThenableState on
+    // the dependencies. If so, then this will contain the thenables passed to use().
+    // These won't have their debug info picked up by fiber._debugInfo since that just
+    // contains things suspending the children. We have to collect use() separately.
+    const dependencies = fiber.dependencies;
+    if (dependencies == null) {
+      return;
+    }
+    const thenableState = dependencies._debugThenableState;
+    if (thenableState == null) {
+      return;
+    }
+    // In DEV the thenableState is an inner object.
+    const usedThenables: any = thenableState.thenables || thenableState;
+    if (!Array.isArray(usedThenables)) {
+      return;
+    }
+    for (let i = 0; i < usedThenables.length; i++) {
+      const thenable: Thenable<mixed> = usedThenables[i];
+      const debugInfo = thenable._debugInfo;
+      if (debugInfo) {
+        for (let j = 0; j < debugInfo.length; j++) {
+          const debugEntry = debugInfo[j];
+          if (debugEntry.awaited) {
+            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            insertSuspendedBy(asyncInfo);
+          }
+        }
+      }
+    }
+  }
+
+  const hostAsyncInfoCache: WeakMap<{...}, ReactAsyncInfo> = new WeakMap();
+
+  function trackDebugInfoFromHostResource(
+    devtoolsInstance: DevToolsInstance,
+    fiber: Fiber,
+  ): void {
+    const resource: ?{
+      type: 'stylesheet' | 'style' | 'script' | 'void',
+      instance?: null | HostInstance,
+      ...
+    } = fiber.memoizedState;
+    if (resource == null) {
+      return;
+    }
+
+    // Use a cached entry based on the resource. This ensures that if we use the same
+    // resource in multiple places, it gets deduped and inner boundaries don't consider it
+    // as contributing to those boundaries.
+    const existingEntry = hostAsyncInfoCache.get(resource);
+    if (existingEntry !== undefined) {
+      insertSuspendedBy(existingEntry);
+      return;
+    }
+
+    const props: {
+      href?: string,
+      media?: string,
+      ...
+    } = fiber.memoizedProps;
+
+    // Stylesheet resources may suspend. We need to track that.
+    const mayResourceSuspendCommit =
+      resource.type === 'stylesheet' &&
+      // If it doesn't match the currently debugged media, then it doesn't count.
+      (typeof props.media !== 'string' ||
+        typeof matchMedia !== 'function' ||
+        matchMedia(props.media));
+    if (!mayResourceSuspendCommit) {
+      return;
+    }
+
+    const instance = resource.instance;
+    if (instance == null) {
+      return;
+    }
+
+    // Unlike props.href, this href will be fully qualified which we need for comparison below.
+    const href = instance.href;
+    if (typeof href !== 'string') {
+      return;
+    }
+    let start = -1;
+    let end = -1;
+    let byteSize = 0;
+    // $FlowFixMe[method-unbinding]
+    if (typeof performance.getEntriesByType === 'function') {
+      // We may be able to collect the start and end time of this resource from Performance Observer.
+      const resourceEntries = performance.getEntriesByType('resource');
+      for (let i = 0; i < resourceEntries.length; i++) {
+        const resourceEntry = resourceEntries[i];
+        if (resourceEntry.name === href) {
+          start = resourceEntry.startTime;
+          end = start + resourceEntry.duration;
+          // $FlowFixMe[prop-missing]
+          byteSize = (resourceEntry.transferSize: any) || 0;
+        }
+      }
+    }
+    const value = instance.sheet;
+    const promise = Promise.resolve(value);
+    (promise: any).status = 'fulfilled';
+    (promise: any).value = value;
+    const ioInfo: ReactIOInfo = {
+      name: 'stylesheet',
+      start,
+      end,
+      value: promise,
+      // $FlowFixMe: This field doesn't usually take a Fiber but we're only using inside this file.
+      owner: fiber, // Allow linking to the <link> if it's not filtered.
+    };
+    if (byteSize > 0) {
+      // $FlowFixMe[cannot-write]
+      ioInfo.byteSize = byteSize;
+    }
+    const asyncInfo: ReactAsyncInfo = {
+      awaited: ioInfo,
+      // $FlowFixMe: This field doesn't usually take a Fiber but we're only using inside this file.
+      owner: fiber._debugOwner == null ? null : fiber._debugOwner,
+      debugStack: fiber._debugStack == null ? null : fiber._debugStack,
+      debugTask: fiber._debugTask == null ? null : fiber._debugTask,
+    };
+    hostAsyncInfoCache.set(resource, asyncInfo);
+    insertSuspendedBy(asyncInfo);
+  }
+
+  function trackDebugInfoFromHostComponent(
+    devtoolsInstance: DevToolsInstance,
+    fiber: Fiber,
+  ): void {
+    if (fiber.tag !== HostComponent) {
+      return;
+    }
+    if ((fiber.mode & SuspenseyImagesMode) === 0) {
+      // In any released version, Suspensey Images are only enabled inside a ViewTransition
+      // subtree, which is enabled by the SuspenseyImagesMode.
+      // TODO: If we ever enable the enableSuspenseyImages flag then it would be enabled for
+      // all images and we'd need some other check for if the version of React has that enabled.
+      return;
+    }
+
+    const type = fiber.type;
+    const props: {
+      src?: string,
+      onLoad?: (event: any) => void,
+      loading?: 'eager' | 'lazy',
+      ...
+    } = fiber.memoizedProps;
+
+    const maySuspendCommit =
+      type === 'img' &&
+      props.src != null &&
+      props.src !== '' &&
+      props.onLoad == null &&
+      props.loading !== 'lazy';
+
+    // Note: We don't track "maySuspendCommitOnUpdate" separately because it doesn't matter if
+    // it didn't suspend this particular update if it would've suspended if it mounted in this
+    // state, since we're tracking the dependencies inside the current state.
+
+    if (!maySuspendCommit) {
+      return;
+    }
+
+    const instance = fiber.stateNode;
+    if (instance == null) {
+      // Should never happen.
+      return;
+    }
+
+    // Unlike props.src, currentSrc will be fully qualified which we need for comparison below.
+    // Unlike instance.src it will be resolved into the media queries currently matching which is
+    // the state we're inspecting.
+    const src = instance.currentSrc;
+    if (typeof src !== 'string' || src === '') {
+      return;
+    }
+    let start = -1;
+    let end = -1;
+    let byteSize = 0;
+    let fileSize = 0;
+    // $FlowFixMe[method-unbinding]
+    if (typeof performance.getEntriesByType === 'function') {
+      // We may be able to collect the start and end time of this resource from Performance Observer.
+      const resourceEntries = performance.getEntriesByType('resource');
+      for (let i = 0; i < resourceEntries.length; i++) {
+        const resourceEntry = resourceEntries[i];
+        if (resourceEntry.name === src) {
+          start = resourceEntry.startTime;
+          end = start + resourceEntry.duration;
+          // $FlowFixMe[prop-missing]
+          fileSize = (resourceEntry.decodedBodySize: any) || 0;
+          // $FlowFixMe[prop-missing]
+          byteSize = (resourceEntry.transferSize: any) || 0;
+        }
+      }
+    }
+    // A representation of the image data itself.
+    // TODO: We could render a little preview in the front end from the resource API.
+    const value: {
+      currentSrc: string,
+      naturalWidth?: number,
+      naturalHeight?: number,
+      fileSize?: number,
+    } = {
+      currentSrc: src,
+    };
+    if (instance.naturalWidth > 0 && instance.naturalHeight > 0) {
+      // The intrinsic size of the file value itself, if it's loaded
+      value.naturalWidth = instance.naturalWidth;
+      value.naturalHeight = instance.naturalHeight;
+    }
+    if (fileSize > 0) {
+      // Cross-origin images won't have a file size that we can access.
+      value.fileSize = fileSize;
+    }
+    const promise = Promise.resolve(value);
+    (promise: any).status = 'fulfilled';
+    (promise: any).value = value;
+    const ioInfo: ReactIOInfo = {
+      name: 'img',
+      start,
+      end,
+      value: promise,
+      // $FlowFixMe: This field doesn't usually take a Fiber but we're only using inside this file.
+      owner: fiber, // Allow linking to the <link> if it's not filtered.
+    };
+    if (byteSize > 0) {
+      // $FlowFixMe[cannot-write]
+      ioInfo.byteSize = byteSize;
+    }
+    const asyncInfo: ReactAsyncInfo = {
+      awaited: ioInfo,
+      // $FlowFixMe: This field doesn't usually take a Fiber but we're only using inside this file.
+      owner: fiber._debugOwner == null ? null : fiber._debugOwner,
+      debugStack: fiber._debugStack == null ? null : fiber._debugStack,
+      debugTask: fiber._debugTask == null ? null : fiber._debugTask,
+    };
+    insertSuspendedBy(asyncInfo);
+  }
+
+  function trackThrownPromisesFromRetryCache(
+    suspenseNode: SuspenseNode,
+    retryCache: ?WeakSet<Wakeable>,
+  ): void {
+    if (retryCache != null) {
+      // If a Suspense boundary ever committed in fallback state with a retryCache, that
+      // suggests that something unique to that boundary was suspensey since otherwise
+      // it wouldn't have thrown and so never created the retryCache.
+      // Unfortunately if we don't have any DEV time debug info or debug thenables then
+      // we have no meta data to show. However, we still mark this Suspense boundary as
+      // participating in the loading sequence since apparently it can suspend.
+      if (!suspenseNode.hasUniqueSuspenders) {
+        recordSuspenseSuspenders(suspenseNode);
+      }
+      suspenseNode.hasUniqueSuspenders = true;
+      // We have not seen any reason yet for why this suspense node might have been
+      // suspended but it clearly has been at some point. If we later discover a reason
+      // we'll clear this flag again.
+      suspenseNode.hasUnknownSuspenders = true;
+    }
+  }
+
+  function mountVirtualChildrenRecursively(
+    firstChild: Fiber,
+    lastChild: null | Fiber, // non-inclusive
+    traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
+  ): void {
+    // Iterate over siblings rather than recursing.
+    // This reduces the chance of stack overflow for wide trees (e.g. lists with many items).
+    let fiber: Fiber | null = firstChild;
+    let previousVirtualInstance: null | VirtualInstance = null;
+    let previousVirtualInstanceFirstFiber: Fiber = firstChild;
+    while (fiber !== null && fiber !== lastChild) {
+      let level = 0;
+      if (fiber._debugInfo) {
+        for (let i = 0; i < fiber._debugInfo.length; i++) {
+          const debugEntry = fiber._debugInfo[i];
+          if (debugEntry.awaited) {
+            // Async Info
+            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            if (level === virtualLevel) {
+              // Track any async info between the previous virtual instance up until to this
+              // instance and add it to the parent. This can add the same set multiple times
+              // so we assume insertSuspendedBy dedupes.
+              insertSuspendedBy(asyncInfo);
+            }
+            continue;
+          }
+          if (typeof debugEntry.name !== 'string') {
+            // Not a Component. Some other Debug Info.
+            continue;
+          }
+          // Scan up until the next Component to see if this component changed environment.
+          const componentInfo: ReactComponentInfo = (debugEntry: any);
+          const secondaryEnv = getSecondaryEnvironmentName(fiber._debugInfo, i);
+          if (componentInfo.env != null) {
+            knownEnvironmentNames.add(componentInfo.env);
+          }
+          if (secondaryEnv !== null) {
+            knownEnvironmentNames.add(secondaryEnv);
+          }
+          if (shouldFilterVirtual(componentInfo, secondaryEnv)) {
+            // Skip.
+            continue;
+          }
+          if (level === virtualLevel) {
+            if (
+              previousVirtualInstance === null ||
+              // Consecutive children with the same debug entry as a parent gets
+              // treated as if they share the same virtual instance.
+              previousVirtualInstance.data !== debugEntry
+            ) {
+              if (previousVirtualInstance !== null) {
+                // Mount any previous children that should go into the previous parent.
+                mountVirtualInstanceRecursively(
+                  previousVirtualInstance,
+                  previousVirtualInstanceFirstFiber,
+                  fiber,
+                  traceNearestHostComponentUpdate,
+                  virtualLevel,
+                );
+              }
+              previousVirtualInstance = createVirtualInstance(componentInfo);
+              recordVirtualMount(
+                previousVirtualInstance,
+                reconcilingParent,
+                secondaryEnv,
+              );
+              insertChild(previousVirtualInstance);
+              previousVirtualInstanceFirstFiber = fiber;
+            }
+            level++;
+            break;
+          } else {
+            level++;
+          }
+        }
+      }
+      if (level === virtualLevel) {
+        if (previousVirtualInstance !== null) {
+          // If we were working on a virtual instance and this is not a virtual
+          // instance, then we end the sequence and mount any previous children
+          // that should go into the previous virtual instance.
+          mountVirtualInstanceRecursively(
+            previousVirtualInstance,
+            previousVirtualInstanceFirstFiber,
+            fiber,
+            traceNearestHostComponentUpdate,
+            virtualLevel,
+          );
+          previousVirtualInstance = null;
+        }
+        // We've reached the end of the virtual levels, but not beyond,
+        // and now continue with the regular fiber.
+        mountFiberRecursively(fiber, traceNearestHostComponentUpdate);
+      }
+      fiber = fiber.sibling;
+    }
+    if (previousVirtualInstance !== null) {
+      // Mount any previous children that should go into the previous parent.
+      mountVirtualInstanceRecursively(
+        previousVirtualInstance,
+        previousVirtualInstanceFirstFiber,
+        null,
+        traceNearestHostComponentUpdate,
+        virtualLevel,
+      );
+    }
+  }
+
+  function mountChildrenRecursively(
+    firstChild: Fiber,
+    traceNearestHostComponentUpdate: boolean,
+  ): void {
+    mountVirtualChildrenRecursively(
+      firstChild,
+      null,
+      traceNearestHostComponentUpdate,
+      0, // first level
+    );
+  }
+
+  function mountSuspenseChildrenRecursively(
+    contentFiber: Fiber,
+    traceNearestHostComponentUpdate: boolean,
+    stashedSuspenseParent: SuspenseNode | null,
+    stashedSuspensePrevious: SuspenseNode | null,
+    stashedSuspenseRemaining: SuspenseNode | null,
+  ) {
+    const fallbackFiber = contentFiber.sibling;
+
+    // First update only the Offscreen boundary. I.e. the main content.
+    mountVirtualChildrenRecursively(
+      contentFiber,
+      fallbackFiber,
+      traceNearestHostComponentUpdate,
+      0, // first level
+    );
+
+    // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
+    // reconcile the fallback, reconciling anything by inserting into the parent SuspenseNode.
+    // Since the fallback conceptually blocks the parent.
+    reconcilingParentSuspenseNode = stashedSuspenseParent;
+    previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+    remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+    if (fallbackFiber !== null) {
+      mountVirtualChildrenRecursively(
+        fallbackFiber,
+        null,
+        traceNearestHostComponentUpdate,
+        0, // first level
+      );
+    }
+  }
+
+  function mountFiberRecursively(
+    fiber: Fiber,
+    traceNearestHostComponentUpdate: boolean,
+  ): void {
+    const isFocusedActivityEntry =
+      focusedActivity !== null &&
+      (fiber === focusedActivity || fiber.alternate === focusedActivity);
+    if (isFocusedActivityEntry) {
+      isInFocusedActivity = true;
+    }
+
+    const shouldIncludeInTree = !shouldFilterFiber(fiber);
+    let newInstance = null;
+    let newSuspenseNode = null;
+    if (shouldIncludeInTree) {
+      newInstance = recordMount(fiber, reconcilingParent);
+      if (isFocusedActivityEntry) {
+        focusedActivityID = newInstance.id;
+        pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);
+        pushOperation(newInstance.id);
+      }
+      if (fiber.tag === SuspenseComponent || fiber.tag === HostRoot) {
+        newSuspenseNode = createSuspenseNode(newInstance);
+        // Measure this Suspense node. In general we shouldn't do this until we have
+        // inserted the new children but since we know this is a FiberInstance we'll
+        // just use the Fiber anyway.
+        // Fallbacks get attributed to the parent so we only measure if we're
+        // showing primary content.
+        if (fiber.tag === SuspenseComponent) {
+          if (OffscreenComponent === -1) {
+            const isTimedOut = fiber.memoizedState !== null;
+            if (!isTimedOut) {
+              newSuspenseNode.rects = measureInstance(newInstance);
+            }
+          } else {
+            const hydrated = isFiberHydrated(fiber);
+            if (hydrated) {
+              const contentFiber = fiber.child;
+              if (contentFiber === null) {
+                throw new Error(
+                  'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+                );
+              }
+            } else {
+              // This Suspense Fiber is still dehydrated. It won't have any children
+              // until hydration.
+            }
+            const isTimedOut = fiber.memoizedState !== null;
+            if (!isTimedOut) {
+              newSuspenseNode.rects = measureInstance(newInstance);
+            }
+          }
+        } else {
+          newSuspenseNode.rects = measureInstance(newInstance);
+        }
+        recordSuspenseMount(newSuspenseNode, reconcilingParentSuspenseNode);
+      }
+      insertChild(newInstance);
+      if (__DEBUG__) {
+        debug('mountFiberRecursively()', newInstance, reconcilingParent);
+      }
+    } else if (
+      (reconcilingParent !== null &&
+        reconcilingParent.kind === VIRTUAL_INSTANCE) ||
+      fiber.tag === SuspenseComponent ||
+      // Use to keep resuspended instances alive inside a SuspenseComponent.
+      fiber.tag === OffscreenComponent ||
+      fiber.tag === LegacyHiddenComponent
+    ) {
+      // If the parent is a Virtual Instance and we filtered this Fiber we include a
+      // hidden node. We also include this if it's a Suspense boundary so we can track those
+      // in the Suspense tree.
+      if (
+        reconcilingParent !== null &&
+        reconcilingParent.kind === VIRTUAL_INSTANCE &&
+        reconcilingParent.data === fiber._debugOwner &&
+        fiber._debugStack != null &&
+        reconcilingParent.source === null
+      ) {
+        // The new Fiber is directly owned by the parent. Therefore somewhere on the
+        // debugStack will be a stack frame inside parent that we can use as its soruce.
+        reconcilingParent.source = fiber._debugStack;
+      }
+
+      newInstance = createFilteredFiberInstance(fiber);
+      if (fiber.tag === SuspenseComponent) {
+        newSuspenseNode = createSuspenseNode(newInstance);
+        // Measure this Suspense node. In general we shouldn't do this until we have
+        // inserted the new children but since we know this is a FiberInstance we'll
+        // just use the Fiber anyway.
+        // Fallbacks get attributed to the parent so we only measure if we're
+        // showing primary content.
+        if (OffscreenComponent === -1) {
+          const isTimedOut = fiber.memoizedState !== null;
+          if (!isTimedOut) {
+            newSuspenseNode.rects = measureInstance(newInstance);
+          }
+        } else {
+          const hydrated = isFiberHydrated(fiber);
+          if (hydrated) {
+            const contentFiber = fiber.child;
+            if (contentFiber === null) {
+              throw new Error(
+                'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+              );
+            }
+          } else {
+            // This Suspense Fiber is still dehydrated. It won't have any children
+            // until hydration.
+          }
+          const suspenseState = fiber.memoizedState;
+          const isTimedOut = suspenseState !== null;
+          if (!isTimedOut) {
+            newSuspenseNode.rects = measureInstance(newInstance);
+          }
+        }
+      }
+      insertChild(newInstance);
+      if (__DEBUG__) {
+        debug('mountFiberRecursively()', newInstance, reconcilingParent);
+      }
+    }
+
+    // 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,
+      newInstance,
+    );
+
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    const stashedSuspenseParent = reconcilingParentSuspenseNode;
+    const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
+    const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
+    const stashedIsInActivitySlice = isInFocusedActivity;
+    if (newInstance !== null) {
+      // Push a new DevTools instance parent while reconciling this subtree.
+      reconcilingParent = newInstance;
+      previouslyReconciledSibling = null;
+      remainingReconcilingChildren = null;
+    }
+    let shouldPopSuspenseNode = false;
+    if (newSuspenseNode !== null) {
+      reconcilingParentSuspenseNode = newSuspenseNode;
+      previouslyReconciledSiblingSuspenseNode = null;
+      remainingReconcilingChildrenSuspenseNodes = null;
+      shouldPopSuspenseNode = true;
+    }
+    if (
+      !isFocusedActivityEntry &&
+      focusedActivity !== null &&
+      fiber.tag === ActivityComponent
+    ) {
+      // We're not filtering how Activity within the focused activity.
+      // We cut of the bottom in the Frontend if we want to just show the
+      // Activity slice instead of all Activity descendants.
+      // The filtering in the backend only happens because filtering out
+      // everything above the focused Activity is hard to implement in the frontend.
+    }
+    try {
+      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.
+      }
+
+      trackDebugInfoFromLazyType(fiber);
+      trackDebugInfoFromUsedThenables(fiber);
+
+      if (fiber.tag === HostHoistable) {
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        aquireHostResource(nearestInstance, fiber.memoizedState);
+        trackDebugInfoFromHostResource(nearestInstance, fiber);
+      } else if (
+        fiber.tag === HostComponent ||
+        fiber.tag === HostText ||
+        fiber.tag === HostSingleton
+      ) {
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        aquireHostInstance(nearestInstance, fiber.stateNode);
+        trackDebugInfoFromHostComponent(nearestInstance, fiber);
+      }
+
+      if (isSuspendedOffscreen(fiber)) {
+        // If an Offscreen component is hidden, mount its children as disconnected.
+        const stashedDisconnected = isInDisconnectedSubtree;
+        isInDisconnectedSubtree = true;
+        try {
+          if (fiber.child !== null) {
+            mountChildrenRecursively(fiber.child, false);
+          }
+        } finally {
+          isInDisconnectedSubtree = stashedDisconnected;
+        }
+      } else if (isHiddenOffscreen(fiber)) {
+        // hidden Activity is noisy.
+        // Including it may show overlapping Suspense rects
+      } else if (fiber.tag === SuspenseComponent && OffscreenComponent === -1) {
+        // Legacy Suspense without the Offscreen wrapper. For the modern Suspense we just handle the
+        // Offscreen wrapper itself specially.
+        if (newSuspenseNode !== null) {
+          trackThrownPromisesFromRetryCache(newSuspenseNode, fiber.stateNode);
+        }
+        const isTimedOut = fiber.memoizedState !== null;
+        if (isTimedOut) {
+          // 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;
+          if (fallbackChildFragment) {
+            const fallbackChild = fallbackChildFragment.child;
+            if (fallbackChild !== null) {
+              updateTrackedPathStateBeforeMount(fallbackChildFragment, null);
+              mountChildrenRecursively(
+                fallbackChild,
+                traceNearestHostComponentUpdate,
+              );
+            }
+          }
+          // TODO: Track SuspenseNode in resuspended trees.
+        } else {
+          const primaryChild: Fiber | null = fiber.child;
+          if (primaryChild !== null) {
+            mountChildrenRecursively(
+              primaryChild,
+              traceNearestHostComponentUpdate,
+            );
+          }
+        }
+      } else if (
+        fiber.tag === SuspenseComponent &&
+        OffscreenComponent !== -1 &&
+        newInstance !== null &&
+        newSuspenseNode !== null
+      ) {
+        // Modern Suspense path
+        const contentFiber = fiber.child;
+        const hydrated = isFiberHydrated(fiber);
+        if (hydrated) {
+          if (contentFiber === null) {
+            throw new Error(
+              'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+            );
+          }
+
+          trackThrownPromisesFromRetryCache(newSuspenseNode, fiber.stateNode);
+
+          mountSuspenseChildrenRecursively(
+            contentFiber,
+            traceNearestHostComponentUpdate,
+            stashedSuspenseParent,
+            stashedSuspensePrevious,
+            stashedSuspenseRemaining,
+          );
+          // mountSuspenseChildrenRecursively popped already
+          shouldPopSuspenseNode = false;
+        } else {
+          // This Suspense Fiber is still dehydrated. It won't have any children
+          // until hydration.
+        }
+      } else {
+        if (fiber.child !== null) {
+          mountChildrenRecursively(
+            fiber.child,
+            traceNearestHostComponentUpdate,
+          );
+        }
+      }
+    } finally {
+      isInFocusedActivity = stashedIsInActivitySlice;
+      if (newInstance !== null) {
+        reconcilingParent = stashedParent;
+        previouslyReconciledSibling = stashedPrevious;
+        remainingReconcilingChildren = stashedRemaining;
+      }
+      if (shouldPopSuspenseNode) {
+        reconcilingParentSuspenseNode = stashedSuspenseParent;
+        previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+        remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+      }
+    }
+
+    // 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);
+  }
+
+  // We use this to simulate unmounting for Suspense trees
+  // when we switch from primary to fallback, or deleting a subtree.
+  function unmountInstanceRecursively(instance: DevToolsInstance) {
+    if (__DEBUG__) {
+      debug('unmountInstanceRecursively()', instance, reconcilingParent);
+    }
+
+    let shouldPopSuspenseNode = false;
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    const stashedSuspenseParent = reconcilingParentSuspenseNode;
+    const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
+    const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
+    const stashedIsInActivitySlice = isInFocusedActivity;
+    const previousSuspendedBy = instance.suspendedBy;
+    // Push a new DevTools instance parent while reconciling this subtree.
+    reconcilingParent = instance;
+    previouslyReconciledSibling = null;
+    // Move all the children of this instance to the remaining set.
+    remainingReconcilingChildren = instance.firstChild;
+    instance.firstChild = null;
+    instance.suspendedBy = null;
+
+    if (instance.suspenseNode !== null) {
+      reconcilingParentSuspenseNode = instance.suspenseNode;
+      previouslyReconciledSiblingSuspenseNode = null;
+      remainingReconcilingChildrenSuspenseNodes =
+        instance.suspenseNode.firstChild;
+
+      shouldPopSuspenseNode = true;
+    }
+
+    if (focusedActivity !== null) {
+      if (instance.id === focusedActivityID) {
+        isInFocusedActivity = true;
+      } else if (
+        instance.kind === FIBER_INSTANCE &&
+        instance.data !== null &&
+        instance.data.tag === ActivityComponent
+      ) {
+        // Filtering nested Activity components inside the focused activity
+        // is done in the frontend.
+      }
+    }
+
+    try {
+      // Unmount the remaining set.
+      if (
+        (instance.kind === FIBER_INSTANCE ||
+          instance.kind === FILTERED_FIBER_INSTANCE) &&
+        instance.data.tag === SuspenseComponent &&
+        OffscreenComponent !== -1
+      ) {
+        const fiber = instance.data;
+        const contentFiberInstance = remainingReconcilingChildren;
+        const hydrated = isFiberHydrated(fiber);
+        if (hydrated) {
+          if (contentFiberInstance === null) {
+            throw new Error(
+              'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+            );
+          }
+
+          unmountSuspenseChildrenRecursively(
+            contentFiberInstance,
+            stashedSuspenseParent,
+            stashedSuspensePrevious,
+            stashedSuspenseRemaining,
+          );
+          // unmountSuspenseChildren already popped
+          shouldPopSuspenseNode = false;
+        } else {
+          if (contentFiberInstance !== null) {
+            throw new Error(
+              'A dehydrated Suspense node should not have a content Fiber.',
+            );
+          }
+        }
+      } else {
+        unmountRemainingChildren();
+      }
+      removePreviousSuspendedBy(
+        instance,
+        previousSuspendedBy,
+        reconcilingParentSuspenseNode,
+      );
+    } finally {
+      reconcilingParent = stashedParent;
+      previouslyReconciledSibling = stashedPrevious;
+      remainingReconcilingChildren = stashedRemaining;
+      if (shouldPopSuspenseNode) {
+        reconcilingParentSuspenseNode = stashedSuspenseParent;
+        previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+        remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+      }
+      isInFocusedActivity = stashedIsInActivitySlice;
+    }
+    if (instance.kind === FIBER_INSTANCE) {
+      recordUnmount(instance);
+    } else if (instance.kind === VIRTUAL_INSTANCE) {
+      recordVirtualUnmount(instance);
+    } else {
+      untrackFiber(instance, instance.data);
+    }
+    removeChild(instance, null);
+  }
+
+  function recordProfilingDurations(
+    fiberInstance: FiberInstance,
+    prevFiber: null | Fiber,
+  ) {
+    const id = fiberInstance.id;
+    const fiber = fiberInstance.data;
+    const {actualDuration, treeBaseDuration} = fiber;
+
+    fiberInstance.treeBaseDuration = treeBaseDuration || 0;
+
+    if (isProfiling) {
+      // It's important to update treeBaseDuration even if the current Fiber did not render,
+      // because it's possible that one of its descendants did.
+      if (
+        prevFiber == null ||
+        treeBaseDuration !== prevFiber.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 (prevFiber == null || didFiberRender(prevFiber, 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(prevFiber, fiber);
+            if (changeDescription !== null) {
+              if (metadata.changeDescriptions !== null) {
+                metadata.changeDescriptions.set(id, changeDescription);
+              }
+            }
+          }
+        }
+      }
+
+      // If this Fiber was in the set of memoizedUpdaters we need to record
+      // it to be included in the description of the commit.
+      const fiberRoot: FiberRoot = currentRoot.data.stateNode;
+      const updaters = fiberRoot.memoizedUpdaters;
+      if (
+        updaters != null &&
+        (updaters.has(fiber) ||
+          // We check the alternate here because we're matching identity and
+          // prevFiber might be same as fiber.
+          (fiber.alternate !== null && updaters.has(fiber.alternate)))
+      ) {
+        const metadata =
+          ((currentCommitProfilingMetadata: any): CommitProfilingData);
+        if (metadata.updaters === null) {
+          metadata.updaters = [];
+        }
+        metadata.updaters.push(instanceToSerializedElement(fiberInstance));
+      }
+    }
+  }
+
+  function recordVirtualProfilingDurations(virtualInstance: VirtualInstance) {
+    const id = virtualInstance.id;
+
+    let treeBaseDuration = 0;
+    // Add up the base duration of the child instances. The virtual base duration
+    // will be the same as children's duration since we don't take up any render
+    // time in the virtual instance.
+    for (
+      let child = virtualInstance.firstChild;
+      child !== null;
+      child = child.nextSibling
+    ) {
+      treeBaseDuration += child.treeBaseDuration;
+    }
+
+    if (isProfiling) {
+      const previousTreeBaseDuration = virtualInstance.treeBaseDuration;
+      if (treeBaseDuration !== previousTreeBaseDuration) {
+        // 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);
+      }
+    }
+
+    virtualInstance.treeBaseDuration = treeBaseDuration;
+  }
+
+  function addUnfilteredChildrenIDs(
+    parentInstance: DevToolsInstance,
+    nextChildren: Array<number>,
+  ): void {
+    let child: null | DevToolsInstance = parentInstance.firstChild;
+    while (child !== null) {
+      if (child.kind === FILTERED_FIBER_INSTANCE) {
+        const fiber = child.data;
+        if (isHiddenOffscreen(fiber)) {
+          // The children of this Offscreen are hidden so they don't get added.
+        } else {
+          addUnfilteredChildrenIDs(child, nextChildren);
+        }
+      } else {
+        nextChildren.push(child.id);
+      }
+      child = child.nextSibling;
+    }
+  }
+
+  function recordResetChildren(
+    parentInstance: FiberInstance | VirtualInstance,
+  ) {
+    if (__DEBUG__) {
+      if (parentInstance.firstChild !== null) {
+        debug(
+          'recordResetChildren()',
+          parentInstance.firstChild,
+          parentInstance,
+        );
+      }
+    }
+    // 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> = [];
+
+    addUnfilteredChildrenIDs(parentInstance, nextChildren);
+
+    const numChildren = nextChildren.length;
+    if (numChildren < 2) {
+      // No need to reorder.
+      return;
+    }
+    pushOperation(TREE_OPERATION_REORDER_CHILDREN);
+    pushOperation(parentInstance.id);
+    pushOperation(numChildren);
+    for (let i = 0; i < nextChildren.length; i++) {
+      pushOperation(nextChildren[i]);
+    }
+  }
+
+  function addUnfilteredSuspenseChildrenIDs(
+    parentInstance: SuspenseNode,
+    nextChildren: Array<number>,
+  ): void {
+    let child: null | SuspenseNode = parentInstance.firstChild;
+    while (child !== null) {
+      if (child.instance.kind === FILTERED_FIBER_INSTANCE) {
+        addUnfilteredSuspenseChildrenIDs(child, nextChildren);
+      } else {
+        nextChildren.push(child.instance.id);
+      }
+      child = child.nextSibling;
+    }
+  }
+
+  function recordResetSuspenseChildren(parentInstance: SuspenseNode) {
+    if (__DEBUG__) {
+      if (parentInstance.firstChild !== null) {
+        console.log(
+          'recordResetSuspenseChildren()',
+          parentInstance.firstChild,
+          parentInstance,
+        );
+      }
+    }
+    // The frontend only really cares about the name, 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> = [];
+
+    addUnfilteredSuspenseChildrenIDs(parentInstance, nextChildren);
+
+    const numChildren = nextChildren.length;
+    if (numChildren < 2) {
+      // No need to reorder.
+      return;
+    }
+    pushOperation(SUSPENSE_TREE_OPERATION_REORDER_CHILDREN);
+    // $FlowFixMe[incompatible-call] TODO: Allow filtering SuspenseNode
+    pushOperation(parentInstance.instance.id);
+    pushOperation(numChildren);
+    for (let i = 0; i < nextChildren.length; i++) {
+      pushOperation(nextChildren[i]);
+    }
+  }
+
+  function updateVirtualInstanceRecursively(
+    virtualInstance: VirtualInstance,
+    nextFirstChild: Fiber,
+    nextLastChild: null | Fiber, // non-inclusive
+    prevFirstChild: null | Fiber,
+    traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
+  ): UpdateFlags {
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    const previousSuspendedBy = virtualInstance.suspendedBy;
+    // Push a new DevTools instance parent while reconciling this subtree.
+    reconcilingParent = virtualInstance;
+    previouslyReconciledSibling = null;
+    // Move all the children of this instance to the remaining set.
+    // We'll move them back one by one, and anything that remains is deleted.
+    remainingReconcilingChildren = virtualInstance.firstChild;
+    virtualInstance.firstChild = null;
+    virtualInstance.suspendedBy = null;
+    try {
+      let updateFlags = updateVirtualChildrenRecursively(
+        nextFirstChild,
+        nextLastChild,
+        prevFirstChild,
+        traceNearestHostComponentUpdate,
+        virtualLevel + 1,
+      );
+      if ((updateFlags & ShouldResetChildren) !== NoUpdate) {
+        if (!isInDisconnectedSubtree) {
+          recordResetChildren(virtualInstance);
+        }
+        updateFlags &= ~ShouldResetChildren;
+      }
+      removePreviousSuspendedBy(
+        virtualInstance,
+        previousSuspendedBy,
+        reconcilingParentSuspenseNode,
+      );
+      // Update the errors/warnings count. If this Instance has switched to a different
+      // ReactComponentInfo instance, such as when refreshing Server Components, then
+      // we replace all the previous logs with the ones associated with the new ones rather
+      // than merging. Because deduping is expected to happen at the request level.
+      const componentLogsEntry = componentInfoToComponentLogsMap.get(
+        virtualInstance.data,
+      );
+      recordConsoleLogs(virtualInstance, componentLogsEntry);
+      // Must be called after all children have been appended.
+      recordVirtualProfilingDurations(virtualInstance);
+
+      return updateFlags;
+    } finally {
+      unmountRemainingChildren();
+      reconcilingParent = stashedParent;
+      previouslyReconciledSibling = stashedPrevious;
+      remainingReconcilingChildren = stashedRemaining;
+    }
+  }
+
+  function updateVirtualChildrenRecursively(
+    nextFirstChild: Fiber,
+    nextLastChild: null | Fiber, // non-inclusive
+    prevFirstChild: null | Fiber,
+    traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
+  ): UpdateFlags {
+    let updateFlags = NoUpdate;
+    // 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: null | Fiber = nextFirstChild;
+    let prevChildAtSameIndex = prevFirstChild;
+    let previousVirtualInstance: null | VirtualInstance = null;
+    let previousVirtualInstanceWasMount: boolean = false;
+    let previousVirtualInstanceNextFirstFiber: Fiber = nextFirstChild;
+    let previousVirtualInstancePrevFirstFiber: null | Fiber = prevFirstChild;
+    while (nextChild !== null && nextChild !== nextLastChild) {
+      let level = 0;
+      if (nextChild._debugInfo) {
+        for (let i = 0; i < nextChild._debugInfo.length; i++) {
+          const debugEntry = nextChild._debugInfo[i];
+          if (debugEntry.awaited) {
+            // Async Info
+            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            if (level === virtualLevel) {
+              // Track any async info between the previous virtual instance up until to this
+              // instance and add it to the parent. This can add the same set multiple times
+              // so we assume insertSuspendedBy dedupes.
+              insertSuspendedBy(asyncInfo);
+            }
+            continue;
+          }
+          if (typeof debugEntry.name !== 'string') {
+            // Not a Component. Some other Debug Info.
+            continue;
+          }
+          const componentInfo: ReactComponentInfo = (debugEntry: any);
+          const secondaryEnv = getSecondaryEnvironmentName(
+            nextChild._debugInfo,
+            i,
+          );
+          if (componentInfo.env != null) {
+            knownEnvironmentNames.add(componentInfo.env);
+          }
+          if (secondaryEnv !== null) {
+            knownEnvironmentNames.add(secondaryEnv);
+          }
+          if (shouldFilterVirtual(componentInfo, secondaryEnv)) {
+            continue;
+          }
+          if (level === virtualLevel) {
+            if (
+              previousVirtualInstance === null ||
+              // Consecutive children with the same debug entry as a parent gets
+              // treated as if they share the same virtual instance.
+              previousVirtualInstance.data !== componentInfo
+            ) {
+              if (previousVirtualInstance !== null) {
+                // Mount any previous children that should go into the previous parent.
+                if (previousVirtualInstanceWasMount) {
+                  mountVirtualInstanceRecursively(
+                    previousVirtualInstance,
+                    previousVirtualInstanceNextFirstFiber,
+                    nextChild,
+                    traceNearestHostComponentUpdate,
+                    virtualLevel,
+                  );
+                  updateFlags |=
+                    ShouldResetChildren | ShouldResetSuspenseChildren;
+                } else {
+                  updateFlags |= updateVirtualInstanceRecursively(
+                    previousVirtualInstance,
+                    previousVirtualInstanceNextFirstFiber,
+                    nextChild,
+                    previousVirtualInstancePrevFirstFiber,
+                    traceNearestHostComponentUpdate,
+                    virtualLevel,
+                  );
+                }
+              }
+              let previousSiblingOfBestMatch = null;
+              let bestMatch = remainingReconcilingChildren;
+              if (
+                componentInfo.key != null &&
+                componentInfo.key !== REACT_OPTIMISTIC_KEY
+              ) {
+                // If there is a key try to find a matching key in the set.
+                bestMatch = remainingReconcilingChildren;
+                while (bestMatch !== null) {
+                  if (
+                    bestMatch.kind === VIRTUAL_INSTANCE &&
+                    bestMatch.data.key === componentInfo.key
+                  ) {
+                    break;
+                  }
+                  previousSiblingOfBestMatch = bestMatch;
+                  bestMatch = bestMatch.nextSibling;
+                }
+              }
+              if (
+                bestMatch !== null &&
+                bestMatch.kind === VIRTUAL_INSTANCE &&
+                bestMatch.data.name === componentInfo.name &&
+                bestMatch.data.env === componentInfo.env &&
+                bestMatch.data.key === componentInfo.key
+              ) {
+                // If the previous children had a virtual instance in the same slot
+                // with the same name, then we claim it and reuse it for this update.
+                // Update it with the latest entry.
+                bestMatch.data = componentInfo;
+                moveChild(bestMatch, previousSiblingOfBestMatch);
+                previousVirtualInstance = bestMatch;
+                previousVirtualInstanceWasMount = false;
+              } else {
+                // Otherwise we create a new instance.
+                const newVirtualInstance = createVirtualInstance(componentInfo);
+                recordVirtualMount(
+                  newVirtualInstance,
+                  reconcilingParent,
+                  secondaryEnv,
+                );
+                insertChild(newVirtualInstance);
+                previousVirtualInstance = newVirtualInstance;
+                previousVirtualInstanceWasMount = true;
+                updateFlags |= ShouldResetChildren;
+              }
+              // Existing children might be reparented into this new virtual instance.
+              // TODO: This will cause the front end to error which needs to be fixed.
+              previousVirtualInstanceNextFirstFiber = nextChild;
+              previousVirtualInstancePrevFirstFiber = prevChildAtSameIndex;
+            }
+            level++;
+            break;
+          } else {
+            level++;
+          }
+        }
+      }
+      if (level === virtualLevel) {
+        if (previousVirtualInstance !== null) {
+          // If we were working on a virtual instance and this is not a virtual
+          // instance, then we end the sequence and update any previous children
+          // that should go into the previous virtual instance.
+          if (previousVirtualInstanceWasMount) {
+            mountVirtualInstanceRecursively(
+              previousVirtualInstance,
+              previousVirtualInstanceNextFirstFiber,
+              nextChild,
+              traceNearestHostComponentUpdate,
+              virtualLevel,
+            );
+            updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+          } else {
+            updateFlags |= updateVirtualInstanceRecursively(
+              previousVirtualInstance,
+              previousVirtualInstanceNextFirstFiber,
+              nextChild,
+              previousVirtualInstancePrevFirstFiber,
+              traceNearestHostComponentUpdate,
+              virtualLevel,
+            );
+          }
+          previousVirtualInstance = null;
+        }
+
+        // We've reached the end of the virtual levels, but not beyond,
+        // and now continue with the regular fiber.
+
+        // Do a fast pass over the remaining children to find the previous instance.
+        // TODO: This doesn't have the best O(n) for a large set of children that are
+        // reordered. Consider using a temporary map if it's not the very next one.
+        let prevChild;
+        if (prevChildAtSameIndex === nextChild) {
+          // This set is unchanged. We're just going through it to place all the
+          // children again.
+          prevChild = nextChild;
+        } else {
+          // We don't actually need to rely on the alternate here. We could also
+          // reconcile against stateNode, key or whatever. Doesn't have to be same
+          // Fiber pair.
+          prevChild = nextChild.alternate;
+        }
+        let previousSiblingOfExistingInstance = null;
+        let existingInstance = null;
+        if (prevChild !== null) {
+          existingInstance = remainingReconcilingChildren;
+          while (existingInstance !== null) {
+            if (existingInstance.data === prevChild) {
+              break;
+            }
+            previousSiblingOfExistingInstance = existingInstance;
+            existingInstance = existingInstance.nextSibling;
+          }
+        }
+        if (existingInstance !== null) {
+          // Common case. Match in the same parent.
+          const fiberInstance: FiberInstance | FilteredFiberInstance =
+            (existingInstance: any); // Only matches if it's a Fiber.
+
+          // We 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) {
+            updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+          }
+
+          moveChild(fiberInstance, previousSiblingOfExistingInstance);
+
+          // 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.
+          updateFlags |= updateFiberRecursively(
+            fiberInstance,
+            nextChild,
+            (prevChild: any),
+            traceNearestHostComponentUpdate,
+          );
+        } else if (prevChild !== null && shouldFilterFiber(nextChild)) {
+          // The filtered instance could've reordered.
+          if (prevChild !== prevChildAtSameIndex) {
+            updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+          }
+
+          // If this Fiber should be filtered, we need to still update its children.
+          // This relies on an alternate since we don't have an Instance with the previous
+          // child on it. Ideally, the reconciliation wouldn't need previous Fibers that
+          // are filtered from the tree.
+          updateFlags |= updateFiberRecursively(
+            null,
+            nextChild,
+            prevChild,
+            traceNearestHostComponentUpdate,
+          );
+        } else {
+          // It's possible for a FiberInstance to be reparented when virtual parents
+          // get their sequence split or change structure with the same render result.
+          // In this case we unmount the and remount the FiberInstances.
+          // This might cause us to lose the selection but it's an edge case.
+
+          // We let the previous instance remain in the "remaining queue" it is
+          // in to be deleted at the end since it'll have no match.
+
+          mountFiberRecursively(nextChild, traceNearestHostComponentUpdate);
+          // Need to mark the parent set to remount the new instance.
+          updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+        }
+      }
+      // 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 (
+        (updateFlags & ShouldResetChildren) === NoUpdate &&
+        prevChildAtSameIndex !== null
+      ) {
+        prevChildAtSameIndex = prevChildAtSameIndex.sibling;
+      }
+    }
+    if (previousVirtualInstance !== null) {
+      if (previousVirtualInstanceWasMount) {
+        mountVirtualInstanceRecursively(
+          previousVirtualInstance,
+          previousVirtualInstanceNextFirstFiber,
+          null,
+          traceNearestHostComponentUpdate,
+          virtualLevel,
+        );
+        updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+      } else {
+        updateFlags |= updateVirtualInstanceRecursively(
+          previousVirtualInstance,
+          previousVirtualInstanceNextFirstFiber,
+          null,
+          previousVirtualInstancePrevFirstFiber,
+          traceNearestHostComponentUpdate,
+          virtualLevel,
+        );
+      }
+    }
+    // If we have no more children, but used to, they don't line up.
+    if (prevChildAtSameIndex !== null) {
+      updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+    }
+    return updateFlags;
+  }
+
+  // Returns whether closest unfiltered fiber parent needs to reset its child list.
+  function updateChildrenRecursively(
+    nextFirstChild: null | Fiber,
+    prevFirstChild: null | Fiber,
+    traceNearestHostComponentUpdate: boolean,
+  ): UpdateFlags {
+    if (nextFirstChild === null) {
+      return prevFirstChild !== null ? ShouldResetChildren : NoUpdate;
+    }
+    return updateVirtualChildrenRecursively(
+      nextFirstChild,
+      null,
+      prevFirstChild,
+      traceNearestHostComponentUpdate,
+      0,
+    );
+  }
+
+  function updateSuspenseChildrenRecursively(
+    nextContentFiber: Fiber,
+    prevContentFiber: Fiber,
+    traceNearestHostComponentUpdate: boolean,
+    stashedSuspenseParent: null | SuspenseNode,
+    stashedSuspensePrevious: null | SuspenseNode,
+    stashedSuspenseRemaining: null | SuspenseNode,
+  ): UpdateFlags {
+    let updateFlags = NoUpdate;
+    const prevFallbackFiber = prevContentFiber.sibling;
+    const nextFallbackFiber = nextContentFiber.sibling;
+
+    // First update only the Offscreen boundary. I.e. the main content.
+    updateFlags |= updateVirtualChildrenRecursively(
+      nextContentFiber,
+      nextFallbackFiber,
+      prevContentFiber,
+      traceNearestHostComponentUpdate,
+      0,
+    );
+
+    // Next, we'll pop back out of the SuspenseNode that we added above and now we'll
+    // reconcile the fallback, reconciling anything in the context of the parent SuspenseNode.
+    // Since the fallback conceptually blocks the parent.
+    reconcilingParentSuspenseNode = stashedSuspenseParent;
+    previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+    remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+    if (prevFallbackFiber !== null || nextFallbackFiber !== null) {
+      if (nextFallbackFiber === null) {
+        unmountRemainingChildren();
+      } else {
+        updateFlags |= updateVirtualChildrenRecursively(
+          nextFallbackFiber,
+          null,
+          prevFallbackFiber,
+          traceNearestHostComponentUpdate,
+          0,
+        );
+
+        if ((updateFlags & ShouldResetSuspenseChildren) !== NoUpdate) {
+          updateFlags |= ShouldResetParentSuspenseChildren;
+          updateFlags &= ~ShouldResetSuspenseChildren;
+        }
+      }
+    }
+
+    return updateFlags;
+  }
+
+  // Returns whether closest unfiltered fiber parent needs to reset its child list.
+  function updateFiberRecursively(
+    fiberInstance: null | FiberInstance | FilteredFiberInstance, // null if this should be filtered
+    nextFiber: Fiber,
+    prevFiber: Fiber,
+    traceNearestHostComponentUpdate: boolean,
+  ): UpdateFlags {
+    if (__DEBUG__) {
+      if (fiberInstance !== null) {
+        debug('updateFiberRecursively()', fiberInstance, reconcilingParent);
+      }
+    }
+
+    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 ||
+          elementType === ElementTypeMemo ||
+          elementType === ElementTypeForwardRef
+        ) {
+          // Otherwise if this is a traced ancestor, flag for the nearest host descendant(s).
+          traceNearestHostComponentUpdate = didFiberRender(
+            prevFiber,
+            nextFiber,
+          );
+        }
+      }
+    }
+
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    const stashedSuspenseParent = reconcilingParentSuspenseNode;
+    const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
+    const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
+    const stashedIsInActivitySlice = isInFocusedActivity;
+    let updateFlags = NoUpdate;
+    let shouldMeasureSuspenseNode = false;
+    let shouldPopSuspenseNode = false;
+    let previousSuspendedBy = null;
+    if (fiberInstance !== null) {
+      previousSuspendedBy = fiberInstance.suspendedBy;
+      // Update the Fiber so we that we always keep the current Fiber on the data.
+      fiberInstance.data = nextFiber;
+      if (
+        mostRecentlyInspectedElement !== null &&
+        (mostRecentlyInspectedElement.id === fiberInstance.id ||
+          // If we're inspecting a Root, we inspect the Screen.
+          // Invalidating any Root invalidates the Screen too.
+          (mostRecentlyInspectedElement.type === ElementTypeRoot &&
+            nextFiber.tag === HostRoot)) &&
+        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;
+      }
+      // Push a new DevTools instance parent while reconciling this subtree.
+      reconcilingParent = fiberInstance;
+      previouslyReconciledSibling = null;
+      // Move all the children of this instance to the remaining set.
+      // We'll move them back one by one, and anything that remains is deleted.
+      remainingReconcilingChildren = fiberInstance.firstChild;
+      fiberInstance.firstChild = null;
+      fiberInstance.suspendedBy = null;
+
+      const suspenseNode = fiberInstance.suspenseNode;
+      if (suspenseNode !== null) {
+        reconcilingParentSuspenseNode = suspenseNode;
+        previouslyReconciledSiblingSuspenseNode = null;
+        remainingReconcilingChildrenSuspenseNodes = suspenseNode.firstChild;
+        suspenseNode.firstChild = null;
+        shouldMeasureSuspenseNode = true;
+        shouldPopSuspenseNode = true;
+      }
+
+      if (focusedActivity !== null) {
+        if (fiberInstance.id === focusedActivityID) {
+          isInFocusedActivity = true;
+        } else if (nextFiber.tag === ActivityComponent) {
+          // Filtering nested Activity components inside the focused activity
+          // is done in the frontend.
+        }
+      }
+    }
+    try {
+      trackDebugInfoFromLazyType(nextFiber);
+      trackDebugInfoFromUsedThenables(nextFiber);
+
+      if (nextFiber.tag === HostHoistable) {
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        if (prevFiber.memoizedState !== nextFiber.memoizedState) {
+          releaseHostResource(nearestInstance, prevFiber.memoizedState);
+          aquireHostResource(nearestInstance, nextFiber.memoizedState);
+        }
+        trackDebugInfoFromHostResource(nearestInstance, nextFiber);
+      } else if (
+        nextFiber.tag === HostComponent ||
+        nextFiber.tag === HostText ||
+        nextFiber.tag === HostSingleton
+      ) {
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        if (prevFiber.stateNode !== nextFiber.stateNode) {
+          // In persistent mode, it's possible for the stateNode to update with
+          // a new clone. In that case we need to release the old one and aquire
+          // new one instead.
+          releaseHostInstance(nearestInstance, prevFiber.stateNode);
+          aquireHostInstance(nearestInstance, nextFiber.stateNode);
+        }
+        trackDebugInfoFromHostComponent(nearestInstance, nextFiber);
+      }
+
+      // The behavior of timed-out legacy Suspense trees is unique. Without the Offscreen wrapper.
+      // 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.
+      const isLegacySuspense =
+        nextFiber.tag === SuspenseComponent && OffscreenComponent === -1;
+      // Suspense components only have a non-null memoizedState if they're timed-out.
+      const prevDidTimeout =
+        isLegacySuspense && prevFiber.memoizedState !== null;
+      const nextDidTimeOut =
+        isLegacySuspense && nextFiber.memoizedState !== null;
+
+      const prevWasHidden = isHiddenOffscreen(prevFiber);
+      const nextIsHidden = isHiddenOffscreen(nextFiber);
+      const prevWasSuspended = isSuspendedOffscreen(prevFiber);
+      const nextIsSuspended = isSuspendedOffscreen(nextFiber);
+
+      if (isLegacySuspense) {
+        if (fiberInstance !== null && fiberInstance.suspenseNode !== null) {
+          const suspenseNode = fiberInstance.suspenseNode;
+          if (
+            (prevFiber.stateNode === null) !==
+            (nextFiber.stateNode === null)
+          ) {
+            trackThrownPromisesFromRetryCache(
+              suspenseNode,
+              nextFiber.stateNode,
+            );
+          }
+          if (
+            (prevFiber.memoizedState === null) !==
+            (nextFiber.memoizedState === null)
+          ) {
+            // Toggle suspended state.
+            recordSuspenseSuspenders(suspenseNode);
+          }
+        }
+      }
+      // The logic below is inspired by the code paths 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 (prevFallbackChildSet == null && nextFallbackChildSet != null) {
+          mountChildrenRecursively(
+            nextFallbackChildSet,
+            traceNearestHostComponentUpdate,
+          );
+
+          updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+        }
+
+        const childrenUpdateFlags =
+          nextFallbackChildSet != null && prevFallbackChildSet != null
+            ? updateChildrenRecursively(
+                nextFallbackChildSet,
+                prevFallbackChildSet,
+                traceNearestHostComponentUpdate,
+              )
+            : NoUpdate;
+        updateFlags |= childrenUpdateFlags;
+      } 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) {
+          mountChildrenRecursively(
+            nextPrimaryChildSet,
+            traceNearestHostComponentUpdate,
+          );
+          updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+        }
+      } else if (!prevDidTimeout && nextDidTimeOut) {
+        // Primary -> Fallback:
+        // 1. Hide primary set
+        // We simply don't re-add the fallback children and let
+        // unmountRemainingChildren() handle it.
+        // 2. Mount fallback set
+        const nextFiberChild = nextFiber.child;
+        const nextFallbackChildSet = nextFiberChild
+          ? nextFiberChild.sibling
+          : null;
+        if (nextFallbackChildSet != null) {
+          mountChildrenRecursively(
+            nextFallbackChildSet,
+            traceNearestHostComponentUpdate,
+          );
+          updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+        }
+      } else if (nextIsSuspended) {
+        if (!prevWasSuspended) {
+          // We're hiding the children. Disconnect them from the front end but keep state.
+          if (fiberInstance !== null && !isInDisconnectedSubtree) {
+            disconnectChildrenRecursively(remainingReconcilingChildren);
+          }
+        }
+        // Update children inside the hidden tree if they committed with a new updates.
+        const stashedDisconnected = isInDisconnectedSubtree;
+        isInDisconnectedSubtree = true;
+        try {
+          updateFlags |= updateChildrenRecursively(
+            nextFiber.child,
+            prevFiber.child,
+            false,
+          );
+        } finally {
+          isInDisconnectedSubtree = stashedDisconnected;
+        }
+      } else if (prevWasSuspended && !nextIsSuspended) {
+        // We're revealing the hidden children. We now need to update them to the latest state.
+        // We do this while still in the disconnected state and then we reconnect the new ones.
+        // This avoids reconnecting things that are about to be removed anyway.
+        const stashedDisconnected = isInDisconnectedSubtree;
+        isInDisconnectedSubtree = true;
+        try {
+          if (nextFiber.child !== null) {
+            updateFlags |= updateChildrenRecursively(
+              nextFiber.child,
+              prevFiber.child,
+              false,
+            );
+          }
+          // Ensure we unmount any remaining children inside the isInDisconnectedSubtree flag
+          // since they should not trigger real deletions.
+          unmountRemainingChildren();
+          remainingReconcilingChildren = null;
+        } finally {
+          isInDisconnectedSubtree = stashedDisconnected;
+        }
+        if (fiberInstance !== null && !isInDisconnectedSubtree) {
+          reconnectChildrenRecursively(fiberInstance);
+          // Children may have reordered while they were hidden.
+          updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
+        }
+      } else if (nextIsHidden) {
+        if (prevWasHidden) {
+          // still hidden. Nothing to do.
+        } else {
+          // We're hiding the children. Remove them from the Frontend
+          unmountRemainingChildren();
+        }
+      } else if (
+        nextFiber.tag === SuspenseComponent &&
+        OffscreenComponent !== -1 &&
+        fiberInstance !== null &&
+        fiberInstance.suspenseNode !== null
+      ) {
+        // Modern Suspense path
+        const suspenseNode = fiberInstance.suspenseNode;
+        const prevContentFiber = prevFiber.child;
+        const nextContentFiber = nextFiber.child;
+        const previousHydrated = isFiberHydrated(prevFiber);
+        const nextHydrated = isFiberHydrated(nextFiber);
+        if (previousHydrated && nextHydrated) {
+          if (nextContentFiber === null || prevContentFiber === null) {
+            throw new Error(
+              'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+            );
+          }
+
+          if (
+            (prevFiber.stateNode === null) !==
+            (nextFiber.stateNode === null)
+          ) {
+            trackThrownPromisesFromRetryCache(
+              suspenseNode,
+              nextFiber.stateNode,
+            );
+          }
+
+          if (
+            (prevFiber.memoizedState === null) !==
+            (nextFiber.memoizedState === null)
+          ) {
+            // Toggle suspended state.
+            recordSuspenseSuspenders(suspenseNode);
+          }
+
+          shouldMeasureSuspenseNode = false;
+          updateFlags |= updateSuspenseChildrenRecursively(
+            nextContentFiber,
+            prevContentFiber,
+            traceNearestHostComponentUpdate,
+            stashedSuspenseParent,
+            stashedSuspensePrevious,
+            stashedSuspenseRemaining,
+          );
+          // updateSuspenseChildrenRecursively popped already
+          shouldPopSuspenseNode = false;
+          if (nextFiber.memoizedState === null) {
+            // Measure this Suspense node in case it changed. We don't update the rect while
+            // we're inside a disconnected subtree nor if we are the Suspense boundary that
+            // is suspended. This lets us keep the rectangle of the displayed content while
+            // we're suspended to visualize the resulting state.
+            shouldMeasureSuspenseNode = !isInDisconnectedSubtree;
+          }
+        } else if (!previousHydrated && nextHydrated) {
+          if (nextContentFiber === null) {
+            throw new Error(
+              'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+            );
+          }
+
+          trackThrownPromisesFromRetryCache(suspenseNode, nextFiber.stateNode);
+          // Toggle suspended state.
+          recordSuspenseSuspenders(suspenseNode);
+
+          mountSuspenseChildrenRecursively(
+            nextContentFiber,
+            traceNearestHostComponentUpdate,
+            stashedSuspenseParent,
+            stashedSuspensePrevious,
+            stashedSuspenseRemaining,
+          );
+          // mountSuspenseChildrenRecursively popped already
+          shouldPopSuspenseNode = false;
+        } else if (previousHydrated && !nextHydrated) {
+          throw new Error(
+            'Encountered a dehydrated Suspense boundary that was previously hydrated.',
+          );
+        } else {
+          // This Suspense Fiber is still dehydrated. It won't have any children
+          // until hydration.
+        }
+      } else {
+        // Common case: Primary -> Primary.
+        // This is the same code path as for non-Suspense fibers.
+        if (nextFiber.child !== prevFiber.child) {
+          updateFlags |= updateChildrenRecursively(
+            nextFiber.child,
+            prevFiber.child,
+            traceNearestHostComponentUpdate,
+          );
+        } else {
+          // Children are unchanged.
+          if (fiberInstance !== null) {
+            // All the remaining children will be children of this same fiber so we can just reuse them.
+            // I.e. we just restore them by undoing what we did above.
+            fiberInstance.firstChild = remainingReconcilingChildren;
+            remainingReconcilingChildren = null;
+
+            consumeSuspenseNodesOfExistingInstance(fiberInstance);
+
+            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 descendants for highlight.
+              if (traceNearestHostComponentUpdate) {
+                const hostInstances =
+                  findAllCurrentHostInstances(fiberInstance);
+                hostInstances.forEach(hostInstance => {
+                  traceUpdatesForNodes.add(hostInstance);
+                });
+              }
+            }
+          } else {
+            const childrenUpdateFlags = updateChildrenRecursively(
+              nextFiber.child,
+              prevFiber.child,
+              false,
+            );
+            // If this fiber is filtered there might be changes to this set elsewhere so we have
+            // to visit each child to place it back in the set. We let the child bail out instead.
+            if ((childrenUpdateFlags & ShouldResetChildren) !== NoUpdate) {
+              throw new Error(
+                'The children should not have changed if we pass in the same set.',
+              );
+            }
+            updateFlags |= childrenUpdateFlags;
+          }
+        }
+      }
+
+      if (fiberInstance !== null) {
+        removePreviousSuspendedBy(
+          fiberInstance,
+          previousSuspendedBy,
+          shouldPopSuspenseNode
+            ? reconcilingParentSuspenseNode
+            : stashedSuspenseParent,
+        );
+
+        if (fiberInstance.kind === FIBER_INSTANCE) {
+          let componentLogsEntry = fiberToComponentLogsMap.get(
+            fiberInstance.data,
+          );
+          if (
+            componentLogsEntry === undefined &&
+            fiberInstance.data.alternate
+          ) {
+            componentLogsEntry = fiberToComponentLogsMap.get(
+              fiberInstance.data.alternate,
+            );
+          }
+          recordConsoleLogs(fiberInstance, componentLogsEntry);
+
+          const isProfilingSupported =
+            nextFiber.hasOwnProperty('treeBaseDuration');
+          if (isProfilingSupported) {
+            recordProfilingDurations(fiberInstance, prevFiber);
+          }
+        }
+      }
+
+      if ((updateFlags & ShouldResetChildren) !== NoUpdate) {
+        // We need to crawl the subtree for closest non-filtered Fibers
+        // so that we can display them in a flat children set.
+        if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
+          if (!nextIsSuspended && !isInDisconnectedSubtree) {
+            recordResetChildren(fiberInstance);
+          }
+
+          // We've handled the child order change for this Fiber.
+          // Since it's included, there's no need to invalidate parent child order.
+          updateFlags &= ~ShouldResetChildren;
+        } else {
+          // Let the closest unfiltered parent Fiber reset its child order instead.
+        }
+      } else {
+      }
+
+      if ((updateFlags & ShouldResetSuspenseChildren) !== NoUpdate) {
+        if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
+          const suspenseNode = fiberInstance.suspenseNode;
+          if (suspenseNode !== null) {
+            recordResetSuspenseChildren(suspenseNode);
+            updateFlags &= ~ShouldResetSuspenseChildren;
+          }
+        } else {
+          // Let the closest unfiltered parent Fiber reset its child order instead.
+        }
+      }
+      if ((updateFlags & ShouldResetParentSuspenseChildren) !== NoUpdate) {
+        if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
+          const suspenseNode = fiberInstance.suspenseNode;
+          if (suspenseNode !== null) {
+            updateFlags &= ~ShouldResetParentSuspenseChildren;
+            updateFlags |= ShouldResetSuspenseChildren;
+          }
+        } else {
+          // Let the closest unfiltered parent Fiber reset its child order instead.
+        }
+      }
+
+      return updateFlags;
+    } finally {
+      if (fiberInstance !== null) {
+        unmountRemainingChildren();
+        reconcilingParent = stashedParent;
+        previouslyReconciledSibling = stashedPrevious;
+        remainingReconcilingChildren = stashedRemaining;
+        if (shouldMeasureSuspenseNode) {
+          if (!isInDisconnectedSubtree) {
+            // Measure this Suspense node in case it changed. We don't update the rect
+            // while we're inside a disconnected subtree so that we keep the outline
+            // as it was before we hid the parent.
+            const suspenseNode = fiberInstance.suspenseNode;
+            if (suspenseNode === null) {
+              throw new Error(
+                'Attempted to measure a Suspense node that does not exist.',
+              );
+            }
+            const prevRects = suspenseNode.rects;
+            const nextRects = measureInstance(fiberInstance);
+            if (!areEqualRects(prevRects, nextRects)) {
+              suspenseNode.rects = nextRects;
+              recordSuspenseResize(suspenseNode);
+            }
+          }
+        }
+        if (shouldPopSuspenseNode) {
+          reconcilingParentSuspenseNode = stashedSuspenseParent;
+          previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
+          remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
+        }
+        isInFocusedActivity = stashedIsInActivitySlice;
+      }
+    }
+  }
+
+  function disconnectChildrenRecursively(firstChild: null | DevToolsInstance) {
+    for (let child = firstChild; child !== null; child = child.nextSibling) {
+      if (
+        (child.kind === FIBER_INSTANCE ||
+          child.kind === FILTERED_FIBER_INSTANCE) &&
+        isSuspendedOffscreen(child.data)
+      ) {
+        // This instance's children are already disconnected.
+      } else {
+        disconnectChildrenRecursively(child.firstChild);
+      }
+      if (child.kind === FIBER_INSTANCE) {
+        recordDisconnect(child);
+      } else if (child.kind === VIRTUAL_INSTANCE) {
+        recordVirtualDisconnect(child);
+      }
+    }
+  }
+
+  function reconnectChildrenRecursively(parentInstance: DevToolsInstance) {
+    for (
+      let child = parentInstance.firstChild;
+      child !== null;
+      child = child.nextSibling
+    ) {
+      if (child.kind === FIBER_INSTANCE) {
+        recordReconnect(child, parentInstance);
+      } else if (child.kind === VIRTUAL_INSTANCE) {
+        const secondaryEnv = null; // TODO: We don't have this data anywhere. We could just stash it somewhere.
+        recordVirtualReconnect(child, parentInstance, secondaryEnv);
+      }
+      if (
+        (child.kind === FIBER_INSTANCE ||
+          child.kind === FILTERED_FIBER_INSTANCE) &&
+        isHiddenOffscreen(child.data)
+      ) {
+        // This instance's children should remain disconnected.
+      } else {
+        reconnectChildrenRecursively(child);
+      }
+    }
+  }
+
+  function cleanup() {
+    isProfiling = false;
+  }
+
+  function rootSupportsProfiling(root: any) {
+    if (root.memoizedInteractions != null) {
+      // v16 builds include this field for the scheduler/tracing API.
+      return true;
+    } else if (
+      root.current != null &&
+      root.current.hasOwnProperty('treeBaseDuration')
+    ) {
+      // The scheduler/tracing API was removed in v17 though
+      // so we need to check a non-root Fiber.
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  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 => {
+        const current = root.current;
+        const newRoot = createFiberInstance(current);
+        rootToFiberInstanceMap.set(root, newRoot);
+        idToDevToolsInstanceMap.set(newRoot.id, newRoot);
+        currentRoot = newRoot;
+        setRootPseudoKey(currentRoot.id, root.current);
+
+        // Handle multi-renderer edge-case where only some v16 renderers support profiling.
+        if (isProfiling && rootSupportsProfiling(root)) {
+          // If profiling is active, store commit time and duration.
+          // The frontend may request this information after profiling has stopped.
+          currentCommitProfilingMetadata = {
+            changeDescriptions: recordChangeDescriptions ? new Map() : null,
+            durations: [],
+            commitTime: getCurrentTime() - profilingStartTime,
+            maxActualDuration: 0,
+            priorityLevel: null,
+            updaters: null,
+            effectDuration: null,
+            passiveEffectDuration: null,
+          };
+        }
+
+        mountFiberRecursively(root.current, false);
+
+        currentRoot = (null: any);
+      });
+
+      flushPendingEvents();
+
+      needsToFlushComponentLogs = false;
+    }
+  }
+
+  function handleCommitFiberUnmount(fiber: any) {
+    // This Hook is no longer used. After having shipped DevTools everywhere it is
+    // safe to stop calling it from Fiber.
+  }
+
+  function handlePostCommitFiberRoot(root: any) {
+    if (isProfiling && rootSupportsProfiling(root)) {
+      if (currentCommitProfilingMetadata !== null) {
+        const {effectDuration, passiveEffectDuration} =
+          getEffectDurations(root);
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        currentCommitProfilingMetadata.effectDuration = effectDuration;
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        currentCommitProfilingMetadata.passiveEffectDuration =
+          passiveEffectDuration;
+      }
+    }
+
+    if (needsToFlushComponentLogs) {
+      // We received new logs after commit. I.e. in a passive effect. We need to
+      // traverse the tree to find the affected ones. If we just moved the whole
+      // tree traversal from handleCommitFiberRoot to handlePostCommitFiberRoot
+      // this wouldn't be needed. For now we just brute force check all instances.
+      // This is not that common of a case.
+      bruteForceFlushErrorsAndWarnings();
+    }
+  }
+
+  function handleCommitFiberRoot(
+    root: FiberRoot,
+    priorityLevel: void | number,
+  ) {
+    const nextFiber = root.current;
+
+    let prevFiber: null | Fiber = null;
+    let rootInstance = rootToFiberInstanceMap.get(root);
+    if (!rootInstance) {
+      rootInstance = createFiberInstance(nextFiber);
+      rootToFiberInstanceMap.set(root, rootInstance);
+      idToDevToolsInstanceMap.set(rootInstance.id, rootInstance);
+    } else {
+      prevFiber = rootInstance.data;
+    }
+    currentRoot = rootInstance;
+
+    // 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();
+    }
+
+    // Handle multi-renderer edge-case where only some v16 renderers support profiling.
+    const isProfilingSupported = rootSupportsProfiling(root);
+
+    if (isProfiling && isProfilingSupported) {
+      // If profiling is active, store commit time and duration.
+      // The frontend may request this information after profiling has stopped.
+      currentCommitProfilingMetadata = {
+        changeDescriptions: recordChangeDescriptions ? new Map() : null,
+        durations: [],
+        commitTime: getCurrentTime() - profilingStartTime,
+        maxActualDuration: 0,
+        priorityLevel:
+          priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
+        updaters: null,
+        // Initialize to null; if new enough React version is running,
+        // these values will be read during separate handlePostCommitFiberRoot() call.
+        effectDuration: null,
+        passiveEffectDuration: null,
+      };
+    }
+
+    const nextIsMounted = nextFiber.child !== null;
+    const prevWasMounted = prevFiber !== null && prevFiber.child !== null;
+    if (!prevWasMounted && nextIsMounted) {
+      // Mount a new root.
+      setRootPseudoKey(currentRoot.id, nextFiber);
+      mountFiberRecursively(nextFiber, false);
+    } else if (prevWasMounted && nextIsMounted) {
+      if (prevFiber === null) {
+        throw new Error(
+          'Expected a previous Fiber when updating an existing root.',
+        );
+      }
+      // Update an existing root.
+      updateFiberRecursively(rootInstance, nextFiber, prevFiber, false);
+    } else if (prevWasMounted && !nextIsMounted) {
+      // Unmount an existing root.
+      unmountInstanceRecursively(rootInstance);
+      removeRootPseudoKey(currentRoot.id);
+      rootToFiberInstanceMap.delete(root);
+    } else if (!prevWasMounted && !nextIsMounted) {
+      // We don't need this root anymore.
+      rootToFiberInstanceMap.delete(root);
+    }
+
+    if (isProfiling && isProfilingSupported) {
+      if (!shouldBailoutWithPendingOperations()) {
+        const commitProfilingMetadata =
+          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
+            currentRoot.id,
+          );
+
+        if (commitProfilingMetadata != null) {
+          commitProfilingMetadata.push(
+            ((currentCommitProfilingMetadata: any): CommitProfilingData),
+          );
+        } else {
+          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+            currentRoot.id,
+            [((currentCommitProfilingMetadata: any): CommitProfilingData)],
+          );
+        }
+      }
+    }
+
+    // We're done here.
+    flushPendingEvents();
+
+    needsToFlushComponentLogs = false;
+
+    if (traceUpdatesEnabled) {
+      hook.emit('traceUpdates', traceUpdatesForNodes);
+    }
+
+    currentRoot = (null: any);
+  }
+
+  function getResourceInstance(fiber: Fiber): HostInstance | null {
+    if (fiber.tag === HostHoistable) {
+      const resource = fiber.memoizedState;
+      // Feature Detect a DOM Specific Instance of a Resource
+      if (
+        typeof resource === 'object' &&
+        resource !== null &&
+        resource.instance != null
+      ) {
+        return resource.instance;
+      }
+    }
+    return null;
+  }
+
+  function appendHostInstancesByDevToolsInstance(
+    devtoolsInstance: DevToolsInstance,
+    hostInstances: Array<HostInstance>,
+  ) {
+    if (devtoolsInstance.kind !== VIRTUAL_INSTANCE) {
+      const fiber = devtoolsInstance.data;
+      appendHostInstancesByFiber(fiber, hostInstances);
+      return;
+    }
+    // Search the tree for the nearest child Fiber and add all its host instances.
+    // TODO: If the true nearest Fiber is filtered, we might skip it and instead include all
+    // the children below it. In the extreme case, searching the whole tree.
+    for (
+      let child = devtoolsInstance.firstChild;
+      child !== null;
+      child = child.nextSibling
+    ) {
+      appendHostInstancesByDevToolsInstance(child, hostInstances);
+    }
+  }
+
+  function appendHostInstancesByFiber(
+    fiber: Fiber,
+    hostInstances: Array<HostInstance>,
+  ): void {
+    // 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 ||
+        node.tag === HostSingleton ||
+        node.tag === HostHoistable
+      ) {
+        const hostInstance = node.stateNode || getResourceInstance(node);
+        if (hostInstance) {
+          hostInstances.push(hostInstance);
+        }
+      } else if (node.child) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === fiber) {
+        return;
+      }
+      while (!node.sibling) {
+        if (!node.return || node.return === fiber) {
+          return;
+        }
+        node = node.return;
+      }
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+  }
+
+  function findAllCurrentHostInstances(
+    devtoolsInstance: DevToolsInstance,
+  ): $ReadOnlyArray<HostInstance> {
+    const hostInstances: Array<HostInstance> = [];
+    appendHostInstancesByDevToolsInstance(devtoolsInstance, hostInstances);
+    return hostInstances;
+  }
+
+  function findHostInstancesForElementID(id: number) {
+    try {
+      const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+      if (devtoolsInstance === undefined) {
+        console.warn(`Could not find DevToolsInstance with id "${id}"`);
+        return null;
+      }
+      return findAllCurrentHostInstances(devtoolsInstance);
+    } catch (err) {
+      // The fiber might have unmounted by now.
+      return null;
+    }
+  }
+
+  function findLastKnownRectsForID(id: number): null | Array<Rect> {
+    try {
+      const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+      if (devtoolsInstance === undefined) {
+        console.warn(`Could not find DevToolsInstance with id "${id}"`);
+        return null;
+      }
+      if (devtoolsInstance.suspenseNode === null) {
+        return null;
+      }
+      return devtoolsInstance.suspenseNode.rects;
+    } catch (err) {
+      // The fiber might have unmounted by now.
+      return null;
+    }
+  }
+
+  function getDisplayNameForElementID(id: number): null | string {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      return null;
+    }
+    if (devtoolsInstance.kind === FIBER_INSTANCE) {
+      const fiber = devtoolsInstance.data;
+      if (fiber.tag === HostRoot) {
+        // The only reason you'd inspect a HostRoot is to show it as a SuspenseNode.
+        return 'Initial Paint';
+      }
+      if (fiber.tag === SuspenseComponent || fiber.tag === ActivityComponent) {
+        // For Suspense and Activity components, we can show a better name
+        // by using the name prop or their owner.
+        const props = fiber.memoizedProps;
+        if (props.name != null) {
+          return props.name;
+        }
+        const owner = getUnfilteredOwner(fiber);
+        if (owner != null) {
+          if (typeof owner.tag === 'number') {
+            return getDisplayNameForFiber((owner: any));
+          } else {
+            return owner.name || '';
+          }
+        }
+      }
+      return getDisplayNameForFiber(fiber);
+    } else {
+      return devtoolsInstance.data.name || '';
+    }
+  }
+
+  function getNearestSuspenseNode(instance: DevToolsInstance): SuspenseNode {
+    while (instance.suspenseNode === null) {
+      if (instance.parent === null) {
+        throw new Error(
+          'There should always be a SuspenseNode parent on a mounted instance.',
+        );
+      }
+      instance = instance.parent;
+    }
+    return instance.suspenseNode;
+  }
+
+  function getNearestMountedDOMNode(publicInstance: Element): null | Element {
+    let domNode: null | Element = publicInstance;
+    while (domNode && !publicInstanceToDevToolsInstanceMap.has(domNode)) {
+      // $FlowFixMe: In practice this is either null or Element.
+      domNode = domNode.parentNode;
+    }
+    return domNode;
+  }
+
+  function getElementIDForHostInstance(
+    publicInstance: HostInstance,
+  ): number | null {
+    const instance = publicInstanceToDevToolsInstanceMap.get(publicInstance);
+    if (instance !== undefined) {
+      if (instance.kind === FILTERED_FIBER_INSTANCE) {
+        // A Filtered Fiber Instance will always have a Virtual Instance as a parent.
+        return ((instance.parent: any): VirtualInstance).id;
+      }
+      return instance.id;
+    }
+    return null;
+  }
+
+  function getSuspenseNodeIDForHostInstance(
+    publicInstance: HostInstance,
+  ): number | null {
+    const instance = publicInstanceToDevToolsInstanceMap.get(publicInstance);
+    if (instance !== undefined) {
+      // Pick nearest unfiltered SuspenseNode instance.
+      let suspenseInstance = instance;
+      while (
+        suspenseInstance.suspenseNode === null ||
+        suspenseInstance.kind === FILTERED_FIBER_INSTANCE
+      ) {
+        if (suspenseInstance.parent === null) {
+          // We shouldn't get here since we'll always have a suspenseNode at the root.
+          return null;
+        }
+        suspenseInstance = suspenseInstance.parent;
+      }
+      return suspenseInstance.id;
+    }
+    return null;
+  }
+
+  function getElementAttributeByPath(
+    id: number,
+    path: Array<string | number>,
+  ): mixed {
+    if (isMostRecentlyInspectedElement(id)) {
+      return getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+    }
+    return undefined;
+  }
+
+  function getElementSourceFunctionById(id: number): null | Function {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return null;
+    }
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Handle VirtualInstance.
+      return null;
+    }
+    const fiber = devtoolsInstance.data;
+
+    const {elementType, tag, type} = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IncompleteFunctionComponent:
+      case IndeterminateComponent:
+      case FunctionComponent:
+        return type;
+      case ForwardRef:
+        return type.render;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        return elementType != null && elementType.type != null
+          ? elementType.type
+          : type;
+      default:
+        return null;
+    }
+  }
+
+  function instanceToSerializedElement(
+    instance: FiberInstance | VirtualInstance,
+  ): SerializedElement {
+    if (instance.kind === FIBER_INSTANCE) {
+      const fiber = instance.data;
+      return {
+        displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
+        id: instance.id,
+        key: fiber.key === REACT_OPTIMISTIC_KEY ? null : fiber.key,
+        env: null,
+        stack:
+          fiber._debugOwner == null || fiber._debugStack == null
+            ? null
+            : parseStackTrace(fiber._debugStack, 1),
+        type: getElementTypeForFiber(fiber),
+      };
+    } else {
+      const componentInfo = instance.data;
+      return {
+        displayName: componentInfo.name || 'Anonymous',
+        id: instance.id,
+        key:
+          componentInfo.key == null ||
+          componentInfo.key === REACT_OPTIMISTIC_KEY
+            ? null
+            : componentInfo.key,
+        env: componentInfo.env == null ? null : componentInfo.env,
+        stack:
+          componentInfo.owner == null || componentInfo.debugStack == null
+            ? null
+            : parseStackTrace(componentInfo.debugStack, 1),
+        type: ElementTypeVirtual,
+      };
+    }
+  }
+
+  function getOwnersList(id: number): Array<SerializedElement> | null {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return null;
+    }
+    const self = instanceToSerializedElement(devtoolsInstance);
+    const owners = getOwnersListFromInstance(devtoolsInstance);
+    // This is particular API is prefixed with the current instance too for some reason.
+    if (owners === null) {
+      return [self];
+    }
+    owners.unshift(self);
+    owners.reverse();
+    return owners;
+  }
+
+  function getOwnersListFromInstance(
+    instance: DevToolsInstance,
+  ): Array<SerializedElement> | null {
+    let owner = getUnfilteredOwner(instance.data);
+    if (owner === null) {
+      return null;
+    }
+    const owners: Array<SerializedElement> = [];
+    let parentInstance: null | DevToolsInstance = instance.parent;
+    while (parentInstance !== null && owner !== null) {
+      const ownerInstance = findNearestOwnerInstance(parentInstance, owner);
+      if (ownerInstance !== null) {
+        owners.push(instanceToSerializedElement(ownerInstance));
+        // Get the next owner and keep searching from the previous match.
+        owner = getUnfilteredOwner(owner);
+        parentInstance = ownerInstance.parent;
+      } else {
+        break;
+      }
+    }
+    return owners;
+  }
+
+  function getUnfilteredOwner(
+    owner: ReactComponentInfo | Fiber | null | void,
+  ): ReactComponentInfo | Fiber | null {
+    if (owner == null) {
+      return null;
+    }
+    if (typeof owner.tag === 'number') {
+      const ownerFiber: Fiber = (owner: any); // Refined
+      owner = ownerFiber._debugOwner;
+    } else {
+      const ownerInfo: ReactComponentInfo = (owner: any); // Refined
+      owner = ownerInfo.owner;
+    }
+    while (owner) {
+      if (typeof owner.tag === 'number') {
+        const ownerFiber: Fiber = (owner: any); // Refined
+        if (!shouldFilterFiber(ownerFiber)) {
+          return ownerFiber;
+        }
+        owner = ownerFiber._debugOwner;
+      } else {
+        const ownerInfo: ReactComponentInfo = (owner: any); // Refined
+        if (!shouldFilterVirtual(ownerInfo, null)) {
+          return ownerInfo;
+        }
+        owner = ownerInfo.owner;
+      }
+    }
+    return null;
+  }
+
+  function findNearestOwnerInstance(
+    parentInstance: null | DevToolsInstance,
+    owner: void | null | ReactComponentInfo | Fiber,
+  ): null | FiberInstance | VirtualInstance {
+    if (owner == null) {
+      return null;
+    }
+    // Search the parent path for any instance that matches this kind of owner.
+    while (parentInstance !== null) {
+      if (
+        parentInstance.data === owner ||
+        // Typically both owner and instance.data would refer to the current version of a Fiber
+        // but it is possible for memoization to ignore the owner on the JSX. Then the new Fiber
+        // isn't propagated down as the new owner. In that case we might match the alternate
+        // instead. This is a bit hacky but the fastest check since type casting owner to a Fiber
+        // needs a duck type check anyway.
+        parentInstance.data === (owner: any).alternate
+      ) {
+        if (parentInstance.kind === FILTERED_FIBER_INSTANCE) {
+          return null;
+        }
+        return parentInstance;
+      }
+      parentInstance = parentInstance.parent;
+    }
+    // It is technically possible to create an element and render it in a different parent
+    // but this is a weird edge case and it is worth not having to scan the tree or keep
+    // a register for every fiber/component info.
+    return null;
+  }
+
+  function inspectHooks(fiber: Fiber): HooksTree {
+    const originalConsoleMethods: {[string]: $FlowFixMe} = {};
+
+    // Temporarily disable all console logging before re-running the hook.
+    for (const method in console) {
+      try {
+        // $FlowFixMe[invalid-computed-prop]
+        originalConsoleMethods[method] = console[method];
+        // $FlowFixMe[prop-missing]
+        console[method] = () => {};
+      } catch (error) {}
+    }
+
+    try {
+      return inspectHooksOfFiber(fiber, getDispatcherRef(renderer));
+    } finally {
+      // Restore original console functionality.
+      for (const method in originalConsoleMethods) {
+        try {
+          // $FlowFixMe[prop-missing]
+          console[method] = originalConsoleMethods[method];
+        } catch (error) {}
+      }
+    }
+  }
+
+  function getSuspendedByOfSuspenseNode(
+    suspenseNode: SuspenseNode,
+    filterByChildInstance: null | DevToolsInstance, // only include suspended by instances in this subtree
+  ): Array<SerializedAsyncInfo> {
+    // Collect all ReactAsyncInfo that was suspending this SuspenseNode but
+    // isn't also in any parent set.
+    const result: Array<SerializedAsyncInfo> = [];
+    if (!suspenseNode.hasUniqueSuspenders) {
+      return result;
+    }
+    // Cache the inspection of Hooks in case we need it for multiple entries.
+    // We don't need a full map here since it's likely that every ioInfo that's unique
+    // to a specific instance will have those appear in order of when that instance was discovered.
+    let hooksCacheKey: null | DevToolsInstance = null;
+    let hooksCache: null | HooksTree = null;
+    // Collect the stream entries with the highest byte offset and end time.
+    const streamEntries: Map<
+      Promise<mixed>,
+      {
+        asyncInfo: ReactAsyncInfo,
+        instance: DevToolsInstance,
+        hooks: null | HooksTree,
+      },
+    > = new Map();
+    suspenseNode.suspendedBy.forEach((set, ioInfo) => {
+      let parentNode = suspenseNode.parent;
+      while (parentNode !== null) {
+        if (parentNode.suspendedBy.has(ioInfo)) {
+          return;
+        }
+        parentNode = parentNode.parent;
+      }
+      // We have the ioInfo but we need to find at least one corresponding await
+      // to go along with it. We don't really need to show every child that awaits the same
+      // thing so we just pick the first one that is still alive.
+      if (set.size === 0) {
+        return;
+      }
+      let firstInstance: null | DevToolsInstance = null;
+      if (filterByChildInstance === null) {
+        firstInstance = (set.values().next().value: any);
+      } else {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const childInstance of set.values()) {
+          if (firstInstance === null) {
+            firstInstance = childInstance;
+          }
+          if (
+            childInstance !== filterByChildInstance &&
+            !isChildOf(
+              filterByChildInstance,
+              childInstance,
+              suspenseNode.instance,
+            )
+          ) {
+            // Something suspended on this outside the filtered instance. That means that
+            // it is not unique to just this filtered instance so we skip including it.
+            return;
+          }
+        }
+      }
+      if (firstInstance !== null && firstInstance.suspendedBy !== null) {
+        const asyncInfo = getAwaitInSuspendedByFromIO(
+          firstInstance.suspendedBy,
+          ioInfo,
+        );
+        if (asyncInfo !== null) {
+          let hooks: null | HooksTree = null;
+          if (asyncInfo.stack == null && asyncInfo.owner == null) {
+            if (hooksCacheKey === firstInstance) {
+              hooks = hooksCache;
+            } else if (firstInstance.kind !== VIRTUAL_INSTANCE) {
+              const fiber = firstInstance.data;
+              if (
+                fiber.dependencies &&
+                fiber.dependencies._debugThenableState
+              ) {
+                // This entry had no stack nor owner but this Fiber used Hooks so we might
+                // be able to get the stack from the Hook.
+                hooksCacheKey = firstInstance;
+                hooksCache = hooks = inspectHooks(fiber);
+              }
+            }
+          }
+          const newIO = asyncInfo.awaited;
+          if (
+            (newIO.name === 'RSC stream' || newIO.name === 'rsc stream') &&
+            newIO.value != null
+          ) {
+            const streamPromise = newIO.value;
+            // Special case RSC stream entries to pick the last entry keyed by the stream.
+            const existingEntry = streamEntries.get(streamPromise);
+            if (existingEntry === undefined) {
+              streamEntries.set(streamPromise, {
+                asyncInfo,
+                instance: firstInstance,
+                hooks,
+              });
+            } else {
+              const existingIO = existingEntry.asyncInfo.awaited;
+              if (
+                newIO !== existingIO &&
+                ((newIO.byteSize !== undefined &&
+                  existingIO.byteSize !== undefined &&
+                  newIO.byteSize > existingIO.byteSize) ||
+                  newIO.end > existingIO.end)
+              ) {
+                // The new entry is later in the stream that the old entry. Replace it.
+                existingEntry.asyncInfo = asyncInfo;
+                existingEntry.instance = firstInstance;
+                existingEntry.hooks = hooks;
+              }
+            }
+          } else {
+            result.push(serializeAsyncInfo(asyncInfo, firstInstance, hooks));
+          }
+        }
+      }
+    });
+    // Add any deduped stream entries.
+    streamEntries.forEach(({asyncInfo, instance, hooks}) => {
+      result.push(serializeAsyncInfo(asyncInfo, instance, hooks));
+    });
+    return result;
+  }
+
+  function getSuspendedByOfInstance(
+    devtoolsInstance: DevToolsInstance,
+    hooks: null | HooksTree,
+  ): Array<SerializedAsyncInfo> {
+    const suspendedBy = devtoolsInstance.suspendedBy;
+    if (suspendedBy === null) {
+      return [];
+    }
+
+    const foundIOEntries: Set<ReactIOInfo> = new Set();
+    const streamEntries: Map<Promise<mixed>, ReactAsyncInfo> = new Map();
+    const result: Array<SerializedAsyncInfo> = [];
+    for (let i = 0; i < suspendedBy.length; i++) {
+      const asyncInfo = suspendedBy[i];
+      const ioInfo = asyncInfo.awaited;
+      if (foundIOEntries.has(ioInfo)) {
+        // We have already added this I/O entry to the result. We can dedupe it.
+        // This can happen when an instance depends on the same data in mutliple places.
+        continue;
+      }
+      foundIOEntries.add(ioInfo);
+      if (
+        (ioInfo.name === 'RSC stream' || ioInfo.name === 'rsc stream') &&
+        ioInfo.value != null
+      ) {
+        const streamPromise = ioInfo.value;
+        // Special case RSC stream entries to pick the last entry keyed by the stream.
+        const existingEntry = streamEntries.get(streamPromise);
+        if (existingEntry === undefined) {
+          streamEntries.set(streamPromise, asyncInfo);
+        } else {
+          const existingIO = existingEntry.awaited;
+          if (
+            ioInfo !== existingIO &&
+            ((ioInfo.byteSize !== undefined &&
+              existingIO.byteSize !== undefined &&
+              ioInfo.byteSize > existingIO.byteSize) ||
+              ioInfo.end > existingIO.end)
+          ) {
+            // The new entry is later in the stream that the old entry. Replace it.
+            streamEntries.set(streamPromise, asyncInfo);
+          }
+        }
+      } else {
+        result.push(serializeAsyncInfo(asyncInfo, devtoolsInstance, hooks));
+      }
+    }
+    // Add any deduped stream entries.
+    streamEntries.forEach(asyncInfo => {
+      result.push(serializeAsyncInfo(asyncInfo, devtoolsInstance, hooks));
+    });
+    return result;
+  }
+
+  function getSuspendedByOfInstanceSubtree(
+    devtoolsInstance: DevToolsInstance,
+  ): Array<SerializedAsyncInfo> {
+    // Get everything suspending below this instance down to the next Suspense node.
+    // First find the parent Suspense boundary which will have accumulated everything
+    let suspenseParentInstance = devtoolsInstance;
+    while (suspenseParentInstance.suspenseNode === null) {
+      if (suspenseParentInstance.parent === null) {
+        // We don't expect to hit this. We should always find the root.
+        return [];
+      }
+      suspenseParentInstance = suspenseParentInstance.parent;
+    }
+    const suspenseNode: SuspenseNode = suspenseParentInstance.suspenseNode;
+    return getSuspendedByOfSuspenseNode(suspenseNode, devtoolsInstance);
+  }
+
+  const FALLBACK_THROTTLE_MS: number = 300;
+
+  function getSuspendedByRange(
+    suspenseNode: SuspenseNode,
+  ): null | [number, number] {
+    let min = Infinity;
+    let max = -Infinity;
+    suspenseNode.suspendedBy.forEach((_, ioInfo) => {
+      if (ioInfo.end > max) {
+        max = ioInfo.end;
+      }
+      if (ioInfo.start < min) {
+        min = ioInfo.start;
+      }
+    });
+    const parentSuspenseNode = suspenseNode.parent;
+    if (parentSuspenseNode !== null) {
+      let parentMax = -Infinity;
+      parentSuspenseNode.suspendedBy.forEach((_, ioInfo) => {
+        if (ioInfo.end > parentMax) {
+          parentMax = ioInfo.end;
+        }
+      });
+      // The parent max is theoretically the earlier the parent could've committed.
+      // Therefore, the theoretical max that the child could be throttled is that plus 300ms.
+      const throttleTime = parentMax + FALLBACK_THROTTLE_MS;
+      if (throttleTime > max) {
+        // If the theoretical throttle time is later than the earliest reveal then we extend
+        // the max time to show that this is timespan could possibly get throttled.
+        max = throttleTime;
+      }
+
+      // We use the end of the previous boundary as the start time for this boundary unless,
+      // that's earlier than we'd need to expand to the full fallback throttle range. It
+      // suggests that the parent was loaded earlier than this one.
+      let startTime = max - FALLBACK_THROTTLE_MS;
+      if (parentMax > startTime) {
+        startTime = parentMax;
+      }
+      // If the first fetch of this boundary starts before that, then we use that as the start.
+      if (startTime < min) {
+        min = startTime;
+      }
+    }
+    if (min < Infinity && max > -Infinity) {
+      return [min, max];
+    }
+    return null;
+  }
+
+  function getAwaitStackFromHooks(
+    hooks: HooksTree,
+    asyncInfo: ReactAsyncInfo,
+  ): null | ReactStackTrace {
+    // TODO: We search through the hooks tree generated by inspectHooksOfFiber so that we can
+    // use the information already extracted but ideally this search would be faster since we
+    // could know which index to extract from the debug state.
+    for (let i = 0; i < hooks.length; i++) {
+      const node = hooks[i];
+      const debugInfo = node.debugInfo;
+      if (debugInfo != null && debugInfo.indexOf(asyncInfo) !== -1) {
+        // Found a matching Hook. We'll now use its source location to construct a stack.
+        const source = node.hookSource;
+        if (
+          source != null &&
+          source.functionName !== null &&
+          source.fileName !== null &&
+          source.lineNumber !== null &&
+          source.columnNumber !== null
+        ) {
+          // Unfortunately this is in a slightly different format. TODO: Unify HookNode with ReactCallSite.
+          const callSite: ReactCallSite = [
+            source.functionName,
+            source.fileName,
+            source.lineNumber,
+            source.columnNumber,
+            0,
+            0,
+            false,
+          ];
+          // As we return we'll add any custom hooks parent stacks to the array.
+          return [callSite];
+        } else {
+          return [];
+        }
+      }
+      // Otherwise, search the sub hooks of any custom hook.
+      const matchedStack = getAwaitStackFromHooks(node.subHooks, asyncInfo);
+      if (matchedStack !== null) {
+        // Append this custom hook to the stack trace since it must have been called inside of it.
+        const source = node.hookSource;
+        if (
+          source != null &&
+          source.functionName !== null &&
+          source.fileName !== null &&
+          source.lineNumber !== null &&
+          source.columnNumber !== null
+        ) {
+          // Unfortunately this is in a slightly different format. TODO: Unify HookNode with ReactCallSite.
+          const callSite: ReactCallSite = [
+            source.functionName,
+            source.fileName,
+            source.lineNumber,
+            source.columnNumber,
+            0,
+            0,
+            false,
+          ];
+          matchedStack.push(callSite);
+        }
+        return matchedStack;
+      }
+    }
+    return null;
+  }
+
+  function serializeAsyncInfo(
+    asyncInfo: ReactAsyncInfo,
+    parentInstance: DevToolsInstance,
+    hooks: null | HooksTree,
+  ): SerializedAsyncInfo {
+    const ioInfo = asyncInfo.awaited;
+    const ioOwnerInstance = findNearestOwnerInstance(
+      parentInstance,
+      ioInfo.owner,
+    );
+    let awaitStack =
+      asyncInfo.debugStack == null
+        ? null
+        : // While we have a ReactStackTrace on ioInfo.stack, that will point to the location on
+          // the server. We need a location that points to the virtual source on the client which
+          // we can then use to source map to the original location.
+          parseStackTrace(asyncInfo.debugStack, 1);
+    let awaitOwnerInstance: null | FiberInstance | VirtualInstance;
+    if (
+      asyncInfo.owner == null &&
+      (awaitStack === null || awaitStack.length === 0)
+    ) {
+      // We had no owner nor stack for the await. This can happen if you render it as a child
+      // or throw a Promise. Replace it with the parent as the await.
+      awaitStack = null;
+      awaitOwnerInstance =
+        parentInstance.kind === FILTERED_FIBER_INSTANCE ? null : parentInstance;
+      if (
+        parentInstance.kind === FIBER_INSTANCE ||
+        parentInstance.kind === FILTERED_FIBER_INSTANCE
+      ) {
+        const fiber = parentInstance.data;
+        switch (fiber.tag) {
+          case ClassComponent:
+          case FunctionComponent:
+          case IncompleteClassComponent:
+          case IncompleteFunctionComponent:
+          case IndeterminateComponent:
+          case MemoComponent:
+          case SimpleMemoComponent:
+            // If we awaited in the child position of a component, then the best stack would be the
+            // return callsite but we don't have that available so instead we skip. The callsite of
+            // the JSX would be misleading in this case. The same thing happens with throw-a-Promise.
+            if (hooks !== null) {
+              // If this component used Hooks we might be able to instead infer the stack from the
+              // use() callsite if this async info came from a hook. Let's search the tree to find it.
+              awaitStack = getAwaitStackFromHooks(hooks, asyncInfo);
+            }
+            break;
+          default:
+            // If we awaited by passing a Promise to a built-in element, then the JSX callsite is a
+            // good stack trace to use for the await.
+            if (
+              fiber._debugOwner != null &&
+              fiber._debugStack != null &&
+              typeof fiber._debugStack !== 'string'
+            ) {
+              awaitStack = parseStackTrace(fiber._debugStack, 1);
+              awaitOwnerInstance = findNearestOwnerInstance(
+                parentInstance,
+                fiber._debugOwner,
+              );
+            }
+        }
+      }
+    } else {
+      awaitOwnerInstance = findNearestOwnerInstance(
+        parentInstance,
+        asyncInfo.owner,
+      );
+    }
+
+    const value: any = ioInfo.value;
+    let resolvedValue = undefined;
+    if (
+      typeof value === 'object' &&
+      value !== null &&
+      typeof value.then === 'function'
+    ) {
+      switch (value.status) {
+        case 'fulfilled':
+          resolvedValue = value.value;
+          break;
+        case 'rejected':
+          resolvedValue = value.reason;
+          break;
+      }
+    }
+    return {
+      awaited: {
+        name: ioInfo.name,
+        description: getIODescription(resolvedValue),
+        start: ioInfo.start,
+        end: ioInfo.end,
+        byteSize: ioInfo.byteSize == null ? null : ioInfo.byteSize,
+        value: ioInfo.value == null ? null : ioInfo.value,
+        env: ioInfo.env == null ? null : ioInfo.env,
+        owner:
+          ioOwnerInstance === null
+            ? null
+            : instanceToSerializedElement(ioOwnerInstance),
+        stack:
+          ioInfo.debugStack == null
+            ? null
+            : // While we have a ReactStackTrace on ioInfo.stack, that will point to the location on
+              // the server. We need a location that points to the virtual source on the client which
+              // we can then use to source map to the original location.
+              parseStackTrace(ioInfo.debugStack, 1),
+      },
+      env: asyncInfo.env == null ? null : asyncInfo.env,
+      owner:
+        awaitOwnerInstance === null
+          ? null
+          : instanceToSerializedElement(awaitOwnerInstance),
+      stack: awaitStack,
+    };
+  }
+
+  // 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;
+
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return {instance, style};
+    }
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Handle VirtualInstance.
+      return {instance, style};
+    }
+
+    const fiber = devtoolsInstance.data;
+    if (fiber !== null) {
+      instance = fiber.stateNode;
+
+      if (fiber.memoizedProps !== null) {
+        style = fiber.memoizedProps.style;
+      }
+    }
+
+    return {instance, style};
+  }
+
+  function isErrorBoundary(fiber: Fiber): boolean {
+    const {tag, type} = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+        const instance = fiber.stateNode;
+        return (
+          typeof type.getDerivedStateFromError === 'function' ||
+          (instance !== null &&
+            typeof instance.componentDidCatch === 'function')
+        );
+      default:
+        return false;
+    }
+  }
+
+  function inspectElementRaw(id: number): InspectedElement | null {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return null;
+    }
+    if (devtoolsInstance.kind === VIRTUAL_INSTANCE) {
+      return inspectVirtualInstanceRaw(devtoolsInstance);
+    }
+    if (devtoolsInstance.kind === FIBER_INSTANCE) {
+      const isRoot = devtoolsInstance.parent === null;
+      return isRoot
+        ? inspectRootsRaw(devtoolsInstance.id)
+        : inspectFiberInstanceRaw(devtoolsInstance);
+    }
+    (devtoolsInstance: FilteredFiberInstance); // assert exhaustive
+    throw new Error('Unsupported instance kind');
+  }
+
+  function inspectFiberInstanceRaw(
+    fiberInstance: FiberInstance,
+  ): InspectedElement | null {
+    const fiber = fiberInstance.data;
+    if (fiber == null) {
+      return null;
+    }
+
+    const {
+      stateNode,
+      key,
+      memoizedProps,
+      memoizedState,
+      dependencies,
+      tag,
+      type,
+    } = fiber;
+
+    const elementType = getElementTypeForFiber(fiber);
+
+    const usesHooks =
+      (tag === FunctionComponent ||
+        tag === SimpleMemoComponent ||
+        tag === ForwardRef) &&
+      (!!memoizedState || !!dependencies);
+
+    // TODO Show custom UI for Cache like we do for Suspense
+    // For now, just hide state data entirely since it's not meant to be inspected.
+    const showState =
+      tag === ClassComponent || tag === IncompleteClassComponent;
+
+    const typeSymbol = getTypeSymbol(type);
+
+    let canViewSource = false;
+    let context = null;
+    if (
+      tag === ClassComponent ||
+      tag === FunctionComponent ||
+      tag === IncompleteClassComponent ||
+      tag === IncompleteFunctionComponent ||
+      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 (
+      // Detect pre-19 Context Consumers
+      (typeSymbol === CONTEXT_NUMBER || typeSymbol === CONTEXT_SYMBOL_STRING) &&
+      !(
+        // In 19+, CONTEXT_SYMBOL_STRING means a Provider instead.
+        // It will be handled in a different branch below.
+        // Eventually, this entire branch can be removed.
+        (type._context === undefined && type.Provider === type)
+      )
+    ) {
+      // 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 === PROVIDER_NUMBER ||
+          currentTypeSymbol === 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;
+      }
+    } else if (
+      // Detect 19+ Context Consumers
+      typeSymbol === CONSUMER_SYMBOL_STRING
+    ) {
+      // This branch is 19+ only, where Context.Provider === Context.
+      // NOTE Keep in sync with getDisplayNameForFiber()
+      const consumerResolvedContext = type._context;
+
+      // 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 (
+          // In 19+, these are Context Providers
+          currentTypeSymbol === CONTEXT_SYMBOL_STRING
+        ) {
+          const providerResolvedContext = currentType;
+          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};
+    }
+
+    const owners: null | Array<SerializedElement> =
+      getOwnersListFromInstance(fiberInstance);
+
+    let hooks: null | HooksTree = null;
+    if (usesHooks) {
+      hooks = inspectHooks(fiber);
+    }
+
+    let rootType = null;
+    let current = fiber;
+    let hasErrorBoundary = false;
+    let hasSuspenseBoundary = false;
+    while (current.return !== null) {
+      const temp = current;
+      current = current.return;
+      if (temp.tag === SuspenseComponent) {
+        hasSuspenseBoundary = true;
+      } else if (isErrorBoundary(temp)) {
+        hasErrorBoundary = true;
+      }
+    }
+    const fiberRoot = current.stateNode;
+    if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+      rootType = fiberRoot._debugRootType;
+    }
+
+    let isErrored = false;
+    if (isErrorBoundary(fiber)) {
+      // if the current inspected element is an error boundary,
+      // either that we want to use it to toggle off error state
+      // or that we allow to force error state on it if it's within another
+      // error boundary
+      //
+      // TODO: This flag is a leaked implementation detail. Once we start
+      // releasing DevTools in lockstep with React, we should import a function
+      // from the reconciler instead.
+      const DidCapture = 0b000000000000000000010000000;
+      isErrored =
+        (fiber.flags & DidCapture) !== 0 ||
+        forceErrorForFibers.get(fiber) === true ||
+        (fiber.alternate !== null &&
+          forceErrorForFibers.get(fiber.alternate) === true);
+    }
+
+    const plugins: Plugins = {
+      stylex: null,
+    };
+
+    if (enableStyleXFeatures) {
+      if (memoizedProps != null && memoizedProps.hasOwnProperty('xstyle')) {
+        plugins.stylex = getStyleXData(memoizedProps.xstyle);
+      }
+    }
+
+    let source = null;
+    if (canViewSource) {
+      source = getSourceForFiberInstance(fiberInstance);
+    }
+
+    let componentLogsEntry = fiberToComponentLogsMap.get(fiber);
+    if (componentLogsEntry === undefined && fiber.alternate !== null) {
+      componentLogsEntry = fiberToComponentLogsMap.get(fiber.alternate);
+    }
+
+    let nativeTag = null;
+    if (elementType === ElementTypeHostComponent) {
+      nativeTag = getNativeTag(fiber.stateNode);
+    }
+
+    let isSuspended: boolean | null = null;
+    if (tag === SuspenseComponent) {
+      isSuspended = memoizedState !== null;
+    }
+
+    const suspendedBy =
+      fiberInstance.suspenseNode !== null
+        ? // If this is a Suspense boundary, then we include everything in the subtree that might suspend
+          // this boundary down to the next Suspense boundary.
+          getSuspendedByOfSuspenseNode(fiberInstance.suspenseNode, null)
+        : tag === ActivityComponent
+          ? // For Activity components we show everything that suspends the subtree down to the next boundary
+            // so that you can see what suspends a Transition at that level.
+            getSuspendedByOfInstanceSubtree(fiberInstance)
+          : // This set is an edge case where if you pass a promise to a Client Component into a children
+            // position without a Server Component as the direct parent. E.g. <div>{promise}</div>
+            // In this case, this becomes associated with the Client/Host Component where as normally
+            // you'd expect these to be associated with the Server Component that awaited the data.
+            // TODO: Prepend other suspense sources like css, images and use().
+            getSuspendedByOfInstance(fiberInstance, hooks);
+    const suspendedByRange = getSuspendedByRange(
+      getNearestSuspenseNode(fiberInstance),
+    );
+
+    let unknownSuspenders = UNKNOWN_SUSPENDERS_NONE;
+    if (
+      fiberInstance.suspenseNode !== null &&
+      fiberInstance.suspenseNode.hasUnknownSuspenders &&
+      !isSuspended
+    ) {
+      // Something unknown threw to suspended this boundary. Let's figure out why that might be.
+      if (renderer.bundleType === 0) {
+        unknownSuspenders = UNKNOWN_SUSPENDERS_REASON_PRODUCTION;
+      } else if (!('_debugInfo' in fiber)) {
+        // TODO: We really should detect _debugThenable and the auto-instrumentation for lazy/thenables too.
+        unknownSuspenders = UNKNOWN_SUSPENDERS_REASON_OLD_VERSION;
+      } else {
+        unknownSuspenders = UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE;
+      }
+    }
+
+    return {
+      id: fiberInstance.id,
+
+      // Does the current renderer support editable hooks and function props?
+      canEditHooks: typeof overrideHookState === 'function',
+      canEditFunctionProps: typeof overrideProps === 'function',
+
+      // Does the current renderer support advanced editing interface?
+      canEditHooksAndDeletePaths:
+        typeof overrideHookStateDeletePath === 'function',
+      canEditHooksAndRenamePaths:
+        typeof overrideHookStateRenamePath === 'function',
+      canEditFunctionPropsDeletePaths:
+        typeof overridePropsDeletePath === 'function',
+      canEditFunctionPropsRenamePaths:
+        typeof overridePropsRenamePath === 'function',
+
+      canToggleError: supportsTogglingError && hasErrorBoundary,
+      // Is this error boundary in error state.
+      isErrored,
+
+      canToggleSuspense:
+        supportsTogglingSuspense &&
+        hasSuspenseBoundary &&
+        // If it's showing the real content, we can always flip fallback.
+        (!isSuspended ||
+          // If it's showing fallback because we previously forced it to,
+          // allow toggling it back to remove the fallback override.
+          forceFallbackForFibers.has(fiber) ||
+          (fiber.alternate !== null &&
+            forceFallbackForFibers.has(fiber.alternate))),
+      isSuspended: isSuspended,
+
+      source,
+
+      stack:
+        fiber._debugOwner == null || fiber._debugStack == null
+          ? null
+          : parseStackTrace(fiber._debugStack, 1),
+
+      // Does the component have legacy context attached to it.
+      hasLegacyContext,
+
+      key: key != null && key !== REACT_OPTIMISTIC_KEY ? key : null,
+
+      type: elementType,
+
+      // Inspectable properties.
+      // TODO Review sanitization approach for the below inspectable values.
+      context,
+      hooks,
+      props: memoizedProps,
+      state: showState ? memoizedState : null,
+      errors:
+        componentLogsEntry === undefined
+          ? []
+          : Array.from(componentLogsEntry.errors.entries()),
+      warnings:
+        componentLogsEntry === undefined
+          ? []
+          : Array.from(componentLogsEntry.warnings.entries()),
+
+      suspendedBy: suspendedBy,
+      suspendedByRange: suspendedByRange,
+      unknownSuspenders: unknownSuspenders,
+
+      // List of owners
+      owners,
+
+      env: null,
+
+      rootType,
+      rendererPackageName: renderer.rendererPackageName,
+      rendererVersion: renderer.version,
+
+      plugins,
+
+      nativeTag,
+    };
+  }
+
+  function inspectVirtualInstanceRaw(
+    virtualInstance: VirtualInstance,
+  ): InspectedElement | null {
+    const source = getSourceForInstance(virtualInstance);
+
+    const componentInfo = virtualInstance.data;
+    const key =
+      typeof componentInfo.key === 'string' ? componentInfo.key : null;
+    const props = componentInfo.props == null ? null : componentInfo.props;
+    const owners: null | Array<SerializedElement> =
+      getOwnersListFromInstance(virtualInstance);
+
+    let rootType = null;
+    let hasErrorBoundary = false;
+    let hasSuspenseBoundary = false;
+    const nearestFiber = getNearestFiber(virtualInstance);
+    if (nearestFiber !== null) {
+      let current = nearestFiber;
+      while (current.return !== null) {
+        const temp = current;
+        current = current.return;
+        if (temp.tag === SuspenseComponent) {
+          hasSuspenseBoundary = true;
+        } else if (isErrorBoundary(temp)) {
+          hasErrorBoundary = true;
+        }
+      }
+      const fiberRoot = current.stateNode;
+      if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+        rootType = fiberRoot._debugRootType;
+      }
+    }
+
+    const plugins: Plugins = {
+      stylex: null,
+    };
+
+    const componentLogsEntry =
+      componentInfoToComponentLogsMap.get(componentInfo);
+
+    const isSuspended = null;
+    // Things that Suspended this Server Component (use(), awaits and direct child promises)
+    const suspendedBy = getSuspendedByOfInstance(virtualInstance, null);
+    const suspendedByRange = getSuspendedByRange(
+      getNearestSuspenseNode(virtualInstance),
+    );
+
+    return {
+      id: virtualInstance.id,
+
+      canEditHooks: false,
+      canEditFunctionProps: false,
+
+      canEditHooksAndDeletePaths: false,
+      canEditHooksAndRenamePaths: false,
+      canEditFunctionPropsDeletePaths: false,
+      canEditFunctionPropsRenamePaths: false,
+
+      canToggleError: supportsTogglingError && hasErrorBoundary,
+      isErrored: false,
+
+      canToggleSuspense: supportsTogglingSuspense && hasSuspenseBoundary,
+      isSuspended: isSuspended,
+
+      source,
+
+      stack:
+        componentInfo.owner == null || componentInfo.debugStack == null
+          ? null
+          : parseStackTrace(componentInfo.debugStack, 1),
+
+      // Does the component have legacy context attached to it.
+      hasLegacyContext: false,
+
+      key: key,
+
+      type: ElementTypeVirtual,
+
+      // Inspectable properties.
+      // TODO Review sanitization approach for the below inspectable values.
+      context: null,
+      hooks: null,
+      props: props,
+      state: null,
+      errors:
+        componentLogsEntry === undefined
+          ? []
+          : Array.from(componentLogsEntry.errors.entries()),
+      warnings:
+        componentLogsEntry === undefined
+          ? []
+          : Array.from(componentLogsEntry.warnings.entries()),
+
+      suspendedBy: suspendedBy,
+      suspendedByRange: suspendedByRange,
+      unknownSuspenders: UNKNOWN_SUSPENDERS_NONE,
+
+      // List of owners
+      owners,
+
+      env: componentInfo.env == null ? null : componentInfo.env,
+
+      rootType,
+      rendererPackageName: renderer.rendererPackageName,
+      rendererVersion: renderer.version,
+
+      plugins,
+
+      nativeTag: null,
+    };
+  }
+
+  let mostRecentlyInspectedElement: InspectedElement | null = null;
+  let hasElementUpdatedSinceLastInspected: boolean = false;
+  let currentlyInspectedPaths: Object = {};
+
+  function isMostRecentlyInspectedElement(id: number): boolean {
+    if (mostRecentlyInspectedElement === null) {
+      return false;
+    }
+    if (mostRecentlyInspectedElement.id === id) {
+      return true;
+    }
+
+    if (mostRecentlyInspectedElement.type === ElementTypeRoot) {
+      // we inspected the screen recently. If we're inspecting another root, we're
+      // still inspecting the screen.
+      const instance = idToDevToolsInstanceMap.get(id);
+      return (
+        instance !== undefined &&
+        instance.kind === FIBER_INSTANCE &&
+        instance.parent === null
+      );
+    }
+    return false;
+  }
+
+  function isMostRecentlyInspectedElementCurrent(id: number): boolean {
+    return (
+      isMostRecentlyInspectedElement(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 createIsPathAllowed(
+    key: string | null,
+    secondaryCategory: 'suspendedBy' | '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 isPathAllowed(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 - 2] === 'hookSource' &&
+            path[path.length - 1] === 'fileName'
+          ) {
+            // It's important to preserve the full file name (URL) for hook sources
+            // in case the user has enabled the named hooks feature.
+            // Otherwise the frontend may end up with a partial URL which it can't load.
+            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;
+        case 'suspendedBy':
+          if (path.length < 5) {
+            // Never dehydrate anything above suspendedBy[index].awaited.value
+            // Those are part of the internal meta data. We only dehydrate inside the Promise.
+            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;
+
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return;
+    }
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Handle VirtualInstance.
+      return;
+    }
+
+    const fiber = devtoolsInstance.data;
+    const {elementType, stateNode, tag, type} = fiber;
+
+    switch (tag) {
+      case ClassComponent:
+      case IncompleteClassComponent:
+      case IndeterminateComponent:
+        global.$r = stateNode;
+        break;
+      case IncompleteFunctionComponent:
+      case FunctionComponent:
+        global.$r = {
+          hooks,
+          props,
+          type,
+        };
+        break;
+      case ForwardRef:
+        global.$r = {
+          hooks,
+          props,
+          type: type.render,
+        };
+        break;
+      case MemoComponent:
+      case SimpleMemoComponent:
+        global.$r = {
+          hooks,
+          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 {
+    if (isMostRecentlyInspectedElement(id)) {
+      const value = getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+      const key = `$reactTemp${count}`;
+
+      window[key] = value;
+
+      console.log(key);
+      console.log(value);
+    }
+  }
+
+  function getSerializedElementValueByPath(
+    id: number,
+    path: Array<string | number>,
+  ): ?string {
+    if (isMostRecentlyInspectedElement(id)) {
+      const valueToCopy = getInObject(
+        ((mostRecentlyInspectedElement: any): InspectedElement),
+        path,
+      );
+
+      return serializeToString(valueToCopy);
+    }
+  }
+
+  function inspectElement(
+    requestID: number,
+    id: number,
+    path: Array<string | number> | null,
+    forceFullData: boolean,
+  ): InspectedElementPayload {
+    if (path !== null) {
+      mergeInspectedPaths(path);
+    }
+
+    if (isMostRecentlyInspectedElement(id) && !forceFullData) {
+      if (!hasElementUpdatedSinceLastInspected) {
+        if (path !== null) {
+          let secondaryCategory: 'suspendedBy' | 'hooks' | null = null;
+          if (path[0] === 'hooks' || path[0] === 'suspendedBy') {
+            secondaryCategory = path[0];
+          }
+
+          // 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,
+            responseID: requestID,
+            type: 'hydrated-path',
+            path,
+            value: cleanForBridge(
+              getInObject(
+                ((mostRecentlyInspectedElement: any): InspectedElement),
+                path,
+              ),
+              createIsPathAllowed(null, secondaryCategory),
+              path,
+            ),
+          };
+        } else {
+          // If this element has not been updated since it was last inspected, we don't need to return it.
+          // Instead we can just return the ID to indicate that it has not changed.
+          return {
+            id,
+            responseID: requestID,
+            type: 'no-change',
+          };
+        }
+      }
+    } else {
+      currentlyInspectedPaths = {};
+    }
+
+    hasElementUpdatedSinceLastInspected = false;
+
+    try {
+      mostRecentlyInspectedElement = inspectElementRaw(id);
+    } catch (error) {
+      // the error name is synced with ReactDebugHooks
+      if (error.name === 'ReactDebugToolsRenderError') {
+        let message = 'Error rendering inspected element.';
+        let stack;
+        // Log error & cause for user to debug
+        console.error(message + '\n\n', error);
+        if (error.cause != null) {
+          const componentName = getDisplayNameForElementID(id);
+          console.error(
+            'React DevTools encountered an error while trying to inspect hooks. ' +
+              'This is most likely caused by an error in current inspected component' +
+              (componentName != null ? `: "${componentName}".` : '.') +
+              '\nThe error thrown in the component is: \n\n',
+            error.cause,
+          );
+          if (error.cause instanceof Error) {
+            message = error.cause.message || message;
+            stack = error.cause.stack;
+          }
+        }
+
+        return {
+          type: 'error',
+          errorType: 'user',
+          id,
+          responseID: requestID,
+          message,
+          stack,
+        };
+      }
+
+      // the error name is synced with ReactDebugHooks
+      if (error.name === 'ReactDebugToolsUnsupportedHookError') {
+        return {
+          type: 'error',
+          errorType: 'unknown-hook',
+          id,
+          responseID: requestID,
+          message:
+            'Unsupported hook in the react-debug-tools package: ' +
+            error.message,
+        };
+      }
+
+      // Log Uncaught Error
+      console.error('Error inspecting element.\n\n', error);
+
+      return {
+        type: 'error',
+        errorType: 'uncaught',
+        id,
+        responseID: requestID,
+        message: error.message,
+        stack: error.stack,
+      };
+    }
+
+    if (mostRecentlyInspectedElement === null) {
+      return {
+        id,
+        responseID: requestID,
+        type: 'not-found',
+      };
+    }
+    const inspectedElement = mostRecentlyInspectedElement;
+
+    // Any time an inspected element has an update,
+    // we should update the selected $r value as wel.
+    // Do this before dehydration (cleanForBridge).
+    updateSelectedElement(inspectedElement);
+
+    // 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 = {...inspectedElement};
+    // $FlowFixMe[prop-missing] found when upgrading Flow
+    cleanedInspectedElement.context = cleanForBridge(
+      inspectedElement.context,
+      createIsPathAllowed('context', null),
+    );
+    // $FlowFixMe[prop-missing] found when upgrading Flow
+    cleanedInspectedElement.hooks = cleanForBridge(
+      inspectedElement.hooks,
+      createIsPathAllowed('hooks', 'hooks'),
+    );
+    // $FlowFixMe[prop-missing] found when upgrading Flow
+    cleanedInspectedElement.props = cleanForBridge(
+      inspectedElement.props,
+      createIsPathAllowed('props', null),
+    );
+    // $FlowFixMe[prop-missing] found when upgrading Flow
+    cleanedInspectedElement.state = cleanForBridge(
+      inspectedElement.state,
+      createIsPathAllowed('state', null),
+    );
+    // $FlowFixMe[prop-missing] found when upgrading Flow
+    cleanedInspectedElement.suspendedBy = cleanForBridge(
+      inspectedElement.suspendedBy,
+      createIsPathAllowed('suspendedBy', 'suspendedBy'),
+    );
+
+    return {
+      id,
+      responseID: requestID,
+      type: 'full-data',
+      // $FlowFixMe[prop-missing] found when upgrading Flow
+      value: cleanedInspectedElement,
+    };
+  }
+
+  function inspectRootsRaw(arbitraryRootID: number): InspectedElement | null {
+    const roots = hook.getFiberRoots(rendererID);
+    if (roots.size === 0) {
+      return null;
+    }
+
+    const inspectedRoots: InspectedElement = {
+      // invariants
+      id: arbitraryRootID,
+      type: ElementTypeRoot,
+      // Properties we merge
+      isErrored: false,
+      errors: [],
+      warnings: [],
+      suspendedBy: [],
+      suspendedByRange: null,
+      // TODO: How to merge these?
+      unknownSuspenders: UNKNOWN_SUSPENDERS_NONE,
+      // Properties where merging doesn't make sense so we ignore them entirely in the UI
+      rootType: null,
+      plugins: {stylex: null},
+      nativeTag: null,
+      env: null,
+      source: null,
+      stack: null,
+      rendererPackageName: null,
+      rendererVersion: null,
+      // These don't make sense for a Root. They're just bottom values.
+      key: null,
+      canEditFunctionProps: false,
+      canEditHooks: false,
+      canEditFunctionPropsDeletePaths: false,
+      canEditFunctionPropsRenamePaths: false,
+      canEditHooksAndDeletePaths: false,
+      canEditHooksAndRenamePaths: false,
+      canToggleError: false,
+      canToggleSuspense: false,
+      isSuspended: false,
+      hasLegacyContext: false,
+      context: null,
+      hooks: null,
+      props: null,
+      state: null,
+      owners: null,
+    };
+
+    let minSuspendedByRange = Infinity;
+    let maxSuspendedByRange = -Infinity;
+    roots.forEach(root => {
+      const rootInstance = rootToFiberInstanceMap.get(root);
+      if (rootInstance === undefined) {
+        throw new Error(
+          'Expected a root instance to exist for this Fiber root',
+        );
+      }
+      const inspectedRoot = inspectFiberInstanceRaw(rootInstance);
+      if (inspectedRoot === null) {
+        return;
+      }
+
+      if (inspectedRoot.isErrored) {
+        inspectedRoots.isErrored = true;
+      }
+      for (let i = 0; i < inspectedRoot.errors.length; i++) {
+        inspectedRoots.errors.push(inspectedRoot.errors[i]);
+      }
+      for (let i = 0; i < inspectedRoot.warnings.length; i++) {
+        inspectedRoots.warnings.push(inspectedRoot.warnings[i]);
+      }
+      for (let i = 0; i < inspectedRoot.suspendedBy.length; i++) {
+        inspectedRoots.suspendedBy.push(inspectedRoot.suspendedBy[i]);
+      }
+      const suspendedByRange = inspectedRoot.suspendedByRange;
+      if (suspendedByRange !== null) {
+        if (suspendedByRange[0] < minSuspendedByRange) {
+          minSuspendedByRange = suspendedByRange[0];
+        }
+        if (suspendedByRange[1] > maxSuspendedByRange) {
+          maxSuspendedByRange = suspendedByRange[1];
+        }
+      }
+    });
+
+    if (minSuspendedByRange !== Infinity || maxSuspendedByRange !== -Infinity) {
+      inspectedRoots.suspendedByRange = [
+        minSuspendedByRange,
+        maxSuspendedByRange,
+      ];
+    }
+
+    return inspectedRoots;
+  }
+
+  function logElementToConsole(id: number) {
+    const result = isMostRecentlyInspectedElementCurrent(id)
+      ? mostRecentlyInspectedElement
+      : inspectElementRaw(id);
+    if (result === null) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return;
+    }
+
+    const displayName = getDisplayNameForElementID(id);
+
+    const supportsGroup = typeof console.groupCollapsed === 'function';
+    if (supportsGroup) {
+      console.groupCollapsed(
+        `[Click to expand] %c<${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 hostInstances = findHostInstancesForElementID(id);
+    if (hostInstances !== null) {
+      console.log('Nodes:', hostInstances);
+    }
+    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 deletePath(
+    type: 'context' | 'hooks' | 'props' | 'state',
+    id: number,
+    hookID: ?number,
+    path: Array<string | number>,
+  ): void {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return;
+    }
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Handle VirtualInstance.
+      return;
+    }
+    const fiber = devtoolsInstance.data;
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+
+      switch (type) {
+        case 'context':
+          // To simplify hydration and display of primitive 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);
+
+          switch (fiber.tag) {
+            case ClassComponent:
+              if (path.length === 0) {
+                // Simple context value (noop)
+              } else {
+                deletePathInObject(instance.context, path);
+              }
+              instance.forceUpdate();
+              break;
+            case FunctionComponent:
+              // Function components using legacy context are not editable
+              // because there's no instance on which to create a cloned, mutated context.
+              break;
+          }
+          break;
+        case 'hooks':
+          if (typeof overrideHookStateDeletePath === 'function') {
+            overrideHookStateDeletePath(fiber, ((hookID: any): number), path);
+          }
+          break;
+        case 'props':
+          if (instance === null) {
+            if (typeof overridePropsDeletePath === 'function') {
+              overridePropsDeletePath(fiber, path);
+            }
+          } else {
+            fiber.pendingProps = copyWithDelete(instance.props, path);
+            instance.forceUpdate();
+          }
+          break;
+        case 'state':
+          deletePathInObject(instance.state, path);
+          instance.forceUpdate();
+          break;
+      }
+    }
+  }
+
+  function renamePath(
+    type: 'context' | 'hooks' | 'props' | 'state',
+    id: number,
+    hookID: ?number,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ): void {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return;
+    }
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Handle VirtualInstance.
+      return;
+    }
+    const fiber = devtoolsInstance.data;
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+
+      switch (type) {
+        case 'context':
+          // To simplify hydration and display of primitive 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.
+          oldPath = oldPath.slice(1);
+          newPath = newPath.slice(1);
+
+          switch (fiber.tag) {
+            case ClassComponent:
+              if (oldPath.length === 0) {
+                // Simple context value (noop)
+              } else {
+                renamePathInObject(instance.context, oldPath, newPath);
+              }
+              instance.forceUpdate();
+              break;
+            case FunctionComponent:
+              // Function components using legacy context are not editable
+              // because there's no instance on which to create a cloned, mutated context.
+              break;
+          }
+          break;
+        case 'hooks':
+          if (typeof overrideHookStateRenamePath === 'function') {
+            overrideHookStateRenamePath(
+              fiber,
+              ((hookID: any): number),
+              oldPath,
+              newPath,
+            );
+          }
+          break;
+        case 'props':
+          if (instance === null) {
+            if (typeof overridePropsRenamePath === 'function') {
+              overridePropsRenamePath(fiber, oldPath, newPath);
+            }
+          } else {
+            fiber.pendingProps = copyWithRename(
+              instance.props,
+              oldPath,
+              newPath,
+            );
+            instance.forceUpdate();
+          }
+          break;
+        case 'state':
+          renamePathInObject(instance.state, oldPath, newPath);
+          instance.forceUpdate();
+          break;
+      }
+    }
+  }
+
+  function overrideValueAtPath(
+    type: 'context' | 'hooks' | 'props' | 'state',
+    id: number,
+    hookID: ?number,
+    path: Array<string | number>,
+    value: any,
+  ): void {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      console.warn(`Could not find DevToolsInstance with id "${id}"`);
+      return;
+    }
+    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
+      // TODO: Handle VirtualInstance.
+      return;
+    }
+    const fiber = devtoolsInstance.data;
+    if (fiber !== null) {
+      const instance = fiber.stateNode;
+
+      switch (type) {
+        case 'context':
+          // To simplify hydration and display of primitive 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);
+
+          switch (fiber.tag) {
+            case ClassComponent:
+              if (path.length === 0) {
+                // Simple context value
+                instance.context = value;
+              } else {
+                setInObject(instance.context, path, value);
+              }
+              instance.forceUpdate();
+              break;
+            case FunctionComponent:
+              // Function components using legacy context are not editable
+              // because there's no instance on which to create a cloned, mutated context.
+              break;
+          }
+          break;
+        case 'hooks':
+          if (typeof overrideHookState === 'function') {
+            overrideHookState(fiber, ((hookID: any): number), path, value);
+          }
+          break;
+        case 'props':
+          switch (fiber.tag) {
+            case ClassComponent:
+              fiber.pendingProps = copyWithSet(instance.props, path, value);
+              instance.forceUpdate();
+              break;
+            default:
+              if (typeof overrideProps === 'function') {
+                overrideProps(fiber, path, value);
+              }
+              break;
+          }
+          break;
+        case 'state':
+          switch (fiber.tag) {
+            case ClassComponent:
+              setInObject(instance.state, path, value);
+              instance.forceUpdate();
+              break;
+          }
+          break;
+      }
+    }
+  }
+
+  type CommitProfilingData = {
+    changeDescriptions: Map<number, ChangeDescription> | null,
+    commitTime: number,
+    durations: Array<number>,
+    effectDuration: number | null,
+    maxActualDuration: number,
+    passiveEffectDuration: number | null,
+    priorityLevel: string | null,
+    updaters: Array<SerializedElement> | null,
+  };
+
+  type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
+  type DisplayNamesByRootID = Map<number, string>;
+
+  let currentCommitProfilingMetadata: CommitProfilingData | null = null;
+  let displayNamesByRootID: DisplayNamesByRootID | null = null;
+  let initialTreeBaseDurationsMap: Map<number, Array<[number, number]>> | null =
+    null;
+  let isProfiling: boolean = false;
+  let profilingStartTime: number = 0;
+  let recordChangeDescriptions: boolean = false;
+  let recordTimeline: 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 displayName =
+          (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||
+          'Unknown';
+
+        const initialTreeBaseDurations: Array<[number, number]> =
+          (initialTreeBaseDurationsMap !== null &&
+            initialTreeBaseDurationsMap.get(rootID)) ||
+          [];
+
+        commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {
+          const {
+            changeDescriptions,
+            durations,
+            effectDuration,
+            maxActualDuration,
+            passiveEffectDuration,
+            priorityLevel,
+            commitTime,
+            updaters,
+          } = commitProfilingData;
+
+          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,
+              formatDurationToMicrosecondsGranularity(durations[i + 1]),
+            ]);
+            fiberSelfDurations.push([
+              fiberID,
+              formatDurationToMicrosecondsGranularity(durations[i + 2]),
+            ]);
+          }
+
+          commitData.push({
+            changeDescriptions:
+              changeDescriptions !== null
+                ? Array.from(changeDescriptions.entries())
+                : null,
+            duration:
+              formatDurationToMicrosecondsGranularity(maxActualDuration),
+            effectDuration:
+              effectDuration !== null
+                ? formatDurationToMicrosecondsGranularity(effectDuration)
+                : null,
+            fiberActualDurations,
+            fiberSelfDurations,
+            passiveEffectDuration:
+              passiveEffectDuration !== null
+                ? formatDurationToMicrosecondsGranularity(passiveEffectDuration)
+                : null,
+            priorityLevel,
+            timestamp: commitTime,
+            updaters,
+          });
+        });
+
+        dataForRoots.push({
+          commitData,
+          displayName,
+          initialTreeBaseDurations,
+          rootID,
+        });
+      },
+    );
+
+    let timelineData = null;
+    if (typeof getTimelineData === 'function') {
+      const currentTimelineData = getTimelineData();
+      if (currentTimelineData) {
+        const {
+          batchUIDToMeasuresMap,
+          internalModuleSourceToRanges,
+          laneToLabelMap,
+          laneToReactMeasureMap,
+          ...rest
+        } = currentTimelineData;
+
+        timelineData = {
+          ...rest,
+
+          // Most of the data is safe to parse as-is,
+          // but we need to convert the nested Arrays back to Maps.
+          // Most of the data is safe to serialize as-is,
+          // but we need to convert the Maps to nested Arrays.
+          batchUIDToMeasuresKeyValueArray: Array.from(
+            batchUIDToMeasuresMap.entries(),
+          ),
+          internalModuleSourceToRanges: Array.from(
+            internalModuleSourceToRanges.entries(),
+          ),
+          laneToLabelKeyValueArray: Array.from(laneToLabelMap.entries()),
+          laneToReactMeasureKeyValueArray: Array.from(
+            laneToReactMeasureMap.entries(),
+          ),
+        };
+      }
+    }
+
+    return {
+      dataForRoots,
+      rendererID,
+      timelineData,
+    };
+  }
+
+  function snapshotTreeBaseDurations(
+    instance: DevToolsInstance,
+    target: Array<[number, number]>,
+  ) {
+    // We don't need to convert milliseconds to microseconds in this case,
+    // because the profiling summary is JSON serialized.
+    if (instance.kind !== FILTERED_FIBER_INSTANCE) {
+      target.push([instance.id, instance.treeBaseDuration]);
+    }
+    for (
+      let child = instance.firstChild;
+      child !== null;
+      child = child.nextSibling
+    ) {
+      snapshotTreeBaseDurations(child, target);
+    }
+  }
+
+  function startProfiling(
+    shouldRecordChangeDescriptions: boolean,
+    shouldRecordTimeline: boolean,
+  ) {
+    if (isProfiling) {
+      return;
+    }
+
+    recordChangeDescriptions = shouldRecordChangeDescriptions;
+    recordTimeline = shouldRecordTimeline;
+
+    // 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();
+
+    hook.getFiberRoots(rendererID).forEach(root => {
+      const rootInstance = rootToFiberInstanceMap.get(root);
+      if (rootInstance === undefined) {
+        throw new Error(
+          'Expected the root instance to already exist when starting profiling',
+        );
+      }
+      const rootID = rootInstance.id;
+      ((displayNamesByRootID: any): DisplayNamesByRootID).set(
+        rootID,
+        getDisplayNameForRoot(root.current),
+      );
+      const initialTreeBaseDurations: Array<[number, number]> = [];
+      snapshotTreeBaseDurations(rootInstance, initialTreeBaseDurations);
+      (initialTreeBaseDurationsMap: any).set(rootID, initialTreeBaseDurations);
+    });
+
+    isProfiling = true;
+    profilingStartTime = getCurrentTime();
+    rootToCommitProfilingMetadataMap = new Map();
+
+    if (toggleProfilingStatus !== null) {
+      toggleProfilingStatus(true, recordTimeline);
+    }
+  }
+
+  function stopProfiling() {
+    isProfiling = false;
+    recordChangeDescriptions = false;
+
+    if (toggleProfilingStatus !== null) {
+      toggleProfilingStatus(false, recordTimeline);
+    }
+
+    recordTimeline = false;
+  }
+
+  // Automatically start profiling so that we don't miss timing info from initial "mount".
+  if (shouldStartProfilingNow) {
+    startProfiling(
+      profilingSettings.recordChangeDescriptions,
+      profilingSettings.recordTimeline,
+    );
+  }
+
+  function getNearestFiber(devtoolsInstance: DevToolsInstance): null | Fiber {
+    if (devtoolsInstance.kind === VIRTUAL_INSTANCE) {
+      let inst: DevToolsInstance = devtoolsInstance;
+      while (inst.kind === VIRTUAL_INSTANCE) {
+        // For virtual instances, we search deeper until we find a Fiber instance.
+        // Then we search upwards from that Fiber. That's because Virtual Instances
+        // will always have an Fiber child filtered or not. If we searched its parents
+        // we might skip through a filtered Error Boundary before we hit a FiberInstance.
+        if (inst.firstChild === null) {
+          return null;
+        }
+        inst = inst.firstChild;
+      }
+      return inst.data.return;
+    } else {
+      return devtoolsInstance.data;
+    }
+  }
+
+  // React will switch between these implementations depending on whether
+  // we have any manually suspended/errored-out Fibers or not.
+  function shouldErrorFiberAlwaysNull() {
+    return null;
+  }
+
+  // Map of Fiber and its force error status: true (error), false (toggled off)
+  const forceErrorForFibers = new Map<Fiber, boolean>();
+
+  function shouldErrorFiberAccordingToMap(fiber: any): boolean {
+    if (typeof setErrorHandler !== 'function') {
+      throw new Error(
+        'Expected overrideError() to not get called for earlier React versions.',
+      );
+    }
+
+    let status = forceErrorForFibers.get(fiber);
+    if (status === false) {
+      // TRICKY overrideError adds entries to this Map,
+      // so ideally it would be the method that clears them too,
+      // but that would break the functionality of the feature,
+      // since DevTools needs to tell React to act differently than it normally would
+      // (don't just re-render the failed boundary, but reset its errored state too).
+      // So we can only clear it after telling React to reset the state.
+      // Technically this is premature and we should schedule it for later,
+      // since the render could always fail without committing the updated error boundary,
+      // but since this is a DEV-only feature, the simplicity is worth the trade off.
+      forceErrorForFibers.delete(fiber);
+      if (forceErrorForFibers.size === 0) {
+        // Last override is gone. Switch React back to fast path.
+        setErrorHandler(shouldErrorFiberAlwaysNull);
+      }
+      return false;
+    }
+    if (status === undefined && fiber.alternate !== null) {
+      status = forceErrorForFibers.get(fiber.alternate);
+      if (status === false) {
+        forceErrorForFibers.delete(fiber.alternate);
+        if (forceErrorForFibers.size === 0) {
+          // Last override is gone. Switch React back to fast path.
+          setErrorHandler(shouldErrorFiberAlwaysNull);
+        }
+      }
+    }
+    if (status === undefined) {
+      return false;
+    }
+    return status;
+  }
+
+  function overrideError(id: number, forceError: boolean) {
+    if (
+      typeof setErrorHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideError() to not get called for earlier React versions.',
+      );
+    }
+
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      return;
+    }
+    const nearestFiber = getNearestFiber(devtoolsInstance);
+    if (nearestFiber === null) {
+      return;
+    }
+    let fiber = nearestFiber;
+    while (!isErrorBoundary(fiber)) {
+      if (fiber.return === null) {
+        return;
+      }
+      fiber = fiber.return;
+    }
+    forceErrorForFibers.set(fiber, forceError);
+    if (fiber.alternate !== null) {
+      // We only need one of the Fibers in the set.
+      forceErrorForFibers.delete(fiber.alternate);
+    }
+    if (forceErrorForFibers.size === 1) {
+      // First override is added. Switch React to slower path.
+      setErrorHandler(shouldErrorFiberAccordingToMap);
+    }
+    if (!forceError && typeof scheduleRetry === 'function') {
+      // If we're dismissing an error and the renderer supports it, use a Retry instead of Sync
+      // This would allow View Transitions to proceed as if the error was dismissed using a Transition.
+      scheduleRetry(fiber);
+    } else {
+      scheduleUpdate(fiber);
+    }
+  }
+
+  function shouldSuspendFiberAlwaysFalse() {
+    return false;
+  }
+
+  const forceFallbackForFibers = new Set<Fiber>();
+
+  function shouldSuspendFiberAccordingToSet(fiber: Fiber): boolean {
+    return (
+      forceFallbackForFibers.has(fiber) ||
+      (fiber.alternate !== null && forceFallbackForFibers.has(fiber.alternate))
+    );
+  }
+
+  function overrideSuspense(id: number, forceFallback: boolean) {
+    if (
+      typeof setSuspenseHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideSuspense() to not get called for earlier React versions.',
+      );
+    }
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      return;
+    }
+    const nearestFiber = getNearestFiber(devtoolsInstance);
+    if (nearestFiber === null) {
+      return;
+    }
+    let fiber = nearestFiber;
+    while (fiber.tag !== SuspenseComponent) {
+      if (fiber.return === null) {
+        return;
+      }
+      fiber = fiber.return;
+    }
+
+    if (fiber.alternate !== null) {
+      // We only need one of the Fibers in the set.
+      forceFallbackForFibers.delete(fiber.alternate);
+    }
+    if (forceFallback) {
+      forceFallbackForFibers.add(fiber);
+      if (forceFallbackForFibers.size === 1) {
+        // First override is added. Switch React to slower path.
+        setSuspenseHandler(shouldSuspendFiberAccordingToSet);
+      }
+    } else {
+      forceFallbackForFibers.delete(fiber);
+      if (forceFallbackForFibers.size === 0) {
+        // Last override is gone. Switch React back to fast path.
+        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+      }
+    }
+    if (!forceFallback && typeof scheduleRetry === 'function') {
+      // If we're unsuspending and the renderer supports it, use a Retry instead of Sync
+      // to allow for things like View Transitions to proceed the way they would for real.
+      scheduleRetry(fiber);
+    } else {
+      scheduleUpdate(fiber);
+    }
+  }
+
+  /**
+   * Resets the all other roots of this renderer.
+   * @param suspendedSet List of IDs of SuspenseComponent Fibers
+   */
+  function overrideSuspenseMilestone(suspendedSet: Array<FiberInstance['id']>) {
+    if (
+      typeof setSuspenseHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideSuspenseMilestone() to not get called for earlier React versions.',
+      );
+    }
+
+    const unsuspendedSet: Set<Fiber> = new Set(forceFallbackForFibers);
+
+    let resuspended = false;
+    for (let i = 0; i < suspendedSet.length; ++i) {
+      const instance = idToDevToolsInstanceMap.get(suspendedSet[i]);
+      if (instance === undefined) {
+        console.warn(
+          `Could not suspend ID '${suspendedSet[i]}' since the instance can't be found.`,
+        );
+        continue;
+      }
+
+      if (instance.kind === FIBER_INSTANCE) {
+        const fiber = instance.data;
+        if (
+          forceFallbackForFibers.has(fiber) ||
+          (fiber.alternate !== null &&
+            forceFallbackForFibers.has(fiber.alternate))
+        ) {
+          // We're already forcing fallback for this fiber. Mark it as not unsuspended.
+          unsuspendedSet.delete(fiber);
+          if (fiber.alternate !== null) {
+            unsuspendedSet.delete(fiber.alternate);
+          }
+        } else {
+          forceFallbackForFibers.add(fiber);
+          // We could find a minimal set that covers all the Fibers in this suspended set.
+          // For now we rely on React's batching of updates.
+          scheduleUpdate(fiber);
+          resuspended = true;
+        }
+      } else {
+        console.warn(`Cannot not suspend ID '${suspendedSet[i]}'.`);
+      }
+    }
+
+    // Unsuspend any existing forced fallbacks if they're not in the new set.
+    unsuspendedSet.forEach(fiber => {
+      forceFallbackForFibers.delete(fiber);
+      if (!resuspended && typeof scheduleRetry === 'function') {
+        // If nothing new resuspended we don't need this to be sync. If we're only
+        // unsuspending then we can schedule this as a Retry if the renderer supports it.
+        // That way we can trigger animations.
+        scheduleRetry(fiber);
+      } else {
+        scheduleUpdate(fiber);
+      }
+    });
+
+    if (forceFallbackForFibers.size > 0) {
+      // First override is added. Switch React to slower path.
+      // TODO: Semantics for suspending a timeline are different. We want a suspended
+      // timeline to act like a first reveal which is relevant for SuspenseList.
+      // Resuspending would not affect rows in SuspenseList
+      setSuspenseHandler(shouldSuspendFiberAccordingToSet);
+    } else {
+      setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+    }
+  }
+
+  // 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; // This is the deepest unfiltered match of a Fiber.
+  let trackedPathMatchInstance: FiberInstance | VirtualInstance | null = null; // This is the deepest matched filtered Instance.
+  let trackedPathMatchDepth = -1;
+  let mightBeOnTrackedPath = false;
+
+  function setTrackedPath(path: Array<PathFrame> | null) {
+    if (path === null) {
+      trackedPathMatchFiber = null;
+      trackedPathMatchInstance = 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,
+    fiberInstance: null | FiberInstance | FilteredFiberInstance,
+  ): 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);
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      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;
+        if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
+          trackedPathMatchInstance = fiberInstance;
+        }
+        trackedPathMatchDepth++;
+        // Are we out of frames to match?
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        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;
+      }
+    }
+    if (trackedPathMatchFiber === null && fiberInstance === null) {
+      // We're now looking for a Virtual Instance. It might be inside filtered Fibers
+      // so we keep looking below.
+      return true;
+    }
+    // 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 updateVirtualTrackedPathStateBeforeMount(
+    virtualInstance: VirtualInstance,
+    parentInstance: null | DevToolsInstance,
+  ): boolean {
+    if (trackedPath === null || !mightBeOnTrackedPath) {
+      // Fast path: there's nothing to track so do nothing and ignore siblings.
+      return false;
+    }
+    // Check if we've matched our nearest unfiltered parent so far.
+    if (trackedPathMatchInstance === parentInstance) {
+      const actualFrame = getVirtualPathFrame(virtualInstance);
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      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 = null; // Don't bother looking in Fibers anymore. We're deeper now.
+        trackedPathMatchInstance = virtualInstance;
+        trackedPathMatchDepth++;
+        // Are we out of frames to match?
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        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;
+      }
+    }
+    if (trackedPathMatchFiber !== null) {
+      // We're still looking for a Fiber which might be underneath this instance.
+      return true;
+    }
+    // This Instance's parent is on the path, but this Instance 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: boolean,
+  ) {
+    // 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.slice(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 rootInstance = rootToFiberInstanceMap.get(fiber.stateNode);
+        if (rootInstance === undefined) {
+          throw new Error(
+            'Expected the root instance to exist when computing a path',
+          );
+        }
+        const pseudoKey = rootPseudoKeys.get(rootInstance.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: key === REACT_OPTIMISTIC_KEY ? null : key,
+      index,
+    };
+  }
+
+  function getVirtualPathFrame(virtualInstance: VirtualInstance): PathFrame {
+    return {
+      displayName: virtualInstance.data.name || '',
+      key:
+        virtualInstance.data.key == null ||
+        virtualInstance.data.key === REACT_OPTIMISTIC_KEY
+          ? null
+          : virtualInstance.data.key,
+      index: -1, // We use -1 to indicate that this is a virtual path frame.
+    };
+  }
+
+  // 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 {
+    const devtoolsInstance = idToDevToolsInstanceMap.get(id);
+    if (devtoolsInstance === undefined) {
+      return null;
+    }
+
+    const keyPath = [];
+
+    let inst: DevToolsInstance = devtoolsInstance;
+    while (inst.kind === VIRTUAL_INSTANCE) {
+      keyPath.push(getVirtualPathFrame(inst));
+      if (inst.parent === null) {
+        // This is a bug but non-essential. We should've found a root instance.
+        return null;
+      }
+      inst = inst.parent;
+    }
+
+    let fiber: null | Fiber = inst.data;
+    while (fiber !== null) {
+      // $FlowFixMe[incompatible-call] found when upgrading Flow
+      keyPath.push(getPathFrame(fiber));
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      fiber = fiber.return;
+    }
+    keyPath.reverse();
+    return keyPath;
+  }
+
+  function getBestMatchForTrackedPath(): PathMatch | null {
+    if (trackedPath === null) {
+      // Nothing to match.
+      return null;
+    }
+    if (trackedPathMatchInstance === null) {
+      // We didn't find anything.
+      return null;
+    }
+    return {
+      id: trackedPathMatchInstance.id,
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      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;
+  }
+
+  function hasElementWithId(id: number): boolean {
+    return idToDevToolsInstanceMap.has(id);
+  }
+
+  function getSourceForFiberInstance(
+    fiberInstance: FiberInstance,
+  ): ReactFunctionLocation | null {
+    // Favor the owner source if we have one.
+    const ownerSource = getSourceForInstance(fiberInstance);
+    if (ownerSource !== null) {
+      return ownerSource;
+    }
+
+    // Otherwise fallback to the throwing trick.
+    const dispatcherRef = getDispatcherRef(renderer);
+    const stackFrame =
+      dispatcherRef == null
+        ? null
+        : getSourceLocationByFiber(
+            ReactTypeOfWork,
+            fiberInstance.data,
+            dispatcherRef,
+          );
+    if (stackFrame === null) {
+      return null;
+    }
+    const source = extractLocationFromComponentStack(stackFrame);
+    fiberInstance.source = source;
+    return source;
+  }
+
+  function getSourceForInstance(
+    instance: DevToolsInstance,
+  ): ReactFunctionLocation | null {
+    let unresolvedSource = instance.source;
+    if (unresolvedSource === null) {
+      // We don't have any source yet. We can try again later in case an owned child mounts later.
+      // TODO: We won't have any information here if the child is filtered.
+      return null;
+    }
+
+    if (instance.kind === VIRTUAL_INSTANCE) {
+      // We might have found one on the virtual instance.
+      const debugLocation = instance.data.debugLocation;
+      if (debugLocation != null) {
+        unresolvedSource = debugLocation;
+      }
+    }
+
+    // If we have the debug stack (the creation stack of the JSX) for any owned child of this
+    // component, then at the bottom of that stack will be a stack frame that is somewhere within
+    // the component's function body. Typically it would be the callsite of the JSX unless there's
+    // any intermediate utility functions. This won't point to the top of the component function
+    // but it's at least somewhere within it.
+    if (isError(unresolvedSource)) {
+      return (instance.source = extractLocationFromOwnerStack(
+        (unresolvedSource: any),
+      ));
+    }
+    if (typeof unresolvedSource === 'string') {
+      const idx = unresolvedSource.lastIndexOf('\n');
+      const lastLine =
+        idx === -1 ? unresolvedSource : unresolvedSource.slice(idx + 1);
+      return (instance.source = extractLocationFromComponentStack(lastLine));
+    }
+
+    // $FlowFixMe: refined.
+    return unresolvedSource;
+  }
+
+  type InternalMcpFunctions = {
+    __internal_only_getComponentTree?: Function,
+  };
+
+  const internalMcpFunctions: InternalMcpFunctions = {};
+  if (__IS_INTERNAL_MCP_BUILD__) {
+    // eslint-disable-next-line no-inner-declarations
+    function __internal_only_getComponentTree(): string {
+      let treeString = '';
+
+      function buildTreeString(
+        instance: DevToolsInstance,
+        prefix: string = '',
+        isLastChild: boolean = true,
+      ): void {
+        if (!instance) return;
+
+        const name =
+          (instance.kind !== VIRTUAL_INSTANCE
+            ? getDisplayNameForFiber(instance.data)
+            : instance.data.name) || 'Unknown';
+
+        const id = instance.id !== undefined ? instance.id : 'unknown';
+
+        if (name !== 'createRoot()') {
+          treeString +=
+            prefix +
+            (isLastChild ? '└── ' : '├── ') +
+            name +
+            ' (id: ' +
+            id +
+            ')\n';
+        }
+
+        const childPrefix = prefix + (isLastChild ? '    ' : '│   ');
+
+        let childCount = 0;
+        let tempChild = instance.firstChild;
+        while (tempChild !== null) {
+          childCount++;
+          tempChild = tempChild.nextSibling;
+        }
+
+        let child = instance.firstChild;
+        let currentChildIndex = 0;
+
+        while (child !== null) {
+          currentChildIndex++;
+          const isLastSibling = currentChildIndex === childCount;
+          buildTreeString(child, childPrefix, isLastSibling);
+          child = child.nextSibling;
+        }
+      }
+
+      const rootInstances: Array<DevToolsInstance> = [];
+      idToDevToolsInstanceMap.forEach(instance => {
+        if (instance.parent === null || instance.parent.parent === null) {
+          rootInstances.push(instance);
+        }
+      });
+
+      if (rootInstances.length > 0) {
+        for (let i = 0; i < rootInstances.length; i++) {
+          const isLast = i === rootInstances.length - 1;
+          buildTreeString(rootInstances[i], '', isLast);
+          if (!isLast) {
+            treeString += '\n';
+          }
+        }
+      } else {
+        treeString = 'No component tree found.';
+      }
+
+      return treeString;
+    }
+
+    internalMcpFunctions.__internal_only_getComponentTree =
+      __internal_only_getComponentTree;
+  }
+
+  return {
+    cleanup,
+    clearErrorsAndWarnings,
+    clearErrorsForElementID,
+    clearWarningsForElementID,
+    getSerializedElementValueByPath,
+    deletePath,
+    findHostInstancesForElementID,
+    findLastKnownRectsForID,
+    flushInitialOperations,
+    getBestMatchForTrackedPath,
+    getDisplayNameForElementID,
+    getNearestMountedDOMNode,
+    getElementIDForHostInstance,
+    getSuspenseNodeIDForHostInstance,
+    getInstanceAndStyle,
+    getOwnersList,
+    getPathForElement,
+    getProfilingData,
+    handleCommitFiberRoot,
+    handleCommitFiberUnmount,
+    handlePostCommitFiberRoot,
+    hasElementWithId,
+    inspectElement,
+    logElementToConsole,
+    getComponentStack,
+    getElementAttributeByPath,
+    getElementSourceFunctionById,
+    onErrorOrWarning,
+    overrideError,
+    overrideSuspense,
+    overrideSuspenseMilestone,
+    overrideValueAtPath,
+    renamePath,
+    renderer,
+    setTraceUpdatesEnabled,
+    setTrackedPath,
+    startProfiling,
+    stopProfiling,
+    storeAsGlobal,
+    supportsTogglingSuspense,
+    updateComponentFilters,
+    getEnvironmentNames,
+    ...internalMcpFunctions,
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/flight/DevToolsComponentInfoStack.js b/packages/react-devtools-shared/src/backend/flight/DevToolsComponentInfoStack.js
new file mode 100644
index 00000000000..05864ed2816
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/flight/DevToolsComponentInfoStack.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DevTools fork of ReactComponentInfoStack.
+// This fork enables DevTools to use the same "native" component stack format,
+// while still maintaining support for multiple renderer versions
+// (which use different values for ReactTypeOfWork).
+
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+import {describeBuiltInComponentFrame} from '../shared/DevToolsComponentStackFrame';
+
+import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
+
+export function getOwnerStackByComponentInfoInDev(
+  componentInfo: ReactComponentInfo,
+): string {
+  try {
+    let info = '';
+
+    // The owner stack of the current component will be where it was created, i.e. inside its owner.
+    // There's no actual name of the currently executing component. Instead, that is available
+    // on the regular stack that's currently executing. However, if there is no owner at all, then
+    // there's no stack frame so we add the name of the root component to the stack to know which
+    // component is currently executing.
+    if (!componentInfo.owner && typeof componentInfo.name === 'string') {
+      return describeBuiltInComponentFrame(componentInfo.name);
+    }
+
+    let owner: void | null | ReactComponentInfo = componentInfo;
+
+    while (owner) {
+      const ownerStack: ?Error = owner.debugStack;
+      if (ownerStack != null) {
+        // Server Component
+        owner = owner.owner;
+        if (owner) {
+          // TODO: Should we stash this somewhere for caching purposes?
+          info += '\n' + formatOwnerStack(ownerStack);
+        }
+      } else {
+        break;
+      }
+    }
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/flight/renderer.js b/packages/react-devtools-shared/src/backend/flight/renderer.js
new file mode 100644
index 00000000000..e26525a0d60
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/flight/renderer.js
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactComponentInfo} from 'shared/ReactTypes';
+
+import type {DevToolsHook, ReactRenderer, RendererInterface} from '../types';
+
+import {getOwnerStackByComponentInfoInDev} from './DevToolsComponentInfoStack';
+
+import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
+
+import {componentInfoToComponentLogsMap} from '../shared/DevToolsServerComponentLogs';
+
+import {formatConsoleArgumentsToSingleString} from 'react-devtools-shared/src/backend/utils';
+
+function supportsConsoleTasks(componentInfo: ReactComponentInfo): boolean {
+  // If this ReactComponentInfo supports native console.createTask then we are already running
+  // inside a native async stack trace if it's active - meaning the DevTools is open.
+  // Ideally we'd detect if this task was created while the DevTools was open or not.
+  return !!componentInfo.debugTask;
+}
+
+export function attach(
+  hook: DevToolsHook,
+  rendererID: number,
+  renderer: ReactRenderer,
+  global: Object,
+): RendererInterface {
+  const {getCurrentComponentInfo} = renderer;
+
+  function getComponentStack(
+    topFrame: Error,
+  ): null | {enableOwnerStacks: boolean, componentStack: string} {
+    if (getCurrentComponentInfo === undefined) {
+      // Expected this to be part of the renderer. Ignore.
+      return null;
+    }
+    const current = getCurrentComponentInfo();
+    if (current === null) {
+      // Outside of our render scope.
+      return null;
+    }
+
+    if (supportsConsoleTasks(current)) {
+      // This will be handled natively by console.createTask. No need for
+      // DevTools to add it.
+      return null;
+    }
+
+    const enableOwnerStacks = current.debugStack != null;
+    let componentStack = '';
+    if (enableOwnerStacks) {
+      // Prefix the owner stack with the current stack. I.e. what called
+      // console.error. While this will also be part of the native stack,
+      // it is hidden and not presented alongside this argument so we print
+      // them all together.
+      const topStackFrames = formatOwnerStack(topFrame);
+      if (topStackFrames) {
+        componentStack += '\n' + topStackFrames;
+      }
+      componentStack += getOwnerStackByComponentInfoInDev(current);
+    }
+    return {enableOwnerStacks, componentStack};
+  }
+
+  // Called when an error or warning is logged during render, commit, or passive (including unmount functions).
+  function onErrorOrWarning(
+    type: 'error' | 'warn',
+    args: $ReadOnlyArray<any>,
+  ): void {
+    if (getCurrentComponentInfo === undefined) {
+      // Expected this to be part of the renderer. Ignore.
+      return;
+    }
+    const componentInfo = getCurrentComponentInfo();
+    if (componentInfo === null) {
+      // Outside of our render scope.
+      return;
+    }
+
+    if (
+      args.length > 3 &&
+      typeof args[0] === 'string' &&
+      args[0].startsWith('%c%s%c ') &&
+      typeof args[1] === 'string' &&
+      typeof args[2] === 'string' &&
+      typeof args[3] === 'string'
+    ) {
+      // This looks like the badge we prefixed to the log. Our UI doesn't support formatted logs.
+      // We remove the formatting. If the environment of the log is the same as the environment of
+      // the component (the common case) we remove the badge completely otherwise leave it plain
+      const format = args[0].slice(7);
+      const env = args[2].trim();
+      args = args.slice(4);
+      if (env !== componentInfo.env) {
+        args.unshift('[' + env + '] ' + format);
+      } else {
+        args.unshift(format);
+      }
+    }
+
+    // We can't really use this message as a unique key, since we can't distinguish
+    // different objects in this implementation. We have to delegate displaying of the objects
+    // to the environment, the browser console, for example, so this is why this should be kept
+    // as an array of arguments, instead of the plain string.
+    // [Warning: %o, {...}] and [Warning: %o, {...}] will be considered as the same message,
+    // even if objects are different
+    const message = formatConsoleArgumentsToSingleString(...args);
+
+    // Track the warning/error for later.
+    let componentLogsEntry = componentInfoToComponentLogsMap.get(componentInfo);
+    if (componentLogsEntry === undefined) {
+      componentLogsEntry = {
+        errors: new Map(),
+        errorsCount: 0 as number,
+        warnings: new Map(),
+        warningsCount: 0 as number,
+      };
+      componentInfoToComponentLogsMap.set(componentInfo, componentLogsEntry);
+    }
+
+    const messageMap =
+      type === 'error'
+        ? componentLogsEntry.errors
+        : componentLogsEntry.warnings;
+    const count = messageMap.get(message) || 0;
+    messageMap.set(message, count + 1);
+    if (type === 'error') {
+      componentLogsEntry.errorsCount++;
+    } else {
+      componentLogsEntry.warningsCount++;
+    }
+
+    // The changes will be flushed later when we commit this tree to Fiber.
+  }
+
+  const supportsTogglingSuspense = false;
+
+  return {
+    cleanup() {},
+    clearErrorsAndWarnings() {},
+    clearErrorsForElementID() {},
+    clearWarningsForElementID() {},
+    getSerializedElementValueByPath() {},
+    deletePath() {},
+    findHostInstancesForElementID() {
+      return null;
+    },
+    findLastKnownRectsForID() {
+      return null;
+    },
+    flushInitialOperations() {},
+    getBestMatchForTrackedPath() {
+      return null;
+    },
+    getComponentStack,
+    getDisplayNameForElementID() {
+      return null;
+    },
+    getNearestMountedDOMNode() {
+      return null;
+    },
+    getElementIDForHostInstance() {
+      return null;
+    },
+    getSuspenseNodeIDForHostInstance() {
+      return null;
+    },
+    getInstanceAndStyle() {
+      return {
+        instance: null,
+        style: null,
+      };
+    },
+    getOwnersList() {
+      return null;
+    },
+    getPathForElement() {
+      return null;
+    },
+    getProfilingData() {
+      throw new Error('getProfilingData not supported by this renderer');
+    },
+    handleCommitFiberRoot() {},
+    handleCommitFiberUnmount() {},
+    handlePostCommitFiberRoot() {},
+    hasElementWithId() {
+      return false;
+    },
+    inspectElement(
+      requestID: number,
+      id: number,
+      path: Array<string | number> | null,
+    ) {
+      return {
+        id,
+        responseID: requestID,
+        type: 'not-found',
+      };
+    },
+    logElementToConsole() {},
+    getElementAttributeByPath() {},
+    getElementSourceFunctionById() {},
+    onErrorOrWarning,
+    overrideError() {},
+    overrideSuspense() {},
+    overrideSuspenseMilestone() {},
+    overrideValueAtPath() {},
+    renamePath() {},
+    renderer,
+    setTraceUpdatesEnabled() {},
+    setTrackedPath() {},
+    startProfiling() {},
+    stopProfiling() {},
+    storeAsGlobal() {},
+    supportsTogglingSuspense,
+    updateComponentFilters() {},
+    getEnvironmentNames() {
+      return [];
+    },
+  };
+}
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 00000000000..ace5dbc8c03
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/index.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 type {DevToolsHook, RendererID, RendererInterface} from './types';
+
+export type InitBackend = typeof initBackend;
+
+export function initBackend(
+  hook: DevToolsHook,
+  agent: Agent,
+  global: Object,
+  isReloadAndProfileSupported: boolean,
+): () => void {
+  if (hook == null) {
+    // DevTools didn't get injected into this page (maybe b'c of the contentType).
+    return () => {};
+  }
+
+  function registerRendererInterface(
+    id: RendererID,
+    rendererInterface: RendererInterface,
+  ) {
+    agent.registerRendererInterface(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();
+  }
+
+  const subs = [
+    hook.sub(
+      'renderer-attached',
+      ({
+        id,
+        rendererInterface,
+      }: {
+        id: number,
+        rendererInterface: RendererInterface,
+      }) => {
+        registerRendererInterface(id, rendererInterface);
+      },
+    ),
+    hook.sub('unsupported-renderer-version', () => {
+      agent.onUnsupportedRenderer();
+    }),
+
+    hook.sub('fastRefreshScheduled', agent.onFastRefreshScheduled),
+    hook.sub('operations', agent.onHookOperations),
+    hook.sub('traceUpdates', agent.onTraceUpdates),
+    hook.sub('settingsInitialized', agent.onHookSettings),
+
+    // TODO Add additional subscriptions required for profiling mode
+  ];
+
+  agent.addListener('getIfHasUnsupportedRendererVersion', () => {
+    if (hook.hasUnsupportedRendererAttached) {
+      agent.onUnsupportedRenderer();
+    }
+  });
+
+  hook.rendererInterfaces.forEach((rendererInterface, id) => {
+    registerRendererInterface(id, rendererInterface);
+  });
+
+  hook.emit('react-devtools', agent);
+  hook.reactDevtoolsAgent = agent;
+
+  const onAgentShutdown = () => {
+    subs.forEach(fn => fn());
+    hook.rendererInterfaces.forEach(rendererInterface => {
+      rendererInterface.cleanup();
+    });
+    hook.reactDevtoolsAgent = null;
+  };
+
+  // Agent's event listeners are cleaned up by Agent in `shutdown` implementation.
+  agent.addListener('shutdown', onAgentShutdown);
+  agent.addListener('updateHookSettings', settings => {
+    hook.settings = settings;
+  });
+  agent.addListener('getHookSettings', () => {
+    if (hook.settings != null) {
+      agent.onHookSettings(hook.settings);
+    }
+  });
+
+  if (isReloadAndProfileSupported) {
+    agent.onReloadAndProfileSupportedByHost();
+  }
+
+  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 00000000000..ccd9cdac3e0
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -0,0 +1,1309 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/frontend/types';
+import {getUID, utfEncodeString, printOperationsArray} from '../../utils';
+import {
+  cleanForBridge,
+  copyWithDelete,
+  copyWithRename,
+  copyWithSet,
+  serializeToString,
+} from '../utils';
+import {
+  deletePathInObject,
+  getDisplayName,
+  getInObject,
+  renamePathInObject,
+  setInObject,
+} from 'react-devtools-shared/src/utils';
+import {
+  __DEBUG__,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REORDER_CHILDREN,
+  SUSPENSE_TREE_OPERATION_ADD,
+  SUSPENSE_TREE_OPERATION_REMOVE,
+  UNKNOWN_SUSPENDERS_NONE,
+} from '../../constants';
+import {decorateMany, forceUpdate, restoreMany} from './utils';
+
+import type {
+  DevToolsHook,
+  GetElementIDForHostInstance,
+  InspectedElementPayload,
+  InstanceAndStyle,
+  HostInstance,
+  PathFrame,
+  PathMatch,
+  RendererInterface,
+} from '../types';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/frontend/types';
+import type {InspectedElement, SerializedElement} 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 = String(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> {
+  const 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 (const 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 getElementIDForHostInstance: GetElementIDForHostInstance =
+    ((null: any): GetElementIDForHostInstance);
+  let findHostInstanceForInternalID: (id: number) => ?HostInstance;
+  let getNearestMountedDOMNode = (node: Element): null | Element => {
+    // Not implemented.
+    return null;
+  };
+
+  if (renderer.ComponentTree) {
+    getElementIDForHostInstance = node => {
+      const internalInstance =
+        renderer.ComponentTree.getClosestInstanceFromNode(node);
+      return internalInstanceToIDMap.get(internalInstance) || null;
+    };
+    findHostInstanceForInternalID = (id: number) => {
+      const internalInstance = idToInternalInstanceMap.get(id);
+      return renderer.ComponentTree.getNodeFromInstance(internalInstance);
+    };
+    getNearestMountedDOMNode = (node: Element): null | Element => {
+      const internalInstance =
+        renderer.ComponentTree.getClosestInstanceFromNode(node);
+      if (internalInstance != null) {
+        return renderer.ComponentTree.getNodeFromInstance(internalInstance);
+      }
+      return null;
+    };
+  } else if (renderer.Mount.getID && renderer.Mount.getNode) {
+    getElementIDForHostInstance = node => {
+      // Not implemented.
+      return null;
+    };
+    findHostInstanceForInternalID = (id: number) => {
+      // Not implemented.
+      return null;
+    };
+  }
+
+  const supportsTogglingSuspense = false;
+
+  function getDisplayNameForElementID(id: number): string | null {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    return internalInstance ? getData(internalInstance).displayName : null;
+  }
+
+  function getID(internalInstance: InternalInstance): number {
+    if (typeof internalInstance !== 'object' || internalInstance === null) {
+      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: Array<any>, b: Array<any>) {
+    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) {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          return fn.apply(this, args);
+        }
+        if (hostContainerInfo._topLevelWrapper === undefined) {
+          // SSR
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          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 {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          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) {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+
+        const prevChildren = getChildren(internalInstance);
+        try {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          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) {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+
+        const prevChildren = getChildren(internalInstance);
+        try {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          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) {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          return fn.apply(this, args);
+        }
+
+        const id = getID(internalInstance);
+        parentIDStack.push(id);
+        try {
+          // $FlowFixMe[object-this-reference] found when upgrading Flow
+          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); // StrictMode compliant?
+      pushOperation(0); // Profiling flag
+      pushOperation(0); // StrictMode supported?
+      pushOperation(hasOwnerMetadata ? 1 : 0);
+
+      pushOperation(SUSPENSE_TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(parentID);
+      pushOperation(getStringID(null)); // name
+      pushOperation(0); // isSuspended
+      // TODO: Measure rect of root
+      pushOperation(-1);
+    } else {
+      const type = getElementType(internalInstance);
+      const {displayName, key} = getData(internalInstance);
+
+      const ownerID =
+        internalInstance._currentElement != null &&
+        internalInstance._currentElement._owner != null
+          ? getID(internalInstance._currentElement._owner)
+          : 0;
+
+      const displayNameStringID = getStringID(displayName);
+      const keyStringID = getStringID(key);
+      pushOperation(TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(type);
+      pushOperation(parentID);
+      pushOperation(ownerID);
+      pushOperation(displayNameStringID);
+      pushOperation(keyStringID);
+      pushOperation(getStringID(null)); // name prop
+    }
+  }
+
+  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) {
+    const isRoot = parentIDStack.length === 0;
+    if (isRoot) {
+      pendingUnmountedRootID = id;
+    } else {
+      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 (const key in roots) {
+      const internalInstance = roots[key];
+      const id = getID(internalInstance);
+      crawlAndRecordInitialMounts(id, 0, id);
+      flushPendingEvents(id);
+    }
+  }
+
+  const pendingOperations: Array<number> = [];
+  const 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<number>(
+      // 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) +
+        // [SUSPENSE_TREE_OPERATION_REMOVE, 1, pendingUnmountedRootID]
+        (pendingUnmountedRootID === null ? 0 : 3) +
+        // 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++;
+
+        operations[i++] = SUSPENSE_TREE_OPERATION_REMOVE;
+        operations[i++] = 1;
+        operations[i++] = pendingUnmountedRootID;
+      }
+    }
+
+    // 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 createIsPathAllowed(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 isPathAllowed(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 getSerializedElementValueByPath(
+    id: number,
+    path: Array<string | number>,
+  ): ?string {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      const valueToCopy = getInObject(inspectedElement, path);
+
+      return serializeToString(valueToCopy);
+    }
+  }
+
+  function inspectElement(
+    requestID: number,
+    id: number,
+    path: Array<string | number> | null,
+    forceFullData: boolean,
+  ): InspectedElementPayload {
+    if (forceFullData || currentlyInspectedElementID !== id) {
+      currentlyInspectedElementID = id;
+      currentlyInspectedPaths = {};
+    }
+
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement === null) {
+      return {
+        id,
+        responseID: requestID,
+        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 dehydration (cleanForBridge).
+    updateSelectedElement(id);
+
+    inspectedElement.context = cleanForBridge(
+      inspectedElement.context,
+      createIsPathAllowed('context'),
+    );
+    inspectedElement.props = cleanForBridge(
+      inspectedElement.props,
+      createIsPathAllowed('props'),
+    );
+    inspectedElement.state = cleanForBridge(
+      inspectedElement.state,
+      createIsPathAllowed('state'),
+    );
+    inspectedElement.suspendedBy = cleanForBridge(
+      inspectedElement.suspendedBy,
+      createIsPathAllowed('suspendedBy'),
+    );
+
+    return {
+      id,
+      responseID: requestID,
+      type: 'full-data',
+      value: inspectedElement,
+    };
+  }
+
+  function inspectElementRaw(id: number): InspectedElement | null {
+    const internalInstance = idToInternalInstanceMap.get(id);
+
+    if (internalInstance == null) {
+      return null;
+    }
+
+    const rootID = internalInstanceToRootIDMap.get(internalInstance);
+    if (rootID === undefined) {
+      throw new Error('Expected to find root ID.');
+    }
+    const isRoot = rootID === id;
+    return isRoot
+      ? inspectRootsRaw(rootID)
+      : inspectInternalInstanceRaw(id, internalInstance);
+  }
+
+  function inspectInternalInstanceRaw(
+    id: number,
+    internalInstance: InternalInstance,
+  ): InspectedElement | null {
+    const {key} = getData(internalInstance);
+    const type = getElementType(internalInstance);
+
+    let context = null;
+    let owners = null;
+    let props = null;
+    let state = null;
+
+    const element = internalInstance._currentElement;
+    if (element !== null) {
+      props = element.props;
+
+      let owner = element._owner;
+      if (owner) {
+        owners = ([]: Array<SerializedElement>);
+        while (owner != null) {
+          owners.push({
+            displayName: getData(owner).displayName || 'Unknown',
+            id: getID(owner),
+            key: element.key,
+            env: null,
+            stack: null,
+            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;
+    }
+
+    // Not implemented
+    const errors: Array<[string, number]> = [];
+    const warnings: Array<[string, number]> = [];
+
+    return {
+      id,
+
+      // Does the current renderer support editable hooks and function props?
+      canEditHooks: false,
+      canEditFunctionProps: false,
+
+      // Does the current renderer support advanced editing interface?
+      canEditHooksAndDeletePaths: false,
+      canEditHooksAndRenamePaths: false,
+      canEditFunctionPropsDeletePaths: false,
+      canEditFunctionPropsRenamePaths: false,
+
+      // Toggle error boundary did not exist in legacy versions
+      canToggleError: false,
+      isErrored: false,
+
+      // Suspense did not exist in legacy versions
+      canToggleSuspense: false,
+      isSuspended: null,
+
+      source: null,
+
+      stack: null,
+
+      // Only legacy context exists in legacy versions.
+      hasLegacyContext: true,
+
+      type: type,
+
+      key: key != null ? key : null,
+
+      // Inspectable properties.
+      context,
+      hooks: null,
+      props,
+      state,
+      errors,
+      warnings,
+
+      // Not supported in legacy renderers.
+      suspendedBy: [],
+      suspendedByRange: null,
+      unknownSuspenders: UNKNOWN_SUSPENDERS_NONE,
+
+      // List of owners
+      owners,
+
+      env: null,
+
+      rootType: null,
+      rendererPackageName: null,
+      rendererVersion: null,
+
+      plugins: {
+        stylex: null,
+      },
+
+      nativeTag: null,
+    };
+  }
+
+  function inspectRootsRaw(arbitraryRootID: number): InspectedElement | null {
+    const roots =
+      renderer.Mount._instancesByReactRootID ||
+      renderer.Mount._instancesByContainerID;
+
+    const inspectedRoots: InspectedElement = {
+      // invariants
+      id: arbitraryRootID,
+      type: ElementTypeRoot,
+      // Properties we merge
+      isErrored: false,
+      errors: [],
+      warnings: [],
+      suspendedBy: [],
+      suspendedByRange: null,
+      // TODO: How to merge these?
+      unknownSuspenders: UNKNOWN_SUSPENDERS_NONE,
+      // Properties where merging doesn't make sense so we ignore them entirely in the UI
+      rootType: null,
+      plugins: {stylex: null},
+      nativeTag: null,
+      env: null,
+      source: null,
+      stack: null,
+      // TODO: We could make the Frontend accept an array to display
+      // a list of unique renderers contributing to this Screen.
+      rendererPackageName: null,
+      rendererVersion: null,
+      // These don't make sense for a Root. They're just bottom values.
+      key: null,
+      canEditFunctionProps: false,
+      canEditHooks: false,
+      canEditFunctionPropsDeletePaths: false,
+      canEditFunctionPropsRenamePaths: false,
+      canEditHooksAndDeletePaths: false,
+      canEditHooksAndRenamePaths: false,
+      canToggleError: false,
+      canToggleSuspense: false,
+      isSuspended: false,
+      hasLegacyContext: false,
+      context: null,
+      hooks: null,
+      props: null,
+      state: null,
+      owners: null,
+    };
+
+    let minSuspendedByRange = Infinity;
+    let maxSuspendedByRange = -Infinity;
+
+    for (const rootKey in roots) {
+      const internalInstance = roots[rootKey];
+      const id = getID(internalInstance);
+      const inspectedRoot = inspectInternalInstanceRaw(id, internalInstance);
+
+      if (inspectedRoot === null) {
+        return null;
+      }
+
+      if (inspectedRoot.isErrored) {
+        inspectedRoots.isErrored = true;
+      }
+      for (let i = 0; i < inspectedRoot.errors.length; i++) {
+        inspectedRoots.errors.push(inspectedRoot.errors[i]);
+      }
+      for (let i = 0; i < inspectedRoot.warnings.length; i++) {
+        inspectedRoots.warnings.push(inspectedRoot.warnings[i]);
+      }
+      for (let i = 0; i < inspectedRoot.suspendedBy.length; i++) {
+        inspectedRoots.suspendedBy.push(inspectedRoot.suspendedBy[i]);
+      }
+      const suspendedByRange = inspectedRoot.suspendedByRange;
+      if (suspendedByRange !== null) {
+        if (suspendedByRange[0] < minSuspendedByRange) {
+          minSuspendedByRange = suspendedByRange[0];
+        }
+        if (suspendedByRange[1] > maxSuspendedByRange) {
+          maxSuspendedByRange = suspendedByRange[1];
+        }
+      }
+    }
+
+    if (minSuspendedByRange !== Infinity || maxSuspendedByRange !== -Infinity) {
+      inspectedRoots.suspendedByRange = [
+        minSuspendedByRange,
+        maxSuspendedByRange,
+      ];
+    }
+
+    return inspectedRoots;
+  }
+
+  function logElementToConsole(id: number): void {
+    const result = inspectElementRaw(id);
+    if (result === null) {
+      console.warn(`Could not find element with id "${id}"`);
+      return;
+    }
+
+    const displayName = getDisplayNameForElementID(id);
+
+    const supportsGroup = typeof console.groupCollapsed === 'function';
+    if (supportsGroup) {
+      console.groupCollapsed(
+        `[Click to expand] %c<${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 hostInstance = findHostInstanceForInternalID(id);
+    if (hostInstance !== null) {
+      console.log('Node:', hostInstance);
+    }
+    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 getElementAttributeByPath(
+    id: number,
+    path: Array<string | number>,
+  ): mixed {
+    const inspectedElement = inspectElementRaw(id);
+    if (inspectedElement !== null) {
+      return getInObject(inspectedElement, path);
+    }
+    return undefined;
+  }
+
+  function getElementSourceFunctionById(id: number): null | Function {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance == null) {
+      console.warn(`Could not find instance with id "${id}"`);
+      return null;
+    }
+
+    const element = internalInstance._currentElement;
+    if (element == null) {
+      console.warn(`Could not find element with id "${id}"`);
+      return null;
+    }
+
+    return element.type;
+  }
+
+  function deletePath(
+    type: 'context' | 'hooks' | 'props' | 'state',
+    id: number,
+    hookID: ?number,
+    path: Array<string | number>,
+  ): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        switch (type) {
+          case 'context':
+            deletePathInObject(publicInstance.context, path);
+            forceUpdate(publicInstance);
+            break;
+          case 'hooks':
+            throw new Error('Hooks not supported by this renderer');
+          case 'props':
+            const element = internalInstance._currentElement;
+            internalInstance._currentElement = {
+              ...element,
+              props: copyWithDelete(element.props, path),
+            };
+            forceUpdate(publicInstance);
+            break;
+          case 'state':
+            deletePathInObject(publicInstance.state, path);
+            forceUpdate(publicInstance);
+            break;
+        }
+      }
+    }
+  }
+
+  function renamePath(
+    type: 'context' | 'hooks' | 'props' | 'state',
+    id: number,
+    hookID: ?number,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        switch (type) {
+          case 'context':
+            renamePathInObject(publicInstance.context, oldPath, newPath);
+            forceUpdate(publicInstance);
+            break;
+          case 'hooks':
+            throw new Error('Hooks not supported by this renderer');
+          case 'props':
+            const element = internalInstance._currentElement;
+            internalInstance._currentElement = {
+              ...element,
+              props: copyWithRename(element.props, oldPath, newPath),
+            };
+            forceUpdate(publicInstance);
+            break;
+          case 'state':
+            renamePathInObject(publicInstance.state, oldPath, newPath);
+            forceUpdate(publicInstance);
+            break;
+        }
+      }
+    }
+  }
+
+  function overrideValueAtPath(
+    type: 'context' | 'hooks' | 'props' | 'state',
+    id: number,
+    hookID: ?number,
+    path: Array<string | number>,
+    value: any,
+  ): void {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    if (internalInstance != null) {
+      const publicInstance = internalInstance._instance;
+      if (publicInstance != null) {
+        switch (type) {
+          case 'context':
+            setInObject(publicInstance.context, path, value);
+            forceUpdate(publicInstance);
+            break;
+          case 'hooks':
+            throw new Error('Hooks not supported by this renderer');
+          case 'props':
+            const element = internalInstance._currentElement;
+            internalInstance._currentElement = {
+              ...element,
+              props: copyWithSet(element.props, path, value),
+            };
+            forceUpdate(publicInstance);
+            break;
+          case 'state':
+            setInObject(publicInstance.state, path, value);
+            forceUpdate(publicInstance);
+            break;
+        }
+      }
+    }
+  }
+
+  // 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 handlePostCommitFiberRoot = () => {
+    throw new Error('handlePostCommitFiberRoot not supported by this renderer');
+  };
+  const overrideError = () => {
+    throw new Error('overrideError not supported by this renderer');
+  };
+  const overrideSuspense = () => {
+    throw new Error('overrideSuspense not supported by this renderer');
+  };
+  const overrideSuspenseMilestone = () => {
+    throw new Error('overrideSuspenseMilestone 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 getEnvironmentNames(): Array<string> {
+    // No RSC support.
+    return [];
+  }
+
+  function setTraceUpdatesEnabled(enabled: boolean) {
+    // Not implemented.
+  }
+
+  function setTrackedPath(path: Array<PathFrame> | null) {
+    // Not implemented.
+  }
+
+  function getOwnersList(id: number): Array<SerializedElement> | null {
+    // Not implemented.
+    return null;
+  }
+
+  function clearErrorsAndWarnings() {
+    // Not implemented
+  }
+
+  function clearErrorsForElementID(id: number) {
+    // Not implemented
+  }
+
+  function clearWarningsForElementID(id: number) {
+    // Not implemented
+  }
+
+  function hasElementWithId(id: number): boolean {
+    return idToInternalInstanceMap.has(id);
+  }
+
+  return {
+    clearErrorsAndWarnings,
+    clearErrorsForElementID,
+    clearWarningsForElementID,
+    cleanup,
+    getSerializedElementValueByPath,
+    deletePath,
+    flushInitialOperations,
+    getBestMatchForTrackedPath,
+    getDisplayNameForElementID,
+    getNearestMountedDOMNode,
+    getElementIDForHostInstance,
+    getSuspenseNodeIDForHostInstance(id: number): null {
+      return null;
+    },
+    getInstanceAndStyle,
+    findHostInstancesForElementID: (id: number) => {
+      const hostInstance = findHostInstanceForInternalID(id);
+      return hostInstance == null ? null : [hostInstance];
+    },
+    findLastKnownRectsForID() {
+      return null;
+    },
+    getOwnersList,
+    getPathForElement,
+    getProfilingData,
+    handleCommitFiberRoot,
+    handleCommitFiberUnmount,
+    handlePostCommitFiberRoot,
+    hasElementWithId,
+    inspectElement,
+    logElementToConsole,
+    overrideError,
+    overrideSuspense,
+    overrideSuspenseMilestone,
+    overrideValueAtPath,
+    renamePath,
+    getElementAttributeByPath,
+    getElementSourceFunctionById,
+    renderer,
+    setTraceUpdatesEnabled,
+    setTrackedPath,
+    startProfiling,
+    stopProfiling,
+    storeAsGlobal,
+    supportsTogglingSuspense,
+    updateComponentFilters,
+    getEnvironmentNames,
+  };
+}
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 00000000000..d828133e6bd
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/legacy/utils.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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];
+  // $FlowFixMe[missing-this-annot] webpack config needs to be updated to allow `this` type annotations
+  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: {[string]: $FlowFixMe} = {};
+  for (const name in fns) {
+    olds[name] = decorate(source, name, fns[name]);
+  }
+  return olds;
+}
+
+export function restoreMany(source: Object, olds: Object): void {
+  for (const name in olds) {
+    source[name] = olds[name];
+  }
+}
+
+// $FlowFixMe[missing-this-annot] webpack config needs to be updated to allow `this` type annotations
+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/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
new file mode 100644
index 00000000000..a3feb174880
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -0,0 +1,989 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Lane,
+  Lanes,
+  DevToolsProfilingHooks,
+  WorkTagMap,
+  CurrentDispatcherRef,
+} from 'react-devtools-shared/src/backend/types';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {Wakeable} from 'shared/ReactTypes';
+import type {
+  BatchUID,
+  InternalModuleSourceToRanges,
+  LaneToLabelMap,
+  ReactComponentMeasure,
+  ReactLane,
+  ReactMeasure,
+  ReactMeasureType,
+  ReactScheduleStateUpdateEvent,
+  SchedulingEvent,
+  SuspenseEvent,
+  TimelineData,
+} from 'react-devtools-timeline/src/types';
+
+import isArray from 'shared/isArray';
+import {
+  REACT_TOTAL_NUM_LANES,
+  SCHEDULING_PROFILER_VERSION,
+} from 'react-devtools-timeline/src/constants';
+import {describeFiber} from './fiber/DevToolsFiberComponentStack';
+
+// Add padding to the start/stop time of the profile.
+// This makes the UI nicer to use.
+const TIME_OFFSET = 10;
+
+let performanceTarget: Performance | null = null;
+
+// If performance exists and supports the subset of the User Timing API that we require.
+let supportsUserTiming =
+  typeof performance !== 'undefined' &&
+  // $FlowFixMe[method-unbinding]
+  typeof performance.mark === 'function' &&
+  // $FlowFixMe[method-unbinding]
+  typeof performance.clearMarks === 'function';
+
+let supportsUserTimingV3 = false;
+if (supportsUserTiming) {
+  const CHECK_V3_MARK = '__v3';
+  const markOptions: {
+    detail?: mixed,
+    startTime?: number,
+  } = {};
+  Object.defineProperty(markOptions, 'startTime', {
+    get: function () {
+      supportsUserTimingV3 = true;
+      return 0;
+    },
+    set: function () {},
+  });
+
+  try {
+    performance.mark(CHECK_V3_MARK, markOptions);
+  } catch (error) {
+    // Ignore
+  } finally {
+    performance.clearMarks(CHECK_V3_MARK);
+  }
+}
+
+if (supportsUserTimingV3) {
+  performanceTarget = performance;
+}
+
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
+const getCurrentTime =
+  // $FlowFixMe[method-unbinding]
+  typeof performance === 'object' && typeof performance.now === 'function'
+    ? () => performance.now()
+    : () => Date.now();
+
+// Mocking the Performance Object (and User Timing APIs) for testing is fragile.
+// This API allows tests to directly override the User Timing APIs.
+export function setPerformanceMock_ONLY_FOR_TESTING(
+  performanceMock: Performance | null,
+) {
+  performanceTarget = performanceMock;
+  supportsUserTiming = performanceMock !== null;
+  supportsUserTimingV3 = performanceMock !== null;
+}
+
+export type GetTimelineData = () => TimelineData | null;
+export type ToggleProfilingStatus = (
+  value: boolean,
+  recordTimeline?: boolean,
+) => void;
+
+type Response = {
+  getTimelineData: GetTimelineData,
+  profilingHooks: DevToolsProfilingHooks,
+  toggleProfilingStatus: ToggleProfilingStatus,
+};
+
+export function createProfilingHooks({
+  getDisplayNameForFiber,
+  getIsProfiling,
+  getLaneLabelMap,
+  workTagMap,
+  currentDispatcherRef,
+  reactVersion,
+}: {
+  getDisplayNameForFiber: (fiber: Fiber) => string | null,
+  getIsProfiling: () => boolean,
+  getLaneLabelMap?: () => Map<Lane, string> | null,
+  currentDispatcherRef?: CurrentDispatcherRef,
+  workTagMap: WorkTagMap,
+  reactVersion: string,
+}): Response {
+  let currentBatchUID: BatchUID = 0;
+  let currentReactComponentMeasure: ReactComponentMeasure | null = null;
+  let currentReactMeasuresStack: Array<ReactMeasure> = [];
+  let currentTimelineData: TimelineData | null = null;
+  let currentFiberStacks: Map<SchedulingEvent, Array<Fiber>> = new Map();
+  let isProfiling: boolean = false;
+  let nextRenderShouldStartNewBatch: boolean = false;
+
+  function getRelativeTime() {
+    const currentTime = getCurrentTime();
+
+    if (currentTimelineData) {
+      if (currentTimelineData.startTime === 0) {
+        currentTimelineData.startTime = currentTime - TIME_OFFSET;
+      }
+
+      return currentTime - currentTimelineData.startTime;
+    }
+
+    return 0;
+  }
+
+  function getInternalModuleRanges() {
+    /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+    if (
+      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges ===
+        'function'
+    ) {
+      // Ask the DevTools hook for module ranges that may have been reported by the current renderer(s).
+      // Don't do this eagerly like the laneToLabelMap,
+      // because some modules might not yet have registered their boundaries when the renderer is injected.
+      const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
+
+      // This check would not be required,
+      // except that it's possible for things to override __REACT_DEVTOOLS_GLOBAL_HOOK__.
+      if (isArray(ranges)) {
+        return ranges;
+      }
+    }
+
+    return null;
+  }
+
+  function getTimelineData(): TimelineData | null {
+    return currentTimelineData;
+  }
+
+  function laneToLanesArray(lanes: Lane) {
+    const lanesArray = [];
+
+    let lane = 1;
+    for (let index = 0; index < REACT_TOTAL_NUM_LANES; index++) {
+      if (lane & lanes) {
+        lanesArray.push(lane);
+      }
+      lane *= 2;
+    }
+
+    return lanesArray;
+  }
+
+  const laneToLabelMap: LaneToLabelMap | null =
+    typeof getLaneLabelMap === 'function' ? getLaneLabelMap() : null;
+
+  function markMetadata() {
+    markAndClear(`--react-version-${reactVersion}`);
+    markAndClear(`--profiler-version-${SCHEDULING_PROFILER_VERSION}`);
+
+    const ranges = getInternalModuleRanges();
+    if (ranges) {
+      for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i];
+        if (isArray(range) && range.length === 2) {
+          const [startStackFrame, stopStackFrame] = ranges[i];
+
+          markAndClear(`--react-internal-module-start-${startStackFrame}`);
+          markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+        }
+      }
+    }
+
+    if (laneToLabelMap != null) {
+      const labels = Array.from(laneToLabelMap.values()).join(',');
+      markAndClear(`--react-lane-labels-${labels}`);
+    }
+  }
+
+  function markAndClear(markName: string) {
+    // This method won't be called unless these functions are defined, so we can skip the extra typeof check.
+    ((performanceTarget: any): Performance).mark(markName);
+    ((performanceTarget: any): Performance).clearMarks(markName);
+  }
+
+  function recordReactMeasureStarted(
+    type: ReactMeasureType,
+    lanes: Lanes,
+  ): void {
+    // Decide what depth thi work should be rendered at, based on what's on the top of the stack.
+    // It's okay to render over top of "idle" work but everything else should be on its own row.
+    let depth = 0;
+    if (currentReactMeasuresStack.length > 0) {
+      const top =
+        currentReactMeasuresStack[currentReactMeasuresStack.length - 1];
+      depth = top.type === 'render-idle' ? top.depth : top.depth + 1;
+    }
+
+    const lanesArray = laneToLanesArray(lanes);
+
+    const reactMeasure: ReactMeasure = {
+      type,
+      batchUID: currentBatchUID,
+      depth,
+      lanes: lanesArray,
+      timestamp: getRelativeTime(),
+      duration: 0,
+    };
+
+    currentReactMeasuresStack.push(reactMeasure);
+
+    if (currentTimelineData) {
+      const {batchUIDToMeasuresMap, laneToReactMeasureMap} =
+        currentTimelineData;
+
+      let reactMeasures = batchUIDToMeasuresMap.get(currentBatchUID);
+      if (reactMeasures != null) {
+        reactMeasures.push(reactMeasure);
+      } else {
+        batchUIDToMeasuresMap.set(currentBatchUID, [reactMeasure]);
+      }
+
+      lanesArray.forEach(lane => {
+        reactMeasures = laneToReactMeasureMap.get(lane);
+        if (reactMeasures) {
+          reactMeasures.push(reactMeasure);
+        }
+      });
+    }
+  }
+
+  function recordReactMeasureCompleted(type: ReactMeasureType): void {
+    const currentTime = getRelativeTime();
+
+    if (currentReactMeasuresStack.length === 0) {
+      console.error(
+        'Unexpected type "%s" completed at %sms while currentReactMeasuresStack is empty.',
+        type,
+        currentTime,
+      );
+      // Ignore work "completion" user timing mark that doesn't complete anything
+      return;
+    }
+
+    const top = currentReactMeasuresStack.pop();
+    // $FlowFixMe[incompatible-type]
+    // $FlowFixMe[incompatible-use]
+    if (top.type !== type) {
+      console.error(
+        'Unexpected type "%s" completed at %sms before "%s" completed.',
+        type,
+        currentTime,
+        // $FlowFixMe[incompatible-use]
+        top.type,
+      );
+    }
+
+    // $FlowFixMe[cannot-write] This property should not be writable outside of this function.
+    // $FlowFixMe[incompatible-use]
+    top.duration = currentTime - top.timestamp;
+
+    if (currentTimelineData) {
+      currentTimelineData.duration = getRelativeTime() + TIME_OFFSET;
+    }
+  }
+
+  function markCommitStarted(lanes: Lanes): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureStarted('commit', lanes);
+
+    // TODO (timeline) Re-think this approach to "batching"; I don't think it works for Suspense or pre-rendering.
+    // This issue applies to the User Timing data also.
+    nextRenderShouldStartNewBatch = true;
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--commit-start-${lanes}`);
+
+      // Some metadata only needs to be logged once per session,
+      // but if profiling information is being recorded via the Performance tab,
+      // DevTools has no way of knowing when the recording starts.
+      // Because of that, we log thie type of data periodically (once per commit).
+      markMetadata();
+    }
+  }
+
+  function markCommitStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureCompleted('commit');
+    recordReactMeasureCompleted('render-idle');
+    if (supportsUserTimingV3) {
+      markAndClear('--commit-stop');
+    }
+  }
+
+  function markComponentRenderStarted(fiber: Fiber): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    currentReactComponentMeasure = {
+      componentName,
+      duration: 0,
+      timestamp: getRelativeTime(),
+      type: 'render',
+      warning: null,
+    };
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--component-render-start-${componentName}`);
+    }
+  }
+
+  function markComponentRenderStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (currentReactComponentMeasure) {
+      if (currentTimelineData) {
+        currentTimelineData.componentMeasures.push(
+          currentReactComponentMeasure,
+        );
+      }
+
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentReactComponentMeasure.duration =
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        getRelativeTime() - currentReactComponentMeasure.timestamp;
+      currentReactComponentMeasure = null;
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear('--component-render-stop');
+    }
+  }
+
+  function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    currentReactComponentMeasure = {
+      componentName,
+      duration: 0,
+      timestamp: getRelativeTime(),
+      type: 'layout-effect-mount',
+      warning: null,
+    };
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--component-layout-effect-mount-start-${componentName}`);
+    }
+  }
+
+  function markComponentLayoutEffectMountStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (currentReactComponentMeasure) {
+      if (currentTimelineData) {
+        currentTimelineData.componentMeasures.push(
+          currentReactComponentMeasure,
+        );
+      }
+
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentReactComponentMeasure.duration =
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        getRelativeTime() - currentReactComponentMeasure.timestamp;
+      currentReactComponentMeasure = null;
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-mount-stop');
+    }
+  }
+
+  function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    currentReactComponentMeasure = {
+      componentName,
+      duration: 0,
+      timestamp: getRelativeTime(),
+      type: 'layout-effect-unmount',
+      warning: null,
+    };
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
+    }
+  }
+
+  function markComponentLayoutEffectUnmountStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (currentReactComponentMeasure) {
+      if (currentTimelineData) {
+        currentTimelineData.componentMeasures.push(
+          currentReactComponentMeasure,
+        );
+      }
+
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentReactComponentMeasure.duration =
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        getRelativeTime() - currentReactComponentMeasure.timestamp;
+      currentReactComponentMeasure = null;
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-unmount-stop');
+    }
+  }
+
+  function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    currentReactComponentMeasure = {
+      componentName,
+      duration: 0,
+      timestamp: getRelativeTime(),
+      type: 'passive-effect-mount',
+      warning: null,
+    };
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--component-passive-effect-mount-start-${componentName}`);
+    }
+  }
+
+  function markComponentPassiveEffectMountStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (currentReactComponentMeasure) {
+      if (currentTimelineData) {
+        currentTimelineData.componentMeasures.push(
+          currentReactComponentMeasure,
+        );
+      }
+
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentReactComponentMeasure.duration =
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        getRelativeTime() - currentReactComponentMeasure.timestamp;
+      currentReactComponentMeasure = null;
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-mount-stop');
+    }
+  }
+
+  function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    currentReactComponentMeasure = {
+      componentName,
+      duration: 0,
+      timestamp: getRelativeTime(),
+      type: 'passive-effect-unmount',
+      warning: null,
+    };
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
+    }
+  }
+
+  function markComponentPassiveEffectUnmountStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (currentReactComponentMeasure) {
+      if (currentTimelineData) {
+        currentTimelineData.componentMeasures.push(
+          currentReactComponentMeasure,
+        );
+      }
+
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentReactComponentMeasure.duration =
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        getRelativeTime() - currentReactComponentMeasure.timestamp;
+      currentReactComponentMeasure = null;
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-unmount-stop');
+    }
+  }
+
+  function markComponentErrored(
+    fiber: Fiber,
+    thrownValue: mixed,
+    lanes: Lanes,
+  ): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+    const phase = fiber.alternate === null ? 'mount' : 'update';
+
+    let message = '';
+    if (
+      thrownValue !== null &&
+      typeof thrownValue === 'object' &&
+      typeof thrownValue.message === 'string'
+    ) {
+      message = thrownValue.message;
+    } else if (typeof thrownValue === 'string') {
+      message = thrownValue;
+    }
+
+    // TODO (timeline) Record and cache component stack
+    if (currentTimelineData) {
+      currentTimelineData.thrownErrors.push({
+        componentName,
+        message,
+        phase,
+        timestamp: getRelativeTime(),
+        type: 'thrown-error',
+      });
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--error-${componentName}-${phase}-${message}`);
+    }
+  }
+
+  const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+
+  // $FlowFixMe[incompatible-type]: Flow cannot handle polymorphic WeakMaps
+  const wakeableIDs: WeakMap<Wakeable, number> = new PossiblyWeakMap();
+  let wakeableID: number = 0;
+  function getWakeableID(wakeable: Wakeable): number {
+    if (!wakeableIDs.has(wakeable)) {
+      wakeableIDs.set(wakeable, wakeableID++);
+    }
+    return ((wakeableIDs.get(wakeable): any): number);
+  }
+
+  function markComponentSuspended(
+    fiber: Fiber,
+    wakeable: Wakeable,
+    lanes: Lanes,
+  ): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const eventType = wakeableIDs.has(wakeable) ? 'resuspend' : 'suspend';
+    const id = getWakeableID(wakeable);
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+    const phase = fiber.alternate === null ? 'mount' : 'update';
+
+    // Following the non-standard fn.displayName convention,
+    // frameworks like Relay may also annotate Promises with a displayName,
+    // describing what operation/data the thrown Promise is related to.
+    // When this is available we should pass it along to the Timeline.
+    const displayName = (wakeable: any).displayName || '';
+
+    let suspenseEvent: SuspenseEvent | null = null;
+    // TODO (timeline) Record and cache component stack
+    suspenseEvent = {
+      componentName,
+      depth: 0,
+      duration: 0,
+      id: `${id}`,
+      phase,
+      promiseName: displayName,
+      resolution: 'unresolved',
+      timestamp: getRelativeTime(),
+      type: 'suspense',
+      warning: null,
+    };
+
+    if (currentTimelineData) {
+      currentTimelineData.suspenseEvents.push(suspenseEvent);
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear(
+        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
+      );
+
+      wakeable.then(
+        () => {
+          if (suspenseEvent) {
+            suspenseEvent.duration =
+              getRelativeTime() - suspenseEvent.timestamp;
+            suspenseEvent.resolution = 'resolved';
+          }
+
+          if (supportsUserTimingV3) {
+            markAndClear(`--suspense-resolved-${id}-${componentName}`);
+          }
+        },
+        () => {
+          if (suspenseEvent) {
+            suspenseEvent.duration =
+              getRelativeTime() - suspenseEvent.timestamp;
+            suspenseEvent.resolution = 'rejected';
+          }
+
+          if (supportsUserTimingV3) {
+            markAndClear(`--suspense-rejected-${id}-${componentName}`);
+          }
+        },
+      );
+    }
+  }
+
+  function markLayoutEffectsStarted(lanes: Lanes): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureStarted('layout-effects', lanes);
+    if (supportsUserTimingV3) {
+      markAndClear(`--layout-effects-start-${lanes}`);
+    }
+  }
+
+  function markLayoutEffectsStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureCompleted('layout-effects');
+    if (supportsUserTimingV3) {
+      markAndClear('--layout-effects-stop');
+    }
+  }
+
+  function markPassiveEffectsStarted(lanes: Lanes): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureStarted('passive-effects', lanes);
+    if (supportsUserTimingV3) {
+      markAndClear(`--passive-effects-start-${lanes}`);
+    }
+  }
+
+  function markPassiveEffectsStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureCompleted('passive-effects');
+    if (supportsUserTimingV3) {
+      markAndClear('--passive-effects-stop');
+    }
+  }
+
+  function markRenderStarted(lanes: Lanes): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (nextRenderShouldStartNewBatch) {
+      nextRenderShouldStartNewBatch = false;
+      currentBatchUID++;
+    }
+
+    // If this is a new batch of work, wrap an "idle" measure around it.
+    // Log it before the "render" measure to preserve the stack ordering.
+    if (
+      currentReactMeasuresStack.length === 0 ||
+      currentReactMeasuresStack[currentReactMeasuresStack.length - 1].type !==
+        'render-idle'
+    ) {
+      recordReactMeasureStarted('render-idle', lanes);
+    }
+
+    recordReactMeasureStarted('render', lanes);
+    if (supportsUserTimingV3) {
+      markAndClear(`--render-start-${lanes}`);
+    }
+  }
+
+  function markRenderYielded(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureCompleted('render');
+    if (supportsUserTimingV3) {
+      markAndClear('--render-yield');
+    }
+  }
+
+  function markRenderStopped(): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    recordReactMeasureCompleted('render');
+    if (supportsUserTimingV3) {
+      markAndClear('--render-stop');
+    }
+  }
+
+  function markRenderScheduled(lane: Lane): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    if (currentTimelineData) {
+      currentTimelineData.schedulingEvents.push({
+        lanes: laneToLanesArray(lane),
+        timestamp: getRelativeTime(),
+        type: 'schedule-render',
+        warning: null,
+      });
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--schedule-render-${lane}`);
+    }
+  }
+
+  function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    if (currentTimelineData) {
+      currentTimelineData.schedulingEvents.push({
+        componentName,
+        lanes: laneToLanesArray(lane),
+        timestamp: getRelativeTime(),
+        type: 'schedule-force-update',
+        warning: null,
+      });
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
+    }
+  }
+
+  function getParentFibers(fiber: Fiber): Array<Fiber> {
+    const parents = [];
+    let parent: null | Fiber = fiber;
+    while (parent !== null) {
+      parents.push(parent);
+      parent = parent.return;
+    }
+    return parents;
+  }
+
+  function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
+    if (!isProfiling) {
+      return;
+    }
+
+    const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+
+    // TODO (timeline) Record and cache component stack
+    if (currentTimelineData) {
+      const event: ReactScheduleStateUpdateEvent = {
+        componentName,
+        // Store the parent fibers so we can post process
+        // them after we finish profiling
+        lanes: laneToLanesArray(lane),
+        timestamp: getRelativeTime(),
+        type: 'schedule-state-update',
+        warning: null,
+      };
+      currentFiberStacks.set(event, getParentFibers(fiber));
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentTimelineData.schedulingEvents.push(event);
+    }
+
+    if (supportsUserTimingV3) {
+      markAndClear(`--schedule-state-update-${lane}-${componentName}`);
+    }
+  }
+
+  function toggleProfilingStatus(
+    value: boolean,
+    recordTimeline: boolean = false,
+  ) {
+    if (isProfiling !== value) {
+      isProfiling = value;
+
+      if (isProfiling) {
+        const internalModuleSourceToRanges: InternalModuleSourceToRanges =
+          new Map();
+
+        if (supportsUserTimingV3) {
+          const ranges = getInternalModuleRanges();
+          if (ranges) {
+            for (let i = 0; i < ranges.length; i++) {
+              const range = ranges[i];
+              if (isArray(range) && range.length === 2) {
+                const [startStackFrame, stopStackFrame] = ranges[i];
+
+                markAndClear(
+                  `--react-internal-module-start-${startStackFrame}`,
+                );
+                markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+              }
+            }
+          }
+        }
+
+        const laneToReactMeasureMap = new Map<ReactLane, ReactMeasure[]>();
+        let lane = 1;
+        for (let index = 0; index < REACT_TOTAL_NUM_LANES; index++) {
+          laneToReactMeasureMap.set(lane, []);
+          lane *= 2;
+        }
+
+        currentBatchUID = 0;
+        currentReactComponentMeasure = null;
+        currentReactMeasuresStack = [];
+        currentFiberStacks = new Map();
+        if (recordTimeline) {
+          currentTimelineData = {
+            // Session wide metadata; only collected once.
+            internalModuleSourceToRanges,
+            laneToLabelMap: laneToLabelMap || new Map(),
+            reactVersion,
+
+            // Data logged by React during profiling session.
+            componentMeasures: [],
+            schedulingEvents: [],
+            suspenseEvents: [],
+            thrownErrors: [],
+
+            // Data inferred based on what React logs.
+            batchUIDToMeasuresMap: new Map(),
+            duration: 0,
+            laneToReactMeasureMap,
+            startTime: 0,
+
+            // Data only available in Chrome profiles.
+            flamechart: [],
+            nativeEvents: [],
+            networkMeasures: [],
+            otherUserTimingMarks: [],
+            snapshots: [],
+            snapshotHeight: 0,
+          };
+        }
+        nextRenderShouldStartNewBatch = true;
+      } else {
+        // This is __EXPENSIVE__.
+        // We could end up with hundreds of state updated, and for each one of them
+        // would try to create a component stack with possibly hundreds of Fibers.
+        // Creating a cache of component stacks won't help, generating a single stack is already expensive enough.
+        // We should find a way to lazily generate component stacks on demand, when user inspects a specific event.
+        // If we succeed with moving React DevTools Timeline Profiler to Performance panel, then Timeline Profiler would probably be removed.
+        // Now that owner stacks are adopted, revisit this again and cache component stacks per Fiber,
+        // but only return them when needed, sending hundreds of component stacks is beyond the Bridge's bandwidth.
+
+        // Postprocess Profile data
+        if (currentTimelineData !== null) {
+          currentTimelineData.schedulingEvents.forEach(event => {
+            if (event.type === 'schedule-state-update') {
+              // TODO(luna): We can optimize this by creating a map of
+              // fiber to component stack instead of generating the stack
+              // for every fiber every time
+              const fiberStack = currentFiberStacks.get(event);
+              if (fiberStack && currentDispatcherRef != null) {
+                event.componentStack = fiberStack.reduce((trace, fiber) => {
+                  return (
+                    trace +
+                    describeFiber(workTagMap, fiber, currentDispatcherRef)
+                  );
+                }, '');
+              }
+            }
+          });
+        }
+
+        // Clear the current fiber stacks so we don't hold onto the fibers
+        // in memory after profiling finishes
+        currentFiberStacks.clear();
+      }
+    }
+  }
+
+  return {
+    getTimelineData,
+    profilingHooks: {
+      markCommitStarted,
+      markCommitStopped,
+      markComponentRenderStarted,
+      markComponentRenderStopped,
+      markComponentPassiveEffectMountStarted,
+      markComponentPassiveEffectMountStopped,
+      markComponentPassiveEffectUnmountStarted,
+      markComponentPassiveEffectUnmountStopped,
+      markComponentLayoutEffectMountStarted,
+      markComponentLayoutEffectMountStopped,
+      markComponentLayoutEffectUnmountStarted,
+      markComponentLayoutEffectUnmountStopped,
+      markComponentErrored,
+      markComponentSuspended,
+      markLayoutEffectsStarted,
+      markLayoutEffectsStopped,
+      markPassiveEffectsStarted,
+      markPassiveEffectsStopped,
+      markRenderStarted,
+      markRenderYielded,
+      markRenderStopped,
+      markRenderScheduled,
+      markForceUpdateScheduled,
+      markStateUpdateScheduled,
+    },
+    toggleProfilingStatus,
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
new file mode 100644
index 00000000000..b29ed9af730
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DevTools fork of ReactComponentStackFrame.
+// This fork enables DevTools to use the same "native" component stack format,
+// while still maintaining support for multiple renderer versions
+// (which use different values for ReactTypeOfWork).
+
+import type {CurrentDispatcherRef} from '../types';
+
+// The shared console patching code is DEV-only.
+// We can't use it since DevTools only ships production builds.
+import {disableLogs, reenableLogs} from './DevToolsConsolePatching';
+
+let prefix;
+export function describeBuiltInComponentFrame(name: string): string {
+  if (prefix === undefined) {
+    // Extract the VM specific prefix used by each line.
+    try {
+      throw Error();
+    } catch (x) {
+      const match = x.stack.trim().match(/\n( *(at )?)/);
+      prefix = (match && match[1]) || '';
+    }
+  }
+  let suffix = '';
+  if (__IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__) {
+    suffix = ' (<anonymous>)';
+  } else if (__IS_FIREFOX__) {
+    suffix = '@unknown:0:0';
+  }
+  // We use the prefix to ensure our stacks line up with native stack frames.
+  // We use a suffix to ensure it gets parsed natively.
+  return '\n' + prefix + name + suffix;
+}
+
+export function describeDebugInfoFrame(name: string, env: ?string): string {
+  return describeBuiltInComponentFrame(name + (env ? ' [' + env + ']' : ''));
+}
+
+let reentry = false;
+let componentFrameCache;
+if (__DEV__) {
+  const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+  componentFrameCache = new PossiblyWeakMap<$FlowFixMe, string>();
+}
+
+export function describeNativeComponentFrame(
+  fn: Function,
+  construct: boolean,
+  currentDispatcherRef: CurrentDispatcherRef,
+): string {
+  // If something asked for a stack inside a fake render, it should get ignored.
+  if (!fn || reentry) {
+    return '';
+  }
+
+  if (__DEV__) {
+    const frame = componentFrameCache.get(fn);
+    if (frame !== undefined) {
+      return frame;
+    }
+  }
+
+  const previousPrepareStackTrace = Error.prepareStackTrace;
+  // $FlowFixMe[incompatible-type] It does accept undefined.
+  Error.prepareStackTrace = undefined;
+
+  reentry = true;
+
+  // Override the dispatcher so effects scheduled by this shallow render are thrown away.
+  //
+  // Note that unlike the code this was forked from (in ReactComponentStackFrame)
+  // DevTools should override the dispatcher even when DevTools is compiled in production mode,
+  // because the app itself may be in development mode and log errors/warnings.
+  const previousDispatcher = currentDispatcherRef.H;
+  currentDispatcherRef.H = null;
+  disableLogs();
+  try {
+    // NOTE: keep in sync with the implementation in ReactComponentStackFrame
+
+    /**
+     * Finding a common stack frame between sample and control errors can be
+     * tricky given the different types and levels of stack trace truncation from
+     * different JS VMs. So instead we'll attempt to control what that common
+     * frame should be through this object method:
+     * Having both the sample and control errors be in the function under the
+     * `DescribeNativeComponentFrameRoot` property, + setting the `name` and
+     * `displayName` properties of the function ensures that a stack
+     * frame exists that has the method name `DescribeNativeComponentFrameRoot` in
+     * it for both control and sample stacks.
+     */
+    const RunInRootFrame = {
+      DetermineComponentFrameRoot(): [?string, ?string] {
+        let control;
+        try {
+          // This should throw.
+          if (construct) {
+            // Something should be setting the props in the constructor.
+            const Fake = function () {
+              throw Error();
+            };
+            // $FlowFixMe[prop-missing]
+            Object.defineProperty(Fake.prototype, 'props', {
+              set: function () {
+                // We use a throwing setter instead of frozen or non-writable props
+                // because that won't throw in a non-strict mode function.
+                throw Error();
+              },
+            });
+            if (typeof Reflect === 'object' && Reflect.construct) {
+              // We construct a different control for this case to include any extra
+              // frames added by the construct call.
+              try {
+                Reflect.construct(Fake, []);
+              } catch (x) {
+                control = x;
+              }
+              Reflect.construct(fn, [], Fake);
+            } else {
+              try {
+                Fake.call();
+              } catch (x) {
+                control = x;
+              }
+              // $FlowFixMe[prop-missing] found when upgrading Flow
+              fn.call(Fake.prototype);
+            }
+          } else {
+            try {
+              throw Error();
+            } catch (x) {
+              control = x;
+            }
+            // TODO(luna): This will currently only throw if the function component
+            // tries to access React/ReactDOM/props. We should probably make this throw
+            // in simple components too
+            const maybePromise = fn();
+
+            // If the function component returns a promise, it's likely an async
+            // component, which we don't yet support. Attach a noop catch handler to
+            // silence the error.
+            // TODO: Implement component stacks for async client components?
+            if (maybePromise && typeof maybePromise.catch === 'function') {
+              maybePromise.catch(() => {});
+            }
+          }
+        } catch (sample) {
+          // This is inlined manually because closure doesn't do it for us.
+          if (sample && control && typeof sample.stack === 'string') {
+            return [sample.stack, control.stack];
+          }
+        }
+        return [null, null];
+      },
+    };
+    // $FlowFixMe[prop-missing]
+    RunInRootFrame.DetermineComponentFrameRoot.displayName =
+      'DetermineComponentFrameRoot';
+    const namePropDescriptor = Object.getOwnPropertyDescriptor(
+      RunInRootFrame.DetermineComponentFrameRoot,
+      'name',
+    );
+    // Before ES6, the `name` property was not configurable.
+    if (namePropDescriptor && namePropDescriptor.configurable) {
+      // V8 utilizes a function's `name` property when generating a stack trace.
+      Object.defineProperty(
+        RunInRootFrame.DetermineComponentFrameRoot,
+        // Configurable properties can be updated even if its writable descriptor
+        // is set to `false`.
+        // $FlowFixMe[cannot-write]
+        'name',
+        {value: 'DetermineComponentFrameRoot'},
+      );
+    }
+
+    const [sampleStack, controlStack] =
+      RunInRootFrame.DetermineComponentFrameRoot();
+    if (sampleStack && controlStack) {
+      // This extracts the first frame from the sample that isn't also in the control.
+      // Skipping one frame that we assume is the frame that calls the two.
+      const sampleLines = sampleStack.split('\n');
+      const controlLines = controlStack.split('\n');
+      let s = 0;
+      let c = 0;
+      while (
+        s < sampleLines.length &&
+        !sampleLines[s].includes('DetermineComponentFrameRoot')
+      ) {
+        s++;
+      }
+      while (
+        c < controlLines.length &&
+        !controlLines[c].includes('DetermineComponentFrameRoot')
+      ) {
+        c++;
+      }
+      // We couldn't find our intentionally injected common root frame, attempt
+      // to find another common root frame by search from the bottom of the
+      // control stack...
+      if (s === sampleLines.length || c === controlLines.length) {
+        s = sampleLines.length - 1;
+        c = controlLines.length - 1;
+        while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+          // We expect at least one stack frame to be shared.
+          // Typically this will be the root most one. However, stack frames may be
+          // cut off due to maximum stack limits. In this case, one maybe cut off
+          // earlier than the other. We assume that the sample is longer or the same
+          // and there for cut off earlier. So we should find the root most frame in
+          // the sample somewhere in the control.
+          c--;
+        }
+      }
+      for (; s >= 1 && c >= 0; s--, c--) {
+        // Next we find the first one that isn't the same which should be the
+        // frame that called our sample function and the control.
+        if (sampleLines[s] !== controlLines[c]) {
+          // In V8, the first line is describing the message but other VMs don't.
+          // If we're about to return the first line, and the control is also on the same
+          // line, that's a pretty good indicator that our sample threw at same line as
+          // the control. I.e. before we entered the sample frame. So we ignore this result.
+          // This can happen if you passed a class to function component, or non-function.
+          if (s !== 1 || c !== 1) {
+            do {
+              s--;
+              c--;
+              // We may still have similar intermediate frames from the construct call.
+              // The next one that isn't the same should be our match though.
+              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+                let frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+
+                // If our component frame is labeled "<anonymous>"
+                // but we have a user-provided "displayName"
+                // splice it in to make the stack more readable.
+                if (fn.displayName && frame.includes('<anonymous>')) {
+                  frame = frame.replace('<anonymous>', fn.displayName);
+                }
+
+                if (__DEV__) {
+                  if (typeof fn === 'function') {
+                    componentFrameCache.set(fn, frame);
+                  }
+                }
+                // Return the line we found.
+                return frame;
+              }
+            } while (s >= 1 && c >= 0);
+          }
+          break;
+        }
+      }
+    }
+  } finally {
+    reentry = false;
+
+    Error.prepareStackTrace = previousPrepareStackTrace;
+
+    currentDispatcherRef.H = previousDispatcher;
+    reenableLogs();
+  }
+  // Fallback to just using the name if we couldn't make it throw.
+  const name = fn ? fn.displayName || fn.name : '';
+  const syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+  if (__DEV__) {
+    if (typeof fn === 'function') {
+      componentFrameCache.set(fn, syntheticFrame);
+    }
+  }
+  return syntheticFrame;
+}
+
+export function describeClassComponentFrame(
+  ctor: Function,
+  currentDispatcherRef: CurrentDispatcherRef,
+): string {
+  return describeNativeComponentFrame(ctor, true, currentDispatcherRef);
+}
+
+export function describeFunctionComponentFrame(
+  fn: Function,
+  currentDispatcherRef: CurrentDispatcherRef,
+): string {
+  return describeNativeComponentFrame(fn, false, currentDispatcherRef);
+}
diff --git a/packages/react-devtools-shared/src/backend/shared/DevToolsConsolePatching.js b/packages/react-devtools-shared/src/backend/shared/DevToolsConsolePatching.js
new file mode 100644
index 00000000000..71ede689250
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/shared/DevToolsConsolePatching.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DevTools fork of shared/ConsolePatchingDev.
+// The shared console patching code is DEV-only.
+// We can't use it since DevTools only ships production builds.
+
+// Helpers to patch console.logs to avoid logging during side-effect free
+// replaying on render function. This currently only patches the object
+// lazily which won't cover if the log function was extracted eagerly.
+// We could also eagerly patch the method.
+
+let disabledDepth = 0;
+let prevLog;
+let prevInfo;
+let prevWarn;
+let prevError;
+let prevGroup;
+let prevGroupCollapsed;
+let prevGroupEnd;
+
+function disabledLog() {}
+disabledLog.__reactDisabledLog = true;
+
+export function disableLogs(): void {
+  if (disabledDepth === 0) {
+    prevLog = console.log;
+    prevInfo = console.info;
+    prevWarn = console.warn;
+    prevError = console.error;
+    prevGroup = console.group;
+    prevGroupCollapsed = console.groupCollapsed;
+    prevGroupEnd = console.groupEnd;
+    // https://github.com/facebook/react/issues/19099
+    const props = {
+      configurable: true,
+      enumerable: true,
+      value: disabledLog,
+      writable: true,
+    };
+    // $FlowFixMe[cannot-write] Flow thinks console is immutable.
+    Object.defineProperties(console, {
+      info: props,
+      log: props,
+      warn: props,
+      error: props,
+      group: props,
+      groupCollapsed: props,
+      groupEnd: props,
+    });
+    /* eslint-enable react-internal/no-production-logging */
+  }
+  disabledDepth++;
+}
+
+export function reenableLogs(): void {
+  disabledDepth--;
+  if (disabledDepth === 0) {
+    const props = {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+    };
+    // $FlowFixMe[cannot-write] Flow thinks console is immutable.
+    Object.defineProperties(console, {
+      log: {...props, value: prevLog},
+      info: {...props, value: prevInfo},
+      warn: {...props, value: prevWarn},
+      error: {...props, value: prevError},
+      group: {...props, value: prevGroup},
+      groupCollapsed: {...props, value: prevGroupCollapsed},
+      groupEnd: {...props, value: prevGroupEnd},
+    });
+    /* eslint-enable react-internal/no-production-logging */
+  }
+  if (disabledDepth < 0) {
+    console.error(
+      'disabledDepth fell below zero. ' +
+        'This is a bug in React. Please file an issue.',
+    );
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js b/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js
new file mode 100644
index 00000000000..36102dcf963
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DevTools fork of shared/ReactOwnerStackFrames.
+
+export function formatOwnerStack(error: Error): string {
+  const prevPrepareStackTrace = Error.prepareStackTrace;
+  // $FlowFixMe[incompatible-type] It does accept undefined.
+  Error.prepareStackTrace = undefined;
+  let stack = error.stack;
+  Error.prepareStackTrace = prevPrepareStackTrace;
+
+  if (stack.startsWith('Error: react-stack-top-frame\n')) {
+    // V8's default formatting prefixes with the error message which we
+    // don't want/need.
+    stack = stack.slice(29);
+  }
+  let idx = stack.indexOf('\n');
+  if (idx !== -1) {
+    // Pop the JSX frame.
+    stack = stack.slice(idx + 1);
+  }
+  idx = stack.indexOf('react_stack_bottom_frame');
+  if (idx === -1) {
+    idx = stack.indexOf('react-stack-bottom-frame');
+  }
+  if (idx !== -1) {
+    idx = stack.lastIndexOf('\n', idx);
+  }
+  if (idx !== -1) {
+    // Cut off everything after the bottom frame since it'll be internals.
+    stack = stack.slice(0, idx);
+  } else {
+    // We didn't find any internal callsite out to user space.
+    // This means that this was called outside an owner or the owner is fully internal.
+    // To keep things light we exclude the entire trace in this case.
+    return '';
+  }
+  return stack;
+}
diff --git a/packages/react-devtools-shared/src/backend/shared/DevToolsServerComponentLogs.js b/packages/react-devtools-shared/src/backend/shared/DevToolsServerComponentLogs.js
new file mode 100644
index 00000000000..0eee05b5364
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/shared/DevToolsServerComponentLogs.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 keeps track of Server Component logs which may come from.
+// This is in a shared module because Server Component logs don't come from a specific renderer
+// but can become associated with a Virtual Instance of any renderer.
+
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+type ComponentLogs = {
+  errors: Map<string, number>,
+  errorsCount: number,
+  warnings: Map<string, number>,
+  warningsCount: number,
+};
+
+// This keeps it around as long as the ComponentInfo is alive which
+// lets the Fiber get reparented/remounted and still observe the previous errors/warnings.
+// Unless we explicitly clear the logs from a Fiber.
+export const componentInfoToComponentLogsMap: WeakMap<
+  ReactComponentInfo,
+  ComponentLogs,
+> = new WeakMap();
diff --git a/packages/react-devtools-shared/src/backend/shared/ReactSymbols.js b/packages/react-devtools-shared/src/backend/shared/ReactSymbols.js
new file mode 100644
index 00000000000..483671b9003
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/shared/ReactSymbols.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 list should be kept updated to reflect additions to 'shared/ReactSymbols'.
+// DevTools can't import symbols from 'shared/ReactSymbols' directly for two reasons:
+// 1. DevTools requires symbols which may have been deleted in more recent versions (e.g. concurrent mode)
+// 2. DevTools must support both Symbol and numeric forms of each symbol;
+//    Since e.g. standalone DevTools runs in a separate process, it can't rely on its own ES capabilities.
+
+export const CONCURRENT_MODE_NUMBER = 0xeacf;
+export const CONCURRENT_MODE_SYMBOL_STRING = 'Symbol(react.concurrent_mode)';
+
+export const CONTEXT_NUMBER = 0xeace;
+export const CONTEXT_SYMBOL_STRING = 'Symbol(react.context)';
+
+export const SERVER_CONTEXT_SYMBOL_STRING = 'Symbol(react.server_context)';
+
+export const DEPRECATED_ASYNC_MODE_SYMBOL_STRING = 'Symbol(react.async_mode)';
+
+export const ELEMENT_SYMBOL_STRING = 'Symbol(react.transitional.element)';
+export const LEGACY_ELEMENT_NUMBER = 0xeac7;
+export const LEGACY_ELEMENT_SYMBOL_STRING = 'Symbol(react.element)';
+
+export const DEBUG_TRACING_MODE_NUMBER = 0xeae1;
+export const DEBUG_TRACING_MODE_SYMBOL_STRING =
+  'Symbol(react.debug_trace_mode)';
+
+export const FORWARD_REF_NUMBER = 0xead0;
+export const FORWARD_REF_SYMBOL_STRING = 'Symbol(react.forward_ref)';
+
+export const FRAGMENT_NUMBER = 0xeacb;
+export const FRAGMENT_SYMBOL_STRING = 'Symbol(react.fragment)';
+
+export const LAZY_NUMBER = 0xead4;
+export const LAZY_SYMBOL_STRING = 'Symbol(react.lazy)';
+
+export const MEMO_NUMBER = 0xead3;
+export const MEMO_SYMBOL_STRING = 'Symbol(react.memo)';
+
+export const PORTAL_NUMBER = 0xeaca;
+export const PORTAL_SYMBOL_STRING = 'Symbol(react.portal)';
+
+export const PROFILER_NUMBER = 0xead2;
+export const PROFILER_SYMBOL_STRING = 'Symbol(react.profiler)';
+
+export const PROVIDER_NUMBER = 0xeacd;
+export const PROVIDER_SYMBOL_STRING = 'Symbol(react.provider)';
+
+export const CONSUMER_SYMBOL_STRING = 'Symbol(react.consumer)';
+
+export const SCOPE_NUMBER = 0xead7;
+export const SCOPE_SYMBOL_STRING = 'Symbol(react.scope)';
+
+export const STRICT_MODE_NUMBER = 0xeacc;
+export const STRICT_MODE_SYMBOL_STRING = 'Symbol(react.strict_mode)';
+
+export const SUSPENSE_NUMBER = 0xead1;
+export const SUSPENSE_SYMBOL_STRING = 'Symbol(react.suspense)';
+
+export const SUSPENSE_LIST_NUMBER = 0xead8;
+export const SUSPENSE_LIST_SYMBOL_STRING = 'Symbol(react.suspense_list)';
+
+export const SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED_SYMBOL_STRING =
+  'Symbol(react.server_context.defaultValue)';
+
+export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
+  'react.memo_cache_sentinel',
+);
+
+import type {ReactOptimisticKey} from 'shared/ReactTypes';
+
+export const REACT_OPTIMISTIC_KEY: ReactOptimisticKey = (Symbol.for(
+  'react.optimistic_key',
+): any);
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 00000000000..00c66355b2d
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -0,0 +1,601 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * WARNING:
+ * This file contains types that are conceptually related to React internals and
+ * DevTools backends, but can be passed to frontend via the bridge.
+ * Be mindful of backwards compatibility when making changes.
+ */
+
+import type {
+  ReactContext,
+  Wakeable,
+  ReactComponentInfo,
+} from 'shared/ReactTypes';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  ComponentFilter,
+  ElementType,
+  Plugins,
+} from 'react-devtools-shared/src/frontend/types';
+import type {
+  ResolveNativeStyle,
+  SetupNativeStyleEditor,
+} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import type {InitBackend} from 'react-devtools-shared/src/backend';
+import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {ReactFunctionLocation, ReactStackTrace} from 'shared/ReactTypes';
+import type Agent from './agent';
+import type {UnknownSuspendersReason} from '../constants';
+
+type BundleType =
+  | 0 // PROD
+  | 1; // DEV
+
+export type WorkTag = number;
+export type WorkFlags = number;
+export type ExpirationTime = number;
+
+export type WorkTagMap = {
+  CacheComponent: WorkTag,
+  ClassComponent: WorkTag,
+  ContextConsumer: WorkTag,
+  ContextProvider: WorkTag,
+  CoroutineComponent: WorkTag,
+  CoroutineHandlerPhase: WorkTag,
+  DehydratedSuspenseComponent: WorkTag,
+  ForwardRef: WorkTag,
+  Fragment: WorkTag,
+  FunctionComponent: WorkTag,
+  HostComponent: WorkTag,
+  HostPortal: WorkTag,
+  HostRoot: WorkTag,
+  HostHoistable: WorkTag,
+  HostSingleton: WorkTag,
+  HostText: WorkTag,
+  IncompleteClassComponent: WorkTag,
+  IncompleteFunctionComponent: WorkTag,
+  IndeterminateComponent: WorkTag,
+  LazyComponent: WorkTag,
+  LegacyHiddenComponent: WorkTag,
+  MemoComponent: WorkTag,
+  Mode: WorkTag,
+  OffscreenComponent: WorkTag,
+  Profiler: WorkTag,
+  ScopeComponent: WorkTag,
+  SimpleMemoComponent: WorkTag,
+  SuspenseComponent: WorkTag,
+  SuspenseListComponent: WorkTag,
+  TracingMarkerComponent: WorkTag,
+  YieldComponent: WorkTag,
+  Throw: WorkTag,
+  ViewTransitionComponent: WorkTag,
+  ActivityComponent: WorkTag,
+};
+
+export type HostInstance = Object;
+export type RendererID = number;
+
+type Dispatcher = any;
+export type LegacyDispatcherRef = {current: null | Dispatcher};
+type SharedInternalsSubset = {
+  H: null | Dispatcher,
+  ...
+};
+export type CurrentDispatcherRef = SharedInternalsSubset;
+
+export type GetDisplayNameForElementID = (id: number) => string | null;
+
+export type GetElementIDForHostInstance = (
+  component: HostInstance,
+) => number | null;
+export type FindHostInstancesForElementID = (
+  id: number,
+) => null | $ReadOnlyArray<HostInstance>;
+
+type Rect = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  ...
+};
+export type FindLastKnownRectsForID = (
+  id: number,
+) => null | $ReadOnlyArray<Rect>;
+export type ReactProviderType<T> = {
+  $$typeof: symbol | number,
+  _context: ReactContext<T>,
+  ...
+};
+
+export type Lane = number;
+export type Lanes = number;
+
+export type ReactRenderer = {
+  version: string,
+  rendererPackageName: string,
+  bundleType: BundleType,
+  // 16.0+ - To be removed in future versions.
+  findFiberByHostInstance?: (hostInstance: HostInstance) => Fiber | null,
+  // 16.9+
+  overrideHookState?: ?(
+    fiber: Object,
+    id: number,
+    path: Array<string | number>,
+    value: any,
+  ) => void,
+  // 17+
+  overrideHookStateDeletePath?: ?(
+    fiber: Object,
+    id: number,
+    path: Array<string | number>,
+  ) => void,
+  // 17+
+  overrideHookStateRenamePath?: ?(
+    fiber: Object,
+    id: number,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ) => void,
+  // 16.7+
+  overrideProps?: ?(
+    fiber: Object,
+    path: Array<string | number>,
+    value: any,
+  ) => void,
+  // 17+
+  overridePropsDeletePath?: ?(
+    fiber: Object,
+    path: Array<string | number>,
+  ) => void,
+  // 17+
+  overridePropsRenamePath?: ?(
+    fiber: Object,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ) => void,
+  // 16.9+
+  scheduleUpdate?: ?(fiber: Object) => void,
+  // 19.2+
+  scheduleRetry?: ?(fiber: Object) => void,
+  setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,
+  // Only injected by React v16.8+ in order to support hooks inspection.
+  currentDispatcherRef?: LegacyDispatcherRef | CurrentDispatcherRef,
+  // Only injected by React v16.9+ in DEV mode.
+  // Enables DevTools to append owners-only component stack to error messages.
+  getCurrentFiber?: (() => Fiber | null) | null,
+  // Only injected by React Flight Clients in DEV mode.
+  // Enables DevTools to append owners-only component stack to error messages from Server Components.
+  getCurrentComponentInfo?: () => ReactComponentInfo | null,
+  // 17.0.2+
+  reconcilerVersion?: string,
+  // Uniquely identifies React DOM v15.
+  ComponentTree?: any,
+  // Present for React DOM v12 (possibly earlier) through v15.
+  Mount?: any,
+  // Only injected by React v17.0.3+ in DEV mode
+  setErrorHandler?: ?(shouldError: (fiber: Object) => ?boolean) => void,
+  // Intentionally opaque type to avoid coupling DevTools to different Fast Refresh versions.
+  scheduleRefresh?: Function,
+  // 18.0+
+  injectProfilingHooks?: (profilingHooks: DevToolsProfilingHooks) => void,
+  getLaneLabelMap?: () => Map<Lane, string> | null,
+  ...
+};
+
+export type ChangeDescription = {
+  context: Array<string> | boolean | null,
+  didHooksChange: boolean,
+  isFirstMount: boolean,
+  props: Array<string> | null,
+  state: Array<string> | null,
+  hooks?: Array<number> | null,
+};
+
+export type CommitDataBackend = {
+  // Tuple of fiber ID and change description
+  changeDescriptions: Array<[number, ChangeDescription]> | null,
+  duration: number,
+  // Only available in certain (newer) React builds,
+  effectDuration: number | null,
+  // Tuple of fiber ID and actual duration
+  fiberActualDurations: Array<[number, number]>,
+  // Tuple of fiber ID and computed "self" duration
+  fiberSelfDurations: Array<[number, number]>,
+  // Only available in certain (newer) React builds,
+  passiveEffectDuration: number | null,
+  priorityLevel: string | null,
+  timestamp: number,
+  updaters: Array<SerializedElement> | null,
+};
+
+export type ProfilingDataForRootBackend = {
+  commitData: Array<CommitDataBackend>,
+  displayName: string,
+  // Tuple of Fiber ID and base duration
+  initialTreeBaseDurations: Array<[number, number]>,
+  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,
+  timelineData: TimelineDataExport | null,
+};
+
+export type PathFrame = {
+  key: string | null,
+  index: number,
+  displayName: string | null,
+};
+
+export type PathMatch = {
+  id: number,
+  isFullMatch: boolean,
+};
+
+// Serialized version of ReactIOInfo
+export type SerializedIOInfo = {
+  name: string,
+  description: string,
+  start: number,
+  end: number,
+  byteSize: null | number,
+  value: null | Promise<mixed>,
+  env: null | string,
+  owner: null | SerializedElement,
+  stack: null | ReactStackTrace,
+};
+
+// Serialized version of ReactAsyncInfo
+export type SerializedAsyncInfo = {
+  awaited: SerializedIOInfo,
+  env: null | string,
+  owner: null | SerializedElement,
+  stack: null | ReactStackTrace,
+};
+
+export type SerializedElement = {
+  displayName: string | null,
+  id: number,
+  key: number | string | null,
+  env: null | string,
+  stack: null | ReactStackTrace,
+  type: ElementType,
+};
+
+export type OwnersList = {
+  id: number,
+  owners: Array<SerializedElement> | null,
+};
+
+export type InspectedElement = {
+  id: number,
+
+  // Does the current renderer support editable hooks and function props?
+  canEditHooks: boolean,
+  canEditFunctionProps: boolean,
+
+  // Does the current renderer support advanced editing interface?
+  canEditHooksAndDeletePaths: boolean,
+  canEditHooksAndRenamePaths: boolean,
+  canEditFunctionPropsDeletePaths: boolean,
+  canEditFunctionPropsRenamePaths: boolean,
+
+  // Is this Error, and can its value be overridden now?
+  canToggleError: boolean,
+  isErrored: boolean,
+
+  // Is this Suspense, and can its value be overridden now?
+  canToggleSuspense: boolean,
+  // If this Element is suspended. Currently only set on Suspense boundaries.
+  isSuspended: boolean | null,
+
+  // Does the component have legacy context attached to it.
+  hasLegacyContext: boolean,
+
+  // Inspectable properties.
+  context: Object | null, // DehydratedData or {[string]: mixed}
+  hooks: Object | null, // DehydratedData or {[string]: mixed}
+  props: Object | null, // DehydratedData or {[string]: mixed}
+  state: Object | null, // DehydratedData or {[string]: mixed}
+  key: number | string | null,
+  errors: Array<[string, number]>,
+  warnings: Array<[string, number]>,
+
+  // Things that suspended this Instances
+  suspendedBy: Object, // DehydratedData or Array<SerializedAsyncInfo>
+  suspendedByRange: null | [number, number],
+  unknownSuspenders: UnknownSuspendersReason,
+
+  // List of owners
+  owners: Array<SerializedElement> | null,
+
+  // Environment name that this component executed in or null for the client
+  env: string | null,
+
+  source: ReactFunctionLocation | null,
+
+  // The location of the JSX creation.
+  stack: ReactStackTrace | null,
+
+  type: ElementType,
+
+  // Meta information about the root this element belongs to.
+  rootType: string | null,
+
+  // Meta information about the renderer that created this element.
+  rendererPackageName: string | null,
+  rendererVersion: string | null,
+
+  // UI plugins/visualizations for the inspected element.
+  plugins: Plugins,
+
+  // React Native only.
+  nativeTag: number | null,
+};
+
+export const InspectElementErrorType = 'error';
+export const InspectElementFullDataType = 'full-data';
+export const InspectElementNoChangeType = 'no-change';
+export const InspectElementNotFoundType = 'not-found';
+
+export type InspectElementError = {
+  id: number,
+  responseID: number,
+  type: 'error',
+  errorType: 'user' | 'unknown-hook' | 'uncaught',
+  message: string,
+  stack?: string,
+};
+
+export type InspectElementFullData = {
+  id: number,
+  responseID: number,
+  type: 'full-data',
+  value: InspectedElement,
+};
+
+export type InspectElementHydratedPath = {
+  id: number,
+  responseID: number,
+  type: 'hydrated-path',
+  path: Array<string | number>,
+  value: any,
+};
+
+export type InspectElementNoChange = {
+  id: number,
+  responseID: number,
+  type: 'no-change',
+};
+
+export type InspectElementNotFound = {
+  id: number,
+  responseID: number,
+  type: 'not-found',
+};
+
+export type InspectedElementPayload =
+  | InspectElementError
+  | InspectElementFullData
+  | InspectElementHydratedPath
+  | InspectElementNoChange
+  | InspectElementNotFound;
+
+export type InstanceAndStyle = {
+  instance: Object | null,
+  style: Object | null,
+};
+
+type Type = 'props' | 'hooks' | 'state' | 'context';
+
+export type OnErrorOrWarning = (
+  type: 'error' | 'warn',
+  args: Array<any>,
+) => void;
+export type GetComponentStack = (
+  topFrame: Error,
+) => null | {enableOwnerStacks: boolean, componentStack: string};
+
+export type RendererInterface = {
+  cleanup: () => void,
+  clearErrorsAndWarnings: () => void,
+  clearErrorsForElementID: (id: number) => void,
+  clearWarningsForElementID: (id: number) => void,
+  deletePath: (
+    type: Type,
+    id: number,
+    hookID: ?number,
+    path: Array<string | number>,
+  ) => void,
+  findHostInstancesForElementID: FindHostInstancesForElementID,
+  findLastKnownRectsForID: FindLastKnownRectsForID,
+  flushInitialOperations: () => void,
+  getBestMatchForTrackedPath: () => PathMatch | null,
+  getComponentStack?: GetComponentStack,
+  getNearestMountedDOMNode: (component: Element) => Element | null,
+  getElementIDForHostInstance: GetElementIDForHostInstance,
+  getSuspenseNodeIDForHostInstance: GetElementIDForHostInstance,
+  getDisplayNameForElementID: GetDisplayNameForElementID,
+  getInstanceAndStyle(id: number): InstanceAndStyle,
+  getProfilingData(): ProfilingDataBackend,
+  getOwnersList: (id: number) => Array<SerializedElement> | null,
+  getPathForElement: (id: number) => Array<PathFrame> | null,
+  getSerializedElementValueByPath: (
+    id: number,
+    path: Array<string | number>,
+  ) => ?string,
+  handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
+  handleCommitFiberUnmount: (fiber: Object) => void,
+  handlePostCommitFiberRoot: (fiber: Object) => void,
+  hasElementWithId: (id: number) => boolean,
+  inspectElement: (
+    requestID: number,
+    id: number,
+    inspectedPaths: Object,
+    forceFullData: boolean,
+  ) => InspectedElementPayload,
+  logElementToConsole: (id: number) => void,
+  onErrorOrWarning?: OnErrorOrWarning,
+  overrideError: (id: number, forceError: boolean) => void,
+  overrideSuspense: (id: number, forceFallback: boolean) => void,
+  overrideSuspenseMilestone: (suspendedSet: Array<number>) => void,
+  overrideValueAtPath: (
+    type: Type,
+    id: number,
+    hook: ?number,
+    path: Array<string | number>,
+    value: any,
+  ) => void,
+  getElementAttributeByPath: (
+    id: number,
+    path: Array<string | number>,
+  ) => mixed,
+  getElementSourceFunctionById: (id: number) => null | Function,
+  renamePath: (
+    type: Type,
+    id: number,
+    hookID: ?number,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ) => void,
+  renderer: ReactRenderer | null,
+  setTraceUpdatesEnabled: (enabled: boolean) => void,
+  setTrackedPath: (path: Array<PathFrame> | null) => void,
+  startProfiling: (
+    recordChangeDescriptions: boolean,
+    recordTimeline: boolean,
+  ) => void,
+  stopProfiling: () => void,
+  storeAsGlobal: (
+    id: number,
+    path: Array<string | number>,
+    count: number,
+  ) => void,
+  supportsTogglingSuspense: boolean,
+  updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
+  getEnvironmentNames: () => Array<string>,
+
+  // Timeline profiler interface
+
+  ...
+};
+
+export type Handler = (data: any) => void;
+
+// Renderers use these APIs to report profiling data to DevTools at runtime.
+// They get passed from the DevTools backend to the reconciler during injection.
+export type DevToolsProfilingHooks = {
+  // Scheduling methods:
+  markRenderScheduled: (lane: Lane) => void,
+  markStateUpdateScheduled: (fiber: Fiber, lane: Lane) => void,
+  markForceUpdateScheduled: (fiber: Fiber, lane: Lane) => void,
+
+  // Work loop level methods:
+  markRenderStarted: (lanes: Lanes) => void,
+  markRenderYielded: () => void,
+  markRenderStopped: () => void,
+  markCommitStarted: (lanes: Lanes) => void,
+  markCommitStopped: () => void,
+  markLayoutEffectsStarted: (lanes: Lanes) => void,
+  markLayoutEffectsStopped: () => void,
+  markPassiveEffectsStarted: (lanes: Lanes) => void,
+  markPassiveEffectsStopped: () => void,
+
+  // Fiber level methods:
+  markComponentRenderStarted: (fiber: Fiber) => void,
+  markComponentRenderStopped: () => void,
+  markComponentErrored: (
+    fiber: Fiber,
+    thrownValue: mixed,
+    lanes: Lanes,
+  ) => void,
+  markComponentSuspended: (
+    fiber: Fiber,
+    wakeable: Wakeable,
+    lanes: Lanes,
+  ) => void,
+  markComponentLayoutEffectMountStarted: (fiber: Fiber) => void,
+  markComponentLayoutEffectMountStopped: () => void,
+  markComponentLayoutEffectUnmountStarted: (fiber: Fiber) => void,
+  markComponentLayoutEffectUnmountStopped: () => void,
+  markComponentPassiveEffectMountStarted: (fiber: Fiber) => void,
+  markComponentPassiveEffectMountStopped: () => void,
+  markComponentPassiveEffectUnmountStarted: (fiber: Fiber) => void,
+  markComponentPassiveEffectUnmountStopped: () => void,
+};
+
+export type DevToolsBackend = {
+  Agent: Class<Agent>,
+  Bridge: Class<BackendBridge>,
+  initBackend: InitBackend,
+  setupNativeStyleEditor?: SetupNativeStyleEditor,
+};
+
+export type ProfilingSettings = {
+  recordChangeDescriptions: boolean,
+  recordTimeline: boolean,
+};
+
+export type DevToolsHook = {
+  listeners: {[key: string]: Array<Handler>, ...},
+  rendererInterfaces: Map<RendererID, RendererInterface>,
+  renderers: Map<RendererID, ReactRenderer>,
+  hasUnsupportedRendererAttached: boolean,
+  backends: Map<string, DevToolsBackend>,
+
+  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,
+
+  // Timeline internal module filtering
+  getInternalModuleRanges: () => Array<[string, string]>,
+  registerInternalModuleStart: (moduleStartError: Error) => void,
+  registerInternalModuleStop: (moduleStopError: Error) => void,
+
+  // Testing
+  dangerous_setTargetConsoleForTesting?: (fakeConsole: Object) => void,
+
+  settings?: $ReadOnly<DevToolsHookSettings>,
+  ...
+};
+
+export type DevToolsHookSettings = {
+  appendComponentStack: boolean,
+  breakOnConsoleErrors: boolean,
+  showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+  disableSecondConsoleLogDimmingInStrictMode: boolean,
+};
diff --git a/packages/react-devtools-shared/src/backend/utils/formatConsoleArguments.js b/packages/react-devtools-shared/src/backend/utils/formatConsoleArguments.js
new file mode 100644
index 00000000000..eaf4170970e
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/utils/formatConsoleArguments.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Do not add / import anything to this file.
+// This function could be used from multiple places, including hook.
+
+// Skips CSS and object arguments, inlines other in the first argument as a template string
+export default function formatConsoleArguments(
+  maybeMessage: any,
+  ...inputArgs: $ReadOnlyArray<any>
+): $ReadOnlyArray<any> {
+  if (inputArgs.length === 0 || typeof maybeMessage !== 'string') {
+    return [maybeMessage, ...inputArgs];
+  }
+
+  const args = inputArgs.slice();
+
+  let template = '';
+  let argumentsPointer = 0;
+  for (let i = 0; i < maybeMessage.length; ++i) {
+    const currentChar = maybeMessage[i];
+    if (currentChar !== '%') {
+      template += currentChar;
+      continue;
+    }
+
+    const nextChar = maybeMessage[i + 1];
+    ++i;
+
+    // Only keep CSS and objects, inline other arguments
+    switch (nextChar) {
+      case 'c':
+      case 'O':
+      case 'o': {
+        ++argumentsPointer;
+        template += `%${nextChar}`;
+
+        break;
+      }
+      case 'd':
+      case 'i': {
+        const [arg] = args.splice(argumentsPointer, 1);
+        template += parseInt(arg, 10).toString();
+
+        break;
+      }
+      case 'f': {
+        const [arg] = args.splice(argumentsPointer, 1);
+        template += parseFloat(arg).toString();
+
+        break;
+      }
+      case 's': {
+        const [arg] = args.splice(argumentsPointer, 1);
+        template += String(arg);
+
+        break;
+      }
+
+      default:
+        template += `%${nextChar}`;
+    }
+  }
+
+  return [template, ...args];
+}
diff --git a/packages/react-devtools-shared/src/backend/utils/formatWithStyles.js b/packages/react-devtools-shared/src/backend/utils/formatWithStyles.js
new file mode 100644
index 00000000000..b258141e353
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/utils/formatWithStyles.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Do not add / import anything to this file.
+// This function could be used from multiple places, including hook.
+
+// Formats an array of args with a style for console methods, using
+// the following algorithm:
+//     1. The first param is a string that contains %c
+//          - Bail out and return the args without modifying the styles.
+//            We don't want to affect styles that the developer deliberately set.
+//     2. The first param is a string that doesn't contain %c but contains
+//        string formatting
+//          - [`%c${args[0]}`, style, ...args.slice(1)]
+//          - Note: we assume that the string formatting that the developer uses
+//            is correct.
+//     3. The first param is a string that doesn't contain string formatting
+//        OR is not a string
+//          - Create a formatting string where:
+//                 boolean, string, symbol -> %s
+//                 number -> %f OR %i depending on if it's an int or float
+//                 default -> %o
+export default function formatWithStyles(
+  inputArgs: $ReadOnlyArray<any>,
+  style?: string,
+): $ReadOnlyArray<any> {
+  if (
+    inputArgs === undefined ||
+    inputArgs === null ||
+    inputArgs.length === 0 ||
+    // Matches any of %c but not %%c
+    (typeof inputArgs[0] === 'string' && inputArgs[0].match(/([^%]|^)(%c)/g)) ||
+    style === undefined
+  ) {
+    return inputArgs;
+  }
+
+  // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
+  const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
+  if (typeof inputArgs[0] === 'string' && inputArgs[0].match(REGEXP)) {
+    return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
+  } else {
+    const firstArg = inputArgs.reduce((formatStr, elem, i) => {
+      if (i > 0) {
+        formatStr += ' ';
+      }
+      switch (typeof elem) {
+        case 'string':
+        case 'boolean':
+        case 'symbol':
+          return (formatStr += '%s');
+        case 'number':
+          const formatting = Number.isInteger(elem) ? '%i' : '%f';
+          return (formatStr += formatting);
+        default:
+          return (formatStr += '%o');
+      }
+    }, '%c');
+    return [firstArg, style, ...inputArgs];
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/utils/index.js b/packages/react-devtools-shared/src/backend/utils/index.js
new file mode 100644
index 00000000000..fcb8d448a0c
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/utils/index.js
@@ -0,0 +1,265 @@
+/**
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {compareVersions} from 'compare-versions';
+import {dehydrate} from 'react-devtools-shared/src/hydration';
+import isArray from 'shared/isArray';
+
+import type {DehydratedData} from 'react-devtools-shared/src/frontend/types';
+
+export {default as formatWithStyles} from './formatWithStyles';
+export {default as formatConsoleArguments} from './formatConsoleArguments';
+
+// TODO: update this to the first React version that has a corresponding DevTools backend
+const FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER = '999.9.9';
+export function hasAssignedBackend(version?: string): boolean {
+  if (version == null || version === '') {
+    return false;
+  }
+  return gte(version, FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER);
+}
+
+export function cleanForBridge(
+  data: Object | null,
+  isPathAllowed: (path: Array<string | number>) => boolean,
+  path: Array<string | number> = [],
+): DehydratedData | null {
+  if (data !== null) {
+    const cleanedPaths: Array<Array<string | number>> = [];
+    const unserializablePaths: Array<Array<string | number>> = [];
+    const cleanedData = dehydrate(
+      data,
+      cleanedPaths,
+      unserializablePaths,
+      path,
+      isPathAllowed,
+    );
+
+    return {
+      data: cleanedData,
+      cleaned: cleanedPaths,
+      unserializable: unserializablePaths,
+    };
+  } else {
+    return null;
+  }
+}
+
+export function copyWithDelete(
+  obj: Object | Array<any>,
+  path: Array<string | number>,
+  index: number = 0,
+): Object | Array<any> {
+  const key = path[index];
+  const updated = isArray(obj) ? obj.slice() : {...obj};
+  if (index + 1 === path.length) {
+    if (isArray(updated)) {
+      updated.splice(((key: any): number), 1);
+    } else {
+      delete updated[key];
+    }
+  } else {
+    // $FlowFixMe[incompatible-use] number or string is fine here
+    updated[key] = copyWithDelete(obj[key], path, index + 1);
+  }
+  return updated;
+}
+
+// This function expects paths to be the same except for the final value.
+// e.g. ['path', 'to', 'foo'] and ['path', 'to', 'bar']
+export function copyWithRename(
+  obj: Object | Array<any>,
+  oldPath: Array<string | number>,
+  newPath: Array<string | number>,
+  index: number = 0,
+): Object | Array<any> {
+  const oldKey = oldPath[index];
+  const updated = isArray(obj) ? obj.slice() : {...obj};
+  if (index + 1 === oldPath.length) {
+    const newKey = newPath[index];
+    // $FlowFixMe[incompatible-use] number or string is fine here
+    updated[newKey] = updated[oldKey];
+    if (isArray(updated)) {
+      updated.splice(((oldKey: any): number), 1);
+    } else {
+      delete updated[oldKey];
+    }
+  } else {
+    // $FlowFixMe[incompatible-use] number or string is fine here
+    updated[oldKey] = copyWithRename(obj[oldKey], oldPath, newPath, index + 1);
+  }
+  return updated;
+}
+
+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 = isArray(obj) ? obj.slice() : {...obj};
+  // $FlowFixMe[incompatible-use] number or string is fine here
+  updated[key] = copyWithSet(obj[key], path, value, index + 1);
+  return updated;
+}
+
+export function getEffectDurations(root: Object): {
+  effectDuration: any | null,
+  passiveEffectDuration: any | null,
+} {
+  // Profiling durations are only available for certain builds.
+  // If available, they'll be stored on the HostRoot.
+  let effectDuration = null;
+  let passiveEffectDuration = null;
+  const hostRoot = root.current;
+  if (hostRoot != null) {
+    const stateNode = hostRoot.stateNode;
+    if (stateNode != null) {
+      effectDuration =
+        stateNode.effectDuration != null ? stateNode.effectDuration : null;
+      passiveEffectDuration =
+        stateNode.passiveEffectDuration != null
+          ? stateNode.passiveEffectDuration
+          : null;
+    }
+  }
+  return {effectDuration, passiveEffectDuration};
+}
+
+export function serializeToString(data: any): string {
+  if (data === undefined) {
+    return 'undefined';
+  }
+
+  if (typeof data === 'function') {
+    return data.toString();
+  }
+
+  const cache = new Set<mixed>();
+  // Use a custom replacer function to protect against circular references.
+  return JSON.stringify(
+    data,
+    (key: string, value: any) => {
+      if (typeof value === 'object' && value !== null) {
+        if (cache.has(value)) {
+          return;
+        }
+        cache.add(value);
+      }
+      if (typeof value === 'bigint') {
+        return value.toString() + 'n';
+      }
+      return value;
+    },
+    2,
+  );
+}
+
+function safeToString(val: any): string {
+  try {
+    return String(val);
+  } catch (err) {
+    if (typeof val === 'object') {
+      // An object with no prototype and no `[Symbol.toPrimitive]()`, `toString()`, and `valueOf()` methods would throw.
+      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion
+      return '[object Object]';
+    }
+    throw err;
+  }
+}
+
+// based on https://github.com/tmpfs/format-util/blob/0e62d430efb0a1c51448709abd3e2406c14d8401/format.js#L1
+// based on https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions
+// Implements s, d, i and f placeholders
+export function formatConsoleArgumentsToSingleString(
+  maybeMessage: any,
+  ...inputArgs: $ReadOnlyArray<any>
+): string {
+  const args = inputArgs.slice();
+
+  let formatted: string = safeToString(maybeMessage);
+
+  // If the first argument is a string, check for substitutions.
+  if (typeof maybeMessage === 'string') {
+    if (args.length) {
+      const REGEXP = /(%?)(%([jds]))/g;
+
+      // $FlowFixMe[incompatible-call]
+      formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+        let arg = args.shift();
+        switch (flag) {
+          case 's':
+            // $FlowFixMe[unsafe-addition]
+            arg += '';
+            break;
+          case 'd':
+          case 'i':
+            arg = parseInt(arg, 10).toString();
+            break;
+          case 'f':
+            arg = parseFloat(arg).toString();
+            break;
+        }
+        if (!escaped) {
+          return arg;
+        }
+        args.unshift(arg);
+        return match;
+      });
+    }
+  }
+
+  // Arguments that remain after formatting.
+  if (args.length) {
+    for (let i = 0; i < args.length; i++) {
+      formatted += ' ' + safeToString(args[i]);
+    }
+  }
+
+  // Update escaped %% values.
+  formatted = formatted.replace(/%{2,2}/g, '%');
+
+  return String(formatted);
+}
+
+export function isSynchronousXHRSupported(): boolean {
+  return !!(
+    window.document &&
+    window.document.featurePolicy &&
+    window.document.featurePolicy.allowsFeature('sync-xhr')
+  );
+}
+
+export function gt(a: string = '', b: string = ''): boolean {
+  return compareVersions(a, b) === 1;
+}
+
+export function gte(a: string = '', b: string = ''): boolean {
+  return compareVersions(a, b) > -1;
+}
+
+export const isReactNativeEnvironment = (): boolean => {
+  // We've been relying on this for such a long time
+  // We should probably define the client for DevTools on the backend side and share it with the frontend
+  return window.document == null;
+};
+
+// 0.123456789 => 0.123
+// Expects high-resolution timestamp in milliseconds, like from performance.now()
+// Mainly used for optimizing the size of serialized profiling payload
+export function formatDurationToMicrosecondsGranularity(
+  duration: number,
+): number {
+  return Math.round(duration * 1000) / 1000;
+}
diff --git a/packages/react-devtools-shared/src/backend/utils/parseStackTrace.js b/packages/react-devtools-shared/src/backend/utils/parseStackTrace.js
new file mode 100644
index 00000000000..e18c2d7baa1
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/utils/parseStackTrace.js
@@ -0,0 +1,366 @@
+/**
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactStackTrace, ReactFunctionLocation} from 'shared/ReactTypes';
+
+function parseStackTraceFromChromeStack(
+  stack: string,
+  skipFrames: number,
+): ReactStackTrace {
+  if (stack.startsWith('Error: react-stack-top-frame\n')) {
+    // V8's default formatting prefixes with the error message which we
+    // don't want/need.
+    stack = stack.slice(29);
+  }
+  let idx = stack.indexOf('react_stack_bottom_frame');
+  if (idx === -1) {
+    idx = stack.indexOf('react-stack-bottom-frame');
+  }
+  if (idx !== -1) {
+    idx = stack.lastIndexOf('\n', idx);
+  }
+  if (idx !== -1) {
+    // Cut off everything after the bottom frame since it'll be internals.
+    stack = stack.slice(0, idx);
+  }
+  const frames = stack.split('\n');
+  const parsedFrames: ReactStackTrace = [];
+  // We skip top frames here since they may or may not be parseable but we
+  // want to skip the same number of frames regardless. I.e. we can't do it
+  // in the caller.
+  for (let i = skipFrames; i < frames.length; i++) {
+    const parsed = chromeFrameRegExp.exec(frames[i]);
+    if (!parsed) {
+      continue;
+    }
+    let name = parsed[1] || '';
+    let isAsync = parsed[8] === 'async ';
+    if (name === '<anonymous>') {
+      name = '';
+    } else if (name.startsWith('async ')) {
+      name = name.slice(5);
+      isAsync = true;
+    }
+    let filename = parsed[2] || parsed[5] || '';
+    if (filename === '<anonymous>') {
+      filename = '';
+    }
+    const line = +(parsed[3] || parsed[6] || 0);
+    const col = +(parsed[4] || parsed[7] || 0);
+    parsedFrames.push([name, filename, line, col, 0, 0, isAsync]);
+  }
+  return parsedFrames;
+}
+
+const firefoxFrameRegExp = /^((?:.*".+")?[^@]*)@(.+):(\d+):(\d+)$/;
+function parseStackTraceFromFirefoxStack(
+  stack: string,
+  skipFrames: number,
+): ReactStackTrace {
+  let idx = stack.indexOf('react_stack_bottom_frame');
+  if (idx === -1) {
+    idx = stack.indexOf('react-stack-bottom-frame');
+  }
+  if (idx !== -1) {
+    idx = stack.lastIndexOf('\n', idx);
+  }
+  if (idx !== -1) {
+    // Cut off everything after the bottom frame since it'll be internals.
+    stack = stack.slice(0, idx);
+  }
+  const frames = stack.split('\n');
+  const parsedFrames: ReactStackTrace = [];
+  // We skip top frames here since they may or may not be parseable but we
+  // want to skip the same number of frames regardless. I.e. we can't do it
+  // in the caller.
+  for (let i = skipFrames; i < frames.length; i++) {
+    const parsed = firefoxFrameRegExp.exec(frames[i]);
+    if (!parsed) {
+      continue;
+    }
+    const name = parsed[1] || '';
+    const filename = parsed[2] || '';
+    const line = +parsed[3];
+    const col = +parsed[4];
+    parsedFrames.push([name, filename, line, col, 0, 0, false]);
+  }
+  return parsedFrames;
+}
+
+const CHROME_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
+export function parseStackTraceFromString(
+  stack: string,
+  skipFrames: number,
+): ReactStackTrace {
+  if (stack.match(CHROME_STACK_REGEXP)) {
+    return parseStackTraceFromChromeStack(stack, skipFrames);
+  }
+  return parseStackTraceFromFirefoxStack(stack, skipFrames);
+}
+
+let framesToSkip: number = 0;
+let collectedStackTrace: null | ReactStackTrace = null;
+
+const identifierRegExp = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+
+function getMethodCallName(callSite: CallSite): string {
+  const typeName = callSite.getTypeName();
+  const methodName = callSite.getMethodName();
+  const functionName = callSite.getFunctionName();
+  let result = '';
+  if (functionName) {
+    if (
+      typeName &&
+      identifierRegExp.test(functionName) &&
+      functionName !== typeName
+    ) {
+      result += typeName + '.';
+    }
+    result += functionName;
+    if (
+      methodName &&
+      functionName !== methodName &&
+      !functionName.endsWith('.' + methodName) &&
+      !functionName.endsWith(' ' + methodName)
+    ) {
+      result += ' [as ' + methodName + ']';
+    }
+  } else {
+    if (typeName) {
+      result += typeName + '.';
+    }
+    if (methodName) {
+      result += methodName;
+    } else {
+      result += '<anonymous>';
+    }
+  }
+  return result;
+}
+
+function collectStackTrace(
+  error: Error,
+  structuredStackTrace: CallSite[],
+): string {
+  const result: ReactStackTrace = [];
+  // Collect structured stack traces from the callsites.
+  // We mirror how V8 serializes stack frames and how we later parse them.
+  for (let i = framesToSkip; i < structuredStackTrace.length; i++) {
+    const callSite = structuredStackTrace[i];
+    let name =
+      // $FlowFixMe[method-unbinding]
+      typeof callSite.getFunctionName === 'function'
+        ? callSite.getFunctionName() || '<anonymous>'
+        : '';
+    if (
+      name.includes('react_stack_bottom_frame') ||
+      name.includes('react-stack-bottom-frame')
+    ) {
+      // Skip everything after the bottom frame since it'll be internals.
+      break;
+      // $FlowFixMe[method-unbinding]
+    } else if (typeof callSite.isNative === 'function' && callSite.isNative()) {
+      const isAsync =
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        typeof callSite.isAsync === 'function' && callSite.isAsync();
+      result.push([name, '', 0, 0, 0, 0, isAsync]);
+    } else {
+      // We encode complex function calls as if they're part of the function
+      // name since we cannot simulate the complex ones and they look the same
+      // as function names in UIs on the client as well as stacks.
+      if (
+        // $FlowFixMe[method-unbinding]
+        typeof callSite.isConstructor === 'function' &&
+        callSite.isConstructor()
+      ) {
+        name = 'new ' + name;
+      } else if (
+        // $FlowFixMe[method-unbinding]
+        typeof callSite.isToplevel === 'function' &&
+        !callSite.isToplevel()
+      ) {
+        name = getMethodCallName(callSite);
+      }
+      if (name === '<anonymous>') {
+        name = '';
+      }
+      let filename =
+        // $FlowFixMe[method-unbinding]
+        typeof callSite.getScriptNameOrSourceURL === 'function'
+          ? callSite.getScriptNameOrSourceURL() || '<anonymous>'
+          : '';
+      if (filename === '<anonymous>') {
+        filename = '';
+        // $FlowFixMe[method-unbinding]
+        if (typeof callSite.isEval === 'function' && callSite.isEval()) {
+          const origin =
+            // $FlowFixMe[method-unbinding]
+            typeof callSite.getEvalOrigin === 'function'
+              ? callSite.getEvalOrigin()
+              : null;
+          if (origin) {
+            filename = origin.toString() + ', <anonymous>';
+          }
+        }
+      }
+      const line =
+        // $FlowFixMe[method-unbinding]
+        (typeof callSite.getLineNumber === 'function' &&
+          callSite.getLineNumber()) ||
+        0;
+      const col =
+        // $FlowFixMe[method-unbinding]
+        (typeof callSite.getColumnNumber === 'function' &&
+          callSite.getColumnNumber()) ||
+        0;
+      const enclosingLine: number =
+        // $FlowFixMe[prop-missing]
+        typeof callSite.getEnclosingLineNumber === 'function'
+          ? (callSite: any).getEnclosingLineNumber() || 0
+          : 0;
+      const enclosingCol: number =
+        // $FlowFixMe[prop-missing]
+        typeof callSite.getEnclosingColumnNumber === 'function'
+          ? (callSite: any).getEnclosingColumnNumber() || 0
+          : 0;
+      const isAsync =
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        typeof callSite.isAsync === 'function' && callSite.isAsync();
+      result.push([
+        name,
+        filename,
+        line,
+        col,
+        enclosingLine,
+        enclosingCol,
+        isAsync,
+      ]);
+    }
+  }
+  collectedStackTrace = result;
+
+  // At the same time we generate a string stack trace just in case someone
+  // else reads it. Ideally, we'd call the previous prepareStackTrace to
+  // ensure it's in the expected format but it's common for that to be
+  // source mapped and since we do a lot of eager parsing of errors, it
+  // would be slow in those environments. We could maybe just rely on those
+  // environments having to disable source mapping globally to speed things up.
+  // For now, we just generate a default V8 formatted stack trace without
+  // source mapping as a fallback.
+  const name = error.name || 'Error';
+  const message = error.message || '';
+  let stack = name + ': ' + message;
+  for (let i = 0; i < structuredStackTrace.length; i++) {
+    stack += '\n    at ' + structuredStackTrace[i].toString();
+  }
+  return stack;
+}
+
+// This matches either of these V8 formats.
+//     at name (filename:0:0)
+//     at filename:0:0
+//     at async filename:0:0
+//     at Array.map (<anonymous>)
+const chromeFrameRegExp =
+  /^ *at (?:(.+) \((?:(.+):(\d+):(\d+)|\<anonymous\>)\)|(?:async )?(.+):(\d+):(\d+)|\<anonymous\>)$/;
+
+const stackTraceCache: WeakMap<Error, ReactStackTrace> = new WeakMap();
+
+export function parseStackTrace(
+  error: Error,
+  skipFrames: number,
+): ReactStackTrace {
+  // We can only get structured data out of error objects once. So we cache the information
+  // so we can get it again each time. It also helps performance when the same error is
+  // referenced more than once.
+  const existing = stackTraceCache.get(error);
+  if (existing !== undefined) {
+    return existing;
+  }
+  // We override Error.prepareStackTrace with our own version that collects
+  // the structured data. We need more information than the raw stack gives us
+  // and we need to ensure that we don't get the source mapped version.
+  collectedStackTrace = null;
+  framesToSkip = skipFrames;
+  const previousPrepare = Error.prepareStackTrace;
+  Error.prepareStackTrace = collectStackTrace;
+  let stack;
+  try {
+    stack = String(error.stack);
+  } finally {
+    Error.prepareStackTrace = previousPrepare;
+  }
+
+  if (collectedStackTrace !== null) {
+    const result = collectedStackTrace;
+    collectedStackTrace = null;
+    stackTraceCache.set(error, result);
+    return result;
+  }
+
+  // If the stack has already been read, or this is not actually a V8 compatible
+  // engine then we might not get a normalized stack and it might still have been
+  // source mapped. Regardless we try our best to parse it.
+
+  const parsedFrames = parseStackTraceFromString(stack, skipFrames);
+  stackTraceCache.set(error, parsedFrames);
+  return parsedFrames;
+}
+
+export function extractLocationFromOwnerStack(
+  error: Error,
+): ReactFunctionLocation | null {
+  const stackTrace = parseStackTrace(error, 1);
+  const stack = error.stack;
+  if (
+    !stack.includes('react_stack_bottom_frame') &&
+    !stack.includes('react-stack-bottom-frame')
+  ) {
+    // This didn't have a bottom to it, we can't trust it.
+    return null;
+  }
+  // We start from the bottom since that will have the best location for the owner itself.
+  for (let i = stackTrace.length - 1; i >= 0; i--) {
+    const [functionName, fileName, line, col, encLine, encCol] = stackTrace[i];
+    // Take the first match with a colon in the file name.
+    if (fileName.indexOf(':') !== -1) {
+      return [
+        functionName,
+        fileName,
+        // Use enclosing line if available, since that points to the start of the function.
+        encLine || line,
+        encCol || col,
+      ];
+    }
+  }
+  return null;
+}
+
+export function extractLocationFromComponentStack(
+  stack: string,
+): ReactFunctionLocation | null {
+  const stackTrace = parseStackTraceFromString(stack, 0);
+  for (let i = 0; i < stackTrace.length; i++) {
+    const [functionName, fileName, line, col, encLine, encCol] = stackTrace[i];
+    // Take the first match with a colon in the file name.
+    if (fileName.indexOf(':') !== -1) {
+      return [
+        functionName,
+        fileName,
+        // Use enclosing line if available. (Never the case here because we parse from string.)
+        encLine || line,
+        encCol || col,
+      ];
+    }
+  }
+  return null;
+}
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 00000000000..ddcb6f1ef11
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Agent from 'react-devtools-shared/src/backend/agent';
+import type {HostInstance} from '../../types';
+
+import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
+
+import Overlay from './Overlay';
+
+const SHOW_DURATION = 2000;
+
+let timeoutID: TimeoutID | null = null;
+let overlay: Overlay | null = null;
+
+function hideOverlayNative(agent: Agent): void {
+  agent.emit('hideNativeHighlight');
+}
+
+function hideOverlayWeb(): void {
+  timeoutID = null;
+
+  if (overlay !== null) {
+    overlay.remove();
+    overlay = null;
+  }
+}
+
+export function hideOverlay(agent: Agent): void {
+  return isReactNativeEnvironment()
+    ? hideOverlayNative(agent)
+    : hideOverlayWeb();
+}
+
+function showOverlayNative(
+  elements: $ReadOnlyArray<HostInstance>,
+  agent: Agent,
+): void {
+  agent.emit('showNativeHighlight', elements);
+}
+
+function showOverlayWeb(
+  elements: $ReadOnlyArray<HTMLElement>,
+  componentName: string | null,
+  agent: Agent,
+  hideAfterTimeout: boolean,
+): void {
+  if (timeoutID !== null) {
+    clearTimeout(timeoutID);
+  }
+
+  if (overlay === null) {
+    overlay = new Overlay(agent);
+  }
+
+  overlay.inspect(elements, componentName);
+
+  if (hideAfterTimeout) {
+    timeoutID = setTimeout(() => hideOverlay(agent), SHOW_DURATION);
+  }
+}
+
+export function showOverlay(
+  elements: $ReadOnlyArray<HostInstance>,
+  componentName: string | null,
+  agent: Agent,
+  hideAfterTimeout: boolean,
+): void {
+  return isReactNativeEnvironment()
+    ? showOverlayNative(elements, agent)
+    : showOverlayWeb(
+        (elements: $ReadOnlyArray<any>),
+        componentName,
+        agent,
+        hideAfterTimeout,
+      );
+}
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 00000000000..e55bdb4298c
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -0,0 +1,329 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {getElementDimensions, getNestedBoundingClientRect} from '../utils';
+
+import type {Rect} from '../utils';
+import type Agent from 'react-devtools-shared/src/backend/agent';
+
+type Box = {top: number, left: number, width: number, height: number};
+
+const assign = Object.assign;
+
+// 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: any;
+  tipBoundsWindow: any;
+  container: HTMLElement;
+  tip: OverlayTip;
+  rects: Array<OverlayRect>;
+  agent: Agent;
+
+  constructor(agent: Agent) {
+    // Find the root window, because overlays are positioned relative to it.
+    const 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.
+    const 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 = [];
+
+    this.agent = agent;
+
+    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: $ReadOnlyArray<HTMLElement | Text>, 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.
+    // TODO: We actually can measure text nodes. We should.
+    const elements: $ReadOnlyArray<HTMLElement> = (nodes.filter(
+      node => node.nodeType === Node.ELEMENT_NODE,
+    ): any);
+
+    while (this.rects.length > elements.length) {
+      const rect = this.rects.pop();
+      // $FlowFixMe[incompatible-use]
+      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 ownerName = this.agent.getComponentNameForHostInstance(node);
+      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: Box,
+  bounds: Box,
+  tipSize: {height: number, width: number},
+) {
+  const tipHeight = Math.max(tipSize.height, 20);
+  const tipWidth = Math.max(tipSize.width, 60);
+  const margin = 5;
+
+  let top: number | string;
+  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: number | string = 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: any, what: string, node: HTMLElement) {
+  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 00000000000..03397012b53
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -0,0 +1,501 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {hideOverlay, showOverlay} from './Highlighter';
+import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
+
+import type {HostInstance} from 'react-devtools-shared/src/backend/types';
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {RendererInterface} from '../../types';
+
+// This plug-in provides in-page highlighting of the selected element.
+// It is used by the browser extension and 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();
+let inspectOnlySuspenseNodes = false;
+
+export default function setupHighlighter(
+  bridge: BackendBridge,
+  agent: Agent,
+): void {
+  bridge.addListener('clearHostInstanceHighlight', clearHostInstanceHighlight);
+  bridge.addListener('highlightHostInstance', highlightHostInstance);
+  bridge.addListener('highlightHostInstances', highlightHostInstances);
+  bridge.addListener('scrollToHostInstance', scrollToHostInstance);
+  bridge.addListener('shutdown', stopInspectingHost);
+  bridge.addListener('startInspectingHost', startInspectingHost);
+  bridge.addListener('stopInspectingHost', stopInspectingHost);
+  bridge.addListener('scrollTo', scrollDocumentTo);
+  bridge.addListener('requestScrollPosition', sendScroll);
+
+  let applyingScroll = false;
+
+  function scrollDocumentTo({
+    left,
+    top,
+    right,
+    bottom,
+  }: {
+    left: number,
+    top: number,
+    right: number,
+    bottom: number,
+  }) {
+    if (isReactNativeEnvironment()) {
+      // Not implemented.
+      return;
+    }
+
+    if (
+      left === Math.round(window.scrollX) &&
+      top === Math.round(window.scrollY)
+    ) {
+      return;
+    }
+    applyingScroll = true;
+    window.scrollTo({
+      top: top,
+      left: left,
+      behavior: 'smooth',
+    });
+  }
+
+  let scrollTimer = null;
+  function sendScroll() {
+    if (isReactNativeEnvironment()) {
+      // Not implemented.
+      return;
+    }
+
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+      scrollTimer = null;
+    }
+    if (applyingScroll) {
+      return;
+    }
+    const left = window.scrollX;
+    const top = window.scrollY;
+    const right = left + window.innerWidth;
+    const bottom = top + window.innerHeight;
+    bridge.send('scrollTo', {left, top, right, bottom});
+  }
+
+  function scrollEnd() {
+    // Upon scrollend send it immediately.
+    sendScroll();
+    applyingScroll = false;
+  }
+
+  if (
+    typeof document === 'object' &&
+    // $FlowFixMe[method-unbinding]
+    typeof document.addEventListener === 'function'
+  ) {
+    document.addEventListener('scroll', () => {
+      if (!scrollTimer) {
+        // Periodically synchronize the scroll while scrolling.
+        scrollTimer = setTimeout(sendScroll, 400);
+      }
+    });
+
+    document.addEventListener('scrollend', scrollEnd);
+  }
+
+  function startInspectingHost(onlySuspenseNodes: boolean) {
+    inspectOnlySuspenseNodes = onlySuspenseNodes;
+    registerListenersOnWindow(window);
+  }
+
+  function registerListenersOnWindow(window: any) {
+    // 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('pointermove', onPointerMove, true);
+      window.addEventListener('pointerup', onPointerUp, true);
+    } else {
+      agent.emit('startInspectingNative');
+    }
+  }
+
+  function stopInspectingHost() {
+    hideOverlay(agent);
+    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: any) {
+    // 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('pointermove', onPointerMove, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+    } else {
+      agent.emit('stopInspectingNative');
+    }
+  }
+
+  function clearHostInstanceHighlight() {
+    hideOverlay(agent);
+  }
+
+  function highlightHostInstance({
+    displayName,
+    hideAfterTimeout,
+    id,
+    openBuiltinElementsPanel,
+    rendererID,
+    scrollIntoView,
+  }: {
+    displayName: string | null,
+    hideAfterTimeout: boolean,
+    id: number,
+    openBuiltinElementsPanel: boolean,
+    rendererID: number,
+    scrollIntoView: boolean,
+    ...
+  }) {
+    const renderer = agent.rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+
+      hideOverlay(agent);
+      return;
+    }
+
+    // In some cases fiber may already be unmounted
+    if (!renderer.hasElementWithId(id)) {
+      hideOverlay(agent);
+      return;
+    }
+
+    const nodes = renderer.findHostInstancesForElementID(id);
+    if (nodes != null) {
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        if (node === null) {
+          continue;
+        }
+        const nodeRects =
+          // $FlowFixMe[method-unbinding]
+          typeof node.getClientRects === 'function'
+            ? node.getClientRects()
+            : [];
+        if (
+          typeof node.getClientRects === 'undefined' || // If Host doesn't implement getClientRects, try to show the overlay.
+          (nodeRects.length > 0 && //                      If this is currently display: none, then try another node.
+            (nodeRects.length > 2 || //                    This can happen when one of the host instances is a hoistable.
+              nodeRects[0].width > 0 ||
+              nodeRects[0].height > 0))
+        ) {
+          // $FlowFixMe[method-unbinding]
+          if (scrollIntoView && typeof node.scrollIntoView === 'function') {
+            if (scrollDelayTimer) {
+              clearTimeout(scrollDelayTimer);
+              scrollDelayTimer = null;
+            }
+            // If the node isn't visible show it before highlighting it.
+            // We may want to reconsider this; it might be a little disruptive.
+            node.scrollIntoView({block: 'nearest', inline: 'nearest'});
+          }
+
+          showOverlay(nodes, displayName, agent, hideAfterTimeout);
+
+          if (openBuiltinElementsPanel) {
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+            bridge.send('syncSelectionToBuiltinElementsPanel');
+          }
+          return;
+        }
+      }
+    }
+
+    hideOverlay(agent);
+  }
+
+  function highlightHostInstances({
+    displayName,
+    hideAfterTimeout,
+    elements,
+    scrollIntoView,
+  }: {
+    displayName: string | null,
+    hideAfterTimeout: boolean,
+    elements: Array<{rendererID: number, id: number}>,
+    scrollIntoView: boolean,
+  }) {
+    const nodes: Array<HostInstance> = [];
+    for (let i = 0; i < elements.length; i++) {
+      const {id, rendererID} = elements[i];
+      const renderer = agent.rendererInterfaces[rendererID];
+      if (renderer == null) {
+        console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+        continue;
+      }
+
+      // In some cases fiber may already be unmounted
+      if (!renderer.hasElementWithId(id)) {
+        continue;
+      }
+
+      const hostInstances = renderer.findHostInstancesForElementID(id);
+      if (hostInstances !== null) {
+        for (let j = 0; j < hostInstances.length; j++) {
+          nodes.push(hostInstances[j]);
+        }
+      }
+    }
+
+    if (nodes.length > 0) {
+      const node = nodes[0];
+      // $FlowFixMe[method-unbinding]
+      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.
+        node.scrollIntoView({block: 'nearest', inline: 'nearest'});
+      }
+    }
+
+    showOverlay(nodes, displayName, agent, hideAfterTimeout);
+  }
+
+  function attemptScrollToHostInstance(
+    renderer: RendererInterface,
+    id: number,
+  ) {
+    const nodes = renderer.findHostInstancesForElementID(id);
+    if (nodes != null) {
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        if (node === null) {
+          continue;
+        }
+        const nodeRects =
+          // $FlowFixMe[method-unbinding]
+          typeof node.getClientRects === 'function'
+            ? node.getClientRects()
+            : [];
+        // If this is currently display: none, then try another node.
+        // This can happen when one of the host instances is a hoistable.
+        if (
+          nodeRects.length > 0 &&
+          (nodeRects.length > 2 ||
+            nodeRects[0].width > 0 ||
+            nodeRects[0].height > 0)
+        ) {
+          // $FlowFixMe[method-unbinding]
+          if (typeof node.scrollIntoView === 'function') {
+            node.scrollIntoView({
+              block: 'nearest',
+              inline: 'nearest',
+              behavior: 'smooth',
+            });
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+
+  let scrollDelayTimer = null;
+  function scrollToHostInstance({
+    id,
+    rendererID,
+  }: {
+    id: number,
+    rendererID: number,
+  }) {
+    // Always hide the existing overlay so it doesn't obscure the element.
+    // If you wanted to show the overlay, highlightHostInstance should be used instead
+    // with the scrollIntoView option.
+    hideOverlay(agent);
+
+    if (isReactNativeEnvironment()) {
+      // Not implemented.
+      return;
+    }
+
+    if (scrollDelayTimer) {
+      clearTimeout(scrollDelayTimer);
+      scrollDelayTimer = null;
+    }
+
+    const renderer = agent.rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+      return;
+    }
+
+    // In some cases fiber may already be unmounted
+    if (!renderer.hasElementWithId(id)) {
+      return;
+    }
+
+    if (attemptScrollToHostInstance(renderer, id)) {
+      return;
+    }
+
+    // It's possible that the current state of a Suspense boundary doesn't have a position
+    // in the tree. E.g. because it's not yet mounted in the state we're moving to.
+    // Such as if it's in a null tree or inside another boundary's hidden state.
+    // In this case we use the last known position and try to scroll to that.
+    const rects = renderer.findLastKnownRectsForID(id);
+    if (rects !== null && rects.length > 0) {
+      let x = Infinity;
+      let y = Infinity;
+      for (let i = 0; i < rects.length; i++) {
+        const rect = rects[i];
+        if (rect.x < x) {
+          x = rect.x;
+        }
+        if (rect.y < y) {
+          y = rect.y;
+        }
+      }
+      const element = document.documentElement;
+      if (!element) {
+        return;
+      }
+      // Check if the target corner is already in the viewport.
+      if (
+        x < window.scrollX ||
+        y < window.scrollY ||
+        x > window.scrollX + element.clientWidth ||
+        y > window.scrollY + element.clientHeight
+      ) {
+        window.scrollTo({
+          top: y,
+          left: x,
+          behavior: 'smooth',
+        });
+      }
+      // It's possible that after mount, we're able to scroll deeper once the new nodes
+      // have mounted. Let's try again after mount. Ideally we'd know which commit this
+      // is going to be but for now we just try after 100ms.
+      scrollDelayTimer = setTimeout(() => {
+        attemptScrollToHostInstance(renderer, id);
+      }, 100);
+    }
+  }
+
+  function onClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    stopInspectingHost();
+
+    bridge.send('stopInspectingHost', true);
+  }
+
+  function onMouseEvent(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function onPointerDown(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    selectElementForNode(getEventTarget(event));
+  }
+
+  let lastHoveredNode: HTMLElement | null = null;
+  function onPointerMove(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target: HTMLElement = getEventTarget(event);
+    if (lastHoveredNode === target) return;
+    lastHoveredNode = target;
+
+    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.
+      }
+    }
+
+    if (inspectOnlySuspenseNodes) {
+      // For Suspense nodes we want to highlight not the actual target but the nodes
+      // that are the root of the Suspense node.
+      // TODO: Consider if we should just do the same for other elements because the
+      // hovered node might just be one child of many in the Component.
+      const match = agent.getIDForHostInstance(
+        target,
+        inspectOnlySuspenseNodes,
+      );
+      if (match !== null) {
+        const renderer = agent.rendererInterfaces[match.rendererID];
+        if (renderer == null) {
+          console.warn(
+            `Invalid renderer id "${match.rendererID}" for element "${match.id}"`,
+          );
+          return;
+        }
+        highlightHostInstance({
+          displayName: renderer.getDisplayNameForElementID(match.id),
+          hideAfterTimeout: false,
+          id: match.id,
+          openBuiltinElementsPanel: false,
+          rendererID: match.rendererID,
+          scrollIntoView: false,
+        });
+      }
+    } else {
+      // Don't pass the name explicitly.
+      // It will be inferred from DOM tag and Fiber owner.
+      showOverlay([target], null, agent, false);
+    }
+  }
+
+  function onPointerUp(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  const selectElementForNode = (node: HTMLElement) => {
+    const match = agent.getIDForHostInstance(node, inspectOnlySuspenseNodes);
+    if (match !== null) {
+      bridge.send('selectElement', match.id);
+    }
+  };
+
+  function getEventTarget(event: MouseEvent): HTMLElement {
+    if (event.composed) {
+      return (event.composedPath()[0]: any);
+    }
+
+    return (event.target: any);
+  }
+}
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 00000000000..b9e2cd90681
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
@@ -0,0 +1,253 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {HostInstance} from '../../types';
+import type Agent from '../../agent';
+
+import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
+
+// 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;
+
+function drawNative(nodeToData: Map<HostInstance, Data>, agent: Agent) {
+  const nodesToDraw = [];
+  iterateNodes(nodeToData, ({color, node}) => {
+    nodesToDraw.push({node, color});
+  });
+
+  agent.emit('drawTraceUpdates', nodesToDraw);
+
+  const mergedNodes = groupAndSortNodes(nodeToData);
+  agent.emit('drawGroupedTraceUpdatesWithNames', mergedNodes);
+}
+
+function drawWeb(nodeToData: Map<HostInstance, Data>) {
+  if (canvas === null) {
+    initialize();
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+  const canvasFlow: HTMLCanvasElement = ((canvas: any): HTMLCanvasElement);
+  canvasFlow.width = window.innerWidth * dpr;
+  canvasFlow.height = window.innerHeight * dpr;
+  canvasFlow.style.width = `${window.innerWidth}px`;
+  canvasFlow.style.height = `${window.innerHeight}px`;
+
+  const context = canvasFlow.getContext('2d');
+  context.scale(dpr, dpr);
+
+  context.clearRect(0, 0, canvasFlow.width / dpr, canvasFlow.height / dpr);
+
+  const mergedNodes = groupAndSortNodes(nodeToData);
+
+  mergedNodes.forEach(group => {
+    drawGroupBorders(context, group);
+    drawGroupLabel(context, group);
+  });
+
+  if (canvas !== null) {
+    if (nodeToData.size === 0 && canvas.matches(':popover-open')) {
+      // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
+      // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
+      canvas.hidePopover();
+      return;
+    }
+    // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
+    if (canvas.matches(':popover-open')) {
+      // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
+      // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
+      canvas.hidePopover();
+    }
+    // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
+    // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
+    canvas.showPopover();
+  }
+}
+
+type GroupItem = {
+  rect: Rect,
+  color: string,
+  displayName: string | null,
+  count: number,
+};
+
+export type {GroupItem};
+
+export function groupAndSortNodes(
+  nodeToData: Map<HostInstance, Data>,
+): Array<Array<GroupItem>> {
+  const positionGroups: Map<string, Array<GroupItem>> = new Map();
+
+  iterateNodes(nodeToData, ({rect, color, displayName, count}) => {
+    if (!rect) return;
+    const key = `${rect.left},${rect.top}`;
+    if (!positionGroups.has(key)) positionGroups.set(key, []);
+    positionGroups.get(key)?.push({rect, color, displayName, count});
+  });
+
+  return Array.from(positionGroups.values()).sort((groupA, groupB) => {
+    const maxCountA = Math.max(...groupA.map(item => item.count));
+    const maxCountB = Math.max(...groupB.map(item => item.count));
+    return maxCountA - maxCountB;
+  });
+}
+
+function drawGroupBorders(
+  context: CanvasRenderingContext2D,
+  group: Array<GroupItem>,
+) {
+  group.forEach(({color, rect}) => {
+    context.beginPath();
+    context.strokeStyle = color;
+    context.rect(rect.left, rect.top, rect.width - 1, rect.height - 1);
+    context.stroke();
+  });
+}
+
+function drawGroupLabel(
+  context: CanvasRenderingContext2D,
+  group: Array<GroupItem>,
+) {
+  const mergedName = group
+    .map(({displayName, count}) =>
+      displayName ? `${displayName}${count > 1 ? ` x${count}` : ''}` : '',
+    )
+    .filter(Boolean)
+    .join(', ');
+
+  if (mergedName) {
+    drawLabel(context, group[0].rect, mergedName, group[0].color);
+  }
+}
+
+export function draw(nodeToData: Map<HostInstance, Data>, agent: Agent): void {
+  return isReactNativeEnvironment()
+    ? drawNative(nodeToData, agent)
+    : drawWeb(nodeToData);
+}
+
+type DataWithColorAndNode = {
+  ...Data,
+  color: string,
+  node: HostInstance,
+};
+
+function iterateNodes(
+  nodeToData: Map<HostInstance, Data>,
+  execute: (data: DataWithColorAndNode) => void,
+) {
+  nodeToData.forEach((data, node) => {
+    const colorIndex = Math.min(COLORS.length - 1, data.count - 1);
+    const color = COLORS[colorIndex];
+    execute({
+      color,
+      node,
+      count: data.count,
+      displayName: data.displayName,
+      expirationTime: data.expirationTime,
+      lastMeasuredAt: data.lastMeasuredAt,
+      rect: data.rect,
+    });
+  });
+}
+
+function drawLabel(
+  context: CanvasRenderingContext2D,
+  rect: Rect,
+  text: string,
+  color: string,
+): void {
+  const {left, top} = rect;
+  context.font = '10px monospace';
+  context.textBaseline = 'middle';
+  context.textAlign = 'center';
+
+  const padding = 2;
+  const textHeight = 14;
+
+  const metrics = context.measureText(text);
+  const backgroundWidth = metrics.width + padding * 2;
+  const backgroundHeight = textHeight;
+  const labelX = left;
+  const labelY = top - backgroundHeight;
+
+  context.fillStyle = color;
+  context.fillRect(labelX, labelY, backgroundWidth, backgroundHeight);
+
+  context.fillStyle = '#000000';
+  context.fillText(
+    text,
+    labelX + backgroundWidth / 2,
+    labelY + backgroundHeight / 2,
+  );
+}
+
+function destroyNative(agent: Agent) {
+  agent.emit('disableTraceUpdates');
+}
+
+function destroyWeb() {
+  if (canvas !== null) {
+    if (canvas.matches(':popover-open')) {
+      // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API
+      // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
+      canvas.hidePopover();
+    }
+
+    // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API and loses canvas nullability tracking
+    if (canvas.parentNode != null) {
+      // $FlowFixMe[incompatible-call]: Flow doesn't track that canvas is non-null here
+      canvas.parentNode.removeChild(canvas);
+    }
+    canvas = null;
+  }
+}
+
+export function destroy(agent: Agent): void {
+  return isReactNativeEnvironment() ? destroyNative(agent) : destroyWeb();
+}
+
+function initialize(): void {
+  canvas = window.document.createElement('canvas');
+  canvas.setAttribute('popover', 'manual');
+
+  // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API
+  canvas.style.cssText = `
+    xx-background-color: red;
+    xx-opacity: 0.5;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background-color: transparent;
+    outline: none;
+    box-shadow: none;
+    border: none;
+  `;
+
+  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 00000000000..5b274e8a2f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {extractHOCNames, getNestedBoundingClientRect} from '../utils';
+
+import type {HostInstance} 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;
+
+// Markers for different types of HOCs
+const HOC_MARKERS = new Map([
+  ['Forget', '✨'],
+  ['Memo', '🧠'],
+]);
+
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
+const getCurrentTime =
+  // $FlowFixMe[method-unbinding]
+  typeof performance === 'object' && typeof performance.now === 'function'
+    ? () => performance.now()
+    : () => Date.now();
+
+export type Data = {
+  count: number,
+  expirationTime: number,
+  lastMeasuredAt: number,
+  rect: Rect | null,
+  displayName: string | null,
+};
+
+const nodeToData: Map<HostInstance, 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(agent);
+  }
+}
+
+function traceUpdates(nodes: Set<HostInstance>): 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);
+    }
+
+    let displayName = agent.getComponentNameForHostInstance(node);
+    if (displayName) {
+      const {baseComponentName, hocNames} = extractHOCNames(displayName);
+
+      const markers = hocNames.map(hoc => HOC_MARKERS.get(hoc) || '').join('');
+
+      const enhancedDisplayName = markers
+        ? `${markers}${baseComponentName}`
+        : baseComponentName;
+
+      displayName = enhancedDisplayName;
+    }
+
+    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,
+      displayName,
+    });
+  });
+
+  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, agent);
+
+  if (earliestExpiration !== Number.MAX_VALUE) {
+    redrawTimeoutID = setTimeout(prepareToDraw, earliestExpiration - now);
+  }
+}
+
+function measureNode(node: Object): Rect | null {
+  if (!node || typeof node.getBoundingClientRect !== 'function') {
+    return null;
+  }
+
+  const 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 00000000000..a73c8094edb
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/views/utils.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 interface 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): Rect {
+  const dimensions = getElementDimensions(node);
+  // $FlowFixMe[incompatible-variance]
+  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 type checks 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: Array<Rect | ClientRect> = [node.getBoundingClientRect()];
+    let currentIframe: null | HTMLElement = 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;
+      }
+    }
+
+    // $FlowFixMe[incompatible-variance]
+    return mergeRectOffsets(rects);
+  } else {
+    // $FlowFixMe[incompatible-variance]
+    return node.getBoundingClientRect();
+  }
+}
+
+export function getElementDimensions(domElement: HTMLElement): {
+  borderBottom: number,
+  borderLeft: number,
+  borderRight: number,
+  borderTop: number,
+  marginBottom: number,
+  marginLeft: number,
+  marginRight: number,
+  marginTop: number,
+  paddingBottom: number,
+  paddingLeft: number,
+  paddingRight: number,
+  paddingTop: number,
+} {
+  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),
+  };
+}
+
+export function extractHOCNames(displayName: string): {
+  baseComponentName: string,
+  hocNames: string[],
+} {
+  if (!displayName) return {baseComponentName: '', hocNames: []};
+
+  const hocRegex = /([A-Z][a-zA-Z0-9]*?)\((.*)\)/g;
+  const hocNames: string[] = [];
+  let baseComponentName = displayName;
+  let match;
+
+  while ((match = hocRegex.exec(baseComponentName)) != null) {
+    if (Array.isArray(match)) {
+      const [, hocName, inner] = match;
+      hocNames.push(hocName);
+      baseComponentName = inner;
+    }
+  }
+
+  return {
+    baseComponentName,
+    hocNames,
+  };
+}
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
new file mode 100644
index 00000000000..c332393d2aa
--- /dev/null
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -0,0 +1,381 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
+import {backendToFrontendSerializedElementMapper} from 'react-devtools-shared/src/utils';
+import Store from 'react-devtools-shared/src/devtools/store';
+import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
+import ElementPollingCancellationError from 'react-devtools-shared/src/errors/ElementPollingCancellationError';
+
+import type {
+  InspectedElement as InspectedElementBackend,
+  InspectedElementPayload,
+  SerializedAsyncInfo as SerializedAsyncInfoBackend,
+} from 'react-devtools-shared/src/backend/types';
+import type {
+  BackendEvents,
+  FrontendBridge,
+} from 'react-devtools-shared/src/bridge';
+import type {
+  DehydratedData,
+  InspectedElement as InspectedElementFrontend,
+  SerializedAsyncInfo as SerializedAsyncInfoFrontend,
+} from 'react-devtools-shared/src/frontend/types';
+import type {InspectedElementPath} from 'react-devtools-shared/src/frontend/types';
+
+export function clearErrorsAndWarnings({
+  bridge,
+  store,
+}: {
+  bridge: FrontendBridge,
+  store: Store,
+}): void {
+  store.rootIDToRendererID.forEach(rendererID => {
+    bridge.send('clearErrorsAndWarnings', {rendererID});
+  });
+}
+
+export function clearErrorsForElement({
+  bridge,
+  id,
+  rendererID,
+}: {
+  bridge: FrontendBridge,
+  id: number,
+  rendererID: number,
+}): void {
+  bridge.send('clearErrorsForElementID', {
+    rendererID,
+    id,
+  });
+}
+
+export function clearWarningsForElement({
+  bridge,
+  id,
+  rendererID,
+}: {
+  bridge: FrontendBridge,
+  id: number,
+  rendererID: number,
+}): void {
+  bridge.send('clearWarningsForElementID', {
+    rendererID,
+    id,
+  });
+}
+
+export function copyInspectedElementPath({
+  bridge,
+  id,
+  path,
+  rendererID,
+}: {
+  bridge: FrontendBridge,
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+}): void {
+  bridge.send('copyElementPath', {
+    id,
+    path,
+    rendererID,
+  });
+}
+
+export function inspectElement(
+  bridge: FrontendBridge,
+  forceFullData: boolean,
+  id: number,
+  path: InspectedElementPath | null,
+  rendererID: number,
+  shouldListenToPauseEvents: boolean,
+): Promise<InspectedElementPayload> {
+  const requestID = requestCounter++;
+  const promise = getPromiseForRequestID<InspectedElementPayload>(
+    requestID,
+    'inspectedElement',
+    bridge,
+    `Timed out while inspecting element ${id}.`,
+    shouldListenToPauseEvents,
+  );
+
+  bridge.send('inspectElement', {
+    forceFullData,
+    id,
+    path,
+    rendererID,
+    requestID,
+  });
+
+  return promise;
+}
+
+export function inspectScreen(
+  bridge: FrontendBridge,
+  forceFullData: boolean,
+  arbitraryRootID: number,
+  path: InspectedElementPath | null,
+  shouldListenToPauseEvents: boolean,
+): Promise<InspectedElementPayload> {
+  const requestID = requestCounter++;
+  const promise = getPromiseForRequestID<InspectedElementPayload>(
+    requestID,
+    'inspectedScreen',
+    bridge,
+    `Timed out while inspecting screen.`,
+    shouldListenToPauseEvents,
+  );
+
+  bridge.send('inspectScreen', {
+    requestID,
+    id: arbitraryRootID,
+    path,
+    forceFullData,
+  });
+
+  return promise;
+}
+
+let storeAsGlobalCount = 0;
+
+export function storeAsGlobal({
+  bridge,
+  id,
+  path,
+  rendererID,
+}: {
+  bridge: FrontendBridge,
+  id: number,
+  path: Array<string | number>,
+  rendererID: number,
+}): void {
+  bridge.send('storeAsGlobal', {
+    count: storeAsGlobalCount++,
+    id,
+    path,
+    rendererID,
+  });
+}
+
+const TIMEOUT_DELAY = 10_000;
+
+let requestCounter = 0;
+
+function getPromiseForRequestID<T>(
+  requestID: number,
+  eventType: $Keys<BackendEvents>,
+  bridge: FrontendBridge,
+  timeoutMessage: string,
+  shouldListenToPauseEvents: boolean = false,
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      bridge.removeListener(eventType, onInspectedElement);
+      bridge.removeListener('shutdown', onShutdown);
+
+      if (shouldListenToPauseEvents) {
+        bridge.removeListener('pauseElementPolling', onDisconnect);
+      }
+
+      clearTimeout(timeoutID);
+    };
+
+    const onShutdown = () => {
+      cleanup();
+      reject(
+        new Error(
+          'Failed to inspect element. Try again or restart React DevTools.',
+        ),
+      );
+    };
+
+    const onDisconnect = () => {
+      cleanup();
+      reject(new ElementPollingCancellationError());
+    };
+
+    const onInspectedElement = (data: any) => {
+      if (data.responseID === requestID) {
+        cleanup();
+        resolve((data: T));
+      }
+    };
+
+    const onTimeout = () => {
+      cleanup();
+      reject(new TimeoutError(timeoutMessage));
+    };
+
+    bridge.addListener(eventType, onInspectedElement);
+    bridge.addListener('shutdown', onShutdown);
+
+    if (shouldListenToPauseEvents) {
+      bridge.addListener('pauseElementPolling', onDisconnect);
+    }
+
+    const timeoutID = setTimeout(onTimeout, TIMEOUT_DELAY);
+  });
+}
+
+export function cloneInspectedElementWithPath(
+  inspectedElement: InspectedElementFrontend,
+  path: Array<string | number>,
+  value: Object,
+): InspectedElementFrontend {
+  const hydratedValue = hydrateHelper(value, path);
+  const clonedInspectedElement = {...inspectedElement};
+
+  fillInPath(clonedInspectedElement, value, path, hydratedValue);
+
+  return clonedInspectedElement;
+}
+
+function backendToFrontendSerializedAsyncInfo(
+  asyncInfo: SerializedAsyncInfoBackend,
+): SerializedAsyncInfoFrontend {
+  const ioInfo = asyncInfo.awaited;
+  return {
+    awaited: {
+      name: ioInfo.name,
+      description: ioInfo.description,
+      start: ioInfo.start,
+      end: ioInfo.end,
+      byteSize: ioInfo.byteSize,
+      value: ioInfo.value,
+      env: ioInfo.env,
+      owner:
+        ioInfo.owner === null
+          ? null
+          : backendToFrontendSerializedElementMapper(ioInfo.owner),
+      stack: ioInfo.stack,
+    },
+    env: asyncInfo.env,
+    owner:
+      asyncInfo.owner === null
+        ? null
+        : backendToFrontendSerializedElementMapper(asyncInfo.owner),
+    stack: asyncInfo.stack,
+  };
+}
+
+export function convertInspectedElementBackendToFrontend(
+  inspectedElementBackend: InspectedElementBackend,
+): InspectedElementFrontend {
+  const {
+    canEditFunctionProps,
+    canEditFunctionPropsDeletePaths,
+    canEditFunctionPropsRenamePaths,
+    canEditHooks,
+    canEditHooksAndDeletePaths,
+    canEditHooksAndRenamePaths,
+    canToggleError,
+    isErrored,
+    canToggleSuspense,
+    isSuspended,
+    hasLegacyContext,
+    id,
+    type,
+    owners,
+    env,
+    source,
+    stack,
+    context,
+    hooks,
+    plugins,
+    props,
+    rendererPackageName,
+    rendererVersion,
+    rootType,
+    state,
+    key,
+    errors,
+    warnings,
+    suspendedBy,
+    suspendedByRange,
+    unknownSuspenders,
+    nativeTag,
+  } = inspectedElementBackend;
+
+  const hydratedSuspendedBy: null | Array<SerializedAsyncInfoBackend> =
+    hydrateHelper(suspendedBy);
+
+  const inspectedElement: InspectedElementFrontend = {
+    canEditFunctionProps,
+    canEditFunctionPropsDeletePaths,
+    canEditFunctionPropsRenamePaths,
+    canEditHooks,
+    canEditHooksAndDeletePaths,
+    canEditHooksAndRenamePaths,
+    canToggleError,
+    isErrored,
+    canToggleSuspense,
+    isSuspended,
+    hasLegacyContext,
+    id,
+    key,
+    plugins,
+    rendererPackageName,
+    rendererVersion,
+    rootType,
+    // Previous backend implementations (<= 6.1.5) have a different interface for Source.
+    // This gates the source features for only compatible backends: >= 6.1.6
+    source: Array.isArray(source) ? source : null,
+    stack: stack,
+    type,
+    owners:
+      owners === null
+        ? null
+        : owners.map(backendToFrontendSerializedElementMapper),
+    env,
+    context: hydrateHelper(context),
+    hooks: hydrateHelper(hooks),
+    props: hydrateHelper(props),
+    state: hydrateHelper(state),
+    errors,
+    warnings,
+    suspendedBy:
+      hydratedSuspendedBy == null // backwards compat
+        ? []
+        : hydratedSuspendedBy.map(backendToFrontendSerializedAsyncInfo),
+    suspendedByRange,
+    unknownSuspenders,
+    nativeTag,
+  };
+
+  return inspectedElement;
+}
+
+export function hydrateHelper(
+  dehydratedData: DehydratedData | null,
+  path: ?InspectedElementPath,
+): Object | null {
+  if (dehydratedData !== null) {
+    const {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.
+        return hydrate(
+          data,
+          cleaned.map(cleanedPath => cleanedPath.slice(length)),
+          unserializable.map(unserializablePath =>
+            unserializablePath.slice(length),
+          ),
+        );
+      }
+    }
+
+    return hydrate(data, cleaned, unserializable);
+  } else {
+    return null;
+  }
+}
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
new file mode 100644
index 00000000000..af3a87b5968
--- /dev/null
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -0,0 +1,487 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './frontend/types';
+import type {
+  InspectedElementPayload,
+  OwnersList,
+  ProfilingDataBackend,
+  RendererID,
+  DevToolsHookSettings,
+  ProfilingSettings,
+} from 'react-devtools-shared/src/backend/types';
+import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+
+// This message specifies the version of the DevTools protocol currently supported by the backend,
+// as well as the earliest NPM version (e.g. "4.13.0") that protocol is supported by on the frontend.
+// This enables an older frontend to display an upgrade message to users for a newer, unsupported backend.
+export type BridgeProtocol = {
+  // Version supported by the current frontend/backend.
+  version: number,
+
+  // NPM version range of `react-devtools-inline` that also supports this version.
+  // Note that 'maxNpmVersion' is only set when the version is bumped.
+  minNpmVersion: string,
+  maxNpmVersion: string | null,
+};
+
+// Bump protocol version whenever a backwards breaking change is made
+// in the messages sent between BackendBridge and FrontendBridge.
+// This mapping is embedded in both frontend and backend builds.
+//
+// The backend protocol will always be the latest entry in the BRIDGE_PROTOCOL array.
+//
+// When an older frontend connects to a newer backend,
+// the backend can send the minNpmVersion and the frontend can display an NPM upgrade prompt.
+//
+// When a newer frontend connects with an older protocol version,
+// the frontend can use the embedded minNpmVersion/maxNpmVersion values to display a downgrade prompt.
+export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
+  // This version technically never existed,
+  // but a backwards breaking change was added in 4.11,
+  // so the safest guess to downgrade the frontend would be to version 4.10.
+  {
+    version: 0,
+    minNpmVersion: '"<4.11.0"',
+    maxNpmVersion: '"<4.11.0"',
+  },
+  // Versions 4.11.x – 4.12.x contained the backwards breaking change,
+  // but we didn't add the "fix" of checking the protocol version until 4.13,
+  // so we don't recommend downgrading to 4.11 or 4.12.
+  {
+    version: 1,
+    minNpmVersion: '4.13.0',
+    maxNpmVersion: '4.21.0',
+  },
+  // Version 2 adds a StrictMode-enabled and supports-StrictMode bits to add-root operation.
+  {
+    version: 2,
+    minNpmVersion: '4.22.0',
+    maxNpmVersion: null,
+  },
+];
+
+export const currentBridgeProtocol: BridgeProtocol =
+  BRIDGE_PROTOCOL[BRIDGE_PROTOCOL.length - 1];
+
+type ElementAndRendererID = {id: number, rendererID: RendererID};
+
+export type Message = {
+  event: string,
+  payload: any,
+};
+
+type HighlightHostInstance = {
+  ...ElementAndRendererID,
+  displayName: string | null,
+  hideAfterTimeout: boolean,
+  openBuiltinElementsPanel: boolean,
+  scrollIntoView: boolean,
+};
+type HighlightHostInstances = {
+  elements: Array<ElementAndRendererID>,
+  displayName: string | null,
+  hideAfterTimeout: boolean,
+  scrollIntoView: boolean,
+};
+
+type ScrollToHostInstance = {
+  ...ElementAndRendererID,
+};
+
+type OverrideValue = {
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+  wasForwarded?: boolean,
+  value: any,
+};
+
+type OverrideHookState = {
+  ...OverrideValue,
+  hookID: number,
+};
+
+type PathType = 'props' | 'hooks' | 'state' | 'context';
+
+type DeletePath = {
+  ...ElementAndRendererID,
+  type: PathType,
+  hookID?: ?number,
+  path: Array<string | number>,
+};
+
+type RenamePath = {
+  ...ElementAndRendererID,
+  type: PathType,
+  hookID?: ?number,
+  oldPath: Array<string | number>,
+  newPath: Array<string | number>,
+};
+
+type OverrideValueAtPath = {
+  ...ElementAndRendererID,
+  type: PathType,
+  hookID?: ?number,
+  path: Array<string | number>,
+  value: any,
+};
+
+type OverrideError = {
+  ...ElementAndRendererID,
+  forceError: boolean,
+};
+
+type OverrideSuspense = {
+  ...ElementAndRendererID,
+  forceFallback: boolean,
+};
+
+type OverrideSuspenseMilestone = {
+  suspendedSet: Array<number>,
+};
+
+type CopyElementPathParams = {
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+};
+
+type ViewAttributeSourceParams = {
+  ...ElementAndRendererID,
+  path: Array<string | number>,
+};
+
+type InspectElementParams = {
+  ...ElementAndRendererID,
+  forceFullData: boolean,
+  path: Array<number | string> | null,
+  requestID: number,
+};
+
+type InspectScreenParams = {
+  requestID: number,
+  id: number,
+  forceFullData: boolean,
+  path: Array<number | string> | null,
+};
+
+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,
+};
+
+export type SavedPreferencesParams = {
+  componentFilters: Array<ComponentFilter>,
+};
+
+export type BackendEvents = {
+  backendInitialized: [],
+  backendVersion: [string],
+  bridgeProtocol: [BridgeProtocol],
+  enableSuspenseTab: [],
+  extensionBackendInitialized: [],
+  fastRefreshScheduled: [],
+  getSavedPreferences: [],
+  inspectedElement: [InspectedElementPayload],
+  inspectedScreen: [InspectedElementPayload],
+  isReloadAndProfileSupportedByBackend: [boolean],
+  operations: [Array<number>],
+  ownersList: [OwnersList],
+  overrideComponentFilters: [Array<ComponentFilter>],
+  environmentNames: [Array<string>],
+  profilingData: [ProfilingDataBackend],
+  profilingStatus: [boolean],
+  reloadAppForProfiling: [],
+  saveToClipboard: [string],
+  selectElement: [number | null],
+  shutdown: [],
+  stopInspectingHost: [boolean],
+  scrollTo: [{left: number, top: number, right: number, bottom: number}],
+  syncSelectionToBuiltinElementsPanel: [],
+  unsupportedRendererVersion: [],
+
+  extensionComponentsPanelShown: [],
+  extensionComponentsPanelHidden: [],
+
+  resumeElementPolling: [],
+  pauseElementPolling: [],
+
+  // React Native style editor plug-in.
+  isNativeStyleEditorSupported: [
+    {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>},
+  ],
+  NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
+
+  hookSettings: [$ReadOnly<DevToolsHookSettings>],
+};
+
+type StartProfilingParams = ProfilingSettings;
+type ReloadAndProfilingParams = ProfilingSettings;
+
+export type FrontendEvents = {
+  clearErrorsAndWarnings: [{rendererID: RendererID}],
+  clearErrorsForElementID: [ElementAndRendererID],
+  clearHostInstanceHighlight: [],
+  clearWarningsForElementID: [ElementAndRendererID],
+  copyElementPath: [CopyElementPathParams],
+  deletePath: [DeletePath],
+  getBackendVersion: [],
+  getBridgeProtocol: [],
+  getIfHasUnsupportedRendererVersion: [],
+  getOwnersList: [ElementAndRendererID],
+  getProfilingData: [{rendererID: RendererID}],
+  getProfilingStatus: [],
+  highlightHostInstance: [HighlightHostInstance],
+  highlightHostInstances: [HighlightHostInstances],
+  inspectElement: [InspectElementParams],
+  inspectScreen: [InspectScreenParams],
+  logElementToConsole: [ElementAndRendererID],
+  overrideError: [OverrideError],
+  overrideSuspense: [OverrideSuspense],
+  overrideSuspenseMilestone: [OverrideSuspenseMilestone],
+  overrideValueAtPath: [OverrideValueAtPath],
+  profilingData: [ProfilingDataBackend],
+  reloadAndProfile: [ReloadAndProfilingParams],
+  renamePath: [RenamePath],
+  savedPreferences: [SavedPreferencesParams],
+  setTraceUpdatesEnabled: [boolean],
+  shutdown: [],
+  startInspectingHost: [boolean],
+  startProfiling: [StartProfilingParams],
+  stopInspectingHost: [],
+  scrollToHostInstance: [ScrollToHostInstance],
+  scrollTo: [{left: number, top: number, right: number, bottom: number}],
+  requestScrollPosition: [],
+  stopProfiling: [],
+  storeAsGlobal: [StoreAsGlobalParams],
+  updateComponentFilters: [Array<ComponentFilter>],
+  getEnvironmentNames: [],
+  updateHookSettings: [$ReadOnly<DevToolsHookSettings>],
+  viewAttributeSource: [ViewAttributeSourceParams],
+  viewElementSource: [ElementAndRendererID],
+
+  syncSelectionFromBuiltinElementsPanel: [],
+
+  // React Native style editor plug-in.
+  NativeStyleEditor_measure: [ElementAndRendererID],
+  NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],
+  NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],
+
+  // Temporarily support newer standalone front-ends sending commands to older embedded backends.
+  // We do this because React Native embeds the React DevTools backend,
+  // but cannot control which version of the frontend users use.
+  //
+  // Note that nothing in the newer backend actually listens to these events,
+  // but the new frontend still dispatches them (in case older backends are listening to them instead).
+  //
+  // Note that this approach does no support the combination of a newer backend with an older frontend.
+  // It would be more work to support both approaches (and not run handlers twice)
+  // so I chose to support the more likely/common scenario (and the one more difficult for an end user to "fix").
+  overrideContext: [OverrideValue],
+  overrideHookState: [OverrideHookState],
+  overrideProps: [OverrideValue],
+  overrideState: [OverrideValue],
+
+  getHookSettings: [],
+};
+
+class Bridge<
+  OutgoingEvents: Object,
+  IncomingEvents: Object,
+> extends EventEmitter<IncomingEvents> {
+  _isShutdown: boolean = false;
+  _messageQueue: Array<any> = [];
+  _scheduledFlush: boolean = false;
+  _wall: Wall;
+  _wallUnlisten: Function | null = null;
+
+  constructor(wall: Wall) {
+    super();
+
+    this._wall = wall;
+
+    this._wallUnlisten =
+      wall.listen((message: Message) => {
+        if (message && message.event) {
+          (this: any).emit(message.event, message.payload);
+        }
+      }) || null;
+
+    // Temporarily support older standalone front-ends sending commands to newer embedded backends.
+    // We do this because React Native embeds the React DevTools backend,
+    // but cannot control which version of the frontend users use.
+    this.addListener('overrideValueAtPath', this.overrideValueAtPath);
+  }
+
+  // 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: 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._scheduledFlush) {
+      this._scheduledFlush = true;
+      // $FlowFixMe
+      if (typeof devtoolsJestTestScheduler === 'function') {
+        // This exists just for our own jest tests.
+        // They're written in such a way that we can neither mock queueMicrotask
+        // because then we break React DOM and we can't not mock it because then
+        // we can't synchronously flush it. So they need to be rewritten.
+        // $FlowFixMe
+        devtoolsJestTestScheduler(this._flush); // eslint-disable-line no-undef
+      } else {
+        queueMicrotask(this._flush);
+      }
+    }
+  }
+
+  shutdown() {
+    if (this._isShutdown) {
+      console.warn('Bridge was already shutdown.');
+      return;
+    }
+
+    // Queue the shutdown outgoing message for subscribers.
+    this.emit('shutdown');
+    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[cannot-write] This property is not writable.
+    this.addListener = function () {};
+    // $FlowFixMe[cannot-write] 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);
+  }
+
+  _flush: () => void = () => {
+    // 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.
+    try {
+      if (this._messageQueue.length) {
+        for (let i = 0; i < this._messageQueue.length; i += 2) {
+          // This only supports one argument in practice but the types suggests it should support multiple.
+          this._wall.send(this._messageQueue[i], this._messageQueue[i + 1][0]);
+        }
+        this._messageQueue.length = 0;
+      }
+    } finally {
+      // We set this at the end in case new messages are added synchronously above.
+      // They're already handled so they shouldn't queue more flushes.
+      this._scheduledFlush = false;
+    }
+  };
+
+  // Temporarily support older standalone backends by forwarding "overrideValueAtPath" commands
+  // to the older message types they may be listening to.
+  overrideValueAtPath: OverrideValueAtPath => void = ({
+    id,
+    path,
+    rendererID,
+    type,
+    value,
+  }: OverrideValueAtPath) => {
+    switch (type) {
+      case 'context':
+        this.send('overrideContext', {
+          id,
+          path,
+          rendererID,
+          wasForwarded: true,
+          value,
+        });
+        break;
+      case 'hooks':
+        this.send('overrideHookState', {
+          id,
+          path,
+          rendererID,
+          wasForwarded: true,
+          value,
+        });
+        break;
+      case 'props':
+        this.send('overrideProps', {
+          id,
+          path,
+          rendererID,
+          wasForwarded: true,
+          value,
+        });
+        break;
+      case 'state':
+        this.send('overrideState', {
+          id,
+          path,
+          rendererID,
+          wasForwarded: true,
+          value,
+        });
+        break;
+    }
+  };
+}
+
+export type BackendBridge = Bridge<BackendEvents, FrontendEvents>;
+export type FrontendBridge = Bridge<FrontendEvents, BackendEvents>;
+
+export default Bridge;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
new file mode 100644
index 00000000000..9cec3ce338c
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableLogger: boolean = true;
+export const enableStyleXFeatures: boolean = true;
+export const isInternalFacebookBuild: boolean = true;
+
+/************************************************************************
+ * Do not edit the code below.
+ * It ensures this fork exports the same types as the default flags file.
+ ************************************************************************/
+
+import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
+import typeof * as ExportsType from './DevToolsFeatureFlags.core-fb';
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
new file mode 100644
index 00000000000..326b0fd16cc
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableLogger: boolean = false;
+export const enableStyleXFeatures: boolean = false;
+export const isInternalFacebookBuild: boolean = false;
+
+/************************************************************************
+ * Do not edit the code below.
+ * It ensures this fork exports the same types as the default flags file.
+ ************************************************************************/
+
+import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
+import typeof * as ExportsType from './DevToolsFeatureFlags.core-oss';
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
new file mode 100644
index 00000000000..e7355f8a347
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableLogger: boolean = false;
+export const enableStyleXFeatures: boolean = false;
+export const isInternalFacebookBuild: boolean = false;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
new file mode 100644
index 00000000000..dc4f05d16fb
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableLogger: boolean = true;
+export const enableStyleXFeatures: boolean = true;
+export const isInternalFacebookBuild: boolean = true;
+
+/************************************************************************
+ * Do not edit the code below.
+ * It ensures this fork exports the same types as the default flags file.
+ ************************************************************************/
+
+import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
+import typeof * as ExportsType from './DevToolsFeatureFlags.extension-fb';
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
new file mode 100644
index 00000000000..71df63eef05
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableLogger: boolean = false;
+export const enableStyleXFeatures: boolean = false;
+export const isInternalFacebookBuild: boolean = false;
+
+/************************************************************************
+ * Do not edit the code below.
+ * It ensures this fork exports the same types as the default flags file.
+ ************************************************************************/
+
+import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
+import typeof * as ExportsType from './DevToolsFeatureFlags.extension-oss';
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
new file mode 100644
index 00000000000..c965282e60d
--- /dev/null
+++ b/packages/react-devtools-shared/src/constants.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
+export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
+export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
+
+// Flip this flag to true to enable verbose console debug logging.
+export const __DEBUG__ = false;
+
+// Flip this flag to true to enable performance.mark() and performance.measure() timings.
+export const __PERFORMANCE_PROFILE__ = 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 TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5;
+export const TREE_OPERATION_REMOVE_ROOT = 6;
+export const TREE_OPERATION_SET_SUBTREE_MODE = 7;
+export const SUSPENSE_TREE_OPERATION_ADD = 8;
+export const SUSPENSE_TREE_OPERATION_REMOVE = 9;
+export const SUSPENSE_TREE_OPERATION_REORDER_CHILDREN = 10;
+export const SUSPENSE_TREE_OPERATION_RESIZE = 11;
+export const SUSPENSE_TREE_OPERATION_SUSPENDERS = 12;
+export const TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE = 13;
+
+export const PROFILING_FLAG_BASIC_SUPPORT /*.             */ = 0b001;
+export const PROFILING_FLAG_TIMELINE_SUPPORT /*           */ = 0b010;
+export const PROFILING_FLAG_PERFORMANCE_TRACKS_SUPPORT /* */ = 0b100;
+
+export const UNKNOWN_SUSPENDERS_NONE: UnknownSuspendersReason = 0; // If we had at least one debugInfo, then that might have been the reason.
+export const UNKNOWN_SUSPENDERS_REASON_PRODUCTION: UnknownSuspendersReason = 1; // We're running in prod. That might be why we had unknown suspenders.
+export const UNKNOWN_SUSPENDERS_REASON_OLD_VERSION: UnknownSuspendersReason = 2; // We're running an old version of React that doesn't have full coverage. That might be the reason.
+export const UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE: UnknownSuspendersReason = 3; // If we're in dev, didn't detect and debug info and still suspended (other than CSS/image) the only reason is thrown promise.
+
+export opaque type UnknownSuspendersReason = 0 | 1 | 2 | 3;
+
+export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
+export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY =
+  'React::DevTools::componentFilters';
+export const SESSION_STORAGE_LAST_SELECTION_KEY =
+  'React::DevTools::lastSelection';
+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
+  'React::DevTools::openInEditorUrl';
+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
+  'React::DevTools::openInEditorUrlPreset';
+export const LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR =
+  'React::DevTools::alwaysOpenInEditor';
+export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
+  'React::DevTools::parseHookNames';
+export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
+  'React::DevTools::recordChangeDescriptions';
+export const SESSION_STORAGE_RECORD_TIMELINE_KEY =
+  'React::DevTools::recordTimeline';
+export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
+  'React::DevTools::reloadAndProfile';
+export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
+export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
+  'React::DevTools::traceUpdatesEnabled';
+export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
+  'React::DevTools::supportsProfiling';
+
+export const PROFILER_EXPORT_VERSION = 5;
+
+export const FIREFOX_CONSOLE_DIMMING_COLOR = 'color: rgba(124, 124, 124, 0.75)';
+export const ANSI_STYLE_DIMMING_TEMPLATE = '\x1b[2;38;2;124;124;124m%s\x1b[0m';
+export const ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK =
+  '\x1b[2;38;2;124;124;124m%s %o\x1b[0m';
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 00000000000..f6e9fa5dd7a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
@@ -0,0 +1,9 @@
+.ContextMenu {
+  position: absolute;
+  background-color: var(--color-context-background);
+  box-shadow: 1px 1px 2px var(--color-shadow);
+  border-radius: 0.25rem;
+  overflow: hidden;
+  z-index: 10000002;
+  user-select: none;
+}
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 00000000000..a96634fbe46
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useLayoutEffect, createRef} from 'react';
+import {createPortal} from 'react-dom';
+
+import ContextMenuItem from './ContextMenuItem';
+
+import type {
+  ContextMenuItem as ContextMenuItemType,
+  ContextMenuPosition,
+  ContextMenuRef,
+} from './types';
+
+import styles from './ContextMenu.css';
+
+function repositionToFit(element: HTMLElement, x: number, y: number) {
+  const ownerWindow = element.ownerDocument.defaultView;
+  if (y + element.offsetHeight >= ownerWindow.innerHeight) {
+    if (y - element.offsetHeight > 0) {
+      element.style.top = `${y - element.offsetHeight}px`;
+    } else {
+      element.style.top = '0px';
+    }
+  } else {
+    element.style.top = `${y}px`;
+  }
+
+  if (x + element.offsetWidth >= ownerWindow.innerWidth) {
+    if (x - element.offsetWidth > 0) {
+      element.style.left = `${x - element.offsetWidth}px`;
+    } else {
+      element.style.left = '0px';
+    }
+  } else {
+    element.style.left = `${x}px`;
+  }
+}
+
+type Props = {
+  anchorElementRef: {current: React.ElementRef<any> | null},
+  items: ContextMenuItemType[],
+  position: ContextMenuPosition,
+  hide: () => void,
+  ref?: ContextMenuRef,
+};
+
+export default function ContextMenu({
+  anchorElementRef,
+  position,
+  items,
+  hide,
+  ref = createRef(),
+}: Props): React.Node {
+  // This works on the assumption that ContextMenu component is only rendered when it should be shown
+  const anchor = anchorElementRef.current;
+
+  if (anchor == null) {
+    throw new Error(
+      'Attempted to open a context menu for an element, which is not mounted',
+    );
+  }
+
+  const ownerDocument = anchor.ownerDocument;
+  const portalContainer = ownerDocument.querySelector(
+    '[data-react-devtools-portal-root]',
+  );
+
+  useLayoutEffect(() => {
+    const menu = ((ref.current: any): HTMLElement);
+
+    function hideUnlessContains(event: Event) {
+      if (!menu.contains(((event.target: any): Node))) {
+        hide();
+      }
+    }
+
+    ownerDocument.addEventListener('mousedown', hideUnlessContains);
+    ownerDocument.addEventListener('touchstart', hideUnlessContains);
+    ownerDocument.addEventListener('keydown', hideUnlessContains);
+
+    const ownerWindow = ownerDocument.defaultView;
+    ownerWindow.addEventListener('resize', hide);
+
+    repositionToFit(menu, position.x, position.y);
+
+    return () => {
+      ownerDocument.removeEventListener('mousedown', hideUnlessContains);
+      ownerDocument.removeEventListener('touchstart', hideUnlessContains);
+      ownerDocument.removeEventListener('keydown', hideUnlessContains);
+
+      ownerWindow.removeEventListener('resize', hide);
+    };
+  }, []);
+
+  if (portalContainer == null || items.length === 0) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={styles.ContextMenu} ref={ref}>
+      {items.map(({onClick, content}, index) => (
+        <ContextMenuItem key={index} onClick={onClick} hide={hide}>
+          {content}
+        </ContextMenuItem>
+      ))}
+    </div>,
+    portalContainer,
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuContainer.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuContainer.js
new file mode 100644
index 00000000000..14e1985b202
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuContainer.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useImperativeHandle} from 'react';
+
+import ContextMenu from './ContextMenu';
+import useContextMenu from './useContextMenu';
+
+import type {ContextMenuItem, ContextMenuRef} from './types';
+
+type Props = {
+  anchorElementRef: {
+    current: React.ElementRef<any> | null,
+  },
+  items: ContextMenuItem[],
+  closedMenuStub?: React.Node | null,
+  ref?: ContextMenuRef,
+};
+
+export default function ContextMenuContainer({
+  anchorElementRef,
+  items,
+  closedMenuStub = null,
+  ref,
+}: Props): React.Node {
+  const {shouldShow, position, hide} = useContextMenu(anchorElementRef);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isShown() {
+        return shouldShow;
+      },
+      hide,
+    }),
+    [shouldShow, hide],
+  );
+
+  if (!shouldShow) {
+    return closedMenuStub;
+  }
+
+  return (
+    <ContextMenu
+      anchorElementRef={anchorElementRef}
+      position={position}
+      hide={hide}
+      items={items}
+      ref={ref}
+    />
+  );
+}
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 00000000000..aab558860bc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.css
@@ -0,0 +1,25 @@
+.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);
+}
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 00000000000..4d15364b002
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './ContextMenuItem.css';
+
+type Props = {
+  children: React.Node,
+  onClick: () => void,
+  hide: () => void,
+};
+
+export default function ContextMenuItem({
+  children,
+  onClick,
+  hide,
+}: Props): React.Node {
+  const handleClick = () => {
+    onClick();
+    hide();
+  };
+
+  return (
+    <div
+      className={styles.ContextMenuItem}
+      onClick={handleClick}
+      onTouchEnd={handleClick}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/types.js b/packages/react-devtools-shared/src/devtools/ContextMenu/types.js
new file mode 100644
index 00000000000..9fda9be1999
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/types.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Node as ReactNode} from 'react';
+
+export type ContextMenuItem = {
+  onClick: () => mixed,
+  content: ReactNode,
+};
+
+// Relative to [data-react-devtools-portal-root]
+export type ContextMenuPosition = {
+  x: number,
+  y: number,
+};
+
+export type ContextMenuHandle = {
+  isShown(): boolean,
+  hide(): void,
+};
+
+export type ContextMenuComponent = component(
+  ref: React$RefSetter<ContextMenuHandle>,
+);
+export type ContextMenuRef = {current: ContextMenuHandle | null};
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 00000000000..016012f7346
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useState, useEffect, useCallback} from 'react';
+
+import type {ContextMenuPosition} from './types';
+
+type Payload = {
+  shouldShow: boolean,
+  position: ContextMenuPosition | null,
+  hide: () => void,
+};
+
+export default function useContextMenu(anchorElementRef: {
+  current: React.ElementRef<any> | null,
+}): Payload {
+  const [shouldShow, setShouldShow] = useState(false);
+  const [position, setPosition] = React.useState<ContextMenuPosition | null>(
+    null,
+  );
+
+  const hide = useCallback(() => {
+    setShouldShow(false);
+    setPosition(null);
+  }, []);
+
+  useEffect(() => {
+    const anchor = anchorElementRef.current;
+    if (anchor == null) return;
+
+    function handleAnchorContextMenu(e: MouseEvent) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const {pageX, pageY} = e;
+
+      const ownerDocument = anchor?.ownerDocument;
+      const portalContainer = ownerDocument?.querySelector(
+        '[data-react-devtools-portal-root]',
+      );
+
+      if (portalContainer == null) {
+        throw new Error(
+          "DevTools tooltip root node not found: can't display the context menu",
+        );
+      }
+
+      // `x` and `y` should be relative to the container, to which these context menus will be portaled
+      // we can't use just `pageX` or `pageY` for Fusebox integration, because RDT frontend is inlined with the whole document
+      // meaning that `pageY` will have an offset of 27, which is the tab bar height
+      // for the browser extension, these will equal to 0
+      const {top: containerTop, left: containerLeft} =
+        portalContainer.getBoundingClientRect();
+
+      setShouldShow(true);
+      setPosition({x: pageX - containerLeft, y: pageY - containerTop});
+    }
+
+    anchor.addEventListener('contextmenu', handleAnchorContextMenu);
+    return () => {
+      anchor.removeEventListener('contextmenu', handleAnchorContextMenu);
+    };
+  }, [anchorElementRef]);
+
+  return {shouldShow, position, hide};
+}
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 00000000000..33240bd77f3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -0,0 +1,381 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {logEvent} from 'react-devtools-shared/src/Logger';
+
+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.
+  _isBackendProfiling: boolean = false;
+
+  // Mainly used for optimistic UI.
+  // This could be false, but at the same time _isBackendProfiling could be true
+  // for cases when Backend is busy serializing a chunky payload.
+  _isProfilingBasedOnUserInput: 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._isBackendProfiling = defaultIsProfiling;
+    this._isProfilingBasedOnUserInput = 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 isProfilingBasedOnUserInput(): boolean {
+    return this._isProfilingBasedOnUserInput;
+  }
+
+  get profilingCache(): ProfilingCache {
+    return this._cache;
+  }
+
+  get profilingData(): ProfilingDataFrontend | null {
+    return this._dataFrontend;
+  }
+  set profilingData(value: ProfilingDataFrontend | null): void {
+    if (this._isBackendProfiling) {
+      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.clear();
+
+    this._bridge.send('startProfiling', {
+      recordChangeDescriptions: this._store.recordChangeDescriptions,
+      recordTimeline: this._store.supportsTimeline,
+    });
+
+    this._isProfilingBasedOnUserInput = true;
+    this.emit('isProfiling');
+
+    // 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');
+
+    // Backend might be busy serializing the payload, so we are going to display
+    // optimistic UI to the user that profiling is stopping.
+    this._isProfilingBasedOnUserInput = false;
+    this.emit('isProfiling');
+
+    // Wait for onProfilingStatus() to confirm the status has changed, this will update _isBackendProfiling.
+    // 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>,
+  ) => void = (elementID, profilingSnapshots) => {
+    const element = this._store.getElementByID(elementID);
+    if (element !== null) {
+      const snapshotNode: SnapshotNode = {
+        id: elementID,
+        children: element.children.slice(0),
+        displayName: element.displayName,
+        hocDisplayNames: element.hocDisplayNames,
+        key: element.key,
+        type: element.type,
+        compiledWithForget: element.compiledWithForget,
+      };
+      profilingSnapshots.set(elementID, snapshotNode);
+
+      element.children.forEach(childID =>
+        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots),
+      );
+    }
+  };
+
+  onBridgeOperations: (operations: Array<number>) => void = operations => {
+    // The first two values are always rendererID and rootID
+    const rendererID = operations[0];
+    const rootID = operations[1];
+
+    if (this._isBackendProfiling) {
+      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) => void =
+    dataBackend => {
+      if (this._isBackendProfiling) {
+        // This should never happen, but if it does, then 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: () => void = () => {
+    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) => void = isProfiling => {
+    if (this._isBackendProfiling === isProfiling) {
+      return;
+    }
+
+    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 (const 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<number, SnapshotNode>();
+        this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);
+        this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);
+      });
+    }
+
+    this._isBackendProfiling = isProfiling;
+    // _isProfilingBasedOnUserInput should already be updated from startProfiling, stopProfiling, or constructor.
+    if (this._isProfilingBasedOnUserInput !== isProfiling) {
+      logEvent({
+        event_name: 'error',
+        error_message: `Unexpected profiling status. Expected ${this._isProfilingBasedOnUserInput.toString()}, but received ${isProfiling.toString()}.`,
+        error_stack: new Error().stack,
+        error_component_stack: null,
+      });
+
+      // If happened, fallback to displaying the value from Backend
+      this._isProfilingBasedOnUserInput = 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();
+
+    // 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 00000000000..e0c86b2aba5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 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 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: number, rootID: number}) => CommitTree = ({
+    commitIndex,
+    rootID,
+  }) =>
+    getCommitTree({
+      commitIndex,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  getFiberCommits: ({fiberID: number, rootID: number}) => Array<number> = ({
+    fiberID,
+    rootID,
+  }) => {
+    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: number,
+    commitTree: CommitTree,
+    rootID: number,
+  }) => FlamegraphChartData = ({commitIndex, commitTree, rootID}) =>
+    getFlamegraphChartData({
+      commitIndex,
+      commitTree,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  getRankedChartData: ({
+    commitIndex: number,
+    commitTree: CommitTree,
+    rootID: number,
+  }) => RankedChartData = ({commitIndex, commitTree, rootID}) =>
+    getRankedChartData({
+      commitIndex,
+      commitTree,
+      profilerStore: this._profilerStore,
+      rootID,
+    });
+
+  invalidate() {
+    this._fiberCommits.clear();
+
+    invalidateCommitTrees();
+    invalidateFlamegraphChartData();
+    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 00000000000..c927b4d3dbf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+import * as React from 'react';
+import {createContext} from 'react';
+
+// TODO (cache) Remove this cache; it is outdated and will not work with newer APIs like startTransition.
+
+// Cache implementation was forked from the React repo:
+// https://github.com/facebook/react/blob/main/packages/react-cache/src/ReactCacheOld.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};
+
+export type Resource<Input, Key, Value> = {
+  clear(): void,
+  invalidate(Key): void,
+  read(Input): Value,
+  preload(Input): void,
+  write(Key, Value): void,
+};
+
+let readContext;
+if (typeof React.use === 'function') {
+  readContext = function (Context: ReactContext<null>) {
+    // eslint-disable-next-line react-hooks-published/rules-of-hooks
+    return React.use(Context);
+  };
+} else if (
+  typeof (React: any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ===
+  'object'
+) {
+  const ReactCurrentDispatcher = (React: any)
+    .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
+  readContext = function (Context: ReactContext<null>) {
+    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);
+  };
+} else {
+  throw new Error('react-cache: Unsupported React version');
+}
+
+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: Map<any, any> | WeakMap<any, any> = ((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,
+): Thenable<Value> {
+  const entriesForResource = getEntriesForResource(resource);
+  const entry = entriesForResource.get(key);
+  if (entry === undefined) {
+    const thenable = fetch(input);
+    thenable.then(
+      value => {
+        const fulfilledThenable: FulfilledThenable<Value> = (thenable: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      },
+      error => {
+        const rejectedThenable: RejectedThenable<Value> = (thenable: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = error;
+      },
+    );
+    entriesForResource.set(key, thenable);
+    return thenable;
+  } 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: Thenable<Value> = accessResult(resource, fetch, input, key);
+      if (typeof React.use === 'function') {
+        // eslint-disable-next-line react-hooks-published/rules-of-hooks
+        return React.use(result);
+      }
+
+      switch (result.status) {
+        case 'fulfilled': {
+          const value = result.value;
+          return value;
+        }
+        case 'rejected': {
+          const error = result.reason;
+          throw error;
+        }
+        default:
+          throw result;
+      }
+    },
+
+    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 fulfilledThenable: FulfilledThenable<Value> = (Promise.resolve(
+        value,
+      ): any);
+      fulfilledThenable.status = 'fulfilled';
+      fulfilledThenable.value = value;
+
+      entriesForResource.set(key, fulfilledThenable);
+    },
+  };
+
+  resourceConfigs.set(resource, config);
+
+  return resource;
+}
+
+export function invalidateResources(): void {
+  entries.clear();
+}
diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js
new file mode 100644
index 00000000000..d093a798bcd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/constants.js
@@ -0,0 +1,370 @@
+export const CHANGE_LOG_URL =
+  'https://github.com/facebook/react/blob/main/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';
+
+export const REACT_DEVTOOLS_WORKPLACE_URL =
+  'https://fburl.com/react-devtools-workplace-group';
+
+import type {
+  Theme,
+  DisplayDensity,
+} from './devtools/views/Settings/SettingsContext';
+
+export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
+  light: {
+    '--color-attribute-name': '#ef6632',
+    '--color-attribute-name-not-editable': '#23272f',
+    '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-attribute-value': '#1a1aa6',
+    '--color-attribute-value-inverted': '#ffffff',
+    '--color-attribute-editable-value': '#1a1aa6',
+    '--color-background': '#ffffff',
+    '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
+    '--color-background-inactive': '#e5e5e5',
+    '--color-background-invalid': '#fff0f0',
+    '--color-background-selected': '#0088fa',
+    '--color-button-background': '#ffffff',
+    '--color-button-background-focus': '#ededed',
+    '--color-button-background-hover': 'rgba(0, 0, 0, 0.2)',
+    '--color-button': '#5f6673',
+    '--color-button-disabled': '#cfd1d5',
+    '--color-button-active': '#0088fa',
+    '--color-button-focus': '#23272f',
+    '--color-button-hover': '#23272f',
+    '--color-border': '#eeeeee',
+    '--color-commit-did-not-render-fill': '#cfd1d5',
+    '--color-commit-did-not-render-fill-text': '#000000',
+    '--color-commit-did-not-render-pattern': '#cfd1d5',
+    '--color-commit-did-not-render-pattern-text': '#333333',
+    '--color-commit-gradient-0': '#37afa9',
+    '--color-commit-gradient-1': '#63b19e',
+    '--color-commit-gradient-2': '#80b393',
+    '--color-commit-gradient-3': '#97b488',
+    '--color-commit-gradient-4': '#abb67d',
+    '--color-commit-gradient-5': '#beb771',
+    '--color-commit-gradient-6': '#cfb965',
+    '--color-commit-gradient-7': '#dfba57',
+    '--color-commit-gradient-8': '#efbb49',
+    '--color-commit-gradient-9': '#febc38',
+    '--color-commit-gradient-text': '#000000',
+    '--color-component-name': '#6a51b2',
+    '--color-component-name-inverted': '#ffffff',
+    '--color-component-badge-background': '#e6e6e6',
+    '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
+    '--color-component-badge-count': '#777d88',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-console-error-badge-text': '#ffffff',
+    '--color-console-error-background': '#fff0f0',
+    '--color-console-error-border': '#ffd6d6',
+    '--color-console-error-icon': '#eb3941',
+    '--color-console-error-text': '#fe2e31',
+    '--color-console-warning-badge-text': '#000000',
+    '--color-console-warning-background': '#fffbe5',
+    '--color-console-warning-border': '#fff5c1',
+    '--color-console-warning-icon': '#f4bd00',
+    '--color-console-warning-text': '#64460c',
+    '--color-context-background': 'rgba(0,0,0,.9)',
+    '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
+    '--color-context-background-selected': '#178fb9',
+    '--color-context-border': '#3d424a',
+    '--color-context-text': '#ffffff',
+    '--color-context-text-selected': '#ffffff',
+    '--color-dim': '#777d88',
+    '--color-dimmer': '#cfd1d5',
+    '--color-dimmest': '#eff0f1',
+    '--color-error-background': 'hsl(0, 100%, 97%)',
+    '--color-error-border': 'hsl(0, 100%, 92%)',
+    '--color-error-text': '#ff0000',
+    '--color-expand-collapse-toggle': '#777d88',
+    '--color-forget-badge-background': '#2683e2',
+    '--color-forget-badge-background-inverted': '#1a6bbc',
+    '--color-forget-text': '#fff',
+    '--color-link': '#0000ff',
+    '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
+    '--color-bridge-version-npm-background': '#eff0f1',
+    '--color-bridge-version-npm-text': '#000000',
+    '--color-bridge-version-number': '#0088fa',
+    '--color-primitive-hook-badge-background': '#e5e5e5',
+    '--color-primitive-hook-badge-text': '#5f6673',
+    '--color-record-active': '#fc3a4b',
+    '--color-record-hover': '#3578e5',
+    '--color-record-inactive': '#0088fa',
+    '--color-resize-bar': '#eeeeee',
+    '--color-resize-bar-active': '#dcdcdc',
+    '--color-resize-bar-border': '#d1d1d1',
+    '--color-resize-bar-dot': '#333333',
+    '--color-timeline-internal-module': '#d1d1d1',
+    '--color-timeline-internal-module-hover': '#c9c9c9',
+    '--color-timeline-internal-module-text': '#444',
+    '--color-timeline-native-event': '#ccc',
+    '--color-timeline-native-event-hover': '#aaa',
+    '--color-timeline-network-primary': '#fcf3dc',
+    '--color-timeline-network-primary-hover': '#f0e7d1',
+    '--color-timeline-network-secondary': '#efc457',
+    '--color-timeline-network-secondary-hover': '#e3ba52',
+    '--color-timeline-priority-background': '#f6f6f6',
+    '--color-timeline-priority-border': '#eeeeee',
+    '--color-timeline-user-timing': '#c9cacd',
+    '--color-timeline-user-timing-hover': '#93959a',
+    '--color-timeline-react-idle': '#d3e5f6',
+    '--color-timeline-react-idle-hover': '#c3d9ef',
+    '--color-timeline-react-render': '#9fc3f3',
+    '--color-timeline-react-render-hover': '#83afe9',
+    '--color-timeline-react-render-text': '#11365e',
+    '--color-timeline-react-commit': '#c88ff0',
+    '--color-timeline-react-commit-hover': '#b281d6',
+    '--color-timeline-react-commit-text': '#3e2c4a',
+    '--color-timeline-react-layout-effects': '#b281d6',
+    '--color-timeline-react-layout-effects-hover': '#9d71bd',
+    '--color-timeline-react-layout-effects-text': '#3e2c4a',
+    '--color-timeline-react-passive-effects': '#b281d6',
+    '--color-timeline-react-passive-effects-hover': '#9d71bd',
+    '--color-timeline-react-passive-effects-text': '#3e2c4a',
+    '--color-timeline-react-schedule': '#9fc3f3',
+    '--color-timeline-react-schedule-hover': '#2683E2',
+    '--color-timeline-react-suspense-rejected': '#f1cc14',
+    '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
+    '--color-timeline-react-suspense-resolved': '#a6e59f',
+    '--color-timeline-react-suspense-resolved-hover': '#89d281',
+    '--color-timeline-react-suspense-unresolved': '#c9cacd',
+    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
+    '--color-timeline-thrown-error': '#ee1638',
+    '--color-timeline-thrown-error-hover': '#da1030',
+    '--color-timeline-text-color': '#000000',
+    '--color-timeline-text-dim-color': '#ccc',
+    '--color-timeline-react-work-border': '#eeeeee',
+    '--color-timebar-background': '#f6f6f6',
+    '--color-search-match': 'yellow',
+    '--color-search-match-current': '#f7923b',
+    '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
+    '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
+    '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
+    '--color-tab-selected-border': '#0088fa',
+    '--color-text': '#000000',
+    '--color-text-invalid': '#ff0000',
+    '--color-text-selected': '#ffffff',
+    '--color-toggle-background-invalid': '#fc3a4b',
+    '--color-toggle-background-on': '#0088fa',
+    '--color-toggle-background-off': '#cfd1d5',
+    '--color-toggle-text': '#ffffff',
+    '--color-warning-background': '#fb3655',
+    '--color-warning-background-hover': '#f82042',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#fd4d69',
+
+    '--color-suspense-default': '#0088fa',
+    '--color-transition-default': '#6a51b2',
+    '--color-suspense-server': '#62bc6a',
+    '--color-transition-server': '#3f7844',
+    '--color-suspense-other': '#f3ce49',
+    '--color-transition-other': '#917b2c',
+    '--color-suspense-errored': '#d57066',
+
+    // The styles below should be kept in sync with 'root.css'
+    // They are repeated there because they're used by e.g. tooltips or context menus
+    // which get rendered outside of the DOM subtree (where normal theme/styles are written).
+    '--color-scroll-thumb': '#c2c2c2',
+    '--color-scroll-track': '#fafafa',
+    '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
+    '--color-tooltip-text': '#ffffff',
+
+    '--elevation-4':
+      '0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)',
+  },
+  dark: {
+    '--color-attribute-name': '#9d87d2',
+    '--color-attribute-name-not-editable': '#ededed',
+    '--color-attribute-name-inverted': '#282828',
+    '--color-attribute-value': '#cedae0',
+    '--color-attribute-value-inverted': '#ffffff',
+    '--color-attribute-editable-value': 'yellow',
+    '--color-background': '#282c34',
+    '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
+    '--color-background-inactive': '#3d424a',
+    '--color-background-invalid': '#5c0000',
+    '--color-background-selected': '#178fb9',
+    '--color-button-background': '#282c34',
+    '--color-button-background-focus': '#3d424a',
+    '--color-button-background-hover': 'rgba(255, 255, 255, 0.2)',
+    '--color-button': '#afb3b9',
+    '--color-button-active': '#61dafb',
+    '--color-button-disabled': '#4f5766',
+    '--color-button-focus': '#a2e9fc',
+    '--color-button-hover': '#ededed',
+    '--color-border': '#3d424a',
+    '--color-commit-did-not-render-fill': '#777d88',
+    '--color-commit-did-not-render-fill-text': '#000000',
+    '--color-commit-did-not-render-pattern': '#666c77',
+    '--color-commit-did-not-render-pattern-text': '#ffffff',
+    '--color-commit-gradient-0': '#37afa9',
+    '--color-commit-gradient-1': '#63b19e',
+    '--color-commit-gradient-2': '#80b393',
+    '--color-commit-gradient-3': '#97b488',
+    '--color-commit-gradient-4': '#abb67d',
+    '--color-commit-gradient-5': '#beb771',
+    '--color-commit-gradient-6': '#cfb965',
+    '--color-commit-gradient-7': '#dfba57',
+    '--color-commit-gradient-8': '#efbb49',
+    '--color-commit-gradient-9': '#febc38',
+    '--color-commit-gradient-text': '#000000',
+    '--color-component-name': '#61dafb',
+    '--color-component-name-inverted': '#282828',
+    '--color-component-badge-background': '#5e6167',
+    '--color-component-badge-background-inverted': '#46494e',
+    '--color-component-badge-count': '#8f949d',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)',
+    '--color-console-error-badge-text': '#000000',
+    '--color-console-error-background': '#290000',
+    '--color-console-error-border': '#5c0000',
+    '--color-console-error-icon': '#eb3941',
+    '--color-console-error-text': '#fc7f7f',
+    '--color-console-warning-badge-text': '#000000',
+    '--color-console-warning-background': '#332b00',
+    '--color-console-warning-border': '#665500',
+    '--color-console-warning-icon': '#f4bd00',
+    '--color-console-warning-text': '#f5f2ed',
+    '--color-context-background': 'rgba(255,255,255,.95)',
+    '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
+    '--color-context-background-selected': '#0088fa',
+    '--color-context-border': '#eeeeee',
+    '--color-context-text': '#000000',
+    '--color-context-text-selected': '#ffffff',
+    '--color-dim': '#8f949d',
+    '--color-dimmer': '#777d88',
+    '--color-dimmest': '#4f5766',
+    '--color-error-background': '#200',
+    '--color-error-border': '#900',
+    '--color-error-text': '#f55',
+    '--color-expand-collapse-toggle': '#8f949d',
+    '--color-forget-badge-background': '#2683e2',
+    '--color-forget-badge-background-inverted': '#1a6bbc',
+    '--color-forget-text': '#fff',
+    '--color-link': '#61dafb',
+    '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
+    '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
+    '--color-bridge-version-npm-text': '#ffffff',
+    '--color-bridge-version-number': 'yellow',
+    '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
+    '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
+    '--color-record-active': '#fc3a4b',
+    '--color-record-hover': '#a2e9fc',
+    '--color-record-inactive': '#61dafb',
+    '--color-resize-bar': '#282c34',
+    '--color-resize-bar-active': '#31363f',
+    '--color-resize-bar-border': '#3d424a',
+    '--color-resize-bar-dot': '#cfd1d5',
+    '--color-timeline-internal-module': '#303542',
+    '--color-timeline-internal-module-hover': '#363b4a',
+    '--color-timeline-internal-module-text': '#7f8899',
+    '--color-timeline-native-event': '#b2b2b2',
+    '--color-timeline-native-event-hover': '#949494',
+    '--color-timeline-network-primary': '#fcf3dc',
+    '--color-timeline-network-primary-hover': '#e3dbc5',
+    '--color-timeline-network-secondary': '#efc457',
+    '--color-timeline-network-secondary-hover': '#d6af4d',
+    '--color-timeline-priority-background': '#1d2129',
+    '--color-timeline-priority-border': '#282c34',
+    '--color-timeline-user-timing': '#c9cacd',
+    '--color-timeline-user-timing-hover': '#93959a',
+    '--color-timeline-react-idle': '#3d485b',
+    '--color-timeline-react-idle-hover': '#465269',
+    '--color-timeline-react-render': '#2683E2',
+    '--color-timeline-react-render-hover': '#1a76d4',
+    '--color-timeline-react-render-text': '#11365e',
+    '--color-timeline-react-commit': '#731fad',
+    '--color-timeline-react-commit-hover': '#611b94',
+    '--color-timeline-react-commit-text': '#e5c1ff',
+    '--color-timeline-react-layout-effects': '#611b94',
+    '--color-timeline-react-layout-effects-hover': '#51167a',
+    '--color-timeline-react-layout-effects-text': '#e5c1ff',
+    '--color-timeline-react-passive-effects': '#611b94',
+    '--color-timeline-react-passive-effects-hover': '#51167a',
+    '--color-timeline-react-passive-effects-text': '#e5c1ff',
+    '--color-timeline-react-schedule': '#2683E2',
+    '--color-timeline-react-schedule-hover': '#1a76d4',
+    '--color-timeline-react-suspense-rejected': '#f1cc14',
+    '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
+    '--color-timeline-react-suspense-resolved': '#a6e59f',
+    '--color-timeline-react-suspense-resolved-hover': '#89d281',
+    '--color-timeline-react-suspense-unresolved': '#c9cacd',
+    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
+    '--color-timeline-thrown-error': '#fb3655',
+    '--color-timeline-thrown-error-hover': '#f82042',
+    '--color-timeline-text-color': '#282c34',
+    '--color-timeline-text-dim-color': '#555b66',
+    '--color-timeline-react-work-border': '#3d424a',
+    '--color-timebar-background': '#1d2129',
+    '--color-search-match': 'yellow',
+    '--color-search-match-current': '#f7923b',
+    '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
+    '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
+    '--color-scroll-caret': '#4f5766',
+    '--color-shadow': 'rgba(0, 0, 0, 0.5)',
+    '--color-tab-selected-border': '#178fb9',
+    '--color-text': '#ffffff',
+    '--color-text-invalid': '#ff8080',
+    '--color-text-selected': '#ffffff',
+    '--color-toggle-background-invalid': '#fc3a4b',
+    '--color-toggle-background-on': '#178fb9',
+    '--color-toggle-background-off': '#777d88',
+    '--color-toggle-text': '#ffffff',
+    '--color-warning-background': '#ee1638',
+    '--color-warning-background-hover': '#da1030',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#ee1638',
+
+    '--color-suspense-default': '#61dafb',
+    '--color-transition-default': '#6a51b2',
+    '--color-suspense-server': '#62bc6a',
+    '--color-transition-server': '#3f7844',
+    '--color-suspense-other': '#f3ce49',
+    '--color-transition-other': '#917b2c',
+    '--color-suspense-errored': '#d57066',
+
+    // The styles below should be kept in sync with 'root.css'
+    // They are repeated there because they're used by e.g. tooltips or context menus
+    // which get rendered outside of the DOM subtree (where normal theme/styles are written).
+    '--color-scroll-thumb': '#afb3b9',
+    '--color-scroll-track': '#313640',
+    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
+    '--color-tooltip-text': '#000000',
+
+    '--elevation-4':
+      '0 2px 8px 0 rgba(0,0,0,0.32),0 4px 12px 0 rgba(0,0,0,0.24),0 1px 10px 0 rgba(0,0,0,0.18)',
+  },
+  compact: {
+    '--font-size-monospace-small': '9px',
+    '--font-size-monospace-normal': '11px',
+    '--font-size-monospace-large': '15px',
+    '--font-size-sans-small': '10px',
+    '--font-size-sans-normal': '12px',
+    '--font-size-sans-large': '14px',
+    '--line-height-data': '18px',
+  },
+  comfortable: {
+    '--font-size-monospace-small': '10px',
+    '--font-size-monospace-normal': '13px',
+    '--font-size-monospace-large': '17px',
+    '--font-size-sans-small': '12px',
+    '--font-size-sans-normal': '14px',
+    '--font-size-sans-large': '16px',
+    '--line-height-data': '22px',
+  },
+};
+
+// HACK
+//
+// 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.
+const COMFORTABLE_LINE_HEIGHT: number = parseInt(
+  THEME_STYLES.comfortable['--line-height-data'],
+  10,
+);
+const COMPACT_LINE_HEIGHT: number = parseInt(
+  THEME_STYLES.compact['--line-height-data'],
+  10,
+);
+
+export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
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 00000000000..f9354410b30
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/index.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 00000000000..c48d5b42fb6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -0,0 +1,2473 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 EventEmitter from '../events';
+import {inspect} from 'util';
+import {
+  PROFILING_FLAG_BASIC_SUPPORT,
+  PROFILING_FLAG_TIMELINE_SUPPORT,
+  PROFILING_FLAG_PERFORMANCE_TRACKS_SUPPORT,
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_SET_SUBTREE_MODE,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
+  SUSPENSE_TREE_OPERATION_ADD,
+  SUSPENSE_TREE_OPERATION_REMOVE,
+  SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
+  SUSPENSE_TREE_OPERATION_RESIZE,
+  SUSPENSE_TREE_OPERATION_SUSPENDERS,
+} from '../constants';
+import {
+  ElementTypeRoot,
+  ElementTypeActivity,
+  ComponentFilterActivitySlice,
+} from '../frontend/types';
+import {
+  getSavedComponentFilters,
+  setSavedComponentFilters,
+  shallowDiffers,
+  utfDecodeStringWithRanges,
+  parseElementDisplayNameFromBackend,
+  unionOfTwoArrays,
+} from '../utils';
+import {localStorageGetItem, localStorageSetItem} from '../storage';
+import {__DEBUG__} from '../constants';
+import {printStore} from './utils';
+import ProfilerStore from './ProfilerStore';
+import {
+  BRIDGE_PROTOCOL,
+  currentBridgeProtocol,
+} from 'react-devtools-shared/src/bridge';
+import {StrictMode} from 'react-devtools-shared/src/frontend/types';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import type {
+  Element,
+  ComponentFilter,
+  ElementType,
+  SuspenseNode,
+  SuspenseTimelineStep,
+  Rect,
+} from 'react-devtools-shared/src/frontend/types';
+import type {
+  FrontendBridge,
+  BridgeProtocol,
+} from 'react-devtools-shared/src/bridge';
+import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError';
+import type {DevToolsHookSettings} from '../backend/types';
+
+import RBush from 'rbush';
+
+// Custom version which works with our Rect data structure.
+class RectRBush extends RBush<Rect> {
+  toBBox(rect: Rect): {
+    minX: number,
+    minY: number,
+    maxX: number,
+    maxY: number,
+  } {
+    return {
+      minX: rect.x,
+      minY: rect.y,
+      maxX: rect.x + rect.width,
+      maxY: rect.y + rect.height,
+    };
+  }
+  compareMinX(a: Rect, b: Rect): number {
+    return a.x - b.x;
+  }
+  compareMinY(a: Rect, b: Rect): number {
+    return a.y - b.y;
+  }
+}
+
+const debug = (methodName: string, ...args: Array<string>) => {
+  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 ErrorAndWarningTuples = Array<{id: number, index: number}>;
+
+export type Config = {
+  checkBridgeProtocolCompatibility?: boolean,
+  isProfiling?: boolean,
+  supportsInspectMatchingDOMElement?: boolean,
+  supportsClickToInspect?: boolean,
+  supportsReloadAndProfile?: boolean,
+  supportsTimeline?: boolean,
+  supportsTraceUpdates?: boolean,
+};
+
+const ADVANCED_PROFILING_NONE = 0;
+const ADVANCED_PROFILING_TIMELINE = 1;
+const ADVANCED_PROFILING_PERFORMANCE_TRACKS = 2;
+type AdvancedProfiling = 0 | 1 | 2;
+
+export type Capabilities = {
+  supportsBasicProfiling: boolean,
+  hasOwnerMetadata: boolean,
+  supportsStrictMode: boolean,
+  supportsAdvancedProfiling: AdvancedProfiling,
+};
+
+function isNonZeroRect(rect: Rect) {
+  return rect.width > 0 || rect.height > 0 || rect.x > 0 || rect.y > 0;
+}
+
+/**
+ * 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<{
+  backendVersion: [],
+  collapseNodesByDefault: [],
+  componentFilters: [],
+  enableSuspenseTab: [],
+  error: [Error],
+  hookSettings: [$ReadOnly<DevToolsHookSettings>],
+  hostInstanceSelected: [Element['id'] | null],
+  settingsUpdated: [$ReadOnly<DevToolsHookSettings>],
+  mutated: [
+    [
+      Array<Element['id']>,
+      Map<Element['id'], Element['id']>,
+      Element['id'] | null,
+    ],
+  ],
+  recordChangeDescriptions: [],
+  roots: [],
+  rootSupportsBasicProfiling: [],
+  rootSupportsTimelineProfiling: [],
+  rootSupportsPerformanceTracks: [],
+  suspenseTreeMutated: [[Map<SuspenseNode['id'], SuspenseNode['id']>]],
+  supportsNativeStyleEditor: [],
+  supportsReloadAndProfile: [],
+  unsupportedBridgeProtocolDetected: [],
+  unsupportedRendererVersionDetected: [],
+}> {
+  // If the backend version is new enough to report its (NPM) version, this is it.
+  // This version may be displayed by the frontend for debugging purposes.
+  _backendVersion: string | null = null;
+
+  _bridge: FrontendBridge;
+
+  // Computed whenever _errorsAndWarnings Map changes.
+  _cachedComponentWithErrorCount: number = 0;
+  _cachedComponentWithWarningCount: number = 0;
+  _cachedErrorAndWarningTuples: ErrorAndWarningTuples | null = null;
+
+  // Should new nodes be collapsed by default when added to the tree?
+  _collapseNodesByDefault: boolean = true;
+
+  _componentFilters: Array<ComponentFilter>;
+
+  // Map of ID to number of recorded error and warning message IDs.
+  _errorsAndWarnings: Map<
+    Element['id'],
+    {errorCount: number, warningCount: number},
+  > = new Map();
+
+  _focusedTransition: 0 | Element['id'] = 0;
+
+  // 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 InspectedElement Suspense cache also relies on this mutability for its WeakMap usage.
+  _idToElement: Map<Element['id'], Element> = new Map();
+
+  _idToSuspense: Map<SuspenseNode['id'], SuspenseNode> = new Map();
+
+  // Should the React Native style editor panel be shown?
+  _isNativeStyleEditorSupported: boolean = false;
+
+  _nativeStyleEditorValidAttributes: $ReadOnlyArray<string> | null = null;
+
+  // Older backends don't support an explicit bridge protocol,
+  // so we should timeout eventually and show a downgrade message.
+  _onBridgeProtocolTimeoutID: TimeoutID | 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<Element['id'], Set<Element['id']>> = 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;
+  _revisionSuspense: number = 0;
+
+  // This Array must be treated as immutable!
+  // Passive effects will check it for changes between render and mount.
+  _roots: $ReadOnlyArray<Element['id']> = [];
+
+  _rootIDToCapabilities: Map<Element['id'], Capabilities> = new Map();
+
+  // Renderer ID is needed to support inspection fiber props, state, and hooks.
+  _rootIDToRendererID: Map<Element['id'], number> = new Map();
+
+  // Stores all the SuspenseNode rects in an R-tree to make it fast to find overlaps.
+  _rtree: RBush<Rect> = new RectRBush();
+
+  // These options may be initially set by a configuration option when constructing the Store.
+  _supportsInspectMatchingDOMElement: boolean = false;
+  _supportsClickToInspect: boolean = false;
+  _supportsTimeline: boolean = false;
+  _supportsTraceUpdates: boolean = false;
+  // Dynamically set if the renderer supports the Suspense tab.
+  _supportsSuspenseTab: boolean = false;
+
+  _isReloadAndProfileFrontendSupported: boolean = false;
+  _isReloadAndProfileBackendSupported: boolean = false;
+
+  // These options default to false but may be updated as roots are added and removed.
+  _rootSupportsBasicProfiling: boolean = false;
+  _rootSupportsTimelineProfiling: boolean = false;
+  _rootSupportsPerformanceTracks: boolean = false;
+
+  _bridgeProtocol: BridgeProtocol | null = null;
+  _unsupportedBridgeProtocolDetected: boolean = false;
+  _unsupportedRendererVersionDetected: boolean = false;
+
+  // Total number of visible elements (within all roots).
+  // Used for windowing purposes.
+  _weightAcrossRoots: number = 0;
+
+  _shouldCheckBridgeProtocolCompatibility: boolean = false;
+  _hookSettings: $ReadOnly<DevToolsHookSettings> | null = null;
+  _shouldShowWarningsAndErrors: boolean = false;
+
+  // Only used in browser extension for synchronization with built-in Elements panel.
+  _lastSelectedHostInstanceElementId: Element['id'] | null = null;
+
+  // Maximum recorded node depth during the lifetime of this Store.
+  // Can only increase: not guaranteed to return maximal value for currently recorded elements.
+  _maximumRecordedDepth = 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 {
+        supportsInspectMatchingDOMElement,
+        supportsClickToInspect,
+        supportsReloadAndProfile,
+        supportsTimeline,
+        supportsTraceUpdates,
+        checkBridgeProtocolCompatibility,
+      } = config;
+      if (supportsInspectMatchingDOMElement) {
+        this._supportsInspectMatchingDOMElement = true;
+      }
+      if (supportsClickToInspect) {
+        this._supportsClickToInspect = true;
+      }
+      if (supportsReloadAndProfile) {
+        this._isReloadAndProfileFrontendSupported = true;
+      }
+      if (supportsTimeline) {
+        this._supportsTimeline = true;
+      }
+      if (supportsTraceUpdates) {
+        this._supportsTraceUpdates = true;
+      }
+      if (checkBridgeProtocolCompatibility) {
+        this._shouldCheckBridgeProtocolCompatibility = true;
+      }
+    }
+
+    this._bridge = bridge;
+    bridge.addListener('operations', this.onBridgeOperations);
+    bridge.addListener(
+      'overrideComponentFilters',
+      this.onBridgeOverrideComponentFilters,
+    );
+    bridge.addListener('shutdown', this.onBridgeShutdown);
+    bridge.addListener(
+      'isReloadAndProfileSupportedByBackend',
+      this.onBackendReloadAndProfileSupported,
+    );
+    bridge.addListener(
+      'isNativeStyleEditorSupported',
+      this.onBridgeNativeStyleEditorSupported,
+    );
+    bridge.addListener(
+      'unsupportedRendererVersion',
+      this.onBridgeUnsupportedRendererVersion,
+    );
+
+    this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
+
+    bridge.addListener('backendVersion', this.onBridgeBackendVersion);
+    bridge.addListener('saveToClipboard', this.onSaveToClipboard);
+    bridge.addListener('hookSettings', this.onHookSettings);
+    bridge.addListener('backendInitialized', this.onBackendInitialized);
+    bridge.addListener('selectElement', this.onHostInstanceSelected);
+    bridge.addListener('enableSuspenseTab', this.onEnableSuspenseTab);
+  }
+
+  // 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) {
+      this._throwAndEmitError(
+        Error(
+          `Expected ${mapName} to contain ${expectedSize} items, but it contains ${
+            map.size
+          } items\n\n${inspect(map, {
+            depth: 20,
+          })}`,
+        ),
+      );
+    }
+  }
+
+  get backendVersion(): string | null {
+    return this._backendVersion;
+  }
+
+  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.isProfilingBasedOnUserInput) {
+      // 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.
+      this._throwAndEmitError(
+        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.
+    setSavedComponentFilters(value);
+
+    // Notify the renderer that filter preferences have changed.
+    // This is an expensive operation; 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 bridgeProtocol(): BridgeProtocol | null {
+    return this._bridgeProtocol;
+  }
+
+  get componentWithErrorCount(): number {
+    if (!this._shouldShowWarningsAndErrors) {
+      return 0;
+    }
+
+    return this._cachedComponentWithErrorCount;
+  }
+
+  get componentWithWarningCount(): number {
+    if (!this._shouldShowWarningsAndErrors) {
+      return 0;
+    }
+
+    return this._cachedComponentWithWarningCount;
+  }
+
+  get displayingErrorsAndWarningsEnabled(): boolean {
+    return this._shouldShowWarningsAndErrors;
+  }
+
+  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 revisionSuspense(): number {
+    return this._revisionSuspense;
+  }
+
+  get rootIDToRendererID(): Map<number, number> {
+    return this._rootIDToRendererID;
+  }
+
+  get roots(): $ReadOnlyArray<number> {
+    return this._roots;
+  }
+
+  // At least one of the currently mounted roots support the Legacy profiler.
+  get rootSupportsBasicProfiling(): boolean {
+    return this._rootSupportsBasicProfiling;
+  }
+
+  // At least one of the currently mounted roots support the Timeline profiler.
+  get rootSupportsTimelineProfiling(): boolean {
+    return this._rootSupportsTimelineProfiling;
+  }
+
+  // At least one of the currently mounted roots support performance tracks.
+  get rootSupportsPerformanceTracks(): boolean {
+    return this._rootSupportsPerformanceTracks;
+  }
+
+  get supportsInspectMatchingDOMElement(): boolean {
+    return this._supportsInspectMatchingDOMElement;
+  }
+
+  get supportsClickToInspect(): boolean {
+    return this._supportsClickToInspect;
+  }
+
+  get supportsNativeStyleEditor(): boolean {
+    return this._isNativeStyleEditorSupported;
+  }
+
+  get supportsReloadAndProfile(): boolean {
+    return (
+      this._isReloadAndProfileFrontendSupported &&
+      this._isReloadAndProfileBackendSupported
+    );
+  }
+
+  // This build of DevTools supports the Timeline profiler.
+  // This is a static flag, controlled by the Store config.
+  get supportsTimeline(): boolean {
+    return this._supportsTimeline;
+  }
+
+  get supportsTraceUpdates(): boolean {
+    return this._supportsTraceUpdates;
+  }
+
+  get unsupportedBridgeProtocolDetected(): boolean {
+    return this._unsupportedBridgeProtocolDetected;
+  }
+
+  get unsupportedRendererVersionDetected(): boolean {
+    return this._unsupportedRendererVersionDetected;
+  }
+
+  get lastSelectedHostInstanceElementId(): Element['id'] | null {
+    return this._lastSelectedHostInstanceElementId;
+  }
+
+  containsElement(id: number): boolean {
+    return this._idToElement.has(id);
+  }
+
+  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 which root this element is in...
+    let root;
+    let rootWeight = 0;
+    for (let i = 0; i < this._roots.length; i++) {
+      const rootID = this._roots[i];
+      root = this._idToElement.get(rootID);
+
+      if (root === undefined) {
+        this._throwAndEmitError(
+          Error(
+            `Couldn't find root with id "${rootID}": no matching node was found in the Store.`,
+          ),
+        );
+
+        return null;
+      }
+
+      if (root.children.length === 0) {
+        continue;
+      }
+
+      if (rootWeight + root.weight > index) {
+        break;
+      } else {
+        rootWeight += root.weight;
+      }
+    }
+
+    if (root === undefined) {
+      return null;
+    }
+
+    // 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: Element = root;
+    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);
+
+        if (child === undefined) {
+          this._throwAndEmitError(
+            Error(
+              `Couldn't child element with id "${childID}": no matching node was found in the Store.`,
+            ),
+          );
+
+          return null;
+        }
+
+        const childWeight = child.isCollapsed ? 1 : child.weight;
+
+        if (index <= currentWeight + childWeight) {
+          currentWeight++;
+          currentElement = child;
+          break;
+        } else {
+          currentWeight += childWeight;
+        }
+      }
+    }
+
+    return currentElement || null;
+  }
+
+  getElementIDAtIndex(index: number): number | null {
+    const element = this.getElementAtIndex(index);
+    return element === null ? null : element.id;
+  }
+
+  getElementByID(id: number): Element | null {
+    const element = this._idToElement.get(id);
+    if (element === undefined) {
+      console.warn(`No element found with id "${id}"`);
+      return null;
+    }
+
+    return element;
+  }
+
+  containsSuspense(id: SuspenseNode['id']): boolean {
+    return this._idToSuspense.has(id);
+  }
+
+  getSuspenseByID(id: SuspenseNode['id']): SuspenseNode | null {
+    const suspense = this._idToSuspense.get(id);
+    if (suspense === undefined) {
+      console.warn(`No suspense found with id "${id}"`);
+      return null;
+    }
+
+    return suspense;
+  }
+
+  // Returns a tuple of [id, index]
+  getElementsWithErrorsAndWarnings(): ErrorAndWarningTuples {
+    if (!this._shouldShowWarningsAndErrors) {
+      return [];
+    }
+
+    if (this._cachedErrorAndWarningTuples !== null) {
+      return this._cachedErrorAndWarningTuples;
+    }
+
+    const errorAndWarningTuples: ErrorAndWarningTuples = [];
+
+    this._errorsAndWarnings.forEach((_, id) => {
+      const index = this.getIndexOfElementID(id);
+      if (index !== null) {
+        let low = 0;
+        let high = errorAndWarningTuples.length;
+        while (low < high) {
+          const mid = (low + high) >> 1;
+          if (errorAndWarningTuples[mid].index > index) {
+            high = mid;
+          } else {
+            low = mid + 1;
+          }
+        }
+
+        errorAndWarningTuples.splice(low, 0, {id, index});
+      }
+    });
+
+    // Cache for later (at least until the tree changes again).
+    this._cachedErrorAndWarningTuples = errorAndWarningTuples;
+    return errorAndWarningTuples;
+  }
+
+  getErrorAndWarningCountForElementID(id: number): {
+    errorCount: number,
+    warningCount: number,
+  } {
+    if (!this._shouldShowWarningsAndErrors) {
+      return {errorCount: 0, warningCount: 0};
+    }
+
+    return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0};
+  }
+
+  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);
+      if (current === undefined) {
+        return null;
+      }
+
+      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);
+        if (child === undefined) {
+          return null;
+        }
+
+        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);
+      if (root === undefined) {
+        return null;
+      }
+
+      index += root.weight;
+    }
+
+    return index;
+  }
+
+  isDescendantOf(parentId: number, descendantId: number): boolean {
+    if (descendantId === 0) {
+      return false;
+    }
+
+    const descendant = this.getElementByID(descendantId);
+    if (descendant === null) {
+      return false;
+    }
+
+    if (descendant.parentID === parentId) {
+      return true;
+    }
+
+    const parent = this.getElementByID(parentId);
+    if (!parent || parent.depth >= descendant.depth) {
+      return false;
+    }
+
+    return this.isDescendantOf(parentId, descendant.parentID);
+  }
+
+  /**
+   * Returns index of the lowest descendant element, if available.
+   * May not be the deepest element, the lowest is used in a sense of bottom-most from UI Tree representation perspective.
+   */
+  getIndexOfLowestDescendantElement(element: Element): number | null {
+    let current: null | Element = element;
+    while (current !== null) {
+      if (current.isCollapsed || current.children.length === 0) {
+        if (current === element) {
+          return null;
+        }
+
+        return this.getIndexOfElementID(current.id);
+      } else {
+        const lastChildID = current.children[current.children.length - 1];
+        current = this.getElementByID(lastChildID);
+      }
+    }
+
+    return null;
+  }
+
+  getOwnersListForElement(ownerID: number): Array<Element> {
+    const list: Array<Element> = [];
+    const element = this._idToElement.get(ownerID);
+    if (element !== undefined) {
+      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) || 0) -
+            (this.getIndexOfElementID(idB) || 0),
+        );
+
+        // 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 !== undefined) {
+            let parentID = innerElement.parentID;
+
+            let depth = 0;
+            while (parentID > 0) {
+              if (parentID === ownerID || unsortedIDs.has(parentID)) {
+                // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+                depth = depthMap.get(parentID) + 1;
+                depthMap.set(id, depth);
+                break;
+              }
+              const parent = this._idToElement.get(parentID);
+              if (parent === undefined) {
+                break;
+              }
+              parentID = parent.parentID;
+            }
+
+            if (depth === 0) {
+              this._throwAndEmitError(Error('Invalid owners list'));
+            }
+
+            list.push({...innerElement, depth});
+          }
+        });
+      }
+    }
+
+    return list;
+  }
+
+  getSuspenseLineage(
+    suspenseID: SuspenseNode['id'],
+  ): $ReadOnlyArray<SuspenseNode['id']> {
+    const lineage: Array<SuspenseNode['id']> = [];
+    let next: null | SuspenseNode = this.getSuspenseByID(suspenseID);
+    while (next !== null) {
+      if (next.parentID === 0) {
+        next = null;
+      } else {
+        lineage.unshift(next.id);
+        next = this.getSuspenseByID(next.parentID);
+      }
+    }
+
+    return lineage;
+  }
+
+  /**
+   * Like {@link getRootIDForElement} but should be used for traversing Suspense since it works with disconnected nodes.
+   */
+  getSuspenseRootIDForSuspense(id: SuspenseNode['id']): number | null {
+    let current = this._idToSuspense.get(id);
+    while (current !== undefined) {
+      if (current.parentID === 0) {
+        return current.id;
+      } else {
+        current = this._idToSuspense.get(current.parentID);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders
+   */
+  getSuspendableDocumentOrderSuspenseInitialPaint(
+    uniqueSuspendersOnly: boolean,
+  ): Array<SuspenseTimelineStep> {
+    const target: Array<SuspenseTimelineStep> = [];
+    const roots = this.roots;
+    let rootStep: null | SuspenseTimelineStep = null;
+    for (let i = 0; i < roots.length; i++) {
+      const rootID = roots[i];
+      const root = this.getElementByID(rootID);
+      if (root === null) {
+        continue;
+      }
+      // TODO: This includes boundaries that can't be suspended due to no support from the renderer.
+
+      const suspense = this.getSuspenseByID(rootID);
+      if (suspense !== null) {
+        const environments = suspense.environments;
+        const environmentName =
+          environments.length > 0
+            ? environments[environments.length - 1]
+            : null;
+        if (rootStep === null) {
+          // Arbitrarily use the first root as the root step id.
+          rootStep = {
+            id: suspense.id,
+            environment: environmentName,
+            endTime: suspense.endTime,
+          };
+          target.push(rootStep);
+        } else {
+          if (rootStep.environment === null) {
+            // If any root has an environment name, then let's use it.
+            rootStep.environment = environmentName;
+          }
+          if (suspense.endTime > rootStep.endTime) {
+            // If any root has a higher end time, let's use that.
+            rootStep.endTime = suspense.endTime;
+          }
+        }
+        this.pushTimelineStepsInDocumentOrder(
+          suspense.children,
+          target,
+          uniqueSuspendersOnly,
+          environments,
+          0, // Don't pass a minimum end time at the root. The root is always first so doesn't matter.
+        );
+      }
+    }
+
+    return target;
+  }
+
+  _pushSuspenseChildrenInDocumentOrder(
+    children: Array<Element['id']>,
+    target: Array<SuspenseNode['id']>,
+  ): void {
+    for (let i = 0; i < children.length; i++) {
+      const childID = children[i];
+      const suspense = this.getSuspenseByID(childID);
+      if (suspense !== null) {
+        target.push(suspense.id);
+      } else {
+        const childElement = this.getElementByID(childID);
+        if (childElement !== null) {
+          this._pushSuspenseChildrenInDocumentOrder(
+            childElement.children,
+            target,
+          );
+        }
+      }
+    }
+  }
+
+  getSuspenseChildren(id: Element['id']): Array<SuspenseNode['id']> {
+    const transitionChildren: Array<SuspenseNode['id']> = [];
+
+    const root = this._idToElement.get(id);
+    if (root === undefined) {
+      return transitionChildren;
+    }
+
+    this._pushSuspenseChildrenInDocumentOrder(
+      root.children,
+      transitionChildren,
+    );
+
+    return transitionChildren;
+  }
+
+  /**
+   * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders
+   */
+  getSuspendableDocumentOrderSuspenseTransition(
+    uniqueSuspendersOnly: boolean,
+  ): Array<SuspenseTimelineStep> {
+    const target: Array<SuspenseTimelineStep> = [];
+    const focusedTransitionID = this._focusedTransition;
+    if (focusedTransitionID === null) {
+      return target;
+    }
+
+    target.push({
+      id: focusedTransitionID,
+      // TODO: Get environment for Activity
+      environment: null,
+      endTime: 0,
+    });
+
+    const transitionChildren = this.getSuspenseChildren(focusedTransitionID);
+
+    this.pushTimelineStepsInDocumentOrder(
+      transitionChildren,
+      target,
+      uniqueSuspendersOnly,
+      // TODO: Get environment for Activity
+      [],
+      0, // Don't pass a minimum end time at the root. The root is always first so doesn't matter.
+    );
+
+    return target;
+  }
+
+  pushTimelineStepsInDocumentOrder(
+    children: Array<SuspenseNode['id']>,
+    target: Array<SuspenseTimelineStep>,
+    uniqueSuspendersOnly: boolean,
+    parentEnvironments: Array<string>,
+    parentEndTime: number,
+  ): void {
+    for (let i = 0; i < children.length; i++) {
+      const child = this.getSuspenseByID(children[i]);
+      if (child === null) {
+        continue;
+      }
+      // Ignore any suspense boundaries that has no visual representation as this is not
+      // part of the visible loading sequence.
+      // TODO: Consider making visible meta data and other side-effects get virtual rects.
+      const hasRects =
+        child.rects !== null &&
+        child.rects.length > 0 &&
+        child.rects.some(isNonZeroRect);
+      const childEnvironments = child.environments;
+      // Since children are blocked on the parent, they're also blocked by the parent environments.
+      // Only if we discover a novel environment do we add that and it becomes the name we use.
+      const unionEnvironments = unionOfTwoArrays(
+        parentEnvironments,
+        childEnvironments,
+      );
+      const environmentName =
+        unionEnvironments.length > 0
+          ? unionEnvironments[unionEnvironments.length - 1]
+          : null;
+      // The end time of a child boundary can in effect never be earlier than its parent even if
+      // everything unsuspended before that.
+      const maxEndTime =
+        parentEndTime > child.endTime ? parentEndTime : child.endTime;
+      if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) {
+        target.push({
+          id: child.id,
+          environment: environmentName,
+          endTime: maxEndTime,
+        });
+      }
+      this.pushTimelineStepsInDocumentOrder(
+        child.children,
+        target,
+        uniqueSuspendersOnly,
+        unionEnvironments,
+        maxEndTime,
+      );
+    }
+  }
+
+  getEndTimeOrDocumentOrderSuspense(
+    uniqueSuspendersOnly: boolean,
+  ): $ReadOnlyArray<SuspenseTimelineStep> {
+    const timeline =
+      this._focusedTransition === 0
+        ? this.getSuspendableDocumentOrderSuspenseInitialPaint(
+            uniqueSuspendersOnly,
+          )
+        : this.getSuspendableDocumentOrderSuspenseTransition(
+            uniqueSuspendersOnly,
+          );
+
+    if (timeline.length === 0) {
+      return timeline;
+    }
+    const root = timeline[0];
+    // We mutate in place since we assume we've got a fresh array.
+    timeline.sort((a, b) => {
+      // Root is always first
+      return a === root ? -1 : b === root ? 1 : a.endTime - b.endTime;
+    });
+    return timeline;
+  }
+
+  getActivities(): Array<{id: Element['id'], depth: number}> {
+    const target: Array<{id: Element['id'], depth: number}> = [];
+    // TODO: Keep a live tree in the backend so we don't need to recalculate
+    // this each time while also including filtered Activities.
+    this._pushActivitiesInDocumentOrder(this.roots, target, 0);
+    return target;
+  }
+
+  _pushActivitiesInDocumentOrder(
+    children: $ReadOnlyArray<Element['id']>,
+    target: Array<{id: Element['id'], depth: number}>,
+    depth: number,
+  ): void {
+    for (let i = 0; i < children.length; i++) {
+      const child = this._idToElement.get(children[i]);
+      if (child === undefined) {
+        continue;
+      }
+      if (child.type === ElementTypeActivity && child.nameProp !== null) {
+        target.push({id: child.id, depth});
+        this._pushActivitiesInDocumentOrder(child.children, target, depth + 1);
+      } else {
+        this._pushActivitiesInDocumentOrder(child.children, target, depth);
+      }
+    }
+  }
+
+  getRendererIDForElement(id: number): number | null {
+    let current = this._idToElement.get(id);
+    while (current !== undefined) {
+      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 !== undefined) {
+      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) {
+          this._throwAndEmitError(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);
+          while (parentElement !== undefined) {
+            // 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 = 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);
+            while (parentElement !== undefined) {
+              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(), null]);
+      }
+    }
+  }
+
+  _adjustParentTreeWeight: (
+    parentElement: ?Element,
+    weightDelta: number,
+  ) => void = (parentElement, weightDelta) => {
+    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);
+    }
+
+    // Additions and deletions within a collapsed subtree should not affect the overall number of elements.
+    if (!isInsideCollapsedSubTree) {
+      this._weightAcrossRoots += weightDelta;
+    }
+  };
+
+  _recursivelyUpdateSubtree(
+    id: number,
+    callback: (element: Element) => void,
+  ): void {
+    const element = this._idToElement.get(id);
+    if (element) {
+      callback(element);
+
+      element.children.forEach(child =>
+        this._recursivelyUpdateSubtree(child, callback),
+      );
+    }
+  }
+
+  onBridgeNativeStyleEditorSupported: ({
+    isSupported: boolean,
+    validAttributes: ?$ReadOnlyArray<string>,
+  }) => void = ({isSupported, validAttributes}) => {
+    this._isNativeStyleEditorSupported = isSupported;
+    this._nativeStyleEditorValidAttributes = validAttributes || null;
+
+    this.emit('supportsNativeStyleEditor');
+  };
+
+  onBridgeOperations: (operations: Array<number>) => void = operations => {
+    if (__DEBUG__) {
+      console.groupCollapsed('onBridgeOperations');
+      debug('onBridgeOperations', operations.join(','));
+    }
+
+    let haveRootsChanged = false;
+    let haveErrorsOrWarningsChanged = false;
+    let hasSuspenseTreeChanged = 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:
+    // We'll use the parent ID to adjust selection if it gets deleted.
+    const removedElementIDs: Map<number, number> = new Map();
+    const removedSuspenseIDs: Map<SuspenseNode['id'], SuspenseNode['id']> =
+      new Map();
+    let nextActivitySliceID: Element['id'] | null = null;
+
+    let i = 2;
+
+    // Reassemble the string table.
+    const stringTable: Array<string | null> = [
+      null, // ID = 0 corresponds to the null string.
+    ];
+    const stringTableSize = operations[i];
+    i++;
+
+    const stringTableEnd = i + stringTableSize;
+
+    while (i < stringTableEnd) {
+      const nextLength = operations[i];
+      i++;
+
+      const nextString = utfDecodeStringWithRanges(
+        operations,
+        i,
+        i + nextLength - 1,
+      );
+      stringTable.push(nextString);
+      i += nextLength;
+    }
+
+    while (i < operations.length) {
+      const operation = operations[i];
+      switch (operation) {
+        case TREE_OPERATION_ADD: {
+          const id = operations[i + 1];
+          const type = ((operations[i + 2]: any): ElementType);
+
+          i += 3;
+
+          if (this._idToElement.has(id)) {
+            this._throwAndEmitError(
+              Error(
+                `Cannot add node "${id}" because a node with that id is already in the Store.`,
+              ),
+            );
+          }
+
+          if (type === ElementTypeRoot) {
+            if (__DEBUG__) {
+              debug('Add', `new root node ${id}`);
+            }
+
+            const isStrictModeCompliant = operations[i] > 0;
+            i++;
+
+            const profilerFlags = operations[i++];
+            const supportsBasicProfiling =
+              (profilerFlags & PROFILING_FLAG_BASIC_SUPPORT) !== 0;
+            const supportsTimeline =
+              (profilerFlags & PROFILING_FLAG_TIMELINE_SUPPORT) !== 0;
+            const supportsPerformanceTracks =
+              (profilerFlags & PROFILING_FLAG_PERFORMANCE_TRACKS_SUPPORT) !== 0;
+            let supportsAdvancedProfiling: AdvancedProfiling =
+              ADVANCED_PROFILING_NONE;
+            if (supportsPerformanceTracks) {
+              supportsAdvancedProfiling = ADVANCED_PROFILING_PERFORMANCE_TRACKS;
+            } else if (supportsTimeline) {
+              supportsAdvancedProfiling = ADVANCED_PROFILING_TIMELINE;
+            }
+
+            let supportsStrictMode = false;
+            let hasOwnerMetadata = false;
+
+            // If we don't know the bridge protocol, guess that we're dealing with the latest.
+            // If we do know it, we can take it into consideration when parsing operations.
+            if (
+              this._bridgeProtocol === null ||
+              this._bridgeProtocol.version >= 2
+            ) {
+              supportsStrictMode = operations[i] > 0;
+              i++;
+
+              hasOwnerMetadata = operations[i] > 0;
+              i++;
+            }
+
+            this._roots = this._roots.concat(id);
+            this._rootIDToRendererID.set(id, rendererID);
+            this._rootIDToCapabilities.set(id, {
+              supportsBasicProfiling,
+              hasOwnerMetadata,
+              supportsStrictMode,
+              supportsAdvancedProfiling,
+            });
+
+            // Not all roots support StrictMode;
+            // don't flag a root as non-compliant unless it also supports StrictMode.
+            const isStrictModeNonCompliant =
+              !isStrictModeCompliant && supportsStrictMode;
+
+            this._idToElement.set(id, {
+              children: [],
+              depth: -1,
+              displayName: null,
+              hocDisplayNames: null,
+              id,
+              isCollapsed: false, // Never collapse roots; it would hide the entire tree.
+              isStrictModeNonCompliant,
+              key: null,
+              nameProp: null,
+              ownerID: 0,
+              parentID: 0,
+              type,
+              weight: 0,
+              compiledWithForget: false,
+            });
+
+            haveRootsChanged = true;
+          } else {
+            const parentID = operations[i];
+            i++;
+
+            const ownerID = operations[i];
+            i++;
+
+            const displayNameStringID = operations[i];
+            const displayName = stringTable[displayNameStringID];
+            i++;
+
+            const keyStringID = operations[i];
+            const key = stringTable[keyStringID];
+            i++;
+
+            const namePropStringID = operations[i];
+            const nameProp = stringTable[namePropStringID];
+            i++;
+
+            if (__DEBUG__) {
+              debug(
+                'Add',
+                `node ${id} (${displayName || 'null'}) as child of ${parentID}`,
+              );
+            }
+
+            const parentElement = this._idToElement.get(parentID);
+            if (parentElement === undefined) {
+              this._throwAndEmitError(
+                Error(
+                  `Cannot add child "${id}" to parent "${parentID}" because parent node was not found in the Store.`,
+                ),
+              );
+
+              break;
+            }
+
+            parentElement.children.push(id);
+
+            const {
+              formattedDisplayName: displayNameWithoutHOCs,
+              hocDisplayNames,
+              compiledWithForget,
+            } = parseElementDisplayNameFromBackend(displayName, type);
+
+            const elementDepth = parentElement.depth + 1;
+            this._maximumRecordedDepth = Math.max(
+              this._maximumRecordedDepth,
+              elementDepth,
+            );
+
+            const element: Element = {
+              children: [],
+              depth: elementDepth,
+              displayName: displayNameWithoutHOCs,
+              hocDisplayNames,
+              id,
+              isCollapsed: this._collapseNodesByDefault,
+              isStrictModeNonCompliant: parentElement.isStrictModeNonCompliant,
+              key,
+              nameProp,
+              ownerID,
+              parentID,
+              type,
+              weight: 1,
+              compiledWithForget,
+            };
+
+            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);
+            }
+
+            const suspense = this._idToSuspense.get(id);
+            if (suspense !== undefined) {
+              // We're reconnecting a node.
+              if (suspense.name === null) {
+                suspense.name = this._guessSuspenseName(element);
+              }
+            }
+          }
+          break;
+        }
+        case TREE_OPERATION_REMOVE: {
+          const removeLength = operations[i + 1];
+          i += 2;
+
+          for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+            const id = operations[i];
+            const element = this._idToElement.get(id);
+
+            if (element === undefined) {
+              this._throwAndEmitError(
+                Error(
+                  `Cannot remove node "${id}" because no matching node was found in the Store.`,
+                ),
+              );
+
+              break;
+            }
+
+            i += 1;
+
+            const {children, ownerID, parentID, weight} = element;
+            if (children.length > 0) {
+              this._throwAndEmitError(
+                Error(`Node "${id}" was removed before its children.`),
+              );
+            }
+
+            this._idToElement.delete(id);
+
+            let parentElement: ?Element = 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);
+              if (parentElement === undefined) {
+                this._throwAndEmitError(
+                  Error(
+                    `Cannot remove node "${id}" from parent "${parentID}" because no matching node was found in the Store.`,
+                  ),
+                );
+
+                break;
+              }
+
+              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);
+              }
+            }
+
+            if (this._errorsAndWarnings.has(id)) {
+              this._errorsAndWarnings.delete(id);
+              haveErrorsOrWarningsChanged = true;
+            }
+          }
+
+          break;
+        }
+        case TREE_OPERATION_REMOVE_ROOT: {
+          i += 1;
+
+          const id = operations[1];
+
+          if (__DEBUG__) {
+            debug(`Remove root ${id}`);
+          }
+
+          const recursivelyDeleteElements = (elementID: number) => {
+            const element = this._idToElement.get(elementID);
+            this._idToElement.delete(elementID);
+            if (element) {
+              // Mostly for Flow's sake
+              for (let index = 0; index < element.children.length; index++) {
+                recursivelyDeleteElements(element.children[index]);
+              }
+            }
+          };
+
+          const root = this._idToElement.get(id);
+          if (root === undefined) {
+            this._throwAndEmitError(
+              Error(
+                `Cannot remove root "${id}": no matching node was found in the Store.`,
+              ),
+            );
+
+            break;
+          }
+
+          recursivelyDeleteElements(id);
+
+          this._rootIDToCapabilities.delete(id);
+          this._rootIDToRendererID.delete(id);
+          this._roots = this._roots.filter(rootID => rootID !== id);
+          this._weightAcrossRoots -= root.weight;
+          break;
+        }
+        case TREE_OPERATION_REORDER_CHILDREN: {
+          const id = operations[i + 1];
+          const numChildren = operations[i + 2];
+          i += 3;
+
+          const element = this._idToElement.get(id);
+          if (element === undefined) {
+            this._throwAndEmitError(
+              Error(
+                `Cannot reorder children for node "${id}" because no matching node was found in the Store.`,
+              ),
+            );
+
+            break;
+          }
+
+          const children = element.children;
+          if (children.length !== numChildren) {
+            this._throwAndEmitError(
+              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_SET_SUBTREE_MODE: {
+          const id = operations[i + 1];
+          const mode = operations[i + 2];
+
+          i += 3;
+
+          // If elements have already been mounted in this subtree, update them.
+          // (In practice, this likely only applies to the root element.)
+          if (mode === StrictMode) {
+            this._recursivelyUpdateSubtree(id, element => {
+              element.isStrictModeNonCompliant = false;
+            });
+          }
+
+          if (__DEBUG__) {
+            debug(
+              'Subtree mode',
+              `Subtree with root ${id} set to mode ${mode}`,
+            );
+          }
+          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;
+        case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS: {
+          const id = operations[i + 1];
+          const errorCount = operations[i + 2];
+          const warningCount = operations[i + 3];
+
+          i += 4;
+
+          if (errorCount > 0 || warningCount > 0) {
+            this._errorsAndWarnings.set(id, {errorCount, warningCount});
+          } else if (this._errorsAndWarnings.has(id)) {
+            this._errorsAndWarnings.delete(id);
+          }
+          haveErrorsOrWarningsChanged = true;
+          break;
+        }
+        case SUSPENSE_TREE_OPERATION_ADD: {
+          const id = operations[i + 1];
+          const parentID = operations[i + 2];
+          const nameStringID = operations[i + 3];
+          const isSuspended = operations[i + 4] === 1;
+          const numRects = ((operations[i + 5]: any): number);
+          let name = stringTable[nameStringID];
+
+          if (this._idToSuspense.has(id)) {
+            this._throwAndEmitError(
+              Error(
+                `Cannot add suspense node "${id}" because a suspense node with that id is already in the Store.`,
+              ),
+            );
+          }
+
+          const element = this._idToElement.get(id);
+          if (element === undefined) {
+            // This element isn't connected yet.
+          } else {
+            if (name === null) {
+              // The boundary isn't explicitly named.
+              // Pick a sensible default.
+              if (parentID === 0) {
+                // For Roots we use their display name.
+                name = element.displayName;
+              } else {
+                name = this._guessSuspenseName(element);
+              }
+            }
+          }
+
+          i += 6;
+          let rects: SuspenseNode['rects'];
+          if (numRects === -1) {
+            rects = null;
+          } else {
+            rects = [];
+            for (let rectIndex = 0; rectIndex < numRects; rectIndex++) {
+              const x = operations[i + 0] / 1000;
+              const y = operations[i + 1] / 1000;
+              const width = operations[i + 2] / 1000;
+              const height = operations[i + 3] / 1000;
+              const rect = {x, y, width, height};
+              if (parentID !== 0) {
+                // Track all rects except the root.
+                this._rtree.insert(rect);
+              }
+              rects.push(rect);
+              i += 4;
+            }
+          }
+
+          if (__DEBUG__) {
+            debug('Suspense Add', `node ${id} as child of ${parentID}`);
+          }
+
+          if (parentID !== 0) {
+            const parentSuspense = this._idToSuspense.get(parentID);
+            if (parentSuspense === undefined) {
+              this._throwAndEmitError(
+                Error(
+                  `Cannot add suspense child "${id}" to parent suspense "${parentID}" because parent suspense node was not found in the Store.`,
+                ),
+              );
+
+              break;
+            }
+
+            parentSuspense.children.push(id);
+          }
+
+          this._idToSuspense.set(id, {
+            id,
+            parentID,
+            children: [],
+            name,
+            rects,
+            hasUniqueSuspenders: false,
+            isSuspended: isSuspended,
+            environments: [],
+            endTime: 0,
+          });
+
+          hasSuspenseTreeChanged = true;
+          break;
+        }
+        case SUSPENSE_TREE_OPERATION_REMOVE: {
+          const removeLength = operations[i + 1];
+          i += 2;
+
+          for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
+            const id = operations[i];
+            const suspense = this._idToSuspense.get(id);
+
+            if (suspense === undefined) {
+              this._throwAndEmitError(
+                Error(
+                  `Cannot remove suspense node "${id}" because no matching node was found in the Store.`,
+                ),
+              );
+
+              break;
+            }
+
+            i += 1;
+
+            const {children, parentID, rects} = suspense;
+            if (children.length > 0) {
+              this._throwAndEmitError(
+                Error(`Suspense node "${id}" was removed before its children.`),
+              );
+            }
+
+            if (rects !== null && parentID !== 0) {
+              // Delete all the existing rects from the R-tree
+              for (let j = 0; j < rects.length; j++) {
+                this._rtree.remove(rects[j]);
+              }
+            }
+
+            this._idToSuspense.delete(id);
+            removedSuspenseIDs.set(id, parentID);
+
+            let parentSuspense: ?SuspenseNode = null;
+            if (parentID === 0) {
+              if (__DEBUG__) {
+                debug('Suspense remove', `node ${id} root`);
+              }
+            } else {
+              if (__DEBUG__) {
+                debug('Suspense Remove', `node ${id} from parent ${parentID}`);
+              }
+
+              parentSuspense = this._idToSuspense.get(parentID);
+              if (parentSuspense === undefined) {
+                this._throwAndEmitError(
+                  Error(
+                    `Cannot remove suspense node "${id}" from parent "${parentID}" because no matching node was found in the Store.`,
+                  ),
+                );
+
+                break;
+              }
+
+              const index = parentSuspense.children.indexOf(id);
+              parentSuspense.children.splice(index, 1);
+            }
+          }
+
+          hasSuspenseTreeChanged = true;
+          break;
+        }
+        case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {
+          const id = operations[i + 1];
+          const numChildren = operations[i + 2];
+          i += 3;
+
+          const suspense = this._idToSuspense.get(id);
+          if (suspense === undefined) {
+            this._throwAndEmitError(
+              Error(
+                `Cannot reorder children for suspense node "${id}" because no matching node was found in the Store.`,
+              ),
+            );
+
+            break;
+          }
+
+          const children = suspense.children;
+          if (children.length !== numChildren) {
+            this._throwAndEmitError(
+              Error(
+                `Suspense 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 childSuspense = this._idToSuspense.get(childID);
+              if (childSuspense == null || childSuspense.parentID !== id) {
+                console.error(
+                  `Suspense children cannot be added or removed during a reorder operation.`,
+                );
+              }
+            }
+          }
+          i += numChildren;
+
+          if (__DEBUG__) {
+            debug(
+              'Re-order',
+              `Suspense node ${id} children ${children.join(',')}`,
+            );
+          }
+
+          hasSuspenseTreeChanged = true;
+          break;
+        }
+        case SUSPENSE_TREE_OPERATION_RESIZE: {
+          const id = ((operations[i + 1]: any): number);
+          const numRects = ((operations[i + 2]: any): number);
+          i += 3;
+
+          const suspense = this._idToSuspense.get(id);
+          if (suspense === undefined) {
+            this._throwAndEmitError(
+              Error(
+                `Cannot set rects for suspense node "${id}" because no matching node was found in the Store.`,
+              ),
+            );
+
+            break;
+          }
+
+          const prevRects = suspense.rects;
+          if (prevRects !== null && suspense.parentID !== 0) {
+            // Delete all the existing rects from the R-tree
+            for (let j = 0; j < prevRects.length; j++) {
+              this._rtree.remove(prevRects[j]);
+            }
+          }
+
+          let nextRects: SuspenseNode['rects'];
+          if (numRects === -1) {
+            nextRects = null;
+          } else {
+            nextRects = [];
+            for (let rectIndex = 0; rectIndex < numRects; rectIndex++) {
+              const x = operations[i + 0] / 1000;
+              const y = operations[i + 1] / 1000;
+              const width = operations[i + 2] / 1000;
+              const height = operations[i + 3] / 1000;
+
+              const rect = {x, y, width, height};
+              if (suspense.parentID !== 0) {
+                // Track all rects except the root.
+                this._rtree.insert(rect);
+              }
+              nextRects.push(rect);
+
+              i += 4;
+            }
+          }
+
+          suspense.rects = nextRects;
+
+          if (__DEBUG__) {
+            debug(
+              'Resize',
+              `Suspense node ${id} resize to ${
+                nextRects === null
+                  ? 'null'
+                  : nextRects
+                      .map(
+                        rect =>
+                          `(${rect.x},${rect.y},${rect.width},${rect.height})`,
+                      )
+                      .join(',')
+              }`,
+            );
+          }
+
+          hasSuspenseTreeChanged = true;
+
+          break;
+        }
+        case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
+          i++;
+          const changeLength = operations[i++];
+
+          for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
+            const id = operations[i++];
+            const hasUniqueSuspenders = operations[i++] === 1;
+            const endTime = operations[i++] / 1000;
+            const isSuspended = operations[i++] === 1;
+            const environmentNamesLength = operations[i++];
+            const environmentNames = [];
+            for (
+              let envIndex = 0;
+              envIndex < environmentNamesLength;
+              envIndex++
+            ) {
+              const environmentNameStringID = operations[i++];
+              const environmentName = stringTable[environmentNameStringID];
+              if (environmentName != null) {
+                environmentNames.push(environmentName);
+              }
+            }
+            const suspense = this._idToSuspense.get(id);
+
+            if (suspense === undefined) {
+              this._throwAndEmitError(
+                Error(
+                  `Cannot update suspenders of suspense node "${id}" because no matching node was found in the Store.`,
+                ),
+              );
+
+              break;
+            }
+
+            if (__DEBUG__) {
+              const previousHasUniqueSuspenders = suspense.hasUniqueSuspenders;
+              debug(
+                'Suspender changes',
+                `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} (was ${String(previousHasUniqueSuspenders)})`,
+              );
+            }
+
+            suspense.hasUniqueSuspenders = hasUniqueSuspenders;
+            suspense.endTime = endTime;
+            suspense.isSuspended = isSuspended;
+            suspense.environments = environmentNames;
+          }
+
+          hasSuspenseTreeChanged = true;
+
+          break;
+        }
+        case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
+          i++;
+          nextActivitySliceID = operations[i++];
+          break;
+        }
+        default:
+          this._throwAndEmitError(
+            new UnsupportedBridgeOperationError(
+              `Unsupported Bridge operation "${operation}"`,
+            ),
+          );
+      }
+    }
+
+    this._revision++;
+    if (hasSuspenseTreeChanged) {
+      this._revisionSuspense++;
+    }
+
+    // Any time the tree changes (e.g. elements added, removed, or reordered) cached indices may be invalid.
+    this._cachedErrorAndWarningTuples = null;
+
+    if (haveErrorsOrWarningsChanged) {
+      let componentWithErrorCount = 0;
+      let componentWithWarningCount = 0;
+
+      this._errorsAndWarnings.forEach(entry => {
+        if (entry.errorCount > 0) {
+          componentWithErrorCount++;
+        }
+
+        if (entry.warningCount > 0) {
+          componentWithWarningCount++;
+        }
+      });
+
+      this._cachedComponentWithErrorCount = componentWithErrorCount;
+      this._cachedComponentWithWarningCount = componentWithWarningCount;
+    }
+
+    if (haveRootsChanged) {
+      const prevRootSupportsProfiling = this._rootSupportsBasicProfiling;
+      const prevRootSupportsTimelineProfiling =
+        this._rootSupportsTimelineProfiling;
+      const prevRootSupportsPerformanceTracks =
+        this._rootSupportsPerformanceTracks;
+
+      this._hasOwnerMetadata = false;
+      this._rootSupportsBasicProfiling = false;
+      this._rootSupportsTimelineProfiling = false;
+      this._rootSupportsPerformanceTracks = false;
+      this._rootIDToCapabilities.forEach(
+        ({
+          supportsBasicProfiling,
+          hasOwnerMetadata,
+          supportsAdvancedProfiling,
+        }) => {
+          if (supportsBasicProfiling) {
+            this._rootSupportsBasicProfiling = true;
+          }
+          if (hasOwnerMetadata) {
+            this._hasOwnerMetadata = true;
+          }
+          if (supportsAdvancedProfiling === ADVANCED_PROFILING_TIMELINE) {
+            this._rootSupportsTimelineProfiling = true;
+          }
+          if (
+            supportsAdvancedProfiling === ADVANCED_PROFILING_PERFORMANCE_TRACKS
+          ) {
+            this._rootSupportsPerformanceTracks = true;
+          }
+        },
+      );
+
+      this.emit('roots');
+
+      if (this._rootSupportsBasicProfiling !== prevRootSupportsProfiling) {
+        this.emit('rootSupportsBasicProfiling');
+      }
+
+      if (
+        this._rootSupportsTimelineProfiling !==
+        prevRootSupportsTimelineProfiling
+      ) {
+        this.emit('rootSupportsTimelineProfiling');
+      }
+      if (
+        this._rootSupportsPerformanceTracks !==
+        prevRootSupportsPerformanceTracks
+      ) {
+        this.emit('rootSupportsPerformanceTracks');
+      }
+    }
+
+    if (hasSuspenseTreeChanged) {
+      this.emit('suspenseTreeMutated', [removedSuspenseIDs]);
+    }
+
+    if (__DEBUG__) {
+      console.log(printStore(this, true));
+      console.groupEnd();
+    }
+
+    if (nextActivitySliceID !== null && nextActivitySliceID !== 0) {
+      let didCollapse = false;
+      // The backend filtered everything above the Activity slice.
+      // We need to hide everything below the Activity slice by collapsing
+      // the Activities that are descendants of the next Activity slice.
+      const nextActivitySlice = this._idToElement.get(nextActivitySliceID);
+      if (nextActivitySlice === undefined) {
+        throw new Error('Next Activity slice not found in Store.');
+      }
+
+      for (let j = 0; j < nextActivitySlice.children.length; j++) {
+        didCollapse ||= this._collapseActivitiesRecursively(
+          nextActivitySlice.children[j],
+        );
+      }
+
+      if (didCollapse) {
+        let weightAcrossRoots = 0;
+        this._roots.forEach(rootID => {
+          const {weight} = ((this.getElementByID(rootID): any): Element);
+          weightAcrossRoots += weight;
+        });
+        this._weightAcrossRoots = weightAcrossRoots;
+      }
+    }
+
+    for (let j = 0; j < this._componentFilters.length; j++) {
+      const filter = this._componentFilters[j];
+      // If we're focusing an Activity, IDs may have changed.
+      if (filter.type === ComponentFilterActivitySlice) {
+        if (nextActivitySliceID === null || nextActivitySliceID === 0) {
+          filter.isValid = false;
+        } else {
+          filter.activityID = nextActivitySliceID;
+        }
+      }
+    }
+
+    if (nextActivitySliceID !== null) {
+      this._focusedTransition = nextActivitySliceID;
+    }
+
+    this.emit('mutated', [
+      addedElementIDs,
+      removedElementIDs,
+      nextActivitySliceID,
+    ]);
+  };
+
+  _collapseActivitiesRecursively(elementID: number): boolean {
+    let didMutate = false;
+    const element = this._idToElement.get(elementID);
+    if (element === undefined) {
+      throw new Error('Element not found in Store.');
+    }
+
+    if (element.type === ElementTypeActivity) {
+      if (!element.isCollapsed) {
+        element.isCollapsed = true;
+
+        const weightDelta = 1 - element.weight;
+
+        let parentElement = this._idToElement.get(element.parentID);
+        while (parentElement !== undefined) {
+          parentElement.weight += weightDelta;
+          parentElement = this._idToElement.get(parentElement.parentID);
+        }
+        return true;
+      }
+      return false;
+    }
+
+    for (let i = 0; i < element.children.length; i++) {
+      didMutate ||= this._collapseActivitiesRecursively(element.children[i]);
+    }
+    return didMutate;
+  }
+
+  // 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>,
+  ) => void = componentFilters => {
+    this._componentFilters = componentFilters;
+
+    setSavedComponentFilters(componentFilters);
+  };
+
+  onBridgeShutdown: () => void = () => {
+    if (__DEBUG__) {
+      debug('onBridgeShutdown', 'unsubscribing from Bridge');
+    }
+
+    const bridge = this._bridge;
+    bridge.removeListener('operations', this.onBridgeOperations);
+    bridge.removeListener(
+      'overrideComponentFilters',
+      this.onBridgeOverrideComponentFilters,
+    );
+    bridge.removeListener('shutdown', this.onBridgeShutdown);
+    bridge.removeListener(
+      'isReloadAndProfileSupportedByBackend',
+      this.onBackendReloadAndProfileSupported,
+    );
+    bridge.removeListener(
+      'isNativeStyleEditorSupported',
+      this.onBridgeNativeStyleEditorSupported,
+    );
+    bridge.removeListener(
+      'unsupportedRendererVersion',
+      this.onBridgeUnsupportedRendererVersion,
+    );
+    bridge.removeListener('backendVersion', this.onBridgeBackendVersion);
+    bridge.removeListener('bridgeProtocol', this.onBridgeProtocol);
+    bridge.removeListener('saveToClipboard', this.onSaveToClipboard);
+    bridge.removeListener('selectElement', this.onHostInstanceSelected);
+
+    if (this._onBridgeProtocolTimeoutID !== null) {
+      clearTimeout(this._onBridgeProtocolTimeoutID);
+      this._onBridgeProtocolTimeoutID = null;
+    }
+  };
+
+  onBackendReloadAndProfileSupported: (
+    isReloadAndProfileSupported: boolean,
+  ) => void = isReloadAndProfileSupported => {
+    this._isReloadAndProfileBackendSupported = isReloadAndProfileSupported;
+
+    this.emit('supportsReloadAndProfile');
+  };
+
+  onBridgeUnsupportedRendererVersion: () => void = () => {
+    this._unsupportedRendererVersionDetected = true;
+
+    this.emit('unsupportedRendererVersionDetected');
+  };
+
+  onBridgeBackendVersion: (backendVersion: string) => void = backendVersion => {
+    this._backendVersion = backendVersion;
+    this.emit('backendVersion');
+  };
+
+  onBridgeProtocol: (bridgeProtocol: BridgeProtocol) => void =
+    bridgeProtocol => {
+      if (this._onBridgeProtocolTimeoutID !== null) {
+        clearTimeout(this._onBridgeProtocolTimeoutID);
+        this._onBridgeProtocolTimeoutID = null;
+      }
+
+      this._bridgeProtocol = bridgeProtocol;
+
+      if (bridgeProtocol.version !== currentBridgeProtocol.version) {
+        // Technically newer versions of the frontend can, at least for now,
+        // gracefully handle older versions of the backend protocol.
+        // So for now we don't need to display the unsupported dialog.
+      }
+    };
+
+  onBridgeProtocolTimeout: () => void = () => {
+    this._onBridgeProtocolTimeoutID = null;
+
+    // If we timed out, that indicates the backend predates the bridge protocol,
+    // so we can set a fake version (0) to trigger the downgrade message.
+    this._bridgeProtocol = BRIDGE_PROTOCOL[0];
+
+    this.emit('unsupportedBridgeProtocolDetected');
+  };
+
+  onSaveToClipboard: (text: string) => void = text => {
+    withPermissionsCheck({permissions: ['clipboardWrite']}, () => copy(text))();
+  };
+
+  onBackendInitialized: () => void = () => {
+    // Verify that the frontend version is compatible with the connected backend.
+    // See github.com/facebook/react/issues/21326
+    if (this._shouldCheckBridgeProtocolCompatibility) {
+      // Older backends don't support an explicit bridge protocol,
+      // so we should timeout eventually and show a downgrade message.
+      this._onBridgeProtocolTimeoutID = setTimeout(
+        this.onBridgeProtocolTimeout,
+        10000,
+      );
+
+      this._bridge.addListener('bridgeProtocol', this.onBridgeProtocol);
+      this._bridge.send('getBridgeProtocol');
+    }
+
+    this._bridge.send('getBackendVersion');
+    this._bridge.send('getIfHasUnsupportedRendererVersion');
+    this._bridge.send('getHookSettings'); // Warm up cached hook settings
+  };
+
+  onHostInstanceSelected: (elementId: number | null) => void = elementId => {
+    if (
+      this._lastSelectedHostInstanceElementId === elementId &&
+      // Force clear selection e.g. when we inspect an element in the Components panel
+      // and then switch to the browser's Elements panel.
+      // We wouldn't want to stay on the inspected element if we're inspecting
+      // an element not owned by React when switching to the browser's Elements panel.
+      elementId !== null
+    ) {
+      return;
+    }
+
+    this._lastSelectedHostInstanceElementId = elementId;
+    // By the time we emit this, there is no guarantee that TreeContext is rendered.
+    this.emit('hostInstanceSelected', elementId);
+  };
+
+  getHookSettings: () => void = () => {
+    if (this._hookSettings != null) {
+      this.emit('hookSettings', this._hookSettings);
+    } else {
+      this._bridge.send('getHookSettings');
+    }
+  };
+
+  /**
+   * Maximum recorded node depth during the lifetime of this Store.
+   * Can only increase: not guaranteed to return maximal value for currently recorded elements.
+   */
+  getMaximumRecordedDepth(): number {
+    return this._maximumRecordedDepth;
+  }
+
+  updateHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
+    settings => {
+      this._hookSettings = settings;
+
+      this._bridge.send('updateHookSettings', settings);
+      this.emit('settingsUpdated', settings);
+    };
+
+  onHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
+    settings => {
+      this._hookSettings = settings;
+
+      this.setShouldShowWarningsAndErrors(settings.showInlineWarningsAndErrors);
+      this.emit('hookSettings', settings);
+    };
+
+  setShouldShowWarningsAndErrors(status: boolean): void {
+    const previousStatus = this._shouldShowWarningsAndErrors;
+    this._shouldShowWarningsAndErrors = status;
+
+    if (previousStatus !== status) {
+      // Propagate to subscribers, although tree state has not changed
+      this.emit('mutated', [[], new Map(), null]);
+    }
+  }
+
+  get supportsSuspenseTab(): boolean {
+    return this._supportsSuspenseTab;
+  }
+
+  onEnableSuspenseTab = (): void => {
+    this._supportsSuspenseTab = true;
+    this.emit('enableSuspenseTab');
+  };
+
+  // The Store should never throw an Error without also emitting an event.
+  // Otherwise Store errors will be invisible to users,
+  // but the downstream errors they cause will be reported as bugs.
+  // For example, https://github.com/facebook/react/issues/21402
+  // Emitting an error event allows the ErrorBoundary to show the original error.
+  _throwAndEmitError(error: Error): empty {
+    this.emit('error', error);
+
+    // Throwing is still valuable for local development
+    // and for unit testing the Store itself.
+    throw error;
+  }
+
+  _guessSuspenseName(element: Element): string | null {
+    const owner = this._idToElement.get(element.ownerID);
+    if (owner !== undefined && owner.displayName !== null) {
+      return owner.displayName;
+    }
+
+    return null;
+  }
+}
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 00000000000..640f0d19b57
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -0,0 +1,277 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 JSON5 from 'json5';
+
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {
+  Element,
+  SuspenseNode,
+} from 'react-devtools-shared/src/frontend/types';
+import type {StateContext} from './views/Components/TreeContext';
+import type Store from './store';
+
+export function printElement(
+  element: Element,
+  includeWeight: boolean = false,
+): string {
+  let prefix = ' ';
+  if (element.children.length > 0) {
+    prefix = element.isCollapsed ? '▸' : '▾';
+  }
+
+  let key = '';
+  if (element.key !== null) {
+    key = ` key="${element.key}"`;
+  }
+
+  let name = '';
+  if (element.nameProp !== null) {
+    name = ` name="${element.nameProp}"`;
+  }
+
+  let hocDisplayNames = null;
+  if (element.hocDisplayNames !== null) {
+    hocDisplayNames = [...element.hocDisplayNames];
+  }
+
+  const 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}${name}>${hocs}${suffix}`;
+}
+
+function printRects(rects: SuspenseNode['rects']): string {
+  if (rects === null) {
+    return ' rects={null}';
+  } else {
+    return ` rects={[${rects.map(rect => `{x:${rect.x},y:${rect.y},width:${rect.width},height:${rect.height}}`).join(', ')}]}`;
+  }
+}
+
+function printSuspense(suspense: SuspenseNode): string {
+  const name = ` name="${suspense.name || 'Unknown'}"`;
+  const printedRects = printRects(suspense.rects);
+
+  return `<Suspense${name}${printedRects}>`;
+}
+
+function printSuspenseWithChildren(
+  store: Store,
+  suspense: SuspenseNode,
+  depth: number,
+): Array<string> {
+  const lines = ['  '.repeat(depth) + printSuspense(suspense)];
+  for (let i = 0; i < suspense.children.length; i++) {
+    const childID = suspense.children[i];
+    const child = store.getSuspenseByID(childID);
+    if (child === null) {
+      throw new Error(`Could not find Suspense node with ID "${childID}".`);
+    }
+    lines.push(...printSuspenseWithChildren(store, child, depth + 1));
+  }
+
+  return lines;
+}
+
+export function printOwnersList(
+  elements: Array<Element>,
+  includeWeight: boolean = false,
+): string {
+  return elements
+    .map(element => printElement(element, includeWeight))
+    .join('\n');
+}
+
+export function printStore(
+  store: Store,
+  includeWeight: boolean = false,
+  state: StateContext | null = null,
+  includeSuspense: boolean = true,
+): string {
+  const snapshotLines = [];
+
+  let rootWeight = 0;
+
+  function printSelectedMarker(index: number): string {
+    if (state === null) {
+      return '';
+    }
+    return state.inspectedElementIndex === index ? `→` : ' ';
+  }
+
+  function printErrorsAndWarnings(element: Element): string {
+    const {errorCount, warningCount} =
+      store.getErrorAndWarningCountForElementID(element.id);
+    if (errorCount === 0 && warningCount === 0) {
+      return '';
+    }
+    return ` ${errorCount > 0 ? '✕' : ''}${warningCount > 0 ? '⚠' : ''}`;
+  }
+
+  const ownerFlatTree = state !== null ? state.ownerFlatTree : null;
+  if (ownerFlatTree !== null) {
+    snapshotLines.push(
+      '[owners]' + (includeWeight ? ` (${ownerFlatTree.length})` : ''),
+    );
+    ownerFlatTree.forEach((element, index) => {
+      const printedSelectedMarker = printSelectedMarker(index);
+      const printedElement = printElement(element, false);
+      const printedErrorsAndWarnings = printErrorsAndWarnings(element);
+      snapshotLines.push(
+        `${printedSelectedMarker}${printedElement}${printedErrorsAndWarnings}`,
+      );
+    });
+  } else {
+    const errorsAndWarnings = store._errorsAndWarnings;
+    if (errorsAndWarnings.size > 0) {
+      let errorCount = 0;
+      let warningCount = 0;
+      errorsAndWarnings.forEach(entry => {
+        errorCount += entry.errorCount;
+        warningCount += entry.warningCount;
+      });
+
+      snapshotLines.push(`✕ ${errorCount}, ⚠ ${warningCount}`);
+    }
+
+    store.roots.forEach(rootID => {
+      const {weight} = ((store.getElementByID(rootID): any): Element);
+      const maybeWeightLabel = includeWeight ? ` (${weight})` : '';
+
+      // Store does not (yet) expose a way to get errors/warnings per root.
+      snapshotLines.push(`[root]${maybeWeightLabel}`);
+
+      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}"`);
+        }
+
+        const printedSelectedMarker = printSelectedMarker(i);
+        const printedElement = printElement(element, includeWeight);
+        const printedErrorsAndWarnings = printErrorsAndWarnings(element);
+        snapshotLines.push(
+          `${printedSelectedMarker}${printedElement}${printedErrorsAndWarnings}`,
+        );
+      }
+
+      rootWeight += weight;
+
+      if (includeSuspense) {
+        const root = store.getSuspenseByID(rootID);
+        // Roots from legacy renderers don't have a separate Suspense tree
+        if (root !== null) {
+          if (root.children.length > 0) {
+            snapshotLines.push('[suspense-root] ' + printRects(root.rects));
+            for (let i = 0; i < root.children.length; i++) {
+              const childID = root.children[i];
+              const child = store.getSuspenseByID(childID);
+              if (child === null) {
+                throw new Error(
+                  `Could not find Suspense node with ID "${childID}".`,
+                );
+              }
+              snapshotLines.push(...printSuspenseWithChildren(store, child, 1));
+            }
+          }
+        }
+      }
+    });
+
+    // 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): any | string {
+  if (typeof value === 'string') {
+    if (
+      value.length >= 2 &&
+      value.charAt(0) === "'" &&
+      value.charAt(value.length - 1) === "'"
+    ) {
+      return '"' + value.slice(1, value.length - 1) + '"';
+    }
+  }
+  return value;
+}
+
+export function smartParse(value: any): any | void | number {
+  switch (value) {
+    case 'Infinity':
+      return Infinity;
+    case 'NaN':
+      return NaN;
+    case 'undefined':
+      return undefined;
+    default:
+      return JSON5.parse(sanitizeForParse(value));
+  }
+}
+
+export function smartStringify(value: any): string {
+  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);
+}
+
+const STACK_DELIMETER = /\n\s+at /;
+const STACK_SOURCE_LOCATION = /([^\s]+) \((.+):(.+):(.+)\)/;
+
+export function stackToComponentLocations(
+  stack: string,
+): Array<[string, ?ReactFunctionLocation]> {
+  const out: Array<[string, ?ReactFunctionLocation]> = [];
+  stack
+    .split(STACK_DELIMETER)
+    .slice(1)
+    .forEach(entry => {
+      const match = STACK_SOURCE_LOCATION.exec(entry);
+      if (match) {
+        const [, component, url, row, column] = match;
+        out.push([
+          component,
+          [component, url, parseInt(row, 10), parseInt(column, 10)],
+        ]);
+      } else {
+        out.push([entry, null]);
+      }
+    });
+  return out;
+}
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 00000000000..182b1b2526d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Button.css
@@ -0,0 +1,38 @@
+.Button {
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+  padding: 0;
+  border-radius: 0.25rem;
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.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 00000000000..a07aa8796e6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './Button.css';
+import Tooltip from './Components/reach-ui/tooltip';
+
+type Props = {
+  children: React$Node,
+  className?: string,
+  testName?: ?string,
+  title: React$Node,
+  ...
+};
+
+export default function Button({
+  children,
+  className = '',
+  testName,
+  title,
+  ...rest
+}: Props): React.Node {
+  let button = (
+    // $FlowFixMe[cannot-spread-inexact] unsafe spread
+    <button
+      className={`${styles.Button} ${className}`}
+      data-testname={testName}
+      {...rest}>
+      <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
+  );
+
+  if (title) {
+    button = <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 00000000000..b21c0948287
--- /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 00000000000..a3f7b0701ef
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -0,0 +1,400 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import styles from './ButtonIcon.css';
+
+export type IconType =
+  | 'add'
+  | 'cancel'
+  | 'clear'
+  | 'close'
+  | 'collapsed'
+  | 'copy'
+  | 'delete'
+  | 'down'
+  | 'editor'
+  | 'expanded'
+  | 'export'
+  | 'filter'
+  | 'import'
+  | 'log-data'
+  | 'more'
+  | 'next'
+  | 'parse-hook-names'
+  | 'previous'
+  | 'record'
+  | 'reload'
+  | 'save'
+  | 'search'
+  | 'settings'
+  | 'panel-left-close'
+  | 'panel-left-open'
+  | 'panel-right-close'
+  | 'panel-right-open'
+  | 'panel-bottom-open'
+  | 'panel-bottom-close'
+  | 'filter-on'
+  | 'filter-off'
+  | 'play'
+  | 'pause'
+  | 'skip-previous'
+  | 'skip-next'
+  | 'error'
+  | 'suspend'
+  | 'undo'
+  | 'up'
+  | 'view-dom'
+  | 'view-source';
+
+type Props = {
+  className?: string,
+  type: IconType,
+};
+
+const panelIcons = '96 -864 768 768';
+export default function ButtonIcon({className = '', type}: Props): React.Node {
+  let pathData = null;
+  let viewBox = '0 0 24 24';
+  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 'editor':
+      pathData = PATH_EDITOR;
+      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 'parse-hook-names':
+      pathData = PATH_PARSE_HOOK_NAMES;
+      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 'error':
+      pathData = PATH_ERROR;
+      break;
+    case 'panel-left-close':
+      pathData = PATH_MATERIAL_PANEL_LEFT_CLOSE;
+      viewBox = panelIcons;
+      break;
+    case 'panel-left-open':
+      pathData = PATH_MATERIAL_PANEL_LEFT_OPEN;
+      viewBox = panelIcons;
+      break;
+    case 'panel-right-close':
+      pathData = PATH_MATERIAL_PANEL_RIGHT_CLOSE;
+      viewBox = panelIcons;
+      break;
+    case 'panel-right-open':
+      pathData = PATH_MATERIAL_PANEL_RIGHT_OPEN;
+      viewBox = panelIcons;
+      break;
+    case 'panel-bottom-open':
+      pathData = PATH_MATERIAL_PANEL_BOTTOM_OPEN;
+      viewBox = panelIcons;
+      break;
+    case 'panel-bottom-close':
+      pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
+      viewBox = panelIcons;
+      break;
+    case 'filter-on':
+      pathData = PATH_MATERIAL_FILTER_ALT;
+      viewBox = panelIcons;
+      break;
+    case 'filter-off':
+      pathData = PATH_MATERIAL_FILTER_ALT_OFF;
+      viewBox = panelIcons;
+      break;
+    case 'play':
+      pathData = PATH_MATERIAL_PLAY_ARROW;
+      viewBox = panelIcons;
+      break;
+    case 'pause':
+      pathData = PATH_MATERIAL_PAUSE;
+      viewBox = panelIcons;
+      break;
+    case 'skip-previous':
+      pathData = PATH_MATERIAL_SKIP_PREVIOUS_ARROW;
+      viewBox = panelIcons;
+      break;
+    case 'skip-next':
+      pathData = PATH_MATERIAL_SKIP_NEXT_ARROW;
+      viewBox = panelIcons;
+      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={viewBox}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      {typeof pathData === 'string' ? (
+        <path fill="currentColor" d={pathData} />
+      ) : (
+        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_PARSE_HOOK_NAMES = (
+  <g>
+    <polygon points="20,7 20.94,4.94 23,4 20.94,3.06 20,1 19.06,3.06 17,4 19.06,4.94" />
+    <polygon points="8.5,7 9.44,4.94 11.5,4 9.44,3.06 8.5,1 7.56,3.06 5.5,4 7.56,4.94" />
+    <polygon points="20,12.5 19.06,14.56 17,15.5 19.06,16.44 20,18.5 20.94,16.44 23,15.5 20.94,14.56" />
+    <path d="M17.71,9.12l-2.83-2.83C14.68,6.1,14.43,6,14.17,6c-0.26,0-0.51,0.1-0.71,0.29L2.29,17.46c-0.39,0.39-0.39,1.02,0,1.41 l2.83,2.83C5.32,21.9,5.57,22,5.83,22s0.51-0.1,0.71-0.29l11.17-11.17C18.1,10.15,18.1,9.51,17.71,9.12z M14.17,8.42l1.41,1.41 L14.41,11L13,9.59L14.17,8.42z M5.83,19.59l-1.41-1.41L11.59,11L13,12.41L5.83,19.59z" />
+  </g>
+);
+
+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_ERROR =
+  'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z';
+
+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
+  `;
+
+const PATH_EDITOR = `
+  M7 5h10v2h2V3c0-1.1-.9-1.99-2-1.99L7 1c-1.1 0-2 .9-2 2v4h2V5zm8.41 11.59L20 12l-4.59-4.59L14 8.83 17.17 12 14 15.17l1.41 1.42zM10 15.17L6.83 12 10 8.83 8.59 7.41 4 12l4.59 4.59L10 15.17zM17 19H7v-2H5v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v2z
+`;
+
+// Source: Material Design Icons left_panel_close
+const PATH_MATERIAL_PANEL_LEFT_CLOSE = `
+  M648-324v-312L480-480l168 156ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm125-72v-528H216v528h120Zm72 0h336v-528H408v528Zm-72 0H216h120Z
+`;
+
+// Source: Material Design Icons left_panel_open
+const PATH_MATERIAL_PANEL_LEFT_OPEN = `
+  M504-595v230q0 12.25 10.5 16.62Q525-344 534-352l110-102q11-11.18 11-26.09T644-506L534-608q-8.82-8-19.41-3.5T504-595ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm125-72v-528H216v528h120Zm72 0h336v-528H408v528Zm-72 0H216h120Z
+`;
+
+// Source: Material Design Icons right_panel_close
+const PATH_MATERIAL_PANEL_RIGHT_CLOSE = `
+  M312-365q0 12.25 10.5 16.62Q333-344 342-352l110-102q11-11.18 11-26.09T452-506L342-608q-8.82-8-19.41-3.5T312-595v230ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z
+`;
+
+// Source: Material Design Icons right_panel_open
+const PATH_MATERIAL_PANEL_RIGHT_OPEN = `
+  M456-365v-230q0-12.25-10.5-16.63Q435-616 426-608L316-506q-11 11.18-11 26.09T316-454l110 102q8.82 8 19.41 3.5T456-365ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z
+`;
+
+// Source: Material Design Icons bottom_panel_open
+const PATH_MATERIAL_PANEL_BOTTOM_OPEN = `
+  M365-504h230q12.25 0 16.63-10.5Q616-525 608-534L506-644q-11.18-11-26.09-11T454-644L352-534q-8 8.82-3.5 19.41T365-504ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm5-192v120h528v-120H216Zm0-72h528v-336H216v336Zm0 72v120-120Z
+`;
+
+// Source: Material Design Icons bottom_panel_close
+const PATH_MATERIAL_PANEL_BOTTOM_CLOSE = `
+  m506-508 102-110q8-8.82 3.5-19.41T595-648H365q-12.25 0-16.62 10.5Q344-627 352-618l102 110q11.18 11 26.09 11T506-508Zm243-308q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538ZM216-336v120h528v-120H216Zm528-72v-336H216v336h528Zm-528 72v120-120Z
+`;
+
+// Source: Material Design Icons filter_alt
+const PATH_MATERIAL_FILTER_ALT = `
+  M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z
+`;
+
+// Source: Material Design Icons filter_alt_off
+const PATH_MATERIAL_FILTER_ALT_OFF = `
+  m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z
+`;
+
+// Source: Material Design Icons play_arrow
+const PATH_MATERIAL_PLAY_ARROW = `
+  M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z
+`;
+
+// Source: Material Design Icons pause
+const PATH_MATERIAL_PAUSE = `
+  M520-200v-560h240v560H520Zm-320 0v-560h240v560H200Zm400-80h80v-400h-80v400Zm-320 0h80v-400h-80v400Zm0-400v400-400Zm320 0v400-400Z
+`;
+
+// Source: Material Design Icons skip_previous
+const PATH_MATERIAL_SKIP_PREVIOUS_ARROW = `
+  M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z
+`;
+
+// Source: Material Design Icons skip_next
+const PATH_MATERIAL_SKIP_NEXT_ARROW = `
+  M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z
+`;
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonLabel.css b/packages/react-devtools-shared/src/devtools/views/ButtonLabel.css
new file mode 100644
index 00000000000..5a065679456
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonLabel.css
@@ -0,0 +1,7 @@
+.ButtonLabel {
+  padding-left: 1.5rem;
+  margin-left: -1rem;
+  user-select: none;
+  flex: 1 0 auto;
+  text-align: center;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonLabel.js b/packages/react-devtools-shared/src/devtools/views/ButtonLabel.js
new file mode 100644
index 00000000000..3c8cf42f277
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonLabel.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './ButtonLabel.css';
+
+type Props = {
+  children: React$Node,
+};
+
+export default function ButtonLabel({children}: Props): React.Node {
+  return <span className={styles.ButtonLabel}>{children}</span>;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.css b/packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.css
new file mode 100644
index 00000000000..52ecc865e5c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.css
@@ -0,0 +1,28 @@
+.ActivitySlice {
+  max-width: 100%;
+  overflow-x: auto;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.ActivitySliceButton {
+  color: var(--color-button-active);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.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;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js b/packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js
new file mode 100644
index 00000000000..707a5108c6c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {startTransition, useContext} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {StoreContext} from '../context';
+import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import styles from './ActivitySlice.css';
+
+export default function ActivitySlice(): React.Node {
+  const dispatch = useContext(TreeDispatcherContext);
+  const {activityID} = useContext(TreeStateContext);
+  const store = useContext(StoreContext);
+
+  const activity =
+    activityID === null ? null : store.getElementByID(activityID);
+  const name = activity ? activity.nameProp : null;
+
+  const changeActivitySliceAction = useChangeActivitySliceAction();
+
+  return (
+    <div className={styles.ActivitySlice}>
+      <div className={styles.Bar}>
+        <Button
+          className={styles.ActivitySliceButton}
+          onClick={dispatch.bind(null, {
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: activityID,
+          })}>
+          "{name || 'Unknown'}"
+        </Button>
+      </div>
+      <div className={styles.VRule} />
+      <Button
+        onClick={startTransition.bind(
+          null,
+          changeActivitySliceAction.bind(null, null),
+        )}
+        title="Back to tree view">
+        <ButtonIcon type="close" />
+      </Button>
+    </div>
+  );
+}
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 00000000000..aa0a36fd227
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.css
@@ -0,0 +1,10 @@
+.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;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}
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 00000000000..d979ec254ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './Badge.css';
+
+type Props = {
+  className?: string,
+  children: React$Node,
+  ...
+};
+
+export default function Badge({
+  className = '',
+  children,
+  ...props
+}: Props): React.Node {
+  return (
+    <div {...props} className={`${styles.Badge} ${className}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
new file mode 100644
index 00000000000..654fe769183
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useState, useContext, useCallback} from 'react';
+
+import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+
+export default function ComponentSearchInput(): React.Node {
+  const [localSearchQuery, setLocalSearchQuery] = useState('');
+  const {searchIndex, searchResults} = useContext(TreeStateContext);
+  const transitionDispatch = useContext(TreeDispatcherContext);
+
+  const search = useCallback(
+    (text: string) => {
+      setLocalSearchQuery(text);
+      transitionDispatch({type: 'SET_SEARCH_TEXT', payload: text});
+    },
+    [setLocalSearchQuery, transitionDispatch],
+  );
+  const goToNextResult = useCallback(
+    () => transitionDispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}),
+    [transitionDispatch],
+  );
+  const goToPreviousResult = useCallback(
+    () => transitionDispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}),
+    [transitionDispatch],
+  );
+
+  return (
+    <SearchInput
+      goToNextResult={goToNextResult}
+      goToPreviousResult={goToPreviousResult}
+      placeholder="Search (text or /regex/)"
+      search={search}
+      searchIndex={searchIndex}
+      searchResultsCount={searchResults.length}
+      searchText={localSearchQuery}
+      testName="ComponentSearchInput"
+    />
+  );
+}
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 00000000000..b977a368af1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -0,0 +1,80 @@
+.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);
+}
+
+.Components, .Components * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
+.TreeWrapper {
+  flex: 0 0 var(--horizontal-resize-percentage);
+}
+
+.InspectedElementWrapper {
+  flex: 1 1 35%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-left: 1px solid var(--color-border);
+}
+
+.ResizeBarWrapper {
+  flex: 0 0 0px;
+  position: relative;
+}
+
+.ResizeBar {
+  position: absolute;
+  /*
+   * moving the bar out of its bounding box might cause its hitbox to overlap
+   * with another scrollbar creating disorienting UX where you both resize and scroll
+   * at the same time.
+   * If you adjust this value, double check that starting resize right on this edge
+   * doesn't also cause scroll
+   */
+  left: 1px;
+  width: 5px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+@container devtools (width < 600px) {
+  .Components {
+    flex-direction: column;
+  }
+
+  .TreeWrapper {
+    flex: 0 0 var(--vertical-resize-percentage);
+  }
+
+  .InspectedElementWrapper {
+    flex: 1 1 50%;
+    border-left: none;
+  }
+
+  .ResizeBar {
+    top: 1px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    cursor: ns-resize;
+  }
+}
+
+.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);
+  border-left: 1px solid var(--color-border);
+}
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 00000000000..80b6d450331
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -0,0 +1,242 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useEffect, useLayoutEffect, useReducer, useRef} from 'react';
+import Tree from './Tree';
+import {OwnersListContextController} from './OwnersListContext';
+import portaledContent from '../portaledContent';
+import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import InspectedElementErrorBoundary from './InspectedElementErrorBoundary';
+import InspectedElement from './InspectedElement';
+import {ModalDialog} from '../ModalDialog';
+import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
+import {NativeStyleContextController} from './NativeStyleEditor/context';
+
+import styles from './Components.css';
+import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+type Orientation = 'horizontal' | 'vertical';
+
+type ResizeActionType =
+  | 'ACTION_SET_DID_MOUNT'
+  | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
+  | 'ACTION_SET_VERTICAL_PERCENTAGE';
+
+type ResizeAction = {
+  type: ResizeActionType,
+  payload: any,
+};
+
+type ResizeState = {
+  horizontalPercentage: number,
+  verticalPercentage: number,
+};
+
+function Components(_: {}) {
+  const wrapperElementRef = useRef<null | HTMLElement>(null);
+  const resizeElementRef = useRef<null | HTMLElement>(null);
+
+  const [state, dispatch] = useReducer<ResizeState, any, ResizeAction>(
+    resizeReducer,
+    null,
+    initResizeState,
+  );
+
+  const {horizontalPercentage, verticalPercentage} = state;
+
+  useLayoutEffect(() => {
+    const resizeElement = resizeElementRef.current;
+
+    setResizeCSSVariable(
+      resizeElement,
+      'horizontal',
+      horizontalPercentage * 100,
+    );
+    setResizeCSSVariable(resizeElement, 'vertical', verticalPercentage * 100);
+  }, []);
+
+  useEffect(() => {
+    const timeoutID = setTimeout(() => {
+      localStorageSetItem(
+        LOCAL_STORAGE_KEY,
+        JSON.stringify({
+          horizontalPercentage,
+          verticalPercentage,
+        }),
+      );
+    }, 500);
+
+    return () => clearTimeout(timeoutID);
+  }, [horizontalPercentage, verticalPercentage]);
+
+  const onResizeStart = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    element.setPointerCapture(event.pointerId);
+  };
+
+  const onResizeEnd = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    element.releasePointerCapture(event.pointerId);
+  };
+
+  const onResize = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    const isResizing = element.hasPointerCapture(event.pointerId);
+    if (!isResizing) {
+      return;
+    }
+
+    const resizeElement = resizeElementRef.current;
+    const wrapperElement = wrapperElementRef.current;
+
+    if (wrapperElement === null || resizeElement === null) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const orientation = getOrientation(wrapperElement);
+
+    const {height, width, left, top} = wrapperElement.getBoundingClientRect();
+
+    const currentMousePosition =
+      orientation === 'horizontal' ? event.clientX - left : event.clientY - top;
+
+    const boundaryMin = MINIMUM_SIZE;
+    const boundaryMax =
+      orientation === 'horizontal'
+        ? width - MINIMUM_SIZE
+        : height - MINIMUM_SIZE;
+
+    const isMousePositionInBounds =
+      currentMousePosition > boundaryMin && currentMousePosition < boundaryMax;
+
+    if (isMousePositionInBounds) {
+      const resizedElementDimension =
+        orientation === 'horizontal' ? width : height;
+      const actionType =
+        orientation === 'horizontal'
+          ? 'ACTION_SET_HORIZONTAL_PERCENTAGE'
+          : 'ACTION_SET_VERTICAL_PERCENTAGE';
+      const percentage = (currentMousePosition / resizedElementDimension) * 100;
+
+      setResizeCSSVariable(resizeElement, orientation, percentage);
+
+      dispatch({
+        type: actionType,
+        payload: currentMousePosition / resizedElementDimension,
+      });
+    }
+  };
+
+  return (
+    <SettingsModalContextController>
+      <OwnersListContextController>
+        <div ref={wrapperElementRef} className={styles.Components}>
+          <Fragment>
+            <div ref={resizeElementRef} className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.ResizeBarWrapper}>
+              <div
+                onPointerDown={onResizeStart}
+                onPointerMove={onResize}
+                onPointerUp={onResizeEnd}
+                className={styles.ResizeBar}
+              />
+            </div>
+            <div className={styles.InspectedElementWrapper}>
+              <NativeStyleContextController>
+                <InspectedElementErrorBoundary>
+                  <InspectedElement
+                    fallbackEmpty={
+                      'No React element selected. Select an element in the tree to inspect.'
+                    }
+                  />
+                </InspectedElementErrorBoundary>
+              </NativeStyleContextController>
+            </div>
+            <ModalDialog />
+            <SettingsModal />
+          </Fragment>
+        </div>
+      </OwnersListContextController>
+    </SettingsModalContextController>
+  );
+}
+
+const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer';
+const VERTICAL_MODE_MAX_WIDTH = 600;
+const MINIMUM_SIZE = 100;
+
+function initResizeState(): ResizeState {
+  let horizontalPercentage = 0.65;
+  let verticalPercentage = 0.5;
+
+  try {
+    let data = localStorageGetItem(LOCAL_STORAGE_KEY);
+    if (data != null) {
+      data = JSON.parse(data);
+      horizontalPercentage = data.horizontalPercentage;
+      verticalPercentage = data.verticalPercentage;
+    }
+  } catch (error) {}
+
+  return {
+    horizontalPercentage,
+    verticalPercentage,
+  };
+}
+
+function resizeReducer(state: ResizeState, action: ResizeAction): ResizeState {
+  switch (action.type) {
+    case 'ACTION_SET_HORIZONTAL_PERCENTAGE':
+      return {
+        ...state,
+        horizontalPercentage: action.payload,
+      };
+    case 'ACTION_SET_VERTICAL_PERCENTAGE':
+      return {
+        ...state,
+        verticalPercentage: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+function getOrientation(
+  wrapperElement: null | HTMLElement,
+): null | Orientation {
+  if (wrapperElement != null) {
+    const {width} = wrapperElement.getBoundingClientRect();
+    return width > VERTICAL_MODE_MAX_WIDTH ? 'horizontal' : 'vertical';
+  }
+  return null;
+}
+
+function setResizeCSSVariable(
+  resizeElement: null | HTMLElement,
+  orientation: null | Orientation,
+  percentage: number,
+): void {
+  if (resizeElement !== null && orientation !== null) {
+    resizeElement.style.setProperty(
+      `--${orientation}-resize-percentage`,
+      `${percentage}%`,
+    );
+  }
+}
+
+export default (portaledContent(Components): component());
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 00000000000..60160f16b8f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.css
@@ -0,0 +1,9 @@
+.Input {
+  flex: 0 1 auto;
+  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 00000000000..54ac2f561d8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback, useState} from 'react';
+import AutoSizeInput from './NativeStyleEditor/AutoSizeInput';
+import styles from './EditableName.css';
+
+type Type = 'props' | 'state' | 'context' | 'hooks';
+type OverrideNameFn = (
+  oldName: Array<string | number>,
+  newName: Array<string | number>,
+) => void;
+
+type EditableNameProps = {
+  allowEmpty?: boolean,
+  allowWhiteSpace?: boolean,
+  autoFocus?: boolean,
+  className?: string,
+  initialValue?: string,
+  overrideName: OverrideNameFn,
+  path: Array<string | number>,
+  type: Type,
+};
+
+export default function EditableName({
+  allowEmpty = false,
+  allowWhiteSpace = false,
+  autoFocus = false,
+  className = '',
+  initialValue = '',
+  overrideName,
+  path,
+  type,
+}: EditableNameProps): React.Node {
+  const [editableName, setEditableName] = useState(initialValue);
+  const [isValid, setIsValid] = useState(false);
+
+  const handleChange = useCallback(
+    ({target}: $FlowFixMe) => {
+      let value = target.value;
+      if (!allowWhiteSpace) {
+        value = value.trim();
+      }
+
+      if (allowEmpty || value !== '') {
+        setIsValid(true);
+      } else {
+        setIsValid(false);
+      }
+
+      setEditableName(value);
+    },
+    [overrideName],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: $FlowFixMe) => {
+      // Prevent keydown events from e.g. change selected element in the tree
+      event.stopPropagation();
+
+      switch (event.key) {
+        case 'Enter':
+        case 'Tab':
+          if (isValid) {
+            const basePath = path.slice(0, path.length - 1);
+            overrideName(
+              [...basePath, initialValue],
+              [...basePath, editableName],
+            );
+          }
+          break;
+        case 'Escape':
+          setEditableName(initialValue);
+          break;
+        default:
+          break;
+      }
+    },
+    [editableName, setEditableName, isValid, initialValue, overrideName],
+  );
+
+  return (
+    <AutoSizeInput
+      autoFocus={autoFocus}
+      className={[styles.Input, className].join(' ')}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="new entry"
+      testName="EditableName"
+      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 00000000000..9c0efcbe60d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
@@ -0,0 +1,35 @@
+.Checkbox {
+  flex: 0 0 auto;
+  align-self: center;
+  margin: 0 0.25rem;
+}
+
+.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;
+}
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 00000000000..0511a388a57
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment} from 'react';
+import styles from './EditableValue.css';
+import {useEditableValue} from '../hooks';
+
+type OverrideValueFn = (path: Array<string | number>, value: any) => void;
+
+type EditableValueProps = {
+  className?: string,
+  overrideValue: OverrideValueFn,
+  path: Array<string | number>,
+  value: any,
+};
+
+export default function EditableValue({
+  className = '',
+  overrideValue,
+  path,
+  value,
+}: EditableValueProps): React.Node {
+  const [state, dispatch] = useEditableValue(value);
+  const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
+
+  const reset = () =>
+    dispatch({
+      type: 'RESET',
+      externalValue: value,
+    });
+
+  // $FlowFixMe[missing-local-annot]
+  const handleChange = ({target}) =>
+    dispatch({
+      type: 'UPDATE',
+      editableValue: target.value,
+      externalValue: value,
+    });
+
+  // $FlowFixMe[missing-local-annot]
+  const handleCheckBoxToggle = ({target}) => {
+    dispatch({
+      type: 'UPDATE',
+      editableValue: target.checked,
+      externalValue: value,
+    });
+
+    // Unlike <input type="text"> which has both an onChange and an onBlur,
+    // <input type="checkbox"> updates state *and* applies changes in a single event.
+    // So we read from target.checked rather than parsedValue (which has not yet updated).
+    // We also don't check isValid (because that hasn't changed yet either);
+    // we don't need to check it anyway, since target.checked is always a boolean.
+    overrideValue(path, target.checked);
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  const handleKeyDown = event => {
+    // Prevent keydown events from e.g. change selected element in the tree
+    event.stopPropagation();
+
+    switch (event.key) {
+      case 'Enter':
+        applyChanges();
+        break;
+      case 'Escape':
+        reset();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const applyChanges = () => {
+    if (isValid && hasPendingChanges) {
+      overrideValue(path, parsedValue);
+    }
+  };
+
+  let placeholder = '';
+  if (editableValue === undefined) {
+    placeholder = '(undefined)';
+  } else {
+    placeholder = 'Enter valid JSON';
+  }
+
+  const isBool = parsedValue === true || parsedValue === false;
+
+  return (
+    <Fragment>
+      <input
+        autoComplete="new-password"
+        className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
+        data-testname="EditableValue"
+        onBlur={applyChanges}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        type="text"
+        value={editableValue}
+      />
+      {isBool && (
+        <input
+          className={styles.Checkbox}
+          checked={parsedValue}
+          type="checkbox"
+          onChange={handleCheckBoxToggle}
+        />
+      )}
+    </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 00000000000..c25eddbdbb4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -0,0 +1,106 @@
+.Element,
+.HoveredElement,
+.InactiveSelectedElement,
+.HighlightedElement,
+.InactiveHighlightedElement,
+.SelectedElement {
+  color: var(--color-component-name);
+}
+.HoveredElement {
+  background-color: var(--color-background-hover);
+}
+.InactiveSelectedElement {
+  background-color: var(--color-background-inactive);
+}
+.HighlightedElement {
+  background-color: var(--color-selected-tree-highlight-active);
+}
+.InactiveHighlightedElement {
+  background-color: var(--color-selected-tree-highlight-inactive);
+}
+
+.Wrapper {
+  position: relative;
+  padding: 0 0.25rem;
+  white-space: pre;
+  height: var(--line-height-data);
+  line-height: var(--line-height-data);
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+}
+
+.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-forget-badge-background: var(--color-forget-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);
+}
+
+.BadgesBlock {
+  margin-left: 0.25rem;
+}
+
+.ErrorIcon,
+.ErrorIconContrast,
+.StrictMode,
+.StrictModeContrast,
+.WarningIcon,
+.WarningIconContrast {
+  height: 0.75rem !important;
+  width: 0.75rem !important;
+  margin-left: 0.25rem;
+}
+.ErrorIcon {
+  color: var(--color-console-error-icon);
+}
+.StrictMode {
+  color: var(--color-dimmer);
+}
+.WarningIcon {
+  color: var(--color-console-warning-icon);
+}
+.ErrorIconContrast, .WarningIconContrast {
+  color: var(--color-component-name);
+}
+.StrictModeContrast {
+  color: var(--color-text);
+}
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 00000000000..43e611fd1bd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, startTransition, useContext, useMemo, useState} from 'react';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
+import ButtonIcon from '../ButtonIcon';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+import IndexableElementBadges from './IndexableElementBadges';
+import IndexableDisplayName from './IndexableDisplayName';
+
+import type {ItemData} from './Tree';
+import type {Element as ElementType} from 'react-devtools-shared/src/frontend/types';
+
+import styles from './Element.css';
+import Icon from '../Icon';
+import {useChangeOwnerAction} from './OwnersListContext';
+import Tooltip from './reach-ui/tooltip';
+import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+export default function Element({data, index, style}: Props): React.Node {
+  const store = useContext(StoreContext);
+  const {ownerFlatTree, ownerID, inspectedElementID} =
+    useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const element =
+    ownerFlatTree !== null
+      ? ownerFlatTree[index]
+      : store.getElementAtIndex(index);
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const errorsAndWarningsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () =>
+        element === null
+          ? {errorCount: 0, warningCount: 0}
+          : store.getErrorAndWarningCountForElementID(element.id),
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => store.removeListener('mutated', callback);
+      },
+    }),
+    [store, element],
+  );
+  const {errorCount, warningCount} = useSubscription<{
+    errorCount: number,
+    warningCount: number,
+  }>(errorsAndWarningsSubscription);
+
+  const changeOwnerAction = useChangeOwnerAction();
+  const changeActivitySliceAction = useChangeActivitySliceAction();
+
+  // Handle elements that are removed from the tree while an async render is in progress.
+  if (element == null) {
+    console.warn(`<Element> Could not find element at index ${index}`);
+
+    // This return needs to happen after hooks, since hooks can't be conditional.
+    return null;
+  }
+
+  const handleDoubleClick = () => {
+    startTransition(() => {
+      if (element.type === ElementTypeActivity) {
+        changeActivitySliceAction(element.id);
+      } else {
+        changeOwnerAction(element.id);
+      }
+    });
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  const handleClick = ({metaKey, button}) => {
+    if (id !== null && button === 0) {
+      logEvent({
+        event_name: 'select-element',
+        metadata: {source: 'click-element'},
+      });
+      dispatch({
+        type: 'SELECT_ELEMENT_BY_ID',
+        payload: metaKey ? null : id,
+      });
+    }
+  };
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    if (id !== null) {
+      onElementMouseEnter(id);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  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();
+  };
+
+  const {
+    id,
+    depth,
+    displayName,
+    hocDisplayNames,
+    isStrictModeNonCompliant,
+    key,
+    nameProp,
+    compiledWithForget,
+  } = element;
+  const {
+    isNavigatingWithKeyboard,
+    onElementMouseEnter,
+    treeFocused,
+    calculateElementOffset,
+  } = data;
+
+  const isSelected = inspectedElementID === id;
+  const isDescendantOfSelected =
+    inspectedElementID !== null &&
+    !isSelected &&
+    store.isDescendantOf(inspectedElementID, id);
+  const elementOffset = calculateElementOffset(depth);
+
+  // Only show strict mode non-compliance badges for top level elements.
+  // Showing an inline badge for every element in the tree would be noisy.
+  const showStrictModeBadge = isStrictModeNonCompliant && depth === 0;
+
+  let className = styles.Element;
+  if (isSelected) {
+    className = treeFocused
+      ? styles.SelectedElement
+      : styles.InactiveSelectedElement;
+  } else if (isHovered && !isNavigatingWithKeyboard) {
+    className = styles.HoveredElement;
+  } else if (isDescendantOfSelected) {
+    className = treeFocused
+      ? styles.HighlightedElement
+      : styles.InactiveHighlightedElement;
+  }
+
+  return (
+    <div
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onMouseDown={handleClick}
+      onDoubleClick={handleDoubleClick}
+      style={{
+        ...style,
+        paddingLeft: elementOffset,
+      }}
+      data-testname="ComponentTreeListItem">
+      {/* This wrapper is used by Tree for measurement purposes. */}
+      <div className={styles.Wrapper}>
+        {ownerID === null && (
+          <ExpandCollapseToggle element={element} store={store} />
+        )}
+
+        <IndexableDisplayName displayName={displayName} id={id} />
+
+        {key && (
+          <Fragment>
+            &nbsp;<span className={styles.KeyName}>key</span>="
+            <span
+              className={styles.KeyValue}
+              title={key}
+              onDoubleClick={handleKeyDoubleClick}>
+              <IndexableDisplayName displayName={key} id={id} />
+            </span>
+            "
+          </Fragment>
+        )}
+
+        {nameProp && (
+          <Fragment>
+            &nbsp;<span className={styles.KeyName}>name</span>="
+            <span
+              className={styles.KeyValue}
+              title={nameProp}
+              onDoubleClick={handleKeyDoubleClick}>
+              <IndexableDisplayName displayName={nameProp} id={id} />
+            </span>
+            "
+          </Fragment>
+        )}
+
+        <IndexableElementBadges
+          hocDisplayNames={hocDisplayNames}
+          compiledWithForget={compiledWithForget}
+          elementID={id}
+          className={styles.BadgesBlock}
+        />
+
+        {errorCount > 0 && (
+          <Icon
+            type="error"
+            className={
+              isSelected && treeFocused
+                ? styles.ErrorIconContrast
+                : styles.ErrorIcon
+            }
+          />
+        )}
+        {warningCount > 0 && (
+          <Icon
+            type="warning"
+            className={
+              isSelected && treeFocused
+                ? styles.WarningIconContrast
+                : styles.WarningIcon
+            }
+          />
+        )}
+        {showStrictModeBadge && (
+          <Tooltip label="This component is not running in StrictMode.">
+            <Icon
+              className={
+                isSelected && treeFocused
+                  ? styles.StrictModeContrast
+                  : styles.StrictMode
+              }
+              type="strict-mode-non-compliant"
+            />
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Prevent double clicks on toggle from drilling into the owner list.
+// $FlowFixMe[missing-local-annot]
+const swallowDoubleClick = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+type ExpandCollapseToggleProps = {
+  element: ElementType,
+  store: Store,
+};
+
+function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
+  const {children, id, isCollapsed} = element;
+
+  // $FlowFixMe[missing-local-annot]
+  const toggleCollapsed = event => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    store.toggleIsCollapsed(id, !isCollapsed);
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  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>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.css b/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.css
new file mode 100644
index 00000000000..058ee241866
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.css
@@ -0,0 +1,14 @@
+.Root {
+  display: inline-flex;
+  align-items: center;
+}
+
+.Root *:not(:first-child) {
+  margin-left: 0.25rem;
+}
+
+.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/ElementBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js
new file mode 100644
index 00000000000..5a3355c60c4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Badge from './Badge';
+import ForgetBadge from './ForgetBadge';
+
+import styles from './ElementBadges.css';
+
+type Props = {
+  hocDisplayNames: Array<string> | null,
+  environmentName: string | null,
+  compiledWithForget: boolean,
+  className?: string,
+};
+
+export default function ElementBadges({
+  compiledWithForget,
+  environmentName,
+  hocDisplayNames,
+  className = '',
+}: Props): React.Node {
+  if (
+    !compiledWithForget &&
+    (hocDisplayNames == null || hocDisplayNames.length === 0) &&
+    environmentName == null
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={`${styles.Root} ${className}`}>
+      {compiledWithForget && <ForgetBadge indexable={false} />}
+
+      {environmentName != null ? <Badge>{environmentName}</Badge> : null}
+
+      {hocDisplayNames != null && hocDisplayNames.length > 0 && (
+        <Badge>{hocDisplayNames[0]}</Badge>
+      )}
+
+      {hocDisplayNames != null && hocDisplayNames.length > 1 && (
+        <div className={styles.ExtraLabel}>+{hocDisplayNames.length - 1}</div>
+      )}
+    </div>
+  );
+}
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 00000000000..38b2aa6f7e5
--- /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 00000000000..46a8b001062
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './ExpandCollapseToggle.css';
+
+type ExpandCollapseToggleProps = {
+  disabled: boolean,
+  isOpen: boolean,
+  setIsOpen: Function,
+};
+
+export default function ExpandCollapseToggle({
+  disabled,
+  isOpen,
+  setIsOpen,
+}: ExpandCollapseToggleProps): React.Node {
+  return (
+    <Button
+      className={styles.ExpandCollapseToggle}
+      disabled={disabled}
+      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/FetchFileWithCachingContext.js b/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
new file mode 100644
index 00000000000..6bbcf0cd409
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {createContext} from 'react';
+
+export type FetchFileWithCaching = (url: string) => Promise<string>;
+export type Context = FetchFileWithCaching | null;
+
+const FetchFileWithCachingContext: ReactContext<Context> =
+  createContext<Context>(null);
+FetchFileWithCachingContext.displayName = 'FetchFileWithCachingContext';
+
+export default FetchFileWithCachingContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
new file mode 100644
index 00000000000..415f8e96fd7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
@@ -0,0 +1,13 @@
+.Root {
+  background-color: var(--color-forget-badge-background);
+  color: var(--color-forget-text);
+  padding-right: 1.75em;
+  position: relative;
+}
+
+.Root::after {
+  bottom: 0;
+  content: '✨';
+  position: absolute;
+  right: 0.25em;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
new file mode 100644
index 00000000000..5048f3085f7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Badge from './Badge';
+import IndexableDisplayName from './IndexableDisplayName';
+import Tooltip from './reach-ui/tooltip';
+
+import styles from './ForgetBadge.css';
+
+type CommonProps = {
+  className?: string,
+};
+
+type PropsForIndexable = CommonProps & {
+  indexable: true,
+  elementID: number,
+};
+
+type PropsForNonIndexable = CommonProps & {
+  indexable: false | void,
+  elementID?: number,
+};
+
+type Props = PropsForIndexable | PropsForNonIndexable;
+
+export default function ForgetBadge(props: Props): React.Node {
+  const {className = ''} = props;
+
+  const innerView = props.indexable ? (
+    <IndexableDisplayName displayName="Memo" id={props.elementID} />
+  ) : (
+    'Memo'
+  );
+
+  const title =
+    '✨ This component has been auto-memoized by the React Compiler.';
+  return (
+    <Tooltip label={title}>
+      <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
+    </Tooltip>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
new file mode 100644
index 00000000000..63586ad7762
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes';
+
+import {createContext} from 'react';
+import typeof * as ParseHookNamesModule from 'react-devtools-shared/src/hooks/parseHookNames';
+
+export type HookNamesModuleLoaderFunction =
+  () => Thenable<ParseHookNamesModule>;
+export type Context = HookNamesModuleLoaderFunction | null;
+
+// TODO (Webpack 5) Hopefully we can remove this context entirely once the Webpack 5 upgrade is completed.
+const HookNamesModuleLoaderContext: ReactContext<Context> =
+  createContext<Context>(null);
+HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
+
+export default HookNamesModuleLoaderContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/IndexableDisplayName.js b/packages/react-devtools-shared/src/devtools/views/Components/IndexableDisplayName.js
new file mode 100644
index 00000000000..9148067e9dc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/IndexableDisplayName.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import {createRegExp} from '../utils';
+
+import {TreeStateContext} from './TreeContext';
+import styles from './Element.css';
+
+const {useMemo, useContext} = React;
+
+type Props = {
+  displayName: string | null,
+  id: number,
+};
+
+function IndexableDisplayName({displayName, id}: Props): React.Node {
+  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;
+}
+
+export default IndexableDisplayName;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.css b/packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.css
new file mode 100644
index 00000000000..058ee241866
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.css
@@ -0,0 +1,14 @@
+.Root {
+  display: inline-flex;
+  align-items: center;
+}
+
+.Root *:not(:first-child) {
+  margin-left: 0.25rem;
+}
+
+.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/IndexableElementBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.js
new file mode 100644
index 00000000000..75db37c283d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Badge from './Badge';
+import ForgetBadge from './ForgetBadge';
+import IndexableDisplayName from './IndexableDisplayName';
+
+import styles from './IndexableElementBadges.css';
+
+type Props = {
+  hocDisplayNames: Array<string> | null,
+  compiledWithForget: boolean,
+  elementID: number,
+  className?: string,
+};
+
+export default function IndexableElementBadges({
+  compiledWithForget,
+  hocDisplayNames,
+  elementID,
+  className = '',
+}: Props): React.Node {
+  if (
+    !compiledWithForget &&
+    (hocDisplayNames == null || hocDisplayNames.length === 0)
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={`${styles.Root} ${className}`}>
+      {compiledWithForget && (
+        <ForgetBadge indexable={true} elementID={elementID} />
+      )}
+
+      {hocDisplayNames != null && hocDisplayNames.length > 0 && (
+        <Badge>
+          <IndexableDisplayName
+            displayName={hocDisplayNames[0]}
+            id={elementID}
+          />
+        </Badge>
+      )}
+
+      {hocDisplayNames != null && hocDisplayNames.length > 1 && (
+        <div className={styles.ExtraLabel}>+{hocDisplayNames.length - 1}</div>
+      )}
+    </div>
+  );
+}
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 00000000000..1b8fd54dc5c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback, useContext, useEffect, useState} from 'react';
+import {BridgeContext} from '../context';
+import Toggle from '../Toggle';
+import ButtonIcon from '../ButtonIcon';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+
+export default function InspectHostNodesToggle({
+  onlySuspenseNodes,
+}: {
+  onlySuspenseNodes?: boolean,
+}): React.Node {
+  const [isInspecting, setIsInspecting] = useState(false);
+  const bridge = useContext(BridgeContext);
+
+  const handleChange = useCallback(
+    (isChecked: boolean) => {
+      setIsInspecting(isChecked);
+
+      if (isChecked) {
+        logEvent({event_name: 'inspect-element-button-clicked'});
+        bridge.send('startInspectingHost', !!onlySuspenseNodes);
+      } else {
+        bridge.send('stopInspectingHost');
+      }
+    },
+    [bridge],
+  );
+
+  useEffect(() => {
+    const onStopInspectingHost = () => setIsInspecting(false);
+    bridge.addListener('stopInspectingHost', onStopInspectingHost);
+    return () =>
+      bridge.removeListener('stopInspectingHost', onStopInspectingHost);
+  }, [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/InspectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
new file mode 100644
index 00000000000..f9e60f0f15a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
@@ -0,0 +1,90 @@
+.InspectedElement {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  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;
+}
+
+.Key {
+  flex: 0 1 auto;
+  padding-left: 0.25rem;
+  padding-right: 0.125rem;
+  line-height: 1rem;
+  border-top-left-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.KeyArrow {
+  height: 1rem;
+  width: 1rem;
+  margin-right: -0.25rem;
+  border: 0.5rem solid transparent;
+  border-left: 0.5rem solid var(--color-component-badge-background);
+}
+
+.SelectedComponentName {
+  flex: 1 1 auto;
+  overflow: hidden;
+  display: flex;
+  padding: 0.25rem 0;
+  height: 100%;
+  align-items: flex-end;
+}
+
+.ComponentName {
+  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%;
+}
+
+.StrictModeNonCompliantComponentName {
+  color: var(--color-console-error-icon);
+}
+
+.Loading {
+  padding: 0.25rem;
+  color: var(--color-dimmer);
+  font-style: italic;
+}
+
+.NoInspectionFallback {
+  padding: 0.25rem;
+  font-style: italic;
+}
+
+.StrictModeNonCompliant {
+  display: inline-flex;
+  padding: 0.25rem;
+  color: var(--color-console-error-icon);
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  flex: 0 0 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
new file mode 100644
index 00000000000..af5c8d4b4b1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -0,0 +1,341 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+
+import * as React from 'react';
+import {useCallback, useContext, useSyncExternalStore} from 'react';
+import {TreeStateContext} from './TreeContext';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
+import Toggle from '../Toggle';
+import {
+  ElementTypeSuspense,
+  ElementTypeRoot,
+} from 'react-devtools-shared/src/frontend/types';
+import InspectedElementView from './InspectedElementView';
+import {InspectedElementContext} from './InspectedElementContext';
+import {getAlwaysOpenInEditor} from '../../../utils';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../../constants';
+import FetchFileWithCachingContext from './FetchFileWithCachingContext';
+import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';
+import OpenInEditorButton from './OpenInEditorButton';
+import InspectedElementViewSourceButton from './InspectedElementViewSourceButton';
+import useEditorURL from '../useEditorURL';
+
+import styles from './InspectedElement.css';
+import Tooltip from './reach-ui/tooltip';
+
+export type Props = {
+  actionButtons?: React.Node,
+  /** fallback to show when no element is inspected */
+  fallbackEmpty: React.Node,
+};
+
+// TODO Make edits and deletes also use transition API!
+
+const noSourcePromise = Promise.resolve(null);
+
+export default function InspectedElementWrapper({
+  actionButtons,
+  fallbackEmpty,
+}: Props): React.Node {
+  const {inspectedElementID} = useContext(TreeStateContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const {
+    hideToggleErrorAction,
+    hideToggleSuspenseAction,
+    hideLogAction,
+    hideViewSourceAction,
+  } = useContext(OptionsContext);
+
+  const {hookNames, inspectedElement, parseHookNames, toggleParseHookNames} =
+    useContext(InspectedElementContext);
+
+  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
+
+  const source =
+    inspectedElement == null
+      ? null
+      : inspectedElement.source != null
+        ? inspectedElement.source
+        : inspectedElement.stack != null && inspectedElement.stack.length > 0
+          ? inspectedElement.stack[0]
+          : null;
+
+  const symbolicatedSourcePromise: Promise<SourceMappedLocation | null> =
+    React.useMemo(() => {
+      if (fetchFileWithCaching == null) return noSourcePromise;
+
+      if (source == null) return noSourcePromise;
+
+      const [, sourceURL, line, column] = source;
+      return symbolicateSourceWithCache(
+        fetchFileWithCaching,
+        sourceURL,
+        line,
+        column,
+      );
+    }, [source]);
+
+  const element =
+    inspectedElementID !== null
+      ? store.getElementByID(inspectedElementID)
+      : null;
+
+  const highlightElement = useCallback(() => {
+    if (element !== null && inspectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(inspectedElementID);
+      if (rendererID !== null) {
+        bridge.send('highlightHostInstance', {
+          displayName: element.displayName,
+          hideAfterTimeout: true,
+          id: inspectedElementID,
+          openBuiltinElementsPanel: 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 isErrored = inspectedElement != null && inspectedElement.isErrored;
+
+  const isSuspended =
+    element !== null &&
+    element.type === ElementTypeSuspense &&
+    inspectedElement != null &&
+    inspectedElement.isSuspended;
+
+  const canToggleError =
+    !hideToggleErrorAction &&
+    inspectedElement != null &&
+    inspectedElement.canToggleError;
+
+  const canToggleSuspense =
+    !hideToggleSuspenseAction &&
+    inspectedElement != null &&
+    inspectedElement.canToggleSuspense;
+
+  const alwaysOpenInEditor = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR, callback);
+      return function unsubscribe() {
+        window.removeEventListener(
+          LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+          callback,
+        );
+      };
+    }, []),
+    getAlwaysOpenInEditor,
+  );
+
+  const editorURL = useEditorURL();
+
+  const toggleErrored = useCallback(() => {
+    if (inspectedElement == null) {
+      return;
+    }
+
+    const rendererID = store.getRendererIDForElement(inspectedElement.id);
+    if (rendererID !== null) {
+      // Toggle error.
+      // Because triggering an error will always delete the children, we'll
+      // automatically select the nearest still mounted instance which will be
+      // the error boundary.
+      bridge.send('overrideError', {
+        id: inspectedElement.id,
+        rendererID,
+        forceError: !isErrored,
+      });
+    }
+  }, [bridge, store, isErrored, inspectedElement]);
+
+  // TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.
+  const toggleSuspended = useCallback(() => {
+    if (inspectedElement == null) {
+      return;
+    }
+
+    const rendererID = store.getRendererIDForElement(inspectedElement.id);
+    if (rendererID !== null) {
+      // Toggle suspended
+      // Because suspending or unsuspending always delete the children or fallback,
+      // we'll automatically select the nearest still mounted instance which will be
+      // the Suspense boundary.
+      bridge.send('overrideSuspense', {
+        id: inspectedElement.id,
+        rendererID,
+        forceFallback: !isSuspended,
+      });
+    }
+  }, [bridge, store, isSuspended, inspectedElement]);
+
+  if (element === null) {
+    return (
+      <div className={styles.InspectedElement}>
+        <div className={styles.TitleRow} />
+        <div className={styles.NoInspectionFallback}>{fallbackEmpty}</div>
+      </div>
+    );
+  }
+
+  let strictModeBadge = null;
+  if (element.isStrictModeNonCompliant && element.parentID !== 0) {
+    strictModeBadge = (
+      <Tooltip label="This component is not running in StrictMode. Click to learn more.">
+        <a
+          className={styles.StrictModeNonCompliant}
+          href="https://react.dev/reference/react/StrictMode"
+          rel="noopener noreferrer"
+          target="_blank">
+          <Icon type="strict-mode-non-compliant" />
+        </a>
+      </Tooltip>
+    );
+  }
+
+  let fullName = element.displayName || '';
+  if (element.nameProp !== null) {
+    fullName += ' "' + element.nameProp + '"';
+  }
+  if (element.type === ElementTypeRoot) {
+    // The root only has "suspended by" and it represents the things that block
+    // Initial Paint.
+    fullName = 'Initial Paint';
+  }
+
+  return (
+    <div
+      className={styles.InspectedElement}
+      key={inspectedElementID /* Force reset when selected Element changes */}>
+      <div className={styles.TitleRow} data-testname="InspectedElement-Title">
+        {strictModeBadge}
+
+        {element.key && (
+          <>
+            <div className={styles.Key} title={`key "${element.key}"`}>
+              {element.key}
+            </div>
+            <div className={styles.KeyArrow} />
+          </>
+        )}
+
+        <div className={styles.SelectedComponentName}>
+          <div
+            className={
+              element.isStrictModeNonCompliant && element.parentID !== 0
+                ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}`
+                : styles.ComponentName
+            }
+            title={fullName}>
+            {fullName}
+          </div>
+        </div>
+
+        {!alwaysOpenInEditor &&
+          !!editorURL &&
+          source != null &&
+          symbolicatedSourcePromise != null && (
+            <OpenInEditorButton
+              editorURL={editorURL}
+              source={source}
+              symbolicatedSourcePromise={symbolicatedSourcePromise}
+            />
+          )}
+
+        {canToggleError && (
+          <Toggle
+            isChecked={isErrored}
+            onChange={toggleErrored}
+            title={
+              isErrored
+                ? 'Clear the forced error'
+                : 'Force the selected component into an errored state'
+            }>
+            <ButtonIcon type="error" />
+          </Toggle>
+        )}
+        {canToggleSuspense || isSuspended ? (
+          <Toggle
+            isChecked={isSuspended}
+            isDisabled={!canToggleSuspense}
+            onChange={toggleSuspended}
+            title={
+              isSuspended
+                ? canToggleSuspense
+                  ? 'Unsuspend the selected component'
+                  : 'This boundary is still suspended'
+                : 'Suspend the selected component'
+            }>
+            <ButtonIcon type="suspend" />
+          </Toggle>
+        ) : null}
+        {store.supportsInspectMatchingDOMElement && (
+          <Button
+            onClick={highlightElement}
+            title="Inspect the matching DOM element">
+            <ButtonIcon type="view-dom" />
+          </Button>
+        )}
+        {!hideLogAction && (
+          <Button
+            onClick={logElement}
+            title="Log this component data to the console">
+            <ButtonIcon type="log-data" />
+          </Button>
+        )}
+
+        {!hideViewSourceAction && (
+          <InspectedElementViewSourceButton
+            source={source}
+            symbolicatedSourcePromise={symbolicatedSourcePromise}
+          />
+        )}
+
+        {actionButtons && (
+          <>
+            <div className={styles.VRule} />
+            {actionButtons}
+          </>
+        )}
+      </div>
+
+      {inspectedElement === null && (
+        <div className={styles.Loading}>Loading...</div>
+      )}
+
+      {inspectedElement !== null && (
+        <InspectedElementView
+          element={element}
+          hookNames={hookNames}
+          inspectedElement={inspectedElement}
+          parseHookNames={parseHookNames}
+          toggleParseHookNames={toggleParseHookNames}
+          symbolicatedSourcePromise={symbolicatedSourcePromise}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css
new file mode 100644
index 00000000000..5c8c977fb81
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css
@@ -0,0 +1,8 @@
+.Root {
+  user-select: none;
+  display: inline-flex;
+}
+
+.Root *:not(:first-child) {
+  margin-left: 0.25rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js
new file mode 100644
index 00000000000..07e303dbc71
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Badge from './Badge';
+import ForgetBadge from './ForgetBadge';
+import NativeTagBadge from './NativeTagBadge';
+
+import styles from './InspectedElementBadges.css';
+
+type Props = {
+  hocDisplayNames: null | Array<string>,
+  compiledWithForget: boolean,
+  nativeTag: number | null,
+};
+
+export default function InspectedElementBadges({
+  hocDisplayNames,
+  compiledWithForget,
+  nativeTag,
+}: Props): React.Node {
+  if (
+    !compiledWithForget &&
+    (hocDisplayNames == null || hocDisplayNames.length === 0) &&
+    nativeTag === null
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={styles.Root}>
+      {compiledWithForget && <ForgetBadge indexable={false} />}
+      {nativeTag !== null && <NativeTagBadge nativeTag={nativeTag} />}
+
+      {hocDisplayNames !== null &&
+        hocDisplayNames.map(hocDisplayName => (
+          <Badge key={hocDisplayName}>{hocDisplayName}</Badge>
+        ))}
+    </div>
+  );
+}
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 00000000000..f6549fc243e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -0,0 +1,269 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  startTransition,
+  unstable_useCacheRefresh as useCacheRefresh,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {TreeStateContext} from './TreeContext';
+import {BridgeContext, StoreContext} from '../context';
+import {
+  inspectElement,
+  startElementUpdatesPolling,
+} from 'react-devtools-shared/src/inspectedElementCache';
+import {
+  clearHookNamesCache,
+  hasAlreadyLoadedHookNames,
+  loadHookNames,
+} from 'react-devtools-shared/src/hookNamesCache';
+import {loadModule} from 'react-devtools-shared/src/dynamicImportCache';
+import FetchFileWithCachingContext from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
+import {SettingsContext} from '../Settings/SettingsContext';
+
+import type {HookNames} from 'react-devtools-shared/src/frontend/types';
+import type {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  Element,
+  InspectedElement,
+} from 'react-devtools-shared/src/frontend/types';
+
+type Path = Array<string | number>;
+type InspectPathFunction = (path: Path) => void;
+export type ToggleParseHookNames = () => void;
+
+type Context = {
+  hookNames: HookNames | null,
+  inspectedElement: InspectedElement | null,
+  inspectPaths: InspectPathFunction,
+  parseHookNames: boolean,
+  toggleParseHookNames: ToggleParseHookNames,
+};
+
+export const InspectedElementContext: ReactContext<Context> =
+  createContext<Context>(((null: any): Context));
+
+export type Props = {
+  children: ReactNodeList,
+};
+
+export function InspectedElementContextController({
+  children,
+}: Props): React.Node {
+  const {inspectedElementID} = useContext(TreeStateContext);
+  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);
+
+  // parseHookNames has a lot of code.
+  // Embedding it into a build makes the build large.
+  // This function enables DevTools to make use of Suspense to lazily import() it only if the feature will be used.
+  // TODO (Webpack 5) Hopefully we can remove this indirection once the Webpack 5 upgrade is completed.
+  const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
+
+  const refresh = useCacheRefresh();
+
+  // Temporarily stores most recently-inspected (hydrated) path.
+  // The transition that updates this causes the component to re-render and ask the cache->backend for the new path.
+  // When a path is sent along with an "inspectElement" request,
+  // the backend knows to send its dehydrated data even if the element hasn't updated since the last request.
+  const [state, setState] = useState<{
+    element: Element | null,
+    path: Array<number | string> | null,
+  }>({
+    element: null,
+    path: null,
+  });
+
+  const element =
+    inspectedElementID !== null
+      ? store.getElementByID(inspectedElementID)
+      : null;
+
+  const alreadyLoadedHookNames =
+    element != null && hasAlreadyLoadedHookNames(element);
+
+  // Parse the currently inspected element's hook names.
+  // This may be enabled by default (for all elements)
+  // or it may be opted into on a per-element basis (if it's too slow to be on by default).
+  const [parseHookNames, setParseHookNames] = useState<boolean>(
+    parseHookNamesByDefault || alreadyLoadedHookNames,
+  );
+
+  const [bridgeIsAlive, setBridgeIsAliveStatus] = useState<boolean>(true);
+
+  const elementHasChanged = element !== null && element !== state.element;
+
+  // Reset the cached inspected paths when a new element is selected.
+  if (elementHasChanged) {
+    setState({
+      element,
+      path: null,
+    });
+
+    setParseHookNames(parseHookNamesByDefault || alreadyLoadedHookNames);
+  }
+
+  const purgeCachedMetadataRef = useRef(null);
+
+  // Don't load a stale element from the backend; it wastes bridge bandwidth.
+  let hookNames: HookNames | null = null;
+  let inspectedElement = null;
+  if (!elementHasChanged && element !== null) {
+    inspectedElement = inspectElement(element, state.path, store, bridge);
+
+    if (typeof hookNamesModuleLoader === 'function') {
+      if (parseHookNames || alreadyLoadedHookNames) {
+        const hookNamesModule = loadModule(hookNamesModuleLoader);
+        if (hookNamesModule !== null) {
+          const {parseHookNames: loadHookNamesFunction, purgeCachedMetadata} =
+            hookNamesModule;
+
+          purgeCachedMetadataRef.current = purgeCachedMetadata;
+
+          if (
+            inspectedElement !== null &&
+            inspectedElement.hooks !== null &&
+            loadHookNamesFunction !== null
+          ) {
+            hookNames = loadHookNames(
+              element,
+              inspectedElement.hooks,
+              loadHookNamesFunction,
+              fetchFileWithCaching,
+            );
+          }
+        }
+      }
+    }
+  }
+
+  const toggleParseHookNames: ToggleParseHookNames =
+    useCallback<ToggleParseHookNames>(() => {
+      startTransition(() => {
+        setParseHookNames(value => !value);
+        refresh();
+      });
+    }, [setParseHookNames]);
+
+  const inspectPaths: InspectPathFunction = useCallback<InspectPathFunction>(
+    (path: Path) => {
+      startTransition(() => {
+        setState({
+          element: state.element,
+          path,
+        });
+        refresh();
+      });
+    },
+    [setState, state],
+  );
+
+  useEffect(() => {
+    const purgeCachedMetadata = purgeCachedMetadataRef.current;
+    if (typeof purgeCachedMetadata === 'function') {
+      // When Fast Refresh updates a component, any cached AST metadata may be invalid.
+      const fastRefreshScheduled = () => {
+        startTransition(() => {
+          clearHookNamesCache();
+          purgeCachedMetadata();
+          refresh();
+        });
+      };
+      bridge.addListener('fastRefreshScheduled', fastRefreshScheduled);
+      return () =>
+        bridge.removeListener('fastRefreshScheduled', fastRefreshScheduled);
+    }
+  }, [bridge]);
+
+  // Reset path now that we've asked the backend to hydrate it.
+  // The backend is stateful, so we don't need to remember this path the next time we inspect.
+  useEffect(() => {
+    if (state.path !== null) {
+      setState({
+        element: state.element,
+        path: null,
+      });
+    }
+  }, [state]);
+
+  useEffect(() => {
+    // Assuming that new bridge is always alive at this moment
+    setBridgeIsAliveStatus(true);
+
+    const listener = () => setBridgeIsAliveStatus(false);
+    bridge.addListener('shutdown', listener);
+
+    return () => bridge.removeListener('shutdown', listener);
+  }, [bridge]);
+
+  // Periodically poll the selected element for updates.
+  useEffect(() => {
+    if (element !== null && bridgeIsAlive) {
+      const {abort, pause, resume} = startElementUpdatesPolling({
+        bridge,
+        element,
+        refresh,
+        store,
+      });
+
+      bridge.addListener('resumeElementPolling', resume);
+      bridge.addListener('pauseElementPolling', pause);
+
+      return () => {
+        bridge.removeListener('resumeElementPolling', resume);
+        bridge.removeListener('pauseElementPolling', pause);
+
+        abort();
+      };
+    }
+  }, [
+    element,
+    hookNames,
+    // Reset this timer any time the element we're inspecting gets a new response.
+    // No sense to ping right away after e.g. inspecting/hydrating a path.
+    inspectedElement,
+    state,
+    bridgeIsAlive,
+  ]);
+
+  const value = useMemo<Context>(
+    () => ({
+      hookNames,
+      inspectedElement,
+      inspectPaths,
+      parseHookNames,
+      toggleParseHookNames,
+    }),
+    [
+      hookNames,
+      inspectedElement,
+      inspectPaths,
+      parseHookNames,
+      toggleParseHookNames,
+    ],
+  );
+
+  return (
+    <InspectedElementContext.Provider value={value}>
+      {children}
+    </InspectedElementContext.Provider>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
new file mode 100644
index 00000000000..941fa5fe01d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import KeyValue from './KeyValue';
+import {alphaSortEntries, serializeDataForCopy} from '../utils';
+import Store from '../../store';
+import styles from './InspectedElementSharedStyles.css';
+import {
+  ElementTypeClass,
+  ElementTypeFunction,
+} from 'react-devtools-shared/src/frontend/types';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+
+type Props = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+};
+
+export default function InspectedElementContextTree({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props): React.Node {
+  const {hasLegacyContext, context, type} = inspectedElement;
+
+  const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;
+
+  if (context == null) {
+    return null;
+  }
+
+  const entries = Object.entries(context);
+  entries.sort(alphaSortEntries);
+  const isEmpty = entries.length === 0;
+
+  const handleCopy = withPermissionsCheck(
+    {permissions: ['clipboardWrite']},
+    () => copy(serializeDataForCopy(context)),
+  );
+
+  // We add an object with a "value" key as a wrapper around Context data
+  // so that we can use the shared <KeyValue> component to display it.
+  // This wrapper object can't be renamed.
+  // $FlowFixMe[missing-local-annot]
+  const canRenamePathsAtDepth = depth => depth > 1;
+
+  if (isEmpty) {
+    return null;
+  } else {
+    return (
+      <div>
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>
+            {hasLegacyContext ? 'legacy context' : 'context'}
+          </div>
+          {!isEmpty && (
+            <Button onClick={handleCopy} title="Copy to clipboard">
+              <ButtonIcon type="copy" />
+            </Button>
+          )}
+        </div>
+        {isEmpty && <div className={styles.Empty}>None</div>}
+        {!isEmpty &&
+          (entries: any).map(([name, value]) => (
+            <KeyValue
+              key={name}
+              alphaSort={true}
+              bridge={bridge}
+              canDeletePaths={!isReadOnly}
+              canEditValues={!isReadOnly}
+              canRenamePaths={!isReadOnly}
+              canRenamePathsAtDepth={canRenamePathsAtDepth}
+              depth={1}
+              element={element}
+              hidden={false}
+              inspectedElement={inspectedElement}
+              name={name}
+              path={[name]}
+              pathRoot="context"
+              store={store}
+              type="context"
+              value={value}
+            />
+          ))}
+      </div>
+    );
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
new file mode 100644
index 00000000000..da08989a726
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
@@ -0,0 +1,3 @@
+.Wrapper {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
new file mode 100644
index 00000000000..9a5612ad8c9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  useCallback,
+  useContext,
+  unstable_useCacheRefresh as useCacheRefresh,
+} from 'react';
+import ErrorBoundary from '../ErrorBoundary';
+import {TreeStateContext} from './TreeContext';
+import {clearCacheBecauseOfError} from '../../../inspectedElementCache';
+import styles from './InspectedElementErrorBoundary.css';
+
+type WrapperProps = {
+  children: React$Node,
+};
+
+export default function InspectedElementErrorBoundaryWrapper({
+  children,
+}: WrapperProps): React.Node {
+  // Key on the selected element ID so that changing the selected element automatically hides the boundary.
+  // This seems best since an error inspecting one element isn't likely to be relevant to another element.
+  const {inspectedElementID} = useContext(TreeStateContext);
+
+  const refresh = useCacheRefresh();
+  const handleDsmiss = useCallback(() => {
+    clearCacheBecauseOfError(refresh);
+  }, [refresh]);
+
+  return (
+    <div className={styles.Wrapper}>
+      <ErrorBoundary
+        key={inspectedElementID}
+        canDismiss={true}
+        onBeforeDismissCallback={handleDsmiss}>
+        {children}
+      </ErrorBoundary>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css
new file mode 100644
index 00000000000..6ef5583b895
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css
@@ -0,0 +1,60 @@
+.ErrorTree, .WarningTree {
+  padding: 0.25rem 0 0 0;
+}
+
+.HeaderRow {
+  padding: 0 0.25rem;
+}
+
+.HeaderRow {
+  padding: 0 0.25rem;
+}
+
+.Error, .Warning {
+  padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.Error {
+  border-top: 1px solid var(--color-console-error-border);
+  background-color: var(--color-console-error-background);
+  color: var(--color-error-text);
+  padding: 0 0.5rem;
+}
+
+.Warning {
+  border-top: 1px solid var(--color-console-warning-border);
+  background-color: var(--color-console-warning-background);
+  color: var(--color-warning-text);
+  padding: 0 0.5rem;
+}
+
+.Message {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ErrorBadge,
+.WarningBadge {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: 0 0 0.75rem;
+  line-height: 0.75rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  margin-right: 0.25rem;
+  font-size: var(--font-size-monospace-small);
+}
+
+.ErrorBadge {
+  background-color: var(--color-console-error-icon);
+  color: var(--color-console-error-badge-text);
+}
+
+.WarningBadge {
+  background-color: var(--color-console-warning-icon);
+  color: var(--color-console-warning-badge-text);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
new file mode 100644
index 00000000000..c3ccdf63394
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  unstable_useCacheRefresh as useCacheRefresh,
+  useTransition,
+} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Store from '../../store';
+import sharedStyles from './InspectedElementSharedStyles.css';
+import styles from './InspectedElementErrorsAndWarningsTree.css';
+import {
+  clearErrorsForElement as clearErrorsForElementAPI,
+  clearWarningsForElement as clearWarningsForElementAPI,
+} from 'react-devtools-shared/src/backendAPI';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+type Props = {
+  bridge: FrontendBridge,
+  inspectedElement: InspectedElement,
+  store: Store,
+};
+
+export default function InspectedElementErrorsAndWarningsTree({
+  bridge,
+  inspectedElement,
+  store,
+}: Props): React.Node {
+  const refresh = useCacheRefresh();
+
+  const [isErrorsTransitionPending, startClearErrorsTransition] =
+    useTransition();
+  const clearErrorsForInspectedElement = () => {
+    const {id} = inspectedElement;
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      startClearErrorsTransition(() => {
+        clearErrorsForElementAPI({
+          bridge,
+          id,
+          rendererID,
+        });
+        refresh();
+      });
+    }
+  };
+
+  const [isWarningsTransitionPending, startClearWarningsTransition] =
+    useTransition();
+  const clearWarningsForInspectedElement = () => {
+    const {id} = inspectedElement;
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      startClearWarningsTransition(() => {
+        clearWarningsForElementAPI({
+          bridge,
+          id,
+          rendererID,
+        });
+        refresh();
+      });
+    }
+  };
+
+  if (!store.displayingErrorsAndWarningsEnabled) {
+    return null;
+  }
+
+  const {errors, warnings} = inspectedElement;
+  if (errors.length === 0 && warnings.length === 0) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {errors.length > 0 && (
+        <Tree
+          badgeClassName={styles.ErrorBadge}
+          bridge={bridge}
+          className={styles.ErrorTree}
+          clearMessages={clearErrorsForInspectedElement}
+          entries={errors}
+          isTransitionPending={isErrorsTransitionPending}
+          label="errors"
+          messageClassName={styles.Error}
+        />
+      )}
+      {warnings.length > 0 && (
+        <Tree
+          badgeClassName={styles.WarningBadge}
+          bridge={bridge}
+          className={styles.WarningTree}
+          clearMessages={clearWarningsForInspectedElement}
+          entries={warnings}
+          isTransitionPending={isWarningsTransitionPending}
+          label="warnings"
+          messageClassName={styles.Warning}
+        />
+      )}
+    </React.Fragment>
+  );
+}
+
+type TreeProps = {
+  badgeClassName: string,
+  actions: React$Node,
+  className: string,
+  clearMessages: () => void,
+  entries: Array<[string, number]>,
+  isTransitionPending: boolean,
+  label: string,
+  messageClassName: string,
+};
+
+function Tree({
+  badgeClassName,
+  actions,
+  className,
+  clearMessages,
+  entries,
+  isTransitionPending,
+  label,
+  messageClassName,
+}: TreeProps) {
+  if (entries.length === 0) {
+    return null;
+  }
+  return (
+    <div className={className}>
+      <div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
+        <div className={sharedStyles.Header}>{label}</div>
+        <Button
+          disabled={isTransitionPending}
+          onClick={clearMessages}
+          title={`Clear all ${label} for this component`}>
+          <ButtonIcon type="clear" />
+        </Button>
+      </div>
+      {entries.map(([message, count], index) => (
+        <ErrorOrWarningView
+          key={`${label}-${index}`}
+          badgeClassName={badgeClassName}
+          className={messageClassName}
+          count={count}
+          message={message}
+        />
+      ))}
+    </div>
+  );
+}
+
+type ErrorOrWarningViewProps = {
+  badgeClassName: string,
+  className: string,
+  count: number,
+  message: string,
+};
+
+function ErrorOrWarningView({
+  className,
+  badgeClassName,
+  count,
+  message,
+}: ErrorOrWarningViewProps) {
+  return (
+    <div className={className}>
+      {count > 1 && <div className={badgeClassName}>{count}</div>}
+      <div className={styles.Message} title={message}>
+        {message}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
new file mode 100644
index 00000000000..066b29c66a4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -0,0 +1,83 @@
+.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;
+  white-space: nowrap;
+}
+
+.None {
+  color: var(--color-dimmer);
+  font-style: italic;
+}
+
+.TruncationIndicator {
+  color: var(--color-dimmer);
+}
+
+.ExpandCollapseToggleSpacer {
+  flex: 0 0 1rem;
+  width: 1rem;
+}
+
+.PrimitiveHookNumber {
+  background-color: var(--color-primitive-hook-badge-background);
+  color: var(--color-primitive-hook-badge-text);
+  font-size: var(--font-size-monospace-small);
+  margin-right: 0.25rem;
+  border-radius: 0.125rem;
+  padding: 0.125rem 0.25rem;
+}
+
+.HookName {
+  color: var(--color-component-name);
+}
+
+.ToggleError {
+  color: var(--color-error-text);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
new file mode 100644
index 00000000000..80c9f2f92d0
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -0,0 +1,394 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback, useContext, useState} from 'react';
+import {BridgeContext, StoreContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
+import KeyValue from './KeyValue';
+import {getMetaValueLabel, serializeHooksForCopy} from '../utils';
+import Store from '../../store';
+import styles from './InspectedElementHooksTree.css';
+import {meta} from '../../../hydration';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookSourceLocation';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
+import isArray from 'react-devtools-shared/src/isArray';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {HookNames} from 'react-devtools-shared/src/frontend/types';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+import type {ToggleParseHookNames} from './InspectedElementContext';
+
+type HooksTreeViewProps = {
+  bridge: FrontendBridge,
+  element: Element,
+  hookNames: HookNames | null,
+  inspectedElement: InspectedElement,
+  parseHookNames: boolean,
+  store: Store,
+  toggleParseHookNames: ToggleParseHookNames,
+};
+
+export function InspectedElementHooksTree({
+  bridge,
+  element,
+  hookNames,
+  inspectedElement,
+  parseHookNames,
+  store,
+  toggleParseHookNames,
+}: HooksTreeViewProps): React.Node {
+  const {hooks, id} = inspectedElement;
+
+  // Changing parseHookNames is done in a transition, because it suspends.
+  // This value is done outside of the transition, so the UI toggle feels responsive.
+  const [parseHookNamesOptimistic, setParseHookNamesOptimistic] =
+    useState(parseHookNames);
+  const handleChange = () => {
+    setParseHookNamesOptimistic(!parseHookNames);
+    toggleParseHookNames();
+  };
+
+  const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
+
+  const hookParsingFailed = parseHookNames && hookNames === null;
+
+  let toggleTitle;
+  if (hookParsingFailed) {
+    toggleTitle = 'Hook parsing failed';
+  } else if (parseHookNames) {
+    toggleTitle = 'Parsing hook names ...';
+  } else {
+    toggleTitle = 'Parse hook names (may be slow)';
+  }
+
+  const handleCopy = () => copy(serializeHooksForCopy(hooks));
+
+  if (hooks === null) {
+    return null;
+  } else {
+    return (
+      <div data-testname="InspectedElementHooksTree">
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>hooks</div>
+          {typeof hookNamesModuleLoader === 'function' &&
+            (!parseHookNames || hookParsingFailed) && (
+              <Toggle
+                className={hookParsingFailed ? styles.ToggleError : null}
+                isChecked={parseHookNamesOptimistic}
+                isDisabled={parseHookNamesOptimistic || hookParsingFailed}
+                onChange={handleChange}
+                testName="LoadHookNamesButton"
+                title={toggleTitle}>
+                <ButtonIcon type="parse-hook-names" />
+              </Toggle>
+            )}
+          <Button onClick={handleCopy} title="Copy to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        </div>
+        <InnerHooksTreeView
+          hookNames={hookNames}
+          hooks={hooks}
+          id={id}
+          element={element}
+          inspectedElement={inspectedElement}
+          path={[]}
+        />
+      </div>
+    );
+  }
+}
+
+type InnerHooksTreeViewProps = {
+  element: Element,
+  hookNames: HookNames | null,
+  hooks: HooksTree,
+  id: number,
+  inspectedElement: InspectedElement,
+  path: Array<string | number>,
+};
+
+export function InnerHooksTreeView({
+  element,
+  hookNames,
+  hooks,
+  id,
+  inspectedElement,
+  path,
+}: InnerHooksTreeViewProps): React.Node {
+  return hooks.map((hook, index) => (
+    <HookView
+      key={index}
+      element={element}
+      hook={hooks[index]}
+      hookNames={hookNames}
+      id={id}
+      inspectedElement={inspectedElement}
+      path={path.concat([index])}
+    />
+  ));
+}
+
+type HookViewProps = {
+  element: Element,
+  hook: HooksNode,
+  hookNames: HookNames | null,
+  id: number,
+  inspectedElement: InspectedElement,
+  path: Array<string | number>,
+};
+
+function HookView({
+  element,
+  hook,
+  hookNames,
+  id,
+  inspectedElement,
+  path,
+}: HookViewProps) {
+  const {canEditHooks, canEditHooksAndDeletePaths, canEditHooksAndRenamePaths} =
+    inspectedElement;
+  const {id: hookID, isStateEditable, subHooks, value} = hook;
+
+  const isReadOnly = hookID == null || !isStateEditable;
+
+  const canDeletePaths = !isReadOnly && canEditHooksAndDeletePaths;
+  const canEditValues = !isReadOnly && canEditHooks;
+  const canRenamePaths = !isReadOnly && canEditHooksAndRenamePaths;
+
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleIsOpen = useCallback(
+    () => setIsOpen(prevIsOpen => !prevIsOpen),
+    [],
+  );
+
+  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>
+    );
+  }
+
+  // Certain hooks are not editable at all (as identified by react-debug-tools).
+  // Primitive hook names (e.g. the "State" name for useState) are also never editable.
+  // $FlowFixMe[missing-local-annot]
+  const canRenamePathsAtDepth = depth => isStateEditable && depth > 1;
+
+  const isCustomHook = subHooks.length > 0;
+
+  let name = hook.name;
+  if (hookID !== null) {
+    name = (
+      <>
+        <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
+        {name}
+      </>
+    );
+  }
+
+  const type = typeof value;
+
+  let displayValue;
+  let isComplexDisplayValue = false;
+
+  const hookSource = hook.hookSource;
+  const hookName =
+    hookNames != null && hookSource != null
+      ? hookNames.get(getHookSourceLocationKey(hookSource))
+      : null;
+  const hookDisplayName = hookName ? (
+    <>
+      {name}
+      {
+        // $FlowFixMe[constant-condition]
+        !!hookName && <span className={styles.HookName}>({hookName})</span>
+      }
+    </>
+  ) : (
+    name
+  );
+
+  // 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 (isArray(value)) {
+    isComplexDisplayValue = true;
+    displayValue = 'Array';
+  } else if (type === 'object') {
+    isComplexDisplayValue = true;
+    displayValue = 'Object';
+  }
+
+  if (isCustomHook) {
+    const subHooksView = isArray(subHooks) ? (
+      <InnerHooksTreeView
+        element={element}
+        hooks={subHooks}
+        hookNames={hookNames}
+        id={id}
+        inspectedElement={inspectedElement}
+        path={path.concat(['subHooks'])}
+      />
+    ) : (
+      <KeyValue
+        alphaSort={false}
+        bridge={bridge}
+        canDeletePaths={canDeletePaths}
+        canEditValues={canEditValues}
+        canRenamePaths={canRenamePaths}
+        canRenamePathsAtDepth={canRenamePathsAtDepth}
+        depth={1}
+        element={element}
+        hookID={hookID}
+        hookName={hookName}
+        inspectedElement={inspectedElement}
+        name="subHooks"
+        path={path.concat(['subHooks'])}
+        store={store}
+        type="hooks"
+        value={subHooks}
+      />
+    );
+
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.Hook}>
+          <div className={styles.NameValueRow}>
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}>
+              {hookDisplayName || 'Anonymous'}
+            </span>
+            <span className={styles.Value} onClick={toggleIsOpen}>
+              {isOpen || getMetaValueLabel(value)}
+            </span>
+          </div>
+          <div className={styles.Children} hidden={!isOpen}>
+            <KeyValue
+              alphaSort={false}
+              bridge={bridge}
+              canDeletePaths={canDeletePaths}
+              canEditValues={canEditValues}
+              canRenamePaths={canRenamePaths}
+              canRenamePathsAtDepth={canRenamePathsAtDepth}
+              depth={1}
+              element={element}
+              hookID={hookID}
+              hookName={hookName}
+              inspectedElement={inspectedElement}
+              name="DebugValue"
+              path={path.concat(['value'])}
+              pathRoot="hooks"
+              store={store}
+              value={value}
+            />
+            {subHooksView}
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.Hook}>
+          <div className={styles.NameValueRow}>
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}>
+              {hookDisplayName || 'Anonymous'}
+            </span>{' '}
+            <span className={styles.Value} onClick={toggleIsOpen}>
+              {displayValue}
+            </span>
+          </div>
+          <div className={styles.Children} hidden={!isOpen}>
+            {subHooksView}
+          </div>
+        </div>
+      );
+    }
+  } else {
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.Hook}>
+          <KeyValue
+            alphaSort={false}
+            bridge={bridge}
+            canDeletePaths={canDeletePaths}
+            canEditValues={canEditValues}
+            canRenamePaths={canRenamePaths}
+            canRenamePathsAtDepth={canRenamePathsAtDepth}
+            depth={1}
+            element={element}
+            hookID={hookID}
+            hookName={hookName}
+            inspectedElement={inspectedElement}
+            name={name}
+            path={path.concat(['value'])}
+            pathRoot="hooks"
+            store={store}
+            value={value}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.Hook}>
+          <KeyValue
+            alphaSort={false}
+            bridge={bridge}
+            canDeletePaths={false}
+            canEditValues={canEditValues}
+            canRenamePaths={false}
+            depth={1}
+            element={element}
+            hookID={hookID}
+            hookName={hookName}
+            inspectedElement={inspectedElement}
+            name={name}
+            path={path.concat(['value'])}
+            pathRoot="hooks"
+            store={store}
+            value={value}
+          />
+        </div>
+      );
+    }
+  }
+}
+
+export default (React.memo(InspectedElementHooksTree): component(
+  ...props: HookViewProps
+));
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
new file mode 100644
index 00000000000..59e5b8cc910
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {OptionsContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import KeyValue from './KeyValue';
+import NewKeyValue from './NewKeyValue';
+import {alphaSortEntries, serializeDataForCopy} from '../utils';
+import Store from '../../store';
+import styles from './InspectedElementSharedStyles.css';
+import {
+  ElementTypeClass,
+  ElementTypeSuspense,
+  ElementTypeActivity,
+} from 'react-devtools-shared/src/frontend/types';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+
+type Props = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+};
+
+export default function InspectedElementPropsTree({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props): React.Node {
+  const {readOnly} = React.useContext(OptionsContext);
+
+  const {
+    canEditFunctionProps,
+    canEditFunctionPropsDeletePaths,
+    canEditFunctionPropsRenamePaths,
+    props,
+    type,
+  } = inspectedElement;
+
+  const canDeletePaths =
+    type === ElementTypeClass || canEditFunctionPropsDeletePaths;
+  const canEditValues =
+    !readOnly &&
+    (type === ElementTypeClass || canEditFunctionProps) &&
+    // Make it read-only for Suspense to make it a bit cleaner. It's not
+    // useful to edit children anyway.
+    type !== ElementTypeSuspense &&
+    type !== ElementTypeActivity;
+  const canRenamePaths =
+    type === ElementTypeClass || canEditFunctionPropsRenamePaths;
+
+  // Skip the section for null props.
+  if (props == null) {
+    return null;
+  }
+
+  const entries = Object.entries(props);
+  entries.sort(alphaSortEntries);
+  const isEmpty = entries.length === 0;
+
+  const handleCopy = withPermissionsCheck(
+    {permissions: ['clipboardWrite']},
+    () => copy(serializeDataForCopy(props)),
+  );
+
+  return (
+    <div data-testname="InspectedElementPropsTree">
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>props</div>
+        {!isEmpty && (
+          <Button onClick={handleCopy} title="Copy to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        )}
+      </div>
+      {!isEmpty &&
+        entries.map(([name, value]) => (
+          <KeyValue
+            key={name}
+            alphaSort={true}
+            bridge={bridge}
+            canDeletePaths={canDeletePaths}
+            canEditValues={canEditValues}
+            canRenamePaths={canRenamePaths}
+            depth={1}
+            element={element}
+            hidden={false}
+            inspectedElement={inspectedElement}
+            name={name}
+            path={[name]}
+            pathRoot="props"
+            store={store}
+            value={value}
+          />
+        ))}
+      {canEditValues && (
+        <NewKeyValue
+          bridge={bridge}
+          depth={0}
+          hidden={false}
+          inspectedElement={inspectedElement}
+          path={[]}
+          store={store}
+          type="props"
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
new file mode 100644
index 00000000000..6c56aec6899
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
@@ -0,0 +1,145 @@
+.HeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.Header {
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.ToggleSuspenseRow {
+  padding-left: 1rem;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.EditableValue {
+  min-width: 1rem;
+}
+
+.InfoRow {
+  border-top: 1px solid var(--color-border);
+  padding: 0.5rem 1rem;
+}
+
+.InfoRow:last-child {
+  margin-bottom: -0.25rem;
+}
+
+.CollapsableRow {
+  border-top: 1px solid var(--color-border);
+}
+
+.CollapsableRow:last-child {
+  margin-bottom: -0.25rem;
+}
+
+.CollapsableHeader {
+  width: 100%;
+  padding: 0.25rem;
+  display: flex;
+}
+
+.CollapsableHeader[data-pending="true"] {
+  cursor: progress;
+}
+
+.CollapsableHeaderIcon {
+  flex: 0 0 1rem;
+  margin-left: -0.25rem;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  color: var(--color-expand-collapse-toggle);
+}
+
+.CollapsableHeaderTitle, .CollapsableHeaderDescription, .CollapsableHeaderSeparator, .CollapsableHeaderFiller {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  text-align: left;
+  white-space: nowrap;
+}
+.CollapsableHeaderTitle {
+  flex: 0 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.CollapsableHeaderSeparator {
+  flex: 0 0 auto;
+  white-space: pre;
+}
+
+.CollapsableHeaderFiller {
+  flex: 1 0 0;
+}
+
+.CollapsableContent {
+  margin-top: -0.25rem;
+}
+
+.PreviewContainer {
+  padding: 0.25rem;
+}
+
+.TimeBarContainer {
+  position: relative;
+  flex: 0 0 20%;
+  height: 0.25rem;
+  border-radius: 0.125rem;
+  background-color: var(--color-timebar-background);
+}
+
+.TimeBarSpan, .TimeBarSpanErrored {
+  position: absolute;
+  border-radius: 0.125rem;
+  background-color: var(--color-suspense);
+  width: 100%;
+  height: 100%;
+}
+
+.TimeBarSpanErrored {
+  background-color: var(--color-suspense-errored);
+}
+
+.SmallHeader {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  padding-left: 1.25rem;
+  margin-top: 0.25rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
new file mode 100644
index 00000000000..3c96c2bf2cf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
@@ -0,0 +1,35 @@
+.SourceHeaderRow {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+.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;
+}
+
+.Link {
+  color: var(--color-link);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  padding: 0px 2px;
+}
+
+.Link:hover {
+  background-color: var(--color-background-hover);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
new file mode 100644
index 00000000000..9faf6c1d7ab
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {copy} from 'clipboard-js';
+
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Skeleton from './Skeleton';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import useOpenResource from '../useOpenResource';
+
+import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import styles from './InspectedElementSourcePanel.css';
+
+import formatLocationForDisplay from './formatLocationForDisplay';
+
+type Props = {
+  source: ReactFunctionLocation,
+  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
+};
+
+function InspectedElementSourcePanel({
+  source,
+  symbolicatedSourcePromise,
+}: Props): React.Node {
+  return (
+    <div>
+      <div className={styles.SourceHeaderRow}>
+        <div className={styles.SourceHeader}>source</div>
+
+        <React.Suspense
+          fallback={
+            <Button disabled={true} title="Loading source maps...">
+              <ButtonIcon type="copy" />
+            </Button>
+          }>
+          <CopySourceButton
+            source={source}
+            symbolicatedSourcePromise={symbolicatedSourcePromise}
+          />
+        </React.Suspense>
+      </div>
+
+      <React.Suspense
+        fallback={
+          <div className={styles.SourceOneLiner}>
+            <Skeleton height={16} width="40%" />
+          </div>
+        }>
+        <FormattedSourceString
+          source={source}
+          symbolicatedSourcePromise={symbolicatedSourcePromise}
+        />
+      </React.Suspense>
+    </div>
+  );
+}
+
+function CopySourceButton({source, symbolicatedSourcePromise}: Props) {
+  const symbolicatedSource = React.use(symbolicatedSourcePromise);
+  if (symbolicatedSource == null) {
+    const [, sourceURL, line, column] = source;
+    const handleCopy = withPermissionsCheck(
+      {permissions: ['clipboardWrite']},
+      () => copy(`${sourceURL}:${line}:${column}`),
+    );
+
+    return (
+      <Button onClick={handleCopy} title="Copy to clipboard">
+        <ButtonIcon type="copy" />
+      </Button>
+    );
+  }
+
+  const [, sourceURL, line, column] = symbolicatedSource.location;
+  const handleCopy = withPermissionsCheck(
+    {permissions: ['clipboardWrite']},
+    () => copy(`${sourceURL}:${line}:${column}`),
+  );
+
+  return (
+    <Button onClick={handleCopy} title="Copy to clipboard">
+      <ButtonIcon type="copy" />
+    </Button>
+  );
+}
+
+function FormattedSourceString({source, symbolicatedSourcePromise}: Props) {
+  const symbolicatedSource = React.use(symbolicatedSourcePromise);
+
+  const [linkIsEnabled, viewSource] = useOpenResource(
+    source,
+    symbolicatedSource == null ? null : symbolicatedSource.location,
+  );
+
+  const [, sourceURL, line, column] =
+    symbolicatedSource == null ? source : symbolicatedSource.location;
+
+  return (
+    <div
+      className={styles.SourceOneLiner}
+      data-testname="InspectedElementView-FormattedSourceString">
+      <span
+        className={linkIsEnabled ? styles.Link : null}
+        title={sourceURL + ':' + line}
+        onClick={viewSource}>
+        {formatLocationForDisplay(sourceURL, line, column)}
+      </span>
+    </div>
+  );
+}
+
+export default InspectedElementSourcePanel;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
new file mode 100644
index 00000000000..7987a720ddb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {ElementTypeHostComponent} from 'react-devtools-shared/src/frontend/types';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import KeyValue from './KeyValue';
+import {alphaSortEntries, serializeDataForCopy} from '../utils';
+import Store from '../../store';
+import styles from './InspectedElementSharedStyles.css';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+
+type Props = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+};
+
+export default function InspectedElementStateTree({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props): React.Node {
+  const {state, type} = inspectedElement;
+  if (state == null) {
+    return null;
+  }
+
+  // HostSingleton and HostHoistable may have state that we don't want to expose to users
+  const isHostComponent = type === ElementTypeHostComponent;
+  const entries = Object.entries(state);
+  const isEmpty = entries.length === 0;
+  if (isEmpty || isHostComponent) {
+    return null;
+  }
+
+  entries.sort(alphaSortEntries);
+  const handleCopy = withPermissionsCheck(
+    {permissions: ['clipboardWrite']},
+    () => copy(serializeDataForCopy(state)),
+  );
+
+  return (
+    <div>
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>state</div>
+        {!isEmpty && (
+          <Button onClick={handleCopy} title="Copy to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        )}
+      </div>
+      {isEmpty && <div className={styles.Empty}>None</div>}
+      {!isEmpty &&
+        (entries: any).map(([name, value]) => (
+          <KeyValue
+            key={name}
+            alphaSort={true}
+            bridge={bridge}
+            canDeletePaths={true}
+            canEditValues={true}
+            canRenamePaths={true}
+            depth={1}
+            element={element}
+            hidden={false}
+            inspectedElement={inspectedElement}
+            name={name}
+            path={[name]}
+            pathRoot="state"
+            store={store}
+            value={value}
+          />
+        ))}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.css
new file mode 100644
index 00000000000..0aa7f62e279
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.css
@@ -0,0 +1,6 @@
+.Source {
+  color: var(--color-dim);
+  margin-left: 1rem;
+  overflow: auto;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
new file mode 100644
index 00000000000..828b11a50c5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import KeyValue from './KeyValue';
+import Store from '../../store';
+import sharedStyles from './InspectedElementSharedStyles.css';
+import styles from './InspectedElementStyleXPlugin.css';
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+
+type Props = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+};
+
+export default function InspectedElementStyleXPlugin({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props): React.Node {
+  if (!enableStyleXFeatures) {
+    return null;
+  }
+
+  const styleXPlugin = inspectedElement.plugins.stylex;
+  if (styleXPlugin == null) {
+    return null;
+  }
+
+  const {resolvedStyles, sources} = styleXPlugin;
+
+  return (
+    <div>
+      <div className={sharedStyles.HeaderRow}>
+        <div className={sharedStyles.Header}>stylex</div>
+      </div>
+      {sources.map(source => (
+        <div key={source} className={styles.Source}>
+          {source}
+        </div>
+      ))}
+      {Object.entries(resolvedStyles).map(([name, value]) => (
+        <KeyValue
+          key={name}
+          alphaSort={true}
+          bridge={bridge}
+          canDeletePaths={false}
+          canEditValues={false}
+          canRenamePaths={false}
+          depth={1}
+          element={element}
+          hidden={false}
+          inspectedElement={inspectedElement}
+          name={name}
+          path={[name]}
+          pathRoot="stylex"
+          store={store}
+          value={value}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
new file mode 100644
index 00000000000..78c137deaf3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
@@ -0,0 +1,626 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useState, useTransition} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import KeyValue from './KeyValue';
+import {serializeDataForCopy, pluralize} from '../utils';
+import Store from '../../store';
+import styles from './InspectedElementSharedStyles.css';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+import StackTraceView from './StackTraceView';
+import OwnerView from './OwnerView';
+import {meta} from '../../../hydration';
+import useInferredName from '../useInferredName';
+
+import {getClassNameForEnvironment} from '../SuspenseTab/SuspenseEnvironmentColors.js';
+
+import type {
+  InspectedElement,
+  SerializedAsyncInfo,
+} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+import {
+  UNKNOWN_SUSPENDERS_NONE,
+  UNKNOWN_SUSPENDERS_REASON_PRODUCTION,
+  UNKNOWN_SUSPENDERS_REASON_OLD_VERSION,
+  UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE,
+} from '../../../constants';
+
+type RowProps = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+  asyncInfo: SerializedAsyncInfo,
+  index: number,
+  minTime: number,
+  maxTime: number,
+  skipName?: boolean,
+};
+
+function getShortDescription(name: string, description: string): string {
+  const descMaxLength = 30 - name.length;
+  if (descMaxLength > 1) {
+    const l = description.length;
+    if (l > 0 && l <= descMaxLength) {
+      // We can fit the full description
+      return description;
+    } else if (
+      description.startsWith('http://') ||
+      description.startsWith('https://') ||
+      description.startsWith('/')
+    ) {
+      // Looks like a URL. Let's see if we can extract something shorter.
+      // We don't have to do a full parse so let's try something cheaper.
+      let queryIdx = description.indexOf('?');
+      if (queryIdx === -1) {
+        queryIdx = description.length;
+      }
+      if (description.charCodeAt(queryIdx - 1) === 47 /* "/" */) {
+        // Ends with slash. Look before that.
+        queryIdx--;
+      }
+      const slashIdx = description.lastIndexOf('/', queryIdx - 1);
+      // This may now be either the file name or the host.
+      // Include the slash to make it more obvious what we trimmed.
+      return '…' + description.slice(slashIdx, queryIdx);
+    }
+  }
+  return '';
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1_000) {
+    return bytes + ' bytes';
+  }
+  if (bytes < 1_000_000) {
+    return (bytes / 1_000).toFixed(1) + ' kB';
+  }
+  if (bytes < 1_000_000_000) {
+    return (bytes / 1_000_000).toFixed(1) + ' mB';
+  }
+  return (bytes / 1_000_000_000).toFixed(1) + ' gB';
+}
+
+function SuspendedByRow({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+  asyncInfo,
+  index,
+  minTime,
+  maxTime,
+  skipName,
+}: RowProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openIsPending, startOpenTransition] = useTransition();
+  const ioInfo = asyncInfo.awaited;
+  const name = useInferredName(asyncInfo);
+  const description = ioInfo.description;
+  const longName = description === '' ? name : name + ' (' + description + ')';
+  const shortDescription = getShortDescription(name, description);
+  const start = ioInfo.start;
+  const end = ioInfo.end;
+  const timeScale = 100 / (maxTime - minTime);
+  let left = (start - minTime) * timeScale;
+  let width = (end - start) * timeScale;
+  if (width < 5) {
+    // Use at least a 5% width to avoid showing too small indicators.
+    width = 5;
+    if (left > 95) {
+      left = 95;
+    }
+  }
+
+  const ioOwner = ioInfo.owner;
+  const asyncOwner = asyncInfo.owner;
+  const showIOStack = ioInfo.stack !== null && ioInfo.stack.length !== 0;
+  // Only show the awaited stack if the I/O started in a different owner
+  // than where it was awaited. If it's started by the same component it's
+  // probably easy enough to infer and less noise in the common case.
+  const canShowAwaitStack =
+    (asyncInfo.stack !== null && asyncInfo.stack.length > 0) ||
+    (asyncOwner !== null && asyncOwner.id !== inspectedElement.id);
+  const showAwaitStack =
+    canShowAwaitStack &&
+    (!showIOStack ||
+      (ioOwner === null
+        ? asyncOwner !== null
+        : asyncOwner === null || ioOwner.id !== asyncOwner.id));
+
+  const value: any = ioInfo.value;
+  const metaName =
+    value !== null && typeof value === 'object' ? value[meta.name] : null;
+  const isFulfilled = metaName === 'fulfilled Thenable';
+  const isRejected = metaName === 'rejected Thenable';
+  return (
+    <div className={styles.CollapsableRow}>
+      <Button
+        className={styles.CollapsableHeader}
+        // TODO: May be better to leave to React's default Transition indicator.
+        // Though no apps implement this option at the moment.
+        data-pending={openIsPending}
+        onClick={() => {
+          startOpenTransition(() => {
+            setIsOpen(prevIsOpen => !prevIsOpen);
+          });
+        }}
+        // Changing the title on pending transition will not be visible since
+        // (Reach?) tooltips are dismissed on activation.
+        title={
+          longName +
+          ' — ' +
+          (end - start).toFixed(2) +
+          ' ms' +
+          (ioInfo.byteSize != null ? ' — ' + formatBytes(ioInfo.byteSize) : '')
+        }>
+        <ButtonIcon
+          className={styles.CollapsableHeaderIcon}
+          type={isOpen ? 'expanded' : 'collapsed'}
+        />
+        <span className={styles.CollapsableHeaderTitle}>
+          {skipName && shortDescription !== '' ? shortDescription : name}
+        </span>
+        {skipName || shortDescription === '' ? null : (
+          <>
+            <span className={styles.CollapsableHeaderSeparator}>{' ('}</span>
+            <span className={styles.CollapsableHeaderTitle}>
+              {shortDescription}
+            </span>
+            <span className={styles.CollapsableHeaderSeparator}>{') '}</span>
+          </>
+        )}
+        <div className={styles.CollapsableHeaderFiller} />
+        <div
+          className={
+            styles.TimeBarContainer +
+            ' ' +
+            getClassNameForEnvironment(ioInfo.env)
+          }>
+          <div
+            className={
+              !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored
+            }
+            style={{
+              left: left.toFixed(2) + '%',
+              width: width.toFixed(2) + '%',
+            }}
+          />
+        </div>
+      </Button>
+      {isOpen && (
+        <div className={styles.CollapsableContent}>
+          {showIOStack && (
+            <StackTraceView
+              stack={ioInfo.stack}
+              environmentName={
+                ioOwner !== null && ioOwner.env === ioInfo.env
+                  ? null
+                  : ioInfo.env
+              }
+            />
+          )}
+          {ioOwner !== null &&
+          ioOwner.id !== inspectedElement.id &&
+          (showIOStack ||
+            !showAwaitStack ||
+            asyncOwner === null ||
+            ioOwner.id !== asyncOwner.id) ? (
+            <OwnerView
+              key={ioOwner.id}
+              displayName={ioOwner.displayName || 'Anonymous'}
+              environmentName={
+                ioOwner.env === inspectedElement.env &&
+                ioOwner.env === ioInfo.env
+                  ? null
+                  : ioOwner.env
+              }
+              hocDisplayNames={ioOwner.hocDisplayNames}
+              compiledWithForget={ioOwner.compiledWithForget}
+              id={ioOwner.id}
+              isInStore={store.containsElement(ioOwner.id)}
+              type={ioOwner.type}
+            />
+          ) : null}
+          {showAwaitStack ? (
+            <>
+              <div className={styles.SmallHeader}>awaited at:</div>
+              {asyncInfo.stack !== null && asyncInfo.stack.length > 0 && (
+                <StackTraceView
+                  stack={asyncInfo.stack}
+                  environmentName={
+                    asyncOwner !== null && asyncOwner.env === asyncInfo.env
+                      ? null
+                      : asyncInfo.env
+                  }
+                />
+              )}
+              {asyncOwner !== null && asyncOwner.id !== inspectedElement.id ? (
+                <OwnerView
+                  key={asyncOwner.id}
+                  displayName={asyncOwner.displayName || 'Anonymous'}
+                  environmentName={
+                    asyncOwner.env === inspectedElement.env &&
+                    asyncOwner.env === asyncInfo.env
+                      ? null
+                      : asyncOwner.env
+                  }
+                  hocDisplayNames={asyncOwner.hocDisplayNames}
+                  compiledWithForget={asyncOwner.compiledWithForget}
+                  id={asyncOwner.id}
+                  isInStore={store.containsElement(asyncOwner.id)}
+                  type={asyncOwner.type}
+                />
+              ) : null}
+            </>
+          ) : null}
+          <div className={styles.PreviewContainer}>
+            <KeyValue
+              alphaSort={true}
+              bridge={bridge}
+              canDeletePaths={false}
+              canEditValues={false}
+              canRenamePaths={false}
+              depth={1}
+              element={element}
+              hidden={false}
+              inspectedElement={inspectedElement}
+              name={
+                isFulfilled
+                  ? 'awaited value'
+                  : isRejected
+                    ? 'rejected with'
+                    : 'pending value'
+              }
+              path={
+                isFulfilled
+                  ? [index, 'awaited', 'value', 'value']
+                  : isRejected
+                    ? [index, 'awaited', 'value', 'reason']
+                    : [index, 'awaited', 'value']
+              }
+              pathRoot="suspendedBy"
+              store={store}
+              value={
+                isFulfilled ? value.value : isRejected ? value.reason : value
+              }
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+type Props = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+};
+
+function withIndex(
+  value: SerializedAsyncInfo,
+  index: number,
+): {
+  index: number,
+  value: SerializedAsyncInfo,
+} {
+  return {
+    index,
+    value,
+  };
+}
+
+function compareTime(
+  a: {
+    index: number,
+    value: SerializedAsyncInfo,
+  },
+  b: {
+    index: number,
+    value: SerializedAsyncInfo,
+  },
+): number {
+  const ioA = a.value.awaited;
+  const ioB = b.value.awaited;
+  if (ioA.start === ioB.start) {
+    return ioA.end - ioB.end;
+  }
+  return ioA.start - ioB.start;
+}
+
+type GroupProps = {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+  name: string,
+  environment: null | string,
+  suspendedBy: Array<{
+    index: number,
+    value: SerializedAsyncInfo,
+  }>,
+  minTime: number,
+  maxTime: number,
+};
+
+function SuspendedByGroup({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+  name,
+  environment,
+  suspendedBy,
+  minTime,
+  maxTime,
+}: GroupProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  let start = Infinity;
+  let end = -Infinity;
+  let isRejected = false;
+  for (let i = 0; i < suspendedBy.length; i++) {
+    const asyncInfo: SerializedAsyncInfo = suspendedBy[i].value;
+    const ioInfo = asyncInfo.awaited;
+    if (ioInfo.start < start) {
+      start = ioInfo.start;
+    }
+    if (ioInfo.end > end) {
+      end = ioInfo.end;
+    }
+    const value: any = ioInfo.value;
+    if (
+      value !== null &&
+      typeof value === 'object' &&
+      value[meta.name] === 'rejected Thenable'
+    ) {
+      isRejected = true;
+    }
+  }
+  const timeScale = 100 / (maxTime - minTime);
+  let left = (start - minTime) * timeScale;
+  let width = (end - start) * timeScale;
+  if (width < 5) {
+    // Use at least a 5% width to avoid showing too small indicators.
+    width = 5;
+    if (left > 95) {
+      left = 95;
+    }
+  }
+  const pluralizedName = pluralize(name);
+  return (
+    <div className={styles.CollapsableRow}>
+      <Button
+        className={styles.CollapsableHeader}
+        onClick={() => {
+          setIsOpen(prevIsOpen => !prevIsOpen);
+        }}
+        title={pluralizedName}>
+        <ButtonIcon
+          className={styles.CollapsableHeaderIcon}
+          type={isOpen ? 'expanded' : 'collapsed'}
+        />
+        <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span>
+        <div className={styles.CollapsableHeaderFiller} />
+        {isOpen ? null : (
+          <div
+            className={
+              styles.TimeBarContainer +
+              ' ' +
+              getClassNameForEnvironment(environment)
+            }>
+            <div
+              className={
+                !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored
+              }
+              style={{
+                left: left.toFixed(2) + '%',
+                width: width.toFixed(2) + '%',
+              }}
+            />
+          </div>
+        )}
+      </Button>
+      {isOpen &&
+        suspendedBy.map(({value, index}) => (
+          <SuspendedByRow
+            key={index}
+            index={index}
+            asyncInfo={value}
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+            minTime={minTime}
+            maxTime={maxTime}
+            skipName={true}
+          />
+        ))}
+    </div>
+  );
+}
+
+export default function InspectedElementSuspendedBy({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props): React.Node {
+  const {suspendedBy, suspendedByRange} = inspectedElement;
+
+  // Skip the section if nothing suspended this component.
+  if (
+    (suspendedBy == null || suspendedBy.length === 0) &&
+    inspectedElement.unknownSuspenders === UNKNOWN_SUSPENDERS_NONE
+  ) {
+    if (inspectedElement.isSuspended) {
+      // If we're still suspended, show a place holder until the data loads.
+      // We don't know what we're suspended by until it has loaded.
+      return (
+        <div>
+          <div className={styles.HeaderRow}>
+            <div className={styles.Header}>suspended...</div>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const handleCopy = withPermissionsCheck(
+    {permissions: ['clipboardWrite']},
+    () => copy(serializeDataForCopy(suspendedBy)),
+  );
+
+  let minTime = Infinity;
+  let maxTime = -Infinity;
+  if (suspendedByRange !== null) {
+    // The range of the whole suspense boundary.
+    minTime = suspendedByRange[0];
+    maxTime = suspendedByRange[1];
+  }
+  for (let i = 0; i < suspendedBy.length; i++) {
+    const asyncInfo: SerializedAsyncInfo = suspendedBy[i];
+    if (asyncInfo.awaited.start < minTime) {
+      minTime = asyncInfo.awaited.start;
+    }
+    if (asyncInfo.awaited.end > maxTime) {
+      maxTime = asyncInfo.awaited.end;
+    }
+  }
+
+  if (maxTime - minTime < 25) {
+    // Stretch the time span a bit to ensure that we don't show
+    // large bars that represent very small timespans.
+    minTime = maxTime - 25;
+  }
+
+  const sortedSuspendedBy =
+    suspendedBy === null ? [] : suspendedBy.map(withIndex);
+  sortedSuspendedBy.sort(compareTime);
+
+  // Organize into groups of consecutive entries with the same name.
+  const groups = [];
+  let currentGroup = null;
+  let currentGroupName = null;
+  let currentGroupEnv = null;
+  for (let i = 0; i < sortedSuspendedBy.length; i++) {
+    const entry = sortedSuspendedBy[i];
+    const name = entry.value.awaited.name;
+    const env = entry.value.awaited.env;
+    if (
+      currentGroupName !== name ||
+      currentGroupEnv !== env ||
+      !name ||
+      name === 'Promise' ||
+      currentGroup === null
+    ) {
+      // Create a new group.
+      currentGroupName = name;
+      currentGroupEnv = env;
+      currentGroup = [];
+      groups.push(currentGroup);
+    }
+    currentGroup.push(entry);
+  }
+
+  let unknownSuspenders = null;
+  switch (inspectedElement.unknownSuspenders) {
+    case UNKNOWN_SUSPENDERS_REASON_PRODUCTION:
+      unknownSuspenders = (
+        <div className={styles.InfoRow}>
+          Something suspended but we don't know the exact reason in production
+          builds of React. Test this in development mode to see exactly what
+          might suspend.
+        </div>
+      );
+      break;
+    case UNKNOWN_SUSPENDERS_REASON_OLD_VERSION:
+      unknownSuspenders = (
+        <div className={styles.InfoRow}>
+          Something suspended but we don't track all the necessary information
+          in older versions of React. Upgrade to the latest version of React to
+          see exactly what might suspend.
+        </div>
+      );
+      break;
+    case UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE:
+      unknownSuspenders = (
+        <div className={styles.InfoRow}>
+          Something threw a Promise to suspend this boundary. It's likely an
+          outdated version of a library that doesn't yet fully take advantage of
+          use(). Upgrade your data fetching library to see exactly what might
+          suspend.
+        </div>
+      );
+      break;
+  }
+
+  return (
+    <div>
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>suspended by</div>
+        <Button onClick={handleCopy} title="Copy to clipboard">
+          <ButtonIcon type="copy" />
+        </Button>
+      </div>
+      {groups.length === 1
+        ? // If it's only one type of suspender we can flatten it.
+          groups[0].map(entry => (
+            <SuspendedByRow
+              key={entry.index}
+              index={entry.index}
+              asyncInfo={entry.value}
+              bridge={bridge}
+              element={element}
+              inspectedElement={inspectedElement}
+              store={store}
+              minTime={minTime}
+              maxTime={maxTime}
+            />
+          ))
+        : groups.map((entries, index) =>
+            entries.length === 1 ? (
+              <SuspendedByRow
+                key={entries[0].index}
+                index={entries[0].index}
+                asyncInfo={entries[0].value}
+                bridge={bridge}
+                element={element}
+                inspectedElement={inspectedElement}
+                store={store}
+                minTime={minTime}
+                maxTime={maxTime}
+              />
+            ) : (
+              <SuspendedByGroup
+                key={entries[0].index}
+                name={entries[0].value.awaited.name}
+                environment={entries[0].value.awaited.env}
+                suspendedBy={entries}
+                bridge={bridge}
+                element={element}
+                inspectedElement={inspectedElement}
+                store={store}
+                minTime={minTime}
+                maxTime={maxTime}
+              />
+            ),
+          )}
+      {unknownSuspenders}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
new file mode 100644
index 00000000000..12c20cc9548
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
@@ -0,0 +1,30 @@
+.OwnersHeader {
+  font-family: var(--font-family-sans);
+}
+
+.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);
+}
+
+.InspectedElementSection:not(:empty) {
+  padding: 0.25rem;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+
+.OwnersMetaField {
+  padding-left: 1.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.RenderedBySkeleton {
+  padding-left: 1.25rem;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
new file mode 100644
index 00000000000..6d3d0d604fd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -0,0 +1,234 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext} from 'react';
+import {BridgeContext, StoreContext} from '../context';
+import InspectedElementBadges from './InspectedElementBadges';
+import InspectedElementContextTree from './InspectedElementContextTree';
+import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
+import InspectedElementHooksTree from './InspectedElementHooksTree';
+import InspectedElementPropsTree from './InspectedElementPropsTree';
+import InspectedElementStateTree from './InspectedElementStateTree';
+import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
+import InspectedElementSuspendedBy from './InspectedElementSuspendedBy';
+import NativeStyleEditor from './NativeStyleEditor';
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
+import InspectedElementSourcePanel from './InspectedElementSourcePanel';
+import StackTraceView from './StackTraceView';
+import OwnerView from './OwnerView';
+import Skeleton from './Skeleton';
+import {
+  ElementTypeSuspense,
+  ElementTypeActivity,
+} from 'react-devtools-shared/src/frontend/types';
+
+import styles from './InspectedElementView.css';
+
+import type {
+  Element,
+  InspectedElement,
+} from 'react-devtools-shared/src/frontend/types';
+import type {HookNames} from 'react-devtools-shared/src/frontend/types';
+import type {ToggleParseHookNames} from './InspectedElementContext';
+import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+
+type Props = {
+  element: Element,
+  hookNames: HookNames | null,
+  inspectedElement: InspectedElement,
+  parseHookNames: boolean,
+  toggleParseHookNames: ToggleParseHookNames,
+  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
+};
+
+export default function InspectedElementView({
+  element,
+  hookNames,
+  inspectedElement,
+  parseHookNames,
+  toggleParseHookNames,
+  symbolicatedSourcePromise,
+}: Props): React.Node {
+  const {
+    stack,
+    owners,
+    rendererPackageName,
+    rendererVersion,
+    rootType,
+    source,
+    nativeTag,
+    type,
+  } = inspectedElement;
+
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const rendererLabel =
+    rendererPackageName !== null && rendererVersion !== null
+      ? `${rendererPackageName}@${rendererVersion}`
+      : null;
+  const showOwnersList = owners !== null && owners.length > 0;
+  const showStack = stack != null && stack.length > 0;
+  const showRenderedBy =
+    showStack || showOwnersList || rendererLabel !== null || rootType !== null;
+
+  const propsSection = (
+    <div className={styles.InspectedElementSection}>
+      <InspectedElementPropsTree
+        bridge={bridge}
+        element={element}
+        inspectedElement={inspectedElement}
+        store={store}
+      />
+    </div>
+  );
+
+  return (
+    <Fragment>
+      <div className={styles.InspectedElement}>
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementBadges
+            hocDisplayNames={element.hocDisplayNames}
+            compiledWithForget={element.compiledWithForget}
+            nativeTag={nativeTag}
+          />
+        </div>
+
+        {
+          // For Suspense and Activity we show the props further down.
+          type !== ElementTypeSuspense && type !== ElementTypeActivity
+            ? propsSection
+            : null
+        }
+
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementStateTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
+
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementHooksTree
+            bridge={bridge}
+            element={element}
+            hookNames={hookNames}
+            inspectedElement={inspectedElement}
+            parseHookNames={parseHookNames}
+            store={store}
+            toggleParseHookNames={toggleParseHookNames}
+          />
+        </div>
+
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementContextTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
+
+        {enableStyleXFeatures && (
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementStyleXPlugin
+              bridge={bridge}
+              element={element}
+              inspectedElement={inspectedElement}
+              store={store}
+            />
+          </div>
+        )}
+
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementErrorsAndWarningsTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
+
+        <div className={styles.InspectedElementSection}>
+          <NativeStyleEditor />
+        </div>
+
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementSuspendedBy
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
+
+        {
+          // For Suspense and Activity we show the props below suspended by to give that more priority.
+          type !== ElementTypeSuspense && type !== ElementTypeActivity
+            ? null
+            : propsSection
+        }
+
+        {showRenderedBy && (
+          <div
+            className={styles.InspectedElementSection}
+            data-testname="InspectedElementView-Owners">
+            <div className={styles.OwnersHeader}>rendered by</div>
+            <React.Suspense
+              fallback={
+                <div className={styles.RenderedBySkeleton}>
+                  <Skeleton height={16} width="40%" />
+                </div>
+              }>
+              {showStack ? <StackTraceView stack={stack} /> : null}
+              {showOwnersList &&
+                owners?.map(owner => (
+                  <Fragment key={owner.id}>
+                    <OwnerView
+                      displayName={owner.displayName || 'Anonymous'}
+                      hocDisplayNames={owner.hocDisplayNames}
+                      environmentName={
+                        inspectedElement.env === owner.env ? null : owner.env
+                      }
+                      compiledWithForget={owner.compiledWithForget}
+                      id={owner.id}
+                      isInStore={store.containsElement(owner.id)}
+                      type={owner.type}
+                    />
+                    {owner.stack != null && owner.stack.length > 0 ? (
+                      <StackTraceView stack={owner.stack} />
+                    ) : null}
+                  </Fragment>
+                ))}
+
+              {rootType !== null && (
+                <div className={styles.OwnersMetaField}>{rootType}</div>
+              )}
+              {rendererLabel !== null && (
+                <div className={styles.OwnersMetaField}>{rendererLabel}</div>
+              )}
+            </React.Suspense>
+          </div>
+        )}
+
+        {source != null && (
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementSourcePanel
+              source={source}
+              symbolicatedSourcePromise={symbolicatedSourcePromise}
+            />
+          </div>
+        )}
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js
new file mode 100644
index 00000000000..7170c2494f9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import ButtonIcon from '../ButtonIcon';
+import Button from '../Button';
+
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+
+import useOpenResource from '../useOpenResource';
+
+type Props = {
+  source: null | ReactFunctionLocation,
+  symbolicatedSourcePromise: Promise<SourceMappedLocation | null> | null,
+};
+
+function InspectedElementViewSourceButton({
+  source,
+  symbolicatedSourcePromise,
+}: Props): React.Node {
+  return (
+    <React.Suspense
+      fallback={
+        <Button disabled={true} title="Loading source maps...">
+          <ButtonIcon type="view-source" />
+        </Button>
+      }>
+      <ActualSourceButton
+        source={source}
+        symbolicatedSourcePromise={symbolicatedSourcePromise}
+      />
+    </React.Suspense>
+  );
+}
+
+type ActualSourceButtonProps = {
+  source: null | ReactFunctionLocation,
+  symbolicatedSourcePromise: Promise<SourceMappedLocation | null> | null,
+};
+function ActualSourceButton({
+  source,
+  symbolicatedSourcePromise,
+}: ActualSourceButtonProps): React.Node {
+  const symbolicatedSource =
+    symbolicatedSourcePromise == null
+      ? null
+      : React.use(symbolicatedSourcePromise);
+
+  const [buttonIsEnabled, viewSource] = useOpenResource(
+    source,
+    symbolicatedSource == null ? null : symbolicatedSource.location,
+  );
+  return (
+    <Button
+      disabled={!buttonIsEnabled}
+      onClick={viewSource}
+      title="View source for this element">
+      <ButtonIcon type="view-source" />
+    </Button>
+  );
+}
+
+export default InspectedElementViewSourceButton;
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 00000000000..0c0f5e852d9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -0,0 +1,59 @@
+.Item:not([hidden]) {
+  display: flex;
+}
+
+.Name {
+  color: var(--color-attribute-name-not-editable);
+  flex: 0 0 auto;
+  cursor: default;
+}
+
+.EditableName {
+  color: var(--color-attribute-name);
+  flex: 0 0 auto;
+  cursor: default;
+}
+
+.AfterName {
+  color: var(--color-text);
+  margin-right: 0.5rem;
+}
+
+.Value {
+  color: var(--color-attribute-value);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+  flex: 1;
+}
+
+.Link {
+  color: var(--color-link);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  padding: 0px 2px;
+}
+
+.Link:hover {
+  background-color: var(--color-background-hover);
+}
+
+
+.ExpandCollapseToggleSpacer {
+  flex: 0 0 1rem;
+  width: 1rem;
+}
+
+.DeleteArrayItemButton {
+  padding: 0;
+  margin-right: 0.125rem;
+}
+
+.HookName {
+  color: var(--color-component-name);
+}
\ No newline at end of file
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 00000000000..89342ccffc1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -0,0 +1,586 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useTransition, useContext, useRef, useState, useMemo} from 'react';
+import {OptionsContext} from '../context';
+import EditableName from './EditableName';
+import EditableValue from './EditableValue';
+import NewArrayValue from './NewArrayValue';
+import NewKeyValue from './NewKeyValue';
+import LoadingAnimation from './LoadingAnimation';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
+import {alphaSortEntries, getMetaValueLabel} from '../utils';
+import {meta} from '../../../hydration';
+import Store from '../../store';
+import {parseHookPathForEdit} from './utils';
+import styles from './KeyValue.css';
+import Button from 'react-devtools-shared/src/devtools/views/Button';
+import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
+import isArray from 'react-devtools-shared/src/isArray';
+import {InspectedElementContext} from './InspectedElementContext';
+import {PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE} from './constants';
+import KeyValueContextMenuContainer from './KeyValueContextMenuContainer';
+import {ContextMenuContext} from '../context';
+
+import type {ContextMenuContextType} from '../context';
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+import type {Element as ReactElement} from 'react';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+// $FlowFixMe[method-unbinding]
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+type Type = 'props' | 'state' | 'context' | 'hooks';
+
+type KeyValueProps = {
+  alphaSort: boolean,
+  bridge: FrontendBridge,
+  canDeletePaths: boolean,
+  canEditValues: boolean,
+  canRenamePaths: boolean,
+  canRenamePathsAtDepth?: (depth: number) => boolean,
+  depth: number,
+  element: Element,
+  hidden: boolean,
+  hookID?: ?number,
+  hookName?: ?string,
+  inspectedElement: InspectedElement,
+  isDirectChildOfAnArray?: boolean,
+  name: string,
+  path: Array<any>,
+  pathRoot: Type,
+  store: Store,
+  value: any,
+};
+
+export default function KeyValue({
+  alphaSort,
+  bridge,
+  canDeletePaths,
+  canEditValues,
+  canRenamePaths,
+  canRenamePathsAtDepth,
+  depth,
+  element,
+  inspectedElement,
+  isDirectChildOfAnArray,
+  hidden,
+  hookID,
+  hookName,
+  name,
+  path,
+  pathRoot,
+  store,
+  value,
+}: KeyValueProps): React.Node {
+  const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);
+  canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;
+  canEditValues = !readOnlyGlobalFlag && canEditValues;
+  canRenamePaths = !readOnlyGlobalFlag && canRenamePaths;
+
+  const {id} = inspectedElement;
+  const fullPath = useMemo(() => [pathRoot, ...path], [pathRoot, path]);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const contextMenuTriggerRef = useRef(null);
+
+  const {inspectPaths} = useContext(InspectedElementContext);
+  const {viewAttributeSourceFunction} =
+    useContext<ContextMenuContextType>(ContextMenuContext);
+
+  let isInspectable = false;
+  let isReadOnlyBasedOnMetadata = false;
+  if (value !== null && typeof value === 'object') {
+    isInspectable = value[meta.inspectable] && value[meta.size] !== 0;
+    isReadOnlyBasedOnMetadata = value[meta.readonly];
+  }
+
+  const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
+  const toggleIsOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    } else {
+      setIsOpen(true);
+
+      if (isInspectable) {
+        startInspectPathsTransition(() => {
+          inspectPaths([pathRoot, ...path]);
+        });
+      }
+    }
+  };
+
+  const dataType = typeof value;
+  const isSimpleType =
+    dataType === 'number' ||
+    dataType === 'string' ||
+    dataType === 'boolean' ||
+    value == null;
+
+  const pathType =
+    value !== null &&
+    typeof value === 'object' &&
+    hasOwnProperty.call(value, meta.type)
+      ? value[meta.type]
+      : typeof value;
+  const pathIsFunction = pathType === 'function';
+
+  const style = {
+    paddingLeft: `${(depth - 1) * 0.75}rem`,
+  };
+
+  const overrideValue = (newPath: Array<string | number>, newValue: any) => {
+    if (hookID != null) {
+      newPath = parseHookPathForEdit(newPath);
+    }
+
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      bridge.send('overrideValueAtPath', {
+        hookID,
+        id,
+        path: newPath,
+        rendererID,
+        type: pathRoot,
+        value: newValue,
+      });
+    }
+  };
+
+  const deletePath = (pathToDelete: Array<string | number>) => {
+    if (hookID != null) {
+      pathToDelete = parseHookPathForEdit(pathToDelete);
+    }
+
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      bridge.send('deletePath', {
+        hookID,
+        id,
+        path: pathToDelete,
+        rendererID,
+        type: pathRoot,
+      });
+    }
+  };
+
+  const renamePath = (
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ) => {
+    if (newPath[newPath.length - 1] === '') {
+      // Deleting the key suggests an intent to delete the whole path.
+      if (canDeletePaths) {
+        deletePath(oldPath);
+      }
+    } else {
+      if (hookID != null) {
+        oldPath = parseHookPathForEdit(oldPath);
+        newPath = parseHookPathForEdit(newPath);
+      }
+
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        bridge.send('renamePath', {
+          hookID,
+          id,
+          newPath,
+          oldPath,
+          rendererID,
+          type: pathRoot,
+        });
+      }
+    }
+  };
+
+  // TRICKY This is a bit of a hack to account for context and hooks.
+  // In these cases, paths can be renamed but only at certain depths.
+  // The special "value" wrapper for context shouldn't be editable.
+  // Only certain types of hooks should be editable.
+  let canRenameTheCurrentPath = canRenamePaths;
+  if (canRenameTheCurrentPath && typeof canRenamePathsAtDepth === 'function') {
+    canRenameTheCurrentPath = canRenamePathsAtDepth(depth);
+  }
+
+  const hasChildren =
+    typeof value === 'object' &&
+    value !== null &&
+    (canEditValues ||
+      (isArray(value) && value.length > 0) ||
+      Object.entries(value).length > 0);
+
+  let renderedName;
+  if (isDirectChildOfAnArray) {
+    if (canDeletePaths) {
+      renderedName = (
+        <DeleteToggle name={name} deletePath={deletePath} path={path} />
+      );
+    } else {
+      renderedName = (
+        <span
+          className={styles.Name}
+          onClick={isInspectable || hasChildren ? toggleIsOpen : null}>
+          {name}
+          {!!hookName && <span className={styles.HookName}>({hookName})</span>}
+          <span className={styles.AfterName}>:</span>
+        </span>
+      );
+    }
+  } else if (canRenameTheCurrentPath) {
+    renderedName = (
+      <>
+        <EditableName
+          allowEmpty={canDeletePaths}
+          className={styles.EditableName}
+          initialValue={name}
+          overrideName={renamePath}
+          path={path}
+        />
+        <span className={styles.AfterName}>:</span>
+      </>
+    );
+  } else {
+    renderedName = (
+      <span
+        className={styles.Name}
+        data-testname="NonEditableName"
+        onClick={isInspectable || hasChildren ? toggleIsOpen : null}>
+        {name}
+        {!!hookName && <span className={styles.HookName}>({hookName})</span>}
+        <span className={styles.AfterName}>:</span>
+      </span>
+    );
+  }
+
+  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';
+    } else if (isNaN(value)) {
+      displayValue = 'NaN';
+    }
+
+    let shouldDisplayValueAsLink = false;
+    if (
+      dataType === 'string' &&
+      PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE.some(protocolPrefix =>
+        value.startsWith(protocolPrefix),
+      )
+    ) {
+      shouldDisplayValueAsLink = true;
+    }
+
+    children = (
+      <KeyValueContextMenuContainer
+        key="root"
+        anchorElementRef={contextMenuTriggerRef}
+        attributeSourceCanBeInspected={false}
+        canBeCopiedToClipboard={true}
+        store={store}
+        bridge={bridge}
+        id={id}
+        path={fullPath}>
+        <div
+          data-testname="KeyValue"
+          className={styles.Item}
+          hidden={hidden}
+          ref={contextMenuTriggerRef}
+          style={style}>
+          <div className={styles.ExpandCollapseToggleSpacer} />
+          {renderedName}
+          {canEditValues ? (
+            <EditableValue
+              overrideValue={overrideValue}
+              path={path}
+              value={value}
+            />
+          ) : shouldDisplayValueAsLink ? (
+            <a
+              className={styles.Link}
+              href={value}
+              target="_blank"
+              rel="noopener noreferrer">
+              {displayValue}
+            </a>
+          ) : (
+            <span className={styles.Value} data-testname="NonEditableValue">
+              {displayValue}
+            </span>
+          )}
+        </div>
+      </KeyValueContextMenuContainer>
+    );
+  } else if (pathIsFunction && viewAttributeSourceFunction != null) {
+    children = (
+      <KeyValueContextMenuContainer
+        key="root"
+        anchorElementRef={contextMenuTriggerRef}
+        attributeSourceCanBeInspected={true}
+        canBeCopiedToClipboard={false}
+        store={store}
+        bridge={bridge}
+        id={id}
+        path={fullPath}>
+        <div
+          data-testname="KeyValue"
+          className={styles.Item}
+          hidden={hidden}
+          ref={contextMenuTriggerRef}
+          style={style}>
+          <div className={styles.ExpandCollapseToggleSpacer} />
+          {renderedName}
+          <span
+            className={styles.Link}
+            onClick={() => {
+              viewAttributeSourceFunction(id, fullPath);
+            }}>
+            {getMetaValueLabel(value)}
+          </span>
+        </div>
+      </KeyValueContextMenuContainer>
+    );
+  } else if (
+    hasOwnProperty.call(value, meta.type) &&
+    !hasOwnProperty.call(value, meta.unserializable)
+  ) {
+    children = (
+      <KeyValueContextMenuContainer
+        key="root"
+        anchorElementRef={contextMenuTriggerRef}
+        attributeSourceCanBeInspected={false}
+        canBeCopiedToClipboard={true}
+        store={store}
+        bridge={bridge}
+        id={id}
+        path={fullPath}>
+        <div
+          data-testname="KeyValue"
+          className={styles.Item}
+          hidden={hidden}
+          ref={contextMenuTriggerRef}
+          style={style}>
+          {isInspectable ? (
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={toggleIsOpen} />
+          ) : (
+            <div className={styles.ExpandCollapseToggleSpacer} />
+          )}
+          {renderedName}
+          <span
+            className={styles.Value}
+            onClick={isInspectable ? toggleIsOpen : undefined}>
+            {getMetaValueLabel(value)}
+          </span>
+        </div>
+      </KeyValueContextMenuContainer>
+    );
+
+    if (isInspectPathsPending) {
+      children = (
+        <>
+          {children}
+          <div className={styles.Item} style={style}>
+            <div className={styles.ExpandCollapseToggleSpacer} />
+            <LoadingAnimation />
+          </div>
+        </>
+      );
+    }
+  } else {
+    if (isArray(value)) {
+      const displayName = getMetaValueLabel(value);
+
+      children = value.map((innerValue, index) => (
+        <KeyValue
+          key={index}
+          alphaSort={alphaSort}
+          bridge={bridge}
+          canDeletePaths={canDeletePaths && !isReadOnlyBasedOnMetadata}
+          canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}
+          canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}
+          canRenamePathsAtDepth={canRenamePathsAtDepth}
+          depth={depth + 1}
+          element={element}
+          hookID={hookID}
+          inspectedElement={inspectedElement}
+          isDirectChildOfAnArray={true}
+          hidden={hidden || !isOpen}
+          name={index}
+          path={path.concat(index)}
+          pathRoot={pathRoot}
+          store={store}
+          value={value[index]}
+        />
+      ));
+
+      if (canEditValues && !isReadOnlyBasedOnMetadata) {
+        children.push(
+          <NewArrayValue
+            key="NewKeyValue"
+            bridge={bridge}
+            depth={depth + 1}
+            hidden={hidden || !isOpen}
+            hookID={hookID}
+            index={value.length}
+            element={element}
+            inspectedElement={inspectedElement}
+            path={path}
+            store={store}
+            type={pathRoot}
+          />,
+        );
+      }
+
+      children.unshift(
+        <KeyValueContextMenuContainer
+          key={`${depth}-root`}
+          anchorElementRef={contextMenuTriggerRef}
+          attributeSourceCanBeInspected={pathIsFunction}
+          canBeCopiedToClipboard={!pathIsFunction}
+          store={store}
+          bridge={bridge}
+          id={id}
+          path={fullPath}>
+          <div
+            data-testname="KeyValue"
+            className={styles.Item}
+            hidden={hidden}
+            ref={contextMenuTriggerRef}
+            style={style}>
+            {hasChildren ? (
+              <ExpandCollapseToggle isOpen={isOpen} setIsOpen={toggleIsOpen} />
+            ) : (
+              <div className={styles.ExpandCollapseToggleSpacer} />
+            )}
+            {renderedName}
+            <span
+              className={styles.Value}
+              onClick={hasChildren ? toggleIsOpen : undefined}>
+              {displayName}
+            </span>
+          </div>
+        </KeyValueContextMenuContainer>,
+      );
+    } 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 displayName = getMetaValueLabel(value);
+
+      children = entries.map(([key, keyValue]): ReactElement<any> => (
+        <KeyValue
+          key={key}
+          alphaSort={alphaSort}
+          bridge={bridge}
+          canDeletePaths={canDeletePaths && !isReadOnlyBasedOnMetadata}
+          canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}
+          canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}
+          canRenamePathsAtDepth={canRenamePathsAtDepth}
+          depth={depth + 1}
+          element={element}
+          hookID={hookID}
+          inspectedElement={inspectedElement}
+          hidden={hidden || !isOpen}
+          name={key}
+          path={path.concat(key)}
+          pathRoot={pathRoot}
+          store={store}
+          value={keyValue}
+        />
+      ));
+
+      if (canEditValues && !isReadOnlyBasedOnMetadata) {
+        children.push(
+          <NewKeyValue
+            key="NewKeyValue"
+            bridge={bridge}
+            depth={depth + 1}
+            element={element}
+            hidden={hidden || !isOpen}
+            hookID={hookID}
+            inspectedElement={inspectedElement}
+            path={path}
+            store={store}
+            type={pathRoot}
+          />,
+        );
+      }
+
+      children.unshift(
+        <KeyValueContextMenuContainer
+          key={`${depth}-root`}
+          anchorElementRef={contextMenuTriggerRef}
+          attributeSourceCanBeInspected={pathIsFunction}
+          canBeCopiedToClipboard={!pathIsFunction}
+          store={store}
+          bridge={bridge}
+          id={id}
+          path={fullPath}>
+          <div
+            data-testname="KeyValue"
+            className={styles.Item}
+            hidden={hidden}
+            ref={contextMenuTriggerRef}
+            style={style}>
+            {hasChildren ? (
+              <ExpandCollapseToggle isOpen={isOpen} setIsOpen={toggleIsOpen} />
+            ) : (
+              <div className={styles.ExpandCollapseToggleSpacer} />
+            )}
+            {renderedName}
+            <span
+              className={styles.Value}
+              onClick={hasChildren ? toggleIsOpen : undefined}>
+              {displayName}
+            </span>
+          </div>
+        </KeyValueContextMenuContainer>,
+      );
+    }
+  }
+
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function DeleteToggle({deletePath, name, path}) {
+  // $FlowFixMe[missing-local-annot]
+  const handleClick = event => {
+    event.stopPropagation();
+    deletePath(path);
+  };
+
+  return (
+    <>
+      <Button
+        className={styles.DeleteArrayItemButton}
+        onClick={handleClick}
+        title="Delete entry">
+        <ButtonIcon type="delete" />
+      </Button>
+      <span className={styles.Name}>
+        {name}
+        <span className={styles.AfterName}>:</span>
+      </span>
+    </>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.css
new file mode 100644
index 00000000000..257dc97f543
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.css
@@ -0,0 +1,6 @@
+.ContextMenuItemContent {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.js
new file mode 100644
index 00000000000..572f6981c40
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.js
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext} from 'react';
+
+import {ContextMenuContext} from '../context';
+import {
+  copyInspectedElementPath as copyInspectedElementPathAPI,
+  storeAsGlobal as storeAsGlobalAPI,
+} from '../../../backendAPI';
+import Icon from '../Icon';
+import ContextMenuContainer from '../../ContextMenu/ContextMenuContainer';
+
+import type Store from 'react-devtools-shared/src/devtools/store';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {ContextMenuContextType} from '../context';
+
+import styles from './KeyValueContextMenuContainer.css';
+
+type Props = {
+  children: React.Node,
+  anchorElementRef: {
+    current: React.ElementRef<any> | null,
+  },
+  store: Store,
+  attributeSourceCanBeInspected: boolean,
+  bridge: FrontendBridge,
+  id: number,
+  path: Array<any>,
+  canBeCopiedToClipboard: boolean,
+};
+
+export default function KeyValueContextMenuContainer({
+  children,
+  anchorElementRef,
+  store,
+  attributeSourceCanBeInspected,
+  bridge,
+  id,
+  path,
+  canBeCopiedToClipboard,
+}: Props): React.Node {
+  const {
+    isEnabledForInspectedElement: isContextMenuEnabledForInspectedElement,
+    viewAttributeSourceFunction,
+  } = useContext<ContextMenuContextType>(ContextMenuContext);
+
+  const menuItems = React.useMemo(() => {
+    const items = [
+      {
+        onClick: () => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID !== null) {
+            storeAsGlobalAPI({
+              bridge,
+              id,
+              path,
+              rendererID,
+            });
+          }
+        },
+        content: (
+          <span className={styles.ContextMenuItemContent}>
+            <Icon type="store-as-global-variable" />
+            <label>Store as global variable</label>
+          </span>
+        ),
+      },
+    ];
+
+    if (canBeCopiedToClipboard) {
+      items.unshift({
+        onClick: () => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID !== null) {
+            copyInspectedElementPathAPI({
+              bridge,
+              id,
+              path,
+              rendererID,
+            });
+          }
+        },
+        content: (
+          <span className={styles.ContextMenuItemContent}>
+            <Icon type="copy" />
+            <label>Copy value to clipboard</label>
+          </span>
+        ),
+      });
+    }
+
+    if (viewAttributeSourceFunction != null && attributeSourceCanBeInspected) {
+      items.push({
+        onClick: () => viewAttributeSourceFunction(id, path),
+        content: (
+          <span className={styles.ContextMenuItemContent}>
+            <Icon type="code" />
+            <label>Go to definition</label>
+          </span>
+        ),
+      });
+    }
+    return items;
+  }, [
+    store,
+    viewAttributeSourceFunction,
+    attributeSourceCanBeInspected,
+    canBeCopiedToClipboard,
+    bridge,
+    id,
+    path,
+  ]);
+
+  if (!isContextMenuEnabledForInspectedElement) {
+    return children;
+  }
+
+  return (
+    <>
+      {children}
+      <ContextMenuContainer
+        anchorElementRef={anchorElementRef}
+        items={menuItems}
+      />
+    </>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.css b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.css
new file mode 100644
index 00000000000..2141ede58bd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.css
@@ -0,0 +1,5 @@
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
new file mode 100644
index 00000000000..c2219b3dd7f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import styles from './LoadingAnimation.css';
+
+type Props = {
+  className?: string,
+};
+
+export default function LoadingAnimation({className = ''}: Props): React.Node {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${styles.Icon} ${className}`}
+      width="24"
+      height="24"
+      viewBox="0 0 100 100">
+      <path d="M0 0h100v100H0z" fill="none" />
+      <circle fill="currentColor" stroke="none" cx="20" cy="50" r="10">
+        <animate
+          attributeName="opacity"
+          dur="1s"
+          values="0;1;0"
+          repeatCount="indefinite"
+          begin="0.1"
+        />
+      </circle>
+      <circle fill="currentColor" stroke="none" cx="50" cy="50" r="10">
+        <animate
+          attributeName="opacity"
+          dur="1s"
+          values="0;1;0"
+          repeatCount="indefinite"
+          begin="0.2"
+        />
+      </circle>
+      <circle fill="currentColor" stroke="none" cx="80" cy="50" r="10">
+        <animate
+          attributeName="opacity"
+          dur="1s"
+          values="0;1;0"
+          repeatCount="indefinite"
+          begin="0.3"
+        />
+      </circle>
+    </svg>
+  );
+}
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 00000000000..2c3a3af3abf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.css
@@ -0,0 +1,15 @@
+.Input {
+  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);
+}
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 00000000000..524e6d02ccf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import styles from './AutoSizeInput.css';
+
+type Props = {
+  className?: string,
+  onFocus?: (event: FocusEvent) => void,
+  placeholder?: string,
+  testName?: ?string,
+  value: any,
+};
+
+export default function AutoSizeInput({
+  className,
+  onFocus,
+  placeholder = '',
+  testName,
+  value,
+  ...rest
+}: Props): React.Node {
+  // $FlowFixMe[missing-local-annot]
+  const onFocusWrapper = event => {
+    const input = event.target;
+    if (input !== null) {
+      input.selectionStart = 0;
+      input.selectionEnd = value.length;
+    }
+
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
+  };
+
+  const isEmpty = value === '' || value === '""';
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] unsafe rest spread
+    <input
+      className={[styles.Input, className].join(' ')}
+      data-testname={testName}
+      onFocus={onFocusWrapper}
+      placeholder={placeholder}
+      style={{
+        width: `calc(${isEmpty ? placeholder.length : value.length}ch + 1px)`,
+      }}
+      value={isEmpty ? '' : value}
+      {...rest}
+    />
+  );
+}
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 00000000000..44bc93f88c2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.css
@@ -0,0 +1,49 @@
+.LayoutViewer {
+  padding: 0.25rem;
+  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 00000000000..4fe5185c8f2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as 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): React.Node {
+  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 00000000000..bf7a8b27fa8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
@@ -0,0 +1,51 @@
+.StyleEditor {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  padding: 0.25rem;
+}
+
+.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);
+}
+
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 00000000000..2bb9aec2219
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext, useMemo, useRef, useState} from 'react';
+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 {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+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): React.Node {
+  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 = withPermissionsCheck(
+    {permissions: ['clipboardWrite']},
+    () => 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}/${style[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,
+  // although we could let it also inject a custom set of allowed attributes.
+
+  const [localAttribute, setLocalAttribute] = useState(attribute);
+  const [localValue, setLocalValue] = useState(JSON.stringify(value));
+  const [isAttributeValid, setIsAttributeValid] = useState(true);
+  const [isValueValid, setIsValueValid] = useState(true);
+
+  // $FlowFixMe[missing-local-annot]
+  const validateAndSetLocalAttribute = newAttribute => {
+    const isValid =
+      newAttribute === '' ||
+      validAttributes === null ||
+      validAttributes.indexOf(newAttribute) >= 0;
+
+    setLocalAttribute(newAttribute);
+    setIsAttributeValid(isValid);
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  const validateAndSetLocalValue = newValue => {
+    let isValid = false;
+    try {
+      JSON.parse(sanitizeForParse(newValue));
+      isValid = true;
+    } catch (error) {}
+
+    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) {
+  // $FlowFixMe[missing-local-annot]
+  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: $FlowFixMe) => 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 00000000000..e51719ebe1c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {createContext, useContext, useEffect, useState} from 'react';
+import {
+  BridgeContext,
+  StoreContext,
+} from 'react-devtools-shared/src/devtools/views/context';
+import {TreeStateContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+
+import type {StateContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
+import type {StyleAndLayout as StyleAndLayoutBackend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';
+
+type Context = StyleAndLayoutFrontend | null;
+
+const NativeStyleContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+NativeStyleContext.displayName = 'NativeStyleContext';
+
+type Props = {
+  children: React$Node,
+};
+
+function NativeStyleContextController({children}: Props): React.Node {
+  const bridge = useContext<FrontendBridge>(BridgeContext);
+  const store = useContext<Store>(StoreContext);
+  const {inspectedElementID} = useContext<StateContext>(TreeStateContext);
+
+  const [currentStyleAndLayout, setCurrentStyleAndLayout] =
+    useState<StyleAndLayoutFrontend | null>(null);
+
+  // This effect handler polls for updates on the currently selected element.
+  useEffect(() => {
+    if (inspectedElementID === null) {
+      setCurrentStyleAndLayout(null);
+      return () => {};
+    }
+
+    let requestTimeoutId: TimeoutID | null = null;
+    const sendRequest = () => {
+      requestTimeoutId = null;
+      const rendererID = store.getRendererIDForElement(inspectedElementID);
+
+      if (rendererID !== null) {
+        bridge.send('NativeStyleEditor_measure', {
+          id: inspectedElementID,
+          rendererID,
+        });
+      }
+    };
+
+    // Send the initial measurement request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
+
+    const onStyleAndLayout = ({id, layout, style}: StyleAndLayoutBackend) => {
+      // If this is the element we requested, wait a little bit and then ask for another update.
+      if (id === inspectedElementID) {
+        if (requestTimeoutId !== null) {
+          clearTimeout(requestTimeoutId);
+        }
+        requestTimeoutId = setTimeout(sendRequest, 1000);
+      }
+
+      const styleAndLayout: StyleAndLayoutFrontend = {
+        layout,
+        style,
+      };
+      setCurrentStyleAndLayout(styleAndLayout);
+    };
+
+    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+    return () => {
+      bridge.removeListener(
+        'NativeStyleEditor_styleAndLayout',
+        onStyleAndLayout,
+      );
+
+      if (requestTimeoutId !== null) {
+        clearTimeout(requestTimeoutId);
+      }
+    };
+  }, [bridge, inspectedElementID, store]);
+
+  return (
+    <NativeStyleContext.Provider value={currentStyleAndLayout}>
+      {children}
+    </NativeStyleContext.Provider>
+  );
+}
+
+export {NativeStyleContext, NativeStyleContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.css
new file mode 100644
index 00000000000..d4b1ad2be82
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.css
@@ -0,0 +1,3 @@
+.Stack > *:not(:first-child) {
+  border-top: 1px solid var(--color-border);
+}
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 00000000000..bf3f6a8e9f3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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 {TreeStateContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+
+import {NativeStyleContext} from './context';
+import LayoutViewer from './LayoutViewer';
+import StyleEditor from './StyleEditor';
+import styles from './index.css';
+
+export default function NativeStyleEditorWrapper(): React.Node {
+  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() {
+  const {inspectedElementID} = useContext(TreeStateContext);
+  const inspectedElementStyleAndLayout = useContext(NativeStyleContext);
+  if (inspectedElementID === null) {
+    return null;
+  }
+  if (inspectedElementStyleAndLayout === null) {
+    return null;
+  }
+
+  const {layout, style} = inspectedElementStyleAndLayout;
+  if (layout === null && style === null) {
+    return null;
+  }
+
+  return (
+    <div className={styles.Stack}>
+      {layout !== null && (
+        <LayoutViewer id={inspectedElementID} layout={layout} />
+      )}
+      {style !== null && <StyleEditor id={inspectedElementID} style={style} />}
+    </div>
+  );
+}
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 00000000000..6fb5b26798a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/NativeTagBadge.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css
new file mode 100644
index 00000000000..cebc617e69c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css
@@ -0,0 +1,3 @@
+.Badge {
+  cursor: help;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js
new file mode 100644
index 00000000000..c092891ec9d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Badge from './Badge';
+import Tooltip from './reach-ui/tooltip';
+
+import styles from './NativeTagBadge.css';
+
+type Props = {
+  nativeTag: number,
+};
+
+const title =
+  'Unique identifier for the corresponding native component. React Native only.';
+
+export default function NativeTagBadge({nativeTag}: Props): React.Node {
+  return (
+    <Tooltip label={title}>
+      <Badge className={styles.Badge}>Tag {nativeTag}</Badge>
+    </Tooltip>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
new file mode 100644
index 00000000000..74217d8fd6c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
@@ -0,0 +1,18 @@
+.NewArrayValue {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.EditableName {
+  margin-left: 1rem;
+}
+
+.Invalid {
+  background-color: var(--color-background-invalid);
+  color: var(--color-text-invalid) !important;
+}
+
+.Invalid:focus {
+  background-color: var(--color-button-background-focus);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
new file mode 100644
index 00000000000..efaf0d6ac16
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useState} from 'react';
+import Store from '../../store';
+import EditableName from './EditableName';
+import {smartParse} from '../../utils';
+import {parseHookPathForEdit} from './utils';
+import styles from './NewArrayValue.css';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+type Props = {
+  bridge: FrontendBridge,
+  depth: number,
+  hidden: boolean,
+  hookID?: ?number,
+  index: number,
+  inspectedElement: InspectedElement,
+  path: Array<string | number>,
+  store: Store,
+  type: 'props' | 'context' | 'hooks' | 'state',
+};
+
+export default function NewArrayValue({
+  bridge,
+  depth,
+  hidden,
+  hookID,
+  index,
+  inspectedElement,
+  path,
+  store,
+  type,
+}: Props): React.Node {
+  const [key, setKey] = useState<number>(0);
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  // This is a bit of an unusual usage of the EditableName component,
+  // but otherwise it acts the way we want for a new Array entry.
+  // $FlowFixMe[missing-local-annot]
+  const overrideName = (oldPath: any, newPath) => {
+    const value = newPath[newPath.length - 1];
+
+    let parsedValue;
+    let newIsInvalid = true;
+    try {
+      parsedValue = smartParse(value);
+      newIsInvalid = false;
+    } catch (error) {}
+
+    if (isInvalid !== newIsInvalid) {
+      setIsInvalid(newIsInvalid);
+    }
+
+    if (!newIsInvalid) {
+      setKey(key + 1);
+
+      const {id} = inspectedElement;
+      const rendererID = store.getRendererIDForElement(id);
+      if (rendererID !== null) {
+        let basePath = path;
+        if (hookID != null) {
+          basePath = parseHookPathForEdit(basePath);
+        }
+
+        bridge.send('overrideValueAtPath', {
+          type,
+          hookID,
+          id,
+          path: [...basePath, index],
+          rendererID,
+          value: parsedValue,
+        });
+      }
+    }
+  };
+
+  return (
+    <div
+      key={key}
+      hidden={hidden}
+      style={{
+        paddingLeft: `${(depth - 1) * 0.75}rem`,
+      }}>
+      <div className={styles.NewArrayValue}>
+        <EditableName
+          allowWhiteSpace={true}
+          autoFocus={key > 0}
+          className={[styles.EditableName, isInvalid && styles.Invalid].join(
+            ' ',
+          )}
+          initialValue=""
+          overrideName={overrideName}
+          path={path}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.css
new file mode 100644
index 00000000000..e17e5188578
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.css
@@ -0,0 +1,13 @@
+.NewKeyValue {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.EditableName {
+  margin-left: 1rem;
+}
+
+.EditableValue {
+  min-width: 1rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
new file mode 100644
index 00000000000..09053b18e4c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useState} from 'react';
+import Store from '../../store';
+import EditableName from './EditableName';
+import EditableValue from './EditableValue';
+import {parseHookPathForEdit} from './utils';
+import styles from './NewKeyValue.css';
+
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+type Props = {
+  bridge: FrontendBridge,
+  depth: number,
+  hidden: boolean,
+  hookID?: ?number,
+  inspectedElement: InspectedElement,
+  path: Array<string | number>,
+  store: Store,
+  type: 'props' | 'state' | 'hooks' | 'context',
+};
+
+export default function NewKeyValue({
+  bridge,
+  depth,
+  hidden,
+  hookID,
+  inspectedElement,
+  path,
+  store,
+  type,
+}: Props): React.Node {
+  const [newPropKey, setNewPropKey] = useState<number>(0);
+  const [newPropName, setNewPropName] = useState<string>('');
+
+  // $FlowFixMe[missing-local-annot]
+  const overrideNewEntryName = (oldPath: any, newPath) => {
+    setNewPropName(newPath[newPath.length - 1]);
+  };
+
+  const overrideNewEntryValue = (
+    newPath: Array<string | number>,
+    value: any,
+  ) => {
+    if (!newPropName) {
+      return;
+    }
+
+    setNewPropName('');
+    setNewPropKey(newPropKey + 1);
+
+    const {id} = inspectedElement;
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      let basePath: Array<string | number> = newPath;
+      if (hookID != null) {
+        basePath = parseHookPathForEdit(basePath);
+      }
+
+      bridge.send('overrideValueAtPath', {
+        type,
+        hookID,
+        id,
+        path: basePath,
+        rendererID,
+        value,
+      });
+    }
+  };
+
+  return (
+    <div
+      data-testname="NewKeyValue"
+      key={newPropKey}
+      hidden={hidden}
+      style={{
+        paddingLeft: `${(depth - 1) * 0.75}rem`,
+      }}>
+      <div className={styles.NewKeyValue}>
+        <EditableName
+          autoFocus={newPropKey > 0}
+          className={styles.EditableName}
+          overrideName={overrideNewEntryName}
+          path={[]}
+        />
+        :&nbsp;
+        <EditableValue
+          className={styles.EditableValue}
+          overrideValue={overrideNewEntryValue}
+          path={[...path, newPropName]}
+          value={''}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js b/packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js
new file mode 100644
index 00000000000..b739a060281
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Button from 'react-devtools-shared/src/devtools/views/Button';
+import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
+
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+
+import {checkConditions} from '../Editor/utils';
+
+type Props = {
+  editorURL: string,
+  source: ReactFunctionLocation,
+  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
+};
+
+function OpenSymbolicatedSourceInEditorButton({
+  editorURL,
+  source,
+  symbolicatedSourcePromise,
+}: Props): React.Node {
+  const symbolicatedSource = React.use(symbolicatedSourcePromise);
+
+  const {url, shouldDisableButton} = checkConditions(
+    editorURL,
+    symbolicatedSource ? symbolicatedSource.location : source,
+  );
+
+  return (
+    <Button
+      disabled={shouldDisableButton}
+      onClick={() => window.open(url)}
+      title="Open in editor">
+      <ButtonIcon type="editor" />
+    </Button>
+  );
+}
+
+function OpenInEditorButton(props: Props): React.Node {
+  return (
+    <React.Suspense
+      fallback={
+        <Button disabled={true} title="retrieving original source…">
+          <ButtonIcon type="editor" />
+        </Button>
+      }>
+      <OpenSymbolicatedSourceInEditorButton {...props} />
+    </React.Suspense>
+  );
+}
+
+export default OpenInEditorButton;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnerView.css b/packages/react-devtools-shared/src/devtools/views/Components/OwnerView.css
new file mode 100644
index 00000000000..985fe4b9fb5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnerView.css
@@ -0,0 +1,42 @@
+.Owner {
+  color: var(--color-component-name);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  background: none;
+  border: none;
+  display: block;
+}
+.Owner:focus {
+  outline: none;
+  background-color: var(--color-button-background-focus);
+}
+
+.OwnerButton {
+  cursor: pointer;
+  width: 100%;
+  padding: 0;
+}
+
+.OwnerContent {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  width: 100%;
+  border-radius: 0.25rem;
+}
+
+.OwnerContent:hover {
+  background-color: var(--color-background-hover);
+}
+
+.NotInStore {
+  color: var(--color-dim);
+  cursor: default;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnerView.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnerView.js
new file mode 100644
index 00000000000..2b0f4b035a2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnerView.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback, useContext} from 'react';
+import {TreeDispatcherContext} from './TreeContext';
+import Button from '../Button';
+import ElementBadges from './ElementBadges';
+import {useHighlightHostInstance} from '../hooks';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+
+import styles from './OwnerView.css';
+
+type OwnerViewProps = {
+  displayName: string,
+  hocDisplayNames: Array<string> | null,
+  environmentName: string | null,
+  compiledWithForget: boolean,
+  id: number,
+  isInStore: boolean,
+};
+
+export default function OwnerView({
+  displayName,
+  environmentName,
+  hocDisplayNames,
+  compiledWithForget,
+  id,
+  isInStore,
+}: OwnerViewProps): React.Node {
+  const dispatch = useContext(TreeDispatcherContext);
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+
+  const handleClick = useCallback(() => {
+    logEvent({
+      event_name: 'select-element',
+      metadata: {source: 'owner-view'},
+    });
+    dispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: id,
+    });
+  }, [dispatch, id]);
+
+  return (
+    <Button
+      key={id}
+      className={styles.OwnerButton}
+      disabled={!isInStore}
+      onClick={handleClick}
+      onMouseEnter={() => highlightHostInstance(id)}
+      onMouseLeave={clearHighlightHostInstance}>
+      <span className={styles.OwnerContent}>
+        <span
+          className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+          title={displayName}
+          data-testname="OwnerView">
+          {'<' + displayName + '>'}
+        </span>
+
+        <ElementBadges
+          hocDisplayNames={hocDisplayNames}
+          compiledWithForget={compiledWithForget}
+          environmentName={environmentName}
+        />
+      </span>
+    </Button>
+  );
+}
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 00000000000..060a5711626
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {createContext, useCallback, useContext, useEffect} from 'react';
+import {createResource} from '../../cache';
+import {BridgeContext, StoreContext} from '../context';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {backendToFrontendSerializedElementMapper} from 'react-devtools-shared/src/utils';
+
+import type {OwnersList} from 'react-devtools-shared/src/backend/types';
+import type {
+  Element,
+  SerializedElement,
+} from 'react-devtools-shared/src/frontend/types';
+import type {Resource, Thenable} from '../../cache';
+
+type Context = (id: number) => Array<SerializedElement> | null;
+
+const OwnersListContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+OwnersListContext.displayName = 'OwnersListContext';
+
+type ResolveFn = (ownersList: Array<SerializedElement> | null) => void;
+type InProgressRequest = {
+  promise: Thenable<Array<SerializedElement>>,
+  resolveFn: ResolveFn,
+};
+
+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
+const resource: Resource<
+  Element,
+  Element,
+  Array<SerializedElement>,
+> = createResource(
+  (element: Element) => {
+    const request = inProgressRequests.get(element);
+    if (request != null) {
+      return request.promise;
+    }
+
+    let resolveFn:
+      | ResolveFn
+      | ((
+          result: Promise<Array<SerializedElement>> | Array<SerializedElement>,
+        ) => void) = ((null: any): ResolveFn);
+    const promise = new Promise(resolve => {
+      resolveFn = resolve;
+    });
+
+    // $FlowFixMe[incompatible-call] found when upgrading Flow
+    inProgressRequests.set(element, {promise, resolveFn});
+
+    return (promise: $FlowFixMe);
+  },
+  (element: Element) => element,
+  {useWeakMap: true},
+);
+
+type Props = {
+  children: React$Node,
+};
+
+function useChangeOwnerAction(): (nextOwnerID: number) => void {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const treeAction = useContext(TreeDispatcherContext);
+
+  return useCallback(
+    function changeOwnerAction(nextOwnerID: number) {
+      treeAction({type: 'SELECT_OWNER', payload: nextOwnerID});
+
+      const element = store.getElementByID(nextOwnerID);
+      if (element !== null) {
+        if (!inProgressRequests.has(element)) {
+          let resolveFn:
+            | ResolveFn
+            | ((
+                result:
+                  | Promise<Array<SerializedElement>>
+                  | Array<SerializedElement>,
+              ) => void) = ((null: any): ResolveFn);
+          const promise = new Promise(resolve => {
+            resolveFn = resolve;
+          });
+
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          inProgressRequests.set(element, {promise, resolveFn});
+        }
+
+        const rendererID = store.getRendererIDForElement(nextOwnerID);
+        if (rendererID !== null) {
+          bridge.send('getOwnersList', {id: nextOwnerID, rendererID});
+        }
+      }
+    },
+    [bridge, store],
+  );
+}
+
+function OwnersListContextController({children}: Props): React.Node {
+  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) {
+          request.resolveFn(
+            ownersList.owners === null
+              ? null
+              : ownersList.owners.map(backendToFrontendSerializedElementMapper),
+          );
+        }
+      }
+    };
+
+    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, useChangeOwnerAction};
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 00000000000..293faa98376
--- /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);
+}
+
+.BadgesBlock {
+  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 00000000000..09bdb96af01
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  Fragment,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import ElementBadges from './ElementBadges';
+import {OwnersListContext, useChangeOwnerAction} from './OwnersListContext';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {useIsOverflowing} from '../hooks';
+import {StoreContext} from '../context';
+import Tooltip from '../Components/reach-ui/tooltip';
+import {
+  Menu,
+  MenuList,
+  MenuButton,
+  MenuItem,
+} from '../Components/reach-ui/menu-button';
+
+import type {SerializedElement} from 'react-devtools-shared/src/frontend/types';
+
+import styles from './OwnersStack.css';
+
+type SelectOwner = (owner: SerializedElement | null) => void;
+
+type ACTION_UPDATE_OWNER_ID = {
+  type: 'UPDATE_OWNER_ID',
+  ownerID: number | null,
+  owners: Array<SerializedElement>,
+};
+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<SerializedElement>,
+  selectedIndex: number,
+};
+
+function dialogReducer(state: State, action: 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(): React.Node {
+  const read = useContext(OwnersListContext);
+  const {ownerID} = useContext(TreeStateContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const changeOwnerAction = useChangeOwnerAction();
+
+  const [state, dispatch] = useReducer<State, 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: SerializedElement | null) => {
+      if (owner !== null) {
+        const index = owners.indexOf(owner);
+        dispatch({
+          type: 'UPDATE_SELECTED_INDEX',
+          selectedIndex: index >= 0 ? index : 0,
+        });
+        changeOwnerAction(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 drilling 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 onClick={() => selectOwner(null)} title="Back to tree view">
+        <ButtonIcon type="close" />
+      </Button>
+    </div>
+  );
+}
+
+type ElementsDropdownProps = {
+  owners: Array<SerializedElement>,
+  selectedIndex: number,
+  selectOwner: SelectOwner,
+};
+function ElementsDropdown({owners, 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}
+
+        <ElementBadges
+          hocDisplayNames={owner.hocDisplayNames}
+          environmentName={owner.env}
+          compiledWithForget={owner.compiledWithForget}
+          className={styles.BadgesBlock}
+        />
+      </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: SerializedElement,
+  selectOwner: SelectOwner,
+  ...
+};
+function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {
+  const store = useContext(StoreContext);
+
+  const {displayName, hocDisplayNames, compiledWithForget} = 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}
+
+      <ElementBadges
+        hocDisplayNames={hocDisplayNames}
+        environmentName={owner.env}
+        compiledWithForget={compiledWithForget}
+        className={styles.BadgesBlock}
+      />
+    </Toggle>
+  );
+}
+
+type BackToOwnerButtonProps = {
+  owners: Array<SerializedElement>,
+  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/Skeleton.css b/packages/react-devtools-shared/src/devtools/views/Components/Skeleton.css
new file mode 100644
index 00000000000..e2bf6707295
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Skeleton.css
@@ -0,0 +1,13 @@
+.root {
+  border-radius: 0.25rem;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    background-color: none;
+  }
+  50% {
+    background-color: var(--color-dimmest);
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Skeleton.js b/packages/react-devtools-shared/src/devtools/views/Components/Skeleton.js
new file mode 100644
index 00000000000..c80e0227496
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Skeleton.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './Skeleton.css';
+
+type Props = {
+  height: number | string,
+  width: number | string,
+};
+
+function Skeleton({height, width}: Props): React.Node {
+  return <div className={styles.root} style={{height, width}} />;
+}
+
+export default Skeleton;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css
new file mode 100644
index 00000000000..98200ee9dfd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css
@@ -0,0 +1,35 @@
+.StackTraceView {
+  padding: 0.25rem;
+}
+
+.CallSite, .BuiltInCallSite {
+  display: flex;
+  padding-left: 1rem;
+  white-space-collapse: preserve;
+}
+
+.IgnoredCallSite, .BuiltInCallSite {
+  display: none;
+}
+
+.CallSite + .BuiltInCallSite {
+  display: block;
+}
+
+.Link {
+  color: var(--color-link);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border-radius: 0.125rem;
+}
+
+.Link:hover {
+  background-color: var(--color-background-hover);
+}
+
+.ElementBadges {
+  margin-left: 0.25rem;
+}
+
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js
new file mode 100644
index 00000000000..a3cf91f14b7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {use, useContext} from 'react';
+
+import useOpenResource from '../useOpenResource';
+
+import ElementBadges from './ElementBadges';
+
+import styles from './StackTraceView.css';
+
+import type {ReactStackTrace, ReactCallSite} from 'shared/ReactTypes';
+
+import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+
+import FetchFileWithCachingContext from './FetchFileWithCachingContext';
+
+import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';
+
+import formatLocationForDisplay from './formatLocationForDisplay';
+
+type CallSiteViewProps = {
+  callSite: ReactCallSite,
+  environmentName: null | string,
+};
+
+export function CallSiteView({
+  callSite,
+  environmentName,
+}: CallSiteViewProps): React.Node {
+  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
+
+  const [virtualFunctionName, virtualURL, virtualLine, virtualColumn] =
+    callSite;
+
+  const symbolicatedCallSite: null | SourceMappedLocation =
+    fetchFileWithCaching !== null
+      ? use(
+          symbolicateSourceWithCache(
+            fetchFileWithCaching,
+            virtualURL,
+            virtualLine,
+            virtualColumn,
+          ),
+        )
+      : null;
+
+  const [linkIsEnabled, viewSource] = useOpenResource(
+    callSite,
+    symbolicatedCallSite == null ? null : symbolicatedCallSite.location,
+  );
+  const [functionName, url, line, column] =
+    symbolicatedCallSite !== null ? symbolicatedCallSite.location : callSite;
+  const ignored =
+    symbolicatedCallSite !== null ? symbolicatedCallSite.ignored : false;
+  // TODO: Make an option to be able to toggle the display of ignore listed rows.
+  // Ideally this UI should be higher than a single Stack Trace so that there's not
+  // multiple buttons in a single inspection taking up space.
+
+  const isBuiltIn = url === '' || url.startsWith('<anonymous>'); // This looks like a fake anonymous through eval.
+  return (
+    <div
+      className={
+        ignored
+          ? styles.IgnoredCallSite
+          : isBuiltIn
+            ? styles.BuiltInCallSite
+            : styles.CallSite
+      }>
+      {functionName || virtualFunctionName}
+      {!isBuiltIn && (
+        <>
+          {' @ '}
+          <span
+            className={linkIsEnabled ? styles.Link : null}
+            onClick={viewSource}
+            title={url + ':' + line}>
+            {formatLocationForDisplay(url, line, column)}
+          </span>
+        </>
+      )}
+      <ElementBadges
+        className={styles.ElementBadges}
+        environmentName={environmentName}
+      />
+    </div>
+  );
+}
+
+type Props = {
+  stack: ReactStackTrace,
+  environmentName: null | string,
+};
+
+export default function StackTraceView({
+  stack,
+  environmentName,
+}: Props): React.Node {
+  return (
+    <div className={styles.StackTraceView}>
+      {stack.map((callSite, index) => (
+        <CallSiteView
+          key={index}
+          callSite={callSite}
+          environmentName={
+            // Badge last row
+            // TODO: If we start ignore listing the last row, we should badge the last
+            // non-ignored row.
+            index === stack.length - 1 ? environmentName : null
+          }
+        />
+      ))}
+    </div>
+  );
+}
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 00000000000..cb2799d4a9c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
@@ -0,0 +1,100 @@
+.Tree {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--color-border);
+}
+
+.InnerElementType {
+  position: relative;
+}
+
+.VerticalDelimiter {
+  position: absolute;
+  width: 0.025rem;
+  background: #b0b0b0;
+}
+
+.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);
+  user-select: none;
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  flex: 0 0 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);
+}
+
+.IconAndCount {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-sans-normal);
+}
+
+.ErrorIcon, .WarningIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  flex: 0 0 auto;
+}
+.ErrorIcon {
+  color: var(--color-console-error-icon);
+}
+.WarningIcon {
+  color: var(--color-console-warning-icon);
+}
+
+.ZeroElementsNotice {
+  padding-left: 1em;
+  opacity: 0;
+  animation: fadeIn 0.5s forwards;
+  animation-delay: 2s;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.Link {
+  color: var(--color-button-active);
+}
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 00000000000..5623d507a3b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -0,0 +1,606 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  Fragment,
+  Suspense,
+  startTransition,
+  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 Icon from '../Icon';
+import {SettingsContext} from '../Settings/SettingsContext';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
+import ComponentsTreeElement from './Element';
+import InspectHostNodesToggle from './InspectHostNodesToggle';
+import OwnersStack from './OwnersStack';
+import ComponentSearchInput from './ComponentSearchInput';
+import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
+import TreeFocusedContext from './TreeFocusedContext';
+import {useHighlightHostInstance, useSubscription} from '../hooks';
+import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtools-shared/src/backendAPI';
+import styles from './Tree.css';
+import ButtonIcon from '../ButtonIcon';
+import Button from '../Button';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility';
+import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
+import {useChangeOwnerAction} from './OwnersListContext';
+import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
+import ActivitySlice from './ActivitySlice';
+
+// Indent for each node at level N, compared to node at level N - 1.
+const INDENTATION_SIZE = 10;
+
+function calculateElementOffset(elementDepth: number): number {
+  return elementDepth * INDENTATION_SIZE;
+}
+
+export type ItemData = {
+  isNavigatingWithKeyboard: boolean,
+  onElementMouseEnter: (id: number) => void,
+  treeFocused: boolean,
+  calculateElementOffset: (depth: number) => number,
+};
+
+function calculateInitialScrollOffset(
+  inspectedElementIndex: number | null,
+  elementHeight: number,
+): number | void {
+  if (inspectedElementIndex === null) {
+    return undefined;
+  }
+
+  if (inspectedElementIndex < 3) {
+    return undefined;
+  }
+
+  // Make 3 elements on top of the inspected one visible
+  return (inspectedElementIndex - 3) * elementHeight;
+}
+
+export default function Tree(): React.Node {
+  const dispatch = useContext(TreeDispatcherContext);
+  const {
+    activityID,
+    numElements,
+    ownerID,
+    searchIndex,
+    searchResults,
+    inspectedElementID,
+    inspectedElementIndex,
+  } = useContext(TreeStateContext);
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+  const {hideSettings} = useContext(OptionsContext);
+  const {lineHeight} = useContext(SettingsContext);
+
+  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
+    useState(false);
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+  const [treeFocused, setTreeFocused] = useState<boolean>(false);
+  const componentsPanelVisible = useExtensionComponentsPanelVisibility(bridge);
+
+  const treeRef = useRef<HTMLDivElement | null>(null);
+  const focusTargetRef = useRef<HTMLDivElement | null>(null);
+  const listDOMElementRef = useRef<Element | null>(null);
+  const setListDOMElementRef = useCallback((listDOMElement: Element) => {
+    listDOMElementRef.current = listDOMElement;
+
+    // Controls the initial horizontal offset of the Tree if the element was pre-selected. For example, via Elements panel in browser DevTools.
+    // Initial vertical offset is controlled via initialScrollOffset prop of the FixedSizeList component.
+    if (
+      !componentsPanelVisible ||
+      inspectedElementIndex == null ||
+      listDOMElement == null
+    ) {
+      return;
+    }
+
+    const element = store.getElementAtIndex(inspectedElementIndex);
+    if (element == null) {
+      return;
+    }
+
+    const viewportLeft = listDOMElement.scrollLeft;
+    const viewportRight = viewportLeft + listDOMElement.clientWidth;
+    const elementLeft = calculateElementOffset(element.depth);
+    // Because of virtualization, this element might not be rendered yet; we can't look up its width.
+    // Assuming that it may take up to the half of the viewport.
+    const elementRight = elementLeft + listDOMElement.clientWidth / 2;
+
+    const isElementFullyVisible =
+      elementLeft >= viewportLeft && elementRight <= viewportRight;
+
+    if (!isElementFullyVisible) {
+      const horizontalDelta =
+        Math.min(0, elementLeft - viewportLeft) +
+        Math.max(0, elementRight - viewportRight);
+
+      // $FlowExpectedError[incompatible-call] Flow doesn't support instant as an option for behavior.
+      listDOMElement.scrollBy({
+        left: horizontalDelta,
+        behavior: 'instant',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!componentsPanelVisible || inspectedElementIndex == null) {
+      return;
+    }
+
+    const listDOMElement = listDOMElementRef.current;
+    if (listDOMElement == null) {
+      return;
+    }
+
+    const viewportHeight = listDOMElement.clientHeight;
+    const viewportLeft = listDOMElement.scrollLeft;
+    const viewportRight = viewportLeft + listDOMElement.clientWidth;
+    const viewportTop = listDOMElement.scrollTop;
+    const viewportBottom = viewportTop + viewportHeight;
+
+    const element = store.getElementAtIndex(inspectedElementIndex);
+    if (element == null) {
+      return;
+    }
+    const elementLeft = calculateElementOffset(element.depth);
+    // Because of virtualization, this element might not be rendered yet; we can't look up its width.
+    // Assuming that it may take up to the half of the viewport.
+    const elementRight = elementLeft + listDOMElement.clientWidth / 2;
+    const elementTop = inspectedElementIndex * lineHeight;
+    const elementBottom = elementTop + lineHeight;
+
+    const isElementFullyVisible =
+      elementTop >= viewportTop &&
+      elementBottom <= viewportBottom &&
+      elementLeft >= viewportLeft &&
+      elementRight <= viewportRight;
+
+    if (!isElementFullyVisible) {
+      const verticalDelta =
+        Math.min(0, elementTop - viewportTop) +
+        Math.max(0, elementBottom - viewportBottom);
+      const horizontalDelta =
+        Math.min(0, elementLeft - viewportLeft) +
+        Math.max(0, elementRight - viewportRight);
+
+      // $FlowExpectedError[incompatible-call] Flow doesn't support instant as an option for behavior.
+      listDOMElement.scrollBy({
+        top: verticalDelta,
+        left: horizontalDelta,
+        behavior: treeFocused && ownerID == null ? 'smooth' : 'instant',
+      });
+    }
+  }, [inspectedElementIndex, componentsPanelVisible, lineHeight]);
+
+  // Picking an element in the inspector should put focus into the tree.
+  // If possible, navigation works right after picking a node.
+  // NOTE: This is not guaranteed to work, because browser extension panels are hosted inside an iframe.
+  useEffect(() => {
+    function handleStopInspectingHost(didSelectNode: boolean) {
+      if (didSelectNode && focusTargetRef.current !== null) {
+        focusTargetRef.current.focus();
+        logEvent({
+          event_name: 'select-element',
+          metadata: {source: 'inspector'},
+        });
+      }
+    }
+    bridge.addListener('stopInspectingHost', handleStopInspectingHost);
+    return () =>
+      bridge.removeListener('stopInspectingHost', handleStopInspectingHost);
+  }, [bridge]);
+
+  // 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;
+      }
+
+      let element;
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          if (event.altKey) {
+            dispatch({type: 'SELECT_NEXT_SIBLING_IN_TREE'});
+          } else {
+            dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
+          }
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          element =
+            inspectedElementID !== null
+              ? store.getElementByID(inspectedElementID)
+              : null;
+          if (element !== null) {
+            if (event.altKey) {
+              if (element.ownerID !== null) {
+                dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'});
+              }
+            } else {
+              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 =
+            inspectedElementID !== null
+              ? store.getElementByID(inspectedElementID)
+              : null;
+          if (element !== null) {
+            if (event.altKey) {
+              dispatch({type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE'});
+            } else {
+              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();
+          if (event.altKey) {
+            dispatch({type: 'SELECT_PREVIOUS_SIBLING_IN_TREE'});
+          } else {
+            dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
+          }
+          break;
+        default:
+          return;
+      }
+      setIsNavigatingWithKeyboard(true);
+    };
+
+    // We used to listen to at the document level for this event.
+    // That allowed us to listen to up/down arrow key events while another section
+    // of DevTools (like the search input) was focused.
+    // This was a minor UX positive.
+    //
+    // (We had to use ownerDocument rather than document for this, because the
+    // DevTools extension renders the Components and Profiler tabs into portals.)
+    //
+    // This approach caused a problem though: it meant that a react-devtools-inline
+    // instance could steal (and prevent/block) keyboard events from other JavaScript
+    // on the page– which could even include other react-devtools-inline instances.
+    // This is a potential major UX negative.
+    //
+    // Given the above trade offs, we now listen on the root of the Tree itself.
+    const container = treeRef.current;
+    container.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      container.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dispatch, inspectedElementID, store]);
+
+  // Focus management.
+  const handleBlur = useCallback(() => setTreeFocused(false), []);
+  const handleFocus = useCallback(() => setTreeFocused(true), []);
+
+  const changeActivitySliceAction = useChangeActivitySliceAction();
+  const changeOwnerAction = useChangeOwnerAction();
+  const handleKeyPress = useCallback(
+    (event: $FlowFixMe) => {
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          if (inspectedElementID !== null) {
+            const inspectedElement = store.getElementByID(inspectedElementID);
+            startTransition(() => {
+              if (
+                inspectedElement !== null &&
+                inspectedElement.type === ElementTypeActivity
+              ) {
+                changeActivitySliceAction(inspectedElementID);
+              } else {
+                changeOwnerAction(inspectedElementID);
+              }
+            });
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [dispatch, inspectedElementID],
+  );
+
+  // 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 (inspectedElementID !== null) {
+        highlightHostInstance(inspectedElementID);
+      } else {
+        clearHighlightHostInstance();
+      }
+    }
+  }, [
+    bridge,
+    isNavigatingWithKeyboard,
+    highlightHostInstance,
+    searchIndex,
+    searchResults,
+    inspectedElementID,
+  ]);
+
+  // Highlight last hovered element.
+  const handleElementMouseEnter = useCallback(
+    (id: $FlowFixMe) => {
+      // Ignore hover while we're navigating with keyboard.
+      // This avoids flicker from the hovered nodes under the mouse.
+      if (!isNavigatingWithKeyboard) {
+        highlightHostInstance(id);
+      }
+    },
+    [isNavigatingWithKeyboard, highlightHostInstance],
+  );
+
+  const handleMouseMove = useCallback(() => {
+    // We started using the mouse again.
+    // This will enable hover styles in individual rows.
+    setIsNavigatingWithKeyboard(false);
+  }, []);
+
+  const handleMouseLeave = clearHighlightHostInstance;
+
+  // 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>(
+    () => ({
+      isNavigatingWithKeyboard,
+      onElementMouseEnter: handleElementMouseEnter,
+      treeFocused,
+      calculateElementOffset,
+    }),
+    [
+      isNavigatingWithKeyboard,
+      handleElementMouseEnter,
+      treeFocused,
+      calculateElementOffset,
+    ],
+  );
+
+  const itemKey = useCallback(
+    (index: number) => store.getElementIDAtIndex(index),
+    [store],
+  );
+
+  const handlePreviousErrorOrWarningClick = React.useCallback(() => {
+    dispatch({type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'});
+  }, []);
+
+  const handleNextErrorOrWarningClick = React.useCallback(() => {
+    dispatch({type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE'});
+  }, []);
+
+  const errorsOrWarningsSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        errors: store.componentWithErrorCount,
+        warnings: store.componentWithWarningCount,
+      }),
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => store.removeListener('mutated', callback);
+      },
+    }),
+    [store],
+  );
+  const {errors, warnings} = useSubscription(errorsOrWarningsSubscription);
+
+  const clearErrorsAndWarnings = () => {
+    clearErrorsAndWarningsAPI({bridge, store});
+  };
+
+  const zeroElementsNotice = (
+    <div className={styles.ZeroElementsNotice}>
+      <p>Loading React Element Tree...</p>
+      <p>
+        If this seems stuck, please follow the{' '}
+        <a
+          className={styles.Link}
+          href="https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-react-tab-shows-no-components"
+          target="_blank">
+          troubleshooting instructions
+        </a>
+        .
+      </p>
+    </div>
+  );
+
+  return (
+    <TreeFocusedContext.Provider value={treeFocused}>
+      <div className={styles.Tree} ref={treeRef}>
+        <div className={styles.SearchInput}>
+          {store.supportsClickToInspect && (
+            <Fragment>
+              <InspectHostNodesToggle />
+              <div className={styles.VRule} />
+            </Fragment>
+          )}
+          <Suspense fallback={<Loading />}>
+            {ownerID !== null ? (
+              <OwnersStack />
+            ) : activityID !== null ? (
+              <ActivitySlice />
+            ) : (
+              <ComponentSearchInput />
+            )}
+          </Suspense>
+          {ownerID === null && (errors > 0 || warnings > 0) && (
+            <React.Fragment>
+              <div className={styles.VRule} />
+              {errors > 0 && (
+                <div className={styles.IconAndCount}>
+                  <Icon className={styles.ErrorIcon} type="error" />
+                  {errors}
+                </div>
+              )}
+              {warnings > 0 && (
+                <div className={styles.IconAndCount}>
+                  <Icon className={styles.WarningIcon} type="warning" />
+                  {warnings}
+                </div>
+              )}
+              <Button
+                onClick={handlePreviousErrorOrWarningClick}
+                title="Scroll to previous error or warning">
+                <ButtonIcon type="up" />
+              </Button>
+              <Button
+                onClick={handleNextErrorOrWarningClick}
+                title="Scroll to next error or warning">
+                <ButtonIcon type="down" />
+              </Button>
+              <Button
+                onClick={clearErrorsAndWarnings}
+                title="Clear all errors and warnings">
+                <ButtonIcon type="clear" />
+              </Button>
+            </React.Fragment>
+          )}
+          {!hideSettings && (
+            <Fragment>
+              <div className={styles.VRule} />
+              <SettingsModalContextToggle />
+            </Fragment>
+          )}
+        </div>
+        {numElements === 0 ? (
+          zeroElementsNotice
+        ) : (
+          <div
+            className={styles.AutoSizerWrapper}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            onKeyPress={handleKeyPress}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            ref={focusTargetRef}
+            tabIndex={0}>
+            <AutoSizer>
+              {({height, width}) => (
+                <FixedSizeList
+                  className={styles.List}
+                  height={height}
+                  initialScrollOffset={calculateInitialScrollOffset(
+                    inspectedElementIndex,
+                    lineHeight,
+                  )}
+                  innerElementType={InnerElementType}
+                  itemCount={numElements}
+                  itemData={itemData}
+                  itemKey={itemKey}
+                  itemSize={lineHeight}
+                  outerRef={setListDOMElementRef}
+                  overscanCount={10}
+                  width={width}>
+                  {ComponentsTreeElement}
+                </FixedSizeList>
+              )}
+            </AutoSizer>
+          </div>
+        )}
+      </div>
+    </TreeFocusedContext.Provider>
+  );
+}
+
+// $FlowFixMe[missing-local-annot]
+function InnerElementType({children, style}) {
+  const store = useContext(StoreContext);
+
+  const {height} = style;
+  const maxDepth = store.getMaximumRecordedDepth();
+  // Maximum possible indentation plus some arbitrary offset for the node content.
+  const width = calculateElementOffset(maxDepth) + 500;
+
+  return (
+    <div className={styles.InnerElementType} style={{height, width}}>
+      {children}
+
+      <VerticalDelimiter />
+    </div>
+  );
+}
+
+function VerticalDelimiter() {
+  const store = useContext(StoreContext);
+  const {ownerID, inspectedElementIndex} = useContext(TreeStateContext);
+  const {lineHeight} = useContext(SettingsContext);
+
+  if (ownerID != null || inspectedElementIndex == null) {
+    return null;
+  }
+
+  const element = store.getElementAtIndex(inspectedElementIndex);
+  if (element == null) {
+    return null;
+  }
+  const indexOfLowestDescendant =
+    store.getIndexOfLowestDescendantElement(element);
+  if (indexOfLowestDescendant == null) {
+    return null;
+  }
+
+  const delimiterLeft = calculateElementOffset(element.depth) + 12;
+  const delimiterTop = (inspectedElementIndex + 1) * lineHeight;
+  const delimiterHeight =
+    (indexOfLowestDescendant + 1) * lineHeight - delimiterTop;
+
+  return (
+    <div
+      className={styles.VerticalDelimiter}
+      style={{
+        left: delimiterLeft,
+        top: delimiterTop,
+        height: delimiterHeight,
+      }}
+    />
+  );
+}
+
+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 00000000000..80b1e9dce3e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -0,0 +1,1084 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 fundamentally 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 stack is not empty, search is temporarily disabled,
+// 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 type {ReactContext} from 'shared/ReactTypes';
+
+import * as React from 'react';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  startTransition,
+} from 'react';
+import {createRegExp} from '../utils';
+import {StoreContext} from '../context';
+import Store from '../../store';
+
+import type {Element} from 'react-devtools-shared/src/frontend/types';
+
+export type StateContext = {
+  // Tree
+  numElements: number,
+  ownerSubtreeLeafElementID: number | null,
+
+  // Search
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+
+  // Owners
+  ownerID: number | null,
+  ownerFlatTree: Array<Element> | null,
+
+  // Activity slice
+  activityID: Element['id'] | null,
+  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
+
+  // Inspection element panel
+  inspectedElementID: number | null,
+  inspectedElementIndex: 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>, null | Element['id']],
+};
+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_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {
+  type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+};
+type ACTION_SELECT_NEXT_SIBLING_IN_TREE = {
+  type: 'SELECT_NEXT_SIBLING_IN_TREE',
+};
+type ACTION_SELECT_OWNER = {
+  type: 'SELECT_OWNER',
+  payload: number,
+};
+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_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {
+  type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE',
+};
+type ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = {
+  type: 'SELECT_PREVIOUS_SIBLING_IN_TREE',
+};
+type ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE = {
+  type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE',
+};
+type ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE = {
+  type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE',
+};
+type ACTION_SET_SEARCH_TEXT = {
+  type: 'SET_SEARCH_TEXT',
+  payload: string,
+};
+
+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_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE
+  | ACTION_SELECT_NEXT_SIBLING_IN_TREE
+  | ACTION_SELECT_OWNER
+  | ACTION_SELECT_PARENT_ELEMENT_IN_TREE
+  | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE
+  | ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE
+  | ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE
+  | ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE
+  | ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE
+  | ACTION_SET_SEARCH_TEXT;
+
+export type DispatcherContext = (action: Action) => void;
+
+const TreeStateContext: ReactContext<StateContext> =
+  createContext<StateContext>(((null: any): StateContext));
+TreeStateContext.displayName = 'TreeStateContext';
+
+// TODO: `dispatch` is an Action and should be named accordingly.
+const TreeDispatcherContext: ReactContext<DispatcherContext> =
+  createContext<DispatcherContext>(((null: any): DispatcherContext));
+TreeDispatcherContext.displayName = 'TreeDispatcherContext';
+
+type State = {
+  // Tree
+  numElements: number,
+  ownerSubtreeLeafElementID: number | null,
+
+  // Search
+  searchIndex: number | null,
+  searchResults: Array<number>,
+  searchText: string,
+
+  // Owners
+  ownerID: number | null,
+  ownerFlatTree: Array<Element> | null,
+
+  // Activity slice
+  activityID: Element['id'] | null,
+  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
+
+  // Inspection element panel
+  inspectedElementID: number | null,
+  inspectedElementIndex: number | null,
+};
+
+function reduceTreeState(store: Store, state: State, action: Action): State {
+  let {
+    numElements,
+    ownerSubtreeLeafElementID,
+    inspectedElementID,
+    inspectedElementIndex,
+  } = state;
+  const ownerID = state.ownerID;
+
+  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 (
+          inspectedElementID !== null &&
+          removedIDs.has(inspectedElementID)
+        ) {
+          // $FlowExpectedError[incompatible-type]
+          inspectedElementID = removedIDs.get(inspectedElementID);
+        }
+        if (inspectedElementID === 0) {
+          // The whole root was removed.
+          inspectedElementIndex = null;
+        }
+        break;
+      case 'SELECT_CHILD_ELEMENT_IN_TREE':
+        ownerSubtreeLeafElementID = null;
+
+        if (inspectedElementIndex !== null) {
+          const inspectedElement = store.getElementAtIndex(
+            inspectedElementIndex,
+          );
+          if (
+            inspectedElement !== null &&
+            inspectedElement.children.length > 0 &&
+            !inspectedElement.isCollapsed
+          ) {
+            const firstChildID = inspectedElement.children[0];
+            const firstChildIndex = store.getIndexOfElementID(firstChildID);
+            if (firstChildIndex !== null) {
+              inspectedElementIndex = firstChildIndex;
+            }
+          }
+        }
+        break;
+      case 'SELECT_ELEMENT_AT_INDEX':
+        ownerSubtreeLeafElementID = null;
+
+        inspectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX)
+          .payload;
+        break;
+      case 'SELECT_ELEMENT_BY_ID':
+        ownerSubtreeLeafElementID = null;
+
+        // 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;
+
+        inspectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
+        inspectedElementIndex =
+          inspectedElementID === null
+            ? null
+            : store.getIndexOfElementID(inspectedElementID);
+        break;
+      case 'SELECT_NEXT_ELEMENT_IN_TREE':
+        ownerSubtreeLeafElementID = null;
+
+        if (
+          inspectedElementIndex === null ||
+          inspectedElementIndex + 1 >= numElements
+        ) {
+          inspectedElementIndex = 0;
+        } else {
+          inspectedElementIndex++;
+        }
+        break;
+      case 'SELECT_NEXT_SIBLING_IN_TREE':
+        ownerSubtreeLeafElementID = null;
+
+        if (inspectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((inspectedElementIndex: any): number),
+          );
+          if (selectedElement !== null && selectedElement.parentID !== 0) {
+            const parent = store.getElementByID(selectedElement.parentID);
+            if (parent !== null) {
+              const {children} = parent;
+              const selectedChildIndex = children.indexOf(selectedElement.id);
+              const nextChildID =
+                selectedChildIndex < children.length - 1
+                  ? children[selectedChildIndex + 1]
+                  : children[0];
+              inspectedElementIndex = store.getIndexOfElementID(nextChildID);
+            }
+          }
+        }
+        break;
+      case 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE':
+        if (inspectedElementIndex !== null) {
+          if (
+            ownerSubtreeLeafElementID !== null &&
+            ownerSubtreeLeafElementID !== inspectedElementID
+          ) {
+            const leafElement = store.getElementByID(ownerSubtreeLeafElementID);
+            if (leafElement !== null) {
+              let currentElement: null | Element = leafElement;
+              while (currentElement !== null) {
+                if (currentElement.ownerID === inspectedElementID) {
+                  inspectedElementIndex = store.getIndexOfElementID(
+                    currentElement.id,
+                  );
+                  break;
+                } else if (currentElement.ownerID !== 0) {
+                  currentElement = store.getElementByID(currentElement.ownerID);
+                }
+              }
+            }
+          }
+        }
+        break;
+      case 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE':
+        if (inspectedElementIndex !== null) {
+          if (ownerSubtreeLeafElementID === null) {
+            // If this is the first time we're stepping through the owners tree,
+            // pin the current component as the owners list leaf.
+            // This will enable us to step back down to this component.
+            ownerSubtreeLeafElementID = inspectedElementID;
+          }
+
+          const selectedElement = store.getElementAtIndex(
+            ((inspectedElementIndex: any): number),
+          );
+          if (selectedElement !== null && selectedElement.ownerID !== 0) {
+            const ownerIndex = store.getIndexOfElementID(
+              selectedElement.ownerID,
+            );
+            if (ownerIndex !== null) {
+              inspectedElementIndex = ownerIndex;
+            }
+          }
+        }
+        break;
+      case 'SELECT_PARENT_ELEMENT_IN_TREE':
+        ownerSubtreeLeafElementID = null;
+
+        if (inspectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((inspectedElementIndex: any): number),
+          );
+          if (selectedElement !== null && selectedElement.parentID !== 0) {
+            const parentIndex = store.getIndexOfElementID(
+              selectedElement.parentID,
+            );
+            if (parentIndex !== null) {
+              inspectedElementIndex = parentIndex;
+            }
+          }
+        }
+        break;
+      case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+        ownerSubtreeLeafElementID = null;
+
+        if (inspectedElementIndex === null || inspectedElementIndex === 0) {
+          inspectedElementIndex = numElements - 1;
+        } else {
+          inspectedElementIndex--;
+        }
+        break;
+      case 'SELECT_PREVIOUS_SIBLING_IN_TREE':
+        ownerSubtreeLeafElementID = null;
+
+        if (inspectedElementIndex !== null) {
+          const selectedElement = store.getElementAtIndex(
+            ((inspectedElementIndex: any): number),
+          );
+          if (selectedElement !== null && selectedElement.parentID !== 0) {
+            const parent = store.getElementByID(selectedElement.parentID);
+            if (parent !== null) {
+              const {children} = parent;
+              const selectedChildIndex = children.indexOf(selectedElement.id);
+              const nextChildID =
+                selectedChildIndex > 0
+                  ? children[selectedChildIndex - 1]
+                  : children[children.length - 1];
+              inspectedElementIndex = store.getIndexOfElementID(nextChildID);
+            }
+          }
+        }
+        break;
+      case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
+        const elementIndicesWithErrorsOrWarnings =
+          store.getElementsWithErrorsAndWarnings();
+        if (elementIndicesWithErrorsOrWarnings.length === 0) {
+          return state;
+        }
+
+        let flatIndex = 0;
+        if (inspectedElementIndex !== null) {
+          // Resume from the current position in the list.
+          // Otherwise step to the previous item, relative to the current selection.
+          for (
+            let i = elementIndicesWithErrorsOrWarnings.length - 1;
+            i >= 0;
+            i--
+          ) {
+            const {index} = elementIndicesWithErrorsOrWarnings[i];
+            if (index >= inspectedElementIndex) {
+              flatIndex = i;
+            } else {
+              break;
+            }
+          }
+        }
+
+        let prevEntry;
+        if (flatIndex === 0) {
+          prevEntry =
+            elementIndicesWithErrorsOrWarnings[
+              elementIndicesWithErrorsOrWarnings.length - 1
+            ];
+          inspectedElementID = prevEntry.id;
+          inspectedElementIndex = prevEntry.index;
+        } else {
+          prevEntry = elementIndicesWithErrorsOrWarnings[flatIndex - 1];
+          inspectedElementID = prevEntry.id;
+          inspectedElementIndex = prevEntry.index;
+        }
+
+        lookupIDForIndex = false;
+        break;
+      }
+      case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
+        const elementIndicesWithErrorsOrWarnings =
+          store.getElementsWithErrorsAndWarnings();
+        if (elementIndicesWithErrorsOrWarnings.length === 0) {
+          return state;
+        }
+
+        let flatIndex = -1;
+        if (inspectedElementIndex !== null) {
+          // Resume from the current position in the list.
+          // Otherwise step to the next item, relative to the current selection.
+          for (let i = 0; i < elementIndicesWithErrorsOrWarnings.length; i++) {
+            const {index} = elementIndicesWithErrorsOrWarnings[i];
+            if (index <= inspectedElementIndex) {
+              flatIndex = i;
+            } else {
+              break;
+            }
+          }
+        }
+
+        let nextEntry;
+        if (flatIndex >= elementIndicesWithErrorsOrWarnings.length - 1) {
+          nextEntry = elementIndicesWithErrorsOrWarnings[0];
+          inspectedElementID = nextEntry.id;
+          inspectedElementIndex = nextEntry.index;
+        } else {
+          nextEntry = elementIndicesWithErrorsOrWarnings[flatIndex + 1];
+          inspectedElementID = nextEntry.id;
+          inspectedElementIndex = nextEntry.index;
+        }
+
+        lookupIDForIndex = false;
+        break;
+      }
+      default:
+        // React can bailout of no-op updates.
+        return state;
+    }
+  }
+
+  // Keep selected item ID and index in sync.
+  if (
+    lookupIDForIndex &&
+    inspectedElementIndex !== state.inspectedElementIndex
+  ) {
+    if (inspectedElementIndex === null) {
+      inspectedElementID = null;
+    } else {
+      inspectedElementID = store.getElementIDAtIndex(
+        ((inspectedElementIndex: any): number),
+      );
+    }
+  }
+
+  return {
+    ...state,
+
+    numElements,
+    ownerSubtreeLeafElementID,
+    inspectedElementIndex,
+    inspectedElementID,
+  };
+}
+
+function reduceSearchState(store: Store, state: State, action: Action): State {
+  let {
+    searchIndex,
+    searchResults,
+    searchText,
+    inspectedElementID,
+    inspectedElementIndex,
+  } = state;
+  const ownerID = state.ownerID;
+
+  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 =
+            // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+            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 (inspectedElementIndex !== null) {
+                searchIndex = getNearestResultIndex(
+                  store,
+                  searchResults,
+                  inspectedElementIndex,
+                );
+              } 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(inspectedElementID);
+    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) {
+    inspectedElementID = ((searchResults[searchIndex]: any): number);
+    inspectedElementIndex = store.getIndexOfElementID(
+      ((inspectedElementID: any): number),
+    );
+  }
+
+  return {
+    ...state,
+
+    inspectedElementID,
+    inspectedElementIndex,
+
+    searchIndex,
+    searchResults,
+    searchText,
+  };
+}
+
+function reduceOwnersState(store: Store, state: State, action: Action): State {
+  let {
+    numElements,
+    ownerID,
+    ownerFlatTree,
+    inspectedElementID,
+    inspectedElementIndex,
+  } = state;
+  const {searchIndex, searchResults, searchText} = state;
+
+  let prevInspectedElementIndex = inspectedElementIndex;
+
+  switch (action.type) {
+    case 'HANDLE_STORE_MUTATION':
+      if (ownerID !== null) {
+        if (!store.containsElement(ownerID)) {
+          ownerID = null;
+          ownerFlatTree = null;
+          prevInspectedElementIndex = null;
+        } else {
+          ownerFlatTree = store.getOwnersListForElement(ownerID);
+          if (inspectedElementID !== null) {
+            // Mutation might have caused the index of this ID to shift.
+            prevInspectedElementIndex = ownerFlatTree.findIndex(
+              element => element.id === inspectedElementID,
+            );
+          }
+        }
+      } else {
+        if (inspectedElementID !== null) {
+          // Mutation might have caused the index of this ID to shift.
+          inspectedElementIndex = store.getIndexOfElementID(inspectedElementID);
+        }
+      }
+      if (inspectedElementIndex === -1) {
+        // If we couldn't find this ID after mutation, unselect it.
+        inspectedElementIndex = null;
+        inspectedElementID = null;
+      }
+      break;
+    case 'RESET_OWNER_STACK':
+      ownerID = null;
+      ownerFlatTree = null;
+      inspectedElementIndex =
+        inspectedElementID !== null
+          ? store.getIndexOfElementID(inspectedElementID)
+          : null;
+      break;
+    case 'SELECT_ELEMENT_AT_INDEX':
+      if (ownerFlatTree !== null) {
+        inspectedElementIndex = (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) {
+          inspectedElementIndex = null;
+        } else {
+          inspectedElementIndex = 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 (inspectedElementIndex !== null && inspectedElementIndex < 0) {
+            ownerID = null;
+            ownerFlatTree = null;
+            inspectedElementIndex = store.getIndexOfElementID(payload);
+          }
+        }
+      }
+      break;
+    case 'SELECT_NEXT_ELEMENT_IN_TREE':
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
+        if (inspectedElementIndex === null) {
+          inspectedElementIndex = 0;
+        } else if (inspectedElementIndex + 1 < ownerFlatTree.length) {
+          inspectedElementIndex++;
+        }
+      }
+      break;
+    case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+      if (ownerFlatTree !== null && ownerFlatTree.length > 0) {
+        if (inspectedElementIndex !== null && inspectedElementIndex > 0) {
+          inspectedElementIndex--;
+        }
+      }
+      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.
+        inspectedElementIndex = 0;
+        prevInspectedElementIndex = 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 (inspectedElementIndex !== prevInspectedElementIndex) {
+    if (inspectedElementIndex === null) {
+      inspectedElementID = null;
+    } else {
+      if (ownerFlatTree !== null) {
+        inspectedElementID = ownerFlatTree[inspectedElementIndex].id;
+      }
+    }
+  }
+
+  return {
+    ...state,
+
+    numElements,
+
+    searchIndex,
+    searchResults,
+    searchText,
+
+    ownerID,
+    ownerFlatTree,
+
+    inspectedElementID,
+    inspectedElementIndex,
+  };
+}
+
+function reduceActivityState(
+  store: Store,
+  state: State,
+  action: Action,
+): State {
+  switch (action.type) {
+    case 'HANDLE_STORE_MUTATION':
+      let {activityID} = state;
+      const [, , activitySliceIDChange] = action.payload;
+      const activities = store.getActivities();
+      if (activitySliceIDChange === 0 && activityID !== null) {
+        activityID = null;
+      } else if (
+        activitySliceIDChange !== null &&
+        activitySliceIDChange !== activityID
+      ) {
+        activityID = activitySliceIDChange;
+      }
+      if (activityID !== state.activityID || activities !== state.activities) {
+        return {
+          ...state,
+          activityID,
+          activities,
+        };
+      }
+  }
+  return state;
+}
+
+type Props = {
+  children: React$Node,
+
+  // Used for automated testing
+  defaultOwnerID?: ?number,
+  defaultInspectedElementID?: ?number,
+  defaultInspectedElementIndex?: ?number,
+};
+
+function getInitialState({
+  defaultOwnerID,
+  defaultInspectedElementID,
+  defaultInspectedElementIndex,
+  store,
+}: {
+  defaultOwnerID?: ?number,
+  defaultInspectedElementID?: ?number,
+  defaultInspectedElementIndex?: ?number,
+  store: Store,
+}): State {
+  return {
+    // Tree
+    numElements: store.numElements,
+    ownerSubtreeLeafElementID: null,
+
+    // Search
+    searchIndex: null,
+    searchResults: [],
+    searchText: '',
+
+    // Owners
+    ownerID: defaultOwnerID == null ? null : defaultOwnerID,
+    ownerFlatTree: null,
+
+    // Activity slice
+    activityID: null,
+    activities: store.getActivities(),
+
+    // Inspection element panel
+    inspectedElementID:
+      defaultInspectedElementID != null
+        ? defaultInspectedElementID
+        : store.lastSelectedHostInstanceElementId,
+    inspectedElementIndex:
+      defaultInspectedElementIndex != null
+        ? defaultInspectedElementIndex
+        : store.lastSelectedHostInstanceElementId
+          ? store.getIndexOfElementID(store.lastSelectedHostInstanceElementId)
+          : null,
+  };
+}
+
+// TODO Remove TreeContextController wrapper element once global Context.write API exists.
+function TreeContextController({
+  children,
+  defaultOwnerID,
+  defaultInspectedElementID,
+  defaultInspectedElementIndex,
+}: Props): React.Node {
+  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_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE':
+          case 'SELECT_NEXT_SIBLING_IN_TREE':
+          case 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE':
+          case 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE':
+          case 'SELECT_PARENT_ELEMENT_IN_TREE':
+          case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
+          case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE':
+          case 'SELECT_PREVIOUS_SIBLING_IN_TREE':
+          case 'SELECT_OWNER':
+          case 'SET_SEARCH_TEXT':
+            state = reduceTreeState(store, state, action);
+            state = reduceSearchState(store, state, action);
+            state = reduceOwnersState(store, state, action);
+            state = reduceActivityState(store, state, action);
+
+            // TODO(hoxyq): review
+            // 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.inspectedElementID !== null &&
+              store.isInsideCollapsedSubTree(state.inspectedElementID)
+            ) {
+              return {
+                ...state,
+                inspectedElementIndex: null,
+              };
+            }
+
+            return state;
+          default:
+            throw new Error(`Unrecognized action "${type}"`);
+        }
+      },
+    [store],
+  );
+
+  const [state, dispatch] = useReducer(
+    reducer,
+    {
+      defaultOwnerID,
+      defaultInspectedElementID,
+      defaultInspectedElementIndex,
+      store,
+    },
+    getInitialState,
+  );
+  const transitionDispatch = useMemo(
+    () => (action: Action) =>
+      startTransition(() => {
+        dispatch(action);
+      }),
+    [dispatch],
+  );
+
+  // Listen for host element selections.
+  useEffect(() => {
+    const handler = (id: Element['id'] | null) => {
+      transitionDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+    };
+
+    store.addListener('hostInstanceSelected', handler);
+    return () => store.removeListener('hostInstanceSelected', handler);
+  }, [store, transitionDispatch]);
+
+  // 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 prevInspectedElementID = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    if (state.inspectedElementID !== prevInspectedElementID.current) {
+      prevInspectedElementID.current = state.inspectedElementID;
+
+      if (state.inspectedElementID !== null) {
+        const element = store.getElementByID(state.inspectedElementID);
+        if (element !== null && element.parentID > 0) {
+          store.toggleIsCollapsed(element.parentID, false);
+        }
+      }
+    }
+  }, [state.inspectedElementID, store]);
+
+  // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
+  useEffect(() => {
+    const handleStoreMutated = ([
+      addedElementIDs,
+      removedElementIDs,
+      activitySliceIDChange,
+    ]: [Array<number>, Map<number, number>, null | Element['id']]) => {
+      dispatch({
+        type: 'HANDLE_STORE_MUTATION',
+        payload: [addedElementIDs, removedElementIDs, activitySliceIDChange],
+      });
+    };
+
+    // 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.
+      dispatch({
+        type: 'HANDLE_STORE_MUTATION',
+        payload: [[], new Map(), null],
+      });
+    }
+
+    store.addListener('mutated', handleStoreMutated);
+    return () => store.removeListener('mutated', handleStoreMutated);
+  }, [dispatch, initialRevision, store]);
+
+  return (
+    <TreeStateContext.Provider value={state}>
+      <TreeDispatcherContext.Provider value={transitionDispatch}>
+        {children}
+      </TreeDispatcherContext.Provider>
+    </TreeStateContext.Provider>
+  );
+}
+function recursivelySearchTree(
+  store: Store,
+  elementID: number,
+  regExp: RegExp,
+  searchResults: Array<number>,
+): void {
+  const element = store.getElementByID(elementID);
+
+  if (element == null) {
+    return;
+  }
+
+  const {
+    children,
+    displayName,
+    hocDisplayNames,
+    compiledWithForget,
+    key,
+    nameProp,
+  } = 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);
+  } else if (compiledWithForget && regExp.test('Forget')) {
+    searchResults.push(elementID);
+  } else if (typeof key === 'string' && regExp.test(key)) {
+    searchResults.push(elementID);
+  } else if (typeof nameProp === 'string' && regExp.test(nameProp)) {
+    searchResults.push(elementID);
+  }
+
+  children.forEach(childID =>
+    recursivelySearchTree(store, childID, regExp, searchResults),
+  );
+}
+
+function getNearestResultIndex(
+  store: Store,
+  searchResults: Array<number>,
+  inspectedElementIndex: number,
+): number {
+  const index = searchResults.findIndex(id => {
+    const innerIndex = store.getIndexOfElementID(id);
+    return innerIndex !== null && innerIndex >= inspectedElementIndex;
+  });
+
+  return index === -1 ? 0 : index;
+}
+
+export {TreeDispatcherContext, TreeStateContext, TreeContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
new file mode 100644
index 00000000000..68fa2e99e10
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {createContext} from 'react';
+
+const TreeFocusedContext: ReactContext<boolean> = createContext<boolean>(false);
+
+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 00000000000..42f6b67723e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {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: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+ViewElementSourceContext.displayName = 'ViewElementSourceContext';
+
+export default ViewElementSourceContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/constants.js b/packages/react-devtools-shared/src/devtools/views/Components/constants.js
new file mode 100644
index 00000000000..f1fa5e9dd5b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/constants.js
@@ -0,0 +1,6 @@
+export const PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE = [
+  'file:///',
+  'http://',
+  'https://',
+  'vscode://',
+];
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/formatLocationForDisplay.js b/packages/react-devtools-shared/src/devtools/views/Components/formatLocationForDisplay.js
new file mode 100644
index 00000000000..9bf693fe33d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/formatLocationForDisplay.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {toNormalUrl} from 'jsc-safe-url';
+
+// This function is based on describeComponentFrame() in packages/shared/ReactComponentStackFrame
+export default function formatLocationForDisplay(
+  sourceURL: string,
+  line: number,
+  column: number,
+): string {
+  // Metro can return JSC-safe URLs, which have `//&` as a delimiter
+  // https://www.npmjs.com/package/jsc-safe-url
+  const sanitizedSourceURL = sourceURL.includes('//&')
+    ? toNormalUrl(sourceURL)
+    : sourceURL;
+
+  // Note: this RegExp doesn't work well with URLs from Metro,
+  // which provides bundle URL with query parameters prefixed with /&
+  const BEFORE_SLASH_RE = /^(.*)[\\\/]/;
+
+  let nameOnly = sanitizedSourceURL.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 = sanitizedSourceURL.match(BEFORE_SLASH_RE);
+    if (match) {
+      const pathBeforeSlash = match[1];
+      if (pathBeforeSlash) {
+        const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+        nameOnly = folderName + '/' + nameOnly;
+      }
+    }
+  }
+
+  if (line === 0) {
+    return nameOnly;
+  }
+
+  return `${nameOnly}:${line}`;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
new file mode 100644
index 00000000000..fbe19ce3c96
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
@@ -0,0 +1,13 @@
+.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);
+  box-shadow: 1px 1px 2px var(--color-shadow);
+
+  /* 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/Components/reach-ui/menu-button.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
new file mode 100644
index 00000000000..0c6873956cc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  Menu,
+  MenuList as ReachMenuList,
+  MenuButton,
+  MenuItem,
+} from '@reach/menu-button';
+import useThemeStyles from '../../useThemeStyles';
+
+const MenuList = ({
+  children,
+  ...props
+}: {
+  children: React$Node,
+  ...
+}): React.Node => {
+  const style = useThemeStyles();
+  return (
+    // $FlowFixMe[cannot-spread-inexact] unsafe spread
+    <ReachMenuList style={style} {...props}>
+      {children}
+    </ReachMenuList>
+  );
+};
+
+export {MenuItem, MenuButton, MenuList, Menu};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
new file mode 100644
index 00000000000..c63321272ec
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import ReachTooltip from '@reach/tooltip';
+import tooltipStyles from './Tooltip.css';
+import useThemeStyles from '../../useThemeStyles';
+
+const Tooltip = ({
+  children,
+  className = '',
+  ...props
+}: {
+  children: React$Node,
+  className: string,
+  ...
+}): React.Node => {
+  const style = useThemeStyles();
+  return (
+    // $FlowFixMe[cannot-spread-inexact] unsafe spread
+    <ReachTooltip
+      className={`${tooltipStyles.Tooltip} ${className}`}
+      style={style}
+      {...props}>
+      {children}
+    </ReachTooltip>
+  );
+};
+
+export default Tooltip;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/utils.js b/packages/react-devtools-shared/src/devtools/views/Components/utils.js
new file mode 100644
index 00000000000..e8ffd18bf64
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/utils.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * Converts nested hooks paths to the format expected by the backend.
+ * e.g. [''] => ['']
+ * e.g. [1, 'value', ...] => [...]
+ * e.g. [2, 'subhooks', 1, 'value', ...] => [...]
+ * e.g. [1, 'subhooks', 3, 'subhooks', 2, 'value', ...] => [...]
+ */
+export function parseHookPathForEdit(
+  path: Array<string | number>,
+): Array<string | number> {
+  let index = 0;
+  for (let i = 0; i < path.length; i++) {
+    if (path[i] === 'value') {
+      index = i + 1;
+      break;
+    }
+  }
+  return path.slice(index);
+}
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 00000000000..0230860b945
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.css
@@ -0,0 +1,62 @@
+.DevTools {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  container-name: devtools;
+  container-type: inline-size;
+}
+
+.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 00000000000..dc471574978
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -0,0 +1,412 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import Store from '../store';
+import {
+  BridgeContext,
+  ContextMenuContext,
+  StoreContext,
+  OptionsContext,
+} from './context';
+import Components from './Components/Components';
+import Profiler from './Profiler/Profiler';
+import SuspenseTab from './SuspenseTab/SuspenseTab';
+import TabBar from './TabBar';
+import EditorPane from './Editor/EditorPane';
+import InspectedElementPane from './InspectedElement/InspectedElementPane';
+import {SettingsContextController} from './Settings/SettingsContext';
+import {TreeContextController} from './Components/TreeContext';
+import ViewElementSourceContext from './Components/ViewElementSourceContext';
+import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
+import {InspectedElementContextController} from './Components/InspectedElementContext';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
+import {ProfilerContextController} from './Profiler/ProfilerContext';
+import {SuspenseTreeContextController} from './SuspenseTab/SuspenseTreeContext';
+import {TimelineContextController} from 'react-devtools-timeline/src/TimelineContext';
+import {ModalDialogContextController} from './ModalDialog';
+import ReactLogo from './ReactLogo';
+import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
+import UnsupportedVersionDialog from './UnsupportedVersionDialog';
+import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
+import {useLocalStorage} from './hooks';
+import ThemeProvider from './ThemeProvider';
+import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants';
+import {logEvent} from '../../Logger';
+
+import styles from './DevTools.css';
+
+import './root.css';
+
+import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext';
+import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
+import type {SourceSelection} from './Editor/EditorPane';
+
+export type TabID = 'components' | 'profiler' | 'suspense';
+
+export type ViewElementSource = (
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
+) => void;
+export type ViewAttributeSource = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+export type CanViewElementSource = (
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
+) => 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,
+  readOnly?: boolean,
+  hideSettings?: boolean,
+  hideToggleErrorAction?: boolean,
+  hideToggleSuspenseAction?: boolean,
+  hideLogAction?: boolean,
+  hideViewSourceAction?: boolean,
+
+  // 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,
+  inspectedElementPortalContainer?: Element,
+  profilerPortalContainer?: Element,
+  suspensePortalContainer?: Element,
+  editorPortalContainer?: Element,
+
+  currentSelectedSource?: null | SourceSelection,
+
+  // Loads and parses source maps for function components
+  // and extracts hook "names" based on the variables the hook return values get assigned to.
+  // Not every DevTools build can load source maps, so this property is optional.
+  fetchFileWithCaching?: ?FetchFileWithCaching,
+  // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+  hookNamesModuleLoaderFunction?: ?HookNamesModuleLoaderFunction,
+};
+
+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 suspenseTab = {
+  id: ('suspense': TabID),
+  icon: 'suspense',
+  label: 'Suspense',
+  title: 'React Suspense',
+};
+
+const defaultTabs = [componentsTab, profilerTab];
+const tabsWithSuspense = [componentsTab, profilerTab, suspenseTab];
+
+function useIsSuspenseTabEnabled(store: Store): boolean {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      store.addListener('enableSuspenseTab', onStoreChange);
+      return () => {
+        store.removeListener('enableSuspenseTab', onStoreChange);
+      };
+    },
+    [store],
+  );
+  return React.useSyncExternalStore(subscribe, () => store.supportsSuspenseTab);
+}
+
+export default function DevTools({
+  bridge,
+  browserTheme = 'light',
+  canViewElementSourceFunction,
+  componentsPortalContainer,
+  editorPortalContainer,
+  inspectedElementPortalContainer,
+  profilerPortalContainer,
+  suspensePortalContainer,
+  currentSelectedSource,
+  defaultTab = 'components',
+  enabledInspectedElementContextMenu = false,
+  fetchFileWithCaching,
+  hookNamesModuleLoaderFunction,
+  overrideTab,
+  showTabBar = false,
+  store,
+  warnIfLegacyBackendDetected = false,
+  warnIfUnsupportedVersionDetected = false,
+  viewAttributeSourceFunction,
+  viewElementSourceFunction,
+  readOnly,
+  hideSettings,
+  hideToggleErrorAction,
+  hideToggleSuspenseAction,
+  hideLogAction,
+  hideViewSourceAction,
+}: Props): React.Node {
+  const [currentTab, setTab] = useLocalStorage<TabID>(
+    LOCAL_STORAGE_DEFAULT_TAB_KEY,
+    defaultTab,
+  );
+  const enableSuspenseTab = useIsSuspenseTabEnabled(store);
+  const tabs = enableSuspenseTab ? tabsWithSuspense : defaultTabs;
+
+  let tab = currentTab;
+
+  if (overrideTab != null) {
+    tab = overrideTab;
+  }
+
+  const selectTab = useCallback(
+    (tabId: TabID) => {
+      // We show the TabBar when DevTools is NOT rendered as a browser extension.
+      // In this case, we want to capture when people select tabs with the TabBar.
+      // When DevTools is rendered as an extension, we capture this event when
+      // the browser devtools panel changes.
+      if (showTabBar === true) {
+        if (tabId === 'components') {
+          logEvent({event_name: 'selected-components-tab'});
+        } else if (tabId === 'suspense') {
+          logEvent({event_name: 'selected-suspense-tab'});
+        } else {
+          logEvent({event_name: 'selected-profiler-tab'});
+        }
+      }
+      setTab(tabId);
+    },
+    [setTab, showTabBar],
+  );
+
+  const options = useMemo(
+    () => ({
+      readOnly: readOnly || false,
+      hideSettings: hideSettings || false,
+      hideToggleErrorAction: hideToggleErrorAction || false,
+      hideToggleSuspenseAction: hideToggleSuspenseAction || false,
+      hideLogAction: hideLogAction || false,
+      hideViewSourceAction: hideViewSourceAction || false,
+    }),
+    [
+      readOnly,
+      hideSettings,
+      hideToggleErrorAction,
+      hideToggleSuspenseAction,
+      hideLogAction,
+      hideViewSourceAction,
+    ],
+  );
+
+  const viewElementSource = useMemo(
+    () => ({
+      canViewElementSourceFunction: canViewElementSourceFunction || null,
+      viewElementSourceFunction: viewElementSourceFunction || null,
+    }),
+    [canViewElementSourceFunction, viewElementSourceFunction],
+  );
+
+  const contextMenu = useMemo(
+    () => ({
+      isEnabledForInspectedElement: enabledInspectedElementContextMenu,
+      viewAttributeSourceFunction: viewAttributeSourceFunction || null,
+    }),
+    [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
+  );
+
+  const devToolsRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!showTabBar) {
+      return;
+    }
+
+    const div = devToolsRef.current;
+    if (div === null) {
+      return;
+    }
+
+    const ownerWindow = div.ownerDocument.defaultView;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey || event.metaKey) {
+        switch (event.key) {
+          case '1':
+            selectTab(tabs[0].id);
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+          case '2':
+            selectTab(tabs[1].id);
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+          case '3':
+            if (tabs.length > 2) {
+              selectTab(tabs[2].id);
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            break;
+        }
+      }
+    };
+    ownerWindow.addEventListener('keydown', handleKeyDown);
+    return () => {
+      ownerWindow.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showTabBar]);
+
+  useLayoutEffect(() => {
+    return () => {
+      try {
+        // Shut the Bridge down synchronously (during unmount).
+        bridge.shutdown();
+      } catch (error) {
+        // Attempting to use a disconnected port.
+      }
+    };
+  }, [bridge]);
+
+  useEffect(() => {
+    logEvent({event_name: 'loaded-dev-tools'});
+  }, []);
+
+  return (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <OptionsContext.Provider value={options}>
+          <ContextMenuContext.Provider value={contextMenu}>
+            <ModalDialogContextController>
+              <SettingsContextController
+                browserTheme={browserTheme}
+                componentsPortalContainer={componentsPortalContainer}
+                profilerPortalContainer={profilerPortalContainer}>
+                <ViewElementSourceContext.Provider value={viewElementSource}>
+                  <HookNamesModuleLoaderContext.Provider
+                    value={hookNamesModuleLoaderFunction || null}>
+                    <FetchFileWithCachingContext.Provider
+                      value={fetchFileWithCaching || null}>
+                      <TreeContextController>
+                        <ProfilerContextController>
+                          <TimelineContextController>
+                            <InspectedElementContextController>
+                              <SuspenseTreeContextController>
+                                <ThemeProvider>
+                                  <div
+                                    className={styles.DevTools}
+                                    ref={devToolsRef}
+                                    data-react-devtools-portal-root={true}>
+                                    {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={selectTab}
+                                          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>
+                                    {enableSuspenseTab && (
+                                      <div
+                                        className={styles.TabContent}
+                                        hidden={tab !== 'suspense'}>
+                                        <SuspenseTab
+                                          portalContainer={
+                                            suspensePortalContainer
+                                          }
+                                        />
+                                      </div>
+                                    )}
+                                  </div>
+                                  {editorPortalContainer ? (
+                                    <EditorPane
+                                      selectedSource={currentSelectedSource}
+                                      portalContainer={editorPortalContainer}
+                                    />
+                                  ) : null}
+                                  {inspectedElementPortalContainer ? (
+                                    <InspectedElementPane
+                                      selectedSource={currentSelectedSource}
+                                      portalContainer={
+                                        inspectedElementPortalContainer
+                                      }
+                                    />
+                                  ) : null}
+                                </ThemeProvider>
+                              </SuspenseTreeContextController>
+                            </InspectedElementContextController>
+                          </TimelineContextController>
+                        </ProfilerContextController>
+                      </TreeContextController>
+                    </FetchFileWithCachingContext.Provider>
+                  </HookNamesModuleLoaderContext.Provider>
+                </ViewElementSourceContext.Provider>
+              </SettingsContextController>
+              <UnsupportedBridgeProtocolDialog />
+              {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
+              {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
+            </ModalDialogContextController>
+          </ContextMenuContext.Provider>
+        </OptionsContext.Provider>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css
new file mode 100644
index 00000000000..a4a4adbfa9f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css
@@ -0,0 +1,38 @@
+.EditorPane {
+  position: relative;
+  display: block;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+}
+
+.EditorPane, .EditorPane * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
+.EditorToolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.EditorInfo {
+  padding: 0.5rem;
+  text-align: center;
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  flex: 0 0 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}
+
+.WideButton {
+  flex: 1 0 auto;
+  display: flex;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js
new file mode 100644
index 00000000000..8237a59956d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useState, startTransition} from 'react';
+
+import portaledContent from '../portaledContent';
+
+import styles from './EditorPane.css';
+
+import Button from 'react-devtools-shared/src/devtools/views/Button';
+import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
+
+import OpenInEditorButton from './OpenInEditorButton';
+import useEditorURL from '../useEditorURL';
+
+import EditorSettings from './EditorSettings';
+import CodeEditorByDefault from '../Settings/CodeEditorByDefault';
+
+export type SourceSelection = {
+  url: string,
+  // The selection is a ref so that we don't have to rerender every keystroke.
+  selectionRef: {
+    line: number,
+    column: number,
+  },
+};
+
+export type Props = {selectedSource: ?SourceSelection};
+
+function EditorPane({selectedSource}: Props) {
+  const [showSettings, setShowSettings] = useState(false);
+  const [showLinkInfo, setShowLinkInfo] = useState(false);
+
+  const editorURL = useEditorURL();
+
+  if (showLinkInfo) {
+    return (
+      <div className={styles.EditorPane}>
+        <div className={styles.EditorToolbar}>
+          <div style={{display: 'flex', flex: '1 1 auto'}}>
+            To enable link handling in your browser's DevTools settings, look
+            for the option Extension -> Link Handling. Select "React Developer
+            Tools".
+          </div>
+          <div className={styles.VRule} />
+          <Button
+            onClick={() =>
+              startTransition(() => {
+                setShowLinkInfo(false);
+                setShowSettings(false);
+              })
+            }>
+            <ButtonIcon type="close" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  let editorToolbar;
+  if (showSettings) {
+    editorToolbar = (
+      <div className={styles.EditorToolbar}>
+        <EditorSettings />
+        <div className={styles.VRule} />
+        <Button onClick={() => startTransition(() => setShowSettings(false))}>
+          <ButtonIcon type="close" />
+        </Button>
+      </div>
+    );
+  } else {
+    editorToolbar = (
+      <div className={styles.EditorToolbar}>
+        <OpenInEditorButton
+          className={styles.WideButton}
+          editorURL={editorURL}
+          source={selectedSource}
+        />
+        <div className={styles.VRule} />
+        <Button
+          onClick={() => startTransition(() => setShowSettings(true))}
+          // We don't use the title here because we don't have enough space to show it.
+          // Once we expand this pane we can add it.
+          // title="Configure code editor"
+        >
+          <ButtonIcon type="settings" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.EditorPane}>
+      {editorToolbar}
+      <div className={styles.EditorInfo}>
+        {editorURL ? (
+          <CodeEditorByDefault
+            onChange={alwaysOpenInEditor => {
+              if (alwaysOpenInEditor) {
+                startTransition(() => setShowLinkInfo(true));
+              }
+            }}
+          />
+        ) : (
+          'Configure an external editor to open local files.'
+        )}
+      </div>
+    </div>
+  );
+}
+export default (portaledContent(EditorPane): component());
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorSettings.css b/packages/react-devtools-shared/src/devtools/views/Editor/EditorSettings.css
new file mode 100644
index 00000000000..f674441499b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorSettings.css
@@ -0,0 +1,9 @@
+.EditorSettings {
+  display: flex;
+  flex: 1 0 auto;
+}
+
+.EditorLabel {
+  display: inline;
+  margin-right: 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorSettings.js b/packages/react-devtools-shared/src/devtools/views/Editor/EditorSettings.js
new file mode 100644
index 00000000000..40466cc778c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorSettings.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './EditorSettings.css';
+
+import CodeEditorOptions from '../Settings/CodeEditorOptions';
+
+type Props = {};
+
+function EditorSettings(_: Props): React.Node {
+  return (
+    <div className={styles.EditorSettings}>
+      <label>
+        <div className={styles.EditorLabel}>Editor</div>
+        <CodeEditorOptions />
+      </label>
+    </div>
+  );
+}
+
+export default EditorSettings;
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/OpenInEditorButton.js b/packages/react-devtools-shared/src/devtools/views/Editor/OpenInEditorButton.js
new file mode 100644
index 00000000000..68c6981655f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/OpenInEditorButton.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import Button from 'react-devtools-shared/src/devtools/views/Button';
+import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
+import ButtonLabel from 'react-devtools-shared/src/devtools/views/ButtonLabel';
+
+import type {SourceSelection} from './EditorPane';
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+
+import {checkConditions} from './utils';
+
+type Props = {
+  editorURL: string,
+  source: ?SourceSelection,
+  className?: string,
+};
+
+function ActualOpenInEditorButton({
+  editorURL,
+  source,
+  className,
+}: Props): React.Node {
+  let disable;
+  if (source == null) {
+    disable = true;
+  } else {
+    const staleLocation: ReactFunctionLocation = [
+      '',
+      source.url,
+      // This is not live but we just use any line/column to validate whether this can be opened.
+      // We'll call checkConditions again when we click it to get the latest line number.
+      source.selectionRef.line,
+      source.selectionRef.column,
+    ];
+    disable = checkConditions(editorURL, staleLocation).shouldDisableButton;
+  }
+  return (
+    <Button
+      disabled={disable}
+      className={className}
+      onClick={() => {
+        if (source == null) {
+          return;
+        }
+        const latestLocation: ReactFunctionLocation = [
+          '',
+          source.url,
+          // These might have changed since we last read it.
+          source.selectionRef.line,
+          source.selectionRef.column,
+        ];
+        const {url, shouldDisableButton} = checkConditions(
+          editorURL,
+          latestLocation,
+        );
+        if (!shouldDisableButton) {
+          window.open(url);
+        }
+      }}>
+      <ButtonIcon type="editor" />
+      <ButtonLabel>Open in editor</ButtonLabel>
+    </Button>
+  );
+}
+
+function OpenInEditorButton({editorURL, source, className}: Props): React.Node {
+  return (
+    <React.Suspense
+      fallback={
+        <Button disabled={true} className={className}>
+          <ButtonIcon type="editor" />
+          <ButtonLabel>Loading source maps...</ButtonLabel>
+        </Button>
+      }>
+      <ActualOpenInEditorButton
+        editorURL={editorURL}
+        source={source}
+        className={className}
+      />
+    </React.Suspense>
+  );
+}
+
+export default OpenInEditorButton;
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/utils.js b/packages/react-devtools-shared/src/devtools/views/Editor/utils.js
new file mode 100644
index 00000000000..a107c517cb8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/utils.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
+
+export function checkConditions(
+  editorURL: string,
+  source: ReactFunctionLocation | ReactCallSite,
+): {url: URL | null, shouldDisableButton: boolean} {
+  try {
+    const url = new URL(editorURL);
+
+    const [, sourceURL, line, column] = source;
+    let filePath;
+
+    // Check if sourceURL is a correct URL, which has a protocol specified
+    if (sourceURL.startsWith('file:///')) {
+      filePath = new URL(sourceURL).pathname;
+    } else if (sourceURL.includes('://')) {
+      // $FlowFixMe[cannot-resolve-name]
+      if (!__IS_INTERNAL_VERSION__) {
+        // In this case, we can't really determine the path to a file, disable a button
+        return {url: null, shouldDisableButton: true};
+      } else {
+        const endOfSourceMapURLPattern = '.js/';
+        const endOfSourceMapURLIndex = sourceURL.lastIndexOf(
+          endOfSourceMapURLPattern,
+        );
+
+        if (endOfSourceMapURLIndex === -1) {
+          return {url: null, shouldDisableButton: true};
+        } else {
+          filePath = sourceURL.slice(
+            endOfSourceMapURLIndex + endOfSourceMapURLPattern.length,
+            sourceURL.length,
+          );
+        }
+      }
+    } else {
+      filePath = sourceURL;
+    }
+
+    const lineNumberAsString = String(line);
+    const columnNumberAsString = String(column);
+
+    url.href = url.href
+      .replace('{path}', filePath)
+      .replace('{line}', lineNumberAsString)
+      .replace('{column}', columnNumberAsString)
+      .replace('%7Bpath%7D', filePath)
+      .replace('%7Bline%7D', lineNumberAsString)
+      .replace('%7Bcolumn%7D', columnNumberAsString);
+
+    return {url, shouldDisableButton: false};
+  } catch (e) {
+    // User has provided incorrect editor url
+    return {url: null, shouldDisableButton: true};
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
new file mode 100644
index 00000000000..5f75a1a0326
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import styles from './shared.css';
+
+type Props = {
+  callStack: string | null,
+  children: React$Node,
+  info: React$Node | null,
+  componentStack: string | null,
+  errorMessage: string,
+};
+
+export default function CaughtErrorView({
+  callStack,
+  children,
+  info,
+  componentStack,
+  errorMessage,
+}: Props): React.Node {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.ErrorHeader}>{errorMessage}</div>
+        </div>
+        {!!info && <div className={styles.InfoBox}>{info}</div>}
+        {!!callStack && (
+          <div className={styles.ErrorStack}>
+            The error was thrown {callStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
new file mode 100644
index 00000000000..ffba7769bc7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Component, Suspense} from 'react';
+import Store from 'react-devtools-shared/src/devtools/store';
+import UnsupportedBridgeOperationView from './UnsupportedBridgeOperationView';
+import ErrorView from './ErrorView';
+import SearchingGitHubIssues from './SearchingGitHubIssues';
+import SuspendingErrorView from './SuspendingErrorView';
+import TimeoutView from './TimeoutView';
+import CaughtErrorView from './CaughtErrorView';
+import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError';
+import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
+import UserError from 'react-devtools-shared/src/errors/UserError';
+import UnknownHookError from 'react-devtools-shared/src/errors/UnknownHookError';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+
+type Props = {
+  children: React$Node,
+  canDismiss?: boolean,
+  onBeforeDismissCallback?: () => void,
+  store?: Store,
+};
+
+type State = {
+  callStack: string | null,
+  canDismiss: boolean,
+  componentStack: string | null,
+  errorMessage: string | null,
+  hasError: boolean,
+  isUnsupportedBridgeOperationError: boolean,
+  isTimeout: boolean,
+  isUserError: boolean,
+  isUnknownHookError: boolean,
+};
+
+const InitialState: State = {
+  callStack: null,
+  canDismiss: false,
+  componentStack: null,
+  errorMessage: null,
+  hasError: false,
+  isUnsupportedBridgeOperationError: false,
+  isTimeout: false,
+  isUserError: false,
+  isUnknownHookError: false,
+};
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = InitialState;
+
+  static getDerivedStateFromError(error: any): {
+    callStack: string | null,
+    errorMessage: string | null,
+    hasError: boolean,
+    isTimeout: boolean,
+    isUnknownHookError: boolean,
+    isUnsupportedBridgeOperationError: boolean,
+    isUserError: boolean,
+  } {
+    const errorMessage =
+      typeof error === 'object' &&
+      error !== null &&
+      typeof error.message === 'string'
+        ? error.message
+        : null;
+
+    const isTimeout = error instanceof TimeoutError;
+    const isUserError = error instanceof UserError;
+    const isUnknownHookError = error instanceof UnknownHookError;
+    const isUnsupportedBridgeOperationError =
+      error instanceof UnsupportedBridgeOperationError;
+
+    const callStack =
+      typeof error === 'object' &&
+      error !== null &&
+      typeof error.stack === 'string'
+        ? error.stack.split('\n').slice(1).join('\n')
+        : null;
+
+    return {
+      callStack,
+      errorMessage,
+      hasError: true,
+      isUnsupportedBridgeOperationError,
+      isUnknownHookError,
+      isTimeout,
+      isUserError,
+    };
+  }
+
+  componentDidCatch(error: any, {componentStack}: any) {
+    this._logError(error, componentStack);
+    this.setState({
+      componentStack,
+    });
+  }
+
+  componentDidMount() {
+    const {store} = this.props;
+    if (store != null) {
+      store.addListener('error', this._onStoreError);
+    }
+  }
+
+  componentWillUnmount() {
+    const {store} = this.props;
+    if (store != null) {
+      store.removeListener('error', this._onStoreError);
+    }
+  }
+
+  render(): React.Node {
+    const {canDismiss: canDismissProp, children} = this.props;
+    const {
+      callStack,
+      canDismiss: canDismissState,
+      componentStack,
+      errorMessage,
+      hasError,
+      isUnsupportedBridgeOperationError,
+      isTimeout,
+      isUserError,
+      isUnknownHookError,
+    } = this.state;
+
+    if (hasError) {
+      if (isTimeout) {
+        return (
+          <TimeoutView
+            callStack={callStack}
+            componentStack={componentStack}
+            dismissError={
+              canDismissProp || canDismissState ? this._dismissError : null
+            }
+            errorMessage={errorMessage}
+          />
+        );
+      } else if (isUnsupportedBridgeOperationError) {
+        return (
+          <UnsupportedBridgeOperationView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={errorMessage}
+          />
+        );
+      } else if (isUserError) {
+        return (
+          <CaughtErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={errorMessage || 'Error occured in inspected element'}
+            info={
+              <>
+                React DevTools encountered an error while trying to inspect the
+                hooks. This is most likely caused by a developer error in the
+                currently inspected element. Please see your console for logged
+                error.
+              </>
+            }
+          />
+        );
+      } else if (isUnknownHookError) {
+        return (
+          <CaughtErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={errorMessage || 'Encountered an unknown hook'}
+            info={
+              <>
+                React DevTools encountered an unknown hook. This is probably
+                because the react-debug-tools package is out of date. To fix,
+                upgrade the React DevTools to the most recent version.
+              </>
+            }
+          />
+        );
+      } else {
+        return (
+          <ErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            dismissError={
+              canDismissProp || canDismissState ? this._dismissError : null
+            }
+            errorMessage={errorMessage}>
+            <Suspense fallback={<SearchingGitHubIssues />}>
+              <SuspendingErrorView
+                callStack={callStack}
+                componentStack={componentStack}
+                errorMessage={errorMessage}
+              />
+            </Suspense>
+          </ErrorView>
+        );
+      }
+    }
+
+    return children;
+  }
+
+  _logError: (error: any, componentStack: string | null) => void = (
+    error,
+    componentStack,
+  ) => {
+    logEvent({
+      event_name: 'error',
+      error_message: error.message ?? null,
+      error_stack: error.stack ?? null,
+      error_component_stack: componentStack ?? null,
+    });
+  };
+
+  _dismissError: () => void = () => {
+    const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
+    if (typeof onBeforeDismissCallback === 'function') {
+      onBeforeDismissCallback();
+    }
+
+    this.setState(InitialState);
+  };
+
+  _onStoreError: (error: Error) => void = error => {
+    if (!this.state.hasError) {
+      this._logError(error, null);
+      this.setState({
+        ...ErrorBoundary.getDerivedStateFromError(error),
+        canDismiss: true,
+      });
+    }
+  };
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
new file mode 100644
index 00000000000..11551fd8838
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import styles from './shared.css';
+
+type Props = {
+  callStack: string | null,
+  children: React$Node,
+  componentStack: string | null,
+  dismissError: Function | null,
+  errorMessage: string | null,
+};
+
+export default function ErrorView({
+  callStack,
+  children,
+  componentStack,
+  dismissError = null,
+  errorMessage,
+}: Props): React.Node {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.ErrorHeader}>
+            Uncaught Error: {errorMessage || ''}
+          </div>
+          {dismissError !== null && (
+            <Button className={styles.CloseButton} onClick={dismissError}>
+              Dismiss
+              <ButtonIcon className={styles.CloseButtonIcon} type="close" />
+            </Button>
+          )}
+        </div>
+        {!!callStack && (
+          <div className={styles.ErrorStack}>
+            The error was thrown {callStack.trim()}
+          </div>
+        )}
+        {!!componentStack && (
+          <div className={styles.ErrorStack}>
+            The error occurred {componentStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
new file mode 100644
index 00000000000..f8dc401365d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import Icon from '../Icon';
+import {searchGitHubIssuesURL} from './githubAPI';
+import styles from './shared.css';
+
+const LABELS = [
+  'Component: Developer Tools',
+  'Type: Bug',
+  'Status: Unconfirmed',
+];
+
+// This must match the filename in ".github/ISSUE_TEMPLATE/"
+const TEMPLATE = 'devtools_bug_report.yml';
+
+type Props = {
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+};
+
+export default function ReportNewIssue({
+  callStack,
+  componentStack,
+  errorMessage,
+}: Props): React.Node {
+  let bugURL = process.env.GITHUB_URL;
+  if (!bugURL) {
+    return null;
+  }
+
+  const gitHubAPISearch =
+    errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
+
+  const title = `[DevTools Bug] ${errorMessage || ''}`;
+
+  const parameters = [
+    `template=${TEMPLATE}`,
+    `labels=${encodeURIComponent(LABELS.join(','))}`,
+    `title=${encodeURIComponent(title)}`,
+    `automated_package=${process.env.DEVTOOLS_PACKAGE || ''}`,
+    `automated_version=${process.env.DEVTOOLS_VERSION || ''}`,
+    `automated_error_message=${encodeURIComponent(errorMessage || '')}`,
+    `automated_call_stack=${encodeURIComponent(callStack || '')}`,
+    `automated_component_stack=${encodeURIComponent(componentStack || '')}`,
+    `automated_github_query_string=${gitHubAPISearch}`,
+  ];
+
+  bugURL += `/issues/new?${parameters.join('&')}`;
+
+  return (
+    <div className={styles.GitHubLinkRow}>
+      <Icon className={styles.ReportIcon} type="bug" />
+      <a
+        className={styles.ReportLink}
+        href={bugURL}
+        rel="noopener noreferrer"
+        target="_blank">
+        Report this issue
+      </a>
+      <div className={styles.ReproSteps}>
+        (Please include steps on how to reproduce it and the components used.)
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
new file mode 100644
index 00000000000..91542bb810b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import LoadingAnimation from 'react-devtools-shared/src/devtools/views/Components/LoadingAnimation';
+import styles from './shared.css';
+
+export default function SearchingGitHubIssues(): React.Node {
+  return (
+    <div className={styles.GitHubLinkRow}>
+      <LoadingAnimation className={styles.LoadingIcon} />
+      Searching GitHub for reports of this error...
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
new file mode 100644
index 00000000000..ddad69e37c9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {findGitHubIssue} from './cache';
+import UpdateExistingIssue from './UpdateExistingIssue';
+import ReportNewIssue from './ReportNewIssue';
+import WorkplaceGroup from './WorkplaceGroup';
+
+type Props = {
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+};
+
+export default function SuspendingErrorView({
+  callStack,
+  componentStack,
+  errorMessage,
+}: Props): React.Node {
+  const maybeItem =
+    errorMessage !== null ? findGitHubIssue(errorMessage) : null;
+
+  let GitHubUI;
+  if (maybeItem != null) {
+    GitHubUI = <UpdateExistingIssue gitHubIssue={maybeItem} />;
+  } else {
+    GitHubUI = (
+      <ReportNewIssue
+        callStack={callStack}
+        componentStack={componentStack}
+        errorMessage={errorMessage}
+      />
+    );
+  }
+
+  return (
+    <>
+      {GitHubUI}
+      <WorkplaceGroup />
+    </>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
new file mode 100644
index 00000000000..1deb8dd6858
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import styles from './shared.css';
+
+type Props = {
+  callStack: string | null,
+  children: React$Node,
+  componentStack: string | null,
+  dismissError: Function,
+  errorMessage: string | null,
+};
+
+export default function TimeoutView({
+  callStack,
+  children,
+  componentStack,
+  dismissError = null,
+  errorMessage,
+}: Props): React.Node {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.TimeoutHeader}>
+            {errorMessage || 'Timed out waiting'}
+          </div>
+          <Button className={styles.CloseButton} onClick={dismissError}>
+            Retry
+            <ButtonIcon className={styles.CloseButtonIcon} type="close" />
+          </Button>
+        </div>
+        {!!componentStack && (
+          <div className={styles.TimeoutStack}>
+            The timeout occurred {componentStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
new file mode 100644
index 00000000000..0208f37ebad
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import styles from './shared.css';
+
+type Props = {
+  callStack: string | null,
+  children: React$Node,
+  componentStack: string | null,
+  errorMessage: string | null,
+};
+
+export default function UnsupportedBridgeOperationView({
+  callStack,
+  children,
+  componentStack,
+  errorMessage,
+}: Props): React.Node {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.ErrorHeader}>
+            {errorMessage || 'Bridge protocol mismatch'}
+          </div>
+        </div>
+        <div className={styles.InfoBox}>
+          An incompatible version of <code>react-devtools-core</code> has been
+          embedded in a renderer like React Native. To fix this, update the{' '}
+          <code>react-devtools-core</code> package within the React Native
+          application, or downgrade the <code>react-devtools</code> package you
+          use to open the DevTools UI.
+        </div>
+        {!!callStack && (
+          <div className={styles.ErrorStack}>
+            The error was thrown {callStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
new file mode 100644
index 00000000000..f259a8a39d0
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {GitHubIssue} from './githubAPI';
+
+import * as React from 'react';
+import Icon from '../Icon';
+import styles from './shared.css';
+
+export default function UpdateExistingIssue({
+  gitHubIssue,
+}: {
+  gitHubIssue: GitHubIssue,
+}): React.Node {
+  const {title, url} = gitHubIssue;
+  return (
+    <div className={styles.GitHubLinkRow}>
+      <Icon className={styles.ReportIcon} type="bug" />
+      <div className={styles.UpdateExistingIssuePrompt}>
+        Update existing issue:
+      </div>
+      <a
+        className={styles.ReportLink}
+        href={url}
+        rel="noopener noreferrer"
+        target="_blank"
+        title="Report bug">
+        {title}
+      </a>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
new file mode 100644
index 00000000000..c72edc06f1c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/devtools/constants';
+import Icon from '../Icon';
+import styles from './shared.css';
+
+export default function WorkplaceGroup(): React.Node {
+  if (!isInternalFacebookBuild) {
+    return null;
+  }
+
+  return (
+    <div className={styles.WorkplaceGroupRow}>
+      <Icon className={styles.ReportIcon} type="facebook" />
+      <a
+        className={styles.ReportLink}
+        href={REACT_DEVTOOLS_WORKPLACE_URL}
+        rel="noopener noreferrer"
+        target="_blank">
+        Report this on Workplace
+      </a>
+      <div className={styles.FacebookOnly}>(Facebook employees only.)</div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
new file mode 100644
index 00000000000..6ae471ec993
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+import type {GitHubIssue} from './githubAPI';
+
+import * as React from 'react';
+
+import {unstable_getCacheForType as getCacheForType} from 'react';
+import {searchGitHubIssues} from './githubAPI';
+
+const API_TIMEOUT = 3000;
+function readRecord<T>(record: Thenable<T>): T | null {
+  if (typeof React.use === 'function') {
+    try {
+      // eslint-disable-next-line react-hooks-published/rules-of-hooks
+      return React.use(record);
+    } catch (x) {
+      if (x === null) {
+        return null;
+      }
+      throw x;
+    }
+  }
+  if (record.status === 'fulfilled') {
+    return record.value;
+  } else if (record.status === 'rejected') {
+    return null;
+  } else {
+    throw record;
+  }
+}
+
+type GitHubIssueMap = Map<string, Thenable<GitHubIssue>>;
+
+function createMap(): GitHubIssueMap {
+  return new Map();
+}
+
+function getRecordMap(): Map<string, Thenable<GitHubIssue>> {
+  return getCacheForType(createMap);
+}
+
+export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
+  errorMessage = normalizeErrorMessage(errorMessage);
+
+  const map = getRecordMap();
+  let record = map.get(errorMessage);
+
+  if (!record) {
+    const callbacks = new Set<(value: any) => mixed>();
+    const rejectCallbacks = new Set<(reason: mixed) => mixed>();
+    const thenable: Thenable<GitHubIssue> = {
+      status: 'pending',
+      value: null,
+      reason: null,
+      then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
+        callbacks.add(callback);
+        rejectCallbacks.add(reject);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Searching GitHub issues for error "${errorMessage}"`,
+    };
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.clear();
+      rejectCallbacks.clear();
+    };
+    const wakeRejections = () => {
+      // This assumes they won't throw.
+      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.clear();
+      callbacks.clear();
+    };
+    record = thenable;
+
+    let didTimeout = false;
+
+    searchGitHubIssues(errorMessage)
+      .then(maybeItem => {
+        if (didTimeout) {
+          return;
+        }
+
+        if (maybeItem) {
+          const fulfilledThenable: FulfilledThenable<GitHubIssue> =
+            (thenable: any);
+          fulfilledThenable.status = 'fulfilled';
+          fulfilledThenable.value = maybeItem;
+          wake();
+        } else {
+          const notFoundThenable: RejectedThenable<GitHubIssue> =
+            (thenable: any);
+          notFoundThenable.status = 'rejected';
+          notFoundThenable.reason = null;
+          wakeRejections();
+        }
+      })
+      .catch(error => {
+        const rejectedThenable: RejectedThenable<GitHubIssue> = (thenable: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = null;
+        wakeRejections();
+      });
+
+    // Only wait a little while for GitHub results before showing a fallback.
+    setTimeout(() => {
+      didTimeout = true;
+
+      const timedoutThenable: RejectedThenable<GitHubIssue> = (thenable: any);
+      timedoutThenable.status = 'rejected';
+      timedoutThenable.reason = null;
+      wakeRejections();
+    }, API_TIMEOUT);
+
+    map.set(errorMessage, record);
+  }
+
+  const response = readRecord(record);
+  return response;
+}
+
+function normalizeErrorMessage(errorMessage: string): string {
+  // Remove Fiber IDs from error message (as those will be unique).
+  errorMessage = errorMessage.replace(/"[0-9]+"/, '');
+  return errorMessage;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
new file mode 100644
index 00000000000..77cc3b3d5d2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 GitHubIssue = {
+  title: string,
+  url: string,
+};
+
+const GITHUB_ISSUES_API = 'https://api.github.com/search/issues';
+
+export function searchGitHubIssuesURL(message: string): string {
+  // Remove Fiber IDs from error message (as those will be unique).
+  message = message.replace(/"[0-9]+"/g, '');
+
+  const filters = [
+    'in:title',
+    'is:issue',
+    'is:open',
+    'is:public',
+    'label:"Component: Developer Tools"',
+    'repo:facebook/react',
+  ];
+
+  return (
+    GITHUB_ISSUES_API +
+    '?q=' +
+    encodeURIComponent(message) +
+    '%20' +
+    filters.map(encodeURIComponent).join('%20')
+  );
+}
+
+export async function searchGitHubIssues(
+  message: string,
+): Promise<GitHubIssue | null> {
+  const response = await fetch(searchGitHubIssuesURL(message));
+  const data = await response.json();
+  if (data.items.length > 0) {
+    const item = data.items[0];
+    return {
+      title: item.title,
+      url: item.html_url,
+    };
+  } else {
+    return null;
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/index.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/index.js
new file mode 100644
index 00000000000..9afd7638106
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ErrorBoundary from './ErrorBoundary';
+
+export default ErrorBoundary;
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
new file mode 100644
index 00000000000..cc6c5efe2bd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
@@ -0,0 +1,133 @@
+.GitHubLinkRow {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: auto;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-console-warning-background);
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-console-warning-border);
+  border-top: 1px solid var(--color-console-warning-border);
+}
+
+.WorkplaceGroupRow {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: auto;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-background-hover);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ErrorBoundary {
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-background);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+}
+
+.ErrorInfo {
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.HeaderRow {
+  display: flex;
+  flex-direction: row;
+  font-size: var(--font-size-sans-large);
+  font-weight: bold;
+}
+
+.ErrorHeader,
+.TimeoutHeader {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ErrorHeader {
+  color: var(--color-error-text);
+}
+.TimeoutHeader {
+  color: var(--color-text);
+}
+
+.ErrorStack,
+.TimeoutStack {
+  margin-top: 0.5rem;
+  white-space: pre-wrap;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  -webkit-font-smoothing: initial;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.ErrorStack {
+  background-color: var(--color-error-background);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error-text);
+}
+
+.TimeoutStack {
+  background-color: var(--color-console-warning-background);
+  color: var(--color-console-warning-text);
+  border: var(--color-console-warning-border)
+}
+
+.LoadingIcon {
+  margin-right: 0.25rem;
+}
+
+.ReportIcon {
+  margin-right: 0.25rem;
+}
+
+.ReportLink {
+  color: var(--color-link);
+}
+
+.FacebookOnly {
+  margin-left: 0.25rem;
+}
+
+.ReproSteps {
+  margin-left: 0.25rem;
+  color: var(--color-console-warning-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.UpdateExistingIssuePrompt {
+  margin-right: 0.25rem;
+  color: var(--color-console-warning-text);
+}
+
+.CloseButton {
+  font-weight: bold;
+}
+
+.CloseButtonIcon {
+  margin-left: 0.25rem;
+}
+
+.InfoBox {
+  margin-top: 0.5rem;
+  background: var(--color-console-warning-background);
+  border: 1px solid var(--color-console-warning-border);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  color: var(--color-console-warning-text);
+}
\ No newline at end of file
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 00000000000..2141ede58bd
--- /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 00000000000..f49bb4fd038
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import styles from './Icon.css';
+
+export type IconType =
+  | 'arrow'
+  | 'bug'
+  | 'code'
+  | 'components'
+  | 'copy'
+  | 'error'
+  | 'facebook'
+  | 'flame-chart'
+  | 'profiler'
+  | 'ranked-chart'
+  | 'timeline'
+  | 'search'
+  | 'settings'
+  | 'store-as-global-variable'
+  | 'strict-mode-non-compliant'
+  | 'suspense'
+  | 'warning';
+
+type Props = {
+  className?: string,
+  title?: string,
+  type: IconType,
+  ...
+};
+
+export default function Icon({
+  className = '',
+  title = '',
+  type,
+  ...props
+}: Props): React.Node {
+  let pathData = null;
+  let viewBox = '0 0 24 24';
+  switch (type) {
+    case 'arrow':
+      pathData = PATH_ARROW;
+      break;
+    case 'bug':
+      pathData = PATH_BUG;
+      break;
+    case 'code':
+      pathData = PATH_CODE;
+      break;
+    case 'components':
+      pathData = PATH_COMPONENTS;
+      break;
+    case 'copy':
+      pathData = PATH_COPY;
+      break;
+    case 'error':
+      pathData = PATH_ERROR;
+      break;
+    case 'facebook':
+      pathData = PATH_FACEBOOK;
+      break;
+    case 'flame-chart':
+      pathData = PATH_FLAME_CHART;
+      break;
+    case 'profiler':
+      pathData = PATH_PROFILER;
+      break;
+    case 'ranked-chart':
+      pathData = PATH_RANKED_CHART;
+      break;
+    case 'timeline':
+      pathData = PATH_SCHEDULING_PROFILER;
+      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;
+    case 'strict-mode-non-compliant':
+      pathData = PATH_STRICT_MODE_NON_COMPLIANT;
+      break;
+    case 'suspense':
+      pathData = PATH_SUSPEND;
+      viewBox = '-2 -2 28 28';
+      break;
+    case 'warning':
+      pathData = PATH_WARNING;
+      break;
+    default:
+      console.warn(`Unsupported type "${type}" specified for Icon`);
+      break;
+  }
+
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${styles.Icon} ${className}`}
+      width="24"
+      height="24"
+      viewBox={viewBox}>
+      {title && <title>{title}</title>}
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path fill="currentColor" d={pathData} />
+    </svg>
+  );
+}
+
+const PATH_ARROW = 'M8 5v14l11-7z';
+
+const PATH_BUG = `
+  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_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_ERROR = `M16.971 0h-9.942l-7.029 7.029v9.941l7.029 7.03h9.941l7.03-7.029v-9.942l-7.029-7.029zm-1.402 16.945l-3.554-3.521-3.518 3.568-1.418-1.418 3.507-3.566-3.586-3.472 1.418-1.417 3.581 3.458 3.539-3.583 1.431 1.431-3.535 3.568 3.566 3.522-1.431 1.43z`;
+
+const PATH_FACEBOOK = `
+  M22,12c0-5.52-4.48-10-10-10S2,6.48,2,12c0,4.84,3.44,8.87,8,9.8V15H8v-3h2V9.5C10,7.57,11.57,6,13.5,6H16v3h-2 c-0.55,0-1,0.45-1,1v2h3v3h-3v6.95C18.05,21.45,22,17.19,22,12z
+`;
+
+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_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';
+
+const PATH_SCHEDULING_PROFILER = `
+  M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0
+  16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z
+`;
+
+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
+`;
+
+const PATH_STRICT_MODE_NON_COMPLIANT = `
+  M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12
+  14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z
+`;
+
+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_WARNING = `M12 1l-12 22h24l-12-22zm-1 8h2v7h-2v-7zm1 11.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z`;
diff --git a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.css b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.css
new file mode 100644
index 00000000000..5d0cd2e40ae
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.css
@@ -0,0 +1,15 @@
+.InspectedElementPane, .InspectedElementPane * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
+.InspectedElementPane {
+  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);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
new file mode 100644
index 00000000000..a47bffda8d7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext} from 'react';
+
+import portaledContent from 'react-devtools-shared/src/devtools/views/portaledContent';
+import {OptionsContext} from 'react-devtools-shared/src/devtools/views/context';
+import InspectedElement from 'react-devtools-shared/src/devtools/views/Components/InspectedElement';
+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 styles from './InspectedElementPane.css';
+
+function InspectedElementPane() {
+  const {hideSettings} = useContext(OptionsContext);
+  return (
+    <SettingsModalContextController>
+      <div className={styles.InspectedElementPane}>
+        <InspectedElement
+          actionButtons={!hideSettings && <SettingsModalContextToggle />}
+          fallbackEmpty={"Selected element wasn't rendered with React."}
+        />
+        <SettingsModal />
+      </div>
+    </SettingsModalContextController>
+  );
+}
+export default (portaledContent(InspectedElementPane): component());
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 00000000000..754b40b96f2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.css
@@ -0,0 +1,42 @@
+.Background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--color-modal-background);
+  overflow: auto;
+}
+
+.Dialog {
+  position: relative;
+  z-index: 3;
+  margin: 0 0.25rem;
+  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 00000000000..a584d9a9e3d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import Button from './Button';
+import {useModalDismissSignal} from './hooks';
+
+import styles from './ModalDialog.css';
+
+type ID = any;
+
+type DIALOG_ACTION_HIDE = {
+  type: 'HIDE',
+  id: ID,
+};
+type DIALOG_ACTION_SHOW = {
+  type: 'SHOW',
+  canBeDismissed?: boolean,
+  content: React$Node,
+  id: ID,
+  title?: React$Node | null,
+};
+
+type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;
+
+type Dispatch = (action: Action) => void;
+
+type Dialog = {
+  canBeDismissed: boolean,
+  content: React$Node | null,
+  id: ID,
+  title: React$Node | null,
+};
+
+type State = {
+  dialogs: Array<Dialog>,
+};
+
+type ModalDialogContextType = {
+  ...State,
+  dispatch: Dispatch,
+};
+
+const ModalDialogContext: ReactContext<ModalDialogContextType> =
+  createContext<ModalDialogContextType>(((null: any): ModalDialogContextType));
+ModalDialogContext.displayName = 'ModalDialogContext';
+
+function dialogReducer(state: State, action: Action) {
+  switch (action.type) {
+    case 'HIDE':
+      return {
+        dialogs: state.dialogs.filter(dialog => dialog.id !== action.id),
+      };
+    case 'SHOW':
+      return {
+        dialogs: [
+          ...state.dialogs,
+          {
+            canBeDismissed: action.canBeDismissed !== false,
+            content: action.content,
+            id: action.id,
+            title: action.title || null,
+          } as Dialog,
+        ],
+      };
+    default:
+      throw new Error(`Invalid action "${action.type}"`);
+  }
+}
+
+type Props = {
+  children: React$Node,
+};
+
+function ModalDialogContextController({children}: Props): React.Node {
+  const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
+    dialogs: [],
+  });
+
+  const value = useMemo<ModalDialogContextType>(
+    () => ({
+      dialogs: state.dialogs,
+      dispatch,
+    }),
+    [state, dispatch],
+  );
+
+  return (
+    <ModalDialogContext.Provider value={value}>
+      {children}
+    </ModalDialogContext.Provider>
+  );
+}
+
+function ModalDialog(_: {}): React.Node {
+  const {dialogs, dispatch} = useContext(ModalDialogContext);
+
+  if (dialogs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.Background}>
+      {dialogs.map(dialog => (
+        <ModalDialogImpl
+          key={dialog.id}
+          canBeDismissed={dialog.canBeDismissed}
+          content={dialog.content}
+          dispatch={dispatch}
+          id={dialog.id}
+          title={dialog.title}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ModalDialogImpl({
+  canBeDismissed,
+  content,
+  dispatch,
+  id,
+  title,
+}: {
+  canBeDismissed: boolean,
+  content: React$Node | null,
+  dispatch: Dispatch,
+  id: ID,
+  title: React$Node | null,
+}) {
+  const dismissModal = useCallback(() => {
+    if (canBeDismissed) {
+      dispatch({type: 'HIDE', id});
+    }
+  }, [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 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>
+  );
+}
+
+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 00000000000..3117ea19322
--- /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 00000000000..a6acf53fcd0
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './ChartNode.css';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+type Props = {
+  color: string,
+  height: number,
+  isDimmed?: boolean,
+  label: string,
+  onClick: (event: SyntheticMouseEvent) => mixed,
+  onDoubleClick?: (event: SyntheticMouseEvent) => mixed,
+  onMouseEnter: (event: SyntheticMouseEvent) => mixed,
+  onMouseLeave: (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,
+  onMouseEnter,
+  onMouseLeave,
+  onDoubleClick,
+  textStyle,
+  width,
+  x,
+  y,
+}: Props): React.Node {
+  return (
+    <g className={styles.Group} transform={`translate(${x},${y})`}>
+      <rect
+        width={width}
+        height={height}
+        fill={color}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        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 00000000000..ea71d1b85a7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {StoreContext} from '../context';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
+
+export default function ClearProfilingDataButton(): React.Node {
+  const store = useContext(StoreContext);
+  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
+  const {file, setFile} = useContext(TimelineContext);
+  const {profilerStore} = store;
+
+  const doesHaveInMemoryData = didRecordCommits;
+  const doesHaveUserTimingData = file !== null;
+
+  const clear = () => {
+    if (doesHaveInMemoryData) {
+      profilerStore.clear();
+    }
+    if (doesHaveUserTimingData) {
+      setFile(null);
+    }
+  };
+
+  return (
+    <Button
+      disabled={
+        isProfiling || !(doesHaveInMemoryData || doesHaveUserTimingData)
+      }
+      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 00000000000..143f83b0432
--- /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 00000000000..3774a4d3400
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {forwardRef, useCallback, useContext, useMemo, useState} 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 HoveredFiberInfo from './HoveredFiberInfo';
+import {scale} from './utils';
+import {useHighlightHostInstance} from '../hooks';
+import {StoreContext} from '../context';
+import {SettingsContext} from '../Settings/SettingsContext';
+import Tooltip from './Tooltip';
+
+import styles from './CommitFlamegraph.css';
+
+import type {TooltipFiberData} from './HoveredFiberInfo';
+import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
+import type {CommitTree} from './types';
+
+export type ItemData = {
+  chartData: ChartData,
+  onElementMouseEnter: (fiberData: TooltipFiberData) => void,
+  onElementMouseLeave: () => void,
+  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(_: {}): React.Node {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex, selectFiber} =
+    useContext(ProfilerContext);
+  const {profilingCache} = profilerStore;
+
+  const deselectCurrentFiber = useCallback(
+    (event: $FlowFixMe) => {
+      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 [hoveredFiberData, setHoveredFiberData] =
+    useState<TooltipFiberData | null>(null);
+  const {lineHeight} = useContext(SettingsContext);
+  const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+
+  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 handleElementMouseEnter = useCallback(
+    ({id, name}: $FlowFixMe) => {
+      highlightHostInstance(id); // Highlight last hovered element.
+      setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
+    },
+    [highlightHostInstance],
+  );
+
+  const handleElementMouseLeave = useCallback(() => {
+    clearHighlightHostInstance(); // clear highlighting of element on mouse leave
+    setHoveredFiberData(null); // clear hovered fiber data for tooltip
+  }, [clearHighlightHostInstance]);
+
+  const itemData = useMemo<ItemData>(
+    () => ({
+      chartData,
+      onElementMouseEnter: handleElementMouseEnter,
+      onElementMouseLeave: handleElementMouseLeave,
+      scaleX: scale(
+        0,
+        selectedChartNode !== null
+          ? selectedChartNode.treeBaseDuration
+          : chartData.baseDuration,
+        0,
+        width,
+      ),
+      selectedChartNode,
+      selectedChartNodeIndex,
+      selectFiber,
+      width,
+    }),
+    [
+      chartData,
+      handleElementMouseEnter,
+      handleElementMouseLeave,
+      selectedChartNode,
+      selectedChartNodeIndex,
+      selectFiber,
+      width,
+    ],
+  );
+
+  // Tooltip used to show summary of fiber info on hover
+  const tooltipLabel = useMemo(
+    () =>
+      hoveredFiberData !== null ? (
+        <HoveredFiberInfo fiberData={hoveredFiberData} />
+      ) : null,
+    [hoveredFiberData],
+  );
+
+  return (
+    <Tooltip label={tooltipLabel}>
+      <FixedSizeList
+        height={height}
+        innerElementType={InnerElementType}
+        itemCount={chartData.depth}
+        itemData={itemData}
+        itemSize={lineHeight}
+        width={width}>
+        {CommitFlamegraphListItem}
+      </FixedSizeList>
+    </Tooltip>
+  );
+}
+
+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 00000000000..5bfe0a299f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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 {ChartNode as ChartNodeType} from './FlamegraphChartBuilder';
+import type {ItemData} from './CommitFlamegraph';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+type Props = {
+  data: ItemData,
+  index: number,
+  style: Object,
+  ...
+};
+
+function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
+  const {
+    chartData,
+    onElementMouseEnter,
+    onElementMouseLeave,
+    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],
+  );
+
+  const handleMouseEnter = (nodeData: ChartNodeType) => {
+    const {id, name} = nodeData;
+    onElementMouseEnter({id, name});
+  };
+
+  const handleMouseLeave = () => {
+    onElementMouseLeave();
+  };
+
+  // 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];
+
+  const 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)}
+            onMouseEnter={() => handleMouseEnter(chartNode)}
+            onMouseLeave={handleMouseLeave}
+            textStyle={{color: textColor}}
+            width={nodeWidth}
+            x={nodeOffset - selectedNodeOffset}
+            y={top}
+          />
+        );
+      })}
+    </Fragment>
+  );
+}
+
+export default (memo(CommitFlamegraphListItem, areEqual): component(
+  ...props: Props
+));
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 00000000000..c226f30486b
--- /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 00000000000..bc482776f4e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback, useContext, useMemo, useState} 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 HoveredFiberInfo from './HoveredFiberInfo';
+import {scale} from './utils';
+import {StoreContext} from '../context';
+import {SettingsContext} from '../Settings/SettingsContext';
+import {useHighlightHostInstance} from '../hooks';
+import Tooltip from './Tooltip';
+
+import styles from './CommitRanked.css';
+
+import type {TooltipFiberData} from './HoveredFiberInfo';
+import type {ChartData} from './RankedChartBuilder';
+import type {CommitTree} from './types';
+
+export type ItemData = {
+  chartData: ChartData,
+  onElementMouseEnter: (fiberData: TooltipFiberData) => void,
+  onElementMouseLeave: () => void,
+  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(_: {}): React.Node {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex, selectFiber} =
+    useContext(ProfilerContext);
+  const {profilingCache} = profilerStore;
+
+  const deselectCurrentFiber = useCallback(
+    (event: $FlowFixMe) => {
+      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 [hoveredFiberData, setHoveredFiberData] =
+    useState<TooltipFiberData | null>(null);
+  const {lineHeight} = useContext(SettingsContext);
+  const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+
+  const selectedFiberIndex = useMemo(
+    () => getNodeIndex(chartData, selectedFiberID),
+    [chartData, selectedFiberID],
+  );
+
+  const handleElementMouseEnter = useCallback(
+    ({id, name}: $FlowFixMe) => {
+      highlightHostInstance(id); // Highlight last hovered element.
+      setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
+    },
+    [highlightHostInstance],
+  );
+
+  const handleElementMouseLeave = useCallback(() => {
+    clearHighlightHostInstance(); // clear highlighting of element on mouse leave
+    setHoveredFiberData(null); // clear hovered fiber data for tooltip
+  }, [clearHighlightHostInstance]);
+
+  const itemData = useMemo<ItemData>(
+    () => ({
+      chartData,
+      onElementMouseEnter: handleElementMouseEnter,
+      onElementMouseLeave: handleElementMouseLeave,
+      scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
+      selectedFiberID,
+      selectedFiberIndex,
+      selectFiber,
+      width,
+    }),
+    [
+      chartData,
+      handleElementMouseEnter,
+      handleElementMouseLeave,
+      selectedFiberID,
+      selectedFiberIndex,
+      selectFiber,
+      width,
+    ],
+  );
+
+  // Tooltip used to show summary of fiber info on hover
+  const tooltipLabel = useMemo(
+    () =>
+      hoveredFiberData !== null ? (
+        <HoveredFiberInfo fiberData={hoveredFiberData} />
+      ) : null,
+    [hoveredFiberData],
+  );
+
+  return (
+    <Tooltip label={tooltipLabel}>
+      <FixedSizeList
+        height={height}
+        innerElementType="svg"
+        itemCount={chartData.nodes.length}
+        itemData={itemData}
+        itemSize={lineHeight}
+        width={width}>
+        {CommitRankedListItem}
+      </FixedSizeList>
+    </Tooltip>
+  );
+}
+
+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 00000000000..707fddf6268
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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,
+    onElementMouseEnter,
+    onElementMouseLeave,
+    scaleX,
+    selectedFiberIndex,
+    selectFiber,
+    width,
+  } = data;
+
+  const node = chartData.nodes[index];
+
+  const {lineHeight} = useContext(SettingsContext);
+
+  const handleClick = useCallback(
+    (event: $FlowFixMe) => {
+      event.stopPropagation();
+      const {id, name} = node;
+      selectFiber(id, name);
+    },
+    [node, selectFiber],
+  );
+
+  const handleMouseEnter = () => {
+    const {id, name} = node;
+    onElementMouseEnter({id, name});
+  };
+
+  const handleMouseLeave = () => {
+    onElementMouseLeave();
+  };
+
+  // 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}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      width={Math.max(minBarWidth, scaleX(node.value, width))}
+      x={0}
+      y={top}
+    />
+  );
+}
+
+export default (memo(CommitRankedListItem, areEqual): component(
+  ...props: Props
+));
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 00000000000..41c5c7a2c09
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -0,0 +1,539 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_REMOVE_ROOT,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_SET_SUBTREE_MODE,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
+  SUSPENSE_TREE_OPERATION_ADD,
+  SUSPENSE_TREE_OPERATION_REMOVE,
+  SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
+  SUSPENSE_TREE_OPERATION_RESIZE,
+  SUSPENSE_TREE_OPERATION_SUSPENDERS,
+} from 'react-devtools-shared/src/constants';
+import {
+  parseElementDisplayNameFromBackend,
+  utfDecodeStringWithRanges,
+} from 'react-devtools-shared/src/utils';
+import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';
+import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+
+import type {ElementType} from 'react-devtools-shared/src/frontend/types';
+import type {
+  CommitTree,
+  CommitTreeNode,
+  ProfilingDataForRootFrontend,
+} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+
+const debug = (methodName: string, ...args: Array<string>) => {
+  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;
+  if (operations.length <= commitIndex) {
+    throw Error(
+      `getCommitTree(): Invalid commit "${commitIndex}" for root "${rootID}". There are only "${operations.length}" commits.`,
+    );
+  }
+
+  let commitTree: CommitTree = ((null: any): CommitTree);
+  for (let index = commitTrees.length; index <= commitIndex; index++) {
+    // 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 (index === 0) {
+      const nodes = new Map<number, CommitTreeNode>();
+
+      // Construct the initial tree.
+      recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);
+
+      // Mutate the tree
+      if (operations != null && index < operations.length) {
+        commitTree = updateTree({nodes, rootID}, operations[index]);
+
+        if (__DEBUG__) {
+          __printTree(commitTree);
+        }
+
+        commitTrees.push(commitTree);
+      }
+    } else {
+      const previousCommitTree = commitTrees[index - 1];
+      commitTree = updateTree(previousCommitTree, operations[index]);
+
+      if (__DEBUG__) {
+        __printTree(commitTree);
+      }
+
+      commitTrees.push(commitTree);
+    }
+  }
+
+  return commitTree;
+}
+
+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,
+      hocDisplayNames: node.hocDisplayNames,
+      key: node.key,
+      parentID,
+      treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
+        id,
+      ): any): number),
+      type: node.type,
+      compiledWithForget: node.compiledWithForget,
+    });
+
+    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 => {
+    // $FlowFixMe[prop-missing] - recommended fix is to use object spread operator
+    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: Array<null | string> = [
+    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 = utfDecodeStringWithRanges(
+      operations,
+      i,
+      i + nextLength - 1,
+    );
+    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++; // isStrictModeCompliant
+          i++; // Profiling flag
+          i++; // supportsStrictMode flag
+          i++; // hasOwnerMetadata flag
+
+          if (__DEBUG__) {
+            debug('Add', `new root fiber ${id}`);
+          }
+
+          const node: CommitTreeNode = {
+            children: [],
+            displayName: null,
+            hocDisplayNames: null,
+            id,
+            key: null,
+            parentID: 0,
+            treeBaseDuration: 0, // This will be updated by a subsequent operation
+            type,
+            compiledWithForget: false,
+          };
+
+          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++;
+
+          // skip name prop
+          i++;
+
+          if (__DEBUG__) {
+            debug(
+              'Add',
+              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`,
+            );
+          }
+
+          const parentNode = getClonedNode(parentID);
+          parentNode.children = parentNode.children.concat(id);
+
+          const {formattedDisplayName, hocDisplayNames, compiledWithForget} =
+            parseElementDisplayNameFromBackend(displayName, type);
+
+          const node: CommitTreeNode = {
+            children: [],
+            displayName: formattedDisplayName,
+            hocDisplayNames: hocDisplayNames,
+            id,
+            key,
+            parentID,
+            treeBaseDuration: 0, // This will be updated by a subsequent operation
+            type,
+            compiledWithForget,
+          };
+
+          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_REMOVE_ROOT: {
+        throw Error('Operation REMOVE_ROOT is not supported while profiling.');
+      }
+      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_SET_SUBTREE_MODE: {
+        id = operations[i + 1];
+        const mode = operations[i + 1];
+
+        i += 3;
+
+        if (__DEBUG__) {
+          debug('Subtree mode', `Subtree with root ${id} set to mode ${mode}`);
+        }
+        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;
+      }
+      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS: {
+        id = operations[i + 1];
+        const numErrors = operations[i + 2];
+        const numWarnings = operations[i + 3];
+
+        i += 4;
+
+        if (__DEBUG__) {
+          debug(
+            'Warnings and Errors update',
+            `fiber ${id} has ${numErrors} errors and ${numWarnings} warnings`,
+          );
+        }
+        break;
+      }
+
+      case SUSPENSE_TREE_OPERATION_ADD: {
+        const fiberID = operations[i + 1];
+        const parentID = operations[i + 2];
+        const nameStringID = operations[i + 3];
+        const isSuspended = operations[i + 4];
+        const numRects = operations[i + 5];
+        const name = stringTable[nameStringID];
+
+        if (__DEBUG__) {
+          let rects: string;
+          if (numRects === -1) {
+            rects = 'null';
+          } else {
+            rects =
+              '[' +
+              operations.slice(i + 6, i + 6 + numRects * 4).join(',') +
+              ']';
+          }
+          debug(
+            'Add suspense',
+            `node ${fiberID} (name=${JSON.stringify(name)}, rects={${rects}}) under ${parentID} suspended ${isSuspended}`,
+          );
+        }
+
+        i += 6 + (numRects === -1 ? 0 : numRects * 4);
+        break;
+      }
+
+      case SUSPENSE_TREE_OPERATION_REMOVE: {
+        const removeLength = ((operations[i + 1]: any): number);
+        i += 2 + removeLength;
+
+        break;
+      }
+
+      case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {
+        const suspenseID = ((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(
+            'Suspense re-order',
+            `suspense ${suspenseID} children ${children.join(',')}`,
+          );
+        }
+
+        break;
+      }
+
+      case SUSPENSE_TREE_OPERATION_RESIZE: {
+        const suspenseID = ((operations[i + 1]: any): number);
+        const numRects = ((operations[i + 2]: any): number);
+
+        if (__DEBUG__) {
+          if (numRects === -1) {
+            debug('Suspense resize', `suspense ${suspenseID} rects null`);
+          } else {
+            const rects = ((operations.slice(
+              i + 3,
+              i + 3 + numRects * 4,
+            ): any): Array<number>);
+            debug(
+              'Suspense resize',
+              `suspense ${suspenseID} rects [${rects.join(',')}]`,
+            );
+          }
+        }
+
+        i += 3 + (numRects === -1 ? 0 : numRects * 4);
+
+        break;
+      }
+
+      case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
+        i++;
+        const changeLength = ((operations[i++]: any): number);
+
+        for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
+          const suspenseNodeId = operations[i++];
+          const hasUniqueSuspenders = operations[i++] === 1;
+          const endTime = operations[i++] / 1000;
+          const isSuspended = operations[i++] === 1;
+          const environmentNamesLength = operations[i++];
+          i += environmentNamesLength;
+          if (__DEBUG__) {
+            debug(
+              'Suspender changes',
+              `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`,
+            );
+          }
+        }
+
+        break;
+      }
+
+      case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
+        i++;
+        const activitySliceIDChange = operations[i++];
+        if (__DEBUG__) {
+          debug(
+            'Applied activity slice change',
+            activitySliceIDChange === 0
+              ? 'Reset applied activity slice'
+              : `Changed to activity slice ID ${activitySliceIDChange}`,
+          );
+        }
+        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();
+
+      // $FlowFixMe[incompatible-call]
+      const node = nodes.get(id);
+      if (node == null) {
+        // $FlowFixMe[incompatible-type]
+        throw Error(`Could not find node with id "${id}" in commit tree`);
+      }
+
+      console.log(
+        // $FlowFixMe[incompatible-call]
+        `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${
+          node.key ? `key:"${node.key}"` : ''
+        } (${node.treeBaseDuration})`,
+      );
+
+      node.children.forEach(childID => {
+        // $FlowFixMe[unsafe-addition]
+        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 00000000000..53f9f496577
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {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,
+  ): ChartNode => {
+    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,
+      hocDisplayNames,
+      key,
+      treeBaseDuration,
+      compiledWithForget,
+    } = 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 = '';
+    const maybeForgetBadge = compiledWithForget ? '✨ ' : '';
+
+    if (hocDisplayNames !== null && hocDisplayNames.length > 0) {
+      maybeBadge = ` (${hocDisplayNames[0]})`;
+    }
+
+    let label = `${maybeForgetBadge}${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: $FlowFixMe = 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/HookChangeSummary.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.css
new file mode 100644
index 00000000000..d1aff47bddf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.css
@@ -0,0 +1,59 @@
+.LoadHookNamesToggle,
+.ToggleError {
+  padding: 2px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  bottom: -0.2em;
+  margin-block: -1em;
+}
+
+.ToggleError {
+  color: var(--color-error-text);
+}
+
+.Hook {
+  list-style-type: none;
+  margin: 0;
+  padding-left: 0.5rem;
+  line-height: 1.125rem;
+
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Hook .Hook {
+  padding-left: 1rem;
+}
+
+.Name {
+  color: var(--color-dim);
+  flex: 0 0 auto;
+  cursor: default;
+}
+
+.PrimitiveHookName {
+  color: var(--color-text);
+  flex: 0 0 auto;
+  cursor: default;
+}
+
+.Name:after {
+  color: var(--color-text);
+  content: ': ';
+  margin-right: 0.5rem;
+}
+
+.PrimitiveHookNumber {
+  background-color: var(--color-primitive-hook-badge-background);
+  color: var(--color-primitive-hook-badge-text);
+  font-size: var(--font-size-monospace-small);
+  margin-right: 0.25rem;
+  border-radius: 0.125rem;
+  padding: 0.125rem 0.25rem;
+}
+
+.HookName {
+  color: var(--color-component-name);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js
new file mode 100644
index 00000000000..5ce3eec42bc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  useContext,
+  useMemo,
+  useCallback,
+  memo,
+  useState,
+  useEffect,
+} from 'react';
+import styles from './HookChangeSummary.css';
+import ButtonIcon from '../ButtonIcon';
+import {InspectedElementContext} from '../Components/InspectedElementContext';
+import {StoreContext} from '../context';
+
+import {getAlreadyLoadedHookNames} from 'react-devtools-shared/src/hookNamesCache';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookSourceLocation';
+import Toggle from '../Toggle';
+import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
+import type {ChangeDescription} from './types';
+
+// $FlowFixMe: Flow doesn't know about Intl.ListFormat
+const hookListFormatter = new Intl.ListFormat('en', {
+  style: 'long',
+  type: 'conjunction',
+});
+
+type HookProps = {
+  hook: HooksNode,
+  hookNames: Map<string, string> | null,
+};
+
+const Hook: component(...props: HookProps) = memo(
+  ({hook, hookNames}: HookProps) => {
+    const hookSource = hook.hookSource;
+    const hookName = useMemo(() => {
+      if (!hookSource || !hookNames) return null;
+      const key = getHookSourceLocationKey(hookSource);
+      return hookNames.get(key) || null;
+    }, [hookSource, hookNames]);
+
+    return (
+      <ul className={styles.Hook}>
+        <li>
+          {hook.id !== null && (
+            <span className={styles.PrimitiveHookNumber}>
+              {String(hook.id + 1)}
+            </span>
+          )}
+          <span
+            className={
+              hook.id !== null ? styles.PrimitiveHookName : styles.Name
+            }>
+            {hook.name}
+            {hookName && <span className={styles.HookName}>({hookName})</span>}
+          </span>
+          {hook.subHooks?.map((subHook, index) => (
+            <Hook key={hook.id} hook={subHook} hookNames={hookNames} />
+          ))}
+        </li>
+      </ul>
+    );
+  },
+);
+
+const shouldKeepHook = (
+  hook: HooksNode,
+  hooksArray: Array<number>,
+): boolean => {
+  if (hook.id !== null && hooksArray.includes(hook.id)) {
+    return true;
+  }
+  const subHooks = hook.subHooks;
+  if (subHooks == null) {
+    return false;
+  }
+
+  return subHooks.some(subHook => shouldKeepHook(subHook, hooksArray));
+};
+
+const filterHooks = (
+  hook: HooksNode,
+  hooksArray: Array<number>,
+): HooksNode | null => {
+  if (!shouldKeepHook(hook, hooksArray)) {
+    return null;
+  }
+
+  const subHooks = hook.subHooks;
+  if (subHooks == null) {
+    return hook;
+  }
+
+  const filteredSubHooks = subHooks
+    .map(subHook => filterHooks(subHook, hooksArray))
+    .filter(Boolean);
+  return filteredSubHooks.length > 0
+    ? {...hook, subHooks: filteredSubHooks}
+    : hook;
+};
+
+type Props = {|
+  fiberID: number,
+  hooks: ChangeDescription['hooks'],
+  state: ChangeDescription['state'],
+  displayMode?: 'detailed' | 'compact',
+|};
+
+const HookChangeSummary: component(...props: Props) = memo(
+  ({hooks, fiberID, state, displayMode = 'detailed'}: Props) => {
+    const {parseHookNames, toggleParseHookNames, inspectedElement} = useContext(
+      InspectedElementContext,
+    );
+    const store = useContext(StoreContext);
+
+    const [parseHookNamesOptimistic, setParseHookNamesOptimistic] =
+      useState<boolean>(parseHookNames);
+
+    useEffect(() => {
+      setParseHookNamesOptimistic(parseHookNames);
+    }, [inspectedElement?.id, parseHookNames]);
+
+    const handleOnChange = useCallback(() => {
+      setParseHookNamesOptimistic(!parseHookNames);
+      toggleParseHookNames();
+    }, [toggleParseHookNames, parseHookNames]);
+
+    const element = fiberID !== null ? store.getElementByID(fiberID) : null;
+    const hookNames =
+      element != null ? getAlreadyLoadedHookNames(element) : null;
+
+    const filteredHooks = useMemo(() => {
+      if (!hooks || !inspectedElement?.hooks) return null;
+      return inspectedElement.hooks
+        .map(hook => filterHooks(hook, hooks))
+        .filter(Boolean);
+    }, [inspectedElement?.hooks, hooks]);
+
+    const hookParsingFailed = parseHookNames && hookNames === null;
+
+    if (!hooks?.length) {
+      return <span>No hooks changed</span>;
+    }
+
+    if (
+      inspectedElement?.id !== element?.id ||
+      filteredHooks?.length !== hooks.length ||
+      displayMode === 'compact'
+    ) {
+      const hookIds = hooks.map(hookId => String(hookId + 1));
+      const hookWord = hookIds.length === 1 ? '• Hook' : '• Hooks';
+      return (
+        <span>
+          {hookWord} {hookListFormatter.format(hookIds)} changed
+        </span>
+      );
+    }
+
+    let toggleTitle: string;
+    if (hookParsingFailed) {
+      toggleTitle = 'Hook parsing failed';
+    } else if (parseHookNamesOptimistic) {
+      toggleTitle = 'Parsing hook names ...';
+    } else {
+      toggleTitle = 'Parse hook names (may be slow)';
+    }
+
+    if (filteredHooks == null) {
+      return null;
+    }
+
+    return (
+      <div>
+        {filteredHooks.length > 1 ? '• Hooks changed:' : '• Hook changed:'}
+        {(!parseHookNames || hookParsingFailed) && (
+          <Toggle
+            className={
+              hookParsingFailed
+                ? styles.ToggleError
+                : styles.LoadHookNamesToggle
+            }
+            isChecked={parseHookNamesOptimistic}
+            isDisabled={parseHookNamesOptimistic || hookParsingFailed}
+            onChange={handleOnChange}
+            title={toggleTitle}>
+            <ButtonIcon type="parse-hook-names" />
+          </Toggle>
+        )}
+        {filteredHooks.map(hook => (
+          <Hook
+            key={`${inspectedElement?.id ?? 'unknown'}-${hook.id}`}
+            hook={hook}
+            hookNames={hookNames}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+export default HookChangeSummary;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
new file mode 100644
index 00000000000..f16e99067ab
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -0,0 +1,43 @@
+.Toolbar {
+  padding: 0.25rem 0;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.BadgesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.BadgesContainer:not(:empty) {
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Content {
+  user-select: none;
+  overflow-y: auto;
+}
+
+.Component {
+  flex: 1;
+  font-weight: bold;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.CurrentCommit {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
new file mode 100644
index 00000000000..a6dfeffb3e2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext} from 'react';
+
+import InspectedElementBadges from '../Components/InspectedElementBadges';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration} from './utils';
+import WhatChanged from './WhatChanged';
+import {StoreContext} from '../context';
+
+import styles from './HoveredFiberInfo.css';
+
+import type {ChartNode} from './FlamegraphChartBuilder';
+
+export type TooltipFiberData = {
+  id: number,
+  name: string,
+};
+
+export type Props = {
+  fiberData: ChartNode,
+};
+
+export default function HoveredFiberInfo({fiberData}: Props): React.Node {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
+
+  const {id, name} = fiberData;
+  const {profilingCache} = profilerStore;
+
+  if (rootID === null || selectedCommitIndex === null) {
+    return null;
+  }
+
+  const commitIndices = profilingCache.getFiberCommits({
+    fiberID: id,
+    rootID,
+  });
+
+  const {nodes} = profilingCache.getCommitTree({
+    rootID,
+    commitIndex: selectedCommitIndex,
+  });
+  const node = nodes.get(id);
+
+  let renderDurationInfo = null;
+  let i = 0;
+  for (i = 0; i < commitIndices.length; i++) {
+    const commitIndex = commitIndices[i];
+    if (selectedCommitIndex === commitIndex) {
+      const {fiberActualDurations, fiberSelfDurations} =
+        profilerStore.getCommitData(((rootID: any): number), commitIndex);
+      const actualDuration = fiberActualDurations.get(id) || 0;
+      const selfDuration = fiberSelfDurations.get(id) || 0;
+
+      renderDurationInfo = (
+        <div key={commitIndex} className={styles.CurrentCommit}>
+          <strong>Duration:</strong> {formatDuration(selfDuration)}ms of{' '}
+          {formatDuration(actualDuration)}ms
+        </div>
+      );
+
+      break;
+    }
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>
+        <div className={styles.Component}>{name}</div>
+
+        {node != null && (
+          <div className={styles.BadgesContainer}>
+            <InspectedElementBadges
+              hocDisplayNames={node.hocDisplayNames}
+              compiledWithForget={node.compiledWithForget}
+            />
+
+            {node.compiledWithForget && (
+              <div>
+                ✨ This component has been auto-memoized by the React Compiler.
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className={styles.Content}>
+          {renderDurationInfo || <div>Did not client render.</div>}
+
+          <WhatChanged fiberID={id} displayMode="compact" />
+        </div>
+      </div>
+    </Fragment>
+  );
+}
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 00000000000..059e7c99380
--- /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 00000000000..764d520edb4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './NoCommitData.css';
+
+export default function NoCommitData(_: {}): React.Node {
+  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/NoProfilingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
new file mode 100644
index 00000000000..5e6c39b28ce
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import RecordToggle from './RecordToggle';
+
+import styles from './Profiler.css';
+
+export default function NoProfilingData(): React.Node {
+  return (
+    <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 className={`${styles.Row} ${styles.LearnMoreRow}`}>
+        Click{' '}
+        <a
+          className={styles.LearnMoreLink}
+          href="https://fb.me/react-devtools-profiling"
+          rel="noopener noreferrer"
+          target="_blank">
+          here
+        </a>{' '}
+        to learn more about profiling.
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
new file mode 100644
index 00000000000..e9a9927ce6c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './Profiler.css';
+
+export default function ProcessingData(): React.Node {
+  return (
+    <div className={styles.Column}>
+      <div className={styles.Header}>Processing data...</div>
+      <div className={styles.Row}>This should only take a minute.</div>
+    </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 00000000000..a317e3fcf42
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -0,0 +1,135 @@
+.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);
+}
+
+.Profiler, .Profiler * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
+.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;
+}
+
+.LearnMoreRow {
+  margin-top: 1rem;
+  color: var(--color-dim);
+  font-size: var(--font-size-sans-small);
+}
+
+.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);
+}
+
+.TimelineSearchInputContainer {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+}
+
+.LearnMoreLink {
+  color: var(--color-link);
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
\ No newline at end of file
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 00000000000..6254be06d83
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -0,0 +1,246 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext, useEffect, useRef, useEffectEvent} 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 RootSelector from './RootSelector';
+import {Timeline} from 'react-devtools-timeline/src/Timeline';
+import SidebarEventInfo from './SidebarEventInfo';
+import RecordToggle from './RecordToggle';
+import ReloadAndProfileButton from './ReloadAndProfileButton';
+import ProfilingImportExportButtons from './ProfilingImportExportButtons';
+import SnapshotSelector from './SnapshotSelector';
+import SidebarCommitInfo from './SidebarCommitInfo';
+import NoProfilingData from './NoProfilingData';
+import RecordingInProgress from './RecordingInProgress';
+import ProcessingData from './ProcessingData';
+import ProfilingNotSupported from './ProfilingNotSupported';
+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 {StoreContext} from '../context';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
+
+import styles from './Profiler.css';
+
+function Profiler(_: {}) {
+  const profilerRef = useRef<HTMLDivElement | null>(null);
+  const isMac =
+    typeof navigator !== 'undefined' &&
+    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+  const {
+    didRecordCommits,
+    isProcessingData,
+    isProfiling,
+    selectedCommitIndex,
+    selectedFiberID,
+    selectedTabID,
+    selectTab,
+    supportsProfiling,
+    startProfiling,
+    stopProfiling,
+    selectPrevCommitIndex,
+    selectNextCommitIndex,
+  } = useContext(ProfilerContext);
+
+  const {file: timelineTraceEventData, searchInputContainerRef} =
+    useContext(TimelineContext);
+
+  const {supportsTimeline} = useContext(StoreContext);
+
+  const isLegacyProfilerSelected = selectedTabID !== 'timeline';
+
+  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
+    const correctModifier = isMac ? event.metaKey : event.ctrlKey;
+    // Cmd+E to start/stop profiler recording
+    if (correctModifier && event.key === 'e') {
+      if (isProfiling) {
+        stopProfiling();
+      } else {
+        startProfiling();
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (
+      isLegacyProfilerSelected &&
+      didRecordCommits &&
+      selectedCommitIndex !== null
+    ) {
+      // Cmd+Left/Right (Mac) or Ctrl+Left/Right (Windows/Linux) to navigate commits
+      if (
+        correctModifier &&
+        (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
+      ) {
+        if (event.key === 'ArrowLeft') {
+          selectPrevCommitIndex();
+        } else {
+          selectNextCommitIndex();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+  });
+
+  useEffect(() => {
+    const div = profilerRef.current;
+    if (!div) {
+      return;
+    }
+    const ownerWindow = div.ownerDocument.defaultView;
+    ownerWindow.addEventListener('keydown', handleKeyDown);
+    return () => {
+      ownerWindow.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  let view = null;
+  if (didRecordCommits || selectedTabID === 'timeline') {
+    switch (selectedTabID) {
+      case 'flame-chart':
+        view = <CommitFlamegraph />;
+        break;
+      case 'ranked-chart':
+        view = <CommitRanked />;
+        break;
+      case 'timeline':
+        view = <Timeline />;
+        break;
+      default:
+        break;
+    }
+  } else if (isProfiling) {
+    view = <RecordingInProgress />;
+  } else if (isProcessingData) {
+    view = <ProcessingData />;
+  } else if (timelineTraceEventData) {
+    view = <OnlyTimelineData />;
+  } else if (supportsProfiling) {
+    view = <NoProfilingData />;
+  } else {
+    view = <ProfilingNotSupported />;
+  }
+
+  let sidebar = null;
+  if (!isProfiling && !isProcessingData && didRecordCommits) {
+    switch (selectedTabID) {
+      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;
+      case 'timeline':
+        sidebar = <SidebarEventInfo />;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return (
+    <SettingsModalContextController>
+      <div ref={profilerRef} className={styles.Profiler}>
+        <div className={styles.LeftColumn}>
+          <div className={styles.Toolbar}>
+            <RecordToggle disabled={!supportsProfiling} />
+            <ReloadAndProfileButton disabled={!supportsProfiling} />
+            <ClearProfilingDataButton />
+            <ProfilingImportExportButtons />
+            <div className={styles.VRule} />
+            <TabBar
+              currentTab={selectedTabID}
+              id="Profiler"
+              selectTab={selectTab}
+              tabs={supportsTimeline ? tabsWithTimeline : tabs}
+              type="profiler"
+            />
+            <RootSelector />
+            <div className={styles.Spacer} />
+            {!isLegacyProfilerSelected && (
+              <div
+                ref={searchInputContainerRef}
+                className={styles.TimelineSearchInputContainer}
+              />
+            )}
+            <SettingsModalContextToggle />
+            {isLegacyProfilerSelected && 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 OnlyTimelineData = () => (
+  <div className={styles.Column}>
+    <div className={styles.Header}>Timeline only</div>
+    <div className={styles.Row}>
+      The current profile contains only Timeline data.
+    </div>
+  </div>
+);
+
+const tabs = [
+  {
+    id: 'flame-chart',
+    icon: 'flame-chart',
+    label: 'Flamegraph',
+    title: 'Flamegraph chart',
+  },
+  {
+    id: 'ranked-chart',
+    icon: 'ranked-chart',
+    label: 'Ranked',
+    title: 'Ranked chart',
+  },
+];
+
+const tabsWithTimeline = [
+  ...tabs,
+  null, // Divider/separator
+  {
+    id: 'timeline',
+    icon: 'timeline',
+    label: 'Timeline',
+    title: 'Timeline',
+  },
+];
+
+export default (portaledContent(Profiler): component());
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 00000000000..d593558dbdd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -0,0 +1,353 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  useEffect,
+} from 'react';
+import {useLocalStorage, useSubscription} from '../hooks';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from '../Components/TreeContext';
+import {StoreContext} from '../context';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+import {useCommitFilteringAndNavigation} from './useCommitFilteringAndNavigation';
+
+import type {CommitDataFrontend, ProfilingDataFrontend} from './types';
+
+export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
+
+export type Context = {
+  // Which tab is selected 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,
+  selectNextCommitIndex(): void,
+  selectPrevCommitIndex(): void,
+
+  // Which commits are currently filtered by duration?
+  filteredCommitIndices: Array<number>,
+  selectedFilteredCommitIndex: number | null,
+
+  // 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,
+};
+
+const ProfilerContext: ReactContext<Context> = 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): React.Node {
+  const store = useContext(StoreContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const {profilerStore} = store;
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => ({
+        didRecordCommits: profilerStore.didRecordCommits,
+        isProcessingData: profilerStore.isProcessingData,
+        isProfiling: profilerStore.isProfilingBasedOnUserInput,
+        profilingData: profilerStore.profilingData,
+        supportsProfiling: store.rootSupportsBasicProfiling,
+      }),
+      subscribe: (callback: Function) => {
+        profilerStore.addListener('profilingData', callback);
+        profilerStore.addListener('isProcessingData', callback);
+        profilerStore.addListener('isProfiling', callback);
+        store.addListener('rootSupportsBasicProfiling', callback);
+        return () => {
+          profilerStore.removeListener('profilingData', callback);
+          profilerStore.removeListener('isProcessingData', callback);
+          profilerStore.removeListener('isProfiling', callback);
+          store.removeListener('rootSupportsBasicProfiling', callback);
+        };
+      },
+    }),
+    [profilerStore, store],
+  );
+  const {
+    didRecordCommits,
+    isProcessingData,
+    isProfiling,
+    profilingData,
+    supportsProfiling,
+  } = useSubscription<StoreProfilingState>(subscription);
+
+  const [prevProfilingData, setPrevProfilingData] =
+    useState<ProfilingDataFrontend | null>(null);
+  const [rootID, setRootID] = useState<number | null>(null);
+  const [selectedFiberID, selectFiberID] = useState<number | null>(null);
+  const [selectedFiberName, selectFiberName] = useState<string | null>(null);
+
+  const selectFiber = useCallback(
+    (id: number | null, name: string | null) => {
+      selectFiberID(id);
+      selectFiberName(name);
+
+      // Sync selection to the Components tab for convenience.
+      // Keep in mind that profiling data may be from a previous session.
+      // If data has been imported, we should skip the selection sync.
+      if (
+        id !== null &&
+        profilingData !== null &&
+        profilingData.imported === false
+      ) {
+        // We should still check to see if this element is still in the store.
+        // It may have been removed during profiling.
+        if (store.containsElement(id)) {
+          dispatch({
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: id,
+          });
+        }
+      }
+    },
+    [dispatch, selectFiberID, selectFiberName, store, profilingData],
+  );
+
+  const setRootIDAndClearFiber = useCallback(
+    (id: number | null) => {
+      selectFiber(null, null);
+      setRootID(id);
+    },
+    [setRootID, selectFiber],
+  );
+
+  // Sync rootID with profilingData changes.
+  if (prevProfilingData !== profilingData) {
+    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 (inspectedElementID !== null) {
+          selectedElementRootID = store.getRootIDForElement(inspectedElementID);
+        }
+        if (
+          selectedElementRootID !== null &&
+          dataForRoots.has(selectedElementRootID)
+        ) {
+          setRootIDAndClearFiber(selectedElementRootID);
+        } else {
+          setRootIDAndClearFiber(firstRootID);
+        }
+      }
+    }
+  }
+
+  const [selectedTabID, selectTab] = useLocalStorage<TabID>(
+    'React::DevTools::Profiler::defaultTab',
+    'flame-chart',
+    value => {
+      logEvent({
+        event_name: 'profiler-tab-changed',
+        metadata: {
+          tabId: value,
+        },
+      });
+    },
+  );
+
+  const stopProfiling = useCallback(
+    () => store.profilerStore.stopProfiling(),
+    [store],
+  );
+
+  // Get commit data for the current root
+  // NOTE: Unlike profilerStore.getDataForRoot() which uses Suspense (throws when data unavailable),
+  // this uses subscription pattern and returns [] when data isn't ready.
+  // Always check didRecordCommits before using commitData or filteredCommitIndices.
+  const commitData = useMemo(() => {
+    if (!didRecordCommits || rootID === null || profilingData === null) {
+      return ([]: Array<CommitDataFrontend>);
+    }
+    const dataForRoot = profilingData.dataForRoots.get(rootID);
+    return dataForRoot
+      ? dataForRoot.commitData
+      : ([]: Array<CommitDataFrontend>);
+  }, [didRecordCommits, rootID, profilingData]);
+
+  // Commit filtering and navigation
+  const {
+    isCommitFilterEnabled,
+    setIsCommitFilterEnabled,
+    minCommitDuration,
+    setMinCommitDuration,
+    selectedCommitIndex,
+    selectCommitIndex,
+    filteredCommitIndices,
+    selectedFilteredCommitIndex,
+    selectNextCommitIndex,
+    selectPrevCommitIndex,
+  } = useCommitFilteringAndNavigation(commitData);
+
+  const startProfiling = useCallback(() => {
+    logEvent({
+      event_name: 'profiling-start',
+      metadata: {current_tab: selectedTabID},
+    });
+
+    // Clear selections when starting a new profiling session
+    selectCommitIndex(null);
+    selectFiberID(null);
+    selectFiberName(null);
+
+    store.profilerStore.startProfiling();
+  }, [store, selectedTabID, selectCommitIndex]);
+
+  // Auto-select first commit when profiling data becomes available and no commit is selected.
+  useEffect(() => {
+    if (
+      profilingData !== null &&
+      selectedCommitIndex === null &&
+      rootID !== null
+    ) {
+      const dataForRoot = profilingData.dataForRoots.get(rootID);
+      if (dataForRoot && dataForRoot.commitData.length > 0) {
+        selectCommitIndex(0);
+      }
+    }
+  }, [profilingData, rootID, selectCommitIndex]);
+
+  const value = useMemo(
+    () => ({
+      selectedTabID,
+      selectTab,
+
+      didRecordCommits,
+      isProcessingData,
+      isProfiling,
+      profilingData,
+      startProfiling,
+      stopProfiling,
+      supportsProfiling,
+
+      rootID,
+      setRootID: setRootIDAndClearFiber,
+
+      isCommitFilterEnabled,
+      setIsCommitFilterEnabled,
+      minCommitDuration,
+      setMinCommitDuration,
+
+      selectedCommitIndex,
+      selectCommitIndex,
+      selectNextCommitIndex,
+      selectPrevCommitIndex,
+      filteredCommitIndices,
+      selectedFilteredCommitIndex,
+
+      selectedFiberID,
+      selectedFiberName,
+      selectFiber,
+    }),
+    [
+      selectedTabID,
+      selectTab,
+
+      didRecordCommits,
+      isProcessingData,
+      isProfiling,
+      profilingData,
+      startProfiling,
+      stopProfiling,
+      supportsProfiling,
+
+      rootID,
+      setRootIDAndClearFiber,
+
+      isCommitFilterEnabled,
+      setIsCommitFilterEnabled,
+      minCommitDuration,
+      setMinCommitDuration,
+
+      selectedCommitIndex,
+      selectCommitIndex,
+      selectNextCommitIndex,
+      selectPrevCommitIndex,
+      filteredCommitIndices,
+      selectedFilteredCommitIndex,
+
+      selectedFiberID,
+      selectedFiberName,
+      selectFiber,
+    ],
+  );
+
+  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 00000000000..8d24f565052
--- /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 00000000000..6bb3e229fbd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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 {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
+import isArray from 'shared/isArray';
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+import styles from './ProfilingImportExportButtons.css';
+
+import type {ProfilingDataExport} from './types';
+
+export default function ProfilingImportExportButtons(): React.Node {
+  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
+  const {setFile} = useContext(TimelineContext);
+  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 doesHaveInMemoryData = profilerStore.didRecordCommits;
+
+  const downloadData = useCallback(() => {
+    if (rootID === null) {
+      return;
+    }
+
+    const anchorElement = downloadRef.current;
+
+    if (profilingData !== null && anchorElement !== 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(
+        anchorElement,
+        `profiling-data.${dateString}.${timeString}.json`,
+        JSON.stringify(profilingDataExport, null, 2),
+      );
+    }
+  }, [rootID, profilingData]);
+
+  const clickInputElement = useCallback(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.click();
+    }
+  }, []);
+
+  // TODO (profiling) We should probably use a transition for this and suspend while loading the file.
+  // Local files load so fast it's probably not very noticeable though.
+  const handleChange = () => {
+    const input = inputRef.current;
+    if (input !== null && input.files.length > 0) {
+      const file = input.files[0];
+
+      // TODO (profiling) Handle fileReader errors.
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => {
+        const raw = ((fileReader.result: any): string);
+        const json = JSON.parse(raw);
+
+        if (!isArray(json) && hasOwnProperty.call(json, 'version')) {
+          // This looks like React profiling data.
+          // But first, clear any User Timing marks; we should only have one type open at a time.
+          setFile(null);
+
+          try {
+            const profilingDataExport = ((json: any): ProfilingDataExport);
+            profilerStore.profilingData =
+              prepareProfilingDataFrontendFromExport(profilingDataExport);
+          } catch (error) {
+            modalDialogDispatch({
+              id: 'ProfilingImportExportButtons',
+              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>
+              ),
+            });
+          }
+        } else {
+          // Otherwise let's assume this is Trace Event data and pass it to the Timeline preprocessor.
+          // But first, clear React profiling data; we should only have one type open at a time.
+          profilerStore.clear();
+
+          // TODO (timeline) We shouldn't need to re-open the File but we'll need to refactor to avoid this.
+          setFile(file);
+        }
+      });
+      fileReader.readAsText(file);
+    }
+  };
+
+  return (
+    <Fragment>
+      <div className={styles.VRule} />
+      <input
+        ref={inputRef}
+        className={styles.Input}
+        type="file"
+        accept=".json"
+        onChange={handleChange}
+        tabIndex={-1}
+      />
+      <a ref={downloadRef} className={styles.Input} />
+      <Button
+        disabled={isProfiling}
+        onClick={clickInputElement}
+        title="Load profile...">
+        <ButtonIcon type="import" />
+      </Button>
+      <Button
+        disabled={isProfiling || !doesHaveInMemoryData}
+        onClick={downloadData}
+        title="Save profile...">
+        <ButtonIcon type="export" />
+      </Button>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
new file mode 100644
index 00000000000..8799a29d02f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './Profiler.css';
+
+export default function ProfilingNotSupported(): React.Node {
+  return (
+    <div className={styles.Column}>
+      <div className={styles.Header}>Profiling not supported.</div>
+      <p className={styles.Paragraph}>
+        Profiling support requires either a development or profiling build of
+        React v16.5+.
+      </p>
+      <p className={styles.Paragraph}>
+        Learn more at{' '}
+        <a
+          className={styles.Link}
+          href="https://fb.me/react-devtools-profiling"
+          rel="noopener noreferrer"
+          target="_blank">
+          reactjs.org/link/profiling
+        </a>
+        .
+      </p>
+    </div>
+  );
+}
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 00000000000..8cec8c6b924
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/frontend/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, compiledWithForget} = 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}"` : '';
+    const maybeForgetBadge = compiledWithForget ? '✨ ' : '';
+
+    let maybeBadge = '';
+    if (type === ElementTypeForwardRef) {
+      maybeBadge = ' (ForwardRef)';
+    } else if (type === ElementTypeMemo) {
+      maybeBadge = ' (Memo)';
+    }
+
+    const label = `${maybeForgetBadge}${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 00000000000..467bca27e3d
--- /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 00000000000..6aa48a3cefa
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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): React.Node {
+  const {isProfiling, startProfiling, stopProfiling} =
+    useContext(ProfilerContext);
+
+  let className = styles.InactiveRecordToggle;
+  if (disabled) {
+    className = styles.DisabledRecordToggle;
+  } else if (isProfiling) {
+    className = styles.ActiveRecordToggle;
+  }
+
+  const isMac =
+    typeof navigator !== 'undefined' &&
+    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  const shortcut = isMac ? '⌘E' : 'Ctrl+E';
+  const title = `${isProfiling ? 'Stop' : 'Start'} profiling - ${shortcut}`;
+
+  return (
+    <Button
+      className={className}
+      disabled={disabled}
+      onClick={isProfiling ? stopProfiling : startProfiling}
+      testName="ProfilerToggleButton"
+      title={title}>
+      <ButtonIcon type="record" />
+    </Button>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
new file mode 100644
index 00000000000..16883cacfbf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import RecordToggle from './RecordToggle';
+
+import styles from './Profiler.css';
+
+export default function RecordingInProgress(): React.Node {
+  return (
+    <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>
+  );
+}
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 00000000000..95ac82a9732
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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({
+  disabled,
+}: {
+  disabled: boolean,
+}): React.Node {
+  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,
+      recordTimeline: store.supportsTimeline,
+    });
+  }, [bridge, recordChangeDescriptions, store]);
+
+  if (!supportsReloadAndProfile) {
+    return null;
+  }
+
+  return (
+    <Button
+      disabled={disabled}
+      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 00000000000..ff1a970d46c
--- /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 00000000000..00e8952fedf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useCallback, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+
+import styles from './RootSelector.css';
+
+export default function RootSelector(_: {}): React.Node {
+  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}: $FlowFixMe) => {
+      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 00000000000..1fe2d298e9a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -0,0 +1,59 @@
+.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;
+}
+
+.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);
+}
+
+.DurationsList {
+  list-style: none;
+  margin: 0.25rem 0 0 0;
+  padding: 0;
+  background: var(--color-background-inactive);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.DurationsListItem {
+  margin: 0.25rem 0 0 0;
+}
+.DurationsListItem:first-of-type {
+  margin: 0;
+}
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 00000000000..413265f22fc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import Updaters from './Updaters';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
+import {getCommitTree} from './CommitTreeBuilder';
+
+import styles from './SidebarCommitInfo.css';
+
+export type Props = {};
+
+export default function SidebarCommitInfo(_: Props): React.Node {
+  const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
+
+  const {profilerStore} = useContext(StoreContext);
+
+  if (rootID === null || selectedCommitIndex === null) {
+    return <div className={styles.NothingSelected}>Nothing selected</div>;
+  }
+
+  const {
+    duration,
+    effectDuration,
+    passiveEffectDuration,
+    priorityLevel,
+    timestamp,
+    updaters,
+  } = profilerStore.getCommitData(rootID, selectedCommitIndex);
+
+  const hasCommitPhaseDurations =
+    effectDuration !== null || passiveEffectDuration !== null;
+
+  const commitTree =
+    updaters !== null
+      ? getCommitTree({
+          commitIndex: selectedCommitIndex,
+          profilerStore,
+          rootID,
+        })
+      : null;
+
+  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>
+
+          {!hasCommitPhaseDurations && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>Render duration</label>:{' '}
+              <span className={styles.Value}>{formatDuration(duration)}ms</span>
+            </li>
+          )}
+
+          {hasCommitPhaseDurations && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>Durations</label>
+              <ul className={styles.DurationsList}>
+                <li className={styles.DurationsListItem}>
+                  <label className={styles.Label}>Render</label>:{' '}
+                  <span className={styles.Value}>
+                    {formatDuration(duration)}ms
+                  </span>
+                </li>
+                {effectDuration !== null && (
+                  <li className={styles.DurationsListItem}>
+                    <label className={styles.Label}>Layout effects</label>:{' '}
+                    <span className={styles.Value}>
+                      {formatDuration(effectDuration)}ms
+                    </span>
+                  </li>
+                )}
+                {passiveEffectDuration !== null && (
+                  <li className={styles.DurationsListItem}>
+                    <label className={styles.Label}>Passive effects</label>:{' '}
+                    <span className={styles.Value}>
+                      {formatDuration(passiveEffectDuration)}ms
+                    </span>
+                  </li>
+                )}
+              </ul>
+            </li>
+          )}
+
+          {updaters !== null && commitTree !== null && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>What caused this update</label>?
+              <Updaters commitTree={commitTree} updaters={updaters} />
+            </li>
+          )}
+        </ul>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
new file mode 100644
index 00000000000..98b0dad5325
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
@@ -0,0 +1,66 @@
+.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 {
+  flex: 1 1;
+  margin: 0 0 0.5rem;
+}
+
+.Label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: bold;
+  flex: 1 1;
+}
+
+.Value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Row {  
+  display: flex;  
+  flex-direction: row;  
+  align-items: center;
+  border-top: 1px solid var(--color-border);
+} 
+
+.UnclickableSource,
+.ClickableSource {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
+}
+
+.UnclickableSource {
+  color: var(--color-dim);
+}
+
+.ClickableSource {
+  color: var(--color-text);
+}
+
+.ClickableSource:focus,
+.ClickableSource:hover {
+  background-color: var(--color-background-hover);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
new file mode 100644
index 00000000000..8b55e0f8c0c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SchedulingEvent} from 'react-devtools-timeline/src/types';
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+
+import * as React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import {useContext} from 'react';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
+import {
+  formatTimestamp,
+  getSchedulingEventLabel,
+} from 'react-devtools-timeline/src/utils/formatting';
+import {stackToComponentLocations} from 'react-devtools-shared/src/devtools/utils';
+import {copy} from 'clipboard-js';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+import useOpenResource from '../useOpenResource';
+
+import styles from './SidebarEventInfo.css';
+
+export type Props = {};
+
+type FunctionLocationProps = {
+  location: ReactFunctionLocation,
+  displayName: string,
+};
+function FunctionLocation({location, displayName}: FunctionLocationProps) {
+  // TODO: We should support symbolication here as well, but
+  // symbolicating the whole stack can be expensive
+  const [canViewSource, viewSource] = useOpenResource(location, null);
+  return (
+    <li>
+      <Button
+        className={
+          canViewSource ? styles.ClickableSource : styles.UnclickableSource
+        }
+        disabled={!canViewSource}
+        onClick={viewSource}>
+        {displayName}
+      </Button>
+    </li>
+  );
+}
+
+type SchedulingEventProps = {
+  eventInfo: SchedulingEvent,
+};
+
+function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
+  const {componentName, timestamp} = eventInfo;
+  const componentStack = eventInfo.componentStack || null;
+
+  return (
+    <>
+      <div className={styles.Toolbar}>
+        {componentName} {getSchedulingEventLabel(eventInfo)}
+      </div>
+      <div className={styles.Content} tabIndex={0}>
+        <ul className={styles.List}>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Timestamp</label>:{' '}
+            <span className={styles.Value}>{formatTimestamp(timestamp)}</span>
+          </li>
+          {componentStack && (
+            <li className={styles.ListItem}>
+              <div className={styles.Row}>
+                <label className={styles.Label}>Rendered by</label>
+                <Button
+                  onClick={withPermissionsCheck(
+                    {permissions: ['clipboardWrite']},
+                    () => copy(componentStack),
+                  )}
+                  title="Copy component stack to clipboard">
+                  <ButtonIcon type="copy" />
+                </Button>
+              </div>
+              <ul className={styles.List}>
+                {stackToComponentLocations(componentStack).map(
+                  ([displayName, location], index) => {
+                    if (location == null) {
+                      return (
+                        <li key={index}>
+                          <Button
+                            className={styles.UnclickableSource}
+                            disabled={true}>
+                            {displayName}
+                          </Button>
+                        </li>
+                      );
+                    }
+
+                    return (
+                      <FunctionLocation
+                        key={index}
+                        displayName={displayName}
+                        location={location}
+                      />
+                    );
+                  },
+                )}
+              </ul>
+            </li>
+          )}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+export default function SidebarEventInfo(_: Props): React.Node {
+  const {selectedEvent} = useContext(TimelineContext);
+  // (TODO) Refactor in next PR so this supports multiple types of events
+  if (selectedEvent && selectedEvent.schedulingEvent) {
+    return <SchedulingEventInfo eventInfo={selectedEvent.schedulingEvent} />;
+  }
+
+  return null;
+}
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 00000000000..2992247eb8f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -0,0 +1,58 @@
+.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;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.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;
+}
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 00000000000..d785cfebdac
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext, useEffect, useRef} from 'react';
+
+import WhatChanged from './WhatChanged';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import InspectedElementBadges from '../Components/InspectedElementBadges';
+
+import styles from './SidebarSelectedFiberInfo.css';
+
+export default function SidebarSelectedFiberInfo(): React.Node {
+  const {profilerStore} = useContext(StoreContext);
+  const {
+    rootID,
+    selectCommitIndex,
+    selectedCommitIndex,
+    selectedFiberID,
+    selectedFiberName,
+    selectFiber,
+  } = useContext(ProfilerContext);
+  const {profilingCache} = profilerStore;
+  const selectedListItemRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const selectedElement = selectedListItemRef.current;
+    if (
+      selectedElement !== null &&
+      // $FlowFixMe[method-unbinding]
+      typeof selectedElement.scrollIntoView === 'function'
+    ) {
+      selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});
+    }
+  }, [selectedCommitIndex]);
+
+  if (
+    selectedFiberID === null ||
+    rootID === null ||
+    selectedCommitIndex === null
+  ) {
+    return null;
+  }
+
+  const commitIndices = profilingCache.getFiberCommits({
+    fiberID: selectedFiberID,
+    rootID: rootID,
+  });
+
+  const {nodes} = profilingCache.getCommitTree({
+    rootID,
+    commitIndex: selectedCommitIndex,
+  });
+  const node = nodes.get(selectedFiberID);
+
+  // $FlowFixMe[missing-local-annot]
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowUp':
+        if (selectedCommitIndex !== null) {
+          const prevIndex = commitIndices.indexOf(selectedCommitIndex);
+          const nextIndex =
+            prevIndex > 0 ? prevIndex - 1 : commitIndices.length - 1;
+          selectCommitIndex(commitIndices[nextIndex]);
+        }
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        if (selectedCommitIndex !== null) {
+          const prevIndex = commitIndices.indexOf(selectedCommitIndex);
+          const nextIndex =
+            prevIndex < commitIndices.length - 1 ? prevIndex + 1 : 0;
+          selectCommitIndex(commitIndices[nextIndex]);
+        }
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  };
+
+  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}
+        ref={selectedCommitIndex === commitIndex ? selectedListItemRef : null}
+        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
+          onClick={() => selectFiber(null, null)}
+          title="Back to commit view">
+          <ButtonIcon type="close" />
+        </Button>
+      </div>
+      <div className={styles.Content} onKeyDown={handleKeyDown} tabIndex={0}>
+        {node != null && (
+          <InspectedElementBadges
+            hocDisplayNames={node.hocDisplayNames}
+            compiledWithForget={node.compiledWithForget}
+          />
+        )}
+        <WhatChanged fiberID={((selectedFiberID: any): number)} />
+        {listItems.length > 0 && (
+          <div>
+            <label className={styles.Label}>Rendered at: </label>
+            {listItems}
+          </div>
+        )}
+        {listItems.length === 0 && (
+          <div>Did not render on the client during this profiling session.</div>
+        )}
+      </div>
+    </Fragment>
+  );
+}
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 00000000000..ddcb7d9e08c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css
@@ -0,0 +1,62 @@
+.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;
+}
+
+.Tooltip {
+  margin-top: 2.5rem;
+}
+
+.TooltipList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.TooltipListItem {
+  display: flex;
+}
+
+.TooltipLabel {
+  font-weight: bold;
+  margin-right: 0.25rem;
+}
+.TooltipLabel:after {
+  content: ':';
+}
+
+.TooltipValue {
+  flex-grow: 1;
+  text-align: end;
+}
+
+.DurationsWrapper {
+  flex-grow: 1;
+}
+
+.DurationsList {
+  list-style: none;
+  margin: 0 0 0 1rem;
+  padding: 0;
+}
+
+.DurationsListItem {
+  display: flex;
+}
+
+.DurationsLabel {
+  margin-right: 0.25rem;
+}
+.DurationsLabel:after {
+  content: ':';
+}
+
+.DurationsValue {
+  flex-grow: 1;
+  text-align: end;
+}
\ No newline at end of file
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 00000000000..7b1cbcbdd26
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -0,0 +1,302 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {CommitDataFrontend} from './types';
+
+import * as React from 'react';
+import {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 {formatDuration, formatTime} from './utils';
+import Tooltip from './Tooltip';
+
+import styles from './SnapshotCommitList.css';
+
+export type ItemData = {
+  commitTimes: Array<number>,
+  filteredCommitIndices: Array<number>,
+  maxDuration: number,
+  selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
+  selectCommitIndex: (index: number) => void,
+  setHoveredCommitIndex: (index: number) => void,
+  startCommitDrag: (newDragState: DragState) => void,
+  totalDurations: Array<number>,
+};
+
+type Props = {
+  commitData: $ReadOnlyArray<CommitDataFrontend>,
+  commitTimes: Array<number>,
+  filteredCommitIndices: Array<number>,
+  selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
+  selectCommitIndex: (index: number) => void,
+  totalDurations: Array<number>,
+};
+
+export default function SnapshotCommitList({
+  commitData,
+  commitTimes,
+  filteredCommitIndices,
+  selectedCommitIndex,
+  selectedFilteredCommitIndex,
+  selectCommitIndex,
+  totalDurations,
+}: Props): React.Node {
+  return (
+    <AutoSizer>
+      {({height, width}) => (
+        <List
+          commitData={commitData}
+          commitTimes={commitTimes}
+          height={height}
+          filteredCommitIndices={filteredCommitIndices}
+          selectedCommitIndex={selectedCommitIndex}
+          selectedFilteredCommitIndex={selectedFilteredCommitIndex}
+          selectCommitIndex={selectCommitIndex}
+          totalDurations={totalDurations}
+          width={width}
+        />
+      )}
+    </AutoSizer>
+  );
+}
+
+type ListProps = {
+  commitData: $ReadOnlyArray<CommitDataFrontend>,
+  commitTimes: Array<number>,
+  height: number,
+  filteredCommitIndices: Array<number>,
+  selectedCommitIndex: number | null,
+  selectedFilteredCommitIndex: number | null,
+  selectCommitIndex: (index: number) => void,
+  totalDurations: Array<number>,
+  width: number,
+};
+
+type DragState = {
+  commitIndex: number,
+  left: number,
+  sizeIncrement: number,
+};
+
+function List({
+  commitData,
+  selectedCommitIndex,
+  commitTimes,
+  height,
+  filteredCommitIndices,
+  selectedFilteredCommitIndex,
+  selectCommitIndex,
+  totalDurations,
+  width,
+}: ListProps) {
+  // $FlowFixMe[incompatible-use]
+  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]);
+
+  const itemSize = useMemo(
+    () => Math.max(minBarWidth, width / filteredCommitIndices.length),
+    [filteredCommitIndices, width],
+  );
+  const maxDuration = useMemo(
+    () => totalDurations.reduce((max, duration) => Math.max(max, duration), 0),
+    [totalDurations],
+  );
+
+  const maxCommitIndex = filteredCommitIndices.length - 1;
+
+  const [dragState, setDragState] = useState<DragState | null>(null);
+
+  const handleDragCommit = ({buttons, pageX}: any) => {
+    if (buttons === 0) {
+      setDragState(null);
+      return;
+    }
+
+    if (dragState !== null) {
+      const {commitIndex, left, sizeIncrement} = dragState;
+
+      let newCommitIndex = commitIndex;
+      let newCommitLeft = left;
+
+      if (pageX < newCommitLeft) {
+        while (pageX < newCommitLeft) {
+          newCommitLeft -= sizeIncrement;
+          newCommitIndex -= 1;
+        }
+      } else {
+        let newCommitRectRight = newCommitLeft + sizeIncrement;
+        while (pageX > newCommitRectRight) {
+          newCommitRectRight += sizeIncrement;
+          newCommitIndex += 1;
+        }
+      }
+
+      if (newCommitIndex < 0) {
+        newCommitIndex = 0;
+      } else if (newCommitIndex > maxCommitIndex) {
+        newCommitIndex = maxCommitIndex;
+      }
+
+      selectCommitIndex(newCommitIndex);
+    }
+  };
+
+  useEffect(() => {
+    if (dragState === null) {
+      return;
+    }
+
+    const element = divRef.current;
+    if (element !== null) {
+      const ownerDocument = element.ownerDocument;
+      ownerDocument.addEventListener('mousemove', handleDragCommit);
+      return () => {
+        ownerDocument.removeEventListener('mousemove', handleDragCommit);
+      };
+    }
+  }, [dragState]);
+
+  const [hoveredCommitIndex, setHoveredCommitIndex] = useState<number | null>(
+    null,
+  );
+
+  // Pass required contextual data down to the ListItem renderer.
+  const itemData = useMemo<ItemData>(
+    () => ({
+      commitTimes,
+      filteredCommitIndices,
+      maxDuration,
+      selectedCommitIndex,
+      selectedFilteredCommitIndex,
+      selectCommitIndex,
+      setHoveredCommitIndex,
+      startCommitDrag: setDragState,
+      totalDurations,
+    }),
+    [
+      commitTimes,
+      filteredCommitIndices,
+      maxDuration,
+      selectedCommitIndex,
+      selectedFilteredCommitIndex,
+      selectCommitIndex,
+      setHoveredCommitIndex,
+      totalDurations,
+    ],
+  );
+
+  let tooltipLabel = null;
+  if (hoveredCommitIndex !== null) {
+    const {
+      duration,
+      effectDuration,
+      passiveEffectDuration,
+      priorityLevel,
+      timestamp,
+    } = commitData[hoveredCommitIndex];
+
+    // Only some React versions include commit durations.
+    // Show a richer tooltip only for builds that have that info.
+    if (
+      effectDuration !== null ||
+      passiveEffectDuration !== null ||
+      priorityLevel !== null
+    ) {
+      tooltipLabel = (
+        <ul className={styles.TooltipList}>
+          {priorityLevel !== null && (
+            <li className={styles.TooltipListItem}>
+              <label className={styles.TooltipLabel}>Priority</label>
+              <span className={styles.TooltipValue}>{priorityLevel}</span>
+            </li>
+          )}
+          <li className={styles.TooltipListItem}>
+            <label className={styles.TooltipLabel}>Committed at</label>
+            <span className={styles.TooltipValue}>
+              {formatTime(timestamp)}s
+            </span>
+          </li>
+          <li className={styles.TooltipListItem}>
+            <div className={styles.DurationsWrapper}>
+              <label className={styles.TooltipLabel}>Durations</label>
+              <ul className={styles.DurationsList}>
+                <li className={styles.DurationsListItem}>
+                  <label className={styles.DurationsLabel}>Render</label>
+                  <span className={styles.DurationsValue}>
+                    {formatDuration(duration)}ms
+                  </span>
+                </li>
+                {effectDuration !== null && (
+                  <li className={styles.DurationsListItem}>
+                    <label className={styles.DurationsLabel}>
+                      Layout effects
+                    </label>
+                    <span className={styles.DurationsValue}>
+                      {formatDuration(effectDuration)}ms
+                    </span>
+                  </li>
+                )}
+                {passiveEffectDuration !== null && (
+                  <li className={styles.DurationsListItem}>
+                    <label className={styles.DurationsLabel}>
+                      Passive effects
+                    </label>
+                    <span className={styles.DurationsValue}>
+                      {formatDuration(passiveEffectDuration)}ms
+                    </span>
+                  </li>
+                )}
+              </ul>
+            </div>
+          </li>
+        </ul>
+      );
+    } else {
+      tooltipLabel = `${formatDuration(duration)}ms at ${formatTime(
+        timestamp,
+      )}s`;
+    }
+  }
+
+  return (
+    <Tooltip className={styles.Tooltip} label={tooltipLabel}>
+      <div
+        ref={divRef}
+        style={{height, width}}
+        onMouseLeave={() => setHoveredCommitIndex(null)}>
+        <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>
+    </Tooltip>
+  );
+}
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 00000000000..3bf73adaebe
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
@@ -0,0 +1,24 @@
+.Outer {
+  user-select: none;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  padding-top: 4px;
+  padding-bottom: 1px;
+  display: flex;
+  align-items: flex-end;
+}
+.Outer:hover {
+  background-color: var(--color-background);
+}
+
+.Inner,
+.InnerSelected {
+  width: 100%;
+  min-height: 2px;
+  background-color: var(--color-commit-did-not-render-fill);
+  color: var(--color-commit-did-not-render-fill-text);
+}
+
+.InnerSelected {
+  background-color: var(--color-button-active);
+}
\ No newline at end of file
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 00000000000..d9f80f00531
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {memo} from 'react';
+import {areEqual} from 'react-window';
+import {getGradientColor} 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 {
+    filteredCommitIndices,
+    maxDuration,
+    selectedCommitIndex,
+    selectCommitIndex,
+    setHoveredCommitIndex,
+    startCommitDrag,
+    totalDurations,
+  } = itemData;
+
+  index = filteredCommitIndices[index];
+
+  const totalDuration = totalDurations[index];
+
+  // Use natural cbrt for bar height.
+  // This prevents one (or a few) outliers from squishing the majority of other commits.
+  // So rather than e.g. _█_ we get something more like e.g. ▄█_
+  const heightScale =
+    Math.min(
+      1,
+      Math.max(0, Math.cbrt(totalDuration) / Math.cbrt(maxDuration)),
+    ) || 0;
+
+  // Use a linear scale for color.
+  // This gives some visual contrast between cheaper and more expensive commits
+  // and somewhat compensates for the cbrt scale height.
+  const colorScale = Math.min(1, Math.max(0, totalDuration / maxDuration)) || 0;
+
+  const isSelected = selectedCommitIndex === index;
+
+  // Leave a 1px gap between snapshots
+  const width = parseFloat(style.width) - 1;
+
+  const handleMouseDown = ({buttons, target}: any) => {
+    if (buttons === 1) {
+      selectCommitIndex(index);
+      startCommitDrag({
+        commitIndex: index,
+        left: target.getBoundingClientRect().left,
+        sizeIncrement: parseFloat(style.width),
+      });
+    }
+  };
+
+  let backgroundColor;
+  if (!isSelected && totalDuration > 0) {
+    backgroundColor = getGradientColor(colorScale);
+  }
+
+  return (
+    <div
+      className={styles.Outer}
+      onMouseDown={handleMouseDown}
+      onMouseEnter={() => setHoveredCommitIndex(index)}
+      style={{
+        ...style,
+        width,
+        borderBottom: isSelected
+          ? '3px solid var(--color-tab-selected-border)'
+          : undefined,
+      }}>
+      <div
+        className={isSelected ? styles.InnerSelected : styles.Inner}
+        style={{
+          height: `${Math.round(heightScale * 100)}%`,
+          backgroundColor,
+        }}
+      />
+    </div>
+  );
+}
+
+export default (memo(SnapshotCommitListItem, areEqual): component(
+  ...props: Props
+));
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 00000000000..040d2e4d289
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
@@ -0,0 +1,46 @@
+.Button {
+  flex: 0 0 auto;
+  margin-left: 0.25rem;
+}
+
+.Commits {
+  height: 100%;
+  min-width: 30px;
+  margin-left: 0.25rem;
+  overflow: visible;
+}
+.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);
+}
+
+.Input {
+  background: none;
+  font-size: var(--font-size-sans-normal);
+  text-align: right;
+  font-family: var(--font-family-monospace);
+  border: 1px solid transparent;
+  border-radius: 0.125rem;
+  padding: 0.125rem;
+  color: var(--color-attribute-editable-value);
+}
+
+.Input:focus {
+  background-color: var(--color-button-background-focus);
+  outline: none;
+}
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 00000000000..0d470ddb000
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext} 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): React.Node {
+  const {
+    rootID,
+    selectedCommitIndex,
+    selectCommitIndex,
+    selectPrevCommitIndex,
+    selectNextCommitIndex,
+    filteredCommitIndices,
+    selectedFilteredCommitIndex,
+  } = useContext(ProfilerContext);
+
+  const {profilerStore} = useContext(StoreContext);
+  const {commitData} = profilerStore.getDataForRoot(((rootID: any): number));
+
+  const totalDurations: Array<number> = [];
+  const commitTimes: Array<number> = [];
+  commitData.forEach(commitDatum => {
+    totalDurations.push(
+      commitDatum.duration +
+        (commitDatum.effectDuration || 0) +
+        (commitDatum.passiveEffectDuration || 0),
+    );
+    commitTimes.push(commitDatum.timestamp);
+  });
+
+  const numFilteredCommits = filteredCommitIndices.length;
+
+  let label = null;
+  if (numFilteredCommits > 0) {
+    // $FlowFixMe[missing-local-annot]
+    const handleCommitInputChange = event => {
+      const value = parseInt(event.currentTarget.value, 10);
+      if (!isNaN(value)) {
+        const filteredIndex = Math.min(
+          Math.max(value - 1, 0),
+
+          // Snashots are shown to the user as 1-based
+          // but the indices within the profiler data array ar 0-based.
+          numFilteredCommits - 1,
+        );
+        selectCommitIndex(filteredCommitIndices[filteredIndex]);
+      }
+    };
+
+    // $FlowFixMe[missing-local-annot]
+    const handleClick = event => {
+      event.currentTarget.select();
+    };
+
+    // $FlowFixMe[missing-local-annot]
+    const handleKeyDown = event => {
+      switch (event.key) {
+        case 'ArrowDown':
+          selectPrevCommitIndex();
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          selectNextCommitIndex();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    };
+
+    const input = (
+      <input
+        className={styles.Input}
+        data-testname="SnapshotSelector-Input"
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        value={
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+          selectedFilteredCommitIndex + 1
+        }
+        size={`${numFilteredCommits}`.length}
+        onChange={handleCommitInputChange}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+    );
+
+    label = (
+      <Fragment>
+        {input} / {numFilteredCommits}
+      </Fragment>
+    );
+  }
+
+  // $FlowFixMe[missing-local-annot]
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        selectPrevCommitIndex();
+        event.stopPropagation();
+        break;
+      case 'ArrowRight':
+        selectNextCommitIndex();
+        event.stopPropagation();
+        break;
+      default:
+        break;
+    }
+  };
+
+  if (commitData.length === 0) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <span
+        className={styles.IndexLabel}
+        data-testname="SnapshotSelector-Label">
+        {label}
+      </span>
+      <Button
+        className={styles.Button}
+        data-testname="SnapshotSelector-PreviousButton"
+        disabled={numFilteredCommits === 0}
+        onClick={selectPrevCommitIndex}
+        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
+            commitData={commitData}
+            commitTimes={commitTimes}
+            filteredCommitIndices={filteredCommitIndices}
+            selectedCommitIndex={selectedCommitIndex}
+            selectedFilteredCommitIndex={selectedFilteredCommitIndex}
+            selectCommitIndex={selectCommitIndex}
+            totalDurations={totalDurations}
+          />
+        )}
+        {numFilteredCommits === 0 && (
+          <div className={styles.NoCommits}>No commits</div>
+        )}
+      </div>
+      <Button
+        className={styles.Button}
+        data-testname="SnapshotSelector-NextButton"
+        disabled={numFilteredCommits === 0}
+        onClick={selectNextCommitIndex}
+        title="Select next commit →">
+        <ButtonIcon type="next" />
+      </Button>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
new file mode 100644
index 00000000000..cbefd4e8598
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
@@ -0,0 +1,25 @@
+.Tooltip {
+  position: absolute;
+  pointer-events: none;
+  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);
+  opacity: 1;
+  white-space: nowrap;
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+}
+
+.Tooltip.hidden {
+  opacity: 0;
+}
+
+
+.Container {
+  width: -moz-max-content;
+  width: -webkit-max-content;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
new file mode 100644
index 00000000000..124be4286d1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
@@ -0,0 +1,126 @@
+/** @flow */
+
+import * as React from 'react';
+import {useRef} from 'react';
+
+import styles from './Tooltip.css';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
+
+export default function Tooltip({
+  children,
+  className,
+  label,
+  style,
+}: any): React.Node {
+  const containerRef = useRef(null);
+  const tooltipRef = useRef(null);
+
+  // update the position of the tooltip based on current mouse position
+  const updateTooltipPosition = (event: SyntheticMouseEvent) => {
+    const element = tooltipRef.current;
+    if (element != null) {
+      // first find the mouse position
+      const mousePosition = getMousePosition(containerRef.current, event);
+      // use the mouse position to find the position of tooltip
+      const {left, top} = getTooltipPosition(element, mousePosition);
+      // update tooltip position
+      element.style.left = left;
+      element.style.top = top;
+    }
+  };
+
+  const onMouseMove = (event: SyntheticMouseEvent) => {
+    updateTooltipPosition(event);
+  };
+
+  const tooltipClassName = label === null ? styles.hidden : '';
+
+  return (
+    <div
+      className={styles.Container}
+      onMouseMove={onMouseMove}
+      ref={containerRef}>
+      <div
+        className={`${styles.Tooltip} ${tooltipClassName} ${className || ''}`}
+        ref={tooltipRef}
+        style={style}>
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+const TOOLTIP_OFFSET = 5;
+
+// Method used to find the position of the tooltip based on current mouse position
+function getTooltipPosition(
+  element: empty,
+  mousePosition: {
+    height: number,
+    mouseX: number,
+    mouseY: number,
+    width: number,
+  },
+): {left: string, top: string} {
+  const {height, mouseX, mouseY, width} = mousePosition;
+  let top: number | string = 0;
+  let left: number | string = 0;
+
+  if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {
+    if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {
+      top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET}px`;
+    } else {
+      top = '0px';
+    }
+  } else {
+    top = `${mouseY + TOOLTIP_OFFSET}px`;
+  }
+
+  if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {
+    if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {
+      left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET}px`;
+    } else {
+      left = '0px';
+    }
+  } else {
+    left = `${mouseX + TOOLTIP_OFFSET * 2}px`;
+  }
+
+  return {left, top};
+}
+
+// method used to find the current mouse position inside the container
+function getMousePosition(
+  relativeContainer: null,
+  mouseEvent: SyntheticMouseEvent,
+) {
+  if (relativeContainer !== null) {
+    // Position within the nearest position:relative container.
+    let targetContainer = relativeContainer;
+    while (targetContainer.parentElement != null) {
+      if (targetContainer.style.position === 'relative') {
+        break;
+      } else {
+        targetContainer = targetContainer.parentElement;
+      }
+    }
+
+    const {height, left, top, width} =
+      targetContainer.getBoundingClientRect() as {
+        height: number,
+        left: number,
+        top: number,
+        width: number,
+      };
+
+    const mouseX = mouseEvent.clientX - left;
+    const mouseY = mouseEvent.clientY - top;
+
+    return {height, mouseX, mouseY, width};
+  } else {
+    return initialTooltipState;
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.css
new file mode 100644
index 00000000000..18d7f7f8fad
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.css
@@ -0,0 +1,25 @@
+.Updaters {
+  margin: 0 0 0.5rem;
+}
+
+.NoUpdaters,
+.Updater,
+.UnmountedUpdater {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  color: var(--color-text);
+}
+.Updater:focus,
+.Updater:hover {
+  outline: none;
+  background-color: var(--color-background-hover);
+}
+
+.NoUpdaters,
+.UnmountedUpdater {
+  color: var(--color-dim);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
new file mode 100644
index 00000000000..d0b31316324
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {CommitTree} from './types';
+import type {SerializedElement} from 'react-devtools-shared/src/frontend/types';
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import styles from './Updaters.css';
+import {ElementTypeRoot} from '../../../frontend/types';
+
+export type Props = {
+  commitTree: CommitTree,
+  updaters: Array<SerializedElement>,
+};
+
+export default function Updaters({commitTree, updaters}: Props): React.Node {
+  const {selectFiber} = useContext(ProfilerContext);
+
+  const children =
+    updaters.length > 0 ? (
+      updaters.map((serializedElement: SerializedElement): React$Node => {
+        const {displayName, id, key, type} = serializedElement;
+        const isVisibleInTree =
+          commitTree.nodes.has(id) && type !== ElementTypeRoot;
+        if (isVisibleInTree) {
+          return (
+            <button
+              key={id}
+              className={styles.Updater}
+              onClick={() => selectFiber(id, displayName)}>
+              {displayName} {key ? `key="${key}"` : ''}
+            </button>
+          );
+        } else {
+          return (
+            <div key={id} className={styles.UnmountedUpdater}>
+              {displayName} {key ? `key="${key}"` : ''}
+            </div>
+          );
+        }
+      })
+    ) : (
+      <div key="none" className={styles.NoUpdaters}>
+        (unknown)
+      </div>
+    );
+
+  return <div className={styles.Updaters}>{children}</div>;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css
new file mode 100644
index 00000000000..974b5e1a6a6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css
@@ -0,0 +1,25 @@
+.Item {
+  margin-top: 0.25rem;
+}
+
+.Key {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  line-height: 1;
+}
+
+.Key:first-of-type::before {
+  content: ' (';
+}
+
+.Key::after {
+  content: ', ';
+}
+
+.Key:last-of-type::after {
+  content: ')';
+}
+
+.Label {
+  font-weight: bold;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
new file mode 100644
index 00000000000..dffcd03350c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext} from 'react';
+
+import {ProfilerContext} from './ProfilerContext';
+import {StoreContext} from '../context';
+
+import styles from './WhatChanged.css';
+import HookChangeSummary from './HookChangeSummary';
+
+type Props = {
+  fiberID: number,
+  displayMode?: 'detailed' | 'compact',
+};
+
+export default function WhatChanged({
+  fiberID,
+  displayMode = 'detailed',
+}: Props): React.Node {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
+
+  // 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 (selectedCommitIndex === null) {
+    return null;
+  }
+
+  const {changeDescriptions} = profilerStore.getCommitData(
+    ((rootID: any): number),
+    selectedCommitIndex,
+  );
+
+  if (changeDescriptions === null) {
+    return null;
+  }
+
+  const changeDescription = changeDescriptions.get(fiberID);
+  if (changeDescription == null) {
+    return null;
+  }
+
+  const {context, didHooksChange, hooks, isFirstMount, props, state} =
+    changeDescription;
+
+  if (isFirstMount) {
+    return (
+      <div className={styles.Component}>
+        <label className={styles.Label}>Why did this render?</label>
+        <div className={styles.Item}>
+          This is the first time the component rendered.
+        </div>
+      </div>
+    );
+  }
+
+  const changes = [];
+
+  if (context === true) {
+    changes.push(
+      <div key="context" className={styles.Item}>
+        • Context changed
+      </div>,
+    );
+  } else if (
+    typeof context === 'object' &&
+    context !== null &&
+    context.length !== 0
+  ) {
+    changes.push(
+      <div key="context" className={styles.Item}>
+        • Context changed:
+        {context.map(key => (
+          <span key={key} className={styles.Key}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (didHooksChange) {
+    if (Array.isArray(hooks)) {
+      changes.push(
+        <div key="hooks" className={styles.Item}>
+          <HookChangeSummary
+            hooks={hooks}
+            fiberID={fiberID}
+            state={state}
+            displayMode={displayMode}
+          />
+        </div>,
+      );
+    } else {
+      changes.push(
+        <div key="hooks" className={styles.Item}>
+          • Hooks changed
+        </div>,
+      );
+    }
+  }
+
+  if (props !== null && props.length !== 0) {
+    changes.push(
+      <div key="props" className={styles.Item}>
+        • Props changed:
+        {props.map(key => (
+          <span key={key} className={styles.Key}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (state !== null && state.length !== 0) {
+    changes.push(
+      <div key="state" className={styles.Item}>
+        • State changed:
+        {state.map(key => (
+          <span key={key} className={styles.Key}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (changes.length === 0) {
+    changes.push(
+      <div key="nothing" className={styles.Item}>
+        The parent component rendered.
+      </div>,
+    );
+  }
+
+  return (
+    <div>
+      <label className={styles.Label}>Why did this render?</label>
+      {changes}
+    </div>
+  );
+}
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 00000000000..96fe99ec840
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 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 00000000000..34f24122e07
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  SerializedElement,
+} from 'react-devtools-shared/src/frontend/types';
+import type {
+  TimelineData,
+  TimelineDataExport,
+} from 'react-devtools-timeline/src/types';
+
+export type CommitTreeNode = {
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  hocDisplayNames: Array<string> | null,
+  key: number | string | null,
+  parentID: number,
+  treeBaseDuration: number,
+  type: ElementType,
+  // If component is compiled with Forget, the backend will send its name as Forget(...)
+  // Later, on the frontend side, we will strip HOC names and Forget prefix.
+  compiledWithForget: boolean,
+};
+
+export type CommitTree = {
+  nodes: Map<number, CommitTreeNode>,
+  rootID: number,
+};
+
+export type SnapshotNode = {
+  id: number,
+  children: Array<number>,
+  displayName: string | null,
+  hocDisplayNames: Array<string> | null,
+  key: number | string | null,
+  type: ElementType,
+  // If component is compiled with Forget, the backend will send its name as Forget(...)
+  // Later, on the frontend side, we will strip HOC names and Forget prefix.
+  compiledWithForget: boolean,
+};
+
+export type ChangeDescription = {
+  context: Array<string> | boolean | null,
+  didHooksChange: boolean,
+  isFirstMount: boolean,
+  props: Array<string> | null,
+  state: Array<string> | null,
+  hooks?: Array<number> | 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 the render phase?
+  duration: number,
+
+  // How long was the layout commit phase?
+  // Note that not all builds of React expose this property.
+  effectDuration: number | null,
+
+  // 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>,
+
+  // How long was the passive commit phase?
+  // Note that not all builds of React expose this property.
+  passiveEffectDuration: number | null,
+
+  // 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,
+
+  // Fiber(s) responsible for scheduling this update.
+  updaters: Array<SerializedElement> | null,
+};
+
+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>,
+
+  // 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 = {
+  // Legacy profiling data is per renderer + root.
+  dataForRoots: Map<number, ProfilingDataForRootFrontend>,
+
+  // Timeline data is per rederer.
+  timelineData: Array<TimelineData>,
+
+  // Some functionality should be disabled for imported data.
+  // e.g. DevTools should not try to sync selection between Components and Profiler tabs,
+  // even if there are Fibers with the same IDs.
+  imported: boolean,
+};
+
+export type CommitDataExport = {
+  changeDescriptions: Array<[number, ChangeDescription]> | null,
+  duration: number,
+  effectDuration: number | null,
+  // Tuple of fiber ID and actual duration
+  fiberActualDurations: Array<[number, number]>,
+  // Tuple of fiber ID and computed "self" duration
+  fiberSelfDurations: Array<[number, number]>,
+  passiveEffectDuration: number | null,
+  priorityLevel: string | null,
+  timestamp: number,
+  updaters: Array<SerializedElement> | null,
+};
+
+export type ProfilingDataForRootExport = {
+  commitData: Array<CommitDataExport>,
+  displayName: string,
+  // Tuple of Fiber ID and base duration
+  initialTreeBaseDurations: Array<[number, number]>,
+  operations: Array<Array<number>>,
+  rootID: number,
+  snapshots: Array<[number, SnapshotNode]>,
+};
+
+// Serializable version of ProfilingDataFrontend data.
+export type ProfilingDataExport = {
+  version: 5,
+
+  // Legacy profiling data is per renderer + root.
+  dataForRoots: Array<ProfilingDataForRootExport>,
+
+  // Timeline data is per rederer.
+  // Note that old exported profiles won't contain this key.
+  timelineData?: Array<TimelineDataExport>,
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/useCommitFilteringAndNavigation.js b/packages/react-devtools-shared/src/devtools/views/Profiler/useCommitFilteringAndNavigation.js
new file mode 100644
index 00000000000..e309e6a3cf3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/useCommitFilteringAndNavigation.js
@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useCallback, useMemo, useState} from 'react';
+import {useLocalStorage} from '../hooks';
+
+import type {CommitDataFrontend} from './types';
+
+export type CommitFilteringAndNavigation = {
+  isCommitFilterEnabled: boolean,
+  setIsCommitFilterEnabled: (value: boolean) => void,
+  minCommitDuration: number,
+  setMinCommitDuration: (value: number) => void,
+
+  // Selection state
+  selectedCommitIndex: number | null,
+  selectCommitIndex: (value: number | null) => void,
+
+  // Filtered data
+  filteredCommitIndices: Array<number>,
+  selectedFilteredCommitIndex: number | null,
+
+  // Navigation
+  selectNextCommitIndex: () => void,
+  selectPrevCommitIndex: () => void,
+};
+
+export function useCommitFilteringAndNavigation(
+  commitData: Array<CommitDataFrontend>,
+): CommitFilteringAndNavigation {
+  // Filter settings persisted to localStorage
+  const [isCommitFilterEnabled, setIsCommitFilterEnabledValue] =
+    useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);
+  const [minCommitDuration, setMinCommitDurationValue] =
+    useLocalStorage<number>('minCommitDuration', 0);
+
+  // Currently selected commit index (in the unfiltered list)
+  const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(
+    null,
+  );
+
+  const calculateFilteredIndices = useCallback(
+    (enabled: boolean, minDuration: number): Array<number> => {
+      return commitData.reduce((reduced: Array<number>, commitDatum, index) => {
+        if (!enabled || commitDatum.duration >= minDuration) {
+          reduced.push(index);
+        }
+        return reduced;
+      }, ([]: Array<number>));
+    },
+    [commitData],
+  );
+
+  const findFilteredIndex = useCallback(
+    (commitIndex: number | null, filtered: Array<number>): number | null => {
+      if (commitIndex === null) return null;
+      for (let i = 0; i < filtered.length; i++) {
+        if (filtered[i] === commitIndex) {
+          return i;
+        }
+      }
+      return null;
+    },
+    [],
+  );
+
+  // Adjust selection when filter settings change to keep a valid selection
+  const adjustSelectionAfterFilterChange = useCallback(
+    (newFilteredIndices: Array<number>) => {
+      const currentSelectedIndex = selectedCommitIndex;
+      const selectedFilteredIndex = findFilteredIndex(
+        currentSelectedIndex,
+        newFilteredIndices,
+      );
+
+      if (newFilteredIndices.length === 0) {
+        // No commits pass the filter - clear selection
+        selectCommitIndex(null);
+      } else if (currentSelectedIndex === null) {
+        // No commit was selected - select first available
+        selectCommitIndex(newFilteredIndices[0]);
+      } else if (selectedFilteredIndex === null) {
+        // Currently selected commit was filtered out - find closest commit before it
+        let closestBefore = null;
+        for (let i = newFilteredIndices.length - 1; i >= 0; i--) {
+          if (newFilteredIndices[i] < currentSelectedIndex) {
+            closestBefore = newFilteredIndices[i];
+            break;
+          }
+        }
+        // If no commit before it, use the first available
+        selectCommitIndex(
+          closestBefore !== null ? closestBefore : newFilteredIndices[0],
+        );
+      } else if (selectedFilteredIndex >= newFilteredIndices.length) {
+        // Filtered position is out of bounds - clamp to last available
+        selectCommitIndex(newFilteredIndices[newFilteredIndices.length - 1]);
+      }
+      // Otherwise, the current selection is still valid in the filtered list, keep it
+    },
+    [findFilteredIndex, selectedCommitIndex, selectCommitIndex],
+  );
+
+  const filteredCommitIndices = useMemo(
+    () => calculateFilteredIndices(isCommitFilterEnabled, minCommitDuration),
+    [calculateFilteredIndices, isCommitFilterEnabled, minCommitDuration],
+  );
+
+  const selectedFilteredCommitIndex = useMemo(
+    () => findFilteredIndex(selectedCommitIndex, filteredCommitIndices),
+    [findFilteredIndex, selectedCommitIndex, filteredCommitIndices],
+  );
+
+  const selectNextCommitIndex = useCallback(() => {
+    if (
+      selectedFilteredCommitIndex === null ||
+      filteredCommitIndices.length === 0
+    ) {
+      return;
+    }
+    let nextCommitIndex = selectedFilteredCommitIndex + 1;
+    if (nextCommitIndex === filteredCommitIndices.length) {
+      nextCommitIndex = 0;
+    }
+    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
+
+  const selectPrevCommitIndex = useCallback(() => {
+    if (
+      selectedFilteredCommitIndex === null ||
+      filteredCommitIndices.length === 0
+    ) {
+      return;
+    }
+    let prevCommitIndex = selectedFilteredCommitIndex - 1;
+    if (prevCommitIndex < 0) {
+      prevCommitIndex = filteredCommitIndices.length - 1;
+    }
+    selectCommitIndex(filteredCommitIndices[prevCommitIndex]);
+  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
+
+  // Setters that also adjust selection when filter changes
+  const setIsCommitFilterEnabled = useCallback(
+    (value: boolean) => {
+      setIsCommitFilterEnabledValue(value);
+
+      const newFilteredIndices = calculateFilteredIndices(
+        value,
+        minCommitDuration,
+      );
+
+      adjustSelectionAfterFilterChange(newFilteredIndices);
+    },
+    [
+      setIsCommitFilterEnabledValue,
+      calculateFilteredIndices,
+      minCommitDuration,
+      adjustSelectionAfterFilterChange,
+    ],
+  );
+
+  const setMinCommitDuration = useCallback(
+    (value: number) => {
+      setMinCommitDurationValue(value);
+
+      const newFilteredIndices = calculateFilteredIndices(
+        isCommitFilterEnabled,
+        value,
+      );
+
+      adjustSelectionAfterFilterChange(newFilteredIndices);
+    },
+    [
+      setMinCommitDurationValue,
+      calculateFilteredIndices,
+      isCommitFilterEnabled,
+      adjustSelectionAfterFilterChange,
+    ],
+  );
+
+  return {
+    isCommitFilterEnabled,
+    setIsCommitFilterEnabled,
+    minCommitDuration,
+    setMinCommitDuration,
+    selectedCommitIndex,
+    selectCommitIndex,
+    filteredCommitIndices,
+    selectedFilteredCommitIndex,
+    selectNextCommitIndex,
+    selectPrevCommitIndex,
+  };
+}
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 00000000000..193ce766d70
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -0,0 +1,376 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {backendToFrontendSerializedElementMapper} from 'react-devtools-shared/src/utils';
+
+import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
+import type {
+  ProfilingDataExport,
+  ProfilingDataForRootExport,
+  ProfilingDataForRootFrontend,
+  ProfilingDataFrontend,
+  SnapshotNode,
+} from './types';
+import type {
+  TimelineData,
+  TimelineDataExport,
+} from 'react-devtools-timeline/src/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();
+
+  const timelineDataArray = [];
+
+  dataBackends.forEach(dataBackend => {
+    const {timelineData} = dataBackend;
+    if (timelineData != null) {
+      const {
+        batchUIDToMeasuresKeyValueArray,
+        internalModuleSourceToRanges,
+        laneToLabelKeyValueArray,
+        laneToReactMeasureKeyValueArray,
+        ...rest
+      } = timelineData;
+
+      timelineDataArray.push({
+        ...rest,
+
+        // Most of the data is safe to parse as-is,
+        // but we need to convert the nested Arrays back to Maps.
+        batchUIDToMeasuresMap: new Map(batchUIDToMeasuresKeyValueArray),
+        internalModuleSourceToRanges: new Map(internalModuleSourceToRanges),
+        laneToLabelMap: new Map(laneToLabelKeyValueArray),
+        laneToReactMeasureMap: new Map(laneToReactMeasureKeyValueArray),
+      });
+    }
+
+    dataBackend.dataForRoots.forEach(
+      ({commitData, displayName, initialTreeBaseDurations, 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}"`,
+          );
+        }
+
+        // Do not filter empty commits from the profiler data!
+        // Hiding "empty" commits might cause confusion too.
+        // A commit *did happen* even if none of the components the Profiler is showing were involved.
+        const convertedCommitData = commitData.map(
+          (commitDataBackend, commitIndex) => ({
+            changeDescriptions:
+              commitDataBackend.changeDescriptions != null
+                ? new Map(commitDataBackend.changeDescriptions)
+                : null,
+            duration: commitDataBackend.duration,
+            effectDuration: commitDataBackend.effectDuration,
+            fiberActualDurations: new Map(
+              commitDataBackend.fiberActualDurations,
+            ),
+            fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
+            passiveEffectDuration: commitDataBackend.passiveEffectDuration,
+            priorityLevel: commitDataBackend.priorityLevel,
+            timestamp: commitDataBackend.timestamp,
+            updaters:
+              commitDataBackend.updaters !== null
+                ? commitDataBackend.updaters.map(
+                    backendToFrontendSerializedElementMapper,
+                  )
+                : null,
+          }),
+        );
+
+        dataForRoots.set(rootID, {
+          commitData: convertedCommitData,
+          displayName,
+          initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+          operations,
+          rootID,
+          snapshots,
+        });
+      },
+    );
+  });
+
+  return {dataForRoots, imported: false, timelineData: timelineDataArray};
+}
+
+// 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 profile export version "${version}". Supported version is "${PROFILER_EXPORT_VERSION}".`,
+    );
+  }
+
+  const timelineData: Array<TimelineData> = profilingDataExport.timelineData
+    ? profilingDataExport.timelineData.map(
+        ({
+          batchUIDToMeasuresKeyValueArray,
+          componentMeasures,
+          duration,
+          flamechart,
+          internalModuleSourceToRanges,
+          laneToLabelKeyValueArray,
+          laneToReactMeasureKeyValueArray,
+          nativeEvents,
+          networkMeasures,
+          otherUserTimingMarks,
+          reactVersion,
+          schedulingEvents,
+          snapshots,
+          snapshotHeight,
+          startTime,
+          suspenseEvents,
+          thrownErrors,
+        }) => ({
+          // Most of the data is safe to parse as-is,
+          // but we need to convert the nested Arrays back to Maps.
+          batchUIDToMeasuresMap: new Map(batchUIDToMeasuresKeyValueArray),
+          componentMeasures,
+          duration,
+          flamechart,
+          internalModuleSourceToRanges: new Map(internalModuleSourceToRanges),
+          laneToLabelMap: new Map(laneToLabelKeyValueArray),
+          laneToReactMeasureMap: new Map(laneToReactMeasureKeyValueArray),
+          nativeEvents,
+          networkMeasures,
+          otherUserTimingMarks,
+          reactVersion,
+          schedulingEvents,
+          snapshots,
+          snapshotHeight,
+          startTime,
+          suspenseEvents,
+          thrownErrors,
+        }),
+      )
+    : [];
+
+  const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
+  profilingDataExport.dataForRoots.forEach(
+    ({
+      commitData,
+      displayName,
+      initialTreeBaseDurations,
+      operations,
+      rootID,
+      snapshots,
+    }) => {
+      dataForRoots.set(rootID, {
+        commitData: commitData.map(
+          ({
+            changeDescriptions,
+            duration,
+            effectDuration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            passiveEffectDuration,
+            priorityLevel,
+            timestamp,
+            updaters,
+          }) => ({
+            changeDescriptions:
+              changeDescriptions != null ? new Map(changeDescriptions) : null,
+            duration,
+            effectDuration,
+            fiberActualDurations: new Map(fiberActualDurations),
+            fiberSelfDurations: new Map(fiberSelfDurations),
+            passiveEffectDuration,
+            priorityLevel,
+            timestamp,
+            updaters,
+          }),
+        ),
+        displayName,
+        initialTreeBaseDurations: new Map(initialTreeBaseDurations),
+        operations,
+        rootID,
+        snapshots: new Map(snapshots),
+      });
+    },
+  );
+
+  return {
+    dataForRoots,
+    imported: true,
+    timelineData,
+  };
+}
+
+// Converts a Store Profiling data into a format that can be safely (JSON) serialized for export.
+export function prepareProfilingDataExport(
+  profilingDataFrontend: ProfilingDataFrontend,
+): ProfilingDataExport {
+  const timelineData: Array<TimelineDataExport> =
+    profilingDataFrontend.timelineData.map(
+      ({
+        batchUIDToMeasuresMap,
+        componentMeasures,
+        duration,
+        flamechart,
+        internalModuleSourceToRanges,
+        laneToLabelMap,
+        laneToReactMeasureMap,
+        nativeEvents,
+        networkMeasures,
+        otherUserTimingMarks,
+        reactVersion,
+        schedulingEvents,
+        snapshots,
+        snapshotHeight,
+        startTime,
+        suspenseEvents,
+        thrownErrors,
+      }) => ({
+        // Most of the data is safe to serialize as-is,
+        // but we need to convert the Maps to nested Arrays.
+        batchUIDToMeasuresKeyValueArray: Array.from(
+          batchUIDToMeasuresMap.entries(),
+        ),
+        componentMeasures: componentMeasures,
+        duration,
+        flamechart,
+        internalModuleSourceToRanges: Array.from(
+          internalModuleSourceToRanges.entries(),
+        ),
+        laneToLabelKeyValueArray: Array.from(laneToLabelMap.entries()),
+        laneToReactMeasureKeyValueArray: Array.from(
+          laneToReactMeasureMap.entries(),
+        ),
+        nativeEvents,
+        networkMeasures,
+        otherUserTimingMarks,
+        reactVersion,
+        schedulingEvents,
+        snapshots,
+        snapshotHeight,
+        startTime,
+        suspenseEvents,
+        thrownErrors,
+      }),
+    );
+
+  const dataForRoots: Array<ProfilingDataForRootExport> = [];
+  profilingDataFrontend.dataForRoots.forEach(
+    ({
+      commitData,
+      displayName,
+      initialTreeBaseDurations,
+      operations,
+      rootID,
+      snapshots,
+    }) => {
+      dataForRoots.push({
+        commitData: commitData.map(
+          ({
+            changeDescriptions,
+            duration,
+            effectDuration,
+            fiberActualDurations,
+            fiberSelfDurations,
+            passiveEffectDuration,
+            priorityLevel,
+            timestamp,
+            updaters,
+          }) => ({
+            changeDescriptions:
+              changeDescriptions != null
+                ? Array.from(changeDescriptions.entries())
+                : null,
+            duration,
+            effectDuration,
+            fiberActualDurations: Array.from(fiberActualDurations.entries()),
+            fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
+            passiveEffectDuration,
+            priorityLevel,
+            timestamp,
+            updaters,
+          }),
+        ),
+        displayName,
+        initialTreeBaseDurations: Array.from(
+          initialTreeBaseDurations.entries(),
+        ),
+        operations,
+        rootID,
+        snapshots: Array.from(snapshots.entries()),
+      });
+    },
+  );
+
+  return {
+    version: PROFILER_EXPORT_VERSION,
+    dataForRoots,
+    timelineData,
+  };
+}
+
+export const getGradientColor = (value: number): string => {
+  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): number | string =>
+  Math.round(duration * 10) / 10 || '<0.1';
+export const formatPercentage = (percentage: number): number =>
+  Math.round(percentage * 100);
+export const formatTime = (timestamp: number): number =>
+  Math.round(Math.round(timestamp) / 100) / 10;
+
+export const scale =
+  (
+    minValue: number,
+    maxValue: number,
+    minRange: number,
+    maxRange: number,
+  ): ((value: number, fallbackValue: number) => 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 00000000000..a209f908d7f
--- /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 00000000000..39f8cb67160
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import styles from './ReactLogo.css';
+
+type Props = {
+  className?: string,
+};
+
+export default function ReactLogo({className}: Props): React.Node {
+  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/SearchInput.css b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
new file mode 100644
index 00000000000..960bb152cb2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
@@ -0,0 +1,38 @@
+.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{
+  height: 20px;
+  width: 1px;
+  background-color: var(--color-border);
+}
+.LeftVRule {
+  margin: 0 0.25rem 0 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
new file mode 100644
index 00000000000..3d94128bd67
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useEffect, useRef} from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
+import Icon from './Icon';
+
+import styles from './SearchInput.css';
+
+type Props = {
+  goToNextResult: () => void,
+  goToPreviousResult: () => void,
+  placeholder: string,
+  search: (text: string) => void,
+  searchIndex: number,
+  searchResultsCount: number,
+  searchText: string,
+  testName?: ?string,
+};
+
+export default function SearchInput({
+  goToNextResult,
+  goToPreviousResult,
+  placeholder,
+  search,
+  searchIndex,
+  searchResultsCount,
+  searchText,
+  testName,
+}: Props): React.Node {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const resetSearch = () => search('');
+
+  // $FlowFixMe[missing-local-annot]
+  const handleChange = ({currentTarget}) => {
+    search(currentTarget.value);
+  };
+  // $FlowFixMe[missing-local-annot]
+  const handleKeyPress = ({key, shiftKey}) => {
+    if (key === 'Enter') {
+      if (shiftKey) {
+        goToPreviousResult();
+      } else {
+        goToNextResult();
+      }
+    }
+  };
+
+  // Auto-focus search input
+  useEffect(() => {
+    if (inputRef.current === null) {
+      return () => {};
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const {key, metaKey} = event;
+      if (key === 'f' && metaKey) {
+        const inputElement = inputRef.current;
+        if (inputElement !== null) {
+          inputElement.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 ownerDocumentElement = inputRef.current.ownerDocument.documentElement;
+    if (ownerDocumentElement === null) {
+      return;
+    }
+    ownerDocumentElement.addEventListener('keydown', handleKeyDown);
+
+    return () =>
+      ownerDocumentElement.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <div className={styles.SearchInput} data-testname={testName}>
+      <Icon className={styles.InputIcon} type="search" />
+      <input
+        data-testname={testName ? `${testName}-Input` : undefined}
+        className={styles.Input}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+        placeholder={placeholder}
+        ref={inputRef}
+        value={searchText}
+      />
+      {!!searchText && (
+        <React.Fragment>
+          <span
+            className={styles.IndexLabel}
+            data-testname={testName ? `${testName}-ResultsCount` : undefined}>
+            {Math.min(searchIndex + 1, searchResultsCount)} |{' '}
+            {searchResultsCount}
+          </span>
+          <div className={styles.LeftVRule} />
+          <Button
+            data-testname={testName ? `${testName}-PreviousButton` : undefined}
+            disabled={!searchText}
+            onClick={goToPreviousResult}
+            title={
+              <React.Fragment>
+                Scroll to previous search result (<kbd>Shift</kbd> +{' '}
+                <kbd>Enter</kbd>)
+              </React.Fragment>
+            }>
+            <ButtonIcon type="up" />
+          </Button>
+          <Button
+            data-testname={testName ? `${testName}-NextButton` : undefined}
+            disabled={!searchText}
+            onClick={goToNextResult}
+            title={
+              <React.Fragment>
+                Scroll to next search result (<kbd>Enter</kbd>)
+              </React.Fragment>
+            }>
+            <ButtonIcon type="down" />
+          </Button>
+          <Button
+            data-testname={testName ? `${testName}-ResetButton` : undefined}
+            disabled={!searchText}
+            onClick={resetSearch}
+            title="Reset search">
+            <ButtonIcon type="close" />
+          </Button>
+        </React.Fragment>
+      )}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js
new file mode 100644
index 00000000000..cabc3d6584b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../../constants';
+import {useLocalStorage} from '../hooks';
+
+import styles from './SettingsShared.css';
+
+export default function CodeEditorByDefault({
+  onChange,
+}: {
+  onChange?: boolean => void,
+}): React.Node {
+  const [alwaysOpenInEditor, setAlwaysOpenInEditor] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+    false,
+  );
+
+  return (
+    <label className={styles.SettingRow}>
+      <input
+        type="checkbox"
+        checked={alwaysOpenInEditor}
+        onChange={({currentTarget}) => {
+          setAlwaysOpenInEditor(currentTarget.checked);
+          if (onChange) {
+            onChange(currentTarget.checked);
+          }
+        }}
+        className={styles.SettingRowCheckbox}
+      />
+      Open local files directly in your code editor
+    </label>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js
new file mode 100644
index 00000000000..d6e81ef3554
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+} from '../../../constants';
+import {useLocalStorage} from '../hooks';
+import {
+  getDefaultPreset,
+  getDefaultOpenInEditorURL,
+} from 'react-devtools-shared/src/utils';
+
+import styles from './SettingsShared.css';
+
+export default function CodeEditorOptions({
+  environmentNames,
+}: {
+  environmentNames: Promise<Array<string>>,
+}): React.Node {
+  const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage<
+    'vscode' | 'custom',
+  >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, getDefaultPreset());
+
+  const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
+    LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+    getDefaultOpenInEditorURL(),
+  );
+
+  return (
+    <>
+      <select
+        value={openInEditorURLPreset}
+        onChange={({currentTarget}) => {
+          const selectedValue = currentTarget.value;
+          setOpenInEditorURLPreset(selectedValue);
+        }}>
+        <option value="vscode">VS Code</option>
+        <option value="custom">Custom</option>
+      </select>
+      {openInEditorURLPreset === 'custom' && (
+        <input
+          className={styles.Input}
+          type="text"
+          placeholder={getDefaultOpenInEditorURL()}
+          value={openInEditorURL}
+          onChange={event => {
+            setOpenInEditorURL(event.target.value);
+          }}
+        />
+      )}
+    </>
+  );
+}
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 00000000000..9b73e949429
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -0,0 +1,552 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  use,
+} from 'react';
+import {useSubscription} from '../hooks';
+import {StoreContext} from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
+import {SettingsContext} from '../Settings/SettingsContext';
+import {
+  ComponentFilterDisplayName,
+  ComponentFilterElementType,
+  ComponentFilterHOC,
+  ComponentFilterLocation,
+  ComponentFilterEnvironmentName,
+  ComponentFilterActivitySlice,
+  ElementTypeClass,
+  ElementTypeContext,
+  ElementTypeFunction,
+  ElementTypeForwardRef,
+  ElementTypeHostComponent,
+  ElementTypeMemo,
+  ElementTypeOtherOrUnknown,
+  ElementTypeProfiler,
+  ElementTypeSuspense,
+  ElementTypeActivity,
+  ElementTypeViewTransition,
+} from 'react-devtools-shared/src/frontend/types';
+
+import styles from './SettingsShared.css';
+
+import type {
+  BooleanComponentFilter,
+  ComponentFilter,
+  ComponentFilterType,
+  ElementType,
+  ElementTypeComponentFilter,
+  RegExpComponentFilter,
+  EnvironmentNameComponentFilter,
+} from 'react-devtools-shared/src/frontend/types';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+
+export default function ComponentsSettings({
+  environmentNames,
+}: {
+  environmentNames: Promise<Array<string>>,
+}): React.Node {
+  const store = useContext(StoreContext);
+  const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
+
+  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}: $FlowFixMe) => {
+      store.collapseNodesByDefault = !currentTarget.checked;
+    },
+    [store],
+  );
+
+  const updateParseHookNames = useCallback(
+    ({currentTarget}: $FlowFixMe) => {
+      setParseHookNames(currentTarget.checked);
+    },
+    [setParseHookNames],
+  );
+
+  const [componentFilters, setComponentFilters] = useState<
+    Array<ComponentFilter>,
+  >(() => [...store.componentFilters]);
+
+  const usedEnvironmentNames = use(environmentNames);
+
+  const resolvedEnvironmentNames = useMemo(() => {
+    const set = new Set(usedEnvironmentNames);
+    // If there are other filters already specified but are not currently
+    // on the page, we still allow them as options.
+    for (let i = 0; i < componentFilters.length; i++) {
+      const filter = componentFilters[i];
+      if (filter.type === ComponentFilterEnvironmentName) {
+        set.add(filter.value);
+      }
+    }
+    // Client is special and is always available as a default.
+    if (set.size > 0) {
+      // Only show any options at all if there's any other option already
+      // used by a filter or if any environments are used by the page.
+      // Note that "Client" can have been added above which would mean
+      // that we should show it as an option regardless if it's the only
+      // option.
+      set.add('Client');
+    }
+    return Array.from(set).sort();
+  }, [usedEnvironmentNames, 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,
+            };
+          } else if (type === ComponentFilterEnvironmentName) {
+            cloned[index] = {
+              type: ComponentFilterEnvironmentName,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: 'Client',
+            };
+          } else if (type === ComponentFilterActivitySlice) {
+            // TODO: Allow changing type
+          }
+        }
+        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 updateFilterValueEnvironmentName = useCallback(
+    (componentFilter: ComponentFilter, value: string) => {
+      if (componentFilter.type !== ComponentFilterEnvironmentName) {
+        throw Error('Invalid value for environment name filter');
+      }
+
+      setComponentFilters(prevComponentFilters => {
+        const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+        if (componentFilter.type === ComponentFilterEnvironmentName) {
+          const index = prevComponentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            cloned[index] = {
+              ...componentFilter,
+              value,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    [],
+  );
+
+  const removeFilter = useCallback((index: number) => {
+    setComponentFilters(prevComponentFilters => {
+      const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+      cloned.splice(index, 1);
+      return cloned;
+    });
+  }, []);
+
+  const removeAllFilter = () => {
+    setComponentFilters([]);
+  };
+
+  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,
+            };
+          } else if (componentFilter.type === ComponentFilterEnvironmentName) {
+            cloned[index] = {
+              ...((cloned[index]: any): EnvironmentNameComponentFilter),
+              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.SettingList}>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={!collapseNodesByDefault}
+            onChange={updateCollapseNodesByDefault}
+            className={styles.SettingRowCheckbox}
+          />
+          Expand component tree by default
+        </label>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={parseHookNames}
+            onChange={updateParseHookNames}
+            className={styles.SettingRowCheckbox}
+          />
+          Always parse hook names from source&nbsp;
+          <span className={styles.Warning}>(may be slow)</span>
+        </label>
+      </div>
+
+      <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}>
+                {componentFilter.type !== ComponentFilterActivitySlice && (
+                  <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
+                  disabled={
+                    componentFilter.type === ComponentFilterActivitySlice
+                  }
+                  value={componentFilter.type}
+                  onChange={({currentTarget}) =>
+                    changeFilterType(
+                      componentFilter,
+                      ((parseInt(
+                        currentTarget.value,
+                        10,
+                      ): any): ComponentFilterType),
+                    )
+                  }>
+                  {/* TODO: currently disabled, need find a new way of doing this
+                    <option value={ComponentFilterLocation}>location</option>
+                  */}
+                  <option value={ComponentFilterDisplayName}>name</option>
+                  <option value={ComponentFilterElementType}>type</option>
+                  <option value={ComponentFilterHOC}>hoc</option>
+                  {resolvedEnvironmentNames.length > 0 && (
+                    <option value={ComponentFilterEnvironmentName}>
+                      environment
+                    </option>
+                  )}
+                  {componentFilter.type === ComponentFilterActivitySlice && (
+                    <option value={ComponentFilterActivitySlice}>
+                      component
+                    </option>
+                  )}
+                </select>
+              </td>
+              <td className={styles.TableCell}>
+                {(componentFilter.type === ComponentFilterElementType ||
+                  componentFilter.type === ComponentFilterEnvironmentName) &&
+                  'equals'}
+                {(componentFilter.type === ComponentFilterLocation ||
+                  componentFilter.type === ComponentFilterDisplayName) &&
+                  'matches'}
+                {componentFilter.type === ComponentFilterActivitySlice &&
+                  'within'}
+              </td>
+              <td className={styles.TableCell}>
+                {componentFilter.type === ComponentFilterElementType && (
+                  <select
+                    value={componentFilter.value}
+                    onChange={({currentTarget}) =>
+                      updateFilterValueElementType(
+                        componentFilter,
+                        ((parseInt(currentTarget.value, 10): any): ElementType),
+                      )
+                    }>
+                    {isInternalFacebookBuild && (
+                      <option value={ElementTypeActivity}>activity</option>
+                    )}
+                    <option value={ElementTypeClass}>class</option>
+                    <option value={ElementTypeContext}>context</option>
+                    <option value={ElementTypeFunction}>function</option>
+                    <option value={ElementTypeForwardRef}>forward ref</option>
+                    <option value={ElementTypeHostComponent}>
+                      {__IS_NATIVE__
+                        ? 'host components (e.g. <RCTText>)'
+                        : 'dom nodes (e.g. <div>)'}
+                    </option>
+                    <option value={ElementTypeMemo}>memo</option>
+                    <option value={ElementTypeOtherOrUnknown}>other</option>
+                    <option value={ElementTypeProfiler}>profiler</option>
+                    <option value={ElementTypeSuspense}>suspense</option>
+                    {isInternalFacebookBuild && (
+                      <option value={ElementTypeViewTransition}>
+                        view transition
+                      </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}
+                  />
+                )}
+                {componentFilter.type === ComponentFilterEnvironmentName && (
+                  <select
+                    value={componentFilter.value}
+                    onChange={({currentTarget}) =>
+                      updateFilterValueEnvironmentName(
+                        componentFilter,
+                        currentTarget.value,
+                      )
+                    }>
+                    {resolvedEnvironmentNames.map(name => (
+                      <option key={name} value={name}>
+                        {name}
+                      </option>
+                    ))}
+                  </select>
+                )}
+                {componentFilter.type === ComponentFilterActivitySlice && (
+                  <span>Activity Slice</span>
+                )}
+              </td>
+              <td className={styles.TableCell}>
+                <Button
+                  onClick={() => removeFilter(index)}
+                  title="Delete filter">
+                  <ButtonIcon type="delete" />
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <Button onClick={addFilter} title="Add filter">
+        <ButtonIcon className={styles.ButtonIcon} type="add" />
+        Add filter
+      </Button>
+      {componentFilters.length > 0 && (
+        <Button onClick={removeAllFilter} title="Delete all filters">
+          <ButtonIcon className={styles.ButtonIcon} type="delete" />
+          Delete all filters
+        </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/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
new file mode 100644
index 00000000000..34b08c5bfcd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {use, useState, useEffect} from 'react';
+
+import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+import styles from './SettingsShared.css';
+
+type Props = {
+  hookSettings: Promise<$ReadOnly<DevToolsHookSettings>>,
+  store: Store,
+};
+
+export default function DebuggingSettings({
+  hookSettings,
+  store,
+}: Props): React.Node {
+  const usedHookSettings = use(hookSettings);
+
+  const [appendComponentStack, setAppendComponentStack] = useState(
+    usedHookSettings.appendComponentStack,
+  );
+  const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(
+    usedHookSettings.breakOnConsoleErrors,
+  );
+  const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
+    useState(usedHookSettings.hideConsoleLogsInStrictMode);
+  const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
+    useState(usedHookSettings.showInlineWarningsAndErrors);
+  const [
+    disableSecondConsoleLogDimmingInStrictMode,
+    setDisableSecondConsoleLogDimmingInStrictMode,
+  ] = useState(usedHookSettings.disableSecondConsoleLogDimmingInStrictMode);
+
+  useEffect(() => {
+    store.setShouldShowWarningsAndErrors(showInlineWarningsAndErrors);
+  }, [showInlineWarningsAndErrors]);
+
+  useEffect(() => {
+    store.updateHookSettings({
+      appendComponentStack,
+      breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      disableSecondConsoleLogDimmingInStrictMode,
+    });
+  }, [
+    store,
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    disableSecondConsoleLogDimmingInStrictMode,
+  ]);
+
+  return (
+    <div className={styles.SettingList}>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={appendComponentStack}
+            onChange={({currentTarget}) =>
+              setAppendComponentStack(currentTarget.checked)
+            }
+            className={styles.SettingRowCheckbox}
+          />
+          Append component stacks to console warnings and errors
+        </label>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={showInlineWarningsAndErrors}
+            onChange={({currentTarget}) =>
+              setShowInlineWarningsAndErrors(currentTarget.checked)
+            }
+            className={styles.SettingRowCheckbox}
+          />
+          Show inline warnings and errors
+        </label>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={breakOnConsoleErrors}
+            onChange={({currentTarget}) =>
+              setBreakOnConsoleErrors(currentTarget.checked)
+            }
+            className={styles.SettingRowCheckbox}
+          />
+          Break on warnings
+        </label>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={hideConsoleLogsInStrictMode}
+            onChange={({currentTarget}) => {
+              setHideConsoleLogsInStrictMode(currentTarget.checked);
+              if (currentTarget.checked) {
+                setDisableSecondConsoleLogDimmingInStrictMode(false);
+              }
+            }}
+            className={styles.SettingRowCheckbox}
+          />
+          Hide logs during additional invocations in&nbsp;
+          <a
+            className={styles.StrictModeLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://react.dev/reference/react/StrictMode">
+            Strict Mode
+          </a>
+        </label>
+      </div>
+
+      <div
+        className={
+          hideConsoleLogsInStrictMode
+            ? `${styles.SettingDisabled} ${styles.SettingWrapper}`
+            : styles.SettingWrapper
+        }>
+        <label
+          className={
+            hideConsoleLogsInStrictMode
+              ? `${styles.SettingDisabled} ${styles.SettingRow}`
+              : styles.SettingRow
+          }>
+          <input
+            type="checkbox"
+            checked={disableSecondConsoleLogDimmingInStrictMode}
+            disabled={hideConsoleLogsInStrictMode}
+            onChange={({currentTarget}) =>
+              setDisableSecondConsoleLogDimmingInStrictMode(
+                currentTarget.checked,
+              )
+            }
+            className={styles.SettingRowCheckbox}
+          />
+          Disable log dimming during additional invocations in&nbsp;
+          <a
+            className={styles.StrictModeLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://react.dev/reference/react/StrictMode">
+            Strict Mode
+          </a>
+        </label>
+      </div>
+    </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 00000000000..d8f50a9cdc7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext, useMemo} from 'react';
+import {SettingsContext} from './SettingsContext';
+import {StoreContext} from '../context';
+import {CHANGE_LOG_URL} from 'react-devtools-shared/src/devtools/constants';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+
+import styles from './SettingsShared.css';
+
+import CodeEditorOptions from './CodeEditorOptions';
+import CodeEditorByDefault from './CodeEditorByDefault';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../../constants';
+import {useLocalStorage} from '../hooks';
+
+function getChangeLogUrl(version: ?string): string | null {
+  if (!version) {
+    return null;
+  }
+
+  // Version numbers are in the format of: <major>.<minor>.<patch>-<sha>
+  // e.g. "4.23.0-f0dd459e0"
+  // GitHub CHANGELOG headers are in the format of: <major>.<minor>.<patch>
+  // but the "." are stripped from anchor tags, becomming: <major><minor><patch>
+  const versionAnchor = version.replace(/^(\d+)\.(\d+)\.(\d+).*/, '$1$2$3');
+  return `${CHANGE_LOG_URL}#${versionAnchor}`;
+}
+
+export default function GeneralSettings(_: {}): React.Node {
+  const {
+    displayDensity,
+    setDisplayDensity,
+    setTheme,
+    setTraceUpdatesEnabled,
+    theme,
+    traceUpdatesEnabled,
+  } = useContext(SettingsContext);
+
+  const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
+  const frontendVersion = process.env.DEVTOOLS_VERSION;
+
+  const showBackendVersion =
+    backendVersion && backendVersion !== frontendVersion;
+
+  const [alwaysOpenInEditor] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+    false,
+  );
+
+  return (
+    <div className={styles.SettingList}>
+      {isInternalFacebookBuild && (
+        <div className={styles.SettingWrapper}>
+          This is an internal build of React DevTools for Meta
+        </div>
+      )}
+
+      <div className={styles.SettingWrapper}>
+        <div className={styles.RadioLabel}>Theme</div>
+        <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.SettingWrapper}>
+        <div className={styles.RadioLabel}>Display density</div>
+        <select
+          value={displayDensity}
+          onChange={({currentTarget}) =>
+            setDisplayDensity(currentTarget.value)
+          }>
+          <option value="compact">Compact</option>
+          <option value="comfortable">Comfortable</option>
+        </select>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <div className={styles.RadioLabel}>Open in Editor URL</div>
+          <CodeEditorOptions />
+        </label>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <CodeEditorByDefault />
+        {alwaysOpenInEditor && (__IS_CHROME__ || __IS_EDGE__) ? (
+          <div>
+            To enable link handling in your browser's DevTools settings, look
+            for the option Extension -> Link Handling. Select "React Developer
+            Tools".
+          </div>
+        ) : null}
+      </div>
+
+      {supportsTraceUpdates && (
+        <div className={styles.SettingWrapper}>
+          <label className={styles.SettingRow}>
+            <input
+              type="checkbox"
+              checked={traceUpdatesEnabled}
+              onChange={({currentTarget}) =>
+                setTraceUpdatesEnabled(currentTarget.checked)
+              }
+              className={styles.SettingRowCheckbox}
+            />
+            Highlight updates when components render
+          </label>
+        </div>
+      )}
+
+      <div className={styles.ReleaseNotes}>
+        {showBackendVersion && (
+          <div>
+            <ul className={styles.VersionsList}>
+              <li>
+                <Version
+                  label="DevTools backend version:"
+                  version={backendVersion}
+                />
+              </li>
+              <li>
+                <Version
+                  label="DevTools frontend version:"
+                  version={frontendVersion}
+                />
+              </li>
+            </ul>
+          </div>
+        )}
+        {!showBackendVersion && (
+          <Version label="DevTools version:" version={frontendVersion} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Version({label, version}: {label: string, version: ?string}) {
+  const changelogLink = useMemo(() => {
+    return getChangeLogUrl(version);
+  }, [version]);
+
+  if (version == null) {
+    return null;
+  } else {
+    return (
+      <>
+        {label}{' '}
+        <a
+          className={styles.ReleaseNotesLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          href={changelogLink}>
+          {version}
+        </a>
+      </>
+    );
+  }
+}
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 00000000000..75bb97d902e
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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';
+import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+export default function ProfilerSettings(_: {}): React.Node {
+  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}: $FlowFixMe) => {
+      store.recordChangeDescriptions = currentTarget.checked;
+    },
+    [store],
+  );
+  const updateMinCommitDuration = useCallback(
+    (event: SyntheticEvent) => {
+      const newValue = parseFloat(event.currentTarget.value);
+      setMinCommitDuration(
+        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue,
+      );
+    },
+    [setMinCommitDuration],
+  );
+  const updateIsCommitFilterEnabled = useCallback(
+    (event: SyntheticEvent) => {
+      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.SettingList}>
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            type="checkbox"
+            checked={recordChangeDescriptions}
+            onChange={updateRecordChangeDescriptions}
+            className={styles.SettingRowCheckbox}
+          />
+          Record why each component rendered while profiling
+        </label>
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <label className={styles.SettingRow}>
+          <input
+            checked={isCommitFilterEnabled}
+            onChange={updateIsCommitFilterEnabled}
+            type="checkbox"
+            className={styles.SettingRowCheckbox}
+          />
+          Hide commits below
+          <input
+            className={styles.Input}
+            onChange={updateMinCommitDuration}
+            ref={minCommitDurationInputRef}
+            type="number"
+            value={minCommitDuration}
+          />
+          &nbsp;(ms)
+        </label>
+      </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 00000000000..c20249e8994
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
+import {
+  LOCAL_STORAGE_BROWSER_THEME,
+  LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
+  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+} from 'react-devtools-shared/src/constants';
+import {
+  COMFORTABLE_LINE_HEIGHT,
+  COMPACT_LINE_HEIGHT,
+} from 'react-devtools-shared/src/devtools/constants';
+import {useLocalStorage} from '../hooks';
+import {BridgeContext} from '../context';
+import {logEvent} from 'react-devtools-shared/src/Logger';
+
+import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
+
+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,
+
+  parseHookNames: boolean,
+  setParseHookNames: (value: boolean) => void,
+
+  theme: Theme,
+  setTheme(value: Theme): void,
+
+  browserTheme: Theme,
+
+  traceUpdatesEnabled: boolean,
+  setTraceUpdatesEnabled: (value: boolean) => void,
+};
+
+const SettingsContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+SettingsContext.displayName = 'SettingsContext';
+
+function useLocalStorageWithLog<T>(
+  key: string,
+  initialValue: T | (() => T),
+): [T, (value: T | (() => T)) => void] {
+  return useLocalStorage<T>(key, initialValue, (v, k) => {
+    logEvent({
+      event_name: 'settings-changed',
+      metadata: {
+        source: 'localStorage setter',
+        key: k,
+        value: v,
+      },
+    });
+  });
+}
+
+type DocumentElements = Array<HTMLElement>;
+
+type Props = {
+  browserTheme: BrowserTheme,
+  children: React$Node,
+  componentsPortalContainer?: Element,
+  profilerPortalContainer?: Element,
+  suspensePortalContainer?: Element,
+};
+
+function SettingsContextController({
+  browserTheme,
+  children,
+  componentsPortalContainer,
+  profilerPortalContainer,
+  suspensePortalContainer,
+}: Props): React.Node {
+  const bridge = useContext(BridgeContext);
+
+  const [displayDensity, setDisplayDensity] =
+    useLocalStorageWithLog<DisplayDensity>(
+      'React::DevTools::displayDensity',
+      'compact',
+    );
+  const [theme, setTheme] = useLocalStorageWithLog<Theme>(
+    LOCAL_STORAGE_BROWSER_THEME,
+    'auto',
+  );
+  const [parseHookNames, setParseHookNames] = useLocalStorageWithLog<boolean>(
+    LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
+    false,
+  );
+  const [traceUpdatesEnabled, setTraceUpdatesEnabled] =
+    useLocalStorageWithLog<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),
+      );
+    }
+    if (suspensePortalContainer != null) {
+      array.push(
+        ((suspensePortalContainer.ownerDocument
+          .documentElement: any): HTMLElement),
+      );
+    }
+    return array;
+  }, [
+    componentsPortalContainer,
+    profilerPortalContainer,
+    suspensePortalContainer,
+  ]);
+
+  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('setTraceUpdatesEnabled', traceUpdatesEnabled);
+  }, [bridge, traceUpdatesEnabled]);
+
+  const value: Context = useMemo(
+    () => ({
+      displayDensity,
+      lineHeight:
+        displayDensity === 'compact'
+          ? COMPACT_LINE_HEIGHT
+          : COMFORTABLE_LINE_HEIGHT,
+      parseHookNames,
+      setDisplayDensity,
+      setParseHookNames,
+      setTheme,
+      setTraceUpdatesEnabled,
+      theme,
+      browserTheme,
+      traceUpdatesEnabled,
+    }),
+    [
+      displayDensity,
+      parseHookNames,
+      setDisplayDensity,
+      setParseHookNames,
+      setTheme,
+      setTraceUpdatesEnabled,
+      theme,
+      browserTheme,
+      traceUpdatesEnabled,
+    ],
+  );
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export function updateDisplayDensity(
+  displayDensity: DisplayDensity,
+  documentElements: DocumentElements,
+): void {
+  // 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;
+}
+
+export function updateThemeVariables(
+  theme: Theme,
+  documentElements: DocumentElements,
+): void {
+  // 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[prop-missing] 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 00000000000..6566621ebbc
--- /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: 410px;
+  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;
+}
\ No newline at end of file
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 00000000000..023b342a0cb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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 DebuggingSettings from './DebuggingSettings';
+import GeneralSettings from './GeneralSettings';
+import ProfilerSettings from './ProfilerSettings';
+
+import styles from './SettingsModal.css';
+
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+type TabID = 'general' | 'debugging' | 'components' | 'profiler';
+
+export default function SettingsModal(): React.Node {
+  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.isProfilingBasedOnUserInput,
+      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 store={store} />;
+}
+
+type ImplProps = {store: Store};
+
+function SettingsModalImpl({store}: ImplProps) {
+  const {setIsModalShowing, environmentNames, hookSettings} =
+    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 'components':
+      view = <ComponentsSettings environmentNames={environmentNames} />;
+      break;
+    case 'debugging':
+      view = <DebuggingSettings hookSettings={hookSettings} store={store} />;
+      break;
+    case 'general':
+      view = <GeneralSettings />;
+      break;
+    case 'profiler':
+      view = <ProfilerSettings />;
+      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: 'debugging',
+    icon: 'bug',
+    label: 'Debugging',
+  },
+  {
+    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 00000000000..f8f76053fc1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useState,
+  startTransition,
+} from 'react';
+
+import {BridgeContext, StoreContext} from '../context';
+
+import type {FrontendBridge} from '../../../bridge';
+import type {DevToolsHookSettings} from '../../../backend/types';
+import type Store from '../../store';
+
+export type Theme = 'auto' | 'light' | 'dark';
+
+type Context = {
+  isModalShowing: boolean,
+  setIsModalShowing: (value: boolean) => void,
+  environmentNames: null | Promise<Array<string>>,
+  hookSettings: null | Promise<$ReadOnly<DevToolsHookSettings>>,
+};
+
+const SettingsModalContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+SettingsModalContext.displayName = 'SettingsModalContext';
+
+function fetchEnvironmentNames(bridge: FrontendBridge): Promise<Array<string>> {
+  return new Promise(resolve => {
+    function onEnvironmentNames(names: Array<string>) {
+      bridge.removeListener('environmentNames', onEnvironmentNames);
+      resolve(names);
+    }
+    bridge.addListener('environmentNames', onEnvironmentNames);
+    bridge.send('getEnvironmentNames');
+  });
+}
+
+function fetchHookSettings(
+  store: Store,
+): Promise<$ReadOnly<DevToolsHookSettings>> {
+  return new Promise(resolve => {
+    function onHookSettings(settings: $ReadOnly<DevToolsHookSettings>) {
+      store.removeListener('hookSettings', onHookSettings);
+      resolve(settings);
+    }
+
+    store.addListener('hookSettings', onHookSettings);
+    store.getHookSettings();
+  });
+}
+
+function SettingsModalContextController({
+  children,
+}: {
+  children: React$Node,
+}): React.Node {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const setIsModalShowing: boolean => void = useCallback(
+    (value: boolean) => {
+      startTransition(() => {
+        setContext({
+          isModalShowing: value,
+          setIsModalShowing,
+          environmentNames: value ? fetchEnvironmentNames(bridge) : null,
+          hookSettings: value ? fetchHookSettings(store) : null,
+        });
+      });
+    },
+    [bridge, store],
+  );
+
+  const [currentContext, setContext] = useState<Context>({
+    isModalShowing: false,
+    setIsModalShowing,
+    environmentNames: null,
+    hookSettings: null,
+  });
+
+  return (
+    <SettingsModalContext.Provider value={currentContext}>
+      {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 00000000000..94fa5c41118
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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(): React.Node {
+  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.isProfilingBasedOnUserInput,
+      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 00000000000..71c53327888
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -0,0 +1,169 @@
+.SettingList {
+  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);
+}
+
+.SettingWrapper {
+  margin-bottom: 0.5rem;
+}
+.SettingWrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.SettingRow {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.SettingRowCheckbox {
+  margin: 0.125rem 0.25rem 0.125rem 0;
+}
+
+.SettingDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.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;
+}
+
+.Spacer {
+  height: 0.5rem;
+}
+
+.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;
+  margin-left: .5rem;
+}
+
+.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, .StrictModeLink {
+  color: var(--color-button-active);
+}
+
+.Warning {
+  color: var(--color-error-text);
+}
+
+.VersionsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.css
new file mode 100644
index 00000000000..4781f6899b8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.css
@@ -0,0 +1,58 @@
+.ActivityListContaier {
+  display: flex;
+  flex-direction: column;
+}
+
+.ActivityListHeader {
+  /* even if empty, provides layout alignment with the main view */
+  display: flex;
+  flex: 0 0 42px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ActivityListList {
+  cursor: default;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ActivityListList[data-pending-activity-slice-selection="true"] {
+  cursor: wait;
+}
+
+.ActivityListList:focus {
+  outline: none;
+}
+
+.ActivityListItem {
+  color: var(--color-component-name);
+  line-height: var(--line-height-data);
+  padding: 0 0.25rem;
+  user-select: none;
+}
+
+.ActivityListItem:hover {
+  background-color: var(--color-background-hover);
+}
+
+.ActivityListItem[aria-selected="true"] {
+  background-color: var(--color-background-inactive);
+}
+
+.ActivityListList:focus .ActivityListItem[aria-selected="true"] {
+  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-forget-badge-background: var(--color-forget-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);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js
new file mode 100644
index 00000000000..acef66d3eda
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js
@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Element,
+  ActivitySliceFilter,
+  ComponentFilter,
+} from 'react-devtools-shared/src/frontend/types';
+import typeof {
+  SyntheticMouseEvent,
+  SyntheticKeyboardEvent,
+} from 'react-dom-bindings/src/events/SyntheticEvent';
+import type Store from 'react-devtools-shared/src/devtools/store';
+
+import * as React from 'react';
+import {useContext, useMemo, useTransition} from 'react';
+import {
+  ComponentFilterActivitySlice,
+  ElementTypeActivity,
+} from 'react-devtools-shared/src/frontend/types';
+import styles from './ActivityList.css';
+import {
+  TreeStateContext,
+  TreeDispatcherContext,
+} from '../Components/TreeContext';
+import {useHighlightHostInstance} from '../hooks';
+import {StoreContext} from '../context';
+
+export function useChangeActivitySliceAction(): (
+  id: Element['id'] | null,
+) => void {
+  const store = useContext(StoreContext);
+
+  function changeActivitySliceAction(activityID: Element['id'] | null) {
+    const nextFilters: ComponentFilter[] = [];
+    // Remove any existing activity slice filter
+    for (let i = 0; i < store.componentFilters.length; i++) {
+      const filter = store.componentFilters[i];
+      if (filter.type !== ComponentFilterActivitySlice) {
+        nextFilters.push(filter);
+      }
+    }
+
+    if (activityID !== null) {
+      const rendererID = store.getRendererIDForElement(activityID);
+      if (rendererID === null) {
+        throw new Error('Expected to find renderer.');
+      }
+      const activityFilter: ActivitySliceFilter = {
+        type: ComponentFilterActivitySlice,
+        activityID,
+        rendererID,
+        isValid: true,
+        isEnabled: true,
+      };
+      nextFilters.push(activityFilter);
+    }
+    store.componentFilters = nextFilters;
+  }
+
+  return changeActivitySliceAction;
+}
+
+function findNearestActivityParentID(
+  elementID: Element['id'],
+  store: Store,
+): Element['id'] | null {
+  let currentID: null | Element['id'] = elementID;
+  while (currentID !== null) {
+    const element = store.getElementByID(currentID);
+    if (element === null) {
+      return null;
+    }
+    if (element.type === ElementTypeActivity) {
+      return element.id;
+    }
+    currentID = element.parentID;
+  }
+
+  return currentID;
+}
+
+function useSelectedActivityID(): Element['id'] | null {
+  const {inspectedElementID} = useContext(TreeStateContext);
+  const store = useContext(StoreContext);
+  return useMemo(() => {
+    if (inspectedElementID === null) {
+      return null;
+    }
+    const nearestActivityID = findNearestActivityParentID(
+      inspectedElementID,
+      store,
+    );
+    return nearestActivityID;
+  }, [inspectedElementID, store]);
+}
+
+export default function ActivityList({
+  activities,
+}: {
+  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
+}): React$Node {
+  const {activityID, inspectedElementID} = useContext(TreeStateContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const store = useContext(StoreContext);
+  const selectedActivityID = useSelectedActivityID();
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+
+  const [isPendingActivitySliceSelection, startActivitySliceSelection] =
+    useTransition();
+  const changeActivitySliceAction = useChangeActivitySliceAction();
+
+  const includeAllOption = activityID !== null;
+
+  function handleKeyDown(event: SyntheticKeyboardEvent) {
+    switch (event.key) {
+      case 'Escape':
+        startActivitySliceSelection(() => {
+          changeActivitySliceAction(null);
+        });
+        event.preventDefault();
+        break;
+      case 'Enter':
+      case ' ':
+        startActivitySliceSelection(() => {
+          changeActivitySliceAction(inspectedElementID);
+        });
+        event.preventDefault();
+        break;
+      case 'Home':
+        treeDispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: includeAllOption ? null : activities[0].id,
+        });
+        event.preventDefault();
+        break;
+      case 'End':
+        treeDispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: activities[activities.length - 1].id,
+        });
+        event.preventDefault();
+        break;
+      case 'ArrowUp': {
+        const currentIndex = activities.findIndex(
+          activity => activity.id === selectedActivityID,
+        );
+        let nextIndex: number;
+        if (currentIndex === -1) {
+          // Currently selecting "All", wrap around to last Activity.
+          nextIndex = activities.length - 1;
+        } else {
+          nextIndex = currentIndex - 1;
+          if (!includeAllOption) {
+            nextIndex = (nextIndex + activities.length) % activities.length;
+          }
+        }
+
+        treeDispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: nextIndex === -1 ? null : activities[nextIndex].id,
+        });
+        event.preventDefault();
+        break;
+      }
+      case 'ArrowDown': {
+        const currentIndex = activities.findIndex(
+          activity => activity.id === selectedActivityID,
+        );
+        let nextIndex: number;
+        if (includeAllOption && currentIndex === activities.length - 1) {
+          // Currently selecting last Activity, wrap around to "All".
+          nextIndex = -1;
+        } else {
+          nextIndex = (currentIndex + 1) % activities.length;
+        }
+        treeDispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: nextIndex === -1 ? null : activities[nextIndex].id,
+        });
+        event.preventDefault();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  function handleClick(id: Element['id'] | null, event: SyntheticMouseEvent) {
+    event.preventDefault();
+    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+  }
+
+  function handleDoubleClick() {
+    if (inspectedElementID !== null) {
+      changeActivitySliceAction(inspectedElementID);
+    }
+  }
+
+  return (
+    <div className={styles.ActivityListContaier}>
+      <div className={styles.ActivityListHeader} />
+      <ol
+        role="listbox"
+        className={styles.ActivityListList}
+        data-pending-activity-slice-selection={isPendingActivitySliceSelection}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}>
+        {includeAllOption && (
+          // TODO: Obsolete once filtered Activities are included in this list.
+          <li
+            role="option"
+            aria-selected={null === selectedActivityID ? 'true' : 'false'}
+            className={styles.ActivityListItem}
+            onClick={handleClick.bind(null, null)}
+            onDoubleClick={handleDoubleClick}>
+            All
+          </li>
+        )}
+        {activities.map(({id, depth}) => {
+          const activity = store.getElementByID(id);
+          if (activity === null) {
+            return null;
+          }
+          const name = activity.nameProp;
+          if (name === null) {
+            // This shouldn't actually happen. We only want to show activities with a name.
+            // And hide the whole list if no named Activities are present.
+            return null;
+          }
+
+          // TODO: Filtered Activities should have dedicated styles once we include
+          // filtered Activities in this list.
+          return (
+            <li
+              key={activity.id}
+              role="option"
+              aria-selected={
+                activity.id === selectedActivityID ? 'true' : 'false'
+              }
+              className={styles.ActivityListItem}
+              onClick={handleClick.bind(null, activity.id)}
+              onDoubleClick={handleDoubleClick}
+              onPointerOver={highlightHostInstance.bind(
+                null,
+                activity.id,
+                false,
+              )}
+              onPointerLeave={clearHighlightHostInstance}>
+              {'\u00A0'.repeat(depth + (includeAllOption ? 1 : 0)) + name}
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
new file mode 100644
index 00000000000..1e1544b477c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
@@ -0,0 +1,36 @@
+.SuspenseBreadcrumbsList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.SuspenseBreadcrumbsListItem {
+  display: inline;
+}
+
+.SuspenseBreadcrumbsListItem[aria-current="true"] .SuspenseBreadcrumbsButton {
+  color: var(--color-button-active);
+}
+
+.SuspenseBreadcrumbsButton {
+  background: var(--color-button-background);
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--color-button);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  padding: 0.25rem;
+  white-space: nowrap;
+}
+
+.SuspenseBreadcrumbsButton:hover {
+  background-color: var(--color-button-background-hover);
+  color: var(--color-button-hover);
+}
+
+.SuspenseBreadcrumbsButton:focus-visible {
+  background: var(--color-button-background-focus);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
new file mode 100644
index 00000000000..2ad235d5777
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SuspenseNode} from 'react-devtools-shared/src/frontend/types';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from '../Components/TreeContext';
+import {StoreContext} from '../context';
+import {useHighlightHostInstance} from '../hooks';
+import styles from './SuspenseBreadcrumbs.css';
+import {
+  SuspenseTreeStateContext,
+  SuspenseTreeDispatcherContext,
+} from './SuspenseTreeContext';
+
+export default function SuspenseBreadcrumbs(): React$Node {
+  const store = useContext(StoreContext);
+  const {activityID} = useContext(TreeStateContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+  const {selectedSuspenseID, lineage, roots} = useContext(
+    SuspenseTreeStateContext,
+  );
+
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+
+  function handleClick(id: SuspenseNode['id'], event: SyntheticMouseEvent) {
+    event.preventDefault();
+    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+    suspenseTreeDispatch({type: 'SELECT_SUSPENSE_BY_ID', payload: id});
+  }
+
+  return (
+    <ol className={styles.SuspenseBreadcrumbsList}>
+      {lineage === null ? null : lineage.length === 0 ? (
+        // We selected the root. This means that we're currently viewing the Transition
+        // that rendered the whole screen. In laymans terms this is really "Initial Paint" .
+        // When we're looking at a subtree selection, then the equivalent is a
+        // "Transition" since in that case it's really about a Transition within the page.
+        roots.length > 0 ? (
+          <li
+            className={styles.SuspenseBreadcrumbsListItem}
+            aria-current="true">
+            <button
+              className={styles.SuspenseBreadcrumbsButton}
+              onClick={handleClick.bind(
+                null,
+                activityID === null ? roots[0] : activityID,
+              )}
+              type="button">
+              {activityID === null ? 'Initial Paint' : 'Transition'}
+            </button>
+          </li>
+        ) : null
+      ) : (
+        lineage.map((id, index) => {
+          const node = store.getSuspenseByID(id);
+
+          return (
+            <li
+              key={id}
+              className={styles.SuspenseBreadcrumbsListItem}
+              aria-current={selectedSuspenseID === id}
+              onPointerEnter={highlightHostInstance.bind(null, id, false)}
+              onPointerLeave={clearHighlightHostInstance}>
+              <button
+                className={styles.SuspenseBreadcrumbsButton}
+                onClick={handleClick.bind(null, id)}
+                type="button">
+                {node === null ? 'Unknown' : node.name || 'Unknown'}
+              </button>
+            </li>
+          );
+        })
+      )}
+    </ol>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css
new file mode 100644
index 00000000000..a56bc80ee9b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css
@@ -0,0 +1,14 @@
+.SuspenseEnvironmentDefault {
+  --color-suspense: var(--color-suspense-default);
+  --color-transition: var(--color-transition-default);
+}
+
+.SuspenseEnvironmentServer {
+  --color-suspense: var(--color-suspense-server);
+  --color-transition: var(--color-transition-server);
+}
+
+.SuspenseEnvironmentOther {
+  --color-suspense: var(--color-suspense-other);
+  --color-transition: var(--color-transition-other);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js
new file mode 100644
index 00000000000..579a9093acb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 styles from './SuspenseEnvironmentColors.css';
+
+export function getClassNameForEnvironment(environment: null | string): string {
+  if (environment === null) {
+    return styles.SuspenseEnvironmentDefault;
+  }
+  if (environment === 'Server') {
+    return styles.SuspenseEnvironmentServer;
+  }
+  return styles.SuspenseEnvironmentOther;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
new file mode 100644
index 00000000000..6b43f873ae8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
@@ -0,0 +1,110 @@
+.SuspenseRectsContainer {
+  padding: .25rem;
+  outline-color: transparent;
+  outline-style: solid;
+  outline-width: 1px;
+  border-radius: 0.25rem;
+}
+
+.SuspenseRectsRoot {
+  cursor: pointer;
+  outline-color: var(--color-transition);
+  background-color: color-mix(in srgb, var(--color-transition) 5%, transparent);
+}
+
+.SuspenseRectsRootOutline {
+  outline-width: 4px;
+  border-radius: 0.125rem;
+}
+
+.SuspenseRectsRoot[data-hovered='true'] {
+  background-color: color-mix(in srgb, var(--color-transition) 15%, transparent);
+}
+
+.SuspenseRectsViewBox {
+  position: relative;
+}
+
+.SuspenseRectsBoundary {
+  pointer-events: all;
+  border-radius: 0.125rem;
+}
+
+.SuspenseRectsBoundary[data-visible='false'] {
+  background-color: transparent;
+}
+
+.SuspenseRectsBoundaryChildren {
+  pointer-events: none;
+}
+
+.SuspenseRectsTitle {
+  pointer-events: none;
+  color: color-mix(in srgb, var(--color-suspense) 50%, var(--color-text));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-small);
+  line-height: var(--line-height-data);
+  padding: 0 .25rem;
+  container-type: size;
+  container-name: title;
+}
+
+@container title (width < 30px) or (height < 18px) {
+  .SuspenseRectsTitle > span {
+    display: none;
+  }
+}
+
+.SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren {
+  overflow: initial;
+}
+
+.SuspenseRectsRect {
+  box-shadow: var(--elevation-4);
+  pointer-events: all;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 25%);
+  backdrop-filter: grayscale(100%);
+  transition: background-color 0.2s ease-in;
+  outline-color: var(--color-suspense);
+  outline-style: solid;
+  outline-width: 1px;
+}
+
+.SuspenseRectsScaledRect {
+  position: absolute;
+}
+
+.SuspenseRectsScaledRect[data-visible='false'] {
+  pointer-events: none;
+  outline-width: 0;
+}
+
+.SuspenseRectsBoundary[data-suspended='true'] {
+  opacity: 0.33;
+}
+
+/* highlight this boundary */
+.SuspenseRectsBoundary[data-hovered='true'] > .SuspenseRectsRect {
+  background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%);
+  transition: background-color 0.2s ease-out;
+}
+
+.SuspenseRectsBoundary[data-selected='true'][data-visible='true'] {
+  box-shadow: var(--elevation-4);
+}
+
+.SuspenseRectOutline {
+  outline-color: var(--color-suspense);
+  outline-style: solid;
+  outline-width: 4px;
+  border-radius: 0.125rem;
+  pointer-events: none;
+}
+
+.SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect {
+   box-shadow: none;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
new file mode 100644
index 00000000000..69d4767a489
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
@@ -0,0 +1,620 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+import type {
+  Element,
+  SuspenseNode,
+  Rect,
+} from 'react-devtools-shared/src/frontend/types';
+import typeof {
+  SyntheticMouseEvent,
+  SyntheticPointerEvent,
+} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+import * as React from 'react';
+import {createContext, useContext, useLayoutEffect, useMemo} from 'react';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from '../Components/TreeContext';
+import {StoreContext} from '../context';
+import {useHighlightHostInstance} from '../hooks';
+import styles from './SuspenseRects.css';
+import {
+  SuspenseTreeStateContext,
+  SuspenseTreeDispatcherContext,
+} from './SuspenseTreeContext';
+import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
+import type RBush from 'rbush';
+
+function ScaledRect({
+  className,
+  rect,
+  visible,
+  suspended,
+  selected,
+  hovered,
+  adjust,
+  ...props
+}: {
+  className: string,
+  rect: Rect,
+  visible: boolean,
+  suspended: boolean,
+  selected?: boolean,
+  hovered?: boolean,
+  adjust?: boolean,
+  ...
+}): React$Node {
+  const viewBox = useContext(ViewBox);
+  const width = (rect.width / viewBox.width) * 100 + '%';
+  const height = (rect.height / viewBox.height) * 100 + '%';
+  const x = ((rect.x - viewBox.x) / viewBox.width) * 100 + '%';
+  const y = ((rect.y - viewBox.y) / viewBox.height) * 100 + '%';
+
+  return (
+    <div
+      {...props}
+      className={styles.SuspenseRectsScaledRect + ' ' + className}
+      data-visible={visible}
+      data-suspended={suspended}
+      data-selected={selected}
+      data-hovered={hovered}
+      style={{
+        // Shrink one pixel so that the bottom outline will line up with the top outline of the next one.
+        width: adjust ? 'calc(' + width + ' - 1px)' : width,
+        height: adjust ? 'calc(' + height + ' - 1px)' : height,
+        top: y,
+        left: x,
+      }}
+    />
+  );
+}
+
+function SuspenseRects({
+  suspenseID,
+  parentRects,
+}: {
+  suspenseID: SuspenseNode['id'],
+  parentRects: null | Array<Rect>,
+}): React$Node {
+  const store = useContext(StoreContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+  const {uniqueSuspendersOnly, timeline, hoveredTimelineIndex} = useContext(
+    SuspenseTreeStateContext,
+  );
+
+  const {inspectedElementID} = useContext(TreeStateContext);
+
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
+
+  const suspense = store.getSuspenseByID(suspenseID);
+  if (suspense === null) {
+    // getSuspenseByID will have already warned
+    return null;
+  }
+  const visible = suspense.hasUniqueSuspenders || !uniqueSuspendersOnly;
+
+  function handleClick(event: SyntheticMouseEvent) {
+    if (event.defaultPrevented) {
+      // Already clicked on an inner rect
+      return;
+    }
+    event.preventDefault();
+    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: suspenseID});
+    suspenseTreeDispatch({
+      type: 'SET_SUSPENSE_LINEAGE',
+      payload: suspenseID,
+    });
+  }
+
+  function handleDoubleClick(event: SyntheticMouseEvent) {
+    if (event.defaultPrevented) {
+      // Already clicked on an inner rect
+      return;
+    }
+    event.preventDefault();
+    suspenseTreeDispatch({
+      type: 'TOGGLE_TIMELINE_FOR_ID',
+      payload: suspenseID,
+    });
+  }
+
+  function handlePointerOver(event: SyntheticPointerEvent) {
+    if (event.defaultPrevented) {
+      // Already hovered an inner rect
+      return;
+    }
+    event.preventDefault();
+    highlightHostInstance(suspenseID);
+    suspenseTreeDispatch({
+      type: 'HOVER_TIMELINE_FOR_ID',
+      payload: suspenseID,
+    });
+  }
+
+  function handlePointerLeave(event: SyntheticPointerEvent) {
+    if (event.defaultPrevented) {
+      // Already hovered an inner rect
+      return;
+    }
+    event.preventDefault();
+    clearHighlightHostInstance();
+    suspenseTreeDispatch({
+      type: 'HOVER_TIMELINE_FOR_ID',
+      payload: -1,
+    });
+  }
+
+  // TODO: Use the nearest Suspense boundary
+  const selected = inspectedElementID === suspenseID;
+
+  const hovered =
+    hoveredTimelineIndex > -1 &&
+    timeline[hoveredTimelineIndex].id === suspenseID;
+
+  let environment: null | string = null;
+  for (let i = 0; i < timeline.length; i++) {
+    const timelineStep = timeline[i];
+    if (timelineStep.id === suspenseID) {
+      environment = timelineStep.environment;
+      break;
+    }
+  }
+
+  const rects = suspense.rects;
+  const boundingBox = getBoundingBox(rects);
+
+  // Next we'll try to find a rect within one of our rects that isn't intersecting with
+  // other rects.
+  // TODO: This should probably be memoized based on if any changes to the rtree has been made.
+  const titleBox: null | Rect =
+    rects === null ? null : findTitleBox(store._rtree, rects, parentRects);
+  const nextRects =
+    rects === null || rects.length === 0
+      ? parentRects
+      : parentRects === null || parentRects.length === 0
+        ? rects
+        : parentRects.concat(rects);
+
+  return (
+    <ScaledRect
+      rect={boundingBox}
+      className={
+        styles.SuspenseRectsBoundary +
+        ' ' +
+        getClassNameForEnvironment(environment)
+      }
+      visible={visible}
+      selected={selected}
+      suspended={suspense.isSuspended}
+      hovered={hovered}>
+      <ViewBox.Provider value={boundingBox}>
+        {visible &&
+          suspense.rects !== null &&
+          suspense.rects.map((rect, index) => {
+            return (
+              <ScaledRect
+                key={index}
+                className={styles.SuspenseRectsRect}
+                rect={rect}
+                adjust={true}
+                onClick={handleClick}
+                onDoubleClick={handleDoubleClick}
+                onPointerOver={handlePointerOver}
+                onPointerLeave={handlePointerLeave}
+                // Reach-UI tooltip will go out of bounds of parent scroll container.
+                title={suspense.name || 'Unknown'}
+              />
+            );
+          })}
+        {suspense.children.length > 0 && (
+          <ScaledRect
+            className={styles.SuspenseRectsBoundaryChildren}
+            rect={boundingBox}>
+            {suspense.children.map(childID => {
+              return (
+                <SuspenseRects
+                  key={childID}
+                  suspenseID={childID}
+                  parentRects={nextRects}
+                />
+              );
+            })}
+          </ScaledRect>
+        )}
+        {titleBox && suspense.name && visible ? (
+          <ScaledRect className={styles.SuspenseRectsTitle} rect={titleBox}>
+            <span>{suspense.name}</span>
+          </ScaledRect>
+        ) : null}
+      </ViewBox.Provider>
+    </ScaledRect>
+  );
+}
+
+function getBoundingBox(rects: $ReadOnlyArray<Rect> | null): Rect {
+  if (rects === null || rects.length === 0) {
+    return {x: 0, y: 0, width: 0, height: 0};
+  }
+
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+function computeBoundingRectRecursively(
+  store: Store,
+  node: SuspenseNode,
+  bounds: {
+    minX: number,
+    minY: number,
+    maxX: number,
+    maxY: number,
+  },
+): void {
+  const rects = node.rects;
+  if (rects !== null) {
+    for (let j = 0; j < rects.length; j++) {
+      const rect = rects[j];
+      if (rect.x < bounds.minX) {
+        bounds.minX = rect.x;
+      }
+      if (rect.x + rect.width > bounds.maxX) {
+        bounds.maxX = rect.x + rect.width;
+      }
+      if (rect.y < bounds.minY) {
+        bounds.minY = rect.y;
+      }
+      if (rect.y + rect.height > bounds.maxY) {
+        bounds.maxY = rect.y + rect.height;
+      }
+    }
+  }
+  for (let i = 0; i < node.children.length; i++) {
+    const child = store.getSuspenseByID(node.children[i]);
+    if (child !== null) {
+      computeBoundingRectRecursively(store, child, bounds);
+    }
+  }
+}
+
+function getDocumentBoundingRect(
+  store: Store,
+  roots: $ReadOnlyArray<SuspenseNode['id']>,
+): Rect {
+  if (roots.length === 0) {
+    return {x: 0, y: 0, width: 0, height: 0};
+  }
+
+  const bounds = {
+    minX: Number.POSITIVE_INFINITY,
+    minY: Number.POSITIVE_INFINITY,
+    maxX: Number.NEGATIVE_INFINITY,
+    maxY: Number.NEGATIVE_INFINITY,
+  };
+
+  for (let i = 0; i < roots.length; i++) {
+    const rootID = roots[i];
+    const root = store.getSuspenseByID(rootID);
+    if (root === null) {
+      continue;
+    }
+    computeBoundingRectRecursively(store, root, bounds);
+  }
+
+  if (bounds.minX === Number.POSITIVE_INFINITY) {
+    // No rects found, return empty rect
+    return {x: 0, y: 0, width: 0, height: 0};
+  }
+
+  return {
+    x: bounds.minX,
+    y: bounds.minY,
+    width: bounds.maxX - bounds.minX,
+    height: bounds.maxY - bounds.minY,
+  };
+}
+
+function findTitleBox(
+  rtree: RBush<Rect>,
+  rects: Array<Rect>,
+  parentRects: null | Array<Rect>,
+): null | Rect {
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    if (rect.width < 20 || rect.height < 10) {
+      // Skip small rects. They're likely not able to be contain anything useful anyway.
+      continue;
+    }
+    // Find all overlapping rects elsewhere in the tree to limit our rect.
+    const overlappingRects = rtree.search({
+      minX: rect.x,
+      minY: rect.y,
+      maxX: rect.x + rect.width,
+      maxY: rect.y + rect.height,
+    });
+    if (
+      overlappingRects.length === 0 ||
+      (overlappingRects.length === 1 && overlappingRects[0] === rect)
+    ) {
+      // There are no overlapping rects that isn't our own rect, so we can just use
+      // the full space of the rect.
+      return rect;
+    }
+    // We have some overlapping rects but they might not overlap everything. Let's
+    // shrink it up toward the top left corner until it has no more overlap.
+    const minX = rect.x;
+    const minY = rect.y;
+    let maxX = rect.x + rect.width;
+    let maxY = rect.y + rect.height;
+    for (let j = 0; j < overlappingRects.length; j++) {
+      const overlappingRect = overlappingRects[j];
+      if (overlappingRect === rect) {
+        continue;
+      }
+      const x = overlappingRect.x;
+      const y = overlappingRect.y;
+      if (y < maxY && x < maxX) {
+        if (
+          parentRects !== null &&
+          parentRects.indexOf(overlappingRect) !== -1
+        ) {
+          // This rect overlaps but it's part of a parent boundary. We let
+          // title content render if it's on top and not a sibling.
+          continue;
+        }
+        // This rect cuts into the remaining space. Let's figure out if we're
+        // better off cutting on the x or y axis to maximize remaining space.
+        const remainderX = x - minX;
+        const remainderY = y - minY;
+        if (remainderX > remainderY) {
+          maxX = x;
+        } else {
+          maxY = y;
+        }
+      }
+    }
+    if (maxX > minX && maxY > minY) {
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+      };
+    }
+  }
+  return null;
+}
+
+function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node {
+  const store = useContext(StoreContext);
+  const root = store.getSuspenseByID(rootID);
+  if (root === null) {
+    // getSuspenseByID will have already warned
+    return null;
+  }
+
+  return root.children.map(childID => {
+    return (
+      <SuspenseRects key={childID} suspenseID={childID} parentRects={null} />
+    );
+  });
+}
+
+function SuspenseRectsInitialPaint(): React$Node {
+  const {roots} = useContext(SuspenseTreeStateContext);
+  return roots.map(rootID => {
+    return <SuspenseRectsRoot key={rootID} rootID={rootID} />;
+  });
+}
+
+function SuspenseRectsTransition({id}: {id: Element['id']}): React$Node {
+  const store = useContext(StoreContext);
+  const children = useMemo(() => {
+    return store.getSuspenseChildren(id);
+  }, [id, store]);
+
+  return children.map(suspenseID => {
+    return (
+      <SuspenseRects
+        key={suspenseID}
+        suspenseID={suspenseID}
+        parentRects={null}
+      />
+    );
+  });
+}
+
+const ViewBox = createContext<Rect>((null: any));
+
+function SuspenseRectsContainer({
+  scaleRef,
+}: {
+  scaleRef: {current: number},
+}): React$Node {
+  const store = useContext(StoreContext);
+  const {activityID, inspectedElementID} = useContext(TreeStateContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+  // TODO: This relies on a full re-render of all children when the Suspense tree changes.
+  const {roots, timeline, hoveredTimelineIndex, uniqueSuspendersOnly} =
+    useContext(SuspenseTreeStateContext);
+
+  const activityChildren: $ReadOnlyArray<SuspenseNode['id']> | null =
+    useMemo(() => {
+      if (activityID === null) {
+        return null;
+      }
+      return store.getSuspenseChildren(activityID);
+    }, [activityID, store]);
+  const transitionChildren =
+    activityChildren === null ? roots : activityChildren;
+
+  // We're using the bounding box of the entire document to anchor the Transition
+  // in the actual document.
+  const boundingBox = getDocumentBoundingRect(store, roots);
+
+  const boundingBoxWidth = boundingBox.width;
+  const heightScale =
+    boundingBoxWidth === 0 ? 1 : boundingBox.height / boundingBoxWidth;
+  // Scales the inspected document to fit into the available width
+  const width = '100%';
+  const aspectRatio = `1 / ${heightScale}`;
+
+  function handleClick(event: SyntheticMouseEvent) {
+    if (event.defaultPrevented) {
+      // Already clicked on an inner rect
+      return;
+    }
+    if (transitionChildren.length === 0) {
+      // Nothing to select
+      return;
+    }
+    const arbitraryRootID = roots[0];
+    const transitionRoot = activityID === null ? arbitraryRootID : activityID;
+
+    event.preventDefault();
+    treeDispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: transitionRoot,
+    });
+    suspenseTreeDispatch({
+      type: 'SET_SUSPENSE_LINEAGE',
+      payload: arbitraryRootID,
+    });
+  }
+
+  function handleDoubleClick(event: SyntheticMouseEvent) {
+    if (event.defaultPrevented) {
+      // Already clicked on an inner rect
+      return;
+    }
+    event.preventDefault();
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_SET_TIMELINE_INDEX',
+      payload: 0,
+    });
+  }
+
+  const isRootSelected = roots.includes(inspectedElementID);
+  // When we're focusing a Transition, the first timeline step will not be a root.
+  const isRootHovered = activityID === null && hoveredTimelineIndex === 0;
+
+  let hasRootSuspenders = false;
+  if (!uniqueSuspendersOnly) {
+    hasRootSuspenders = true;
+  } else {
+    for (let i = 0; i < roots.length; i++) {
+      const rootID = roots[i];
+      const root = store.getSuspenseByID(rootID);
+      if (root !== null && root.hasUniqueSuspenders) {
+        hasRootSuspenders = true;
+        break;
+      }
+    }
+  }
+
+  const rootEnvironment =
+    timeline.length === 0 ? null : timeline[0].environment;
+
+  useLayoutEffect(() => {
+    // 100% of the width represents this many pixels in the real document.
+    scaleRef.current = boundingBoxWidth;
+  }, [boundingBoxWidth]);
+
+  let selectedBoundingBox = null;
+  let selectedEnvironment = null;
+  if (isRootSelected) {
+    selectedEnvironment = rootEnvironment;
+  } else if (
+    inspectedElementID !== null &&
+    // TODO: Separate inspected element and inspected Suspense and use the inspected Suspense ID here.
+    store.containsSuspense(inspectedElementID)
+  ) {
+    const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID);
+    if (
+      selectedSuspenseNode !== null &&
+      (selectedSuspenseNode.hasUniqueSuspenders || !uniqueSuspendersOnly)
+    ) {
+      selectedBoundingBox = getBoundingBox(selectedSuspenseNode.rects);
+      for (let i = 0; i < timeline.length; i++) {
+        const timelineStep = timeline[i];
+        if (timelineStep.id === inspectedElementID) {
+          selectedEnvironment = timelineStep.environment;
+          break;
+        }
+      }
+    }
+  }
+
+  return (
+    <div
+      className={
+        styles.SuspenseRectsContainer +
+        (hasRootSuspenders &&
+        // We don't want to draw attention to the root if we're looking at a Transition.
+        // TODO: Draw bounding rect of Transition and check if the Transition
+        // has unique suspenders.
+        activityID === null
+          ? ' ' + styles.SuspenseRectsRoot
+          : '') +
+        (isRootSelected ? ' ' + styles.SuspenseRectsRootOutline : '') +
+        ' ' +
+        getClassNameForEnvironment(rootEnvironment)
+      }
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      data-hovered={isRootHovered}>
+      <ViewBox.Provider value={boundingBox}>
+        <div
+          className={styles.SuspenseRectsViewBox}
+          style={{aspectRatio, width}}>
+          {activityID === null ? (
+            <SuspenseRectsInitialPaint />
+          ) : (
+            <SuspenseRectsTransition id={activityID} />
+          )}
+          {selectedBoundingBox !== null ? (
+            <ScaledRect
+              className={
+                styles.SuspenseRectOutline +
+                ' ' +
+                getClassNameForEnvironment(selectedEnvironment)
+              }
+              rect={selectedBoundingBox}
+              adjust={true}
+            />
+          ) : null}
+        </div>
+      </ViewBox.Provider>
+    </div>
+  );
+}
+
+export default SuspenseRectsContainer;
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css
new file mode 100644
index 00000000000..7ccb92b78bb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css
@@ -0,0 +1,60 @@
+.SuspenseScrubber {
+  position: relative;
+  width: 100%;
+  height: 1.5rem;
+  border-radius: 0.75rem;
+  padding: 0.25rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.SuspenseScrubber:has(.SuspenseScrubberInput:focus-visible) {
+  outline: 2px solid var(--color-button-background-focus);
+}
+
+.SuspenseScrubberInput {
+  position: absolute;
+  width: 100%;
+  opacity: 0;
+  height: 0px;
+  overflow: hidden;
+}
+
+.SuspenseScrubberInput:focus {
+  outline: none;
+}
+
+.SuspenseScrubberStep {
+  cursor: pointer;
+  flex: 1;
+  height: 100%;
+  padding-right: 1px; /* we use this instead of flex gap to make every pixel clickable */
+  display: flex;
+  align-items: center;
+}
+.SuspenseScrubberStep:last-child {
+  padding-right: 0;
+}
+
+.SuspenseScrubberBead {
+  flex: 1;
+  height: 0.5rem;
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--color-suspense) 10%, transparent);
+  transition: all 0.3s ease-in;
+}
+
+.SuspenseScrubberBeadSelected {
+  height: 1rem;
+  background: var(--color-suspense);
+}
+
+.SuspenseScrubberBeadTransition {
+  background: var(--color-transition);
+}
+
+.SuspenseScrubberStepHighlight > .SuspenseScrubberBead {
+  height: 0.75rem;
+  transition: all 0.3s ease-out;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js
new file mode 100644
index 00000000000..f8c0224c0bc
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SuspenseTimelineStep} from 'react-devtools-shared/src/frontend/types';
+
+import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+
+import * as React from 'react';
+import {useContext, useRef} from 'react';
+import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';
+
+import styles from './SuspenseScrubber.css';
+
+import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
+
+import Tooltip from '../Components/reach-ui/tooltip';
+import {StoreContext} from '../context';
+
+export default function SuspenseScrubber({
+  min,
+  max,
+  timeline,
+  value,
+  highlight,
+  onBlur,
+  onChange,
+  onFocus,
+  onHoverSegment,
+  onHoverLeave,
+}: {
+  min: number,
+  max: number,
+  timeline: $ReadOnlyArray<SuspenseTimelineStep>,
+  value: number,
+  highlight: number,
+  onBlur?: () => void,
+  onChange: (index: number) => void,
+  onFocus?: () => void,
+  onHoverSegment: (index: number) => void,
+  onHoverLeave: () => void,
+}): React$Node {
+  const store = useContext(StoreContext);
+  const inputRef = useRef();
+  function handleChange(event: SyntheticEvent) {
+    const newValue = +event.currentTarget.value;
+    onChange(newValue);
+  }
+  function handlePress(index: number, event: SyntheticEvent) {
+    event.preventDefault();
+    if (inputRef.current == null) {
+      throw new Error(
+        'The input should always be mounted while we can click things.',
+      );
+    }
+    inputRef.current.focus();
+    onChange(index);
+  }
+  const steps = [];
+  for (let index = min; index <= max; index++) {
+    const step = timeline[index];
+    const environment = step.environment;
+    const element = store.getElementByID(step.id);
+    const label =
+      index === min
+        ? // The first step in the timeline is always a Transition (Initial Paint).
+          element === null || element.type === ElementTypeRoot
+          ? 'Initial Paint'
+          : 'Transition' +
+            (environment === null ? '' : ' (' + environment + ')')
+        : // TODO: Consider adding the name of this specific boundary if this step has only one.
+          environment === null
+          ? 'Suspense'
+          : environment;
+    steps.push(
+      <Tooltip key={index} label={label}>
+        <div
+          className={
+            styles.SuspenseScrubberStep +
+            (highlight === index
+              ? ' ' + styles.SuspenseScrubberStepHighlight
+              : '')
+          }
+          onPointerDown={handlePress.bind(null, index)}
+          onMouseEnter={onHoverSegment.bind(null, index)}>
+          <div
+            className={
+              styles.SuspenseScrubberBead +
+              (index === min
+                ? // The first step in the timeline is always a Transition (Initial Paint).
+                  ' ' + styles.SuspenseScrubberBeadTransition
+                : '') +
+              ' ' +
+              getClassNameForEnvironment(environment) +
+              (index <= value ? ' ' + styles.SuspenseScrubberBeadSelected : '')
+            }
+          />
+        </div>
+      </Tooltip>,
+    );
+  }
+
+  return (
+    <div className={styles.SuspenseScrubber} onMouseLeave={onHoverLeave}>
+      <input
+        className={styles.SuspenseScrubberInput}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onBlur={onBlur}
+        onChange={handleChange}
+        onFocus={onFocus}
+        ref={inputRef}
+      />
+      {steps}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
new file mode 100644
index 00000000000..a7915d0d910
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
@@ -0,0 +1,146 @@
+.SuspenseTab {
+  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);
+}
+
+.SuspenseTab, .SuspenseTab * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: var(--font-smoothing);
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  flex: 0 0 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}
+
+.TreeWrapper {
+  border-top: 1px solid var(--color-border);
+  flex: 1 1 65%;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: auto;
+}
+
+.InspectedElementWrapper {
+  flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-left: 1px solid var(--color-border);
+}
+
+.ResizeBarWrapper {
+  flex: 0 0 0px;
+  position: relative;
+}
+
+.ResizeBar {
+  position: absolute;
+  /*
+   * moving the bar out of its bounding box might cause its hitbox to overlap
+   * with another scrollbar creating disorienting UX where you both resize and scroll
+   * at the same time.
+   * If you adjust this value, double check that starting resize right on this edge
+   * doesn't also cause scroll
+   */
+  left: 1px;
+  width: 5px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+@container devtools (width < 600px) {
+  .SuspenseTab {
+    flex-direction: column;
+  }
+
+  .TreeWrapper {
+    border-top: 1px solid var(--color-border);
+    flex: 1 1 50%;
+    overflow: hidden;
+  }
+
+  .InspectedElementWrapper {
+    flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
+    border-left: none;
+  }
+
+  .TreeWrapper + .ResizeBarWrapper .ResizeBar {
+    top: 1px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    cursor: ns-resize;
+  }
+
+  .ToggleInspectedElement[data-orientation="horizontal"] {
+    display: none;
+  }
+}
+
+@container devtools (width >= 600px) {
+  .ToggleInspectedElement[data-orientation="vertical"] {
+    display: none;
+  }
+}
+
+.ActivityList {
+  flex: 0 0 var(--horizontal-resize-activity-list-percentage);;
+  border-right: 1px solid var(--color-border);
+  overflow: auto;
+}
+
+.TreeView {
+  flex: 1 1 35%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+}
+
+.Rects {
+  padding: 0.25rem;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.SuspenseTreeViewHeader {
+  flex: 0 0 42px;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.SuspenseBreadcrumbs {
+  flex: 1;
+  /**
+   * TODO: Switch to single item view on overflow like OwnerStack does.
+   * OwnerStack has more constraints that make it easier so it won't be a 1:1 port.
+   */
+  overflow-x: auto;
+}
+
+.SuspenseTreeViewFooter {
+  flex: 0 0 42px;
+  display: flex;
+  justify-content: end;
+  border-top: 1px solid var(--color-border);
+  padding: 0.5rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+.SuspenseTreeViewFooterButtons {
+  padding: 0.25rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
new file mode 100644
index 00000000000..bd5de7d13e4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -0,0 +1,649 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  Fragment,
+} from 'react';
+
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import ButtonIcon, {type IconType} from '../ButtonIcon';
+import InspectHostNodesToggle from '../Components/InspectHostNodesToggle';
+import InspectedElementErrorBoundary from '../Components/InspectedElementErrorBoundary';
+import InspectedElement from '../Components/InspectedElement';
+import portaledContent from '../portaledContent';
+import styles from './SuspenseTab.css';
+import SuspenseBreadcrumbs from './SuspenseBreadcrumbs';
+import SuspenseRects from './SuspenseRects';
+import SuspenseTimeline from './SuspenseTimeline';
+import ActivityList from './ActivityList';
+import {
+  SuspenseTreeDispatcherContext,
+  SuspenseTreeStateContext,
+} from './SuspenseTreeContext';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
+import Button from '../Button';
+import Toggle from '../Toggle';
+import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
+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 {TreeStateContext} from '../Components/TreeContext';
+
+type Orientation = 'horizontal' | 'vertical';
+
+type LayoutActionType =
+  | 'ACTION_SET_ACTIVITY_LIST_TOGGLE'
+  | 'ACTION_SET_ACTIVITY_LIST_HORIZONTAL_FRACTION'
+  | 'ACTION_SET_INSPECTED_ELEMENT_TOGGLE'
+  | 'ACTION_SET_INSPECTED_ELEMENT_HORIZONTAL_FRACTION'
+  | 'ACTION_SET_INSPECTED_ELEMENT_VERTICAL_FRACTION';
+type LayoutAction = {
+  type: LayoutActionType,
+  payload: any,
+};
+
+type LayoutState = {
+  activityListHidden: boolean,
+  activityListHorizontalFraction: number,
+  inspectedElementHidden: boolean,
+  inspectedElementHorizontalFraction: number,
+  inspectedElementVerticalFraction: number,
+};
+type LayoutDispatch = (action: LayoutAction) => void;
+
+function ToggleUniqueSuspenders() {
+  const store = useContext(StoreContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+
+  const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext);
+
+  function handleToggleUniqueSuspenders() {
+    const nextUniqueSuspendersOnly = !uniqueSuspendersOnly;
+    // TODO: Handle different timeline modes (e.g. random order)
+    const nextTimeline = store.getEndTimeOrDocumentOrderSuspense(
+      nextUniqueSuspendersOnly,
+    );
+    suspenseTreeDispatch({
+      type: 'SET_SUSPENSE_TIMELINE',
+      payload: [nextTimeline, null, nextUniqueSuspendersOnly],
+    });
+  }
+
+  return (
+    <Toggle
+      isChecked={uniqueSuspendersOnly}
+      onChange={handleToggleUniqueSuspenders}
+      title={
+        'Filter Suspense which does not suspend, or if the parent also suspend on the same.'
+      }>
+      <ButtonIcon type={uniqueSuspendersOnly ? 'filter-on' : 'filter-off'} />
+    </Toggle>
+  );
+}
+
+function ToggleActivityList({
+  dispatch,
+  state,
+}: {
+  dispatch: LayoutDispatch,
+  state: LayoutState,
+}) {
+  return (
+    <Button
+      onClick={() =>
+        dispatch({
+          type: 'ACTION_SET_ACTIVITY_LIST_TOGGLE',
+          payload: null,
+        })
+      }
+      title={
+        state.activityListHidden ? 'Show Activity List' : 'Hide Activity List'
+      }>
+      <ButtonIcon
+        type={state.activityListHidden ? 'panel-left-open' : 'panel-left-close'}
+      />
+    </Button>
+  );
+}
+
+function ToggleInspectedElement({
+  dispatch,
+  state,
+  orientation,
+}: {
+  dispatch: LayoutDispatch,
+  state: LayoutState,
+  orientation: 'horizontal' | 'vertical',
+}) {
+  let iconType: IconType;
+  if (orientation === 'horizontal') {
+    iconType = state.inspectedElementHidden
+      ? 'panel-right-open'
+      : 'panel-right-close';
+  } else {
+    iconType = state.inspectedElementHidden
+      ? 'panel-bottom-open'
+      : 'panel-bottom-close';
+  }
+  return (
+    <Button
+      className={styles.ToggleInspectedElement}
+      data-orientation={orientation}
+      onClick={() =>
+        dispatch({
+          type: 'ACTION_SET_INSPECTED_ELEMENT_TOGGLE',
+          payload: null,
+        })
+      }
+      title={
+        state.inspectedElementHidden
+          ? 'Show Inspected Element'
+          : 'Hide Inspected Element'
+      }>
+      <ButtonIcon type={iconType} />
+    </Button>
+  );
+}
+
+function SynchronizedScrollContainer({
+  className,
+  children,
+  scaleRef,
+}: {
+  className?: string,
+  children?: React.Node,
+  scaleRef: {current: number},
+}) {
+  const bridge = useContext(BridgeContext);
+  const ref = useRef(null);
+  const applyingScrollRef = useRef(false);
+
+  // TODO: useEffectEvent
+  function scrollContainerTo({
+    left,
+    top,
+    right,
+    bottom,
+  }: {
+    left: number,
+    top: number,
+    right: number,
+    bottom: number,
+  }): void {
+    const element = ref.current;
+    if (element === null) {
+      return;
+    }
+    const scale = scaleRef.current / element.clientWidth;
+    const targetLeft = Math.round(left / scale);
+    const targetTop = Math.round(top / scale);
+    if (
+      targetLeft !== Math.round(element.scrollLeft) ||
+      targetTop !== Math.round(element.scrollTop)
+    ) {
+      // Disable scroll events until we've applied the new scroll position.
+      applyingScrollRef.current = true;
+      element.scrollTo({
+        left: targetLeft,
+        top: targetTop,
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  useEffect(() => {
+    const callback = scrollContainerTo;
+    bridge.addListener('scrollTo', callback);
+    // Ask for the current scroll position when we mount so we can attach ourselves to it.
+    bridge.send('requestScrollPosition');
+    return () => bridge.removeListener('scrollTo', callback);
+  }, [bridge]);
+
+  const scrollTimer = useRef<null | TimeoutID>(null);
+
+  // TODO: useEffectEvent
+  function sendScroll() {
+    if (scrollTimer.current) {
+      clearTimeout(scrollTimer.current);
+      scrollTimer.current = null;
+    }
+    if (applyingScrollRef.current) {
+      return;
+    }
+    const element = ref.current;
+    if (element === null) {
+      return;
+    }
+    const scale = scaleRef.current / element.clientWidth;
+    const left = element.scrollLeft * scale;
+    const top = element.scrollTop * scale;
+    const right = left + element.clientWidth * scale;
+    const bottom = top + element.clientHeight * scale;
+    bridge.send('scrollTo', {left, top, right, bottom});
+  }
+
+  // TODO: useEffectEvent
+  function throttleScroll() {
+    if (!scrollTimer.current) {
+      // Periodically synchronize the scroll while scrolling.
+      scrollTimer.current = setTimeout(sendScroll, 400);
+    }
+  }
+
+  function scrollEnd() {
+    // Upon scrollend send it immediately.
+    sendScroll();
+    applyingScrollRef.current = false;
+  }
+
+  useEffect(() => {
+    const element = ref.current;
+    if (element === null) {
+      return;
+    }
+    const scrollCallback = throttleScroll;
+    const scrollEndCallback = scrollEnd;
+    element.addEventListener('scroll', scrollCallback);
+    element.addEventListener('scrollend', scrollEndCallback);
+    return () => {
+      element.removeEventListener('scroll', scrollCallback);
+      element.removeEventListener('scrollend', scrollEndCallback);
+    };
+  }, [ref]);
+
+  return (
+    <div className={className} ref={ref}>
+      {children}
+    </div>
+  );
+}
+
+function SuspenseTab(_: {}) {
+  const store = useContext(StoreContext);
+  const {hideSettings} = useContext(OptionsContext);
+  const [state, dispatch] = useReducer<LayoutState, null, LayoutAction>(
+    layoutReducer,
+    null,
+    initLayoutState,
+  );
+
+  const {activities} = useContext(TreeStateContext);
+  // If there are no named Activity boundaries, we don't have any tree list and we should hide
+  // both the panel and the button to toggle it.
+  const activityListDisabled = activities.length === 0;
+
+  const wrapperTreeRef = useRef<null | HTMLElement>(null);
+  const resizeTreeRef = useRef<null | HTMLElement>(null);
+  const resizeActivityListRef = useRef<null | HTMLElement>(null);
+
+  // TODO: We'll show the recently inspected element in this tab when it should probably
+  // switch to the nearest Suspense boundary when we switch into this tab.
+
+  const {
+    inspectedElementHidden,
+    inspectedElementHorizontalFraction,
+    inspectedElementVerticalFraction,
+    activityListHidden,
+    activityListHorizontalFraction,
+  } = state;
+
+  useLayoutEffect(() => {
+    const wrapperElement = wrapperTreeRef.current;
+
+    setResizeCSSVariable(
+      wrapperElement,
+      'tree',
+      'horizontal',
+      inspectedElementHorizontalFraction * 100,
+    );
+    setResizeCSSVariable(
+      wrapperElement,
+      'tree',
+      'vertical',
+      inspectedElementVerticalFraction * 100,
+    );
+
+    const resizeActivityListElement = resizeActivityListRef.current;
+    setResizeCSSVariable(
+      resizeActivityListElement,
+      'activity-list',
+      'horizontal',
+      activityListHorizontalFraction * 100,
+    );
+  }, []);
+  useEffect(() => {
+    const timeoutID = setTimeout(() => {
+      localStorageSetItem(
+        LOCAL_STORAGE_KEY,
+        JSON.stringify({
+          inspectedElementHidden,
+          inspectedElementHorizontalFraction,
+          inspectedElementVerticalFraction,
+          activityListHidden,
+          activityListHorizontalFraction,
+        }),
+      );
+    }, 500);
+
+    return () => clearTimeout(timeoutID);
+  }, [
+    inspectedElementHidden,
+    inspectedElementHorizontalFraction,
+    inspectedElementVerticalFraction,
+    activityListHidden,
+    activityListHorizontalFraction,
+  ]);
+
+  const onResizeStart = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    element.setPointerCapture(event.pointerId);
+  };
+
+  const onResizeEnd = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    element.releasePointerCapture(event.pointerId);
+  };
+
+  const onResizeTree = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    const isResizing = element.hasPointerCapture(event.pointerId);
+    if (!isResizing) {
+      return;
+    }
+
+    const resizeElement = resizeTreeRef.current;
+    const wrapperElement = wrapperTreeRef.current;
+
+    if (wrapperElement === null || resizeElement === null) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const orientation = getTreeOrientation(wrapperElement);
+
+    const {height, width, left, top} = wrapperElement.getBoundingClientRect();
+
+    const currentMousePosition =
+      orientation === 'horizontal' ? event.clientX - left : event.clientY - top;
+
+    const boundaryMin = MINIMUM_TREE_SIZE;
+    const boundaryMax =
+      orientation === 'horizontal'
+        ? width - MINIMUM_TREE_SIZE
+        : height - MINIMUM_TREE_SIZE;
+
+    const isMousePositionInBounds =
+      currentMousePosition > boundaryMin && currentMousePosition < boundaryMax;
+
+    if (isMousePositionInBounds) {
+      const resizedElementDimension =
+        orientation === 'horizontal' ? width : height;
+      const actionType =
+        orientation === 'horizontal'
+          ? 'ACTION_SET_INSPECTED_ELEMENT_HORIZONTAL_FRACTION'
+          : 'ACTION_SET_INSPECTED_ELEMENT_VERTICAL_FRACTION';
+      const fraction = currentMousePosition / resizedElementDimension;
+      const percentage = fraction * 100;
+
+      setResizeCSSVariable(wrapperElement, 'tree', orientation, percentage);
+
+      dispatch({
+        type: actionType,
+        payload: fraction,
+      });
+    }
+  };
+
+  const onResizeActivityList = (event: SyntheticPointerEvent) => {
+    const element = event.currentTarget;
+    const isResizing = element.hasPointerCapture(event.pointerId);
+    if (!isResizing) {
+      return;
+    }
+
+    const resizeElement = resizeActivityListRef.current;
+    const wrapperElement = resizeTreeRef.current;
+
+    if (wrapperElement === null || resizeElement === null) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const orientation = 'horizontal';
+
+    const {height, width, left, top} = wrapperElement.getBoundingClientRect();
+
+    const currentMousePosition =
+      orientation === 'horizontal' ? event.clientX - left : event.clientY - top;
+
+    const boundaryMin = MINIMUM_ACTIVITY_LIST_SIZE;
+    const boundaryMax =
+      orientation === 'horizontal'
+        ? width - MINIMUM_ACTIVITY_LIST_SIZE
+        : height - MINIMUM_ACTIVITY_LIST_SIZE;
+
+    const isMousePositionInBounds =
+      currentMousePosition > boundaryMin && currentMousePosition < boundaryMax;
+
+    if (isMousePositionInBounds) {
+      const resizedElementDimension =
+        orientation === 'horizontal' ? width : height;
+      const actionType = 'ACTION_SET_ACTIVITY_LIST_HORIZONTAL_FRACTION';
+      const percentage = (currentMousePosition / resizedElementDimension) * 100;
+
+      setResizeCSSVariable(
+        resizeElement,
+        'activity-list',
+        orientation,
+        percentage,
+      );
+
+      dispatch({
+        type: actionType,
+        payload: currentMousePosition / resizedElementDimension,
+      });
+    }
+  };
+
+  const scaleRef = useRef(0);
+
+  return (
+    <SettingsModalContextController>
+      <div className={styles.SuspenseTab} ref={wrapperTreeRef}>
+        <div className={styles.TreeWrapper} ref={resizeTreeRef}>
+          {activityListDisabled ? null : (
+            <div
+              className={styles.ActivityList}
+              hidden={activityListHidden}
+              ref={resizeActivityListRef}>
+              <ActivityList activities={activities} />
+            </div>
+          )}
+          {activityListDisabled ? null : (
+            <div
+              className={styles.ResizeBarWrapper}
+              hidden={activityListHidden}>
+              <div
+                onPointerDown={onResizeStart}
+                onPointerMove={onResizeActivityList}
+                onPointerUp={onResizeEnd}
+                className={styles.ResizeBar}
+              />
+            </div>
+          )}
+          <div className={styles.TreeView}>
+            <header className={styles.SuspenseTreeViewHeader}>
+              {activityListDisabled ? (
+                <div />
+              ) : (
+                <ToggleActivityList dispatch={dispatch} state={state} />
+              )}
+              {store.supportsClickToInspect && (
+                <Fragment>
+                  <InspectHostNodesToggle onlySuspenseNodes={true} />
+                  <div className={styles.VRule} />
+                </Fragment>
+              )}
+              <div className={styles.SuspenseBreadcrumbs}>
+                <SuspenseBreadcrumbs />
+              </div>
+              <div className={styles.VRule} />
+              <ToggleUniqueSuspenders />
+              {!hideSettings && <SettingsModalContextToggle />}
+              <ToggleInspectedElement
+                dispatch={dispatch}
+                state={state}
+                orientation="horizontal"
+              />
+            </header>
+            <SynchronizedScrollContainer
+              className={styles.Rects}
+              scaleRef={scaleRef}>
+              <SuspenseRects scaleRef={scaleRef} />
+            </SynchronizedScrollContainer>
+            <footer className={styles.SuspenseTreeViewFooter}>
+              <SuspenseTimeline />
+              <div className={styles.SuspenseTreeViewFooterButtons}>
+                <ToggleInspectedElement
+                  dispatch={dispatch}
+                  state={state}
+                  orientation="vertical"
+                />
+              </div>
+            </footer>
+          </div>
+        </div>
+        <div
+          className={styles.ResizeBarWrapper}
+          hidden={inspectedElementHidden}>
+          <div
+            onPointerDown={onResizeStart}
+            onPointerMove={onResizeTree}
+            onPointerUp={onResizeEnd}
+            className={styles.ResizeBar}
+          />
+        </div>
+        <div
+          className={styles.InspectedElementWrapper}
+          hidden={inspectedElementHidden}>
+          <InspectedElementErrorBoundary>
+            <InspectedElement
+              fallbackEmpty={
+                'No React element selected. Select a Suspense boundary in the minimap to inspect.'
+              }
+            />
+          </InspectedElementErrorBoundary>
+        </div>
+        <SettingsModal />
+      </div>
+    </SettingsModalContextController>
+  );
+}
+
+const LOCAL_STORAGE_KEY = 'React::DevTools::SuspenseTab::layout';
+const VERTICAL_TREE_MODE_MAX_WIDTH = 600;
+const MINIMUM_TREE_SIZE = 100;
+const MINIMUM_ACTIVITY_LIST_SIZE = 100;
+
+function layoutReducer(state: LayoutState, action: LayoutAction): LayoutState {
+  switch (action.type) {
+    case 'ACTION_SET_ACTIVITY_LIST_TOGGLE':
+      return {
+        ...state,
+        activityListHidden: !state.activityListHidden,
+      };
+    case 'ACTION_SET_ACTIVITY_LIST_HORIZONTAL_FRACTION':
+      return {
+        ...state,
+        activityListHorizontalFraction: action.payload,
+      };
+    case 'ACTION_SET_INSPECTED_ELEMENT_TOGGLE':
+      return {
+        ...state,
+        inspectedElementHidden: !state.inspectedElementHidden,
+      };
+    case 'ACTION_SET_INSPECTED_ELEMENT_HORIZONTAL_FRACTION':
+      return {
+        ...state,
+        inspectedElementHorizontalFraction: action.payload,
+      };
+    case 'ACTION_SET_INSPECTED_ELEMENT_VERTICAL_FRACTION':
+      return {
+        ...state,
+        inspectedElementVerticalFraction: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+function initLayoutState(): LayoutState {
+  let inspectedElementHidden = false;
+  let inspectedElementHorizontalFraction = 0.65;
+  let inspectedElementVerticalFraction = 0.5;
+  let activityListHidden = false;
+  let activityListHorizontalFraction = 0.35;
+
+  try {
+    let data = localStorageGetItem(LOCAL_STORAGE_KEY);
+    if (data != null) {
+      data = JSON.parse(data);
+      inspectedElementHidden = data.inspectedElementHidden;
+      inspectedElementHorizontalFraction =
+        data.inspectedElementHorizontalFraction;
+      inspectedElementVerticalFraction = data.inspectedElementVerticalFraction;
+      activityListHidden = data.activityListHidden;
+      activityListHorizontalFraction = data.activityListHorizontalFraction;
+    }
+  } catch (error) {}
+
+  return {
+    inspectedElementHidden,
+    inspectedElementHorizontalFraction,
+    inspectedElementVerticalFraction,
+    activityListHidden,
+    activityListHorizontalFraction,
+  };
+}
+
+function getTreeOrientation(
+  wrapperElement: null | HTMLElement,
+): null | Orientation {
+  if (wrapperElement != null) {
+    const {width} = wrapperElement.getBoundingClientRect();
+    return width > VERTICAL_TREE_MODE_MAX_WIDTH ? 'horizontal' : 'vertical';
+  }
+  return null;
+}
+
+function setResizeCSSVariable(
+  resizeElement: null | HTMLElement,
+  name: 'tree' | 'activity-list',
+  orientation: null | Orientation,
+  percentage: number,
+): void {
+  if (resizeElement !== null && orientation !== null) {
+    resizeElement.style.setProperty(
+      `--${orientation}-resize-${name}-percentage`,
+      `${percentage}%`,
+    );
+  }
+}
+
+export default (portaledContent(SuspenseTab): component());
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
new file mode 100644
index 00000000000..77bb01c5fa3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
@@ -0,0 +1,21 @@
+.SuspenseTimelineContainer {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem;
+  align-items: center;
+}
+
+.SuspenseTimelineInput {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.SuspenseTimelineRootSwitcher {
+  height: fit-content;
+  max-width: 3rem;
+}
+
+.SuspenseTimelineProgressIndicator {
+  align-self: center;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
new file mode 100644
index 00000000000..89f349ae6ea
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext, useEffect} from 'react';
+import {BridgeContext} from '../context';
+import {TreeDispatcherContext} from '../Components/TreeContext';
+import {useScrollToHostInstance} from '../hooks';
+import {
+  SuspenseTreeDispatcherContext,
+  SuspenseTreeStateContext,
+} from './SuspenseTreeContext';
+import styles from './SuspenseTimeline.css';
+import SuspenseScrubber from './SuspenseScrubber';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+function SuspenseTimelineInput() {
+  const bridge = useContext(BridgeContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+  const scrollToHostInstance = useScrollToHostInstance();
+
+  const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} =
+    useContext(SuspenseTreeStateContext);
+
+  const min = 0;
+  const max = timeline.length > 0 ? timeline.length - 1 : 0;
+
+  function switchSuspenseNode(nextTimelineIndex: number) {
+    const nextSelectedSuspenseID = timeline[nextTimelineIndex].id;
+    treeDispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: nextSelectedSuspenseID,
+    });
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_SET_TIMELINE_INDEX',
+      payload: nextTimelineIndex,
+    });
+  }
+
+  function handleChange(pendingTimelineIndex: number) {
+    switchSuspenseNode(pendingTimelineIndex);
+  }
+
+  function handleFocus() {
+    switchSuspenseNode(timelineIndex);
+  }
+
+  function handleHoverSegment(hoveredIndex: number) {
+    const nextSelectedSuspenseID = timeline[hoveredIndex].id;
+    suspenseTreeDispatch({
+      type: 'HOVER_TIMELINE_FOR_ID',
+      payload: nextSelectedSuspenseID,
+    });
+  }
+  function handleUnhoverSegment() {
+    suspenseTreeDispatch({
+      type: 'HOVER_TIMELINE_FOR_ID',
+      payload: -1,
+    });
+  }
+
+  function skipPrevious() {
+    const nextSelectedSuspenseID = timeline[timelineIndex - 1].id;
+    treeDispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: nextSelectedSuspenseID,
+    });
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+      payload: false,
+    });
+  }
+
+  function skipForward() {
+    const nextSelectedSuspenseID = timeline[timelineIndex + 1].id;
+    treeDispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: nextSelectedSuspenseID,
+    });
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+      payload: true,
+    });
+  }
+
+  function togglePlaying() {
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_PLAY_PAUSE',
+      payload: 'toggle',
+    });
+  }
+
+  // TODO: useEffectEvent here once it's supported in all versions DevTools supports.
+  // For now we just exclude it from deps since we don't lint those anyway.
+  function changeTimelineIndex(newIndex: number) {
+    // Synchronize timeline index with what is resuspended.
+    // We suspend everything after the current selection. The root isn't showing
+    // anything suspended in the root. The step after that should have one less
+    // thing suspended. I.e. the first suspense boundary should be unsuspended
+    // when it's selected. This also lets you show everything in the last step.
+    const suspendedSet = timeline.slice(timelineIndex + 1).map(step => step.id);
+    bridge.send('overrideSuspenseMilestone', {
+      suspendedSet,
+    });
+  }
+
+  useEffect(() => {
+    changeTimelineIndex(timelineIndex);
+  }, [timelineIndex]);
+
+  useEffect(() => {
+    if (autoScroll.id > 0) {
+      const scrollToId = autoScroll.id;
+      // Consume the scroll ref so that we only trigger this scroll once.
+      autoScroll.id = 0;
+      scrollToHostInstance(scrollToId);
+    }
+  }, [autoScroll]);
+
+  useEffect(() => {
+    if (!playing) {
+      return undefined;
+    }
+    // While playing, advance one step every second.
+    const PLAY_SPEED_INTERVAL = 1000;
+    const timer = setInterval(() => {
+      suspenseTreeDispatch({
+        type: 'SUSPENSE_PLAY_TICK',
+      });
+    }, PLAY_SPEED_INTERVAL);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [playing]);
+
+  if (timeline.length === 0) {
+    return (
+      <div className={styles.SuspenseTimelineInput}>
+        Root contains no Suspense nodes.
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        disabled={timelineIndex === 0}
+        title={'Previous'}
+        onClick={skipPrevious}>
+        <ButtonIcon type={'skip-previous'} />
+      </Button>
+      <Button
+        disabled={max === 0 && !playing}
+        title={playing ? 'Pause' : 'Play'}
+        onClick={togglePlaying}>
+        <ButtonIcon type={playing ? 'pause' : 'play'} />
+      </Button>
+      <Button
+        disabled={timelineIndex === max}
+        title={'Next'}
+        onClick={skipForward}>
+        <ButtonIcon type={'skip-next'} />
+      </Button>
+      <div className={styles.SuspenseTimelineInput}>
+        <SuspenseScrubber
+          min={min}
+          max={max}
+          timeline={timeline}
+          value={timelineIndex}
+          highlight={hoveredTimelineIndex}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onHoverSegment={handleHoverSegment}
+          onHoverLeave={handleUnhoverSegment}
+        />
+      </div>
+    </>
+  );
+}
+
+export default function SuspenseTimeline(): React$Node {
+  return (
+    <div className={styles.SuspenseTimelineContainer}>
+      <SuspenseTimelineInput />
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
new file mode 100644
index 00000000000..6cb4eb7a487
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -0,0 +1,489 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  SuspenseNode,
+  SuspenseTimelineStep,
+} from 'react-devtools-shared/src/frontend/types';
+import type Store from '../../store';
+
+import * as React from 'react';
+import {
+  createContext,
+  startTransition,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+} from 'react';
+import {StoreContext} from '../context';
+
+export type SuspenseTreeState = {
+  lineage: $ReadOnlyArray<SuspenseNode['id']> | null,
+  roots: $ReadOnlyArray<SuspenseNode['id']>,
+  selectedSuspenseID: SuspenseNode['id'] | null,
+  timeline: $ReadOnlyArray<SuspenseTimelineStep>,
+  timelineIndex: number | -1,
+  hoveredTimelineIndex: number | -1,
+  uniqueSuspendersOnly: boolean,
+  playing: boolean,
+  autoSelect: boolean,
+  autoScroll: {id: number}, // Ref that's set to 0 after scrolling once.
+};
+
+type ACTION_SUSPENSE_TREE_MUTATION = {
+  type: 'HANDLE_SUSPENSE_TREE_MUTATION',
+  payload: [Map<SuspenseNode['id'], SuspenseNode['id']>],
+};
+type ACTION_SET_SUSPENSE_LINEAGE = {
+  type: 'SET_SUSPENSE_LINEAGE',
+  payload: SuspenseNode['id'],
+};
+type ACTION_SELECT_SUSPENSE_BY_ID = {
+  type: 'SELECT_SUSPENSE_BY_ID',
+  payload: SuspenseNode['id'],
+};
+type ACTION_SET_SUSPENSE_TIMELINE = {
+  type: 'SET_SUSPENSE_TIMELINE',
+  payload: [
+    $ReadOnlyArray<SuspenseTimelineStep>,
+    // The next Suspense ID to select in the timeline
+    SuspenseNode['id'] | null,
+    // Whether this timeline includes only unique suspenders
+    boolean,
+  ],
+};
+type ACTION_SUSPENSE_SET_TIMELINE_INDEX = {
+  type: 'SUSPENSE_SET_TIMELINE_INDEX',
+  payload: number,
+};
+type ACTION_SUSPENSE_SKIP_TIMELINE_INDEX = {
+  type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+  payload: boolean,
+};
+type ACTION_SUSPENSE_PLAY_PAUSE = {
+  type: 'SUSPENSE_PLAY_PAUSE',
+  payload: 'toggle' | 'play' | 'pause',
+};
+type ACTION_SUSPENSE_PLAY_TICK = {
+  type: 'SUSPENSE_PLAY_TICK',
+};
+type ACTION_TOGGLE_TIMELINE_FOR_ID = {
+  type: 'TOGGLE_TIMELINE_FOR_ID',
+  payload: SuspenseNode['id'],
+};
+type ACTION_HOVER_TIMELINE_FOR_ID = {
+  type: 'HOVER_TIMELINE_FOR_ID',
+  payload: SuspenseNode['id'],
+};
+
+export type SuspenseTreeAction =
+  | ACTION_SUSPENSE_TREE_MUTATION
+  | ACTION_SET_SUSPENSE_LINEAGE
+  | ACTION_SELECT_SUSPENSE_BY_ID
+  | ACTION_SET_SUSPENSE_TIMELINE
+  | ACTION_SUSPENSE_SET_TIMELINE_INDEX
+  | ACTION_SUSPENSE_SKIP_TIMELINE_INDEX
+  | ACTION_SUSPENSE_PLAY_PAUSE
+  | ACTION_SUSPENSE_PLAY_TICK
+  | ACTION_TOGGLE_TIMELINE_FOR_ID
+  | ACTION_HOVER_TIMELINE_FOR_ID;
+export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;
+
+const SuspenseTreeStateContext: ReactContext<SuspenseTreeState> =
+  createContext<SuspenseTreeState>(((null: any): SuspenseTreeState));
+SuspenseTreeStateContext.displayName = 'SuspenseTreeStateContext';
+
+const SuspenseTreeDispatcherContext: ReactContext<SuspenseTreeDispatch> =
+  createContext<SuspenseTreeDispatch>(((null: any): SuspenseTreeDispatch));
+SuspenseTreeDispatcherContext.displayName = 'SuspenseTreeDispatcherContext';
+
+type Props = {
+  children: React$Node,
+};
+
+function getInitialState(store: Store): SuspenseTreeState {
+  const uniqueSuspendersOnly = true;
+  const timeline =
+    store.getEndTimeOrDocumentOrderSuspense(uniqueSuspendersOnly);
+  const timelineIndex = timeline.length - 1;
+  const selectedSuspenseID =
+    timelineIndex === -1 ? null : timeline[timelineIndex].id;
+  const lineage =
+    selectedSuspenseID !== null
+      ? store.getSuspenseLineage(selectedSuspenseID)
+      : [];
+  const initialState: SuspenseTreeState = {
+    selectedSuspenseID,
+    lineage,
+    roots: store.roots,
+    timeline,
+    timelineIndex,
+    hoveredTimelineIndex: -1,
+    uniqueSuspendersOnly,
+    playing: false,
+    autoSelect: true,
+    autoScroll: {id: 0}, // Don't auto-scroll initially
+  };
+
+  return initialState;
+}
+
+function SuspenseTreeContextController({children}: Props): React.Node {
+  const store = useContext(StoreContext);
+  // 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: SuspenseTreeState,
+        action: SuspenseTreeAction,
+      ): SuspenseTreeState => {
+        switch (action.type) {
+          case 'HANDLE_SUSPENSE_TREE_MUTATION': {
+            let {selectedSuspenseID} = state;
+            // If the currently-selected Element has been removed from the tree, update selection state.
+            const removedIDs = action.payload[0];
+            // 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 (
+              selectedSuspenseID !== null &&
+              removedIDs.has(selectedSuspenseID)
+            ) {
+              // $FlowExpectedError[incompatible-type]
+              selectedSuspenseID = removedIDs.get(selectedSuspenseID);
+            }
+            if (selectedSuspenseID === 0) {
+              // The whole root was removed.
+              selectedSuspenseID = null;
+            }
+
+            const selectedTimelineStep =
+              state.timeline === null || state.timelineIndex === -1
+                ? null
+                : state.timeline[state.timelineIndex];
+            let selectedTimelineID: null | number = null;
+            if (selectedTimelineStep !== null) {
+              selectedTimelineID = selectedTimelineStep.id;
+              // $FlowFixMe
+              while (removedIDs.has(selectedTimelineID)) {
+                // $FlowFixMe
+                selectedTimelineID = removedIDs.get(selectedTimelineID);
+              }
+            }
+
+            // TODO: Handle different timeline modes (e.g. random order)
+            const nextTimeline = store.getEndTimeOrDocumentOrderSuspense(
+              state.uniqueSuspendersOnly,
+            );
+
+            let nextTimelineIndex = -1;
+            if (selectedTimelineID !== null && nextTimeline.length !== 0) {
+              for (let i = 0; i < nextTimeline.length; i++) {
+                if (nextTimeline[i].id === selectedTimelineID) {
+                  nextTimelineIndex = i;
+                  break;
+                }
+              }
+            }
+            if (
+              nextTimeline.length > 0 &&
+              (nextTimelineIndex === -1 || state.autoSelect)
+            ) {
+              nextTimelineIndex = nextTimeline.length - 1;
+              selectedSuspenseID = nextTimeline[nextTimelineIndex].id;
+            }
+
+            if (selectedSuspenseID === null && nextTimeline.length > 0) {
+              selectedSuspenseID = nextTimeline[nextTimeline.length - 1].id;
+            }
+
+            const nextLineage =
+              selectedSuspenseID !== null &&
+              state.selectedSuspenseID !== selectedSuspenseID
+                ? store.getSuspenseLineage(selectedSuspenseID)
+                : state.lineage;
+
+            return {
+              ...state,
+              lineage: nextLineage,
+              roots: store.roots,
+              selectedSuspenseID,
+              timeline: nextTimeline,
+              timelineIndex: nextTimelineIndex,
+            };
+          }
+          case 'SELECT_SUSPENSE_BY_ID': {
+            const selectedSuspenseID = action.payload;
+
+            return {
+              ...state,
+              selectedSuspenseID,
+              playing: false, // pause
+              autoSelect: false,
+              autoScroll: {id: selectedSuspenseID}, // scroll
+            };
+          }
+          case 'SET_SUSPENSE_LINEAGE': {
+            const suspenseID = action.payload;
+            const lineage = store.getSuspenseLineage(suspenseID);
+
+            return {
+              ...state,
+              lineage,
+              selectedSuspenseID: suspenseID,
+              playing: false, // pause
+              autoSelect: false,
+            };
+          }
+          case 'SET_SUSPENSE_TIMELINE': {
+            const previousMilestoneIndex = state.timelineIndex;
+            const previousTimeline = state.timeline;
+            const nextTimeline = action.payload[0];
+            const nextRootID: SuspenseNode['id'] | null = action.payload[1];
+            const nextUniqueSuspendersOnly = action.payload[2];
+            let nextLineage = state.lineage;
+            let nextMilestoneIndex: number | -1 = -1;
+            let nextSelectedSuspenseID = state.selectedSuspenseID;
+            // Action has indicated it has no preference for the selected Node.
+            // Try to reconcile the new timeline with the previous index.
+            if (
+              nextRootID === null &&
+              previousTimeline !== null &&
+              previousMilestoneIndex !== null
+            ) {
+              const previousMilestoneID =
+                previousTimeline[previousMilestoneIndex];
+              nextMilestoneIndex = nextTimeline.indexOf(previousMilestoneID);
+              if (nextMilestoneIndex === -1 && nextTimeline.length > 0) {
+                nextMilestoneIndex = nextTimeline.length - 1;
+                nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id;
+                nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
+              }
+            } else if (nextRootID !== null) {
+              nextMilestoneIndex = nextTimeline.length - 1;
+              nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id;
+              nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
+            }
+
+            return {
+              ...state,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              lineage: nextLineage,
+              timeline: nextTimeline,
+              timelineIndex: nextMilestoneIndex,
+              uniqueSuspendersOnly: nextUniqueSuspendersOnly,
+            };
+          }
+          case 'SUSPENSE_SET_TIMELINE_INDEX': {
+            const nextTimelineIndex = action.payload;
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextLineage = store.getSuspenseLineage(
+              nextSelectedSuspenseID,
+            );
+
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: false, // pause
+              autoSelect: false,
+              autoScroll: {id: nextSelectedSuspenseID}, // scroll
+            };
+          }
+          case 'SUSPENSE_SKIP_TIMELINE_INDEX': {
+            const direction = action.payload;
+            const nextTimelineIndex =
+              state.timelineIndex + (direction ? 1 : -1);
+            if (
+              nextTimelineIndex < 0 ||
+              nextTimelineIndex > state.timeline.length - 1
+            ) {
+              return state;
+            }
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextLineage = store.getSuspenseLineage(
+              nextSelectedSuspenseID,
+            );
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: false, // pause
+              autoSelect: false,
+              autoScroll: {id: nextSelectedSuspenseID}, // scroll
+            };
+          }
+          case 'SUSPENSE_PLAY_PAUSE': {
+            const mode = action.payload;
+
+            let nextTimelineIndex = state.timelineIndex;
+            let nextSelectedSuspenseID = state.selectedSuspenseID;
+            let nextLineage = state.lineage;
+
+            if (
+              !state.playing &&
+              mode !== 'pause' &&
+              nextTimelineIndex === state.timeline.length - 1
+            ) {
+              // If we're restarting at the end. Then loop around and start again from the beginning.
+              nextTimelineIndex = 0;
+              nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+              nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
+            }
+
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: mode === 'toggle' ? !state.playing : mode === 'play',
+              autoSelect: false,
+            };
+          }
+          case 'SUSPENSE_PLAY_TICK': {
+            if (!state.playing) {
+              // We stopped but haven't yet cleaned up the callback. Noop.
+              return state;
+            }
+            // Advance time
+            const nextTimelineIndex = state.timelineIndex + 1;
+            if (nextTimelineIndex > state.timeline.length - 1) {
+              return state;
+            }
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextLineage = store.getSuspenseLineage(
+              nextSelectedSuspenseID,
+            );
+            // Stop once we reach the end.
+            const nextPlaying = nextTimelineIndex < state.timeline.length - 1;
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: nextPlaying,
+              autoScroll: {id: nextSelectedSuspenseID}, // scroll
+            };
+          }
+          case 'TOGGLE_TIMELINE_FOR_ID': {
+            const suspenseID = action.payload;
+
+            let timelineIndexForSuspenseID = -1;
+            for (let i = 0; i < state.timeline.length; i++) {
+              if (state.timeline[i].id === suspenseID) {
+                timelineIndexForSuspenseID = i;
+                break;
+              }
+            }
+            if (timelineIndexForSuspenseID === -1) {
+              // This boundary is no longer in the timeline.
+              return state;
+            }
+            const nextTimelineIndex =
+              timelineIndexForSuspenseID === 0
+                ? // For roots, there's no toggling. It's always just jump to beginning.
+                  0
+                : // For boundaries, we'll either jump to before or after its reveal depending
+                  // on if we're currently displaying it or not according to the timeline.
+                  state.timelineIndex < timelineIndexForSuspenseID
+                  ? // We're currently before this suspense boundary has been revealed so we
+                    // should jump ahead to reveal it.
+                    timelineIndexForSuspenseID
+                  : // Otherwise, if we're currently showing it, jump to right before to hide it.
+                    timelineIndexForSuspenseID - 1;
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id;
+            const nextLineage = store.getSuspenseLineage(
+              nextSelectedSuspenseID,
+            );
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: false, // pause
+              autoSelect: false,
+              autoScroll: {id: nextSelectedSuspenseID},
+            };
+          }
+          case 'HOVER_TIMELINE_FOR_ID': {
+            const suspenseID = action.payload;
+            let timelineIndexForSuspenseID = -1;
+            for (let i = 0; i < state.timeline.length; i++) {
+              if (state.timeline[i].id === suspenseID) {
+                timelineIndexForSuspenseID = i;
+                break;
+              }
+            }
+            return {
+              ...state,
+              hoveredTimelineIndex: timelineIndexForSuspenseID,
+            };
+          }
+          default:
+            throw new Error(`Unrecognized action "${action.type}"`);
+        }
+      },
+    [],
+  );
+
+  const [state, dispatch] = useReducer(reducer, store, getInitialState);
+
+  const initialRevision = useMemo(() => store.revisionSuspense, [store]);
+  // We're currently storing everything Suspense related in the same Store as
+  // Components. However, most reads are currently stateless. This ensures
+  // the latest state is always read from the Store.
+  useEffect(() => {
+    const handleSuspenseTreeMutated = ([removedElementIDs]: [
+      Map<number, number>,
+    ]) => {
+      dispatch({
+        type: 'HANDLE_SUSPENSE_TREE_MUTATION',
+        payload: [removedElementIDs],
+      });
+    };
+
+    // Since this is a passive effect, the tree may have been mutated before our initial subscription.
+    if (store.revisionSuspense !== initialRevision) {
+      // At the moment, we can treat this as a mutation.
+      handleSuspenseTreeMutated([new Map()]);
+    }
+
+    store.addListener('suspenseTreeMutated', handleSuspenseTreeMutated);
+    return () =>
+      store.removeListener('suspenseTreeMutated', handleSuspenseTreeMutated);
+  }, [initialRevision, store]);
+
+  const transitionDispatch = useMemo(
+    () => (action: SuspenseTreeAction) =>
+      startTransition(() => {
+        dispatch(action);
+      }),
+    [dispatch],
+  );
+
+  return (
+    <SuspenseTreeStateContext.Provider value={state}>
+      <SuspenseTreeDispatcherContext.Provider value={transitionDispatch}>
+        {children}
+      </SuspenseTreeDispatcherContext.Provider>
+    </SuspenseTreeStateContext.Provider>
+  );
+}
+
+export {
+  SuspenseTreeDispatcherContext,
+  SuspenseTreeStateContext,
+  SuspenseTreeContextController,
+};
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 00000000000..96b30c3dbf5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.css
@@ -0,0 +1,124 @@
+.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);
+
+  /* Hide radio buttons for Firefox too */
+  position:  relative;
+
+  /* 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;
+
+  /* Hide radio buttons for Firefox too */
+  position:  absolute;
+}
+
+.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 {
+}
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  border-left: 1px solid var(--color-border);
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+@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 00000000000..a277082ab26
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useCallback} from 'react';
+import Icon from './Icon';
+
+import styles from './TabBar.css';
+import Tooltip from './Components/reach-ui/tooltip';
+
+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 | null>,
+  type: 'navigation' | 'profiler' | 'settings',
+};
+
+export default function TabBar({
+  currentTab,
+  disabled = false,
+  id: groupName,
+  selectTab,
+  tabs,
+  type,
+}: Props): React.Node {
+  if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
+    const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
+    selectTab(firstTab.id);
+  }
+
+  const onChange = useCallback(
+    ({currentTarget}: $FlowFixMe) => selectTab(currentTarget.value),
+    [selectTab],
+  );
+
+  const handleKeyDown = useCallback((event: $FlowFixMe) => {
+    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(tab => {
+        if (tab === null) {
+          return <div key="VRule" className={styles.VRule} />;
+        }
+
+        const {icon, id, label, title} = tab;
+
+        let button = (
+          <label
+            className={[
+              tabSizeClassName,
+              disabled ? styles.TabDisabled : styles.Tab,
+              !disabled && currentTab === id ? styles.TabCurrent : '',
+            ].join(' ')}
+            data-testname={`TabBarButton-${id}`}
+            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} label={title}>
+              {button}
+            </Tooltip>
+          );
+        }
+
+        return button;
+      })}
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
new file mode 100644
index 00000000000..77d43ca4660
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import useThemeStyles from './useThemeStyles';
+
+export default function ThemeProvider({
+  children,
+}: {
+  children: React.Node,
+}): React.Node {
+  const themeStyle = useThemeStyles();
+
+  const style = React.useMemo(() => {
+    return {
+      ...themeStyle,
+      width: '100%',
+      height: '100%',
+    };
+  }, [themeStyle]);
+
+  return <div style={style}>{children}</div>;
+}
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 00000000000..1cb6450f748
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.css
@@ -0,0 +1,55 @@
+.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:hover,
+.ToggleOff:hover {
+ background-color: var(--color-button-background-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;
+}
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 00000000000..2d42b42dacd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useCallback} from 'react';
+
+import styles from './Toggle.css';
+import Tooltip from './Components/reach-ui/tooltip';
+
+type Props = {
+  children: React$Node,
+  className?: string,
+  isChecked: boolean,
+  isDisabled?: boolean,
+  onChange: (isChecked: boolean) => void,
+  testName?: ?string,
+  title?: string,
+  ...
+};
+
+export default function Toggle({
+  children,
+  className = '',
+  isDisabled = false,
+  isChecked,
+  onChange,
+  testName,
+  title,
+}: Props): React.Node {
+  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}`}
+      data-testname={testName}
+      disabled={isDisabled}
+      onClick={handleClick}>
+      <span className={styles.ToggleContent} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
+  );
+
+  if (title) {
+    toggle = <Tooltip label={title}>{toggle}</Tooltip>;
+  }
+
+  return toggle;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
new file mode 100644
index 00000000000..12e7fbcfd27
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
@@ -0,0 +1,33 @@
+.Column { 
+  display: flex;  
+  flex-direction: column; 
+} 
+
+.Title {  
+  font-size: var(--font-size-sans-large); 
+  margin-bottom: 0.5rem;  
+} 
+
+.Version {
+  color: var(--color-bridge-version-number);
+  font-weight: bold;
+}
+
+.NpmCommand {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  background-color: var(--color-bridge-version-npm-background);
+  color: var(--color-bridge-version-npm-text);
+  margin: 0;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-large);
+}
+
+.Paragraph {
+  margin: 0.5rem 0;
+}
+
+.Link {
+  color: var(--color-link);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
new file mode 100644
index 00000000000..7bfd86fb9c1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext, useEffect} from 'react';
+import {ModalDialogContext} from './ModalDialog';
+import {StoreContext} from './context';
+import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
+import {copy} from 'clipboard-js';
+import styles from './UnsupportedBridgeProtocolDialog.css';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import type {BridgeProtocol} from 'react-devtools-shared/src/bridge';
+
+const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION;
+const INSTRUCTIONS_FB_URL =
+  'https://fb.me/devtools-unsupported-bridge-protocol';
+const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
+
+export default function UnsupportedBridgeProtocolDialog(_: {}): null {
+  const {dialogs, dispatch} = useContext(ModalDialogContext);
+  const store = useContext(StoreContext);
+
+  const isVisible = !!dialogs.find(dialog => dialog.id === MODAL_DIALOG_ID);
+
+  useEffect(() => {
+    const updateDialog = () => {
+      if (!isVisible) {
+        if (store.unsupportedBridgeProtocolDetected) {
+          dispatch({
+            canBeDismissed: false,
+            id: MODAL_DIALOG_ID,
+            type: 'SHOW',
+            content: (
+              <DialogContent unsupportedBridgeProtocol={store.bridgeProtocol} />
+            ),
+          });
+        }
+      } else {
+        if (!store.unsupportedBridgeProtocolDetected) {
+          dispatch({
+            type: 'HIDE',
+            id: MODAL_DIALOG_ID,
+          });
+        }
+      }
+    };
+
+    updateDialog();
+
+    store.addListener('unsupportedBridgeProtocolDetected', updateDialog);
+    return () => {
+      store.removeListener('unsupportedBridgeProtocolDetected', updateDialog);
+    };
+  }, [isVisible, store]);
+
+  return null;
+}
+
+function DialogContent({
+  unsupportedBridgeProtocol,
+}: {
+  unsupportedBridgeProtocol: BridgeProtocol,
+}) {
+  const {version, minNpmVersion, maxNpmVersion} = unsupportedBridgeProtocol;
+
+  let instructions;
+  if (maxNpmVersion === null) {
+    const upgradeInstructions = `npm i -g react-devtools@^${minNpmVersion}`;
+    instructions = (
+      <>
+        <p className={styles.Paragraph}>
+          To fix this, upgrade the DevTools NPM package:
+        </p>
+        <pre className={styles.NpmCommand}>
+          {upgradeInstructions}
+          <Button
+            onClick={withPermissionsCheck(
+              {permissions: ['clipboardWrite']},
+              () => copy(upgradeInstructions),
+            )}
+            title="Copy upgrade command to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        </pre>
+      </>
+    );
+  } else {
+    const downgradeInstructions = `npm i -g react-devtools@${maxNpmVersion}`;
+    instructions = (
+      <>
+        <p className={styles.Paragraph}>
+          To fix this, downgrade the DevTools NPM package:
+        </p>
+        <pre className={styles.NpmCommand}>
+          {downgradeInstructions}
+          <Button
+            onClick={withPermissionsCheck(
+              {permissions: ['clipboardWrite']},
+              () => copy(downgradeInstructions),
+            )}
+            title="Copy downgrade command to clipboard">
+            <ButtonIcon type="copy" />
+          </Button>
+        </pre>
+      </>
+    );
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Column}>
+        <div className={styles.Title}>Unsupported DevTools backend version</div>
+        <p className={styles.Paragraph}>
+          You are running <code>react-devtools</code> version{' '}
+          <span className={styles.Version}>{DEVTOOLS_VERSION}</span>.
+        </p>
+        <p className={styles.Paragraph}>
+          This requires bridge protocol{' '}
+          <span className={styles.Version}>
+            version {currentBridgeProtocol.version}
+          </span>
+          . However the current backend version uses bridge protocol{' '}
+          <span className={styles.Version}>version {version}</span>.
+        </p>
+        {instructions}
+        <p className={styles.Paragraph}>
+          Or{' '}
+          <a className={styles.Link} href={INSTRUCTIONS_FB_URL} target="_blank">
+            click here
+          </a>{' '}
+          for more information.
+        </p>
+      </div>
+    </Fragment>
+  );
+}
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 00000000000..c33cf79cebe
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
@@ -0,0 +1,14 @@
+.Row {  
+  display: flex;  
+  flex-direction: row;  
+  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 00000000000..717019df431
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext, useEffect, useState} from 'react';
+import {ModalDialogContext} from './ModalDialog';
+import {StoreContext} from './context';
+import {UNSUPPORTED_VERSION_URL} from '../constants';
+
+import styles from './UnsupportedVersionDialog.css';
+
+type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
+
+export default function UnsupportedVersionDialog(_: {}): null {
+  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 = () => {
+        setState('show-dialog');
+        dispatch({
+          canBeDismissed: true,
+          id: 'UnsupportedVersionDialog',
+          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 00000000000..e1c3817309f
--- /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 00000000000..13f093d2e76
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useContext, useEffect} from 'react';
+import {BridgeContext} from './context';
+import {ModalDialogContext} from './ModalDialog';
+
+import styles from './WarnIfLegacyBackendDetected.css';
+
+export default function WarnIfLegacyBackendDetected(_: {}): null {
+  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: $FlowFixMe = 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,
+            id: 'WarnIfLegacyBackendDetected',
+            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 00000000000..e04d3433c09
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {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: ReactContext<FrontendBridge> =
+  createContext<FrontendBridge>(((null: any): FrontendBridge));
+BridgeContext.displayName = 'BridgeContext';
+
+export const StoreContext: ReactContext<Store> = createContext<Store>(
+  ((null: any): Store),
+);
+StoreContext.displayName = 'StoreContext';
+
+export type ContextMenuContextType = {
+  isEnabledForInspectedElement: boolean,
+  viewAttributeSourceFunction: ViewAttributeSource | null,
+};
+
+export const ContextMenuContext: ReactContext<ContextMenuContextType> =
+  createContext<ContextMenuContextType>({
+    isEnabledForInspectedElement: false,
+    viewAttributeSourceFunction: null,
+  });
+ContextMenuContext.displayName = 'ContextMenuContext';
+
+export type OptionsContextType = {
+  readOnly: boolean,
+  hideSettings: boolean,
+  hideToggleErrorAction: boolean,
+  hideToggleSuspenseAction: boolean,
+  hideLogAction: boolean,
+  hideViewSourceAction: boolean,
+};
+
+export const OptionsContext: ReactContext<OptionsContextType> =
+  createContext<OptionsContextType>({
+    readOnly: false,
+    hideSettings: false,
+    hideToggleErrorAction: false,
+    hideToggleSuspenseAction: false,
+    hideLogAction: false,
+    hideViewSourceAction: false,
+  });
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 00000000000..2984c2fbfcd
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -0,0 +1,428 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useState,
+  useSyncExternalStore,
+  useContext,
+} from 'react';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import {StoreContext, BridgeContext} from './context';
+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: UseEditableValueState,
+  action: UseEditableValueAction,
+) {
+  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,
+    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 = () =>
+      setIsOverflowing(container.clientWidth <= totalChildWidth);
+
+    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),
+  onValueSet?: (any, string) => void,
+): [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 = useSyncExternalStore(
+    useCallback(
+      function subscribe(callback) {
+        window.addEventListener(key, callback);
+        return function unsubscribe() {
+          window.removeEventListener(key, callback);
+        };
+      },
+      [key],
+    ),
+    getValueFromLocalStorage,
+  );
+
+  const setValue = useCallback(
+    (value: $FlowFixMe) => {
+      try {
+        const valueToStore =
+          value instanceof Function ? (value: any)(storedValue) : value;
+        localStorageSetItem(key, JSON.stringify(valueToStore));
+
+        // Notify listeners that this setting has changed.
+        window.dispatchEvent(new Event(key));
+
+        if (onValueSet != null) {
+          onValueSet(valueToStore, key);
+        }
+      } 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(() => {
+    // $FlowFixMe[missing-local-annot]
+    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 handleRootNodeKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        dismissCallback();
+      }
+    };
+
+    const handleRootNodeClick: MouseEventHandler = event => {
+      if (
+        modalRef.current !== null &&
+        /* $FlowExpectedError[incompatible-call] Instead of dealing with possibly multiple realms
+         and multiple Node references to comply with Flow (e.g. checking with `event.target instanceof Node`)
+         just delegate it to contains call */
+        !modalRef.current.contains(event.target)
+      ) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        dismissCallback();
+      }
+    };
+
+    let modalRootNode = null;
+
+    // Delay until after the current call stack is empty,
+    // in case this effect is being run while an event is currently bubbling.
+    // In that case, we don't want to listen to the pre-existing event.
+    let timeoutID: null | TimeoutID = setTimeout(() => {
+      timeoutID = null;
+
+      // 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 modalDOMElement = modalRef.current;
+      if (modalDOMElement != null) {
+        modalRootNode = modalDOMElement.getRootNode();
+        modalRootNode.addEventListener('keydown', handleRootNodeKeyDown);
+        if (dismissOnClickOutside) {
+          modalRootNode.addEventListener('click', handleRootNodeClick, true);
+        }
+      }
+    }, 0);
+
+    return () => {
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+
+      if (modalRootNode !== null) {
+        modalRootNode.removeEventListener('keydown', handleRootNodeKeyDown);
+        modalRootNode.removeEventListener('click', handleRootNodeClick, true);
+      }
+    };
+  }, [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;
+}
+
+export function useHighlightHostInstance(): {
+  clearHighlightHostInstance: () => void,
+  highlightHostInstance: (id: number, scrollIntoView?: boolean) => void,
+} {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const highlightHostInstance = useCallback(
+    (id: number, scrollIntoView?: boolean = false) => {
+      const element = store.getElementByID(id);
+      if (element !== null) {
+        const isRoot = element.parentID === 0;
+        let displayName = element.displayName;
+        if (displayName !== null && element.nameProp !== null) {
+          displayName += ` name="${element.nameProp}"`;
+        }
+        if (isRoot) {
+          // Inspect screen
+          const elements: Array<{rendererID: number, id: number}> = [];
+
+          for (let i = 0; i < store.roots.length; i++) {
+            const rootID = store.roots[i];
+            const rendererID = store.getRendererIDForElement(rootID);
+            if (rendererID === null) {
+              continue;
+            }
+            elements.push({rendererID, id: rootID});
+          }
+
+          bridge.send('highlightHostInstances', {
+            displayName,
+            hideAfterTimeout: false,
+            elements,
+            scrollIntoView: scrollIntoView,
+          });
+        } else {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID !== null) {
+            bridge.send('highlightHostInstance', {
+              displayName,
+              hideAfterTimeout: false,
+              id,
+              openBuiltinElementsPanel: false,
+              rendererID,
+              scrollIntoView: scrollIntoView,
+            });
+          }
+        }
+      }
+    },
+    [store, bridge],
+  );
+
+  const clearHighlightHostInstance = useCallback(() => {
+    bridge.send('clearHostInstanceHighlight');
+  }, [bridge]);
+
+  return {
+    highlightHostInstance,
+    clearHighlightHostInstance,
+  };
+}
+
+export function useScrollToHostInstance(): (id: number) => void {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const scrollToHostInstance = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      const rendererID = store.getRendererIDForElement(id);
+      if (element !== null && rendererID !== null) {
+        bridge.send('scrollToHostInstance', {
+          id,
+          rendererID,
+        });
+      }
+    },
+    [store, bridge],
+  );
+
+  return scrollToHostInstance;
+}
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 00000000000..ad0ef8e5f0b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext} from 'react';
+import {createPortal} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary';
+import {StoreContext} from './context';
+import ThemeProvider from './ThemeProvider';
+
+export type Props = {portalContainer?: Element, ...};
+
+export default function portaledContent(
+  Component: component(...props: any),
+): component(...props: any) {
+  return function PortaledContent({portalContainer, ...rest}: Props) {
+    const store = useContext(StoreContext);
+
+    let children = (
+      <ErrorBoundary store={store}>
+        <Component {...rest} />
+      </ErrorBoundary>
+    );
+
+    if (portalContainer != null) {
+      // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
+      // Because Portals render in a different DOM subtree, these variables don't propagate.
+      // So in this case, we need to re-wrap portaled content in a second ThemeProvider.
+      children = (
+        <ThemeProvider>
+          <div
+            data-react-devtools-portal-root={true}
+            style={{
+              width: '100vw',
+              height: '100vh',
+              containerName: 'devtools',
+              containerType: 'inline-size',
+            }}>
+            {children}
+          </div>
+        </ThemeProvider>
+      );
+    }
+
+    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 00000000000..db1bd7b01d7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -0,0 +1,10 @@
+:is(:root, :host) {
+  /* Font smoothing */
+  --font-smoothing: auto;
+
+  /* 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;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/useEditorURL.js b/packages/react-devtools-shared/src/devtools/views/useEditorURL.js
new file mode 100644
index 00000000000..303758d6968
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useEditorURL.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useCallback, useSyncExternalStore} from 'react';
+
+import {getOpenInEditorURL} from '../../utils';
+import {
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+} from '../../constants';
+
+const useEditorURL = (): string => {
+  const editorURL = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      window.addEventListener(
+        LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+        callback,
+      );
+      return function unsubscribe() {
+        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+        window.removeEventListener(
+          LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+          callback,
+        );
+      };
+    }, []),
+    getOpenInEditorURL,
+  );
+  return editorURL;
+};
+
+export default useEditorURL;
diff --git a/packages/react-devtools-shared/src/devtools/views/useInferredName.js b/packages/react-devtools-shared/src/devtools/views/useInferredName.js
new file mode 100644
index 00000000000..2c93ded4691
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useInferredName.js
@@ -0,0 +1,78 @@
+import {use, useContext, useDeferredValue} from 'react';
+
+import type {ReactCallSite} from 'shared/ReactTypes';
+
+import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
+
+import type {SerializedAsyncInfo} from 'react-devtools-shared/src/frontend/types';
+
+import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
+
+import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';
+
+export default function useInferredName(
+  asyncInfo: SerializedAsyncInfo,
+): string {
+  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
+  const name = asyncInfo.awaited.name;
+  let inferNameFromStack = null;
+  if (!name || name === 'Promise' || name === 'lazy') {
+    // If all we have is a generic name, we can try to infer a better name from
+    // the stack. We only do this if the stack has more than one frame since
+    // otherwise it's likely to just be the name of the component which isn't better.
+    const bestStack = asyncInfo.awaited.stack || asyncInfo.stack;
+    if (bestStack !== null && bestStack.length > 1) {
+      inferNameFromStack = bestStack;
+    }
+  }
+  // Start by not source mapping and just taking the first name and upgrade to
+  // the better name asynchronously if we find one. Most of the time it'll just be
+  // the top of the stack.
+  const shouldSourceMap = useDeferredValue(inferNameFromStack !== null, false);
+  if (inferNameFromStack !== null) {
+    if (shouldSourceMap) {
+      let bestMatch = '';
+      for (let i = 0; i < inferNameFromStack.length; i++) {
+        const callSite: ReactCallSite = inferNameFromStack[i];
+        const [virtualFunctionName, virtualURL, virtualLine, virtualColumn] =
+          callSite;
+        const symbolicatedCallSite: null | SourceMappedLocation =
+          fetchFileWithCaching !== null
+            ? use(
+                symbolicateSourceWithCache(
+                  fetchFileWithCaching,
+                  virtualURL,
+                  virtualLine,
+                  virtualColumn,
+                ),
+              )
+            : null;
+        if (symbolicatedCallSite === null) {
+          // If we can't source map, we treat it as first party code. We called whatever was
+          // the previous callsite.
+          if (bestMatch === '') {
+            return virtualFunctionName || name;
+          } else {
+            return bestMatch;
+          }
+        } else if (!symbolicatedCallSite.ignored) {
+          if (bestMatch === '') {
+            // If we had no good stack frames for internal calls, just use the last
+            // first party function name.
+            return symbolicatedCallSite[0] || virtualFunctionName || name;
+          } else {
+            return bestMatch;
+          }
+        } else {
+          // This line was ignore listed, it might be the one we called into from first party.
+          bestMatch = symbolicatedCallSite[0] || virtualFunctionName;
+        }
+      }
+      return name;
+    } else {
+      return inferNameFromStack[0][0];
+    }
+  } else {
+    return name;
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/useOpenResource.js b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
new file mode 100644
index 00000000000..3a7fee5b684
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
+
+import {useCallback, useContext, useSyncExternalStore} from 'react';
+
+import ViewElementSourceContext from './Components/ViewElementSourceContext';
+
+import {getAlwaysOpenInEditor} from '../../utils';
+import useEditorURL from './useEditorURL';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../constants';
+
+import {checkConditions} from './Editor/utils';
+
+const useOpenResource = (
+  source: null | ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: null | ReactFunctionLocation | ReactCallSite,
+): [
+  boolean, // isEnabled
+  () => void, // Open Resource
+] => {
+  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
+    ViewElementSourceContext,
+  );
+
+  const editorURL = useEditorURL();
+
+  const alwaysOpenInEditor = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR, callback);
+      return function unsubscribe() {
+        window.removeEventListener(
+          LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+          callback,
+        );
+      };
+    }, []),
+    getAlwaysOpenInEditor,
+  );
+
+  // First check if this link is eligible for being open directly in the configured editor.
+  const openInEditor =
+    alwaysOpenInEditor && source !== null
+      ? checkConditions(editorURL, symbolicatedSource || source)
+      : null;
+  // 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 linkIsEnabled =
+    (openInEditor !== null && !openInEditor.shouldDisableButton) ||
+    (viewElementSourceFunction != null &&
+      source != null &&
+      (canViewElementSourceFunction == null ||
+        canViewElementSourceFunction(source, symbolicatedSource)));
+
+  const viewSource = useCallback(() => {
+    if (openInEditor !== null && !openInEditor.shouldDisableButton) {
+      // If we have configured to always open in the code editor, we do so if we can.
+      // Otherwise, we fallback to open in the local editor if possible (e.g. non-file urls).
+      window.open(openInEditor.url);
+    } else if (viewElementSourceFunction != null && source != null) {
+      viewElementSourceFunction(source, symbolicatedSource);
+    }
+  }, [openInEditor, source, symbolicatedSource]);
+
+  return [linkIsEnabled, viewSource];
+};
+
+export default useOpenResource;
diff --git a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
new file mode 100644
index 00000000000..25b5ae0547a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+import {THEME_STYLES} from '../constants';
+
+const useThemeStyles = (): any => {
+  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+
+  const style = useMemo(
+    () => ({
+      ...THEME_STYLES[displayDensity],
+      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
+    }),
+    [theme, browserTheme, displayDensity],
+  );
+
+  return style;
+};
+
+export default useThemeStyles;
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 00000000000..a2d254bc27d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isArray from 'react-devtools-shared/src/isArray';
+
+import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+
+// $FlowFixMe[method-unbinding]
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+export function alphaSortEntries(
+  entryA: [string, mixed],
+  entryB: [string, mixed],
+): number {
+  const a = entryA[0];
+  const b = entryB[0];
+  if (String(+a) === a) {
+    if (String(+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.slice(1);
+    // Cut off last slash, but only if it's there
+    if (string[string.length - 1] === '/') {
+      string = string.slice(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 (isArray(value)) {
+        sanitize(value);
+      } else if (typeof value === 'object') {
+        sanitize(value);
+      }
+    }
+  }
+}
+
+export function serializeDataForCopy(props: Object): string {
+  const cloned = isArray(props) ? props.slice(0) : Object.assign({}, props);
+
+  sanitize(cloned);
+
+  try {
+    return JSON.stringify(cloned, null, 2);
+  } catch (error) {
+    return '';
+  }
+}
+
+export function serializeHooksForCopy(hooks: HooksTree | null): string {
+  // $FlowFixMe[not-an-object] "HooksTree is not an object"
+  const cloned = Object.assign(([]: Array<any>), hooks);
+
+  const queue = [...cloned];
+
+  while (queue.length > 0) {
+    const current = queue.pop();
+
+    // These aren't meaningful
+    // $FlowFixMe[incompatible-use]
+    delete current.id;
+    // $FlowFixMe[incompatible-use]
+    delete current.isStateEditable;
+
+    // $FlowFixMe[incompatible-use]
+    if (current.subHooks.length > 0) {
+      // $FlowFixMe[incompatible-use]
+      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.slice(0, Math.floor(maxLength / 2)) +
+      '…' +
+      text.slice(length - Math.ceil(maxLength / 2) - 1)
+    );
+  } else {
+    return text;
+  }
+}
+
+export function pluralize(word: string): string {
+  if (!/^[a-z]+$/i.test(word)) {
+    // If it's not a single a-z word, give up.
+    return word;
+  }
+
+  // Bail out if it's already plural.
+  switch (word) {
+    case 'men':
+    case 'women':
+    case 'children':
+    case 'feet':
+    case 'teeth':
+    case 'mice':
+    case 'people':
+      return word;
+  }
+
+  if (
+    /(ches|shes|ses|xes|zes)$/i.test(word) ||
+    /[^s]ies$/i.test(word) ||
+    /ves$/i.test(word) ||
+    /[^s]s$/i.test(word)
+  ) {
+    return word;
+  }
+
+  switch (word) {
+    case 'man':
+      return 'men';
+    case 'woman':
+      return 'women';
+    case 'child':
+      return 'children';
+    case 'foot':
+      return 'feet';
+    case 'tooth':
+      return 'teeth';
+    case 'mouse':
+      return 'mice';
+    case 'person':
+      return 'people';
+  }
+
+  // Words ending in s, x, z, ch, sh → add "es"
+  if (/(s|x|z|ch|sh)$/i.test(word)) return word + 'es';
+
+  // Words ending in consonant + y → replace y with "ies"
+  if (/[bcdfghjklmnpqrstvwxz]y$/i.test(word)) return word.slice(0, -1) + 'ies';
+
+  // Words ending in f or fe → replace with "ves"
+  if (/(?:f|fe)$/i.test(word)) return word.replace(/(?:f|fe)$/i, 'ves');
+
+  // Default: just add "s"
+  return word + 's';
+}
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
new file mode 100644
index 00000000000..c4dfa3b7ca0
--- /dev/null
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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__} from 'react-devtools-shared/src/constants';
+
+import type {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+import * as React from 'react';
+
+const TIMEOUT = 30000;
+
+type Module = any;
+type ModuleLoaderFunction = () => Thenable<Module>;
+
+// This is intentionally a module-level Map, rather than a React-managed one.
+// Otherwise, refreshing the inspected element cache would also clear this cache.
+// Modules are static anyway.
+const moduleLoaderFunctionToModuleMap: Map<ModuleLoaderFunction, Module> =
+  new Map();
+function readRecord<T>(record: Thenable<T>): T | null {
+  if (typeof React.use === 'function') {
+    try {
+      // eslint-disable-next-line react-hooks-published/rules-of-hooks
+      return React.use(record);
+    } catch (x) {
+      if (x === null) {
+        return null;
+      }
+      throw x;
+    }
+  }
+  if (record.status === 'fulfilled') {
+    return record.value;
+  } else if (record.status === 'rejected') {
+    return null;
+  } else {
+    throw record;
+  }
+}
+
+// TODO Flow type
+export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
+  let record = moduleLoaderFunctionToModuleMap.get(moduleLoaderFunction);
+
+  if (__DEBUG__) {
+    console.log(
+      `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}")`,
+    );
+  }
+
+  if (!record) {
+    const callbacks = new Set<(value: any) => mixed>();
+    const rejectCallbacks = new Set<(reason: mixed) => mixed>();
+    const thenable: Thenable<Module> = {
+      status: 'pending',
+      value: null,
+      reason: null,
+      then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
+        callbacks.add(callback);
+        rejectCallbacks.add(reject);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Loading module "${moduleLoaderFunction.name}"`,
+    };
+
+    const wake = () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+        timeoutID = null;
+      }
+
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+      rejectCallbacks.clear();
+    };
+    const wakeRejections = () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+        timeoutID = null;
+      }
+
+      // This assumes they won't throw.
+      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.clear();
+      callbacks.clear();
+    };
+
+    record = thenable;
+
+    let didTimeout = false;
+
+    moduleLoaderFunction().then(
+      module => {
+        if (__DEBUG__) {
+          console.log(
+            `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") then()`,
+          );
+        }
+
+        if (didTimeout) {
+          return;
+        }
+
+        const fulfilledThenable: FulfilledThenable<Module> = (thenable: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = module;
+
+        wake();
+      },
+      error => {
+        if (__DEBUG__) {
+          console.log(
+            `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") catch()`,
+          );
+        }
+
+        if (didTimeout) {
+          return;
+        }
+
+        console.log(error);
+
+        const rejectedThenable: RejectedThenable<Module> = (thenable: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = error;
+
+        wakeRejections();
+      },
+    );
+
+    // Eventually timeout and stop trying to load the module.
+    let timeoutID: null | TimeoutID = setTimeout(function onTimeout() {
+      if (__DEBUG__) {
+        console.log(
+          `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") onTimeout()`,
+        );
+      }
+
+      timeoutID = null;
+
+      didTimeout = true;
+
+      const rejectedThenable: RejectedThenable<Module> = (thenable: any);
+      rejectedThenable.status = 'rejected';
+      rejectedThenable.reason = null;
+
+      wakeRejections();
+    }, TIMEOUT);
+
+    moduleLoaderFunctionToModuleMap.set(moduleLoaderFunction, record);
+  }
+
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  const response = readRecord(record);
+  return response;
+}
diff --git a/packages/react-devtools-shared/src/errors/ElementPollingCancellationError.js b/packages/react-devtools-shared/src/errors/ElementPollingCancellationError.js
new file mode 100644
index 00000000000..c30a9f77a58
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/ElementPollingCancellationError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class ElementPollingCancellationError extends Error {
+  constructor() {
+    super();
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, ElementPollingCancellationError);
+    }
+
+    this.name = 'ElementPollingCancellationError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/errors/PermissionNotGrantedError.js b/packages/react-devtools-shared/src/errors/PermissionNotGrantedError.js
new file mode 100644
index 00000000000..dc9e4ad734e
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/PermissionNotGrantedError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class PermissionNotGrantedError extends Error {
+  constructor() {
+    super("User didn't grant the required permission to perform an action");
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, PermissionNotGrantedError);
+    }
+
+    this.name = 'PermissionNotGrantedError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/errors/TimeoutError.js b/packages/react-devtools-shared/src/errors/TimeoutError.js
new file mode 100644
index 00000000000..6333d1561e3
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/TimeoutError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class TimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, TimeoutError);
+    }
+
+    this.name = 'TimeoutError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/errors/UnknownHookError.js b/packages/react-devtools-shared/src/errors/UnknownHookError.js
new file mode 100644
index 00000000000..e47aeeb90e7
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/UnknownHookError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class UnknownHookError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, UnknownHookError);
+    }
+
+    this.name = 'UnknownHookError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/errors/UserError.js b/packages/react-devtools-shared/src/errors/UserError.js
new file mode 100644
index 00000000000..584c19642e7
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/UserError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class UserError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, UserError);
+    }
+
+    this.name = 'UserError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/events.js b/packages/react-devtools-shared/src/events.js
new file mode 100644
index 00000000000..2442ec20f15
--- /dev/null
+++ b/packages/react-devtools-shared/src/events.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 class EventEmitter<Events: Object> {
+  listenersMap: Map<string, Array<Function>> = new Map();
+
+  addListener<Event: $Keys<Events>>(
+    event: Event,
+    listener: (...Events[Event]) => any,
+  ): void {
+    const listeners = this.listenersMap.get(event);
+    if (listeners === undefined) {
+      this.listenersMap.set(event, [listener]);
+    } else {
+      const index = listeners.indexOf(listener);
+      if (index < 0) {
+        listeners.push(listener);
+      }
+    }
+  }
+
+  emit<Event: $Keys<Events>>(event: Event, ...args: Events[Event]): void {
+    const listeners = this.listenersMap.get(event);
+    if (listeners !== undefined) {
+      if (listeners.length === 1) {
+        // No need to clone or try/catch
+        const listener = listeners[0];
+        listener.apply(null, args);
+      } else {
+        let didThrow = false;
+        let caughtError = null;
+
+        const clonedListeners = Array.from(listeners);
+        for (let i = 0; i < clonedListeners.length; i++) {
+          const listener = clonedListeners[i];
+          try {
+            listener.apply(null, args);
+          } catch (error) {
+            if (caughtError === null) {
+              didThrow = true;
+              caughtError = error;
+            }
+          }
+        }
+
+        if (didThrow) {
+          throw caughtError;
+        }
+      }
+    }
+  }
+
+  removeAllListeners(): void {
+    this.listenersMap.clear();
+  }
+
+  removeListener(event: $Keys<Events>, listener: Function): void {
+    const listeners = this.listenersMap.get(event);
+    if (listeners !== undefined) {
+      const index = listeners.indexOf(listener);
+      if (index >= 0) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+}
diff --git a/packages/react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility.js b/packages/react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility.js
new file mode 100644
index 00000000000..f36e4a59c3b
--- /dev/null
+++ b/packages/react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useState, useEffect} from 'react';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+
+// Events that are prefixed with `extension` will only be emitted for the browser extension implementation.
+// For other implementations, this hook will just return constant `true` value.
+export function useExtensionComponentsPanelVisibility(
+  bridge: FrontendBridge,
+): boolean {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    function onPanelShown() {
+      setIsVisible(true);
+    }
+    function onPanelHidden() {
+      setIsVisible(false);
+    }
+
+    bridge.addListener('extensionComponentsPanelShown', onPanelShown);
+    bridge.addListener('extensionComponentsPanelHidden', onPanelHidden);
+
+    return () => {
+      bridge.removeListener('extensionComponentsPanelShown', onPanelShown);
+      bridge.removeListener('extensionComponentsPanelHidden', onPanelHidden);
+    };
+  }, [bridge]);
+
+  return isVisible;
+}
diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js
new file mode 100644
index 00000000000..a78831cf229
--- /dev/null
+++ b/packages/react-devtools-shared/src/frontend/types.js
@@ -0,0 +1,356 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * WARNING:
+ * This file contains types that are designed for React DevTools UI and how it interacts with the backend.
+ * They might be used in different versions of DevTools backends.
+ * Be mindful of backwards compatibility when making changes.
+ */
+
+import type {
+  Dehydrated,
+  Unserializable,
+} from 'react-devtools-shared/src/hydration';
+import type {ReactFunctionLocation, ReactStackTrace} from 'shared/ReactTypes';
+import type {UnknownSuspendersReason} from '../constants';
+
+export type BrowserTheme = 'dark' | 'light';
+
+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;
+export const ElementTypeTracingMarker = 14;
+export const ElementTypeVirtual = 15;
+export const ElementTypeViewTransition = 16;
+export const ElementTypeActivity = 17;
+
+// 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
+  | 14
+  | 15
+  | 16
+  | 17;
+
+// 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 const ComponentFilterEnvironmentName = 5;
+export const ComponentFilterActivitySlice = 6;
+
+export type ComponentFilterType = 1 | 2 | 3 | 4 | 5 | 6;
+
+// 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 EnvironmentNameComponentFilter = {
+  isEnabled: boolean,
+  isValid: boolean,
+  type: 5,
+  value: string,
+};
+
+export type ActivitySliceFilter = {
+  type: 6,
+  activityID: Element['id'],
+  rendererID: number,
+  isValid: boolean,
+  isEnabled: boolean,
+};
+
+export type ComponentFilter =
+  | BooleanComponentFilter
+  | ElementTypeComponentFilter
+  | RegExpComponentFilter
+  | EnvironmentNameComponentFilter
+  | ActivitySliceFilter;
+
+export type HookName = string | null;
+// Map of hook source ("<filename>:<line-number>:<column-number>") to name.
+// Hook source is used instead of the hook itself because the latter is not stable between element inspections.
+// We use a Map rather than an Array because of nested hooks and traversal ordering.
+export type HookSourceLocationKey = string;
+export type HookNames = Map<HookSourceLocationKey, HookName>;
+
+export type LRUCache<K, V> = {
+  del: (key: K) => void,
+  get: (key: K) => V,
+  has: (key: K) => boolean,
+  reset: () => void,
+  set: (key: K, value: V) => void,
+};
+
+export type StyleXPlugin = {
+  sources: Array<string>,
+  resolvedStyles: Object,
+};
+
+export type Plugins = {
+  stylex: StyleXPlugin | null,
+};
+
+export const StrictMode = 1;
+
+// Each element on the frontend corresponds to an ElementID (e.g. 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 updated 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,
+  nameProp: null | string,
+
+  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,
+
+  // This element is not in a StrictMode compliant subtree.
+  // Only true for React versions supporting StrictMode.
+  isStrictModeNonCompliant: boolean,
+
+  // If component is compiled with Forget, the backend will send its name as Forget(...)
+  // Later, on the frontend side, we will strip HOC names and Forget prefix.
+  compiledWithForget: boolean,
+};
+
+export type Rect = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
+export type SuspenseTimelineStep = {
+  /**
+   * The first step is either a host root (initial paint) or Activity (Transition).
+   * Subsequent steps are always Suspense nodes.
+   */
+  id: SuspenseNode['id'] | Element['id'], // TODO: Will become a group.
+  environment: null | string,
+  endTime: number,
+};
+
+export type SuspenseNode = {
+  id: Element['id'],
+  parentID: SuspenseNode['id'] | 0,
+  children: Array<SuspenseNode['id']>,
+  name: string | null,
+  rects: null | Array<Rect>,
+  hasUniqueSuspenders: boolean,
+  isSuspended: boolean,
+  environments: Array<string>,
+  endTime: number,
+};
+
+// Serialized version of ReactIOInfo
+export type SerializedIOInfo = {
+  name: string,
+  description: string,
+  start: number,
+  end: number,
+  byteSize: null | number,
+  value: null | Promise<mixed>,
+  env: null | string,
+  owner: null | SerializedElement,
+  stack: null | ReactStackTrace,
+};
+
+// Serialized version of ReactAsyncInfo
+export type SerializedAsyncInfo = {
+  awaited: SerializedIOInfo,
+  env: null | string,
+  owner: null | SerializedElement,
+  stack: null | ReactStackTrace,
+};
+
+export type SerializedElement = {
+  displayName: string | null,
+  id: number,
+  key: number | string | null,
+  env: null | string,
+  stack: null | ReactStackTrace,
+  hocDisplayNames: Array<string> | null,
+  compiledWithForget: boolean,
+  type: ElementType,
+};
+
+export type OwnersList = {
+  id: number,
+  owners: Array<SerializedElement> | null,
+};
+
+export type InspectedElementResponseType =
+  | 'error'
+  | 'full-data'
+  | 'hydrated-path'
+  | 'no-change'
+  | 'not-found';
+
+export type InspectedElementPath = Array<string | number>;
+
+export type InspectedElement = {
+  id: number,
+
+  // Does the current renderer support editable hooks and function props?
+  canEditHooks: boolean,
+  canEditFunctionProps: boolean,
+
+  // Does the current renderer support advanced editing interface?
+  canEditHooksAndDeletePaths: boolean,
+  canEditHooksAndRenamePaths: boolean,
+  canEditFunctionPropsDeletePaths: boolean,
+  canEditFunctionPropsRenamePaths: boolean,
+
+  // Is this Error, and can its value be overridden now?
+  isErrored: boolean,
+  canToggleError: boolean,
+
+  // Is this Suspense, and can its value be overridden now?
+  canToggleSuspense: boolean,
+  // If this Element is suspended. Currently only set on Suspense boundaries.
+  isSuspended: boolean | null,
+
+  // 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,
+  key: number | string | null,
+  errors: Array<[string, number]>,
+  warnings: Array<[string, number]>,
+
+  // Things that suspended this Instances
+  suspendedBy: Object,
+  // Minimum start time to maximum end time + a potential (not actual) throttle, within the nearest boundary.
+  suspendedByRange: null | [number, number],
+  unknownSuspenders: UnknownSuspendersReason,
+
+  // List of owners
+  owners: Array<SerializedElement> | null,
+
+  // Environment name that this component executed in or null for the client
+  env: string | null,
+
+  // Location of component in source code.
+  source: ReactFunctionLocation | null,
+
+  // The location of the JSX creation.
+  stack: ReactStackTrace | null,
+
+  type: ElementType,
+
+  // Meta information about the root this element belongs to.
+  rootType: string | null,
+
+  // Meta information about the renderer that created this element.
+  rendererPackageName: string | null,
+  rendererVersion: string | null,
+
+  // UI plugins/visualizations for the inspected element.
+  plugins: Plugins,
+
+  // React Native only.
+  nativeTag: number | null,
+};
+
+// TODO: Add profiling type
+
+type Data =
+  | string
+  | Dehydrated
+  | Unserializable
+  | Array<Dehydrated>
+  | Array<Unserializable>
+  | {[string]: Data};
+
+export type DehydratedData = {
+  cleaned: Array<Array<string | number>>,
+  data: Data,
+  unserializable: Array<Array<string | number>>,
+};
diff --git a/packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js b/packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js
new file mode 100644
index 00000000000..d87db825464
--- /dev/null
+++ b/packages/react-devtools-shared/src/frontend/utils/withPermissionsCheck.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {PermissionNotGrantedError} from 'react-devtools-shared/src/errors/PermissionNotGrantedError';
+
+type SupportedPermission = 'clipboardWrite';
+type Permissions = Array<SupportedPermission>;
+type PermissionsOptions = {permissions: Permissions};
+
+// browser.permissions is not available for DevTools pages in Firefox
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1796933
+// We are going to assume that requested permissions are not optional.
+export function withPermissionsCheck<T: (...$ReadOnlyArray<empty>) => mixed>(
+  options: PermissionsOptions,
+  callback: T,
+): T | (() => Promise<ReturnType<T>>) {
+  if (!__IS_CHROME__ && !__IS_EDGE__) {
+    return callback;
+  } else {
+    return async () => {
+      const granted = await chrome.permissions.request(options);
+      if (granted) {
+        return callback();
+      }
+
+      return Promise.reject(new PermissionNotGrantedError());
+    };
+  }
+}
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
new file mode 100644
index 00000000000..97f8230b6a2
--- /dev/null
+++ b/packages/react-devtools-shared/src/hook.js
@@ -0,0 +1,711 @@
+/**
+ * Install the hook on window, which is an event emitter.
+ * Note: this global hook __REACT_DEVTOOLS_GLOBAL_HOOK__ is a de facto public API.
+ * It's especially important to avoid creating direct dependency on the DevTools Backend.
+ * That's why we still inline the whole event emitter implementation,
+ * the string format implementation, and part of the console implementation here.
+ *
+ * @flow
+ */
+
+import type {
+  DevToolsHook,
+  Handler,
+  ReactRenderer,
+  RendererID,
+  RendererInterface,
+  DevToolsBackend,
+  DevToolsHookSettings,
+  ProfilingSettings,
+} from './backend/types';
+
+import {
+  FIREFOX_CONSOLE_DIMMING_COLOR,
+  ANSI_STYLE_DIMMING_TEMPLATE,
+  ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
+} from 'react-devtools-shared/src/constants';
+import attachRenderer from './attachRenderer';
+import formatConsoleArguments from 'react-devtools-shared/src/backend/utils/formatConsoleArguments';
+import formatWithStyles from 'react-devtools-shared/src/backend/utils/formatWithStyles';
+
+// React's custom built component stack strings match "\s{4}in"
+// Chrome's prefix matches "\s{4}at"
+const PREFIX_REGEX = /\s{4}(in|at)\s{1}/;
+// Firefox and Safari have no prefix ("")
+// but we can fallback to looking for location info (e.g. "foo.js:12:345")
+const ROW_COLUMN_NUMBER_REGEX = /:\d+:\d+(\n|$)/;
+
+function isStringComponentStack(text: string): boolean {
+  return PREFIX_REGEX.test(text) || ROW_COLUMN_NUMBER_REGEX.test(text);
+}
+
+// We add a suffix to some frames that older versions of React didn't do.
+// To compare if it's equivalent we strip out the suffix to see if they're
+// still equivalent. Similarly, we sometimes use [] and sometimes () so we
+// strip them to for the comparison.
+const frameDiffs = / \(\<anonymous\>\)$|\@unknown\:0\:0$|\(|\)|\[|\]/gm;
+function areStackTracesEqual(a: string, b: string): boolean {
+  return a.replace(frameDiffs, '') === b.replace(frameDiffs, '');
+}
+
+const targetConsole: Object = console;
+
+const defaultProfilingSettings: ProfilingSettings = {
+  recordChangeDescriptions: false,
+  recordTimeline: false,
+};
+
+export function installHook(
+  target: any,
+  maybeSettingsOrSettingsPromise?:
+    | DevToolsHookSettings
+    | Promise<DevToolsHookSettings>,
+  shouldStartProfilingNow: boolean = false,
+  profilingSettings: ProfilingSettings = defaultProfilingSettings,
+): DevToolsHook | null {
+  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
+    return null;
+  }
+
+  function detectReactBuildType(renderer: ReactRenderer) {
+    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.
+      }
+
+      // $FlowFixMe[method-unbinding]
+      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 {
+      // $FlowFixMe[method-unbinding]
+      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://react.dev/link/perf-use-production-build',
+          );
+        });
+      }
+    } catch (err) {}
+  }
+
+  // TODO: isProfiling should be stateful, and we should update it once profiling is finished
+  const isProfiling = shouldStartProfilingNow;
+  let uidCounter = 0;
+  function inject(renderer: ReactRenderer): number {
+    const id = ++uidCounter;
+    renderers.set(id, renderer);
+
+    const reactBuildType = hasDetectedBadDCE
+      ? 'deadcode'
+      : detectReactBuildType(renderer);
+
+    hook.emit('renderer', {
+      id,
+      renderer,
+      reactBuildType,
+    });
+
+    const rendererInterface = attachRenderer(
+      hook,
+      id,
+      renderer,
+      target,
+      isProfiling,
+      profilingSettings,
+    );
+    if (rendererInterface != null) {
+      hook.rendererInterfaces.set(id, rendererInterface);
+      hook.emit('renderer-attached', {id, rendererInterface});
+    } else {
+      hook.hasUnsupportedRendererAttached = true;
+      hook.emit('unsupported-renderer-version');
+    }
+
+    return id;
+  }
+
+  let hasDetectedBadDCE = false;
+
+  function sub(event: string, fn: Handler) {
+    hook.on(event, fn);
+    return () => hook.off(event, fn);
+  }
+
+  function on(event: string, fn: Handler) {
+    if (!listeners[event]) {
+      listeners[event] = [];
+    }
+    listeners[event].push(fn);
+  }
+
+  function off(event: string, fn: Handler) {
+    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: string, data: any) {
+    if (listeners[event]) {
+      listeners[event].map(fn => fn(data));
+    }
+  }
+
+  function getFiberRoots(rendererID: RendererID) {
+    const roots = fiberRoots;
+    if (!roots[rendererID]) {
+      roots[rendererID] = new Set();
+    }
+    return roots[rendererID];
+  }
+
+  function onCommitFiberUnmount(rendererID: RendererID, fiber: any) {
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handleCommitFiberUnmount(fiber);
+    }
+  }
+
+  function onCommitFiberRoot(
+    rendererID: RendererID,
+    root: any,
+    priorityLevel: void | number,
+  ) {
+    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);
+    }
+  }
+
+  function onPostCommitFiberRoot(rendererID: RendererID, root: any) {
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handlePostCommitFiberRoot(root);
+    }
+  }
+
+  let isRunningDuringStrictModeInvocation = false;
+  function setStrictMode(rendererID: RendererID, isStrictMode: boolean) {
+    isRunningDuringStrictModeInvocation = isStrictMode;
+
+    if (isStrictMode) {
+      patchConsoleForStrictMode();
+    } else {
+      unpatchConsoleForStrictMode();
+    }
+  }
+
+  const unpatchConsoleCallbacks = [];
+  // For StrictMode we patch console once we are running in StrictMode and unpatch right after it
+  // So patching could happen multiple times during the runtime
+  // Notice how we don't patch error or warn methods, because they are already patched in patchConsoleForErrorsAndWarnings
+  // This will only happen once, when hook is installed
+  function patchConsoleForStrictMode() {
+    // Don't patch console in case settings were not injected
+    if (!hook.settings) {
+      return;
+    }
+
+    // Don't patch twice
+    if (unpatchConsoleCallbacks.length > 0) {
+      return;
+    }
+
+    // At this point 'error', 'warn', and 'trace' methods are already patched
+    // by React DevTools hook to append component stacks and other possible features.
+    const consoleMethodsToOverrideForStrictMode = [
+      'group',
+      'groupCollapsed',
+      'info',
+      'log',
+    ];
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const method of consoleMethodsToOverrideForStrictMode) {
+      const originalMethod = targetConsole[method];
+      const overrideMethod: (...args: Array<any>) => void = (
+        ...args: any[]
+      ) => {
+        const settings = hook.settings;
+        // Something unexpected happened, fallback to just printing the console message.
+        if (settings == null) {
+          originalMethod(...args);
+          return;
+        }
+
+        if (settings.hideConsoleLogsInStrictMode) {
+          return;
+        }
+
+        if (settings.disableSecondConsoleLogDimmingInStrictMode) {
+          // Don't dim the console logs
+          originalMethod(...args);
+        } else {
+          // Dim the text color of the double logs if we're not hiding them.
+          // Firefox doesn't support ANSI escape sequences
+          if (__IS_FIREFOX__) {
+            originalMethod(
+              ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_COLOR),
+            );
+          } else {
+            originalMethod(
+              ANSI_STYLE_DIMMING_TEMPLATE,
+              ...formatConsoleArguments(...args),
+            );
+          }
+        }
+      };
+
+      targetConsole[method] = overrideMethod;
+      unpatchConsoleCallbacks.push(() => {
+        targetConsole[method] = originalMethod;
+      });
+    }
+  }
+
+  function unpatchConsoleForStrictMode() {
+    unpatchConsoleCallbacks.forEach(callback => callback());
+    unpatchConsoleCallbacks.length = 0;
+  }
+
+  type StackFrameString = string;
+
+  const openModuleRangesStack: Array<StackFrameString> = [];
+  const moduleRanges: Array<[StackFrameString, StackFrameString]> = [];
+
+  function getTopStackFrameString(error: Error): StackFrameString | null {
+    const frames = error.stack.split('\n');
+    const frame = frames.length > 1 ? frames[1] : null;
+    return frame;
+  }
+
+  function getInternalModuleRanges(): Array<
+    [StackFrameString, StackFrameString],
+  > {
+    return moduleRanges;
+  }
+
+  function registerInternalModuleStart(error: Error) {
+    const startStackFrame = getTopStackFrameString(error);
+    if (startStackFrame !== null) {
+      openModuleRangesStack.push(startStackFrame);
+    }
+  }
+
+  function registerInternalModuleStop(error: Error) {
+    if (openModuleRangesStack.length > 0) {
+      const startStackFrame = openModuleRangesStack.pop();
+      const stopStackFrame = getTopStackFrameString(error);
+      if (stopStackFrame !== null) {
+        // $FlowFixMe[incompatible-call]
+        moduleRanges.push([startStackFrame, stopStackFrame]);
+      }
+    }
+  }
+
+  // For Errors and Warnings we only patch console once
+  function patchConsoleForErrorsAndWarnings() {
+    // Don't patch console in case settings were not injected
+    if (!hook.settings) {
+      return;
+    }
+
+    const consoleMethodsToOverrideForErrorsAndWarnings = [
+      'error',
+      'trace',
+      'warn',
+    ];
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const method of consoleMethodsToOverrideForErrorsAndWarnings) {
+      const originalMethod = targetConsole[method];
+      const overrideMethod: (...args: Array<any>) => void = (...args) => {
+        const settings = hook.settings;
+        // Something unexpected happened, fallback to just printing the console message.
+        if (settings == null) {
+          originalMethod(...args);
+          return;
+        }
+
+        if (
+          isRunningDuringStrictModeInvocation &&
+          settings.hideConsoleLogsInStrictMode
+        ) {
+          return;
+        }
+
+        let injectedComponentStackAsFakeError = false;
+        let alreadyHasComponentStack = false;
+        if (settings.appendComponentStack) {
+          const lastArg = args.length > 0 ? args[args.length - 1] : null;
+          alreadyHasComponentStack =
+            typeof lastArg === 'string' && isStringComponentStack(lastArg); // The last argument should be a component stack.
+        }
+
+        const shouldShowInlineWarningsAndErrors =
+          settings.showInlineWarningsAndErrors &&
+          (method === 'error' || method === 'warn');
+
+        // Search for the first renderer that has a current Fiber.
+        // 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 (const rendererInterface of hook.rendererInterfaces.values()) {
+          const {onErrorOrWarning, getComponentStack} = rendererInterface;
+          try {
+            if (shouldShowInlineWarningsAndErrors) {
+              // patch() is called by two places: (1) the hook and (2) the renderer backend.
+              // The backend is what implements a message queue, so it's the only one that injects onErrorOrWarning.
+              if (onErrorOrWarning != null) {
+                onErrorOrWarning(
+                  ((method: any): 'error' | 'warn'),
+                  args.slice(),
+                );
+              }
+            }
+          } catch (error) {
+            // Don't let a DevTools or React internal error interfere with logging.
+            setTimeout(() => {
+              throw error;
+            }, 0);
+          }
+
+          try {
+            if (settings.appendComponentStack && getComponentStack != null) {
+              // This needs to be directly in the wrapper so we can pop exactly one frame.
+              const topFrame = Error('react-stack-top-frame');
+              const match = getComponentStack(topFrame);
+              if (match !== null) {
+                const {enableOwnerStacks, componentStack} = match;
+                // Empty string means we have a match but no component stack.
+                // We don't need to look in other renderers but we also don't add anything.
+                if (componentStack !== '') {
+                  // Create a fake Error so that when we print it we get native source maps. Every
+                  // browser will print the .stack property of the error and then parse it back for source
+                  // mapping. Rather than print the internal slot. So it doesn't matter that the internal
+                  // slot doesn't line up.
+                  const fakeError = new Error('');
+                  // In Chromium, only the stack property is printed but in Firefox the <name>:<message>
+                  // gets printed so to make the colon make sense, we name it so we print Stack:
+                  // and similarly Safari leave an expandable slot.
+                  if (__IS_CHROME__ || __IS_EDGE__) {
+                    // Before sending the stack to Chrome DevTools for formatting,
+                    // V8 will reconstruct this according to the template <name>: <message><stack-frames>
+                    // https://source.chromium.org/chromium/chromium/src/+/main:v8/src/inspector/value-mirror.cc;l=252-311;drc=bdc48d1b1312cc40c00282efb1c9c5f41dcdca9a
+                    // It has to start with ^[\w.]*Error\b to trigger stack formatting.
+                    fakeError.name = enableOwnerStacks
+                      ? 'Error Stack'
+                      : 'Error Component Stack'; // This gets printed
+                  } else {
+                    fakeError.name = enableOwnerStacks
+                      ? 'Stack'
+                      : 'Component Stack'; // This gets printed
+                  }
+                  // In Chromium, the stack property needs to start with ^[\w.]*Error\b to trigger stack
+                  // formatting. Otherwise it is left alone. So we prefix it. Otherwise we just override it
+                  // to our own stack.
+                  fakeError.stack =
+                    __IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__
+                      ? (enableOwnerStacks
+                          ? 'Error Stack:'
+                          : 'Error Component Stack:') + componentStack
+                      : componentStack;
+
+                  if (alreadyHasComponentStack) {
+                    // Only modify the component stack if it matches what we would've added anyway.
+                    // Otherwise we assume it was a non-React stack.
+                    if (
+                      areStackTracesEqual(args[args.length - 1], componentStack)
+                    ) {
+                      const firstArg = args[0];
+                      if (
+                        args.length > 1 &&
+                        typeof firstArg === 'string' &&
+                        firstArg.endsWith('%s')
+                      ) {
+                        args[0] = firstArg.slice(0, firstArg.length - 2); // Strip the %s param
+                      }
+                      args[args.length - 1] = fakeError;
+                      injectedComponentStackAsFakeError = true;
+                    }
+                  } else {
+                    args.push(fakeError);
+                    injectedComponentStackAsFakeError = true;
+                  }
+                }
+
+                // Don't add stacks from other renderers.
+                break;
+              }
+            }
+          } catch (error) {
+            // Don't let a DevTools or React internal error interfere with logging.
+            setTimeout(() => {
+              throw error;
+            }, 0);
+          }
+        }
+
+        if (settings.breakOnConsoleErrors) {
+          // --- Welcome to debugging with React DevTools ---
+          // This debugger statement means that you've enabled the "break on warnings" feature.
+          // Use the browser's Call Stack panel to step out of this override function
+          // to where the original warning or error was logged.
+          // eslint-disable-next-line no-debugger
+          debugger;
+        }
+
+        if (
+          isRunningDuringStrictModeInvocation &&
+          !settings.disableSecondConsoleLogDimmingInStrictMode
+        ) {
+          // Dim the text color of the double logs if we're not hiding them.
+          // Firefox doesn't support ANSI escape sequences
+          if (__IS_FIREFOX__) {
+            let argsWithCSSStyles = formatWithStyles(
+              args,
+              FIREFOX_CONSOLE_DIMMING_COLOR,
+            );
+
+            if (injectedComponentStackAsFakeError) {
+              argsWithCSSStyles = [
+                `${argsWithCSSStyles[0]} %o`,
+                ...argsWithCSSStyles.slice(1),
+              ];
+            }
+
+            originalMethod(...argsWithCSSStyles);
+          } else {
+            originalMethod(
+              injectedComponentStackAsFakeError
+                ? ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK
+                : ANSI_STYLE_DIMMING_TEMPLATE,
+              ...formatConsoleArguments(...args),
+            );
+          }
+        } else {
+          originalMethod(...args);
+        }
+      };
+
+      targetConsole[method] = overrideMethod;
+    }
+  }
+
+  // TODO: More meaningful names for "rendererInterfaces" and "renderers".
+  const fiberRoots: {[RendererID]: Set<mixed>} = {};
+  const rendererInterfaces = new Map<RendererID, RendererInterface>();
+  const listeners: {[string]: Array<Handler>} = {};
+  const renderers = new Map<RendererID, ReactRenderer>();
+  const backends = new Map<string, DevToolsBackend>();
+
+  const hook: DevToolsHook = {
+    rendererInterfaces,
+    listeners,
+
+    backends,
+
+    // Fast Refresh for web relies on this.
+    renderers,
+    hasUnsupportedRendererAttached: false,
+
+    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 Flight Client checks the hook for this to ensure DevTools is new enough.
+    supportsFlight: true,
+
+    // React calls these methods.
+    checkDCE,
+    onCommitFiberUnmount,
+    onCommitFiberRoot,
+    // React v18.0+
+    onPostCommitFiberRoot,
+    setStrictMode,
+
+    // Schedule Profiler runtime helpers.
+    // These internal React modules to report their own boundaries
+    // which in turn enables the profiler to dim or filter internal frames.
+    getInternalModuleRanges,
+    registerInternalModuleStart,
+    registerInternalModuleStop,
+  };
+
+  if (maybeSettingsOrSettingsPromise == null) {
+    // Set default settings
+    hook.settings = {
+      appendComponentStack: true,
+      breakOnConsoleErrors: false,
+      showInlineWarningsAndErrors: true,
+      hideConsoleLogsInStrictMode: false,
+      disableSecondConsoleLogDimmingInStrictMode: false,
+    };
+    patchConsoleForErrorsAndWarnings();
+  } else {
+    Promise.resolve(maybeSettingsOrSettingsPromise)
+      .then(settings => {
+        hook.settings = settings;
+        hook.emit('settingsInitialized', settings);
+
+        patchConsoleForErrorsAndWarnings();
+      })
+      .catch(() => {
+        targetConsole.error(
+          "React DevTools failed to get Console Patching settings. Console won't be patched and some console features will not work.",
+        );
+      });
+  }
+
+  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 between tests.
+      configurable: __DEV__,
+      enumerable: false,
+      get() {
+        return hook;
+      },
+    }: Object),
+  );
+
+  return hook;
+}
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
new file mode 100644
index 00000000000..5a9d1ba7d21
--- /dev/null
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -0,0 +1,230 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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__} from 'react-devtools-shared/src/constants';
+
+import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+import type {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+import type {
+  Element,
+  HookNames,
+} from 'react-devtools-shared/src/frontend/types';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+
+import * as React from 'react';
+
+import {withCallbackPerfMeasurements} from './PerformanceLoggingUtils';
+import {logEvent} from './Logger';
+
+const TIMEOUT = 30000;
+function readRecord<T>(record: Thenable<T>): T | null {
+  if (typeof React.use === 'function') {
+    try {
+      // eslint-disable-next-line react-hooks-published/rules-of-hooks
+      return React.use(record);
+    } catch (x) {
+      if (record.status === 'rejected') {
+        return null;
+      }
+      throw x;
+    }
+  }
+  if (record.status === 'fulfilled') {
+    return record.value;
+  } else if (record.status === 'rejected') {
+    return null;
+  } else {
+    throw record;
+  }
+}
+
+type LoadHookNamesFunction = (
+  hookLog: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+) => Thenable<HookNames>;
+
+// This is intentionally a module-level Map, rather than a React-managed one.
+// Otherwise, refreshing the inspected element cache would also clear this cache.
+// TODO Rethink this if the React API constraints change.
+// See https://github.com/reactwg/react-18/discussions/25#discussioncomment-980435
+let map: WeakMap<Element, Thenable<HookNames>> = new WeakMap();
+
+export function hasAlreadyLoadedHookNames(element: Element): boolean {
+  const record = map.get(element);
+  return record != null && record.status === 'fulfilled';
+}
+
+export function getAlreadyLoadedHookNames(element: Element): HookNames | null {
+  const record = map.get(element);
+  if (record != null && record.status === 'fulfilled') {
+    return record.value;
+  }
+  return null;
+}
+
+export function loadHookNames(
+  element: Element,
+  hooksTree: HooksTree,
+  loadHookNamesFunction: LoadHookNamesFunction,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+): HookNames | null {
+  let record = map.get(element);
+
+  if (__DEBUG__) {
+    console.groupCollapsed('loadHookNames() record:');
+    console.log(record);
+    console.groupEnd();
+  }
+
+  if (!record) {
+    const callbacks = new Set<(value: any) => mixed>();
+    const rejectCallbacks = new Set<(reason: mixed) => mixed>();
+    const thenable: Thenable<HookNames> = {
+      status: 'pending',
+      value: null,
+      reason: null,
+      then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
+        callbacks.add(callback);
+        rejectCallbacks.add(reject);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
+    };
+
+    let timeoutID: $FlowFixMe | null;
+    let didTimeout = false;
+    let status: 'success' | 'error' | 'timeout' | 'unknown' = 'unknown';
+    let resolvedHookNames: HookNames | null = null;
+
+    const wake = () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+        timeoutID = null;
+      }
+
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.clear();
+      rejectCallbacks.clear();
+    };
+    const wakeRejections = () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+        timeoutID = null;
+      }
+      // This assumes they won't throw.
+      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.clear();
+      callbacks.clear();
+    };
+
+    const handleLoadComplete = (durationMs: number): void => {
+      // Log duration for parsing hook names
+      logEvent({
+        event_name: 'load-hook-names',
+        event_status: status,
+        duration_ms: durationMs,
+        inspected_element_display_name: element.displayName,
+        inspected_element_number_of_hooks: resolvedHookNames?.size ?? null,
+      });
+    };
+
+    record = thenable;
+
+    withCallbackPerfMeasurements(
+      'loadHookNames',
+      done => {
+        loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
+          function onSuccess(hookNames) {
+            if (didTimeout) {
+              return;
+            }
+
+            if (__DEBUG__) {
+              console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
+            }
+
+            if (hookNames) {
+              const fulfilledThenable: FulfilledThenable<HookNames> =
+                (thenable: any);
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = hookNames;
+              status = 'success';
+              resolvedHookNames = hookNames;
+              done();
+              wake();
+            } else {
+              const notFoundThenable: RejectedThenable<HookNames> =
+                (thenable: any);
+              notFoundThenable.status = 'rejected';
+              notFoundThenable.reason = null;
+              status = 'error';
+              resolvedHookNames = hookNames;
+              done();
+              wakeRejections();
+            }
+          },
+          function onError(error) {
+            if (didTimeout) {
+              return;
+            }
+
+            if (__DEBUG__) {
+              console.log('[hookNamesCache] onError()');
+            }
+
+            console.error(error);
+
+            const rejectedThenable: RejectedThenable<HookNames> =
+              (thenable: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = null;
+
+            status = 'error';
+            done();
+            wakeRejections();
+          },
+        );
+
+        // Eventually timeout and stop trying to load names.
+        timeoutID = setTimeout(function onTimeout() {
+          if (__DEBUG__) {
+            console.log('[hookNamesCache] onTimeout()');
+          }
+
+          timeoutID = null;
+
+          didTimeout = true;
+
+          const timedoutThenable: RejectedThenable<HookNames> = (thenable: any);
+          timedoutThenable.status = 'rejected';
+          timedoutThenable.reason = null;
+
+          status = 'timeout';
+          done();
+          wakeRejections();
+        }, TIMEOUT);
+      },
+      handleLoadComplete,
+    );
+    map.set(element, record);
+  }
+
+  const response = readRecord(record);
+  return response;
+}
+
+export function clearHookNamesCache(): void {
+  map = new WeakMap();
+}
diff --git a/packages/react-devtools-shared/src/hookSourceLocation.js b/packages/react-devtools-shared/src/hookSourceLocation.js
new file mode 100644
index 00000000000..a9a3d931bcf
--- /dev/null
+++ b/packages/react-devtools-shared/src/hookSourceLocation.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {HookSourceLocationKey} from 'react-devtools-shared/src/frontend/types';
+import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
+
+export function getHookSourceLocationKey({
+  fileName,
+  lineNumber,
+  columnNumber,
+}: HookSource): HookSourceLocationKey {
+  if (fileName == null || lineNumber == null || columnNumber == null) {
+    throw Error('Hook source code location not found.');
+  }
+  return `${fileName}:${lineNumber}:${columnNumber}`;
+}
diff --git a/packages/react-devtools-shared/src/hooks/ErrorTester.js b/packages/react-devtools-shared/src/hooks/ErrorTester.js
new file mode 100644
index 00000000000..a9dd6d06377
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/ErrorTester.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ErrorStackParser from 'error-stack-parser';
+import testErrorStack, {
+  SOURCE_STACK_FRAME_LINE_NUMBER,
+} from './ErrorTesterCompiled';
+
+let sourceMapsAreAppliedToErrors: boolean | null = null;
+
+// Source maps are automatically applied to Error stack frames.
+export function areSourceMapsAppliedToErrors(): boolean {
+  if (sourceMapsAreAppliedToErrors === null) {
+    try {
+      testErrorStack();
+      sourceMapsAreAppliedToErrors = false;
+    } catch (error) {
+      const parsed = ErrorStackParser.parse(error);
+      const topStackFrame = parsed[0];
+      const lineNumber = topStackFrame.lineNumber;
+      if (lineNumber === SOURCE_STACK_FRAME_LINE_NUMBER) {
+        sourceMapsAreAppliedToErrors = true;
+      }
+    }
+  }
+
+  return sourceMapsAreAppliedToErrors === true;
+}
diff --git a/packages/react-devtools-shared/src/hooks/ErrorTesterCompiled.js b/packages/react-devtools-shared/src/hooks/ErrorTesterCompiled.js
new file mode 100644
index 00000000000..e666e4f6e04
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/ErrorTesterCompiled.js
@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.default = testErrorStack;
+exports.SOURCE_STACK_FRAME_LINE_NUMBER = void 0;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 testErrorStack() {
+  // If source maps are applied, this Error will have a stack frame with line 12.
+  throw Error('Test Error stack');
+}
+
+const SOURCE_STACK_FRAME_LINE_NUMBER = 12;
+exports.SOURCE_STACK_FRAME_LINE_NUMBER = SOURCE_STACK_FRAME_LINE_NUMBER;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RFcm9yclN0YWNrLmpzIl0sIm5hbWVzIjpbInRlc3RFcm9yclN0YWNrIiwiRXJyb3IiLCJTT1VSQ0VfU1RBQ0tfRlJBTUVfTElORV9OVU1CRVIiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUE7Ozs7Ozs7O0FBU2UsU0FBU0EsY0FBVCxHQUEwQjtBQUN2QztBQUNBLFFBQU1DLEtBQUssQ0FBQyxrQkFBRCxDQUFYO0FBQ0Q7O0FBRU0sTUFBTUMsOEJBQThCLEdBQUcsRUFBdkMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdGVzdEVyb3JyU3RhY2soKSB7XG4gIC8vIElmIHNvdXJjZSBtYXBzIGFyZSBhcHBsaWVkLCB0aGlzIEVycm9yIHdpbGwgaGF2ZSBhIHN0YWNrIGZyYW1lIHdpdGggbGluZSAxMi5cbiAgdGhyb3cgRXJyb3IoJ1Rlc3QgRXJyb3Igc3RhY2snKTtcbn1cblxuZXhwb3J0IGNvbnN0IFNPVVJDRV9TVEFDS19GUkFNRV9MSU5FX05VTUJFUiA9IDEyOyJdfQ==
+//# sourceURL=testErrorStack.js
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
new file mode 100644
index 00000000000..468905bf871
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {withSyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
+import {decode} from '@jridgewell/sourcemap-codec';
+
+import type {
+  IndexSourceMap,
+  IndexSourceMapSection,
+  BasicSourceMap,
+  MixedSourceMap,
+} from './SourceMapTypes';
+
+type SearchPosition = {
+  columnNumber: number,
+  lineNumber: number,
+};
+
+type ResultPosition = {
+  column: number,
+  line: number,
+  sourceContent: string | null,
+  sourceURL: string | null,
+  ignored: boolean,
+};
+
+export type SourceMapConsumerType = {
+  originalPositionFor: SearchPosition => ResultPosition,
+};
+
+type Mappings = Array<Array<Array<number>>>;
+
+export default function SourceMapConsumer(
+  sourceMapJSON: MixedSourceMap | IndexSourceMapSection,
+): SourceMapConsumerType {
+  if (sourceMapJSON.sections != null) {
+    return IndexedSourceMapConsumer(((sourceMapJSON: any): IndexSourceMap));
+  } else {
+    return BasicSourceMapConsumer(((sourceMapJSON: any): BasicSourceMap));
+  }
+}
+
+function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) {
+  const decodedMappings: Mappings = withSyncPerfMeasurements(
+    'Decoding source map mappings with @jridgewell/sourcemap-codec',
+    () => decode(sourceMapJSON.mappings),
+  );
+
+  function originalPositionFor({
+    columnNumber,
+    lineNumber,
+  }: SearchPosition): ResultPosition {
+    // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+    const targetColumnNumber = columnNumber - 1;
+
+    const lineMappings = decodedMappings[lineNumber - 1];
+
+    let nearestEntry = null;
+
+    let startIndex = 0;
+    let stopIndex = lineMappings.length - 1;
+    let index = -1;
+    while (startIndex <= stopIndex) {
+      index = Math.floor((stopIndex + startIndex) / 2);
+      nearestEntry = lineMappings[index];
+
+      const currentColumn = nearestEntry[0];
+      if (currentColumn === targetColumnNumber) {
+        break;
+      } else {
+        if (currentColumn > targetColumnNumber) {
+          if (stopIndex - index > 0) {
+            stopIndex = index;
+          } else {
+            index = stopIndex;
+            break;
+          }
+        } else {
+          if (index - startIndex > 0) {
+            startIndex = index;
+          } else {
+            index = startIndex;
+            break;
+          }
+        }
+      }
+    }
+
+    // We have found either the exact element, or the next-closest element.
+    // However there may be more than one such element.
+    // Make sure we always return the smallest of these.
+    while (index > 0) {
+      const previousEntry = lineMappings[index - 1];
+      const currentColumn = previousEntry[0];
+      if (currentColumn !== targetColumnNumber) {
+        break;
+      }
+      index--;
+    }
+
+    if (nearestEntry == null) {
+      // TODO maybe fall back to the runtime source instead of throwing?
+      throw Error(
+        `Could not find runtime location for line:${lineNumber} and column:${columnNumber}`,
+      );
+    }
+
+    const sourceIndex = nearestEntry[1];
+    const sourceContent =
+      sourceMapJSON.sourcesContent != null
+        ? sourceMapJSON.sourcesContent[sourceIndex]
+        : null;
+    const sourceURL = sourceMapJSON.sources[sourceIndex] ?? null;
+    const line = nearestEntry[2] + 1;
+    const column = nearestEntry[3];
+    const ignored =
+      sourceMapJSON.ignoreList != null &&
+      sourceMapJSON.ignoreList.includes(sourceIndex);
+    return {
+      column,
+      line,
+      sourceContent: ((sourceContent: any): string | null),
+      sourceURL: ((sourceURL: any): string | null),
+      ignored,
+    };
+  }
+
+  return (({
+    originalPositionFor,
+  }: any): SourceMapConsumerType);
+}
+
+type Section = {
+  +offsetColumn0: number,
+  +offsetLine0: number,
+  +map: BasicSourceMap,
+
+  // Lazily parsed only when/as the section is needed.
+  sourceMapConsumer: SourceMapConsumerType | null,
+};
+
+function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
+  let lastOffset: {
+    line: number,
+    column: number,
+    ...
+  } = {
+    line: -1,
+    column: 0,
+  };
+
+  const sections: Array<Section> = sourceMapJSON.sections.map(section => {
+    const offset: {
+      line: number,
+      column: number,
+      ...
+    } = section.offset;
+    const offsetLine0 = offset.line;
+    const offsetColumn0 = offset.column;
+
+    if (
+      offsetLine0 < lastOffset.line ||
+      (offsetLine0 === lastOffset.line && offsetColumn0 < lastOffset.column)
+    ) {
+      throw new Error('Section offsets must be ordered and non-overlapping.');
+    }
+
+    lastOffset = offset;
+
+    return {
+      offsetLine0,
+      offsetColumn0,
+      map: section.map,
+      sourceMapConsumer: null,
+    };
+  });
+
+  function originalPositionFor({
+    columnNumber,
+    lineNumber,
+  }: SearchPosition): ResultPosition {
+    // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+    const column0 = columnNumber - 1;
+    const line0 = lineNumber - 1;
+
+    // Sections must not overlap and must be sorted: https://tc39.es/source-map/#section-object
+    // Therefore the last section that has an offset less than or equal to the frame is the applicable one.
+    let left = 0;
+    let right = sections.length - 1;
+    let section: Section | null = null;
+
+    while (left <= right) {
+      // fast Math.floor
+      const middle = ~~((left + right) / 2);
+      const currentSection = sections[middle];
+
+      if (
+        currentSection.offsetLine0 < line0 ||
+        (currentSection.offsetLine0 === line0 &&
+          currentSection.offsetColumn0 <= column0)
+      ) {
+        section = currentSection;
+        left = middle + 1;
+      } else {
+        right = middle - 1;
+      }
+    }
+
+    if (section == null) {
+      // TODO maybe fall back to the runtime source instead of throwing?
+      throw Error(
+        `Could not find matching section for line:${lineNumber} and column:${columnNumber}`,
+      );
+    }
+
+    if (section.sourceMapConsumer === null) {
+      // Lazily parse the section only when it's needed.
+      // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
+      section.sourceMapConsumer = new SourceMapConsumer(section.map);
+    }
+
+    return section.sourceMapConsumer.originalPositionFor({
+      // The mappings in a Source Map section are relative to the section offset.
+      columnNumber: columnNumber - section.offsetColumn0,
+      lineNumber: lineNumber - section.offsetLine0,
+    });
+  }
+
+  return (({
+    originalPositionFor,
+  }: any): SourceMapConsumerType);
+}
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
new file mode 100644
index 00000000000..f6fe87fa245
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
@@ -0,0 +1,207 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import type {Position} from './astUtils';
+import type {
+  ReactSourceMetadata,
+  IndexSourceMap,
+  BasicSourceMap,
+  MixedSourceMap,
+} from './SourceMapTypes';
+import type {HookMap} from './generateHookMap';
+import * as util from 'source-map-js/lib/util';
+import {decodeHookMap} from './generateHookMap';
+import {getHookNameForLocation} from './getHookNameForLocation';
+
+type MetadataMap = Map<string, ?ReactSourceMetadata>;
+
+const HOOK_MAP_INDEX_IN_REACT_METADATA = 0;
+const REACT_METADATA_INDEX_IN_FB_METADATA = 1;
+const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
+const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
+
+/**
+ * Extracted from the logic in source-map-js@0.6.2's SourceMapConsumer.
+ * By default, source names are normalized using the same logic that the `source-map-js@0.6.2` package uses internally.
+ * This is crucial for keeping the sources list in sync with a `SourceMapConsumer` instance.
+ */
+function normalizeSourcePath(
+  sourceInput: string,
+  map: {+sourceRoot?: ?string, ...},
+): string {
+  const {sourceRoot} = map;
+  let source = sourceInput;
+
+  source = String(source);
+  // Some source maps produce relative source paths like "./foo.js" instead of
+  // "foo.js".  Normalize these first so that future comparisons will succeed.
+  // See bugzil.la/1090768.
+  source = util.normalize(source);
+  // Always ensure that absolute sources are internally stored relative to
+  // the source root, if the source root is absolute. Not doing this would
+  // be particularly problematic when the source root is a prefix of the
+  // source (valid, but why??). See github issue #199 and bugzil.la/1188982.
+  source =
+    sourceRoot != null && util.isAbsolute(sourceRoot) && util.isAbsolute(source)
+      ? util.relative(sourceRoot, source)
+      : source;
+  return util.computeSourceURL(sourceRoot, source);
+}
+
+/**
+ * Consumes the `x_react_sources` or  `x_facebook_sources` metadata field from a
+ * source map and exposes ways to query the React DevTools specific metadata
+ * included in those fields.
+ */
+export class SourceMapMetadataConsumer {
+  _sourceMap: MixedSourceMap;
+  _decodedHookMapCache: Map<string, HookMap>;
+  _metadataBySource: ?MetadataMap;
+
+  constructor(sourcemap: MixedSourceMap) {
+    this._sourceMap = sourcemap;
+    this._decodedHookMapCache = new Map();
+    this._metadataBySource = null;
+  }
+
+  /**
+   * Returns the Hook name assigned to a given location in the source code,
+   * and a HookMap extracted from an extended source map.
+   * See `getHookNameForLocation` for more details on implementation.
+   *
+   * When used with the `source-map` package, you'll first use
+   * `SourceMapConsumer#originalPositionFor` to retrieve a source location,
+   * then pass that location to `hookNameFor`.
+   */
+  hookNameFor({
+    line,
+    column,
+    source,
+  }: {
+    ...Position,
+    +source: ?string,
+  }): ?string {
+    if (source == null) {
+      return null;
+    }
+
+    const hookMap = this._getHookMapForSource(source);
+    if (hookMap == null) {
+      return null;
+    }
+
+    return getHookNameForLocation({line, column}, hookMap);
+  }
+
+  hasHookMap(source: ?string): boolean {
+    if (source == null) {
+      return false;
+    }
+    return this._getHookMapForSource(source) != null;
+  }
+
+  /**
+   * Prepares and caches a lookup table of metadata by source name.
+   */
+  _getMetadataBySource(): MetadataMap {
+    if (this._metadataBySource == null) {
+      this._metadataBySource = this._getMetadataObjectsBySourceNames(
+        this._sourceMap,
+      );
+    }
+
+    return this._metadataBySource;
+  }
+
+  /**
+   * Collects source metadata from the given map using the current source name
+   * normalization function. Handles both index maps (with sections) and plain
+   * maps.
+   *
+   * NOTE: If any sources are repeated in the map (which shouldn't usually happen,
+   * but is technically possible because of index maps) we only keep the
+   * metadata from the last occurrence of any given source.
+   */
+  _getMetadataObjectsBySourceNames(sourcemap: MixedSourceMap): MetadataMap {
+    if (sourcemap.mappings === undefined) {
+      const indexSourceMap: IndexSourceMap = sourcemap;
+      const metadataMap = new Map<string, ?ReactSourceMetadata>();
+      indexSourceMap.sections.forEach(section => {
+        const metadataMapForIndexMap = this._getMetadataObjectsBySourceNames(
+          section.map,
+        );
+        metadataMapForIndexMap.forEach((value, key) => {
+          metadataMap.set(key, value);
+        });
+      });
+      return metadataMap;
+    }
+
+    const metadataMap: MetadataMap = new Map();
+    const basicMap: BasicSourceMap = sourcemap;
+    const updateMap = (metadata: ReactSourceMetadata, sourceIndex: number) => {
+      let source = basicMap.sources[sourceIndex];
+      if (source != null) {
+        source = normalizeSourcePath(source, basicMap);
+        metadataMap.set(source, metadata);
+      }
+    };
+
+    if (
+      sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY) &&
+      sourcemap[REACT_SOURCES_EXTENSION_KEY] != null
+    ) {
+      const reactMetadataArray = sourcemap[REACT_SOURCES_EXTENSION_KEY];
+      reactMetadataArray.filter(Boolean).forEach(updateMap);
+    } else if (
+      sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY) &&
+      sourcemap[FB_SOURCES_EXTENSION_KEY] != null
+    ) {
+      const fbMetadataArray = sourcemap[FB_SOURCES_EXTENSION_KEY];
+      if (fbMetadataArray != null) {
+        fbMetadataArray.forEach((fbMetadata, sourceIndex) => {
+          // When extending source maps with React metadata using the
+          // x_facebook_sources field, the position at index 1 on the
+          // metadata tuple is reserved for React metadata
+          const reactMetadata =
+            fbMetadata != null
+              ? fbMetadata[REACT_METADATA_INDEX_IN_FB_METADATA]
+              : null;
+          if (reactMetadata != null) {
+            updateMap(reactMetadata, sourceIndex);
+          }
+        });
+      }
+    }
+
+    return metadataMap;
+  }
+
+  /**
+   * Decodes the function name mappings for the given source if needed, and
+   * retrieves a sorted, searchable array of mappings.
+   */
+  _getHookMapForSource(source: string): ?HookMap {
+    if (this._decodedHookMapCache.has(source)) {
+      return this._decodedHookMapCache.get(source);
+    }
+    let hookMap = null;
+    const metadataBySource = this._getMetadataBySource();
+    const normalized = normalizeSourcePath(source, this._sourceMap);
+    const metadata = metadataBySource.get(normalized);
+    if (metadata != null) {
+      const encodedHookMap = metadata[HOOK_MAP_INDEX_IN_REACT_METADATA];
+      hookMap = encodedHookMap != null ? decodeHookMap(encodedHookMap) : null;
+    }
+    if (hookMap != null) {
+      this._decodedHookMapCache.set(source, hookMap);
+    }
+    return hookMap;
+  }
+}
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
new file mode 100644
index 00000000000..42389b56b05
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import type {EncodedHookMap} from './generateHookMap';
+
+export type ReactSourceMetadata = [?EncodedHookMap];
+export type ReactSourcesArray = $ReadOnlyArray<?ReactSourceMetadata>;
+
+export type FBSourceMetadata = [?{...}, ?ReactSourceMetadata];
+export type FBSourcesArray = $ReadOnlyArray<?FBSourceMetadata>;
+
+export type BasicSourceMap = {
+  +file?: string,
+  +mappings: string,
+  +names: Array<string>,
+  +sourceRoot?: string,
+  +sources: Array<string>,
+  +sourcesContent?: Array<?string>,
+  +version: number,
+  +x_facebook_sources?: FBSourcesArray,
+  +x_react_sources?: ReactSourcesArray,
+  +ignoreList?: Array<number>,
+};
+
+export type IndexSourceMapSection = {
+  map: BasicSourceMap,
+  offset: {
+    line: number,
+    column: number,
+    ...
+  },
+  ...
+};
+
+export type IndexSourceMap = {
+  +file?: string,
+  +mappings?: void, // avoids SourceMap being a disjoint union
+  +sourcesContent?: void,
+  +sections: Array<IndexSourceMapSection>,
+  +version: number,
+  +x_facebook_sources?: FBSourcesArray,
+  +x_react_sources?: ReactSourcesArray,
+};
+
+export type MixedSourceMap = IndexSourceMap | BasicSourceMap;
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapUtils.js b/packages/react-devtools-shared/src/hooks/SourceMapUtils.js
new file mode 100644
index 00000000000..aff997653a9
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/SourceMapUtils.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import type {
+  BasicSourceMap,
+  MixedSourceMap,
+  IndexSourceMap,
+} from './SourceMapTypes';
+
+export function sourceMapIncludesSource(
+  sourcemap: MixedSourceMap,
+  source: ?string,
+): boolean {
+  if (source == null) {
+    return false;
+  }
+  if (sourcemap.mappings === undefined) {
+    const indexSourceMap: IndexSourceMap = sourcemap;
+    return indexSourceMap.sections.some(section => {
+      return sourceMapIncludesSource(section.map, source);
+    });
+  }
+
+  const basicMap: BasicSourceMap = sourcemap;
+  return basicMap.sources.some(
+    s => s === 'Inline Babel script' || source.endsWith(s),
+  );
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..1e0282f970d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, useState} from 'react';
+
+export function Component() {
+  const countState = useState(0);
+  const count = countState[0];
+  const setCount = countState[1];
+
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+
+  useEffect(() => {
+    // ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return (
+    <>
+      <div>Dark mode? {isDarkMode}</div>
+      <div>Count: {count}</div>
+      <button onClick={handleClick}>Update count</button>
+    </>
+  );
+}
+
+function useIsDarkMode() {
+  const darkModeState = useState(false);
+  const [isDarkMode] = darkModeState;
+
+  useEffect(function useEffectCreate() {
+    // Here is where we may listen to a "theme" event...
+  }, []);
+
+  return [isDarkMode, () => {}];
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..8ab83a1b8d5
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, {useDebugValue, useEffect, useState} from 'react';
+
+export function Component() {
+  const [count, setCount] = useState(0);
+  const isDarkMode = useIsDarkMode();
+  const {foo} = useFoo();
+
+  useEffect(() => {
+    // ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return (
+    <>
+      <div>Dark mode? {isDarkMode}</div>
+      <div>Count: {count}</div>
+      <div>Foo: {foo}</div>
+      <button onClick={handleClick}>Update count</button>
+    </>
+  );
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = useState(false);
+
+  useEffect(function useEffectCreate() {
+    // Here is where we may listen to a "theme" event...
+  }, []);
+
+  return isDarkMode;
+}
+
+function useFoo() {
+  useDebugValue('foo');
+  return {foo: true};
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..0eb103501fc
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 useTheme from './useTheme';
+
+export function Component() {
+  const theme = useTheme();
+
+  return <div>theme: {theme}</div>;
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4a518e403b7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, useContext} from 'react';
+
+const A = createContext(1);
+const B = createContext(2);
+
+export function Component() {
+  const a = useContext(A);
+  const b = useContext(B);
+
+  // prettier-ignore
+  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..90ac72931d2
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithNestedHooks.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useMemo, useState} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+
+    return state;
+  });
+  props.callback(InnerComponent);
+
+  return null;
+}
+
+module.exports = {Component};
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..86598795b19
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, {useState} from 'react';
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+
+const abc = 'abc';
+const string =
+  'sourceMappingURL=data:application/json;charset=utf-8;base64,' + abc;
+
+export function Component() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <div>string: {string}</div>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/Example.js
new file mode 100644
index 00000000000..6fd137c8660
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/Example.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, {useState} from 'react';
+
+export function Component() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/InlineRequire.js
new file mode 100644
index 00000000000..98672e3c0e6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/InlineRequire.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md b/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
new file mode 100644
index 00000000000..8da2586fb5c
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
@@ -0,0 +1 @@
+The JavaScript files and source maps in this directory are used to test DevTools hook name parsing code. The files here use source maps in different formats to mirror real world applications. The source for the files is located in the parent `__tests__` folder. To regenerate these compiled files, run `yarn update-mock-source-maps` in the `react-devtools-extensions` directory.
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js
new file mode 100644
index 00000000000..3f0197b0201
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useCallback, useState} from 'react';
+
+export function ListItem({item, removeItem, toggleItem}) {
+  const handleDelete = useCallback(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+
+  const handleToggle = useCallback(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+
+  return (
+    <li>
+      <button onClick={handleDelete}>Delete</button>
+      <label>
+        <input
+          checked={item.isComplete}
+          onChange={handleToggle}
+          type="checkbox"
+        />{' '}
+        {item.text}
+      </label>
+    </li>
+  );
+}
+
+export 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 => {
+      // 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..."
+        value={newItemText}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+      <button disabled={newItemText === ''} onClick={handleClick}>
+        <span role="img" aria-label="Add item">
+          Add
+        </span>
+      </button>
+      <ul>
+        {items.map(item => (
+          <ListItem
+            key={item.id}
+            item={item}
+            removeItem={removeItem}
+            toggleItem={toggleItem}
+          />
+        ))}
+      </ul>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js
new file mode 100644
index 00000000000..bb281fc307e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js
@@ -0,0 +1,406 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var _jsxFileName = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentUsingHooksIndirectly.js";
+function Component() {
+  const countState = React.useState(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  React.useEffect(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = React.useState(false);
+  const [isDarkMode] = darkModeState;
+  React.useEffect(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+
+var _jsxFileName$1 = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js";
+function Component$1() {
+  const [count, setCount] = React.useState(0);
+  const isDarkMode = useIsDarkMode$1();
+  const {
+    foo
+  } = useFoo();
+  React.useEffect(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode$1() {
+  const [isDarkMode] = React.useState(false);
+  React.useEffect(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  React.useDebugValue('foo');
+  return {
+    foo: true
+  };
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/React.createContext('bright');
+function useTheme() {
+  const theme = React.useContext(ThemeContext);
+  React.useDebugValue(theme);
+  return theme;
+}
+
+var _jsxFileName$2 = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithExternalCustomHooks.js";
+function Component$2() {
+  const theme = useTheme();
+  return /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/React.createContext(1);
+const B = /*#__PURE__*/React.createContext(2);
+function Component$3() {
+  const a = React.useContext(A);
+  const b = React.useContext(B); // prettier-ignore
+
+  const c = React.useContext(A),
+        d = React.useContext(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+const {
+  useMemo,
+  useState
+} = React__default;
+
+function Component$4(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+var ComponentWithNestedHooks = {
+  Component: Component$4
+};
+var ComponentWithNestedHooks_1 = ComponentWithNestedHooks.Component;
+
+var _jsxFileName$3 = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js";
+
+function Component$5() {
+  const [count, setCount] = React.useState(0);
+  return /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+
+var _jsxFileName$4 = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/Example.js";
+function Component$6() {
+  const [count, setCount] = React.useState(0);
+  return /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component$7() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+
+var _jsxFileName$5 = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js";
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = React.useCallback(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = React.useCallback(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+function List(props) {
+  const [newItemText, setNewItemText] = React.useState('');
+  const [items, setItems] = React.useState([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = React.useState(4);
+  const handleClick = React.useCallback(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = React.useCallback(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = React.useCallback(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = React.useCallback(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+
+var ToDoList = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ListItem: ListItem,
+  List: List
+});
+
+exports.ComponentUsingHooksIndirectly = Component;
+exports.ComponentWithCustomHook = Component$1;
+exports.ComponentWithExternalCustomHooks = Component$2;
+exports.ComponentWithMultipleHooksPerLine = Component$3;
+exports.ComponentWithNestedHooks = ComponentWithNestedHooks_1;
+exports.ContainingStringSourceMappingURL = Component$5;
+exports.Example = Component$6;
+exports.InlineRequire = Component$7;
+exports.ToDoList = ToDoList;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js.map
new file mode 100644
index 00000000000..13f8b144098
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../ComponentUsingHooksIndirectly.js","../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../ComponentWithNestedHooks.js","../../ContainingStringSourceMappingURL.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"names":["Component","countState","useState","count","setCount","darkMode","useIsDarkMode","isDarkMode","useEffect","handleClick","React","darkModeState","useEffectCreate","foo","useFoo","useDebugValue","ThemeContext","createContext","useTheme","theme","useContext","A","B","a","b","c","d","useMemo","require$$0","props","InnerComponent","state","callback","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAGC,cAAQ,CAAC,CAAD,CAA3B;AACA,QAAMC,KAAK,GAAGF,UAAU,CAAC,CAAD,CAAxB;AACA,QAAMG,QAAQ,GAAGH,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMI,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEAG,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBH,UAAjB,CADF,eAEEG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAMK,aAAa,GAAGT,cAAQ,CAAC,KAAD,CAA9B;AACA,QAAM,CAACK,UAAD,IAAeI,aAArB;AAEAH,EAAAA,eAAS,CAAC,SAASI,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAO,CAACL,UAAD,EAAa,MAAM,EAAnB,CAAP;AACD;;;AChCM,SAASP,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMK,UAAU,GAAGD,eAAa,EAAhC;AACA,QAAM;AAACO,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEAN,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBH,UAAjB,CADF,eAEEG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaP,KAAb,CAFF,eAGEO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWG,GAAX,CAHF,eAIEH;AAAQ,IAAA,OAAO,EAAED,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,eAAT,GAAyB;AACvB,QAAM,CAACC,UAAD,IAAeL,cAAQ,CAAC,KAAD,CAA7B;AAEAM,EAAAA,eAAS,CAAC,SAASI,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;AAED,SAASO,MAAT,GAAkB;AAChBC,EAAAA,mBAAa,CAAC,KAAD,CAAb;AACA,SAAO;AAACF,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD;;AC7CD;;;;;;;;AASA,AAEO,MAAMG,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAD,EAAAA,mBAAa,CAACI,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;;ACLM,SAASnB,WAAT,GAAqB;AAC1B,QAAMmB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaS,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAME,CAAC,gBAAGJ,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMK,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASjB,WAAT,GAAqB;AAC1B,QAAMuB,CAAC,GAAGH,gBAAU,CAACC,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGL,gBAAU,CAACC,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;;AAQA,MAAM;AAACC,EAAAA,OAAD;AAAUzB,EAAAA;AAAV,IAAsB0B,cAA5B;;AAEA,SAAS5B,WAAT,CAAmB6B,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGH,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACI,KAAD,IAAU7B,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAO6B,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAED,4BAAc,GAAG;AAAC9B,aAAAA;AAAD,CAAjB;;;;;ACRA,AAAO,SAASA,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD;;;ACXM,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,IAAU8B,OAAO,CAAC,OAAD,CAAP,CAAiB/B,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOC,KAAP;AACD;;;ACDM,SAAS+B,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAGC,iBAAW,CAAC,MAAM;AACrCH,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAF+B,EAE7B,CAACA,IAAD,EAAOC,UAAP,CAF6B,CAAhC;AAIA,QAAMI,YAAY,GAAGD,iBAAW,CAAC,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAF+B,EAE7B,CAACA,IAAD,EAAOE,UAAP,CAF6B,CAAhC;AAIA,sBACEI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACEA;AAAQ,IAAA,OAAO,EAAEH,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEEG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcf,KAAd,EAAqB;AAC1B,QAAM,CAACgB,WAAD,EAAcC,cAAd,IAAgC5C,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAAC6C,KAAD,EAAQC,QAAR,IAAoB9C,cAAQ,CAAC,CACjC;AAAC+C,IAAAA,EAAE,EAAE,CAAL;AAAQP,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACM,IAAAA,EAAE,EAAE,CAAL;AAAQP,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACM,IAAAA,EAAE,EAAE,CAAL;AAAQP,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAD,CAAlC;AAKA,QAAM,CAACO,GAAD,EAAMC,MAAN,IAAgBjD,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMO,WAAW,GAAG8B,iBAAW,CAAC,MAAM;AACpC,QAAIM,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEER,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEE;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGb,iBAAW,CAChCc,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzB7C,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAM8C,YAAY,GAAGhB,iBAAW,CAC9Bc,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMV,UAAU,GAAGG,iBAAW,CAC5BmB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMV,UAAU,GAAGE,iBAAW,CAC5BqB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACc,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENlB,MAAAA,UAAU,EAAE,CAACkB,YAAY,CAAClB;AAFpB,KAFV,EAMGsB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEN,oBAACwB,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACExB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEI,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASEX;AAAQ,IAAA,QAAQ,EAAEI,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEpC,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACEgC;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGM,KAAK,CAACmB,GAAN,CAAU/B,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACc,EADZ;AAEE,IAAA,IAAI,EAAEd,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..2e93ee9b1b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 00000000000..47734af4198
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBI,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..02f3a9b7c8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
new file mode 100644
index 00000000000..95dea4811e3
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AACA,QAAM;AAACC,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBE,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaF,KAAb,CAFF,eAGE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASK,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOL,UAAP;AACD;;AAED,SAASG,MAAT,GAAkB;AAChB,4BAAc,KAAd;AACA,SAAO;AAACD,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..59566708dec
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 00000000000..a2e18775475
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4af71587b5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 00000000000..2615edade7b
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..fc43ab876ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
new file mode 100644
index 00000000000..ce6e33d9781
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..f021ab07149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 00000000000..4c6f331a24f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js
new file mode 100644
index 00000000000..90c65d8d135
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js.map
new file mode 100644
index 00000000000..f87746ac731
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js
new file mode 100644
index 00000000000..5c6a1c636b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js.map
new file mode 100644
index 00000000000..0c51537cc70
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js
new file mode 100644
index 00000000000..1d8c1f25b60
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js.map
new file mode 100644
index 00000000000..a20df39f8ee
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;;;AAGO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAQ,IAAA,OAAO,EAAEC,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..2e93ee9b1b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 00000000000..956222a1307
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBI,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..02f3a9b7c8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
new file mode 100644
index 00000000000..2a55150f83c
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AACA,QAAM;AAACC,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBE,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaF,KAAb,CAFF,eAGE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASK,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOL,UAAP;AACD;;AAED,SAASG,MAAT,GAAkB;AAChB,4BAAc,KAAd;AACA,SAAO;AAACD,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;kCbEA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..59566708dec
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 00000000000..cd302459bd5
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4af71587b5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 00000000000..eed2d770f57
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","a","b","c","d"],"mappings":"CAAD;gBYCA,AaDA;iBbEA,AaFA;oBbGA,AaHA,AMIA,AaJA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..fc43ab876ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
new file mode 100644
index 00000000000..6a6892dcc27
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..f021ab07149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 00000000000..eea20a1c134
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
new file mode 100644
index 00000000000..90c65d8d135
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
new file mode 100644
index 00000000000..0a8846b9656
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
new file mode 100644
index 00000000000..5c6a1c636b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
new file mode 100644
index 00000000000..edfc558e6e5
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>"],"mappings":"CAAD"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
new file mode 100644
index 00000000000..1d8c1f25b60
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
new file mode 100644
index 00000000000..79b8f9a3c05
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;;;AAGO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAQ,IAAA,OAAO,EAAEC,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","handleDelete","handleToggle","newItemText","items","uid","handleClick","handleKeyPress","handleChange","removeItem","toggleItem"],"mappings":"CAAD;cuBCA;gBCDA;kBDEA;oBCFA;sCgBGA,AYHA;uCxBIA;2CxBJA;4CoBKA,AWLA;8CbMA;2DSNA;6DNOA;oEtBPA;sEoBQA;2EpBRA;6EkBSA;gFlBTA;kFkBUA;mGlBVA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..2e93ee9b1b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 00000000000..46a7288d98e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBI,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..02f3a9b7c8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
new file mode 100644
index 00000000000..31eecb4f196
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AACA,QAAM;AAACC,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBE,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaF,KAAb,CAFF,eAGE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASK,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOL,UAAP;AACD;;AAED,SAASG,MAAT,GAAkB;AAChB,4BAAc,KAAd;AACA,SAAO;AAACD,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;kCbEA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..59566708dec
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 00000000000..c4236b7af63
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4af71587b5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 00000000000..e20e1bd23b8
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","a","b","c","d"],"mappings":"CAAD;gBYCA,AaDA;iBbEA,AaFA;oBbGA,AaHA,AMIA,AaJA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..fc43ab876ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map
new file mode 100644
index 00000000000..134b2831d4f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..f021ab07149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 00000000000..17674b05e6e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
new file mode 100644
index 00000000000..90c65d8d135
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
new file mode 100644
index 00000000000..43468aa1c84
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 00000000000..5c6a1c636b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map
new file mode 100644
index 00000000000..3ca6f0d15b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>"],"mappings":"CAAD"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
new file mode 100644
index 00000000000..1d8c1f25b60
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
new file mode 100644
index 00000000000..1f901850e55
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;;;AAGO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAQ,IAAA,OAAO,EAAEC,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","handleDelete","handleToggle","newItemText","items","uid","handleClick","handleKeyPress","handleChange","removeItem","toggleItem"],"mappings":"CAAD;cuBCA;gBCDA;kBDEA;oBCFA;sCgBGA,AYHA;uCxBIA;2CxBJA;4CoBKA,AWLA;8CbMA;2DSNA;6DNOA;oEtBPA;sEoBQA;2EpBRA;6EkBSA;gFlBTA;kFkBUA;mGlBVA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
new file mode 100644
index 00000000000..d2e56216998
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map
new file mode 100644
index 00000000000..bfa00919bda
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>"],"mappings":"CAAD"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
new file mode 100644
index 00000000000..30f97206262
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map
new file mode 100644
index 00000000000..ee4fe613f1f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
new file mode 100644
index 00000000000..d2e56216998
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
new file mode 100644
index 00000000000..d67f0a342d5
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>"],"mappings":"CAAD"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
new file mode 100644
index 00000000000..30f97206262
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
new file mode 100644
index 00000000000..d5f5310e680
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"],"x_facebook_sources":[[null,[{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..2e93ee9b1b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 00000000000..86b4d876129
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBI,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..02f3a9b7c8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
new file mode 100644
index 00000000000..f5feb2d5c00
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AACA,QAAM;AAACC,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBE,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaF,KAAb,CAFF,eAGE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASK,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOL,UAAP;AACD;;AAED,SAASG,MAAT,GAAkB;AAChB,4BAAc,KAAd;AACA,SAAO;AAACD,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..59566708dec
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 00000000000..b227cf9bb29
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4af71587b5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 00000000000..708c042ce95
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..fc43ab876ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map
new file mode 100644
index 00000000000..7c2564800ff
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..f021ab07149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 00000000000..3c6fa182b4a
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js
new file mode 100644
index 00000000000..90c65d8d135
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js.map
new file mode 100644
index 00000000000..4b593298a4b
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
new file mode 100644
index 00000000000..5c6a1c636b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map
new file mode 100644
index 00000000000..145b3eb4a59
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
new file mode 100644
index 00000000000..1d8c1f25b60
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
new file mode 100644
index 00000000000..e1613c8d6f7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;;;AAGO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAQ,IAAA,OAAO,EAAEC,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js
new file mode 100644
index 00000000000..d2e56216998
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js.map
new file mode 100644
index 00000000000..90cf1d94aac
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js
new file mode 100644
index 00000000000..30f97206262
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map
new file mode 100644
index 00000000000..03b47ef63e2
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js
new file mode 100644
index 00000000000..d2e56216998
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js.map
new file mode 100644
index 00000000000..13830ededa1
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..2e93ee9b1b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 00000000000..ba5ff347882
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBI,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..02f3a9b7c8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
new file mode 100644
index 00000000000..76e8e98f399
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AACA,QAAM;AAACC,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBE,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaF,KAAb,CAFF,eAGE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASK,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOL,UAAP;AACD;;AAED,SAASG,MAAT,GAAkB;AAChB,4BAAc,KAAd;AACA,SAAO;AAACD,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;kCbEA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..59566708dec
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 00000000000..21b5a57f0d7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4af71587b5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 00000000000..dec07b8ddf9
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","a","b","c","d"],"mappings":"CAAD;gBYCA,AaDA;iBbEA,AaFA;oBbGA,AaHA,AMIA,AaJA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..fc43ab876ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
new file mode 100644
index 00000000000..77478cfe5fd
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"],"x_react_sources":[[{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..f021ab07149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 00000000000..cdc51bbd4f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
new file mode 100644
index 00000000000..90c65d8d135
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
new file mode 100644
index 00000000000..1feab5635cd
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
new file mode 100644
index 00000000000..5c6a1c636b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
new file mode 100644
index 00000000000..31d879114a1
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"],"x_react_sources":[[{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
new file mode 100644
index 00000000000..1d8c1f25b60
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
new file mode 100644
index 00000000000..253375135b7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;;;AAGO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAQ,IAAA,OAAO,EAAEC,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","handleDelete","handleToggle","newItemText","items","uid","handleClick","handleKeyPress","handleChange","removeItem","toggleItem"],"mappings":"CAAD;cuBCA;gBCDA;kBDEA;oBCFA;sCgBGA,AYHA;uCxBIA;2CxBJA;4CoBKA,AWLA;8CbMA;2DSNA;6DNOA;oEtBPA;sEoBQA;2EpBRA;6EkBSA;gFlBTA;kFkBUA;mGlBVA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..2e93ee9b1b6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 00000000000..1342894f650
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBI,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..02f3a9b7c8d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
new file mode 100644
index 00000000000..73407cdf7a8
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AACA,QAAM;AAACC,IAAAA;AAAD,MAAQC,MAAM,EAApB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiBE,UAAjB,CADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaF,KAAb,CAFF,eAGE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE,WAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAJF,CADF;AAQD;;AAED,SAASH,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASK,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOL,UAAP;AACD;;AAED,SAASG,MAAT,GAAkB;AAChB,4BAAc,KAAd;AACA,SAAO;AAACD,IAAAA,GAAG,EAAE;AAAN,GAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useDebugValue, useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n  const {foo} = useFoo();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <div>Foo: {foo}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n\nfunction useFoo() {\n  useDebugValue('foo');\n  return {foo: true};\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;kCbEA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..59566708dec
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 00000000000..b51f78b541a
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4af71587b5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 00000000000..11ece385493
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","a","b","c","d"],"mappings":"CAAD;gBYCA,AaDA;iBbEA,AaFA;oBbGA,AaHA,AMIA,AaJA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..fc43ab876ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map
new file mode 100644
index 00000000000..94820f1272a
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"],"x_react_sources":[[{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..f021ab07149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 00000000000..093b05f2fab
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
new file mode 100644
index 00000000000..90c65d8d135
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
new file mode 100644
index 00000000000..59ee55f9a65
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;;;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 00000000000..5c6a1c636b0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map
new file mode 100644
index 00000000000..4b54e6ade72
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"],"x_react_sources":[[{"names":["<no-hook>"],"mappings":"CAAD"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
new file mode 100644
index 00000000000..1d8c1f25b60
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
new file mode 100644
index 00000000000..4c55cbd6ac3
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;;;AAGO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAQ,IAAA,OAAO,EAAEC,YAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cADF,eAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH,cALd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO,WAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW,UAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADF,CATF,eAcE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC,UAJd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","handleDelete","handleToggle","newItemText","items","uid","handleClick","handleKeyPress","handleChange","removeItem","toggleItem"],"mappings":"CAAD;cuBCA;gBCDA;kBDEA;oBCFA;sCgBGA,AYHA;uCxBIA;2CxBJA;4CoBKA,AWLA;8CbMA;2DSNA;6DNOA;oEtBPA;sEoBQA;2EpBRA;6EkBSA;gFlBTA;kFkBUA;mGlBVA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
new file mode 100644
index 00000000000..d2e56216998
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map
new file mode 100644
index 00000000000..08cef731f7e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"],"x_react_sources":[[{"names":["<no-hook>"],"mappings":"CAAD"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
new file mode 100644
index 00000000000..30f97206262
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map
new file mode 100644
index 00000000000..39d07709387
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
new file mode 100644
index 00000000000..d2e56216998
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
new file mode 100644
index 00000000000..94e3d672424
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"],"x_react_sources":[[{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
new file mode 100644
index 00000000000..30f97206262
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
new file mode 100644
index 00000000000..55a676df149
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js
new file mode 100644
index 00000000000..30f97206262
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js.map
new file mode 100644
index 00000000000..972e1474460
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"]}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..926a6dabdac
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLHFCQUFTLENBQVQsQ0FBbkI7QUFDQSxRQUFNQyxLQUFLLEdBQUdELFVBQVUsQ0FBQyxDQUFELENBQXhCO0FBQ0EsUUFBTUUsUUFBUSxHQUFHRixVQUFVLENBQUMsQ0FBRCxDQUEzQjtBQUVBLFFBQU1HLFFBQVEsR0FBR0MsYUFBYSxFQUE5QjtBQUNBLFFBQU0sQ0FBQ0MsVUFBRCxJQUFlRixRQUFyQjtBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1HLFdBQVcsR0FBRyxNQUFNSixRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFpQkksVUFBakIsQ0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFhSixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSyxXQUFqQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0YsYUFBVCxHQUF5QjtBQUN2QixRQUFNRyxhQUFhLEdBQUcscUJBQVMsS0FBVCxDQUF0QjtBQUNBLFFBQU0sQ0FBQ0YsVUFBRCxJQUFlRSxhQUFyQjtBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU8sQ0FBQ0gsVUFBRCxFQUFhLE1BQU0sQ0FBRSxDQUFyQixDQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..0c80e4790cf
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRU8sU0FBU0EsU0FBVCxHQUFxQjtBQUMxQixRQUFNLENBQUNDLEtBQUQsRUFBUUMsUUFBUixJQUFvQixxQkFBUyxDQUFULENBQTFCO0FBQ0EsUUFBTUMsVUFBVSxHQUFHQyxhQUFhLEVBQWhDO0FBQ0EsUUFBTTtBQUFDQyxJQUFBQTtBQUFELE1BQVFDLE1BQU0sRUFBcEI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUwsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBaUJFLFVBQWpCLENBREYsZUFFRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBYUYsS0FBYixDQUZGLGVBR0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBV0ksR0FBWCxDQUhGLGVBSUU7QUFBUSxJQUFBLE9BQU8sRUFBRUUsV0FBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSkYsQ0FERjtBQVFEOztBQUVELFNBQVNILGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELElBQWUscUJBQVMsS0FBVCxDQUFyQjtBQUVBLHdCQUFVLFNBQVNLLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9MLFVBQVA7QUFDRDs7QUFFRCxTQUFTRyxNQUFULEdBQWtCO0FBQ2hCLDRCQUFjLEtBQWQ7QUFDQSxTQUFPO0FBQUNELElBQUFBLEdBQUcsRUFBRTtBQUFOLEdBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..32c9bee8385
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsS0FBSyxHQUFHLHdCQUFkO0FBRUEsc0JBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQWFBLEtBQWIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdXNlVGhlbWUgZnJvbSAnLi91c2VUaGVtZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICByZXR1cm4gPGRpdj50aGVtZToge3RoZW1lfTwvZGl2Pjtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..b657d494ceb
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..21581015934
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..a30090ae489
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/Example.js
new file mode 100644
index 00000000000..9a0d3bb203f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/InlineRequire.js
new file mode 100644
index 00000000000..095a865b557
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ToDoList.js
new file mode 100644
index 00000000000..f8bb60fac02
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQ0UsSUFBQSxPQUFPLEVBQUVILElBQUksQ0FBQ0ssVUFEaEI7QUFFRSxJQUFBLFFBQVEsRUFBRUQsWUFGWjtBQUdFLElBQUEsSUFBSSxFQUFDLFVBSFA7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFERixFQUtLLEdBTEwsRUFNR0osSUFBSSxDQUFDTSxJQU5SLENBRkYsQ0FERjtBQWFEOztBQUVNLFNBQVNDLElBQVQsQ0FBY0MsS0FBZCxFQUFxQjtBQUMxQixRQUFNLENBQUNDLFdBQUQsRUFBY0MsY0FBZCxJQUFnQyxvQkFBUyxFQUFULENBQXRDO0FBQ0EsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0Isb0JBQVMsQ0FDakM7QUFBQ0MsSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FEaUMsRUFFakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FGaUMsRUFHakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLEtBQXBCO0FBQTJCQyxJQUFBQSxJQUFJLEVBQUU7QUFBakMsR0FIaUMsQ0FBVCxDQUExQjtBQUtBLFFBQU0sQ0FBQ1EsR0FBRCxFQUFNQyxNQUFOLElBQWdCLG9CQUFTLENBQVQsQ0FBdEI7QUFFQSxRQUFNQyxXQUFXLEdBQUcsdUJBQVksTUFBTTtBQUNwQyxRQUFJUCxXQUFXLEtBQUssRUFBcEIsRUFBd0I7QUFDdEJHLE1BQUFBLFFBQVEsQ0FBQyxDQUNQLEdBQUdELEtBREksRUFFUDtBQUNFRSxRQUFBQSxFQUFFLEVBQUVDLEdBRE47QUFFRVQsUUFBQUEsVUFBVSxFQUFFLEtBRmQ7QUFHRUMsUUFBQUEsSUFBSSxFQUFFRztBQUhSLE9BRk8sQ0FBRCxDQUFSO0FBUUFNLE1BQUFBLE1BQU0sQ0FBQ0QsR0FBRyxHQUFHLENBQVAsQ0FBTjtBQUNBSixNQUFBQSxjQUFjLENBQUMsRUFBRCxDQUFkO0FBQ0Q7QUFDRixHQWJtQixFQWFqQixDQUFDRCxXQUFELEVBQWNFLEtBQWQsRUFBcUJHLEdBQXJCLENBYmlCLENBQXBCO0FBZUEsUUFBTUcsY0FBYyxHQUFHLHVCQUNyQkMsS0FBSyxJQUFJO0FBQ1AsUUFBSUEsS0FBSyxDQUFDQyxHQUFOLEtBQWMsT0FBbEIsRUFBMkI7QUFDekJILE1BQUFBLFdBQVc7QUFDWjtBQUNGLEdBTG9CLEVBTXJCLENBQUNBLFdBQUQsQ0FOcUIsQ0FBdkI7QUFTQSxRQUFNSSxZQUFZLEdBQUcsdUJBQ25CRixLQUFLLElBQUk7QUFDUFIsSUFBQUEsY0FBYyxDQUFDUSxLQUFLLENBQUNHLGFBQU4sQ0FBb0JDLEtBQXJCLENBQWQ7QUFDRCxHQUhrQixFQUluQixDQUFDWixjQUFELENBSm1CLENBQXJCO0FBT0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnNCLFlBQVksSUFBSVgsUUFBUSxDQUFDRCxLQUFLLENBQUNhLE1BQU4sQ0FBYXhCLElBQUksSUFBSUEsSUFBSSxLQUFLdUIsWUFBOUIsQ0FBRCxDQURQLEVBRWpCLENBQUNaLEtBQUQsQ0FGaUIsQ0FBbkI7QUFLQSxRQUFNVCxVQUFVLEdBQUcsdUJBQ2pCdUIsWUFBWSxJQUFJO0FBQ2Q7QUFDQTtBQUNBLFVBQU1DLEtBQUssR0FBR2YsS0FBSyxDQUFDZ0IsU0FBTixDQUFnQjNCLElBQUksSUFBSUEsSUFBSSxDQUFDYSxFQUFMLEtBQVlZLFlBQVksQ0FBQ1osRUFBakQsQ0FBZDtBQUVBRCxJQUFBQSxRQUFRLENBQ05ELEtBQUssQ0FDRmlCLEtBREgsQ0FDUyxDQURULEVBQ1lGLEtBRFosRUFFR0csTUFGSCxDQUVVLEVBQ04sR0FBR0osWUFERztBQUVOcEIsTUFBQUEsVUFBVSxFQUFFLENBQUNvQixZQUFZLENBQUNwQjtBQUZwQixLQUZWLEVBTUd3QixNQU5ILENBTVVsQixLQUFLLENBQUNpQixLQUFOLENBQVlGLEtBQUssR0FBRyxDQUFwQixDQU5WLENBRE0sQ0FBUjtBQVNELEdBZmdCLEVBZ0JqQixDQUFDZixLQUFELENBaEJpQixDQUFuQjtBQW1CQSxzQkFDRSxvQkFBQyxjQUFEO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFlBREYsZUFFRTtBQUNFLElBQUEsSUFBSSxFQUFDLE1BRFA7QUFFRSxJQUFBLFdBQVcsRUFBQyxrQkFGZDtBQUdFLElBQUEsS0FBSyxFQUFFRixXQUhUO0FBSUUsSUFBQSxRQUFRLEVBQUVXLFlBSlo7QUFLRSxJQUFBLFVBQVUsRUFBRUgsY0FMZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUZGLGVBU0U7QUFBUSxJQUFBLFFBQVEsRUFBRVIsV0FBVyxLQUFLLEVBQWxDO0FBQXNDLElBQUEsT0FBTyxFQUFFTyxXQUEvQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDRTtBQUFNLElBQUEsSUFBSSxFQUFDLEtBQVg7QUFBaUIsa0JBQVcsVUFBNUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsV0FERixDQVRGLGVBY0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsS0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUMsVUFKZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..e3b87798f3b
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLHFCQUFTLENBQVQsQ0FBbkI7QUFDQSxRQUFNQyxLQUFLLEdBQUdELFVBQVUsQ0FBQyxDQUFELENBQXhCO0FBQ0EsUUFBTUUsUUFBUSxHQUFHRixVQUFVLENBQUMsQ0FBRCxDQUEzQjtBQUVBLFFBQU1HLFFBQVEsR0FBR0MsYUFBYSxFQUE5QjtBQUNBLFFBQU0sQ0FBQ0MsVUFBRCxJQUFlRixRQUFyQjtBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1HLFdBQVcsR0FBRyxNQUFNSixRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFpQkksVUFBakIsQ0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFhSixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSyxXQUFqQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0YsYUFBVCxHQUF5QjtBQUN2QixRQUFNRyxhQUFhLEdBQUcscUJBQVMsS0FBVCxDQUF0QjtBQUNBLFFBQU0sQ0FBQ0YsVUFBRCxJQUFlRSxhQUFyQjtBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU8sQ0FBQ0gsVUFBRCxFQUFhLE1BQU0sQ0FBRSxDQUFyQixDQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..68e05ca77a3
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRU8sU0FBU0EsU0FBVCxHQUFxQjtBQUMxQixRQUFNLENBQUNDLEtBQUQsRUFBUUMsUUFBUixJQUFvQixxQkFBUyxDQUFULENBQTFCO0FBQ0EsUUFBTUMsVUFBVSxHQUFHQyxhQUFhLEVBQWhDO0FBQ0EsUUFBTTtBQUFDQyxJQUFBQTtBQUFELE1BQVFDLE1BQU0sRUFBcEI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUwsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBaUJFLFVBQWpCLENBREYsZUFFRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBYUYsS0FBYixDQUZGLGVBR0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBV0ksR0FBWCxDQUhGLGVBSUU7QUFBUSxJQUFBLE9BQU8sRUFBRUUsV0FBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSkYsQ0FERjtBQVFEOztBQUVELFNBQVNILGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELElBQWUscUJBQVMsS0FBVCxDQUFyQjtBQUVBLHdCQUFVLFNBQVNLLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9MLFVBQVA7QUFDRDs7QUFFRCxTQUFTRyxNQUFULEdBQWtCO0FBQ2hCLDRCQUFjLEtBQWQ7QUFDQSxTQUFPO0FBQUNELElBQUFBLEdBQUcsRUFBRTtBQUFOLEdBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7a0NiRUEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..01dc8d114ac
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsS0FBSyxHQUFHLHdCQUFkO0FBRUEsc0JBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQWFBLEtBQWIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdXNlVGhlbWUgZnJvbSAnLi91c2VUaGVtZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICByZXR1cm4gPGRpdj50aGVtZToge3RoZW1lfTwvZGl2Pjtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..4e2650eca63
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJhIiwiYiIsImMiLCJkIl0sIm1hcHBpbmdzIjoiQ0FBRDtnQllDQSxBYURBO2lCYkVBLEFhRkE7b0JiR0EsQWFIQSxBTUlBLEFhSkEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..07ee7cd65cb
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsIklubmVyQ29tcG9uZW50Iiwic3RhdGUiXSwibWFwcGluZ3MiOiJDQUFEO1l5QkNBO2FMQ0EsQVdEQTtnQjNCREEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..60f6de60048
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
new file mode 100644
index 00000000000..24fd5f2146b
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
new file mode 100644
index 00000000000..0f7bc884c09
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
new file mode 100644
index 00000000000..60355e08aa3
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQ0UsSUFBQSxPQUFPLEVBQUVILElBQUksQ0FBQ0ssVUFEaEI7QUFFRSxJQUFBLFFBQVEsRUFBRUQsWUFGWjtBQUdFLElBQUEsSUFBSSxFQUFDLFVBSFA7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFERixFQUtLLEdBTEwsRUFNR0osSUFBSSxDQUFDTSxJQU5SLENBRkYsQ0FERjtBQWFEOztBQUVNLFNBQVNDLElBQVQsQ0FBY0MsS0FBZCxFQUFxQjtBQUMxQixRQUFNLENBQUNDLFdBQUQsRUFBY0MsY0FBZCxJQUFnQyxvQkFBUyxFQUFULENBQXRDO0FBQ0EsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0Isb0JBQVMsQ0FDakM7QUFBQ0MsSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FEaUMsRUFFakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FGaUMsRUFHakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLEtBQXBCO0FBQTJCQyxJQUFBQSxJQUFJLEVBQUU7QUFBakMsR0FIaUMsQ0FBVCxDQUExQjtBQUtBLFFBQU0sQ0FBQ1EsR0FBRCxFQUFNQyxNQUFOLElBQWdCLG9CQUFTLENBQVQsQ0FBdEI7QUFFQSxRQUFNQyxXQUFXLEdBQUcsdUJBQVksTUFBTTtBQUNwQyxRQUFJUCxXQUFXLEtBQUssRUFBcEIsRUFBd0I7QUFDdEJHLE1BQUFBLFFBQVEsQ0FBQyxDQUNQLEdBQUdELEtBREksRUFFUDtBQUNFRSxRQUFBQSxFQUFFLEVBQUVDLEdBRE47QUFFRVQsUUFBQUEsVUFBVSxFQUFFLEtBRmQ7QUFHRUMsUUFBQUEsSUFBSSxFQUFFRztBQUhSLE9BRk8sQ0FBRCxDQUFSO0FBUUFNLE1BQUFBLE1BQU0sQ0FBQ0QsR0FBRyxHQUFHLENBQVAsQ0FBTjtBQUNBSixNQUFBQSxjQUFjLENBQUMsRUFBRCxDQUFkO0FBQ0Q7QUFDRixHQWJtQixFQWFqQixDQUFDRCxXQUFELEVBQWNFLEtBQWQsRUFBcUJHLEdBQXJCLENBYmlCLENBQXBCO0FBZUEsUUFBTUcsY0FBYyxHQUFHLHVCQUNyQkMsS0FBSyxJQUFJO0FBQ1AsUUFBSUEsS0FBSyxDQUFDQyxHQUFOLEtBQWMsT0FBbEIsRUFBMkI7QUFDekJILE1BQUFBLFdBQVc7QUFDWjtBQUNGLEdBTG9CLEVBTXJCLENBQUNBLFdBQUQsQ0FOcUIsQ0FBdkI7QUFTQSxRQUFNSSxZQUFZLEdBQUcsdUJBQ25CRixLQUFLLElBQUk7QUFDUFIsSUFBQUEsY0FBYyxDQUFDUSxLQUFLLENBQUNHLGFBQU4sQ0FBb0JDLEtBQXJCLENBQWQ7QUFDRCxHQUhrQixFQUluQixDQUFDWixjQUFELENBSm1CLENBQXJCO0FBT0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnNCLFlBQVksSUFBSVgsUUFBUSxDQUFDRCxLQUFLLENBQUNhLE1BQU4sQ0FBYXhCLElBQUksSUFBSUEsSUFBSSxLQUFLdUIsWUFBOUIsQ0FBRCxDQURQLEVBRWpCLENBQUNaLEtBQUQsQ0FGaUIsQ0FBbkI7QUFLQSxRQUFNVCxVQUFVLEdBQUcsdUJBQ2pCdUIsWUFBWSxJQUFJO0FBQ2Q7QUFDQTtBQUNBLFVBQU1DLEtBQUssR0FBR2YsS0FBSyxDQUFDZ0IsU0FBTixDQUFnQjNCLElBQUksSUFBSUEsSUFBSSxDQUFDYSxFQUFMLEtBQVlZLFlBQVksQ0FBQ1osRUFBakQsQ0FBZDtBQUVBRCxJQUFBQSxRQUFRLENBQ05ELEtBQUssQ0FDRmlCLEtBREgsQ0FDUyxDQURULEVBQ1lGLEtBRFosRUFFR0csTUFGSCxDQUVVLEVBQ04sR0FBR0osWUFERztBQUVOcEIsTUFBQUEsVUFBVSxFQUFFLENBQUNvQixZQUFZLENBQUNwQjtBQUZwQixLQUZWLEVBTUd3QixNQU5ILENBTVVsQixLQUFLLENBQUNpQixLQUFOLENBQVlGLEtBQUssR0FBRyxDQUFwQixDQU5WLENBRE0sQ0FBUjtBQVNELEdBZmdCLEVBZ0JqQixDQUFDZixLQUFELENBaEJpQixDQUFuQjtBQW1CQSxzQkFDRSxvQkFBQyxjQUFEO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFlBREYsZUFFRTtBQUNFLElBQUEsSUFBSSxFQUFDLE1BRFA7QUFFRSxJQUFBLFdBQVcsRUFBQyxrQkFGZDtBQUdFLElBQUEsS0FBSyxFQUFFRixXQUhUO0FBSUUsSUFBQSxRQUFRLEVBQUVXLFlBSlo7QUFLRSxJQUFBLFVBQVUsRUFBRUgsY0FMZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUZGLGVBU0U7QUFBUSxJQUFBLFFBQVEsRUFBRVIsV0FBVyxLQUFLLEVBQWxDO0FBQXNDLElBQUEsT0FBTyxFQUFFTyxXQUEvQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDRTtBQUFNLElBQUEsSUFBSSxFQUFDLEtBQVg7QUFBaUIsa0JBQVcsVUFBNUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsV0FERixDQVRGLGVBY0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsS0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUMsVUFKZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..017f18fabb2
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLHFCQUFTLENBQVQsQ0FBbkI7QUFDQSxRQUFNQyxLQUFLLEdBQUdELFVBQVUsQ0FBQyxDQUFELENBQXhCO0FBQ0EsUUFBTUUsUUFBUSxHQUFHRixVQUFVLENBQUMsQ0FBRCxDQUEzQjtBQUVBLFFBQU1HLFFBQVEsR0FBR0MsYUFBYSxFQUE5QjtBQUNBLFFBQU0sQ0FBQ0MsVUFBRCxJQUFlRixRQUFyQjtBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1HLFdBQVcsR0FBRyxNQUFNSixRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFpQkksVUFBakIsQ0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFhSixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSyxXQUFqQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0YsYUFBVCxHQUF5QjtBQUN2QixRQUFNRyxhQUFhLEdBQUcscUJBQVMsS0FBVCxDQUF0QjtBQUNBLFFBQU0sQ0FBQ0YsVUFBRCxJQUFlRSxhQUFyQjtBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU8sQ0FBQ0gsVUFBRCxFQUFhLE1BQU0sQ0FBRSxDQUFyQixDQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..d17c19c4b83
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRU8sU0FBU0EsU0FBVCxHQUFxQjtBQUMxQixRQUFNLENBQUNDLEtBQUQsRUFBUUMsUUFBUixJQUFvQixxQkFBUyxDQUFULENBQTFCO0FBQ0EsUUFBTUMsVUFBVSxHQUFHQyxhQUFhLEVBQWhDO0FBQ0EsUUFBTTtBQUFDQyxJQUFBQTtBQUFELE1BQVFDLE1BQU0sRUFBcEI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUwsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBaUJFLFVBQWpCLENBREYsZUFFRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBYUYsS0FBYixDQUZGLGVBR0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBV0ksR0FBWCxDQUhGLGVBSUU7QUFBUSxJQUFBLE9BQU8sRUFBRUUsV0FBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSkYsQ0FERjtBQVFEOztBQUVELFNBQVNILGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELElBQWUscUJBQVMsS0FBVCxDQUFyQjtBQUVBLHdCQUFVLFNBQVNLLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9MLFVBQVA7QUFDRDs7QUFFRCxTQUFTRyxNQUFULEdBQWtCO0FBQ2hCLDRCQUFjLEtBQWQ7QUFDQSxTQUFPO0FBQUNELElBQUFBLEdBQUcsRUFBRTtBQUFOLEdBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7a0NiRUEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..e45008a1590
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsS0FBSyxHQUFHLHdCQUFkO0FBRUEsc0JBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQWFBLEtBQWIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdXNlVGhlbWUgZnJvbSAnLi91c2VUaGVtZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICByZXR1cm4gPGRpdj50aGVtZToge3RoZW1lfTwvZGl2Pjtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..656c2b79fd7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJhIiwiYiIsImMiLCJkIl0sIm1hcHBpbmdzIjoiQ0FBRDtnQllDQSxBYURBO2lCYkVBLEFhRkE7b0JiR0EsQWFIQSxBTUlBLEFhSkEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..b1dfd5ec893
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsIklubmVyQ29tcG9uZW50Iiwic3RhdGUiXSwibWFwcGluZ3MiOiJDQUFEO1l5QkNBO2FMQ0EsQVdEQTtnQjNCREEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..a8769ab709e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
new file mode 100644
index 00000000000..488613b24b9
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 00000000000..386cf7dd940
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
new file mode 100644
index 00000000000..dc124978bdb
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQ0UsSUFBQSxPQUFPLEVBQUVILElBQUksQ0FBQ0ssVUFEaEI7QUFFRSxJQUFBLFFBQVEsRUFBRUQsWUFGWjtBQUdFLElBQUEsSUFBSSxFQUFDLFVBSFA7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFERixFQUtLLEdBTEwsRUFNR0osSUFBSSxDQUFDTSxJQU5SLENBRkYsQ0FERjtBQWFEOztBQUVNLFNBQVNDLElBQVQsQ0FBY0MsS0FBZCxFQUFxQjtBQUMxQixRQUFNLENBQUNDLFdBQUQsRUFBY0MsY0FBZCxJQUFnQyxvQkFBUyxFQUFULENBQXRDO0FBQ0EsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0Isb0JBQVMsQ0FDakM7QUFBQ0MsSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FEaUMsRUFFakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FGaUMsRUFHakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLEtBQXBCO0FBQTJCQyxJQUFBQSxJQUFJLEVBQUU7QUFBakMsR0FIaUMsQ0FBVCxDQUExQjtBQUtBLFFBQU0sQ0FBQ1EsR0FBRCxFQUFNQyxNQUFOLElBQWdCLG9CQUFTLENBQVQsQ0FBdEI7QUFFQSxRQUFNQyxXQUFXLEdBQUcsdUJBQVksTUFBTTtBQUNwQyxRQUFJUCxXQUFXLEtBQUssRUFBcEIsRUFBd0I7QUFDdEJHLE1BQUFBLFFBQVEsQ0FBQyxDQUNQLEdBQUdELEtBREksRUFFUDtBQUNFRSxRQUFBQSxFQUFFLEVBQUVDLEdBRE47QUFFRVQsUUFBQUEsVUFBVSxFQUFFLEtBRmQ7QUFHRUMsUUFBQUEsSUFBSSxFQUFFRztBQUhSLE9BRk8sQ0FBRCxDQUFSO0FBUUFNLE1BQUFBLE1BQU0sQ0FBQ0QsR0FBRyxHQUFHLENBQVAsQ0FBTjtBQUNBSixNQUFBQSxjQUFjLENBQUMsRUFBRCxDQUFkO0FBQ0Q7QUFDRixHQWJtQixFQWFqQixDQUFDRCxXQUFELEVBQWNFLEtBQWQsRUFBcUJHLEdBQXJCLENBYmlCLENBQXBCO0FBZUEsUUFBTUcsY0FBYyxHQUFHLHVCQUNyQkMsS0FBSyxJQUFJO0FBQ1AsUUFBSUEsS0FBSyxDQUFDQyxHQUFOLEtBQWMsT0FBbEIsRUFBMkI7QUFDekJILE1BQUFBLFdBQVc7QUFDWjtBQUNGLEdBTG9CLEVBTXJCLENBQUNBLFdBQUQsQ0FOcUIsQ0FBdkI7QUFTQSxRQUFNSSxZQUFZLEdBQUcsdUJBQ25CRixLQUFLLElBQUk7QUFDUFIsSUFBQUEsY0FBYyxDQUFDUSxLQUFLLENBQUNHLGFBQU4sQ0FBb0JDLEtBQXJCLENBQWQ7QUFDRCxHQUhrQixFQUluQixDQUFDWixjQUFELENBSm1CLENBQXJCO0FBT0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnNCLFlBQVksSUFBSVgsUUFBUSxDQUFDRCxLQUFLLENBQUNhLE1BQU4sQ0FBYXhCLElBQUksSUFBSUEsSUFBSSxLQUFLdUIsWUFBOUIsQ0FBRCxDQURQLEVBRWpCLENBQUNaLEtBQUQsQ0FGaUIsQ0FBbkI7QUFLQSxRQUFNVCxVQUFVLEdBQUcsdUJBQ2pCdUIsWUFBWSxJQUFJO0FBQ2Q7QUFDQTtBQUNBLFVBQU1DLEtBQUssR0FBR2YsS0FBSyxDQUFDZ0IsU0FBTixDQUFnQjNCLElBQUksSUFBSUEsSUFBSSxDQUFDYSxFQUFMLEtBQVlZLFlBQVksQ0FBQ1osRUFBakQsQ0FBZDtBQUVBRCxJQUFBQSxRQUFRLENBQ05ELEtBQUssQ0FDRmlCLEtBREgsQ0FDUyxDQURULEVBQ1lGLEtBRFosRUFFR0csTUFGSCxDQUVVLEVBQ04sR0FBR0osWUFERztBQUVOcEIsTUFBQUEsVUFBVSxFQUFFLENBQUNvQixZQUFZLENBQUNwQjtBQUZwQixLQUZWLEVBTUd3QixNQU5ILENBTVVsQixLQUFLLENBQUNpQixLQUFOLENBQVlGLEtBQUssR0FBRyxDQUFwQixDQU5WLENBRE0sQ0FBUjtBQVNELEdBZmdCLEVBZ0JqQixDQUFDZixLQUFELENBaEJpQixDQUFuQjtBQW1CQSxzQkFDRSxvQkFBQyxjQUFEO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFlBREYsZUFFRTtBQUNFLElBQUEsSUFBSSxFQUFDLE1BRFA7QUFFRSxJQUFBLFdBQVcsRUFBQyxrQkFGZDtBQUdFLElBQUEsS0FBSyxFQUFFRixXQUhUO0FBSUUsSUFBQSxRQUFRLEVBQUVXLFlBSlo7QUFLRSxJQUFBLFVBQVUsRUFBRUgsY0FMZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUZGLGVBU0U7QUFBUSxJQUFBLFFBQVEsRUFBRVIsV0FBVyxLQUFLLEVBQWxDO0FBQXNDLElBQUEsT0FBTyxFQUFFTyxXQUEvQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDRTtBQUFNLElBQUEsSUFBSSxFQUFDLEtBQVg7QUFBaUIsa0JBQVcsVUFBNUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsV0FERixDQVRGLGVBY0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsS0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUMsVUFKZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js
new file mode 100644
index 00000000000..59d6d5140c8
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js
new file mode 100644
index 00000000000..c5ebc402409
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsInRoZW1lIl0sIm1hcHBpbmdzIjoiQ0FBRDtlZ0JDQSxBd0JEQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
new file mode 100644
index 00000000000..0f753fd3ebd
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
new file mode 100644
index 00000000000..12ef34c24f7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsInRoZW1lIl0sIm1hcHBpbmdzIjoiQ0FBRDtlZ0JDQSxBd0JEQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..a398aa00400
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLHFCQUFTLENBQVQsQ0FBbkI7QUFDQSxRQUFNQyxLQUFLLEdBQUdELFVBQVUsQ0FBQyxDQUFELENBQXhCO0FBQ0EsUUFBTUUsUUFBUSxHQUFHRixVQUFVLENBQUMsQ0FBRCxDQUEzQjtBQUVBLFFBQU1HLFFBQVEsR0FBR0MsYUFBYSxFQUE5QjtBQUNBLFFBQU0sQ0FBQ0MsVUFBRCxJQUFlRixRQUFyQjtBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1HLFdBQVcsR0FBRyxNQUFNSixRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFpQkksVUFBakIsQ0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFhSixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSyxXQUFqQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0YsYUFBVCxHQUF5QjtBQUN2QixRQUFNRyxhQUFhLEdBQUcscUJBQVMsS0FBVCxDQUF0QjtBQUNBLFFBQU0sQ0FBQ0YsVUFBRCxJQUFlRSxhQUFyQjtBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU8sQ0FBQ0gsVUFBRCxFQUFhLE1BQU0sQ0FBRSxDQUFyQixDQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..33a51f99599
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRU8sU0FBU0EsU0FBVCxHQUFxQjtBQUMxQixRQUFNLENBQUNDLEtBQUQsRUFBUUMsUUFBUixJQUFvQixxQkFBUyxDQUFULENBQTFCO0FBQ0EsUUFBTUMsVUFBVSxHQUFHQyxhQUFhLEVBQWhDO0FBQ0EsUUFBTTtBQUFDQyxJQUFBQTtBQUFELE1BQVFDLE1BQU0sRUFBcEI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUwsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBaUJFLFVBQWpCLENBREYsZUFFRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBYUYsS0FBYixDQUZGLGVBR0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBV0ksR0FBWCxDQUhGLGVBSUU7QUFBUSxJQUFBLE9BQU8sRUFBRUUsV0FBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSkYsQ0FERjtBQVFEOztBQUVELFNBQVNILGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELElBQWUscUJBQVMsS0FBVCxDQUFyQjtBQUVBLHdCQUFVLFNBQVNLLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9MLFVBQVA7QUFDRDs7QUFFRCxTQUFTRyxNQUFULEdBQWtCO0FBQ2hCLDRCQUFjLEtBQWQ7QUFDQSxTQUFPO0FBQUNELElBQUFBLEdBQUcsRUFBRTtBQUFOLEdBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..78b83cfae95
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsS0FBSyxHQUFHLHdCQUFkO0FBRUEsc0JBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQWFBLEtBQWIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdXNlVGhlbWUgZnJvbSAnLi91c2VUaGVtZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICByZXR1cm4gPGRpdj50aGVtZToge3RoZW1lfTwvZGl2Pjtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..064a5d11b70
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..6c8435d90a5
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..6dde56f8b4c
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/Example.js
new file mode 100644
index 00000000000..e0ef94e8f7d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
new file mode 100644
index 00000000000..352e48c6565
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
new file mode 100644
index 00000000000..f0aabdd955f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQ0UsSUFBQSxPQUFPLEVBQUVILElBQUksQ0FBQ0ssVUFEaEI7QUFFRSxJQUFBLFFBQVEsRUFBRUQsWUFGWjtBQUdFLElBQUEsSUFBSSxFQUFDLFVBSFA7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFERixFQUtLLEdBTEwsRUFNR0osSUFBSSxDQUFDTSxJQU5SLENBRkYsQ0FERjtBQWFEOztBQUVNLFNBQVNDLElBQVQsQ0FBY0MsS0FBZCxFQUFxQjtBQUMxQixRQUFNLENBQUNDLFdBQUQsRUFBY0MsY0FBZCxJQUFnQyxvQkFBUyxFQUFULENBQXRDO0FBQ0EsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0Isb0JBQVMsQ0FDakM7QUFBQ0MsSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FEaUMsRUFFakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FGaUMsRUFHakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLEtBQXBCO0FBQTJCQyxJQUFBQSxJQUFJLEVBQUU7QUFBakMsR0FIaUMsQ0FBVCxDQUExQjtBQUtBLFFBQU0sQ0FBQ1EsR0FBRCxFQUFNQyxNQUFOLElBQWdCLG9CQUFTLENBQVQsQ0FBdEI7QUFFQSxRQUFNQyxXQUFXLEdBQUcsdUJBQVksTUFBTTtBQUNwQyxRQUFJUCxXQUFXLEtBQUssRUFBcEIsRUFBd0I7QUFDdEJHLE1BQUFBLFFBQVEsQ0FBQyxDQUNQLEdBQUdELEtBREksRUFFUDtBQUNFRSxRQUFBQSxFQUFFLEVBQUVDLEdBRE47QUFFRVQsUUFBQUEsVUFBVSxFQUFFLEtBRmQ7QUFHRUMsUUFBQUEsSUFBSSxFQUFFRztBQUhSLE9BRk8sQ0FBRCxDQUFSO0FBUUFNLE1BQUFBLE1BQU0sQ0FBQ0QsR0FBRyxHQUFHLENBQVAsQ0FBTjtBQUNBSixNQUFBQSxjQUFjLENBQUMsRUFBRCxDQUFkO0FBQ0Q7QUFDRixHQWJtQixFQWFqQixDQUFDRCxXQUFELEVBQWNFLEtBQWQsRUFBcUJHLEdBQXJCLENBYmlCLENBQXBCO0FBZUEsUUFBTUcsY0FBYyxHQUFHLHVCQUNyQkMsS0FBSyxJQUFJO0FBQ1AsUUFBSUEsS0FBSyxDQUFDQyxHQUFOLEtBQWMsT0FBbEIsRUFBMkI7QUFDekJILE1BQUFBLFdBQVc7QUFDWjtBQUNGLEdBTG9CLEVBTXJCLENBQUNBLFdBQUQsQ0FOcUIsQ0FBdkI7QUFTQSxRQUFNSSxZQUFZLEdBQUcsdUJBQ25CRixLQUFLLElBQUk7QUFDUFIsSUFBQUEsY0FBYyxDQUFDUSxLQUFLLENBQUNHLGFBQU4sQ0FBb0JDLEtBQXJCLENBQWQ7QUFDRCxHQUhrQixFQUluQixDQUFDWixjQUFELENBSm1CLENBQXJCO0FBT0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnNCLFlBQVksSUFBSVgsUUFBUSxDQUFDRCxLQUFLLENBQUNhLE1BQU4sQ0FBYXhCLElBQUksSUFBSUEsSUFBSSxLQUFLdUIsWUFBOUIsQ0FBRCxDQURQLEVBRWpCLENBQUNaLEtBQUQsQ0FGaUIsQ0FBbkI7QUFLQSxRQUFNVCxVQUFVLEdBQUcsdUJBQ2pCdUIsWUFBWSxJQUFJO0FBQ2Q7QUFDQTtBQUNBLFVBQU1DLEtBQUssR0FBR2YsS0FBSyxDQUFDZ0IsU0FBTixDQUFnQjNCLElBQUksSUFBSUEsSUFBSSxDQUFDYSxFQUFMLEtBQVlZLFlBQVksQ0FBQ1osRUFBakQsQ0FBZDtBQUVBRCxJQUFBQSxRQUFRLENBQ05ELEtBQUssQ0FDRmlCLEtBREgsQ0FDUyxDQURULEVBQ1lGLEtBRFosRUFFR0csTUFGSCxDQUVVLEVBQ04sR0FBR0osWUFERztBQUVOcEIsTUFBQUEsVUFBVSxFQUFFLENBQUNvQixZQUFZLENBQUNwQjtBQUZwQixLQUZWLEVBTUd3QixNQU5ILENBTVVsQixLQUFLLENBQUNpQixLQUFOLENBQVlGLEtBQUssR0FBRyxDQUFwQixDQU5WLENBRE0sQ0FBUjtBQVNELEdBZmdCLEVBZ0JqQixDQUFDZixLQUFELENBaEJpQixDQUFuQjtBQW1CQSxzQkFDRSxvQkFBQyxjQUFEO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFlBREYsZUFFRTtBQUNFLElBQUEsSUFBSSxFQUFDLE1BRFA7QUFFRSxJQUFBLFdBQVcsRUFBQyxrQkFGZDtBQUdFLElBQUEsS0FBSyxFQUFFRixXQUhUO0FBSUUsSUFBQSxRQUFRLEVBQUVXLFlBSlo7QUFLRSxJQUFBLFVBQVUsRUFBRUgsY0FMZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUZGLGVBU0U7QUFBUSxJQUFBLFFBQVEsRUFBRVIsV0FBVyxLQUFLLEVBQWxDO0FBQXNDLElBQUEsT0FBTyxFQUFFTyxXQUEvQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDRTtBQUFNLElBQUEsSUFBSSxFQUFDLEtBQVg7QUFBaUIsa0JBQVcsVUFBNUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsV0FERixDQVRGLGVBY0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsS0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUMsVUFKZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/index.js
new file mode 100644
index 00000000000..4f1023a79fd
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
new file mode 100644
index 00000000000..d5afc603f43
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index.js
new file mode 100644
index 00000000000..781552cbc21
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..1b8fd83c693
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLHFCQUFTLENBQVQsQ0FBbkI7QUFDQSxRQUFNQyxLQUFLLEdBQUdELFVBQVUsQ0FBQyxDQUFELENBQXhCO0FBQ0EsUUFBTUUsUUFBUSxHQUFHRixVQUFVLENBQUMsQ0FBRCxDQUEzQjtBQUVBLFFBQU1HLFFBQVEsR0FBR0MsYUFBYSxFQUE5QjtBQUNBLFFBQU0sQ0FBQ0MsVUFBRCxJQUFlRixRQUFyQjtBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1HLFdBQVcsR0FBRyxNQUFNSixRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFpQkksVUFBakIsQ0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFhSixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSyxXQUFqQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0YsYUFBVCxHQUF5QjtBQUN2QixRQUFNRyxhQUFhLEdBQUcscUJBQVMsS0FBVCxDQUF0QjtBQUNBLFFBQU0sQ0FBQ0YsVUFBRCxJQUFlRSxhQUFyQjtBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU8sQ0FBQ0gsVUFBRCxFQUFhLE1BQU0sQ0FBRSxDQUFyQixDQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..d8c13a720a3
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRU8sU0FBU0EsU0FBVCxHQUFxQjtBQUMxQixRQUFNLENBQUNDLEtBQUQsRUFBUUMsUUFBUixJQUFvQixxQkFBUyxDQUFULENBQTFCO0FBQ0EsUUFBTUMsVUFBVSxHQUFHQyxhQUFhLEVBQWhDO0FBQ0EsUUFBTTtBQUFDQyxJQUFBQTtBQUFELE1BQVFDLE1BQU0sRUFBcEI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUwsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBaUJFLFVBQWpCLENBREYsZUFFRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBYUYsS0FBYixDQUZGLGVBR0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBV0ksR0FBWCxDQUhGLGVBSUU7QUFBUSxJQUFBLE9BQU8sRUFBRUUsV0FBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSkYsQ0FERjtBQVFEOztBQUVELFNBQVNILGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELElBQWUscUJBQVMsS0FBVCxDQUFyQjtBQUVBLHdCQUFVLFNBQVNLLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9MLFVBQVA7QUFDRDs7QUFFRCxTQUFTRyxNQUFULEdBQWtCO0FBQ2hCLDRCQUFjLEtBQWQ7QUFDQSxTQUFPO0FBQUNELElBQUFBLEdBQUcsRUFBRTtBQUFOLEdBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7a0NiRUEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..4c291c46701
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsS0FBSyxHQUFHLHdCQUFkO0FBRUEsc0JBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQWFBLEtBQWIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdXNlVGhlbWUgZnJvbSAnLi91c2VUaGVtZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICByZXR1cm4gPGRpdj50aGVtZToge3RoZW1lfTwvZGl2Pjtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..217ccab2729
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJhIiwiYiIsImMiLCJkIl0sIm1hcHBpbmdzIjoiQ0FBRDtnQllDQSxBYURBO2lCYkVBLEFhRkE7b0JiR0EsQWFIQSxBTUlBLEFhSkEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..f84093d27ba
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsIklubmVyQ29tcG9uZW50Iiwic3RhdGUiXSwibWFwcGluZ3MiOiJDQUFEO1l5QkNBO2FMQ0EsQVdEQTtnQjNCREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..4221ec179c6
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
new file mode 100644
index 00000000000..124b710ac22
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
new file mode 100644
index 00000000000..15bc20de0b7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
new file mode 100644
index 00000000000..c07d8d03d08
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQ0UsSUFBQSxPQUFPLEVBQUVILElBQUksQ0FBQ0ssVUFEaEI7QUFFRSxJQUFBLFFBQVEsRUFBRUQsWUFGWjtBQUdFLElBQUEsSUFBSSxFQUFDLFVBSFA7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFERixFQUtLLEdBTEwsRUFNR0osSUFBSSxDQUFDTSxJQU5SLENBRkYsQ0FERjtBQWFEOztBQUVNLFNBQVNDLElBQVQsQ0FBY0MsS0FBZCxFQUFxQjtBQUMxQixRQUFNLENBQUNDLFdBQUQsRUFBY0MsY0FBZCxJQUFnQyxvQkFBUyxFQUFULENBQXRDO0FBQ0EsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0Isb0JBQVMsQ0FDakM7QUFBQ0MsSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FEaUMsRUFFakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FGaUMsRUFHakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLEtBQXBCO0FBQTJCQyxJQUFBQSxJQUFJLEVBQUU7QUFBakMsR0FIaUMsQ0FBVCxDQUExQjtBQUtBLFFBQU0sQ0FBQ1EsR0FBRCxFQUFNQyxNQUFOLElBQWdCLG9CQUFTLENBQVQsQ0FBdEI7QUFFQSxRQUFNQyxXQUFXLEdBQUcsdUJBQVksTUFBTTtBQUNwQyxRQUFJUCxXQUFXLEtBQUssRUFBcEIsRUFBd0I7QUFDdEJHLE1BQUFBLFFBQVEsQ0FBQyxDQUNQLEdBQUdELEtBREksRUFFUDtBQUNFRSxRQUFBQSxFQUFFLEVBQUVDLEdBRE47QUFFRVQsUUFBQUEsVUFBVSxFQUFFLEtBRmQ7QUFHRUMsUUFBQUEsSUFBSSxFQUFFRztBQUhSLE9BRk8sQ0FBRCxDQUFSO0FBUUFNLE1BQUFBLE1BQU0sQ0FBQ0QsR0FBRyxHQUFHLENBQVAsQ0FBTjtBQUNBSixNQUFBQSxjQUFjLENBQUMsRUFBRCxDQUFkO0FBQ0Q7QUFDRixHQWJtQixFQWFqQixDQUFDRCxXQUFELEVBQWNFLEtBQWQsRUFBcUJHLEdBQXJCLENBYmlCLENBQXBCO0FBZUEsUUFBTUcsY0FBYyxHQUFHLHVCQUNyQkMsS0FBSyxJQUFJO0FBQ1AsUUFBSUEsS0FBSyxDQUFDQyxHQUFOLEtBQWMsT0FBbEIsRUFBMkI7QUFDekJILE1BQUFBLFdBQVc7QUFDWjtBQUNGLEdBTG9CLEVBTXJCLENBQUNBLFdBQUQsQ0FOcUIsQ0FBdkI7QUFTQSxRQUFNSSxZQUFZLEdBQUcsdUJBQ25CRixLQUFLLElBQUk7QUFDUFIsSUFBQUEsY0FBYyxDQUFDUSxLQUFLLENBQUNHLGFBQU4sQ0FBb0JDLEtBQXJCLENBQWQ7QUFDRCxHQUhrQixFQUluQixDQUFDWixjQUFELENBSm1CLENBQXJCO0FBT0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnNCLFlBQVksSUFBSVgsUUFBUSxDQUFDRCxLQUFLLENBQUNhLE1BQU4sQ0FBYXhCLElBQUksSUFBSUEsSUFBSSxLQUFLdUIsWUFBOUIsQ0FBRCxDQURQLEVBRWpCLENBQUNaLEtBQUQsQ0FGaUIsQ0FBbkI7QUFLQSxRQUFNVCxVQUFVLEdBQUcsdUJBQ2pCdUIsWUFBWSxJQUFJO0FBQ2Q7QUFDQTtBQUNBLFVBQU1DLEtBQUssR0FBR2YsS0FBSyxDQUFDZ0IsU0FBTixDQUFnQjNCLElBQUksSUFBSUEsSUFBSSxDQUFDYSxFQUFMLEtBQVlZLFlBQVksQ0FBQ1osRUFBakQsQ0FBZDtBQUVBRCxJQUFBQSxRQUFRLENBQ05ELEtBQUssQ0FDRmlCLEtBREgsQ0FDUyxDQURULEVBQ1lGLEtBRFosRUFFR0csTUFGSCxDQUVVLEVBQ04sR0FBR0osWUFERztBQUVOcEIsTUFBQUEsVUFBVSxFQUFFLENBQUNvQixZQUFZLENBQUNwQjtBQUZwQixLQUZWLEVBTUd3QixNQU5ILENBTVVsQixLQUFLLENBQUNpQixLQUFOLENBQVlGLEtBQUssR0FBRyxDQUFwQixDQU5WLENBRE0sQ0FBUjtBQVNELEdBZmdCLEVBZ0JqQixDQUFDZixLQUFELENBaEJpQixDQUFuQjtBQW1CQSxzQkFDRSxvQkFBQyxjQUFEO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFlBREYsZUFFRTtBQUNFLElBQUEsSUFBSSxFQUFDLE1BRFA7QUFFRSxJQUFBLFdBQVcsRUFBQyxrQkFGZDtBQUdFLElBQUEsS0FBSyxFQUFFRixXQUhUO0FBSUUsSUFBQSxRQUFRLEVBQUVXLFlBSlo7QUFLRSxJQUFBLFVBQVUsRUFBRUgsY0FMZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUZGLGVBU0U7QUFBUSxJQUFBLFFBQVEsRUFBRVIsV0FBVyxLQUFLLEVBQWxDO0FBQXNDLElBQUEsT0FBTyxFQUFFTyxXQUEvQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDRTtBQUFNLElBQUEsSUFBSSxFQUFDLEtBQVg7QUFBaUIsa0JBQVcsVUFBNUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsV0FERixDQVRGLGVBY0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsS0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUMsVUFKZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..8cee7130df0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLHFCQUFTLENBQVQsQ0FBbkI7QUFDQSxRQUFNQyxLQUFLLEdBQUdELFVBQVUsQ0FBQyxDQUFELENBQXhCO0FBQ0EsUUFBTUUsUUFBUSxHQUFHRixVQUFVLENBQUMsQ0FBRCxDQUEzQjtBQUVBLFFBQU1HLFFBQVEsR0FBR0MsYUFBYSxFQUE5QjtBQUNBLFFBQU0sQ0FBQ0MsVUFBRCxJQUFlRixRQUFyQjtBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1HLFdBQVcsR0FBRyxNQUFNSixRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFpQkksVUFBakIsQ0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFhSixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSyxXQUFqQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0YsYUFBVCxHQUF5QjtBQUN2QixRQUFNRyxhQUFhLEdBQUcscUJBQVMsS0FBVCxDQUF0QjtBQUNBLFFBQU0sQ0FBQ0YsVUFBRCxJQUFlRSxhQUFyQjtBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU8sQ0FBQ0gsVUFBRCxFQUFhLE1BQU0sQ0FBRSxDQUFyQixDQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..d0f15fc054f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRU8sU0FBU0EsU0FBVCxHQUFxQjtBQUMxQixRQUFNLENBQUNDLEtBQUQsRUFBUUMsUUFBUixJQUFvQixxQkFBUyxDQUFULENBQTFCO0FBQ0EsUUFBTUMsVUFBVSxHQUFHQyxhQUFhLEVBQWhDO0FBQ0EsUUFBTTtBQUFDQyxJQUFBQTtBQUFELE1BQVFDLE1BQU0sRUFBcEI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUwsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBaUJFLFVBQWpCLENBREYsZUFFRTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBYUYsS0FBYixDQUZGLGVBR0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBV0ksR0FBWCxDQUhGLGVBSUU7QUFBUSxJQUFBLE9BQU8sRUFBRUUsV0FBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSkYsQ0FERjtBQVFEOztBQUVELFNBQVNILGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELElBQWUscUJBQVMsS0FBVCxDQUFyQjtBQUVBLHdCQUFVLFNBQVNLLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9MLFVBQVA7QUFDRDs7QUFFRCxTQUFTRyxNQUFULEdBQWtCO0FBQ2hCLDRCQUFjLEtBQWQ7QUFDQSxTQUFPO0FBQUNELElBQUFBLEdBQUcsRUFBRTtBQUFOLEdBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7a0NiRUEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..aa954bd50ae
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsS0FBSyxHQUFHLHdCQUFkO0FBRUEsc0JBQU87QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQWFBLEtBQWIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdXNlVGhlbWUgZnJvbSAnLi91c2VUaGVtZSc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICByZXR1cm4gPGRpdj50aGVtZToge3RoZW1lfTwvZGl2Pjtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..33b7055c809
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJhIiwiYiIsImMiLCJkIl0sIm1hcHBpbmdzIjoiQ0FBRDtnQllDQSxBYURBO2lCYkVBLEFhRkE7b0JiR0EsQWFIQSxBTUlBLEFhSkEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..302df16647c
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsIklubmVyQ29tcG9uZW50Iiwic3RhdGUiXSwibWFwcGluZ3MiOiJDQUFEO1l5QkNBO2FMQ0EsQVdEQTtnQjNCREEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..027609f63dc
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
new file mode 100644
index 00000000000..0b362bd3719
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUVBLHNCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHFCQUFnQkQsS0FBaEIsV0FERixlQUVFO0FBQVEsSUFBQSxPQUFPLEVBQUUsTUFBTUMsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUEvQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFGRixDQURGO0FBTUQiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 00000000000..c8284c7ad8c
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
new file mode 100644
index 00000000000..196adbf6017
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQ0UsSUFBQSxPQUFPLEVBQUVILElBQUksQ0FBQ0ssVUFEaEI7QUFFRSxJQUFBLFFBQVEsRUFBRUQsWUFGWjtBQUdFLElBQUEsSUFBSSxFQUFDLFVBSFA7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFERixFQUtLLEdBTEwsRUFNR0osSUFBSSxDQUFDTSxJQU5SLENBRkYsQ0FERjtBQWFEOztBQUVNLFNBQVNDLElBQVQsQ0FBY0MsS0FBZCxFQUFxQjtBQUMxQixRQUFNLENBQUNDLFdBQUQsRUFBY0MsY0FBZCxJQUFnQyxvQkFBUyxFQUFULENBQXRDO0FBQ0EsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0Isb0JBQVMsQ0FDakM7QUFBQ0MsSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FEaUMsRUFFakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLElBQXBCO0FBQTBCQyxJQUFBQSxJQUFJLEVBQUU7QUFBaEMsR0FGaUMsRUFHakM7QUFBQ08sSUFBQUEsRUFBRSxFQUFFLENBQUw7QUFBUVIsSUFBQUEsVUFBVSxFQUFFLEtBQXBCO0FBQTJCQyxJQUFBQSxJQUFJLEVBQUU7QUFBakMsR0FIaUMsQ0FBVCxDQUExQjtBQUtBLFFBQU0sQ0FBQ1EsR0FBRCxFQUFNQyxNQUFOLElBQWdCLG9CQUFTLENBQVQsQ0FBdEI7QUFFQSxRQUFNQyxXQUFXLEdBQUcsdUJBQVksTUFBTTtBQUNwQyxRQUFJUCxXQUFXLEtBQUssRUFBcEIsRUFBd0I7QUFDdEJHLE1BQUFBLFFBQVEsQ0FBQyxDQUNQLEdBQUdELEtBREksRUFFUDtBQUNFRSxRQUFBQSxFQUFFLEVBQUVDLEdBRE47QUFFRVQsUUFBQUEsVUFBVSxFQUFFLEtBRmQ7QUFHRUMsUUFBQUEsSUFBSSxFQUFFRztBQUhSLE9BRk8sQ0FBRCxDQUFSO0FBUUFNLE1BQUFBLE1BQU0sQ0FBQ0QsR0FBRyxHQUFHLENBQVAsQ0FBTjtBQUNBSixNQUFBQSxjQUFjLENBQUMsRUFBRCxDQUFkO0FBQ0Q7QUFDRixHQWJtQixFQWFqQixDQUFDRCxXQUFELEVBQWNFLEtBQWQsRUFBcUJHLEdBQXJCLENBYmlCLENBQXBCO0FBZUEsUUFBTUcsY0FBYyxHQUFHLHVCQUNyQkMsS0FBSyxJQUFJO0FBQ1AsUUFBSUEsS0FBSyxDQUFDQyxHQUFOLEtBQWMsT0FBbEIsRUFBMkI7QUFDekJILE1BQUFBLFdBQVc7QUFDWjtBQUNGLEdBTG9CLEVBTXJCLENBQUNBLFdBQUQsQ0FOcUIsQ0FBdkI7QUFTQSxRQUFNSSxZQUFZLEdBQUcsdUJBQ25CRixLQUFLLElBQUk7QUFDUFIsSUFBQUEsY0FBYyxDQUFDUSxLQUFLLENBQUNHLGFBQU4sQ0FBb0JDLEtBQXJCLENBQWQ7QUFDRCxHQUhrQixFQUluQixDQUFDWixjQUFELENBSm1CLENBQXJCO0FBT0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnNCLFlBQVksSUFBSVgsUUFBUSxDQUFDRCxLQUFLLENBQUNhLE1BQU4sQ0FBYXhCLElBQUksSUFBSUEsSUFBSSxLQUFLdUIsWUFBOUIsQ0FBRCxDQURQLEVBRWpCLENBQUNaLEtBQUQsQ0FGaUIsQ0FBbkI7QUFLQSxRQUFNVCxVQUFVLEdBQUcsdUJBQ2pCdUIsWUFBWSxJQUFJO0FBQ2Q7QUFDQTtBQUNBLFVBQU1DLEtBQUssR0FBR2YsS0FBSyxDQUFDZ0IsU0FBTixDQUFnQjNCLElBQUksSUFBSUEsSUFBSSxDQUFDYSxFQUFMLEtBQVlZLFlBQVksQ0FBQ1osRUFBakQsQ0FBZDtBQUVBRCxJQUFBQSxRQUFRLENBQ05ELEtBQUssQ0FDRmlCLEtBREgsQ0FDUyxDQURULEVBQ1lGLEtBRFosRUFFR0csTUFGSCxDQUVVLEVBQ04sR0FBR0osWUFERztBQUVOcEIsTUFBQUEsVUFBVSxFQUFFLENBQUNvQixZQUFZLENBQUNwQjtBQUZwQixLQUZWLEVBTUd3QixNQU5ILENBTVVsQixLQUFLLENBQUNpQixLQUFOLENBQVlGLEtBQUssR0FBRyxDQUFwQixDQU5WLENBRE0sQ0FBUjtBQVNELEdBZmdCLEVBZ0JqQixDQUFDZixLQUFELENBaEJpQixDQUFuQjtBQW1CQSxzQkFDRSxvQkFBQyxjQUFEO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFlBREYsZUFFRTtBQUNFLElBQUEsSUFBSSxFQUFDLE1BRFA7QUFFRSxJQUFBLFdBQVcsRUFBQyxrQkFGZDtBQUdFLElBQUEsS0FBSyxFQUFFRixXQUhUO0FBSUUsSUFBQSxRQUFRLEVBQUVXLFlBSlo7QUFLRSxJQUFBLFVBQVUsRUFBRUgsY0FMZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUZGLGVBU0U7QUFBUSxJQUFBLFFBQVEsRUFBRVIsV0FBVyxLQUFLLEVBQWxDO0FBQXNDLElBQUEsT0FBTyxFQUFFTyxXQUEvQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDRTtBQUFNLElBQUEsSUFBSSxFQUFDLEtBQVg7QUFBaUIsa0JBQVcsVUFBNUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsV0FERixDQVRGLGVBY0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsS0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUMsVUFKZDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js
new file mode 100644
index 00000000000..e1b80840458
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js
new file mode 100644
index 00000000000..7866cfbb90f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsInRoZW1lIl0sIm1hcHBpbmdzIjoiQ0FBRDtlZ0JDQSxBd0JEQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
new file mode 100644
index 00000000000..d0e793c8f72
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
new file mode 100644
index 00000000000..afc84c3a9aa
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsInRoZW1lIl0sIm1hcHBpbmdzIjoiQ0FBRDtlZ0JDQSxBd0JEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/useTheme.js
new file mode 100644
index 00000000000..53bfb2b6095
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..3b1a5ad5741
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUFDLFVBQUEsR0FBQSxxQkFBQSxDQUFBLENBQUE7QUFDQSxRQUFBQyxLQUFBLEdBQUFELFVBQUEsQ0FBQSxDQUFBLENBQUE7QUFDQSxRQUFBRSxRQUFBLEdBQUFGLFVBQUEsQ0FBQSxDQUFBLENBQUE7QUFFQSxRQUFBRyxRQUFBLEdBQUFDLGFBQUEsRUFBQTtBQUNBLFFBQUEsQ0FBQUMsVUFBQSxJQUFBRixRQUFBO0FBRUEsd0JBQUEsTUFBQSxDQUNBO0FBQ0EsR0FGQSxFQUVBLEVBRkE7O0FBSUEsUUFBQUcsV0FBQSxHQUFBLE1BQUFKLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUEsQ0FBQTs7QUFFQSxzQkFDQSx5RUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFBQUksVUFBQSxDQURBLGVBRUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0JBQUFKLEtBQUEsQ0FGQSxlQUdBO0FBQUEsSUFBQSxPQUFBLEVBQUFLLFdBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsb0JBSEEsQ0FEQTtBQU9BOztBQUVBLFNBQUFGLGFBQUEsR0FBQTtBQUNBLFFBQUFHLGFBQUEsR0FBQSxxQkFBQSxLQUFBLENBQUE7QUFDQSxRQUFBLENBQUFGLFVBQUEsSUFBQUUsYUFBQTtBQUVBLHdCQUFBLFNBQUFDLGVBQUEsR0FBQSxDQUNBO0FBQ0EsR0FGQSxFQUVBLEVBRkE7QUFJQSxTQUFBLENBQUFILFVBQUEsRUFBQSxNQUFBLENBQUEsQ0FBQSxDQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBjb3VudFN0YXRlID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGNvdW50ID0gY291bnRTdGF0ZVswXTtcbiAgY29uc3Qgc2V0Q291bnQgPSBjb3VudFN0YXRlWzFdO1xuXG4gIGNvbnN0IGRhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBkYXJrTW9kZVN0YXRlID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSBkYXJrTW9kZVN0YXRlO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gW2lzRGFya01vZGUsICgpID0+IHt9XTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
new file mode 100644
index 00000000000..055244b33a7
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  const {
+    foo
+  } = useFoo();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 7
+    }
+  }, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = (0, _react.useState)(false);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7Ozs7O0FBRUEsU0FBQUEsU0FBQSxHQUFBO0FBQ0EsUUFBQSxDQUFBQyxLQUFBLEVBQUFDLFFBQUEsSUFBQSxxQkFBQSxDQUFBLENBQUE7QUFDQSxRQUFBQyxVQUFBLEdBQUFDLGFBQUEsRUFBQTtBQUNBLFFBQUE7QUFBQUMsSUFBQUE7QUFBQSxNQUFBQyxNQUFBLEVBQUE7QUFFQSx3QkFBQSxNQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTs7QUFJQSxRQUFBQyxXQUFBLEdBQUEsTUFBQUwsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBOztBQUVBLHNCQUNBLHlFQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9CQUFBRSxVQUFBLENBREEsZUFFQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxnQkFBQUYsS0FBQSxDQUZBLGVBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FBQUksR0FBQSxDQUhBLGVBSUE7QUFBQSxJQUFBLE9BQUEsRUFBQUUsV0FBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFKQSxDQURBO0FBUUE7O0FBRUEsU0FBQUgsYUFBQSxHQUFBO0FBQ0EsUUFBQSxDQUFBRCxVQUFBLElBQUEscUJBQUEsS0FBQSxDQUFBO0FBRUEsd0JBQUEsU0FBQUssZUFBQSxHQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTtBQUlBLFNBQUFMLFVBQUE7QUFDQTs7QUFFQSxTQUFBRyxNQUFBLEdBQUE7QUFDQSw0QkFBQSxLQUFBO0FBQ0EsU0FBQTtBQUFBRCxJQUFBQSxHQUFBLEVBQUE7QUFBQSxHQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlRGVidWdWYWx1ZSwgdXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBpc0RhcmtNb2RlID0gdXNlSXNEYXJrTW9kZSgpO1xuICBjb25zdCB7Zm9vfSA9IHVzZUZvbygpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgLy8gLi4uXG4gIH0sIFtdKTtcblxuICBjb25zdCBoYW5kbGVDbGljayA9ICgpID0+IHNldENvdW50KGNvdW50ICsgMSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGRpdj5EYXJrIG1vZGU/IHtpc0RhcmtNb2RlfTwvZGl2PlxuICAgICAgPGRpdj5Db3VudDoge2NvdW50fTwvZGl2PlxuICAgICAgPGRpdj5Gb286IHtmb299PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gaXNEYXJrTW9kZTtcbn1cblxuZnVuY3Rpb24gdXNlRm9vKCkge1xuICB1c2VEZWJ1Z1ZhbHVlKCdmb28nKTtcbiAgcmV0dXJuIHtmb286IHRydWV9O1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
new file mode 100644
index 00000000000..7f0b1b1104f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _jsxFileName = "";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7OztBQUVBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUFDLEtBQUEsR0FBQSx3QkFBQTtBQUVBLHNCQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUFBQSxLQUFBLENBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 00000000000..da7eb15f2ef
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const A = /*#__PURE__*/(0, _react.createContext)(1);
+const B = /*#__PURE__*/(0, _react.createContext)(2);
+
+function Component() {
+  const a = (0, _react.useContext)(A);
+  const b = (0, _react.useContext)(B); // prettier-ignore
+
+  const c = (0, _react.useContext)(A),
+        d = (0, _react.useContext)(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFBQSxDQUFBLGdCQUFBLDBCQUFBLENBQUEsQ0FBQTtBQUNBLE1BQUFDLENBQUEsZ0JBQUEsMEJBQUEsQ0FBQSxDQUFBOztBQUVBLFNBQUFDLFNBQUEsR0FBQTtBQUNBLFFBQUFDLENBQUEsR0FBQSx1QkFBQUgsQ0FBQSxDQUFBO0FBQ0EsUUFBQUksQ0FBQSxHQUFBLHVCQUFBSCxDQUFBLENBQUEsQ0FGQSxDQUlBOztBQUNBLFFBQUFJLENBQUEsR0FBQSx1QkFBQUwsQ0FBQSxDQUFBO0FBQUEsUUFBQU0sQ0FBQSxHQUFBLHVCQUFBTCxDQUFBLENBQUEsQ0FMQSxDQUtBOztBQUVBLFNBQUFFLENBQUEsR0FBQUMsQ0FBQSxHQUFBQyxDQUFBLEdBQUFDLENBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQge2NyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHR9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgQSA9IGNyZWF0ZUNvbnRleHQoMSk7XG5jb25zdCBCID0gY3JlYXRlQ29udGV4dCgyKTtcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgYSA9IHVzZUNvbnRleHQoQSk7XG4gIGNvbnN0IGIgPSB1c2VDb250ZXh0KEIpO1xuXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICBjb25zdCBjID0gdXNlQ29udGV4dChBKSwgZCA9IHVzZUNvbnRleHQoQik7IC8vIGVzbGludC1kaXNhYmxlLWxpbmUgb25lLXZhclxuXG4gIHJldHVybiBhICsgYiArIGMgKyBkO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..8b7f8607b96
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQUE7QUFBQUEsRUFBQUEsT0FBQTtBQUFBQyxFQUFBQTtBQUFBLElBQUFDLE9BQUEsQ0FBQSxPQUFBLENBQUE7O0FBRUEsU0FBQUMsU0FBQSxDQUFBQyxLQUFBLEVBQUE7QUFDQSxRQUFBQyxjQUFBLEdBQUFMLE9BQUEsQ0FBQSxNQUFBLE1BQUE7QUFDQSxVQUFBLENBQUFNLEtBQUEsSUFBQUwsUUFBQSxDQUFBLENBQUEsQ0FBQTtBQUVBLFdBQUFLLEtBQUE7QUFDQSxHQUpBLENBQUE7QUFLQUYsRUFBQUEsS0FBQSxDQUFBRyxRQUFBLENBQUFGLGNBQUE7QUFFQSxTQUFBLElBQUE7QUFDQTs7QUFFQUcsTUFBQSxDQUFBQyxPQUFBLEdBQUE7QUFBQU4sRUFBQUE7QUFBQSxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
new file mode 100644
index 00000000000..50d73d23db2
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFFQTtBQUVBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBRUEsc0JBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEscUJBQUFELEtBQUEsV0FEQSxlQUVBO0FBQUEsSUFBQSxPQUFBLEVBQUEsTUFBQUMsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUZBLENBREE7QUFNQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG4vLyA/c291cmNlTWFwcGluZ1VSTD0oW15cXHMnXCJdKykvZ21cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/Example.js
new file mode 100644
index 00000000000..aca089340fb
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/Example.js
@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
+  }, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1),
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 7
+    }
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7OztBQUVBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBRUEsc0JBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEscUJBQUFELEtBQUEsV0FEQSxlQUVBO0FBQUEsSUFBQSxPQUFBLEVBQUEsTUFBQUMsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGdCQUZBLENBREE7QUFNQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
new file mode 100644
index 00000000000..0cc865be3e8
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsSUFBQUMsT0FBQSxDQUFBLE9BQUEsQ0FBQSxDQUFBQyxRQUFBLENBQUEsQ0FBQSxDQUFBOztBQUVBLFNBQUFGLEtBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnRdID0gcmVxdWlyZSgncmVhY3QnKS51c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gY291bnQ7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ToDoList.js
new file mode 100644
index 00000000000..c3efb4e4861
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ToDoList.js
@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxFileName = "";
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ListItem({
+  item,
+  removeItem,
+  toggleItem
+}) {
+  const handleDelete = (0, React.useCallback)(() => {
+    removeItem(item);
+  }, [item, removeItem]);
+  const handleToggle = (0, React.useCallback)(() => {
+    toggleItem(item);
+  }, [item, toggleItem]);
+  return /*#__PURE__*/React.createElement("li", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 7
+    }
+  }, "Delete"), /*#__PURE__*/React.createElement("label", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
+  }), ' ', item.text));
+}
+
+function List(props) {
+  const [newItemText, setNewItemText] = (0, React.useState)('');
+  const [items, setItems] = (0, React.useState)([{
+    id: 1,
+    isComplete: true,
+    text: 'First'
+  }, {
+    id: 2,
+    isComplete: true,
+    text: 'Second'
+  }, {
+    id: 3,
+    isComplete: false,
+    text: 'Third'
+  }]);
+  const [uid, setUID] = (0, React.useState)(4);
+  const handleClick = (0, React.useCallback)(() => {
+    if (newItemText !== '') {
+      setItems([...items, {
+        id: uid,
+        isComplete: false,
+        text: newItemText
+      }]);
+      setUID(uid + 1);
+      setNewItemText('');
+    }
+  }, [newItemText, items, uid]);
+  const handleKeyPress = (0, React.useCallback)(event => {
+    if (event.key === 'Enter') {
+      handleClick();
+    }
+  }, [handleClick]);
+  const handleChange = (0, React.useCallback)(event => {
+    setNewItemText(event.currentTarget.value);
+  }, [setNewItemText]);
+  const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
+  const toggleItem = (0, React.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 /*#__PURE__*/React.createElement(React.Fragment, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, "Add")), /*#__PURE__*/React.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 116,
+      columnNumber: 7
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 11
+    }
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHQSxTQUFBQSxRQUFBLENBQUE7QUFBQUMsRUFBQUEsSUFBQTtBQUFBQyxFQUFBQSxVQUFBO0FBQUFDLEVBQUFBO0FBQUEsQ0FBQSxFQUFBO0FBQ0EsUUFBQUMsWUFBQSxHQUFBLHVCQUFBLE1BQUE7QUFDQUYsSUFBQUEsVUFBQSxDQUFBRCxJQUFBLENBQUE7QUFDQSxHQUZBLEVBRUEsQ0FBQUEsSUFBQSxFQUFBQyxVQUFBLENBRkEsQ0FBQTtBQUlBLFFBQUFHLFlBQUEsR0FBQSx1QkFBQSxNQUFBO0FBQ0FGLElBQUFBLFVBQUEsQ0FBQUYsSUFBQSxDQUFBO0FBQ0EsR0FGQSxFQUVBLENBQUFBLElBQUEsRUFBQUUsVUFBQSxDQUZBLENBQUE7QUFJQSxzQkFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDQTtBQUFBLElBQUEsT0FBQSxFQUFBQyxZQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGNBREEsZUFFQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDQTtBQUNBLElBQUEsT0FBQSxFQUFBSCxJQUFBLENBQUFLLFVBREE7QUFFQSxJQUFBLFFBQUEsRUFBQUQsWUFGQTtBQUdBLElBQUEsSUFBQSxFQUFBLFVBSEE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFEQSxFQUtBLEdBTEEsRUFNQUosSUFBQSxDQUFBTSxJQU5BLENBRkEsQ0FEQTtBQWFBOztBQUVBLFNBQUFDLElBQUEsQ0FBQUMsS0FBQSxFQUFBO0FBQ0EsUUFBQSxDQUFBQyxXQUFBLEVBQUFDLGNBQUEsSUFBQSxvQkFBQSxFQUFBLENBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLG9CQUFBLENBQ0E7QUFBQUMsSUFBQUEsRUFBQSxFQUFBLENBQUE7QUFBQVIsSUFBQUEsVUFBQSxFQUFBLElBQUE7QUFBQUMsSUFBQUEsSUFBQSxFQUFBO0FBQUEsR0FEQSxFQUVBO0FBQUFPLElBQUFBLEVBQUEsRUFBQSxDQUFBO0FBQUFSLElBQUFBLFVBQUEsRUFBQSxJQUFBO0FBQUFDLElBQUFBLElBQUEsRUFBQTtBQUFBLEdBRkEsRUFHQTtBQUFBTyxJQUFBQSxFQUFBLEVBQUEsQ0FBQTtBQUFBUixJQUFBQSxVQUFBLEVBQUEsS0FBQTtBQUFBQyxJQUFBQSxJQUFBLEVBQUE7QUFBQSxHQUhBLENBQUEsQ0FBQTtBQUtBLFFBQUEsQ0FBQVEsR0FBQSxFQUFBQyxNQUFBLElBQUEsb0JBQUEsQ0FBQSxDQUFBO0FBRUEsUUFBQUMsV0FBQSxHQUFBLHVCQUFBLE1BQUE7QUFDQSxRQUFBUCxXQUFBLEtBQUEsRUFBQSxFQUFBO0FBQ0FHLE1BQUFBLFFBQUEsQ0FBQSxDQUNBLEdBQUFELEtBREEsRUFFQTtBQUNBRSxRQUFBQSxFQUFBLEVBQUFDLEdBREE7QUFFQVQsUUFBQUEsVUFBQSxFQUFBLEtBRkE7QUFHQUMsUUFBQUEsSUFBQSxFQUFBRztBQUhBLE9BRkEsQ0FBQSxDQUFBO0FBUUFNLE1BQUFBLE1BQUEsQ0FBQUQsR0FBQSxHQUFBLENBQUEsQ0FBQTtBQUNBSixNQUFBQSxjQUFBLENBQUEsRUFBQSxDQUFBO0FBQ0E7QUFDQSxHQWJBLEVBYUEsQ0FBQUQsV0FBQSxFQUFBRSxLQUFBLEVBQUFHLEdBQUEsQ0FiQSxDQUFBO0FBZUEsUUFBQUcsY0FBQSxHQUFBLHVCQUNBQyxLQUFBLElBQUE7QUFDQSxRQUFBQSxLQUFBLENBQUFDLEdBQUEsS0FBQSxPQUFBLEVBQUE7QUFDQUgsTUFBQUEsV0FBQTtBQUNBO0FBQ0EsR0FMQSxFQU1BLENBQUFBLFdBQUEsQ0FOQSxDQUFBO0FBU0EsUUFBQUksWUFBQSxHQUFBLHVCQUNBRixLQUFBLElBQUE7QUFDQVIsSUFBQUEsY0FBQSxDQUFBUSxLQUFBLENBQUFHLGFBQUEsQ0FBQUMsS0FBQSxDQUFBO0FBQ0EsR0FIQSxFQUlBLENBQUFaLGNBQUEsQ0FKQSxDQUFBO0FBT0EsUUFBQVQsVUFBQSxHQUFBLHVCQUNBc0IsWUFBQSxJQUFBWCxRQUFBLENBQUFELEtBQUEsQ0FBQWEsTUFBQSxDQUFBeEIsSUFBQSxJQUFBQSxJQUFBLEtBQUF1QixZQUFBLENBQUEsQ0FEQSxFQUVBLENBQUFaLEtBQUEsQ0FGQSxDQUFBO0FBS0EsUUFBQVQsVUFBQSxHQUFBLHVCQUNBdUIsWUFBQSxJQUFBO0FBQ0E7QUFDQTtBQUNBLFVBQUFDLEtBQUEsR0FBQWYsS0FBQSxDQUFBZ0IsU0FBQSxDQUFBM0IsSUFBQSxJQUFBQSxJQUFBLENBQUFhLEVBQUEsS0FBQVksWUFBQSxDQUFBWixFQUFBLENBQUE7QUFFQUQsSUFBQUEsUUFBQSxDQUNBRCxLQUFBLENBQ0FpQixLQURBLENBQ0EsQ0FEQSxFQUNBRixLQURBLEVBRUFHLE1BRkEsQ0FFQSxFQUNBLEdBQUFKLFlBREE7QUFFQXBCLE1BQUFBLFVBQUEsRUFBQSxDQUFBb0IsWUFBQSxDQUFBcEI7QUFGQSxLQUZBLEVBTUF3QixNQU5BLENBTUFsQixLQUFBLENBQUFpQixLQUFBLENBQUFGLEtBQUEsR0FBQSxDQUFBLENBTkEsQ0FEQSxDQUFBO0FBU0EsR0FmQSxFQWdCQSxDQUFBZixLQUFBLENBaEJBLENBQUE7QUFtQkEsc0JBQ0Esb0JBQUEsY0FBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxZQURBLGVBRUE7QUFDQSxJQUFBLElBQUEsRUFBQSxNQURBO0FBRUEsSUFBQSxXQUFBLEVBQUEsa0JBRkE7QUFHQSxJQUFBLEtBQUEsRUFBQUYsV0FIQTtBQUlBLElBQUEsUUFBQSxFQUFBVyxZQUpBO0FBS0EsSUFBQSxVQUFBLEVBQUFILGNBTEE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFGQSxlQVNBO0FBQUEsSUFBQSxRQUFBLEVBQUFSLFdBQUEsS0FBQSxFQUFBO0FBQUEsSUFBQSxPQUFBLEVBQUFPLFdBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0E7QUFBQSxJQUFBLElBQUEsRUFBQSxLQUFBO0FBQUEsa0JBQUEsVUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxXQURBLENBVEEsZUFjQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxLQUNBTCxLQUFBLENBQUFtQixHQUFBLENBQUE5QixJQUFBLGlCQUNBLG9CQUFBLFFBQUE7QUFDQSxJQUFBLEdBQUEsRUFBQUEsSUFBQSxDQUFBYSxFQURBO0FBRUEsSUFBQSxJQUFBLEVBQUFiLElBRkE7QUFHQSxJQUFBLFVBQUEsRUFBQUMsVUFIQTtBQUlBLElBQUEsVUFBQSxFQUFBQyxVQUpBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBREEsQ0FEQSxDQWRBLENBREE7QUEyQkEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtGcmFnbWVudCwgdXNlQ2FsbGJhY2ssIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0SXRlbSh7aXRlbSwgcmVtb3ZlSXRlbSwgdG9nZ2xlSXRlbX0pIHtcbiAgY29uc3QgaGFuZGxlRGVsZXRlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHJlbW92ZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCByZW1vdmVJdGVtXSk7XG5cbiAgY29uc3QgaGFuZGxlVG9nZ2xlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHRvZ2dsZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCB0b2dnbGVJdGVtXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGk+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZURlbGV0ZX0+RGVsZXRlPC9idXR0b24+XG4gICAgICA8bGFiZWw+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIGNoZWNrZWQ9e2l0ZW0uaXNDb21wbGV0ZX1cbiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlVG9nZ2xlfVxuICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgIC8+eycgJ31cbiAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9saT5cbiAgKTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIExpc3QocHJvcHMpIHtcbiAgY29uc3QgW25ld0l0ZW1UZXh0LCBzZXROZXdJdGVtVGV4dF0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtpdGVtcywgc2V0SXRlbXNdID0gdXNlU3RhdGUoW1xuICAgIHtpZDogMSwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ0ZpcnN0J30sXG4gICAge2lkOiAyLCBpc0NvbXBsZXRlOiB0cnVlLCB0ZXh0OiAnU2Vjb25kJ30sXG4gICAge2lkOiAzLCBpc0NvbXBsZXRlOiBmYWxzZSwgdGV4dDogJ1RoaXJkJ30sXG4gIF0pO1xuICBjb25zdCBbdWlkLCBzZXRVSURdID0gdXNlU3RhdGUoNCk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKG5ld0l0ZW1UZXh0ICE9PSAnJykge1xuICAgICAgc2V0SXRlbXMoW1xuICAgICAgICAuLi5pdGVtcyxcbiAgICAgICAge1xuICAgICAgICAgIGlkOiB1aWQsXG4gICAgICAgICAgaXNDb21wbGV0ZTogZmFsc2UsXG4gICAgICAgICAgdGV4dDogbmV3SXRlbVRleHQsXG4gICAgICAgIH0sXG4gICAgICBdKTtcbiAgICAgIHNldFVJRCh1aWQgKyAxKTtcbiAgICAgIHNldE5ld0l0ZW1UZXh0KCcnKTtcbiAgICB9XG4gIH0sIFtuZXdJdGVtVGV4dCwgaXRlbXMsIHVpZF0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleVByZXNzID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICBoYW5kbGVDbGljaygpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2hhbmRsZUNsaWNrXSxcbiAgKTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICBldmVudCA9PiB7XG4gICAgICBzZXROZXdJdGVtVGV4dChldmVudC5jdXJyZW50VGFyZ2V0LnZhbHVlKTtcbiAgICB9LFxuICAgIFtzZXROZXdJdGVtVGV4dF0sXG4gICk7XG5cbiAgY29uc3QgcmVtb3ZlSXRlbSA9IHVzZUNhbGxiYWNrKFxuICAgIGl0ZW1Ub1JlbW92ZSA9PiBzZXRJdGVtcyhpdGVtcy5maWx0ZXIoaXRlbSA9PiBpdGVtICE9PSBpdGVtVG9SZW1vdmUpKSxcbiAgICBbaXRlbXNdLFxuICApO1xuXG4gIGNvbnN0IHRvZ2dsZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9Ub2dnbGUgPT4ge1xuICAgICAgLy8gRG9udCB1c2UgaW5kZXhPZigpXG4gICAgICAvLyBiZWNhdXNlIGVkaXRpbmcgcHJvcHMgaW4gRGV2VG9vbHMgY3JlYXRlcyBhIG5ldyBPYmplY3QuXG4gICAgICBjb25zdCBpbmRleCA9IGl0ZW1zLmZpbmRJbmRleChpdGVtID0+IGl0ZW0uaWQgPT09IGl0ZW1Ub1RvZ2dsZS5pZCk7XG5cbiAgICAgIHNldEl0ZW1zKFxuICAgICAgICBpdGVtc1xuICAgICAgICAgIC5zbGljZSgwLCBpbmRleClcbiAgICAgICAgICAuY29uY2F0KHtcbiAgICAgICAgICAgIC4uLml0ZW1Ub1RvZ2dsZSxcbiAgICAgICAgICAgIGlzQ29tcGxldGU6ICFpdGVtVG9Ub2dnbGUuaXNDb21wbGV0ZSxcbiAgICAgICAgICB9KVxuICAgICAgICAgIC5jb25jYXQoaXRlbXMuc2xpY2UoaW5kZXggKyAxKSksXG4gICAgICApO1xuICAgIH0sXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxGcmFnbWVudD5cbiAgICAgIDxoMT5MaXN0PC9oMT5cbiAgICAgIDxpbnB1dFxuICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgIHBsYWNlaG9sZGVyPVwiTmV3IGxpc3QgaXRlbS4uLlwiXG4gICAgICAgIHZhbHVlPXtuZXdJdGVtVGV4dH1cbiAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgb25LZXlQcmVzcz17aGFuZGxlS2V5UHJlc3N9XG4gICAgICAvPlxuICAgICAgPGJ1dHRvbiBkaXNhYmxlZD17bmV3SXRlbVRleHQgPT09ICcnfSBvbkNsaWNrPXtoYW5kbGVDbGlja30+XG4gICAgICAgIDxzcGFuIHJvbGU9XCJpbWdcIiBhcmlhLWxhYmVsPVwiQWRkIGl0ZW1cIj5cbiAgICAgICAgICBBZGRcbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8dWw+XG4gICAgICAgIHtpdGVtcy5tYXAoaXRlbSA9PiAoXG4gICAgICAgICAgPExpc3RJdGVtXG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgcmVtb3ZlSXRlbT17cmVtb3ZlSXRlbX1cbiAgICAgICAgICAgIHRvZ2dsZUl0ZW09e3RvZ2dsZUl0ZW19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICA8L3VsPlxuICAgIDwvRnJhZ21lbnQ+XG4gICk7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/index.js
new file mode 100644
index 00000000000..781552cbc21
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithCustomHook", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithCustomHook.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithExternalCustomHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function () {
+    return _Example.Component;
+  }
+});
+Object.defineProperty(exports, "InlineRequire", {
+  enumerable: true,
+  get: function () {
+    return _InlineRequire.Component;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+exports.ToDoList = void 0;
+
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
+var _Example = require("./Example");
+
+var _InlineRequire = require("./InlineRequire");
+
+var ToDoList = _interopRequireWildcard(require("./ToDoList"));
+
+exports.ToDoList = ToDoList;
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/useTheme.js
new file mode 100644
index 00000000000..5eb0148532e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/useTheme.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
+exports.ThemeContext = ThemeContext;
+
+function useTheme() {
+  const theme = (0, _react.useContext)(ThemeContext);
+  (0, _react.useDebugValue)(theme);
+  return theme;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV0EsTUFBQUEsWUFBQSxnQkFBQSwwQkFBQSxRQUFBLENBQUE7OztBQUVBLFNBQUFDLFFBQUEsR0FBQTtBQUNBLFFBQUFDLEtBQUEsR0FBQSx1QkFBQUYsWUFBQSxDQUFBO0FBQ0EsNEJBQUFFLEtBQUE7QUFDQSxTQUFBQSxLQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
new file mode 100644
index 00000000000..314e02c49a5
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const {useEffect, useState} = require('react');
+
+function Component() {
+  const countState = useState(0);
+  const count = countState[0];
+  const setCount = countState[1];
+
+  const darkMode = useIsDarkMode();
+  const [isDarkMode, setDarkMode] = darkMode;
+
+  useEffect(() => {
+    // ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return null;
+}
+
+function useIsDarkMode() {
+  const darkModeState = useState(false);
+  const [isDarkMode] = darkModeState;
+
+  useEffect(function useEffectCreate() {
+    // Here is where we may listen to a "theme" event...
+  }, []);
+
+  return [isDarkMode, () => {}];
+}
+
+module.exports = {Component};
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
new file mode 100644
index 00000000000..5bfe561e918
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useState} = require('react');
+const {useCustom} = require('./useCustom');
+
+function Component(props) {
+  const [count] = useState(0);
+  useCustom();
+  return count;
+}
+
+module.exports = {Component};
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
new file mode 100644
index 00000000000..bb246d02dcb
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useDebugValue, useState} = require('react');
+
+function Component(props) {
+  const foo = useCustomHookOne();
+  // This cae is ignored;
+  // the meaning of a tuple assignment for a custom hook is unclear.
+  const [bar] = useCustomHookTwo();
+  return `${foo}-${bar}`;
+}
+
+function useCustomHookOne() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example');
+  return true;
+}
+
+function useCustomHookTwo() {
+  const [baz, setBaz] = useState(true);
+  return [baz, setBaz];
+}
+
+module.exports = {Component};
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
new file mode 100644
index 00000000000..57d9bf5e77f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useMemo, useState} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+
+    return state;
+  });
+  props.callback(InnerComponent);
+ 
+  return null;
+};
+
+module.exports = {Component};
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
new file mode 100644
index 00000000000..afc48b64d2c
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useDebugValue} = require('react');
+
+function Component(props) {
+  useCustomHookOne();
+  const [bar] = useCustomHookTwo();
+  const {foo} = useCustomHookThree();
+  return `${bar}-${foo}`;
+}
+
+function useCustomHookOne() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example1');
+}
+
+function useCustomHookTwo() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example2');
+  return [true];
+}
+
+function useCustomHookThree() {
+  useDebugValue('example3');
+  return {foo: true};
+}
+
+module.exports = {Component};
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
new file mode 100644
index 00000000000..bf64191e341
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const {useEffect} = React;
+
+function Component(props) {
+  useEffect(() => {});
+  React.useLayoutEffect(() => () => {});
+  return null;
+}
+
+module.exports = {Component};
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
new file mode 100644
index 00000000000..16a998b41c8
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const {useReducer} = React;
+
+function Component(props) {
+  const [foo] = useReducer(true);
+  const [bar] = useReducer(true);
+  const [baz] = React.useReducer(true);
+  return `${foo}-${bar}-${baz}`;
+}
+
+module.exports = {Component};
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseState.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseState.js
new file mode 100644
index 00000000000..376fbb606a0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseState.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const {useState} = React;
+
+function Component(props) {
+  const [foo] = useState(true);
+  const bar = useState(true);
+  const [baz] = React.useState(true);
+  const [, forceUpdate] = useState();
+  return `${foo}-${bar}-${baz}`;
+}
+
+module.exports = {Component};
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/README.md b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/README.md
new file mode 100644
index 00000000000..1c88f7fa638
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/README.md
@@ -0,0 +1 @@
+The JavaScript source files in this directory are not linted or pre-processed in any way. This is intentional, since they are used by the `parseHookNames-test` to test the behavior of "uncompiled" JavaScript (without source maps).
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/useCustom.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/useCustom.js
new file mode 100644
index 00000000000..011c34c2fc9
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/useCustom.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useEffect} = require('react');
+
+function useCustom() {
+  useEffect(() => {
+    // ...
+  }, []);
+}
+
+module.exports = {useCustom};
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/index.js
new file mode 100644
index 00000000000..b688d0fbcd8
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/index.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';
+export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
+export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
+export {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';
+export {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';
+export {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';
+export {Component as Example} from './Example';
+export {Component as InlineRequire} from './InlineRequire';
+import * as ToDoList from './ToDoList';
+export {ToDoList};
+export {default as useTheme} from './useTheme';
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/useTheme.js
new file mode 100644
index 00000000000..90efe6ba157
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/useTheme.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, useContext, useDebugValue} from 'react';
+
+export const ThemeContext = createContext('bright');
+
+export default function useTheme() {
+  const theme = useContext(ThemeContext);
+  useDebugValue(theme);
+  return theme;
+}
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js b/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js
new file mode 100644
index 00000000000..b1170814e52
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {parse} from '@babel/parser';
+import {generateEncodedHookMap, generateHookMap} from '../generateHookMap';
+
+function expectHookMapToEqual(actual, expected) {
+  expect(actual.names).toEqual(expected.names);
+
+  const formattedMappings = [];
+  actual.mappings.forEach(lines => {
+    lines.forEach(segment => {
+      const name = actual.names[segment[2]];
+      if (name == null) {
+        throw new Error(`Expected to find name at position ${segment[2]}`);
+      }
+      formattedMappings.push(`${name} from ${segment[0]}:${segment[1]}`);
+    });
+  });
+  expect(formattedMappings).toEqual(expected.mappings);
+}
+
+describe('generateHookMap', () => {
+  it('should parse names for built-in hooks', () => {
+    const code = `
+import {useState, useContext, useMemo, useReducer} from 'react';
+
+export function Component() {
+  const a = useMemo(() => A);
+  const [b, setB] = useState(0);
+
+  // prettier-ignore
+  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var
+
+  const [e, dispatch] = useReducer(reducer, initialState);
+  const f = useRef(null)
+
+  return a + b + c + d + e + f.current;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'a', 'b', 'c', 'd', 'e', 'f'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'a from 5:12',
+        '<no-hook> from 5:28',
+        'b from 6:20',
+        '<no-hook> from 6:31',
+        'c from 9:12',
+        '<no-hook> from 9:25',
+        'd from 9:31',
+        '<no-hook> from 9:44',
+        'e from 11:24',
+        '<no-hook> from 11:57',
+        'f from 12:12',
+        '<no-hook> from 12:24',
+      ],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    {
+      "mappings": "CAAD;KYCA,AgBDA;MREA,AWFA;SnBGA,AaHA,AMIA,AaJA;WpBKA,AiCLA;Y7CMA,AYNA",
+      "names": [
+        "<no-hook>",
+        "a",
+        "b",
+        "c",
+        "d",
+        "e",
+        "f",
+      ],
+    }
+  `);
+  });
+
+  it('should parse names for custom hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const theme = useTheme();
+  const [val, setVal] = useValue();
+
+  return theme;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'theme', 'val'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'theme from 6:16',
+        '<no-hook> from 6:26',
+        'val from 7:24',
+        '<no-hook> from 7:34',
+      ],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    {
+      "mappings": "CAAD;MgBCA,AUDA;OFEA,AUFA",
+      "names": [
+        "<no-hook>",
+        "theme",
+        "val",
+      ],
+    }
+  `);
+  });
+
+  it('should parse names for nested hook calls', () => {
+    const code = `
+import {useMemo, useState} from 'react';
+
+export function Component() {
+  const InnerComponent = useMemo(() => () => {
+    const [state, setState] = useState(0);
+
+    return state;
+  });
+
+  return null;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'InnerComponent', 'state'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'InnerComponent from 5:25',
+        'state from 6:30',
+        'InnerComponent from 6:41',
+        '<no-hook> from 9:4',
+      ],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    {
+      "mappings": "CAAD;KyBCA;MKCA,AWDA;SrCDA",
+      "names": [
+        "<no-hook>",
+        "InnerComponent",
+        "state",
+      ],
+    }
+  `);
+  });
+
+  it('should skip names for non-nameable hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const [val, setVal] = useState(0);
+
+  useEffect(() => {
+    // ...
+  });
+
+  useLayoutEffect(() => {
+    // ...
+  });
+
+  return val;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'val'],
+      mappings: ['<no-hook> from 1:0', 'val from 6:24', '<no-hook> from 6:35'],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    {
+      "mappings": "CAAD;MwBCA,AWDA",
+      "names": [
+        "<no-hook>",
+        "val",
+      ],
+    }
+  `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/getHookNameForLocation-test.js b/packages/react-devtools-shared/src/hooks/__tests__/getHookNameForLocation-test.js
new file mode 100644
index 00000000000..b96ee01eb00
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/getHookNameForLocation-test.js
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {parse} from '@babel/parser';
+import {generateHookMap} from '../generateHookMap';
+import {getHookNameForLocation} from '../getHookNameForLocation';
+
+function expectHookMapToEqual(actual, expected) {
+  expect(actual.names).toEqual(expected.names);
+
+  const formattedMappings = [];
+  actual.mappings.forEach(lines => {
+    lines.forEach(segment => {
+      const name = actual.names[segment[2]];
+      if (name == null) {
+        throw new Error(`Expected to find name at position ${segment[2]}`);
+      }
+      formattedMappings.push(`${name} from ${segment[0]}:${segment[1]}`);
+    });
+  });
+  expect(formattedMappings).toEqual(expected.mappings);
+}
+
+describe('generateHookMap', () => {
+  it('should parse names for built-in hooks', () => {
+    const code = `
+import {useState, useContext, useMemo, useReducer} from 'react';
+
+export function Component() {
+  const a = useMemo(() => A);
+  const [b, setB] = useState(0);
+
+  // prettier-ignore
+  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var
+
+  const [e, dispatch] = useReducer(reducer, initialState);
+  const f = useRef(null)
+
+  return a + b + c + d + e + f.current;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'a', 'b', 'c', 'd', 'e', 'f'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'a from 5:12',
+        '<no-hook> from 5:28',
+        'b from 6:20',
+        '<no-hook> from 6:31',
+        'c from 9:12',
+        '<no-hook> from 9:25',
+        'd from 9:31',
+        '<no-hook> from 9:44',
+        'e from 11:24',
+        '<no-hook> from 11:57',
+        'f from 12:12',
+        '<no-hook> from 12:24',
+      ],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 2, column: 25}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 5, column: 12}, hookMap)).toEqual('a');
+    expect(getHookNameForLocation({line: 5, column: 13}, hookMap)).toEqual('a');
+    expect(getHookNameForLocation({line: 5, column: 28}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 5, column: 29}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 6, column: 20}, hookMap)).toEqual('b');
+    expect(getHookNameForLocation({line: 6, column: 30}, hookMap)).toEqual('b');
+    expect(getHookNameForLocation({line: 6, column: 31}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 7, column: 31}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 8, column: 20}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 12}, hookMap)).toEqual('c');
+    expect(getHookNameForLocation({line: 9, column: 13}, hookMap)).toEqual('c');
+    expect(getHookNameForLocation({line: 9, column: 25}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 26}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 31}, hookMap)).toEqual('d');
+    expect(getHookNameForLocation({line: 9, column: 32}, hookMap)).toEqual('d');
+    expect(getHookNameForLocation({line: 9, column: 44}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 45}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 11, column: 24}, hookMap)).toEqual(
+      'e',
+    );
+    expect(getHookNameForLocation({line: 11, column: 56}, hookMap)).toEqual(
+      'e',
+    );
+    expect(getHookNameForLocation({line: 11, column: 57}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 11, column: 58}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 12, column: 12}, hookMap)).toEqual(
+      'f',
+    );
+    expect(getHookNameForLocation({line: 12, column: 23}, hookMap)).toEqual(
+      'f',
+    );
+    expect(getHookNameForLocation({line: 12, column: 24}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 100, column: 50}, hookMap)).toEqual(
+      null,
+    );
+  });
+
+  it('should parse names for custom hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const theme = useTheme();
+  const [val, setVal] = useValue();
+
+  return theme;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'theme', 'val'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'theme from 6:16',
+        '<no-hook> from 6:26',
+        'val from 7:24',
+        '<no-hook> from 7:34',
+      ],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 6, column: 16}, hookMap)).toEqual(
+      'theme',
+    );
+    expect(getHookNameForLocation({line: 6, column: 26}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 7, column: 24}, hookMap)).toEqual(
+      'val',
+    );
+    expect(getHookNameForLocation({line: 7, column: 34}, hookMap)).toEqual(
+      null,
+    );
+  });
+
+  it('should parse names for nested hook calls', () => {
+    const code = `
+import {useMemo, useState} from 'react';
+
+export function Component() {
+  const InnerComponent = useMemo(() => () => {
+    const [state, setState] = useState(0);
+
+    return state;
+  });
+
+  return null;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'InnerComponent', 'state'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'InnerComponent from 5:25',
+        'state from 6:30',
+        'InnerComponent from 6:41',
+        '<no-hook> from 9:4',
+      ],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 5, column: 25}, hookMap)).toEqual(
+      'InnerComponent',
+    );
+    expect(getHookNameForLocation({line: 6, column: 30}, hookMap)).toEqual(
+      'state',
+    );
+    expect(getHookNameForLocation({line: 6, column: 40}, hookMap)).toEqual(
+      'state',
+    );
+    expect(getHookNameForLocation({line: 6, column: 41}, hookMap)).toEqual(
+      'InnerComponent',
+    );
+    expect(getHookNameForLocation({line: 9, column: 4}, hookMap)).toEqual(null);
+  });
+
+  it('should skip names for non-nameable hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const [val, setVal] = useState(0);
+
+  useEffect(() => {
+    // ...
+  });
+
+  useLayoutEffect(() => {
+    // ...
+  });
+
+  return val;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'val'],
+      mappings: ['<no-hook> from 1:0', 'val from 6:24', '<no-hook> from 6:35'],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 6, column: 24}, hookMap)).toEqual(
+      'val',
+    );
+    expect(getHookNameForLocation({line: 6, column: 35}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 8, column: 2}, hookMap)).toEqual(null);
+  });
+});
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js b/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
new file mode 100644
index 00000000000..f197a25fa5d
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
@@ -0,0 +1,962 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Note that this test uses React components declared in the "__source__" directory.
+// This is done to control if and how the code is transformed at runtime.
+// Do not declare test components within this test file as it is very fragile.
+
+function expectHookNamesToEqual(map, expectedNamesArray) {
+  // Slightly hacky since it relies on the iterable order of values()
+  expect(Array.from(map.values())).toEqual(expectedNamesArray);
+}
+
+function requireText(path, encoding) {
+  const {existsSync, readFileSync} = require('fs');
+  if (existsSync(path)) {
+    return Promise.resolve(readFileSync(path, encoding));
+  } else {
+    return Promise.reject(`File not found "${path}"`);
+  }
+}
+
+function initFetchMock() {
+  const fetchMock = require('jest-fetch-mock');
+  fetchMock.enableMocks();
+  fetchMock.mockIf(/.+$/, request => {
+    const url = request.url;
+    const isLoadingExternalSourceMap = /external\/.*\.map/.test(url);
+    if (isLoadingExternalSourceMap) {
+      // Assert that url contains correct query params
+      expect(url.includes('?foo=bar&param=some_value')).toBe(true);
+      const fileSystemPath = url.split('?')[0];
+      return requireText(fileSystemPath, 'utf8');
+    }
+    return requireText(url, 'utf8');
+  });
+  return fetchMock;
+}
+
+describe('parseHookNames', () => {
+  let fetchMock;
+  let inspectHooks;
+  let parseHookNames;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    jest.mock('source-map-support', () => {
+      console.trace('source-map-support');
+    });
+
+    fetchMock = initFetchMock();
+
+    inspectHooks =
+      require('react-debug-tools/src/ReactDebugHooks').inspectHooks;
+
+    // Jest can't run the workerized version of this module.
+    const {
+      flattenHooksList,
+      loadSourceAndMetadata,
+    } = require('../parseHookNames/loadSourceAndMetadata');
+    const parseSourceAndMetadata =
+      require('../parseHookNames/parseSourceAndMetadata').parseSourceAndMetadata;
+    parseHookNames = async hooksTree => {
+      const hooksList = flattenHooksList(hooksTree);
+
+      // Runs in the UI thread so it can share Network cache:
+      const locationKeyToHookSourceAndMetadata =
+        await loadSourceAndMetadata(hooksList);
+
+      // Runs in a Worker because it's CPU intensive:
+      return parseSourceAndMetadata(
+        hooksList,
+        locationKeyToHookSourceAndMetadata,
+      );
+    };
+
+    // Jest (jest-runner?) configures Errors to automatically account for source maps.
+    // This changes behavior between our tests and the browser.
+    // Ideally we would clear the prepareStackTrace() method on the Error object,
+    // but Node falls back to looking for it on the main context's Error constructor,
+    // which may still be patched.
+    // To ensure we get the default behavior, override prepareStackTrace ourselves.
+    // NOTE: prepareStackTrace is called from the error.stack getter, but the getter
+    // has a recursion breaker which falls back to the default behavior.
+    Error.prepareStackTrace = (error, trace) => {
+      return error.stack;
+    };
+  });
+
+  afterEach(() => {
+    fetch.resetMocks();
+  });
+
+  async function getHookNamesForComponent(Component, props = {}) {
+    const hooksTree = inspectHooks(Component, props, undefined);
+    const hookNames = await parseHookNames(hooksTree);
+    return hookNames;
+  }
+
+  it('should parse names for useState()', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithUseState').Component;
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz', null]);
+  });
+
+  it('should parse names for useReducer()', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithUseReducer').Component;
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+  });
+
+  it('should skip loading source files for unnamed hooks like useEffect', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithUseEffect').Component;
+
+    // Since this component contains only unnamed hooks, the source code should not even be loaded.
+    fetchMock.mockIf(/.+$/, request => {
+      throw Error(`Unexpected file request for "${request.url}"`);
+    });
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, []); // No hooks with names
+  });
+
+  it('should skip loading source files for unnamed hooks like useEffect (alternate)', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithExternalUseEffect').Component;
+
+    fetchMock.mockIf(/.+$/, request => {
+      // Since the custom hook contains only unnamed hooks, the source code should not be loaded.
+      if (request.url.endsWith('useCustom.js')) {
+        throw Error(`Unexpected file request for "${request.url}"`);
+      }
+      return requireText(request.url, 'utf8');
+    });
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['count', null]); // No hooks with names
+  });
+
+  it('should parse names for custom hooks', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithNamedCustomHooks').Component;
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, [
+      'foo',
+      null, // Custom hooks can have names, but not when using destructuring.
+      'baz',
+    ]);
+  });
+
+  it('should parse names for code using hooks indirectly', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentUsingHooksIndirectly').Component;
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['count', 'darkMode', 'isDarkMode']);
+  });
+
+  it('should parse names for code using nested hooks', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithNestedHooks').Component;
+    let InnerComponent;
+    const hookNames = await getHookNamesForComponent(Component, {
+      callback: innerComponent => {
+        InnerComponent = innerComponent;
+      },
+    });
+    const innerHookNames = await getHookNamesForComponent(InnerComponent);
+    expectHookNamesToEqual(hookNames, ['InnerComponent']);
+    expectHookNamesToEqual(innerHookNames, ['state']);
+  });
+
+  it('should return null for custom hooks without explicit names', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithUnnamedCustomHooks').Component;
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, [
+      null, // Custom hooks can have names, but this one does not even return a value.
+      null, // Custom hooks can have names, but not when using destructuring.
+      null, // Custom hooks can have names, but not when using destructuring.
+    ]);
+  });
+
+  // TODO Test that cache purge works
+
+  // TODO Test that cached metadata is purged when Fast Refresh scheduled
+
+  describe('inline, external and bundle source maps', () => {
+    it('should work for simple components', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState
+        ]);
+      }
+
+      await testFor('./__source__/Example'); // original source (uncompiled)
+      await testFor('./__source__/__compiled__/inline/Example'); // inline source map
+      await testFor('./__source__/__compiled__/external/Example'); // external source map
+      await testFor('./__source__/__compiled__/inline/index-map/Example'); // inline index map source map
+      await testFor('./__source__/__compiled__/external/index-map/Example'); // external index map source map
+      await testFor('./__source__/__compiled__/bundle/index', 'Example'); // bundle source map
+      await testFor('./__source__/__compiled__/no-columns/Example'); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should work with more complex files and components', async () => {
+      async function testFor(path, name = undefined) {
+        const components = name != null ? require(path)[name] : require(path);
+
+        let hookNames = await getHookNamesForComponent(components.List);
+        expectHookNamesToEqual(hookNames, [
+          'newItemText', // useState
+          'items', // useState
+          'uid', // useState
+          'handleClick', // useCallback
+          'handleKeyPress', // useCallback
+          'handleChange', // useCallback
+          'removeItem', // useCallback
+          'toggleItem', // useCallback
+        ]);
+
+        hookNames = await getHookNamesForComponent(components.ListItem, {
+          item: {},
+        });
+        expectHookNamesToEqual(hookNames, [
+          'handleDelete', // useCallback
+          'handleToggle', // useCallback
+        ]);
+      }
+
+      await testFor('./__source__/ToDoList'); // original source (uncompiled)
+      await testFor('./__source__/__compiled__/inline/ToDoList'); // inline source map
+      await testFor('./__source__/__compiled__/external/ToDoList'); // external source map
+      await testFor('./__source__/__compiled__/inline/index-map/ToDoList'); // inline index map source map
+      await testFor('./__source__/__compiled__/external/index-map/ToDoList'); // external index map source map
+      await testFor('./__source__/__compiled__/bundle', 'ToDoList'); // bundle source map
+      await testFor('./__source__/__compiled__/no-columns/ToDoList'); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should work for custom hook', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'isDarkMode', // useIsDarkMode()
+          'isDarkMode', // useIsDarkMode -> useState()
+          null, // useFoo()
+        ]);
+      }
+
+      await testFor('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
+      await testFor('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map
+      await testFor(
+        './__source__/__compiled__/external/ComponentWithCustomHook',
+      ); // external source map
+      await testFor(
+        './__source__/__compiled__/inline/index-map/ComponentWithCustomHook',
+      ); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/ComponentWithCustomHook',
+      ); // external index map source map
+      await testFor(
+        './__source__/__compiled__/bundle',
+        'ComponentWithCustomHook',
+      ); // bundle source map
+      await testFor(
+        './__source__/__compiled__/no-columns/ComponentWithCustomHook',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should work when code is using hooks indirectly', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'darkMode', // useDarkMode()
+          'isDarkMode', // useState()
+        ]);
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/ComponentUsingHooksIndirectly',
+      ); // inline source map
+      await testFor(
+        './__source__/__compiled__/external/ComponentUsingHooksIndirectly',
+      ); // external source map
+      await testFor(
+        './__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly',
+      ); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly',
+      ); // external index map source map
+      await testFor(
+        './__source__/__compiled__/bundle',
+        'ComponentUsingHooksIndirectly',
+      ); // bundle source map
+      await testFor(
+        './__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should work when code is using nested hooks', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        let InnerComponent;
+        const hookNames = await getHookNamesForComponent(Component, {
+          callback: innerComponent => {
+            InnerComponent = innerComponent;
+          },
+        });
+        const innerHookNames = await getHookNamesForComponent(InnerComponent);
+        expectHookNamesToEqual(hookNames, [
+          'InnerComponent', // useMemo()
+        ]);
+        expectHookNamesToEqual(innerHookNames, [
+          'state', // useState()
+        ]);
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/ComponentWithNestedHooks',
+      ); // inline source map
+      await testFor(
+        './__source__/__compiled__/external/ComponentWithNestedHooks',
+      ); // external source map
+      await testFor(
+        './__source__/__compiled__/inline/index-map/ComponentWithNestedHooks',
+      ); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/ComponentWithNestedHooks',
+      ); // external index map source map
+      await testFor(
+        './__source__/__compiled__/bundle',
+        'ComponentWithNestedHooks',
+      ); // bundle source map
+      await testFor(
+        './__source__/__compiled__/no-columns/ComponentWithNestedHooks',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should work for external hooks', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'theme', // useTheme()
+          'theme', // useContext()
+        ]);
+      }
+
+      // We can't test the uncompiled source here, because it either needs to get transformed,
+      // which would break the source mapping, or the import statements will fail.
+
+      await testFor(
+        './__source__/__compiled__/inline/ComponentWithExternalCustomHooks',
+      ); // inline source map
+      await testFor(
+        './__source__/__compiled__/external/ComponentWithExternalCustomHooks',
+      ); // external source map
+      await testFor(
+        './__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks',
+      ); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks',
+      ); // external index map source map
+      await testFor(
+        './__source__/__compiled__/bundle',
+        'ComponentWithExternalCustomHooks',
+      ); // bundle source map
+      await testFor(
+        './__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should work when multiple hooks are on a line', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'a', // useContext()
+          'b', // useContext()
+          'c', // useContext()
+          'd', // useContext()
+        ]);
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine',
+      ); // inline source map
+      await testFor(
+        './__source__/__compiled__/external/ComponentWithMultipleHooksPerLine',
+      ); // external source map
+      await testFor(
+        './__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine',
+      ); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine',
+      ); // external index map source map
+      await testFor(
+        './__source__/__compiled__/bundle',
+        'ComponentWithMultipleHooksPerLine',
+      ); // bundle source map
+
+      async function noColumntest(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'a', // useContext()
+          'b', // useContext()
+          null, // useContext()
+          null, // useContext()
+        ]);
+      }
+
+      // Note that this test is expected to only match the first two hooks
+      // because the 3rd and 4th hook are on the same line,
+      // and this type of source map doesn't have column numbers.
+      await noColumntest(
+        './__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    // TODO Inline require (e.g. require("react").useState()) isn't supported yet.
+    // Maybe this isn't an important use case to support,
+    // since inline requires are most likely to exist in compiled source (if at all).
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('should work for inline requires', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+      }
+
+      await testFor('./__source__/InlineRequire'); // original source (uncompiled)
+      await testFor('./__source__/__compiled__/inline/InlineRequire'); // inline source map
+      await testFor('./__source__/__compiled__/external/InlineRequire'); // external source map
+      await testFor('./__source__/__compiled__/inline/index-map/InlineRequire'); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/InlineRequire',
+      ); // external index map source map
+      await testFor('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map
+      await testFor('./__source__/__compiled__/no-columns/InlineRequire'); // simulated Webpack 'cheap-module-source-map'
+    });
+
+    it('should support sources that contain the string "sourceMappingURL="', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+      }
+
+      // We expect the inline sourceMappingURL to be invalid in this case; mute the warning.
+      console.warn = () => {};
+
+      await testFor('./__source__/ContainingStringSourceMappingURL'); // original source (uncompiled)
+      await testFor(
+        './__source__/__compiled__/inline/ContainingStringSourceMappingURL',
+      ); // inline source map
+      await testFor(
+        './__source__/__compiled__/external/ContainingStringSourceMappingURL',
+      ); // external source map
+      await testFor(
+        './__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL',
+      ); // inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL',
+      ); // external index map source map
+      await testFor(
+        './__source__/__compiled__/bundle',
+        'ContainingStringSourceMappingURL',
+      ); // bundle source map
+      await testFor(
+        './__source__/__compiled__/no-columns/ContainingStringSourceMappingURL',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+  });
+
+  describe('extended source maps', () => {
+    beforeEach(() => {
+      const babelParser = require('@babel/parser');
+      const generateHookMapModule = require('../generateHookMap');
+      jest.spyOn(babelParser, 'parse');
+      jest.spyOn(generateHookMapModule, 'decodeHookMap');
+    });
+
+    it('should work for simple components', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/Example',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/Example',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/Example',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/Example',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/Example',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/Example',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/Example',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/Example',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work with more complex files and components', async () => {
+      async function testFor(path, name = undefined) {
+        const components = name != null ? require(path)[name] : require(path);
+
+        let hookNames = await getHookNamesForComponent(components.List);
+        expectHookNamesToEqual(hookNames, [
+          'newItemText', // useState
+          'items', // useState
+          'uid', // useState
+          'handleClick', // useCallback
+          'handleKeyPress', // useCallback
+          'handleChange', // useCallback
+          'removeItem', // useCallback
+          'toggleItem', // useCallback
+        ]);
+
+        hookNames = await getHookNamesForComponent(components.ListItem, {
+          item: {},
+        });
+        expectHookNamesToEqual(hookNames, [
+          'handleDelete', // useCallback
+          'handleToggle', // useCallback
+        ]);
+
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ToDoList',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ToDoList',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ToDoList',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ToDoList',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ToDoList',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work for custom hook', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'isDarkMode', // useIsDarkMode()
+          'isDarkMode', // useIsDarkMode -> useState()
+          null, // isFoo()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work when code is using hooks indirectly', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'darkMode', // useDarkMode()
+          'isDarkMode', // useState()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work when code is using nested hooks', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        let InnerComponent;
+        const hookNames = await getHookNamesForComponent(Component, {
+          callback: innerComponent => {
+            InnerComponent = innerComponent;
+          },
+        });
+        const innerHookNames = await getHookNamesForComponent(InnerComponent);
+        expectHookNamesToEqual(hookNames, [
+          'InnerComponent', // useMemo()
+        ]);
+        expectHookNamesToEqual(innerHookNames, [
+          'state', // useState()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work for external hooks', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'theme', // useTheme()
+          'theme', // useContext()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      // We can't test the uncompiled source here, because it either needs to get transformed,
+      // which would break the source mapping, or the import statements will fail.
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work when multiple hooks are on a line', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'a', // useContext()
+          'b', // useContext()
+          'c', // useContext()
+          'd', // useContext()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    // TODO Inline require (e.g. require("react").useState()) isn't supported yet.
+    // Maybe this isn't an important use case to support,
+    // since inline requires are most likely to exist in compiled source (if at all).
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('should work for inline requires', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/InlineRequire',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/InlineRequire',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/InlineRequire',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/InlineRequire',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should support sources that contain the string "sourceMappingURL="', async () => {
+      async function testFor(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
+      }
+
+      // We expect the inline sourceMappingURL to be invalid in this case; mute the warning.
+      console.warn = () => {};
+
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_facebook_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_facebook_sources extended external source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended inline source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await testFor(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_facebook_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_facebook_sources extended external index map source map
+      await testFor(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended inline index map source map
+      await testFor(
+        './__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended external index map source map
+
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+  });
+});
+
+describe('parseHookNames worker', () => {
+  let inspectHooks;
+  let parseHookNames;
+  let workerizedParseSourceAndMetadataMock;
+
+  beforeEach(() => {
+    window.Worker = undefined;
+
+    workerizedParseSourceAndMetadataMock = jest.fn();
+
+    initFetchMock();
+
+    jest.mock('../parseHookNames/parseSourceAndMetadata.worker.js', () => {
+      return {
+        __esModule: true,
+        default: () => ({
+          parseSourceAndMetadata: workerizedParseSourceAndMetadataMock,
+        }),
+      };
+    });
+
+    inspectHooks =
+      require('react-debug-tools/src/ReactDebugHooks').inspectHooks;
+    parseHookNames = require('../parseHookNames').parseHookNames;
+  });
+
+  async function getHookNamesForComponent(Component, props = {}) {
+    const hooksTree = inspectHooks(Component, props, undefined);
+    const hookNames = await parseHookNames(hooksTree);
+    return hookNames;
+  }
+
+  it('should use worker', async () => {
+    const Component =
+      require('./__source__/__untransformed__/ComponentWithUseState').Component;
+
+    window.Worker = true;
+
+    // Reset module so mocked worker instance can be updated.
+    jest.resetModules();
+    parseHookNames = require('../parseHookNames').parseHookNames;
+
+    await getHookNamesForComponent(Component);
+    expect(workerizedParseSourceAndMetadataMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/updateMockSourceMaps.js b/packages/react-devtools-shared/src/hooks/__tests__/updateMockSourceMaps.js
new file mode 100644
index 00000000000..bdcfe03964b
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/__tests__/updateMockSourceMaps.js
@@ -0,0 +1,353 @@
+const {transformSync} = require('@babel/core');
+const {btoa} = require('base64');
+const {
+  lstatSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+} = require('fs');
+const {emptyDirSync} = require('fs-extra');
+const {resolve} = require('path');
+const rollup = require('rollup');
+const babel = require('@rollup/plugin-babel').babel;
+const commonjs = require('@rollup/plugin-commonjs');
+const jsx = require('acorn-jsx');
+const rollupResolve = require('@rollup/plugin-node-resolve').nodeResolve;
+const {encode, decode} = require('@jridgewell/sourcemap-codec');
+const {generateEncodedHookMap} = require('../generateHookMap');
+const {parse} = require('@babel/parser');
+
+const sourceDir = resolve(__dirname, '__source__');
+const buildRoot = resolve(sourceDir, '__compiled__');
+const externalDir = resolve(buildRoot, 'external');
+const inlineDir = resolve(buildRoot, 'inline');
+const bundleDir = resolve(buildRoot, 'bundle');
+const noColumnsDir = resolve(buildRoot, 'no-columns');
+const inlineIndexMapDir = resolve(inlineDir, 'index-map');
+const externalIndexMapDir = resolve(externalDir, 'index-map');
+const inlineFbSourcesExtendedDir = resolve(inlineDir, 'fb-sources-extended');
+const externalFbSourcesExtendedDir = resolve(
+  externalDir,
+  'fb-sources-extended',
+);
+const inlineFbSourcesIndexMapExtendedDir = resolve(
+  inlineFbSourcesExtendedDir,
+  'index-map',
+);
+const externalFbSourcesIndexMapExtendedDir = resolve(
+  externalFbSourcesExtendedDir,
+  'index-map',
+);
+const inlineReactSourcesExtendedDir = resolve(
+  inlineDir,
+  'react-sources-extended',
+);
+const externalReactSourcesExtendedDir = resolve(
+  externalDir,
+  'react-sources-extended',
+);
+const inlineReactSourcesIndexMapExtendedDir = resolve(
+  inlineReactSourcesExtendedDir,
+  'index-map',
+);
+const externalReactSourcesIndexMapExtendedDir = resolve(
+  externalReactSourcesExtendedDir,
+  'index-map',
+);
+
+// Remove previous builds
+emptyDirSync(buildRoot);
+mkdirSync(externalDir);
+mkdirSync(inlineDir);
+mkdirSync(bundleDir);
+mkdirSync(noColumnsDir);
+mkdirSync(inlineIndexMapDir);
+mkdirSync(externalIndexMapDir);
+mkdirSync(inlineFbSourcesExtendedDir);
+mkdirSync(externalFbSourcesExtendedDir);
+mkdirSync(inlineReactSourcesExtendedDir);
+mkdirSync(externalReactSourcesExtendedDir);
+mkdirSync(inlineFbSourcesIndexMapExtendedDir);
+mkdirSync(externalFbSourcesIndexMapExtendedDir);
+mkdirSync(inlineReactSourcesIndexMapExtendedDir);
+mkdirSync(externalReactSourcesIndexMapExtendedDir);
+
+function compile(fileName) {
+  const code = readFileSync(resolve(sourceDir, fileName), 'utf8');
+
+  const transformed = transformSync(code, {
+    plugins: ['@babel/plugin-transform-modules-commonjs'],
+    presets: [
+      // 'minify',
+      [
+        '@babel/react',
+        // {
+        //   runtime: 'automatic',
+        //   development: false,
+        // },
+      ],
+    ],
+    sourceMap: true,
+  });
+
+  const sourceMap = transformed.map;
+  sourceMap.sources = [fileName];
+
+  // Generate compiled output with external source maps
+  writeFileSync(
+    resolve(externalDir, fileName),
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalDir, `${fileName}.map`),
+    JSON.stringify(sourceMap),
+    'utf8',
+  );
+
+  // Generate compiled output with inline base64 source maps
+  writeFileSync(
+    resolve(inlineDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(sourceMap)),
+    'utf8',
+  );
+
+  // Strip column numbers from source map to mimic Webpack 'cheap-module-source-map'
+  // The mappings field represents a list of integer arrays.
+  // Each array defines a pair of corresponding file locations, one in the generated code and one in the original.
+  // Each array has also been encoded first as VLQs (variable-length quantities)
+  // and then as base64 because this makes them more compact overall.
+  // https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/view#
+  const decodedMappings = decode(sourceMap.mappings).map(entries =>
+    entries.map(entry => {
+      if (entry.length === 0) {
+        return entry;
+      }
+
+      // Each non-empty segment has the following components:
+      // generated code column, source index, source code line, source code column, and (optional) name index
+      return [...entry.slice(0, 3), 0, ...entry.slice(4)];
+    }),
+  );
+  const encodedMappings = encode(decodedMappings);
+
+  // Generate compiled output with inline base64 source maps without column numbers
+  writeFileSync(
+    resolve(noColumnsDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(
+        JSON.stringify({
+          ...sourceMap,
+          mappings: encodedMappings,
+        }),
+      ),
+    'utf8',
+  );
+
+  // Artificially construct a source map that uses the index map format
+  // (https://sourcemaps.info/spec.html#h.535es3xeprgt)
+  const indexMap = {
+    version: sourceMap.version,
+    file: sourceMap.file,
+    sections: [
+      {
+        offset: {
+          line: 0,
+          column: 0,
+        },
+        map: {...sourceMap},
+      },
+    ],
+  };
+
+  // Generate compiled output using external source maps using index map format
+  writeFileSync(
+    resolve(externalIndexMapDir, fileName),
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalIndexMapDir, `${fileName}.map`),
+    JSON.stringify(indexMap),
+    'utf8',
+  );
+
+  // Generate compiled output with inline base64 source maps using index map format
+  writeFileSync(
+    resolve(inlineIndexMapDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(indexMap)),
+    'utf8',
+  );
+
+  // Generate compiled output with an extended sourcemap that includes a map of hook names.
+  const parsed = parse(code, {
+    sourceType: 'module',
+    plugins: ['jsx', 'flow'],
+  });
+  const encodedHookMap = generateEncodedHookMap(parsed);
+  const fbSourcesExtendedSourceMap = {
+    ...sourceMap,
+    // When using the x_facebook_sources extension field, the first item
+    // for a given source is reserved for the Function Map, and the
+    // React sources metadata (which includes the Hook Map) is added as
+    // the second item.
+    x_facebook_sources: [[null, [encodedHookMap]]],
+  };
+  const fbSourcesExtendedIndexMap = {
+    version: fbSourcesExtendedSourceMap.version,
+    file: fbSourcesExtendedSourceMap.file,
+    sections: [
+      {
+        offset: {
+          line: 0,
+          column: 0,
+        },
+        map: {...fbSourcesExtendedSourceMap},
+      },
+    ],
+  };
+  const reactSourcesExtendedSourceMap = {
+    ...sourceMap,
+    // When using the x_react_sources extension field, the first item
+    // for a given source is reserved for the Hook Map.
+    x_react_sources: [[encodedHookMap]],
+  };
+  const reactSourcesExtendedIndexMap = {
+    version: reactSourcesExtendedSourceMap.version,
+    file: reactSourcesExtendedSourceMap.file,
+    sections: [
+      {
+        offset: {
+          line: 0,
+          column: 0,
+        },
+        map: {...reactSourcesExtendedSourceMap},
+      },
+    ],
+  };
+
+  // Using the x_facebook_sources field
+  writeFileSync(
+    resolve(inlineFbSourcesExtendedDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(fbSourcesExtendedSourceMap)),
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesExtendedDir, fileName),
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesExtendedDir, `${fileName}.map`),
+    JSON.stringify(fbSourcesExtendedSourceMap),
+    'utf8',
+  );
+  // Using the x_facebook_sources field on an index map format
+  writeFileSync(
+    resolve(inlineFbSourcesIndexMapExtendedDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(fbSourcesExtendedIndexMap)),
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesIndexMapExtendedDir, fileName),
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesIndexMapExtendedDir, `${fileName}.map`),
+    JSON.stringify(fbSourcesExtendedIndexMap),
+    'utf8',
+  );
+
+  // Using the x_react_sources field
+  writeFileSync(
+    resolve(inlineReactSourcesExtendedDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(reactSourcesExtendedSourceMap)),
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesExtendedDir, fileName),
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesExtendedDir, `${fileName}.map`),
+    JSON.stringify(reactSourcesExtendedSourceMap),
+    'utf8',
+  );
+  // Using the x_react_sources field on an index map format
+  writeFileSync(
+    resolve(inlineReactSourcesIndexMapExtendedDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(reactSourcesExtendedIndexMap)),
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesIndexMapExtendedDir, fileName),
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesIndexMapExtendedDir, `${fileName}.map`),
+    JSON.stringify(reactSourcesExtendedIndexMap),
+    'utf8',
+  );
+}
+
+async function bundle() {
+  const entryFileName = resolve(sourceDir, 'index.js');
+
+  // Bundle all modules with rollup
+  const result = await rollup.rollup({
+    input: entryFileName,
+    acornInjectPlugins: [jsx()],
+    plugins: [
+      rollupResolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        presets: ['@babel/preset-react'],
+        sourceMap: true,
+      }),
+    ],
+    external: ['react'],
+  });
+  await result.write({
+    file: resolve(bundleDir, 'index.js'),
+    format: 'cjs',
+    sourcemap: true,
+  });
+}
+
+// Compile all files in the current directory
+const entries = readdirSync(sourceDir);
+entries.forEach(entry => {
+  const stat = lstatSync(resolve(sourceDir, entry));
+  if (!stat.isDirectory() && entry.endsWith('.js')) {
+    compile(entry);
+  }
+});
+
+bundle().catch(e => {
+  console.error(e);
+  process.exit(1);
+});
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
new file mode 100644
index 00000000000..13adcc0e366
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -0,0 +1,637 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {withSyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
+import traverse from '@babel/traverse';
+
+import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
+
+// Missing types in @babel/traverse
+type NodePath = any;
+type Node = any;
+// Missing types in @babel/types
+type File = any;
+
+export type Position = {
+  line: number,
+  column: number,
+};
+
+export type SourceFileASTWithHookDetails = {
+  sourceFileAST: File,
+  line: number,
+  source: string,
+};
+
+export const NO_HOOK_NAME = '<no-hook>';
+
+const AST_NODE_TYPES = Object.freeze({
+  PROGRAM: 'Program',
+  CALL_EXPRESSION: 'CallExpression',
+  MEMBER_EXPRESSION: 'MemberExpression',
+  ARRAY_PATTERN: 'ArrayPattern',
+  IDENTIFIER: 'Identifier',
+  NUMERIC_LITERAL: 'NumericLiteral',
+  VARIABLE_DECLARATOR: 'VariableDeclarator',
+});
+
+// Check if line number obtained from source map and the line number in hook node match
+function checkNodeLocation(
+  path: NodePath,
+  line: number,
+  column?: number | null = null,
+): boolean {
+  const {start, end} = path.node.loc;
+
+  if (line !== start.line) {
+    return false;
+  }
+
+  if (column !== null) {
+    // Column numbers are represented differently between tools/engines.
+    // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+    //
+    // In practice this will probably never matter,
+    // because this code matches the 1-based Error stack location for the hook Identifier (e.g. useState)
+    // with the larger 0-based VariableDeclarator (e.g. [foo, setFoo] = useState())
+    // so the ranges should always overlap.
+    //
+    // For more info see https://github.com/facebook/react/pull/21833#discussion_r666831276
+    column -= 1;
+    if (
+      (line === start.line && column < start.column) ||
+      (line === end.line && column > end.column)
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+// Checks whether hookNode is a member of targetHookNode
+function filterMemberNodesOfTargetHook(
+  targetHookNode: NodePath,
+  hookNode: NodePath,
+): boolean {
+  const targetHookName = targetHookNode.node.id.name;
+  return (
+    targetHookName != null &&
+    (targetHookName ===
+      (hookNode.node.init.object && hookNode.node.init.object.name) ||
+      targetHookName === hookNode.node.init.name)
+  );
+}
+
+// Checks whether hook is the first member node of a state variable declaration node
+function filterMemberWithHookVariableName(hook: NodePath): boolean {
+  return (
+    hook.node.init.property.type === AST_NODE_TYPES.NUMERIC_LITERAL &&
+    hook.node.init.property.value === 0
+  );
+}
+
+// Returns all AST Nodes associated with 'potentialReactHookASTNode'
+function getFilteredHookASTNodes(
+  potentialReactHookASTNode: NodePath,
+  potentialHooksFound: Array<NodePath>,
+  source: string,
+): Array<NodePath> {
+  let nodesAssociatedWithReactHookASTNode: NodePath[] = [];
+  if (nodeContainsHookVariableName(potentialReactHookASTNode)) {
+    // made custom hooks to enter this, always
+    // Case 1.
+    // Directly usable Node -> const ref = useRef(null);
+    //                      -> const [tick, setTick] = useState(1);
+    // Case 2.
+    // Custom Hooks -> const someVariable = useSomeCustomHook();
+    //              -> const [someVariable, someFunction] = useAnotherCustomHook();
+    nodesAssociatedWithReactHookASTNode.unshift(potentialReactHookASTNode);
+  } else {
+    // Case 3.
+    // Indirectly usable Node -> const tickState = useState(1);
+    //                           [tick, setTick] = tickState;
+    //                        -> const tickState = useState(1);
+    //                           const tick = tickState[0];
+    //                           const setTick = tickState[1];
+    nodesAssociatedWithReactHookASTNode = potentialHooksFound.filter(hookNode =>
+      filterMemberNodesOfTargetHook(potentialReactHookASTNode, hookNode),
+    );
+  }
+  return nodesAssociatedWithReactHookASTNode;
+}
+
+// Returns Hook name
+export function getHookName(
+  hook: HooksNode,
+  originalSourceAST: mixed,
+  originalSourceCode: string,
+  originalSourceLineNumber: number,
+  originalSourceColumnNumber: number,
+): string | null {
+  const hooksFromAST = withSyncPerfMeasurements(
+    'getPotentialHookDeclarationsFromAST(originalSourceAST)',
+    () => getPotentialHookDeclarationsFromAST(originalSourceAST),
+  );
+
+  let potentialReactHookASTNode = null;
+  if (originalSourceColumnNumber === 0) {
+    // This most likely indicates a source map type like 'cheap-module-source-map'
+    // that intentionally drops column numbers for compilation speed in DEV builds.
+    // In this case, we can assume there's probably only one hook per line (true in most cases)
+    // and just fail if we find more than one match.
+    const matchingNodes = hooksFromAST.filter(node => {
+      const nodeLocationCheck = checkNodeLocation(
+        node,
+        originalSourceLineNumber,
+      );
+
+      const hookDeclarationCheck = isConfirmedHookDeclaration(node);
+      return nodeLocationCheck && hookDeclarationCheck;
+    });
+
+    if (matchingNodes.length === 1) {
+      potentialReactHookASTNode = matchingNodes[0];
+    }
+  } else {
+    potentialReactHookASTNode = hooksFromAST.find(node => {
+      const nodeLocationCheck = checkNodeLocation(
+        node,
+        originalSourceLineNumber,
+        originalSourceColumnNumber,
+      );
+
+      const hookDeclarationCheck = isConfirmedHookDeclaration(node);
+      return nodeLocationCheck && hookDeclarationCheck;
+    });
+  }
+
+  if (!potentialReactHookASTNode) {
+    return null;
+  }
+
+  // nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name
+  // depending on the type of potentialReactHookASTNode
+  try {
+    const nodesAssociatedWithReactHookASTNode = withSyncPerfMeasurements(
+      'getFilteredHookASTNodes()',
+      () =>
+        getFilteredHookASTNodes(
+          potentialReactHookASTNode,
+          hooksFromAST,
+          originalSourceCode,
+        ),
+    );
+
+    const name = withSyncPerfMeasurements('getHookNameFromNode()', () =>
+      getHookNameFromNode(
+        hook,
+        nodesAssociatedWithReactHookASTNode,
+        potentialReactHookASTNode,
+      ),
+    );
+
+    return name;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+function getHookNameFromNode(
+  originalHook: HooksNode,
+  nodesAssociatedWithReactHookASTNode: NodePath[],
+  potentialReactHookASTNode: NodePath,
+): string | null {
+  let hookVariableName: string | null;
+  const isCustomHook = originalHook.id === null;
+
+  switch (nodesAssociatedWithReactHookASTNode.length) {
+    case 1:
+      // CASE 1A (nodesAssociatedWithReactHookASTNode[0] !== potentialReactHookASTNode):
+      // const flagState = useState(true); -> later referenced as
+      // const [flag, setFlag] = flagState;
+      //
+      // CASE 1B (nodesAssociatedWithReactHookASTNode[0] === potentialReactHookASTNode):
+      // const [flag, setFlag] = useState(true); -> we have access to the hook variable straight away
+      //
+      // CASE 1C (isCustomHook && nodesAssociatedWithReactHookASTNode[0] === potentialReactHookASTNode):
+      // const someVariable = useSomeCustomHook(); -> we have access to hook variable straight away
+      // const [someVariable, someFunction] = useAnotherCustomHook(); -> we ignore variable names in this case
+      //                                                                 as it is unclear what variable name to show
+      if (
+        isCustomHook &&
+        nodesAssociatedWithReactHookASTNode[0] === potentialReactHookASTNode
+      ) {
+        hookVariableName = getHookVariableName(
+          potentialReactHookASTNode,
+          isCustomHook,
+        );
+        break;
+      }
+      hookVariableName = getHookVariableName(
+        nodesAssociatedWithReactHookASTNode[0],
+      );
+      break;
+
+    case 2:
+      // const flagState = useState(true); -> later referenced as
+      // const flag = flagState[0];
+      // const setFlag = flagState[1];
+      nodesAssociatedWithReactHookASTNode =
+        nodesAssociatedWithReactHookASTNode.filter(hookPath =>
+          filterMemberWithHookVariableName(hookPath),
+        );
+
+      if (nodesAssociatedWithReactHookASTNode.length !== 1) {
+        // Something went wrong, only a single desirable hook should remain here
+        throw new Error("Couldn't isolate AST Node containing hook variable.");
+      }
+      hookVariableName = getHookVariableName(
+        nodesAssociatedWithReactHookASTNode[0],
+      );
+      break;
+
+    default:
+      // Case 0:
+      // const flagState = useState(true); -> which is not accessed anywhere
+      //
+      // Case > 2 (fallback):
+      // const someState = React.useState(() => 0)
+      //
+      // const stateVariable = someState[0]
+      // const setStateVariable = someState[1]
+      //
+      // const [number2, setNumber2] = someState
+      //
+      // We assign the state variable for 'someState' to multiple variables,
+      // and hence cannot isolate a unique variable name. In such cases,
+      // default to showing 'someState'
+
+      hookVariableName = getHookVariableName(potentialReactHookASTNode);
+      break;
+  }
+
+  return hookVariableName;
+}
+
+// Extracts the variable name from hook node path
+function getHookVariableName(
+  hook: NodePath,
+  isCustomHook: boolean = false,
+): string | null {
+  const nodeType = hook.node.id.type;
+  switch (nodeType) {
+    case AST_NODE_TYPES.ARRAY_PATTERN:
+      return !isCustomHook ? (hook.node.id.elements[0]?.name ?? null) : null;
+
+    case AST_NODE_TYPES.IDENTIFIER:
+      return hook.node.id.name;
+
+    default:
+      return null;
+  }
+}
+
+function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
+  const potentialHooksFound: NodePath[] = [];
+  withSyncPerfMeasurements('traverse(sourceAST)', () =>
+    traverse(sourceAST, {
+      enter(path) {
+        if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
+          potentialHooksFound.push(path);
+        }
+      },
+    }),
+  );
+  return potentialHooksFound;
+}
+
+/**
+ * This function traverses the sourceAST and returns a mapping
+ * that maps locations in the source code to their corresponding
+ * Hook name, if there is a relevant Hook name for that location.
+ *
+ * A location in the source code is represented by line and column
+ * numbers as a Position object: { line, column }.
+ *   - line is 1-indexed.
+ *   - column is 0-indexed.
+ *
+ * A Hook name will be assigned to a Hook CallExpression if the
+ * CallExpression is for a variable declaration (i.e. it returns
+ * a value that is assigned to a variable), and if we can reliably
+ * infer the correct name to use (see comments in the function body
+ * for more details).
+ *
+ * The returned mapping is an array of locations and their assigned
+ * names, sorted by location. Specifically, each entry in the array
+ * contains a `name` and a `start` Position. The `name` of a given
+ * entry is the "assigned" name in the source code until the `start`
+ * of the **next** entry. This means that given the mapping, in order
+ * to determine the Hook name assigned for a given source location, we
+ * need to find the adjacent entries that most closely contain the given
+ * location.
+ *
+ * E.g. for the following code:
+ *
+ * 1|  function Component() {
+ * 2|    const [state, setState] = useState(0);
+ * 3|                              ^---------^ -> Cols 28 - 38: Hook CallExpression
+ * 4|
+ * 5|    useEffect(() => {...}); -> call ignored since not declaring a variable
+ * 6|
+ * 7|    return (...);
+ * 8|  }
+ *
+ * The returned "mapping" would be something like:
+ *   [
+ *     {name: '<no-hook>', start: {line: 1, column: 0}},
+ *     {name: 'state', start: {line: 2, column: 28}},
+ *     {name: '<no-hook>', start: {line: 2, column: 38}},
+ *   ]
+ *
+ * Where the Hook name `state` (corresponding to the `state` variable)
+ * is assigned to the location in the code for the CallExpression
+ * representing the call to `useState(0)` (line 2, col 28-38).
+ */
+export function getHookNamesMappingFromAST(
+  sourceAST: File,
+): $ReadOnlyArray<{name: string, start: Position}> {
+  const hookStack: Array<{name: string, start: $FlowFixMe}> = [];
+  const hookNames = [];
+  const pushFrame = (name: string, node: Node) => {
+    const nameInfo = {name, start: {...node.loc.start}};
+    hookStack.unshift(nameInfo);
+    hookNames.push(nameInfo);
+  };
+  const popFrame = (node: Node) => {
+    hookStack.shift();
+    const top = hookStack[0];
+    if (top != null) {
+      hookNames.push({name: top.name, start: {...node.loc.end}});
+    }
+  };
+
+  traverse(sourceAST, {
+    [AST_NODE_TYPES.PROGRAM]: {
+      enter(path) {
+        pushFrame(NO_HOOK_NAME, path.node);
+      },
+      exit(path) {
+        popFrame(path.node);
+      },
+    },
+    [AST_NODE_TYPES.VARIABLE_DECLARATOR]: {
+      enter(path) {
+        // Check if this variable declaration corresponds to a variable
+        // declared by calling a Hook.
+        if (isConfirmedHookDeclaration(path)) {
+          const hookDeclaredVariableName = getHookVariableName(path);
+          if (!hookDeclaredVariableName) {
+            return;
+          }
+          const callExpressionNode = assertCallExpression(path.node.init);
+
+          // Check if this variable declaration corresponds to a call to a
+          // built-in Hook that returns a tuple (useState, useReducer,
+          // useTransition).
+          // If it doesn't, we immediately use the declared variable name
+          // as the Hook name. We do this because for any other Hooks that
+          // aren't the built-in Hooks that return a tuple, we can't reliably
+          // extract a Hook name from other variable declarations derived from
+          // this one, since we don't know which of the declared variables
+          // are the relevant ones to track and show in dev tools.
+          if (!isBuiltInHookThatReturnsTuple(path)) {
+            pushFrame(hookDeclaredVariableName, callExpressionNode);
+            return;
+          }
+
+          // Check if the variable declared by the Hook call is referenced
+          // anywhere else in the code. If not, we immediately use the
+          // declared variable name as the Hook name.
+          const referencePaths =
+            hookDeclaredVariableName != null
+              ? path.scope.bindings[hookDeclaredVariableName]?.referencePaths
+              : null;
+          if (referencePaths == null) {
+            pushFrame(hookDeclaredVariableName, callExpressionNode);
+            return;
+          }
+
+          // Check each reference to the variable declared by the Hook call,
+          // and for each, we do the following:
+          let declaredVariableName = null;
+          for (let i = 0; i <= referencePaths.length; i++) {
+            const referencePath = referencePaths[i];
+            if (declaredVariableName != null) {
+              break;
+            }
+
+            // 1. Check if the reference is contained within a VariableDeclarator
+            // Node. This will allow us to determine if the variable declared by
+            // the Hook call is being used to declare other variables.
+            let variableDeclaratorPath = referencePath;
+            while (
+              variableDeclaratorPath != null &&
+              variableDeclaratorPath.node.type !==
+                AST_NODE_TYPES.VARIABLE_DECLARATOR
+            ) {
+              variableDeclaratorPath = variableDeclaratorPath.parentPath;
+            }
+
+            // 2. If we find a VariableDeclarator containing the
+            // referenced variable, we extract the Hook name from the new
+            // variable declaration.
+            // E.g., a case like the following:
+            //    const countState = useState(0);
+            //    const count = countState[0];
+            //    const setCount = countState[1]
+            // Where the reference to `countState` is later referenced
+            // within a VariableDeclarator, so we can extract `count` as
+            // the Hook name.
+            const varDeclInit = variableDeclaratorPath?.node.init;
+            if (varDeclInit != null) {
+              switch (varDeclInit.type) {
+                case AST_NODE_TYPES.MEMBER_EXPRESSION: {
+                  // When encountering a MemberExpression inside the new
+                  // variable declaration, we only want to extract the variable
+                  // name if we're assigning the value of the first member,
+                  // which is handled by `filterMemberWithHookVariableName`.
+                  // E.g.
+                  //    const countState = useState(0);
+                  //    const count = countState[0];    -> extract the name from this reference
+                  //    const setCount = countState[1]; -> ignore this reference
+                  if (
+                    filterMemberWithHookVariableName(variableDeclaratorPath)
+                  ) {
+                    declaredVariableName = getHookVariableName(
+                      variableDeclaratorPath,
+                    );
+                  }
+                  break;
+                }
+                case AST_NODE_TYPES.IDENTIFIER: {
+                  declaredVariableName = getHookVariableName(
+                    variableDeclaratorPath,
+                  );
+                  break;
+                }
+                default:
+                  break;
+              }
+            }
+          }
+
+          // If we were able to extract a name from the new variable
+          // declaration, use it as the Hook name. Otherwise, use the
+          // original declared variable as the variable name.
+          if (declaredVariableName != null) {
+            pushFrame(declaredVariableName, callExpressionNode);
+          } else {
+            pushFrame(hookDeclaredVariableName, callExpressionNode);
+          }
+        }
+      },
+      exit(path) {
+        if (isConfirmedHookDeclaration(path)) {
+          const callExpressionNode = assertCallExpression(path.node.init);
+          popFrame(callExpressionNode);
+        }
+      },
+    },
+  });
+  return hookNames;
+}
+
+// Check if 'path' contains declaration of the form const X = useState(0);
+function isConfirmedHookDeclaration(path: NodePath): boolean {
+  const nodeInit = path.node.init;
+  if (nodeInit == null || nodeInit.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
+    return false;
+  }
+  const callee = nodeInit.callee;
+  return isHook(callee);
+}
+
+// We consider hooks to be a hook name identifier or a member expression containing a hook name.
+function isHook(node: Node): boolean {
+  if (node.type === AST_NODE_TYPES.IDENTIFIER) {
+    return isHookName(node.name);
+  } else if (
+    node.type === AST_NODE_TYPES.MEMBER_EXPRESSION &&
+    !node.computed &&
+    isHook(node.property)
+  ) {
+    const obj = node.object;
+    const isPascalCaseNameSpace = /^[A-Z].*/;
+    return (
+      obj.type === AST_NODE_TYPES.IDENTIFIER &&
+      isPascalCaseNameSpace.test(obj.name)
+    );
+  } else {
+    // TODO Possibly handle inline require statements e.g. require("useStable")(...)
+    // This does not seem like a high priority, since inline requires are probably
+    // not common and are also typically in compiled code rather than source code.
+
+    return false;
+  }
+}
+
+// Catch all identifiers that begin with "use"
+// followed by an uppercase Latin character to exclude identifiers like "user".
+// Copied from packages/eslint-plugin-react-hooks/src/RulesOfHooks
+function isHookName(name: string): boolean {
+  return /^use[A-Z0-9].*$/.test(name);
+}
+
+// Check if the AST Node COULD be a React Hook
+function isPotentialHookDeclaration(path: NodePath): boolean {
+  // The array potentialHooksFound will contain all potential hook declaration cases we support
+  const nodePathInit = path.node.init;
+  if (nodePathInit != null) {
+    if (nodePathInit.type === AST_NODE_TYPES.CALL_EXPRESSION) {
+      // CASE: CallExpression
+      // 1. const [count, setCount] = useState(0); -> destructured pattern
+      // 2. const [A, setA] = useState(0), const [B, setB] = useState(0); -> multiple inline declarations
+      // 3. const [
+      //      count,
+      //      setCount
+      //    ] = useState(0); -> multiline hook declaration
+      // 4. const ref = useRef(null); -> generic hooks
+      const callee = nodePathInit.callee;
+      return isHook(callee);
+    } else if (
+      nodePathInit.type === AST_NODE_TYPES.MEMBER_EXPRESSION ||
+      nodePathInit.type === AST_NODE_TYPES.IDENTIFIER
+    ) {
+      // CASE: MemberExpression
+      //    const countState = React.useState(0);
+      //    const count = countState[0];
+      //    const setCount = countState[1]; -> Accessing members following hook declaration
+
+      // CASE: Identifier
+      //    const countState = React.useState(0);
+      //    const [count, setCount] = countState; ->  destructuring syntax following hook declaration
+      return true;
+    }
+  }
+  return false;
+}
+
+/// Check whether 'node' is hook declaration of form useState(0); OR React.useState(0);
+function isReactFunction(node: Node, functionName: string): boolean {
+  return (
+    node.name === functionName ||
+    (node.type === 'MemberExpression' &&
+      node.object.name === 'React' &&
+      node.property.name === functionName)
+  );
+}
+
+// Check if 'path' is either State or Reducer hook
+function isBuiltInHookThatReturnsTuple(path: NodePath): boolean {
+  const callee = path.node.init.callee;
+  return (
+    isReactFunction(callee, 'useState') ||
+    isReactFunction(callee, 'useReducer') ||
+    isReactFunction(callee, 'useTransition')
+  );
+}
+
+// Check whether hookNode of a declaration contains obvious variable name
+function nodeContainsHookVariableName(hookNode: NodePath): boolean {
+  // We determine cases where variable names are obvious in declarations. Examples:
+  // const [tick, setTick] = useState(1); OR const ref = useRef(null);
+  // Here tick/ref are obvious hook variables in the hook declaration node itself
+  // 1. True for satisfying above cases
+  // 2. False for everything else. Examples:
+  //    const countState = React.useState(0);
+  //    const count = countState[0];
+  //    const setCount = countState[1]; -> not obvious, hook variable can't be determined
+  //                                       from the hook declaration node alone
+  // 3. For custom hooks we force pass true since we are only concerned with the AST node
+  //    regardless of how it is accessed in source code. (See: getHookVariableName)
+
+  const node = hookNode.node.id;
+  if (
+    node.type === AST_NODE_TYPES.ARRAY_PATTERN ||
+    (node.type === AST_NODE_TYPES.IDENTIFIER &&
+      !isBuiltInHookThatReturnsTuple(hookNode))
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function assertCallExpression(node: Node): Node {
+  if (node.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
+    throw new Error('Expected a CallExpression node for a Hook declaration.');
+  }
+  return node;
+}
diff --git a/packages/react-devtools-shared/src/hooks/generateHookMap.js b/packages/react-devtools-shared/src/hooks/generateHookMap.js
new file mode 100644
index 00000000000..a8a7576cbed
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/generateHookMap.js
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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 {getHookNamesMappingFromAST} from './astUtils';
+import {encode, decode} from '@jridgewell/sourcemap-codec';
+
+// Missing types in @babel/types
+type File = any;
+
+export type HookMap = {
+  names: $ReadOnlyArray<string>,
+  mappings: HookMapMappings,
+};
+
+export type EncodedHookMap = {
+  names: $ReadOnlyArray<string>,
+  mappings: string,
+};
+
+// See generateHookMap below for more details on formatting
+export type HookMapEntry = [
+  number, // 1-indexed line number
+  number, // 0-indexed column number
+  number, // 0-indexed index into names array
+  number, // TODO: filler number to support reusing encoding from `sourcemap-codec` (see TODO below)
+];
+export type HookMapLine = HookMapEntry[];
+export type HookMapMappings = HookMapLine[];
+
+/**
+ * Given a parsed source code AST, returns a "Hook Map", which is a
+ * mapping which maps locations in the source code to their to their
+ * corresponding Hook name, if there is a relevant Hook name for that
+ * location (see getHookNamesMappingFromAST for details on the
+ * representation of the mapping).
+ *
+ * The format of the Hook Map follows a similar format as the `name`
+ * and `mappings` fields in the Source Map spec, where `names` is an
+ * array of strings, and `mappings` contains segments lines, columns,
+ * and indices into the `names` array.
+ *
+ * E.g.:
+ *   {
+ *     names: ["<no-hook>", "state"],
+ *     mappings: [
+ *       [ -> line 1
+ *         [1, 0, 0],  -> line, col, name index
+ *       ],
+ *       [ -> line 2
+ *         [2, 5, 1],  -> line, col, name index
+ *         [2, 15, 0],  -> line, col, name index
+ *       ],
+ *     ],
+ *   }
+ */
+export function generateHookMap(sourceAST: File): HookMap {
+  const hookNamesMapping = getHookNamesMappingFromAST(sourceAST);
+  const namesMap: Map<string, number> = new Map();
+  const names = [];
+  const mappings: Array<HookMapLine> = [];
+
+  let currentLine: $FlowFixMe | null = null;
+  hookNamesMapping.forEach(({name, start}) => {
+    let nameIndex = namesMap.get(name);
+    if (nameIndex == null) {
+      names.push(name);
+      nameIndex = names.length - 1;
+      namesMap.set(name, nameIndex);
+    }
+
+    // TODO: We add a -1 at the end of the entry so we can later
+    // encode/decode the mappings by reusing the encode/decode functions
+    // from the `sourcemap-codec` library. This library expects segments
+    // of specific sizes (i.e. of size 4) in order to encode them correctly.
+    // In the future, when we implement our own encoding, we will not
+    // need this restriction and can remove the -1 at the end.
+    const entry = [start.line, start.column, nameIndex, -1];
+
+    if (currentLine !== start.line) {
+      currentLine = start.line;
+      mappings.push([entry]);
+    } else {
+      const current = mappings[mappings.length - 1];
+      current.push(entry);
+    }
+  });
+
+  return {names, mappings};
+}
+
+/**
+ * Returns encoded version of a Hook Map that is returned
+ * by generateHookMap.
+ *
+ * **NOTE:**
+ * TODO: To encode the `mappings` in the Hook Map, we
+ * reuse the encode function from the `sourcemap-codec`
+ * library, which means that we are restricted to only
+ * encoding segments of specific sizes.
+ * Inside generateHookMap we make sure to build segments
+ * of size 4.
+ * In the future, when we implement our own encoding, we will not
+ * need this restriction and can remove the -1 at the end.
+ */
+export function generateEncodedHookMap(sourceAST: File): EncodedHookMap {
+  const hookMap = generateHookMap(sourceAST);
+  const encoded = encode(hookMap.mappings);
+  return {
+    names: hookMap.names,
+    mappings: encoded,
+  };
+}
+
+export function decodeHookMap(encodedHookMap: EncodedHookMap): HookMap {
+  return {
+    names: encodedHookMap.names,
+    mappings: decode(encodedHookMap.mappings),
+  };
+}
diff --git a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
new file mode 100644
index 00000000000..84aeea61f1a
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
@@ -0,0 +1,274 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import type {
+  HookMap,
+  HookMapEntry,
+  HookMapLine,
+  HookMapMappings,
+} from './generateHookMap';
+import type {Position} from './astUtils';
+import {NO_HOOK_NAME} from './astUtils';
+
+/**
+ * Finds the Hook name assigned to a given location in the source code,
+ * and a HookMap extracted from an extended source map.
+ * The given location must correspond to the location in the *original*
+ * source code (i.e. *not* the generated one).
+ *
+ * Note that all locations in the source code are guaranteed to map
+ * to a name, including a sentinel value that represents a missing
+ * Hook name: '<no-hook>'.
+ *
+ * For more details on the format of the HookMap, see generateHookMap
+ * and the tests for that function and this function.
+ */
+export function getHookNameForLocation(
+  location: Position,
+  hookMap: HookMap,
+): string | null {
+  const {names, mappings} = hookMap;
+
+  // The HookMap mappings are grouped by lines, so first we look up
+  // which line of mappings covers the target location.
+  // Note that we expect to find a line since all the locations in the
+  // source code are guaranteed to map to a name, including a '<no-hook>'
+  // name.
+  const foundLine = binSearch(location, mappings, compareLinePositions);
+  if (foundLine == null) {
+    throw new Error(
+      `Expected to find a line in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+
+  let foundEntry;
+  const foundLineNumber = getLineNumberFromLine(foundLine);
+  // The line found in the mappings will never be larger than the target
+  // line, and vice-versa, so if the target line doesn't match the found
+  // line, we immediately know that it must correspond to the last mapping
+  // entry for that line.
+  if (foundLineNumber !== location.line) {
+    foundEntry = foundLine[foundLine.length - 1];
+  } else {
+    foundEntry = binSearch(location, foundLine, compareColumnPositions);
+  }
+
+  if (foundEntry == null) {
+    throw new Error(
+      `Expected to find a mapping in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+
+  const foundNameIndex = getHookNameIndexFromEntry(foundEntry);
+  if (foundNameIndex == null) {
+    throw new Error(
+      `Expected to find a name index in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+  const foundName = names[foundNameIndex];
+  if (foundName == null) {
+    throw new Error(
+      `Expected to find a name in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+
+  if (foundName === NO_HOOK_NAME) {
+    return null;
+  }
+  return foundName;
+}
+
+function binSearch<T>(
+  location: Position,
+  items: T[],
+  compare: (
+    location: Position,
+    items: T[],
+    index: number,
+  ) => {index: number | null, direction: number},
+): T | null {
+  let count = items.length;
+  let index = 0;
+  let firstElementIndex = 0;
+  let step;
+
+  while (count > 0) {
+    index = firstElementIndex;
+    step = Math.floor(count / 2);
+    index += step;
+
+    const comparison = compare(location, items, index);
+    if (comparison.direction === 0) {
+      if (comparison.index == null) {
+        throw new Error('Expected an index when matching element is found.');
+      }
+      firstElementIndex = comparison.index;
+      break;
+    }
+
+    if (comparison.direction > 0) {
+      index++;
+      firstElementIndex = index;
+      count -= step + 1;
+    } else {
+      count = step;
+    }
+  }
+
+  return firstElementIndex != null ? items[firstElementIndex] : null;
+}
+
+/**
+ * Compares the target line location to the current location
+ * given by the provided index.
+ *
+ * If the target line location matches the current location, returns
+ * the index of the matching line in the mappings. In order for a line
+ * to match, the target line must match the line exactly, or be within
+ * the line range of the current line entries and the adjacent line
+ * entries.
+ *
+ * If the line doesn't match, returns the search direction for the
+ * next step in the binary search.
+ */
+function compareLinePositions(
+  location: Position,
+  mappings: HookMapMappings,
+  index: number,
+): {index: number | null, direction: number} {
+  const startIndex = index;
+  const start = mappings[startIndex];
+  if (start == null) {
+    throw new Error(`Unexpected line missing in HookMap at index ${index}.`);
+  }
+  const startLine = getLineNumberFromLine(start);
+
+  let endLine;
+  let endIndex = index + 1;
+  const end = mappings[endIndex];
+  if (end != null) {
+    endLine = getLineNumberFromLine(end);
+  } else {
+    endIndex = startIndex;
+    endLine = startLine;
+  }
+
+  // When the line matches exactly, return the matching index
+  if (startLine === location.line) {
+    return {index: startIndex, direction: 0};
+  }
+  if (endLine === location.line) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If we're at the end of the mappings, and the target line is greater
+  // than the current line, then this final line must cover the
+  // target location, so we return it.
+  if (location.line > endLine && end == null) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If the location is within the current line and the adjacent one,
+  // we know that the target location must be covered by the current line.
+  if (startLine < location.line && location.line < endLine) {
+    return {index: startIndex, direction: 0};
+  }
+
+  // Otherwise, return the next direction in the search.
+  return {index: null, direction: location.line - startLine};
+}
+
+/**
+ * Compares the target column location to the current location
+ * given by the provided index.
+ *
+ * If the target column location matches the current location, returns
+ * the index of the matching entry in the mappings. In order for a column
+ * to match, the target column must match the column exactly, or be within
+ * the column range of the current entry and the adjacent entry.
+ *
+ * If the column doesn't match, returns the search direction for the
+ * next step in the binary search.
+ */
+function compareColumnPositions(
+  location: Position,
+  line: HookMapLine,
+  index: number,
+): {index: number | null, direction: number} {
+  const startIndex = index;
+  const start = line[index];
+  if (start == null) {
+    throw new Error(
+      `Unexpected mapping missing in HookMap line at index ${index}.`,
+    );
+  }
+  const startColumn = getColumnNumberFromEntry(start);
+
+  let endColumn;
+  let endIndex = index + 1;
+  const end = line[endIndex];
+  if (end != null) {
+    endColumn = getColumnNumberFromEntry(end);
+  } else {
+    endIndex = startIndex;
+    endColumn = startColumn;
+  }
+
+  // When the column matches exactly, return the matching index
+  if (startColumn === location.column) {
+    return {index: startIndex, direction: 0};
+  }
+  if (endColumn === location.column) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If we're at the end of the entries for this line, and the target
+  // column is greater than the current column, then this final entry
+  // must cover the target location, so we return it.
+  if (location.column > endColumn && end == null) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If the location is within the current column and the adjacent one,
+  // we know that the target location must be covered by the current entry.
+  if (startColumn < location.column && location.column < endColumn) {
+    return {index: startIndex, direction: 0};
+  }
+
+  // Otherwise, return the next direction in the search.
+  return {index: null, direction: location.column - startColumn};
+}
+
+function getLineNumberFromLine(line: HookMapLine): number {
+  return getLineNumberFromEntry(line[0]);
+}
+
+function getLineNumberFromEntry(entry: HookMapEntry): number {
+  const lineNumber = entry[0];
+  if (lineNumber == null) {
+    throw new Error('Unexpected line number missing in entry in HookMap');
+  }
+  return lineNumber;
+}
+
+function getColumnNumberFromEntry(entry: HookMapEntry): number {
+  const columnNumber = entry[1];
+  if (columnNumber == null) {
+    throw new Error('Unexpected column number missing in entry in HookMap');
+  }
+  return columnNumber;
+}
+
+function getHookNameIndexFromEntry(entry: HookMapEntry): number {
+  const hookNameIndex = entry[2];
+  if (hookNameIndex == null) {
+    throw new Error('Unexpected hook name index missing in entry in HookMap');
+  }
+  return hookNameIndex;
+}
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/index.js b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
new file mode 100644
index 00000000000..40725bc21fa
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {HookSourceAndMetadata} from './loadSourceAndMetadata';
+import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+import type {HookNames} from 'react-devtools-shared/src/frontend/types';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+
+import 'react';
+
+import {withAsyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
+import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
+import typeof * as ParseSourceAndMetadataModule from './parseSourceAndMetadata';
+import {flattenHooksList, loadSourceAndMetadata} from './loadSourceAndMetadata';
+
+const workerizedParseHookNames: ParseSourceAndMetadataModule =
+  WorkerizedParseSourceAndMetadata();
+
+export function parseSourceAndMetadata(
+  hooksList: Array<HooksNode>,
+  locationKeyToHookSourceAndMetadata: Map<string, HookSourceAndMetadata>,
+): Promise<HookNames | null> {
+  return workerizedParseHookNames.parseSourceAndMetadata(
+    hooksList,
+    locationKeyToHookSourceAndMetadata,
+  );
+}
+
+export const purgeCachedMetadata = workerizedParseHookNames.purgeCachedMetadata;
+
+const EMPTY_MAP: HookNames = new Map();
+
+export async function parseHookNames(
+  hooksTree: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+): Promise<HookNames | null> {
+  return withAsyncPerfMeasurements('parseHookNames', async () => {
+    const hooksList = flattenHooksList(hooksTree);
+    if (hooksList.length === 0) {
+      // This component tree contains no named hooks.
+      return EMPTY_MAP;
+    }
+
+    // Runs on the main/UI thread so it can reuse Network cache:
+    const locationKeyToHookSourceAndMetadata = await loadSourceAndMetadata(
+      hooksList,
+      fetchFileWithCaching,
+    );
+
+    // Runs in a Worker because it's CPU intensive:
+    return parseSourceAndMetadata(
+      hooksList,
+      locationKeyToHookSourceAndMetadata,
+    );
+  });
+}
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
new file mode 100644
index 00000000000..7c40cabf97f
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -0,0 +1,507 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Parsing source and source maps is done in a Web Worker
+// because parsing is CPU intensive and should not block the UI thread.
+//
+// Fetching source and source map files is intentionally done on the UI thread
+// so that loaded source files can reuse the browser's Network cache.
+// Requests made from within an extension do not share the page's Network cache,
+// but messages can be sent from the UI thread to the content script
+// which can make a request from the page's context (with caching).
+//
+// Some overhead may be incurred sharing (serializing) the loaded data between contexts,
+// but less than fetching the file to begin with,
+// and in some cases we can avoid serializing the source code at all
+// (e.g. when we are in an environment that supports our custom metadata format).
+//
+// The overall flow of this file is such:
+// 1. Find the Set of source files defining the hooks and load them all.
+//    Then for each source file, do the following:
+//
+//    a. Search loaded source file to see if a source map is available.
+//       If so, load that file and pass it to a Worker for parsing.
+//       The source map is used to retrieve the original source,
+//       which is then also parsed in the Worker to infer hook names.
+//       This is less ideal because parsing a full source map is slower,
+//       since we need to evaluate the mappings in order to map the runtime code to the original source,
+//       but at least the eventual source that we parse to an AST is small/fast.
+//
+//    b. If no source map, pass the full source to a Worker for parsing.
+//       Use the source to infer hook names.
+//       This is the least optimal route as parsing the full source is very CPU intensive.
+//
+// In the future, we may add an additional optimization the above sequence.
+// This check would come before the source map check:
+//
+//    a. Search loaded source file to see if a custom React metadata file is available.
+//       If so, load that file and pass it to a Worker for parsing and extracting.
+//       This is the fastest option since our custom metadata file is much smaller than a full source map,
+//       and there is no need to convert runtime code to the original source.
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookSourceLocation';
+import {sourceMapIncludesSource} from '../SourceMapUtils';
+import {
+  withAsyncPerfMeasurements,
+  withCallbackPerfMeasurements,
+  withSyncPerfMeasurements,
+} from 'react-devtools-shared/src/PerformanceLoggingUtils';
+
+import type {
+  HooksNode,
+  HookSource,
+  HooksTree,
+} from 'react-debug-tools/src/ReactDebugHooks';
+import type {MixedSourceMap} from '../SourceMapTypes';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+
+// Prefer a cached albeit stale response to reduce download time.
+// We wouldn't want to load/parse a newer version of the source (even if one existed).
+const FETCH_OPTIONS = {cache: 'force-cache' as CacheType};
+
+const MAX_SOURCE_LENGTH = 100_000_000;
+
+export type HookSourceAndMetadata = {
+  // Generated by react-debug-tools.
+  hookSource: HookSource,
+
+  // Compiled code (React components or custom hooks) containing primitive hook calls.
+  runtimeSourceCode: string | null,
+
+  // Same as hookSource.fileName but guaranteed to be non-null.
+  runtimeSourceURL: string,
+
+  // Raw source map JSON.
+  // Either decoded from an inline source map or loaded from an externa source map file.
+  // Sources without source maps won't have this.
+  sourceMapJSON: MixedSourceMap | null,
+
+  // External URL of source map.
+  // Sources without source maps (or with inline source maps) won't have this.
+  sourceMapURL: string | null,
+};
+
+export type LocationKeyToHookSourceAndMetadata = Map<
+  string,
+  HookSourceAndMetadata,
+>;
+export type HooksList = Array<HooksNode>;
+
+export async function loadSourceAndMetadata(
+  hooksList: HooksList,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+): Promise<LocationKeyToHookSourceAndMetadata> {
+  return withAsyncPerfMeasurements('loadSourceAndMetadata()', async () => {
+    const locationKeyToHookSourceAndMetadata = withSyncPerfMeasurements(
+      'initializeHookSourceAndMetadata',
+      () => initializeHookSourceAndMetadata(hooksList),
+    );
+
+    await withAsyncPerfMeasurements('loadSourceFiles()', () =>
+      loadSourceFiles(locationKeyToHookSourceAndMetadata, fetchFileWithCaching),
+    );
+
+    await withAsyncPerfMeasurements('extractAndLoadSourceMapJSON()', () =>
+      extractAndLoadSourceMapJSON(locationKeyToHookSourceAndMetadata),
+    );
+
+    // At this point, we've loaded JS source (text) and source map (JSON).
+    // The remaining works (parsing these) is CPU intensive and should be done in a worker.
+    return locationKeyToHookSourceAndMetadata;
+  });
+}
+
+function decodeBase64String(encoded: string): Object {
+  return atob(encoded);
+}
+
+function extractAndLoadSourceMapJSON(
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+): Promise<mixed> {
+  // Deduplicate fetches, since there can be multiple location keys per source map.
+  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();
+
+  if (__DEBUG__) {
+    console.log(
+      'extractAndLoadSourceMapJSON() load',
+      locationKeyToHookSourceAndMetadata.size,
+      'source maps',
+    );
+  }
+
+  const setterPromises = [];
+  locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
+    const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
+    const runtimeSourceCode =
+      ((hookSourceAndMetadata.runtimeSourceCode: any): string);
+
+    // TODO (named hooks) Search for our custom metadata first.
+    // If it's found, we should use it rather than source maps.
+
+    // TODO (named hooks) If this RegExp search is slow, we could try breaking it up
+    // first using an indexOf(' sourceMappingURL=') to find the start of the comment
+    // (probably at the end of the file) and then running the RegExp on the remaining substring.
+    let sourceMappingURLMatch = withSyncPerfMeasurements(
+      'sourceMapRegex.exec(runtimeSourceCode)',
+      () => sourceMapRegex.exec(runtimeSourceCode),
+    );
+
+    if (sourceMappingURLMatch == null) {
+      if (__DEBUG__) {
+        console.log('extractAndLoadSourceMapJSON() No source map found');
+      }
+
+      // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
+    } else {
+      const externalSourceMapURLs = [];
+      while (sourceMappingURLMatch != null) {
+        const {runtimeSourceURL} = hookSourceAndMetadata;
+        const sourceMappingURL = sourceMappingURLMatch[1];
+        const hasInlineSourceMap = sourceMappingURL.indexOf('base64,') >= 0;
+        if (hasInlineSourceMap) {
+          try {
+            // TODO (named hooks) deduplicate parsing in this branch (similar to fetching in the other branch)
+            // since there can be multiple location keys per source map.
+
+            // Web apps like Code Sandbox embed multiple inline source maps.
+            // In this case, we need to loop through and find the right one.
+            // We may also need to trim any part of this string that isn't based64 encoded data.
+            const trimmed = ((sourceMappingURL.match(
+              /base64,([a-zA-Z0-9+\/=]+)/,
+            ): any): Array<string>)[1];
+            const decoded = withSyncPerfMeasurements(
+              'decodeBase64String()',
+              () => decodeBase64String(trimmed),
+            );
+
+            const sourceMapJSON = withSyncPerfMeasurements(
+              'JSON.parse(decoded)',
+              () => JSON.parse(decoded),
+            );
+
+            if (__DEBUG__) {
+              console.groupCollapsed(
+                'extractAndLoadSourceMapJSON() Inline source map',
+              );
+              console.log(sourceMapJSON);
+              console.groupEnd();
+            }
+
+            // Hook source might be a URL like "https://4syus.csb.app/src/App.js"
+            // Parsed source map might be a partial path like "src/App.js"
+            if (sourceMapIncludesSource(sourceMapJSON, runtimeSourceURL)) {
+              hookSourceAndMetadata.sourceMapJSON = sourceMapJSON;
+
+              // OPTIMIZATION If we've located a source map for this source,
+              // we'll use it to retrieve the original source (to extract hook names).
+              // We only fall back to parsing the full source code is when there's no source map.
+              // The source is (potentially) very large,
+              // So we can avoid the overhead of serializing it unnecessarily.
+              hookSourceAndMetadata.runtimeSourceCode = null;
+
+              break;
+            }
+          } catch (error) {
+            // We've likely encountered a string in the source code that looks like a source map but isn't.
+            // Maybe the source code contains a "sourceMappingURL" comment or soething similar.
+            // In either case, let's skip this and keep looking.
+          }
+        } else {
+          externalSourceMapURLs.push(sourceMappingURL);
+        }
+
+        // If the first source map we found wasn't a match, check for more.
+        sourceMappingURLMatch = withSyncPerfMeasurements(
+          'sourceMapRegex.exec(runtimeSourceCode)',
+          () => sourceMapRegex.exec(runtimeSourceCode),
+        );
+      }
+
+      if (hookSourceAndMetadata.sourceMapJSON === null) {
+        externalSourceMapURLs.forEach((sourceMappingURL, index) => {
+          if (index !== externalSourceMapURLs.length - 1) {
+            // Files with external source maps should only have a single source map.
+            // More than one result might indicate an edge case,
+            // like a string in the source code that matched our "sourceMappingURL" regex.
+            // We should just skip over cases like this.
+            console.warn(
+              `More than one external source map detected in the source file; skipping "${sourceMappingURL}"`,
+            );
+            return;
+          }
+
+          const {runtimeSourceURL} = hookSourceAndMetadata;
+          let url = sourceMappingURL;
+          if (!url.startsWith('http') && !url.startsWith('/')) {
+            // Resolve paths relative to the location of the file name
+            const lastSlashIdx = runtimeSourceURL.lastIndexOf('/');
+            if (lastSlashIdx !== -1) {
+              const baseURL = runtimeSourceURL.slice(
+                0,
+                runtimeSourceURL.lastIndexOf('/'),
+              );
+              url = `${baseURL}/${url}`;
+            }
+          }
+
+          hookSourceAndMetadata.sourceMapURL = url;
+
+          const fetchPromise =
+            dedupedFetchPromises.get(url) ||
+            fetchFile(url).then(
+              sourceMapContents => {
+                const sourceMapJSON = withSyncPerfMeasurements(
+                  'JSON.parse(sourceMapContents)',
+                  () => JSON.parse(sourceMapContents),
+                );
+
+                return sourceMapJSON;
+              },
+
+              // In this case, we fall back to the assumption that the source has no source map.
+              // This might indicate an (unlikely) edge case that had no source map,
+              // but contained the string "sourceMappingURL".
+              error => null,
+            );
+
+          if (__DEBUG__) {
+            if (!dedupedFetchPromises.has(url)) {
+              console.log(
+                `extractAndLoadSourceMapJSON() External source map "${url}"`,
+              );
+            }
+          }
+
+          dedupedFetchPromises.set(url, fetchPromise);
+
+          setterPromises.push(
+            fetchPromise.then(sourceMapJSON => {
+              if (sourceMapJSON !== null) {
+                hookSourceAndMetadata.sourceMapJSON = sourceMapJSON;
+
+                // OPTIMIZATION If we've located a source map for this source,
+                // we'll use it to retrieve the original source (to extract hook names).
+                // We only fall back to parsing the full source code is when there's no source map.
+                // The source is (potentially) very large,
+                // So we can avoid the overhead of serializing it unnecessarily.
+                hookSourceAndMetadata.runtimeSourceCode = null;
+              }
+            }),
+          );
+        });
+      }
+    }
+  });
+
+  return Promise.all(setterPromises);
+}
+
+function fetchFile(
+  url: string,
+  markName: string = 'fetchFile',
+): Promise<string> {
+  return withCallbackPerfMeasurements(`${markName}("${url}")`, done => {
+    return new Promise((resolve, reject) => {
+      fetch(url, FETCH_OPTIONS).then(
+        response => {
+          if (response.ok) {
+            response
+              .text()
+              .then(text => {
+                done();
+                resolve(text);
+              })
+              .catch(error => {
+                if (__DEBUG__) {
+                  console.log(
+                    `${markName}() Could not read text for url "${url}"`,
+                  );
+                }
+                done();
+                reject(null);
+              });
+          } else {
+            if (__DEBUG__) {
+              console.log(`${markName}() Got bad response for url "${url}"`);
+            }
+            done();
+            reject(null);
+          }
+        },
+        error => {
+          if (__DEBUG__) {
+            console.log(`${markName}() Could not fetch file: ${error.message}`);
+          }
+          done();
+          reject(null);
+        },
+      );
+    });
+  });
+}
+
+export function hasNamedHooks(hooksTree: HooksTree): boolean {
+  for (let i = 0; i < hooksTree.length; i++) {
+    const hook = hooksTree[i];
+
+    if (!isUnnamedBuiltInHook(hook)) {
+      return true;
+    }
+
+    if (hook.subHooks.length > 0) {
+      if (hasNamedHooks(hook.subHooks)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export function flattenHooksList(hooksTree: HooksTree): HooksList {
+  const hooksList: HooksList = [];
+  withSyncPerfMeasurements('flattenHooksList()', () => {
+    flattenHooksListImpl(hooksTree, hooksList);
+  });
+
+  if (__DEBUG__) {
+    console.log('flattenHooksList() hooksList:', hooksList);
+  }
+
+  return hooksList;
+}
+
+function flattenHooksListImpl(
+  hooksTree: HooksTree,
+  hooksList: Array<HooksNode>,
+): void {
+  for (let i = 0; i < hooksTree.length; i++) {
+    const hook = hooksTree[i];
+
+    if (isUnnamedBuiltInHook(hook)) {
+      // No need to load source code or do any parsing for unnamed hooks.
+      if (__DEBUG__) {
+        console.log('flattenHooksListImpl() Skipping unnamed hook', hook);
+      }
+
+      continue;
+    }
+
+    hooksList.push(hook);
+
+    if (hook.subHooks.length > 0) {
+      flattenHooksListImpl(hook.subHooks, hooksList);
+    }
+  }
+}
+
+function initializeHookSourceAndMetadata(
+  hooksList: Array<HooksNode>,
+): LocationKeyToHookSourceAndMetadata {
+  // Create map of unique source locations (file names plus line and column numbers) to metadata about hooks.
+  const locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata =
+    new Map();
+  for (let i = 0; i < hooksList.length; i++) {
+    const hook = hooksList[i];
+
+    const hookSource = hook.hookSource;
+    if (hookSource == null) {
+      // Older versions of react-debug-tools don't include this information.
+      // In this case, we can't continue.
+      throw Error('Hook source code location not found.');
+    }
+
+    const locationKey = getHookSourceLocationKey(hookSource);
+    if (!locationKeyToHookSourceAndMetadata.has(locationKey)) {
+      // Can't be null because getHookSourceLocationKey() would have thrown
+      const runtimeSourceURL = ((hookSource.fileName: any): string);
+
+      const hookSourceAndMetadata: HookSourceAndMetadata = {
+        hookSource,
+        runtimeSourceCode: null,
+        runtimeSourceURL,
+        sourceMapJSON: null,
+        sourceMapURL: null,
+      };
+
+      locationKeyToHookSourceAndMetadata.set(
+        locationKey,
+        hookSourceAndMetadata,
+      );
+    }
+  }
+
+  return locationKeyToHookSourceAndMetadata;
+}
+
+// Determines whether incoming hook is a primitive hook that gets assigned to variables.
+function isUnnamedBuiltInHook(hook: HooksNode) {
+  return ['Effect', 'ImperativeHandle', 'LayoutEffect', 'DebugValue'].includes(
+    hook.name,
+  );
+}
+
+function loadSourceFiles(
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+): Promise<mixed> {
+  // Deduplicate fetches, since there can be multiple location keys per file.
+  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();
+
+  const setterPromises = [];
+  locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
+    const {runtimeSourceURL} = hookSourceAndMetadata;
+
+    let fetchFileFunction = fetchFile;
+    if (fetchFileWithCaching != null) {
+      // If a helper function has been injected to fetch with caching,
+      // use it to fetch the (already loaded) source file.
+      fetchFileFunction = url => {
+        return withAsyncPerfMeasurements(
+          `fetchFileWithCaching("${url}")`,
+          () => {
+            return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
+          },
+        );
+      };
+    }
+
+    const fetchPromise =
+      dedupedFetchPromises.get(runtimeSourceURL) ||
+      (runtimeSourceURL && !runtimeSourceURL.startsWith('<anonymous')
+        ? fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => {
+            // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps,
+            // because then we need to parse the full source file as an AST.
+            if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
+              throw Error('Source code too large to parse');
+            }
+
+            if (__DEBUG__) {
+              console.groupCollapsed(
+                `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
+              );
+              console.log(runtimeSourceCode);
+              console.groupEnd();
+            }
+
+            return runtimeSourceCode;
+          })
+        : Promise.reject(new Error('Empty url')));
+    dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);
+
+    setterPromises.push(
+      fetchPromise.then(runtimeSourceCode => {
+        hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
+      }),
+    );
+  });
+
+  return Promise.all(setterPromises);
+}
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
new file mode 100644
index 00000000000..fde53857857
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
@@ -0,0 +1,441 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// For an overview of why the code in this file is structured this way,
+// refer to header comments in loadSourceAndMetadata.
+
+import {parse} from '@babel/parser';
+import LRU from 'lru-cache';
+import {getHookName} from '../astUtils';
+import {areSourceMapsAppliedToErrors} from '../ErrorTester';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookSourceLocation';
+import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
+import {
+  withAsyncPerfMeasurements,
+  withSyncPerfMeasurements,
+} from 'react-devtools-shared/src/PerformanceLoggingUtils';
+import SourceMapConsumer from '../SourceMapConsumer';
+
+import type {SourceMapConsumerType} from '../SourceMapConsumer';
+import type {
+  HooksList,
+  LocationKeyToHookSourceAndMetadata,
+} from './loadSourceAndMetadata';
+import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
+import type {
+  HookNames,
+  LRUCache,
+} from 'react-devtools-shared/src/frontend/types';
+
+type AST = mixed;
+
+type HookParsedMetadata = {
+  // API for consuming metadfata present in extended source map.
+  metadataConsumer: SourceMapMetadataConsumer | null,
+
+  // AST for original source code; typically comes from a consumed source map.
+  originalSourceAST: AST | null,
+
+  // Source code (React components or custom hooks) containing primitive hook calls.
+  // If no source map has been provided, this code will be the same as runtimeSourceCode.
+  originalSourceCode: string | null,
+
+  // Original source URL if there is a source map, or the same as runtimeSourceURL.
+  originalSourceURL: string | null,
+
+  // Line number in original source code.
+  originalSourceLineNumber: number | null,
+
+  // Column number in original source code.
+  originalSourceColumnNumber: number | null,
+
+  // Alternate APIs from source-map for parsing source maps (if detected).
+  sourceMapConsumer: SourceMapConsumerType | null,
+};
+
+type LocationKeyToHookParsedMetadata = Map<string, HookParsedMetadata>;
+
+type CachedRuntimeCodeMetadata = {
+  metadataConsumer: SourceMapMetadataConsumer | null,
+  sourceMapConsumer: SourceMapConsumerType | null,
+};
+
+const runtimeURLToMetadataCache: LRUCache<string, CachedRuntimeCodeMetadata> =
+  new LRU({max: 50});
+
+type CachedSourceCodeMetadata = {
+  originalSourceAST: AST,
+  originalSourceCode: string,
+};
+
+const originalURLToMetadataCache: LRUCache<string, CachedSourceCodeMetadata> =
+  new LRU({
+    max: 50,
+    dispose: (
+      originalSourceURL: string,
+      metadata: CachedSourceCodeMetadata,
+    ) => {
+      if (__DEBUG__) {
+        console.log(
+          `originalURLToMetadataCache.dispose() Evicting cached metadata for "${originalSourceURL}"`,
+        );
+      }
+    },
+  });
+
+export async function parseSourceAndMetadata(
+  hooksList: HooksList,
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+): Promise<HookNames | null> {
+  return withAsyncPerfMeasurements('parseSourceAndMetadata()', async () => {
+    const locationKeyToHookParsedMetadata = withSyncPerfMeasurements(
+      'initializeHookParsedMetadata',
+      () => initializeHookParsedMetadata(locationKeyToHookSourceAndMetadata),
+    );
+
+    withSyncPerfMeasurements('parseSourceMaps', () =>
+      parseSourceMaps(
+        locationKeyToHookSourceAndMetadata,
+        locationKeyToHookParsedMetadata,
+      ),
+    );
+
+    withSyncPerfMeasurements('parseSourceAST()', () =>
+      parseSourceAST(
+        locationKeyToHookSourceAndMetadata,
+        locationKeyToHookParsedMetadata,
+      ),
+    );
+
+    return withSyncPerfMeasurements('findHookNames()', () =>
+      findHookNames(hooksList, locationKeyToHookParsedMetadata),
+    );
+  });
+}
+
+function findHookNames(
+  hooksList: HooksList,
+  locationKeyToHookParsedMetadata: LocationKeyToHookParsedMetadata,
+): HookNames {
+  const map: HookNames = new Map();
+
+  hooksList.map(hook => {
+    // We already guard against a null HookSource in parseHookNames()
+    const hookSource = ((hook.hookSource: any): HookSource);
+    const fileName = hookSource.fileName;
+    if (!fileName) {
+      return null; // Should not be reachable.
+    }
+
+    const locationKey = getHookSourceLocationKey(hookSource);
+    const hookParsedMetadata = locationKeyToHookParsedMetadata.get(locationKey);
+    if (!hookParsedMetadata) {
+      return null; // Should not be reachable.
+    }
+
+    const {lineNumber, columnNumber} = hookSource;
+    if (!lineNumber || !columnNumber) {
+      return null; // Should not be reachable.
+    }
+
+    const {
+      originalSourceURL,
+      originalSourceColumnNumber,
+      originalSourceLineNumber,
+    } = hookParsedMetadata;
+
+    if (
+      originalSourceLineNumber == null ||
+      originalSourceColumnNumber == null ||
+      originalSourceURL == null
+    ) {
+      return null; // Should not be reachable.
+    }
+
+    let name;
+    const {metadataConsumer} = hookParsedMetadata;
+    if (metadataConsumer != null) {
+      name = withSyncPerfMeasurements('metadataConsumer.hookNameFor()', () =>
+        metadataConsumer.hookNameFor({
+          line: originalSourceLineNumber,
+          column: originalSourceColumnNumber,
+          source: originalSourceURL,
+        }),
+      );
+    }
+
+    if (name == null) {
+      name = withSyncPerfMeasurements('getHookName()', () =>
+        getHookName(
+          hook,
+          hookParsedMetadata.originalSourceAST,
+          ((hookParsedMetadata.originalSourceCode: any): string),
+          ((originalSourceLineNumber: any): number),
+          originalSourceColumnNumber,
+        ),
+      );
+    }
+
+    if (__DEBUG__) {
+      console.log(`findHookNames() Found name "${name || '-'}"`);
+    }
+
+    const key = getHookSourceLocationKey(hookSource);
+    map.set(key, name);
+  });
+
+  return map;
+}
+
+function initializeHookParsedMetadata(
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+) {
+  // Create map of unique source locations (file names plus line and column numbers) to metadata about hooks.
+  const locationKeyToHookParsedMetadata: LocationKeyToHookParsedMetadata =
+    new Map();
+  locationKeyToHookSourceAndMetadata.forEach(
+    (hookSourceAndMetadata, locationKey) => {
+      const hookParsedMetadata: HookParsedMetadata = {
+        metadataConsumer: null,
+        originalSourceAST: null,
+        originalSourceCode: null,
+        originalSourceURL: null,
+        originalSourceLineNumber: null,
+        originalSourceColumnNumber: null,
+        sourceMapConsumer: null,
+      };
+
+      locationKeyToHookParsedMetadata.set(locationKey, hookParsedMetadata);
+    },
+  );
+
+  return locationKeyToHookParsedMetadata;
+}
+
+function parseSourceAST(
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+  locationKeyToHookParsedMetadata: LocationKeyToHookParsedMetadata,
+): void {
+  locationKeyToHookSourceAndMetadata.forEach(
+    (hookSourceAndMetadata, locationKey) => {
+      const hookParsedMetadata =
+        locationKeyToHookParsedMetadata.get(locationKey);
+      if (hookParsedMetadata == null) {
+        throw Error(`Expected to find HookParsedMetadata for "${locationKey}"`);
+      }
+
+      if (hookParsedMetadata.originalSourceAST !== null) {
+        // Use cached metadata.
+        return;
+      }
+
+      if (
+        hookParsedMetadata.originalSourceURL != null &&
+        hookParsedMetadata.originalSourceCode != null &&
+        hookParsedMetadata.originalSourceColumnNumber != null &&
+        hookParsedMetadata.originalSourceLineNumber != null
+      ) {
+        // Use cached metadata.
+        return;
+      }
+
+      const {lineNumber, columnNumber} = hookSourceAndMetadata.hookSource;
+      if (lineNumber == null || columnNumber == null) {
+        throw Error('Hook source code location not found.');
+      }
+
+      const {metadataConsumer, sourceMapConsumer} = hookParsedMetadata;
+      const runtimeSourceCode =
+        ((hookSourceAndMetadata.runtimeSourceCode: any): string);
+      let hasHookMap = false;
+      let originalSourceURL;
+      let originalSourceCode;
+      let originalSourceColumnNumber;
+      let originalSourceLineNumber;
+      if (areSourceMapsAppliedToErrors() || sourceMapConsumer === null) {
+        // Either the current environment automatically applies source maps to errors,
+        // or the current code had no source map to begin with.
+        // Either way, we don't need to convert the Error stack frame locations.
+        originalSourceColumnNumber = columnNumber;
+        originalSourceLineNumber = lineNumber;
+        // There's no source map to parse here so we can just parse the original source itself.
+        originalSourceCode = runtimeSourceCode;
+        // TODO (named hooks) This mixes runtimeSourceURLs with source mapped URLs in the same cache key space.
+        // Namespace them?
+        originalSourceURL = hookSourceAndMetadata.runtimeSourceURL;
+      } else {
+        const {column, line, sourceContent, sourceURL} =
+          sourceMapConsumer.originalPositionFor({
+            columnNumber,
+            lineNumber,
+          });
+        if (sourceContent === null || sourceURL === null) {
+          throw Error(
+            `Could not find original source for line:${lineNumber} and column:${columnNumber}`,
+          );
+        }
+
+        originalSourceColumnNumber = column;
+        originalSourceLineNumber = line;
+        originalSourceCode = sourceContent;
+        originalSourceURL = sourceURL;
+      }
+
+      hookParsedMetadata.originalSourceCode = originalSourceCode;
+      hookParsedMetadata.originalSourceURL = originalSourceURL;
+      hookParsedMetadata.originalSourceLineNumber = originalSourceLineNumber;
+      hookParsedMetadata.originalSourceColumnNumber =
+        originalSourceColumnNumber;
+
+      if (
+        metadataConsumer != null &&
+        metadataConsumer.hasHookMap(originalSourceURL)
+      ) {
+        hasHookMap = true;
+      }
+
+      if (__DEBUG__) {
+        console.log(
+          `parseSourceAST() mapped line ${lineNumber}->${originalSourceLineNumber} and column ${columnNumber}->${originalSourceColumnNumber}`,
+        );
+      }
+
+      if (hasHookMap) {
+        if (__DEBUG__) {
+          console.log(
+            `parseSourceAST() Found hookMap and skipping parsing for "${originalSourceURL}"`,
+          );
+        }
+        // If there's a hook map present from an extended sourcemap then
+        // we don't need to parse the source files and instead can use the
+        // hook map to extract hook names.
+        return;
+      }
+
+      if (__DEBUG__) {
+        console.log(
+          `parseSourceAST() Did not find hook map for "${originalSourceURL}"`,
+        );
+      }
+
+      // The cache also serves to deduplicate parsing by URL in our loop over location keys.
+      // This may need to change if we switch to async parsing.
+      const sourceMetadata = originalURLToMetadataCache.get(originalSourceURL);
+      if (sourceMetadata != null) {
+        if (__DEBUG__) {
+          console.groupCollapsed(
+            `parseSourceAST() Found cached source metadata for "${originalSourceURL}"`,
+          );
+          console.log(sourceMetadata);
+          console.groupEnd();
+        }
+        hookParsedMetadata.originalSourceAST = sourceMetadata.originalSourceAST;
+        hookParsedMetadata.originalSourceCode =
+          sourceMetadata.originalSourceCode;
+      } else {
+        try {
+          // TypeScript is the most commonly used typed JS variant so let's default to it
+          // unless we detect explicit Flow usage via the "@flow" pragma.
+          const plugin =
+            originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
+
+          // TODO (named hooks) This is probably where we should check max source length,
+          // rather than in loadSourceAndMetatada -> loadSourceFiles().
+          // TODO(#22319): Support source files that are html files with inline script tags.
+          const originalSourceAST = withSyncPerfMeasurements(
+            '[@babel/parser] parse(originalSourceCode)',
+            () =>
+              parse(originalSourceCode, {
+                sourceType: 'unambiguous',
+                plugins: ['jsx', plugin],
+              }),
+          );
+          hookParsedMetadata.originalSourceAST = originalSourceAST;
+
+          if (__DEBUG__) {
+            console.log(
+              `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
+            );
+          }
+
+          originalURLToMetadataCache.set(originalSourceURL, {
+            originalSourceAST,
+            originalSourceCode,
+          });
+        } catch (error) {
+          throw new Error(
+            `Failed to parse source file: ${originalSourceURL}\n\n` +
+              `Original error: ${error}`,
+          );
+        }
+      }
+    },
+  );
+}
+
+function parseSourceMaps(
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+  locationKeyToHookParsedMetadata: LocationKeyToHookParsedMetadata,
+) {
+  locationKeyToHookSourceAndMetadata.forEach(
+    (hookSourceAndMetadata, locationKey) => {
+      const hookParsedMetadata =
+        locationKeyToHookParsedMetadata.get(locationKey);
+      if (hookParsedMetadata == null) {
+        throw Error(`Expected to find HookParsedMetadata for "${locationKey}"`);
+      }
+
+      const {runtimeSourceURL, sourceMapJSON} = hookSourceAndMetadata;
+
+      // If we've already loaded the source map info for this file,
+      // we can skip reloading it (and more importantly, re-parsing it).
+      const runtimeMetadata = runtimeURLToMetadataCache.get(runtimeSourceURL);
+      if (runtimeMetadata != null) {
+        if (__DEBUG__) {
+          console.groupCollapsed(
+            `parseHookNames() Found cached runtime metadata for file "${runtimeSourceURL}"`,
+          );
+          console.log(runtimeMetadata);
+          console.groupEnd();
+        }
+
+        hookParsedMetadata.metadataConsumer = runtimeMetadata.metadataConsumer;
+        hookParsedMetadata.sourceMapConsumer =
+          runtimeMetadata.sourceMapConsumer;
+      } else {
+        if (sourceMapJSON != null) {
+          const sourceMapConsumer = withSyncPerfMeasurements(
+            'new SourceMapConsumer(sourceMapJSON)',
+            () => SourceMapConsumer(sourceMapJSON),
+          );
+
+          const metadataConsumer = withSyncPerfMeasurements(
+            'new SourceMapMetadataConsumer(sourceMapJSON)',
+            () => new SourceMapMetadataConsumer(sourceMapJSON),
+          );
+
+          hookParsedMetadata.metadataConsumer = metadataConsumer;
+          hookParsedMetadata.sourceMapConsumer = sourceMapConsumer;
+
+          // Only set once to avoid triggering eviction/cleanup code.
+          runtimeURLToMetadataCache.set(runtimeSourceURL, {
+            metadataConsumer: metadataConsumer,
+            sourceMapConsumer: sourceMapConsumer,
+          });
+        }
+      }
+    },
+  );
+}
+
+export function purgeCachedMetadata(): void {
+  originalURLToMetadataCache.reset();
+  runtimeURLToMetadataCache.reset();
+}
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.worker.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.worker.js
new file mode 100644
index 00000000000..ec17c197fe0
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.worker.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as parseSourceAndMetadataModule from './parseSourceAndMetadata';
+
+export const parseSourceAndMetadata =
+  parseSourceAndMetadataModule.parseSourceAndMetadata;
+export const purgeCachedMetadata =
+  parseSourceAndMetadataModule.purgeCachedMetadata;
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
new file mode 100644
index 00000000000..2468917d939
--- /dev/null
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -0,0 +1,807 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  getDataType,
+  getDisplayNameForReactElement,
+  getAllEnumerableKeys,
+  getInObject,
+  formatDataForPreview,
+  setInObject,
+} from 'react-devtools-shared/src/utils';
+
+import {REACT_LEGACY_ELEMENT_TYPE} from 'shared/ReactSymbols';
+
+import type {
+  DehydratedData,
+  InspectedElementPath,
+} from 'react-devtools-shared/src/frontend/types';
+
+import noop from 'shared/noop';
+
+export const meta = {
+  inspectable: (Symbol('inspectable'): symbol),
+  inspected: (Symbol('inspected'): symbol),
+  name: (Symbol('name'): symbol),
+  preview_long: (Symbol('preview_long'): symbol),
+  preview_short: (Symbol('preview_short'): symbol),
+  readonly: (Symbol('readonly'): symbol),
+  size: (Symbol('size'): symbol),
+  type: (Symbol('type'): symbol),
+  unserializable: (Symbol('unserializable'): symbol),
+};
+
+export type Dehydrated = {
+  inspectable: boolean,
+  name: string | null,
+  preview_long: string | null,
+  preview_short: string | null,
+  readonly?: boolean,
+  size?: number,
+  type: string,
+};
+
+// Typed arrays, other complex iteratable objects (e.g. Map, Set, ImmutableJS) or Promises 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,
+  [string | number]: any,
+};
+
+// 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:
+      typeof data.constructor !== 'function' ||
+      typeof data.constructor.name !== 'string' ||
+      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>,
+  isPathAllowed: (path: Array<string | number>) => boolean,
+  level: number = 0,
+): DehydratedData['data'] {
+  const type = getDataType(data);
+
+  let isPathAllowedCheck;
+
+  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:
+          typeof data.name === 'function' || !data.name
+            ? 'function'
+            : data.name,
+        type,
+      };
+
+    case 'string':
+      isPathAllowedCheck = isPathAllowed(path);
+      if (isPathAllowedCheck) {
+        return data;
+      } else {
+        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,
+      };
+
+    case 'react_element': {
+      isPathAllowedCheck = isPathAllowed(path);
+
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        cleaned.push(path);
+        return {
+          inspectable: true,
+          preview_short: formatDataForPreview(data, false),
+          preview_long: formatDataForPreview(data, true),
+          name: getDisplayNameForReactElement(data) || 'Unknown',
+          type,
+        };
+      }
+
+      const unserializableValue: Unserializable = {
+        unserializable: true,
+        type,
+        readonly: true,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: getDisplayNameForReactElement(data) || 'Unknown',
+      };
+      // TODO: We can't expose type because that name is already taken on Unserializable.
+      unserializableValue.key = dehydrate(
+        data.key,
+        cleaned,
+        unserializable,
+        path.concat(['key']),
+        isPathAllowed,
+        isPathAllowedCheck ? 1 : level + 1,
+      );
+      if (data.$$typeof === REACT_LEGACY_ELEMENT_TYPE) {
+        unserializableValue.ref = dehydrate(
+          data.ref,
+          cleaned,
+          unserializable,
+          path.concat(['ref']),
+          isPathAllowed,
+          isPathAllowedCheck ? 1 : level + 1,
+        );
+      }
+      unserializableValue.props = dehydrate(
+        data.props,
+        cleaned,
+        unserializable,
+        path.concat(['props']),
+        isPathAllowed,
+        isPathAllowedCheck ? 1 : level + 1,
+      );
+
+      unserializable.push(path);
+      return unserializableValue;
+    }
+    case 'react_lazy': {
+      isPathAllowedCheck = isPathAllowed(path);
+
+      const payload = data._payload;
+
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        cleaned.push(path);
+        const inspectable =
+          payload !== null &&
+          typeof payload === 'object' &&
+          (payload._status === 1 ||
+            payload._status === 2 ||
+            payload.status === 'fulfilled' ||
+            payload.status === 'rejected');
+        return {
+          inspectable,
+          preview_short: formatDataForPreview(data, false),
+          preview_long: formatDataForPreview(data, true),
+          name: 'lazy()',
+          type,
+        };
+      }
+
+      const unserializableValue: Unserializable = {
+        unserializable: true,
+        type: type,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: 'lazy()',
+      };
+      // Ideally we should alias these properties to something more readable but
+      // unfortunately because of how the hydration algorithm uses a single concept of
+      // "path" we can't alias the path.
+      unserializableValue._payload = dehydrate(
+        payload,
+        cleaned,
+        unserializable,
+        path.concat(['_payload']),
+        isPathAllowed,
+        isPathAllowedCheck ? 1 : level + 1,
+      );
+      unserializable.push(path);
+      return unserializableValue;
+    }
+    // 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':
+      isPathAllowedCheck = isPathAllowed(path);
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      }
+      const arr: Array<Object> = [];
+      for (let i = 0; i < data.length; i++) {
+        arr[i] = dehydrateKey(
+          data,
+          i,
+          cleaned,
+          unserializable,
+          path.concat([i]),
+          isPathAllowed,
+          isPathAllowedCheck ? 1 : level + 1,
+        );
+      }
+      return arr;
+
+    case 'html_all_collection':
+    case 'typed_array':
+    case 'iterator':
+      isPathAllowedCheck = isPathAllowed(path);
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        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:
+            typeof data.constructor !== 'function' ||
+            typeof data.constructor.name !== 'string' ||
+            data.constructor.name === 'Object'
+              ? ''
+              : data.constructor.name,
+        };
+
+        // 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]),
+              isPathAllowed,
+              isPathAllowedCheck ? 1 : level + 1,
+            )),
+        );
+
+        unserializable.push(path);
+
+        return unserializableValue;
+      }
+
+    case 'opaque_iterator':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data[Symbol.toStringTag],
+        type,
+      };
+
+    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 'thenable':
+      isPathAllowedCheck = isPathAllowed(path);
+
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        cleaned.push(path);
+        return {
+          inspectable:
+            data.status === 'fulfilled' || data.status === 'rejected',
+          preview_short: formatDataForPreview(data, false),
+          preview_long: formatDataForPreview(data, true),
+          name: data.toString(),
+          type,
+        };
+      }
+
+      if (
+        data.status === 'resolved_model' ||
+        data.status === 'resolve_module'
+      ) {
+        // This looks it's a lazy initialization pattern such in Flight.
+        // Since we're about to inspect it. Let's eagerly initialize it.
+        data.then(noop);
+      }
+
+      switch (data.status) {
+        case 'fulfilled': {
+          const unserializableValue: Unserializable = {
+            unserializable: true,
+            type: type,
+            preview_short: formatDataForPreview(data, false),
+            preview_long: formatDataForPreview(data, true),
+            name: 'fulfilled Thenable',
+          };
+
+          unserializableValue.value = dehydrate(
+            data.value,
+            cleaned,
+            unserializable,
+            path.concat(['value']),
+            isPathAllowed,
+            isPathAllowedCheck ? 1 : level + 1,
+          );
+
+          unserializable.push(path);
+
+          return unserializableValue;
+        }
+        case 'rejected': {
+          const unserializableValue: Unserializable = {
+            unserializable: true,
+            type: type,
+            preview_short: formatDataForPreview(data, false),
+            preview_long: formatDataForPreview(data, true),
+            name: 'rejected Thenable',
+          };
+
+          unserializableValue.reason = dehydrate(
+            data.reason,
+            cleaned,
+            unserializable,
+            path.concat(['reason']),
+            isPathAllowed,
+            isPathAllowedCheck ? 1 : level + 1,
+          );
+
+          unserializable.push(path);
+
+          return unserializableValue;
+        }
+        default:
+          cleaned.push(path);
+          return {
+            inspectable: false,
+            preview_short: formatDataForPreview(data, false),
+            preview_long: formatDataForPreview(data, true),
+            name: data.toString(),
+            type,
+          };
+      }
+
+    case 'object':
+      isPathAllowedCheck = isPathAllowed(path);
+
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      } else {
+        const object: {
+          [string]: DehydratedData['data'],
+        } = {};
+        getAllEnumerableKeys(data).forEach(key => {
+          const name = key.toString();
+          object[name] = dehydrateKey(
+            data,
+            key,
+            cleaned,
+            unserializable,
+            path.concat([name]),
+            isPathAllowed,
+            isPathAllowedCheck ? 1 : level + 1,
+          );
+        });
+        return object;
+      }
+
+    case 'class_instance': {
+      isPathAllowedCheck = isPathAllowed(path);
+
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      }
+
+      const value: Unserializable = {
+        unserializable: true,
+        type,
+        readonly: true,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name:
+          typeof data.constructor !== 'function' ||
+          typeof data.constructor.name !== 'string'
+            ? ''
+            : data.constructor.name,
+      };
+
+      getAllEnumerableKeys(data).forEach(key => {
+        const keyAsString = key.toString();
+
+        value[keyAsString] = dehydrate(
+          data[key],
+          cleaned,
+          unserializable,
+          path.concat([keyAsString]),
+          isPathAllowed,
+          isPathAllowedCheck ? 1 : level + 1,
+        );
+      });
+
+      unserializable.push(path);
+
+      return value;
+    }
+    case 'error': {
+      isPathAllowedCheck = isPathAllowed(path);
+
+      if (level >= LEVEL_THRESHOLD && !isPathAllowedCheck) {
+        return createDehydrated(type, true, data, cleaned, path);
+      }
+
+      const value: Unserializable = {
+        unserializable: true,
+        type,
+        readonly: true,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.name,
+      };
+
+      // name, message, stack and cause are not enumerable yet still interesting.
+      value.message = dehydrate(
+        data.message,
+        cleaned,
+        unserializable,
+        path.concat(['message']),
+        isPathAllowed,
+        isPathAllowedCheck ? 1 : level + 1,
+      );
+      value.stack = dehydrate(
+        data.stack,
+        cleaned,
+        unserializable,
+        path.concat(['stack']),
+        isPathAllowed,
+        isPathAllowedCheck ? 1 : level + 1,
+      );
+
+      if ('cause' in data) {
+        value.cause = dehydrate(
+          data.cause,
+          cleaned,
+          unserializable,
+          path.concat(['cause']),
+          isPathAllowed,
+          isPathAllowedCheck ? 1 : level + 1,
+        );
+      }
+
+      getAllEnumerableKeys(data).forEach(key => {
+        const keyAsString = key.toString();
+
+        value[keyAsString] = dehydrate(
+          data[key],
+          cleaned,
+          unserializable,
+          path.concat([keyAsString]),
+          isPathAllowed,
+          isPathAllowedCheck ? 1 : level + 1,
+        );
+      });
+
+      unserializable.push(path);
+
+      return value;
+    }
+    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;
+  }
+}
+
+function dehydrateKey(
+  parent: Object,
+  key: number | string | symbol,
+  cleaned: Array<Array<string | number>>,
+  unserializable: Array<Array<string | number>>,
+  path: Array<string | number>,
+  isPathAllowed: (path: Array<string | number>) => boolean,
+  level: number = 0,
+): DehydratedData['data'] {
+  try {
+    return dehydrate(
+      parent[key],
+      cleaned,
+      unserializable,
+      path,
+      isPathAllowed,
+      level,
+    );
+  } catch (error) {
+    let preview = '';
+    if (
+      typeof error === 'object' &&
+      error !== null &&
+      typeof error.stack === 'string'
+    ) {
+      preview = error.stack;
+    } else if (typeof error === 'string') {
+      preview = error;
+    }
+    cleaned.push(path);
+    return {
+      inspectable: false,
+      preview_short: '[Exception]',
+      preview_long: preview ? '[Exception: ' + preview + ']' : '[Exception]',
+      name: preview,
+      type: 'unknown',
+    };
+  }
+}
+
+export function fillInPath(
+  object: Object,
+  data: DehydratedData,
+  path: InspectedElementPath,
+  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) {
+      return;
+    } else 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, {
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.inspected]: {
+      configurable: true,
+      enumerable: false,
+      value: !!source.inspected,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.name]: {
+      configurable: true,
+      enumerable: false,
+      value: source.name,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.preview_long]: {
+      configurable: true,
+      enumerable: false,
+      value: source.preview_long,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.preview_short]: {
+      configurable: true,
+      enumerable: false,
+      value: source.preview_short,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.size]: {
+      configurable: true,
+      enumerable: false,
+      value: source.size,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.readonly]: {
+      configurable: true,
+      enumerable: false,
+      value: !!source.readonly,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [meta.type]: {
+      configurable: true,
+      enumerable: false,
+      value: source.type,
+    },
+    // $FlowFixMe[invalid-computed-prop]
+    [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/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
new file mode 100644
index 00000000000..820baf3380d
--- /dev/null
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+import {
+  unstable_getCacheForType as getCacheForType,
+  startTransition,
+} from 'react';
+import Store from 'react-devtools-shared/src/devtools/store';
+import {inspectElement as inspectElementMutableSource} from 'react-devtools-shared/src/inspectedElementMutableSource';
+import ElementPollingCancellationError from 'react-devtools-shared/src//errors/ElementPollingCancellationError';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+import type {
+  Element,
+  InspectedElement as InspectedElementFrontend,
+  InspectedElementResponseType,
+  InspectedElementPath,
+} from 'react-devtools-shared/src/frontend/types';
+
+function readRecord<T>(record: Thenable<T>): T {
+  if (typeof React.use === 'function') {
+    // eslint-disable-next-line react-hooks-published/rules-of-hooks
+    return React.use(record);
+  }
+  if (record.status === 'fulfilled') {
+    return record.value;
+  } else if (record.status === 'rejected') {
+    throw record.reason;
+  } else {
+    throw record;
+  }
+}
+
+type InspectedElementMap = WeakMap<Element, Thenable<InspectedElementFrontend>>;
+type CacheSeedKey = () => InspectedElementMap;
+
+function createMap(): InspectedElementMap {
+  return new WeakMap();
+}
+
+function getRecordMap(): WeakMap<Element, Thenable<InspectedElementFrontend>> {
+  return getCacheForType(createMap);
+}
+
+function createCacheSeed(
+  element: Element,
+  inspectedElement: InspectedElementFrontend,
+): [CacheSeedKey, InspectedElementMap] {
+  const thenable: FulfilledThenable<InspectedElementFrontend> = {
+    then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
+      callback(thenable.value);
+    },
+    status: 'fulfilled',
+    value: inspectedElement,
+  };
+  const map = createMap();
+  map.set(element, thenable);
+  return [createMap, map];
+}
+
+/**
+ * Fetches element props and state from the backend for inspection.
+ * This method should be called during render; it will suspend if data has not yet been fetched.
+ */
+export function inspectElement(
+  element: Element,
+  path: InspectedElementPath | null,
+  store: Store,
+  bridge: FrontendBridge,
+): InspectedElementFrontend | null {
+  const map = getRecordMap();
+  let record = map.get(element);
+  if (!record) {
+    const callbacks = new Set<(value: any) => mixed>();
+    const rejectCallbacks = new Set<(reason: mixed) => mixed>();
+    const thenable: Thenable<InspectedElementFrontend> = {
+      status: 'pending',
+      value: null,
+      reason: null,
+      then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
+        callbacks.add(callback);
+        rejectCallbacks.add(reject);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Inspecting ${element.displayName || 'Unknown'}`,
+    };
+
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.clear();
+      rejectCallbacks.clear();
+    };
+    const wakeRejections = () => {
+      // This assumes they won't throw.
+      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.clear();
+      callbacks.clear();
+    };
+    record = thenable;
+
+    const rendererID = store.getRendererIDForElement(element.id);
+    if (rendererID == null) {
+      const rejectedThenable: RejectedThenable<InspectedElementFrontend> =
+        (thenable: any);
+      rejectedThenable.status = 'rejected';
+      rejectedThenable.reason = new Error(
+        `Could not inspect element with id "${element.id}". No renderer found.`,
+      );
+
+      map.set(element, record);
+
+      return null;
+    }
+
+    inspectElementMutableSource(bridge, element, path, rendererID).then(
+      ([inspectedElement]: [
+        InspectedElementFrontend,
+        InspectedElementResponseType,
+      ]) => {
+        const fulfilledThenable: FulfilledThenable<InspectedElementFrontend> =
+          (thenable: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = inspectedElement;
+        wake();
+      },
+
+      error => {
+        console.error(error);
+
+        const rejectedThenable: RejectedThenable<InspectedElementFrontend> =
+          (thenable: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = error;
+
+        wakeRejections();
+      },
+    );
+
+    map.set(element, record);
+  }
+
+  const response = readRecord(record);
+  return response;
+}
+
+type RefreshFunction = (
+  seedKey: CacheSeedKey,
+  cacheMap: InspectedElementMap,
+) => void;
+
+/**
+ * Asks the backend for updated props and state from an expected element.
+ * This method should never be called during render; call it from an effect or event handler.
+ * This method will schedule an update if updated information is returned.
+ */
+export function checkForUpdate({
+  bridge,
+  element,
+  refresh,
+  store,
+}: {
+  bridge: FrontendBridge,
+  element: Element,
+  refresh: RefreshFunction,
+  store: Store,
+}): void | Promise<void> {
+  const {id} = element;
+  const rendererID = store.getRendererIDForElement(id);
+
+  if (rendererID == null) {
+    return;
+  }
+
+  return inspectElementMutableSource(
+    bridge,
+    element,
+    null,
+    rendererID,
+    true,
+  ).then(
+    ([inspectedElement, responseType]: [
+      InspectedElementFrontend,
+      InspectedElementResponseType,
+    ]) => {
+      if (responseType === 'full-data') {
+        startTransition(() => {
+          const [key, value] = createCacheSeed(element, inspectedElement);
+          refresh(key, value);
+        });
+      }
+    },
+  );
+}
+
+function createPromiseWhichResolvesInOneSecond() {
+  return new Promise(resolve => setTimeout(resolve, 1000));
+}
+
+type PollingStatus = 'idle' | 'running' | 'paused' | 'aborted';
+
+export function startElementUpdatesPolling({
+  bridge,
+  element,
+  refresh,
+  store,
+}: {
+  bridge: FrontendBridge,
+  element: Element,
+  refresh: RefreshFunction,
+  store: Store,
+}): {abort: () => void, pause: () => void, resume: () => void} {
+  let status: PollingStatus = 'idle';
+
+  function abort() {
+    status = 'aborted';
+  }
+
+  function resume() {
+    if (status === 'running' || status === 'aborted') {
+      return;
+    }
+
+    status = 'idle';
+    poll();
+  }
+
+  function pause() {
+    if (status === 'paused' || status === 'aborted') {
+      return;
+    }
+
+    status = 'paused';
+  }
+
+  function poll(): Promise<void> {
+    status = 'running';
+
+    return Promise.allSettled([
+      checkForUpdate({bridge, element, refresh, store}),
+      createPromiseWhichResolvesInOneSecond(),
+    ])
+      .then(([{status: updateStatus, reason}]) => {
+        // There isn't much to do about errors in this case,
+        // but we should at least log them, so they aren't silent.
+        // Log only if polling is still active, we can't handle the case when
+        // request was sent, and then bridge was remounted (for example, when user did navigate to a new page),
+        // but at least we can mark that polling was aborted
+        if (updateStatus === 'rejected' && status !== 'aborted') {
+          // This is expected Promise rejection, no need to log it
+          if (reason instanceof ElementPollingCancellationError) {
+            return;
+          }
+
+          console.error(reason);
+        }
+      })
+      .finally(() => {
+        const shouldContinuePolling =
+          status !== 'aborted' && status !== 'paused';
+
+        status = 'idle';
+
+        if (shouldContinuePolling) {
+          return poll();
+        }
+      });
+  }
+
+  poll();
+
+  return {abort, resume, pause};
+}
+
+export function clearCacheBecauseOfError(refresh: RefreshFunction): void {
+  startTransition(() => {
+    const map = createMap();
+    refresh(createMap, map);
+  });
+}
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
new file mode 100644
index 00000000000..d967109163a
--- /dev/null
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 LRU from 'lru-cache';
+import {
+  convertInspectedElementBackendToFrontend,
+  hydrateHelper,
+  inspectElement as inspectElementAPI,
+  inspectScreen as inspectScreenAPI,
+} from 'react-devtools-shared/src/backendAPI';
+import {fillInPath} from 'react-devtools-shared/src/hydration';
+
+import type {LRUCache} from 'react-devtools-shared/src/frontend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  InspectElementError,
+  InspectElementFullData,
+  InspectElementHydratedPath,
+} from 'react-devtools-shared/src/backend/types';
+import UserError from 'react-devtools-shared/src/errors/UserError';
+import UnknownHookError from 'react-devtools-shared/src/errors/UnknownHookError';
+import type {
+  Element,
+  InspectedElement as InspectedElementFrontend,
+  InspectedElementResponseType,
+  InspectedElementPath,
+} from 'react-devtools-shared/src/frontend/types';
+
+// Maps element ID to inspected data.
+// We use an LRU for this rather than a WeakMap because of how the "no-change" optimization works.
+// When the frontend polls the backend for an update on the element that's currently inspected,
+// the backend will send a "no-change" message if the element hasn't updated (rendered) since the last time it was asked.
+// In this case, the frontend cache should reuse the previous (cached) value.
+// Using a WeakMap keyed on Element generally works well for this, since Elements are mutable and stable in the Store.
+// This doens't work properly though when component filters are changed,
+// because this will cause the Store to dump all roots and re-initialize the tree (recreating the Element objects).
+// So instead we key on Element ID (which is stable in this case) and use an LRU for eviction.
+const inspectedElementCache: LRUCache<number, InspectedElementFrontend> =
+  new LRU({
+    max: 25,
+  });
+
+type InspectElementReturnType = [
+  InspectedElementFrontend,
+  InspectedElementResponseType,
+];
+
+export function inspectElement(
+  bridge: FrontendBridge,
+  element: Element,
+  path: InspectedElementPath | null,
+  rendererID: number,
+  shouldListenToPauseEvents: boolean = false,
+): Promise<InspectElementReturnType> {
+  const {id, parentID} = element;
+
+  // This could indicate that the DevTools UI has been closed and reopened.
+  // The in-memory cache will be clear but the backend still thinks we have cached data.
+  // In this case, we need to tell it to resend the full data.
+  const forceFullData = !inspectedElementCache.has(id);
+  const isRoot = parentID === 0;
+  const promisedElement = isRoot
+    ? inspectScreenAPI(
+        bridge,
+        forceFullData,
+        id,
+        path,
+        shouldListenToPauseEvents,
+      )
+    : inspectElementAPI(
+        bridge,
+        forceFullData,
+        id,
+        path,
+        rendererID,
+        shouldListenToPauseEvents,
+      );
+
+  return promisedElement.then((data: any) => {
+    const {type} = data;
+
+    let inspectedElement;
+    switch (type) {
+      case 'error': {
+        const {message, stack, errorType} = ((data: any): InspectElementError);
+
+        // create a different error class for each error type
+        // and keep useful information from backend.
+        let error;
+        if (errorType === 'user') {
+          error = new UserError(message);
+        } else if (errorType === 'unknown-hook') {
+          error = new UnknownHookError(message);
+        } else {
+          error = new Error(message);
+        }
+        // The backend's stack (where the error originated) is more meaningful than this stack.
+        error.stack = stack || error.stack;
+
+        throw error;
+      }
+
+      case 'no-change':
+        // This is a no-op for the purposes of our cache.
+        inspectedElement = inspectedElementCache.get(id);
+        if (inspectedElement != null) {
+          return [inspectedElement, type];
+        }
+
+        // We should only encounter this case in the event of a bug.
+        throw Error(`Cached data for element "${id}" not found`);
+
+      case 'not-found':
+        // This is effectively a no-op.
+        // If the Element is still in the Store, we can eagerly remove it from the Map.
+        inspectedElementCache.del(id);
+
+        throw Error(`Element "${id}" not found`);
+
+      case 'full-data':
+        const fullData = ((data: any): InspectElementFullData);
+
+        // New data has come in.
+        // We should replace the data in our local mutable copy.
+        inspectedElement = convertInspectedElementBackendToFrontend(
+          fullData.value,
+        );
+
+        inspectedElementCache.set(id, inspectedElement);
+
+        return [inspectedElement, type];
+
+      case 'hydrated-path':
+        const hydratedPathData = ((data: any): InspectElementHydratedPath);
+        const {value} = hydratedPathData;
+
+        // A path has been hydrated.
+        // Merge it with the latest copy we have locally and resolve with the merged value.
+        inspectedElement = inspectedElementCache.get(id) || null;
+        if (inspectedElement !== null) {
+          // Clone element
+          inspectedElement = {...inspectedElement};
+
+          // Merge hydrated data
+          if (path != null) {
+            fillInPath(
+              inspectedElement,
+              value,
+              path,
+              hydrateHelper(value, path),
+            );
+          }
+
+          inspectedElementCache.set(id, inspectedElement);
+
+          return [inspectedElement, type];
+        }
+        break;
+
+      default:
+        // Should never happen.
+        if (__DEV__) {
+          console.error(
+            `Unexpected inspected element response data: "${type}"`,
+          );
+        }
+        break;
+    }
+
+    throw Error(`Unable to inspect element with id "${id}"`);
+  });
+}
+
+export function clearCacheForTests(): void {
+  inspectedElementCache.reset();
+}
diff --git a/packages/react-devtools-shared/src/isArray.js b/packages/react-devtools-shared/src/isArray.js
new file mode 100644
index 00000000000..4e5382ac3d9
--- /dev/null
+++ b/packages/react-devtools-shared/src/isArray.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isArray = Array.isArray;
+
+export default isArray;
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
new file mode 100644
index 00000000000..7b47f6c7afe
--- /dev/null
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import type {LoggerEvent} from 'react-devtools-shared/src/Logger';
+
+import {registerEventLogger} from 'react-devtools-shared/src/Logger';
+import {enableLogger} from 'react-devtools-feature-flags';
+
+let currentLoggingIFrame = null;
+let currentSessionId = null;
+let missedEvents: Array<LoggerEvent> = [];
+
+type LoggerContext = {
+  page_url: ?string,
+};
+
+export function registerDevToolsEventLogger(
+  surface: string,
+  fetchAdditionalContext?:
+    | (() => LoggerContext)
+    | (() => Promise<LoggerContext>),
+): void {
+  async function logEvent(event: LoggerEvent) {
+    if (enableLogger) {
+      if (currentLoggingIFrame != null && currentSessionId != null) {
+        const {metadata, ...eventWithoutMetadata} = event;
+        const additionalContext: LoggerContext | {} =
+          fetchAdditionalContext != null ? await fetchAdditionalContext() : {};
+
+        currentLoggingIFrame?.contentWindow?.postMessage(
+          {
+            source: 'react-devtools-logging',
+            event: eventWithoutMetadata,
+            context: {
+              ...additionalContext,
+              metadata: metadata != null ? JSON.stringify(metadata) : '',
+              session_id: currentSessionId,
+              surface,
+              version: process.env.DEVTOOLS_VERSION,
+            },
+          },
+          '*',
+        );
+      } else {
+        missedEvents.push(event);
+      }
+    }
+  }
+
+  function handleLoggingIFrameLoaded(iframe: HTMLIFrameElement) {
+    currentLoggingIFrame = iframe;
+
+    if (missedEvents.length > 0) {
+      missedEvents.forEach(event => logEvent(event));
+      missedEvents = [];
+    }
+  }
+
+  // If logger is enabled, register a logger that captures logged events
+  // and render iframe where the logged events will be reported to
+  if (enableLogger) {
+    const loggingUrl = process.env.LOGGING_URL;
+    const body = document.body;
+
+    if (
+      typeof loggingUrl === 'string' &&
+      loggingUrl.length > 0 &&
+      body != null &&
+      currentLoggingIFrame == null
+    ) {
+      registerEventLogger(logEvent);
+      currentSessionId = window.crypto.randomUUID();
+
+      const iframe = document.createElement('iframe');
+
+      iframe.onload = () => handleLoggingIFrameLoaded(iframe);
+      iframe.src = loggingUrl;
+
+      body.appendChild(iframe);
+    }
+  }
+}
diff --git a/packages/react-devtools-shared/src/storage.js b/packages/react-devtools-shared/src/storage.js
new file mode 100644
index 00000000000..63dd5aee3a9
--- /dev/null
+++ b/packages/react-devtools-shared/src/storage.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/symbolicateSource.js b/packages/react-devtools-shared/src/symbolicateSource.js
new file mode 100644
index 00000000000..ebcf161dc96
--- /dev/null
+++ b/packages/react-devtools-shared/src/symbolicateSource.js
@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 SourceMapConsumer from 'react-devtools-shared/src/hooks/SourceMapConsumer';
+
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+
+const symbolicationCache: Map<
+  string,
+  Promise<SourceMappedLocation | null>,
+> = new Map();
+
+export type SourceMappedLocation = {
+  location: ReactFunctionLocation,
+  ignored: boolean, // Whether the file for this location was ignore listed
+};
+
+export function symbolicateSourceWithCache(
+  fetchFileWithCaching: FetchFileWithCaching,
+  sourceURL: string,
+  line: number, // 1-based
+  column: number, // 1-based
+): Promise<SourceMappedLocation | null> {
+  const key = `${sourceURL}:${line}:${column}`;
+  const cachedPromise = symbolicationCache.get(key);
+  if (cachedPromise != null) {
+    return cachedPromise;
+  }
+
+  const promise = symbolicateSource(
+    fetchFileWithCaching,
+    sourceURL,
+    line,
+    column,
+  );
+  symbolicationCache.set(key, promise);
+
+  return promise;
+}
+
+const SOURCE_MAP_ANNOTATION_PREFIX = 'sourceMappingURL=';
+export async function symbolicateSource(
+  fetchFileWithCaching: FetchFileWithCaching,
+  sourceURL: string,
+  lineNumber: number, // 1-based
+  columnNumber: number, // 1-based
+): Promise<SourceMappedLocation | null> {
+  if (!sourceURL || sourceURL.startsWith('<anonymous')) {
+    return null;
+  }
+  const resource = await fetchFileWithCaching(sourceURL).catch(() => null);
+  if (resource == null) {
+    return null;
+  }
+
+  const resourceLines = resource.split(/[\r\n]+/);
+  for (let i = resourceLines.length - 1; i >= 0; --i) {
+    const resourceLine = resourceLines[i];
+
+    // In case there is empty last line
+    if (!resourceLine) continue;
+    // Not an annotation? Stop looking for a source mapping url.
+    if (!resourceLine.startsWith('//#')) break;
+
+    if (resourceLine.includes(SOURCE_MAP_ANNOTATION_PREFIX)) {
+      const sourceMapAnnotationStartIndex = resourceLine.indexOf(
+        SOURCE_MAP_ANNOTATION_PREFIX,
+      );
+      const sourceMapAt = resourceLine.slice(
+        sourceMapAnnotationStartIndex + SOURCE_MAP_ANNOTATION_PREFIX.length,
+        resourceLine.length,
+      );
+
+      // Compute the absolute source map URL. If the base URL is invalid, gracefully bail.
+      let sourceMapURL;
+      try {
+        sourceMapURL = new URL(sourceMapAt, sourceURL).toString();
+      } catch (e) {
+        // Fallback: try if sourceMapAt is already an absolute URL; otherwise give up.
+        try {
+          sourceMapURL = new URL(sourceMapAt).toString();
+        } catch (_e) {
+          return null;
+        }
+      }
+      const sourceMap = await fetchFileWithCaching(sourceMapURL).catch(
+        () => null,
+      );
+      if (sourceMap != null) {
+        try {
+          const parsedSourceMap = JSON.parse(sourceMap);
+          const consumer = SourceMapConsumer(parsedSourceMap);
+          const functionName = ''; // TODO: Parse function name from sourceContent.
+          const {
+            sourceURL: possiblyURL,
+            line,
+            column: columnZeroBased,
+            ignored,
+          } = consumer.originalPositionFor({
+            lineNumber, // 1-based
+            columnNumber, // 1-based
+          });
+
+          const column = columnZeroBased + 1;
+
+          if (possiblyURL === null) {
+            return null;
+          }
+          try {
+            // sourceMapURL = https://react.dev/script.js.map
+            void new URL(possiblyURL); // test if it is a valid URL
+
+            return {
+              location: [functionName, possiblyURL, line, column],
+              ignored,
+            };
+          } catch (e) {
+            // This is not valid URL
+            if (
+              // sourceMapURL = /file
+              possiblyURL.startsWith('/') ||
+              // sourceMapURL = C:\\...
+              possiblyURL.slice(1).startsWith(':\\\\')
+            ) {
+              // This is an absolute path
+              return {
+                location: [functionName, possiblyURL, line, column],
+                ignored,
+              };
+            }
+
+            // This is a relative path
+            // possiblyURL = x.js.map, sourceMapURL = https://react.dev/script.js.map
+            const absoluteSourcePath = new URL(
+              possiblyURL,
+              sourceMapURL,
+            ).toString();
+            return {
+              location: [functionName, absoluteSourcePath, line, column],
+              ignored,
+            };
+          }
+        } catch (e) {
+          return null;
+        }
+      }
+
+      return null;
+    }
+  }
+
+  return null;
+}
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
new file mode 100644
index 00000000000..c84ed2d3647
--- /dev/null
+++ b/packages/react-devtools-shared/src/utils.js
@@ -0,0 +1,1341 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 LRU from 'lru-cache';
+import {
+  REACT_CONSUMER_TYPE,
+  REACT_CONTEXT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_ELEMENT_TYPE,
+  REACT_LEGACY_ELEMENT_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+} from 'shared/ReactSymbols';
+import {
+  TREE_OPERATION_ADD,
+  TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
+  TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_SET_SUBTREE_MODE,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
+  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
+  LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+  LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+  SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+  SESSION_STORAGE_RECORD_TIMELINE_KEY,
+  SUSPENSE_TREE_OPERATION_ADD,
+  SUSPENSE_TREE_OPERATION_REMOVE,
+  SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
+  SUSPENSE_TREE_OPERATION_RESIZE,
+  SUSPENSE_TREE_OPERATION_SUSPENDERS,
+} from './constants';
+import {
+  ComponentFilterActivitySlice,
+  ComponentFilterElementType,
+  ComponentFilterLocation,
+  ElementTypeHostComponent,
+} from './frontend/types';
+import {
+  ElementTypeRoot,
+  ElementTypeClass,
+  ElementTypeForwardRef,
+  ElementTypeFunction,
+  ElementTypeMemo,
+  ElementTypeVirtual,
+} from 'react-devtools-shared/src/frontend/types';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+  sessionStorageGetItem,
+  sessionStorageRemoveItem,
+  sessionStorageSetItem,
+} from 'react-devtools-shared/src/storage';
+import {meta} from './hydration';
+import isArray from './isArray';
+
+import type {
+  ComponentFilter,
+  ElementType,
+  SerializedElement as SerializedElementFrontend,
+  LRUCache,
+} from 'react-devtools-shared/src/frontend/types';
+import type {
+  ProfilingSettings,
+  SerializedElement as SerializedElementBackend,
+} from 'react-devtools-shared/src/backend/types';
+import {isSynchronousXHRSupported} from './backend/utils';
+
+// $FlowFixMe[method-unbinding]
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
+
+// On large trees, encoding takes significant time.
+// Try to reuse the already encoded strings.
+const encodedStringCache: LRUCache<string, Array<number>> = new LRU({
+  max: 1000,
+});
+
+// Previously, the type of `Context.Provider`.
+const LEGACY_REACT_PROVIDER_TYPE: symbol = Symbol.for('react.provider');
+
+export function alphaSortKeys(
+  a: string | number | symbol,
+  b: string | number | symbol,
+): number {
+  if (a.toString() > b.toString()) {
+    return 1;
+  } else if (b.toString() > a.toString()) {
+    return -1;
+  } else {
+    return 0;
+  }
+}
+
+export function getAllEnumerableKeys(
+  obj: Object,
+): Set<string | number | symbol> {
+  const keys = new Set<string | number | symbol>();
+  let current = obj;
+  while (current != null) {
+    const currentKeys = [
+      ...Object.keys(current),
+      ...Object.getOwnPropertySymbols(current),
+    ];
+    const descriptors = Object.getOwnPropertyDescriptors(current);
+    currentKeys.forEach(key => {
+      // $FlowFixMe[incompatible-type]: key can be a Symbol https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+      if (descriptors[key].enumerable) {
+        keys.add(key);
+      }
+    });
+    current = Object.getPrototypeOf(current);
+  }
+  return keys;
+}
+
+// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
+export function getWrappedDisplayName(
+  outerType: mixed,
+  innerType: any,
+  wrapperName: string,
+  fallbackName?: string,
+): string {
+  const displayName = (outerType: any)?.displayName;
+  return (
+    displayName || `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
+  );
+}
+
+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 utfDecodeStringWithRanges(
+  array: Array<number>,
+  left: number,
+  right: number,
+): string {
+  let string = '';
+  for (let i = left; i <= right; i++) {
+    string += String.fromCodePoint(array[i]);
+  }
+  return string;
+}
+
+function surrogatePairToCodePoint(
+  charCode1: number,
+  charCode2: number,
+): number {
+  return ((charCode1 & 0x3ff) << 10) + (charCode2 & 0x3ff) + 0x10000;
+}
+
+// Credit for this encoding approach goes to Tim Down:
+// https://stackoverflow.com/questions/4877326/how-can-i-tell-if-a-string-contains-multibyte-characters-in-javascript
+export function utfEncodeString(string: string): Array<number> {
+  const cached = encodedStringCache.get(string);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const encoded = [];
+  let i = 0;
+  let charCode;
+  while (i < string.length) {
+    charCode = string.charCodeAt(i);
+    // Handle multibyte unicode characters (like emoji).
+    if ((charCode & 0xf800) === 0xd800) {
+      encoded.push(surrogatePairToCodePoint(charCode, string.charCodeAt(++i)));
+    } else {
+      encoded.push(charCode);
+    }
+    ++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: Array<null | string> = [
+    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 = utfDecodeStringWithRanges(
+      operations,
+      i,
+      i + nextLength - 1,
+    );
+    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++; // isStrictModeCompliant
+          i++; // supportsProfiling
+          i++; // supportsStrictMode
+          i++; // hasOwnerMetadata
+        } else {
+          const parentID = ((operations[i]: any): number);
+          i++;
+
+          i++; // ownerID
+
+          const displayNameStringID = operations[i];
+          const displayName = stringTable[displayNameStringID];
+          i++;
+
+          i++; // key
+          i++; // name
+
+          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_REMOVE_ROOT: {
+        i += 1;
+
+        logs.push(`Remove root ${rootID}`);
+        break;
+      }
+      case TREE_OPERATION_SET_SUBTREE_MODE: {
+        const id = operations[i + 1];
+        const mode = operations[i + 2];
+
+        i += 3;
+
+        logs.push(`Mode ${mode} set for subtree with root ${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;
+      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS: {
+        const id = operations[i + 1];
+        const numErrors = operations[i + 2];
+        const numWarnings = operations[i + 3];
+
+        i += 4;
+
+        logs.push(
+          `Node ${id} has ${numErrors} errors and ${numWarnings} warnings`,
+        );
+        break;
+      }
+      case SUSPENSE_TREE_OPERATION_ADD: {
+        const fiberID = operations[i + 1];
+        const parentID = operations[i + 2];
+        const nameStringID = operations[i + 3];
+        const isSuspended = operations[i + 4];
+        const numRects = operations[i + 5];
+
+        i += 6;
+
+        const name = stringTable[nameStringID];
+        let rects: string;
+        if (numRects === -1) {
+          rects = 'null';
+        } else {
+          rects = '[';
+          for (let rectIndex = 0; rectIndex < numRects; rectIndex++) {
+            const offset = i + rectIndex * 4;
+            const x = operations[offset + 0];
+            const y = operations[offset + 1];
+            const width = operations[offset + 2];
+            const height = operations[offset + 3];
+
+            if (rectIndex > 0) {
+              rects += ', ';
+            }
+            rects += `(${x}, ${y}, ${width}, ${height})`;
+
+            i += 4;
+          }
+          rects += ']';
+        }
+
+        logs.push(
+          `Add suspense node ${fiberID} (${String(name)},rects={${rects}}) under ${parentID} suspended ${isSuspended}`,
+        );
+        break;
+      }
+      case SUSPENSE_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 suspense node ${id}`);
+        }
+
+        break;
+      }
+      case SUSPENSE_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 suspense node ${id} children ${children.join(',')}`,
+        );
+        break;
+      }
+      case SUSPENSE_TREE_OPERATION_RESIZE: {
+        const id = ((operations[i + 1]: any): number);
+        const numRects = ((operations[i + 2]: any): number);
+        i += 3;
+
+        if (numRects === -1) {
+          logs.push(`Resize suspense node ${id} to null`);
+        } else {
+          let line = `Resize suspense node ${id} to [`;
+          for (let rectIndex = 0; rectIndex < numRects; rectIndex++) {
+            const x = operations[i + 0];
+            const y = operations[i + 1];
+            const width = operations[i + 2];
+            const height = operations[i + 3];
+
+            if (rectIndex > 0) {
+              line += ', ';
+            }
+            line += `(${x}, ${y}, ${width}, ${height})`;
+
+            i += 4;
+          }
+          logs.push(line + ']');
+        }
+
+        break;
+      }
+      case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
+        i++;
+        const changeLength = ((operations[i++]: any): number);
+
+        for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
+          const id = operations[i++];
+          const hasUniqueSuspenders = operations[i++] === 1;
+          const endTime = operations[i++] / 1000;
+          const isSuspended = operations[i++] === 1;
+          const environmentNamesLength = operations[i++];
+          i += environmentNamesLength;
+          logs.push(
+            `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`,
+          );
+        }
+
+        break;
+      }
+      case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
+        i++;
+        const activitySliceIDChange = operations[i + 1];
+        logs.push(
+          activitySliceIDChange === 0
+            ? 'Reset applied activity slice'
+            : 'Applied activity slice change to ' + activitySliceIDChange,
+        );
+        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_COMPONENT_FILTER_PREFERENCES_KEY,
+    );
+    if (raw != null) {
+      const parsedFilters: Array<ComponentFilter> = JSON.parse(raw);
+      return persistableComponentFilters(parsedFilters);
+    }
+  } catch (error) {}
+  return getDefaultComponentFilters();
+}
+
+export function setSavedComponentFilters(
+  componentFilters: Array<ComponentFilter>,
+): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
+    JSON.stringify(persistableComponentFilters(componentFilters)),
+  );
+}
+
+export function persistableComponentFilters(
+  componentFilters: Array<ComponentFilter>,
+): Array<ComponentFilter> {
+  // This is just an additional check to preserve the previous state
+  // Filters can be stored on the backend side or in user land (in a window object)
+  if (!Array.isArray(componentFilters)) {
+    return componentFilters;
+  }
+
+  return componentFilters.filter(f => {
+    return (
+      // Following __debugSource removal from Fiber, the new approach for finding the source location
+      // of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames
+      // To find the original location, React DevTools will perform symbolication, source maps are required for that.
+      // In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily.
+      // Eager symbolication can become quite expensive for large applications.
+      f.type !== ComponentFilterLocation &&
+      // Activity slice filters are based on DevTools instance IDs which do not persist across sessions.
+      f.type !== ComponentFilterActivitySlice
+    );
+  });
+}
+
+const vscodeFilepath = 'vscode://file/{path}:{line}:{column}';
+
+export function getDefaultPreset(): 'custom' | 'vscode' {
+  return typeof process.env.EDITOR_URL === 'string' ? 'custom' : 'vscode';
+}
+
+export function getDefaultOpenInEditorURL(): string {
+  return typeof process.env.EDITOR_URL === 'string'
+    ? process.env.EDITOR_URL
+    : vscodeFilepath;
+}
+
+export function getOpenInEditorURL(): string {
+  try {
+    const rawPreset = localStorageGetItem(
+      LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+    );
+    switch (rawPreset) {
+      case '"vscode"':
+        return vscodeFilepath;
+    }
+    const raw = localStorageGetItem(LOCAL_STORAGE_OPEN_IN_EDITOR_URL);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return getDefaultOpenInEditorURL();
+}
+
+export function getAlwaysOpenInEditor(): boolean {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR);
+    return raw === 'true';
+  } catch (error) {}
+  return false;
+}
+
+type ParseElementDisplayNameFromBackendReturn = {
+  formattedDisplayName: string | null,
+  hocDisplayNames: Array<string> | null,
+  compiledWithForget: boolean,
+};
+export function parseElementDisplayNameFromBackend(
+  displayName: string | null,
+  type: ElementType,
+): ParseElementDisplayNameFromBackendReturn {
+  if (displayName === null) {
+    return {
+      formattedDisplayName: null,
+      hocDisplayNames: null,
+      compiledWithForget: false,
+    };
+  }
+
+  if (displayName.startsWith('Forget(')) {
+    const displayNameWithoutForgetWrapper = displayName.slice(
+      7,
+      displayName.length - 1,
+    );
+
+    const {formattedDisplayName, hocDisplayNames} =
+      parseElementDisplayNameFromBackend(displayNameWithoutForgetWrapper, type);
+    return {formattedDisplayName, hocDisplayNames, compiledWithForget: true};
+  }
+
+  let hocDisplayNames = null;
+  switch (type) {
+    case ElementTypeClass:
+    case ElementTypeForwardRef:
+    case ElementTypeFunction:
+    case ElementTypeMemo:
+    case ElementTypeVirtual:
+      if (displayName.indexOf('(') >= 0) {
+        const matches = displayName.match(/[^()]+/g);
+        if (matches != null) {
+          // $FlowFixMe[incompatible-type]
+          displayName = matches.pop();
+          hocDisplayNames = matches;
+        }
+      }
+      break;
+    default:
+      break;
+  }
+
+  return {
+    // $FlowFixMe[incompatible-return]
+    formattedDisplayName: displayName,
+    hocDisplayNames,
+    compiledWithForget: false,
+  };
+}
+
+// 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 (const attribute in prev) {
+    if (!(attribute in next)) {
+      return true;
+    }
+  }
+  for (const 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 deletePathInObject(
+  object: Object,
+  path: Array<string | number>,
+) {
+  const length = path.length;
+  const last = path[length - 1];
+  if (object != null) {
+    const parent = getInObject(object, path.slice(0, length - 1));
+    if (parent) {
+      if (isArray(parent)) {
+        parent.splice(((last: any): number), 1);
+      } else {
+        delete parent[last];
+      }
+    }
+  }
+}
+
+export function renamePathInObject(
+  object: Object,
+  oldPath: Array<string | number>,
+  newPath: Array<string | number>,
+) {
+  const length = oldPath.length;
+  if (object != null) {
+    const parent = getInObject(object, oldPath.slice(0, length - 1));
+    if (parent) {
+      const lastOld = oldPath[length - 1];
+      const lastNew = newPath[length - 1];
+      parent[lastNew] = parent[lastOld];
+      if (isArray(parent)) {
+        parent.splice(((lastOld: any): number), 1);
+      } else {
+        delete parent[lastOld];
+      }
+    }
+  }
+}
+
+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'
+  | 'class_instance'
+  | 'data_view'
+  | 'date'
+  | 'error'
+  | 'function'
+  | 'html_all_collection'
+  | 'html_element'
+  | 'infinity'
+  | 'iterator'
+  | 'opaque_iterator'
+  | 'nan'
+  | 'null'
+  | 'number'
+  | 'thenable'
+  | 'object'
+  | 'react_element'
+  | 'react_lazy'
+  | 'regexp'
+  | 'string'
+  | 'symbol'
+  | 'typed_array'
+  | 'undefined'
+  | 'unknown';
+
+function isError(data: Object): boolean {
+  // If it doesn't event look like an error, it won't be an actual error.
+  if ('name' in data && 'message' in data) {
+    while (data) {
+      // $FlowFixMe[method-unbinding]
+      if (Object.prototype.toString.call(data) === '[object Error]') {
+        return true;
+      }
+      data = Object.getPrototypeOf(data);
+    }
+  }
+
+  return false;
+}
+
+/**
+ * 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 (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':
+      switch (data.$$typeof) {
+        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
+          return 'react_element';
+        case REACT_LAZY_TYPE:
+          return 'react_lazy';
+      }
+      if (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') {
+        const iterator = data[Symbol.iterator]();
+        if (!iterator) {
+          // Proxies might break assumptoins about iterators.
+          // See github.com/facebook/react/issues/21654
+        } else {
+          return iterator === data ? 'opaque_iterator' : 'iterator';
+        }
+      } else if (data.constructor && data.constructor.name === 'RegExp') {
+        return 'regexp';
+      } else if (typeof data.then === 'function') {
+        return 'thenable';
+      } else if (isError(data)) {
+        return 'error';
+      } else {
+        // $FlowFixMe[method-unbinding]
+        const toStringValue = Object.prototype.toString.call(data);
+        if (toStringValue === '[object Date]') {
+          return 'date';
+        } else if (toStringValue === '[object HTMLAllCollection]') {
+          return 'html_all_collection';
+        }
+      }
+
+      if (!isPlainObject(data)) {
+        return 'class_instance';
+      }
+
+      return 'object';
+    case 'string':
+      return 'string';
+    case 'symbol':
+      return 'symbol';
+    case 'undefined':
+      if (
+        // $FlowFixMe[method-unbinding]
+        Object.prototype.toString.call(data) === '[object HTMLAllCollection]'
+      ) {
+        return 'html_all_collection';
+      }
+      return 'undefined';
+    default:
+      return 'unknown';
+  }
+}
+
+// Fork of packages/react-is/src/ReactIs.js:30, but with legacy element type
+// Which has been changed in https://github.com/facebook/react/pull/28813
+function typeOfWithLegacyElementSymbol(object: any): mixed {
+  if (typeof object === 'object' && object !== null) {
+    const $$typeof = object.$$typeof;
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+      case REACT_LEGACY_ELEMENT_TYPE:
+        const type = object.type;
+
+        switch (type) {
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+          case REACT_SUSPENSE_LIST_TYPE:
+          case REACT_VIEW_TRANSITION_TYPE:
+            return type;
+          default:
+            const $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+                return $$typeofType;
+              case REACT_CONSUMER_TYPE:
+                return $$typeofType;
+              // Fall through
+              default:
+                return $$typeof;
+            }
+        }
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+}
+
+export function getDisplayNameForReactElement(
+  element: React$Element<any>,
+): string | null {
+  const elementType = typeOfWithLegacyElementSymbol(element);
+  switch (elementType) {
+    case REACT_CONSUMER_TYPE:
+      return 'ContextConsumer';
+    case LEGACY_REACT_PROVIDER_TYPE:
+      return 'ContextProvider';
+    case REACT_CONTEXT_TYPE:
+      return 'Context';
+    case REACT_FORWARD_REF_TYPE:
+      return 'ForwardRef';
+    case REACT_FRAGMENT_TYPE:
+      return 'Fragment';
+    case REACT_LAZY_TYPE:
+      return 'Lazy';
+    case REACT_MEMO_TYPE:
+      return 'Memo';
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+    case REACT_PROFILER_TYPE:
+      return 'Profiler';
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+    case REACT_VIEW_TRANSITION_TYPE:
+      return 'ViewTransition';
+    case REACT_TRACING_MARKER_TYPE:
+      return 'TracingMarker';
+    default:
+      const {type} = element;
+      if (typeof type === 'string') {
+        return type;
+      } else if (typeof type === 'function') {
+        return getDisplayName(type, 'Anonymous');
+      } else if (type != null) {
+        return 'NotImplementedInDevtools';
+      } 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.slice(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':
+      if (typeof data.name === 'function' || data.name === '') {
+        return '() => {}';
+      }
+      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 'react_lazy':
+      // To avoid actually initialize a lazy to cause a side-effect we make some assumptions
+      // about the structure of the payload even though that's not really part of the contract.
+      // In practice, this is really just coming from React.lazy helper or Flight.
+      const payload = data._payload;
+      if (payload !== null && typeof payload === 'object') {
+        if (payload._status === 0) {
+          // React.lazy constructor pending
+          return `pending lazy()`;
+        }
+        if (payload._status === 1 && payload._result != null) {
+          // React.lazy constructor fulfilled
+          if (showFormattedValue) {
+            const formatted = formatDataForPreview(
+              payload._result.default,
+              false,
+            );
+            return `fulfilled lazy() {${truncateForDisplay(formatted)}}`;
+          } else {
+            return `fulfilled lazy() {…}`;
+          }
+        }
+        if (payload._status === 2) {
+          // React.lazy constructor rejected
+          if (showFormattedValue) {
+            const formatted = formatDataForPreview(payload._result, false);
+            return `rejected lazy() {${truncateForDisplay(formatted)}}`;
+          } else {
+            return `rejected lazy() {…}`;
+          }
+        }
+        if (payload.status === 'pending' || payload.status === 'blocked') {
+          // React Flight pending
+          return `pending lazy()`;
+        }
+        if (payload.status === 'fulfilled') {
+          // React Flight fulfilled
+          if (showFormattedValue) {
+            const formatted = formatDataForPreview(payload.value, false);
+            return `fulfilled lazy() {${truncateForDisplay(formatted)}}`;
+          } else {
+            return `fulfilled lazy() {…}`;
+          }
+        }
+        if (payload.status === 'rejected') {
+          // React Flight rejected
+          if (showFormattedValue) {
+            const formatted = formatDataForPreview(payload.reason, false);
+            return `rejected lazy() {${truncateForDisplay(formatted)}}`;
+          } else {
+            return `rejected lazy() {…}`;
+          }
+        }
+      }
+      // Some form of uninitialized
+      return 'lazy()';
+    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 (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 'opaque_iterator': {
+      return data[Symbol.toStringTag];
+    }
+    case 'date':
+      return data.toString();
+    case 'class_instance':
+      try {
+        let resolvedConstructorName = data.constructor.name;
+        if (typeof resolvedConstructorName === 'string') {
+          return resolvedConstructorName;
+        }
+
+        resolvedConstructorName = Object.getPrototypeOf(data).constructor.name;
+        if (typeof resolvedConstructorName === 'string') {
+          return resolvedConstructorName;
+        }
+
+        try {
+          return truncateForDisplay(String(data));
+        } catch (error) {
+          return 'unserializable';
+        }
+      } catch (error) {
+        return 'unserializable';
+      }
+    case 'thenable':
+      let displayName: string;
+      if (isPlainObject(data)) {
+        displayName = 'Thenable';
+      } else {
+        let resolvedConstructorName = data.constructor.name;
+        if (typeof resolvedConstructorName !== 'string') {
+          resolvedConstructorName =
+            Object.getPrototypeOf(data).constructor.name;
+        }
+        if (typeof resolvedConstructorName === 'string') {
+          displayName = resolvedConstructorName;
+        } else {
+          displayName = 'Thenable';
+        }
+      }
+      switch (data.status) {
+        case 'pending':
+          return `pending ${displayName}`;
+        case 'fulfilled':
+          if (showFormattedValue) {
+            const formatted = formatDataForPreview(data.value, false);
+            return `fulfilled ${displayName} {${truncateForDisplay(formatted)}}`;
+          } else {
+            return `fulfilled ${displayName} {…}`;
+          }
+        case 'rejected':
+          if (showFormattedValue) {
+            const formatted = formatDataForPreview(data.reason, false);
+            return `rejected ${displayName} {${truncateForDisplay(formatted)}}`;
+          } else {
+            return `rejected ${displayName} {…}`;
+          }
+        default:
+          return displayName;
+      }
+    case 'object':
+      if (showFormattedValue) {
+        const keys = Array.from(getAllEnumerableKeys(data)).sort(alphaSortKeys);
+
+        let formatted = '';
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i];
+          if (i > 0) {
+            formatted += ', ';
+          }
+          formatted += `${key.toString()}: ${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 'error':
+      return truncateForDisplay(String(data));
+    case 'boolean':
+    case 'number':
+    case 'infinity':
+    case 'nan':
+    case 'null':
+    case 'undefined':
+      return String(data);
+    default:
+      try {
+        return truncateForDisplay(String(data));
+      } catch (error) {
+        return 'unserializable';
+      }
+  }
+}
+
+// Basically checking that the object only has Object in its prototype chain
+export const isPlainObject = (object: Object): boolean => {
+  const objectPrototype = Object.getPrototypeOf(object);
+  if (!objectPrototype) return true;
+
+  const objectParentPrototype = Object.getPrototypeOf(objectPrototype);
+  return !objectParentPrototype;
+};
+
+export function backendToFrontendSerializedElementMapper(
+  element: SerializedElementBackend,
+): SerializedElementFrontend {
+  const {formattedDisplayName, hocDisplayNames, compiledWithForget} =
+    parseElementDisplayNameFromBackend(element.displayName, element.type);
+
+  return {
+    ...element,
+    displayName: formattedDisplayName,
+    hocDisplayNames,
+    compiledWithForget,
+  };
+}
+
+/**
+ * Should be used when treating url as a Chrome Resource URL.
+ */
+export function normalizeUrlIfValid(url: string): string {
+  try {
+    // TODO: Chrome will use the basepath to create a Resource URL.
+    return new URL(url).toString();
+  } catch {
+    // Giving up if it's not a valid URL without basepath
+    return url;
+  }
+}
+
+export function getIsReloadAndProfileSupported(): boolean {
+  // 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) {}
+
+  return isBackendStorageAPISupported && isSynchronousXHRSupported();
+}
+
+// Expected to be used only by browser extension and react-devtools-inline
+export function getIfReloadedAndProfiling(): boolean {
+  return (
+    sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+  );
+}
+
+export function getProfilingSettings(): ProfilingSettings {
+  return {
+    recordChangeDescriptions:
+      sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
+      'true',
+    recordTimeline:
+      sessionStorageGetItem(SESSION_STORAGE_RECORD_TIMELINE_KEY) === 'true',
+  };
+}
+
+export function onReloadAndProfile(
+  recordChangeDescriptions: boolean,
+  recordTimeline: boolean,
+): void {
+  sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
+  sessionStorageSetItem(
+    SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+    recordChangeDescriptions ? 'true' : 'false',
+  );
+  sessionStorageSetItem(
+    SESSION_STORAGE_RECORD_TIMELINE_KEY,
+    recordTimeline ? 'true' : 'false',
+  );
+}
+
+export function onReloadAndProfileFlagsReset(): void {
+  sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);
+  sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);
+  sessionStorageRemoveItem(SESSION_STORAGE_RECORD_TIMELINE_KEY);
+}
+
+export function unionOfTwoArrays<T>(a: Array<T>, b: Array<T>): Array<T> {
+  let result = a;
+  for (let i = 0; i < b.length; i++) {
+    const value = b[i];
+    if (a.indexOf(value) === -1) {
+      if (result === a) {
+        // Lazily copy
+        result = a.slice(0);
+      }
+      result.push(value);
+    }
+  }
+  return result;
+}
diff --git a/packages/react-devtools-shell/README.md b/packages/react-devtools-shell/README.md
new file mode 100644
index 00000000000..0a78ebc86b1
--- /dev/null
+++ b/packages/react-devtools-shell/README.md
@@ -0,0 +1,14 @@
+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's local development section](../react-devtools-inline/README.md#local-development).
+
+The test harness can then be run as follows:
+```sh
+cd packages/react-devtools-shell
+
+yarn start
+```
+
+Once you set both up, you can view the test harness with inlined devtools in browser at http://localhost:8080/
diff --git a/packages/react-devtools-shell/constants.js b/packages/react-devtools-shell/constants.js
new file mode 100644
index 00000000000..aa99fff6847
--- /dev/null
+++ b/packages/react-devtools-shell/constants.js
@@ -0,0 +1,5 @@
+const SUCCESSFUL_COMPILATION_MESSAGE = 'Compiled successfully.';
+
+module.exports = {
+  SUCCESSFUL_COMPILATION_MESSAGE,
+};
diff --git a/packages/react-devtools-shell/e2e-regression.html b/packages/react-devtools-shell/e2e-regression.html
new file mode 100644
index 00000000000..25ecd75ffe7
--- /dev/null
+++ b/packages/react-devtools-shell/e2e-regression.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        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;
+      }
+      #iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 50vh;
+      }
+      #devtools {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 50vh;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe id="iframe"></iframe>
+    <div id="devtools"></div>
+    <script src="dist/e2e-devtools-regression.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/react-devtools-shell/e2e.html b/packages/react-devtools-shell/e2e.html
new file mode 100644
index 00000000000..93d8f2f3f81
--- /dev/null
+++ b/packages/react-devtools-shell/e2e.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        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;
+      }
+      #iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 50vh;
+      }
+      #devtools {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 50vh;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe id="iframe"></iframe>
+    <div id="devtools"></div>
+    <script src="dist/e2e-devtools.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/react-devtools-shell/index.html b/packages/react-devtools-shell/index.html
new file mode 100644
index 00000000000..87352e2f82f
--- /dev/null
+++ b/packages/react-devtools-shell/index.html
@@ -0,0 +1,215 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf8">
+  <title>React DevTools</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    #panes {
+      display: grid;
+      gap: 5px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    #divider {
+      position: absolute;
+      z-index: 10000002;
+      background-color: #ccc;
+      transition: background-color 0.2s;
+    }
+
+    #divider:hover,
+    #divider.dragging {
+      background-color: #aaa;
+    }
+
+    #divider.horizontal-divider {
+      width: 100%;
+      height: 5px;
+      cursor: row-resize;
+    }
+
+    #divider.vertical-divider {
+      width: 5px;
+      height: 100%;
+      cursor: col-resize;
+    }
+
+    #target {
+      height: 100%;
+      width: 100%;
+      border: none;
+      overflow-y: auto;
+    }
+
+    #devtools {
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+      z-index: 10000001;
+    }
+
+    body {
+      height: 100vh;
+      width: 100vw;
+      display: grid;
+      grid-template-rows: auto 1fr;
+      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="/multi.html">multi DevTools</a>
+      |
+      <a href="/e2e.html">e2e tests</a>
+      |
+      <a href="/e2e-regression.html">e2e regression tests</a>
+      |
+      <a href="/perf-regression.html">perf regression tests</a>
+    </span>
+
+    <label style="margin-left: 4px">
+      Layout:
+      <select id="layout">
+        <option value="leftright">Left/Right Split</option>
+        <option value="topbottom">Top/Bottom Split</option>
+      </select></label>
+  </div>
+
+  <div id="panes">
+    <!-- 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>
+
+    <!-- Draggable divider between panes -->
+    <div id="divider"></div>
+
+    <!-- DevTools frontend UI (shells/dev/src) renders here -->
+    <div id="devtools"></div>
+  </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/app-devtools.js"></script>
+  <script type="module">
+    let layoutType = 'leftright';
+    let splitRatio = 0.5;
+    let isDragging = false;
+
+    // handle layout changes
+    const layout = document.getElementById('layout');
+    function setLayout(layoutType, splitRatio) {
+      const panes = document.getElementById('panes');
+      if (layoutType === 'topbottom') {
+        panes.style.setProperty('--top-row-height', `${splitRatio * 100}%`);
+        panes.style.gridTemplateRows = "var(--top-row-height) 1fr";
+        panes.style.gridTemplateColumns = null;
+      } else if (layoutType === 'leftright') {
+        panes.style.setProperty('--left-column-width', `${splitRatio * 100}%`);
+        panes.style.gridTemplateRows = null;
+        panes.style.gridTemplateColumns = "var(--left-column-width) 1fr";
+      }
+    }
+    layout.addEventListener('change', () => {
+      layoutType = layout.value;
+      setLayout(layoutType, splitRatio);
+      updateDividerPosition(); // Ensure divider updates when layout changes
+    });
+
+    // handle changing the split ratio
+    const divider = document.getElementById('divider');
+    function updateDividerPosition() {
+      if (layoutType === 'topbottom') {
+        // For top/bottom layout, divider should be horizontal (spanning across)
+        divider.className = 'horizontal-divider';
+        divider.style.top = `calc(${splitRatio * 100}%)`;
+        divider.style.left = '0';
+      } else {
+        // For left/right layout, divider should be vertical (spanning down)
+        divider.className = 'vertical-divider';
+        divider.style.left = `calc(${splitRatio * 100}%)`;
+        divider.style.top = '0';
+      }
+    }
+
+    // Add event listeners for dragging
+    divider.addEventListener('mousedown', (e) => {
+      isDragging = true;
+      divider.classList.add('dragging');
+
+      // Disable pointer events on the iframe to prevent it from capturing mouse events
+      const iframe = document.getElementById('target');
+      iframe.style.pointerEvents = 'none';
+
+      e.preventDefault(); // Prevent text selection during drag
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isDragging) return;
+
+      const panes = document.getElementById('panes');
+      const rect = panes.getBoundingClientRect();
+
+      if (layoutType === 'topbottom') {
+        // Calculate new split ratio based on vertical position
+        const newRatio = Math.max(0.1, Math.min(0.9, (e.clientY - rect.top) / rect.height));
+        splitRatio = newRatio;
+      } else {
+        // Calculate new split ratio based on horizontal position
+        const newRatio = Math.max(0.1, Math.min(0.9, (e.clientX - rect.left) / rect.width));
+        splitRatio = newRatio;
+      }
+
+      // Update layout and divider position
+      setLayout(layoutType, splitRatio);
+      updateDividerPosition();
+    });
+
+    document.addEventListener('mouseup', () => {
+      if (isDragging) {
+        isDragging = false;
+        divider.classList.remove('dragging');
+
+        // Re-enable pointer events on the iframe
+        const iframe = document.getElementById('target');
+        iframe.style.pointerEvents = 'auto';
+      }
+    });
+
+    // Initialize
+    setLayout(
+      layoutType,
+      splitRatio,
+    );
+    updateDividerPosition();
+  </script>
+</body>
+
+</html>
diff --git a/packages/react-devtools-shell/multi.html b/packages/react-devtools-shell/multi.html
new file mode 100644
index 00000000000..57b25c37607
--- /dev/null
+++ b/packages/react-devtools-shell/multi.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        display: flex;
+        flex-direction: row;
+        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;
+      }
+      .column {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 50%;
+      }
+      .column:first-of-type {
+        border-right: 1px solid #3d424a;
+      }
+      .iframe {
+        height: 50%;
+        flex: 0 0 50%;
+        border: none;
+      }
+      .devtools {
+        height: 50%;
+        flex: 0 0 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="column left-column">
+      <iframe id="iframe-left" class="iframe"></iframe>
+      <div id="devtools-left" class="devtools"></div>
+    </div>
+    <div class="column">
+      <iframe id="iframe-right" class="iframe"></iframe>
+      <div id="devtools-right" class="devtools"></div>
+    </div>
+
+    <script src="dist/multi-devtools.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
new file mode 100644
index 00000000000..999924aefa3
--- /dev/null
+++ b/packages/react-devtools-shell/package.json
@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "name": "react-devtools-shell",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development node ./webpack-server.js"
+  },
+  "dependencies": {
+    "immutable": "^4.0.0-rc.12",
+    "react-native-web": "0.0.0-26873b469",
+    "semver": "^6.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-source": "^7.10.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-flow": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "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": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
+  }
+}
diff --git a/packages/react-devtools-shell/perf-regression.html b/packages/react-devtools-shell/perf-regression.html
new file mode 100644
index 00000000000..27fd87f88dd
--- /dev/null
+++ b/packages/react-devtools-shell/perf-regression.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>React DevTools</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        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;
+      }
+      #iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 60vh;
+      }
+      #devtools {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 40vh;
+      }
+      #load-devtools {
+        margin: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe id="iframe"></iframe>
+    <div id="devtools">
+      <button id="load-devtools">Load DevTools</button>
+    </div>
+    <script src="dist/perf-regression-devtools.js"></script>
+  </body>
+</html>
\ No newline at end of file
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 00000000000..f1369896eda
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment} from 'react';
+
+function wrapWithHoc(Component: () => any, index: number) {
+  function HOC() {
+    return <Component />;
+  }
+
+  const displayName = (Component: any).displayName || Component.name;
+
+  HOC.displayName = `withHoc${index}(${displayName})`;
+  return HOC;
+}
+
+function wrapWithNested(Component: () => any, times: number) {
+  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(): React.Node {
+  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 00000000000..2d4955b5211
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/EditableProps/index.js
@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  Component,
+  forwardRef,
+  Fragment,
+  memo,
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useReducer,
+  useState,
+} from 'react';
+
+const initialData = {foo: 'FOO', bar: 'BAR'};
+
+// $FlowFixMe[missing-local-annot]
+function reducer(state, action: {type: string}) {
+  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: ReactContext<boolean> = BoolContext;
+
+  state: State = {
+    cities: ['San Francisco', 'San Jose'],
+    state: 'California',
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  handleChange = ({target}): any =>
+    this.setState({
+      state: target.value,
+    });
+
+  render(): any {
+    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(): React.Node {
+  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: number, delay: number) {
+  // 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 00000000000..3276639c05e
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  Component,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+} from 'react';
+
+const Context = createContext('abc');
+Context.displayName = 'ExampleContext';
+
+class ClassComponent extends Component<any> {
+  render(): null {
+    return null;
+  }
+}
+
+function FunctionComponent() {
+  return null;
+}
+
+const MemoFunctionComponent = memo(FunctionComponent);
+
+const ForwardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
+  <ClassComponent ref={ref} {...props} />
+));
+const ForwardRefComponent = forwardRef(function NamedInnerFunction(props, ref) {
+  return <ClassComponent ref={ref} {...props} />;
+});
+const ForwardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
+  <ClassComponent ref={ref} {...props} />
+));
+ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
+
+const LazyComponent = lazy(() =>
+  Promise.resolve({
+    default: FunctionComponent,
+  }),
+);
+
+export default function ElementTypes(): React.Node {
+  return (
+    <Profiler id="test" onRender={() => {}}>
+      <Fragment>
+        <Context.Provider value={'def'}>
+          <Context.Consumer>{(value: $FlowFixMe) => null}</Context.Consumer>
+        </Context.Provider>
+        <StrictMode>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ClassComponent />
+            <FunctionComponent />
+            <MemoFunctionComponent />
+            <ForwardRefComponent />
+            <ForwardRefComponentWithAnonymousFunction />
+            <ForwardRefComponentWithCustomDisplayName />
+            <LazyComponent />
+          </Suspense>
+        </StrictMode>
+      </Fragment>
+    </Profiler>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
new file mode 100644
index 00000000000..a87d853ea1b
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment} from 'react';
+
+class ErrorBoundary extends React.Component {
+  state: {hasError: boolean} = {hasError: false};
+
+  static getDerivedStateFromError(error: any): {hasError: boolean} {
+    return {hasError: true};
+  }
+
+  render(): any {
+    const {hasError} = this.state;
+    if (hasError) {
+      return (
+        <div
+          style={{
+            color: 'red',
+            border: '1px solid red',
+            borderRadius: '0.25rem',
+            margin: '0.5rem',
+            padding: '0.5rem',
+          }}>
+          An error was thrown.
+        </div>
+      );
+    }
+
+    const {children} = this.props;
+    return (
+      <div
+        style={{
+          border: '1px solid gray',
+          borderRadius: '0.25rem',
+          margin: '0.5rem',
+          padding: '0.5rem',
+        }}>
+        {children}
+      </div>
+    );
+  }
+}
+
+// $FlowFixMe[missing-local-annot]
+function Component({label}) {
+  return <div>{label}</div>;
+}
+
+export default function ErrorBoundaries(): React.Node {
+  return (
+    <Fragment>
+      <h1>Nested error boundaries demo</h1>
+      <ErrorBoundary>
+        <Component label="Outer component" />
+        <ErrorBoundary>
+          <Component label="Inner component" />
+        </ErrorBoundary>
+      </ErrorBoundary>
+      <ErrorBoundary>
+        <Component label="Neighbour component" />
+      </ErrorBoundary>
+    </Fragment>
+  );
+}
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 00000000000..f90bd6bef12
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Hydration/index.js
@@ -0,0 +1,226 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useDebugValue, useState} from 'react';
+
+const div = document.createElement('div');
+const exampleFunction = () => {};
+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: {},
+  quux: {
+    k: undefined,
+    l: null,
+  },
+};
+
+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;
+}
+
+const unusedPromise = Promise.resolve();
+const usedFulfilledPromise = Promise.resolve();
+const usedFulfilledRichPromise = Promise.resolve({
+  some: {
+    deeply: {
+      nested: {
+        object: {
+          string: 'test',
+          fn: () => {},
+        },
+      },
+    },
+  },
+});
+const usedPendingPromise = new Promise(resolve => {});
+const usedRejectedPromise = Promise.reject(
+  // eslint-disable-next-line react-internal/prod-error-codes
+  new Error('test-error-do-not-surface'),
+);
+
+class DigestError extends Error {
+  digest: string;
+  constructor(message: string, options: any, digest: string) {
+    super(message, options);
+    this.digest = digest;
+  }
+}
+
+export default function Hydration(): React.Node {
+  return (
+    <Fragment>
+      <h1>Hydration</h1>
+      <DehydratableProps
+        html_element={div}
+        fn={exampleFunction}
+        symbol={Symbol('symbol')}
+        react_element={<span />}
+        array_buffer={typedArray.buffer}
+        typed_array={typedArray}
+        date={new Date()}
+        array={arrayOfArrays}
+        object={objectOfObjects}
+        unusedPromise={unusedPromise}
+        usedFulfilledPromise={usedFulfilledPromise}
+        usedFulfilledRichPromise={usedFulfilledRichPromise}
+        usedPendingPromise={usedPendingPromise}
+        usedRejectedPromise={usedRejectedPromise}
+        // eslint-disable-next-line react-internal/prod-error-codes
+        error={new Error('test')}
+        // eslint-disable-next-line react-internal/prod-error-codes
+        errorWithCause={new Error('one', {cause: new TypeError('two')})}
+        errorWithDigest={new DigestError('test', {}, 'some-digest')}
+        // $FlowFixMe[cannot-resolve-name] Flow doesn't know about DOMException
+        domexception={new DOMException('test')}
+      />
+      <DeepHooks />
+    </Fragment>
+  );
+}
+
+function Use({value}: {value: Promise<mixed>}): React.Node {
+  React.use(value);
+  return null;
+}
+
+class IgnoreErrors extends React.Component {
+  state: {hasError: boolean} = {hasError: false};
+  static getDerivedStateFromError(): {hasError: boolean} {
+    return {hasError: true};
+  }
+
+  render(): React.Node {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+function DehydratableProps({array, object}: any) {
+  return (
+    <ul>
+      <li>array: {JSON.stringify(array, null, 2)}</li>
+      <li>object: {JSON.stringify(object, null, 2)}</li>
+      <React.Suspense>
+        <Use value={usedPendingPromise} />
+      </React.Suspense>
+      <React.Suspense>
+        <Use value={usedFulfilledPromise} />
+      </React.Suspense>
+      <React.Suspense>
+        <Use value={usedFulfilledRichPromise} />
+      </React.Suspense>
+      <IgnoreErrors>
+        <React.Suspense>
+          <Use value={usedRejectedPromise} />
+        </React.Suspense>
+      </IgnoreErrors>
+    </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 00000000000..7f3964971cf
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Iframe/index.js
@@ -0,0 +1,71 @@
+/** @flow */
+
+import * as React from 'react';
+import {Fragment} from 'react';
+import {createPortal} from 'react-dom';
+
+export default function Iframe(): React.Node {
+  return (
+    <Fragment>
+      <h2>Iframe</h2>
+      <div>
+        <Frame>
+          <Greeting />
+        </Frame>
+      </div>
+    </Fragment>
+  );
+}
+
+const iframeStyle = {border: '2px solid #eee', height: 80};
+
+// $FlowFixMe[missing-local-annot]
+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 ? 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/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
new file mode 100644
index 00000000000..ddfac6acb4c
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
@@ -0,0 +1,207 @@
+/** @flow */
+
+import * as React from 'react';
+import {Fragment, useEffect, useRef, useState} from 'react';
+
+// $FlowFixMe[missing-local-annot]
+function WarnDuringRender({children = null}) {
+  console.warn('This warning fires during every render');
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function WarnOnMount({children = null}) {
+  useEffect(() => {
+    console.warn('This warning fires on initial mount only');
+  }, []);
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function WarnOnUpdate({children = null}) {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      console.warn('This warning fires on every update');
+    } else {
+      didMountRef.current = true;
+    }
+  });
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function WarnOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.warn('This warning fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorDuringRender({children = null}) {
+  console.error('This error fires during every render');
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorOnMount({children = null}) {
+  useEffect(() => {
+    console.error('This error fires on initial mount only');
+  }, []);
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorOnUpdate({children = null}) {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      console.error('This error fires on every update');
+    } else {
+      didMountRef.current = true;
+    }
+  });
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.error('This error fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorAndWarningDuringRender({children = null}) {
+  console.warn('This warning fires during every render');
+  console.error('This error fires during every render');
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorAndWarningOnMount({children = null}) {
+  useEffect(() => {
+    console.warn('This warning fires on initial mount only');
+    console.error('This error fires on initial mount only');
+  }, []);
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorAndWarningOnUpdate({children = null}) {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (didMountRef.current) {
+      console.warn('This warning fires on every update');
+      console.error('This error fires on every update');
+    } else {
+      didMountRef.current = true;
+    }
+  });
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorAndWarningOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.warn('This warning fires on unmount');
+      console.error('This error fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ReallyLongErrorMessageThatWillCauseTextToBeTruncated({
+  children = null,
+}) {
+  console.error(
+    'This error is a really long error message that should cause the text to be truncated in DevTools',
+  );
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorWithMultipleArgs({children = null}) {
+  console.error('This error', 'passes console', 4, 'arguments');
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ErrorWithStringSubstitutions({children = null}) {
+  console.error('This error uses "%s" substitutions', 'string');
+  return children;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ReactErrorOnHostComponent({children = null}) {
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+// $FlowFixMe[missing-local-annot]
+function DuplicateWarningsAndErrors({children = null}) {
+  console.warn('this warning is logged twice per render');
+  console.warn('this warning is logged twice per render');
+  console.error('this error is logged twice per render');
+  console.error('this error is logged twice per render');
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+// $FlowFixMe[missing-local-annot]
+function MultipleWarningsAndErrors({children = null}) {
+  console.warn('this is the first warning logged');
+  console.warn('this is the second warning logged');
+  console.error('this is the first error logged');
+  console.error('this is the second error logged');
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+// $FlowFixMe[missing-local-annot]
+function ComponentWithMissingKey({children}) {
+  return [<div />];
+}
+
+function ComponentWithSymbolWarning() {
+  console.warn('this is a symbol', Symbol('foo'));
+  console.error('this is a symbol', Symbol.for('bar'));
+  return null;
+}
+
+export default function ErrorsAndWarnings(): React.Node {
+  const [count, setCount] = useState(0);
+  const handleClick = () => setCount(count + 1);
+  return (
+    <Fragment>
+      <h1>Inline warnings</h1>
+      <button onClick={handleClick}>Update {count > 0 ? count : ''}</button>
+      <ComponentWithMissingKey />
+      <WarnDuringRender />
+      <WarnOnMount />
+      <WarnOnUpdate />
+      {count === 0 ? <WarnOnUnmount /> : null}
+      {count === 0 ? <WarnOnMount /> : null}
+      <ErrorDuringRender />
+      <ErrorOnMount />
+      <ErrorOnUpdate />
+      {count === 0 ? <ErrorOnUnmount /> : null}
+      <ErrorAndWarningDuringRender />
+      <ErrorAndWarningOnMount />
+      <ErrorAndWarningOnUpdate />
+      {count === 0 ? <ErrorAndWarningOnUnmount /> : null}
+      <ErrorWithMultipleArgs />
+      <ErrorWithStringSubstitutions />
+      <ReactErrorOnHostComponent />
+      <ReallyLongErrorMessageThatWillCauseTextToBeTruncated />
+      <DuplicateWarningsAndErrors />
+      <MultipleWarningsAndErrors />
+      <ComponentWithSymbolWarning />
+    </Fragment>
+  );
+}
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 00000000000..e918325eb1b
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+const arrayOne: $FlowFixMe = [];
+const arrayTwo: $FlowFixMe = [];
+arrayTwo.push(arrayOne);
+arrayOne.push(arrayTwo);
+
+type ObjectOne = {
+  objectTwo?: ObjectTwo,
+};
+type ObjectTwo = {
+  objectOne: ObjectOne,
+};
+
+const objectOne: ObjectOne = {};
+const objectTwo: ObjectTwo = {objectOne};
+objectOne.objectTwo = objectTwo;
+
+export default function CircularReferences(): React.Node {
+  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 00000000000..ebd2470ac60
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -0,0 +1,370 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {createContext, Component, useContext, useState} from 'react';
+import PropTypes from 'prop-types';
+
+import type {ReactContext} from 'shared/ReactTypes';
+
+function someNamedFunction() {}
+
+function formatContextForDisplay(name: string, value: any | string) {
+  return (
+    <li>
+      {name}: <pre>{JSON.stringify(value, null, 2)}</pre>
+    </li>
+  );
+}
+
+const contextData = {
+  array: ['first', 'second', 'third'],
+  bool: true,
+  func: someNamedFunction,
+  number: 123,
+  object: {outer: {inner: {} as {...}}},
+  string: 'abc',
+  symbol: Symbol.for('symbol'),
+  null: null,
+  undefined: undefined,
+};
+
+class LegacyContextProvider extends Component<any> {
+  static childContextTypes: {
+    array: any,
+    bool: any,
+    func: any,
+    null: any,
+    number: any,
+    object: any,
+    string: any,
+    symbol: any,
+    undefined: any,
+  } = {
+    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(): {
+    array: Array<string>,
+    bool: boolean,
+    func: () => void,
+    null: null,
+    number: number,
+    object: {outer: {inner: {...}}},
+    string: string,
+    symbol: symbol,
+    undefined: void,
+  } {
+    return contextData;
+  }
+
+  render(): any {
+    return this.props.children;
+  }
+}
+
+class LegacyContextConsumer extends Component<any> {
+  static contextTypes: {
+    array: any,
+    bool: any,
+    func: any,
+    null: any,
+    number: any,
+    object: any,
+    string: any,
+    symbol: any,
+    undefined: any,
+  } = {
+    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(): any {
+    return formatContextForDisplay('LegacyContextConsumer', this.context);
+  }
+}
+
+class LegacyContextProviderWithUpdates extends Component<any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {type: 'desktop'};
+  }
+
+  getChildContext(): {type: any} {
+    return {type: this.state.type};
+  }
+
+  // $FlowFixMe[missing-local-annot]
+  handleChange = event => {
+    this.setState({type: event.target.value});
+  };
+
+  render(): any {
+    return (
+      <>
+        <LegacyFunctionalContextConsumer />
+        <div>
+          <input value={this.state.type} onChange={this.handleChange} />
+        </div>
+      </>
+    );
+  }
+}
+
+LegacyContextProviderWithUpdates.childContextTypes = {
+  type: PropTypes.string,
+};
+
+// $FlowFixMe[missing-local-annot]
+function LegacyFunctionalContextConsumer(props: any, context) {
+  return formatContextForDisplay('LegacyFunctionContextConsumer', context.type);
+}
+LegacyFunctionalContextConsumer.contextTypes = {
+  type: PropTypes.string,
+};
+
+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: ReactContext<void> = ModernContext;
+
+  render(): any {
+    return formatContextForDisplay('ModernContextType', this.context);
+  }
+}
+
+function FunctionalContextConsumer() {
+  const value = useContext(StringContext);
+  return formatContextForDisplay('FunctionalContextConsumer', value);
+}
+
+const StringContextWithUpdates = createContext({
+  string: contextData.string,
+  setString: (string: string) => {},
+});
+const StringContextWithUpdates2 = createContext({
+  string2: contextData.string,
+  setString2: (string: string) => {},
+});
+
+function FunctionalContextProviderWithContextUpdates() {
+  const [string, setString] = useState(contextData.string);
+  const [string2, setString2] = useState(contextData.string);
+  const value = {string, setString};
+  const value2 = {string2, setString2};
+
+  return (
+    <StringContextWithUpdates.Provider value={value}>
+      <StringContextWithUpdates2.Provider value={value2}>
+        <FunctionalContextConsumerWithContextUpdates />
+      </StringContextWithUpdates2.Provider>
+    </StringContextWithUpdates.Provider>
+  );
+}
+
+function FunctionalContextConsumerWithContextUpdates() {
+  const {string, setString} = useContext(StringContextWithUpdates);
+  const {string2, setString2} = useContext(StringContextWithUpdates2);
+  const [state, setState] = useState('state');
+
+  // $FlowFixMe[missing-local-annot]
+  const handleChange = e => setString(e.target.value);
+  // $FlowFixMe[missing-local-annot]
+  const handleChange2 = e => setString2(e.target.value);
+
+  return (
+    <>
+      {formatContextForDisplay(
+        'FunctionalContextConsumerWithUpdates',
+        `context: ${string}, context 2: ${string2}`,
+      )}
+      <div>
+        context: <input value={string} onChange={handleChange} />
+      </div>
+      <div>
+        context 2: <input value={string2} onChange={handleChange2} />
+      </div>
+      <div>
+        {state}
+        <div>
+          test state:{' '}
+          <input value={state} onChange={e => setState(e.target.value)} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+class ModernClassContextProviderWithUpdates extends Component<any> {
+  constructor(props: any) {
+    super(props);
+    this.setString = string => {
+      this.setState({string});
+    };
+
+    this.state = {
+      string: contextData.string,
+      setString: this.setString,
+    };
+  }
+
+  render(): any {
+    return (
+      <StringContextWithUpdates.Provider value={this.state}>
+        <ModernClassContextConsumerWithUpdates />
+      </StringContextWithUpdates.Provider>
+    );
+  }
+}
+
+class ModernClassContextConsumerWithUpdates extends Component<any> {
+  render(): any {
+    return (
+      <StringContextWithUpdates.Consumer>
+        {({string, setString}: {string: string, setString: string => void}) => (
+          <>
+            {formatContextForDisplay(
+              'ModernClassContextConsumerWithUpdates',
+              string,
+            )}
+            <input value={string} onChange={e => setString(e.target.value)} />
+          </>
+        )}
+      </StringContextWithUpdates.Consumer>
+    );
+  }
+}
+
+type LegacyContextState = {
+  supportsLegacyContext: boolean,
+};
+class LegacyContext extends React.Component {
+  state: LegacyContextState = {supportsLegacyContext: true};
+
+  static getDerivedStateFromError(error: any): LegacyContextState {
+    return {supportsLegacyContext: false};
+  }
+
+  componentDidCatch(error: any, info: any) {
+    console.info(
+      'Assuming legacy context is not supported in this React version due to: ',
+      error,
+      info,
+    );
+  }
+
+  render(): React.Node {
+    if (!this.state.supportsLegacyContext) {
+      return <p>This version of React does not support legacy context.</p>;
+    }
+
+    return (
+      <React.Fragment>
+        <LegacyContextProvider>
+          <LegacyContextConsumer />
+        </LegacyContextProvider>
+        <LegacyContextProviderWithUpdates />
+      </React.Fragment>
+    );
+  }
+}
+
+export default function Contexts(): React.Node {
+  return (
+    <div>
+      <h1>Contexts</h1>
+      <ul>
+        <LegacyContext />
+        <ModernContext.Provider value={contextData}>
+          <ModernContext.Consumer>
+            {(value: $FlowFixMe) =>
+              formatContextForDisplay('ModernContext.Consumer', value)
+            }
+          </ModernContext.Consumer>
+          <ModernContextType />
+        </ModernContext.Provider>
+        <FunctionalContextConsumer />
+        <FunctionalContextProviderWithContextUpdates />
+        <ModernClassContextProviderWithUpdates />
+        <ArrayContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('ArrayContext.Consumer', value)
+          }
+        </ArrayContext.Consumer>
+        <BoolContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('BoolContext.Consumer', value)
+          }
+        </BoolContext.Consumer>
+        <FuncContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('FuncContext.Consumer', value)
+          }
+        </FuncContext.Consumer>
+        <NumberContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('NumberContext.Consumer', value)
+          }
+        </NumberContext.Consumer>
+        <StringContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('StringContext.Consumer', value)
+          }
+        </StringContext.Consumer>
+        <SymbolContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('SymbolContext.Consumer', value)
+          }
+        </SymbolContext.Consumer>
+        <NullContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('NullContext.Consumer', value)
+          }
+        </NullContext.Consumer>
+        <UndefinedContext.Consumer>
+          {(value: $FlowFixMe) =>
+            formatContextForDisplay('UndefinedContext.Consumer', value)
+          }
+        </UndefinedContext.Consumer>
+      </ul>
+    </div>
+  );
+}
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 00000000000..487c0be4da7
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
@@ -0,0 +1,258 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  createContext,
+  forwardRef,
+  Fragment,
+  memo,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useEffect,
+  useOptimistic,
+  useState,
+  use,
+} from 'react';
+import {useFormState, useFormStatus} from 'react-dom';
+
+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');
+}
+
+const ContextA = createContext('A');
+const ContextB = createContext('B');
+
+function FunctionWithHooks(props: any, ref: React$RefSetter<any>) {
+  const [count, updateCount] = useState(0);
+  // eslint-disable-next-line no-unused-vars
+  const contextValueA = useContext(ContextA);
+  useOptimistic<number, mixed>(1);
+  use(ContextA);
+
+  // 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();
+
+  // eslint-disable-next-line no-unused-vars
+  const contextValueB = useContext(ContextB);
+
+  // Verify deep nesting doesn't break
+  useDeepHookA();
+
+  return <button onClick={onClick}>Count: {debouncedCount}</button>;
+}
+const MemoWithHooks = memo(FunctionWithHooks);
+const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
+
+function wrapWithHoc(
+  Component: (props: any, ref: React$RefSetter<any>) => any,
+) {
+  function Hoc() {
+    return <Component />;
+  }
+  // $FlowFixMe[prop-missing]
+  const displayName = Component.displayName || Component.name;
+  // $FlowFixMe[incompatible-type] found when upgrading Flow
+  Hoc.displayName = `withHoc(${displayName})`;
+  return Hoc;
+}
+const HocWithHooks = wrapWithHoc(FunctionWithHooks);
+
+const Suspendender = React.lazy(() => {
+  return new Promise<any>(resolve => {
+    setTimeout(() => {
+      resolve({
+        default: () => 'Finished!',
+      });
+    }, 3000);
+  });
+});
+function Transition() {
+  const [show, setShow] = React.useState(false);
+  const [isPending, startTransition] = React.useTransition();
+
+  return (
+    <div>
+      <React.Suspense fallback="Loading">
+        {isPending ? 'Pending' : null}
+        {show ? <Suspendender /> : null}
+      </React.Suspense>
+      {!show && (
+        <button onClick={() => startTransition(() => setShow(true))}>
+          Transition
+        </button>
+      )}
+    </div>
+  );
+}
+
+function incrementWithDelay(previousState: number, formData: FormData) {
+  const incrementDelay = +formData.get('incrementDelay');
+  const shouldReject = formData.get('shouldReject');
+  const reason = formData.get('reason');
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (shouldReject) {
+        reject(reason);
+      } else {
+        resolve(previousState + 1);
+      }
+    }, incrementDelay);
+  });
+}
+
+function FormStatus() {
+  const status = useFormStatus();
+
+  return <pre>{JSON.stringify(status)}</pre>;
+}
+
+function Forms() {
+  const [state, formAction] = useFormState<any, any>(incrementWithDelay, 0);
+  return (
+    <form>
+      State: {state}&nbsp;
+      <label>
+        delay:
+        <input
+          name="incrementDelay"
+          defaultValue={5000}
+          type="text"
+          inputMode="numeric"
+        />
+      </label>
+      <label>
+        Reject:
+        <input name="reason" type="text" />
+        <input name="shouldReject" type="checkbox" />
+      </label>
+      <button formAction={formAction}>Increment</button>
+      <FormStatus />
+    </form>
+  );
+}
+
+class ErrorBoundary extends React.Component<{children?: React$Node}> {
+  state: {error: any} = {error: null};
+  static getDerivedStateFromError(error: mixed): {error: any} {
+    return {error};
+  }
+  componentDidCatch(error: any, info: any) {
+    console.error(error, info);
+  }
+  render(): any {
+    if (this.state.error) {
+      return <div>Error: {String(this.state.error)}</div>;
+    }
+    return this.props.children;
+  }
+}
+
+export default function CustomHooks(): React.Node {
+  return (
+    <Fragment>
+      <FunctionWithHooks />
+      <MemoWithHooks />
+      <ForwardRefWithHooks />
+      <HocWithHooks />
+      <Transition />
+      <ErrorBoundary>
+        <Forms />
+      </ErrorBoundary>
+    </Fragment>
+  );
+}
+
+// Below copied from https://usehooks.com/
+function useDebounce(value: number, delay: number) {
+  // 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 00000000000..f4de359f499
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+class Custom {
+  _number = 42;
+  get number(): number {
+    return this._number;
+  }
+}
+
+export default function CustomObject(): React.Node {
+  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 00000000000..530152b70d1
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+const objectWithModifiedHasOwnProperty = {
+  foo: 'abc',
+  bar: 123,
+  hasOwnProperty: true,
+};
+
+const objectWithNullProto = Object.create(null);
+// $FlowFixMe[prop-missing] found when upgrading Flow
+objectWithNullProto.foo = 'abc';
+// $FlowFixMe[prop-missing] found when upgrading Flow
+objectWithNullProto.bar = 123;
+
+export default function EdgeCaseObjects(): React.Node {
+  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 00000000000..34f46774b18
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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';
+import SymbolKeys from './SymbolKeys';
+import UseMemoCache from './UseMemoCache';
+import UseEffectEvent from './UseEffectEvent';
+import UseSyncExternalStore from './UseSyncExternalStore';
+
+// TODO Add Immutable JS example
+
+export default function InspectableElements(): React.Node {
+  return (
+    <Fragment>
+      <h1>Inspectable elements</h1>
+      <SimpleValues />
+      <UnserializableProps />
+      <NestedProps />
+      <Contexts />
+      <CustomHooks />
+      <CustomObject />
+      <EdgeCaseObjects />
+      <CircularReferences />
+      <SymbolKeys />
+      <UseMemoCache />
+      <UseEffectEvent />
+      <UseSyncExternalStore />
+    </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 00000000000..7be7526829b
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+const object = {
+  string: 'abc',
+  longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',
+  emptyString: '',
+  number: 123,
+  boolean: true,
+  undefined: undefined,
+  null: null,
+};
+
+export default function ObjectProps(): React.Node {
+  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 00000000000..22c54ec91ee
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Component} from 'react';
+
+function noop() {}
+
+export default class SimpleValues extends Component {
+  anonymousFunction: () => void = () => {};
+
+  render(): React.Node {
+    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/SymbolKeys.js b/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
new file mode 100644
index 00000000000..0bd1ee258c3
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+const base = Object.create(Object.prototype, {
+  enumerableStringBase: {
+    value: 1,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+  // $FlowFixMe[invalid-computed-prop]
+  [Symbol('enumerableSymbolBase')]: {
+    value: 1,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+  nonEnumerableStringBase: {
+    value: 1,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  },
+  // $FlowFixMe[invalid-computed-prop]
+  [Symbol('nonEnumerableSymbolBase')]: {
+    value: 1,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  },
+});
+
+const data = Object.create(base, {
+  enumerableString: {
+    value: 2,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+  nonEnumerableString: {
+    value: 3,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  },
+  [123]: {
+    value: 3,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+  // $FlowFixMe[invalid-computed-prop]
+  [Symbol('nonEnumerableSymbol')]: {
+    value: 2,
+    writable: true,
+    enumerable: false,
+    configurable: true,
+  },
+  // $FlowFixMe[invalid-computed-prop]
+  [Symbol('enumerableSymbol')]: {
+    value: 3,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  },
+});
+
+export default function SymbolKeys(): React.Node {
+  return <ChildComponent data={data} />;
+}
+
+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 00000000000..2c279a1bdbf
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as 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,
+  },
+});
+const bigInt = BigInt(123);
+
+class Foo {
+  flag = false;
+  object: Object = {
+    a: {b: {c: {d: 1}}},
+  };
+}
+
+export default function UnserializableProps(): React.Node {
+  return (
+    <ChildComponent
+      arrayBuffer={arrayBuffer}
+      dataView={dataView}
+      map={map}
+      set={set}
+      mapOfMaps={mapOfMaps}
+      setOfSets={setOfSets}
+      typedArray={typedArray}
+      immutable={immutable}
+      bigInt={bigInt}
+      classInstance={new Foo()}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return (
+    <>
+      <div>{props.bigInt}</div>
+    </>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UseEffectEvent.js b/packages/react-devtools-shell/src/app/InspectableElements/UseEffectEvent.js
new file mode 100644
index 00000000000..020246e8a4a
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UseEffectEvent.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+const {useState, useEffect} = React;
+const useEffectEvent =
+  React.useEffectEvent || React.experimental_useEffectEvent;
+
+export default function UseEffectEvent(): React.Node {
+  return (
+    <>
+      <SingleHookCase />
+      <HookTreeCase />
+    </>
+  );
+}
+
+function SingleHookCase() {
+  const onClick = useEffectEvent(() => {});
+
+  return <div onClick={onClick} />;
+}
+
+function useCustomHook() {
+  const [state, setState] = useState();
+  const onClick = useEffectEvent(() => {});
+  useEffect(() => {});
+
+  return [state, setState, onClick];
+}
+
+function HookTreeCase() {
+  const onClick = useCustomHook();
+
+  return <div onClick={onClick} />;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UseMemoCache.js b/packages/react-devtools-shell/src/app/InspectableElements/UseMemoCache.js
new file mode 100644
index 00000000000..1a3568c40dc
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UseMemoCache.js
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import {c as useMemoCache} from 'react/compiler-runtime';
+
+export default function UseMemoCache(): React.Node {
+  useMemoCache(1);
+
+  return null;
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js b/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js
new file mode 100644
index 00000000000..decb10b2db2
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+const {useState, useEffect, useSyncExternalStore} = React;
+
+// Create a simple external store for demonstratio
+function createStore<T>(initialValue: T): {
+  subscribe: (cb: () => void) => () => any,
+  getSnapshot: () => T,
+  setValue: (newValue: T) => void,
+} {
+  let value = initialValue;
+  const subscribers = new Set<() => void>();
+
+  return {
+    subscribe(callback) {
+      subscribers.add(callback);
+      return () => subscribers.delete(callback);
+    },
+    getSnapshot() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      subscribers.forEach(callback => callback());
+    },
+  };
+}
+
+const counterStore = createStore(0);
+const themeStore = createStore('light');
+
+export default function UseSyncExternalStore(): React.Node {
+  return (
+    <>
+      <h2>useSyncExternalStore()</h2>
+      <SingleHookCase />
+      <HookTreeCase />
+      <MultipleStoresCase />
+    </>
+  );
+}
+
+function SingleHookCase(): React.Node {
+  const count = useSyncExternalStore(
+    counterStore.subscribe,
+    counterStore.getSnapshot,
+  );
+
+  return (
+    <div>
+      <h3>Single hook case</h3>
+      <p>Count: {count}</p>
+      <button onClick={() => counterStore.setValue(count + 1)}>
+        Increment
+      </button>
+      <button onClick={() => counterStore.setValue(count - 1)}>
+        Decrement
+      </button>
+    </div>
+  );
+}
+
+function useCounter() {
+  const count = useSyncExternalStore(
+    counterStore.subscribe,
+    counterStore.getSnapshot,
+  );
+  const [localState, setLocalState] = useState(0);
+
+  useEffect(() => {
+    // Some effect
+  }, [count]);
+
+  return {count, localState, setLocalState};
+}
+
+function HookTreeCase(): React.Node {
+  const {count, localState, setLocalState} = useCounter();
+
+  return (
+    <div>
+      <h3>Hook tree case</h3>
+      <p>External count: {count}</p>
+      <p>Local state: {localState}</p>
+      <button onClick={() => counterStore.setValue(count + 1)}>
+        Increment External
+      </button>
+      <button onClick={() => setLocalState(localState + 1)}>
+        Increment Local
+      </button>
+    </div>
+  );
+}
+
+function useTheme() {
+  const theme = useSyncExternalStore(
+    themeStore.subscribe,
+    themeStore.getSnapshot,
+  );
+
+  return theme;
+}
+
+function MultipleStoresCase() {
+  const count = useSyncExternalStore(
+    counterStore.subscribe,
+    counterStore.getSnapshot,
+  );
+  const theme = useTheme();
+
+  return (
+    <div style={{background: theme === 'dark' ? '#333' : '#fff'}}>
+      <h3>Multiple stores case</h3>
+      <p>Count: {count}</p>
+      <p>Theme: {theme}</p>
+      <button
+        onClick={() =>
+          themeStore.setValue(theme === 'light' ? 'dark' : 'light')
+        }>
+        Toggle Theme
+      </button>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/index.js b/packages/react-devtools-shell/src/app/InspectableElements/index.js
new file mode 100644
index 00000000000..b44bd1e79cc
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InspectableElements/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 InspectableElements from './InspectableElements';
+
+export default InspectableElements;
diff --git a/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
new file mode 100644
index 00000000000..498755bc3b8
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {StrictMode} from 'react';
+
+export default function PartiallyStrictApp(): React.Node {
+  return (
+    <>
+      <Child />
+      <StrictMode>
+        <StrictChild />
+      </StrictMode>
+    </>
+  );
+}
+
+function Child() {
+  return <Grandchild />;
+}
+
+function StrictChild() {
+  return <Grandchild />;
+}
+
+function Grandchild() {
+  return null;
+}
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 00000000000..89049dafafd
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {Fragment, useState} from 'react';
+import {Button, Text, View} from 'react-native-web';
+
+export default function ReactNativeWeb(): React.Node {
+  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/Segments/index.js b/packages/react-devtools-shell/src/app/Segments/index.js
new file mode 100644
index 00000000000..0677cfff777
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Segments/index.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+function deferred<T>(
+  timeoutMS: number,
+  resolvedValue: T,
+  displayName: string,
+): Promise<T> {
+  const promise = new Promise<T>(resolve => {
+    setTimeout(() => resolve(resolvedValue), timeoutMS);
+  });
+  (promise as any).displayName = displayName;
+
+  return promise;
+}
+
+const title = deferred(100, 'Segmented Page Title', 'title');
+const content = deferred(
+  400,
+  'This is the content of a segmented page. It loads in multiple parts.',
+  'content',
+);
+function Page(): React.Node {
+  return (
+    <article>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </article>
+  );
+}
+
+function InnerSegment({children}: {children: React.Node}): React.Node {
+  return (
+    <>
+      <h3>Inner Segment</h3>
+      <React.Suspense name="InnerSegment" fallback={<p>Loading...</p>}>
+        <section>{children}</section>
+        <p>After inner</p>
+      </React.Suspense>
+    </>
+  );
+}
+
+const cookies = deferred(200, 'Cookies: 🍪🍪🍪', 'cookies');
+function OuterSegment({children}: {children: React.Node}): React.Node {
+  return (
+    <>
+      <h2>Outer Segment</h2>
+      <React.Suspense name="OuterSegment" fallback={<p>Loading outer</p>}>
+        <p>{cookies}</p>
+        <div>{children}</div>
+        <p>After outer</p>
+      </React.Suspense>
+    </>
+  );
+}
+
+function Root({children}: {children: React.Node}): React.Node {
+  return (
+    <>
+      <h1>Root Segment</h1>
+      <React.Suspense name="Root" fallback={<p>Loading root</p>}>
+        <main>{children}</main>
+        <footer>After root</footer>
+      </React.Suspense>
+    </>
+  );
+}
+
+const dynamicData = deferred(10, 'Dynamic Data: 📈📉📊', 'dynamicData');
+export default function Segments(): React.Node {
+  return (
+    <>
+      <p>{dynamicData}</p>
+      <React.Activity name="root" mode="visible">
+        <Root>
+          <React.Activity name="outer" mode="visible">
+            <OuterSegment>
+              <React.Activity name="inner" mode="visible">
+                <InnerSegment>
+                  <React.Activity name="slot" mode="visible">
+                    <Page />
+                  </React.Activity>
+                </InnerSegment>
+              </React.Activity>
+            </OuterSegment>
+          </React.Activity>
+        </Root>
+      </React.Activity>
+    </>
+  );
+}
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 00000000000..f9b687cbc87
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
@@ -0,0 +1,370 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {
+  Fragment,
+  Suspense,
+  unstable_SuspenseList as SuspenseList,
+  useReducer,
+  useState,
+} from 'react';
+
+function SuspenseTree(): React.Node {
+  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 />
+      <EmptySuspense />
+      <SuspenseTreeOperations />
+    </Fragment>
+  );
+}
+
+function IgnoreMePassthrough({children}: {children: React$Node}) {
+  return <span>{children}</span>;
+}
+
+const suspenseTreeOperationsChildren = {
+  a: (
+    <Suspense key="a" name="a">
+      <p>A</p>
+    </Suspense>
+  ),
+  b: (
+    <div key="b">
+      <Suspense name="b">B</Suspense>
+    </div>
+  ),
+  c: (
+    <p key="c">
+      <Suspense key="c" name="c">
+        C
+      </Suspense>
+    </p>
+  ),
+  d: (
+    <Suspense key="d" name="d">
+      <div>D</div>
+    </Suspense>
+  ),
+  e: (
+    <Suspense key="e" name="e">
+      <IgnoreMePassthrough key="e1">
+        <Suspense name="e-child-one">
+          <p>e1</p>
+        </Suspense>
+      </IgnoreMePassthrough>
+      <IgnoreMePassthrough key="e2">
+        <Suspense name="e-child-two">
+          <div>e2</div>
+        </Suspense>
+      </IgnoreMePassthrough>
+    </Suspense>
+  ),
+  eReordered: (
+    <Suspense key="e" name="e">
+      <IgnoreMePassthrough key="e2">
+        <Suspense name="e-child-two">
+          <div>e2</div>
+        </Suspense>
+      </IgnoreMePassthrough>
+      <IgnoreMePassthrough key="e1">
+        <Suspense name="e-child-one">
+          <p>e1</p>
+        </Suspense>
+      </IgnoreMePassthrough>
+    </Suspense>
+  ),
+};
+
+function SuspenseTreeOperations() {
+  const initialChildren: any[] = [
+    suspenseTreeOperationsChildren.a,
+    suspenseTreeOperationsChildren.b,
+    suspenseTreeOperationsChildren.c,
+    suspenseTreeOperationsChildren.d,
+    suspenseTreeOperationsChildren.e,
+  ];
+  const [children, dispatch] = useReducer(
+    (
+      pendingState: any[],
+      action: 'toggle-mount' | 'reorder' | 'reorder-within-filtered',
+    ): React$Node[] => {
+      switch (action) {
+        case 'toggle-mount':
+          if (pendingState.length === 5) {
+            return [
+              suspenseTreeOperationsChildren.a,
+              suspenseTreeOperationsChildren.b,
+              suspenseTreeOperationsChildren.c,
+              suspenseTreeOperationsChildren.d,
+            ];
+          } else {
+            return [
+              suspenseTreeOperationsChildren.a,
+              suspenseTreeOperationsChildren.b,
+              suspenseTreeOperationsChildren.c,
+              suspenseTreeOperationsChildren.d,
+              suspenseTreeOperationsChildren.e,
+            ];
+          }
+        case 'reorder':
+          if (pendingState[1] === suspenseTreeOperationsChildren.b) {
+            return [
+              suspenseTreeOperationsChildren.a,
+              suspenseTreeOperationsChildren.c,
+              suspenseTreeOperationsChildren.b,
+              suspenseTreeOperationsChildren.d,
+              suspenseTreeOperationsChildren.e,
+            ];
+          } else {
+            return [
+              suspenseTreeOperationsChildren.a,
+              suspenseTreeOperationsChildren.b,
+              suspenseTreeOperationsChildren.c,
+              suspenseTreeOperationsChildren.d,
+              suspenseTreeOperationsChildren.e,
+            ];
+          }
+        case 'reorder-within-filtered':
+          if (pendingState[4] === suspenseTreeOperationsChildren.e) {
+            return [
+              suspenseTreeOperationsChildren.a,
+              suspenseTreeOperationsChildren.b,
+              suspenseTreeOperationsChildren.c,
+              suspenseTreeOperationsChildren.d,
+              suspenseTreeOperationsChildren.eReordered,
+            ];
+          } else {
+            return [
+              suspenseTreeOperationsChildren.a,
+              suspenseTreeOperationsChildren.b,
+              suspenseTreeOperationsChildren.c,
+              suspenseTreeOperationsChildren.d,
+              suspenseTreeOperationsChildren.e,
+            ];
+          }
+        default:
+          return pendingState;
+      }
+    },
+    initialChildren,
+  );
+
+  return (
+    <>
+      <button onClick={() => dispatch('toggle-mount')}>Toggle Mount</button>
+      <button onClick={() => dispatch('reorder')}>Reorder</button>
+      <button onClick={() => dispatch('reorder-within-filtered')}>
+        Reorder Within Filtered
+      </button>
+      <Suspense name="operations-parent">
+        <section>{children}</section>
+      </Suspense>
+    </>
+  );
+}
+
+function EmptySuspense() {
+  return <Suspense />;
+}
+
+// $FlowFixMe[missing-local-annot]
+function PrimaryFallbackTest({initialSuspend}) {
+  const [suspend, setSuspend] = useState(initialSuspend);
+  const [fallbackStepIndex, 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 id={`primary-fallback-test-${fallbackStepIndex}`} />
+        ) : (
+          primaryStep
+        )}
+      </Suspense>
+    </Fragment>
+  );
+}
+
+function useTestSequence(label: string, T1: any => any, T2: any => any) {
+  const [step, setStep] = useState(0);
+  const next: $FlowFixMe = (
+    <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>
+      next {label} content
+    </button>
+  );
+  const allSteps: $FlowFixMe = [
+    <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 [step, 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 id="parent-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(false);
+  return (
+    <Suspense
+      fallback={
+        <Fallback1 onClick={() => setLoadChild(true)}>Click to load</Fallback1>
+      }
+      name="LoadLater">
+      {loadChild ? (
+        <Primary1 onClick={() => setLoadChild(false)}>
+          Loaded! Click to suspend again.
+        </Primary1>
+      ) : (
+        <Never id="load-later" />
+      )}
+    </Suspense>
+  );
+}
+
+function readRecord(promise: any): any {
+  if (typeof React.use === 'function') {
+    // eslint-disable-next-line react-hooks-published/rules-of-hooks
+    return React.use(promise);
+  }
+  switch (promise.status) {
+    case 'pending':
+      throw promise;
+    case 'rejected':
+      throw promise.reason;
+    case 'fulfilled':
+      return promise.value;
+    default:
+      promise.status = 'pending';
+      promise.then(
+        value => {
+          promise.status = 'fulfilled';
+          promise.value = value;
+        },
+        reason => {
+          promise.status = 'rejected';
+          promise.reason = reason;
+        },
+      );
+      throw promise;
+  }
+}
+
+const nevers = new Map<string, Promise<empty>>();
+function Never({id}: {id: string}) {
+  let promise = nevers.get(id);
+  if (!promise) {
+    promise = new Promise(() => {});
+    (promise as any).displayName = id;
+    nevers.set(id, promise);
+  }
+  readRecord(promise);
+}
+
+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 00000000000..05834028402
--- /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 00000000000..68f0b120ffd
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/List.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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): React.Node {
+  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: $FlowFixMe) => {
+      if (event.key === 'Enter') {
+        handleClick();
+      }
+    },
+    [handleClick],
+  );
+
+  const handleChange = useCallback(
+    (event: $FlowFixMe) => {
+      setNewItemText(event.currentTarget.value);
+    },
+    [setNewItemText],
+  );
+
+  const removeItem = useCallback(
+    (itemToRemove: $FlowFixMe) =>
+      setItems(items.filter(item => item !== itemToRemove)),
+    [items],
+  );
+
+  const toggleItem = useCallback(
+    (itemToToggle: $FlowFixMe) => {
+      // 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 00000000000..77c666251cc
--- /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 00000000000..549d15c31ea
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {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(ListItem): component(...props: Props));
diff --git a/packages/react-devtools-shell/src/app/ToDoList/index.js b/packages/react-devtools-shell/src/app/ToDoList/index.js
new file mode 100644
index 00000000000..9a35039f3c1
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ToDoList/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 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 00000000000..98b816d8837
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/Toggle/index.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {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/TraceUpdatesTest/index.js b/packages/react-devtools-shell/src/app/TraceUpdatesTest/index.js
new file mode 100644
index 00000000000..dd847ad7aef
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/TraceUpdatesTest/index.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useRef, useState} from 'react';
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h3>Count: {count}</h3>
+      <button onClick={() => setCount(c => c + 1)}>Increment</button>
+    </div>
+  );
+};
+
+function DialogComponent() {
+  const dialogRef = useRef(null);
+
+  const openDialog = () => {
+    if (dialogRef.current) {
+      dialogRef.current.showModal();
+    }
+  };
+
+  const closeDialog = () => {
+    if (dialogRef.current) {
+      dialogRef.current.close();
+    }
+  };
+
+  return (
+    <div style={{margin: '10px 0'}}>
+      <button onClick={openDialog}>Open Dialog</button>
+      <dialog ref={dialogRef} style={{padding: '20px'}}>
+        <h3>Dialog Content</h3>
+        <Counter />
+        <button onClick={closeDialog}>Close</button>
+      </dialog>
+    </div>
+  );
+}
+
+function RegularComponent() {
+  return (
+    <div style={{margin: '10px 0'}}>
+      <h3>Regular Component</h3>
+      <Counter />
+    </div>
+  );
+}
+
+export default function TraceUpdatesTest(): React.Node {
+  return (
+    <div>
+      <h2>TraceUpdates Test</h2>
+
+      <div style={{marginBottom: '20px'}}>
+        <h3>Standard Component</h3>
+        <RegularComponent />
+      </div>
+
+      <div style={{marginBottom: '20px'}}>
+        <h3>Dialog Component (top-layer element)</h3>
+        <DialogComponent />
+      </div>
+
+      <div
+        style={{marginTop: '20px', padding: '10px', border: '1px solid #ddd'}}>
+        <h3>How to Test:</h3>
+        <ol>
+          <li>Open DevTools Components panel</li>
+          <li>Enable "Highlight updates when components render" in settings</li>
+          <li>Click increment buttons and observe highlights</li>
+          <li>Open the dialog and test increments there as well</li>
+        </ol>
+      </div>
+    </div>
+  );
+}
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 00000000000..5fecc27c115
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/console.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  // $FlowFixMe[prop-missing] index access only allowed for objects with index keys
+  console[methodName] = (...args: $ReadOnlyArray<mixed>) => {
+    const maybeString = args[0];
+    if (typeof maybeString === 'string') {
+      for (let i = 0; i < stringsToIgnore.length; i++) {
+        if (maybeString.startsWith(stringsToIgnore[i])) {
+          return;
+        }
+      }
+    }
+
+    // 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-to-end environment,
+    // the shell's console patching should pass through to the parent override methods.
+    window.parent.console[methodName](...args);
+  };
+}
+
+export function ignoreErrors(errorsToIgnore: Array<string>): void {
+  ignoreStrings('error', errorsToIgnore);
+}
+
+export function ignoreWarnings(warningsToIgnore: Array<string>): void {
+  ignoreStrings('warn', warningsToIgnore);
+}
+
+export function ignoreLogs(logsToIgnore: Array<string>): void {
+  ignoreStrings('log', logsToIgnore);
+}
diff --git a/packages/react-devtools-shell/src/app/devtools.js b/packages/react-devtools-shell/src/app/devtools.js
new file mode 100644
index 00000000000..8f3de74cf67
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/devtools.js
@@ -0,0 +1,90 @@
+/** @flow */
+
+import {createElement} from 'react';
+import {createRoot} from 'react-dom/client';
+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';
+
+// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
+// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
+// $FlowFixMe[cannot-resolve-name]
+__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
+
+const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
+
+const {contentDocument, contentWindow} = iframe;
+
+// Helps with positioning Overlay UI.
+contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
+
+initializeBackend(contentWindow);
+
+// Initialize the front end and activate the backend early so that we are able
+// to pass console settings in local storage to the backend before initial render
+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 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;
+    }
+  }
+});
+
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+function hookNamesModuleLoaderFunction() {
+  return import('react-devtools-inline/hookNames');
+}
+
+inject('dist/app-index.js', () => {
+  initDevTools({
+    connect(cb) {
+      const root = createRoot(container);
+      root.render(
+        createElement(DevTools, {
+          browserTheme: 'light',
+          enabledInspectedElementContextMenu: true,
+          hookNamesModuleLoaderFunction,
+          showTabBar: true,
+          warnIfLegacyBackendDetected: true,
+          warnIfUnsupportedVersionDetected: true,
+        }),
+      );
+    },
+
+    onReload(reloadFn) {
+      iframe.onload = reloadFn;
+    },
+  });
+});
+
+function inject(sourcePath: string, callback: () => void) {
+  const script = contentDocument.createElement('script');
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
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 00000000000..473cc40c3be
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -0,0 +1,132 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import semver from 'semver';
+
+import {createElement} from 'react';
+import {createRoot} from 'react-dom/client';
+
+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 ReactNativeWeb from './ReactNativeWeb';
+import ToDoList from './ToDoList';
+import Toggle from './Toggle';
+import ErrorBoundaries from './ErrorBoundaries';
+import PartiallyStrictApp from './PartiallyStrictApp';
+import Segments from './Segments';
+import SuspenseTree from './SuspenseTree';
+import TraceUpdatesTest from './TraceUpdatesTest';
+import {ignoreErrors, ignoreLogs, 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
+  'Warning: ReactDOM.render was removed in React 19',
+  'Warning: react-test-renderer is deprecated',
+  // Ignore prefixed and not prefixed since I don't know which
+  // React versions are being tested by this code.
+  'Legacy context API',
+  'Unsafe lifecycle methods',
+  '%s is deprecated in StrictMode.', // findDOMNode
+  'ReactDOM.render was removed in React 19',
+  'react-test-renderer is deprecated',
+]);
+ignoreWarnings([
+  'Warning: componentWillReceiveProps has been renamed',
+  'componentWillReceiveProps has been renamed',
+]);
+ignoreLogs([]);
+
+const unmountFunctions: Array<() => void | boolean> = [];
+
+function createContainer() {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  return container;
+}
+
+function mountApp(App: () => React$Node) {
+  const container = createContainer();
+
+  const root = createRoot(container);
+  root.render(createElement(App));
+
+  unmountFunctions.push(() => root.unmount());
+}
+
+// $FlowFixMe[missing-local-annot]
+function mountStrictApp(App) {
+  function StrictRoot() {
+    return createElement(App);
+  }
+
+  const container = createContainer();
+
+  const root = createRoot(container, {unstable_strictMode: true});
+  root.render(createElement(StrictRoot));
+
+  unmountFunctions.push(() => root.unmount());
+}
+
+function mountLegacyApp(App: () => React$Node) {
+  // $FlowFixMe[prop-missing]: These are removed in 19.
+  const {render, unmountComponentAtNode} = require('react-dom');
+
+  function LegacyRender() {
+    return createElement(App);
+  }
+
+  const container = createContainer();
+
+  // $FlowFixMe[not-a-function]: These are removed in 19.
+  render(createElement(LegacyRender), container);
+
+  // $FlowFixMe: These are removed in 19.
+  unmountFunctions.push(() => unmountComponentAtNode(container));
+}
+
+const shouldRenderLegacy = semver.lte(
+  process.env.E2E_APP_REACT_VERSION,
+  '18.2.0',
+);
+function mountTestApp() {
+  mountStrictApp(ToDoList);
+  mountApp(InspectableElements);
+  mountApp(Hydration);
+  mountApp(ElementTypes);
+  mountApp(EditableProps);
+  mountApp(ReactNativeWeb);
+  mountApp(Toggle);
+  mountApp(ErrorBoundaries);
+  mountApp(SuspenseTree);
+  mountApp(DeeplyNestedComponents);
+  mountApp(Iframe);
+  mountApp(TraceUpdatesTest);
+  mountApp(Segments);
+
+  if (shouldRenderLegacy) {
+    mountLegacyApp(PartiallyStrictApp);
+  }
+}
+
+function unmountTestApp() {
+  unmountFunctions.forEach(fn => fn());
+}
+
+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 00000000000..2a995314c15
--- /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/e2e-apps/ListApp.js b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
new file mode 100644
index 00000000000..9cb17188b0f
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useRef, useState} from 'react';
+
+export default function App(): React.Node {
+  return <List />;
+}
+
+function List() {
+  const [items, setItems] = useState(['one', 'two', 'three']);
+  const inputRef = useRef(null);
+
+  const addItem = () => {
+    const input = ((inputRef.current: any): HTMLInputElement);
+    const text = input.value;
+    input.value = '';
+
+    if (text) {
+      setItems([...items, text]);
+    }
+  };
+
+  return (
+    <>
+      <input ref={inputRef} data-testname="AddItemInput" />
+      <button data-testname="AddItemButton" onClick={addItem}>
+        Add Item
+      </button>
+      <ul data-testname="List">
+        {items.map((label, index) => (
+          <ListItem key={index} label={label} />
+        ))}
+      </ul>
+    </>
+  );
+}
+
+// $FlowFixMe[missing-local-annot]
+function ListItem({label}) {
+  return <li data-testname="ListItem">{label}</li>;
+}
diff --git a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
new file mode 100644
index 00000000000..056bd7b2243
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+export default function App(): React.Node {
+  return <List />;
+}
+
+class List extends React.Component {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      items: ['one', 'two', 'three'],
+    };
+  }
+
+  addItem = () => {
+    if (this.inputRef && this.inputRef.value) {
+      this.setState({items: [...this.state.items, this.inputRef.value]});
+      this.inputRef.value = '';
+    }
+  };
+
+  render(): any {
+    return (
+      <div>
+        <input
+          data-testname="AddItemInput"
+          value={this.state.text}
+          onChange={this.onInputChange}
+          ref={c => (this.inputRef = c)}
+        />
+        <button data-testname="AddItemButton" onClick={this.addItem}>
+          Add Item
+        </button>
+        <ul data-testname="List">
+          {this.state.items.map((label, index) => (
+            <ListItem key={index} label={label} />
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+// $FlowFixMe[missing-local-annot]
+function ListItem({label}) {
+  return <li data-testname="ListItem">{label}</li>;
+}
diff --git a/packages/react-devtools-shell/src/e2e-regression/app-legacy.js b/packages/react-devtools-shell/src/e2e-regression/app-legacy.js
new file mode 100644
index 00000000000..19ad2f0f6d9
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-regression/app-legacy.js
@@ -0,0 +1,35 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import ListApp from '../e2e-apps/ListApp';
+import ListAppLegacy from '../e2e-apps/ListAppLegacy';
+import {gte} from 'react-devtools-shared/src/backend/utils';
+
+const version = process.env.E2E_APP_REACT_VERSION;
+
+function mountApp(App: () => React$Node) {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  // $FlowFixMe[prop-missing]: These are removed in 19.
+  ReactDOM.render(<App />, container);
+}
+function mountTestApp() {
+  // ListApp has hooks, which aren't available until 16.8.0
+  mountApp(gte(version, '16.8.0') ? ListApp : ListAppLegacy);
+}
+
+mountTestApp();
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+// If they don't exist, we mock them
+window.parent.REACT_DOM_APP = {
+  createTestNameSelector: name => `[data-testname="${name}"]`,
+  findAllNodes: (container, nodes) =>
+    container.querySelectorAll(nodes.join(' ')),
+  ...ReactDOM,
+};
diff --git a/packages/react-devtools-shell/src/e2e-regression/app.js b/packages/react-devtools-shell/src/e2e-regression/app.js
new file mode 100644
index 00000000000..d0210d32357
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-regression/app.js
@@ -0,0 +1,30 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import ListApp from '../e2e-apps/ListApp';
+
+function mountApp(App: () => React$Node) {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  const root = ReactDOMClient.createRoot(container);
+  root.render(<App />);
+}
+function mountTestApp() {
+  mountApp(ListApp);
+}
+
+mountTestApp();
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+// If they don't exist, we mock them
+window.parent.REACT_DOM_APP = {
+  createTestNameSelector: name => `[data-testname="${name}"]`,
+  findAllNodes: (container, nodes) =>
+    container.querySelectorAll(nodes.join(' ')),
+  ...ReactDOMClient,
+};
diff --git a/packages/react-devtools-shell/src/e2e-regression/devtools.js b/packages/react-devtools-shell/src/e2e-regression/devtools.js
new file mode 100644
index 00000000000..6e9ada823ca
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-regression/devtools.js
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {initialize as createDevTools} from 'react-devtools-inline/frontend';
+
+// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
+// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
+__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
+
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+function hookNamesModuleLoaderFunction() {
+  return import('react-devtools-inline/hookNames');
+}
+
+function inject(contentDocument, sourcePath, callback) {
+  const script = contentDocument.createElement('script');
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
+
+function init(appIframe, devtoolsContainer, appSource) {
+  const {contentDocument, contentWindow} = appIframe;
+
+  initializeBackend(contentWindow);
+
+  const DevTools = createDevTools(contentWindow);
+
+  inject(contentDocument, appSource, () => {
+    ReactDOMClient.createRoot(devtoolsContainer).render(
+      <DevTools
+        hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
+        showTabBar={true}
+      />,
+    );
+  });
+
+  activateBackend(contentWindow);
+}
+
+const iframe = document.getElementById('iframe');
+const devtoolsContainer = document.getElementById('devtools');
+
+const {protocol, hostname} = window.location;
+const port = 8181; // secondary webpack server port
+init(
+  iframe,
+  devtoolsContainer,
+  `${protocol}//${hostname}:${port}/dist/e2e-app-regression.js`,
+);
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+window.parent.REACT_DOM_DEVTOOLS =
+  'createTestNameSelector' in ReactDOMClient ? ReactDOMClient : ReactDOM;
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
new file mode 100644
index 00000000000..155c545e9ce
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -0,0 +1,20 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+
+const container = document.createElement('div');
+
+((document.body: any): HTMLBodyElement).appendChild(container);
+
+// TODO We may want to parameterize this app
+// so that it can load things other than just ToDoList.
+const App = require('../e2e-apps/ListApp').default;
+
+const root = ReactDOMClient.createRoot(container);
+root.render(<App />);
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+window.parent.REACT_DOM_APP = ReactDOMClient;
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
new file mode 100644
index 00000000000..89bc2b57f99
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {initialize as createDevTools} from 'react-devtools-inline/frontend';
+
+// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
+// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
+__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
+
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+function hookNamesModuleLoaderFunction() {
+  return import('react-devtools-inline/hookNames');
+}
+
+function inject(contentDocument, sourcePath, callback) {
+  const script = contentDocument.createElement('script');
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
+
+function init(appIframe, devtoolsContainer, appSource) {
+  const {contentDocument, contentWindow} = appIframe;
+
+  initializeBackend(contentWindow);
+
+  const DevTools = createDevTools(contentWindow);
+
+  inject(contentDocument, appSource, () => {
+    ReactDOMClient.createRoot(devtoolsContainer).render(
+      <DevTools
+        hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
+        showTabBar={true}
+      />,
+    );
+  });
+
+  activateBackend(contentWindow);
+}
+
+const iframe = document.getElementById('iframe');
+const devtoolsContainer = document.getElementById('devtools');
+
+init(iframe, devtoolsContainer, 'dist/e2e-app.js');
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+window.parent.REACT_DOM_DEVTOOLS = ReactDOMClient;
diff --git a/packages/react-devtools-shell/src/multi/devtools.js b/packages/react-devtools-shell/src/multi/devtools.js
new file mode 100644
index 00000000000..0ba45bc6c15
--- /dev/null
+++ b/packages/react-devtools-shell/src/multi/devtools.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import * as React from 'react';
+import {createRoot} from 'react-dom/client';
+import {
+  activate as activateBackend,
+  createBridge as createBackendBridge,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {
+  createBridge as createFrontendBridge,
+  createStore,
+  initialize as createDevTools,
+} from 'react-devtools-inline/frontend';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+
+function inject(contentDocument, sourcePath, callback) {
+  const script = contentDocument.createElement('script');
+  script.onload = callback;
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
+
+function init(appIframe, devtoolsContainer, appSource) {
+  const {contentDocument, contentWindow} = appIframe;
+
+  // Wire each DevTools instance directly to its app.
+  // By default, DevTools dispatches "message" events on the window,
+  // but this means that only one instance of DevTools can live on a page.
+  const wall = {
+    _listeners: [],
+    listen(listener) {
+      if (__DEBUG__) {
+        console.log('[Shell] Wall.listen()');
+      }
+
+      wall._listeners.push(listener);
+    },
+    send(event, payload) {
+      if (__DEBUG__) {
+        console.log('[Shell] Wall.send()', {event, payload});
+      }
+
+      wall._listeners.forEach(listener => listener({event, payload}));
+    },
+  };
+
+  const backendBridge = createBackendBridge(contentWindow, wall);
+
+  initializeBackend(contentWindow);
+
+  const frontendBridge = createFrontendBridge(contentWindow, wall);
+  const store = createStore(frontendBridge);
+  const DevTools = createDevTools(contentWindow, {
+    bridge: frontendBridge,
+    store,
+  });
+
+  inject(contentDocument, appSource, () => {
+    createRoot(devtoolsContainer).render(<DevTools />);
+  });
+
+  activateBackend(contentWindow, {bridge: backendBridge});
+}
+
+const appIframeLeft = document.getElementById('iframe-left');
+const appIframeRight = document.getElementById('iframe-right');
+const devtoolsContainerLeft = document.getElementById('devtools-left');
+const devtoolsContainerRight = document.getElementById('devtools-right');
+
+init(appIframeLeft, devtoolsContainerLeft, 'dist/multi-left.js');
+init(appIframeRight, devtoolsContainerRight, 'dist/multi-right.js');
diff --git a/packages/react-devtools-shell/src/multi/left.js b/packages/react-devtools-shell/src/multi/left.js
new file mode 100644
index 00000000000..d4cddabdc16
--- /dev/null
+++ b/packages/react-devtools-shell/src/multi/left.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {useState} from 'react';
+import {createRoot} from 'react-dom/client';
+
+function createContainer() {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  return container;
+}
+
+function StatefulCounter() {
+  const [count, setCount] = useState(0);
+  const handleClick = () => setCount(count + 1);
+  return <button onClick={handleClick}>Count {count}</button>;
+}
+
+createRoot(createContainer()).render(<StatefulCounter />);
diff --git a/packages/react-devtools-shell/src/multi/right.js b/packages/react-devtools-shell/src/multi/right.js
new file mode 100644
index 00000000000..fb7d7cb0080
--- /dev/null
+++ b/packages/react-devtools-shell/src/multi/right.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {useLayoutEffect, useRef, useState} from 'react';
+import {createRoot} from 'react-dom/client';
+
+function createContainer() {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  return container;
+}
+
+function EffectWithState() {
+  const [didMount, setDidMount] = useState(0);
+
+  const renderCountRef = useRef(0);
+  renderCountRef.current++;
+
+  useLayoutEffect(() => {
+    if (!didMount) {
+      setDidMount(true);
+    }
+  }, [didMount]);
+
+  return (
+    <ul>
+      <li>Rendered {renderCountRef.current} times</li>
+      {didMount && <li>Mounted!</li>}
+    </ul>
+  );
+}
+
+createRoot(createContainer()).render(<EffectWithState />);
diff --git a/packages/react-devtools-shell/src/perf-regression/app.js b/packages/react-devtools-shell/src/perf-regression/app.js
new file mode 100644
index 00000000000..88308e0fcf3
--- /dev/null
+++ b/packages/react-devtools-shell/src/perf-regression/app.js
@@ -0,0 +1,22 @@
+/** @flow */
+
+// This test harness mounts each test app as a separate root to test multi-root applications.
+
+import * as React from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './apps/index';
+
+function mountApp() {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}
+
+mountApp();
diff --git a/packages/react-devtools-shell/src/perf-regression/apps/LargeSubtree.js b/packages/react-devtools-shell/src/perf-regression/apps/LargeSubtree.js
new file mode 100644
index 00000000000..24ced50497a
--- /dev/null
+++ b/packages/react-devtools-shell/src/perf-regression/apps/LargeSubtree.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+function generateArray(size: number) {
+  return Array.from({length: size}, () => Math.floor(Math.random() * size));
+}
+
+const arr = generateArray(50000);
+
+export default function LargeSubtree(): React.Node {
+  const [showList, setShowList] = React.useState(false);
+  const toggleList = () => {
+    const startTime = performance.now();
+    setShowList(!showList);
+    // requestAnimationFrame should happen after render+commit is done
+    window.requestAnimationFrame(() => {
+      const afterRenderTime = performance.now();
+      console.log(
+        `Time spent on ${showList ? 'unmounting' : 'mounting'} the subtree: ${
+          afterRenderTime - startTime
+        }ms`,
+      );
+    });
+  };
+  return (
+    <div>
+      <h2>Mount/Unmount a large subtree</h2>
+      <p>Click the button to toggle the state. Open console for results.</p>
+      <button onClick={toggleList}>toggle</button>
+      <ul>
+        <li key="dummy">dummy item</li>
+        {showList && arr.map((num, idx) => <li key={idx}>{num}</li>)}
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shell/src/perf-regression/apps/index.js b/packages/react-devtools-shell/src/perf-regression/apps/index.js
new file mode 100644
index 00000000000..d135f2e5c38
--- /dev/null
+++ b/packages/react-devtools-shell/src/perf-regression/apps/index.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import LargeSubtree from './LargeSubtree';
+
+export default function Home(): React.Node {
+  return (
+    <div>
+      <LargeSubtree />
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shell/src/perf-regression/devtools.js b/packages/react-devtools-shell/src/perf-regression/devtools.js
new file mode 100644
index 00000000000..424895e41b1
--- /dev/null
+++ b/packages/react-devtools-shell/src/perf-regression/devtools.js
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import {createRoot} from 'react-dom/client';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {initialize as createDevTools} from 'react-devtools-inline/frontend';
+
+// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
+// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
+__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
+
+// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+function hookNamesModuleLoaderFunction() {
+  return import('react-devtools-inline/hookNames');
+}
+
+function inject(contentDocument, sourcePath) {
+  const script = contentDocument.createElement('script');
+  script.src = sourcePath;
+
+  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+}
+
+function init(
+  appSource: string,
+  appIframe: HTMLIFrameElement,
+  devtoolsContainer: HTMLElement,
+  loadDevToolsButton: HTMLButtonElement,
+) {
+  const {contentDocument, contentWindow} = appIframe;
+
+  initializeBackend(contentWindow);
+
+  inject(contentDocument, appSource);
+
+  loadDevToolsButton.addEventListener('click', () => {
+    const DevTools = createDevTools(contentWindow);
+    createRoot(devtoolsContainer).render(
+      <DevTools
+        hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
+        showTabBar={true}
+      />,
+    );
+    activateBackend(contentWindow);
+  });
+}
+
+init(
+  'dist/perf-regression-app.js',
+  document.getElementById('iframe'),
+  document.getElementById('devtools'),
+  document.getElementById('load-devtools'),
+);
diff --git a/packages/react-devtools-shell/webpack-server.js b/packages/react-devtools-shell/webpack-server.js
new file mode 100644
index 00000000000..4504c5ebcd0
--- /dev/null
+++ b/packages/react-devtools-shell/webpack-server.js
@@ -0,0 +1,252 @@
+const {resolve} = require('path');
+const Webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const {
+  GITHUB_URL,
+  getVersionString,
+} = require('react-devtools-extensions/utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+const semver = require('semver');
+
+const {SUCCESSFUL_COMPILATION_MESSAGE} = require('./constants');
+
+const {ReactVersion: currentReactVersion} = require('../../ReactVersions');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  console.error('NODE_ENV not set');
+  process.exit(1);
+}
+
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
+const __DEV__ = NODE_ENV === 'development';
+
+const DEVTOOLS_VERSION = getVersionString();
+
+// If the React version isn't set, we will use the
+// current React version instead. Likewise if the
+// React version isnt' set, we'll use the build folder
+// for both React DevTools and React
+const REACT_VERSION = process.env.REACT_VERSION
+  ? semver.coerce(process.env.REACT_VERSION).version
+  : currentReactVersion;
+
+const E2E_APP_BUILD_DIR = process.env.REACT_VERSION
+  ? resolve(__dirname, '..', '..', 'build-regression', 'node_modules')
+  : builtModulesDir;
+
+const makeConfig = (entry, alias) => ({
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
+  stats: {
+    preset: 'normal',
+    warningsFilter: [
+      warning => {
+        const message = warning.message;
+        // We use ReactDOM legacy APIs conditionally based on the React version.
+        // react-native-web also accesses legacy APIs statically but we don't end
+        // up using them at runtime.
+        return (
+          message.startsWith(
+            `export 'findDOMNode' (imported as 'findDOMNode') was not found in 'react-dom'`,
+          ) ||
+          message.startsWith(
+            `export 'hydrate' (reexported as 'hydrate') was not found in 'react-dom'`,
+          ) ||
+          message.startsWith(
+            `export 'render' (imported as 'render') was not found in 'react-dom'`,
+          ) ||
+          message.startsWith(
+            `export 'unmountComponentAtNode' (imported as 'unmountComponentAtNode') was not found in 'react-dom'`,
+          )
+        );
+      },
+    ],
+  },
+  entry,
+  output: {
+    publicPath: '/dist/',
+  },
+  node: {
+    global: false,
+  },
+  resolve: {
+    alias,
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new Webpack.DefinePlugin({
+      __DEV__,
+      __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
+      'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
+      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.E2E_APP_REACT_VERSION': `"${REACT_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]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+});
+
+const app = makeConfig(
+  {
+    'app-index': './src/app/index.js',
+    'app-devtools': './src/app/devtools.js',
+    'e2e-app': './src/e2e/app.js',
+    'e2e-devtools': './src/e2e/devtools.js',
+    'e2e-devtools-regression': './src/e2e-regression/devtools.js',
+    'multi-left': './src/multi/left.js',
+    'multi-devtools': './src/multi/devtools.js',
+    'multi-right': './src/multi/right.js',
+    'e2e-regression': './src/e2e-regression/app.js',
+    'perf-regression-app': './src/perf-regression/app.js',
+    'perf-regression-devtools': './src/perf-regression/devtools.js',
+  },
+  {
+    react: resolve(builtModulesDir, 'react'),
+    'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+    'react-devtools-feature-flags': resolveFeatureFlags('shell'),
+    'react-dom/client': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+    'react-dom': resolve(builtModulesDir, 'react-dom'),
+    'react-is': resolve(builtModulesDir, 'react-is'),
+    scheduler: resolve(builtModulesDir, 'scheduler'),
+  },
+);
+
+// Prior to React 18, we use ReactDOM.render rather than
+// createRoot.
+// We also use a separate build folder to build the React App
+// so that we can test the current DevTools against older version of React
+const e2eRegressionApp = semver.lt(REACT_VERSION, '18.0.0')
+  ? makeConfig(
+      {
+        'e2e-app-regression': './src/e2e-regression/app-legacy.js',
+      },
+      {
+        react: resolve(E2E_APP_BUILD_DIR, 'react'),
+        'react-dom': resolve(E2E_APP_BUILD_DIR, 'react-dom'),
+        ...(semver.satisfies(REACT_VERSION, '16.5')
+          ? {schedule: resolve(E2E_APP_BUILD_DIR, 'schedule')}
+          : {scheduler: resolve(E2E_APP_BUILD_DIR, 'scheduler')}),
+      },
+    )
+  : makeConfig(
+      {
+        'e2e-app-regression': './src/e2e-regression/app.js',
+      },
+      {
+        react: resolve(E2E_APP_BUILD_DIR, 'react'),
+        'react-dom': resolve(E2E_APP_BUILD_DIR, 'react-dom'),
+        'react-dom/client': resolve(E2E_APP_BUILD_DIR, 'react-dom/client'),
+        scheduler: resolve(E2E_APP_BUILD_DIR, 'scheduler'),
+      },
+    );
+
+const appCompiler = Webpack(app);
+const appServer = new WebpackDevServer(
+  {
+    hot: true,
+    open: true,
+    port: 8080,
+    client: {
+      logging: 'warn',
+      overlay: {
+        warnings: false,
+        runtimeErrors: error => {
+          const shouldIgnoreError =
+            error !== null &&
+            typeof error === 'object' &&
+            error.message === 'test-error-do-not-surface';
+
+          return !shouldIgnoreError;
+        },
+      },
+    },
+    static: {
+      directory: __dirname,
+      publicPath: '/',
+    },
+  },
+  appCompiler,
+);
+
+const e2eRegressionAppCompiler = Webpack(e2eRegressionApp);
+const e2eRegressionAppServer = new WebpackDevServer(
+  {
+    port: 8181,
+    client: {
+      logging: 'warn',
+      overlay: {
+        warnings: false,
+      },
+    },
+    static: {
+      publicPath: '/dist/',
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  e2eRegressionAppCompiler,
+);
+
+const runServer = async () => {
+  console.log('Starting server...');
+
+  appServer.compiler.hooks.done.tap('done', () =>
+    console.log(SUCCESSFUL_COMPILATION_MESSAGE),
+  );
+
+  await e2eRegressionAppServer.start();
+  await appServer.start();
+};
+
+runServer();
diff --git a/packages/react-devtools-timeline/README.md b/packages/react-devtools-timeline/README.md
new file mode 100644
index 00000000000..2b80944de28
--- /dev/null
+++ b/packages/react-devtools-timeline/README.md
@@ -0,0 +1,3 @@
+# React Concurrent Mode Profiler
+
+This package contains the new/experimental "timeline" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
\ No newline at end of file
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
new file mode 100644
index 00000000000..5e4df835526
--- /dev/null
+++ b/packages/react-devtools-timeline/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "react-devtools-timeline",
+  "version": "7.0.1",
+  "license": "MIT",
+  "dependencies": {
+    "@elg/speedscope": "1.9.0-a6f84db",
+    "clipboard-js": "^0.3.6",
+    "memoize-one": "^5.1.1",
+    "nullthrows": "^1.1.1",
+    "pretty-ms": "^7.0.0",
+    "react-virtualized-auto-sizer": "^1.0.23",
+    "regenerator-runtime": "^0.13.7"
+  },
+  "devDependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
+    "@reach/menu-button": "^0.16.1",
+    "@reach/tooltip": "^0.16.0",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.1",
+    "file-loader": "^6.0.0",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "vercel": "^20.1.0",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
+  }
+}
diff --git a/packages/react-devtools-timeline/src/CanvasPage.css b/packages/react-devtools-timeline/src/CanvasPage.css
new file mode 100644
index 00000000000..8c7633a1b89
--- /dev/null
+++ b/packages/react-devtools-timeline/src/CanvasPage.css
@@ -0,0 +1,7 @@
+.CanvasPage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
new file mode 100644
index 00000000000..9e861c2712a
--- /dev/null
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -0,0 +1,728 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Interaction, Point} from './view-base';
+import type {ReactEventInfo, TimelineData, ViewState} from './types';
+
+import * as React from 'react';
+import {
+  Fragment,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import {
+  HorizontalPanAndZoomView,
+  ResizableView,
+  VerticalScrollOverflowView,
+  Surface,
+  VerticalScrollView,
+  View,
+  useCanvasInteraction,
+  verticallyStackedLayout,
+  zeroPoint,
+} from './view-base';
+import {
+  ComponentMeasuresView,
+  FlamechartView,
+  NativeEventsView,
+  NetworkMeasuresView,
+  ReactMeasuresView,
+  SchedulingEventsView,
+  SnapshotsView,
+  SuspenseEventsView,
+  ThrownErrorsView,
+  TimeAxisMarkersView,
+  UserTimingMarksView,
+} from './content-views';
+import {COLORS} from './content-views/constants';
+import {clampState, moveStateToRange} from './view-base/utils/scrollState';
+import EventTooltip from './EventTooltip';
+import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
+import {TimelineSearchContext} from './TimelineSearchContext';
+import {TimelineContext} from './TimelineContext';
+import CanvasPageContextMenu from './CanvasPageContextMenu';
+
+import type {ContextMenuRef} from 'react-devtools-shared/src/devtools/ContextMenu/types';
+
+import styles from './CanvasPage.css';
+
+type Props = {
+  profilerData: TimelineData,
+  viewState: ViewState,
+};
+
+function CanvasPage({profilerData, viewState}: Props): React.Node {
+  return (
+    <div
+      className={styles.CanvasPage}
+      style={{backgroundColor: COLORS.BACKGROUND}}>
+      <AutoSizer>
+        {({height, width}: {height: number, width: number}) => (
+          <AutoSizedCanvas
+            data={profilerData}
+            height={height}
+            viewState={viewState}
+            width={width}
+          />
+        )}
+      </AutoSizer>
+    </div>
+  );
+}
+
+const EMPTY_CONTEXT_INFO: ReactEventInfo = {
+  componentMeasure: null,
+  flamechartStackFrame: null,
+  measure: null,
+  nativeEvent: null,
+  networkMeasure: null,
+  schedulingEvent: null,
+  snapshot: null,
+  suspenseEvent: null,
+  thrownError: null,
+  userTimingMark: null,
+};
+
+type AutoSizedCanvasProps = {
+  data: TimelineData,
+  height: number,
+  viewState: ViewState,
+  width: number,
+};
+
+function AutoSizedCanvas({
+  data,
+  height,
+  viewState,
+  width,
+}: AutoSizedCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  const [mouseLocation, setMouseLocation] = useState<Point>(zeroPoint); // DOM coordinates
+  const [hoveredEvent, setHoveredEvent] = useState<ReactEventInfo | null>(null);
+  const [lastHoveredEvent, setLastHoveredEvent] =
+    useState<ReactEventInfo | null>(null);
+
+  const contextMenuRef: ContextMenuRef = useRef(null);
+
+  const resetHoveredEvent = useCallback(
+    () => setHoveredEvent(EMPTY_CONTEXT_INFO),
+    [],
+  );
+  const updateHoveredEvent = useCallback(
+    (event: ReactEventInfo) => {
+      setHoveredEvent(event);
+
+      // If menu is already open, don't update the hovered event data
+      // So the same set of menu items is preserved until the current context menu is closed
+      if (contextMenuRef.current?.isShown()) {
+        return;
+      }
+
+      const {
+        componentMeasure,
+        flamechartStackFrame,
+        measure,
+        networkMeasure,
+        schedulingEvent,
+        suspenseEvent,
+      } = event;
+
+      // We have to keep track of last non-empty hovered event, since this will be the input for context menu items
+      // We can't just pass hoveredEvent to ContextMenuContainer,
+      // since it will be reset each time user moves mouse away from event object on the canvas
+      if (
+        componentMeasure != null ||
+        flamechartStackFrame != null ||
+        measure != null ||
+        networkMeasure != null ||
+        schedulingEvent != null ||
+        suspenseEvent != null
+      ) {
+        setLastHoveredEvent(event);
+      }
+    },
+    [contextMenuRef],
+  );
+
+  const {searchIndex, searchRegExp, searchResults} = useContext(
+    TimelineSearchContext,
+  );
+
+  // This effect searches timeline data and scrolls to the next match wen search criteria change.
+  useLayoutEffect(() => {
+    viewState.updateSearchRegExpState(searchRegExp);
+
+    const componentMeasureSearchResult =
+      searchResults.length > 0 ? searchResults[searchIndex] : null;
+    if (componentMeasureSearchResult != null) {
+      const scrollState = moveStateToRange({
+        state: viewState.horizontalScrollState,
+        rangeStart: componentMeasureSearchResult.timestamp,
+        rangeEnd:
+          componentMeasureSearchResult.timestamp +
+          componentMeasureSearchResult.duration,
+        contentLength: data.duration,
+        minContentLength: data.duration * MIN_ZOOM_LEVEL,
+        maxContentLength: data.duration * MAX_ZOOM_LEVEL,
+        containerLength: width,
+      });
+
+      viewState.updateHorizontalScrollState(scrollState);
+    }
+
+    surfaceRef.current.displayIfNeeded();
+  }, [searchIndex, searchRegExp, searchResults, viewState]);
+
+  const surfaceRef = useRef(new Surface(resetHoveredEvent));
+  const userTimingMarksViewRef = useRef<null | UserTimingMarksView>(null);
+  const nativeEventsViewRef = useRef<null | NativeEventsView>(null);
+  const schedulingEventsViewRef = useRef<null | SchedulingEventsView>(null);
+  const suspenseEventsViewRef = useRef<null | SuspenseEventsView>(null);
+  const componentMeasuresViewRef = useRef<null | ComponentMeasuresView>(null);
+  const reactMeasuresViewRef = useRef<null | ReactMeasuresView>(null);
+  const flamechartViewRef = useRef<null | FlamechartView>(null);
+  const networkMeasuresViewRef = useRef<null | NetworkMeasuresView>(null);
+  const snapshotsViewRef = useRef<null | SnapshotsView>(null);
+  const thrownErrorsViewRef = useRef<null | ThrownErrorsView>(null);
+
+  useLayoutEffect(() => {
+    const surface = surfaceRef.current;
+    const defaultFrame = {origin: zeroPoint, size: {width, height}};
+
+    // Auto hide context menu when panning.
+    viewState.onHorizontalScrollStateChange(scrollState => {
+      contextMenuRef.current?.hide();
+    });
+
+    // Initialize horizontal view state
+    viewState.updateHorizontalScrollState(
+      clampState({
+        state: viewState.horizontalScrollState,
+        minContentLength: data.duration * MIN_ZOOM_LEVEL,
+        maxContentLength: data.duration * MAX_ZOOM_LEVEL,
+        containerLength: defaultFrame.size.width,
+      }),
+    );
+
+    function createViewHelper(
+      view: View,
+      label: string,
+      shouldScrollVertically: boolean = false,
+      shouldResizeVertically: boolean = false,
+    ): View {
+      let verticalScrollView = null;
+      if (shouldScrollVertically) {
+        verticalScrollView = new VerticalScrollView(
+          surface,
+          defaultFrame,
+          view,
+          viewState,
+          label,
+        );
+      }
+
+      const horizontalPanAndZoomView = new HorizontalPanAndZoomView(
+        surface,
+        defaultFrame,
+        verticalScrollView !== null ? verticalScrollView : view,
+        data.duration,
+        viewState,
+      );
+
+      let resizableView = null;
+      if (shouldResizeVertically) {
+        resizableView = new ResizableView(
+          surface,
+          defaultFrame,
+          horizontalPanAndZoomView,
+          viewState,
+          canvasRef,
+          label,
+        );
+      }
+
+      return resizableView || horizontalPanAndZoomView;
+    }
+
+    const axisMarkersView = new TimeAxisMarkersView(
+      surface,
+      defaultFrame,
+      data.duration,
+    );
+    const axisMarkersViewWrapper = createViewHelper(axisMarkersView, 'time');
+
+    let userTimingMarksViewWrapper = null;
+    if (data.otherUserTimingMarks.length > 0) {
+      const userTimingMarksView = new UserTimingMarksView(
+        surface,
+        defaultFrame,
+        data.otherUserTimingMarks,
+        data.duration,
+      );
+      userTimingMarksViewRef.current = userTimingMarksView;
+      userTimingMarksViewWrapper = createViewHelper(
+        userTimingMarksView,
+        'user timing api',
+      );
+    }
+
+    let nativeEventsViewWrapper = null;
+    if (data.nativeEvents.length > 0) {
+      const nativeEventsView = new NativeEventsView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      nativeEventsViewRef.current = nativeEventsView;
+      nativeEventsViewWrapper = createViewHelper(
+        nativeEventsView,
+        'events',
+        true,
+        true,
+      );
+    }
+
+    let thrownErrorsViewWrapper = null;
+    if (data.thrownErrors.length > 0) {
+      const thrownErrorsView = new ThrownErrorsView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      thrownErrorsViewRef.current = thrownErrorsView;
+      thrownErrorsViewWrapper = createViewHelper(
+        thrownErrorsView,
+        'thrown errors',
+      );
+    }
+
+    let schedulingEventsViewWrapper = null;
+    if (data.schedulingEvents.length > 0) {
+      const schedulingEventsView = new SchedulingEventsView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      schedulingEventsViewRef.current = schedulingEventsView;
+      schedulingEventsViewWrapper = createViewHelper(
+        schedulingEventsView,
+        'react updates',
+      );
+    }
+
+    let suspenseEventsViewWrapper = null;
+    if (data.suspenseEvents.length > 0) {
+      const suspenseEventsView = new SuspenseEventsView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      suspenseEventsViewRef.current = suspenseEventsView;
+      suspenseEventsViewWrapper = createViewHelper(
+        suspenseEventsView,
+        'suspense',
+        true,
+        true,
+      );
+    }
+
+    const reactMeasuresView = new ReactMeasuresView(
+      surface,
+      defaultFrame,
+      data,
+    );
+    reactMeasuresViewRef.current = reactMeasuresView;
+    const reactMeasuresViewWrapper = createViewHelper(
+      reactMeasuresView,
+      'react scheduling',
+      true,
+      true,
+    );
+
+    let componentMeasuresViewWrapper = null;
+    if (data.componentMeasures.length > 0) {
+      const componentMeasuresView = new ComponentMeasuresView(
+        surface,
+        defaultFrame,
+        data,
+        viewState,
+      );
+      componentMeasuresViewRef.current = componentMeasuresView;
+      componentMeasuresViewWrapper = createViewHelper(
+        componentMeasuresView,
+        'react components',
+      );
+    }
+
+    let snapshotsViewWrapper = null;
+    if (data.snapshots.length > 0) {
+      const snapshotsView = new SnapshotsView(surface, defaultFrame, data);
+      snapshotsViewRef.current = snapshotsView;
+      snapshotsViewWrapper = createViewHelper(
+        snapshotsView,
+        'snapshots',
+        true,
+        true,
+      );
+    }
+
+    let networkMeasuresViewWrapper = null;
+    if (data.snapshots.length > 0) {
+      const networkMeasuresView = new NetworkMeasuresView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      networkMeasuresViewRef.current = networkMeasuresView;
+      networkMeasuresViewWrapper = createViewHelper(
+        networkMeasuresView,
+        'network',
+        true,
+        true,
+      );
+    }
+
+    let flamechartViewWrapper = null;
+    if (data.flamechart.length > 0) {
+      const flamechartView = new FlamechartView(
+        surface,
+        defaultFrame,
+        data.flamechart,
+        data.internalModuleSourceToRanges,
+        data.duration,
+      );
+      flamechartViewRef.current = flamechartView;
+      flamechartViewWrapper = createViewHelper(
+        flamechartView,
+        'flamechart',
+        true,
+        true,
+      );
+    }
+
+    // Root view contains all of the sub views defined above.
+    // The order we add them below determines their vertical position.
+    const rootView = new View(
+      surface,
+      defaultFrame,
+      verticallyStackedLayout,
+      defaultFrame,
+      COLORS.BACKGROUND,
+    );
+    rootView.addSubview(axisMarkersViewWrapper);
+    if (userTimingMarksViewWrapper !== null) {
+      rootView.addSubview(userTimingMarksViewWrapper);
+    }
+    if (nativeEventsViewWrapper !== null) {
+      rootView.addSubview(nativeEventsViewWrapper);
+    }
+    if (schedulingEventsViewWrapper !== null) {
+      rootView.addSubview(schedulingEventsViewWrapper);
+    }
+    if (thrownErrorsViewWrapper !== null) {
+      rootView.addSubview(thrownErrorsViewWrapper);
+    }
+    if (suspenseEventsViewWrapper !== null) {
+      rootView.addSubview(suspenseEventsViewWrapper);
+    }
+    if (reactMeasuresViewWrapper !== null) {
+      rootView.addSubview(reactMeasuresViewWrapper);
+    }
+    if (componentMeasuresViewWrapper !== null) {
+      rootView.addSubview(componentMeasuresViewWrapper);
+    }
+    if (snapshotsViewWrapper !== null) {
+      rootView.addSubview(snapshotsViewWrapper);
+    }
+    if (networkMeasuresViewWrapper !== null) {
+      rootView.addSubview(networkMeasuresViewWrapper);
+    }
+    if (flamechartViewWrapper !== null) {
+      rootView.addSubview(flamechartViewWrapper);
+    }
+
+    const verticalScrollOverflowView = new VerticalScrollOverflowView(
+      surface,
+      defaultFrame,
+      rootView,
+      viewState,
+    );
+
+    surfaceRef.current.rootView = verticalScrollOverflowView;
+  }, [data]);
+
+  useLayoutEffect(() => {
+    if (canvasRef.current) {
+      surfaceRef.current.setCanvas(canvasRef.current, {width, height});
+    }
+  }, [width, height]);
+
+  const interactor = useCallback((interaction: Interaction) => {
+    const canvas = canvasRef.current;
+    if (canvas === null) {
+      return;
+    }
+
+    const surface = surfaceRef.current;
+    surface.handleInteraction(interaction);
+
+    // Flush any display work that got queued up as part of the previous interaction.
+    // Typically there should be no work, but certain interactions may need a second pass.
+    // For example, the ResizableView may collapse/expand its contents,
+    // which requires a second layout pass for an ancestor VerticalScrollOverflowView.
+    //
+    // TODO It would be nice to remove this call for performance reasons.
+    // To do that, we'll need to address the UX bug with VerticalScrollOverflowView.
+    // For more info see: https://github.com/facebook/react/pull/22005#issuecomment-896953399
+    surface.displayIfNeeded();
+
+    canvas.style.cursor = surface.getCurrentCursor() || 'default';
+
+    // Defer drawing to canvas until React's commit phase, to avoid drawing
+    // twice and to ensure that both the canvas and DOM elements managed by
+    // React are in sync.
+    setMouseLocation({
+      x: interaction.payload.event.x,
+      y: interaction.payload.event.y,
+    });
+  }, []);
+
+  useCanvasInteraction(canvasRef, interactor);
+
+  const {selectEvent} = useContext(TimelineContext);
+
+  useEffect(() => {
+    const {current: userTimingMarksView} = userTimingMarksViewRef;
+    if (userTimingMarksView) {
+      userTimingMarksView.onHover = userTimingMark => {
+        if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            userTimingMark,
+          });
+        }
+      };
+    }
+
+    const {current: nativeEventsView} = nativeEventsViewRef;
+    if (nativeEventsView) {
+      nativeEventsView.onHover = nativeEvent => {
+        if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            nativeEvent,
+          });
+        }
+      };
+    }
+
+    const {current: schedulingEventsView} = schedulingEventsViewRef;
+    if (schedulingEventsView) {
+      schedulingEventsView.onHover = schedulingEvent => {
+        if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            schedulingEvent,
+          });
+        }
+      };
+      schedulingEventsView.onClick = schedulingEvent => {
+        selectEvent({
+          ...EMPTY_CONTEXT_INFO,
+          schedulingEvent,
+        });
+      };
+    }
+
+    const {current: suspenseEventsView} = suspenseEventsViewRef;
+    if (suspenseEventsView) {
+      suspenseEventsView.onHover = suspenseEvent => {
+        if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            suspenseEvent,
+          });
+        }
+      };
+    }
+
+    const {current: reactMeasuresView} = reactMeasuresViewRef;
+    if (reactMeasuresView) {
+      reactMeasuresView.onHover = measure => {
+        if (!hoveredEvent || hoveredEvent.measure !== measure) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            measure,
+          });
+        }
+      };
+    }
+
+    const {current: componentMeasuresView} = componentMeasuresViewRef;
+    if (componentMeasuresView) {
+      componentMeasuresView.onHover = componentMeasure => {
+        if (
+          !hoveredEvent ||
+          hoveredEvent.componentMeasure !== componentMeasure
+        ) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            componentMeasure,
+          });
+        }
+      };
+    }
+
+    const {current: snapshotsView} = snapshotsViewRef;
+    if (snapshotsView) {
+      snapshotsView.onHover = snapshot => {
+        if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            snapshot,
+          });
+        }
+      };
+    }
+
+    const {current: flamechartView} = flamechartViewRef;
+    if (flamechartView) {
+      flamechartView.setOnHover(flamechartStackFrame => {
+        if (
+          !hoveredEvent ||
+          hoveredEvent.flamechartStackFrame !== flamechartStackFrame
+        ) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            flamechartStackFrame,
+          });
+        }
+      });
+    }
+
+    const {current: networkMeasuresView} = networkMeasuresViewRef;
+    if (networkMeasuresView) {
+      networkMeasuresView.onHover = networkMeasure => {
+        if (!hoveredEvent || hoveredEvent.networkMeasure !== networkMeasure) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            networkMeasure,
+          });
+        }
+      };
+    }
+
+    const {current: thrownErrorsView} = thrownErrorsViewRef;
+    if (thrownErrorsView) {
+      thrownErrorsView.onHover = thrownError => {
+        if (!hoveredEvent || hoveredEvent.thrownError !== thrownError) {
+          updateHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            thrownError,
+          });
+        }
+      };
+    }
+  }, [
+    hoveredEvent,
+    data, // Attach onHover callbacks when views are re-created on data change
+  ]);
+
+  useLayoutEffect(() => {
+    const userTimingMarksView = userTimingMarksViewRef.current;
+    if (userTimingMarksView) {
+      userTimingMarksView.setHoveredMark(
+        hoveredEvent ? hoveredEvent.userTimingMark : null,
+      );
+    }
+
+    const nativeEventsView = nativeEventsViewRef.current;
+    if (nativeEventsView) {
+      nativeEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.nativeEvent : null,
+      );
+    }
+
+    const schedulingEventsView = schedulingEventsViewRef.current;
+    if (schedulingEventsView) {
+      schedulingEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.schedulingEvent : null,
+      );
+    }
+
+    const suspenseEventsView = suspenseEventsViewRef.current;
+    if (suspenseEventsView) {
+      suspenseEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.suspenseEvent : null,
+      );
+    }
+
+    const reactMeasuresView = reactMeasuresViewRef.current;
+    if (reactMeasuresView) {
+      reactMeasuresView.setHoveredMeasure(
+        hoveredEvent ? hoveredEvent.measure : null,
+      );
+    }
+
+    const flamechartView = flamechartViewRef.current;
+    if (flamechartView) {
+      flamechartView.setHoveredFlamechartStackFrame(
+        hoveredEvent ? hoveredEvent.flamechartStackFrame : null,
+      );
+    }
+
+    const networkMeasuresView = networkMeasuresViewRef.current;
+    if (networkMeasuresView) {
+      networkMeasuresView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.networkMeasure : null,
+      );
+    }
+  }, [hoveredEvent]);
+
+  // Draw to canvas in React's commit phase
+  useLayoutEffect(() => {
+    surfaceRef.current.displayIfNeeded();
+  });
+
+  return (
+    <Fragment>
+      <canvas ref={canvasRef} height={height} width={width} />
+
+      <CanvasPageContextMenu
+        canvasRef={canvasRef}
+        hoveredEvent={lastHoveredEvent}
+        timelineData={data}
+        viewState={viewState}
+        canvasWidth={width}
+        closedMenuStub={
+          !surfaceRef.current.hasActiveView() ? (
+            <EventTooltip
+              canvasRef={canvasRef}
+              data={data}
+              height={height}
+              hoveredEvent={hoveredEvent}
+              origin={mouseLocation}
+              width={width}
+            />
+          ) : null
+        }
+        ref={contextMenuRef}
+      />
+    </Fragment>
+  );
+}
+
+export default CanvasPage;
diff --git a/packages/react-devtools-timeline/src/CanvasPageContextMenu.js b/packages/react-devtools-timeline/src/CanvasPageContextMenu.js
new file mode 100644
index 00000000000..5bd4da3141b
--- /dev/null
+++ b/packages/react-devtools-timeline/src/CanvasPageContextMenu.js
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useMemo} from 'react';
+import {copy} from 'clipboard-js';
+import prettyMilliseconds from 'pretty-ms';
+
+import ContextMenuContainer from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenuContainer';
+import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+
+import {getBatchRange} from './utils/getBatchRange';
+import {moveStateToRange} from './view-base/utils/scrollState';
+import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
+
+import type {
+  ContextMenuItem,
+  ContextMenuRef,
+} from 'react-devtools-shared/src/devtools/ContextMenu/types';
+import type {
+  ReactEventInfo,
+  ReactMeasure,
+  TimelineData,
+  ViewState,
+} from './types';
+
+function zoomToBatch(
+  data: TimelineData,
+  measure: ReactMeasure,
+  viewState: ViewState,
+  width: number,
+) {
+  const {batchUID} = measure;
+  const [rangeStart, rangeEnd] = getBatchRange(batchUID, data);
+
+  // Convert from time range to ScrollState
+  const scrollState = moveStateToRange({
+    state: viewState.horizontalScrollState,
+    rangeStart,
+    rangeEnd,
+    contentLength: data.duration,
+
+    minContentLength: data.duration * MIN_ZOOM_LEVEL,
+    maxContentLength: data.duration * MAX_ZOOM_LEVEL,
+    containerLength: width,
+  });
+
+  viewState.updateHorizontalScrollState(scrollState);
+}
+
+function copySummary(data: TimelineData, measure: ReactMeasure) {
+  const {batchUID, duration, timestamp, type} = measure;
+
+  const [startTime, stopTime] = getBatchRange(batchUID, data);
+
+  copy(
+    JSON.stringify({
+      type,
+      timestamp: prettyMilliseconds(timestamp),
+      duration: prettyMilliseconds(duration),
+      batchDuration: prettyMilliseconds(stopTime - startTime),
+    }),
+  );
+}
+
+type Props = {
+  canvasRef: {current: HTMLCanvasElement | null},
+  hoveredEvent: ReactEventInfo | null,
+  timelineData: TimelineData,
+  viewState: ViewState,
+  canvasWidth: number,
+  closedMenuStub: React.Node,
+  ref: ContextMenuRef,
+};
+
+export default function CanvasPageContextMenu({
+  canvasRef,
+  timelineData,
+  hoveredEvent,
+  viewState,
+  canvasWidth,
+  closedMenuStub,
+  ref,
+}: Props): React.Node {
+  const menuItems = useMemo<ContextMenuItem[]>(() => {
+    if (hoveredEvent == null) {
+      return [];
+    }
+
+    const {
+      componentMeasure,
+      flamechartStackFrame,
+      measure,
+      networkMeasure,
+      schedulingEvent,
+      suspenseEvent,
+    } = hoveredEvent;
+    const items: ContextMenuItem[] = [];
+
+    if (componentMeasure != null) {
+      items.push({
+        onClick: () => copy(componentMeasure.componentName),
+        content: 'Copy component name',
+      });
+    }
+
+    if (networkMeasure != null) {
+      items.push({
+        onClick: () => copy(networkMeasure.url),
+        content: 'Copy URL',
+      });
+    }
+
+    if (schedulingEvent != null) {
+      items.push({
+        onClick: () => copy(schedulingEvent.componentName),
+        content: 'Copy component name',
+      });
+    }
+
+    if (suspenseEvent != null) {
+      items.push({
+        onClick: () => copy(suspenseEvent.componentName),
+        content: 'Copy component name',
+      });
+    }
+
+    if (measure != null) {
+      items.push(
+        {
+          onClick: () =>
+            zoomToBatch(timelineData, measure, viewState, canvasWidth),
+          content: 'Zoom to batch',
+        },
+        {
+          onClick: withPermissionsCheck({permissions: ['clipboardWrite']}, () =>
+            copySummary(timelineData, measure),
+          ),
+          content: 'Copy summary',
+        },
+      );
+    }
+
+    if (flamechartStackFrame != null) {
+      items.push(
+        {
+          onClick: withPermissionsCheck({permissions: ['clipboardWrite']}, () =>
+            copy(flamechartStackFrame.scriptUrl),
+          ),
+          content: 'Copy file path',
+        },
+        {
+          onClick: withPermissionsCheck({permissions: ['clipboardWrite']}, () =>
+            copy(
+              `line ${flamechartStackFrame.locationLine ?? ''}, column ${
+                flamechartStackFrame.locationColumn ?? ''
+              }`,
+            ),
+          ),
+          content: 'Copy location',
+        },
+      );
+    }
+
+    return items;
+  }, [hoveredEvent, viewState, canvasWidth]);
+
+  return (
+    <ContextMenuContainer
+      anchorElementRef={canvasRef}
+      items={menuItems}
+      closedMenuStub={closedMenuStub}
+      ref={ref}
+    />
+  );
+}
diff --git a/packages/react-devtools-timeline/src/EventTooltip.css b/packages/react-devtools-timeline/src/EventTooltip.css
new file mode 100644
index 00000000000..60551c631ef
--- /dev/null
+++ b/packages/react-devtools-timeline/src/EventTooltip.css
@@ -0,0 +1,88 @@
+.Tooltip {
+  position: fixed;
+}
+
+.TooltipSection,
+.TooltipWarningSection,
+.SingleLineTextSection {
+  display: block;
+  border-radius: 0.125rem;
+  padding: 0.25rem;
+  user-select: none;
+  pointer-events: none;
+  background-color: var(--color-tooltip-background);
+  box-shadow: 1px 1px 2px var(--color-shadow);
+  color: var(--color-tooltip-text);
+  font-size: 11px;
+}
+.TooltipWarningSection {
+  margin-top: 0.25rem;
+  background-color: var(--color-warning-background);
+}
+.TooltipSection,
+.TooltipWarningSection {
+  max-width: 300px;
+}
+.SingleLineTextSection {
+  white-space: nowrap;
+}
+
+.Divider {
+  height: 1px;
+  background-color: #aaa;
+  margin: 0.25rem 0;
+}
+
+.DetailsGrid {
+  display: grid;
+  padding-top: 5px;
+  grid-gap: 2px 5px;
+  grid-template-columns: min-content auto;
+}
+
+.DetailsGridLabel {
+  color: var(--color-dim);
+  text-align: right;
+  white-space: nowrap;
+}
+
+.DetailsGridLongValue {
+  word-break: break-all;
+  max-height: 50vh;
+  overflow: hidden;
+}
+
+.FlamechartStackFrameName {
+  word-break: break-word;
+}
+
+.ComponentName {
+  font-weight: bold;
+  word-break: break-word;
+  margin-right: 0.25rem;
+}
+
+.ReactMeasureLabel {
+}
+
+.UserTimingLabel {
+  word-break: break-word;
+}
+
+.NativeEventName {
+  font-weight: bold;
+  word-break: break-word;
+  margin-right: 0.25rem;
+}
+
+.WarningText {
+  color: var(--color-warning-text-color);
+}
+
+.Image {
+  border: 1px solid var(--color-border);
+}
+
+.DimText {
+  color: var(--color-dim);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
new file mode 100644
index 00000000000..3d3698c09f9
--- /dev/null
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -0,0 +1,513 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Point} from './view-base';
+import type {
+  FlamechartStackFrame,
+  NativeEvent,
+  NetworkMeasure,
+  ReactComponentMeasure,
+  ReactEventInfo,
+  ReactMeasure,
+  ReactMeasureType,
+  SchedulingEvent,
+  Snapshot,
+  SuspenseEvent,
+  ThrownError,
+  TimelineData,
+  UserTimingMark,
+} from './types';
+
+import * as React from 'react';
+import {
+  formatDuration,
+  formatTimestamp,
+  trimString,
+  getSchedulingEventLabel,
+} from './utils/formatting';
+import {getBatchRange} from './utils/getBatchRange';
+import useSmartTooltip from './utils/useSmartTooltip';
+import styles from './EventTooltip.css';
+
+const MAX_TOOLTIP_TEXT_LENGTH = 60;
+
+type Props = {
+  canvasRef: {current: HTMLCanvasElement | null},
+  data: TimelineData,
+  height: number,
+  hoveredEvent: ReactEventInfo | null,
+  origin: Point,
+  width: number,
+};
+
+function getReactMeasureLabel(type: ReactMeasureType): string | null {
+  switch (type) {
+    case 'commit':
+      return 'react commit';
+    case 'render-idle':
+      return 'react idle';
+    case 'render':
+      return 'react render';
+    case 'layout-effects':
+      return 'react layout effects';
+    case 'passive-effects':
+      return 'react passive effects';
+    default:
+      return null;
+  }
+}
+
+export default function EventTooltip({
+  canvasRef,
+  data,
+  height,
+  hoveredEvent,
+  origin,
+  width,
+}: Props): React.Node {
+  const ref = useSmartTooltip({
+    canvasRef,
+    mouseX: origin.x,
+    mouseY: origin.y,
+  });
+
+  if (hoveredEvent === null) {
+    return null;
+  }
+
+  const {
+    componentMeasure,
+    flamechartStackFrame,
+    measure,
+    nativeEvent,
+    networkMeasure,
+    schedulingEvent,
+    snapshot,
+    suspenseEvent,
+    thrownError,
+    userTimingMark,
+  } = hoveredEvent;
+
+  let content = null;
+  if (componentMeasure !== null) {
+    content = (
+      <TooltipReactComponentMeasure componentMeasure={componentMeasure} />
+    );
+  } else if (nativeEvent !== null) {
+    content = <TooltipNativeEvent nativeEvent={nativeEvent} />;
+  } else if (networkMeasure !== null) {
+    content = <TooltipNetworkMeasure networkMeasure={networkMeasure} />;
+  } else if (schedulingEvent !== null) {
+    content = (
+      <TooltipSchedulingEvent data={data} schedulingEvent={schedulingEvent} />
+    );
+  } else if (snapshot !== null) {
+    content = (
+      <TooltipSnapshot height={height} snapshot={snapshot} width={width} />
+    );
+  } else if (suspenseEvent !== null) {
+    content = <TooltipSuspenseEvent suspenseEvent={suspenseEvent} />;
+  } else if (measure !== null) {
+    content = <TooltipReactMeasure data={data} measure={measure} />;
+  } else if (flamechartStackFrame !== null) {
+    content = <TooltipFlamechartNode stackFrame={flamechartStackFrame} />;
+  } else if (userTimingMark !== null) {
+    content = <TooltipUserTimingMark mark={userTimingMark} />;
+  } else if (thrownError !== null) {
+    content = <TooltipThrownError thrownError={thrownError} />;
+  }
+
+  if (content !== null) {
+    return (
+      <div className={styles.Tooltip} ref={ref}>
+        {content}
+      </div>
+    );
+  } else {
+    return null;
+  }
+}
+
+const TooltipReactComponentMeasure = ({
+  componentMeasure,
+}: {
+  componentMeasure: ReactComponentMeasure,
+}) => {
+  const {componentName, duration, timestamp, type, warning} = componentMeasure;
+
+  let label = componentName;
+  switch (type) {
+    case 'render':
+      label += ' rendered';
+      break;
+    case 'layout-effect-mount':
+      label += ' mounted layout effect';
+      break;
+    case 'layout-effect-unmount':
+      label += ' unmounted layout effect';
+      break;
+    case 'passive-effect-mount':
+      label += ' mounted passive effect';
+      break;
+    case 'passive-effect-unmount':
+      label += ' unmounted passive effect';
+      break;
+  }
+
+  return (
+    <>
+      <div className={styles.TooltipSection}>
+        {trimString(label, 768)}
+        <div className={styles.Divider} />
+        <div className={styles.DetailsGrid}>
+          <div className={styles.DetailsGridLabel}>Timestamp:</div>
+          <div>{formatTimestamp(timestamp)}</div>
+          <div className={styles.DetailsGridLabel}>Duration:</div>
+          <div>{formatDuration(duration)}</div>
+        </div>
+      </div>
+      {warning !== null && (
+        <div className={styles.TooltipWarningSection}>
+          <div className={styles.WarningText}>{warning}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const TooltipFlamechartNode = ({
+  stackFrame,
+}: {
+  stackFrame: FlamechartStackFrame,
+}) => {
+  const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;
+  return (
+    <div className={styles.TooltipSection}>
+      <span className={styles.FlamechartStackFrameName}>{name}</span>
+      <div className={styles.DetailsGrid}>
+        <div className={styles.DetailsGridLabel}>Timestamp:</div>
+        <div>{formatTimestamp(timestamp)}</div>
+        <div className={styles.DetailsGridLabel}>Duration:</div>
+        <div>{formatDuration(duration)}</div>
+        {(locationLine !== undefined || locationColumn !== undefined) && (
+          <>
+            <div className={styles.DetailsGridLabel}>Location:</div>
+            <div>
+              line {locationLine}, column {locationColumn}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const TooltipNativeEvent = ({nativeEvent}: {nativeEvent: NativeEvent}) => {
+  const {duration, timestamp, type, warning} = nativeEvent;
+
+  return (
+    <>
+      <div className={styles.TooltipSection}>
+        <span className={styles.NativeEventName}>{trimString(type, 768)}</span>
+        event
+        <div className={styles.Divider} />
+        <div className={styles.DetailsGrid}>
+          <div className={styles.DetailsGridLabel}>Timestamp:</div>
+          <div>{formatTimestamp(timestamp)}</div>
+          <div className={styles.DetailsGridLabel}>Duration:</div>
+          <div>{formatDuration(duration)}</div>
+        </div>
+      </div>
+      {warning !== null && (
+        <div className={styles.TooltipWarningSection}>
+          <div className={styles.WarningText}>{warning}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const TooltipNetworkMeasure = ({
+  networkMeasure,
+}: {
+  networkMeasure: NetworkMeasure,
+}) => {
+  const {
+    finishTimestamp,
+    lastReceivedDataTimestamp,
+    priority,
+    sendRequestTimestamp,
+    url,
+  } = networkMeasure;
+
+  let urlToDisplay = url;
+  if (urlToDisplay.length > MAX_TOOLTIP_TEXT_LENGTH) {
+    const half = Math.floor(MAX_TOOLTIP_TEXT_LENGTH / 2);
+    urlToDisplay = url.slice(0, half) + '…' + url.slice(url.length - half);
+  }
+
+  const timestampBegin = sendRequestTimestamp;
+  const timestampEnd = finishTimestamp || lastReceivedDataTimestamp;
+  const duration =
+    timestampEnd > 0
+      ? formatDuration(finishTimestamp - timestampBegin)
+      : '(incomplete)';
+
+  return (
+    <div className={styles.SingleLineTextSection}>
+      {duration} <span className={styles.DimText}>{priority}</span>{' '}
+      {urlToDisplay}
+    </div>
+  );
+};
+
+const TooltipSchedulingEvent = ({
+  data,
+  schedulingEvent,
+}: {
+  data: TimelineData,
+  schedulingEvent: SchedulingEvent,
+}) => {
+  const label = getSchedulingEventLabel(schedulingEvent);
+  if (!label) {
+    if (__DEV__) {
+      console.warn(
+        'Unexpected schedulingEvent type "%s"',
+        schedulingEvent.type,
+      );
+    }
+    return null;
+  }
+
+  let laneLabels = null;
+  let lanes = null;
+  switch (schedulingEvent.type) {
+    case 'schedule-render':
+    case 'schedule-state-update':
+    case 'schedule-force-update':
+      lanes = schedulingEvent.lanes;
+      laneLabels = lanes.map(
+        lane => ((data.laneToLabelMap.get(lane): any): string),
+      );
+      break;
+  }
+
+  const {componentName, timestamp, warning} = schedulingEvent;
+
+  return (
+    <>
+      <div className={styles.TooltipSection}>
+        {componentName && (
+          <span className={styles.ComponentName}>
+            {trimString(componentName, 100)}
+          </span>
+        )}
+        {label}
+        <div className={styles.Divider} />
+        <div className={styles.DetailsGrid}>
+          {laneLabels !== null && lanes !== null && (
+            <>
+              <div className={styles.DetailsGridLabel}>Lanes:</div>
+              <div>
+                {laneLabels.join(', ')} ({lanes.join(', ')})
+              </div>
+            </>
+          )}
+          <div className={styles.DetailsGridLabel}>Timestamp:</div>
+          <div>{formatTimestamp(timestamp)}</div>
+        </div>
+      </div>
+      {warning !== null && (
+        <div className={styles.TooltipWarningSection}>
+          <div className={styles.WarningText}>{warning}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const TooltipSnapshot = ({
+  height,
+  snapshot,
+  width,
+}: {
+  height: number,
+  snapshot: Snapshot,
+  width: number,
+}) => {
+  const aspectRatio = snapshot.width / snapshot.height;
+
+  // Zoomed in view should not be any bigger than the DevTools viewport.
+  let safeWidth = snapshot.width;
+  let safeHeight = snapshot.height;
+  if (safeWidth > width) {
+    safeWidth = width;
+    safeHeight = safeWidth / aspectRatio;
+  }
+  if (safeHeight > height) {
+    safeHeight = height;
+    safeWidth = safeHeight * aspectRatio;
+  }
+
+  return (
+    <img
+      className={styles.Image}
+      src={snapshot.imageSource}
+      style={{height: safeHeight, width: safeWidth}}
+    />
+  );
+};
+
+const TooltipSuspenseEvent = ({
+  suspenseEvent,
+}: {
+  suspenseEvent: SuspenseEvent,
+}) => {
+  const {
+    componentName,
+    duration,
+    phase,
+    promiseName,
+    resolution,
+    timestamp,
+    warning,
+  } = suspenseEvent;
+
+  let label = 'suspended';
+  if (phase !== null) {
+    label += ` during ${phase}`;
+  }
+
+  return (
+    <>
+      <div className={styles.TooltipSection}>
+        {componentName && (
+          <span className={styles.ComponentName}>
+            {trimString(componentName, 100)}
+          </span>
+        )}
+        {label}
+        <div className={styles.Divider} />
+        <div className={styles.DetailsGrid}>
+          {promiseName !== null && (
+            <>
+              <div className={styles.DetailsGridLabel}>Resource:</div>
+              <div className={styles.DetailsGridLongValue}>{promiseName}</div>
+            </>
+          )}
+          <div className={styles.DetailsGridLabel}>Status:</div>
+          <div>{resolution}</div>
+          <div className={styles.DetailsGridLabel}>Timestamp:</div>
+          <div>{formatTimestamp(timestamp)}</div>
+          {duration !== null && (
+            <>
+              <div className={styles.DetailsGridLabel}>Duration:</div>
+              <div>{formatDuration(duration)}</div>
+            </>
+          )}
+        </div>
+      </div>
+      {warning !== null && (
+        <div className={styles.TooltipWarningSection}>
+          <div className={styles.WarningText}>{warning}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const TooltipReactMeasure = ({
+  data,
+  measure,
+}: {
+  data: TimelineData,
+  measure: ReactMeasure,
+}) => {
+  const label = getReactMeasureLabel(measure.type);
+  if (!label) {
+    if (__DEV__) {
+      console.warn('Unexpected measure type "%s"', measure.type);
+    }
+    return null;
+  }
+
+  const {batchUID, duration, timestamp, lanes} = measure;
+  const [startTime, stopTime] = getBatchRange(batchUID, data);
+
+  const laneLabels = lanes.map(
+    lane => ((data.laneToLabelMap.get(lane): any): string),
+  );
+
+  return (
+    <div className={styles.TooltipSection}>
+      <span className={styles.ReactMeasureLabel}>{label}</span>
+      <div className={styles.Divider} />
+      <div className={styles.DetailsGrid}>
+        <div className={styles.DetailsGridLabel}>Timestamp:</div>
+        <div>{formatTimestamp(timestamp)}</div>
+        {measure.type !== 'render-idle' && (
+          <>
+            <div className={styles.DetailsGridLabel}>Duration:</div>
+            <div>{formatDuration(duration)}</div>
+          </>
+        )}
+        <div className={styles.DetailsGridLabel}>Batch duration:</div>
+        <div>{formatDuration(stopTime - startTime)}</div>
+        <div className={styles.DetailsGridLabel}>
+          Lane{lanes.length === 1 ? '' : 's'}:
+        </div>
+        <div>
+          {laneLabels.length > 0
+            ? `${laneLabels.join(', ')} (${lanes.join(', ')})`
+            : lanes.join(', ')}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const TooltipUserTimingMark = ({mark}: {mark: UserTimingMark}) => {
+  const {name, timestamp} = mark;
+  return (
+    <div className={styles.TooltipSection}>
+      <span className={styles.UserTimingLabel}>{name}</span>
+      <div className={styles.Divider} />
+      <div className={styles.DetailsGrid}>
+        <div className={styles.DetailsGridLabel}>Timestamp:</div>
+        <div>{formatTimestamp(timestamp)}</div>
+      </div>
+    </div>
+  );
+};
+
+const TooltipThrownError = ({thrownError}: {thrownError: ThrownError}) => {
+  const {componentName, message, phase, timestamp} = thrownError;
+  const label = `threw an error during ${phase}`;
+  return (
+    <div className={styles.TooltipSection}>
+      {componentName && (
+        <span className={styles.ComponentName}>
+          {trimString(componentName, 100)}
+        </span>
+      )}
+      <span className={styles.UserTimingLabel}>{label}</span>
+      <div className={styles.Divider} />
+      <div className={styles.DetailsGrid}>
+        <div className={styles.DetailsGridLabel}>Timestamp:</div>
+        <div>{formatTimestamp(timestamp)}</div>
+        {message !== '' && (
+          <>
+            <div className={styles.DetailsGridLabel}>Error:</div>
+            <div>{message}</div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/react-devtools-timeline/src/Timeline.css b/packages/react-devtools-timeline/src/Timeline.css
new file mode 100644
index 00000000000..977516fdb25
--- /dev/null
+++ b/packages/react-devtools-timeline/src/Timeline.css
@@ -0,0 +1,34 @@
+.Content {
+  width: 100%;
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.ErrorMessage {
+  margin: 0.5rem 0;
+  color: var(--color-dim);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-flow: wrap;
+}
+
+.EmptyStateContainer {
+  text-align: center;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
new file mode 100644
index 00000000000..f209309bb0a
--- /dev/null
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ViewState} from './types';
+
+import * as React from 'react';
+import {
+  Suspense,
+  useContext,
+  useDeferredValue,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
+import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
+import NoProfilingData from 'react-devtools-shared/src/devtools/views/Profiler/NoProfilingData';
+import RecordingInProgress from 'react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress';
+import {updateColorsToMatchTheme} from './content-views/constants';
+import {TimelineContext} from './TimelineContext';
+import CanvasPage from './CanvasPage';
+import {importFile} from './timelineCache';
+import TimelineSearchInput from './TimelineSearchInput';
+import TimelineNotSupported from './TimelineNotSupported';
+import {TimelineSearchContextController} from './TimelineSearchContext';
+
+import styles from './Timeline.css';
+
+export function Timeline(_: {}): React.Node {
+  const {
+    file,
+    inMemoryTimelineData,
+    isPerformanceTracksSupported,
+    isTimelineSupported,
+    setFile,
+    viewState,
+  } = useContext(TimelineContext);
+  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
+
+  const ref = useRef(null);
+
+  // HACK: Canvas rendering uses an imperative API,
+  // but DevTools colors are stored in CSS variables (see root.css and SettingsContext).
+  // When the theme changes, we need to trigger update the imperative colors and re-draw the Canvas.
+  const {theme} = useContext(SettingsContext);
+  // HACK: SettingsContext also uses a useLayoutEffect to update styles;
+  // make sure the theme context in SettingsContext updates before this code.
+  const deferredTheme = useDeferredValue(theme);
+  // HACK: Schedule a re-render of the Canvas once colors have been updated.
+  // The easiest way to guarangee this happens is to recreate the inner Canvas component.
+  const [key, setKey] = useState<string>(theme);
+  useLayoutEffect(() => {
+    const pollForTheme = () => {
+      if (updateColorsToMatchTheme(((ref.current: any): HTMLDivElement))) {
+        clearInterval(intervalID);
+        setKey(deferredTheme);
+      }
+    };
+
+    const intervalID = setInterval(pollForTheme, 50);
+
+    return () => {
+      clearInterval(intervalID);
+    };
+  }, [deferredTheme]);
+
+  let content = null;
+  if (isProfiling) {
+    content = <RecordingInProgress />;
+  } else if (inMemoryTimelineData && inMemoryTimelineData.length > 0) {
+    // TODO (timeline) Support multiple renderers.
+    const timelineData = inMemoryTimelineData[0];
+
+    content = (
+      <TimelineSearchContextController
+        profilerData={timelineData}
+        viewState={viewState}>
+        <TimelineSearchInput />
+        <CanvasPage profilerData={timelineData} viewState={viewState} />
+      </TimelineSearchContextController>
+    );
+  } else if (file) {
+    content = (
+      <Suspense fallback={<ProcessingData />}>
+        <FileLoader
+          file={file}
+          key={key}
+          onFileSelect={setFile}
+          viewState={viewState}
+        />
+      </Suspense>
+    );
+  } else if (didRecordCommits) {
+    content = <NoTimelineData />;
+  } else if (isTimelineSupported) {
+    content = <NoProfilingData />;
+  } else {
+    content = (
+      <TimelineNotSupported
+        isPerformanceTracksSupported={isPerformanceTracksSupported}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.Content} ref={ref}>
+      {content}
+    </div>
+  );
+}
+
+const ProcessingData = () => (
+  <div className={styles.EmptyStateContainer}>
+    <div className={styles.Header}>Processing data...</div>
+    <div className={styles.Row}>This should only take a minute.</div>
+  </div>
+);
+
+// $FlowFixMe[missing-local-annot]
+const CouldNotLoadProfile = ({error, onFileSelect}) => (
+  <div className={styles.EmptyStateContainer}>
+    <div className={styles.Header}>Could not load profile</div>
+    {error.message && (
+      <div className={styles.Row}>
+        <div className={styles.ErrorMessage}>{error.message}</div>
+      </div>
+    )}
+    <div className={styles.Row}>
+      Try importing another Chrome performance profile.
+    </div>
+  </div>
+);
+
+const NoTimelineData = () => (
+  <div className={styles.EmptyStateContainer}>
+    <div className={styles.Row}>
+      This current profile does not contain timeline data.
+    </div>
+  </div>
+);
+
+const FileLoader = ({
+  file,
+  onFileSelect,
+  viewState,
+}: {
+  file: File | null,
+  onFileSelect: (file: File) => void,
+  viewState: ViewState,
+}) => {
+  if (file === null) {
+    return null;
+  }
+
+  const dataOrError = importFile(file);
+  if (dataOrError instanceof Error) {
+    return (
+      <CouldNotLoadProfile error={dataOrError} onFileSelect={onFileSelect} />
+    );
+  }
+
+  return (
+    <TimelineSearchContextController
+      profilerData={dataOrError}
+      viewState={viewState}>
+      <TimelineSearchInput />
+      <CanvasPage profilerData={dataOrError} viewState={viewState} />
+    </TimelineSearchContextController>
+  );
+};
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
new file mode 100644
index 00000000000..7835158e989
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, RefObject} from 'shared/ReactTypes';
+
+import * as React from 'react';
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
+
+import type {
+  HorizontalScrollStateChangeCallback,
+  TimelineData,
+  SearchRegExpStateChangeCallback,
+  ViewState,
+  ReactEventInfo,
+} from './types';
+
+export type Context = {
+  file: File | null,
+  inMemoryTimelineData: Array<TimelineData> | null,
+  isPerformanceTracksSupported: boolean,
+  isTimelineSupported: boolean,
+  searchInputContainerRef: RefObject,
+  setFile: (file: File | null) => void,
+  viewState: ViewState,
+  selectEvent: ReactEventInfo => void,
+  selectedEvent: ReactEventInfo,
+};
+
+const TimelineContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+TimelineContext.displayName = 'TimelineContext';
+
+type Props = {
+  children: React$Node,
+};
+
+function TimelineContextController({children}: Props): React.Node {
+  const searchInputContainerRef = useRef(null);
+  const [file, setFile] = useState<string | null>(null);
+
+  const store = useContext(StoreContext);
+
+  const isTimelineSupported = useSyncExternalStore<boolean>(
+    function subscribe(callback) {
+      store.addListener('rootSupportsTimelineProfiling', callback);
+      return function unsubscribe() {
+        store.removeListener('rootSupportsTimelineProfiling', callback);
+      };
+    },
+    function getState() {
+      return store.rootSupportsTimelineProfiling;
+    },
+  );
+
+  const isPerformanceTracksSupported = useSyncExternalStore<boolean>(
+    function subscribe(callback) {
+      store.addListener('rootSupportsPerformanceTracks', callback);
+      return function unsubscribe() {
+        store.removeListener('rootSupportsPerformanceTracks', callback);
+      };
+    },
+    function getState() {
+      return store.rootSupportsPerformanceTracks;
+    },
+  );
+
+  const inMemoryTimelineData = useSyncExternalStore<Array<TimelineData> | null>(
+    function subscribe(callback) {
+      store.profilerStore.addListener('isProcessingData', callback);
+      store.profilerStore.addListener('profilingData', callback);
+      return function unsubscribe() {
+        store.profilerStore.removeListener('isProcessingData', callback);
+        store.profilerStore.removeListener('profilingData', callback);
+      };
+    },
+    function getState() {
+      return store.profilerStore.profilingData?.timelineData || null;
+    },
+  );
+
+  // Recreate view state any time new profiling data is imported.
+  const viewState = useMemo<ViewState>(() => {
+    const horizontalScrollStateChangeCallbacks: Set<HorizontalScrollStateChangeCallback> =
+      new Set();
+    const searchRegExpStateChangeCallbacks: Set<SearchRegExpStateChangeCallback> =
+      new Set();
+
+    const horizontalScrollState = {
+      offset: 0,
+      length: 0,
+    };
+
+    const state: ViewState = {
+      horizontalScrollState,
+      onHorizontalScrollStateChange: callback => {
+        horizontalScrollStateChangeCallbacks.add(callback);
+      },
+      onSearchRegExpStateChange: callback => {
+        searchRegExpStateChangeCallbacks.add(callback);
+      },
+      searchRegExp: null,
+      updateHorizontalScrollState: scrollState => {
+        if (
+          horizontalScrollState.offset === scrollState.offset &&
+          horizontalScrollState.length === scrollState.length
+        ) {
+          return;
+        }
+
+        horizontalScrollState.offset = scrollState.offset;
+        horizontalScrollState.length = scrollState.length;
+
+        horizontalScrollStateChangeCallbacks.forEach(callback => {
+          callback(scrollState);
+        });
+      },
+      updateSearchRegExpState: (searchRegExp: RegExp | null) => {
+        state.searchRegExp = searchRegExp;
+
+        searchRegExpStateChangeCallbacks.forEach(callback => {
+          callback(searchRegExp);
+        });
+      },
+      viewToMutableViewStateMap: new Map(),
+    };
+
+    return state;
+  }, [file]);
+
+  const [selectedEvent, selectEvent] = useState<ReactEventInfo | null>(null);
+
+  const value = useMemo(
+    () => ({
+      file,
+      inMemoryTimelineData,
+      isPerformanceTracksSupported,
+      isTimelineSupported,
+      searchInputContainerRef,
+      setFile,
+      viewState,
+      selectEvent,
+      selectedEvent,
+    }),
+    [
+      file,
+      inMemoryTimelineData,
+      isPerformanceTracksSupported,
+      isTimelineSupported,
+      setFile,
+      viewState,
+      selectEvent,
+      selectedEvent,
+    ],
+  );
+
+  return (
+    <TimelineContext.Provider value={value}>
+      {children}
+    </TimelineContext.Provider>
+  );
+}
+
+export {TimelineContext, TimelineContextController};
diff --git a/packages/react-devtools-timeline/src/TimelineNotSupported.css b/packages/react-devtools-timeline/src/TimelineNotSupported.css
new file mode 100644
index 00000000000..971723520a4
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineNotSupported.css
@@ -0,0 +1,38 @@
+.Column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  margin-bottom: 0.5rem;
+}
+
+.Paragraph {
+  text-align: center;
+  margin: 0;
+}
+
+.Link {
+  color: var(--color-link);
+}
+
+.LearnMoreRow {
+  margin-top: 1rem;
+  color: var(--color-dim);
+  font-size: var(--font-size-sans-small);
+}
+
+.Code {
+  color: var(--color-bridge-version-number);
+}
+
+.MetaGKRow {
+  background: var(--color-background-hover);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-timeline/src/TimelineNotSupported.js b/packages/react-devtools-timeline/src/TimelineNotSupported.js
new file mode 100644
index 00000000000..7eac79da94f
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineNotSupported.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+
+import styles from './TimelineNotSupported.css';
+
+type Props = {
+  isPerformanceTracksSupported: boolean,
+};
+
+function PerformanceTracksSupported() {
+  return (
+    <>
+      <p className={styles.Paragraph}>
+        <span>
+          Please use{' '}
+          <a
+            className={styles.Link}
+            href="https://react.dev/reference/dev-tools/react-performance-tracks"
+            rel="noopener noreferrer"
+            target="_blank">
+            React Performance tracks
+          </a>{' '}
+          instead of the Timeline profiler.
+        </span>
+      </p>
+    </>
+  );
+}
+
+function UnknownUnsupportedReason() {
+  return (
+    <>
+      <p className={styles.Paragraph}>
+        Timeline profiler requires a development or profiling build of{' '}
+        <code className={styles.Code}>react-dom@{'>='}18</code>.
+      </p>
+      <p className={styles.Paragraph}>
+        In React 19.2 and above{' '}
+        <a
+          className={styles.Link}
+          href="https://react.dev/reference/dev-tools/react-performance-tracks"
+          rel="noopener noreferrer"
+          target="_blank">
+          React Performance tracks
+        </a>{' '}
+        can be used instead.
+      </p>
+      <div className={styles.LearnMoreRow}>
+        Click{' '}
+        <a
+          className={styles.Link}
+          href="https://fb.me/react-devtools-profiling"
+          rel="noopener noreferrer"
+          target="_blank">
+          here
+        </a>{' '}
+        to learn more about profiling.
+      </div>
+    </>
+  );
+}
+
+export default function TimelineNotSupported({
+  isPerformanceTracksSupported,
+}: Props): React.Node {
+  return (
+    <div className={styles.Column}>
+      <div className={styles.Header}>Timeline profiling not supported.</div>
+
+      {isPerformanceTracksSupported ? (
+        <PerformanceTracksSupported />
+      ) : (
+        <UnknownUnsupportedReason />
+      )}
+
+      {isInternalFacebookBuild && (
+        <div className={styles.MetaGKRow}>
+          <strong>Meta only</strong>: Enable the{' '}
+          <a
+            className={styles.Link}
+            href="https://fburl.com/react-devtools-scheduling-profiler-gk"
+            rel="noopener noreferrer"
+            target="_blank">
+            react_enable_scheduling_profiler GK
+          </a>
+          .
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
new file mode 100644
index 00000000000..604dbf18060
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {createContext, useMemo, useReducer} from 'react';
+
+import type {ReactComponentMeasure, TimelineData, ViewState} from './types';
+
+type State = {
+  profilerData: TimelineData,
+  searchIndex: number,
+  searchRegExp: RegExp | null,
+  searchResults: Array<ReactComponentMeasure>,
+  searchText: string,
+};
+
+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_SET_SEARCH_TEXT = {
+  type: 'SET_SEARCH_TEXT',
+  payload: string,
+};
+
+type Action =
+  | ACTION_GO_TO_NEXT_SEARCH_RESULT
+  | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT
+  | ACTION_SET_SEARCH_TEXT;
+
+type Dispatch = (action: Action) => void;
+
+const EMPTY_ARRAY: Array<ReactComponentMeasure> = [];
+
+function reducer(state: State, action: Action): State {
+  let {searchIndex, searchRegExp, searchResults, searchText} = state;
+
+  switch (action.type) {
+    case 'GO_TO_NEXT_SEARCH_RESULT':
+      if (searchResults.length > 0) {
+        if (searchIndex === -1 || searchIndex + 1 === searchResults.length) {
+          searchIndex = 0;
+        } else {
+          searchIndex++;
+        }
+      }
+      break;
+    case 'GO_TO_PREVIOUS_SEARCH_RESULT':
+      if (searchResults.length > 0) {
+        if (searchIndex === -1 || searchIndex === 0) {
+          searchIndex = searchResults.length - 1;
+        } else {
+          searchIndex--;
+        }
+      }
+      break;
+    case 'SET_SEARCH_TEXT':
+      searchText = action.payload;
+      searchRegExp = null;
+      searchResults = [];
+
+      if (searchText !== '') {
+        const safeSearchText = searchText.replace(
+          /[.*+?^${}()|[\]\\]/g,
+          '\\$&',
+        );
+        searchRegExp = new RegExp(`^${safeSearchText}`, 'i');
+
+        // If something is zoomed in on already, and the new search still contains it,
+        // don't change the selection (even if overall search results set changes).
+        let prevSelectedMeasure = null;
+        if (searchIndex >= 0 && searchResults.length > searchIndex) {
+          prevSelectedMeasure = searchResults[searchIndex];
+        }
+
+        const componentMeasures = state.profilerData.componentMeasures;
+
+        let prevSelectedMeasureIndex = -1;
+
+        for (let i = 0; i < componentMeasures.length; i++) {
+          const componentMeasure = componentMeasures[i];
+          if (componentMeasure.componentName.match(searchRegExp)) {
+            searchResults.push(componentMeasure);
+
+            if (componentMeasure === prevSelectedMeasure) {
+              prevSelectedMeasureIndex = searchResults.length - 1;
+            }
+          }
+        }
+
+        searchIndex =
+          prevSelectedMeasureIndex >= 0 ? prevSelectedMeasureIndex : 0;
+      }
+      break;
+  }
+
+  return {
+    profilerData: state.profilerData,
+    searchIndex,
+    searchRegExp,
+    searchResults,
+    searchText,
+  };
+}
+
+export type Context = {
+  profilerData: TimelineData,
+
+  // Search state
+  dispatch: Dispatch,
+  searchIndex: number,
+  searchRegExp: null,
+  searchResults: Array<ReactComponentMeasure>,
+  searchText: string,
+};
+
+const TimelineSearchContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
+TimelineSearchContext.displayName = 'TimelineSearchContext';
+
+type Props = {
+  children: React$Node,
+  profilerData: TimelineData,
+  viewState: ViewState,
+};
+
+function TimelineSearchContextController({
+  children,
+  profilerData,
+  viewState,
+}: Props): React.Node {
+  const [state, dispatch] = useReducer<State, State, Action>(reducer, {
+    profilerData,
+    searchIndex: -1,
+    searchRegExp: null,
+    searchResults: EMPTY_ARRAY,
+    searchText: '',
+  });
+
+  const value = useMemo(
+    () => ({
+      ...state,
+      dispatch,
+    }),
+    [state],
+  );
+
+  return (
+    <TimelineSearchContext.Provider value={value}>
+      {children}
+    </TimelineSearchContext.Provider>
+  );
+}
+
+export {TimelineSearchContext, TimelineSearchContextController};
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js
new file mode 100644
index 00000000000..c448bded2a3
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {useContext} from 'react';
+import {createPortal} from 'react-dom';
+import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
+import {TimelineContext} from './TimelineContext';
+import {TimelineSearchContext} from './TimelineSearchContext';
+
+type Props = {};
+
+export default function TimelineSearchInput(props: Props): React.Node {
+  const {searchInputContainerRef} = useContext(TimelineContext);
+  const {dispatch, searchIndex, searchResults, searchText} = useContext(
+    TimelineSearchContext,
+  );
+
+  if (searchInputContainerRef.current === null) {
+    return null;
+  }
+
+  const search = (text: string) =>
+    dispatch({type: 'SET_SEARCH_TEXT', payload: text});
+  const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
+  const goToPreviousResult = () =>
+    dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
+
+  return createPortal(
+    <SearchInput
+      goToNextResult={goToNextResult}
+      goToPreviousResult={goToPreviousResult}
+      placeholder="Search components by name"
+      search={search}
+      searchIndex={searchIndex}
+      searchResultsCount={searchResults.length}
+      searchText={searchText}
+    />,
+    searchInputContainerRef.current,
+  );
+}
diff --git a/packages/react-devtools-timeline/src/constants.js b/packages/react-devtools-timeline/src/constants.js
new file mode 100644
index 00000000000..92c75d8e9f9
--- /dev/null
+++ b/packages/react-devtools-timeline/src/constants.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  COMFORTABLE_LINE_HEIGHT,
+  COMPACT_LINE_HEIGHT,
+} from 'react-devtools-shared/src/devtools/constants.js';
+
+export const REACT_TOTAL_NUM_LANES = 31;
+
+// Increment this number any time a backwards breaking change is made to the profiler metadata.
+export const SCHEDULING_PROFILER_VERSION = 1;
+
+export const SNAPSHOT_MAX_HEIGHT = 60;
diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
new file mode 100644
index 00000000000..0e4a5727e20
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -0,0 +1,301 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactComponentMeasure, TimelineData, ViewState} from '../types';
+import type {
+  Interaction,
+  IntrinsicSize,
+  MouseMoveInteraction,
+  Rect,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  positionToTimestamp,
+  timestampToPosition,
+} from './utils/positioning';
+import {drawText} from './utils/text';
+import {formatDuration} from '../utils/formatting';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {BORDER_SIZE, COLORS, NATIVE_EVENT_HEIGHT} from './constants';
+
+const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
+
+export class ComponentMeasuresView extends View {
+  _cachedSearchMatches: Map<string, boolean>;
+  _cachedSearchRegExp: RegExp | null = null;
+  _hoveredComponentMeasure: ReactComponentMeasure | null = null;
+  _intrinsicSize: IntrinsicSize;
+  _profilerData: TimelineData;
+  _viewState: ViewState;
+
+  onHover: ((event: ReactComponentMeasure | null) => void) | null = null;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    profilerData: TimelineData,
+    viewState: ViewState,
+  ) {
+    super(surface, frame);
+
+    this._profilerData = profilerData;
+    this._viewState = viewState;
+
+    this._cachedSearchMatches = new Map();
+    this._cachedSearchRegExp = null;
+
+    viewState.onSearchRegExpStateChange(() => {
+      this.setNeedsDisplay();
+    });
+
+    this._intrinsicSize = {
+      width: profilerData.duration,
+      height: ROW_WITH_BORDER_HEIGHT,
+    };
+  }
+
+  desiredSize(): IntrinsicSize {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(hoveredEvent: ReactComponentMeasure | null) {
+    if (this._hoveredComponentMeasure === hoveredEvent) {
+      return;
+    }
+    this._hoveredComponentMeasure = hoveredEvent;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `ReactComponentMeasure` as a box/span with text inside of it.
+   */
+  _drawSingleReactComponentMeasure(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    componentMeasure: ReactComponentMeasure,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ): boolean {
+    const {frame} = this;
+    const {componentName, duration, timestamp, type, warning} =
+      componentMeasure;
+
+    const xStart = timestampToPosition(timestamp, scaleFactor, frame);
+    const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
+    const componentMeasureRect: Rect = {
+      origin: {
+        x: xStart,
+        y: frame.origin.y,
+      },
+      size: {width: xStop - xStart, height: NATIVE_EVENT_HEIGHT},
+    };
+    if (!rectIntersectsRect(componentMeasureRect, rect)) {
+      return false; // Not in view
+    }
+
+    const width = durationToWidth(duration, scaleFactor);
+    if (width < 1) {
+      return false; // Too small to render at this zoom level
+    }
+
+    let textFillStyle = ((null: any): string);
+    let typeLabel = ((null: any): string);
+
+    const drawableRect = intersectionOfRects(componentMeasureRect, rect);
+    context.beginPath();
+    if (warning !== null) {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.WARNING_BACKGROUND_HOVER
+        : COLORS.WARNING_BACKGROUND;
+    } else {
+      switch (type) {
+        case 'render':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_RENDER_HOVER
+            : COLORS.REACT_RENDER;
+          textFillStyle = COLORS.REACT_RENDER_TEXT;
+          typeLabel = 'rendered';
+          break;
+        case 'layout-effect-mount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_LAYOUT_EFFECTS_HOVER
+            : COLORS.REACT_LAYOUT_EFFECTS;
+          textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
+          typeLabel = 'mounted layout effect';
+          break;
+        case 'layout-effect-unmount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_LAYOUT_EFFECTS_HOVER
+            : COLORS.REACT_LAYOUT_EFFECTS;
+          textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
+          typeLabel = 'unmounted layout effect';
+          break;
+        case 'passive-effect-mount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_PASSIVE_EFFECTS_HOVER
+            : COLORS.REACT_PASSIVE_EFFECTS;
+          textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
+          typeLabel = 'mounted passive effect';
+          break;
+        case 'passive-effect-unmount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_PASSIVE_EFFECTS_HOVER
+            : COLORS.REACT_PASSIVE_EFFECTS;
+          textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
+          typeLabel = 'unmounted passive effect';
+          break;
+      }
+    }
+
+    let isMatch = false;
+    const cachedSearchRegExp = this._cachedSearchRegExp;
+    if (cachedSearchRegExp !== null) {
+      const cachedSearchMatches = this._cachedSearchMatches;
+      const cachedValue = cachedSearchMatches.get(componentName);
+      if (cachedValue != null) {
+        isMatch = cachedValue;
+      } else {
+        isMatch = componentName.match(cachedSearchRegExp) !== null;
+        cachedSearchMatches.set(componentName, isMatch);
+      }
+    }
+
+    if (isMatch) {
+      context.fillStyle = COLORS.SEARCH_RESULT_FILL;
+    }
+
+    context.fillRect(
+      drawableRect.origin.x,
+      drawableRect.origin.y,
+      drawableRect.size.width,
+      drawableRect.size.height,
+    );
+
+    const label = `${componentName} ${typeLabel} - ${formatDuration(duration)}`;
+
+    drawText(label, context, componentMeasureRect, drawableRect, {
+      fillStyle: textFillStyle,
+    });
+
+    return true;
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {componentMeasures},
+      _hoveredComponentMeasure,
+      visibleArea,
+    } = this;
+
+    const searchRegExp = this._viewState.searchRegExp;
+    if (this._cachedSearchRegExp !== searchRegExp) {
+      this._cachedSearchMatches = new Map();
+      this._cachedSearchRegExp = searchRegExp;
+    }
+
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    // Draw events
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    let didDrawMeasure = false;
+    componentMeasures.forEach(componentMeasure => {
+      didDrawMeasure =
+        this._drawSingleReactComponentMeasure(
+          context,
+          visibleArea,
+          componentMeasure,
+          scaleFactor,
+          componentMeasure === _hoveredComponentMeasure,
+        ) || didDrawMeasure;
+    });
+
+    if (!didDrawMeasure) {
+      drawText(
+        '(zoom or pan to see React components)',
+        context,
+        visibleArea,
+        visibleArea,
+        {fillStyle: COLORS.TEXT_DIM_COLOR, textAlign: 'center'},
+      );
+    }
+
+    context.fillStyle = COLORS.PRIORITY_BORDER;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y + ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,
+      visibleArea.size.width,
+      BORDER_SIZE,
+    );
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, _intrinsicSize, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+
+    const componentMeasures = this._profilerData.componentMeasures;
+    for (let index = componentMeasures.length - 1; index >= 0; index--) {
+      const componentMeasure = componentMeasures[index];
+      const {duration, timestamp} = componentMeasure;
+
+      if (
+        hoverTimestamp >= timestamp &&
+        hoverTimestamp <= timestamp + duration
+      ) {
+        this.currentCursor = 'context-menu';
+        viewRefs.hoveredView = this;
+        onHover(componentMeasure);
+        return;
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/FlamechartView.js b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
new file mode 100644
index 00000000000..33d505ca7d5
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
@@ -0,0 +1,383 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Flamechart,
+  FlamechartStackFrame,
+  FlamechartStackLayer,
+  InternalModuleSourceToRanges,
+} from '../types';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  BackgroundColorView,
+  Surface,
+  View,
+  layeredLayout,
+  rectContainsPoint,
+  intersectionOfRects,
+  rectIntersectsRect,
+  verticallyStackedLayout,
+} from '../view-base';
+import {isInternalModule} from './utils/moduleFilters';
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  timestampToPosition,
+} from './utils/positioning';
+import {drawText} from './utils/text';
+import {
+  COLORS,
+  FLAMECHART_FRAME_HEIGHT,
+  COLOR_HOVER_DIM_DELTA,
+  BORDER_SIZE,
+} from './constants';
+import {ColorGenerator, dimmedColor, hslaColorToString} from './utils/colors';
+
+// Source: https://source.chromium.org/chromium/chromium/src/+/master:out/Debug/gen/devtools/timeline/TimelineUIUtils.js;l=2109;drc=fb32e928d79707a693351b806b8710b2f6b7d399
+const colorGenerator = new ColorGenerator(
+  {min: 30, max: 330},
+  {min: 50, max: 80, count: 3},
+  85,
+);
+colorGenerator.setColorForID('', {h: 43.6, s: 45.8, l: 90.6, a: 100});
+
+function defaultHslaColorForStackFrame({scriptUrl}: FlamechartStackFrame) {
+  return colorGenerator.colorForID(scriptUrl ?? '');
+}
+
+function defaultColorForStackFrame(stackFrame: FlamechartStackFrame): string {
+  const color = defaultHslaColorForStackFrame(stackFrame);
+  return hslaColorToString(color);
+}
+
+function hoverColorForStackFrame(stackFrame: FlamechartStackFrame): string {
+  const color = dimmedColor(
+    defaultHslaColorForStackFrame(stackFrame),
+    COLOR_HOVER_DIM_DELTA,
+  );
+  return hslaColorToString(color);
+}
+
+class FlamechartStackLayerView extends View {
+  /** Layer to display */
+  _stackLayer: FlamechartStackLayer;
+
+  /** A set of `stackLayer`'s frames, for efficient lookup. */
+  _stackFrameSet: Set<FlamechartStackFrame>;
+
+  _internalModuleSourceToRanges: InternalModuleSourceToRanges;
+
+  _intrinsicSize: Size;
+
+  _hoveredStackFrame: FlamechartStackFrame | null = null;
+  _onHover: ((node: FlamechartStackFrame | null) => void) | null = null;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    stackLayer: FlamechartStackLayer,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
+    duration: number,
+  ) {
+    super(surface, frame);
+    this._stackLayer = stackLayer;
+    this._stackFrameSet = new Set(stackLayer);
+    this._internalModuleSourceToRanges = internalModuleSourceToRanges;
+    this._intrinsicSize = {
+      width: duration,
+      height: FLAMECHART_FRAME_HEIGHT,
+    };
+  }
+
+  desiredSize(): Size {
+    return this._intrinsicSize;
+  }
+
+  setHoveredFlamechartStackFrame(
+    hoveredStackFrame: FlamechartStackFrame | null,
+  ) {
+    if (this._hoveredStackFrame === hoveredStackFrame) {
+      return; // We're already hovering over this frame
+    }
+
+    // Only care about frames displayed by this view.
+    const stackFrameToSet =
+      hoveredStackFrame && this._stackFrameSet.has(hoveredStackFrame)
+        ? hoveredStackFrame
+        : null;
+    if (this._hoveredStackFrame === stackFrameToSet) {
+      return; // Resulting state is unchanged
+    }
+    this._hoveredStackFrame = stackFrameToSet;
+    this.setNeedsDisplay();
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _stackLayer,
+      _hoveredStackFrame,
+      _intrinsicSize,
+      visibleArea,
+    } = this;
+
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+
+    for (let i = 0; i < _stackLayer.length; i++) {
+      const stackFrame = _stackLayer[i];
+      const {name, timestamp, duration} = stackFrame;
+
+      const width = durationToWidth(duration, scaleFactor);
+      if (width < 1) {
+        continue; // Too small to render at this zoom level
+      }
+
+      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
+      const nodeRect: Rect = {
+        origin: {x, y: frame.origin.y},
+        size: {
+          width: Math.floor(width - BORDER_SIZE),
+          height: Math.floor(FLAMECHART_FRAME_HEIGHT - BORDER_SIZE),
+        },
+      };
+      if (!rectIntersectsRect(nodeRect, visibleArea)) {
+        continue; // Not in view
+      }
+
+      const showHoverHighlight = _hoveredStackFrame === _stackLayer[i];
+
+      let textFillStyle;
+      if (isInternalModule(this._internalModuleSourceToRanges, stackFrame)) {
+        context.fillStyle = showHoverHighlight
+          ? COLORS.INTERNAL_MODULE_FRAME_HOVER
+          : COLORS.INTERNAL_MODULE_FRAME;
+        textFillStyle = COLORS.INTERNAL_MODULE_FRAME_TEXT;
+      } else {
+        context.fillStyle = showHoverHighlight
+          ? hoverColorForStackFrame(stackFrame)
+          : defaultColorForStackFrame(stackFrame);
+        textFillStyle = COLORS.TEXT_COLOR;
+      }
+
+      const drawableRect = intersectionOfRects(nodeRect, visibleArea);
+      context.fillRect(
+        drawableRect.origin.x,
+        drawableRect.origin.y,
+        drawableRect.size.width,
+        drawableRect.size.height,
+      );
+
+      drawText(name, context, nodeRect, drawableRect, {
+        fillStyle: textFillStyle,
+      });
+    }
+
+    // Render bottom border.
+    const borderFrame: Rect = {
+      origin: {
+        x: frame.origin.x,
+        y: frame.origin.y + FLAMECHART_FRAME_HEIGHT - BORDER_SIZE,
+      },
+      size: {
+        width: frame.size.width,
+        height: BORDER_SIZE,
+      },
+    };
+    if (rectIntersectsRect(borderFrame, visibleArea)) {
+      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
+      context.fillStyle = COLORS.PRIORITY_BORDER;
+      context.fillRect(
+        borderDrawableRect.origin.x,
+        borderDrawableRect.origin.y,
+        borderDrawableRect.size.width,
+        borderDrawableRect.size.height,
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
+    const {location} = interaction.payload;
+    if (!_onHover || !rectContainsPoint(location, visibleArea)) {
+      return;
+    }
+
+    // Find the node being hovered over.
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    let startIndex = 0;
+    let stopIndex = _stackLayer.length - 1;
+    while (startIndex <= stopIndex) {
+      const currentIndex = Math.floor((startIndex + stopIndex) / 2);
+      const flamechartStackFrame = _stackLayer[currentIndex];
+      const {timestamp, duration} = flamechartStackFrame;
+
+      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
+      const width = durationToWidth(duration, scaleFactor);
+
+      // Don't show tooltips for nodes that are too small to render at this zoom level.
+      if (Math.floor(width - BORDER_SIZE) >= 1) {
+        if (x <= location.x && x + width >= location.x) {
+          this.currentCursor = 'context-menu';
+          viewRefs.hoveredView = this;
+          _onHover(flamechartStackFrame);
+          return;
+        }
+      }
+
+      if (x > location.x) {
+        stopIndex = currentIndex - 1;
+      } else {
+        startIndex = currentIndex + 1;
+      }
+    }
+
+    _onHover(null);
+  }
+
+  _didGrab: boolean = false;
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
+
+export class FlamechartView extends View {
+  _flamechartRowViews: FlamechartStackLayerView[] = [];
+
+  /** Container view that vertically stacks flamechart rows */
+  _verticalStackView: View;
+
+  _hoveredStackFrame: FlamechartStackFrame | null = null;
+  _onHover: ((node: FlamechartStackFrame | null) => void) | null = null;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    flamechart: Flamechart,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
+    duration: number,
+  ) {
+    super(surface, frame, layeredLayout);
+    this.setDataAndUpdateSubviews(
+      flamechart,
+      internalModuleSourceToRanges,
+      duration,
+    );
+  }
+
+  setDataAndUpdateSubviews(
+    flamechart: Flamechart,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
+    duration: number,
+  ) {
+    const {surface, frame, _onHover, _hoveredStackFrame} = this;
+
+    // Clear existing rows on data update
+    if (this._verticalStackView) {
+      this.removeAllSubviews();
+      this._flamechartRowViews = [];
+    }
+
+    this._verticalStackView = new View(surface, frame, verticallyStackedLayout);
+    this._flamechartRowViews = flamechart.map(stackLayer => {
+      const rowView = new FlamechartStackLayerView(
+        surface,
+        frame,
+        stackLayer,
+        internalModuleSourceToRanges,
+        duration,
+      );
+      this._verticalStackView.addSubview(rowView);
+
+      // Update states
+      rowView._onHover = _onHover;
+      rowView.setHoveredFlamechartStackFrame(_hoveredStackFrame);
+      return rowView;
+    });
+
+    // Add a plain background view to prevent gaps from appearing between flamechartRowViews.
+    this.addSubview(new BackgroundColorView(surface, frame));
+    this.addSubview(this._verticalStackView);
+  }
+
+  setHoveredFlamechartStackFrame(
+    hoveredStackFrame: FlamechartStackFrame | null,
+  ) {
+    this._hoveredStackFrame = hoveredStackFrame;
+    this._flamechartRowViews.forEach(rowView =>
+      rowView.setHoveredFlamechartStackFrame(hoveredStackFrame),
+    );
+  }
+
+  setOnHover(onHover: (node: FlamechartStackFrame | null) => void) {
+    this._onHover = onHover;
+    this._flamechartRowViews.forEach(rowView => (rowView._onHover = onHover));
+  }
+
+  desiredSize(): {
+    height: number,
+    hideScrollBarIfLessThanHeight?: number,
+    maxInitialHeight?: number,
+    width: number,
+  } {
+    // Ignore the wishes of the background color view
+    const intrinsicSize = this._verticalStackView.desiredSize();
+    return {
+      ...intrinsicSize,
+      // Collapsed by default
+      maxInitialHeight: 0,
+    };
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction) {
+    const {_onHover, visibleArea} = this;
+    if (!_onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      // Clear out any hovered flamechart stack frame
+      _onHover(null);
+    }
+  }
+
+  handleInteraction(interaction: Interaction) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
new file mode 100644
index 00000000000..5bb88bce797
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {NativeEvent, TimelineData} from '../types';
+import type {
+  Interaction,
+  IntrinsicSize,
+  MouseMoveInteraction,
+  Rect,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  positionToTimestamp,
+  timestampToPosition,
+} from './utils/positioning';
+import {drawText} from './utils/text';
+import {formatDuration} from '../utils/formatting';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from './constants';
+
+const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
+
+export class NativeEventsView extends View {
+  _depthToNativeEvent: Map<number, NativeEvent[]>;
+  _hoveredEvent: NativeEvent | null = null;
+  _intrinsicSize: IntrinsicSize;
+  _maxDepth: number = 0;
+  _profilerData: TimelineData;
+
+  onHover: ((event: NativeEvent | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+
+    this._profilerData = profilerData;
+
+    this._performPreflightComputations();
+  }
+
+  _performPreflightComputations() {
+    this._depthToNativeEvent = new Map();
+
+    const {duration, nativeEvents} = this._profilerData;
+
+    nativeEvents.forEach(event => {
+      const depth = event.depth;
+
+      this._maxDepth = Math.max(this._maxDepth, depth);
+
+      if (!this._depthToNativeEvent.has(depth)) {
+        this._depthToNativeEvent.set(depth, [event]);
+      } else {
+        // $FlowFixMe[incompatible-use] This is unnecessary.
+        this._depthToNativeEvent.get(depth).push(event);
+      }
+    });
+
+    this._intrinsicSize = {
+      width: duration,
+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
+      hideScrollBarIfLessThanHeight: ROW_WITH_BORDER_HEIGHT,
+    };
+  }
+
+  desiredSize(): IntrinsicSize {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(hoveredEvent: NativeEvent | null) {
+    if (this._hoveredEvent === hoveredEvent) {
+      return;
+    }
+    this._hoveredEvent = hoveredEvent;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `NativeEvent` as a box/span with text inside of it.
+   */
+  _drawSingleNativeEvent(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    event: NativeEvent,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame} = this;
+    const {depth, duration, timestamp, type, warning} = event;
+
+    baseY += depth * ROW_WITH_BORDER_HEIGHT;
+
+    const xStart = timestampToPosition(timestamp, scaleFactor, frame);
+    const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
+    const eventRect: Rect = {
+      origin: {
+        x: xStart,
+        y: baseY,
+      },
+      size: {width: xStop - xStart, height: NATIVE_EVENT_HEIGHT},
+    };
+    if (!rectIntersectsRect(eventRect, rect)) {
+      return; // Not in view
+    }
+
+    const width = durationToWidth(duration, scaleFactor);
+    if (width < 1) {
+      return; // Too small to render at this zoom level
+    }
+
+    const drawableRect = intersectionOfRects(eventRect, rect);
+    context.beginPath();
+    if (warning !== null) {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.WARNING_BACKGROUND_HOVER
+        : COLORS.WARNING_BACKGROUND;
+    } else {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.NATIVE_EVENT_HOVER
+        : COLORS.NATIVE_EVENT;
+    }
+    context.fillRect(
+      drawableRect.origin.x,
+      drawableRect.origin.y,
+      drawableRect.size.width,
+      drawableRect.size.height,
+    );
+
+    const label = `${type} - ${formatDuration(duration)}`;
+
+    drawText(label, context, eventRect, drawableRect);
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {nativeEvents},
+      _hoveredEvent,
+      visibleArea,
+    } = this;
+
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    // Draw events
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    nativeEvents.forEach(event => {
+      this._drawSingleNativeEvent(
+        context,
+        visibleArea,
+        event,
+        frame.origin.y,
+        scaleFactor,
+        event === _hoveredEvent,
+      );
+    });
+
+    // Render bottom borders.
+    for (let i = 0; i <= this._maxDepth; i++) {
+      const borderFrame: Rect = {
+        origin: {
+          x: frame.origin.x,
+          y: frame.origin.y + NATIVE_EVENT_HEIGHT,
+        },
+        size: {
+          width: frame.size.width,
+          height: BORDER_SIZE,
+        },
+      };
+      if (rectIntersectsRect(borderFrame, visibleArea)) {
+        const borderDrawableRect = intersectionOfRects(
+          borderFrame,
+          visibleArea,
+        );
+        context.fillStyle = COLORS.PRIORITY_BORDER;
+        context.fillRect(
+          borderDrawableRect.origin.x,
+          borderDrawableRect.origin.y,
+          borderDrawableRect.size.width,
+          borderDrawableRect.size.height,
+        );
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, _intrinsicSize, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+
+    const adjustedCanvasMouseY = location.y - frame.origin.y;
+    const depth = Math.floor(adjustedCanvasMouseY / ROW_WITH_BORDER_HEIGHT);
+    const nativeEventsAtDepth = this._depthToNativeEvent.get(depth);
+
+    if (nativeEventsAtDepth) {
+      // Find the event being hovered over.
+      for (let index = nativeEventsAtDepth.length - 1; index >= 0; index--) {
+        const nativeEvent = nativeEventsAtDepth[index];
+        const {duration, timestamp} = nativeEvent;
+
+        if (
+          hoverTimestamp >= timestamp &&
+          hoverTimestamp <= timestamp + duration
+        ) {
+          viewRefs.hoveredView = this;
+          onHover(nativeEvent);
+          return;
+        }
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
new file mode 100644
index 00000000000..f2563852339
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {NetworkMeasure, TimelineData} from '../types';
+import type {
+  Interaction,
+  IntrinsicSize,
+  MouseMoveInteraction,
+  Rect,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  positionToTimestamp,
+  timestampToPosition,
+} from './utils/positioning';
+import {drawText} from './utils/text';
+import {formatDuration} from '../utils/formatting';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {BORDER_SIZE, COLORS, SUSPENSE_EVENT_HEIGHT} from './constants';
+
+const HEIGHT = SUSPENSE_EVENT_HEIGHT; // TODO Constant name
+const ROW_WITH_BORDER_HEIGHT = HEIGHT + BORDER_SIZE;
+
+const BASE_URL_REGEX = /([^:]+:\/\/[^\/]+)/;
+
+export class NetworkMeasuresView extends View {
+  _depthToNetworkMeasure: Map<number, NetworkMeasure[]>;
+  _hoveredNetworkMeasure: NetworkMeasure | null = null;
+  _intrinsicSize: IntrinsicSize;
+  _maxDepth: number = 0;
+  _profilerData: TimelineData;
+
+  onHover: ((event: NetworkMeasure | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+
+    this._profilerData = profilerData;
+
+    this._performPreflightComputations();
+  }
+
+  _performPreflightComputations() {
+    this._depthToNetworkMeasure = new Map();
+
+    const {duration, networkMeasures} = this._profilerData;
+
+    networkMeasures.forEach(event => {
+      const depth = event.depth;
+
+      this._maxDepth = Math.max(this._maxDepth, depth);
+
+      if (!this._depthToNetworkMeasure.has(depth)) {
+        this._depthToNetworkMeasure.set(depth, [event]);
+      } else {
+        // $FlowFixMe[incompatible-use] This is unnecessary.
+        this._depthToNetworkMeasure.get(depth).push(event);
+      }
+    });
+
+    this._intrinsicSize = {
+      width: duration,
+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
+      // Collapsed by default
+      maxInitialHeight: 0,
+    };
+  }
+
+  desiredSize(): IntrinsicSize {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(networkMeasure: NetworkMeasure | null) {
+    if (this._hoveredNetworkMeasure === networkMeasure) {
+      return;
+    }
+    this._hoveredNetworkMeasure = networkMeasure;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `NetworkMeasure` as a box/span with text inside of it.
+   */
+  _drawSingleNetworkMeasure(
+    context: CanvasRenderingContext2D,
+    networkMeasure: NetworkMeasure,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame, visibleArea} = this;
+    const {
+      depth,
+      finishTimestamp,
+      firstReceivedDataTimestamp,
+      lastReceivedDataTimestamp,
+      receiveResponseTimestamp,
+      sendRequestTimestamp,
+      url,
+    } = networkMeasure;
+
+    // Account for requests that did not complete while we were profiling.
+    // As well as requests that did not receive data before finish (cached?).
+    const duration = this._profilerData.duration;
+    const timestampBegin = sendRequestTimestamp;
+    const timestampEnd =
+      finishTimestamp || lastReceivedDataTimestamp || duration;
+    const timestampMiddle =
+      receiveResponseTimestamp || firstReceivedDataTimestamp || timestampEnd;
+
+    // Convert all timestamps to x coordinates.
+    const xStart = timestampToPosition(timestampBegin, scaleFactor, frame);
+    const xMiddle = timestampToPosition(timestampMiddle, scaleFactor, frame);
+    const xStop = timestampToPosition(timestampEnd, scaleFactor, frame);
+
+    const width = durationToWidth(xStop - xStart, scaleFactor);
+    if (width < 1) {
+      return; // Too small to render at this zoom level
+    }
+
+    baseY += depth * ROW_WITH_BORDER_HEIGHT;
+
+    const outerRect: Rect = {
+      origin: {
+        x: xStart,
+        y: baseY,
+      },
+      size: {
+        width: xStop - xStart,
+        height: HEIGHT,
+      },
+    };
+    if (!rectIntersectsRect(outerRect, visibleArea)) {
+      return; // Not in view
+    }
+
+    // Draw the secondary rect first (since it also shows as a thin border around the primary rect).
+    let rect = {
+      origin: {
+        x: xStart,
+        y: baseY,
+      },
+      size: {
+        width: xStop - xStart,
+        height: HEIGHT,
+      },
+    };
+    if (rectIntersectsRect(rect, visibleArea)) {
+      context.beginPath();
+      context.fillStyle =
+        this._hoveredNetworkMeasure === networkMeasure
+          ? COLORS.NETWORK_SECONDARY_HOVER
+          : COLORS.NETWORK_SECONDARY;
+      context.fillRect(
+        rect.origin.x,
+        rect.origin.y,
+        rect.size.width,
+        rect.size.height,
+      );
+    }
+
+    rect = {
+      origin: {
+        x: xStart + BORDER_SIZE,
+        y: baseY + BORDER_SIZE,
+      },
+      size: {
+        width: xMiddle - xStart - BORDER_SIZE,
+        height: HEIGHT - BORDER_SIZE * 2,
+      },
+    };
+    if (rectIntersectsRect(rect, visibleArea)) {
+      context.beginPath();
+      context.fillStyle =
+        this._hoveredNetworkMeasure === networkMeasure
+          ? COLORS.NETWORK_PRIMARY_HOVER
+          : COLORS.NETWORK_PRIMARY;
+      context.fillRect(
+        rect.origin.x,
+        rect.origin.y,
+        rect.size.width,
+        rect.size.height,
+      );
+    }
+
+    const baseUrl = url.match(BASE_URL_REGEX);
+    const displayUrl = baseUrl !== null ? baseUrl[1] : url;
+
+    const durationLabel =
+      finishTimestamp !== 0
+        ? `${formatDuration(finishTimestamp - sendRequestTimestamp)} - `
+        : '';
+
+    const label = durationLabel + displayUrl;
+
+    drawText(label, context, outerRect, visibleArea);
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {networkMeasures},
+      _hoveredNetworkMeasure,
+      visibleArea,
+    } = this;
+
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    networkMeasures.forEach(networkMeasure => {
+      this._drawSingleNetworkMeasure(
+        context,
+        networkMeasure,
+        frame.origin.y,
+        scaleFactor,
+        networkMeasure === _hoveredNetworkMeasure,
+      );
+    });
+
+    // Render bottom borders.
+    for (let i = 0; i <= this._maxDepth; i++) {
+      const borderFrame: Rect = {
+        origin: {
+          x: frame.origin.x,
+          y: frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,
+        },
+        size: {
+          width: frame.size.width,
+          height: BORDER_SIZE,
+        },
+      };
+      if (rectIntersectsRect(borderFrame, visibleArea)) {
+        const borderDrawableRect = intersectionOfRects(
+          borderFrame,
+          visibleArea,
+        );
+        context.fillStyle = COLORS.PRIORITY_BORDER;
+        context.fillRect(
+          borderDrawableRect.origin.x,
+          borderDrawableRect.origin.y,
+          borderDrawableRect.size.width,
+          borderDrawableRect.size.height,
+        );
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, _intrinsicSize, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+
+    const adjustedCanvasMouseY = location.y - frame.origin.y;
+    const depth = Math.floor(adjustedCanvasMouseY / ROW_WITH_BORDER_HEIGHT);
+    const networkMeasuresAtDepth = this._depthToNetworkMeasure.get(depth);
+
+    const duration = this._profilerData.duration;
+
+    if (networkMeasuresAtDepth) {
+      // Find the event being hovered over.
+      for (let index = networkMeasuresAtDepth.length - 1; index >= 0; index--) {
+        const networkMeasure = networkMeasuresAtDepth[index];
+        const {
+          finishTimestamp,
+          lastReceivedDataTimestamp,
+          sendRequestTimestamp,
+        } = networkMeasure;
+
+        const timestampBegin = sendRequestTimestamp;
+        const timestampEnd =
+          finishTimestamp || lastReceivedDataTimestamp || duration;
+
+        if (
+          hoverTimestamp >= timestampBegin &&
+          hoverTimestamp <= timestampEnd
+        ) {
+          this.currentCursor = 'context-menu';
+          viewRefs.hoveredView = this;
+          onHover(networkMeasure);
+          return;
+        }
+      }
+    }
+
+    if (viewRefs.hoveredView === this) {
+      viewRefs.hoveredView = null;
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
new file mode 100644
index 00000000000..f85aba3b3ca
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
@@ -0,0 +1,370 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactLane, ReactMeasure, TimelineData} from '../types';
+import type {
+  Interaction,
+  IntrinsicSize,
+  MouseMoveInteraction,
+  Rect,
+  ViewRefs,
+} from '../view-base';
+
+import {formatDuration} from '../utils/formatting';
+import {drawText} from './utils/text';
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  positionToTimestamp,
+  timestampToPosition,
+} from './utils/positioning';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+
+import {COLORS, BORDER_SIZE, REACT_MEASURE_HEIGHT} from './constants';
+
+const REACT_LANE_HEIGHT = REACT_MEASURE_HEIGHT + BORDER_SIZE;
+const MAX_ROWS_TO_SHOW_INITIALLY = 5;
+
+export class ReactMeasuresView extends View {
+  _intrinsicSize: IntrinsicSize;
+  _lanesToRender: ReactLane[];
+  _profilerData: TimelineData;
+  _hoveredMeasure: ReactMeasure | null = null;
+
+  onHover: ((measure: ReactMeasure | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+    this._profilerData = profilerData;
+    this._performPreflightComputations();
+  }
+
+  _performPreflightComputations() {
+    this._lanesToRender = [];
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const [lane, measuresForLane] of this._profilerData
+      .laneToReactMeasureMap) {
+      // Only show lanes with measures
+      if (measuresForLane.length > 0) {
+        this._lanesToRender.push(lane);
+      }
+    }
+
+    this._intrinsicSize = {
+      width: this._profilerData.duration,
+      height: this._lanesToRender.length * REACT_LANE_HEIGHT,
+      hideScrollBarIfLessThanHeight: REACT_LANE_HEIGHT,
+      maxInitialHeight: MAX_ROWS_TO_SHOW_INITIALLY * REACT_LANE_HEIGHT,
+    };
+  }
+
+  desiredSize(): IntrinsicSize {
+    return this._intrinsicSize;
+  }
+
+  setHoveredMeasure(hoveredMeasure: ReactMeasure | null) {
+    if (this._hoveredMeasure === hoveredMeasure) {
+      return;
+    }
+    this._hoveredMeasure = hoveredMeasure;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `ReactMeasure` as a bar in the canvas.
+   */
+  _drawSingleReactMeasure(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    measure: ReactMeasure,
+    nextMeasure: ReactMeasure | null,
+    baseY: number,
+    scaleFactor: number,
+    showGroupHighlight: boolean,
+    showHoverHighlight: boolean,
+  ): void {
+    const {frame, visibleArea} = this;
+    const {timestamp, type, duration} = measure;
+
+    let fillStyle = null;
+    let hoveredFillStyle = null;
+    let groupSelectedFillStyle = null;
+    let textFillStyle = null;
+
+    // We could change the max to 0 and just skip over rendering anything that small,
+    // but this has the effect of making the chart look very empty when zoomed out.
+    // So long as perf is okay- it might be best to err on the side of showing things.
+    const width = durationToWidth(duration, scaleFactor);
+    if (width <= 0) {
+      return; // Too small to render at this zoom level
+    }
+
+    const x = timestampToPosition(timestamp, scaleFactor, frame);
+    const measureRect: Rect = {
+      origin: {x, y: baseY},
+      size: {width, height: REACT_MEASURE_HEIGHT},
+    };
+    if (!rectIntersectsRect(measureRect, rect)) {
+      return; // Not in view
+    }
+
+    const drawableRect = intersectionOfRects(measureRect, rect);
+    let textRect = measureRect;
+
+    switch (type) {
+      case 'commit':
+        fillStyle = COLORS.REACT_COMMIT;
+        hoveredFillStyle = COLORS.REACT_COMMIT_HOVER;
+        groupSelectedFillStyle = COLORS.REACT_COMMIT_HOVER;
+        textFillStyle = COLORS.REACT_COMMIT_TEXT;
+
+        // Commit phase rects are overlapped by layout and passive rects,
+        // and it looks bad if text flows underneath/behind these overlayed rects.
+        if (nextMeasure != null) {
+          // This clipping shouldn't apply for measures that don't overlap though,
+          // like passive effects that are processed after a delay,
+          // or if there are now layout or passive effects and the next measure is render or idle.
+          if (nextMeasure.timestamp < measure.timestamp + measure.duration) {
+            textRect = {
+              ...measureRect,
+              size: {
+                width:
+                  timestampToPosition(
+                    nextMeasure.timestamp,
+                    scaleFactor,
+                    frame,
+                  ) - x,
+                height: REACT_MEASURE_HEIGHT,
+              },
+            };
+          }
+        }
+        break;
+      case 'render-idle':
+        // We could render idle time as diagonal hashes.
+        // This looks nicer when zoomed in, but not so nice when zoomed out.
+        // color = context.createPattern(getIdlePattern(), 'repeat');
+        fillStyle = COLORS.REACT_IDLE;
+        hoveredFillStyle = COLORS.REACT_IDLE_HOVER;
+        groupSelectedFillStyle = COLORS.REACT_IDLE_HOVER;
+        break;
+      case 'render':
+        fillStyle = COLORS.REACT_RENDER;
+        hoveredFillStyle = COLORS.REACT_RENDER_HOVER;
+        groupSelectedFillStyle = COLORS.REACT_RENDER_HOVER;
+        textFillStyle = COLORS.REACT_RENDER_TEXT;
+        break;
+      case 'layout-effects':
+        fillStyle = COLORS.REACT_LAYOUT_EFFECTS;
+        hoveredFillStyle = COLORS.REACT_LAYOUT_EFFECTS_HOVER;
+        groupSelectedFillStyle = COLORS.REACT_LAYOUT_EFFECTS_HOVER;
+        textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
+        break;
+      case 'passive-effects':
+        fillStyle = COLORS.REACT_PASSIVE_EFFECTS;
+        hoveredFillStyle = COLORS.REACT_PASSIVE_EFFECTS_HOVER;
+        groupSelectedFillStyle = COLORS.REACT_PASSIVE_EFFECTS_HOVER;
+        textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
+        break;
+      default:
+        throw new Error(`Unexpected measure type "${type}"`);
+    }
+
+    context.fillStyle = showHoverHighlight
+      ? hoveredFillStyle
+      : showGroupHighlight
+        ? groupSelectedFillStyle
+        : fillStyle;
+    context.fillRect(
+      drawableRect.origin.x,
+      drawableRect.origin.y,
+      drawableRect.size.width,
+      drawableRect.size.height,
+    );
+
+    if (textFillStyle !== null) {
+      drawText(formatDuration(duration), context, textRect, visibleArea, {
+        fillStyle: textFillStyle,
+      });
+    }
+  }
+
+  draw(context: CanvasRenderingContext2D): void {
+    const {frame, _hoveredMeasure, _lanesToRender, _profilerData, visibleArea} =
+      this;
+
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    for (let i = 0; i < _lanesToRender.length; i++) {
+      const lane = _lanesToRender[i];
+      const baseY = frame.origin.y + i * REACT_LANE_HEIGHT;
+      const measuresForLane = _profilerData.laneToReactMeasureMap.get(lane);
+
+      if (!measuresForLane) {
+        throw new Error(
+          'No measures found for a React lane! This is a bug in this profiler tool. Please file an issue.',
+        );
+      }
+
+      // Render lane labels
+      const label = _profilerData.laneToLabelMap.get(lane);
+      if (label == null) {
+        console.warn(`Could not find label for lane ${lane}.`);
+      } else {
+        const labelRect = {
+          origin: {
+            x: visibleArea.origin.x,
+            y: baseY,
+          },
+          size: {
+            width: visibleArea.size.width,
+            height: REACT_LANE_HEIGHT,
+          },
+        };
+
+        drawText(label, context, labelRect, visibleArea, {
+          fillStyle: COLORS.TEXT_DIM_COLOR,
+        });
+      }
+
+      // Draw measures
+      for (let j = 0; j < measuresForLane.length; j++) {
+        const measure = measuresForLane[j];
+        const showHoverHighlight = _hoveredMeasure === measure;
+        const showGroupHighlight =
+          !!_hoveredMeasure && _hoveredMeasure.batchUID === measure.batchUID;
+
+        this._drawSingleReactMeasure(
+          context,
+          visibleArea,
+          measure,
+          measuresForLane[j + 1] || null,
+          baseY,
+          scaleFactor,
+          showGroupHighlight,
+          showHoverHighlight,
+        );
+      }
+
+      // Render bottom border
+      const borderFrame: Rect = {
+        origin: {
+          x: frame.origin.x,
+          y: frame.origin.y + (i + 1) * REACT_LANE_HEIGHT - BORDER_SIZE,
+        },
+        size: {
+          width: frame.size.width,
+          height: BORDER_SIZE,
+        },
+      };
+      if (rectIntersectsRect(borderFrame, visibleArea)) {
+        const borderDrawableRect = intersectionOfRects(
+          borderFrame,
+          visibleArea,
+        );
+        context.fillStyle = COLORS.PRIORITY_BORDER;
+        context.fillRect(
+          borderDrawableRect.origin.x,
+          borderDrawableRect.origin.y,
+          borderDrawableRect.size.width,
+          borderDrawableRect.size.height,
+        );
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {
+      frame,
+      _intrinsicSize,
+      _lanesToRender,
+      onHover,
+      _profilerData,
+      visibleArea,
+    } = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    // Identify the lane being hovered over
+    const adjustedCanvasMouseY = location.y - frame.origin.y;
+    const renderedLaneIndex = Math.floor(
+      adjustedCanvasMouseY / REACT_LANE_HEIGHT,
+    );
+    if (renderedLaneIndex < 0 || renderedLaneIndex >= _lanesToRender.length) {
+      onHover(null);
+      return;
+    }
+    const lane = _lanesToRender[renderedLaneIndex];
+
+    // Find the measure in `lane` being hovered over.
+    //
+    // Because data ranges may overlap, we want to find the last intersecting item.
+    // This will always be the one on "top" (the one the user is hovering over).
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+    const measures = _profilerData.laneToReactMeasureMap.get(lane);
+    if (!measures) {
+      onHover(null);
+      return;
+    }
+
+    for (let index = measures.length - 1; index >= 0; index--) {
+      const measure = measures[index];
+      const {duration, timestamp} = measure;
+
+      if (
+        hoverTimestamp >= timestamp &&
+        hoverTimestamp <= timestamp + duration
+      ) {
+        this.currentCursor = 'context-menu';
+        viewRefs.hoveredView = this;
+        onHover(measure);
+        return;
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
new file mode 100644
index 00000000000..39114cb8881
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SchedulingEvent, TimelineData} from '../types';
+import type {
+  ClickInteraction,
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  positioningScaleFactor,
+  timestampToPosition,
+  positionToTimestamp,
+  widthToDuration,
+} from './utils/positioning';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {
+  COLORS,
+  TOP_ROW_PADDING,
+  REACT_EVENT_DIAMETER,
+  BORDER_SIZE,
+} from './constants';
+
+const EVENT_ROW_HEIGHT_FIXED =
+  TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;
+
+export class SchedulingEventsView extends View {
+  _profilerData: TimelineData;
+  _intrinsicSize: Size;
+
+  _hoveredEvent: SchedulingEvent | null = null;
+  onHover: ((event: SchedulingEvent | null) => void) | null = null;
+  onClick:
+    | ((event: SchedulingEvent | null, eventIndex: number | null) => void)
+    | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+    this._profilerData = profilerData;
+
+    this._intrinsicSize = {
+      width: this._profilerData.duration,
+      height: EVENT_ROW_HEIGHT_FIXED,
+    };
+  }
+
+  desiredSize(): Size {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(hoveredEvent: SchedulingEvent | null) {
+    if (this._hoveredEvent === hoveredEvent) {
+      return;
+    }
+    this._hoveredEvent = hoveredEvent;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `SchedulingEvent` as a circle in the canvas.
+   */
+  _drawSingleSchedulingEvent(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    event: SchedulingEvent,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame} = this;
+    const {timestamp, type, warning} = event;
+
+    const x = timestampToPosition(timestamp, scaleFactor, frame);
+    const radius = REACT_EVENT_DIAMETER / 2;
+    const eventRect: Rect = {
+      origin: {
+        x: x - radius,
+        y: baseY,
+      },
+      size: {width: REACT_EVENT_DIAMETER, height: REACT_EVENT_DIAMETER},
+    };
+    if (!rectIntersectsRect(eventRect, rect)) {
+      return; // Not in view
+    }
+
+    let fillStyle = null;
+
+    if (warning !== null) {
+      fillStyle = showHoverHighlight
+        ? COLORS.WARNING_BACKGROUND_HOVER
+        : COLORS.WARNING_BACKGROUND;
+    } else {
+      switch (type) {
+        case 'schedule-render':
+        case 'schedule-state-update':
+        case 'schedule-force-update':
+          fillStyle = showHoverHighlight
+            ? COLORS.REACT_SCHEDULE_HOVER
+            : COLORS.REACT_SCHEDULE;
+          break;
+        default:
+          if (__DEV__) {
+            console.warn('Unexpected event type "%s"', type);
+          }
+          break;
+      }
+    }
+
+    if (fillStyle !== null) {
+      const y = eventRect.origin.y + radius;
+
+      context.beginPath();
+      context.fillStyle = fillStyle;
+      context.arc(x, y, radius, 0, 2 * Math.PI);
+      context.fill();
+    }
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {schedulingEvents},
+      _hoveredEvent,
+      visibleArea,
+    } = this;
+
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    // Draw events
+    const baseY = frame.origin.y + TOP_ROW_PADDING;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    const highlightedEvents: SchedulingEvent[] = [];
+
+    schedulingEvents.forEach(event => {
+      if (event === _hoveredEvent) {
+        highlightedEvents.push(event);
+        return;
+      }
+      this._drawSingleSchedulingEvent(
+        context,
+        visibleArea,
+        event,
+        baseY,
+        scaleFactor,
+        false,
+      );
+    });
+
+    // Draw the highlighted items on top so they stand out.
+    // This is helpful if there are multiple (overlapping) items close to each other.
+    highlightedEvents.forEach(event => {
+      this._drawSingleSchedulingEvent(
+        context,
+        visibleArea,
+        event,
+        baseY,
+        scaleFactor,
+        true,
+      );
+    });
+
+    // Render bottom border.
+    // Propose border rect, check if intersects with `rect`, draw intersection.
+    const borderFrame: Rect = {
+      origin: {
+        x: frame.origin.x,
+        y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,
+      },
+      size: {
+        width: frame.size.width,
+        height: BORDER_SIZE,
+      },
+    };
+    if (rectIntersectsRect(borderFrame, visibleArea)) {
+      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
+      context.fillStyle = COLORS.REACT_WORK_BORDER;
+      context.fillRect(
+        borderDrawableRect.origin.x,
+        borderDrawableRect.origin.y,
+        borderDrawableRect.size.width,
+        borderDrawableRect.size.height,
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const {
+      _profilerData: {schedulingEvents},
+    } = this;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+    const eventTimestampAllowance = widthToDuration(
+      REACT_EVENT_DIAMETER / 2,
+      scaleFactor,
+    );
+
+    // Because data ranges may overlap, we want to find the last intersecting item.
+    // This will always be the one on "top" (the one the user is hovering over).
+    for (let index = schedulingEvents.length - 1; index >= 0; index--) {
+      const event = schedulingEvents[index];
+      const {timestamp} = event;
+
+      if (
+        timestamp - eventTimestampAllowance <= hoverTimestamp &&
+        hoverTimestamp <= timestamp + eventTimestampAllowance
+      ) {
+        this.currentCursor = 'pointer';
+        viewRefs.hoveredView = this;
+        onHover(event);
+        return;
+      }
+    }
+
+    onHover(null);
+  }
+
+  /**
+   * @private
+   */
+  _handleClick(interaction: ClickInteraction) {
+    const {onClick} = this;
+    if (onClick) {
+      const {
+        _profilerData: {schedulingEvents},
+      } = this;
+      const eventIndex = schedulingEvents.findIndex(
+        event => event === this._hoveredEvent,
+      );
+      // onHover is going to take care of all the difficult logic here of
+      // figuring out which event when they're proximity is close.
+      onClick(this._hoveredEvent, eventIndex >= 0 ? eventIndex : null);
+    }
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+      case 'click':
+        this._handleClick(interaction);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
new file mode 100644
index 00000000000..494cca38c4f
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -0,0 +1,260 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Snapshot, TimelineData} from '../types';
+import type {
+  Interaction,
+  Point,
+  Rect,
+  Size,
+  Surface,
+  ViewRefs,
+} from '../view-base';
+
+import {positioningScaleFactor, timestampToPosition} from './utils/positioning';
+import {
+  intersectionOfRects,
+  rectContainsPoint,
+  rectEqualToRect,
+  View,
+} from '../view-base';
+import {BORDER_SIZE, COLORS, SNAPSHOT_SCRUBBER_SIZE} from './constants';
+
+type OnHover = (node: Snapshot | null) => void;
+
+export class SnapshotsView extends View {
+  _hoverLocation: Point | null = null;
+  _intrinsicSize: Size;
+  _profilerData: TimelineData;
+
+  onHover: OnHover | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+
+    this._intrinsicSize = {
+      width: profilerData.duration,
+      height: profilerData.snapshotHeight,
+    };
+    this._profilerData = profilerData;
+  }
+
+  desiredSize(): Size {
+    return this._intrinsicSize;
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const snapshotHeight = this._profilerData.snapshotHeight;
+    const {visibleArea} = this;
+
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    const y = visibleArea.origin.y;
+
+    let x = visibleArea.origin.x;
+
+    // Rather than drawing each snapshot where it occurred,
+    // draw them at fixed intervals and just show the nearest one.
+    while (x < visibleArea.origin.x + visibleArea.size.width) {
+      const snapshot = this._findClosestSnapshot(x);
+      if (snapshot === null) {
+        // This shold never happen.
+        break;
+      }
+
+      const scaledHeight = snapshotHeight;
+      const scaledWidth = (snapshot.width * snapshotHeight) / snapshot.height;
+
+      const imageRect: Rect = {
+        origin: {
+          x,
+          y,
+        },
+        size: {width: scaledWidth, height: scaledHeight},
+      };
+
+      // Lazily create and cache Image objects as we render a snapsho for the first time.
+      if (snapshot.image === null) {
+        const img = (snapshot.image = new Image());
+        img.onload = () => {
+          this._drawSnapshotImage(context, snapshot, imageRect);
+        };
+        img.src = snapshot.imageSource;
+      } else {
+        this._drawSnapshotImage(context, snapshot, imageRect);
+      }
+
+      x += scaledWidth + BORDER_SIZE;
+    }
+
+    const hoverLocation = this._hoverLocation;
+    if (hoverLocation !== null) {
+      const scrubberWidth = SNAPSHOT_SCRUBBER_SIZE + BORDER_SIZE * 2;
+      const scrubberOffset = scrubberWidth / 2;
+
+      context.fillStyle = COLORS.SCRUBBER_BORDER;
+      context.fillRect(
+        hoverLocation.x - scrubberOffset,
+        visibleArea.origin.y,
+        scrubberWidth,
+        visibleArea.size.height,
+      );
+
+      context.fillStyle = COLORS.SCRUBBER_BACKGROUND;
+      context.fillRect(
+        hoverLocation.x - scrubberOffset + BORDER_SIZE,
+        visibleArea.origin.y,
+        SNAPSHOT_SCRUBBER_SIZE,
+        visibleArea.size.height,
+      );
+    }
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+      case 'wheel-control':
+      case 'wheel-meta':
+      case 'wheel-plain':
+      case 'wheel-shift':
+        this._updateHover(interaction.payload.location, viewRefs);
+        break;
+    }
+  }
+
+  _drawSnapshotImage(
+    context: CanvasRenderingContext2D,
+    snapshot: Snapshot,
+    imageRect: Rect,
+  ) {
+    const visibleArea = this.visibleArea;
+
+    // Prevent snapshot from visibly overflowing its container when clipped.
+    // View clips by default, but since this view may draw async (on Image load) we re-clip.
+    const shouldClip = !rectEqualToRect(imageRect, visibleArea);
+    if (shouldClip) {
+      const clippedRect = intersectionOfRects(imageRect, visibleArea);
+      context.save();
+      context.beginPath();
+      context.rect(
+        clippedRect.origin.x,
+        clippedRect.origin.y,
+        clippedRect.size.width,
+        clippedRect.size.height,
+      );
+      context.closePath();
+      context.clip();
+    }
+
+    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
+    context.fillRect(
+      imageRect.origin.x,
+      imageRect.origin.y,
+      imageRect.size.width,
+      imageRect.size.height,
+    );
+
+    // $FlowFixMe[incompatible-call] Flow doesn't know about the 9 argument variant of drawImage()
+    context.drawImage(
+      snapshot.image,
+
+      // Image coordinates
+      0,
+      0,
+
+      // Native image size
+      snapshot.width,
+      snapshot.height,
+
+      // Canvas coordinates
+      imageRect.origin.x + BORDER_SIZE,
+      imageRect.origin.y + BORDER_SIZE,
+
+      // Scaled image size
+      imageRect.size.width - BORDER_SIZE * 2,
+      imageRect.size.height - BORDER_SIZE * 2,
+    );
+
+    if (shouldClip) {
+      context.restore();
+    }
+  }
+
+  _findClosestSnapshot(x: number): Snapshot | null {
+    const frame = this.frame;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    const snapshots = this._profilerData.snapshots;
+
+    let startIndex = 0;
+    let stopIndex = snapshots.length - 1;
+    while (startIndex <= stopIndex) {
+      const currentIndex = Math.floor((startIndex + stopIndex) / 2);
+      const snapshot = snapshots[currentIndex];
+      const {timestamp} = snapshot;
+
+      const snapshotX = Math.floor(
+        timestampToPosition(timestamp, scaleFactor, frame),
+      );
+
+      if (x < snapshotX) {
+        stopIndex = currentIndex - 1;
+      } else {
+        startIndex = currentIndex + 1;
+      }
+    }
+
+    return snapshots[stopIndex] || null;
+  }
+
+  /**
+   * @private
+   */
+  _updateHover(location: Point, viewRefs: ViewRefs) {
+    const {onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    if (!rectContainsPoint(location, visibleArea)) {
+      if (this._hoverLocation !== null) {
+        this._hoverLocation = null;
+
+        this.setNeedsDisplay();
+      }
+
+      onHover(null);
+      return;
+    }
+
+    const snapshot = this._findClosestSnapshot(location.x);
+    if (snapshot !== null) {
+      this._hoverLocation = location;
+
+      onHover(snapshot);
+    } else {
+      this._hoverLocation = null;
+
+      onHover(null);
+    }
+
+    // Any time the mouse moves within the boundaries of this view, we need to re-render.
+    // This is because we draw a scrubbing bar that shows the location corresponding to the current tooltip.
+    this.setNeedsDisplay();
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
new file mode 100644
index 00000000000..43df27e8c92
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
@@ -0,0 +1,359 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SuspenseEvent, TimelineData} from '../types';
+import type {
+  Interaction,
+  IntrinsicSize,
+  MouseMoveInteraction,
+  Rect,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  positionToTimestamp,
+  timestampToPosition,
+  widthToDuration,
+} from './utils/positioning';
+import {drawText} from './utils/text';
+import {formatDuration} from '../utils/formatting';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {
+  BORDER_SIZE,
+  COLORS,
+  PENDING_SUSPENSE_EVENT_SIZE,
+  SUSPENSE_EVENT_HEIGHT,
+} from './constants';
+
+const ROW_WITH_BORDER_HEIGHT = SUSPENSE_EVENT_HEIGHT + BORDER_SIZE;
+const MAX_ROWS_TO_SHOW_INITIALLY = 3;
+
+export class SuspenseEventsView extends View {
+  _depthToSuspenseEvent: Map<number, SuspenseEvent[]>;
+  _hoveredEvent: SuspenseEvent | null = null;
+  _intrinsicSize: IntrinsicSize;
+  _maxDepth: number = 0;
+  _profilerData: TimelineData;
+
+  onHover: ((event: SuspenseEvent | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+
+    this._profilerData = profilerData;
+
+    this._performPreflightComputations();
+  }
+
+  _performPreflightComputations() {
+    this._depthToSuspenseEvent = new Map();
+
+    const {duration, suspenseEvents} = this._profilerData;
+
+    suspenseEvents.forEach(event => {
+      const depth = event.depth;
+
+      this._maxDepth = Math.max(this._maxDepth, depth);
+
+      if (!this._depthToSuspenseEvent.has(depth)) {
+        this._depthToSuspenseEvent.set(depth, [event]);
+      } else {
+        // $FlowFixMe[incompatible-use] This is unnecessary.
+        this._depthToSuspenseEvent.get(depth).push(event);
+      }
+    });
+
+    this._intrinsicSize = {
+      width: duration,
+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
+      hideScrollBarIfLessThanHeight: ROW_WITH_BORDER_HEIGHT,
+      maxInitialHeight: ROW_WITH_BORDER_HEIGHT * MAX_ROWS_TO_SHOW_INITIALLY,
+    };
+  }
+
+  desiredSize(): IntrinsicSize {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(hoveredEvent: SuspenseEvent | null) {
+    if (this._hoveredEvent === hoveredEvent) {
+      return;
+    }
+    this._hoveredEvent = hoveredEvent;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `SuspenseEvent` as a box/span with text inside of it.
+   */
+  _drawSingleSuspenseEvent(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    event: SuspenseEvent,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame} = this;
+    const {
+      componentName,
+      depth,
+      duration,
+      phase,
+      promiseName,
+      resolution,
+      timestamp,
+      warning,
+    } = event;
+
+    baseY += depth * ROW_WITH_BORDER_HEIGHT;
+
+    let fillStyle = ((null: any): string);
+    if (warning !== null) {
+      fillStyle = showHoverHighlight
+        ? COLORS.WARNING_BACKGROUND_HOVER
+        : COLORS.WARNING_BACKGROUND;
+    } else {
+      switch (resolution) {
+        case 'rejected':
+          fillStyle = showHoverHighlight
+            ? COLORS.REACT_SUSPENSE_REJECTED_EVENT_HOVER
+            : COLORS.REACT_SUSPENSE_REJECTED_EVENT;
+          break;
+        case 'resolved':
+          fillStyle = showHoverHighlight
+            ? COLORS.REACT_SUSPENSE_RESOLVED_EVENT_HOVER
+            : COLORS.REACT_SUSPENSE_RESOLVED_EVENT;
+          break;
+        case 'unresolved':
+          fillStyle = showHoverHighlight
+            ? COLORS.REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER
+            : COLORS.REACT_SUSPENSE_UNRESOLVED_EVENT;
+          break;
+      }
+    }
+
+    const xStart = timestampToPosition(timestamp, scaleFactor, frame);
+
+    // Pending suspense events (ones that never resolved) won't have durations.
+    // So instead we draw them as diamonds.
+    if (duration === null) {
+      const size = PENDING_SUSPENSE_EVENT_SIZE;
+      const halfSize = size / 2;
+
+      baseY += (SUSPENSE_EVENT_HEIGHT - PENDING_SUSPENSE_EVENT_SIZE) / 2;
+
+      const y = baseY + halfSize;
+
+      const suspenseRect: Rect = {
+        origin: {
+          x: xStart - halfSize,
+          y: baseY,
+        },
+        size: {width: size, height: size},
+      };
+      if (!rectIntersectsRect(suspenseRect, rect)) {
+        return; // Not in view
+      }
+
+      context.beginPath();
+      context.fillStyle = fillStyle;
+      context.moveTo(xStart, y - halfSize);
+      context.lineTo(xStart + halfSize, y);
+      context.lineTo(xStart, y + halfSize);
+      context.lineTo(xStart - halfSize, y);
+      context.fill();
+    } else {
+      const xStop = timestampToPosition(
+        timestamp + duration,
+        scaleFactor,
+        frame,
+      );
+      const eventRect: Rect = {
+        origin: {
+          x: xStart,
+          y: baseY,
+        },
+        size: {width: xStop - xStart, height: SUSPENSE_EVENT_HEIGHT},
+      };
+      if (!rectIntersectsRect(eventRect, rect)) {
+        return; // Not in view
+      }
+
+      const width = durationToWidth(duration, scaleFactor);
+      if (width < 1) {
+        return; // Too small to render at this zoom level
+      }
+
+      const drawableRect = intersectionOfRects(eventRect, rect);
+      context.beginPath();
+      context.fillStyle = fillStyle;
+      context.fillRect(
+        drawableRect.origin.x,
+        drawableRect.origin.y,
+        drawableRect.size.width,
+        drawableRect.size.height,
+      );
+
+      let label = 'suspended';
+      if (promiseName != null) {
+        label = promiseName;
+      } else if (componentName != null) {
+        label = `${componentName} ${label}`;
+      }
+      if (phase !== null) {
+        label += ` during ${phase}`;
+      }
+      if (resolution !== 'unresolved') {
+        label += ` - ${formatDuration(duration)}`;
+      }
+
+      drawText(label, context, eventRect, drawableRect);
+    }
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {suspenseEvents},
+      _hoveredEvent,
+      visibleArea,
+    } = this;
+
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    // Draw events
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    suspenseEvents.forEach(event => {
+      this._drawSingleSuspenseEvent(
+        context,
+        visibleArea,
+        event,
+        frame.origin.y,
+        scaleFactor,
+        event === _hoveredEvent,
+      );
+    });
+
+    // Render bottom borders.
+    for (let i = 0; i <= this._maxDepth; i++) {
+      const borderFrame: Rect = {
+        origin: {
+          x: frame.origin.x,
+          y: frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,
+        },
+        size: {
+          width: frame.size.width,
+          height: BORDER_SIZE,
+        },
+      };
+      if (rectIntersectsRect(borderFrame, visibleArea)) {
+        const borderDrawableRect = intersectionOfRects(
+          borderFrame,
+          visibleArea,
+        );
+        context.fillStyle = COLORS.REACT_WORK_BORDER;
+        context.fillRect(
+          borderDrawableRect.origin.x,
+          borderDrawableRect.origin.y,
+          borderDrawableRect.size.width,
+          borderDrawableRect.size.height,
+        );
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, _intrinsicSize, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+
+    const adjustedCanvasMouseY = location.y - frame.origin.y;
+    const depth = Math.floor(adjustedCanvasMouseY / ROW_WITH_BORDER_HEIGHT);
+    const suspenseEventsAtDepth = this._depthToSuspenseEvent.get(depth);
+
+    if (suspenseEventsAtDepth) {
+      // Find the event being hovered over.
+      for (let index = suspenseEventsAtDepth.length - 1; index >= 0; index--) {
+        const suspenseEvent = suspenseEventsAtDepth[index];
+        const {duration, timestamp} = suspenseEvent;
+
+        if (duration === null) {
+          const timestampAllowance = widthToDuration(
+            PENDING_SUSPENSE_EVENT_SIZE / 2,
+            scaleFactor,
+          );
+
+          if (
+            timestamp - timestampAllowance <= hoverTimestamp &&
+            hoverTimestamp <= timestamp + timestampAllowance
+          ) {
+            this.currentCursor = 'context-menu';
+
+            viewRefs.hoveredView = this;
+
+            onHover(suspenseEvent);
+            return;
+          }
+        } else if (
+          hoverTimestamp >= timestamp &&
+          hoverTimestamp <= timestamp + duration
+        ) {
+          this.currentCursor = 'context-menu';
+
+          viewRefs.hoveredView = this;
+
+          onHover(suspenseEvent);
+          return;
+        }
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
new file mode 100644
index 00000000000..c507352255d
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ThrownError, TimelineData} from '../types';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  positioningScaleFactor,
+  timestampToPosition,
+  positionToTimestamp,
+  widthToDuration,
+} from './utils/positioning';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {
+  COLORS,
+  TOP_ROW_PADDING,
+  REACT_EVENT_DIAMETER,
+  BORDER_SIZE,
+} from './constants';
+
+const EVENT_ROW_HEIGHT_FIXED =
+  TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;
+
+export class ThrownErrorsView extends View {
+  _profilerData: TimelineData;
+  _intrinsicSize: Size;
+  _hoveredEvent: ThrownError | null = null;
+  onHover: ((event: ThrownError | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
+    super(surface, frame);
+    this._profilerData = profilerData;
+
+    this._intrinsicSize = {
+      width: this._profilerData.duration,
+      height: EVENT_ROW_HEIGHT_FIXED,
+    };
+  }
+
+  desiredSize(): Size {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(hoveredEvent: ThrownError | null) {
+    if (this._hoveredEvent === hoveredEvent) {
+      return;
+    }
+    this._hoveredEvent = hoveredEvent;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `ThrownError` as a circle in the canvas.
+   */
+  _drawSingleThrownError(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    thrownError: ThrownError,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame} = this;
+    const {timestamp} = thrownError;
+
+    const x = timestampToPosition(timestamp, scaleFactor, frame);
+    const radius = REACT_EVENT_DIAMETER / 2;
+    const eventRect: Rect = {
+      origin: {
+        x: x - radius,
+        y: baseY,
+      },
+      size: {width: REACT_EVENT_DIAMETER, height: REACT_EVENT_DIAMETER},
+    };
+    if (!rectIntersectsRect(eventRect, rect)) {
+      return; // Not in view
+    }
+
+    const fillStyle = showHoverHighlight
+      ? COLORS.REACT_THROWN_ERROR_HOVER
+      : COLORS.REACT_THROWN_ERROR;
+
+    const y = eventRect.origin.y + radius;
+
+    context.beginPath();
+    context.fillStyle = fillStyle;
+    context.arc(x, y, radius, 0, 2 * Math.PI);
+    context.fill();
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {thrownErrors},
+      _hoveredEvent,
+      visibleArea,
+    } = this;
+
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    // Draw events
+    const baseY = frame.origin.y + TOP_ROW_PADDING;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    const highlightedEvents: ThrownError[] = [];
+
+    thrownErrors.forEach(thrownError => {
+      if (thrownError === _hoveredEvent) {
+        highlightedEvents.push(thrownError);
+        return;
+      }
+      this._drawSingleThrownError(
+        context,
+        visibleArea,
+        thrownError,
+        baseY,
+        scaleFactor,
+        false,
+      );
+    });
+
+    // Draw the highlighted items on top so they stand out.
+    // This is helpful if there are multiple (overlapping) items close to each other.
+    highlightedEvents.forEach(thrownError => {
+      this._drawSingleThrownError(
+        context,
+        visibleArea,
+        thrownError,
+        baseY,
+        scaleFactor,
+        true,
+      );
+    });
+
+    // Render bottom borders.
+    // Propose border rect, check if intersects with `rect`, draw intersection.
+    const borderFrame: Rect = {
+      origin: {
+        x: frame.origin.x,
+        y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,
+      },
+      size: {
+        width: frame.size.width,
+        height: BORDER_SIZE,
+      },
+    };
+    if (rectIntersectsRect(borderFrame, visibleArea)) {
+      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
+      context.fillStyle = COLORS.REACT_WORK_BORDER;
+      context.fillRect(
+        borderDrawableRect.origin.x,
+        borderDrawableRect.origin.y,
+        borderDrawableRect.size.width,
+        borderDrawableRect.size.height,
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const {
+      _profilerData: {thrownErrors},
+    } = this;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+    const eventTimestampAllowance = widthToDuration(
+      REACT_EVENT_DIAMETER / 2,
+      scaleFactor,
+    );
+
+    // Because data ranges may overlap, we want to find the last intersecting item.
+    // This will always be the one on "top" (the one the user is hovering over).
+    for (let index = thrownErrors.length - 1; index >= 0; index--) {
+      const event = thrownErrors[index];
+      const {timestamp} = event;
+
+      if (
+        timestamp - eventTimestampAllowance <= hoverTimestamp &&
+        hoverTimestamp <= timestamp + eventTimestampAllowance
+      ) {
+        this.currentCursor = 'context-menu';
+        viewRefs.hoveredView = this;
+        onHover(event);
+        return;
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
new file mode 100644
index 00000000000..22e60876de4
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Rect, Size} from '../view-base';
+
+import {
+  durationToWidth,
+  positioningScaleFactor,
+  positionToTimestamp,
+  timestampToPosition,
+} from './utils/positioning';
+import {
+  View,
+  Surface,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {
+  COLORS,
+  INTERVAL_TIMES,
+  LABEL_SIZE,
+  FONT_SIZE,
+  MARKER_HEIGHT,
+  MARKER_TEXT_PADDING,
+  MARKER_TICK_HEIGHT,
+  MIN_INTERVAL_SIZE_PX,
+  BORDER_SIZE,
+} from './constants';
+
+const HEADER_HEIGHT_FIXED = MARKER_HEIGHT + BORDER_SIZE;
+const LABEL_FIXED_WIDTH = LABEL_SIZE + BORDER_SIZE;
+
+export class TimeAxisMarkersView extends View {
+  _totalDuration: number;
+  _intrinsicSize: Size;
+
+  constructor(surface: Surface, frame: Rect, totalDuration: number) {
+    super(surface, frame);
+    this._totalDuration = totalDuration;
+    this._intrinsicSize = {
+      width: this._totalDuration,
+      height: HEADER_HEIGHT_FIXED,
+    };
+  }
+
+  desiredSize(): Size {
+    return this._intrinsicSize;
+  }
+
+  // Time mark intervals vary based on the current zoom range and the time it represents.
+  // In Chrome, these seem to range from 70-140 pixels wide.
+  // Time wise, they represent intervals of e.g. 1s, 500ms, 200ms, 100ms, 50ms, 20ms.
+  // Based on zoom, we should determine which amount to actually show.
+  _getTimeTickInterval(scaleFactor: number): number {
+    for (let i = 0; i < INTERVAL_TIMES.length; i++) {
+      const currentInterval = INTERVAL_TIMES[i];
+      const intervalWidth = durationToWidth(currentInterval, scaleFactor);
+      if (intervalWidth > MIN_INTERVAL_SIZE_PX) {
+        return currentInterval;
+      }
+    }
+    return INTERVAL_TIMES[0];
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {frame, _intrinsicSize, visibleArea} = this;
+    const clippedFrame = {
+      origin: frame.origin,
+      size: {
+        width: frame.size.width,
+        height: _intrinsicSize.height,
+      },
+    };
+    const drawableRect = intersectionOfRects(clippedFrame, visibleArea);
+
+    // Clear background
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      drawableRect.origin.x,
+      drawableRect.origin.y,
+      drawableRect.size.width,
+      drawableRect.size.height,
+    );
+
+    const scaleFactor = positioningScaleFactor(
+      _intrinsicSize.width,
+      clippedFrame,
+    );
+    const interval = this._getTimeTickInterval(scaleFactor);
+    const firstIntervalTimestamp =
+      Math.ceil(
+        positionToTimestamp(
+          drawableRect.origin.x - LABEL_FIXED_WIDTH,
+          scaleFactor,
+          clippedFrame,
+        ) / interval,
+      ) * interval;
+
+    for (
+      let markerTimestamp = firstIntervalTimestamp;
+      true;
+      markerTimestamp += interval
+    ) {
+      if (markerTimestamp <= 0) {
+        continue; // Timestamps < are probably a bug; markers at 0 are ugly.
+      }
+
+      const x = timestampToPosition(markerTimestamp, scaleFactor, clippedFrame);
+      if (x > drawableRect.origin.x + drawableRect.size.width) {
+        break; // Not in view
+      }
+
+      const markerLabel = Math.round(markerTimestamp);
+
+      context.fillStyle = COLORS.PRIORITY_BORDER;
+      context.fillRect(
+        x,
+        drawableRect.origin.y + MARKER_HEIGHT - MARKER_TICK_HEIGHT,
+        BORDER_SIZE,
+        MARKER_TICK_HEIGHT,
+      );
+
+      context.fillStyle = COLORS.TIME_MARKER_LABEL;
+      context.textAlign = 'right';
+      context.textBaseline = 'middle';
+      context.font = `${FONT_SIZE}px sans-serif`;
+      context.fillText(
+        `${markerLabel}ms`,
+        x - MARKER_TEXT_PADDING,
+        MARKER_HEIGHT / 2,
+      );
+    }
+
+    // Render bottom border.
+    // Propose border rect, check if intersects with `rect`, draw intersection.
+    const borderFrame: Rect = {
+      origin: {
+        x: clippedFrame.origin.x,
+        y: clippedFrame.origin.y + clippedFrame.size.height - BORDER_SIZE,
+      },
+      size: {
+        width: clippedFrame.size.width,
+        height: BORDER_SIZE,
+      },
+    };
+    if (rectIntersectsRect(borderFrame, visibleArea)) {
+      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
+      context.fillStyle = COLORS.PRIORITY_BORDER;
+      context.fillRect(
+        borderDrawableRect.origin.x,
+        borderDrawableRect.origin.y,
+        borderDrawableRect.size.width,
+        borderDrawableRect.size.height,
+      );
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
new file mode 100644
index 00000000000..3128777a9c0
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {UserTimingMark} from '../types';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRefs,
+} from '../view-base';
+
+import {
+  positioningScaleFactor,
+  timestampToPosition,
+  positionToTimestamp,
+  widthToDuration,
+} from './utils/positioning';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {
+  COLORS,
+  TOP_ROW_PADDING,
+  USER_TIMING_MARK_SIZE,
+  BORDER_SIZE,
+} from './constants';
+
+const ROW_HEIGHT_FIXED =
+  TOP_ROW_PADDING + USER_TIMING_MARK_SIZE + TOP_ROW_PADDING;
+
+export class UserTimingMarksView extends View {
+  _marks: UserTimingMark[];
+  _intrinsicSize: Size;
+
+  _hoveredMark: UserTimingMark | null = null;
+  onHover: ((mark: UserTimingMark | null) => void) | null = null;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    marks: UserTimingMark[],
+    duration: number,
+  ) {
+    super(surface, frame);
+    this._marks = marks;
+
+    this._intrinsicSize = {
+      width: duration,
+      height: ROW_HEIGHT_FIXED,
+    };
+  }
+
+  desiredSize(): Size {
+    return this._intrinsicSize;
+  }
+
+  setHoveredMark(hoveredMark: UserTimingMark | null) {
+    if (this._hoveredMark === hoveredMark) {
+      return;
+    }
+    this._hoveredMark = hoveredMark;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `UserTimingMark` as a circle in the canvas.
+   */
+  _drawSingleMark(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    mark: UserTimingMark,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame} = this;
+    const {timestamp} = mark;
+
+    const x = timestampToPosition(timestamp, scaleFactor, frame);
+    const size = USER_TIMING_MARK_SIZE;
+    const halfSize = size / 2;
+
+    const markRect: Rect = {
+      origin: {
+        x: x - halfSize,
+        y: baseY,
+      },
+      size: {width: size, height: size},
+    };
+    if (!rectIntersectsRect(markRect, rect)) {
+      return; // Not in view
+    }
+
+    const fillStyle = showHoverHighlight
+      ? COLORS.USER_TIMING_HOVER
+      : COLORS.USER_TIMING;
+
+    if (fillStyle !== null) {
+      const y = baseY + halfSize;
+
+      context.beginPath();
+      context.fillStyle = fillStyle;
+      context.moveTo(x, y - halfSize);
+      context.lineTo(x + halfSize, y);
+      context.lineTo(x, y + halfSize);
+      context.lineTo(x - halfSize, y);
+      context.fill();
+    }
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {frame, _marks, _hoveredMark, visibleArea} = this;
+
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+
+    // Draw marks
+    const baseY = frame.origin.y + TOP_ROW_PADDING;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    _marks.forEach(mark => {
+      if (mark === _hoveredMark) {
+        return;
+      }
+      this._drawSingleMark(
+        context,
+        visibleArea,
+        mark,
+        baseY,
+        scaleFactor,
+        false,
+      );
+    });
+
+    // Draw the hovered and/or selected items on top so they stand out.
+    // This is helpful if there are multiple (overlapping) items close to each other.
+    if (_hoveredMark !== null) {
+      this._drawSingleMark(
+        context,
+        visibleArea,
+        _hoveredMark,
+        baseY,
+        scaleFactor,
+        true,
+      );
+    }
+
+    // Render bottom border.
+    // Propose border rect, check if intersects with `rect`, draw intersection.
+    const borderFrame: Rect = {
+      origin: {
+        x: frame.origin.x,
+        y: frame.origin.y + ROW_HEIGHT_FIXED - BORDER_SIZE,
+      },
+      size: {
+        width: frame.size.width,
+        height: BORDER_SIZE,
+      },
+    };
+    if (rectIntersectsRect(borderFrame, visibleArea)) {
+      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
+      context.fillStyle = COLORS.PRIORITY_BORDER;
+      context.fillRect(
+        borderDrawableRect.origin.x,
+        borderDrawableRect.origin.y,
+        borderDrawableRect.size.width,
+        borderDrawableRect.size.height,
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {frame, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const {_marks} = this;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+    const timestampAllowance = widthToDuration(
+      USER_TIMING_MARK_SIZE / 2,
+      scaleFactor,
+    );
+
+    // Because data ranges may overlap, we want to find the last intersecting item.
+    // This will always be the one on "top" (the one the user is hovering over).
+    for (let index = _marks.length - 1; index >= 0; index--) {
+      const mark = _marks[index];
+      const {timestamp} = mark;
+
+      if (
+        timestamp - timestampAllowance <= hoverTimestamp &&
+        hoverTimestamp <= timestamp + timestampAllowance
+      ) {
+        viewRefs.hoveredView = this;
+        onHover(mark);
+        return;
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
new file mode 100644
index 00000000000..1d68ab6edfe
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DPR: number = window.devicePixelRatio || 1;
+export const LABEL_SIZE = 80;
+export const MARKER_HEIGHT = 20;
+export const MARKER_TICK_HEIGHT = 8;
+export const FONT_SIZE = 10;
+export const MARKER_TEXT_PADDING = 8;
+export const COLOR_HOVER_DIM_DELTA = 5;
+export const TOP_ROW_PADDING = 4;
+export const NATIVE_EVENT_HEIGHT = 14;
+export const SUSPENSE_EVENT_HEIGHT: number = 14;
+export const PENDING_SUSPENSE_EVENT_SIZE = 8;
+export const REACT_EVENT_DIAMETER = 6;
+export const USER_TIMING_MARK_SIZE = 8;
+export const REACT_MEASURE_HEIGHT = 14;
+export const BORDER_SIZE = 1 / DPR;
+export const FLAMECHART_FRAME_HEIGHT = 14;
+export const TEXT_PADDING = 3;
+export const SNAPSHOT_SCRUBBER_SIZE = 3;
+
+export const INTERVAL_TIMES = [
+  1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000,
+];
+export const MIN_INTERVAL_SIZE_PX = 70;
+
+// TODO Replace this with "export let" vars
+export let COLORS: {
+  BACKGROUND: string,
+  INTERNAL_MODULE_FRAME: string,
+  INTERNAL_MODULE_FRAME_HOVER: string,
+  INTERNAL_MODULE_FRAME_TEXT: string,
+  NATIVE_EVENT: string,
+  NATIVE_EVENT_HOVER: string,
+  NETWORK_PRIMARY: string,
+  NETWORK_PRIMARY_HOVER: string,
+  NETWORK_SECONDARY: string,
+  NETWORK_SECONDARY_HOVER: string,
+  PRIORITY_BACKGROUND: string,
+  PRIORITY_BORDER: string,
+  PRIORITY_LABEL: string,
+  REACT_COMMIT: string,
+  REACT_COMMIT_HOVER: string,
+  REACT_COMMIT_TEXT: string,
+  REACT_IDLE: string,
+  REACT_IDLE_HOVER: string,
+  REACT_LAYOUT_EFFECTS: string,
+  REACT_LAYOUT_EFFECTS_HOVER: string,
+  REACT_LAYOUT_EFFECTS_TEXT: string,
+  REACT_PASSIVE_EFFECTS: string,
+  REACT_PASSIVE_EFFECTS_HOVER: string,
+  REACT_PASSIVE_EFFECTS_TEXT: string,
+  REACT_RENDER: string,
+  REACT_RENDER_HOVER: string,
+  REACT_RENDER_TEXT: string,
+  REACT_RESIZE_BAR: string,
+  REACT_RESIZE_BAR_ACTIVE: string,
+  REACT_RESIZE_BAR_BORDER: string,
+  REACT_RESIZE_BAR_DOT: string,
+  REACT_SCHEDULE: string,
+  REACT_SCHEDULE_HOVER: string,
+  REACT_SUSPENSE_REJECTED_EVENT: string,
+  REACT_SUSPENSE_REJECTED_EVENT_HOVER: string,
+  REACT_SUSPENSE_RESOLVED_EVENT: string,
+  REACT_SUSPENSE_RESOLVED_EVENT_HOVER: string,
+  REACT_SUSPENSE_UNRESOLVED_EVENT: string,
+  REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: string,
+  REACT_THROWN_ERROR: string,
+  REACT_THROWN_ERROR_HOVER: string,
+  REACT_WORK_BORDER: string,
+  SCROLL_CARET: string,
+  SCRUBBER_BACKGROUND: string,
+  SCRUBBER_BORDER: string,
+  SEARCH_RESULT_FILL: string,
+  TEXT_COLOR: string,
+  TEXT_DIM_COLOR: string,
+  TIME_MARKER_LABEL: string,
+  USER_TIMING: string,
+  USER_TIMING_HOVER: string,
+  WARNING_BACKGROUND: string,
+  WARNING_BACKGROUND_HOVER: string,
+  WARNING_TEXT: string,
+  WARNING_TEXT_INVERED: string,
+} = {
+  BACKGROUND: '',
+  INTERNAL_MODULE_FRAME: '',
+  INTERNAL_MODULE_FRAME_HOVER: '',
+  INTERNAL_MODULE_FRAME_TEXT: '',
+  NATIVE_EVENT: '',
+  NATIVE_EVENT_HOVER: '',
+  NETWORK_PRIMARY: '',
+  NETWORK_PRIMARY_HOVER: '',
+  NETWORK_SECONDARY: '',
+  NETWORK_SECONDARY_HOVER: '',
+  PRIORITY_BACKGROUND: '',
+  PRIORITY_BORDER: '',
+  PRIORITY_LABEL: '',
+  USER_TIMING: '',
+  USER_TIMING_HOVER: '',
+  REACT_IDLE: '',
+  REACT_IDLE_HOVER: '',
+  REACT_RENDER: '',
+  REACT_RENDER_HOVER: '',
+  REACT_RENDER_TEXT: '',
+  REACT_COMMIT: '',
+  REACT_COMMIT_HOVER: '',
+  REACT_COMMIT_TEXT: '',
+  REACT_LAYOUT_EFFECTS: '',
+  REACT_LAYOUT_EFFECTS_HOVER: '',
+  REACT_LAYOUT_EFFECTS_TEXT: '',
+  REACT_PASSIVE_EFFECTS: '',
+  REACT_PASSIVE_EFFECTS_HOVER: '',
+  REACT_PASSIVE_EFFECTS_TEXT: '',
+  REACT_RESIZE_BAR: '',
+  REACT_RESIZE_BAR_ACTIVE: '',
+  REACT_RESIZE_BAR_BORDER: '',
+  REACT_RESIZE_BAR_DOT: '',
+  REACT_SCHEDULE: '',
+  REACT_SCHEDULE_HOVER: '',
+  REACT_SUSPENSE_REJECTED_EVENT: '',
+  REACT_SUSPENSE_REJECTED_EVENT_HOVER: '',
+  REACT_SUSPENSE_RESOLVED_EVENT: '',
+  REACT_SUSPENSE_RESOLVED_EVENT_HOVER: '',
+  REACT_SUSPENSE_UNRESOLVED_EVENT: '',
+  REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: '',
+  REACT_THROWN_ERROR: '',
+  REACT_THROWN_ERROR_HOVER: '',
+  REACT_WORK_BORDER: '',
+  SCROLL_CARET: '',
+  SCRUBBER_BACKGROUND: '',
+  SCRUBBER_BORDER: '',
+  SEARCH_RESULT_FILL: '',
+  TEXT_COLOR: '',
+  TEXT_DIM_COLOR: '',
+  TIME_MARKER_LABEL: '',
+  WARNING_BACKGROUND: '',
+  WARNING_BACKGROUND_HOVER: '',
+  WARNING_TEXT: '',
+  WARNING_TEXT_INVERED: '',
+};
+
+export function updateColorsToMatchTheme(element: Element): boolean {
+  const computedStyle = getComputedStyle(element);
+
+  // Check to see if styles have been initialized...
+  if (computedStyle.getPropertyValue('--color-background') == null) {
+    return false;
+  }
+
+  COLORS = {
+    BACKGROUND: computedStyle.getPropertyValue('--color-background'),
+    INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
+      '--color-timeline-internal-module',
+    ),
+    INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-internal-module-hover',
+    ),
+    INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
+      '--color-timeline-internal-module-text',
+    ),
+    NATIVE_EVENT: computedStyle.getPropertyValue(
+      '--color-timeline-native-event',
+    ),
+    NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-native-event-hover',
+    ),
+    NETWORK_PRIMARY: computedStyle.getPropertyValue(
+      '--color-timeline-network-primary',
+    ),
+    NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-network-primary-hover',
+    ),
+    NETWORK_SECONDARY: computedStyle.getPropertyValue(
+      '--color-timeline-network-secondary',
+    ),
+    NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-network-secondary-hover',
+    ),
+    PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
+      '--color-timeline-priority-background',
+    ),
+    PRIORITY_BORDER: computedStyle.getPropertyValue(
+      '--color-timeline-priority-border',
+    ),
+    PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
+    USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
+    USER_TIMING_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-user-timing-hover',
+    ),
+    REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
+    REACT_IDLE_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-idle-hover',
+    ),
+    REACT_RENDER: computedStyle.getPropertyValue(
+      '--color-timeline-react-render',
+    ),
+    REACT_RENDER_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-render-hover',
+    ),
+    REACT_RENDER_TEXT: computedStyle.getPropertyValue(
+      '--color-timeline-react-render-text',
+    ),
+    REACT_COMMIT: computedStyle.getPropertyValue(
+      '--color-timeline-react-commit',
+    ),
+    REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-commit-hover',
+    ),
+    REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
+      '--color-timeline-react-commit-text',
+    ),
+    REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
+      '--color-timeline-react-layout-effects',
+    ),
+    REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-layout-effects-hover',
+    ),
+    REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
+      '--color-timeline-react-layout-effects-text',
+    ),
+    REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
+      '--color-timeline-react-passive-effects',
+    ),
+    REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-passive-effects-hover',
+    ),
+    REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
+      '--color-timeline-react-passive-effects-text',
+    ),
+    REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
+    REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
+      '--color-resize-bar-active',
+    ),
+    REACT_RESIZE_BAR_BORDER: computedStyle.getPropertyValue(
+      '--color-resize-bar-border',
+    ),
+    REACT_RESIZE_BAR_DOT: computedStyle.getPropertyValue(
+      '--color-resize-bar-dot',
+    ),
+    REACT_SCHEDULE: computedStyle.getPropertyValue(
+      '--color-timeline-react-schedule',
+    ),
+    REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-schedule-hover',
+    ),
+    REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected',
+    ),
+    REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected-hover',
+    ),
+    REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-resolved',
+    ),
+    REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-resolved-hover',
+    ),
+    REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-unresolved',
+    ),
+    REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-unresolved-hover',
+    ),
+    REACT_THROWN_ERROR: computedStyle.getPropertyValue(
+      '--color-timeline-thrown-error',
+    ),
+    REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
+      '--color-timeline-thrown-error-hover',
+    ),
+    REACT_WORK_BORDER: computedStyle.getPropertyValue(
+      '--color-timeline-react-work-border',
+    ),
+    SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
+    SCRUBBER_BACKGROUND: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected',
+    ),
+    SEARCH_RESULT_FILL: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected',
+    ),
+    SCRUBBER_BORDER: computedStyle.getPropertyValue(
+      '--color-timeline-text-color',
+    ),
+    TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
+    TEXT_DIM_COLOR: computedStyle.getPropertyValue(
+      '--color-timeline-text-dim-color',
+    ),
+    TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
+    WARNING_BACKGROUND: computedStyle.getPropertyValue(
+      '--color-warning-background',
+    ),
+    WARNING_BACKGROUND_HOVER: computedStyle.getPropertyValue(
+      '--color-warning-background-hover',
+    ),
+    WARNING_TEXT: computedStyle.getPropertyValue('--color-warning-text-color'),
+    WARNING_TEXT_INVERED: computedStyle.getPropertyValue(
+      '--color-warning-text-color-inverted',
+    ),
+  };
+
+  return true;
+}
diff --git a/packages/react-devtools-timeline/src/content-views/index.js b/packages/react-devtools-timeline/src/content-views/index.js
new file mode 100644
index 00000000000..bdc102e22c5
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/index.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ComponentMeasuresView';
+export * from './FlamechartView';
+export * from './NativeEventsView';
+export * from './NetworkMeasuresView';
+export * from './ReactMeasuresView';
+export * from './SchedulingEventsView';
+export * from './SnapshotsView';
+export * from './SuspenseEventsView';
+export * from './ThrownErrorsView';
+export * from './TimeAxisMarkersView';
+export * from './UserTimingMarksView';
diff --git a/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js
new file mode 100644
index 00000000000..5a4d18d08aa
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 outerErrorA = new Error();
+
+export const moduleStartError = new Error();
+export const innerError = new Error();
+export const moduleStopError = new Error();
+
+export const outerErrorB = new Error();
diff --git a/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js
new file mode 100644
index 00000000000..82d9bd61d04
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 moduleAStartError = new Error();
+export const innerErrorA = new Error();
+export const moduleAStopError = new Error();
+
+export const outerError = new Error();
+
+export const moduleBStartError = new Error();
+export const innerErrorB = new Error();
+export const moduleBStopError = new Error();
diff --git a/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js
new file mode 100644
index 00000000000..c8ba8d48499
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {hslaColorToString, dimmedColor, ColorGenerator} from '../colors';
+
+describe('hslaColorToString', () => {
+  it('should transform colors to strings', () => {
+    expect(hslaColorToString({h: 1, s: 2, l: 3, a: 4})).toEqual(
+      'hsl(1deg 2% 3% / 4)',
+    );
+    expect(hslaColorToString({h: 3.14, s: 6.28, l: 1.68, a: 100})).toEqual(
+      'hsl(3.14deg 6.28% 1.68% / 100)',
+    );
+  });
+});
+
+describe('dimmedColor', () => {
+  it('should dim luminosity using delta', () => {
+    expect(dimmedColor({h: 1, s: 2, l: 3, a: 4}, 3)).toEqual({
+      h: 1,
+      s: 2,
+      l: 0,
+      a: 4,
+    });
+    expect(dimmedColor({h: 1, s: 2, l: 3, a: 4}, -3)).toEqual({
+      h: 1,
+      s: 2,
+      l: 6,
+      a: 4,
+    });
+  });
+});
+
+describe('ColorGenerator', () => {
+  describe('colorForID', () => {
+    it('should generate a color for an ID', () => {
+      expect(new ColorGenerator().colorForID('123')).toMatchInlineSnapshot(`
+        {
+          "a": 1,
+          "h": 190,
+          "l": 80,
+          "s": 67,
+        }
+      `);
+    });
+
+    it('should generate colors deterministically given an ID', () => {
+      expect(new ColorGenerator().colorForID('id1')).toEqual(
+        new ColorGenerator().colorForID('id1'),
+      );
+      expect(new ColorGenerator().colorForID('id2')).toEqual(
+        new ColorGenerator().colorForID('id2'),
+      );
+    });
+
+    it('should generate different colors for different IDs', () => {
+      expect(new ColorGenerator().colorForID('id1')).not.toEqual(
+        new ColorGenerator().colorForID('id2'),
+      );
+    });
+
+    it('should return colors that have been set manually', () => {
+      const generator = new ColorGenerator();
+      const manualColor = {h: 1, s: 2, l: 3, a: 4};
+      generator.setColorForID('id with set color', manualColor);
+      expect(generator.colorForID('id with set color')).toEqual(manualColor);
+      expect(generator.colorForID('some other id')).not.toEqual(manualColor);
+    });
+
+    it('should generate colors from fixed color spaces', () => {
+      const generator = new ColorGenerator(1, 2, 3, 4);
+      expect(generator.colorForID('123')).toEqual({h: 1, s: 2, l: 3, a: 4});
+      expect(generator.colorForID('234')).toEqual({h: 1, s: 2, l: 3, a: 4});
+    });
+
+    it('should generate colors from range color spaces', () => {
+      const generator = new ColorGenerator(
+        {min: 0, max: 360, count: 2},
+        2,
+        3,
+        4,
+      );
+      expect(generator.colorForID('123')).toEqual({h: 0, s: 2, l: 3, a: 4});
+      expect(generator.colorForID('234')).toEqual({h: 360, s: 2, l: 3, a: 4});
+    });
+  });
+});
diff --git a/packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js
new file mode 100644
index 00000000000..19751d48df3
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {isInternalModule} from '../moduleFilters';
+
+describe('isInternalModule', () => {
+  let map;
+
+  function createFlamechartStackFrame(scriptUrl, locationLine, locationColumn) {
+    return {
+      name: 'test',
+      timestamp: 0,
+      duration: 1,
+      scriptUrl,
+      locationLine,
+      locationColumn,
+    };
+  }
+
+  function createStackFrame(fileName, lineNumber, columnNumber) {
+    return {
+      columnNumber: columnNumber,
+      lineNumber: lineNumber,
+      fileName: fileName,
+      functionName: 'test',
+      source: `    at test (${fileName}:${lineNumber}:${columnNumber})`,
+    };
+  }
+
+  beforeEach(() => {
+    map = new Map();
+    map.set('foo', [
+      [createStackFrame('foo', 10, 0), createStackFrame('foo', 15, 100)],
+    ]);
+    map.set('bar', [
+      [createStackFrame('bar', 10, 0), createStackFrame('bar', 15, 100)],
+      [createStackFrame('bar', 20, 0), createStackFrame('bar', 25, 100)],
+    ]);
+  });
+
+  it('should properly identify stack frames within the provided module ranges', () => {
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 10, 0)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 12, 35)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 15, 100)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('bar', 12, 0)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('bar', 22, 125)),
+    ).toBe(true);
+  });
+
+  it('should properly identify stack frames outside of the provided module ranges', () => {
+    expect(isInternalModule(map, createFlamechartStackFrame('foo', 9, 0))).toBe(
+      false,
+    );
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 15, 101)),
+    ).toBe(false);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('bar', 17, 0)),
+    ).toBe(false);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('baz', 12, 0)),
+    ).toBe(false);
+  });
+});
diff --git a/packages/react-devtools-timeline/src/content-views/utils/colors.js b/packages/react-devtools-timeline/src/content-views/utils/colors.js
new file mode 100644
index 00000000000..63a9e6a989b
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/colors.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+type ColorSpace = number | {min: number, max: number, count?: number};
+
+// Docstrings from https://www.w3schools.com/css/css_colors_hsl.asp
+type HslaColor = $ReadOnly<{
+  /** Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. */
+  h: number,
+  /** Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. */
+  s: number,
+  /** Lightness is a percentage, 0% is black, 50% is neither light or dark, 100% is white. */
+  l: number,
+  /** Alpha is a percentage, 0% is fully transparent, and 100 is not transparent at all. */
+  a: number,
+}>;
+
+export function hslaColorToString({h, s, l, a}: HslaColor): string {
+  return `hsl(${h}deg ${s}% ${l}% / ${a})`;
+}
+
+export function dimmedColor(color: HslaColor, dimDelta: number): HslaColor {
+  return {
+    ...color,
+    l: color.l - dimDelta,
+  };
+}
+
+// Source: https://source.chromium.org/chromium/chromium/src/+/master:out/Debug/gen/devtools/platform/utilities.js;l=120
+function hashCode(string: string): number {
+  // Hash algorithm for substrings is described in "Über die Komplexität der Multiplikation in
+  // eingeschränkten Branchingprogrammmodellen" by Woelfe.
+  // http://opendatastructures.org/versions/edition-0.1d/ods-java/node33.html#SECTION00832000000000000000
+  const p = (1 << 30) * 4 - 5; // prime: 2^32 - 5
+  const z = 0x5033d967; // 32 bits from random.org
+  const z2 = 0x59d2f15d; // random odd 32 bit number
+  let s = 0;
+  let zi = 1;
+  for (let i = 0; i < string.length; i++) {
+    const xi = string.charCodeAt(i) * z2;
+    s = (s + zi * xi) % p;
+    zi = (zi * z) % p;
+  }
+  s = (s + zi * (p - 1)) % p;
+  return Math.abs(s | 0);
+}
+
+function indexToValueInSpace(index: number, space: ColorSpace): number {
+  if (typeof space === 'number') {
+    return space;
+  }
+  const count = space.count || space.max - space.min;
+  index %= count;
+  return (
+    space.min + Math.floor((index / (count - 1)) * (space.max - space.min))
+  );
+}
+
+/**
+ * Deterministic color generator.
+ *
+ * Adapted from: https://source.chromium.org/chromium/chromium/src/+/master:out/Debug/gen/devtools/common/Color.js
+ */
+export class ColorGenerator {
+  _hueSpace: ColorSpace;
+  _satSpace: ColorSpace;
+  _lightnessSpace: ColorSpace;
+  _alphaSpace: ColorSpace;
+  _colors: Map<string, HslaColor>;
+
+  constructor(
+    hueSpace?: ColorSpace,
+    satSpace?: ColorSpace,
+    lightnessSpace?: ColorSpace,
+    alphaSpace?: ColorSpace,
+  ) {
+    this._hueSpace = hueSpace || {min: 0, max: 360};
+    this._satSpace = satSpace || 67;
+    this._lightnessSpace = lightnessSpace || 80;
+    this._alphaSpace = alphaSpace || 1;
+    this._colors = new Map();
+  }
+
+  setColorForID(id: string, color: HslaColor) {
+    this._colors.set(id, color);
+  }
+
+  colorForID(id: string): HslaColor {
+    const cachedColor = this._colors.get(id);
+    if (cachedColor) {
+      return cachedColor;
+    }
+    const color = this._generateColorForID(id);
+    this._colors.set(id, color);
+    return color;
+  }
+
+  _generateColorForID(id: string): HslaColor {
+    const hash = hashCode(id);
+    return {
+      h: indexToValueInSpace(hash, this._hueSpace),
+      s: indexToValueInSpace(hash >> 8, this._satSpace),
+      l: indexToValueInSpace(hash >> 16, this._lightnessSpace),
+      a: indexToValueInSpace(hash >> 24, this._alphaSpace),
+    };
+  }
+}
diff --git a/packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js b/packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js
new file mode 100644
index 00000000000..ff35f0440f8
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  FlamechartStackFrame,
+  InternalModuleSourceToRanges,
+} from '../../types';
+
+import {
+  CHROME_WEBSTORE_EXTENSION_ID,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from 'react-devtools-shared/src/constants';
+
+export function isInternalModule(
+  internalModuleSourceToRanges: InternalModuleSourceToRanges,
+  flamechartStackFrame: FlamechartStackFrame,
+): boolean {
+  const {locationColumn, locationLine, scriptUrl} = flamechartStackFrame;
+
+  if (scriptUrl == null || locationColumn == null || locationLine == null) {
+    // This could indicate a browser-internal API like performance.mark().
+    return false;
+  }
+
+  // Internal modules are only registered if DevTools was running when the profile was captured,
+  // but DevTools should also hide its own frames to avoid over-emphasizing them.
+  if (
+    // Handle webpack-internal:// sources
+    scriptUrl.includes('/react-devtools') ||
+    scriptUrl.includes('/react_devtools') ||
+    // Filter out known extension IDs
+    scriptUrl.includes(CHROME_WEBSTORE_EXTENSION_ID) ||
+    scriptUrl.includes(INTERNAL_EXTENSION_ID) ||
+    scriptUrl.includes(LOCAL_EXTENSION_ID)
+    // Unfortunately this won't get everything, like relatively loaded chunks or Web Worker files.
+  ) {
+    return true;
+  }
+
+  // Filter out React internal packages.
+  const ranges = internalModuleSourceToRanges.get(scriptUrl);
+  if (ranges != null) {
+    for (let i = 0; i < ranges.length; i++) {
+      const [startStackFrame, stopStackFrame] = ranges[i];
+
+      const isAfterStart =
+        // $FlowFixMe[invalid-compare] -- TODO: Revealed when adding types to error-stack-parser
+        locationLine > startStackFrame.lineNumber ||
+        (locationLine === startStackFrame.lineNumber &&
+          // $FlowFixMe[invalid-compare]
+          locationColumn >= startStackFrame.columnNumber);
+      const isBeforeStop =
+        // $FlowFixMe[invalid-compare]
+        locationLine < stopStackFrame.lineNumber ||
+        (locationLine === stopStackFrame.lineNumber &&
+          // $FlowFixMe[invalid-compare]
+          locationColumn <= stopStackFrame.columnNumber);
+
+      if (isAfterStart && isBeforeStop) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
diff --git a/packages/react-devtools-timeline/src/content-views/utils/positioning.js b/packages/react-devtools-timeline/src/content-views/utils/positioning.js
new file mode 100644
index 00000000000..8052f86e32d
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/positioning.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Rect} from '../../view-base';
+
+export function positioningScaleFactor(
+  intrinsicWidth: number,
+  frame: Rect,
+): number {
+  return frame.size.width / intrinsicWidth;
+}
+
+export function timestampToPosition(
+  timestamp: number,
+  scaleFactor: number,
+  frame: Rect,
+): number {
+  return frame.origin.x + timestamp * scaleFactor;
+}
+
+export function positionToTimestamp(
+  position: number,
+  scaleFactor: number,
+  frame: Rect,
+): number {
+  return (position - frame.origin.x) / scaleFactor;
+}
+
+export function durationToWidth(duration: number, scaleFactor: number): number {
+  return duration * scaleFactor;
+}
+
+export function widthToDuration(width: number, scaleFactor: number): number {
+  return width / scaleFactor;
+}
diff --git a/packages/react-devtools-timeline/src/content-views/utils/text.js b/packages/react-devtools-timeline/src/content-views/utils/text.js
new file mode 100644
index 00000000000..000a41cb0cd
--- /dev/null
+++ b/packages/react-devtools-timeline/src/content-views/utils/text.js
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Rect} from '../../view-base';
+
+import {rectEqualToRect} from '../../view-base';
+import {COLORS, FONT_SIZE, TEXT_PADDING} from '../constants';
+
+const cachedTextWidths = new Map<string, number>();
+
+export function getTextWidth(
+  context: CanvasRenderingContext2D,
+  text: string,
+): number {
+  let measuredWidth = cachedTextWidths.get(text);
+  if (measuredWidth == null) {
+    measuredWidth = context.measureText(text).width;
+    cachedTextWidths.set(text, measuredWidth);
+  }
+
+  return ((measuredWidth: any): number);
+}
+
+export function trimText(
+  context: CanvasRenderingContext2D,
+  text: string,
+  width: number,
+): string | null {
+  const maxIndex = text.length - 1;
+
+  let startIndex = 0;
+  let stopIndex = maxIndex;
+
+  let longestValidIndex = 0;
+  let longestValidText = null;
+
+  // Trimming long text could be really slow if we decrease only 1 character at a time.
+  // Trimming with more of a binary search approach is faster in the worst cases.
+  while (startIndex <= stopIndex) {
+    const currentIndex = Math.floor((startIndex + stopIndex) / 2);
+    const trimmedText =
+      currentIndex === maxIndex ? text : text.slice(0, currentIndex) + '…';
+
+    if (getTextWidth(context, trimmedText) <= width) {
+      if (longestValidIndex < currentIndex) {
+        longestValidIndex = currentIndex;
+        longestValidText = trimmedText;
+      }
+
+      startIndex = currentIndex + 1;
+    } else {
+      stopIndex = currentIndex - 1;
+    }
+  }
+
+  return longestValidText;
+}
+
+type TextConfig = {
+  fillStyle?: string,
+  fontSize?: number,
+  textAlign?: 'left' | 'center',
+};
+
+export function drawText(
+  text: string,
+  context: CanvasRenderingContext2D,
+  fullRect: Rect,
+  drawableRect: Rect,
+  config?: TextConfig,
+): void {
+  const {
+    fillStyle = COLORS.TEXT_COLOR,
+    fontSize = FONT_SIZE,
+    textAlign = 'left',
+  } = config || {};
+
+  if (fullRect.size.width > TEXT_PADDING * 2) {
+    context.textAlign = textAlign;
+    context.textBaseline = 'middle';
+    context.font = `${fontSize}px sans-serif`;
+
+    const {x, y} = fullRect.origin;
+
+    const trimmedName = trimText(
+      context,
+      text,
+      fullRect.size.width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
+    );
+
+    if (trimmedName !== null) {
+      context.fillStyle = fillStyle;
+
+      // Prevent text from visibly overflowing its container when clipped.
+      const textOverflowsViewableArea = !rectEqualToRect(
+        drawableRect,
+        fullRect,
+      );
+      if (textOverflowsViewableArea) {
+        context.save();
+        context.beginPath();
+        context.rect(
+          drawableRect.origin.x,
+          drawableRect.origin.y,
+          drawableRect.size.width,
+          drawableRect.size.height,
+        );
+        context.closePath();
+        context.clip();
+      }
+
+      let textX;
+      if (textAlign === 'center') {
+        textX = x + fullRect.size.width / 2 + TEXT_PADDING - (x < 0 ? x : 0);
+      } else {
+        textX = x + TEXT_PADDING - (x < 0 ? x : 0);
+      }
+
+      const textY = y + fullRect.size.height / 2;
+
+      context.fillText(trimmedName, textX, textY);
+
+      if (textOverflowsViewableArea) {
+        context.restore();
+      }
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js b/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
new file mode 100644
index 00000000000..2b8dfcd266a
--- /dev/null
+++ b/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {createResource} from 'react-devtools-shared/src/devtools/cache';
+import {importFile} from './import-worker';
+
+import type {Resource} from 'react-devtools-shared/src/devtools/cache';
+import type {TimelineData} from './types';
+import type {ImportWorkerOutputData} from './import-worker/index';
+
+export type DataResource = Resource<void, File, TimelineData | Error>;
+
+export default function createDataResourceFromImportedFile(
+  file: File,
+): DataResource {
+  return createResource(
+    () => {
+      return new Promise<TimelineData | Error>((resolve, reject) => {
+        const promise = ((importFile(
+          file,
+        ): any): Promise<ImportWorkerOutputData>);
+        promise.then(data => {
+          switch (data.status) {
+            case 'SUCCESS':
+              resolve(data.processedData);
+              break;
+            case 'INVALID_PROFILE_ERROR':
+              resolve(data.error);
+              break;
+            case 'UNEXPECTED_ERROR':
+              reject(data.error);
+              break;
+          }
+        });
+      });
+    },
+    () => file,
+    {useWeakMap: true},
+  );
+}
diff --git a/packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js b/packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js
new file mode 100644
index 00000000000..84c11c43b9d
--- /dev/null
+++ b/packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * An error thrown when an invalid profile could not be processed.
+ */
+export default class InvalidProfileError extends Error {}
diff --git a/packages/react-devtools-timeline/src/import-worker/importFile.js b/packages/react-devtools-timeline/src/import-worker/importFile.js
new file mode 100644
index 00000000000..c57f436e6fd
--- /dev/null
+++ b/packages/react-devtools-timeline/src/import-worker/importFile.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'regenerator-runtime/runtime';
+
+import type {TimelineEvent} from '@elg/speedscope';
+import type {ImportWorkerOutputData} from './index';
+
+import preprocessData from './preprocessData';
+import {readInputData} from './readInputData';
+import InvalidProfileError from './InvalidProfileError';
+
+export async function importFile(file: File): Promise<ImportWorkerOutputData> {
+  try {
+    const readFile = await readInputData(file);
+    const events: TimelineEvent[] = JSON.parse(readFile);
+    if (events.length === 0) {
+      throw new InvalidProfileError('No profiling data found in file.');
+    }
+
+    const processedData = await preprocessData(events);
+
+    return {
+      status: 'SUCCESS',
+      processedData,
+    };
+  } catch (error) {
+    if (error instanceof InvalidProfileError) {
+      return {
+        status: 'INVALID_PROFILE_ERROR',
+        error,
+      };
+    } else {
+      return {
+        status: 'UNEXPECTED_ERROR',
+        error,
+      };
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/import-worker/importFile.worker.js b/packages/react-devtools-timeline/src/import-worker/importFile.worker.js
new file mode 100644
index 00000000000..70a32945067
--- /dev/null
+++ b/packages/react-devtools-timeline/src/import-worker/importFile.worker.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as importFileModule from './importFile';
+
+export const importFile = importFileModule.importFile;
diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
new file mode 100644
index 00000000000..7c05ec89713
--- /dev/null
+++ b/packages/react-devtools-timeline/src/import-worker/index.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 uses workerize to load ./importFile.worker as a webworker and instanciates it,
+// exposing flow typed functions that can be used on other files.
+
+import * as importFileModule from './importFile';
+import WorkerizedImportFile from './importFile.worker';
+
+import type {TimelineData} from '../types';
+
+type ImportFileModule = typeof importFileModule;
+
+const workerizedImportFile: ImportFileModule = window.Worker
+  ? WorkerizedImportFile()
+  : importFileModule;
+
+export type ImportWorkerOutputData =
+  | {status: 'SUCCESS', processedData: TimelineData}
+  | {status: 'INVALID_PROFILE_ERROR', error: Error}
+  | {status: 'UNEXPECTED_ERROR', error: Error};
+
+export type importFileFunction = (file: File) => ImportWorkerOutputData;
+
+export const importFile = (file: File): Promise<ImportWorkerOutputData> =>
+  workerizedImportFile.importFile(file);
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
new file mode 100644
index 00000000000..8d45be544d7
--- /dev/null
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -0,0 +1,1174 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  importFromChromeTimeline,
+  Flamechart as SpeedscopeFlamechart,
+} from '@elg/speedscope';
+import type {TimelineEvent} from '@elg/speedscope';
+import type {
+  ErrorStackFrame,
+  BatchUID,
+  Flamechart,
+  Milliseconds,
+  NativeEvent,
+  NetworkMeasure,
+  Phase,
+  ReactLane,
+  ReactComponentMeasure,
+  ReactComponentMeasureType,
+  ReactMeasure,
+  ReactMeasureType,
+  TimelineData,
+  SchedulingEvent,
+  SuspenseEvent,
+  Snapshot,
+} from '../types';
+import {
+  REACT_TOTAL_NUM_LANES,
+  SCHEDULING_PROFILER_VERSION,
+  SNAPSHOT_MAX_HEIGHT,
+} from '../constants';
+import InvalidProfileError from './InvalidProfileError';
+import {getBatchRange} from '../utils/getBatchRange';
+import ErrorStackParser from 'error-stack-parser';
+
+type MeasureStackElement = {
+  type: ReactMeasureType,
+  depth: number,
+  measure: ReactMeasure,
+  startTime: Milliseconds,
+  stopTime?: Milliseconds,
+};
+
+type ProcessorState = {
+  asyncProcessingPromises: Promise<any>[],
+  batchUID: BatchUID,
+  currentReactComponentMeasure: ReactComponentMeasure | null,
+  internalModuleCurrentStackFrame: ErrorStackFrame | null,
+  internalModuleStackStringSet: Set<string>,
+  measureStack: MeasureStackElement[],
+  nativeEventStack: NativeEvent[],
+  nextRenderShouldGenerateNewBatchID: boolean,
+  potentialLongEvents: Array<[NativeEvent, BatchUID]>,
+  potentialLongNestedUpdate: SchedulingEvent | null,
+  potentialLongNestedUpdates: Array<[SchedulingEvent, BatchUID]>,
+  potentialSuspenseEventsOutsideOfTransition: Array<
+    [SuspenseEvent, ReactLane[]],
+  >,
+  requestIdToNetworkMeasureMap: Map<string, NetworkMeasure>,
+  uidCounter: BatchUID,
+  unresolvedSuspenseEvents: Map<string, SuspenseEvent>,
+};
+
+const NATIVE_EVENT_DURATION_THRESHOLD = 20;
+const NESTED_UPDATE_DURATION_THRESHOLD = 20;
+
+const WARNING_STRINGS = {
+  LONG_EVENT_HANDLER:
+    'An event handler scheduled a big update with React. Consider using the Transition API to defer some of this work.',
+  NESTED_UPDATE:
+    'A big nested update was scheduled during layout. ' +
+    'Nested updates require React to re-render synchronously before the browser can paint. ' +
+    'Consider delaying this update by moving it to a passive effect (useEffect).',
+  SUSPEND_DURING_UPDATE:
+    'A component suspended during an update which caused a fallback to be shown. ' +
+    "Consider using the Transition API to avoid hiding components after they've been mounted.",
+};
+
+// Exported for tests
+export function getLanesFromTransportDecimalBitmask(
+  laneBitmaskString: string,
+): ReactLane[] {
+  const laneBitmask = parseInt(laneBitmaskString, 10);
+
+  // As negative numbers are stored in two's complement format, our bitmask
+  // checks will be thrown off by them.
+  if (laneBitmask < 0) {
+    return [];
+  }
+
+  const lanes = [];
+  let powersOfTwo = 0;
+  while (powersOfTwo <= REACT_TOTAL_NUM_LANES) {
+    if ((1 << powersOfTwo) & laneBitmask) {
+      lanes.push(powersOfTwo);
+    }
+    powersOfTwo++;
+  }
+  return lanes;
+}
+
+function updateLaneToLabelMap(
+  profilerData: TimelineData,
+  laneLabelTuplesString: string,
+): void {
+  // These marks appear multiple times in the data;
+  // We only need to extact them once.
+  if (profilerData.laneToLabelMap.size === 0) {
+    const laneLabelTuples = laneLabelTuplesString.split(',');
+    for (let laneIndex = 0; laneIndex < laneLabelTuples.length; laneIndex++) {
+      // The numeric lane value (e.g. 64) isn't important.
+      // The profiler parses and stores the lane's position within the bitmap,
+      // (e.g. lane 1 is index 0, lane 16 is index 4).
+      profilerData.laneToLabelMap.set(laneIndex, laneLabelTuples[laneIndex]);
+    }
+  }
+}
+
+let profilerVersion = null;
+
+function getLastType(stack: ProcessorState['measureStack']) {
+  if (stack.length > 0) {
+    const {type} = stack[stack.length - 1];
+    return type;
+  }
+  return null;
+}
+
+function getDepth(stack: ProcessorState['measureStack']) {
+  if (stack.length > 0) {
+    const {depth, type} = stack[stack.length - 1];
+    return type === 'render-idle' ? depth : depth + 1;
+  }
+  return 0;
+}
+
+function markWorkStarted(
+  type: ReactMeasureType,
+  startTime: Milliseconds,
+  lanes: ReactLane[],
+  currentProfilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const {batchUID, measureStack} = state;
+  const depth = getDepth(measureStack);
+
+  const measure: ReactMeasure = {
+    type,
+    batchUID,
+    depth,
+    lanes,
+    timestamp: startTime,
+    duration: 0,
+  };
+
+  state.measureStack.push({depth, measure, startTime, type});
+
+  // This array is pre-initialized when the batchUID is generated.
+  const measures = currentProfilerData.batchUIDToMeasuresMap.get(batchUID);
+  if (measures != null) {
+    measures.push(measure);
+  } else {
+    currentProfilerData.batchUIDToMeasuresMap.set(state.batchUID, [measure]);
+  }
+
+  // This array is pre-initialized before processing starts.
+  lanes.forEach(lane => {
+    ((currentProfilerData.laneToReactMeasureMap.get(
+      lane,
+    ): any): ReactMeasure[]).push(measure);
+  });
+}
+
+function markWorkCompleted(
+  type: ReactMeasureType,
+  stopTime: Milliseconds,
+  currentProfilerData: TimelineData,
+  stack: ProcessorState['measureStack'],
+) {
+  if (stack.length === 0) {
+    console.error(
+      'Unexpected type "%s" completed at %sms while stack is empty.',
+      type,
+      stopTime,
+    );
+    // Ignore work "completion" user timing mark that doesn't complete anything
+    return;
+  }
+
+  const last = stack[stack.length - 1];
+  if (last.type !== type) {
+    console.error(
+      'Unexpected type "%s" completed at %sms before "%s" completed.',
+      type,
+      stopTime,
+      last.type,
+    );
+  }
+
+  // $FlowFixMe[incompatible-use]
+  const {measure, startTime} = stack.pop();
+  if (!measure) {
+    console.error('Could not find matching measure for type "%s".', type);
+  }
+
+  // $FlowFixMe[cannot-write] This property should not be writable outside of this function.
+  measure.duration = stopTime - startTime;
+}
+
+function throwIfIncomplete(
+  type: ReactMeasureType,
+  stack: ProcessorState['measureStack'],
+) {
+  const lastIndex = stack.length - 1;
+  if (lastIndex >= 0) {
+    const last = stack[lastIndex];
+    if (last.stopTime === undefined && last.type === type) {
+      throw new InvalidProfileError(
+        `Unexpected type "${type}" started before "${last.type}" completed.`,
+      );
+    }
+  }
+}
+
+function processEventDispatch(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const data = event.args.data;
+  const type = data.type;
+
+  if (type.startsWith('react-')) {
+    const stackTrace = data.stackTrace;
+    if (stackTrace) {
+      const topFrame = stackTrace[stackTrace.length - 1];
+      if (topFrame.url.includes('/react-dom.')) {
+        // Filter out fake React events dispatched by invokeGuardedCallbackDev.
+        return;
+      }
+    }
+  }
+
+  // Reduce noise from events like DOMActivate, load/unload, etc. which are usually not relevant
+  if (
+    type === 'blur' ||
+    type === 'click' ||
+    type === 'input' ||
+    type.startsWith('focus') ||
+    type.startsWith('key') ||
+    type.startsWith('mouse') ||
+    type.startsWith('pointer')
+  ) {
+    const duration = event.dur / 1000;
+
+    let depth = 0;
+
+    while (state.nativeEventStack.length > 0) {
+      const prevNativeEvent =
+        state.nativeEventStack[state.nativeEventStack.length - 1];
+      const prevStopTime = prevNativeEvent.timestamp + prevNativeEvent.duration;
+
+      if (timestamp < prevStopTime) {
+        depth = prevNativeEvent.depth + 1;
+        break;
+      } else {
+        state.nativeEventStack.pop();
+      }
+    }
+
+    const nativeEvent = {
+      depth,
+      duration,
+      timestamp,
+      type,
+      warning: null,
+    };
+
+    profilerData.nativeEvents.push(nativeEvent);
+
+    // Keep track of curent event in case future ones overlap.
+    // We separate them into different vertical lanes in this case.
+    state.nativeEventStack.push(nativeEvent);
+  }
+}
+
+function processResourceFinish(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const requestId = event.args.data.requestId;
+  const networkMeasure = state.requestIdToNetworkMeasureMap.get(requestId);
+  if (networkMeasure != null) {
+    networkMeasure.finishTimestamp = timestamp;
+    if (networkMeasure.firstReceivedDataTimestamp === 0) {
+      networkMeasure.firstReceivedDataTimestamp = timestamp;
+    }
+    if (networkMeasure.lastReceivedDataTimestamp === 0) {
+      networkMeasure.lastReceivedDataTimestamp = timestamp;
+    }
+
+    // Clean up now that the resource is done.
+    state.requestIdToNetworkMeasureMap.delete(event.args.data.requestId);
+  }
+}
+
+function processResourceReceivedData(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const requestId = event.args.data.requestId;
+  const networkMeasure = state.requestIdToNetworkMeasureMap.get(requestId);
+  if (networkMeasure != null) {
+    if (networkMeasure.firstReceivedDataTimestamp === 0) {
+      networkMeasure.firstReceivedDataTimestamp = timestamp;
+    }
+    networkMeasure.lastReceivedDataTimestamp = timestamp;
+    networkMeasure.finishTimestamp = timestamp;
+  }
+}
+
+function processResourceReceiveResponse(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const requestId = event.args.data.requestId;
+  const networkMeasure = state.requestIdToNetworkMeasureMap.get(requestId);
+  if (networkMeasure != null) {
+    networkMeasure.receiveResponseTimestamp = timestamp;
+  }
+}
+
+function processScreenshot(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const encodedSnapshot = event.args.snapshot; // Base 64 encoded
+
+  const snapshot: Snapshot = {
+    height: 0,
+    image: null,
+    imageSource: `data:image/png;base64,${encodedSnapshot}`,
+    timestamp,
+    width: 0,
+  };
+
+  // Delay processing until we've extracted snapshot dimensions.
+  let resolveFn = ((null: any): Function);
+  state.asyncProcessingPromises.push(
+    new Promise(resolve => {
+      resolveFn = resolve;
+    }),
+  );
+
+  // Parse the Base64 image data to determine native size.
+  // This will be used later to scale for display within the thumbnail strip.
+  fetch(snapshot.imageSource)
+    .then(response => response.blob())
+    .then(blob => {
+      // $FlowFixMe[cannot-resolve-name] createImageBitmap
+      createImageBitmap(blob).then(bitmap => {
+        snapshot.height = bitmap.height;
+        snapshot.width = bitmap.width;
+
+        resolveFn();
+      });
+    });
+
+  profilerData.snapshots.push(snapshot);
+}
+
+function processResourceSendRequest(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: TimelineData,
+  state: ProcessorState,
+) {
+  const data = event.args.data;
+  const requestId = data.requestId;
+
+  const availableDepths = new Array<boolean>(
+    state.requestIdToNetworkMeasureMap.size + 1,
+  ).fill(true);
+  state.requestIdToNetworkMeasureMap.forEach(({depth}) => {
+    availableDepths[depth] = false;
+  });
+
+  let depth = 0;
+  for (let i = 0; i < availableDepths.length; i++) {
+    if (availableDepths[i]) {
+      depth = i;
+      break;
+    }
+  }
+
+  const networkMeasure: NetworkMeasure = {
+    depth,
+    finishTimestamp: 0,
+    firstReceivedDataTimestamp: 0,
+    lastReceivedDataTimestamp: 0,
+    requestId,
+    requestMethod: data.requestMethod,
+    priority: data.priority,
+    sendRequestTimestamp: timestamp,
+    receiveResponseTimestamp: 0,
+    url: data.url,
+  };
+
+  state.requestIdToNetworkMeasureMap.set(requestId, networkMeasure);
+
+  profilerData.networkMeasures.push(networkMeasure);
+  networkMeasure.sendRequestTimestamp = timestamp;
+}
+
+function processTimelineEvent(
+  event: TimelineEvent,
+  /** Finalized profiler data up to `event`. May be mutated. */
+  currentProfilerData: TimelineData,
+  /** Intermediate processor state. May be mutated. */
+  state: ProcessorState,
+) {
+  const {cat, name, ts, ph} = event;
+
+  const startTime = (ts - currentProfilerData.startTime) / 1000;
+
+  switch (cat) {
+    case 'disabled-by-default-devtools.screenshot':
+      processScreenshot(event, startTime, currentProfilerData, state);
+      break;
+    case 'devtools.timeline':
+      switch (name) {
+        case 'EventDispatch':
+          processEventDispatch(event, startTime, currentProfilerData, state);
+          break;
+        case 'ResourceFinish':
+          processResourceFinish(event, startTime, currentProfilerData, state);
+          break;
+        case 'ResourceReceivedData':
+          processResourceReceivedData(
+            event,
+            startTime,
+            currentProfilerData,
+            state,
+          );
+          break;
+        case 'ResourceReceiveResponse':
+          processResourceReceiveResponse(
+            event,
+            startTime,
+            currentProfilerData,
+            state,
+          );
+          break;
+        case 'ResourceSendRequest':
+          processResourceSendRequest(
+            event,
+            startTime,
+            currentProfilerData,
+            state,
+          );
+          break;
+      }
+      break;
+    case 'blink.user_timing':
+      if (name.startsWith('--react-version-')) {
+        const [reactVersion] = name.slice(16).split('-');
+        currentProfilerData.reactVersion = reactVersion;
+      } else if (name.startsWith('--profiler-version-')) {
+        const [versionString] = name.slice(19).split('-');
+        profilerVersion = parseInt(versionString, 10);
+        if (profilerVersion !== SCHEDULING_PROFILER_VERSION) {
+          throw new InvalidProfileError(
+            `This version of profiling data (${versionString}) is not supported by the current profiler.`,
+          );
+        }
+      } else if (name.startsWith('--react-lane-labels-')) {
+        const [laneLabelTuplesString] = name.slice(20).split('-');
+        updateLaneToLabelMap(currentProfilerData, laneLabelTuplesString);
+      } else if (name.startsWith('--component-')) {
+        processReactComponentMeasure(
+          name,
+          startTime,
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--schedule-render-')) {
+        const [laneBitmaskString] = name.slice(18).split('-');
+
+        currentProfilerData.schedulingEvents.push({
+          type: 'schedule-render',
+          lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          timestamp: startTime,
+          warning: null,
+        });
+      } else if (name.startsWith('--schedule-forced-update-')) {
+        const [laneBitmaskString, componentName] = name.slice(25).split('-');
+
+        const forceUpdateEvent: SchedulingEvent = {
+          type: 'schedule-force-update',
+          lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          componentName,
+          timestamp: startTime,
+          warning: null,
+        };
+
+        // If this is a nested update, make a note of it.
+        // Once we're done processing events, we'll check to see if it was a long update and warn about it.
+        if (state.measureStack.find(({type}) => type === 'commit')) {
+          state.potentialLongNestedUpdate = forceUpdateEvent;
+        }
+
+        currentProfilerData.schedulingEvents.push(forceUpdateEvent);
+      } else if (name.startsWith('--schedule-state-update-')) {
+        const [laneBitmaskString, componentName] = name.slice(24).split('-');
+
+        const stateUpdateEvent: SchedulingEvent = {
+          type: 'schedule-state-update',
+          lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          componentName,
+          timestamp: startTime,
+          warning: null,
+        };
+
+        // If this is a nested update, make a note of it.
+        // Once we're done processing events, we'll check to see if it was a long update and warn about it.
+        if (state.measureStack.find(({type}) => type === 'commit')) {
+          state.potentialLongNestedUpdate = stateUpdateEvent;
+        }
+
+        currentProfilerData.schedulingEvents.push(stateUpdateEvent);
+      } else if (name.startsWith('--error-')) {
+        const [componentName, phase, message] = name.slice(8).split('-');
+
+        currentProfilerData.thrownErrors.push({
+          componentName,
+          message,
+          phase: ((phase: any): Phase),
+          timestamp: startTime,
+          type: 'thrown-error',
+        });
+      } else if (name.startsWith('--suspense-suspend-')) {
+        const [id, componentName, phase, laneBitmaskString, promiseName] = name
+          .slice(19)
+          .split('-');
+        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+
+        const availableDepths = new Array<boolean>(
+          state.unresolvedSuspenseEvents.size + 1,
+        ).fill(true);
+        state.unresolvedSuspenseEvents.forEach(({depth}) => {
+          availableDepths[depth] = false;
+        });
+
+        let depth = 0;
+        for (let i = 0; i < availableDepths.length; i++) {
+          if (availableDepths[i]) {
+            depth = i;
+            break;
+          }
+        }
+
+        // TODO (timeline) Maybe we should calculate depth in post,
+        // so unresolved Suspense requests don't take up space.
+        // We can't know if they'll be resolved or not at this point.
+        // We'll just give them a default (fake) duration width.
+
+        const suspenseEvent: SuspenseEvent = {
+          componentName,
+          depth,
+          duration: null,
+          id,
+          phase: ((phase: any): Phase),
+          promiseName: promiseName || null,
+          resolution: 'unresolved',
+          timestamp: startTime,
+          type: 'suspense',
+          warning: null,
+        };
+
+        if (phase === 'update') {
+          // If a component suspended during an update, we should verify that it was during a transition.
+          // We need the lane metadata to verify this though.
+          // Since that data is only logged during commit, we may not have it yet.
+          // Store these events for post-processing then.
+          state.potentialSuspenseEventsOutsideOfTransition.push([
+            suspenseEvent,
+            lanes,
+          ]);
+        }
+
+        currentProfilerData.suspenseEvents.push(suspenseEvent);
+        state.unresolvedSuspenseEvents.set(id, suspenseEvent);
+      } else if (name.startsWith('--suspense-resolved-')) {
+        const [id] = name.slice(20).split('-');
+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);
+        if (suspenseEvent != null) {
+          state.unresolvedSuspenseEvents.delete(id);
+
+          suspenseEvent.duration = startTime - suspenseEvent.timestamp;
+          suspenseEvent.resolution = 'resolved';
+        }
+      } else if (name.startsWith('--suspense-rejected-')) {
+        const [id] = name.slice(20).split('-');
+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);
+        if (suspenseEvent != null) {
+          state.unresolvedSuspenseEvents.delete(id);
+
+          suspenseEvent.duration = startTime - suspenseEvent.timestamp;
+          suspenseEvent.resolution = 'rejected';
+        }
+      } else if (name.startsWith('--render-start-')) {
+        if (state.nextRenderShouldGenerateNewBatchID) {
+          state.nextRenderShouldGenerateNewBatchID = false;
+          state.batchUID = ((state.uidCounter++: any): BatchUID);
+        }
+
+        // If this render is the result of a nested update, make a note of it.
+        // Once we're done processing events, we'll check to see if it was a long update and warn about it.
+        if (state.potentialLongNestedUpdate !== null) {
+          state.potentialLongNestedUpdates.push([
+            state.potentialLongNestedUpdate,
+            state.batchUID,
+          ]);
+          state.potentialLongNestedUpdate = null;
+        }
+
+        const [laneBitmaskString] = name.slice(15).split('-');
+
+        throwIfIncomplete('render', state.measureStack);
+        if (getLastType(state.measureStack) !== 'render-idle') {
+          markWorkStarted(
+            'render-idle',
+            startTime,
+            getLanesFromTransportDecimalBitmask(laneBitmaskString),
+            currentProfilerData,
+            state,
+          );
+        }
+        markWorkStarted(
+          'render',
+          startTime,
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          currentProfilerData,
+          state,
+        );
+
+        for (let i = 0; i < state.nativeEventStack.length; i++) {
+          const nativeEvent = state.nativeEventStack[i];
+          const stopTime = nativeEvent.timestamp + nativeEvent.duration;
+
+          // If React work was scheduled during an event handler, and the event had a long duration,
+          // it might be because the React render was long and stretched the event.
+          // It might also be that the React work was short and that something else stretched the event.
+          // Make a note of this event for now and we'll examine the batch of React render work later.
+          // (We can't know until we're done processing the React update anyway.)
+          if (stopTime > startTime) {
+            state.potentialLongEvents.push([nativeEvent, state.batchUID]);
+          }
+        }
+      } else if (
+        name.startsWith('--render-stop') ||
+        name.startsWith('--render-yield')
+      ) {
+        markWorkCompleted(
+          'render',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } else if (name.startsWith('--commit-start-')) {
+        state.nextRenderShouldGenerateNewBatchID = true;
+        const [laneBitmaskString] = name.slice(15).split('-');
+
+        markWorkStarted(
+          'commit',
+          startTime,
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--commit-stop')) {
+        markWorkCompleted(
+          'commit',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+        markWorkCompleted(
+          'render-idle',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } else if (name.startsWith('--layout-effects-start-')) {
+        const [laneBitmaskString] = name.slice(23).split('-');
+
+        markWorkStarted(
+          'layout-effects',
+          startTime,
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--layout-effects-stop')) {
+        markWorkCompleted(
+          'layout-effects',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } else if (name.startsWith('--passive-effects-start-')) {
+        const [laneBitmaskString] = name.slice(24).split('-');
+
+        markWorkStarted(
+          'passive-effects',
+          startTime,
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--passive-effects-stop')) {
+        markWorkCompleted(
+          'passive-effects',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } else if (name.startsWith('--react-internal-module-start-')) {
+        const stackFrameStart = name.slice(30);
+
+        if (!state.internalModuleStackStringSet.has(stackFrameStart)) {
+          state.internalModuleStackStringSet.add(stackFrameStart);
+
+          const parsedStackFrameStart = parseStackFrame(stackFrameStart);
+
+          state.internalModuleCurrentStackFrame = parsedStackFrameStart;
+        }
+      } else if (name.startsWith('--react-internal-module-stop-')) {
+        const stackFrameStop = name.slice(29);
+
+        if (!state.internalModuleStackStringSet.has(stackFrameStop)) {
+          state.internalModuleStackStringSet.add(stackFrameStop);
+
+          const parsedStackFrameStop = parseStackFrame(stackFrameStop);
+
+          if (
+            parsedStackFrameStop !== null &&
+            state.internalModuleCurrentStackFrame !== null
+          ) {
+            const parsedStackFrameStart = state.internalModuleCurrentStackFrame;
+
+            state.internalModuleCurrentStackFrame = null;
+
+            const range = [parsedStackFrameStart, parsedStackFrameStop];
+            const ranges = currentProfilerData.internalModuleSourceToRanges.get(
+              parsedStackFrameStart.fileName,
+            );
+            if (ranges == null) {
+              currentProfilerData.internalModuleSourceToRanges.set(
+                parsedStackFrameStart.fileName,
+                [range],
+              );
+            } else {
+              ranges.push(range);
+            }
+          }
+        }
+      } else if (ph === 'R' || ph === 'n') {
+        // User Timing mark
+        currentProfilerData.otherUserTimingMarks.push({
+          name,
+          timestamp: startTime,
+        });
+      } else if (ph === 'b') {
+        // TODO: Begin user timing measure
+      } else if (ph === 'e') {
+        // TODO: End user timing measure
+      } else if (ph === 'i' || ph === 'I') {
+        // Instant events.
+        // Note that the capital "I" is a deprecated value that exists in Chrome Canary traces.
+      } else {
+        throw new InvalidProfileError(
+          `Unrecognized event ${JSON.stringify(
+            event,
+          )}! This is likely a bug in this profiler tool.`,
+        );
+      }
+      break;
+  }
+}
+
+function assertNoOverlappingComponentMeasure(state: ProcessorState) {
+  if (state.currentReactComponentMeasure !== null) {
+    console.error(
+      'Component measure started while another measure in progress:',
+      state.currentReactComponentMeasure,
+    );
+  }
+}
+
+function assertCurrentComponentMeasureType(
+  state: ProcessorState,
+  type: ReactComponentMeasureType,
+): void {
+  if (state.currentReactComponentMeasure === null) {
+    console.error(
+      `Component measure type "${type}" stopped while no measure was in progress`,
+    );
+  } else if (state.currentReactComponentMeasure.type !== type) {
+    console.error(
+      `Component measure type "${type}" stopped while type ${state.currentReactComponentMeasure.type} in progress`,
+    );
+  }
+}
+
+function processReactComponentMeasure(
+  name: string,
+  startTime: Milliseconds,
+  currentProfilerData: TimelineData,
+  state: ProcessorState,
+): void {
+  if (name.startsWith('--component-render-start-')) {
+    const [componentName] = name.slice(25).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'render',
+      warning: null,
+    };
+  } else if (name === '--component-render-stop') {
+    assertCurrentComponentMeasureType(state, 'render');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-layout-effect-mount-start-')) {
+    const [componentName] = name.slice(38).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'layout-effect-mount',
+      warning: null,
+    };
+  } else if (name === '--component-layout-effect-mount-stop') {
+    assertCurrentComponentMeasureType(state, 'layout-effect-mount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-layout-effect-unmount-start-')) {
+    const [componentName] = name.slice(40).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'layout-effect-unmount',
+      warning: null,
+    };
+  } else if (name === '--component-layout-effect-unmount-stop') {
+    assertCurrentComponentMeasureType(state, 'layout-effect-unmount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-passive-effect-mount-start-')) {
+    const [componentName] = name.slice(39).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'passive-effect-mount',
+      warning: null,
+    };
+  } else if (name === '--component-passive-effect-mount-stop') {
+    assertCurrentComponentMeasureType(state, 'passive-effect-mount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-passive-effect-unmount-start-')) {
+    const [componentName] = name.slice(41).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'passive-effect-unmount',
+      warning: null,
+    };
+  } else if (name === '--component-passive-effect-unmount-stop') {
+    assertCurrentComponentMeasureType(state, 'passive-effect-unmount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  }
+}
+
+function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
+  let parsedData;
+  try {
+    parsedData = importFromChromeTimeline(rawData, 'react-devtools');
+  } catch (error) {
+    // Assume any Speedscope errors are caused by bad profiles
+    const errorToRethrow = new InvalidProfileError(error.message);
+    errorToRethrow.stack = error.stack;
+    throw errorToRethrow;
+  }
+
+  const profile = parsedData.profiles[0]; // TODO: Choose the main CPU thread only
+
+  const speedscopeFlamechart = new SpeedscopeFlamechart({
+    // $FlowFixMe[method-unbinding]
+    getTotalWeight: profile.getTotalWeight.bind(profile),
+    // $FlowFixMe[method-unbinding]
+    forEachCall: profile.forEachCall.bind(profile),
+    // $FlowFixMe[method-unbinding]
+    formatValue: profile.formatValue.bind(profile),
+    getColorBucketForFrame: () => 0,
+  });
+
+  const flamechart: Flamechart = speedscopeFlamechart.getLayers().map(layer =>
+    layer.map(
+      ({
+        start,
+        end,
+        node: {
+          frame: {name, file, line, col},
+        },
+      }) => ({
+        name,
+        timestamp: start / 1000,
+        duration: (end - start) / 1000,
+        scriptUrl: file,
+        locationLine: line,
+        locationColumn: col,
+      }),
+    ),
+  );
+
+  return flamechart;
+}
+
+function parseStackFrame(stackFrame: string): ErrorStackFrame | null {
+  const error = new Error();
+  error.stack = stackFrame;
+
+  const frames = ErrorStackParser.parse(error);
+
+  return frames.length === 1 ? frames[0] : null;
+}
+
+export default async function preprocessData(
+  timeline: TimelineEvent[],
+): Promise<TimelineData> {
+  const flamechart = preprocessFlamechart(timeline);
+
+  const laneToReactMeasureMap: Map<ReactLane, Array<ReactMeasure>> = new Map();
+  for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {
+    laneToReactMeasureMap.set(lane, []);
+  }
+
+  const profilerData: TimelineData = {
+    batchUIDToMeasuresMap: new Map(),
+    componentMeasures: [],
+    duration: 0,
+    flamechart,
+    internalModuleSourceToRanges: new Map(),
+    laneToLabelMap: new Map(),
+    laneToReactMeasureMap,
+    nativeEvents: [],
+    networkMeasures: [],
+    otherUserTimingMarks: [],
+    reactVersion: null,
+    schedulingEvents: [],
+    snapshots: [],
+    snapshotHeight: 0,
+    startTime: 0,
+    suspenseEvents: [],
+    thrownErrors: [],
+  };
+
+  // Sort `timeline`. JSON Array Format trace events need not be ordered. See:
+  // https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview#heading=h.f2f0yd51wi15
+  timeline = timeline.filter(Boolean).sort((a, b) => (a.ts > b.ts ? 1 : -1));
+
+  // Events displayed in flamechart have timestamps relative to the profile
+  // event's startTime. Source: https://github.com/v8/v8/blob/44bd8fd7/src/inspector/js_protocol.json#L1486
+  //
+  // We'll thus expect there to be a 'Profile' event; if there is not one, we
+  // can deduce that there are no flame chart events. As we expect React
+  // scheduling profiling user timing marks to be recorded together with browser
+  // flame chart events, we can futher deduce that the data is invalid and we
+  // don't bother finding React events.
+  const indexOfProfileEvent = timeline.findIndex(
+    event => event.name === 'Profile',
+  );
+  if (indexOfProfileEvent === -1) {
+    return profilerData;
+  }
+
+  // Use Profile event's `startTime` as the start time to align with flame chart.
+  // TODO: Remove assumption that there'll only be 1 'Profile' event. If this
+  // assumption does not hold, the chart may start at the wrong time.
+  profilerData.startTime = timeline[indexOfProfileEvent].args.data.startTime;
+  profilerData.duration =
+    (timeline[timeline.length - 1].ts - profilerData.startTime) / 1000;
+
+  const state: ProcessorState = {
+    asyncProcessingPromises: [],
+    batchUID: 0,
+    currentReactComponentMeasure: null,
+    internalModuleCurrentStackFrame: null,
+    internalModuleStackStringSet: new Set(),
+    measureStack: [],
+    nativeEventStack: [],
+    nextRenderShouldGenerateNewBatchID: true,
+    potentialLongEvents: [],
+    potentialLongNestedUpdate: null,
+    potentialLongNestedUpdates: [],
+    potentialSuspenseEventsOutsideOfTransition: [],
+    requestIdToNetworkMeasureMap: new Map(),
+    uidCounter: 0,
+    unresolvedSuspenseEvents: new Map(),
+  };
+
+  timeline.forEach(event => processTimelineEvent(event, profilerData, state));
+
+  if (profilerVersion === null) {
+    if (
+      profilerData.schedulingEvents.length === 0 &&
+      profilerData.batchUIDToMeasuresMap.size === 0
+    ) {
+      // No profiler version could indicate data was logged using an older build of React,
+      // before an explicitly profiler version was included in the logging data.
+      // But it could also indicate that the website was either not using React, or using a production build.
+      // The easiest way to check for this case is to see if the data contains any scheduled updates or render work.
+      throw new InvalidProfileError(
+        'No React marks were found in the provided profile.' +
+          ' Please provide profiling data from an React application running in development or profiling mode.',
+      );
+    }
+
+    throw new InvalidProfileError(
+      `This version of profiling data is not supported by the current profiler.`,
+    );
+  }
+
+  // Validate that all events and measures are complete
+  const {measureStack} = state;
+  if (measureStack.length > 0) {
+    console.error('Incomplete events or measures', measureStack);
+  }
+
+  // Check for warnings.
+  state.potentialLongEvents.forEach(([nativeEvent, batchUID]) => {
+    // See how long the subsequent batch of React work was.
+    // Ignore any work that was already started.
+    const [startTime, stopTime] = getBatchRange(
+      batchUID,
+      profilerData,
+      nativeEvent.timestamp,
+    );
+    if (stopTime - startTime > NATIVE_EVENT_DURATION_THRESHOLD) {
+      nativeEvent.warning = WARNING_STRINGS.LONG_EVENT_HANDLER;
+    }
+  });
+  state.potentialLongNestedUpdates.forEach(([schedulingEvent, batchUID]) => {
+    // See how long the subsequent batch of React work was.
+    const [startTime, stopTime] = getBatchRange(batchUID, profilerData);
+    if (stopTime - startTime > NESTED_UPDATE_DURATION_THRESHOLD) {
+      // Don't warn about transition updates scheduled during the commit phase.
+      // e.g. useTransition, useDeferredValue
+      // These are allowed to be long-running.
+      if (
+        !schedulingEvent.lanes.some(
+          lane => profilerData.laneToLabelMap.get(lane) === 'Transition',
+        )
+      ) {
+        // FIXME: This warning doesn't account for "nested updates" that are
+        // spawned by useDeferredValue. Disabling temporarily until we figure
+        // out the right way to handle this.
+        // schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
+      }
+    }
+  });
+  state.potentialSuspenseEventsOutsideOfTransition.forEach(
+    ([suspenseEvent, lanes]) => {
+      // HACK This is a bit gross but the numeric lane value might change between render versions.
+      if (
+        !lanes.some(
+          lane => profilerData.laneToLabelMap.get(lane) === 'Transition',
+        )
+      ) {
+        suspenseEvent.warning = WARNING_STRINGS.SUSPEND_DURING_UPDATE;
+      }
+    },
+  );
+
+  // Wait for any async processing to complete before returning.
+  // Since processing is done in a worker, async work must complete before data is serialized and returned.
+  await Promise.all(state.asyncProcessingPromises);
+
+  // Now that all images have been loaded, let's figure out the display size we're going to use for our thumbnails:
+  // both the ones rendered to the canvas and the ones shown on hover.
+  if (profilerData.snapshots.length > 0) {
+    // NOTE We assume a static window size here, which is not necessarily true but should be for most cases.
+    // Regardless, Chrome also sets a single size/ratio and stick with it- so we'll do the same.
+    const snapshot = profilerData.snapshots[0];
+
+    profilerData.snapshotHeight = Math.min(
+      snapshot.height,
+      SNAPSHOT_MAX_HEIGHT,
+    );
+  }
+
+  return profilerData;
+}
diff --git a/packages/react-devtools-timeline/src/import-worker/readInputData.js b/packages/react-devtools-timeline/src/import-worker/readInputData.js
new file mode 100644
index 00000000000..d889dbb5240
--- /dev/null
+++ b/packages/react-devtools-timeline/src/import-worker/readInputData.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 nullthrows from 'nullthrows';
+import InvalidProfileError from './InvalidProfileError';
+
+export const readInputData = (file: File): Promise<string> => {
+  if (!file.name.endsWith('.json')) {
+    throw new InvalidProfileError(
+      'Invalid file type. Only JSON performance profiles are supported',
+    );
+  }
+
+  const fileReader = new FileReader();
+
+  return new Promise((resolve, reject) => {
+    fileReader.onload = () => {
+      const result = nullthrows(fileReader.result);
+      if (typeof result === 'string') {
+        resolve(result);
+      }
+      reject(new InvalidProfileError('Input file was not read as a string'));
+    };
+
+    fileReader.onerror = () => reject(fileReader.error);
+
+    fileReader.readAsText(file);
+  });
+};
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
new file mode 100644
index 00000000000..ee32e4440f0
--- /dev/null
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+import type {TimelineData} from './types';
+
+import * as React from 'react';
+
+import {importFile as importFileWorker} from './import-worker';
+
+// This is intentionally a module-level Map, rather than a React-managed one.
+// Otherwise, refreshing the inspected element cache would also clear this cache.
+// Profiler file contents are static anyway.
+const fileNameToProfilerDataMap: Map<
+  string,
+  Thenable<TimelineData>,
+> = new Map();
+
+function readRecord<T>(record: Thenable<T>): T | Error {
+  if (typeof React.use === 'function') {
+    try {
+      // eslint-disable-next-line react-hooks-published/rules-of-hooks
+      return React.use(record);
+    } catch (x) {
+      if (record.status === 'rejected') {
+        return (record.reason: any);
+      }
+      throw x;
+    }
+  }
+  if (record.status === 'fulfilled') {
+    return record.value;
+  } else if (record.status === 'rejected') {
+    return (record.reason: any);
+  } else {
+    throw record;
+  }
+}
+
+export function importFile(file: File): TimelineData | Error {
+  const fileName = file.name;
+  let record = fileNameToProfilerDataMap.get(fileName);
+
+  if (!record) {
+    const callbacks = new Set<(value: any) => mixed>();
+    const rejectCallbacks = new Set<(reason: mixed) => mixed>();
+    const thenable: Thenable<TimelineData> = {
+      status: 'pending',
+      value: null,
+      reason: null,
+      then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
+        callbacks.add(callback);
+        rejectCallbacks.add(reject);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Importing file "${fileName}"`,
+    };
+
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.clear();
+      rejectCallbacks.clear();
+    };
+    const wakeRejections = () => {
+      // This assumes they won't throw.
+      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.clear();
+      callbacks.clear();
+    };
+
+    record = thenable;
+
+    importFileWorker(file).then(data => {
+      switch (data.status) {
+        case 'SUCCESS':
+          const fulfilledThenable: FulfilledThenable<TimelineData> =
+            (thenable: any);
+          fulfilledThenable.status = 'fulfilled';
+          fulfilledThenable.value = data.processedData;
+          wake();
+          break;
+        case 'INVALID_PROFILE_ERROR':
+        case 'UNEXPECTED_ERROR':
+          const rejectedThenable: RejectedThenable<TimelineData> =
+            (thenable: any);
+          rejectedThenable.status = 'rejected';
+          rejectedThenable.reason = data.error;
+          wakeRejections();
+          break;
+      }
+    });
+
+    fileNameToProfilerDataMap.set(fileName, record);
+  }
+
+  const response = readRecord(record);
+  return response;
+}
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
new file mode 100644
index 00000000000..7ba6f935f2a
--- /dev/null
+++ b/packages/react-devtools-timeline/src/types.js
@@ -0,0 +1,249 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {StackFrame as ErrorStackFrame} from 'error-stack-parser';
+import type {ScrollState} from './view-base/utils/scrollState';
+
+// Source: https://github.com/facebook/flow/issues/4002#issuecomment-323612798
+// eslint-disable-next-line no-unused-vars
+type Return_<R, F: (...args: Array<any>) => R> = R;
+/** Get return type of a function. */
+export type Return<T> = Return_<mixed, T>;
+
+// Project types
+export type {ErrorStackFrame};
+
+export type Milliseconds = number;
+
+export type ReactLane = number;
+
+export type NativeEvent = {
+  +depth: number,
+  +duration: Milliseconds,
+  +timestamp: Milliseconds,
+  +type: string,
+  warning: string | null,
+};
+
+type BaseReactEvent = {
+  +componentName?: string,
+  +timestamp: Milliseconds,
+  warning: string | null,
+};
+
+type BaseReactScheduleEvent = {
+  ...BaseReactEvent,
+  +lanes: ReactLane[],
+};
+export type ReactScheduleRenderEvent = {
+  ...BaseReactScheduleEvent,
+  +type: 'schedule-render',
+};
+export type ReactScheduleStateUpdateEvent = {
+  ...BaseReactScheduleEvent,
+  +componentStack?: string,
+  +type: 'schedule-state-update',
+};
+export type ReactScheduleForceUpdateEvent = {
+  ...BaseReactScheduleEvent,
+  +type: 'schedule-force-update',
+};
+
+export type Phase = 'mount' | 'update';
+
+export type SuspenseEvent = {
+  ...BaseReactEvent,
+  depth: number,
+  duration: number | null,
+  +id: string,
+  +phase: Phase | null,
+  promiseName: string | null,
+  resolution: 'rejected' | 'resolved' | 'unresolved',
+  +type: 'suspense',
+};
+
+export type ThrownError = {
+  +componentName?: string,
+  +message: string,
+  +phase: Phase,
+  +timestamp: Milliseconds,
+  +type: 'thrown-error',
+};
+
+export type SchedulingEvent =
+  | ReactScheduleRenderEvent
+  | ReactScheduleStateUpdateEvent
+  | ReactScheduleForceUpdateEvent;
+export type SchedulingEventType = SchedulingEvent['type'];
+
+export type ReactMeasureType =
+  | 'commit'
+  // render-idle: A measure spanning the time when a render starts, through all
+  // yields and restarts, and ends when commit stops OR render is cancelled.
+  | 'render-idle'
+  | 'render'
+  | 'layout-effects'
+  | 'passive-effects';
+
+export type BatchUID = number;
+
+export type ReactMeasure = {
+  +type: ReactMeasureType,
+  +lanes: ReactLane[],
+  +timestamp: Milliseconds,
+  +duration: Milliseconds,
+  +batchUID: BatchUID,
+  +depth: number,
+};
+
+export type NetworkMeasure = {
+  +depth: number,
+  finishTimestamp: Milliseconds,
+  firstReceivedDataTimestamp: Milliseconds,
+  lastReceivedDataTimestamp: Milliseconds,
+  priority: string,
+  receiveResponseTimestamp: Milliseconds,
+  +requestId: string,
+  requestMethod: string,
+  sendRequestTimestamp: Milliseconds,
+  url: string,
+};
+
+export type ReactComponentMeasureType =
+  | 'render'
+  | 'layout-effect-mount'
+  | 'layout-effect-unmount'
+  | 'passive-effect-mount'
+  | 'passive-effect-unmount';
+
+export type ReactComponentMeasure = {
+  +componentName: string,
+  duration: Milliseconds,
+  +timestamp: Milliseconds,
+  +type: ReactComponentMeasureType,
+  warning: string | null,
+};
+
+/**
+ * A flamechart stack frame belonging to a stack trace.
+ */
+export type FlamechartStackFrame = {
+  name: string,
+  timestamp: Milliseconds,
+  duration: Milliseconds,
+  scriptUrl?: string,
+  locationLine?: number,
+  locationColumn?: number,
+};
+
+export type UserTimingMark = {
+  name: string,
+  timestamp: Milliseconds,
+};
+
+export type Snapshot = {
+  height: number,
+  image: Image | null,
+  +imageSource: string,
+  +timestamp: Milliseconds,
+  width: number,
+};
+
+/**
+ * A "layer" of stack frames in the profiler UI, i.e. all stack frames of the
+ * same depth across all stack traces. Displayed as a flamechart row in the UI.
+ */
+export type FlamechartStackLayer = FlamechartStackFrame[];
+
+export type Flamechart = FlamechartStackLayer[];
+
+export type HorizontalScrollStateChangeCallback = (
+  scrollState: ScrollState,
+) => void;
+export type SearchRegExpStateChangeCallback = (
+  searchRegExp: RegExp | null,
+) => void;
+
+// Imperative view state that corresponds to profiler data.
+// This state lives outside of React's lifecycle
+// and should be erased/reset whenever new profiler data is loaded.
+export type ViewState = {
+  horizontalScrollState: ScrollState,
+  onHorizontalScrollStateChange: (
+    callback: HorizontalScrollStateChangeCallback,
+  ) => void,
+  onSearchRegExpStateChange: (
+    callback: SearchRegExpStateChangeCallback,
+  ) => void,
+  searchRegExp: RegExp | null,
+  updateHorizontalScrollState: (scrollState: ScrollState) => void,
+  updateSearchRegExpState: (searchRegExp: RegExp | null) => void,
+  viewToMutableViewStateMap: Map<string, mixed>,
+};
+
+export type InternalModuleSourceToRanges = Map<
+  string | void,
+  Array<[ErrorStackFrame, ErrorStackFrame]>,
+>;
+
+export type LaneToLabelMap = Map<ReactLane, string>;
+
+export type TimelineData = {
+  batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
+  componentMeasures: ReactComponentMeasure[],
+  duration: number,
+  flamechart: Flamechart,
+  internalModuleSourceToRanges: InternalModuleSourceToRanges,
+  laneToLabelMap: LaneToLabelMap,
+  laneToReactMeasureMap: Map<ReactLane, ReactMeasure[]>,
+  nativeEvents: NativeEvent[],
+  networkMeasures: NetworkMeasure[],
+  otherUserTimingMarks: UserTimingMark[],
+  reactVersion: string | null,
+  schedulingEvents: SchedulingEvent[],
+  snapshots: Snapshot[],
+  snapshotHeight: number,
+  startTime: number,
+  suspenseEvents: SuspenseEvent[],
+  thrownErrors: ThrownError[],
+};
+
+export type TimelineDataExport = {
+  batchUIDToMeasuresKeyValueArray: Array<[BatchUID, ReactMeasure[]]>,
+  componentMeasures: ReactComponentMeasure[],
+  duration: number,
+  flamechart: Flamechart,
+  internalModuleSourceToRanges: Array<
+    [string | void, Array<[ErrorStackFrame, ErrorStackFrame]>],
+  >,
+  laneToLabelKeyValueArray: Array<[ReactLane, string]>,
+  laneToReactMeasureKeyValueArray: Array<[ReactLane, ReactMeasure[]]>,
+  nativeEvents: NativeEvent[],
+  networkMeasures: NetworkMeasure[],
+  otherUserTimingMarks: UserTimingMark[],
+  reactVersion: string | null,
+  schedulingEvents: SchedulingEvent[],
+  snapshots: Snapshot[],
+  snapshotHeight: number,
+  startTime: number,
+  suspenseEvents: SuspenseEvent[],
+  thrownErrors: ThrownError[],
+};
+
+export type ReactEventInfo = {
+  componentMeasure: ReactComponentMeasure | null,
+  flamechartStackFrame: FlamechartStackFrame | null,
+  measure: ReactMeasure | null,
+  nativeEvent: NativeEvent | null,
+  networkMeasure: NetworkMeasure | null,
+  schedulingEvent: SchedulingEvent | null,
+  suspenseEvent: SuspenseEvent | null,
+  snapshot: Snapshot | null,
+  thrownError: ThrownError | null,
+  userTimingMark: UserTimingMark | null,
+};
diff --git a/packages/react-devtools-timeline/src/utils/flow.js b/packages/react-devtools-timeline/src/utils/flow.js
new file mode 100644
index 00000000000..cfdd3688c9d
--- /dev/null
+++ b/packages/react-devtools-timeline/src/utils/flow.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactScheduleStateUpdateEvent, SchedulingEvent} from '../types';
+
+export function isStateUpdateEvent(
+  event: SchedulingEvent,
+  // eslint-disable-next-line
+): event is ReactScheduleStateUpdateEvent {
+  return event.type === 'schedule-state-update';
+}
diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
new file mode 100644
index 00000000000..725197b1383
--- /dev/null
+++ b/packages/react-devtools-timeline/src/utils/formatting.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SchedulingEvent} from '../types';
+
+import prettyMilliseconds from 'pretty-ms';
+
+export function formatTimestamp(ms: number): string {
+  return (
+    ms.toLocaleString(undefined, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    }) + 'ms'
+  );
+}
+
+export function formatDuration(ms: number): string {
+  return prettyMilliseconds(ms, {millisecondsDecimalDigits: 1});
+}
+
+export function trimString(string: string, length: number): string {
+  if (string.length > length) {
+    return `${string.slice(0, length - 1)}…`;
+  }
+  return string;
+}
+
+export function getSchedulingEventLabel(event: SchedulingEvent): string | null {
+  switch (event.type) {
+    case 'schedule-render':
+      return 'render scheduled';
+    case 'schedule-state-update':
+      return 'state update scheduled';
+    case 'schedule-force-update':
+      return 'force update scheduled';
+    default:
+      return null;
+  }
+}
diff --git a/packages/react-devtools-timeline/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js
new file mode 100644
index 00000000000..72bf119a0d1
--- /dev/null
+++ b/packages/react-devtools-timeline/src/utils/getBatchRange.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 type {
+  BatchUID,
+  Milliseconds,
+  ReactMeasure,
+  TimelineData,
+} from '../types';
+
+function unmemoizedGetBatchRange(
+  batchUID: BatchUID,
+  data: TimelineData,
+  minStartTime?: number = 0,
+): [Milliseconds, Milliseconds] {
+  const measures = data.batchUIDToMeasuresMap.get(batchUID);
+  if (measures == null || measures.length === 0) {
+    throw Error(`Could not find measures with batch UID "${batchUID}"`);
+  }
+
+  const lastMeasure = ((measures[measures.length - 1]: any): ReactMeasure);
+  const stopTime = lastMeasure.timestamp + lastMeasure.duration;
+
+  if (stopTime < minStartTime) {
+    return [0, 0];
+  }
+
+  let startTime = minStartTime;
+  for (let index = 0; index < measures.length; index++) {
+    const measure = measures[index];
+    if (measure.timestamp >= minStartTime) {
+      startTime = measure.timestamp;
+      break;
+    }
+  }
+
+  return [startTime, stopTime];
+}
+
+export const getBatchRange: (
+  batchUID: BatchUID,
+  data: TimelineData,
+  minStartTime?: number,
+) => [Milliseconds, Milliseconds] = memoize(unmemoizedGetBatchRange);
diff --git a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
new file mode 100644
index 00000000000..73c6ce246d7
--- /dev/null
+++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useLayoutEffect, useRef} from 'react';
+
+const TOOLTIP_OFFSET_BOTTOM = 10;
+const TOOLTIP_OFFSET_TOP = 5;
+
+export default function useSmartTooltip({
+  canvasRef,
+  mouseX,
+  mouseY,
+}: {
+  canvasRef: {current: HTMLCanvasElement | null},
+  mouseX: number,
+  mouseY: number,
+}): {current: HTMLElement | null} {
+  const ref = useRef<HTMLElement | null>(null);
+
+  // HACK: Browser extension reports window.innerHeight of 0,
+  // so we fallback to using the tooltip target element.
+  let height = window.innerHeight;
+  let width = window.innerWidth;
+  const target = canvasRef.current;
+  if (target !== null) {
+    const rect = target.getBoundingClientRect();
+    height = rect.top + rect.height;
+    width = rect.left + rect.width;
+  }
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element !== null) {
+      // Let's check the vertical position.
+      if (mouseY + TOOLTIP_OFFSET_BOTTOM + element.offsetHeight >= height) {
+        // The tooltip doesn't fit below the mouse cursor (which is our
+        // default strategy). Therefore we try to position it either above the
+        // mouse cursor or finally aligned with the window's top edge.
+        if (mouseY - TOOLTIP_OFFSET_TOP - element.offsetHeight > 0) {
+          // We position the tooltip above the mouse cursor if it fits there.
+          element.style.top = `${
+            mouseY - element.offsetHeight - TOOLTIP_OFFSET_TOP
+          }px`;
+        } else {
+          // Otherwise we align the tooltip with the window's top edge.
+          element.style.top = '0px';
+        }
+      } else {
+        element.style.top = `${mouseY + TOOLTIP_OFFSET_BOTTOM}px`;
+      }
+
+      // Now let's check the horizontal position.
+      if (mouseX + TOOLTIP_OFFSET_BOTTOM + element.offsetWidth >= width) {
+        // The tooltip doesn't fit at the right of the mouse cursor (which is
+        // our default strategy). Therefore we try to position it either at the
+        // left of the mouse cursor or finally aligned with the window's left
+        // edge.
+        if (mouseX - TOOLTIP_OFFSET_TOP - element.offsetWidth > 0) {
+          // We position the tooltip at the left of the mouse cursor if it fits
+          // there.
+          element.style.left = `${
+            mouseX - element.offsetWidth - TOOLTIP_OFFSET_TOP
+          }px`;
+        } else {
+          // Otherwise, align the tooltip with the window's left edge.
+          element.style.left = '0px';
+        }
+      } else {
+        element.style.left = `${mouseX + TOOLTIP_OFFSET_BOTTOM}px`;
+      }
+    }
+  });
+
+  return ref;
+}
diff --git a/packages/react-devtools-timeline/src/view-base/BackgroundColorView.js b/packages/react-devtools-timeline/src/view-base/BackgroundColorView.js
new file mode 100644
index 00000000000..97096346c73
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/BackgroundColorView.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {View} from './View';
+import {COLORS} from '../content-views/constants';
+
+/**
+ * View that fills its visible area with a CSS color.
+ */
+export class BackgroundColorView extends View {
+  draw(context: CanvasRenderingContext2D) {
+    const {visibleArea} = this;
+
+    context.fillStyle = COLORS.BACKGROUND;
+    context.fillRect(
+      visibleArea.origin.x,
+      visibleArea.origin.y,
+      visibleArea.size.width,
+      visibleArea.size.height,
+    );
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
new file mode 100644
index 00000000000..23ad1e5a5d4
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Size, IntrinsicSize, Rect} from './geometry';
+import type {
+  Interaction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+  WheelPlainInteraction,
+  WheelWithShiftInteraction,
+} from './useCanvasInteraction';
+import type {ScrollState} from './utils/scrollState';
+import type {ViewRefs} from './Surface';
+import type {ViewState} from '../types';
+
+import {Surface} from './Surface';
+import {View} from './View';
+import {rectContainsPoint} from './geometry';
+import {
+  clampState,
+  moveStateToRange,
+  areScrollStatesEqual,
+  translateState,
+  zoomState,
+} from './utils/scrollState';
+import {
+  MAX_ZOOM_LEVEL,
+  MIN_ZOOM_LEVEL,
+  MOVE_WHEEL_DELTA_THRESHOLD,
+} from './constants';
+
+export class HorizontalPanAndZoomView extends View {
+  _contentView: View;
+  _intrinsicContentWidth: number;
+  _isPanning: boolean = false;
+  _viewState: ViewState;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    contentView: View,
+    intrinsicContentWidth: number,
+    viewState: ViewState,
+  ) {
+    super(surface, frame);
+
+    this._contentView = contentView;
+    this._intrinsicContentWidth = intrinsicContentWidth;
+    this._viewState = viewState;
+
+    viewState.onHorizontalScrollStateChange(scrollState => {
+      this.zoomToRange(scrollState.offset, scrollState.length);
+    });
+
+    this.addSubview(contentView);
+  }
+
+  /**
+   * Just sets scroll state.
+   * Use `_setStateAndInformCallbacksIfChanged` if this view's callbacks should also be called.
+   *
+   * @returns Whether state was changed
+   * @private
+   */
+  setScrollState(proposedState: ScrollState) {
+    const clampedState = clampState({
+      state: proposedState,
+      minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
+      maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
+      containerLength: this.frame.size.width,
+    });
+    if (
+      !areScrollStatesEqual(clampedState, this._viewState.horizontalScrollState)
+    ) {
+      this.setNeedsDisplay();
+    }
+  }
+
+  /**
+   * Zoom to a specific range of the content specified as a range of the
+   * content view's intrinsic content size.
+   *
+   * Does not inform callbacks of state change since this is a public API.
+   */
+  zoomToRange(rangeStart: number, rangeEnd: number) {
+    const newState = moveStateToRange({
+      state: this._viewState.horizontalScrollState,
+      rangeStart,
+      rangeEnd,
+      contentLength: this._intrinsicContentWidth,
+
+      minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
+      maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
+      containerLength: this.frame.size.width,
+    });
+    this.setScrollState(newState);
+  }
+
+  desiredSize(): Size | IntrinsicSize {
+    return this._contentView.desiredSize();
+  }
+
+  layoutSubviews() {
+    const {offset, length} = this._viewState.horizontalScrollState;
+    const proposedFrame = {
+      origin: {
+        x: this.frame.origin.x + offset,
+        y: this.frame.origin.y,
+      },
+      size: {
+        width: length,
+        height: this.frame.size.height,
+      },
+    };
+    this._contentView.setFrame(proposedFrame);
+    super.layoutSubviews();
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousedown':
+        this._handleMouseDown(interaction, viewRefs);
+        break;
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+      case 'mouseup':
+        this._handleMouseUp(interaction, viewRefs);
+        break;
+      case 'wheel-plain':
+      case 'wheel-shift':
+        this._handleWheel(interaction);
+        break;
+    }
+  }
+
+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
+    if (rectContainsPoint(interaction.payload.location, this.frame)) {
+      this._isPanning = true;
+
+      viewRefs.activeView = this;
+
+      this.currentCursor = 'grabbing';
+    }
+  }
+
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const isHovered = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+    if (isHovered && viewRefs.hoveredView === null) {
+      viewRefs.hoveredView = this;
+    }
+
+    if (viewRefs.activeView === this) {
+      this.currentCursor = 'grabbing';
+    } else if (isHovered) {
+      this.currentCursor = 'grab';
+    }
+
+    if (!this._isPanning) {
+      return;
+    }
+
+    // Don't prevent mouse-move events from bubbling if they are vertical drags.
+    const {movementX, movementY} = interaction.payload.event;
+    if (Math.abs(movementX) < Math.abs(movementY)) {
+      return;
+    }
+
+    const newState = translateState({
+      state: this._viewState.horizontalScrollState,
+      delta: movementX,
+      containerLength: this.frame.size.width,
+    });
+    this._viewState.updateHorizontalScrollState(newState);
+  }
+
+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
+    if (this._isPanning) {
+      this._isPanning = false;
+    }
+
+    if (viewRefs.activeView === this) {
+      viewRefs.activeView = null;
+    }
+  }
+
+  _handleWheel(interaction: WheelPlainInteraction | WheelWithShiftInteraction) {
+    const {
+      location,
+      delta: {deltaX, deltaY},
+    } = interaction.payload;
+
+    if (!rectContainsPoint(location, this.frame)) {
+      return; // Not scrolling on view
+    }
+
+    const absDeltaX = Math.abs(deltaX);
+    const absDeltaY = Math.abs(deltaY);
+
+    // Vertical scrolling zooms in and out (unless the SHIFT modifier is used).
+    // Horizontal scrolling pans.
+    if (absDeltaY > absDeltaX) {
+      if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
+        return;
+      }
+
+      if (interaction.type === 'wheel-shift') {
+        // Shift modifier is for scrolling, not zooming.
+        return;
+      }
+
+      const newState = zoomState({
+        state: this._viewState.horizontalScrollState,
+        multiplier: 1 + 0.005 * -deltaY,
+        fixedPoint: location.x - this._viewState.horizontalScrollState.offset,
+
+        minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
+        maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
+        containerLength: this.frame.size.width,
+      });
+      this._viewState.updateHorizontalScrollState(newState);
+    } else {
+      if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
+        return;
+      }
+
+      const newState = translateState({
+        state: this._viewState.horizontalScrollState,
+        delta: -deltaX,
+        containerLength: this.frame.size.width,
+      });
+      this._viewState.updateHorizontalScrollState(newState);
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js
new file mode 100644
index 00000000000..81c0199cc74
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/Surface.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Interaction} from './useCanvasInteraction';
+import type {Size} from './geometry';
+
+import memoize from 'memoize-one';
+
+import {View} from './View';
+import {zeroPoint} from './geometry';
+import {DPR} from '../content-views/constants';
+
+export type ViewRefs = {
+  activeView: View | null,
+  hoveredView: View | null,
+};
+
+// hidpi canvas: https://web.dev/articles/canvas-hidipi
+function configureRetinaCanvas(
+  canvas: HTMLCanvasElement,
+  height: number,
+  width: number,
+) {
+  canvas.width = width * DPR;
+  canvas.height = height * DPR;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+}
+
+const getCanvasContext = memoize(
+  (
+    canvas: HTMLCanvasElement,
+    height: number,
+    width: number,
+    scaleCanvas: boolean = true,
+  ): CanvasRenderingContext2D => {
+    const context = canvas.getContext('2d', {alpha: false});
+    if (scaleCanvas) {
+      configureRetinaCanvas(canvas, height, width);
+
+      // Scale all drawing operations by the dpr, so you don't have to worry about the difference.
+      context.scale(DPR, DPR);
+    }
+    return context;
+  },
+);
+
+type ResetHoveredEventFn = () => void;
+
+/**
+ * Represents the canvas surface and a view heirarchy. A surface is also the
+ * place where all interactions enter the view heirarchy.
+ */
+export class Surface {
+  rootView: ?View;
+
+  _context: ?CanvasRenderingContext2D;
+  _canvasSize: ?Size;
+
+  _resetHoveredEvent: ResetHoveredEventFn;
+
+  _viewRefs: ViewRefs = {
+    activeView: null,
+    hoveredView: null,
+  };
+
+  constructor(resetHoveredEvent: ResetHoveredEventFn) {
+    this._resetHoveredEvent = resetHoveredEvent;
+  }
+
+  hasActiveView(): boolean {
+    return this._viewRefs.activeView !== null;
+  }
+
+  setCanvas(canvas: HTMLCanvasElement, canvasSize: Size) {
+    this._context = getCanvasContext(
+      canvas,
+      canvasSize.height,
+      canvasSize.width,
+    );
+    this._canvasSize = canvasSize;
+
+    if (this.rootView) {
+      this.rootView.setNeedsDisplay();
+    }
+  }
+
+  displayIfNeeded() {
+    const {rootView, _canvasSize, _context} = this;
+    if (!rootView || !_context || !_canvasSize) {
+      return;
+    }
+    rootView.setFrame({
+      origin: zeroPoint,
+      size: _canvasSize,
+    });
+    rootView.setVisibleArea({
+      origin: zeroPoint,
+      size: _canvasSize,
+    });
+    rootView.displayIfNeeded(_context, this._viewRefs);
+  }
+
+  getCurrentCursor(): string | null {
+    const {activeView, hoveredView} = this._viewRefs;
+    if (activeView !== null) {
+      return activeView.currentCursor;
+    } else if (hoveredView !== null) {
+      return hoveredView.currentCursor;
+    } else {
+      return null;
+    }
+  }
+
+  handleInteraction(interaction: Interaction) {
+    const rootView = this.rootView;
+    if (rootView != null) {
+      const viewRefs = this._viewRefs;
+      switch (interaction.type) {
+        case 'mousemove':
+        case 'wheel-control':
+        case 'wheel-meta':
+        case 'wheel-plain':
+        case 'wheel-shift':
+          // Clean out the hovered view before processing this type of interaction.
+          const hoveredView = viewRefs.hoveredView;
+          viewRefs.hoveredView = null;
+
+          rootView.handleInteractionAndPropagateToSubviews(
+            interaction,
+            viewRefs,
+          );
+
+          // If a previously hovered view is no longer hovered, update the outer state.
+          if (hoveredView !== null && viewRefs.hoveredView === null) {
+            this._resetHoveredEvent();
+          }
+          break;
+        default:
+          rootView.handleInteractionAndPropagateToSubviews(
+            interaction,
+            viewRefs,
+          );
+          break;
+      }
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js b/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
new file mode 100644
index 00000000000..06550e1f837
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Size, IntrinsicSize, Rect} from './geometry';
+import type {
+  Interaction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+  WheelWithShiftInteraction,
+} from './useCanvasInteraction';
+import type {ScrollState} from './utils/scrollState';
+import type {ViewRefs} from './Surface';
+import type {ViewState} from '../types';
+
+import {Surface} from './Surface';
+import {View} from './View';
+import {rectContainsPoint} from './geometry';
+import {
+  clampState,
+  areScrollStatesEqual,
+  translateState,
+} from './utils/scrollState';
+import {MOVE_WHEEL_DELTA_THRESHOLD} from './constants';
+import {COLORS} from '../content-views/constants';
+
+const CARET_MARGIN = 3;
+const CARET_WIDTH = 5;
+const CARET_HEIGHT = 3;
+
+type OnChangeCallback = (
+  scrollState: ScrollState,
+  containerLength: number,
+) => void;
+
+export class VerticalScrollView extends View {
+  _contentView: View;
+  _isPanning: boolean;
+  _mutableViewStateKey: string;
+  _onChangeCallback: OnChangeCallback | null;
+  _scrollState: ScrollState;
+  _viewState: ViewState;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    contentView: View,
+    viewState: ViewState,
+    label: string,
+  ) {
+    super(surface, frame);
+
+    this._contentView = contentView;
+    this._isPanning = false;
+    this._mutableViewStateKey = label + ':VerticalScrollView';
+    this._onChangeCallback = null;
+    this._scrollState = {
+      offset: 0,
+      length: 0,
+    };
+    this._viewState = viewState;
+
+    this.addSubview(contentView);
+
+    this._restoreMutableViewState();
+  }
+
+  setFrame(newFrame: Rect) {
+    super.setFrame(newFrame);
+
+    // Revalidate scrollState
+    this._setScrollState(this._scrollState);
+  }
+
+  desiredSize(): Size | IntrinsicSize {
+    return this._contentView.desiredSize();
+  }
+
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    super.draw(context, viewRefs);
+
+    // Show carets if there's scroll overflow above or below the viewable area.
+    if (this.frame.size.height > CARET_HEIGHT * 2 + CARET_MARGIN * 3) {
+      const offset = this._scrollState.offset;
+      const desiredSize = this._contentView.desiredSize();
+
+      const above = offset;
+      const below = this.frame.size.height - desiredSize.height - offset;
+
+      if (above < 0 || below < 0) {
+        const {visibleArea} = this;
+        const {x, y} = visibleArea.origin;
+        const {width, height} = visibleArea.size;
+        const horizontalCenter = x + width / 2;
+
+        const halfWidth = CARET_WIDTH;
+        const left = horizontalCenter + halfWidth;
+        const right = horizontalCenter - halfWidth;
+
+        if (above < 0) {
+          const topY = y + CARET_MARGIN;
+
+          context.beginPath();
+          context.moveTo(horizontalCenter, topY);
+          context.lineTo(left, topY + CARET_HEIGHT);
+          context.lineTo(right, topY + CARET_HEIGHT);
+          context.closePath();
+          context.fillStyle = COLORS.SCROLL_CARET;
+          context.fill();
+        }
+
+        if (below < 0) {
+          const bottomY = y + height - CARET_MARGIN;
+
+          context.beginPath();
+          context.moveTo(horizontalCenter, bottomY);
+          context.lineTo(left, bottomY - CARET_HEIGHT);
+          context.lineTo(right, bottomY - CARET_HEIGHT);
+          context.closePath();
+          context.fillStyle = COLORS.SCROLL_CARET;
+          context.fill();
+        }
+      }
+    }
+  }
+
+  layoutSubviews() {
+    const {offset} = this._scrollState;
+    const desiredSize = this._contentView.desiredSize();
+
+    const minimumHeight = this.frame.size.height;
+    const desiredHeight = desiredSize ? desiredSize.height : 0;
+    // Force view to take up at least all remaining vertical space.
+    const height = Math.max(desiredHeight, minimumHeight);
+
+    const proposedFrame = {
+      origin: {
+        x: this.frame.origin.x,
+        y: this.frame.origin.y + offset,
+      },
+      size: {
+        width: this.frame.size.width,
+        height,
+      },
+    };
+    this._contentView.setFrame(proposedFrame);
+    super.layoutSubviews();
+  }
+
+  handleInteraction(interaction: Interaction): ?boolean {
+    switch (interaction.type) {
+      case 'mousedown':
+        return this._handleMouseDown(interaction);
+      case 'mousemove':
+        return this._handleMouseMove(interaction);
+      case 'mouseup':
+        return this._handleMouseUp(interaction);
+      case 'wheel-shift':
+        return this._handleWheelShift(interaction);
+    }
+  }
+
+  onChange(callback: OnChangeCallback) {
+    this._onChangeCallback = callback;
+  }
+
+  scrollBy(deltaY: number): boolean {
+    const newState = translateState({
+      state: this._scrollState,
+      delta: -deltaY,
+      containerLength: this.frame.size.height,
+    });
+
+    // If the state is updated by this wheel scroll,
+    // return true to prevent the interaction from bubbling.
+    // For instance, this prevents the outermost container from also scrolling.
+    return this._setScrollState(newState);
+  }
+
+  _handleMouseDown(interaction: MouseDownInteraction) {
+    if (rectContainsPoint(interaction.payload.location, this.frame)) {
+      const frameHeight = this.frame.size.height;
+      const contentHeight = this._contentView.desiredSize().height;
+      // Don't claim drag operations if the content is not tall enough to be scrollable.
+      // This would block any outer scroll views from working.
+      if (frameHeight < contentHeight) {
+        this._isPanning = true;
+      }
+    }
+  }
+
+  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
+    if (!this._isPanning) {
+      return;
+    }
+
+    // Don't prevent mouse-move events from bubbling if they are horizontal drags.
+    const {movementX, movementY} = interaction.payload.event;
+    if (Math.abs(movementX) > Math.abs(movementY)) {
+      return;
+    }
+
+    const newState = translateState({
+      state: this._scrollState,
+      delta: interaction.payload.event.movementY,
+      containerLength: this.frame.size.height,
+    });
+    this._setScrollState(newState);
+
+    return true;
+  }
+
+  _handleMouseUp(interaction: MouseUpInteraction) {
+    if (this._isPanning) {
+      this._isPanning = false;
+    }
+  }
+
+  _handleWheelShift(interaction: WheelWithShiftInteraction): boolean {
+    const {
+      location,
+      delta: {deltaX, deltaY},
+    } = interaction.payload;
+
+    if (!rectContainsPoint(location, this.frame)) {
+      return false; // Not scrolling on view
+    }
+
+    const absDeltaX = Math.abs(deltaX);
+    const absDeltaY = Math.abs(deltaY);
+    if (absDeltaX > absDeltaY) {
+      return false; // Scrolling horizontally
+    }
+
+    if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
+      return false; // Movement was too small and should be ignored.
+    }
+
+    return this.scrollBy(deltaY);
+  }
+
+  _restoreMutableViewState() {
+    if (
+      this._viewState.viewToMutableViewStateMap.has(this._mutableViewStateKey)
+    ) {
+      this._scrollState = ((this._viewState.viewToMutableViewStateMap.get(
+        this._mutableViewStateKey,
+      ): any): ScrollState);
+    } else {
+      this._viewState.viewToMutableViewStateMap.set(
+        this._mutableViewStateKey,
+        this._scrollState,
+      );
+    }
+
+    this.setNeedsDisplay();
+  }
+
+  _setScrollState(proposedState: ScrollState): boolean {
+    const contentHeight = this._contentView.frame.size.height;
+    const containerHeight = this.frame.size.height;
+
+    const clampedState = clampState({
+      state: proposedState,
+      minContentLength: contentHeight,
+      maxContentLength: contentHeight,
+      containerLength: containerHeight,
+    });
+    if (!areScrollStatesEqual(clampedState, this._scrollState)) {
+      this._scrollState.offset = clampedState.offset;
+      this._scrollState.length = clampedState.length;
+
+      this.setNeedsDisplay();
+
+      if (this._onChangeCallback !== null) {
+        this._onChangeCallback(clampedState, this.frame.size.height);
+      }
+
+      return true;
+    }
+
+    // Don't allow wheel events to bubble past this view even if we've scrolled to the edge.
+    // It just feels bad to have the scrolling jump unexpectedly from in a container to the outer page.
+    // The only exception is when the container fits the content (no scrolling).
+    if (contentHeight === containerHeight) {
+      return false;
+    }
+
+    return true;
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
new file mode 100644
index 00000000000..9ded7b64b33
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/View.js
@@ -0,0 +1,345 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Interaction} from './useCanvasInteraction';
+import type {IntrinsicSize, Rect, Size} from './geometry';
+import type {Layouter} from './layouter';
+import type {ViewRefs} from './Surface';
+
+import {Surface} from './Surface';
+import {
+  rectEqualToRect,
+  intersectionOfRects,
+  rectIntersectsRect,
+  sizeIsEmpty,
+  sizeIsValid,
+  unionOfRects,
+  zeroRect,
+} from './geometry';
+import {noopLayout, viewsToLayout, collapseLayoutIntoViews} from './layouter';
+
+/**
+ * Base view class that can be subclassed to draw custom content or manage
+ * subclasses.
+ */
+export class View {
+  _backgroundColor: string | null;
+
+  currentCursor: string | null = null;
+
+  surface: Surface;
+
+  frame: Rect;
+  visibleArea: Rect;
+
+  superview: ?View;
+  subviews: View[] = [];
+
+  /**
+   * An injected function that lays out our subviews.
+   * @private
+   */
+  _layouter: Layouter;
+
+  /**
+   * Whether this view needs to be drawn.
+   *
+   * NOTE: Do not set directly! Use `setNeedsDisplay`.
+   *
+   * @see setNeedsDisplay
+   * @private
+   */
+  _needsDisplay: boolean = true;
+
+  /**
+   * Whether the hierarchy below this view has subviews that need display.
+   *
+   * NOTE: Do not set directly! Use `setSubviewsNeedDisplay`.
+   *
+   * @see setSubviewsNeedDisplay
+   * @private
+   */
+  _subviewsNeedDisplay: boolean = false;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    layouter: Layouter = noopLayout,
+    visibleArea: Rect = frame,
+    backgroundColor?: string | null = null,
+  ) {
+    this._backgroundColor = backgroundColor || null;
+    this.surface = surface;
+    this.frame = frame;
+    this._layouter = layouter;
+    this.visibleArea = visibleArea;
+  }
+
+  /**
+   * Invalidates view's contents.
+   *
+   * Downward propagating; once called, all subviews of this view should also
+   * be invalidated.
+   */
+  setNeedsDisplay() {
+    this._needsDisplay = true;
+    if (this.superview) {
+      this.superview._setSubviewsNeedDisplay();
+    }
+    this.subviews.forEach(subview => subview.setNeedsDisplay());
+  }
+
+  /**
+   * Informs superview that it has subviews that need to be drawn.
+   *
+   * Upward propagating; once called, all superviews of this view should also
+   * have `subviewsNeedDisplay` = true.
+   *
+   * @private
+   */
+  _setSubviewsNeedDisplay() {
+    this._subviewsNeedDisplay = true;
+    if (this.superview) {
+      this.superview._setSubviewsNeedDisplay();
+    }
+  }
+
+  setFrame(newFrame: Rect) {
+    if (!rectEqualToRect(this.frame, newFrame)) {
+      this.frame = newFrame;
+      if (sizeIsValid(newFrame.size)) {
+        this.frame = newFrame;
+      } else {
+        this.frame = zeroRect;
+      }
+      this.setNeedsDisplay();
+    }
+  }
+
+  setVisibleArea(newVisibleArea: Rect) {
+    if (!rectEqualToRect(this.visibleArea, newVisibleArea)) {
+      if (sizeIsValid(newVisibleArea.size)) {
+        this.visibleArea = newVisibleArea;
+      } else {
+        this.visibleArea = zeroRect;
+      }
+      this.setNeedsDisplay();
+    }
+  }
+
+  /**
+   * A size that can be used as a hint by layout functions.
+   *
+   * Implementations should typically return the intrinsic content size or a
+   * size that fits all the view's content.
+   *
+   * The default implementation returns a size that fits all the view's
+   * subviews.
+   *
+   * Can be overridden by subclasses.
+   */
+  desiredSize(): Size | IntrinsicSize {
+    if (this._needsDisplay) {
+      this.layoutSubviews();
+    }
+    const frames = this.subviews.map(subview => subview.frame);
+    return unionOfRects(...frames).size;
+  }
+
+  /**
+   * Appends `view` to the list of this view's `subviews`.
+   */
+  addSubview(view: View) {
+    if (this.subviews.includes(view)) {
+      return;
+    }
+    this.subviews.push(view);
+    view.superview = this;
+  }
+
+  /**
+   * Breaks the subview-superview relationship between `view` and this view, if
+   * `view` is a subview of this view.
+   */
+  removeSubview(view: View) {
+    const subviewIndex = this.subviews.indexOf(view);
+    if (subviewIndex === -1) {
+      return;
+    }
+    view.superview = undefined;
+    this.subviews.splice(subviewIndex, 1);
+  }
+
+  /**
+   * Removes all subviews from this view.
+   */
+  removeAllSubviews() {
+    this.subviews.forEach(subview => (subview.superview = undefined));
+    this.subviews = [];
+  }
+
+  /**
+   * Executes the display flow if this view needs to be drawn.
+   *
+   * 1. Lays out subviews with `layoutSubviews`.
+   * 2. Draws content with `draw`.
+   */
+  displayIfNeeded(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    if (
+      (this._needsDisplay || this._subviewsNeedDisplay) &&
+      rectIntersectsRect(this.frame, this.visibleArea) &&
+      !sizeIsEmpty(this.visibleArea.size)
+    ) {
+      this.layoutSubviews();
+      if (this._needsDisplay) {
+        this._needsDisplay = false;
+      }
+      if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;
+
+      // Clip anything drawn by the view to prevent it from overflowing its visible area.
+      const visibleArea = this.visibleArea;
+      const region = new Path2D();
+      region.rect(
+        visibleArea.origin.x,
+        visibleArea.origin.y,
+        visibleArea.size.width,
+        visibleArea.size.height,
+      );
+      context.save();
+      context.clip(region);
+      context.beginPath();
+
+      this.draw(context, viewRefs);
+
+      // Stop clipping
+      context.restore();
+    }
+  }
+
+  /**
+   * Layout self and subviews.
+   *
+   * Implementations should call `setNeedsDisplay` if a draw is required.
+   *
+   * The default implementation uses `this.layouter` to lay out subviews.
+   *
+   * Can be overwritten by subclasses that wish to manually manage their
+   * subviews' layout.
+   *
+   * NOTE: Do not call directly! Use `displayIfNeeded`.
+   *
+   * @see displayIfNeeded
+   */
+  layoutSubviews() {
+    const {frame, _layouter, subviews, visibleArea} = this;
+    const existingLayout = viewsToLayout(subviews);
+    const newLayout = _layouter(existingLayout, frame);
+    collapseLayoutIntoViews(newLayout);
+
+    subviews.forEach((subview, subviewIndex) => {
+      if (rectIntersectsRect(visibleArea, subview.frame)) {
+        subview.setVisibleArea(intersectionOfRects(visibleArea, subview.frame));
+      } else {
+        subview.setVisibleArea(zeroRect);
+      }
+    });
+  }
+
+  /**
+   * Draw the contents of this view in the given canvas `context`.
+   *
+   * Defaults to drawing this view's `subviews`.
+   *
+   * To be overwritten by subclasses that wish to draw custom content.
+   *
+   * NOTE: Do not call directly! Use `displayIfNeeded`.
+   *
+   * @see displayIfNeeded
+   */
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    const {subviews, visibleArea} = this;
+    subviews.forEach(subview => {
+      if (rectIntersectsRect(visibleArea, subview.visibleArea)) {
+        subview.displayIfNeeded(context, viewRefs);
+      }
+    });
+
+    const backgroundColor = this._backgroundColor;
+    if (backgroundColor !== null) {
+      const desiredSize = this.desiredSize();
+      if (visibleArea.size.height > desiredSize.height) {
+        context.fillStyle = backgroundColor;
+        context.fillRect(
+          visibleArea.origin.x,
+          visibleArea.origin.y + desiredSize.height,
+          visibleArea.size.width,
+          visibleArea.size.height - desiredSize.height,
+        );
+      }
+    }
+  }
+
+  /**
+   * Handle an `interaction`.
+   *
+   * To be overwritten by subclasses that wish to handle interactions.
+   *
+   * NOTE: Do not call directly! Use `handleInteractionAndPropagateToSubviews`
+   */
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs): ?boolean {}
+
+  /**
+   * Handle an `interaction` and propagates it to all of this view's
+   * `subviews`.
+   *
+   * NOTE: Should not be overridden! Subclasses should override
+   * `handleInteraction` instead.
+   *
+   * @see handleInteraction
+   * @protected
+   */
+  handleInteractionAndPropagateToSubviews(
+    interaction: Interaction,
+    viewRefs: ViewRefs,
+  ): boolean {
+    const {subviews, visibleArea} = this;
+
+    if (visibleArea.size.height === 0) {
+      return false;
+    }
+
+    // Pass the interaction to subviews first,
+    // so they have the opportunity to claim it before it bubbles.
+    //
+    // Views are painted first to last,
+    // so they should process interactions last to first,
+    // so views in front (on top) can claim the interaction first.
+    for (let i = subviews.length - 1; i >= 0; i--) {
+      const subview = subviews[i];
+      if (rectIntersectsRect(visibleArea, subview.visibleArea)) {
+        const didSubviewHandle =
+          subview.handleInteractionAndPropagateToSubviews(
+            interaction,
+            viewRefs,
+          ) === true;
+        if (didSubviewHandle) {
+          return true;
+        }
+      }
+    }
+
+    const didSelfHandle =
+      this.handleInteraction(interaction, viewRefs) === true;
+    if (didSelfHandle) {
+      return true;
+    }
+
+    return false;
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js b/packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js
new file mode 100644
index 00000000000..f49d634c8e5
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js
@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  pointEqualToPoint,
+  sizeEqualToSize,
+  rectEqualToRect,
+  sizeIsValid,
+  sizeIsEmpty,
+  rectIntersectsRect,
+  intersectionOfRects,
+  rectContainsPoint,
+  unionOfRects,
+} from '../geometry';
+
+describe('pointEqualToPoint', () => {
+  it('should return true when 2 points have the same values', () => {
+    expect(pointEqualToPoint({x: 1, y: 1}, {x: 1, y: 1})).toBe(true);
+    expect(pointEqualToPoint({x: -1, y: 2}, {x: -1, y: 2})).toBe(true);
+    expect(
+      pointEqualToPoint({x: 3.14159, y: 0.26535}, {x: 3.14159, y: 0.26535}),
+    ).toBe(true);
+  });
+
+  it('should return false when 2 points have different values', () => {
+    expect(pointEqualToPoint({x: 1, y: 1}, {x: 1, y: 0})).toBe(false);
+    expect(pointEqualToPoint({x: -1, y: 2}, {x: 0, y: 1})).toBe(false);
+    expect(
+      pointEqualToPoint({x: 3.1416, y: 0.26534}, {x: 3.14159, y: 0.26535}),
+    ).toBe(false);
+  });
+});
+
+describe('sizeEqualToSize', () => {
+  it('should return true when 2 sizes have the same values', () => {
+    expect(sizeEqualToSize({width: 1, height: 1}, {width: 1, height: 1})).toBe(
+      true,
+    );
+    expect(
+      sizeEqualToSize({width: -1, height: 2}, {width: -1, height: 2}),
+    ).toBe(true);
+    expect(
+      sizeEqualToSize(
+        {width: 3.14159, height: 0.26535},
+        {width: 3.14159, height: 0.26535},
+      ),
+    ).toBe(true);
+  });
+
+  it('should return false when 2 sizes have different values', () => {
+    expect(sizeEqualToSize({width: 1, height: 1}, {width: 1, height: 0})).toBe(
+      false,
+    );
+    expect(sizeEqualToSize({width: -1, height: 2}, {width: 0, height: 1})).toBe(
+      false,
+    );
+    expect(
+      sizeEqualToSize(
+        {width: 3.1416, height: 0.26534},
+        {width: 3.14159, height: 0.26535},
+      ),
+    ).toBe(false);
+  });
+});
+
+describe('rectEqualToRect', () => {
+  it('should return true when 2 rects have the same values', () => {
+    expect(
+      rectEqualToRect(
+        {origin: {x: 1, y: 1}, size: {width: 1, height: 1}},
+        {origin: {x: 1, y: 1}, size: {width: 1, height: 1}},
+      ),
+    ).toBe(true);
+    expect(
+      rectEqualToRect(
+        {origin: {x: 1, y: 2}, size: {width: 3.14, height: 4}},
+        {origin: {x: 1, y: 2}, size: {width: 3.14, height: 4}},
+      ),
+    ).toBe(true);
+  });
+
+  it('should return false when 2 rects have different values', () => {
+    expect(
+      rectEqualToRect(
+        {origin: {x: 1, y: 1}, size: {width: 1, height: 1}},
+        {origin: {x: 0, y: 1}, size: {width: 1, height: 1}},
+      ),
+    ).toBe(false);
+    expect(
+      rectEqualToRect(
+        {origin: {x: 1, y: 2}, size: {width: 3.14, height: 4}},
+        {origin: {x: 1, y: 2}, size: {width: 3.15, height: 4}},
+      ),
+    ).toBe(false);
+  });
+});
+
+describe('sizeIsValid', () => {
+  it('should return true when the size has non-negative width and height', () => {
+    expect(sizeIsValid({width: 1, height: 1})).toBe(true);
+    expect(sizeIsValid({width: 0, height: 0})).toBe(true);
+  });
+
+  it('should return false when the size has negative width or height', () => {
+    expect(sizeIsValid({width: 0, height: -1})).toBe(false);
+    expect(sizeIsValid({width: -1, height: 0})).toBe(false);
+    expect(sizeIsValid({width: -1, height: -1})).toBe(false);
+  });
+});
+
+describe('sizeIsEmpty', () => {
+  it('should return true when the size has negative area', () => {
+    expect(sizeIsEmpty({width: 1, height: -1})).toBe(true);
+    expect(sizeIsEmpty({width: -1, height: -1})).toBe(true);
+  });
+
+  it('should return true when the size has zero area', () => {
+    expect(sizeIsEmpty({width: 0, height: 0})).toBe(true);
+    expect(sizeIsEmpty({width: 0, height: 1})).toBe(true);
+    expect(sizeIsEmpty({width: 1, height: 0})).toBe(true);
+  });
+
+  it('should return false when the size has positive area', () => {
+    expect(sizeIsEmpty({width: 1, height: 1})).toBe(false);
+    expect(sizeIsEmpty({width: 2, height: 1})).toBe(false);
+  });
+});
+
+describe('rectIntersectsRect', () => {
+  it('should return true when 2 rects intersect', () => {
+    // Rects touch
+    expect(
+      rectIntersectsRect(
+        {origin: {x: 0, y: 0}, size: {width: 1, height: 1}},
+        {origin: {x: 1, y: 1}, size: {width: 1, height: 1}},
+      ),
+    ).toEqual(true);
+
+    // Rects overlap
+    expect(
+      rectIntersectsRect(
+        {origin: {x: 0, y: 0}, size: {width: 2, height: 1}},
+        {origin: {x: 1, y: -2}, size: {width: 0.5, height: 5}},
+      ),
+    ).toEqual(true);
+
+    // Rects are equal
+    expect(
+      rectIntersectsRect(
+        {origin: {x: 1, y: 2}, size: {width: 3.14, height: 4}},
+        {origin: {x: 1, y: 2}, size: {width: 3.14, height: 4}},
+      ),
+    ).toEqual(true);
+  });
+
+  it('should return false when 2 rects do not intersect', () => {
+    expect(
+      rectIntersectsRect(
+        {origin: {x: 0, y: 1}, size: {width: 1, height: 1}},
+        {origin: {x: 0, y: 10}, size: {width: 1, height: 1}},
+      ),
+    ).toBe(false);
+    expect(
+      rectIntersectsRect(
+        {origin: {x: 1, y: 2}, size: {width: 3.14, height: 4}},
+        {origin: {x: -4, y: 2}, size: {width: 3.15, height: 4}},
+      ),
+    ).toBe(false);
+  });
+});
+
+describe('intersectionOfRects', () => {
+  // NOTE: Undefined behavior if rects do not intersect
+
+  it('should return intersection when 2 rects intersect', () => {
+    // Rects touch
+    expect(
+      intersectionOfRects(
+        {origin: {x: 0, y: 0}, size: {width: 1, height: 1}},
+        {origin: {x: 1, y: 1}, size: {width: 1, height: 1}},
+      ),
+    ).toEqual({origin: {x: 1, y: 1}, size: {width: 0, height: 0}});
+
+    // Rects overlap
+    expect(
+      intersectionOfRects(
+        {origin: {x: 0, y: 0}, size: {width: 2, height: 1}},
+        {origin: {x: 1, y: -2}, size: {width: 0.5, height: 5}},
+      ),
+    ).toEqual({origin: {x: 1, y: 0}, size: {width: 0.5, height: 1}});
+
+    // Rects are equal
+    expect(
+      intersectionOfRects(
+        {origin: {x: 1, y: 2}, size: {width: 9.24, height: 4}},
+        {origin: {x: 1, y: 2}, size: {width: 9.24, height: 4}},
+      ),
+    ).toEqual({origin: {x: 1, y: 2}, size: {width: 9.24, height: 4}});
+  });
+});
+
+describe('rectContainsPoint', () => {
+  it("should return true if point is on the rect's edge", () => {
+    expect(
+      rectContainsPoint(
+        {x: 0, y: 0},
+        {origin: {x: 0, y: 0}, size: {width: 1, height: 1}},
+      ),
+    ).toBe(true);
+    expect(
+      rectContainsPoint(
+        {x: 5, y: 0},
+        {origin: {x: 0, y: 0}, size: {width: 10, height: 1}},
+      ),
+    ).toBe(true);
+    expect(
+      rectContainsPoint(
+        {x: 1, y: 1},
+        {origin: {x: 0, y: 0}, size: {width: 1, height: 1}},
+      ),
+    ).toBe(true);
+  });
+
+  it('should return true if point is in rect', () => {
+    expect(
+      rectContainsPoint(
+        {x: 5, y: 50},
+        {origin: {x: 0, y: 0}, size: {width: 10, height: 100}},
+      ),
+    ).toBe(true);
+  });
+
+  it('should return false if point is not in rect', () => {
+    expect(
+      rectContainsPoint(
+        {x: -1, y: 0},
+        {origin: {x: 0, y: 0}, size: {width: 1, height: 1}},
+      ),
+    ).toBe(false);
+  });
+});
+
+describe('unionOfRects', () => {
+  it('should return zero rect if no rects are provided', () => {
+    expect(unionOfRects()).toEqual({
+      origin: {x: 0, y: 0},
+      size: {width: 0, height: 0},
+    });
+  });
+
+  it('should return rect if 1 rect is provided', () => {
+    expect(
+      unionOfRects({origin: {x: 1, y: 2}, size: {width: 3, height: 4}}),
+    ).toEqual({origin: {x: 1, y: 2}, size: {width: 3, height: 4}});
+  });
+
+  it('should return union of rects if more than one rect is provided', () => {
+    expect(
+      unionOfRects(
+        {origin: {x: 1, y: 2}, size: {width: 3, height: 4}},
+        {origin: {x: 100, y: 200}, size: {width: 3, height: 4}},
+        {origin: {x: -10, y: -20}, size: {width: 50, height: 60}},
+      ),
+    ).toEqual({origin: {x: -10, y: -20}, size: {width: 113, height: 224}});
+  });
+});
diff --git a/packages/react-devtools-timeline/src/view-base/constants.js b/packages/react-devtools-timeline/src/view-base/constants.js
new file mode 100644
index 00000000000..845d1fcb96f
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/constants.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 MOVE_WHEEL_DELTA_THRESHOLD = 1;
+export const ZOOM_WHEEL_DELTA_THRESHOLD = 1;
+export const MIN_ZOOM_LEVEL = 0.25;
+export const MAX_ZOOM_LEVEL = 1000;
+export const DEFAULT_ZOOM_LEVEL = 0.25;
diff --git a/packages/react-devtools-timeline/src/view-base/geometry.js b/packages/react-devtools-timeline/src/view-base/geometry.js
new file mode 100644
index 00000000000..e298d7f2f66
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/geometry.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Point = $ReadOnly<{x: number, y: number}>;
+export type Size = $ReadOnly<{width: number, height: number}>;
+export type IntrinsicSize = {
+  ...Size,
+
+  // If content is this height or less, hide the scrollbar entirely,
+  // so that it doesn't take up vertical space unnecessarily (e.g. for a single row of content).
+  hideScrollBarIfLessThanHeight?: number,
+
+  // The initial height should be the height of the content, or this, whichever is less.
+  maxInitialHeight?: number,
+};
+export type Rect = $ReadOnly<{origin: Point, size: Size}>;
+
+/**
+ * Alternative representation of `Rect`.
+ * A tuple of (`top`, `right`, `bottom`, `left`) coordinates.
+ */
+type Box = [number, number, number, number];
+
+export const zeroPoint: Point = Object.freeze({x: 0, y: 0});
+export const zeroSize: Size = Object.freeze({width: 0, height: 0});
+export const zeroRect: Rect = Object.freeze({
+  origin: zeroPoint,
+  size: zeroSize,
+});
+
+export function pointEqualToPoint(point1: Point, point2: Point): boolean {
+  return point1.x === point2.x && point1.y === point2.y;
+}
+
+export function sizeEqualToSize(size1: Size, size2: Size): boolean {
+  return size1.width === size2.width && size1.height === size2.height;
+}
+
+export function rectEqualToRect(rect1: Rect, rect2: Rect): boolean {
+  return (
+    pointEqualToPoint(rect1.origin, rect2.origin) &&
+    sizeEqualToSize(rect1.size, rect2.size)
+  );
+}
+
+export function sizeIsValid({width, height}: Size): boolean {
+  return width >= 0 && height >= 0;
+}
+
+export function sizeIsEmpty({width, height}: Size): boolean {
+  return width <= 0 || height <= 0;
+}
+
+function rectToBox(rect: Rect): Box {
+  const top = rect.origin.y;
+  const right = rect.origin.x + rect.size.width;
+  const bottom = rect.origin.y + rect.size.height;
+  const left = rect.origin.x;
+  return [top, right, bottom, left];
+}
+
+function boxToRect(box: Box): Rect {
+  const [top, right, bottom, left] = box;
+  return {
+    origin: {
+      x: left,
+      y: top,
+    },
+    size: {
+      width: right - left,
+      height: bottom - top,
+    },
+  };
+}
+
+export function rectIntersectsRect(rect1: Rect, rect2: Rect): boolean {
+  if (
+    rect1.size.width === 0 ||
+    rect1.size.height === 0 ||
+    rect2.size.width === 0 ||
+    rect2.size.height === 0
+  ) {
+    return false;
+  }
+
+  const [top1, right1, bottom1, left1] = rectToBox(rect1);
+  const [top2, right2, bottom2, left2] = rectToBox(rect2);
+  return !(
+    right1 < left2 ||
+    right2 < left1 ||
+    bottom1 < top2 ||
+    bottom2 < top1
+  );
+}
+
+/**
+ * Returns the intersection of the 2 rectangles.
+ *
+ * Prerequisite: `rect1` must intersect with `rect2`.
+ */
+export function intersectionOfRects(rect1: Rect, rect2: Rect): Rect {
+  const [top1, right1, bottom1, left1] = rectToBox(rect1);
+  const [top2, right2, bottom2, left2] = rectToBox(rect2);
+  return boxToRect([
+    Math.max(top1, top2),
+    Math.min(right1, right2),
+    Math.min(bottom1, bottom2),
+    Math.max(left1, left2),
+  ]);
+}
+
+export function rectContainsPoint({x, y}: Point, rect: Rect): boolean {
+  const [top, right, bottom, left] = rectToBox(rect);
+  return left <= x && x <= right && top <= y && y <= bottom;
+}
+
+/**
+ * Returns the smallest rectangle that contains all provided rects.
+ *
+ * @returns Union of `rects`. If `rects` is empty, returns `zeroRect`.
+ */
+export function unionOfRects(...rects: Rect[]): Rect {
+  if (rects.length === 0) {
+    return zeroRect;
+  }
+
+  const [firstRect, ...remainingRects] = rects;
+  const boxUnion = remainingRects
+    .map(rectToBox)
+    .reduce((intermediateUnion, nextBox): Box => {
+      const [unionTop, unionRight, unionBottom, unionLeft] = intermediateUnion;
+      const [nextTop, nextRight, nextBottom, nextLeft] = nextBox;
+      return [
+        Math.min(unionTop, nextTop),
+        Math.max(unionRight, nextRight),
+        Math.max(unionBottom, nextBottom),
+        Math.min(unionLeft, nextLeft),
+      ];
+    }, rectToBox(firstRect));
+  return boxToRect(boxUnion);
+}
diff --git a/packages/react-devtools-timeline/src/view-base/index.js b/packages/react-devtools-timeline/src/view-base/index.js
new file mode 100644
index 00000000000..8990131793f
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/index.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './BackgroundColorView';
+export * from './HorizontalPanAndZoomView';
+export * from './Surface';
+export * from './VerticalScrollView';
+export * from './View';
+export * from './geometry';
+export * from './layouter';
+export * from './resizable';
+export * from './useCanvasInteraction';
+export * from './vertical-scroll-overflow';
diff --git a/packages/react-devtools-timeline/src/view-base/layouter.js b/packages/react-devtools-timeline/src/view-base/layouter.js
new file mode 100644
index 00000000000..0a235a6cae3
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/layouter.js
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Rect} from './geometry';
+import type {View} from './View';
+
+export type LayoutInfo = {view: View, frame: Rect};
+export type Layout = LayoutInfo[];
+
+/**
+ * A function that takes a list of subviews, currently laid out in
+ * `existingLayout`, and lays them out into `containingFrame`.
+ */
+export type Layouter = (
+  existingLayout: Layout,
+  containingFrame: Rect,
+) => Layout;
+
+function viewToLayoutInfo(view: View): LayoutInfo {
+  return {view, frame: view.frame};
+}
+
+export function viewsToLayout(views: View[]): Layout {
+  return views.map(viewToLayoutInfo);
+}
+
+/**
+ * Applies `layout`'s `frame`s to its corresponding `view`.
+ */
+export function collapseLayoutIntoViews(layout: Layout) {
+  layout.forEach(({view, frame}) => view.setFrame(frame));
+}
+
+/**
+ * A no-operation layout; does not modify the layout.
+ */
+export const noopLayout: Layouter = layout => layout;
+
+/**
+ * Layer views on top of each other. All views' frames will be set to `containerFrame`.
+ *
+ * Equivalent to composing:
+ * - `alignToContainerXLayout`,
+ * - `alignToContainerYLayout`,
+ * - `containerWidthLayout`, and
+ * - `containerHeightLayout`.
+ */
+export const layeredLayout: Layouter = (layout, containerFrame) => {
+  return layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame}));
+};
+
+/**
+ * Stacks `views` vertically in `frame`.
+ * All views in `views` will have their widths set to the frame's width.
+ */
+export const verticallyStackedLayout: Layouter = (layout, containerFrame) => {
+  let currentY = containerFrame.origin.y;
+  return layout.map(layoutInfo => {
+    const desiredSize = layoutInfo.view.desiredSize();
+    const height = desiredSize
+      ? desiredSize.height
+      : containerFrame.origin.y + containerFrame.size.height - currentY;
+    const proposedFrame = {
+      origin: {x: containerFrame.origin.x, y: currentY},
+      size: {width: containerFrame.size.width, height},
+    };
+    currentY += height;
+    return {
+      ...layoutInfo,
+      frame: proposedFrame,
+    };
+  });
+};
+
+/**
+ * A layouter that aligns all frames' lefts to the container frame's left.
+ */
+export const alignToContainerXLayout: Layouter = (layout, containerFrame) => {
+  return layout.map(layoutInfo => ({
+    ...layoutInfo,
+    frame: {
+      origin: {
+        x: containerFrame.origin.x,
+        y: layoutInfo.frame.origin.y,
+      },
+      size: layoutInfo.frame.size,
+    },
+  }));
+};
+
+/**
+ * A layouter that aligns all frames' tops to the container frame's top.
+ */
+export const alignToContainerYLayout: Layouter = (layout, containerFrame) => {
+  return layout.map(layoutInfo => ({
+    ...layoutInfo,
+    frame: {
+      origin: {
+        x: layoutInfo.frame.origin.x,
+        y: containerFrame.origin.y,
+      },
+      size: layoutInfo.frame.size,
+    },
+  }));
+};
+
+/**
+ * A layouter that sets all frames' widths to `containerFrame.size.width`.
+ */
+export const containerWidthLayout: Layouter = (layout, containerFrame) => {
+  return layout.map(layoutInfo => ({
+    ...layoutInfo,
+    frame: {
+      origin: layoutInfo.frame.origin,
+      size: {
+        width: containerFrame.size.width,
+        height: layoutInfo.frame.size.height,
+      },
+    },
+  }));
+};
+
+/**
+ * A layouter that sets all frames' heights to `containerFrame.size.height`.
+ */
+export const containerHeightLayout: Layouter = (layout, containerFrame) => {
+  return layout.map(layoutInfo => ({
+    ...layoutInfo,
+    frame: {
+      origin: layoutInfo.frame.origin,
+      size: {
+        width: layoutInfo.frame.size.width,
+        height: containerFrame.size.height,
+      },
+    },
+  }));
+};
+
+/**
+ * A layouter that sets all frames' heights to the desired height of its view.
+ * If the view has no desired size, the frame's height is set to 0.
+ */
+export const desiredHeightLayout: Layouter = layout => {
+  return layout.map(layoutInfo => {
+    const desiredSize = layoutInfo.view.desiredSize();
+    const height = desiredSize ? desiredSize.height : 0;
+    return {
+      ...layoutInfo,
+      frame: {
+        origin: layoutInfo.frame.origin,
+        size: {
+          width: layoutInfo.frame.size.width,
+          height,
+        },
+      },
+    };
+  });
+};
+
+/**
+ * A layouter that sets all frames' heights to the height of the tallest frame.
+ */
+export const uniformMaxSubviewHeightLayout: Layouter = layout => {
+  const maxHeight = Math.max(
+    ...layout.map(layoutInfo => layoutInfo.frame.size.height),
+  );
+  return layout.map(layoutInfo => ({
+    ...layoutInfo,
+    frame: {
+      origin: layoutInfo.frame.origin,
+      size: {
+        width: layoutInfo.frame.size.width,
+        height: maxHeight,
+      },
+    },
+  }));
+};
+
+/**
+ * A layouter that sets heights in this fashion:
+ * - If a frame's height >= `containerFrame.size.height`, the frame is left unchanged.
+ * - Otherwise, sets the frame's height to `containerFrame.size.height`.
+ */
+export const atLeastContainerHeightLayout: Layouter = (
+  layout,
+  containerFrame,
+) => {
+  return layout.map(layoutInfo => ({
+    ...layoutInfo,
+    frame: {
+      origin: layoutInfo.frame.origin,
+      size: {
+        width: layoutInfo.frame.size.width,
+        height: Math.max(
+          containerFrame.size.height,
+          layoutInfo.frame.size.height,
+        ),
+      },
+    },
+  }));
+};
+
+/**
+ * Create a layouter that applies each layouter in `layouters` in sequence.
+ */
+export function createComposedLayout(...layouters: Layouter[]): Layouter {
+  if (layouters.length === 0) {
+    return noopLayout;
+  }
+
+  const composedLayout: Layouter = (layout, containerFrame) => {
+    return layouters.reduce(
+      (intermediateLayout, layouter) =>
+        layouter(intermediateLayout, containerFrame),
+      layout,
+    );
+  };
+  return composedLayout;
+}
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
new file mode 100644
index 00000000000..c66d9af3b50
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
@@ -0,0 +1,299 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ClickInteraction,
+  DoubleClickInteraction,
+  Interaction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+} from '../useCanvasInteraction';
+import type {Rect} from '../geometry';
+import type {ViewRefs} from '../Surface';
+import type {ViewState} from '../../types';
+
+import {ResizeBarView} from './ResizeBarView';
+import {Surface} from '../Surface';
+import {View} from '../View';
+import {rectContainsPoint} from '../geometry';
+import {noopLayout} from '../layouter';
+import {clamp} from '../utils/clamp';
+
+type ResizingState = $ReadOnly<{
+  /** Distance between top of resize bar and mouseY */
+  cursorOffsetInBarFrame: number,
+  /** Mouse's vertical coordinates relative to canvas */
+  mouseY: number,
+}>;
+
+type LayoutState = {
+  /** Resize bar's vertical position relative to resize view's frame.origin.y */
+  barOffsetY: number,
+};
+
+const RESIZE_BAR_HEIGHT = 8;
+const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;
+
+const HIDDEN_RECT = {
+  origin: {x: 0, y: 0},
+  size: {width: 0, height: 0},
+};
+
+export class ResizableView extends View {
+  _canvasRef: {current: HTMLCanvasElement | null};
+  _layoutState: LayoutState;
+  _mutableViewStateKey: string;
+  _resizeBar: ResizeBarView;
+  _resizingState: ResizingState | null = null;
+  _subview: View;
+  _viewState: ViewState;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    subview: View,
+    viewState: ViewState,
+    canvasRef: {current: HTMLCanvasElement | null},
+    label: string,
+  ) {
+    super(surface, frame, noopLayout);
+
+    this._canvasRef = canvasRef;
+    this._layoutState = {barOffsetY: 0};
+    this._mutableViewStateKey = label + ':ResizableView';
+    this._subview = subview;
+    this._resizeBar = new ResizeBarView(surface, frame, label);
+    this._viewState = viewState;
+
+    this.addSubview(this._subview);
+    this.addSubview(this._resizeBar);
+
+    this._restoreMutableViewState();
+  }
+
+  desiredSize(): {+height: number, +width: number} {
+    const subviewDesiredSize = this._subview.desiredSize();
+
+    if (this._shouldRenderResizeBar()) {
+      const resizeBarDesiredSize = this._resizeBar.desiredSize();
+
+      return {
+        width: this.frame.size.width,
+        height: this._layoutState.barOffsetY + resizeBarDesiredSize.height,
+      };
+    } else {
+      return {
+        width: this.frame.size.width,
+        height: subviewDesiredSize.height,
+      };
+    }
+  }
+
+  layoutSubviews() {
+    this._updateLayoutState();
+    this._updateSubviewFrames();
+
+    super.layoutSubviews();
+  }
+
+  _restoreMutableViewState() {
+    if (
+      this._viewState.viewToMutableViewStateMap.has(this._mutableViewStateKey)
+    ) {
+      this._layoutState = ((this._viewState.viewToMutableViewStateMap.get(
+        this._mutableViewStateKey,
+      ): any): LayoutState);
+
+      this._updateLayoutStateAndResizeBar(this._layoutState.barOffsetY);
+    } else {
+      this._viewState.viewToMutableViewStateMap.set(
+        this._mutableViewStateKey,
+        this._layoutState,
+      );
+
+      const subviewDesiredSize = this._subview.desiredSize();
+      this._updateLayoutStateAndResizeBar(
+        subviewDesiredSize.maxInitialHeight != null
+          ? Math.min(
+              subviewDesiredSize.maxInitialHeight,
+              subviewDesiredSize.height,
+            )
+          : subviewDesiredSize.height,
+      );
+    }
+
+    this.setNeedsDisplay();
+  }
+
+  _shouldRenderResizeBar(): boolean {
+    const subviewDesiredSize = this._subview.desiredSize();
+    return subviewDesiredSize.hideScrollBarIfLessThanHeight != null
+      ? subviewDesiredSize.height >
+          subviewDesiredSize.hideScrollBarIfLessThanHeight
+      : true;
+  }
+
+  _updateLayoutStateAndResizeBar(barOffsetY: number) {
+    if (barOffsetY <= RESIZE_BAR_WITH_LABEL_HEIGHT - RESIZE_BAR_HEIGHT) {
+      barOffsetY = 0;
+    }
+
+    this._layoutState.barOffsetY = barOffsetY;
+
+    this._resizeBar.showLabel = barOffsetY === 0;
+  }
+
+  _updateLayoutState() {
+    const {frame, _resizingState} = this;
+
+    // Allow bar to travel to bottom of the visible area of this view but no further
+    const subviewDesiredSize = this._subview.desiredSize();
+    const maxBarOffset = subviewDesiredSize.height;
+
+    let proposedBarOffsetY = this._layoutState.barOffsetY;
+    // Update bar offset if dragging bar
+    if (_resizingState) {
+      const {mouseY, cursorOffsetInBarFrame} = _resizingState;
+      proposedBarOffsetY = mouseY - frame.origin.y - cursorOffsetInBarFrame;
+    }
+
+    this._updateLayoutStateAndResizeBar(
+      clamp(0, maxBarOffset, proposedBarOffsetY),
+    );
+  }
+
+  _updateSubviewFrames() {
+    const {
+      frame: {
+        origin: {x, y},
+        size: {width},
+      },
+      _layoutState: {barOffsetY},
+    } = this;
+
+    const resizeBarDesiredSize = this._resizeBar.desiredSize();
+
+    if (barOffsetY === 0) {
+      this._subview.setFrame(HIDDEN_RECT);
+    } else {
+      this._subview.setFrame({
+        origin: {x, y},
+        size: {width, height: barOffsetY},
+      });
+    }
+
+    this._resizeBar.setFrame({
+      origin: {x, y: y + barOffsetY},
+      size: {width, height: resizeBarDesiredSize.height},
+    });
+  }
+
+  _handleClick(interaction: ClickInteraction): void | boolean {
+    if (!this._shouldRenderResizeBar()) {
+      return;
+    }
+
+    const cursorInView = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+    if (cursorInView) {
+      if (this._layoutState.barOffsetY === 0) {
+        // Clicking on the collapsed label should expand.
+        const subviewDesiredSize = this._subview.desiredSize();
+        this._updateLayoutStateAndResizeBar(subviewDesiredSize.height);
+        this.setNeedsDisplay();
+
+        return true;
+      }
+    }
+  }
+
+  _handleDoubleClick(interaction: DoubleClickInteraction): void | boolean {
+    if (!this._shouldRenderResizeBar()) {
+      return;
+    }
+
+    const cursorInView = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+    if (cursorInView) {
+      if (this._layoutState.barOffsetY > 0) {
+        // Double clicking on the expanded view should collapse.
+        this._updateLayoutStateAndResizeBar(0);
+        this.setNeedsDisplay();
+
+        return true;
+      }
+    }
+  }
+
+  _handleMouseDown(interaction: MouseDownInteraction): void | boolean {
+    const cursorLocation = interaction.payload.location;
+    const resizeBarFrame = this._resizeBar.frame;
+    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
+      const mouseY = cursorLocation.y;
+      this._resizingState = {
+        cursorOffsetInBarFrame: mouseY - resizeBarFrame.origin.y,
+        mouseY,
+      };
+
+      return true;
+    }
+  }
+
+  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
+    const {_resizingState} = this;
+    if (_resizingState) {
+      this._resizingState = {
+        ..._resizingState,
+        mouseY: interaction.payload.location.y,
+      };
+      this.setNeedsDisplay();
+
+      return true;
+    }
+  }
+
+  _handleMouseUp(interaction: MouseUpInteraction) {
+    if (this._resizingState) {
+      this._resizingState = null;
+    }
+  }
+
+  getCursorActiveSubView(interaction: Interaction): View | null {
+    const cursorLocation = interaction.payload.location;
+    const resizeBarFrame = this._resizeBar.frame;
+    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
+      return this;
+    } else {
+      return null;
+    }
+  }
+
+  handleInteraction(
+    interaction: Interaction,
+    viewRefs: ViewRefs,
+  ): void | boolean {
+    switch (interaction.type) {
+      case 'click':
+        return this._handleClick(interaction);
+      case 'double-click':
+        return this._handleDoubleClick(interaction);
+      case 'mousedown':
+        return this._handleMouseDown(interaction);
+      case 'mousemove':
+        return this._handleMouseMove(interaction);
+      case 'mouseup':
+        return this._handleMouseUp(interaction);
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
new file mode 100644
index 00000000000..21e49734037
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Interaction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+} from '../useCanvasInteraction';
+import type {Rect, Size} from '../geometry';
+import type {ViewRefs} from '../Surface';
+
+import {BORDER_SIZE, COLORS} from '../../content-views/constants';
+import {drawText} from '../../content-views/utils/text';
+import {Surface} from '../Surface';
+import {View} from '../View';
+import {rectContainsPoint} from '../geometry';
+import {noopLayout} from '../layouter';
+
+type ResizeBarState = 'normal' | 'hovered' | 'dragging';
+
+const RESIZE_BAR_DOT_RADIUS = 1;
+const RESIZE_BAR_DOT_SPACING = 4;
+const RESIZE_BAR_HEIGHT = 8;
+const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;
+
+export class ResizeBarView extends View {
+  _interactionState: ResizeBarState = 'normal';
+  _label: string;
+
+  showLabel: boolean = false;
+
+  constructor(surface: Surface, frame: Rect, label: string) {
+    super(surface, frame, noopLayout);
+
+    this._label = label;
+  }
+
+  desiredSize(): Size {
+    return this.showLabel
+      ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
+      : {height: RESIZE_BAR_HEIGHT, width: 0};
+  }
+
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    const {frame} = this;
+    const {x, y} = frame.origin;
+    const {width, height} = frame.size;
+
+    const isActive =
+      this._interactionState === 'dragging' ||
+      (this._interactionState === 'hovered' && viewRefs.activeView === null);
+
+    context.fillStyle = isActive
+      ? COLORS.REACT_RESIZE_BAR_ACTIVE
+      : COLORS.REACT_RESIZE_BAR;
+    context.fillRect(x, y, width, height);
+
+    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
+    context.fillRect(x, y, width, BORDER_SIZE);
+    context.fillRect(x, y + height - BORDER_SIZE, width, BORDER_SIZE);
+
+    const horizontalCenter = x + width / 2;
+    const verticalCenter = y + height / 2;
+
+    if (this.showLabel) {
+      // When the resize view is collapsed entirely,
+      // rather than showing a resize bar– this view displays a label.
+      const labelRect: Rect = {
+        origin: {
+          x: 0,
+          y: y + height - RESIZE_BAR_WITH_LABEL_HEIGHT,
+        },
+        size: {
+          width: frame.size.width,
+          height: RESIZE_BAR_WITH_LABEL_HEIGHT,
+        },
+      };
+
+      drawText(this._label, context, labelRect, frame, {
+        fillStyle: COLORS.REACT_RESIZE_BAR_DOT,
+        textAlign: 'center',
+      });
+    } else {
+      // Otherwise draw horizontally centered resize bar dots
+      context.beginPath();
+      context.fillStyle = COLORS.REACT_RESIZE_BAR_DOT;
+      context.arc(
+        horizontalCenter,
+        verticalCenter,
+        RESIZE_BAR_DOT_RADIUS,
+        0,
+        2 * Math.PI,
+      );
+      context.arc(
+        horizontalCenter + RESIZE_BAR_DOT_SPACING,
+        verticalCenter,
+        RESIZE_BAR_DOT_RADIUS,
+        0,
+        2 * Math.PI,
+      );
+      context.arc(
+        horizontalCenter - RESIZE_BAR_DOT_SPACING,
+        verticalCenter,
+        RESIZE_BAR_DOT_RADIUS,
+        0,
+        2 * Math.PI,
+      );
+      context.fill();
+    }
+  }
+
+  _setInteractionState(state: ResizeBarState) {
+    if (this._interactionState === state) {
+      return;
+    }
+    this._interactionState = state;
+    this.setNeedsDisplay();
+  }
+
+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
+    const cursorInView = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+    if (cursorInView) {
+      this._setInteractionState('dragging');
+      viewRefs.activeView = this;
+    }
+  }
+
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const cursorInView = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+
+    if (viewRefs.activeView === this) {
+      // If we're actively dragging this resize bar,
+      // show the cursor even if the pointer isn't hovering over this view.
+      this.currentCursor = 'ns-resize';
+    } else if (cursorInView) {
+      if (this.showLabel) {
+        this.currentCursor = 'pointer';
+      } else {
+        this.currentCursor = 'ns-resize';
+      }
+    }
+
+    if (cursorInView) {
+      viewRefs.hoveredView = this;
+    }
+
+    if (this._interactionState === 'dragging') {
+      return;
+    }
+    this._setInteractionState(cursorInView ? 'hovered' : 'normal');
+  }
+
+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
+    const cursorInView = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+    if (this._interactionState === 'dragging') {
+      this._setInteractionState(cursorInView ? 'hovered' : 'normal');
+    }
+
+    if (viewRefs.activeView === this) {
+      viewRefs.activeView = null;
+    }
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousedown':
+        this._handleMouseDown(interaction, viewRefs);
+        break;
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+      case 'mouseup':
+        this._handleMouseUp(interaction, viewRefs);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/index.js b/packages/react-devtools-timeline/src/view-base/resizable/index.js
new file mode 100644
index 00000000000..0ea8018f66e
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/resizable/index.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ResizableView';
+export * from './ResizeBarView';
diff --git a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
new file mode 100644
index 00000000000..59fd89c26f3
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
@@ -0,0 +1,254 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {NormalizedWheelDelta} from './utils/normalizeWheel';
+import type {Point} from './geometry';
+
+import {useEffect, useRef} from 'react';
+import {normalizeWheel} from './utils/normalizeWheel';
+
+export type ClickInteraction = {
+  type: 'click',
+  payload: {
+    event: MouseEvent,
+    location: Point,
+  },
+};
+export type DoubleClickInteraction = {
+  type: 'double-click',
+  payload: {
+    event: MouseEvent,
+    location: Point,
+  },
+};
+export type MouseDownInteraction = {
+  type: 'mousedown',
+  payload: {
+    event: MouseEvent,
+    location: Point,
+  },
+};
+export type MouseMoveInteraction = {
+  type: 'mousemove',
+  payload: {
+    event: MouseEvent,
+    location: Point,
+  },
+};
+export type MouseUpInteraction = {
+  type: 'mouseup',
+  payload: {
+    event: MouseEvent,
+    location: Point,
+  },
+};
+export type WheelPlainInteraction = {
+  type: 'wheel-plain',
+  payload: {
+    event: WheelEvent,
+    location: Point,
+    delta: NormalizedWheelDelta,
+  },
+};
+export type WheelWithShiftInteraction = {
+  type: 'wheel-shift',
+  payload: {
+    event: WheelEvent,
+    location: Point,
+    delta: NormalizedWheelDelta,
+  },
+};
+export type WheelWithControlInteraction = {
+  type: 'wheel-control',
+  payload: {
+    event: WheelEvent,
+    location: Point,
+    delta: NormalizedWheelDelta,
+  },
+};
+export type WheelWithMetaInteraction = {
+  type: 'wheel-meta',
+  payload: {
+    event: WheelEvent,
+    location: Point,
+    delta: NormalizedWheelDelta,
+  },
+};
+
+export type Interaction =
+  | ClickInteraction
+  | DoubleClickInteraction
+  | MouseDownInteraction
+  | MouseMoveInteraction
+  | MouseUpInteraction
+  | WheelPlainInteraction
+  | WheelWithShiftInteraction
+  | WheelWithControlInteraction
+  | WheelWithMetaInteraction;
+
+let canvasBoundingRectCache = null;
+function cacheFirstGetCanvasBoundingRect(
+  canvas: HTMLCanvasElement,
+): ClientRect {
+  if (
+    canvasBoundingRectCache &&
+    canvas.width === canvasBoundingRectCache.width &&
+    canvas.height === canvasBoundingRectCache.height
+  ) {
+    return canvasBoundingRectCache.rect;
+  }
+  canvasBoundingRectCache = {
+    width: canvas.width,
+    height: canvas.height,
+    rect: canvas.getBoundingClientRect(),
+  };
+  return canvasBoundingRectCache.rect;
+}
+
+export function useCanvasInteraction(
+  canvasRef: {current: HTMLCanvasElement | null},
+  interactor: (interaction: Interaction) => void,
+) {
+  const isMouseDownRef = useRef<boolean>(false);
+  const didMouseMoveWhileDownRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+
+    function localToCanvasCoordinates(localCoordinates: Point): Point {
+      // $FlowFixMe[incompatible-call] found when upgrading Flow
+      const canvasRect = cacheFirstGetCanvasBoundingRect(canvas);
+      return {
+        x: localCoordinates.x - canvasRect.left,
+        y: localCoordinates.y - canvasRect.top,
+      };
+    }
+
+    const onCanvasClick: MouseEventHandler = event => {
+      if (didMouseMoveWhileDownRef.current) {
+        return;
+      }
+
+      interactor({
+        type: 'click',
+        payload: {
+          event,
+          location: localToCanvasCoordinates({x: event.x, y: event.y}),
+        },
+      });
+    };
+
+    const onCanvasDoubleClick: MouseEventHandler = event => {
+      if (didMouseMoveWhileDownRef.current) {
+        return;
+      }
+
+      interactor({
+        type: 'double-click',
+        payload: {
+          event,
+          location: localToCanvasCoordinates({x: event.x, y: event.y}),
+        },
+      });
+    };
+
+    const onCanvasMouseDown: MouseEventHandler = event => {
+      didMouseMoveWhileDownRef.current = false;
+      isMouseDownRef.current = true;
+
+      interactor({
+        type: 'mousedown',
+        payload: {
+          event,
+          location: localToCanvasCoordinates({x: event.x, y: event.y}),
+        },
+      });
+    };
+
+    const onDocumentMouseMove: MouseEventHandler = event => {
+      if (isMouseDownRef.current) {
+        didMouseMoveWhileDownRef.current = true;
+      }
+
+      interactor({
+        type: 'mousemove',
+        payload: {
+          event,
+          location: localToCanvasCoordinates({x: event.x, y: event.y}),
+        },
+      });
+    };
+
+    const onDocumentMouseUp: MouseEventHandler = event => {
+      isMouseDownRef.current = false;
+
+      interactor({
+        type: 'mouseup',
+        payload: {
+          event,
+          location: localToCanvasCoordinates({x: event.x, y: event.y}),
+        },
+      });
+    };
+
+    const onCanvasWheel: WheelEventHandler = event => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const location = localToCanvasCoordinates({x: event.x, y: event.y});
+      const delta = normalizeWheel(event);
+
+      if (event.shiftKey) {
+        interactor({
+          type: 'wheel-shift',
+          payload: {event, location, delta},
+        });
+      } else if (event.ctrlKey) {
+        interactor({
+          type: 'wheel-control',
+          payload: {event, location, delta},
+        });
+      } else if (event.metaKey) {
+        interactor({
+          type: 'wheel-meta',
+          payload: {event, location, delta},
+        });
+      } else {
+        interactor({
+          type: 'wheel-plain',
+          payload: {event, location, delta},
+        });
+      }
+
+      return false;
+    };
+
+    const ownerDocument = canvas.ownerDocument;
+    ownerDocument.addEventListener('mousemove', onDocumentMouseMove);
+    ownerDocument.addEventListener('mouseup', onDocumentMouseUp);
+
+    canvas.addEventListener('click', onCanvasClick);
+    canvas.addEventListener('dblclick', onCanvasDoubleClick);
+    canvas.addEventListener('mousedown', onCanvasMouseDown);
+    canvas.addEventListener('wheel', onCanvasWheel);
+
+    return () => {
+      ownerDocument.removeEventListener('mousemove', onDocumentMouseMove);
+      ownerDocument.removeEventListener('mouseup', onDocumentMouseUp);
+
+      canvas.removeEventListener('click', onCanvasClick);
+      canvas.removeEventListener('dblclick', onCanvasDoubleClick);
+      canvas.removeEventListener('mousedown', onCanvasMouseDown);
+      canvas.removeEventListener('wheel', onCanvasWheel);
+    };
+  }, [canvasRef, interactor]);
+}
diff --git a/packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js
new file mode 100644
index 00000000000..c8bcb84903b
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {clamp} from '../clamp';
+
+describe('clamp', () => {
+  it('should return min if value < min', () => {
+    expect(clamp(0, 1, -1)).toBe(0);
+    expect(clamp(0.1, 1.1, 0.05)).toBe(0.1);
+  });
+
+  it('should return value if min <= value <= max', () => {
+    expect(clamp(0, 1, 0)).toBe(0);
+    expect(clamp(0, 1, 0.5)).toBe(0.5);
+    expect(clamp(0, 1, 1)).toBe(1);
+    expect(clamp(0.1, 1.1, 0.15)).toBe(0.15);
+  });
+
+  it('should return max if max < value', () => {
+    expect(clamp(0, 1, 2)).toBe(1);
+    expect(clamp(0.1, 1.1, 1.15)).toBe(1.1);
+  });
+});
diff --git a/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js
new file mode 100644
index 00000000000..8129ea5d4af
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  clampState,
+  moveStateToRange,
+  areScrollStatesEqual,
+  translateState,
+  zoomState,
+} from '../scrollState';
+
+describe('clampState', () => {
+  it('should passthrough offset if state fits within container', () => {
+    expect(
+      clampState({
+        state: {offset: 0, length: 50},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(0, 10);
+    expect(
+      clampState({
+        state: {offset: -20, length: 100},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(-20, 10);
+  });
+
+  it('should clamp offset if offset causes content to go out of container', () => {
+    expect(
+      clampState({
+        state: {offset: -1, length: 50},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(0, 10);
+    expect(
+      clampState({
+        state: {offset: 1, length: 50},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(0, 10);
+
+    expect(
+      clampState({
+        state: {offset: -51, length: 100},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(-50, 10);
+    expect(
+      clampState({
+        state: {offset: 1, length: 100},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(0, 10);
+  });
+
+  it('should passthrough length if container fits in content', () => {
+    expect(
+      clampState({
+        state: {offset: 0, length: 70},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).length,
+    ).toBeCloseTo(70, 10);
+    expect(
+      clampState({
+        state: {offset: 0, length: 50},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).length,
+    ).toBeCloseTo(50, 10);
+    expect(
+      clampState({
+        state: {offset: 0, length: 100},
+        minContentLength: 0,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).length,
+    ).toBeCloseTo(100, 10);
+  });
+
+  it('should clamp length to minimum of max(minContentLength, containerLength)', () => {
+    expect(
+      clampState({
+        state: {offset: -20, length: 0},
+        minContentLength: 20,
+        maxContentLength: 100,
+        containerLength: 50,
+      }).length,
+    ).toBeCloseTo(50, 10);
+    expect(
+      clampState({
+        state: {offset: -20, length: 0},
+        minContentLength: 50,
+        maxContentLength: 100,
+        containerLength: 20,
+      }).length,
+    ).toBeCloseTo(50, 10);
+  });
+
+  it('should clamp length to maximum of max(containerLength, maxContentLength)', () => {
+    expect(
+      clampState({
+        state: {offset: -20, length: 100},
+        minContentLength: 0,
+        maxContentLength: 40,
+        containerLength: 50,
+      }).length,
+    ).toBeCloseTo(50, 10);
+    expect(
+      clampState({
+        state: {offset: -20, length: 100},
+        minContentLength: 0,
+        maxContentLength: 50,
+        containerLength: 40,
+      }).length,
+    ).toBeCloseTo(50, 10);
+  });
+});
+
+describe('translateState', () => {
+  it('should translate state by delta and leave length unchanged', () => {
+    expect(
+      translateState({
+        state: {offset: 0, length: 100},
+        delta: -3.14,
+        containerLength: 50,
+      }),
+    ).toEqual({offset: -3.14, length: 100});
+  });
+
+  it('should clamp resulting offset', () => {
+    expect(
+      translateState({
+        state: {offset: 0, length: 50},
+        delta: -3.14,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(0, 10);
+    expect(
+      translateState({
+        state: {offset: 0, length: 53},
+        delta: -100,
+        containerLength: 50,
+      }).offset,
+    ).toBeCloseTo(-3, 10);
+  });
+});
+
+describe('zoomState', () => {
+  it('should scale width by multiplier', () => {
+    expect(
+      zoomState({
+        state: {offset: 0, length: 100},
+        multiplier: 1.5,
+        fixedPoint: 0,
+
+        minContentLength: 0,
+        maxContentLength: 1000,
+        containerLength: 50,
+      }),
+    ).toEqual({offset: 0, length: 150});
+  });
+
+  it('should clamp zoomed state', () => {
+    const zoomedState = zoomState({
+      state: {offset: -20, length: 100},
+      multiplier: 0.1,
+      fixedPoint: 5,
+
+      minContentLength: 50,
+      maxContentLength: 100,
+      containerLength: 50,
+    });
+    expect(zoomedState.offset).toBeCloseTo(0, 10);
+    expect(zoomedState.length).toBeCloseTo(50, 10);
+  });
+
+  it('should maintain containerStart<->fixedPoint distance', () => {
+    const offset = -20;
+    const fixedPointFromContainer = 10;
+
+    const zoomedState = zoomState({
+      state: {offset, length: 100},
+      multiplier: 2,
+      fixedPoint: fixedPointFromContainer - offset,
+
+      minContentLength: 0,
+      maxContentLength: 1000,
+      containerLength: 50,
+    });
+
+    expect(zoomedState).toMatchInlineSnapshot(`
+      {
+        "length": 200,
+        "offset": -50,
+      }
+    `);
+  });
+});
+
+describe('moveStateToRange', () => {
+  it('should set [rangeStart, rangeEnd] = container', () => {
+    const movedState = moveStateToRange({
+      state: {offset: -20, length: 100},
+      rangeStart: 50,
+      rangeEnd: 100,
+      contentLength: 400,
+
+      minContentLength: 10,
+      maxContentLength: 1000,
+      containerLength: 50,
+    });
+
+    expect(movedState).toMatchInlineSnapshot(`
+      {
+        "length": 400,
+        "offset": -50,
+      }
+    `);
+  });
+});
+
+describe('areScrollStatesEqual', () => {
+  it('should return true if equal', () => {
+    expect(
+      areScrollStatesEqual({offset: 0, length: 0}, {offset: 0, length: 0}),
+    ).toBe(true);
+    expect(
+      areScrollStatesEqual({offset: -1, length: 1}, {offset: -1, length: 1}),
+    ).toBe(true);
+  });
+
+  it('should return false if not equal', () => {
+    expect(
+      areScrollStatesEqual({offset: 0, length: 0}, {offset: -1, length: 0}),
+    ).toBe(false);
+    expect(
+      areScrollStatesEqual({offset: -1, length: 1}, {offset: -1, length: 0}),
+    ).toBe(false);
+  });
+});
diff --git a/packages/react-devtools-timeline/src/view-base/utils/clamp.js b/packages/react-devtools-timeline/src/view-base/utils/clamp.js
new file mode 100644
index 00000000000..ff9fdd74ba9
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/utils/clamp.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 clamp(min: number, max: number, value: number): number {
+  if (Number.isNaN(min) || Number.isNaN(max) || Number.isNaN(value)) {
+    throw new Error(
+      `Clamp was called with NaN. Args: min: ${min}, max: ${max}, value: ${value}.`,
+    );
+  }
+  return Math.min(max, Math.max(min, value));
+}
diff --git a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
new file mode 100644
index 00000000000..95f3db1aea2
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Adapted from: https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+
+export type NormalizedWheelDelta = {
+  deltaX: number,
+  deltaY: number,
+};
+
+// Reasonable defaults
+const LINE_HEIGHT = 40;
+const PAGE_HEIGHT = 800;
+
+/**
+ * Mouse wheel (and 2-finger trackpad) support on the web sucks.  It is
+ * complicated, thus this doc is long and (hopefully) detailed enough to answer
+ * your questions.
+ *
+ * If you need to react to the mouse wheel in a predictable way, this code is
+ * like your bestest friend. * hugs *
+ *
+ * In your event callback, use this code to get sane interpretation of the
+ * deltas.  This code will return an object with properties:
+ *
+ *   - deltaX  -- normalized distance (to pixels) - x plane
+ *   - deltaY  -- " - y plane
+ *
+ * Wheel values are provided by the browser assuming you are using the wheel to
+ * scroll a web page by a number of lines or pixels (or pages).  Values can vary
+ * significantly on different platforms and browsers, forgetting that you can
+ * scroll at different speeds.  Some devices (like trackpads) emit more events
+ * at smaller increments with fine granularity, and some emit massive jumps with
+ * linear speed or acceleration.
+ *
+ * This code does its best to normalize the deltas for you:
+ *
+ *   - delta* is normalizing the desired scroll delta in pixel units.
+ *
+ *   - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT.  This
+ *     should translate to positive value zooming IN, negative zooming OUT.
+ *     This matches the 'wheel' event.
+ *
+ * Implementation info:
+ *
+ * The basics of the standard 'wheel' event is that it includes a unit,
+ * deltaMode (pixels, lines, pages), and deltaX, deltaY and deltaZ.
+ * See: http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
+ *
+ * Examples of 'wheel' event if you scroll slowly (down) by one step with an
+ * average mouse:
+ *
+ *   OS X + Chrome  (mouse)     -    4   pixel delta  (wheelDelta -120)
+ *   OS X + Safari  (mouse)     -  N/A   pixel delta  (wheelDelta  -12)
+ *   OS X + Firefox (mouse)     -    0.1 line  delta  (wheelDelta  N/A)
+ *   Win8 + Chrome  (mouse)     -  100   pixel delta  (wheelDelta -120)
+ *   Win8 + Firefox (mouse)     -    3   line  delta  (wheelDelta -120)
+ *
+ * On the trackpad:
+ *
+ *   OS X + Chrome  (trackpad)  -    2   pixel delta  (wheelDelta   -6)
+ *   OS X + Firefox (trackpad)  -    1   pixel delta  (wheelDelta  N/A)
+ */
+export function normalizeWheel(event: WheelEvent): NormalizedWheelDelta {
+  let deltaX = event.deltaX;
+  let deltaY = event.deltaY;
+
+  if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+    // delta in LINE units
+    deltaX *= LINE_HEIGHT;
+    deltaY *= LINE_HEIGHT;
+  } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+    // delta in PAGE units
+    deltaX *= PAGE_HEIGHT;
+    deltaY *= PAGE_HEIGHT;
+  }
+
+  return {deltaX, deltaY};
+}
diff --git a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
new file mode 100644
index 00000000000..9450b312e21
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {clamp} from './clamp';
+
+/**
+ * Single-axis offset and length state.
+ *
+ * ```
+ * contentStart   containerStart  containerEnd   contentEnd
+ *     |<----------offset|              |             |
+ *     |<-------------------length------------------->|
+ * ```
+ */
+export type ScrollState = {
+  offset: number,
+  length: number,
+};
+
+function clampOffset(state: ScrollState, containerLength: number): ScrollState {
+  return {
+    offset: clamp(-(state.length - containerLength), 0, state.offset),
+    length: state.length,
+  };
+}
+
+function clampLength({
+  state,
+  minContentLength,
+  maxContentLength,
+  containerLength,
+}: {
+  state: ScrollState,
+  minContentLength: number,
+  maxContentLength: number,
+  containerLength: number,
+}): ScrollState {
+  return {
+    offset: state.offset,
+    length: clamp(
+      Math.max(minContentLength, containerLength),
+      Math.max(containerLength, maxContentLength),
+      state.length,
+    ),
+  };
+}
+
+/**
+ * Returns `state` clamped such that:
+ * - `length`: you won't be able to zoom in/out such that the content is
+ *   shorter than the `containerLength`.
+ * - `offset`: content remains in `containerLength`.
+ */
+export function clampState({
+  state,
+  minContentLength,
+  maxContentLength,
+  containerLength,
+}: {
+  state: ScrollState,
+  minContentLength: number,
+  maxContentLength: number,
+  containerLength: number,
+}): ScrollState {
+  return clampOffset(
+    clampLength({
+      state,
+      minContentLength,
+      maxContentLength,
+      containerLength,
+    }),
+    containerLength,
+  );
+}
+
+export function translateState({
+  state,
+  delta,
+  containerLength,
+}: {
+  state: ScrollState,
+  delta: number,
+  containerLength: number,
+}): ScrollState {
+  return clampOffset(
+    {
+      offset: state.offset + delta,
+      length: state.length,
+    },
+    containerLength,
+  );
+}
+
+/**
+ * Returns a new clamped `state` zoomed by `multiplier`.
+ *
+ * The provided fixed point will also remain stationary relative to
+ * `containerStart`.
+ *
+ * ```
+ * contentStart   containerStart                fixedPoint containerEnd
+ *     |<---------offset-|                          x           |
+ *     |-fixedPoint-------------------------------->x           |
+ *                       |-fixedPointFromContainer->x           |
+ *                       |<----------containerLength----------->|
+ * ```
+ */
+export function zoomState({
+  state,
+  multiplier,
+  fixedPoint,
+
+  minContentLength,
+  maxContentLength,
+  containerLength,
+}: {
+  state: ScrollState,
+  multiplier: number,
+  fixedPoint: number,
+
+  minContentLength: number,
+  maxContentLength: number,
+  containerLength: number,
+}): ScrollState {
+  // Length and offset must be computed separately, so that if the length is
+  // clamped the offset will still be correct (unless it gets clamped too).
+
+  const zoomedState = clampLength({
+    state: {
+      offset: state.offset,
+      length: state.length * multiplier,
+    },
+    minContentLength,
+    maxContentLength,
+    containerLength,
+  });
+
+  // Adjust offset so that distance between containerStart<->fixedPoint is fixed
+  const fixedPointFromContainer = fixedPoint + state.offset;
+  const scaledFixedPoint = fixedPoint * (zoomedState.length / state.length);
+  const offsetAdjustedState = clampOffset(
+    {
+      offset: fixedPointFromContainer - scaledFixedPoint,
+      length: zoomedState.length,
+    },
+    containerLength,
+  );
+
+  return offsetAdjustedState;
+}
+
+export function moveStateToRange({
+  state,
+  rangeStart,
+  rangeEnd,
+  contentLength,
+
+  minContentLength,
+  maxContentLength,
+  containerLength,
+}: {
+  state: ScrollState,
+  rangeStart: number,
+  rangeEnd: number,
+  contentLength: number,
+
+  minContentLength: number,
+  maxContentLength: number,
+  containerLength: number,
+}): ScrollState {
+  // Length and offset must be computed separately, so that if the length is
+  // clamped the offset will still be correct (unless it gets clamped too).
+
+  const lengthClampedState = clampLength({
+    state: {
+      offset: state.offset,
+      length: contentLength * (containerLength / (rangeEnd - rangeStart)),
+    },
+    minContentLength,
+    maxContentLength,
+    containerLength,
+  });
+
+  const offsetAdjustedState = clampOffset(
+    {
+      offset: -rangeStart * (lengthClampedState.length / contentLength),
+      length: lengthClampedState.length,
+    },
+    containerLength,
+  );
+
+  return offsetAdjustedState;
+}
+
+export function areScrollStatesEqual(
+  state1: ScrollState,
+  state2: ScrollState,
+): boolean {
+  return state1.offset === state2.offset && state1.length === state2.length;
+}
diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
new file mode 100644
index 00000000000..1b542509f5e
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Rect} from '../geometry';
+import type {Surface, ViewRefs} from '../Surface';
+import type {
+  Interaction,
+  ClickInteraction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+} from '../useCanvasInteraction';
+
+import {VerticalScrollOverflowView} from './VerticalScrollOverflowView';
+import {rectContainsPoint, rectEqualToRect} from '../geometry';
+import {View} from '../View';
+import {BORDER_SIZE, COLORS} from '../../content-views/constants';
+
+const SCROLL_BAR_SIZE = 14;
+
+const HIDDEN_RECT = {
+  origin: {
+    x: 0,
+    y: 0,
+  },
+  size: {
+    width: 0,
+    height: 0,
+  },
+};
+
+export class VerticalScrollBarView extends View {
+  _contentHeight: number = 0;
+  _isScrolling: boolean = false;
+  _scrollBarRect: Rect = HIDDEN_RECT;
+  _scrollThumbRect: Rect = HIDDEN_RECT;
+  _verticalScrollOverflowView: VerticalScrollOverflowView;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    verticalScrollOverflowView: VerticalScrollOverflowView,
+  ) {
+    super(surface, frame);
+
+    this._verticalScrollOverflowView = verticalScrollOverflowView;
+  }
+
+  desiredSize(): {+height: number, +width: number} {
+    return {
+      width: SCROLL_BAR_SIZE,
+      height: 0, // No desired height
+    };
+  }
+
+  getMaxScrollThumbY(): number {
+    const {height} = this.frame.size;
+
+    const maxScrollThumbY = height - this._scrollThumbRect.size.height;
+
+    return maxScrollThumbY;
+  }
+
+  setContentHeight(contentHeight: number) {
+    this._contentHeight = contentHeight;
+
+    const {height, width} = this.frame.size;
+
+    const proposedScrollThumbRect = {
+      origin: {
+        x: this.frame.origin.x,
+        y: this._scrollThumbRect.origin.y,
+      },
+      size: {
+        width,
+        height: height * (height / contentHeight),
+      },
+    };
+
+    if (!rectEqualToRect(this._scrollThumbRect, proposedScrollThumbRect)) {
+      this._scrollThumbRect = proposedScrollThumbRect;
+      this.setNeedsDisplay();
+    }
+  }
+
+  setScrollThumbY(value: number) {
+    const {height} = this.frame.size;
+
+    const maxScrollThumbY = this.getMaxScrollThumbY();
+    const newScrollThumbY = Math.max(0, Math.min(maxScrollThumbY, value));
+
+    this._scrollThumbRect = {
+      ...this._scrollThumbRect,
+      origin: {
+        x: this.frame.origin.x,
+        y: newScrollThumbY,
+      },
+    };
+
+    const maxContentOffset = this._contentHeight - height;
+    const contentScrollOffset =
+      (newScrollThumbY / maxScrollThumbY) * maxContentOffset * -1;
+
+    this._verticalScrollOverflowView.setScrollOffset(
+      contentScrollOffset,
+      maxScrollThumbY,
+    );
+  }
+
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    const {x, y} = this.frame.origin;
+    const {width, height} = this.frame.size;
+
+    // TODO Use real color
+    context.fillStyle = COLORS.REACT_RESIZE_BAR;
+    context.fillRect(x, y, width, height);
+
+    // TODO Use real color
+    context.fillStyle = COLORS.SCROLL_CARET;
+    context.fillRect(
+      this._scrollThumbRect.origin.x,
+      this._scrollThumbRect.origin.y,
+      this._scrollThumbRect.size.width,
+      this._scrollThumbRect.size.height,
+    );
+
+    // TODO Use real color
+    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
+    context.fillRect(x, y, BORDER_SIZE, height);
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'click':
+        this._handleClick(interaction, viewRefs);
+        break;
+      case 'mousedown':
+        this._handleMouseDown(interaction, viewRefs);
+        break;
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+      case 'mouseup':
+        this._handleMouseUp(interaction, viewRefs);
+        break;
+    }
+  }
+
+  _handleClick(interaction: ClickInteraction, viewRefs: ViewRefs) {
+    const {location} = interaction.payload;
+    if (rectContainsPoint(location, this.frame)) {
+      if (rectContainsPoint(location, this._scrollThumbRect)) {
+        // Ignore clicks on the track thumb directly.
+        return;
+      }
+
+      const currentScrollThumbY = this._scrollThumbRect.origin.y;
+      const y = location.y;
+
+      const {height} = this.frame.size;
+
+      // Scroll up or down about one viewport worth of content:
+      const deltaY = (height / this._contentHeight) * height * 0.8;
+
+      this.setScrollThumbY(
+        y > currentScrollThumbY
+          ? this._scrollThumbRect.origin.y + deltaY
+          : this._scrollThumbRect.origin.y - deltaY,
+      );
+    }
+  }
+
+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, this._scrollThumbRect)) {
+      return;
+    }
+    viewRefs.activeView = this;
+
+    this.currentCursor = 'default';
+
+    this._isScrolling = true;
+    this.setNeedsDisplay();
+  }
+
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {event, location} = interaction.payload;
+    if (rectContainsPoint(location, this.frame)) {
+      if (viewRefs.hoveredView !== this) {
+        viewRefs.hoveredView = this;
+      }
+
+      this.currentCursor = 'default';
+    }
+
+    if (viewRefs.activeView === this) {
+      this.currentCursor = 'default';
+
+      this.setScrollThumbY(this._scrollThumbRect.origin.y + event.movementY);
+    }
+  }
+
+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
+    if (viewRefs.activeView === this) {
+      viewRefs.activeView = null;
+    }
+
+    if (this._isScrolling) {
+      this._isScrolling = false;
+      this.setNeedsDisplay();
+    }
+  }
+}
diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
new file mode 100644
index 00000000000..55e86bbb08e
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Rect} from '../geometry';
+import type {ScrollState} from '../utils/scrollState';
+import type {Surface} from '../Surface';
+import type {ViewState} from '../../types';
+
+import {VerticalScrollBarView} from './VerticalScrollBarView';
+import {withVerticalScrollbarLayout} from './withVerticalScrollbarLayout';
+import {View} from '../View';
+import {VerticalScrollView} from '../VerticalScrollView';
+
+export class VerticalScrollOverflowView extends View {
+  _contentView: View;
+  _isProcessingOnChange: boolean = false;
+  _isScrolling: boolean = false;
+  _scrollOffset: number = 0;
+  _scrollBarView: VerticalScrollBarView;
+  _verticalScrollView: VerticalScrollView;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    contentView: View,
+    viewState: ViewState,
+  ) {
+    super(surface, frame, withVerticalScrollbarLayout);
+
+    this._contentView = contentView;
+    this._verticalScrollView = new VerticalScrollView(
+      surface,
+      frame,
+      contentView,
+      viewState,
+      'VerticalScrollOverflowView',
+    );
+    this._verticalScrollView.onChange(this._onVerticalScrollViewChange);
+
+    this._scrollBarView = new VerticalScrollBarView(surface, frame, this);
+
+    this.addSubview(this._verticalScrollView);
+    this.addSubview(this._scrollBarView);
+  }
+
+  layoutSubviews() {
+    super.layoutSubviews();
+
+    const contentSize = this._contentView.desiredSize();
+
+    // This should be done after calling super.layoutSubviews() – calling it
+    // before somehow causes _contentView to need display on every mousemove
+    // event when the scroll bar is shown.
+    this._scrollBarView.setContentHeight(contentSize.height);
+  }
+
+  setScrollOffset(newScrollOffset: number, maxScrollOffset: number) {
+    const deltaY = newScrollOffset - this._scrollOffset;
+
+    if (!this._isProcessingOnChange) {
+      this._verticalScrollView.scrollBy(-deltaY);
+    }
+
+    this._scrollOffset = newScrollOffset;
+
+    this.setNeedsDisplay();
+  }
+
+  _onVerticalScrollViewChange: (
+    scrollState: ScrollState,
+    containerLength: number,
+  ) => void = (scrollState: ScrollState, containerLength: number) => {
+    const maxOffset = scrollState.length - containerLength;
+    if (maxOffset === 0) {
+      return;
+    }
+
+    const percentage = Math.abs(scrollState.offset) / maxOffset;
+    const maxScrollThumbY = this._scrollBarView.getMaxScrollThumbY();
+
+    this._isProcessingOnChange = true;
+    this._scrollBarView.setScrollThumbY(percentage * maxScrollThumbY);
+    this._isProcessingOnChange = false;
+  };
+}
diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js
new file mode 100644
index 00000000000..47628fe47e0
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './VerticalScrollBarView';
+export * from './VerticalScrollOverflowView';
diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
new file mode 100644
index 00000000000..2e3a8fa8d22
--- /dev/null
+++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {LayoutInfo, Layouter} from '../layouter';
+
+/**
+ * Assumes {@param layout} will only contain 2 views.
+ */
+export const withVerticalScrollbarLayout: Layouter = (
+  layout,
+  containerFrame,
+) => {
+  const [contentLayoutInfo, scrollbarLayoutInfo] = layout;
+
+  const desiredContentSize = contentLayoutInfo.view.desiredSize();
+  const shouldShowScrollbar =
+    desiredContentSize.height > containerFrame.size.height;
+  const scrollbarWidth = shouldShowScrollbar
+    ? scrollbarLayoutInfo.view.desiredSize().width
+    : 0;
+
+  const laidOutContentLayoutInfo: LayoutInfo = {
+    ...contentLayoutInfo,
+    frame: {
+      origin: contentLayoutInfo.view.frame.origin,
+      size: {
+        width: containerFrame.size.width - scrollbarWidth,
+        height: containerFrame.size.height,
+      },
+    },
+  };
+  const laidOutScrollbarLayoutInfo: LayoutInfo = {
+    ...scrollbarLayoutInfo,
+    frame: {
+      origin: {
+        x:
+          laidOutContentLayoutInfo.frame.origin.x +
+          laidOutContentLayoutInfo.frame.size.width,
+        y: containerFrame.origin.y,
+      },
+      size: {
+        width: scrollbarWidth,
+        height: containerFrame.size.height,
+      },
+    },
+  };
+
+  return [laidOutContentLayoutInfo, laidOutScrollbarLayoutInfo];
+};
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
new file mode 100644
index 00000000000..6c3ab1baf07
--- /dev/null
+++ b/packages/react-devtools/CHANGELOG.md
@@ -0,0 +1,1468 @@
+# React DevTools changelog
+
+<!-- RELEASE_SCRIPT_TOKEN -->
+
+---
+
+### 7.0.1
+October 20, 2025
+
+* Various UI improvements to experimental Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) & [eps1lon](https://github.com/eps1lon))
+* devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796))
+* fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792))
+
+---
+
+### 7.0.0
+Oct 2, 2025
+
+Add a "suspended by" section showing all causes of why the inspected element suspended. This includes:
+
+- `await` in Server Components  
+- `React.lazy`  
+- `use()`  
+- suspensey images, CSS, and fonts
+
+Add a Code Editor Sidebar Pane in the Chrome Sources Tab (@sebmarkbage [#33968](https://github.com/facebook/react/pull/33968), [#33987](https://github.com/facebook/react/pull/33987), [#33988](https://github.com/facebook/react/pull/33988))  
+
+Add Option to Open Local Files directly in External Editor (@sebmarkbage [#33983](https://github.com/facebook/react/pull/33983), [#33985](https://github.com/facebook/react/pull/33985), [#33965](https://github.com/facebook/react/pull/33965))  
+
+#### Other changes
+
+- Allow inspection of React tree before streaming has finished (@eps1lon [#34360](https://github.com/facebook/react/pull/34360))  
+- Always attempt to mount dehydrated roots (@eps1lon [#34209](https://github.com/facebook/react/pull/34209))  
+- Show `name` prop of Suspense / Activity in the Components Tree view (@sebmarkbage [#34135](https://github.com/facebook/react/pull/34135))  
+- 1st class support of used Thenables (@sebmarkbage, @eps1lon: [#32989](https://github.com/facebook/react/pull/32989), [#34097](https://github.com/facebook/react/pull/34097))  
+- Allow inspecting cause, name, message, stack of Errors in props (@eps1lon [#33023](https://github.com/facebook/react/pull/33023))  
+- Allow Introspection of React Elements and React.lazy (@sebmarkbage [#34129](https://github.com/facebook/react/pull/34129))  
+- Fix "View source" for sources with URLs that aren't normalized (@eps1lon [#32951](https://github.com/facebook/react/pull/32951))  
+- Fix symbolication with Index Source Maps (@eps1lon [#34300](https://github.com/facebook/react/pull/34300))  
+- Ignore List Stack Traces (@sebmarkbage [#34210](https://github.com/facebook/react/pull/34210))  
+- Linkify Source View (@sebmarkbage [#33954](https://github.com/facebook/react/pull/33954))  
+- Only show state for ClassComponents (@sebmarkbage [#34091](https://github.com/facebook/react/pull/34091))  
+- Show Owner Stacks in "rendered by" View (@sebmarkbage [#34130](https://github.com/facebook/react/pull/34130))  
+- Stop mounting empty roots (@eps1lon [#34467](https://github.com/facebook/react/pull/34467))  
+- Show changed hooks names in the Profiler tab (@piotrski [#31398](https://github.com/facebook/react/pull/31398))  
+- Display native tag for host components for Native (@ruslan [#32762](https://github.com/facebook/react/pull/32762))  
+- Static Components panel layout (@ruslan [#33696](https://github.com/facebook/react/pull/33696), [#33517](https://github.com/facebook/react/pull/33517), [#34088](https://github.com/facebook/react/pull/34088))  
+- Add Badge to Owners and sometimes stack traces (@sebmarkbage [#34106](https://github.com/facebook/react/pull/34106))  
+- Make a non-editable name of KeyValue clickable ([34095](https://github.com/facebook/react/pull/34095))  
+- Only inspect elements on left mouseclick (@eps1lon [#34361](https://github.com/facebook/react/pull/34361))  
+- Rerender when the browser theme changes (@sebmarkbage [#33992](https://github.com/facebook/react/pull/33992))  
+- Stop using native `title` for buttons/icons (@eps1lon [#34379](https://github.com/facebook/react/pull/34379))  
+- Style clickable Owner components with angle brackets and bold (@sebmarkbage [#34096](https://github.com/facebook/react/pull/34096))  
+- Swap Components tab layout based on container size (@eps1lon [#34035](https://github.com/facebook/react/pull/34035))  
+- Use Visually Lighter Skeletons (@sebmarkbage [#34185](https://github.com/facebook/react/pull/34185))
+
+---
+
+### 6.1.5
+July 4, 2025
+
+* fix: fallback to reading string stack trace when failed ([hoxyq](https://github.com/hoxyq) in [#33700](https://github.com/facebook/react/pull/33700))
+
+---
+
+### 6.1.4
+July 4, 2025
+
+* feat: static Components panel layout ([hoxyq](https://github.com/hoxyq) in [#33696](https://github.com/facebook/react/pull/33696))
+
+---
+
+### 6.1.3
+June 27, 2025
+
+* devtools: emit performance entries only when profiling ([hoxyq](https://github.com/hoxyq) in [#33652](https://github.com/facebook/react/pull/33652))
+* Get Server Component Function Location for Parent Stacks using Child's Owner Stack ([sebmarkbage](https://github.com/sebmarkbage) in [#33629](https://github.com/facebook/react/pull/33629))
+* Added minimum indent size to Component Tree ([jsdf](https://github.com/jsdf) in [#33517](https://github.com/facebook/react/pull/33517))
+* refactor[devtools]: update css for settings and support css variables in shadow dom scnenario ([hoxyq](https://github.com/hoxyq) in [#33487](https://github.com/facebook/react/pull/33487))
+* Get source location from structured callsites in prepareStackTrace ([sebmarkbage](https://github.com/sebmarkbage) in [#33143](https://github.com/facebook/react/pull/33143))
+
+---
+
+### 6.1.2
+May 7, 2025
+
+* Restore "double-click to view owners tree" functionality ([eps1lon](https://github.com/eps1lon) in [#33039](https://github.com/facebook/react/pull/33039))
+
+---
+
+### 6.1.1
+February 7, 2025
+
+* DevTools: refactor NativeStyleEditor, don't use custom cache implementation ([hoxyq](https://github.com/hoxyq) in [#32298](https://github.com/facebook/react/pull/32298))
+* DevTools: fix host component filter option title ([hoxyq](https://github.com/hoxyq) in [#32296](https://github.com/facebook/react/pull/32296))
+* chore[DevTools]: make clipboardWrite optional for chromium ([hoxyq](https://github.com/hoxyq) in [#32262](https://github.com/facebook/react/pull/32262))
+
+---
+
+### 6.1.0
+January 16, 2025
+
+* fix[DevTools]: fix HostComponent naming in filters for Native ([hoxyq](https://github.com/hoxyq) in [#32086](https://github.com/facebook/react/pull/32086))
+* Fix copy functionality in Firefox ([V3RON](https://github.com/V3RON) in [#32077](https://github.com/facebook/react/pull/32077))
+* Prevent crash when starting consecutive profiling sessions ([V3RON](https://github.com/V3RON) in [#32066](https://github.com/facebook/react/pull/32066))
+* fix[DevTools/Tree]: only scroll to item when panel is visible ([hoxyq](https://github.com/hoxyq) in [#32018](https://github.com/facebook/react/pull/32018))
+* feat[Tree]: set initial scroll offset when inspected element index is set ([hoxyq](https://github.com/hoxyq) in [#31968](https://github.com/facebook/react/pull/31968))
+* DevTools: fix initial host instance selection ([hoxyq](https://github.com/hoxyq) in [#31892](https://github.com/facebook/react/pull/31892))
+* chore[DevTools/Tree]: don't pre-select root element ([hoxyq](https://github.com/hoxyq) in [#32015](https://github.com/facebook/react/pull/32015))
+* Show component names while highlighting renders ([piotrski](https://github.com/piotrski) in [#31577](https://github.com/facebook/react/pull/31577))
+* allow non-coercible objects in formatConsoleArgumentsToSingleString ([henryqdineen](https://github.com/henryqdineen) in [#31444](https://github.com/facebook/react/pull/31444))
+
+---
+
+### 6.0.1
+October 15, 2024
+
+* Fix React Compiler badging ([poteto](https://github.com/poteto) in [#31196](https://github.com/facebook/react/pull/31196))
+* fix[react-devtools]: record timeline data only when supported ([hoxyq](https://github.com/hoxyq) in [#31154](https://github.com/facebook/react/pull/31154))
+* fix[react-devtools]: remove all listeners when Agent is shutdown ([hoxyq](https://github.com/hoxyq) in [#31151](https://github.com/facebook/react/pull/31151))
+* fix[react-devtools]: wrap key string in preformatted text html element ([hoxyq](https://github.com/hoxyq) in [#31153](https://github.com/facebook/react/pull/31153))
+* fix[react-devtools]: request hook initialization inside http server response ([hoxyq](https://github.com/hoxyq) in [#31102](https://github.com/facebook/react/pull/31102))
+* refactor: allow custom impl of backend reload-to-profile support check ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31048](https://github.com/facebook/react/pull/31048))
+
+---
+
+### 6.0.0
+September 25, 2024
+
+#### Features
+* Support Server Components in Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30684](https://github.com/facebook/react/pull/30684))
+* feat: expose installHook with settings argument from react-devtools-core/backend ([hoxyq](https://github.com/hoxyq) in [#30987](https://github.com/facebook/react/pull/30987))
+* Add Filtering of Environment Names ([sebmarkbage](https://github.com/sebmarkbage) in [#30850](https://github.com/facebook/react/pull/30850))
+* Support secondary environment name when it changes ([sebmarkbage](https://github.com/sebmarkbage) in [#30842](https://github.com/facebook/react/pull/30842))
+* Filter Server Components ([sebmarkbage](https://github.com/sebmarkbage) in [#30839](https://github.com/facebook/react/pull/30839))
+* Make function inspection instant ([sebmarkbage](https://github.com/sebmarkbage) in [#30786](https://github.com/facebook/react/pull/30786))
+* Make Functions Clickable to Jump to Definition ([sebmarkbage](https://github.com/sebmarkbage) in [#30769](https://github.com/facebook/react/pull/30769))
+* [Flight/DevTools] Pass the Server Component's "key" as Part of the ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30703](https://github.com/facebook/react/pull/30703))
+* Make Element Inspection Feel Snappy ([sebmarkbage](https://github.com/sebmarkbage) in [#30555](https://github.com/facebook/react/pull/30555))
+* Print component stacks as error objects to get source mapping ([sebmarkbage](https://github.com/sebmarkbage) in [#30289](https://github.com/facebook/react/pull/30289))
+
+#### Bugfixes
+* Fix: profiling crashes #30661 #28838 ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31024](https://github.com/facebook/react/pull/31024))
+* chore: remove settings manager from react-devtools-core ([hoxyq](https://github.com/hoxyq) in [#30986](https://github.com/facebook/react/pull/30986))
+* fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup ([hoxyq](https://github.com/hoxyq) in [#30825](https://github.com/facebook/react/pull/30825))
+* fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered ([hoxyq](https://github.com/hoxyq) in [#30676](https://github.com/facebook/react/pull/30676))
+* fix: path handling in react devtools ([Jack-Works](https://github.com/Jack-Works) in [#29199](https://github.com/facebook/react/pull/29199))
+
+#### Other
+* feat: display message if user ended up opening hook script ([hoxyq](https://github.com/hoxyq) in [#31000](https://github.com/facebook/react/pull/31000))
+* refactor[react-devtools]: move console patching to global hook ([hoxyq](https://github.com/hoxyq) in [#30596](https://github.com/facebook/react/pull/30596))
+* refactor[react-devtools]: initialize renderer interface early ([hoxyq](https://github.com/hoxyq) in [#30946](https://github.com/facebook/react/pull/30946))
+* Use Unicode Atom Symbol instead of Atom Emoji ([sebmarkbage](https://github.com/sebmarkbage) in [#30832](https://github.com/facebook/react/pull/30832))
+* feat[react-devtools]: support Manifest v3 for Firefox extension ([hoxyq](https://github.com/hoxyq) in [#30824](https://github.com/facebook/react/pull/30824))
+* Enable pointEvents while scrolling ([sebmarkbage](https://github.com/sebmarkbage) in [#30560](https://github.com/facebook/react/pull/30560))
+
+---
+
+### 5.3.1
+July 3, 2024
+
+* chore[react-devtools/renderer]: dont show strict mode warning for prod renderer builds ([hoxyq](https://github.com/hoxyq) in [#30158](https://github.com/facebook/react/pull/30158))
+* chore[react-devtools/ui]: fix strict mode badge styles ([hoxyq](https://github.com/hoxyq) in [#30159](https://github.com/facebook/react/pull/30159))
+* fix[react-devtools]: restore original args when recording errors ([hoxyq](https://github.com/hoxyq) in [#30091](https://github.com/facebook/react/pull/30091))
+* Read constructor name more carefully ([LoganDark](https://github.com/LoganDark) in [#29954](https://github.com/facebook/react/pull/29954))
+* refactor[react-devtools/extensions]: dont debounce cleanup logic on navigation ([hoxyq](https://github.com/hoxyq) in [#30027](https://github.com/facebook/react/pull/30027))
+
+---
+
+### 5.3.0
+June 17, 2024
+
+* chore[react-devtools]: improve console arguments formatting before passing it to original console ([hoxyq](https://github.com/hoxyq) in [#29873](https://github.com/facebook/react/pull/29873))
+* chore[react-devtools]: unify console patching and default to ansi escape symbols ([hoxyq](https://github.com/hoxyq) in [#29869](https://github.com/facebook/react/pull/29869))
+* chore[react-devtools/extensions]: make source maps url relative ([hoxyq](https://github.com/hoxyq) in [#29886](https://github.com/facebook/react/pull/29886))
+* fix[react-devtools] divided inspecting elements between inspecting do… ([vzaidman](https://github.com/vzaidman) in [#29885](https://github.com/facebook/react/pull/29885))
+* fix[react-devtools] component badge in light mode is now not invisible ([vzaidman](https://github.com/vzaidman) in [#29852](https://github.com/facebook/react/pull/29852))
+* fix[react-devtools] remove native inspection button when it can't be used ([vzaidman](https://github.com/vzaidman) in [#29779](https://github.com/facebook/react/pull/29779))
+* chore[react-devtools]: ip => internal-ip ([hoxyq](https://github.com/hoxyq) in [#29772](https://github.com/facebook/react/pull/29772))
+* Fix #29724: `ip` dependency update for CVE-2024-29415 ([Rekl0w](https://github.com/Rekl0w) in [#29725](https://github.com/facebook/react/pull/29725))
+* Dim `console` calls on additional Effect invocations due to `StrictMode` ([eps1lon](https://github.com/eps1lon) in [#29007](https://github.com/facebook/react/pull/29007))
+* refactor[react-devtools]: rewrite context menus ([hoxyq](https://github.com/hoxyq) in [#29049](https://github.com/facebook/react/pull/29049))
+
+---
+
+### 5.2.0
+May 8, 2024
+
+* feat[react-devtools]: display forget badge for components in profiling session ([hoxyq](https://github.com/hoxyq) in [#29014](https://github.com/facebook/react/pull/29014))
+* fix[react-devtools]: add backwards compat with legacy element type symbol ([hoxyq](https://github.com/hoxyq) in [#28982](https://github.com/facebook/react/pull/28982))
+* Expose "view source" options to Fusebox integration ([motiz88](https://github.com/motiz88) in [#28973](https://github.com/facebook/react/pull/28973))
+* Enable inspected element context menu in Fusebox ([motiz88](https://github.com/motiz88) in [#28972](https://github.com/facebook/react/pull/28972))
+* Check in `frontend.d.ts` for react-devtools-fusebox, include in build output ([motiz88](https://github.com/motiz88) in [#28970](https://github.com/facebook/react/pull/28970))
+* Rename Forget badge  ([jbonta](https://github.com/jbonta) in [#28858](https://github.com/facebook/react/pull/28858))
+* Devtools: Add support for useFormStatus ([eps1lon](https://github.com/eps1lon) in [#28413](https://github.com/facebook/react/pull/28413))
+
+---
+
+### 5.1.0
+April 15, 2024
+
+* Look for a ReactMemoCacheSentinel on state ([gsathya](https://github.com/gsathya) in [#28831](https://github.com/facebook/react/pull/28831))
+* feat[devtools]: add method for connecting backend with custom messaging protocol ([hoxyq](https://github.com/hoxyq) in [#28552](https://github.com/facebook/react/pull/28552))
+* feat[devtools]: ship source maps for content scripts and ignore list installHook script ([hoxyq](https://github.com/hoxyq) in [#28730](https://github.com/facebook/react/pull/28730))
+* Devtools: Display actual pending state when inspecting `useTransition` ([eps1lon](https://github.com/eps1lon) in [#28499](https://github.com/facebook/react/pull/28499))
+
+---
+
+### 5.0.2
+March 5, 2024
+
+* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [#28471](https://github.com/facebook/react/pull/28471))
+* refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [#28351](https://github.com/facebook/react/pull/28351))
+* fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [#28486](https://github.com/facebook/react/pull/28486))
+* Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [#28319](https://github.com/facebook/react/pull/28319))
+* Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28415](https://github.com/facebook/react/pull/28415))
+
+---
+
+### 5.0.1
+February 22, 2024
+
+* feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](https://github.com/facebook/react/pull/28417))
+* Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](https://github.com/facebook/react/pull/28399))
+* chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](https://github.com/facebook/react/pull/28408))
+* [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](https://github.com/facebook/react/pull/28309))
+* [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](https://github.com/facebook/react/pull/28297))
+* fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](https://github.com/facebook/react/pull/28145))
+* DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](https://github.com/facebook/react/pull/28233))
+* Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](https://github.com/facebook/react/pull/28249))
+* DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](https://github.com/facebook/react/pull/28232))
+* DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](https://github.com/facebook/react/pull/27982))
+
+---
+
+### 5.0.0
+November 29, 2023
+
+### Breaking
+* refactor[devtools]: highlight an array of elements for native ([hoxyq](https://github.com/hoxyq) in [#27734](https://github.com/facebook/react/pull/27734))
+
+### Features
+* feat[devtools]: display Forget badge for the relevant components ([hoxyq](https://github.com/hoxyq) in [#27709](https://github.com/facebook/react/pull/27709))
+
+### Other
+* Added windows powershell syntax to build scripts ([PrathamLalwani](https://github.com/PrathamLalwani) in [#27692](https://github.com/facebook/react/pull/27692))
+* refactor[react-devtools-shared]: minor parsing improvements and modifications ([hoxyq](https://github.com/hoxyq) in [#27661](https://github.com/facebook/react/pull/27661))
+
+---
+
+### 4.28.5
+October 18, 2023
+
+#### Bugfixes
+* fix[devtools/useMemoCache]: add stub for useMemoCache in ReactDebugHook ([hoxyq](https://github.com/hoxyq) in [#27472](https://github.com/facebook/react/pull/27472))
+* refactor[react-devtools-extensions]: use globals to eliminate dead code ([hoxyq](https://github.com/hoxyq) in [#27516](https://github.com/facebook/react/pull/27516))
+* fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs ([hoxyq](https://github.com/hoxyq) in [#27488](https://github.com/facebook/react/pull/27488))
+
+---
+
+### 4.28.4
+September 25, 2023
+
+#### Features
+* feat:-Added a delete all filters action and added title to the add filter a… ([Biki-das](https://github.com/Biki-das) in [#27332](https://github.com/facebook/react/pull/27332))
+* feat[devtools/extension]: add dark theme for popup ([rakleed](https://github.com/rakleed) in [#27330](https://github.com/facebook/react/pull/27330))
+
+#### Bugfixes
+* refactor[devtools/extension]: refactored messaging logic across different parts of the extension ([hoxyq](https://github.com/hoxyq) in [#27417](https://github.com/facebook/react/pull/27417))
+* fix[devtools/extension]: added a workaround for proxy content script injection in firefox ([hoxyq](https://github.com/hoxyq) in [#27375](https://github.com/facebook/react/pull/27375))
+* fix[devtools/useTransition]: don't check for dispatch property when determining if hook is stateful ([hoxyq](https://github.com/hoxyq) in [#27365](https://github.com/facebook/react/pull/27365))
+* feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic ([hoxyq](https://github.com/hoxyq) in [#27373](https://github.com/facebook/react/pull/27373))
+* fix[devtools/extension]: unregister dynamically injected content scripts instead of filtering ([hoxyq](https://github.com/hoxyq) in [#27369](https://github.com/facebook/react/pull/27369))
+* refactor[devtools/extension]: more stable element updates polling to avoid timed out errors ([hoxyq](https://github.com/hoxyq) in [#27357](https://github.com/facebook/react/pull/27357))
+
+---
+
+### 4.28.3
+September 5, 2023
+
+* refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [#27336](https://github.com/facebook/react/pull/27336))
+* refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [#27323](https://github.com/facebook/react/pull/27323))
+* fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [#27320](https://github.com/facebook/react/pull/27320))
+
+---
+
+### 4.28.2
+August 30, 2023
+
+#### Bugfixes
+* fix[devtools/extension]: handle tab navigation events before react is loaded ([hoxyq](https://github.com/hoxyq) in [#27316](https://github.com/facebook/react/pull/27316))
+
+---
+
+### 4.28.1
+August 29, 2023
+
+#### Features
+* feat: added open in editor to appear by default ([Biki-das](https://github.com/Biki-das) in [#26949](https://github.com/facebook/react/pull/26949))
+
+#### Bugfixes
+* refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https://github.com/hoxyq) in [#27215](https://github.com/facebook/react/pull/27215))
+* fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https://github.com/hoxyq) in [#27067](https://github.com/facebook/react/pull/27067))
+* refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https://github.com/hoxyq) in [#27179](https://github.com/facebook/react/pull/27179))
+* fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https://github.com/hoxyq) in [#27147](https://github.com/facebook/react/pull/27147))
+* fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https://github.com/hoxyq) in [#27057](https://github.com/facebook/react/pull/27057))
+
+#### Other
+* refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https://github.com/hoxyq) in [#27304](https://github.com/facebook/react/pull/27304))
+
+---
+
+### 4.28.0
+July 4, 2023
+
+#### Features
+* feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [#26951](https://github.com/facebook/react/pull/26951))
+
+#### Bugfixes
+* fix: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [#26983](https://github.com/facebook/react/pull/26983))
+* fix: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [#26947](https://github.com/facebook/react/pull/26947))
+* fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [#25510](https://github.com/facebook/react/pull/25510))
+* fix: supported inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [#26888](https://github.com/facebook/react/pull/26888))
+* fix: updated strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [#26825](https://github.com/facebook/react/pull/26825))
+
+#### Other
+* chore: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [#26887](https://github.com/facebook/react/pull/26887))
+* chore: removed unused CSS ([Biki-das](https://github.com/Biki-das) in [#27032](https://github.com/facebook/react/pull/27032))
+
+---
+
+### 4.27.8
+May 17, 2023
+
+#### Bugfixes
+* Fixed duplicated backend activation with multiple renderers ([hoxyq](https://github.com/hoxyq) in [#26807](https://github.com/facebook/react/pull/26807))
+
+---
+
+### 4.27.7
+May 4, 2023
+
+#### Bugfixes
+* Fixed to work when browser devtools panel is reopened ([hoxyq](https://github.com/hoxyq) in [#26779](https://github.com/facebook/react/pull/26779))
+* Fixed to work in Chrome incognito mode ([hoxyq](https://github.com/hoxyq) in [#26765](https://github.com/facebook/react/pull/26765))
+
+---
+
+### 4.27.6
+April 20, 2023
+
+#### Bugfixes
+* Fixed backend injection logic for undocked devtools window ([mondaychen](https://github.com/mondaychen) in [#26665](https://github.com/facebook/react/pull/26665))
+
+#### Other
+* Use backend manager to support multiple backends in extension ([mondaychen](https://github.com/mondaychen) in [#26615](https://github.com/facebook/react/pull/26615))
+
+---
+
+### 4.27.5
+April 17, 2023
+
+#### Bugfixes
+* Fixed copying to clipboard from context menu on Chrome ([hoxyq](https://github.com/hoxyq) in [#26604](https://github.com/facebook/react/pull/26604))
+* Fixed external link behavior in the standalone app ([Willie-Boy](https://github.com/Willie-Boy) in [#26559](https://github.com/facebook/react/pull/26559))
+
+#### Other
+* Provide icon to edge devtools. ([harrygz889](https://github.com/harrygz889) in [#26543](https://github.com/facebook/react/pull/26543))
+* Forbid editing class instances in props ([hoxyq](https://github.com/hoxyq) in [#26522](https://github.com/facebook/react/pull/26522))
+* Improved script injection logic in browser extension ([mondaychen](https://github.com/mondaychen) in [#26492](https://github.com/facebook/react/pull/26492))
+---
+
+### 4.27.4
+March 24, 2023
+
+#### Bugfixes
+* missing file name in react-devtools package.json for electron ([mondaychen](https://github.com/mondaychen) in [#26469](https://github.com/facebook/react/pull/26469))
+
+---
+
+### 4.27.3
+March 22, 2023
+
+#### Bugfixes
+* prevent StyleX plugin from throwing when inspecting CSS ([mondaychen](https://github.com/mondaychen) in [#26364](https://github.com/facebook/react/pull/26364))
+* remove script tag immediately ([mondaychen](https://github.com/mondaychen) in [#26233](https://github.com/facebook/react/pull/26233))
+
+#### Others
+* upgrade electron to latest version & security improvements ([mondaychen](https://github.com/mondaychen) in [#26337](https://github.com/facebook/react/pull/26337))
+* improve troubleshooting in README ([mondaychen](https://github.com/mondaychen) in [#26235](https://github.com/facebook/react/pull/26235))
+* Remove renderer.js from extension build ([mondaychen](https://github.com/mondaychen) in [#26234](https://github.com/facebook/react/pull/26234))
+* permanently polyfill for rAF in devtools_page ([mondaychen](https://github.com/mondaychen) in [#26193](https://github.com/facebook/react/pull/26193))
+
+---
+
+### 4.27.2
+February 16, 2023
+
+* Replace DevTools `semver` usages with `compare-versions` for smaller bundle size ([markerikson](https://github.com/markerikson) in [#26122](https://github.com/facebook/react/pull/26122))
+* Support highlights for React Native apps in dev tools ([ryancat](https://github.com/ryancat) in [#26060](https://github.com/facebook/react/pull/26060))
+* improve error handling in extension ([mondaychen](https://github.com/mondaychen) in [#26068](https://github.com/facebook/react/pull/26068))
+
+---
+
+### 4.27.1
+December 6, 2022
+
+* [bug fix] revert values in ReactFiberFlags to keep consistency for devtools ([mondaychen](https://github.com/mondaychen) in [#25832](https://github.com/facebook/react/pull/25832))
+
+---
+
+### 4.27.0
+November 28, 2022
+
+#### Features
+* add support for new host type fibers for server components use cases ([mondaychen](https://github.com/mondaychen) in [#25616](https://github.com/facebook/react/pull/25616))
+* [react devtools] Device storage support ([rbalicki2](https://github.com/rbalicki2) in [#25452](https://github.com/facebook/react/pull/25452))
+* upgrade to Manifest V3 ([mondaychen](https://github.com/mondaychen) in [#25145](https://github.com/facebook/react/pull/25145))
+
+#### Bugfixes
+* bug fix for Hydrating fibers ([mondaychen](https://github.com/mondaychen) in [#25663](https://github.com/facebook/react/pull/25663))
+
+
+
+---
+
+### 4.26.1
+October 13, 2022
+
+* [standalone] Stop highlighting events when a component is selected ([tyao1](https://github.com/tyao1) in [#25448](https://github.com/facebook/react/pull/25448))
+
+---
+
+### 4.26.0
+September 16, 2022
+
+* Show DevTools icons in Edge browser panel ([itskolli](https://github.com/itskolli) in [#25257](https://github.com/facebook/react/pull/25257))
+* [Bugfix] Don't hide fragment if it has a key ([lunaruan](https://github.com/lunaruan) in [#25197](https://github.com/facebook/react/pull/25197))
+* Handle info, group, and groupCollapsed in Strict Mode logging ([timneutkens](https://github.com/timneutkens) in [#25172](https://github.com/facebook/react/pull/25172))
+* Highlight RN elements on hover ([tyao1](https://github.com/tyao1) in [#25106](https://github.com/facebook/react/pull/25106))
+* Remove ForwardRef/Memo from display name if `displayName` is set ([eps1lon](https://github.com/eps1lon) in [#21952](https://github.com/facebook/react/pull/21952))
+
+---
+
+### 4.25.0
+July 13, 2022
+
+* Timeline Profiler Sidebar with component tree ([lunaruan](https://github.com/lunaruan) and [blakef](https://github.com/blakef) in [#24816](https://github.com/facebook/react/pull/24816), [#24815](https://github.com/facebook/react/pull/24815), [#24814](https://github.com/facebook/react/pull/24814), [#24805](https://github.com/facebook/react/pull/24805), [#24776](https://github.com/facebook/react/pull/24776))
+* [DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees ([lunaruan](https://github.com/lunaruan) in [#24863](https://github.com/facebook/react/pull/24863))
+* Enable "reload & profile" button for timeline view ([mondaychen](https://github.com/mondaychen) in [#24702](https://github.com/facebook/react/pull/24702))
+* Find best renderer when inspecting app with mutilple react roots ([mondaychen](https://github.com/mondaychen) in [#24665](https://github.com/facebook/react/pull/24665))
+* Only polyfill requestAnimationFrame when necessary ([mondaychen](https://github.com/mondaychen) in [#24651](https://github.com/facebook/react/pull/24651))
+
+---
+
+### 4.24.7
+May 31, 2022
+
+* mock requestAnimationFrame with setTimeout as a temporary fix for #24626 ([mondaychen](https://github.com/mondaychen) in [#24633](https://github.com/facebook/react/pull/24633))
+* Fix formatWithStyles not styling the results if the first argument is an object + Added unit tests ([lunaruan](https://github.com/lunaruan) in [#24554](https://github.com/facebook/react/pull/24554))
+
+---
+
+### 4.24.6
+May 12, 2022
+
+* fix a bug in console.log with non-string args ([mondaychen](https://github.com/mondaychen) in [#24546](https://github.com/facebook/react/pull/24546))
+* Add Pragma to Only Run Tests if Version Requirement Satisfied ([lunaruan](https://github.com/lunaruan) in [#24533](https://github.com/facebook/react/pull/24533))
+* [DevTools][Bug] Fix Race Condition When Unmounting Fibers ([lunaruan](https://github.com/lunaruan) in [#24510](https://github.com/facebook/react/pull/24510))
+* [React DevTools] Improve DevTools UI when Inspecting a user Component that Throws an Error  ([mondaychen](https://github.com/mondaychen) in [#24248](https://github.com/facebook/react/pull/24248))
+
+---
+
+### 4.24.5
+May 5, 2022
+
+* Fixed potential undefined error in `TreeContext` reducer ([bvaughn](https://github.com/bvaughn) in [#24501](https://github.com/facebook/react/pull/24501))
+* Fix error where Profiler sometimes incorrectlyed reported that a `forwardRef` did not render ([lunaruan](https://github.com/lunaruan) in [#24494](https://github.com/facebook/react/pull/24494))
+* Fix regex for `formateWithStyles` function ([lunaruan](https://github.com/lunaruan) in [#24486](https://github.com/facebook/react/pull/24486))
+* Fixed wrong method call for LRU cache ([bvaughn](https://github.com/bvaughn) in [#24477](https://github.com/facebook/react/pull/24477))
+* Synchronize implementations of second render logging ([billyjanitsch](https://github.com/billyjanitsch) in [#24381](https://github.com/facebook/react/pull/24381))
+* Don't stringify objects for console log second render ([lunaruan](https://github.com/lunaruan) in [#24373](https://github.com/facebook/react/pull/24373))
+
+---
+
+### 4.24.4
+April 8, 2022
+
+* Allow react-devtools-inline `createStore()` method to override Store config params ([bvaughn](https://github.com/bvaughn) in [#24303](https://github.com/facebook/react/pull/24303))
+* [ReactDebugTools] wrap uncaught error from rendering user's component ([mondaychen](https://github.com/mondaychen) in [#24216](https://github.com/facebook/react/pull/24216))
+
+---
+
+### 4.24.3
+March 29, 2022
+
+#### Bugfix
+* Profiler should only report stateful hooks that change between renders ([bvaughn](https://github.com/bvaughn) in [#24189](https://github.com/facebook/react/pull/24189))
+* Ignore duplicate welcome "message" events ([bvaughn](https://github.com/bvaughn) in [#24186](https://github.com/facebook/react/pull/24186))
+* Attach DevTools Tree keyboard events to the Tree container (not the document) ([bvaughn](https://github.com/bvaughn) in [#24164](https://github.com/facebook/react/pull/24164))
+
+---
+
+### 4.24.2
+March 24, 2022
+
+#### Bugfix
+* Show upgrade/downgrade instructions inline for errors thrown by the Store due to incompatible protocol (mismatched backend and frontend versions) ([bvaughn](https://github.com/bvaughn) in [#24147](https://github.com/facebook/react/pull/24147))
+* Inspecting an element in a nested renderer no longer throws ([lunaruan](https://github.com/lunaruan) in [#24116](https://github.com/facebook/react/pull/24116))
+
+---
+
+### 4.24.1
+March 15, 2022
+
+#### Bugfix
+* Disable unsupported Bridge protocol version dialog and add workaround for old protocol operations format ([bvaughn](https://github.com/bvaughn) in [#24093](https://github.com/facebook/react/pull/24093))
+
+---
+
+### 4.24.0
+March 10, 2022
+
+#### Feature
+* Show DevTools backend and frontend versions in UI ([bvaughn](https://github.com/bvaughn) in [#23399](https://github.com/facebook/react/pull/23399))
+* Timeline profiler refactored to support reading basic profiling data directly from React ([bvaughn](https://github.com/bvaughn) in [#22529](https://github.com/facebook/react/issues/22529))
+
+#### Bugfix
+* Better handle undefined `Error` stacks in DevTools error boundary ([bvaughn](https://github.com/bvaughn) in [#24065](https://github.com/facebook/react/pull/24065))
+* Fixed edge case bug in Profiler commit filtering ([bvaughn](https://github.com/bvaughn) in [#24031](https://github.com/facebook/react/pull/24031))
+* Gracefully handle empty "xstyle" prop values ([lunaruan](https://github.com/lunaruan) in [#23279](https://github.com/facebook/react/pull/23279) and [bvaughn](https://github.com/bvaughn) in [#23190](https://github.com/facebook/react/pull/23190))
+* Add `<TracingMarker>` component boilerplate ([lunaruan](https://github.com/lunaruan) in [#23275](https://github.com/facebook/react/pull/23275))
+
+#### Misc
+* Remove object-assign polyfill ([sebmarkbage](https://github.com/sebmarkbage) in [#23351](https://github.com/facebook/react/pull/23351))
+
+#### Breaking change
+* Move createRoot/hydrateRoot to react-dom/client ([sebmarkbage](https://github.com/sebmarkbage) in [#23385](https://github.com/facebook/react/pull/23385)).
+
+Technically this is a breaking change for projects using `react-devtools-inline`, but since this package already depends on the _experimental_ release channel, we are going to include it in 4.24.
+
+---
+
+### 4.23.0
+January 24, 2022
+
+#### Feature
+* DevTools: Only show StrictMode badge on root elements ([bvaughn](https://github.com/bvaughn) in [#23012](https://github.com/facebook/react/pull/23012))
+
+#### Bugfix
+* Don't crawl unmounted subtrees when profiling starts ([bvaughn](https://github.com/bvaughn) in [#23162](https://github.com/facebook/react/pull/23162))
+* Filter deleted components from the updaters list to avoid runtime errors later ([lunaruan](https://github.com/lunaruan) in [#23156](https://github.com/facebook/react/pull/23156))
+
+#### Misc
+* DevTools (not React) logs Timeline performance data to the User Timing API ([bvaughn](https://github.com/bvaughn) in [#23102](https://github.com/facebook/react/pull/23102))
+
+---
+
+### 4.22.1
+December 14, 2021
+
+* Fix invalid `require()` statements in `react-devtools-inline` ([bvaughn](https://github.com/bvaughn) in [#22961](https://github.com/facebook/react/pull/22961))
+* Fix invalid `files` array in `react-devtools` `package.json` ([bvaughn](https://github.com/bvaughn) in [#22960](https://github.com/facebook/react/pull/22960))
+
+---
+
+### 4.22.0
+December 13, 2021
+
+#### A note for React Native users
+React DevTools has [two main pieces](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#overview):
+* The *frontend* users interact with (the Components tree, the Profiler, etc.).
+* The *backend* which runs in the same context as React itself. (In the web page with React DOM or shipped on the device with the React Native runtime.)
+
+This release updates the [**protocol** that DevTools uses](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#serializing-the-tree) to communicate between the "frontend" and "backend" components.
+
+Because React Native embeds a copy of the React DevTools "backend" ([`react-devtools-core/backend`](https://www.npmjs.com/package/react-devtools-core)), the "frontend" (UI) needs to match. This means you may be prompted to upgrade (or downgrade) your React DevTools based on which version of React Native your app uses.
+
+#### Features
+* Support multiple DevTools instances per page ([@bvaughn](https://github.com/bvaughn) in [#22949](https://github.com/facebook/react/pull/22949))
+* Advocate for StrictMode usage within Components tree ([@bvaughn](https://github.com/bvaughn) in [#22886](https://github.com/facebook/react/pull/22886))
+* StyleX plug-in for resolving atomic styles to values for props.xstyle ([@bvaughn](https://github.com/bvaughn) in [#22808](https://github.com/facebook/react/pull/22808))
+* Timeline search ([@bvaughn](https://github.com/bvaughn) in [#22799](https://github.com/facebook/react/pull/22799))
+* Timeline: Improved snapshot view ([@bvaughn](https://github.com/bvaughn) in [#22706](https://github.com/facebook/react/pull/22706))
+* Display root type for root updates in "what caused this update?" ([@eps1lon](https://github.com/eps1lon) in [#22599](https://github.com/facebook/react/pull/22599))
+
+#### Bugfix
+* DevTools should inject itself for XHTML pages too (not just HTML) ([@bvaughn](https://github.com/bvaughn) in [#22932](https://github.com/facebook/react/pull/22932))
+* Don't restore profiling data if we're profling ([@eps1lon](https://github.com/eps1lon) in [#22753](https://github.com/facebook/react/pull/22753))
+* DevTools should properly report re-renders due to (use)context changes ([@bvaughn](https://github.com/bvaughn) in [#22746](https://github.com/facebook/react/pull/22746))
+* Filter empty commits (all Fibers bailed out) from Profiler ([@bvaughn](https://github.com/bvaughn) in [#22745](https://github.com/facebook/react/pull/22745))
+* Accept json file in import fileinput ([@jyash97](https://github.com/jyash97) in [#22717](https://github.com/facebook/react/pull/22717))
+* Expose css vars to reach-ui portal components ([@jyash97](https://github.com/jyash97) in [#22716](https://github.com/facebook/react/pull/22716))
+* Fix DevTools advanced tooltip display conditional check ([@bvaughn](https://github.com/bvaughn) in [#22669](https://github.com/facebook/react/pull/22669))
+
+#### Misc
+* Emit new event when DevTools connects in standalone app ([@jstejada](https://github.com/jstejada) in [#22848](https://github.com/facebook/react/pull/22848))
+
+---
+
+### 4.21.0
+October 31, 2021
+
+#### Features
+* Scheduling Profiler: Add marks for component effects (mount and unmount) ([@bvaughn](https://github.com/bvaughn) in [#22578](https://github.com/facebook/react/pull/22578))
+* Scheduling Profiler: De-emphasize React internal frames ([bvaughn](https://github.com/bvaughn) in [#22588](https://github.com/facebook/react/pull/22588))
+
+
+#### Bugfix
+* Revert logic for checking for duplicate installations of DevTools potentially causing issues loading Components tab ([@jstejada](https://github.com/jstejada) in [#22638](https://github.com/facebook/react/pull/22638))
+* Scheduling Profiler does not warn about long transitions ([@bvaughn](https://github.com/bvaughn) in [#22614](https://github.com/facebook/react/pull/22614))
+* Re-enable 'Reload and Start Profiling' for Microsoft Edge ([@eoandersson](https://github.com/eoandersson) in [#22631](https://github.com/facebook/react/pull/22631))
+
+
+#### Misc
+* DevTools supports ENV-injected version for better internal bug reports ([@bvaughn](https://github.com/bvaughn) in [#22635](https://github.com/facebook/react/pull/22635))
+* Fix typos ([@KonstHardy](https://github.com/KonstHardy) in [#22494](https://github.com/facebook/react/pull/22494))
+
+---
+
+### 4.20.2
+October 20, 2021
+
+#### Bugfix
+* Dev Tools: Relax constraint on passing extensionId for backend init ([@jstejada](https://github.com/jstejada) in [#22597](https://github.com/facebook/react/pull/22597))
+* DevTools: Fix passing extensionId in evaled postMessage calls ([@jstejada](https://github.com/jstejada) in [#22590](https://github.com/facebook/react/pull/22590))
+
+---
+
+### 4.20.1
+October 19, 2021
+
+#### Bugfix
+* Only show DevTools warning about unrecognized build in Chrome ([@jstejada](https://github.com/jstejada) in [#22571](https://github.com/facebook/react/pull/22571))
+* DevTools: Include Edge in browser name detection ([@jstejada](https://github.com/jstejada) in [#22584](https://github.com/facebook/react/pull/22584))
+
+---
+
+### 4.20.0
+October 15, 2021
+
+#### Features
+* Allow to use the Profiler when no client is connected in standalone DevTools ([@gabrieltrompiz](https://github.com/gabrieltrompiz) in [#22551](https://github.com/facebook/react/pull/22551))
+
+#### Bugfix
+* Surface backend errors during inspection in the frontend UI ([@bvaughn](https://github.com/bvaughn) in [#22546](https://github.com/facebook/react/pull/22546))
+* Prevent splash page in standalone app from becoming unresponsive after the disconnection of a client  (#22558) ([@gabrieltrompiz](https://github.com/gabrieltrompiz) in [#22560](https://github.com/facebook/react/pull/22560))
+* Prevent errors/crashing when multiple installs of DevTools are present ([@jstejada](https://github.com/jstejada) in [#22517](https://github.com/facebook/react/pull/22517))
+* Update Fiber logic in backend renderer to match implementation in React ([@jstejada](https://github.com/jstejada) in [#22527](https://github.com/facebook/react/pull/22527))
+
+#### Misc
+* Show warning in UI when duplicate installations of DevTools extension are detected ([@jstejada](https://github.com/jstejada) in [#22563](https://github.com/facebook/react/pull/22563))
+* Improved filenames of built worker files ([@akgupta0777](https://github.com/akgupta0777) in [#22559](https://github.com/facebook/react/pull/22559))
+
+---
+
+### 4.19.2
+October 8, 2021
+
+#### Bugfix
+* Show different error boundary UI for timeouts than normal errors ([bvaughn](https://github.com/bvaughn) in [#22483](https://github.com/facebook/react/pull/22483))
+* Fixed bug where deleting a component filter would also close the settings modal ([Biki-das](https://github.com/Biki-das) in [#22484](https://github.com/facebook/react/pull/22484))
+
+---
+
+### 4.19.1
+October 1, 2021
+
+#### Bugfix
+* Fixed potential cache miss when inspecting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
+
+---
+
+### 4.19.0
+September 29, 2021
+
+#### Features
+* Scheduling Profiler: Show Suspense resource .displayName ([bvaughn](https://github.com/bvaughn) in [#22451](https://github.com/facebook/react/pull/22451))
+* Scheduling Profiler marks should include thrown Errors ([bvaughn](https://github.com/bvaughn) in [#22419](https://github.com/facebook/react/pull/22419))
+* Don't patch console during first render in strict mode ([lunaruan](https://github.com/lunaruan) in [#22308](https://github.com/facebook/react/pull/22308))
+* Show which hook indices changed when profiling for all builds ([bvaughn](https://github.com/bvaughn) in [#22365](https://github.com/facebook/react/pull/22365))
+* Display actual ReactDOM API name in root type ([eps1lon](https://github.com/eps1lon) in [#22363](https://github.com/facebook/react/pull/22363))
+* Add named hooks support to standalone and inline DevTools ([jstejada](https://github.com/jstejada) in [#22320](https://github.com/facebook/react/pull/22320) and [bvaughn](https://github.com/bvaughn) in [#22263](https://github.com/facebook/react/pull/22263))
+#### Bugfix
+* DevTools encoding supports multibyte characters (e.g. "🟩") ([bvaughn](https://github.com/bvaughn) in [#22424](https://github.com/facebook/react/pull/22424))
+* Improve DEV errors if string coercion throws (Temporal.*, Symbol, etc.) ([justingrant](https://github.com/justingrant) in [#22064](https://github.com/facebook/react/pull/22064))
+* Fix memory leak caused by not storing alternate Fiber pointer ([bvaughn](https://github.com/bvaughn) in [#22346](https://github.com/facebook/react/pull/22346))
+* Fix call stack exceeded error in `utfDecodeString()` ([bvaughn](https://github.com/bvaughn) in [#22330](https://github.com/facebook/react/pull/22330))
+* Fix runtime error when inspecting an element times out ([jstejada](https://github.com/jstejada) in [#22329](https://github.com/facebook/react/pull/22329))
+
+#### Performance
+* DevTools: Lazily parse indexed map sections ([bvaughn](https://github.com/bvaughn) in [#22415](https://github.com/facebook/react/pull/22415))
+* DevTools: Hook names optimizations ([bvaughn](https://github.com/bvaughn) in [#22403](https://github.com/facebook/react/pull/22403))
+* Replaced `network.onRequestFinished()` caching with `network.getHAR()` ([bvaughn](https://github.com/bvaughn) in [#22285](https://github.com/facebook/react/pull/22285))
+
+---
+
+### 4.18.0
+September 1, 2021
+
+#### Features
+* DevTools: Improve named hooks network caching ([bvaughn](https://github.com/bvaughn) in [#22198](https://github.com/facebook/react/pull/22198))
+* Console Logging for StrictMode Double Rendering ([lunaruan](https://github.com/lunaruan) in [#22030](https://github.com/facebook/react/pull/22030))
+
+---
+
+### Bugfix
+* Fix react-devtools-inline size issues ([lunaruan](https://github.com/lunaruan) in [#22232](https://github.com/facebook/react/pull/22232))
+* devtools: Don't display hook index of useContext ([eps1lon](https://github.com/eps1lon) in [#22200](https://github.com/facebook/react/pull/22200))
+* Throw error in console without interfering with logs ([lunaruan](https://github.com/lunaruan) in [#22175](https://github.com/facebook/react/pull/22175))
+
+
+---
+
+### 4.17.0
+August 24, 2021
+
+#### Features
+* Scheduling Profiler: Add network measures ([bvaughn](https://github.com/bvaughn) in [#22112](https://github.com/facebook/react/pull/22112))
+* Add options for disabling some features ([hbenl](https://github.com/hbenl) in [#22136](https://github.com/facebook/react/pull/22136))
+
+#### Bugfix
+* Fixed broken scroll-to error or warning feature ([bvaughn](https://github.com/bvaughn) and [eps1lon](https://github.com/eps1lon) in [#22147](https://github.com/facebook/react/pull/22147) and [#22144](https://github.com/facebook/react/pull/22144))
+* Replaced WeakMap with LRU for inspected element cache ([bvaughn](https://github.com/bvaughn) in [#22160](https://github.com/facebook/react/pull/22160))
+* Add more detailed error handling if profiling data does not have any React marks ([byronluk](https://github.com/byronluk) in [#22157](https://github.com/facebook/react/pull/22157))
+* Various named hooks bug fixes ([jstejada](https://github.com/jstejada) in [#22129](https://github.com/facebook/react/pull/22129), [#22128](https://github.com/facebook/react/pull/22128), [#22096](https://github.com/facebook/react/pull/22096), and [#22148](https://github.com/facebook/react/pull/22148))
+* Fix tooltip wheel event regression ([bvaughn](https://github.com/bvaughn) in [#22130](https://github.com/facebook/react/pull/22130))
+* Replace `source-map` library with `source-map-js` for named hooks source map parsing ([bvaughn](https://github.com/bvaughn) in [#22126](https://github.com/facebook/react/pull/22126))
+
+---
+
+### 4.16.0
+August 16, 2021
+#### Features
+* Scheduling Profiler: Inline snapshots ([bvaughn](https://github.com/bvaughn) in [#22091](https://github.com/facebook/react/pull/22091) and[bvaughn](https://github.com/bvaughn) in [#22088](https://github.com/facebook/react/pull/22088))
+#### Bugfix
+* split parsing code to unblock Firefox release ([lunaruan](https://github.com/lunaruan) in [#22102](https://github.com/facebook/react/pull/22102))
+* Scheduling profiler: Canvas views clip by default ([bvaughn](https://github.com/bvaughn) in [#22100](https://github.com/facebook/react/pull/22100))
+* Fixed Components tree indentation bug for Chrome extension ([bvaughn](https://github.com/bvaughn) in [#22083](https://github.com/facebook/react/pull/22083))
+
+---
+
+### 4.15.0
+August 11, 2021
+
+#### Features
+* Added new scheduling profiler tool ([bvaughn](https://github.com/bvaughn), [kartikcho](https://github.com/kartikcho), and [taneliang](https://github.com/taneliang) in [#22006](https://github.com/facebook/react/pull/22006), [#21990](https://github.com/facebook/react/pull/21990), [#22013](https://github.com/facebook/react/pull/22013), [#21897](https://github.com/facebook/react/pull/21897), [#22029](https://github.com/facebook/react/pull/22029), [#22038](https://github.com/facebook/react/pull/22038), [#22043](https://github.com/facebook/react/pull/22043), [#21947](https://github.com/facebook/react/pull/21947), [#21966](https://github.com/facebook/react/pull/21966), [#21970](https://github.com/facebook/react/pull/21970), [#21971](https://github.com/facebook/react/pull/21971), [#21975](https://github.com/facebook/react/pull/21975)).
+* Parsing source code for extracting names for hooks now happens in a worker ([tsirlucas](https://github.com/tsirlucas) in [#21902](https://github.com/facebook/react/pull/21902)).
+* Format hyperlink text as a clickable link ([kkragoth](https://github.com/kkragoth) in [#21964](https://github.com/facebook/react/pull/21964)).
+* Named hooks can now be extracted from extended source maps ([jstejada](https://github.com/jstejada) [#22010](https://github.com/facebook/react/pull/22010), [#22073](https://github.com/facebook/react/pull/22073)).
+* Hook indices now show up as a reason why a component rendered in the profiler ([mrkev](https://github.com/mrkev) in [#22073](https://github.com/facebook/react/pull/22073)).
+* Optimize images in DevTools ([ilhamsyahids](https://github.com/ilhamsyahids) in [#21968](https://github.com/facebook/react/pull/21968)).
+
+#### Bugfix
+* Named hooks cache is correctly cleared after Fast Refresh ([bvaughn](https://github.com/bvaughn) in [#21891](https://github.com/facebook/react/pull/21891)).
+* Hook names are correctly extracted when parsing nested hook calls ([jstejada](https://github.com/jstejada) in [#22037](https://github.com/facebook/react/pull/22037), [#21996](https://github.com/facebook/react/pull/21996)).
+* Highlight updates with memoized components ([Selnapenek](https://github.com/Selnapenek) in [#22008](https://github.com/facebook/react/pull/22008)).
+* Set app icon on MacOS ([christian-schulze](https://github.com/christian-schulze) in [#21908](https://github.com/facebook/react/pull/21908)).
+* Updated @reach packages to fix unmount bug ([bvaughn](https://github.com/bvaughn) in [#22075](https://github.com/facebook/react/pull/22075)).
+
+#### Misc
+* Refactor imperative theme code ([houssemchebeb](https://github.com/houssemchebeb) in [#21950](https://github.com/facebook/react/pull/21950)).
+* Change some remaining instances of master -> main ([shubham9411](https://github.com/shubham9411) in [#21982](https://github.com/facebook/react/pull/21982)).
+
+##### Scheduling profiler
+
+###### What is React working on?
+
+React’s previous Profiler primarily reports how fast (or slow) components are when rendering. It didn’t provide an overview of *what React is doing* (the actual cooperative scheduling bits). The new profiler does. It shows when components schedule state updates and when React works on them. It also shows how React categorizes and prioritizing what it works on.
+
+Here’s a profile for a simple app that uses only the legacy (synchronous) `ReactDOM.render` API. The profiler shows that all of the work scheduled and rendered by this app is done at *synchronous* priority:
+
+https://user-images.githubusercontent.com/29597/129042321-56985f5a-264e-4f3a-a8b7-9371d75c690f.mp4
+
+Here’s a more interesting profile for an app that’s rendered at _default_ priority using the new [`createRoot` API](https://github.com/reactwg/react-18/discussions/5), then updates _synchronously_ in response to an “input” event to manage a ["controlled component"](https://reactjs.org/docs/forms.html#controlled-components):
+
+https://user-images.githubusercontent.com/29597/129074959-50912a63-0215-4be5-b51b-1e0004fcd2a1.mp4
+
+Here’s part of a profile showing an idle app (no JavaScript running). In this case, React does some pre-rendering work for components that are “offscreen” (not currently displayed).
+
+https://user-images.githubusercontent.com/29597/128971757-612f232f-c64f-4447-a766-66a0516e8f49.mp4
+
+Note that “offscreen” refers to a new API and set of features that we haven’t talked about much yet except for [some passing references](https://github.com/reactwg/react-18/discussions/18#discussioncomment-795661). We’ll talk more about it in future posts.
+
+###### What are “transitions” and how do they work?
+We recently shared an update about the new [`startTransition` API](https://github.com/reactwg/react-18/discussions/41). This API helps apps feel responsive even when there are large updates by splitting the work into (1) a quick update to show that the app has received some input and (2) a slower update (the “transition”) that actually does any heavy lifting needed as a result of the input.
+
+Here is an example profile that uses the transition API. First React renders a small update that shows the user some visual feedback (like updating a controlled component or showing an inline loading indicator). Then it renders a larger update that, in this case, computes some expensive value.
+
+https://user-images.githubusercontent.com/29597/129079176-0995c8c0-e95a-4f44-8d55-891a7efa35c0.mp4
+
+###### How does Suspense impact rendering performance?
+
+You may have heard mention of “suspense” in past talks or seen it referenced [in our docs](https://reactjs.org/docs/react-api.html#suspense). Although full support for data fetching via Suspense is [expected to be released sometime after React 18.0](https://github.com/reactwg/react-18/discussions/47#discussioncomment-847004), you can use Suspense today for things like lazy-loading React components. The new profiler shows when components suspend during render and how that impacts overall rendering performance.
+
+Here’s an example profile that suspends during the initial render to lazy-load a component using [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy). While this component is loading, React shows a “fallback“ (placeholder UI). Once the component finishes loading, React retries the render and commits the final UI.
+
+https://user-images.githubusercontent.com/29597/129054366-2700e7e8-0172-4f61-9453-475acd740456.mp4
+
+We plan to expand support for Suspense in the coming weeks to more explicitly show when suspense fallbacks are rendered and which subsequent renders are related to an initial update that suspended.
+
+###### What else might cause a render to get delayed?
+
+Suspense can cause a render to get delayed as React waits for data to load, but React can also get stuck waiting on a lot of JavaScript to run.
+
+React profiling tools have previously focused on only reporting what React (or React components) are doing, but any JavaScript the browser runs affects performance. The new profiler shows non-React JavaScript as well, making it easy to see when it delays React from rendering.
+
+https://user-images.githubusercontent.com/29597/128971952-7c4e7e11-f4fb-497e-b643-4d9b3994b590.mp4
+
+###### What can you do to improve performance?
+
+Until now, DevTools (and the Profiler) has provided information without commentary. The new profiler takes a more active approach– highlighting where we think performance can be improved and providing suggestions.
+
+For example, suspending during an update is generally a bad user experience because it causes previously shown components to be unmounted (hidden) so the fallback can be shown while data loads. This can be avoided using the new [Transition API](https://github.com/reactwg/react-18/discussions/41). If you forget to add a transition to an update that suspends, the new profiler will warn you about this:
+
+https://user-images.githubusercontent.com/29597/128972228-3b23f01a-8017-43ad-b371-975ffed26c06.mp4
+
+The new profiler also warns about scheduling a long, synchronous React update inside of event handler.
+
+https://user-images.githubusercontent.com/29597/128972000-d7477ba3-b779-46f2-b141-aaa712e9d6d2.mp4
+
+Another thing the new profiler will warn about is long-running renders scheduled from layout effects (`useLayoutEffect` or `componentDidMount`/`componentDidUpdate`). These updates (called “nested updates”) are sometimes necessary to adjust layout before the browser paints, but they should be *fast*. Slow nested updates make the browser feel unresponsive.
+
+https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c5-271f255c8087.mp4
+
+---
+
+### 4.14.0
+July 17, 2021
+#### Features
+* Display hook names for inspected components ([saphal1998](https://github.com/saphal1998), [VibhorCodecianGupta](https://github.com/VibhorCodecianGupta), [bvaughn](https://github.com/bvaughn), and [motiz88](https://github.com/motiz88) in [#21641](https://github.com/facebook/react/pull/21641), [#21790](https://github.com/facebook/react/pull/21790), [#21814](https://github.com/facebook/react/pull/21814), [#21815](https://github.com/facebook/react/pull/21815), [#21831](https://github.com/facebook/react/pull/21831), [#21833](https://github.com/facebook/react/pull/21833), [#21835](https://github.com/facebook/react/pull/21835), [#21865](https://github.com/facebook/react/pull/21865), [#21871](https://github.com/facebook/react/pull/21871), [#21874](https://github.com/facebook/react/pull/21874), [#21891](https://github.com/facebook/react/pull/21891))
+* Control for manually toggling error boundaries ([baopham](https://github.com/baopham) in [#21583](https://github.com/facebook/react/pull/21583))
+* Allow user to manually enter Profiler commit number to jump between commits ([srubin](https://github.com/srubin) in [#19957](https://github.com/facebook/react/pull/19957))
+
+##### Display hook names for inspected components
+![DevTools parsing hook names](https://user-images.githubusercontent.com/29597/124013541-68c2cb00-d9b0-11eb-83ab-81a5180da46b.gif)
+
+##### Control for manually toggling error boundaries
+![DevTools error boundary toggle](https://user-images.githubusercontent.com/29597/125891522-30f0d99d-407f-4c31-b5a7-e9d0bd3fa554.gif)
+
+---
+
+### 4.13.5
+May 25, 2021
+#### Bugfix
+* Handle edge case where a component mounts before its "owner" (in DEV mode) that previously caused a validation error ([bvaughn](https://github.com/bvaughn) in [#21562](https://github.com/facebook/react/pull/21562))
+
+---
+
+### 4.13.4
+May 20, 2021
+#### Bugfix
+* Fix edge-case Fast Refresh bug that caused Fibers with warnings/errors to be untracked prematurely (which broke componentinspection in DevTools) ([bvaughn](https://github.com/bvaughn) in [#21536](https://github.com/facebook/react/pull/21536))
+* Revert force deep re-mount when Fast Refresh detected (was no longer necessary) ([bvaughn](https://github.com/bvaughn) in [#21539](https://github.com/facebook/react/pull/21539))
+
+---
+
+### 4.13.3
+May 19, 2021
+#### Misc
+* Updated `react` and `react-dom` API imports in preparation for upcoming stable release ([bvaughn](https://github.com/bvaughn) in [#21488](https://github.com/facebook/react/pull/21488))
+
+#### Bugfix
+* Reload all roots after Fast Refresh force-remount (to avoid corrupted Store state) ([bvaughn](https://github.com/bvaughn) in [#21516](https://github.com/facebook/react/pull/21516) and [#21523](https://github.com/facebook/react/pull/21523))
+* Errors thrown by Store can be dismissed so DevTools remain usable in many cases ([bvaughn](https://github.com/bvaughn) in [#21520](https://github.com/facebook/react/pull/21520))
+* Bugfix for `useState()` object with `hasOwnProperty` key ([bvaughn](https://github.com/bvaughn) in [#21524](https://github.com/facebook/react/pull/21524))
+* Fixed string concatenation problem when a `Symbol` was logged to `console.error` or `console.warn` ([bvaughn](https://github.com/bvaughn) in [#21521](https://github.com/facebook/react/pull/21521))
+* DevTools: Fixed version range NPM syntax
+ ([bvaughn](https://github.com/bvaughn) in [9cf1069](https://github.com/facebook/react/commit/9cf1069ffc5f3835506e314ef8c2e80bbfa8bdca#diff))
+* Tweaked DevTools error template title to match issue form template ([bvaughn](https://github.com/bvaughn) in [1a2d792](https://github.com/facebook/react/commit/1a2d7925035531e5767ff31ff8d0d581b5f94d49))
+
+---
+
+### 4.13.2
+May 7, 2021
+#### Misc
+* Improved bug report template to use new [GitHub issue forms](https://gh-community.github.io/issue-template-feedback/structured/) ([bvaughn](https://github.com/bvaughn) in [#21450](https://github.com/facebook/react/pull/21450))
+
+---
+
+### 4.13.1
+April 28, 2021
+#### Bugfix
+* Improve display name logic for `React.memo` components ([bvaughn](https://github.com/bvaughn) in [#21392](https://github.com/facebook/react/pull/21392))
+* Fixed potential runtime error with Suspense in versions <= 17 ([bvaughn](https://github.com/bvaughn) in [#21432](https://github.com/facebook/react/pull/21432))
+* Errors thrown in the Store are no longer silent ([bvaughn](https://github.com/bvaughn) in [#21426](https://github.com/facebook/react/pull/21426))
+
+#### Misc
+* Improved bug report template ([bvaughn](https://github.com/bvaughn) in [#21413](https://github.com/facebook/react/pull/21413)), [#21421](https://github.com/facebook/react/pull/21421))
+
+---
+
+### 4.13.0
+April 28, 2021
+#### Features
+* Add Bridge protocol version backend/frontend ([bvaughn](https://github.com/bvaughn) in [#21331](https://github.com/facebook/react/pull/21331))
+
+#### Bugfix
+* DevTools iterates over siblings during mount (rather than recursing) to avoid stack overflow errors ([bvaughn](https://github.com/bvaughn) in [#21377](https://github.com/facebook/react/pull/21377))
+* Multiple error dialogs can be visible at once ([bvaughn](https://github.com/bvaughn) in [#21370](https://github.com/facebook/react/pull/21370))
+* Console patching should handle Symbols without erroring ([bvaughn](https://github.com/bvaughn) in [#21368](https://github.com/facebook/react/pull/21368))
+
+###### Bridge protocol version backend/frontend
+During initialization, DevTools now checks to ensure it's compatible with the ["backend"](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#overview) that's embedded within a renderer like React Native. If the two aren't compatible, upgrade instructions will be shown:
+
+<img width="400" height="233" alt="Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version" src="https://user-images.githubusercontent.com/29597/115997927-f77f2a00-a5b2-11eb-9098-20042b664cea.png">
+    
+<img width="400" height="233" alt="Dialog displaying upgrade instructions for the React DevTools frontend to connect to a newer backend version" src="https://user-images.githubusercontent.com/29597/115997965-167dbc00-a5b3-11eb-9cbc-082c65077a6e.png">
+
+Learn more about this change at [fb.me/devtools-unsupported-bridge-protocol](https://fb.me/devtools-unsupported-bridge-protocol)
+
+---
+
+### 4.12.4
+April 19, 2021
+#### Bugfix
+* Remove `@octokit/rest` dependency because of a problem with transitive dependencies ([bvaughn](https://github.com/bvaughn) in [#21317](https://github.com/facebook/react/pull/21317))
+
+---
+
+### 4.12.3
+April 19, 2021
+#### Bugfix
+* Wrapped quotation marks around Fiber ids or indices for all DevTools errors to better support GitHub fuzzy error search ([bvaughn](https://github.com/bvaughn) in [#21314](https://github.com/facebook/react/pull/21314))
+
+---
+
+### 4.12.2
+April 16, 2021
+#### Bugfix
+* DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21301](https://github.com/facebook/react/pull/21301))
+
+---
+
+### 4.12.1
+April 14, 2021
+Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
+#### Bugfix
+* Fixed `react-devtools-inline` bug in frontend `initialize` method ([bvaughn](https://github.com/bvaughn) in [#21265](https://github.com/facebook/react/pull/21265))
+
+---
+
+### 4.12.0
+April 12, 2021
+Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
+#### Features
+* Added `createBridge` and `createStore` exports to the `react-devtools-inline/frontend` entrypoint to support advanced use cases ([bvaughn](https://github.com/bvaughn) in [#21032](https://github.com/facebook/react/pull/21032))
+
+---
+
+### 4.11.1
+April 11, 2021
+#### Bugfix
+* Fixed broken import in `react-devtools-inline` for feature flags file ([bvaughn](https://github.com/bvaughn) in [#21237](https://github.com/facebook/react/pull/21237))
+
+---
+
+### 4.11.0
+April 9, 2021
+#### Bugfix
+* `$r` should contain hooks property when it is `forwardRef` or `memo` component  ([meowtec](https://github.com/meowtec) in [#20626](https://github.com/facebook/react/pull/20626))
+* Ensure `sync-xhr` is allowed before reload and profile ([ChrisDobby](https://github.com/ChrisDobby) in [#20879](https://github.com/facebook/react/pull/20879))
+* Bump electron version from 9.1.0 to 11.1.0 for darwin-arm64 builds ([jaiwanth-v](https://github.com/jaiwanth-v) in [#20496](https://github.com/facebook/react/pull/20496))
+* Fixed primitive hook badge colors for light theme ([bvaughn](https://github.com/bvaughn) in [#21034](https://github.com/facebook/react/pull/21034))
+* Increased minimum Chrome/Firefox versions from 51/54 to 60/55 to reduce polyfill code. ([bvaughn](https://github.com/bvaughn) in [#21185](https://github.com/facebook/react/pull/21185))
+* Fix can't expand prop value in some scenario ([iChenLei](https://github.com/iChenLei) in [#20534](https://github.com/facebook/react/pull/20534))
+* Flush updated passive warning/error info after delay ([bvaughn](https://github.com/bvaughn) in [#20931](https://github.com/facebook/react/pull/20931))
+* Patch console methods even when only show-inline-warnings/errors enabled ([bvaughn](https://github.com/bvaughn) in [#20688](https://github.com/facebook/react/pull/20688))
+* React Native fixes for new inline errors feature ([bvaughn](https://github.com/bvaughn) in [#20502](https://github.com/facebook/react/pull/20502))
+* Fixed invalid work tag constants that affected a certain range of React versions ([bvaughn](https://github.com/bvaughn) in [#20362](https://github.com/facebook/react/pull/20362))
+
+#### Features
+* Improve Profiler commit-selector UX ([bvaughn](https://github.com/bvaughn) in [#20943](https://github.com/facebook/react/pull/20943))
+* Swap `log` with `cbrt` for commit bar height ([bvaughn](https://github.com/bvaughn) in [#20952](https://github.com/facebook/react/pull/20952))
+* Integrate with new experimental React Suspense features to improve props loading and inspection UX ([bvaughn](https://github.com/bvaughn) in [#20548](https://github.com/facebook/react/pull/20548), [#20789](https://github.com/facebook/react/pull/20789), [#20458](https://github.com/facebook/react/pull/20458))
+* Expose DEV-mode warnings in devtools UI ([eps1lon](https://github.com/eps1lon) in [#20463](https://github.com/facebook/react/pull/20463))
+* Display shortcuts for prev/next search result ([eps1lon](https://github.com/eps1lon) in [#20470](https://github.com/facebook/react/pull/20470))
+* Increase the clickable area of the prop value ([TryingToImprove](https://github.com/TryingToImprove) in [#20428](https://github.com/facebook/react/pull/20428))
+
+#### Experimental features
+The following features are only enabled when used with (experimental) builds of React:
+* Shows which fibers scheduled the current update ([bvaughn](https://github.com/bvaughn) in [#21171](https://github.com/facebook/react/pull/21171))
+* Add commit and post-commit durations to Profiler UI ([bvaughn](https://github.com/bvaughn) in [#20984](https://github.com/facebook/react/pull/20984), [#21183](https://github.com/facebook/react/pull/21183))
+* Show which hooks (indices) changed when profiling ([bvaughn](https://github.com/bvaughn) in [#20998](https://github.com/facebook/react/pull/20998))
+
+###### Improve Profiler commit-selector UX
+
+![Video demonstrating tooltip with commit duration and time](https://user-images.githubusercontent.com/29597/110225725-30a1f480-7eb6-11eb-9825-4c762ffde0bb.gif)
+
+![Graphic illustrating Profiler bar heights using different scales](https://user-images.githubusercontent.com/29597/110361997-bafd6c00-800e-11eb-92d8-d411e6c79d84.png)
+
+###### Expose DEV-mode warnings in devtools UI
+![Inline warnings and errors](https://user-images.githubusercontent.com/29597/114225729-adeed800-9940-11eb-8df2-34d8b0ead3b8.png)
+
+###### Shows which fibers scheduled the current update
+![Shows which fibers scheduled the current update](https://user-images.githubusercontent.com/29597/114225931-eee6ec80-9940-11eb-90cc-fe6630fbfc08.gif)
+
+###### Add commit and post-commit durations to Profiler UI
+![Add commit and post-commit durations to Profiler UI](https://user-images.githubusercontent.com/29597/114225991-00c88f80-9941-11eb-84df-e2af04ecef1c.gif)
+
+###### Show which hooks (indices) changed when profiling
+![Show which hooks (indices) changed when profiling](https://user-images.githubusercontent.com/29597/114225838-d37be180-9940-11eb-93f8-93e0115421c8.png)
+
+---
+
+### 4.10.4
+May 20, 2021
+#### Bugfix
+* Ported passive effects sync flushing/bubbling bugfix ([bvaughn](https://github.com/bvaughn) in [#21540](https://github.com/facebook/react/pull/21540))
+
+---
+
+### 4.10.3
+April 27, 2021
+#### Bugfix
+* Replaced Facebook-internal fburl.com link with public fb.me link for Bridge protocol mismatch info page ([bvaughn](https://github.com/bvaughn) in [#21344](https://github.com/facebook/react/pull/21344))
+
+---
+
+### 4.10.2
+April 27, 2021
+#### Features
+* Added Bridge protocol check and warning dialog if embedded DevTools backend is incompatible with DevTools UI ([bvaughn](https://github.com/bvaughn) in [#21344](https://github.com/facebook/react/pull/21344))
+
+---
+
+### 4.10.1
+November 12, 2020
+#### Bugfix
+* Fixed invalid internal work tag mappings ([bvaughn](https://github.com/bvaughn) in [#20362](https://github.com/facebook/react/pull/20362))
+
+---
+
+### 4.10.0
+November 12, 2020
+#### Features
+* Make DevTools Websocket retry delay configurable ([bvaughn](https://github.com/bvaughn) in [#20107](https://github.com/facebook/react/pull/20107))
+#### Bugfix
+* Fix error loading source maps for devtools extension ([sytranvn](https://github.com/sytranvn) in [#20079](https://github.com/facebook/react/pull/20079))
+* Remove css-sourcemap for `react-devtools-inline` ([sean9keenan](https://github.com/sean9keenan) in [#20170](https://github.com/facebook/react/pull/20170))
+* Decrease NPM update notification/prompt for standalone DevTools ([recurx](https://github.com/recurx) in [#20078](https://github.com/facebook/react/pull/20078))
+
+---
+
+### 4.9.0
+October 19, 2020
+#### Features
+* [Improved DevTools editing interface](#improved-devtools-editing-interface) ([bvaughn](https://github.com/bvaughn) in [#19774](https://github.com/facebook/react/pull/19774))
+* Add ⎇ + arrow key navigation ([bvaughn](https://github.com/bvaughn) in [#19741](https://github.com/facebook/react/pull/19741))
+* Add checkbox toggle for boolean values ([mdaj06](https://github.com/mdaj06) in [#19714](https://github.com/facebook/react/pull/19714))
+* Show symbols used as keys in state ([omarsy](https://github.com/omarsy) in [#19786](https://github.com/facebook/react/pull/19786))
+* Add new (unstable) `SuspenseList` component type ([bpernick](https://github.com/bpernick) in [#19684](https://github.com/facebook/react/pull/19684))
+
+#### Bugfix
+* Show proper icon/tooltip for restricted browser pages ([sktguha](https://github.com/sktguha) in [#20023](https://github.com/facebook/react/pull/20023))
+* Fix emoji character shown in Chrome developer tools panel ([bvaughn](https://github.com/bvaughn) in [#19603](https://github.com/facebook/react/pull/19603))
+* Don't open two tabs in Firefox when clicking on troubleshooting instructions ([unbyte](https://github.com/unbyte) in [#19632](https://github.com/facebook/react/pull/19632))
+* Support inner component `_debugOwner` in memo ([bvaughn](https://github.com/bvaughn) in [#19556](https://github.com/facebook/react/pull/19556))
+* Proxied methods should be safely dehydrated for display ([@pfongkye](https://github.com/pfongkye) in [b6e1d08](https://github.com/facebook/react/commit/b6e1d08)
+* Property list values should show whitespace ([sammarks](https://github.com/sammarks) in [#19640](https://github.com/facebook/react/pull/19640))
+* Fix crash when inspecting document.all ([omarsy](https://github.com/omarsy) in [#19619](https://github.com/facebook/react/pull/19619))
+* Don't call generators during inspection since they may be stateful ([todortotev](https://github.com/todortotev) in [#19831](https://github.com/facebook/react/pull/19831))
+* Fix bad null check in DevTools highlight code ([bvaughn](https://github.com/bvaughn) in [#20010](https://github.com/facebook/react/pull/20010))
+* Handled a missing suspense fiber when suspense is filtered on the profiler ([IDrissAitHafid](https://github.com/IDrissAitHafid) in [#ISSUE](https://github.com/facebook/react/pull/ISSUE))
+* Fixed unfound node error when Suspense is filtered ([IDrissAitHafid](https://github.com/IDrissAitHafid) in [#20019](https://github.com/facebook/react/pull/20019))
+* Always overrides the dispatcher when shallow rendering ([bvaughn](https://github.com/bvaughn) in [#20011](https://github.com/facebook/react/pull/20011))
+* Frevent phishing attacks ([iamwilson](https://github.com/iamwilson) in [#19934](https://github.com/facebook/react/pull/19934))
+
+---
+
+### Other
+* Enable source maps for DevTools production builds ([jpribyl ](https://github.com/jpribyl ) in [#19773](https://github.com/facebook/react/pull/19773))
+* Drop support for IE 11 ([bvaughn](https://github.com/bvaughn) in [#19875](https://github.com/facebook/react/pull/19875))
+* Remove ReactJS.org version check "cheat" ([sktguha](https://github.com/sktguha) in [#19939](https://github.com/facebook/react/pull/19939))
+* Update outdated links and fix two broken links ([sktguha](https://github.com/sktguha) in [#19985](https://github.com/facebook/react/pull/19985))
+* Remove support for deprecated/unreleased React Flare event system ([trueadm](https://github.com/trueadm) in [#19520](https://github.com/facebook/react/pull/19520))
+
+###### Improved DevTools editing interface
+
+**Improved parsing**
+Value parsing logic has been relaxed so as to no longer require quotes around strings or double quotes:
+![looser parsing logic](https://user-images.githubusercontent.com/29597/93407442-36504300-f860-11ea-90e8-5ad54c9b8b34.gif)
+
+**Modifying arrays**
+New values can be added to array props/state/hooks now. Existing values can also be deleted:
+![adding and removing values from an array](https://user-images.githubusercontent.com/29597/93407457-3ea87e00-f860-11ea-8b85-a41904e6c25f.gif)
+
+**Modifying objects**
+New keys can be added to object props/state/hooks now. Existing keys can be renamed or deleted entirely:
+![adding/renaming/removing object properties](https://user-images.githubusercontent.com/29597/93407464-449e5f00-f860-11ea-909b-49dafb56f6c5.gif)
+
+---
+
+### 4.8.2
+July 15, 2020
+#### Bugfix
+* Fix broken `Suspense` heuristic ([bvaughn](https://github.com/bvaughn) in [#19373](https://github.com/facebook/react/pull/19373))
+* Fixed error with standalone in HTTPS mode ([b-ponomarenko](https://github.com/b-ponomarenko) in [#19336](https://github.com/facebook/react/pull/19336))
+* Disable DevTools minification ([bvaughn](https://github.com/bvaughn) in [#19369](https://github.com/facebook/react/pull/19369))
+
+---
+
+### 4.8.1
+July 10, 2020
+#### Bugfix
+* Fix break-on-warning to truly be off by default. ([gaearon](https://github.com/gaearon) in [#19309](https://github.com/facebook/react/pull/19309))
+
+---
+
+### 4.8.0
+July 9, 2020
+#### Features
+* Add SSL support to React devtools standalone ([ittaibaratz](https://github.com/ittaibaratz) in [#19191](https://github.com/facebook/react/pull/19191))
+* New break-on-warning feature (off by default) ([bvaughn](https://github.com/bvaughn) in [#19048](https://github.com/facebook/react/pull/19048))
+
+#### Bugfix
+* Updates Electron version for react-devtools to pull in several security fixes ([gsimone](https://github.com/gsimone) in [#19280](https://github.com/facebook/react/pull/19280))
+* Remove unnecessary tag end from CommitRanked view ([finico](https://github.com/finico) in [#19195](https://github.com/facebook/react/pull/19195))
+* Shutdown DevTools Bridge synchronously when unmounting ([bvaughn](https://github.com/bvaughn) in [#19180](https://github.com/facebook/react/pull/19180))
+
+---
+
+### 4.7.0
+May 18, 2020
+
+#### Features
+* Improved appended component stacks for third party warnings to be more like native ([bvaughn](https://github.com/bvaughn) in [#18656](https://github.com/facebook/react/pull/18656))
+* Improve inline search results by highlighting match on HOC badge ([bl00mber](https://github.com/bl00mber) in [#18802](https://github.com/facebook/react/pull/18802))
+* Add key badge to inspected element in right hand pane ([karlhorky]](https://github.com/karlhorky) in [#18737](https://github.com/facebook/react/pull/18737))
+* Improve Profiler snapshot selector drag-and-drop UX ([bl00mber](https://github.com/bl00mber) in [#18852](https://github.com/facebook/react/pull/18852))
+* Profiler tooltip now includes self duration to make it easier to scan times without requiring selection ([bvaughn](https://github.com/bvaughn) in [#18510](https://github.com/facebook/react/pull/18510))
+* Rendered by list also now highlights native elements on hover ([hristo-kanchev](https://github.com/hristo-kanchev) in [#18479](https://github.com/facebook/react/pull/18479))
+* Add in-page highlighting for mouse-over interactions in Profiler ([bl00mber](https://github.com/bl00mber) in [#18745](https://github.com/facebook/react/pull/18745))
+
+#### Bugfix
+* Fix Profiler bug "_Could not find commit data for root_" by resetting selected node on root change ([bl00mber](https://github.com/bl00mber) in [#18880](https://github.com/facebook/react/pull/18880))
+* Add `imported` flag to Profiling data to more reliably differentiate between imported and session data ([bl00mber](https://github.com/bl00mber) in [#18913](https://github.com/facebook/react/pull/18913))
+* Disable Profiler filtering to avoid edge case runtime error "_Cannot read property 'duration' of undefined_" ([bvaughn](https://github.com/bvaughn) in [#18862](https://github.com/facebook/react/pull/18862))
+* Fix Profiler bug "_cannot read property 'memoizedState' of null_" ([bvaughn](https://github.com/bvaughn) in [#18522](https://github.com/facebook/react/pull/18522))
+* Whitespace search results highlighting bug fix ([bvaughn](https://github.com/bvaughn) in [#18527](https://github.com/facebook/react/pull/18527))
+* Improved confusing Profiler tooltip text for components that did not render ([bvaughn](https://github.com/bvaughn) in [#18523](https://github.com/facebook/react/pull/18523))
+* Fix edge case performance issue when highlight elements enabled ([Faelivrinx](https://github.com/Faelivrinx) in [#18498](https://github.com/facebook/react/pull/18498))
+* Disabled Webpack auto polyfill for `setImmediate` ([bvaughn](https://github.com/bvaughn) in [#18860](https://github.com/facebook/react/pull/18860))
+* Fix mouse interactions for standalone DevTools on Linux ([bl00mber](https://github.com/bl00mber) in [#18772](https://github.com/facebook/react/pull/18772))
+
+---
+
+### 4.6.0
+March 26, 2020
+
+#### Features
+* Add shortcut keys for tab switching ([kerolloz](https://github.com/kerolloz) in [#18248](https://github.com/facebook/react/pull/18248))
+
+#### Bugfix
+* Improve display of complex values for `useDebugValue` ([eps1lon](https://github.com/eps1lon) in [#18070](https://github.com/facebook/react/pull/18070))
+* Fix minor CSS layout issue that broke Profiler commit selector UI ([bvaughn](https://github.com/bvaughn) in [#18286](https://github.com/facebook/react/pull/18286))
+* Inlined DevTools event emitter implementation to fix a source of Profiler bugs ([bvaughn](https://github.com/bvaughn) in [#18378](https://github.com/facebook/react/pull/18378))
+
+#### Cleanup
+* Remove "es6-symbol" dependency from "react-devtools-inline" package ([bvaughn](https://github.com/bvaughn) in [#18397](https://github.com/facebook/react/pull/18397))
+
+---
+
+### 4.5.0
+March 3, 2020
+
+#### Features
+* Improve function props display for inspected elements ([bvaughn](https://github.com/bvaughn) in [#17789](https://github.com/facebook/react/pull/17789))
+* Re-enabled context menu for Firefox extension ([bvaughn](https://github.com/bvaughn) in [#17838](https://github.com/facebook/react/pull/17838))
+* Apply changes to props/state/hooks on blur (rather than on ENTER) ([muratcatal](https://github.com/muratcatal) in [#17062](https://github.com/facebook/react/pull/17062))
+* Add info tooltip to nodes in Profiler ([M-Izadmehr](https://github.com/M-Izadmehr) in [#18048](https://github.com/facebook/react/pull/18048))
+* Added resize support to Components panel ([hristo-kanchev](https://github.com/hristo-kanchev) in [#18046](https://github.com/facebook/react/pull/18046))
+
+#### Bugfix
+* Improve how empty commits are filtered ([nutboltu](https://github.com/nutboltu) in [#17931](https://github.com/facebook/react/pull/17931))
+* BigInt serialize issue in devtools copy to clipboard ([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))
+* Fix "_Cannot read property 'sub' of undefined_" error when navigating to plain-text pages ([wfnuser](https://github.com/wfnuser) in [#17848](https://github.com/facebook/react/pull/17848))
+* Fix potential error with composite hooks during shallow re-rendering ([bvaughn](https://github.com/bvaughn) in [#18130](https://github.com/facebook/react/pull/18130))
+* Scope dev tools wildcard styles within DevTools CSS class ([@GasimGasimzada](https://github.com/GasimGasimzada) in [9cc094a](https://github.com/facebook/react/commit/9cc094a19a9e43d33ba5ac713935e657ea4e3cdd#diff-ab5ee5655b2aac3260e1f836546a13c9))
+
+###### Info summary tooltips
+
+![Profiler tooltips in Flamegraph chart](https://user-images.githubusercontent.com/28848972/74614074-09468100-5115-11ea-8c87-c224d229ef15.gif)
+
+![Profiler tooltips in Ranked chart](https://user-images.githubusercontent.com/28848972/74614072-08155400-5115-11ea-8d19-7ab3d27b9b0a.gif)
+
+###### Components panel resize
+
+![Horizontal Components panel resizing](https://user-images.githubusercontent.com/23095052/74603147-ca7edf80-50b0-11ea-887f-db7ada855c50.gif)
+
+![Vertical Components panel resizing](https://user-images.githubusercontent.com/23095052/74603149-d074c080-50b0-11ea-820f-63db30b4c285.gif)
+
+---
+
+### 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/main/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/main/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/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
new file mode 100644
index 00000000000..ac0799127a8
--- /dev/null
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -0,0 +1,80 @@
+
+Interested in contributing to React DevTools, but not sure where to start? This is the place!
+
+# Install project dependencies
+To get started, check out the React repo:
+```sh
+git clone git@github.com:facebook/react.git
+```
+Next install dependencies:
+```sh
+cd <react-repo>
+yarn install
+```
+
+# Build React and React DOM
+Next, check out (or build) the local version of React that DevTools uses:
+
+### Option 1 (fastest): Checkout pre-built React
+To check out the latest version of React (built by CI from the `main` branch) run:
+```sh
+cd <react-repo>
+
+cd scripts/release
+yarn install
+
+./download-experimental-build.js --commit=main
+```
+
+### Option 2: Build from source
+If your DevTools change includes local changes to React (or if CI is down for some reason) you can also build from source:
+```sh
+cd <react-repo>
+yarn build-for-devtools
+```
+
+# Testing your changes
+
+### Option 1 (fastest): Using the test shell
+Most changes can be tested using the DevTools test app. To run this, you'll need two terminals:
+
+First, run DevTools in DEV mode:
+```sh
+cd <react-repo>
+cd packages/react-devtools-inline
+yarn start
+```
+Next, run the test shell:
+```sh
+cd <react-repo>
+cd packages/react-devtools-shell
+yarn start
+```
+Now any changes you make to DevTools will automatically reload in the test app at http://localhost:8080
+
+### Option 2: Using the extension
+Some changes requiring testing in the browser extension (e.g. like "named hooks"). To do this, run the following script:
+```sh
+cd <react-repo>
+cd packages/react-devtools-extensions
+yarn build:chrome:local && yarn test:chrome
+```
+This will launch a standalone version of Chrome with the locally built React DevTools pre-installed. If you are testing a specific URL, you can make your testing even faster by passing the `--url` argument to the test script:
+```sh
+yarn build:chrome && yarn test:chrome --url=<url-to-test>
+```
+
+# Unit tests
+Core DevTools functionality is typically unit tested (see [here](https://github.com/facebook/react/tree/main/packages/react-devtools-shared/src/__tests__)). To run tests, you'll first need to build or download React and React DOM ([as explained above](#build-react-and-react-dom)) and then use the following NPM script:
+```sh
+yarn test-build-devtools
+```
+You can connect tests to a debugger as well if you'd like by running:
+```sh
+yarn debug-test-build-devtools
+```
+
+# Finding the right first issue
+The React team maintains [this list of "good first issues"](https://github.com/facebook/react/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22Component%3A+Developer+Tools%22+label%3A%22good+first+issue%22) for anyone interested in contributing to DevTools. If you see one that interests you, leave a comment!
+
+If you have ideas or suggestions of your own, you can also put together a PR demonstrating them. We suggest filing an issue before making any substantial changes though, to ensure that the idea is something the team feels comfortable landing.
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
new file mode 100644
index 00000000000..7f705e4c3f3
--- /dev/null
+++ b/packages/react-devtools/OVERVIEW.md
@@ -0,0 +1,332 @@
+# 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 the next items that belong to the string table
+2. for each string in a table:
+    * encoded size
+    * 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 5 numbers:
+
+1. add operation constant (`1`)
+1. fiber id
+1. element type constant (`11 === ElementTypeRoot`)
+1. root has `StrictMode` enabled
+1. supports profiling flag
+1. supports `StrictMode` flag
+1. owner metadata flag
+
+For example, adding a root fiber with an id of 1:
+```js
+[
+  1, // add operation
+  1, // fiber id
+  11, // ElementTypeRoot
+  1, // this root is StrictMode enabled
+  1, // this root's renderer supports profiling
+  1, // this root's renderer supports StrictMode
+  1, // this root has owner metadata
+]
+```
+
+#### Adding a leaf node
+
+Adding a leaf node to the tree requires sending 7 numbers:
+
+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
+  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 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,  // update tree base duration operation
+  4,  // tree base duration operation
+  1,  // fiber id
+  32, // new tree base duration value
+]
+```
+
+#### Updating errors and warnings on a Fiber
+
+We record calls to `console.warn` and `console.error` in the backend.
+Periodically we notify the frontend that the number of recorded calls got updated.
+We only send the serialized messages as part of the `inspectElement` event.
+
+
+```js
+[
+  5, // update error/warning counts operation
+  4, // fiber id
+  0, // number of calls to console.error from that fiber
+  3, // number of calls to console.warn from that fiber
+]
+```
+
+#### Removing a root
+
+A special case of unmounting an entire root (including its descendants). This specialized message replaces what would otherwise be a series of remove-node operations. It is currently only used in one case: updating component filters. The primary motivation for this is actually to preserve fiber ids for components that are re-added to the tree after the updated filters have been applied. This preserves mappings between the Fiber (id) and things like error and warning logs.
+
+```js
+[
+  6, // remove root operation
+]
+```
+
+This operation has no additional payload because renderer and root ids are already sent at the beginning of every operations payload.
+
+#### Setting the mode for a subtree
+
+This message specifies that a subtree operates under a specific mode (e.g. `StrictMode`).
+
+```js
+[
+  7,   // set subtree mode
+  1,   // subtree root fiber id
+  0b01 // mode bitmask
+]
+```
+
+Modes are constant meaning that the modes a subtree mounts with will never change.
+
+## 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 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 been 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 "dehydration" 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 "dehydrated" 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/main/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 been not updated since the last time its properties were inspected.
+
+## Profiler
+
+DevTools provides a suite of profiling tools for identifying and fixing performance problems. React 16.9+ supports a "legacy" profiler and React 18+ adds the ["timeline" profiler](https://github.com/facebook/react/tree/main/packages/react-devtools-timeline/src) support. These profilers are explained below, but at a high level– the architecture of each profiler aims to minimize the 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 in the DevTools 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.)
+
+### Legacy profiler
+
+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 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 been completed (to minimize the performance impact of profiling).
+
+### Timeline profiler
+
+Timeline profiling data can come from one of two places:
+* The React DevTools backend, which injects a [set of profiling hooks](https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/backend/profilingHooks.js) that React calls while rendering. When profiling, these hooks store information in memory which gets passed to DevTools when profiling is stopped.
+* A Chrome performance export (JSON) containing React data (as User Timing marks) and other browser data like CPU samples, Network traffic, and native commits. (This method is not as convenient but provides more detailed browser performance data.)
+
+### 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.
+
+## Package Specific Details
+
+### Devtools Extension Overview Diagram
+
+![React Devtools Extension](https://user-images.githubusercontent.com/2735514/132768489-6ab85156-b816-442f-9c3f-7af738ee9e49.png)
+
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
new file mode 100644
index 00000000000..8c436c1fb2b
--- /dev/null
+++ b/packages/react-devtools/README.md
@@ -0,0 +1,145 @@
+# `react-devtools`
+
+This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).
+
+![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 using a local simulator, you'll also need to forward ports used by React DevTools:
+```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. (If this doesn't happen automatically, try reloading the React Native app.)
+
+### Integration with React Native Inspector
+
+You can open the [in-app developer menu](https://reactnative.dev/docs/debugging#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](https://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://reactnative.dev/docs/debugging#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`. The port can be modified by setting the `REACT_DEVTOOLS_PORT` environment variable. If you need to further 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](https://reactjs.org/) 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/main/packages/react-devtools). Chrome apps are currently not inspectable.
+
+**If your Components tab is empty, refer to "The React tab shows no components" section below**.
+
+**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.
+
+### The React tab shows no components
+
+#### The Issue with Chrome v101 and earlier
+As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. failure to load React Elements in the Components tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.
+
+#### Service Worker malfunction
+Go to chrome://extensions. If you see "service worker (inactive)" in the React Developer Tools extension, try disabling and re-enabling the extension. This will restart the service worker. Then go to the page you want to inspect, close the DevTools, and reload the page. Open the DevTools again and the React components tab should be working.
+
+## 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
+You can test the standalone DevTools by running the following:
+
+* **First, complete the prerequisite steps above! If you don't do it, none of the steps below will work.**
+* Then, run `yarn start:backend` and `yarn start:standalone` in `packages/react-devtools-core`
+* Run `yarn start` in `packages/react-devtools`
+* 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 00000000000..7b55e0d37db
--- /dev/null
+++ b/packages/react-devtools/app.html
@@ -0,0 +1,240 @@
+<!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;
+      }
+
+      .prompt,
+      .confirmation {
+        margin-bottom: 0.25rem;
+      }
+
+      .confirmation {
+        font-style: italic;
+      }
+
+      .hidden {
+        display: none;
+      }
+    </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" style="-webkit-app-region: none;">
+        <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"
+              rel="noopener noreferrer"
+              href="https://reactnative.dev/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">
+            <div id="box-content-prompt" class="prompt">
+              Add one of the following (click to copy):
+            </div>
+            <div id="box-content-confirmation" class="confirmation hidden">
+              Copied to clipboard.
+            </div>
+            <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 class="box">
+          <div class="box-header">Profiler</div>
+          <div class="box-content">
+            Open the <a
+              id="profiler"
+              class="link"
+              href="#"
+            >Profiler tab</a> to inspect saved profiles.
+          </div>
+        </div>
+        <div id="loading-status">Starting the server…</div>
+      </div>
+    </div>
+    <script>
+      // window.api is defined in preload.js
+      const {electron, readEnv, ip, getDevTools} = window.api;
+      const {options, useHttps, host, protocol, port} = readEnv();
+
+      const localIp = ip.address();
+      const defaultPort = (port === 443 && useHttps) || (port === 80 && !useHttps);
+      const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
+      const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
+      const $ = document.querySelector.bind(document);
+      
+      let timeoutID;
+      
+      function selectAllAndCopy(event) {
+        const element = event.target;
+        if (window.getSelection) {
+          const selection = window.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(element);
+          selection.removeAllRanges();
+          selection.addRange(range);
+          electron.clipboard.writeText(event.target.textContent);
+          
+          const $promptDiv = $("#box-content-prompt");
+          const $confirmationDiv = $("#box-content-confirmation");
+          $promptDiv.classList.add('hidden');
+          $confirmationDiv.classList.remove('hidden');
+
+          if (timeoutID) {
+            clearTimeout(timeoutID);
+          }
+
+          timeoutID = setTimeout(() => {
+            $promptDiv.classList.remove('hidden');
+            $confirmationDiv.classList.add('hidden');
+          }, 1000);
+        }
+      }
+
+      function openProfiler() {
+        window.devtools
+          .setContentDOMNode(document.getElementById("container"))
+          .openProfiler();
+      }
+
+      function attachListeners() {
+        const link = $('#rn-help-link');
+        link.addEventListener('click', event => {
+          event.preventDefault();
+          electron.shell.openExternal(link.href);
+        });
+  
+        const $localhost = $("#localhost");
+        $localhost.innerText = `<script src="${server}"></` + 'script>';
+        $localhost.addEventListener('click', selectAllAndCopy);
+        $localhost.addEventListener('focus', selectAllAndCopy);
+  
+        const $byIp = $("#byip");
+        $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
+        $byIp.addEventListener('click', selectAllAndCopy);
+        $byIp.addEventListener('focus', selectAllAndCopy);
+  
+        const $profiler = $("#profiler");
+        $profiler.addEventListener('click', openProfiler);
+      };
+
+      // Initially attach the listeners
+      attachListeners();
+
+      window.devtools = getDevTools();
+      window.server = window.devtools
+        .setContentDOMNode(document.getElementById("container"))
+        .setDisconnectedCallback(attachListeners)
+        .setStatusListener(function(status) {
+          const element = document.getElementById("loading-status");
+          if (element) {
+            element.innerText = status;
+          }
+        })
+        .startServer(port, host, options);
+    </script>
+  </body>
+</html>
diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
new file mode 100644
index 00000000000..c427852b408
--- /dev/null
+++ b/packages/react-devtools/app.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {app, BrowserWindow, shell} = require('electron'); // Module to create native browser window.
+const {join} = require('path');
+const os = require('os');
+
+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: {
+      contextIsolation: true, // protect against prototype pollution
+      enableRemoteModule: false, // turn off remote
+      sandbox: false, // allow preload script to access file system
+      preload: join(__dirname, 'preload.js'), // use a preload script to expose node globals
+    },
+  });
+
+  // set dock icon for macos
+  if (os.platform() === 'darwin') {
+    app.dock.setIcon(join(__dirname, 'icons/icon128.png'));
+  }
+
+  // https://stackoverflow.com/questions/32402327/
+  mainWindow.webContents.setWindowOpenHandler(({url}) => {
+    shell.openExternal(url);
+    return {action: 'deny'};
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL('file://' + __dirname + '/app.html');
+  // $FlowFixMe[incompatible-use] found when upgrading Flow
+  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 00000000000..f9fab0ff9e2
--- /dev/null
+++ b/packages/react-devtools/bin.js
@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 in 7 days' interval
+const notifier = updateNotifier({
+  pkg,
+  updateCheckInterval: 1000 * 60 * 60 * 24 * 7,
+});
+
+if (notifier.update) {
+  const updateMsg =
+    `Update available ${notifier.update.current} -> ${notifier.update.latest}` +
+    '\nTo update:' +
+    '\n"npm i [-g] react-devtools" or "yarn add react-devtools"';
+  notifier.notify({defer: false, message: updateMsg});
+}
+
+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 00000000000..b9327946441
Binary files /dev/null and b/packages/react-devtools/icons/icon128.png differ
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
new file mode 100644
index 00000000000..10a49262833
--- /dev/null
+++ b/packages/react-devtools/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "react-devtools",
+  "version": "7.0.1",
+  "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",
+    "app.html",
+    "app.js",
+    "icons",
+    "preload.js"
+  ],
+  "scripts": {
+    "start": "node bin.js"
+  },
+  "dependencies": {
+    "cross-spawn": "^5.0.1",
+    "electron": "^23.1.2",
+    "internal-ip": "^6.2.0",
+    "minimist": "^1.2.3",
+    "react-devtools-core": "7.0.1",
+    "update-notifier": "^5.0.0"
+  }
+}
diff --git a/packages/react-devtools/preload.js b/packages/react-devtools/preload.js
new file mode 100644
index 00000000000..33a9e3d6dd4
--- /dev/null
+++ b/packages/react-devtools/preload.js
@@ -0,0 +1,41 @@
+const {clipboard, shell, contextBridge} = require('electron');
+const fs = require('fs');
+const internalIP = require('internal-ip');
+
+// Expose protected methods so that render process does not need unsafe node integration
+contextBridge.exposeInMainWorld('api', {
+  electron: {clipboard, shell},
+  ip: {address: internalIP.v4.sync},
+  getDevTools() {
+    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?',
+      );
+    }
+    return devtools;
+  },
+  readEnv() {
+    let options;
+    let useHttps = false;
+    try {
+      if (process.env.KEY && process.env.CERT) {
+        options = {
+          key: fs.readFileSync(process.env.KEY),
+          cert: fs.readFileSync(process.env.CERT),
+        };
+        useHttps = true;
+      }
+    } catch (err) {
+      console.error('Failed to process SSL options - ', err);
+      options = undefined;
+    }
+    const host = process.env.HOST || 'localhost';
+    const protocol = useHttps ? 'https' : 'http';
+    const port = +process.env.REACT_DEVTOOLS_PORT || +process.env.PORT || 8097;
+    return {options, useHttps, host, protocol, port};
+  },
+});
diff --git a/packages/react-dom-bindings/package.json b/packages/react-dom-bindings/package.json
new file mode 100644
index 00000000000..f7d91a6dd9e
--- /dev/null
+++ b/packages/react-dom-bindings/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-dom-bindings",
+  "description": "React implementation details for react-dom.",
+  "version": "19.3.0",
+  "private": true,
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-dom-bindings"
+  },
+  "keywords": [
+    "react"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "peerDependencies": {
+    "react": "^19.0.0"
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/CSSPropertyOperations.js b/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
new file mode 100644
index 00000000000..eab6bd7ba51
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {shorthandToLonghand} from './CSSShorthandProperty';
+
+import hyphenateStyleName from '../shared/hyphenateStyleName';
+import warnValidStyle from '../shared/warnValidStyle';
+import isUnitlessNumber from '../shared/isUnitlessNumber';
+import {checkCSSPropertyStringCoercion} from 'shared/CheckStringCoercion';
+import {trackHostMutation} from 'react-reconciler/src/ReactFiberMutationTracking';
+
+/**
+ * Operations for dealing with CSS properties.
+ */
+
+/**
+ * This creates a string that is expected to be equivalent to the style
+ * attribute generated by server-side rendering. It by-passes warnings and
+ * security checks so it's not safe to use this value for anything other than
+ * comparison. It is only used in DEV for SSR validation.
+ */
+export function createDangerousStringForStyles(styles) {
+  if (__DEV__) {
+    let serialized = '';
+    let delimiter = '';
+    for (const styleName in styles) {
+      if (!styles.hasOwnProperty(styleName)) {
+        continue;
+      }
+      const value = styles[styleName];
+      if (value != null && typeof value !== 'boolean' && value !== '') {
+        const isCustomProperty = styleName.indexOf('--') === 0;
+        if (isCustomProperty) {
+          if (__DEV__) {
+            checkCSSPropertyStringCoercion(value, styleName);
+          }
+          serialized += delimiter + styleName + ':' + ('' + value).trim();
+        } else {
+          if (
+            typeof value === 'number' &&
+            value !== 0 &&
+            !isUnitlessNumber(styleName)
+          ) {
+            serialized +=
+              delimiter + hyphenateStyleName(styleName) + ':' + value + 'px';
+          } else {
+            if (__DEV__) {
+              checkCSSPropertyStringCoercion(value, styleName);
+            }
+            serialized +=
+              delimiter +
+              hyphenateStyleName(styleName) +
+              ':' +
+              ('' + value).trim();
+          }
+        }
+        delimiter = ';';
+      }
+    }
+    return serialized || null;
+  }
+}
+
+function setValueForStyle(style, styleName, value) {
+  const isCustomProperty = styleName.indexOf('--') === 0;
+  if (__DEV__) {
+    if (!isCustomProperty) {
+      warnValidStyle(styleName, value);
+    }
+  }
+
+  if (value == null || typeof value === 'boolean' || value === '') {
+    if (isCustomProperty) {
+      style.setProperty(styleName, '');
+    } else if (styleName === 'float') {
+      style.cssFloat = '';
+    } else {
+      style[styleName] = '';
+    }
+  } else if (isCustomProperty) {
+    style.setProperty(styleName, value);
+  } else if (
+    typeof value === 'number' &&
+    value !== 0 &&
+    !isUnitlessNumber(styleName)
+  ) {
+    style[styleName] = value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
+  } else {
+    if (styleName === 'float') {
+      style.cssFloat = value;
+    } else {
+      if (__DEV__) {
+        checkCSSPropertyStringCoercion(value, styleName);
+      }
+      style[styleName] = ('' + value).trim();
+    }
+  }
+}
+
+/**
+ * Sets the value for multiple styles on a node.  If a value is specified as
+ * '' (empty string), the corresponding style property will be unset.
+ *
+ * @param {DOMElement} node
+ * @param {object} styles
+ */
+export function setValueForStyles(node, styles, prevStyles) {
+  if (styles != null && typeof styles !== 'object') {
+    throw new Error(
+      'The `style` prop expects a mapping from style properties to values, ' +
+        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+        'using JSX.',
+    );
+  }
+  if (__DEV__) {
+    if (styles) {
+      // Freeze the next style object so that we can assume it won't be
+      // mutated. We have already warned for this in the past.
+      Object.freeze(styles);
+    }
+  }
+
+  const style = node.style;
+
+  if (prevStyles != null) {
+    if (__DEV__) {
+      validateShorthandPropertyCollisionInDev(prevStyles, styles);
+    }
+
+    for (const styleName in prevStyles) {
+      if (
+        prevStyles.hasOwnProperty(styleName) &&
+        (styles == null || !styles.hasOwnProperty(styleName))
+      ) {
+        // Clear style
+        const isCustomProperty = styleName.indexOf('--') === 0;
+        if (isCustomProperty) {
+          style.setProperty(styleName, '');
+        } else if (styleName === 'float') {
+          style.cssFloat = '';
+        } else {
+          style[styleName] = '';
+        }
+        trackHostMutation();
+      }
+    }
+    for (const styleName in styles) {
+      const value = styles[styleName];
+      if (styles.hasOwnProperty(styleName) && prevStyles[styleName] !== value) {
+        setValueForStyle(style, styleName, value);
+        trackHostMutation();
+      }
+    }
+  } else {
+    for (const styleName in styles) {
+      if (styles.hasOwnProperty(styleName)) {
+        const value = styles[styleName];
+        setValueForStyle(style, styleName, value);
+      }
+    }
+  }
+}
+
+function isValueEmpty(value) {
+  return value == null || typeof value === 'boolean' || value === '';
+}
+
+/**
+ * Given {color: 'red', overflow: 'hidden'} returns {
+ *   color: 'color',
+ *   overflowX: 'overflow',
+ *   overflowY: 'overflow',
+ * }. This can be read as "the overflowY property was set by the overflow
+ * shorthand". That is, the values are the property that each was derived from.
+ */
+function expandShorthandMap(styles) {
+  const expanded = {};
+  for (const key in styles) {
+    const longhands = shorthandToLonghand[key] || [key];
+    for (let i = 0; i < longhands.length; i++) {
+      expanded[longhands[i]] = key;
+    }
+  }
+  return expanded;
+}
+
+/**
+ * When mixing shorthand and longhand property names, we warn during updates if
+ * we expect an incorrect result to occur. In particular, we warn for:
+ *
+ * Updating a shorthand property (longhand gets overwritten):
+ *   {font: 'foo', fontVariant: 'bar'} -> {font: 'baz', fontVariant: 'bar'}
+ *   becomes .style.font = 'baz'
+ * Removing a shorthand property (longhand gets lost too):
+ *   {font: 'foo', fontVariant: 'bar'} -> {fontVariant: 'bar'}
+ *   becomes .style.font = ''
+ * Removing a longhand property (should revert to shorthand; doesn't):
+ *   {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'}
+ *   becomes .style.fontVariant = ''
+ */
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
+  if (__DEV__) {
+    if (!nextStyles) {
+      return;
+    }
+
+    // Compute the diff as it would happen elsewhere.
+    const expandedUpdates = {};
+    if (prevStyles) {
+      for (const key in prevStyles) {
+        if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) {
+          const longhands = shorthandToLonghand[key] || [key];
+          for (let i = 0; i < longhands.length; i++) {
+            expandedUpdates[longhands[i]] = key;
+          }
+        }
+      }
+    }
+    for (const key in nextStyles) {
+      if (
+        nextStyles.hasOwnProperty(key) &&
+        (!prevStyles || prevStyles[key] !== nextStyles[key])
+      ) {
+        const longhands = shorthandToLonghand[key] || [key];
+        for (let i = 0; i < longhands.length; i++) {
+          expandedUpdates[longhands[i]] = key;
+        }
+      }
+    }
+
+    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(nextStyles[originalKey]) ? 'Removing' : 'Updating',
+          originalKey,
+          correctOriginalKey,
+        );
+      }
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/CSSShorthandProperty.js b/packages/react-dom-bindings/src/client/CSSShorthandProperty.js
new file mode 100644
index 00000000000..1781254b758
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/CSSShorthandProperty.js
@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// List derived from Gecko source code:
+// https://github.com/mozilla/gecko-dev/blob/4e638efc71/layout/style/test/property_database.js
+export const shorthandToLonghand = {
+  animation: [
+    'animationDelay',
+    'animationDirection',
+    'animationDuration',
+    'animationFillMode',
+    'animationIterationCount',
+    'animationName',
+    'animationPlayState',
+    'animationTimingFunction',
+  ],
+  background: [
+    'backgroundAttachment',
+    'backgroundClip',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundOrigin',
+    'backgroundPositionX',
+    'backgroundPositionY',
+    'backgroundRepeat',
+    'backgroundSize',
+  ],
+  backgroundPosition: ['backgroundPositionX', 'backgroundPositionY'],
+  border: [
+    'borderBottomColor',
+    'borderBottomStyle',
+    'borderBottomWidth',
+    'borderImageOutset',
+    'borderImageRepeat',
+    'borderImageSlice',
+    'borderImageSource',
+    'borderImageWidth',
+    'borderLeftColor',
+    'borderLeftStyle',
+    'borderLeftWidth',
+    'borderRightColor',
+    'borderRightStyle',
+    'borderRightWidth',
+    'borderTopColor',
+    'borderTopStyle',
+    'borderTopWidth',
+  ],
+  borderBlockEnd: [
+    'borderBlockEndColor',
+    'borderBlockEndStyle',
+    'borderBlockEndWidth',
+  ],
+  borderBlockStart: [
+    'borderBlockStartColor',
+    'borderBlockStartStyle',
+    'borderBlockStartWidth',
+  ],
+  borderBottom: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth'],
+  borderColor: [
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderRightColor',
+    'borderTopColor',
+  ],
+  borderImage: [
+    'borderImageOutset',
+    'borderImageRepeat',
+    'borderImageSlice',
+    'borderImageSource',
+    'borderImageWidth',
+  ],
+  borderInlineEnd: [
+    'borderInlineEndColor',
+    'borderInlineEndStyle',
+    'borderInlineEndWidth',
+  ],
+  borderInlineStart: [
+    'borderInlineStartColor',
+    'borderInlineStartStyle',
+    'borderInlineStartWidth',
+  ],
+  borderLeft: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth'],
+  borderRadius: [
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+  ],
+  borderRight: ['borderRightColor', 'borderRightStyle', 'borderRightWidth'],
+  borderStyle: [
+    'borderBottomStyle',
+    'borderLeftStyle',
+    'borderRightStyle',
+    'borderTopStyle',
+  ],
+  borderTop: ['borderTopColor', 'borderTopStyle', 'borderTopWidth'],
+  borderWidth: [
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderTopWidth',
+  ],
+  columnRule: ['columnRuleColor', 'columnRuleStyle', 'columnRuleWidth'],
+  columns: ['columnCount', 'columnWidth'],
+  flex: ['flexBasis', 'flexGrow', 'flexShrink'],
+  flexFlow: ['flexDirection', 'flexWrap'],
+  font: [
+    'fontFamily',
+    'fontFeatureSettings',
+    'fontKerning',
+    'fontLanguageOverride',
+    'fontSize',
+    'fontSizeAdjust',
+    'fontStretch',
+    'fontStyle',
+    'fontVariant',
+    'fontVariantAlternates',
+    'fontVariantCaps',
+    'fontVariantEastAsian',
+    'fontVariantLigatures',
+    'fontVariantNumeric',
+    'fontVariantPosition',
+    'fontWeight',
+    'lineHeight',
+  ],
+  fontVariant: [
+    'fontVariantAlternates',
+    'fontVariantCaps',
+    'fontVariantEastAsian',
+    'fontVariantLigatures',
+    'fontVariantNumeric',
+    'fontVariantPosition',
+  ],
+  gap: ['columnGap', 'rowGap'],
+  grid: [
+    'gridAutoColumns',
+    'gridAutoFlow',
+    'gridAutoRows',
+    'gridTemplateAreas',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+  ],
+  gridArea: ['gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart'],
+  gridColumn: ['gridColumnEnd', 'gridColumnStart'],
+  gridColumnGap: ['columnGap'],
+  gridGap: ['columnGap', 'rowGap'],
+  gridRow: ['gridRowEnd', 'gridRowStart'],
+  gridRowGap: ['rowGap'],
+  gridTemplate: [
+    'gridTemplateAreas',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+  ],
+  listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
+  margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
+  marker: ['markerEnd', 'markerMid', 'markerStart'],
+  mask: [
+    'maskClip',
+    'maskComposite',
+    'maskImage',
+    'maskMode',
+    'maskOrigin',
+    'maskPositionX',
+    'maskPositionY',
+    'maskRepeat',
+    'maskSize',
+  ],
+  maskPosition: ['maskPositionX', 'maskPositionY'],
+  outline: ['outlineColor', 'outlineStyle', 'outlineWidth'],
+  overflow: ['overflowX', 'overflowY'],
+  padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
+  placeContent: ['alignContent', 'justifyContent'],
+  placeItems: ['alignItems', 'justifyItems'],
+  placeSelf: ['alignSelf', 'justifySelf'],
+  textDecoration: [
+    'textDecorationColor',
+    'textDecorationLine',
+    'textDecorationStyle',
+  ],
+  textEmphasis: ['textEmphasisColor', 'textEmphasisStyle'],
+  transition: [
+    'transitionDelay',
+    'transitionDuration',
+    'transitionProperty',
+    'transitionTimingFunction',
+  ],
+  wordWrap: ['overflowWrap'],
+};
diff --git a/packages/react-dom-bindings/src/client/DOMAccessibilityRoles.js b/packages/react-dom-bindings/src/client/DOMAccessibilityRoles.js
new file mode 100644
index 00000000000..4c1091f2455
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/DOMAccessibilityRoles.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Below code forked from dom-accessibility-api
+
+const tagToRoleMappings = {
+  ARTICLE: 'article',
+  ASIDE: 'complementary',
+  BODY: 'document',
+  BUTTON: 'button',
+  DATALIST: 'listbox',
+  DD: 'definition',
+  DETAILS: 'group',
+  DIALOG: 'dialog',
+  DT: 'term',
+  FIELDSET: 'group',
+  FIGURE: 'figure',
+  // WARNING: Only with an accessible name
+  FORM: 'form',
+  FOOTER: 'contentinfo',
+  H1: 'heading',
+  H2: 'heading',
+  H3: 'heading',
+  H4: 'heading',
+  H5: 'heading',
+  H6: 'heading',
+  HEADER: 'banner',
+  HR: 'separator',
+  LEGEND: 'legend',
+  LI: 'listitem',
+  MATH: 'math',
+  MAIN: 'main',
+  MENU: 'list',
+  NAV: 'navigation',
+  OL: 'list',
+  OPTGROUP: 'group',
+  // WARNING: Only in certain context
+  OPTION: 'option',
+  OUTPUT: 'status',
+  PROGRESS: 'progressbar',
+  // WARNING: Only with an accessible name
+  SECTION: 'region',
+  SUMMARY: 'button',
+  TABLE: 'table',
+  TBODY: 'rowgroup',
+  TEXTAREA: 'textbox',
+  TFOOT: 'rowgroup',
+  // WARNING: Only in certain context
+  TD: 'cell',
+  TH: 'columnheader',
+  THEAD: 'rowgroup',
+  TR: 'row',
+  UL: 'list',
+};
+
+function getImplicitRole(element: Element): string | null {
+  // $FlowFixMe[invalid-computed-prop]
+  const mappedByTag = tagToRoleMappings[element.tagName];
+  if (mappedByTag !== undefined) {
+    return mappedByTag;
+  }
+
+  switch (element.tagName) {
+    case 'A':
+    case 'AREA':
+    case 'LINK':
+      if (element.hasAttribute('href')) {
+        return 'link';
+      }
+      break;
+    case 'IMG':
+      if ((element.getAttribute('alt') || '').length > 0) {
+        return 'img';
+      }
+      break;
+    case 'INPUT': {
+      const type = (element: any).type;
+      switch (type) {
+        case 'button':
+        case 'image':
+        case 'reset':
+        case 'submit':
+          return 'button';
+        case 'checkbox':
+        case 'radio':
+          return type;
+        case 'range':
+          return 'slider';
+        case 'email':
+        case 'tel':
+        case 'text':
+        case 'url':
+          if (element.hasAttribute('list')) {
+            return 'combobox';
+          }
+          return 'textbox';
+        case 'search':
+          if (element.hasAttribute('list')) {
+            return 'combobox';
+          }
+          return 'searchbox';
+        default:
+          return null;
+      }
+    }
+
+    case 'SELECT':
+      if (element.hasAttribute('multiple') || (element: any).size > 1) {
+        return 'listbox';
+      }
+      return 'combobox';
+  }
+
+  return null;
+}
+
+function getExplicitRoles(element: Element): Array<string> | null {
+  const role = element.getAttribute('role');
+  if (role) {
+    return role.trim().split(' ');
+  }
+
+  return null;
+}
+
+// https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html
+export function hasRole(element: Element, role: string): boolean {
+  const explicitRoles = getExplicitRoles(element);
+  if (explicitRoles !== null && explicitRoles.indexOf(role) >= 0) {
+    return true;
+  }
+
+  return role === getImplicitRole(element);
+}
diff --git a/packages/react-dom-bindings/src/client/DOMNamespaces.js b/packages/react-dom-bindings/src/client/DOMNamespaces.js
new file mode 100644
index 00000000000..528e4555ed3
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/DOMNamespaces.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
diff --git a/packages/react-dom-bindings/src/client/DOMPropertyOperations.js b/packages/react-dom-bindings/src/client/DOMPropertyOperations.js
new file mode 100644
index 00000000000..df09445acc5
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/DOMPropertyOperations.js
@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isAttributeNameSafe from '../shared/isAttributeNameSafe';
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
+import {trackHostMutation} from 'react-reconciler/src/ReactFiberMutationTracking';
+
+/**
+ * Get the value for a attribute on a node. Only used in DEV for SSR validation.
+ * The third argument is used as a hint of what the expected value is. Some
+ * attributes have multiple equivalent values.
+ */
+export function getValueForAttribute(
+  node: Element,
+  name: string,
+  expected: mixed,
+): mixed {
+  if (__DEV__) {
+    if (!isAttributeNameSafe(name)) {
+      return;
+    }
+    if (!node.hasAttribute(name)) {
+      // shouldRemoveAttribute
+      switch (typeof expected) {
+        case 'function':
+        case 'symbol':
+          return expected;
+        case 'boolean': {
+          const prefix = name.toLowerCase().slice(0, 5);
+          if (prefix !== 'data-' && prefix !== 'aria-') {
+            return expected;
+          }
+        }
+      }
+      return expected === undefined ? undefined : null;
+    }
+    const value = node.getAttribute(name);
+    if (__DEV__) {
+      checkAttributeStringCoercion(expected, name);
+    }
+    if (value === '' + (expected: any)) {
+      return expected;
+    }
+    return value;
+  }
+}
+
+export function getValueForAttributeOnCustomComponent(
+  node: Element,
+  name: string,
+  expected: mixed,
+): mixed {
+  if (__DEV__) {
+    if (!isAttributeNameSafe(name)) {
+      return;
+    }
+    if (!node.hasAttribute(name)) {
+      // shouldRemoveAttribute
+      switch (typeof expected) {
+        case 'symbol':
+        case 'object':
+          // Symbols and objects are ignored when they're emitted so
+          // it would be expected that they end up not having an attribute.
+          return expected;
+        case 'function':
+          return expected;
+        case 'boolean':
+          if (expected === false) {
+            return expected;
+          }
+      }
+      return expected === undefined ? undefined : null;
+    }
+    const value = node.getAttribute(name);
+
+    if (value === '' && expected === true) {
+      return true;
+    }
+
+    if (__DEV__) {
+      checkAttributeStringCoercion(expected, name);
+    }
+    if (value === '' + (expected: any)) {
+      return expected;
+    }
+    return value;
+  }
+}
+
+export function setValueForAttribute(
+  node: Element,
+  name: string,
+  value: mixed,
+) {
+  if (isAttributeNameSafe(name)) {
+    // If the prop isn't in the special list, treat it as a simple attribute.
+    // shouldRemoveAttribute
+    if (value === null) {
+      node.removeAttribute(name);
+      return;
+    }
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+        node.removeAttribute(name);
+        return;
+      case 'boolean': {
+        const prefix = name.toLowerCase().slice(0, 5);
+        if (prefix !== 'data-' && prefix !== 'aria-') {
+          node.removeAttribute(name);
+          return;
+        }
+      }
+    }
+    if (__DEV__) {
+      checkAttributeStringCoercion(value, name);
+    }
+    node.setAttribute(
+      name,
+      enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+    );
+  }
+}
+
+export function setValueForKnownAttribute(
+  node: Element,
+  name: string,
+  value: mixed,
+) {
+  if (value === null) {
+    node.removeAttribute(name);
+    return;
+  }
+  switch (typeof value) {
+    case 'undefined':
+    case 'function':
+    case 'symbol':
+    case 'boolean': {
+      node.removeAttribute(name);
+      return;
+    }
+  }
+  if (__DEV__) {
+    checkAttributeStringCoercion(value, name);
+  }
+  node.setAttribute(
+    name,
+    enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+  );
+}
+
+export function setValueForNamespacedAttribute(
+  node: Element,
+  namespace: string,
+  name: string,
+  value: mixed,
+) {
+  if (value === null) {
+    node.removeAttribute(name);
+    return;
+  }
+  switch (typeof value) {
+    case 'undefined':
+    case 'function':
+    case 'symbol':
+    case 'boolean': {
+      node.removeAttribute(name);
+      return;
+    }
+  }
+  if (__DEV__) {
+    checkAttributeStringCoercion(value, name);
+  }
+  node.setAttributeNS(
+    namespace,
+    name,
+    enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+  );
+}
+
+export function setValueForPropertyOnCustomComponent(
+  node: Element,
+  name: string,
+  value: mixed,
+) {
+  if (name[0] === 'o' && name[1] === 'n') {
+    const useCapture = name.endsWith('Capture');
+    const eventName = name.slice(2, useCapture ? name.length - 7 : undefined);
+
+    const prevProps = getFiberCurrentPropsFromNode(node);
+    // $FlowFixMe[invalid-computed-prop]
+    const prevValue = prevProps != null ? prevProps[name] : null;
+    if (typeof prevValue === 'function') {
+      node.removeEventListener(eventName, prevValue, useCapture);
+    }
+    if (typeof value === 'function') {
+      if (typeof prevValue !== 'function' && prevValue !== null) {
+        // If we previously assigned a non-function type into this node, then
+        // remove it when switching to event listener mode.
+        if (name in (node: any)) {
+          (node: any)[name] = null;
+        } else if (node.hasAttribute(name)) {
+          node.removeAttribute(name);
+        }
+      }
+      // $FlowFixMe[incompatible-cast] value can't be casted to EventListener.
+      node.addEventListener(eventName, (value: EventListener), useCapture);
+      return;
+    }
+  }
+
+  trackHostMutation();
+
+  if (name in (node: any)) {
+    (node: any)[name] = value;
+    return;
+  }
+
+  if (value === true) {
+    node.setAttribute(name, '');
+    return;
+  }
+
+  // From here, it's the same as any attribute
+  setValueForAttribute(node, name, value);
+}
diff --git a/packages/react-dom-bindings/src/client/HTMLNodeType.js b/packages/react-dom-bindings/src/client/HTMLNodeType.js
new file mode 100644
index 00000000000..34cd894944c
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/HTMLNodeType.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * HTML nodeType values that represent the type of the node
+ */
+
+export const ELEMENT_NODE = 1;
+export const TEXT_NODE = 3;
+export const COMMENT_NODE = 8;
+export const DOCUMENT_NODE = 9;
+export const DOCUMENT_TYPE_NODE = 10;
+export const DOCUMENT_FRAGMENT_NODE = 11;
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
new file mode 100644
index 00000000000..1b25e372702
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -0,0 +1,3379 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {HostContext, HostContextDev} from './ReactFiberConfigDOM';
+
+import {HostContextNamespaceNone} from './ReactFiberConfigDOM';
+
+import {
+  registrationNameDependencies,
+  possibleRegistrationNames,
+} from '../events/EventRegistry';
+
+import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
+
+import {
+  getValueForAttribute,
+  getValueForAttributeOnCustomComponent,
+  setValueForPropertyOnCustomComponent,
+  setValueForKnownAttribute,
+  setValueForAttribute,
+  setValueForNamespacedAttribute,
+} from './DOMPropertyOperations';
+import {
+  validateInputProps,
+  initInput,
+  updateInput,
+  restoreControlledInputState,
+} from './ReactDOMInput';
+import {validateOptionProps} from './ReactDOMOption';
+import {
+  validateSelectProps,
+  initSelect,
+  restoreControlledSelectState,
+  updateSelect,
+} from './ReactDOMSelect';
+import {
+  validateTextareaProps,
+  initTextarea,
+  updateTextarea,
+  restoreControlledTextareaState,
+} from './ReactDOMTextarea';
+import {setSrcObject} from './ReactDOMSrcObject';
+import {validateTextNesting} from './validateDOMNesting';
+import setTextContent from './setTextContent';
+import {
+  createDangerousStringForStyles,
+  setValueForStyles,
+} from './CSSPropertyOperations';
+import {SVG_NAMESPACE, MATH_NAMESPACE} from './DOMNamespaces';
+import isCustomElement from '../shared/isCustomElement';
+import getAttributeAlias from '../shared/getAttributeAlias';
+import possibleStandardNames from '../shared/possibleStandardNames';
+import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
+import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
+import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import sanitizeURL from '../shared/sanitizeURL';
+
+import noop from 'shared/noop';
+
+import {trackHostMutation} from 'react-reconciler/src/ReactFiberMutationTracking';
+
+import {
+  enableHydrationChangeEvent,
+  enableScrollEndPolyfill,
+  enableSrcObject,
+  enableTrustedTypesIntegration,
+  enableViewTransition,
+} from 'shared/ReactFeatureFlags';
+import {
+  mediaEventTypes,
+  listenToNonDelegatedEvent,
+} from '../events/DOMPluginEventSystem';
+
+let didWarnControlledToUncontrolled = false;
+let didWarnUncontrolledToControlled = false;
+let didWarnFormActionType = false;
+let didWarnFormActionName = false;
+let didWarnFormActionTarget = false;
+let didWarnFormActionMethod = false;
+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
+let didWarnPopoverTargetObject = false;
+if (__DEV__) {
+  didWarnForNewBooleanPropsWithEmptyValue = {};
+}
+
+function validatePropertiesInDevelopment(type: string, props: any) {
+  if (__DEV__) {
+    validateARIAProperties(type, props);
+    validateInputProperties(type, props);
+    validateUnknownProperties(type, props, {
+      registrationNameDependencies,
+      possibleRegistrationNames,
+    });
+    if (
+      props.contentEditable &&
+      !props.suppressContentEditableWarning &&
+      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.',
+      );
+    }
+  }
+}
+
+function validateFormActionInDevelopment(
+  tag: string,
+  key: string,
+  value: mixed,
+  props: any,
+) {
+  if (__DEV__) {
+    if (value == null) {
+      return;
+    }
+    if (tag === 'form') {
+      if (key === 'formAction') {
+        console.error(
+          'You can only pass the formAction prop to <input> or <button>. Use the action prop on <form>.',
+        );
+      } else if (typeof value === 'function') {
+        if (
+          (props.encType != null || props.method != null) &&
+          !didWarnFormActionMethod
+        ) {
+          didWarnFormActionMethod = true;
+          console.error(
+            'Cannot specify a encType or method for a form that specifies a ' +
+              'function as the action. React provides those automatically. ' +
+              'They will get overridden.',
+          );
+        }
+        if (props.target != null && !didWarnFormActionTarget) {
+          didWarnFormActionTarget = true;
+          console.error(
+            'Cannot specify a target for a form that specifies a function as the action. ' +
+              'The function will always be executed in the same window.',
+          );
+        }
+      }
+    } else if (tag === 'input' || tag === 'button') {
+      if (key === 'action') {
+        console.error(
+          'You can only pass the action prop to <form>. Use the formAction prop on <input> or <button>.',
+        );
+      } else if (
+        tag === 'input' &&
+        props.type !== 'submit' &&
+        props.type !== 'image' &&
+        !didWarnFormActionType
+      ) {
+        didWarnFormActionType = true;
+        console.error(
+          'An input can only specify a formAction along with type="submit" or type="image".',
+        );
+      } else if (
+        tag === 'button' &&
+        props.type != null &&
+        props.type !== 'submit' &&
+        !didWarnFormActionType
+      ) {
+        didWarnFormActionType = true;
+        console.error(
+          'A button can only specify a formAction along with type="submit" or no type.',
+        );
+      } else if (typeof value === 'function') {
+        // Function form actions cannot control the form properties
+        if (props.name != null && !didWarnFormActionName) {
+          didWarnFormActionName = true;
+          console.error(
+            'Cannot specify a "name" prop for a button that specifies a function as a formAction. ' +
+              'React needs it to encode which action should be invoked. It will get overridden.',
+          );
+        }
+        if (
+          (props.formEncType != null || props.formMethod != null) &&
+          !didWarnFormActionMethod
+        ) {
+          didWarnFormActionMethod = true;
+          console.error(
+            'Cannot specify a formEncType or formMethod for a button that specifies a ' +
+              'function as a formAction. React provides those automatically. They will get overridden.',
+          );
+        }
+        if (props.formTarget != null && !didWarnFormActionTarget) {
+          didWarnFormActionTarget = true;
+          console.error(
+            'Cannot specify a formTarget for a button that specifies a function as a formAction. ' +
+              'The function will always be executed in the same window.',
+          );
+        }
+      }
+    } else {
+      if (key === 'action') {
+        console.error('You can only pass the action prop to <form>.');
+      } else {
+        console.error(
+          'You can only pass the formAction prop to <input> or <button>.',
+        );
+      }
+    }
+  }
+}
+
+function warnForPropDifference(
+  propName: string,
+  serverValue: mixed,
+  clientValue: mixed,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  if (__DEV__) {
+    if (serverValue === clientValue) {
+      return;
+    }
+    const normalizedClientValue =
+      normalizeMarkupForTextOrAttribute(clientValue);
+    const normalizedServerValue =
+      normalizeMarkupForTextOrAttribute(serverValue);
+    if (normalizedServerValue === normalizedClientValue) {
+      return;
+    }
+
+    serverDifferences[propName] = serverValue;
+  }
+}
+
+function hasViewTransition(htmlElement: HTMLElement): boolean {
+  return !!(
+    htmlElement.getAttribute('vt-share') ||
+    htmlElement.getAttribute('vt-exit') ||
+    htmlElement.getAttribute('vt-enter') ||
+    htmlElement.getAttribute('vt-update')
+  );
+}
+
+function isExpectedViewTransitionName(htmlElement: HTMLElement): boolean {
+  if (!hasViewTransition(htmlElement)) {
+    // We didn't expect to see a view transition name applied.
+    return false;
+  }
+  const expectedVtName = htmlElement.getAttribute('vt-name');
+  const actualVtName: string = (htmlElement.style: any)['view-transition-name'];
+  if (expectedVtName) {
+    return expectedVtName === actualVtName;
+  } else {
+    // Auto-generated name.
+    // TODO: If Fizz starts applying a prefix to this name, we need to consider that.
+    return actualVtName.startsWith('_T_');
+  }
+}
+
+function warnForExtraAttributes(
+  domElement: Element,
+  attributeNames: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+) {
+  if (__DEV__) {
+    attributeNames.forEach(function (attributeName) {
+      if (attributeName === 'style') {
+        if (domElement.getAttribute(attributeName) === '') {
+          // Skip empty style. It's fine.
+          return;
+        }
+        const htmlElement = ((domElement: any): HTMLElement);
+        const style = htmlElement.style;
+        const isOnlyVTStyles =
+          (style.length === 1 && style[0] === 'view-transition-name') ||
+          (style.length === 2 &&
+            style[0] === 'view-transition-class' &&
+            style[1] === 'view-transition-name');
+        if (isOnlyVTStyles && isExpectedViewTransitionName(htmlElement)) {
+          // If the only extra style was the view-transition-name that we applied from the Fizz
+          // runtime, then we should ignore it.
+        } else {
+          serverDifferences.style = getStylesObjectFromElement(domElement);
+        }
+      } else {
+        serverDifferences[getPropNameFromAttributeName(attributeName)] =
+          domElement.getAttribute(attributeName);
+      }
+    });
+  }
+}
+
+function warnForInvalidEventListener(registrationName: string, listener: any) {
+  if (__DEV__) {
+    if (listener === 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.',
+        registrationName,
+        registrationName,
+        registrationName,
+      );
+    } else {
+      console.error(
+        'Expected `%s` listener to be a function, instead got a value of `%s` type.',
+        registrationName,
+        typeof listener,
+      );
+    }
+  }
+}
+
+// Parse the HTML and read it back to normalize the HTML string so that it
+// can be used for comparison.
+function normalizeHTML(parent: Element, html: string) {
+  if (__DEV__) {
+    // We could have created a separate document here to avoid
+    // re-initializing custom elements if they exist. But this breaks
+    // how <noscript> is being handled. So we use the same document.
+    // See the discussion in https://github.com/facebook/react/pull/11157.
+    const testElement =
+      parent.namespaceURI === MATH_NAMESPACE ||
+      parent.namespaceURI === SVG_NAMESPACE
+        ? parent.ownerDocument.createElementNS(
+            (parent.namespaceURI: any),
+            parent.tagName,
+          )
+        : parent.ownerDocument.createElement(parent.tagName);
+    testElement.innerHTML = html;
+    return testElement.innerHTML;
+  }
+}
+
+// HTML parsing normalizes CR and CRLF to LF.
+// It also can turn \u0000 into \uFFFD inside attributes.
+// https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
+// If we have a mismatch, it might be caused by that.
+// We will still patch up in this case but not fire the warning.
+const NORMALIZE_NEWLINES_REGEX = /\r\n?/g;
+const NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
+
+function normalizeMarkupForTextOrAttribute(markup: mixed): string {
+  if (__DEV__) {
+    checkHtmlStringCoercion(markup);
+  }
+  const markupString = typeof markup === 'string' ? markup : '' + (markup: any);
+  return markupString
+    .replace(NORMALIZE_NEWLINES_REGEX, '\n')
+    .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
+}
+
+function checkForUnmatchedText(
+  serverText: string,
+  clientText: string | number | bigint,
+) {
+  const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
+  const normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
+  if (normalizedServerText === normalizedClientText) {
+    return true;
+  }
+  return false;
+}
+
+export function trapClickOnNonInteractiveElement(node: HTMLElement) {
+  // Mobile Safari does not fire properly bubble click events on
+  // non-interactive elements, which means delegated click listeners do not
+  // fire. The workaround for this bug involves attaching an empty click
+  // listener on the target node.
+  // https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+  // Just set it using the onclick property so that we don't have to manage any
+  // bookkeeping for it. Not sure if we need to clear it when the listener is
+  // removed.
+  // TODO: Only do this for the relevant Safaris maybe?
+  node.onclick = noop;
+}
+
+const xlinkNamespace = 'http://www.w3.org/1999/xlink';
+const xmlNamespace = 'http://www.w3.org/XML/1998/namespace';
+
+function setProp(
+  domElement: Element,
+  tag: string,
+  key: string,
+  value: mixed,
+  props: any,
+  prevValue: mixed,
+): void {
+  switch (key) {
+    case 'children': {
+      if (typeof value === 'string') {
+        if (__DEV__) {
+          validateTextNesting(value, tag, false);
+        }
+        // Avoid setting initial textContent when the text is empty. In IE11 setting
+        // textContent on a <textarea> will cause the placeholder to not
+        // show within the <textarea> until it has been focused and blurred again.
+        // https://github.com/facebook/react/issues/6731#issuecomment-254874553
+        const canSetTextContent =
+          tag !== 'body' && (tag !== 'textarea' || value !== '');
+        if (canSetTextContent) {
+          setTextContent(domElement, value);
+        }
+      } else if (typeof value === 'number' || typeof value === 'bigint') {
+        if (__DEV__) {
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+          validateTextNesting('' + value, tag, false);
+        }
+        const canSetTextContent = tag !== 'body';
+        if (canSetTextContent) {
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+          setTextContent(domElement, '' + value);
+        }
+      } else {
+        return;
+      }
+      break;
+    }
+    // These are very common props and therefore are in the beginning of the switch.
+    // TODO: aria-label is a very common prop but allows booleans so is not like the others
+    // but should ideally go in this list too.
+    case 'className':
+      setValueForKnownAttribute(domElement, 'class', value);
+      break;
+    case 'tabIndex':
+      // This has to be case sensitive in SVG.
+      setValueForKnownAttribute(domElement, 'tabindex', value);
+      break;
+    case 'dir':
+    case 'role':
+    case 'viewBox':
+    case 'width':
+    case 'height': {
+      setValueForKnownAttribute(domElement, key, value);
+      break;
+    }
+    case 'style': {
+      setValueForStyles(domElement, value, prevValue);
+      return;
+    }
+    // These attributes accept URLs. These must not allow javascript: URLS.
+    case 'data':
+      if (tag !== 'object') {
+        setValueForKnownAttribute(domElement, 'data', value);
+        break;
+      }
+    // fallthrough
+    case 'src': {
+      if (enableSrcObject && typeof value === 'object' && value !== null) {
+        // Some tags support object sources like Blob, File, MediaSource and MediaStream.
+        if (tag === 'img' || tag === 'video' || tag === 'audio') {
+          try {
+            setSrcObject(domElement, tag, value);
+            break;
+          } catch (x) {
+            // If URL.createObjectURL() errors, it was probably some other object type
+            // that should be toString:ed instead, so we just fall-through to the normal
+            // path.
+          }
+        } else {
+          if (__DEV__) {
+            try {
+              // This should always error.
+              URL.revokeObjectURL(URL.createObjectURL((value: any)));
+              if (tag === 'source') {
+                console.error(
+                  'Passing Blob, MediaSource or MediaStream to <source src> is not supported. ' +
+                    'Pass it directly to <img src>, <video src> or <audio src> instead.',
+                );
+              } else {
+                console.error(
+                  'Passing Blob, MediaSource or MediaStream to <%s src> is not supported.',
+                  tag,
+                );
+              }
+            } catch (x) {}
+          }
+        }
+      }
+      // Fallthrough
+    }
+    case 'href': {
+      if (
+        value === '' &&
+        // <a href=""> is fine for "reload" links.
+        !(tag === 'a' && key === 'href')
+      ) {
+        if (__DEV__) {
+          if (key === 'src') {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'This may cause the browser to download the whole page again over the network. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              key,
+              key,
+            );
+          } else {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              key,
+              key,
+            );
+          }
+        }
+        domElement.removeAttribute(key);
+        break;
+      }
+      if (
+        value == null ||
+        typeof value === 'function' ||
+        typeof value === 'symbol' ||
+        typeof value === 'boolean'
+      ) {
+        domElement.removeAttribute(key);
+        break;
+      }
+      // `setAttribute` with objects becomes only `[object]` in IE8/9,
+      // ('' + value) makes it output the correct toString()-value.
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, key);
+      }
+      const sanitizedValue = (sanitizeURL(
+        enableTrustedTypesIntegration ? value : '' + (value: any),
+      ): any);
+      domElement.setAttribute(key, sanitizedValue);
+      break;
+    }
+    case 'action':
+    case 'formAction': {
+      // TODO: Consider moving these special cases to the form, input and button tags.
+      if (__DEV__) {
+        validateFormActionInDevelopment(tag, key, value, props);
+      }
+      if (typeof value === 'function') {
+        // Set a javascript URL that doesn't do anything. We don't expect this to be invoked
+        // because we'll preventDefault, but it can happen if a form is manually submitted or
+        // if someone calls stopPropagation before React gets the event.
+        // If CSP is used to block javascript: URLs that's fine too. It just won't show this
+        // error message but the URL will be logged.
+        domElement.setAttribute(
+          key,
+          // eslint-disable-next-line no-script-url
+          "javascript:throw new Error('" +
+            'A React form was unexpectedly submitted. If you called form.submit() manually, ' +
+            "consider using form.requestSubmit() instead. If you\\'re trying to use " +
+            'event.stopPropagation() in a submit event handler, consider also calling ' +
+            'event.preventDefault().' +
+            "')",
+        );
+        break;
+      } else if (typeof prevValue === 'function') {
+        // When we're switching off a Server Action that was originally hydrated.
+        // The server control these fields during SSR that are now trailing.
+        // The regular diffing doesn't apply since we compare against the previous props.
+        // Instead, we need to force them to be set to whatever they should be now.
+        // This would be a lot cleaner if we did this whole fork in the per-tag approach.
+        if (key === 'formAction') {
+          if (tag !== 'input') {
+            // Setting the name here isn't completely safe for inputs if this is switching
+            // to become a radio button. In that case we let the tag based override take
+            // control.
+            setProp(domElement, tag, 'name', props.name, props, null);
+          }
+          setProp(
+            domElement,
+            tag,
+            'formEncType',
+            props.formEncType,
+            props,
+            null,
+          );
+          setProp(domElement, tag, 'formMethod', props.formMethod, props, null);
+          setProp(domElement, tag, 'formTarget', props.formTarget, props, null);
+        } else {
+          setProp(domElement, tag, 'encType', props.encType, props, null);
+          setProp(domElement, tag, 'method', props.method, props, null);
+          setProp(domElement, tag, 'target', props.target, props, null);
+        }
+      }
+      if (
+        value == null ||
+        typeof value === 'symbol' ||
+        typeof value === 'boolean'
+      ) {
+        domElement.removeAttribute(key);
+        break;
+      }
+      // `setAttribute` with objects becomes only `[object]` in IE8/9,
+      // ('' + value) makes it output the correct toString()-value.
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, key);
+      }
+      const sanitizedValue = (sanitizeURL(
+        enableTrustedTypesIntegration ? value : '' + (value: any),
+      ): any);
+      domElement.setAttribute(key, sanitizedValue);
+      break;
+    }
+    case 'onClick': {
+      // TODO: This cast may not be sound for SVG, MathML or custom elements.
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
+      }
+      return;
+    }
+    case 'onScroll': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        listenToNonDelegatedEvent('scroll', domElement);
+      }
+      return;
+    }
+    case 'onScrollEnd': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        listenToNonDelegatedEvent('scrollend', domElement);
+        if (enableScrollEndPolyfill) {
+          // For use by the polyfill.
+          listenToNonDelegatedEvent('scroll', domElement);
+        }
+      }
+      return;
+    }
+    case 'dangerouslySetInnerHTML': {
+      if (value != null) {
+        if (typeof value !== 'object' || !('__html' in value)) {
+          throw new Error(
+            '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+              'Please visit https://react.dev/link/dangerously-set-inner-html ' +
+              'for more information.',
+          );
+        }
+        const nextHtml: any = value.__html;
+        if (nextHtml != null) {
+          if (props.children != null) {
+            throw new Error(
+              'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+            );
+          }
+          domElement.innerHTML = nextHtml;
+        }
+      }
+      break;
+    }
+    // Note: `option.selected` is not updated if `select.multiple` is
+    // disabled with `removeAttribute`. We have special logic for handling this.
+    case 'multiple': {
+      (domElement: any).multiple =
+        value && typeof value !== 'function' && typeof value !== 'symbol';
+      break;
+    }
+    case 'muted': {
+      (domElement: any).muted =
+        value && typeof value !== 'function' && typeof value !== 'symbol';
+      break;
+    }
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'defaultValue': // Reserved
+    case 'defaultChecked':
+    case 'innerHTML':
+    case 'ref': {
+      // TODO: `ref` is pretty common, should we move it up?
+      // Noop
+      break;
+    }
+    case 'autoFocus': {
+      // We polyfill it separately on the client during commit.
+      // We could have excluded it in the property list instead of
+      // adding a special case here, but then it wouldn't be emitted
+      // on server rendering (but we *do* want to emit it in SSR).
+      break;
+    }
+    case 'xlinkHref': {
+      if (
+        value == null ||
+        typeof value === 'function' ||
+        typeof value === 'boolean' ||
+        typeof value === 'symbol'
+      ) {
+        domElement.removeAttribute('xlink:href');
+        break;
+      }
+      // `setAttribute` with objects becomes only `[object]` in IE8/9,
+      // ('' + value) makes it output the correct toString()-value.
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, key);
+      }
+      const sanitizedValue = (sanitizeURL(
+        enableTrustedTypesIntegration ? value : '' + (value: any),
+      ): any);
+      domElement.setAttributeNS(xlinkNamespace, 'xlink:href', sanitizedValue);
+      break;
+    }
+    case 'contentEditable':
+    case 'spellCheck':
+    case 'draggable':
+    case 'value':
+    case 'autoReverse':
+    case 'externalResourcesRequired':
+    case 'focusable':
+    case 'preserveAlpha': {
+      // Booleanish String
+      // These are "enumerated" attributes that accept "true" and "false".
+      // In React, we let users pass `true` and `false` even though technically
+      // these aren't boolean attributes (they are coerced to strings).
+      // The SVG attributes are case-sensitive. Since the HTML attributes are
+      // insensitive they also work even though we canonically use lower case.
+      if (
+        value != null &&
+        typeof value !== 'function' &&
+        typeof value !== 'symbol'
+      ) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, key);
+        }
+        domElement.setAttribute(
+          key,
+          enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+        );
+      } else {
+        domElement.removeAttribute(key);
+      }
+      break;
+    }
+    // Boolean
+    case 'inert': {
+      if (__DEV__) {
+        if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[key]) {
+          didWarnForNewBooleanPropsWithEmptyValue[key] = true;
+          console.error(
+            'Received an empty string for a boolean attribute `%s`. ' +
+              'This will treat the attribute as if it were false. ' +
+              'Either pass `false` to silence this warning, or ' +
+              'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+            key,
+          );
+        }
+      }
+    }
+    // Fallthrough for boolean props that don't have a warning for empty strings.
+    case 'allowFullScreen':
+    case 'async':
+    case 'autoPlay':
+    case 'controls':
+    case 'default':
+    case 'defer':
+    case 'disabled':
+    case 'disablePictureInPicture':
+    case 'disableRemotePlayback':
+    case 'formNoValidate':
+    case 'hidden':
+    case 'loop':
+    case 'noModule':
+    case 'noValidate':
+    case 'open':
+    case 'playsInline':
+    case 'readOnly':
+    case 'required':
+    case 'reversed':
+    case 'scoped':
+    case 'seamless':
+    case 'itemScope': {
+      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+        domElement.setAttribute(key, '');
+      } else {
+        domElement.removeAttribute(key);
+      }
+      break;
+    }
+    // Overloaded Boolean
+    case 'capture':
+    case 'download': {
+      // An attribute that can be used as a flag as well as with a value.
+      // When true, it should be present (set either to an empty string or its name).
+      // When false, it should be omitted.
+      // For any other value, should be present with that value.
+      if (value === true) {
+        domElement.setAttribute(key, '');
+      } else if (
+        value !== false &&
+        value != null &&
+        typeof value !== 'function' &&
+        typeof value !== 'symbol'
+      ) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, key);
+        }
+        domElement.setAttribute(key, (value: any));
+      } else {
+        domElement.removeAttribute(key);
+      }
+      break;
+    }
+    case 'cols':
+    case 'rows':
+    case 'size':
+    case 'span': {
+      // These are HTML attributes that must be positive numbers.
+      if (
+        value != null &&
+        typeof value !== 'function' &&
+        typeof value !== 'symbol' &&
+        !isNaN(value) &&
+        (value: any) >= 1
+      ) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, key);
+        }
+        domElement.setAttribute(key, (value: any));
+      } else {
+        domElement.removeAttribute(key);
+      }
+      break;
+    }
+    case 'rowSpan':
+    case 'start': {
+      // These are HTML attributes that must be numbers.
+      if (
+        value != null &&
+        typeof value !== 'function' &&
+        typeof value !== 'symbol' &&
+        !isNaN(value)
+      ) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, key);
+        }
+        domElement.setAttribute(key, (value: any));
+      } else {
+        domElement.removeAttribute(key);
+      }
+      break;
+    }
+    case 'popover':
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
+      setValueForAttribute(domElement, 'popover', value);
+      break;
+    case 'xlinkActuate':
+      setValueForNamespacedAttribute(
+        domElement,
+        xlinkNamespace,
+        'xlink:actuate',
+        value,
+      );
+      break;
+    case 'xlinkArcrole':
+      setValueForNamespacedAttribute(
+        domElement,
+        xlinkNamespace,
+        'xlink:arcrole',
+        value,
+      );
+      break;
+    case 'xlinkRole':
+      setValueForNamespacedAttribute(
+        domElement,
+        xlinkNamespace,
+        'xlink:role',
+        value,
+      );
+      break;
+    case 'xlinkShow':
+      setValueForNamespacedAttribute(
+        domElement,
+        xlinkNamespace,
+        'xlink:show',
+        value,
+      );
+      break;
+    case 'xlinkTitle':
+      setValueForNamespacedAttribute(
+        domElement,
+        xlinkNamespace,
+        'xlink:title',
+        value,
+      );
+      break;
+    case 'xlinkType':
+      setValueForNamespacedAttribute(
+        domElement,
+        xlinkNamespace,
+        'xlink:type',
+        value,
+      );
+      break;
+    case 'xmlBase':
+      setValueForNamespacedAttribute(
+        domElement,
+        xmlNamespace,
+        'xml:base',
+        value,
+      );
+      break;
+    case 'xmlLang':
+      setValueForNamespacedAttribute(
+        domElement,
+        xmlNamespace,
+        'xml:lang',
+        value,
+      );
+      break;
+    case 'xmlSpace':
+      setValueForNamespacedAttribute(
+        domElement,
+        xmlNamespace,
+        'xml:space',
+        value,
+      );
+      break;
+    // Properties that should not be allowed on custom elements.
+    case 'is': {
+      if (__DEV__) {
+        if (prevValue != null) {
+          console.error(
+            'Cannot update the "is" prop after it has been initialized.',
+          );
+        }
+      }
+      // TODO: We shouldn't actually set this attribute, because we've already
+      // passed it to createElement. We don't also need the attribute.
+      // However, our tests currently query for it so it's plausible someone
+      // else does too so it's break.
+      setValueForAttribute(domElement, 'is', value);
+      break;
+    }
+    case 'innerText':
+    case 'textContent':
+      return;
+    case 'popoverTarget':
+      if (__DEV__) {
+        if (
+          !didWarnPopoverTargetObject &&
+          value != null &&
+          typeof value === 'object'
+        ) {
+          didWarnPopoverTargetObject = true;
+          console.error(
+            'The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.',
+            value,
+          );
+        }
+      }
+    // Fall through
+    default: {
+      if (
+        key.length > 2 &&
+        (key[0] === 'o' || key[0] === 'O') &&
+        (key[1] === 'n' || key[1] === 'N')
+      ) {
+        if (
+          __DEV__ &&
+          registrationNameDependencies.hasOwnProperty(key) &&
+          value != null &&
+          typeof value !== 'function'
+        ) {
+          warnForInvalidEventListener(key, value);
+        }
+        // Updating events doesn't affect the visuals.
+        return;
+      } else {
+        const attributeName = getAttributeAlias(key);
+        setValueForAttribute(domElement, attributeName, value);
+      }
+    }
+  }
+  // To avoid marking things as host mutations we do early returns above.
+  trackHostMutation();
+}
+
+function setPropOnCustomElement(
+  domElement: Element,
+  tag: string,
+  key: string,
+  value: mixed,
+  props: any,
+  prevValue: mixed,
+): void {
+  switch (key) {
+    case 'style': {
+      setValueForStyles(domElement, value, prevValue);
+      return;
+    }
+    case 'dangerouslySetInnerHTML': {
+      if (value != null) {
+        if (typeof value !== 'object' || !('__html' in value)) {
+          throw new Error(
+            '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+              'Please visit https://react.dev/link/dangerously-set-inner-html ' +
+              'for more information.',
+          );
+        }
+        const nextHtml: any = value.__html;
+        if (nextHtml != null) {
+          if (props.children != null) {
+            throw new Error(
+              'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+            );
+          }
+          domElement.innerHTML = nextHtml;
+        }
+      }
+      break;
+    }
+    case 'children': {
+      if (typeof value === 'string') {
+        setTextContent(domElement, value);
+      } else if (typeof value === 'number' || typeof value === 'bigint') {
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+        setTextContent(domElement, '' + value);
+      } else {
+        return;
+      }
+      break;
+    }
+    case 'onScroll': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        listenToNonDelegatedEvent('scroll', domElement);
+      }
+      return;
+    }
+    case 'onScrollEnd': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        listenToNonDelegatedEvent('scrollend', domElement);
+        if (enableScrollEndPolyfill) {
+          // For use by the polyfill.
+          listenToNonDelegatedEvent('scroll', domElement);
+        }
+      }
+      return;
+    }
+    case 'onClick': {
+      // TODO: This cast may not be sound for SVG, MathML or custom elements.
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
+      }
+      return;
+    }
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'innerHTML':
+    case 'ref': {
+      // Noop
+      return;
+    }
+    case 'innerText': // Properties
+    case 'textContent':
+      return;
+    // Fall through
+    default: {
+      if (registrationNameDependencies.hasOwnProperty(key)) {
+        if (__DEV__ && value != null && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        return;
+      } else {
+        setValueForPropertyOnCustomComponent(domElement, key, value);
+        // We track mutations inside this call.
+        return;
+      }
+    }
+  }
+  // To avoid marking things as host mutations we do early returns above.
+  trackHostMutation();
+}
+
+export function setInitialProperties(
+  domElement: Element,
+  tag: string,
+  props: Object,
+): void {
+  if (__DEV__) {
+    validatePropertiesInDevelopment(tag, props);
+  }
+
+  // TODO: Make sure that we check isMounted before firing any of these events.
+
+  switch (tag) {
+    case 'div':
+    case 'span':
+    case 'svg':
+    case 'path':
+    case 'a':
+    case 'g':
+    case 'p':
+    case 'li': {
+      // Fast track the most common tag types
+      break;
+    }
+    // img tags previously were implemented as void elements with non delegated events however Safari (and possibly Firefox)
+    // begin fetching the image as soon as the `src` or `srcSet` property is set and if we set these before other properties
+    // that can modify the request (such as crossorigin) or the resource fetch (such as sizes) then the browser will load
+    // the wrong thing or load more than one thing. This implementation ensures src and srcSet are set on the instance last
+    case 'img': {
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
+      // Mostly a port of Void Element logic with special casing to ensure srcset and src are set last
+      let hasSrc = false;
+      let hasSrcSet = false;
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'src':
+            hasSrc = true;
+            break;
+          case 'srcSet':
+            hasSrcSet = true;
+            break;
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            // TODO: Can we make this a DEV warning to avoid this deny list?
+            throw new Error(
+              `${tag} is a void element tag and must neither have \`children\` nor ` +
+                'use `dangerouslySetInnerHTML`.',
+            );
+          }
+          // defaultChecked and defaultValue are ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, props, null);
+          }
+        }
+      }
+      if (hasSrcSet) {
+        setProp(domElement, tag, 'srcSet', props.srcSet, props, null);
+      }
+      if (hasSrc) {
+        setProp(domElement, tag, 'src', props.src, props, null);
+      }
+      return;
+    }
+    case 'input': {
+      if (__DEV__) {
+        checkControlledValueProps('input', props);
+      }
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+
+      let name = null;
+      let type = null;
+      let value = null;
+      let defaultValue = null;
+      let checked = null;
+      let defaultChecked = null;
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'name': {
+            name = propValue;
+            break;
+          }
+          case 'type': {
+            type = propValue;
+            break;
+          }
+          case 'checked': {
+            checked = propValue;
+            break;
+          }
+          case 'defaultChecked': {
+            defaultChecked = propValue;
+            break;
+          }
+          case 'value': {
+            value = propValue;
+            break;
+          }
+          case 'defaultValue': {
+            defaultValue = propValue;
+            break;
+          }
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              throw new Error(
+                `${tag} is a void element tag and must neither have \`children\` nor ` +
+                  'use `dangerouslySetInnerHTML`.',
+              );
+            }
+            break;
+          }
+          default: {
+            setProp(domElement, tag, propKey, propValue, props, null);
+          }
+        }
+      }
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      validateInputProps(domElement, props);
+      initInput(
+        domElement,
+        value,
+        defaultValue,
+        checked,
+        defaultChecked,
+        type,
+        name,
+        false,
+      );
+      return;
+    }
+    case 'select': {
+      if (__DEV__) {
+        checkControlledValueProps('select', props);
+      }
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      let value = null;
+      let defaultValue = null;
+      let multiple = null;
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'value': {
+            value = propValue;
+            // This is handled by initSelect below.
+            break;
+          }
+          case 'defaultValue': {
+            defaultValue = propValue;
+            // This is handled by initSelect below.
+            break;
+          }
+          case 'multiple': {
+            multiple = propValue;
+            // TODO: We don't actually have to fall through here because we set it
+            // in initSelect anyway. We can remove the special case in setProp.
+          }
+          // Fallthrough
+          default: {
+            setProp(domElement, tag, propKey, propValue, props, null);
+          }
+        }
+      }
+      validateSelectProps(domElement, props);
+      initSelect(domElement, value, defaultValue, multiple);
+      return;
+    }
+    case 'textarea': {
+      if (__DEV__) {
+        checkControlledValueProps('textarea', props);
+      }
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      let value = null;
+      let defaultValue = null;
+      let children = null;
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'value': {
+            value = propValue;
+            // This is handled by initTextarea below.
+            break;
+          }
+          case 'defaultValue': {
+            defaultValue = propValue;
+            break;
+          }
+          case 'children': {
+            children = propValue;
+            // Handled by initTextarea above.
+            break;
+          }
+          case 'dangerouslySetInnerHTML': {
+            if (propValue != null) {
+              // TODO: Do we really need a special error message for this. It's also pretty blunt.
+              throw new Error(
+                '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+              );
+            }
+            break;
+          }
+          default: {
+            setProp(domElement, tag, propKey, propValue, props, null);
+          }
+        }
+      }
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      validateTextareaProps(domElement, props);
+      initTextarea(domElement, value, defaultValue, children);
+      return;
+    }
+    case 'option': {
+      validateOptionProps(domElement, props);
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'selected': {
+            // TODO: Remove support for selected on option.
+            (domElement: any).selected =
+              propValue &&
+              typeof propValue !== 'function' &&
+              typeof propValue !== 'symbol';
+            break;
+          }
+          default: {
+            setProp(domElement, tag, propKey, propValue, props, null);
+          }
+        }
+      }
+      return;
+    }
+    case 'dialog': {
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
+      listenToNonDelegatedEvent('cancel', domElement);
+      listenToNonDelegatedEvent('close', domElement);
+      break;
+    }
+    case 'iframe':
+    case 'object': {
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the load event.
+      listenToNonDelegatedEvent('load', domElement);
+      break;
+    }
+    case 'video':
+    case 'audio': {
+      // We listen to these events in case to ensure emulated bubble
+      // listeners still fire for all the media events.
+      for (let i = 0; i < mediaEventTypes.length; i++) {
+        listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
+      }
+      break;
+    }
+    case 'image': {
+      // We listen to these events in case to ensure emulated bubble
+      // listeners still fire for error and load events.
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
+      break;
+    }
+    case 'details': {
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the toggle event.
+      listenToNonDelegatedEvent('toggle', domElement);
+      break;
+    }
+    case 'embed':
+    case 'source':
+    case 'link': {
+      // These are void elements that also need delegated events.
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
+      // We fallthrough to the return of the void elements
+    }
+    case 'area':
+    case 'base':
+    case 'br':
+    case 'col':
+    case 'hr':
+    case 'keygen':
+    case 'meta':
+    case 'param':
+    case 'track':
+    case 'wbr':
+    case 'menuitem': {
+      // Void elements
+      for (const propKey in props) {
+        if (!props.hasOwnProperty(propKey)) {
+          continue;
+        }
+        const propValue = props[propKey];
+        if (propValue == null) {
+          continue;
+        }
+        switch (propKey) {
+          case 'children':
+          case 'dangerouslySetInnerHTML': {
+            // TODO: Can we make this a DEV warning to avoid this deny list?
+            throw new Error(
+              `${tag} is a void element tag and must neither have \`children\` nor ` +
+                'use `dangerouslySetInnerHTML`.',
+            );
+          }
+          // defaultChecked and defaultValue are ignored by setProp
+          default: {
+            setProp(domElement, tag, propKey, propValue, props, null);
+          }
+        }
+      }
+      return;
+    }
+    default: {
+      if (isCustomElement(tag, props)) {
+        for (const propKey in props) {
+          if (!props.hasOwnProperty(propKey)) {
+            continue;
+          }
+          const propValue = props[propKey];
+          if (propValue === undefined) {
+            continue;
+          }
+          setPropOnCustomElement(
+            domElement,
+            tag,
+            propKey,
+            propValue,
+            props,
+            undefined,
+          );
+        }
+        return;
+      }
+    }
+  }
+
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
+    }
+    const propValue = props[propKey];
+    if (propValue == null) {
+      continue;
+    }
+    setProp(domElement, tag, propKey, propValue, props, null);
+  }
+}
+
+export function updateProperties(
+  domElement: Element,
+  tag: string,
+  lastProps: Object,
+  nextProps: Object,
+): void {
+  if (__DEV__) {
+    validatePropertiesInDevelopment(tag, nextProps);
+  }
+
+  switch (tag) {
+    case 'div':
+    case 'span':
+    case 'svg':
+    case 'path':
+    case 'a':
+    case 'g':
+    case 'p':
+    case 'li': {
+      // Fast track the most common tag types
+      break;
+    }
+    case 'input': {
+      let name = null;
+      let type = null;
+      let value = null;
+      let defaultValue = null;
+      let lastDefaultValue = null;
+      let checked = null;
+      let defaultChecked = null;
+      for (const propKey in lastProps) {
+        const lastProp = lastProps[propKey];
+        if (lastProps.hasOwnProperty(propKey) && lastProp != null) {
+          switch (propKey) {
+            case 'checked': {
+              break;
+            }
+            case 'value': {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            case 'defaultValue': {
+              lastDefaultValue = lastProp;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+            // Fallthrough
+            default: {
+              if (!nextProps.hasOwnProperty(propKey))
+                setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+      for (const propKey in nextProps) {
+        const nextProp = nextProps[propKey];
+        const lastProp = lastProps[propKey];
+        if (
+          nextProps.hasOwnProperty(propKey) &&
+          (nextProp != null || lastProp != null)
+        ) {
+          switch (propKey) {
+            case 'type': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              type = nextProp;
+              break;
+            }
+            case 'name': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              name = nextProp;
+              break;
+            }
+            case 'checked': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              checked = nextProp;
+              break;
+            }
+            case 'defaultChecked': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              defaultChecked = nextProp;
+              break;
+            }
+            case 'value': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              value = nextProp;
+              break;
+            }
+            case 'defaultValue': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              defaultValue = nextProp;
+              break;
+            }
+            case 'children':
+            case 'dangerouslySetInnerHTML': {
+              if (nextProp != null) {
+                throw new Error(
+                  `${tag} is a void element tag and must neither have \`children\` nor ` +
+                    'use `dangerouslySetInnerHTML`.',
+                );
+              }
+              break;
+            }
+            default: {
+              if (nextProp !== lastProp)
+                setProp(
+                  domElement,
+                  tag,
+                  propKey,
+                  nextProp,
+                  nextProps,
+                  lastProp,
+                );
+            }
+          }
+        }
+      }
+
+      if (__DEV__) {
+        const wasControlled =
+          lastProps.type === 'checkbox' || lastProps.type === 'radio'
+            ? lastProps.checked != null
+            : lastProps.value != null;
+        const isControlled =
+          nextProps.type === 'checkbox' || nextProps.type === 'radio'
+            ? nextProps.checked != null
+            : nextProps.value != null;
+
+        if (
+          !wasControlled &&
+          isControlled &&
+          !didWarnUncontrolledToControlled
+        ) {
+          console.error(
+            'A component is changing an uncontrolled input to be controlled. ' +
+              'This is likely caused by the value changing from undefined to ' +
+              'a defined value, which should not happen. ' +
+              'Decide between using a controlled or uncontrolled input ' +
+              'element for the lifetime of the component. More info: https://react.dev/link/controlled-components',
+          );
+          didWarnUncontrolledToControlled = true;
+        }
+        if (
+          wasControlled &&
+          !isControlled &&
+          !didWarnControlledToUncontrolled
+        ) {
+          console.error(
+            'A component is changing a controlled input to be uncontrolled. ' +
+              'This is likely caused by the value changing from a defined to ' +
+              'undefined, which should not happen. ' +
+              'Decide between using a controlled or uncontrolled input ' +
+              'element for the lifetime of the component. More info: https://react.dev/link/controlled-components',
+          );
+          didWarnControlledToUncontrolled = true;
+        }
+      }
+
+      // Update the wrapper around inputs *after* updating props. This has to
+      // happen after updating the rest of props. Otherwise HTML5 input validations
+      // raise warnings and prevent the new value from being assigned.
+      updateInput(
+        domElement,
+        value,
+        defaultValue,
+        lastDefaultValue,
+        checked,
+        defaultChecked,
+        type,
+        name,
+      );
+      return;
+    }
+    case 'select': {
+      let value = null;
+      let defaultValue = null;
+      let multiple = null;
+      let wasMultiple = null;
+      for (const propKey in lastProps) {
+        const lastProp = lastProps[propKey];
+        if (lastProps.hasOwnProperty(propKey) && lastProp != null) {
+          switch (propKey) {
+            case 'value': {
+              // This is handled by updateWrapper below.
+              break;
+            }
+            // defaultValue are ignored by setProp
+            case 'multiple': {
+              wasMultiple = lastProp;
+              // TODO: Move special case in here from setProp.
+            }
+            // Fallthrough
+            default: {
+              if (!nextProps.hasOwnProperty(propKey)) {
+                setProp(domElement, tag, propKey, null, nextProps, lastProp);
+              }
+            }
+          }
+        }
+      }
+      for (const propKey in nextProps) {
+        const nextProp = nextProps[propKey];
+        const lastProp = lastProps[propKey];
+        if (
+          nextProps.hasOwnProperty(propKey) &&
+          (nextProp != null || lastProp != null)
+        ) {
+          switch (propKey) {
+            case 'value': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              value = nextProp;
+              // This is handled by updateSelect below.
+              break;
+            }
+            case 'defaultValue': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              defaultValue = nextProp;
+              break;
+            }
+            case 'multiple': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              multiple = nextProp;
+              // TODO: Just move the special case in here from setProp.
+            }
+            // Fallthrough
+            default: {
+              if (nextProp !== lastProp)
+                setProp(
+                  domElement,
+                  tag,
+                  propKey,
+                  nextProp,
+                  nextProps,
+                  lastProp,
+                );
+            }
+          }
+        }
+      }
+      // <select> value update needs to occur after <option> children
+      // reconciliation
+      updateSelect(domElement, value, defaultValue, multiple, wasMultiple);
+      return;
+    }
+    case 'textarea': {
+      let value = null;
+      let defaultValue = null;
+      for (const propKey in lastProps) {
+        const lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          switch (propKey) {
+            case 'value': {
+              // This is handled by updateTextarea below.
+              break;
+            }
+            case 'children': {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+            // defaultValue is ignored by setProp
+            default: {
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+      for (const propKey in nextProps) {
+        const nextProp = nextProps[propKey];
+        const lastProp = lastProps[propKey];
+        if (
+          nextProps.hasOwnProperty(propKey) &&
+          (nextProp != null || lastProp != null)
+        ) {
+          switch (propKey) {
+            case 'value': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              value = nextProp;
+              // This is handled by updateTextarea below.
+              break;
+            }
+            case 'defaultValue': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              defaultValue = nextProp;
+              break;
+            }
+            case 'children': {
+              // TODO: This doesn't actually do anything if it updates.
+              break;
+            }
+            case 'dangerouslySetInnerHTML': {
+              if (nextProp != null) {
+                // TODO: Do we really need a special error message for this. It's also pretty blunt.
+                throw new Error(
+                  '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+                );
+              }
+              break;
+            }
+            default: {
+              if (nextProp !== lastProp)
+                setProp(
+                  domElement,
+                  tag,
+                  propKey,
+                  nextProp,
+                  nextProps,
+                  lastProp,
+                );
+            }
+          }
+        }
+      }
+      updateTextarea(domElement, value, defaultValue);
+      return;
+    }
+    case 'option': {
+      for (const propKey in lastProps) {
+        const lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          switch (propKey) {
+            case 'selected': {
+              // TODO: Remove support for selected on option.
+              (domElement: any).selected = false;
+              break;
+            }
+            default: {
+              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+            }
+          }
+        }
+      }
+      for (const propKey in nextProps) {
+        const nextProp = nextProps[propKey];
+        const lastProp = lastProps[propKey];
+        if (
+          nextProps.hasOwnProperty(propKey) &&
+          nextProp !== lastProp &&
+          (nextProp != null || lastProp != null)
+        ) {
+          switch (propKey) {
+            case 'selected': {
+              if (nextProp !== lastProp) {
+                trackHostMutation();
+              }
+              // TODO: Remove support for selected on option.
+              (domElement: any).selected =
+                nextProp &&
+                typeof nextProp !== 'function' &&
+                typeof nextProp !== 'symbol';
+              break;
+            }
+            default: {
+              setProp(domElement, tag, propKey, nextProp, nextProps, lastProp);
+            }
+          }
+        }
+      }
+      return;
+    }
+    case 'img':
+    case 'link':
+    case 'area':
+    case 'base':
+    case 'br':
+    case 'col':
+    case 'embed':
+    case 'hr':
+    case 'keygen':
+    case 'meta':
+    case 'param':
+    case 'source':
+    case 'track':
+    case 'wbr':
+    case 'menuitem': {
+      // Void elements
+      for (const propKey in lastProps) {
+        const lastProp = lastProps[propKey];
+        if (
+          lastProps.hasOwnProperty(propKey) &&
+          lastProp != null &&
+          !nextProps.hasOwnProperty(propKey)
+        ) {
+          setProp(domElement, tag, propKey, null, nextProps, lastProp);
+        }
+      }
+      for (const propKey in nextProps) {
+        const nextProp = nextProps[propKey];
+        const lastProp = lastProps[propKey];
+        if (
+          nextProps.hasOwnProperty(propKey) &&
+          nextProp !== lastProp &&
+          (nextProp != null || lastProp != null)
+        ) {
+          switch (propKey) {
+            case 'children':
+            case 'dangerouslySetInnerHTML': {
+              if (nextProp != null) {
+                // TODO: Can we make this a DEV warning to avoid this deny list?
+                throw new Error(
+                  `${tag} is a void element tag and must neither have \`children\` nor ` +
+                    'use `dangerouslySetInnerHTML`.',
+                );
+              }
+              break;
+            }
+            // defaultChecked and defaultValue are ignored by setProp
+            default: {
+              setProp(domElement, tag, propKey, nextProp, nextProps, lastProp);
+            }
+          }
+        }
+      }
+      return;
+    }
+    default: {
+      if (isCustomElement(tag, nextProps)) {
+        for (const propKey in lastProps) {
+          const lastProp = lastProps[propKey];
+          if (
+            lastProps.hasOwnProperty(propKey) &&
+            lastProp !== undefined &&
+            !nextProps.hasOwnProperty(propKey)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              propKey,
+              undefined,
+              nextProps,
+              lastProp,
+            );
+          }
+        }
+        for (const propKey in nextProps) {
+          const nextProp = nextProps[propKey];
+          const lastProp = lastProps[propKey];
+          if (
+            nextProps.hasOwnProperty(propKey) &&
+            nextProp !== lastProp &&
+            (nextProp !== undefined || lastProp !== undefined)
+          ) {
+            setPropOnCustomElement(
+              domElement,
+              tag,
+              propKey,
+              nextProp,
+              nextProps,
+              lastProp,
+            );
+          }
+        }
+        return;
+      }
+    }
+  }
+
+  for (const propKey in lastProps) {
+    const lastProp = lastProps[propKey];
+    if (
+      lastProps.hasOwnProperty(propKey) &&
+      lastProp != null &&
+      !nextProps.hasOwnProperty(propKey)
+    ) {
+      setProp(domElement, tag, propKey, null, nextProps, lastProp);
+    }
+  }
+  for (const propKey in nextProps) {
+    const nextProp = nextProps[propKey];
+    const lastProp = lastProps[propKey];
+    if (
+      nextProps.hasOwnProperty(propKey) &&
+      nextProp !== lastProp &&
+      (nextProp != null || lastProp != null)
+    ) {
+      setProp(domElement, tag, propKey, nextProp, nextProps, lastProp);
+    }
+  }
+}
+
+function getPossibleStandardName(propName: string): string | null {
+  if (__DEV__) {
+    const lowerCasedName = propName.toLowerCase();
+    if (!possibleStandardNames.hasOwnProperty(lowerCasedName)) {
+      return null;
+    }
+    return possibleStandardNames[lowerCasedName] || null;
+  }
+  return null;
+}
+
+function getPropNameFromAttributeName(attrName: string): string {
+  switch (attrName) {
+    case 'class':
+      return 'className';
+    case 'for':
+      return 'htmlFor';
+    // TODO: The rest of the aliases.
+    default:
+      return attrName;
+  }
+}
+
+export function getPropsFromElement(domElement: Element): Object {
+  const serverDifferences: {[propName: string]: mixed} = {};
+  const attributes = domElement.attributes;
+  for (let i = 0; i < attributes.length; i++) {
+    const attr = attributes[i];
+    serverDifferences[getPropNameFromAttributeName(attr.name)] =
+      attr.name.toLowerCase() === 'style'
+        ? getStylesObjectFromElement(domElement)
+        : attr.value;
+  }
+  return serverDifferences;
+}
+
+function getStylesObjectFromElement(domElement: Element): {
+  [styleName: string]: string,
+} {
+  const serverValueInObjectForm: {[prop: string]: string} = {};
+  const htmlElement: HTMLElement = (domElement: any);
+  const style = htmlElement.style;
+  for (let i = 0; i < style.length; i++) {
+    const styleName: string = style[i];
+    // TODO: We should use the original prop value here if it is equivalent.
+    // TODO: We could use the original client capitalization if the equivalent
+    // other capitalization exists in the DOM.
+    if (
+      styleName === 'view-transition-name' &&
+      isExpectedViewTransitionName(htmlElement)
+    ) {
+      // This is a view transition name added by the Fizz runtime, not the user's props.
+    } else {
+      serverValueInObjectForm[styleName] = style.getPropertyValue(styleName);
+    }
+  }
+  return serverValueInObjectForm;
+}
+
+function diffHydratedStyles(
+  domElement: Element,
+  value: mixed,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  if (value != null && typeof value !== 'object') {
+    if (__DEV__) {
+      console.error(
+        'The `style` prop expects a mapping from style properties to values, ' +
+          "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+          'using JSX.',
+      );
+    }
+    return;
+  }
+  // First we compare the string form and see if it's equivalent.
+  // This lets us bail out on anything that used to pass in this form.
+  // It also lets us compare anything that's not parsed by this browser.
+  const clientValue = createDangerousStringForStyles(value);
+  const serverValue = domElement.getAttribute('style');
+
+  if (serverValue === clientValue) {
+    return;
+  }
+  const normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
+  const normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
+  if (normalizedServerValue === normalizedClientValue) {
+    return;
+  }
+
+  if (
+    // Trailing semi-colon means this was regenerated.
+    normalizedServerValue[normalizedServerValue.length - 1] === ';' &&
+    // TODO: Should we just ignore any style if the style as been manipulated?
+    hasViewTransition((domElement: any))
+  ) {
+    // If this had a view transition we might have applied a view transition
+    // name/class and removed it. If that happens, the style attribute gets
+    // regenerated from the style object. This means we've lost the format
+    // that we sent from the server and is unable to diff it. We just treat
+    // it as passing even if it should be a mismatch in this edge case.
+    return;
+  }
+
+  // Otherwise, we create the object from the DOM for the diff view.
+  serverDifferences.style = getStylesObjectFromElement(domElement);
+}
+
+function hydrateAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+      case 'boolean':
+        return;
+    }
+  } else {
+    if (value == null) {
+      // We had an attribute but shouldn't have had one, so read it
+      // for the error message.
+    } else {
+      switch (typeof value) {
+        case 'function':
+        case 'symbol':
+        case 'boolean':
+          break;
+        default: {
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, propKey);
+          }
+          if (serverValue === '' + value) {
+            return;
+          }
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydrateBooleanAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'function':
+      case 'symbol':
+        return;
+    }
+    if (!value) {
+      return;
+    }
+  } else {
+    switch (typeof value) {
+      case 'function':
+      case 'symbol':
+        break;
+      default: {
+        if (value) {
+          // If this was a boolean, it doesn't matter what the value is
+          // the fact that we have it is the same as the expected.
+          // As long as it's positive.
+          return;
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydrateOverloadedBooleanAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+        return;
+      default:
+        if (value === false) {
+          return;
+        }
+    }
+  } else {
+    if (value == null) {
+      // We had an attribute but shouldn't have had one, so read it
+      // for the error message.
+    } else {
+      switch (typeof value) {
+        case 'function':
+        case 'symbol':
+          break;
+        case 'boolean':
+          if (value === true && serverValue === '') {
+            return;
+          }
+          break;
+        default: {
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, propKey);
+          }
+          if (serverValue === '' + value) {
+            return;
+          }
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydrateBooleanishAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+        return;
+    }
+  } else {
+    if (value == null) {
+      // We had an attribute but shouldn't have had one, so read it
+      // for the error message.
+    } else {
+      switch (typeof value) {
+        case 'function':
+        case 'symbol':
+          break;
+        default: {
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, attributeName);
+          }
+          if (serverValue === '' + (value: any)) {
+            return;
+          }
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydrateNumericAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+      case 'boolean':
+        return;
+      default:
+        if (isNaN(value)) {
+          return;
+        }
+    }
+  } else {
+    if (value == null) {
+      // We had an attribute but shouldn't have had one, so read it
+      // for the error message.
+    } else {
+      switch (typeof value) {
+        case 'function':
+        case 'symbol':
+        case 'boolean':
+          break;
+        default: {
+          if (isNaN(value)) {
+            // We had an attribute but shouldn't have had one, so read it
+            // for the error message.
+            break;
+          }
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, propKey);
+          }
+          if (serverValue === '' + value) {
+            return;
+          }
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydratePositiveNumericAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+      case 'boolean':
+        return;
+      default:
+        if (isNaN(value) || value < 1) {
+          return;
+        }
+    }
+  } else {
+    if (value == null) {
+      // We had an attribute but shouldn't have had one, so read it
+      // for the error message.
+    } else {
+      switch (typeof value) {
+        case 'function':
+        case 'symbol':
+        case 'boolean':
+          break;
+        default: {
+          if (isNaN(value) || value < 1) {
+            // We had an attribute but shouldn't have had one, so read it
+            // for the error message.
+            break;
+          }
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, propKey);
+          }
+          if (serverValue === '' + value) {
+            return;
+          }
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydrateSanitizedAttribute(
+  domElement: Element,
+  propKey: string,
+  attributeName: string,
+  value: any,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue === null) {
+    switch (typeof value) {
+      case 'undefined':
+      case 'function':
+      case 'symbol':
+      case 'boolean':
+        return;
+    }
+  } else {
+    if (value == null) {
+      // We had an attribute but shouldn't have had one, so read it
+      // for the error message.
+    } else {
+      switch (typeof value) {
+        case 'function':
+        case 'symbol':
+        case 'boolean':
+          break;
+        default: {
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, propKey);
+          }
+          const sanitizedValue = sanitizeURL('' + value);
+          if (serverValue === sanitizedValue) {
+            return;
+          }
+        }
+      }
+    }
+  }
+  warnForPropDifference(propKey, serverValue, value, serverDifferences);
+}
+
+function hydrateSrcObjectAttribute(
+  domElement: Element,
+  value: Blob,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+): void {
+  const attributeName = 'src';
+  extraAttributes.delete(attributeName);
+  const serverValue = domElement.getAttribute(attributeName);
+  if (serverValue != null && value != null) {
+    const size = value.size;
+    const type = value.type;
+    if (typeof size === 'number' && typeof type === 'string') {
+      if (serverValue.indexOf('data:' + type + ';base64,') === 0) {
+        // For Blobs we don't bother reading the actual data but just diff by checking if
+        // the byte length size of the Blob maches the length of the data url.
+        const prefixLength = 5 + type.length + 8;
+        let byteLength = ((serverValue.length - prefixLength) / 4) * 3;
+        if (serverValue[serverValue.length - 1] === '=') {
+          byteLength--;
+        }
+        if (serverValue[serverValue.length - 2] === '=') {
+          byteLength--;
+        }
+        if (byteLength === size) {
+          return;
+        }
+      }
+    }
+  }
+  warnForPropDifference('src', serverValue, value, serverDifferences);
+}
+
+function diffHydratedCustomComponent(
+  domElement: Element,
+  tag: string,
+  props: Object,
+  hostContext: HostContext,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+) {
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
+    }
+    const value = props[propKey];
+    if (value == null) {
+      continue;
+    }
+    if (registrationNameDependencies.hasOwnProperty(propKey)) {
+      if (typeof value !== 'function') {
+        warnForInvalidEventListener(propKey, value);
+      }
+      continue;
+    }
+    if (props.suppressHydrationWarning === true) {
+      // Don't bother comparing. We're ignoring all these warnings.
+      continue;
+    }
+    // Validate that the properties correspond to their expected values.
+    switch (propKey) {
+      case 'children': {
+        if (typeof value === 'string' || typeof value === 'number') {
+          warnForPropDifference(
+            'children',
+            domElement.textContent,
+            value,
+            serverDifferences,
+          );
+        }
+        continue;
+      }
+      // Checked above already
+      case 'suppressContentEditableWarning':
+      case 'suppressHydrationWarning':
+      case 'defaultValue':
+      case 'defaultChecked':
+      case 'innerHTML':
+      case 'ref':
+        // Noop
+        continue;
+      case 'dangerouslySetInnerHTML':
+        const serverHTML = domElement.innerHTML;
+        const nextHtml = value ? value.__html : undefined;
+        if (nextHtml != null) {
+          const expectedHTML = normalizeHTML(domElement, nextHtml);
+          warnForPropDifference(
+            propKey,
+            serverHTML,
+            expectedHTML,
+            serverDifferences,
+          );
+        }
+        continue;
+      case 'style':
+        extraAttributes.delete(propKey);
+        diffHydratedStyles(domElement, value, serverDifferences);
+        continue;
+      case 'offsetParent':
+      case 'offsetTop':
+      case 'offsetLeft':
+      case 'offsetWidth':
+      case 'offsetHeight':
+      case 'isContentEditable':
+      case 'outerText':
+      case 'outerHTML':
+        extraAttributes.delete(propKey.toLowerCase());
+        if (__DEV__) {
+          console.error(
+            'Assignment to read-only property will result in a no-op: `%s`',
+            propKey,
+          );
+        }
+        continue;
+      // Fall through
+      case 'className':
+        // className is a special cased property on the server to render as an attribute.
+        extraAttributes.delete('class');
+        const serverValue = getValueForAttributeOnCustomComponent(
+          domElement,
+          'class',
+          value,
+        );
+        warnForPropDifference(
+          'className',
+          serverValue,
+          value,
+          serverDifferences,
+        );
+        continue;
+      default: {
+        // This is a DEV-only path
+        const hostContextDev: HostContextDev = (hostContext: any);
+        const hostContextProd = hostContextDev.context;
+        if (
+          hostContextProd === HostContextNamespaceNone &&
+          tag !== 'svg' &&
+          tag !== 'math'
+        ) {
+          extraAttributes.delete(propKey.toLowerCase());
+        } else {
+          extraAttributes.delete(propKey);
+        }
+        const valueOnCustomComponent = getValueForAttributeOnCustomComponent(
+          domElement,
+          propKey,
+          value,
+        );
+        warnForPropDifference(
+          propKey,
+          valueOnCustomComponent,
+          value,
+          serverDifferences,
+        );
+      }
+    }
+  }
+}
+
+// This is the exact URL string we expect that Fizz renders if we provide a function action.
+// We use this for hydration warnings. It needs to be in sync with Fizz. Maybe makes sense
+// as a shared module for that reason.
+const EXPECTED_FORM_ACTION_URL =
+  // eslint-disable-next-line no-script-url
+  "javascript:throw new Error('React form unexpectedly submitted.')";
+
+function diffHydratedGenericElement(
+  domElement: Element,
+  tag: string,
+  props: Object,
+  hostContext: HostContext,
+  extraAttributes: Set<string>,
+  serverDifferences: {[propName: string]: mixed},
+) {
+  for (const propKey in props) {
+    if (!props.hasOwnProperty(propKey)) {
+      continue;
+    }
+    const value = props[propKey];
+    if (value == null) {
+      continue;
+    }
+    if (registrationNameDependencies.hasOwnProperty(propKey)) {
+      if (typeof value !== 'function') {
+        warnForInvalidEventListener(propKey, value);
+      }
+      continue;
+    }
+    if (props.suppressHydrationWarning === true) {
+      // Don't bother comparing. We're ignoring all these warnings.
+      continue;
+    }
+    // Validate that the properties correspond to their expected values.
+    switch (propKey) {
+      case 'children': {
+        if (typeof value === 'string' || typeof value === 'number') {
+          warnForPropDifference(
+            'children',
+            domElement.textContent,
+            value,
+            serverDifferences,
+          );
+        }
+        continue;
+      }
+      // Checked above already
+      case 'suppressContentEditableWarning':
+      case 'suppressHydrationWarning':
+      case 'value': // Controlled attributes are not validated
+      case 'checked': // TODO: Only ignore them on controlled tags.
+      case 'selected':
+      case 'defaultValue':
+      case 'defaultChecked':
+      case 'innerHTML':
+      case 'ref':
+        // Noop
+        continue;
+      case 'dangerouslySetInnerHTML':
+        const serverHTML = domElement.innerHTML;
+        const nextHtml = value ? value.__html : undefined;
+        if (nextHtml != null) {
+          const expectedHTML = normalizeHTML(domElement, nextHtml);
+          if (serverHTML !== expectedHTML) {
+            serverDifferences[propKey] = {
+              __html: serverHTML,
+            };
+          }
+        }
+        continue;
+      case 'className':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'class',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'tabIndex':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'tabindex',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'style':
+        extraAttributes.delete(propKey);
+        diffHydratedStyles(domElement, value, serverDifferences);
+        continue;
+      case 'multiple': {
+        extraAttributes.delete(propKey);
+        const serverValue = (domElement: any).multiple;
+        warnForPropDifference(propKey, serverValue, value, serverDifferences);
+        continue;
+      }
+      case 'muted': {
+        extraAttributes.delete(propKey);
+        const serverValue = (domElement: any).muted;
+        warnForPropDifference(propKey, serverValue, value, serverDifferences);
+        continue;
+      }
+      case 'autoFocus': {
+        extraAttributes.delete('autofocus');
+        const serverValue = (domElement: any).autofocus;
+        warnForPropDifference(propKey, serverValue, value, serverDifferences);
+        continue;
+      }
+      case 'data':
+        if (tag !== 'object') {
+          extraAttributes.delete(propKey);
+          const serverValue = (domElement: any).getAttribute('data');
+          warnForPropDifference(propKey, serverValue, value, serverDifferences);
+          continue;
+        }
+      // fallthrough
+      case 'src': {
+        if (enableSrcObject && typeof value === 'object' && value !== null) {
+          // Some tags support object sources like Blob, File, MediaSource and MediaStream.
+          if (tag === 'img' || tag === 'video' || tag === 'audio') {
+            try {
+              // Test if this is a compatible object
+              URL.revokeObjectURL(URL.createObjectURL((value: any)));
+              hydrateSrcObjectAttribute(
+                domElement,
+                value,
+                extraAttributes,
+                serverDifferences,
+              );
+              continue;
+            } catch (x) {
+              // If not, just fall through to the normal toString flow.
+            }
+          } else {
+            if (__DEV__) {
+              try {
+                // This should always error.
+                URL.revokeObjectURL(URL.createObjectURL((value: any)));
+                if (tag === 'source') {
+                  console.error(
+                    'Passing Blob, MediaSource or MediaStream to <source src> is not supported. ' +
+                      'Pass it directly to <img src>, <video src> or <audio src> instead.',
+                  );
+                } else {
+                  console.error(
+                    'Passing Blob, MediaSource or MediaStream to <%s src> is not supported.',
+                    tag,
+                  );
+                }
+              } catch (x) {}
+            }
+          }
+        }
+        // Fallthrough
+      }
+      case 'href':
+        if (
+          value === '' &&
+          // <a href=""> is fine for "reload" links.
+          !(tag === 'a' && propKey === 'href') &&
+          !(tag === 'object' && propKey === 'data')
+        ) {
+          if (__DEV__) {
+            if (propKey === 'src') {
+              console.error(
+                'An empty string ("") was passed to the %s attribute. ' +
+                  'This may cause the browser to download the whole page again over the network. ' +
+                  'To fix this, either do not render the element at all ' +
+                  'or pass null to %s instead of an empty string.',
+                propKey,
+                propKey,
+              );
+            } else {
+              console.error(
+                'An empty string ("") was passed to the %s attribute. ' +
+                  'To fix this, either do not render the element at all ' +
+                  'or pass null to %s instead of an empty string.',
+                propKey,
+                propKey,
+              );
+            }
+          }
+          continue;
+        }
+        hydrateSanitizedAttribute(
+          domElement,
+          propKey,
+          propKey,
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'action':
+      case 'formAction': {
+        const serverValue = domElement.getAttribute(propKey);
+        if (typeof value === 'function') {
+          extraAttributes.delete(propKey.toLowerCase());
+          // The server can set these extra properties to implement actions.
+          // So we remove them from the extra attributes warnings.
+          if (propKey === 'formAction') {
+            extraAttributes.delete('name');
+            extraAttributes.delete('formenctype');
+            extraAttributes.delete('formmethod');
+            extraAttributes.delete('formtarget');
+          } else {
+            extraAttributes.delete('enctype');
+            extraAttributes.delete('method');
+            extraAttributes.delete('target');
+          }
+          // Ideally we should be able to warn if the server value was not a function
+          // however since the function can return any of these attributes any way it
+          // wants as a custom progressive enhancement, there's nothing to compare to.
+          // We can check if the function has the $FORM_ACTION property on the client
+          // and if it's not, warn, but that's an unnecessary constraint that they
+          // have to have the extra extension that doesn't do anything on the client.
+          continue;
+        } else if (serverValue === EXPECTED_FORM_ACTION_URL) {
+          extraAttributes.delete(propKey.toLowerCase());
+          warnForPropDifference(propKey, 'function', value, serverDifferences);
+          continue;
+        }
+        hydrateSanitizedAttribute(
+          domElement,
+          propKey,
+          propKey.toLowerCase(),
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'xlinkHref':
+        hydrateSanitizedAttribute(
+          domElement,
+          propKey,
+          'xlink:href',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'contentEditable': {
+        // Lower-case Booleanish String
+        hydrateBooleanishAttribute(
+          domElement,
+          propKey,
+          'contenteditable',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'spellCheck': {
+        // Lower-case Booleanish String
+        hydrateBooleanishAttribute(
+          domElement,
+          propKey,
+          'spellcheck',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'draggable':
+      case 'autoReverse':
+      case 'externalResourcesRequired':
+      case 'focusable':
+      case 'preserveAlpha': {
+        // Case-sensitive Booleanish String
+        hydrateBooleanishAttribute(
+          domElement,
+          propKey,
+          propKey,
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'allowFullScreen':
+      case 'async':
+      case 'autoPlay':
+      case 'controls':
+      case 'default':
+      case 'defer':
+      case 'disabled':
+      case 'disablePictureInPicture':
+      case 'disableRemotePlayback':
+      case 'formNoValidate':
+      case 'hidden':
+      case 'loop':
+      case 'noModule':
+      case 'noValidate':
+      case 'open':
+      case 'playsInline':
+      case 'readOnly':
+      case 'required':
+      case 'reversed':
+      case 'scoped':
+      case 'seamless':
+      case 'itemScope': {
+        // Some of these need to be lower case to remove them from the extraAttributes list.
+        hydrateBooleanAttribute(
+          domElement,
+          propKey,
+          propKey.toLowerCase(),
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'capture':
+      case 'download': {
+        hydrateOverloadedBooleanAttribute(
+          domElement,
+          propKey,
+          propKey,
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'cols':
+      case 'rows':
+      case 'size':
+      case 'span': {
+        hydratePositiveNumericAttribute(
+          domElement,
+          propKey,
+          propKey,
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'rowSpan': {
+        hydrateNumericAttribute(
+          domElement,
+          propKey,
+          'rowspan',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'start': {
+        hydrateNumericAttribute(
+          domElement,
+          propKey,
+          propKey,
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      }
+      case 'xHeight':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'x-height',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xlinkActuate':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xlink:actuate',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xlinkArcrole':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xlink:arcrole',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xlinkRole':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xlink:role',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xlinkShow':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xlink:show',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xlinkTitle':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xlink:title',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xlinkType':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xlink:type',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xmlBase':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xml:base',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xmlLang':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xml:lang',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'xmlSpace':
+        hydrateAttribute(
+          domElement,
+          propKey,
+          'xml:space',
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      case 'inert':
+        if (__DEV__) {
+          if (
+            value === '' &&
+            !didWarnForNewBooleanPropsWithEmptyValue[propKey]
+          ) {
+            didWarnForNewBooleanPropsWithEmptyValue[propKey] = true;
+            console.error(
+              'Received an empty string for a boolean attribute `%s`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+              propKey,
+            );
+          }
+        }
+        hydrateBooleanAttribute(
+          domElement,
+          propKey,
+          propKey,
+          value,
+          extraAttributes,
+          serverDifferences,
+        );
+        continue;
+      default: {
+        if (
+          // shouldIgnoreAttribute
+          // We have already filtered out null/undefined and reserved words.
+          propKey.length > 2 &&
+          (propKey[0] === 'o' || propKey[0] === 'O') &&
+          (propKey[1] === 'n' || propKey[1] === 'N')
+        ) {
+          continue;
+        }
+        const attributeName = getAttributeAlias(propKey);
+        let isMismatchDueToBadCasing = false;
+
+        // This is a DEV-only path
+        const hostContextDev: HostContextDev = (hostContext: any);
+        const hostContextProd = hostContextDev.context;
+
+        if (
+          hostContextProd === HostContextNamespaceNone &&
+          tag !== 'svg' &&
+          tag !== 'math'
+        ) {
+          extraAttributes.delete(attributeName.toLowerCase());
+        } else {
+          const standardName = getPossibleStandardName(propKey);
+          if (standardName !== null && standardName !== propKey) {
+            // If an SVG prop is supplied with bad casing, it will
+            // be successfully parsed from HTML, but will produce a mismatch
+            // (and would be incorrectly rendered on the client).
+            // However, we already warn about bad casing elsewhere.
+            // So we'll skip the misleading extra mismatch warning in this case.
+            isMismatchDueToBadCasing = true;
+            extraAttributes.delete(standardName);
+          }
+          extraAttributes.delete(attributeName);
+        }
+        const serverValue = getValueForAttribute(
+          domElement,
+          attributeName,
+          value,
+        );
+        if (!isMismatchDueToBadCasing) {
+          warnForPropDifference(propKey, serverValue, value, serverDifferences);
+        }
+      }
+    }
+  }
+}
+
+export function hydrateProperties(
+  domElement: Element,
+  tag: string,
+  props: Object,
+  hostContext: HostContext,
+): boolean {
+  if (__DEV__) {
+    validatePropertiesInDevelopment(tag, props);
+  }
+
+  // TODO: Make sure that we check isMounted before firing any of these events.
+  switch (tag) {
+    case 'dialog':
+      listenToNonDelegatedEvent('cancel', domElement);
+      listenToNonDelegatedEvent('close', domElement);
+      break;
+    case 'iframe':
+    case 'object':
+    case 'embed':
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the load event.
+      listenToNonDelegatedEvent('load', domElement);
+      break;
+    case 'video':
+    case 'audio':
+      // We listen to these events in case to ensure emulated bubble
+      // listeners still fire for all the media events.
+      for (let i = 0; i < mediaEventTypes.length; i++) {
+        listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
+      }
+      break;
+    case 'source':
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the error event.
+      listenToNonDelegatedEvent('error', domElement);
+      break;
+    case 'img':
+    case 'image':
+    case 'link':
+      // We listen to these events in case to ensure emulated bubble
+      // listeners still fire for error and load events.
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
+      break;
+    case 'details':
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the toggle event.
+      listenToNonDelegatedEvent('toggle', domElement);
+      break;
+    case 'input':
+      if (__DEV__) {
+        checkControlledValueProps('input', props);
+      }
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      validateInputProps(domElement, props);
+      // For input and textarea we current always set the value property at
+      // post mount to force it to diverge from attributes. However, for
+      // option and select we don't quite do the same thing and select
+      // is not resilient to the DOM state changing so we don't do that here.
+      // TODO: Consider not doing this for input and textarea.
+      if (!enableHydrationChangeEvent) {
+        initInput(
+          domElement,
+          props.value,
+          props.defaultValue,
+          props.checked,
+          props.defaultChecked,
+          props.type,
+          props.name,
+          true,
+        );
+      }
+      break;
+    case 'option':
+      validateOptionProps(domElement, props);
+      break;
+    case 'select':
+      if (__DEV__) {
+        checkControlledValueProps('select', props);
+      }
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      validateSelectProps(domElement, props);
+      break;
+    case 'textarea':
+      if (__DEV__) {
+        checkControlledValueProps('textarea', props);
+      }
+      // We listen to this event in case to ensure emulated bubble
+      // listeners still fire for the invalid event.
+      listenToNonDelegatedEvent('invalid', domElement);
+      // TODO: Make sure we check if this is still unmounted or do any clean
+      // up necessary since we never stop tracking anymore.
+      validateTextareaProps(domElement, props);
+      if (!enableHydrationChangeEvent) {
+        initTextarea(
+          domElement,
+          props.value,
+          props.defaultValue,
+          props.children,
+        );
+      }
+      break;
+  }
+
+  const children = props.children;
+  // For text content children we compare against textContent. This
+  // might match additional HTML that is hidden when we read it using
+  // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
+  // satisfies our requirement. Our requirement is not to produce perfect
+  // HTML and attributes. Ideally we should preserve structure but it's
+  // ok not to if the visible content is still enough to indicate what
+  // even listeners these nodes might be wired up to.
+  // TODO: Warn if there is more than a single textNode as a child.
+  // TODO: Should we use domElement.firstChild.nodeValue to compare?
+  if (
+    typeof children === 'string' ||
+    typeof children === 'number' ||
+    typeof children === 'bigint'
+  ) {
+    if (
+      // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+      domElement.textContent !== '' + children &&
+      props.suppressHydrationWarning !== true &&
+      !checkForUnmatchedText(domElement.textContent, children)
+    ) {
+      return false;
+    }
+  }
+
+  if (props.popover != null) {
+    // We listen to this event in case to ensure emulated bubble
+    // listeners still fire for the toggle event.
+    listenToNonDelegatedEvent('beforetoggle', domElement);
+    listenToNonDelegatedEvent('toggle', domElement);
+  }
+
+  if (props.onScroll != null) {
+    listenToNonDelegatedEvent('scroll', domElement);
+  }
+
+  if (props.onScrollEnd != null) {
+    listenToNonDelegatedEvent('scrollend', domElement);
+    if (enableScrollEndPolyfill) {
+      // For use by the polyfill.
+      listenToNonDelegatedEvent('scroll', domElement);
+    }
+  }
+
+  if (props.onClick != null) {
+    // TODO: This cast may not be sound for SVG, MathML or custom elements.
+    trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
+  }
+
+  return true;
+}
+
+export function diffHydratedProperties(
+  domElement: Element,
+  tag: string,
+  props: Object,
+  hostContext: HostContext,
+): null | Object {
+  const serverDifferences: {[propName: string]: mixed} = {};
+  if (__DEV__) {
+    const extraAttributes: Set<string> = new Set();
+    const attributes = domElement.attributes;
+    for (let i = 0; i < attributes.length; i++) {
+      const name = attributes[i].name.toLowerCase();
+      switch (name) {
+        // Controlled attributes are not validated
+        // TODO: Only ignore them on controlled tags.
+        case 'value':
+          break;
+        case 'checked':
+          break;
+        case 'selected':
+          break;
+        case 'vt-name':
+        case 'vt-update':
+        case 'vt-enter':
+        case 'vt-exit':
+        case 'vt-share':
+          if (enableViewTransition) {
+            // View Transition annotations are expected from the Server Runtime.
+            // However, if they're also specified on the client and don't match
+            // that's an error.
+            break;
+          }
+        // Fallthrough
+        default:
+          // Intentionally use the original name.
+          // See discussion in https://github.com/facebook/react/pull/10676.
+          extraAttributes.add(attributes[i].name);
+      }
+    }
+    if (isCustomElement(tag, props)) {
+      diffHydratedCustomComponent(
+        domElement,
+        tag,
+        props,
+        hostContext,
+        extraAttributes,
+        serverDifferences,
+      );
+    } else {
+      diffHydratedGenericElement(
+        domElement,
+        tag,
+        props,
+        hostContext,
+        extraAttributes,
+        serverDifferences,
+      );
+    }
+    if (extraAttributes.size > 0 && props.suppressHydrationWarning !== true) {
+      warnForExtraAttributes(domElement, extraAttributes, serverDifferences);
+    }
+  }
+  if (Object.keys(serverDifferences).length === 0) {
+    return null;
+  }
+  return serverDifferences;
+}
+
+export function hydrateText(
+  textNode: Text,
+  text: string,
+  parentProps: null | Object,
+): boolean {
+  const isDifferent = textNode.nodeValue !== text;
+  if (
+    isDifferent &&
+    (parentProps === null || parentProps.suppressHydrationWarning !== true) &&
+    !checkForUnmatchedText(textNode.nodeValue, text)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+export function diffHydratedText(textNode: Text, text: string): null | string {
+  if (textNode.nodeValue === text) {
+    return null;
+  }
+  const normalizedClientText = normalizeMarkupForTextOrAttribute(text);
+  const normalizedServerText = normalizeMarkupForTextOrAttribute(
+    textNode.nodeValue,
+  );
+  if (normalizedServerText === normalizedClientText) {
+    return null;
+  }
+  return textNode.nodeValue;
+}
+
+export function restoreControlledState(
+  domElement: Element,
+  tag: string,
+  props: Object,
+): void {
+  switch (tag) {
+    case 'input':
+      restoreControlledInputState(domElement, props);
+      return;
+    case 'textarea':
+      restoreControlledTextareaState(domElement, props);
+      return;
+    case 'select':
+      restoreControlledSelectState(domElement, props);
+      return;
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
new file mode 100644
index 00000000000..01e4fcde95c
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
@@ -0,0 +1,399 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {ReactScopeInstance} from 'shared/ReactTypes';
+import type {
+  ReactDOMEventHandle,
+  ReactDOMEventHandleListener,
+} from './ReactDOMEventHandleTypes';
+import type {
+  Container,
+  TextInstance,
+  Instance,
+  ActivityInstance,
+  SuspenseInstance,
+  Props,
+  HoistableRoot,
+  RootResources,
+} from './ReactFiberConfigDOM';
+
+import {
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  HostRoot,
+  SuspenseComponent,
+  ActivityComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+
+import {getParentHydrationBoundary} from './ReactFiberConfigDOM';
+
+import {enableScopeAPI} from 'shared/ReactFeatureFlags';
+
+import {enableInternalInstanceMap} from 'shared/ReactFeatureFlags';
+
+const randomKey = Math.random().toString(36).slice(2);
+const internalInstanceKey = '__reactFiber$' + randomKey;
+const internalPropsKey = '__reactProps$' + randomKey;
+const internalContainerInstanceKey = '__reactContainer$' + randomKey;
+const internalEventHandlersKey = '__reactEvents$' + randomKey;
+const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
+const internalEventHandlesSetKey = '__reactHandles$' + randomKey;
+const internalRootNodeResourcesKey = '__reactResources$' + randomKey;
+const internalHoistableMarker = '__reactMarker$' + randomKey;
+const internalScrollTimer = '__reactScroll$' + randomKey;
+
+type InstanceUnion =
+  | Instance
+  | TextInstance
+  | SuspenseInstance
+  | ActivityInstance
+  | ReactScopeInstance
+  | Container;
+
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+const internalInstanceMap:
+  | WeakMap<InstanceUnion, Fiber>
+  | Map<InstanceUnion, Fiber> = new PossiblyWeakMap();
+const internalPropsMap:
+  | WeakMap<InstanceUnion, Props>
+  | Map<InstanceUnion, Props> = new PossiblyWeakMap();
+
+export function detachDeletedInstance(node: Instance): void {
+  if (enableInternalInstanceMap) {
+    internalInstanceMap.delete(node);
+    internalPropsMap.delete(node);
+    delete (node: any)[internalEventHandlersKey];
+    delete (node: any)[internalEventHandlerListenersKey];
+    delete (node: any)[internalEventHandlesSetKey];
+    delete (node: any)[internalRootNodeResourcesKey];
+    if (__DEV__) {
+      delete (node: any)[internalInstanceKey];
+    }
+    return;
+  }
+  // TODO: This function is only called on host components. I don't think all of
+  // these fields are relevant.
+  delete (node: any)[internalInstanceKey];
+  delete (node: any)[internalPropsKey];
+  delete (node: any)[internalEventHandlersKey];
+  delete (node: any)[internalEventHandlerListenersKey];
+  delete (node: any)[internalEventHandlesSetKey];
+}
+
+export function precacheFiberNode(
+  hostInst: Fiber,
+  node:
+    | Instance
+    | TextInstance
+    | SuspenseInstance
+    | ActivityInstance
+    | ReactScopeInstance,
+): void {
+  if (enableInternalInstanceMap) {
+    internalInstanceMap.set(node, hostInst);
+    if (__DEV__) {
+      (node: any)[internalInstanceKey] = hostInst;
+    }
+    return;
+  }
+  (node: any)[internalInstanceKey] = hostInst;
+}
+
+export function markContainerAsRoot(hostRoot: Fiber, node: Container): void {
+  // $FlowFixMe[prop-missing]
+  node[internalContainerInstanceKey] = hostRoot;
+}
+
+export function unmarkContainerAsRoot(node: Container): void {
+  // $FlowFixMe[prop-missing]
+  node[internalContainerInstanceKey] = null;
+}
+
+export function isContainerMarkedAsRoot(node: Container): boolean {
+  // $FlowFixMe[prop-missing]
+  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, ActivityComponent 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 and Activity boundaries.
+export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
+  let targetInst: void | Fiber;
+  if (enableInternalInstanceMap) {
+    targetInst = internalInstanceMap.get(((targetNode: any): InstanceUnion));
+  } else {
+    targetInst = (targetNode: any)[internalInstanceKey];
+  }
+  if (targetInst) {
+    // Don't return HostRoot, SuspenseComponent or ActivityComponent 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.
+    if (enableInternalInstanceMap) {
+      targetInst =
+        (parentNode: any)[internalContainerInstanceKey] ||
+        internalInstanceMap.get(((parentNode: any): InstanceUnion));
+    } else {
+      targetInst =
+        (parentNode: any)[internalContainerInstanceKey] ||
+        (parentNode: any)[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 hydrationInstance = getParentHydrationBoundary(targetNode);
+        while (hydrationInstance !== 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.
+          const targetFiber = enableInternalInstanceMap
+            ? internalInstanceMap.get(hydrationInstance)
+            : // $FlowFixMe[prop-missing]
+              hydrationInstance[internalInstanceKey];
+          if (targetFiber) {
+            return targetFiber;
+          }
+          // 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.
+          hydrationInstance = getParentHydrationBoundary(hydrationInstance);
+          // 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;
+}
+
+/**
+ * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
+ * instance, or null if the node was not rendered by this React.
+ */
+export function getInstanceFromNode(node: Node): Fiber | null {
+  let inst: void | null | Fiber;
+  if (enableInternalInstanceMap) {
+    inst =
+      internalInstanceMap.get(((node: any): InstanceUnion)) ||
+      (node: any)[internalContainerInstanceKey];
+  } else {
+    inst =
+      (node: any)[internalInstanceKey] ||
+      (node: any)[internalContainerInstanceKey];
+  }
+  if (inst) {
+    const tag = inst.tag;
+    if (
+      tag === HostComponent ||
+      tag === HostText ||
+      tag === SuspenseComponent ||
+      tag === ActivityComponent ||
+      tag === HostHoistable ||
+      tag === HostSingleton ||
+      tag === HostRoot
+    ) {
+      return inst;
+    } else {
+      return null;
+    }
+  }
+  return null;
+}
+
+/**
+ * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding
+ * DOM node.
+ */
+export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
+  const tag = inst.tag;
+  if (
+    tag === HostComponent ||
+    tag === HostHoistable ||
+    tag === HostSingleton ||
+    tag === HostText
+  ) {
+    // In Fiber this, is just the state node right now. We assume it will be
+    // a host component or host text.
+    return inst.stateNode;
+  }
+
+  // Without this first invariant, passing a non-DOM-component triggers the next
+  // invariant for a missing parent, which is super confusing.
+  throw new Error('getNodeFromInstance: Invalid argument.');
+}
+
+export function getFiberCurrentPropsFromNode(
+  node:
+    | Container
+    | Instance
+    | TextInstance
+    | SuspenseInstance
+    | ActivityInstance,
+): Props | null {
+  if (enableInternalInstanceMap) {
+    return internalPropsMap.get(node) || null;
+  }
+  return (node: any)[internalPropsKey] || null;
+}
+
+export function updateFiberProps(node: Instance, props: Props): void {
+  if (enableInternalInstanceMap) {
+    internalPropsMap.set(node, props);
+    return;
+  }
+  (node: any)[internalPropsKey] = props;
+}
+
+export function getEventListenerSet(node: EventTarget): Set<string> {
+  let elementListenerSet: Set<string> | void = (node: any)[
+    internalEventHandlersKey
+  ];
+  if (elementListenerSet === undefined) {
+    elementListenerSet = (node: any)[internalEventHandlersKey] = new Set();
+  }
+  return elementListenerSet;
+}
+
+export function getFiberFromScopeInstance(
+  scope: ReactScopeInstance,
+): null | Fiber {
+  if (enableScopeAPI) {
+    if (enableInternalInstanceMap) {
+      return internalInstanceMap.get(((scope: any): InstanceUnion)) || null;
+    }
+    return (scope: any)[internalInstanceKey] || null;
+  }
+  return null;
+}
+
+export function setEventHandlerListeners(
+  scope: EventTarget | ReactScopeInstance,
+  listeners: Set<ReactDOMEventHandleListener>,
+): void {
+  (scope: any)[internalEventHandlerListenersKey] = listeners;
+}
+
+export function getEventHandlerListeners(
+  scope: EventTarget | ReactScopeInstance,
+): null | Set<ReactDOMEventHandleListener> {
+  return (scope: any)[internalEventHandlerListenersKey] || null;
+}
+
+export function addEventHandleToTarget(
+  target: EventTarget | ReactScopeInstance,
+  eventHandle: ReactDOMEventHandle,
+): void {
+  let eventHandles = (target: any)[internalEventHandlesSetKey];
+  if (eventHandles === undefined) {
+    eventHandles = (target: any)[internalEventHandlesSetKey] = new Set();
+  }
+  eventHandles.add(eventHandle);
+}
+
+export function doesTargetHaveEventHandle(
+  target: EventTarget | ReactScopeInstance,
+  eventHandle: ReactDOMEventHandle,
+): boolean {
+  const eventHandles = (target: any)[internalEventHandlesSetKey];
+  if (eventHandles === undefined) {
+    return false;
+  }
+  return eventHandles.has(eventHandle);
+}
+
+export function getResourcesFromRoot(root: HoistableRoot): RootResources {
+  let resources = (root: any)[internalRootNodeResourcesKey];
+  if (!resources) {
+    resources = (root: any)[internalRootNodeResourcesKey] = {
+      hoistableStyles: new Map(),
+      hoistableScripts: new Map(),
+    };
+  }
+  return resources;
+}
+
+export function isMarkedHoistable(node: Node): boolean {
+  return !!(node: any)[internalHoistableMarker];
+}
+
+export function markNodeAsHoistable(node: Node) {
+  (node: any)[internalHoistableMarker] = true;
+}
+
+export function getScrollEndTimer(node: EventTarget): ?TimeoutID {
+  return (node: any)[internalScrollTimer];
+}
+
+export function setScrollEndTimer(node: EventTarget, timer: TimeoutID): void {
+  (node: any)[internalScrollTimer] = timer;
+}
+
+export function clearScrollEndTimer(node: EventTarget): void {
+  (node: any)[internalScrollTimer] = undefined;
+}
+
+export function isOwnedInstance(node: Node): boolean {
+  if (enableInternalInstanceMap) {
+    return !!(
+      (node: any)[internalHoistableMarker] ||
+      internalInstanceMap.has((node: any))
+    );
+  }
+  return !!(
+    (node: any)[internalHoistableMarker] || (node: any)[internalInstanceKey]
+  );
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMContainer.js b/packages/react-dom-bindings/src/client/ReactDOMContainer.js
new file mode 100644
index 00000000000..df9bcfb4438
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMContainer.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {disableCommentsAsDOMContainers} from 'shared/ReactFeatureFlags';
+
+import {
+  ELEMENT_NODE,
+  COMMENT_NODE,
+  DOCUMENT_NODE,
+  DOCUMENT_FRAGMENT_NODE,
+} from './HTMLNodeType';
+
+export function isValidContainer(node: any): boolean {
+  return !!(
+    node &&
+    (node.nodeType === ELEMENT_NODE ||
+      node.nodeType === DOCUMENT_NODE ||
+      node.nodeType === DOCUMENT_FRAGMENT_NODE ||
+      (!disableCommentsAsDOMContainers &&
+        node.nodeType === COMMENT_NODE &&
+        (node: any).nodeValue === ' react-mount-point-unstable '))
+  );
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMEventHandle.js b/packages/react-dom-bindings/src/client/ReactDOMEventHandle.js
new file mode 100644
index 00000000000..875a9c9697c
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMEventHandle.js
@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from '../events/DOMEventNames';
+import type {ReactScopeInstance} from 'shared/ReactTypes';
+import type {
+  ReactDOMEventHandle,
+  ReactDOMEventHandleListener,
+} from './ReactDOMEventHandleTypes';
+
+import {allNativeEvents} from '../events/EventRegistry';
+import {
+  getEventHandlerListeners,
+  setEventHandlerListeners,
+  doesTargetHaveEventHandle,
+  addEventHandleToTarget,
+} from './ReactDOMComponentTree';
+import {ELEMENT_NODE} from './HTMLNodeType';
+import {listenToNativeEventForNonManagedEventTarget} from '../events/DOMPluginEventSystem';
+
+import {
+  enableScopeAPI,
+  enableCreateEventHandleAPI,
+} from 'shared/ReactFeatureFlags';
+import typeof {SyntheticEvent} from '../events/SyntheticEvent';
+
+type EventHandleOptions = {
+  capture?: boolean,
+};
+
+function isValidEventTarget(target: EventTarget | ReactScopeInstance): boolean {
+  return typeof (target: Object).addEventListener === 'function';
+}
+
+function isReactScope(target: EventTarget | ReactScopeInstance): boolean {
+  return typeof (target: Object).getChildContextValues === 'function';
+}
+
+function createEventHandleListener(
+  type: DOMEventName,
+  isCapturePhaseListener: boolean,
+  callback: SyntheticEvent => void,
+): ReactDOMEventHandleListener {
+  return {
+    callback,
+    capture: isCapturePhaseListener,
+    type,
+  };
+}
+
+function registerReactDOMEvent(
+  target: EventTarget | ReactScopeInstance,
+  domEventName: DOMEventName,
+  isCapturePhaseListener: boolean,
+): void {
+  if ((target: any).nodeType === ELEMENT_NODE) {
+    // Do nothing. We already attached all root listeners.
+  } else if (enableScopeAPI && isReactScope(target)) {
+    // Do nothing. We already attached all root listeners.
+  } else if (isValidEventTarget(target)) {
+    const eventTarget = ((target: any): EventTarget);
+    // These are valid event targets, but they are also
+    // non-managed React nodes.
+    listenToNativeEventForNonManagedEventTarget(
+      domEventName,
+      isCapturePhaseListener,
+      eventTarget,
+    );
+  } else {
+    throw new Error(
+      'ReactDOM.createEventHandle: setter called on an invalid ' +
+        'target. Provide a valid EventTarget or an element managed by React.',
+    );
+  }
+}
+
+export function createEventHandle(
+  type: string,
+  options?: EventHandleOptions,
+): ReactDOMEventHandle {
+  if (enableCreateEventHandleAPI) {
+    const domEventName = ((type: any): DOMEventName);
+
+    // We cannot support arbitrary native events with eager root listeners
+    // because the eager strategy relies on knowing the whole list ahead of time.
+    // If we wanted to support this, we'd have to add code to keep track
+    // (or search) for all portal and root containers, and lazily add listeners
+    // to them whenever we see a previously unknown event. This seems like a lot
+    // of complexity for something we don't even have a particular use case for.
+    // Unfortunately, the downside of this invariant is that *removing* a native
+    // event from the list of known events has now become a breaking change for
+    // any code relying on the createEventHandle API.
+    if (!allNativeEvents.has(domEventName)) {
+      throw new Error(
+        `Cannot call unstable_createEventHandle with "${domEventName}", as it is not an event known to React.`,
+      );
+    }
+
+    let isCapturePhaseListener = false;
+    if (options != null) {
+      const optionsCapture = options.capture;
+      if (typeof optionsCapture === 'boolean') {
+        isCapturePhaseListener = optionsCapture;
+      }
+    }
+
+    const eventHandle: ReactDOMEventHandle = (
+      target: EventTarget | ReactScopeInstance,
+      callback: SyntheticEvent => void,
+    ) => {
+      if (typeof callback !== 'function') {
+        throw new Error(
+          'ReactDOM.createEventHandle: setter called with an invalid ' +
+            'callback. The callback must be a function.',
+        );
+      }
+
+      if (!doesTargetHaveEventHandle(target, eventHandle)) {
+        addEventHandleToTarget(target, eventHandle);
+        registerReactDOMEvent(target, domEventName, isCapturePhaseListener);
+      }
+      const listener = createEventHandleListener(
+        domEventName,
+        isCapturePhaseListener,
+        callback,
+      );
+      let targetListeners = getEventHandlerListeners(target);
+      if (targetListeners === null) {
+        targetListeners = new Set();
+        setEventHandlerListeners(target, targetListeners);
+      }
+      targetListeners.add(listener);
+      return () => {
+        ((targetListeners: any): Set<ReactDOMEventHandleListener>).delete(
+          listener,
+        );
+      };
+    };
+
+    return eventHandle;
+  }
+  return (null: any);
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMEventHandleTypes.js b/packages/react-dom-bindings/src/client/ReactDOMEventHandleTypes.js
new file mode 100644
index 00000000000..4c9a097afa3
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMEventHandleTypes.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactScopeInstance} from 'shared/ReactTypes';
+import type {DOMEventName} from '../events/DOMEventNames';
+import typeof {SyntheticEvent} from '../events/SyntheticEvent';
+
+export type ReactDOMEventHandle = (
+  target: EventTarget | ReactScopeInstance,
+  callback: (SyntheticEvent) => void,
+) => () => void;
+
+export type ReactDOMEventHandleListener = {
+  callback: SyntheticEvent => void,
+  capture: boolean,
+  type: DOMEventName,
+};
diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js
new file mode 100644
index 00000000000..b6e665e1288
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js
@@ -0,0 +1,486 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// TODO: direct imports like some-package/src/* are bad. Fix me.
+import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
+
+import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
+import {getToStringValue, toString} from './ToStringValue';
+import {track, trackHydrated, updateValueIfChanged} from './inputValueTracking';
+import getActiveElement from './getActiveElement';
+import {
+  disableInputAttributeSyncing,
+  enableHydrationChangeEvent,
+} from 'shared/ReactFeatureFlags';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+
+import type {ToStringValue} from './ToStringValue';
+import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
+import {queueChangeEvent} from '../events/ReactDOMEventReplaying';
+
+let didWarnValueDefaultValue = false;
+let didWarnCheckedDefaultChecked = false;
+
+/**
+ * Implements an <input> host component that allows setting these optional
+ * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
+ *
+ * If `checked` or `value` are not supplied (or null/undefined), user actions
+ * that affect the checked state or value will trigger updates to the element.
+ *
+ * If they are supplied (and not null/undefined), the rendered element will not
+ * trigger updates to the element. Instead, the props must change in order for
+ * the rendered element to be updated.
+ *
+ * The rendered element will be initialized as unchecked (or `defaultChecked`)
+ * with an empty value (or `defaultValue`).
+ *
+ * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
+ */
+
+export function validateInputProps(element: Element, props: Object) {
+  if (__DEV__) {
+    // Normally we check for undefined and null the same, but explicitly specifying both
+    // properties, at all is probably worth warning for. We could move this either direction
+    // and just make it ok to pass null or just check hasOwnProperty.
+    if (
+      props.checked !== undefined &&
+      props.defaultChecked !== undefined &&
+      !didWarnCheckedDefaultChecked
+    ) {
+      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 ' +
+          'both). Decide between using a controlled or uncontrolled input ' +
+          'element and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+        getCurrentFiberOwnerNameInDevOrNull() || 'A component',
+        props.type,
+      );
+      didWarnCheckedDefaultChecked = true;
+    }
+    if (
+      props.value !== undefined &&
+      props.defaultValue !== undefined &&
+      !didWarnValueDefaultValue
+    ) {
+      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 ' +
+          'both). Decide between using a controlled or uncontrolled input ' +
+          'element and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+        getCurrentFiberOwnerNameInDevOrNull() || 'A component',
+        props.type,
+      );
+      didWarnValueDefaultValue = true;
+    }
+  }
+}
+
+export function updateInput(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  lastDefaultValue: ?string,
+  checked: ?boolean,
+  defaultChecked: ?boolean,
+  type: ?string,
+  name: ?string,
+) {
+  const node: HTMLInputElement = (element: any);
+
+  // Temporarily disconnect the input from any radio buttons.
+  // Changing the type or name as the same time as changing the checked value
+  // needs to be atomically applied. We can only ensure that by disconnecting
+  // the name while do the mutations and then reapply the name after that's done.
+  node.name = '';
+
+  if (
+    type != null &&
+    typeof type !== 'function' &&
+    typeof type !== 'symbol' &&
+    typeof type !== 'boolean'
+  ) {
+    if (__DEV__) {
+      checkAttributeStringCoercion(type, 'type');
+    }
+    node.type = type;
+  } else {
+    node.removeAttribute('type');
+  }
+
+  if (value != null) {
+    if (type === 'number') {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === '') ||
+        // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != (value: any)
+      ) {
+        node.value = toString(getToStringValue(value));
+      }
+    } else if (node.value !== toString(getToStringValue(value))) {
+      node.value = toString(getToStringValue(value));
+    }
+  } else if (type === 'submit' || type === 'reset') {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute('value');
+  }
+
+  if (disableInputAttributeSyncing) {
+    // When not syncing the value attribute, React only assigns a new value
+    // whenever the defaultValue React prop has changed. When not present,
+    // React does nothing
+    if (defaultValue != null) {
+      setDefaultValue(node, type, getToStringValue(defaultValue));
+    } else if (lastDefaultValue != null) {
+      node.removeAttribute('value');
+    }
+  } else {
+    // When syncing the value attribute, the value comes from a cascade of
+    // properties:
+    //  1. The value React property
+    //  2. The defaultValue React property
+    //  3. Otherwise there should be no change
+    if (value != null) {
+      setDefaultValue(node, type, getToStringValue(value));
+    } else if (defaultValue != null) {
+      setDefaultValue(node, type, getToStringValue(defaultValue));
+    } else if (lastDefaultValue != null) {
+      node.removeAttribute('value');
+    }
+  }
+
+  if (disableInputAttributeSyncing) {
+    // When not syncing the checked attribute, the attribute is directly
+    // controllable from the defaultValue React property. It needs to be
+    // updated as new props come in.
+    if (defaultChecked == null) {
+      node.removeAttribute('checked');
+    } else {
+      node.defaultChecked = !!defaultChecked;
+    }
+  } else {
+    // When syncing the checked attribute, it only changes when it needs
+    // to be removed, such as transitioning from a checkbox into a text input
+    if (checked == null && defaultChecked != null) {
+      node.defaultChecked = !!defaultChecked;
+    }
+  }
+
+  if (checked != null) {
+    // Important to set this even if it's not a change in order to update input
+    // value tracking with radio buttons
+    // TODO: Should really update input value tracking for the whole radio
+    // button group in an effect or something (similar to #27024)
+    node.checked =
+      checked && typeof checked !== 'function' && typeof checked !== 'symbol';
+  }
+
+  if (
+    name != null &&
+    typeof name !== 'function' &&
+    typeof name !== 'symbol' &&
+    typeof name !== 'boolean'
+  ) {
+    if (__DEV__) {
+      checkAttributeStringCoercion(name, 'name');
+    }
+    node.name = toString(getToStringValue(name));
+  } else {
+    node.removeAttribute('name');
+  }
+}
+
+export function initInput(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  checked: ?boolean,
+  defaultChecked: ?boolean,
+  type: ?string,
+  name: ?string,
+  isHydrating: boolean,
+) {
+  const node: HTMLInputElement = (element: any);
+
+  if (
+    type != null &&
+    typeof type !== 'function' &&
+    typeof type !== 'symbol' &&
+    typeof type !== 'boolean'
+  ) {
+    if (__DEV__) {
+      checkAttributeStringCoercion(type, 'type');
+    }
+    node.type = type;
+  }
+
+  if (value != null || defaultValue != null) {
+    const isButton = type === 'submit' || type === 'reset';
+
+    // Avoid setting value attribute on submit/reset inputs as it overrides the
+    // default value provided by the browser. See: #12872
+    if (isButton && (value === undefined || value === null)) {
+      // We track the value just in case it changes type later on.
+      track((element: any));
+      return;
+    }
+
+    const defaultValueStr =
+      defaultValue != null ? toString(getToStringValue(defaultValue)) : '';
+    const initialValue =
+      value != null ? toString(getToStringValue(value)) : defaultValueStr;
+
+    // Do not assign value if it is already set. This prevents user text input
+    // from being lost during SSR hydration.
+    if (!isHydrating || enableHydrationChangeEvent) {
+      if (disableInputAttributeSyncing) {
+        // When not syncing the value attribute, the value property points
+        // directly to the React prop. Only assign it if it exists.
+        if (value != null) {
+          // Always assign on buttons so that it is possible to assign an
+          // empty string to clear button text.
+          //
+          // Otherwise, do not re-assign the value property if is empty. This
+          // potentially avoids a DOM write and prevents Firefox (~60.0.1) from
+          // prematurely marking required inputs as invalid. Equality is compared
+          // to the current value in case the browser provided value is not an
+          // empty string.
+          if (isButton || toString(getToStringValue(value)) !== node.value) {
+            node.value = toString(getToStringValue(value));
+          }
+        }
+      } else {
+        // When syncing the value attribute, the value property should use
+        // the wrapperState._initialValue property. This uses:
+        //
+        //   1. The value React property when present
+        //   2. The defaultValue React property when present
+        //   3. An empty string
+        if (initialValue !== node.value) {
+          node.value = initialValue;
+        }
+      }
+    }
+
+    if (disableInputAttributeSyncing) {
+      // When not syncing the value attribute, assign the value attribute
+      // directly from the defaultValue React property (when present)
+      if (defaultValue != null) {
+        node.defaultValue = defaultValueStr;
+      }
+    } else {
+      // Otherwise, the value attribute is synchronized to the property,
+      // so we assign defaultValue to the same thing as the value property
+      // assignment step above.
+      node.defaultValue = initialValue;
+    }
+  }
+
+  // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug
+  // this is needed to work around a chrome bug where setting defaultChecked
+  // will sometimes influence the value of checked (even after detachment).
+  // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416
+  // We need to temporarily unset name to avoid disrupting radio button groups.
+
+  const checkedOrDefault = checked != null ? checked : defaultChecked;
+  // TODO: This 'function' or 'symbol' check isn't replicated in other places
+  // so this semantic is inconsistent.
+  const initialChecked =
+    typeof checkedOrDefault !== 'function' &&
+    typeof checkedOrDefault !== 'symbol' &&
+    !!checkedOrDefault;
+
+  if (isHydrating && !enableHydrationChangeEvent) {
+    // Detach .checked from .defaultChecked but leave user input alone
+    node.checked = node.checked;
+  } else {
+    node.checked = !!initialChecked;
+  }
+
+  if (disableInputAttributeSyncing) {
+    // Only assign the checked attribute if it is defined. This saves
+    // a DOM write when controlling the checked attribute isn't needed
+    // (text inputs, submit/reset)
+    if (defaultChecked != null) {
+      node.defaultChecked = !node.defaultChecked;
+      node.defaultChecked = !!defaultChecked;
+    }
+  } else {
+    // When syncing the checked attribute, both the checked property and
+    // attribute are assigned at the same time using defaultChecked. This uses:
+    //
+    //   1. The checked React property when present
+    //   2. The defaultChecked React property when present
+    //   3. Otherwise, false
+    node.defaultChecked = !node.defaultChecked;
+    node.defaultChecked = !!initialChecked;
+  }
+
+  // Name needs to be set at the end so that it applies atomically to connected radio buttons.
+  if (
+    name != null &&
+    typeof name !== 'function' &&
+    typeof name !== 'symbol' &&
+    typeof name !== 'boolean'
+  ) {
+    if (__DEV__) {
+      checkAttributeStringCoercion(name, 'name');
+    }
+    node.name = name;
+  }
+  track((element: any));
+}
+
+export function hydrateInput(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  checked: ?boolean,
+  defaultChecked: ?boolean,
+): void {
+  const node: HTMLInputElement = (element: any);
+
+  const defaultValueStr =
+    defaultValue != null ? toString(getToStringValue(defaultValue)) : '';
+  const initialValue =
+    value != null ? toString(getToStringValue(value)) : defaultValueStr;
+
+  const checkedOrDefault = checked != null ? checked : defaultChecked;
+  // TODO: This 'function' or 'symbol' check isn't replicated in other places
+  // so this semantic is inconsistent.
+  const initialChecked =
+    typeof checkedOrDefault !== 'function' &&
+    typeof checkedOrDefault !== 'symbol' &&
+    !!checkedOrDefault;
+
+  // Detach .checked from .defaultChecked but leave user input alone
+  node.checked = node.checked;
+
+  const changed = trackHydrated((node: any), initialValue, initialChecked);
+  if (changed) {
+    // If the current value is different, that suggests that the user
+    // changed it before hydration. Queue a replay of the change event.
+    // For radio buttons the change event only fires on the selected one.
+    if (node.type !== 'radio' || node.checked) {
+      queueChangeEvent(node);
+    }
+  }
+}
+
+export function restoreControlledInputState(element: Element, props: Object) {
+  const rootNode: HTMLInputElement = (element: any);
+  updateInput(
+    rootNode,
+    props.value,
+    props.defaultValue,
+    props.defaultValue,
+    props.checked,
+    props.defaultChecked,
+    props.type,
+    props.name,
+  );
+  const name = props.name;
+  if (props.type === 'radio' && name != null) {
+    let queryRoot: Element = rootNode;
+
+    while (queryRoot.parentNode) {
+      queryRoot = ((queryRoot.parentNode: any): Element);
+    }
+
+    // If `rootNode.form` was non-null, then we could try `form.elements`,
+    // but that sometimes behaves strangely in IE8. We could also try using
+    // `form.getElementsByName`, but that will only return direct children
+    // and won't include inputs that use the HTML5 `form=` attribute. Since
+    // the input might not even be in a form. It might not even be in the
+    // document. Let's just use the local `querySelectorAll` to ensure we don't
+    // miss anything.
+    if (__DEV__) {
+      checkAttributeStringCoercion(name, 'name');
+    }
+    const group = queryRoot.querySelectorAll(
+      'input[name="' +
+        escapeSelectorAttributeValueInsideDoubleQuotes('' + name) +
+        '"][type="radio"]',
+    );
+
+    for (let i = 0; i < group.length; i++) {
+      const otherNode = ((group[i]: any): HTMLInputElement);
+      if (otherNode === rootNode || otherNode.form !== rootNode.form) {
+        continue;
+      }
+      // This will throw if radio buttons rendered by different copies of React
+      // and the same name are rendered into the same form (same as #1939).
+      // That's probably okay; we don't support it just as we don't support
+      // mixing React radio buttons with non-React ones.
+      const otherProps: any = getFiberCurrentPropsFromNode(otherNode);
+
+      if (!otherProps) {
+        throw new Error(
+          'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
+            'same `name` is not supported.',
+        );
+      }
+
+      // If this is a controlled radio button group, forcing the input that
+      // was previously checked to update will cause it to be come re-checked
+      // as appropriate.
+      updateInput(
+        otherNode,
+        otherProps.value,
+        otherProps.defaultValue,
+        otherProps.defaultValue,
+        otherProps.checked,
+        otherProps.defaultChecked,
+        otherProps.type,
+        otherProps.name,
+      );
+    }
+
+    // If any updateInput() call set .checked to true, an input in this group
+    // (often, `rootNode` itself) may have become unchecked
+    for (let i = 0; i < group.length; i++) {
+      const otherNode = ((group[i]: any): HTMLInputElement);
+      if (otherNode.form !== rootNode.form) {
+        continue;
+      }
+      updateValueIfChanged(otherNode);
+    }
+  }
+}
+
+// In Chrome, assigning defaultValue to certain input types triggers input validation.
+// For number inputs, the display value loses trailing decimal points. For email inputs,
+// Chrome raises "The specified value <x> is not a valid email address".
+//
+// Here we check to see if the defaultValue has actually changed, avoiding these problems
+// when the user is inputting text
+//
+// https://github.com/facebook/react/issues/7253
+export function setDefaultValue(
+  node: HTMLInputElement,
+  type: ?string,
+  value: ToStringValue,
+) {
+  if (
+    // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
+    type !== 'number' ||
+    getActiveElement(node.ownerDocument) !== node
+  ) {
+    if (node.defaultValue !== toString(value)) {
+      node.defaultValue = toString(value);
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMOption.js b/packages/react-dom-bindings/src/client/ReactDOMOption.js
new file mode 100644
index 00000000000..ae7a7ba999c
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMOption.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Children} from 'react';
+
+let didWarnSelectedSetOnOption = false;
+let didWarnInvalidChild = false;
+let didWarnInvalidInnerHTML = false;
+
+/**
+ * Implements an <option> host component that warns when `selected` is set.
+ */
+
+export function validateOptionProps(element: Element, props: Object) {
+  if (__DEV__) {
+    // If a value is not provided, then the children must be simple.
+    if (props.value == null) {
+      if (typeof props.children === 'object' && props.children !== null) {
+        Children.forEach(props.children, function (child) {
+          if (child == null) {
+            return;
+          }
+          if (
+            typeof child === 'string' ||
+            typeof child === 'number' ||
+            typeof child === 'bigint'
+          ) {
+            return;
+          }
+          if (!didWarnInvalidChild) {
+            didWarnInvalidChild = true;
+            console.error(
+              'Cannot infer the option value of complex children. ' +
+                'Pass a `value` prop or use a plain string as children to <option>.',
+            );
+          }
+        });
+      } else if (props.dangerouslySetInnerHTML != null) {
+        if (!didWarnInvalidInnerHTML) {
+          didWarnInvalidInnerHTML = true;
+          console.error(
+            'Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' +
+              'which value should be selected.',
+          );
+        }
+      }
+    }
+
+    // TODO: Remove support for `selected` in <option>.
+    if (props.selected != null && !didWarnSelectedSetOnOption) {
+      console.error(
+        'Use the `defaultValue` or `value` props on <select> instead of ' +
+          'setting `selected` on <option>.',
+      );
+      didWarnSelectedSetOnOption = true;
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js
new file mode 100644
index 00000000000..00136aa8175
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js
@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// TODO: direct imports like some-package/src/* are bad. Fix me.
+import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
+
+import {getToStringValue, toString} from './ToStringValue';
+import isArray from 'shared/isArray';
+import {queueChangeEvent} from '../events/ReactDOMEventReplaying';
+
+let didWarnValueDefaultValue;
+
+if (__DEV__) {
+  didWarnValueDefaultValue = false;
+}
+
+function getDeclarationErrorAddendum() {
+  const ownerName = getCurrentFiberOwnerNameInDevOrNull();
+  if (ownerName) {
+    return '\n\nCheck the render method of `' + ownerName + '`.';
+  }
+  return '';
+}
+
+const valuePropNames = ['value', 'defaultValue'];
+
+/**
+ * Validation function for `value` and `defaultValue`.
+ */
+function checkSelectPropTypes(props: any) {
+  if (__DEV__) {
+    for (let i = 0; i < valuePropNames.length; i++) {
+      const propName = valuePropNames[i];
+      if (props[propName] == null) {
+        continue;
+      }
+      const propNameIsArray = isArray(props[propName]);
+      if (props.multiple && !propNameIsArray) {
+        console.error(
+          'The `%s` prop supplied to <select> must be an array if ' +
+            '`multiple` is true.%s',
+          propName,
+          getDeclarationErrorAddendum(),
+        );
+      } else if (!props.multiple && propNameIsArray) {
+        console.error(
+          'The `%s` prop supplied to <select> must be a scalar ' +
+            'value if `multiple` is false.%s',
+          propName,
+          getDeclarationErrorAddendum(),
+        );
+      }
+    }
+  }
+}
+
+function updateOptions(
+  node: HTMLSelectElement,
+  multiple: boolean,
+  propValue: any,
+  setDefaultSelected: boolean,
+) {
+  const options: HTMLOptionsCollection = node.options;
+
+  if (multiple) {
+    const selectedValues = (propValue: Array<string>);
+    const selectedValue: {[string]: boolean} = {};
+    for (let i = 0; i < selectedValues.length; i++) {
+      // Prefix to avoid chaos with special keys.
+      selectedValue['$' + selectedValues[i]] = true;
+    }
+    for (let i = 0; i < options.length; i++) {
+      const selected = selectedValue.hasOwnProperty('$' + options[i].value);
+      if (options[i].selected !== selected) {
+        options[i].selected = selected;
+      }
+      if (selected && setDefaultSelected) {
+        options[i].defaultSelected = true;
+      }
+    }
+  } else {
+    // Do not set `select.value` as exact behavior isn't consistent across all
+    // browsers for all cases.
+    const selectedValue = toString(getToStringValue(propValue));
+    let defaultSelected = null;
+    for (let i = 0; i < options.length; i++) {
+      if (options[i].value === selectedValue) {
+        options[i].selected = true;
+        if (setDefaultSelected) {
+          options[i].defaultSelected = true;
+        }
+        return;
+      }
+      if (defaultSelected === null && !options[i].disabled) {
+        defaultSelected = options[i];
+      }
+    }
+    if (defaultSelected !== null) {
+      defaultSelected.selected = true;
+    }
+  }
+}
+
+/**
+ * Implements a <select> host component that allows optionally setting the
+ * props `value` and `defaultValue`. If `multiple` is false, the prop must be a
+ * stringable. If `multiple` is true, the prop must be an array of stringables.
+ *
+ * If `value` is not supplied (or null/undefined), user actions that change the
+ * selected option will trigger updates to the rendered options.
+ *
+ * If it is supplied (and not null/undefined), the rendered options will not
+ * update in response to user actions. Instead, the `value` prop must change in
+ * order for the rendered options to update.
+ *
+ * If `defaultValue` is provided, any options with the supplied values will be
+ * selected.
+ */
+
+export function validateSelectProps(element: Element, props: Object) {
+  if (__DEV__) {
+    checkSelectPropTypes(props);
+    if (
+      props.value !== undefined &&
+      props.defaultValue !== undefined &&
+      !didWarnValueDefaultValue
+    ) {
+      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 ' +
+          'element and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+      );
+      didWarnValueDefaultValue = true;
+    }
+  }
+}
+
+export function initSelect(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  multiple: ?boolean,
+) {
+  const node: HTMLSelectElement = (element: any);
+  node.multiple = !!multiple;
+  if (value != null) {
+    updateOptions(node, !!multiple, value, false);
+  } else if (defaultValue != null) {
+    updateOptions(node, !!multiple, defaultValue, true);
+  }
+}
+
+export function hydrateSelect(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  multiple: ?boolean,
+): void {
+  const node: HTMLSelectElement = (element: any);
+  const options: HTMLOptionsCollection = node.options;
+
+  const propValue: any = value != null ? value : defaultValue;
+
+  let changed = false;
+
+  if (multiple) {
+    const selectedValues = (propValue: ?Array<string>);
+    const selectedValue: {[string]: boolean} = {};
+    if (selectedValues != null) {
+      for (let i = 0; i < selectedValues.length; i++) {
+        // Prefix to avoid chaos with special keys.
+        selectedValue['$' + selectedValues[i]] = true;
+      }
+    }
+    for (let i = 0; i < options.length; i++) {
+      const expectedSelected = selectedValue.hasOwnProperty(
+        '$' + options[i].value,
+      );
+      if (options[i].selected !== expectedSelected) {
+        changed = true;
+        break;
+      }
+    }
+  } else {
+    let selectedValue =
+      propValue == null ? null : toString(getToStringValue(propValue));
+    for (let i = 0; i < options.length; i++) {
+      if (selectedValue == null && !options[i].disabled) {
+        // We expect the first non-disabled option to be selected if the selected is null.
+        selectedValue = options[i].value;
+      }
+      const expectedSelected = options[i].value === selectedValue;
+      if (options[i].selected !== expectedSelected) {
+        changed = true;
+        break;
+      }
+    }
+  }
+  if (changed) {
+    // If the current selection is different than our initial that suggests that the user
+    // changed it before hydration. Queue a replay of the change event.
+    queueChangeEvent(node);
+  }
+}
+
+export function updateSelect(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  multiple: ?boolean,
+  wasMultiple: ?boolean,
+) {
+  const node: HTMLSelectElement = (element: any);
+
+  if (value != null) {
+    updateOptions(node, !!multiple, value, false);
+  } else if (!!wasMultiple !== !!multiple) {
+    // For simplicity, reapply `defaultValue` if `multiple` is toggled.
+    if (defaultValue != null) {
+      updateOptions(node, !!multiple, defaultValue, true);
+    } else {
+      // Revert the select back to its default unselected state.
+      updateOptions(node, !!multiple, multiple ? [] : '', false);
+    }
+  }
+}
+
+export function restoreControlledSelectState(element: Element, props: Object) {
+  const node: HTMLSelectElement = (element: any);
+  const value = props.value;
+
+  if (value != null) {
+    updateOptions(node, !!props.multiple, value, false);
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelection.js b/packages/react-dom-bindings/src/client/ReactDOMSelection.js
new file mode 100644
index 00000000000..d8b08834ba5
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMSelection.js
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import getNodeForCharacterOffset from './getNodeForCharacterOffset';
+import {TEXT_NODE} from './HTMLNodeType';
+
+/**
+ * @param {DOMElement} outerNode
+ * @return {?object}
+ */
+export function getOffsets(outerNode) {
+  const {ownerDocument} = outerNode;
+  const win = (ownerDocument && ownerDocument.defaultView) || window;
+  const selection = win.getSelection && win.getSelection();
+
+  if (!selection || selection.rangeCount === 0) {
+    return null;
+  }
+
+  const {anchorNode, anchorOffset, focusNode, focusOffset} = selection;
+
+  // In Firefox, anchorNode and focusNode can be "anonymous divs", e.g. the
+  // up/down buttons on an <input type="number">. Anonymous divs do not seem to
+  // expose properties, triggering a "Permission denied error" if any of its
+  // properties are accessed. The only seemingly possible way to avoid erroring
+  // is to access a property that typically works for non-anonymous divs and
+  // catch any error that may otherwise arise. See
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=208427
+  try {
+    /* eslint-disable ft-flow/no-unused-expressions */
+    anchorNode.nodeType;
+    focusNode.nodeType;
+    /* eslint-enable ft-flow/no-unused-expressions */
+  } catch (e) {
+    return null;
+  }
+
+  return getModernOffsetsFromPoints(
+    outerNode,
+    anchorNode,
+    anchorOffset,
+    focusNode,
+    focusOffset,
+  );
+}
+
+/**
+ * Returns {start, end} where `start` is the character/codepoint index of
+ * (anchorNode, anchorOffset) within the textContent of `outerNode`, and
+ * `end` is the index of (focusNode, focusOffset).
+ *
+ * Returns null if you pass in garbage input but we should probably just crash.
+ *
+ * Exported only for testing.
+ */
+export function getModernOffsetsFromPoints(
+  outerNode,
+  anchorNode,
+  anchorOffset,
+  focusNode,
+  focusOffset,
+) {
+  let length = 0;
+  let start = -1;
+  let end = -1;
+  let indexWithinAnchor = 0;
+  let indexWithinFocus = 0;
+  let node = outerNode;
+  let parentNode = null;
+
+  outer: while (true) {
+    let next = null;
+
+    while (true) {
+      if (
+        node === anchorNode &&
+        (anchorOffset === 0 || node.nodeType === TEXT_NODE)
+      ) {
+        start = length + anchorOffset;
+      }
+      if (
+        node === focusNode &&
+        (focusOffset === 0 || node.nodeType === TEXT_NODE)
+      ) {
+        end = length + focusOffset;
+      }
+
+      if (node.nodeType === TEXT_NODE) {
+        length += node.nodeValue.length;
+      }
+
+      if ((next = node.firstChild) === null) {
+        break;
+      }
+      // Moving from `node` to its first child `next`.
+      parentNode = node;
+      node = next;
+    }
+
+    while (true) {
+      if (node === outerNode) {
+        // If `outerNode` has children, this is always the second time visiting
+        // it. If it has no children, this is still the first loop, and the only
+        // valid selection is anchorNode and focusNode both equal to this node
+        // and both offsets 0, in which case we will have handled above.
+        break outer;
+      }
+      if (parentNode === anchorNode && ++indexWithinAnchor === anchorOffset) {
+        start = length;
+      }
+      if (parentNode === focusNode && ++indexWithinFocus === focusOffset) {
+        end = length;
+      }
+      if ((next = node.nextSibling) !== null) {
+        break;
+      }
+      node = parentNode;
+      parentNode = node.parentNode;
+    }
+
+    // Moving from `node` to its next sibling `next`.
+    node = next;
+  }
+
+  if (start === -1 || end === -1) {
+    // This should never happen. (Would happen if the anchor/focus nodes aren't
+    // actually inside the passed-in node.)
+    return null;
+  }
+
+  return {
+    start: start,
+    end: end,
+  };
+}
+
+/**
+ * In modern non-IE browsers, we can support both forward and backward
+ * selections.
+ *
+ * Note: IE10+ supports the Selection object, but it does not support
+ * the `extend` method, which means that even in modern IE, it's not possible
+ * to programmatically create a backward selection. Thus, for all IE
+ * versions, we use the old IE API to create our selections.
+ *
+ * @param {DOMElement|DOMTextNode} node
+ * @param {object} offsets
+ */
+export function setOffsets(node, offsets) {
+  const doc = node.ownerDocument || document;
+  const win = (doc && doc.defaultView) || window;
+
+  // Edge fails with "Object expected" in some scenarios.
+  // (For instance: TinyMCE editor used in a list component that supports pasting to add more,
+  // fails when pasting 100+ items)
+  if (!win.getSelection) {
+    return;
+  }
+
+  const selection = win.getSelection();
+  const length = node.textContent.length;
+  let start = Math.min(offsets.start, length);
+  let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
+
+  // IE 11 uses modern selection, but doesn't support the extend method.
+  // Flip backward selections, so we can set with a single range.
+  if (!selection.extend && start > end) {
+    const temp = end;
+    end = start;
+    start = temp;
+  }
+
+  const startMarker = getNodeForCharacterOffset(node, start);
+  const endMarker = getNodeForCharacterOffset(node, end);
+
+  if (startMarker && endMarker) {
+    if (
+      selection.rangeCount === 1 &&
+      selection.anchorNode === startMarker.node &&
+      selection.anchorOffset === startMarker.offset &&
+      selection.focusNode === endMarker.node &&
+      selection.focusOffset === endMarker.offset
+    ) {
+      return;
+    }
+    const range = doc.createRange();
+    range.setStart(startMarker.node, startMarker.offset);
+    selection.removeAllRanges();
+
+    if (start > end) {
+      selection.addRange(range);
+      selection.extend(endMarker.node, endMarker.offset);
+    } else {
+      range.setEnd(endMarker.node, endMarker.offset);
+      selection.addRange(range);
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMSrcObject.js b/packages/react-dom-bindings/src/client/ReactDOMSrcObject.js
new file mode 100644
index 00000000000..160d634236d
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMSrcObject.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 setSrcObject(domElement: Element, tag: string, value: any) {
+  // We optimistically create the URL regardless of object type. This lets us
+  // support cross-realms and any type that the browser supports like new types.
+  const url = URL.createObjectURL((value: any));
+  const loadEvent = tag === 'img' ? 'load' : 'loadstart';
+  const cleanUp = () => {
+    // Once the object has started loading, then it's already collected by the
+    // browser and it won't refer to it by the URL anymore so we can now revoke it.
+    URL.revokeObjectURL(url);
+    domElement.removeEventListener(loadEvent, cleanUp);
+    domElement.removeEventListener('error', cleanUp);
+  };
+  domElement.addEventListener(loadEvent, cleanUp);
+  domElement.addEventListener('error', cleanUp);
+  domElement.setAttribute('src', url);
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
new file mode 100644
index 00000000000..bc346b4bce4
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js
@@ -0,0 +1,181 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isArray from 'shared/isArray';
+
+import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
+import {getToStringValue, toString} from './ToStringValue';
+import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
+
+import {track, trackHydrated} from './inputValueTracking';
+import {queueChangeEvent} from '../events/ReactDOMEventReplaying';
+
+let didWarnValDefaultVal = false;
+
+/**
+ * Implements a <textarea> host component that allows setting `value`, and
+ * `defaultValue`. This differs from the traditional DOM API because value is
+ * usually set as PCDATA children.
+ *
+ * If `value` is not supplied (or null/undefined), user actions that affect the
+ * value will trigger updates to the element.
+ *
+ * If `value` is supplied (and not null/undefined), the rendered element will
+ * not trigger updates to the element. Instead, the `value` prop must change in
+ * order for the rendered element to be updated.
+ *
+ * The rendered element will be initialized with an empty value, the prop
+ * `defaultValue` if specified, or the children content (deprecated).
+ */
+
+export function validateTextareaProps(element: Element, props: Object) {
+  if (__DEV__) {
+    if (
+      props.value !== undefined &&
+      props.defaultValue !== undefined &&
+      !didWarnValDefaultVal
+    ) {
+      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 ' +
+          'both). Decide between using a controlled or uncontrolled textarea ' +
+          'and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+        getCurrentFiberOwnerNameInDevOrNull() || 'A component',
+      );
+      didWarnValDefaultVal = true;
+    }
+    if (props.children != null && props.value == null) {
+      console.error(
+        'Use the `defaultValue` or `value` props instead of setting ' +
+          'children on <textarea>.',
+      );
+    }
+  }
+}
+
+export function updateTextarea(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+) {
+  const node: HTMLTextAreaElement = (element: any);
+  if (value != null) {
+    // Cast `value` to a string to ensure the value is set correctly. While
+    // browsers typically do this as necessary, jsdom doesn't.
+    const newValue = toString(getToStringValue(value));
+    // To avoid side effects (such as losing text selection), only set value if changed
+    if (newValue !== node.value) {
+      node.value = newValue;
+    }
+    // TOOO: This should respect disableInputAttributeSyncing flag.
+    if (defaultValue == null) {
+      if (node.defaultValue !== newValue) {
+        node.defaultValue = newValue;
+      }
+      return;
+    }
+  }
+  if (defaultValue != null) {
+    node.defaultValue = toString(getToStringValue(defaultValue));
+  } else {
+    node.defaultValue = '';
+  }
+}
+
+export function initTextarea(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+  children: ?string,
+) {
+  const node: HTMLTextAreaElement = (element: any);
+
+  let initialValue = value;
+
+  // Only bother fetching default value if we're going to use it
+  if (initialValue == null) {
+    if (children != null) {
+      if (!disableTextareaChildren) {
+        if (defaultValue != null) {
+          throw new Error(
+            'If you supply `defaultValue` on a <textarea>, do not pass children.',
+          );
+        }
+
+        if (isArray(children)) {
+          if (children.length > 1) {
+            throw new Error('<textarea> can only have at most one child.');
+          }
+
+          children = children[0];
+        }
+
+        defaultValue = children;
+      }
+    }
+    if (defaultValue == null) {
+      defaultValue = '';
+    }
+    initialValue = defaultValue;
+  }
+
+  const stringValue = getToStringValue(initialValue);
+  node.defaultValue = (stringValue: any); // This will be toString:ed.
+
+  // This is in postMount because we need access to the DOM node, which is not
+  // available until after the component has mounted.
+  const textContent = node.textContent;
+
+  // Only set node.value if textContent is equal to the expected
+  // initial value. In IE10/IE11 there is a bug where the placeholder attribute
+  // will populate textContent as well.
+  // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
+  if (textContent === stringValue) {
+    if (textContent !== '' && textContent !== null) {
+      node.value = textContent;
+    }
+  }
+
+  track((element: any));
+}
+
+export function hydrateTextarea(
+  element: Element,
+  value: ?string,
+  defaultValue: ?string,
+): void {
+  const node: HTMLTextAreaElement = (element: any);
+  let initialValue = value;
+  if (initialValue == null) {
+    if (defaultValue == null) {
+      defaultValue = '';
+    }
+    initialValue = defaultValue;
+  }
+  // Track the value that we last observed which is the hydrated value so
+  // that any change event that fires will trigger onChange on the actual
+  // current value.
+  const stringValue = toString(getToStringValue(initialValue));
+  const changed = trackHydrated((node: any), stringValue, false);
+  if (changed) {
+    // If the current value is different, that suggests that the user
+    // changed it before hydration. Queue a replay of the change event.
+    queueChangeEvent(node);
+  }
+}
+
+export function restoreControlledTextareaState(
+  element: Element,
+  props: Object,
+) {
+  // DOM component is still mounted; update
+  updateTextarea(element, props.value, props.defaultValue);
+}
diff --git a/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js b/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js
new file mode 100644
index 00000000000..4f422a06732
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactEventPriorities';
+
+import {getEventPriority} from '../events/ReactDOMEventListener';
+import {
+  NoEventPriority,
+  DefaultEventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+export function setCurrentUpdatePriority(
+  newPriority: EventPriority,
+  // Closure will consistently not inline this function when it has arity 1
+  // however when it has arity 2 even if the second arg is omitted at every
+  // callsite it seems to inline it even when the internal length of the function
+  // is much longer. I hope this is consistent enough to rely on across builds
+  IntentionallyUnusedArgument?: empty,
+): void {
+  ReactDOMSharedInternals.p /* currentUpdatePriority */ = newPriority;
+}
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return ReactDOMSharedInternals.p; /* currentUpdatePriority */
+}
+
+export function resolveUpdatePriority(): EventPriority {
+  const updatePriority = ReactDOMSharedInternals.p; /* currentUpdatePriority */
+  if (updatePriority !== NoEventPriority) {
+    return updatePriority;
+  }
+  const currentEvent = window.event;
+  if (currentEvent === undefined) {
+    return DefaultEventPriority;
+  }
+  return getEventPriority(currentEvent.type);
+}
+
+export function runWithPriority<T>(priority: EventPriority, fn: () => T): T {
+  const previousPriority = getCurrentUpdatePriority();
+  try {
+    setCurrentUpdatePriority(priority);
+    return fn();
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
new file mode 100644
index 00000000000..026f4ae0c8c
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -0,0 +1,6503 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from '../events/DOMEventNames';
+import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  BoundingRect,
+  IntersectionObserverOptions,
+  ObserveVisibleRectsCallback,
+} from 'react-reconciler/src/ReactTestSelectors';
+import type {ReactContext, ReactScopeInstance} from 'shared/ReactTypes';
+import type {AncestorInfoDev} from './validateDOMNesting';
+import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+import type {
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
+} from 'react-dom/src/shared/ReactDOMTypes';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+
+import {NotPending} from '../shared/ReactDOMFormActions';
+
+import {setSrcObject} from './ReactDOMSrcObject';
+
+import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostContext';
+import {runWithFiberInDEV} from 'react-reconciler/src/ReactCurrentFiber';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
+export {
+  setCurrentUpdatePriority,
+  getCurrentUpdatePriority,
+  resolveUpdatePriority,
+} from './ReactDOMUpdatePriority';
+import {
+  precacheFiberNode,
+  updateFiberProps,
+  getFiberCurrentPropsFromNode,
+  getInstanceFromNode,
+  getClosestInstanceFromNode,
+  getFiberFromScopeInstance,
+  getInstanceFromNode as getInstanceFromNodeDOMTree,
+  isContainerMarkedAsRoot,
+  detachDeletedInstance,
+  getResourcesFromRoot,
+  isMarkedHoistable,
+  markNodeAsHoistable,
+  isOwnedInstance,
+} from './ReactDOMComponentTree';
+import {
+  traverseFragmentInstance,
+  getFragmentParentHostFiber,
+  getInstanceFromHostFiber,
+  isFiberFollowing,
+  isFiberPreceding,
+  getFragmentInstanceSiblings,
+  traverseFragmentInstanceDeeply,
+  fiberIsPortaledIntoHost,
+  isFiberContainedByFragment,
+  isFragmentContainedByFiber,
+} from 'react-reconciler/src/ReactFiberTreeReflection';
+import {compareDocumentPositionForEmptyFragment} from 'shared/ReactDOMFragmentRefShared';
+
+export {detachDeletedInstance};
+import {hasRole} from './DOMAccessibilityRoles';
+import {
+  setInitialProperties,
+  updateProperties,
+  hydrateProperties,
+  hydrateText,
+  diffHydratedProperties,
+  getPropsFromElement,
+  diffHydratedText,
+  trapClickOnNonInteractiveElement,
+} from './ReactDOMComponent';
+import {hydrateInput} from './ReactDOMInput';
+import {hydrateTextarea} from './ReactDOMTextarea';
+import {hydrateSelect} from './ReactDOMSelect';
+import {getSelectionInformation, restoreSelection} from './ReactInputSelection';
+import setTextContent from './setTextContent';
+import {
+  validateDOMNesting,
+  validateTextNesting,
+  updatedAncestorInfoDev,
+} from './validateDOMNesting';
+import {
+  isEnabled as ReactBrowserEventEmitterIsEnabled,
+  setEnabled as ReactBrowserEventEmitterSetEnabled,
+} from '../events/ReactDOMEventListener';
+import {SVG_NAMESPACE, MATH_NAMESPACE} from './DOMNamespaces';
+import {
+  ELEMENT_NODE,
+  TEXT_NODE,
+  COMMENT_NODE,
+  DOCUMENT_NODE,
+  DOCUMENT_TYPE_NODE,
+  DOCUMENT_FRAGMENT_NODE,
+} from './HTMLNodeType';
+
+import {
+  flushEventReplaying,
+  retryIfBlockedOn,
+} from '../events/ReactDOMEventReplaying';
+
+import {
+  enableCreateEventHandleAPI,
+  enableScopeAPI,
+  enableTrustedTypesIntegration,
+  disableLegacyMode,
+  enableMoveBefore,
+  disableCommentsAsDOMContainers,
+  enableSuspenseyImages,
+  enableSrcObject,
+  enableViewTransition,
+  enableHydrationChangeEvent,
+  enableFragmentRefsScrollIntoView,
+  enableProfilerTimer,
+  enableFragmentRefsInstanceHandles,
+} from 'shared/ReactFeatureFlags';
+import {
+  HostComponent,
+  HostHoistable,
+  HostText,
+  HostSingleton,
+} from 'react-reconciler/src/ReactWorkTags';
+import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
+import {validateLinkPropsForStyleResource} from '../shared/ReactDOMResourceValidation';
+import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
+import {flushSyncWork as flushSyncWorkOnAllRoots} from 'react-reconciler/src/ReactFiberWorkLoop';
+import {requestFormReset as requestFormResetOnFiber} from 'react-reconciler/src/ReactFiberHooks';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+export {default as rendererVersion} from 'shared/ReactVersion';
+
+import noop from 'shared/noop';
+import estimateBandwidth from './estimateBandwidth';
+
+export const rendererPackageName = 'react-dom';
+export const extraDevToolsConfig = null;
+
+export type Type = string;
+export type Props = {
+  autoFocus?: boolean,
+  children?: mixed,
+  disabled?: boolean,
+  hidden?: boolean,
+  suppressHydrationWarning?: boolean,
+  dangerouslySetInnerHTML?: mixed,
+  style?: {
+    display?: string,
+    viewTransitionName?: string,
+    'view-transition-name'?: string,
+    viewTransitionClass?: string,
+    'view-transition-class'?: string,
+    margin?: string,
+    marginTop?: string,
+    'margin-top'?: string,
+    marginBottom?: string,
+    'margin-bottom'?: string,
+    ...
+  },
+  bottom?: null | number,
+  left?: null | number,
+  right?: null | number,
+  top?: null | number,
+  is?: string,
+  size?: number,
+  value?: string,
+  defaultValue?: string,
+  checked?: boolean,
+  defaultChecked?: boolean,
+  multiple?: boolean,
+  src?: string | Blob | MediaSource | MediaStream, // TODO: Response
+  srcSet?: string,
+  loading?: 'eager' | 'lazy',
+  onLoad?: (event: any) => void,
+  ...
+};
+type RawProps = {
+  [string]: mixed,
+};
+export type EventTargetChildElement = {
+  type: string,
+  props: null | {
+    style?: {
+      position?: string,
+      zIndex?: number,
+      bottom?: string,
+      left?: string,
+      right?: string,
+      top?: string,
+      ...
+    },
+    ...
+  },
+  ...
+};
+
+export type Container =
+  | interface extends Element {_reactRootContainer?: FiberRoot}
+  | interface extends Document {_reactRootContainer?: FiberRoot}
+  | interface extends DocumentFragment {_reactRootContainer?: FiberRoot};
+export type Instance = Element;
+export type TextInstance = Text;
+
+type InstanceWithFragmentHandles = Instance & {
+  unstable_reactFragments?: Set<FragmentInstanceType>,
+};
+
+declare class ActivityInterface extends Comment {}
+declare class SuspenseInterface extends Comment {
+  _reactRetry: void | (() => void);
+}
+
+export type ActivityInstance = ActivityInterface;
+export type SuspenseInstance = SuspenseInterface;
+
+type FormStateMarkerInstance = Comment;
+export type HydratableInstance =
+  | Instance
+  | TextInstance
+  | ActivityInstance
+  | SuspenseInstance
+  | FormStateMarkerInstance;
+export type PublicInstance = Element | Text;
+export type HostContextDev = {
+  context: HostContextProd,
+  ancestorInfo: AncestorInfoDev,
+};
+type HostContextProd = HostContextNamespace;
+export type HostContext = HostContextDev | HostContextProd;
+export type UpdatePayload = Array<mixed>;
+export type ChildSet = void; // Unused
+export type TimeoutHandle = TimeoutID;
+export type NoTimeout = -1;
+export type RendererInspectionConfig = $ReadOnly<{}>;
+
+export type TransitionStatus = FormStatus;
+
+export type ViewTransitionInstance = {
+  name: string,
+  group: mixin$Animatable,
+  imagePair: mixin$Animatable,
+  old: mixin$Animatable,
+  new: mixin$Animatable,
+};
+
+type SelectionInformation = {
+  focusedElem: null | HTMLElement,
+  selectionRange: mixed,
+};
+
+const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
+
+const ACTIVITY_START_DATA = '&';
+const ACTIVITY_END_DATA = '/&';
+const SUSPENSE_START_DATA = '$';
+const SUSPENSE_END_DATA = '/$';
+const SUSPENSE_PENDING_START_DATA = '$?';
+const SUSPENSE_QUEUED_START_DATA = '$~';
+const SUSPENSE_FALLBACK_START_DATA = '$!';
+const PREAMBLE_CONTRIBUTION_HTML = 'html';
+const PREAMBLE_CONTRIBUTION_BODY = 'body';
+const PREAMBLE_CONTRIBUTION_HEAD = 'head';
+const FORM_STATE_IS_MATCHING = 'F!';
+const FORM_STATE_IS_NOT_MATCHING = 'F';
+
+const DOCUMENT_READY_STATE_LOADING = 'loading';
+
+const STYLE = 'style';
+
+opaque type HostContextNamespace = 0 | 1 | 2;
+export const HostContextNamespaceNone: HostContextNamespace = 0;
+const HostContextNamespaceSvg: HostContextNamespace = 1;
+const HostContextNamespaceMath: HostContextNamespace = 2;
+
+let eventsEnabled: ?boolean = null;
+let selectionInformation: null | SelectionInformation = null;
+
+export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
+
+function getOwnerDocumentFromRootContainer(
+  rootContainerElement: Element | Document | DocumentFragment,
+): Document {
+  return rootContainerElement.nodeType === DOCUMENT_NODE
+    ? (rootContainerElement: any)
+    : rootContainerElement.ownerDocument;
+}
+
+export function getRootHostContext(
+  rootContainerInstance: Container,
+): HostContext {
+  let type;
+  let context: HostContextProd;
+  const nodeType = rootContainerInstance.nodeType;
+  switch (nodeType) {
+    case DOCUMENT_NODE:
+    case DOCUMENT_FRAGMENT_NODE: {
+      type = nodeType === DOCUMENT_NODE ? '#document' : '#fragment';
+      const root = (rootContainerInstance: any).documentElement;
+      if (root) {
+        const namespaceURI = root.namespaceURI;
+        context = namespaceURI
+          ? getOwnHostContext(namespaceURI)
+          : HostContextNamespaceNone;
+      } else {
+        context = HostContextNamespaceNone;
+      }
+      break;
+    }
+    default: {
+      const container: any =
+        !disableCommentsAsDOMContainers && nodeType === COMMENT_NODE
+          ? rootContainerInstance.parentNode
+          : rootContainerInstance;
+      type = container.tagName;
+      const namespaceURI = container.namespaceURI;
+      if (!namespaceURI) {
+        switch (type) {
+          case 'svg':
+            context = HostContextNamespaceSvg;
+            break;
+          case 'math':
+            context = HostContextNamespaceMath;
+            break;
+          default:
+            context = HostContextNamespaceNone;
+            break;
+        }
+      } else {
+        const ownContext = getOwnHostContext(namespaceURI);
+        context = getChildHostContextProd(ownContext, type);
+      }
+      break;
+    }
+  }
+  if (__DEV__) {
+    const validatedTag = type.toLowerCase();
+    const ancestorInfo = updatedAncestorInfoDev(null, validatedTag);
+    return {context, ancestorInfo};
+  }
+  return context;
+}
+
+function getOwnHostContext(namespaceURI: string): HostContextNamespace {
+  switch (namespaceURI) {
+    case SVG_NAMESPACE:
+      return HostContextNamespaceSvg;
+    case MATH_NAMESPACE:
+      return HostContextNamespaceMath;
+    default:
+      return HostContextNamespaceNone;
+  }
+}
+
+function getChildHostContextProd(
+  parentNamespace: HostContextNamespace,
+  type: string,
+): HostContextNamespace {
+  if (parentNamespace === HostContextNamespaceNone) {
+    // No (or default) parent namespace: potential entry point.
+    switch (type) {
+      case 'svg':
+        return HostContextNamespaceSvg;
+      case 'math':
+        return HostContextNamespaceMath;
+      default:
+        return HostContextNamespaceNone;
+    }
+  }
+  if (parentNamespace === HostContextNamespaceSvg && type === 'foreignObject') {
+    // We're leaving SVG.
+    return HostContextNamespaceNone;
+  }
+  // By default, pass namespace below.
+  return parentNamespace;
+}
+
+export function getChildHostContext(
+  parentHostContext: HostContext,
+  type: string,
+): HostContext {
+  if (__DEV__) {
+    const parentHostContextDev = ((parentHostContext: any): HostContextDev);
+    const context = getChildHostContextProd(parentHostContextDev.context, type);
+    const ancestorInfo = updatedAncestorInfoDev(
+      parentHostContextDev.ancestorInfo,
+      type,
+    );
+    return {context, ancestorInfo};
+  }
+  const parentNamespace = ((parentHostContext: any): HostContextProd);
+  return getChildHostContextProd(parentNamespace, type);
+}
+
+export function getPublicInstance(instance: Instance): Instance {
+  return instance;
+}
+
+export function prepareForCommit(containerInfo: Container): Object | null {
+  eventsEnabled = ReactBrowserEventEmitterIsEnabled();
+  selectionInformation = getSelectionInformation(containerInfo);
+  let activeInstance = null;
+  if (enableCreateEventHandleAPI) {
+    const focusedElem = selectionInformation.focusedElem;
+    if (focusedElem !== null) {
+      activeInstance = getClosestInstanceFromNode(focusedElem);
+    }
+  }
+  ReactBrowserEventEmitterSetEnabled(false);
+  return activeInstance;
+}
+
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object): void {
+  if (enableCreateEventHandleAPI) {
+    ReactBrowserEventEmitterSetEnabled(true);
+    dispatchBeforeDetachedBlur(
+      (selectionInformation: any).focusedElem,
+      internalInstanceHandle,
+    );
+    ReactBrowserEventEmitterSetEnabled(false);
+  }
+}
+
+export function afterActiveInstanceBlur(): void {
+  if (enableCreateEventHandleAPI) {
+    ReactBrowserEventEmitterSetEnabled(true);
+    dispatchAfterDetachedBlur((selectionInformation: any).focusedElem);
+    ReactBrowserEventEmitterSetEnabled(false);
+  }
+}
+
+export function resetAfterCommit(containerInfo: Container): void {
+  restoreSelection(selectionInformation, containerInfo);
+  ReactBrowserEventEmitterSetEnabled(eventsEnabled);
+  eventsEnabled = null;
+  selectionInformation = null;
+}
+
+export function createHoistableInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): Instance {
+  const ownerDocument = getOwnerDocumentFromRootContainer(
+    rootContainerInstance,
+  );
+
+  const domElement: Instance = ownerDocument.createElement(type);
+  precacheFiberNode(internalInstanceHandle, domElement);
+  updateFiberProps(domElement, props);
+  setInitialProperties(domElement, type, props);
+  markNodeAsHoistable(domElement);
+  return domElement;
+}
+
+let didWarnScriptTags = false;
+const warnedUnknownTags: {
+  [key: string]: boolean,
+} = {
+  // There are working polyfills for <dialog>. Let people use it.
+  dialog: true,
+  // Electron ships a custom <webview> tag to display external web content in
+  // an isolated frame and process.
+  // This tag is not present in non Electron environments such as JSDom which
+  // is often used for testing purposes.
+  // @see https://electronjs.org/docs/api/webview-tag
+  webview: true,
+};
+
+export function createInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  internalInstanceHandle: Object,
+): Instance {
+  let hostContextProd: HostContextProd;
+  if (__DEV__) {
+    // TODO: take namespace into account when validating.
+    const hostContextDev: HostContextDev = (hostContext: any);
+    validateDOMNesting(type, hostContextDev.ancestorInfo);
+    hostContextProd = hostContextDev.context;
+  } else {
+    hostContextProd = (hostContext: any);
+  }
+
+  const ownerDocument = getOwnerDocumentFromRootContainer(
+    rootContainerInstance,
+  );
+
+  let domElement: Instance;
+  switch (hostContextProd) {
+    case HostContextNamespaceSvg:
+      domElement = ownerDocument.createElementNS(SVG_NAMESPACE, type);
+      break;
+    case HostContextNamespaceMath:
+      domElement = ownerDocument.createElementNS(MATH_NAMESPACE, type);
+      break;
+    default:
+      switch (type) {
+        case 'svg': {
+          domElement = ownerDocument.createElementNS(SVG_NAMESPACE, type);
+          break;
+        }
+        case 'math': {
+          domElement = ownerDocument.createElementNS(MATH_NAMESPACE, type);
+          break;
+        }
+        case '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>';
+          // This is guaranteed to yield a script element.
+          const firstChild = ((div.firstChild: any): HTMLScriptElement);
+          domElement = div.removeChild(firstChild);
+          break;
+        }
+        case 'select': {
+          if (typeof props.is === 'string') {
+            domElement = ownerDocument.createElement('select', {is: props.is});
+          } else {
+            // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
+            // See discussion in https://github.com/facebook/react/pull/6896
+            // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
+            domElement = ownerDocument.createElement('select');
+          }
+          if (props.multiple) {
+            domElement.multiple = true;
+          } else if (props.size) {
+            // Setting a size greater than 1 causes a select to behave like `multiple=true`, where
+            // it is possible that no option is selected.
+            //
+            // This is only necessary when a select in "single selection mode".
+            domElement.size = props.size;
+          }
+          break;
+        }
+        default: {
+          if (typeof props.is === 'string') {
+            domElement = ownerDocument.createElement(type, {is: props.is});
+          } else {
+            // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
+            // See discussion in https://github.com/facebook/react/pull/6896
+            // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
+            domElement = ownerDocument.createElement(type);
+          }
+
+          if (__DEV__) {
+            if (type.indexOf('-') === -1) {
+              // We're not SVG/MathML and we don't have a dash, so we're not a custom element
+              // Even if you use `is`, these should be of known type and lower case.
+              if (type !== type.toLowerCase()) {
+                console.error(
+                  '<%s /> is using incorrect casing. ' +
+                    'Use PascalCase for React components, ' +
+                    'or lowercase for HTML elements.',
+                  type,
+                );
+              }
+              if (
+                // $FlowFixMe[method-unbinding]
+                Object.prototype.toString.call(domElement) ===
+                  '[object HTMLUnknownElement]' &&
+                !hasOwnProperty.call(warnedUnknownTags, type)
+              ) {
+                warnedUnknownTags[type] = true;
+                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.',
+                  type,
+                );
+              }
+            }
+          }
+        }
+      }
+  }
+  precacheFiberNode(internalInstanceHandle, domElement);
+  updateFiberProps(domElement, props);
+  return domElement;
+}
+
+let didWarnForClone = false;
+
+export function cloneMutableInstance(
+  instance: Instance,
+  keepChildren: boolean,
+): Instance {
+  if (__DEV__) {
+    // Warn for problematic
+    const tagName = instance.tagName;
+    switch (tagName) {
+      case 'VIDEO':
+      case 'IFRAME':
+        if (!didWarnForClone) {
+          didWarnForClone = true;
+          // TODO: Once we have the ability to avoid cloning the root, suggest an absolutely
+          // positioned ViewTransition instead as the solution.
+          console.warn(
+            'startGestureTransition() required cloning a <%s> element since it exists in ' +
+              'both states of the gesture. This can be problematic since it will load it twice ' +
+              'Try removing or hiding it with <Activity mode="offscreen"> in the optimistic state.',
+            tagName.toLowerCase(),
+          );
+        }
+        break;
+    }
+  }
+  return instance.cloneNode(keepChildren);
+}
+
+export function appendInitialChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  // Note: This should not use moveBefore() because initial are appended while disconnected.
+  parentInstance.appendChild(child);
+}
+
+export function finalizeInitialChildren(
+  domElement: Instance,
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+): boolean {
+  setInitialProperties(domElement, type, props);
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      return !!props.autoFocus;
+    case 'img':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function finalizeHydratedChildren(
+  domElement: Instance,
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+): boolean {
+  // TOOD: Consider unifying this with hydrateInstance.
+  if (!enableHydrationChangeEvent) {
+    return false;
+  }
+  switch (type) {
+    case 'input':
+    case 'select':
+    case 'textarea':
+    case 'img':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function shouldSetTextContent(type: string, props: Props): boolean {
+  return (
+    type === 'textarea' ||
+    type === 'noscript' ||
+    typeof props.children === 'string' ||
+    typeof props.children === 'number' ||
+    typeof props.children === 'bigint' ||
+    (typeof props.dangerouslySetInnerHTML === 'object' &&
+      props.dangerouslySetInnerHTML !== null &&
+      props.dangerouslySetInnerHTML.__html != null)
+  );
+}
+
+export function createTextInstance(
+  text: string,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  internalInstanceHandle: Object,
+): TextInstance {
+  if (__DEV__) {
+    const hostContextDev = ((hostContext: any): HostContextDev);
+    const ancestor = hostContextDev.ancestorInfo.current;
+    if (ancestor != null) {
+      validateTextNesting(
+        text,
+        ancestor.tag,
+        hostContextDev.ancestorInfo.implicitRootScope,
+      );
+    }
+  }
+  const textNode: TextInstance = getOwnerDocumentFromRootContainer(
+    rootContainerInstance,
+  ).createTextNode(text);
+  precacheFiberNode(internalInstanceHandle, textNode);
+  return textNode;
+}
+
+export function cloneMutableTextInstance(
+  textInstance: TextInstance,
+): TextInstance {
+  return textInstance.cloneNode(false);
+}
+
+let currentPopstateTransitionEvent: Event | null = null;
+export function shouldAttemptEagerTransition(): boolean {
+  const event = window.event;
+  if (event && event.type === 'popstate') {
+    // This is a popstate event. Attempt to render any transition during this
+    // event synchronously. Unless we already attempted during this event.
+    if (event === currentPopstateTransitionEvent) {
+      // We already attempted to render this popstate transition synchronously.
+      // Any subsequent attempts must have happened as the result of a derived
+      // update, like startTransition inside useEffect, or useDV. Switch back to
+      // the default behavior for all remaining transitions during the current
+      // popstate event.
+      return false;
+    } else {
+      // Cache the current event in case a derived transition is scheduled.
+      // (Refer to previous branch.)
+      currentPopstateTransitionEvent = event;
+      return true;
+    }
+  }
+  // We're not inside a popstate event.
+  currentPopstateTransitionEvent = null;
+  return false;
+}
+
+let schedulerEvent: void | Event = undefined;
+export function trackSchedulerEvent(): void {
+  schedulerEvent = window.event;
+}
+
+export function resolveEventType(): null | string {
+  const event = window.event;
+  return event && event !== schedulerEvent ? event.type : null;
+}
+
+export function resolveEventTimeStamp(): number {
+  const event = window.event;
+  return event && event !== schedulerEvent ? event.timeStamp : -1.1;
+}
+
+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: any =
+  typeof setTimeout === 'function' ? setTimeout : (undefined: any);
+export const cancelTimeout: any =
+  typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
+export const noTimeout: -1 = -1;
+const localPromise = typeof Promise === 'function' ? Promise : undefined;
+const localRequestAnimationFrame =
+  typeof requestAnimationFrame === 'function'
+    ? requestAnimationFrame
+    : scheduleTimeout;
+
+export {getClosestInstanceFromNode as getInstanceFromNode};
+
+export function preparePortalMount(portalInstance: Instance): void {
+  listenToAllSupportedEvents(portalInstance);
+}
+
+export function prepareScopeUpdate(
+  scopeInstance: ReactScopeInstance,
+  internalInstanceHandle: Object,
+): void {
+  if (enableScopeAPI) {
+    precacheFiberNode(internalInstanceHandle, scopeInstance);
+  }
+}
+
+export function getInstanceFromScope(
+  scopeInstance: ReactScopeInstance,
+): null | Object {
+  if (enableScopeAPI) {
+    return getFiberFromScopeInstance(scopeInstance);
+  }
+  return null;
+}
+
+// -------------------
+//     Microtasks
+// -------------------
+export const supportsMicrotasks = true;
+export const scheduleMicrotask: any =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : typeof localPromise !== 'undefined'
+      ? callback =>
+          localPromise.resolve(null).then(callback).catch(handleErrorInNextTick)
+      : scheduleTimeout; // TODO: Determine the best fallback here.
+
+function handleErrorInNextTick(error: any) {
+  setTimeout(() => {
+    throw error;
+  });
+}
+
+// -------------------
+//     Mutation
+// -------------------
+
+export const supportsMutation = true;
+
+export function commitMount(
+  domElement: Instance,
+  type: string,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {
+  // Despite the naming that might imply otherwise, this method only
+  // fires if there is an `Update` effect scheduled during mounting.
+  // This happens if `finalizeInitialChildren` returns `true` (which it
+  // does to implement the `autoFocus` attribute on the client). But
+  // there are also other cases when this might happen (such as patching
+  // up text content during hydration mismatch). So we'll check this again.
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      if (newProps.autoFocus) {
+        ((domElement: any):
+          | HTMLButtonElement
+          | HTMLInputElement
+          | HTMLSelectElement
+          | HTMLTextAreaElement).focus();
+      }
+      return;
+    case 'img': {
+      // The technique here is to assign the src or srcSet property to cause the browser
+      // to issue a new load event. If it hasn't loaded yet it'll fire whenever the load actually completes.
+      // If it has already loaded we missed it so the second load will still be the first one that executes
+      // any associated onLoad props.
+      // Even if we have srcSet we prefer to reassign src. The reason is that Firefox does not trigger a new
+      // load event when only srcSet is assigned. Chrome will trigger a load event if either is assigned so we
+      // only need to assign one. And Safari just never triggers a new load event which means this technique
+      // is already a noop regardless of which properties are assigned. We should revisit if browsers update
+      // this heuristic in the future.
+      if (newProps.src) {
+        const src = (newProps: any).src;
+        if (enableSrcObject && typeof src === 'object') {
+          // For object src, we can't just set the src again to the same blob URL because it might have
+          // already revoked if it loaded before this. However, we can create a new blob URL and set that.
+          // This is relatively cheap since the blob is already in memory but this might cause some
+          // duplicated work.
+          // TODO: We could maybe detect if load hasn't fired yet and if so reuse the URL.
+          try {
+            setSrcObject(domElement, type, src);
+            return;
+          } catch (x) {
+            // If URL.createObjectURL() errors, it was probably some other object type
+            // that should be toString:ed instead, so we just fall-through to the normal
+            // path.
+          }
+        }
+        ((domElement: any): HTMLImageElement).src = src;
+      } else if (newProps.srcSet) {
+        ((domElement: any): HTMLImageElement).srcset = (newProps: any).srcSet;
+      }
+      return;
+    }
+  }
+}
+
+export function commitHydratedInstance(
+  domElement: Instance,
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+): void {
+  if (!enableHydrationChangeEvent) {
+    return;
+  }
+  // This fires in the commit phase if a hydrated instance needs to do further
+  // work in the commit phase. Similar to commitMount. However, this should not
+  // do things that would've already happened such as set auto focus since that
+  // would steal focus. It's only scheduled if finalizeHydratedChildren returns
+  // true.
+  switch (type) {
+    case 'input': {
+      hydrateInput(
+        domElement,
+        props.value,
+        props.defaultValue,
+        props.checked,
+        props.defaultChecked,
+      );
+      break;
+    }
+    case 'select': {
+      hydrateSelect(
+        domElement,
+        props.value,
+        props.defaultValue,
+        props.multiple,
+      );
+      break;
+    }
+    case 'textarea':
+      hydrateTextarea(domElement, props.value, props.defaultValue);
+      break;
+    case 'img':
+      // TODO: Should we replay onLoad events?
+      break;
+  }
+}
+
+export function commitUpdate(
+  domElement: Instance,
+  type: string,
+  oldProps: Props,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {
+  // Diff and update the properties.
+  updateProperties(domElement, type, oldProps, newProps);
+
+  // Update the props handle so that we know which props are the ones with
+  // with current event handlers.
+  updateFiberProps(domElement, newProps);
+}
+
+export function resetTextContent(domElement: Instance): void {
+  setTextContent(domElement, '');
+}
+
+export function commitTextUpdate(
+  textInstance: TextInstance,
+  oldText: string,
+  newText: string,
+): void {
+  textInstance.nodeValue = newText;
+}
+
+const supportsMoveBefore =
+  // $FlowFixMe[prop-missing]: We're doing the feature detection here.
+  enableMoveBefore &&
+  typeof window !== 'undefined' &&
+  typeof window.Element.prototype.moveBefore === 'function';
+
+export function appendChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  if (supportsMoveBefore && child.parentNode !== null) {
+    // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+    parentInstance.moveBefore(child, null);
+  } else {
+    parentInstance.appendChild(child);
+  }
+}
+
+function warnForReactChildrenConflict(container: Container): void {
+  if (__DEV__) {
+    if ((container: any).__reactWarnedAboutChildrenConflict) {
+      return;
+    }
+    const props = getFiberCurrentPropsFromNode(container);
+    if (props !== null) {
+      const fiber = getInstanceFromNode(container);
+      if (fiber !== null) {
+        if (
+          typeof props.children === 'string' ||
+          typeof props.children === 'number'
+        ) {
+          (container: any).__reactWarnedAboutChildrenConflict = true;
+          // Run the warning with the Fiber of the container for context of where the children are specified.
+          // We could also maybe use the Portal. The current execution context is the child being added.
+          runWithFiberInDEV(fiber, () => {
+            console.error(
+              'Cannot use a ref on a React element as a container to `createRoot` or `createPortal` ' +
+                'if that element also sets "children" text content using React. It should be a leaf with no children. ' +
+                "Otherwise it's ambiguous which children should be used.",
+            );
+          });
+        } else if (props.dangerouslySetInnerHTML != null) {
+          (container: any).__reactWarnedAboutChildrenConflict = true;
+          runWithFiberInDEV(fiber, () => {
+            console.error(
+              'Cannot use a ref on a React element as a container to `createRoot` or `createPortal` ' +
+                'if that element also sets "dangerouslySetInnerHTML" using React. It should be a leaf with no children. ' +
+                "Otherwise it's ambiguous which children should be used.",
+            );
+          });
+        }
+      }
+    }
+  }
+}
+
+export function appendChildToContainer(
+  container: Container,
+  child: Instance | TextInstance,
+): void {
+  if (__DEV__) {
+    warnForReactChildrenConflict(container);
+  }
+  let parentNode: DocumentFragment | Element;
+  if (container.nodeType === DOCUMENT_NODE) {
+    parentNode = (container: any).body;
+  } else if (
+    !disableCommentsAsDOMContainers &&
+    container.nodeType === COMMENT_NODE
+  ) {
+    parentNode = (container.parentNode: any);
+    if (supportsMoveBefore && child.parentNode !== null) {
+      // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+      parentNode.moveBefore(child, container);
+    } else {
+      parentNode.insertBefore(child, container);
+    }
+    return;
+  } else if (container.nodeName === 'HTML') {
+    parentNode = (container.ownerDocument.body: any);
+  } else {
+    parentNode = (container: any);
+  }
+  if (supportsMoveBefore && child.parentNode !== null) {
+    // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+    parentNode.moveBefore(child, null);
+  } else {
+    parentNode.appendChild(child);
+  }
+
+  // This container might be used for a portal.
+  // If something inside a portal is clicked, that click should bubble
+  // through the React tree. However, on Mobile Safari the click would
+  // never bubble through the *DOM* tree unless an ancestor with onclick
+  // event exists. So we wouldn't see it and dispatch it.
+  // This is why we ensure that non React root containers have inline onclick
+  // defined.
+  // https://github.com/facebook/react/issues/11918
+  const reactRootContainer = container._reactRootContainer;
+  if (
+    (reactRootContainer === null || reactRootContainer === undefined) &&
+    parentNode.onclick === null
+  ) {
+    // TODO: This cast may not be sound for SVG, MathML or custom elements.
+    trapClickOnNonInteractiveElement(((parentNode: any): HTMLElement));
+  }
+}
+
+export function insertBefore(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+  beforeChild: Instance | TextInstance | SuspenseInstance | ActivityInstance,
+): void {
+  if (supportsMoveBefore && child.parentNode !== null) {
+    // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+    parentInstance.moveBefore(child, beforeChild);
+  } else {
+    parentInstance.insertBefore(child, beforeChild);
+  }
+}
+
+export function insertInContainerBefore(
+  container: Container,
+  child: Instance | TextInstance,
+  beforeChild: Instance | TextInstance | SuspenseInstance | ActivityInstance,
+): void {
+  if (__DEV__) {
+    warnForReactChildrenConflict(container);
+  }
+  let parentNode: DocumentFragment | Element;
+  if (container.nodeType === DOCUMENT_NODE) {
+    parentNode = (container: any).body;
+  } else if (
+    !disableCommentsAsDOMContainers &&
+    container.nodeType === COMMENT_NODE
+  ) {
+    parentNode = (container.parentNode: any);
+  } else if (container.nodeName === 'HTML') {
+    parentNode = (container.ownerDocument.body: any);
+  } else {
+    parentNode = (container: any);
+  }
+  if (supportsMoveBefore && child.parentNode !== null) {
+    // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+    parentNode.moveBefore(child, beforeChild);
+  } else {
+    parentNode.insertBefore(child, beforeChild);
+  }
+}
+
+export function isSingletonScope(type: string): boolean {
+  return type === 'head';
+}
+
+function createEvent(type: DOMEventName, bubbles: boolean): Event {
+  const event = document.createEvent('Event');
+  event.initEvent(((type: any): string), bubbles, false);
+  return event;
+}
+
+function dispatchBeforeDetachedBlur(
+  target: HTMLElement,
+  internalInstanceHandle: Object,
+): void {
+  if (enableCreateEventHandleAPI) {
+    const event = createEvent('beforeblur', true);
+    // Dispatch "beforeblur" directly on the target,
+    // so it gets picked up by the event system and
+    // can propagate through the React internal tree.
+    // $FlowFixMe[prop-missing]: internal field
+    event._detachedInterceptFiber = internalInstanceHandle;
+    target.dispatchEvent(event);
+  }
+}
+
+function dispatchAfterDetachedBlur(target: HTMLElement): void {
+  if (enableCreateEventHandleAPI) {
+    const event = createEvent('afterblur', false);
+    // So we know what was detached, make the relatedTarget the
+    // detached target on the "afterblur" event.
+    (event: any).relatedTarget = target;
+    // Dispatch the event on the document.
+    document.dispatchEvent(event);
+  }
+}
+
+export function removeChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance | SuspenseInstance | ActivityInstance,
+): void {
+  parentInstance.removeChild(child);
+}
+
+export function removeChildFromContainer(
+  container: Container,
+  child: Instance | TextInstance | SuspenseInstance | ActivityInstance,
+): void {
+  let parentNode: DocumentFragment | Element;
+  if (container.nodeType === DOCUMENT_NODE) {
+    parentNode = (container: any).body;
+  } else if (
+    !disableCommentsAsDOMContainers &&
+    container.nodeType === COMMENT_NODE
+  ) {
+    parentNode = (container.parentNode: any);
+  } else if (container.nodeName === 'HTML') {
+    parentNode = (container.ownerDocument.body: any);
+  } else {
+    parentNode = (container: any);
+  }
+  parentNode.removeChild(child);
+}
+
+function clearHydrationBoundary(
+  parentInstance: Instance,
+  hydrationInstance: SuspenseInstance | ActivityInstance,
+): void {
+  let node: Node = hydrationInstance;
+  // Delete 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;
+  do {
+    const nextNode = node.nextSibling;
+    parentInstance.removeChild(node);
+    if (nextNode && nextNode.nodeType === COMMENT_NODE) {
+      const data = ((nextNode: any).data: string);
+      if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
+        if (depth === 0) {
+          parentInstance.removeChild(nextNode);
+          // Retry if any event replaying was blocked on this.
+          retryIfBlockedOn(hydrationInstance);
+          return;
+        } else {
+          depth--;
+        }
+      } else if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === ACTIVITY_START_DATA
+      ) {
+        depth++;
+      } else if (data === PREAMBLE_CONTRIBUTION_HTML) {
+        // If a preamble contribution marker is found within the bounds of this boundary,
+        // then it contributed to the html tag and we need to reset it.
+        const ownerDocument = parentInstance.ownerDocument;
+        const documentElement: Element = (ownerDocument.documentElement: any);
+        releaseSingletonInstance(documentElement);
+      } else if (data === PREAMBLE_CONTRIBUTION_HEAD) {
+        const ownerDocument = parentInstance.ownerDocument;
+        const head: Element = (ownerDocument.head: any);
+        releaseSingletonInstance(head);
+        // We need to clear the head because this is the only singleton that can have children that
+        // were part of this boundary but are not inside this boundary.
+        clearHead(head);
+      } else if (data === PREAMBLE_CONTRIBUTION_BODY) {
+        const ownerDocument = parentInstance.ownerDocument;
+        const body: Element = (ownerDocument.body: any);
+        releaseSingletonInstance(body);
+      }
+    }
+    // $FlowFixMe[incompatible-type] we bail out when we get a null
+    node = nextNode;
+  } while (node);
+  // TODO: Warn, we didn't find the end comment boundary.
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(hydrationInstance);
+}
+
+export function clearActivityBoundary(
+  parentInstance: Instance,
+  activityInstance: ActivityInstance,
+): void {
+  clearHydrationBoundary(parentInstance, activityInstance);
+}
+
+export function clearSuspenseBoundary(
+  parentInstance: Instance,
+  suspenseInstance: SuspenseInstance,
+): void {
+  clearHydrationBoundary(parentInstance, suspenseInstance);
+}
+
+function clearHydrationBoundaryFromContainer(
+  container: Container,
+  hydrationInstance: SuspenseInstance | ActivityInstance,
+): void {
+  let parentNode: DocumentFragment | Element;
+  if (container.nodeType === DOCUMENT_NODE) {
+    parentNode = (container: any).body;
+  } else if (
+    !disableCommentsAsDOMContainers &&
+    container.nodeType === COMMENT_NODE
+  ) {
+    parentNode = (container.parentNode: any);
+  } else if (container.nodeName === 'HTML') {
+    parentNode = (container.ownerDocument.body: any);
+  } else {
+    parentNode = (container: any);
+  }
+  clearHydrationBoundary(parentNode, hydrationInstance);
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(container);
+}
+
+export function clearActivityBoundaryFromContainer(
+  container: Container,
+  activityInstance: ActivityInstance,
+): void {
+  clearHydrationBoundaryFromContainer(container, activityInstance);
+}
+
+export function clearSuspenseBoundaryFromContainer(
+  container: Container,
+  suspenseInstance: SuspenseInstance,
+): void {
+  clearHydrationBoundaryFromContainer(container, suspenseInstance);
+}
+
+function hideOrUnhideDehydratedBoundary(
+  suspenseInstance: SuspenseInstance | ActivityInstance,
+  isHidden: boolean,
+) {
+  let node: Node = suspenseInstance;
+  // Unhide all nodes within this suspense boundary.
+  let depth = 0;
+  do {
+    const nextNode = node.nextSibling;
+    if (node.nodeType === ELEMENT_NODE) {
+      const instance = ((node: any): HTMLElement & {_stashedDisplay?: string});
+      if (isHidden) {
+        instance._stashedDisplay = instance.style.display;
+        instance.style.display = 'none';
+      } else {
+        instance.style.display = instance._stashedDisplay || '';
+        if (instance.getAttribute('style') === '') {
+          instance.removeAttribute('style');
+        }
+      }
+    } else if (node.nodeType === TEXT_NODE) {
+      const textNode = ((node: any): Text & {_stashedText?: string});
+      if (isHidden) {
+        textNode._stashedText = textNode.nodeValue;
+        textNode.nodeValue = '';
+      } else {
+        textNode.nodeValue = textNode._stashedText || '';
+      }
+    }
+    if (nextNode && nextNode.nodeType === COMMENT_NODE) {
+      const data = ((nextNode: any).data: string);
+      if (data === SUSPENSE_END_DATA) {
+        if (depth === 0) {
+          return;
+        } else {
+          depth--;
+        }
+      } else if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA
+      ) {
+        depth++;
+      }
+      // TODO: Should we hide preamble contribution in this case?
+    }
+    // $FlowFixMe[incompatible-type] we bail out when we get a null
+    node = nextNode;
+  } while (node);
+}
+
+export function hideDehydratedBoundary(
+  suspenseInstance: SuspenseInstance,
+): void {
+  hideOrUnhideDehydratedBoundary(suspenseInstance, true);
+}
+
+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);
+  const style = instance.style;
+  // $FlowFixMe[method-unbinding]
+  if (typeof style.setProperty === 'function') {
+    style.setProperty('display', 'none', 'important');
+  } else {
+    style.display = 'none';
+  }
+}
+
+export function hideTextInstance(textInstance: TextInstance): void {
+  textInstance.nodeValue = '';
+}
+
+export function unhideDehydratedBoundary(
+  dehydratedInstance: SuspenseInstance | ActivityInstance,
+): void {
+  hideOrUnhideDehydratedBoundary(dehydratedInstance, false);
+}
+
+export function unhideInstance(instance: Instance, props: Props): void {
+  instance = ((instance: any): HTMLElement);
+  const styleProp = props[STYLE];
+  const display =
+    styleProp !== undefined &&
+    styleProp !== null &&
+    styleProp.hasOwnProperty('display')
+      ? styleProp.display
+      : null;
+  instance.style.display =
+    display == null || typeof display === 'boolean'
+      ? ''
+      : // The value would've errored already if it wasn't safe.
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        ('' + display).trim();
+}
+
+export function unhideTextInstance(
+  textInstance: TextInstance,
+  text: string,
+): void {
+  textInstance.nodeValue = text;
+}
+
+function warnForBlockInsideInline(instance: HTMLElement) {
+  if (__DEV__) {
+    let nextNode = instance.firstChild;
+    outer: while (nextNode != null) {
+      let node: Node = nextNode;
+      if (
+        node.nodeType === ELEMENT_NODE &&
+        getComputedStyle((node: any)).display === 'block'
+      ) {
+        const fiber =
+          getInstanceFromNode(node) || getInstanceFromNode(instance);
+        runWithFiberInDEV(
+          fiber,
+          (parentTag: string, childTag: string) => {
+            console.error(
+              "You're about to start a <ViewTransition> around a display: inline " +
+                'element <%s>, which itself has a display: block element <%s> inside it. ' +
+                'This might trigger a bug in Safari which causes the View Transition to ' +
+                'be skipped with a duplicate name error.\n' +
+                'https://bugs.webkit.org/show_bug.cgi?id=290923',
+              parentTag.toLocaleLowerCase(),
+              childTag.toLocaleLowerCase(),
+            );
+          },
+          instance.tagName,
+          (node: any).tagName,
+        );
+        break;
+      }
+      if (node.firstChild != null) {
+        nextNode = node.firstChild;
+        continue;
+      }
+      if (node === instance) {
+        break;
+      }
+      while (node.nextSibling == null) {
+        if (node.parentNode == null || node.parentNode === instance) {
+          break;
+        }
+        node = node.parentNode;
+      }
+      nextNode = node.nextSibling;
+    }
+  }
+}
+
+function countClientRects(rects: Array<ClientRect>): number {
+  if (rects.length === 1) {
+    return 1;
+  }
+  // Count non-zero rects.
+  let count = 0;
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    if (rect.width > 0 && rect.height > 0) {
+      count++;
+    }
+  }
+  return count;
+}
+
+export function applyViewTransitionName(
+  instance: Instance,
+  name: string,
+  className: ?string,
+): void {
+  instance = ((instance: any): HTMLElement);
+  // If the name isn't valid CSS identifier, base64 encode the name instead.
+  // This doesn't let you select it in custom CSS selectors but it does work in current
+  // browsers.
+  const escapedName =
+    CSS.escape(name) !== name ? 'r-' + btoa(name).replace(/=/g, '') : name;
+  // $FlowFixMe[prop-missing]
+  instance.style.viewTransitionName = escapedName;
+  if (className != null) {
+    // $FlowFixMe[prop-missing]
+    instance.style.viewTransitionClass = className;
+  }
+  const computedStyle = getComputedStyle(instance);
+  if (computedStyle.display === 'inline') {
+    // WebKit has a bug where assigning a name to display: inline elements errors
+    // if they have display: block children. We try to work around this bug in the
+    // simple case by converting it automatically to display: inline-block.
+    // https://bugs.webkit.org/show_bug.cgi?id=290923
+    const rects = instance.getClientRects();
+    if (
+      // $FlowFixMe[incompatible-call]
+      countClientRects(rects) === 1
+    ) {
+      // If the instance has a single client rect, that means that it can be
+      // expressed as a display: inline-block or block.
+      // This will cause layout thrash but we live with it since inline view transitions
+      // are unusual.
+      const style = instance.style;
+      // If there's literally only one rect, then it's likely on a single line like an
+      // inline-block. If it's multiple rects but all but one of them are empty it's
+      // likely because it's a single block that caused a line break.
+      style.display = rects.length === 1 ? 'inline-block' : 'block';
+      // Margin doesn't apply to inline so should be zero. However, padding top/bottom
+      // applies to inline-block positioning which we can offset by setting the margin
+      // to the negative padding to get it back into original position.
+      style.marginTop = '-' + computedStyle.paddingTop;
+      style.marginBottom = '-' + computedStyle.paddingBottom;
+    } else {
+      // This case cannot be easily fixed if it has blocks but it's also fine if
+      // it doesn't have blocks. So we only warn in DEV about this being an issue.
+      warnForBlockInsideInline(instance);
+    }
+  }
+}
+
+export function restoreViewTransitionName(
+  instance: Instance,
+  props: Props,
+): void {
+  instance = ((instance: any): HTMLElement);
+  const style = instance.style;
+  const styleProp = props[STYLE];
+  const viewTransitionName =
+    styleProp != null
+      ? styleProp.hasOwnProperty('viewTransitionName')
+        ? styleProp.viewTransitionName
+        : styleProp.hasOwnProperty('view-transition-name')
+          ? styleProp['view-transition-name']
+          : null
+      : null;
+  // $FlowFixMe[prop-missing]
+  style.viewTransitionName =
+    viewTransitionName == null || typeof viewTransitionName === 'boolean'
+      ? ''
+      : // The value would've errored already if it wasn't safe.
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        ('' + viewTransitionName).trim();
+  const viewTransitionClass =
+    styleProp != null
+      ? styleProp.hasOwnProperty('viewTransitionClass')
+        ? styleProp.viewTransitionClass
+        : styleProp.hasOwnProperty('view-transition-class')
+          ? styleProp['view-transition-class']
+          : null
+      : null;
+  // $FlowFixMe[prop-missing]
+  style.viewTransitionClass =
+    viewTransitionClass == null || typeof viewTransitionClass === 'boolean'
+      ? ''
+      : // The value would've errored already if it wasn't safe.
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        ('' + viewTransitionClass).trim();
+  if (style.display === 'inline-block') {
+    // We might have overridden the style. Reset it to what it should be.
+    if (styleProp == null) {
+      style.display = style.margin = '';
+    } else {
+      const display = styleProp.display;
+      style.display =
+        display == null || typeof display === 'boolean' ? '' : display;
+      const margin = styleProp.margin;
+      if (margin != null) {
+        style.margin = margin;
+      } else {
+        const marginTop = styleProp.hasOwnProperty('marginTop')
+          ? styleProp.marginTop
+          : styleProp['margin-top'];
+        style.marginTop =
+          marginTop == null || typeof marginTop === 'boolean' ? '' : marginTop;
+        const marginBottom = styleProp.hasOwnProperty('marginBottom')
+          ? styleProp.marginBottom
+          : styleProp['margin-bottom'];
+        style.marginBottom =
+          marginBottom == null || typeof marginBottom === 'boolean'
+            ? ''
+            : marginBottom;
+      }
+    }
+  }
+}
+
+export function cancelViewTransitionName(
+  instance: Instance,
+  oldName: string,
+  props: Props,
+): void {
+  // To cancel the "new" state and paint this instance as part of the parent, all we have to do
+  // is remove the view-transition-name before we exit startViewTransition.
+  restoreViewTransitionName(instance, props);
+  // There isn't a way to cancel an "old" state but what we can do is hide it by animating it.
+  // Since it is already removed from the old state of the parent, this technique only works
+  // if the parent also isn't transitioning. Therefore we should only cancel the root most
+  // ViewTransitions.
+  const documentElement = instance.ownerDocument.documentElement;
+  if (documentElement !== null) {
+    documentElement.animate(
+      {opacity: [0, 0], pointerEvents: ['none', 'none']},
+      // $FlowFixMe[incompatible-call]
+      {
+        duration: 0,
+        fill: 'forwards',
+        pseudoElement: '::view-transition-group(' + oldName + ')',
+      },
+    );
+  }
+}
+
+export function cancelRootViewTransitionName(rootContainer: Container): void {
+  const documentElement: null | HTMLElement =
+    rootContainer.nodeType === DOCUMENT_NODE
+      ? (rootContainer: any).documentElement
+      : rootContainer.ownerDocument.documentElement;
+
+  if (
+    !disableCommentsAsDOMContainers &&
+    rootContainer.nodeType === COMMENT_NODE
+  ) {
+    if (__DEV__) {
+      console.warn(
+        'Cannot cancel root view transition on a comment node. All view transitions will be globally scoped.',
+      );
+    }
+    return;
+  }
+
+  if (
+    documentElement !== null &&
+    // $FlowFixMe[prop-missing]
+    documentElement.style.viewTransitionName === ''
+  ) {
+    // $FlowFixMe[prop-missing]
+    documentElement.style.viewTransitionName = 'none';
+    documentElement.animate(
+      {opacity: [0, 0], pointerEvents: ['none', 'none']},
+      // $FlowFixMe[incompatible-call]
+      {
+        duration: 0,
+        fill: 'forwards',
+        pseudoElement: '::view-transition-group(root)',
+      },
+    );
+    // By default the root ::view-transition selector captures all pointer events,
+    // which means nothing gets interactive. We want to let whatever is not animating
+    // remain interactive during the transition. To do that, we set the size to nothing
+    // so that the transition doesn't capture any clicks. We don't set pointer-events
+    // on this one as that would apply to all running transitions. This lets animations
+    // that are running to block clicks so that they don't end up incorrectly hitting
+    // whatever is below the animation.
+    documentElement.animate(
+      {width: [0, 0], height: [0, 0]},
+      // $FlowFixMe[incompatible-call]
+      {
+        duration: 0,
+        fill: 'forwards',
+        pseudoElement: '::view-transition',
+      },
+    );
+  }
+}
+
+export function restoreRootViewTransitionName(rootContainer: Container): void {
+  let containerInstance: Instance;
+  if (rootContainer.nodeType === DOCUMENT_NODE) {
+    containerInstance = (rootContainer: any).body;
+  } else if (rootContainer.nodeName === 'HTML') {
+    containerInstance = (rootContainer.ownerDocument.body: any);
+  } else {
+    // If the container is not the whole document, then we ideally should probably
+    // clone the whole document outside of the React too.
+    containerInstance = (rootContainer: any);
+  }
+  if (
+    !disableCommentsAsDOMContainers &&
+    containerInstance.nodeType === COMMENT_NODE
+  ) {
+    return;
+  }
+  if (
+    // $FlowFixMe[prop-missing]
+    containerInstance.style.viewTransitionName === 'root'
+  ) {
+    // If we moved the root view transition name to the container in a gesture
+    // we need to restore it now.
+    containerInstance.style.viewTransitionName = '';
+  }
+  const documentElement: null | HTMLElement =
+    containerInstance.ownerDocument.documentElement;
+  if (
+    documentElement !== null &&
+    // $FlowFixMe[prop-missing]
+    documentElement.style.viewTransitionName === 'none'
+  ) {
+    // $FlowFixMe[prop-missing]
+    documentElement.style.viewTransitionName = '';
+  }
+}
+
+function getComputedTransform(style: CSSStyleDeclaration): string {
+  // Gets the merged transform of all the short hands.
+  const computedStyle: any = style;
+  let transform: string = computedStyle.transform;
+  if (transform === 'none') {
+    transform = '';
+  }
+  const scale: string = computedStyle.scale;
+  if (scale !== 'none' && scale !== '') {
+    const parts = scale.split(' ');
+    transform =
+      (parts.length === 3 ? 'scale3d' : 'scale') +
+      '(' +
+      parts.join(', ') +
+      ') ' +
+      transform;
+  }
+  const rotate: string = computedStyle.rotate;
+  if (rotate !== 'none' && rotate !== '') {
+    const parts = rotate.split(' ');
+    if (parts.length === 1) {
+      transform = 'rotate(' + parts[0] + ') ' + transform;
+    } else if (parts.length === 2) {
+      transform =
+        'rotate' + parts[0].toUpperCase() + '(' + parts[1] + ') ' + transform;
+    } else {
+      transform = 'rotate3d(' + parts.join(', ') + ') ' + transform;
+    }
+  }
+  const translate: string = computedStyle.translate;
+  if (translate !== 'none' && translate !== '') {
+    const parts = translate.split(' ');
+    transform =
+      (parts.length === 3 ? 'translate3d' : 'translate') +
+      '(' +
+      parts.join(', ') +
+      ') ' +
+      transform;
+  }
+  return transform;
+}
+
+function moveOutOfViewport(
+  originalStyle: CSSStyleDeclaration,
+  element: HTMLElement,
+): void {
+  // Apply a transform that safely puts the whole element outside the viewport
+  // while still letting it paint its "old" state to a snapshot.
+  const transform = getComputedTransform(originalStyle);
+  // Clear the long form properties.
+  // $FlowFixMe
+  element.style.translate = 'none';
+  // $FlowFixMe
+  element.style.scale = 'none';
+  // $FlowFixMe
+  element.style.rotate = 'none';
+  // Apply a translate to move it way out of the viewport. This is applied first
+  // so that it is in the coordinate space of the parent and not after applying
+  // other transforms. That's why we need to merge the long form properties.
+  // TODO: Ideally we'd adjust for the parent's rotate/scale. Otherwise when
+  // we move back the ::view-transition-group we might overshoot or undershoot.
+  element.style.transform = 'translate(-20000px, -20000px) ' + transform;
+}
+
+function moveOldFrameIntoViewport(keyframe: any): void {
+  // In the resulting View Transition Animation, the first frame will be offset.
+  const computedTransform: ?string = keyframe.transform;
+  if (computedTransform != null) {
+    let transform = computedTransform === 'none' ? '' : computedTransform;
+    transform = 'translate(20000px, 20000px) ' + transform;
+    keyframe.transform = transform;
+  }
+}
+
+export function cloneRootViewTransitionContainer(
+  rootContainer: Container,
+): Instance {
+  // This implies that we're not going to animate the root document but instead
+  // the clone so we first clear the name of the root container.
+  const documentElement: null | HTMLElement =
+    rootContainer.nodeType === DOCUMENT_NODE
+      ? (rootContainer: any).documentElement
+      : rootContainer.ownerDocument.documentElement;
+  if (
+    documentElement !== null &&
+    // $FlowFixMe[prop-missing]
+    documentElement.style.viewTransitionName === ''
+  ) {
+    // $FlowFixMe[prop-missing]
+    documentElement.style.viewTransitionName = 'none';
+  }
+
+  let containerInstance: HTMLElement;
+  if (rootContainer.nodeType === DOCUMENT_NODE) {
+    containerInstance = (rootContainer: any).body;
+  } else if (rootContainer.nodeName === 'HTML') {
+    containerInstance = (rootContainer.ownerDocument.body: any);
+  } else if (
+    !disableCommentsAsDOMContainers &&
+    rootContainer.nodeType === COMMENT_NODE
+  ) {
+    throw new Error(
+      'Cannot use a startGestureTransition() with a comment node root.',
+    );
+  } else {
+    // If the container is not the whole document, then we ideally should probably
+    // clone the whole document outside of the React too.
+    containerInstance = (rootContainer: any);
+  }
+
+  const containerParent = containerInstance.parentNode;
+  if (containerParent === null) {
+    throw new Error(
+      'Cannot use a startGestureTransition() on a detached root.',
+    );
+  }
+
+  const clone: HTMLElement = containerInstance.cloneNode(false);
+
+  const computedStyle = getComputedStyle(containerInstance);
+
+  if (
+    computedStyle.position === 'absolute' ||
+    computedStyle.position === 'fixed'
+  ) {
+    // If the style is already absolute, we don't have to do anything because it'll appear
+    // in the same place.
+  } else {
+    // Otherwise we need to absolutely position the clone in the same location as the original.
+    let positionedAncestor: HTMLElement = containerParent;
+    while (
+      positionedAncestor.parentNode != null &&
+      positionedAncestor.parentNode.nodeType !== DOCUMENT_NODE
+    ) {
+      if (getComputedStyle(positionedAncestor).position !== 'static') {
+        break;
+      }
+      // $FlowFixMe: This is refined.
+      positionedAncestor = positionedAncestor.parentNode;
+    }
+
+    const positionedAncestorStyle: any = positionedAncestor.style;
+    const containerInstanceStyle: any = containerInstance.style;
+    // Clear the transform while we're measuring since it affects the bounding client rect.
+    const prevAncestorTranslate = positionedAncestorStyle.translate;
+    const prevAncestorScale = positionedAncestorStyle.scale;
+    const prevAncestorRotate = positionedAncestorStyle.rotate;
+    const prevAncestorTransform = positionedAncestorStyle.transform;
+    const prevTranslate = containerInstanceStyle.translate;
+    const prevScale = containerInstanceStyle.scale;
+    const prevRotate = containerInstanceStyle.rotate;
+    const prevTransform = containerInstanceStyle.transform;
+    positionedAncestorStyle.translate = 'none';
+    positionedAncestorStyle.scale = 'none';
+    positionedAncestorStyle.rotate = 'none';
+    positionedAncestorStyle.transform = 'none';
+    containerInstanceStyle.translate = 'none';
+    containerInstanceStyle.scale = 'none';
+    containerInstanceStyle.rotate = 'none';
+    containerInstanceStyle.transform = 'none';
+
+    const ancestorRect = positionedAncestor.getBoundingClientRect();
+    const rect = containerInstance.getBoundingClientRect();
+
+    const cloneStyle = clone.style;
+    cloneStyle.position = 'absolute';
+    cloneStyle.top = rect.top - ancestorRect.top + 'px';
+    cloneStyle.left = rect.left - ancestorRect.left + 'px';
+    cloneStyle.width = rect.width + 'px';
+    cloneStyle.height = rect.height + 'px';
+    cloneStyle.margin = '0px';
+    cloneStyle.boxSizing = 'border-box';
+
+    positionedAncestorStyle.translate = prevAncestorTranslate;
+    positionedAncestorStyle.scale = prevAncestorScale;
+    positionedAncestorStyle.rotate = prevAncestorRotate;
+    positionedAncestorStyle.transform = prevAncestorTransform;
+    containerInstanceStyle.translate = prevTranslate;
+    containerInstanceStyle.scale = prevScale;
+    containerInstanceStyle.rotate = prevRotate;
+    containerInstanceStyle.transform = prevTransform;
+  }
+
+  // For this transition the container will act as the root. Nothing outside of it should
+  // be affected anyway. This lets us transition from the cloned container to the original.
+  // $FlowFixMe[prop-missing]
+  clone.style.viewTransitionName = 'root';
+
+  // Move out of the viewport so that it's still painted for the snapshot but is not visible
+  // for the frame where the snapshot happens.
+  moveOutOfViewport(computedStyle, clone);
+
+  // Insert the clone after the root container as a sibling. This may inject a body
+  // as the next sibling of an existing body. document.body will still point to the
+  // first one and any id selectors will still find the first one. That's why it's
+  // important that it's after the existing node.
+  containerInstance.parentNode.insertBefore(
+    clone,
+    containerInstance.nextSibling,
+  );
+
+  return clone;
+}
+
+export function removeRootViewTransitionClone(
+  rootContainer: Container,
+  clone: Instance,
+): void {
+  let containerInstance: Instance;
+  if (rootContainer.nodeType === DOCUMENT_NODE) {
+    containerInstance = (rootContainer: any).body;
+  } else if (rootContainer.nodeName === 'HTML') {
+    containerInstance = (rootContainer.ownerDocument.body: any);
+  } else {
+    // If the container is not the whole document, then we ideally should probably
+    // clone the whole document outside of the React too.
+    containerInstance = (rootContainer: any);
+  }
+  const containerParent = containerInstance.parentNode;
+  if (containerParent === null) {
+    throw new Error(
+      'Cannot use a startGestureTransition() on a detached root.',
+    );
+  }
+  // We assume that the clone is still within the same parent.
+  containerParent.removeChild(clone);
+
+  // Now the root is on the containerInstance itself until we call restoreRootViewTransitionName.
+  containerInstance.style.viewTransitionName = 'root';
+}
+
+export type InstanceMeasurement = {
+  rect: ClientRect | DOMRect,
+  abs: boolean, // is absolutely positioned
+  clip: boolean, // is a clipping parent
+  view: boolean, // is in viewport bounds
+};
+
+function createMeasurement(
+  rect: ClientRect | DOMRect,
+  computedStyle: CSSStyleDeclaration,
+  element: Element,
+): InstanceMeasurement {
+  const ownerWindow = element.ownerDocument.defaultView;
+  return {
+    rect: rect,
+    abs:
+      // Absolutely positioned instances don't contribute their size to the parent.
+      computedStyle.position === 'absolute' ||
+      computedStyle.position === 'fixed',
+    clip:
+      // If a ViewTransition boundary acts as a clipping parent group we should
+      // always mark it to animate if its children do so that we can clip them.
+      // This doesn't actually have any effect yet until browsers implement
+      // layered capture and nested view transitions.
+      computedStyle.clipPath !== 'none' ||
+      computedStyle.overflow !== 'visible' ||
+      computedStyle.filter !== 'none' ||
+      computedStyle.mask !== 'none' ||
+      computedStyle.mask !== 'none' ||
+      computedStyle.borderRadius !== '0px',
+    view:
+      // If the instance was within the bounds of the viewport. We don't care as
+      // much about if it was fully occluded because then it can still pop out.
+      rect.bottom >= 0 &&
+      rect.right >= 0 &&
+      rect.top <= ownerWindow.innerHeight &&
+      rect.left <= ownerWindow.innerWidth,
+  };
+}
+
+export function measureInstance(instance: Instance): InstanceMeasurement {
+  const rect = instance.getBoundingClientRect();
+  const computedStyle = getComputedStyle(instance);
+  return createMeasurement(rect, computedStyle, instance);
+}
+
+export function measureClonedInstance(instance: Instance): InstanceMeasurement {
+  const measuredRect = instance.getBoundingClientRect();
+  // Adjust the DOMRect based on the translate that put it outside the viewport.
+  // TODO: This might not be completely correct if the parent also has a transform.
+  const rect = new DOMRect(
+    measuredRect.x + 20000,
+    measuredRect.y + 20000,
+    measuredRect.width,
+    measuredRect.height,
+  );
+  const computedStyle = getComputedStyle(instance);
+  return createMeasurement(rect, computedStyle, instance);
+}
+
+export function wasInstanceInViewport(
+  measurement: InstanceMeasurement,
+): boolean {
+  return measurement.view;
+}
+
+export function hasInstanceChanged(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  // Note: This is not guaranteed from the same instance in the case that the Instance of the
+  // ViewTransition swaps out but it's still the same ViewTransition instance.
+  if (newMeasurement.clip) {
+    // If we're a clipping parent, we always animate if any of our children do so that we can clip
+    // them. This doesn't yet until browsers implement layered capture and nested view transitions.
+    return true;
+  }
+  const oldRect = oldMeasurement.rect;
+  const newRect = newMeasurement.rect;
+  return (
+    oldRect.y !== newRect.y ||
+    oldRect.x !== newRect.x ||
+    oldRect.height !== newRect.height ||
+    oldRect.width !== newRect.width
+  );
+}
+
+export function hasInstanceAffectedParent(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  // Note: This is not guaranteed from the same instance in the case that the Instance of the
+  // ViewTransition swaps out but it's still the same ViewTransition instance.
+  // If the instance has resized, it might have affected the parent layout.
+  if (newMeasurement.abs) {
+    // Absolutely positioned elements don't affect the parent layout, unless they
+    // previously were not absolutely positioned.
+    return !oldMeasurement.abs;
+  }
+  const oldRect = oldMeasurement.rect;
+  const newRect = newMeasurement.rect;
+  return oldRect.height !== newRect.height || oldRect.width !== newRect.width;
+}
+
+// How long to wait for new fonts to load before just committing anyway.
+// This freezes the screen. It needs to be short enough that it doesn't cause too much of
+// an issue when it's a new load and slow, yet long enough that you have a chance to load
+// it. Otherwise we wait for no reason. The assumption here is that you likely have
+// either cached the font or preloaded it earlier.
+// This timeout is also used for Suspensey Images when they're blocking a View Transition.
+const SUSPENSEY_FONT_AND_IMAGE_TIMEOUT = 500;
+
+function customizeViewTransitionError(
+  error: Object,
+  ignoreAbort: boolean,
+): mixed {
+  if (typeof error === 'object' && error !== null) {
+    switch (error.name) {
+      case 'TimeoutError': {
+        // We assume that the only reason a Timeout can happen is because the Navigation
+        // promise. We expect any other work to either be fast or have a timeout (fonts).
+        if (__DEV__) {
+          // eslint-disable-next-line react-internal/prod-error-codes
+          return new Error(
+            'A ViewTransition timed out because a Navigation stalled. ' +
+              'This can happen if a Navigation is blocked on React itself. ' +
+              "Such as if it's resolved inside useEffect. " +
+              'This can be solved by moving the resolution to useLayoutEffect.',
+            {cause: error},
+          );
+        }
+        break;
+      }
+      case 'AbortError': {
+        if (ignoreAbort) {
+          return null;
+        }
+        if (__DEV__) {
+          // eslint-disable-next-line react-internal/prod-error-codes
+          return new Error(
+            'A ViewTransition was aborted early. This might be because you have ' +
+              'other View Transition libraries on the page and only one can run at ' +
+              "a time. To avoid this, use only React's built-in <ViewTransition> " +
+              'to coordinate.',
+            {cause: error},
+          );
+        }
+        break;
+      }
+      case 'InvalidStateError': {
+        if (
+          error.message ===
+            'View transition was skipped because document visibility state is hidden.' ||
+          error.message ===
+            'Skipping view transition because document visibility state has become hidden.' ||
+          error.message ===
+            'Skipping view transition because viewport size changed.' ||
+          // Chrome uses a generic error message instead of specific reasons. It will log a
+          // more specific reason in the console but the user might not look there.
+          // Some of these errors are important to surface like duplicate name errors but
+          // it's too noisy for unactionable cases like the document was hidden. Therefore,
+          // we hide all of them and hopefully it surfaces in another browser.
+          error.message === 'Transition was aborted because of invalid state'
+        ) {
+          // Skip logging this. This is not considered an error.
+          return null;
+        }
+        break;
+      }
+    }
+  }
+  return error;
+}
+
+/** @noinline */
+function forceLayout(ownerDocument: Document) {
+  // This function exists to trick minifiers to not remove this unused member expression.
+  return (ownerDocument.documentElement: any).clientHeight;
+}
+
+function waitForImageToLoad(this: HTMLImageElement, resolve: () => void) {
+  // TODO: Use decode() instead of the load event here once the fix in
+  // https://issues.chromium.org/issues/420748301 has propagated fully.
+  this.addEventListener('load', resolve);
+  this.addEventListener('error', resolve);
+}
+
+export function startViewTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  layoutCallback: () => void,
+  afterMutationCallback: () => void,
+  spawnedWorkCallback: () => void,
+  passiveCallback: () => mixed,
+  errorCallback: mixed => void,
+  blockedCallback: string => void, // Profiling-only
+  finishedAnimation: () => void, // Profiling-only
+): null | RunningViewTransition {
+  const ownerDocument: Document =
+    rootContainer.nodeType === DOCUMENT_NODE
+      ? (rootContainer: any)
+      : rootContainer.ownerDocument;
+  try {
+    // $FlowFixMe[prop-missing]
+    const transition = ownerDocument.startViewTransition({
+      update() {
+        // Note: We read the existence of a pending navigation before we apply the
+        // mutations. That way we're not waiting on a navigation that we spawned
+        // from this update. Only navigations that started before this commit.
+        const ownerWindow = ownerDocument.defaultView;
+        const pendingNavigation =
+          ownerWindow.navigation && ownerWindow.navigation.transition;
+        // $FlowFixMe[prop-missing]
+        const previousFontLoadingStatus = ownerDocument.fonts.status;
+        mutationCallback();
+        const blockingPromises: Array<Promise<any>> = [];
+        if (previousFontLoadingStatus === 'loaded') {
+          // Force layout calculation to trigger font loading.
+          forceLayout(ownerDocument);
+          if (
+            // $FlowFixMe[prop-missing]
+            ownerDocument.fonts.status === 'loading'
+          ) {
+            // The mutation lead to new fonts being loaded. We should wait on them before continuing.
+            // This avoids waiting for potentially unrelated fonts that were already loading before.
+            // Either in an earlier transition or as part of a sync optimistic state. This doesn't
+            // include preloads that happened earlier.
+            blockingPromises.push(ownerDocument.fonts.ready);
+          }
+        }
+        const blockingIndexSnapshot = blockingPromises.length;
+        if (suspendedState !== null) {
+          // Suspend on any images that still haven't loaded and are in the viewport.
+          const suspenseyImages = suspendedState.suspenseyImages;
+          let imgBytes = 0;
+          for (let i = 0; i < suspenseyImages.length; i++) {
+            const suspenseyImage = suspenseyImages[i];
+            if (!suspenseyImage.complete) {
+              const rect = suspenseyImage.getBoundingClientRect();
+              const inViewport =
+                rect.bottom > 0 &&
+                rect.right > 0 &&
+                rect.top < ownerWindow.innerHeight &&
+                rect.left < ownerWindow.innerWidth;
+              if (inViewport) {
+                imgBytes += estimateImageBytes(suspenseyImage);
+                if (imgBytes > estimatedBytesWithinLimit) {
+                  // We don't think we'll be able to download all the images within
+                  // the timeout. Give up. Rewind to only block on fonts, if any.
+                  blockingPromises.length = blockingIndexSnapshot;
+                  break;
+                }
+                const loadingImage = new Promise(
+                  waitForImageToLoad.bind(suspenseyImage),
+                );
+                blockingPromises.push(loadingImage);
+              }
+            }
+          }
+        }
+        if (blockingPromises.length > 0) {
+          if (enableProfilerTimer) {
+            const blockedReason =
+              blockingIndexSnapshot > 0
+                ? blockingPromises.length > blockingIndexSnapshot
+                  ? 'Waiting on Fonts and Images'
+                  : 'Waiting on Fonts'
+                : 'Waiting on Images';
+            blockedCallback(blockedReason);
+          }
+          const blockingReady = Promise.race([
+            Promise.all(blockingPromises),
+            new Promise(resolve =>
+              setTimeout(resolve, SUSPENSEY_FONT_AND_IMAGE_TIMEOUT),
+            ),
+          ]).then(layoutCallback, layoutCallback);
+          const allReady = pendingNavigation
+            ? Promise.allSettled([pendingNavigation.finished, blockingReady])
+            : blockingReady;
+          return allReady.then(afterMutationCallback, afterMutationCallback);
+        }
+        layoutCallback();
+        if (pendingNavigation) {
+          return pendingNavigation.finished.then(
+            afterMutationCallback,
+            afterMutationCallback,
+          );
+        } else {
+          afterMutationCallback();
+        }
+      },
+      types: transitionTypes,
+    });
+    // $FlowFixMe[prop-missing]
+    ownerDocument.__reactViewTransition = transition;
+
+    const viewTransitionAnimations: Array<Animation> = [];
+
+    const readyCallback = () => {
+      const documentElement: Element = (ownerDocument.documentElement: any);
+      // Loop through all View Transition Animations.
+      // $FlowFixMe[prop-missing]
+      const animations = documentElement.getAnimations({subtree: true});
+      for (let i = 0; i < animations.length; i++) {
+        const animation = animations[i];
+        const effect: KeyframeEffect = (animation.effect: any);
+        // $FlowFixMe
+        const pseudoElement: ?string = effect.pseudoElement;
+        if (
+          pseudoElement != null &&
+          pseudoElement.startsWith('::view-transition')
+        ) {
+          viewTransitionAnimations.push(animation);
+          const keyframes = effect.getKeyframes();
+          // Next, we're going to try to optimize this animation in case the auto-generated
+          // width/height keyframes are unnecessary.
+          let width;
+          let height;
+          let unchangedDimensions = true;
+          for (let j = 0; j < keyframes.length; j++) {
+            const keyframe = keyframes[j];
+            const w = keyframe.width;
+            if (width === undefined) {
+              width = w;
+            } else if (width !== w) {
+              unchangedDimensions = false;
+              break;
+            }
+            const h = keyframe.height;
+            if (height === undefined) {
+              height = h;
+            } else if (height !== h) {
+              unchangedDimensions = false;
+              break;
+            }
+            // We're clearing the keyframes in case we are going to apply the optimization.
+            delete keyframe.width;
+            delete keyframe.height;
+            if (keyframe.transform === 'none') {
+              delete keyframe.transform;
+            }
+          }
+          if (
+            unchangedDimensions &&
+            width !== undefined &&
+            height !== undefined
+          ) {
+            // Replace the keyframes with ones that don't animate the width/height.
+            // $FlowFixMe
+            effect.setKeyframes(keyframes);
+            // Read back the new animation to see what the underlying width/height of the pseudo-element was.
+            const computedStyle = getComputedStyle(
+              // $FlowFixMe
+              effect.target,
+              // $FlowFixMe
+              effect.pseudoElement,
+            );
+            if (
+              computedStyle.width !== width ||
+              computedStyle.height !== height
+            ) {
+              // Oops. Turns out that the pseudo-element had a different width/height so we need to let it
+              // be overridden. Add it back.
+              const first = keyframes[0];
+              first.width = width;
+              first.height = height;
+              const last = keyframes[keyframes.length - 1];
+              last.width = width;
+              last.height = height;
+              // $FlowFixMe
+              effect.setKeyframes(keyframes);
+            }
+          }
+        }
+      }
+      spawnedWorkCallback();
+    };
+    const handleError = (error: mixed) => {
+      // $FlowFixMe[prop-missing]
+      if (ownerDocument.__reactViewTransition === transition) {
+        // $FlowFixMe[prop-missing]
+        ownerDocument.__reactViewTransition = null;
+      }
+      try {
+        error = customizeViewTransitionError(error, false);
+        if (error !== null) {
+          errorCallback(error);
+        }
+      } finally {
+        // Continue the reset of the work.
+        // If the error happened in the snapshot phase before the update callback
+        // was invoked, then we need to first finish the mutation and layout phases.
+        // If they're already invoked it's still safe to call them due the status check.
+        mutationCallback();
+        layoutCallback();
+        // Skip afterMutationCallback() since we're not animating.
+        spawnedWorkCallback();
+        if (enableProfilerTimer) {
+          finishedAnimation();
+        }
+      }
+    };
+    transition.ready.then(readyCallback, handleError);
+    transition.finished.finally(() => {
+      for (let i = 0; i < viewTransitionAnimations.length; i++) {
+        // In Safari, we need to manually cancel all manually started animations
+        // or it'll block or interfer with future transitions.
+        // We can't use getAnimations() due to #35336 so we collect them in an array.
+        viewTransitionAnimations[i].cancel();
+      }
+      // $FlowFixMe[prop-missing]
+      if (ownerDocument.__reactViewTransition === transition) {
+        // $FlowFixMe[prop-missing]
+        ownerDocument.__reactViewTransition = null;
+      }
+      if (enableProfilerTimer) {
+        finishedAnimation();
+      }
+      passiveCallback();
+    });
+    return transition;
+  } catch (x) {
+    // We use the error as feature detection.
+    // The only thing that should throw is if startViewTransition is missing
+    // or if it doesn't accept the object form. Other errors are async.
+    // I.e. it's before the View Transitions v2 spec. We only support View
+    // Transitions v2 otherwise we fallback to not animating to ensure that
+    // we're not animating with the wrong animation mapped.
+    // Flush remaining work synchronously.
+    mutationCallback();
+    layoutCallback();
+    // Skip afterMutationCallback(). We don't need it since we're not animating.
+    if (enableProfilerTimer) {
+      finishedAnimation();
+    }
+    spawnedWorkCallback();
+    // Skip passiveCallback(). Spawned work will schedule a task.
+    return null;
+  }
+}
+
+export type RunningViewTransition = {
+  skipTransition(): void,
+  finished: Promise<void>,
+  ...
+};
+
+function mergeTranslate(translateA: ?string, translateB: ?string): string {
+  if (!translateA || translateA === 'none') {
+    return translateB || '';
+  }
+  if (!translateB || translateB === 'none') {
+    // $FlowFixMe[constant-condition]
+    return translateA || '';
+  }
+  const partsA = translateA.split(' ');
+  const partsB = translateB.split(' ');
+  let i;
+  let result = '';
+  for (i = 0; i < partsA.length && i < partsB.length; i++) {
+    if (i > 0) {
+      result += ' ';
+    }
+    result += 'calc(' + partsA[i] + ' + ' + partsB[i] + ')';
+  }
+  for (; i < partsA.length; i++) {
+    result += ' ' + partsA[i];
+  }
+  for (; i < partsB.length; i++) {
+    result += ' ' + partsB[i];
+  }
+  return result;
+}
+
+function animateGesture(
+  keyframes: any,
+  targetElement: Element,
+  pseudoElement: string,
+  timeline: GestureTimeline,
+  viewTransitionAnimations: Array<Animation>,
+  customTimelineCleanup: Array<() => void>,
+  rangeStart: number,
+  rangeEnd: number,
+  moveFirstFrameIntoViewport: boolean,
+  moveAllFramesIntoViewport: boolean,
+) {
+  let width;
+  let height;
+  let unchangedDimensions = true;
+  for (let i = 0; i < keyframes.length; i++) {
+    const keyframe = keyframes[i];
+    // Delete any easing since we always apply linear easing to gestures.
+    delete keyframe.easing;
+    delete keyframe.computedOffset;
+    const w = keyframe.width;
+    if (width === undefined) {
+      width = w;
+    } else if (width !== w) {
+      unchangedDimensions = false;
+    }
+    const h = keyframe.height;
+    if (height === undefined) {
+      height = h;
+    } else if (height !== h) {
+      unchangedDimensions = false;
+    }
+    // Chrome returns "auto" for width/height which is not a valid value to
+    // animate to. Similarly, transform: "none" is actually lack of transform.
+    if (keyframe.width === 'auto') {
+      delete keyframe.width;
+    }
+    if (keyframe.height === 'auto') {
+      delete keyframe.height;
+    }
+    if (keyframe.transform === 'none') {
+      delete keyframe.transform;
+    }
+    if (moveAllFramesIntoViewport) {
+      if (keyframe.transform == null) {
+        // If a transform is not explicitly specified to override the auto
+        // generated one on the pseudo element, then we need to adjust it to
+        // put it back into the viewport. We don't know the offset relative to
+        // the screen so instead we use the translate prop to do a relative
+        // adjustment.
+        // TODO: If the "transform" was manually overridden on the pseudo
+        // element itself and no longer the auto generated one, then we shouldn't
+        // adjust it. I'm not sure how to detect this.
+        if (keyframe.translate == null || keyframe.translate === '') {
+          // TODO: If there's a CSS rule targeting translate on the pseudo element
+          // already we need to merge it.
+          const elementTranslate: ?string = (getComputedStyle(
+            targetElement,
+            pseudoElement,
+          ): any).translate;
+          keyframe.translate = mergeTranslate(
+            elementTranslate,
+            '20000px 20000px',
+          );
+        } else {
+          keyframe.translate = mergeTranslate(
+            keyframe.translate,
+            '20000px 20000px',
+          );
+        }
+      }
+    }
+  }
+  if (moveFirstFrameIntoViewport) {
+    // If this is the generated animation that does a FLIP matrix translation
+    // from the old position, we need to adjust it from the out of viewport
+    // position. If this is going from old to new it only applies to first
+    // keyframe. Otherwise it applies to every keyframe.
+    moveOldFrameIntoViewport(keyframes[0]);
+  }
+  if (unchangedDimensions && width !== undefined && height !== undefined) {
+    // Read the underlying width/height of the pseudo-element. The previous animation
+    // should have already been cancelled so we should observe the underlying element.
+    const computedStyle = getComputedStyle(targetElement, pseudoElement);
+    if (computedStyle.width === width && computedStyle.height === height) {
+      for (let i = 0; i < keyframes.length; i++) {
+        const keyframe = keyframes[i];
+        delete keyframe.width;
+        delete keyframe.height;
+      }
+    }
+  }
+
+  // TODO: Reverse the reverse if the original direction is reverse.
+  const reverse = rangeStart > rangeEnd;
+  if (timeline instanceof AnimationTimeline) {
+    // Native Timeline
+    // $FlowFixMe[incompatible-call]
+    const animation = targetElement.animate(keyframes, {
+      pseudoElement: pseudoElement,
+      // Set the timeline to the current gesture timeline to drive the updates.
+      timeline: timeline,
+      // We reset all easing functions to linear so that it feels like you
+      // have direct impact on the transition and to avoid double bouncing
+      // from scroll bouncing.
+      easing: 'linear',
+      // We fill in both direction for overscroll.
+      fill: 'both', // TODO: Should we preserve the fill instead?
+      // We play all gestures in reverse, except if we're in reverse direction
+      // in which case we need to play it in reverse of the reverse.
+      direction: reverse ? 'normal' : 'reverse',
+      // Range start needs to be higher than range end. If it goes in reverse
+      // we reverse the whole animation below.
+      rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
+      rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
+    });
+    viewTransitionAnimations.push(animation);
+  } else {
+    // Custom Timeline
+    // $FlowFixMe[incompatible-call]
+    const animation = targetElement.animate(keyframes, {
+      pseudoElement: pseudoElement,
+      // We reset all easing functions to linear so that it feels like you
+      // have direct impact on the transition and to avoid double bouncing
+      // from scroll bouncing.
+      easing: 'linear',
+      // We fill in both direction for overscroll.
+      fill: 'both', // TODO: Should we preserve the fill instead?
+      // We play all gestures in reverse, except if we're in reverse direction
+      // in which case we need to play it in reverse of the reverse.
+      direction: reverse ? 'normal' : 'reverse',
+      // We set the delay and duration to represent the span of the range.
+      delay: reverse ? rangeEnd : rangeStart,
+      duration: reverse ? rangeStart - rangeEnd : rangeEnd - rangeStart,
+    });
+    viewTransitionAnimations.push(animation);
+    // Let the custom timeline take control of driving the animation.
+    const cleanup = timeline.animate(animation);
+    if (cleanup) {
+      customTimelineCleanup.push(cleanup);
+    }
+  }
+}
+
+export function startGestureTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  timeline: GestureTimeline,
+  rangeStart: number,
+  rangeEnd: number,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  animateCallback: () => void,
+  errorCallback: mixed => void,
+  finishedAnimation: () => void, // Profiling-only
+): null | RunningViewTransition {
+  const ownerDocument: Document =
+    rootContainer.nodeType === DOCUMENT_NODE
+      ? (rootContainer: any)
+      : rootContainer.ownerDocument;
+  try {
+    // Force layout before we start the Transition. This works around a bug in Safari
+    // if one of the clones end up being a stylesheet that isn't loaded or uncached.
+    // https://bugs.webkit.org/show_bug.cgi?id=290146
+    forceLayout(ownerDocument);
+    // $FlowFixMe[prop-missing]
+    const transition = ownerDocument.startViewTransition({
+      update: mutationCallback,
+      types: transitionTypes,
+    });
+    // $FlowFixMe[prop-missing]
+    ownerDocument.__reactViewTransition = transition;
+    const customTimelineCleanup: Array<() => void> = []; // Cleanup Animations started in a CustomTimeline
+    const viewTransitionAnimations: Array<Animation> = [];
+    const readyCallback = () => {
+      const documentElement: Element = (ownerDocument.documentElement: any);
+      // Loop through all View Transition Animations.
+      // $FlowFixMe[prop-missing]
+      const animations = documentElement.getAnimations({subtree: true});
+      // First do a pass to collect all known group and new items so we can look
+      // up if they exist later.
+      const foundGroups: Set<string> = new Set();
+      const foundNews: Set<string> = new Set();
+      // Collect the longest duration of any view-transition animation including delay.
+      let longestDuration = 0;
+      for (let i = 0; i < animations.length; i++) {
+        const effect: KeyframeEffect = (animations[i].effect: any);
+        // $FlowFixMe
+        const pseudoElement: ?string = effect.pseudoElement;
+        if (pseudoElement == null) {
+        } else if (
+          pseudoElement.startsWith('::view-transition') &&
+          effect.target === documentElement
+        ) {
+          const timing = effect.getTiming();
+          const duration =
+            // $FlowFixMe[prop-missing]
+            typeof timing.duration === 'number' ? timing.duration : 0;
+          // TODO: Consider interation count higher than 1.
+          // $FlowFixMe[prop-missing]
+          // $FlowFixMe[unsafe-addition]
+          const durationWithDelay = timing.delay + duration;
+          if (durationWithDelay > longestDuration) {
+            longestDuration = durationWithDelay;
+          }
+          if (pseudoElement.startsWith('::view-transition-group')) {
+            foundGroups.add(pseudoElement.slice(23));
+          } else if (pseudoElement.startsWith('::view-transition-new')) {
+            // TODO: This is not really a sufficient detection because if the new
+            // pseudo element might exist but have animations disabled on it.
+            foundNews.add(pseudoElement.slice(21));
+          }
+        }
+      }
+      const durationToRangeMultipler =
+        (rangeEnd - rangeStart) / longestDuration;
+      for (let i = 0; i < animations.length; i++) {
+        const anim = animations[i];
+        if (anim.playState !== 'running') {
+          continue;
+        }
+        const effect: KeyframeEffect = (anim.effect: any);
+        // $FlowFixMe
+        const pseudoElement: ?string = effect.pseudoElement;
+        if (
+          pseudoElement != null &&
+          pseudoElement.startsWith('::view-transition') &&
+          effect.target === documentElement
+        ) {
+          // Ideally we could mutate the existing animation but unfortunately
+          // the mutable APIs seem less tested and therefore are lacking or buggy.
+          // Therefore we create a new animation instead.
+          anim.cancel();
+          let isGeneratedGroupAnim = false;
+          let isExitGroupAnim = false;
+          if (pseudoElement.startsWith('::view-transition-group')) {
+            const groupName = pseudoElement.slice(23);
+            if (foundNews.has(groupName)) {
+              // If this has both "new" and "old" state we expect this to be an auto-generated
+              // animation that started outside the viewport. We need to adjust this first frame
+              // to be inside the viewport.
+              // $FlowFixMe[prop-missing]
+              const animationName: ?string = anim.animationName;
+              isGeneratedGroupAnim =
+                animationName != null &&
+                // $FlowFixMe[prop-missing]
+                animationName.startsWith('-ua-view-transition-group-anim-');
+            } else {
+              // If this has only an "old" state then the pseudo element will be outside
+              // the viewport. If any keyframes don't override "transform" we need to
+              // adjust them.
+              isExitGroupAnim = true;
+            }
+            // TODO: If this has only an old state and no new state,
+          }
+          // Adjust the range based on how long the animation would've ran as time based.
+          // Since we're running animations in reverse from how they normally would run,
+          // therefore the timing is from the rangeEnd to the start.
+          const timing = effect.getTiming();
+          const duration =
+            // $FlowFixMe[prop-missing]
+            typeof timing.duration === 'number' ? timing.duration : 0;
+          let adjustedRangeStart =
+            // $FlowFixMe[unsafe-addition]
+            // $FlowFixMe[prop-missing]
+            rangeEnd - (duration + timing.delay) * durationToRangeMultipler;
+          let adjustedRangeEnd =
+            rangeEnd -
+            // $FlowFixMe[prop-missing]
+            // $FlowFixMe[unsafe-arithmetic]
+            timing.delay * durationToRangeMultipler;
+          if (
+            timing.direction === 'reverse' ||
+            timing.direction === 'alternate-reverse'
+          ) {
+            // This animation was originally in reverse so we have to play it in flipped range.
+            const temp = adjustedRangeStart;
+            adjustedRangeStart = adjustedRangeEnd;
+            adjustedRangeEnd = temp;
+          }
+          animateGesture(
+            effect.getKeyframes(),
+            // $FlowFixMe: Always documentElement atm.
+            effect.target,
+            pseudoElement,
+            timeline,
+            viewTransitionAnimations,
+            customTimelineCleanup,
+            adjustedRangeStart,
+            adjustedRangeEnd,
+            isGeneratedGroupAnim,
+            isExitGroupAnim,
+          );
+          if (pseudoElement.startsWith('::view-transition-old')) {
+            const groupName = pseudoElement.slice(21);
+            if (!foundGroups.has(groupName) && !foundNews.has(groupName)) {
+              foundGroups.add(groupName);
+              // We haven't seen any group animation with this name. Since the old
+              // state was outside the viewport we need to put it back. Since we
+              // can't programmatically target the element itself, we use an
+              // animation to adjust it.
+              // This usually happens for exit animations where the element has
+              // the old position.
+              // If we also have a "new" state then we skip this because it means
+              // someone manually disabled the auto-generated animation. We need to
+              // treat the old state as having the position of the "new" state which
+              // will happen by default.
+              const pseudoElementName = '::view-transition-group' + groupName;
+              animateGesture(
+                [{}, {}],
+                // $FlowFixMe: Always documentElement atm.
+                effect.target,
+                pseudoElementName,
+                timeline,
+                viewTransitionAnimations,
+                customTimelineCleanup,
+                rangeStart,
+                rangeEnd,
+                false,
+                true, // We let the helper apply the translate
+              );
+            }
+          }
+        }
+      }
+      // View Transitions with ScrollTimeline has a quirk where they end if the
+      // ScrollTimeline ever reaches 100% but that doesn't mean we're done because
+      // you can swipe back again. We can prevent this by adding a paused Animation
+      // that never stops. This seems to keep all running Animations alive until
+      // we explicitly abort (or something forces the View Transition to cancel).
+      // $FlowFixMe[incompatible-call]
+      const blockingAnim = documentElement.animate([{}, {}], {
+        pseudoElement: '::view-transition',
+        duration: 1,
+      });
+      blockingAnim.pause();
+      viewTransitionAnimations.push(blockingAnim);
+      animateCallback();
+    };
+    // In Chrome, "new" animations are not ready in the ready callback. We have to wait
+    // until requestAnimationFrame before we can observe them through getAnimations().
+    // However, in Safari, that would cause a flicker because we're applying them late.
+    // TODO: Think of a feature detection for this instead.
+    const readyForAnimations =
+      navigator.userAgent.indexOf('Chrome') !== -1
+        ? () => requestAnimationFrame(readyCallback)
+        : readyCallback;
+    const handleError = (error: mixed) => {
+      // $FlowFixMe[prop-missing]
+      if (ownerDocument.__reactViewTransition === transition) {
+        // $FlowFixMe[prop-missing]
+        ownerDocument.__reactViewTransition = null;
+      }
+      try {
+        error = customizeViewTransitionError(error, true);
+        if (error !== null) {
+          errorCallback(error);
+        }
+      } finally {
+        // Continue the reset of the work.
+        // If the error happened in the snapshot phase before the update callback
+        // was invoked, then we need to first finish the mutation and layout phases.
+        // If they're already invoked it's still safe to call them due the status check.
+        mutationCallback();
+        // Skip readyCallback() and go straight to animateCallbck() since we're not animating.
+        // animateCallback() is still required to restore states.
+        animateCallback();
+        if (enableProfilerTimer) {
+          finishedAnimation();
+        }
+      }
+    };
+    transition.ready.then(readyForAnimations, handleError);
+    transition.finished.finally(() => {
+      for (let i = 0; i < viewTransitionAnimations.length; i++) {
+        // In Safari, we need to manually cancel all manually started animations
+        // or it'll block or interfer with future transitions.
+        // We can't use getAnimations() due to #35336 so we collect them in an array.
+        viewTransitionAnimations[i].cancel();
+      }
+      for (let i = 0; i < customTimelineCleanup.length; i++) {
+        const cleanup = customTimelineCleanup[i];
+        cleanup();
+      }
+      // $FlowFixMe[prop-missing]
+      if (ownerDocument.__reactViewTransition === transition) {
+        // $FlowFixMe[prop-missing]
+        ownerDocument.__reactViewTransition = null;
+      }
+      if (enableProfilerTimer) {
+        // Signal that the Transition was unable to continue. We do that here
+        // instead of when we stop the running View Transition to ensure that
+        // we cover cases when something else stops it early.
+        finishedAnimation();
+      }
+    });
+    return transition;
+  } catch (x) {
+    // We use the error as feature detection.
+    // The only thing that should throw is if startViewTransition is missing
+    // or if it doesn't accept the object form. Other errors are async.
+    // I.e. it's before the View Transitions v2 spec. We only support View
+    // Transitions v2 otherwise we fallback to not animating to ensure that
+    // we're not animating with the wrong animation mapped.
+    // Run through the sequence to put state back into a consistent state.
+    mutationCallback();
+    animateCallback();
+    if (enableProfilerTimer) {
+      finishedAnimation();
+    }
+    return null;
+  }
+}
+
+export function stopViewTransition(transition: RunningViewTransition) {
+  transition.skipTransition();
+}
+
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  transition.finished.finally(callback);
+}
+
+interface ViewTransitionPseudoElementType extends mixin$Animatable {
+  _scope: HTMLElement;
+  _selector: string;
+  getComputedStyle(): CSSStyleDeclaration;
+}
+
+function ViewTransitionPseudoElement(
+  this: ViewTransitionPseudoElementType,
+  pseudo: string,
+  name: string,
+) {
+  // TODO: Get the owner document from the root container.
+  this._scope = (document.documentElement: any);
+  this._selector = '::view-transition-' + pseudo + '(' + name + ')';
+}
+// $FlowFixMe[prop-missing]
+ViewTransitionPseudoElement.prototype.animate = function (
+  this: ViewTransitionPseudoElementType,
+  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
+  options?: number | KeyframeAnimationOptions,
+): Animation {
+  const opts: any =
+    typeof options === 'number'
+      ? {
+          duration: options,
+        }
+      : Object.assign(
+          (// $FlowFixMe[prop-missing]
+          {}: KeyframeAnimationOptions),
+          options,
+        );
+  opts.pseudoElement = this._selector;
+  // TODO: Handle multiple child instances.
+  return this._scope.animate(keyframes, opts);
+};
+// $FlowFixMe[prop-missing]
+ViewTransitionPseudoElement.prototype.getAnimations = function (
+  this: ViewTransitionPseudoElementType,
+  options?: GetAnimationsOptions,
+): Animation[] {
+  const scope = this._scope;
+  const selector = this._selector;
+  const animations = scope.getAnimations(
+    // $FlowFixMe[prop-missing]
+    {subtree: true},
+  );
+  const result = [];
+  for (let i = 0; i < animations.length; i++) {
+    const effect: null | {
+      target?: Element,
+      pseudoElement?: string,
+      ...
+    } = (animations[i].effect: any);
+    // TODO: Handle multiple child instances.
+    if (
+      effect !== null &&
+      effect.target === scope &&
+      effect.pseudoElement === selector
+    ) {
+      result.push(animations[i]);
+    }
+  }
+  return result;
+};
+// $FlowFixMe[prop-missing]
+ViewTransitionPseudoElement.prototype.getComputedStyle = function (
+  this: ViewTransitionPseudoElementType,
+): CSSStyleDeclaration {
+  const scope = this._scope;
+  const selector = this._selector;
+  return getComputedStyle(scope, selector);
+};
+
+export function createViewTransitionInstance(
+  name: string,
+): ViewTransitionInstance {
+  return {
+    name: name,
+    group: new (ViewTransitionPseudoElement: any)('group', name),
+    imagePair: new (ViewTransitionPseudoElement: any)('image-pair', name),
+    old: new (ViewTransitionPseudoElement: any)('old', name),
+    new: new (ViewTransitionPseudoElement: any)('new', name),
+  };
+}
+
+interface CustomTimeline {
+  currentTime: number;
+  animate(animation: Animation): void | (() => void);
+}
+
+export type GestureTimeline = AnimationTimeline | CustomTimeline;
+
+export function getCurrentGestureOffset(timeline: GestureTimeline): number {
+  const time = timeline.currentTime;
+  if (time === null) {
+    throw new Error(
+      'Cannot start a gesture with a disconnected AnimationTimeline.',
+    );
+  }
+  return typeof time === 'number' ? time : time.value;
+}
+
+type StoredEventListener = {
+  type: string,
+  listener: EventListener,
+  optionsOrUseCapture: void | EventListenerOptionsOrUseCapture,
+};
+
+export type FragmentInstanceType = {
+  _fragmentFiber: Fiber,
+  _eventListeners: null | Array<StoredEventListener>,
+  _observers: null | Set<IntersectionObserver | ResizeObserver>,
+  addEventListener(
+    type: string,
+    listener: EventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
+  ): void,
+  removeEventListener(
+    type: string,
+    listener: EventListener,
+    optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
+  ): void,
+  dispatchEvent(event: Event): boolean,
+  focus(focusOptions?: FocusOptions): void,
+  focusLast(focusOptions?: FocusOptions): void,
+  blur(): void,
+  observeUsing(observer: IntersectionObserver | ResizeObserver): void,
+  unobserveUsing(observer: IntersectionObserver | ResizeObserver): void,
+  getClientRects(): Array<DOMRect>,
+  getRootNode(getRootNodeOptions?: {
+    composed: boolean,
+  }): Document | ShadowRoot | FragmentInstanceType,
+  compareDocumentPosition(otherNode: Instance): number,
+  scrollIntoView(alignToTop?: boolean): void,
+};
+
+function FragmentInstance(this: FragmentInstanceType, fragmentFiber: Fiber) {
+  this._fragmentFiber = fragmentFiber;
+  this._eventListeners = null;
+  this._observers = null;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.addEventListener = function (
+  this: FragmentInstanceType,
+  type: string,
+  listener: EventListener,
+  optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
+): void {
+  if (this._eventListeners === null) {
+    this._eventListeners = [];
+  }
+
+  const listeners = this._eventListeners;
+  // Element.addEventListener will only apply uniquely new event listeners by default. Since we
+  // need to collect the listeners to apply to appended children, we track them ourselves and use
+  // custom equality check for the options.
+  const isNewEventListener =
+    indexOfEventListener(listeners, type, listener, optionsOrUseCapture) === -1;
+  if (isNewEventListener) {
+    listeners.push({type, listener, optionsOrUseCapture});
+    traverseFragmentInstance(
+      this._fragmentFiber,
+      addEventListenerToChild,
+      type,
+      listener,
+      optionsOrUseCapture,
+    );
+  }
+  this._eventListeners = listeners;
+};
+function addEventListenerToChild(
+  child: Fiber,
+  type: string,
+  listener: EventListener,
+  optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
+): boolean {
+  const instance = getInstanceFromHostFiber<Instance>(child);
+  instance.addEventListener(type, listener, optionsOrUseCapture);
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.removeEventListener = function (
+  this: FragmentInstanceType,
+  type: string,
+  listener: EventListener,
+  optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
+): void {
+  const listeners = this._eventListeners;
+  if (listeners === null) {
+    return;
+  }
+  if (typeof listeners !== 'undefined' && listeners.length > 0) {
+    traverseFragmentInstance(
+      this._fragmentFiber,
+      removeEventListenerFromChild,
+      type,
+      listener,
+      optionsOrUseCapture,
+    );
+    const index = indexOfEventListener(
+      listeners,
+      type,
+      listener,
+      optionsOrUseCapture,
+    );
+    if (this._eventListeners !== null) {
+      this._eventListeners.splice(index, 1);
+    }
+  }
+};
+function removeEventListenerFromChild(
+  child: Fiber,
+  type: string,
+  listener: EventListener,
+  optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
+): boolean {
+  const instance = getInstanceFromHostFiber<Instance>(child);
+  instance.removeEventListener(type, listener, optionsOrUseCapture);
+  return false;
+}
+function normalizeListenerOptions(
+  opts: ?EventListenerOptionsOrUseCapture,
+): string {
+  if (opts == null) {
+    return '0';
+  }
+
+  if (typeof opts === 'boolean') {
+    return `c=${opts ? '1' : '0'}`;
+  }
+
+  return `c=${opts.capture ? '1' : '0'}&o=${opts.once ? '1' : '0'}&p=${opts.passive ? '1' : '0'}`;
+}
+function indexOfEventListener(
+  eventListeners: Array<StoredEventListener>,
+  type: string,
+  listener: EventListener,
+  optionsOrUseCapture: void | EventListenerOptionsOrUseCapture,
+): number {
+  for (let i = 0; i < eventListeners.length; i++) {
+    const item = eventListeners[i];
+    if (
+      item.type === type &&
+      item.listener === listener &&
+      normalizeListenerOptions(item.optionsOrUseCapture) ===
+        normalizeListenerOptions(optionsOrUseCapture)
+    ) {
+      return i;
+    }
+  }
+  return -1;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.dispatchEvent = function (
+  this: FragmentInstanceType,
+  event: Event,
+): boolean {
+  const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
+  if (parentHostFiber === null) {
+    return true;
+  }
+  const parentHostInstance =
+    getInstanceFromHostFiber<Instance>(parentHostFiber);
+  const eventListeners = this._eventListeners;
+  if (
+    (eventListeners !== null && eventListeners.length > 0) ||
+    !event.bubbles
+  ) {
+    const temp = document.createTextNode('');
+    if (eventListeners) {
+      for (let i = 0; i < eventListeners.length; i++) {
+        const {type, listener, optionsOrUseCapture} = eventListeners[i];
+        temp.addEventListener(type, listener, optionsOrUseCapture);
+      }
+    }
+    parentHostInstance.appendChild(temp);
+    const cancelable = temp.dispatchEvent(event);
+    if (eventListeners) {
+      for (let i = 0; i < eventListeners.length; i++) {
+        const {type, listener, optionsOrUseCapture} = eventListeners[i];
+        temp.removeEventListener(type, listener, optionsOrUseCapture);
+      }
+    }
+    parentHostInstance.removeChild(temp);
+    return cancelable;
+  } else {
+    return parentHostInstance.dispatchEvent(event);
+  }
+};
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.focus = function (
+  this: FragmentInstanceType,
+  focusOptions?: FocusOptions,
+): void {
+  traverseFragmentInstanceDeeply(
+    this._fragmentFiber,
+    setFocusOnFiberIfFocusable,
+    focusOptions,
+  );
+};
+function setFocusOnFiberIfFocusable(
+  fiber: Fiber,
+  focusOptions?: FocusOptions,
+): boolean {
+  const instance = getInstanceFromHostFiber<Instance>(fiber);
+  return setFocusIfFocusable(instance, focusOptions);
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.focusLast = function (
+  this: FragmentInstanceType,
+  focusOptions?: FocusOptions,
+): void {
+  const children: Array<Fiber> = [];
+  traverseFragmentInstanceDeeply(
+    this._fragmentFiber,
+    collectChildren,
+    children,
+  );
+  for (let i = children.length - 1; i >= 0; i--) {
+    const child = children[i];
+    if (setFocusOnFiberIfFocusable(child, focusOptions)) {
+      break;
+    }
+  }
+};
+function collectChildren(child: Fiber, collection: Array<Fiber>): boolean {
+  collection.push(child);
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.blur = function (this: FragmentInstanceType): void {
+  // TODO: When we have a parent element reference, we can skip traversal if the fragment's parent
+  //   does not contain document.activeElement
+  traverseFragmentInstance(
+    this._fragmentFiber,
+    blurActiveElementWithinFragment,
+  );
+};
+function blurActiveElementWithinFragment(child: Fiber): boolean {
+  // TODO: We can get the activeElement from the parent outside of the loop when we have a reference.
+  const instance = getInstanceFromHostFiber<Instance>(child);
+  const ownerDocument = instance.ownerDocument;
+  if (instance === ownerDocument.activeElement) {
+    // $FlowFixMe[prop-missing]
+    instance.blur();
+    return true;
+  }
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.observeUsing = function (
+  this: FragmentInstanceType,
+  observer: IntersectionObserver | ResizeObserver,
+): void {
+  if (this._observers === null) {
+    this._observers = new Set();
+  }
+  this._observers.add(observer);
+  traverseFragmentInstance(this._fragmentFiber, observeChild, observer);
+};
+function observeChild(
+  child: Fiber,
+  observer: IntersectionObserver | ResizeObserver,
+) {
+  const instance = getInstanceFromHostFiber<Instance>(child);
+  observer.observe(instance);
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.unobserveUsing = function (
+  this: FragmentInstanceType,
+  observer: IntersectionObserver | ResizeObserver,
+): void {
+  const observers = this._observers;
+  if (observers === null || !observers.has(observer)) {
+    if (__DEV__) {
+      console.error(
+        'You are calling unobserveUsing() with an observer that is not being observed with this fragment ' +
+          'instance. First attach the observer with observeUsing()',
+      );
+    }
+  } else {
+    observers.delete(observer);
+    traverseFragmentInstance(this._fragmentFiber, unobserveChild, observer);
+  }
+};
+function unobserveChild(
+  child: Fiber,
+  observer: IntersectionObserver | ResizeObserver,
+) {
+  const instance = getInstanceFromHostFiber<Instance>(child);
+  observer.unobserve(instance);
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.getClientRects = function (
+  this: FragmentInstanceType,
+): Array<DOMRect> {
+  const rects: Array<DOMRect> = [];
+  traverseFragmentInstance(this._fragmentFiber, collectClientRects, rects);
+  return rects;
+};
+function collectClientRects(child: Fiber, rects: Array<DOMRect>): boolean {
+  const instance = getInstanceFromHostFiber<Instance>(child);
+  // $FlowFixMe[method-unbinding]
+  rects.push.apply(rects, instance.getClientRects());
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.getRootNode = function (
+  this: FragmentInstanceType,
+  getRootNodeOptions?: {composed: boolean},
+): Document | ShadowRoot | FragmentInstanceType {
+  const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
+  if (parentHostFiber === null) {
+    return this;
+  }
+  const parentHostInstance =
+    getInstanceFromHostFiber<Instance>(parentHostFiber);
+  const rootNode =
+    // $FlowFixMe[incompatible-cast] Flow expects Node
+    (parentHostInstance.getRootNode(getRootNodeOptions): Document | ShadowRoot);
+  return rootNode;
+};
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.compareDocumentPosition = function (
+  this: FragmentInstanceType,
+  otherNode: Instance,
+): number {
+  const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
+  if (parentHostFiber === null) {
+    return Node.DOCUMENT_POSITION_DISCONNECTED;
+  }
+  const children: Array<Fiber> = [];
+  traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
+  const parentHostInstance =
+    getInstanceFromHostFiber<Instance>(parentHostFiber);
+
+  if (children.length === 0) {
+    return compareDocumentPositionForEmptyFragment(
+      this._fragmentFiber,
+      parentHostInstance,
+      otherNode,
+      getInstanceFromHostFiber,
+    );
+  }
+
+  const firstElement = getInstanceFromHostFiber<Instance>(children[0]);
+  const lastElement = getInstanceFromHostFiber<Instance>(
+    children[children.length - 1],
+  );
+
+  // If the fragment has been portaled into another host instance, we need to
+  // our best guess is to use the parent of the child instance, rather than
+  // the fiber tree host parent.
+  const firstInstance = getInstanceFromHostFiber<Instance>(children[0]);
+  const parentHostInstanceFromDOM = fiberIsPortaledIntoHost(this._fragmentFiber)
+    ? (firstInstance.parentElement: ?Instance)
+    : parentHostInstance;
+
+  if (parentHostInstanceFromDOM == null) {
+    return Node.DOCUMENT_POSITION_DISCONNECTED;
+  }
+
+  // Check if first and last element are actually in the expected document position
+  // before relying on them as source of truth for other contained elements
+  const firstElementIsContained =
+    parentHostInstanceFromDOM.compareDocumentPosition(firstElement) &
+    Node.DOCUMENT_POSITION_CONTAINED_BY;
+  const lastElementIsContained =
+    parentHostInstanceFromDOM.compareDocumentPosition(lastElement) &
+    Node.DOCUMENT_POSITION_CONTAINED_BY;
+  const firstResult = firstElement.compareDocumentPosition(otherNode);
+  const lastResult = lastElement.compareDocumentPosition(otherNode);
+
+  const otherNodeIsFirstOrLastChild =
+    (firstElementIsContained && firstElement === otherNode) ||
+    (lastElementIsContained && lastElement === otherNode);
+  const otherNodeIsFirstOrLastChildDisconnected =
+    (!firstElementIsContained && firstElement === otherNode) ||
+    (!lastElementIsContained && lastElement === otherNode);
+  const otherNodeIsWithinFirstOrLastChild =
+    firstResult & Node.DOCUMENT_POSITION_CONTAINED_BY ||
+    lastResult & Node.DOCUMENT_POSITION_CONTAINED_BY;
+  const otherNodeIsBetweenFirstAndLastChildren =
+    firstElementIsContained &&
+    lastElementIsContained &&
+    firstResult & Node.DOCUMENT_POSITION_FOLLOWING &&
+    lastResult & Node.DOCUMENT_POSITION_PRECEDING;
+
+  let result = Node.DOCUMENT_POSITION_DISCONNECTED;
+  if (
+    otherNodeIsFirstOrLastChild ||
+    otherNodeIsWithinFirstOrLastChild ||
+    otherNodeIsBetweenFirstAndLastChildren
+  ) {
+    result = Node.DOCUMENT_POSITION_CONTAINED_BY;
+  } else if (otherNodeIsFirstOrLastChildDisconnected) {
+    // otherNode has been portaled into another container
+    result = Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC;
+  } else {
+    result = firstResult;
+  }
+
+  if (
+    result & Node.DOCUMENT_POSITION_DISCONNECTED ||
+    result & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
+  ) {
+    return result;
+  }
+
+  // Now that we have the result from the DOM API, we double check it matches
+  // the state of the React tree. If it doesn't, we have a case of portaled or
+  // otherwise injected elements and we return DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC.
+  const documentPositionMatchesFiberPosition =
+    validateDocumentPositionWithFiberTree(
+      result,
+      this._fragmentFiber,
+      children[0],
+      children[children.length - 1],
+      otherNode,
+    );
+  if (documentPositionMatchesFiberPosition) {
+    return result;
+  }
+  return Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC;
+};
+
+function validateDocumentPositionWithFiberTree(
+  documentPosition: number,
+  fragmentFiber: Fiber,
+  precedingBoundaryFiber: Fiber,
+  followingBoundaryFiber: Fiber,
+  otherNode: Instance,
+): boolean {
+  const otherFiber = getClosestInstanceFromNode(otherNode);
+  if (documentPosition & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+    return (
+      !!otherFiber && isFiberContainedByFragment(otherFiber, fragmentFiber)
+    );
+  }
+  if (documentPosition & Node.DOCUMENT_POSITION_CONTAINS) {
+    if (otherFiber === null) {
+      // otherFiber could be null if its the document or body element
+      const ownerDocument = otherNode.ownerDocument;
+      return otherNode === ownerDocument || otherNode === ownerDocument.body;
+    }
+    return isFragmentContainedByFiber(fragmentFiber, otherFiber);
+  }
+  if (documentPosition & Node.DOCUMENT_POSITION_PRECEDING) {
+    return (
+      !!otherFiber &&
+      (otherFiber === precedingBoundaryFiber ||
+        isFiberPreceding(precedingBoundaryFiber, otherFiber))
+    );
+  }
+  if (documentPosition & Node.DOCUMENT_POSITION_FOLLOWING) {
+    return (
+      !!otherFiber &&
+      (otherFiber === followingBoundaryFiber ||
+        isFiberFollowing(followingBoundaryFiber, otherFiber))
+    );
+  }
+
+  return false;
+}
+
+if (enableFragmentRefsScrollIntoView) {
+  // $FlowFixMe[prop-missing]
+  FragmentInstance.prototype.scrollIntoView = function (
+    this: FragmentInstanceType,
+    alignToTop?: boolean,
+  ): void {
+    if (typeof alignToTop === 'object') {
+      throw new Error(
+        'FragmentInstance.scrollIntoView() does not support ' +
+          'scrollIntoViewOptions. Use the alignToTop boolean instead.',
+      );
+    }
+    // First, get the children nodes
+    const children: Array<Fiber> = [];
+    traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
+
+    const resolvedAlignToTop = alignToTop !== false;
+
+    // If there are no children, we can use the parent and siblings to determine a position
+    if (children.length === 0) {
+      const hostSiblings = getFragmentInstanceSiblings(this._fragmentFiber);
+      const targetFiber = resolvedAlignToTop
+        ? hostSiblings[1] ||
+          hostSiblings[0] ||
+          getFragmentParentHostFiber(this._fragmentFiber)
+        : hostSiblings[0] || hostSiblings[1];
+
+      if (targetFiber === null) {
+        if (__DEV__) {
+          console.warn(
+            'You are attempting to scroll a FragmentInstance that has no ' +
+              'children, siblings, or parent. No scroll was performed.',
+          );
+        }
+        return;
+      }
+      const target = getInstanceFromHostFiber<Instance>(targetFiber);
+      target.scrollIntoView(alignToTop);
+      return;
+    }
+
+    let i = resolvedAlignToTop ? children.length - 1 : 0;
+    while (i !== (resolvedAlignToTop ? -1 : children.length)) {
+      const child = children[i];
+      const instance = getInstanceFromHostFiber<Instance>(child);
+      instance.scrollIntoView(alignToTop);
+      i += resolvedAlignToTop ? -1 : 1;
+    }
+  };
+}
+
+function addFragmentHandleToFiber(
+  child: Fiber,
+  fragmentInstance: FragmentInstanceType,
+): boolean {
+  if (enableFragmentRefsInstanceHandles) {
+    const instance =
+      getInstanceFromHostFiber<InstanceWithFragmentHandles>(child);
+    if (instance != null) {
+      addFragmentHandleToInstance(instance, fragmentInstance);
+    }
+  }
+  return false;
+}
+
+function addFragmentHandleToInstance(
+  instance: InstanceWithFragmentHandles,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  if (enableFragmentRefsInstanceHandles) {
+    if (instance.unstable_reactFragments == null) {
+      instance.unstable_reactFragments = new Set();
+    }
+    instance.unstable_reactFragments.add(fragmentInstance);
+  }
+}
+
+export function createFragmentInstance(
+  fragmentFiber: Fiber,
+): FragmentInstanceType {
+  const fragmentInstance = new (FragmentInstance: any)(fragmentFiber);
+  if (enableFragmentRefsInstanceHandles) {
+    traverseFragmentInstance(
+      fragmentFiber,
+      addFragmentHandleToFiber,
+      fragmentInstance,
+    );
+  }
+  return fragmentInstance;
+}
+
+export function updateFragmentInstanceFiber(
+  fragmentFiber: Fiber,
+  instance: FragmentInstanceType,
+): void {
+  instance._fragmentFiber = fragmentFiber;
+}
+
+export function commitNewChildToFragmentInstance(
+  childInstance: InstanceWithFragmentHandles,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  const eventListeners = fragmentInstance._eventListeners;
+  if (eventListeners !== null) {
+    for (let i = 0; i < eventListeners.length; i++) {
+      const {type, listener, optionsOrUseCapture} = eventListeners[i];
+      childInstance.addEventListener(type, listener, optionsOrUseCapture);
+    }
+  }
+  if (fragmentInstance._observers !== null) {
+    fragmentInstance._observers.forEach(observer => {
+      observer.observe(childInstance);
+    });
+  }
+  if (enableFragmentRefsInstanceHandles) {
+    addFragmentHandleToInstance(childInstance, fragmentInstance);
+  }
+}
+
+export function deleteChildFromFragmentInstance(
+  childInstance: InstanceWithFragmentHandles,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  const eventListeners = fragmentInstance._eventListeners;
+  if (eventListeners !== null) {
+    for (let i = 0; i < eventListeners.length; i++) {
+      const {type, listener, optionsOrUseCapture} = eventListeners[i];
+      childInstance.removeEventListener(type, listener, optionsOrUseCapture);
+    }
+  }
+  if (enableFragmentRefsInstanceHandles) {
+    if (childInstance.unstable_reactFragments != null) {
+      childInstance.unstable_reactFragments.delete(fragmentInstance);
+    }
+  }
+}
+
+export function clearContainer(container: Container): void {
+  const nodeType = container.nodeType;
+  if (nodeType === DOCUMENT_NODE) {
+    clearContainerSparingly(container);
+  } else if (nodeType === ELEMENT_NODE) {
+    switch (container.nodeName) {
+      case 'HEAD':
+      case 'HTML':
+      case 'BODY':
+        clearContainerSparingly(container);
+        return;
+      default: {
+        container.textContent = '';
+      }
+    }
+  }
+}
+
+function clearContainerSparingly(container: Node) {
+  let node;
+  let nextNode: ?Node = container.firstChild;
+  if (nextNode && nextNode.nodeType === DOCUMENT_TYPE_NODE) {
+    nextNode = nextNode.nextSibling;
+  }
+  while (nextNode) {
+    node = nextNode;
+    nextNode = nextNode.nextSibling;
+    switch (node.nodeName) {
+      case 'HTML':
+      case 'HEAD':
+      case 'BODY': {
+        const element: Element = (node: any);
+        clearContainerSparingly(element);
+        // If these singleton instances had previously been rendered with React they
+        // may still hold on to references to the previous fiber tree. We detatch them
+        // prospectively to reset them to a baseline starting state since we cannot create
+        // new instances.
+        detachDeletedInstance(element);
+        continue;
+      }
+      // Script tags are retained to avoid an edge case bug. Normally scripts will execute if they
+      // are ever inserted into the DOM. However when streaming if a script tag is opened but not
+      // yet closed some browsers create and insert the script DOM Node but the script cannot execute
+      // yet until the closing tag is parsed. If something causes React to call clearContainer while
+      // this DOM node is in the document but not yet executable the DOM node will be removed from the
+      // document and when the script closing tag comes in the script will not end up running. This seems
+      // to happen in Chrome/Firefox but not Safari at the moment though this is not necessarily specified
+      // behavior so it could change in future versions of browsers. While leaving all scripts is broader
+      // than strictly necessary this is the least amount of additional code to avoid this breaking
+      // edge case.
+      //
+      // Style tags are retained because they may likely come from 3rd party scripts and extensions
+      case 'SCRIPT':
+      case 'STYLE': {
+        continue;
+      }
+      // Stylesheet tags are retained because they may likely come from 3rd party scripts and extensions
+      case 'LINK': {
+        if (((node: any): HTMLLinkElement).rel.toLowerCase() === 'stylesheet') {
+          continue;
+        }
+      }
+    }
+    container.removeChild(node);
+  }
+  return;
+}
+
+function clearHead(head: Element): void {
+  let node = head.firstChild;
+  while (node) {
+    const nextNode = node.nextSibling;
+    const nodeName = node.nodeName;
+    if (
+      isMarkedHoistable(node) ||
+      nodeName === 'SCRIPT' ||
+      nodeName === 'STYLE' ||
+      (nodeName === 'LINK' &&
+        ((node: any): HTMLLinkElement).rel.toLowerCase() === 'stylesheet')
+    ) {
+      // retain these nodes
+    } else {
+      head.removeChild(node);
+    }
+    node = nextNode;
+  }
+  return;
+}
+
+// Making this so we can eventually move all of the instance caching to the commit phase.
+// Currently this is only used to associate fiber and props to instances for hydrating
+// HostSingletons. The reason we need it here is we only want to make this binding on commit
+// because only one fiber can own the instance at a time and render can fail/restart
+export function bindInstance(
+  instance: Instance,
+  props: Props,
+  internalInstanceHandle: mixed,
+) {
+  precacheFiberNode((internalInstanceHandle: any), instance);
+  updateFiberProps(instance, props);
+}
+
+// -------------------
+//     Hydration
+// -------------------
+
+export const supportsHydration = true;
+
+export function canHydrateInstance(
+  instance: HydratableInstance,
+  type: string,
+  props: Props,
+  inRootOrSingleton: boolean,
+): null | Instance {
+  while (instance.nodeType === ELEMENT_NODE) {
+    const element: Element = (instance: any);
+    const anyProps = (props: any);
+    if (element.nodeName.toLowerCase() !== type.toLowerCase()) {
+      if (!inRootOrSingleton) {
+        // Usually we error for mismatched tags.
+        if (element.nodeName === 'INPUT' && (element: any).type === 'hidden') {
+          // If we have extra hidden inputs, we don't mismatch. This allows us to embed
+          // extra form data in the original form.
+        } else {
+          return null;
+        }
+      }
+      // In root or singleton parents we skip past mismatched instances.
+    } else if (!inRootOrSingleton) {
+      // Match
+      if (type === 'input' && (element: any).type === 'hidden') {
+        if (__DEV__) {
+          checkAttributeStringCoercion(anyProps.name, 'name');
+        }
+        const name = anyProps.name == null ? null : '' + anyProps.name;
+        if (
+          anyProps.type !== 'hidden' ||
+          element.getAttribute('name') !== name
+        ) {
+          // Skip past hidden inputs unless that's what we're looking for. This allows us
+          // embed extra form data in the original form.
+        } else {
+          return element;
+        }
+      } else {
+        return element;
+      }
+    } else if (isMarkedHoistable(element)) {
+      // We've already claimed this as a hoistable which isn't hydrated this way so we skip past it.
+    } else {
+      // We have an Element with the right type.
+
+      // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if
+      // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension
+      // using high entropy attributes for certain types. This technique will fail for strange insertions like
+      // extension prepending <div> in the <body> but that already breaks before and that is an edge case.
+      switch (type) {
+        // case 'title':
+        //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope
+        // and if you are a HostComponent with type title we must either be in an <svg> context or this title must have an `itemProp` prop.
+        case 'meta': {
+          // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be
+          // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags
+          // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime
+          // implications are minimal
+          if (!element.hasAttribute('itemprop')) {
+            // This is a Hoistable
+            break;
+          }
+          return element;
+        }
+        case 'link': {
+          // Links come in many forms and we do expect 3rd parties to inject them into <head> / <body>. We exclude known resources
+          // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely
+          // matches.
+          const rel = element.getAttribute('rel');
+          if (rel === 'stylesheet' && element.hasAttribute('data-precedence')) {
+            // This is a stylesheet resource
+            break;
+          } else if (
+            rel !== anyProps.rel ||
+            element.getAttribute('href') !==
+              (anyProps.href == null || anyProps.href === ''
+                ? null
+                : anyProps.href) ||
+            element.getAttribute('crossorigin') !==
+              (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) ||
+            element.getAttribute('title') !==
+              (anyProps.title == null ? null : anyProps.title)
+          ) {
+            // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect
+            // and title could vary for rel alternate
+            break;
+          }
+          return element;
+        }
+        case 'style': {
+          // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags
+          // in <head> or <body> are likely never going to be unmounted given their position in the document and the fact they likely hold global styles
+          if (element.hasAttribute('data-precedence')) {
+            // This is a style resource
+            break;
+          }
+          return element;
+        }
+        case 'script': {
+          // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes
+          // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could
+          // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes.
+          // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later
+          // if we learn it is problematic
+          const srcAttr = element.getAttribute('src');
+          if (
+            srcAttr !== (anyProps.src == null ? null : anyProps.src) ||
+            element.getAttribute('type') !==
+              (anyProps.type == null ? null : anyProps.type) ||
+            element.getAttribute('crossorigin') !==
+              (anyProps.crossOrigin == null ? null : anyProps.crossOrigin)
+          ) {
+            // This script is for a different src/type/crossOrigin. It may be a script resource
+            // or it may just be a mistmatch
+            if (
+              srcAttr &&
+              element.hasAttribute('async') &&
+              !element.hasAttribute('itemprop')
+            ) {
+              // This is an async script resource
+              break;
+            }
+          }
+          return element;
+        }
+        default: {
+          // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags,
+          // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic
+          // that should work in the vast majority of cases.
+          return element;
+        }
+      }
+    }
+    const nextInstance = getNextHydratableSibling(element);
+    if (nextInstance === null) {
+      break;
+    }
+    instance = nextInstance;
+  }
+  // This is a suspense boundary or Text node or we got the end.
+  // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched
+  // and this is a hydration error.
+  // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for <body>
+  // but it seems reasonable and conservative to reject this as a hydration error as well
+  return null;
+}
+
+export function canHydrateTextInstance(
+  instance: HydratableInstance,
+  text: string,
+  inRootOrSingleton: boolean,
+): null | TextInstance {
+  // Empty strings are not parsed by HTML so there won't be a correct match here.
+  if (text === '') return null;
+
+  while (instance.nodeType !== TEXT_NODE) {
+    if (
+      instance.nodeType === ELEMENT_NODE &&
+      instance.nodeName === 'INPUT' &&
+      (instance: any).type === 'hidden'
+    ) {
+      // If we have extra hidden inputs, we don't mismatch. This allows us to
+      // embed extra form data in the original form.
+    } else if (!inRootOrSingleton) {
+      return null;
+    }
+    const nextInstance = getNextHydratableSibling(instance);
+    if (nextInstance === null) {
+      return null;
+    }
+    instance = nextInstance;
+  }
+  // This has now been refined to a text node.
+  return ((instance: any): TextInstance);
+}
+
+function canHydrateHydrationBoundary(
+  instance: HydratableInstance,
+  inRootOrSingleton: boolean,
+): null | SuspenseInstance | ActivityInstance {
+  while (instance.nodeType !== COMMENT_NODE) {
+    if (
+      instance.nodeType === ELEMENT_NODE &&
+      instance.nodeName === 'INPUT' &&
+      (instance: any).type === 'hidden'
+    ) {
+      // If we have extra hidden inputs, we don't mismatch. This allows us to
+      // embed extra form data in the original form.
+    } else if (!inRootOrSingleton) {
+      return null;
+    }
+    const nextInstance = getNextHydratableSibling(instance);
+    if (nextInstance === null) {
+      return null;
+    }
+    instance = nextInstance;
+  }
+  // This has now been refined to a hydration boundary node.
+  return (instance: any);
+}
+
+export function canHydrateActivityInstance(
+  instance: HydratableInstance,
+  inRootOrSingleton: boolean,
+): null | ActivityInstance {
+  const hydratableInstance = canHydrateHydrationBoundary(
+    instance,
+    inRootOrSingleton,
+  );
+  if (
+    hydratableInstance !== null &&
+    hydratableInstance.data === ACTIVITY_START_DATA
+  ) {
+    return (hydratableInstance: any);
+  }
+  return null;
+}
+
+export function canHydrateSuspenseInstance(
+  instance: HydratableInstance,
+  inRootOrSingleton: boolean,
+): null | SuspenseInstance {
+  const hydratableInstance = canHydrateHydrationBoundary(
+    instance,
+    inRootOrSingleton,
+  );
+  if (
+    hydratableInstance !== null &&
+    hydratableInstance.data !== ACTIVITY_START_DATA
+  ) {
+    return (hydratableInstance: any);
+  }
+  return null;
+}
+
+export function isSuspenseInstancePending(instance: SuspenseInstance): boolean {
+  return (
+    instance.data === SUSPENSE_PENDING_START_DATA ||
+    instance.data === SUSPENSE_QUEUED_START_DATA
+  );
+}
+
+export function isSuspenseInstanceFallback(
+  instance: SuspenseInstance,
+): boolean {
+  return (
+    instance.data === SUSPENSE_FALLBACK_START_DATA ||
+    (instance.data === SUSPENSE_PENDING_START_DATA &&
+      instance.ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING)
+  );
+}
+
+export function getSuspenseInstanceFallbackErrorDetails(
+  instance: SuspenseInstance,
+): {
+  digest: ?string,
+  message?: string,
+  stack?: string,
+  componentStack?: string,
+} {
+  const dataset =
+    instance.nextSibling && ((instance.nextSibling: any): HTMLElement).dataset;
+  let digest, message, stack, componentStack;
+  if (dataset) {
+    digest = dataset.dgst;
+    if (__DEV__) {
+      message = dataset.msg;
+      stack = dataset.stck;
+      componentStack = dataset.cstck;
+    }
+  }
+  if (__DEV__) {
+    return {
+      message,
+      digest,
+      stack,
+      componentStack,
+    };
+  } else {
+    // Object gets DCE'd if constructed in tail position and matches callsite destructuring
+    return {
+      digest,
+    };
+  }
+}
+
+export function registerSuspenseInstanceRetry(
+  instance: SuspenseInstance,
+  callback: () => void,
+) {
+  const ownerDocument = instance.ownerDocument;
+  if (instance.data === SUSPENSE_QUEUED_START_DATA) {
+    // The Fizz runtime has already queued this boundary for reveal. We wait for it
+    // to be revealed and then retries.
+    instance._reactRetry = callback;
+  } else if (
+    // The Fizz runtime must have put this boundary into client render or complete
+    // state after the render finished but before it committed. We need to call the
+    // callback now rather than wait
+    instance.data !== SUSPENSE_PENDING_START_DATA ||
+    // The boundary is still in pending status but the document has finished loading
+    // before we could register the event handler that would have scheduled the retry
+    // on load so we call teh callback now.
+    ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING
+  ) {
+    callback();
+  } else {
+    // We're still in pending status and the document is still loading so we attach
+    // a listener to the document load even and expose the retry on the instance for
+    // the Fizz runtime to trigger if it ends up resolving this boundary
+    const listener = () => {
+      callback();
+      ownerDocument.removeEventListener('DOMContentLoaded', listener);
+    };
+    ownerDocument.addEventListener('DOMContentLoaded', listener);
+    instance._reactRetry = listener;
+  }
+}
+
+export function canHydrateFormStateMarker(
+  instance: HydratableInstance,
+  inRootOrSingleton: boolean,
+): null | FormStateMarkerInstance {
+  while (instance.nodeType !== COMMENT_NODE) {
+    if (!inRootOrSingleton) {
+      return null;
+    }
+    const nextInstance = getNextHydratableSibling(instance);
+    if (nextInstance === null) {
+      return null;
+    }
+    instance = nextInstance;
+  }
+  const nodeData = (instance: any).data;
+  if (
+    nodeData === FORM_STATE_IS_MATCHING ||
+    nodeData === FORM_STATE_IS_NOT_MATCHING
+  ) {
+    const markerInstance: FormStateMarkerInstance = (instance: any);
+    return markerInstance;
+  }
+  return null;
+}
+
+export function isFormStateMarkerMatching(
+  markerInstance: FormStateMarkerInstance,
+): boolean {
+  return markerInstance.data === FORM_STATE_IS_MATCHING;
+}
+
+function getNextHydratable(node: ?Node) {
+  // Skip non-hydratable nodes.
+  for (; node != null; node = ((node: any): Node).nextSibling) {
+    const nodeType = node.nodeType;
+    if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
+      break;
+    }
+    if (nodeType === COMMENT_NODE) {
+      const data = (node: any).data;
+      if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
+        data === ACTIVITY_START_DATA ||
+        data === FORM_STATE_IS_MATCHING ||
+        data === FORM_STATE_IS_NOT_MATCHING
+      ) {
+        break;
+      }
+      if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
+        return null;
+      }
+    }
+  }
+  return (node: any);
+}
+
+export function getNextHydratableSibling(
+  instance: HydratableInstance,
+): null | HydratableInstance {
+  return getNextHydratable(instance.nextSibling);
+}
+
+export function getFirstHydratableChild(
+  parentInstance: Instance,
+): null | HydratableInstance {
+  return getNextHydratable(parentInstance.firstChild);
+}
+
+export function getFirstHydratableChildWithinContainer(
+  parentContainer: Container,
+): null | HydratableInstance {
+  let parentElement: Element;
+  switch (parentContainer.nodeType) {
+    case DOCUMENT_NODE:
+      parentElement = (parentContainer: any).body;
+      break;
+    default: {
+      if (parentContainer.nodeName === 'HTML') {
+        parentElement = (parentContainer: any).ownerDocument.body;
+      } else {
+        parentElement = (parentContainer: any);
+      }
+    }
+  }
+  return getNextHydratable(parentElement.firstChild);
+}
+
+export function getFirstHydratableChildWithinActivityInstance(
+  parentInstance: ActivityInstance,
+): null | HydratableInstance {
+  return getNextHydratable(parentInstance.nextSibling);
+}
+
+export function getFirstHydratableChildWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+): null | HydratableInstance {
+  return getNextHydratable(parentInstance.nextSibling);
+}
+
+// If it were possible to have more than one scope singleton in a DOM tree
+// we would need to model this as a stack but since you can only have one <head>
+// and head is the only singleton that is a scope in DOM we can get away with
+// tracking this as a single value.
+let previousHydratableOnEnteringScopedSingleton: null | HydratableInstance =
+  null;
+
+export function getFirstHydratableChildWithinSingleton(
+  type: string,
+  singletonInstance: Instance,
+  currentHydratableInstance: null | HydratableInstance,
+): null | HydratableInstance {
+  if (isSingletonScope(type)) {
+    previousHydratableOnEnteringScopedSingleton = currentHydratableInstance;
+    return getNextHydratable(singletonInstance.firstChild);
+  } else {
+    return currentHydratableInstance;
+  }
+}
+
+export function getNextHydratableSiblingAfterSingleton(
+  type: string,
+  currentHydratableInstance: null | HydratableInstance,
+): null | HydratableInstance {
+  if (isSingletonScope(type)) {
+    const previousHydratableInstance =
+      previousHydratableOnEnteringScopedSingleton;
+    previousHydratableOnEnteringScopedSingleton = null;
+    return previousHydratableInstance;
+  } else {
+    return currentHydratableInstance;
+  }
+}
+
+export function describeHydratableInstanceForDevWarnings(
+  instance: HydratableInstance,
+): string | {type: string, props: $ReadOnly<Props>} {
+  // Reverse engineer a pseudo react-element from hydratable instance
+  if (instance.nodeType === ELEMENT_NODE) {
+    // Reverse engineer a set of props that can print for dev warnings
+    return {
+      type: instance.nodeName.toLowerCase(),
+      props: getPropsFromElement((instance: any)),
+    };
+  } else if (instance.nodeType === COMMENT_NODE) {
+    if (instance.data === ACTIVITY_START_DATA) {
+      return {
+        type: 'Activity',
+        props: {},
+      };
+    }
+    return {
+      type: 'Suspense',
+      props: {},
+    };
+  } else {
+    return instance.nodeValue;
+  }
+}
+
+export function validateHydratableInstance(
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+): boolean {
+  if (__DEV__) {
+    // TODO: take namespace into account when validating.
+    const hostContextDev: HostContextDev = (hostContext: any);
+    return validateDOMNesting(type, hostContextDev.ancestorInfo);
+  }
+  return true;
+}
+
+export function hydrateInstance(
+  instance: Instance,
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+  internalInstanceHandle: Object,
+): boolean {
+  precacheFiberNode(internalInstanceHandle, instance);
+  // TODO: Possibly defer this until the commit phase where all the events
+  // get attached.
+  updateFiberProps(instance, props);
+
+  return hydrateProperties(instance, type, props, hostContext);
+}
+
+// Returns a Map of properties that were different on the server.
+export function diffHydratedPropsForDevWarnings(
+  instance: Instance,
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+): null | $ReadOnly<Props> {
+  return diffHydratedProperties(instance, type, props, hostContext);
+}
+
+export function validateHydratableTextInstance(
+  text: string,
+  hostContext: HostContext,
+): boolean {
+  if (__DEV__) {
+    const hostContextDev = ((hostContext: any): HostContextDev);
+    const ancestor = hostContextDev.ancestorInfo.current;
+    if (ancestor != null) {
+      return validateTextNesting(
+        text,
+        ancestor.tag,
+        hostContextDev.ancestorInfo.implicitRootScope,
+      );
+    }
+  }
+  return true;
+}
+
+export function hydrateTextInstance(
+  textInstance: TextInstance,
+  text: string,
+  internalInstanceHandle: Object,
+  parentInstanceProps: null | Props,
+): boolean {
+  precacheFiberNode(internalInstanceHandle, textInstance);
+
+  return hydrateText(textInstance, text, parentInstanceProps);
+}
+
+// Returns the server text if it differs from the client.
+export function diffHydratedTextForDevWarnings(
+  textInstance: TextInstance,
+  text: string,
+  parentProps: null | Props,
+): null | string {
+  if (
+    parentProps === null ||
+    parentProps[SUPPRESS_HYDRATION_WARNING] !== true
+  ) {
+    return diffHydratedText(textInstance, text);
+  }
+  return null;
+}
+
+export function hydrateActivityInstance(
+  activityInstance: ActivityInstance,
+  internalInstanceHandle: Object,
+) {
+  precacheFiberNode(internalInstanceHandle, activityInstance);
+}
+
+export function hydrateSuspenseInstance(
+  suspenseInstance: SuspenseInstance,
+  internalInstanceHandle: Object,
+) {
+  precacheFiberNode(internalInstanceHandle, suspenseInstance);
+}
+
+function getNextHydratableInstanceAfterHydrationBoundary(
+  hydrationInstance: SuspenseInstance | ActivityInstance,
+): null | HydratableInstance {
+  let node = hydrationInstance.nextSibling;
+  // 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) {
+      const data = ((node: any).data: string);
+      if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
+        if (depth === 0) {
+          return getNextHydratableSibling((node: any));
+        } else {
+          depth--;
+        }
+      } else if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
+        data === ACTIVITY_START_DATA
+      ) {
+        depth++;
+      }
+    }
+    node = node.nextSibling;
+  }
+  // TODO: Warn, we didn't find the end comment boundary.
+  return null;
+}
+
+export function getNextHydratableInstanceAfterActivityInstance(
+  activityInstance: ActivityInstance,
+): null | HydratableInstance {
+  return getNextHydratableInstanceAfterHydrationBoundary(activityInstance);
+}
+
+export function getNextHydratableInstanceAfterSuspenseInstance(
+  suspenseInstance: SuspenseInstance,
+): null | HydratableInstance {
+  return getNextHydratableInstanceAfterHydrationBoundary(suspenseInstance);
+}
+
+// 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 getParentHydrationBoundary(
+  targetInstance: Node,
+): null | SuspenseInstance | ActivityInstance {
+  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) {
+      const data = ((node: any).data: string);
+      if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
+        data === ACTIVITY_START_DATA
+      ) {
+        if (depth === 0) {
+          return ((node: any): SuspenseInstance | ActivityInstance);
+        } else {
+          depth--;
+        }
+      } else if (data === SUSPENSE_END_DATA || data === ACTIVITY_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 commitHydratedActivityInstance(
+  activityInstance: ActivityInstance,
+): void {
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(activityInstance);
+}
+
+export function commitHydratedSuspenseInstance(
+  suspenseInstance: SuspenseInstance,
+): void {
+  // Retry if any event replaying was blocked on this.
+  retryIfBlockedOn(suspenseInstance);
+}
+
+export function flushHydrationEvents(): void {
+  if (enableHydrationChangeEvent) {
+    flushEventReplaying();
+  }
+}
+
+export function shouldDeleteUnhydratedTailInstances(
+  parentType: string,
+): boolean {
+  return parentType !== 'form' && parentType !== 'button';
+}
+
+// -------------------
+//     Test Selectors
+// -------------------
+
+export const supportsTestSelectors = true;
+
+export function findFiberRoot(node: Instance): null | FiberRoot {
+  const stack = [node];
+  let index = 0;
+  while (index < stack.length) {
+    const current = stack[index++];
+    if (isContainerMarkedAsRoot(current)) {
+      return ((getInstanceFromNodeDOMTree(current): any): FiberRoot);
+    }
+    stack.push(...current.children);
+  }
+  return null;
+}
+
+export function getBoundingRect(node: Instance): BoundingRect {
+  const rect = node.getBoundingClientRect();
+  return {
+    x: rect.left,
+    y: rect.top,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+export function matchAccessibilityRole(node: Instance, role: string): boolean {
+  if (hasRole(node, role)) {
+    return true;
+  }
+
+  return false;
+}
+
+export function getTextContent(fiber: Fiber): string | null {
+  switch (fiber.tag) {
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent:
+      let textContent = '';
+      const childNodes = fiber.stateNode.childNodes;
+      for (let i = 0; i < childNodes.length; i++) {
+        const childNode = childNodes[i];
+        if (childNode.nodeType === Node.TEXT_NODE) {
+          textContent += childNode.textContent;
+        }
+      }
+      return textContent;
+    case HostText:
+      return fiber.stateNode.textContent;
+  }
+
+  return null;
+}
+
+export function isHiddenSubtree(fiber: Fiber): boolean {
+  return fiber.tag === HostComponent && fiber.memoizedProps.hidden === true;
+}
+
+export function setFocusIfFocusable(
+  node: Instance,
+  focusOptions?: FocusOptions,
+): boolean {
+  // The logic for determining if an element is focusable is kind of complex,
+  // and since we want to actually change focus anyway- we can just skip it.
+  // Instead we'll just listen for a "focus" event to verify that focus was set.
+  //
+  // We could compare the node to document.activeElement after focus,
+  // but this would not handle the case where application code managed focus to automatically blur.
+  let didFocus = false;
+  const handleFocus = () => {
+    didFocus = true;
+  };
+
+  const element = ((node: any): HTMLElement);
+  try {
+    element.addEventListener('focus', handleFocus);
+    // $FlowFixMe[method-unbinding]
+    (element.focus || HTMLElement.prototype.focus).call(element, focusOptions);
+  } finally {
+    element.removeEventListener('focus', handleFocus);
+  }
+
+  return didFocus;
+}
+
+type RectRatio = {
+  ratio: number,
+  rect: BoundingRect,
+};
+
+export function setupIntersectionObserver(
+  targets: Array<Instance>,
+  callback: ObserveVisibleRectsCallback,
+  options?: IntersectionObserverOptions,
+): {
+  disconnect: () => void,
+  observe: (instance: Instance) => void,
+  unobserve: (instance: Instance) => void,
+} {
+  const rectRatioCache: Map<Instance, RectRatio> = new Map();
+  targets.forEach(target => {
+    rectRatioCache.set(target, {
+      rect: getBoundingRect(target),
+      ratio: 0,
+    });
+  });
+
+  const handleIntersection = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach(entry => {
+      const {boundingClientRect, intersectionRatio, target} = entry;
+      rectRatioCache.set(target, {
+        rect: {
+          x: boundingClientRect.left,
+          y: boundingClientRect.top,
+          width: boundingClientRect.width,
+          height: boundingClientRect.height,
+        },
+        ratio: intersectionRatio,
+      });
+    });
+
+    callback(Array.from(rectRatioCache.values()));
+  };
+
+  const observer = new IntersectionObserver(handleIntersection, options);
+  targets.forEach(target => {
+    observer.observe((target: any));
+  });
+
+  return {
+    disconnect: () => observer.disconnect(),
+    observe: target => {
+      rectRatioCache.set(target, {
+        rect: getBoundingRect(target),
+        ratio: 0,
+      });
+      observer.observe((target: any));
+    },
+    unobserve: target => {
+      rectRatioCache.delete(target);
+      observer.unobserve((target: any));
+    },
+  };
+}
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  localRequestAnimationFrame(() => {
+    localRequestAnimationFrame(time => callback(time));
+  });
+}
+
+// -------------------
+//     Singletons
+// -------------------
+
+export const supportsSingletons = true;
+
+export function isHostSingletonType(type: string): boolean {
+  return type === 'html' || type === 'head' || type === 'body';
+}
+
+export function resolveSingletonInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  validateDOMNestingDev: boolean,
+): Instance {
+  if (__DEV__) {
+    const hostContextDev = ((hostContext: any): HostContextDev);
+    if (validateDOMNestingDev) {
+      validateDOMNesting(type, hostContextDev.ancestorInfo);
+    }
+  }
+  const ownerDocument = getOwnerDocumentFromRootContainer(
+    rootContainerInstance,
+  );
+  switch (type) {
+    case 'html': {
+      const documentElement = ownerDocument.documentElement;
+      if (!documentElement) {
+        throw new Error(
+          'React expected an <html> element (document.documentElement) to exist in the Document but one was' +
+            ' not found. React never removes the documentElement for any Document it renders into so' +
+            ' the cause is likely in some other script running on this page.',
+        );
+      }
+      return documentElement;
+    }
+    case 'head': {
+      const head = ownerDocument.head;
+      if (!head) {
+        throw new Error(
+          'React expected a <head> element (document.head) to exist in the Document but one was' +
+            ' not found. React never removes the head for any Document it renders into so' +
+            ' the cause is likely in some other script running on this page.',
+        );
+      }
+      return head;
+    }
+    case 'body': {
+      const body = ownerDocument.body;
+      if (!body) {
+        throw new Error(
+          'React expected a <body> element (document.body) to exist in the Document but one was' +
+            ' not found. React never removes the body for any Document it renders into so' +
+            ' the cause is likely in some other script running on this page.',
+        );
+      }
+      return body;
+    }
+    default: {
+      throw new Error(
+        'resolveSingletonInstance was called with an element type that is not supported. This is a bug in React.',
+      );
+    }
+  }
+}
+
+export function acquireSingletonInstance(
+  type: string,
+  props: Props,
+  instance: Instance,
+  internalInstanceHandle: Object,
+): void {
+  if (__DEV__) {
+    if (
+      // If this instance is the container then it is invalid to acquire it as a singleton however
+      // the DOM nesting validation will already warn for this and the message below isn't semantically
+      // aligned with the actual fix you need to make so we omit the warning in this case
+      !isContainerMarkedAsRoot(instance) &&
+      // If this instance isn't the root but is currently owned by a different HostSingleton instance then
+      // we we need to warn that you are rendering more than one singleton at a time.
+      getInstanceFromNodeDOMTree(instance)
+    ) {
+      const tagName = instance.tagName.toLowerCase();
+      console.error(
+        'You are mounting a new %s component when a previous one has not first unmounted. It is an' +
+          ' error to render more than one %s component at a time and attributes and children of these' +
+          ' components will likely fail in unpredictable ways. Please only render a single instance of' +
+          ' <%s> and if you need to mount a new one, ensure any previous ones have unmounted first.',
+        tagName,
+        tagName,
+        tagName,
+      );
+    }
+    switch (type) {
+      case 'html':
+      case 'head':
+      case 'body': {
+        break;
+      }
+      default: {
+        console.error(
+          'acquireSingletonInstance was called with an element type that is not supported. This is a bug in React.',
+        );
+      }
+    }
+  }
+
+  const attributes = instance.attributes;
+  while (attributes.length) {
+    instance.removeAttributeNode(attributes[0]);
+  }
+
+  setInitialProperties(instance, type, props);
+  precacheFiberNode(internalInstanceHandle, instance);
+  updateFiberProps(instance, props);
+}
+
+export function releaseSingletonInstance(instance: Instance): void {
+  const attributes = instance.attributes;
+  while (attributes.length) {
+    instance.removeAttributeNode(attributes[0]);
+  }
+  detachDeletedInstance(instance);
+}
+
+// -------------------
+//     Resources
+// -------------------
+
+export const supportsResources = true;
+
+type HoistableTagType = 'link' | 'meta' | 'title';
+type TResource<
+  T: 'stylesheet' | 'style' | 'script' | 'void',
+  S: null | {...},
+> = {
+  type: T,
+  instance: null | Instance,
+  count: number,
+  state: S,
+};
+type StylesheetResource = TResource<'stylesheet', StylesheetState>;
+type StyleTagResource = TResource<'style', null>;
+type StyleResource = StyleTagResource | StylesheetResource;
+type ScriptResource = TResource<'script', null>;
+type VoidResource = TResource<'void', null>;
+export type Resource = StyleResource | ScriptResource | VoidResource;
+
+type LoadingState = number;
+const NotLoaded = /*       */ 0b000;
+const Loaded = /*          */ 0b001;
+const Errored = /*         */ 0b010;
+const Settled = /*         */ 0b011;
+const Inserted = /*        */ 0b100;
+
+type StylesheetState = {
+  loading: LoadingState,
+  preload: null | HTMLLinkElement,
+};
+
+type StyleTagProps = {
+  'data-href': string,
+  'data-precedence': string,
+  [string]: mixed,
+};
+type StylesheetProps = {
+  rel: 'stylesheet',
+  href: string,
+  'data-precedence': string,
+  [string]: mixed,
+};
+
+type ScriptProps = {
+  src: string,
+  async: true,
+  [string]: mixed,
+};
+
+type PreloadProps = {
+  rel: 'preload',
+  href: ?string,
+  [string]: mixed,
+};
+type PreloadModuleProps = {
+  rel: 'modulepreload',
+  href: string,
+  [string]: mixed,
+};
+
+export type RootResources = {
+  hoistableStyles: Map<string, StyleResource>,
+  hoistableScripts: Map<string, ScriptResource>,
+};
+
+export function prepareToCommitHoistables() {
+  tagCaches = null;
+}
+
+// global collections of Resources
+const preloadPropsMap: Map<string, PreloadProps | PreloadModuleProps> =
+  new Map();
+const preconnectsSet: Set<string> = new Set();
+
+export type HoistableRoot = Document | ShadowRoot;
+
+// getRootNode is missing from IE and old jsdom versions
+export function getHoistableRoot(container: Container): HoistableRoot {
+  // $FlowFixMe[method-unbinding]
+  return typeof container.getRootNode === 'function'
+    ? /* $FlowFixMe[incompatible-cast] Flow types this as returning a `Node`,
+       * but it's either a `Document` or `ShadowRoot`. */
+      (container.getRootNode(): Document | ShadowRoot)
+    : container.nodeType === DOCUMENT_NODE
+      ? // $FlowFixMe[incompatible-cast] We've constrained this to be a Document which satisfies the return type
+        (container: Document)
+      : container.ownerDocument;
+}
+
+function getCurrentResourceRoot(): null | HoistableRoot {
+  const currentContainer = getCurrentRootHostContainer();
+  return currentContainer ? getHoistableRoot(currentContainer) : null;
+}
+
+function getDocumentFromRoot(root: HoistableRoot): Document {
+  return root.ownerDocument || root;
+}
+
+const previousDispatcher =
+  ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
+ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = {
+  f /* flushSyncWork */: disableLegacyMode
+    ? flushSyncWork
+    : previousDispatcher.f /* flushSyncWork */,
+  r: requestFormReset,
+  D /* prefetchDNS */: prefetchDNS,
+  C /* preconnect */: preconnect,
+  L /* preload */: preload,
+  m /* preloadModule */: preloadModule,
+  X /* preinitScript */: preinitScript,
+  S /* preinitStyle */: preinitStyle,
+  M /* preinitModuleScript */: preinitModuleScript,
+};
+
+function flushSyncWork() {
+  if (disableLegacyMode) {
+    const previousWasRendering = previousDispatcher.f(); /* flushSyncWork */
+    const wasRendering = flushSyncWorkOnAllRoots();
+    // Since multiple dispatchers can flush sync work during a single flushSync call
+    // we need to return true if any of them were rendering.
+    return previousWasRendering || wasRendering;
+  } else {
+    throw new Error(
+      'flushSyncWork should not be called from builds that support legacy mode. This is a bug in React.',
+    );
+  }
+}
+
+function requestFormReset(form: HTMLFormElement) {
+  const formInst = getInstanceFromNodeDOMTree(form);
+  if (
+    formInst !== null &&
+    formInst.tag === HostComponent &&
+    formInst.type === 'form'
+  ) {
+    requestFormResetOnFiber(formInst);
+  } else {
+    // This form was either not rendered by this React renderer (or it's an
+    // invalid type). Try the next one.
+    //
+    // The last implementation in the sequence will throw an error.
+    previousDispatcher.r(/* requestFormReset */ form);
+  }
+}
+
+// We expect this to get inlined. It is a function mostly to communicate the special nature of
+// how we resolve the HoistableRoot for ReactDOM.pre*() methods. Because we support calling
+// these methods outside of render there is no way to know which Document or ShadowRoot is 'scoped'
+// and so we have to fall back to something universal. Currently we just refer to the global document.
+// This is notable because nowhere else in ReactDOM do we actually reference the global document or window
+// because we may be rendering inside an iframe.
+const globalDocument = typeof document === 'undefined' ? null : document;
+function getGlobalDocument(): ?Document {
+  return globalDocument;
+}
+
+function preconnectAs(
+  rel: 'preconnect' | 'dns-prefetch',
+  href: string,
+  crossOrigin: ?CrossOriginEnum,
+) {
+  const ownerDocument = getGlobalDocument();
+  if (ownerDocument && typeof href === 'string' && href) {
+    const limitedEscapedHref =
+      escapeSelectorAttributeValueInsideDoubleQuotes(href);
+    let key = `link[rel="${rel}"][href="${limitedEscapedHref}"]`;
+    if (typeof crossOrigin === 'string') {
+      key += `[crossorigin="${crossOrigin}"]`;
+    }
+    if (!preconnectsSet.has(key)) {
+      preconnectsSet.add(key);
+
+      const preconnectProps = {rel, crossOrigin, href};
+      if (null === ownerDocument.querySelector(key)) {
+        const instance = ownerDocument.createElement('link');
+        setInitialProperties(instance, 'link', preconnectProps);
+        markNodeAsHoistable(instance);
+        (ownerDocument.head: any).appendChild(instance);
+      }
+    }
+  }
+}
+
+function prefetchDNS(href: string) {
+  previousDispatcher.D(/* prefetchDNS */ href);
+  preconnectAs('dns-prefetch', href, null);
+}
+
+function preconnect(href: string, crossOrigin?: ?CrossOriginEnum) {
+  previousDispatcher.C(/* preconnect */ href, crossOrigin);
+  preconnectAs('preconnect', href, crossOrigin);
+}
+
+function preload(href: string, as: string, options?: ?PreloadImplOptions) {
+  previousDispatcher.L(/* preload */ href, as, options);
+  const ownerDocument = getGlobalDocument();
+  if (ownerDocument && href && as) {
+    let preloadSelector = `link[rel="preload"][as="${escapeSelectorAttributeValueInsideDoubleQuotes(
+      as,
+    )}"]`;
+    if (as === 'image') {
+      if (options && options.imageSrcSet) {
+        preloadSelector += `[imagesrcset="${escapeSelectorAttributeValueInsideDoubleQuotes(
+          options.imageSrcSet,
+        )}"]`;
+        if (typeof options.imageSizes === 'string') {
+          preloadSelector += `[imagesizes="${escapeSelectorAttributeValueInsideDoubleQuotes(
+            options.imageSizes,
+          )}"]`;
+        }
+      } else {
+        preloadSelector += `[href="${escapeSelectorAttributeValueInsideDoubleQuotes(
+          href,
+        )}"]`;
+      }
+    } else {
+      preloadSelector += `[href="${escapeSelectorAttributeValueInsideDoubleQuotes(
+        href,
+      )}"]`;
+    }
+    // Some preloads are keyed under their selector. This happens when the preload is for
+    // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for.
+    // Here we figure out which key to use to determine if we have a preload already.
+    let key = preloadSelector;
+    switch (as) {
+      case 'style':
+        key = getStyleKey(href);
+        break;
+      case 'script':
+        key = getScriptKey(href);
+        break;
+    }
+    if (!preloadPropsMap.has(key)) {
+      const preloadProps = Object.assign(
+        ({
+          rel: 'preload',
+          // There is a bug in Safari where imageSrcSet is not respected on preload links
+          // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+          // This harms older browers that do not support imageSrcSet by making their preloads not work
+          // but this population is shrinking fast and is already small so we accept this tradeoff.
+          href:
+            as === 'image' && options && options.imageSrcSet ? undefined : href,
+          as,
+        }: PreloadProps),
+        options,
+      );
+      preloadPropsMap.set(key, preloadProps);
+
+      if (null === ownerDocument.querySelector(preloadSelector)) {
+        if (
+          as === 'style' &&
+          ownerDocument.querySelector(getStylesheetSelectorFromKey(key))
+        ) {
+          // We already have a stylesheet for this key. We don't need to preload it.
+          return;
+        } else if (
+          as === 'script' &&
+          ownerDocument.querySelector(getScriptSelectorFromKey(key))
+        ) {
+          // We already have a stylesheet for this key. We don't need to preload it.
+          return;
+        }
+        const instance = ownerDocument.createElement('link');
+        setInitialProperties(instance, 'link', preloadProps);
+        markNodeAsHoistable(instance);
+        (ownerDocument.head: any).appendChild(instance);
+      }
+    }
+  }
+}
+
+function preloadModule(href: string, options?: ?PreloadModuleImplOptions) {
+  previousDispatcher.m(/* preloadModule */ href, options);
+  const ownerDocument = getGlobalDocument();
+  if (ownerDocument && href) {
+    const as =
+      options && typeof options.as === 'string' ? options.as : 'script';
+    const preloadSelector = `link[rel="modulepreload"][as="${escapeSelectorAttributeValueInsideDoubleQuotes(
+      as,
+    )}"][href="${escapeSelectorAttributeValueInsideDoubleQuotes(href)}"]`;
+    // Some preloads are keyed under their selector. This happens when the preload is for
+    // an arbitrary type. Other preloads are keyed under the resource key they represent a preload for.
+    // Here we figure out which key to use to determine if we have a preload already.
+    let key = preloadSelector;
+    switch (as) {
+      case 'audioworklet':
+      case 'paintworklet':
+      case 'serviceworker':
+      case 'sharedworker':
+      case 'worker':
+      case 'script': {
+        key = getScriptKey(href);
+        break;
+      }
+    }
+
+    if (!preloadPropsMap.has(key)) {
+      const props: PreloadModuleProps = Object.assign(
+        ({
+          rel: 'modulepreload',
+          href,
+        }: PreloadModuleProps),
+        options,
+      );
+      preloadPropsMap.set(key, props);
+
+      if (null === ownerDocument.querySelector(preloadSelector)) {
+        switch (as) {
+          case 'audioworklet':
+          case 'paintworklet':
+          case 'serviceworker':
+          case 'sharedworker':
+          case 'worker':
+          case 'script': {
+            if (ownerDocument.querySelector(getScriptSelectorFromKey(key))) {
+              return;
+            }
+          }
+        }
+        const instance = ownerDocument.createElement('link');
+        setInitialProperties(instance, 'link', props);
+        markNodeAsHoistable(instance);
+        (ownerDocument.head: any).appendChild(instance);
+      }
+    }
+  }
+}
+
+function preinitStyle(
+  href: string,
+  precedence: ?string,
+  options?: ?PreinitStyleOptions,
+) {
+  previousDispatcher.S(/* preinitStyle */ href, precedence, options);
+
+  const ownerDocument = getGlobalDocument();
+  if (ownerDocument && href) {
+    const styles = getResourcesFromRoot(ownerDocument).hoistableStyles;
+
+    const key = getStyleKey(href);
+    precedence = precedence || 'default';
+
+    // Check if this resource already exists
+    let resource = styles.get(key);
+    if (resource) {
+      // We can early return. The resource exists and there is nothing
+      // more to do
+      return;
+    }
+
+    const state = {
+      loading: NotLoaded,
+      preload: null,
+    };
+
+    // Attempt to hydrate instance from DOM
+    let instance: null | Instance = ownerDocument.querySelector(
+      getStylesheetSelectorFromKey(key),
+    );
+    if (instance) {
+      state.loading = Loaded | Inserted;
+    } else {
+      // Construct a new instance and insert it
+      const stylesheetProps = Object.assign(
+        ({
+          rel: 'stylesheet',
+          href,
+          'data-precedence': precedence,
+        }: StylesheetProps),
+        options,
+      );
+      const preloadProps = preloadPropsMap.get(key);
+      if (preloadProps) {
+        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+      }
+      const link = (instance = ownerDocument.createElement('link'));
+      markNodeAsHoistable(link);
+      setInitialProperties(link, 'link', stylesheetProps);
+
+      (link: any)._p = new Promise((resolve, reject) => {
+        link.onload = resolve;
+        link.onerror = reject;
+      });
+      link.addEventListener('load', () => {
+        state.loading |= Loaded;
+      });
+      link.addEventListener('error', () => {
+        state.loading |= Errored;
+      });
+
+      state.loading |= Inserted;
+      insertStylesheet(instance, precedence, ownerDocument);
+    }
+
+    // Construct a Resource and cache it
+    resource = {
+      type: 'stylesheet',
+      instance,
+      count: 1,
+      state,
+    };
+    styles.set(key, resource);
+    return;
+  }
+}
+
+function preinitScript(src: string, options?: ?PreinitScriptOptions) {
+  previousDispatcher.X(/* preinitScript */ src, options);
+
+  const ownerDocument = getGlobalDocument();
+  if (ownerDocument && src) {
+    const scripts = getResourcesFromRoot(ownerDocument).hoistableScripts;
+
+    const key = getScriptKey(src);
+
+    // Check if this resource already exists
+    let resource = scripts.get(key);
+    if (resource) {
+      // We can early return. The resource exists and there is nothing
+      // more to do
+      return;
+    }
+
+    // Attempt to hydrate instance from DOM
+    let instance: null | Instance = ownerDocument.querySelector(
+      getScriptSelectorFromKey(key),
+    );
+    if (!instance) {
+      // Construct a new instance and insert it
+      const scriptProps = Object.assign(
+        ({
+          src,
+          async: true,
+        }: ScriptProps),
+        options,
+      );
+      // Adopt certain preload props
+      const preloadProps = preloadPropsMap.get(key);
+      if (preloadProps) {
+        adoptPreloadPropsForScript(scriptProps, preloadProps);
+      }
+      instance = ownerDocument.createElement('script');
+      markNodeAsHoistable(instance);
+      setInitialProperties(instance, 'link', scriptProps);
+      (ownerDocument.head: any).appendChild(instance);
+    }
+
+    // Construct a Resource and cache it
+    resource = {
+      type: 'script',
+      instance,
+      count: 1,
+      state: null,
+    };
+    scripts.set(key, resource);
+    return;
+  }
+}
+
+function preinitModuleScript(
+  src: string,
+  options?: ?PreinitModuleScriptOptions,
+) {
+  previousDispatcher.M(/* preinitModuleScript */ src, options);
+
+  const ownerDocument = getGlobalDocument();
+  if (ownerDocument && src) {
+    const scripts = getResourcesFromRoot(ownerDocument).hoistableScripts;
+
+    const key = getScriptKey(src);
+
+    // Check if this resource already exists
+    let resource = scripts.get(key);
+    if (resource) {
+      // We can early return. The resource exists and there is nothing
+      // more to do
+      return;
+    }
+
+    // Attempt to hydrate instance from DOM
+    let instance: null | Instance = ownerDocument.querySelector(
+      getScriptSelectorFromKey(key),
+    );
+    if (!instance) {
+      // Construct a new instance and insert it
+      const scriptProps = Object.assign(
+        ({
+          src,
+          async: true,
+          type: 'module',
+        }: ScriptProps),
+        options,
+      );
+      // Adopt certain preload props
+      const preloadProps = preloadPropsMap.get(key);
+      if (preloadProps) {
+        adoptPreloadPropsForScript(scriptProps, preloadProps);
+      }
+      instance = ownerDocument.createElement('script');
+      markNodeAsHoistable(instance);
+      setInitialProperties(instance, 'link', scriptProps);
+      (ownerDocument.head: any).appendChild(instance);
+    }
+
+    // Construct a Resource and cache it
+    resource = {
+      type: 'script',
+      instance,
+      count: 1,
+      state: null,
+    };
+    scripts.set(key, resource);
+    return;
+  }
+}
+
+type StyleTagQualifyingProps = {
+  href: string,
+  precedence: string,
+  [string]: mixed,
+};
+
+type StylesheetQualifyingProps = {
+  rel: 'stylesheet',
+  href: string,
+  precedence: string,
+  [string]: mixed,
+};
+
+// This function is called in begin work and we should always have a currentDocument set
+export function getResource(
+  type: string,
+  currentProps: any,
+  pendingProps: any,
+  currentResource: null | Resource,
+): null | Resource {
+  const resourceRoot = getCurrentResourceRoot();
+  if (!resourceRoot) {
+    throw new Error(
+      '"resourceRoot" was expected to exist. This is a bug in React.',
+    );
+  }
+  switch (type) {
+    case 'meta':
+    case 'title': {
+      return null;
+    }
+    case 'style': {
+      if (
+        typeof pendingProps.precedence === 'string' &&
+        typeof pendingProps.href === 'string'
+      ) {
+        const key = getStyleKey(pendingProps.href);
+        const styles = getResourcesFromRoot(resourceRoot).hoistableStyles;
+        let resource = styles.get(key);
+        if (!resource) {
+          resource = {
+            type: 'style',
+            instance: null,
+            count: 0,
+            state: null,
+          };
+          styles.set(key, resource);
+        }
+        return resource;
+      }
+      return {
+        type: 'void',
+        instance: null,
+        count: 0,
+        state: null,
+      };
+    }
+    case 'link': {
+      if (
+        pendingProps.rel === 'stylesheet' &&
+        typeof pendingProps.href === 'string' &&
+        typeof pendingProps.precedence === 'string'
+      ) {
+        const qualifiedProps: StylesheetQualifyingProps = pendingProps;
+        const key = getStyleKey(qualifiedProps.href);
+
+        const styles = getResourcesFromRoot(resourceRoot).hoistableStyles;
+
+        let resource = styles.get(key);
+        if (!resource) {
+          // We asserted this above but Flow can't figure out that the type satisfies
+          const ownerDocument = getDocumentFromRoot(resourceRoot);
+          resource = ({
+            type: 'stylesheet',
+            instance: null,
+            count: 0,
+            state: {
+              loading: NotLoaded,
+              preload: null,
+            },
+          }: StylesheetResource);
+          styles.set(key, resource);
+          const instance = ownerDocument.querySelector(
+            getStylesheetSelectorFromKey(key),
+          );
+          if (instance) {
+            const loadingState: ?Promise<mixed> = (instance: any)._p;
+            if (loadingState) {
+              // This instance is inserted as part of a boundary reveal and is not yet
+              // loaded
+            } else {
+              // This instance is already loaded
+              resource.instance = instance;
+              resource.state.loading = Loaded | Inserted;
+            }
+          }
+
+          if (!preloadPropsMap.has(key)) {
+            const preloadProps = preloadPropsFromStylesheet(qualifiedProps);
+            preloadPropsMap.set(key, preloadProps);
+            if (!instance) {
+              preloadStylesheet(
+                ownerDocument,
+                key,
+                preloadProps,
+                resource.state,
+              );
+            }
+          }
+        }
+        if (currentProps && currentResource === null) {
+          // This node was previously an Instance type and is becoming a Resource type
+          // For now we error because we don't support flavor changes
+          let diff = '';
+          if (__DEV__) {
+            diff = `
+
+  - ${describeLinkForResourceErrorDEV(currentProps)}
+  + ${describeLinkForResourceErrorDEV(pendingProps)}`;
+          }
+          throw new Error(
+            'Expected <link> not to update to be updated to a stylesheet with precedence.' +
+              ' Check the `rel`, `href`, and `precedence` props of this component.' +
+              ' Alternatively, check whether two different <link> components render in the same slot or share the same key.' +
+              diff,
+          );
+        }
+        return resource;
+      } else {
+        if (currentProps && currentResource !== null) {
+          // This node was previously a Resource type and is becoming an Instance type
+          // For now we error because we don't support flavor changes
+          let diff = '';
+          if (__DEV__) {
+            diff = `
+
+  - ${describeLinkForResourceErrorDEV(currentProps)}
+  + ${describeLinkForResourceErrorDEV(pendingProps)}`;
+          }
+          throw new Error(
+            'Expected stylesheet with precedence to not be updated to a different kind of <link>.' +
+              ' Check the `rel`, `href`, and `precedence` props of this component.' +
+              ' Alternatively, check whether two different <link> components render in the same slot or share the same key.' +
+              diff,
+          );
+        }
+        return null;
+      }
+    }
+    case 'script': {
+      const async = pendingProps.async;
+      const src = pendingProps.src;
+      if (
+        typeof src === 'string' &&
+        async &&
+        typeof async !== 'function' &&
+        typeof async !== 'symbol'
+      ) {
+        const key = getScriptKey(src);
+        const scripts = getResourcesFromRoot(resourceRoot).hoistableScripts;
+
+        let resource = scripts.get(key);
+        if (!resource) {
+          resource = {
+            type: 'script',
+            instance: null,
+            count: 0,
+            state: null,
+          };
+          scripts.set(key, resource);
+        }
+        return resource;
+      }
+      return {
+        type: 'void',
+        instance: null,
+        count: 0,
+        state: null,
+      };
+    }
+    default: {
+      throw new Error(
+        `getResource encountered a type it did not expect: "${type}". this is a bug in React.`,
+      );
+    }
+  }
+}
+
+function describeLinkForResourceErrorDEV(props: any) {
+  if (__DEV__) {
+    let describedProps = 0;
+
+    let description = '<link';
+    if (typeof props.rel === 'string') {
+      describedProps++;
+      description += ` rel="${props.rel}"`;
+    } else if (hasOwnProperty.call(props, 'rel')) {
+      describedProps++;
+      description += ` rel="${
+        props.rel === null ? 'null' : 'invalid type ' + typeof props.rel
+      }"`;
+    }
+    if (typeof props.href === 'string') {
+      describedProps++;
+      description += ` href="${props.href}"`;
+    } else if (hasOwnProperty.call(props, 'href')) {
+      describedProps++;
+      description += ` href="${
+        props.href === null ? 'null' : 'invalid type ' + typeof props.href
+      }"`;
+    }
+    if (typeof props.precedence === 'string') {
+      describedProps++;
+      description += ` precedence="${props.precedence}"`;
+    } else if (hasOwnProperty.call(props, 'precedence')) {
+      describedProps++;
+      description += ` precedence={${
+        props.precedence === null
+          ? 'null'
+          : 'invalid type ' + typeof props.precedence
+      }}`;
+    }
+    if (Object.getOwnPropertyNames(props).length > describedProps) {
+      description += ' ...';
+    }
+    description += ' />';
+    return description;
+  }
+  return '';
+}
+
+function styleTagPropsFromRawProps(
+  rawProps: StyleTagQualifyingProps,
+): StyleTagProps {
+  return {
+    ...rawProps,
+    'data-href': rawProps.href,
+    'data-precedence': rawProps.precedence,
+    href: null,
+    precedence: null,
+  };
+}
+
+function getStyleKey(href: string) {
+  const limitedEscapedHref =
+    escapeSelectorAttributeValueInsideDoubleQuotes(href);
+  return `href="${limitedEscapedHref}"`;
+}
+
+function getStyleTagSelector(href: string) {
+  const limitedEscapedHref =
+    escapeSelectorAttributeValueInsideDoubleQuotes(href);
+  return `style[data-href~="${limitedEscapedHref}"]`;
+}
+
+function getStylesheetSelectorFromKey(key: string) {
+  return `link[rel="stylesheet"][${key}]`;
+}
+
+function getPreloadStylesheetSelectorFromKey(key: string) {
+  return `link[rel="preload"][as="style"][${key}]`;
+}
+
+function stylesheetPropsFromRawProps(
+  rawProps: StylesheetQualifyingProps,
+): StylesheetProps {
+  return {
+    ...rawProps,
+    'data-precedence': rawProps.precedence,
+    precedence: null,
+  };
+}
+function preloadStylesheet(
+  ownerDocument: Document,
+  key: string,
+  preloadProps: PreloadProps,
+  state: StylesheetState,
+) {
+  const preloadEl = ownerDocument.querySelector(
+    getPreloadStylesheetSelectorFromKey(key),
+  );
+  if (preloadEl) {
+    // If we find a preload already it was SSR'd and we won't have an actual
+    // loading state to track. For now we will just assume it is loaded
+    state.loading = Loaded;
+  } else {
+    const instance = ownerDocument.createElement('link');
+    state.preload = instance;
+    instance.addEventListener('load', () => (state.loading |= Loaded));
+    instance.addEventListener('error', () => (state.loading |= Errored));
+    setInitialProperties(instance, 'link', preloadProps);
+    markNodeAsHoistable(instance);
+    (ownerDocument.head: any).appendChild(instance);
+  }
+}
+
+function preloadPropsFromStylesheet(
+  props: StylesheetQualifyingProps,
+): PreloadProps {
+  return {
+    rel: 'preload',
+    as: 'style',
+    href: props.href,
+    crossOrigin: props.crossOrigin,
+    integrity: props.integrity,
+    media: props.media,
+    hrefLang: props.hrefLang,
+    referrerPolicy: props.referrerPolicy,
+  };
+}
+
+function getScriptKey(src: string): string {
+  const limitedEscapedSrc = escapeSelectorAttributeValueInsideDoubleQuotes(src);
+  return `[src="${limitedEscapedSrc}"]`;
+}
+
+function getScriptSelectorFromKey(key: string): string {
+  return 'script[async]' + key;
+}
+
+export function acquireResource(
+  hoistableRoot: HoistableRoot,
+  resource: Resource,
+  props: any,
+): null | Instance {
+  resource.count++;
+  if (resource.instance === null) {
+    switch (resource.type) {
+      case 'style': {
+        const qualifiedProps: StyleTagQualifyingProps = props;
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getStyleTagSelector(qualifiedProps.href),
+        );
+        if (instance) {
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return instance;
+        }
+
+        const styleProps = styleTagPropsFromRawProps(props);
+        const ownerDocument = getDocumentFromRoot(hoistableRoot);
+        instance = ownerDocument.createElement('style');
+
+        markNodeAsHoistable(instance);
+        setInitialProperties(instance, 'style', styleProps);
+
+        // TODO: `style` does not have loading state for tracking insertions. I
+        // guess because these aren't suspensey? Not sure whether this is a
+        // factoring smell.
+        // resource.state.loading |= Inserted;
+        insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
+        resource.instance = instance;
+
+        return instance;
+      }
+      case 'stylesheet': {
+        // This typing is enforce by `getResource`. If we change the logic
+        // there for what qualifies as a stylesheet resource we need to ensure
+        // this cast still makes sense;
+        const qualifiedProps: StylesheetQualifyingProps = props;
+        const key = getStyleKey(qualifiedProps.href);
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key),
+        );
+        if (instance) {
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return instance;
+        }
+
+        const stylesheetProps = stylesheetPropsFromRawProps(props);
+        const preloadProps = preloadPropsMap.get(key);
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        }
+
+        // Construct and insert a new instance
+        const ownerDocument = getDocumentFromRoot(hoistableRoot);
+        instance = ownerDocument.createElement('link');
+        markNodeAsHoistable(instance);
+        const linkInstance: HTMLLinkElement = (instance: any);
+        (linkInstance: any)._p = new Promise((resolve, reject) => {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, 'link', stylesheetProps);
+        resource.state.loading |= Inserted;
+        insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
+        resource.instance = instance;
+
+        return instance;
+      }
+      case 'script': {
+        // This typing is enforce by `getResource`. If we change the logic
+        // there for what qualifies as a stylesheet resource we need to ensure
+        // this cast still makes sense;
+        const borrowedScriptProps: ScriptProps = props;
+        const key = getScriptKey(borrowedScriptProps.src);
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getScriptSelectorFromKey(key),
+        );
+        if (instance) {
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return instance;
+        }
+
+        let scriptProps = borrowedScriptProps;
+        const preloadProps = preloadPropsMap.get(key);
+        if (preloadProps) {
+          scriptProps = {...borrowedScriptProps};
+          adoptPreloadPropsForScript(scriptProps, preloadProps);
+        }
+
+        // Construct and insert a new instance
+        const ownerDocument = getDocumentFromRoot(hoistableRoot);
+        instance = ownerDocument.createElement('script');
+        markNodeAsHoistable(instance);
+        setInitialProperties(instance, 'link', scriptProps);
+        (ownerDocument.head: any).appendChild(instance);
+        resource.instance = instance;
+
+        return instance;
+      }
+      case 'void': {
+        return null;
+      }
+      default: {
+        throw new Error(
+          `acquireResource encountered a resource type it did not expect: "${resource.type}". this is a bug in React.`,
+        );
+      }
+    }
+  } else {
+    // In the case of stylesheets, they might have already been assigned an
+    // instance during `suspendResource`. But that doesn't mean they were
+    // inserted, because the commit might have been interrupted. So we need to
+    // check now.
+    //
+    // The other resource types are unaffected because they are not
+    // yet suspensey.
+    //
+    // TODO: This is a bit of a code smell. Consider refactoring how
+    // `suspendResource` and `acquireResource` work together. The idea is that
+    // `suspendResource` does all the same stuff as `acquireResource` except
+    // for the insertion.
+    if (
+      resource.type === 'stylesheet' &&
+      (resource.state.loading & Inserted) === NotLoaded
+    ) {
+      const qualifiedProps: StylesheetQualifyingProps = props;
+      const instance: Instance = resource.instance;
+      resource.state.loading |= Inserted;
+      insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
+    }
+  }
+  return resource.instance;
+}
+
+export function releaseResource(resource: Resource): void {
+  resource.count--;
+}
+
+function insertStylesheet(
+  instance: Element,
+  precedence: string,
+  root: HoistableRoot,
+): void {
+  const nodes = root.querySelectorAll(
+    'link[rel="stylesheet"][data-precedence],style[data-precedence]',
+  );
+  const last = nodes.length ? nodes[nodes.length - 1] : null;
+  let prior = last;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    // $FlowFixMe[prop-missing]
+    const nodePrecedence = node.dataset.precedence;
+    if (nodePrecedence === precedence) {
+      prior = node;
+    } else if (prior !== last) {
+      break;
+    }
+  }
+
+  if (prior) {
+    // We get the prior from the document so we know it is in the tree.
+    // We also know that links can't be the topmost Node so the parentNode
+    // must exist.
+    ((prior.parentNode: any): Node).insertBefore(instance, prior.nextSibling);
+  } else {
+    const parent =
+      root.nodeType === DOCUMENT_NODE
+        ? ((((root: any): Document).head: any): Element)
+        : ((root: any): ShadowRoot);
+    parent.insertBefore(instance, parent.firstChild);
+  }
+}
+
+function adoptPreloadPropsForStylesheet(
+  stylesheetProps: StylesheetProps,
+  preloadProps: PreloadProps | PreloadModuleProps,
+): void {
+  if (stylesheetProps.crossOrigin == null)
+    stylesheetProps.crossOrigin = preloadProps.crossOrigin;
+  if (stylesheetProps.referrerPolicy == null)
+    stylesheetProps.referrerPolicy = preloadProps.referrerPolicy;
+  if (stylesheetProps.title == null) stylesheetProps.title = preloadProps.title;
+}
+
+function adoptPreloadPropsForScript(
+  scriptProps: ScriptProps,
+  preloadProps: PreloadProps | PreloadModuleProps,
+): void {
+  if (scriptProps.crossOrigin == null)
+    scriptProps.crossOrigin = preloadProps.crossOrigin;
+  if (scriptProps.referrerPolicy == null)
+    scriptProps.referrerPolicy = preloadProps.referrerPolicy;
+  if (scriptProps.integrity == null)
+    scriptProps.integrity = preloadProps.integrity;
+}
+
+type KeyedTagCache = Map<string, Array<Element>>;
+type DocumentTagCaches = Map<Document, KeyedTagCache>;
+let tagCaches: null | DocumentTagCaches = null;
+
+export function hydrateHoistable(
+  hoistableRoot: HoistableRoot,
+  type: HoistableTagType,
+  props: any,
+  internalInstanceHandle: Object,
+): Instance {
+  const ownerDocument = getDocumentFromRoot(hoistableRoot);
+
+  let instance: ?Instance = null;
+  getInstance: switch (type) {
+    case 'title': {
+      instance = ownerDocument.getElementsByTagName('title')[0];
+      if (
+        !instance ||
+        isOwnedInstance(instance) ||
+        instance.namespaceURI === SVG_NAMESPACE ||
+        instance.hasAttribute('itemprop')
+      ) {
+        instance = ownerDocument.createElement(type);
+        (ownerDocument.head: any).insertBefore(
+          instance,
+          ownerDocument.querySelector('head > title'),
+        );
+      }
+      setInitialProperties(instance, type, props);
+      precacheFiberNode(internalInstanceHandle, instance);
+      markNodeAsHoistable(instance);
+      return instance;
+    }
+    case 'link': {
+      const cache = getHydratableHoistableCache('link', 'href', ownerDocument);
+      const key = type + (props.href || '');
+      const maybeNodes = cache.get(key);
+      if (maybeNodes) {
+        const nodes = maybeNodes;
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i];
+          if (
+            node.getAttribute('href') !==
+              (props.href == null || props.href === '' ? null : props.href) ||
+            node.getAttribute('rel') !==
+              (props.rel == null ? null : props.rel) ||
+            node.getAttribute('title') !==
+              (props.title == null ? null : props.title) ||
+            node.getAttribute('crossorigin') !==
+              (props.crossOrigin == null ? null : props.crossOrigin)
+          ) {
+            // mismatch, try the next node;
+            continue;
+          }
+          instance = node;
+          nodes.splice(i, 1);
+          break getInstance;
+        }
+      }
+      instance = ownerDocument.createElement(type);
+      setInitialProperties(instance, type, props);
+      (ownerDocument.head: any).appendChild(instance);
+      break;
+    }
+    case 'meta': {
+      const cache = getHydratableHoistableCache(
+        'meta',
+        'content',
+        ownerDocument,
+      );
+      const key = type + (props.content || '');
+      const maybeNodes = cache.get(key);
+      if (maybeNodes) {
+        const nodes = maybeNodes;
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i];
+
+          // We coerce content to string because it is the most likely one to
+          // use a `toString` capable value. For the rest we just do identity match
+          // passing non-strings here is not really valid anyway.
+          if (__DEV__) {
+            checkAttributeStringCoercion(props.content, 'content');
+          }
+          if (
+            node.getAttribute('content') !==
+              (props.content == null ? null : '' + props.content) ||
+            node.getAttribute('name') !==
+              (props.name == null ? null : props.name) ||
+            node.getAttribute('property') !==
+              (props.property == null ? null : props.property) ||
+            node.getAttribute('http-equiv') !==
+              (props.httpEquiv == null ? null : props.httpEquiv) ||
+            node.getAttribute('charset') !==
+              (props.charSet == null ? null : props.charSet)
+          ) {
+            // mismatch, try the next node;
+            continue;
+          }
+          instance = node;
+          nodes.splice(i, 1);
+          break getInstance;
+        }
+      }
+      instance = ownerDocument.createElement(type);
+      setInitialProperties(instance, type, props);
+      (ownerDocument.head: any).appendChild(instance);
+      break;
+    }
+    default:
+      throw new Error(
+        `getNodesForType encountered a type it did not expect: "${type}". This is a bug in React.`,
+      );
+  }
+
+  // This node is a match
+  precacheFiberNode(internalInstanceHandle, instance);
+  markNodeAsHoistable(instance);
+  return instance;
+}
+
+function getHydratableHoistableCache(
+  type: HoistableTagType,
+  keyAttribute: string,
+  ownerDocument: Document,
+): KeyedTagCache {
+  let cache: KeyedTagCache;
+  let caches: DocumentTagCaches;
+  if (tagCaches === null) {
+    cache = new Map();
+    caches = tagCaches = new Map();
+    caches.set(ownerDocument, cache);
+  } else {
+    caches = tagCaches;
+    const maybeCache = caches.get(ownerDocument);
+    if (!maybeCache) {
+      cache = new Map();
+      caches.set(ownerDocument, cache);
+    } else {
+      cache = maybeCache;
+    }
+  }
+
+  if (cache.has(type)) {
+    // We use type as a special key that signals that this cache has been seeded for this type
+    return cache;
+  }
+
+  // Mark this cache as seeded for this type
+  cache.set(type, (null: any));
+
+  const nodes = ownerDocument.getElementsByTagName(type);
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (
+      !isOwnedInstance(node) &&
+      (type !== 'link' || node.getAttribute('rel') !== 'stylesheet') &&
+      node.namespaceURI !== SVG_NAMESPACE
+    ) {
+      const nodeKey = node.getAttribute(keyAttribute) || '';
+      const key = type + nodeKey;
+      const existing = cache.get(key);
+      if (existing) {
+        existing.push(node);
+      } else {
+        cache.set(key, [node]);
+      }
+    }
+  }
+
+  return cache;
+}
+
+export function mountHoistable(
+  hoistableRoot: HoistableRoot,
+  type: HoistableTagType,
+  instance: Instance,
+): void {
+  const ownerDocument = getDocumentFromRoot(hoistableRoot);
+  (ownerDocument.head: any).insertBefore(
+    instance,
+    type === 'title' ? ownerDocument.querySelector('head > title') : null,
+  );
+}
+
+export function unmountHoistable(instance: Instance): void {
+  (instance.parentNode: any).removeChild(instance);
+}
+
+export function isHostHoistableType(
+  type: string,
+  props: RawProps,
+  hostContext: HostContext,
+): boolean {
+  let outsideHostContainerContext: boolean;
+  let hostContextProd: HostContextProd;
+  if (__DEV__) {
+    const hostContextDev: HostContextDev = (hostContext: any);
+    // We can only render resources when we are not within the host container context
+    outsideHostContainerContext =
+      !hostContextDev.ancestorInfo.containerTagInScope;
+    hostContextProd = hostContextDev.context;
+  } else {
+    hostContextProd = (hostContext: any);
+  }
+
+  // Global opt out of hoisting for anything in SVG Namespace or anything with an itemProp inside an itemScope
+  if (hostContextProd === HostContextNamespaceSvg || props.itemProp != null) {
+    if (__DEV__) {
+      if (
+        outsideHostContainerContext &&
+        props.itemProp != null &&
+        (type === 'meta' ||
+          type === 'title' ||
+          type === 'style' ||
+          type === 'link' ||
+          type === 'script')
+      ) {
+        console.error(
+          'Cannot render a <%s> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an' +
+            ' `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <%s> remove the `itemProp` prop.' +
+            ' Otherwise, try moving this tag into the <head> or <body> of the Document.',
+          type,
+          type,
+        );
+      }
+    }
+    return false;
+  }
+
+  switch (type) {
+    case 'meta':
+    case 'title': {
+      return true;
+    }
+    case 'style': {
+      if (
+        typeof props.precedence !== 'string' ||
+        typeof props.href !== 'string' ||
+        props.href === ''
+      ) {
+        if (__DEV__) {
+          if (outsideHostContainerContext) {
+            console.error(
+              'Cannot render a <style> outside the main document without knowing its precedence and a unique href key.' +
+                ' React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that' +
+                ' does not conflict with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags. ' +
+                ' Note that hoisting <style> tags is considered an advanced feature that most will not use directly.' +
+                ' Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`.',
+            );
+          }
+        }
+        return false;
+      }
+      return true;
+    }
+    case 'link': {
+      if (
+        typeof props.rel !== 'string' ||
+        typeof props.href !== 'string' ||
+        props.href === '' ||
+        props.onLoad ||
+        props.onError
+      ) {
+        if (__DEV__) {
+          if (
+            props.rel === 'stylesheet' &&
+            typeof props.precedence === 'string'
+          ) {
+            validateLinkPropsForStyleResource(props);
+          }
+          if (outsideHostContainerContext) {
+            if (
+              typeof props.rel !== 'string' ||
+              typeof props.href !== 'string' ||
+              props.href === ''
+            ) {
+              console.error(
+                'Cannot render a <link> outside the main document without a `rel` and `href` prop.' +
+                  ' Try adding a `rel` and/or `href` prop to this <link> or moving the link into the <head> tag',
+              );
+            } else if (props.onError || props.onLoad) {
+              console.error(
+                'Cannot render a <link> with onLoad or onError listeners outside the main document.' +
+                  ' Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or' +
+                  ' somewhere in the <body>.',
+              );
+            }
+          }
+        }
+        return false;
+      }
+      switch (props.rel) {
+        case 'stylesheet': {
+          const {precedence, disabled} = props;
+          if (__DEV__) {
+            if (typeof precedence !== 'string') {
+              if (outsideHostContainerContext) {
+                console.error(
+                  'Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence.' +
+                    ' Consider adding precedence="default" or moving it into the root <head> tag.',
+                );
+              }
+            }
+          }
+          return typeof precedence === 'string' && disabled == null;
+        }
+        default: {
+          return true;
+        }
+      }
+    }
+    case 'script': {
+      const isAsync =
+        props.async &&
+        typeof props.async !== 'function' &&
+        typeof props.async !== 'symbol';
+      if (
+        !isAsync ||
+        props.onLoad ||
+        props.onError ||
+        !props.src ||
+        typeof props.src !== 'string'
+      ) {
+        if (__DEV__) {
+          if (outsideHostContainerContext) {
+            if (!isAsync) {
+              console.error(
+                'Cannot render a sync or defer <script> outside the main document without knowing its order.' +
+                  ' Try adding async="" or moving it into the root <head> tag.',
+              );
+            } else if (props.onLoad || props.onError) {
+              console.error(
+                'Cannot render a <script> with onLoad or onError listeners outside the main document.' +
+                  ' Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or' +
+                  ' somewhere in the <body>.',
+              );
+            } else {
+              console.error(
+                'Cannot render a <script> outside the main document without `async={true}` and a non-empty `src` prop.' +
+                  ' Ensure there is a valid `src` and either make the script async or move it into the root <head> tag or' +
+                  ' somewhere in the <body>.',
+              );
+            }
+          }
+        }
+        return false;
+      }
+      return true;
+    }
+    case 'noscript':
+    case 'template': {
+      if (__DEV__) {
+        if (outsideHostContainerContext) {
+          console.error(
+            'Cannot render <%s> outside the main document. Try moving it into the root <head> tag.',
+            type,
+          );
+        }
+      }
+      return false;
+    }
+  }
+  return false;
+}
+
+export function maySuspendCommit(type: Type, props: Props): boolean {
+  if (!enableSuspenseyImages && !enableViewTransition) {
+    return false;
+  }
+  // Suspensey images are the default, unless you opt-out of with either
+  // loading="lazy" or onLoad={...} which implies you're ok waiting.
+  return (
+    type === 'img' &&
+    props.src != null &&
+    props.src !== '' &&
+    props.onLoad == null &&
+    props.loading !== 'lazy'
+  );
+}
+
+export function maySuspendCommitOnUpdate(
+  type: Type,
+  oldProps: Props,
+  newProps: Props,
+): boolean {
+  return (
+    maySuspendCommit(type, newProps) &&
+    (newProps.src !== oldProps.src || newProps.srcSet !== oldProps.srcSet)
+  );
+}
+
+export function maySuspendCommitInSyncRender(
+  type: Type,
+  props: Props,
+): boolean {
+  // TODO: Allow sync lanes to suspend too with an opt-in.
+  return false;
+}
+
+export function mayResourceSuspendCommit(resource: Resource): boolean {
+  return (
+    resource.type === 'stylesheet' &&
+    (resource.state.loading & Inserted) === NotLoaded
+  );
+}
+
+export function preloadInstance(
+  instance: Instance,
+  type: Type,
+  props: Props,
+): boolean {
+  // We don't need to preload Suspensey images because the browser will
+  // load them early once we set the src.
+  // If we return true here, we'll still get a suspendInstance call in the
+  // pre-commit phase to determine if we still need to decode the image or
+  // if was dropped from cache. This just avoids rendering Suspense fallback.
+  return !!(instance: any).complete;
+}
+
+export function preloadResource(resource: Resource): boolean {
+  if (
+    resource.type === 'stylesheet' &&
+    (resource.state.loading & Settled) === NotLoaded
+  ) {
+    // Return false to indicate this resource should suspend
+    return false;
+  }
+
+  // Return true to indicate this resource should not suspend
+  return true;
+}
+
+export opaque type SuspendedState = {
+  stylesheets: null | Map<StylesheetResource, HoistableRoot>,
+  count: number, // suspensey css and active view transitions
+  imgCount: number, // suspensey images pending to load
+  imgBytes: number, // number of bytes we estimate needing to download
+  suspenseyImages: Array<HTMLImageElement>, // instances of suspensey images (whether loaded or not)
+  waitingForImages: boolean, // false when we're no longer blocking on images
+  waitingForViewTransition: boolean,
+  unsuspend: null | (() => void),
+};
+
+export function startSuspendingCommit(): SuspendedState {
+  return {
+    stylesheets: null,
+    count: 0,
+    imgCount: 0,
+    imgBytes: 0,
+    suspenseyImages: [],
+    waitingForImages: true,
+    waitingForViewTransition: false,
+    // We use a noop function when we begin suspending because if possible we want the
+    // waitfor step to finish synchronously. If it doesn't we'll return a function to
+    // provide the actual unsuspend function and that will get completed when the count
+    // hits zero or it will get cancelled if the root starts new work.
+    unsuspend: noop,
+  };
+}
+
+function estimateImageBytes(instance: HTMLImageElement): number {
+  const width: number = instance.width || 100;
+  const height: number = instance.height || 100;
+  const pixelRatio: number =
+    typeof devicePixelRatio === 'number' ? devicePixelRatio : 1;
+  const pixelsToDownload = width * height * pixelRatio;
+  const AVERAGE_BYTE_PER_PIXEL = 0.25;
+  return pixelsToDownload * AVERAGE_BYTE_PER_PIXEL;
+}
+
+export function suspendInstance(
+  state: SuspendedState,
+  instance: Instance,
+  type: Type,
+  props: Props,
+): void {
+  if (!enableSuspenseyImages && !enableViewTransition) {
+    return;
+  }
+  if (
+    // $FlowFixMe[prop-missing]
+    typeof instance.decode === 'function'
+  ) {
+    // If this browser supports decode() API, we use it to suspend waiting on the image.
+    // The loading should have already started at this point, so it should be enough to
+    // just call decode() which should also wait for the data to finish loading.
+    state.imgCount++;
+    // Estimate the byte size that we're about to download based on the width/height
+    // specified in the props. This is best practice to know ahead of time but if it's
+    // unspecified we'll fallback to a guess of 100x100 pixels.
+    if (!(instance: any).complete) {
+      state.imgBytes += estimateImageBytes((instance: any));
+      state.suspenseyImages.push((instance: any));
+    }
+    const ping = onUnsuspendImg.bind(state);
+    // $FlowFixMe[prop-missing]
+    instance.decode().then(ping, ping);
+  }
+}
+
+export function suspendResource(
+  state: SuspendedState,
+  hoistableRoot: HoistableRoot,
+  resource: Resource,
+  props: any,
+): void {
+  if (resource.type === 'stylesheet') {
+    if (typeof props.media === 'string') {
+      // If we don't currently match media we avoid suspending on this resource
+      // and let it insert on the mutation path
+      if (matchMedia(props.media).matches === false) {
+        return;
+      }
+    }
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        const qualifiedProps: StylesheetQualifyingProps = props;
+        const key = getStyleKey(qualifiedProps.href);
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key),
+        );
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          const maybeLoadingState: ?Promise<mixed> = (instance: any)._p;
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === 'object' &&
+            // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === 'function'
+          ) {
+            const loadingState = maybeLoadingState;
+            state.count++;
+            const ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
+        }
+
+        const ownerDocument = getDocumentFromRoot(hoistableRoot);
+
+        const stylesheetProps = stylesheetPropsFromRawProps(props);
+        const preloadProps = preloadPropsMap.get(key);
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        }
+
+        // Construct and insert a new instance
+        instance = ownerDocument.createElement('link');
+        markNodeAsHoistable(instance);
+        const linkInstance: HTMLLinkElement = (instance: any);
+        // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
+        (linkInstance: any)._p = new Promise((resolve, reject) => {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, 'link', stylesheetProps);
+        resource.instance = instance;
+      }
+
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
+      state.stylesheets.set(resource, hoistableRoot);
+
+      const preloadEl = resource.state.preload;
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
+        const ping = onUnsuspend.bind(state);
+        preloadEl.addEventListener('load', ping);
+        preloadEl.addEventListener('error', ping);
+      }
+    }
+  }
+}
+
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  rootContainer: Container,
+): void {
+  const ownerDocument =
+    rootContainer.nodeType === DOCUMENT_NODE
+      ? rootContainer
+      : rootContainer.ownerDocument;
+  // $FlowFixMe[prop-missing]
+  const activeViewTransition = ownerDocument.__reactViewTransition;
+  if (activeViewTransition == null) {
+    return;
+  }
+  state.count++;
+  state.waitingForViewTransition = true;
+  const ping = onUnsuspend.bind(state);
+  activeViewTransition.finished.then(ping, ping);
+}
+
+const SUSPENSEY_STYLESHEET_TIMEOUT = 60000;
+
+const SUSPENSEY_IMAGE_TIMEOUT = 800;
+
+const SUSPENSEY_IMAGE_TIME_ESTIMATE = 500;
+
+let estimatedBytesWithinLimit: number = 0;
+
+export function waitForCommitToBeReady(
+  state: SuspendedState,
+  timeoutOffset: number,
+): null | ((() => void) => () => void) {
+  if (state.stylesheets && state.count === 0) {
+    // We are not currently blocked but we have not inserted all stylesheets.
+    // If this insertion happens and loads or errors synchronously then we can
+    // avoid suspending the commit. To do this we check the count again immediately after
+    insertSuspendedStylesheets(state, state.stylesheets);
+  }
+
+  // We need to check the count again because the inserted stylesheets may have led to new
+  // tasks to wait on.
+  if (state.count > 0 || state.imgCount > 0) {
+    return commit => {
+      // We almost never want to show content before its styles have loaded. But
+      // eventually we will give up and allow unstyled content. So this number is
+      // somewhat arbitrary — big enough that you'd only reach it under
+      // extreme circumstances.
+      // TODO: Figure out what the browser engines do during initial page load and
+      // consider aligning our behavior with that.
+      const stylesheetTimer = setTimeout(() => {
+        if (state.stylesheets) {
+          insertSuspendedStylesheets(state, state.stylesheets);
+        }
+        if (state.unsuspend) {
+          const unsuspend = state.unsuspend;
+          state.unsuspend = null;
+          unsuspend();
+        }
+      }, SUSPENSEY_STYLESHEET_TIMEOUT + timeoutOffset);
+
+      if (state.imgBytes > 0 && estimatedBytesWithinLimit === 0) {
+        // Estimate how many bytes we can download in 500ms.
+        const mbps = estimateBandwidth();
+        estimatedBytesWithinLimit = mbps * 125 * SUSPENSEY_IMAGE_TIME_ESTIMATE;
+      }
+      // If we have more images to download than we expect to fit in the timeout, then
+      // don't wait for images longer than 50ms. The 50ms lets us still do decoding and
+      // hitting caches if it turns out that they're already in the HTTP cache.
+      const imgTimeout =
+        state.imgBytes > estimatedBytesWithinLimit
+          ? 50
+          : SUSPENSEY_IMAGE_TIMEOUT;
+      const imgTimer = setTimeout(() => {
+        // We're no longer blocked on images. If CSS resolves after this we can commit.
+        state.waitingForImages = false;
+        if (state.count === 0) {
+          if (state.stylesheets) {
+            insertSuspendedStylesheets(state, state.stylesheets);
+          }
+          if (state.unsuspend) {
+            const unsuspend = state.unsuspend;
+            state.unsuspend = null;
+            unsuspend();
+          }
+        }
+      }, imgTimeout + timeoutOffset);
+
+      state.unsuspend = commit;
+
+      return () => {
+        state.unsuspend = null;
+        clearTimeout(stylesheetTimer);
+        clearTimeout(imgTimer);
+      };
+    };
+  }
+  return null;
+}
+
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  if (state.waitingForViewTransition) {
+    return 'Waiting for the previous Animation';
+  }
+  if (state.count > 0) {
+    if (state.imgCount > 0) {
+      return 'Suspended on CSS and Images';
+    }
+    return 'Suspended on CSS';
+  }
+  if (state.imgCount === 1) {
+    return 'Suspended on an Image';
+  }
+  if (state.imgCount > 0) {
+    return 'Suspended on Images';
+  }
+  return null;
+}
+
+function checkIfFullyUnsuspended(state: SuspendedState) {
+  if (state.count === 0 && (state.imgCount === 0 || !state.waitingForImages)) {
+    if (state.stylesheets) {
+      // If we haven't actually inserted the stylesheets yet we need to do so now before starting the commit.
+      // The reason we do this after everything else has finished is because we want to have all the stylesheets
+      // load synchronously right before mutating. Ideally the new styles will cause a single recalc only on the
+      // new tree. When we filled up stylesheets we only inlcuded stylesheets with matching media attributes so we
+      // wait for them to load before actually continuing. We expect this to increase the count above zero
+      insertSuspendedStylesheets(state, state.stylesheets);
+    } else if (state.unsuspend) {
+      const unsuspend = state.unsuspend;
+      state.unsuspend = null;
+      unsuspend();
+    }
+  }
+}
+
+function onUnsuspend(this: SuspendedState) {
+  this.count--;
+  checkIfFullyUnsuspended(this);
+}
+
+function onUnsuspendImg(this: SuspendedState) {
+  this.imgCount--;
+  checkIfFullyUnsuspended(this);
+}
+
+// We use a value that is type distinct from precedence to track which one is last.
+// This ensures there is no collision with user defined precedences. Normally we would
+// just track this in module scope but since the precedences are tracked per HoistableRoot
+// we need to associate it to something other than a global scope hence why we try to
+// colocate it with the map of precedences in the first place
+const LAST_PRECEDENCE = null;
+
+// This is typecast to non-null because it will always be set before read.
+// it is important that this not be used except when the stack guarantees it exists.
+// Currentlyt his is only during insertSuspendedStylesheet.
+let precedencesByRoot: Map<
+  HoistableRoot,
+  Map<string | typeof LAST_PRECEDENCE, Instance>,
+> = (null: any);
+
+function insertSuspendedStylesheets(
+  state: SuspendedState,
+  resources: Map<StylesheetResource, HoistableRoot>,
+): void {
+  // We need to clear this out so we don't try to reinsert after the stylesheets have loaded
+  state.stylesheets = null;
+
+  if (state.unsuspend === null) {
+    // The suspended commit was cancelled. We don't need to insert any stylesheets.
+    return;
+  }
+
+  // Temporarily increment count. we don't want any synchronously loaded stylesheets to try to unsuspend
+  // before we finish inserting all stylesheets.
+  state.count++;
+
+  precedencesByRoot = new Map();
+  resources.forEach(insertStylesheetIntoRoot, state);
+  precedencesByRoot = (null: any);
+
+  // We can remove our temporary count and if we're still at zero we can unsuspend.
+  // If we are in the synchronous phase before deciding if the commit should suspend and this
+  // ends up hitting the unsuspend path it will just invoke the noop unsuspend.
+  onUnsuspend.call(state);
+}
+
+function insertStylesheetIntoRoot(
+  this: SuspendedState,
+  root: HoistableRoot,
+  resource: StylesheetResource,
+  map: Map<StylesheetResource, HoistableRoot>,
+) {
+  if (resource.state.loading & Inserted) {
+    // This resource was inserted by another root committing. we don't need to insert it again
+    return;
+  }
+
+  let last;
+  let precedences = precedencesByRoot.get(root);
+  if (!precedences) {
+    precedences = new Map();
+    precedencesByRoot.set(root, precedences);
+    const nodes = root.querySelectorAll(
+      'link[data-precedence],style[data-precedence]',
+    );
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (
+        node.nodeName === 'LINK' ||
+        // We omit style tags with media="not all" because they are not in the right position
+        // and will be hoisted by the Fizz runtime imminently.
+        node.getAttribute('media') !== 'not all'
+      ) {
+        precedences.set(
+          // $FlowFixMe[prop-missing]
+          node.dataset.precedence,
+          node,
+        );
+        last = node;
+      }
+    }
+    if (last) {
+      precedences.set(LAST_PRECEDENCE, last);
+    }
+  } else {
+    last = precedences.get(LAST_PRECEDENCE);
+  }
+
+  // We only call this after we have constructed an instance so we assume it here
+  const instance: HTMLLinkElement = (resource.instance: any);
+  // We will always have a precedence for stylesheet instances
+  const precedence: string = (instance.getAttribute('data-precedence'): any);
+
+  const prior = precedences.get(precedence) || last;
+  if (prior === last) {
+    precedences.set(LAST_PRECEDENCE, instance);
+  }
+  precedences.set(precedence, instance);
+
+  this.count++;
+  const onComplete = onUnsuspend.bind(this);
+  instance.addEventListener('load', onComplete);
+  instance.addEventListener('error', onComplete);
+
+  if (prior) {
+    (prior.parentNode: any).insertBefore(instance, prior.nextSibling);
+  } else {
+    const parent =
+      root.nodeType === DOCUMENT_NODE
+        ? ((((root: any): Document).head: any): Element)
+        : ((root: any): ShadowRoot);
+    parent.insertBefore(instance, parent.firstChild);
+  }
+  resource.state.loading |= Inserted;
+}
+
+export const NotPendingTransition: TransitionStatus = NotPending;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
+
+export type FormInstance = HTMLFormElement;
+export function resetFormInstance(form: FormInstance): void {
+  form.reset();
+}
diff --git a/packages/react-dom-bindings/src/client/ReactInputSelection.js b/packages/react-dom-bindings/src/client/ReactInputSelection.js
new file mode 100644
index 00000000000..36cdc554f0f
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ReactInputSelection.js
@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import getActiveElement from './getActiveElement';
+
+import {getOffsets, setOffsets} from './ReactDOMSelection';
+import {ELEMENT_NODE, TEXT_NODE} from './HTMLNodeType';
+
+function isTextNode(node) {
+  return node && node.nodeType === TEXT_NODE;
+}
+
+function containsNode(outerNode, innerNode) {
+  if (!outerNode || !innerNode) {
+    return false;
+  } else if (outerNode === innerNode) {
+    return true;
+  } else if (isTextNode(outerNode)) {
+    return false;
+  } else if (isTextNode(innerNode)) {
+    return containsNode(outerNode, innerNode.parentNode);
+  } else if ('contains' in outerNode) {
+    return outerNode.contains(innerNode);
+  } else if (outerNode.compareDocumentPosition) {
+    return !!(outerNode.compareDocumentPosition(innerNode) & 16);
+  } else {
+    return false;
+  }
+}
+
+function isInDocument(node) {
+  return (
+    node &&
+    node.ownerDocument &&
+    containsNode(node.ownerDocument.documentElement, node)
+  );
+}
+
+function isSameOriginFrame(iframe) {
+  try {
+    // Accessing the contentDocument of a HTMLIframeElement can cause the browser
+    // to throw, e.g. if it has a cross-origin src attribute.
+    // Safari will show an error in the console when the access results in "Blocked a frame with origin". e.g:
+    // iframe.contentDocument.defaultView;
+    // A safety way is to access one of the cross origin properties: Window or Location
+    // Which might result in "SecurityError" DOM Exception and it is compatible to Safari.
+    // https://html.spec.whatwg.org/multipage/browsers.html#integration-with-idl
+
+    return typeof iframe.contentWindow.location.href === 'string';
+  } catch (err) {
+    return false;
+  }
+}
+
+function getActiveElementDeep(containerInfo) {
+  let win =
+    containerInfo != null &&
+    containerInfo.ownerDocument != null &&
+    containerInfo.ownerDocument.defaultView != null
+      ? containerInfo.ownerDocument.defaultView
+      : window;
+  let element = getActiveElement(win.document);
+  while (element instanceof win.HTMLIFrameElement) {
+    if (isSameOriginFrame(element)) {
+      win = element.contentWindow;
+    } else {
+      return element;
+    }
+    element = getActiveElement(win.document);
+  }
+  return element;
+}
+
+/**
+ * @ReactInputSelection: React input selection module. Based on Selection.js,
+ * but modified to be suitable for react and has a couple of bug fixes (doesn't
+ * assume buttons have range selections allowed).
+ * Input selection module for React.
+ */
+
+/**
+ * @hasSelectionCapabilities: we get the element types that support selection
+ * from https://html.spec.whatwg.org/#do-not-apply, looking at `selectionStart`
+ * and `selectionEnd` rows.
+ */
+export function hasSelectionCapabilities(elem) {
+  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+  return (
+    nodeName &&
+    ((nodeName === 'input' &&
+      (elem.type === 'text' ||
+        elem.type === 'search' ||
+        elem.type === 'tel' ||
+        elem.type === 'url' ||
+        elem.type === 'password')) ||
+      nodeName === 'textarea' ||
+      elem.contentEditable === 'true')
+  );
+}
+
+export function getSelectionInformation(containerInfo) {
+  const focusedElem = getActiveElementDeep(containerInfo);
+  return {
+    focusedElem: focusedElem,
+    selectionRange: hasSelectionCapabilities(focusedElem)
+      ? getSelection(focusedElem)
+      : null,
+  };
+}
+
+/**
+ * @restoreSelection: If any selection information was potentially lost,
+ * restore it. This is useful when performing operations that could remove dom
+ * nodes and place them back in, resulting in focus being lost.
+ */
+export function restoreSelection(priorSelectionInformation, containerInfo) {
+  const curFocusedElem = getActiveElementDeep(containerInfo);
+  const priorFocusedElem = priorSelectionInformation.focusedElem;
+  const priorSelectionRange = priorSelectionInformation.selectionRange;
+  if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
+    if (
+      priorSelectionRange !== null &&
+      hasSelectionCapabilities(priorFocusedElem)
+    ) {
+      setSelection(priorFocusedElem, priorSelectionRange);
+    }
+
+    // Focusing a node can change the scroll position, which is undesirable
+    const ancestors = [];
+    let ancestor = priorFocusedElem;
+    while ((ancestor = ancestor.parentNode)) {
+      if (ancestor.nodeType === ELEMENT_NODE) {
+        ancestors.push({
+          element: ancestor,
+          left: ancestor.scrollLeft,
+          top: ancestor.scrollTop,
+        });
+      }
+    }
+
+    if (typeof priorFocusedElem.focus === 'function') {
+      priorFocusedElem.focus();
+    }
+
+    for (let i = 0; i < ancestors.length; i++) {
+      const info = ancestors[i];
+      info.element.scrollLeft = info.left;
+      info.element.scrollTop = info.top;
+    }
+  }
+}
+
+/**
+ * @getSelection: Gets the selection bounds of a focused textarea, input or
+ * contentEditable node.
+ * -@input: Look up selection bounds of this input
+ * -@return {start: selectionStart, end: selectionEnd}
+ */
+export function getSelection(input) {
+  let selection;
+
+  if ('selectionStart' in input) {
+    // Modern browser with input or textarea.
+    selection = {
+      start: input.selectionStart,
+      end: input.selectionEnd,
+    };
+  } else {
+    // Content editable or old IE textarea.
+    selection = getOffsets(input);
+  }
+
+  return selection || {start: 0, end: 0};
+}
+
+/**
+ * @setSelection: Sets the selection bounds of a textarea or input and focuses
+ * the input.
+ * -@input     Set selection bounds of this input or textarea
+ * -@offsets   Object of same form that is returned from get*
+ */
+export function setSelection(input, offsets) {
+  const start = offsets.start;
+  let end = offsets.end;
+  if (end === undefined) {
+    end = start;
+  }
+
+  if ('selectionStart' in input) {
+    input.selectionStart = start;
+    input.selectionEnd = Math.min(end, input.value.length);
+  } else {
+    setOffsets(input, offsets);
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/ToStringValue.js b/packages/react-dom-bindings/src/client/ToStringValue.js
new file mode 100644
index 00000000000..46708f2f769
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/ToStringValue.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+
+export opaque type ToStringValue =
+  | boolean
+  | number
+  | bigint
+  | Object
+  | string
+  | null
+  | void;
+
+// Flow does not allow string concatenation of most non-string types. To work
+// around this limitation, we use an opaque type that can only be obtained by
+// passing the value through getToStringValue first.
+export function toString(value: ToStringValue): string {
+  // The coercion safety check is performed in getToStringValue().
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  return '' + (value: any);
+}
+
+export function getToStringValue(value: mixed): ToStringValue {
+  switch (typeof value) {
+    case 'bigint':
+    case 'boolean':
+    case 'number':
+    case 'string':
+    case 'undefined':
+      return value;
+    case 'object':
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
+      return value;
+    default:
+      // function, symbol are assigned as empty strings
+      return '';
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/escapeSelectorAttributeValueInsideDoubleQuotes.js b/packages/react-dom-bindings/src/client/escapeSelectorAttributeValueInsideDoubleQuotes.js
new file mode 100644
index 00000000000..47c0db23c7b
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/escapeSelectorAttributeValueInsideDoubleQuotes.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// When passing user input into querySelector(All) the embedded string must not alter
+// the semantics of the query. This escape function is safe to use when we know the
+// provided value is going to be wrapped in double quotes as part of an attribute selector
+// Do not use it anywhere else
+// we escape double quotes and backslashes
+const escapeSelectorAttributeValueInsideDoubleQuotesRegex = /[\n\"\\]/g;
+export default function escapeSelectorAttributeValueInsideDoubleQuotes(
+  value: string,
+): string {
+  return value.replace(
+    escapeSelectorAttributeValueInsideDoubleQuotesRegex,
+    ch => '\\' + ch.charCodeAt(0).toString(16) + ' ',
+  );
+}
diff --git a/packages/react-dom-bindings/src/client/estimateBandwidth.js b/packages/react-dom-bindings/src/client/estimateBandwidth.js
new file mode 100644
index 00000000000..4b143a5b562
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/estimateBandwidth.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isLikelyStaticResource(initiatorType: string) {
+  switch (initiatorType) {
+    case 'css':
+    case 'script':
+    case 'font':
+    case 'img':
+    case 'image':
+    case 'input':
+    case 'link':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export default function estimateBandwidth(): number {
+  // Estimate the current bandwidth for downloading static resources given resources already
+  // loaded.
+  // $FlowFixMe[method-unbinding]
+  if (typeof performance.getEntriesByType === 'function') {
+    let count = 0;
+    let bits = 0;
+    const resourceEntries = performance.getEntriesByType('resource');
+    for (let i = 0; i < resourceEntries.length; i++) {
+      const entry = resourceEntries[i];
+      // $FlowFixMe[prop-missing]
+      const transferSize: number = entry.transferSize;
+      // $FlowFixMe[prop-missing]
+      const initiatorType: string = entry.initiatorType;
+      const duration = entry.duration;
+      if (
+        !transferSize ||
+        !duration ||
+        !isLikelyStaticResource(initiatorType)
+      ) {
+        // Skip cached, cross-orgin entries and resources likely to be dynamically generated.
+        continue;
+      }
+      // Find any overlapping entries that were transferring at the same time since the total
+      // bps at the time will include those bytes.
+      let overlappingBytes = 0;
+      // $FlowFixMe[prop-missing]
+      const parentEndTime: number = entry.responseEnd;
+      let j;
+      for (j = i + 1; j < resourceEntries.length; j++) {
+        const overlapEntry = resourceEntries[j];
+        const overlapStartTime = overlapEntry.startTime;
+        if (overlapStartTime > parentEndTime) {
+          break;
+        }
+        // $FlowFixMe[prop-missing]
+        const overlapTransferSize: number = overlapEntry.transferSize;
+        // $FlowFixMe[prop-missing]
+        const overlapInitiatorType: string = overlapEntry.initiatorType;
+        if (
+          !overlapTransferSize ||
+          !isLikelyStaticResource(overlapInitiatorType)
+        ) {
+          // Skip cached, cross-orgin entries and resources likely to be dynamically generated.
+          continue;
+        }
+        // $FlowFixMe[prop-missing]
+        const overlapEndTime: number = overlapEntry.responseEnd;
+        const overlapFactor =
+          overlapEndTime < parentEndTime
+            ? 1
+            : (parentEndTime - overlapStartTime) /
+              (overlapEndTime - overlapStartTime);
+        overlappingBytes += overlapTransferSize * overlapFactor;
+      }
+      // Skip past any entries we already considered overlapping. Otherwise we'd have to go
+      // back to consider previous entries when we then handled them.
+      i = j - 1;
+
+      const bps =
+        ((transferSize + overlappingBytes) * 8) / (entry.duration / 1000);
+      bits += bps;
+      count++;
+      if (count > 10) {
+        // We have enough to get an average.
+        break;
+      }
+    }
+    if (count > 0) {
+      return bits / count / 1e6;
+    }
+  }
+
+  // Fallback to the navigator.connection estimate if available
+  // $FlowFixMe[prop-missing]
+  if (navigator.connection) {
+    // $FlowFixMe
+    const downlink: ?number = navigator.connection.downlink;
+    if (typeof downlink === 'number') {
+      return downlink;
+    }
+  }
+
+  // Otherwise, use a default of 5mbps to compute heuristics.
+  // This can happen commonly in Safari if all static resources and images are loaded
+  // cross-orgin.
+  return 5;
+}
diff --git a/packages/react-dom-bindings/src/client/getActiveElement.js b/packages/react-dom-bindings/src/client/getActiveElement.js
new file mode 100644
index 00000000000..81c40aefd4b
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/getActiveElement.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 getActiveElement(doc: ?Document): ?Element {
+  doc = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (typeof doc === 'undefined') {
+    return null;
+  }
+  try {
+    return doc.activeElement || doc.body;
+  } catch (e) {
+    return doc.body;
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/getNodeForCharacterOffset.js b/packages/react-dom-bindings/src/client/getNodeForCharacterOffset.js
new file mode 100644
index 00000000000..9dcdd1407a9
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/getNodeForCharacterOffset.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {TEXT_NODE} from './HTMLNodeType';
+
+/**
+ * Given any node return the first leaf node without children.
+ *
+ * @param {DOMElement|DOMTextNode} node
+ * @return {DOMElement|DOMTextNode}
+ */
+function getLeafNode(node: ?(Node | Element)) {
+  while (node && node.firstChild) {
+    node = node.firstChild;
+  }
+  return node;
+}
+
+/**
+ * Get the next sibling within a container. This will walk up the
+ * DOM if a node's siblings have been exhausted.
+ *
+ * @param {DOMElement|DOMTextNode} node
+ * @return {?DOMElement|DOMTextNode}
+ */
+function getSiblingNode(node: ?(Node | Element)) {
+  while (node) {
+    if (node.nextSibling) {
+      return node.nextSibling;
+    }
+    node = node.parentNode;
+  }
+}
+
+/**
+ * Get object describing the nodes which contain characters at offset.
+ *
+ * @param {DOMElement|DOMTextNode} root
+ * @param {number} offset
+ * @return {?object}
+ */
+function getNodeForCharacterOffset(root: Element, offset: number): ?Object {
+  let node = getLeafNode(root);
+  let nodeStart = 0;
+  let nodeEnd = 0;
+
+  while (node) {
+    if (node.nodeType === TEXT_NODE) {
+      nodeEnd = nodeStart + node.textContent.length;
+
+      if (nodeStart <= offset && nodeEnd >= offset) {
+        return {
+          node: node,
+          offset: offset - nodeStart,
+        };
+      }
+
+      nodeStart = nodeEnd;
+    }
+
+    node = getLeafNode(getSiblingNode(node));
+  }
+}
+
+export default getNodeForCharacterOffset;
diff --git a/packages/react-dom-bindings/src/client/inputValueTracking.js b/packages/react-dom-bindings/src/client/inputValueTracking.js
new file mode 100644
index 00000000000..e931283e602
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/inputValueTracking.js
@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+
+type ValueTracker = {
+  getValue(): string,
+  setValue(value: string): void,
+  stopTracking(): void,
+};
+interface ElementWithValueTracker extends HTMLInputElement {
+  _valueTracker?: ?ValueTracker;
+}
+
+function isCheckable(elem: HTMLInputElement) {
+  const type = elem.type;
+  const nodeName = elem.nodeName;
+  return (
+    nodeName &&
+    nodeName.toLowerCase() === 'input' &&
+    (type === 'checkbox' || type === 'radio')
+  );
+}
+
+function getTracker(node: ElementWithValueTracker) {
+  return node._valueTracker;
+}
+
+function detachTracker(node: ElementWithValueTracker) {
+  node._valueTracker = null;
+}
+
+function getValueFromNode(node: HTMLInputElement): string {
+  let value = '';
+  if (!node) {
+    return value;
+  }
+
+  if (isCheckable(node)) {
+    value = node.checked ? 'true' : 'false';
+  } else {
+    value = node.value;
+  }
+
+  return value;
+}
+
+function trackValueOnNode(
+  node: any,
+  valueField: 'checked' | 'value',
+  currentValue: string,
+): ?ValueTracker {
+  const descriptor = Object.getOwnPropertyDescriptor(
+    node.constructor.prototype,
+    valueField,
+  );
+
+  // if someone has already defined a value or Safari, then bail
+  // and don't track value will cause over reporting of changes,
+  // but it's better then a hard failure
+  // (needed for certain tests that spyOn input values and Safari)
+  if (
+    node.hasOwnProperty(valueField) ||
+    typeof descriptor === 'undefined' ||
+    typeof descriptor.get !== 'function' ||
+    typeof descriptor.set !== 'function'
+  ) {
+    return;
+  }
+  const {get, set} = descriptor;
+  Object.defineProperty(node, valueField, {
+    configurable: true,
+    // $FlowFixMe[missing-this-annot]
+    get: function () {
+      return get.call(this);
+    },
+    // $FlowFixMe[missing-local-annot]
+    // $FlowFixMe[missing-this-annot]
+    set: function (value) {
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
+      currentValue = '' + value;
+      set.call(this, value);
+    },
+  });
+  // We could've passed this the first time
+  // but it triggers a bug in IE11 and Edge 14/15.
+  // Calling defineProperty() again should be equivalent.
+  // https://github.com/facebook/react/issues/11768
+  Object.defineProperty(node, valueField, {
+    enumerable: descriptor.enumerable,
+  });
+
+  const tracker = {
+    getValue() {
+      return currentValue;
+    },
+    setValue(value: string) {
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
+      currentValue = '' + value;
+    },
+    stopTracking() {
+      detachTracker(node);
+      delete node[valueField];
+    },
+  };
+  return tracker;
+}
+
+export function track(node: ElementWithValueTracker) {
+  if (getTracker(node)) {
+    return;
+  }
+
+  const valueField = isCheckable(node) ? 'checked' : 'value';
+  // This is read from the DOM so always safe to coerce. We really shouldn't
+  // be coercing to a string at all. It's just historical.
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  const initialValue = '' + (node[valueField]: any);
+  node._valueTracker = trackValueOnNode(node, valueField, initialValue);
+}
+
+export function trackHydrated(
+  node: ElementWithValueTracker,
+  initialValue: string,
+  initialChecked: boolean,
+): boolean {
+  // For hydration, the initial value is not the current value but the value
+  // that we last observed which is what the initial server render was.
+  if (getTracker(node)) {
+    return false;
+  }
+
+  let valueField: 'checked' | 'value';
+  let expectedValue;
+  if (isCheckable(node)) {
+    valueField = 'checked';
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    expectedValue = '' + (initialChecked: any);
+  } else {
+    valueField = 'value';
+    expectedValue = initialValue;
+  }
+  const currentValue =
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    '' +
+    (// $FlowFixMe[prop-missing]
+    node[valueField]: any);
+  node._valueTracker = trackValueOnNode(node, valueField, expectedValue);
+  return currentValue !== expectedValue;
+}
+
+export function updateValueIfChanged(node: ElementWithValueTracker): boolean {
+  if (!node) {
+    return false;
+  }
+
+  const tracker = getTracker(node);
+  // if there is no tracker at this point it's unlikely
+  // that trying again will succeed
+  if (!tracker) {
+    return true;
+  }
+
+  const lastValue = tracker.getValue();
+  const nextValue = getValueFromNode(node);
+  if (nextValue !== lastValue) {
+    tracker.setValue(nextValue);
+    return true;
+  }
+  return false;
+}
+
+export function stopTracking(node: ElementWithValueTracker) {
+  const tracker = getTracker(node);
+  if (tracker) {
+    tracker.stopTracking();
+  }
+}
diff --git a/packages/react-dom-bindings/src/client/setTextContent.js b/packages/react-dom-bindings/src/client/setTextContent.js
new file mode 100644
index 00000000000..12d1f6f82bb
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/setTextContent.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {TEXT_NODE} from './HTMLNodeType';
+
+/**
+ * Set the textContent property of a node. For text updates, it's faster
+ * to set the `nodeValue` of the Text node directly instead of using
+ * `.textContent` which will remove the existing node and create a new one.
+ *
+ * @param {DOMElement} node
+ * @param {string} text
+ * @internal
+ */
+function setTextContent(node: Element, text: string): void {
+  if (text) {
+    const firstChild = node.firstChild;
+
+    if (
+      firstChild &&
+      firstChild === node.lastChild &&
+      firstChild.nodeType === TEXT_NODE
+    ) {
+      firstChild.nodeValue = text;
+      return;
+    }
+  }
+  node.textContent = text;
+}
+
+export default setTextContent;
diff --git a/packages/react-dom-bindings/src/client/validateDOMNesting.js b/packages/react-dom-bindings/src/client/validateDOMNesting.js
new file mode 100644
index 00000000000..47aef9353ba
--- /dev/null
+++ b/packages/react-dom-bindings/src/client/validateDOMNesting.js
@@ -0,0 +1,693 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {HydrationDiffNode} from 'react-reconciler/src/ReactFiberHydrationDiffs';
+
+import {
+  current,
+  runWithFiberInDEV,
+} from 'react-reconciler/src/ReactCurrentFiber';
+import {
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+} from 'react-reconciler/src/ReactWorkTags';
+
+import {describeDiff} from 'react-reconciler/src/ReactFiberHydrationDiffs';
+
+function describeAncestors(
+  ancestor: Fiber,
+  child: Fiber,
+  props: null | {children: null},
+): string {
+  let fiber: null | Fiber = child;
+  let node: null | HydrationDiffNode = null;
+  let distanceFromLeaf = 0;
+  while (fiber) {
+    if (fiber === ancestor) {
+      distanceFromLeaf = 0;
+    }
+    node = {
+      fiber: fiber,
+      children: node !== null ? [node] : [],
+      serverProps:
+        fiber === child ? props : fiber === ancestor ? null : undefined,
+      serverTail: [],
+      distanceFromLeaf: distanceFromLeaf,
+    };
+    distanceFromLeaf++;
+    fiber = fiber.return;
+  }
+  if (node !== null) {
+    // Describe the node using the hydration diff logic.
+    // Replace + with - to mark ancestor and child. It's kind of arbitrary.
+    return describeDiff(node).replaceAll(/^[+-]/gm, '>');
+  }
+  return '';
+}
+
+type Info = {tag: string};
+export type AncestorInfoDev = {
+  current: ?Info,
+
+  formTag: ?Info,
+  aTagInScope: ?Info,
+  buttonTagInScope: ?Info,
+  nobrTagInScope: ?Info,
+  pTagInButtonScope: ?Info,
+
+  listItemTagAutoclosing: ?Info,
+  dlItemTagAutoclosing: ?Info,
+
+  // <head> or <body>
+  containerTagInScope: ?Info,
+  implicitRootScope: boolean,
+};
+
+// This validation code was written based on the HTML5 parsing spec:
+// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
+//
+// Note: this does not catch all invalid nesting, nor does it try to (as it's
+// not clear what practical benefit doing so provides); instead, we warn only
+// for cases where the parser will give a parse tree differing from what React
+// intended. For example, <b><div></div></b> is invalid but we don't warn
+// because it still parses correctly; we do warn for other cases like nested
+// <p> tags where the beginning of the second element implicitly closes the
+// first, causing a confusing mess.
+
+// https://html.spec.whatwg.org/multipage/syntax.html#special
+const specialTags = [
+  'address',
+  'applet',
+  'area',
+  'article',
+  'aside',
+  'base',
+  'basefont',
+  'bgsound',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'caption',
+  'center',
+  'col',
+  'colgroup',
+  'dd',
+  'details',
+  'dir',
+  'div',
+  'dl',
+  'dt',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'frame',
+  'frameset',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'head',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'iframe',
+  'img',
+  'input',
+  'isindex',
+  'li',
+  'link',
+  'listing',
+  'main',
+  'marquee',
+  'menu',
+  'menuitem',
+  'meta',
+  'nav',
+  'noembed',
+  'noframes',
+  'noscript',
+  'object',
+  'ol',
+  'p',
+  'param',
+  'plaintext',
+  'pre',
+  'script',
+  'section',
+  'select',
+  'source',
+  'style',
+  'summary',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'title',
+  'tr',
+  'track',
+  'ul',
+  'wbr',
+  'xmp',
+];
+
+// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
+const inScopeTags = [
+  'applet',
+  'caption',
+  'html',
+  'table',
+  'td',
+  'th',
+  'marquee',
+  'object',
+  'template',
+
+  // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point
+  // TODO: Distinguish by namespace here -- for <title>, including it here
+  // errs on the side of fewer warnings
+  'foreignObject',
+  'desc',
+  'title',
+];
+
+// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope
+const buttonScopeTags = __DEV__ ? inScopeTags.concat(['button']) : [];
+
+// https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags
+const impliedEndTags = [
+  'dd',
+  'dt',
+  'li',
+  'option',
+  'optgroup',
+  'p',
+  'rp',
+  'rt',
+];
+
+const emptyAncestorInfoDev: AncestorInfoDev = {
+  current: null,
+
+  formTag: null,
+  aTagInScope: null,
+  buttonTagInScope: null,
+  nobrTagInScope: null,
+  pTagInButtonScope: null,
+
+  listItemTagAutoclosing: null,
+  dlItemTagAutoclosing: null,
+
+  containerTagInScope: null,
+  implicitRootScope: false,
+};
+
+function updatedAncestorInfoDev(
+  oldInfo: null | AncestorInfoDev,
+  tag: string,
+): AncestorInfoDev {
+  if (__DEV__) {
+    const ancestorInfo = {...(oldInfo || emptyAncestorInfoDev)};
+    const info = {tag};
+
+    if (inScopeTags.indexOf(tag) !== -1) {
+      ancestorInfo.aTagInScope = null;
+      ancestorInfo.buttonTagInScope = null;
+      ancestorInfo.nobrTagInScope = null;
+    }
+    if (buttonScopeTags.indexOf(tag) !== -1) {
+      ancestorInfo.pTagInButtonScope = null;
+    }
+
+    if (
+      specialTags.indexOf(tag) !== -1 &&
+      tag !== 'address' &&
+      tag !== 'div' &&
+      tag !== 'p'
+    ) {
+      // See rules for 'li', 'dd', 'dt' start tags in
+      // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
+      ancestorInfo.listItemTagAutoclosing = null;
+      ancestorInfo.dlItemTagAutoclosing = null;
+    }
+
+    ancestorInfo.current = info;
+
+    if (tag === 'form') {
+      ancestorInfo.formTag = info;
+    }
+    if (tag === 'a') {
+      ancestorInfo.aTagInScope = info;
+    }
+    if (tag === 'button') {
+      ancestorInfo.buttonTagInScope = info;
+    }
+    if (tag === 'nobr') {
+      ancestorInfo.nobrTagInScope = info;
+    }
+    if (tag === 'p') {
+      ancestorInfo.pTagInButtonScope = info;
+    }
+    if (tag === 'li') {
+      ancestorInfo.listItemTagAutoclosing = info;
+    }
+    if (tag === 'dd' || tag === 'dt') {
+      ancestorInfo.dlItemTagAutoclosing = info;
+    }
+    if (tag === '#document' || tag === 'html') {
+      ancestorInfo.containerTagInScope = null;
+    } else if (!ancestorInfo.containerTagInScope) {
+      ancestorInfo.containerTagInScope = info;
+    }
+
+    if (
+      oldInfo === null &&
+      (tag === '#document' || tag === 'html' || tag === 'body')
+    ) {
+      // While <head> is also a singleton we don't want to support semantics where
+      // you can escape the head by rendering a body singleton so we treat it like a normal scope
+      ancestorInfo.implicitRootScope = true;
+    } else if (ancestorInfo.implicitRootScope === true) {
+      ancestorInfo.implicitRootScope = false;
+    }
+
+    return ancestorInfo;
+  } else {
+    return (null: any);
+  }
+}
+
+/**
+ * Returns whether
+ */
+function isTagValidWithParent(
+  tag: string,
+  parentTag: ?string,
+  implicitRootScope: boolean,
+): boolean {
+  // First, let's check if we're in an unusual parsing mode...
+  switch (parentTag) {
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
+    case 'select':
+      return (
+        tag === 'hr' ||
+        tag === 'option' ||
+        tag === 'optgroup' ||
+        tag === 'script' ||
+        tag === 'template' ||
+        tag === '#text'
+      );
+    case 'optgroup':
+      return tag === 'option' || tag === '#text';
+    // Strictly speaking, seeing an <option> doesn't mean we're in a <select>
+    // but
+    case 'option':
+      return tag === '#text';
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
+    // No special behavior since these rules fall back to "in body" mode for
+    // all except special table nodes which cause bad parsing behavior anyway.
+
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr
+    case 'tr':
+      return (
+        tag === 'th' ||
+        tag === 'td' ||
+        tag === 'style' ||
+        tag === 'script' ||
+        tag === 'template'
+      );
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
+    case 'tbody':
+    case 'thead':
+    case 'tfoot':
+      return (
+        tag === 'tr' ||
+        tag === 'style' ||
+        tag === 'script' ||
+        tag === 'template'
+      );
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
+    case 'colgroup':
+      return tag === 'col' || tag === 'template';
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
+    case 'table':
+      return (
+        tag === 'caption' ||
+        tag === 'colgroup' ||
+        tag === 'tbody' ||
+        tag === 'tfoot' ||
+        tag === 'thead' ||
+        tag === 'style' ||
+        tag === 'script' ||
+        tag === 'template'
+      );
+    // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
+    case 'head':
+      return (
+        tag === 'base' ||
+        tag === 'basefont' ||
+        tag === 'bgsound' ||
+        tag === 'link' ||
+        tag === 'meta' ||
+        tag === 'title' ||
+        tag === 'noscript' ||
+        tag === 'noframes' ||
+        tag === 'style' ||
+        tag === 'script' ||
+        tag === 'template'
+      );
+    // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
+    case 'html':
+      if (implicitRootScope) {
+        // When our parent tag is html and we're in the root scope we will actually
+        // insert most tags into the body so we need to fall through to validating
+        // the specific tag with "in body" parsing mode below
+        break;
+      }
+      return tag === 'head' || tag === 'body' || tag === 'frameset';
+    case 'frameset':
+      return tag === 'frame';
+    case '#document':
+      if (implicitRootScope) {
+        // When our parent is the Document and we're in the root scope we will actually
+        // insert most tags into the body so we need to fall through to validating
+        // the specific tag with "in body" parsing mode below
+        break;
+      }
+      return tag === 'html';
+  }
+
+  // Probably in the "in body" parsing mode, so we outlaw only tag combos
+  // where the parsing rules cause implicit opens or closes to be added.
+  // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
+  switch (tag) {
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+      return (
+        parentTag !== 'h1' &&
+        parentTag !== 'h2' &&
+        parentTag !== 'h3' &&
+        parentTag !== 'h4' &&
+        parentTag !== 'h5' &&
+        parentTag !== 'h6'
+      );
+
+    case 'rp':
+    case 'rt':
+      return impliedEndTags.indexOf(parentTag) === -1;
+
+    case 'caption':
+    case 'col':
+    case 'colgroup':
+    case 'frameset':
+    case 'frame':
+    case 'tbody':
+    case 'td':
+    case 'tfoot':
+    case 'th':
+    case 'thead':
+    case 'tr':
+      // These tags are only valid with a few parents that have special child
+      // parsing rules -- if we're down here, then none of those matched and
+      // so we allow it only if we don't know what the parent is, as all other
+      // cases are invalid.
+      return parentTag == null;
+    case 'head':
+      // We support rendering <head> in the root when the container is
+      // #document, <html>, or <body>.
+      return implicitRootScope || parentTag === null;
+    case 'html':
+      // We support rendering <html> in the root when the container is
+      // #document
+      return (
+        (implicitRootScope && parentTag === '#document') || parentTag === null
+      );
+    case 'body':
+      // We support rendering <body> in the root when the container is
+      // #document or <html>
+      return (
+        (implicitRootScope &&
+          (parentTag === '#document' || parentTag === 'html')) ||
+        parentTag === null
+      );
+  }
+
+  return true;
+}
+
+/**
+ * Returns whether
+ */
+function findInvalidAncestorForTag(
+  tag: string,
+  ancestorInfo: AncestorInfoDev,
+): ?Info {
+  switch (tag) {
+    case 'address':
+    case 'article':
+    case 'aside':
+    case 'blockquote':
+    case 'center':
+    case 'details':
+    case 'dialog':
+    case 'dir':
+    case 'div':
+    case 'dl':
+    case 'fieldset':
+    case 'figcaption':
+    case 'figure':
+    case 'footer':
+    case 'header':
+    case 'hgroup':
+    case 'main':
+    case 'menu':
+    case 'nav':
+    case 'ol':
+    case 'p':
+    case 'section':
+    case 'summary':
+    case 'ul':
+    case 'pre':
+    case 'listing':
+    case 'table':
+    case 'hr':
+    case 'xmp':
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+      return ancestorInfo.pTagInButtonScope;
+
+    case 'form':
+      return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope;
+
+    case 'li':
+      return ancestorInfo.listItemTagAutoclosing;
+
+    case 'dd':
+    case 'dt':
+      return ancestorInfo.dlItemTagAutoclosing;
+
+    case 'button':
+      return ancestorInfo.buttonTagInScope;
+
+    case 'a':
+      // Spec says something about storing a list of markers, but it sounds
+      // equivalent to this check.
+      return ancestorInfo.aTagInScope;
+
+    case 'nobr':
+      return ancestorInfo.nobrTagInScope;
+  }
+
+  return null;
+}
+
+const didWarn: {[string]: boolean} = {};
+
+function findAncestor(parent: null | Fiber, tagName: string): null | Fiber {
+  while (parent) {
+    switch (parent.tag) {
+      case HostComponent:
+      case HostHoistable:
+      case HostSingleton:
+        if (parent.type === tagName) {
+          return parent;
+        }
+    }
+    parent = parent.return;
+  }
+  return null;
+}
+
+function validateDOMNesting(
+  childTag: string,
+  ancestorInfo: AncestorInfoDev,
+): boolean {
+  if (__DEV__) {
+    ancestorInfo = ancestorInfo || emptyAncestorInfoDev;
+    const parentInfo = ancestorInfo.current;
+    const parentTag = parentInfo && parentInfo.tag;
+
+    const invalidParent = isTagValidWithParent(
+      childTag,
+      parentTag,
+      ancestorInfo.implicitRootScope,
+    )
+      ? null
+      : parentInfo;
+    const invalidAncestor = invalidParent
+      ? null
+      : findInvalidAncestorForTag(childTag, ancestorInfo);
+    const invalidParentOrAncestor = invalidParent || invalidAncestor;
+    if (!invalidParentOrAncestor) {
+      return true;
+    }
+
+    const ancestorTag = invalidParentOrAncestor.tag;
+
+    const warnKey =
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      String(!!invalidParent) + '|' + childTag + '|' + ancestorTag;
+    if (didWarn[warnKey]) {
+      return false;
+    }
+    didWarn[warnKey] = true;
+
+    const child = current;
+    const ancestor = child ? findAncestor(child.return, ancestorTag) : null;
+
+    const ancestorDescription =
+      child !== null && ancestor !== null
+        ? describeAncestors(ancestor, child, null)
+        : '';
+
+    const tagDisplayName = '<' + childTag + '>';
+    if (invalidParent) {
+      let info = '';
+      if (ancestorTag === 'table' && childTag === 'tr') {
+        info +=
+          ' Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by ' +
+          'the browser.';
+      }
+      console.error(
+        'In HTML, %s cannot be a child of <%s>.%s\n' +
+          'This will cause a hydration error.%s',
+        tagDisplayName,
+        ancestorTag,
+        info,
+        ancestorDescription,
+      );
+    } else {
+      console.error(
+        'In HTML, %s cannot be a descendant of <%s>.\n' +
+          'This will cause a hydration error.%s',
+        tagDisplayName,
+        ancestorTag,
+        ancestorDescription,
+      );
+    }
+    if (child) {
+      // For debugging purposes find the nearest ancestor that caused the issue.
+      // The stack trace of this ancestor can be useful to find the cause.
+      // If the parent is a direct parent in the same owner, we don't bother.
+      const parent = child.return;
+      if (
+        ancestor !== null &&
+        parent !== null &&
+        (ancestor !== parent || parent._debugOwner !== child._debugOwner)
+      ) {
+        runWithFiberInDEV(ancestor, () => {
+          console.error(
+            // We repeat some context because this log might be taken out of context
+            // such as in React DevTools or grouped server logs.
+            '<%s> cannot contain a nested %s.\n' +
+              'See this log for the ancestor stack trace.',
+            ancestorTag,
+            tagDisplayName,
+          );
+        });
+      }
+    }
+    return false;
+  }
+  return true;
+}
+
+function validateTextNesting(
+  childText: string,
+  parentTag: string,
+  implicitRootScope: boolean,
+): boolean {
+  if (__DEV__) {
+    if (implicitRootScope || isTagValidWithParent('#text', parentTag, false)) {
+      return true;
+    }
+
+    const warnKey = '#text|' + parentTag;
+    if (didWarn[warnKey]) {
+      return false;
+    }
+    didWarn[warnKey] = true;
+
+    const child = current;
+    const ancestor = child ? findAncestor(child, parentTag) : null;
+
+    const ancestorDescription =
+      child !== null && ancestor !== null
+        ? describeAncestors(
+            ancestor,
+            child,
+            child.tag !== HostText ? {children: null} : null,
+          )
+        : '';
+
+    if (/\S/.test(childText)) {
+      console.error(
+        'In HTML, text nodes cannot be a child of <%s>.\n' +
+          'This will cause a hydration error.%s',
+        parentTag,
+        ancestorDescription,
+      );
+    } else {
+      console.error(
+        'In HTML, whitespace text nodes cannot be a child of <%s>. ' +
+          "Make sure you don't have any extra whitespace between tags on " +
+          'each line of your source code.\n' +
+          'This will cause a hydration error.%s',
+        parentTag,
+        ancestorDescription,
+      );
+    }
+    return false;
+  }
+  return true;
+}
+
+export {updatedAncestorInfoDev, validateDOMNesting, validateTextNesting};
diff --git a/packages/react-dom-bindings/src/events/CurrentReplayingEvent.js b/packages/react-dom-bindings/src/events/CurrentReplayingEvent.js
new file mode 100644
index 00000000000..50c061fcffa
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/CurrentReplayingEvent.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../events/PluginModuleType';
+
+// This exists to avoid circular dependency between ReactDOMEventReplaying
+// and DOMPluginEventSystem.
+
+let currentReplayingEvent = null;
+
+export function setReplayingEvent(event: AnyNativeEvent): void {
+  if (__DEV__) {
+    if (currentReplayingEvent !== null) {
+      console.error(
+        'Expected currently replaying event to be null. This error ' +
+          'is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+  }
+  currentReplayingEvent = event;
+}
+
+export function resetReplayingEvent(): void {
+  if (__DEV__) {
+    if (currentReplayingEvent === null) {
+      console.error(
+        'Expected currently replaying event to not be null. This error ' +
+          'is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+  }
+  currentReplayingEvent = null;
+}
+
+export function isReplayingEvent(event: AnyNativeEvent): boolean {
+  return event === currentReplayingEvent;
+}
diff --git a/packages/react-dom-bindings/src/events/DOMEventNames.js b/packages/react-dom-bindings/src/events/DOMEventNames.js
new file mode 100644
index 00000000000..73f0e2f632c
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/DOMEventNames.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 getVendorPrefixedEventName from './getVendorPrefixedEventName';
+
+export type DOMEventName =
+  | 'abort'
+  | 'afterblur' // Not a real event. This is used by event experiments.
+  // These are vendor-prefixed so you should use the exported constants instead:
+  // 'animationiteration' |
+  // 'animationend |
+  // 'animationstart' |
+  | 'beforeblur' // Not a real event. This is used by event experiments.
+  | 'beforeinput'
+  | 'beforetoggle'
+  | 'blur'
+  | 'canplay'
+  | 'canplaythrough'
+  | 'cancel'
+  | 'change'
+  | 'click'
+  | 'close'
+  | 'compositionend'
+  | 'compositionstart'
+  | 'compositionupdate'
+  | 'contextmenu'
+  | 'copy'
+  | 'cut'
+  | 'dblclick'
+  | 'auxclick'
+  | 'drag'
+  | 'dragend'
+  | 'dragenter'
+  | 'dragexit'
+  | 'dragleave'
+  | 'dragover'
+  | 'dragstart'
+  | 'drop'
+  | 'durationchange'
+  | 'emptied'
+  | 'encrypted'
+  | 'ended'
+  | 'error'
+  | 'focus'
+  | 'focusin'
+  | 'focusout'
+  | 'fullscreenchange'
+  | 'gotpointercapture'
+  | 'hashchange'
+  | 'input'
+  | 'invalid'
+  | 'keydown'
+  | 'keypress'
+  | 'keyup'
+  | 'load'
+  | 'loadstart'
+  | 'loadeddata'
+  | 'loadedmetadata'
+  | 'lostpointercapture'
+  | 'message'
+  | 'mousedown'
+  | 'mouseenter'
+  | 'mouseleave'
+  | 'mousemove'
+  | 'mouseout'
+  | 'mouseover'
+  | 'mouseup'
+  | 'paste'
+  | 'pause'
+  | 'play'
+  | 'playing'
+  | 'pointercancel'
+  | 'pointerdown'
+  | 'pointerenter'
+  | 'pointerleave'
+  | 'pointermove'
+  | 'pointerout'
+  | 'pointerover'
+  | 'pointerup'
+  | 'popstate'
+  | 'progress'
+  | 'ratechange'
+  | 'reset'
+  | 'resize'
+  | 'scroll'
+  | 'scrollend'
+  | 'seeked'
+  | 'seeking'
+  | 'select'
+  | 'selectstart'
+  | 'selectionchange'
+  | 'stalled'
+  | 'submit'
+  | 'suspend'
+  | 'textInput' // Intentionally camelCase. Non-standard.
+  | 'timeupdate'
+  | 'toggle'
+  | 'touchcancel'
+  | 'touchend'
+  | 'touchmove'
+  | 'touchstart'
+  // These are vendor-prefixed so you should use the exported constants instead:
+  // 'transitionrun' |
+  // 'transitionstart' |
+  // 'transitioncancel' |
+  // 'transitionend' |
+  | 'volumechange'
+  | 'waiting'
+  | 'wheel';
+
+export const ANIMATION_END: DOMEventName =
+  getVendorPrefixedEventName('animationend');
+export const ANIMATION_ITERATION: DOMEventName =
+  getVendorPrefixedEventName('animationiteration');
+export const ANIMATION_START: DOMEventName =
+  getVendorPrefixedEventName('animationstart');
+
+export const TRANSITION_RUN: DOMEventName =
+  getVendorPrefixedEventName('transitionrun');
+export const TRANSITION_START: DOMEventName =
+  getVendorPrefixedEventName('transitionstart');
+export const TRANSITION_CANCEL: DOMEventName =
+  getVendorPrefixedEventName('transitioncancel');
+export const TRANSITION_END: DOMEventName =
+  getVendorPrefixedEventName('transitionend');
diff --git a/packages/react-dom-bindings/src/events/DOMEventProperties.js b/packages/react-dom-bindings/src/events/DOMEventProperties.js
new file mode 100644
index 00000000000..534cae3045e
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/DOMEventProperties.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from './DOMEventNames';
+
+import {registerTwoPhaseEvent} from './EventRegistry';
+import {
+  ANIMATION_END,
+  ANIMATION_ITERATION,
+  ANIMATION_START,
+  TRANSITION_RUN,
+  TRANSITION_START,
+  TRANSITION_CANCEL,
+  TRANSITION_END,
+} from './DOMEventNames';
+
+import {
+  enableCreateEventHandleAPI,
+  enableScrollEndPolyfill,
+} from 'shared/ReactFeatureFlags';
+
+export const topLevelEventsToReactNames: Map<DOMEventName, string | null> =
+  new Map();
+
+// NOTE: Capitalization is important in this list!
+//
+// E.g. it needs "pointerDown", not "pointerdown".
+// This is because we derive both React name ("onPointerDown")
+// and DOM name ("pointerdown") from the same list.
+//
+// Exceptions that don't match this convention are listed separately.
+//
+// prettier-ignore
+const simpleEventPluginEvents = [
+  'abort',
+  'auxClick',
+  'beforeToggle',
+  'cancel',
+  'canPlay',
+  'canPlayThrough',
+  'click',
+  'close',
+  'contextMenu',
+  'copy',
+  'cut',
+  'drag',
+  'dragEnd',
+  'dragEnter',
+  'dragExit',
+  'dragLeave',
+  'dragOver',
+  'dragStart',
+  'drop',
+  'durationChange',
+  'emptied',
+  'encrypted',
+  'ended',
+  'error',
+  'gotPointerCapture',
+  'input',
+  'invalid',
+  'keyDown',
+  'keyPress',
+  'keyUp',
+  'load',
+  'loadedData',
+  'loadedMetadata',
+  'loadStart',
+  'lostPointerCapture',
+  'mouseDown',
+  'mouseMove',
+  'mouseOut',
+  'mouseOver',
+  'mouseUp',
+  'paste',
+  'pause',
+  'play',
+  'playing',
+  'pointerCancel',
+  'pointerDown',
+  'pointerMove',
+  'pointerOut',
+  'pointerOver',
+  'pointerUp',
+  'progress',
+  'rateChange',
+  'reset',
+  'resize',
+  'seeked',
+  'seeking',
+  'stalled',
+  'submit',
+  'suspend',
+  'timeUpdate',
+  'touchCancel',
+  'touchEnd',
+  'touchStart',
+  'volumeChange',
+  'scroll',
+  'toggle',
+  'touchMove',
+  'waiting',
+  'wheel',
+];
+
+if (!enableScrollEndPolyfill) {
+  simpleEventPluginEvents.push('scrollEnd');
+}
+
+if (enableCreateEventHandleAPI) {
+  // Special case: these two events don't have on* React handler
+  // and are only accessible via the createEventHandle API.
+  topLevelEventsToReactNames.set('beforeblur', null);
+  topLevelEventsToReactNames.set('afterblur', null);
+}
+
+function registerSimpleEvent(domEventName: DOMEventName, reactName: string) {
+  topLevelEventsToReactNames.set(domEventName, reactName);
+  registerTwoPhaseEvent(reactName, [domEventName]);
+}
+
+export function registerSimpleEvents() {
+  for (let i = 0; i < simpleEventPluginEvents.length; i++) {
+    const eventName = ((simpleEventPluginEvents[i]: any): string);
+    const domEventName = ((eventName.toLowerCase(): any): DOMEventName);
+    const capitalizedEvent = eventName[0].toUpperCase() + eventName.slice(1);
+    registerSimpleEvent(domEventName, 'on' + capitalizedEvent);
+  }
+  // Special cases where event names don't match.
+  registerSimpleEvent(ANIMATION_END, 'onAnimationEnd');
+  registerSimpleEvent(ANIMATION_ITERATION, 'onAnimationIteration');
+  registerSimpleEvent(ANIMATION_START, 'onAnimationStart');
+  registerSimpleEvent('dblclick', 'onDoubleClick');
+  registerSimpleEvent('focusin', 'onFocus');
+  registerSimpleEvent('focusout', 'onBlur');
+
+  registerSimpleEvent(TRANSITION_RUN, 'onTransitionRun');
+  registerSimpleEvent(TRANSITION_START, 'onTransitionStart');
+  registerSimpleEvent(TRANSITION_CANCEL, 'onTransitionCancel');
+  registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
+}
diff --git a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
new file mode 100644
index 00000000000..e30c4798371
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
@@ -0,0 +1,1004 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from './DOMEventNames';
+import type {EventSystemFlags} from './EventSystemFlags';
+import type {AnyNativeEvent} from './PluginModuleType';
+import type {
+  KnownReactSyntheticEvent,
+  ReactSyntheticEvent,
+} from './ReactSyntheticEventType';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+import {allNativeEvents} from './EventRegistry';
+import {
+  SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE,
+  IS_LEGACY_FB_SUPPORT_MODE,
+  SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS,
+  IS_CAPTURE_PHASE,
+  IS_EVENT_HANDLE_NON_MANAGED_NODE,
+  IS_NON_DELEGATED,
+} from './EventSystemFlags';
+import {isReplayingEvent} from './CurrentReplayingEvent';
+
+import {
+  HostRoot,
+  HostPortal,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  ScopeComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+import {getLowestCommonAncestor} from 'react-reconciler/src/ReactFiberTreeReflection';
+
+import getEventTarget from './getEventTarget';
+import {
+  getClosestInstanceFromNode,
+  getEventListenerSet,
+  getEventHandlerListeners,
+} from '../client/ReactDOMComponentTree';
+import {COMMENT_NODE, DOCUMENT_NODE} from '../client/HTMLNodeType';
+import {batchedUpdates} from './ReactDOMUpdateBatching';
+import getListener from './getListener';
+import {passiveBrowserEventsSupported} from './checkPassiveEvents';
+
+import {
+  enableLegacyFBSupport,
+  enableCreateEventHandleAPI,
+  enableScopeAPI,
+  disableCommentsAsDOMContainers,
+  enableScrollEndPolyfill,
+} from 'shared/ReactFeatureFlags';
+import {createEventListenerWrapperWithPriority} from './ReactDOMEventListener';
+import {
+  removeEventListener,
+  addEventCaptureListener,
+  addEventBubbleListener,
+  addEventBubbleListenerWithPassiveFlag,
+  addEventCaptureListenerWithPassiveFlag,
+} from './EventListener';
+import * as BeforeInputEventPlugin from './plugins/BeforeInputEventPlugin';
+import * as ChangeEventPlugin from './plugins/ChangeEventPlugin';
+import * as EnterLeaveEventPlugin from './plugins/EnterLeaveEventPlugin';
+import * as SelectEventPlugin from './plugins/SelectEventPlugin';
+import * as SimpleEventPlugin from './plugins/SimpleEventPlugin';
+import * as FormActionEventPlugin from './plugins/FormActionEventPlugin';
+import * as ScrollEndEventPlugin from './plugins/ScrollEndEventPlugin';
+
+import reportGlobalError from 'shared/reportGlobalError';
+
+import {runWithFiberInDEV} from 'react-reconciler/src/ReactCurrentFiber';
+
+type DispatchListener = {
+  instance: null | Fiber,
+  listener: Function,
+  currentTarget: EventTarget,
+};
+
+type DispatchEntry = {
+  event: ReactSyntheticEvent,
+  listeners: Array<DispatchListener>,
+};
+
+export type DispatchQueue = Array<DispatchEntry>;
+
+// TODO: remove top-level side effect.
+SimpleEventPlugin.registerEvents();
+EnterLeaveEventPlugin.registerEvents();
+ChangeEventPlugin.registerEvents();
+SelectEventPlugin.registerEvents();
+BeforeInputEventPlugin.registerEvents();
+if (enableScrollEndPolyfill) {
+  ScrollEndEventPlugin.registerEvents();
+}
+
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+) {
+  // TODO: we should remove the concept of a "SimpleEventPlugin".
+  // This is the basic functionality of the event system. All
+  // the other plugins are essentially polyfills. So the plugin
+  // should probably be inlined somewhere and have its logic
+  // be core the to event system. This would potentially allow
+  // us to ship builds of React without the polyfilled plugins below.
+  SimpleEventPlugin.extractEvents(
+    dispatchQueue,
+    domEventName,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+    eventSystemFlags,
+    targetContainer,
+  );
+  const shouldProcessPolyfillPlugins =
+    (eventSystemFlags & SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS) === 0;
+  // We don't process these events unless we are in the
+  // event's native "bubble" phase, which means that we're
+  // not in the capture phase. That's because we emulate
+  // the capture phase here still. This is a trade-off,
+  // because in an ideal world we would not emulate and use
+  // the phases properly, like we do with the SimpleEvent
+  // plugin. However, the plugins below either expect
+  // emulation (EnterLeave) or use state localized to that
+  // plugin (BeforeInput, Change, Select). The state in
+  // these modules complicates things, as you'll essentially
+  // get the case where the capture phase event might change
+  // state, only for the following bubble event to come in
+  // later and not trigger anything as the state now
+  // invalidates the heuristics of the event plugin. We
+  // could alter all these plugins to work in such ways, but
+  // that might cause other unknown side-effects that we
+  // can't foresee right now.
+  if (shouldProcessPolyfillPlugins) {
+    EnterLeaveEventPlugin.extractEvents(
+      dispatchQueue,
+      domEventName,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+    ChangeEventPlugin.extractEvents(
+      dispatchQueue,
+      domEventName,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+    SelectEventPlugin.extractEvents(
+      dispatchQueue,
+      domEventName,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+    BeforeInputEventPlugin.extractEvents(
+      dispatchQueue,
+      domEventName,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+    FormActionEventPlugin.extractEvents(
+      dispatchQueue,
+      domEventName,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+  }
+  if (enableScrollEndPolyfill) {
+    ScrollEndEventPlugin.extractEvents(
+      dispatchQueue,
+      domEventName,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+  }
+}
+
+// List of events that need to be individually attached to media elements.
+export const mediaEventTypes: Array<DOMEventName> = [
+  'abort',
+  'canplay',
+  'canplaythrough',
+  'durationchange',
+  'emptied',
+  'encrypted',
+  'ended',
+  'error',
+  'loadeddata',
+  'loadedmetadata',
+  'loadstart',
+  'pause',
+  'play',
+  'playing',
+  'progress',
+  'ratechange',
+  'resize',
+  'seeked',
+  'seeking',
+  'stalled',
+  'suspend',
+  'timeupdate',
+  'volumechange',
+  'waiting',
+];
+
+// We should not delegate these events to the container, but rather
+// set them on the actual target element itself. This is primarily
+// because these events do not consistently bubble in the DOM.
+export const nonDelegatedEvents: Set<DOMEventName> = new Set([
+  'beforetoggle',
+  'cancel',
+  'close',
+  'invalid',
+  'load',
+  'scroll',
+  'scrollend',
+  'toggle',
+  // In order to reduce bytes, we insert the above array of media events
+  // into this Set. Note: the "error" event isn't an exclusive media event,
+  // and can occur on other elements too. Rather than duplicate that event,
+  // we just take it from the media events array.
+  ...mediaEventTypes,
+]);
+
+function executeDispatch(
+  event: ReactSyntheticEvent,
+  listener: Function,
+  currentTarget: EventTarget,
+): void {
+  event.currentTarget = currentTarget;
+  try {
+    listener(event);
+  } catch (error) {
+    reportGlobalError(error);
+  }
+  event.currentTarget = null;
+}
+
+function processDispatchQueueItemsInOrder(
+  event: ReactSyntheticEvent,
+  dispatchListeners: Array<DispatchListener>,
+  inCapturePhase: boolean,
+): void {
+  let previousInstance;
+  if (inCapturePhase) {
+    for (let i = dispatchListeners.length - 1; i >= 0; i--) {
+      const {instance, currentTarget, listener} = dispatchListeners[i];
+      if (instance !== previousInstance && event.isPropagationStopped()) {
+        return;
+      }
+      if (__DEV__ && instance !== null) {
+        runWithFiberInDEV(
+          instance,
+          executeDispatch,
+          event,
+          listener,
+          currentTarget,
+        );
+      } else {
+        executeDispatch(event, listener, currentTarget);
+      }
+      previousInstance = instance;
+    }
+  } else {
+    for (let i = 0; i < dispatchListeners.length; i++) {
+      const {instance, currentTarget, listener} = dispatchListeners[i];
+      if (instance !== previousInstance && event.isPropagationStopped()) {
+        return;
+      }
+      if (__DEV__ && instance !== null) {
+        runWithFiberInDEV(
+          instance,
+          executeDispatch,
+          event,
+          listener,
+          currentTarget,
+        );
+      } else {
+        executeDispatch(event, listener, currentTarget);
+      }
+      previousInstance = instance;
+    }
+  }
+}
+
+export function processDispatchQueue(
+  dispatchQueue: DispatchQueue,
+  eventSystemFlags: EventSystemFlags,
+): void {
+  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
+  for (let i = 0; i < dispatchQueue.length; i++) {
+    const {event, listeners} = dispatchQueue[i];
+    processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
+    //  event system doesn't use pooling.
+  }
+}
+
+function dispatchEventsForPlugins(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+  targetInst: null | Fiber,
+  targetContainer: EventTarget,
+): void {
+  const nativeEventTarget = getEventTarget(nativeEvent);
+  const dispatchQueue: DispatchQueue = [];
+  extractEvents(
+    dispatchQueue,
+    domEventName,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+    eventSystemFlags,
+    targetContainer,
+  );
+  processDispatchQueue(dispatchQueue, eventSystemFlags);
+}
+
+export function listenToNonDelegatedEvent(
+  domEventName: DOMEventName,
+  targetElement: Element,
+): void {
+  if (__DEV__) {
+    if (!nonDelegatedEvents.has(domEventName)) {
+      console.error(
+        'Did not expect a listenToNonDelegatedEvent() call for "%s". ' +
+          'This is a bug in React. Please file an issue.',
+        domEventName,
+      );
+    }
+  }
+  const isCapturePhaseListener = false;
+  const listenerSet = getEventListenerSet(targetElement);
+  const listenerSetKey = getListenerSetKey(
+    domEventName,
+    isCapturePhaseListener,
+  );
+  if (!listenerSet.has(listenerSetKey)) {
+    addTrappedEventListener(
+      targetElement,
+      domEventName,
+      IS_NON_DELEGATED,
+      isCapturePhaseListener,
+    );
+    listenerSet.add(listenerSetKey);
+  }
+}
+
+export function listenToNativeEvent(
+  domEventName: DOMEventName,
+  isCapturePhaseListener: boolean,
+  target: EventTarget,
+): void {
+  if (__DEV__) {
+    if (nonDelegatedEvents.has(domEventName) && !isCapturePhaseListener) {
+      console.error(
+        'Did not expect a listenToNativeEvent() call for "%s" in the bubble phase. ' +
+          'This is a bug in React. Please file an issue.',
+        domEventName,
+      );
+    }
+  }
+
+  let eventSystemFlags = 0;
+  if (isCapturePhaseListener) {
+    eventSystemFlags |= IS_CAPTURE_PHASE;
+  }
+  addTrappedEventListener(
+    target,
+    domEventName,
+    eventSystemFlags,
+    isCapturePhaseListener,
+  );
+}
+
+// This is only used by createEventHandle when the
+// target is not a DOM element. E.g. window.
+export function listenToNativeEventForNonManagedEventTarget(
+  domEventName: DOMEventName,
+  isCapturePhaseListener: boolean,
+  target: EventTarget,
+): void {
+  let eventSystemFlags: number = IS_EVENT_HANDLE_NON_MANAGED_NODE;
+  const listenerSet = getEventListenerSet(target);
+  const listenerSetKey = getListenerSetKey(
+    domEventName,
+    isCapturePhaseListener,
+  );
+  if (!listenerSet.has(listenerSetKey)) {
+    if (isCapturePhaseListener) {
+      eventSystemFlags |= IS_CAPTURE_PHASE;
+    }
+    addTrappedEventListener(
+      target,
+      domEventName,
+      eventSystemFlags,
+      isCapturePhaseListener,
+    );
+    listenerSet.add(listenerSetKey);
+  }
+}
+
+const listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);
+
+export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
+  if (!(rootContainerElement: any)[listeningMarker]) {
+    (rootContainerElement: any)[listeningMarker] = true;
+    allNativeEvents.forEach(domEventName => {
+      // We handle selectionchange separately because it
+      // doesn't bubble and needs to be on the document.
+      if (domEventName !== 'selectionchange') {
+        if (!nonDelegatedEvents.has(domEventName)) {
+          listenToNativeEvent(domEventName, false, rootContainerElement);
+        }
+        listenToNativeEvent(domEventName, true, rootContainerElement);
+      }
+    });
+    const ownerDocument =
+      (rootContainerElement: any).nodeType === DOCUMENT_NODE
+        ? rootContainerElement
+        : (rootContainerElement: any).ownerDocument;
+    if (ownerDocument !== null) {
+      // The selectionchange event also needs deduplication
+      // but it is attached to the document.
+      if (!(ownerDocument: any)[listeningMarker]) {
+        (ownerDocument: any)[listeningMarker] = true;
+        listenToNativeEvent('selectionchange', false, ownerDocument);
+      }
+    }
+  }
+}
+
+function addTrappedEventListener(
+  targetContainer: EventTarget,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  isCapturePhaseListener: boolean,
+  isDeferredListenerForLegacyFBSupport?: boolean,
+) {
+  let listener = createEventListenerWrapperWithPriority(
+    targetContainer,
+    domEventName,
+    eventSystemFlags,
+  );
+  // If passive option is not supported, then the event will be
+  // active and not passive.
+  let isPassiveListener: void | boolean = undefined;
+  if (passiveBrowserEventsSupported) {
+    // Browsers introduced an intervention, making these events
+    // passive by default on document. React doesn't bind them
+    // to document anymore, but changing this now would undo
+    // the performance wins from the change. So we emulate
+    // the existing behavior manually on the roots now.
+    // https://github.com/facebook/react/issues/19651
+    if (
+      domEventName === 'touchstart' ||
+      domEventName === 'touchmove' ||
+      domEventName === 'wheel'
+    ) {
+      isPassiveListener = true;
+    }
+  }
+
+  targetContainer =
+    enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport
+      ? (targetContainer: any).ownerDocument
+      : targetContainer;
+
+  let unsubscribeListener;
+  // When legacyFBSupport is enabled, it's for when we
+  // want to add a one time event listener to a container.
+  // This should only be used with enableLegacyFBSupport
+  // due to requirement to provide compatibility with
+  // internal FB www event tooling. This works by removing
+  // the event listener as soon as it is invoked. We could
+  // also attempt to use the {once: true} param on
+  // addEventListener, but that requires support and some
+  // browsers do not support this today, and given this is
+  // to support legacy code patterns, it's likely they'll
+  // need support for such browsers.
+  if (enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport) {
+    const originalListener = listener;
+    // $FlowFixMe[missing-this-annot]
+    listener = function (...p) {
+      removeEventListener(
+        targetContainer,
+        domEventName,
+        unsubscribeListener,
+        isCapturePhaseListener,
+      );
+      return originalListener.apply(this, p);
+    };
+  }
+  // TODO: There are too many combinations here. Consolidate them.
+  if (isCapturePhaseListener) {
+    if (isPassiveListener !== undefined) {
+      unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
+        targetContainer,
+        domEventName,
+        listener,
+        isPassiveListener,
+      );
+    } else {
+      unsubscribeListener = addEventCaptureListener(
+        targetContainer,
+        domEventName,
+        listener,
+      );
+    }
+  } else {
+    if (isPassiveListener !== undefined) {
+      unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
+        targetContainer,
+        domEventName,
+        listener,
+        isPassiveListener,
+      );
+    } else {
+      unsubscribeListener = addEventBubbleListener(
+        targetContainer,
+        domEventName,
+        listener,
+      );
+    }
+  }
+}
+
+function deferClickToDocumentForLegacyFBSupport(
+  domEventName: DOMEventName,
+  targetContainer: EventTarget,
+): void {
+  // We defer all click events with legacy FB support mode on.
+  // This means we add a one time event listener to trigger
+  // after the FB delegated listeners fire.
+  const isDeferredListenerForLegacyFBSupport = true;
+  addTrappedEventListener(
+    targetContainer,
+    domEventName,
+    IS_LEGACY_FB_SUPPORT_MODE,
+    false,
+    isDeferredListenerForLegacyFBSupport,
+  );
+}
+
+function isMatchingRootContainer(
+  grandContainer: Element,
+  targetContainer: EventTarget,
+): boolean {
+  return (
+    grandContainer === targetContainer ||
+    (!disableCommentsAsDOMContainers &&
+      grandContainer.nodeType === COMMENT_NODE &&
+      grandContainer.parentNode === targetContainer)
+  );
+}
+
+export function dispatchEventForPluginEventSystem(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+  targetInst: null | Fiber,
+  targetContainer: EventTarget,
+): void {
+  let ancestorInst = targetInst;
+  if (
+    (eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE) === 0 &&
+    (eventSystemFlags & IS_NON_DELEGATED) === 0
+  ) {
+    const targetContainerNode = ((targetContainer: any): Node);
+
+    // If we are using the legacy FB support flag, we
+    // defer the event to the null with a one
+    // time event listener so we can defer the event.
+    if (
+      enableLegacyFBSupport &&
+      // If our event flags match the required flags for entering
+      // FB legacy mode and we are processing the "click" event,
+      // then we can defer the event to the "document", to allow
+      // for legacy FB support, where the expected behavior was to
+      // match React < 16 behavior of delegated clicks to the doc.
+      domEventName === 'click' &&
+      (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0 &&
+      !isReplayingEvent(nativeEvent)
+    ) {
+      deferClickToDocumentForLegacyFBSupport(domEventName, targetContainer);
+      return;
+    }
+    if (targetInst !== null) {
+      // The below logic attempts to work out if we need to change
+      // the target fiber to a different ancestor. We had similar logic
+      // in the legacy event system, except the big difference between
+      // systems is that the modern event system now has an event listener
+      // attached to each React Root and React Portal Root. Together,
+      // the DOM nodes representing these roots are the "rootContainer".
+      // To figure out which ancestor instance we should use, we traverse
+      // up the fiber tree from the target instance and attempt to find
+      // root boundaries that match that of our current "rootContainer".
+      // If we find that "rootContainer", we find the parent fiber
+      // sub-tree for that root and make that our ancestor instance.
+      let node: null | Fiber = targetInst;
+
+      mainLoop: while (true) {
+        if (node === null) {
+          return;
+        }
+        const nodeTag = node.tag;
+        if (nodeTag === HostRoot || nodeTag === HostPortal) {
+          let container = node.stateNode.containerInfo;
+          if (isMatchingRootContainer(container, targetContainerNode)) {
+            break;
+          }
+          if (nodeTag === HostPortal) {
+            // The target is a portal, but it's not the rootContainer we're looking for.
+            // Normally portals handle their own events all the way down to the root.
+            // So we should be able to stop now. However, we don't know if this portal
+            // was part of *our* root.
+            let grandNode = node.return;
+            while (grandNode !== null) {
+              const grandTag = grandNode.tag;
+              if (grandTag === HostRoot || grandTag === HostPortal) {
+                const grandContainer = grandNode.stateNode.containerInfo;
+                if (
+                  isMatchingRootContainer(grandContainer, targetContainerNode)
+                ) {
+                  // This is the rootContainer we're looking for and we found it as
+                  // a parent of the Portal. That means we can ignore it because the
+                  // Portal will bubble through to us.
+                  return;
+                }
+              }
+              grandNode = grandNode.return;
+            }
+          }
+          // Now we need to find it's corresponding host fiber in the other
+          // tree. To do this we can use getClosestInstanceFromNode, but we
+          // need to validate that the fiber is a host instance, otherwise
+          // we need to traverse up through the DOM till we find the correct
+          // node that is from the other tree.
+          while (container !== null) {
+            const parentNode = getClosestInstanceFromNode(container);
+            if (parentNode === null) {
+              return;
+            }
+            const parentTag = parentNode.tag;
+            if (
+              parentTag === HostComponent ||
+              parentTag === HostText ||
+              parentTag === HostHoistable ||
+              parentTag === HostSingleton
+            ) {
+              node = ancestorInst = parentNode;
+              continue mainLoop;
+            }
+            container = container.parentNode;
+          }
+        }
+        node = node.return;
+      }
+    }
+  }
+
+  batchedUpdates(() =>
+    dispatchEventsForPlugins(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      ancestorInst,
+      targetContainer,
+    ),
+  );
+}
+
+function createDispatchListener(
+  instance: null | Fiber,
+  listener: Function,
+  currentTarget: EventTarget,
+): DispatchListener {
+  return {
+    instance,
+    listener,
+    currentTarget,
+  };
+}
+
+export function accumulateSinglePhaseListeners(
+  targetFiber: Fiber | null,
+  reactName: string | null,
+  nativeEventType: string,
+  inCapturePhase: boolean,
+  accumulateTargetOnly: boolean,
+  nativeEvent: AnyNativeEvent,
+): Array<DispatchListener> {
+  const captureName = reactName !== null ? reactName + 'Capture' : null;
+  const reactEventName = inCapturePhase ? captureName : reactName;
+  let listeners: Array<DispatchListener> = [];
+
+  let instance = targetFiber;
+  let lastHostComponent = null;
+
+  // Accumulate all instances and listeners via the target -> root path.
+  while (instance !== null) {
+    const {stateNode, tag} = instance;
+    // Handle listeners that are on HostComponents (i.e. <div>)
+    if (
+      (tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton) &&
+      stateNode !== null
+    ) {
+      lastHostComponent = stateNode;
+
+      // createEventHandle listeners
+      if (enableCreateEventHandleAPI) {
+        const eventHandlerListeners =
+          getEventHandlerListeners(lastHostComponent);
+        if (eventHandlerListeners !== null) {
+          eventHandlerListeners.forEach(entry => {
+            if (
+              entry.type === nativeEventType &&
+              entry.capture === inCapturePhase
+            ) {
+              listeners.push(
+                createDispatchListener(
+                  instance,
+                  entry.callback,
+                  (lastHostComponent: any),
+                ),
+              );
+            }
+          });
+        }
+      }
+
+      // Standard React on* listeners, i.e. onClick or onClickCapture
+      if (reactEventName !== null) {
+        const listener = getListener(instance, reactEventName);
+        if (listener != null) {
+          listeners.push(
+            createDispatchListener(instance, listener, lastHostComponent),
+          );
+        }
+      }
+    } else if (
+      enableCreateEventHandleAPI &&
+      enableScopeAPI &&
+      tag === ScopeComponent &&
+      lastHostComponent !== null &&
+      stateNode !== null
+    ) {
+      // Scopes
+      const reactScopeInstance = stateNode;
+      const eventHandlerListeners =
+        getEventHandlerListeners(reactScopeInstance);
+      if (eventHandlerListeners !== null) {
+        eventHandlerListeners.forEach(entry => {
+          if (
+            entry.type === nativeEventType &&
+            entry.capture === inCapturePhase
+          ) {
+            listeners.push(
+              createDispatchListener(
+                instance,
+                entry.callback,
+                (lastHostComponent: any),
+              ),
+            );
+          }
+        });
+      }
+    }
+    // If we are only accumulating events for the target, then we don't
+    // continue to propagate through the React fiber tree to find other
+    // listeners.
+    if (accumulateTargetOnly) {
+      break;
+    }
+    // If we are processing the onBeforeBlur event, then we need to take
+    // into consideration that part of the React tree might have been hidden
+    // or deleted (as we're invoking this event during commit). We can find
+    // this out by checking if intercept fiber set on the event matches the
+    // current instance fiber. In which case, we should clear all existing
+    // listeners.
+    if (enableCreateEventHandleAPI && nativeEvent.type === 'beforeblur') {
+      // $FlowFixMe[prop-missing] internal field
+      const detachedInterceptFiber = nativeEvent._detachedInterceptFiber;
+      if (
+        detachedInterceptFiber !== null &&
+        (detachedInterceptFiber === instance ||
+          detachedInterceptFiber === instance.alternate)
+      ) {
+        listeners = [];
+      }
+    }
+    instance = instance.return;
+  }
+  return listeners;
+}
+
+// We should only use this function for:
+// - BeforeInputEventPlugin
+// - ChangeEventPlugin
+// - SelectEventPlugin
+// - ScrollEndEventPlugin
+// This is because we only process these plugins
+// in the bubble phase, so we need to accumulate two
+// phase event listeners (via emulation).
+export function accumulateTwoPhaseListeners(
+  targetFiber: Fiber | null,
+  reactName: string,
+): Array<DispatchListener> {
+  const captureName = reactName + 'Capture';
+  const listeners: Array<DispatchListener> = [];
+  let instance = targetFiber;
+
+  // Accumulate all instances and listeners via the target -> root path.
+  while (instance !== null) {
+    const {stateNode, tag} = instance;
+    // Handle listeners that are on HostComponents (i.e. <div>)
+    if (
+      (tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton) &&
+      stateNode !== null
+    ) {
+      const currentTarget = stateNode;
+      const captureListener = getListener(instance, captureName);
+      if (captureListener != null) {
+        listeners.unshift(
+          createDispatchListener(instance, captureListener, currentTarget),
+        );
+      }
+      const bubbleListener = getListener(instance, reactName);
+      if (bubbleListener != null) {
+        listeners.push(
+          createDispatchListener(instance, bubbleListener, currentTarget),
+        );
+      }
+    }
+    if (instance.tag === HostRoot) {
+      return listeners;
+    }
+    instance = instance.return;
+  }
+  // If we didn't reach the root it means we're unmounted and shouldn't
+  // dispatch any events on the target.
+  return [];
+}
+
+function getParent(inst: Fiber | null): Fiber | null {
+  if (inst === null) {
+    return null;
+  }
+  do {
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    inst = inst.return;
+    // TODO: If this is a HostRoot we might want to bail out.
+    // That is depending on if we want nested subtrees (layers) to bubble
+    // events to their parent. We could also go through parentNode on the
+    // host node but that wouldn't work for React Native and doesn't let us
+    // do the portal feature.
+  } while (inst && inst.tag !== HostComponent && inst.tag !== HostSingleton);
+  if (inst) {
+    return inst;
+  }
+  return null;
+}
+
+function accumulateEnterLeaveListenersForEvent(
+  dispatchQueue: DispatchQueue,
+  event: KnownReactSyntheticEvent,
+  target: Fiber,
+  common: Fiber | null,
+  inCapturePhase: boolean,
+): void {
+  const registrationName = event._reactName;
+  const listeners: Array<DispatchListener> = [];
+
+  let instance: null | Fiber = target;
+  while (instance !== null) {
+    if (instance === common) {
+      break;
+    }
+    const {alternate, stateNode, tag} = instance;
+    if (alternate !== null && alternate === common) {
+      break;
+    }
+    if (
+      (tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton) &&
+      stateNode !== null
+    ) {
+      const currentTarget = stateNode;
+      if (inCapturePhase) {
+        const captureListener = getListener(instance, registrationName);
+        if (captureListener != null) {
+          listeners.unshift(
+            createDispatchListener(instance, captureListener, currentTarget),
+          );
+        }
+      } else if (!inCapturePhase) {
+        const bubbleListener = getListener(instance, registrationName);
+        if (bubbleListener != null) {
+          listeners.push(
+            createDispatchListener(instance, bubbleListener, currentTarget),
+          );
+        }
+      }
+    }
+    instance = instance.return;
+  }
+  if (listeners.length !== 0) {
+    dispatchQueue.push({event, listeners});
+  }
+}
+
+// We should only use this function for:
+// - EnterLeaveEventPlugin
+// This is because we only process this plugin
+// in the bubble phase, so we need to accumulate two
+// phase event listeners.
+export function accumulateEnterLeaveTwoPhaseListeners(
+  dispatchQueue: DispatchQueue,
+  leaveEvent: KnownReactSyntheticEvent,
+  enterEvent: null | KnownReactSyntheticEvent,
+  from: Fiber | null,
+  to: Fiber | null,
+): void {
+  const common =
+    from && to ? getLowestCommonAncestor(from, to, getParent) : null;
+
+  if (from !== null) {
+    accumulateEnterLeaveListenersForEvent(
+      dispatchQueue,
+      leaveEvent,
+      from,
+      common,
+      false,
+    );
+  }
+  if (to !== null && enterEvent !== null) {
+    accumulateEnterLeaveListenersForEvent(
+      dispatchQueue,
+      enterEvent,
+      to,
+      common,
+      true,
+    );
+  }
+}
+
+export function accumulateEventHandleNonManagedNodeListeners(
+  reactEventType: DOMEventName,
+  currentTarget: EventTarget,
+  inCapturePhase: boolean,
+): Array<DispatchListener> {
+  const listeners: Array<DispatchListener> = [];
+
+  const eventListeners = getEventHandlerListeners(currentTarget);
+  if (eventListeners !== null) {
+    eventListeners.forEach(entry => {
+      if (entry.type === reactEventType && entry.capture === inCapturePhase) {
+        listeners.push(
+          createDispatchListener(null, entry.callback, currentTarget),
+        );
+      }
+    });
+  }
+  return listeners;
+}
+
+export function getListenerSetKey(
+  domEventName: DOMEventName,
+  capture: boolean,
+): string {
+  return `${domEventName}__${capture ? 'capture' : 'bubble'}`;
+}
diff --git a/packages/react-dom-bindings/src/events/EventListener.js b/packages/react-dom-bindings/src/events/EventListener.js
new file mode 100644
index 00000000000..8b43b30d20b
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/EventListener.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 addEventBubbleListener(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+): Function {
+  target.addEventListener(eventType, listener, false);
+  return listener;
+}
+
+export function addEventCaptureListener(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+): Function {
+  target.addEventListener(eventType, listener, true);
+  return listener;
+}
+
+export function addEventCaptureListenerWithPassiveFlag(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+  passive: boolean,
+): Function {
+  target.addEventListener(eventType, listener, {
+    capture: true,
+    passive,
+  });
+  return listener;
+}
+
+export function addEventBubbleListenerWithPassiveFlag(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+  passive: boolean,
+): Function {
+  target.addEventListener(eventType, listener, {
+    passive,
+  });
+  return listener;
+}
+
+export function removeEventListener(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+  capture: boolean,
+): void {
+  target.removeEventListener(eventType, listener, capture);
+}
diff --git a/packages/react-dom-bindings/src/events/EventRegistry.js b/packages/react-dom-bindings/src/events/EventRegistry.js
new file mode 100644
index 00000000000..29131c89401
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/EventRegistry.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from './DOMEventNames';
+
+import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
+
+export const allNativeEvents: Set<DOMEventName> = new Set();
+
+if (enableCreateEventHandleAPI) {
+  allNativeEvents.add('beforeblur');
+  allNativeEvents.add('afterblur');
+}
+
+/**
+ * Mapping from registration name to event name
+ */
+export const registrationNameDependencies: {
+  [registrationName: string]: Array<DOMEventName>,
+} = {};
+
+/**
+ * Mapping from lowercase registration names to the properly cased version,
+ * used to warn in the case of missing event handlers. Available
+ * only in __DEV__.
+ * @type {Object}
+ */
+export const possibleRegistrationNames: {
+  [lowerCasedName: string]: string,
+} = __DEV__ ? {} : (null: any);
+// Trust the developer to only use possibleRegistrationNames in __DEV__
+
+export function registerTwoPhaseEvent(
+  registrationName: string,
+  dependencies: Array<DOMEventName>,
+): void {
+  registerDirectEvent(registrationName, dependencies);
+  registerDirectEvent(registrationName + 'Capture', dependencies);
+}
+
+export function registerDirectEvent(
+  registrationName: string,
+  dependencies: Array<DOMEventName>,
+) {
+  if (__DEV__) {
+    if (registrationNameDependencies[registrationName]) {
+      console.error(
+        'EventRegistry: More than one plugin attempted to publish the same ' +
+          'registration name, `%s`.',
+        registrationName,
+      );
+    }
+  }
+
+  registrationNameDependencies[registrationName] = dependencies;
+
+  if (__DEV__) {
+    const lowerCasedName = registrationName.toLowerCase();
+    possibleRegistrationNames[lowerCasedName] = registrationName;
+
+    if (registrationName === 'onDoubleClick') {
+      possibleRegistrationNames.ondblclick = registrationName;
+    }
+  }
+
+  for (let i = 0; i < dependencies.length; i++) {
+    allNativeEvents.add(dependencies[i]);
+  }
+}
diff --git a/packages/react-dom-bindings/src/events/EventSystemFlags.js b/packages/react-dom-bindings/src/events/EventSystemFlags.js
new file mode 100644
index 00000000000..46aac7bc91f
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/EventSystemFlags.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 EventSystemFlags = number;
+
+export const IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
+export const IS_NON_DELEGATED = 1 << 1;
+export const IS_CAPTURE_PHASE = 1 << 2;
+export const IS_PASSIVE = 1 << 3;
+export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 4;
+
+export const SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE =
+  IS_LEGACY_FB_SUPPORT_MODE | IS_CAPTURE_PHASE;
+
+// We do not want to defer if the event system has already been
+// set to LEGACY_FB_SUPPORT. LEGACY_FB_SUPPORT only gets set when
+// we call willDeferLaterForLegacyFBSupport, thus not bailing out
+// will result in endless cycles like an infinite loop.
+// We also don't want to defer during event replaying.
+export const SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS =
+  IS_EVENT_HANDLE_NON_MANAGED_NODE | IS_NON_DELEGATED | IS_CAPTURE_PHASE;
diff --git a/packages/react-dom-bindings/src/events/FallbackCompositionState.js b/packages/react-dom-bindings/src/events/FallbackCompositionState.js
new file mode 100644
index 00000000000..01812d154bb
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/FallbackCompositionState.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * These variables store information about text content of a target node,
+ * allowing comparison of content before and after a given event.
+ *
+ * Identify the node where selection currently begins, then observe
+ * both its text content and its current position in the DOM. Since the
+ * browser may natively replace the target node during composition, we can
+ * use its position to find its replacement.
+ *
+ *
+ */
+
+let root = null;
+let startText = null;
+let fallbackText = null;
+
+export function initialize(nativeEventTarget) {
+  root = nativeEventTarget;
+  startText = getText();
+  return true;
+}
+
+export function reset() {
+  root = null;
+  startText = null;
+  fallbackText = null;
+}
+
+export function getData() {
+  if (fallbackText) {
+    return fallbackText;
+  }
+
+  let start;
+  const startValue = startText;
+  const startLength = startValue.length;
+  let end;
+  const endValue = getText();
+  const endLength = endValue.length;
+
+  for (start = 0; start < startLength; start++) {
+    if (startValue[start] !== endValue[start]) {
+      break;
+    }
+  }
+
+  const minEnd = startLength - start;
+  for (end = 1; end <= minEnd; end++) {
+    if (startValue[startLength - end] !== endValue[endLength - end]) {
+      break;
+    }
+  }
+
+  const sliceTail = end > 1 ? 1 - end : undefined;
+  fallbackText = endValue.slice(start, sliceTail);
+  return fallbackText;
+}
+
+export function getText() {
+  if ('value' in root) {
+    return root.value;
+  }
+  return root.textContent;
+}
diff --git a/packages/react-dom-bindings/src/events/PluginModuleType.js b/packages/react-dom-bindings/src/events/PluginModuleType.js
new file mode 100644
index 00000000000..6a784600263
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/PluginModuleType.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 AnyNativeEvent = Event | KeyboardEvent | MouseEvent | TouchEvent;
+
+export type PluginName = string;
+
+export type EventSystemFlags = number;
diff --git a/packages/react-dom-bindings/src/events/ReactDOMControlledComponent.js b/packages/react-dom-bindings/src/events/ReactDOMControlledComponent.js
new file mode 100644
index 00000000000..ced86d37339
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/ReactDOMControlledComponent.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  getInstanceFromNode,
+  getFiberCurrentPropsFromNode,
+} from '../client/ReactDOMComponentTree';
+
+import {restoreControlledState} from 'react-dom-bindings/src/client/ReactDOMComponent';
+
+// Use to restore controlled state after a change event has fired.
+
+let restoreTarget = null;
+let restoreQueue = null;
+
+function restoreStateOfTarget(target: Node) {
+  // We perform this translation at the end of the event loop so that we
+  // always receive the correct fiber here
+  const internalInstance = getInstanceFromNode(target);
+  if (!internalInstance) {
+    // Unmounted
+    return;
+  }
+
+  const stateNode = internalInstance.stateNode;
+  // Guard against Fiber being unmounted.
+  if (stateNode) {
+    const props = getFiberCurrentPropsFromNode(stateNode);
+    restoreControlledState(
+      internalInstance.stateNode,
+      internalInstance.type,
+      props,
+    );
+  }
+}
+
+export function enqueueStateRestore(target: Node): void {
+  if (restoreTarget) {
+    if (restoreQueue) {
+      restoreQueue.push(target);
+    } else {
+      restoreQueue = [target];
+    }
+  } else {
+    restoreTarget = target;
+  }
+}
+
+export function needsStateRestore(): boolean {
+  return restoreTarget !== null || restoreQueue !== null;
+}
+
+export function restoreStateIfNeeded() {
+  if (!restoreTarget) {
+    return;
+  }
+  const target = restoreTarget;
+  const queuedTargets = restoreQueue;
+  restoreTarget = null;
+  restoreQueue = null;
+
+  restoreStateOfTarget(target);
+  if (queuedTargets) {
+    for (let i = 0; i < queuedTargets.length; i++) {
+      restoreStateOfTarget(queuedTargets[i]);
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
new file mode 100644
index 00000000000..ee187bc7f48
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
@@ -0,0 +1,415 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactEventPriorities';
+import type {AnyNativeEvent} from '../events/PluginModuleType';
+import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  Container,
+  ActivityInstance,
+  SuspenseInstance,
+} from '../client/ReactFiberConfigDOM';
+import type {DOMEventName} from '../events/DOMEventNames';
+
+import {
+  isDiscreteEventThatRequiresHydration,
+  clearIfContinuousEvent,
+  queueIfContinuousEvent,
+} from './ReactDOMEventReplaying';
+import {attemptSynchronousHydration} from 'react-reconciler/src/ReactFiberReconciler';
+import {
+  getNearestMountedFiber,
+  getContainerFromFiber,
+  getActivityInstanceFromFiber,
+  getSuspenseInstanceFromFiber,
+} from 'react-reconciler/src/ReactFiberTreeReflection';
+import {
+  HostRoot,
+  ActivityComponent,
+  SuspenseComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+import {type EventSystemFlags, IS_CAPTURE_PHASE} from './EventSystemFlags';
+
+import getEventTarget from './getEventTarget';
+import {
+  getInstanceFromNode,
+  getClosestInstanceFromNode,
+} from '../client/ReactDOMComponentTree';
+
+import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
+import {
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+} from '../client/ReactDOMUpdatePriority';
+
+import {
+  getCurrentPriorityLevel as getCurrentSchedulerPriorityLevel,
+  IdlePriority as IdleSchedulerPriority,
+  ImmediatePriority as ImmediateSchedulerPriority,
+  LowPriority as LowSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+} from 'react-reconciler/src/Scheduler';
+import {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
+
+// TODO: can we stop exporting these?
+let _enabled: boolean = true;
+
+// This is exported in FB builds for use by legacy FB layer infra.
+// We'd like to remove this but it's not clear if this is safe.
+export function setEnabled(enabled: ?boolean): void {
+  _enabled = !!enabled;
+}
+
+export function isEnabled(): boolean {
+  return _enabled;
+}
+
+export function createEventListenerWrapper(
+  targetContainer: EventTarget,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+): Function {
+  return dispatchEvent.bind(
+    null,
+    domEventName,
+    eventSystemFlags,
+    targetContainer,
+  );
+}
+
+export function createEventListenerWrapperWithPriority(
+  targetContainer: EventTarget,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+): Function {
+  const eventPriority = getEventPriority(domEventName);
+  let listenerWrapper;
+  switch (eventPriority) {
+    case DiscreteEventPriority:
+      listenerWrapper = dispatchDiscreteEvent;
+      break;
+    case ContinuousEventPriority:
+      listenerWrapper = dispatchContinuousEvent;
+      break;
+    case DefaultEventPriority:
+    default:
+      listenerWrapper = dispatchEvent;
+      break;
+  }
+  return listenerWrapper.bind(
+    null,
+    domEventName,
+    eventSystemFlags,
+    targetContainer,
+  );
+}
+
+function dispatchDiscreteEvent(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  container: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
+  const prevTransition = ReactSharedInternals.T;
+  ReactSharedInternals.T = null;
+  const previousPriority = getCurrentUpdatePriority();
+  try {
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+  }
+}
+
+function dispatchContinuousEvent(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  container: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
+  const prevTransition = ReactSharedInternals.T;
+  ReactSharedInternals.T = null;
+  const previousPriority = getCurrentUpdatePriority();
+  try {
+    setCurrentUpdatePriority(ContinuousEventPriority);
+    dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+  }
+}
+
+export function dispatchEvent(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+): void {
+  if (!_enabled) {
+    return;
+  }
+
+  let blockedOn = findInstanceBlockingEvent(nativeEvent);
+  if (blockedOn === null) {
+    dispatchEventForPluginEventSystem(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      return_targetInst,
+      targetContainer,
+    );
+    clearIfContinuousEvent(domEventName, nativeEvent);
+    return;
+  }
+
+  if (
+    queueIfContinuousEvent(
+      blockedOn,
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    )
+  ) {
+    nativeEvent.stopPropagation();
+    return;
+  }
+  // We need to clear only if we didn't queue because
+  // queueing is accumulative.
+  clearIfContinuousEvent(domEventName, nativeEvent);
+
+  if (
+    eventSystemFlags & IS_CAPTURE_PHASE &&
+    isDiscreteEventThatRequiresHydration(domEventName)
+  ) {
+    while (blockedOn !== null) {
+      const fiber = getInstanceFromNode(blockedOn);
+      if (fiber !== null) {
+        attemptSynchronousHydration(fiber);
+      }
+      const nextBlockedOn = findInstanceBlockingEvent(nativeEvent);
+      if (nextBlockedOn === null) {
+        dispatchEventForPluginEventSystem(
+          domEventName,
+          eventSystemFlags,
+          nativeEvent,
+          return_targetInst,
+          targetContainer,
+        );
+      }
+      if (nextBlockedOn === blockedOn) {
+        break;
+      }
+      blockedOn = nextBlockedOn;
+    }
+    if (blockedOn !== null) {
+      nativeEvent.stopPropagation();
+    }
+    return;
+  }
+
+  // This is not replayable so we'll invoke it but without a target,
+  // in case the event system needs to trace it.
+  dispatchEventForPluginEventSystem(
+    domEventName,
+    eventSystemFlags,
+    nativeEvent,
+    null,
+    targetContainer,
+  );
+}
+
+export function findInstanceBlockingEvent(
+  nativeEvent: AnyNativeEvent,
+): null | Container | SuspenseInstance | ActivityInstance {
+  const nativeEventTarget = getEventTarget(nativeEvent);
+  return findInstanceBlockingTarget(nativeEventTarget);
+}
+
+export let return_targetInst: null | Fiber = null;
+
+// Returns a SuspenseInstance, ActivityInstance or Container if it's blocked.
+// The return_targetInst field above is conceptually part of the return value.
+export function findInstanceBlockingTarget(
+  targetNode: Node,
+): null | Container | SuspenseInstance | ActivityInstance {
+  // TODO: Warn if _enabled is false.
+
+  return_targetInst = null;
+
+  let targetInst = getClosestInstanceFromNode(targetNode);
+
+  if (targetInst !== null) {
+    const nearestMounted = getNearestMountedFiber(targetInst);
+    if (nearestMounted === null) {
+      // This tree has been unmounted already. Dispatch without a target.
+      targetInst = null;
+    } else {
+      const tag = nearestMounted.tag;
+      if (tag === SuspenseComponent) {
+        const 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 === ActivityComponent) {
+        const instance = getActivityInstanceFromFiber(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 (isRootDehydrated(root)) {
+          // 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;
+      }
+    }
+  }
+  return_targetInst = targetInst;
+  // We're not blocked on anything.
+  return null;
+}
+
+export function getEventPriority(domEventName: DOMEventName): EventPriority {
+  switch (domEventName) {
+    // Used by SimpleEventPlugin:
+    case 'beforetoggle':
+    case 'cancel':
+    case 'click':
+    case 'close':
+    case 'contextmenu':
+    case 'copy':
+    case 'cut':
+    case 'auxclick':
+    case 'dblclick':
+    case 'dragend':
+    case 'dragstart':
+    case 'drop':
+    case 'focusin':
+    case 'focusout':
+    case 'input':
+    case 'invalid':
+    case 'keydown':
+    case 'keypress':
+    case 'keyup':
+    case 'mousedown':
+    case 'mouseup':
+    case 'paste':
+    case 'pause':
+    case 'play':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+    case 'ratechange':
+    case 'reset':
+    case 'seeked':
+    case 'submit':
+    case 'toggle':
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'volumechange':
+    // Used by polyfills: (fall through)
+    case 'change':
+    case 'selectionchange':
+    case 'textInput':
+    case 'compositionstart':
+    case 'compositionend':
+    case 'compositionupdate':
+    // Only enableCreateEventHandleAPI: (fall through)
+    case 'beforeblur':
+    case 'afterblur':
+    // Not used by React but could be by user code: (fall through)
+    case 'beforeinput':
+    case 'blur':
+    case 'fullscreenchange':
+    case 'focus':
+    case 'hashchange':
+    case 'popstate':
+    case 'select':
+    case 'selectstart':
+      return DiscreteEventPriority;
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'mousemove':
+    case 'mouseout':
+    case 'mouseover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'resize':
+    case 'scroll':
+    case 'touchmove':
+    case 'wheel':
+    // Not used by React but could be by user code: (fall through)
+    case 'mouseenter':
+    case 'mouseleave':
+    case 'pointerenter':
+    case 'pointerleave':
+      return ContinuousEventPriority;
+    case 'message': {
+      // We might be in the Scheduler callback.
+      // Eventually this mechanism will be replaced by a check
+      // of the current priority on the native scheduler.
+      const schedulerPriority = getCurrentSchedulerPriorityLevel();
+      switch (schedulerPriority) {
+        case ImmediateSchedulerPriority:
+          return DiscreteEventPriority;
+        case UserBlockingSchedulerPriority:
+          return ContinuousEventPriority;
+        case NormalSchedulerPriority:
+        case LowSchedulerPriority:
+          // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
+          return DefaultEventPriority;
+        case IdleSchedulerPriority:
+          return IdleEventPriority;
+        default:
+          return DefaultEventPriority;
+      }
+    }
+    default:
+      return DefaultEventPriority;
+  }
+}
diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventReplaying.js b/packages/react-dom-bindings/src/events/ReactDOMEventReplaying.js
new file mode 100644
index 00000000000..2763b2fc129
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/ReactDOMEventReplaying.js
@@ -0,0 +1,675 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../events/PluginModuleType';
+import type {
+  Container,
+  ActivityInstance,
+  SuspenseInstance,
+} from '../client/ReactFiberConfigDOM';
+import type {DOMEventName} from '../events/DOMEventNames';
+import type {EventSystemFlags} from './EventSystemFlags';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
+
+import {
+  unstable_scheduleCallback as scheduleCallback,
+  unstable_NormalPriority as NormalPriority,
+} from 'scheduler';
+import {
+  getNearestMountedFiber,
+  getContainerFromFiber,
+  getActivityInstanceFromFiber,
+  getSuspenseInstanceFromFiber,
+} from 'react-reconciler/src/ReactFiberTreeReflection';
+import {
+  findInstanceBlockingEvent,
+  findInstanceBlockingTarget,
+} from './ReactDOMEventListener';
+import {setReplayingEvent, resetReplayingEvent} from './CurrentReplayingEvent';
+import {
+  getInstanceFromNode,
+  getClosestInstanceFromNode,
+  getFiberCurrentPropsFromNode,
+} from '../client/ReactDOMComponentTree';
+import {
+  HostRoot,
+  ActivityComponent,
+  SuspenseComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
+import {dispatchReplayedFormAction} from './plugins/FormActionEventPlugin';
+import {
+  resolveUpdatePriority,
+  runWithPriority as attemptHydrationAtPriority,
+} from '../client/ReactDOMUpdatePriority';
+
+import {
+  attemptContinuousHydration,
+  attemptHydrationAtCurrentPriority,
+} from 'react-reconciler/src/ReactFiberReconciler';
+
+import {enableHydrationChangeEvent} from 'shared/ReactFeatureFlags';
+
+// TODO: Upgrade this definition once we're on a newer version of Flow that
+// has this definition built-in.
+type PointerEventType = Event & {
+  pointerId: number,
+  relatedTarget: EventTarget | null,
+  ...
+};
+
+type QueuedReplayableEvent = {
+  blockedOn: null | Container | ActivityInstance | SuspenseInstance,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+  targetContainers: Array<EventTarget>,
+};
+
+let hasScheduledReplayAttempt = 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.
+const queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
+const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
+// We could consider replaying selectionchange and touchmoves too.
+
+const queuedChangeEventTargets: Array<EventTarget> = [];
+
+type QueuedHydrationTarget = {
+  blockedOn: null | Container | ActivityInstance | SuspenseInstance,
+  target: Node,
+  priority: EventPriority,
+};
+const queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
+
+const discreteReplayableEvents: Array<DOMEventName> = [
+  'mousedown',
+  'mouseup',
+  'touchcancel',
+  'touchend',
+  'touchstart',
+  'auxclick',
+  'dblclick',
+  'pointercancel',
+  'pointerdown',
+  'pointerup',
+  'dragend',
+  'dragstart',
+  'drop',
+  'compositionend',
+  'compositionstart',
+  'keydown',
+  'keypress',
+  'keyup',
+  'input',
+  'textInput', // Intentionally camelCase
+  'copy',
+  'cut',
+  'paste',
+  'click',
+  'change',
+  'contextmenu',
+  'reset',
+  // 'submit', // stopPropagation blocks the replay mechanism
+];
+
+export function isDiscreteEventThatRequiresHydration(
+  eventType: DOMEventName,
+): boolean {
+  return discreteReplayableEvents.indexOf(eventType) > -1;
+}
+
+function createQueuedReplayableEvent(
+  blockedOn: null | Container | ActivityInstance | SuspenseInstance,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+): QueuedReplayableEvent {
+  return {
+    blockedOn,
+    domEventName,
+    eventSystemFlags,
+    nativeEvent,
+    targetContainers: [targetContainer],
+  };
+}
+
+// Resets the replaying for this type of continuous event to no event.
+export function clearIfContinuousEvent(
+  domEventName: DOMEventName,
+  nativeEvent: AnyNativeEvent,
+): void {
+  switch (domEventName) {
+    case 'focusin':
+    case 'focusout':
+      queuedFocus = null;
+      break;
+    case 'dragenter':
+    case 'dragleave':
+      queuedDrag = null;
+      break;
+    case 'mouseover':
+    case 'mouseout':
+      queuedMouse = null;
+      break;
+    case 'pointerover':
+    case 'pointerout': {
+      const pointerId = ((nativeEvent: any): PointerEventType).pointerId;
+      queuedPointers.delete(pointerId);
+      break;
+    }
+    case 'gotpointercapture':
+    case 'lostpointercapture': {
+      const pointerId = ((nativeEvent: any): PointerEventType).pointerId;
+      queuedPointerCaptures.delete(pointerId);
+      break;
+    }
+  }
+}
+
+function accumulateOrCreateContinuousQueuedReplayableEvent(
+  existingQueuedEvent: null | QueuedReplayableEvent,
+  blockedOn: null | Container | ActivityInstance | SuspenseInstance,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+): QueuedReplayableEvent {
+  if (
+    existingQueuedEvent === null ||
+    existingQueuedEvent.nativeEvent !== nativeEvent
+  ) {
+    const queuedEvent = createQueuedReplayableEvent(
+      blockedOn,
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+    if (blockedOn !== null) {
+      const 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 the targetContainers, and
+  // store a single event to be replayed.
+  existingQueuedEvent.eventSystemFlags |= eventSystemFlags;
+  const targetContainers = existingQueuedEvent.targetContainers;
+  if (
+    targetContainer !== null &&
+    targetContainers.indexOf(targetContainer) === -1
+  ) {
+    targetContainers.push(targetContainer);
+  }
+  return existingQueuedEvent;
+}
+
+export function queueIfContinuousEvent(
+  blockedOn: null | Container | ActivityInstance | SuspenseInstance,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  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 (domEventName) {
+    case 'focusin': {
+      const focusEvent = ((nativeEvent: any): FocusEvent);
+      queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(
+        queuedFocus,
+        blockedOn,
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        focusEvent,
+      );
+      return true;
+    }
+    case 'dragenter': {
+      const dragEvent = ((nativeEvent: any): DragEvent);
+      queuedDrag = accumulateOrCreateContinuousQueuedReplayableEvent(
+        queuedDrag,
+        blockedOn,
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        dragEvent,
+      );
+      return true;
+    }
+    case 'mouseover': {
+      const mouseEvent = ((nativeEvent: any): MouseEvent);
+      queuedMouse = accumulateOrCreateContinuousQueuedReplayableEvent(
+        queuedMouse,
+        blockedOn,
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        mouseEvent,
+      );
+      return true;
+    }
+    case 'pointerover': {
+      const pointerEvent = ((nativeEvent: any): PointerEventType);
+      const pointerId = pointerEvent.pointerId;
+      queuedPointers.set(
+        pointerId,
+        accumulateOrCreateContinuousQueuedReplayableEvent(
+          queuedPointers.get(pointerId) || null,
+          blockedOn,
+          domEventName,
+          eventSystemFlags,
+          targetContainer,
+          pointerEvent,
+        ),
+      );
+      return true;
+    }
+    case 'gotpointercapture': {
+      const pointerEvent = ((nativeEvent: any): PointerEventType);
+      const pointerId = pointerEvent.pointerId;
+      queuedPointerCaptures.set(
+        pointerId,
+        accumulateOrCreateContinuousQueuedReplayableEvent(
+          queuedPointerCaptures.get(pointerId) || null,
+          blockedOn,
+          domEventName,
+          eventSystemFlags,
+          targetContainer,
+          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 findInstanceBlockingEvent.
+  // Try to unify them. It's a bit tricky since it would require two return
+  // values.
+  const targetInst = getClosestInstanceFromNode(queuedTarget.target);
+  if (targetInst !== null) {
+    const nearestMounted = getNearestMountedFiber(targetInst);
+    if (nearestMounted !== null) {
+      const tag = nearestMounted.tag;
+      if (tag === SuspenseComponent) {
+        const instance = getSuspenseInstanceFromFiber(nearestMounted);
+        if (instance !== null) {
+          // We're blocked on hydrating this boundary.
+          // Increase its priority.
+          queuedTarget.blockedOn = instance;
+          attemptHydrationAtPriority(queuedTarget.priority, () => {
+            attemptHydrationAtCurrentPriority(nearestMounted);
+          });
+
+          return;
+        }
+      } else if (tag === ActivityComponent) {
+        const instance = getActivityInstanceFromFiber(nearestMounted);
+        if (instance !== null) {
+          // We're blocked on hydrating this boundary.
+          // Increase its priority.
+          queuedTarget.blockedOn = instance;
+          attemptHydrationAtPriority(queuedTarget.priority, () => {
+            attemptHydrationAtCurrentPriority(nearestMounted);
+          });
+
+          return;
+        }
+      } else if (tag === HostRoot) {
+        const root: FiberRoot = nearestMounted.stateNode;
+        if (isRootDehydrated(root)) {
+          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 {
+  const updatePriority = resolveUpdatePriority();
+  const queuedTarget: QueuedHydrationTarget = {
+    blockedOn: null,
+    target: target,
+    priority: updatePriority,
+  };
+  let i = 0;
+  for (; i < queuedExplicitHydrationTargets.length; i++) {
+    // Stop once we hit the first target with lower priority than
+    if (
+      !isHigherEventPriority(
+        updatePriority,
+        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;
+  }
+  const targetContainers = queuedEvent.targetContainers;
+  while (targetContainers.length > 0) {
+    const nextBlockedOn = findInstanceBlockingEvent(queuedEvent.nativeEvent);
+    if (nextBlockedOn === null) {
+      const nativeEvent = queuedEvent.nativeEvent;
+      const nativeEventClone = new nativeEvent.constructor(
+        nativeEvent.type,
+        (nativeEvent: any),
+      );
+      setReplayingEvent(nativeEventClone);
+      nativeEvent.target.dispatchEvent(nativeEventClone);
+      resetReplayingEvent();
+    } else {
+      // We're still blocked. Try again later.
+      const fiber = getInstanceFromNode(nextBlockedOn);
+      if (fiber !== null) {
+        attemptContinuousHydration(fiber);
+      }
+      queuedEvent.blockedOn = nextBlockedOn;
+      return false;
+    }
+    // This target container was successfully dispatched. Try the next.
+    targetContainers.shift();
+  }
+  return true;
+}
+
+function attemptReplayContinuousQueuedEventInMap(
+  queuedEvent: QueuedReplayableEvent,
+  key: number,
+  map: Map<number, QueuedReplayableEvent>,
+): void {
+  if (attemptReplayContinuousQueuedEvent(queuedEvent)) {
+    map.delete(key);
+  }
+}
+
+function replayChangeEvent(target: EventTarget): void {
+  // Dispatch a fake "change" event for the input.
+  const element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement =
+    (target: any);
+  if (element.nodeName === 'INPUT') {
+    if (element.type === 'checkbox' || element.type === 'radio') {
+      // Checkboxes always fire a click event regardless of how the change was made.
+      const EventCtr =
+        typeof PointerEvent === 'function' ? PointerEvent : Event;
+      target.dispatchEvent(new EventCtr('click', {bubbles: true}));
+      // For checkboxes the input event uses the Event constructor instead of InputEvent.
+      target.dispatchEvent(new Event('input', {bubbles: true}));
+    } else {
+      if (typeof InputEvent === 'function') {
+        target.dispatchEvent(new InputEvent('input', {bubbles: true}));
+      }
+    }
+  } else if (element.nodeName === 'TEXTAREA') {
+    if (typeof InputEvent === 'function') {
+      target.dispatchEvent(new InputEvent('input', {bubbles: true}));
+    }
+  }
+  target.dispatchEvent(new Event('change', {bubbles: true}));
+}
+
+function replayUnblockedEvents() {
+  hasScheduledReplayAttempt = false;
+  // 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);
+  if (enableHydrationChangeEvent) {
+    for (let i = 0; i < queuedChangeEventTargets.length; i++) {
+      replayChangeEvent(queuedChangeEventTargets[i]);
+    }
+    queuedChangeEventTargets.length = 0;
+  }
+}
+
+export function flushEventReplaying(): void {
+  // Synchronously flush any event replaying so that it gets observed before
+  // any new updates are applied.
+  if (hasScheduledReplayAttempt) {
+    replayUnblockedEvents();
+  }
+}
+
+export function queueChangeEvent(target: EventTarget): void {
+  if (enableHydrationChangeEvent) {
+    queuedChangeEventTargets.push(target);
+    if (!hasScheduledReplayAttempt) {
+      hasScheduledReplayAttempt = true;
+    }
+  }
+}
+
+function scheduleCallbackIfUnblocked(
+  queuedEvent: QueuedReplayableEvent,
+  unblocked: Container | SuspenseInstance | ActivityInstance,
+) {
+  if (queuedEvent.blockedOn === unblocked) {
+    queuedEvent.blockedOn = null;
+    if (!hasScheduledReplayAttempt) {
+      hasScheduledReplayAttempt = true;
+      if (!enableHydrationChangeEvent) {
+        // 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);
+      }
+    }
+  }
+}
+
+type FormAction = FormData => void | Promise<void>;
+
+type FormReplayingQueue = Array<any>; // [form, submitter or action, formData...]
+
+let lastScheduledReplayQueue: null | FormReplayingQueue = null;
+
+function replayUnblockedFormActions(formReplayingQueue: FormReplayingQueue) {
+  if (lastScheduledReplayQueue === formReplayingQueue) {
+    lastScheduledReplayQueue = null;
+  }
+  for (let i = 0; i < formReplayingQueue.length; i += 3) {
+    const form: HTMLFormElement = formReplayingQueue[i];
+    const submitterOrAction:
+      | null
+      | HTMLInputElement
+      | HTMLButtonElement
+      | FormAction = formReplayingQueue[i + 1];
+    const formData: FormData = formReplayingQueue[i + 2];
+    if (typeof submitterOrAction !== 'function') {
+      // This action is not hydrated yet. This might be because it's blocked on
+      // a different React instance or higher up our tree.
+      const blockedOn = findInstanceBlockingTarget(submitterOrAction || form);
+      if (blockedOn === null) {
+        // We're not blocked but we don't have an action. This must mean that
+        // this is in another React instance. We'll just skip past it.
+        continue;
+      } else {
+        // We're blocked on something in this React instance. We'll retry later.
+        break;
+      }
+    }
+    const formInst = getInstanceFromNode(form);
+    if (formInst !== null) {
+      // This is part of our instance.
+      // We're ready to replay this. Let's delete it from the queue.
+      formReplayingQueue.splice(i, 3);
+      i -= 3;
+      dispatchReplayedFormAction(formInst, form, submitterOrAction, formData);
+      // Continue without incrementing the index.
+      continue;
+    }
+    // This form must've been part of a different React instance.
+    // If we want to preserve ordering between React instances on the same root
+    // we'd need some way for the other instance to ping us when it's done.
+    // We'll just skip this and let the other instance execute it.
+  }
+}
+
+function scheduleReplayQueueIfNeeded(formReplayingQueue: FormReplayingQueue) {
+  // Schedule a callback to execute any unblocked form actions in.
+  // We only keep track of the last queue which means that if multiple React oscillate
+  // commits, we could schedule more callbacks than necessary but it's not a big deal
+  // and we only really except one instance.
+  if (lastScheduledReplayQueue !== formReplayingQueue) {
+    lastScheduledReplayQueue = formReplayingQueue;
+    scheduleCallback(NormalPriority, () =>
+      replayUnblockedFormActions(formReplayingQueue),
+    );
+  }
+}
+
+export function retryIfBlockedOn(
+  unblocked: Container | SuspenseInstance | ActivityInstance,
+): void {
+  if (queuedFocus !== null) {
+    scheduleCallbackIfUnblocked(queuedFocus, unblocked);
+  }
+  if (queuedDrag !== null) {
+    scheduleCallbackIfUnblocked(queuedDrag, unblocked);
+  }
+  if (queuedMouse !== null) {
+    scheduleCallbackIfUnblocked(queuedMouse, unblocked);
+  }
+  const unblock = (queuedEvent: QueuedReplayableEvent) =>
+    scheduleCallbackIfUnblocked(queuedEvent, unblocked);
+  queuedPointers.forEach(unblock);
+  queuedPointerCaptures.forEach(unblock);
+
+  for (let i = 0; i < queuedExplicitHydrationTargets.length; i++) {
+    const queuedTarget = queuedExplicitHydrationTargets[i];
+    if (queuedTarget.blockedOn === unblocked) {
+      queuedTarget.blockedOn = null;
+    }
+  }
+
+  while (queuedExplicitHydrationTargets.length > 0) {
+    const nextExplicitTarget = queuedExplicitHydrationTargets[0];
+    if (nextExplicitTarget.blockedOn !== null) {
+      // We're still blocked.
+      break;
+    } else {
+      attemptExplicitHydrationTarget(nextExplicitTarget);
+      if (nextExplicitTarget.blockedOn === null) {
+        // We're unblocked.
+        queuedExplicitHydrationTargets.shift();
+      }
+    }
+  }
+
+  // Check the document if there are any queued form actions.
+  // If there's no ownerDocument, then this is the document.
+  const root = unblocked.ownerDocument || unblocked;
+  const formReplayingQueue: void | FormReplayingQueue = (root: any)
+    .$$reactFormReplay;
+  if (formReplayingQueue != null) {
+    for (let i = 0; i < formReplayingQueue.length; i += 3) {
+      const form: HTMLFormElement = formReplayingQueue[i];
+      const submitterOrAction:
+        | null
+        | HTMLInputElement
+        | HTMLButtonElement
+        | FormAction = formReplayingQueue[i + 1];
+      const formProps = getFiberCurrentPropsFromNode(form);
+      if (typeof submitterOrAction === 'function') {
+        // This action has already resolved. We're just waiting to dispatch it.
+        if (!formProps) {
+          // This was not part of this React instance. It might have been recently
+          // unblocking us from dispatching our events. So let's make sure we schedule
+          // a retry.
+          scheduleReplayQueueIfNeeded(formReplayingQueue);
+        }
+        continue;
+      }
+      let target: Node = form;
+      if (formProps) {
+        // This form belongs to this React instance but the submitter might
+        // not be done yet.
+        let action: null | FormAction = null;
+        const submitter = submitterOrAction;
+        if (submitter && submitter.hasAttribute('formAction')) {
+          // The submitter is the one that is responsible for the action.
+          target = submitter;
+          const submitterProps = getFiberCurrentPropsFromNode(submitter);
+          if (submitterProps) {
+            // The submitter is part of this instance.
+            action = (submitterProps: any).formAction;
+          } else {
+            const blockedOn = findInstanceBlockingTarget(target);
+            if (blockedOn !== null) {
+              // The submitter is not hydrated yet. We'll wait for it.
+              continue;
+            }
+            // The submitter must have been a part of a different React instance.
+            // Except the form isn't. We don't dispatch actions in this scenario.
+          }
+        } else {
+          action = (formProps: any).action;
+        }
+        if (typeof action === 'function') {
+          formReplayingQueue[i + 1] = action;
+        } else {
+          // Something went wrong so let's just delete this action.
+          formReplayingQueue.splice(i, 3);
+          i -= 3;
+        }
+        // Schedule a replay in case this unblocked something.
+        scheduleReplayQueueIfNeeded(formReplayingQueue);
+        continue;
+      }
+      // Something above this target is still blocked so we can't continue yet.
+      // We're not sure if this target is actually part of this React instance
+      // yet. It could be a different React as a child but at least some parent is.
+      // We must continue for any further queued actions.
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/events/ReactDOMUpdateBatching.js b/packages/react-dom-bindings/src/events/ReactDOMUpdateBatching.js
new file mode 100644
index 00000000000..a2995577491
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/ReactDOMUpdateBatching.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMControlledComponent';
+
+import {
+  batchedUpdates as batchedUpdatesImpl,
+  discreteUpdates as discreteUpdatesImpl,
+  flushSyncWork,
+} from 'react-reconciler/src/ReactFiberReconciler';
+
+// 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.
+
+let isInsideEventHandler = 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.
+    // TODO: Restore state in the microtask, after the discrete updates flush,
+    // instead of early flushing them here.
+    // @TODO Should move to flushSyncWork once legacy mode is removed but since this flushSync
+    // flushes passive effects we can't do this yet.
+    flushSyncWork();
+    restoreStateIfNeeded();
+  }
+}
+
+export function batchedUpdates(fn, a, b) {
+  if (isInsideEventHandler) {
+    // If we are currently inside another batch, we need to wait until it
+    // fully completes before restoring state.
+    return fn(a, b);
+  }
+  isInsideEventHandler = true;
+  try {
+    return batchedUpdatesImpl(fn, a, b);
+  } finally {
+    isInsideEventHandler = false;
+    finishEventHandler();
+  }
+}
+
+// TODO: Replace with flushSync
+export function discreteUpdates(fn, a, b, c, d) {
+  return discreteUpdatesImpl(fn, a, b, c, d);
+}
diff --git a/packages/react-dom-bindings/src/events/ReactSyntheticEventType.js b/packages/react-dom-bindings/src/events/ReactSyntheticEventType.js
new file mode 100644
index 00000000000..86af2885e83
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/ReactSyntheticEventType.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Flow type for SyntheticEvent class that includes private properties
+ * @flow
+ */
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {DOMEventName} from './DOMEventNames';
+
+export type DispatchConfig = {
+  dependencies?: Array<DOMEventName>,
+  phasedRegistrationNames: {
+    bubbled: null | string,
+    captured: null | string,
+  },
+  registrationName?: string,
+};
+
+type BaseSyntheticEvent = {
+  isPersistent: () => boolean,
+  isPropagationStopped: () => boolean,
+  _dispatchInstances?: null | Array<Fiber | null> | Fiber,
+  _dispatchListeners?: null | Array<Function> | Function,
+  _targetInst: Fiber,
+  nativeEvent: Event,
+  target?: mixed,
+  relatedTarget?: mixed,
+  type: string,
+  currentTarget: null | EventTarget,
+};
+
+export type KnownReactSyntheticEvent = BaseSyntheticEvent & {
+  _reactName: string,
+};
+export type UnknownReactSyntheticEvent = BaseSyntheticEvent & {
+  _reactName: null,
+};
+
+export type ReactSyntheticEvent =
+  | KnownReactSyntheticEvent
+  | UnknownReactSyntheticEvent;
diff --git a/packages/react-dom-bindings/src/events/SyntheticEvent.js b/packages/react-dom-bindings/src/events/SyntheticEvent.js
new file mode 100644
index 00000000000..acd50cf8e0c
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/SyntheticEvent.js
@@ -0,0 +1,603 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 valid-typeof: 0 */
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+import assign from 'shared/assign';
+import getEventCharCode from './getEventCharCode';
+
+type EventInterfaceType = {
+  [propName: string]: 0 | ((event: {[propName: string]: mixed, ...}) => mixed),
+};
+
+function functionThatReturnsTrue() {
+  return true;
+}
+
+function functionThatReturnsFalse() {
+  return false;
+}
+
+// This is intentionally a factory so that we have different returned constructors.
+// If we had a single constructor, it would be megamorphic and engines would deopt.
+function createSyntheticEvent(Interface: EventInterfaceType) {
+  /**
+   * Synthetic events are dispatched by event plugins, typically in response to a
+   * top-level event delegation handler.
+   *
+   * These systems should generally use pooling to reduce the frequency of garbage
+   * collection. The system should check `isPersistent` to determine whether the
+   * event should be released into the pool after being dispatched. Users that
+   * need a persisted event should invoke `persist`.
+   *
+   * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
+   * normalizing browser quirks. Subclasses do not necessarily have to implement a
+   * DOM interface; custom application-specific events can also subclass this.
+   */
+  // $FlowFixMe[missing-this-annot]
+  function SyntheticBaseEvent(
+    reactName: string | null,
+    reactEventType: string,
+    targetInst: Fiber | null,
+    nativeEvent: {[propName: string]: mixed, ...},
+    nativeEventTarget: null | EventTarget,
+  ) {
+    this._reactName = reactName;
+    this._targetInst = targetInst;
+    this.type = reactEventType;
+    this.nativeEvent = nativeEvent;
+    this.target = nativeEventTarget;
+    this.currentTarget = null;
+
+    for (const propName in Interface) {
+      if (!Interface.hasOwnProperty(propName)) {
+        continue;
+      }
+      const normalize = Interface[propName];
+      if (normalize) {
+        this[propName] = normalize(nativeEvent);
+      } else {
+        this[propName] = nativeEvent[propName];
+      }
+    }
+
+    const defaultPrevented =
+      nativeEvent.defaultPrevented != null
+        ? nativeEvent.defaultPrevented
+        : nativeEvent.returnValue === false;
+    if (defaultPrevented) {
+      this.isDefaultPrevented = functionThatReturnsTrue;
+    } else {
+      this.isDefaultPrevented = functionThatReturnsFalse;
+    }
+    this.isPropagationStopped = functionThatReturnsFalse;
+    return this;
+  }
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  assign(SyntheticBaseEvent.prototype, {
+    // $FlowFixMe[missing-this-annot]
+    preventDefault: function () {
+      this.defaultPrevented = true;
+      const event = this.nativeEvent;
+      if (!event) {
+        return;
+      }
+
+      if (event.preventDefault) {
+        event.preventDefault();
+        // $FlowFixMe[illegal-typeof] - flow is not aware of `unknown` in IE
+      } else if (typeof event.returnValue !== 'unknown') {
+        event.returnValue = false;
+      }
+      this.isDefaultPrevented = functionThatReturnsTrue;
+    },
+
+    // $FlowFixMe[missing-this-annot]
+    stopPropagation: function () {
+      const event = this.nativeEvent;
+      if (!event) {
+        return;
+      }
+
+      if (event.stopPropagation) {
+        event.stopPropagation();
+        // $FlowFixMe[illegal-typeof] - flow is not aware of `unknown` in IE
+      } else if (typeof event.cancelBubble !== 'unknown') {
+        // The ChangeEventPlugin registers a "propertychange" event for
+        // IE. This event does not support bubbling or cancelling, and
+        // any references to cancelBubble throw "Member not found".  A
+        // typeof check of "unknown" circumvents this issue (and is also
+        // IE specific).
+        event.cancelBubble = true;
+      }
+
+      this.isPropagationStopped = functionThatReturnsTrue;
+    },
+
+    /**
+     * We release all dispatched `SyntheticEvent`s after each event loop, adding
+     * them back into the pool. This allows a way to hold onto a reference that
+     * won't be added back into the pool.
+     */
+    persist: function () {
+      // Modern event system doesn't use pooling.
+    },
+
+    /**
+     * Checks if this event should be released back into the pool.
+     *
+     * @return {boolean} True if this should not be released, false otherwise.
+     */
+    isPersistent: functionThatReturnsTrue,
+  });
+  return SyntheticBaseEvent;
+}
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const EventInterface: EventInterfaceType = {
+  eventPhase: 0,
+  bubbles: 0,
+  cancelable: 0,
+  timeStamp: function (event: {[propName: string]: mixed}) {
+    return event.timeStamp || Date.now();
+  },
+  defaultPrevented: 0,
+  isTrusted: 0,
+};
+export const SyntheticEvent: $FlowFixMe = createSyntheticEvent(EventInterface);
+
+const UIEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  view: 0,
+  detail: 0,
+};
+export const SyntheticUIEvent: $FlowFixMe =
+  createSyntheticEvent(UIEventInterface);
+
+let lastMovementX;
+let lastMovementY;
+let lastMouseEvent: ?{[propName: string]: mixed};
+
+function updateMouseMovementPolyfillState(event: {[propName: string]: mixed}) {
+  if (event !== lastMouseEvent) {
+    if (lastMouseEvent && event.type === 'mousemove') {
+      // $FlowFixMe[unsafe-arithmetic] assuming this is a number
+      lastMovementX = event.screenX - lastMouseEvent.screenX;
+      // $FlowFixMe[unsafe-arithmetic] assuming this is a number
+      lastMovementY = event.screenY - lastMouseEvent.screenY;
+    } else {
+      lastMovementX = 0;
+      lastMovementY = 0;
+    }
+    lastMouseEvent = event;
+  }
+}
+
+/**
+ * @interface MouseEvent
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const MouseEventInterface: EventInterfaceType = {
+  ...UIEventInterface,
+  screenX: 0,
+  screenY: 0,
+  clientX: 0,
+  clientY: 0,
+  pageX: 0,
+  pageY: 0,
+  ctrlKey: 0,
+  shiftKey: 0,
+  altKey: 0,
+  metaKey: 0,
+  getModifierState: getEventModifierState,
+  button: 0,
+  buttons: 0,
+  relatedTarget: function (event) {
+    if (event.relatedTarget === undefined)
+      return event.fromElement === event.srcElement
+        ? event.toElement
+        : event.fromElement;
+
+    return event.relatedTarget;
+  },
+  movementX: function (event) {
+    if ('movementX' in event) {
+      return event.movementX;
+    }
+    updateMouseMovementPolyfillState(event);
+    return lastMovementX;
+  },
+  movementY: function (event) {
+    if ('movementY' in event) {
+      return event.movementY;
+    }
+    // Don't need to call updateMouseMovementPolyfillState() here
+    // because it's guaranteed to have already run when movementX
+    // was copied.
+    return lastMovementY;
+  },
+};
+
+export const SyntheticMouseEvent: $FlowFixMe =
+  createSyntheticEvent(MouseEventInterface);
+
+/**
+ * @interface DragEvent
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const DragEventInterface: EventInterfaceType = {
+  ...MouseEventInterface,
+  dataTransfer: 0,
+};
+export const SyntheticDragEvent: $FlowFixMe =
+  createSyntheticEvent(DragEventInterface);
+
+/**
+ * @interface FocusEvent
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const FocusEventInterface: EventInterfaceType = {
+  ...UIEventInterface,
+  relatedTarget: 0,
+};
+export const SyntheticFocusEvent: $FlowFixMe =
+  createSyntheticEvent(FocusEventInterface);
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
+ */
+const AnimationEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  animationName: 0,
+  elapsedTime: 0,
+  pseudoElement: 0,
+};
+export const SyntheticAnimationEvent: $FlowFixMe = createSyntheticEvent(
+  AnimationEventInterface,
+);
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/clipboard-apis/
+ */
+const ClipboardEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  clipboardData: function (event) {
+    return 'clipboardData' in event
+      ? event.clipboardData
+      : window.clipboardData;
+  },
+};
+export const SyntheticClipboardEvent: $FlowFixMe = createSyntheticEvent(
+  ClipboardEventInterface,
+);
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
+ */
+const CompositionEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  data: 0,
+};
+export const SyntheticCompositionEvent: $FlowFixMe = createSyntheticEvent(
+  CompositionEventInterface,
+);
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
+ *      /#events-inputevents
+ */
+// Happens to share the same list for now.
+export const SyntheticInputEvent = SyntheticCompositionEvent;
+
+/**
+ * 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',
+};
+
+/**
+ * @param {object} nativeEvent Native browser event.
+ * @return {string} Normalized `key` property.
+ */
+function getEventKey(nativeEvent: {[propName: string]: mixed}) {
+  if (nativeEvent.key) {
+    // 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 =
+      // $FlowFixMe[invalid-computed-prop] unable to index with a `mixed` value
+      normalizeKey[nativeEvent.key] || nativeEvent.key;
+    if (key !== 'Unidentified') {
+      return key;
+    }
+  }
+
+  // Browser does not implement `key`, polyfill as much of it as we can.
+  if (nativeEvent.type === 'keypress') {
+    const charCode = getEventCharCode(
+      // $FlowFixMe[incompatible-call] unable to narrow to `KeyboardEvent`
+      nativeEvent,
+    );
+
+    // The enter-key is technically both printable and non-printable and can
+    // thus be captured by `keypress`, no other non-printable key should.
+    return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
+  }
+  if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
+    // While user keyboard layout determines the actual meaning of each
+    // `keyCode` value, almost all function keys have a universal value.
+    // $FlowFixMe[invalid-computed-prop] unable to index with a `mixed` value
+    return translateToKey[nativeEvent.keyCode] || 'Unidentified';
+  }
+  return '';
+}
+
+/**
+ * Translation from modifier key to the associated property in the event.
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
+ */
+const modifierKeyToProp = {
+  Alt: 'altKey',
+  Control: 'ctrlKey',
+  Meta: 'metaKey',
+  Shift: 'shiftKey',
+};
+
+// Older browsers (Safari <= 10, iOS Safari <= 10.2) do not support
+// getModifierState. If getModifierState is not supported, we map it to a set of
+// modifier keys exposed by the event. In this case, Lock-keys are not supported.
+// $FlowFixMe[missing-local-annot]
+// $FlowFixMe[missing-this-annot]
+function modifierStateGetter(keyArg) {
+  const syntheticEvent = this;
+  const nativeEvent = syntheticEvent.nativeEvent;
+  if (nativeEvent.getModifierState) {
+    return nativeEvent.getModifierState(keyArg);
+  }
+  const keyProp = modifierKeyToProp[keyArg];
+  return keyProp ? !!nativeEvent[keyProp] : false;
+}
+
+function getEventModifierState(nativeEvent: {[propName: string]: mixed}) {
+  return modifierStateGetter;
+}
+
+/**
+ * @interface KeyboardEvent
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const KeyboardEventInterface: EventInterfaceType = {
+  ...UIEventInterface,
+  key: getEventKey,
+  code: 0,
+  location: 0,
+  ctrlKey: 0,
+  shiftKey: 0,
+  altKey: 0,
+  metaKey: 0,
+  repeat: 0,
+  locale: 0,
+  getModifierState: getEventModifierState,
+  // Legacy Interface
+  charCode: function (event: {[propName: string]: mixed}) {
+    // `charCode` is the result of a KeyPress event and represents the value of
+    // the actual printable character.
+
+    // KeyPress is deprecated, but its replacement is not yet final and not
+    // implemented in any major browser. Only KeyPress has charCode.
+    if (event.type === 'keypress') {
+      return getEventCharCode(
+        // $FlowFixMe[incompatible-call] unable to narrow to `KeyboardEvent`
+        event,
+      );
+    }
+    return 0;
+  },
+  keyCode: function (event: {[propName: string]: mixed}) {
+    // `keyCode` is the result of a KeyDown/Up event and represents the value of
+    // physical keyboard key.
+
+    // The actual meaning of the value depends on the users' keyboard layout
+    // which cannot be detected. Assuming that it is a US keyboard layout
+    // provides a surprisingly accurate mapping for US and European users.
+    // Due to this, it is left to the user to implement at this time.
+    if (event.type === 'keydown' || event.type === 'keyup') {
+      return event.keyCode;
+    }
+    return 0;
+  },
+  which: function (event: {[propName: string]: mixed}) {
+    // `which` is an alias for either `keyCode` or `charCode` depending on the
+    // type of the event.
+    if (event.type === 'keypress') {
+      return getEventCharCode(
+        // $FlowFixMe[incompatible-call] unable to narrow to `KeyboardEvent`
+        event,
+      );
+    }
+    if (event.type === 'keydown' || event.type === 'keyup') {
+      return event.keyCode;
+    }
+    return 0;
+  },
+};
+export const SyntheticKeyboardEvent: $FlowFixMe = createSyntheticEvent(
+  KeyboardEventInterface,
+);
+
+/**
+ * @interface PointerEvent
+ * @see http://www.w3.org/TR/pointerevents/
+ */
+const PointerEventInterface: EventInterfaceType = {
+  ...MouseEventInterface,
+  pointerId: 0,
+  width: 0,
+  height: 0,
+  pressure: 0,
+  tangentialPressure: 0,
+  tiltX: 0,
+  tiltY: 0,
+  twist: 0,
+  pointerType: 0,
+  isPrimary: 0,
+};
+export const SyntheticPointerEvent: $FlowFixMe = createSyntheticEvent(
+  PointerEventInterface,
+);
+
+/**
+ * @interface TouchEvent
+ * @see http://www.w3.org/TR/touch-events/
+ */
+const TouchEventInterface: EventInterfaceType = {
+  ...UIEventInterface,
+  touches: 0,
+  targetTouches: 0,
+  changedTouches: 0,
+  altKey: 0,
+  metaKey: 0,
+  ctrlKey: 0,
+  shiftKey: 0,
+  getModifierState: getEventModifierState,
+};
+export const SyntheticTouchEvent: $FlowFixMe =
+  createSyntheticEvent(TouchEventInterface);
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
+ */
+const TransitionEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  propertyName: 0,
+  elapsedTime: 0,
+  pseudoElement: 0,
+};
+export const SyntheticTransitionEvent: $FlowFixMe = createSyntheticEvent(
+  TransitionEventInterface,
+);
+
+/**
+ * @interface WheelEvent
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const WheelEventInterface: EventInterfaceType = {
+  ...MouseEventInterface,
+  deltaX(event: {[propName: string]: mixed}) {
+    return 'deltaX' in event
+      ? event.deltaX
+      : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
+        'wheelDeltaX' in event
+        ? // $FlowFixMe[unsafe-arithmetic] assuming this is a number
+          -event.wheelDeltaX
+        : 0;
+  },
+  deltaY(event: {[propName: string]: mixed}) {
+    return 'deltaY' in event
+      ? event.deltaY
+      : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
+        'wheelDeltaY' in event
+        ? // $FlowFixMe[unsafe-arithmetic] assuming this is a number
+          -event.wheelDeltaY
+        : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
+          'wheelDelta' in event
+          ? // $FlowFixMe[unsafe-arithmetic] assuming this is a number
+            -event.wheelDelta
+          : 0;
+  },
+  deltaZ: 0,
+
+  // Browsers without "deltaMode" is reporting in raw wheel delta where one
+  // notch on the scroll is always +/- 120, roughly equivalent to pixels.
+  // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
+  // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
+  deltaMode: 0,
+};
+export const SyntheticWheelEvent: $FlowFixMe =
+  createSyntheticEvent(WheelEventInterface);
+
+const ToggleEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  newState: 0,
+  oldState: 0,
+};
+export const SyntheticToggleEvent: $FlowFixMe =
+  createSyntheticEvent(ToggleEventInterface);
diff --git a/packages/react-dom-bindings/src/events/TopLevelEventTypes.js b/packages/react-dom-bindings/src/events/TopLevelEventTypes.js
new file mode 100644
index 00000000000..ced0077a072
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/TopLevelEventTypes.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 TopLevelType =
+  | 'abort'
+  // Dynamic and vendor-prefixed at the usage site:
+  // 'animationiteration' |
+  // 'animationend |
+  // 'animationstart' |
+  | 'canplay'
+  | 'canplaythrough'
+  | 'cancel'
+  | 'change'
+  | 'click'
+  | 'close'
+  | 'compositionend'
+  | 'compositionstart'
+  | 'compositionupdate'
+  | 'contextmenu'
+  | 'copy'
+  | 'cut'
+  | 'dblclick'
+  | 'auxclick'
+  | 'drag'
+  | 'dragend'
+  | 'dragenter'
+  | 'dragexit'
+  | 'dragleave'
+  | 'dragover'
+  | 'dragstart'
+  | 'drop'
+  | 'durationchange'
+  | 'emptied'
+  | 'encrypted'
+  | 'ended'
+  | 'error'
+  | 'gotpointercapture'
+  | 'input'
+  | 'invalid'
+  | 'keydown'
+  | 'keypress'
+  | 'keyup'
+  | 'load'
+  | 'loadstart'
+  | 'loadeddata'
+  | 'loadedmetadata'
+  | 'lostpointercapture'
+  | 'mousedown'
+  | 'mousemove'
+  | 'mouseout'
+  | 'mouseover'
+  | 'mouseup'
+  | 'paste'
+  | 'pause'
+  | 'play'
+  | 'playing'
+  | 'pointercancel'
+  | 'pointerdown'
+  | 'pointerenter'
+  | 'pointerleave'
+  | 'pointermove'
+  | 'pointerout'
+  | 'pointerover'
+  | 'pointerup'
+  | 'progress'
+  | 'ratechange'
+  | 'reset'
+  | 'resize'
+  | 'scroll'
+  | 'scrollend'
+  | 'seeked'
+  | 'seeking'
+  | 'selectionchange'
+  | 'stalled'
+  | 'submit'
+  | 'suspend'
+  | 'textInput'
+  | 'timeupdate'
+  | 'toggle'
+  | 'touchcancel'
+  | 'touchend'
+  | 'touchmove'
+  | 'touchstart'
+  // Dynamic and vendor-prefixed at the usage site:
+  // 'transitionend' |
+  | 'volumechange'
+  | 'waiting'
+  | 'wheel'
+  | 'afterblur'
+  | 'beforeblur'
+  | 'focusin'
+  | 'focusout';
diff --git a/packages/react-dom-bindings/src/events/checkPassiveEvents.js b/packages/react-dom-bindings/src/events/checkPassiveEvents.js
new file mode 100644
index 00000000000..bd943d35485
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/checkPassiveEvents.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {canUseDOM} from 'shared/ExecutionEnvironment';
+
+export let passiveBrowserEventsSupported: boolean = 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 (canUseDOM) {
+  try {
+    const options: {
+      passive?: void,
+    } = {};
+    Object.defineProperty(options, 'passive', {
+      get: function () {
+        passiveBrowserEventsSupported = true;
+      },
+    });
+    window.addEventListener('test', options, options);
+    window.removeEventListener('test', options, options);
+  } catch (e) {
+    passiveBrowserEventsSupported = false;
+  }
+}
diff --git a/packages/react-dom-bindings/src/events/forks/EventListener-www.js b/packages/react-dom-bindings/src/events/forks/EventListener-www.js
new file mode 100644
index 00000000000..3684e374b32
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/forks/EventListener-www.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 EventListenerWWW = require('EventListener');
+
+import typeof * as EventListenerType from '../EventListener';
+import typeof * as EventListenerShimType from './EventListener-www';
+
+export function addEventBubbleListener(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+): mixed {
+  return EventListenerWWW.listen(target, eventType, listener);
+}
+
+export function addEventCaptureListener(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+): mixed {
+  return EventListenerWWW.capture(target, eventType, listener);
+}
+
+export function addEventCaptureListenerWithPassiveFlag(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+  passive: boolean,
+): mixed {
+  return EventListenerWWW.captureWithPassiveFlag(
+    target,
+    eventType,
+    listener,
+    passive,
+  );
+}
+
+export function addEventBubbleListenerWithPassiveFlag(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+  passive: boolean,
+): mixed {
+  return EventListenerWWW.bubbleWithPassiveFlag(
+    target,
+    eventType,
+    listener,
+    passive,
+  );
+}
+
+export function removeEventListener(
+  target: EventTarget,
+  eventType: string,
+  listener: Function,
+  capture: boolean,
+) {
+  listener.remove();
+}
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): EventListenerType): EventListenerShimType): EventListenerType);
diff --git a/packages/react-dom-bindings/src/events/getEventCharCode.js b/packages/react-dom-bindings/src/events/getEventCharCode.js
new file mode 100644
index 00000000000..8a96264b174
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/getEventCharCode.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * `charCode` represents the actual "character code" and is safe to use with
+ * `String.fromCharCode`. As such, only keys that correspond to printable
+ * characters produce a valid `charCode`, the only exception to this is Enter.
+ * The Tab-key is considered non-printable and does not have a `charCode`,
+ * presumably because it does not produce a tab-character in browsers.
+ *
+ * @param {object} nativeEvent Native browser event.
+ * @return {number} Normalized `charCode` property.
+ */
+function getEventCharCode(nativeEvent: KeyboardEvent): number {
+  let charCode;
+  const keyCode = nativeEvent.keyCode;
+
+  if ('charCode' in nativeEvent) {
+    charCode = nativeEvent.charCode;
+
+    // FF does not set `charCode` for the Enter-key, check against `keyCode`.
+    if (charCode === 0 && keyCode === 13) {
+      charCode = 13;
+    }
+  } else {
+    // IE8 does not implement `charCode`, but `keyCode` has the correct value.
+    charCode = keyCode;
+  }
+
+  // IE and Edge (on Windows) and Chrome / Safari (on Windows and Linux)
+  // report Enter as charCode 10 when ctrl is pressed.
+  if (charCode === 10) {
+    charCode = 13;
+  }
+
+  // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
+  // Must not discard the (non-)printable Enter-key.
+  if (charCode >= 32 || charCode === 13) {
+    return charCode;
+  }
+
+  return 0;
+}
+
+export default getEventCharCode;
diff --git a/packages/react-dom-bindings/src/events/getEventTarget.js b/packages/react-dom-bindings/src/events/getEventTarget.js
new file mode 100644
index 00000000000..2a7b65a26eb
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/getEventTarget.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {TEXT_NODE} from '../client/HTMLNodeType';
+
+/**
+ * Gets the target node from a native browser event by accounting for
+ * inconsistencies in browser DOM APIs.
+ *
+ * @param {object} nativeEvent Native browser event.
+ * @return {DOMEventTarget} Target node.
+ */
+function getEventTarget(nativeEvent) {
+  // Fallback to nativeEvent.srcElement for IE9
+  // https://github.com/facebook/react/issues/12506
+  let target = nativeEvent.target || nativeEvent.srcElement || window;
+
+  // Normalize SVG <use> element events #4963
+  if (target.correspondingUseElement) {
+    target = target.correspondingUseElement;
+  }
+
+  // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
+  // @see http://www.quirksmode.org/js/events_properties.html
+  return target.nodeType === TEXT_NODE ? target.parentNode : target;
+}
+
+export default getEventTarget;
diff --git a/packages/react-dom-bindings/src/events/getListener.js b/packages/react-dom-bindings/src/events/getListener.js
new file mode 100644
index 00000000000..d6c7bab6d01
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/getListener.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {Props} from '../client/ReactFiberConfigDOM';
+
+import {getFiberCurrentPropsFromNode} from '../client/ReactDOMComponentTree';
+
+function isInteractive(tag: string): boolean {
+  return (
+    tag === 'button' ||
+    tag === 'input' ||
+    tag === 'select' ||
+    tag === 'textarea'
+  );
+}
+
+function shouldPreventMouseEvent(
+  name: string,
+  type: string,
+  props: Props,
+): boolean {
+  switch (name) {
+    case 'onClick':
+    case 'onClickCapture':
+    case 'onDoubleClick':
+    case 'onDoubleClickCapture':
+    case 'onMouseDown':
+    case 'onMouseDownCapture':
+    case 'onMouseMove':
+    case 'onMouseMoveCapture':
+    case 'onMouseUp':
+    case 'onMouseUpCapture':
+    case 'onMouseEnter':
+      return !!(props.disabled && isInteractive(type));
+    default:
+      return false;
+  }
+}
+
+/**
+ * @param {object} inst The instance, which is the source of events.
+ * @param {string} registrationName Name of listener (e.g. `onClick`).
+ * @return {?function} The stored callback.
+ */
+export default function getListener(
+  inst: Fiber,
+  registrationName: string,
+): Function | null {
+  const stateNode = inst.stateNode;
+  if (stateNode === null) {
+    // Work in progress (ex: onload events in incremental mode).
+    return null;
+  }
+  const props = getFiberCurrentPropsFromNode(stateNode);
+  if (props === null) {
+    // Work in progress.
+    return null;
+  }
+  // $FlowFixMe[invalid-computed-prop]
+  const listener = props[registrationName];
+  if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
+    return null;
+  }
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
+  return listener;
+}
diff --git a/packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js b/packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js
new file mode 100644
index 00000000000..16655f71b27
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+
+/**
+ * Generate a mapping of standard vendor prefixes using the defined style property and event name.
+ *
+ * @param {string} styleProp
+ * @param {string} eventName
+ * @returns {object}
+ */
+function makePrefixMap(styleProp, eventName) {
+  const prefixes = {};
+
+  prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
+  prefixes['Webkit' + styleProp] = 'webkit' + eventName;
+  prefixes['Moz' + styleProp] = 'moz' + eventName;
+
+  return prefixes;
+}
+
+/**
+ * A list of event names to a configurable list of vendor prefixes.
+ */
+const vendorPrefixes = {
+  animationend: makePrefixMap('Animation', 'AnimationEnd'),
+  animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
+  animationstart: makePrefixMap('Animation', 'AnimationStart'),
+  transitionrun: makePrefixMap('Transition', 'TransitionRun'),
+  transitionstart: makePrefixMap('Transition', 'TransitionStart'),
+  transitioncancel: makePrefixMap('Transition', 'TransitionCancel'),
+  transitionend: makePrefixMap('Transition', 'TransitionEnd'),
+};
+
+/**
+ * Event names that have already been detected and prefixed (if applicable).
+ */
+const prefixedEventNames = {};
+
+/**
+ * Element to check for prefixes on.
+ */
+let style = {};
+
+/**
+ * Bootstrap if a DOM exists.
+ */
+if (canUseDOM) {
+  style = document.createElement('div').style;
+
+  // On some platforms, in particular some releases of Android 4.x,
+  // the un-prefixed "animation" and "transition" properties are defined on the
+  // style object but the events that fire will still be prefixed, so we need
+  // to check if the un-prefixed events are usable, and if not remove them from the map.
+  if (!('AnimationEvent' in window)) {
+    delete vendorPrefixes.animationend.animation;
+    delete vendorPrefixes.animationiteration.animation;
+    delete vendorPrefixes.animationstart.animation;
+  }
+
+  // Same as above
+  if (!('TransitionEvent' in window)) {
+    delete vendorPrefixes.transitionend.transition;
+  }
+}
+
+/**
+ * Attempts to determine the correct vendor prefixed event name.
+ *
+ * @param {string} eventName
+ * @returns {string}
+ */
+function getVendorPrefixedEventName(eventName) {
+  if (prefixedEventNames[eventName]) {
+    return prefixedEventNames[eventName];
+  } else if (!vendorPrefixes[eventName]) {
+    return eventName;
+  }
+
+  const prefixMap = vendorPrefixes[eventName];
+
+  for (const styleProp in prefixMap) {
+    if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
+      return (prefixedEventNames[eventName] = prefixMap[styleProp]);
+    }
+  }
+
+  return eventName;
+}
+
+export default getVendorPrefixedEventName;
diff --git a/packages/react-dom-bindings/src/events/isEventSupported.js b/packages/react-dom-bindings/src/events/isEventSupported.js
new file mode 100644
index 00000000000..8a32c135975
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/isEventSupported.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {canUseDOM} from 'shared/ExecutionEnvironment';
+
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+function isEventSupported(eventNameSuffix: string): boolean {
+  if (!canUseDOM) {
+    return false;
+  }
+
+  const eventName = 'on' + eventNameSuffix;
+  let isSupported = eventName in document;
+
+  if (!isSupported) {
+    const element = document.createElement('div');
+    element.setAttribute(eventName, 'return;');
+    isSupported = typeof (element: any)[eventName] === 'function';
+  }
+
+  return isSupported;
+}
+
+export default isEventSupported;
diff --git a/packages/react-dom-bindings/src/events/isTextInputElement.js b/packages/react-dom-bindings/src/events/isTextInputElement.js
new file mode 100644
index 00000000000..ff4171dd987
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/isTextInputElement.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * @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, ...} = {
+  color: true,
+  date: true,
+  datetime: true,
+  'datetime-local': true,
+  email: true,
+  month: true,
+  number: true,
+  password: true,
+  range: true,
+  search: true,
+  tel: true,
+  text: true,
+  time: true,
+  url: true,
+  week: true,
+};
+
+function isTextInputElement(elem: ?HTMLElement): boolean {
+  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+
+  if (nodeName === 'input') {
+    return !!supportedInputTypes[((elem: any): HTMLInputElement).type];
+  }
+
+  if (nodeName === 'textarea') {
+    return true;
+  }
+
+  return false;
+}
+
+export default isTextInputElement;
diff --git a/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js
new file mode 100644
index 00000000000..96431e9fe15
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js
@@ -0,0 +1,460 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from '../../events/DOMEventNames';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {AnyNativeEvent} from '../../events/PluginModuleType';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
+
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+
+import {registerTwoPhaseEvent} from '../EventRegistry';
+import {
+  getData as FallbackCompositionStateGetData,
+  initialize as FallbackCompositionStateInitialize,
+  reset as FallbackCompositionStateReset,
+} from '../FallbackCompositionState';
+import {
+  SyntheticCompositionEvent,
+  SyntheticInputEvent,
+} from '../SyntheticEvent';
+import {accumulateTwoPhaseListeners} from '../DOMPluginEventSystem';
+
+const END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
+const START_KEYCODE = 229;
+
+const canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
+
+let documentMode = null;
+if (canUseDOM && 'documentMode' in document) {
+  documentMode = document.documentMode;
+}
+
+// Webkit offers a very useful `textInput` event that can be used to
+// directly represent `beforeInput`. The IE `textinput` event is not as
+// useful, so we don't use it.
+const canUseTextInputEvent =
+  canUseDOM && 'TextEvent' in window && !documentMode;
+
+// In IE9+, we have access to composition events, but the data supplied
+// by the native compositionend event may be incorrect. Japanese ideographic
+// spaces, for instance (\u3000) are not recorded correctly.
+const useFallbackCompositionData =
+  canUseDOM &&
+  (!canUseCompositionEvent ||
+    (documentMode && documentMode > 8 && documentMode <= 11));
+
+const SPACEBAR_CODE = 32;
+const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
+
+function registerEvents() {
+  registerTwoPhaseEvent('onBeforeInput', [
+    'compositionend',
+    'keypress',
+    'textInput',
+    'paste',
+  ]);
+  registerTwoPhaseEvent('onCompositionEnd', [
+    'compositionend',
+    'focusout',
+    'keydown',
+    'keypress',
+    'keyup',
+    'mousedown',
+  ]);
+  registerTwoPhaseEvent('onCompositionStart', [
+    'compositionstart',
+    'focusout',
+    'keydown',
+    'keypress',
+    'keyup',
+    'mousedown',
+  ]);
+  registerTwoPhaseEvent('onCompositionUpdate', [
+    'compositionupdate',
+    'focusout',
+    'keydown',
+    'keypress',
+    'keyup',
+    'mousedown',
+  ]);
+}
+
+// Track whether we've ever handled a keypress on the space key.
+let hasSpaceKeypress = false;
+
+/**
+ * Return whether a native keypress event is assumed to be a command.
+ * This is required because Firefox fires `keypress` events for key commands
+ * (cut, copy, select-all, etc.) even though no character is inserted.
+ */
+function isKeypressCommand(nativeEvent: any) {
+  return (
+    (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
+    // ctrlKey && altKey is equivalent to AltGr, and is not a command.
+    !(nativeEvent.ctrlKey && nativeEvent.altKey)
+  );
+}
+
+/**
+ * Translate native top level events into event types.
+ */
+function getCompositionEventType(domEventName: DOMEventName) {
+  switch (domEventName) {
+    case 'compositionstart':
+      return 'onCompositionStart';
+    case 'compositionend':
+      return 'onCompositionEnd';
+    case 'compositionupdate':
+      return 'onCompositionUpdate';
+  }
+}
+
+/**
+ * Does our fallback best-guess model think this event signifies that
+ * composition has begun?
+ */
+function isFallbackCompositionStart(
+  domEventName: DOMEventName,
+  nativeEvent: any,
+): boolean {
+  return domEventName === 'keydown' && nativeEvent.keyCode === START_KEYCODE;
+}
+
+/**
+ * Does our fallback mode think that this event is the end of composition?
+ */
+function isFallbackCompositionEnd(
+  domEventName: DOMEventName,
+  nativeEvent: any,
+): boolean {
+  switch (domEventName) {
+    case 'keyup':
+      // Command keys insert or clear IME input.
+      return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
+    case 'keydown':
+      // Expect IME keyCode on each keydown. If we get any other
+      // code we must have exited earlier.
+      return nativeEvent.keyCode !== START_KEYCODE;
+    case 'keypress':
+    case 'mousedown':
+    case 'focusout':
+      // Events are not possible without cancelling IME.
+      return true;
+    default:
+      return false;
+  }
+}
+
+/**
+ * Google Input Tools provides composition data via a CustomEvent,
+ * with the `data` property populated in the `detail` object. If this
+ * is available on the event object, use it. If not, this is a plain
+ * composition event and we have nothing special to extract.
+ *
+ * @param {object} nativeEvent
+ * @return {?string}
+ */
+function getDataFromCustomEvent(nativeEvent: any) {
+  const detail = nativeEvent.detail;
+  if (typeof detail === 'object' && 'data' in detail) {
+    return detail.data;
+  }
+  return null;
+}
+
+/**
+ * Check if a composition event was triggered by Korean IME.
+ * Our fallback mode does not work well with IE's Korean IME,
+ * so just use native composition events when Korean IME is used.
+ * Although CompositionEvent.locale property is deprecated,
+ * it is available in IE, where our fallback mode is enabled.
+ *
+ * @param {object} nativeEvent
+ * @return {boolean}
+ */
+function isUsingKoreanIME(nativeEvent: any) {
+  return nativeEvent.locale === 'ko';
+}
+
+// Track the current IME composition status, if any.
+let isComposing = false;
+
+/**
+ * @return {?object} A SyntheticCompositionEvent.
+ */
+function extractCompositionEvent(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+) {
+  let eventType;
+  let fallbackData;
+
+  if (canUseCompositionEvent) {
+    eventType = getCompositionEventType(domEventName);
+  } else if (!isComposing) {
+    if (isFallbackCompositionStart(domEventName, nativeEvent)) {
+      eventType = 'onCompositionStart';
+    }
+  } else if (isFallbackCompositionEnd(domEventName, nativeEvent)) {
+    eventType = 'onCompositionEnd';
+  }
+
+  if (!eventType) {
+    return null;
+  }
+
+  if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
+    // The current composition is stored statically and must not be
+    // overwritten while composition continues.
+    if (!isComposing && eventType === 'onCompositionStart') {
+      isComposing = FallbackCompositionStateInitialize(nativeEventTarget);
+    } else if (eventType === 'onCompositionEnd') {
+      if (isComposing) {
+        fallbackData = FallbackCompositionStateGetData();
+      }
+    }
+  }
+
+  const listeners = accumulateTwoPhaseListeners(targetInst, eventType);
+  if (listeners.length > 0) {
+    const event: ReactSyntheticEvent = new SyntheticCompositionEvent(
+      eventType,
+      domEventName,
+      null,
+      nativeEvent,
+      nativeEventTarget,
+    );
+    dispatchQueue.push({event, listeners});
+    if (fallbackData) {
+      // Inject data generated from fallback path into the synthetic event.
+      // This matches the property of native CompositionEventInterface.
+      // $FlowFixMe[incompatible-use]
+      event.data = fallbackData;
+    } else {
+      const customData = getDataFromCustomEvent(nativeEvent);
+      if (customData !== null) {
+        // $FlowFixMe[incompatible-use]
+        event.data = customData;
+      }
+    }
+  }
+}
+
+function getNativeBeforeInputChars(
+  domEventName: DOMEventName,
+  nativeEvent: any,
+): ?string {
+  switch (domEventName) {
+    case 'compositionend':
+      return getDataFromCustomEvent(nativeEvent);
+    case 'keypress':
+      /**
+       * If native `textInput` events are available, our goal is to make
+       * use of them. However, there is a special case: the spacebar key.
+       * In Webkit, preventing default on a spacebar `textInput` event
+       * cancels character insertion, but it *also* causes the browser
+       * to fall back to its default spacebar behavior of scrolling the
+       * page.
+       *
+       * Tracking at:
+       * https://code.google.com/p/chromium/issues/detail?id=355103
+       *
+       * To avoid this issue, use the keypress event as if no `textInput`
+       * event is available.
+       */
+      const which = nativeEvent.which;
+      if (which !== SPACEBAR_CODE) {
+        return null;
+      }
+
+      hasSpaceKeypress = true;
+      return SPACEBAR_CHAR;
+
+    case 'textInput':
+      // Record the characters to be added to the DOM.
+      const chars = nativeEvent.data;
+
+      // If it's a spacebar character, assume that we have already handled
+      // it at the keypress level and bail immediately. Android Chrome
+      // doesn't give us keycodes, so we need to ignore it.
+      if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
+        return null;
+      }
+
+      return chars;
+
+    default:
+      // For other native event types, do nothing.
+      return null;
+  }
+}
+
+/**
+ * For browsers that do not provide the `textInput` event, extract the
+ * appropriate string to use for SyntheticInputEvent.
+ */
+function getFallbackBeforeInputChars(
+  domEventName: DOMEventName,
+  nativeEvent: any,
+): ?string {
+  // If we are currently composing (IME) and using a fallback to do so,
+  // try to extract the composed characters from the fallback object.
+  // If composition event is available, we extract a string only at
+  // compositionevent, otherwise extract it at fallback events.
+  if (isComposing) {
+    if (
+      domEventName === 'compositionend' ||
+      (!canUseCompositionEvent &&
+        isFallbackCompositionEnd(domEventName, nativeEvent))
+    ) {
+      const chars = FallbackCompositionStateGetData();
+      FallbackCompositionStateReset();
+      isComposing = false;
+      return chars;
+    }
+    return null;
+  }
+
+  switch (domEventName) {
+    case 'paste':
+      // If a paste event occurs after a keypress, throw out the input
+      // chars. Paste events should not lead to BeforeInput events.
+      return null;
+    case 'keypress':
+      /**
+       * As of v27, Firefox may fire keypress events even when no character
+       * will be inserted. A few possibilities:
+       *
+       * - `which` is `0`. Arrow keys, Esc key, etc.
+       *
+       * - `which` is the pressed key code, but no char is available.
+       *   Ex: 'AltGr + d` in Polish. There is no modified character for
+       *   this key combination and no character is inserted into the
+       *   document, but FF fires the keypress for char code `100` anyway.
+       *   No `input` event will occur.
+       *
+       * - `which` is the pressed key code, but a command combination is
+       *   being used. Ex: `Cmd+C`. No character is inserted, and no
+       *   `input` event will occur.
+       */
+      if (!isKeypressCommand(nativeEvent)) {
+        // IE fires the `keypress` event when a user types an emoji via
+        // Touch keyboard of Windows.  In such a case, the `char` property
+        // holds an emoji character like `\uD83D\uDE0A`.  Because its length
+        // is 2, the property `which` does not represent an emoji correctly.
+        // In such a case, we directly return the `char` property instead of
+        // using `which`.
+        if (nativeEvent.char && nativeEvent.char.length > 1) {
+          return nativeEvent.char;
+        } else if (nativeEvent.which) {
+          return String.fromCharCode(nativeEvent.which);
+        }
+      }
+      return null;
+    case 'compositionend':
+      return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)
+        ? null
+        : nativeEvent.data;
+    default:
+      return null;
+  }
+}
+
+/**
+ * Extract a SyntheticInputEvent for `beforeInput`, based on either native
+ * `textInput` or fallback behavior.
+ *
+ * @return {?object} A SyntheticInputEvent.
+ */
+function extractBeforeInputEvent(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+) {
+  let chars;
+
+  if (canUseTextInputEvent) {
+    chars = getNativeBeforeInputChars(domEventName, nativeEvent);
+  } else {
+    chars = getFallbackBeforeInputChars(domEventName, nativeEvent);
+  }
+
+  // If no characters are being inserted, no BeforeInput event should
+  // be fired.
+  if (!chars) {
+    return null;
+  }
+
+  const listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
+  if (listeners.length > 0) {
+    const event: ReactSyntheticEvent = new SyntheticInputEvent(
+      'onBeforeInput',
+      'beforeinput',
+      null,
+      nativeEvent,
+      nativeEventTarget,
+    );
+    dispatchQueue.push({event, listeners});
+    // $FlowFixMe[incompatible-use]
+    event.data = chars;
+  }
+}
+
+/**
+ * Create an `onBeforeInput` event to match
+ * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
+ *
+ * This event plugin is based on the native `textInput` event
+ * available in Chrome, Safari, Opera, and IE. This event fires after
+ * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
+ *
+ * `beforeInput` is spec'd but not implemented in any browsers, and
+ * the `input` event does not provide any useful information about what has
+ * actually been added, contrary to the spec. Thus, `textInput` is the best
+ * available event to identify the characters that have actually been inserted
+ * into the target node.
+ *
+ * This plugin is also responsible for emitting `composition` events, thus
+ * allowing us to share composition fallback code for both `beforeInput` and
+ * `composition` event types.
+ */
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+): void {
+  extractCompositionEvent(
+    dispatchQueue,
+    domEventName,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+  );
+  extractBeforeInputEvent(
+    dispatchQueue,
+    domEventName,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+  );
+}
+
+export {registerEvents, extractEvents};
diff --git a/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
new file mode 100644
index 00000000000..fff7d0a1bb8
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {TextInstance, Instance} from '../../client/ReactFiberConfigDOM';
+import type {AnyNativeEvent} from '../PluginModuleType';
+import type {DOMEventName} from '../DOMEventNames';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
+
+import {registerTwoPhaseEvent} from '../EventRegistry';
+import {SyntheticEvent} from '../SyntheticEvent';
+import isTextInputElement from '../isTextInputElement';
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+
+import getEventTarget from '../getEventTarget';
+import isEventSupported from '../isEventSupported';
+import {getNodeFromInstance} from '../../client/ReactDOMComponentTree';
+import {updateValueIfChanged} from '../../client/inputValueTracking';
+import {setDefaultValue} from '../../client/ReactDOMInput';
+import {enqueueStateRestore} from '../ReactDOMControlledComponent';
+
+import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
+import {batchedUpdates} from '../ReactDOMUpdateBatching';
+import {
+  processDispatchQueue,
+  accumulateTwoPhaseListeners,
+} from '../DOMPluginEventSystem';
+import isCustomElement from '../../shared/isCustomElement';
+
+function registerEvents() {
+  registerTwoPhaseEvent('onChange', [
+    'change',
+    'click',
+    'focusin',
+    'focusout',
+    'input',
+    'keydown',
+    'keyup',
+    'selectionchange',
+  ]);
+}
+
+function createAndAccumulateChangeEvent(
+  dispatchQueue: DispatchQueue,
+  inst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  target: null | EventTarget,
+) {
+  // Flag this event loop as needing state restore.
+  enqueueStateRestore(((target: any): Node));
+  const listeners = accumulateTwoPhaseListeners(inst, 'onChange');
+  if (listeners.length > 0) {
+    const event: ReactSyntheticEvent = new SyntheticEvent(
+      'onChange',
+      'change',
+      null,
+      nativeEvent,
+      target,
+    );
+    dispatchQueue.push({event, listeners});
+  }
+}
+/**
+ * For IE shims
+ */
+let activeElement = null;
+let activeElementInst = null;
+
+/**
+ * SECTION: handle `change` event
+ */
+function shouldUseChangeEvent(elem: Instance | TextInstance) {
+  const nodeName = elem.nodeName && elem.nodeName.toLowerCase();
+  return (
+    nodeName === 'select' ||
+    (nodeName === 'input' && (elem: any).type === 'file')
+  );
+}
+
+function manualDispatchChangeEvent(nativeEvent: AnyNativeEvent) {
+  const dispatchQueue: DispatchQueue = [];
+  createAndAccumulateChangeEvent(
+    dispatchQueue,
+    activeElementInst,
+    nativeEvent,
+    getEventTarget(nativeEvent),
+  );
+
+  // If change and propertychange bubbled, we'd just bind to it like all the
+  // other events and have it go through ReactBrowserEventEmitter. Since it
+  // doesn't, we manually listen for the events and so we have to enqueue and
+  // process the abstract event manually.
+  //
+  // Batching is necessary here in order to ensure that all event handlers run
+  // before the next rerender (including event handlers attached to ancestor
+  // elements instead of directly on the input). Without this, controlled
+  // components don't work properly in conjunction with event bubbling because
+  // the component is rerendered and the value reverted before all the event
+  // handlers can run. See https://github.com/facebook/react/issues/708.
+  batchedUpdates(runEventInBatch, dispatchQueue);
+}
+
+function runEventInBatch(dispatchQueue: DispatchQueue) {
+  processDispatchQueue(dispatchQueue, 0);
+}
+
+function getInstIfValueChanged(targetInst: Object) {
+  const targetNode = getNodeFromInstance(targetInst);
+  if (updateValueIfChanged(((targetNode: any): HTMLInputElement))) {
+    return targetInst;
+  }
+}
+
+function getTargetInstForChangeEvent(
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+) {
+  if (domEventName === 'change') {
+    return targetInst;
+  }
+}
+
+/**
+ * SECTION: handle `input` event
+ */
+let isInputEventSupported = false;
+if (canUseDOM) {
+  // IE9 claims to support the input event but fails to trigger it when
+  // deleting text, so we ignore its input events.
+  isInputEventSupported =
+    isEventSupported('input') &&
+    (!document.documentMode || document.documentMode > 9);
+}
+
+/**
+ * (For IE <=9) Starts tracking propertychange events on the passed-in element
+ * and override the value property so that we can distinguish user events from
+ * value changes in JS.
+ */
+function startWatchingForValueChange(
+  target: Instance | TextInstance,
+  targetInst: null | Fiber,
+) {
+  activeElement = target;
+  activeElementInst = targetInst;
+  (activeElement: any).attachEvent('onpropertychange', handlePropertyChange);
+}
+
+/**
+ * (For IE <=9) Removes the event listeners from the currently-tracked element,
+ * if any exists.
+ */
+function stopWatchingForValueChange() {
+  if (!activeElement) {
+    return;
+  }
+  (activeElement: any).detachEvent('onpropertychange', handlePropertyChange);
+  activeElement = null;
+  activeElementInst = null;
+}
+
+/**
+ * (For IE <=9) Handles a propertychange event, sending a `change` event if
+ * the value of the active element has changed.
+ */
+// $FlowFixMe[missing-local-annot]
+function handlePropertyChange(nativeEvent) {
+  if (nativeEvent.propertyName !== 'value') {
+    return;
+  }
+  if (getInstIfValueChanged(activeElementInst)) {
+    manualDispatchChangeEvent(nativeEvent);
+  }
+}
+
+function handleEventsForInputEventPolyfill(
+  domEventName: DOMEventName,
+  target: Instance | TextInstance,
+  targetInst: null | Fiber,
+) {
+  if (domEventName === 'focusin') {
+    // In IE9, propertychange fires for most input events but is buggy and
+    // doesn't fire when text is deleted, but conveniently, selectionchange
+    // appears to fire in all of the remaining cases so we catch those and
+    // forward the event if the value has changed
+    // In either case, we don't want to call the event handler if the value
+    // is changed from JS so we redefine a setter for `.value` that updates
+    // our activeElementValue variable, allowing us to ignore those changes
+    //
+    // stopWatching() should be a noop here but we call it just in case we
+    // missed a blur event somehow.
+    stopWatchingForValueChange();
+    startWatchingForValueChange(target, targetInst);
+  } else if (domEventName === 'focusout') {
+    stopWatchingForValueChange();
+  }
+}
+
+// For IE8 and IE9.
+function getTargetInstForInputEventPolyfill(
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+) {
+  if (
+    domEventName === 'selectionchange' ||
+    domEventName === 'keyup' ||
+    domEventName === 'keydown'
+  ) {
+    // On the selectionchange event, the target is just document which isn't
+    // helpful for us so just check activeElement instead.
+    //
+    // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
+    // propertychange on the first input event after setting `value` from a
+    // script and fires only keydown, keypress, keyup. Catching keyup usually
+    // gets it and catching keydown lets us fire an event for the first
+    // keystroke if user does a key repeat (it'll be a little delayed: right
+    // before the second keystroke). Other input methods (e.g., paste) seem to
+    // fire selectionchange normally.
+    return getInstIfValueChanged(activeElementInst);
+  }
+}
+
+/**
+ * SECTION: handle `click` event
+ */
+function shouldUseClickEvent(elem: any) {
+  // Use the `click` event to detect changes to checkbox and radio inputs.
+  // This approach works across all browsers, whereas `change` does not fire
+  // until `blur` in IE8.
+  const nodeName = elem.nodeName;
+  return (
+    nodeName &&
+    nodeName.toLowerCase() === 'input' &&
+    (elem.type === 'checkbox' || elem.type === 'radio')
+  );
+}
+
+function getTargetInstForClickEvent(
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+) {
+  if (domEventName === 'click') {
+    return getInstIfValueChanged(targetInst);
+  }
+}
+
+function getTargetInstForInputOrChangeEvent(
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+) {
+  if (domEventName === 'input' || domEventName === 'change') {
+    return getInstIfValueChanged(targetInst);
+  }
+}
+
+function handleControlledInputBlur(node: HTMLInputElement, props: any) {
+  if (node.type !== 'number') {
+    return;
+  }
+
+  if (!disableInputAttributeSyncing) {
+    const isControlled = props.value != null;
+    if (isControlled) {
+      // If controlled, assign the value attribute to the current value on blur
+      setDefaultValue((node: any), 'number', (node: any).value);
+    }
+  }
+}
+
+/**
+ * This plugin creates an `onChange` event that normalizes change events
+ * across form elements. This event fires at a time when it's possible to
+ * change the element's value without seeing a flicker.
+ *
+ * Supported elements are:
+ * - input (see `isTextInputElement`)
+ * - textarea
+ * - select
+ */
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: null | EventTarget,
+) {
+  const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
+
+  let getTargetInstFunc, handleEventFunc;
+  if (shouldUseChangeEvent(targetNode)) {
+    getTargetInstFunc = getTargetInstForChangeEvent;
+  } else if (isTextInputElement(((targetNode: any): HTMLElement))) {
+    if (isInputEventSupported) {
+      getTargetInstFunc = getTargetInstForInputOrChangeEvent;
+    } else {
+      getTargetInstFunc = getTargetInstForInputEventPolyfill;
+      handleEventFunc = handleEventsForInputEventPolyfill;
+    }
+  } else if (shouldUseClickEvent(targetNode)) {
+    getTargetInstFunc = getTargetInstForClickEvent;
+  } else if (
+    targetInst &&
+    isCustomElement(targetInst.elementType, targetInst.memoizedProps)
+  ) {
+    getTargetInstFunc = getTargetInstForChangeEvent;
+  }
+
+  if (getTargetInstFunc) {
+    const inst = getTargetInstFunc(domEventName, targetInst);
+    if (inst) {
+      createAndAccumulateChangeEvent(
+        dispatchQueue,
+        inst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      return;
+    }
+  }
+
+  if (handleEventFunc) {
+    handleEventFunc(domEventName, targetNode, targetInst);
+  }
+
+  // When blurring, set the value attribute for number inputs
+  if (domEventName === 'focusout' && targetInst) {
+    // These props aren't necessarily the most current but we warn for changing
+    // between controlled and uncontrolled, so it doesn't matter and the previous
+    // code was also broken for changes.
+    const props = targetInst.memoizedProps;
+    handleControlledInputBlur(((targetNode: any): HTMLInputElement), props);
+  }
+}
+
+export {registerEvents, extractEvents};
diff --git a/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js
new file mode 100644
index 00000000000..e8f08b55d95
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js
@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../PluginModuleType';
+import type {DOMEventName} from '../DOMEventNames';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {KnownReactSyntheticEvent} from '../ReactSyntheticEventType';
+
+import {registerDirectEvent} from '../EventRegistry';
+import {isReplayingEvent} from '../CurrentReplayingEvent';
+import {SyntheticMouseEvent, SyntheticPointerEvent} from '../SyntheticEvent';
+import {
+  getClosestInstanceFromNode,
+  getNodeFromInstance,
+  isContainerMarkedAsRoot,
+} from '../../client/ReactDOMComponentTree';
+import {accumulateEnterLeaveTwoPhaseListeners} from '../DOMPluginEventSystem';
+
+import {
+  HostComponent,
+  HostSingleton,
+  HostText,
+} from 'react-reconciler/src/ReactWorkTags';
+import {getNearestMountedFiber} from 'react-reconciler/src/ReactFiberTreeReflection';
+
+function registerEvents() {
+  registerDirectEvent('onMouseEnter', ['mouseout', 'mouseover']);
+  registerDirectEvent('onMouseLeave', ['mouseout', 'mouseover']);
+  registerDirectEvent('onPointerEnter', ['pointerout', 'pointerover']);
+  registerDirectEvent('onPointerLeave', ['pointerout', 'pointerover']);
+}
+
+/**
+ * For almost every interaction we care about, there will be both a top-level
+ * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
+ * we do not extract duplicate events. However, moving the mouse into the
+ * browser from outside will not fire a `mouseout` event. In this case, we use
+ * the `mouseover` top-level event.
+ */
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+) {
+  const isOverEvent =
+    domEventName === 'mouseover' || domEventName === 'pointerover';
+  const isOutEvent =
+    domEventName === 'mouseout' || domEventName === 'pointerout';
+
+  if (isOverEvent && !isReplayingEvent(nativeEvent)) {
+    // If this is an over event with a target, we might have 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.
+    const related =
+      (nativeEvent: any).relatedTarget || (nativeEvent: any).fromElement;
+    if (related) {
+      // If the related node is managed by React, we can assume that we have
+      // already dispatched the corresponding events during its mouseout.
+      if (
+        getClosestInstanceFromNode(related) ||
+        isContainerMarkedAsRoot(related)
+      ) {
+        return;
+      }
+    }
+  }
+
+  if (!isOutEvent && !isOverEvent) {
+    // Must not be a mouse or pointer in or out - ignoring.
+    return;
+  }
+
+  let win;
+  // TODO: why is this nullable in the types but we read from it?
+  if ((nativeEventTarget: any).window === nativeEventTarget) {
+    // `nativeEventTarget` is probably a window object.
+    win = nativeEventTarget;
+  } else {
+    // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
+    const doc = (nativeEventTarget: any).ownerDocument;
+    if (doc) {
+      win = doc.defaultView || doc.parentWindow;
+    } else {
+      win = window;
+    }
+  }
+
+  let from;
+  let to;
+  if (isOutEvent) {
+    const related = nativeEvent.relatedTarget || (nativeEvent: any).toElement;
+    from = targetInst;
+    to = related ? getClosestInstanceFromNode((related: any)) : null;
+    if (to !== null) {
+      const nearestMounted = getNearestMountedFiber(to);
+      const tag = to.tag;
+      if (
+        to !== nearestMounted ||
+        (tag !== HostComponent && tag !== HostSingleton && tag !== HostText)
+      ) {
+        to = null;
+      }
+    }
+  } else {
+    // Moving to a node from outside the window.
+    from = null;
+    to = targetInst;
+  }
+
+  if (from === to) {
+    // Nothing pertains to our managed components.
+    return;
+  }
+
+  let SyntheticEventCtor = SyntheticMouseEvent;
+  let leaveEventType = 'onMouseLeave';
+  let enterEventType = 'onMouseEnter';
+  let eventTypePrefix = 'mouse';
+  if (domEventName === 'pointerout' || domEventName === 'pointerover') {
+    SyntheticEventCtor = SyntheticPointerEvent;
+    leaveEventType = 'onPointerLeave';
+    enterEventType = 'onPointerEnter';
+    eventTypePrefix = 'pointer';
+  }
+
+  const fromNode = from == null ? win : getNodeFromInstance(from);
+  const toNode = to == null ? win : getNodeFromInstance(to);
+
+  const leave: KnownReactSyntheticEvent = new SyntheticEventCtor(
+    leaveEventType,
+    eventTypePrefix + 'leave',
+    from,
+    nativeEvent,
+    nativeEventTarget,
+  );
+  leave.target = fromNode;
+  leave.relatedTarget = toNode;
+
+  let enter: KnownReactSyntheticEvent | null = null;
+
+  // We should only process this nativeEvent if we are processing
+  // the first ancestor. Next time, we will ignore the event.
+  const nativeTargetInst = getClosestInstanceFromNode((nativeEventTarget: any));
+  if (nativeTargetInst === targetInst) {
+    const enterEvent: KnownReactSyntheticEvent = new SyntheticEventCtor(
+      enterEventType,
+      eventTypePrefix + 'enter',
+      to,
+      nativeEvent,
+      nativeEventTarget,
+    );
+    enterEvent.target = toNode;
+    enterEvent.relatedTarget = fromNode;
+    enter = enterEvent;
+  }
+
+  accumulateEnterLeaveTwoPhaseListeners(dispatchQueue, leave, enter, from, to);
+}
+
+export {registerEvents, extractEvents};
diff --git a/packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js
new file mode 100644
index 00000000000..420d1d11882
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../PluginModuleType';
+import type {DOMEventName} from '../DOMEventNames';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
+import {getFiberCurrentPropsFromNode} from '../../client/ReactDOMComponentTree';
+import {startHostTransition} from 'react-reconciler/src/ReactFiberReconciler';
+import {didCurrentEventScheduleTransition} from 'react-reconciler/src/ReactFiberRootScheduler';
+import sanitizeURL from 'react-dom-bindings/src/shared/sanitizeURL';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+
+import {SyntheticEvent} from '../SyntheticEvent';
+
+function coerceFormActionProp(
+  actionProp: mixed,
+): string | (FormData => void | Promise<void>) | null {
+  // This should match the logic in ReactDOMComponent
+  if (
+    actionProp == null ||
+    typeof actionProp === 'symbol' ||
+    typeof actionProp === 'boolean'
+  ) {
+    return null;
+  } else if (typeof actionProp === 'function') {
+    return (actionProp: any);
+  } else {
+    if (__DEV__) {
+      checkAttributeStringCoercion(actionProp, 'action');
+    }
+    return (sanitizeURL(
+      enableTrustedTypesIntegration ? actionProp : '' + (actionProp: any),
+    ): any);
+  }
+}
+
+/**
+ * This plugin invokes action functions on forms, inputs and buttons if
+ * the form doesn't prevent default.
+ */
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  maybeTargetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+) {
+  if (domEventName !== 'submit') {
+    return;
+  }
+  if (!maybeTargetInst || maybeTargetInst.stateNode !== nativeEventTarget) {
+    // If we're inside a parent root that itself is a parent of this root, then
+    // its deepest target won't be the actual form that's being submitted.
+    return;
+  }
+  const formInst = maybeTargetInst;
+  const form: HTMLFormElement = (nativeEventTarget: any);
+  let action = coerceFormActionProp(
+    (getFiberCurrentPropsFromNode(form): any).action,
+  );
+  let submitter: null | void | HTMLInputElement | HTMLButtonElement =
+    (nativeEvent: any).submitter;
+  let submitterAction;
+  if (submitter) {
+    const submitterProps = getFiberCurrentPropsFromNode(submitter);
+    submitterAction = submitterProps
+      ? coerceFormActionProp((submitterProps: any).formAction)
+      : // The built-in Flow type is ?string, wider than the spec
+        ((submitter.getAttribute('formAction'): any): string | null);
+    if (submitterAction !== null) {
+      // The submitter overrides the form action.
+      action = submitterAction;
+      // If the action is a function, we don't want to pass its name
+      // value to the FormData since it's controlled by the server.
+      submitter = null;
+    }
+  }
+
+  const event = new SyntheticEvent(
+    'action',
+    'action',
+    null,
+    nativeEvent,
+    nativeEventTarget,
+  );
+
+  function submitForm() {
+    if (nativeEvent.defaultPrevented) {
+      // An earlier event prevented form submission. If a transition update was
+      // also scheduled, we should trigger a pending form status — even if
+      // no action function was provided.
+      if (didCurrentEventScheduleTransition()) {
+        // We're going to set the pending form status, but because the submission
+        // was prevented, we should not fire the action function.
+        const formData = new FormData(form, submitter);
+        const pendingState: FormStatus = {
+          pending: true,
+          data: formData,
+          method: form.method,
+          action: action,
+        };
+        if (__DEV__) {
+          Object.freeze(pendingState);
+        }
+        startHostTransition(
+          formInst,
+          pendingState,
+          // Pass `null` as the action
+          // TODO: Consider splitting up startHostTransition into two separate
+          // functions, one that sets the form status and one that invokes
+          // the action.
+          null,
+          formData,
+        );
+      } else {
+        // No earlier event scheduled a transition. Exit without setting a
+        // pending form status.
+      }
+    } else if (typeof action === 'function') {
+      // A form action was provided. Prevent native navigation.
+      event.preventDefault();
+
+      // Dispatch the action and set a pending form status.
+      const formData = new FormData(form, submitter);
+      const pendingState: FormStatus = {
+        pending: true,
+        data: formData,
+        method: form.method,
+        action: action,
+      };
+      if (__DEV__) {
+        Object.freeze(pendingState);
+      }
+      startHostTransition(formInst, pendingState, action, formData);
+    } else {
+      // No earlier event prevented the default submission, and no action was
+      // provided. Exit without setting a pending form status.
+    }
+  }
+
+  dispatchQueue.push({
+    event,
+    listeners: [
+      {
+        instance: null,
+        listener: submitForm,
+        currentTarget: form,
+      },
+    ],
+  });
+}
+
+export {extractEvents};
+
+export function dispatchReplayedFormAction(
+  formInst: Fiber,
+  form: HTMLFormElement,
+  action: FormData => void | Promise<void>,
+  formData: FormData,
+): void {
+  const pendingState: FormStatus = {
+    pending: true,
+    data: formData,
+    method: form.method,
+    action: action,
+  };
+  if (__DEV__) {
+    Object.freeze(pendingState);
+  }
+  startHostTransition(formInst, pendingState, action, formData);
+}
diff --git a/packages/react-dom-bindings/src/events/plugins/ScrollEndEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/ScrollEndEventPlugin.js
new file mode 100644
index 00000000000..6bb1c68ab55
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/ScrollEndEventPlugin.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../PluginModuleType';
+import type {DOMEventName} from '../DOMEventNames';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
+
+import {registerTwoPhaseEvent} from '../EventRegistry';
+import {SyntheticUIEvent} from '../SyntheticEvent';
+
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+import isEventSupported from '../isEventSupported';
+
+import {IS_CAPTURE_PHASE} from '../EventSystemFlags';
+
+import {batchedUpdates} from '../ReactDOMUpdateBatching';
+import {
+  processDispatchQueue,
+  accumulateSinglePhaseListeners,
+  accumulateTwoPhaseListeners,
+} from '../DOMPluginEventSystem';
+
+import {
+  getScrollEndTimer,
+  setScrollEndTimer,
+  clearScrollEndTimer,
+} from '../../client/ReactDOMComponentTree';
+
+import {enableScrollEndPolyfill} from 'shared/ReactFeatureFlags';
+
+const isScrollEndEventSupported =
+  enableScrollEndPolyfill && canUseDOM && isEventSupported('scrollend');
+
+let isTouchStarted = false;
+let isMouseDown = false;
+
+function registerEvents() {
+  registerTwoPhaseEvent('onScrollEnd', [
+    'scroll',
+    'scrollend',
+    'touchstart',
+    'touchcancel',
+    'touchend',
+    'mousedown',
+    'mouseup',
+  ]);
+}
+
+function manualDispatchScrollEndEvent(
+  inst: Fiber,
+  nativeEvent: AnyNativeEvent,
+  target: EventTarget,
+) {
+  const dispatchQueue: DispatchQueue = [];
+  const listeners = accumulateTwoPhaseListeners(inst, 'onScrollEnd');
+  if (listeners.length > 0) {
+    const event: ReactSyntheticEvent = new SyntheticUIEvent(
+      'onScrollEnd',
+      'scrollend',
+      null,
+      nativeEvent, // This will be the "scroll" event.
+      target,
+    );
+    dispatchQueue.push({event, listeners});
+  }
+  batchedUpdates(runEventInBatch, dispatchQueue);
+}
+
+function runEventInBatch(dispatchQueue: DispatchQueue) {
+  processDispatchQueue(dispatchQueue, 0);
+}
+
+function fireScrollEnd(
+  targetInst: Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: EventTarget,
+): void {
+  clearScrollEndTimer(nativeEventTarget);
+  if (isMouseDown || isTouchStarted) {
+    // If mouse or touch is down, try again later in case this is due to having an
+    // active scroll but it's not currently moving.
+    debounceScrollEnd(targetInst, nativeEvent, nativeEventTarget);
+    return;
+  }
+  manualDispatchScrollEndEvent(targetInst, nativeEvent, nativeEventTarget);
+}
+
+// When scrolling slows down the frequency of new scroll events can be quite low.
+// This timeout seems high enough to cover those cases but short enough to not
+// fire the event way too late.
+const DEBOUNCE_TIMEOUT = 200;
+
+function debounceScrollEnd(
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: EventTarget,
+) {
+  const existingTimer = getScrollEndTimer(nativeEventTarget);
+  if (existingTimer != null) {
+    clearTimeout(existingTimer);
+  }
+  if (targetInst !== null) {
+    const newTimer = setTimeout(
+      fireScrollEnd.bind(null, targetInst, nativeEvent, nativeEventTarget),
+      DEBOUNCE_TIMEOUT,
+    );
+    setScrollEndTimer(nativeEventTarget, newTimer);
+  }
+}
+
+/**
+ * This plugin creates an `onScrollEnd` event polyfill when the native one
+ * is not available.
+ */
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: null | EventTarget,
+) {
+  if (!enableScrollEndPolyfill) {
+    return;
+  }
+
+  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
+
+  if (domEventName !== 'scrollend') {
+    if (!isScrollEndEventSupported && inCapturePhase) {
+      switch (domEventName) {
+        case 'scroll': {
+          if (nativeEventTarget !== null) {
+            debounceScrollEnd(targetInst, nativeEvent, nativeEventTarget);
+          }
+          break;
+        }
+        case 'touchstart': {
+          isTouchStarted = true;
+          break;
+        }
+        case 'touchcancel':
+        case 'touchend': {
+          // Note we cannot use pointer events for this because they get
+          // cancelled when native scrolling takes control.
+          isTouchStarted = false;
+          break;
+        }
+        case 'mousedown': {
+          isMouseDown = true;
+          break;
+        }
+        case 'mouseup': {
+          isMouseDown = false;
+          break;
+        }
+      }
+    }
+    return;
+  }
+
+  if (!isScrollEndEventSupported && nativeEventTarget !== null) {
+    const existingTimer = getScrollEndTimer(nativeEventTarget);
+    if (existingTimer != null) {
+      // If we do get a native scrollend event fired, we cancel the polyfill.
+      // This could happen if our feature detection is broken or if there's another
+      // polyfill calling dispatchEvent to fire it before we fire ours.
+      clearTimeout(existingTimer);
+      clearScrollEndTimer(nativeEventTarget);
+    } else {
+      // If we didn't receive a 'scroll' event first, we ignore this event to avoid
+      // double firing. Such as if we fired our onScrollEnd polyfill and then
+      // we also observed a native one afterwards.
+      return;
+    }
+  }
+
+  // In React onScrollEnd doesn't bubble.
+  const accumulateTargetOnly = !inCapturePhase;
+
+  const listeners = accumulateSinglePhaseListeners(
+    targetInst,
+    'onScrollEnd',
+    'scrollend',
+    inCapturePhase,
+    accumulateTargetOnly,
+    nativeEvent,
+  );
+
+  if (listeners.length > 0) {
+    // Intentionally create event lazily.
+    const event: ReactSyntheticEvent = new SyntheticUIEvent(
+      'onScrollEnd',
+      'scrollend',
+      null,
+      nativeEvent,
+      nativeEventTarget,
+    );
+    dispatchQueue.push({event, listeners});
+  }
+}
+
+export {registerEvents, extractEvents};
diff --git a/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js
new file mode 100644
index 00000000000..ce6114257fa
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../PluginModuleType';
+import type {DOMEventName} from '../DOMEventNames';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
+
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+import {SyntheticEvent} from '../../events/SyntheticEvent';
+import isTextInputElement from '../isTextInputElement';
+import shallowEqual from 'shared/shallowEqual';
+
+import {registerTwoPhaseEvent} from '../EventRegistry';
+import getActiveElement from '../../client/getActiveElement';
+import {getNodeFromInstance} from '../../client/ReactDOMComponentTree';
+import {hasSelectionCapabilities} from '../../client/ReactInputSelection';
+import {DOCUMENT_NODE} from '../../client/HTMLNodeType';
+import {accumulateTwoPhaseListeners} from '../DOMPluginEventSystem';
+
+const skipSelectionChangeEvent =
+  canUseDOM && 'documentMode' in document && document.documentMode <= 11;
+
+function registerEvents() {
+  registerTwoPhaseEvent('onSelect', [
+    'focusout',
+    'contextmenu',
+    'dragend',
+    'focusin',
+    'keydown',
+    'keyup',
+    'mousedown',
+    'mouseup',
+    'selectionchange',
+  ]);
+}
+
+let activeElement = null;
+let activeElementInst = null;
+let lastSelection = null;
+let mouseDown = false;
+
+/**
+ * Get an object which is a unique representation of the current selection.
+ *
+ * The return value will not be consistent across nodes or browsers, but
+ * two identical selections on the same node will return identical objects.
+ */
+function getSelection(node: any) {
+  if ('selectionStart' in node && hasSelectionCapabilities(node)) {
+    return {
+      start: node.selectionStart,
+      end: node.selectionEnd,
+    };
+  } else {
+    const win =
+      (node.ownerDocument && node.ownerDocument.defaultView) || window;
+    const selection = win.getSelection();
+    return {
+      anchorNode: selection.anchorNode,
+      anchorOffset: selection.anchorOffset,
+      focusNode: selection.focusNode,
+      focusOffset: selection.focusOffset,
+    };
+  }
+}
+
+/**
+ * Get document associated with the event target.
+ */
+function getEventTargetDocument(eventTarget: any) {
+  return eventTarget.window === eventTarget
+    ? eventTarget.document
+    : eventTarget.nodeType === DOCUMENT_NODE
+      ? eventTarget
+      : eventTarget.ownerDocument;
+}
+
+/**
+ * Poll selection to see whether it's changed.
+ *
+ * @param {object} nativeEvent
+ * @param {object} nativeEventTarget
+ * @return {?SyntheticEvent}
+ */
+function constructSelectEvent(
+  dispatchQueue: DispatchQueue,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+) {
+  // Ensure we have the right element, and that the user is not dragging a
+  // selection (this matches native `select` event behavior). In HTML5, select
+  // fires only on input and textarea thus if there's no focused element we
+  // won't dispatch.
+  const doc = getEventTargetDocument(nativeEventTarget);
+
+  if (
+    mouseDown ||
+    activeElement == null ||
+    activeElement !== getActiveElement(doc)
+  ) {
+    return;
+  }
+
+  // Only fire when selection has actually changed.
+  const currentSelection = getSelection(activeElement);
+  if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
+    lastSelection = currentSelection;
+
+    const listeners = accumulateTwoPhaseListeners(
+      activeElementInst,
+      'onSelect',
+    );
+    if (listeners.length > 0) {
+      const event: ReactSyntheticEvent = new SyntheticEvent(
+        'onSelect',
+        'select',
+        null,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      dispatchQueue.push({event, listeners});
+      event.target = activeElement;
+    }
+  }
+}
+
+/**
+ * This plugin creates an `onSelect` event that normalizes select events
+ * across form elements.
+ *
+ * Supported elements are:
+ * - input (see `isTextInputElement`)
+ * - textarea
+ * - contentEditable
+ *
+ * This differs from native browser implementations in the following ways:
+ * - Fires on contentEditable fields as well as inputs.
+ * - Fires for collapsed selection.
+ * - Fires after user input.
+ */
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+) {
+  const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
+
+  switch (domEventName) {
+    // Track the input node that has focus.
+    case 'focusin':
+      if (
+        isTextInputElement((targetNode: any)) ||
+        targetNode.contentEditable === 'true'
+      ) {
+        activeElement = targetNode;
+        activeElementInst = targetInst;
+        lastSelection = null;
+      }
+      break;
+    case 'focusout':
+      activeElement = null;
+      activeElementInst = null;
+      lastSelection = null;
+      break;
+    // Don't fire the event while the user is dragging. This matches the
+    // semantics of the native select event.
+    case 'mousedown':
+      mouseDown = true;
+      break;
+    case 'contextmenu':
+    case 'mouseup':
+    case 'dragend':
+      mouseDown = false;
+      constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
+      break;
+    // Chrome and IE fire non-standard event when selection is changed (and
+    // sometimes when it hasn't). IE's event fires out of order with respect
+    // to key and input events on deletion, so we discard it.
+    //
+    // Firefox doesn't support selectionchange, so check selection status
+    // after each key entry. The selection changes after keydown and before
+    // keyup, but we check on keydown as well in the case of holding down a
+    // key, when multiple keydown events are fired but only one keyup is.
+    // This is also our approach for IE handling, for the reason above.
+    case 'selectionchange':
+      if (skipSelectionChangeEvent) {
+        break;
+      }
+    // falls through
+    case 'keydown':
+    case 'keyup':
+      constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
+  }
+}
+
+export {registerEvents, extractEvents};
diff --git a/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js
new file mode 100644
index 00000000000..8c983b3f5df
--- /dev/null
+++ b/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js
@@ -0,0 +1,233 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DOMEventName} from '../../events/DOMEventNames';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {AnyNativeEvent} from '../../events/PluginModuleType';
+import type {DispatchQueue} from '../DOMPluginEventSystem';
+import type {EventSystemFlags} from '../EventSystemFlags';
+import type {ReactSyntheticEvent} from '../ReactSyntheticEventType';
+
+import {
+  SyntheticEvent,
+  SyntheticKeyboardEvent,
+  SyntheticFocusEvent,
+  SyntheticMouseEvent,
+  SyntheticDragEvent,
+  SyntheticTouchEvent,
+  SyntheticAnimationEvent,
+  SyntheticTransitionEvent,
+  SyntheticUIEvent,
+  SyntheticWheelEvent,
+  SyntheticClipboardEvent,
+  SyntheticPointerEvent,
+  SyntheticToggleEvent,
+} from '../../events/SyntheticEvent';
+
+import {
+  ANIMATION_END,
+  ANIMATION_ITERATION,
+  ANIMATION_START,
+  TRANSITION_END,
+} from '../DOMEventNames';
+import {
+  topLevelEventsToReactNames,
+  registerSimpleEvents,
+} from '../DOMEventProperties';
+import {
+  accumulateSinglePhaseListeners,
+  accumulateEventHandleNonManagedNodeListeners,
+} from '../DOMPluginEventSystem';
+import {
+  IS_EVENT_HANDLE_NON_MANAGED_NODE,
+  IS_CAPTURE_PHASE,
+} from '../EventSystemFlags';
+
+import getEventCharCode from '../getEventCharCode';
+
+import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
+
+function extractEvents(
+  dispatchQueue: DispatchQueue,
+  domEventName: DOMEventName,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+): void {
+  const reactName = topLevelEventsToReactNames.get(domEventName);
+  if (reactName === undefined) {
+    return;
+  }
+  let SyntheticEventCtor = SyntheticEvent;
+  let reactEventType: string = domEventName;
+  switch (domEventName) {
+    case 'keypress':
+      // Firefox creates a keypress event for function keys too. This removes
+      // the unwanted keypress events. Enter is however both printable and
+      // non-printable. One would expect Tab to be as well (but it isn't).
+      // TODO: Fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=968056. Can
+      // probably remove.
+      if (getEventCharCode(((nativeEvent: any): KeyboardEvent)) === 0) {
+        return;
+      }
+    /* falls through */
+    case 'keydown':
+    case 'keyup':
+      SyntheticEventCtor = SyntheticKeyboardEvent;
+      break;
+    case 'focusin':
+      reactEventType = 'focus';
+      SyntheticEventCtor = SyntheticFocusEvent;
+      break;
+    case 'focusout':
+      reactEventType = 'blur';
+      SyntheticEventCtor = SyntheticFocusEvent;
+      break;
+    case 'beforeblur':
+    case 'afterblur':
+      SyntheticEventCtor = SyntheticFocusEvent;
+      break;
+    case 'click':
+      // Firefox creates a click event on right mouse clicks. This removes the
+      // unwanted click events.
+      // TODO: Fixed in https://phabricator.services.mozilla.com/D26793. Can
+      // probably remove.
+      if (nativeEvent.button === 2) {
+        return;
+      }
+    /* falls through */
+    case 'auxclick':
+    case 'dblclick':
+    case 'mousedown':
+    case 'mousemove':
+    case 'mouseup':
+    // TODO: Disabled elements should not respond to mouse events
+    /* falls through */
+    case 'mouseout':
+    case 'mouseover':
+    case 'contextmenu':
+      SyntheticEventCtor = SyntheticMouseEvent;
+      break;
+    case 'drag':
+    case 'dragend':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'dragstart':
+    case 'drop':
+      SyntheticEventCtor = SyntheticDragEvent;
+      break;
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchmove':
+    case 'touchstart':
+      SyntheticEventCtor = SyntheticTouchEvent;
+      break;
+    case ANIMATION_END:
+    case ANIMATION_ITERATION:
+    case ANIMATION_START:
+      SyntheticEventCtor = SyntheticAnimationEvent;
+      break;
+    case TRANSITION_END:
+      SyntheticEventCtor = SyntheticTransitionEvent;
+      break;
+    case 'scroll':
+    case 'scrollend':
+      SyntheticEventCtor = SyntheticUIEvent;
+      break;
+    case 'wheel':
+      SyntheticEventCtor = SyntheticWheelEvent;
+      break;
+    case 'copy':
+    case 'cut':
+    case 'paste':
+      SyntheticEventCtor = SyntheticClipboardEvent;
+      break;
+    case 'gotpointercapture':
+    case 'lostpointercapture':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'pointerup':
+      SyntheticEventCtor = SyntheticPointerEvent;
+      break;
+    case 'toggle':
+    case 'beforetoggle':
+      // MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
+      SyntheticEventCtor = SyntheticToggleEvent;
+      break;
+    default:
+      // Unknown event. This is used by createEventHandle.
+      break;
+  }
+
+  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
+  if (
+    enableCreateEventHandleAPI &&
+    eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE
+  ) {
+    const listeners = accumulateEventHandleNonManagedNodeListeners(
+      // TODO: this cast may not make sense for events like
+      // "focus" where React listens to e.g. "focusin".
+      ((reactEventType: any): DOMEventName),
+      targetContainer,
+      inCapturePhase,
+    );
+    if (listeners.length > 0) {
+      // Intentionally create event lazily.
+      const event: ReactSyntheticEvent = new SyntheticEventCtor(
+        reactName,
+        reactEventType,
+        null,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      dispatchQueue.push({event, listeners});
+    }
+  } else {
+    // Some events don't bubble in the browser.
+    // In the past, React has always bubbled them, but this can be surprising.
+    // We're going to try aligning closer to the browser behavior by not bubbling
+    // them in React either. We'll start by not bubbling onScroll, and then expand.
+    const accumulateTargetOnly =
+      !inCapturePhase &&
+      // TODO: ideally, we'd eventually add all events from
+      // nonDelegatedEvents list in DOMPluginEventSystem.
+      // Then we can remove this special list.
+      // This is a breaking change that can wait until React 18.
+      (domEventName === 'scroll' || domEventName === 'scrollend');
+
+    const listeners = accumulateSinglePhaseListeners(
+      targetInst,
+      reactName,
+      nativeEvent.type,
+      inCapturePhase,
+      accumulateTargetOnly,
+      nativeEvent,
+    );
+    if (listeners.length > 0) {
+      // Intentionally create event lazily.
+      const event: ReactSyntheticEvent = new SyntheticEventCtor(
+        reactName,
+        reactEventType,
+        null,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      dispatchQueue.push({event, listeners});
+    }
+  }
+}
+
+export {registerSimpleEvents as registerEvents, extractEvents};
diff --git a/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js b/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
new file mode 100644
index 00000000000..49c555f43f8
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
+} from 'react-dom/src/shared/ReactDOMTypes';
+
+import {
+  emitHint,
+  getHints,
+  resolveRequest,
+} from 'react-server/src/ReactFlightServer';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+const previousDispatcher =
+  ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
+ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = {
+  f /* flushSyncWork */: previousDispatcher.f /* flushSyncWork */,
+  r /* requestFormReset */: previousDispatcher.r /* requestFormReset */,
+  D /* prefetchDNS */: prefetchDNS,
+  C /* preconnect */: preconnect,
+  L /* preload */: preload,
+  m /* preloadModule */: preloadModule,
+  X /* preinitScript */: preinitScript,
+  S /* preinitStyle */: preinitStyle,
+  M /* preinitModuleScript */: preinitModuleScript,
+};
+
+function prefetchDNS(href: string) {
+  if (typeof href === 'string' && href) {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+      const key = 'D|' + href;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+      emitHint(request, 'D', href);
+    } else {
+      previousDispatcher.D(/* prefetchDNS */ href);
+    }
+  }
+}
+
+function preconnect(href: string, crossOrigin?: ?CrossOriginEnum) {
+  if (typeof href === 'string') {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+
+      const key = `C|${crossOrigin == null ? 'null' : crossOrigin}|${href}`;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+      if (typeof crossOrigin === 'string') {
+        emitHint(request, 'C', [href, crossOrigin]);
+      } else {
+        emitHint(request, 'C', href);
+      }
+    } else {
+      previousDispatcher.C(/* preconnect */ href, crossOrigin);
+    }
+  }
+}
+
+export function preload(
+  href: string,
+  as: string,
+  options?: ?PreloadImplOptions,
+) {
+  if (typeof href === 'string') {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+      let key = 'L';
+      if (as === 'image' && options) {
+        key += getImagePreloadKey(
+          href,
+          options.imageSrcSet,
+          options.imageSizes,
+        );
+      } else {
+        key += `[${as}]${href}`;
+      }
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+
+      const trimmed = trimOptions(options);
+      if (trimmed) {
+        emitHint(request, 'L', [href, as, trimmed]);
+      } else {
+        emitHint(request, 'L', [href, as]);
+      }
+    } else {
+      previousDispatcher.L(/* preload */ href, as, options);
+    }
+  }
+}
+
+export function preloadModule(
+  href: string,
+  options?: ?PreloadModuleImplOptions,
+): void {
+  if (typeof href === 'string') {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+      const key = 'm|' + href;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+
+      const trimmed = trimOptions(options);
+      if (trimmed) {
+        return emitHint(request, 'm', [href, trimmed]);
+      } else {
+        return emitHint(request, 'm', href);
+      }
+    } else {
+      previousDispatcher.m(/* preloadModule */ href, options);
+    }
+  }
+}
+
+function preinitStyle(
+  href: string,
+  precedence: ?string,
+  options?: ?PreinitStyleOptions,
+) {
+  if (typeof href === 'string') {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+      const key = 'S|' + href;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+
+      const trimmed = trimOptions(options);
+      if (trimmed) {
+        return emitHint(request, 'S', [
+          href,
+          typeof precedence === 'string' ? precedence : 0,
+          trimmed,
+        ]);
+      } else if (typeof precedence === 'string') {
+        return emitHint(request, 'S', [href, precedence]);
+      } else {
+        return emitHint(request, 'S', href);
+      }
+    } else {
+      previousDispatcher.S(/* preinitStyle */ href, precedence, options);
+    }
+  }
+}
+
+function preinitScript(src: string, options?: ?PreinitScriptOptions) {
+  if (typeof src === 'string') {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+      const key = 'X|' + src;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+
+      const trimmed = trimOptions(options);
+      if (trimmed) {
+        return emitHint(request, 'X', [src, trimmed]);
+      } else {
+        return emitHint(request, 'X', src);
+      }
+    } else {
+      previousDispatcher.X(/* preinitScript */ src, options);
+    }
+  }
+}
+
+function preinitModuleScript(
+  src: string,
+  options?: ?PreinitModuleScriptOptions,
+) {
+  if (typeof src === 'string') {
+    const request = resolveRequest();
+    if (request) {
+      const hints = getHints(request);
+      const key = 'M|' + src;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+      hints.add(key);
+
+      const trimmed = trimOptions(options);
+      if (trimmed) {
+        return emitHint(request, 'M', [src, trimmed]);
+      } else {
+        return emitHint(request, 'M', src);
+      }
+    } else {
+      previousDispatcher.M(/* preinitModuleScript */ src, options);
+    }
+  }
+}
+
+// Flight normally encodes undefined as a special character however for directive option
+// arguments we don't want to send unnecessary keys and bloat the payload so we create a
+// trimmed object which omits any keys with null or undefined values.
+// This is only typesafe because these option objects have entirely optional fields where
+// null and undefined represent the same thing as no property.
+function trimOptions<
+  T:
+    | PreloadImplOptions
+    | PreloadModuleImplOptions
+    | PreinitStyleOptions
+    | PreinitScriptOptions
+    | PreinitModuleScriptOptions,
+>(options: ?T): ?T {
+  if (options == null) return null;
+  let hasProperties = false;
+  const trimmed: T = ({}: any);
+  for (const key in options) {
+    // $FlowFixMe[invalid-computed-prop]
+    if (options[key] != null) {
+      hasProperties = true;
+      (trimmed: any)[key] = options[key];
+    }
+  }
+  return hasProperties ? trimmed : null;
+}
+
+function getImagePreloadKey(
+  href: string,
+  imageSrcSet: ?string,
+  imageSizes: ?string,
+) {
+  let uniquePart = '';
+  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+    uniquePart += '[' + imageSrcSet + ']';
+    if (typeof imageSizes === 'string') {
+      uniquePart += '[' + imageSizes + ']';
+    }
+  } else {
+    uniquePart += '[][]' + href;
+  }
+  return `[image]${uniquePart}`;
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
new file mode 100644
index 00000000000..54c57685686
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 interface Destination {
+  push(chunk: string | null): boolean;
+  destroy(error: Error): mixed;
+}
+
+export opaque type PrecomputedChunk = string;
+export opaque type Chunk = string;
+export opaque type BinaryChunk = string;
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function scheduleMicrotask(callback: () => void) {
+  // While this defies the method name the legacy builds have special
+  // overrides that make work scheduling sync. At the moment scheduleMicrotask
+  // isn't used by any legacy APIs so this is somewhat academic but if they
+  // did in the future we'd probably want to have this be in sync with scheduleWork
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {}
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk | BinaryChunk,
+): void {
+  writeChunkAndReturn(destination, chunk);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk | BinaryChunk,
+): boolean {
+  return destination.push(chunk);
+}
+
+export function completeWriting(destination: Destination) {}
+
+export function close(destination: Destination) {
+  destination.push(null);
+}
+
+export function stringToChunk(content: string): Chunk {
+  return content;
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  return content;
+}
+
+export function typedArrayToBinaryChunk(
+  content: $ArrayBufferView,
+): BinaryChunk {
+  throw new Error('Not implemented.');
+}
+
+export const byteLengthOfChunk:
+  | null
+  | ((chunk: Chunk | PrecomputedChunk) => number) = null;
+
+export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
+  throw new Error('Not implemented.');
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+  destination.destroy(error);
+}
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
+
+export function readAsDataURL(blob: Blob): Promise<string> {
+  return blob.arrayBuffer().then(arrayBuffer => {
+    const encoded =
+      typeof Buffer === 'function' && typeof Buffer.from === 'function'
+        ? Buffer.from(arrayBuffer).toString('base64')
+        : btoa(String.fromCharCode.apply(String, new Uint8Array(arrayBuffer)));
+    const mimeType = blob.type || 'application/octet-stream';
+    return 'data:' + mimeType + ';base64,' + encoded;
+  });
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
new file mode 100644
index 00000000000..8a13babe2b9
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -0,0 +1,99 @@
+/**
+ * This file is compiled to a standalone browser script by rollup and loaded by Fizz
+ *  clients. Therefore, it should be fast and not have many external dependencies.
+ * @flow
+ */
+/* eslint-disable dot-notation */
+
+// Imports are resolved statically by the closure compiler in release bundles
+// and by rollup in jest unit tests
+import './fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime';
+
+if (document.body != null) {
+  if (document.readyState === 'loading') {
+    installFizzInstrObserver(document.body);
+  }
+  // $FlowFixMe[incompatible-cast]
+  handleExistingNodes((document.body: HTMLElement));
+} else {
+  // Document must be loading -- body may not exist yet if the fizz external
+  // runtime is sent in <head> (e.g. as a preinit resource)
+  // $FlowFixMe[recursive-definition]
+  const domBodyObserver = new MutationObserver(() => {
+    // We expect the body node to be stable once parsed / created
+    if (document.body != null) {
+      if (document.readyState === 'loading') {
+        installFizzInstrObserver(document.body);
+      }
+      // $FlowFixMe[incompatible-cast]
+      handleExistingNodes((document.body: HTMLElement));
+
+      // We can call disconnect without takeRecord here,
+      // since we only expect a single document.body
+      domBodyObserver.disconnect();
+    }
+  });
+  // documentElement must already exist at this point
+  domBodyObserver.observe(document.documentElement, {childList: true});
+}
+
+function handleExistingNodes(target: HTMLElement) {
+  const existingNodes = target.querySelectorAll('template');
+  for (let i = 0; i < existingNodes.length; i++) {
+    handleNode(existingNodes[i]);
+  }
+}
+
+function installFizzInstrObserver(target: Node) {
+  const handleMutations = (mutations: Array<MutationRecord>) => {
+    for (let i = 0; i < mutations.length; i++) {
+      const addedNodes = mutations[i].addedNodes;
+      for (let j = 0; j < addedNodes.length; j++) {
+        if (addedNodes[j].parentNode) {
+          handleNode(addedNodes[j]);
+        }
+      }
+    }
+  };
+
+  const fizzInstrObserver = new MutationObserver(handleMutations);
+  // We assume that instruction data nodes are eventually appended to the
+  // body, even if Fizz is streaming to a shell / subtree.
+  fizzInstrObserver.observe(target, {
+    childList: true,
+  });
+  window.addEventListener('DOMContentLoaded', () => {
+    handleMutations(fizzInstrObserver.takeRecords());
+    fizzInstrObserver.disconnect();
+  });
+}
+
+function handleNode(node_: Node) {
+  // $FlowFixMe[incompatible-cast]
+  if (node_.nodeType !== 1 || !(node_: HTMLElement).dataset) {
+    return;
+  }
+  // $FlowFixMe[incompatible-cast]
+  const node = (node_: HTMLElement);
+  const dataset = node.dataset;
+  if (dataset['rxi'] != null) {
+    window['$RX'](
+      dataset['bid'],
+      dataset['dgst'],
+      dataset['msg'],
+      dataset['stck'],
+      dataset['cstck'],
+    );
+    node.remove();
+  } else if (dataset['rri'] != null) {
+    // Convert styles here, since its type is Array<Array<string>>
+    window['$RR'](dataset['bid'], dataset['sid'], JSON.parse(dataset['sty']));
+    node.remove();
+  } else if (dataset['rci'] != null) {
+    window['$RC'](dataset['bid'], dataset['sid']);
+    node.remove();
+  } else if (dataset['rsi'] != null) {
+    window['$RS'](dataset['sid'], dataset['pid']);
+    node.remove();
+  }
+}
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
new file mode 100644
index 00000000000..a93c32a947f
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -0,0 +1,7149 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactNodeList,
+  ReactCustomFormAction,
+  Thenable,
+} from 'shared/ReactTypes';
+import type {
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
+  ImportMap,
+} from 'react-dom/src/shared/ReactDOMTypes';
+
+import {
+  checkHtmlStringCoercion,
+  checkCSSPropertyStringCoercion,
+  checkAttributeStringCoercion,
+  checkOptionStringCoercion,
+} from 'shared/CheckStringCoercion';
+
+import {Children} from 'react';
+
+import {
+  enableFizzExternalRuntime,
+  enableSrcObject,
+  enableFizzBlockingRender,
+  enableViewTransition,
+} from 'shared/ReactFeatureFlags';
+
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import type {FormStatus} from '../shared/ReactDOMFormActions';
+
+import {
+  writeChunk,
+  writeChunkAndReturn,
+  stringToChunk,
+  stringToPrecomputedChunk,
+  readAsDataURL,
+} from 'react-server/src/ReactServerStreamConfig';
+import {
+  resolveRequest,
+  getResumableState,
+  getRenderState,
+  flushResources,
+} from 'react-server/src/ReactFizzServer';
+
+import isAttributeNameSafe from '../shared/isAttributeNameSafe';
+import isUnitlessNumber from '../shared/isUnitlessNumber';
+import getAttributeAlias from '../shared/getAttributeAlias';
+
+import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
+import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
+import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
+import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import warnValidStyle from '../shared/warnValidStyle';
+import {getCrossOriginString} from '../shared/crossOriginStrings';
+
+import escapeTextForBrowser from './escapeTextForBrowser';
+import hyphenateStyleName from '../shared/hyphenateStyleName';
+import hasOwnProperty from 'shared/hasOwnProperty';
+import sanitizeURL from '../shared/sanitizeURL';
+import isArray from 'shared/isArray';
+
+import {
+  clientRenderBoundary as clientRenderFunction,
+  completeBoundary as completeBoundaryFunction,
+  completeBoundaryUpgradeToViewTransitions as upgradeToViewTransitionsInstruction,
+  completeBoundaryWithStyles as styleInsertionFunction,
+  completeSegment as completeSegmentFunction,
+  formReplaying as formReplayingRuntime,
+  markShellTime,
+} from './fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings';
+
+import {getValueDescriptorExpectingObjectForWarning} from '../shared/ReactDOMResourceValidation';
+
+import {NotPending} from '../shared/ReactDOMFormActions';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+const previousDispatcher =
+  ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
+ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = {
+  f /* flushSyncWork */: previousDispatcher.f /* flushSyncWork */,
+  r /* requestFormReset */: previousDispatcher.r /* requestFormReset */,
+  D /* prefetchDNS */: prefetchDNS,
+  C /* preconnect */: preconnect,
+  L /* preload */: preload,
+  m /* preloadModule */: preloadModule,
+  X /* preinitScript */: preinitScript,
+  S /* preinitStyle */: preinitStyle,
+  M /* preinitModuleScript */: preinitModuleScript,
+};
+
+// We make every property of the descriptor optional because it is not a contract that
+// the headers provided by onHeaders has any particular header types.
+export type HeadersDescriptor = {
+  Link?: string,
+};
+
+// Used to distinguish these contexts from ones used in other renderers.
+// E.g. this can be used to distinguish legacy renderers from this modern one.
+export const isPrimaryRenderer = true;
+
+export const supportsClientAPIs = true;
+
+export type StreamingFormat = 0 | 1;
+const ScriptStreamingFormat: StreamingFormat = 0;
+const DataStreamingFormat: StreamingFormat = 1;
+
+export type InstructionState = number;
+const NothingSent /*                      */ = 0b000000000;
+const SentCompleteSegmentFunction /*      */ = 0b000000001;
+const SentCompleteBoundaryFunction /*     */ = 0b000000010;
+const SentClientRenderFunction /*         */ = 0b000000100;
+const SentStyleInsertionFunction /*       */ = 0b000001000;
+const SentFormReplayingRuntime /*         */ = 0b000010000;
+const SentCompletedShellId /*             */ = 0b000100000;
+const SentMarkShellTime /*                */ = 0b001000000;
+const NeedUpgradeToViewTransitions /*     */ = 0b010000000;
+const SentUpgradeToViewTransitions /*     */ = 0b100000000;
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+// Per request, global state that is not contextual to the rendering subtree.
+// This cannot be resumed and therefore should only contain things that are
+// temporary working state or are never used in the prerender pass.
+export type RenderState = {
+  // These can be recreated from resumable state.
+  placeholderPrefix: PrecomputedChunk,
+  segmentPrefix: PrecomputedChunk,
+  boundaryPrefix: PrecomputedChunk,
+
+  // inline script streaming format, unused if using external runtime / data
+  startInlineScript: PrecomputedChunk,
+
+  startInlineStyle: PrecomputedChunk,
+
+  // the preamble must always flush before resuming, so all these chunks must
+  // be null or empty when resuming.
+
+  // preamble chunks
+  preamble: PreambleState,
+
+  // external runtime script chunks
+  externalRuntimeScript: null | ExternalRuntimeScript,
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
+  importMapChunks: Array<Chunk | PrecomputedChunk>,
+
+  // Hoistable chunks
+  charsetChunks: Array<Chunk | PrecomputedChunk>,
+  viewportChunks: Array<Chunk | PrecomputedChunk>,
+  hoistableChunks: Array<Chunk | PrecomputedChunk>,
+
+  // Headers queues for Resources that can flush early
+  onHeaders: void | ((headers: HeadersDescriptor) => void),
+  headers: null | {
+    preconnects: string,
+    fontPreloads: string,
+    highImagePreloads: string,
+    remainingCapacity: number,
+  },
+  resets: {
+    // corresponds to ResumableState.unknownResources["font"]
+    font: {
+      [href: string]: Preloaded,
+    },
+    // the rest correspond to ResumableState[<...>Resources]
+    dns: {[key: string]: Exists},
+    connect: {
+      default: {[key: string]: Exists},
+      anonymous: {[key: string]: Exists},
+      credentials: {[key: string]: Exists},
+    },
+    image: {
+      [key: string]: Preloaded,
+    },
+    style: {
+      [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+    },
+  },
+
+  // Flushing queues for Resource dependencies
+  preconnects: Set<Resource>,
+  fontPreloads: Set<Resource>,
+  highImagePreloads: Set<Resource>,
+  // usedImagePreloads: Set<PreloadResource>,
+  styles: Map<string, StyleQueue>,
+  bootstrapScripts: Set<Resource>,
+  scripts: Set<Resource>,
+  bulkPreloads: Set<Resource>,
+
+  // Temporarily keeps track of key to preload resources before shell flushes.
+  preloads: {
+    images: Map<string, Resource>,
+    stylesheets: Map<string, Resource>,
+    scripts: Map<string, Resource>,
+    moduleScripts: Map<string, Resource>,
+  },
+
+  nonce: {
+    script: string | void,
+    style: string | void,
+  },
+
+  // Module-global-like reference for flushing/hoisting state of style resources
+  // We need to track whether the current request has flushed any style resources
+  // without sending an instruction to hoist them. we do that here
+  stylesToHoist: boolean,
+
+  // We allow the legacy renderer to extend this object.
+
+  ...
+};
+
+type Exists = null;
+type Preloaded = [];
+// Credentials here are things that affect whether a browser will make a request
+// as well as things that affect which connection the browser will use for that request.
+// We want these to be aligned across preloads and resources because otherwise the preload
+// will be wasted.
+// We investigated whether referrerPolicy should be included here but from experimentation
+// it seems that browsers do not treat this as part of the http cache key and does not affect
+// which connection is used.
+type PreloadedWithCredentials = [
+  /* crossOrigin */ ?CrossOriginEnum,
+  /* integrity */ ?string,
+];
+
+const EXISTS: Exists = null;
+// This constant is to mark preloads that have no unique credentials
+// to convey. It should never be checked by identity and we should not
+// assume Preload values in ResumableState equal this value because they
+// will have come from some parsed input.
+const PRELOAD_NO_CREDS: Preloaded = [];
+if (__DEV__) {
+  Object.freeze(PRELOAD_NO_CREDS);
+}
+
+// Per response, global state that is not contextual to the rendering subtree.
+// This is resumable and therefore should be serializable.
+export type ResumableState = {
+  idPrefix: string,
+  nextFormID: number,
+  streamingFormat: StreamingFormat,
+
+  // We carry the bootstrap intializers in resumable state in case we postpone in the shell
+  // of a prerender. On resume we will reinitialize the bootstrap scripts if necessary.
+  // If we end up flushing the bootstrap scripts we void these on the resumable state
+  bootstrapScriptContent?: string | void,
+  bootstrapScripts?: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+  bootstrapModules?: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+
+  // state for script streaming format, unused if using external runtime / data
+  instructions: InstructionState,
+
+  // postamble state
+  hasBody: boolean,
+  hasHtml: boolean,
+
+  // Resources - Request local cache
+  unknownResources: {
+    [asType: string]: {
+      [href: string]: Preloaded,
+    },
+  },
+  dnsResources: {[key: string]: Exists},
+  connectResources: {
+    default: {[key: string]: Exists},
+    anonymous: {[key: string]: Exists},
+    credentials: {[key: string]: Exists},
+  },
+  imageResources: {
+    [key: string]: Preloaded,
+  },
+  styleResources: {
+    [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+  },
+  scriptResources: {
+    [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+  },
+  moduleUnknownResources: {
+    [asType: string]: {
+      [href: string]: Preloaded,
+    },
+  },
+  moduleScriptResources: {
+    [key: string]: Exists | Preloaded | PreloadedWithCredentials,
+  },
+};
+
+let currentlyFlushingRenderState: RenderState | null = null;
+
+const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
+
+const startInlineScript = stringToPrecomputedChunk('<script');
+const endInlineScript = stringToPrecomputedChunk('</script>');
+
+const startScriptSrc = stringToPrecomputedChunk('<script src="');
+const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+const scriptNonce = stringToPrecomputedChunk(' nonce="');
+const scriptIntegirty = stringToPrecomputedChunk(' integrity="');
+const scriptCrossOrigin = stringToPrecomputedChunk(' crossorigin="');
+const endAsyncScript = stringToPrecomputedChunk(' async=""></script>');
+
+const startInlineStyle = stringToPrecomputedChunk('<style');
+
+/**
+ * This escaping function is designed to work with with inline scripts where the entire
+ * contents are escaped. Because we know we are escaping the entire script we can avoid for instance
+ * escaping html comment string sequences that are valid javascript as well because
+ * if there are no sebsequent <script sequences the html parser will never enter
+ * script data double escaped state (see: https://www.w3.org/TR/html53/syntax.html#script-data-double-escaped-state)
+ *
+ * While untrusted script content should be made safe before using this api it will
+ * ensure that the script cannot be early terminated or never terminated state
+ */
+function escapeEntireInlineScriptContent(scriptText: string) {
+  if (__DEV__) {
+    checkHtmlStringCoercion(scriptText);
+  }
+  return ('' + scriptText).replace(scriptRegex, scriptReplacer);
+}
+const scriptRegex = /(<\/|<)(s)(cript)/gi;
+const scriptReplacer = (
+  match: string,
+  prefix: string,
+  s: string,
+  suffix: string,
+) => `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
+
+export type BootstrapScriptDescriptor = {
+  src: string,
+  integrity?: string,
+  crossOrigin?: string,
+};
+export type ExternalRuntimeScript = {
+  src: string,
+  chunks: Array<Chunk | PrecomputedChunk>,
+};
+
+const importMapScriptStart = stringToPrecomputedChunk(
+  '<script type="importmap">',
+);
+const importMapScriptEnd = stringToPrecomputedChunk('</script>');
+
+// Since we store headers as strings we deal with their length in utf16 code units
+// rather than visual characters or the utf8 encoding that is used for most binary
+// serialization. Some common HTTP servers only allow for headers to be 4kB in length.
+// We choose a default length that is likely to be well under this already limited length however
+// pathological cases may still cause the utf-8 encoding of the headers to approach this limit.
+// It should also be noted that this maximum is a soft maximum. we have not reached the limit we will
+// allow one more header to be captured which means in practice if the limit is approached it will be exceeded
+const DEFAULT_HEADERS_CAPACITY_IN_UTF16_CODE_UNITS = 2000;
+
+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
+if (__DEV__) {
+  didWarnForNewBooleanPropsWithEmptyValue = {};
+}
+
+// Allows us to keep track of what we've already written so we can refer back to it.
+// if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
+// is set, the server will send instructions via data attributes (instead of inline scripts)
+export function createRenderState(
+  resumableState: ResumableState,
+  nonce:
+    | string
+    | {
+        script?: string,
+        style?: string,
+      }
+    | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
+  importMap: ImportMap | void,
+  onHeaders: void | ((headers: HeadersDescriptor) => void),
+  maxHeadersLength: void | number,
+): RenderState {
+  const nonceScript = typeof nonce === 'string' ? nonce : nonce && nonce.script;
+  const inlineScriptWithNonce =
+    nonceScript === undefined
+      ? startInlineScript
+      : stringToPrecomputedChunk(
+          '<script nonce="' + escapeTextForBrowser(nonceScript) + '"',
+        );
+  const nonceStyle =
+    typeof nonce === 'string' ? undefined : nonce && nonce.style;
+  const inlineStyleWithNonce =
+    nonceStyle === undefined
+      ? startInlineStyle
+      : stringToPrecomputedChunk(
+          '<style nonce="' + escapeTextForBrowser(nonceStyle) + '"',
+        );
+  const idPrefix = resumableState.idPrefix;
+
+  const bootstrapChunks: Array<Chunk | PrecomputedChunk> = [];
+  let externalRuntimeScript: null | ExternalRuntimeScript = null;
+  const {bootstrapScriptContent, bootstrapScripts, bootstrapModules} =
+    resumableState;
+  if (bootstrapScriptContent !== undefined) {
+    bootstrapChunks.push(inlineScriptWithNonce);
+    pushCompletedShellIdAttribute(bootstrapChunks, resumableState);
+    bootstrapChunks.push(
+      endOfStartTag,
+      stringToChunk(escapeEntireInlineScriptContent(bootstrapScriptContent)),
+      endInlineScript,
+    );
+  }
+  if (enableFizzExternalRuntime) {
+    if (externalRuntimeConfig !== undefined) {
+      if (typeof externalRuntimeConfig === 'string') {
+        externalRuntimeScript = {
+          src: externalRuntimeConfig,
+          chunks: [],
+        };
+        pushScriptImpl(externalRuntimeScript.chunks, {
+          src: externalRuntimeConfig,
+          async: true,
+          integrity: undefined,
+          nonce: nonceScript,
+        });
+      } else {
+        externalRuntimeScript = {
+          src: externalRuntimeConfig.src,
+          chunks: [],
+        };
+        pushScriptImpl(externalRuntimeScript.chunks, {
+          src: externalRuntimeConfig.src,
+          async: true,
+          integrity: externalRuntimeConfig.integrity,
+          nonce: nonceScript,
+        });
+      }
+    }
+  }
+
+  const importMapChunks: Array<Chunk | PrecomputedChunk> = [];
+  if (importMap !== undefined) {
+    const map = importMap;
+    importMapChunks.push(importMapScriptStart);
+    importMapChunks.push(
+      stringToChunk(escapeEntireInlineScriptContent(JSON.stringify(map))),
+    );
+    importMapChunks.push(importMapScriptEnd);
+  }
+  if (__DEV__) {
+    if (onHeaders && typeof maxHeadersLength === 'number') {
+      if (maxHeadersLength <= 0) {
+        console.error(
+          'React expected a positive non-zero `maxHeadersLength` option but found %s instead. When using the `onHeaders` option you may supply an optional `maxHeadersLength` option as well however, when setting this value to zero or less no headers will be captured.',
+          maxHeadersLength === 0 ? 'zero' : maxHeadersLength,
+        );
+      }
+    }
+  }
+  const headers = onHeaders
+    ? {
+        preconnects: '',
+        fontPreloads: '',
+        highImagePreloads: '',
+        remainingCapacity:
+          // We seed the remainingCapacity with 2 extra bytes because when we decrement the capacity
+          // we always assume we are inserting an interstitial ", " however the first header does not actually
+          // consume these two extra bytes.
+          2 +
+          (typeof maxHeadersLength === 'number'
+            ? maxHeadersLength
+            : DEFAULT_HEADERS_CAPACITY_IN_UTF16_CODE_UNITS),
+      }
+    : null;
+  const renderState: RenderState = {
+    placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
+    segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
+    boundaryPrefix: stringToPrecomputedChunk(idPrefix + 'B:'),
+    startInlineScript: inlineScriptWithNonce,
+    startInlineStyle: inlineStyleWithNonce,
+    preamble: createPreambleState(),
+
+    externalRuntimeScript: externalRuntimeScript,
+    bootstrapChunks: bootstrapChunks,
+    importMapChunks,
+
+    onHeaders,
+    headers,
+    resets: {
+      font: {},
+      dns: {},
+      connect: {
+        default: {},
+        anonymous: {},
+        credentials: {},
+      },
+      image: {},
+      style: {},
+    },
+
+    charsetChunks: [],
+    viewportChunks: [],
+    hoistableChunks: [],
+
+    // cleared on flush
+    preconnects: new Set(),
+    fontPreloads: new Set(),
+    highImagePreloads: new Set(),
+    // usedImagePreloads: new Set(),
+    styles: new Map(),
+    bootstrapScripts: new Set(),
+    scripts: new Set(),
+    bulkPreloads: new Set(),
+
+    preloads: {
+      images: new Map(),
+      stylesheets: new Map(),
+      scripts: new Map(),
+      moduleScripts: new Map(),
+    },
+
+    nonce: {
+      script: nonceScript,
+      style: nonceStyle,
+    },
+    // like a module global for currently rendering boundary
+    hoistableState: null,
+    stylesToHoist: false,
+  };
+
+  if (bootstrapScripts !== undefined) {
+    for (let i = 0; i < bootstrapScripts.length; i++) {
+      const scriptConfig = bootstrapScripts[i];
+      let src, crossOrigin, integrity;
+      const props: PreloadAsProps = ({
+        rel: 'preload',
+        as: 'script',
+        fetchPriority: 'low',
+        nonce,
+      }: any);
+      if (typeof scriptConfig === 'string') {
+        props.href = src = scriptConfig;
+      } else {
+        props.href = src = scriptConfig.src;
+        props.integrity = integrity =
+          typeof scriptConfig.integrity === 'string'
+            ? scriptConfig.integrity
+            : undefined;
+        props.crossOrigin = crossOrigin =
+          typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
+            ? undefined
+            : scriptConfig.crossOrigin === 'use-credentials'
+              ? 'use-credentials'
+              : '';
+      }
+
+      preloadBootstrapScriptOrModule(resumableState, renderState, src, props);
+
+      bootstrapChunks.push(
+        startScriptSrc,
+        stringToChunk(escapeTextForBrowser(src)),
+        attributeEnd,
+      );
+      if (nonceScript) {
+        bootstrapChunks.push(
+          scriptNonce,
+          stringToChunk(escapeTextForBrowser(nonceScript)),
+          attributeEnd,
+        );
+      }
+      if (typeof integrity === 'string') {
+        bootstrapChunks.push(
+          scriptIntegirty,
+          stringToChunk(escapeTextForBrowser(integrity)),
+          attributeEnd,
+        );
+      }
+      if (typeof crossOrigin === 'string') {
+        bootstrapChunks.push(
+          scriptCrossOrigin,
+          stringToChunk(escapeTextForBrowser(crossOrigin)),
+          attributeEnd,
+        );
+      }
+      pushCompletedShellIdAttribute(bootstrapChunks, resumableState);
+      bootstrapChunks.push(endAsyncScript);
+    }
+  }
+  if (bootstrapModules !== undefined) {
+    for (let i = 0; i < bootstrapModules.length; i++) {
+      const scriptConfig = bootstrapModules[i];
+      let src, crossOrigin, integrity;
+      const props: PreloadModuleProps = ({
+        rel: 'modulepreload',
+        fetchPriority: 'low',
+        nonce: nonceScript,
+      }: any);
+      if (typeof scriptConfig === 'string') {
+        props.href = src = scriptConfig;
+      } else {
+        props.href = src = scriptConfig.src;
+        props.integrity = integrity =
+          typeof scriptConfig.integrity === 'string'
+            ? scriptConfig.integrity
+            : undefined;
+        props.crossOrigin = crossOrigin =
+          typeof scriptConfig === 'string' || scriptConfig.crossOrigin == null
+            ? undefined
+            : scriptConfig.crossOrigin === 'use-credentials'
+              ? 'use-credentials'
+              : '';
+      }
+
+      preloadBootstrapScriptOrModule(resumableState, renderState, src, props);
+
+      bootstrapChunks.push(
+        startModuleSrc,
+        stringToChunk(escapeTextForBrowser(src)),
+        attributeEnd,
+      );
+      if (nonceScript) {
+        bootstrapChunks.push(
+          scriptNonce,
+          stringToChunk(escapeTextForBrowser(nonceScript)),
+          attributeEnd,
+        );
+      }
+      if (typeof integrity === 'string') {
+        bootstrapChunks.push(
+          scriptIntegirty,
+          stringToChunk(escapeTextForBrowser(integrity)),
+          attributeEnd,
+        );
+      }
+      if (typeof crossOrigin === 'string') {
+        bootstrapChunks.push(
+          scriptCrossOrigin,
+          stringToChunk(escapeTextForBrowser(crossOrigin)),
+          attributeEnd,
+        );
+      }
+      pushCompletedShellIdAttribute(bootstrapChunks, resumableState);
+      bootstrapChunks.push(endAsyncScript);
+    }
+  }
+
+  return renderState;
+}
+
+export function resumeRenderState(
+  resumableState: ResumableState,
+  nonce: NonceOption | void,
+): RenderState {
+  return createRenderState(
+    resumableState,
+    nonce,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  );
+}
+
+export function createResumableState(
+  identifierPrefix: string | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
+  bootstrapScriptContent: string | void,
+  bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+  bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+): ResumableState {
+  const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
+
+  let streamingFormat = ScriptStreamingFormat;
+  if (enableFizzExternalRuntime) {
+    if (externalRuntimeConfig !== undefined) {
+      streamingFormat = DataStreamingFormat;
+    }
+  }
+  return {
+    idPrefix: idPrefix,
+    nextFormID: 0,
+    streamingFormat,
+    bootstrapScriptContent,
+    bootstrapScripts,
+    bootstrapModules,
+    instructions: NothingSent,
+    hasBody: false,
+    hasHtml: false,
+
+    // @TODO add bootstrap script to implicit preloads
+
+    // persistent
+    unknownResources: {},
+    dnsResources: {},
+    connectResources: {
+      default: {},
+      anonymous: {},
+      credentials: {},
+    },
+    imageResources: {},
+    styleResources: {},
+    scriptResources: {},
+    moduleUnknownResources: {},
+    moduleScriptResources: {},
+  };
+}
+
+export function resetResumableState(
+  resumableState: ResumableState,
+  renderState: RenderState,
+): void {
+  // Resets the resumable state based on what didn't manage to fully flush in the render state.
+  // This currently assumes nothing was flushed.
+  resumableState.nextFormID = 0;
+  resumableState.hasBody = false;
+  resumableState.hasHtml = false;
+  resumableState.unknownResources = {
+    font: renderState.resets.font,
+  };
+  resumableState.dnsResources = renderState.resets.dns;
+  resumableState.connectResources = renderState.resets.connect;
+  resumableState.imageResources = renderState.resets.image;
+  resumableState.styleResources = renderState.resets.style;
+  resumableState.scriptResources = {};
+  resumableState.moduleUnknownResources = {};
+  resumableState.moduleScriptResources = {};
+  resumableState.instructions = NothingSent; // Nothing was flushed so no instructions could've flushed.
+}
+
+export function completeResumableState(resumableState: ResumableState): void {
+  // This function is called when we have completed a prerender and there is a shell.
+  resumableState.bootstrapScriptContent = undefined;
+  resumableState.bootstrapScripts = undefined;
+  resumableState.bootstrapModules = undefined;
+}
+
+export type PreambleState = {
+  htmlChunks: null | Array<Chunk | PrecomputedChunk>,
+  headChunks: null | Array<Chunk | PrecomputedChunk>,
+  bodyChunks: null | Array<Chunk | PrecomputedChunk>,
+};
+export function createPreambleState(): PreambleState {
+  return {
+    htmlChunks: null,
+    headChunks: null,
+    bodyChunks: null,
+  };
+}
+
+// Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
+// modes. We only include the variants as they matter for the sake of our purposes.
+// We don't actually provide the namespace therefore we use constants instead of the string.
+export const ROOT_HTML_MODE = 0; // Used for the root most element tag.
+// We have a less than HTML_HTML_MODE check elsewhere. If you add more cases here, make sure it
+// still makes sense
+const HTML_HTML_MODE = 1; // Used for the <html> if it is at the top level.
+const HTML_MODE = 2;
+const HTML_HEAD_MODE = 3;
+const SVG_MODE = 4;
+const MATHML_MODE = 5;
+const HTML_TABLE_MODE = 6;
+const HTML_TABLE_BODY_MODE = 7;
+const HTML_TABLE_ROW_MODE = 8;
+const HTML_COLGROUP_MODE = 9;
+// We have a greater than HTML_TABLE_MODE check elsewhere. If you add more cases here, make sure it
+// still makes sense
+
+type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+const NO_SCOPE = /*         */ 0b0000000;
+const NOSCRIPT_SCOPE = /*   */ 0b0000001;
+const PICTURE_SCOPE = /*    */ 0b0000010;
+const FALLBACK_SCOPE = /*   */ 0b0000100;
+const EXIT_SCOPE = /*       */ 0b0001000; // A direct Instance below a Suspense fallback is the only thing that can "exit"
+const ENTER_SCOPE = /*      */ 0b0010000; // A direct Instance below Suspense content is the only thing that can "enter"
+const UPDATE_SCOPE = /*     */ 0b0100000; // Inside a scope that applies "update" ViewTransitions if anything mutates here.
+const APPEARING_SCOPE = /*  */ 0b1000000; // Below Suspense content subtree which might appear in an "enter" animation or "shared" animation.
+
+// Everything not listed here are tracked for the whole subtree as opposed to just
+// until the next Instance.
+const SUBTREE_SCOPE = ~(ENTER_SCOPE | EXIT_SCOPE);
+
+type ViewTransitionContext = {
+  update: 'none' | 'auto' | string,
+  enter: 'none' | 'auto' | string,
+  exit: 'none' | 'auto' | string,
+  share: 'none' | 'auto' | string,
+  name: 'auto' | string,
+  autoName: string, // a name that can be used if an explicit one is not defined.
+  nameIdx: number, // keeps track of how many duplicates of this name we've emitted.
+};
+
+// Lets us keep track of contextual state and pick it back up after suspending.
+export type FormatContext = {
+  insertionMode: InsertionMode, // root/svg/html/mathml/table
+  selectedValue: null | string | Array<string>, // the selected value(s) inside a <select>, or null outside <select>
+  tagScope: number,
+  viewTransition: null | ViewTransitionContext, // tracks if we're inside a ViewTransition outside the first DOM node
+};
+
+function createFormatContext(
+  insertionMode: InsertionMode,
+  selectedValue: null | string | Array<string>,
+  tagScope: number,
+  viewTransition: null | ViewTransitionContext,
+): FormatContext {
+  return {
+    insertionMode,
+    selectedValue,
+    tagScope,
+    viewTransition,
+  };
+}
+
+export function canHavePreamble(formatContext: FormatContext): boolean {
+  return formatContext.insertionMode < HTML_MODE;
+}
+
+export function createRootFormatContext(namespaceURI?: string): FormatContext {
+  const insertionMode =
+    namespaceURI === 'http://www.w3.org/2000/svg'
+      ? SVG_MODE
+      : namespaceURI === 'http://www.w3.org/1998/Math/MathML'
+        ? MATHML_MODE
+        : ROOT_HTML_MODE;
+  return createFormatContext(insertionMode, null, NO_SCOPE, null);
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  const subtreeScope = parentContext.tagScope & SUBTREE_SCOPE;
+  switch (type) {
+    case 'noscript':
+      return createFormatContext(
+        HTML_MODE,
+        null,
+        subtreeScope | NOSCRIPT_SCOPE,
+        null,
+      );
+    case 'select':
+      return createFormatContext(
+        HTML_MODE,
+        props.value != null ? props.value : props.defaultValue,
+        subtreeScope,
+        null,
+      );
+    case 'svg':
+      return createFormatContext(SVG_MODE, null, subtreeScope, null);
+    case 'picture':
+      return createFormatContext(
+        HTML_MODE,
+        null,
+        subtreeScope | PICTURE_SCOPE,
+        null,
+      );
+    case 'math':
+      return createFormatContext(MATHML_MODE, null, subtreeScope, null);
+    case 'foreignObject':
+      return createFormatContext(HTML_MODE, null, subtreeScope, null);
+    // Table parents are special in that their children can only be created at all if they're
+    // wrapped in a table parent. So we need to encode that we're entering this mode.
+    case 'table':
+      return createFormatContext(HTML_TABLE_MODE, null, subtreeScope, null);
+    case 'thead':
+    case 'tbody':
+    case 'tfoot':
+      return createFormatContext(
+        HTML_TABLE_BODY_MODE,
+        null,
+        subtreeScope,
+        null,
+      );
+    case 'colgroup':
+      return createFormatContext(HTML_COLGROUP_MODE, null, subtreeScope, null);
+    case 'tr':
+      return createFormatContext(HTML_TABLE_ROW_MODE, null, subtreeScope, null);
+    case 'head':
+      if (parentContext.insertionMode < HTML_MODE) {
+        // We are either at the root or inside the <html> tag and can enter
+        // the <head> scope
+        return createFormatContext(HTML_HEAD_MODE, null, subtreeScope, null);
+      }
+      break;
+    case 'html':
+      if (parentContext.insertionMode === ROOT_HTML_MODE) {
+        return createFormatContext(HTML_HTML_MODE, null, subtreeScope, null);
+      }
+      break;
+  }
+  if (parentContext.insertionMode >= HTML_TABLE_MODE) {
+    // Whatever tag this was, it wasn't a table parent or other special parent, so we must have
+    // entered plain HTML again.
+    return createFormatContext(HTML_MODE, null, subtreeScope, null);
+  }
+  if (parentContext.insertionMode < HTML_MODE) {
+    return createFormatContext(HTML_MODE, null, subtreeScope, null);
+  }
+  if (enableViewTransition) {
+    if (parentContext.viewTransition !== null) {
+      // If we're inside a view transition, regardless what element we were in, it consumes
+      // the view transition context.
+      return createFormatContext(
+        parentContext.insertionMode,
+        parentContext.selectedValue,
+        subtreeScope,
+        null,
+      );
+    }
+  }
+  if (parentContext.tagScope !== subtreeScope) {
+    return createFormatContext(
+      parentContext.insertionMode,
+      parentContext.selectedValue,
+      subtreeScope,
+      null,
+    );
+  }
+  return parentContext;
+}
+
+function getSuspenseViewTransition(
+  parentViewTransition: null | ViewTransitionContext,
+): null | ViewTransitionContext {
+  if (parentViewTransition === null) {
+    return null;
+  }
+  // If a ViewTransition wraps a Suspense boundary it applies to the children Instances
+  // in both the fallback and the content.
+  // Since we only have a representation of ViewTransitions on the Instances themselves
+  // we cannot model the parent ViewTransition activating "enter", "exit" or "share"
+  // since those would be ambiguous with the Suspense boundary changing states and
+  // affecting the same Instances.
+  // We also can't model an "update" when that update is fallback nodes swapping for
+  // content nodes. However, we can model is as a "share" from the fallback nodes to
+  // the content nodes using the same name. We just have to assign the same name that
+  // we would've used (the parent ViewTransition name or auto-assign one).
+  const viewTransition: ViewTransitionContext = {
+    update: parentViewTransition.update, // For deep updates.
+    enter: 'none',
+    exit: 'none',
+    share: parentViewTransition.update, // For exit or enter of reveals.
+    name: parentViewTransition.autoName,
+    autoName: parentViewTransition.autoName,
+    // TOOD: If we have more than just this Suspense boundary as a child of the ViewTransition
+    // then the parent needs to isolate the names so that they don't conflict.
+    nameIdx: 0,
+  };
+  return viewTransition;
+}
+
+export function getSuspenseFallbackFormatContext(
+  resumableState: ResumableState,
+  parentContext: FormatContext,
+): FormatContext {
+  if (parentContext.tagScope & UPDATE_SCOPE) {
+    // If we're rendering a Suspense in fallback mode and that is inside a ViewTransition,
+    // which hasn't disabled updates, then revealing it might animate the parent so we need
+    // the ViewTransition instructions.
+    resumableState.instructions |= NeedUpgradeToViewTransitions;
+  }
+  return createFormatContext(
+    parentContext.insertionMode,
+    parentContext.selectedValue,
+    parentContext.tagScope | FALLBACK_SCOPE | EXIT_SCOPE,
+    getSuspenseViewTransition(parentContext.viewTransition),
+  );
+}
+
+export function getSuspenseContentFormatContext(
+  resumableState: ResumableState,
+  parentContext: FormatContext,
+): FormatContext {
+  const viewTransition = getSuspenseViewTransition(
+    parentContext.viewTransition,
+  );
+  let subtreeScope = parentContext.tagScope | ENTER_SCOPE;
+  if (viewTransition !== null && viewTransition.share !== 'none') {
+    // If we have a ViewTransition wrapping Suspense then the appearing animation
+    // will be applied just like an "enter" below. Mark it as animating.
+    subtreeScope |= APPEARING_SCOPE;
+  }
+  return createFormatContext(
+    parentContext.insertionMode,
+    parentContext.selectedValue,
+    subtreeScope,
+    viewTransition,
+  );
+}
+
+export function getViewTransitionFormatContext(
+  resumableState: ResumableState,
+  parentContext: FormatContext,
+  update: ?string,
+  enter: ?string,
+  exit: ?string,
+  share: ?string,
+  name: ?string,
+  autoName: string, // name or an autogenerated unique name
+): FormatContext {
+  // We're entering a <ViewTransition>. Normalize props.
+  if (update == null) {
+    update = 'auto';
+  }
+  if (enter == null) {
+    enter = 'auto';
+  }
+  if (exit == null) {
+    exit = 'auto';
+  }
+  if (name == null) {
+    const parentViewTransition = parentContext.viewTransition;
+    if (parentViewTransition !== null) {
+      // If we have multiple nested ViewTransition and the parent has a "share"
+      // but the child doesn't, then the parent ViewTransition can still activate
+      // a share scenario so we reuse the name and share from the parent.
+      name = parentViewTransition.name;
+      share = parentViewTransition.share;
+    } else {
+      name = 'auto';
+      share = 'none'; // share is only relevant if there's an explicit name
+    }
+  } else {
+    if (share == null) {
+      share = 'auto';
+    }
+    if (parentContext.tagScope & FALLBACK_SCOPE) {
+      // If we have an explicit name and share is not disabled, and we're inside
+      // a fallback, then that fallback might pair with content and so we might need
+      // the ViewTransition instructions to animate between them.
+      resumableState.instructions |= NeedUpgradeToViewTransitions;
+    }
+  }
+  if (!(parentContext.tagScope & EXIT_SCOPE)) {
+    exit = 'none'; // exit is only relevant for the first ViewTransition inside fallback
+  } else {
+    resumableState.instructions |= NeedUpgradeToViewTransitions;
+  }
+  if (!(parentContext.tagScope & ENTER_SCOPE)) {
+    enter = 'none'; // enter is only relevant for the first ViewTransition inside content
+  } else {
+    resumableState.instructions |= NeedUpgradeToViewTransitions;
+  }
+  const viewTransition: ViewTransitionContext = {
+    update,
+    enter,
+    exit,
+    share,
+    name,
+    autoName,
+    nameIdx: 0,
+  };
+  let subtreeScope = parentContext.tagScope & SUBTREE_SCOPE;
+  if (update !== 'none') {
+    subtreeScope |= UPDATE_SCOPE;
+  } else {
+    subtreeScope &= ~UPDATE_SCOPE;
+  }
+  if (enter !== 'none') {
+    subtreeScope |= APPEARING_SCOPE;
+  }
+  return createFormatContext(
+    parentContext.insertionMode,
+    parentContext.selectedValue,
+    subtreeScope,
+    viewTransition,
+  );
+}
+
+export function isPreambleContext(formatContext: FormatContext): boolean {
+  return formatContext.insertionMode === HTML_HEAD_MODE;
+}
+
+export function makeId(
+  resumableState: ResumableState,
+  treeId: string,
+  localId: number,
+): string {
+  const idPrefix = resumableState.idPrefix;
+
+  let id = '_' + idPrefix + 'R_' + treeId;
+
+  // Unless this is the first id at this level, append a number at the end
+  // that represents the position of this useId hook among all the useId
+  // hooks for this fiber.
+  if (localId > 0) {
+    id += 'H' + localId.toString(32);
+  }
+
+  return id + '_';
+}
+
+function encodeHTMLTextNode(text: string): string {
+  return escapeTextForBrowser(text);
+}
+
+const textSeparator = stringToPrecomputedChunk('<!-- -->');
+
+export function pushTextInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  text: string,
+  renderState: RenderState,
+  textEmbedded: boolean,
+): boolean {
+  if (text === '') {
+    // Empty text doesn't have a DOM node representation and the hydration is aware of this.
+    return textEmbedded;
+  }
+  if (textEmbedded) {
+    target.push(textSeparator);
+  }
+  target.push(stringToChunk(encodeHTMLTextNode(text)));
+  return true;
+}
+
+// Called when Fizz is done with a Segment. Currently the only purpose is to conditionally
+// emit a text separator when we don't know for sure it is safe to omit
+export function pushSegmentFinale(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): void {
+  if (lastPushedText && textEmbedded) {
+    target.push(textSeparator);
+  }
+}
+
+function pushViewTransitionAttributes(
+  target: Array<Chunk | PrecomputedChunk>,
+  formatContext: FormatContext,
+): void {
+  if (!enableViewTransition) {
+    return;
+  }
+  const viewTransition = formatContext.viewTransition;
+  if (viewTransition === null) {
+    return;
+  }
+  if (viewTransition.name !== 'auto') {
+    pushStringAttribute(
+      target,
+      'vt-name',
+      viewTransition.nameIdx === 0
+        ? viewTransition.name
+        : viewTransition.name + '_' + viewTransition.nameIdx,
+    );
+    // Increment the index in case we have multiple children to the same ViewTransition.
+    // Because this is a side-effect in render, we should ideally call pushViewTransitionAttributes
+    // after we've suspended (like forms do), so that we don't increment each attempt.
+    // TODO: Make this deterministic.
+    viewTransition.nameIdx++;
+  }
+  pushStringAttribute(target, 'vt-update', viewTransition.update);
+  if (viewTransition.enter !== 'none') {
+    pushStringAttribute(target, 'vt-enter', viewTransition.enter);
+  }
+  if (viewTransition.exit !== 'none') {
+    pushStringAttribute(target, 'vt-exit', viewTransition.exit);
+  }
+  if (viewTransition.share !== 'none') {
+    pushStringAttribute(target, 'vt-share', viewTransition.share);
+  }
+}
+
+const styleNameCache: Map<string, PrecomputedChunk> = new Map();
+function processStyleName(styleName: string): PrecomputedChunk {
+  const chunk = styleNameCache.get(styleName);
+  if (chunk !== undefined) {
+    return chunk;
+  }
+  const result = stringToPrecomputedChunk(
+    escapeTextForBrowser(hyphenateStyleName(styleName)),
+  );
+  styleNameCache.set(styleName, result);
+  return result;
+}
+
+const styleAttributeStart = stringToPrecomputedChunk(' style="');
+const styleAssign = stringToPrecomputedChunk(':');
+const styleSeparator = stringToPrecomputedChunk(';');
+
+function pushStyleAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  style: Object,
+): void {
+  if (typeof style !== 'object') {
+    throw new Error(
+      'The `style` prop expects a mapping from style properties to values, ' +
+        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+        'using JSX.',
+    );
+  }
+
+  let isFirst = true;
+  for (const styleName in style) {
+    if (!hasOwnProperty.call(style, styleName)) {
+      continue;
+    }
+    // If you provide unsafe user data here they can inject arbitrary CSS
+    // which may be problematic (I couldn't repro this):
+    // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
+    // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
+    // This is not an XSS hole but instead a potential CSS injection issue
+    // which has lead to a greater discussion about how we're going to
+    // trust URLs moving forward. See #2115901
+    const styleValue = style[styleName];
+    if (
+      styleValue == null ||
+      typeof styleValue === 'boolean' ||
+      styleValue === ''
+    ) {
+      // TODO: We used to set empty string as a style with an empty value. Does that ever make sense?
+      continue;
+    }
+
+    let nameChunk;
+    let valueChunk;
+    const isCustomProperty = styleName.indexOf('--') === 0;
+    if (isCustomProperty) {
+      nameChunk = stringToChunk(escapeTextForBrowser(styleName));
+      if (__DEV__) {
+        checkCSSPropertyStringCoercion(styleValue, styleName);
+      }
+      valueChunk = stringToChunk(
+        escapeTextForBrowser(('' + styleValue).trim()),
+      );
+    } else {
+      if (__DEV__) {
+        warnValidStyle(styleName, styleValue);
+      }
+
+      nameChunk = processStyleName(styleName);
+      if (typeof styleValue === 'number') {
+        if (styleValue !== 0 && !isUnitlessNumber(styleName)) {
+          valueChunk = stringToChunk(styleValue + 'px'); // Presumes implicit 'px' suffix for unitless numbers
+        } else {
+          valueChunk = stringToChunk('' + styleValue);
+        }
+      } else {
+        if (__DEV__) {
+          checkCSSPropertyStringCoercion(styleValue, styleName);
+        }
+        valueChunk = stringToChunk(
+          escapeTextForBrowser(('' + styleValue).trim()),
+        );
+      }
+    }
+    if (isFirst) {
+      isFirst = false;
+      // If it's first, we don't need any separators prefixed.
+      target.push(styleAttributeStart, nameChunk, styleAssign, valueChunk);
+    } else {
+      target.push(styleSeparator, nameChunk, styleAssign, valueChunk);
+    }
+  }
+  if (!isFirst) {
+    target.push(attributeEnd);
+  }
+}
+
+const attributeSeparator = stringToPrecomputedChunk(' ');
+const attributeAssign = stringToPrecomputedChunk('="');
+const attributeEnd = stringToPrecomputedChunk('"');
+const attributeEmptyString = stringToPrecomputedChunk('=""');
+
+function pushBooleanAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+    target.push(attributeSeparator, stringToChunk(name), attributeEmptyString);
+  }
+}
+
+function pushStringAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  if (
+    typeof value !== 'function' &&
+    typeof value !== 'symbol' &&
+    typeof value !== 'boolean'
+  ) {
+    target.push(
+      attributeSeparator,
+      stringToChunk(name),
+      attributeAssign,
+      stringToChunk(escapeTextForBrowser(value)),
+      attributeEnd,
+    );
+  }
+}
+
+function makeFormFieldPrefix(resumableState: ResumableState): string {
+  // TODO: Make this deterministic.
+  const id = resumableState.nextFormID++;
+  return resumableState.idPrefix + id;
+}
+
+// Since this will likely be repeated a lot in the HTML, we use a more concise message
+// than on the client and hopefully it's googleable.
+const actionJavaScriptURL = stringToPrecomputedChunk(
+  escapeTextForBrowser(
+    // eslint-disable-next-line no-script-url
+    "javascript:throw new Error('React form unexpectedly submitted.')",
+  ),
+);
+
+const startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
+
+function pushAdditionalFormField(
+  this: Array<Chunk | PrecomputedChunk>,
+  value: string | File,
+  key: string,
+): void {
+  const target: Array<Chunk | PrecomputedChunk> = this;
+  target.push(startHiddenInputChunk);
+  validateAdditionalFormField(value, key);
+  pushStringAttribute(target, 'name', key);
+  pushStringAttribute(target, 'value', value);
+  target.push(endOfStartTagSelfClosing);
+}
+
+function pushAdditionalFormFields(
+  target: Array<Chunk | PrecomputedChunk>,
+  formData: void | null | FormData,
+) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(pushAdditionalFormField, target);
+  }
+}
+
+function validateAdditionalFormField(value: string | File, key: string): void {
+  if (typeof value !== 'string') {
+    throw new Error(
+      'File/Blob fields are not yet supported in progressive forms. ' +
+        'Will fallback to client hydration.',
+    );
+  }
+}
+
+function validateAdditionalFormFields(formData: void | null | FormData) {
+  if (formData != null) {
+    // $FlowFixMe[prop-missing]: FormData has forEach.
+    formData.forEach(validateAdditionalFormField);
+  }
+  return formData;
+}
+
+function getCustomFormFields(
+  resumableState: ResumableState,
+  formAction: any,
+): null | ReactCustomFormAction {
+  const customAction = formAction.$$FORM_ACTION;
+  if (typeof customAction === 'function') {
+    const prefix = makeFormFieldPrefix(resumableState);
+    try {
+      const customFields = formAction.$$FORM_ACTION(prefix);
+      if (customFields) {
+        validateAdditionalFormFields(customFields.data);
+      }
+      return customFields;
+    } catch (x) {
+      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+        // Rethrow suspense.
+        throw x;
+      }
+      // If we fail to encode the form action for progressive enhancement for some reason,
+      // fallback to trying replaying on the client instead of failing the page. It might
+      // work there.
+      if (__DEV__) {
+        // TODO: Should this be some kind of recoverable error?
+        console.error(
+          'Failed to serialize an action for progressive enhancement:\n%s',
+          x,
+        );
+      }
+    }
+  }
+  return null;
+}
+
+function pushFormActionAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  formAction: any,
+  formEncType: any,
+  formMethod: any,
+  formTarget: any,
+  name: any,
+): void | null | FormData {
+  let formData = null;
+  if (typeof formAction === 'function') {
+    // Function form actions cannot control the form properties
+    if (__DEV__) {
+      if (name !== null && !didWarnFormActionName) {
+        didWarnFormActionName = true;
+        console.error(
+          'Cannot specify a "name" prop for a button that specifies a function as a formAction. ' +
+            'React needs it to encode which action should be invoked. It will get overridden.',
+        );
+      }
+      if (
+        (formEncType !== null || formMethod !== null) &&
+        !didWarnFormActionMethod
+      ) {
+        didWarnFormActionMethod = true;
+        console.error(
+          'Cannot specify a formEncType or formMethod for a button that specifies a ' +
+            'function as a formAction. React provides those automatically. They will get overridden.',
+        );
+      }
+      if (formTarget !== null && !didWarnFormActionTarget) {
+        didWarnFormActionTarget = true;
+        console.error(
+          'Cannot specify a formTarget for a button that specifies a function as a formAction. ' +
+            'The function will always be executed in the same window.',
+        );
+      }
+    }
+    const customFields = getCustomFormFields(resumableState, formAction);
+    if (customFields !== null) {
+      // This action has a custom progressive enhancement form that can submit the form
+      // back to the server if it's invoked before hydration. Such as a Server Action.
+      name = customFields.name;
+      formAction = customFields.action || '';
+      formEncType = customFields.encType;
+      formMethod = customFields.method;
+      formTarget = customFields.target;
+      formData = customFields.data;
+    } else {
+      // Set a javascript URL that doesn't do anything. We don't expect this to be invoked
+      // because we'll preventDefault in the Fizz runtime, but it can happen if a form is
+      // manually submitted or if someone calls stopPropagation before React gets the event.
+      // If CSP is used to block javascript: URLs that's fine too. It just won't show this
+      // error message but the URL will be logged.
+      target.push(
+        attributeSeparator,
+        stringToChunk('formAction'),
+        attributeAssign,
+        actionJavaScriptURL,
+        attributeEnd,
+      );
+      name = null;
+      formAction = null;
+      formEncType = null;
+      formMethod = null;
+      formTarget = null;
+      injectFormReplayingRuntime(resumableState, renderState);
+    }
+  }
+  if (name != null) {
+    pushAttribute(target, 'name', name);
+  }
+  if (formAction != null) {
+    pushAttribute(target, 'formAction', formAction);
+  }
+  if (formEncType != null) {
+    pushAttribute(target, 'formEncType', formEncType);
+  }
+  if (formMethod != null) {
+    pushAttribute(target, 'formMethod', formMethod);
+  }
+  if (formTarget != null) {
+    pushAttribute(target, 'formTarget', formTarget);
+  }
+  return formData;
+}
+
+let blobCache: null | WeakMap<Blob, Thenable<string>> = null;
+
+function pushSrcObjectAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  blob: Blob,
+): void {
+  // Throwing a Promise style suspense read of the Blob content.
+  if (blobCache === null) {
+    blobCache = new WeakMap();
+  }
+  const suspenseCache: WeakMap<Blob, Thenable<string>> = blobCache;
+  let thenable = suspenseCache.get(blob);
+  if (thenable === undefined) {
+    thenable = ((readAsDataURL(blob): any): Thenable<string>);
+    thenable.then(
+      result => {
+        (thenable: any).status = 'fulfilled';
+        (thenable: any).value = result;
+      },
+      error => {
+        (thenable: any).status = 'rejected';
+        (thenable: any).reason = error;
+      },
+    );
+    suspenseCache.set(blob, thenable);
+  }
+  if (thenable.status === 'rejected') {
+    throw thenable.reason;
+  } else if (thenable.status !== 'fulfilled') {
+    throw thenable;
+  }
+  const url = thenable.value;
+  target.push(
+    attributeSeparator,
+    stringToChunk('src'),
+    attributeAssign,
+    stringToChunk(escapeTextForBrowser(url)),
+    attributeEnd,
+  );
+}
+
+function pushAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  switch (name) {
+    // These are very common props and therefore are in the beginning of the switch.
+    // TODO: aria-label is a very common prop but allows booleans so is not like the others
+    // but should ideally go in this list too.
+    case 'className': {
+      pushStringAttribute(target, 'class', value);
+      break;
+    }
+    case 'tabIndex': {
+      pushStringAttribute(target, 'tabindex', value);
+      break;
+    }
+    case 'dir':
+    case 'role':
+    case 'viewBox':
+    case 'width':
+    case 'height': {
+      pushStringAttribute(target, name, value);
+      break;
+    }
+    case 'style': {
+      pushStyleAttribute(target, value);
+      return;
+    }
+    case 'src': {
+      if (enableSrcObject && typeof value === 'object' && value !== null) {
+        if (typeof Blob === 'function' && value instanceof Blob) {
+          pushSrcObjectAttribute(target, value);
+          return;
+        }
+      }
+      // Fallthrough to general urls
+    }
+    case 'href': {
+      if (value === '') {
+        if (__DEV__) {
+          if (name === 'src') {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'This may cause the browser to download the whole page again over the network. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              name,
+              name,
+            );
+          } else {
+            console.error(
+              'An empty string ("") was passed to the %s attribute. ' +
+                'To fix this, either do not render the element at all ' +
+                'or pass null to %s instead of an empty string.',
+              name,
+              name,
+            );
+          }
+        }
+        return;
+      }
+    }
+    // Fall through to the last case which shouldn't remove empty strings.
+    case 'action':
+    case 'formAction': {
+      // TODO: Consider only special casing these for each tag.
+      if (
+        value == null ||
+        typeof value === 'function' ||
+        typeof value === 'symbol' ||
+        typeof value === 'boolean'
+      ) {
+        return;
+      }
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, name);
+      }
+      const sanitizedValue = sanitizeURL('' + value);
+      target.push(
+        attributeSeparator,
+        stringToChunk(name),
+        attributeAssign,
+        stringToChunk(escapeTextForBrowser(sanitizedValue)),
+        attributeEnd,
+      );
+      return;
+    }
+    case 'defaultValue':
+    case 'defaultChecked': // These shouldn't be set as attributes on generic HTML elements.
+    case 'innerHTML': // Must use dangerouslySetInnerHTML instead.
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'ref':
+      // Ignored. These are built-in to React on the client.
+      return;
+    case 'autoFocus':
+    case 'multiple':
+    case 'muted': {
+      pushBooleanAttribute(target, name.toLowerCase(), value);
+      return;
+    }
+    case 'xlinkHref': {
+      if (
+        typeof value === 'function' ||
+        typeof value === 'symbol' ||
+        typeof value === 'boolean'
+      ) {
+        return;
+      }
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, name);
+      }
+      const sanitizedValue = sanitizeURL('' + value);
+      target.push(
+        attributeSeparator,
+        stringToChunk('xlink:href'),
+        attributeAssign,
+        stringToChunk(escapeTextForBrowser(sanitizedValue)),
+        attributeEnd,
+      );
+      return;
+    }
+    case 'contentEditable':
+    case 'spellCheck':
+    case 'draggable':
+    case 'value':
+    case 'autoReverse':
+    case 'externalResourcesRequired':
+    case 'focusable':
+    case 'preserveAlpha': {
+      // Booleanish String
+      // These are "enumerated" attributes that accept "true" and "false".
+      // In React, we let users pass `true` and `false` even though technically
+      // these aren't boolean attributes (they are coerced to strings).
+      if (typeof value !== 'function' && typeof value !== 'symbol') {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
+      return;
+    }
+    case 'inert': {
+      if (__DEV__) {
+        if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[name]) {
+          didWarnForNewBooleanPropsWithEmptyValue[name] = true;
+          console.error(
+            'Received an empty string for a boolean attribute `%s`. ' +
+              'This will treat the attribute as if it were false. ' +
+              'Either pass `false` to silence this warning, or ' +
+              'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+            name,
+          );
+        }
+      }
+    }
+    // Fallthrough for boolean props that don't have a warning for empty strings.
+    case 'allowFullScreen':
+    case 'async':
+    case 'autoPlay':
+    case 'controls':
+    case 'default':
+    case 'defer':
+    case 'disabled':
+    case 'disablePictureInPicture':
+    case 'disableRemotePlayback':
+    case 'formNoValidate':
+    case 'hidden':
+    case 'loop':
+    case 'noModule':
+    case 'noValidate':
+    case 'open':
+    case 'playsInline':
+    case 'readOnly':
+    case 'required':
+    case 'reversed':
+    case 'scoped':
+    case 'seamless':
+    case 'itemScope': {
+      // Boolean
+      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeEmptyString,
+        );
+      }
+      return;
+    }
+    case 'capture':
+    case 'download': {
+      // Overloaded Boolean
+      if (value === true) {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeEmptyString,
+        );
+      } else if (value === false) {
+        // Ignored
+      } else if (typeof value !== 'function' && typeof value !== 'symbol') {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
+      return;
+    }
+    case 'cols':
+    case 'rows':
+    case 'size':
+    case 'span': {
+      // These are HTML attributes that must be positive numbers.
+      if (
+        typeof value !== 'function' &&
+        typeof value !== 'symbol' &&
+        !isNaN(value) &&
+        (value: any) >= 1
+      ) {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
+      return;
+    }
+    case 'rowSpan':
+    case 'start': {
+      // These are HTML attributes that must be numbers.
+      if (
+        typeof value !== 'function' &&
+        typeof value !== 'symbol' &&
+        !isNaN(value)
+      ) {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
+      return;
+    }
+    case 'xlinkActuate':
+      pushStringAttribute(target, 'xlink:actuate', value);
+      return;
+    case 'xlinkArcrole':
+      pushStringAttribute(target, 'xlink:arcrole', value);
+      return;
+    case 'xlinkRole':
+      pushStringAttribute(target, 'xlink:role', value);
+      return;
+    case 'xlinkShow':
+      pushStringAttribute(target, 'xlink:show', value);
+      return;
+    case 'xlinkTitle':
+      pushStringAttribute(target, 'xlink:title', value);
+      return;
+    case 'xlinkType':
+      pushStringAttribute(target, 'xlink:type', value);
+      return;
+    case 'xmlBase':
+      pushStringAttribute(target, 'xml:base', value);
+      return;
+    case 'xmlLang':
+      pushStringAttribute(target, 'xml:lang', value);
+      return;
+    case 'xmlSpace':
+      pushStringAttribute(target, 'xml:space', value);
+      return;
+    default:
+      if (
+        // shouldIgnoreAttribute
+        // We have already filtered out null/undefined and reserved words.
+        name.length > 2 &&
+        (name[0] === 'o' || name[0] === 'O') &&
+        (name[1] === 'n' || name[1] === 'N')
+      ) {
+        return;
+      }
+
+      const attributeName = getAttributeAlias(name);
+      if (isAttributeNameSafe(attributeName)) {
+        // shouldRemoveAttribute
+        switch (typeof value) {
+          case 'function':
+          case 'symbol':
+            return;
+          case 'boolean': {
+            const prefix = attributeName.toLowerCase().slice(0, 5);
+            if (prefix !== 'data-' && prefix !== 'aria-') {
+              return;
+            }
+          }
+        }
+        target.push(
+          attributeSeparator,
+          stringToChunk(attributeName),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
+  }
+}
+
+const endOfStartTag = stringToPrecomputedChunk('>');
+const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
+
+function pushInnerHTML(
+  target: Array<Chunk | PrecomputedChunk>,
+  innerHTML: any,
+  children: any,
+) {
+  if (innerHTML != null) {
+    if (children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://react.dev/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
+
+    const html = innerHTML.__html;
+    if (html !== null && html !== undefined) {
+      if (__DEV__) {
+        checkHtmlStringCoercion(html);
+      }
+      target.push(stringToChunk('' + html));
+    }
+  }
+}
+
+// TODO: Move these to RenderState so that we warn for every request.
+// It would help debugging in stateful servers (e.g. service worker).
+let didWarnDefaultInputValue = false;
+let didWarnDefaultChecked = false;
+let didWarnDefaultSelectValue = false;
+let didWarnDefaultTextareaValue = false;
+let didWarnInvalidOptionChildren = false;
+let didWarnInvalidOptionInnerHTML = false;
+let didWarnSelectedSetOnOption = false;
+let didWarnFormActionType = false;
+let didWarnFormActionName = false;
+let didWarnFormActionTarget = false;
+let didWarnFormActionMethod = false;
+
+function checkSelectProp(props: any, propName: string) {
+  if (__DEV__) {
+    const value = props[propName];
+    if (value != null) {
+      const array = isArray(value);
+      if (props.multiple && !array) {
+        console.error(
+          'The `%s` prop supplied to <select> must be an array if ' +
+            '`multiple` is true.',
+          propName,
+        );
+      } else if (!props.multiple && array) {
+        console.error(
+          'The `%s` prop supplied to <select> must be a scalar ' +
+            'value if `multiple` is false.',
+          propName,
+        );
+      }
+    }
+  }
+}
+
+function pushStartAnchor(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag('a'));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        case 'href':
+          if (propValue === '') {
+            // Empty `href` is special on anchors so we're short-circuiting here.
+            // On other tags it should trigger a warning
+            pushStringAttribute(target, 'href', '');
+          } else {
+            pushAttribute(target, propKey, propValue);
+          }
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  if (typeof children === 'string') {
+    // Special case children as a string to avoid the unnecessary comment.
+    // TODO: Remove this special case after the general optimization is in place.
+    target.push(stringToChunk(encodeHTMLTextNode(children)));
+    return null;
+  }
+  return children;
+}
+
+function pushStartObject(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag('object'));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        case 'data': {
+          if (__DEV__) {
+            checkAttributeStringCoercion(propValue, 'data');
+          }
+          const sanitizedValue = sanitizeURL('' + propValue);
+          if (sanitizedValue === '') {
+            if (__DEV__) {
+              console.error(
+                'An empty string ("") was passed to the %s attribute. ' +
+                  'To fix this, either do not render the element at all ' +
+                  'or pass null to %s instead of an empty string.',
+                propKey,
+                propKey,
+              );
+            }
+            break;
+          }
+          target.push(
+            attributeSeparator,
+            stringToChunk('data'),
+            attributeAssign,
+            stringToChunk(escapeTextForBrowser(sanitizedValue)),
+            attributeEnd,
+          );
+          break;
+        }
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  if (typeof children === 'string') {
+    // Special case children as a string to avoid the unnecessary comment.
+    // TODO: Remove this special case after the general optimization is in place.
+    target.push(stringToChunk(encodeHTMLTextNode(children)));
+    return null;
+  }
+  return children;
+}
+
+function pushStartSelect(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  formatContext: FormatContext,
+): ReactNodeList {
+  if (__DEV__) {
+    checkControlledValueProps('select', props);
+
+    checkSelectProp(props, 'value');
+    checkSelectProp(props, 'defaultValue');
+
+    if (
+      props.value !== undefined &&
+      props.defaultValue !== undefined &&
+      !didWarnDefaultSelectValue
+    ) {
+      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 ' +
+          'element and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+      );
+      didWarnDefaultSelectValue = true;
+    }
+  }
+
+  target.push(startChunkForTag('select'));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          // TODO: This doesn't really make sense for select since it can't use the controlled
+          // value in the innerHTML.
+          innerHTML = propValue;
+          break;
+        case 'defaultValue':
+        case 'value':
+          // These are set on the Context instead and applied to the nested options.
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  return children;
+}
+
+function flattenOptionChildren(children: mixed): string {
+  let content = '';
+  // Flatten children and warn if they aren't strings or numbers;
+  // invalid types are ignored.
+  Children.forEach((children: any), function (child) {
+    if (child == null) {
+      return;
+    }
+    content += (child: any);
+    if (__DEV__) {
+      if (
+        !didWarnInvalidOptionChildren &&
+        typeof child !== 'string' &&
+        typeof child !== 'number' &&
+        typeof child !== 'bigint'
+      ) {
+        didWarnInvalidOptionChildren = true;
+        console.error(
+          'Cannot infer the option value of complex children. ' +
+            'Pass a `value` prop or use a plain string as children to <option>.',
+        );
+      }
+    }
+  });
+  return content;
+}
+
+const selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+function pushStartOption(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  formatContext: FormatContext,
+): ReactNodeList {
+  const selectedValue = formatContext.selectedValue;
+
+  target.push(startChunkForTag('option'));
+
+  let children = null;
+  let value = null;
+  let selected = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'selected':
+          // ignore
+          selected = propValue;
+          if (__DEV__) {
+            // TODO: Remove support for `selected` in <option>.
+            if (!didWarnSelectedSetOnOption) {
+              console.error(
+                'Use the `defaultValue` or `value` props on <select> instead of ' +
+                  'setting `selected` on <option>.',
+              );
+              didWarnSelectedSetOnOption = true;
+            }
+          }
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        case 'value':
+          value = propValue;
+        // We intentionally fallthrough to also set the attribute on the node.
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  if (selectedValue != null) {
+    let stringValue;
+    if (value !== null) {
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, 'value');
+      }
+      stringValue = '' + value;
+    } else {
+      if (__DEV__) {
+        if (innerHTML !== null) {
+          if (!didWarnInvalidOptionInnerHTML) {
+            didWarnInvalidOptionInnerHTML = true;
+            console.error(
+              'Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' +
+                'which value should be selected.',
+            );
+          }
+        }
+      }
+      stringValue = flattenOptionChildren(children);
+    }
+    if (isArray(selectedValue)) {
+      // multiple
+      for (let i = 0; i < selectedValue.length; i++) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(selectedValue[i], 'value');
+        }
+        const v = '' + selectedValue[i];
+        if (v === stringValue) {
+          target.push(selectedMarkerAttribute);
+          break;
+        }
+      }
+    } else {
+      if (__DEV__) {
+        checkAttributeStringCoercion(selectedValue, 'select.value');
+      }
+      if ('' + selectedValue === stringValue) {
+        target.push(selectedMarkerAttribute);
+      }
+    }
+  } else if (selected) {
+    target.push(selectedMarkerAttribute);
+  }
+
+  // Options never participate as ViewTransitions.
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  return children;
+}
+
+const formReplayingRuntimeScript =
+  stringToPrecomputedChunk(formReplayingRuntime);
+
+function injectFormReplayingRuntime(
+  resumableState: ResumableState,
+  renderState: RenderState,
+): void {
+  // If we haven't sent it yet, inject the runtime that tracks submitted JS actions
+  // for later replaying by Fiber. If we use an external runtime, we don't need
+  // to emit anything. It's always used.
+  if (
+    (resumableState.instructions & SentFormReplayingRuntime) === NothingSent &&
+    (!enableFizzExternalRuntime || !renderState.externalRuntimeScript)
+  ) {
+    resumableState.instructions |= SentFormReplayingRuntime;
+    const preamble = renderState.preamble;
+    const bootstrapChunks = renderState.bootstrapChunks;
+    if (
+      (preamble.htmlChunks || preamble.headChunks) &&
+      bootstrapChunks.length === 0
+    ) {
+      // If we rendered the whole document, then we emitted a rel="expect" that needs a
+      // matching target. If we haven't emitted that yet, we need to include it in this
+      // script tag.
+      bootstrapChunks.push(renderState.startInlineScript);
+      pushCompletedShellIdAttribute(bootstrapChunks, resumableState);
+      bootstrapChunks.push(
+        endOfStartTag,
+        formReplayingRuntimeScript,
+        endInlineScript,
+      );
+    } else {
+      // Otherwise we added to the beginning of the scripts. This will mean that it
+      // appears before the shell ID unfortunately.
+      bootstrapChunks.unshift(
+        renderState.startInlineScript,
+        endOfStartTag,
+        formReplayingRuntimeScript,
+        endInlineScript,
+      );
+    }
+  }
+}
+
+const formStateMarkerIsMatching = stringToPrecomputedChunk('<!--F!-->');
+const formStateMarkerIsNotMatching = stringToPrecomputedChunk('<!--F-->');
+
+export function pushFormStateMarkerIsMatching(
+  target: Array<Chunk | PrecomputedChunk>,
+) {
+  target.push(formStateMarkerIsMatching);
+}
+
+export function pushFormStateMarkerIsNotMatching(
+  target: Array<Chunk | PrecomputedChunk>,
+) {
+  target.push(formStateMarkerIsNotMatching);
+}
+
+function pushStartForm(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag('form'));
+
+  let children = null;
+  let innerHTML = null;
+  let formAction = null;
+  let formEncType = null;
+  let formMethod = null;
+  let formTarget = null;
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        case 'action':
+          formAction = propValue;
+          break;
+        case 'encType':
+          formEncType = propValue;
+          break;
+        case 'method':
+          formMethod = propValue;
+          break;
+        case 'target':
+          formTarget = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  let formData = null;
+  let formActionName = null;
+  if (typeof formAction === 'function') {
+    // Function form actions cannot control the form properties
+    if (__DEV__) {
+      if (
+        (formEncType !== null || formMethod !== null) &&
+        !didWarnFormActionMethod
+      ) {
+        didWarnFormActionMethod = true;
+        console.error(
+          'Cannot specify a encType or method for a form that specifies a ' +
+            'function as the action. React provides those automatically. ' +
+            'They will get overridden.',
+        );
+      }
+      if (formTarget !== null && !didWarnFormActionTarget) {
+        didWarnFormActionTarget = true;
+        console.error(
+          'Cannot specify a target for a form that specifies a function as the action. ' +
+            'The function will always be executed in the same window.',
+        );
+      }
+    }
+    const customFields = getCustomFormFields(resumableState, formAction);
+    if (customFields !== null) {
+      // This action has a custom progressive enhancement form that can submit the form
+      // back to the server if it's invoked before hydration. Such as a Server Action.
+      formAction = customFields.action || '';
+      formEncType = customFields.encType;
+      formMethod = customFields.method;
+      formTarget = customFields.target;
+      formData = customFields.data;
+      formActionName = customFields.name;
+    } else {
+      // Set a javascript URL that doesn't do anything. We don't expect this to be invoked
+      // because we'll preventDefault in the Fizz runtime, but it can happen if a form is
+      // manually submitted or if someone calls stopPropagation before React gets the event.
+      // If CSP is used to block javascript: URLs that's fine too. It just won't show this
+      // error message but the URL will be logged.
+      target.push(
+        attributeSeparator,
+        stringToChunk('action'),
+        attributeAssign,
+        actionJavaScriptURL,
+        attributeEnd,
+      );
+      formAction = null;
+      formEncType = null;
+      formMethod = null;
+      formTarget = null;
+      injectFormReplayingRuntime(resumableState, renderState);
+    }
+  }
+  if (formAction != null) {
+    pushAttribute(target, 'action', formAction);
+  }
+  if (formEncType != null) {
+    pushAttribute(target, 'encType', formEncType);
+  }
+  if (formMethod != null) {
+    pushAttribute(target, 'method', formMethod);
+  }
+  if (formTarget != null) {
+    pushAttribute(target, 'target', formTarget);
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+
+  if (formActionName !== null) {
+    target.push(startHiddenInputChunk);
+    pushStringAttribute(target, 'name', formActionName);
+    target.push(endOfStartTagSelfClosing);
+    pushAdditionalFormFields(target, formData);
+  }
+
+  pushInnerHTML(target, innerHTML, children);
+  if (typeof children === 'string') {
+    // Special case children as a string to avoid the unnecessary comment.
+    // TODO: Remove this special case after the general optimization is in place.
+    target.push(stringToChunk(encodeHTMLTextNode(children)));
+    return null;
+  }
+  return children;
+}
+
+function pushInput(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  if (__DEV__) {
+    checkControlledValueProps('input', props);
+  }
+
+  target.push(startChunkForTag('input'));
+
+  let name = null;
+  let formAction = null;
+  let formEncType = null;
+  let formMethod = null;
+  let formTarget = null;
+  let value = null;
+  let defaultValue = null;
+  let checked = null;
+  let defaultChecked = null;
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'input'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        case 'name':
+          name = propValue;
+          break;
+        case 'formAction':
+          formAction = propValue;
+          break;
+        case 'formEncType':
+          formEncType = propValue;
+          break;
+        case 'formMethod':
+          formMethod = propValue;
+          break;
+        case 'formTarget':
+          formTarget = propValue;
+          break;
+        case 'defaultChecked':
+          defaultChecked = propValue;
+          break;
+        case 'defaultValue':
+          defaultValue = propValue;
+          break;
+        case 'checked':
+          checked = propValue;
+          break;
+        case 'value':
+          value = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  if (__DEV__) {
+    if (
+      formAction !== null &&
+      props.type !== 'image' &&
+      props.type !== 'submit' &&
+      !didWarnFormActionType
+    ) {
+      didWarnFormActionType = true;
+      console.error(
+        'An input can only specify a formAction along with type="submit" or type="image".',
+      );
+    }
+  }
+
+  const formData = pushFormActionAttribute(
+    target,
+    resumableState,
+    renderState,
+    formAction,
+    formEncType,
+    formMethod,
+    formTarget,
+    name,
+  );
+
+  if (__DEV__) {
+    if (checked !== null && defaultChecked !== null && !didWarnDefaultChecked) {
+      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 ' +
+          'both). Decide between using a controlled or uncontrolled input ' +
+          'element and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+        'A component',
+        props.type,
+      );
+      didWarnDefaultChecked = true;
+    }
+    if (value !== null && defaultValue !== null && !didWarnDefaultInputValue) {
+      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 ' +
+          'both). Decide between using a controlled or uncontrolled input ' +
+          'element and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+        'A component',
+        props.type,
+      );
+      didWarnDefaultInputValue = true;
+    }
+  }
+
+  if (checked !== null) {
+    pushBooleanAttribute(target, 'checked', checked);
+  } else if (defaultChecked !== null) {
+    pushBooleanAttribute(target, 'checked', defaultChecked);
+  }
+  if (value !== null) {
+    pushAttribute(target, 'value', value);
+  } else if (defaultValue !== null) {
+    pushAttribute(target, 'value', defaultValue);
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTagSelfClosing);
+
+  // We place any additional hidden form fields after the input.
+  pushAdditionalFormFields(target, formData);
+
+  return null;
+}
+
+function pushStartButton(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag('button'));
+
+  let children = null;
+  let innerHTML = null;
+  let name = null;
+  let formAction = null;
+  let formEncType = null;
+  let formMethod = null;
+  let formTarget = null;
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        case 'name':
+          name = propValue;
+          break;
+        case 'formAction':
+          formAction = propValue;
+          break;
+        case 'formEncType':
+          formEncType = propValue;
+          break;
+        case 'formMethod':
+          formMethod = propValue;
+          break;
+        case 'formTarget':
+          formTarget = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  if (__DEV__) {
+    if (
+      formAction !== null &&
+      props.type != null &&
+      props.type !== 'submit' &&
+      !didWarnFormActionType
+    ) {
+      didWarnFormActionType = true;
+      console.error(
+        'A button can only specify a formAction along with type="submit" or no type.',
+      );
+    }
+  }
+
+  const formData = pushFormActionAttribute(
+    target,
+    resumableState,
+    renderState,
+    formAction,
+    formEncType,
+    formMethod,
+    formTarget,
+    name,
+  );
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+
+  // We place any additional hidden form fields we need to include inside the button itself.
+  pushAdditionalFormFields(target, formData);
+
+  pushInnerHTML(target, innerHTML, children);
+  if (typeof children === 'string') {
+    // Special case children as a string to avoid the unnecessary comment.
+    // TODO: Remove this special case after the general optimization is in place.
+    target.push(stringToChunk(encodeHTMLTextNode(children)));
+    return null;
+  }
+
+  return children;
+}
+
+function pushStartTextArea(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  formatContext: FormatContext,
+): ReactNodeList {
+  if (__DEV__) {
+    checkControlledValueProps('textarea', props);
+    if (
+      props.value !== undefined &&
+      props.defaultValue !== undefined &&
+      !didWarnDefaultTextareaValue
+    ) {
+      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 ' +
+          'and remove one of these props. More info: ' +
+          'https://react.dev/link/controlled-components',
+      );
+      didWarnDefaultTextareaValue = true;
+    }
+  }
+
+  target.push(startChunkForTag('textarea'));
+
+  let value = null;
+  let defaultValue = null;
+  let children = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'value':
+          value = propValue;
+          break;
+        case 'defaultValue':
+          defaultValue = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+          );
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (value === null && defaultValue !== null) {
+    value = defaultValue;
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+
+  // TODO (yungsters): Remove support for children content in <textarea>.
+  if (children != null) {
+    if (__DEV__) {
+      console.error(
+        'Use the `defaultValue` or `value` props instead of setting ' +
+          'children on <textarea>.',
+      );
+    }
+
+    if (value != null) {
+      throw new Error(
+        'If you supply `defaultValue` on a <textarea>, do not pass children.',
+      );
+    }
+
+    if (isArray(children)) {
+      if (children.length > 1) {
+        throw new Error('<textarea> can only have at most one child.');
+      }
+
+      // TODO: remove the coercion and the DEV check below because it will
+      // always be overwritten by the coercion several lines below it. #22309
+      if (__DEV__) {
+        checkHtmlStringCoercion(children[0]);
+      }
+      value = '' + children[0];
+    }
+    if (__DEV__) {
+      checkHtmlStringCoercion(children);
+    }
+    value = '' + children;
+  }
+
+  if (typeof value === 'string' && value[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
+    // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
+    // \r is normalized out by HTMLTextAreaElement#value.)
+    // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
+    // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
+    // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
+    // See: Parsing of "textarea" "listing" and "pre" elements
+    //  from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
+    target.push(leadingNewline);
+  }
+
+  // ToString and push directly instead of recurse over children.
+  // We don't really support complex children in the value anyway.
+  // This also currently avoids a trailing comment node which breaks textarea.
+  if (value !== null) {
+    if (__DEV__) {
+      checkAttributeStringCoercion(value, 'value');
+    }
+    target.push(stringToChunk(encodeHTMLTextNode('' + value)));
+  }
+
+  return null;
+}
+
+function pushMeta(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  renderState: RenderState,
+  textEmbedded: boolean,
+  formatContext: FormatContext,
+): null {
+  const noscriptTagInScope = formatContext.tagScope & NOSCRIPT_SCOPE;
+  const isFallback = formatContext.tagScope & FALLBACK_SCOPE;
+  if (
+    formatContext.insertionMode === SVG_MODE ||
+    noscriptTagInScope ||
+    props.itemProp != null
+  ) {
+    return pushSelfClosing(target, props, 'meta', formatContext);
+  } else {
+    if (textEmbedded) {
+      // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+      // to be safe and assume text will follow by inserting a textSeparator
+      target.push(textSeparator);
+    }
+
+    if (isFallback) {
+      // Hoistable Elements for fallbacks are simply omitted. we don't want to emit them early
+      // because they are likely superceded by primary content and we want to avoid needing to clean
+      // them up when the primary content is ready. They are never hydrated on the client anyway because
+      // boundaries in fallback are awaited or client render, in either case there is never hydration
+      return null;
+    } else if (typeof props.charSet === 'string') {
+      // "charset" Should really be config and not picked up from tags however since this is
+      // the only way to embed the tag today we flush it on a special queue on the Request so it
+      // can go before everything else. Like viewport this means that the tag will escape it's
+      // parent container.
+      return pushSelfClosing(
+        renderState.charsetChunks,
+        props,
+        'meta',
+        formatContext,
+      );
+    } else if (props.name === 'viewport') {
+      // "viewport" is flushed on the Request so it can go earlier that Float resources that
+      // might be affected by it. This means it can escape the boundary it is rendered within.
+      // This is a pragmatic solution to viewport being incredibly sensitive to document order
+      // without requiring all hoistables to be flushed too early.
+      return pushSelfClosing(
+        renderState.viewportChunks,
+        props,
+        'meta',
+        formatContext,
+      );
+    } else {
+      return pushSelfClosing(
+        renderState.hoistableChunks,
+        props,
+        'meta',
+        formatContext,
+      );
+    }
+  }
+}
+
+function pushLink(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  hoistableState: null | HoistableState,
+  textEmbedded: boolean,
+  formatContext: FormatContext,
+): null {
+  const noscriptTagInScope = formatContext.tagScope & NOSCRIPT_SCOPE;
+  const isFallback = formatContext.tagScope & FALLBACK_SCOPE;
+  const rel = props.rel;
+  const href = props.href;
+  const precedence = props.precedence;
+  if (
+    formatContext.insertionMode === SVG_MODE ||
+    noscriptTagInScope ||
+    props.itemProp != null ||
+    typeof rel !== 'string' ||
+    typeof href !== 'string' ||
+    href === ''
+  ) {
+    if (__DEV__) {
+      if (rel === 'stylesheet' && typeof props.precedence === 'string') {
+        if (typeof href !== 'string' || !href) {
+          console.error(
+            'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered %s instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
+            getValueDescriptorExpectingObjectForWarning(href),
+          );
+        }
+      }
+    }
+    pushLinkImpl(target, props);
+    return null;
+  }
+
+  if (props.rel === 'stylesheet') {
+    // This <link> may hoistable as a Stylesheet Resource, otherwise it will emit in place
+    const key = getResourceKey(href);
+    if (
+      typeof precedence !== 'string' ||
+      props.disabled != null ||
+      props.onLoad ||
+      props.onError
+    ) {
+      // This stylesheet is either not opted into Resource semantics or has conflicting properties which
+      // disqualify it for such. We can still create a preload resource to help it load faster on the
+      // client
+      if (__DEV__) {
+        if (typeof precedence === 'string') {
+          if (props.disabled != null) {
+            console.error(
+              'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `disabled` prop, otherwise remove the `precedence` prop.',
+            );
+          } else if (props.onLoad || props.onError) {
+            const propDescription =
+              props.onLoad && props.onError
+                ? '`onLoad` and `onError` props'
+                : props.onLoad
+                  ? '`onLoad` prop'
+                  : '`onError` prop';
+            console.error(
+              'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and %s. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the %s, otherwise remove the `precedence` prop.',
+              propDescription,
+              propDescription,
+            );
+          }
+        }
+      }
+      return pushLinkImpl(target, props);
+    } else {
+      // This stylesheet refers to a Resource and we create a new one if necessary
+      let styleQueue = renderState.styles.get(precedence);
+      const hasKey = resumableState.styleResources.hasOwnProperty(key);
+      const resourceState = hasKey
+        ? resumableState.styleResources[key]
+        : undefined;
+      if (resourceState !== EXISTS) {
+        // We are going to create this resource now so it is marked as Exists
+        resumableState.styleResources[key] = EXISTS;
+
+        // If this is the first time we've encountered this precedence we need
+        // to create a StyleQueue
+        if (!styleQueue) {
+          styleQueue = {
+            precedence: stringToChunk(escapeTextForBrowser(precedence)),
+            rules: ([]: Array<Chunk | PrecomputedChunk>),
+            hrefs: ([]: Array<Chunk | PrecomputedChunk>),
+            sheets: (new Map(): Map<string, StylesheetResource>),
+          };
+          renderState.styles.set(precedence, styleQueue);
+        }
+
+        const resource: StylesheetResource = {
+          state: PENDING,
+          props: stylesheetPropsFromRawProps(props),
+        };
+
+        if (resourceState) {
+          // When resourceState is truty it is a Preload state. We cast it for clarity
+          const preloadState: Preloaded | PreloadedWithCredentials =
+            resourceState;
+          if (preloadState.length === 2) {
+            adoptPreloadCredentials(resource.props, preloadState);
+          }
+
+          const preloadResource = renderState.preloads.stylesheets.get(key);
+          if (preloadResource && preloadResource.length > 0) {
+            // The Preload for this resource was created in this render pass and has not flushed yet so
+            // we need to clear it to avoid it flushing.
+            preloadResource.length = 0;
+          } else {
+            // Either the preload resource from this render already flushed in this render pass
+            // or the preload flushed in a prior pass (prerender). In either case we need to mark
+            // this resource as already having been preloaded.
+            resource.state = PRELOADED;
+          }
+        } else {
+          // We don't need to check whether a preloadResource exists in the renderState
+          // because if it did exist then the resourceState would also exist and we would
+          // have hit the primary if condition above.
+        }
+
+        // We add the newly created resource to our StyleQueue and if necessary
+        // track the resource with the currently rendering boundary
+        styleQueue.sheets.set(key, resource);
+        if (hoistableState) {
+          hoistableState.stylesheets.add(resource);
+        }
+      } else {
+        // We need to track whether this boundary should wait on this resource or not.
+        // Typically this resource should always exist since we either had it or just created
+        // it. However, it's possible when you resume that the style has already been emitted
+        // and then it wouldn't be recreated in the RenderState and there's no need to track
+        // it again since we should've hoisted it to the shell already.
+        if (styleQueue) {
+          const resource = styleQueue.sheets.get(key);
+          if (resource) {
+            if (hoistableState) {
+              hoistableState.stylesheets.add(resource);
+            }
+          }
+        }
+      }
+      if (textEmbedded) {
+        // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+        // to be safe and assume text will follow by inserting a textSeparator
+        target.push(textSeparator);
+      }
+      return null;
+    }
+  } else if (props.onLoad || props.onError) {
+    // When using load handlers we cannot hoist and need to emit links in place
+    return pushLinkImpl(target, props);
+  } else {
+    // We can hoist this link so we may need to emit a text separator.
+    // @TODO refactor text separators so we don't have to defensively add
+    // them when we don't end up emitting a tag as a result of pushStartInstance
+    if (textEmbedded) {
+      // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+      // to be safe and assume text will follow by inserting a textSeparator
+      target.push(textSeparator);
+    }
+
+    if (isFallback) {
+      // Hoistable Elements for fallbacks are simply omitted. we don't want to emit them early
+      // because they are likely superceded by primary content and we want to avoid needing to clean
+      // them up when the primary content is ready. They are never hydrated on the client anyway because
+      // boundaries in fallback are awaited or client render, in either case there is never hydration
+      return null;
+    } else {
+      return pushLinkImpl(renderState.hoistableChunks, props);
+    }
+  }
+}
+
+function pushLinkImpl(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+): null {
+  target.push(startChunkForTag('link'));
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  // Link never participate as a ViewTransition
+
+  target.push(endOfStartTagSelfClosing);
+  return null;
+}
+
+function pushStyle(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  hoistableState: null | HoistableState,
+  textEmbedded: boolean,
+  formatContext: FormatContext,
+): ReactNodeList {
+  const noscriptTagInScope = formatContext.tagScope & NOSCRIPT_SCOPE;
+  if (__DEV__) {
+    if (hasOwnProperty.call(props, 'children')) {
+      const children = props.children;
+
+      const child = Array.isArray(children)
+        ? children.length < 2
+          ? children[0]
+          : null
+        : children;
+
+      if (
+        typeof child === 'function' ||
+        typeof child === 'symbol' ||
+        Array.isArray(child)
+      ) {
+        const childType =
+          typeof child === 'function'
+            ? 'a Function'
+            : typeof child === 'symbol'
+              ? 'a Sybmol'
+              : 'an Array';
+        console.error(
+          'React expect children of <style> tags to be a string, number, or object with a `toString` method but found %s instead. ' +
+            'In browsers style Elements can only have `Text` Nodes as children.',
+          childType,
+        );
+      }
+    }
+  }
+  const precedence = props.precedence;
+  const href = props.href;
+  const nonce = props.nonce;
+
+  if (
+    formatContext.insertionMode === SVG_MODE ||
+    noscriptTagInScope ||
+    props.itemProp != null ||
+    typeof precedence !== 'string' ||
+    typeof href !== 'string' ||
+    href === ''
+  ) {
+    // This style tag is not able to be turned into a Style Resource
+    return pushStyleImpl(target, props);
+  }
+
+  if (__DEV__) {
+    if (href.includes(' ')) {
+      console.error(
+        'React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is "%s".',
+        href,
+      );
+    }
+  }
+
+  const key = getResourceKey(href);
+  let styleQueue = renderState.styles.get(precedence);
+  const hasKey = resumableState.styleResources.hasOwnProperty(key);
+  const resourceState = hasKey ? resumableState.styleResources[key] : undefined;
+  if (resourceState !== EXISTS) {
+    // We are going to create this resource now so it is marked as Exists
+    resumableState.styleResources[key] = EXISTS;
+
+    if (__DEV__) {
+      if (resourceState) {
+        console.error(
+          'React encountered a hoistable style tag for the same href as a preload: "%s". When using a style tag to inline styles you should not also preload it as a stylsheet.',
+          href,
+        );
+      }
+    }
+
+    if (!styleQueue) {
+      // This is the first time we've encountered this precedence we need
+      // to create a StyleQueue.
+      styleQueue = {
+        precedence: stringToChunk(escapeTextForBrowser(precedence)),
+        rules: ([]: Array<Chunk | PrecomputedChunk>),
+        hrefs: ([]: Array<Chunk | PrecomputedChunk>),
+        sheets: (new Map(): Map<string, StylesheetResource>),
+      };
+      renderState.styles.set(precedence, styleQueue);
+    }
+
+    const nonceStyle = renderState.nonce.style;
+    if (!nonceStyle || nonceStyle === nonce) {
+      if (__DEV__) {
+        if (!nonceStyle && nonce) {
+          console.error(
+            'React encountered a style tag with `precedence` "%s" and `nonce` "%s". When React manages style rules using `precedence` it will only include a nonce attributes if you also provide the same style nonce value as a render option.',
+            precedence,
+            nonce,
+          );
+        }
+      }
+      styleQueue.hrefs.push(stringToChunk(escapeTextForBrowser(href)));
+      pushStyleContents(styleQueue.rules, props);
+    } else if (__DEV__) {
+      console.error(
+        'React encountered a style tag with `precedence` "%s" and `nonce` "%s". When React manages style rules using `precedence` it will only include rules if the nonce matches the style nonce "%s" that was included with this render.',
+        precedence,
+        nonce,
+        nonceStyle,
+      );
+    }
+  }
+  if (styleQueue) {
+    // We need to track whether this boundary should wait on this resource or not.
+    // Typically this resource should always exist since we either had it or just created
+    // it. However, it's possible when you resume that the style has already been emitted
+    // and then it wouldn't be recreated in the RenderState and there's no need to track
+    // it again since we should've hoisted it to the shell already.
+    if (hoistableState) {
+      hoistableState.styles.add(styleQueue);
+    }
+  }
+
+  if (textEmbedded) {
+    // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+    // to be safe and assume text will follow by inserting a textSeparator
+    target.push(textSeparator);
+  }
+}
+
+/**
+ * This escaping function is designed to work with style tag textContent only.
+ *
+ * While untrusted style content should be made safe before using this api it will
+ * ensure that the style cannot be early terminated or never terminated state
+ */
+function escapeStyleTextContent(styleText: string) {
+  if (__DEV__) {
+    checkHtmlStringCoercion(styleText);
+  }
+  return ('' + styleText).replace(styleRegex, styleReplacer);
+}
+const styleRegex = /(<\/|<)(s)(tyle)/gi;
+const styleReplacer = (
+  match: string,
+  prefix: string,
+  s: string,
+  suffix: string,
+) => `${prefix}${s === 's' ? '\\73 ' : '\\53 '}${suffix}`;
+
+function pushStyleImpl(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+): ReactNodeList {
+  target.push(startChunkForTag('style'));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  // Style never participate as a ViewTransition.
+  target.push(endOfStartTag);
+
+  const child = Array.isArray(children)
+    ? children.length < 2
+      ? children[0]
+      : null
+    : children;
+  if (
+    typeof child !== 'function' &&
+    typeof child !== 'symbol' &&
+    child !== null &&
+    child !== undefined
+  ) {
+    target.push(stringToChunk(escapeStyleTextContent(child)));
+  }
+  pushInnerHTML(target, innerHTML, children);
+  target.push(endChunkForTag('style'));
+  return null;
+}
+
+function pushStyleContents(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+): void {
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+      }
+    }
+  }
+
+  const child = Array.isArray(children)
+    ? children.length < 2
+      ? children[0]
+      : null
+    : children;
+  if (
+    typeof child !== 'function' &&
+    typeof child !== 'symbol' &&
+    child !== null &&
+    child !== undefined
+  ) {
+    target.push(stringToChunk(escapeStyleTextContent(child)));
+  }
+  pushInnerHTML(target, innerHTML, children);
+  return;
+}
+
+function pushImg(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  hoistableState: null | HoistableState,
+  formatContext: FormatContext,
+): null {
+  const pictureOrNoScriptTagInScope =
+    formatContext.tagScope & (PICTURE_SCOPE | NOSCRIPT_SCOPE);
+  const {src, srcSet} = props;
+  if (
+    props.loading !== 'lazy' &&
+    (src || srcSet) &&
+    (typeof src === 'string' || src == null) &&
+    (typeof srcSet === 'string' || srcSet == null) &&
+    props.fetchPriority !== 'low' &&
+    !pictureOrNoScriptTagInScope &&
+    // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      typeof src === 'string' &&
+      src[4] === ':' &&
+      (src[0] === 'd' || src[0] === 'D') &&
+      (src[1] === 'a' || src[1] === 'A') &&
+      (src[2] === 't' || src[2] === 'T') &&
+      (src[3] === 'a' || src[3] === 'A')
+    ) &&
+    !(
+      typeof srcSet === 'string' &&
+      srcSet[4] === ':' &&
+      (srcSet[0] === 'd' || srcSet[0] === 'D') &&
+      (srcSet[1] === 'a' || srcSet[1] === 'A') &&
+      (srcSet[2] === 't' || srcSet[2] === 'T') &&
+      (srcSet[3] === 'a' || srcSet[3] === 'A')
+    )
+  ) {
+    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
+    // resumableState.
+
+    if (hoistableState !== null) {
+      // Mark this boundary's state as having suspensey images.
+      // Only do that if we have a ViewTransition that might trigger a parent Suspense boundary
+      // to animate its appearing. Since that's the only case we'd actually apply suspensey images
+      // for SSR reveals.
+      const isInSuspenseWithEnterViewTransition =
+        formatContext.tagScope & APPEARING_SCOPE;
+      if (isInSuspenseWithEnterViewTransition) {
+        hoistableState.suspenseyImages = true;
+      }
+    }
+
+    const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;
+    const key = getImageResourceKey(src, srcSet, sizes);
+
+    const promotablePreloads = renderState.preloads.images;
+
+    let resource = promotablePreloads.get(key);
+    if (resource) {
+      // We consider whether this preload can be promoted to higher priority flushing queue.
+      // The only time a resource will exist here is if it was created during this render
+      // and was not already in the high priority queue.
+      if (
+        props.fetchPriority === 'high' ||
+        renderState.highImagePreloads.size < 10
+      ) {
+        // Delete the resource from the map since we are promoting it and don't want to
+        // reenter this branch in a second pass for duplicate img hrefs.
+        promotablePreloads.delete(key);
+
+        // $FlowFixMe - Flow should understand that this is a Resource if the condition was true
+        renderState.highImagePreloads.add(resource);
+      }
+    } else if (!resumableState.imageResources.hasOwnProperty(key)) {
+      // We must construct a new preload resource
+      resumableState.imageResources[key] = PRELOAD_NO_CREDS;
+      const crossOrigin = getCrossOriginString(props.crossOrigin);
+
+      const headers = renderState.headers;
+      let header;
+      if (
+        headers &&
+        headers.remainingCapacity > 0 &&
+        // browsers today don't support preloading responsive images from link headers so we bail out
+        // if the img has srcset defined
+        typeof props.srcSet !== 'string' &&
+        // this is a hueristic similar to capping element preloads to 10 unless explicitly
+        // fetchPriority="high". We use length here which means it will fit fewer images when
+        // the urls are long and more when short. arguably byte size is a better hueristic because
+        // it directly translates to how much we send down before content is actually seen.
+        // We could unify the counts and also make it so the total is tracked regardless of
+        // flushing output but since the headers are likely to be go earlier than content
+        // they don't really conflict so for now I've kept them separate
+        (props.fetchPriority === 'high' ||
+          headers.highImagePreloads.length < 500) &&
+        // We manually construct the options for the preload only from strings. We don't want to pollute
+        // the params list with arbitrary props and if we copied everything over as it we might get
+        // coercion errors. We have checks for this in Dev but it seems safer to just only accept values
+        // that are strings
+        ((header = getPreloadAsHeader(src, 'image', {
+          imageSrcSet: props.srcSet,
+          imageSizes: props.sizes,
+          crossOrigin,
+          integrity: props.integrity,
+          nonce: props.nonce,
+          type: props.type,
+          fetchPriority: props.fetchPriority,
+          referrerPolicy: props.refererPolicy,
+        })),
+        // We always consume the header length since once we find one header that doesn't fit
+        // we assume all the rest won't as well. This is to avoid getting into a situation
+        // where we have a very small remaining capacity but no headers will ever fit and we end
+        // up constantly trying to see if the next resource might make it. In the future we can
+        // make this behavior different between render and prerender since in the latter case
+        // we are less sensitive to the current requests runtime per and more sensitive to maximizing
+        // headers.
+        (headers.remainingCapacity -= header.length + 2) >= 0)
+      ) {
+        // If we postpone in the shell we will still emit this preload so we track
+        // it to make sure we don't reset it.
+        renderState.resets.image[key] = PRELOAD_NO_CREDS;
+        if (headers.highImagePreloads) {
+          headers.highImagePreloads += ', ';
+        }
+        // $FlowFixMe[unsafe-addition]: we assign header during the if condition
+        headers.highImagePreloads += header;
+      } else {
+        resource = [];
+        pushLinkImpl(
+          resource,
+          ({
+            rel: 'preload',
+            as: 'image',
+            // There is a bug in Safari where imageSrcSet is not respected on preload links
+            // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+            // This harms older browers that do not support imageSrcSet by making their preloads not work
+            // but this population is shrinking fast and is already small so we accept this tradeoff.
+            href: srcSet ? undefined : src,
+            imageSrcSet: srcSet,
+            imageSizes: sizes,
+            crossOrigin: crossOrigin,
+            integrity: props.integrity,
+            type: props.type,
+            fetchPriority: props.fetchPriority,
+            referrerPolicy: props.referrerPolicy,
+          }: PreloadProps),
+        );
+        if (
+          props.fetchPriority === 'high' ||
+          renderState.highImagePreloads.size < 10
+        ) {
+          renderState.highImagePreloads.add(resource);
+        } else {
+          renderState.bulkPreloads.add(resource);
+          // We can bump the priority up if the same img is rendered later
+          // with fetchPriority="high"
+          promotablePreloads.set(key, resource);
+        }
+      }
+    }
+  }
+  return pushSelfClosing(target, props, 'img', formatContext);
+}
+
+function pushSelfClosing(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  formatContext: FormatContext,
+): null {
+  target.push(startChunkForTag(tag));
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${tag} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTagSelfClosing);
+  return null;
+}
+
+function pushStartMenuItem(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag('menuitem'));
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            'menuitems cannot have `children` nor `dangerouslySetInnerHTML`.',
+          );
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  return null;
+}
+
+function pushTitle(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  renderState: RenderState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  const noscriptTagInScope = formatContext.tagScope & NOSCRIPT_SCOPE;
+  const isFallback = formatContext.tagScope & FALLBACK_SCOPE;
+  if (__DEV__) {
+    if (hasOwnProperty.call(props, 'children')) {
+      const children = props.children;
+
+      const child = Array.isArray(children)
+        ? children.length < 2
+          ? children[0]
+          : null
+        : children;
+
+      if (Array.isArray(children) && children.length > 1) {
+        console.error(
+          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length %s instead.' +
+            ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value' +
+            ' which is why Arrays of length greater than 1 are not supported. When using JSX it can be common to combine text nodes and value nodes.' +
+            ' For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +
+            ' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+          children.length,
+        );
+      } else if (typeof child === 'function' || typeof child === 'symbol') {
+        const childType =
+          typeof child === 'function' ? 'a Function' : 'a Sybmol';
+        console.error(
+          'React expect children of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found %s instead.' +
+            ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +
+            ' tags to a single string value.',
+          childType,
+        );
+      } else if (child && child.toString === {}.toString) {
+        if (child.$$typeof != null) {
+          console.error(
+            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be' +
+              ' a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to' +
+              ' be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is' +
+              ' a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+          );
+        } else {
+          console.error(
+            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement' +
+              ' a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags' +
+              ' to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title>' +
+              ' is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
+          );
+        }
+      }
+    }
+  }
+
+  if (
+    formatContext.insertionMode !== SVG_MODE &&
+    !noscriptTagInScope &&
+    props.itemProp == null
+  ) {
+    if (isFallback) {
+      // Hoistable Elements for fallbacks are simply omitted. we don't want to emit them early
+      // because they are likely superceded by primary content and we want to avoid needing to clean
+      // them up when the primary content is ready. They are never hydrated on the client anyway because
+      // boundaries in fallback are awaited or client render, in either case there is never hydration
+      return null;
+    } else {
+      pushTitleImpl(renderState.hoistableChunks, props);
+    }
+  } else {
+    return pushTitleImpl(target, props);
+  }
+}
+
+function pushTitleImpl(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+): null {
+  target.push(startChunkForTag('title'));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+  // Title never participate as a ViewTransition
+  target.push(endOfStartTag);
+
+  const child = Array.isArray(children)
+    ? children.length < 2
+      ? children[0]
+      : null
+    : children;
+  if (
+    typeof child !== 'function' &&
+    typeof child !== 'symbol' &&
+    child !== null &&
+    child !== undefined
+  ) {
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    target.push(stringToChunk(escapeTextForBrowser('' + child)));
+  }
+  pushInnerHTML(target, innerHTML, children);
+  target.push(endChunkForTag('title'));
+  return null;
+}
+
+// These are used by the client if we clear a boundary and we find these, then we
+// also clear the singleton as well.
+const headPreambleContributionChunk = stringToPrecomputedChunk('<!--head-->');
+const bodyPreambleContributionChunk = stringToPrecomputedChunk('<!--body-->');
+const htmlPreambleContributionChunk = stringToPrecomputedChunk('<!--html-->');
+
+function pushStartHead(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  renderState: RenderState,
+  preambleState: null | PreambleState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  if (formatContext.insertionMode < HTML_MODE) {
+    // This <head> is the Document.head and should be part of the preamble
+    const preamble = preambleState || renderState.preamble;
+
+    if (preamble.headChunks) {
+      throw new Error(`The ${'`<head>`'} tag may only be rendered once.`);
+    }
+
+    // Insert a marker in the body where the contribution to the head was in case we need to clear it.
+    if (preambleState !== null) {
+      target.push(headPreambleContributionChunk);
+    }
+
+    preamble.headChunks = [];
+    return pushStartSingletonElement(
+      preamble.headChunks,
+      props,
+      'head',
+      formatContext,
+    );
+  } else {
+    // This <head> is deep and is likely just an error. we emit it inline though.
+    // Validation should warn that this tag is the the wrong spot.
+    return pushStartGenericElement(target, props, 'head', formatContext);
+  }
+}
+
+function pushStartBody(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  renderState: RenderState,
+  preambleState: null | PreambleState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  if (formatContext.insertionMode < HTML_MODE) {
+    // This <body> is the Document.body
+    const preamble = preambleState || renderState.preamble;
+
+    if (preamble.bodyChunks) {
+      throw new Error(`The ${'`<body>`'} tag may only be rendered once.`);
+    }
+
+    // Insert a marker in the body where the contribution to the body tag was in case we need to clear it.
+    if (preambleState !== null) {
+      target.push(bodyPreambleContributionChunk);
+    }
+
+    preamble.bodyChunks = [];
+    return pushStartSingletonElement(
+      preamble.bodyChunks,
+      props,
+      'body',
+      formatContext,
+    );
+  } else {
+    // This <head> is deep and is likely just an error. we emit it inline though.
+    // Validation should warn that this tag is the the wrong spot.
+    return pushStartGenericElement(target, props, 'body', formatContext);
+  }
+}
+
+function pushStartHtml(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  renderState: RenderState,
+  preambleState: null | PreambleState,
+  formatContext: FormatContext,
+): ReactNodeList {
+  if (formatContext.insertionMode === ROOT_HTML_MODE) {
+    // This <html> is the Document.documentElement
+    const preamble = preambleState || renderState.preamble;
+
+    if (preamble.htmlChunks) {
+      throw new Error(`The ${'`<html>`'} tag may only be rendered once.`);
+    }
+
+    // Insert a marker in the body where the contribution to the head was in case we need to clear it.
+    if (preambleState !== null) {
+      target.push(htmlPreambleContributionChunk);
+    }
+
+    preamble.htmlChunks = [DOCTYPE];
+    return pushStartSingletonElement(
+      preamble.htmlChunks,
+      props,
+      'html',
+      formatContext,
+    );
+  } else {
+    // This <html> is deep and is likely just an error. we emit it inline though.
+    // Validation should warn that this tag is the the wrong spot.
+    return pushStartGenericElement(target, props, 'html', formatContext);
+  }
+}
+
+function pushScript(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  textEmbedded: boolean,
+  formatContext: FormatContext,
+): null {
+  const noscriptTagInScope = formatContext.tagScope & NOSCRIPT_SCOPE;
+  const asyncProp = props.async;
+  if (
+    typeof props.src !== 'string' ||
+    !props.src ||
+    !(
+      asyncProp &&
+      typeof asyncProp !== 'function' &&
+      typeof asyncProp !== 'symbol'
+    ) ||
+    props.onLoad ||
+    props.onError ||
+    formatContext.insertionMode === SVG_MODE ||
+    noscriptTagInScope ||
+    props.itemProp != null
+  ) {
+    // This script will not be a resource, we bailout early and emit it in place.
+    return pushScriptImpl(target, props);
+  }
+
+  const src = props.src;
+  const key = getResourceKey(src);
+  // We can make this <script> into a ScriptResource
+
+  let resources, preloads;
+  if (props.type === 'module') {
+    resources = resumableState.moduleScriptResources;
+    preloads = renderState.preloads.moduleScripts;
+  } else {
+    resources = resumableState.scriptResources;
+    preloads = renderState.preloads.scripts;
+  }
+
+  const hasKey = resources.hasOwnProperty(key);
+  const resourceState = hasKey ? resources[key] : undefined;
+  if (resourceState !== EXISTS) {
+    // We are going to create this resource now so it is marked as Exists
+    resources[key] = EXISTS;
+
+    let scriptProps = props;
+    if (resourceState) {
+      // When resourceState is truty it is a Preload state. We cast it for clarity
+      const preloadState: Preloaded | PreloadedWithCredentials = resourceState;
+      if (preloadState.length === 2) {
+        scriptProps = {...props};
+        adoptPreloadCredentials(scriptProps, preloadState);
+      }
+
+      const preloadResource = preloads.get(key);
+      if (preloadResource) {
+        // the preload resource exists was created in this render. Now that we have
+        // a script resource which will emit earlier than a preload would if it
+        // hasn't already flushed we prevent it from flushing by zeroing the length
+        preloadResource.length = 0;
+      }
+    }
+
+    const resource: Resource = [];
+    // Add to the script flushing queue
+    renderState.scripts.add(resource);
+    // encode the tag as Chunks
+    pushScriptImpl(resource, scriptProps);
+  }
+
+  if (textEmbedded) {
+    // This script follows text but we aren't writing a tag. while not as efficient as possible we need
+    // to be safe and assume text will follow by inserting a textSeparator
+    target.push(textSeparator);
+  }
+  return null;
+}
+
+function pushScriptImpl(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+): null {
+  target.push(startChunkForTag('script'));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+  // Scripts never participate as a ViewTransition
+  target.push(endOfStartTag);
+
+  if (__DEV__) {
+    if (children != null && typeof children !== 'string') {
+      const descriptiveStatement =
+        typeof children === 'number'
+          ? 'a number for children'
+          : Array.isArray(children)
+            ? 'an array for children'
+            : 'something unexpected for children';
+      console.error(
+        'A script element was rendered with %s. If script element has children it must be a single string.' +
+          ' Consider using dangerouslySetInnerHTML or passing a plain string as children.',
+        descriptiveStatement,
+      );
+    }
+  }
+
+  pushInnerHTML(target, innerHTML, children);
+  if (typeof children === 'string') {
+    target.push(stringToChunk(escapeEntireInlineScriptContent(children)));
+  }
+  target.push(endChunkForTag('script'));
+  return null;
+}
+
+// This is a fork of pushStartGenericElement because we don't ever want to do
+// the children as strign optimization on that path when rendering singletons.
+// When we eliminate that special path we can delete this fork and unify it again
+function pushStartSingletonElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag(tag));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  return children;
+}
+
+function pushStartGenericElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag(tag));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  if (typeof children === 'string') {
+    // Special case children as a string to avoid the unnecessary comment.
+    // TODO: Remove this special case after the general optimization is in place.
+    target.push(stringToChunk(encodeHTMLTextNode(children)));
+    return null;
+  }
+  return children;
+}
+
+function pushStartCustomElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag(tag));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      let propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      let attributeName = propKey;
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        case 'style':
+          pushStyleAttribute(target, propValue);
+          break;
+        case 'suppressContentEditableWarning':
+        case 'suppressHydrationWarning':
+        case 'ref':
+          // Ignored. These are built-in to React on the client.
+          break;
+        case 'className':
+          // className gets rendered as class on the client, so it should be
+          // rendered as class on the server.
+          attributeName = 'class';
+        // intentional fallthrough
+        default:
+          if (
+            isAttributeNameSafe(propKey) &&
+            typeof propValue !== 'function' &&
+            typeof propValue !== 'symbol'
+          ) {
+            if (propValue === false) {
+              continue;
+            } else if (propValue === true) {
+              propValue = '';
+            } else if (typeof propValue === 'object') {
+              continue;
+            }
+            target.push(
+              attributeSeparator,
+              stringToChunk(attributeName),
+              attributeAssign,
+              stringToChunk(escapeTextForBrowser(propValue)),
+              attributeEnd,
+            );
+          }
+          break;
+      }
+    }
+  }
+
+  // TODO: ViewTransition attributes gets observed by the Custom Element which is a bit sketchy.
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  return children;
+}
+
+const leadingNewline = stringToPrecomputedChunk('\n');
+
+function pushStartPreformattedElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  formatContext: FormatContext,
+): ReactNodeList {
+  target.push(startChunkForTag(tag));
+
+  let children = null;
+  let innerHTML = null;
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+          children = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          innerHTML = propValue;
+          break;
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  pushViewTransitionAttributes(target, formatContext);
+
+  target.push(endOfStartTag);
+
+  // 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
+  // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
+  // \r is normalized out by HTMLTextAreaElement#value.)
+  // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
+  // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
+  // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
+  // See: Parsing of "textarea" "listing" and "pre" elements
+  //  from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
+  // TODO: This doesn't deal with the case where the child is an array
+  // or component that returns a string.
+  if (innerHTML != null) {
+    if (children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://react.dev/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
+
+    const html = innerHTML.__html;
+    if (html !== null && html !== undefined) {
+      if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
+        target.push(leadingNewline, stringToChunk(html));
+      } else {
+        if (__DEV__) {
+          checkHtmlStringCoercion(html);
+        }
+        target.push(stringToChunk('' + html));
+      }
+    }
+  }
+  if (typeof children === 'string' && children[0] === '\n') {
+    target.push(leadingNewline);
+  }
+  return children;
+}
+
+// We accept any tag to be rendered but since this gets injected into arbitrary
+// HTML, we want to make sure that it's a safe tag.
+// http://www.w3.org/TR/REC-xml/#NT-Name
+const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
+const validatedTagCache = new Map<string, PrecomputedChunk>();
+function startChunkForTag(tag: string): PrecomputedChunk {
+  let tagStartChunk = validatedTagCache.get(tag);
+  if (tagStartChunk === undefined) {
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
+    tagStartChunk = stringToPrecomputedChunk('<' + tag);
+    validatedTagCache.set(tag, tagStartChunk);
+  }
+  return tagStartChunk;
+}
+
+export const doctypeChunk: PrecomputedChunk =
+  stringToPrecomputedChunk('<!DOCTYPE html>');
+
+import {doctypeChunk as DOCTYPE} from 'react-server/src/ReactFizzConfig';
+
+export function pushStartInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  type: string,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  preambleState: null | PreambleState,
+  hoistableState: null | HoistableState,
+  formatContext: FormatContext,
+  textEmbedded: boolean,
+): ReactNodeList {
+  if (__DEV__) {
+    validateARIAProperties(type, props);
+    validateInputProperties(type, props);
+    validateUnknownProperties(type, props, null);
+
+    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.',
+      );
+    }
+
+    if (
+      formatContext.insertionMode !== SVG_MODE &&
+      formatContext.insertionMode !== MATHML_MODE
+    ) {
+      if (type.indexOf('-') === -1 && type.toLowerCase() !== type) {
+        console.error(
+          '<%s /> is using incorrect casing. ' +
+            'Use PascalCase for React components, ' +
+            'or lowercase for HTML elements.',
+          type,
+        );
+      }
+    }
+  }
+
+  switch (type) {
+    case 'div':
+    case 'span':
+    case 'svg':
+    case 'path':
+      // Fast track very common tags
+      break;
+    case 'a':
+      return pushStartAnchor(target, props, formatContext);
+    case 'g':
+    case 'p':
+    case 'li':
+      // Fast track very common tags
+      break;
+    // Special tags
+    case 'select':
+      return pushStartSelect(target, props, formatContext);
+    case 'option':
+      return pushStartOption(target, props, formatContext);
+    case 'textarea':
+      return pushStartTextArea(target, props, formatContext);
+    case 'input':
+      return pushInput(
+        target,
+        props,
+        resumableState,
+        renderState,
+        formatContext,
+      );
+    case 'button':
+      return pushStartButton(
+        target,
+        props,
+        resumableState,
+        renderState,
+        formatContext,
+      );
+    case 'form':
+      return pushStartForm(
+        target,
+        props,
+        resumableState,
+        renderState,
+        formatContext,
+      );
+    case 'menuitem':
+      return pushStartMenuItem(target, props, formatContext);
+    case 'object':
+      return pushStartObject(target, props, formatContext);
+    case 'title':
+      return pushTitle(target, props, renderState, formatContext);
+    case 'link':
+      return pushLink(
+        target,
+        props,
+        resumableState,
+        renderState,
+        hoistableState,
+        textEmbedded,
+        formatContext,
+      );
+    case 'script':
+      return pushScript(
+        target,
+        props,
+        resumableState,
+        renderState,
+        textEmbedded,
+        formatContext,
+      );
+    case 'style':
+      return pushStyle(
+        target,
+        props,
+        resumableState,
+        renderState,
+        hoistableState,
+        textEmbedded,
+        formatContext,
+      );
+    case 'meta':
+      return pushMeta(target, props, renderState, textEmbedded, formatContext);
+    // Newline eating tags
+    case 'listing':
+    case 'pre': {
+      return pushStartPreformattedElement(target, props, type, formatContext);
+    }
+    case 'img': {
+      return pushImg(
+        target,
+        props,
+        resumableState,
+        renderState,
+        hoistableState,
+        formatContext,
+      );
+    }
+    // Omitted close tags
+    case 'base':
+    case 'area':
+    case 'br':
+    case 'col':
+    case 'embed':
+    case 'hr':
+    case 'keygen':
+    case 'param':
+    case 'source':
+    case 'track':
+    case 'wbr': {
+      return pushSelfClosing(target, props, type, formatContext);
+    }
+    // These are reserved SVG and MathML elements, that are never custom elements.
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts
+    case 'annotation-xml':
+    case 'color-profile':
+    case 'font-face':
+    case 'font-face-src':
+    case 'font-face-uri':
+    case 'font-face-format':
+    case 'font-face-name':
+    case 'missing-glyph': {
+      break;
+    }
+    // Preamble start tags
+    case 'head':
+      return pushStartHead(
+        target,
+        props,
+        renderState,
+        preambleState,
+        formatContext,
+      );
+    case 'body':
+      return pushStartBody(
+        target,
+        props,
+        renderState,
+        preambleState,
+        formatContext,
+      );
+    case 'html': {
+      return pushStartHtml(
+        target,
+        props,
+        renderState,
+        preambleState,
+        formatContext,
+      );
+    }
+    default: {
+      if (type.indexOf('-') !== -1) {
+        // Custom element
+        return pushStartCustomElement(target, props, type, formatContext);
+      }
+    }
+  }
+  // Generic element
+  return pushStartGenericElement(target, props, type, formatContext);
+}
+
+const endTagCache = new Map<string, PrecomputedChunk>();
+function endChunkForTag(tag: string): PrecomputedChunk {
+  let chunk = endTagCache.get(tag);
+  if (chunk === undefined) {
+    chunk = stringToPrecomputedChunk('</' + tag + '>');
+    endTagCache.set(tag, chunk);
+  }
+  return chunk;
+}
+
+export function pushEndInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  type: string,
+  props: Object,
+  resumableState: ResumableState,
+  formatContext: FormatContext,
+): void {
+  switch (type) {
+    // We expect title and script tags to always be pushed in a unit and never
+    // return children. when we end up pushing the end tag we want to ensure
+    // there is no extra closing tag pushed
+    case 'title':
+    case 'style':
+    case 'script':
+    // Omitted close tags
+    // TODO: Instead of repeating this switch we could try to pass a flag from above.
+    // That would require returning a tuple. Which might be ok if it gets inlined.
+    // fallthrough
+    case 'area':
+    case 'base':
+    case 'br':
+    case 'col':
+    case 'embed':
+    case 'hr':
+    case 'img':
+    case 'input':
+    case 'keygen':
+    case 'link':
+    case 'meta':
+    case 'param':
+    case 'source':
+    case 'track':
+    case 'wbr': {
+      // No close tag needed.
+      return;
+    }
+    // Postamble end tags
+    // When float is enabled we omit the end tags for body and html when
+    // they represent the Document.body and Document.documentElement Nodes.
+    // This is so we can withhold them until the postamble when we know
+    // we won't emit any more tags
+    case 'body': {
+      if (formatContext.insertionMode <= HTML_HTML_MODE) {
+        resumableState.hasBody = true;
+        return;
+      }
+      break;
+    }
+    case 'html':
+      if (formatContext.insertionMode === ROOT_HTML_MODE) {
+        resumableState.hasHtml = true;
+        return;
+      }
+      break;
+    case 'head':
+      if (formatContext.insertionMode <= HTML_HTML_MODE) {
+        return;
+      }
+      break;
+  }
+  target.push(endChunkForTag(type));
+}
+
+export function hoistPreambleState(
+  renderState: RenderState,
+  preambleState: PreambleState,
+) {
+  const rootPreamble = renderState.preamble;
+  if (rootPreamble.htmlChunks === null && preambleState.htmlChunks) {
+    rootPreamble.htmlChunks = preambleState.htmlChunks;
+  }
+  if (rootPreamble.headChunks === null && preambleState.headChunks) {
+    rootPreamble.headChunks = preambleState.headChunks;
+  }
+  if (rootPreamble.bodyChunks === null && preambleState.bodyChunks) {
+    rootPreamble.bodyChunks = preambleState.bodyChunks;
+  }
+}
+
+export function isPreambleReady(
+  renderState: RenderState,
+  // This means there are unfinished Suspense boundaries which could contain
+  // a preamble. In the case of DOM we constrain valid programs to only having
+  // one instance of each singleton so we can determine the preamble is ready
+  // as long as we have chunks for each of these tags.
+  hasPendingPreambles: boolean,
+): boolean {
+  const preamble = renderState.preamble;
+  return (
+    // There are no remaining boundaries which might contain a preamble so
+    // the preamble is as complete as it is going to get
+    hasPendingPreambles === false ||
+    // we have a head and body tag. we don't need to wait for any more
+    // because it would be invalid to render additional copies of these tags
+    !!(preamble.headChunks && preamble.bodyChunks)
+  );
+}
+
+function writeBootstrap(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  const bootstrapChunks = renderState.bootstrapChunks;
+  let i = 0;
+  for (; i < bootstrapChunks.length - 1; i++) {
+    writeChunk(destination, bootstrapChunks[i]);
+  }
+  if (i < bootstrapChunks.length) {
+    const lastChunk = bootstrapChunks[i];
+    bootstrapChunks.length = 0;
+    return writeChunkAndReturn(destination, lastChunk);
+  }
+  return true;
+}
+
+const shellTimeRuntimeScript = stringToPrecomputedChunk(markShellTime);
+
+function writeShellTimeInstruction(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+): boolean {
+  if (
+    enableFizzExternalRuntime &&
+    resumableState.streamingFormat !== ScriptStreamingFormat
+  ) {
+    // External runtime always tracks the shell time in the runtime.
+    return true;
+  }
+  if ((resumableState.instructions & SentMarkShellTime) !== NothingSent) {
+    // We already sent this instruction.
+    return true;
+  }
+  resumableState.instructions |= SentMarkShellTime;
+  writeChunk(destination, renderState.startInlineScript);
+  writeCompletedShellIdAttribute(destination, resumableState);
+  writeChunk(destination, endOfStartTag);
+  writeChunk(destination, shellTimeRuntimeScript);
+  return writeChunkAndReturn(destination, endInlineScript);
+}
+
+export function writeCompletedRoot(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  isComplete: boolean,
+): boolean {
+  if (!isComplete) {
+    // If we're not already fully complete, we might complete another boundary. If so,
+    // we need to track the paint time of the shell so we know how much to throttle the reveal.
+    writeShellTimeInstruction(destination, resumableState, renderState);
+  }
+  if (enableFizzBlockingRender) {
+    const preamble = renderState.preamble;
+    if (preamble.htmlChunks || preamble.headChunks) {
+      // If we rendered the whole document, then we emitted a rel="expect" that needs a
+      // matching target. Normally we use one of the bootstrap scripts for this but if
+      // there are none, then we need to emit a tag to complete the shell.
+      if (
+        (resumableState.instructions & SentCompletedShellId) ===
+        NothingSent
+      ) {
+        writeChunk(destination, startChunkForTag('template'));
+        writeCompletedShellIdAttribute(destination, resumableState);
+        writeChunk(destination, endOfStartTag);
+        writeChunk(destination, endChunkForTag('template'));
+      }
+    }
+  }
+  return writeBootstrap(destination, renderState);
+}
+
+// Structural Nodes
+
+// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+// display. It's never visible to users. We use the template tag because it can be used in every
+// type of parent. <script> tags also work in every other tag except <colgroup>.
+const placeholder1 = stringToPrecomputedChunk('<template id="');
+const placeholder2 = stringToPrecomputedChunk('"></template>');
+export function writePlaceholder(
+  destination: Destination,
+  renderState: RenderState,
+  id: number,
+): boolean {
+  writeChunk(destination, placeholder1);
+  writeChunk(destination, renderState.placeholderPrefix);
+  const formattedID = stringToChunk(id.toString(16));
+  writeChunk(destination, formattedID);
+  return writeChunkAndReturn(destination, placeholder2);
+}
+
+// Activity boundaries are encoded as comments.
+const startActivityBoundary = stringToPrecomputedChunk('<!--&-->');
+const endActivityBoundary = stringToPrecomputedChunk('<!--/&-->');
+
+export function pushStartActivityBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+): void {
+  target.push(startActivityBoundary);
+}
+
+export function pushEndActivityBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+): void {
+  target.push(endActivityBoundary);
+}
+
+// Suspense boundaries are encoded as comments.
+const startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+const startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+  '<!--$?--><template id="',
+);
+const startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
+const startClientRenderedSuspenseBoundary =
+  stringToPrecomputedChunk('<!--$!-->');
+const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+
+const clientRenderedSuspenseBoundaryError1 =
+  stringToPrecomputedChunk('<template');
+const clientRenderedSuspenseBoundaryErrorAttrInterstitial =
+  stringToPrecomputedChunk('"');
+const clientRenderedSuspenseBoundaryError1A =
+  stringToPrecomputedChunk(' data-dgst="');
+const clientRenderedSuspenseBoundaryError1B =
+  stringToPrecomputedChunk(' data-msg="');
+const clientRenderedSuspenseBoundaryError1C =
+  stringToPrecomputedChunk(' data-stck="');
+const clientRenderedSuspenseBoundaryError1D =
+  stringToPrecomputedChunk(' data-cstck="');
+const clientRenderedSuspenseBoundaryError2 =
+  stringToPrecomputedChunk('></template>');
+
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  return writeChunkAndReturn(destination, startCompletedSuspenseBoundary);
+}
+export function writeStartPendingSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+  id: number,
+): boolean {
+  writeChunk(destination, startPendingSuspenseBoundary1);
+
+  if (id === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
+  writeChunk(destination, renderState.boundaryPrefix);
+  writeChunk(destination, stringToChunk(id.toString(16)));
+  return writeChunkAndReturn(destination, startPendingSuspenseBoundary2);
+}
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+  errorDigest: ?string,
+  errorMessage: ?string,
+  errorStack: ?string,
+  errorComponentStack: ?string,
+): boolean {
+  let result;
+  result = writeChunkAndReturn(
+    destination,
+    startClientRenderedSuspenseBoundary,
+  );
+  writeChunk(destination, clientRenderedSuspenseBoundaryError1);
+  if (errorDigest) {
+    writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
+    writeChunk(destination, stringToChunk(escapeTextForBrowser(errorDigest)));
+    writeChunk(
+      destination,
+      clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+    );
+  }
+  if (__DEV__) {
+    if (errorMessage) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorMessage)),
+      );
+      writeChunk(
+        destination,
+        clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+      );
+    }
+    if (errorStack) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1C);
+      writeChunk(destination, stringToChunk(escapeTextForBrowser(errorStack)));
+      writeChunk(
+        destination,
+        clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+      );
+    }
+    if (errorComponentStack) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1D);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorComponentStack)),
+      );
+      writeChunk(
+        destination,
+        clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+      );
+    }
+  }
+  result = writeChunkAndReturn(
+    destination,
+    clientRenderedSuspenseBoundaryError2,
+  );
+  return result;
+}
+export function writeEndCompletedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  return writeChunkAndReturn(destination, endSuspenseBoundary);
+}
+export function writeEndPendingSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  return writeChunkAndReturn(destination, endSuspenseBoundary);
+}
+export function writeEndClientRenderedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  return writeChunkAndReturn(destination, endSuspenseBoundary);
+}
+
+const startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+const startSegmentHTML2 = stringToPrecomputedChunk('">');
+const endSegmentHTML = stringToPrecomputedChunk('</div>');
+
+const startSegmentSVG = stringToPrecomputedChunk(
+  '<svg aria-hidden="true" style="display:none" id="',
+);
+const startSegmentSVG2 = stringToPrecomputedChunk('">');
+const endSegmentSVG = stringToPrecomputedChunk('</svg>');
+
+const startSegmentMathML = stringToPrecomputedChunk(
+  '<math aria-hidden="true" style="display:none" id="',
+);
+const startSegmentMathML2 = stringToPrecomputedChunk('">');
+const endSegmentMathML = stringToPrecomputedChunk('</math>');
+
+const startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
+const startSegmentTable2 = stringToPrecomputedChunk('">');
+const endSegmentTable = stringToPrecomputedChunk('</table>');
+
+const startSegmentTableBody = stringToPrecomputedChunk(
+  '<table hidden><tbody id="',
+);
+const startSegmentTableBody2 = stringToPrecomputedChunk('">');
+const endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
+
+const startSegmentTableRow = stringToPrecomputedChunk('<table hidden><tr id="');
+const startSegmentTableRow2 = stringToPrecomputedChunk('">');
+const endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
+
+const startSegmentColGroup = stringToPrecomputedChunk(
+  '<table hidden><colgroup id="',
+);
+const startSegmentColGroup2 = stringToPrecomputedChunk('">');
+const endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
+
+export function writeStartSegment(
+  destination: Destination,
+  renderState: RenderState,
+  formatContext: FormatContext,
+  id: number,
+): boolean {
+  switch (formatContext.insertionMode) {
+    case ROOT_HTML_MODE:
+    case HTML_HTML_MODE:
+    case HTML_HEAD_MODE:
+    case HTML_MODE: {
+      writeChunk(destination, startSegmentHTML);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentHTML2);
+    }
+    case SVG_MODE: {
+      writeChunk(destination, startSegmentSVG);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentSVG2);
+    }
+    case MATHML_MODE: {
+      writeChunk(destination, startSegmentMathML);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentMathML2);
+    }
+    case HTML_TABLE_MODE: {
+      writeChunk(destination, startSegmentTable);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentTable2);
+    }
+    // TODO: For the rest of these, there will be extra wrapper nodes that never
+    // get deleted from the document. We need to delete the table too as part
+    // of the injected scripts. They are invisible though so it's not too terrible
+    // and it's kind of an edge case to suspend in a table. Totally supported though.
+    case HTML_TABLE_BODY_MODE: {
+      writeChunk(destination, startSegmentTableBody);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentTableBody2);
+    }
+    case HTML_TABLE_ROW_MODE: {
+      writeChunk(destination, startSegmentTableRow);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentTableRow2);
+    }
+    case HTML_COLGROUP_MODE: {
+      writeChunk(destination, startSegmentColGroup);
+      writeChunk(destination, renderState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunkAndReturn(destination, startSegmentColGroup2);
+    }
+    default: {
+      throw new Error('Unknown insertion mode. This is a bug in React.');
+    }
+  }
+}
+export function writeEndSegment(
+  destination: Destination,
+  formatContext: FormatContext,
+): boolean {
+  switch (formatContext.insertionMode) {
+    case ROOT_HTML_MODE:
+    case HTML_HTML_MODE:
+    case HTML_HEAD_MODE:
+    case HTML_MODE: {
+      return writeChunkAndReturn(destination, endSegmentHTML);
+    }
+    case SVG_MODE: {
+      return writeChunkAndReturn(destination, endSegmentSVG);
+    }
+    case MATHML_MODE: {
+      return writeChunkAndReturn(destination, endSegmentMathML);
+    }
+    case HTML_TABLE_MODE: {
+      return writeChunkAndReturn(destination, endSegmentTable);
+    }
+    case HTML_TABLE_BODY_MODE: {
+      return writeChunkAndReturn(destination, endSegmentTableBody);
+    }
+    case HTML_TABLE_ROW_MODE: {
+      return writeChunkAndReturn(destination, endSegmentTableRow);
+    }
+    case HTML_COLGROUP_MODE: {
+      return writeChunkAndReturn(destination, endSegmentColGroup);
+    }
+    default: {
+      throw new Error('Unknown insertion mode. This is a bug in React.');
+    }
+  }
+}
+
+const completeSegmentScript1Full = stringToPrecomputedChunk(
+  completeSegmentFunction + '$RS("',
+);
+const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
+const completeSegmentScript2 = stringToPrecomputedChunk('","');
+const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
+
+const completeSegmentData1 = stringToPrecomputedChunk(
+  '<template data-rsi="" data-sid="',
+);
+const completeSegmentData2 = stringToPrecomputedChunk('" data-pid="');
+const completeSegmentDataEnd = dataElementQuotedEnd;
+
+export function writeCompletedSegmentInstruction(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  contentSegmentID: number,
+): boolean {
+  const scriptFormat =
+    !enableFizzExternalRuntime ||
+    resumableState.streamingFormat === ScriptStreamingFormat;
+  if (scriptFormat) {
+    writeChunk(destination, renderState.startInlineScript);
+    writeChunk(destination, endOfStartTag);
+    if (
+      (resumableState.instructions & SentCompleteSegmentFunction) ===
+      NothingSent
+    ) {
+      // The first time we write this, we'll need to include the full implementation.
+      resumableState.instructions |= SentCompleteSegmentFunction;
+      writeChunk(destination, completeSegmentScript1Full);
+    } else {
+      // Future calls can just reuse the same function.
+      writeChunk(destination, completeSegmentScript1Partial);
+    }
+  } else {
+    writeChunk(destination, completeSegmentData1);
+  }
+
+  // Write function arguments, which are string literals
+  writeChunk(destination, renderState.segmentPrefix);
+  const formattedID = stringToChunk(contentSegmentID.toString(16));
+  writeChunk(destination, formattedID);
+  if (scriptFormat) {
+    writeChunk(destination, completeSegmentScript2);
+  } else {
+    writeChunk(destination, completeSegmentData2);
+  }
+  writeChunk(destination, renderState.placeholderPrefix);
+  writeChunk(destination, formattedID);
+
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeSegmentScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, completeSegmentDataEnd);
+  }
+}
+
+const completeBoundaryScriptFunctionOnly = stringToPrecomputedChunk(
+  completeBoundaryFunction,
+);
+const completeBoundaryUpgradeToViewTransitionsInstruction = stringToChunk(
+  upgradeToViewTransitionsInstruction,
+);
+const completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
+
+const completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(
+  styleInsertionFunction + '$RR("',
+);
+
+const completeBoundaryWithStylesScript1Partial =
+  stringToPrecomputedChunk('$RR("');
+const completeBoundaryScript2 = stringToPrecomputedChunk('","');
+const completeBoundaryScript3a = stringToPrecomputedChunk('",');
+const completeBoundaryScript3b = stringToPrecomputedChunk('"');
+const completeBoundaryScriptEnd = stringToPrecomputedChunk(')</script>');
+
+const completeBoundaryData1 = stringToPrecomputedChunk(
+  '<template data-rci="" data-bid="',
+);
+const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
+  '<template data-rri="" data-bid="',
+);
+const completeBoundaryData2 = stringToPrecomputedChunk('" data-sid="');
+const completeBoundaryData3a = stringToPrecomputedChunk('" data-sty="');
+const completeBoundaryDataEnd = dataElementQuotedEnd;
+
+export function writeCompletedBoundaryInstruction(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  id: number,
+  hoistableState: HoistableState,
+): boolean {
+  const requiresStyleInsertion = renderState.stylesToHoist;
+  const requiresViewTransitions =
+    enableViewTransition &&
+    (resumableState.instructions & NeedUpgradeToViewTransitions) !==
+      NothingSent;
+  // If necessary stylesheets will be flushed with this instruction.
+  // Any style tags not yet hoisted in the Document will also be hoisted.
+  // We reset this state since after this instruction executes all styles
+  // up to this point will have been hoisted
+  renderState.stylesToHoist = false;
+  const scriptFormat =
+    !enableFizzExternalRuntime ||
+    resumableState.streamingFormat === ScriptStreamingFormat;
+  if (scriptFormat) {
+    writeChunk(destination, renderState.startInlineScript);
+    writeChunk(destination, endOfStartTag);
+    if (requiresStyleInsertion) {
+      if (
+        (resumableState.instructions & SentClientRenderFunction) ===
+        NothingSent
+      ) {
+        // The completeBoundaryWithStyles function depends on the client render function.
+        resumableState.instructions |= SentClientRenderFunction;
+        writeChunk(destination, clientRenderScriptFunctionOnly);
+      }
+      if (
+        (resumableState.instructions & SentCompleteBoundaryFunction) ===
+        NothingSent
+      ) {
+        // The completeBoundaryWithStyles function depends on the complete boundary function.
+        resumableState.instructions |= SentCompleteBoundaryFunction;
+        writeChunk(destination, completeBoundaryScriptFunctionOnly);
+      }
+      if (
+        requiresViewTransitions &&
+        (resumableState.instructions & SentUpgradeToViewTransitions) ===
+          NothingSent
+      ) {
+        resumableState.instructions |= SentUpgradeToViewTransitions;
+        writeChunk(
+          destination,
+          completeBoundaryUpgradeToViewTransitionsInstruction,
+        );
+      }
+      if (
+        (resumableState.instructions & SentStyleInsertionFunction) ===
+        NothingSent
+      ) {
+        resumableState.instructions |= SentStyleInsertionFunction;
+        writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
+      } else {
+        writeChunk(destination, completeBoundaryWithStylesScript1Partial);
+      }
+    } else {
+      if (
+        (resumableState.instructions & SentCompleteBoundaryFunction) ===
+        NothingSent
+      ) {
+        resumableState.instructions |= SentCompleteBoundaryFunction;
+        writeChunk(destination, completeBoundaryScriptFunctionOnly);
+      }
+      if (
+        requiresViewTransitions &&
+        (resumableState.instructions & SentUpgradeToViewTransitions) ===
+          NothingSent
+      ) {
+        resumableState.instructions |= SentUpgradeToViewTransitions;
+        writeChunk(
+          destination,
+          completeBoundaryUpgradeToViewTransitionsInstruction,
+        );
+      }
+      writeChunk(destination, completeBoundaryScript1Partial);
+    }
+  } else {
+    if (requiresStyleInsertion) {
+      writeChunk(destination, completeBoundaryWithStylesData1);
+    } else {
+      writeChunk(destination, completeBoundaryData1);
+    }
+  }
+
+  const idChunk = stringToChunk(id.toString(16));
+
+  writeChunk(destination, renderState.boundaryPrefix);
+  writeChunk(destination, idChunk);
+
+  // Write function arguments, which are string and array literals
+  if (scriptFormat) {
+    writeChunk(destination, completeBoundaryScript2);
+  } else {
+    writeChunk(destination, completeBoundaryData2);
+  }
+  writeChunk(destination, renderState.segmentPrefix);
+  writeChunk(destination, idChunk);
+  if (requiresStyleInsertion) {
+    // Script and data writers must format this differently:
+    //  - script writer emits an array literal, whose string elements are
+    //    escaped for javascript  e.g. ["A", "B"]
+    //  - data writer emits a string literal, which is escaped as html
+    //    e.g. [&#34;A&#34;, &#34;B&#34;]
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3a);
+      // hoistableState encodes an array literal
+      writeStyleResourceDependenciesInJS(destination, hoistableState);
+    } else {
+      writeChunk(destination, completeBoundaryData3a);
+      writeStyleResourceDependenciesInAttr(destination, hoistableState);
+    }
+  } else {
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3b);
+    }
+  }
+  let writeMore;
+  if (scriptFormat) {
+    writeMore = writeChunkAndReturn(destination, completeBoundaryScriptEnd);
+  } else {
+    writeMore = writeChunkAndReturn(destination, completeBoundaryDataEnd);
+  }
+  return writeBootstrap(destination, renderState) && writeMore;
+}
+
+const clientRenderScriptFunctionOnly =
+  stringToPrecomputedChunk(clientRenderFunction);
+
+const clientRenderScript1Full = stringToPrecomputedChunk(
+  clientRenderFunction + ';$RX("',
+);
+const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+const clientRenderScript1A = stringToPrecomputedChunk('"');
+const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
+const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
+
+const clientRenderData1 = stringToPrecomputedChunk(
+  '<template data-rxi="" data-bid="',
+);
+const clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
+const clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
+const clientRenderData4 = stringToPrecomputedChunk('" data-stck="');
+const clientRenderData5 = stringToPrecomputedChunk('" data-cstck="');
+const clientRenderDataEnd = dataElementQuotedEnd;
+
+export function writeClientRenderBoundaryInstruction(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  id: number,
+  errorDigest: ?string,
+  errorMessage: ?string,
+  errorStack: ?string,
+  errorComponentStack: ?string,
+): boolean {
+  const scriptFormat =
+    !enableFizzExternalRuntime ||
+    resumableState.streamingFormat === ScriptStreamingFormat;
+  if (scriptFormat) {
+    writeChunk(destination, renderState.startInlineScript);
+    writeChunk(destination, endOfStartTag);
+    if (
+      (resumableState.instructions & SentClientRenderFunction) ===
+      NothingSent
+    ) {
+      // The first time we write this, we'll need to include the full implementation.
+      resumableState.instructions |= SentClientRenderFunction;
+      writeChunk(destination, clientRenderScript1Full);
+    } else {
+      // Future calls can just reuse the same function.
+      writeChunk(destination, clientRenderScript1Partial);
+    }
+  } else {
+    // <template data-rxi="" data-bid="
+    writeChunk(destination, clientRenderData1);
+  }
+
+  writeChunk(destination, renderState.boundaryPrefix);
+  writeChunk(destination, stringToChunk(id.toString(16)));
+  if (scriptFormat) {
+    // " needs to be inserted for scripts, since ArgInterstitual does not contain
+    // leading or trailing quotes
+    writeChunk(destination, clientRenderScript1A);
+  }
+
+  if (errorDigest || errorMessage || errorStack || errorComponentStack) {
+    if (scriptFormat) {
+      // ,"JSONString"
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
+      );
+    } else {
+      // " data-dgst="HTMLString
+      writeChunk(destination, clientRenderData2);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorDigest || '')),
+      );
+    }
+  }
+  if (errorMessage || errorStack || errorComponentStack) {
+    if (scriptFormat) {
+      // ,"JSONString"
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
+      );
+    } else {
+      // " data-msg="HTMLString
+      writeChunk(destination, clientRenderData3);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorMessage || '')),
+      );
+    }
+  }
+  if (errorStack || errorComponentStack) {
+    // ,"JSONString"
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorStack || '')),
+      );
+    } else {
+      // " data-stck="HTMLString
+      writeChunk(destination, clientRenderData4);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorStack || '')),
+      );
+    }
+  }
+  if (errorComponentStack) {
+    // ,"JSONString"
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(
+          escapeJSStringsForInstructionScripts(errorComponentStack),
+        ),
+      );
+    } else {
+      // " data-cstck="HTMLString
+      writeChunk(destination, clientRenderData5);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorComponentStack)),
+      );
+    }
+  }
+
+  if (scriptFormat) {
+    // ></script>
+    return writeChunkAndReturn(destination, clientRenderScriptEnd);
+  } else {
+    // "></template>
+    return writeChunkAndReturn(destination, clientRenderDataEnd);
+  }
+}
+
+const regexForJSStringsInInstructionScripts = /[<\u2028\u2029]/g;
+function escapeJSStringsForInstructionScripts(input: string): string {
+  const escaped = JSON.stringify(input);
+  return escaped.replace(regexForJSStringsInInstructionScripts, match => {
+    switch (match) {
+      // santizing breaking out of strings and script tags
+      case '<':
+        return '\\u003c';
+      case '\u2028':
+        return '\\u2028';
+      case '\u2029':
+        return '\\u2029';
+      default: {
+        // eslint-disable-next-line react-internal/prod-error-codes
+        throw new Error(
+          'escapeJSStringsForInstructionScripts encountered a match it does not know how to replace. this means the match regex and the replacement characters are no longer in sync. This is a bug in React',
+        );
+      }
+    }
+  });
+}
+
+const regexForJSStringsInScripts = /[&><\u2028\u2029]/g;
+function escapeJSObjectForInstructionScripts(input: Object): string {
+  const escaped = JSON.stringify(input);
+  return escaped.replace(regexForJSStringsInScripts, match => {
+    switch (match) {
+      // santizing breaking out of strings and script tags
+      case '&':
+        return '\\u0026';
+      case '>':
+        return '\\u003e';
+      case '<':
+        return '\\u003c';
+      case '\u2028':
+        return '\\u2028';
+      case '\u2029':
+        return '\\u2029';
+      default: {
+        // eslint-disable-next-line react-internal/prod-error-codes
+        throw new Error(
+          'escapeJSObjectForInstructionScripts encountered a match it does not know how to replace. this means the match regex and the replacement characters are no longer in sync. This is a bug in React',
+        );
+      }
+    }
+  });
+}
+
+const lateStyleTagResourceOpen1 = stringToPrecomputedChunk(
+  ' media="not all" data-precedence="',
+);
+const lateStyleTagResourceOpen2 = stringToPrecomputedChunk('" data-href="');
+const lateStyleTagResourceOpen3 = stringToPrecomputedChunk('">');
+const lateStyleTagTemplateClose = stringToPrecomputedChunk('</style>');
+
+// Tracks whether the boundary currently flushing is flushign style tags or has any
+// stylesheet dependencies not flushed in the Preamble.
+let currentlyRenderingBoundaryHasStylesToHoist = false;
+
+// Acts as a return value for the forEach execution of style tag flushing.
+let destinationHasCapacity = true;
+
+function flushStyleTagsLateForBoundary(
+  this: Destination,
+  styleQueue: StyleQueue,
+) {
+  const rules = styleQueue.rules;
+  const hrefs = styleQueue.hrefs;
+  if (__DEV__) {
+    if (rules.length > 0 && hrefs.length === 0) {
+      console.error(
+        'React expected to have at least one href for an a hoistable style but found none. This is a bug in React.',
+      );
+    }
+  }
+  let i = 0;
+  if (hrefs.length) {
+    writeChunk(
+      this,
+      ((currentlyFlushingRenderState: any): RenderState).startInlineStyle,
+    );
+    writeChunk(this, lateStyleTagResourceOpen1);
+    writeChunk(this, styleQueue.precedence);
+    writeChunk(this, lateStyleTagResourceOpen2);
+    for (; i < hrefs.length - 1; i++) {
+      writeChunk(this, hrefs[i]);
+      writeChunk(this, spaceSeparator);
+    }
+    writeChunk(this, hrefs[i]);
+    writeChunk(this, lateStyleTagResourceOpen3);
+    for (i = 0; i < rules.length; i++) {
+      writeChunk(this, rules[i]);
+    }
+    destinationHasCapacity = writeChunkAndReturn(
+      this,
+      lateStyleTagTemplateClose,
+    );
+
+    // We wrote style tags for this boundary and we may need to emit a script
+    // to hoist them.
+    currentlyRenderingBoundaryHasStylesToHoist = true;
+
+    // style resources can flush continuously since more rules may be written into
+    // them with new hrefs. Instead of marking it flushed, we simply reset the chunks
+    // and hrefs
+    rules.length = 0;
+    hrefs.length = 0;
+  }
+}
+
+function hasStylesToHoist(stylesheet: StylesheetResource): boolean {
+  // We need to reveal boundaries with styles whenever a stylesheet it depends on is either
+  // not flushed or flushed after the preamble (shell).
+  if (stylesheet.state !== PREAMBLE) {
+    currentlyRenderingBoundaryHasStylesToHoist = true;
+    return true;
+  }
+  return false;
+}
+
+export function writeHoistablesForBoundary(
+  destination: Destination,
+  hoistableState: HoistableState,
+  renderState: RenderState,
+): boolean {
+  // Reset these on each invocation, they are only safe to read in this function
+  currentlyRenderingBoundaryHasStylesToHoist = false;
+  destinationHasCapacity = true;
+
+  // Flush style tags for each precedence this boundary depends on
+  currentlyFlushingRenderState = renderState;
+  hoistableState.styles.forEach(flushStyleTagsLateForBoundary, destination);
+  currentlyFlushingRenderState = null;
+
+  // Determine if this boundary has stylesheets that need to be awaited upon completion
+  hoistableState.stylesheets.forEach(hasStylesToHoist);
+
+  // We don't actually want to flush any hoistables until the boundary is complete so we omit
+  // any further writing here. This is becuase unlike Resources, Hoistable Elements act more like
+  // regular elements, each rendered element has a unique representation in the DOM. We don't want
+  // these elements to appear in the DOM early, before the boundary has actually completed
+
+  if (currentlyRenderingBoundaryHasStylesToHoist) {
+    renderState.stylesToHoist = true;
+  }
+  return destinationHasCapacity;
+}
+
+function flushResource(this: Destination, resource: Resource) {
+  for (let i = 0; i < resource.length; i++) {
+    writeChunk(this, resource[i]);
+  }
+  resource.length = 0;
+}
+
+const stylesheetFlushingQueue: Array<Chunk | PrecomputedChunk> = [];
+
+function flushStyleInPreamble(
+  this: Destination,
+  stylesheet: StylesheetResource,
+  key: string,
+  map: Map<string, StylesheetResource>,
+) {
+  // We still need to encode stylesheet chunks
+  // because unlike most Hoistables and Resources we do not eagerly encode
+  // them during render. This is because if we flush late we have to send a
+  // different encoding and we don't want to encode multiple times
+  pushLinkImpl(stylesheetFlushingQueue, stylesheet.props);
+  for (let i = 0; i < stylesheetFlushingQueue.length; i++) {
+    writeChunk(this, stylesheetFlushingQueue[i]);
+  }
+  stylesheetFlushingQueue.length = 0;
+  stylesheet.state = PREAMBLE;
+}
+
+const styleTagResourceOpen1 = stringToPrecomputedChunk(' data-precedence="');
+const styleTagResourceOpen2 = stringToPrecomputedChunk('" data-href="');
+const spaceSeparator = stringToPrecomputedChunk(' ');
+const styleTagResourceOpen3 = stringToPrecomputedChunk('">');
+
+const styleTagResourceClose = stringToPrecomputedChunk('</style>');
+
+function flushStylesInPreamble(
+  this: Destination,
+  styleQueue: StyleQueue,
+  precedence: string,
+) {
+  const hasStylesheets = styleQueue.sheets.size > 0;
+  styleQueue.sheets.forEach(flushStyleInPreamble, this);
+  styleQueue.sheets.clear();
+
+  const rules = styleQueue.rules;
+  const hrefs = styleQueue.hrefs;
+  // If we don't emit any stylesheets at this precedence we still need to maintain the precedence
+  // order so even if there are no rules for style tags at this precedence we emit an empty style
+  // tag with the data-precedence attribute
+  if (!hasStylesheets || hrefs.length) {
+    writeChunk(
+      this,
+      ((currentlyFlushingRenderState: any): RenderState).startInlineStyle,
+    );
+    writeChunk(this, styleTagResourceOpen1);
+    writeChunk(this, styleQueue.precedence);
+    let i = 0;
+    if (hrefs.length) {
+      writeChunk(this, styleTagResourceOpen2);
+      for (; i < hrefs.length - 1; i++) {
+        writeChunk(this, hrefs[i]);
+        writeChunk(this, spaceSeparator);
+      }
+      writeChunk(this, hrefs[i]);
+    }
+    writeChunk(this, styleTagResourceOpen3);
+    for (i = 0; i < rules.length; i++) {
+      writeChunk(this, rules[i]);
+    }
+    writeChunk(this, styleTagResourceClose);
+
+    // style resources can flush continuously since more rules may be written into
+    // them with new hrefs. Instead of marking it flushed, we simply reset the chunks
+    // and hrefs
+    rules.length = 0;
+    hrefs.length = 0;
+  }
+}
+
+function preloadLateStyle(this: Destination, stylesheet: StylesheetResource) {
+  if (stylesheet.state === PENDING) {
+    stylesheet.state = PRELOADED;
+    const preloadProps = preloadAsStylePropsFromProps(
+      stylesheet.props.href,
+      stylesheet.props,
+    );
+    pushLinkImpl(stylesheetFlushingQueue, preloadProps);
+    for (let i = 0; i < stylesheetFlushingQueue.length; i++) {
+      writeChunk(this, stylesheetFlushingQueue[i]);
+    }
+    stylesheetFlushingQueue.length = 0;
+  }
+}
+
+function preloadLateStyles(this: Destination, styleQueue: StyleQueue) {
+  styleQueue.sheets.forEach(preloadLateStyle, this);
+  styleQueue.sheets.clear();
+}
+
+const blockingRenderChunkStart = stringToPrecomputedChunk(
+  '<link rel="expect" href="#',
+);
+const blockingRenderChunkEnd = stringToPrecomputedChunk(
+  '" blocking="render"/>',
+);
+
+function writeBlockingRenderInstruction(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+): void {
+  if (enableFizzBlockingRender) {
+    const idPrefix = resumableState.idPrefix;
+    const shellId = '_' + idPrefix + 'R_';
+    writeChunk(destination, blockingRenderChunkStart);
+    writeChunk(destination, stringToChunk(escapeTextForBrowser(shellId)));
+    writeChunk(destination, blockingRenderChunkEnd);
+  }
+}
+
+const completedShellIdAttributeStart = stringToPrecomputedChunk(' id="');
+
+function writeCompletedShellIdAttribute(
+  destination: Destination,
+  resumableState: ResumableState,
+): void {
+  if ((resumableState.instructions & SentCompletedShellId) !== NothingSent) {
+    return;
+  }
+  resumableState.instructions |= SentCompletedShellId;
+  const idPrefix = resumableState.idPrefix;
+  const shellId = '_' + idPrefix + 'R_';
+  writeChunk(destination, completedShellIdAttributeStart);
+  writeChunk(destination, stringToChunk(escapeTextForBrowser(shellId)));
+  writeChunk(destination, attributeEnd);
+}
+
+function pushCompletedShellIdAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  resumableState: ResumableState,
+): void {
+  if ((resumableState.instructions & SentCompletedShellId) !== NothingSent) {
+    return;
+  }
+  resumableState.instructions |= SentCompletedShellId;
+  const idPrefix = resumableState.idPrefix;
+  const shellId = '_' + idPrefix + 'R_';
+  target.push(
+    completedShellIdAttributeStart,
+    stringToChunk(escapeTextForBrowser(shellId)),
+    attributeEnd,
+  );
+}
+
+// We don't bother reporting backpressure at the moment because we expect to
+// flush the entire preamble in a single pass. This probably should be modified
+// in the future to be backpressure sensitive but that requires a larger refactor
+// of the flushing code in Fizz.
+export function writePreambleStart(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  skipBlockingShell: boolean,
+): void {
+  // This function must be called exactly once on every request
+  if (enableFizzExternalRuntime && renderState.externalRuntimeScript) {
+    // If the root segment is incomplete due to suspended tasks
+    // (e.g. willFlushAllSegments = false) and we are using data
+    // streaming format, ensure the external runtime is sent.
+    // (User code could choose to send this even earlier by calling
+    //  preinit(...), if they know they will suspend).
+    const {src, chunks} = renderState.externalRuntimeScript;
+    internalPreinitScript(resumableState, renderState, src, chunks);
+  }
+
+  const preamble = renderState.preamble;
+
+  const htmlChunks = preamble.htmlChunks;
+  const headChunks = preamble.headChunks;
+
+  let i = 0;
+
+  // Emit open tags before Hoistables and Resources
+  if (htmlChunks) {
+    // We have an <html> to emit as part of the preamble
+    for (i = 0; i < htmlChunks.length; i++) {
+      writeChunk(destination, htmlChunks[i]);
+    }
+    if (headChunks) {
+      for (i = 0; i < headChunks.length; i++) {
+        writeChunk(destination, headChunks[i]);
+      }
+    } else {
+      // We did not render a head but we emitted an <html> so we emit one now
+      writeChunk(destination, startChunkForTag('head'));
+      writeChunk(destination, endOfStartTag);
+    }
+  } else if (headChunks) {
+    // We do not have an <html> but we do have a <head>
+    for (i = 0; i < headChunks.length; i++) {
+      writeChunk(destination, headChunks[i]);
+    }
+  }
+
+  // Emit high priority Hoistables
+  const charsetChunks = renderState.charsetChunks;
+  for (i = 0; i < charsetChunks.length; i++) {
+    writeChunk(destination, charsetChunks[i]);
+  }
+  charsetChunks.length = 0;
+
+  // emit preconnect resources
+  renderState.preconnects.forEach(flushResource, destination);
+  renderState.preconnects.clear();
+
+  const viewportChunks = renderState.viewportChunks;
+  for (i = 0; i < viewportChunks.length; i++) {
+    writeChunk(destination, viewportChunks[i]);
+  }
+  viewportChunks.length = 0;
+
+  renderState.fontPreloads.forEach(flushResource, destination);
+  renderState.fontPreloads.clear();
+
+  renderState.highImagePreloads.forEach(flushResource, destination);
+  renderState.highImagePreloads.clear();
+
+  // Flush unblocked stylesheets by precedence
+  currentlyFlushingRenderState = renderState;
+  renderState.styles.forEach(flushStylesInPreamble, destination);
+  currentlyFlushingRenderState = null;
+
+  const importMapChunks = renderState.importMapChunks;
+  for (i = 0; i < importMapChunks.length; i++) {
+    writeChunk(destination, importMapChunks[i]);
+  }
+  importMapChunks.length = 0;
+
+  renderState.bootstrapScripts.forEach(flushResource, destination);
+
+  renderState.scripts.forEach(flushResource, destination);
+  renderState.scripts.clear();
+
+  renderState.bulkPreloads.forEach(flushResource, destination);
+  renderState.bulkPreloads.clear();
+
+  if ((htmlChunks || headChunks) && !skipBlockingShell) {
+    // If we have any html or head chunks we know that we're rendering a full document.
+    // A full document should block display until the full shell has downloaded.
+    // Therefore we insert a render blocking instruction referring to the last body
+    // element that's considered part of the shell. We do this after the important loads
+    // have already been emitted so we don't do anything to delay them but early so that
+    // the browser doesn't risk painting too early.
+    writeBlockingRenderInstruction(destination, resumableState, renderState);
+  } else {
+    // We don't need to add the shell id so mark it as if sent.
+    // Currently it might still be sent if it was already added to a bootstrap script.
+    resumableState.instructions |= SentCompletedShellId;
+  }
+
+  // Write embedding hoistableChunks
+  const hoistableChunks = renderState.hoistableChunks;
+  for (i = 0; i < hoistableChunks.length; i++) {
+    writeChunk(destination, hoistableChunks[i]);
+  }
+  hoistableChunks.length = 0;
+}
+
+// We don't bother reporting backpressure at the moment because we expect to
+// flush the entire preamble in a single pass. This probably should be modified
+// in the future to be backpressure sensitive but that requires a larger refactor
+// of the flushing code in Fizz.
+export function writePreambleEnd(
+  destination: Destination,
+  renderState: RenderState,
+): void {
+  const preamble = renderState.preamble;
+  const htmlChunks = preamble.htmlChunks;
+  const headChunks = preamble.headChunks;
+  if (htmlChunks || headChunks) {
+    // we have an <html> but we inserted an implicit <head> tag. We need
+    // to close it since the main content won't have it
+    writeChunk(destination, endChunkForTag('head'));
+  }
+
+  const bodyChunks = preamble.bodyChunks;
+  if (bodyChunks) {
+    for (let i = 0; i < bodyChunks.length; i++) {
+      writeChunk(destination, bodyChunks[i]);
+    }
+  }
+}
+
+// We don't bother reporting backpressure at the moment because we expect to
+// flush the entire preamble in a single pass. This probably should be modified
+// in the future to be backpressure sensitive but that requires a larger refactor
+// of the flushing code in Fizz.
+export function writeHoistables(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+): void {
+  let i = 0;
+
+  // Emit high priority Hoistables
+
+  // We omit charsetChunks because we have already sent the shell and if it wasn't
+  // already sent it is too late now.
+
+  const viewportChunks = renderState.viewportChunks;
+  for (i = 0; i < viewportChunks.length; i++) {
+    writeChunk(destination, viewportChunks[i]);
+  }
+  viewportChunks.length = 0;
+
+  renderState.preconnects.forEach(flushResource, destination);
+  renderState.preconnects.clear();
+
+  renderState.fontPreloads.forEach(flushResource, destination);
+  renderState.fontPreloads.clear();
+
+  renderState.highImagePreloads.forEach(flushResource, destination);
+  renderState.highImagePreloads.clear();
+
+  // Preload any stylesheets. these will emit in a render instruction that follows this
+  // but we want to kick off preloading as soon as possible
+  renderState.styles.forEach(preloadLateStyles, destination);
+
+  // We only hoist importmaps that are configured through createResponse and that will
+  // always flush in the preamble. Generally we don't expect people to render them as
+  // tags when using React but if you do they are going to be treated like regular inline
+  // scripts and flush after other hoistables which is problematic
+
+  // bootstrap scripts should flush above script priority but these can only flush in the preamble
+  // so we elide the code here for performance
+
+  renderState.scripts.forEach(flushResource, destination);
+  renderState.scripts.clear();
+
+  renderState.bulkPreloads.forEach(flushResource, destination);
+  renderState.bulkPreloads.clear();
+
+  // Write embedding hoistableChunks
+  const hoistableChunks = renderState.hoistableChunks;
+  for (i = 0; i < hoistableChunks.length; i++) {
+    writeChunk(destination, hoistableChunks[i]);
+  }
+  hoistableChunks.length = 0;
+}
+
+export function writePostamble(
+  destination: Destination,
+  resumableState: ResumableState,
+): void {
+  if (resumableState.hasBody) {
+    writeChunk(destination, endChunkForTag('body'));
+  }
+  if (resumableState.hasHtml) {
+    writeChunk(destination, endChunkForTag('html'));
+  }
+}
+
+const arrayFirstOpenBracket = stringToPrecomputedChunk('[');
+const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
+const arrayInterstitial = stringToPrecomputedChunk(',');
+const arrayCloseBracket = stringToPrecomputedChunk(']');
+
+// This function writes a 2D array of strings to be embedded in javascript.
+// E.g.
+//  [["JS_escaped_string1", "JS_escaped_string2"]]
+function writeStyleResourceDependenciesInJS(
+  destination: Destination,
+  hoistableState: HoistableState,
+): void {
+  writeChunk(destination, arrayFirstOpenBracket);
+
+  let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
+  hoistableState.stylesheets.forEach(resource => {
+    if (resource.state === PREAMBLE) {
+      // We can elide this dependency because it was flushed in the shell and
+      // should be ready before content is shown on the client
+    } else if (resource.state === LATE) {
+      // We only need to emit the href because this resource flushed in an earlier
+      // boundary already which encoded the attributes necessary to construct
+      // the resource instance on the client.
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyHrefOnlyInJS(
+        destination,
+        resource.props.href,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+    } else {
+      // We need to emit the whole resource for insertion on the client
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyInJS(
+        destination,
+        resource.props.href,
+        resource.props['data-precedence'],
+        resource.props,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+
+      resource.state = LATE;
+    }
+  });
+  writeChunk(destination, arrayCloseBracket);
+}
+
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInJS(
+  destination: Destination,
+  href: string,
+) {
+  // We should actually enforce this earlier when the resource is created but for
+  // now we make sure we are actually dealing with a string here.
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
+  }
+  const coercedHref = '' + (href: any);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
+  );
+}
+
+function writeStyleResourceDependencyInJS(
+  destination: Destination,
+  href: mixed,
+  precedence: mixed,
+  props: Object,
+) {
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  const coercedHref = sanitizeURL('' + (href: any));
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
+  );
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(precedence, 'precedence');
+  }
+  const coercedPrecedence = '' + (precedence: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedPrecedence)),
+  );
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'href':
+        case 'rel':
+        case 'precedence':
+        case 'data-precedence': {
+          break;
+        }
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        default:
+          writeStyleResourceAttributeInJS(destination, propKey, propValue);
+          break;
+      }
+    }
+  }
+  return null;
+}
+
+function writeStyleResourceAttributeInJS(
+  destination: Destination,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  let attributeName = name.toLowerCase();
+  let attributeValue;
+  switch (typeof value) {
+    case 'function':
+    case 'symbol':
+      return;
+  }
+
+  switch (name) {
+    // Reserved names
+    case 'innerHTML':
+    case 'dangerouslySetInnerHTML':
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'style':
+    case 'ref':
+      // Ignored
+      return;
+
+    // Attribute renames
+    case 'className': {
+      attributeName = 'class';
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      break;
+    }
+    // Booleans
+    case 'hidden': {
+      if (value === false) {
+        return;
+      }
+      attributeValue = '';
+      break;
+    }
+    // Santized URLs
+    case 'src':
+    case 'href': {
+      value = sanitizeURL(value);
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      break;
+    }
+    default: {
+      if (
+        // unrecognized event handlers are not SSR'd and we (apparently)
+        // use on* as hueristic for these handler props
+        name.length > 2 &&
+        (name[0] === 'o' || name[0] === 'O') &&
+        (name[1] === 'n' || name[1] === 'N')
+      ) {
+        return;
+      }
+      if (!isAttributeNameSafe(name)) {
+        return;
+      }
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+    }
+  }
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(attributeName)),
+  );
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(attributeValue)),
+  );
+}
+
+// This function writes a 2D array of strings to be embedded in an attribute
+// value and read with JSON.parse in ReactDOMServerExternalRuntime.js
+// E.g.
+//  [[&quot;JSON_escaped_string1&quot;, &quot;JSON_escaped_string2&quot;]]
+function writeStyleResourceDependenciesInAttr(
+  destination: Destination,
+  hoistableState: HoistableState,
+): void {
+  writeChunk(destination, arrayFirstOpenBracket);
+
+  let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
+  hoistableState.stylesheets.forEach(resource => {
+    if (resource.state === PREAMBLE) {
+      // We can elide this dependency because it was flushed in the shell and
+      // should be ready before content is shown on the client
+    } else if (resource.state === LATE) {
+      // We only need to emit the href because this resource flushed in an earlier
+      // boundary already which encoded the attributes necessary to construct
+      // the resource instance on the client.
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyHrefOnlyInAttr(
+        destination,
+        resource.props.href,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+    } else {
+      // We need to emit the whole resource for insertion on the client
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyInAttr(
+        destination,
+        resource.props.href,
+        resource.props['data-precedence'],
+        resource.props,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+
+      resource.state = LATE;
+    }
+  });
+  writeChunk(destination, arrayCloseBracket);
+}
+
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInAttr(
+  destination: Destination,
+  href: string,
+) {
+  // We should actually enforce this earlier when the resource is created but for
+  // now we make sure we are actually dealing with a string here.
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
+  }
+  const coercedHref = '' + (href: any);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
+}
+
+function writeStyleResourceDependencyInAttr(
+  destination: Destination,
+  href: mixed,
+  precedence: mixed,
+  props: Object,
+) {
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  const coercedHref = sanitizeURL('' + (href: any));
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(precedence, 'precedence');
+  }
+  const coercedPrecedence = '' + (precedence: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedPrecedence))),
+  );
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'href':
+        case 'rel':
+        case 'precedence':
+        case 'data-precedence': {
+          break;
+        }
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        default:
+          writeStyleResourceAttributeInAttr(destination, propKey, propValue);
+          break;
+      }
+    }
+  }
+  return null;
+}
+
+function writeStyleResourceAttributeInAttr(
+  destination: Destination,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  let attributeName = name.toLowerCase();
+  let attributeValue;
+  switch (typeof value) {
+    case 'function':
+    case 'symbol':
+      return;
+  }
+
+  switch (name) {
+    // Reserved names
+    case 'innerHTML':
+    case 'dangerouslySetInnerHTML':
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'style':
+    case 'ref':
+      // Ignored
+      return;
+
+    // Attribute renames
+    case 'className': {
+      attributeName = 'class';
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      break;
+    }
+
+    // Booleans
+    case 'hidden': {
+      if (value === false) {
+        return;
+      }
+      attributeValue = '';
+      break;
+    }
+
+    // Santized URLs
+    case 'src':
+    case 'href': {
+      value = sanitizeURL(value);
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      break;
+    }
+    default: {
+      if (
+        // unrecognized event handlers are not SSR'd and we (apparently)
+        // use on* as hueristic for these handler props
+        name.length > 2 &&
+        (name[0] === 'o' || name[0] === 'O') &&
+        (name[1] === 'n' || name[1] === 'N')
+      ) {
+        return;
+      }
+      if (!isAttributeNameSafe(name)) {
+        return;
+      }
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+    }
+  }
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeName))),
+  );
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeValue))),
+  );
+}
+
+/**
+ * Resources
+ */
+
+type StylesheetState = 0 | 1 | 2 | 3;
+const PENDING: StylesheetState = 0;
+const PRELOADED: StylesheetState = 1;
+const PREAMBLE: StylesheetState = 2;
+const LATE: StylesheetState = 3;
+
+type PreconnectProps = {
+  rel: 'preconnect' | 'dns-prefetch',
+  href: string,
+  [string]: mixed,
+};
+
+type PreloadAsProps = {
+  rel: 'preload',
+  as: string,
+  href: ?string,
+  [string]: ?string,
+};
+type PreloadModuleProps = {
+  rel: 'modulepreload',
+  href: ?string,
+  [string]: ?string,
+};
+type PreloadProps = PreloadAsProps | PreloadModuleProps;
+
+type ScriptProps = {
+  async: true,
+  src: string,
+  crossOrigin?: ?CrossOriginEnum,
+  [string]: mixed,
+};
+type ModuleScriptProps = {
+  async: true,
+  src: string,
+  type: 'module',
+  crossOrigin?: ?CrossOriginEnum,
+  [string]: mixed,
+};
+
+export type Resource = Array<Chunk | PrecomputedChunk>;
+
+type StylesheetProps = {
+  rel: 'stylesheet',
+  href: string,
+  'data-precedence': string,
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  nonce?: ?string,
+  type?: ?string,
+  fetchPriority?: ?string,
+  referrerPolicy?: ?string,
+  media?: ?string,
+  [string]: mixed,
+};
+type StylesheetResource = {
+  props: StylesheetProps,
+  state: StylesheetState,
+};
+
+export type HoistableState = {
+  styles: Set<StyleQueue>,
+  stylesheets: Set<StylesheetResource>,
+  suspenseyImages: boolean,
+};
+
+export type StyleQueue = {
+  precedence: Chunk | PrecomputedChunk,
+  rules: Array<Chunk | PrecomputedChunk>,
+  hrefs: Array<Chunk | PrecomputedChunk>,
+  sheets: Map<string, StylesheetResource>,
+};
+
+export function createHoistableState(): HoistableState {
+  return {
+    styles: new Set(),
+    stylesheets: new Set(),
+    suspenseyImages: false,
+  };
+}
+
+function getResourceKey(href: string): string {
+  return href;
+}
+
+function getImageResourceKey(
+  href: string,
+  imageSrcSet?: ?string,
+  imageSizes?: ?string,
+): string {
+  if (imageSrcSet) {
+    return imageSrcSet + '\n' + (imageSizes || '');
+  }
+  return href;
+}
+
+function prefetchDNS(href: string) {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.D(/* prefetchDNS */ href);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+
+  if (typeof href === 'string' && href) {
+    const key = getResourceKey(href);
+    if (!resumableState.dnsResources.hasOwnProperty(key)) {
+      resumableState.dnsResources[key] = EXISTS;
+
+      const headers = renderState.headers;
+      let header;
+      if (
+        headers &&
+        headers.remainingCapacity > 0 &&
+        // Compute the header since we might be able to fit it in the max length
+        ((header = getPrefetchDNSAsHeader(href)),
+        // We always consume the header length since once we find one header that doesn't fit
+        // we assume all the rest won't as well. This is to avoid getting into a situation
+        // where we have a very small remaining capacity but no headers will ever fit and we end
+        // up constantly trying to see if the next resource might make it. In the future we can
+        // make this behavior different between render and prerender since in the latter case
+        // we are less sensitive to the current requests runtime per and more sensitive to maximizing
+        // headers.
+        (headers.remainingCapacity -= header.length + 2) >= 0)
+      ) {
+        // Store this as resettable in case we are prerendering and postpone in the Shell
+        renderState.resets.dns[key] = EXISTS;
+        if (headers.preconnects) {
+          headers.preconnects += ', ';
+        }
+        // $FlowFixMe[unsafe-addition]: we assign header during the if condition
+        headers.preconnects += header;
+      } else {
+        // Encode as element
+        const resource: Resource = [];
+        pushLinkImpl(resource, ({href, rel: 'dns-prefetch'}: PreconnectProps));
+        renderState.preconnects.add(resource);
+      }
+    }
+    flushResources(request);
+  }
+}
+
+function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.C(/* preconnect */ href, crossOrigin);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+
+  if (typeof href === 'string' && href) {
+    const bucket =
+      crossOrigin === 'use-credentials'
+        ? 'credentials'
+        : typeof crossOrigin === 'string'
+          ? 'anonymous'
+          : 'default';
+    const key = getResourceKey(href);
+    if (!resumableState.connectResources[bucket].hasOwnProperty(key)) {
+      resumableState.connectResources[bucket][key] = EXISTS;
+
+      const headers = renderState.headers;
+      let header;
+      if (
+        headers &&
+        headers.remainingCapacity > 0 &&
+        // Compute the header since we might be able to fit it in the max length
+        ((header = getPreconnectAsHeader(href, crossOrigin)),
+        // We always consume the header length since once we find one header that doesn't fit
+        // we assume all the rest won't as well. This is to avoid getting into a situation
+        // where we have a very small remaining capacity but no headers will ever fit and we end
+        // up constantly trying to see if the next resource might make it. In the future we can
+        // make this behavior different between render and prerender since in the latter case
+        // we are less sensitive to the current requests runtime per and more sensitive to maximizing
+        // headers.
+        (headers.remainingCapacity -= header.length + 2) >= 0)
+      ) {
+        // Store this in resettableState in case we are prerending and postpone in the Shell
+        renderState.resets.connect[bucket][key] = EXISTS;
+        if (headers.preconnects) {
+          headers.preconnects += ', ';
+        }
+        // $FlowFixMe[unsafe-addition]: we assign header during the if condition
+        headers.preconnects += header;
+      } else {
+        const resource: Resource = [];
+        pushLinkImpl(
+          resource,
+          ({rel: 'preconnect', href, crossOrigin}: PreconnectProps),
+        );
+        renderState.preconnects.add(resource);
+      }
+    }
+    flushResources(request);
+  }
+}
+
+function preload(href: string, as: string, options?: ?PreloadImplOptions) {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.L(/* preload */ href, as, options);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (as && href) {
+    switch (as) {
+      case 'image': {
+        let imageSrcSet, imageSizes, fetchPriority;
+        if (options) {
+          imageSrcSet = options.imageSrcSet;
+          imageSizes = options.imageSizes;
+          fetchPriority = options.fetchPriority;
+        }
+        const key = getImageResourceKey(href, imageSrcSet, imageSizes);
+        if (resumableState.imageResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        resumableState.imageResources[key] = PRELOAD_NO_CREDS;
+
+        const headers = renderState.headers;
+        let header: string;
+        if (
+          headers &&
+          headers.remainingCapacity > 0 &&
+          // browsers today don't support preloading responsive images from link headers so we bail out
+          // if the img has srcset defined
+          typeof imageSrcSet !== 'string' &&
+          // We only include high priority images in the link header
+          fetchPriority === 'high' &&
+          // Compute the header since we might be able to fit it in the max length
+          ((header = getPreloadAsHeader(href, as, options)),
+          // We always consume the header length since once we find one header that doesn't fit
+          // we assume all the rest won't as well. This is to avoid getting into a situation
+          // where we have a very small remaining capacity but no headers will ever fit and we end
+          // up constantly trying to see if the next resource might make it. In the future we can
+          // make this behavior different between render and prerender since in the latter case
+          // we are less sensitive to the current requests runtime per and more sensitive to maximizing
+          // headers.
+          (headers.remainingCapacity -= header.length + 2) >= 0)
+        ) {
+          // If we postpone in the shell we will still emit a preload as a header so we
+          // track this to make sure we don't reset it.
+          renderState.resets.image[key] = PRELOAD_NO_CREDS;
+          if (headers.highImagePreloads) {
+            headers.highImagePreloads += ', ';
+          }
+          // $FlowFixMe[unsafe-addition]: we assign header during the if condition
+          headers.highImagePreloads += header;
+        } else {
+          // If we don't have headers to write to we have to encode as elements to flush in the head
+          // When we have imageSrcSet the browser probably cannot load the right version from headers
+          // (this should be verified by testing). For now we assume these need to go in the head
+          // as elements even if headers are available.
+          const resource = ([]: Resource);
+          pushLinkImpl(
+            resource,
+            Object.assign(
+              ({
+                rel: 'preload',
+                // There is a bug in Safari where imageSrcSet is not respected on preload links
+                // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+                // This harms older browers that do not support imageSrcSet by making their preloads not work
+                // but this population is shrinking fast and is already small so we accept this tradeoff.
+                href: imageSrcSet ? undefined : href,
+                as,
+              }: PreloadAsProps),
+              options,
+            ),
+          );
+          if (fetchPriority === 'high') {
+            renderState.highImagePreloads.add(resource);
+          } else {
+            renderState.bulkPreloads.add(resource);
+            // Stash the resource in case we need to promote it to higher priority
+            // when an img tag is rendered
+            renderState.preloads.images.set(key, resource);
+          }
+        }
+        break;
+      }
+      case 'style': {
+        const key = getResourceKey(href);
+        if (resumableState.styleResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        const resource = ([]: Resource);
+        pushLinkImpl(
+          resource,
+          Object.assign(({rel: 'preload', href, as}: PreloadAsProps), options),
+        );
+        resumableState.styleResources[key] =
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
+            ? [options.crossOrigin, options.integrity]
+            : PRELOAD_NO_CREDS;
+        renderState.preloads.stylesheets.set(key, resource);
+        renderState.bulkPreloads.add(resource);
+        break;
+      }
+      case 'script': {
+        const key = getResourceKey(href);
+        if (resumableState.scriptResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        const resource = ([]: Resource);
+        renderState.preloads.scripts.set(key, resource);
+        renderState.bulkPreloads.add(resource);
+        pushLinkImpl(
+          resource,
+          Object.assign(({rel: 'preload', href, as}: PreloadAsProps), options),
+        );
+        resumableState.scriptResources[key] =
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
+            ? [options.crossOrigin, options.integrity]
+            : PRELOAD_NO_CREDS;
+        break;
+      }
+      default: {
+        const key = getResourceKey(href);
+        const hasAsType = resumableState.unknownResources.hasOwnProperty(as);
+        let resources;
+        if (hasAsType) {
+          resources = resumableState.unknownResources[as];
+          if (resources.hasOwnProperty(key)) {
+            // we can return if we already have this resource
+            return;
+          }
+        } else {
+          resources = ({}: ResumableState['unknownResources']['asType']);
+          resumableState.unknownResources[as] = resources;
+        }
+        resources[key] = PRELOAD_NO_CREDS;
+
+        const headers = renderState.headers;
+        let header;
+        if (
+          headers &&
+          headers.remainingCapacity > 0 &&
+          as === 'font' &&
+          // We compute the header here because we might be able to fit it in the max length
+          ((header = getPreloadAsHeader(href, as, options)),
+          // We always consume the header length since once we find one header that doesn't fit
+          // we assume all the rest won't as well. This is to avoid getting into a situation
+          // where we have a very small remaining capacity but no headers will ever fit and we end
+          // up constantly trying to see if the next resource might make it. In the future we can
+          // make this behavior different between render and prerender since in the latter case
+          // we are less sensitive to the current requests runtime per and more sensitive to maximizing
+          // headers.
+          (headers.remainingCapacity -= header.length + 2) >= 0)
+        ) {
+          // If we postpone in the shell we will still emit this preload so we
+          // track it here to prevent it from being reset.
+          renderState.resets.font[key] = PRELOAD_NO_CREDS;
+          if (headers.fontPreloads) {
+            headers.fontPreloads += ', ';
+          }
+          // $FlowFixMe[unsafe-addition]: we assign header during the if condition
+          headers.fontPreloads += header;
+        } else {
+          // We either don't have headers or we are preloading something that does
+          // not warrant elevated priority so we encode as an element.
+          const resource = ([]: Resource);
+          const props = Object.assign(
+            ({
+              rel: 'preload',
+              href,
+              as,
+            }: PreloadAsProps),
+            options,
+          );
+          pushLinkImpl(resource, props);
+          switch (as) {
+            case 'font':
+              renderState.fontPreloads.add(resource);
+              break;
+            // intentional fall through
+            default:
+              renderState.bulkPreloads.add(resource);
+          }
+        }
+      }
+    }
+    // If we got this far we created a new resource
+    flushResources(request);
+  }
+}
+
+function preloadModule(
+  href: string,
+  options?: ?PreloadModuleImplOptions,
+): void {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.m(/* preloadModule */ href, options);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (href) {
+    const key = getResourceKey(href);
+    const as =
+      options && typeof options.as === 'string' ? options.as : 'script';
+
+    let resource;
+    switch (as) {
+      case 'script': {
+        if (resumableState.moduleScriptResources.hasOwnProperty(key)) {
+          // we can return if we already have this resource
+          return;
+        }
+        resource = ([]: Resource);
+        resumableState.moduleScriptResources[key] =
+          options &&
+          (typeof options.crossOrigin === 'string' ||
+            typeof options.integrity === 'string')
+            ? [options.crossOrigin, options.integrity]
+            : PRELOAD_NO_CREDS;
+        renderState.preloads.moduleScripts.set(key, resource);
+        break;
+      }
+      default: {
+        const hasAsType =
+          resumableState.moduleUnknownResources.hasOwnProperty(as);
+        let resources;
+        if (hasAsType) {
+          resources = resumableState.unknownResources[as];
+          if (resources.hasOwnProperty(key)) {
+            // we can return if we already have this resource
+            return;
+          }
+        } else {
+          resources = ({}: ResumableState['moduleUnknownResources']['asType']);
+          resumableState.moduleUnknownResources[as] = resources;
+        }
+        resource = ([]: Resource);
+        resources[key] = PRELOAD_NO_CREDS;
+      }
+    }
+
+    pushLinkImpl(
+      resource,
+      Object.assign(
+        ({
+          rel: 'modulepreload',
+          href,
+        }: PreloadModuleProps),
+        options,
+      ),
+    );
+    renderState.bulkPreloads.add(resource);
+    // If we got this far we created a new resource
+    flushResources(request);
+  }
+}
+
+function preinitStyle(
+  href: string,
+  precedence: ?string,
+  options?: ?PreinitStyleOptions,
+): void {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.S(/* preinitStyle */ href, precedence, options);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (href) {
+    precedence = precedence || 'default';
+    const key = getResourceKey(href);
+
+    let styleQueue = renderState.styles.get(precedence);
+    const hasKey = resumableState.styleResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.styleResources[key]
+      : undefined;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.styleResources[key] = EXISTS;
+
+      // If this is the first time we've encountered this precedence we need
+      // to create a StyleQueue
+      if (!styleQueue) {
+        styleQueue = {
+          precedence: stringToChunk(escapeTextForBrowser(precedence)),
+          rules: ([]: Array<Chunk | PrecomputedChunk>),
+          hrefs: ([]: Array<Chunk | PrecomputedChunk>),
+          sheets: (new Map(): Map<string, StylesheetResource>),
+        };
+        renderState.styles.set(precedence, styleQueue);
+      }
+
+      const resource = {
+        state: PENDING,
+        props: Object.assign(
+          ({
+            rel: 'stylesheet',
+            href,
+            'data-precedence': precedence,
+          }: StylesheetProps),
+          options,
+        ),
+      };
+
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          adoptPreloadCredentials(resource.props, preloadState);
+        }
+
+        const preloadResource = renderState.preloads.stylesheets.get(key);
+        if (preloadResource && preloadResource.length > 0) {
+          // The Preload for this resource was created in this render pass and has not flushed yet so
+          // we need to clear it to avoid it flushing.
+          preloadResource.length = 0;
+        } else {
+          // Either the preload resource from this render already flushed in this render pass
+          // or the preload flushed in a prior pass (prerender). In either case we need to mark
+          // this resource as already having been preloaded.
+          resource.state = PRELOADED;
+        }
+      } else {
+        // We don't need to check whether a preloadResource exists in the renderState
+        // because if it did exist then the resourceState would also exist and we would
+        // have hit the primary if condition above.
+      }
+
+      // We add the newly created resource to our StyleQueue and if necessary
+      // track the resource with the currently rendering boundary
+      styleQueue.sheets.set(key, resource);
+
+      // Notify the request that there are resources to flush even if no work is currently happening
+      flushResources(request);
+    }
+  }
+}
+
+function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.X(/* preinitScript */ src, options);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (src) {
+    const key = getResourceKey(src);
+
+    const hasKey = resumableState.scriptResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.scriptResources[key]
+      : undefined;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.scriptResources[key] = EXISTS;
+
+      const props: ScriptProps = Object.assign(
+        ({
+          src,
+          async: true,
+        }: ScriptProps),
+        options,
+      );
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          adoptPreloadCredentials(props, preloadState);
+        }
+
+        const preloadResource = renderState.preloads.scripts.get(key);
+        if (preloadResource) {
+          // the preload resource exists was created in this render. Now that we have
+          // a script resource which will emit earlier than a preload would if it
+          // hasn't already flushed we prevent it from flushing by zeroing the length
+          preloadResource.length = 0;
+        }
+      }
+
+      const resource: Resource = [];
+      // Add to the script flushing queue
+      renderState.scripts.add(resource);
+      // encode the tag as Chunks
+      pushScriptImpl(resource, props);
+      // Notify the request that there are resources to flush even if no work is currently happening
+      flushResources(request);
+    }
+    return;
+  }
+}
+
+function preinitModuleScript(
+  src: string,
+  options?: ?PreinitModuleScriptOptions,
+): void {
+  const request = resolveRequest();
+  if (!request) {
+    // In async contexts we can sometimes resolve resources from AsyncLocalStorage. If we can't we can also
+    // possibly get them from the stack if we are not in an async context. Since we were not able to resolve
+    // the resources for this call in either case we opt to do nothing. We can consider making this a warning
+    // but there may be times where calling a function outside of render is intentional (i.e. to warm up data
+    // fetching) and we don't want to warn in those cases.
+    previousDispatcher.M(/* preinitModuleScript */ src, options);
+    return;
+  }
+  const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
+  if (src) {
+    const key = getResourceKey(src);
+    const hasKey = resumableState.moduleScriptResources.hasOwnProperty(key);
+    const resourceState = hasKey
+      ? resumableState.moduleScriptResources[key]
+      : undefined;
+    if (resourceState !== EXISTS) {
+      // We are going to create this resource now so it is marked as Exists
+      resumableState.moduleScriptResources[key] = EXISTS;
+
+      const props = Object.assign(
+        ({
+          src,
+          type: 'module',
+          async: true,
+        }: ModuleScriptProps),
+        options,
+      );
+      if (resourceState) {
+        // When resourceState is truty it is a Preload state. We cast it for clarity
+        const preloadState: Preloaded | PreloadedWithCredentials =
+          resourceState;
+        if (preloadState.length === 2) {
+          adoptPreloadCredentials(props, preloadState);
+        }
+
+        const preloadResource = renderState.preloads.moduleScripts.get(key);
+        if (preloadResource) {
+          // the preload resource exists was created in this render. Now that we have
+          // a script resource which will emit earlier than a preload would if it
+          // hasn't already flushed we prevent it from flushing by zeroing the length
+          preloadResource.length = 0;
+        }
+      }
+
+      const resource: Resource = [];
+      // Add to the script flushing queue
+      renderState.scripts.add(resource);
+      // encode the tag as Chunks
+      pushScriptImpl(resource, props);
+      // Notify the request that there are resources to flush even if no work is currently happening
+      flushResources(request);
+    }
+    return;
+  }
+}
+
+// This function is only safe to call at Request start time since it assumes
+// that each module has not already been preloaded. If we find a need to preload
+// scripts at any other point in time we will need to check whether the preload
+// already exists and not assume it
+function preloadBootstrapScriptOrModule(
+  resumableState: ResumableState,
+  renderState: RenderState,
+  href: string,
+  props: PreloadProps,
+): void {
+  const key = getResourceKey(href);
+
+  if (__DEV__) {
+    if (
+      resumableState.scriptResources.hasOwnProperty(key) ||
+      resumableState.moduleScriptResources.hasOwnProperty(key)
+    ) {
+      // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
+      // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
+      // rather than instruct the user to not preload their bootstrap scripts themselves
+      console.error(
+        'Internal React Error: React expected bootstrap script or module with src "%s" to not have been preloaded already. please file an issue',
+        href,
+      );
+    }
+  }
+
+  // The href used for bootstrap scripts and bootstrap modules should never be
+  // used to preinit the resource. If a script can be preinited then it shouldn't
+  // be a bootstrap script/module and if it is a bootstrap script/module then it
+  // must not be safe to emit early. To avoid possibly allowing for preinits of
+  // bootstrap scripts/modules we occlude these keys.
+  resumableState.scriptResources[key] = EXISTS;
+  resumableState.moduleScriptResources[key] = EXISTS;
+
+  const resource: Resource = [];
+  pushLinkImpl(resource, props);
+  renderState.bootstrapScripts.add(resource);
+}
+
+function internalPreinitScript(
+  resumableState: ResumableState,
+  renderState: RenderState,
+  src: string,
+  chunks: Array<Chunk | PrecomputedChunk>,
+): void {
+  const key = getResourceKey(src);
+  if (!resumableState.scriptResources.hasOwnProperty(key)) {
+    const resource: Resource = chunks;
+    resumableState.scriptResources[key] = EXISTS;
+    renderState.scripts.add(resource);
+  }
+  return;
+}
+
+function preloadAsStylePropsFromProps(href: string, props: any): PreloadProps {
+  return {
+    rel: 'preload',
+    as: 'style',
+    href: href,
+    crossOrigin: props.crossOrigin,
+    fetchPriority: props.fetchPriority,
+    integrity: props.integrity,
+    media: props.media,
+    hrefLang: props.hrefLang,
+    referrerPolicy: props.referrerPolicy,
+  };
+}
+
+function stylesheetPropsFromRawProps(rawProps: any): StylesheetProps {
+  return {
+    ...rawProps,
+    'data-precedence': rawProps.precedence,
+    precedence: null,
+  };
+}
+
+function adoptPreloadCredentials(
+  target: StylesheetProps | ScriptProps | ModuleScriptProps,
+  preloadState: PreloadedWithCredentials,
+): void {
+  if (target.crossOrigin == null) target.crossOrigin = preloadState[0];
+  if (target.integrity == null) target.integrity = preloadState[1];
+}
+
+function getPrefetchDNSAsHeader(href: string): string {
+  const escapedHref = escapeHrefForLinkHeaderURLContext(href);
+  return `<${escapedHref}>; rel=dns-prefetch`;
+}
+
+function getPreconnectAsHeader(
+  href: string,
+  crossOrigin?: ?CrossOriginEnum,
+): string {
+  const escapedHref = escapeHrefForLinkHeaderURLContext(href);
+  let value = `<${escapedHref}>; rel=preconnect`;
+  if (typeof crossOrigin === 'string') {
+    const escapedCrossOrigin = escapeStringForLinkHeaderQuotedParamValueContext(
+      crossOrigin,
+      'crossOrigin',
+    );
+    value += `; crossorigin="${escapedCrossOrigin}"`;
+  }
+  return value;
+}
+
+function getPreloadAsHeader(
+  href: string,
+  as: string,
+  params: ?PreloadImplOptions,
+): string {
+  const escapedHref = escapeHrefForLinkHeaderURLContext(href);
+  const escapedAs = escapeStringForLinkHeaderQuotedParamValueContext(as, 'as');
+  let value = `<${escapedHref}>; rel=preload; as="${escapedAs}"`;
+  for (const paramName in params) {
+    if (hasOwnProperty.call(params, paramName)) {
+      // $FlowFixMe[invalid-computed-prop]
+      const paramValue = params[paramName];
+      if (typeof paramValue === 'string') {
+        value += `; ${paramName.toLowerCase()}="${escapeStringForLinkHeaderQuotedParamValueContext(
+          paramValue,
+          paramName,
+        )}"`;
+      }
+    }
+  }
+  return value;
+}
+
+function getStylesheetPreloadAsHeader(stylesheet: StylesheetResource): string {
+  const props = stylesheet.props;
+  const preloadOptions: PreloadImplOptions = {
+    crossOrigin: props.crossOrigin,
+    integrity: props.integrity,
+    nonce: props.nonce,
+    type: props.type,
+    fetchPriority: props.fetchPriority,
+    referrerPolicy: props.referrerPolicy,
+    media: props.media,
+  };
+  return getPreloadAsHeader(props.href, 'style', preloadOptions);
+}
+
+// This escaping function is only safe to use for href values being written into
+// a "Link" header in between `<` and `>` characters. The primary concern with the href is
+// to escape the bounding characters as well as new lines. This is unsafe to use in any other
+// context
+const regexForHrefInLinkHeaderURLContext = /[<>\r\n]/g;
+function escapeHrefForLinkHeaderURLContext(hrefInput: string): string {
+  if (__DEV__) {
+    checkAttributeStringCoercion(hrefInput, 'href');
+  }
+  const coercedHref = '' + hrefInput;
+  return coercedHref.replace(
+    regexForHrefInLinkHeaderURLContext,
+    escapeHrefForLinkHeaderURLContextReplacer,
+  );
+}
+function escapeHrefForLinkHeaderURLContextReplacer(match: string): string {
+  switch (match) {
+    case '<':
+      return '%3C';
+    case '>':
+      return '%3E';
+    case '\n':
+      return '%0A';
+    case '\r':
+      return '%0D';
+    default: {
+      // eslint-disable-next-line react-internal/prod-error-codes
+      throw new Error(
+        'escapeLinkHrefForHeaderContextReplacer encountered a match it does not know how to replace. this means the match regex and the replacement characters are no longer in sync. This is a bug in React',
+      );
+    }
+  }
+}
+
+// This escaping function is only safe to use for quoted param values in an HTTP header.
+// It is unsafe to use for any value not inside quote marks in parater value position.
+const regexForLinkHeaderQuotedParamValueContext = /["';,\r\n]/g;
+function escapeStringForLinkHeaderQuotedParamValueContext(
+  value: string,
+  name: string,
+): string {
+  if (__DEV__) {
+    checkOptionStringCoercion(value, name);
+  }
+  const coerced = '' + value;
+  return coerced.replace(
+    regexForLinkHeaderQuotedParamValueContext,
+    escapeStringForLinkHeaderQuotedParamValueContextReplacer,
+  );
+}
+function escapeStringForLinkHeaderQuotedParamValueContextReplacer(
+  match: string,
+): string {
+  switch (match) {
+    case '"':
+      return '%22';
+    case "'":
+      return '%27';
+    case ';':
+      return '%3B';
+    case ',':
+      return '%2C';
+    case '\n':
+      return '%0A';
+    case '\r':
+      return '%0D';
+    default: {
+      // eslint-disable-next-line react-internal/prod-error-codes
+      throw new Error(
+        'escapeStringForLinkHeaderQuotedParamValueContextReplacer encountered a match it does not know how to replace. this means the match regex and the replacement characters are no longer in sync. This is a bug in React',
+      );
+    }
+  }
+}
+
+function hoistStyleQueueDependency(
+  this: HoistableState,
+  styleQueue: StyleQueue,
+) {
+  this.styles.add(styleQueue);
+}
+
+function hoistStylesheetDependency(
+  this: HoistableState,
+  stylesheet: StylesheetResource,
+) {
+  this.stylesheets.add(stylesheet);
+}
+
+export function hoistHoistables(
+  parentState: HoistableState,
+  childState: HoistableState,
+): void {
+  childState.styles.forEach(hoistStyleQueueDependency, parentState);
+  childState.stylesheets.forEach(hoistStylesheetDependency, parentState);
+  if (childState.suspenseyImages) {
+    // If the child has suspensey images, the parent now does too if it's inlined.
+    // Similarly, if a SuspenseList row has a suspensey image then effectively
+    // the next row should be blocked on it as well since the next row can't show
+    // earlier. In practice, since the child will be outlined this transferring
+    // may never matter but is conceptually correct.
+    parentState.suspenseyImages = true;
+  }
+}
+
+export function hasSuspenseyContent(hoistableState: HoistableState): boolean {
+  return hoistableState.stylesheets.size > 0 || hoistableState.suspenseyImages;
+}
+
+// This function is called at various times depending on whether we are rendering
+// or prerendering. In this implementation we only actually emit headers once and
+// subsequent calls are ignored. We track whether the request has a completed shell
+// to determine whether we will follow headers with a flush including stylesheets.
+// In the context of prerrender we don't have a completed shell when the request finishes
+// with a postpone in the shell. In the context of a render we don't have a completed shell
+// if this is called before the shell finishes rendering which usually will happen anytime
+// anything suspends in the shell.
+export function emitEarlyPreloads(
+  renderState: RenderState,
+  resumableState: ResumableState,
+  shellComplete: boolean,
+): void {
+  const onHeaders = renderState.onHeaders;
+  if (onHeaders) {
+    const headers = renderState.headers;
+    if (headers) {
+      // Even if onHeaders throws we don't want to call this again so
+      // we drop the headers state from this point onwards.
+      renderState.headers = null;
+
+      let linkHeader = headers.preconnects;
+      if (headers.fontPreloads) {
+        if (linkHeader) {
+          linkHeader += ', ';
+        }
+        linkHeader += headers.fontPreloads;
+      }
+      if (headers.highImagePreloads) {
+        if (linkHeader) {
+          linkHeader += ', ';
+        }
+        linkHeader += headers.highImagePreloads;
+      }
+
+      if (!shellComplete) {
+        // We use raw iterators because we want to be able to halt iteration
+        // We could refactor renderState to store these dually in arrays to
+        // make this more efficient at the cost of additional memory and
+        // write overhead. However this code only runs once per request so
+        // for now I consider this sufficient.
+        const queueIter = renderState.styles.values();
+        outer: for (
+          let queueStep = queueIter.next();
+          headers.remainingCapacity > 0 && !queueStep.done;
+          queueStep = queueIter.next()
+        ) {
+          const sheets = queueStep.value.sheets;
+          const sheetIter = sheets.values();
+          for (
+            let sheetStep = sheetIter.next();
+            headers.remainingCapacity > 0 && !sheetStep.done;
+            sheetStep = sheetIter.next()
+          ) {
+            const sheet = sheetStep.value;
+            const props = sheet.props;
+            const key = getResourceKey(props.href);
+
+            const header = getStylesheetPreloadAsHeader(sheet);
+            // We mutate the capacity b/c we don't want to keep checking if later headers will fit.
+            // This means that a particularly long header might close out the header queue where later
+            // headers could still fit. We could in the future alter the behavior here based on prerender vs render
+            // since during prerender we aren't as concerned with pure runtime performance.
+            if ((headers.remainingCapacity -= header.length + 2) >= 0) {
+              renderState.resets.style[key] = PRELOAD_NO_CREDS;
+              if (linkHeader) {
+                linkHeader += ', ';
+              }
+              linkHeader += header;
+
+              // We already track that the resource exists in resumableState however
+              // if the resumableState resets because we postponed in the shell
+              // which is what is happening in this branch if we are prerendering
+              // then we will end up resetting the resumableState. When it resets we
+              // want to record the fact that this stylesheet was already preloaded
+              renderState.resets.style[key] =
+                typeof props.crossOrigin === 'string' ||
+                typeof props.integrity === 'string'
+                  ? [props.crossOrigin, props.integrity]
+                  : PRELOAD_NO_CREDS;
+            } else {
+              break outer;
+            }
+          }
+        }
+      }
+      if (linkHeader) {
+        onHeaders({
+          Link: linkHeader,
+        });
+      } else {
+        // We still call this with no headers because a user may be using it as a signal that
+        // it React will not provide any headers
+        onHeaders({});
+      }
+      return;
+    }
+  }
+}
+
+export type TransitionStatus = FormStatus;
+export const NotPendingTransition: TransitionStatus = NotPending;
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
new file mode 100644
index 00000000000..d48e9a8dd93
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -0,0 +1,335 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  RenderState as BaseRenderState,
+  ResumableState,
+  HoistableState,
+  StyleQueue,
+  Resource,
+  HeadersDescriptor,
+  PreambleState,
+  FormatContext,
+} from './ReactFizzConfigDOM';
+
+import {
+  createRenderState as createRenderStateImpl,
+  pushTextInstance as pushTextInstanceImpl,
+  pushSegmentFinale as pushSegmentFinaleImpl,
+  pushStartActivityBoundary as pushStartActivityBoundaryImpl,
+  pushEndActivityBoundary as pushEndActivityBoundaryImpl,
+  writeStartCompletedSuspenseBoundary as writeStartCompletedSuspenseBoundaryImpl,
+  writeStartClientRenderedSuspenseBoundary as writeStartClientRenderedSuspenseBoundaryImpl,
+  writeEndCompletedSuspenseBoundary as writeEndCompletedSuspenseBoundaryImpl,
+  writeEndClientRenderedSuspenseBoundary as writeEndClientRenderedSuspenseBoundaryImpl,
+  writePreambleStart as writePreambleStartImpl,
+} from './ReactFizzConfigDOM';
+
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import type {FormStatus} from '../shared/ReactDOMFormActions';
+
+import {NotPending} from '../shared/ReactDOMFormActions';
+
+export const isPrimaryRenderer = false;
+
+export type RenderState = {
+  // Keep this in sync with ReactFizzConfigDOM
+  placeholderPrefix: PrecomputedChunk,
+  segmentPrefix: PrecomputedChunk,
+  boundaryPrefix: PrecomputedChunk,
+  startInlineScript: PrecomputedChunk,
+  startInlineStyle: PrecomputedChunk,
+  preamble: PreambleState,
+  externalRuntimeScript: null | any,
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
+  importMapChunks: Array<Chunk | PrecomputedChunk>,
+  onHeaders: void | ((headers: HeadersDescriptor) => void),
+  headers: null | {
+    preconnects: string,
+    fontPreloads: string,
+    highImagePreloads: string,
+    remainingCapacity: number,
+  },
+  resets: BaseRenderState['resets'],
+  charsetChunks: Array<Chunk | PrecomputedChunk>,
+  viewportChunks: Array<Chunk | PrecomputedChunk>,
+  hoistableChunks: Array<Chunk | PrecomputedChunk>,
+  preconnects: Set<Resource>,
+  fontPreloads: Set<Resource>,
+  highImagePreloads: Set<Resource>,
+  // usedImagePreloads: Set<Resource>,
+  styles: Map<string, StyleQueue>,
+  bootstrapScripts: Set<Resource>,
+  scripts: Set<Resource>,
+  bulkPreloads: Set<Resource>,
+  preloads: {
+    images: Map<string, Resource>,
+    stylesheets: Map<string, Resource>,
+    scripts: Map<string, Resource>,
+    moduleScripts: Map<string, Resource>,
+  },
+  nonce: {
+    script: string | void,
+    style: string | void,
+  },
+  stylesToHoist: boolean,
+  // This is an extra field for the legacy renderer
+  generateStaticMarkup: boolean,
+};
+
+export function createRenderState(
+  resumableState: ResumableState,
+  generateStaticMarkup: boolean,
+): RenderState {
+  const renderState = createRenderStateImpl(
+    resumableState,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  );
+  return {
+    // Keep this in sync with ReactFizzConfigDOM
+    placeholderPrefix: renderState.placeholderPrefix,
+    segmentPrefix: renderState.segmentPrefix,
+    boundaryPrefix: renderState.boundaryPrefix,
+    startInlineScript: renderState.startInlineScript,
+    startInlineStyle: renderState.startInlineStyle,
+    preamble: renderState.preamble,
+    externalRuntimeScript: renderState.externalRuntimeScript,
+    bootstrapChunks: renderState.bootstrapChunks,
+    importMapChunks: renderState.importMapChunks,
+    onHeaders: renderState.onHeaders,
+    headers: renderState.headers,
+    resets: renderState.resets,
+    charsetChunks: renderState.charsetChunks,
+    viewportChunks: renderState.viewportChunks,
+    hoistableChunks: renderState.hoistableChunks,
+    preconnects: renderState.preconnects,
+    fontPreloads: renderState.fontPreloads,
+    highImagePreloads: renderState.highImagePreloads,
+    // usedImagePreloads: renderState.usedImagePreloads,
+    styles: renderState.styles,
+    bootstrapScripts: renderState.bootstrapScripts,
+    scripts: renderState.scripts,
+    bulkPreloads: renderState.bulkPreloads,
+    preloads: renderState.preloads,
+    nonce: renderState.nonce,
+    stylesToHoist: renderState.stylesToHoist,
+
+    // This is an extra field for the legacy renderer
+    generateStaticMarkup,
+  };
+}
+
+import {
+  stringToChunk,
+  stringToPrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+// this chunk is empty on purpose because we do not want to emit the DOCTYPE in legacy mode
+export const doctypeChunk: PrecomputedChunk = stringToPrecomputedChunk('');
+
+export type {
+  ResumableState,
+  HoistableState,
+  PreambleState,
+  FormatContext,
+} from './ReactFizzConfigDOM';
+
+export {
+  getChildFormatContext,
+  getSuspenseFallbackFormatContext,
+  getSuspenseContentFormatContext,
+  makeId,
+  pushStartInstance,
+  pushEndInstance,
+  pushFormStateMarkerIsMatching,
+  pushFormStateMarkerIsNotMatching,
+  writeStartSegment,
+  writeEndSegment,
+  writeCompletedSegmentInstruction,
+  writeCompletedBoundaryInstruction,
+  writeClientRenderBoundaryInstruction,
+  writeStartPendingSuspenseBoundary,
+  writeEndPendingSuspenseBoundary,
+  writeHoistablesForBoundary,
+  writePlaceholder,
+  writeCompletedRoot,
+  createRootFormatContext,
+  createResumableState,
+  createPreambleState,
+  createHoistableState,
+  writePreambleEnd,
+  writeHoistables,
+  writePostamble,
+  hoistHoistables,
+  resetResumableState,
+  completeResumableState,
+  emitEarlyPreloads,
+  supportsClientAPIs,
+  hoistPreambleState,
+  isPreambleReady,
+  isPreambleContext,
+} from './ReactFizzConfigDOM';
+
+import escapeTextForBrowser from './escapeTextForBrowser';
+
+export function getViewTransitionFormatContext(
+  resumableState: ResumableState,
+  parentContext: FormatContext,
+  update: void | null | 'none' | 'auto' | string,
+  enter: void | null | 'none' | 'auto' | string,
+  exit: void | null | 'none' | 'auto' | string,
+  share: void | null | 'none' | 'auto' | string,
+  name: void | null | 'auto' | string,
+  autoName: string, // name or an autogenerated unique name
+): FormatContext {
+  // ViewTransition reveals are not supported in legacy renders.
+  return parentContext;
+}
+
+export function canHavePreamble(formatContext: FormatContext): boolean {
+  return false;
+}
+
+export function pushTextInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  text: string,
+  renderState: RenderState,
+  textEmbedded: boolean,
+): boolean {
+  if (renderState.generateStaticMarkup) {
+    target.push(stringToChunk(escapeTextForBrowser(text)));
+    return false;
+  } else {
+    return pushTextInstanceImpl(target, text, renderState, textEmbedded);
+  }
+}
+
+export function pushSegmentFinale(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): void {
+  if (renderState.generateStaticMarkup) {
+    return;
+  } else {
+    return pushSegmentFinaleImpl(
+      target,
+      renderState,
+      lastPushedText,
+      textEmbedded,
+    );
+  }
+}
+
+export function pushStartActivityBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+): void {
+  if (renderState.generateStaticMarkup) {
+    // A completed boundary is done and doesn't need a representation in the HTML
+    // if we're not going to be hydrating it.
+    return;
+  }
+  pushStartActivityBoundaryImpl(target, renderState);
+}
+
+export function pushEndActivityBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+): void {
+  if (renderState.generateStaticMarkup) {
+    return;
+  }
+  pushEndActivityBoundaryImpl(target, renderState);
+}
+
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  if (renderState.generateStaticMarkup) {
+    // A completed boundary is done and doesn't need a representation in the HTML
+    // if we're not going to be hydrating it.
+    return true;
+  }
+  return writeStartCompletedSuspenseBoundaryImpl(destination, renderState);
+}
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+  // flushing these error arguments are not currently supported in this legacy streaming format.
+  errorDigest: ?string,
+  errorMessage: ?string,
+  errorStack: ?string,
+  errorComponentStack: ?string,
+): boolean {
+  if (renderState.generateStaticMarkup) {
+    // A client rendered boundary is done and doesn't need a representation in the HTML
+    // since we'll never hydrate it. This is arguably an error in static generation.
+    return true;
+  }
+  return writeStartClientRenderedSuspenseBoundaryImpl(
+    destination,
+    renderState,
+    errorDigest,
+    errorMessage,
+    errorStack,
+    errorComponentStack,
+  );
+}
+export function writeEndCompletedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  if (renderState.generateStaticMarkup) {
+    return true;
+  }
+  return writeEndCompletedSuspenseBoundaryImpl(destination, renderState);
+}
+export function writeEndClientRenderedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  if (renderState.generateStaticMarkup) {
+    return true;
+  }
+  return writeEndClientRenderedSuspenseBoundaryImpl(destination, renderState);
+}
+
+export function writePreambleStart(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  skipBlockingShell: boolean,
+): void {
+  return writePreambleStartImpl(
+    destination,
+    resumableState,
+    renderState,
+    true, // skipBlockingShell
+  );
+}
+
+export function hasSuspenseyContent(hoistableState: HoistableState): boolean {
+  // Never outline.
+  return false;
+}
+
+export type TransitionStatus = FormStatus;
+export const NotPendingTransition: TransitionStatus = NotPending;
diff --git a/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js
new file mode 100644
index 00000000000..e5c1c22c190
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js
@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  CrossOriginEnum,
+  PreloadImplOptions,
+  PreloadModuleImplOptions,
+  PreinitStyleOptions,
+  PreinitScriptOptions,
+  PreinitModuleScriptOptions,
+} from 'react-dom/src/shared/ReactDOMTypes';
+
+// This module registers the host dispatcher so it needs to be imported
+// even if no exports are used.
+import {preload, preloadModule} from './ReactDOMFlightServerHostDispatcher';
+
+import {getCrossOriginString} from '../shared/crossOriginStrings';
+
+// We use zero to represent the absence of an explicit precedence because it is
+// small, smaller than how we encode undefined, and is unambiguous. We could use
+// a different tuple structure to encode this instead but this makes the runtime
+// cost cheaper by eliminating a type checks in more positions.
+type UnspecifiedPrecedence = 0;
+
+// prettier-ignore
+type TypeMap = {
+  // prefetchDNS(href)
+  'D': /* href */ string,
+  // preconnect(href, options)
+  'C':
+    | /* href */ string
+    | [/* href */ string, CrossOriginEnum],
+  // preconnect(href, options)
+  'L':
+    | [/* href */ string, /* as */ string]
+    | [/* href */ string, /* as */ string, PreloadImplOptions],
+  'm':
+    | /* href */ string
+    | [/* href */ string, PreloadModuleImplOptions],
+  'S':
+    | /* href */ string
+    | [/* href */ string, /* precedence */ string]
+    | [/* href */ string, /* precedence */ string | UnspecifiedPrecedence, PreinitStyleOptions],
+  'X':
+    | /* href */ string
+    | [/* href */ string, PreinitScriptOptions],
+  'M':
+    | /* href */ string
+    | [/* href */ string, PreinitModuleScriptOptions],
+}
+
+export type HintCode = $Keys<TypeMap>;
+export type HintModel<T: HintCode> = TypeMap[T];
+
+export type Hints = Set<string>;
+
+export function createHints(): Hints {
+  return new Set();
+}
+
+const NO_SCOPE = /*         */ 0b000000;
+const NOSCRIPT_SCOPE = /*   */ 0b000001;
+const PICTURE_SCOPE = /*    */ 0b000010;
+
+export opaque type FormatContext = number;
+
+export function createRootFormatContext(): FormatContext {
+  return NO_SCOPE;
+}
+
+function processImg(props: Object, formatContext: FormatContext): void {
+  // This should mirror the logic of pushImg in ReactFizzConfigDOM.
+  const pictureOrNoScriptTagInScope =
+    formatContext & (PICTURE_SCOPE | NOSCRIPT_SCOPE);
+  const {src, srcSet} = props;
+  if (
+    props.loading !== 'lazy' &&
+    (src || srcSet) &&
+    (typeof src === 'string' || src == null) &&
+    (typeof srcSet === 'string' || srcSet == null) &&
+    props.fetchPriority !== 'low' &&
+    !pictureOrNoScriptTagInScope &&
+    // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      typeof src === 'string' &&
+      src[4] === ':' &&
+      (src[0] === 'd' || src[0] === 'D') &&
+      (src[1] === 'a' || src[1] === 'A') &&
+      (src[2] === 't' || src[2] === 'T') &&
+      (src[3] === 'a' || src[3] === 'A')
+    ) &&
+    !(
+      typeof srcSet === 'string' &&
+      srcSet[4] === ':' &&
+      (srcSet[0] === 'd' || srcSet[0] === 'D') &&
+      (srcSet[1] === 'a' || srcSet[1] === 'A') &&
+      (srcSet[2] === 't' || srcSet[2] === 'T') &&
+      (srcSet[3] === 'a' || srcSet[3] === 'A')
+    )
+  ) {
+    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
+    // resumableState.
+    const sizes = typeof props.sizes === 'string' ? props.sizes : undefined;
+
+    const crossOrigin = getCrossOriginString(props.crossOrigin);
+
+    preload(
+      // The preload() API requires a href but if we have an imageSrcSet then that will take precedence.
+      // We already remove the href anyway in both Fizz and Fiber due to a Safari bug so the empty string
+      // will never actually appear in the DOM.
+      src || '',
+      'image',
+      {
+        imageSrcSet: srcSet,
+        imageSizes: sizes,
+        crossOrigin: crossOrigin,
+        integrity: props.integrity,
+        type: props.type,
+        fetchPriority: props.fetchPriority,
+        referrerPolicy: props.referrerPolicy,
+      },
+    );
+  }
+}
+
+function processLink(props: Object, formatContext: FormatContext): void {
+  const noscriptTagInScope = formatContext & NOSCRIPT_SCOPE;
+  const rel = props.rel;
+  const href = props.href;
+  if (
+    noscriptTagInScope ||
+    props.itemProp != null ||
+    typeof rel !== 'string' ||
+    typeof href !== 'string' ||
+    href === ''
+  ) {
+    // We shouldn't preload resources that are in noscript or have no configuration.
+    return;
+  }
+
+  switch (rel) {
+    case 'preload': {
+      preload(href, props.as, {
+        crossOrigin: props.crossOrigin,
+        integrity: props.integrity,
+        nonce: props.nonce,
+        type: props.type,
+        fetchPriority: props.fetchPriority,
+        referrerPolicy: props.referrerPolicy,
+        imageSrcSet: props.imageSrcSet,
+        imageSizes: props.imageSizes,
+        media: props.media,
+      });
+      return;
+    }
+    case 'modulepreload': {
+      preloadModule(href, {
+        as: props.as,
+        crossOrigin: props.crossOrigin,
+        integrity: props.integrity,
+        nonce: props.nonce,
+      });
+      return;
+    }
+    case 'stylesheet': {
+      preload(href, 'style', {
+        crossOrigin: props.crossOrigin,
+        integrity: props.integrity,
+        nonce: props.nonce,
+        type: props.type,
+        fetchPriority: props.fetchPriority,
+        referrerPolicy: props.referrerPolicy,
+        media: props.media,
+      });
+      return;
+    }
+  }
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  switch (type) {
+    case 'img':
+      processImg(props, parentContext);
+      return parentContext;
+    case 'link':
+      processLink(props, parentContext);
+      return parentContext;
+    case 'picture':
+      return parentContext | PICTURE_SCOPE;
+    case 'noscript':
+      return parentContext | NOSCRIPT_SCOPE;
+    default:
+      return parentContext;
+  }
+}
diff --git a/packages/react-dom-bindings/src/server/escapeTextForBrowser.js b/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
new file mode 100644
index 00000000000..4514bf66831
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/escapeTextForBrowser.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Based on the escape-html library, which is used under the MIT License below:
+ *
+ * Copyright (c) 2012-2013 TJ Holowaychuk
+ * Copyright (c) 2015 Andreas Lubbe
+ * Copyright (c) 2015 Tiancheng "Timothy" Gu
+ *
+ * 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.
+ *
+ * @flow
+ */
+
+// code copied and modified from escape-html
+/**
+ * Module variables.
+ * @private
+ */
+
+import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+
+const matchHtmlRegExp = /["'&<>]/;
+
+/**
+ * Escapes special characters and HTML entities in a given html string.
+ *
+ * @param  {string} string HTML string to escape for later insertion
+ * @return {string}
+ * @public
+ */
+
+function escapeHtml(string: string) {
+  if (__DEV__) {
+    checkHtmlStringCoercion(string);
+  }
+  const str = '' + string;
+  const match = matchHtmlRegExp.exec(str);
+
+  if (!match) {
+    return str;
+  }
+
+  let escape;
+  let html = '';
+  let index;
+  let lastIndex = 0;
+
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;';
+        break;
+      case 38: // &
+        escape = '&amp;';
+        break;
+      case 39: // '
+        escape = '&#x27;'; // modified from escape-html; used to be '&#39'
+        break;
+      case 60: // <
+        escape = '&lt;';
+        break;
+      case 62: // >
+        escape = '&gt;';
+        break;
+      default:
+        continue;
+    }
+
+    if (lastIndex !== index) {
+      html += str.slice(lastIndex, index);
+    }
+
+    lastIndex = index + 1;
+    html += escape;
+  }
+
+  return lastIndex !== index ? html + str.slice(lastIndex, index) : html;
+}
+// end code copied and modified from escape-html
+
+/**
+ * Escapes text to prevent scripting attacks.
+ *
+ * @param {*} text Text value to escape.
+ * @return {string} An escaped string.
+ */
+function escapeTextForBrowser(text: string | number | boolean): string {
+  if (
+    typeof text === 'boolean' ||
+    typeof text === 'number' ||
+    typeof text === 'bigint'
+  ) {
+    // this shortcircuit helps perf for types that we know will never have
+    // special characters, especially given that this function is used often
+    // for numeric dom ids.
+    return '' + (text: any);
+  }
+  return escapeHtml(text);
+}
+
+export default escapeTextForBrowser;
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineClientRenderBoundary.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineClientRenderBoundary.js
new file mode 100644
index 00000000000..ca03861c0fd
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineClientRenderBoundary.js
@@ -0,0 +1,5 @@
+import {clientRenderBoundary} from './ReactDOMFizzInstructionSetShared';
+
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// eslint-disable-next-line dot-notation
+window['$RX'] = clientRenderBoundary;
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundary.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundary.js
new file mode 100644
index 00000000000..761a8a18a95
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundary.js
@@ -0,0 +1,12 @@
+import {
+  revealCompletedBoundaries,
+  completeBoundary,
+} from './ReactDOMFizzInstructionSetShared';
+
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// eslint-disable-next-line dot-notation
+window['$RB'] = [];
+// eslint-disable-next-line dot-notation
+window['$RV'] = revealCompletedBoundaries;
+// eslint-disable-next-line dot-notation
+window['$RC'] = completeBoundary;
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryUpgradeToViewTransitions.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryUpgradeToViewTransitions.js
new file mode 100644
index 00000000000..e033b9cc9e8
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryUpgradeToViewTransitions.js
@@ -0,0 +1,10 @@
+import {revealCompletedBoundariesWithViewTransitions} from './ReactDOMFizzInstructionSetShared';
+
+// Upgrade the revealCompletedBoundaries instruction to support ViewTransitions.
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// eslint-disable-next-line dot-notation
+window['$RV'] = revealCompletedBoundariesWithViewTransitions.bind(
+  null,
+  // eslint-disable-next-line dot-notation
+  window['$RV'],
+);
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryWithStyles.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryWithStyles.js
new file mode 100644
index 00000000000..cd015f46234
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryWithStyles.js
@@ -0,0 +1,7 @@
+import {completeBoundaryWithStyles} from './ReactDOMFizzInstructionSetShared';
+
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// eslint-disable-next-line dot-notation
+window['$RM'] = new Map();
+// eslint-disable-next-line dot-notation
+window['$RR'] = completeBoundaryWithStyles;
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteSegment.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteSegment.js
new file mode 100644
index 00000000000..29e2a355a22
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteSegment.js
@@ -0,0 +1,5 @@
+import {completeSegment} from './ReactDOMFizzInstructionSetShared';
+
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// eslint-disable-next-line dot-notation
+window['$RS'] = completeSegment;
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineFormReplaying.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineFormReplaying.js
new file mode 100644
index 00000000000..2dcaf926adc
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineFormReplaying.js
@@ -0,0 +1,8 @@
+import {listenToFormSubmissionsForReplaying} from './ReactDOMFizzInstructionSetShared';
+
+// TODO: Export a helper function that throws the error from javascript URLs instead.
+// We can do that here since we mess with globals anyway and we can guarantee it has loaded.
+// It makes less sense in the external runtime since it's async loaded and doesn't expose globals
+// so we might have to have two different URLs.
+
+listenToFormSubmissionsForReplaying();
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineShellTime.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineShellTime.js
new file mode 100644
index 00000000000..9e52a25aa7a
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineShellTime.js
@@ -0,0 +1,5 @@
+// Track the paint time of the shell
+requestAnimationFrame(() => {
+  // eslint-disable-next-line dot-notation
+  window['$RT'] = performance.now();
+});
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js
new file mode 100644
index 00000000000..ce503f815d1
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js
@@ -0,0 +1,44 @@
+/* eslint-disable dot-notation */
+
+// Instruction set for the Fizz external runtime
+
+import {
+  clientRenderBoundary,
+  completeBoundary,
+  completeBoundaryWithStyles,
+  completeSegment,
+  listenToFormSubmissionsForReplaying,
+  revealCompletedBoundaries,
+  revealCompletedBoundariesWithViewTransitions,
+} from './ReactDOMFizzInstructionSetShared';
+
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// These will be renamed to local references by the external-runtime-plugin.
+window['$RM'] = new Map();
+window['$RB'] = [];
+window['$RX'] = clientRenderBoundary;
+window['$RV'] = revealCompletedBoundariesWithViewTransitions.bind(
+  null,
+  revealCompletedBoundaries,
+);
+window['$RC'] = completeBoundary;
+window['$RR'] = completeBoundaryWithStyles;
+window['$RS'] = completeSegment;
+
+listenToFormSubmissionsForReplaying();
+
+// Track the paint time of the shell.
+const entries = performance.getEntriesByType
+  ? performance.getEntriesByType('paint')
+  : [];
+if (entries.length > 0) {
+  // We might have already painted before this external runtime loaded. In that case we
+  // try to get the first paint from the performance metrics to avoid delaying further
+  // than necessary.
+  window['$RT'] = entries[0].startTime;
+} else {
+  // Otherwise we wait for the next rAF for it.
+  requestAnimationFrame(() => {
+    window['$RT'] = performance.now();
+  });
+}
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
new file mode 100644
index 00000000000..eca449bc736
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
@@ -0,0 +1,17 @@
+// This is a generated file. The source files are in react-dom-bindings/src/server/fizz-instruction-set.
+// The build script is at scripts/rollup/generate-inline-fizz-runtime.js.
+// Run `yarn generate-inline-fizz-runtime` to generate.
+export const markShellTime =
+  'requestAnimationFrame(function(){$RT=performance.now()});';
+export const clientRenderBoundary =
+  '$RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};';
+export const completeBoundary =
+  '$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};\n$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};';
+export const completeBoundaryUpgradeToViewTransitions =
+  '$RV=function(A,g){function k(a,b){var e=a.getAttribute(b);e&&(b=a.style,l.push(a,b.viewTransitionName,b.viewTransitionClass),"auto"!==e&&(b.viewTransitionClass=e),(a=a.getAttribute("vt-name"))||(a="_T_"+K++ +"_"),a=CSS.escape(a)!==a?"r-"+btoa(a).replace(/=/g,""):a,b.viewTransitionName=a,B=!0)}var B=!1,K=0,l=[];try{var f=document.__reactViewTransition;if(f){f.finished.finally($RV.bind(null,g));return}var m=new Map;for(f=1;f<g.length;f+=2)for(var h=g[f].querySelectorAll("[vt-share]"),d=0;d<h.length;d++){var c=h[d];m.set(c.getAttribute("vt-name"),c)}var u=[];for(h=0;h<g.length;h+=2){var C=g[h],x=C.parentNode;if(x){var v=x.getBoundingClientRect();if(v.left||v.top||v.width||v.height){c=C;for(f=0;c;){if(8===c.nodeType){var r=c.data;if("/$"===r)if(0===f)break;else f--;else"$"!==r&&"$?"!==r&&"$~"!==r&&"$!"!==r||f++}else if(1===c.nodeType){d=c;var D=d.getAttribute("vt-name"),y=m.get(D);k(d,y?"vt-share":"vt-exit");y&&(k(y,"vt-share"),m.set(D,null));var E=d.querySelectorAll("[vt-share]");\nfor(d=0;d<E.length;d++){var F=E[d],G=F.getAttribute("vt-name"),H=m.get(G);H&&(k(F,"vt-share"),k(H,"vt-share"),m.set(G,null))}}c=c.nextSibling}for(var I=g[h+1],t=I.firstElementChild;t;)null!==m.get(t.getAttribute("vt-name"))&&k(t,"vt-enter"),t=t.nextElementSibling;c=x;do for(var n=c.firstElementChild;n;){var J=n.getAttribute("vt-update");J&&"none"!==J&&!l.includes(n)&&k(n,"vt-update");n=n.nextElementSibling}while((c=c.parentNode)&&1===c.nodeType&&"none"!==c.getAttribute("vt-update"));u.push.apply(u,\nI.querySelectorAll(\'img[src]:not([loading="lazy"])\'))}}}if(B){var z=document.__reactViewTransition=document.startViewTransition({update:function(){A(g);for(var a=[document.documentElement.clientHeight,document.fonts.ready],b={},e=0;e<u.length;b={g:b.g},e++)if(b.g=u[e],!b.g.complete){var p=b.g.getBoundingClientRect();0<p.bottom&&0<p.right&&p.top<window.innerHeight&&p.left<window.innerWidth&&(p=new Promise(function(w){return function(q){w.g.addEventListener("load",q);w.g.addEventListener("error",q)}}(b)),\na.push(p))}return Promise.race([Promise.all(a),new Promise(function(w){var q=performance.now();setTimeout(w,2300>q&&2E3<q?2300-q:500)})])},types:[]});z.ready.finally(function(){for(var a=l.length-3;0<=a;a-=3){var b=l[a],e=b.style;e.viewTransitionName=l[a+1];e.viewTransitionClass=l[a+1];""===b.getAttribute("style")&&b.removeAttribute("style")}});z.finished.finally(function(){document.__reactViewTransition===z&&(document.__reactViewTransition=null)});$RB=[];return}}catch(a){}A(g)}.bind(null,\n$RV);';
+export const completeBoundaryWithStyles =
+  '$RM=new Map;$RR=function(n,w,p){function u(q){this._p=null;q()}for(var r=new Map,t=document,h,b,e=t.querySelectorAll("link[data-precedence],style[data-precedence]"),v=[],k=0;b=e[k++];)"not all"===b.getAttribute("media")?v.push(b):("LINK"===b.tagName&&$RM.set(b.getAttribute("href"),b),r.set(b.dataset.precedence,h=b));e=0;b=[];var l,a;for(k=!0;;){if(k){var f=p[e++];if(!f){k=!1;e=0;continue}var c=!1,m=0;var d=f[m++];if(a=$RM.get(d)){var g=a._p;c=!0}else{a=t.createElement("link");a.href=d;a.rel=\n"stylesheet";for(a.dataset.precedence=l=f[m++];g=f[m++];)a.setAttribute(g,f[m++]);g=a._p=new Promise(function(q,x){a.onload=u.bind(a,q);a.onerror=u.bind(a,x)});$RM.set(d,a)}d=a.getAttribute("media");!g||d&&!matchMedia(d).matches||b.push(g);if(c)continue}else{a=v[e++];if(!a)break;l=a.getAttribute("data-precedence");a.removeAttribute("media")}c=r.get(l)||h;c===h&&(h=a);r.set(l,a);c?c.parentNode.insertBefore(a,c.nextSibling):(c=t.head,c.insertBefore(a,c.firstChild))}if(p=document.getElementById(n))p.previousSibling.data=\n"$~";Promise.all(b).then($RC.bind(null,n,w),$RX.bind(null,n,"CSS failed to load"))};';
+export const completeSegment =
+  '$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};';
+export const formReplaying =
+  'addEventListener("submit",function(a){if(!a.defaultPrevented){var b=a.target,d=a.submitter,c=b.action,e=d;if(d){var f=d.getAttribute("formAction");null!=f&&(c=f,e=null)}"javascript:throw new Error(\'React form unexpectedly submitted.\')"===c&&(a.preventDefault(),a=new FormData(b,e),c=b.ownerDocument||b,(c.$$reactFormReplay=c.$$reactFormReplay||[]).push(b,d,a))}});';
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js
new file mode 100644
index 00000000000..86d8801b420
--- /dev/null
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js
@@ -0,0 +1,653 @@
+/* eslint-disable dot-notation */
+
+// Shared implementation and constants between the inline script and external
+// runtime instruction sets.
+
+const ELEMENT_NODE = 1;
+const COMMENT_NODE = 8;
+const ACTIVITY_START_DATA = '&';
+const ACTIVITY_END_DATA = '/&';
+const SUSPENSE_START_DATA = '$';
+const SUSPENSE_END_DATA = '/$';
+const SUSPENSE_PENDING_START_DATA = '$?';
+const SUSPENSE_QUEUED_START_DATA = '$~';
+const SUSPENSE_FALLBACK_START_DATA = '$!';
+
+const FALLBACK_THROTTLE_MS = 300;
+
+const SUSPENSEY_FONT_AND_IMAGE_TIMEOUT = 500;
+
+// If you have a target goal in mind for a metric to hit, you don't want the
+// only reason you miss it by a little bit to be throttling heuristics.
+// This tries to avoid throttling if avoiding it would let you hit this metric.
+// This is derived from trying to hit an LCP of 2.5 seconds with some head room.
+const TARGET_VANITY_METRIC = 2300;
+
+// TODO: Symbols that are referenced outside this module use dynamic accessor
+// notation instead of dot notation to prevent Closure's advanced compilation
+// mode from renaming. We could use extern files instead, but I couldn't get it
+// working. Closure converts it to a dot access anyway, though, so it's not an
+// urgent issue.
+
+export function revealCompletedBoundaries(batch) {
+  window['$RT'] = performance.now();
+  for (let i = 0; i < batch.length; i += 2) {
+    const suspenseIdNode = batch[i];
+    const contentNode = batch[i + 1];
+    if (contentNode.parentNode === null) {
+      // If the client has failed hydration we may have already deleted the streaming
+      // segments. The server may also have emitted a complete instruction but cancelled
+      // the segment. Regardless we can ignore this case.
+    } else {
+      // We can detach the content now.
+      // Completions of boundaries within this contentNode will now find the boundary
+      // in its designated place.
+      contentNode.parentNode.removeChild(contentNode);
+    }
+    // Clear all the existing children. This is complicated because
+    // there can be embedded Suspense boundaries in the fallback.
+    // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
+    // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+    // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+    const parentInstance = suspenseIdNode.parentNode;
+    if (!parentInstance) {
+      // We may have client-rendered this boundary already. Skip it.
+      continue;
+    }
+
+    // Find the boundary around the fallback. This is always the previous node.
+    const suspenseNode = suspenseIdNode.previousSibling;
+
+    let node = suspenseIdNode;
+    let depth = 0;
+    do {
+      if (node && node.nodeType === COMMENT_NODE) {
+        const data = node.data;
+        if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
+          if (depth === 0) {
+            break;
+          } else {
+            depth--;
+          }
+        } else if (
+          data === SUSPENSE_START_DATA ||
+          data === SUSPENSE_PENDING_START_DATA ||
+          data === SUSPENSE_QUEUED_START_DATA ||
+          data === SUSPENSE_FALLBACK_START_DATA ||
+          data === ACTIVITY_START_DATA
+        ) {
+          depth++;
+        }
+      }
+
+      const nextNode = node.nextSibling;
+      parentInstance.removeChild(node);
+      node = nextNode;
+    } while (node);
+
+    const endOfBoundary = node;
+
+    // Insert all the children from the contentNode between the start and end of suspense boundary.
+    while (contentNode.firstChild) {
+      parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+    }
+
+    suspenseNode.data = SUSPENSE_START_DATA;
+    if (suspenseNode['_reactRetry']) {
+      requestAnimationFrame(suspenseNode['_reactRetry']);
+    }
+  }
+  batch.length = 0;
+}
+
+export function revealCompletedBoundariesWithViewTransitions(
+  revealBoundaries,
+  batch,
+) {
+  let shouldStartViewTransition = false;
+  let autoNameIdx = 0;
+  const restoreQueue = [];
+  function applyViewTransitionName(element, classAttributeName) {
+    const className = element.getAttribute(classAttributeName);
+    if (!className) {
+      return;
+    }
+    // Add any elements we apply a name to a queue to be reverted when we start.
+    const elementStyle = element.style;
+    restoreQueue.push(
+      element,
+      elementStyle['viewTransitionName'],
+      elementStyle['viewTransitionClass'],
+    );
+    if (className !== 'auto') {
+      elementStyle['viewTransitionClass'] = className;
+    }
+    let name = element.getAttribute('vt-name');
+    if (!name) {
+      // Auto-generate a name for this one.
+      // TODO: We don't have a prefix to pick from here but maybe we don't need it
+      // since it's only applicable temporarily during this specific animation.
+      const idPrefix = '';
+      name = '_' + idPrefix + 'T_' + autoNameIdx++ + '_';
+    }
+    // If the name isn't valid CSS identifier, base64 encode the name instead.
+    // This doesn't let you select it in custom CSS selectors but it does work in current
+    // browsers.
+    const escapedName =
+      CSS.escape(name) !== name ? 'r-' + btoa(name).replace(/=/g, '') : name;
+    elementStyle['viewTransitionName'] = escapedName;
+    shouldStartViewTransition = true;
+  }
+  try {
+    const existingTransition = document['__reactViewTransition'];
+    if (existingTransition) {
+      // Retry after the previous ViewTransition finishes.
+      existingTransition.finished.finally(window['$RV'].bind(null, batch));
+      return;
+    }
+    // First collect all entering names that might form pairs exiting names.
+    const appearingViewTransitions = new Map();
+    for (let i = 1; i < batch.length; i += 2) {
+      const contentNode = batch[i];
+      const appearingElements = contentNode.querySelectorAll('[vt-share]');
+      for (let j = 0; j < appearingElements.length; j++) {
+        const appearingElement = appearingElements[j];
+        appearingViewTransitions.set(
+          appearingElement.getAttribute('vt-name'),
+          appearingElement,
+        );
+      }
+    }
+    const suspenseyImages = [];
+    // Next we'll find the nodes that we're going to animate and apply names to them..
+    for (let i = 0; i < batch.length; i += 2) {
+      const suspenseIdNode = batch[i];
+      const parentInstance = suspenseIdNode.parentNode;
+      if (!parentInstance) {
+        // We may have client-rendered this boundary already. Skip it.
+        continue;
+      }
+      const parentRect = parentInstance.getBoundingClientRect();
+      if (
+        !parentRect.left &&
+        !parentRect.top &&
+        !parentRect.width &&
+        !parentRect.height
+      ) {
+        // If the parent instance is display: none then we don't animate this boundary.
+        // This can happen when this boundary is actually a child of a different boundary that
+        // isn't yet revealed or is about to be revealed, but in that case that boundary
+        // should do the exit/enter and not this one. Conveniently this also lets us skip
+        // this if it's just in a hidden tree in general.
+        // TODO: Should we skip it if it's out of viewport? It's possible that it gets
+        // brought into the viewport by changing size.
+        // TODO: There's a another case where an inner boundary is inside a fallback that
+        // is about to be deleted. In that case we should not run exit animations on the inner.
+        continue;
+      }
+
+      // Apply exit animations to the immediate elements inside the fallback.
+      let node = suspenseIdNode;
+      let depth = 0;
+      while (node) {
+        if (node.nodeType === COMMENT_NODE) {
+          const data = node.data;
+          if (data === SUSPENSE_END_DATA) {
+            if (depth === 0) {
+              break;
+            } else {
+              depth--;
+            }
+          } else if (
+            data === SUSPENSE_START_DATA ||
+            data === SUSPENSE_PENDING_START_DATA ||
+            data === SUSPENSE_QUEUED_START_DATA ||
+            data === SUSPENSE_FALLBACK_START_DATA
+          ) {
+            depth++;
+          }
+        } else if (node.nodeType === ELEMENT_NODE) {
+          const exitElement = node;
+          const exitName = exitElement.getAttribute('vt-name');
+          const pairedElement = appearingViewTransitions.get(exitName);
+          applyViewTransitionName(
+            exitElement,
+            pairedElement ? 'vt-share' : 'vt-exit',
+          );
+          if (pairedElement) {
+            // Activate the other side as well.
+            applyViewTransitionName(pairedElement, 'vt-share');
+            appearingViewTransitions.set(exitName, null); // mark claimed
+          }
+          // Next we'll look inside this element for pairs to trigger "share".
+          const disappearingElements =
+            exitElement.querySelectorAll('[vt-share]');
+          for (let j = 0; j < disappearingElements.length; j++) {
+            const disappearingElement = disappearingElements[j];
+            const name = disappearingElement.getAttribute('vt-name');
+            const appearingElement = appearingViewTransitions.get(name);
+            if (appearingElement) {
+              applyViewTransitionName(disappearingElement, 'vt-share');
+              applyViewTransitionName(appearingElement, 'vt-share');
+              appearingViewTransitions.set(name, null); // mark claimed
+            }
+          }
+        }
+        node = node.nextSibling;
+      }
+
+      // Apply enter animations to the new nodes about to be inserted.
+      const contentNode = batch[i + 1];
+      let enterElement = contentNode.firstElementChild;
+      while (enterElement) {
+        const paired =
+          appearingViewTransitions.get(enterElement.getAttribute('vt-name')) ===
+          null;
+        if (!paired) {
+          applyViewTransitionName(enterElement, 'vt-enter');
+        }
+        enterElement = enterElement.nextElementSibling;
+      }
+
+      // Apply update animations to any parents and siblings that might be affected.
+      let ancestorElement = parentInstance;
+      do {
+        let childElement = ancestorElement.firstElementChild;
+        while (childElement) {
+          // TODO: Bail out if we can
+          const updateClassName = childElement.getAttribute('vt-update');
+          if (
+            updateClassName &&
+            updateClassName !== 'none' &&
+            !restoreQueue.includes(childElement)
+          ) {
+            // If we have already handled this element as part of another exit/enter/share, don't override.
+            applyViewTransitionName(childElement, 'vt-update');
+          }
+          childElement = childElement.nextElementSibling;
+        }
+      } while (
+        (ancestorElement = ancestorElement.parentNode) &&
+        ancestorElement.nodeType === ELEMENT_NODE &&
+        ancestorElement.getAttribute('vt-update') !== 'none'
+      );
+
+      // Find the appearing Suspensey Images inside the new content.
+      const appearingImages = contentNode.querySelectorAll(
+        'img[src]:not([loading="lazy"])',
+      );
+      // TODO: Consider marking shouldStartViewTransition if we found any images.
+      // But only once we can disable the root animation for that case.
+      suspenseyImages.push.apply(suspenseyImages, appearingImages);
+    }
+    if (shouldStartViewTransition) {
+      const transition = (document['__reactViewTransition'] = document[
+        'startViewTransition'
+      ]({
+        update: () => {
+          revealBoundaries(batch);
+          const blockingPromises = [
+            // Force layout to trigger font loading, we stash the actual value to trick minifiers.
+            document.documentElement.clientHeight,
+            // Block on fonts finishing loading before revealing these boundaries.
+            document.fonts.ready,
+          ];
+          for (let i = 0; i < suspenseyImages.length; i++) {
+            const suspenseyImage = suspenseyImages[i];
+            if (!suspenseyImage.complete) {
+              const rect = suspenseyImage.getBoundingClientRect();
+              const inViewport =
+                rect.bottom > 0 &&
+                rect.right > 0 &&
+                rect.top < window.innerHeight &&
+                rect.left < window.innerWidth;
+              if (inViewport) {
+                // TODO: Use decode() instead of the load event here once the fix in
+                // https://issues.chromium.org/issues/420748301 has propagated fully.
+                const loadingImage = new Promise(resolve => {
+                  suspenseyImage.addEventListener('load', resolve);
+                  suspenseyImage.addEventListener('error', resolve);
+                });
+                blockingPromises.push(loadingImage);
+              }
+            }
+          }
+          return Promise.race([
+            Promise.all(blockingPromises),
+            new Promise(resolve => {
+              const currentTime = performance.now();
+              const msUntilTimeout =
+                // If the throttle would make us miss the target metric, then shorten the throttle.
+                // performance.now()'s zero value is assumed to be the start time of the metric.
+                currentTime < TARGET_VANITY_METRIC &&
+                currentTime > TARGET_VANITY_METRIC - FALLBACK_THROTTLE_MS
+                  ? TARGET_VANITY_METRIC - currentTime
+                  : // Otherwise it's throttled starting from last commit time.
+                    SUSPENSEY_FONT_AND_IMAGE_TIMEOUT;
+              setTimeout(resolve, msUntilTimeout);
+            }),
+          ]);
+        },
+        types: [], // TODO: Add a hard coded type for Suspense reveals.
+      }));
+      transition.ready.finally(() => {
+        // Restore all the names/classes that we applied to what they were before.
+        // We do it in reverse order in case there were duplicates so the first one wins.
+        for (let i = restoreQueue.length - 3; i >= 0; i -= 3) {
+          const element = restoreQueue[i];
+          const elementStyle = element.style;
+          const previousName = restoreQueue[i + 1];
+          elementStyle['viewTransitionName'] = previousName;
+          const previousClassName = restoreQueue[i + 1];
+          elementStyle['viewTransitionClass'] = previousClassName;
+          if (element.getAttribute('style') === '') {
+            element.removeAttribute('style');
+          }
+        }
+      });
+      transition.finished.finally(() => {
+        if (document['__reactViewTransition'] === transition) {
+          document['__reactViewTransition'] = null;
+        }
+      });
+      // Queue any future completions into its own batch since they won't have been
+      // snapshotted by this one.
+      window['$RB'] = [];
+      return;
+    }
+    // Fall through to reveal.
+  } catch (x) {
+    // Fall through to reveal.
+  }
+  // ViewTransitions v2 not supported or no ViewTransitions found. Reveal immediately.
+  revealBoundaries(batch);
+}
+
+export function clientRenderBoundary(
+  suspenseBoundaryID,
+  errorDigest,
+  errorMsg,
+  errorStack,
+  errorComponentStack,
+) {
+  // Find the fallback's first element.
+  const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+  if (!suspenseIdNode) {
+    // The user must have already navigated away from this tree.
+    // E.g. because the parent was hydrated.
+    return;
+  }
+  // Find the boundary around the fallback. This is always the previous node.
+  const suspenseNode = suspenseIdNode.previousSibling;
+  // Tag it to be client rendered.
+  suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+  // assign error metadata to first sibling
+  const dataset = suspenseIdNode.dataset;
+  if (errorDigest) dataset['dgst'] = errorDigest;
+  if (errorMsg) dataset['msg'] = errorMsg;
+  if (errorStack) dataset['stck'] = errorStack;
+  if (errorComponentStack) dataset['cstck'] = errorComponentStack;
+  // Tell React to retry it if the parent already hydrated.
+  if (suspenseNode['_reactRetry']) {
+    suspenseNode['_reactRetry']();
+  }
+}
+
+export function completeBoundary(suspenseBoundaryID, contentID) {
+  const contentNodeOuter = document.getElementById(contentID);
+  if (!contentNodeOuter) {
+    // If the client has failed hydration we may have already deleted the streaming
+    // segments. The server may also have emitted a complete instruction but cancelled
+    // the segment. Regardless we can ignore this case.
+    return;
+  }
+
+  // Find the fallback's first element.
+  const suspenseIdNodeOuter = document.getElementById(suspenseBoundaryID);
+  if (!suspenseIdNodeOuter) {
+    // We'll never reveal this boundary so we can remove its content immediately.
+    // Otherwise we'll leave it in until we reveal it.
+    // This is important in case this specific boundary contains other boundaries
+    // that may get completed before we reveal this one.
+    contentNodeOuter.parentNode.removeChild(contentNodeOuter);
+
+    // The user must have already navigated away from this tree.
+    // E.g. because the parent was hydrated. That's fine there's nothing to do
+    // but we have to make sure that we already deleted the container node.
+    return;
+  }
+
+  // Mark this Suspense boundary as queued so we know not to client render it
+  // at the end of document load.
+  const suspenseNodeOuter = suspenseIdNodeOuter.previousSibling;
+  suspenseNodeOuter.data = SUSPENSE_QUEUED_START_DATA;
+  // Queue this boundary for the next batch
+  window['$RB'].push(suspenseIdNodeOuter, contentNodeOuter);
+
+  if (window['$RB'].length === 2) {
+    // This is the first time we've pushed to the batch. We need to schedule a callback
+    // to flush the batch. This is delayed by the throttle heuristic.
+    if (typeof window['$RT'] !== 'number') {
+      // If we haven't had our rAF callback yet, schedule everything for the first paint.
+      requestAnimationFrame(window['$RV'].bind(null, window['$RB']));
+    } else {
+      const currentTime = performance.now();
+      const msUntilTimeout =
+        // If the throttle would make us miss the target metric, then shorten the throttle.
+        // performance.now()'s zero value is assumed to be the start time of the metric.
+        currentTime < TARGET_VANITY_METRIC &&
+        currentTime > TARGET_VANITY_METRIC - FALLBACK_THROTTLE_MS
+          ? TARGET_VANITY_METRIC - currentTime
+          : // Otherwise it's throttled starting from last commit time.
+            window['$RT'] + FALLBACK_THROTTLE_MS - currentTime;
+      // We always schedule the flush in a timer even if it's very low or negative to allow
+      // for multiple completeBoundary calls that are already queued to have a chance to
+      // make the batch.
+      setTimeout(window['$RV'].bind(null, window['$RB']), msUntilTimeout);
+    }
+  }
+}
+
+export function completeBoundaryWithStyles(
+  suspenseBoundaryID,
+  contentID,
+  stylesheetDescriptors,
+) {
+  const precedences = new Map();
+  const thisDocument = document;
+  let lastResource, node;
+
+  // Seed the precedence list with existing resources and collect hoistable style tags
+  const nodes = thisDocument.querySelectorAll(
+    'link[data-precedence],style[data-precedence]',
+  );
+  const styleTagsToHoist = [];
+  for (let i = 0; (node = nodes[i++]); ) {
+    if (node.getAttribute('media') === 'not all') {
+      styleTagsToHoist.push(node);
+    } else {
+      if (node.tagName === 'LINK') {
+        window['$RM'].set(node.getAttribute('href'), node);
+      }
+      precedences.set(node.dataset['precedence'], (lastResource = node));
+    }
+  }
+
+  let i = 0;
+  const dependencies = [];
+  let href, precedence, attr, loadingState, resourceEl, media;
+
+  function cleanupWith(cb) {
+    this['_p'] = null;
+    cb();
+  }
+
+  // Sheets Mode
+  let sheetMode = true;
+  while (true) {
+    if (sheetMode) {
+      // Sheet Mode iterates over the stylesheet arguments and constructs them if new or checks them for
+      // dependency if they already existed
+      const stylesheetDescriptor = stylesheetDescriptors[i++];
+      if (!stylesheetDescriptor) {
+        // enter <style> Mode
+        sheetMode = false;
+        i = 0;
+        continue;
+      }
+
+      let avoidInsert = false;
+      let j = 0;
+      href = stylesheetDescriptor[j++];
+
+      if ((resourceEl = window['$RM'].get(href))) {
+        // We have an already inserted stylesheet.
+        loadingState = resourceEl['_p'];
+        avoidInsert = true;
+      } else {
+        // We haven't already processed this href so we need to construct a stylesheet and hoist it
+        // We construct it here and attach a loadingState. We also check whether it matches
+        // media before we include it in the dependency array.
+        resourceEl = thisDocument.createElement('link');
+        resourceEl.href = href;
+        resourceEl.rel = 'stylesheet';
+        resourceEl.dataset['precedence'] = precedence =
+          stylesheetDescriptor[j++];
+        while ((attr = stylesheetDescriptor[j++])) {
+          resourceEl.setAttribute(attr, stylesheetDescriptor[j++]);
+        }
+        loadingState = resourceEl['_p'] = new Promise((resolve, reject) => {
+          resourceEl.onload = cleanupWith.bind(resourceEl, resolve);
+          resourceEl.onerror = cleanupWith.bind(resourceEl, reject);
+        });
+        // Save this resource element so we can bailout if it is used again
+        window['$RM'].set(href, resourceEl);
+      }
+      media = resourceEl.getAttribute('media');
+      if (loadingState && (!media || window['matchMedia'](media).matches)) {
+        dependencies.push(loadingState);
+      }
+      if (avoidInsert) {
+        // We have a link that is already in the document. We don't want to fall through to the insert path
+        continue;
+      }
+    } else {
+      // <style> mode iterates over not-yet-hoisted <style> tags with data-precedence and hoists them.
+      resourceEl = styleTagsToHoist[i++];
+      if (!resourceEl) {
+        // we are done with all style tags
+        break;
+      }
+
+      precedence = resourceEl.getAttribute('data-precedence');
+      resourceEl.removeAttribute('media');
+    }
+
+    // resourceEl is either a newly constructed <link rel="stylesheet" ...> or a <style> tag requiring hoisting
+    const prior = precedences.get(precedence) || lastResource;
+    if (prior === lastResource) {
+      lastResource = resourceEl;
+    }
+    precedences.set(precedence, resourceEl);
+
+    // Finally, we insert the newly constructed instance at an appropriate location
+    // in the Document.
+    if (prior) {
+      prior.parentNode.insertBefore(resourceEl, prior.nextSibling);
+    } else {
+      const head = thisDocument.head;
+      head.insertBefore(resourceEl, head.firstChild);
+    }
+  }
+
+  const suspenseIdNodeOuter = document.getElementById(suspenseBoundaryID);
+  if (suspenseIdNodeOuter) {
+    // Mark this Suspense boundary as queued so we know not to client render it
+    // at the end of document load.
+    const suspenseNodeOuter = suspenseIdNodeOuter.previousSibling;
+    suspenseNodeOuter.data = SUSPENSE_QUEUED_START_DATA;
+  }
+
+  Promise.all(dependencies).then(
+    window['$RC'].bind(null, suspenseBoundaryID, contentID),
+    window['$RX'].bind(null, suspenseBoundaryID, 'CSS failed to load'),
+  );
+}
+
+export function completeSegment(containerID, placeholderID) {
+  const segmentContainer = document.getElementById(containerID);
+  const placeholderNode = document.getElementById(placeholderID);
+  // We always expect both nodes to exist here because, while we might
+  // have navigated away from the main tree, we still expect the detached
+  // tree to exist.
+  segmentContainer.parentNode.removeChild(segmentContainer);
+  while (segmentContainer.firstChild) {
+    placeholderNode.parentNode.insertBefore(
+      segmentContainer.firstChild,
+      placeholderNode,
+    );
+  }
+  placeholderNode.parentNode.removeChild(placeholderNode);
+}
+
+// This is the exact URL string we expect that Fizz renders if we provide a function action.
+// We use this for hydration warnings. It needs to be in sync with Fizz. Maybe makes sense
+// as a shared module for that reason.
+const EXPECTED_FORM_ACTION_URL =
+  // eslint-disable-next-line no-script-url
+  "javascript:throw new Error('React form unexpectedly submitted.')";
+
+export function listenToFormSubmissionsForReplaying() {
+  // A global replay queue ensures actions are replayed in order.
+  // This event listener should be above the React one. That way when
+  // we preventDefault in React's handling we also prevent this event
+  // from queing it. Since React listens to the root and the top most
+  // container you can use is the document, the window is fine.
+  // eslint-disable-next-line no-restricted-globals
+  addEventListener('submit', event => {
+    if (event.defaultPrevented) {
+      // We let earlier events to prevent the action from submitting.
+      return;
+    }
+    const form = event.target;
+    const submitter = event['submitter'];
+    let action = form.action;
+    let formDataSubmitter = submitter;
+    if (submitter) {
+      const submitterAction = submitter.getAttribute('formAction');
+      if (submitterAction != null) {
+        // The submitter overrides the action.
+        action = submitterAction;
+        // If the submitter overrides the action, and it passes the test below,
+        // that means that it was a function action which conceptually has no name.
+        // Therefore, we exclude the submitter from the formdata.
+        formDataSubmitter = null;
+      }
+    }
+    if (action !== EXPECTED_FORM_ACTION_URL) {
+      // The form is a regular form action, we can bail.
+      return;
+    }
+
+    // Prevent native navigation.
+    // This will also prevent other React's on the same page from listening.
+    event.preventDefault();
+
+    // Take a snapshot of the FormData at the time of the event.
+    const formData = new FormData(form, formDataSubmitter);
+
+    // Queue for replaying later. This field could potentially be shared with multiple
+    // Reacts on the same page since each one will preventDefault for the next one.
+    // This means that this protocol is shared with any React version that shares the same
+    // javascript: URL placeholder value. So we might not be the first to declare it.
+    // We attach it to the form's root node, which is the shared environment context
+    // where we preserve sequencing and where we'll pick it up from during hydration.
+    // If there's no ownerDocument, then this is the document.
+    const root = form.ownerDocument || form;
+    (root['$$reactFormReplay'] = root['$$reactFormReplay'] || []).push(
+      form,
+      submitter,
+      formData,
+    );
+  });
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js b/packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js
new file mode 100644
index 00000000000..3d96eb1e833
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactControlledValuePropTypes.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+const hasReadOnlyValue = {
+  button: true,
+  checkbox: true,
+  image: true,
+  hidden: true,
+  radio: true,
+  reset: true,
+  submit: true,
+};
+
+export function checkControlledValueProps(
+  tagName: string,
+  props: Object,
+): void {
+  if (__DEV__) {
+    if (
+      !(
+        hasReadOnlyValue[props.type] ||
+        props.onChange ||
+        props.onInput ||
+        props.readOnly ||
+        props.disabled ||
+        props.value == null
+      )
+    ) {
+      if (tagName === 'select') {
+        console.error(
+          '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`. Otherwise, set `onChange`.',
+        );
+      } else {
+        console.error(
+          '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`. Otherwise, set either `onChange` or `readOnly`.',
+        );
+      }
+    }
+
+    if (
+      !(
+        props.onChange ||
+        props.readOnly ||
+        props.disabled ||
+        props.checked == null
+      )
+    ) {
+      console.error(
+        '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`.',
+      );
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js b/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
new file mode 100644
index 00000000000..6978f488450
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {Awaited} from 'shared/ReactTypes';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+type FormStatusNotPending = {|
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+|};
+
+type FormStatusPending = {|
+  pending: true,
+  data: FormData,
+  method: string,
+  action: string | (FormData => void | Promise<void>) | null,
+|};
+
+export type FormStatus = FormStatusPending | FormStatusNotPending;
+
+// Since the "not pending" value is always the same, we can reuse the
+// same object across all transitions.
+const sharedNotPendingObject: FormStatusNotPending = {
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+};
+
+export const NotPending: FormStatus = __DEV__
+  ? Object.freeze(sharedNotPendingObject)
+  : sharedNotPendingObject;
+
+function resolveDispatcher() {
+  // Copied from react/src/ReactHooks.js. It's the same thing but in a
+  // different package.
+  const dispatcher = ReactSharedInternals.H;
+  if (__DEV__) {
+    if (dispatcher === null) {
+      console.error(
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+          ' one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      );
+    }
+  }
+  // Will result in a null access error if accessed outside render phase. We
+  // intentionally don't throw our own error because this is in a hot path.
+  // Also helps ensure this is inlined.
+  return ((dispatcher: any): Dispatcher);
+}
+
+export function useFormStatus(): FormStatus {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useHostTransitionStatus();
+}
+
+export function useFormState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useFormState(action, initialState, permalink);
+}
+
+export function requestFormReset(form: HTMLFormElement) {
+  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+    .r(/* requestFormReset */ form);
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMInvalidARIAHook.js b/packages/react-dom-bindings/src/shared/ReactDOMInvalidARIAHook.js
new file mode 100644
index 00000000000..9cce3b5807a
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMInvalidARIAHook.js
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {ATTRIBUTE_NAME_CHAR} from './isAttributeNameSafe';
+import validAriaProperties from './validAriaProperties';
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+const warnedProperties = {};
+const rARIA = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
+const rARIACamel = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
+
+function validateProperty(tagName, name) {
+  if (__DEV__) {
+    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) {
+        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;
+      }
+    }
+
+    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;
+      }
+    }
+  }
+
+  return true;
+}
+
+export function validateProperties(type, props) {
+  if (__DEV__) {
+    const invalidProps = [];
+
+    for (const key in props) {
+      const isValid = validateProperty(type, key);
+      if (!isValid) {
+        invalidProps.push(key);
+      }
+    }
+
+    const unknownPropString = invalidProps
+      .map(prop => '`' + prop + '`')
+      .join(', ');
+
+    if (invalidProps.length === 1) {
+      console.error(
+        'Invalid aria prop %s on <%s> tag. ' +
+          'For details, see https://react.dev/link/invalid-aria-props',
+        unknownPropString,
+        type,
+      );
+    } else if (invalidProps.length > 1) {
+      console.error(
+        'Invalid aria props %s on <%s> tag. ' +
+          'For details, see https://react.dev/link/invalid-aria-props',
+        unknownPropString,
+        type,
+      );
+    }
+  }
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMNullInputValuePropHook.js b/packages/react-dom-bindings/src/shared/ReactDOMNullInputValuePropHook.js
new file mode 100644
index 00000000000..e0306d1250f
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMNullInputValuePropHook.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+let didWarnValueNull = false;
+
+export function validateProperties(type, props) {
+  if (__DEV__) {
+    if (type !== 'input' && type !== 'textarea' && type !== 'select') {
+      return;
+    }
+
+    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-bindings/src/shared/ReactDOMResourceValidation.js b/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
new file mode 100644
index 00000000000..efb2779bc4a
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 validateLinkPropsForStyleResource(props: any): boolean {
+  if (__DEV__) {
+    // This should only be called when we know we are opting into Resource semantics (i.e. precedence is not null)
+    const {href, onLoad, onError, disabled} = props;
+    const includedProps = [];
+    if (onLoad) includedProps.push('`onLoad`');
+    if (onError) includedProps.push('`onError`');
+    if (disabled != null) includedProps.push('`disabled`');
+
+    let includedPropsPhrase = propNamesListJoin(includedProps, 'and');
+    includedPropsPhrase += includedProps.length === 1 ? ' prop' : ' props';
+    const withArticlePhrase =
+      includedProps.length === 1
+        ? 'an ' + includedPropsPhrase
+        : 'the ' + includedPropsPhrase;
+
+    if (includedProps.length) {
+      console.error(
+        'React encountered a <link rel="stylesheet" href="%s" ... /> with a `precedence` prop that' +
+          ' also included %s. The presence of loading and error handlers indicates an intent to manage' +
+          ' the stylesheet loading state from your from your Component code and React will not hoist or' +
+          ' deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet' +
+          ' using the `precedence` prop remove the %s, otherwise remove the `precedence` prop.',
+        href,
+        withArticlePhrase,
+        includedPropsPhrase,
+      );
+      return true;
+    }
+  }
+  return false;
+}
+
+function propNamesListJoin(
+  list: Array<string>,
+  combinator: 'and' | 'or',
+): string {
+  switch (list.length) {
+    case 0:
+      return '';
+    case 1:
+      return list[0];
+    case 2:
+      return list[0] + ' ' + combinator + ' ' + list[1];
+    default:
+      return (
+        list.slice(0, -1).join(', ') +
+        ', ' +
+        combinator +
+        ' ' +
+        list[list.length - 1]
+      );
+  }
+}
+
+export function getValueDescriptorExpectingObjectForWarning(
+  thing: any,
+): string {
+  return thing === null
+    ? '`null`'
+    : thing === undefined
+      ? '`undefined`'
+      : thing === ''
+        ? 'an empty string'
+        : `something with type "${typeof thing}"`;
+}
+
+export function getValueDescriptorExpectingEnumForWarning(thing: any): string {
+  return thing === null
+    ? '`null`'
+    : thing === undefined
+      ? '`undefined`'
+      : thing === ''
+        ? 'an empty string'
+        : typeof thing === 'string'
+          ? JSON.stringify(thing)
+          : `something with type "${typeof thing}"`;
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
new file mode 100644
index 00000000000..f45e477d876
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -0,0 +1,374 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {ATTRIBUTE_NAME_CHAR} from './isAttributeNameSafe';
+import isCustomElement from './isCustomElement';
+import possibleStandardNames from './possibleStandardNames';
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+const warnedProperties = {};
+const EVENT_NAME_REGEX = /^on./;
+const INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
+const rARIA = __DEV__
+  ? new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$')
+  : null;
+const rARIACamel = __DEV__
+  ? new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$')
+  : null;
+
+function validateProperty(tagName, name, value, eventRegistry) {
+  if (__DEV__) {
+    if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
+      return true;
+    }
+
+    const lowerCasedName = name.toLowerCase();
+    if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
+      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.',
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    // Actions are special because unlike events they can have other value types.
+    if (typeof value === 'function') {
+      if (tagName === 'form' && name === 'action') {
+        return true;
+      }
+      if (tagName === 'input' && name === 'formAction') {
+        return true;
+      }
+      if (tagName === 'button' && name === 'formAction') {
+        return true;
+      }
+    }
+    // We can't rely on the event system being injected on the server.
+    if (eventRegistry != null) {
+      const {registrationNameDependencies, possibleRegistrationNames} =
+        eventRegistry;
+      if (registrationNameDependencies.hasOwnProperty(name)) {
+        return true;
+      }
+      const registrationName = possibleRegistrationNames.hasOwnProperty(
+        lowerCasedName,
+      )
+        ? possibleRegistrationNames[lowerCasedName]
+        : null;
+      if (registrationName != null) {
+        console.error(
+          'Invalid event handler property `%s`. Did you mean `%s`?',
+          name,
+          registrationName,
+        );
+        warnedProperties[name] = true;
+        return true;
+      }
+      if (EVENT_NAME_REGEX.test(name)) {
+        console.error(
+          'Unknown event handler property `%s`. It will be ignored.',
+          name,
+        );
+        warnedProperties[name] = true;
+        return true;
+      }
+    } else if (EVENT_NAME_REGEX.test(name)) {
+      // If no event plugins have been injected, we are in a server environment.
+      // 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)) {
+        console.error(
+          'Invalid event handler property `%s`. ' +
+            'React events use the camelCase naming convention, for example `onClick`.',
+          name,
+        );
+      }
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    // Let the ARIA attribute hook validate ARIA attributes
+    if (rARIA.test(name) || rARIACamel.test(name)) {
+      return true;
+    }
+
+    if (lowerCasedName === 'innerhtml') {
+      console.error(
+        'Directly setting property `innerHTML` is not permitted. ' +
+          'For more information, lookup documentation on `dangerouslySetInnerHTML`.',
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    if (lowerCasedName === 'aria') {
+      console.error(
+        'The `aria` attribute is reserved for future use in React. ' +
+          'Pass individual `aria-` attributes instead.',
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    if (
+      lowerCasedName === 'is' &&
+      value !== null &&
+      value !== undefined &&
+      typeof value !== 'string'
+    ) {
+      console.error(
+        'Received a `%s` for a string attribute `is`. If this is expected, cast ' +
+          'the value to a string.',
+        typeof value,
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    if (typeof value === 'number' && isNaN(value)) {
+      console.error(
+        'Received NaN for the `%s` attribute. If this is expected, cast ' +
+          'the value to a string.',
+        name,
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    // Known attributes should match the casing specified in the property config.
+    if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
+      const standardName = possibleStandardNames[lowerCasedName];
+      if (standardName !== name) {
+        console.error(
+          'Invalid DOM property `%s`. Did you mean `%s`?',
+          name,
+          standardName,
+        );
+        warnedProperties[name] = true;
+        return true;
+      }
+    } else if (name !== lowerCasedName) {
+      // Unknown attributes should have lowercase casing since that's how they
+      // will be cased anyway with server rendering.
+      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. ' +
+          'If you accidentally passed it from a parent component, remove ' +
+          'it from the DOM element.',
+        name,
+        lowerCasedName,
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
+    // Now that we've validated casing, do not validate
+    // data types for reserved props
+    switch (name) {
+      case 'dangerouslySetInnerHTML':
+      case 'children':
+      case 'style':
+      case 'suppressContentEditableWarning':
+      case 'suppressHydrationWarning':
+      case 'defaultValue': // Reserved
+      case 'defaultChecked':
+      case 'innerHTML':
+      case 'ref': {
+        return true;
+      }
+      case 'innerText': // Properties
+      case 'textContent':
+        return true;
+    }
+
+    switch (typeof value) {
+      case 'boolean': {
+        switch (name) {
+          case 'autoFocus':
+          case 'checked':
+          case 'multiple':
+          case 'muted':
+          case 'selected':
+          case 'contentEditable':
+          case 'spellCheck':
+          case 'draggable':
+          case 'value':
+          case 'autoReverse':
+          case 'externalResourcesRequired':
+          case 'focusable':
+          case 'preserveAlpha':
+          case 'allowFullScreen':
+          case 'async':
+          case 'autoPlay':
+          case 'controls':
+          case 'default':
+          case 'defer':
+          case 'disabled':
+          case 'disablePictureInPicture':
+          case 'disableRemotePlayback':
+          case 'formNoValidate':
+          case 'hidden':
+          case 'loop':
+          case 'noModule':
+          case 'noValidate':
+          case 'open':
+          case 'playsInline':
+          case 'readOnly':
+          case 'required':
+          case 'reversed':
+          case 'scoped':
+          case 'seamless':
+          case 'itemScope':
+          case 'capture':
+          case 'download':
+          case 'inert': {
+            // Boolean properties can accept boolean values
+            return true;
+          }
+          // fallthrough
+          default: {
+            const prefix = name.toLowerCase().slice(0, 5);
+            if (prefix === 'data-' || prefix === 'aria-') {
+              return true;
+            }
+            if (value) {
+              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()}.',
+                value,
+                name,
+                name,
+                value,
+                name,
+              );
+            } else {
+              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' +
+                  'If you used to conditionally omit it with %s={condition && value}, ' +
+                  'pass %s={condition ? value : undefined} instead.',
+                value,
+                name,
+                name,
+                value,
+                name,
+                name,
+                name,
+              );
+            }
+            warnedProperties[name] = true;
+            return true;
+          }
+        }
+      }
+      case 'function':
+      case 'symbol':
+        // Warn when a known attribute is a bad type
+        warnedProperties[name] = true;
+        return false;
+      case 'string': {
+        // Warn when passing the strings 'false' or 'true' into a boolean prop
+        if (value === 'false' || value === 'true') {
+          switch (name) {
+            case 'checked':
+            case 'selected':
+            case 'multiple':
+            case 'muted':
+            case 'allowFullScreen':
+            case 'async':
+            case 'autoPlay':
+            case 'controls':
+            case 'default':
+            case 'defer':
+            case 'disabled':
+            case 'disablePictureInPicture':
+            case 'disableRemotePlayback':
+            case 'formNoValidate':
+            case 'hidden':
+            case 'loop':
+            case 'noModule':
+            case 'noValidate':
+            case 'open':
+            case 'playsInline':
+            case 'readOnly':
+            case 'required':
+            case 'reversed':
+            case 'scoped':
+            case 'seamless':
+            case 'itemScope':
+            case 'inert': {
+              break;
+            }
+            default: {
+              return true;
+            }
+          }
+          console.error(
+            'Received the string `%s` for the boolean attribute `%s`. ' +
+              '%s ' +
+              'Did you mean %s={%s}?',
+            value,
+            name,
+            value === 'false'
+              ? 'The browser will interpret it as a truthy value.'
+              : 'Although this works, it will not work as expected if you pass the string "false".',
+            name,
+            value,
+          );
+          warnedProperties[name] = true;
+          return true;
+        }
+      }
+    }
+    return true;
+  }
+}
+
+function warnUnknownProperties(type, props, eventRegistry) {
+  if (__DEV__) {
+    const unknownProps = [];
+    for (const key in props) {
+      const isValid = validateProperty(type, key, props[key], eventRegistry);
+      if (!isValid) {
+        unknownProps.push(key);
+      }
+    }
+
+    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://react.dev/link/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://react.dev/link/attribute-behavior ',
+        unknownPropString,
+        type,
+      );
+    }
+  }
+}
+
+export function validateProperties(type, props, eventRegistry) {
+  if (isCustomElement(type, props) || typeof props.is === 'string') {
+    return;
+  }
+  warnUnknownProperties(type, props, eventRegistry);
+}
diff --git a/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
new file mode 100644
index 00000000000..ee54c274bfc
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 client file is in the shared folder because it applies to both SSR and browser contexts.
+// It is the configuration of the FlightClient behavior which can run in either environment.
+
+import type {HintCode, HintModel} from '../server/ReactFlightServerConfigDOM';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+import {getCrossOriginString} from './crossOriginStrings';
+
+export function dispatchHint<Code: HintCode>(
+  code: Code,
+  model: HintModel<Code>,
+): void {
+  const dispatcher = ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
+  switch (code) {
+    case 'D': {
+      const refined = refineModel(code, model);
+      const href = refined;
+      dispatcher.D(/* prefetchDNS */ href);
+      return;
+    }
+    case 'C': {
+      const refined = refineModel(code, model);
+      if (typeof refined === 'string') {
+        const href = refined;
+        dispatcher.C(/* preconnect */ href);
+      } else {
+        const href = refined[0];
+        const crossOrigin = refined[1];
+        dispatcher.C(/* preconnect */ href, crossOrigin);
+      }
+      return;
+    }
+    case 'L': {
+      const refined = refineModel(code, model);
+      const href = refined[0];
+      const as = refined[1];
+      if (refined.length === 3) {
+        const options = refined[2];
+        dispatcher.L(/* preload */ href, as, options);
+      } else {
+        dispatcher.L(/* preload */ href, as);
+      }
+      return;
+    }
+    case 'm': {
+      const refined = refineModel(code, model);
+      if (typeof refined === 'string') {
+        const href = refined;
+        dispatcher.m(/* preloadModule */ href);
+      } else {
+        const href = refined[0];
+        const options = refined[1];
+        dispatcher.m(/* preloadModule */ href, options);
+      }
+      return;
+    }
+    case 'X': {
+      const refined = refineModel(code, model);
+      if (typeof refined === 'string') {
+        const href = refined;
+        dispatcher.X(/* preinitScript */ href);
+      } else {
+        const href = refined[0];
+        const options = refined[1];
+        dispatcher.X(/* preinitScript */ href, options);
+      }
+      return;
+    }
+    case 'S': {
+      const refined = refineModel(code, model);
+      if (typeof refined === 'string') {
+        const href = refined;
+        dispatcher.S(/* preinitStyle */ href);
+      } else {
+        const href = refined[0];
+        const precedence = refined[1] === 0 ? undefined : refined[1];
+        const options = refined.length === 3 ? refined[2] : undefined;
+        dispatcher.S(/* preinitStyle */ href, precedence, options);
+      }
+      return;
+    }
+    case 'M': {
+      const refined = refineModel(code, model);
+      if (typeof refined === 'string') {
+        const href = refined;
+        dispatcher.M(/* preinitModuleScript */ href);
+      } else {
+        const href = refined[0];
+        const options = refined[1];
+        dispatcher.M(/* preinitModuleScript */ href, options);
+      }
+      return;
+    }
+  }
+}
+
+// Flow is having trouble refining the HintModels so we help it a bit.
+// This should be compiled out in the production build.
+function refineModel<T>(code: T, model: HintModel<any>): HintModel<T> {
+  return model;
+}
+
+export function preinitModuleForSSR(
+  href: string,
+  nonce: ?string,
+  crossOrigin: ?string,
+) {
+  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+    .M(/* preinitModuleScript */ href, {
+      crossOrigin: getCrossOriginString(crossOrigin),
+      nonce,
+    });
+}
+
+export function preinitScriptForSSR(
+  href: string,
+  nonce: ?string,
+  crossOrigin: ?string,
+) {
+  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+    .X(/* preinitScript */ href, {
+      crossOrigin: getCrossOriginString(crossOrigin),
+      nonce,
+    });
+}
diff --git a/packages/react-dom-bindings/src/shared/crossOriginStrings.js b/packages/react-dom-bindings/src/shared/crossOriginStrings.js
new file mode 100644
index 00000000000..ebdb615f398
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/crossOriginStrings.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 opaque type CrossOriginString: string = string;
+
+export function getCrossOriginString(input: ?string): ?CrossOriginString {
+  if (typeof input === 'string') {
+    return input === 'use-credentials' ? input : '';
+  }
+  return undefined;
+}
+
+export function getCrossOriginStringAs(
+  as: ?string,
+  input: ?string,
+): ?CrossOriginString {
+  if (as === 'font') {
+    return '';
+  }
+  if (typeof input === 'string') {
+    return input === 'use-credentials' ? input : '';
+  }
+  return undefined;
+}
diff --git a/packages/react-dom-bindings/src/shared/getAttributeAlias.js b/packages/react-dom-bindings/src/shared/getAttributeAlias.js
new file mode 100644
index 00000000000..2ed432f2027
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/getAttributeAlias.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 aliases = new Map([
+  ['acceptCharset', 'accept-charset'],
+  ['htmlFor', 'for'],
+  ['httpEquiv', 'http-equiv'],
+  // HTML and SVG attributes, but the SVG attribute is case sensitive.],
+  ['crossOrigin', 'crossorigin'],
+  // This is a list of all SVG attributes that need special casing.
+  // Regular attributes that just accept strings.],
+  ['accentHeight', 'accent-height'],
+  ['alignmentBaseline', 'alignment-baseline'],
+  ['arabicForm', 'arabic-form'],
+  ['baselineShift', 'baseline-shift'],
+  ['capHeight', 'cap-height'],
+  ['clipPath', 'clip-path'],
+  ['clipRule', 'clip-rule'],
+  ['colorInterpolation', 'color-interpolation'],
+  ['colorInterpolationFilters', 'color-interpolation-filters'],
+  ['colorProfile', 'color-profile'],
+  ['colorRendering', 'color-rendering'],
+  ['dominantBaseline', 'dominant-baseline'],
+  ['enableBackground', 'enable-background'],
+  ['fillOpacity', 'fill-opacity'],
+  ['fillRule', 'fill-rule'],
+  ['floodColor', 'flood-color'],
+  ['floodOpacity', 'flood-opacity'],
+  ['fontFamily', 'font-family'],
+  ['fontSize', 'font-size'],
+  ['fontSizeAdjust', 'font-size-adjust'],
+  ['fontStretch', 'font-stretch'],
+  ['fontStyle', 'font-style'],
+  ['fontVariant', 'font-variant'],
+  ['fontWeight', 'font-weight'],
+  ['glyphName', 'glyph-name'],
+  ['glyphOrientationHorizontal', 'glyph-orientation-horizontal'],
+  ['glyphOrientationVertical', 'glyph-orientation-vertical'],
+  ['horizAdvX', 'horiz-adv-x'],
+  ['horizOriginX', 'horiz-origin-x'],
+  ['imageRendering', 'image-rendering'],
+  ['letterSpacing', 'letter-spacing'],
+  ['lightingColor', 'lighting-color'],
+  ['markerEnd', 'marker-end'],
+  ['markerMid', 'marker-mid'],
+  ['markerStart', 'marker-start'],
+  ['overlinePosition', 'overline-position'],
+  ['overlineThickness', 'overline-thickness'],
+  ['paintOrder', 'paint-order'],
+  ['panose-1', 'panose-1'],
+  ['pointerEvents', 'pointer-events'],
+  ['renderingIntent', 'rendering-intent'],
+  ['shapeRendering', 'shape-rendering'],
+  ['stopColor', 'stop-color'],
+  ['stopOpacity', 'stop-opacity'],
+  ['strikethroughPosition', 'strikethrough-position'],
+  ['strikethroughThickness', 'strikethrough-thickness'],
+  ['strokeDasharray', 'stroke-dasharray'],
+  ['strokeDashoffset', 'stroke-dashoffset'],
+  ['strokeLinecap', 'stroke-linecap'],
+  ['strokeLinejoin', 'stroke-linejoin'],
+  ['strokeMiterlimit', 'stroke-miterlimit'],
+  ['strokeOpacity', 'stroke-opacity'],
+  ['strokeWidth', 'stroke-width'],
+  ['textAnchor', 'text-anchor'],
+  ['textDecoration', 'text-decoration'],
+  ['textRendering', 'text-rendering'],
+  ['transformOrigin', 'transform-origin'],
+  ['underlinePosition', 'underline-position'],
+  ['underlineThickness', 'underline-thickness'],
+  ['unicodeBidi', 'unicode-bidi'],
+  ['unicodeRange', 'unicode-range'],
+  ['unitsPerEm', 'units-per-em'],
+  ['vAlphabetic', 'v-alphabetic'],
+  ['vHanging', 'v-hanging'],
+  ['vIdeographic', 'v-ideographic'],
+  ['vMathematical', 'v-mathematical'],
+  ['vectorEffect', 'vector-effect'],
+  ['vertAdvY', 'vert-adv-y'],
+  ['vertOriginX', 'vert-origin-x'],
+  ['vertOriginY', 'vert-origin-y'],
+  ['wordSpacing', 'word-spacing'],
+  ['writingMode', 'writing-mode'],
+  ['xmlnsXlink', 'xmlns:xlink'],
+  ['xHeight', 'x-height'],
+]);
+
+export default function (name: string): string {
+  return aliases.get(name) || name;
+}
diff --git a/packages/react-dom-bindings/src/shared/hyphenateStyleName.js b/packages/react-dom-bindings/src/shared/hyphenateStyleName.js
new file mode 100644
index 00000000000..5d4df5969ab
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/hyphenateStyleName.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 uppercasePattern = /([A-Z])/g;
+const msPattern = /^ms-/;
+
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ */
+export default function hyphenateStyleName(name: string): string {
+  return name
+    .replace(uppercasePattern, '-$1')
+    .toLowerCase()
+    .replace(msPattern, '-ms-');
+}
diff --git a/packages/react-dom-bindings/src/shared/isAttributeNameSafe.js b/packages/react-dom-bindings/src/shared/isAttributeNameSafe.js
new file mode 100644
index 00000000000..77cf005e404
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/isAttributeNameSafe.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 hasOwnProperty from 'shared/hasOwnProperty';
+
+const ATTRIBUTE_NAME_START_CHAR =
+  ':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD';
+export const ATTRIBUTE_NAME_CHAR: string =
+  ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
+
+const VALID_ATTRIBUTE_NAME_REGEX: RegExp = new RegExp(
+  '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$',
+);
+
+const illegalAttributeNameCache: {[string]: boolean} = {};
+const validatedAttributeNameCache: {[string]: boolean} = {};
+
+export default function isAttributeNameSafe(attributeName: string): boolean {
+  if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) {
+    return true;
+  }
+  if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) {
+    return false;
+  }
+  if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
+    validatedAttributeNameCache[attributeName] = true;
+    return true;
+  }
+  illegalAttributeNameCache[attributeName] = true;
+  if (__DEV__) {
+    console.error('Invalid attribute name: `%s`', attributeName);
+  }
+  return false;
+}
diff --git a/packages/react-dom-bindings/src/shared/isCustomElement.js b/packages/react-dom-bindings/src/shared/isCustomElement.js
new file mode 100644
index 00000000000..c5465010407
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/isCustomElement.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isCustomElement(tagName: string, props: Object): boolean {
+  if (tagName.indexOf('-') === -1) {
+    return false;
+  }
+  switch (tagName) {
+    // These are reserved SVG and MathML elements.
+    // We don't mind this list too much because we expect it to never grow.
+    // The alternative is to track the namespace in a few places which is convoluted.
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts
+    case 'annotation-xml':
+    case 'color-profile':
+    case 'font-face':
+    case 'font-face-src':
+    case 'font-face-uri':
+    case 'font-face-format':
+    case 'font-face-name':
+    case 'missing-glyph':
+      return false;
+    default:
+      return true;
+  }
+}
+
+export default isCustomElement;
diff --git a/packages/react-dom-bindings/src/shared/isUnitlessNumber.js b/packages/react-dom-bindings/src/shared/isUnitlessNumber.js
new file mode 100644
index 00000000000..f965140d053
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/isUnitlessNumber.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+const unitlessNumbers = new Set([
+  'animationIterationCount',
+  'aspectRatio',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexPositive',
+  'flexShrink',
+  'flexNegative',
+  'flexOrder',
+  'gridArea',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowSpan',
+  'gridRowStart',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnSpan',
+  'gridColumnStart',
+  'fontWeight',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'scale',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+  'fillOpacity', // SVG-related properties
+  'floodOpacity',
+  'stopOpacity',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+  'MozAnimationIterationCount', // Known Prefixed Properties
+  'MozBoxFlex', // TODO: Remove these since they shouldn't be used in modern code
+  'MozBoxFlexGroup',
+  'MozLineClamp',
+  'msAnimationIterationCount',
+  'msFlex',
+  'msZoom',
+  'msFlexGrow',
+  'msFlexNegative',
+  'msFlexOrder',
+  'msFlexPositive',
+  'msFlexShrink',
+  'msGridColumn',
+  'msGridColumnSpan',
+  'msGridRow',
+  'msGridRowSpan',
+  'WebkitAnimationIterationCount',
+  'WebkitBoxFlex',
+  'WebKitBoxFlexGroup',
+  'WebkitBoxOrdinalGroup',
+  'WebkitColumnCount',
+  'WebkitColumns',
+  'WebkitFlex',
+  'WebkitFlexGrow',
+  'WebkitFlexPositive',
+  'WebkitFlexShrink',
+  'WebkitLineClamp',
+]);
+export default function (name: string): boolean {
+  return unitlessNumbers.has(name);
+}
diff --git a/packages/react-dom-bindings/src/shared/possibleStandardNames.js b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
new file mode 100644
index 00000000000..369b87110b2
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
@@ -0,0 +1,509 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// When adding attributes to the HTML or SVG allowed attribute list, be sure to
+// also add them to this module to ensure casing and incorrect name
+// warnings.
+const possibleStandardNames = {
+  // HTML
+  accept: 'accept',
+  acceptcharset: 'acceptCharset',
+  'accept-charset': 'acceptCharset',
+  accesskey: 'accessKey',
+  action: 'action',
+  allowfullscreen: 'allowFullScreen',
+  alt: 'alt',
+  as: 'as',
+  async: 'async',
+  autocapitalize: 'autoCapitalize',
+  autocomplete: 'autoComplete',
+  autocorrect: 'autoCorrect',
+  autofocus: 'autoFocus',
+  autoplay: 'autoPlay',
+  autosave: 'autoSave',
+  capture: 'capture',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  challenge: 'challenge',
+  charset: 'charSet',
+  checked: 'checked',
+  children: 'children',
+  cite: 'cite',
+  class: 'className',
+  classid: 'classID',
+  classname: 'className',
+  cols: 'cols',
+  colspan: 'colSpan',
+  content: 'content',
+  contenteditable: 'contentEditable',
+  contextmenu: 'contextMenu',
+  controls: 'controls',
+  controlslist: 'controlsList',
+  coords: 'coords',
+  crossorigin: 'crossOrigin',
+  dangerouslysetinnerhtml: 'dangerouslySetInnerHTML',
+  data: 'data',
+  datetime: 'dateTime',
+  default: 'default',
+  defaultchecked: 'defaultChecked',
+  defaultvalue: 'defaultValue',
+  defer: 'defer',
+  dir: 'dir',
+  disabled: 'disabled',
+  disablepictureinpicture: 'disablePictureInPicture',
+  disableremoteplayback: 'disableRemotePlayback',
+  download: 'download',
+  draggable: 'draggable',
+  enctype: 'encType',
+  enterkeyhint: 'enterKeyHint',
+  fetchpriority: 'fetchPriority',
+  for: 'htmlFor',
+  form: 'form',
+  formmethod: 'formMethod',
+  formaction: 'formAction',
+  formenctype: 'formEncType',
+  formnovalidate: 'formNoValidate',
+  formtarget: 'formTarget',
+  frameborder: 'frameBorder',
+  headers: 'headers',
+  height: 'height',
+  hidden: 'hidden',
+  high: 'high',
+  href: 'href',
+  hreflang: 'hrefLang',
+  htmlfor: 'htmlFor',
+  httpequiv: 'httpEquiv',
+  'http-equiv': 'httpEquiv',
+  icon: 'icon',
+  id: 'id',
+  imagesizes: 'imageSizes',
+  imagesrcset: 'imageSrcSet',
+  inert: 'inert',
+  innerhtml: 'innerHTML',
+  inputmode: 'inputMode',
+  integrity: 'integrity',
+  is: 'is',
+  itemid: 'itemID',
+  itemprop: 'itemProp',
+  itemref: 'itemRef',
+  itemscope: 'itemScope',
+  itemtype: 'itemType',
+  keyparams: 'keyParams',
+  keytype: 'keyType',
+  kind: 'kind',
+  label: 'label',
+  lang: 'lang',
+  list: 'list',
+  loop: 'loop',
+  low: 'low',
+  manifest: 'manifest',
+  marginwidth: 'marginWidth',
+  marginheight: 'marginHeight',
+  max: 'max',
+  maxlength: 'maxLength',
+  media: 'media',
+  mediagroup: 'mediaGroup',
+  method: 'method',
+  min: 'min',
+  minlength: 'minLength',
+  multiple: 'multiple',
+  muted: 'muted',
+  name: 'name',
+  nomodule: 'noModule',
+  nonce: 'nonce',
+  novalidate: 'noValidate',
+  open: 'open',
+  optimum: 'optimum',
+  pattern: 'pattern',
+  placeholder: 'placeholder',
+  playsinline: 'playsInline',
+  poster: 'poster',
+  preload: 'preload',
+  profile: 'profile',
+  radiogroup: 'radioGroup',
+  readonly: 'readOnly',
+  referrerpolicy: 'referrerPolicy',
+  rel: 'rel',
+  required: 'required',
+  reversed: 'reversed',
+  role: 'role',
+  rows: 'rows',
+  rowspan: 'rowSpan',
+  sandbox: 'sandbox',
+  scope: 'scope',
+  scoped: 'scoped',
+  scrolling: 'scrolling',
+  seamless: 'seamless',
+  selected: 'selected',
+  shape: 'shape',
+  size: 'size',
+  sizes: 'sizes',
+  span: 'span',
+  spellcheck: 'spellCheck',
+  src: 'src',
+  srcdoc: 'srcDoc',
+  srclang: 'srcLang',
+  srcset: 'srcSet',
+  start: 'start',
+  step: 'step',
+  style: 'style',
+  summary: 'summary',
+  tabindex: 'tabIndex',
+  target: 'target',
+  title: 'title',
+  type: 'type',
+  usemap: 'useMap',
+  value: 'value',
+  width: 'width',
+  wmode: 'wmode',
+  wrap: 'wrap',
+
+  // SVG
+  about: 'about',
+  accentheight: 'accentHeight',
+  'accent-height': 'accentHeight',
+  accumulate: 'accumulate',
+  additive: 'additive',
+  alignmentbaseline: 'alignmentBaseline',
+  'alignment-baseline': 'alignmentBaseline',
+  allowreorder: 'allowReorder',
+  alphabetic: 'alphabetic',
+  amplitude: 'amplitude',
+  arabicform: 'arabicForm',
+  'arabic-form': 'arabicForm',
+  ascent: 'ascent',
+  attributename: 'attributeName',
+  attributetype: 'attributeType',
+  autoreverse: 'autoReverse',
+  azimuth: 'azimuth',
+  basefrequency: 'baseFrequency',
+  baselineshift: 'baselineShift',
+  'baseline-shift': 'baselineShift',
+  baseprofile: 'baseProfile',
+  bbox: 'bbox',
+  begin: 'begin',
+  bias: 'bias',
+  by: 'by',
+  calcmode: 'calcMode',
+  capheight: 'capHeight',
+  'cap-height': 'capHeight',
+  clip: 'clip',
+  clippath: 'clipPath',
+  'clip-path': 'clipPath',
+  clippathunits: 'clipPathUnits',
+  cliprule: 'clipRule',
+  'clip-rule': 'clipRule',
+  color: 'color',
+  colorinterpolation: 'colorInterpolation',
+  'color-interpolation': 'colorInterpolation',
+  colorinterpolationfilters: 'colorInterpolationFilters',
+  'color-interpolation-filters': 'colorInterpolationFilters',
+  colorprofile: 'colorProfile',
+  'color-profile': 'colorProfile',
+  colorrendering: 'colorRendering',
+  'color-rendering': 'colorRendering',
+  contentscripttype: 'contentScriptType',
+  contentstyletype: 'contentStyleType',
+  cursor: 'cursor',
+  cx: 'cx',
+  cy: 'cy',
+  d: 'd',
+  datatype: 'datatype',
+  decelerate: 'decelerate',
+  descent: 'descent',
+  diffuseconstant: 'diffuseConstant',
+  direction: 'direction',
+  display: 'display',
+  divisor: 'divisor',
+  dominantbaseline: 'dominantBaseline',
+  'dominant-baseline': 'dominantBaseline',
+  dur: 'dur',
+  dx: 'dx',
+  dy: 'dy',
+  edgemode: 'edgeMode',
+  elevation: 'elevation',
+  enablebackground: 'enableBackground',
+  'enable-background': 'enableBackground',
+  end: 'end',
+  exponent: 'exponent',
+  externalresourcesrequired: 'externalResourcesRequired',
+  fill: 'fill',
+  fillopacity: 'fillOpacity',
+  'fill-opacity': 'fillOpacity',
+  fillrule: 'fillRule',
+  'fill-rule': 'fillRule',
+  filter: 'filter',
+  filterres: 'filterRes',
+  filterunits: 'filterUnits',
+  floodopacity: 'floodOpacity',
+  'flood-opacity': 'floodOpacity',
+  floodcolor: 'floodColor',
+  'flood-color': 'floodColor',
+  focusable: 'focusable',
+  fontfamily: 'fontFamily',
+  'font-family': 'fontFamily',
+  fontsize: 'fontSize',
+  'font-size': 'fontSize',
+  fontsizeadjust: 'fontSizeAdjust',
+  'font-size-adjust': 'fontSizeAdjust',
+  fontstretch: 'fontStretch',
+  'font-stretch': 'fontStretch',
+  fontstyle: 'fontStyle',
+  'font-style': 'fontStyle',
+  fontvariant: 'fontVariant',
+  'font-variant': 'fontVariant',
+  fontweight: 'fontWeight',
+  'font-weight': 'fontWeight',
+  format: 'format',
+  from: 'from',
+  fx: 'fx',
+  fy: 'fy',
+  g1: 'g1',
+  g2: 'g2',
+  glyphname: 'glyphName',
+  'glyph-name': 'glyphName',
+  glyphorientationhorizontal: 'glyphOrientationHorizontal',
+  'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
+  glyphorientationvertical: 'glyphOrientationVertical',
+  'glyph-orientation-vertical': 'glyphOrientationVertical',
+  glyphref: 'glyphRef',
+  gradienttransform: 'gradientTransform',
+  gradientunits: 'gradientUnits',
+  hanging: 'hanging',
+  horizadvx: 'horizAdvX',
+  'horiz-adv-x': 'horizAdvX',
+  horizoriginx: 'horizOriginX',
+  'horiz-origin-x': 'horizOriginX',
+  ideographic: 'ideographic',
+  imagerendering: 'imageRendering',
+  'image-rendering': 'imageRendering',
+  in2: 'in2',
+  in: 'in',
+  inlist: 'inlist',
+  intercept: 'intercept',
+  k1: 'k1',
+  k2: 'k2',
+  k3: 'k3',
+  k4: 'k4',
+  k: 'k',
+  kernelmatrix: 'kernelMatrix',
+  kernelunitlength: 'kernelUnitLength',
+  kerning: 'kerning',
+  keypoints: 'keyPoints',
+  keysplines: 'keySplines',
+  keytimes: 'keyTimes',
+  lengthadjust: 'lengthAdjust',
+  letterspacing: 'letterSpacing',
+  'letter-spacing': 'letterSpacing',
+  lightingcolor: 'lightingColor',
+  'lighting-color': 'lightingColor',
+  limitingconeangle: 'limitingConeAngle',
+  local: 'local',
+  markerend: 'markerEnd',
+  'marker-end': 'markerEnd',
+  markerheight: 'markerHeight',
+  markermid: 'markerMid',
+  'marker-mid': 'markerMid',
+  markerstart: 'markerStart',
+  'marker-start': 'markerStart',
+  markerunits: 'markerUnits',
+  markerwidth: 'markerWidth',
+  mask: 'mask',
+  maskcontentunits: 'maskContentUnits',
+  maskunits: 'maskUnits',
+  mathematical: 'mathematical',
+  mode: 'mode',
+  numoctaves: 'numOctaves',
+  offset: 'offset',
+  opacity: 'opacity',
+  operator: 'operator',
+  order: 'order',
+  orient: 'orient',
+  orientation: 'orientation',
+  origin: 'origin',
+  overflow: 'overflow',
+  overlineposition: 'overlinePosition',
+  'overline-position': 'overlinePosition',
+  overlinethickness: 'overlineThickness',
+  'overline-thickness': 'overlineThickness',
+  paintorder: 'paintOrder',
+  'paint-order': 'paintOrder',
+  panose1: 'panose1',
+  'panose-1': 'panose1',
+  pathlength: 'pathLength',
+  patterncontentunits: 'patternContentUnits',
+  patterntransform: 'patternTransform',
+  patternunits: 'patternUnits',
+  pointerevents: 'pointerEvents',
+  'pointer-events': 'pointerEvents',
+  points: 'points',
+  pointsatx: 'pointsAtX',
+  pointsaty: 'pointsAtY',
+  pointsatz: 'pointsAtZ',
+  popover: 'popover',
+  popovertarget: 'popoverTarget',
+  popovertargetaction: 'popoverTargetAction',
+  prefix: 'prefix',
+  preservealpha: 'preserveAlpha',
+  preserveaspectratio: 'preserveAspectRatio',
+  primitiveunits: 'primitiveUnits',
+  property: 'property',
+  r: 'r',
+  radius: 'radius',
+  refx: 'refX',
+  refy: 'refY',
+  renderingintent: 'renderingIntent',
+  'rendering-intent': 'renderingIntent',
+  repeatcount: 'repeatCount',
+  repeatdur: 'repeatDur',
+  requiredextensions: 'requiredExtensions',
+  requiredfeatures: 'requiredFeatures',
+  resource: 'resource',
+  restart: 'restart',
+  result: 'result',
+  results: 'results',
+  rotate: 'rotate',
+  rx: 'rx',
+  ry: 'ry',
+  scale: 'scale',
+  security: 'security',
+  seed: 'seed',
+  shaperendering: 'shapeRendering',
+  'shape-rendering': 'shapeRendering',
+  slope: 'slope',
+  spacing: 'spacing',
+  specularconstant: 'specularConstant',
+  specularexponent: 'specularExponent',
+  speed: 'speed',
+  spreadmethod: 'spreadMethod',
+  startoffset: 'startOffset',
+  stddeviation: 'stdDeviation',
+  stemh: 'stemh',
+  stemv: 'stemv',
+  stitchtiles: 'stitchTiles',
+  stopcolor: 'stopColor',
+  'stop-color': 'stopColor',
+  stopopacity: 'stopOpacity',
+  'stop-opacity': 'stopOpacity',
+  strikethroughposition: 'strikethroughPosition',
+  'strikethrough-position': 'strikethroughPosition',
+  strikethroughthickness: 'strikethroughThickness',
+  'strikethrough-thickness': 'strikethroughThickness',
+  string: 'string',
+  stroke: 'stroke',
+  strokedasharray: 'strokeDasharray',
+  'stroke-dasharray': 'strokeDasharray',
+  strokedashoffset: 'strokeDashoffset',
+  'stroke-dashoffset': 'strokeDashoffset',
+  strokelinecap: 'strokeLinecap',
+  'stroke-linecap': 'strokeLinecap',
+  strokelinejoin: 'strokeLinejoin',
+  'stroke-linejoin': 'strokeLinejoin',
+  strokemiterlimit: 'strokeMiterlimit',
+  'stroke-miterlimit': 'strokeMiterlimit',
+  strokewidth: 'strokeWidth',
+  'stroke-width': 'strokeWidth',
+  strokeopacity: 'strokeOpacity',
+  'stroke-opacity': 'strokeOpacity',
+  suppresscontenteditablewarning: 'suppressContentEditableWarning',
+  suppresshydrationwarning: 'suppressHydrationWarning',
+  surfacescale: 'surfaceScale',
+  systemlanguage: 'systemLanguage',
+  tablevalues: 'tableValues',
+  targetx: 'targetX',
+  targety: 'targetY',
+  textanchor: 'textAnchor',
+  'text-anchor': 'textAnchor',
+  textdecoration: 'textDecoration',
+  'text-decoration': 'textDecoration',
+  textlength: 'textLength',
+  textrendering: 'textRendering',
+  'text-rendering': 'textRendering',
+  to: 'to',
+  transform: 'transform',
+  transformorigin: 'transformOrigin',
+  'transform-origin': 'transformOrigin',
+  typeof: 'typeof',
+  u1: 'u1',
+  u2: 'u2',
+  underlineposition: 'underlinePosition',
+  'underline-position': 'underlinePosition',
+  underlinethickness: 'underlineThickness',
+  'underline-thickness': 'underlineThickness',
+  unicode: 'unicode',
+  unicodebidi: 'unicodeBidi',
+  'unicode-bidi': 'unicodeBidi',
+  unicoderange: 'unicodeRange',
+  'unicode-range': 'unicodeRange',
+  unitsperem: 'unitsPerEm',
+  'units-per-em': 'unitsPerEm',
+  unselectable: 'unselectable',
+  valphabetic: 'vAlphabetic',
+  'v-alphabetic': 'vAlphabetic',
+  values: 'values',
+  vectoreffect: 'vectorEffect',
+  'vector-effect': 'vectorEffect',
+  version: 'version',
+  vertadvy: 'vertAdvY',
+  'vert-adv-y': 'vertAdvY',
+  vertoriginx: 'vertOriginX',
+  'vert-origin-x': 'vertOriginX',
+  vertoriginy: 'vertOriginY',
+  'vert-origin-y': 'vertOriginY',
+  vhanging: 'vHanging',
+  'v-hanging': 'vHanging',
+  videographic: 'vIdeographic',
+  'v-ideographic': 'vIdeographic',
+  viewbox: 'viewBox',
+  viewtarget: 'viewTarget',
+  visibility: 'visibility',
+  vmathematical: 'vMathematical',
+  'v-mathematical': 'vMathematical',
+  vocab: 'vocab',
+  widths: 'widths',
+  wordspacing: 'wordSpacing',
+  'word-spacing': 'wordSpacing',
+  writingmode: 'writingMode',
+  'writing-mode': 'writingMode',
+  x1: 'x1',
+  x2: 'x2',
+  x: 'x',
+  xchannelselector: 'xChannelSelector',
+  xheight: 'xHeight',
+  'x-height': 'xHeight',
+  xlinkactuate: 'xlinkActuate',
+  'xlink:actuate': 'xlinkActuate',
+  xlinkarcrole: 'xlinkArcrole',
+  'xlink:arcrole': 'xlinkArcrole',
+  xlinkhref: 'xlinkHref',
+  'xlink:href': 'xlinkHref',
+  xlinkrole: 'xlinkRole',
+  'xlink:role': 'xlinkRole',
+  xlinkshow: 'xlinkShow',
+  'xlink:show': 'xlinkShow',
+  xlinktitle: 'xlinkTitle',
+  'xlink:title': 'xlinkTitle',
+  xlinktype: 'xlinkType',
+  'xlink:type': 'xlinkType',
+  xmlbase: 'xmlBase',
+  'xml:base': 'xmlBase',
+  xmllang: 'xmlLang',
+  'xml:lang': 'xmlLang',
+  xmlns: 'xmlns',
+  'xml:space': 'xmlSpace',
+  xmlnsxlink: 'xmlnsXlink',
+  'xmlns:xlink': 'xmlnsXlink',
+  xmlspace: 'xmlSpace',
+  y1: 'y1',
+  y2: 'y2',
+  y: 'y',
+  ychannelselector: 'yChannelSelector',
+  z: 'z',
+  zoomandpan: 'zoomAndPan',
+};
+
+export default possibleStandardNames;
diff --git a/packages/react-dom-bindings/src/shared/sanitizeURL.js b/packages/react-dom-bindings/src/shared/sanitizeURL.js
new file mode 100644
index 00000000000..477bb9f9c92
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/sanitizeURL.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// A javascript: URL can contain leading C0 control or \u0020 SPACE,
+// and any newline or tab are filtered out as if they're not part of the URL.
+// https://url.spec.whatwg.org/#url-parsing
+// Tab or newline are defined as \r\n\t:
+// https://infra.spec.whatwg.org/#ascii-tab-or-newline
+// A C0 control is a code point in the range \u0000 NULL to \u001F
+// INFORMATION SEPARATOR ONE, inclusive:
+// https://infra.spec.whatwg.org/#c0-control-or-space
+
+const isJavaScriptProtocol =
+  /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i;
+
+function sanitizeURL<T>(url: T): T | string {
+  // We should never have symbols here because they get filtered out elsewhere.
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  if (isJavaScriptProtocol.test('' + (url: any))) {
+    // Return a different javascript: url that doesn't cause any side-effects and just
+    // throws if ever visited.
+    // eslint-disable-next-line no-script-url
+    return "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')";
+  }
+  return url;
+}
+
+export default sanitizeURL;
diff --git a/packages/react-dom-bindings/src/shared/validAriaProperties.js b/packages/react-dom-bindings/src/shared/validAriaProperties.js
new file mode 100644
index 00000000000..9421ba5a156
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/validAriaProperties.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const ariaProperties = {
+  'aria-current': 0, // state
+  'aria-description': 0,
+  'aria-details': 0,
+  'aria-disabled': 0, // state
+  'aria-hidden': 0, // state
+  'aria-invalid': 0, // state
+  'aria-keyshortcuts': 0,
+  'aria-label': 0,
+  'aria-roledescription': 0,
+  // Widget Attributes
+  'aria-autocomplete': 0,
+  'aria-checked': 0,
+  'aria-expanded': 0,
+  'aria-haspopup': 0,
+  'aria-level': 0,
+  'aria-modal': 0,
+  'aria-multiline': 0,
+  'aria-multiselectable': 0,
+  'aria-orientation': 0,
+  'aria-placeholder': 0,
+  'aria-pressed': 0,
+  'aria-readonly': 0,
+  'aria-required': 0,
+  'aria-selected': 0,
+  'aria-sort': 0,
+  'aria-valuemax': 0,
+  'aria-valuemin': 0,
+  'aria-valuenow': 0,
+  'aria-valuetext': 0,
+  // Live Region Attributes
+  'aria-atomic': 0,
+  'aria-busy': 0,
+  'aria-live': 0,
+  'aria-relevant': 0,
+  // Drag-and-Drop Attributes
+  'aria-dropeffect': 0,
+  'aria-grabbed': 0,
+  // Relationship Attributes
+  'aria-activedescendant': 0,
+  'aria-colcount': 0,
+  'aria-colindex': 0,
+  'aria-colspan': 0,
+  'aria-controls': 0,
+  'aria-describedby': 0,
+  'aria-errormessage': 0,
+  'aria-flowto': 0,
+  'aria-labelledby': 0,
+  'aria-owns': 0,
+  'aria-posinset': 0,
+  'aria-rowcount': 0,
+  'aria-rowindex': 0,
+  'aria-rowspan': 0,
+  'aria-setsize': 0,
+  // ARIA 1.3 Attributes
+  'aria-braillelabel': 0,
+  'aria-brailleroledescription': 0,
+  'aria-colindextext': 0,
+  'aria-rowindextext': 0,
+};
+
+export default ariaProperties;
diff --git a/packages/react-dom-bindings/src/shared/warnValidStyle.js b/packages/react-dom-bindings/src/shared/warnValidStyle.js
new file mode 100644
index 00000000000..6970669a86b
--- /dev/null
+++ b/packages/react-dom-bindings/src/shared/warnValidStyle.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// 'msTransform' is correct, but the other prefixes should be capitalized
+const badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
+const msPattern = /^-ms-/;
+const hyphenPattern = /-(.)/g;
+
+// style values shouldn't contain a semicolon
+const badStyleValueWithSemicolonPattern = /;\s*$/;
+
+const warnedStyleNames = {};
+const warnedStyleValues = {};
+let warnedForNaNValue = false;
+let warnedForInfinityValue = false;
+
+function camelize(string) {
+  return string.replace(hyphenPattern, function (_, character) {
+    return character.toUpperCase();
+  });
+}
+
+function warnHyphenatedStyleName(name) {
+  if (__DEV__) {
+    if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+      return;
+    }
+
+    warnedStyleNames[name] = true;
+    console.error(
+      'Unsupported style property %s. Did you mean %s?',
+      name,
+      // As Andi Smith suggests
+      // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
+      // is converted to lowercase `ms`.
+      camelize(name.replace(msPattern, 'ms-')),
+    );
+  }
+}
+
+function warnBadVendoredStyleName(name) {
+  if (__DEV__) {
+    if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+      return;
+    }
+
+    warnedStyleNames[name] = true;
+    console.error(
+      'Unsupported vendor-prefixed style property %s. Did you mean %s?',
+      name,
+      name.charAt(0).toUpperCase() + name.slice(1),
+    );
+  }
+}
+
+function warnStyleValueWithSemicolon(name, value) {
+  if (__DEV__) {
+    if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
+      return;
+    }
+
+    warnedStyleValues[value] = true;
+    console.error(
+      "Style property values shouldn't contain a semicolon. " +
+        'Try "%s: %s" instead.',
+      name,
+      value.replace(badStyleValueWithSemicolonPattern, ''),
+    );
+  }
+}
+
+function warnStyleValueIsNaN(name, value) {
+  if (__DEV__) {
+    if (warnedForNaNValue) {
+      return;
+    }
+
+    warnedForNaNValue = true;
+    console.error(
+      '`NaN` is an invalid value for the `%s` css style property.',
+      name,
+    );
+  }
+}
+
+function warnStyleValueIsInfinity(name, value) {
+  if (__DEV__) {
+    if (warnedForInfinityValue) {
+      return;
+    }
+
+    warnedForInfinityValue = true;
+    console.error(
+      '`Infinity` is an invalid value for the `%s` css style property.',
+      name,
+    );
+  }
+}
+
+function warnValidStyle(name, value) {
+  if (__DEV__) {
+    if (name.indexOf('-') > -1) {
+      warnHyphenatedStyleName(name);
+    } else if (badVendoredStyleNamePattern.test(name)) {
+      warnBadVendoredStyleName(name);
+    } else if (badStyleValueWithSemicolonPattern.test(value)) {
+      warnStyleValueWithSemicolon(name, value);
+    }
+
+    if (typeof value === 'number') {
+      if (isNaN(value)) {
+        warnStyleValueIsNaN(name, value);
+      } else if (!isFinite(value)) {
+        warnStyleValueIsInfinity(name, value);
+      }
+    }
+  }
+}
+
+export default warnValidStyle;
diff --git a/packages/react-dom/README.md b/packages/react-dom/README.md
new file mode 100644
index 00000000000..b078f194ce6
--- /dev/null
+++ b/packages/react-dom/README.md
@@ -0,0 +1,60 @@
+# `react-dom`
+
+This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as `react` to npm.
+
+## Installation
+
+```sh
+npm install react react-dom
+```
+
+## Usage
+
+### In the browser
+
+```js
+import { createRoot } from 'react-dom/client';
+
+function App() {
+  return <div>Hello World</div>;
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+### On the server
+
+```js
+import { renderToPipeableStream } from 'react-dom/server';
+
+function App() {
+  return <div>Hello World</div>;
+}
+
+function handleRequest(res) {
+  // ... in your server handler ...
+  const stream = renderToPipeableStream(<App />, {
+    onShellReady() {
+      res.statusCode = 200;
+      res.setHeader('Content-type', 'text/html');
+      stream.pipe(res);
+    },
+    // ...
+  });
+}
+```
+
+## API
+
+### `react-dom`
+
+See https://react.dev/reference/react-dom
+
+### `react-dom/client`
+
+See https://react.dev/reference/react-dom/client
+
+### `react-dom/server`
+
+See https://react.dev/reference/react-dom/server
diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js
new file mode 100644
index 00000000000..4d57f56da05
--- /dev/null
+++ b/packages/react-dom/client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {createRoot, hydrateRoot, version} from './src/client/ReactDOMClient';
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
new file mode 100644
index 00000000000..ca91fdcea1c
--- /dev/null
+++ b/packages/react-dom/index.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './src/ReactDOMSharedInternals';
+export {
+  createPortal,
+  flushSync,
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+  requestFormReset,
+  unstable_batchedUpdates,
+  useFormState,
+  useFormStatus,
+  version,
+} from './src/shared/ReactDOM';
diff --git a/packages/react-dom/npm/client.js b/packages/react-dom/npm/client.js
new file mode 100644
index 00000000000..02e6e22500d
--- /dev/null
+++ b/packages/react-dom/npm/client.js
@@ -0,0 +1,38 @@
+'use strict';
+
+function checkDCE() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
+  ) {
+    return;
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // This branch is unreachable because this function is only called
+    // in production, but the condition is true only in development.
+    // Therefore if the branch is still here, dead code elimination wasn't
+    // properly applied.
+    // Don't change the message. React DevTools relies on it. Also make sure
+    // this message doesn't occur elsewhere in this function, or it will cause
+    // a false positive.
+    throw new Error('^_^');
+  }
+  try {
+    // Verify that the code above has been dead code eliminated (DCE'd).
+    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+  } catch (err) {
+    // DevTools shouldn't crash React, no matter what.
+    // We should still report in case we break this code.
+    console.error(err);
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  // DCE check should happen before ReactDOM bundle executes so that
+  // DevTools can report bad minification during injection.
+  checkDCE();
+  module.exports = require('./cjs/react-dom-client.production.js');
+} else {
+  module.exports = require('./cjs/react-dom-client.development.js');
+}
diff --git a/packages/react-dom/npm/client.react-server.js b/packages/react-dom/npm/client.react-server.js
new file mode 100644
index 00000000000..a00f3d9b6cf
--- /dev/null
+++ b/packages/react-dom/npm/client.react-server.js
@@ -0,0 +1,5 @@
+'use strict';
+
+throw new Error(
+  'react-dom/client is not supported in React Server Components.'
+);
diff --git a/packages/react-dom/npm/index.js b/packages/react-dom/npm/index.js
new file mode 100644
index 00000000000..973f373e461
--- /dev/null
+++ b/packages/react-dom/npm/index.js
@@ -0,0 +1,38 @@
+'use strict';
+
+function checkDCE() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
+  ) {
+    return;
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // This branch is unreachable because this function is only called
+    // in production, but the condition is true only in development.
+    // Therefore if the branch is still here, dead code elimination wasn't
+    // properly applied.
+    // Don't change the message. React DevTools relies on it. Also make sure
+    // this message doesn't occur elsewhere in this function, or it will cause
+    // a false positive.
+    throw new Error('^_^');
+  }
+  try {
+    // Verify that the code above has been dead code eliminated (DCE'd).
+    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+  } catch (err) {
+    // DevTools shouldn't crash React, no matter what.
+    // We should still report in case we break this code.
+    console.error(err);
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  // DCE check should happen before ReactDOM bundle executes so that
+  // DevTools can report bad minification during injection.
+  checkDCE();
+  module.exports = require('./cjs/react-dom.production.js');
+} else {
+  module.exports = require('./cjs/react-dom.development.js');
+}
diff --git a/packages/react-dom/npm/profiling.js b/packages/react-dom/npm/profiling.js
new file mode 100644
index 00000000000..29e4965c663
--- /dev/null
+++ b/packages/react-dom/npm/profiling.js
@@ -0,0 +1,38 @@
+'use strict';
+
+function checkDCE() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
+  ) {
+    return;
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // This branch is unreachable because this function is only called
+    // in production, but the condition is true only in development.
+    // Therefore if the branch is still here, dead code elimination wasn't
+    // properly applied.
+    // Don't change the message. React DevTools relies on it. Also make sure
+    // this message doesn't occur elsewhere in this function, or it will cause
+    // a false positive.
+    throw new Error('^_^');
+  }
+  try {
+    // Verify that the code above has been dead code eliminated (DCE'd).
+    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+  } catch (err) {
+    // DevTools shouldn't crash React, no matter what.
+    // We should still report in case we break this code.
+    console.error(err);
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  // DCE check should happen before ReactDOM bundle executes so that
+  // DevTools can report bad minification during injection.
+  checkDCE();
+  module.exports = require('./cjs/react-dom-profiling.profiling.js');
+} else {
+  module.exports = require('./cjs/react-dom-profiling.development.js');
+}
diff --git a/packages/react-dom/npm/profiling.react-server.js b/packages/react-dom/npm/profiling.react-server.js
new file mode 100644
index 00000000000..434474e4215
--- /dev/null
+++ b/packages/react-dom/npm/profiling.react-server.js
@@ -0,0 +1,5 @@
+'use strict';
+
+throw new Error(
+  'react-dom/profiling is not supported in React Server Components.'
+);
diff --git a/packages/react-dom/npm/react-dom.react-server.js b/packages/react-dom/npm/react-dom.react-server.js
new file mode 100644
index 00000000000..065c99003f3
--- /dev/null
+++ b/packages/react-dom/npm/react-dom.react-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom.react-server.production.js');
+} else {
+  module.exports = require('./cjs/react-dom.react-server.development.js');
+}
diff --git a/packages/react-dom/npm/server.browser.js b/packages/react-dom/npm/server.browser.js
new file mode 100644
index 00000000000..4d806652713
--- /dev/null
+++ b/packages/react-dom/npm/server.browser.js
@@ -0,0 +1,16 @@
+'use strict';
+
+var l, s;
+if (process.env.NODE_ENV === 'production') {
+  l = require('./cjs/react-dom-server-legacy.browser.production.js');
+  s = require('./cjs/react-dom-server.browser.production.js');
+} else {
+  l = require('./cjs/react-dom-server-legacy.browser.development.js');
+  s = require('./cjs/react-dom-server.browser.development.js');
+}
+
+exports.version = l.version;
+exports.renderToString = l.renderToString;
+exports.renderToStaticMarkup = l.renderToStaticMarkup;
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.resume = s.resume;
diff --git a/packages/react-dom/npm/server.bun.js b/packages/react-dom/npm/server.bun.js
new file mode 100644
index 00000000000..ec94e0f0bc4
--- /dev/null
+++ b/packages/react-dom/npm/server.bun.js
@@ -0,0 +1,19 @@
+'use strict';
+
+var b;
+var l;
+if (process.env.NODE_ENV === 'production') {
+  b = require('./cjs/react-dom-server.bun.production.js');
+  l = require('./cjs/react-dom-server-legacy.browser.production.js');
+} else {
+  b = require('./cjs/react-dom-server.bun.development.js');
+  l = require('./cjs/react-dom-server-legacy.browser.development.js');
+}
+
+exports.version = b.version;
+exports.renderToReadableStream = b.renderToReadableStream;
+exports.renderToPipeableStream = b.renderToPipeableStream;
+exports.resumeToPipeableStream = b.resumeToPipeableStream;
+exports.resume = b.resume;
+exports.renderToString = l.renderToString;
+exports.renderToStaticMarkup = l.renderToStaticMarkup;
diff --git a/packages/react-dom/npm/server.edge.js b/packages/react-dom/npm/server.edge.js
new file mode 100644
index 00000000000..cc05ed6120f
--- /dev/null
+++ b/packages/react-dom/npm/server.edge.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var b;
+var l;
+if (process.env.NODE_ENV === 'production') {
+  b = require('./cjs/react-dom-server.edge.production.js');
+  l = require('./cjs/react-dom-server-legacy.browser.production.js');
+} else {
+  b = require('./cjs/react-dom-server.edge.development.js');
+  l = require('./cjs/react-dom-server-legacy.browser.development.js');
+}
+
+exports.version = b.version;
+exports.renderToReadableStream = b.renderToReadableStream;
+exports.renderToString = l.renderToString;
+exports.renderToStaticMarkup = l.renderToStaticMarkup;
+exports.resume = b.resume;
diff --git a/packages/react-dom/npm/server.js b/packages/react-dom/npm/server.js
new file mode 100644
index 00000000000..02f1553990a
--- /dev/null
+++ b/packages/react-dom/npm/server.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server.node');
diff --git a/packages/react-dom/npm/server.node.js b/packages/react-dom/npm/server.node.js
new file mode 100644
index 00000000000..3feeac208fe
--- /dev/null
+++ b/packages/react-dom/npm/server.node.js
@@ -0,0 +1,18 @@
+'use strict';
+
+var l, s;
+if (process.env.NODE_ENV === 'production') {
+  l = require('./cjs/react-dom-server-legacy.node.production.js');
+  s = require('./cjs/react-dom-server.node.production.js');
+} else {
+  l = require('./cjs/react-dom-server-legacy.node.development.js');
+  s = require('./cjs/react-dom-server.node.development.js');
+}
+
+exports.version = l.version;
+exports.renderToString = l.renderToString;
+exports.renderToStaticMarkup = l.renderToStaticMarkup;
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.resumeToPipeableStream = s.resumeToPipeableStream;
+exports.resume = s.resume;
diff --git a/packages/react-dom/npm/server.react-server.js b/packages/react-dom/npm/server.react-server.js
new file mode 100644
index 00000000000..4126b4f9e3d
--- /dev/null
+++ b/packages/react-dom/npm/server.react-server.js
@@ -0,0 +1,5 @@
+'use strict';
+
+throw new Error(
+  'react-dom/server is not supported in React Server Components.'
+);
diff --git a/packages/react-dom/npm/static.browser.js b/packages/react-dom/npm/static.browser.js
new file mode 100644
index 00000000000..ddfe2b20896
--- /dev/null
+++ b/packages/react-dom/npm/static.browser.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-dom-server.browser.production.js');
+} else {
+  s = require('./cjs/react-dom-server.browser.development.js');
+}
+
+exports.version = s.version;
+exports.prerender = s.prerender;
+exports.resumeAndPrerender = s.resumeAndPrerender;
diff --git a/packages/react-dom/npm/static.edge.js b/packages/react-dom/npm/static.edge.js
new file mode 100644
index 00000000000..ff770374b31
--- /dev/null
+++ b/packages/react-dom/npm/static.edge.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-dom-server.edge.production.js');
+} else {
+  s = require('./cjs/react-dom-server.edge.development.js');
+}
+
+exports.version = s.version;
+exports.prerender = s.prerender;
+exports.resumeAndPrerender = s.resumeAndPrerender;
diff --git a/packages/react-dom/npm/static.js b/packages/react-dom/npm/static.js
new file mode 100644
index 00000000000..2e39a9b183d
--- /dev/null
+++ b/packages/react-dom/npm/static.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./static.node');
diff --git a/packages/react-dom/npm/static.node.js b/packages/react-dom/npm/static.node.js
new file mode 100644
index 00000000000..24fc9cbc20f
--- /dev/null
+++ b/packages/react-dom/npm/static.node.js
@@ -0,0 +1,14 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-dom-server.node.production.js');
+} else {
+  s = require('./cjs/react-dom-server.node.development.js');
+}
+
+exports.version = s.version;
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
+exports.prerender = s.prerender;
+exports.resumeAndPrerenderToNodeStream = s.resumeAndPrerenderToNodeStream;
+exports.resumeAndPrerender = s.resumeAndPrerender;
diff --git a/packages/react-dom/npm/static.react-server.js b/packages/react-dom/npm/static.react-server.js
new file mode 100644
index 00000000000..8325d617706
--- /dev/null
+++ b/packages/react-dom/npm/static.react-server.js
@@ -0,0 +1,5 @@
+'use strict';
+
+throw new Error(
+  'react-dom/static is not supported in React Server Components.'
+);
diff --git a/packages/react-dom/npm/test-utils.js b/packages/react-dom/npm/test-utils.js
new file mode 100644
index 00000000000..bc945913b97
--- /dev/null
+++ b/packages/react-dom/npm/test-utils.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom-test-utils.production.js');
+} else {
+  module.exports = require('./cjs/react-dom-test-utils.development.js');
+}
diff --git a/packages/react-dom/npm/unstable_testing.js b/packages/react-dom/npm/unstable_testing.js
new file mode 100644
index 00000000000..7cc1d5a5606
--- /dev/null
+++ b/packages/react-dom/npm/unstable_testing.js
@@ -0,0 +1,38 @@
+'use strict';
+
+function checkDCE() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
+  ) {
+    return;
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // This branch is unreachable because this function is only called
+    // in production, but the condition is true only in development.
+    // Therefore if the branch is still here, dead code elimination wasn't
+    // properly applied.
+    // Don't change the message. React DevTools relies on it. Also make sure
+    // this message doesn't occur elsewhere in this function, or it will cause
+    // a false positive.
+    throw new Error('^_^');
+  }
+  try {
+    // Verify that the code above has been dead code eliminated (DCE'd).
+    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+  } catch (err) {
+    // DevTools shouldn't crash React, no matter what.
+    // We should still report in case we break this code.
+    console.error(err);
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  // DCE check should happen before ReactDOM bundle executes so that
+  // DevTools can report bad minification during injection.
+  checkDCE();
+  module.exports = require('./cjs/react-dom-unstable_testing.production.js');
+} else {
+  module.exports = require('./cjs/react-dom-unstable_testing.development.js');
+}
diff --git a/packages/react-dom/npm/unstable_testing.react-server.js b/packages/react-dom/npm/unstable_testing.react-server.js
new file mode 100644
index 00000000000..e2611f10f25
--- /dev/null
+++ b/packages/react-dom/npm/unstable_testing.react-server.js
@@ -0,0 +1,5 @@
+'use strict';
+
+throw new Error(
+  'react-dom/unstable_testing is not supported in React Server Components.'
+);
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
new file mode 100644
index 00000000000..351ed0684e6
--- /dev/null
+++ b/packages/react-dom/package.json
@@ -0,0 +1,126 @@
+{
+  "name": "react-dom",
+  "version": "19.3.0",
+  "description": "React package for working with the DOM.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-dom"
+  },
+  "keywords": [
+    "react"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "dependencies": {
+    "scheduler": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "client.js",
+    "client.react-server.js",
+    "index.js",
+    "profiling.js",
+    "profiling.react-server.js",
+    "react-dom.react-server.js",
+    "server.browser.js",
+    "server.bun.js",
+    "server.edge.js",
+    "server.js",
+    "server.node.js",
+    "server.react-server.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.js",
+    "static.node.js",
+    "static.react-server.js",
+    "test-utils.js",
+    "unstable_testing.js",
+    "unstable_testing.react-server.js",
+    "unstable_server-external-runtime.js",
+    "cjs/"
+  ],
+  "exports": {
+    ".": {
+      "react-server": "./react-dom.react-server.js",
+      "default": "./index.js"
+    },
+    "./client": {
+      "react-server": "./client.react-server.js",
+      "default": "./client.js"
+    },
+    "./server": {
+      "react-server": "./server.react-server.js",
+      "workerd": "./server.edge.js",
+      "bun": "./server.bun.js",
+      "deno": "./server.node.js",
+      "worker": "./server.browser.js",
+      "node": "./server.node.js",
+      "edge-light": "./server.edge.js",
+      "browser": "./server.browser.js",
+      "default": "./server.node.js"
+    },
+    "./server.browser": {
+      "react-server": "./server.react-server.js",
+      "default": "./server.browser.js"
+    },
+    "./server.bun": {
+      "react-server": "./server.react-server.js",
+      "default": "./server.bun.js"
+    },
+    "./server.edge": {
+      "react-server": "./server.react-server.js",
+      "default": "./server.edge.js"
+    },
+    "./server.node": {
+      "react-server": "./server.react-server.js",
+      "default": "./server.node.js"
+    },
+    "./static": {
+      "react-server": "./static.react-server.js",
+      "workerd": "./static.edge.js",
+      "deno": "./static.browser.js",
+      "worker": "./static.browser.js",
+      "node": "./static.node.js",
+      "edge-light": "./static.edge.js",
+      "browser": "./static.browser.js",
+      "default": "./static.node.js"
+    },
+    "./static.browser": {
+      "react-server": "./static.react-server.js",
+      "default": "./static.browser.js"
+    },
+    "./static.edge": {
+      "react-server": "./static.react-server.js",
+      "default": "./static.edge.js"
+    },
+    "./static.node": {
+      "react-server": "./static.react-server.js",
+      "default": "./static.node.js"
+    },
+    "./profiling": {
+      "react-server": "./profiling.react-server.js",
+      "default": "./profiling.js"
+    },
+    "./test-utils": "./test-utils.js",
+    "./unstable_testing": {
+      "react-server": "./unstable_testing.react-server.js",
+      "default": "./unstable_testing.js"
+    },
+    "./unstable_server-external-runtime": "./unstable_server-external-runtime.js",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "browser": {
+    "./server.js": "./server.browser.js",
+    "./static.js": "./static.browser.js"
+  }
+}
diff --git a/packages/react-dom/profiling.js b/packages/react-dom/profiling.js
new file mode 100644
index 00000000000..cdd2502fc00
--- /dev/null
+++ b/packages/react-dom/profiling.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 entrypoint should track the /client entrypoint
+export * from './client';
+export * from './index';
diff --git a/packages/react-dom/server.browser.js b/packages/react-dom/server.browser.js
new file mode 100644
index 00000000000..b27f4410dcc
--- /dev/null
+++ b/packages/react-dom/server.browser.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function renderToString() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToString.apply(
+    this,
+    arguments,
+  );
+}
+export function renderToStaticMarkup() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToStaticMarkup.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToReadableStream() {
+  return require('./src/server/react-dom-server.browser').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resume() {
+  return require('./src/server/react-dom-server.browser').resume.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/server.bun.js b/packages/react-dom/server.bun.js
new file mode 100644
index 00000000000..13e312e559a
--- /dev/null
+++ b/packages/react-dom/server.bun.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function renderToReadableStream() {
+  return require('./src/server/react-dom-server.bun').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToString() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToString.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToStaticMarkup() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToStaticMarkup.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resume() {
+  return require('./src/server/react-dom-server.bun').resume.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToPipeableStream() {
+  return require('./src/server/react-dom-server.bun').renderToPipeableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeToPipeableStream() {
+  return require('./src/server/react-dom-server.bun').resumeToPipeableStream.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/server.edge.js b/packages/react-dom/server.edge.js
new file mode 100644
index 00000000000..7282c4ed6c8
--- /dev/null
+++ b/packages/react-dom/server.edge.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function renderToReadableStream() {
+  return require('./src/server/react-dom-server.edge').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToString() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToString.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToStaticMarkup() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToStaticMarkup.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resume() {
+  return require('./src/server/react-dom-server.edge').resume.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/server.js b/packages/react-dom/server.js
new file mode 100644
index 00000000000..c09a5a50880
--- /dev/null
+++ b/packages/react-dom/server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './server.node';
diff --git a/packages/react-dom/server.node.js b/packages/react-dom/server.node.js
new file mode 100644
index 00000000000..bed7b9895d0
--- /dev/null
+++ b/packages/react-dom/server.node.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function renderToString() {
+  return require('./src/server/ReactDOMLegacyServerNode').renderToString.apply(
+    this,
+    arguments,
+  );
+}
+export function renderToStaticMarkup() {
+  return require('./src/server/ReactDOMLegacyServerNode').renderToStaticMarkup.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToPipeableStream() {
+  return require('./src/server/react-dom-server.node').renderToPipeableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeToPipeableStream() {
+  return require('./src/server/react-dom-server.node').resumeToPipeableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToReadableStream() {
+  return require('./src/server/react-dom-server.node').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resume() {
+  return require('./src/server/react-dom-server.node').resume.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/src/ReactDOMFB.js b/packages/react-dom/src/ReactDOMFB.js
new file mode 100644
index 00000000000..4825c80dfb3
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMFB.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {isEnabled} from 'react-dom-bindings/src/events/ReactDOMEventListener';
+
+import Internals from './ReactDOMSharedInternalsFB';
+
+// For classic WWW builds, include a few internals that are already in use.
+Object.assign((Internals: any), {
+  ReactBrowserEventEmitter: {
+    isEnabled,
+  },
+});
+
+export {Internals as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE};
+
+export {
+  createPortal,
+  flushSync,
+  unstable_createEventHandle,
+  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
+  useFormStatus,
+  useFormState,
+  requestFormReset,
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+  version,
+} from './client/ReactDOMClientFB';
+
+export {
+  createRoot,
+  hydrateRoot,
+  render,
+  unstable_batchedUpdates,
+  findDOMNode,
+  unmountComponentAtNode,
+} from './client/ReactDOMRootFB';
diff --git a/packages/react-dom/src/ReactDOMFB.modern.js b/packages/react-dom/src/ReactDOMFB.modern.js
new file mode 100644
index 00000000000..0dd47906019
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMFB.modern.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactDOMSharedInternalsFB';
+
+export {
+  createPortal,
+  flushSync,
+  unstable_batchedUpdates,
+  unstable_createEventHandle,
+  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
+  useFormStatus,
+  useFormState,
+  requestFormReset,
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+  version,
+} from './client/ReactDOMClientFB';
+
+export {createRoot, hydrateRoot} from './client/ReactDOMRootFB';
diff --git a/packages/react-dom/src/ReactDOMReactServer.js b/packages/react-dom/src/ReactDOMReactServer.js
new file mode 100644
index 00000000000..50b3a61abdd
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMReactServer.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 the subset of APIs that can be accessed from Server Component modules
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactDOMSharedInternals';
+export {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+} from './shared/ReactDOMFloat';
diff --git a/packages/react-dom/src/ReactDOMSharedInternals.js b/packages/react-dom/src/ReactDOMSharedInternals.js
new file mode 100644
index 00000000000..b82535b67a1
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMSharedInternals.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactEventPriorities';
+import type {HostDispatcher} from './shared/ReactDOMTypes';
+
+import noop from 'shared/noop';
+
+// This should line up with NoEventPriority from react-reconciler/src/ReactEventPriorities
+// but we can't depend on the react-reconciler from this isomorphic code.
+export const NoEventPriority: EventPriority = (0: any);
+
+type ReactDOMInternals = {
+  d /* ReactDOMCurrentDispatcher */: HostDispatcher,
+  p /* currentUpdatePriority */: EventPriority,
+  findDOMNode:
+    | null
+    | ((componentOrElement: component(...props: any)) => null | Element | Text),
+};
+
+function requestFormReset(element: HTMLFormElement) {
+  throw new Error(
+    'Invalid form element. requestFormReset must be passed a form that was ' +
+      'rendered by React.',
+  );
+}
+
+const DefaultDispatcher: HostDispatcher = {
+  f /* flushSyncWork */: noop,
+  r /* requestFormReset */: requestFormReset,
+  D /* prefetchDNS */: noop,
+  C /* preconnect */: noop,
+  L /* preload */: noop,
+  m /* preloadModule */: noop,
+  X /* preinitScript */: noop,
+  S /* preinitStyle */: noop,
+  M /* preinitModuleScript */: noop,
+};
+
+const Internals: ReactDOMInternals = {
+  d /* ReactDOMCurrentDispatcher */: DefaultDispatcher,
+  p /* currentUpdatePriority */: NoEventPriority,
+  findDOMNode: null,
+};
+
+export default Internals;
diff --git a/packages/react-dom/src/ReactDOMSharedInternalsFB.js b/packages/react-dom/src/ReactDOMSharedInternalsFB.js
new file mode 100644
index 00000000000..6c91096c747
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMSharedInternalsFB.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactEventPriorities';
+import type {HostDispatcher} from './shared/ReactDOMTypes';
+
+import {NoEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+
+import noop from 'shared/noop';
+
+type ReactDOMInternals = {
+  Events: [any, any, any, any, any, any],
+  d /* ReactDOMCurrentDispatcher */: HostDispatcher,
+  p /* currentUpdatePriority */: EventPriority,
+  findDOMNode:
+    | null
+    | ((componentOrElement: component(...props: any)) => null | Element | Text),
+};
+
+const DefaultDispatcher: HostDispatcher = {
+  f /* flushSyncWork */: noop,
+  r /* requestFormReset */: noop,
+  D /* prefetchDNS */: noop,
+  C /* preconnect */: noop,
+  L /* preload */: noop,
+  m /* preloadModule */: noop,
+  X /* preinitScript */: noop,
+  S /* preinitStyle */: noop,
+  M /* preinitModuleScript */: noop,
+};
+
+const Internals: ReactDOMInternals = {
+  Events: (null: any),
+  d /* ReactDOMCurrentDispatcher */: DefaultDispatcher,
+  p /* currentUpdatePriority */: NoEventPriority,
+  findDOMNode: null,
+};
+
+export default Internals;
diff --git a/packages/react-dom/src/ReactDOMTestingFB.js b/packages/react-dom/src/ReactDOMTestingFB.js
new file mode 100644
index 00000000000..1d7a4c8fb13
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMTestingFB.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFB';
+
+export {
+  createComponentSelector,
+  createHasPseudoClassSelector,
+  createRoleSelector,
+  createTestNameSelector,
+  createTextSelector,
+  getFindAllNodesFailureDescription,
+  findAllNodes,
+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/react-dom/src/ReactDOMTestingFB.modern.js b/packages/react-dom/src/ReactDOMTestingFB.modern.js
new file mode 100644
index 00000000000..7d60bf6d4e0
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMTestingFB.modern.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFB.modern';
+
+export {
+  createComponentSelector,
+  createHasPseudoClassSelector,
+  createRoleSelector,
+  createTestNameSelector,
+  createTextSelector,
+  getFindAllNodesFailureDescription,
+  findAllNodes,
+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
new file mode 100644
index 00000000000..b5671cf759c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
@@ -0,0 +1,290 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const ReactDOMServer = require('react-dom/server');
+const act = require('internal-test-utils').act;
+const assertConsoleErrorDev =
+  require('internal-test-utils').assertConsoleErrorDev;
+
+describe('CSSPropertyOperations', () => {
+  it('should automatically append `px` to relevant styles', () => {
+    const styles = {
+      left: 0,
+      margin: 16,
+      opacity: 0.5,
+      padding: '4px',
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    expect(html).toContain('"left:0;margin:16px;opacity:0.5;padding:4px"');
+  });
+
+  it('should trim values', () => {
+    const styles = {
+      left: '16 ',
+      opacity: 0.5,
+      right: ' 4 ',
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    expect(html).toContain('"left:16;opacity:0.5;right:4"');
+  });
+
+  it('should not append `px` to styles that might need a number', () => {
+    const styles = {
+      flex: 0,
+      opacity: 0.5,
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    expect(html).toContain('"flex:0;opacity:0.5"');
+  });
+
+  it('should create vendor-prefixed markup correctly', () => {
+    const styles = {
+      msTransition: 'none',
+      MozTransition: 'none',
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    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', async () => {
+    const styles = {
+      backgroundColor: '#000',
+      display: 'none',
+    };
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div style={styles} />);
+    });
+
+    const div = container.firstChild;
+    expect(/style=".*"/.test(container.innerHTML)).toBe(true);
+  });
+
+  it('should not set style attribute when no styles exist', () => {
+    const styles = {
+      backgroundColor: null,
+      display: null,
+    };
+    const div = <div style={styles} />;
+    const html = ReactDOMServer.renderToString(div);
+    expect(/style=/.test(html)).toBe(false);
+  });
+
+  it('should warn when using hyphenated style names', async () => {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
+        return <div style={{'background-color': 'crimson'}} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+    assertConsoleErrorDev([
+      'Unsupported style property background-color. Did you mean backgroundColor?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
+  });
+
+  it('should warn when updating hyphenated style names', async () => {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
+        return <div style={this.props.style} />;
+      }
+    }
+
+    const styles = {
+      '-ms-transform': 'translate3d(0, 0, 0)',
+      '-webkit-transform': 'translate3d(0, 0, 0)',
+    };
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+    await act(() => {
+      root.render(<Comp style={styles} />);
+    });
+    assertConsoleErrorDev([
+      'Unsupported style property -ms-transform. Did you mean msTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+      'Unsupported style property -webkit-transform. Did you mean WebkitTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
+  });
+
+  it('warns when miscapitalizing vendored style names', async () => {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
+        return (
+          <div
+            style={{
+              msTransform: 'translate3d(0, 0, 0)',
+              oTransform: 'translate3d(0, 0, 0)',
+              webkitTransform: 'translate3d(0, 0, 0)',
+            }}
+          />
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+    assertConsoleErrorDev([
+      // msTransform is correct already and shouldn't warn
+      'Unsupported vendor-prefixed style property oTransform. ' +
+        'Did you mean OTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+      'Unsupported vendor-prefixed style property webkitTransform. ' +
+        'Did you mean WebkitTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
+  });
+
+  it('should warn about style having a trailing semicolon', async () => {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
+        return (
+          <div
+            style={{
+              fontFamily: 'Helvetica, arial',
+              backgroundImage: 'url(foo;bar)',
+              backgroundColor: 'blue;',
+              color: 'red;   ',
+            }}
+          />
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+    assertConsoleErrorDev([
+      "Style property values shouldn't contain a semicolon. " +
+        'Try "backgroundColor: blue" instead.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+      "Style property values shouldn't contain a semicolon. " +
+        'Try "color: red" instead.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
+  });
+
+  it('should warn about style containing a NaN value', async () => {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
+        return <div style={{fontSize: NaN}} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+    assertConsoleErrorDev([
+      '`NaN` is an invalid value for the `fontSize` css style property.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
+  });
+
+  it('should not warn when setting CSS custom properties', async () => {
+    class Comp extends React.Component {
+      render() {
+        return <div style={{'--foo-primary': 'red', backgroundColor: 'red'}} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+  });
+
+  it('should warn about style containing an Infinity value', async () => {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
+        return <div style={{fontSize: 1 / 0}} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+    assertConsoleErrorDev([
+      '`Infinity` is an invalid value for the `fontSize` css style property.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
+  });
+
+  it('should not add units to CSS custom properties', async () => {
+    class Comp extends React.Component {
+      render() {
+        return <div style={{'--foo': '5'}} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp />);
+    });
+
+    expect(container.children[0].style.getPropertyValue('--foo')).toEqual('5');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
new file mode 100644
index 00000000000..ef09e49bf36
--- /dev/null
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -0,0 +1,1455 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Set by `yarn test-fire`.
+const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
+
+describe('DOMPropertyOperations', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  // 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 setUntrackedChecked = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    'checked',
+  ).set;
+
+  describe('setValueForProperty', () => {
+    it('should set values as properties by default', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div title="Tip!" />);
+      });
+      expect(container.firstChild.title).toBe('Tip!');
+    });
+
+    it('should set values as attributes if necessary', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div role="#" />);
+      });
+      expect(container.firstChild.getAttribute('role')).toBe('#');
+      expect(container.firstChild.role).toBeUndefined();
+    });
+
+    it('should set values as namespace attributes if necessary', async () => {
+      const container = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'svg',
+      );
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<image xlinkHref="about:blank" />);
+      });
+      expect(
+        container.firstChild.getAttributeNS(
+          'http://www.w3.org/1999/xlink',
+          'href',
+        ),
+      ).toBe('about:blank');
+    });
+
+    it('should set values as boolean properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div disabled="disabled" />);
+      });
+      expect(container.firstChild.getAttribute('disabled')).toBe('');
+      await act(() => {
+        root.render(<div disabled={true} />);
+      });
+      expect(container.firstChild.getAttribute('disabled')).toBe('');
+      await act(() => {
+        root.render(<div disabled={false} />);
+      });
+      expect(container.firstChild.getAttribute('disabled')).toBe(null);
+      await act(() => {
+        root.render(<div disabled={true} />);
+      });
+      await act(() => {
+        root.render(<div disabled={null} />);
+      });
+      expect(container.firstChild.getAttribute('disabled')).toBe(null);
+      await act(() => {
+        root.render(<div disabled={true} />);
+      });
+      await act(() => {
+        root.render(<div disabled={undefined} />);
+      });
+      expect(container.firstChild.getAttribute('disabled')).toBe(null);
+    });
+
+    it('should convert attribute values to string first', async () => {
+      // Browsers default to this behavior, but some test environments do not.
+      // This ensures that we have consistent behavior.
+      const obj = {
+        toString: function () {
+          return 'css-class';
+        },
+      };
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div className={obj} />);
+      });
+      expect(container.firstChild.getAttribute('class')).toBe('css-class');
+    });
+
+    it('should not remove empty attributes for special input properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input value="" onChange={() => {}} />);
+      });
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('');
+      }
+      expect(container.firstChild.value).toBe('');
+    });
+
+    it('should not remove empty attributes for special option properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select>
+            <option value="">empty</option>
+            <option>filled</option>
+          </select>,
+        );
+      });
+      // Regression test for https://github.com/facebook/react/issues/6219
+      expect(container.firstChild.firstChild.value).toBe('');
+      expect(container.firstChild.lastChild.value).toBe('filled');
+    });
+
+    it('should remove for falsey boolean properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div allowFullScreen={false} />);
+      });
+      expect(container.firstChild.hasAttribute('allowFullScreen')).toBe(false);
+    });
+
+    it('should remove when setting custom attr to null', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div data-foo="bar" />);
+      });
+      expect(container.firstChild.hasAttribute('data-foo')).toBe(true);
+      await act(() => {
+        root.render(<div data-foo={null} />);
+      });
+      expect(container.firstChild.hasAttribute('data-foo')).toBe(false);
+    });
+
+    it('should set className to empty string instead of null', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div className="selected" />);
+      });
+      expect(container.firstChild.className).toBe('selected');
+      await act(() => {
+        root.render(<div className={null} />);
+      });
+      // className should be '', not 'null' or null (which becomes 'null' in
+      // some browsers)
+      expect(container.firstChild.className).toBe('');
+      expect(container.firstChild.getAttribute('class')).toBe(null);
+    });
+
+    it('should remove property properly for boolean properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div hidden={true} />);
+      });
+      expect(container.firstChild.hasAttribute('hidden')).toBe(true);
+      await act(() => {
+        root.render(<div hidden={false} />);
+      });
+      expect(container.firstChild.hasAttribute('hidden')).toBe(false);
+    });
+
+    it('should always assign the value attribute for non-inputs', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<progress />);
+      });
+      spyOnDevAndProd(container.firstChild, 'setAttribute');
+      await act(() => {
+        root.render(<progress value={30} />);
+      });
+      await act(() => {
+        root.render(<progress value="30" />);
+      });
+      expect(container.firstChild.setAttribute).toHaveBeenCalledTimes(2);
+    });
+
+    it('should return the progress to intermediate state on null value', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<progress value={30} />);
+      });
+      await act(() => {
+        root.render(<progress value={null} />);
+      });
+      // Ensure we move progress back to an indeterminate state.
+      // Regression test for https://github.com/facebook/react/issues/6119
+      expect(container.firstChild.hasAttribute('value')).toBe(false);
+    });
+
+    it('custom element custom events lowercase', async () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustomevent={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test />);
+      });
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    it('custom element custom events uppercase', async () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element onCustomevent={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test />);
+      });
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('Customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    it('custom element custom event with dash in name', async () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustom-event={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test />);
+      });
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('custom-event'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    it('custom element remove event handler', async () => {
+      const oncustomevent = jest.fn();
+      function Test(props) {
+        return <my-custom-element oncustomevent={props.handler} />;
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test handler={oncustomevent} />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<Test handler={false} />);
+      });
+      // Make sure that the second render didn't create a new element. We want
+      // to make sure removeEventListener actually gets called on the same element.
+      expect(customElement).toBe(customElement);
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<Test handler={oncustomevent} />);
+      });
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+
+      const oncustomevent2 = jest.fn();
+      await act(() => {
+        root.render(<Test handler={oncustomevent2} />);
+      });
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(oncustomevent2).toHaveBeenCalledTimes(1);
+    });
+
+    it('custom elements shouldnt have non-functions for on* attributes treated as event listeners', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <my-custom-element
+            onstring={'hello'}
+            onobj={{hello: 'world'}}
+            onarray={['one', 'two']}
+            ontrue={true}
+            onfalse={false}
+          />,
+        );
+      });
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('onstring')).toBe('hello');
+      expect(customElement.getAttribute('onobj')).toBe('[object Object]');
+      expect(customElement.getAttribute('onarray')).toBe('one,two');
+      expect(customElement.getAttribute('ontrue')).toBe('');
+      expect(customElement.getAttribute('onfalse')).toBe(null);
+
+      // Dispatch the corresponding event names to make sure that nothing crashes.
+      customElement.dispatchEvent(new Event('string'));
+      customElement.dispatchEvent(new Event('obj'));
+      customElement.dispatchEvent(new Event('array'));
+      customElement.dispatchEvent(new Event('true'));
+      customElement.dispatchEvent(new Event('false'));
+    });
+
+    it('custom elements should still have onClick treated like regular elements', async () => {
+      let syntheticClickEvent = null;
+      const syntheticEventHandler = jest.fn(
+        event => (syntheticClickEvent = event),
+      );
+      let nativeClickEvent = null;
+      const nativeEventHandler = jest.fn(event => (nativeClickEvent = event));
+      function Test() {
+        return <my-custom-element onClick={syntheticEventHandler} />;
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test />);
+      });
+
+      const customElement = container.querySelector('my-custom-element');
+      customElement.onclick = nativeEventHandler;
+      container.querySelector('my-custom-element').click();
+
+      expect(nativeEventHandler).toHaveBeenCalledTimes(1);
+      expect(syntheticEventHandler).toHaveBeenCalledTimes(1);
+      expect(syntheticClickEvent.nativeEvent).toBe(nativeClickEvent);
+    });
+
+    it('custom elements should have working onChange event listeners', async () => {
+      let reactChangeEvent = null;
+      const eventHandler = jest.fn(event => (reactChangeEvent = event));
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element onChange={eventHandler} />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      let expectedHandlerCallCount = 0;
+
+      const changeEvent = new Event('change', {bubbles: true});
+      customElement.dispatchEvent(changeEvent);
+      expectedHandlerCallCount++;
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+      expect(reactChangeEvent.nativeEvent).toBe(changeEvent);
+
+      // Also make sure that removing and re-adding the event listener works
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      customElement.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+      await act(() => {
+        root.render(<my-custom-element onChange={eventHandler} />);
+      });
+      customElement.dispatchEvent(new Event('change', {bubbles: true}));
+      expectedHandlerCallCount++;
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+    });
+
+    it('custom elements should have working onInput event listeners', async () => {
+      let reactInputEvent = null;
+      const eventHandler = jest.fn(event => (reactInputEvent = event));
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element onInput={eventHandler} />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      let expectedHandlerCallCount = 0;
+
+      const inputEvent = new Event('input', {bubbles: true});
+      customElement.dispatchEvent(inputEvent);
+      expectedHandlerCallCount++;
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+      expect(reactInputEvent.nativeEvent).toBe(inputEvent);
+
+      // Also make sure that removing and re-adding the event listener works
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      customElement.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+      await act(() => {
+        root.render(<my-custom-element onInput={eventHandler} />);
+      });
+      customElement.dispatchEvent(new Event('input', {bubbles: true}));
+      expectedHandlerCallCount++;
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+    });
+
+    it('custom elements should have separate onInput and onChange handling', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const inputEventHandler = jest.fn();
+      const changeEventHandler = jest.fn();
+      await act(() => {
+        root.render(
+          <my-custom-element
+            onInput={inputEventHandler}
+            onChange={changeEventHandler}
+          />,
+        );
+      });
+      const customElement = container.querySelector('my-custom-element');
+
+      customElement.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(inputEventHandler).toHaveBeenCalledTimes(1);
+      expect(changeEventHandler).toHaveBeenCalledTimes(0);
+
+      customElement.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(inputEventHandler).toHaveBeenCalledTimes(1);
+      expect(changeEventHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('custom elements should be able to remove and re-add custom event listeners', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const eventHandler = jest.fn();
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={eventHandler} />);
+      });
+
+      const customElement = container.querySelector('my-custom-element');
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(eventHandler).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(eventHandler).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={eventHandler} />);
+      });
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(eventHandler).toHaveBeenCalledTimes(2);
+    });
+
+    it('<input is=...> should have the same onChange/onInput/onClick behavior as <input>', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const regularOnInputHandler = jest.fn();
+      const regularOnChangeHandler = jest.fn();
+      const regularOnClickHandler = jest.fn();
+      const customOnInputHandler = jest.fn();
+      const customOnChangeHandler = jest.fn();
+      const customOnClickHandler = jest.fn();
+      function clearMocks() {
+        regularOnInputHandler.mockClear();
+        regularOnChangeHandler.mockClear();
+        regularOnClickHandler.mockClear();
+        customOnInputHandler.mockClear();
+        customOnChangeHandler.mockClear();
+        customOnClickHandler.mockClear();
+      }
+      await act(() => {
+        root.render(
+          <div>
+            <input
+              onInput={regularOnInputHandler}
+              onChange={regularOnChangeHandler}
+              onClick={regularOnClickHandler}
+            />
+            <input
+              is="my-custom-element"
+              onInput={customOnInputHandler}
+              onChange={customOnChangeHandler}
+              onClick={customOnClickHandler}
+            />
+          </div>,
+        );
+      });
+
+      const regularInput = container.querySelector(
+        'input:not([is=my-custom-element])',
+      );
+      const customInput = container.querySelector(
+        'input[is=my-custom-element]',
+      );
+      expect(regularInput).not.toBe(customInput);
+
+      // Typing should trigger onInput and onChange for both kinds of inputs.
+      clearMocks();
+      setUntrackedValue.call(regularInput, 'hello');
+      regularInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(0);
+      setUntrackedValue.call(customInput, 'hello');
+      customInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(0);
+
+      // The native change event itself does not produce extra React events.
+      clearMocks();
+      regularInput.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(0);
+      customInput.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(0);
+
+      // The click event is handled by both inputs.
+      clearMocks();
+      regularInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(1);
+      customInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(1);
+
+      // Typing again should trigger onInput and onChange for both kinds of inputs.
+      clearMocks();
+      setUntrackedValue.call(regularInput, 'goodbye');
+      regularInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(0);
+      setUntrackedValue.call(customInput, 'goodbye');
+      customInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(0);
+    });
+
+    it('<input type=radio is=...> should have the same onChange/onInput/onClick behavior as <input type=radio>', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const regularOnInputHandler = jest.fn();
+      const regularOnChangeHandler = jest.fn();
+      const regularOnClickHandler = jest.fn();
+      const customOnInputHandler = jest.fn();
+      const customOnChangeHandler = jest.fn();
+      const customOnClickHandler = jest.fn();
+      function clearMocks() {
+        regularOnInputHandler.mockClear();
+        regularOnChangeHandler.mockClear();
+        regularOnClickHandler.mockClear();
+        customOnInputHandler.mockClear();
+        customOnChangeHandler.mockClear();
+        customOnClickHandler.mockClear();
+      }
+      await act(() => {
+        root.render(
+          <div>
+            <input
+              type="radio"
+              onInput={regularOnInputHandler}
+              onChange={regularOnChangeHandler}
+              onClick={regularOnClickHandler}
+            />
+            <input
+              is="my-custom-element"
+              type="radio"
+              onInput={customOnInputHandler}
+              onChange={customOnChangeHandler}
+              onClick={customOnClickHandler}
+            />
+          </div>,
+        );
+      });
+
+      const regularInput = container.querySelector(
+        'input:not([is=my-custom-element])',
+      );
+      const customInput = container.querySelector(
+        'input[is=my-custom-element]',
+      );
+      expect(regularInput).not.toBe(customInput);
+
+      // Clicking should trigger onClick and onChange on both inputs.
+      clearMocks();
+      setUntrackedChecked.call(regularInput, true);
+      regularInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(1);
+      setUntrackedChecked.call(customInput, true);
+      customInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(1);
+
+      // The native input event only produces a React onInput event.
+      clearMocks();
+      regularInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(0);
+      customInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(0);
+
+      // Clicking again should trigger onClick and onChange on both inputs.
+      clearMocks();
+      setUntrackedChecked.call(regularInput, false);
+      regularInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(1);
+      setUntrackedChecked.call(customInput, false);
+      customInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('<select is=...> should have the same onChange/onInput/onClick behavior as <select>', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const regularOnInputHandler = jest.fn();
+      const regularOnChangeHandler = jest.fn();
+      const regularOnClickHandler = jest.fn();
+      const customOnInputHandler = jest.fn();
+      const customOnChangeHandler = jest.fn();
+      const customOnClickHandler = jest.fn();
+      function clearMocks() {
+        regularOnInputHandler.mockClear();
+        regularOnChangeHandler.mockClear();
+        regularOnClickHandler.mockClear();
+        customOnInputHandler.mockClear();
+        customOnChangeHandler.mockClear();
+        customOnClickHandler.mockClear();
+      }
+      await act(() => {
+        root.render(
+          <div>
+            <select
+              onInput={regularOnInputHandler}
+              onChange={regularOnChangeHandler}
+              onClick={regularOnClickHandler}
+            />
+            <select
+              is="my-custom-element"
+              onInput={customOnInputHandler}
+              onChange={customOnChangeHandler}
+              onClick={customOnClickHandler}
+            />
+          </div>,
+        );
+      });
+
+      const regularSelect = container.querySelector(
+        'select:not([is=my-custom-element])',
+      );
+      const customSelect = container.querySelector(
+        'select[is=my-custom-element]',
+      );
+      expect(regularSelect).not.toBe(customSelect);
+
+      // Clicking should only trigger onClick on both inputs.
+      clearMocks();
+      regularSelect.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(1);
+      customSelect.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(1);
+
+      // Native input event should only trigger onInput on both inputs.
+      clearMocks();
+      regularSelect.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(0);
+      customSelect.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(1);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(0);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(0);
+
+      // Native change event should trigger onChange.
+      clearMocks();
+      regularSelect.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(regularOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(regularOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(regularOnClickHandler).toHaveBeenCalledTimes(0);
+      customSelect.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(customOnInputHandler).toHaveBeenCalledTimes(0);
+      expect(customOnChangeHandler).toHaveBeenCalledTimes(1);
+      expect(customOnClickHandler).toHaveBeenCalledTimes(0);
+    });
+
+    it('onChange/onInput/onClick on div with various types of children', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      function clearMocks() {
+        onChangeHandler.mockClear();
+        onInputHandler.mockClear();
+        onClickHandler.mockClear();
+      }
+      await act(() => {
+        root.render(
+          <div
+            onChange={onChangeHandler}
+            onInput={onInputHandler}
+            onClick={onClickHandler}>
+            <my-custom-element />
+            <input />
+            <input is="my-custom-element" />
+          </div>,
+        );
+      });
+      const customElement = container.querySelector('my-custom-element');
+      const regularInput = container.querySelector(
+        'input:not([is="my-custom-element"])',
+      );
+      const customInput = container.querySelector(
+        'input[is="my-custom-element"]',
+      );
+      expect(regularInput).not.toBe(customInput);
+
+      // Custom element has no special logic for input/change.
+      clearMocks();
+      customElement.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      customElement.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      customElement.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+
+      // Regular input treats browser input as onChange.
+      clearMocks();
+      setUntrackedValue.call(regularInput, 'hello');
+      regularInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      regularInput.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      regularInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+
+      // Custom input treats browser input as onChange.
+      clearMocks();
+      setUntrackedValue.call(customInput, 'hello');
+      customInput.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      customInput.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      customInput.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+    });
+
+    it('custom element onChange/onInput/onClick with event target input child', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      await act(() => {
+        root.render(
+          <my-custom-element
+            onChange={onChangeHandler}
+            onInput={onInputHandler}
+            onClick={onClickHandler}>
+            <input />
+          </my-custom-element>,
+        );
+      });
+
+      const input = container.querySelector('input');
+      setUntrackedValue.call(input, 'hello');
+      input.dispatchEvent(new Event('input', {bubbles: true}));
+      // Simulated onChange from the child's input event
+      // bubbles to the parent custom element.
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      // Consequently, the native change event is ignored.
+      input.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      input.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+    });
+
+    it('custom element onChange/onInput/onClick with event target div child', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      await act(() => {
+        root.render(
+          <my-custom-element
+            onChange={onChangeHandler}
+            onInput={onInputHandler}
+            onClick={onClickHandler}>
+            <div />
+          </my-custom-element>,
+        );
+      });
+
+      const div = container.querySelector('div');
+      div.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+
+      div.dispatchEvent(new Event('change', {bubbles: true}));
+      // React always ignores change event invoked on non-custom and non-input targets.
+      // So change event emitted on a div does not propagate upwards.
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+
+      div.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+    });
+
+    it('div onChange/onInput/onClick with event target div child', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      await act(() => {
+        root.render(
+          <div
+            onChange={onChangeHandler}
+            onInput={onInputHandler}
+            onClick={onClickHandler}>
+            <div />
+          </div>,
+        );
+      });
+
+      const div = container.querySelector('div > div');
+      div.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+
+      div.dispatchEvent(new Event('change', {bubbles: true}));
+      // React always ignores change event invoked on non-custom and non-input targets.
+      // So change event emitted on a div does not propagate upwards.
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+
+      div.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+    });
+
+    it('custom element onChange/onInput/onClick with event target custom element child', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      await act(() => {
+        root.render(
+          <my-custom-element
+            onChange={onChangeHandler}
+            onInput={onInputHandler}
+            onClick={onClickHandler}>
+            <other-custom-element />
+          </my-custom-element>,
+        );
+      });
+
+      const customChild = container.querySelector('other-custom-element');
+      customChild.dispatchEvent(new Event('input', {bubbles: true}));
+      // There is no simulated onChange, only raw onInput is dispatched.
+      expect(onChangeHandler).toBeCalledTimes(0);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      // The native change event propagates to the parent as onChange.
+      customChild.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(0);
+      customChild.dispatchEvent(new Event('click', {bubbles: true}));
+      expect(onChangeHandler).toBeCalledTimes(1);
+      expect(onInputHandler).toBeCalledTimes(1);
+      expect(onClickHandler).toBeCalledTimes(1);
+    });
+
+    it('custom elements should allow custom events with capture event listeners', async () => {
+      const oncustomeventCapture = jest.fn();
+      const oncustomevent = jest.fn();
+      function Test() {
+        return (
+          <my-custom-element
+            oncustomeventCapture={oncustomeventCapture}
+            oncustomevent={oncustomevent}>
+            <div />
+          </my-custom-element>
+        );
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test />);
+      });
+      container
+        .querySelector('my-custom-element > div')
+        .dispatchEvent(new Event('customevent', {bubbles: false}));
+      expect(oncustomeventCapture).toHaveBeenCalledTimes(1);
+      expect(oncustomevent).toHaveBeenCalledTimes(0);
+    });
+
+    it('innerHTML should not work on custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element innerHTML="foo" />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('innerHTML')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+
+      // Render again to verify the update codepath doesn't accidentally let
+      // something through.
+      await act(() => {
+        root.render(<my-custom-element innerHTML="bar" />);
+      });
+      expect(customElement.getAttribute('innerHTML')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    it('innerText should not work on custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element innerText="foo" />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('innerText')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+
+      // Render again to verify the update codepath doesn't accidentally let
+      // something through.
+      await act(() => {
+        root.render(<my-custom-element innerText="bar" />);
+      });
+      expect(customElement.getAttribute('innerText')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    it('textContent should not work on custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element textContent="foo" />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('textContent')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+
+      // Render again to verify the update codepath doesn't accidentally let
+      // something through.
+      await act(() => {
+        root.render(<my-custom-element textContent="bar" />);
+      });
+      expect(customElement.getAttribute('textContent')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    it('values should not be converted to booleans when assigning into custom elements', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      customElement.foo = null;
+
+      // true => string
+      await act(() => {
+        root.render(<my-custom-element foo={true} />);
+      });
+      expect(customElement.foo).toBe(true);
+      await act(() => {
+        root.render(<my-custom-element foo="bar" />);
+      });
+      expect(customElement.foo).toBe('bar');
+
+      // false => string
+      await act(() => {
+        root.render(<my-custom-element foo={false} />);
+      });
+      expect(customElement.foo).toBe(false);
+      await act(() => {
+        root.render(<my-custom-element foo="bar" />);
+      });
+      expect(customElement.foo).toBe('bar');
+
+      // true => null
+      await act(() => {
+        root.render(<my-custom-element foo={true} />);
+      });
+      expect(customElement.foo).toBe(true);
+      await act(() => {
+        root.render(<my-custom-element foo={null} />);
+      });
+      expect(customElement.foo).toBe(null);
+
+      // false => null
+      await act(() => {
+        root.render(<my-custom-element foo={false} />);
+      });
+      expect(customElement.foo).toBe(false);
+      await act(() => {
+        root.render(<my-custom-element foo={null} />);
+      });
+      expect(customElement.foo).toBe(null);
+    });
+
+    it('boolean props should not be stringified in attributes', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element foo={true} />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+
+      expect(customElement.getAttribute('foo')).toBe('');
+
+      // true => false
+      await act(() => {
+        root.render(<my-custom-element foo={false} />);
+      });
+
+      expect(customElement.getAttribute('foo')).toBe(null);
+    });
+
+    it('custom element custom event handlers assign multiple types', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const oncustomevent = jest.fn();
+
+      // First render with string
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={'foo'} />);
+      });
+      const customelement = container.querySelector('my-custom-element');
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(0);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe('foo');
+
+      // string => event listener
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={oncustomevent} />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // event listener => string
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={'foo'} />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe('foo');
+
+      // string => nothing
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // nothing => event listener
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={oncustomevent} />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+    });
+
+    it('custom element custom event handlers assign multiple types with setter', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      const oncustomevent = jest.fn();
+
+      // First render with nothing
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      const customelement = container.querySelector('my-custom-element');
+      // Install a setter to activate the `in` heuristic
+      Object.defineProperty(customelement, 'oncustomevent', {
+        set: function (x) {
+          this._oncustomevent = x;
+        },
+        get: function () {
+          return this._oncustomevent;
+        },
+      });
+      expect(customelement.oncustomevent).toBe(undefined);
+
+      // nothing => event listener
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={oncustomevent} />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(null);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // event listener => string
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={'foo'} />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe('foo');
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // string => event listener
+      await act(() => {
+        root.render(<my-custom-element oncustomevent={oncustomevent} />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(customelement.oncustomevent).toBe(null);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // event listener => nothing
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+    });
+
+    it('assigning to a custom element property should not remove attributes', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element foo="one" />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('foo')).toBe('one');
+
+      // Install a setter to activate the `in` heuristic
+      Object.defineProperty(customElement, 'foo', {
+        set: function (x) {
+          this._foo = x;
+        },
+        get: function () {
+          return this._foo;
+        },
+      });
+      await act(() => {
+        root.render(<my-custom-element foo="two" />);
+      });
+      expect(customElement.foo).toBe('two');
+      expect(customElement.getAttribute('foo')).toBe('one');
+    });
+
+    it('custom element properties should accept functions', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+
+      // Install a setter to activate the `in` heuristic
+      Object.defineProperty(customElement, 'foo', {
+        set: function (x) {
+          this._foo = x;
+        },
+        get: function () {
+          return this._foo;
+        },
+      });
+      function myFunction() {
+        return 'this is myFunction';
+      }
+      await act(() => {
+        root.render(<my-custom-element foo={myFunction} />);
+      });
+      expect(customElement.foo).toBe(myFunction);
+
+      // Also remove and re-add the property for good measure
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      expect(customElement.foo).toBe(undefined);
+      await act(() => {
+        root.render(<my-custom-element foo={myFunction} />);
+      });
+      expect(customElement.foo).toBe(myFunction);
+    });
+
+    it('switching between null and undefined should update a property', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element foo={undefined} />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+      customElement.foo = undefined;
+
+      await act(() => {
+        root.render(<my-custom-element foo={null} />);
+      });
+      expect(customElement.foo).toBe(null);
+
+      await act(() => {
+        root.render(<my-custom-element foo={undefined} />);
+      });
+      expect(customElement.foo).toBe(undefined);
+    });
+
+    it('warns when using popoverTarget={HTMLElement}', async () => {
+      const popoverTarget = document.createElement('div');
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <button key="one" popoverTarget={popoverTarget}>
+            Toggle popover
+          </button>,
+        );
+      });
+
+      assertConsoleErrorDev([
+        'The `popoverTarget` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.\n' +
+          '    in button (at **)',
+      ]);
+
+      // Dedupe warning
+      await act(() => {
+        root.render(
+          <button key="two" popoverTarget={popoverTarget}>
+            Toggle popover
+          </button>,
+        );
+      });
+    });
+  });
+
+  describe('deleteValueForProperty', () => {
+    it('should remove attributes for normal properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div title="foo" />);
+      });
+      expect(container.firstChild.getAttribute('title')).toBe('foo');
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(container.firstChild.getAttribute('title')).toBe(null);
+    });
+
+    it('should not remove attributes for special properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <input type="text" value="foo" onChange={function () {}} />,
+        );
+      });
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('foo');
+      }
+      expect(container.firstChild.value).toBe('foo');
+      await act(() => {
+        root.render(<input type="text" onChange={function () {}} />);
+      });
+      assertConsoleErrorDev([
+        'A component is changing a controlled input to be uncontrolled. ' +
+          'This is likely caused by the value changing from a defined to undefined, ' +
+          'which should not happen. Decide between using a controlled or uncontrolled ' +
+          'input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)',
+      ]);
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('foo');
+      }
+      expect(container.firstChild.value).toBe('foo');
+    });
+
+    it('should not remove attributes for custom component tag', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-icon size="5px" />);
+      });
+      expect(container.firstChild.getAttribute('size')).toBe('5px');
+    });
+
+    it('custom elements should remove by setting undefined to restore defaults', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      const customElement = container.querySelector('my-custom-element');
+
+      // Non-setter but existing property to active the `in` heuristic
+      customElement.raw = 1;
+
+      // Install a setter to activate the `in` heuristic
+      Object.defineProperty(customElement, 'object', {
+        set: function (value = null) {
+          this._object = value;
+        },
+        get: function () {
+          return this._object;
+        },
+      });
+
+      Object.defineProperty(customElement, 'string', {
+        set: function (value = '') {
+          this._string = value;
+        },
+        get: function () {
+          return this._string;
+        },
+      });
+
+      const obj = {};
+      await act(() => {
+        root.render(<my-custom-element raw={2} object={obj} string="hi" />);
+      });
+      expect(customElement.raw).toBe(2);
+      expect(customElement.object).toBe(obj);
+      expect(customElement.string).toBe('hi');
+
+      // Removing the properties should reset to defaults by passing undefined
+      await act(() => {
+        root.render(<my-custom-element />);
+      });
+      expect(customElement.raw).toBe(undefined);
+      expect(customElement.object).toBe(null);
+      expect(customElement.string).toBe('');
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/InvalidEventListeners-test.js b/packages/react-dom/src/__tests__/InvalidEventListeners-test.js
new file mode 100644
index 00000000000..8bff125c82c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/InvalidEventListeners-test.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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.mock('react-dom-bindings/src/events/isEventSupported');
+
+describe('InvalidEventListeners', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let assertConsoleErrorDev;
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should prevent non-function listeners, at dispatch', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div onClick="not a function" />);
+    });
+    assertConsoleErrorDev([
+      'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
+        '    in div (at **)',
+    ]);
+    const node = container.firstChild;
+
+    console.error = jest.fn();
+
+    const uncaughtErrors = [];
+    function handleWindowError(e) {
+      uncaughtErrors.push(e.error);
+    }
+    window.addEventListener('error', handleWindowError);
+    try {
+      node.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+    } finally {
+      window.removeEventListener('error', handleWindowError);
+    }
+    expect(uncaughtErrors.length).toBe(1);
+    expect(uncaughtErrors[0]).toEqual(
+      expect.objectContaining({
+        message:
+          'Expected `onClick` listener to be a function, ' +
+          'instead got a value of `string` type.',
+      }),
+    );
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        detail: expect.objectContaining({
+          message:
+            'Expected `onClick` listener to be a function, instead got a value of `string` type.',
+        }),
+        type: 'unhandled exception',
+      }),
+    );
+  });
+
+  it('should not prevent null listeners, at dispatch', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div onClick={null} />);
+    });
+
+    const node = container.firstChild;
+    await act(() => {
+      node.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.js
new file mode 100644
index 00000000000..965c20dbddf
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.js
@@ -0,0 +1,358 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+let idCallOrder;
+const recordID = function (id) {
+  idCallOrder.push(id);
+};
+const recordIDAndStopPropagation = function (id, event) {
+  recordID(id);
+  event.stopPropagation();
+};
+const recordIDAndReturnFalse = function (id, event) {
+  recordID(id);
+  return false;
+};
+const LISTENER = jest.fn();
+const ON_CLICK_KEY = 'onClick';
+
+let GRANDPARENT;
+let PARENT;
+let CHILD;
+let BUTTON;
+
+let renderTree;
+let putListener;
+let deleteAllListeners;
+
+let container;
+
+// This test is written in a bizarre way because it was previously using internals.
+// It should probably be rewritten but we're keeping it for some extra coverage.
+describe('ReactBrowserEventEmitter', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    LISTENER.mockClear();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    let GRANDPARENT_PROPS = {};
+    let PARENT_PROPS = {};
+    let CHILD_PROPS = {};
+    let BUTTON_PROPS = {};
+
+    function Child(props) {
+      return <div ref={c => (CHILD = c)} {...props} />;
+    }
+
+    class ChildWrapper extends React.PureComponent {
+      render() {
+        return <Child {...this.props} />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    renderTree = async function () {
+      await act(() => {
+        root.render(
+          <div ref={c => (GRANDPARENT = c)} {...GRANDPARENT_PROPS}>
+            <div ref={c => (PARENT = c)} {...PARENT_PROPS}>
+              <ChildWrapper {...CHILD_PROPS} />
+              <button
+                disabled={true}
+                ref={c => (BUTTON = c)}
+                {...BUTTON_PROPS}
+              />
+            </div>
+          </div>,
+        );
+      });
+    };
+
+    putListener = async function (node, eventName, listener) {
+      switch (node) {
+        case CHILD:
+          CHILD_PROPS[eventName] = listener;
+          break;
+        case PARENT:
+          PARENT_PROPS[eventName] = listener;
+          break;
+        case GRANDPARENT:
+          GRANDPARENT_PROPS[eventName] = listener;
+          break;
+        case BUTTON:
+          BUTTON_PROPS[eventName] = listener;
+          break;
+      }
+      // Rerender with new event listeners
+      await renderTree();
+    };
+
+    deleteAllListeners = async function (node) {
+      switch (node) {
+        case CHILD:
+          CHILD_PROPS = {};
+          break;
+        case PARENT:
+          PARENT_PROPS = {};
+          break;
+        case GRANDPARENT:
+          GRANDPARENT_PROPS = {};
+          break;
+        case BUTTON:
+          BUTTON_PROPS = {};
+          break;
+      }
+      await renderTree();
+    };
+
+    idCallOrder = [];
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should bubble simply', async () => {
+    await renderTree();
+    await putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, CHILD));
+    await putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, PARENT));
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, GRANDPARENT),
+    );
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder.length).toBe(3);
+    expect(idCallOrder[0]).toBe(CHILD);
+    expect(idCallOrder[1]).toBe(PARENT);
+    expect(idCallOrder[2]).toBe(GRANDPARENT);
+  });
+
+  it('should bubble to the right handler after an update', async () => {
+    await renderTree();
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, 'GRANDPARENT'),
+    );
+    await putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, 'PARENT'));
+    await putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, 'CHILD'));
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder).toEqual(['CHILD', 'PARENT', 'GRANDPARENT']);
+
+    idCallOrder = [];
+
+    // Update just the grand parent without updating the child.
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, 'UPDATED_GRANDPARENT'),
+    );
+
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder).toEqual(['CHILD', 'PARENT', 'UPDATED_GRANDPARENT']);
+  });
+
+  it('should continue bubbling if an error is thrown', async () => {
+    await renderTree();
+    await putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, CHILD));
+    await putListener(PARENT, ON_CLICK_KEY, function (event) {
+      recordID(PARENT);
+      throw new Error('Handler interrupted');
+    });
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, GRANDPARENT),
+    );
+    const errorHandler = jest.fn(event => {
+      event.preventDefault();
+    });
+    window.addEventListener('error', errorHandler);
+    try {
+      CHILD.click();
+      expect(idCallOrder.length).toBe(3);
+      expect(idCallOrder[0]).toBe(CHILD);
+      expect(idCallOrder[1]).toBe(PARENT);
+      expect(idCallOrder[2]).toBe(GRANDPARENT);
+      expect(errorHandler).toHaveBeenCalledTimes(1);
+      expect(errorHandler.mock.calls[0][0]).toEqual(
+        expect.objectContaining({
+          error: expect.any(Error),
+          message: 'Handler interrupted',
+        }),
+      );
+    } finally {
+      window.removeEventListener('error', errorHandler);
+    }
+  });
+
+  it('should set currentTarget', async () => {
+    await renderTree();
+    await putListener(CHILD, ON_CLICK_KEY, function (event) {
+      recordID(CHILD);
+      expect(event.currentTarget).toBe(CHILD);
+    });
+    await putListener(PARENT, ON_CLICK_KEY, function (event) {
+      recordID(PARENT);
+      expect(event.currentTarget).toBe(PARENT);
+    });
+    await putListener(GRANDPARENT, ON_CLICK_KEY, function (event) {
+      recordID(GRANDPARENT);
+      expect(event.currentTarget).toBe(GRANDPARENT);
+    });
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder.length).toBe(3);
+    expect(idCallOrder[0]).toBe(CHILD);
+    expect(idCallOrder[1]).toBe(PARENT);
+    expect(idCallOrder[2]).toBe(GRANDPARENT);
+  });
+
+  it('should support stopPropagation()', async () => {
+    await renderTree();
+    await putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, CHILD));
+    await putListener(
+      PARENT,
+      ON_CLICK_KEY,
+      recordIDAndStopPropagation.bind(null, PARENT),
+    );
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, GRANDPARENT),
+    );
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder.length).toBe(2);
+    expect(idCallOrder[0]).toBe(CHILD);
+    expect(idCallOrder[1]).toBe(PARENT);
+  });
+
+  it('should support overriding .isPropagationStopped()', async () => {
+    await renderTree();
+    // Ew. See D4504876.
+    await putListener(CHILD, ON_CLICK_KEY, recordID.bind(null, CHILD));
+    await putListener(PARENT, ON_CLICK_KEY, function (e) {
+      recordID(PARENT, e);
+      // This stops React bubbling but avoids touching the native event
+      e.isPropagationStopped = () => true;
+    });
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, GRANDPARENT),
+    );
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder.length).toBe(2);
+    expect(idCallOrder[0]).toBe(CHILD);
+    expect(idCallOrder[1]).toBe(PARENT);
+  });
+
+  it('should stop after first dispatch if stopPropagation', async () => {
+    await renderTree();
+    await putListener(
+      CHILD,
+      ON_CLICK_KEY,
+      recordIDAndStopPropagation.bind(null, CHILD),
+    );
+    await putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, PARENT));
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, GRANDPARENT),
+    );
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder.length).toBe(1);
+    expect(idCallOrder[0]).toBe(CHILD);
+  });
+
+  it('should not stopPropagation if false is returned', async () => {
+    await renderTree();
+    await putListener(
+      CHILD,
+      ON_CLICK_KEY,
+      recordIDAndReturnFalse.bind(null, CHILD),
+    );
+    await putListener(PARENT, ON_CLICK_KEY, recordID.bind(null, PARENT));
+    await putListener(
+      GRANDPARENT,
+      ON_CLICK_KEY,
+      recordID.bind(null, GRANDPARENT),
+    );
+    await act(() => {
+      CHILD.click();
+    });
+    expect(idCallOrder.length).toBe(3);
+    expect(idCallOrder[0]).toBe(CHILD);
+    expect(idCallOrder[1]).toBe(PARENT);
+    expect(idCallOrder[2]).toBe(GRANDPARENT);
+  });
+
+  /**
+   * The entire event registration state of the world should be "locked-in" at
+   * the time the event occurs. This is to resolve many edge cases that come
+   * about from a listener on a lower-in-DOM node causing structural changes at
+   * places higher in the DOM. If this lower-in-DOM node causes new content to
+   * be rendered at a place higher-in-DOM, we need to be careful not to invoke
+   * these new listeners.
+   */
+
+  it('should invoke handlers that were removed while bubbling', async () => {
+    await renderTree();
+    const handleParentClick = jest.fn();
+    const handleChildClick = async function (event) {
+      await deleteAllListeners(PARENT);
+    };
+    await putListener(CHILD, ON_CLICK_KEY, handleChildClick);
+    await putListener(PARENT, ON_CLICK_KEY, handleParentClick);
+    await act(() => {
+      CHILD.click();
+    });
+    expect(handleParentClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not invoke newly inserted handlers while bubbling', async () => {
+    await renderTree();
+    const handleParentClick = jest.fn();
+    const handleChildClick = async function (event) {
+      await putListener(PARENT, ON_CLICK_KEY, handleParentClick);
+    };
+    await putListener(CHILD, ON_CLICK_KEY, handleChildClick);
+    await act(() => {
+      CHILD.click();
+    });
+    expect(handleParentClick).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactChildReconciler-test.js b/packages/react-dom/src/__tests__/ReactChildReconciler-test.js
new file mode 100644
index 00000000000..d173d26e679
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactChildReconciler-test.js
@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// NOTE: We're explicitly not using JSX here. This is intended to test
+// the current stack addendum without having source location added by babel.
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactChildReconciler', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  function createIterable(array) {
+    return {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next() {
+            const next = {
+              value: i < array.length ? array[i] : undefined,
+              done: i === array.length,
+            };
+            i++;
+            return next;
+          },
+        };
+      },
+    };
+  }
+
+  function makeIterableFunction(value) {
+    const fn = () => {};
+    fn['@@iterator'] = function iterator() {
+      let timesCalled = 0;
+      return {
+        next() {
+          const done = timesCalled++ > 0;
+          return {done, value: done ? undefined : value};
+        },
+      };
+    };
+    return fn;
+  }
+
+  it('does not treat functions as iterables', async () => {
+    const iterableFunction = makeIterableFunction('foo');
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <h1>{iterableFunction}</h1>
+        </div>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Functions are not valid as a React child. ' +
+        'This may happen if you return fn instead of <fn /> from render. ' +
+        'Or maybe you meant to call this function rather than return it.\n' +
+        '  <h1>{fn}</h1>\n' +
+        '    in h1 (at **)',
+    ]);
+    const node = container.firstChild;
+
+    expect(node.innerHTML).toContain(''); // h1
+  });
+
+  it('warns for duplicated array keys', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div>{[<div key="1" />, <div key="1" />]}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '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 duplicated and/or omitted — ' +
+        'the behavior is unsupported and could change in a future version.\n' +
+        '    in div (at **)\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('warns for duplicated array keys with component stack info', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div>{[<div key="1" />, <div key="1" />]}</div>;
+      }
+    }
+
+    class Parent extends React.Component {
+      render() {
+        return React.cloneElement(this.props.child);
+      }
+    }
+
+    class GrandParent extends React.Component {
+      render() {
+        return <Parent child={<Component />} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<GrandParent />);
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'duplicated and/or omitted — the behavior is unsupported and ' +
+        'could change in a future version.\n' +
+        '    in div (at **)\n' +
+        '    in Component (at **)\n' +
+        '    in GrandParent (at **)',
+    ]);
+  });
+
+  it('warns for duplicated iterable keys', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div>{createIterable([<div key="1" />, <div key="1" />])}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'duplicated and/or omitted — the behavior is unsupported and ' +
+        'could change in a future version.\n' +
+        '    in div (at **)\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('warns for duplicated iterable keys with component stack info', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div>{createIterable([<div key="1" />, <div key="1" />])}</div>;
+      }
+    }
+
+    class Parent extends React.Component {
+      render() {
+        return React.cloneElement(this.props.child);
+      }
+    }
+
+    class GrandParent extends React.Component {
+      render() {
+        return <Parent child={<Component />} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<GrandParent />);
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'duplicated and/or omitted — the behavior is unsupported and ' +
+        'could change in a future version.\n' +
+        '    in div (at **)\n' +
+        '    in Component (at **)\n' +
+        '    in GrandParent (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactClassComponentPropResolutionFizz-test.js b/packages/react-dom/src/__tests__/ReactClassComponentPropResolutionFizz-test.js
new file mode 100644
index 00000000000..66477bf80a9
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactClassComponentPropResolutionFizz-test.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {insertNodesAndExecuteScripts} from '../test-utils/FizzTestUtils';
+import {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let React;
+let ReactDOMServer;
+let Scheduler;
+let assertLog;
+let container;
+let serverAct;
+
+describe('ReactClassComponentPropResolutionFizz', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    Scheduler = require('scheduler');
+    patchMessageChannel();
+
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.browser');
+    assertLog = require('internal-test-utils').assertLog;
+    serverAct = require('internal-test-utils').serverAct;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    insertNodesAndExecuteScripts(temp, container, null);
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('resolves ref and default props before calling lifecycle methods', async () => {
+    function getPropKeys(props) {
+      return Object.keys(props).join(', ');
+    }
+
+    class Component extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('constructor: ' + getPropKeys(props));
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('componentWillMount: ' + getPropKeys(this.props));
+      }
+      render() {
+        return <Text text={'render: ' + getPropKeys(this.props)} />;
+      }
+    }
+
+    Component.defaultProps = {
+      default: 'yo',
+    };
+
+    // `ref` should never appear as a prop. `default` always should.
+
+    const ref = React.createRef();
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<Component text="Yay" ref={ref} />),
+    );
+    await readIntoContainer(stream);
+
+    assertLog([
+      'constructor: text, default',
+      'componentWillMount: text, default',
+      'render: text, default',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactComponent-test.js b/packages/react-dom/src/__tests__/ReactComponent-test.js
new file mode 100644
index 00000000000..9df55ff80ed
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactComponent-test.js
@@ -0,0 +1,710 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactComponent', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  // @gate !disableLegacyMode
+  it('should throw on invalid render targets in legacy roots', () => {
+    const container = document.createElement('div');
+    // jQuery objects are basically arrays; people often pass them in by mistake
+    expect(function () {
+      ReactDOM.render(<div />, [container]);
+    }).toThrowError(/Target container is not a DOM element./);
+
+    expect(function () {
+      ReactDOM.render(<div />, null);
+    }).toThrowError(/Target container is not a DOM element./);
+  });
+
+  it('should throw (in dev) when children are mutated during render', async () => {
+    function Wrapper(props) {
+      props.children[1] = <p key={1} />; // Mutation is illegal
+      return <div>{props.children}</div>;
+    }
+    if (__DEV__) {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <Wrapper>
+              <span key={0} />
+              <span key={1} />
+              <span key={2} />
+            </Wrapper>,
+          );
+        }),
+      ).rejects.toThrowError(/Cannot assign to read only property.*/);
+    } else {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <Wrapper>
+            <span key={0} />
+            <span key={1} />
+            <span key={2} />
+          </Wrapper>,
+        );
+      });
+    }
+  });
+
+  it('should throw (in dev) when children are mutated during update', async () => {
+    class Wrapper extends React.Component {
+      componentDidMount() {
+        this.props.children[1] = <p key={1} />; // Mutation is illegal
+        this.forceUpdate();
+      }
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    if (__DEV__) {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <Wrapper>
+              <span key={0} />
+              <span key={1} />
+              <span key={2} />
+            </Wrapper>,
+          );
+        }),
+      ).rejects.toThrowError(/Cannot assign to read only property.*/);
+    } else {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <Wrapper>
+            <span key={0} />
+            <span key={1} />
+            <span key={2} />
+          </Wrapper>,
+        );
+      });
+    }
+  });
+
+  it('should not have string refs on unmounted components', async () => {
+    class Parent extends React.Component {
+      render() {
+        return (
+          <Child>
+            <div ref="test" />
+          </Child>
+        );
+      }
+
+      componentDidMount() {
+        expect(this.refs && this.refs.test).toEqual(undefined);
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent child={<span />} />);
+    });
+  });
+
+  it('should support callback-style refs', async () => {
+    const innerObj = {};
+    const outerObj = {};
+
+    class Wrapper extends React.Component {
+      getObject = () => {
+        return this.props.object;
+      };
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let mounted = false;
+
+    class Component extends React.Component {
+      render() {
+        const inner = (
+          <Wrapper object={innerObj} ref={c => (this.innerRef = c)} />
+        );
+        const outer = (
+          <Wrapper object={outerObj} ref={c => (this.outerRef = c)}>
+            {inner}
+          </Wrapper>
+        );
+        return outer;
+      }
+
+      componentDidMount() {
+        expect(this.innerRef.getObject()).toEqual(innerObj);
+        expect(this.outerRef.getObject()).toEqual(outerObj);
+        mounted = true;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(mounted).toBe(true);
+  });
+
+  it('should support object-style refs', async () => {
+    const innerObj = {};
+    const outerObj = {};
+
+    class Wrapper extends React.Component {
+      getObject = () => {
+        return this.props.object;
+      };
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let mounted = false;
+
+    class Component extends React.Component {
+      constructor() {
+        super();
+        this.innerRef = React.createRef();
+        this.outerRef = React.createRef();
+      }
+      render() {
+        const inner = <Wrapper object={innerObj} ref={this.innerRef} />;
+        const outer = (
+          <Wrapper object={outerObj} ref={this.outerRef}>
+            {inner}
+          </Wrapper>
+        );
+        return outer;
+      }
+
+      componentDidMount() {
+        expect(this.innerRef.current.getObject()).toEqual(innerObj);
+        expect(this.outerRef.current.getObject()).toEqual(outerObj);
+        mounted = true;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(mounted).toBe(true);
+  });
+
+  it('should support new-style refs with mixed-up owners', async () => {
+    class Wrapper extends React.Component {
+      getTitle = () => {
+        return this.props.title;
+      };
+
+      render() {
+        return this.props.getContent();
+      }
+    }
+
+    let mounted = false;
+
+    class Component extends React.Component {
+      getInner = () => {
+        // (With old-style refs, it's impossible to get a ref to this div
+        // because Wrapper is the current owner when this function is called.)
+        return <div className="inner" ref={c => (this.innerRef = c)} />;
+      };
+
+      render() {
+        return (
+          <Wrapper
+            title="wrapper"
+            ref={c => (this.wrapperRef = c)}
+            getContent={this.getInner}
+          />
+        );
+      }
+
+      componentDidMount() {
+        // Check .props.title to make sure we got the right elements back
+        expect(this.wrapperRef.getTitle()).toBe('wrapper');
+        expect(this.innerRef.className).toBe('inner');
+        mounted = true;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(mounted).toBe(true);
+  });
+
+  it('should call refs at the correct time', async () => {
+    const log = [];
+
+    class Inner extends React.Component {
+      render() {
+        log.push(`inner ${this.props.id} render`);
+        return <div />;
+      }
+
+      componentDidMount() {
+        log.push(`inner ${this.props.id} componentDidMount`);
+      }
+
+      componentDidUpdate() {
+        log.push(`inner ${this.props.id} componentDidUpdate`);
+      }
+
+      componentWillUnmount() {
+        log.push(`inner ${this.props.id} componentWillUnmount`);
+      }
+    }
+
+    class Outer extends React.Component {
+      render() {
+        return (
+          <div>
+            <Inner
+              id={1}
+              ref={c => {
+                log.push(`ref 1 got ${c ? `instance ${c.props.id}` : 'null'}`);
+              }}
+            />
+            <Inner
+              id={2}
+              ref={c => {
+                log.push(`ref 2 got ${c ? `instance ${c.props.id}` : 'null'}`);
+              }}
+            />
+          </div>
+        );
+      }
+
+      componentDidMount() {
+        log.push('outer componentDidMount');
+      }
+
+      componentDidUpdate() {
+        log.push('outer componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        log.push('outer componentWillUnmount');
+      }
+    }
+
+    // mount, update, unmount
+    const el = document.createElement('div');
+    log.push('start mount');
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<Outer />);
+    });
+    log.push('start update');
+    await act(() => {
+      root.render(<Outer />);
+    });
+    log.push('start unmount');
+    await act(() => {
+      root.unmount();
+    });
+
+    expect(log).toEqual([
+      'start mount',
+      'inner 1 render',
+      'inner 2 render',
+      'inner 1 componentDidMount',
+      'ref 1 got instance 1',
+      'inner 2 componentDidMount',
+      'ref 2 got instance 2',
+      'outer componentDidMount',
+      'start update',
+      // Previous (equivalent) refs get cleared
+      // Fiber renders first, resets refs later
+      'inner 1 render',
+      'inner 2 render',
+      'ref 1 got null',
+      'ref 2 got null',
+      'inner 1 componentDidUpdate',
+      'ref 1 got instance 1',
+      'inner 2 componentDidUpdate',
+      'ref 2 got instance 2',
+      'outer componentDidUpdate',
+      'start unmount',
+      'outer componentWillUnmount',
+      'ref 1 got null',
+      'inner 1 componentWillUnmount',
+      'ref 2 got null',
+      'inner 2 componentWillUnmount',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('fires the callback after a component is rendered in legacy roots', () => {
+    const callback = jest.fn();
+    const container = document.createElement('div');
+    ReactDOM.render(<div />, container, callback);
+    expect(callback).toHaveBeenCalledTimes(1);
+    ReactDOM.render(<div className="foo" />, container, callback);
+    expect(callback).toHaveBeenCalledTimes(2);
+    ReactDOM.render(<span />, container, callback);
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+
+  it('throws usefully when rendering badly-typed elements', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const X = undefined;
+    const XElement = <X />;
+    await expect(async () => {
+      await act(() => {
+        root.render(XElement);
+      });
+    }).rejects.toThrowError(
+      'Element type is invalid: expected a string (for built-in components) ' +
+        'or a class/function (for composite components) but got: undefined.' +
+        (__DEV__
+          ? " You likely forgot to export your component from the file it's " +
+            'defined in, or you might have mixed up default and named imports.'
+          : ''),
+    );
+
+    const Y = null;
+    const YElement = <Y />;
+    await expect(async () => {
+      await act(() => {
+        root.render(YElement);
+      });
+    }).rejects.toThrowError(
+      'Element type is invalid: expected a string (for built-in components) ' +
+        'or a class/function (for composite components) but got: null.',
+    );
+
+    const Z = true;
+    const ZElement = <Z />;
+    await expect(async () => {
+      await act(() => {
+        root.render(ZElement);
+      });
+    }).rejects.toThrowError(
+      'Element type is invalid: expected a string (for built-in components) ' +
+        'or a class/function (for composite components) but got: boolean.',
+    );
+  });
+
+  it('includes owner name in the error about badly-typed elements', async () => {
+    const X = undefined;
+
+    function Indirection(props) {
+      return <div>{props.children}</div>;
+    }
+
+    function Bar() {
+      return (
+        <Indirection>
+          <X />
+        </Indirection>
+      );
+    }
+
+    function Foo() {
+      return <Bar />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<Foo />);
+      });
+    }).rejects.toThrowError(
+      'Element type is invalid: expected a string (for built-in components) ' +
+        'or a class/function (for composite components) but got: undefined.' +
+        (__DEV__
+          ? " You likely forgot to export your component from the file it's " +
+            'defined in, or you might have mixed up default and named imports.' +
+            '\n\nCheck the render method of `Bar`.'
+          : ''),
+    );
+  });
+
+  it('throws if a plain object is used as a child', async () => {
+    const children = {
+      x: <span />,
+      y: <span />,
+      z: <span />,
+    };
+    const element = <div>{[children]}</div>;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(element);
+      }),
+    ).rejects.toThrowError(
+      'Objects are not valid as a React child (found: object with keys {x, y, z}). ' +
+        'If you meant to render a collection of children, use an array instead.',
+    );
+  });
+
+  it('throws if a legacy element is used as a child', async () => {
+    const inlinedElement = {
+      $$typeof: Symbol.for('react.element'),
+      type: 'div',
+      key: null,
+      ref: null,
+      props: {},
+      _owner: null,
+    };
+    const element = <div>{[inlinedElement]}</div>;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(element);
+      }),
+    ).rejects.toThrowError(
+      'A React Element from an older version of React was rendered. ' +
+        'This is not supported. It can happen if:\n' +
+        '- Multiple copies of the "react" package is used.\n' +
+        '- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' +
+        '- A compiler tries to "inline" JSX instead of using the runtime.',
+    );
+  });
+
+  it('throws if a plain object even if it is in an owner', async () => {
+    class Foo extends React.Component {
+      render() {
+        const children = {
+          a: <span />,
+          b: <span />,
+          c: <span />,
+        };
+        return <div>{[children]}</div>;
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<Foo />);
+      }),
+    ).rejects.toThrowError(
+      'Objects are not valid as a React child (found: object with keys {a, b, c}).' +
+        ' If you meant to render a collection of children, use an array ' +
+        'instead.',
+    );
+  });
+
+  it('throws if a plain object is used as a child when using SSR', async () => {
+    const children = {
+      x: <span />,
+      y: <span />,
+      z: <span />,
+    };
+    const element = <div>{[children]}</div>;
+    expect(() => {
+      ReactDOMServer.renderToString(element);
+    }).toThrowError(
+      'Objects are not valid as a React child (found: object with keys {x, y, z}). ' +
+        'If you meant to render a collection of children, use ' +
+        'an array instead.',
+    );
+  });
+
+  it('throws if a plain object even if it is in an owner when using SSR', async () => {
+    class Foo extends React.Component {
+      render() {
+        const children = {
+          a: <span />,
+          b: <span />,
+          c: <span />,
+        };
+        return <div>{[children]}</div>;
+      }
+    }
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOMServer.renderToString(<Foo />, container);
+    }).toThrowError(
+      'Objects are not valid as a React child (found: object with keys {a, b, c}). ' +
+        'If you meant to render a collection of children, use ' +
+        'an array instead.',
+    );
+  });
+
+  describe('with new features', () => {
+    it('warns on function as a return value from a function', async () => {
+      function Foo() {
+        return Foo;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+      assertConsoleErrorDev([
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return Foo instead of <Foo /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <Foo>{Foo}</Foo>\n' +
+          '    in Foo (at **)',
+      ]);
+    });
+
+    it('warns on function as a return value from a class', async () => {
+      class Foo extends React.Component {
+        render() {
+          return Foo;
+        }
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<Foo />);
+      });
+      assertConsoleErrorDev([
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return Foo instead of <Foo /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <Foo>{Foo}</Foo>\n' +
+          '    in Foo (at **)',
+      ]);
+    });
+
+    it('warns on function as a child to host component', async () => {
+      function Foo() {
+        return (
+          <div>
+            <span>{Foo}</span>
+          </div>
+        );
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+      assertConsoleErrorDev([
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return Foo instead of <Foo /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <span>{Foo}</span>\n' +
+          '    in span (at **)\n' +
+          '    in Foo (at **)',
+      ]);
+    });
+
+    it('does not warn for function-as-a-child that gets resolved', async () => {
+      function Bar(props) {
+        return props.children();
+      }
+      function Foo() {
+        return <Bar>{() => 'Hello'}</Bar>;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+
+      expect(container.innerHTML).toBe('Hello');
+    });
+
+    it('deduplicates function type warnings based on component type', async () => {
+      class Foo extends React.PureComponent {
+        constructor() {
+          super();
+          this.state = {type: 'mushrooms'};
+        }
+        render() {
+          return (
+            <div>
+              {Foo}
+              {Foo}
+              <span>
+                {Foo}
+                {Foo}
+              </span>
+            </div>
+          );
+        }
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      let component;
+      await act(() => {
+        root.render(<Foo ref={current => (component = current)} />);
+      });
+      assertConsoleErrorDev([
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return Foo instead of <Foo /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <div>{Foo}</div>\n' +
+          '    in div (at **)\n' +
+          '    in Foo (at **)',
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return Foo instead of <Foo /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <span>{Foo}</span>\n' +
+          '    in span (at **)\n' +
+          '    in Foo (at **)',
+      ]);
+      await act(() => {
+        component.setState({type: 'portobello mushrooms'});
+      });
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
new file mode 100644
index 00000000000..f985d065976
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
@@ -0,0 +1,1574 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React;
+let ReactDOMClient;
+let assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+const clone = function (o) {
+  return JSON.parse(JSON.stringify(o));
+};
+
+const GET_INIT_STATE_RETURN_VAL = {
+  hasWillMountCompleted: false,
+  hasRenderCompleted: false,
+  hasDidMountCompleted: false,
+  hasWillUnmountCompleted: false,
+};
+
+const INIT_RENDER_STATE = {
+  hasWillMountCompleted: true,
+  hasRenderCompleted: false,
+  hasDidMountCompleted: false,
+  hasWillUnmountCompleted: false,
+};
+
+const DID_MOUNT_STATE = {
+  hasWillMountCompleted: true,
+  hasRenderCompleted: true,
+  hasDidMountCompleted: false,
+  hasWillUnmountCompleted: false,
+};
+
+const NEXT_RENDER_STATE = {
+  hasWillMountCompleted: true,
+  hasRenderCompleted: true,
+  hasDidMountCompleted: true,
+  hasWillUnmountCompleted: false,
+};
+
+const WILL_UNMOUNT_STATE = {
+  hasWillMountCompleted: true,
+  hasDidMountCompleted: true,
+  hasRenderCompleted: true,
+  hasWillUnmountCompleted: false,
+};
+
+const POST_WILL_UNMOUNT_STATE = {
+  hasWillMountCompleted: true,
+  hasDidMountCompleted: true,
+  hasRenderCompleted: true,
+  hasWillUnmountCompleted: true,
+};
+
+/**
+ * TODO: We should make any setState calls fail in
+ * `getInitialState` and `componentWillMount`. They will usually fail
+ * anyways because `this._renderedComponent` is empty, however, if a component
+ * is *reused*, then that won't be the case and things will appear to work in
+ * some cases. Better to just block all updates in initialization.
+ */
+describe('ReactComponentLifeCycle', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ({
+      act,
+      assertConsoleErrorDev,
+      assertConsoleWarnDev,
+    } = require('internal-test-utils'));
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+  });
+
+  it('should not reuse an instance when it has been unmounted', async () => {
+    const container = document.createElement('div');
+
+    class StatefulComponent extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const element = <StatefulComponent />;
+    let root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(element);
+    });
+
+    const firstInstance = container.firstChild;
+    await act(() => {
+      root.unmount();
+    });
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(element);
+    });
+
+    const secondInstance = container.firstChild;
+    expect(firstInstance).not.toBe(secondInstance);
+  });
+
+  /**
+   * If a state update triggers rerendering that in turn fires an onDOMReady,
+   * that second onDOMReady should not fail.
+   */
+  it('should fire onDOMReady when already in onDOMReady', async () => {
+    const _testJournal = [];
+
+    class Child extends React.Component {
+      componentDidMount() {
+        _testJournal.push('Child:onDOMReady');
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    class SwitcherParent extends React.Component {
+      constructor(props) {
+        super(props);
+        _testJournal.push('SwitcherParent:getInitialState');
+        this.state = {showHasOnDOMReadyComponent: false};
+      }
+
+      componentDidMount() {
+        _testJournal.push('SwitcherParent:onDOMReady');
+        this.switchIt();
+      }
+
+      switchIt = () => {
+        this.setState({showHasOnDOMReadyComponent: true});
+      };
+
+      render() {
+        return (
+          <div>
+            {this.state.showHasOnDOMReadyComponent ? <Child /> : <div />}
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<SwitcherParent />);
+    });
+
+    expect(_testJournal).toEqual([
+      'SwitcherParent:getInitialState',
+      'SwitcherParent:onDOMReady',
+      'Child:onDOMReady',
+    ]);
+  });
+
+  // You could assign state here, but not access members of it, unless you
+  // had provided a getInitialState method.
+  it('throws when accessing state in componentWillMount', async () => {
+    class StatefulComponent extends React.Component {
+      UNSAFE_componentWillMount() {
+        void this.state.yada;
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<StatefulComponent />);
+      }),
+    ).rejects.toThrow();
+  });
+
+  it('should allow update state inside of componentWillMount', () => {
+    class StatefulComponent extends React.Component {
+      UNSAFE_componentWillMount() {
+        this.setState({stateField: 'something'});
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    expect(async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<StatefulComponent />);
+      });
+    }).not.toThrow();
+  });
+
+  it("warns if setting 'this.state = props'", async () => {
+    class StatefulComponent extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this.state = props;
+      }
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<StatefulComponent />);
+    });
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in StatefulComponent (at **)',
+    ]);
+  });
+
+  it('should not allow update state inside of getInitialState', async () => {
+    class StatefulComponent extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this.setState({stateField: 'something'});
+
+        this.state = {stateField: 'somethingelse'};
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<StatefulComponent />);
+    });
+    assertConsoleErrorDev([
+      "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.\n' +
+        '    in StatefulComponent (at **)',
+    ]);
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<StatefulComponent />);
+    });
+  });
+
+  it('should carry through each of the phases of setup', async () => {
+    class LifeCycleComponent extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this._testJournal = {};
+        const initState = {
+          hasWillMountCompleted: false,
+          hasDidMountCompleted: false,
+          hasRenderCompleted: false,
+          hasWillUnmountCompleted: false,
+        };
+        this._testJournal.returnedFromGetInitialState = clone(initState);
+        this.state = initState;
+      }
+
+      UNSAFE_componentWillMount() {
+        this._testJournal.stateAtStartOfWillMount = clone(this.state);
+        this.state.hasWillMountCompleted = true;
+      }
+
+      componentDidMount() {
+        this._testJournal.stateAtStartOfDidMount = clone(this.state);
+        this.setState({hasDidMountCompleted: true});
+      }
+
+      render() {
+        const isInitialRender = !this.state.hasRenderCompleted;
+        if (isInitialRender) {
+          this._testJournal.stateInInitialRender = clone(this.state);
+        } else {
+          this._testJournal.stateInLaterRender = clone(this.state);
+        }
+        // you would *NEVER* do anything like this in real code!
+        this.state.hasRenderCompleted = true;
+        return <div ref={React.createRef()}>I am the inner DIV</div>;
+      }
+
+      componentWillUnmount() {
+        this._testJournal.stateAtStartOfWillUnmount = clone(this.state);
+        this.state.hasWillUnmountCompleted = true;
+      }
+    }
+
+    // A component that is merely "constructed" (as in "constructor") but not
+    // yet initialized, or rendered.
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    const instanceRef = React.createRef();
+    await act(() => {
+      root.render(<LifeCycleComponent ref={instanceRef} />);
+    });
+    const instance = instanceRef.current;
+
+    // getInitialState
+    expect(instance._testJournal.returnedFromGetInitialState).toEqual(
+      GET_INIT_STATE_RETURN_VAL,
+    );
+
+    // componentWillMount
+    expect(instance._testJournal.stateAtStartOfWillMount).toEqual(
+      instance._testJournal.returnedFromGetInitialState,
+    );
+
+    // componentDidMount
+    expect(instance._testJournal.stateAtStartOfDidMount).toEqual(
+      DID_MOUNT_STATE,
+    );
+
+    // initial render
+    expect(instance._testJournal.stateInInitialRender).toEqual(
+      INIT_RENDER_STATE,
+    );
+
+    // Now *update the component*
+    instance.forceUpdate();
+
+    // render 2nd time
+    expect(instance._testJournal.stateInLaterRender).toEqual(NEXT_RENDER_STATE);
+
+    await act(() => {
+      root.unmount();
+    });
+
+    expect(instance._testJournal.stateAtStartOfWillUnmount).toEqual(
+      WILL_UNMOUNT_STATE,
+    );
+    // componentWillUnmount called right before unmount.
+
+    // But the current lifecycle of the component is unmounted.
+    expect(instance.state).toEqual(POST_WILL_UNMOUNT_STATE);
+  });
+
+  it('should not throw when updating an auxiliary component', async () => {
+    class Tooltip extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+
+      componentDidMount() {
+        const container = document.createElement('div');
+        this.root = ReactDOMClient.createRoot(container);
+        this.updateTooltip();
+      }
+
+      componentDidUpdate() {
+        this.updateTooltip();
+      }
+
+      updateTooltip = () => {
+        // Even though this.props.tooltip has an owner, updating it shouldn't
+        // throw here because it's mounted as a root component
+        this.root.render(this.props.tooltip, this.container);
+      };
+    }
+
+    class Component extends React.Component {
+      render() {
+        return (
+          <Tooltip
+            ref={React.createRef()}
+            tooltip={<div>{this.props.tooltipText}</div>}>
+            {this.props.text}
+          </Tooltip>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component text="uno" tooltipText="one" />);
+    });
+
+    // Since `instance` is a root component, we can set its props. This also
+    // makes Tooltip rerender the tooltip component, which shouldn't throw.
+    await act(() => {
+      root.render(<Component text="dos" tooltipText="two" />);
+    });
+  });
+
+  it('should allow state updates in componentDidMount', async () => {
+    /**
+     * calls setState in an componentDidMount.
+     */
+    class SetStateInComponentDidMount extends React.Component {
+      state = {
+        stateField: this.props.valueToUseInitially,
+      };
+
+      componentDidMount() {
+        this.setState({stateField: this.props.valueToUseInOnDOMReady});
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    let instance;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <SetStateInComponentDidMount
+          ref={current => (instance = current)}
+          valueToUseInitially="hello"
+          valueToUseInOnDOMReady="goodbye"
+        />,
+      );
+    });
+
+    expect(instance.state.stateField).toBe('goodbye');
+  });
+
+  it('should call nested legacy lifecycle methods in the right order', async () => {
+    let log;
+    const logger = function (msg) {
+      return function () {
+        // return true for shouldComponentUpdate
+        log.push(msg);
+        return true;
+      };
+    };
+    class Outer extends React.Component {
+      UNSAFE_componentWillMount = logger('outer componentWillMount');
+      componentDidMount = logger('outer componentDidMount');
+      UNSAFE_componentWillReceiveProps = logger(
+        'outer componentWillReceiveProps',
+      );
+      shouldComponentUpdate = logger('outer shouldComponentUpdate');
+      UNSAFE_componentWillUpdate = logger('outer componentWillUpdate');
+      componentDidUpdate = logger('outer componentDidUpdate');
+      componentWillUnmount = logger('outer componentWillUnmount');
+      render() {
+        return (
+          <div>
+            <Inner x={this.props.x} />
+          </div>
+        );
+      }
+    }
+
+    class Inner extends React.Component {
+      UNSAFE_componentWillMount = logger('inner componentWillMount');
+      componentDidMount = logger('inner componentDidMount');
+      UNSAFE_componentWillReceiveProps = logger(
+        'inner componentWillReceiveProps',
+      );
+      shouldComponentUpdate = logger('inner shouldComponentUpdate');
+      UNSAFE_componentWillUpdate = logger('inner componentWillUpdate');
+      componentDidUpdate = logger('inner componentDidUpdate');
+      componentWillUnmount = logger('inner componentWillUnmount');
+      render() {
+        return <span>{this.props.x}</span>;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    log = [];
+    await act(() => {
+      root.render(<Outer x={1} />);
+    });
+    expect(log).toEqual([
+      'outer componentWillMount',
+      'inner componentWillMount',
+      'inner componentDidMount',
+      'outer componentDidMount',
+    ]);
+
+    // Dedup warnings
+    log = [];
+    await act(() => {
+      root.render(<Outer x={2} />);
+    });
+    expect(log).toEqual([
+      'outer componentWillReceiveProps',
+      'outer shouldComponentUpdate',
+      'outer componentWillUpdate',
+      'inner componentWillReceiveProps',
+      'inner shouldComponentUpdate',
+      'inner componentWillUpdate',
+      'inner componentDidUpdate',
+      'outer componentDidUpdate',
+    ]);
+
+    log = [];
+    await act(() => {
+      root.unmount();
+    });
+    expect(log).toEqual([
+      'outer componentWillUnmount',
+      'inner componentWillUnmount',
+    ]);
+  });
+
+  it('should call nested new lifecycle methods in the right order', async () => {
+    let log;
+    const logger = function (msg) {
+      return function () {
+        // return true for shouldComponentUpdate
+        log.push(msg);
+        return true;
+      };
+    };
+    class Outer extends React.Component {
+      state = {};
+      static getDerivedStateFromProps(props, prevState) {
+        log.push('outer getDerivedStateFromProps');
+        return null;
+      }
+      componentDidMount = logger('outer componentDidMount');
+      shouldComponentUpdate = logger('outer shouldComponentUpdate');
+      getSnapshotBeforeUpdate = logger('outer getSnapshotBeforeUpdate');
+      componentDidUpdate = logger('outer componentDidUpdate');
+      componentWillUnmount = logger('outer componentWillUnmount');
+      render() {
+        return (
+          <div>
+            <Inner x={this.props.x} />
+          </div>
+        );
+      }
+    }
+
+    class Inner extends React.Component {
+      state = {};
+      static getDerivedStateFromProps(props, prevState) {
+        log.push('inner getDerivedStateFromProps');
+        return null;
+      }
+      componentDidMount = logger('inner componentDidMount');
+      shouldComponentUpdate = logger('inner shouldComponentUpdate');
+      getSnapshotBeforeUpdate = logger('inner getSnapshotBeforeUpdate');
+      componentDidUpdate = logger('inner componentDidUpdate');
+      componentWillUnmount = logger('inner componentWillUnmount');
+      render() {
+        return <span>{this.props.x}</span>;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    log = [];
+    await act(() => {
+      root.render(<Outer x={1} />);
+    });
+    expect(log).toEqual([
+      'outer getDerivedStateFromProps',
+      'inner getDerivedStateFromProps',
+      'inner componentDidMount',
+      'outer componentDidMount',
+    ]);
+
+    // Dedup warnings
+    log = [];
+    await act(() => {
+      root.render(<Outer x={2} />);
+    });
+    expect(log).toEqual([
+      'outer getDerivedStateFromProps',
+      'outer shouldComponentUpdate',
+      'inner getDerivedStateFromProps',
+      'inner shouldComponentUpdate',
+      'inner getSnapshotBeforeUpdate',
+      'outer getSnapshotBeforeUpdate',
+      'inner componentDidUpdate',
+      'outer componentDidUpdate',
+    ]);
+
+    log = [];
+    await act(() => {
+      root.unmount();
+    });
+    expect(log).toEqual([
+      'outer componentWillUnmount',
+      'inner componentWillUnmount',
+    ]);
+  });
+
+  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new static gDSFP is present', async () => {
+    class Component extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      componentWillMount() {
+        throw Error('unexpected');
+      }
+      componentWillReceiveProps() {
+        throw Error('unexpected');
+      }
+      componentWillUpdate() {
+        throw Error('unexpected');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: Component',
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' +
+          'In React 18.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\n' +
+          'Please update the following components: Component',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: Component',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', async () => {
+    class Component extends React.Component {
+      state = {};
+      getSnapshotBeforeUpdate() {
+        return null;
+      }
+      componentWillMount() {
+        throw Error('unexpected');
+      }
+      componentWillReceiveProps() {
+        throw Error('unexpected');
+      }
+      componentWillUpdate() {
+        throw Error('unexpected');
+      }
+      componentDidUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component value={1} />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: Component',
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' +
+          'In React 18.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\n' +
+          'Please update the following components: Component',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: Component',
+      ],
+      {withoutStack: true},
+    );
+
+    await act(() => {
+      root.render(<Component value={2} />);
+    });
+  });
+
+  it('should not invoke new unsafe lifecycles (cWM/cWRP/cWU) if static gDSFP is present', async () => {
+    class Component extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      UNSAFE_componentWillMount() {
+        throw Error('unexpected');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        throw Error('unexpected');
+      }
+      UNSAFE_componentWillUpdate() {
+        throw Error('unexpected');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component value={1} />);
+    });
+    assertConsoleErrorDev([
+      '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' +
+        '  UNSAFE_componentWillMount\n' +
+        '  UNSAFE_componentWillReceiveProps\n' +
+        '  UNSAFE_componentWillUpdate\n\n' +
+        'The above lifecycles should be removed. Learn more about this warning here:\n' +
+        'https://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+    await act(() => {
+      root.render(<Component value={2} />);
+    });
+  });
+
+  it('should warn about deprecated lifecycles (cWM/cWRP/cWU) if new static gDSFP is present', async () => {
+    class AllLegacyLifecycles extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      componentWillMount() {}
+      UNSAFE_componentWillReceiveProps() {}
+      componentWillUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<AllLegacyLifecycles />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in AllLegacyLifecycles (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: AllLegacyLifecycles',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: AllLegacyLifecycles',
+      ],
+      {withoutStack: true},
+    );
+
+    class WillMount extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      UNSAFE_componentWillMount() {}
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      root.render(<WillMount />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in WillMount (at **)',
+    ]);
+
+    class WillMountAndUpdate extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      componentWillMount() {}
+      UNSAFE_componentWillUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      root.render(<WillMountAndUpdate />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in WillMountAndUpdate (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: WillMountAndUpdate',
+      ],
+      {withoutStack: true},
+    );
+
+    class WillReceiveProps extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      componentWillReceiveProps() {}
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      root.render(<WillReceiveProps />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in WillReceiveProps (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' +
+          'In React 18.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\n' +
+          'Please update the following components: WillReceiveProps',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('should warn about deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', async () => {
+    class AllLegacyLifecycles extends React.Component {
+      state = {};
+      getSnapshotBeforeUpdate() {}
+      componentWillMount() {}
+      UNSAFE_componentWillReceiveProps() {}
+      componentWillUpdate() {}
+      componentDidUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<AllLegacyLifecycles />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in AllLegacyLifecycles (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: AllLegacyLifecycles',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: AllLegacyLifecycles',
+      ],
+      {withoutStack: true},
+    );
+
+    class WillMount extends React.Component {
+      state = {};
+      getSnapshotBeforeUpdate() {}
+      UNSAFE_componentWillMount() {}
+      componentDidUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      root.render(<WillMount />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in WillMount (at **)',
+    ]);
+
+    class WillMountAndUpdate extends React.Component {
+      state = {};
+      getSnapshotBeforeUpdate() {}
+      componentWillMount() {}
+      UNSAFE_componentWillUpdate() {}
+      componentDidUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      root.render(<WillMountAndUpdate />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in WillMountAndUpdate (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: WillMountAndUpdate',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+
+    class WillReceiveProps extends React.Component {
+      state = {};
+      getSnapshotBeforeUpdate() {}
+      componentWillReceiveProps() {}
+      componentDidUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      root.render(<WillReceiveProps />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in WillReceiveProps (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' +
+          'In React 18.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\n' +
+          'Please update the following components: WillReceiveProps',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('should warn if getDerivedStateFromProps returns undefined', async () => {
+    class MyComponent extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {}
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<MyComponent />);
+    });
+    assertConsoleErrorDev([
+      'MyComponent.getDerivedStateFromProps(): A valid state object (or null) must ' +
+        'be returned. You have returned undefined.\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // De-duped
+    await act(() => {
+      root.render(<MyComponent />);
+    });
+  });
+
+  it('should warn if state is not initialized before getDerivedStateFromProps', async () => {
+    class MyComponent extends React.Component {
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<MyComponent />);
+    });
+    assertConsoleErrorDev([
+      '`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.\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // De-duped
+    await act(() => {
+      root.render(<MyComponent />);
+    });
+  });
+
+  it('should invoke both deprecated and new lifecycles if both are present', async () => {
+    const log = [];
+
+    class MyComponent extends React.Component {
+      componentWillMount() {
+        log.push('componentWillMount');
+      }
+      componentWillReceiveProps() {
+        log.push('componentWillReceiveProps');
+      }
+      componentWillUpdate() {
+        log.push('componentWillUpdate');
+      }
+      UNSAFE_componentWillMount() {
+        log.push('UNSAFE_componentWillMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('UNSAFE_componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('UNSAFE_componentWillUpdate');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<MyComponent foo="bar" />);
+    });
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: MyComponent',
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' +
+          'In React 18.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\n' +
+          'Please update the following components: MyComponent',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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\n' +
+          'Please update the following components: MyComponent',
+      ],
+      {withoutStack: true},
+    );
+    expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);
+
+    log.length = 0;
+
+    await act(() => {
+      root.render(<MyComponent foo="baz" />);
+    });
+    expect(log).toEqual([
+      'componentWillReceiveProps',
+      'UNSAFE_componentWillReceiveProps',
+      'componentWillUpdate',
+      'UNSAFE_componentWillUpdate',
+    ]);
+  });
+
+  it('should not override state with stale values if prevState is spread within getDerivedStateFromProps', async () => {
+    const divRef = React.createRef();
+    let childInstance;
+
+    class Child extends React.Component {
+      state = {local: 0};
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {...prevState, remote: nextProps.remote};
+      }
+      updateState = () => {
+        this.setState(state => ({local: state.local + 1}));
+        this.props.onChange(this.state.remote + 1);
+      };
+      render() {
+        childInstance = this;
+        return (
+          <div
+            onClick={this.updateState}
+            ref={
+              divRef
+            }>{`remote:${this.state.remote}, local:${this.state.local}`}</div>
+        );
+      }
+    }
+
+    class Parent extends React.Component {
+      state = {value: 0};
+      handleChange = value => {
+        this.setState({value});
+      };
+      render() {
+        return <Child remote={this.state.value} onChange={this.handleChange} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(divRef.current.textContent).toBe('remote:0, local:0');
+
+    // Trigger setState() calls
+    await act(() => {
+      childInstance.updateState();
+    });
+    expect(divRef.current.textContent).toBe('remote:1, local:1');
+
+    // Trigger batched setState() calls
+    await act(() => {
+      divRef.current.click();
+    });
+    expect(divRef.current.textContent).toBe('remote:2, local:2');
+    document.body.removeChild(container);
+  });
+
+  it('should pass the return value from getSnapshotBeforeUpdate to componentDidUpdate', async () => {
+    const log = [];
+
+    class MyComponent extends React.Component {
+      state = {
+        value: 0,
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          value: prevState.value + 1,
+        };
+      }
+      getSnapshotBeforeUpdate(prevProps, prevState) {
+        log.push(
+          `getSnapshotBeforeUpdate() prevProps:${prevProps.value} prevState:${prevState.value}`,
+        );
+        return 'abc';
+      }
+      componentDidUpdate(prevProps, prevState, snapshot) {
+        log.push(
+          `componentDidUpdate() prevProps:${prevProps.value} prevState:${prevState.value} snapshot:${snapshot}`,
+        );
+      }
+      render() {
+        log.push('render');
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(
+        <div>
+          <MyComponent value="foo" />
+        </div>,
+      );
+    });
+    expect(log).toEqual(['render']);
+    log.length = 0;
+
+    await act(() => {
+      root.render(
+        <div>
+          <MyComponent value="bar" />
+        </div>,
+      );
+    });
+    expect(log).toEqual([
+      'render',
+      'getSnapshotBeforeUpdate() prevProps:foo prevState:1',
+      'componentDidUpdate() prevProps:foo prevState:1 snapshot:abc',
+    ]);
+    log.length = 0;
+
+    await act(() => {
+      root.render(
+        <div>
+          <MyComponent value="baz" />
+        </div>,
+      );
+    });
+    expect(log).toEqual([
+      'render',
+      'getSnapshotBeforeUpdate() prevProps:bar prevState:2',
+      'componentDidUpdate() prevProps:bar prevState:2 snapshot:abc',
+    ]);
+    log.length = 0;
+
+    await act(() => {
+      root.render(<div />);
+    });
+    expect(log).toEqual([]);
+  });
+
+  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', async () => {
+    const divRef = React.createRef();
+    class SimpleComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          value: props.value,
+        };
+      }
+
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.value === prevState.value) {
+          return null;
+        }
+        return {value: nextProps.value};
+      }
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return nextState.value !== this.state.value;
+      }
+
+      render() {
+        return <div ref={divRef}>value: {this.state.value}</div>;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<SimpleComponent value="initial" />);
+    });
+    expect(divRef.current.textContent).toBe('value: initial');
+    await act(() => {
+      root.render(<SimpleComponent value="updated" />);
+    });
+    expect(divRef.current.textContent).toBe('value: updated');
+  });
+
+  it('should call getSnapshotBeforeUpdate before mutations are committed', async () => {
+    const log = [];
+
+    class MyComponent extends React.Component {
+      divRef = React.createRef();
+      getSnapshotBeforeUpdate(prevProps, prevState) {
+        log.push('getSnapshotBeforeUpdate');
+        expect(this.divRef.current.textContent).toBe(
+          `value:${prevProps.value}`,
+        );
+        return 'foobar';
+      }
+      componentDidUpdate(prevProps, prevState, snapshot) {
+        log.push('componentDidUpdate');
+        expect(this.divRef.current.textContent).toBe(
+          `value:${this.props.value}`,
+        );
+        expect(snapshot).toBe('foobar');
+      }
+      render() {
+        log.push('render');
+        return <div ref={this.divRef}>{`value:${this.props.value}`}</div>;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<MyComponent value="foo" />);
+    });
+    expect(log).toEqual(['render']);
+    log.length = 0;
+
+    await act(() => {
+      root.render(<MyComponent value="bar" />);
+    });
+    expect(log).toEqual([
+      'render',
+      'getSnapshotBeforeUpdate',
+      'componentDidUpdate',
+    ]);
+    log.length = 0;
+  });
+
+  it('should warn if getSnapshotBeforeUpdate returns undefined', async () => {
+    class MyComponent extends React.Component {
+      getSnapshotBeforeUpdate() {}
+      componentDidUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<MyComponent value="foo" />);
+    });
+
+    await act(() => {
+      root.render(<MyComponent value="bar" />);
+    });
+    assertConsoleErrorDev([
+      'MyComponent.getSnapshotBeforeUpdate(): A snapshot value (or null) must ' +
+        'be returned. You have returned undefined.\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // De-duped
+    await act(() => {
+      root.render(<MyComponent value="baz" />);
+    });
+  });
+
+  it('should warn if getSnapshotBeforeUpdate is defined with no componentDidUpdate', async () => {
+    class MyComponent extends React.Component {
+      getSnapshotBeforeUpdate() {
+        return null;
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<MyComponent />);
+    });
+    assertConsoleErrorDev([
+      'MyComponent: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
+        'This component defines getSnapshotBeforeUpdate() only.\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // De-duped
+    await act(() => {
+      root.render(<MyComponent />);
+    });
+  });
+
+  it('warns about deprecated unsafe lifecycles', async () => {
+    class MyComponent extends React.Component {
+      componentWillMount() {}
+      componentWillReceiveProps() {}
+      componentWillUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    await act(() => {
+      root.render(<MyComponent x={1} />);
+    });
+    assertConsoleWarnDev(
+      [
+        `componentWillMount has been renamed, and is not recommended for use. See https://react.dev/link/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 18.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`,
+        `componentWillReceiveProps has been renamed, and is not recommended for use. See https://react.dev/link/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://react.dev/link/derived-state
+* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.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`,
+        `componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/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 18.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`,
+      ],
+      {withoutStack: true},
+    );
+
+    // Dedupe check (update and instantiate new)
+    await act(() => {
+      root.render(<MyComponent x={2} />);
+    });
+    await act(() => {
+      root.render(<MyComponent key="new" x={1} />);
+    });
+  });
+
+  describe('react-lifecycles-compat', () => {
+    const {polyfill} = require('react-lifecycles-compat');
+
+    it('should not warn for components with polyfilled getDerivedStateFromProps', async () => {
+      class PolyfilledComponent extends React.Component {
+        state = {};
+        static getDerivedStateFromProps() {
+          return null;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      polyfill(PolyfilledComponent);
+
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <PolyfilledComponent />
+          </React.StrictMode>,
+        );
+      });
+    });
+
+    it('should not warn for components with polyfilled getSnapshotBeforeUpdate', async () => {
+      class PolyfilledComponent extends React.Component {
+        getSnapshotBeforeUpdate() {
+          return null;
+        }
+        componentDidUpdate() {}
+        render() {
+          return null;
+        }
+      }
+
+      polyfill(PolyfilledComponent);
+
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <PolyfilledComponent />
+          </React.StrictMode>,
+        );
+      });
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
new file mode 100644
index 00000000000..5a70daef069
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
@@ -0,0 +1,1413 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ChildUpdates;
+let MorphingComponent;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactSharedInternals;
+let Scheduler;
+let assertLog;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactCompositeComponent', () => {
+  const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+  /**
+   * Performs equality by iterating through keys on an object and returning false
+   * when any key has values which are not strictly equal between the arguments.
+   * Returns true when the values of all keys are strictly equal.
+   */
+  function shallowEqual(objA: mixed, objB: mixed): boolean {
+    if (Object.is(objA, objB)) {
+      return true;
+    }
+    if (
+      typeof objA !== 'object' ||
+      objA === null ||
+      typeof objB !== 'object' ||
+      objB === null
+    ) {
+      return false;
+    }
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+      return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+      if (
+        !hasOwnProperty.call(objB, keysA[i]) ||
+        !Object.is(objA[keysA[i]], objB[keysA[i]])
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function shallowCompare(instance, nextProps, nextState) {
+    return (
+      !shallowEqual(instance.props, nextProps) ||
+      !shallowEqual(instance.state, nextState)
+    );
+  }
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactSharedInternals =
+      require('react').__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    Scheduler = require('scheduler');
+    assertLog = require('internal-test-utils').assertLog;
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  describe('MorphingComponent', () => {
+    let instance;
+    let childInstance;
+
+    beforeEach(() => {
+      MorphingComponent = class extends React.Component {
+        state = {activated: false};
+        xRef = React.createRef();
+
+        componentDidMount() {
+          instance = this;
+        }
+
+        _toggleActivatedState = () => {
+          this.setState({activated: !this.state.activated});
+        };
+
+        render() {
+          const toggleActivatedState = this._toggleActivatedState;
+          return !this.state.activated ? (
+            <a ref={this.xRef} onClick={toggleActivatedState} />
+          ) : (
+            <b ref={this.xRef} onClick={toggleActivatedState} />
+          );
+        }
+      };
+
+      /**
+       * We'll use this to ensure that an old version is not cached when it is
+       * reallocated again.
+       */
+      ChildUpdates = class extends React.Component {
+        anchorRef = React.createRef();
+
+        componentDidMount() {
+          childInstance = this;
+        }
+
+        getAnchor = () => {
+          return this.anchorRef.current;
+        };
+
+        render() {
+          const className = this.props.anchorClassOn ? 'anchorClass' : '';
+          return this.props.renderAnchor ? (
+            <a ref={this.anchorRef} className={className} />
+          ) : (
+            <b />
+          );
+        }
+      };
+    });
+    it('should support rendering to different child types over time', async () => {
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(<MorphingComponent />);
+      });
+      expect(instance.xRef.current.tagName).toBe('A');
+
+      await act(() => {
+        instance._toggleActivatedState();
+      });
+      expect(instance.xRef.current.tagName).toBe('B');
+
+      await act(() => {
+        instance._toggleActivatedState();
+      });
+      expect(instance.xRef.current.tagName).toBe('A');
+    });
+
+    it('should react to state changes from callbacks', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      try {
+        await act(() => {
+          root.render(<MorphingComponent />);
+        });
+        expect(instance.xRef.current.tagName).toBe('A');
+        await act(() => {
+          instance.xRef.current.click();
+        });
+        expect(instance.xRef.current.tagName).toBe('B');
+      } finally {
+        document.body.removeChild(container);
+        root.unmount();
+      }
+    });
+
+    it('should rewire refs when rendering to different child types', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<MorphingComponent />);
+      });
+      expect(instance.xRef.current.tagName).toBe('A');
+
+      await act(() => {
+        instance._toggleActivatedState();
+      });
+      expect(instance.xRef.current.tagName).toBe('B');
+
+      await act(() => {
+        instance._toggleActivatedState();
+      });
+      expect(instance.xRef.current.tagName).toBe('A');
+    });
+
+    it('should not cache old DOM nodes when switching constructors', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<ChildUpdates renderAnchor={true} anchorClassOn={false} />);
+      });
+      await act(() => {
+        root.render(
+          // Warm any cache
+          <ChildUpdates renderAnchor={true} anchorClassOn={true} />,
+        );
+      });
+      await act(() => {
+        root.render(
+          // Clear out the anchor
+          <ChildUpdates renderAnchor={false} anchorClassOn={true} />,
+        );
+      });
+      await act(() => {
+        root.render(
+          // rerender
+          <ChildUpdates renderAnchor={true} anchorClassOn={false} />,
+        );
+      });
+      expect(childInstance.getAnchor().className).toBe('');
+    });
+  });
+
+  it('should not support module pattern components', async () => {
+    function Child({test}) {
+      return {
+        render() {
+          return <div>{test}</div>;
+        },
+      };
+    }
+
+    const el = document.createElement('div');
+    const root = ReactDOMClient.createRoot(el);
+    await expect(async () => {
+      await act(() => {
+        root.render(<Child test="test" />);
+      });
+    }).rejects.toThrow(
+      'Objects are not valid as a React child (found: object with keys {render}).',
+    );
+
+    expect(el.textContent).toBe('');
+  });
+
+  it('should use default values for undefined props', async () => {
+    class Component extends React.Component {
+      static defaultProps = {prop: 'testKey'};
+
+      render() {
+        return <span />;
+      }
+    }
+
+    function refFn1(ref) {
+      instance1 = ref;
+    }
+
+    function refFn2(ref) {
+      instance2 = ref;
+    }
+
+    function refFn3(ref) {
+      instance3 = ref;
+    }
+
+    let instance1;
+    let instance2;
+    let instance3;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component ref={refFn1} />);
+    });
+    expect(instance1.props).toEqual({prop: 'testKey'});
+
+    await act(() => {
+      root.render(<Component ref={refFn2} prop={undefined} />);
+    });
+    expect(instance2.props).toEqual({prop: 'testKey'});
+
+    await act(() => {
+      root.render(<Component ref={refFn3} prop={null} />);
+    });
+    expect(instance3.props).toEqual({prop: null});
+  });
+
+  it('should not mutate passed-in props object', async () => {
+    class Component extends React.Component {
+      static defaultProps = {prop: 'testKey'};
+
+      render() {
+        return <span />;
+      }
+    }
+
+    const inputProps = {};
+    let instance1;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component {...inputProps} ref={ref => (instance1 = ref)} />);
+    });
+    expect(instance1.props.prop).toBe('testKey');
+
+    // We don't mutate the input, just in case the caller wants to do something
+    // with it after using it to instantiate a component
+    expect(inputProps.prop).not.toBeDefined();
+  });
+
+  it('should warn about `forceUpdate` on not-yet-mounted components', async () => {
+    class MyComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.forceUpdate();
+      }
+      render() {
+        return <div>foo</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<MyComponent />);
+    });
+    assertConsoleErrorDev([
+      "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.\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // No additional warning should be recorded
+    const container2 = document.createElement('div');
+    const root2 = ReactDOMClient.createRoot(container2);
+    await act(() => {
+      root2.render(<MyComponent />);
+    });
+    expect(container2.firstChild.textContent).toBe('foo');
+  });
+
+  it('should warn about `setState` on not-yet-mounted components', async () => {
+    class MyComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.setState();
+      }
+      render() {
+        return <div>foo</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    ReactDOM.flushSync(() => {
+      root.render(<MyComponent />);
+    });
+    assertConsoleErrorDev([
+      "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.\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // No additional warning should be recorded
+    const container2 = document.createElement('div');
+    const root2 = ReactDOMClient.createRoot(container2);
+    await act(() => {
+      root2.render(<MyComponent />);
+    });
+    expect(container2.firstChild.textContent).toBe('foo');
+  });
+
+  it('should not warn about `forceUpdate` on unmounted components', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    let instance;
+    class Component extends React.Component {
+      componentDidMount() {
+        instance = this;
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const component = <Component />;
+    expect(component.forceUpdate).not.toBeDefined();
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(component);
+    });
+
+    instance.forceUpdate();
+
+    root.unmount(container);
+
+    instance.forceUpdate();
+    instance.forceUpdate();
+  });
+
+  it('should not warn about `setState` on unmounted components', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    class Component extends React.Component {
+      state = {value: 0};
+
+      render() {
+        Scheduler.log('render ' + this.state.value);
+        return <div />;
+      }
+    }
+
+    let ref;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <span>
+            <Component ref={c => (ref = c || ref)} />
+          </span>
+        </div>,
+      );
+    });
+
+    assertLog(['render 0']);
+
+    await act(() => {
+      ref.setState({value: 1});
+    });
+    assertLog(['render 1']);
+
+    await act(() => {
+      root.render(<div />);
+    });
+
+    await act(() => {
+      ref.setState({value: 2});
+    });
+    // setState on an unmounted component is a noop.
+    assertLog([]);
+  });
+
+  it('should silently allow `setState`, not call cb on unmounting components', async () => {
+    let cbCalled = false;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    class Component extends React.Component {
+      state = {value: 0};
+
+      componentWillUnmount() {
+        expect(() => {
+          this.setState({value: 2}, function () {
+            cbCalled = true;
+          });
+        }).not.toThrow();
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+    let instance;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component ref={c => (instance = c)} />);
+    });
+    await act(() => {
+      instance.setState({value: 1});
+    });
+    instance.setState({value: 1});
+
+    root.unmount();
+    expect(cbCalled).toBe(false);
+  });
+
+  it('should warn when rendering a class with a render method that does not extend React.Component', async () => {
+    const container = document.createElement('div');
+    class ClassWithRenderNotExtended {
+      render() {
+        return <div />;
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<ClassWithRenderNotExtended />);
+      });
+    }).rejects.toThrow(TypeError);
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in ClassWithRenderNotExtended (at **)',
+    ]);
+
+    // Test deduplication
+    await expect(async () => {
+      await act(() => {
+        root.render(<ClassWithRenderNotExtended />);
+      });
+    }).rejects.toThrow(TypeError);
+  });
+
+  it('should warn about `setState` in render', async () => {
+    const container = document.createElement('div');
+
+    class Component extends React.Component {
+      state = {value: 0};
+
+      render() {
+        Scheduler.log('render ' + this.state.value);
+        if (this.state.value === 0) {
+          this.setState({value: 1});
+        }
+        return <div>foo {this.state.value}</div>;
+      }
+    }
+
+    let instance;
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<Component ref={ref => (instance = ref)} />);
+    });
+    assertConsoleErrorDev([
+      'Cannot update during an existing state transition (such as within ' +
+        '`render`). Render methods should be a pure function of props and state.\n' +
+        '    in Component (at **)',
+    ]);
+
+    // The setState call is queued and then executed as a second pass. This
+    // behavior is undefined though so we're free to change it to suit the
+    // implementation details.
+    assertLog(['render 0', 'render 1']);
+    expect(instance.state.value).toBe(1);
+
+    // Forcing a rerender anywhere will cause the update to happen.
+    await act(() => {
+      root.render(<Component prop={123} />);
+    });
+    assertLog(['render 1']);
+  });
+
+  it('should cleanup even if render() fatals', async () => {
+    const ownerEnabled = __DEV__;
+
+    let stashedDispatcher;
+    class BadComponent extends React.Component {
+      render() {
+        // Stash the dispatcher that was available in render so we can check
+        // that its internals also reset.
+        stashedDispatcher = ReactSharedInternals.A;
+        throw new Error();
+      }
+    }
+
+    const instance = <BadComponent />;
+    expect(ReactSharedInternals.A).toBe(null);
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await expect(async () => {
+      await act(() => {
+        root.render(instance);
+      });
+    }).rejects.toThrow();
+
+    expect(ReactSharedInternals.A).toBe(null);
+    if (ownerEnabled) {
+      expect(stashedDispatcher.getOwner()).toBe(null);
+    } else {
+      expect(stashedDispatcher.getOwner).toBe(undefined);
+    }
+  });
+
+  it('should call componentWillUnmount before unmounting', async () => {
+    const container = document.createElement('div');
+    let innerUnmounted = false;
+
+    class Component extends React.Component {
+      render() {
+        return (
+          <div>
+            <Inner />
+            Text
+          </div>
+        );
+      }
+    }
+
+    class Inner extends React.Component {
+      componentWillUnmount() {
+        innerUnmounted = true;
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+    root.unmount();
+    expect(innerUnmounted).toBe(true);
+  });
+
+  it('should warn when shouldComponentUpdate() returns undefined', async () => {
+    class ClassComponent extends React.Component {
+      state = {bogus: false};
+
+      shouldComponentUpdate() {
+        return undefined;
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+    let instance;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<ClassComponent ref={ref => (instance = ref)} />);
+    });
+
+    ReactDOM.flushSync(() => {
+      instance.setState({bogus: true});
+    });
+    assertConsoleErrorDev([
+      'ClassComponent.shouldComponentUpdate(): Returned undefined instead of a ' +
+        'boolean value. Make sure to return true or false.\n' +
+        '    in ClassComponent (at **)',
+    ]);
+  });
+
+  it('should warn when componentDidUnmount method is defined', async () => {
+    class Component extends React.Component {
+      componentDidUnmount = () => {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    ReactDOM.flushSync(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      'Component has a method called ' +
+        'componentDidUnmount(). But there is no such lifecycle method. ' +
+        'Did you mean componentWillUnmount()?\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should warn when componentDidReceiveProps method is defined', () => {
+    class Component extends React.Component {
+      componentDidReceiveProps = () => {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    ReactDOM.flushSync(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should warn when defaultProps was defined as an instance property', () => {
+    class Component extends React.Component {
+      constructor(props) {
+        super(props);
+        this.defaultProps = {name: 'Abhay'};
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    ReactDOM.flushSync(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      'Setting defaultProps as an instance property on Component is not supported ' +
+        'and will be ignored. Instead, define defaultProps as a static property on Component.\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should skip update when rerendering element in container', async () => {
+    class Parent extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
+        Scheduler.log('Child render');
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const child = <Child />;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent>{child}</Parent>);
+    });
+    assertLog(['Child render']);
+
+    await act(() => {
+      root.render(<Parent>{child}</Parent>);
+    });
+    assertLog([]);
+  });
+
+  it('should disallow nested render calls', () => {
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    class Inner extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    class Outer extends React.Component {
+      render() {
+        root.render(<Inner />);
+        return <div />;
+      }
+    }
+
+    ReactDOM.flushSync(() => {
+      root.render(<Outer />);
+    });
+    assertConsoleErrorDev([
+      '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 Outer.\n' +
+        '    in Outer (at **)',
+    ]);
+  });
+
+  it('only renders once if updated in componentWillReceiveProps', async () => {
+    let renders = 0;
+
+    class Component extends React.Component {
+      state = {updated: false};
+
+      UNSAFE_componentWillReceiveProps(props) {
+        expect(props.update).toBe(1);
+        expect(renders).toBe(1);
+        this.setState({updated: true});
+        expect(renders).toBe(1);
+      }
+
+      render() {
+        renders++;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+
+    await act(() => {
+      root.render(<Component update={0} ref={ref => (instance = ref)} />);
+    });
+    expect(renders).toBe(1);
+    expect(instance.state.updated).toBe(false);
+
+    await act(() => {
+      root.render(<Component update={1} ref={ref => (instance = ref)} />);
+    });
+    expect(renders).toBe(2);
+    expect(instance.state.updated).toBe(true);
+  });
+
+  it('only renders once if updated in componentWillReceiveProps when batching', async () => {
+    let renders = 0;
+
+    class Component extends React.Component {
+      state = {updated: false};
+
+      UNSAFE_componentWillReceiveProps(props) {
+        expect(props.update).toBe(1);
+        expect(renders).toBe(1);
+        this.setState({updated: true});
+        expect(renders).toBe(1);
+      }
+
+      render() {
+        renders++;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component update={0} ref={ref => (instance = ref)} />);
+    });
+    expect(renders).toBe(1);
+    expect(instance.state.updated).toBe(false);
+    await act(() => {
+      root.render(<Component update={1} ref={ref => (instance = ref)} />);
+    });
+    expect(renders).toBe(2);
+    expect(instance.state.updated).toBe(true);
+  });
+
+  it('should warn when mutated props are passed', async () => {
+    const container = document.createElement('div');
+
+    class Foo extends React.Component {
+      constructor(props) {
+        const _props = {idx: props.idx + '!'};
+        super(_props);
+      }
+
+      render() {
+        return <span />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<Foo idx="qwe" />);
+    });
+    assertConsoleErrorDev([
+      'When calling super() in `Foo`, make sure to pass ' +
+        "up the same props that your component's constructor was passed.\n" +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should only call componentWillUnmount once', async () => {
+    let app;
+    let count = 0;
+
+    class App extends React.Component {
+      render() {
+        if (this.props.stage === 1) {
+          return <UnunmountableComponent />;
+        } else {
+          return null;
+        }
+      }
+    }
+
+    class UnunmountableComponent extends React.Component {
+      componentWillUnmount() {
+        app.setState({});
+        count++;
+        throw Error('always fails');
+      }
+
+      render() {
+        return <div>Hello {this.props.name}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    const setRef = ref => {
+      if (ref) {
+        app = ref;
+      }
+    };
+
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<App ref={setRef} stage={1} />);
+      });
+      await act(() => {
+        root.render(<App ref={setRef} stage={2} />);
+      });
+    }).rejects.toThrow();
+    expect(count).toBe(1);
+  });
+
+  it('prepares new child before unmounting old', async () => {
+    class Spy extends React.Component {
+      UNSAFE_componentWillMount() {
+        Scheduler.log(this.props.name + ' componentWillMount');
+      }
+      render() {
+        Scheduler.log(this.props.name + ' render');
+        return <div />;
+      }
+      componentDidMount() {
+        Scheduler.log(this.props.name + ' componentDidMount');
+      }
+      componentWillUnmount() {
+        Scheduler.log(this.props.name + ' componentWillUnmount');
+      }
+    }
+
+    class Wrapper extends React.Component {
+      render() {
+        return <Spy key={this.props.name} name={this.props.name} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Wrapper name="A" />);
+    });
+
+    assertLog(['A componentWillMount', 'A render', 'A componentDidMount']);
+    await act(() => {
+      root.render(<Wrapper name="B" />);
+    });
+
+    assertLog([
+      'B componentWillMount',
+      'B render',
+      'A componentWillUnmount',
+      'B componentDidMount',
+    ]);
+  });
+
+  it('respects a shallow shouldComponentUpdate implementation', async () => {
+    class PlasticWrap extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this.state = {
+          color: 'green',
+        };
+        this.appleRef = React.createRef();
+      }
+
+      render() {
+        return <Apple color={this.state.color} ref={this.appleRef} />;
+      }
+    }
+
+    class Apple extends React.Component {
+      state = {
+        cut: false,
+        slices: 1,
+      };
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return shallowCompare(this, nextProps, nextState);
+      }
+
+      cut() {
+        this.setState({
+          cut: true,
+          slices: 10,
+        });
+      }
+
+      eatSlice() {
+        this.setState({
+          slices: this.state.slices - 1,
+        });
+      }
+
+      render() {
+        const {color} = this.props;
+        const {cut, slices} = this.state;
+
+        Scheduler.log(`${color} ${cut} ${slices}`);
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<PlasticWrap ref={ref => (instance = ref)} />);
+    });
+    assertLog(['green false 1']);
+
+    // Do not re-render based on props
+    await act(() => {
+      instance.setState({color: 'green'});
+    });
+    assertLog([]);
+
+    // Re-render based on props
+    await act(() => {
+      instance.setState({color: 'red'});
+    });
+    assertLog(['red false 1']);
+
+    // Re-render base on state
+    await act(() => {
+      instance.appleRef.current.cut();
+    });
+    assertLog(['red true 10']);
+
+    // No re-render based on state
+    await act(() => {
+      instance.appleRef.current.cut();
+    });
+    assertLog([]);
+
+    // Re-render based on state again
+    await act(() => {
+      instance.appleRef.current.eatSlice();
+    });
+    assertLog(['red true 9']);
+  });
+
+  it('does not do a deep comparison for a shallow shouldComponentUpdate implementation', async () => {
+    function getInitialState() {
+      return {
+        foo: [1, 2, 3],
+        bar: {a: 4, b: 5, c: 6},
+      };
+    }
+
+    const initialSettings = getInitialState();
+
+    class Component extends React.Component {
+      state = initialSettings;
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return shallowCompare(this, nextProps, nextState);
+      }
+
+      render() {
+        const {foo, bar} = this.state;
+        Scheduler.log(`{foo:[${foo}],bar:{a:${bar.a},b:${bar.b},c:${bar.c}}`);
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={ref => (instance = ref)} />);
+    });
+    assertLog(['{foo:[1,2,3],bar:{a:4,b:5,c:6}']);
+
+    // Do not re-render if state is equal
+    const settings = {
+      foo: initialSettings.foo,
+      bar: initialSettings.bar,
+    };
+    await act(() => {
+      instance.setState(settings);
+    });
+    assertLog([]);
+
+    // Re-render because one field changed
+    initialSettings.foo = [1, 2, 3];
+    await act(() => {
+      instance.setState(initialSettings);
+    });
+    assertLog(['{foo:[1,2,3],bar:{a:4,b:5,c:6}']);
+
+    // Re-render because the object changed
+    await act(() => {
+      instance.setState(getInitialState());
+    });
+    assertLog(['{foo:[1,2,3],bar:{a:4,b:5,c:6}']);
+  });
+
+  it('should call setState callback with no arguments', async () => {
+    let mockArgs;
+    class Component extends React.Component {
+      componentDidMount() {
+        this.setState({}, (...args) => (mockArgs = args));
+      }
+      render() {
+        return false;
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(mockArgs.length).toEqual(0);
+  });
+
+  it('this.state should be updated on setState callback inside componentWillMount', async () => {
+    const div = document.createElement('div');
+    let stateSuccessfullyUpdated = false;
+
+    class Component extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this.state = {
+          hasUpdatedState: false,
+        };
+      }
+
+      UNSAFE_componentWillMount() {
+        this.setState(
+          {hasUpdatedState: true},
+          () => (stateSuccessfullyUpdated = this.state.hasUpdatedState),
+        );
+      }
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(div);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(stateSuccessfullyUpdated).toBe(true);
+  });
+
+  it('should call the setState callback even if shouldComponentUpdate = false', async () => {
+    const mockFn = jest.fn().mockReturnValue(false);
+    const div = document.createElement('div');
+
+    class Component extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this.state = {
+          hasUpdatedState: false,
+        };
+      }
+
+      UNSAFE_componentWillMount() {
+        instance = this;
+      }
+
+      shouldComponentUpdate() {
+        return mockFn();
+      }
+
+      render() {
+        return <div>{this.state.hasUpdatedState}</div>;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(div);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={ref => (instance = ref)} />);
+    });
+
+    expect(instance).toBeDefined();
+    expect(mockFn).not.toBeCalled();
+
+    await act(() => {
+      instance.setState({hasUpdatedState: true}, () => {
+        expect(mockFn).toBeCalled();
+        expect(instance.state.hasUpdatedState).toBe(true);
+        Scheduler.log('setState callback called');
+      });
+    });
+
+    assertLog(['setState callback called']);
+  });
+
+  it('should return a meaningful warning when constructor is returned', async () => {
+    class RenderTextInvalidConstructor extends React.Component {
+      constructor(props) {
+        super(props);
+        return {something: false};
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await expect(async () => {
+      await act(() => {
+        root.render(<RenderTextInvalidConstructor />);
+      });
+    }).rejects.toThrow();
+    assertConsoleErrorDev([
+      'No `render` method found on the RenderTextInvalidConstructor instance: ' +
+        'did you accidentally return an object from the constructor?\n' +
+        '    in RenderTextInvalidConstructor (at **)',
+      'No `render` method found on the RenderTextInvalidConstructor instance: ' +
+        'did you accidentally return an object from the constructor?\n' +
+        '    in RenderTextInvalidConstructor (at **)',
+    ]);
+  });
+
+  it('should warn about reassigning this.props while rendering', () => {
+    class Bad extends React.Component {
+      componentDidMount() {}
+      componentDidUpdate() {}
+      render() {
+        this.props = {...this.props};
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<Bad />);
+    });
+    assertConsoleErrorDev([
+      'It looks like Bad is reassigning its own `this.props` while rendering. ' +
+        'This is not supported and can lead to confusing bugs.\n' +
+        '    in Bad (at **)',
+    ]);
+  });
+
+  it('should return error if render is not defined', async () => {
+    class RenderTestUndefinedRender extends React.Component {}
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await expect(async () => {
+      await act(() => {
+        root.render(<RenderTestUndefinedRender />);
+      });
+    }).rejects.toThrow();
+    assertConsoleErrorDev([
+      'No `render` method found on the RenderTestUndefinedRender instance: ' +
+        'you may have forgotten to define `render`.\n' +
+        '    in RenderTestUndefinedRender (at **)',
+      'No `render` method found on the RenderTestUndefinedRender instance: ' +
+        'you may have forgotten to define `render`.\n' +
+        '    in RenderTestUndefinedRender (at **)',
+    ]);
+  });
+
+  // Regression test for accidental breaking change
+  // https://github.com/facebook/react/issues/13580
+  it('should support classes shadowing isReactComponent', async () => {
+    class Shadow extends React.Component {
+      isReactComponent() {}
+      render() {
+        return <div />;
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Shadow />);
+    });
+    expect(container.firstChild.tagName).toBe('DIV');
+  });
+
+  it('should not warn on updating function component from componentWillMount', async () => {
+    let setState;
+    let ref;
+    function A() {
+      const [state, _setState] = React.useState(null);
+      setState = _setState;
+      return <div ref={r => (ref = r)}>{state}</div>;
+    }
+    class B extends React.Component {
+      UNSAFE_componentWillMount() {
+        setState(1);
+      }
+      render() {
+        return null;
+      }
+    }
+    function Parent() {
+      return (
+        <div>
+          <A />
+          <B />
+        </div>
+      );
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    expect(ref.textContent).toBe('1');
+  });
+
+  it('should not warn on updating function component from componentWillUpdate', async () => {
+    let setState;
+    let ref;
+    function A() {
+      const [state, _setState] = React.useState();
+      setState = _setState;
+      return <div ref={r => (ref = r)}>{state}</div>;
+    }
+    class B extends React.Component {
+      UNSAFE_componentWillUpdate() {
+        setState(1);
+      }
+      render() {
+        return null;
+      }
+    }
+    function Parent() {
+      return (
+        <div>
+          <A />
+          <B />
+        </div>
+      );
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    expect(ref.textContent).toBe('1');
+  });
+
+  it('should not warn on updating function component from componentWillReceiveProps', async () => {
+    let setState;
+    let ref;
+    function A() {
+      const [state, _setState] = React.useState();
+      setState = _setState;
+      return <div ref={r => (ref = r)}>{state}</div>;
+    }
+
+    class B extends React.Component {
+      UNSAFE_componentWillReceiveProps() {
+        setState(1);
+      }
+      render() {
+        return null;
+      }
+    }
+    function Parent() {
+      return (
+        <div>
+          <A />
+          <B />
+        </div>
+      );
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    expect(ref.textContent).toBe('1');
+  });
+
+  it('should warn on updating function component from render', () => {
+    let setState;
+    let ref;
+    function A() {
+      const [state, _setState] = React.useState(0);
+      setState = _setState;
+      return <div ref={r => (ref = r)}>{state}</div>;
+    }
+
+    class B extends React.Component {
+      render() {
+        setState(c => c + 1);
+        return null;
+      }
+    }
+    function Parent() {
+      return (
+        <div>
+          <A />
+          <B />
+        </div>
+      );
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<Parent />);
+    });
+    assertConsoleErrorDev([
+      'Cannot update a component (`A`) while rendering a different component (`B`). ' +
+        'To locate the bad setState() call inside `B`, ' +
+        'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
+        '    in Parent (at **)',
+    ]);
+
+    // We error, but still update the state.
+    expect(ref.textContent).toBe('1');
+
+    // Dedupe.
+    ReactDOM.flushSync(() => {
+      root.render(<Parent />);
+    });
+
+    // We error, but still update the state.
+    expect(ref.textContent).toBe('2');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js
new file mode 100644
index 00000000000..ba51921ef3c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponentDOMMinimalism-test.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Requires
+let React;
+let ReactDOMClient;
+let act;
+
+// Test components
+let LowerLevelComposite;
+let MyCompositeComponent;
+
+/**
+ * Integration test, testing the combination of JSX with our unit of
+ * abstraction, `ReactCompositeComponent` does not ever add superfluous DOM
+ * nodes.
+ */
+describe('ReactCompositeComponentDOMMinimalism', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    LowerLevelComposite = class extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    };
+
+    MyCompositeComponent = class extends React.Component {
+      render() {
+        return <LowerLevelComposite>{this.props.children}</LowerLevelComposite>;
+      }
+    };
+  });
+
+  it('should not render extra nodes for non-interpolated text', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<MyCompositeComponent>A string child</MyCompositeComponent>);
+    });
+
+    const instance = container.firstChild;
+    expect(instance.tagName).toBe('DIV');
+    expect(instance.children.length).toBe(0);
+  });
+
+  it('should not render extra nodes for interpolated text', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <MyCompositeComponent>
+          {'Interpolated String Child'}
+        </MyCompositeComponent>,
+      );
+    });
+
+    const instance = container.firstChild;
+    expect(instance.tagName).toBe('DIV');
+    expect(instance.children.length).toBe(0);
+  });
+
+  it('should not render extra nodes for interpolated text children', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <MyCompositeComponent>
+          <ul>This text causes no children in ul, just innerHTML</ul>
+        </MyCompositeComponent>,
+      );
+    });
+
+    const instance = container.firstChild;
+    expect(instance.tagName).toBe('DIV');
+    expect(instance.children.length).toBe(1);
+    expect(instance.children[0].tagName).toBe('UL');
+    expect(instance.children[0].children.length).toBe(0);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js
new file mode 100644
index 00000000000..596d4a5dfc9
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('ReactCompositeComponentNestedState-state', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  it('should provide up to date values for props', async () => {
+    class ParentComponent extends React.Component {
+      state = {color: 'blue'};
+
+      handleColor = color => {
+        this.props.logger('parent-handleColor', this.state.color);
+        this.setState({color: color}, function () {
+          this.props.logger('parent-after-setState', this.state.color);
+        });
+      };
+
+      render() {
+        this.props.logger('parent-render', this.state.color);
+        return (
+          <ChildComponent
+            logger={this.props.logger}
+            color={this.state.color}
+            onSelectColor={this.handleColor}
+          />
+        );
+      }
+    }
+
+    class ChildComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        props.logger('getInitialState', props.color);
+        this.state = {hue: 'dark ' + props.color};
+      }
+
+      handleHue = (shade, color) => {
+        this.props.logger('handleHue', this.state.hue, this.props.color);
+        this.props.onSelectColor(color);
+        this.setState(
+          function (state, props) {
+            this.props.logger(
+              'setState-this',
+              this.state.hue,
+              this.props.color,
+            );
+            this.props.logger('setState-args', state.hue, props.color);
+            return {hue: shade + ' ' + props.color};
+          },
+          function () {
+            this.props.logger(
+              'after-setState',
+              this.state.hue,
+              this.props.color,
+            );
+          },
+        );
+      };
+
+      render() {
+        this.props.logger('render', this.state.hue, this.props.color);
+        return (
+          <div>
+            <button onClick={this.handleHue.bind(this, 'dark', 'blue')}>
+              Dark Blue
+            </button>
+            <button onClick={this.handleHue.bind(this, 'light', 'blue')}>
+              Light Blue
+            </button>
+            <button onClick={this.handleHue.bind(this, 'dark', 'green')}>
+              Dark Green
+            </button>
+            <button onClick={this.handleHue.bind(this, 'light', 'green')}>
+              Light Green
+            </button>
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const logger = jest.fn();
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(async () => {
+      root.render(<ParentComponent logger={logger} />);
+    });
+
+    await act(async () => {
+      // click "light green"
+      container.childNodes[0].childNodes[3].click();
+    });
+
+    expect(logger.mock.calls).toEqual([
+      ['parent-render', 'blue'],
+      ['getInitialState', 'blue'],
+      ['render', 'dark blue', 'blue'],
+      ['handleHue', 'dark blue', 'blue'],
+      ['parent-handleColor', 'blue'],
+      ['parent-render', 'green'],
+      ['setState-this', 'dark blue', 'blue'],
+      ['setState-args', 'dark blue', 'green'],
+      ['render', 'light green', 'green'],
+      ['after-setState', 'light green', 'green'],
+      ['parent-after-setState', 'green'],
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js
new file mode 100644
index 00000000000..adfd4d5b4f5
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js
@@ -0,0 +1,611 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let Scheduler;
+let assertLog;
+let TestComponent;
+let testComponentInstance;
+let assertConsoleErrorDev;
+
+describe('ReactCompositeComponent-state', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    function LogAfterCommit({children, color}) {
+      React.useEffect(() => {
+        Scheduler.log(`commit ${color}`);
+      });
+      return children;
+    }
+
+    TestComponent = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.peekAtState('getInitialState', undefined, props);
+        this.state = {color: 'red'};
+        testComponentInstance = this;
+      }
+
+      peekAtState = (from, state = this.state, props = this.props) => {
+        Scheduler.log(`${from} ${state && state.color}`);
+      };
+
+      peekAtCallback = from => {
+        return () => this.peekAtState(from);
+      };
+
+      setFavoriteColor(nextColor) {
+        this.setState(
+          {color: nextColor},
+          this.peekAtCallback('setFavoriteColor'),
+        );
+      }
+
+      render() {
+        this.peekAtState('render');
+        return (
+          <LogAfterCommit color={this.state.color}>
+            <div>{this.state.color}</div>
+          </LogAfterCommit>
+        );
+      }
+
+      UNSAFE_componentWillMount() {
+        this.peekAtState('componentWillMount-start');
+        this.setState(function (state) {
+          this.peekAtState('before-setState-sunrise', state);
+        });
+        this.setState(
+          {color: 'sunrise'},
+          this.peekAtCallback('setState-sunrise'),
+        );
+        this.setState(function (state) {
+          this.peekAtState('after-setState-sunrise', state);
+        });
+        this.peekAtState('componentWillMount-after-sunrise');
+        this.setState(
+          {color: 'orange'},
+          this.peekAtCallback('setState-orange'),
+        );
+        this.setState(function (state) {
+          this.peekAtState('after-setState-orange', state);
+        });
+        this.peekAtState('componentWillMount-end');
+      }
+
+      componentDidMount() {
+        this.peekAtState('componentDidMount-start');
+        this.setState(
+          {color: 'yellow'},
+          this.peekAtCallback('setState-yellow'),
+        );
+        this.peekAtState('componentDidMount-end');
+      }
+
+      UNSAFE_componentWillReceiveProps(newProps) {
+        this.peekAtState('componentWillReceiveProps-start');
+        if (newProps.nextColor) {
+          this.setState(function (state) {
+            this.peekAtState('before-setState-receiveProps', state);
+            return {color: newProps.nextColor};
+          });
+          // No longer a public API, but we can test that it works internally by
+          // reaching into the updater.
+          this.updater.enqueueReplaceState(this, {color: undefined});
+          this.setState(function (state) {
+            this.peekAtState('before-setState-again-receiveProps', state);
+            return {color: newProps.nextColor};
+          }, this.peekAtCallback('setState-receiveProps'));
+          this.setState(function (state) {
+            this.peekAtState('after-setState-receiveProps', state);
+          });
+        }
+        this.peekAtState('componentWillReceiveProps-end');
+      }
+
+      shouldComponentUpdate(nextProps, nextState) {
+        this.peekAtState('shouldComponentUpdate-currentState');
+        this.peekAtState('shouldComponentUpdate-nextState', nextState);
+        return true;
+      }
+
+      UNSAFE_componentWillUpdate(nextProps, nextState) {
+        this.peekAtState('componentWillUpdate-currentState');
+        this.peekAtState('componentWillUpdate-nextState', nextState);
+      }
+
+      componentDidUpdate(prevProps, prevState) {
+        this.peekAtState('componentDidUpdate-currentState');
+        this.peekAtState('componentDidUpdate-prevState', prevState);
+      }
+
+      componentWillUnmount() {
+        this.peekAtState('componentWillUnmount');
+      }
+    };
+  });
+
+  it('should support setting state', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<TestComponent />);
+    });
+
+    assertLog([
+      // there is no state when getInitialState() is called
+      'getInitialState undefined',
+      'componentWillMount-start red',
+      // setState()'s only enqueue pending states.
+      'componentWillMount-after-sunrise red',
+      'componentWillMount-end red',
+      // pending state queue is processed
+      'before-setState-sunrise red',
+      'after-setState-sunrise sunrise',
+      'after-setState-orange orange',
+      // pending state has been applied
+      'render orange',
+      'componentDidMount-start orange',
+      // setState-sunrise and setState-orange should be called here,
+      // after the bug in #1740
+      // componentDidMount() called setState({color:'yellow'}), which is async.
+      // The update doesn't happen until the next flush.
+      'componentDidMount-end orange',
+      'setState-sunrise orange',
+      'setState-orange orange',
+      'commit orange',
+      'shouldComponentUpdate-currentState orange',
+      'shouldComponentUpdate-nextState yellow',
+      'componentWillUpdate-currentState orange',
+      'componentWillUpdate-nextState yellow',
+      'render yellow',
+      'componentDidUpdate-currentState yellow',
+      'componentDidUpdate-prevState orange',
+      'setState-yellow yellow',
+      'commit yellow',
+    ]);
+
+    await act(() => {
+      root.render(<TestComponent nextColor="green" />);
+    });
+
+    assertLog([
+      'componentWillReceiveProps-start yellow',
+      // setState({color:'green'}) only enqueues a pending state.
+      'componentWillReceiveProps-end yellow',
+      // pending state queue is processed
+      // We keep updates in the queue to support
+      // replaceState(prevState => newState).
+      'before-setState-receiveProps yellow',
+      'before-setState-again-receiveProps undefined',
+      'after-setState-receiveProps green',
+      'shouldComponentUpdate-currentState yellow',
+      'shouldComponentUpdate-nextState green',
+      'componentWillUpdate-currentState yellow',
+      'componentWillUpdate-nextState green',
+      'render green',
+      'componentDidUpdate-currentState green',
+      'componentDidUpdate-prevState yellow',
+      'setState-receiveProps green',
+      'commit green',
+    ]);
+
+    await act(() => {
+      testComponentInstance.setFavoriteColor('blue');
+    });
+
+    assertLog([
+      // setFavoriteColor('blue')
+      'shouldComponentUpdate-currentState green',
+      'shouldComponentUpdate-nextState blue',
+      'componentWillUpdate-currentState green',
+      'componentWillUpdate-nextState blue',
+      'render blue',
+      'componentDidUpdate-currentState blue',
+      'componentDidUpdate-prevState green',
+      'setFavoriteColor blue',
+      'commit blue',
+    ]);
+    await act(() => {
+      testComponentInstance.forceUpdate(
+        testComponentInstance.peekAtCallback('forceUpdate'),
+      );
+    });
+    assertLog([
+      // forceUpdate()
+      'componentWillUpdate-currentState blue',
+      'componentWillUpdate-nextState blue',
+      'render blue',
+      'componentDidUpdate-currentState blue',
+      'componentDidUpdate-prevState blue',
+      'forceUpdate blue',
+      'commit blue',
+    ]);
+
+    root.unmount();
+
+    assertLog([
+      // unmount()
+      // state is available within `componentWillUnmount()`
+      'componentWillUnmount blue',
+    ]);
+  });
+
+  it('should call componentDidUpdate of children first', async () => {
+    const container = document.createElement('div');
+
+    let child = null;
+    let parent = null;
+
+    class Child extends React.Component {
+      state = {bar: false};
+      componentDidMount() {
+        child = this;
+      }
+      componentDidUpdate() {
+        Scheduler.log('child did update');
+      }
+      render() {
+        return <div />;
+      }
+    }
+
+    let shouldUpdate = true;
+
+    class Intermediate extends React.Component {
+      shouldComponentUpdate() {
+        return shouldUpdate;
+      }
+      render() {
+        return <Child />;
+      }
+    }
+
+    class Parent extends React.Component {
+      state = {foo: false};
+      componentDidMount() {
+        parent = this;
+      }
+      componentDidUpdate() {
+        Scheduler.log('parent did update');
+      }
+      render() {
+        return <Intermediate />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    await act(() => {
+      parent.setState({foo: true});
+      child.setState({bar: true});
+    });
+
+    // When we render changes top-down in a batch, children's componentDidUpdate
+    // happens before the parent.
+    assertLog(['child did update', 'parent did update']);
+
+    shouldUpdate = false;
+
+    await act(() => {
+      parent.setState({foo: false});
+      child.setState({bar: false});
+    });
+
+    // We expect the same thing to happen if we bail out in the middle.
+    assertLog(['child did update', 'parent did update']);
+  });
+
+  it('should batch unmounts', async () => {
+    let outer;
+    class Inner extends React.Component {
+      render() {
+        return <div />;
+      }
+
+      componentWillUnmount() {
+        // This should get silently ignored (maybe with a warning), but it
+        // shouldn't break React.
+        outer.setState({showInner: false});
+      }
+    }
+
+    class Outer extends React.Component {
+      state = {showInner: true};
+      componentDidMount() {
+        outer = this;
+      }
+
+      render() {
+        return <div>{this.state.showInner && <Inner />}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
+
+    expect(() => {
+      root.unmount();
+    }).not.toThrow();
+  });
+
+  it('should update state when called from child cWRP', async () => {
+    class Parent extends React.Component {
+      state = {value: 'one'};
+      render() {
+        Scheduler.log('parent render ' + this.state.value);
+        return <Child parent={this} value={this.state.value} />;
+      }
+    }
+    let updated = false;
+    class Child extends React.Component {
+      UNSAFE_componentWillReceiveProps() {
+        if (updated) {
+          return;
+        }
+        Scheduler.log('child componentWillReceiveProps ' + this.props.value);
+        this.props.parent.setState({value: 'two'});
+        Scheduler.log(
+          'child componentWillReceiveProps done ' + this.props.value,
+        );
+        updated = true;
+      }
+      render() {
+        Scheduler.log('child render ' + this.props.value);
+        return <div>{this.props.value}</div>;
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    assertLog(['parent render one', 'child render one']);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    assertLog([
+      'parent render one',
+      'child componentWillReceiveProps one',
+      'child componentWillReceiveProps done one',
+      'child render one',
+      'parent render two',
+      'child render two',
+    ]);
+  });
+
+  it('should merge state when sCU returns false', async () => {
+    let test;
+    class Test extends React.Component {
+      state = {a: 0};
+      componentDidMount() {
+        test = this;
+      }
+
+      render() {
+        return null;
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        Scheduler.log(
+          'scu from ' +
+            Object.keys(this.state) +
+            ' to ' +
+            Object.keys(nextState),
+        );
+        return false;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Test />);
+    });
+    await act(() => {
+      test.setState({b: 0});
+    });
+
+    assertLog(['scu from a to a,b']);
+    await act(() => {
+      test.setState({c: 0});
+    });
+    assertLog(['scu from a,b to a,b,c']);
+  });
+
+  it('should treat assigning to this.state inside cWRP as a replaceState, with a warning', async () => {
+    class Test extends React.Component {
+      state = {step: 1, extra: true};
+      UNSAFE_componentWillReceiveProps() {
+        this.setState({step: 2}, () => {
+          // Tests that earlier setState callbacks are not dropped
+          Scheduler.log(
+            `callback -- step: ${this.state.step}, extra: ${!!this.state
+              .extra}`,
+          );
+        });
+        // Treat like replaceState
+        this.state = {step: 3};
+      }
+      render() {
+        Scheduler.log(
+          `render -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
+        );
+        return null;
+      }
+    }
+
+    // Mount
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Test />);
+    });
+    // Update
+    ReactDOM.flushSync(() => {
+      root.render(<Test />);
+    });
+    assertConsoleErrorDev([
+      'Test.componentWillReceiveProps(): Assigning directly to ' +
+        "this.state is deprecated (except inside a component's constructor). " +
+        'Use setState instead.\n' +
+        '    in Test (at **)',
+    ]);
+
+    assertLog([
+      'render -- step: 1, extra: true',
+      'render -- step: 3, extra: false',
+      'callback -- step: 3, extra: false',
+    ]);
+
+    // Check deduplication; (no additional warnings are expected)
+    expect(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<Test />);
+      });
+    }).not.toThrow();
+  });
+
+  it('should treat assigning to this.state inside cWM as a replaceState, with a warning', () => {
+    class Test extends React.Component {
+      state = {step: 1, extra: true};
+      UNSAFE_componentWillMount() {
+        this.setState({step: 2}, () => {
+          // Tests that earlier setState callbacks are not dropped
+          Scheduler.log(
+            `callback -- step: ${this.state.step}, extra: ${!!this.state
+              .extra}`,
+          );
+        });
+        // Treat like replaceState
+        this.state = {step: 3};
+      }
+      render() {
+        Scheduler.log(
+          `render -- step: ${this.state.step}, extra: ${!!this.state.extra}`,
+        );
+        return null;
+      }
+    }
+
+    // Mount
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<Test />);
+    });
+    assertConsoleErrorDev([
+      'Test.componentWillMount(): Assigning directly to ' +
+        "this.state is deprecated (except inside a component's constructor). " +
+        'Use setState instead.\n' +
+        '    in Test (at **)',
+    ]);
+
+    assertLog([
+      'render -- step: 3, extra: false',
+      'callback -- step: 3, extra: false',
+
+      // A second time for the retry.
+      'render -- step: 3, extra: false',
+      'callback -- step: 3, extra: false',
+    ]);
+  });
+
+  it('should not support setState in componentWillUnmount', async () => {
+    let subscription;
+    class A extends React.Component {
+      componentWillUnmount() {
+        subscription();
+      }
+      render() {
+        return 'A';
+      }
+    }
+
+    class B extends React.Component {
+      state = {siblingUnmounted: false};
+      UNSAFE_componentWillMount() {
+        subscription = () => this.setState({siblingUnmounted: true});
+      }
+      render() {
+        return 'B' + (this.state.siblingUnmounted ? ' No Sibling' : '');
+      }
+    }
+
+    const el = document.createElement('div');
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<A />);
+    });
+    expect(el.textContent).toBe('A');
+
+    ReactDOM.flushSync(() => {
+      root.render(<B />);
+    });
+    assertConsoleErrorDev([
+      "Can't perform a React state update on a component that hasn't mounted yet. " +
+        'This indicates that you have a side-effect in your render function that ' +
+        'asynchronously tries to update the component. ' +
+        'Move this work to useEffect instead.\n' +
+        '    in B (at **)',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('Legacy mode should support setState in componentWillUnmount (#18851)', () => {
+    let subscription;
+    class A extends React.Component {
+      componentWillUnmount() {
+        subscription();
+      }
+      render() {
+        return 'A';
+      }
+    }
+
+    class B extends React.Component {
+      state = {siblingUnmounted: false};
+      UNSAFE_componentWillMount() {
+        subscription = () => this.setState({siblingUnmounted: true});
+      }
+      render() {
+        return 'B' + (this.state.siblingUnmounted ? ' No Sibling' : '');
+      }
+    }
+
+    const el = document.createElement('div');
+    ReactDOM.render(<A />, el);
+    expect(el.textContent).toBe('A');
+
+    ReactDOM.render(<B />, el);
+    expect(el.textContent).toBe('B No Sibling');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js
new file mode 100644
index 00000000000..f87de5c2ef3
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOM-test.js
@@ -0,0 +1,974 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 findDOMNode;
+let ReactDOMClient;
+let ReactDOMServer;
+let assertConsoleErrorDev;
+let act;
+
+describe('ReactDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    findDOMNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .findDOMNode;
+
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  it('should bubble onSubmit', async () => {
+    const container = document.createElement('div');
+
+    let count = 0;
+    let buttonRef;
+
+    function Parent() {
+      return (
+        <div
+          onSubmit={event => {
+            event.preventDefault();
+            count++;
+          }}>
+          <Child />
+        </div>
+      );
+    }
+
+    function Child() {
+      return (
+        <form>
+          <input type="submit" ref={button => (buttonRef = button)} />
+        </form>
+      );
+    }
+
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+    try {
+      await act(() => {
+        root.render(<Parent />);
+      });
+      buttonRef.click();
+      expect(count).toBe(1);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('allows a DOM element to be used with a string', async () => {
+    const element = React.createElement('div', {className: 'foo'});
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(element);
+    });
+
+    const node = container.firstChild;
+    expect(node.tagName).toBe('DIV');
+  });
+
+  it('should allow children to be passed as an argument', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(React.createElement('div', null, 'child'));
+    });
+
+    const argNode = container.firstChild;
+    expect(argNode.innerHTML).toBe('child');
+  });
+
+  it('should overwrite props.children with children argument', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(React.createElement('div', {children: 'fakechild'}, 'child'));
+    });
+
+    const conflictNode = container.firstChild;
+    expect(conflictNode.innerHTML).toBe('child');
+  });
+
+  /**
+   * We need to make sure that updates occur to the actual node that's in the
+   * DOM, instead of a stale cache.
+   */
+  it('should purge the DOM cache when removing nodes', async () => {
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <div key="theDog" className="dog" />,
+          <div key="theBird" className="bird" />
+        </div>,
+      );
+    });
+    // Warm the cache with theDog
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <div key="theDog" className="dogbeforedelete" />,
+          <div key="theBird" className="bird" />,
+        </div>,
+      );
+    });
+    // Remove theDog - this should purge the cache
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <div key="theBird" className="bird" />,
+        </div>,
+      );
+    });
+    // Now, put theDog back. It's now a different DOM node.
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <div key="theDog" className="dog" />,
+          <div key="theBird" className="bird" />,
+        </div>,
+      );
+    });
+    // Change the className of theDog. It will use the same element
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <div key="theDog" className="bigdog" />,
+          <div key="theBird" className="bird" />,
+        </div>,
+      );
+    });
+
+    const myDiv = container.firstChild;
+    const dog = myDiv.childNodes[0];
+    expect(dog.className).toBe('bigdog');
+  });
+
+  // @gate !disableLegacyMode
+  it('throws in render() if the mount callback in legacy roots is not a function', async () => {
+    spyOnDev(console, 'warn');
+    spyOnDev(console, 'error');
+
+    function Foo() {
+      this.a = 1;
+      this.b = 2;
+    }
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const myDiv = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, myDiv, 'no');
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: no',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. Instead received: no.',
+        'Expected the last optional `callback` argument to be a function. Instead received: no.',
+      ],
+      {withoutStack: 2},
+    );
+
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, myDiv, {foo: 'bar'});
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }",
+        "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.",
+      ],
+      {withoutStack: 2},
+    );
+
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, myDiv, new Foo());
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.',
+        'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.',
+      ],
+      {withoutStack: 2},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('throws in render() if the update callback in legacy roots is not a function', async () => {
+    function Foo() {
+      this.a = 1;
+      this.b = 2;
+    }
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const myDiv = document.createElement('div');
+    ReactDOM.render(<A />, myDiv);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, myDiv, 'no');
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: no',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. Instead received: no.',
+        'Expected the last optional `callback` argument to be a function. Instead received: no.',
+      ],
+      {withoutStack: 2},
+    );
+
+    ReactDOM.render(<A />, myDiv); // Re-mount
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, myDiv, {foo: 'bar'});
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.",
+        "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.",
+      ],
+      {withoutStack: 2},
+    );
+
+    ReactDOM.render(<A />, myDiv); // Re-mount
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, myDiv, new Foo());
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.',
+        'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.',
+      ],
+      {withoutStack: 2},
+    );
+  });
+
+  it('preserves focus', async () => {
+    let input;
+    let input2;
+    class A extends React.Component {
+      render() {
+        return (
+          <div>
+            <input id="one" ref={r => (input = input || r)} />
+            {this.props.showTwo && (
+              <input id="two" ref={r => (input2 = input2 || r)} />
+            )}
+          </div>
+        );
+      }
+
+      componentDidUpdate() {
+        // Focus should have been restored to the original input
+        expect(document.activeElement.id).toBe('one');
+        input2.focus();
+        expect(document.activeElement.id).toBe('two');
+        log.push('input2 focused');
+      }
+    }
+
+    const log = [];
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+    try {
+      await act(() => {
+        root.render(<A showTwo={false} />);
+      });
+      input.focus();
+
+      // When the second input is added, let's simulate losing focus, which is
+      // something that could happen when manipulating DOM nodes (but is hard to
+      // deterministically force without relying intensely on React DOM
+      // implementation details)
+      const div = container.firstChild;
+      ['appendChild', 'insertBefore'].forEach(name => {
+        const mutator = div[name];
+        div[name] = function () {
+          if (input) {
+            input.blur();
+            expect(document.activeElement.tagName).toBe('BODY');
+            log.push('input2 inserted');
+          }
+          return mutator.apply(this, arguments);
+        };
+      });
+
+      expect(document.activeElement.id).toBe('one');
+      await act(() => {
+        root.render(<A showTwo={true} />);
+      });
+      // input2 gets added, which causes input to get blurred. Then
+      // componentDidUpdate focuses input2 and that should make it down to here,
+      // not get overwritten by focus restoration.
+      expect(document.activeElement.id).toBe('two');
+      expect(log).toEqual(['input2 inserted', 'input2 focused']);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('calls focus() on autoFocus elements after they have been mounted to the DOM', async () => {
+    const originalFocus = HTMLElement.prototype.focus;
+
+    try {
+      let focusedElement;
+      let inputFocusedAfterMount = false;
+
+      // This test needs to determine that focus is called after mount.
+      // Can't check document.activeElement because PhantomJS is too permissive;
+      // It doesn't require element to be in the DOM to be focused.
+      HTMLElement.prototype.focus = function () {
+        focusedElement = this;
+        inputFocusedAfterMount = !!this.parentNode;
+      };
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <h1>Auto-focus Test</h1>
+            <input autoFocus={true} />
+            <p>The above input should be focused after mount.</p>
+          </div>,
+        );
+      });
+
+      expect(inputFocusedAfterMount).toBe(true);
+      expect(focusedElement.tagName).toBe('INPUT');
+    } finally {
+      HTMLElement.prototype.focus = originalFocus;
+    }
+  });
+
+  it("shouldn't fire duplicate event handler while handling other nested dispatch", async () => {
+    const actual = [];
+
+    class Wrapper extends React.Component {
+      componentDidMount() {
+        this.ref1.click();
+      }
+
+      render() {
+        return (
+          <div>
+            <div
+              onClick={() => {
+                actual.push('1st node clicked');
+                this.ref2.click();
+              }}
+              ref={ref => (this.ref1 = ref)}
+            />
+            <div
+              onClick={ref => {
+                actual.push("2nd node clicked imperatively from 1st's handler");
+              }}
+              ref={ref => (this.ref2 = ref)}
+            />
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+    try {
+      await act(() => {
+        root.render(<Wrapper />);
+      });
+
+      const expected = [
+        '1st node clicked',
+        "2nd node clicked imperatively from 1st's handler",
+      ];
+
+      expect(actual).toEqual(expected);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should not crash with devtools installed', async () => {
+    try {
+      global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+        inject: function () {},
+        onCommitFiberRoot: function () {},
+        onCommitFiberUnmount: function () {},
+        supportsFiber: true,
+      };
+      jest.resetModules();
+      React = require('react');
+      ReactDOM = require('react-dom');
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(<Component />);
+      });
+    } finally {
+      delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  });
+
+  it('should not crash calling findDOMNode inside a function component', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
+    const App = () => {
+      findDOMNode(instance);
+      return <div />;
+    };
+
+    if (__DEV__) {
+      root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(<App />);
+      });
+    }
+  });
+
+  it('reports stacks with re-entrant renderToString() calls on the client', async () => {
+    function Child2(props) {
+      return <span ariaTypo3="no">{props.children}</span>;
+    }
+
+    function App2() {
+      return (
+        <Child2>
+          {ReactDOMServer.renderToString(<blink ariaTypo2="no" />)}
+        </Child2>
+      );
+    }
+
+    function Child() {
+      return (
+        <span ariaTypo4="no">{ReactDOMServer.renderToString(<App2 />)}</span>
+      );
+    }
+
+    function ServerEntry() {
+      return ReactDOMServer.renderToString(<Child />);
+    }
+
+    function App() {
+      return (
+        <div>
+          <span ariaTypo="no" />
+          <ServerEntry />
+          <font ariaTypo5="no" />
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<App />);
+    });
+    assertConsoleErrorDev([
+      // ReactDOM(App > div > span)
+      'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in App (at **)',
+      // ReactDOM(App > div > ServerEntry) >>> ReactDOMServer(Child) >>> ReactDOMServer(App2) >>> ReactDOMServer(blink)
+      'Invalid ARIA attribute `ariaTypo2`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in blink (at **)\n' +
+        '    in App2 (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in ServerEntry (at **)',
+      // ReactDOM(App > div > ServerEntry) >>> ReactDOMServer(Child) >>> ReactDOMServer(App2 > Child2 > span)
+      'Invalid ARIA attribute `ariaTypo3`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in Child2 (at **)\n' +
+        '    in App2 (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in ServerEntry (at **)',
+      // ReactDOM(App > div > ServerEntry) >>> ReactDOMServer(Child > span)
+      'Invalid ARIA attribute `ariaTypo4`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in ServerEntry (at **)',
+
+      // ReactDOM(App > div > font)
+      'Invalid ARIA attribute `ariaTypo5`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in font (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('should render root host components into body scope when the container is a Document', async () => {
+    function App({phase}) {
+      return (
+        <>
+          {phase < 1 ? null : <div>..before</div>}
+          {phase < 3 ? <div>before</div> : null}
+          {phase < 2 ? null : <div>before..</div>}
+          <html lang="en">
+            <head data-h="">
+              {phase < 1 ? null : <meta itemProp="" content="..head" />}
+              {phase < 3 ? <meta itemProp="" content="head" /> : null}
+              {phase < 2 ? null : <meta itemProp="" content="head.." />}
+            </head>
+            <body data-b="">
+              {phase < 1 ? null : <div>..inside</div>}
+              {phase < 3 ? <div>inside</div> : null}
+              {phase < 2 ? null : <div>inside..</div>}
+            </body>
+          </html>
+          {phase < 1 ? null : <div>..after</div>}
+          {phase < 3 ? <div>after</div> : null}
+          {phase < 2 ? null : <div>after..</div>}
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document);
+    await act(() => {
+      root.render(<App phase={0} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head data-h=""><meta itemprop="" content="head"></head><body data-b=""><div>before</div><div>inside</div><div>after</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={1} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"></head><body data-b=""><div>..before</div><div>before</div><div>..inside</div><div>inside</div><div>..after</div><div>after</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={2} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"><meta itemprop="" content="head.."></head><body data-b=""><div>..before</div><div>before</div><div>before..</div><div>..inside</div><div>inside</div><div>inside..</div><div>..after</div><div>after</div><div>after..</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={3} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head.."></head><body data-b=""><div>..before</div><div>before..</div><div>..inside</div><div>inside..</div><div>..after</div><div>after..</div></body></html>',
+    );
+
+    await act(() => {
+      root.unmount();
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head></head><body></body></html>',
+    );
+  });
+
+  it('should render root host components into body scope when the container is a the <html> tag', async () => {
+    function App({phase}) {
+      return (
+        <>
+          {phase < 1 ? null : <div>..before</div>}
+          {phase < 3 ? <div>before</div> : null}
+          {phase < 2 ? null : <div>before..</div>}
+          <head data-h="">
+            {phase < 1 ? null : <meta itemProp="" content="..head" />}
+            {phase < 3 ? <meta itemProp="" content="head" /> : null}
+            {phase < 2 ? null : <meta itemProp="" content="head.." />}
+          </head>
+          <body data-b="">
+            {phase < 1 ? null : <div>..inside</div>}
+            {phase < 3 ? <div>inside</div> : null}
+            {phase < 2 ? null : <div>inside..</div>}
+          </body>
+          {phase < 1 ? null : <div>..after</div>}
+          {phase < 3 ? <div>after</div> : null}
+          {phase < 2 ? null : <div>after..</div>}
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document.documentElement);
+    await act(() => {
+      root.render(<App phase={0} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="head"></head><body data-b=""><div>before</div><div>inside</div><div>after</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={1} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"></head><body data-b=""><div>..before</div><div>before</div><div>..inside</div><div>inside</div><div>..after</div><div>after</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={2} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"><meta itemprop="" content="head.."></head><body data-b=""><div>..before</div><div>before</div><div>before..</div><div>..inside</div><div>inside</div><div>inside..</div><div>..after</div><div>after</div><div>after..</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={3} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head.."></head><body data-b=""><div>..before</div><div>before..</div><div>..inside</div><div>inside..</div><div>..after</div><div>after..</div></body></html>',
+    );
+
+    await act(() => {
+      root.unmount();
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head></head><body></body></html>',
+    );
+  });
+
+  it('should render root host components into body scope when the container is a the <body> tag', async () => {
+    function App({phase}) {
+      return (
+        <>
+          {phase < 1 ? null : <div>..before</div>}
+          {phase < 3 ? <div>before</div> : null}
+          {phase < 2 ? null : <div>before..</div>}
+          <head data-h="">
+            {phase < 1 ? null : <meta itemProp="" content="..head" />}
+            {phase < 3 ? <meta itemProp="" content="head" /> : null}
+            {phase < 2 ? null : <meta itemProp="" content="head.." />}
+          </head>
+          {phase < 1 ? null : <div>..inside</div>}
+          {phase < 3 ? <div>inside</div> : null}
+          {phase < 2 ? null : <div>inside..</div>}
+          {phase < 1 ? null : <div>..after</div>}
+          {phase < 3 ? <div>after</div> : null}
+          {phase < 2 ? null : <div>after..</div>}
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document.body);
+    await act(() => {
+      root.render(<App phase={0} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="head"></head><body><div>before</div><div>inside</div><div>after</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={1} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"></head><body><div>..before</div><div>before</div><div>..inside</div><div>inside</div><div>..after</div><div>after</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={2} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"><meta itemprop="" content="head.."></head><body><div>..before</div><div>before</div><div>before..</div><div>..inside</div><div>inside</div><div>inside..</div><div>..after</div><div>after</div><div>after..</div></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={3} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head.."></head><body><div>..before</div><div>before..</div><div>..inside</div><div>inside..</div><div>..after</div><div>after..</div></body></html>',
+    );
+
+    await act(() => {
+      root.unmount();
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head></head><body></body></html>',
+    );
+  });
+
+  it('should render children of <head> into the document head even when the container is inside the document body', async () => {
+    function App({phase}) {
+      return (
+        <>
+          <div>before</div>
+          <head data-h="">
+            {phase < 1 ? null : <meta itemProp="" content="..head" />}
+            {phase < 3 ? <meta itemProp="" content="head" /> : null}
+            {phase < 2 ? null : <meta itemProp="" content="head.." />}
+          </head>
+          <div>after</div>
+        </>
+      );
+    }
+
+    const container = document.createElement('main');
+    document.body.append(container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App phase={0} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="head"></head><body><main><div>before</div><div>after</div></main></body></html>',
+    );
+
+    // @TODO remove this warning check when we loosen the tag nesting restrictions to allow arbitrary tags at the
+    // root of the application
+    assertConsoleErrorDev([
+      'In HTML, <head> cannot be a child of <main>.\nThis will cause a hydration error.\n' +
+        '    in head (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    await act(() => {
+      root.render(<App phase={1} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"></head><body><main><div>before</div><div>after</div></main></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={2} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head"><meta itemprop="" content="head.."></head><body><main><div>before</div><div>after</div></main></body></html>',
+    );
+
+    await act(() => {
+      root.render(<App phase={3} />);
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head data-h=""><meta itemprop="" content="..head"><meta itemprop="" content="head.."></head><body><main><div>before</div><div>after</div></main></body></html>',
+    );
+
+    await act(() => {
+      root.unmount();
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html><head></head><body><main></main></body></html>',
+    );
+  });
+
+  it('can render a Suspense boundary above the <html> tag', async () => {
+    let suspendOnNewPromise;
+    let resolveCurrentPromise;
+    let currentPromise;
+    function createNewPromise() {
+      currentPromise = new Promise(r => {
+        resolveCurrentPromise = r;
+      });
+      return currentPromise;
+    }
+    createNewPromise();
+    function Comp() {
+      const [promise, setPromise] = React.useState(currentPromise);
+      suspendOnNewPromise = () => {
+        setPromise(createNewPromise());
+      };
+      React.use(promise);
+      return null;
+    }
+
+    const fallback = (
+      <html data-fallback="">
+        <body data-fallback="">
+          <div>fallback</div>
+        </body>
+      </html>
+    );
+
+    const main = (
+      <html lang="en">
+        <head>
+          <meta itemProp="" content="primary" />
+        </head>
+        <body>
+          <div>
+            <Message />
+          </div>
+        </body>
+      </html>
+    );
+
+    let suspendOnNewMessage;
+    let currentMessage;
+    let resolveCurrentMessage;
+    function createNewMessage() {
+      currentMessage = new Promise(r => {
+        resolveCurrentMessage = r;
+      });
+      return currentMessage;
+    }
+    createNewMessage();
+    resolveCurrentMessage('hello world');
+    function Message() {
+      const [pendingMessage, setPendingMessage] =
+        React.useState(currentMessage);
+      suspendOnNewMessage = () => {
+        setPendingMessage(createNewMessage());
+      };
+      return React.use(pendingMessage);
+    }
+
+    function App() {
+      return (
+        <React.Suspense fallback={fallback}>
+          <Comp />
+          {main}
+        </React.Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document);
+    await act(() => {
+      root.render(<App />);
+    });
+    // The initial render is blocked by promiseA so we see the fallback Document
+    expect(document.documentElement.outerHTML).toBe(
+      '<html data-fallback=""><head></head><body data-fallback=""><div>fallback</div></body></html>',
+    );
+
+    await act(() => {
+      resolveCurrentPromise();
+    });
+    // When promiseA resolves we see the primary Document
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary"></head><body><div>hello world</div></body></html>',
+    );
+
+    await act(() => {
+      suspendOnNewPromise();
+    });
+    // When we switch to rendering ComponentB synchronously we have to put the Document back into fallback
+    // The primary content remains hidden until promiseB resolves
+    expect(document.documentElement.outerHTML).toBe(
+      '<html data-fallback=""><head><meta itemprop="" content="primary" style="display: none;"></head><body data-fallback=""><div style="display: none;">hello world</div><div>fallback</div></body></html>',
+    );
+
+    await act(() => {
+      resolveCurrentPromise();
+    });
+    // When promiseB resolves we see the new primary content inside the primary Document
+    // style attributes stick around after being unhidden by the Suspense boundary
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary" style=""></head><body><div style="">hello world</div></body></html>',
+    );
+
+    await act(() => {
+      React.startTransition(() => {
+        suspendOnNewPromise();
+      });
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary" style=""></head><body><div style="">hello world</div></body></html>',
+    );
+
+    await act(() => {
+      resolveCurrentPromise();
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary" style=""></head><body><div style="">hello world</div></body></html>',
+    );
+
+    await act(() => {
+      suspendOnNewMessage();
+    });
+    // When we update the message itself we will be causing updates on the primary content of the Suspense boundary.
+    // The reason we also test for this is to make sure we don't double acquire the document singletons while
+    // disappearing and reappearing layout effects
+    expect(document.documentElement.outerHTML).toBe(
+      '<html data-fallback=""><head><meta itemprop="" content="primary" style="display: none;"></head><body data-fallback=""><div style="display: none;">hello world</div><div>fallback</div></body></html>',
+    );
+
+    await act(() => {
+      resolveCurrentMessage('hello you!');
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary" style=""></head><body><div style="">hello you!</div></body></html>',
+    );
+
+    await act(() => {
+      React.startTransition(() => {
+        suspendOnNewMessage();
+      });
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary" style=""></head><body><div style="">hello you!</div></body></html>',
+    );
+
+    await act(() => {
+      resolveCurrentMessage('goodbye!');
+    });
+    expect(document.documentElement.outerHTML).toBe(
+      '<html lang="en"><head><meta itemprop="" content="primary" style=""></head><body><div style="">goodbye!</div></body></html>',
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMActivity-test.js b/packages/react-dom/src/__tests__/ReactDOMActivity-test.js
new file mode 100644
index 00000000000..ec2048ec434
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMActivity-test.js
@@ -0,0 +1,565 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let act;
+let Activity;
+let useState;
+let useLayoutEffect;
+let useEffect;
+let LegacyHidden;
+let assertLog;
+let Suspense;
+
+describe('ReactDOMActivity', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Scheduler = require('scheduler/unstable_mock');
+    Activity = React.Activity;
+    useState = React.useState;
+    Suspense = React.Suspense;
+    useState = React.useState;
+    LegacyHidden = React.unstable_LegacyHidden;
+    useLayoutEffect = React.useLayoutEffect;
+    useEffect = React.useEffect;
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+    assertLog = InternalTestUtils.assertLog;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text}>{props.children}</span>;
+  }
+
+  // @gate enableActivity
+  it(
+    'hiding an Activity boundary also hides the direct children of any ' +
+      'portals it contains, regardless of how deeply nested they are',
+    async () => {
+      const portalContainer = document.createElement('div');
+
+      let setShow;
+      function Accordion({children}) {
+        const [shouldShow, _setShow] = useState(true);
+        setShow = _setShow;
+        return (
+          <Activity mode={shouldShow ? 'visible' : 'hidden'}>
+            {children}
+          </Activity>
+        );
+      }
+
+      function App() {
+        return (
+          <Accordion>
+            <div>
+              {ReactDOM.createPortal(
+                <div>Portal contents</div>,
+                portalContainer,
+              )}
+            </div>
+          </Accordion>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<App />));
+      expect(container.innerHTML).toBe('<div></div>');
+      expect(portalContainer.innerHTML).toBe('<div>Portal contents</div>');
+
+      // Hide the Activity boundary. Not only are the nearest DOM elements hidden,
+      // but also the children of the nested portal contained within it.
+      await act(() => setShow(false));
+      expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+      expect(portalContainer.innerHTML).toBe(
+        '<div style="display: none;">Portal contents</div>',
+      );
+    },
+  );
+
+  // @gate enableActivity
+  it(
+    'revealing an Activity boundary inside a portal does not reveal the ' +
+      'portal contents if has a hidden Activity parent',
+    async () => {
+      const portalContainer = document.createElement('div');
+
+      let setShow;
+      function Accordion({children}) {
+        const [shouldShow, _setShow] = useState(false);
+        setShow = _setShow;
+        return (
+          <Activity mode={shouldShow ? 'visible' : 'hidden'}>
+            {children}
+          </Activity>
+        );
+      }
+
+      function App() {
+        return (
+          <Activity mode="hidden">
+            <div>
+              {ReactDOM.createPortal(
+                <Accordion>
+                  <div>Portal contents</div>
+                </Accordion>,
+                portalContainer,
+              )}
+            </div>
+          </Activity>
+        );
+      }
+
+      // Start with both boundaries hidden.
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<App />));
+      expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+      expect(portalContainer.innerHTML).toBe(
+        '<div style="display: none;">Portal contents</div>',
+      );
+
+      // Reveal the inner Activity boundary. It should not reveal its children,
+      // because there's a parent Activity boundary that is still hidden.
+      await act(() => setShow(true));
+      expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+      expect(portalContainer.innerHTML).toBe(
+        '<div style="display: none;">Portal contents</div>',
+      );
+    },
+  );
+
+  // @gate enableActivity
+  it('hides new portals added to an already hidden tree', async () => {
+    function Child() {
+      return <Text text="Child" />;
+    }
+
+    const portalContainer = document.createElement('div');
+
+    function Portal({children}) {
+      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Mount hidden tree.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Text text="Parent" />
+        </Activity>,
+      );
+    });
+    assertLog(['Parent']);
+    expect(container.innerHTML).toBe(
+      '<span prop="Parent" style="display: none;"></span>',
+    );
+    expect(portalContainer.innerHTML).toBe('');
+
+    // Add a portal inside the hidden tree.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Text text="Parent" />
+          <Portal>
+            <Child />
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['Parent', 'Child']);
+    expect(container.innerHTML).toBe(
+      '<span prop="Parent" style="display: none;"></span><div style="display: none;"></div>',
+    );
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style="display: none;"></span>',
+    );
+
+    // Now reveal it.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Text text="Parent" />
+          <Portal>
+            <Child />
+          </Portal>
+        </Activity>,
+      );
+    });
+
+    assertLog(['Parent', 'Child']);
+    expect(container.innerHTML).toBe(
+      '<span prop="Parent" style=""></span><div style=""></div>',
+    );
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style=""></span>',
+    );
+  });
+
+  // @gate enableActivity
+  it('hides new insertions inside an already hidden portal', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.log(`Mount layout ${text}`);
+        return () => {
+          Scheduler.log(`Unmount layout ${text}`);
+        };
+      }, [text]);
+      return <Text text={text} />;
+    }
+
+    const portalContainer = document.createElement('div');
+
+    function Portal({children}) {
+      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Mount hidden tree.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Portal>
+            <Child text="A" />
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['A']);
+    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="A" style="display: none;"></span>',
+    );
+
+    // Add a node inside the hidden portal.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Portal>
+            <Child text="A" />
+            <Child text="B" />
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['A', 'B']);
+    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="A" style="display: none;"></span><span prop="B" style="display: none;"></span>',
+    );
+
+    // Now reveal it.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Portal>
+            <Child text="A" />
+            <Child text="B" />
+          </Portal>
+        </Activity>,
+      );
+    });
+
+    assertLog(['A', 'B', 'Mount layout A', 'Mount layout B']);
+    expect(container.innerHTML).toBe('<div style=""></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="A" style=""></span><span prop="B" style=""></span>',
+    );
+  });
+
+  // @gate enableActivity
+  it('reveal an inner Suspense boundary without revealing an outer Activity on the same host child', async () => {
+    const promise = new Promise(() => {});
+
+    function Child({showInner}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return (
+        <>
+          {showInner ? null : promise}
+          <Text text="Child" />
+        </>
+      );
+    }
+
+    const portalContainer = document.createElement('div');
+
+    function Portal({children}) {
+      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    // Prerender the whole tree.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Portal>
+            <Suspense name="Inner" fallback={<span>Loading</span>}>
+              <Child showInner={true} />
+            </Suspense>
+          </Portal>
+        </Activity>,
+      );
+    });
+
+    assertLog(['Child']);
+    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style="display: none;"></span>',
+    );
+
+    // Re-suspend the inner.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Portal>
+            <Suspense name="Inner" fallback={<span>Loading</span>}>
+              <Child showInner={false} />
+            </Suspense>
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog([]);
+    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style="display: none;"></span><span style="display: none;">Loading</span>',
+    );
+
+    // Toggle to visible while suspended.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Portal>
+            <Suspense name="Inner" fallback={<span>Loading</span>}>
+              <Child showInner={false} />
+            </Suspense>
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog([]);
+    expect(container.innerHTML).toBe('<div style=""></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style="display: none;"></span><span style="">Loading</span>',
+    );
+
+    // Now reveal.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Portal>
+            <Suspense name="Inner" fallback={<span>Loading</span>}>
+              <Child showInner={true} />
+            </Suspense>
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(container.innerHTML).toBe('<div style=""></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style=""></span>',
+    );
+  });
+
+  // @gate enableActivity
+  it('mounts/unmounts layout effects in portal when visibility changes (starting visible)', async () => {
+    function Child() {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const portalContainer = document.createElement('div');
+
+    function Portal({children}) {
+      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Mount visible tree.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Portal>
+            <Child />
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(container.innerHTML).toBe('<div></div>');
+    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
+
+    // Hide the tree. The layout effect is unmounted.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Portal>
+            <Child />
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['Unmount layout', 'Child']);
+    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style="display: none;"></span>',
+    );
+  });
+
+  // @gate enableActivity
+  it('mounts/unmounts layout effects in portal when visibility changes (starting hidden)', async () => {
+    function Child() {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const portalContainer = document.createElement('div');
+
+    function Portal({children}) {
+      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Mount hidden tree.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Portal>
+            <Child />
+          </Portal>
+        </Activity>,
+      );
+    });
+    // No layout effect.
+    assertLog(['Child']);
+    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style="display: none;"></span>',
+    );
+
+    // Unhide the tree. The layout effect is mounted.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Portal>
+            <Child />
+          </Portal>
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(container.innerHTML).toBe('<div style=""></div>');
+    expect(portalContainer.innerHTML).toBe(
+      '<span prop="Child" style=""></span>',
+    );
+  });
+
+  // @gate enableLegacyHidden
+  it('does not toggle effects or hide nodes for LegacyHidden component inside portal', async () => {
+    function Child() {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      useEffect(() => {
+        Scheduler.log('Mount passive');
+        return () => {
+          Scheduler.log('Unmount passive');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const portalContainer = document.createElement('div');
+
+    function Portal({children}) {
+      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Mount visible tree.
+    await act(() => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Portal>
+            <Child />
+          </Portal>
+        </LegacyHidden>,
+      );
+    });
+    assertLog(['Child', 'Mount layout', 'Mount passive']);
+    expect(container.innerHTML).toBe('<div></div>');
+    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
+
+    // Hide the tree.
+    await act(() => {
+      root.render(
+        <LegacyHidden mode="hidden">
+          <Portal>
+            <Child />
+          </Portal>
+        </LegacyHidden>,
+      );
+    });
+    // Effects not unmounted.
+    assertLog(['Child']);
+    expect(container.innerHTML).toBe('<div></div>');
+    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
+
+    // Unhide the tree.
+    await act(() => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Portal>
+            <Child />
+          </Portal>
+        </LegacyHidden>,
+      );
+    });
+    // Effects already mounted.
+    assertLog(['Child']);
+    expect(container.innerHTML).toBe('<div></div>');
+    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
new file mode 100644
index 00000000000..cd1d055c09d
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOM unknown attribute', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  async function testUnknownAttributeRemoval(givenValue) {
+    const el = document.createElement('div');
+    const root = ReactDOMClient.createRoot(el);
+
+    await act(() => {
+      root.render(<div unknown="something" />);
+    });
+
+    expect(el.firstChild.getAttribute('unknown')).toBe('something');
+
+    await act(() => {
+      root.render(<div unknown={givenValue} />);
+    });
+
+    expect(el.firstChild.hasAttribute('unknown')).toBe(false);
+  }
+
+  async function testUnknownAttributeAssignment(givenValue, expectedDOMValue) {
+    const el = document.createElement('div');
+    const root = ReactDOMClient.createRoot(el);
+
+    await act(() => {
+      root.render(<div unknown="something" />);
+    });
+
+    expect(el.firstChild.getAttribute('unknown')).toBe('something');
+
+    await act(() => {
+      root.render(<div unknown={givenValue} />);
+    });
+
+    expect(el.firstChild.getAttribute('unknown')).toBe(expectedDOMValue);
+  }
+
+  describe('unknown attributes', () => {
+    it('removes values null and undefined', async () => {
+      await testUnknownAttributeRemoval(null);
+      await testUnknownAttributeRemoval(undefined);
+    });
+
+    it('changes values true, false to null, and also warns once', async () => {
+      await testUnknownAttributeAssignment(true, null);
+      assertConsoleErrorDev([
+        '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' +
+          '    in div (at **)',
+      ]);
+      await testUnknownAttributeAssignment(false, null);
+    });
+
+    it('removes unknown attributes that were rendered but are now missing', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await act(() => {
+        root.render(<div unknown="something" />);
+      });
+
+      expect(el.firstChild.getAttribute('unknown')).toBe('something');
+
+      await act(() => {
+        root.render(<div />);
+      });
+
+      expect(el.firstChild.hasAttribute('unknown')).toBe(false);
+    });
+
+    it('removes new boolean props', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await act(() => {
+        root.render(<div inert={true} />);
+      });
+
+      expect(el.firstChild.getAttribute('inert')).toBe(true ? '' : null);
+    });
+
+    it('warns once for empty strings in new boolean props', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await act(() => {
+        root.render(<div inert="" />);
+      });
+      assertConsoleErrorDev([
+        'Received an empty string for a boolean attribute `inert`. ' +
+          'This will treat the attribute as if it were false. ' +
+          'Either pass `false` to silence this warning, or ' +
+          'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.firstChild.getAttribute('inert')).toBe(true ? null : '');
+
+      // The warning is only printed once.
+      await act(() => {
+        root.render(<div inert="" />);
+      });
+    });
+
+    it('passes through strings', async () => {
+      await testUnknownAttributeAssignment('a string', 'a string');
+    });
+
+    it('coerces numbers to strings', async () => {
+      await testUnknownAttributeAssignment(0, '0');
+      await testUnknownAttributeAssignment(-1, '-1');
+      await testUnknownAttributeAssignment(42, '42');
+      await testUnknownAttributeAssignment(9000.99, '9000.99');
+    });
+
+    it('coerces NaN to strings and warns', async () => {
+      await testUnknownAttributeAssignment(NaN, 'NaN');
+      assertConsoleErrorDev([
+        'Received NaN for the `unknown` attribute. ' +
+          'If this is expected, cast the value to a string.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('coerces objects to strings and warns', async () => {
+      const lol = {
+        toString() {
+          return 'lol';
+        },
+      };
+
+      await testUnknownAttributeAssignment({hello: 'world'}, '[object Object]');
+      await testUnknownAttributeAssignment(lol, 'lol');
+    });
+
+    it('throws with Temporal-like objects', async () => {
+      class TemporalLike {
+        valueOf() {
+          // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+          // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+          throw new TypeError('prod message');
+        }
+        toString() {
+          return '2020-01-01';
+        }
+      }
+      const test = () =>
+        testUnknownAttributeAssignment(new TemporalLike(), null);
+
+      await expect(test).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `unknown` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('removes symbols and warns', async () => {
+      await testUnknownAttributeRemoval(Symbol('foo'));
+      assertConsoleErrorDev([
+        '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://react.dev/link/attribute-behavior \n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('removes functions and warns', async () => {
+      await testUnknownAttributeRemoval(function someFunction() {});
+      assertConsoleErrorDev([
+        '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://react.dev/link/attribute-behavior \n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('allows camelCase unknown attributes and warns', async () => {
+      const el = document.createElement('div');
+
+      const root = ReactDOMClient.createRoot(el);
+
+      await act(() => {
+        root.render(<div helloWorld="something" />);
+      });
+      assertConsoleErrorDev([
+        '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. ' +
+          'If you accidentally passed it from a parent component, remove ' +
+          'it from the DOM element.\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.firstChild.getAttribute('helloworld')).toBe('something');
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
new file mode 100644
index 00000000000..0f0986dde8e
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -0,0 +1,3862 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMComponent', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+  let act;
+  let assertLog;
+  let Scheduler;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    assertLog = require('internal-test-utils').assertLog;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('updateDOM', () => {
+    it('should handle className', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={{}} />);
+      });
+
+      await act(() => {
+        root.render(<div className={'foo'} />);
+      });
+      expect(container.firstChild.className).toEqual('foo');
+      await act(() => {
+        root.render(<div className={'bar'} />);
+      });
+      expect(container.firstChild.className).toEqual('bar');
+      await act(() => {
+        root.render(<div className={null} />);
+      });
+      expect(container.firstChild.className).toEqual('');
+    });
+
+    it('should gracefully handle various style value types', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={{}} />);
+      });
+      const stubStyle = container.firstChild.style;
+
+      // set initial style
+      const setup = {
+        display: 'block',
+        left: '1px',
+        top: 2,
+        fontFamily: 'Arial',
+      };
+      await act(() => {
+        root.render(<div style={setup} />);
+      });
+      expect(stubStyle.display).toEqual('block');
+      expect(stubStyle.left).toEqual('1px');
+      expect(stubStyle.top).toEqual('2px');
+      expect(stubStyle.fontFamily).toEqual('Arial');
+
+      // reset the style to their default state
+      const reset = {display: '', left: null, top: false, fontFamily: true};
+      await act(() => {
+        root.render(<div style={reset} />);
+      });
+      expect(stubStyle.display).toEqual('');
+      expect(stubStyle.left).toEqual('');
+      expect(stubStyle.top).toEqual('');
+      expect(stubStyle.fontFamily).toEqual('');
+    });
+
+    it('should not update styles when mutating a proxy style object', async () => {
+      const styleStore = {
+        display: 'none',
+        fontFamily: 'Arial',
+        lineHeight: 1.2,
+      };
+      // We use a proxy style object so that we can mutate it even if it is
+      // frozen in DEV.
+      const styles = {
+        get display() {
+          return styleStore.display;
+        },
+        set display(v) {
+          styleStore.display = v;
+        },
+        get fontFamily() {
+          return styleStore.fontFamily;
+        },
+        set fontFamily(v) {
+          styleStore.fontFamily = v;
+        },
+        get lineHeight() {
+          return styleStore.lineHeight;
+        },
+        set lineHeight(v) {
+          styleStore.lineHeight = v;
+        },
+      };
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+
+      const stubStyle = container.firstChild.style;
+      stubStyle.display = styles.display;
+      stubStyle.fontFamily = styles.fontFamily;
+
+      styles.display = 'block';
+
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('none');
+      expect(stubStyle.fontFamily).toEqual('Arial');
+      expect(stubStyle.lineHeight).toEqual('1.2');
+
+      styles.fontFamily = 'Helvetica';
+
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('none');
+      expect(stubStyle.fontFamily).toEqual('Arial');
+      expect(stubStyle.lineHeight).toEqual('1.2');
+
+      styles.lineHeight = 0.5;
+
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('none');
+      expect(stubStyle.fontFamily).toEqual('Arial');
+      expect(stubStyle.lineHeight).toEqual('1.2');
+
+      await act(() => {
+        root.render(<div style={undefined} />);
+      });
+      expect(stubStyle.display).toBe('');
+      expect(stubStyle.fontFamily).toBe('');
+      expect(stubStyle.lineHeight).toBe('');
+    });
+
+    it('should throw when mutating style objects', async () => {
+      const style = {border: '1px solid black'};
+
+      class App extends React.Component {
+        state = {style: style};
+
+        render() {
+          return <div style={this.state.style}>asd</div>;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<App />);
+      });
+
+      if (__DEV__) {
+        expect(() => (style.position = 'absolute')).toThrow();
+      }
+    });
+
+    it('should warn for unknown prop', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div foo={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        '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://react.dev/link/attribute-behavior ' +
+          '\n    in div (at **)',
+      ]);
+    });
+
+    it('should group multiple unknown prop warnings together', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div foo={() => {}} baz={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        '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://react.dev/link/attribute-behavior ' +
+          '\n    in div (at **)',
+      ]);
+    });
+
+    it('should warn for onDblClick prop', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onDblClick={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid event handler property `onDblClick`. Did you mean `onDoubleClick`?\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn for unknown string event handlers', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onUnknown='alert("hack")' />);
+      });
+      assertConsoleErrorDev([
+        '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);
+      await act(() => {
+        root.render(<div onunknown='alert("hack")' />);
+      });
+      assertConsoleErrorDev([
+        '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);
+
+      await act(() => {
+        root.render(<div on-unknown='alert("hack")' />);
+      });
+      assertConsoleErrorDev([
+        'Unknown event handler property `on-unknown`. It will be ignored.\n' +
+          '    in div (at **)',
+      ]);
+      expect(container.firstChild.hasAttribute('on-unknown')).toBe(false);
+      expect(container.firstChild['on-unknown']).toBe(undefined);
+    });
+
+    it('should warn for unknown function event handlers', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onUnknown={function () {}} />);
+      });
+      assertConsoleErrorDev([
+        '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);
+      await act(() => {
+        root.render(<div onunknown={function () {}} />);
+      });
+      assertConsoleErrorDev([
+        '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);
+      await act(() => {
+        root.render(<div on-unknown={function () {}} />);
+      });
+      assertConsoleErrorDev([
+        'Unknown event handler property `on-unknown`. It will be ignored.\n' +
+          '    in div (at **)',
+      ]);
+      expect(container.firstChild.hasAttribute('on-unknown')).toBe(false);
+      expect(container.firstChild['on-unknown']).toBe(undefined);
+    });
+
+    it('should warn for badly cased React attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div CHILDREN="5" />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `CHILDREN`. Did you mean `children`?\n' +
+          '    in div (at **)',
+      ]);
+      expect(container.firstChild.getAttribute('CHILDREN')).toBe('5');
+    });
+
+    it('should not warn for "0" as a unitless style value', async () => {
+      class Component extends React.Component {
+        render() {
+          return <div style={{margin: '0'}} />;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Component />);
+      });
+    });
+
+    it('should warn nicely about NaN in style', async () => {
+      const style = {fontSize: NaN};
+      const div = document.createElement('div');
+      const root = ReactDOMClient.createRoot(div);
+      await act(() => {
+        root.render(<span style={style} />);
+      });
+      assertConsoleErrorDev([
+        '`NaN` is an invalid value for the `fontSize` css style property.\n' +
+          '    in span (at **)',
+      ]);
+      await act(() => {
+        root.render(<span style={style} />);
+      });
+    });
+
+    it('throws with Temporal-like objects as style values', async () => {
+      class TemporalLike {
+        valueOf() {
+          // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+          // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+          throw new TypeError('prod message');
+        }
+        toString() {
+          return '2020-01-01';
+        }
+      }
+      const style = {fontSize: new TemporalLike()};
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await expect(async () => {
+        await act(() => {
+          root.render(<span style={style} />);
+        });
+      }).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in span (at **)',
+        'The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in span (at **)',
+      ]);
+    });
+
+    it('should update styles if initially null', async () => {
+      let styles = null;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+
+      const stubStyle = container.firstChild.style;
+
+      styles = {display: 'block'};
+
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('block');
+    });
+
+    it('should update styles if updated to null multiple times', async () => {
+      let styles = null;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+
+      styles = {display: 'block'};
+      const stubStyle = container.firstChild.style;
+
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('block');
+
+      await act(() => {
+        root.render(<div style={null} />);
+      });
+      expect(stubStyle.display).toEqual('');
+
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('block');
+
+      await act(() => {
+        root.render(<div style={null} />);
+      });
+      expect(stubStyle.display).toEqual('');
+    });
+
+    it('should allow named slot projection on both web components and regular DOM elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <my-component>
+            <my-second-component slot="first" />
+            <button slot="second">Hello</button>
+          </my-component>,
+        );
+      });
+
+      const lightDOM = container.firstChild.childNodes;
+
+      expect(lightDOM[0].getAttribute('slot')).toBe('first');
+      expect(lightDOM[1].getAttribute('slot')).toBe('second');
+    });
+
+    it('should skip reserved props on web components', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <my-component
+            children={['foo']}
+            suppressContentEditableWarning={true}
+            suppressHydrationWarning={true}
+          />,
+        );
+      });
+      expect(container.firstChild.hasAttribute('children')).toBe(false);
+      expect(
+        container.firstChild.hasAttribute('suppressContentEditableWarning'),
+      ).toBe(false);
+      expect(
+        container.firstChild.hasAttribute('suppressHydrationWarning'),
+      ).toBe(false);
+
+      await act(() => {
+        root.render(
+          <my-component
+            children={['bar']}
+            suppressContentEditableWarning={false}
+            suppressHydrationWarning={false}
+          />,
+        );
+      });
+      expect(container.firstChild.hasAttribute('children')).toBe(false);
+      expect(
+        container.firstChild.hasAttribute('suppressContentEditableWarning'),
+      ).toBe(false);
+      expect(
+        container.firstChild.hasAttribute('suppressHydrationWarning'),
+      ).toBe(false);
+    });
+
+    it('should skip dangerouslySetInnerHTML on web components', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<my-component dangerouslySetInnerHTML={{__html: 'hi'}} />);
+      });
+      expect(container.firstChild.hasAttribute('dangerouslySetInnerHTML')).toBe(
+        false,
+      );
+
+      await act(() => {
+        root.render(<my-component dangerouslySetInnerHTML={{__html: 'bye'}} />);
+      });
+      expect(container.firstChild.hasAttribute('dangerouslySetInnerHTML')).toBe(
+        false,
+      );
+    });
+
+    it('should render null and undefined as empty but print other falsy values', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: 'textContent'}} />);
+      });
+      expect(container.textContent).toEqual('textContent');
+
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: 0}} />);
+      });
+      expect(container.textContent).toEqual('0');
+
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: false}} />);
+      });
+      expect(container.textContent).toEqual('false');
+
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: ''}} />);
+      });
+      expect(container.textContent).toEqual('');
+
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: null}} />);
+      });
+      expect(container.textContent).toEqual('');
+
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: undefined}} />);
+      });
+      expect(container.textContent).toEqual('');
+    });
+
+    it('should remove attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<img height="17" />);
+      });
+
+      expect(container.firstChild.hasAttribute('height')).toBe(true);
+      await act(() => {
+        root.render(<img />);
+      });
+      expect(container.firstChild.hasAttribute('height')).toBe(false);
+    });
+
+    it('should remove properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div className="monkey" />);
+      });
+
+      expect(container.firstChild.className).toEqual('monkey');
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(container.firstChild.className).toEqual('');
+    });
+
+    it('should not set null/undefined attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      // Initial render.
+      await act(() => {
+        root.render(<img src={null} data-foo={undefined} />);
+      });
+      const node = container.firstChild;
+      expect(node.hasAttribute('src')).toBe(false);
+      expect(node.hasAttribute('data-foo')).toBe(false);
+      // Update in one direction.
+      await act(() => {
+        root.render(<img src={undefined} data-foo={null} />);
+      });
+      expect(node.hasAttribute('src')).toBe(false);
+      expect(node.hasAttribute('data-foo')).toBe(false);
+      // Update in another direction.
+      await act(() => {
+        root.render(<img src={null} data-foo={undefined} />);
+      });
+      expect(node.hasAttribute('src')).toBe(false);
+      expect(node.hasAttribute('data-foo')).toBe(false);
+      // Removal.
+      await act(() => {
+        root.render(<img />);
+      });
+      expect(node.hasAttribute('src')).toBe(false);
+      expect(node.hasAttribute('data-foo')).toBe(false);
+      // Addition.
+      await act(() => {
+        root.render(<img src={undefined} data-foo={null} />);
+      });
+      expect(node.hasAttribute('src')).toBe(false);
+      expect(node.hasAttribute('data-foo')).toBe(false);
+    });
+
+    it('should not add an empty src attribute', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<img src="" />);
+      });
+      assertConsoleErrorDev([
+        'An empty string ("") was passed to the src attribute. ' +
+          'This may cause the browser to download the whole page again over the network. ' +
+          'To fix this, either do not render the element at all ' +
+          'or pass null to src instead of an empty string.\n' +
+          '    in img (at **)',
+      ]);
+      const node = container.firstChild;
+      expect(node.hasAttribute('src')).toBe(false);
+
+      await act(() => {
+        root.render(<img src="abc" />);
+      });
+      expect(node.hasAttribute('src')).toBe(true);
+
+      await act(() => {
+        root.render(<img src="" />);
+      });
+      assertConsoleErrorDev([
+        'An empty string ("") was passed to the src attribute. ' +
+          'This may cause the browser to download the whole page again over the network. ' +
+          'To fix this, either do not render the element at all ' +
+          'or pass null to src instead of an empty string.\n' +
+          '    in img (at **)',
+      ]);
+      expect(node.hasAttribute('src')).toBe(false);
+    });
+
+    it('should not add an empty href attribute', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<link href="" />);
+      });
+      assertConsoleErrorDev([
+        'An empty string ("") was passed to the href attribute. ' +
+          'To fix this, either do not render the element at all ' +
+          'or pass null to href instead of an empty string.\n' +
+          '    in link (at **)',
+      ]);
+      const node = container.firstChild;
+      expect(node.hasAttribute('href')).toBe(false);
+
+      await act(() => {
+        root.render(<link href="abc" />);
+      });
+      expect(node.hasAttribute('href')).toBe(true);
+
+      await act(() => {
+        root.render(<link href="" />);
+      });
+      assertConsoleErrorDev([
+        'An empty string ("") was passed to the href attribute. ' +
+          'To fix this, either do not render the element at all ' +
+          'or pass null to href instead of an empty string.\n' +
+          '    in link (at **)',
+      ]);
+      expect(node.hasAttribute('href')).toBe(false);
+    });
+
+    it('should allow an empty href attribute on anchors', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<a href="" />);
+      });
+      const node = container.firstChild;
+      expect(node.getAttribute('href')).toBe('');
+    });
+
+    it('should allow an empty action attribute', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<form action="" />);
+      });
+      const node = container.firstChild;
+      expect(node.getAttribute('action')).toBe('');
+
+      await act(() => {
+        root.render(<form action="abc" />);
+      });
+      expect(node.hasAttribute('action')).toBe(true);
+
+      await act(() => {
+        root.render(<form action="" />);
+      });
+      expect(node.getAttribute('action')).toBe('');
+    });
+
+    it('allows empty string of a formAction to override the default of a parent', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <form action="hello">
+            <button formAction="" />,
+          </form>,
+        );
+      });
+      const node = container.firstChild.firstChild;
+      expect(node.hasAttribute('formaction')).toBe(true);
+      expect(node.getAttribute('formaction')).toBe('');
+    });
+
+    it('should not filter attributes for custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <some-custom-element action="" formAction="" href="" src="" />,
+        );
+      });
+      const node = container.firstChild;
+      expect(node.hasAttribute('action')).toBe(true);
+      expect(node.hasAttribute('formAction')).toBe(true);
+      expect(node.hasAttribute('href')).toBe(true);
+      expect(node.hasAttribute('src')).toBe(true);
+    });
+
+    it('should apply React-specific aliases to HTML elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<form acceptCharset="foo" />);
+      });
+      const node = container.firstChild;
+      // Test attribute initialization.
+      expect(node.getAttribute('accept-charset')).toBe('foo');
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+      // Test attribute update.
+      await act(() => {
+        root.render(<form acceptCharset="boo" />);
+      });
+      expect(node.getAttribute('accept-charset')).toBe('boo');
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+      // Test attribute removal by setting to null.
+      await act(() => {
+        root.render(<form acceptCharset={null} />);
+      });
+      expect(node.hasAttribute('accept-charset')).toBe(false);
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+      // Restore.
+      await act(() => {
+        root.render(<form acceptCharset="foo" />);
+      });
+      expect(node.getAttribute('accept-charset')).toBe('foo');
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+      // Test attribute removal by setting to undefined.
+      await act(() => {
+        root.render(<form acceptCharset={undefined} />);
+      });
+      expect(node.hasAttribute('accept-charset')).toBe(false);
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+      // Restore.
+      await act(() => {
+        root.render(<form acceptCharset="foo" />);
+      });
+      expect(node.getAttribute('accept-charset')).toBe('foo');
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+      // Test attribute removal.
+      await act(() => {
+        root.render(<form />);
+      });
+      expect(node.hasAttribute('accept-charset')).toBe(false);
+      expect(node.hasAttribute('acceptCharset')).toBe(false);
+    });
+
+    it('should apply React-specific aliases to SVG elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<svg arabicForm="foo" />);
+      });
+      const node = container.firstChild;
+      // Test attribute initialization.
+      expect(node.getAttribute('arabic-form')).toBe('foo');
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Test attribute update.
+      await act(() => {
+        root.render(<svg arabicForm="boo" />);
+      });
+      expect(node.getAttribute('arabic-form')).toBe('boo');
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Test attribute removal by setting to null.
+      await act(() => {
+        root.render(<svg arabicForm={null} />);
+      });
+      expect(node.hasAttribute('arabic-form')).toBe(false);
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Restore.
+      await act(() => {
+        root.render(<svg arabicForm="foo" />);
+      });
+      expect(node.getAttribute('arabic-form')).toBe('foo');
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Test attribute removal by setting to undefined.
+      await act(() => {
+        root.render(<svg arabicForm={undefined} />);
+      });
+      expect(node.hasAttribute('arabic-form')).toBe(false);
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Restore.
+      await act(() => {
+        root.render(<svg arabicForm="foo" />);
+      });
+      expect(node.getAttribute('arabic-form')).toBe('foo');
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Test attribute removal.
+      await act(() => {
+        root.render(<svg />);
+      });
+      expect(node.hasAttribute('arabic-form')).toBe(false);
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+    });
+
+    it('should properly update custom attributes on custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<some-custom-element foo="bar" />);
+      });
+      expect(container.firstChild.getAttribute('foo')).toBe('bar');
+      await act(() => {
+        root.render(<some-custom-element bar="buzz" />);
+      });
+      expect(container.firstChild.hasAttribute('foo')).toBe(false);
+      expect(container.firstChild.getAttribute('bar')).toBe('buzz');
+      const node = container.firstChild;
+      expect(node.hasAttribute('foo')).toBe(false);
+      expect(node.getAttribute('bar')).toBe('buzz');
+    });
+
+    it('should not apply React-specific aliases to custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<some-custom-element arabicForm="foo" />);
+      });
+      const node = container.firstChild;
+      // Should not get transformed to arabic-form as SVG would be.
+      expect(node.getAttribute('arabicForm')).toBe('foo');
+      expect(node.hasAttribute('arabic-form')).toBe(false);
+      // Test attribute update.
+      await act(() => {
+        root.render(<some-custom-element arabicForm="boo" />);
+      });
+      expect(node.getAttribute('arabicForm')).toBe('boo');
+      // Test attribute removal and addition.
+      await act(() => {
+        root.render(<some-custom-element acceptCharset="buzz" />);
+      });
+      // Verify the previous attribute was removed.
+      expect(node.hasAttribute('arabicForm')).toBe(false);
+      // Should not get transformed to accept-charset as HTML would be.
+      expect(node.getAttribute('acceptCharset')).toBe('buzz');
+      expect(node.hasAttribute('accept-charset')).toBe(false);
+    });
+
+    it('should clear a single style prop when changing `style`', async () => {
+      let styles = {display: 'none', color: 'red'};
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+
+      const stubStyle = container.firstChild.style;
+
+      styles = {color: 'green'};
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      expect(stubStyle.display).toEqual('');
+      expect(stubStyle.color).toEqual('green');
+    });
+
+    it('should reject attribute key injection attack on markup for regular DOM (SSR)', () => {
+      for (let i = 0; i < 3; i++) {
+        const element1 = React.createElement(
+          'div',
+          {'blah" onclick="beevil" noise="hi': 'selected'},
+          null,
+        );
+        const element2 = React.createElement(
+          'div',
+          {'></div><script>alert("hi")</script>': 'selected'},
+          null,
+        );
+        const result1 = ReactDOMServer.renderToString(element1);
+        const result2 = ReactDOMServer.renderToString(element2);
+        expect(result1.toLowerCase()).not.toContain('onclick');
+        expect(result2.toLowerCase()).not.toContain('script');
+      }
+      assertConsoleErrorDev([
+        'Invalid attribute name: `blah" onclick="beevil" noise="hi`\n' +
+          '    in div (at **)',
+        'Invalid attribute name: `></div><script>alert("hi")</script>`\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should reject attribute key injection attack on markup for custom elements (SSR)', () => {
+      for (let i = 0; i < 3; i++) {
+        const element1 = React.createElement(
+          'x-foo-component',
+          {'blah" onclick="beevil" noise="hi': 'selected'},
+          null,
+        );
+        const element2 = React.createElement(
+          'x-foo-component',
+          {'></x-foo-component><script>alert("hi")</script>': 'selected'},
+          null,
+        );
+        const result1 = ReactDOMServer.renderToString(element1);
+        const result2 = ReactDOMServer.renderToString(element2);
+        expect(result1.toLowerCase()).not.toContain('onclick');
+        expect(result2.toLowerCase()).not.toContain('script');
+      }
+      assertConsoleErrorDev([
+        'Invalid attribute name: `blah" onclick="beevil" noise="hi`\n' +
+          '    in x-foo-component (at **)',
+        'Invalid attribute name: `></x-foo-component><script>alert("hi")</script>`\n' +
+          '    in x-foo-component (at **)',
+      ]);
+    });
+
+    it('should reject attribute key injection attack on mount for regular DOM', async () => {
+      for (let i = 0; i < 3; i++) {
+        const container = document.createElement('div');
+        let root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            React.createElement(
+              'div',
+              {'blah" onclick="beevil" noise="hi': 'selected'},
+              null,
+            ),
+          );
+        });
+
+        expect(container.firstChild.attributes.length).toBe(0);
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `blah" onclick="beevil" noise="hi`\n' +
+              '    in div (at **)',
+          ]);
+        }
+        await act(() => {
+          root.unmount();
+        });
+        root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            React.createElement(
+              'div',
+              {'></div><script>alert("hi")</script>': 'selected'},
+              null,
+            ),
+          );
+        });
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `></div><script>alert("hi")</script>`\n' +
+              '    in div (at **)',
+          ]);
+        }
+
+        expect(container.firstChild.attributes.length).toBe(0);
+      }
+    });
+
+    it('should reject attribute key injection attack on mount for custom elements', async () => {
+      for (let i = 0; i < 3; i++) {
+        const container = document.createElement('div');
+        let root = ReactDOMClient.createRoot(container);
+
+        await act(() => {
+          root.render(
+            React.createElement(
+              'x-foo-component',
+              {'blah" onclick="beevil" noise="hi': 'selected'},
+              null,
+            ),
+          );
+        });
+
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `blah" onclick="beevil" noise="hi`\n' +
+              '    in x-foo-component (at **)',
+          ]);
+        }
+        expect(container.firstChild.attributes.length).toBe(0);
+        await act(() => {
+          root.unmount();
+        });
+
+        root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            React.createElement(
+              'x-foo-component',
+              {'></x-foo-component><script>alert("hi")</script>': 'selected'},
+              null,
+            ),
+          );
+        });
+
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `></x-foo-component><script>alert("hi")</script>`\n' +
+              '    in x-foo-component (at **)',
+          ]);
+        }
+        expect(container.firstChild.attributes.length).toBe(0);
+      }
+    });
+
+    it('should reject attribute key injection attack on update for regular DOM', async () => {
+      for (let i = 0; i < 3; i++) {
+        const container = document.createElement('div');
+        const beforeUpdate = React.createElement('div', {}, null);
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(beforeUpdate);
+        });
+        await act(() => {
+          root.render(
+            React.createElement(
+              'div',
+              {'blah" onclick="beevil" noise="hi': 'selected'},
+              null,
+            ),
+          );
+        });
+
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `blah" onclick="beevil" noise="hi`\n' +
+              '    in div (at **)',
+          ]);
+        }
+        expect(container.firstChild.attributes.length).toBe(0);
+        await act(() => {
+          root.render(
+            React.createElement(
+              'div',
+              {'></div><script>alert("hi")</script>': 'selected'},
+              null,
+            ),
+          );
+        });
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `></div><script>alert("hi")</script>`\n' +
+              '    in div (at **)',
+          ]);
+        }
+
+        expect(container.firstChild.attributes.length).toBe(0);
+      }
+    });
+
+    it('should reject attribute key injection attack on update for custom elements', async () => {
+      for (let i = 0; i < 3; i++) {
+        const container = document.createElement('div');
+        const beforeUpdate = React.createElement('x-foo-component', {}, null);
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(beforeUpdate);
+        });
+        await act(() => {
+          root.render(
+            React.createElement(
+              'x-foo-component',
+              {'blah" onclick="beevil" noise="hi': 'selected'},
+              null,
+            ),
+          );
+        });
+
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `blah" onclick="beevil" noise="hi`\n' +
+              '    in x-foo-component (at **)',
+          ]);
+        }
+        expect(container.firstChild.attributes.length).toBe(0);
+        await act(() => {
+          root.render(
+            React.createElement(
+              'x-foo-component',
+              {'></x-foo-component><script>alert("hi")</script>': 'selected'},
+              null,
+            ),
+          );
+        });
+
+        if (i === 0) {
+          assertConsoleErrorDev([
+            'Invalid attribute name: `></x-foo-component><script>alert("hi")</script>`\n' +
+              '    in x-foo-component (at **)',
+          ]);
+        }
+        expect(container.firstChild.attributes.length).toBe(0);
+      }
+    });
+
+    it('should update arbitrary attributes for tags containing dashes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const beforeUpdate = React.createElement('x-foo-component', {}, null);
+      await act(() => {
+        root.render(beforeUpdate);
+      });
+
+      const afterUpdate = <x-foo-component myattr="myval" />;
+      await act(() => {
+        root.render(afterUpdate);
+      });
+
+      expect(container.childNodes[0].getAttribute('myattr')).toBe('myval');
+    });
+
+    it('should clear all the styles when removing `style`', async () => {
+      const styles = {display: 'none', color: 'red'};
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+
+      const stubStyle = container.firstChild.style;
+
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(stubStyle.display).toEqual('');
+      expect(stubStyle.color).toEqual('');
+    });
+
+    it('should update styles when `style` changes from null to object', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const styles = {color: 'red'};
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+      const stubStyle = container.firstChild.style;
+      expect(stubStyle.color).toBe('red');
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(stubStyle.color).toBe('');
+      await act(() => {
+        root.render(<div style={styles} />);
+      });
+
+      expect(stubStyle.color).toBe('red');
+    });
+
+    it('should not reset innerHTML for when children is null', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div />);
+      });
+      container.firstChild.innerHTML = 'bonjour';
+      expect(container.firstChild.innerHTML).toEqual('bonjour');
+
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(container.firstChild.innerHTML).toEqual('bonjour');
+    });
+
+    it('should reset innerHTML when switching from a direct text child to an empty child', async () => {
+      const transitionToValues = [null, undefined, false];
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const transitionToValue of transitionToValues) {
+        const container = document.createElement('div');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(<div>bonjour</div>);
+        });
+        expect(container.firstChild.innerHTML).toEqual('bonjour');
+
+        await act(() => {
+          root.render(<div>{transitionToValue}</div>);
+        });
+        expect(container.firstChild.innerHTML).toEqual('');
+      }
+    });
+
+    it('should empty element when removing innerHTML', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: ':)'}} />);
+      });
+
+      expect(container.firstChild.innerHTML).toEqual(':)');
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(container.firstChild.innerHTML).toEqual('');
+    });
+
+    it('should transition from string content to innerHTML', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div>hello</div>);
+      });
+
+      expect(container.firstChild.innerHTML).toEqual('hello');
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: 'goodbye'}} />);
+      });
+      expect(container.firstChild.innerHTML).toEqual('goodbye');
+    });
+
+    it('should transition from innerHTML to string content', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: 'bonjour'}} />);
+      });
+
+      expect(container.firstChild.innerHTML).toEqual('bonjour');
+      await act(() => {
+        root.render(<div>adieu</div>);
+      });
+      expect(container.firstChild.innerHTML).toEqual('adieu');
+    });
+
+    it('should transition from innerHTML to children in nested el', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <div dangerouslySetInnerHTML={{__html: 'bonjour'}} />
+          </div>,
+        );
+      });
+
+      expect(container.textContent).toEqual('bonjour');
+      await act(() => {
+        root.render(
+          <div>
+            <div>
+              <span>adieu</span>
+            </div>
+          </div>,
+        );
+      });
+      expect(container.textContent).toEqual('adieu');
+    });
+
+    it('should transition from children to innerHTML in nested el', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <div>
+              <span>adieu</span>
+            </div>
+          </div>,
+        );
+      });
+
+      expect(container.textContent).toEqual('adieu');
+      await act(() => {
+        root.render(
+          <div>
+            <div dangerouslySetInnerHTML={{__html: 'bonjour'}} />
+          </div>,
+        );
+      });
+      expect(container.textContent).toEqual('bonjour');
+    });
+
+    it('should not incur unnecessary DOM mutations for attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div id="" />);
+      });
+
+      const node = container.firstChild;
+      const nodeSetAttribute = node.setAttribute;
+      node.setAttribute = jest.fn();
+      node.setAttribute.mockImplementation(nodeSetAttribute);
+
+      const nodeRemoveAttribute = node.removeAttribute;
+      node.removeAttribute = jest.fn();
+      node.removeAttribute.mockImplementation(nodeRemoveAttribute);
+
+      await act(() => {
+        root.render(<div id="" />);
+      });
+      expect(node.setAttribute).toHaveBeenCalledTimes(0);
+      expect(node.removeAttribute).toHaveBeenCalledTimes(0);
+
+      await act(() => {
+        root.render(<div id="foo" />);
+      });
+      expect(node.setAttribute).toHaveBeenCalledTimes(1);
+      expect(node.removeAttribute).toHaveBeenCalledTimes(0);
+
+      await act(() => {
+        root.render(<div id="foo" />);
+      });
+      expect(node.setAttribute).toHaveBeenCalledTimes(1);
+      expect(node.removeAttribute).toHaveBeenCalledTimes(0);
+
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(node.setAttribute).toHaveBeenCalledTimes(1);
+      expect(node.removeAttribute).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<div id="" />);
+      });
+      expect(node.setAttribute).toHaveBeenCalledTimes(2);
+      expect(node.removeAttribute).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(node.setAttribute).toHaveBeenCalledTimes(2);
+      expect(node.removeAttribute).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not incur unnecessary DOM mutations for string properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div value="" />);
+      });
+
+      const node = container.firstChild;
+
+      const nodeValueSetter = jest.fn();
+
+      const oldSetAttribute = node.setAttribute.bind(node);
+      node.setAttribute = function (key, value) {
+        oldSetAttribute(key, value);
+        nodeValueSetter(key, value);
+      };
+
+      await act(() => {
+        root.render(<div value="foo" />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<div value="foo" />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<div value={null} />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<div value="" />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(2);
+
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not incur unnecessary DOM mutations for controlled string properties', async () => {
+      function onChange() {}
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input value="" onChange={onChange} />);
+      });
+
+      const node = container.firstChild;
+
+      let nodeValue = '';
+      const nodeValueSetter = jest.fn();
+      Object.defineProperty(node, 'value', {
+        get: function () {
+          return nodeValue;
+        },
+        set: nodeValueSetter.mockImplementation(function (newValue) {
+          nodeValue = newValue;
+        }),
+      });
+
+      await act(() => {
+        root.render(<input value="foo" onChange={onChange} />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(
+          <input value="foo" data-unrelated={true} onChange={onChange} />,
+        );
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<input onChange={onChange} />);
+      });
+      assertConsoleErrorDev([
+        'A component is changing a controlled input to be uncontrolled. This is likely caused by ' +
+          'the value changing from a defined to undefined, which should not happen. Decide between ' +
+          'using a controlled or uncontrolled input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)',
+      ]);
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<input value={null} onChange={onChange} />);
+      });
+      assertConsoleErrorDev([
+        '`value` prop on `input` should not be null. Consider using an empty string to clear the ' +
+          'component or `undefined` for uncontrolled components.\n' +
+          '    in input (at **)',
+      ]);
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        root.render(<input value="" onChange={onChange} />);
+      });
+      assertConsoleErrorDev([
+        'A component is changing an uncontrolled input to be controlled. This is likely caused by ' +
+          'the value changing from undefined to a defined value, which should not happen. Decide between ' +
+          'using a controlled or uncontrolled input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)',
+      ]);
+      expect(nodeValueSetter).toHaveBeenCalledTimes(2);
+
+      await act(() => {
+        root.render(<input onChange={onChange} />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not incur unnecessary DOM mutations for boolean properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<audio muted={true} />);
+      });
+
+      const node = container.firstChild;
+      let nodeValue = true;
+      const nodeValueSetter = jest.fn();
+      Object.defineProperty(node, 'muted', {
+        get: function () {
+          return nodeValue;
+        },
+        set: nodeValueSetter.mockImplementation(function (newValue) {
+          nodeValue = newValue;
+        }),
+      });
+
+      await act(() => {
+        root.render(<audio muted={true} data-unrelated="yes" />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(0);
+
+      await act(() => {
+        root.render(<audio muted={false} data-unrelated="ok" />);
+      });
+      expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+    });
+
+    it('should ignore attribute list for elements with the "is" attribute', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<button is="test" cowabunga="chevynova" />);
+      });
+      expect(container.firstChild.hasAttribute('cowabunga')).toBe(true);
+    });
+
+    it('should warn about non-string "is" attribute', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<button is={function () {}} />);
+      });
+      assertConsoleErrorDev([
+        'Received a `function` for a string attribute `is`. If this is expected, cast ' +
+          'the value to a string.\n' +
+          '    in button (at **)',
+      ]);
+    });
+
+    it('should not update when switching between null/undefined', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div />);
+      });
+
+      const setter = jest.fn();
+      container.firstChild.setAttribute = setter;
+
+      await act(() => {
+        root.render(<div dir={null} />);
+      });
+      await act(() => {
+        root.render(<div dir={undefined} />);
+      });
+      await act(() => {
+        root.render(<div />);
+      });
+      expect(setter).toHaveBeenCalledTimes(0);
+      await act(() => {
+        root.render(<div dir="ltr" />);
+      });
+      expect(setter).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles multiple child updates without interference', async () => {
+      // This test might look like it's just testing ReactMultiChild but the
+      // last bug in this was actually in DOMChildrenOperations so this test
+      // needs to be in some DOM-specific test file.
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      // ABCD
+      await act(() => {
+        root.render(
+          <div>
+            <div key="one">
+              <div key="A">A</div>
+              <div key="B">B</div>
+            </div>
+            <div key="two">
+              <div key="C">C</div>
+              <div key="D">D</div>
+            </div>
+          </div>,
+        );
+      });
+      // BADC
+      await act(() => {
+        root.render(
+          <div>
+            <div key="one">
+              <div key="B">B</div>
+              <div key="A">A</div>
+            </div>
+            <div key="two">
+              <div key="D">D</div>
+              <div key="C">C</div>
+            </div>
+          </div>,
+        );
+      });
+
+      expect(container.textContent).toBe('BADC');
+    });
+  });
+
+  describe('createOpenTagMarkup', () => {
+    function quoteRegexp(str) {
+      return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
+    }
+
+    function expectToHaveAttribute(actual, expected) {
+      const [attr, value] = expected;
+      let re = '(?:^|\\s)' + attr + '=[\\\'"]';
+      if (typeof value !== 'undefined') {
+        re += quoteRegexp(value) + '[\\\'"]';
+      }
+      expect(actual).toMatch(new RegExp(re));
+    }
+
+    function genMarkup(props) {
+      return ReactDOMServer.renderToString(<div {...props} />);
+    }
+
+    it('should generate the correct markup with className', () => {
+      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', () => {
+      expectToHaveAttribute(
+        genMarkup({
+          style: {'b&ckground': '<3'},
+        }),
+        ['style', 'b&amp;ckground:&lt;3'],
+      );
+    });
+  });
+
+  describe('createContentMarkup', () => {
+    function quoteRegexp(str) {
+      return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
+    }
+
+    function genMarkup(props) {
+      return ReactDOMServer.renderToString(<div {...props} />);
+    }
+
+    function toHaveInnerhtml(actual, expected) {
+      const re = quoteRegexp(expected);
+      return new RegExp(re).test(actual);
+    }
+
+    it('should handle dangerouslySetInnerHTML', () => {
+      const innerHTML = {__html: 'testContent'};
+      expect(
+        toHaveInnerhtml(
+          genMarkup({dangerouslySetInnerHTML: innerHTML}),
+          'testContent',
+        ),
+      ).toBe(true);
+    });
+  });
+
+  describe('mountComponent', () => {
+    let mountComponent;
+
+    beforeEach(() => {
+      mountComponent = async props => {
+        const container = document.createElement('div');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(<div {...props} />);
+        });
+      };
+    });
+
+    it('should work error event on <source> element', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <video>
+            <source
+              src="http://example.org/video"
+              type="video/mp4"
+              onError={e => Scheduler.log('onError called')}
+            />
+          </video>,
+        );
+      });
+
+      const errorEvent = document.createEvent('Event');
+      errorEvent.initEvent('error', false, false);
+      container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
+
+      if (__DEV__) {
+        assertLog(['onError called']);
+      }
+    });
+
+    it('should warn for uppercased selfclosing tags', () => {
+      class Container extends React.Component {
+        render() {
+          return React.createElement('BR', null);
+        }
+      }
+
+      const returnedValue = ReactDOMServer.renderToString(<Container />);
+      assertConsoleErrorDev([
+        '<BR /> is using incorrect casing. ' +
+          'Use PascalCase for React components, ' +
+          'or lowercase for HTML elements.\n' +
+          '    in BR (at **)\n' +
+          '    in Container (at **)',
+      ]);
+      // This includes a duplicate tag because we didn't treat this as self-closing.
+      expect(returnedValue).toContain('</BR>');
+    });
+
+    it('should warn on upper case HTML tags, not SVG nor custom tags', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          React.createElement('svg', null, React.createElement('PATH')),
+        );
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(React.createElement('CUSTOM-TAG'));
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(React.createElement('IMG'));
+      });
+      assertConsoleErrorDev([
+        '<IMG /> is using incorrect casing. ' +
+          'Use PascalCase for React components, ' +
+          'or lowercase for HTML elements.\n' +
+          '    in IMG (at **)',
+      ]);
+    });
+
+    it('should warn on props reserved for future use', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div aria="hello" />);
+      });
+      assertConsoleErrorDev([
+        'The `aria` attribute is reserved for future use in React. ' +
+          'Pass individual `aria-` attributes instead.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn if the tag is unrecognized', async () => {
+      let realToString;
+      try {
+        realToString = Object.prototype.toString;
+        const wrappedToString = function () {
+          // Emulate browser behavior which is missing in jsdom
+          if (this instanceof window.HTMLUnknownElement) {
+            return '[object HTMLUnknownElement]';
+          }
+          return realToString.apply(this, arguments);
+        };
+        Object.prototype.toString = wrappedToString; // eslint-disable-line no-extend-native
+
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+        await act(() => {
+          root.render(<bar />);
+        });
+        assertConsoleErrorDev([
+          'The tag <bar> is unrecognized in this browser. ' +
+            'If you meant to render a React component, start its name with an uppercase letter.\n' +
+            '    in bar (at **)',
+        ]);
+        // Test deduplication
+        await act(() => {
+          root.render(<foo />);
+        });
+        assertConsoleErrorDev([
+          'The tag <foo> is unrecognized in this browser. ' +
+            'If you meant to render a React component, start its name with an uppercase letter.\n' +
+            '    in foo (at **)',
+        ]);
+        await act(() => {
+          root.render(<foo />);
+        });
+        await act(() => {
+          root.render(<time />);
+        });
+
+        // Corner case. Make sure out deduplication logic doesn't break with weird tag.
+        await act(() => {
+          root.render(<hasOwnProperty />);
+        });
+        assertConsoleErrorDev([
+          '<hasOwnProperty /> is using incorrect casing. ' +
+            'Use PascalCase for React components, or lowercase for HTML elements.\n' +
+            '    in hasOwnProperty (at **)',
+          'The tag <hasOwnProperty> is unrecognized in this browser. ' +
+            'If you meant to render a React component, start its name with an uppercase letter.\n' +
+            '    in hasOwnProperty (at **)',
+        ]);
+      } finally {
+        Object.prototype.toString = realToString; // eslint-disable-line no-extend-native
+      }
+    });
+
+    it('should throw on children for void elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await act(() => {
+          root.render(<input>children</input>);
+        });
+      }).rejects.toThrowError(
+        'input is a void element tag and must neither have `children` nor ' +
+          'use `dangerouslySetInnerHTML`.',
+      );
+    });
+
+    it('should throw on dangerouslySetInnerHTML for void elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await act(() => {
+          root.render(<input dangerouslySetInnerHTML={{__html: 'content'}} />);
+        });
+      }).rejects.toThrowError(
+        'input is a void element tag and must neither have `children` nor ' +
+          'use `dangerouslySetInnerHTML`.',
+      );
+    });
+
+    it('should treat menuitem as a void element but still create the closing tag', async () => {
+      // menuitem is not implemented in jsdom, so this triggers the unknown warning error
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const returnedValue = ReactDOMServer.renderToString(
+        <menu>
+          <menuitem />
+        </menu>,
+      );
+
+      expect(returnedValue).toContain('</menuitem>');
+
+      await expect(async () => {
+        await act(() => {
+          root.render(
+            <menu>
+              <menuitem>children</menuitem>
+            </menu>,
+          );
+        });
+      }).rejects.toThrowError(
+        'menuitem is a void element tag and must neither have `children` nor use ' +
+          '`dangerouslySetInnerHTML`.',
+      );
+      assertConsoleErrorDev([
+        'The tag <menuitem> is unrecognized in this browser. ' +
+          'If you meant to render a React component, start its name with an uppercase letter.\n' +
+          '    in menuitem (at **)',
+      ]);
+    });
+
+    it('should validate against multiple children props', async () => {
+      await expect(async () => {
+        await mountComponent({children: '', dangerouslySetInnerHTML: ''});
+      }).rejects.toThrowError(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://react.dev/link/dangerously-set-inner-html for more information.',
+      );
+    });
+
+    it('should validate against use of innerHTML', async () => {
+      await mountComponent({innerHTML: '<span>Hi Jim!</span>'});
+      assertConsoleErrorDev([
+        'Directly setting property `innerHTML` is not permitted. ' +
+          'For more information, lookup documentation on `dangerouslySetInnerHTML`.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should validate against use of innerHTML without case sensitivity', async () => {
+      await mountComponent({innerhtml: '<span>Hi Jim!</span>'});
+      assertConsoleErrorDev([
+        'Directly setting property `innerHTML` is not permitted. ' +
+          'For more information, lookup documentation on `dangerouslySetInnerHTML`.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should validate use of dangerouslySetInnerHTM with JSX', async () => {
+      await expect(async () => {
+        await mountComponent({dangerouslySetInnerHTML: '<span>Hi Jim!</span>'});
+      }).rejects.toThrowError(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://react.dev/link/dangerously-set-inner-html for more information.',
+      );
+    });
+
+    it('should validate use of dangerouslySetInnerHTML with object', async () => {
+      await expect(async () => {
+        await mountComponent({dangerouslySetInnerHTML: {foo: 'bar'}});
+      }).rejects.toThrowError(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://react.dev/link/dangerously-set-inner-html for more information.',
+      );
+    });
+
+    it('should allow {__html: null}', async () => {
+      await expect(async () => {
+        await mountComponent({dangerouslySetInnerHTML: {__html: null}});
+      }).not.toThrow();
+    });
+
+    it('should warn about contentEditable and children', async () => {
+      await mountComponent({contentEditable: true, children: ''});
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should respect suppressContentEditableWarning', async () => {
+      await mountComponent({
+        contentEditable: true,
+        children: '',
+        suppressContentEditableWarning: true,
+      });
+    });
+
+    it('should validate against invalid styles', async () => {
+      await expect(async () => {
+        await mountComponent({style: 'display: none'});
+      }).rejects.toThrowError(
+        'The `style` prop expects a mapping from style properties to values, ' +
+          "not a string. For example, style={{marginRight: spacing + 'em'}} " +
+          'when using JSX.',
+      );
+    });
+
+    it('should throw for children on void elements', async () => {
+      class X extends React.Component {
+        render() {
+          return <input>moo</input>;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await act(() => {
+          root.render(<X />);
+        });
+      }).rejects.toThrowError(
+        'input is a void element tag and must neither have `children` ' +
+          'nor use `dangerouslySetInnerHTML`.',
+      );
+    });
+
+    it('should support custom elements which extend native elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      spyOnDevAndProd(document, 'createElement');
+      await act(() => {
+        root.render(<div is="custom-div" />);
+      });
+      expect(document.createElement).toHaveBeenCalledWith('div', {
+        is: 'custom-div',
+      });
+    });
+
+    it('should work load and error events on <image> element in SVG', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <svg>
+            <image
+              xlinkHref="http://example.org/image"
+              onError={e => Scheduler.log('onError called')}
+              onLoad={e => Scheduler.log('onLoad called')}
+            />
+          </svg>,
+        );
+      });
+
+      const loadEvent = document.createEvent('Event');
+      const errorEvent = document.createEvent('Event');
+
+      loadEvent.initEvent('load', false, false);
+      errorEvent.initEvent('error', false, false);
+
+      container.getElementsByTagName('image')[0].dispatchEvent(errorEvent);
+      container.getElementsByTagName('image')[0].dispatchEvent(loadEvent);
+
+      if (__DEV__) {
+        assertLog(['onError called', 'onLoad called']);
+      }
+    });
+
+    it('should receive a load event on <link> elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const onLoad = jest.fn();
+
+      await act(() => {
+        root.render(<link href="http://example.org/link" onLoad={onLoad} />);
+      });
+
+      const loadEvent = document.createEvent('Event');
+      const link = container.getElementsByTagName('link')[0];
+
+      loadEvent.initEvent('load', false, false);
+      link.dispatchEvent(loadEvent);
+
+      expect(onLoad).toHaveBeenCalledTimes(1);
+    });
+
+    it('should receive an error event on <link> elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const onError = jest.fn();
+
+      await act(() => {
+        root.render(<link href="http://example.org/link" onError={onError} />);
+      });
+
+      const errorEvent = document.createEvent('Event');
+      const link = container.getElementsByTagName('link')[0];
+
+      errorEvent.initEvent('error', false, false);
+      link.dispatchEvent(errorEvent);
+
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('updateComponent', () => {
+    let container;
+    let root;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+    });
+
+    it('should warn against children for void elements', async () => {
+      await act(() => {
+        root.render(<input />);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<input>children</input>);
+        });
+      }).rejects.toThrowError(
+        'input is a void element tag and must neither have `children` nor use ' +
+          '`dangerouslySetInnerHTML`.',
+      );
+    });
+
+    it('should warn against dangerouslySetInnerHTML for void elements', async () => {
+      await act(() => {
+        root.render(<input />);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<input dangerouslySetInnerHTML={{__html: 'content'}} />);
+        });
+      }).rejects.toThrowError(
+        'input is a void element tag and must neither have `children` nor use ' +
+          '`dangerouslySetInnerHTML`.',
+      );
+    });
+
+    it('should validate against multiple children props', async () => {
+      await act(() => {
+        root.render(<div />);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          root.render(
+            <div children="" dangerouslySetInnerHTML={{__html: ''}} />,
+          );
+        });
+      }).rejects.toThrowError(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    });
+
+    it('should warn about contentEditable and children', async () => {
+      await act(() => {
+        root.render(
+          <div contentEditable={true}>
+            <div />
+          </div>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should validate against invalid styles', async () => {
+      await act(() => {
+        root.render(<div />);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<div style={1} />);
+        });
+      }).rejects.toThrowError(
+        'The `style` prop expects a mapping from style properties to values, ' +
+          "not a string. For example, style={{marginRight: spacing + 'em'}} " +
+          'when using JSX.',
+      );
+    });
+
+    it('should report component containing invalid styles', async () => {
+      class Animal extends React.Component {
+        render() {
+          return <div style={1} />;
+        }
+      }
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<Animal />);
+        });
+      }).rejects.toThrowError(
+        'The `style` prop expects a mapping from style properties to values, ' +
+          "not a string. For example, style={{marginRight: spacing + 'em'}} " +
+          'when using JSX.',
+      );
+    });
+
+    it('should properly escape text content and attributes values', () => {
+      expect(
+        ReactDOMServer.renderToStaticMarkup(
+          React.createElement(
+            'div',
+            {
+              title: '\'"<>&',
+              style: {
+                textAlign: '\'"<>&',
+              },
+            },
+            '\'"<>&',
+          ),
+        ),
+      ).toBe(
+        '<div title="&#x27;&quot;&lt;&gt;&amp;" style="text-align:&#x27;&quot;&lt;&gt;&amp;">' +
+          '&#x27;&quot;&lt;&gt;&amp;' +
+          '</div>',
+      );
+    });
+  });
+
+  describe('unmountComponent', () => {
+    it('unmounts children before unsetting DOM node info', async () => {
+      class Inner extends React.Component {
+        render() {
+          return <span />;
+        }
+
+        componentWillUnmount() {
+          // Should not throw
+          expect(
+            ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+              this,
+            ).nodeName,
+          ).toBe('SPAN');
+        }
+      }
+
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => {
+        root.render(
+          <div>
+            <Inner />
+          </div>,
+        );
+      });
+      await act(() => {
+        root.unmount();
+      });
+    });
+  });
+
+  describe('tag sanitization', () => {
+    it('should throw when an invalid tag name is used server-side', () => {
+      const hackzor = React.createElement('script tag');
+      expect(() => ReactDOMServer.renderToString(hackzor)).toThrowError(
+        'Invalid tag: script tag',
+      );
+    });
+
+    it('should throw when an attack vector is used server-side', () => {
+      const hackzor = React.createElement('div><img /><div');
+      expect(() => ReactDOMServer.renderToString(hackzor)).toThrowError(
+        'Invalid tag: div><img /><div',
+      );
+    });
+
+    it('should throw when an invalid tag name is used', async () => {
+      const hackzor = React.createElement('script tag');
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(hackzor);
+        }),
+      ).rejects.toThrow();
+    });
+
+    it('should throw when an attack vector is used', async () => {
+      const hackzor = React.createElement('div><img /><div');
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(hackzor);
+        }),
+      ).rejects.toThrow();
+    });
+  });
+
+  describe('nesting validation', () => {
+    it('warns on invalid nesting', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <tr />
+            <tr />
+          </div>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of <div>.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '> <div>\n' +
+          '>   <tr>\n' +
+          '    ...\n' +
+          '\n    in tr (at **)',
+      ]);
+    });
+
+    it('warns on invalid nesting at root', async () => {
+      const p = document.createElement('p');
+      const root = ReactDOMClient.createRoot(p);
+
+      await act(() => {
+        root.render(
+          <span>
+            <p />
+          </span>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, <p> cannot be a descendant of <p>.\n' +
+          'This will cause a hydration error.' +
+          // There is no outer `p` here because root container is not part of the stack.
+          '\n    in p (at **)',
+      ]);
+    });
+
+    it('warns nicely for table rows', async () => {
+      class Row extends React.Component {
+        render() {
+          return <tr>x</tr>;
+        }
+      }
+
+      class Foo extends React.Component {
+        render() {
+          return (
+            <table>
+              <Row />{' '}
+            </table>
+          );
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<Foo />);
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of ' +
+          '<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +
+          'by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <Foo>\n' +
+          '>   <table>\n' +
+          '      <Row>\n' +
+          '>       <tr>\n' +
+          '      ...\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)' +
+          '\n    in Foo (at **)',
+        '<table> cannot contain a nested <tr>.\nSee this log for the ancestor stack trace.' +
+          '\n    in table (at **)' +
+          '\n    in Foo (at **)',
+        'In HTML, text nodes cannot be a ' +
+          'child of <tr>.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <Foo>\n' +
+          '    <table>\n' +
+          '      <Row>\n' +
+          '        <tr>\n' +
+          '>         x\n' +
+          '      ...\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)' +
+          '\n    in Foo (at **)',
+        'In HTML, whitespace text nodes cannot ' +
+          "be a child of <table>. Make sure you don't have any extra " +
+          'whitespace between tags on each line of your source code.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <Foo>\n' +
+          '>   <table>\n' +
+          '      <Row>\n' +
+          '>     {" "}\n' +
+          '\n    in table (at **)' +
+          '\n    in Foo (at **)',
+      ]);
+    });
+
+    it('warns nicely for updating table rows to use text', async () => {
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+      function Row({children}) {
+        return <tr>{children}</tr>;
+      }
+
+      function Foo({children}) {
+        return <table>{children}</table>;
+      }
+
+      // First is fine.
+      await act(() => {
+        root.render(<Foo />);
+      });
+
+      await act(() => {
+        root.render(<Foo> </Foo>);
+      });
+      assertConsoleErrorDev([
+        'In HTML, whitespace text nodes cannot ' +
+          "be a child of <table>. Make sure you don't have any extra " +
+          'whitespace between tags on each line of your source code.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <Foo>\n' +
+          '    <table>\n' +
+          '>     {" "}\n' +
+          '\n    in table (at **)' +
+          '\n    in Foo (at **)',
+      ]);
+
+      await act(() => {
+        root.render(
+          <Foo>
+            <tbody>
+              <Row />
+            </tbody>
+          </Foo>,
+        );
+      });
+
+      await act(() => {
+        root.render(
+          <Foo>
+            <tbody>
+              <Row>text</Row>
+            </tbody>
+          </Foo>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, text nodes cannot be a ' +
+          'child of <tr>.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <Foo>\n' +
+          '    <table>\n' +
+          '      <tbody>\n' +
+          '        <Row>\n' +
+          '          <tr>\n' +
+          '>           text\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)',
+      ]);
+    });
+
+    it('gives useful context in warnings', async () => {
+      function Row() {
+        return <tr />;
+      }
+      function FancyRow() {
+        return <Row />;
+      }
+
+      function Viz1() {
+        return (
+          <table>
+            <FancyRow />
+          </table>
+        );
+      }
+      function App1() {
+        return <Viz1 />;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<App1 />);
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of <table>. ' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <App1>\n' +
+          '    <Viz1>\n' +
+          '>     <table>\n' +
+          '        <FancyRow>\n' +
+          '          <Row>\n' +
+          '>           <tr>\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)' +
+          '\n    in FancyRow (at **)' +
+          '\n    in Viz1 (at **)' +
+          '\n    in App1 (at **)',
+        '<table> cannot contain a nested <tr>.\n' +
+          'See this log for the ancestor stack trace.\n' +
+          '    in table (at **)\n' +
+          '    in Viz1 (at **)\n' +
+          '    in App1 (at **)',
+      ]);
+    });
+
+    it('gives useful context in warnings 2', async () => {
+      function Row() {
+        return <tr />;
+      }
+      function FancyRow() {
+        return <Row />;
+      }
+
+      class Table extends React.Component {
+        render() {
+          return <table>{this.props.children}</table>;
+        }
+      }
+
+      class FancyTable extends React.Component {
+        render() {
+          return <Table>{this.props.children}</Table>;
+        }
+      }
+
+      function Viz2() {
+        return (
+          <FancyTable>
+            <FancyRow />
+          </FancyTable>
+        );
+      }
+      function App2() {
+        return <Viz2 />;
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<App2 />);
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of <table>. ' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <App2>\n' +
+          '    <Viz2>\n' +
+          '      <FancyTable>\n' +
+          '        <Table>\n' +
+          '>         <table>\n' +
+          '            <FancyRow>\n' +
+          '              <Row>\n' +
+          '>               <tr>\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)' +
+          '\n    in FancyRow (at **)' +
+          '\n    in Viz2 (at **)' +
+          '\n    in App2 (at **)',
+        '<table> cannot contain a nested <tr>.\n' +
+          'See this log for the ancestor stack trace.\n' +
+          '    in table (at **)\n' +
+          '    in Table (at **)\n' +
+          '    in FancyTable (at **)\n' +
+          '    in Viz2 (at **)\n' +
+          '    in App2 (at **)',
+      ]);
+    });
+
+    it('gives useful context in warnings 3', async () => {
+      function Row() {
+        return <tr />;
+      }
+      function FancyRow() {
+        return <Row />;
+      }
+
+      class Table extends React.Component {
+        render() {
+          return <table>{this.props.children}</table>;
+        }
+      }
+
+      class FancyTable extends React.Component {
+        render() {
+          return <Table>{this.props.children}</Table>;
+        }
+      }
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <FancyTable>
+            <FancyRow />
+          </FancyTable>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of <table>. ' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <FancyTable>\n' +
+          '    <Table>\n' +
+          '>     <table>\n' +
+          '        <FancyRow>\n' +
+          '          <Row>\n' +
+          '>           <tr>\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)' +
+          '\n    in FancyRow (at **)',
+        '<table> cannot contain a nested <tr>.\n' +
+          'See this log for the ancestor stack trace.' +
+          '\n    in table (at **)' +
+          '\n    in Table (at **)' +
+          '\n    in FancyTable (at **)',
+      ]);
+    });
+
+    it('gives useful context in warnings 4', async () => {
+      function Row() {
+        return <tr />;
+      }
+      function FancyRow() {
+        return <Row />;
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <table>
+            <FancyRow />
+          </table>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of <table>. ' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '> <table>\n' +
+          '    <FancyRow>\n' +
+          '      <Row>\n' +
+          '>       <tr>\n' +
+          '\n    in tr (at **)' +
+          '\n    in Row (at **)' +
+          '\n    in FancyRow (at **)',
+        '<table> cannot contain a nested <tr>.\n' +
+          'See this log for the ancestor stack trace.' +
+          '\n    in table (at **)',
+      ]);
+    });
+
+    it('gives useful context in warnings 5', async () => {
+      class Table extends React.Component {
+        render() {
+          return <table>{this.props.children}</table>;
+        }
+      }
+
+      class FancyTable extends React.Component {
+        render() {
+          return <Table>{this.props.children}</Table>;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <FancyTable>
+            <tr />
+          </FancyTable>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, <tr> cannot be a child of <table>. ' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <FancyTable>\n' +
+          '    <Table>\n' +
+          '>     <table>\n' +
+          '>       <tr>\n' +
+          '\n    in tr (at **)',
+        '<table> cannot contain a nested <tr>.\n' +
+          'See this log for the ancestor stack trace.' +
+          '\n    in table (at **)' +
+          '\n    in Table (at **)' +
+          '\n    in FancyTable (at **)',
+      ]);
+
+      class Link extends React.Component {
+        render() {
+          return <a>{this.props.children}</a>;
+        }
+      }
+
+      await act(() => {
+        root.render(
+          <Link>
+            <div>
+              <Link />
+            </div>
+          </Link>,
+        );
+      });
+      assertConsoleErrorDev([
+        'In HTML, <a> cannot be a descendant of <a>.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <Link>\n' +
+          '>   <a>\n' +
+          '      <div>\n' +
+          '        <Link>\n' +
+          '>         <a>\n' +
+          '\n    in a (at **)' +
+          '\n    in Link (at **)',
+        '<a> cannot contain a nested <a>.\n' +
+          'See this log for the ancestor stack trace.' +
+          '\n    in a (at **)' +
+          '\n    in Link (at **)',
+      ]);
+    });
+
+    it('should warn about incorrect casing on properties (ssr)', () => {
+      ReactDOMServer.renderToString(
+        React.createElement('input', {type: 'text', tabindex: '1'}),
+      );
+      assertConsoleErrorDev([
+        'Invalid DOM property `tabindex`. Did you mean `tabIndex`?\n' +
+          '    in input (at **)',
+      ]);
+    });
+
+    it('should warn about incorrect casing on event handlers (ssr)', () => {
+      ReactDOMServer.renderToString(
+        React.createElement('input', {type: 'text', oninput: '1'}),
+      );
+      assertConsoleErrorDev([
+        'Invalid event handler property `oninput`. ' +
+          'React events use the camelCase naming convention, ' +
+          // Note: we don't know the right event name so we
+          // use a generic one (onClick) as a suggestion.
+          // This is because we don't bundle the event system
+          // on the server.
+          'for example `onClick`.\n' +
+          '    in input (at **)',
+      ]);
+      ReactDOMServer.renderToString(
+        React.createElement('input', {type: 'text', onKeydown: '1'}),
+      );
+      // We can't warn for `onKeydown` on the server because
+      // there is no way tell if this is a valid event or not
+      // without access to the event system (which we don't bundle).
+    });
+
+    it('should warn about incorrect casing on properties', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          React.createElement('input', {type: 'text', tabindex: '1'}),
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `tabindex`. Did you mean `tabIndex`?\n' +
+          '    in input (at **)',
+      ]);
+    });
+
+    it('should warn about incorrect casing on event handlers', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(React.createElement('input', {type: 'text', oninput: '1'}));
+      });
+      assertConsoleErrorDev([
+        'Invalid event handler property `oninput`. Did you mean `onInput`?\n' +
+          '    in input (at **)',
+      ]);
+
+      await act(() => {
+        root.render(
+          React.createElement('input', {type: 'text', onKeydown: '1'}),
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid event handler property `onKeydown`. Did you mean `onKeyDown`?\n' +
+          '    in input (at **)',
+      ]);
+    });
+
+    it('should warn about class', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(React.createElement('div', {class: 'muffins'}));
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn about class (ssr)', () => {
+      ReactDOMServer.renderToString(
+        React.createElement('div', {class: 'muffins'}),
+      );
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn about props that are no longer supported', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div />);
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div onFocusIn={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onFocusOut={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn about props that are no longer supported without case sensitivity', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div />);
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onfocusin={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onfocusout={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn about props that are no longer supported (ssr)', () => {
+      ReactDOMServer.renderToString(<div />);
+      ReactDOMServer.renderToString(<div onFocusIn={() => {}} />);
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+      ReactDOMServer.renderToString(<div onFocusOut={() => {}} />);
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn about props that are no longer supported without case sensitivity (ssr)', () => {
+      ReactDOMServer.renderToString(<div />);
+      ReactDOMServer.renderToString(<div onfocusin={() => {}} />);
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+      ReactDOMServer.renderToString(<div onfocusout={() => {}} />);
+      assertConsoleErrorDev([
+        '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.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div class="paladin" />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input type="text" onclick="1" />);
+      });
+      assertConsoleErrorDev([
+        'Invalid event handler property `onclick`. Did you mean ' +
+          '`onClick`?\n' +
+          '    in input (at **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning (ssr)', () => {
+      ReactDOMServer.renderToString(<div class="paladin" />);
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+      ReactDOMServer.renderToString(<input type="text" oninput="1" />);
+      assertConsoleErrorDev([
+        'Invalid event handler property `oninput`. ' +
+          // Note: we don't know the right event name so we
+          // use a generic one (onClick) as a suggestion.
+          // This is because we don't bundle the event system
+          // on the server.
+          'React events use the camelCase naming convention, for example `onClick`.\n' +
+          '    in input (at **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning for update render', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div className="paladin" />);
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div class="paladin" />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning for exact elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div className="foo1">
+            <span class="foo2" />
+            <div onClick={() => {}} />
+            <strong onclick={() => {}} />
+            <div className="foo5" />
+            <div className="foo6" />
+          </div>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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 **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning for exact elements (ssr)', () => {
+      ReactDOMServer.renderToString(
+        <div className="foo1">
+          <span class="foo2" />
+          <div onClick="foo3" />
+          <strong onclick="foo4" />
+          <div className="foo5" />
+          <div className="foo6" />
+        </div>,
+      );
+      assertConsoleErrorDev([
+        '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`.\n' +
+          '    in strong (at **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning for exact elements in composition', async () => {
+      class Parent extends React.Component {
+        render() {
+          return (
+            <div>
+              <Child1 />
+              <Child2 />
+              <Child3 />
+              <Child4 />
+            </div>
+          );
+        }
+      }
+
+      class Child1 extends React.Component {
+        render() {
+          return <span class="paladin">Child1</span>;
+        }
+      }
+
+      class Child2 extends React.Component {
+        render() {
+          return <div>Child2</div>;
+        }
+      }
+
+      class Child3 extends React.Component {
+        render() {
+          return <strong onclick="1">Child3</strong>;
+        }
+      }
+
+      class Child4 extends React.Component {
+        render() {
+          return <div>Child4</div>;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Parent />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in span (at **)\n' +
+          '    in Child1 (at **)\n' +
+          '    in Parent (at **)',
+        'Invalid event handler property `onclick`. Did you mean `onClick`?\n' +
+          '    in strong (at **)\n' +
+          '    in Child3 (at **)\n' +
+          '    in Parent (at **)',
+      ]);
+    });
+
+    it('gives source code refs for unknown prop warning for exact elements in composition (ssr)', () => {
+      const container = document.createElement('div');
+
+      class Parent extends React.Component {
+        render() {
+          return (
+            <div>
+              <Child1 />
+              <Child2 />
+              <Child3 />
+              <Child4 />
+            </div>
+          );
+        }
+      }
+
+      class Child1 extends React.Component {
+        render() {
+          return <span class="paladin">Child1</span>;
+        }
+      }
+
+      class Child2 extends React.Component {
+        render() {
+          return <div>Child2</div>;
+        }
+      }
+
+      class Child3 extends React.Component {
+        render() {
+          return <strong onclick="1">Child3</strong>;
+        }
+      }
+
+      class Child4 extends React.Component {
+        render() {
+          return <div>Child4</div>;
+        }
+      }
+
+      ReactDOMServer.renderToString(<Parent />, container);
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in span (at **)\n' +
+          '    in Child1 (at **)\n' +
+          '    in Parent (at **)',
+        'Invalid event handler property `onclick`. ' +
+          'React events use the camelCase naming convention, for example `onClick`.\n' +
+          '    in strong (at **)\n' +
+          '    in Child3 (at **)\n' +
+          '    in Parent (at **)',
+      ]);
+    });
+
+    it('should suggest property name if available', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(React.createElement('label', {for: 'test'}));
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `for`. Did you mean `htmlFor`?\n' +
+          '    in label',
+      ]);
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          React.createElement('input', {type: 'text', autofocus: true}),
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n    in input',
+      ]);
+    });
+
+    it('should suggest property name if available (ssr)', () => {
+      ReactDOMServer.renderToString(
+        React.createElement('label', {for: 'test'}),
+      );
+      assertConsoleErrorDev([
+        'Invalid DOM property `for`. Did you mean `htmlFor`?\n' +
+          '    in label',
+      ]);
+      ReactDOMServer.renderToString(
+        React.createElement('input', {type: 'text', autofocus: true}),
+      );
+      assertConsoleErrorDev([
+        'Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n' +
+          '    in input',
+      ]);
+    });
+  });
+
+  describe('whitespace', () => {
+    it('renders innerHTML and preserves whitespace', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const html = '\n  \t  <span>  \n  testContent  \t  </span>  \n  \t';
+      const elem = <div dangerouslySetInnerHTML={{__html: html}} />;
+
+      await act(() => {
+        root.render(elem);
+      });
+      expect(container.firstChild.innerHTML).toBe(html);
+    });
+
+    it('render and then updates innerHTML and preserves whitespace', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const html = '\n  \t  <span>  \n  testContent1  \t  </span>  \n  \t';
+      const elem = <div dangerouslySetInnerHTML={{__html: html}} />;
+      await act(() => {
+        root.render(elem);
+      });
+
+      const html2 = '\n  \t  <div>  \n  testContent2  \t  </div>  \n  \t';
+      const elem2 = <div dangerouslySetInnerHTML={{__html: html2}} />;
+      await act(() => {
+        root.render(elem2);
+      });
+
+      expect(container.firstChild.innerHTML).toBe(html2);
+    });
+  });
+
+  describe('Attributes with aliases', function () {
+    it('sets aliased attributes on HTML attributes', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div class="test" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `class`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.className).toBe('test');
+    });
+
+    it('sets incorrectly cased aliased attributes on HTML attributes with a warning', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div cLASS="test" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `cLASS`. Did you mean `className`?\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.className).toBe('test');
+    });
+
+    it('sets aliased attributes on SVG elements with a warning', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <svg ref={current => (el = current)}>
+            <text arabic-form="initial" />
+          </svg>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `arabic-form`. Did you mean `arabicForm`?\n' +
+          '    in text (at **)',
+      ]);
+      const text = el.querySelector('text');
+
+      expect(text.hasAttribute('arabic-form')).toBe(true);
+    });
+
+    it('sets aliased attributes on custom elements', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div is="custom-element" class="test" />);
+      });
+
+      const el = container.firstChild;
+      expect(el.getAttribute('class')).toBe('test');
+    });
+
+    it('aliased attributes on custom elements with bad casing', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div is="custom-element" claSS="test" />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('class')).toBe('test');
+    });
+
+    it('updates aliased attributes on custom elements', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div is="custom-element" class="foo" />);
+      });
+      await act(() => {
+        root.render(<div is="custom-element" class="bar" />);
+      });
+
+      expect(container.firstChild.getAttribute('class')).toBe('bar');
+    });
+  });
+
+  describe('Custom attributes', function () {
+    it('allows assignment of custom attributes with string values', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div whatever="30" />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('whatever')).toBe('30');
+    });
+
+    it('removes custom attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div whatever="30" />);
+      });
+
+      expect(container.firstChild.getAttribute('whatever')).toBe('30');
+
+      await act(() => {
+        root.render(<div whatever={null} />);
+      });
+
+      expect(container.firstChild.hasAttribute('whatever')).toBe(false);
+    });
+
+    it('does not assign a boolean custom attributes as a string', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div whatever={true} ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        '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()}.\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.hasAttribute('whatever')).toBe(false);
+    });
+
+    it('does not assign an implicit boolean custom attributes', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          // eslint-disable-next-line react/jsx-boolean-value
+          <div whatever ref={current => (el = current)} />,
+        );
+      });
+      assertConsoleErrorDev([
+        '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()}.\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.hasAttribute('whatever')).toBe(false);
+    });
+
+    it('assigns a numeric custom attributes as a string', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div whatever={3} />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('whatever')).toBe('3');
+    });
+
+    it('will not assign a function custom attributes', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <div whatever={() => {}} ref={current => (el = current)} />,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `whatever` 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://react.dev/link/attribute-behavior \n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.hasAttribute('whatever')).toBe(false);
+    });
+
+    it('will assign an object custom attributes', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div whatever={{}} />);
+      });
+
+      const el = container.firstChild;
+      expect(el.getAttribute('whatever')).toBe('[object Object]');
+    });
+
+    it('allows Temporal-like objects as HTML (they are not coerced to strings first)', async () => {
+      class TemporalLike {
+        valueOf() {
+          // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+          // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+          throw new TypeError('prod message');
+        }
+        toString() {
+          return '2020-01-01';
+        }
+      }
+
+      // `dangerouslySetInnerHTML` is never coerced to a string, so won't throw
+      // even with a Temporal-like object.
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div dangerouslySetInnerHTML={{__html: new TemporalLike()}} />,
+        );
+      });
+      expect(container.firstChild.innerHTML).toEqual('2020-01-01');
+    });
+
+    it('allows cased data attributes', async () => {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div data-fooBar="true" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        '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. ' +
+          'If you accidentally passed it from a parent component, remove ' +
+          'it from the DOM element.\n' +
+          '    in div (at **)',
+      ]);
+      expect(el.getAttribute('data-foobar')).toBe('true');
+    });
+
+    it('allows cased custom attributes', async () => {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div fooBar="true" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        '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. ' +
+          'If you accidentally passed it from a parent component, remove ' +
+          'it from the DOM element.\n' +
+          '    in div (at **)',
+      ]);
+      expect(el.getAttribute('foobar')).toBe('true');
+    });
+
+    it('warns on NaN attributes', async () => {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div whatever={NaN} ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        'Received NaN for the `whatever` attribute. If this is ' +
+          'expected, cast the value to a string.\n' +
+          '    in div',
+      ]);
+
+      expect(el.getAttribute('whatever')).toBe('NaN');
+    });
+
+    it('removes a property when it becomes invalid', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div whatever={0} />);
+      });
+      await act(() => {
+        root.render(<div whatever={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `whatever` 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://react.dev/link/attribute-behavior \n' +
+          '    in div (at **)',
+      ]);
+      const el = container.firstChild;
+      expect(el.hasAttribute('whatever')).toBe(false);
+    });
+
+    it('warns on bad casing of known HTML attributes', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div SiZe="30" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `SiZe`. Did you mean `size`?\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.getAttribute('size')).toBe('30');
+    });
+  });
+
+  describe('Object stringification', function () {
+    it('allows objects on known properties', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div acceptCharset={{}} />);
+      });
+
+      const el = container.firstChild;
+      expect(el.getAttribute('accept-charset')).toBe('[object Object]');
+    });
+
+    it('should pass objects as attributes if they define toString', async () => {
+      const obj = {
+        toString() {
+          return 'hello';
+        },
+      };
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<img src={obj} />);
+      });
+      expect(container.firstChild.src).toBe('http://localhost/hello');
+
+      await act(() => {
+        root.render(<svg arabicForm={obj} />);
+      });
+      expect(container.firstChild.getAttribute('arabic-form')).toBe('hello');
+
+      await act(() => {
+        root.render(<div unknown={obj} />);
+      });
+      expect(container.firstChild.getAttribute('unknown')).toBe('hello');
+    });
+
+    it('passes objects on known SVG attributes if they do not define toString', async () => {
+      const obj = {};
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<svg arabicForm={obj} />);
+      });
+      expect(container.firstChild.getAttribute('arabic-form')).toBe(
+        '[object Object]',
+      );
+    });
+
+    it('passes objects on custom attributes if they do not define toString', async () => {
+      const obj = {};
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div unknown={obj} />);
+      });
+      expect(container.firstChild.getAttribute('unknown')).toBe(
+        '[object Object]',
+      );
+    });
+
+    it('allows objects that inherit a custom toString method', async function () {
+      const parent = {toString: () => 'hello.jpg'};
+      const child = Object.create(parent);
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<img src={child} />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.src).toBe('http://localhost/hello.jpg');
+    });
+
+    it('assigns ajaxify (an important internal FB attribute)', async function () {
+      const options = {toString: () => 'ajaxy'};
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div ajaxify={options} />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('ajaxify')).toBe('ajaxy');
+    });
+  });
+
+  describe('String boolean attributes', function () {
+    it('does not assign string boolean attributes for custom attributes', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div whatever={true} ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        '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()}.\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.hasAttribute('whatever')).toBe(false);
+    });
+
+    it('stringifies the boolean true for allowed attributes', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div spellCheck={true} />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('spellCheck')).toBe('true');
+    });
+
+    it('stringifies the boolean false for allowed attributes', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div spellCheck={false} />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('spellCheck')).toBe('false');
+    });
+
+    it('stringifies implicit booleans for allowed attributes', async function () {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        // eslint-disable-next-line react/jsx-boolean-value
+        root.render(<div spellCheck />);
+      });
+
+      const el = container.firstChild;
+
+      expect(el.getAttribute('spellCheck')).toBe('true');
+    });
+  });
+
+  describe('Boolean attributes', function () {
+    it('warns on the ambiguous string value "false"', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div hidden="false" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        'Received the string `false` for the boolean attribute `hidden`. ' +
+          'The browser will interpret it as a truthy value. ' +
+          'Did you mean hidden={false}?\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.getAttribute('hidden')).toBe('');
+    });
+
+    it('warns on the potentially-ambiguous string value "true"', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<div hidden="true" ref={current => (el = current)} />);
+      });
+      assertConsoleErrorDev([
+        '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}?\n' +
+          '    in div (at **)',
+      ]);
+
+      expect(el.getAttribute('hidden')).toBe('');
+    });
+  });
+
+  describe('Hyphenated SVG elements', function () {
+    it('the font-face element is not a custom element', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <svg ref={current => (el = current)}>
+            <font-face x-height={false} />
+          </svg>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid DOM property `x-height`. Did you mean `xHeight`?\n' +
+          '    in font-face (at **)',
+      ]);
+
+      expect(el.querySelector('font-face').hasAttribute('x-height')).toBe(
+        false,
+      );
+    });
+
+    it('the font-face element does not allow unknown boolean values', async function () {
+      let el;
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <svg ref={current => (el = current)}>
+            <font-face whatever={false} />
+          </svg>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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' +
+          'If you used to conditionally omit it with whatever={condition && value}, ' +
+          'pass whatever={condition ? value : undefined} instead.\n' +
+          '    in font-face (at **)',
+      ]);
+
+      expect(el.querySelector('font-face').hasAttribute('whatever')).toBe(
+        false,
+      );
+    });
+  });
+
+  // These tests mostly verify the existing behavior.
+  // It may not always makes sense but we can't change it in minors.
+  describe('Custom elements', () => {
+    it('does not strip unknown boolean attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<some-custom-element foo={true} />);
+      });
+      const node = container.firstChild;
+      expect(node.getAttribute('foo')).toBe('');
+      await act(() => {
+        root.render(<some-custom-element foo={false} />);
+      });
+      expect(node.getAttribute('foo')).toBe(null);
+      await act(() => {
+        root.render(<some-custom-element />);
+      });
+      expect(node.hasAttribute('foo')).toBe(false);
+      await act(() => {
+        root.render(<some-custom-element foo={true} />);
+      });
+      expect(node.hasAttribute('foo')).toBe(true);
+    });
+
+    it('does not strip the on* attributes', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<some-custom-element onx="bar" />);
+      });
+      const node = container.firstChild;
+      expect(node.getAttribute('onx')).toBe('bar');
+      await act(() => {
+        root.render(<some-custom-element onx="buzz" />);
+      });
+      expect(node.getAttribute('onx')).toBe('buzz');
+      await act(() => {
+        root.render(<some-custom-element />);
+      });
+      expect(node.hasAttribute('onx')).toBe(false);
+      await act(() => {
+        root.render(<some-custom-element onx="bar" />);
+      });
+      expect(node.getAttribute('onx')).toBe('bar');
+    });
+  });
+
+  it('receives events in specific order', async () => {
+    const eventOrder = [];
+    const track = tag => () => eventOrder.push(tag);
+    const outerRef = React.createRef();
+    const innerRef = React.createRef();
+
+    function OuterReactApp() {
+      return (
+        <div
+          ref={outerRef}
+          onClick={track('outer bubble')}
+          onClickCapture={track('outer capture')}
+        />
+      );
+    }
+
+    function InnerReactApp() {
+      return (
+        <div
+          ref={innerRef}
+          onClick={track('inner bubble')}
+          onClickCapture={track('inner capture')}
+        />
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    document.body.appendChild(container);
+
+    try {
+      await act(() => {
+        root.render(<OuterReactApp />);
+      });
+      const innerRoot = ReactDOMClient.createRoot(outerRef.current);
+      await act(() => {
+        innerRoot.render(<InnerReactApp />);
+      });
+
+      document.addEventListener('click', track('document bubble'));
+      document.addEventListener('click', track('document capture'), true);
+
+      innerRef.current.click();
+
+      if (ReactFeatureFlags.enableLegacyFBSupport) {
+        // The order will change here, as the legacy FB support adds
+        // the event listener onto the document after the one above has.
+        expect(eventOrder).toEqual([
+          'document capture',
+          'outer capture',
+          'inner capture',
+          'document bubble',
+          'inner bubble',
+          'outer bubble',
+        ]);
+      } else {
+        expect(eventOrder).toEqual([
+          'document capture',
+          'outer capture',
+          'inner capture',
+          'inner bubble',
+          'outer bubble',
+          'document bubble',
+        ]);
+      }
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  describe('iOS Tap Highlight', () => {
+    it('adds onclick handler to elements with onClick prop', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const elementRef = React.createRef();
+      function Component() {
+        return <div ref={elementRef} onClick={() => {}} />;
+      }
+
+      await act(() => {
+        root.render(<Component />);
+      });
+      expect(typeof elementRef.current.onclick).toBe('function');
+    });
+
+    it('adds onclick handler to a portal root', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const portalContainer = document.createElement('div');
+
+      function Component() {
+        return ReactDOM.createPortal(
+          <div onClick={() => {}} />,
+          portalContainer,
+        );
+      }
+
+      await act(() => {
+        root.render(<Component />);
+      });
+      expect(typeof portalContainer.onclick).toBe('function');
+    });
+
+    // @gate !disableLegacyMode
+    it('does not add onclick handler to the React root in legacy mode', () => {
+      const container = document.createElement('div');
+
+      function Component() {
+        return <div onClick={() => {}} />;
+      }
+
+      ReactDOM.render(<Component />, container);
+      expect(typeof container.onclick).not.toBe('function');
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
new file mode 100644
index 00000000000..4dec7df2faa
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMComponentTree', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let container;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('finds nodes for instances on events', async () => {
+    const mouseOverID = 'mouseOverID';
+    const clickID = 'clickID';
+    let currentTargetID = null;
+    // the current target of an event is set to result of getNodeFromInstance
+    // when an event is dispatched so we can test behavior by invoking
+    // events on elements in the tree and confirming the expected node is
+    // set as the current target
+    function Component() {
+      const handler = e => {
+        currentTargetID = e.currentTarget.id;
+      };
+
+      return (
+        <div id={mouseOverID} onMouseOver={handler}>
+          <div id={clickID} onClick={handler} />
+        </div>
+      );
+    }
+
+    function simulateMouseEvent(elem, type) {
+      const event = new MouseEvent(type, {
+        bubbles: true,
+      });
+      elem.dispatchEvent(event);
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(currentTargetID).toBe(null);
+    simulateMouseEvent(document.getElementById(mouseOverID), 'mouseover');
+    expect(currentTargetID).toBe(mouseOverID);
+    simulateMouseEvent(document.getElementById(clickID), 'click');
+    expect(currentTargetID).toBe(clickID);
+  });
+
+  it('finds closest instance for node when an event happens', async () => {
+    const nonReactElemID = 'aID';
+    const innerHTML = {__html: `<div id="${nonReactElemID}"></div>`};
+    const closestInstanceID = 'closestInstance';
+    let currentTargetID = null;
+
+    function ClosestInstance() {
+      const onClick = e => {
+        currentTargetID = e.currentTarget.id;
+      };
+
+      return (
+        <div
+          id={closestInstanceID}
+          onClick={onClick}
+          dangerouslySetInnerHTML={innerHTML}
+        />
+      );
+    }
+
+    function simulateClick(elem) {
+      const event = new MouseEvent('click', {
+        bubbles: true,
+      });
+      elem.dispatchEvent(event);
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <section>
+          <ClosestInstance />
+        </section>,
+      );
+    });
+    expect(currentTargetID).toBe(null);
+    simulateClick(document.getElementById(nonReactElemID));
+    expect(currentTargetID).toBe(closestInstanceID);
+  });
+
+  it('updates event handlers from fiber props', async () => {
+    let action = '';
+    let flip;
+    const handlerA = () => (action = 'A');
+    const handlerB = () => (action = 'B');
+
+    function simulateMouseOver(target) {
+      const event = new MouseEvent('mouseover', {
+        bubbles: true,
+      });
+      target.dispatchEvent(event);
+    }
+
+    function HandlerFlipper() {
+      const [flipVal, setFlipVal] = React.useState(false);
+      flip = () => setFlipVal(true);
+
+      return <div id="update" onMouseOver={flipVal ? handlerB : handlerA} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<HandlerFlipper key="1" />);
+    });
+    const node = container.firstChild;
+
+    await act(() => {
+      simulateMouseOver(node);
+    });
+    expect(action).toEqual('A');
+    action = '';
+
+    // Render with the other event handler.
+    await act(() => {
+      flip();
+    });
+    await act(() => {
+      simulateMouseOver(node);
+    });
+    expect(action).toEqual('B');
+  });
+
+  it('finds a controlled instance from node and gets its current fiber props', async () => {
+    let inputRef;
+    const inputID = 'inputID';
+    const startValue = undefined;
+    const finishValue = 'finish';
+
+    function Controlled() {
+      const [state, setState] = React.useState(startValue);
+      const ref = React.useRef();
+      inputRef = ref;
+      const onChange = e => setState(e.currentTarget.value);
+
+      return (
+        <input
+          id={inputID}
+          type="text"
+          ref={ref}
+          value={state}
+          onChange={onChange}
+        />
+      );
+    }
+
+    const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    ).set;
+
+    function simulateInput(elem, value) {
+      const inputEvent = new Event('input', {
+        bubbles: true,
+      });
+      setUntrackedInputValue.call(elem, value);
+      elem.dispatchEvent(inputEvent);
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Controlled />);
+    });
+
+    await act(() => {
+      simulateInput(inputRef.current, finishValue);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: ' +
+        'https://react.dev/link/controlled-components\n' +
+        '    in input (at **)\n' +
+        '    in Controlled (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
new file mode 100644
index 00000000000..2aca1e05884
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
@@ -0,0 +1,517 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('ReactDOMConsoleErrorReporting', () => {
+  let act;
+  let React;
+  let ReactDOMClient;
+
+  let ErrorBoundary;
+  let NoError;
+  let container;
+  let windowOnError;
+  let Scheduler;
+
+  beforeEach(() => {
+    jest.resetModules();
+    act = require('internal-test-utils').act;
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+
+    ErrorBoundary = class extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <h1>Caught: {this.state.error.message}</h1>;
+        }
+        return this.props.children;
+      }
+    };
+    NoError = function () {
+      return <h1>OK</h1>;
+    };
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    windowOnError = jest.fn();
+    window.addEventListener('error', windowOnError);
+    spyOnDevAndProd(console, 'error').mockImplementation(() => {});
+    spyOnDevAndProd(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    window.removeEventListener('error', windowOnError);
+    jest.restoreAllMocks();
+  });
+
+  async function fakeAct(cb) {
+    // We don't use act/waitForThrow here because we want to observe how errors are reported for real.
+    await cb();
+    Scheduler.unstable_flushAll();
+  }
+
+  describe('ReactDOMClient.createRoot', () => {
+    it('logs errors during event handlers', async () => {
+      function Foo() {
+        return (
+          <button
+            onClick={() => {
+              throw Error('Boom');
+            }}>
+            click me
+          </button>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+
+      container.firstChild.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+
+      expect(windowOnError.mock.calls).toEqual([
+        [
+          // Reported because we're in a browser click event:
+          expect.objectContaining({
+            message: 'Boom',
+          }),
+        ],
+      ]);
+      expect(console.error.mock.calls).toEqual([
+        [
+          // Reported because we're in a browser click event:
+          expect.objectContaining({
+            message: 'Boom',
+          }),
+        ],
+      ]);
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      expect(console.error.mock.calls).toEqual([]);
+    });
+
+    it('logs render errors without an error boundary', async () => {
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await fakeAct(() => {
+        root.render(<Foo />);
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.warn.mock.calls).toEqual([
+          [
+            // Addendum by React:
+            expect.stringContaining('%s'),
+            expect.stringContaining('An error occurred in the <Foo> component'),
+            expect.stringContaining('Consider adding an error boundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.warn.mock.calls).toEqual([]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([]);
+      }
+    });
+
+    it('logs render errors with an error boundary', async () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Formatting
+            expect.stringContaining('%o'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+            expect.stringContaining('ErrorBoundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([]);
+      }
+    });
+
+    it('logs layout effect errors without an error boundary', async () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await fakeAct(() => {
+        root.render(<Foo />);
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.warn.mock.calls).toEqual([
+          [
+            // Addendum by React:
+            expect.stringContaining('%s'),
+            expect.stringContaining('An error occurred in the <Foo> component'),
+            expect.stringContaining('Consider adding an error boundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.warn.mock.calls).toEqual([]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([]);
+      }
+    });
+
+    it('logs layout effect errors with an error boundary', async () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Formatting
+            expect.stringContaining('%o'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+            expect.stringContaining('ErrorBoundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([]);
+      }
+    });
+
+    it('logs passive effect errors without an error boundary', async () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await fakeAct(() => {
+        root.render(<Foo />);
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.warn.mock.calls).toEqual([
+          [
+            // Addendum by React:
+            expect.stringContaining('%s'),
+            expect.stringContaining('An error occurred in the <Foo> component'),
+            expect.stringContaining('Consider adding an error boundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.warn.mock.calls).toEqual([]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([]);
+      }
+    });
+
+    it('logs passive effect errors with an error boundary', async () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Formatting
+            expect.stringContaining('%o'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+            expect.stringContaining('ErrorBoundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([]);
+      }
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReportingLegacy-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReportingLegacy-test.js
new file mode 100644
index 00000000000..99bfeac56b1
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReportingLegacy-test.js
@@ -0,0 +1,586 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('ReactDOMConsoleErrorReporting', () => {
+  let act;
+  let React;
+  let ReactDOM;
+
+  let ErrorBoundary;
+  let NoError;
+  let container;
+  let windowOnError;
+  let waitForThrow;
+
+  beforeEach(() => {
+    jest.resetModules();
+    act = require('internal-test-utils').act;
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForThrow = InternalTestUtils.waitForThrow;
+
+    ErrorBoundary = class extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <h1>Caught: {this.state.error.message}</h1>;
+        }
+        return this.props.children;
+      }
+    };
+    NoError = function () {
+      return <h1>OK</h1>;
+    };
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    windowOnError = jest.fn();
+    window.addEventListener('error', windowOnError);
+    spyOnDevAndProd(console, 'error');
+    spyOnDevAndProd(console, 'warn');
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    window.removeEventListener('error', windowOnError);
+    jest.restoreAllMocks();
+  });
+
+  describe('ReactDOM.render', () => {
+    // @gate !disableLegacyMode
+    it('logs errors during event handlers', async () => {
+      function Foo() {
+        return (
+          <button
+            onClick={() => {
+              throw Error('Boom');
+            }}>
+            click me
+          </button>
+        );
+      }
+
+      await act(() => {
+        ReactDOM.render(<Foo />, container);
+      });
+
+      await expect(async () => {
+        await act(() => {
+          container.firstChild.dispatchEvent(
+            new MouseEvent('click', {
+              bubbles: true,
+            }),
+          );
+        });
+      }).rejects.toThrow(
+        expect.objectContaining({
+          message: 'Boom',
+        }),
+      );
+
+      // Reported because we're in a browser click event:
+      expect(windowOnError.mock.calls).toEqual([
+        [
+          expect.objectContaining({
+            message: 'Boom',
+          }),
+        ],
+      ]);
+      expect(console.warn).not.toBeCalled();
+
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.warn.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+    });
+
+    // @gate !disableLegacyMode
+    it('logs render errors without an error boundary', async () => {
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      await expect(async () => {
+        await act(() => {
+          ReactDOM.render(<Foo />, container);
+        });
+      }).rejects.toThrow('Boom');
+
+      // Reported because errors without a boundary are reported to window.
+      expect(windowOnError.mock.calls).toEqual([
+        [
+          expect.objectContaining({
+            message: 'Boom',
+          }),
+        ],
+      ]);
+
+      if (__DEV__) {
+        expect(console.warn.mock.calls).toEqual([
+          [
+            // Formatting
+            expect.stringContaining('%s'),
+            // Addendum by React:
+            expect.stringContaining('An error occurred in the <Foo> component'),
+            expect.stringContaining('Consider adding an error boundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.warn).not.toBeCalled();
+        expect(console.error).not.toBeCalled();
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.warn.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(console.warn).not.toBeCalled();
+      expect(windowOnError).not.toBeCalled();
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+    });
+
+    // @gate !disableLegacyMode
+    it('logs render errors with an error boundary', async () => {
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      await act(() => {
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+          container,
+        );
+      });
+
+      // The top-level error was caught with try/catch,
+      // so we don't see an error event.
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+          [
+            // Formatting
+            expect.stringContaining('%o'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+            expect.stringContaining('ErrorBoundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.mockReset();
+      console.warn.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+    });
+
+    // @gate !disableLegacyMode
+    it('logs layout effect errors without an error boundary', async () => {
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      await expect(async () => {
+        await act(() => {
+          ReactDOM.render(<Foo />, container);
+        });
+      }).rejects.toThrow('Boom');
+
+      // Reported because errors without a boundary are reported to window.
+      expect(windowOnError.mock.calls).toEqual([
+        [
+          expect.objectContaining({
+            message: 'Boom',
+          }),
+        ],
+      ]);
+
+      if (__DEV__) {
+        expect(console.warn.mock.calls).toEqual([
+          [
+            // Formatting
+            expect.stringContaining('%s'),
+
+            // Addendum by React:
+            expect.stringContaining('An error occurred in the <Foo> component'),
+            expect.stringContaining('Consider adding an error boundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.warn).not.toBeCalled();
+        expect(console.error).not.toBeCalled();
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.warn.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(console.warn).not.toBeCalled();
+      expect(windowOnError).not.toBeCalled();
+
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+    });
+
+    // @gate !disableLegacyMode
+    it('logs layout effect errors with an error boundary', async () => {
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      await act(() => {
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+          container,
+        );
+      });
+
+      // The top-level error was caught with try/catch,
+      // so we don't see an error event.
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+          [
+            // Formatting
+            expect.stringContaining('%o'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+            expect.stringContaining('ErrorBoundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.warn.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+    });
+
+    // @gate !disableLegacyMode
+    it('logs passive effect errors without an error boundary', async () => {
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      await act(async () => {
+        ReactDOM.render(<Foo />, container);
+        await waitForThrow('Boom');
+      });
+
+      // The top-level error was caught with try/catch,
+      // so we don't see an error event.
+      expect(windowOnError.mock.calls).toEqual([
+        [
+          expect.objectContaining({
+            message: 'Boom',
+          }),
+        ],
+      ]);
+
+      if (__DEV__) {
+        expect(console.warn.mock.calls).toEqual([
+          [
+            // Formatting
+            expect.stringContaining('%s'),
+
+            // Addendum by React:
+            expect.stringContaining('An error occurred in the <Foo> component'),
+            expect.stringContaining('Consider adding an error boundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.warn).not.toBeCalled();
+        expect(console.error).not.toBeCalled();
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.warn.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.error).not.toBeCalled();
+      }
+    });
+
+    // @gate !disableLegacyMode
+    it('logs passive effect errors with an error boundary', async () => {
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      await act(() => {
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+          container,
+        );
+      });
+
+      // The top-level error was caught with try/catch,
+      // so we don't see an error event.
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+          [
+            // Formatting
+            expect.stringContaining('%o'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+            expect.stringContaining('ErrorBoundary'),
+            // The component stack is not added without the polyfill/devtools.
+            // expect.stringContaining('Foo'),
+          ],
+        ]);
+      } else {
+        expect(console.error.mock.calls).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.warn.mockReset();
+      console.error.mockReset();
+      await act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError).not.toBeCalled();
+      expect(console.warn).not.toBeCalled();
+      if (__DEV__) {
+        expect(console.error.mock.calls).toEqual([
+          [
+            expect.stringContaining(
+              'ReactDOM.render has not been supported since React 18',
+            ),
+          ],
+        ]);
+      } else {
+        expect(console.warn).not.toBeCalled();
+      }
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
new file mode 100644
index 00000000000..f6447642bce
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
@@ -0,0 +1,1304 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMEventListener', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  let act;
+  let simulateEventDispatch;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    simulateEventDispatch =
+      require('internal-test-utils').simulateEventDispatch;
+  });
+
+  describe('Propagation', () => {
+    it('should propagate events one level down', async () => {
+      const mouseOut = jest.fn();
+      const onMouseOut = event => mouseOut(event.currentTarget);
+
+      const childContainer = document.createElement('div');
+      const parentContainer = document.createElement('div');
+
+      const childRoot = ReactDOMClient.createRoot(childContainer);
+      const parentRoot = ReactDOMClient.createRoot(parentContainer);
+
+      await act(() => {
+        childRoot.render(<div onMouseOut={onMouseOut}>Child</div>);
+        parentRoot.render(<div onMouseOut={onMouseOut}>Parent</div>);
+      });
+      const parentNode = parentContainer.firstChild;
+      const childNode = childContainer.firstChild;
+
+      parentNode.appendChild(childContainer);
+      document.body.appendChild(parentContainer);
+
+      try {
+        const nativeEvent = document.createEvent('Event');
+        nativeEvent.initEvent('mouseout', true, true);
+        childNode.dispatchEvent(nativeEvent);
+
+        expect(mouseOut).toHaveBeenCalledTimes(2);
+        expect(mouseOut).toHaveBeenNthCalledWith(1, childNode);
+        expect(mouseOut).toHaveBeenNthCalledWith(2, parentNode);
+      } finally {
+        document.body.removeChild(parentContainer);
+      }
+    });
+
+    it('should propagate events two levels down', async () => {
+      const mouseOut = jest.fn();
+      const onMouseOut = event => mouseOut(event.currentTarget);
+
+      const childContainer = document.createElement('div');
+      const parentContainer = document.createElement('div');
+      const grandParentContainer = document.createElement('div');
+
+      const childRoot = ReactDOMClient.createRoot(childContainer);
+      const parentRoot = ReactDOMClient.createRoot(parentContainer);
+      const grandParentRoot = ReactDOMClient.createRoot(grandParentContainer);
+
+      await act(() => {
+        childRoot.render(<div onMouseOut={onMouseOut}>Child</div>);
+        parentRoot.render(<div onMouseOut={onMouseOut}>Parent</div>);
+        grandParentRoot.render(<div onMouseOut={onMouseOut}>Grandparent</div>);
+      });
+      const childNode = childContainer.firstChild;
+      const parentNode = parentContainer.firstChild;
+      const grandParentNode = grandParentContainer.firstChild;
+
+      parentNode.appendChild(childContainer);
+      grandParentNode.appendChild(parentContainer);
+
+      document.body.appendChild(grandParentContainer);
+
+      try {
+        const nativeEvent = document.createEvent('Event');
+        nativeEvent.initEvent('mouseout', true, true);
+        childNode.dispatchEvent(nativeEvent);
+
+        expect(mouseOut).toHaveBeenCalledTimes(3);
+        expect(mouseOut).toHaveBeenNthCalledWith(1, childNode);
+        expect(mouseOut).toHaveBeenNthCalledWith(2, parentNode);
+        expect(mouseOut).toHaveBeenNthCalledWith(3, grandParentNode);
+      } finally {
+        document.body.removeChild(grandParentContainer);
+      }
+    });
+
+    // Regression test for https://github.com/facebook/react/issues/1105
+    it('should not get confused by disappearing elements', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      try {
+        class MyComponent extends React.Component {
+          state = {clicked: false};
+          handleClick = () => {
+            this.setState({clicked: true});
+          };
+          componentDidMount() {
+            expect(
+              ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+                this,
+              ),
+            ).toBe(container.firstChild);
+          }
+          componentDidUpdate() {
+            expect(
+              ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+                this,
+              ),
+            ).toBe(container.firstChild);
+          }
+          render() {
+            if (this.state.clicked) {
+              return <span>clicked!</span>;
+            } else {
+              return (
+                <button onClick={this.handleClick}>not yet clicked</button>
+              );
+            }
+          }
+        }
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(<MyComponent />);
+        });
+        await act(() => {
+          container.firstChild.dispatchEvent(
+            new MouseEvent('click', {
+              bubbles: true,
+            }),
+          );
+        });
+        expect(container.firstChild.textContent).toBe('clicked!');
+      } finally {
+        document.body.removeChild(container);
+      }
+    });
+
+    it('should batch between handlers from different roots (discrete)', async () => {
+      const mock = jest.fn();
+
+      const childContainer = document.createElement('div');
+      const parentContainer = document.createElement('main');
+
+      const childRoot = ReactDOMClient.createRoot(childContainer);
+      const parentRoot = ReactDOMClient.createRoot(parentContainer);
+      let childSetState;
+
+      function Parent() {
+        // eslint-disable-next-line no-unused-vars
+        const [state, _] = React.useState('Parent');
+        const handleClick = () => {
+          childSetState(2);
+          mock(childContainer.firstChild.textContent);
+        };
+        return <section onClick={handleClick}>{state}</section>;
+      }
+
+      function Child() {
+        const [state, setState] = React.useState('Child');
+        childSetState = setState;
+        const handleClick = () => {
+          setState(1);
+          mock(childContainer.firstChild.textContent);
+        };
+        return <span onClick={handleClick}>{state}</span>;
+      }
+
+      await act(() => {
+        childRoot.render(<Child />);
+        parentRoot.render(<Parent />);
+      });
+
+      const childNode = childContainer.firstChild;
+      const parentNode = parentContainer.firstChild;
+
+      parentNode.appendChild(childContainer);
+      document.body.appendChild(parentContainer);
+
+      try {
+        await act(async () => {
+          await simulateEventDispatch(childNode, 'click');
+        });
+
+        // Child and parent should both call from event handlers.
+        expect(mock).toHaveBeenCalledTimes(2);
+        // The first call schedules a render of '1' into the 'Child'.
+        // However, we're batching so it isn't flushed yet.
+        expect(mock.mock.calls[0][0]).toBe('Child');
+        // As we have two roots, it means we have two event listeners.
+        // This also means we enter the event batching phase twice,
+        // flushing the child to be 1.
+
+        // We don't have any good way of knowing if another event will
+        // occur because another event handler might invoke
+        // stopPropagation() along the way. After discussions internally
+        // with Sebastian, it seems that for now over-flushing should
+        // be fine, especially as the new event system is a breaking
+        // change anyway. We can maybe revisit this later as part of
+        // the work to refine this in the scheduler (maybe by leveraging
+        // isInputPending?).
+        //
+        // Since this is a discrete event, the previous update is already done.
+        expect(mock.mock.calls[1][0]).toBe('1');
+
+        // And by the time we leave the handler, the second update is flushed.
+        expect(childNode.textContent).toBe('2');
+      } finally {
+        document.body.removeChild(parentContainer);
+      }
+    });
+
+    it('should batch between handlers from different roots (continuous)', async () => {
+      const mock = jest.fn();
+
+      const childContainer = document.createElement('div');
+      const parentContainer = document.createElement('main');
+
+      const childRoot = ReactDOMClient.createRoot(childContainer);
+      const parentRoot = ReactDOMClient.createRoot(parentContainer);
+      let childSetState;
+
+      function Parent() {
+        // eslint-disable-next-line no-unused-vars
+        const [state, _] = React.useState('Parent');
+        const handleMouseOut = () => {
+          childSetState(2);
+          mock(childContainer.firstChild.textContent);
+        };
+        return <section onMouseOut={handleMouseOut}>{state}</section>;
+      }
+
+      function Child() {
+        const [state, setState] = React.useState('Child');
+        childSetState = setState;
+        const handleMouseOut = () => {
+          setState(1);
+          mock(childContainer.firstChild.textContent);
+        };
+        return <span onMouseOut={handleMouseOut}>{state}</span>;
+      }
+
+      await act(() => {
+        childRoot.render(<Child />);
+        parentRoot.render(<Parent />);
+      });
+
+      const childNode = childContainer.firstChild;
+      const parentNode = parentContainer.firstChild;
+
+      parentNode.appendChild(childContainer);
+      document.body.appendChild(parentContainer);
+
+      try {
+        await act(async () => {
+          await simulateEventDispatch(childNode, 'mouseout');
+        });
+
+        // Child and parent should both call from event handlers.
+        expect(mock).toHaveBeenCalledTimes(2);
+        // The first call schedules a render of '1' into the 'Child'.
+        // However, we're batching, so it isn't flushed yet.
+        expect(mock.mock.calls[0][0]).toBe('Child');
+        // As we have two roots, it means we have two event listeners.
+        // This also means we enter the event batching phase twice.
+        // But since this is a continuous event, we still haven't flushed.
+        expect(mock.mock.calls[1][0]).toBe('Child');
+
+        // The batched update is applied after the events.
+        expect(childNode.textContent).toBe('2');
+      } finally {
+        document.body.removeChild(parentContainer);
+      }
+    });
+  });
+
+  it('should not fire duplicate events for a React DOM tree', async () => {
+    const mouseOut = jest.fn();
+    const onMouseOut = event => mouseOut(event.target);
+
+    const innerRef = React.createRef();
+    class Wrapper extends React.Component {
+      render() {
+        return (
+          <div>
+            <div onMouseOut={onMouseOut} id="outer">
+              <div ref={innerRef}>Inner</div>
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Wrapper />);
+    });
+
+    document.body.appendChild(container);
+
+    try {
+      const nativeEvent = document.createEvent('Event');
+      nativeEvent.initEvent('mouseout', true, true);
+      await act(() => {
+        innerRef.current.dispatchEvent(nativeEvent);
+      });
+
+      expect(mouseOut).toBeCalledWith(innerRef.current);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  // Regression test for https://github.com/facebook/react/pull/12877
+  it('should not fire form events twice', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+
+    const handleInvalid = jest.fn();
+    const handleReset = jest.fn();
+    const handleSubmit = jest.fn();
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <form ref={formRef} onReset={handleReset} onSubmit={handleSubmit}>
+          <input ref={inputRef} onInvalid={handleInvalid} />
+        </form>,
+      );
+    });
+
+    await act(() => {
+      inputRef.current.dispatchEvent(
+        new Event('invalid', {
+          // https://developer.mozilla.org/en-US/docs/Web/Events/invalid
+          bubbles: false,
+        }),
+      );
+    });
+    expect(handleInvalid).toHaveBeenCalledTimes(1);
+
+    await act(() => {
+      formRef.current.dispatchEvent(
+        new Event('reset', {
+          // https://developer.mozilla.org/en-US/docs/Web/Events/reset
+          bubbles: true,
+        }),
+      );
+    });
+    expect(handleReset).toHaveBeenCalledTimes(1);
+
+    await act(() => {
+      formRef.current.dispatchEvent(
+        new Event('submit', {
+          // https://developer.mozilla.org/en-US/docs/Web/Events/submit
+          bubbles: true,
+        }),
+      );
+    });
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+
+    await act(() => {
+      formRef.current.dispatchEvent(
+        new Event('submit', {
+          // Might happen on older browsers.
+          bubbles: true,
+        }),
+      );
+    });
+    expect(handleSubmit).toHaveBeenCalledTimes(2); // It already fired in this test.
+
+    document.body.removeChild(container);
+  });
+
+  // This tests an implementation detail that submit/reset events are listened to
+  // at the document level, which is necessary for event replaying to work.
+  // They bubble in all modern browsers.
+  it('should not receive submit events if native, interim DOM handler prevents it', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    try {
+      const formRef = React.createRef();
+      const interimRef = React.createRef();
+
+      const handleSubmit = jest.fn();
+      const handleReset = jest.fn();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div ref={interimRef}>
+            <form ref={formRef} onSubmit={handleSubmit} onReset={handleReset} />
+          </div>,
+        );
+      });
+
+      interimRef.current.onsubmit = nativeEvent =>
+        nativeEvent.stopPropagation();
+      interimRef.current.onreset = nativeEvent => nativeEvent.stopPropagation();
+
+      await act(() => {
+        formRef.current.dispatchEvent(
+          new Event('submit', {
+            // https://developer.mozilla.org/en-US/docs/Web/Events/submit
+            bubbles: true,
+          }),
+        );
+
+        formRef.current.dispatchEvent(
+          new Event('reset', {
+            // https://developer.mozilla.org/en-US/docs/Web/Events/reset
+            bubbles: true,
+          }),
+        );
+      });
+
+      expect(handleSubmit).not.toHaveBeenCalled();
+      expect(handleReset).not.toHaveBeenCalled();
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should dispatch loadstart only for media elements', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    try {
+      const imgRef = React.createRef();
+      const videoRef = React.createRef();
+
+      const handleImgLoadStart = jest.fn();
+      const handleVideoLoadStart = jest.fn();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <img ref={imgRef} onLoadStart={handleImgLoadStart} />
+            <video ref={videoRef} onLoadStart={handleVideoLoadStart} />
+          </div>,
+        );
+      });
+
+      await act(() => {
+        // Note for debugging: loadstart currently doesn't fire in Chrome.
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=458851
+        imgRef.current.dispatchEvent(
+          new ProgressEvent('loadstart', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(handleImgLoadStart).toHaveBeenCalledTimes(0);
+
+      await act(() => {
+        videoRef.current.dispatchEvent(
+          new ProgressEvent('loadstart', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(handleVideoLoadStart).toHaveBeenCalledTimes(1);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should not attempt to listen to unnecessary events on the top level', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const videoRef = React.createRef();
+    // We'll test this event alone.
+    const handleVideoPlay = jest.fn();
+    const handleVideoPlayDelegated = jest.fn();
+    const mediaEvents = {
+      onAbort() {},
+      onCanPlay() {},
+      onCanPlayThrough() {},
+      onDurationChange() {},
+      onEmptied() {},
+      onEncrypted() {},
+      onEnded() {},
+      onError() {},
+      onLoadedData() {},
+      onLoadedMetadata() {},
+      onLoadStart() {},
+      onPause() {},
+      onPlay() {},
+      onPlaying() {},
+      onProgress() {},
+      onRateChange() {},
+      onResize() {},
+      onSeeked() {},
+      onSeeking() {},
+      onStalled() {},
+      onSuspend() {},
+      onTimeUpdate() {},
+      onVolumeChange() {},
+      onWaiting() {},
+    };
+
+    const originalDocAddEventListener = document.addEventListener;
+    const originalRootAddEventListener = container.addEventListener;
+    document.addEventListener = function (type) {
+      switch (type) {
+        case 'selectionchange':
+          break;
+        default:
+          throw new Error(
+            `Did not expect to add a document-level listener for the "${type}" event.`,
+          );
+      }
+    };
+    container.addEventListener = function (type, fn, options) {
+      if (options && (options === true || options.capture)) {
+        return;
+      }
+      switch (type) {
+        case 'abort':
+        case 'canplay':
+        case 'canplaythrough':
+        case 'durationchange':
+        case 'emptied':
+        case 'encrypted':
+        case 'ended':
+        case 'error':
+        case 'loadeddata':
+        case 'loadedmetadata':
+        case 'loadstart':
+        case 'pause':
+        case 'play':
+        case 'playing':
+        case 'progress':
+        case 'ratechange':
+        case 'resize':
+        case 'seeked':
+        case 'seeking':
+        case 'stalled':
+        case 'suspend':
+        case 'timeupdate':
+        case 'volumechange':
+        case 'waiting':
+          throw new Error(
+            `Did not expect to add a root-level listener for the "${type}" event.`,
+          );
+        default:
+          break;
+      }
+    };
+
+    try {
+      // We expect that mounting this tree will
+      // *not* attach handlers for any top-level events.
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div onPlay={handleVideoPlayDelegated}>
+            <video ref={videoRef} {...mediaEvents} onPlay={handleVideoPlay} />
+            <audio {...mediaEvents}>
+              <source {...mediaEvents} />
+            </audio>
+          </div>,
+        );
+      });
+      await act(() => {
+        // Also verify dispatching one of them works
+        videoRef.current.dispatchEvent(
+          new Event('play', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(handleVideoPlay).toHaveBeenCalledTimes(1);
+      // Unlike browsers, we delegate media events.
+      // (This doesn't make a lot of sense but it would be a breaking change not to.)
+      expect(handleVideoPlayDelegated).toHaveBeenCalledTimes(1);
+    } finally {
+      document.addEventListener = originalDocAddEventListener;
+      container.addEventListener = originalRootAddEventListener;
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should dispatch load for embed elements', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    try {
+      const ref = React.createRef();
+      const handleLoad = jest.fn();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <embed ref={ref} onLoad={handleLoad} />
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new ProgressEvent('load', {
+            bubbles: false,
+          }),
+        );
+      });
+
+      expect(handleLoad).toHaveBeenCalledTimes(1);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  // Unlike browsers, we delegate media events.
+  // (This doesn't make a lot of sense but it would be a breaking change not to.)
+  it('should delegate media events even without a direct listener', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const handleVideoPlayDelegated = jest.fn();
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div onPlay={handleVideoPlayDelegated}>
+            {/* Intentionally no handler on the target: */}
+            <video ref={ref} />
+          </div>,
+        );
+      });
+
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('play', {
+            bubbles: false,
+          }),
+        );
+      });
+      // Regression test: ensure React tree delegation still works
+      // even if the actual DOM element did not have a handler.
+      expect(handleVideoPlayDelegated).toHaveBeenCalledTimes(1);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should delegate dialog events even without a direct listener', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const onCancel = jest.fn();
+    const onClose = jest.fn();
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div onCancel={onCancel} onClose={onClose}>
+            {/* Intentionally no handler on the target: */}
+            <dialog ref={ref} />
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('close', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('cancel', {
+            bubbles: false,
+          }),
+        );
+      });
+      // Regression test: ensure React tree delegation still works
+      // even if the actual DOM element did not have a handler.
+      expect(onCancel).toHaveBeenCalledTimes(1);
+      expect(onClose).toHaveBeenCalledTimes(1);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should bubble non-native bubbling toggle events', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const onToggle = jest.fn();
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div onToggle={onToggle}>
+            <details ref={ref} onToggle={onToggle} />
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('toggle', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(onToggle).toHaveBeenCalledTimes(2);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should bubble non-native bubbling cancel/close events', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const onCancel = jest.fn();
+    const onClose = jest.fn();
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div onCancel={onCancel} onClose={onClose}>
+            <dialog ref={ref} onCancel={onCancel} onClose={onClose} />
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('cancel', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('close', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(onCancel).toHaveBeenCalledTimes(2);
+      expect(onClose).toHaveBeenCalledTimes(2);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should bubble non-native bubbling media events events', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const onPlay = jest.fn();
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div onPlay={onPlay}>
+            <video ref={ref} onPlay={onPlay} />
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('play', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(onPlay).toHaveBeenCalledTimes(2);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should bubble non-native bubbling invalid events', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const onInvalid = jest.fn();
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <form onInvalid={onInvalid}>
+            <input ref={ref} onInvalid={onInvalid} />
+          </form>,
+        );
+      });
+
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('invalid', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(onInvalid).toHaveBeenCalledTimes(2);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should handle non-bubbling capture events correctly', async () => {
+    const container = document.createElement('div');
+    const innerRef = React.createRef();
+    const outerRef = React.createRef();
+    const onPlayCapture = jest.fn(e => log.push(e.currentTarget));
+    const log = [];
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div ref={outerRef} onPlayCapture={onPlayCapture}>
+            <div onPlayCapture={onPlayCapture}>
+              <div ref={innerRef} onPlayCapture={onPlayCapture} />
+            </div>
+          </div>,
+        );
+      });
+      await act(() => {
+        innerRef.current.dispatchEvent(
+          new Event('play', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(onPlayCapture).toHaveBeenCalledTimes(3);
+      expect(log).toEqual([
+        outerRef.current,
+        outerRef.current.firstChild,
+        innerRef.current,
+      ]);
+      await act(() => {
+        outerRef.current.dispatchEvent(
+          new Event('play', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(onPlayCapture).toHaveBeenCalledTimes(4);
+      expect(log).toEqual([
+        outerRef.current,
+        outerRef.current.firstChild,
+        innerRef.current,
+        outerRef.current,
+      ]);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  // We're moving towards aligning more closely with the browser.
+  // Currently we emulate bubbling for all non-bubbling events except scroll.
+  // We may expand this list in the future, removing emulated bubbling altogether.
+  it('should not emulate bubbling of scroll events', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const log = [];
+    const onScroll = jest.fn(e =>
+      log.push(['onScroll', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollCapture = jest.fn(e =>
+      log.push(['onScroll', 'capture', e.currentTarget.className]),
+    );
+    const onScrollEnd = jest.fn(e =>
+      log.push(['onScrollEnd', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollEndCapture = jest.fn(e =>
+      log.push(['onScrollEnd', 'capture', e.currentTarget.className]),
+    );
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div
+            className="grand"
+            onScroll={onScroll}
+            onScrollCapture={onScrollCapture}
+            onScrollEnd={onScrollEnd}
+            onScrollEndCapture={onScrollEndCapture}>
+            <div
+              className="parent"
+              onScroll={onScroll}
+              onScrollCapture={onScrollCapture}
+              onScrollEnd={onScrollEnd}
+              onScrollEndCapture={onScrollEndCapture}>
+              <div
+                className="child"
+                onScroll={onScroll}
+                onScrollCapture={onScrollCapture}
+                onScrollEnd={onScrollEnd}
+                onScrollEndCapture={onScrollEndCapture}
+                ref={ref}
+              />
+            </div>
+          </div>,
+        );
+      });
+
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([
+        ['onScroll', 'capture', 'grand'],
+        ['onScroll', 'capture', 'parent'],
+        ['onScroll', 'capture', 'child'],
+        ['onScroll', 'bubble', 'child'],
+        ['onScrollEnd', 'capture', 'grand'],
+        ['onScrollEnd', 'capture', 'parent'],
+        ['onScrollEnd', 'capture', 'child'],
+        ['onScrollEnd', 'bubble', 'child'],
+      ]);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  // We're moving towards aligning more closely with the browser.
+  // Currently we emulate bubbling for all non-bubbling events except scroll.
+  // We may expand this list in the future, removing emulated bubbling altogether.
+  it('should not emulate bubbling of scroll events (no own handler)', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const log = [];
+    const onScroll = jest.fn(e =>
+      log.push(['onScroll', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollCapture = jest.fn(e =>
+      log.push(['onScroll', 'capture', e.currentTarget.className]),
+    );
+    const onScrollEnd = jest.fn(e =>
+      log.push(['onScrollEnd', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollEndCapture = jest.fn(e =>
+      log.push(['onScrollEnd', 'capture', e.currentTarget.className]),
+    );
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div
+            className="grand"
+            onScroll={onScroll}
+            onScrollCapture={onScrollCapture}
+            onScrollEnd={onScrollEnd}
+            onScrollEndCapture={onScrollEndCapture}>
+            <div
+              className="parent"
+              onScroll={onScroll}
+              onScrollCapture={onScrollCapture}
+              onScrollEnd={onScrollEnd}
+              onScrollEndCapture={onScrollEndCapture}>
+              {/* Intentionally no handler on the child: */}
+              <div className="child" ref={ref} />
+            </div>
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([
+        ['onScroll', 'capture', 'grand'],
+        ['onScroll', 'capture', 'parent'],
+        ['onScrollEnd', 'capture', 'grand'],
+        ['onScrollEnd', 'capture', 'parent'],
+      ]);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should subscribe to scroll during updates', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const log = [];
+    const onScroll = jest.fn(e =>
+      log.push(['onScroll', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollCapture = jest.fn(e =>
+      log.push(['onScroll', 'capture', e.currentTarget.className]),
+    );
+    const onScrollEnd = jest.fn(e =>
+      log.push(['onScrollEnd', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollEndCapture = jest.fn(e =>
+      log.push(['onScrollEnd', 'capture', e.currentTarget.className]),
+    );
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <div>
+              <div />
+            </div>
+          </div>,
+        );
+      });
+
+      await act(() => {
+        // Update to attach.
+        root.render(
+          <div
+            className="grand"
+            onScroll={e => onScroll(e)}
+            onScrollCapture={e => onScrollCapture(e)}
+            onScrollEnd={e => onScrollEnd(e)}
+            onScrollEndCapture={e => onScrollEndCapture(e)}>
+            <div
+              className="parent"
+              onScroll={e => onScroll(e)}
+              onScrollCapture={e => onScrollCapture(e)}
+              onScrollEnd={e => onScrollEnd(e)}
+              onScrollEndCapture={e => onScrollEndCapture(e)}>
+              <div
+                className="child"
+                onScroll={e => onScroll(e)}
+                onScrollCapture={e => onScrollCapture(e)}
+                onScrollEnd={e => onScrollEnd(e)}
+                onScrollEndCapture={e => onScrollEndCapture(e)}
+                ref={ref}
+              />
+            </div>
+          </div>,
+        );
+      });
+
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([
+        ['onScroll', 'capture', 'grand'],
+        ['onScroll', 'capture', 'parent'],
+        ['onScroll', 'capture', 'child'],
+        ['onScroll', 'bubble', 'child'],
+        ['onScrollEnd', 'capture', 'grand'],
+        ['onScrollEnd', 'capture', 'parent'],
+        ['onScrollEnd', 'capture', 'child'],
+        ['onScrollEnd', 'bubble', 'child'],
+      ]);
+
+      // Update to verify deduplication.
+      log.length = 0;
+      await act(() => {
+        root.render(
+          <div
+            className="grand"
+            // Note: these are intentionally inline functions so that
+            // we hit the reattachment codepath instead of bailing out.
+            onScroll={e => onScroll(e)}
+            onScrollCapture={e => onScrollCapture(e)}
+            onScrollEnd={e => onScrollEnd(e)}
+            onScrollEndCapture={e => onScrollEndCapture(e)}>
+            <div
+              className="parent"
+              onScroll={e => onScroll(e)}
+              onScrollCapture={e => onScrollCapture(e)}
+              onScrollEnd={e => onScrollEnd(e)}
+              onScrollEndCapture={e => onScrollEndCapture(e)}>
+              <div
+                className="child"
+                onScroll={e => onScroll(e)}
+                onScrollCapture={e => onScrollCapture(e)}
+                onScrollEnd={e => onScrollEnd(e)}
+                onScrollEndCapture={e => onScrollEndCapture(e)}
+                ref={ref}
+              />
+            </div>
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([
+        ['onScroll', 'capture', 'grand'],
+        ['onScroll', 'capture', 'parent'],
+        ['onScroll', 'capture', 'child'],
+        ['onScroll', 'bubble', 'child'],
+        ['onScrollEnd', 'capture', 'grand'],
+        ['onScrollEnd', 'capture', 'parent'],
+        ['onScrollEnd', 'capture', 'child'],
+        ['onScrollEnd', 'bubble', 'child'],
+      ]);
+
+      // Update to detach.
+      log.length = 0;
+      await act(() => {
+        root.render(
+          <div>
+            <div>
+              <div ref={ref} />
+            </div>
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([]);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  // Regression test.
+  it('should subscribe to scroll during hydration', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+    const log = [];
+    const onScroll = jest.fn(e =>
+      log.push(['onScroll', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollCapture = jest.fn(e =>
+      log.push(['onScroll', 'capture', e.currentTarget.className]),
+    );
+    const onScrollEnd = jest.fn(e =>
+      log.push(['onScrollEnd', 'bubble', e.currentTarget.className]),
+    );
+    const onScrollEndCapture = jest.fn(e =>
+      log.push(['onScrollEnd', 'capture', e.currentTarget.className]),
+    );
+
+    const tree = (
+      <div
+        className="grand"
+        onScroll={onScroll}
+        onScrollCapture={onScrollCapture}
+        onScrollEnd={onScrollEnd}
+        onScrollEndCapture={onScrollEndCapture}>
+        <div
+          className="parent"
+          onScroll={onScroll}
+          onScrollCapture={onScrollCapture}
+          onScrollEnd={onScrollEnd}
+          onScrollEndCapture={onScrollEndCapture}>
+          <div
+            className="child"
+            onScroll={onScroll}
+            onScrollCapture={onScrollCapture}
+            onScrollEnd={onScrollEnd}
+            onScrollEndCapture={onScrollEndCapture}
+            ref={ref}
+          />
+        </div>
+      </div>
+    );
+    document.body.appendChild(container);
+    try {
+      container.innerHTML = ReactDOMServer.renderToString(tree);
+      let root;
+      await act(() => {
+        root = ReactDOMClient.hydrateRoot(container, tree);
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([
+        ['onScroll', 'capture', 'grand'],
+        ['onScroll', 'capture', 'parent'],
+        ['onScroll', 'capture', 'child'],
+        ['onScroll', 'bubble', 'child'],
+        ['onScrollEnd', 'capture', 'grand'],
+        ['onScrollEnd', 'capture', 'parent'],
+        ['onScrollEnd', 'capture', 'child'],
+        ['onScrollEnd', 'bubble', 'child'],
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        root.render(
+          <div>
+            <div>
+              <div ref={ref} />
+            </div>
+          </div>,
+        );
+      });
+      await act(() => {
+        ref.current.dispatchEvent(
+          new Event('scroll', {
+            bubbles: false,
+          }),
+        );
+        ref.current.dispatchEvent(
+          new Event('scrollend', {
+            bubbles: false,
+          }),
+        );
+      });
+      expect(log).toEqual([]);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should not subscribe to selectionchange twice', async () => {
+    const log = [];
+
+    const originalDocAddEventListener = document.addEventListener;
+    document.addEventListener = function (type, fn, options) {
+      switch (type) {
+        case 'selectionchange':
+          log.push(options);
+          break;
+        default:
+          throw new Error(
+            `Did not expect to add a document-level listener for the "${type}" event.`,
+          );
+      }
+    };
+    try {
+      const rootOne = ReactDOMClient.createRoot(document.createElement('div'));
+      const rootTwo = ReactDOMClient.createRoot(document.createElement('div'));
+
+      await act(() => {
+        rootOne.render(<input />);
+        rootTwo.render(<input />);
+      });
+    } finally {
+      document.addEventListener = originalDocAddEventListener;
+    }
+
+    expect(log).toEqual([false]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
new file mode 100644
index 00000000000..ebd3f9a5401
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -0,0 +1,2979 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('ReactDOMEventListener', () => {
+  let React;
+  let OuterReactDOMClient;
+  let InnerReactDOM;
+  let InnerReactDOMClient;
+  let act;
+  let container;
+  let root;
+
+  beforeEach(() => {
+    window.TextEvent = function () {};
+    jest.resetModules();
+    jest.isolateModules(() => {
+      React = require('react');
+      act = require('internal-test-utils').act;
+      OuterReactDOMClient = require('react-dom/client');
+    });
+    jest.isolateModules(() => {
+      InnerReactDOM = require('react-dom');
+      InnerReactDOMClient = require('react-dom/client');
+    });
+    expect(OuterReactDOMClient).not.toBe(InnerReactDOMClient);
+  });
+
+  afterEach(async () => {
+    await cleanup();
+  });
+
+  async function cleanup() {
+    if (container) {
+      await act(() => {
+        root.unmount();
+      });
+      document.body.removeChild(container);
+      container = null;
+    }
+  }
+
+  async function render(tree) {
+    await cleanup();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = OuterReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(tree);
+    });
+  }
+
+  describe('bubbling events', () => {
+    it('onAnimationEnd', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onAnimationEnd',
+        reactEventType: 'animationend',
+        nativeEvent: 'animationend',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('animationend', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onAnimationIteration', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onAnimationIteration',
+        reactEventType: 'animationiteration',
+        nativeEvent: 'animationiteration',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('animationiteration', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onAnimationStart', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onAnimationStart',
+        reactEventType: 'animationstart',
+        nativeEvent: 'animationstart',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('animationstart', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onAuxClick', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onAuxClick',
+        reactEventType: 'auxclick',
+        nativeEvent: 'auxclick',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('auxclick', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onBlur', async () => {
+      await testNativeBubblingEvent({
+        type: 'input',
+        reactEvent: 'onBlur',
+        reactEventType: 'blur',
+        nativeEvent: 'focusout',
+        dispatch(node) {
+          const e = new Event('focusout', {
+            bubbles: true,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    // This test will fail in legacy mode (only used in WWW)
+    // because we emulate the React 16 behavior where
+    // the click handler is attached to the document.
+    // @gate !enableLegacyFBSupport
+    it('onClick', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onClick',
+        reactEventType: 'click',
+        nativeEvent: 'click',
+        dispatch(node) {
+          node.click();
+        },
+      });
+    });
+
+    it('onContextMenu', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onContextMenu',
+        reactEventType: 'contextmenu',
+        nativeEvent: 'contextmenu',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('contextmenu', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onCopy', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onCopy',
+        reactEventType: 'copy',
+        nativeEvent: 'copy',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('copy', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onCut', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onCut',
+        reactEventType: 'cut',
+        nativeEvent: 'cut',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('cut', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDoubleClick', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDoubleClick',
+        reactEventType: 'dblclick',
+        nativeEvent: 'dblclick',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('dblclick', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDrag', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDrag',
+        reactEventType: 'drag',
+        nativeEvent: 'drag',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('drag', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDragEnd', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDragEnd',
+        reactEventType: 'dragend',
+        nativeEvent: 'dragend',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('dragend', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDragEnter', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDragEnter',
+        reactEventType: 'dragenter',
+        nativeEvent: 'dragenter',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('dragenter', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDragExit', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDragExit',
+        reactEventType: 'dragexit',
+        nativeEvent: 'dragexit',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('dragexit', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDragLeave', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDragLeave',
+        reactEventType: 'dragleave',
+        nativeEvent: 'dragleave',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('dragleave', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDragOver', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDragOver',
+        reactEventType: 'dragover',
+        nativeEvent: 'dragover',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('dragover', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDragStart', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDragStart',
+        reactEventType: 'dragstart',
+        nativeEvent: 'dragstart',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('dragstart', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onDrop', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onDrop',
+        reactEventType: 'drop',
+        nativeEvent: 'drop',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('drop', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onFocus', async () => {
+      await testNativeBubblingEvent({
+        type: 'input',
+        reactEvent: 'onFocus',
+        reactEventType: 'focus',
+        nativeEvent: 'focusin',
+        dispatch(node) {
+          const e = new Event('focusin', {
+            bubbles: true,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onGotPointerCapture', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onGotPointerCapture',
+        reactEventType: 'gotpointercapture',
+        nativeEvent: 'gotpointercapture',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('gotpointercapture', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onKeyDown', async () => {
+      await testNativeBubblingEvent({
+        type: 'input',
+        reactEvent: 'onKeyDown',
+        reactEventType: 'keydown',
+        nativeEvent: 'keydown',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onKeyPress', async () => {
+      await testNativeBubblingEvent({
+        type: 'input',
+        reactEvent: 'onKeyPress',
+        reactEventType: 'keypress',
+        nativeEvent: 'keypress',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('keypress', {
+              keyCode: 13,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onKeyUp', async () => {
+      await testNativeBubblingEvent({
+        type: 'input',
+        reactEvent: 'onKeyUp',
+        reactEventType: 'keyup',
+        nativeEvent: 'keyup',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onLostPointerCapture', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onLostPointerCapture',
+        reactEventType: 'lostpointercapture',
+        nativeEvent: 'lostpointercapture',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('lostpointercapture', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onMouseDown', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onMouseDown',
+        reactEventType: 'mousedown',
+        nativeEvent: 'mousedown',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('mousedown', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onMouseOut', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onMouseOut',
+        reactEventType: 'mouseout',
+        nativeEvent: 'mouseout',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('mouseout', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onMouseOver', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onMouseOver',
+        reactEventType: 'mouseover',
+        nativeEvent: 'mouseover',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('mouseover', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onMouseUp', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onMouseUp',
+        reactEventType: 'mouseup',
+        nativeEvent: 'mouseup',
+        dispatch(node) {
+          node.dispatchEvent(
+            new MouseEvent('mouseup', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPaste', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPaste',
+        reactEventType: 'paste',
+        nativeEvent: 'paste',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('paste', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPointerCancel', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPointerCancel',
+        reactEventType: 'pointercancel',
+        nativeEvent: 'pointercancel',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('pointercancel', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPointerDown', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPointerDown',
+        reactEventType: 'pointerdown',
+        nativeEvent: 'pointerdown',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('pointerdown', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPointerMove', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPointerMove',
+        reactEventType: 'pointermove',
+        nativeEvent: 'pointermove',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('pointermove', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPointerOut', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPointerOut',
+        reactEventType: 'pointerout',
+        nativeEvent: 'pointerout',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('pointerout', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPointerOver', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPointerOver',
+        reactEventType: 'pointerover',
+        nativeEvent: 'pointerover',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('pointerover', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onPointerUp', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onPointerUp',
+        reactEventType: 'pointerup',
+        nativeEvent: 'pointerup',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('pointerup', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onReset', async () => {
+      await testNativeBubblingEvent({
+        type: 'form',
+        reactEvent: 'onReset',
+        reactEventType: 'reset',
+        nativeEvent: 'reset',
+        dispatch(node) {
+          const e = new Event('reset', {
+            bubbles: true,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onSubmit', async () => {
+      await testNativeBubblingEvent({
+        type: 'form',
+        reactEvent: 'onSubmit',
+        reactEventType: 'submit',
+        nativeEvent: 'submit',
+        dispatch(node) {
+          const e = new Event('submit', {
+            bubbles: true,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onTouchCancel', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTouchCancel',
+        reactEventType: 'touchcancel',
+        nativeEvent: 'touchcancel',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('touchcancel', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTouchEnd', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTouchEnd',
+        reactEventType: 'touchend',
+        nativeEvent: 'touchend',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('touchend', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTouchMove', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTouchMove',
+        reactEventType: 'touchmove',
+        nativeEvent: 'touchmove',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('touchmove', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTouchStart', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTouchStart',
+        reactEventType: 'touchstart',
+        nativeEvent: 'touchstart',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('touchstart', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionRun', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionRun',
+        reactEventType: 'transitionrun',
+        nativeEvent: 'transitionrun',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionrun', {
+              bubbles: true,
+              cancelable: false,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionStart', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionStart',
+        reactEventType: 'transitionstart',
+        nativeEvent: 'transitionstart',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionstart', {
+              bubbles: true,
+              cancelable: false,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionCancel', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionCancel',
+        reactEventType: 'transitioncancel',
+        nativeEvent: 'transitioncancel',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitioncancel', {
+              bubbles: true,
+              cancelable: false,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionEnd', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionEnd',
+        reactEventType: 'transitionend',
+        nativeEvent: 'transitionend',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionend', {
+              bubbles: true,
+              cancelable: false,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onWheel', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onWheel',
+        reactEventType: 'wheel',
+        nativeEvent: 'wheel',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('wheel', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+  });
+
+  describe('non-bubbling events that bubble in React', () => {
+    it('onAbort', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onAbort',
+        reactEventType: 'abort',
+        nativeEvent: 'abort',
+        dispatch(node) {
+          const e = new Event('abort', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onCancel', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onCancel',
+        reactEventType: 'cancel',
+        nativeEvent: 'cancel',
+        dispatch(node) {
+          const e = new Event('cancel', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onCanPlay', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onCanPlay',
+        reactEventType: 'canplay',
+        nativeEvent: 'canplay',
+        dispatch(node) {
+          const e = new Event('canplay', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onCanPlayThrough', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onCanPlayThrough',
+        reactEventType: 'canplaythrough',
+        nativeEvent: 'canplaythrough',
+        dispatch(node) {
+          const e = new Event('canplaythrough', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onClose', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onClose',
+        reactEventType: 'close',
+        nativeEvent: 'close',
+        dispatch(node) {
+          const e = new Event('close', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onDurationChange', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onDurationChange',
+        reactEventType: 'durationchange',
+        nativeEvent: 'durationchange',
+        dispatch(node) {
+          const e = new Event('durationchange', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onEmptied', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onEmptied',
+        reactEventType: 'emptied',
+        nativeEvent: 'emptied',
+        dispatch(node) {
+          const e = new Event('emptied', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onEncrypted', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onEncrypted',
+        reactEventType: 'encrypted',
+        nativeEvent: 'encrypted',
+        dispatch(node) {
+          const e = new Event('encrypted', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onEnded', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onEnded',
+        reactEventType: 'ended',
+        nativeEvent: 'ended',
+        dispatch(node) {
+          const e = new Event('ended', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onError', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'img',
+        reactEvent: 'onError',
+        reactEventType: 'error',
+        nativeEvent: 'error',
+        dispatch(node) {
+          const e = new Event('error', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onInvalid', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'input',
+        reactEvent: 'onInvalid',
+        reactEventType: 'invalid',
+        nativeEvent: 'invalid',
+        dispatch(node) {
+          const e = new Event('invalid', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onLoad', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'img',
+        reactEvent: 'onLoad',
+        reactEventType: 'load',
+        nativeEvent: 'load',
+        dispatch(node) {
+          const e = new Event('load', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onLoadedData', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onLoadedData',
+        reactEventType: 'loadeddata',
+        nativeEvent: 'loadeddata',
+        dispatch(node) {
+          const e = new Event('loadeddata', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onLoadedMetadata', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onLoadedMetadata',
+        reactEventType: 'loadedmetadata',
+        nativeEvent: 'loadedmetadata',
+        dispatch(node) {
+          const e = new Event('loadedmetadata', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onLoadStart', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onLoadStart',
+        reactEventType: 'loadstart',
+        nativeEvent: 'loadstart',
+        dispatch(node) {
+          const e = new Event('loadstart', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onPause', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onPause',
+        reactEventType: 'pause',
+        nativeEvent: 'pause',
+        dispatch(node) {
+          const e = new Event('pause', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onPlay', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onPlay',
+        reactEventType: 'play',
+        nativeEvent: 'play',
+        dispatch(node) {
+          const e = new Event('play', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onPlaying', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onPlaying',
+        reactEventType: 'playing',
+        nativeEvent: 'playing',
+        dispatch(node) {
+          const e = new Event('playing', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onProgress', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onProgress',
+        reactEventType: 'progress',
+        nativeEvent: 'progress',
+        dispatch(node) {
+          const e = new Event('progress', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onRateChange', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onRateChange',
+        reactEventType: 'ratechange',
+        nativeEvent: 'ratechange',
+        dispatch(node) {
+          const e = new Event('ratechange', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onResize', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onResize',
+        reactEventType: 'resize',
+        nativeEvent: 'resize',
+        dispatch(node) {
+          const e = new Event('resize', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onSeeked', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onSeeked',
+        reactEventType: 'seeked',
+        nativeEvent: 'seeked',
+        dispatch(node) {
+          const e = new Event('seeked', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onSeeking', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onSeeking',
+        reactEventType: 'seeking',
+        nativeEvent: 'seeking',
+        dispatch(node) {
+          const e = new Event('seeking', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onStalled', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onStalled',
+        reactEventType: 'stalled',
+        nativeEvent: 'stalled',
+        dispatch(node) {
+          const e = new Event('stalled', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onSuspend', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onSuspend',
+        reactEventType: 'suspend',
+        nativeEvent: 'suspend',
+        dispatch(node) {
+          const e = new Event('suspend', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onTimeUpdate', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onTimeUpdate',
+        reactEventType: 'timeupdate',
+        nativeEvent: 'timeupdate',
+        dispatch(node) {
+          const e = new Event('timeupdate', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onToggle', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'details',
+        reactEvent: 'onToggle',
+        reactEventType: 'toggle',
+        nativeEvent: 'toggle',
+        dispatch(node) {
+          const e = new Event('toggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onBeforeToggle Popover API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'div',
+        targetProps: {popover: 'any'},
+        reactEvent: 'onBeforeToggle',
+        reactEventType: 'beforetoggle',
+        nativeEvent: 'beforetoggle',
+        dispatch(node) {
+          const e = new Event('beforetoggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onToggle Popover API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'div',
+        targetProps: {popover: 'any'},
+        reactEvent: 'onToggle',
+        reactEventType: 'toggle',
+        nativeEvent: 'toggle',
+        dispatch(node) {
+          const e = new Event('toggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onBeforeToggle Dialog API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onBeforeToggle',
+        reactEventType: 'beforetoggle',
+        nativeEvent: 'beforetoggle',
+        dispatch(node) {
+          const e = new Event('beforetoggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onToggle Dialog API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onToggle',
+        reactEventType: 'toggle',
+        nativeEvent: 'toggle',
+        dispatch(node) {
+          const e = new Event('toggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onVolumeChange', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onVolumeChange',
+        reactEventType: 'volumechange',
+        nativeEvent: 'volumechange',
+        dispatch(node) {
+          const e = new Event('volumechange', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onWaiting', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'video',
+        reactEvent: 'onWaiting',
+        reactEventType: 'waiting',
+        nativeEvent: 'waiting',
+        dispatch(node) {
+          const e = new Event('waiting', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+  });
+
+  describe('non-bubbling events that do not bubble in React', () => {
+    it('onScroll', async () => {
+      await testNonBubblingEvent({
+        type: 'div',
+        reactEvent: 'onScroll',
+        reactEventType: 'scroll',
+        nativeEvent: 'scroll',
+        dispatch(node) {
+          const e = new Event('scroll', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onScrollEnd', async () => {
+      await testNonBubblingEvent({
+        type: 'div',
+        reactEvent: 'onScrollEnd',
+        reactEventType: 'scrollend',
+        nativeEvent: 'scrollend',
+        dispatch(node) {
+          const e = new Event('scrollend', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+  });
+
+  // The tests for these events are currently very limited
+  // because they are fully synthetic, and so they don't
+  // work very well across different roots. For now, we'll
+  // just document the current state in these tests.
+  describe('enter/leave events', () => {
+    it('onMouseEnter and onMouseLeave', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="div"
+          targetRef={targetRef}
+          targetProps={{
+            onMouseEnter: e => {
+              log.push('---- inner enter');
+            },
+            onMouseLeave: e => {
+              log.push('---- inner leave');
+            },
+          }}
+          parentProps={{
+            onMouseEnter: e => {
+              log.push('--- inner parent enter');
+            },
+            onMouseLeave: e => {
+              log.push('--- inner parent leave');
+            },
+          }}
+          outerProps={{
+            onMouseEnter: e => {
+              log.push('-- outer enter');
+            },
+            onMouseLeave: e => {
+              log.push('-- outer leave');
+            },
+          }}
+          outerParentProps={{
+            onMouseEnter: e => {
+              log.push('- outer parent enter');
+            },
+            onMouseLeave: e => {
+              log.push('- outer parent leave');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      targetRef.current.dispatchEvent(
+        new MouseEvent('mouseover', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: null,
+        }),
+      );
+      // This order isn't ideal because each root
+      // has a separate traversal.
+      expect(log).toEqual(unindent`
+        --- inner parent enter
+        ---- inner enter
+        - outer parent enter
+        -- outer enter
+      `);
+      log.length = 0;
+      targetRef.current.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: document.body,
+        }),
+      );
+      expect(log).toEqual(unindent`
+        ---- inner leave
+        --- inner parent leave
+        -- outer leave
+        - outer parent leave
+      `);
+    });
+
+    it('onPointerEnter and onPointerLeave', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="div"
+          targetRef={targetRef}
+          targetProps={{
+            onPointerEnter: e => {
+              log.push('---- inner enter');
+            },
+            onPointerLeave: e => {
+              log.push('---- inner leave');
+            },
+          }}
+          parentProps={{
+            onPointerEnter: e => {
+              log.push('--- inner parent enter');
+            },
+            onPointerLeave: e => {
+              log.push('--- inner parent leave');
+            },
+          }}
+          outerProps={{
+            onPointerEnter: e => {
+              log.push('-- outer enter');
+            },
+            onPointerLeave: e => {
+              log.push('-- outer leave');
+            },
+          }}
+          outerParentProps={{
+            onPointerEnter: e => {
+              log.push('- outer parent enter');
+            },
+            onPointerLeave: e => {
+              log.push('- outer parent leave');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      targetRef.current.dispatchEvent(
+        new Event('pointerover', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: null,
+        }),
+      );
+      // This order isn't ideal because each root
+      // has a separate traversal.
+      expect(log).toEqual(unindent`
+        --- inner parent enter
+        ---- inner enter
+        - outer parent enter
+        -- outer enter
+      `);
+      log.length = 0;
+      targetRef.current.dispatchEvent(
+        new Event('pointerout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: document.body,
+        }),
+      );
+      expect(log).toEqual(unindent`
+        ---- inner leave
+        --- inner parent leave
+        -- outer leave
+        - outer parent leave
+      `);
+    });
+  });
+
+  const setUntrackedValue = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    'value',
+  ).set;
+
+  // The tests for these events are currently very limited
+  // because they are fully synthetic, and so they don't
+  // work very well across different roots. For now, we'll
+  // just document the current state in these tests.
+  describe('polyfilled events', () => {
+    it('onBeforeInput', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="input"
+          targetRef={targetRef}
+          targetProps={{
+            onBeforeInput: e => {
+              log.push('---- inner');
+            },
+            onBeforeInputCapture: e => {
+              log.push('---- inner capture');
+            },
+          }}
+          parentProps={{
+            onBeforeInput: e => {
+              log.push('--- inner parent');
+            },
+            onBeforeInputCapture: e => {
+              log.push('--- inner parent capture');
+            },
+          }}
+          outerProps={{
+            onBeforeInput: e => {
+              log.push('-- outer');
+            },
+            onBeforeInputCapture: e => {
+              log.push('-- outer capture');
+            },
+          }}
+          outerParentProps={{
+            onBeforeInput: e => {
+              log.push('- outer parent');
+            },
+            onBeforeInputCapture: e => {
+              expect(e.type).toBe('beforeinput');
+              log.push('- outer parent capture');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      const e = new Event('textInput', {
+        bubbles: true,
+      });
+      e.data = 'abcd';
+      targetRef.current.dispatchEvent(e);
+      // Since this is a polyfilled event,
+      // the capture and bubble phases are
+      // emulated, and don't align between roots.
+      expect(log).toEqual(unindent`
+        --- inner parent capture
+        ---- inner capture
+        ---- inner
+        --- inner parent
+        - outer parent capture
+        -- outer capture
+        -- outer
+        - outer parent
+      `);
+    });
+
+    it('onChange', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="input"
+          targetRef={targetRef}
+          targetProps={{
+            onChange: e => {
+              log.push('---- inner');
+            },
+            onChangeCapture: e => {
+              log.push('---- inner capture');
+            },
+          }}
+          parentProps={{
+            onChange: e => {
+              log.push('--- inner parent');
+            },
+            onChangeCapture: e => {
+              log.push('--- inner parent capture');
+            },
+          }}
+          outerProps={{
+            onChange: e => {
+              log.push('-- outer');
+            },
+            onChangeCapture: e => {
+              log.push('-- outer capture');
+            },
+          }}
+          outerParentProps={{
+            onChange: e => {
+              log.push('- outer parent');
+            },
+            onChangeCapture: e => {
+              expect(e.type).toBe('change');
+              log.push('- outer parent capture');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      setUntrackedValue.call(targetRef.current, 'hello');
+      targetRef.current.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+        }),
+      );
+      // The outer React doesn't receive the event at all
+      // because it is not responsible for this input.
+      expect(log).toEqual(unindent`
+        --- inner parent capture
+        ---- inner capture
+        ---- inner
+        --- inner parent
+      `);
+    });
+
+    it('onCompositionStart', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="input"
+          targetRef={targetRef}
+          targetProps={{
+            onCompositionStart: e => {
+              log.push('---- inner');
+            },
+            onCompositionStartCapture: e => {
+              log.push('---- inner capture');
+            },
+          }}
+          parentProps={{
+            onCompositionStart: e => {
+              log.push('--- inner parent');
+            },
+            onCompositionStartCapture: e => {
+              log.push('--- inner parent capture');
+            },
+          }}
+          outerProps={{
+            onCompositionStart: e => {
+              log.push('-- outer');
+            },
+            onCompositionStartCapture: e => {
+              log.push('-- outer capture');
+            },
+          }}
+          outerParentProps={{
+            onCompositionStart: e => {
+              log.push('- outer parent');
+            },
+            onCompositionStartCapture: e => {
+              expect(e.type).toBe('compositionstart');
+              log.push('- outer parent capture');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      const e = new Event('compositionstart', {
+        bubbles: true,
+      });
+      targetRef.current.dispatchEvent(e);
+      // Since this is a polyfilled event,
+      // the capture and bubble phases are
+      // emulated, and don't align between roots.
+      expect(log).toEqual(unindent`
+        --- inner parent capture
+        ---- inner capture
+        ---- inner
+        --- inner parent
+        - outer parent capture
+        -- outer capture
+        -- outer
+        - outer parent
+      `);
+    });
+
+    it('onCompositionEnd', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="input"
+          targetRef={targetRef}
+          targetProps={{
+            onCompositionEnd: e => {
+              log.push('---- inner');
+            },
+            onCompositionEndCapture: e => {
+              log.push('---- inner capture');
+            },
+          }}
+          parentProps={{
+            onCompositionEnd: e => {
+              log.push('--- inner parent');
+            },
+            onCompositionEndCapture: e => {
+              log.push('--- inner parent capture');
+            },
+          }}
+          outerProps={{
+            onCompositionEnd: e => {
+              log.push('-- outer');
+            },
+            onCompositionEndCapture: e => {
+              log.push('-- outer capture');
+            },
+          }}
+          outerParentProps={{
+            onCompositionEnd: e => {
+              log.push('- outer parent');
+            },
+            onCompositionEndCapture: e => {
+              expect(e.type).toBe('compositionend');
+              log.push('- outer parent capture');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      const e = new Event('compositionend', {
+        bubbles: true,
+      });
+      targetRef.current.dispatchEvent(e);
+      // Since this is a polyfilled event,
+      // the capture and bubble phases are
+      // emulated, and don't align between roots.
+      expect(log).toEqual(unindent`
+        --- inner parent capture
+        ---- inner capture
+        ---- inner
+        --- inner parent
+        - outer parent capture
+        -- outer capture
+        -- outer
+        - outer parent
+      `);
+    });
+
+    it('onCompositionUpdate', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="input"
+          targetRef={targetRef}
+          targetProps={{
+            onCompositionUpdate: e => {
+              log.push('---- inner');
+            },
+            onCompositionUpdateCapture: e => {
+              log.push('---- inner capture');
+            },
+          }}
+          parentProps={{
+            onCompositionUpdate: e => {
+              log.push('--- inner parent');
+            },
+            onCompositionUpdateCapture: e => {
+              log.push('--- inner parent capture');
+            },
+          }}
+          outerProps={{
+            onCompositionUpdate: e => {
+              log.push('-- outer');
+            },
+            onCompositionUpdateCapture: e => {
+              log.push('-- outer capture');
+            },
+          }}
+          outerParentProps={{
+            onCompositionUpdate: e => {
+              log.push('- outer parent');
+            },
+            onCompositionUpdateCapture: e => {
+              expect(e.type).toBe('compositionupdate');
+              log.push('- outer parent capture');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      const e = new Event('compositionupdate', {
+        bubbles: true,
+      });
+      targetRef.current.dispatchEvent(e);
+      // Since this is a polyfilled event,
+      // the capture and bubble phases are
+      // emulated, and don't align between roots.
+      expect(log).toEqual(unindent`
+        --- inner parent capture
+        ---- inner capture
+        ---- inner
+        --- inner parent
+        - outer parent capture
+        -- outer capture
+        -- outer
+        - outer parent
+      `);
+    });
+
+    it('onSelect', async () => {
+      const log = [];
+      const targetRef = React.createRef();
+      await render(
+        <Fixture
+          type="input"
+          targetRef={targetRef}
+          targetProps={{
+            onSelect: e => {
+              log.push('---- inner');
+            },
+            onSelectCapture: e => {
+              log.push('---- inner capture');
+            },
+          }}
+          parentProps={{
+            onSelect: e => {
+              log.push('--- inner parent');
+            },
+            onSelectCapture: e => {
+              log.push('--- inner parent capture');
+            },
+          }}
+          outerProps={{
+            onSelect: e => {
+              log.push('-- outer');
+            },
+            onSelectCapture: e => {
+              log.push('-- outer capture');
+            },
+          }}
+          outerParentProps={{
+            onSelect: e => {
+              log.push('- outer parent');
+            },
+            onSelectCapture: e => {
+              expect(e.type).toBe('select');
+              log.push('- outer parent capture');
+            },
+          }}
+        />,
+      );
+      expect(log.length).toBe(0);
+      targetRef.current.focus();
+      targetRef.current.dispatchEvent(
+        new Event('keydown', {
+          bubbles: true,
+        }),
+      );
+      // The outer React doesn't receive the event at all
+      // because it is not responsible for this input.
+      expect(log).toEqual(unindent`
+        --- inner parent capture
+        ---- inner capture
+        ---- inner
+        --- inner parent
+      `);
+    });
+  });
+
+  // Events that bubble in React and in the browser.
+  // React delegates them to the root.
+  async function testNativeBubblingEvent(config) {
+    await testNativeBubblingEventWithTargetListener(config);
+    await testNativeBubblingEventWithoutTargetListener(config);
+    await testReactStopPropagationInOuterCapturePhase(config);
+    await testReactStopPropagationInInnerCapturePhase(config);
+    await testReactStopPropagationInInnerBubblePhase(config);
+    await testReactStopPropagationInOuterBubblePhase(config);
+    await testNativeStopPropagationInOuterCapturePhase(config);
+    await testNativeStopPropagationInInnerCapturePhase(config);
+    await testNativeStopPropagationInInnerBubblePhase(config);
+    await testNativeStopPropagationInOuterBubblePhase(config);
+  }
+
+  // Events that bubble in React but not in the browser.
+  // React attaches them to the elements.
+  async function testEmulatedBubblingEvent(config) {
+    await testEmulatedBubblingEventWithTargetListener(config);
+    await testEmulatedBubblingEventWithoutTargetListener(config);
+    await testReactStopPropagationInOuterCapturePhase(config);
+    await testReactStopPropagationInInnerCapturePhase(config);
+    await testReactStopPropagationInInnerBubblePhase(config);
+    await testNativeStopPropagationInOuterCapturePhase(config);
+    await testNativeStopPropagationInInnerCapturePhase(config);
+    await testNativeStopPropagationInInnerEmulatedBubblePhase(config);
+  }
+
+  // Events that don't bubble either in React or in the browser.
+  async function testNonBubblingEvent(config) {
+    await testNonBubblingEventWithTargetListener(config);
+    await testNonBubblingEventWithoutTargetListener(config);
+    await testReactStopPropagationInOuterCapturePhase(config);
+    await testReactStopPropagationInInnerCapturePhase(config);
+    await testReactStopPropagationInInnerBubblePhase(config);
+    await testNativeStopPropagationInOuterCapturePhase(config);
+    await testNativeStopPropagationInInnerCapturePhase(config);
+  }
+
+  async function testNativeBubblingEventWithTargetListener(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // Should print all listeners.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+      --- inner parent
+      -- outer
+      - outer parent
+    `);
+  }
+
+  async function testEmulatedBubblingEventWithTargetListener(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          ...eventConfig.targetProps,
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // This event doesn't bubble natively, but React emulates it.
+    // Since the element is created by the inner React, the bubbling
+    // stops at the inner parent and never reaches the outer React.
+    // In the future, we might consider not bubbling these events
+    // at all, in which case inner parent also wouldn't be logged.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+      --- inner parent
+    `);
+  }
+
+  async function testNonBubblingEventWithTargetListener(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // This event doesn't bubble natively, and React is
+    // not emulating it either. So it only reaches the
+    // target and stops there.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+    `);
+  }
+
+  async function testNativeBubblingEventWithoutTargetListener(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={
+          {
+            // No listener on the target itself.
+          }
+        }
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // Should print all listeners except the innermost one.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      --- inner parent
+      -- outer
+      - outer parent
+    `);
+  }
+
+  async function testEmulatedBubblingEventWithoutTargetListener(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          ...eventConfig.targetProps,
+          // No listener on the target itself.
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // This event doesn't bubble natively, but React emulates it.
+    // Since the element is created by the inner React, the bubbling
+    // stops at the inner parent and never reaches the outer React.
+    // In the future, we might consider not bubbling these events
+    // at all, in which case inner parent also wouldn't be logged.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      --- inner parent
+    `);
+  }
+
+  async function testNonBubblingEventWithoutTargetListener(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={
+          {
+            // No listener on the target itself.
+          }
+        }
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // This event doesn't bubble native, and React doesn't
+    // emulate bubbling either. Since we don't have a target
+    // listener, only capture phase listeners fire.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+    `);
+  }
+
+  async function testReactStopPropagationInOuterCapturePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={node => {
+          targetRef.current = node;
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(eventConfig.nativeEvent, e => {
+              // We *don't* expect this to appear in the log
+              // at all because the event is stopped earlier.
+              log.push('---- inner (native)');
+            });
+          }
+        }}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            e.stopPropagation(); // <---------
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // Should stop at the outer capture.
+    // We don't get to the inner root at all.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+    `);
+  }
+
+  async function testReactStopPropagationInInnerCapturePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={node => {
+          targetRef.current = node;
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(eventConfig.nativeEvent, e => {
+              // We *don't* expect this to appear in the log
+              // at all because the event is stopped earlier.
+              log.push('---- inner (native)');
+            });
+          }
+        }}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            e.stopPropagation(); // <---------
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // We get to the inner root, but we don't
+    // get to the target and we don't bubble.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+    `);
+  }
+
+  async function testReactStopPropagationInInnerBubblePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          ...eventConfig.targetProps,
+          [eventConfig.reactEvent]: e => {
+            e.stopPropagation(); // <---------
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerRef={node => {
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(eventConfig.nativeEvent, e => {
+              // We *don't* expect this to appear in the log
+              // at all because the event is stopped earlier.
+              log.push('-- outer (native)');
+            });
+          }
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // Should stop at the target and not go further.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+    `);
+  }
+
+  async function testReactStopPropagationInOuterBubblePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            e.stopPropagation(); // <---------
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // Should not reach the parent outer bubble handler.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+      --- inner parent
+      -- outer
+    `);
+  }
+
+  async function testNativeStopPropagationInOuterCapturePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentRef={node => {
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(
+              eventConfig.nativeEvent,
+              e => {
+                log.push('- outer parent capture (native)');
+                e.stopPropagation(); // <---------
+              },
+              {capture: true},
+            );
+          }
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // The outer root has already received the event,
+    // so the capture phrase runs for it. But the inner
+    // root is prevented from receiving it by the native
+    // handler in the outer native capture phase.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      - outer parent capture (native)
+    `);
+  }
+
+  async function testNativeStopPropagationInInnerCapturePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentRef={node => {
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(
+              eventConfig.nativeEvent,
+              e => {
+                log.push('--- inner parent capture (native)');
+                e.stopPropagation(); // <---------
+              },
+              {capture: true},
+            );
+          }
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // The inner root has already received the event, so
+    // all React capture phase listeners should run.
+    // But then the native handler stops propagation
+    // so none of the bubbling React handlers would run.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      --- inner parent capture (native)
+    `);
+  }
+
+  async function testNativeStopPropagationInInnerBubblePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={node => {
+          targetRef.current = node;
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(eventConfig.nativeEvent, e => {
+              log.push('---- inner (native)');
+              e.stopPropagation(); // <---------
+            });
+          }
+        }}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // The capture phase is entirely unaffected.
+    // Then, we get into the bubble phase.
+    // We start with the native innermost handler.
+    // It stops propagation, so nothing else happens.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner (native)
+    `);
+  }
+
+  async function testNativeStopPropagationInInnerEmulatedBubblePhase(
+    eventConfig,
+  ) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={node => {
+          targetRef.current = node;
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(eventConfig.nativeEvent, e => {
+              log.push('---- inner (native)');
+              e.stopPropagation(); // <---------
+            });
+          }
+        }}
+        targetProps={{
+          ...eventConfig.targetProps,
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // This event does not natively bubble, so React
+    // attaches the listener directly to the element.
+    // As a result, by the time our custom native listener
+    // fires, it is too late to do anything -- the React
+    // emulated bubbilng has already happened.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+      --- inner parent
+      ---- inner (native)
+    `);
+  }
+
+  async function testNativeStopPropagationInOuterBubblePhase(eventConfig) {
+    const log = [];
+    const targetRef = React.createRef();
+    await render(
+      <Fixture
+        type={eventConfig.type}
+        targetRef={targetRef}
+        targetProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('---- inner');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('---- inner capture');
+          },
+        }}
+        parentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('--- inner parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('--- inner parent capture');
+          },
+        }}
+        outerRef={node => {
+          if (node) {
+            // No cleanup, assume we render once.
+            node.addEventListener(eventConfig.nativeEvent, e => {
+              log.push('-- outer (native)');
+              e.stopPropagation(); // <---------
+            });
+          }
+        }}
+        outerProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('-- outer');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            log.push('-- outer capture');
+          },
+        }}
+        outerParentProps={{
+          [eventConfig.reactEvent]: e => {
+            log.push('- outer parent');
+          },
+          [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
+            log.push('- outer parent capture');
+          },
+        }}
+      />,
+    );
+    expect(log.length).toBe(0);
+    eventConfig.dispatch(targetRef.current);
+    // The event bubbles upwards through the inner tree.
+    // Then it reaches the native handler which stops propagation.
+    // As a result, it never reaches the outer React root,
+    // and thus the outer React event handlers don't fire.
+    expect(log).toEqual(unindent`
+      - outer parent capture
+      -- outer capture
+      --- inner parent capture
+      ---- inner capture
+      ---- inner
+      --- inner parent
+      -- outer (native)
+    `);
+  }
+
+  function Fixture({
+    type,
+    targetRef,
+    targetProps,
+    parentRef,
+    parentProps,
+    outerRef,
+    outerProps,
+    outerParentRef,
+    outerParentProps,
+  }) {
+    const inner = React.useMemo(
+      () => (
+        <Inner
+          type={type}
+          targetRef={targetRef}
+          targetProps={targetProps}
+          parentRef={parentRef}
+          parentProps={parentProps}
+        />
+      ),
+      [type, targetRef, targetProps, parentProps],
+    );
+    return (
+      <Outer
+        outerRef={outerRef}
+        outerProps={outerProps}
+        outerParentRef={outerParentRef}
+        outerParentProps={outerParentProps}>
+        <NestedReact>{inner}</NestedReact>
+      </Outer>
+    );
+  }
+
+  function NestedReact({children}) {
+    const ref = React.useRef();
+    React.useLayoutEffect(() => {
+      const parent = ref.current;
+      const innerContainer = document.createElement('div');
+      parent.appendChild(innerContainer);
+      const innerReactRoot = InnerReactDOMClient.createRoot(innerContainer);
+      InnerReactDOM.flushSync(() => {
+        innerReactRoot.render(children);
+      });
+      return () => {
+        innerReactRoot.unmount();
+        parent.removeChild(innerContainer);
+      };
+    }, [children, ref]);
+    return <div ref={ref} />;
+  }
+
+  function Inner({type, targetRef, targetProps, parentRef, parentProps}) {
+    const T = type;
+    return (
+      <div {...parentProps} ref={parentRef}>
+        <T {...targetProps} ref={targetRef} />
+      </div>
+    );
+  }
+
+  function Outer({
+    outerRef,
+    outerProps,
+    outerParentProps,
+    outerParentRef,
+    children,
+  }) {
+    return (
+      <div {...outerParentProps} ref={outerParentRef}>
+        <div {...outerProps} ref={outerRef}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  function unindent(str) {
+    return str[0]
+      .split('\n')
+      .map(s => s.trim())
+      .filter(s => s !== '');
+  }
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
new file mode 100644
index 00000000000..87cc1365303
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -0,0 +1,1332 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let ReactDOMClient;
+let Scheduler;
+
+let act;
+let assertConsoleErrorDev;
+let assertLog;
+let root;
+let JSDOM;
+
+describe('ReactDOMFiber', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    // JSDOM needs to be setup with a TextEncoder and TextDecoder when used standalone
+    // https://github.com/jsdom/jsdom/issues/2524
+    (() => {
+      const {TextEncoder, TextDecoder} = require('util');
+      global.TextEncoder = TextEncoder;
+      global.TextDecoder = TextDecoder;
+      JSDOM = require('jsdom').JSDOM;
+    })();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    PropTypes = require('prop-types');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    ({assertConsoleErrorDev, assertLog} = require('internal-test-utils'));
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = ReactDOMClient.createRoot(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+    jest.restoreAllMocks();
+  });
+
+  it('should render strings as children', async () => {
+    const Box = ({value}) => <div>{value}</div>;
+    await act(async () => {
+      root.render(<Box value="foo" />);
+    });
+    expect(container.textContent).toEqual('foo');
+  });
+
+  it('should render numbers as children', async () => {
+    const Box = ({value}) => <div>{value}</div>;
+
+    await act(async () => {
+      root.render(<Box value={10} />);
+    });
+
+    expect(container.textContent).toEqual('10');
+  });
+
+  it('should render bigints as children', async () => {
+    const Box = ({value}) => <div>{value}</div>;
+
+    await act(async () => {
+      root.render(<Box value={10n} />);
+    });
+
+    expect(container.textContent).toEqual('10');
+  });
+
+  it('should call an effect after mount/update (replacing render callback pattern)', async () => {
+    function Component() {
+      React.useEffect(() => {
+        Scheduler.log('Callback');
+      });
+      return <div>Foo</div>;
+    }
+
+    // mounting phase
+    await act(async () => {
+      root.render(<Component />);
+    });
+    assertLog(['Callback']);
+
+    // updating phase
+    await act(async () => {
+      root.render(<Component />);
+    });
+    assertLog(['Callback']);
+  });
+
+  it('should call an effect when the same element is re-rendered (replacing render callback pattern)', async () => {
+    function Component({prop}) {
+      React.useEffect(() => {
+        Scheduler.log('Callback');
+      });
+      return <div>{prop}</div>;
+    }
+
+    // mounting phase
+    await act(async () => {
+      root.render(<Component prop="Foo" />);
+    });
+    assertLog(['Callback']);
+
+    // updating phase
+    await act(async () => {
+      root.render(<Component prop="Bar" />);
+    });
+    assertLog(['Callback']);
+  });
+
+  it('should render a component returning strings directly from render', async () => {
+    const Text = ({value}) => value;
+
+    await act(async () => {
+      root.render(<Text value="foo" />);
+    });
+
+    expect(container.textContent).toEqual('foo');
+  });
+
+  it('should render a component returning numbers directly from render', async () => {
+    const Text = ({value}) => value;
+    await act(async () => {
+      root.render(<Text value={10} />);
+    });
+
+    expect(container.textContent).toEqual('10');
+  });
+
+  it('renders an empty fragment', async () => {
+    const Div = () => <div />;
+    const EmptyFragment = () => <></>;
+    const NonEmptyFragment = () => (
+      <>
+        <Div />
+      </>
+    );
+
+    await act(async () => {
+      root.render(<EmptyFragment />);
+    });
+    expect(container.firstChild).toBe(null);
+
+    await act(async () => {
+      root.render(<NonEmptyFragment />);
+    });
+    expect(container.firstChild.tagName).toBe('DIV');
+
+    await act(async () => {
+      root.render(<EmptyFragment />);
+    });
+    expect(container.firstChild).toBe(null);
+
+    await act(async () => {
+      root.render(<Div />);
+    });
+    expect(container.firstChild.tagName).toBe('DIV');
+
+    await act(async () => {
+      root.render(<EmptyFragment />);
+    });
+    expect(container.firstChild).toBe(null);
+  });
+
+  let svgEls, htmlEls, mathEls;
+  const expectSVG = {ref: el => svgEls.push(el)};
+  const expectHTML = {ref: el => htmlEls.push(el)};
+  const expectMath = {ref: el => mathEls.push(el)};
+
+  const usePortal = function (tree) {
+    return ReactDOM.createPortal(tree, document.createElement('div'));
+  };
+
+  const assertNamespacesMatch = async function (tree) {
+    const testContainer = document.createElement('div');
+    svgEls = [];
+    htmlEls = [];
+    mathEls = [];
+
+    const testRoot = ReactDOMClient.createRoot(testContainer);
+    await act(async () => {
+      testRoot.render(tree);
+    });
+    svgEls.forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    });
+    htmlEls.forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+    });
+    mathEls.forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+    });
+
+    testRoot.unmount();
+    expect(testContainer.innerHTML).toBe('');
+  };
+
+  it('should render one portal', async () => {
+    const portalContainer = document.createElement('div');
+
+    await act(() => {
+      root.render(
+        <div>{ReactDOM.createPortal(<div>portal</div>, portalContainer)}</div>,
+      );
+    });
+    expect(portalContainer.innerHTML).toBe('<div>portal</div>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    root.unmount();
+    expect(portalContainer.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render many portals', async () => {
+    const portalContainer1 = document.createElement('div');
+    const portalContainer2 = document.createElement('div');
+
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.log(`${this.props.name} componentDidMount`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`${this.props.name} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        Scheduler.log(`${this.props.name} componentWillUnmount`);
+      }
+      render() {
+        return <div>{this.props.name}</div>;
+      }
+    }
+
+    class Parent extends React.Component {
+      componentDidMount() {
+        Scheduler.log(`Parent:${this.props.step} componentDidMount`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`Parent:${this.props.step} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        Scheduler.log(`Parent:${this.props.step} componentWillUnmount`);
+      }
+      render() {
+        const {step} = this.props;
+        return [
+          <Child key="a" name={`normal[0]:${step}`} />,
+          ReactDOM.createPortal(
+            <Child key="b" name={`portal1[0]:${step}`} />,
+            portalContainer1,
+          ),
+          <Child key="c" name={`normal[1]:${step}`} />,
+          ReactDOM.createPortal(
+            [
+              <Child key="d" name={`portal2[0]:${step}`} />,
+              <Child key="e" name={`portal2[1]:${step}`} />,
+            ],
+            portalContainer2,
+          ),
+        ];
+      }
+    }
+
+    await act(() => {
+      root.render(<Parent step="a" />);
+    });
+    expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:a</div>');
+    expect(portalContainer2.innerHTML).toBe(
+      '<div>portal2[0]:a</div><div>portal2[1]:a</div>',
+    );
+    expect(container.innerHTML).toBe(
+      '<div>normal[0]:a</div><div>normal[1]:a</div>',
+    );
+    assertLog([
+      'normal[0]:a componentDidMount',
+      'portal1[0]:a componentDidMount',
+      'normal[1]:a componentDidMount',
+      'portal2[0]:a componentDidMount',
+      'portal2[1]:a componentDidMount',
+      'Parent:a componentDidMount',
+    ]);
+
+    await act(() => {
+      root.render(<Parent step="b" />);
+    });
+    expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:b</div>');
+    expect(portalContainer2.innerHTML).toBe(
+      '<div>portal2[0]:b</div><div>portal2[1]:b</div>',
+    );
+    expect(container.innerHTML).toBe(
+      '<div>normal[0]:b</div><div>normal[1]:b</div>',
+    );
+    assertLog([
+      'normal[0]:b componentDidUpdate',
+      'portal1[0]:b componentDidUpdate',
+      'normal[1]:b componentDidUpdate',
+      'portal2[0]:b componentDidUpdate',
+      'portal2[1]:b componentDidUpdate',
+      'Parent:b componentDidUpdate',
+    ]);
+
+    root.unmount();
+    expect(portalContainer1.innerHTML).toBe('');
+    expect(portalContainer2.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('');
+    assertLog([
+      'Parent:b componentWillUnmount',
+      'normal[0]:b componentWillUnmount',
+      'portal1[0]:b componentWillUnmount',
+      'normal[1]:b componentWillUnmount',
+      'portal2[0]:b componentWillUnmount',
+      'portal2[1]:b componentWillUnmount',
+    ]);
+  });
+
+  it('should render nested portals', async () => {
+    const portalContainer1 = document.createElement('div');
+    const portalContainer2 = document.createElement('div');
+    const portalContainer3 = document.createElement('div');
+
+    await act(() => {
+      root.render([
+        <div key="a">normal[0]</div>,
+        ReactDOM.createPortal(
+          [
+            <div key="b">portal1[0]</div>,
+            ReactDOM.createPortal(
+              <div key="c">portal2[0]</div>,
+              portalContainer2,
+            ),
+            ReactDOM.createPortal(
+              <div key="d">portal3[0]</div>,
+              portalContainer3,
+            ),
+            <div key="e">portal1[1]</div>,
+          ],
+          portalContainer1,
+        ),
+        <div key="f">normal[1]</div>,
+      ]);
+    });
+    expect(portalContainer1.innerHTML).toBe(
+      '<div>portal1[0]</div><div>portal1[1]</div>',
+    );
+    expect(portalContainer2.innerHTML).toBe('<div>portal2[0]</div>');
+    expect(portalContainer3.innerHTML).toBe('<div>portal3[0]</div>');
+    expect(container.innerHTML).toBe(
+      '<div>normal[0]</div><div>normal[1]</div>',
+    );
+
+    root.unmount();
+    expect(portalContainer1.innerHTML).toBe('');
+    expect(portalContainer2.innerHTML).toBe('');
+    expect(portalContainer3.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should reconcile portal children', async () => {
+    const portalContainer = document.createElement('div');
+
+    await act(() => {
+      root.render(
+        <div>
+          {ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}
+        </div>,
+      );
+    });
+    expect(portalContainer.innerHTML).toBe('<div>portal:1</div>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    await act(() => {
+      root.render(
+        <div>
+          {ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}
+        </div>,
+      );
+    });
+    expect(portalContainer.innerHTML).toBe('<div>portal:2</div>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    await act(() => {
+      root.render(
+        <div>{ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}</div>,
+      );
+    });
+    expect(portalContainer.innerHTML).toBe('<p>portal:3</p>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    await act(() => {
+      root.render(
+        <div>{ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}</div>,
+      );
+    });
+    expect(portalContainer.innerHTML).toBe('HiBye');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    await act(() => {
+      root.render(
+        <div>{ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}</div>,
+      );
+    });
+    expect(portalContainer.innerHTML).toBe('ByeHi');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    await act(() => {
+      root.render(<div>{ReactDOM.createPortal(null, portalContainer)}</div>);
+    });
+    expect(portalContainer.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  it('should unmount empty portal component wherever it appears', async () => {
+    const portalContainer = document.createElement('div');
+    let instance;
+    class Wrapper extends React.Component {
+      constructor(props) {
+        super(props);
+        instance = this;
+        this.state = {
+          show: true,
+        };
+      }
+      render() {
+        return (
+          <div>
+            {this.state.show && (
+              <>
+                {ReactDOM.createPortal(null, portalContainer)}
+                <div>child</div>
+              </>
+            )}
+            <div>parent</div>
+          </div>
+        );
+      }
+    }
+
+    await act(() => {
+      root.render(<Wrapper />);
+    });
+    expect(container.innerHTML).toBe(
+      '<div><div>child</div><div>parent</div></div>',
+    );
+    await act(() => {
+      instance.setState({show: false});
+    });
+    expect(instance.state.show).toBe(false);
+    expect(container.innerHTML).toBe('<div><div>parent</div></div>');
+  });
+
+  it('should keep track of namespace across portals (simple)', async () => {
+    await assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <image {...expectSVG} />
+        {usePortal(<div {...expectHTML} />)}
+        <image {...expectSVG} />
+      </svg>,
+    );
+    await assertNamespacesMatch(
+      <math {...expectMath}>
+        <mi {...expectMath} />
+        {usePortal(<div {...expectHTML} />)}
+        <mi {...expectMath} />
+      </math>,
+    );
+    await assertNamespacesMatch(
+      <div {...expectHTML}>
+        <p {...expectHTML} />
+        {usePortal(
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <p {...expectHTML} />
+      </div>,
+    );
+  });
+
+  it('should keep track of namespace across portals (medium)', async () => {
+    await assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <image {...expectSVG} />
+        {usePortal(<div {...expectHTML} />)}
+        <image {...expectSVG} />
+        {usePortal(<div {...expectHTML} />)}
+        <image {...expectSVG} />
+      </svg>,
+    );
+    await assertNamespacesMatch(
+      <div {...expectHTML}>
+        <math {...expectMath}>
+          <mi {...expectMath} />
+          {usePortal(
+            <svg {...expectSVG}>
+              <image {...expectSVG} />
+            </svg>,
+          )}
+        </math>
+        <p {...expectHTML} />
+      </div>,
+    );
+    await assertNamespacesMatch(
+      <math {...expectMath}>
+        <mi {...expectMath} />
+        {usePortal(
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+            <foreignObject {...expectSVG}>
+              <p {...expectHTML} />
+              <math {...expectMath}>
+                <mi {...expectMath} />
+              </math>
+              <p {...expectHTML} />
+            </foreignObject>
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <mi {...expectMath} />
+      </math>,
+    );
+    await assertNamespacesMatch(
+      <div {...expectHTML}>
+        {usePortal(
+          <svg {...expectSVG}>
+            {usePortal(<div {...expectHTML} />)}
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <p {...expectHTML} />
+      </div>,
+    );
+    await assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <svg {...expectSVG}>
+          {usePortal(<div {...expectHTML} />)}
+          <image {...expectSVG} />
+        </svg>
+        <image {...expectSVG} />
+      </svg>,
+    );
+  });
+
+  it('should keep track of namespace across portals (complex)', async () => {
+    await assertNamespacesMatch(
+      <div {...expectHTML}>
+        {usePortal(
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <p {...expectHTML} />
+        <svg {...expectSVG}>
+          <image {...expectSVG} />
+        </svg>
+        <svg {...expectSVG}>
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+          </svg>
+          <image {...expectSVG} />
+        </svg>
+        <p {...expectHTML} />
+      </div>,
+    );
+    await assertNamespacesMatch(
+      <div {...expectHTML}>
+        <svg {...expectSVG}>
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+            {usePortal(
+              <svg {...expectSVG}>
+                <image {...expectSVG} />
+                <svg {...expectSVG}>
+                  <image {...expectSVG} />
+                </svg>
+                <image {...expectSVG} />
+              </svg>,
+            )}
+            <image {...expectSVG} />
+            <foreignObject {...expectSVG}>
+              <p {...expectHTML} />
+              {usePortal(<p {...expectHTML} />)}
+              <p {...expectHTML} />
+            </foreignObject>
+          </svg>
+          <image {...expectSVG} />
+        </svg>
+        <p {...expectHTML} />
+      </div>,
+    );
+    await assertNamespacesMatch(
+      <div {...expectHTML}>
+        <svg {...expectSVG}>
+          <foreignObject {...expectSVG}>
+            <p {...expectHTML} />
+            {usePortal(
+              <svg {...expectSVG}>
+                <image {...expectSVG} />
+                <svg {...expectSVG}>
+                  <image {...expectSVG} />
+                  <foreignObject {...expectSVG}>
+                    <p {...expectHTML} />
+                  </foreignObject>
+                  {usePortal(<p {...expectHTML} />)}
+                </svg>
+                <image {...expectSVG} />
+              </svg>,
+            )}
+            <p {...expectHTML} />
+          </foreignObject>
+          <image {...expectSVG} />
+        </svg>
+        <p {...expectHTML} />
+      </div>,
+    );
+  });
+
+  it('should unwind namespaces on uncaught errors', async () => {
+    function BrokenRender() {
+      throw new Error('Hello');
+    }
+
+    await expect(async () => {
+      await assertNamespacesMatch(
+        <svg {...expectSVG}>
+          <BrokenRender />
+        </svg>,
+      );
+    }).rejects.toThrow('Hello');
+    await assertNamespacesMatch(<div {...expectHTML} />);
+  });
+
+  it('should unwind namespaces on caught errors', async () => {
+    function BrokenRender() {
+      throw new Error('Hello');
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <p {...expectHTML} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    await assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <foreignObject {...expectSVG}>
+          <ErrorBoundary>
+            <math {...expectMath}>
+              <BrokenRender />
+            </math>
+          </ErrorBoundary>
+        </foreignObject>
+        <image {...expectSVG} />
+      </svg>,
+    );
+    await assertNamespacesMatch(<div {...expectHTML} />);
+  });
+
+  it('should unwind namespaces on caught errors in a portal', async () => {
+    function BrokenRender() {
+      throw new Error('Hello');
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <image {...expectSVG} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    await assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <ErrorBoundary>
+          {usePortal(
+            <div {...expectHTML}>
+              <math {...expectMath}>
+                <BrokenRender />)
+              </math>
+            </div>,
+          )}
+        </ErrorBoundary>
+        {usePortal(<div {...expectHTML} />)}
+      </svg>,
+    );
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass portal context when rendering subtree elsewhere', async () => {
+    const portalContainer = 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',
+        };
+      }
+
+      render() {
+        return ReactDOM.createPortal(<Component />, portalContainer);
+      }
+    }
+
+    await act(async () => {
+      root.render(<Parent />);
+    });
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Component uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+    ]);
+    expect(container.innerHTML).toBe('');
+    expect(portalContainer.innerHTML).toBe('<div>bar</div>');
+  });
+
+  it('should bubble events from the portal to the parent', async () => {
+    const portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+    try {
+      let portal = null;
+
+      await act(() => {
+        root.render(
+          <div onClick={() => Scheduler.log('parent clicked')}>
+            {ReactDOM.createPortal(
+              <div
+                onClick={() => Scheduler.log('portal clicked')}
+                ref={n => (portal = n)}>
+                portal
+              </div>,
+              portalContainer,
+            )}
+          </div>,
+        );
+      });
+
+      expect(portal.tagName).toBe('DIV');
+
+      await act(() => {
+        portal.click();
+      });
+
+      assertLog(['portal clicked', 'parent clicked']);
+    } finally {
+      document.body.removeChild(portalContainer);
+    }
+  });
+
+  it('should not onMouseLeave when staying in the portal', async () => {
+    const portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+
+    let firstTarget = null;
+    let secondTarget = null;
+    let thirdTarget = null;
+
+    function simulateMouseMove(from, to) {
+      if (from) {
+        from.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: to,
+          }),
+        );
+      }
+      if (to) {
+        to.dispatchEvent(
+          new MouseEvent('mouseover', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: from,
+          }),
+        );
+      }
+    }
+
+    try {
+      await act(() => {
+        root.render(
+          <div>
+            <div
+              onMouseEnter={() => Scheduler.log('enter parent')}
+              onMouseLeave={() => Scheduler.log('leave parent')}>
+              <div ref={n => (firstTarget = n)} />
+              {ReactDOM.createPortal(
+                <div
+                  onMouseEnter={() => Scheduler.log('enter portal')}
+                  onMouseLeave={() => Scheduler.log('leave portal')}
+                  ref={n => (secondTarget = n)}>
+                  portal
+                </div>,
+                portalContainer,
+              )}
+            </div>
+            <div ref={n => (thirdTarget = n)} />
+          </div>,
+        );
+      });
+      await act(() => {
+        simulateMouseMove(null, firstTarget);
+      });
+      assertLog(['enter parent']);
+
+      await act(() => {
+        simulateMouseMove(firstTarget, secondTarget);
+      });
+      assertLog([
+        // Parent did not invoke leave because we're still inside the portal.
+        'enter portal',
+      ]);
+
+      await act(() => {
+        simulateMouseMove(secondTarget, thirdTarget);
+      });
+      assertLog([
+        'leave portal',
+        'leave parent', // Only when we leave the portal does onMouseLeave fire.
+      ]);
+    } finally {
+      document.body.removeChild(portalContainer);
+    }
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/19562
+  it('does not fire mouseEnter twice when relatedTarget is the root node', async () => {
+    let target = null;
+
+    function simulateMouseMove(from, to) {
+      if (from) {
+        from.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: to,
+          }),
+        );
+      }
+      if (to) {
+        to.dispatchEvent(
+          new MouseEvent('mouseover', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: from,
+          }),
+        );
+      }
+    }
+
+    await act(() => {
+      root.render(
+        <div
+          ref={n => (target = n)}
+          onMouseEnter={() => Scheduler.log('enter')}
+          onMouseLeave={() => Scheduler.log('leave')}
+        />,
+      );
+    });
+
+    await act(() => {
+      simulateMouseMove(null, container);
+    });
+    assertLog([]);
+
+    await act(() => {
+      simulateMouseMove(container, target);
+    });
+    assertLog(['enter']);
+
+    await act(() => {
+      simulateMouseMove(target, container);
+    });
+    assertLog(['leave']);
+
+    await act(() => {
+      simulateMouseMove(container, null);
+    });
+    assertLog([]);
+  });
+
+  it('listens to events that do not exist in the Portal subtree', async () => {
+    const onClick = jest.fn();
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(
+        <div onClick={onClick}>
+          {ReactDOM.createPortal(
+            <button ref={ref}>click</button>,
+            document.body,
+          )}
+        </div>,
+      );
+    });
+    const event = new MouseEvent('click', {
+      bubbles: true,
+    });
+    await act(() => {
+      ref.current.dispatchEvent(event);
+    });
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should throw on bad createPortal argument', () => {
+    expect(() => {
+      ReactDOM.createPortal(<div>portal</div>, null);
+    }).toThrow('Target container is not a DOM element.');
+    expect(() => {
+      ReactDOM.createPortal(<div>portal</div>, document.createTextNode('hi'));
+    }).toThrow('Target container is not a DOM element.');
+  });
+
+  it('should warn for non-functional event listeners', () => {
+    class Example extends React.Component {
+      render() {
+        return <div onClick="woops" />;
+      }
+    }
+    ReactDOM.flushSync(() => {
+      root.render(<Example />);
+    });
+    assertConsoleErrorDev([
+      'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
+        '    in div (at **)\n' +
+        '    in Example (at **)',
+    ]);
+  });
+
+  it('should warn with a special message for `false` event listeners', () => {
+    class Example extends React.Component {
+      render() {
+        return <div onClick={false} />;
+      }
+    }
+    ReactDOM.flushSync(() => {
+      root.render(<Example />);
+    });
+    assertConsoleErrorDev([
+      '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' +
+        '    in div (at **)\n' +
+        '    in Example (at **)',
+    ]);
+  });
+
+  it('should not update event handlers until commit', async () => {
+    const handlerA = () => Scheduler.log('A');
+    const handlerB = () => Scheduler.log('B');
+
+    function click() {
+      const event = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(event, 'timeStamp', {
+        value: 0,
+      });
+      node.dispatchEvent(event);
+    }
+
+    class Example extends React.Component {
+      state = {flip: false, count: 0};
+      flip() {
+        this.setState({flip: true, count: this.state.count + 1});
+      }
+      tick() {
+        this.setState({count: this.state.count + 1});
+      }
+      render() {
+        const useB = !this.props.forceA && this.state.flip;
+        return <div onClick={useB ? handlerB : handlerA} />;
+      }
+    }
+
+    class Click extends React.Component {
+      constructor() {
+        super();
+        node.click();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    let inst;
+    await act(() => {
+      root.render([<Example key="a" ref={n => (inst = n)} />]);
+    });
+    const node = container.firstChild;
+    expect(node.tagName).toEqual('DIV');
+
+    await act(() => {
+      click();
+    });
+
+    assertLog(['A']);
+
+    // Render with the other event handler.
+    await act(() => {
+      inst.flip();
+    });
+
+    await act(() => {
+      click();
+    });
+
+    assertLog(['B']);
+
+    // Rerender without changing any props.
+    await act(() => {
+      inst.tick();
+    });
+
+    await act(() => {
+      click();
+    });
+
+    assertLog(['B']);
+
+    // Render a flip back to the A handler. The second component invokes the
+    // click handler during render to simulate a click during an aborted
+    // render. I use this hack because at current time we don't have a way to
+    // test aborted ReactDOM renders.
+    await act(() => {
+      root.render([<Example key="a" forceA={true} />, <Click key="b" />]);
+    });
+
+    // Because the new click handler has not yet committed, we should still
+    // invoke B.
+    assertLog(['B']);
+
+    // Any click that happens after commit, should invoke A.
+    await act(() => {
+      click();
+    });
+    assertLog(['A']);
+  });
+
+  it('should not crash encountering low-priority tree', async () => {
+    await act(() => {
+      root.render(
+        <div hidden={true}>
+          <div />
+        </div>,
+      );
+    });
+
+    expect(container.innerHTML).toBe('<div hidden=""><div></div></div>');
+  });
+
+  it('should not warn when rendering into an empty container', async () => {
+    await act(() => {
+      root.render(<div>foo</div>);
+    });
+    expect(container.innerHTML).toBe('<div>foo</div>');
+    await act(() => {
+      root.render(null);
+    });
+    expect(container.innerHTML).toBe('');
+    await act(() => {
+      root.render(<div>bar</div>);
+    });
+    expect(container.innerHTML).toBe('<div>bar</div>');
+  });
+
+  it('should warn when replacing a container which was manually updated outside of React', async () => {
+    // when not messing with the DOM outside of React
+    await act(() => {
+      root.render(<div key="1">foo</div>);
+    });
+    expect(container.innerHTML).toBe('<div>foo</div>');
+
+    await act(() => {
+      root.render(<div key="1">bar</div>);
+    });
+    expect(container.innerHTML).toBe('<div>bar</div>');
+
+    // then we mess with the DOM before an update
+    // we know this will error - that is expected right now
+    // It's an error of type 'NotFoundError' with no message
+    container.innerHTML = '<div>MEOW.</div>';
+
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.flushSync(() => {
+          root.render(<div key="2">baz</div>);
+        });
+      });
+    }).rejects.toThrow('The node to be removed is not a child of this node');
+  });
+
+  it('should not warn when doing an update to a container manually updated outside of React', async () => {
+    // when not messing with the DOM outside of React
+    await act(() => {
+      root.render(<div>foo</div>);
+    });
+    expect(container.innerHTML).toBe('<div>foo</div>');
+
+    await act(() => {
+      root.render(<div>bar</div>);
+    });
+    expect(container.innerHTML).toBe('<div>bar</div>');
+
+    // then we mess with the DOM before an update
+    container.innerHTML = '<div>MEOW.</div>';
+
+    await act(() => {
+      root.render(<div>baz</div>);
+    });
+    // TODO: why not, and no error?
+    expect(container.innerHTML).toBe('<div>MEOW.</div>');
+  });
+
+  it('should not warn when doing an update to a container manually cleared outside of React', async () => {
+    // when not messing with the DOM outside of React
+    await act(() => {
+      root.render(<div>foo</div>);
+    });
+    expect(container.innerHTML).toBe('<div>foo</div>');
+
+    await act(() => {
+      root.render(<div>bar</div>);
+    });
+    expect(container.innerHTML).toBe('<div>bar</div>');
+
+    // then we mess with the DOM before an update
+    container.innerHTML = '';
+
+    await act(() => {
+      root.render(<div>baz</div>);
+    });
+    // TODO: why not, and no error?
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render a text component with a text DOM node on the same document as the container', async () => {
+    // 1. Create a new document through the use of iframe
+    // 2. Set up the spy to make asserts when a text component
+    //    is rendered inside the iframe container
+    const textContent = 'Hello world';
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const iframeDocument = iframe.contentDocument;
+    iframeDocument.write(
+      '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
+    );
+    iframeDocument.close();
+    const iframeContainer = iframeDocument.body.firstChild;
+
+    let actualDocument;
+    let textNode;
+
+    spyOnDevAndProd(iframeContainer, 'appendChild').mockImplementation(node => {
+      actualDocument = node.ownerDocument;
+      textNode = node;
+    });
+
+    const iFrameRoot = ReactDOMClient.createRoot(iframeContainer);
+    await act(() => {
+      iFrameRoot.render(textContent);
+    });
+
+    expect(textNode.textContent).toBe(textContent);
+    expect(actualDocument).not.toBe(document);
+    expect(actualDocument).toBe(iframeDocument);
+    expect(iframeContainer.appendChild).toHaveBeenCalledTimes(1);
+  });
+
+  it('should mount into a document fragment', async () => {
+    const fragment = document.createDocumentFragment();
+    const fragmentRoot = ReactDOMClient.createRoot(fragment);
+    await act(() => {
+      fragmentRoot.render(<div>foo</div>);
+    });
+    expect(container.innerHTML).toBe('');
+    container.appendChild(fragment);
+    expect(container.innerHTML).toBe('<div>foo</div>');
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/12643#issuecomment-413727104
+  it('should not diff memoized host components', async () => {
+    const inputRef = React.createRef();
+    let didCallOnChange = false;
+
+    class Child extends React.Component {
+      state = {};
+      componentDidMount() {
+        document.addEventListener('click', this.update, true);
+      }
+      componentWillUnmount() {
+        document.removeEventListener('click', this.update, true);
+      }
+      update = () => {
+        // We're testing that this setState()
+        // doesn't cause React to commit updates
+        // to the input outside (which would itself
+        // prevent the parent's onChange parent handler
+        // from firing).
+        this.setState({});
+        // Note that onChange was always broken when there was an
+        // earlier setState() in a manual document capture phase
+        // listener *in the same component*. But that's very rare.
+        // Here we're testing that a *child* component doesn't break
+        // the parent if this happens.
+      };
+      render() {
+        return <div />;
+      }
+    }
+
+    class Parent extends React.Component {
+      handleChange = val => {
+        didCallOnChange = true;
+      };
+      render() {
+        return (
+          <div>
+            <Child />
+            <input
+              ref={inputRef}
+              type="checkbox"
+              checked={true}
+              onChange={this.handleChange}
+            />
+          </div>
+        );
+      }
+    }
+
+    await act(() => {
+      root.render(<Parent />);
+    });
+    await act(() => {
+      inputRef.current.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+    });
+    expect(didCallOnChange).toBe(true);
+  });
+
+  it('should restore selection in the correct window', async () => {
+    // creating new JSDOM instance to get a second window as window.open is not implemented
+    // https://github.com/jsdom/jsdom/blob/c53efc81e75f38a0558fbf3ed75d30b78b4c4898/lib/jsdom/browser/Window.js#L987
+    const {window: newWindow} = new JSDOM('');
+    // creating a new container since the default cleanup expects the existing container to be in the document
+    const newContainer = newWindow.document.createElement('div');
+    newWindow.document.body.appendChild(newContainer);
+    root = ReactDOMClient.createRoot(newContainer);
+
+    const Test = () => {
+      const [reverse, setReverse] = React.useState(false);
+      const [items] = React.useState(() => ['a', 'b', 'c']);
+      const onClick = () => {
+        setReverse(true);
+      };
+
+      // shuffle the items so that the react commit needs to restore focus
+      // to the correct element after commit
+      const itemsToRender = reverse ? items.reverse() : items;
+
+      return (
+        <div>
+          {itemsToRender.map(item => (
+            <button onClick={onClick} key={item} id={item}>
+              {item}
+            </button>
+          ))}
+        </div>
+      );
+    };
+
+    await act(() => {
+      root.render(<Test />);
+    });
+
+    newWindow.document.getElementById('a').focus();
+    await act(() => {
+      newWindow.document.getElementById('a').click();
+    });
+
+    expect(newWindow.document.activeElement).not.toBe(newWindow.document.body);
+    expect(newWindow.document.activeElement.innerHTML).toBe('a');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
new file mode 100644
index 00000000000..c1dc8a33cce
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -0,0 +1,907 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let act;
+let waitForAll;
+let waitFor;
+let waitForMicrotasks;
+let assertLog;
+let assertConsoleErrorDev;
+
+const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
+  HTMLInputElement.prototype,
+  'value',
+).set;
+
+describe('ReactDOMFiberAsync', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForMicrotasks = InternalTestUtils.waitForMicrotasks;
+    assertLog = InternalTestUtils.assertLog;
+
+    document.body.appendChild(container);
+    window.event = undefined;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  // @gate !disableLegacyMode
+  it('renders synchronously by default in legacy mode', () => {
+    const ops = [];
+    ReactDOM.render(<div>Hi</div>, container, () => {
+      ops.push(container.textContent);
+    });
+    ReactDOM.render(<div>Bye</div>, container, () => {
+      ops.push(container.textContent);
+    });
+    expect(ops).toEqual(['Hi', 'Bye']);
+  });
+
+  it('flushSync batches sync updates and flushes them at the end of the batch', async () => {
+    const ops = [];
+    let instance;
+
+    class Component extends React.Component {
+      state = {text: ''};
+      componentDidMount() {
+        instance = this;
+      }
+
+      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 = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Component />));
+
+    await act(() => {
+      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']);
+    await act(() => {
+      instance.push('D');
+    });
+    expect(container.textContent).toEqual('ABCD');
+    expect(ops).toEqual(['A', 'ABC', 'ABCD']);
+  });
+
+  it('flushSync flushes updates even if nested inside another flushSync', async () => {
+    const ops = [];
+    let instance;
+
+    class Component extends React.Component {
+      state = {text: ''};
+      componentDidMount() {
+        instance = this;
+      }
+
+      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 = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Component />));
+
+    await act(() => {
+      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 logs an error if already performing work', async () => {
+    class Component extends React.Component {
+      componentDidUpdate() {
+        ReactDOM.flushSync();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    // Initial mount
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+    // Update
+    ReactDOM.flushSync(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      'flushSync was called from inside a lifecycle method. ' +
+        'React cannot flush when React is already rendering. ' +
+        'Consider moving this call to a scheduler task or micro task.\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  describe('concurrent mode', () => {
+    it('does not perform deferred updates synchronously', async () => {
+      const inputRef = React.createRef();
+      const asyncValueRef = React.createRef();
+      const syncValueRef = React.createRef();
+
+      class Counter extends React.Component {
+        state = {asyncValue: '', syncValue: ''};
+
+        handleChange = e => {
+          const nextValue = e.target.value;
+          React.startTransition(() => {
+            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 = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Counter />));
+      expect(asyncValueRef.current.textContent).toBe('');
+      expect(syncValueRef.current.textContent).toBe('');
+
+      await act(() => {
+        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.
+      expect(asyncValueRef.current.textContent).toBe('hello');
+      expect(syncValueRef.current.textContent).toBe('hello');
+    });
+
+    it('top-level updates are concurrent', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div>Hi</div>);
+        expect(container.textContent).toEqual('');
+      });
+      expect(container.textContent).toEqual('Hi');
+
+      await act(() => {
+        root.render(<div>Bye</div>);
+        expect(container.textContent).toEqual('Hi');
+      });
+      expect(container.textContent).toEqual('Bye');
+    });
+
+    it('deep updates (setState) are concurrent', async () => {
+      let instance;
+      class Component extends React.Component {
+        state = {step: 0};
+        render() {
+          instance = this;
+          return <div>{this.state.step}</div>;
+        }
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<Component />);
+        expect(container.textContent).toEqual('');
+      });
+      expect(container.textContent).toEqual('0');
+
+      await act(() => {
+        instance.setState({step: 1});
+        expect(container.textContent).toEqual('0');
+      });
+      expect(container.textContent).toEqual('1');
+    });
+
+    it('flushSync flushes updates before end of the tick', async () => {
+      let instance;
+
+      class Component extends React.Component {
+        state = {text: ''};
+        push(val) {
+          this.setState(state => ({text: state.text + val}));
+        }
+        componentDidUpdate() {
+          Scheduler.log(this.state.text);
+        }
+        render() {
+          instance = this;
+          return <span>{this.state.text}</span>;
+        }
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Component />));
+
+      // Updates are async by default
+      instance.push('A');
+      assertLog([]);
+      expect(container.textContent).toEqual('');
+
+      ReactDOM.flushSync(() => {
+        instance.push('B');
+        instance.push('C');
+        // Not flushed yet
+        expect(container.textContent).toEqual('');
+        assertLog([]);
+      });
+      // Only the active updates have flushed
+      expect(container.textContent).toEqual('ABC');
+      assertLog(['ABC']);
+
+      await act(() => {
+        instance.push('D');
+        expect(container.textContent).toEqual('ABC');
+        assertLog([]);
+      });
+      assertLog(['ABCD']);
+      expect(container.textContent).toEqual('ABCD');
+    });
+
+    it('ignores discrete events on a pending removed element', async () => {
+      const disableButtonRef = React.createRef();
+      const submitButtonRef = React.createRef();
+
+      function Form() {
+        const [active, setActive] = React.useState(true);
+        function disableForm() {
+          setActive(false);
+        }
+
+        return (
+          <div>
+            <button onClick={disableForm} ref={disableButtonRef}>
+              Disable
+            </button>
+            {active ? <button ref={submitButtonRef}>Submit</button> : null}
+          </div>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Form />);
+      });
+
+      const disableButton = disableButtonRef.current;
+      expect(disableButton.tagName).toBe('BUTTON');
+
+      const submitButton = submitButtonRef.current;
+      expect(submitButton.tagName).toBe('BUTTON');
+
+      // Dispatch a click event on the Disable-button.
+      const firstEvent = document.createEvent('Event');
+      firstEvent.initEvent('click', true, true);
+      disableButton.dispatchEvent(firstEvent);
+
+      // The click event is flushed synchronously, even in concurrent mode.
+      expect(submitButton.current).toBe(undefined);
+    });
+
+    it('ignores discrete events on a pending removed event listener', async () => {
+      const disableButtonRef = React.createRef();
+      const submitButtonRef = React.createRef();
+
+      let formSubmitted = false;
+
+      function Form() {
+        const [active, setActive] = React.useState(true);
+        function disableForm() {
+          setActive(false);
+        }
+        function submitForm() {
+          formSubmitted = true; // This should not get invoked
+        }
+        function disabledSubmitForm() {
+          // The form is disabled.
+        }
+        return (
+          <div>
+            <button onClick={disableForm} ref={disableButtonRef}>
+              Disable
+            </button>
+            <button
+              onClick={active ? submitForm : disabledSubmitForm}
+              ref={submitButtonRef}>
+              Submit
+            </button>
+          </div>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Form />);
+      });
+
+      const disableButton = disableButtonRef.current;
+      expect(disableButton.tagName).toBe('BUTTON');
+
+      // Dispatch a click event on the Disable-button.
+      const firstEvent = document.createEvent('Event');
+      firstEvent.initEvent('click', true, true);
+      await act(() => {
+        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.
+      const submitButton = submitButtonRef.current;
+      expect(submitButton.tagName).toBe('BUTTON');
+
+      // In the meantime, we can dispatch a new client event on the submit button.
+      const 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.
+      await act(() => {
+        submitButton.dispatchEvent(secondEvent);
+      });
+
+      // Therefore the form should never have been submitted.
+      expect(formSubmitted).toBe(false);
+    });
+
+    it('uses the newest discrete events on a pending changed event listener', async () => {
+      const enableButtonRef = React.createRef();
+      const submitButtonRef = React.createRef();
+
+      let formSubmitted = false;
+
+      function Form() {
+        const [active, setActive] = React.useState(false);
+        function enableForm() {
+          setActive(true);
+        }
+        function submitForm() {
+          formSubmitted = true; // This should not get invoked
+        }
+        return (
+          <div>
+            <button onClick={enableForm} ref={enableButtonRef}>
+              Enable
+            </button>
+            <button onClick={active ? submitForm : null} ref={submitButtonRef}>
+              Submit
+            </button>
+          </div>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Form />);
+      });
+
+      const enableButton = enableButtonRef.current;
+      expect(enableButton.tagName).toBe('BUTTON');
+
+      // Dispatch a click event on the Enable-button.
+      const firstEvent = document.createEvent('Event');
+      firstEvent.initEvent('click', true, true);
+      await act(() => {
+        enableButton.dispatchEvent(firstEvent);
+      });
+
+      // There should now be a pending update to enable the form.
+
+      // This should not have flushed yet since it's in concurrent mode.
+      const submitButton = submitButtonRef.current;
+      expect(submitButton.tagName).toBe('BUTTON');
+
+      // In the meantime, we can dispatch a new client event on the submit button.
+      const 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.
+      await act(() => {
+        submitButton.dispatchEvent(secondEvent);
+      });
+
+      // Therefore the form should have been submitted.
+      expect(formSubmitted).toBe(true);
+    });
+  });
+
+  it('regression test: does not drop passive effects across roots (#17066)', async () => {
+    const {useState, useEffect} = React;
+
+    function App({label}) {
+      const [step, setStep] = useState(0);
+      useEffect(() => {
+        if (step < 3) {
+          setStep(step + 1);
+        }
+      }, [step]);
+
+      // The component should keep re-rendering itself until `step` is 3.
+      return step === 3 ? 'Finished' : 'Unresolved';
+    }
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+    const rootC = ReactDOMClient.createRoot(containerC);
+
+    await act(() => {
+      rootA.render(<App label="A" />);
+      rootB.render(<App label="B" />);
+      rootC.render(<App label="C" />);
+    });
+
+    expect(containerA.textContent).toEqual('Finished');
+    expect(containerB.textContent).toEqual('Finished');
+    expect(containerC.textContent).toEqual('Finished');
+  });
+
+  it('updates flush without yielding in the next event', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    function Text(props) {
+      Scheduler.log(props.text);
+      return props.text;
+    }
+
+    root.render(
+      <>
+        <Text text="A" />
+        <Text text="B" />
+        <Text text="C" />
+      </>,
+    );
+
+    // Nothing should have rendered yet
+    expect(container.textContent).toEqual('');
+
+    // Everything should render immediately in the next event
+    await waitForAll(['A', 'B', 'C']);
+    expect(container.textContent).toEqual('ABC');
+  });
+
+  it('unmounted roots should never clear newer root content from a container', async () => {
+    const ref = React.createRef();
+
+    function OldApp() {
+      const [value, setValue] = React.useState('old');
+      function hideOnClick() {
+        // Schedule a discrete update.
+        setValue('update');
+        // Synchronously unmount this root.
+        ReactDOM.flushSync(() => oldRoot.unmount());
+      }
+      return (
+        <button onClick={hideOnClick} ref={ref}>
+          {value}
+        </button>
+      );
+    }
+
+    function NewApp() {
+      return <button ref={ref}>new</button>;
+    }
+
+    const oldRoot = ReactDOMClient.createRoot(container);
+    await act(() => {
+      oldRoot.render(<OldApp />);
+    });
+
+    // Invoke discrete event.
+    ref.current.click();
+
+    // The root should now be unmounted.
+    expect(container.textContent).toBe('');
+
+    // We can now render a new one.
+    const newRoot = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      newRoot.render(<NewApp />);
+    });
+    ref.current.click();
+
+    expect(container.textContent).toBe('new');
+  });
+
+  it('should synchronously render the transition lane scheduled in a popState', async () => {
+    function App() {
+      const [syncState, setSyncState] = React.useState(false);
+      const [hasNavigated, setHasNavigated] = React.useState(false);
+      function onPopstate() {
+        Scheduler.log(`popState`);
+        React.startTransition(() => {
+          setHasNavigated(true);
+        });
+        setSyncState(true);
+      }
+      React.useEffect(() => {
+        window.addEventListener('popstate', onPopstate);
+        return () => {
+          window.removeEventListener('popstate', onPopstate);
+        };
+      }, []);
+      Scheduler.log(`render:${hasNavigated}/${syncState}`);
+      return null;
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog(['render:false/false']);
+
+    await act(async () => {
+      const popStateEvent = new Event('popstate');
+      // Jest is not emulating window.event correctly in the microtask
+      window.event = popStateEvent;
+      window.dispatchEvent(popStateEvent);
+      queueMicrotask(() => {
+        window.event = undefined;
+      });
+    });
+
+    assertLog(['popState', 'render:true/true']);
+    await act(() => {
+      root.unmount();
+    });
+  });
+
+  it('Should not flush transition lanes if there is no transition scheduled in popState', async () => {
+    let setHasNavigated;
+    function App() {
+      const [syncState, setSyncState] = React.useState(false);
+      const [hasNavigated, _setHasNavigated] = React.useState(false);
+      setHasNavigated = _setHasNavigated;
+      function onPopstate() {
+        setSyncState(true);
+      }
+
+      React.useEffect(() => {
+        window.addEventListener('popstate', onPopstate);
+        return () => {
+          window.removeEventListener('popstate', onPopstate);
+        };
+      }, []);
+
+      Scheduler.log(`render:${hasNavigated}/${syncState}`);
+      return null;
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog(['render:false/false']);
+
+    React.startTransition(() => {
+      setHasNavigated(true);
+    });
+    await act(async () => {
+      const popStateEvent = new Event('popstate');
+      // Jest is not emulating window.event correctly in the microtask
+      window.event = popStateEvent;
+      window.dispatchEvent(popStateEvent);
+      queueMicrotask(() => {
+        window.event = undefined;
+      });
+    });
+    assertLog(['render:false/true', 'render:true/true']);
+    await act(() => {
+      root.unmount();
+    });
+  });
+
+  it('transition lane in popState should be allowed to suspend', async () => {
+    let resolvePromise;
+    const promise = new Promise(res => {
+      resolvePromise = res;
+    });
+
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    function App() {
+      const [pathname, setPathname] = React.useState('/path/a');
+
+      if (pathname !== '/path/a') {
+        try {
+          React.use(promise);
+        } catch (e) {
+          Scheduler.log(`Suspend! [${pathname}]`);
+          throw e;
+        }
+      }
+
+      React.useEffect(() => {
+        function onPopstate() {
+          React.startTransition(() => {
+            setPathname('/path/b');
+          });
+        }
+        window.addEventListener('popstate', onPopstate);
+        return () => window.removeEventListener('popstate', onPopstate);
+      }, []);
+
+      return (
+        <>
+          <Text text="Before" />
+          <div>
+            <Text text={pathname} />
+          </div>
+          <Text text="After" />
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog(['Before', '/path/a', 'After']);
+
+    const div = container.getElementsByTagName('div')[0];
+    expect(div.textContent).toBe('/path/a');
+
+    // Simulate a popstate event
+    await act(async () => {
+      const popStateEvent = new Event('popstate');
+
+      // Simulate a popstate event
+      window.event = popStateEvent;
+      window.dispatchEvent(popStateEvent);
+      await waitForMicrotasks();
+      window.event = undefined;
+
+      // The transition lane should have been attempted synchronously (in
+      // a microtask)
+      assertLog(['Suspend! [/path/b]']);
+      // Because it suspended, it remains on the current path
+      expect(div.textContent).toBe('/path/a');
+    });
+    // pre-warming
+    assertLog(['Suspend! [/path/b]']);
+
+    await act(async () => {
+      resolvePromise();
+
+      // Since the transition previously suspended, there's no need for this
+      // transition to be rendered synchronously on susbequent attempts; if we
+      // fail to commit synchronously the first time, the scroll restoration
+      // state won't be restored anyway.
+      //
+      // Yield in between each child to prove that it's concurrent.
+      await waitForMicrotasks();
+      assertLog([]);
+
+      await waitFor(['Before']);
+      await waitFor(['/path/b']);
+      await waitFor(['After']);
+    });
+    assertLog([]);
+    expect(div.textContent).toBe('/path/b');
+    await act(() => {
+      root.unmount();
+    });
+  });
+
+  it('regression: useDeferredValue in popState leads to infinite deferral loop', async () => {
+    // At the time this test was written, it simulated a particular crash that
+    // was happened due to a combination of very subtle implementation details.
+    // Rather than couple this test to those implementation details, I've chosen
+    // to keep it as high-level as possible so that it doesn't break if the
+    // details change. In the future, it might not be trigger the exact set of
+    // internal circumstances anymore, but it could be useful for catching
+    // similar bugs because it represents a realistic real world situation —
+    // namely, switching tabs repeatedly in an app that uses useDeferredValue.
+    //
+    // But don't worry too much about why this test is written the way it is.
+
+    // Represents the browser's current location
+    let browserPathname = '/path/a';
+
+    let setPathname;
+    function App({initialPathname}) {
+      const [pathname, _setPathname] = React.useState('/path/a');
+      setPathname = _setPathname;
+
+      const deferredPathname = React.useDeferredValue(pathname);
+
+      // Attach a popstate listener on mount. Normally this would be in the
+      // in the router implementation.
+      React.useEffect(() => {
+        function onPopstate() {
+          React.startTransition(() => {
+            setPathname(browserPathname);
+          });
+        }
+        window.addEventListener('popstate', onPopstate);
+        return () => window.removeEventListener('popstate', onPopstate);
+      }, []);
+
+      return `Current:  ${pathname}\nDeferred: ${deferredPathname}`;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App initialPathname={browserPathname} />);
+    });
+
+    // Simulate a series of popstate events that toggle back and forth between
+    // two locations. In the original regression case, a certain combination
+    // of transition lanes would cause React to fall into an infinite deferral
+    // loop — specifically, when the spawned by the useDeferredValue hook was
+    // assigned a "higher" bit value than the one assigned to the "popstate".
+
+    // For alignment reasons, call this once to advance the internal variable
+    // that assigns transition lanes. Because this is a no-op update, it will
+    // bump the counter, but it won't trigger the useDeferredValue hook.
+    setPathname(browserPathname);
+
+    // Trigger enough popstate events that the scenario occurs for every
+    // possible transition lane.
+    for (let i = 0; i < 50; i++) {
+      await act(async () => {
+        // Simulate a popstate event
+        browserPathname = browserPathname === '/path/a' ? '/path/b' : '/path/a';
+        const popStateEvent = new Event('popstate');
+        window.event = popStateEvent;
+        window.dispatchEvent(popStateEvent);
+        await waitForMicrotasks();
+        window.event = undefined;
+      });
+    }
+  });
+
+  it('regression: infinite deferral loop caused by unstable useDeferredValue input', async () => {
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    let i = 0;
+    function App() {
+      const [pathname, setPathname] = React.useState('/path/a');
+      // This is an unstable input, so it will always cause a deferred render.
+      const {value: deferredPathname} = React.useDeferredValue({
+        value: pathname,
+      });
+      if (i++ > 100) {
+        throw new Error('Infinite loop detected');
+      }
+      React.useEffect(() => {
+        function onPopstate() {
+          React.startTransition(() => {
+            setPathname('/path/b');
+          });
+        }
+        window.addEventListener('popstate', onPopstate);
+        return () => window.removeEventListener('popstate', onPopstate);
+      }, []);
+
+      return <Text text={deferredPathname} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['/path/a']);
+    expect(container.textContent).toBe('/path/a');
+
+    // Simulate a popstate event
+    await act(async () => {
+      const popStateEvent = new Event('popstate');
+
+      // Simulate a popstate event
+      window.event = popStateEvent;
+      window.dispatchEvent(popStateEvent);
+      await waitForMicrotasks();
+      window.event = undefined;
+
+      // The transition lane is attempted synchronously (in a microtask).
+      // Because the input to useDeferredValue is referentially unstable, it
+      // will spawn a deferred task at transition priority. However, even
+      // though it was spawned during a transition event, the spawned task
+      // not also be upgraded to sync.
+      assertLog(['/path/a']);
+    });
+    assertLog(['/path/b']);
+    expect(container.textContent).toBe('/path/b');
+    await act(() => {
+      root.unmount();
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js
new file mode 100644
index 00000000000..805bf89c4f1
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  insertNodesAndExecuteScripts,
+  getVisibleChildren,
+} from '../test-utils/FizzTestUtils';
+import {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let act;
+let serverAct;
+let assertLog;
+let waitForPaint;
+let container;
+let React;
+let Scheduler;
+let ReactDOMServer;
+let ReactDOMClient;
+let useDeferredValue;
+let Suspense;
+
+describe('ReactDOMFizzForm', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    Scheduler = require('scheduler');
+    patchMessageChannel();
+    act = require('internal-test-utils').act;
+    serverAct = require('internal-test-utils').serverAct;
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.browser');
+    ReactDOMClient = require('react-dom/client');
+    useDeferredValue = React.useDeferredValue;
+    Suspense = React.Suspense;
+    assertLog = require('internal-test-utils').assertLog;
+    waitForPaint = require('internal-test-utils').waitForPaint;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    insertNodesAndExecuteScripts(temp, container, null);
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('returns initialValue argument, if provided', async () => {
+    function App() {
+      return useDeferredValue('Final', 'Initial');
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    expect(container.textContent).toEqual('Initial');
+
+    // After hydration, it's updated to the final value
+    await act(() => ReactDOMClient.hydrateRoot(container, <App />));
+    expect(container.textContent).toEqual('Final');
+  });
+
+  it(
+    'useDeferredValue during hydration has higher priority than remaining ' +
+      'incremental hydration',
+    async () => {
+      function B() {
+        const text = useDeferredValue('B [Final]', 'B [Initial]');
+        return <Text text={text} />;
+      }
+
+      function App() {
+        return (
+          <div>
+            <span>
+              <Text text="A" />
+            </span>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <span>
+                <B />
+              </span>
+              <div>
+                <Suspense fallback={<Text text="Loading..." />}>
+                  <span id="C" ref={cRef}>
+                    <Text text="C" />
+                  </span>
+                </Suspense>
+              </div>
+            </Suspense>
+          </div>
+        );
+      }
+
+      const cRef = React.createRef();
+
+      const stream = await serverAct(() =>
+        ReactDOMServer.renderToReadableStream(<App />),
+      );
+      await readIntoContainer(stream);
+      assertLog(['A', 'B [Initial]', 'C']);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span>A</span>
+          <span>B [Initial]</span>
+          <div>
+            <span id="C">C</span>
+          </div>
+        </div>,
+      );
+
+      const serverRenderedC = document.getElementById('C');
+
+      // On the client, we first hydrate the initial value, then upgrade
+      // to final.
+      await act(async () => {
+        ReactDOMClient.hydrateRoot(container, <App />);
+
+        // First the outermost Suspense boundary hydrates.
+        await waitForPaint(['A']);
+        expect(cRef.current).toBe(null);
+
+        // Then the next level hydrates. This level includes a useDeferredValue,
+        // so we should prioritize upgrading it before we proceed to hydrating
+        // additional levels.
+        await waitForPaint(['B [Initial]']);
+        expect(getVisibleChildren(container)).toEqual(
+          <div>
+            <span>A</span>
+            <span>B [Initial]</span>
+            <div>
+              <span id="C">C</span>
+            </div>
+          </div>,
+        );
+        expect(cRef.current).toBe(null);
+
+        // This paint should only update B. C should still be dehydrated.
+        await waitForPaint(['B [Final]']);
+        expect(getVisibleChildren(container)).toEqual(
+          <div>
+            <span>A</span>
+            <span>B [Final]</span>
+            <div>
+              <span id="C">C</span>
+            </div>
+          </div>,
+        );
+        expect(cRef.current).toBe(null);
+      });
+      // Finally we can hydrate C
+      assertLog(['C']);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span>A</span>
+          <span>B [Final]</span>
+          <div>
+            <span id="C">C</span>
+          </div>
+        </div>,
+      );
+      expect(cRef.current).toBe(serverRenderedC);
+    },
+  );
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
new file mode 100644
index 00000000000..3210f04221f
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
@@ -0,0 +1,755 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {insertNodesAndExecuteScripts} from '../test-utils/FizzTestUtils';
+import {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let act;
+let serverAct;
+let container;
+let React;
+let ReactDOMServer;
+let ReactDOMClient;
+let Suspense;
+let useFormStatus;
+let useOptimistic;
+let useActionState;
+let assertConsoleErrorDev;
+
+describe('ReactDOMFizzForm', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    patchMessageChannel();
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.browser');
+    ReactDOMClient = require('react-dom/client');
+    Suspense = React.Suspense;
+    useFormStatus = require('react-dom').useFormStatus;
+    useOptimistic = require('react').useOptimistic;
+    act = require('internal-test-utils').act;
+    serverAct = require('internal-test-utils').serverAct;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    // TODO: Test the old api but it warns so needs warnings to be asserted.
+    // if (__VARIANT__) {
+    // Remove after API is deleted.
+    // useActionState = require('react-dom').useFormState;
+    // }
+    useActionState = require('react').useActionState;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function submit(submitter) {
+    const form = submitter.form || submitter;
+    if (!submitter.form) {
+      submitter = undefined;
+    }
+    const submitEvent = new Event('submit', {bubbles: true, cancelable: true});
+    submitEvent.submitter = submitter;
+    const returnValue = form.dispatchEvent(submitEvent);
+    if (!returnValue) {
+      return;
+    }
+    const action =
+      (submitter && submitter.getAttribute('formaction')) || form.action;
+    if (!/\s*javascript:/i.test(action)) {
+      throw new Error('Navigate to: ' + action);
+    }
+  }
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    insertNodesAndExecuteScripts(temp, container, null);
+  }
+
+  it('should allow passing a function to form action during SSR', async () => {
+    const ref = React.createRef();
+    let foo;
+
+    function action(formData) {
+      foo = formData.get('foo');
+    }
+    function App() {
+      return (
+        <form action={action} ref={ref}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    submit(ref.current);
+
+    expect(foo).toBe('bar');
+  });
+
+  it('should allow passing a function to an input/button formAction', async () => {
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    let rootActionCalled = false;
+    let savedTitle = null;
+    let deletedTitle = null;
+
+    function action(formData) {
+      rootActionCalled = true;
+    }
+
+    function saveItem(formData) {
+      savedTitle = formData.get('title');
+    }
+
+    function deleteItem(formData) {
+      deletedTitle = formData.get('title');
+    }
+
+    function App() {
+      return (
+        <form action={action}>
+          <input type="text" name="title" defaultValue="Hello" />
+          <input
+            type="submit"
+            formAction={saveItem}
+            value="Save"
+            ref={inputRef}
+          />
+          <button formAction={deleteItem} ref={buttonRef}>
+            Delete
+          </button>
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(savedTitle).toBe(null);
+    expect(deletedTitle).toBe(null);
+
+    submit(inputRef.current);
+    expect(savedTitle).toBe('Hello');
+    expect(deletedTitle).toBe(null);
+    savedTitle = null;
+
+    submit(buttonRef.current);
+    expect(savedTitle).toBe(null);
+    expect(deletedTitle).toBe('Hello');
+    deletedTitle = null;
+
+    expect(rootActionCalled).toBe(false);
+  });
+
+  it('should warn when passing a function action during SSR and string during hydration', async () => {
+    function action(formData) {}
+    function App({isClient}) {
+      return (
+        <form action={isClient ? 'action' : action}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />);
+    });
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n\n" +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\n' +
+        'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\n' +
+        'https://react.dev/link/hydration-mismatch\n\n' +
+        '  <App isClient={true}>\n' +
+        '    <form\n' +
+        '+     action="action"\n' +
+        '-     action="function"\n' +
+        '    >\n' +
+        '\n    in form (at **)' +
+        '\n    in App (at **)',
+    ]);
+  });
+
+  it('should ideally warn when passing a string during SSR and function during hydration', async () => {
+    function action(formData) {}
+    function App({isClient}) {
+      return (
+        <form action={isClient ? action : 'action'}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    // This should ideally warn because only the client provides a function that doesn't line up.
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />);
+    });
+  });
+
+  it('should reset form fields after you update away from hydrated function', async () => {
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    function action(formData) {}
+    function App({isUpdate}) {
+      return (
+        <form
+          action={isUpdate ? 'action' : action}
+          ref={formRef}
+          method={isUpdate ? 'POST' : null}>
+          <input
+            type="submit"
+            formAction={isUpdate ? 'action' : action}
+            ref={inputRef}
+            formTarget={isUpdate ? 'elsewhere' : null}
+          />
+          <button
+            formAction={isUpdate ? 'action' : action}
+            ref={buttonRef}
+            formEncType={isUpdate ? 'multipart/form-data' : null}
+          />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    let root;
+    await act(async () => {
+      root = ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    await act(async () => {
+      root.render(<App isUpdate={true} />);
+    });
+    expect(formRef.current.getAttribute('action')).toBe('action');
+    expect(formRef.current.hasAttribute('encType')).toBe(false);
+    expect(formRef.current.getAttribute('method')).toBe('POST');
+    expect(formRef.current.hasAttribute('target')).toBe(false);
+
+    expect(inputRef.current.getAttribute('formAction')).toBe('action');
+    expect(inputRef.current.hasAttribute('name')).toBe(false);
+    expect(inputRef.current.hasAttribute('formEncType')).toBe(false);
+    expect(inputRef.current.hasAttribute('formMethod')).toBe(false);
+    expect(inputRef.current.getAttribute('formTarget')).toBe('elsewhere');
+
+    expect(buttonRef.current.getAttribute('formAction')).toBe('action');
+    expect(buttonRef.current.hasAttribute('name')).toBe(false);
+    expect(buttonRef.current.getAttribute('formEncType')).toBe(
+      'multipart/form-data',
+    );
+    expect(buttonRef.current.hasAttribute('formMethod')).toBe(false);
+    expect(buttonRef.current.hasAttribute('formTarget')).toBe(false);
+  });
+
+  it('should reset form fields after you remove a hydrated function', async () => {
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    function action(formData) {}
+    function App({isUpdate}) {
+      return (
+        <form action={isUpdate ? undefined : action} ref={formRef}>
+          <input
+            type="submit"
+            formAction={isUpdate ? undefined : action}
+            ref={inputRef}
+          />
+          <button formAction={isUpdate ? undefined : action} ref={buttonRef} />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    let root;
+    await act(async () => {
+      root = ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    await act(async () => {
+      root.render(<App isUpdate={true} />);
+    });
+    expect(formRef.current.hasAttribute('action')).toBe(false);
+    expect(formRef.current.hasAttribute('encType')).toBe(false);
+    expect(formRef.current.hasAttribute('method')).toBe(false);
+    expect(formRef.current.hasAttribute('target')).toBe(false);
+
+    expect(inputRef.current.hasAttribute('formAction')).toBe(false);
+    expect(inputRef.current.hasAttribute('name')).toBe(false);
+    expect(inputRef.current.hasAttribute('formEncType')).toBe(false);
+    expect(inputRef.current.hasAttribute('formMethod')).toBe(false);
+    expect(inputRef.current.hasAttribute('formTarget')).toBe(false);
+
+    expect(buttonRef.current.hasAttribute('formAction')).toBe(false);
+    expect(buttonRef.current.hasAttribute('name')).toBe(false);
+    expect(buttonRef.current.hasAttribute('formEncType')).toBe(false);
+    expect(buttonRef.current.hasAttribute('formMethod')).toBe(false);
+    expect(buttonRef.current.hasAttribute('formTarget')).toBe(false);
+  });
+
+  it('should restore the form fields even if they were incorrectly set', async () => {
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    function action(formData) {}
+    function App({isUpdate}) {
+      return (
+        <form
+          action={isUpdate ? 'action' : action}
+          ref={formRef}
+          method="DELETE">
+          <input
+            type="submit"
+            formAction={isUpdate ? 'action' : action}
+            ref={inputRef}
+            formTarget="elsewhere"
+          />
+          <button
+            formAction={isUpdate ? 'action' : action}
+            ref={buttonRef}
+            formEncType="text/plain"
+          />
+        </form>
+      );
+    }
+
+    // Specifying the extra form fields are a DEV error, but we expect it
+    // to eventually still be patched up after an update.
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    assertConsoleErrorDev([
+      'Cannot specify a encType or method for a form that specifies a function as the action. ' +
+        'React provides those automatically. They will get overridden.\n' +
+        '    in form (at **)\n' +
+        '    in App (at **)',
+      'Cannot specify a formTarget for a button that specifies a function as a formAction. ' +
+        'The function will always be executed in the same window.\n' +
+        '    in input (at **)\n' +
+        '    in App (at **)',
+    ]);
+    let root;
+    await act(async () => {
+      root = ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n\n" +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\n' +
+        'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\n' +
+        'https://react.dev/link/hydration-mismatch\n\n' +
+        '  <App>\n' +
+        '    <form\n' +
+        '      action={function action}\n' +
+        '      ref={{current:null}}\n' +
+        '+     method="DELETE"\n' +
+        '-     method={null}\n' +
+        '    >\n' +
+        '      <input\n' +
+        '        type="submit"\n' +
+        '        formAction={function action}\n' +
+        '        ref={{current:null}}\n' +
+        '+       formTarget="elsewhere"\n' +
+        '-       formTarget={null}\n' +
+        '      >\n' +
+        '      <button\n' +
+        '        formAction={function action}\n' +
+        '        ref={{current:null}}\n' +
+        '+       formEncType="text/plain"\n' +
+        '-       formEncType={null}\n' +
+        '      >\n' +
+        '\n    in input (at **)' +
+        '\n    in App (at **)',
+    ]);
+    await act(async () => {
+      root.render(<App isUpdate={true} />);
+    });
+    expect(formRef.current.getAttribute('action')).toBe('action');
+    expect(formRef.current.hasAttribute('encType')).toBe(false);
+    expect(formRef.current.getAttribute('method')).toBe('DELETE');
+    expect(formRef.current.hasAttribute('target')).toBe(false);
+
+    expect(inputRef.current.getAttribute('formAction')).toBe('action');
+    expect(inputRef.current.hasAttribute('name')).toBe(false);
+    expect(inputRef.current.hasAttribute('formEncType')).toBe(false);
+    expect(inputRef.current.hasAttribute('formMethod')).toBe(false);
+    expect(inputRef.current.getAttribute('formTarget')).toBe('elsewhere');
+
+    expect(buttonRef.current.getAttribute('formAction')).toBe('action');
+    expect(buttonRef.current.hasAttribute('name')).toBe(false);
+    expect(buttonRef.current.getAttribute('formEncType')).toBe('text/plain');
+    expect(buttonRef.current.hasAttribute('formMethod')).toBe(false);
+    expect(buttonRef.current.hasAttribute('formTarget')).toBe(false);
+  });
+
+  it('useFormStatus is not pending during server render', async () => {
+    function App() {
+      const {pending} = useFormStatus();
+      return 'Pending: ' + pending;
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    expect(container.textContent).toBe('Pending: false');
+
+    await act(() => ReactDOMClient.hydrateRoot(container, <App />));
+    expect(container.textContent).toBe('Pending: false');
+  });
+
+  it('should replay a form action after hydration', async () => {
+    let foo;
+    function action(formData) {
+      foo = formData.get('foo');
+    }
+    function App() {
+      return (
+        <form action={action}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+
+    // Dispatch an event before hydration
+    submit(container.getElementsByTagName('form')[0]);
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    // It should've now been replayed
+    expect(foo).toBe('bar');
+  });
+
+  it('should replay input/button formAction', async () => {
+    let rootActionCalled = false;
+    let savedTitle = null;
+    let deletedTitle = null;
+
+    function action(formData) {
+      rootActionCalled = true;
+    }
+
+    function saveItem(formData) {
+      savedTitle = formData.get('title');
+    }
+
+    function deleteItem(formData) {
+      deletedTitle = formData.get('title');
+    }
+
+    function App() {
+      return (
+        <form action={action}>
+          <input type="text" name="title" defaultValue="Hello" />
+          <input type="submit" formAction={saveItem} value="Save" />
+          <button formAction={deleteItem}>Delete</button>
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+
+    submit(container.getElementsByTagName('input')[1]);
+    submit(container.getElementsByTagName('button')[0]);
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(savedTitle).toBe('Hello');
+    expect(deletedTitle).toBe('Hello');
+    expect(rootActionCalled).toBe(false);
+  });
+
+  it('useOptimistic returns passthrough value', async () => {
+    function App() {
+      const [optimisticState] = useOptimistic('hi');
+      return optimisticState;
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    expect(container.textContent).toBe('hi');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container.textContent).toBe('hi');
+  });
+
+  it('useActionState returns initial state', async () => {
+    async function action(state) {
+      return state;
+    }
+
+    function App() {
+      const [state] = useActionState(action, 0);
+      return state;
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+    expect(container.textContent).toBe('0');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container.textContent).toBe('0');
+  });
+
+  it('can provide a custom action on the server for actions', async () => {
+    const ref = React.createRef();
+    let foo;
+
+    function action(formData) {
+      foo = formData.get('foo');
+    }
+    action.$$FORM_ACTION = function (identifierPrefix) {
+      const extraFields = new FormData();
+      extraFields.append(identifierPrefix + 'hello', 'world');
+      return {
+        action: this.name,
+        name: identifierPrefix,
+        method: 'POST',
+        encType: 'multipart/form-data',
+        target: 'self',
+        data: extraFields,
+      };
+    };
+    function App() {
+      return (
+        <form action={action} ref={ref} method={null}>
+          <Suspense />
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+
+    const form = container.firstChild;
+    expect(form.getAttribute('action')).toBe('action');
+    expect(form.getAttribute('method')).toBe('POST');
+    expect(form.getAttribute('enctype')).toBe('multipart/form-data');
+    expect(form.getAttribute('target')).toBe('self');
+    const formActionName = form.firstChild.getAttribute('name');
+    expect(
+      container
+        .querySelector('input[name="' + formActionName + 'hello"]')
+        .getAttribute('value'),
+    ).toBe('world');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    submit(ref.current);
+
+    expect(foo).toBe('bar');
+  });
+
+  it('can provide a custom action on buttons the server for actions', async () => {
+    const hiddenRef = React.createRef();
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    let foo;
+
+    function action(formData) {
+      foo = formData.get('foo');
+    }
+    action.$$FORM_ACTION = function (identifierPrefix) {
+      const extraFields = new FormData();
+      extraFields.append(identifierPrefix + 'hello', 'world');
+      return {
+        action: this.name,
+        name: identifierPrefix,
+        method: 'POST',
+        encType: 'multipart/form-data',
+        target: 'self',
+        data: extraFields,
+      };
+    };
+    function App() {
+      return (
+        <form>
+          <input type="hidden" name="foo" value="bar" ref={hiddenRef} />
+          <input
+            type="submit"
+            formAction={action}
+            method={null}
+            ref={inputRef}
+          />
+          <button formAction={action} ref={buttonRef} target={null} />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+
+    const input = container.getElementsByTagName('input')[1];
+    const button = container.getElementsByTagName('button')[0];
+    expect(input.getAttribute('formaction')).toBe('action');
+    expect(input.getAttribute('formmethod')).toBe('POST');
+    expect(input.getAttribute('formenctype')).toBe('multipart/form-data');
+    expect(input.getAttribute('formtarget')).toBe('self');
+    expect(button.getAttribute('formaction')).toBe('action');
+    expect(button.getAttribute('formmethod')).toBe('POST');
+    expect(button.getAttribute('formenctype')).toBe('multipart/form-data');
+    expect(button.getAttribute('formtarget')).toBe('self');
+    const inputName = input.getAttribute('name');
+    const buttonName = button.getAttribute('name');
+    expect(
+      container
+        .querySelector('input[name="' + inputName + 'hello"]')
+        .getAttribute('value'),
+    ).toBe('world');
+    expect(
+      container
+        .querySelector('input[name="' + buttonName + 'hello"]')
+        .getAttribute('value'),
+    ).toBe('world');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(hiddenRef.current.name).toBe('foo');
+
+    submit(inputRef.current);
+
+    expect(foo).toBe('bar');
+
+    foo = null;
+
+    submit(buttonRef.current);
+
+    expect(foo).toBe('bar');
+  });
+
+  it('can hydrate hidden fields in the beginning of a form', async () => {
+    const hiddenRef = React.createRef();
+
+    let invoked = false;
+    function action(formData) {
+      invoked = true;
+    }
+    action.$$FORM_ACTION = function (identifierPrefix) {
+      const extraFields = new FormData();
+      extraFields.append(identifierPrefix + 'hello', 'world');
+      return {
+        action: '',
+        name: identifierPrefix,
+        method: 'POST',
+        encType: 'multipart/form-data',
+        data: extraFields,
+      };
+    };
+    function App() {
+      return (
+        <form action={action}>
+          <input type="hidden" name="bar" defaultValue="baz" ref={hiddenRef} />
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<App />),
+    );
+    await readIntoContainer(stream);
+
+    const barField = container.querySelector('[name=bar]');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(hiddenRef.current).toBe(barField);
+
+    expect(hiddenRef.current.name).toBe('bar');
+    expect(hiddenRef.current.value).toBe('baz');
+
+    expect(container.querySelectorAll('[name=bar]').length).toBe(1);
+
+    submit(hiddenRef.current.form);
+
+    expect(invoked).toBe(true);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
new file mode 100644
index 00000000000..bd0c6107f37
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -0,0 +1,9620 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+import {
+  insertNodesAndExecuteScripts,
+  mergeOptions,
+  stripExternalRuntimeInNodes,
+  getVisibleChildren,
+} from '../test-utils/FizzTestUtils';
+
+let JSDOM;
+let Stream;
+let Scheduler;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMFizzServer;
+let ReactDOMFizzStatic;
+let Suspense;
+let SuspenseList;
+
+let assertConsoleErrorDev;
+let useSyncExternalStore;
+let useSyncExternalStoreWithSelector;
+let use;
+let useActionState;
+let PropTypes;
+let textCache;
+let writable;
+let CSPnonce = null;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let renderOptions;
+let waitFor;
+let waitForAll;
+let assertLog;
+let waitForPaint;
+let clientAct;
+let streamingContainer;
+
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
+describe('ReactDOMFizzServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    // We mock matchMedia. for simplicity it only matches 'all' or '' and misses everything else
+    Object.defineProperty(jsdom.window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: query === 'all' || query === '',
+        media: query,
+      })),
+    });
+    streamingContainer = null;
+    global.window = jsdom.window;
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    global.Node = global.window.Node;
+    global.addEventListener = global.window.addEventListener;
+    global.MutationObserver = global.window.MutationObserver;
+    // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+    global.requestAnimationFrame = global.window.requestAnimationFrame = cb =>
+      setTimeout(cb);
+    container = document.getElementById('container');
+
+    CSPnonce = null;
+    Scheduler = require('scheduler');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server');
+    ReactDOMFizzStatic = require('react-dom/static');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    use = React.use;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+    PropTypes = require('prop-types');
+    if (__VARIANT__) {
+      const originalConsoleError = console.error;
+      console.error = (error, ...args) => {
+        if (
+          typeof error !== 'string' ||
+          error.indexOf('ReactDOM.useFormState has been renamed') === -1
+        ) {
+          originalConsoleError(error, ...args);
+        }
+      };
+
+      // Remove after API is deleted.
+      useActionState = ReactDOM.useFormState;
+    } else {
+      useActionState = React.useActionState;
+    }
+
+    ({
+      assertConsoleErrorDev,
+      assertLog,
+      act: clientAct,
+      waitFor,
+      waitForAll,
+      waitForPaint,
+    } = require('internal-test-utils'));
+
+    if (gate(flags => flags.source)) {
+      // The `with-selector` module composes the main `use-sync-external-store`
+      // entrypoint. In the compiled artifacts, this is resolved to the `shim`
+      // implementation by our build config, but when running the tests against
+      // the source files, we need to tell Jest how to resolve it. Because this
+      // is a source module, this mock has no affect on the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('react'),
+      );
+    }
+    useSyncExternalStore = React.useSyncExternalStore;
+    useSyncExternalStoreWithSelector =
+      require('use-sync-external-store/with-selector').useSyncExternalStoreWithSelector;
+
+    textCache = new Map();
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+
+    renderOptions = {};
+    if (gate(flags => flags.shouldUseFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        'react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js';
+    }
+  });
+
+  function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
+    const mappedErrows = errorsArr.map(({error, errorInfo}) => {
+      const stack = errorInfo && errorInfo.componentStack;
+      const digest = error.digest;
+      if (stack) {
+        return [error.message, digest, normalizeCodeLocInfo(stack)];
+      } else if (digest) {
+        return [error.message, digest];
+      }
+      return error.message;
+    });
+    if (__DEV__) {
+      expect(mappedErrows).toEqual(toBeDevArr);
+    } else {
+      expect(mappedErrows).toEqual(toBeProdArr);
+    }
+  }
+
+  function componentStack(components) {
+    return components
+      .map(component => `\n    in ${component} (at **)`)
+      .join('');
+  }
+
+  const bodyStartMatch = /<body(?:>| .*?>)/;
+  const headStartMatch = /<head(?:>| .*?>)/;
+
+  async function act(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    let bufferedContent = buffer;
+    buffer = '';
+
+    if (!bufferedContent) {
+      jest.runAllTimers();
+      return;
+    }
+
+    const bodyMatch = bufferedContent.match(bodyStartMatch);
+    const headMatch = bufferedContent.match(headStartMatch);
+
+    if (streamingContainer === null) {
+      // This is the first streamed content. We decide here where to insert it. If we get <html>, <head>, or <body>
+      // we abandon the pre-built document and start from scratch. If we get anything else we assume it goes into the
+      // container. This is not really production behavior because you can't correctly stream into a deep div effectively
+      // but it's pragmatic for tests.
+
+      if (
+        bufferedContent.startsWith('<head>') ||
+        bufferedContent.startsWith('<head ') ||
+        bufferedContent.startsWith('<body>') ||
+        bufferedContent.startsWith('<body ')
+      ) {
+        // wrap in doctype to normalize the parsing process
+        bufferedContent = '<!DOCTYPE html><html>' + bufferedContent;
+      } else if (
+        bufferedContent.startsWith('<html>') ||
+        bufferedContent.startsWith('<html ')
+      ) {
+        throw new Error(
+          'Recieved <html> without a <!DOCTYPE html> which is almost certainly a bug in React',
+        );
+      }
+
+      if (bufferedContent.startsWith('<!DOCTYPE html>')) {
+        // we can just use the whole document
+        const tempDom = new JSDOM(bufferedContent);
+
+        // Wipe existing head and body content
+        document.head.innerHTML = '';
+        document.body.innerHTML = '';
+
+        // Copy the <html> attributes over
+        const tempHtmlNode = tempDom.window.document.documentElement;
+        for (let i = 0; i < tempHtmlNode.attributes.length; i++) {
+          const attr = tempHtmlNode.attributes[i];
+          document.documentElement.setAttribute(attr.name, attr.value);
+        }
+
+        if (headMatch) {
+          // We parsed a head open tag. we need to copy head attributes and insert future
+          // content into <head>
+          streamingContainer = document.head;
+          const tempHeadNode = tempDom.window.document.head;
+          for (let i = 0; i < tempHeadNode.attributes.length; i++) {
+            const attr = tempHeadNode.attributes[i];
+            document.head.setAttribute(attr.name, attr.value);
+          }
+          const source = document.createElement('head');
+          source.innerHTML = tempHeadNode.innerHTML;
+          await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+        }
+
+        if (bodyMatch) {
+          // We parsed a body open tag. we need to copy head attributes and insert future
+          // content into <body>
+          streamingContainer = document.body;
+          const tempBodyNode = tempDom.window.document.body;
+          for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+            const attr = tempBodyNode.attributes[i];
+            document.body.setAttribute(attr.name, attr.value);
+          }
+          const source = document.createElement('body');
+          source.innerHTML = tempBodyNode.innerHTML;
+          await insertNodesAndExecuteScripts(source, document.body, CSPnonce);
+        }
+
+        if (!headMatch && !bodyMatch) {
+          throw new Error('expected <head> or <body> after <html>');
+        }
+      } else {
+        // we assume we are streaming into the default container'
+        streamingContainer = container;
+        const div = document.createElement('div');
+        div.innerHTML = bufferedContent;
+        await insertNodesAndExecuteScripts(div, container, CSPnonce);
+      }
+    } else if (streamingContainer === document.head) {
+      bufferedContent = '<!DOCTYPE html><html><head>' + bufferedContent;
+      const tempDom = new JSDOM(bufferedContent);
+
+      const tempHeadNode = tempDom.window.document.head;
+      const source = document.createElement('head');
+      source.innerHTML = tempHeadNode.innerHTML;
+      await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+
+      if (bodyMatch) {
+        streamingContainer = document.body;
+
+        const tempBodyNode = tempDom.window.document.body;
+        for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+          const attr = tempBodyNode.attributes[i];
+          document.body.setAttribute(attr.name, attr.value);
+        }
+        const bodySource = document.createElement('body');
+        bodySource.innerHTML = tempBodyNode.innerHTML;
+        await insertNodesAndExecuteScripts(bodySource, document.body, CSPnonce);
+      }
+    } else {
+      const div = document.createElement('div');
+      div.innerHTML = bufferedContent;
+      await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
+    }
+    // Let throttled boundaries reveal
+    jest.runAllTimers();
+  }
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function rejectText(text, error) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'rejected',
+        value: error,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'rejected';
+      record.value = error;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    return text;
+  }
+
+  function AsyncText({text}) {
+    return readText(text);
+  }
+
+  function AsyncTextWrapped({as, text}) {
+    const As = as;
+    return <As>{readText(text)}</As>;
+  }
+  function renderToPipeableStream(jsx, options) {
+    // Merge options with renderOptions, which may contain featureFlag specific behavior
+    return ReactDOMFizzServer.renderToPipeableStream(
+      jsx,
+      mergeOptions(options, renderOptions),
+    );
+  }
+
+  it('should asynchronously load a lazy component', async () => {
+    let resolveA;
+    const LazyA = React.lazy(() => {
+      return new Promise(r => {
+        resolveA = r;
+      });
+    });
+
+    let resolveB;
+    const LazyB = React.lazy(() => {
+      return new Promise(r => {
+        resolveB = r;
+      });
+    });
+
+    class TextWithPunctuation extends React.Component {
+      render() {
+        return <Text text={this.props.text + this.props.punctuation} />;
+      }
+    }
+
+    // This tests that default props of the inner element is resolved.
+    TextWithPunctuation.defaultProps = {
+      punctuation: '!',
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <LazyA text="Hello" />
+            </Suspense>
+          </div>
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <LazyB text="world" />
+            </Suspense>
+          </div>
+        </div>,
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Loading...</div>
+        <div>Loading...</div>
+      </div>,
+    );
+    await act(() => {
+      resolveA({default: Text});
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Hello</div>
+        <div>Loading...</div>
+      </div>,
+    );
+    await act(() => {
+      resolveB({default: TextWithPunctuation});
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Hello</div>
+        <div>world!</div>
+      </div>,
+    );
+  });
+
+  it('#23331: does not warn about hydration mismatches if something suspended in an earlier sibling', async () => {
+    const makeApp = () => {
+      let resolve;
+      const imports = new Promise(r => {
+        resolve = () => r({default: () => <span id="async">async</span>});
+      });
+      const Lazy = React.lazy(() => imports);
+
+      const App = () => (
+        <div>
+          <Suspense fallback={<span>Loading...</span>}>
+            <Lazy />
+            <span id="after">after</span>
+          </Suspense>
+        </div>
+      );
+
+      return [App, resolve];
+    };
+
+    // Server-side
+    const [App, resolve] = makeApp();
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading...</span>
+      </div>,
+    );
+    await act(() => {
+      resolve();
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span id="async">async</span>
+        <span id="after">after</span>
+      </div>,
+    );
+
+    // Client-side
+    const [HydrateApp, hydrateResolve] = makeApp();
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <HydrateApp />);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span id="async">async</span>
+        <span id="after">after</span>
+      </div>,
+    );
+
+    await act(() => {
+      hydrateResolve();
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span id="async">async</span>
+        <span id="after">after</span>
+      </div>,
+    );
+  });
+
+  it('should support nonce for bootstrap and runtime scripts', async () => {
+    CSPnonce = 'R4nd0m';
+    try {
+      let resolve;
+      const Lazy = React.lazy(() => {
+        return new Promise(r => {
+          resolve = r;
+        });
+      });
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Lazy text="Hello" />
+            </Suspense>
+          </div>,
+          {
+            nonce: 'R4nd0m',
+            bootstrapScriptContent: 'function noop(){}',
+            bootstrapScripts: [
+              'init.js',
+              {src: 'init2.js', integrity: 'init2hash'},
+            ],
+            bootstrapModules: [
+              'init.mjs',
+              {src: 'init2.mjs', integrity: 'init2hash'},
+            ],
+          },
+        );
+        pipe(writable);
+      });
+
+      expect(getVisibleChildren(container)).toEqual([
+        <link
+          rel="preload"
+          fetchpriority="low"
+          href="init.js"
+          as="script"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="preload"
+          fetchpriority="low"
+          href="init2.js"
+          as="script"
+          nonce={CSPnonce}
+          integrity="init2hash"
+        />,
+        <link
+          rel="modulepreload"
+          fetchpriority="low"
+          href="init.mjs"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="modulepreload"
+          fetchpriority="low"
+          href="init2.mjs"
+          nonce={CSPnonce}
+          integrity="init2hash"
+        />,
+        <div>Loading...</div>,
+      ]);
+
+      // check that there are 6 scripts with a matching nonce:
+      // The runtime script or initial paint time, an inline bootstrap script, two bootstrap scripts and two bootstrap modules
+      expect(
+        Array.from(container.getElementsByTagName('script')).filter(
+          node => node.getAttribute('nonce') === CSPnonce,
+        ).length,
+      ).toEqual(6);
+
+      await act(() => {
+        resolve({default: Text});
+      });
+      expect(getVisibleChildren(container)).toEqual([
+        <link
+          rel="preload"
+          fetchpriority="low"
+          href="init.js"
+          as="script"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="preload"
+          fetchpriority="low"
+          href="init2.js"
+          as="script"
+          nonce={CSPnonce}
+          integrity="init2hash"
+        />,
+        <link
+          rel="modulepreload"
+          fetchpriority="low"
+          href="init.mjs"
+          nonce={CSPnonce}
+        />,
+        <link
+          rel="modulepreload"
+          fetchpriority="low"
+          href="init2.mjs"
+          nonce={CSPnonce}
+          integrity="init2hash"
+        />,
+        <div>Hello</div>,
+      ]);
+    } finally {
+      CSPnonce = null;
+    }
+  });
+
+  it('should not automatically add nonce to rendered scripts', async () => {
+    CSPnonce = 'R4nd0m';
+    try {
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <script nonce={CSPnonce}>{'try { foo() } catch (e) {} ;'}</script>
+              <script nonce={CSPnonce} src="foo" async={true} />
+              <script src="bar" />
+              <script src="baz" integrity="qux" async={true} />
+              <script type="module" src="quux" async={true} />
+              <script type="module" src="corge" async={true} />
+              <script
+                type="module"
+                src="grault"
+                integrity="garply"
+                async={true}
+              />
+            </body>
+          </html>,
+          {
+            nonce: CSPnonce,
+          },
+        );
+        pipe(writable);
+      });
+
+      expect(
+        stripExternalRuntimeInNodes(
+          document.getElementsByTagName('script'),
+          renderOptions.unstable_externalRuntimeSrc,
+        ).map(n => n.outerHTML),
+      ).toEqual([
+        `<script nonce="${CSPnonce}" src="foo" async=""></script>`,
+        `<script src="baz" integrity="qux" async=""></script>`,
+        `<script type="module" src="quux" async=""></script>`,
+        `<script type="module" src="corge" async=""></script>`,
+        `<script type="module" src="grault" integrity="garply" async=""></script>`,
+        `<script nonce="${CSPnonce}">try { foo() } catch (e) {} ;</script>`,
+        `<script src="bar"></script>`,
+      ]);
+    } finally {
+      CSPnonce = null;
+    }
+  });
+
+  it('should client render a boundary if a lazy component rejects', async () => {
+    let rejectComponent;
+    const promise = new Promise((resolve, reject) => {
+      rejectComponent = reject;
+    });
+    const LazyComponent = React.lazy(() => {
+      return promise;
+    });
+
+    const LazyLazy = React.lazy(async () => {
+      return {
+        default: LazyComponent,
+      };
+    });
+
+    function Wrapper({children}) {
+      return children;
+    }
+    const LazyWrapper = React.lazy(() => {
+      return {
+        then(callback) {
+          callback({
+            default: Wrapper,
+          });
+        },
+      };
+    });
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <LazyWrapper>
+              {isClient ? <Text text="Hello" /> : <LazyLazy text="Hello" />}
+            </LazyWrapper>
+          </Suspense>
+        </div>
+      );
+    }
+
+    let bootstrapped = false;
+    const errors = [];
+    window.__INIT__ = function () {
+      bootstrapped = true;
+      // Attempt to hydrate the content.
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error, errorInfo) {
+          errors.push({error, errorInfo});
+        },
+      });
+    };
+
+    const theError = new Error('Test');
+    const loggedErrors = [];
+    function onError(x, errorInfo) {
+      loggedErrors.push(x);
+      return 'Hash of (' + x.message + ')';
+    }
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App isClient={false} />, {
+        bootstrapScriptContent: '__INIT__();',
+        onError,
+      });
+      pipe(writable);
+    });
+
+    expect(loggedErrors).toEqual([]);
+    expect(bootstrapped).toBe(true);
+
+    await waitForAll([]);
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    expect(loggedErrors).toEqual([]);
+
+    await act(() => {
+      rejectComponent(theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+
+    // We haven't ran the client hydration yet.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // Now we can client render it instead.
+    await waitForAll([]);
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering errored:\n\n' +
+            theError.message,
+          expectedDigest,
+          componentStack(['Lazy', 'Wrapper', 'Suspense', 'div', 'App']),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+      ],
+    );
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  it('should have special stacks if Suspense fallback', async () => {
+    const infinitePromise = new Promise(() => {});
+    const InfiniteComponent = React.lazy(() => {
+      return infinitePromise;
+    });
+
+    function Throw({text}) {
+      throw new Error(text);
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading">
+          <div>
+            <Suspense fallback={<Throw text="Bye" />}>
+              <InfiniteComponent text="Hi" />
+            </Suspense>
+          </div>
+        </Suspense>
+      );
+    }
+
+    const loggedErrors = [];
+    function onError(x, errorInfo) {
+      loggedErrors.push({
+        message: x.message,
+        componentStack: errorInfo.componentStack,
+      });
+      return 'Hash of (' + x.message + ')';
+    }
+    loggedErrors.length = 0;
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onError,
+      });
+      pipe(writable);
+    });
+
+    expect(loggedErrors.length).toBe(1);
+    expect(loggedErrors[0].message).toBe('Bye');
+    expect(normalizeCodeLocInfo(loggedErrors[0].componentStack)).toBe(
+      componentStack(['Throw', 'Suspense Fallback', 'div', 'Suspense', 'App']),
+    );
+  });
+
+  it('should asynchronously load a lazy element', async () => {
+    let resolveElement;
+    const lazyElement = React.lazy(() => {
+      return new Promise(r => {
+        resolveElement = r;
+      });
+    });
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {lazyElement}
+          </Suspense>
+        </div>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+    // Because there is no content inside the Suspense boundary that could've
+    // been written, we expect to not see any additional partial data flushed
+    // yet.
+    expect(
+      stripExternalRuntimeInNodes(
+        container.childNodes,
+        renderOptions.unstable_externalRuntimeSrc,
+      ).length,
+    ).toBe(gate(flags => flags.shouldUseFizzExternalRuntime) ? 1 : 2);
+    await act(() => {
+      resolveElement({default: <Text text="Hello" />});
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  it('should client render a boundary if a lazy element rejects', async () => {
+    let rejectElement;
+    const element = <Text text="Hello" />;
+    const lazyElement = React.lazy(() => {
+      return new Promise((resolve, reject) => {
+        rejectElement = reject;
+      });
+    });
+
+    const theError = new Error('Test');
+    const loggedErrors = [];
+    function onError(x, errorInfo) {
+      loggedErrors.push(x);
+      return 'hash of (' + x.message + ')';
+    }
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isClient ? element : lazyElement}
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App isClient={false} />, {
+        onError,
+      });
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+    await waitForAll([]);
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    expect(loggedErrors).toEqual([]);
+
+    await act(() => {
+      rejectElement(theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+
+    // We haven't ran the client hydration yet.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // Now we can client render it instead.
+    await waitForAll([]);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering errored:\n\n' +
+            theError.message,
+          expectedDigest,
+          componentStack(['Suspense', 'div', 'App']),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+      ],
+    );
+
+    // The client rendered HTML is now in place.
+    // expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  it('Errors in boundaries should be sent to the client and reported on client render - Error before flushing', async () => {
+    function Indirection({level, children}) {
+      if (level > 0) {
+        return <Indirection level={level - 1}>{children}</Indirection>;
+      }
+      return children;
+    }
+
+    const theError = new Error('uh oh');
+
+    function Erroring({isClient}) {
+      if (isClient) {
+        return 'Hello World';
+      }
+      throw theError;
+    }
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<span>loading...</span>}>
+            <Indirection level={2}>
+              <Erroring isClient={isClient} />
+            </Indirection>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash(' + x.message + ')';
+    }
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <App />,
+
+        {
+          onError,
+        },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([theError]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+    await waitForAll([]);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering errored:\n\n' +
+            theError.message,
+          expectedDigest,
+          componentStack([
+            'Erroring',
+            'Indirection',
+            'Indirection',
+            'Indirection',
+            'Suspense',
+            'div',
+            'App',
+          ]),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+      ],
+    );
+  });
+
+  it('Errors in boundaries should be sent to the client and reported on client render - Error after flushing', async () => {
+    let rejectComponent;
+    const LazyComponent = React.lazy(() => {
+      return new Promise((resolve, reject) => {
+        rejectComponent = reject;
+      });
+    });
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isClient ? <Text text="Hello" /> : <LazyComponent text="Hello" />}
+          </Suspense>
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    const theError = new Error('uh oh');
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash(' + x.message + ')';
+    }
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <App />,
+
+        {
+          onError,
+        },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+    await waitForAll([]);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(() => {
+      rejectComponent(theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // Now we can client render it instead.
+    await waitForAll([]);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering errored:\n\n' +
+            theError.message,
+          expectedDigest,
+          componentStack(['Lazy', 'Suspense', 'div', 'App']),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+      ],
+    );
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  it('should asynchronously load the suspense boundary', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Hello World" />
+          </Suspense>
+        </div>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+    await act(() => {
+      resolveText('Hello World');
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);
+  });
+
+  it('waits for pending content to come in from the server and then hydrates it', async () => {
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <h1 ref={ref}>
+              <AsyncText text="Hello" />
+            </h1>
+          </Suspense>
+        </div>
+      );
+    }
+
+    let bootstrapped = false;
+    window.__INIT__ = function () {
+      bootstrapped = true;
+      // Attempt to hydrate the content.
+      ReactDOMClient.hydrateRoot(container, <App />);
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        bootstrapScriptContent: '__INIT__();',
+      });
+      pipe(writable);
+    });
+
+    // We're still showing a fallback.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // We already bootstrapped.
+    expect(bootstrapped).toBe(true);
+
+    // Attempt to hydrate the content.
+    await waitForAll([]);
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // The server now updates the content in place in the fallback.
+    await act(() => {
+      resolveText('Hello');
+    });
+
+    // The final HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>Hello</h1>
+      </div>,
+    );
+    const h1 = container.getElementsByTagName('h1')[0];
+
+    // But it is not yet hydrated.
+    expect(ref.current).toBe(null);
+
+    await waitForAll([]);
+
+    // Now it's hydrated.
+    expect(ref.current).toBe(h1);
+  });
+
+  it('handles an error on the client if the server ends up erroring', async () => {
+    const ref = React.createRef();
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <b ref={ref}>{this.state.error.message}</b>;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <div>
+            <Suspense fallback="Loading...">
+              <span ref={ref}>
+                <AsyncText text="This Errors" />
+              </span>
+            </Suspense>
+          </div>
+        </ErrorBoundary>
+      );
+    }
+
+    const loggedErrors = [];
+
+    // We originally suspend the boundary and start streaming the loading state.
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <App />,
+
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      pipe(writable);
+    });
+
+    // We're still showing a fallback.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    expect(loggedErrors).toEqual([]);
+
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    const theError = new Error('Error Message');
+    await act(() => {
+      rejectText('This Errors', theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+
+    // The server errored, but we still haven't hydrated. We don't know if the
+    // client will succeed yet, so we still show the loading state.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+    expect(ref.current).toBe(null);
+
+    // Flush the hydration.
+    await waitForAll([]);
+
+    // Hydrating should've generated an error and replaced the suspense boundary.
+    expect(getVisibleChildren(container)).toEqual(<b>Error Message</b>);
+
+    const b = container.getElementsByTagName('b')[0];
+    expect(ref.current).toBe(b);
+  });
+
+  // @gate enableSuspenseList
+  it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
+    const ref = React.createRef();
+
+    // These are hoisted to avoid them from rerendering.
+    const a = (
+      <Suspense fallback="Loading A">
+        <span ref={ref}>
+          <AsyncText text="A" />
+        </span>
+      </Suspense>
+    );
+    const b = (
+      <Suspense fallback="Loading B">
+        <span>
+          <Text text="B" />
+        </span>
+      </Suspense>
+    );
+
+    function App({showMore}) {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            {a}
+            {b}
+            {showMore ? (
+              <Suspense fallback="Loading C">
+                <span>C</span>
+              </Suspense>
+            ) : null}
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    // We originally suspend the boundary and start streaming the loading state.
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App showMore={false} />);
+      pipe(writable);
+    });
+
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
+    await waitForAll([]);
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading A'}
+        {'Loading B'}
+      </div>,
+    );
+
+    // Add more rows before we've hydrated the first two.
+    root.render(<App showMore={true} />);
+    await waitForAll([]);
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+
+    // We haven't resolved yet.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading A'}
+        {'Loading B'}
+        {'Loading C'}
+      </div>,
+    );
+
+    await act(async () => {
+      await resolveText('A');
+    });
+
+    await waitForAll([]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+  });
+
+  it('client renders a boundary if it does not resolve before aborting', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <h1>
+              <AsyncText text="Hello" />
+            </h1>
+          </Suspense>
+          <main>
+            <Suspense fallback="loading...">
+              <AsyncText text="World" />
+            </Suspense>
+          </main>
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    const expectedDigest = 'Hash for Abort';
+    function onError(error) {
+      loggedErrors.push(error);
+      return expectedDigest;
+    }
+
+    let controls;
+    await act(() => {
+      controls = renderToPipeableStream(<App />, {onError});
+      controls.pipe(writable);
+    });
+
+    // We're still showing a fallback.
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+    await waitForAll([]);
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Loading...<main>loading...</main>
+      </div>,
+    );
+
+    // We abort the server response.
+    await act(() => {
+      controls.abort();
+    });
+
+    // We still can't render it on the client.
+    await waitForAll([]);
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering aborted due to:\n\n' +
+            'The render was aborted by the server without a reason.',
+          expectedDigest,
+          // We get the stack of the task when it was aborted which is why we see `h1`
+          componentStack(['AsyncText', 'h1', 'Suspense', 'div', 'App']),
+        ],
+        [
+          'Switched to client rendering because the server rendering aborted due to:\n\n' +
+            'The render was aborted by the server without a reason.',
+          expectedDigest,
+          componentStack(['AsyncText', 'Suspense', 'main', 'div', 'App']),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+      ],
+    );
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Loading...<main>loading...</main>
+      </div>,
+    );
+
+    // We now resolve it on the client.
+    await clientAct(() => {
+      resolveText('Hello');
+      resolveText('World');
+    });
+    assertLog([]);
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>Hello</h1>
+        <main>World</main>
+      </div>,
+    );
+  });
+
+  it('should allow for two containers to be written to the same document', async () => {
+    // We create two passthrough streams for each container to write into.
+    // Notably we don't implement a end() call for these. Because we don't want to
+    // close the underlying stream just because one of the streams is done. Instead
+    // we manually close when both are done.
+    const writableA = new Stream.Writable();
+    writableA._write = (chunk, encoding, next) => {
+      writable.write(chunk, encoding, next);
+    };
+    const writableB = new Stream.Writable();
+    writableB._write = (chunk, encoding, next) => {
+      writable.write(chunk, encoding, next);
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        // We use two nested boundaries to flush out coverage of an old reentrancy bug.
+        <div>
+          <Suspense fallback="Loading...">
+            <Suspense fallback={<Text text="Loading A..." />}>
+              <>
+                <Text text="This will show A: " />
+                <div>
+                  <AsyncText text="A" />
+                </div>
+              </>
+            </Suspense>
+          </Suspense>
+        </div>,
+        {
+          identifierPrefix: 'A_',
+          onShellReady() {
+            writableA.write('<div id="container-A">');
+            pipe(writableA);
+            writableA.write('</div>');
+          },
+        },
+      );
+    });
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Suspense fallback={<Text text="Loading B..." />}>
+            <Text text="This will show B: " />
+            <div>
+              <AsyncText text="B" />
+            </div>
+          </Suspense>
+        </div>,
+        {
+          identifierPrefix: 'B_',
+          onShellReady() {
+            writableB.write('<div id="container-B">');
+            pipe(writableB);
+            writableB.write('</div>');
+          },
+        },
+      );
+    });
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div id="container-A">
+        <div>Loading A...</div>
+      </div>,
+      <div id="container-B">
+        <div>Loading B...</div>
+      </div>,
+    ]);
+
+    await act(() => {
+      resolveText('B');
+    });
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div id="container-A">
+        <div>Loading A...</div>
+      </div>,
+      <div id="container-B">
+        <div>
+          This will show B: <div>B</div>
+        </div>
+      </div>,
+    ]);
+
+    await act(() => {
+      resolveText('A');
+    });
+
+    // We're done writing both streams now.
+    writable.end();
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div id="container-A">
+        <div>
+          This will show A: <div>A</div>
+        </div>
+      </div>,
+      <div id="container-B">
+        <div>
+          This will show B: <div>B</div>
+        </div>
+      </div>,
+    ]);
+  });
+
+  it('can resolve async content in esoteric parents', async () => {
+    function AsyncOption({text}) {
+      return <option>{readText(text)}</option>;
+    }
+
+    function AsyncCol({className}) {
+      return <col className={readText(className)} />;
+    }
+
+    function AsyncPath({id}) {
+      return <path id={readText(id)} />;
+    }
+
+    function AsyncMi({id}) {
+      return <mi id={readText(id)} />;
+    }
+
+    function App() {
+      return (
+        <div>
+          <select>
+            <Suspense fallback="Loading...">
+              <AsyncOption text="Hello" />
+            </Suspense>
+          </select>
+          <Suspense fallback="Loading...">
+            <table>
+              <colgroup>
+                <AsyncCol className="World" />
+              </colgroup>
+            </table>
+            <svg>
+              <g>
+                <AsyncPath id="my-path" />
+              </g>
+            </svg>
+            <math>
+              <AsyncMi id="my-mi" />
+            </math>
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <select>Loading...</select>Loading...
+      </div>,
+    );
+
+    await act(() => {
+      resolveText('Hello');
+    });
+
+    await act(() => {
+      resolveText('World');
+    });
+
+    await act(() => {
+      resolveText('my-path');
+      resolveText('my-mi');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <select>
+          <option>Hello</option>
+        </select>
+        <table>
+          <colgroup>
+            <col class="World" />
+          </colgroup>
+        </table>
+        <svg>
+          <g>
+            <path id="my-path" />
+          </g>
+        </svg>
+        <math>
+          <mi id="my-mi" />
+        </math>
+      </div>,
+    );
+
+    expect(container.querySelector('#my-path').namespaceURI).toBe(
+      'http://www.w3.org/2000/svg',
+    );
+    expect(container.querySelector('#my-mi').namespaceURI).toBe(
+      'http://www.w3.org/1998/Math/MathML',
+    );
+  });
+
+  it('can resolve async content in table parents', async () => {
+    function AsyncTableBody({className, children}) {
+      return <tbody className={readText(className)}>{children}</tbody>;
+    }
+
+    function AsyncTableRow({className, children}) {
+      return <tr className={readText(className)}>{children}</tr>;
+    }
+
+    function AsyncTableCell({text}) {
+      return <td>{readText(text)}</td>;
+    }
+
+    function App() {
+      return (
+        <table>
+          <Suspense
+            fallback={
+              <tbody>
+                <tr>
+                  <td>Loading...</td>
+                </tr>
+              </tbody>
+            }>
+            <AsyncTableBody className="A">
+              <AsyncTableRow className="B">
+                <AsyncTableCell text="C" />
+              </AsyncTableRow>
+            </AsyncTableBody>
+          </Suspense>
+        </table>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <table>
+        <tbody>
+          <tr>
+            <td>Loading...</td>
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    await act(() => {
+      resolveText('A');
+    });
+
+    await act(() => {
+      resolveText('B');
+    });
+
+    await act(() => {
+      resolveText('C');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <table>
+        <tbody class="A">
+          <tr class="B">
+            <td>C</td>
+          </tr>
+        </tbody>
+      </table>,
+    );
+  });
+
+  it('can stream into an SVG container', async () => {
+    function AsyncPath({id}) {
+      return <path id={readText(id)} />;
+    }
+
+    function App() {
+      return (
+        <g>
+          <Suspense fallback={<text>Loading...</text>}>
+            <AsyncPath id="my-path" />
+          </Suspense>
+        </g>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <App />,
+
+        {
+          namespaceURI: 'http://www.w3.org/2000/svg',
+          onShellReady() {
+            writable.write('<svg>');
+            pipe(writable);
+            writable.write('</svg>');
+          },
+        },
+      );
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <svg>
+        <g>
+          <text>Loading...</text>
+        </g>
+      </svg>,
+    );
+
+    await act(() => {
+      resolveText('my-path');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <svg>
+        <g>
+          <path id="my-path" />
+        </g>
+      </svg>,
+    );
+
+    expect(container.querySelector('#my-path').namespaceURI).toBe(
+      'http://www.w3.org/2000/svg',
+    );
+  });
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      String(str).replace(/\n +(?:at|in) ([^\(]+) [^\n]*/g, function (m, name) {
+        return '\n    in ' + name + ' (at **)';
+      })
+    );
+  }
+
+  it('should include a component stack across suspended boundaries', async () => {
+    function B() {
+      const children = [readText('Hello'), readText('World')];
+      // Intentionally trigger a key warning here.
+      return (
+        <div>
+          {children.map(function mapper(t) {
+            return <span>{t}</span>;
+          })}
+        </div>
+      );
+    }
+    function C() {
+      return (
+        <inCorrectTag>
+          <Text text="Loading" />
+        </inCorrectTag>
+      );
+    }
+    function A() {
+      return (
+        <div>
+          <Suspense fallback={<C />}>
+            <B />
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<A />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <incorrecttag>Loading</incorrecttag>
+      </div>,
+    );
+
+    assertConsoleErrorDev([
+      '<inCorrectTag /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.' +
+        '\n' +
+        '    in inCorrectTag (at **)\n' +
+        '    in C (at **)\n' +
+        '    in A (at **)',
+    ]);
+
+    await act(() => {
+      resolveText('Hello');
+      resolveText('World');
+    });
+
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\nCheck the render method of `B`.' +
+        ' See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in mapper (at **)\n' +
+        '    in Array.map (at **)\n' +
+        '    in B (at **)\n' +
+        '    in A (at **)',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <span>Hello</span>
+          <span>World</span>
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate !disableLegacyContext
+  it('should can suspend in a class component with legacy context', async () => {
+    class TestProvider extends React.Component {
+      static childContextTypes = {
+        test: PropTypes.string,
+      };
+      state = {ctxToSet: null};
+      static getDerivedStateFromProps(props, state) {
+        return {ctxToSet: props.ctx};
+      }
+      getChildContext() {
+        return {
+          test: this.state.ctxToSet,
+        };
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    class TestConsumer extends React.Component {
+      static contextTypes = {
+        test: PropTypes.string,
+      };
+      render() {
+        const child = (
+          <b>
+            <Text text={this.context.test} />
+          </b>
+        );
+        if (this.props.prefix) {
+          return (
+            <>
+              {readText(this.props.prefix)}
+              {child}
+            </>
+          );
+        }
+        return child;
+      }
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <TestProvider ctx="A">
+          <div>
+            <Suspense
+              fallback={
+                <>
+                  <Text text="Loading: " />
+                  <TestConsumer />
+                </>
+              }>
+              <TestProvider ctx="B">
+                <TestConsumer prefix="Hello: " />
+              </TestProvider>
+              <TestConsumer />
+            </Suspense>
+          </div>
+        </TestProvider>,
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'TestProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in TestProvider (at **)',
+      'TestConsumer uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in TestConsumer (at **)',
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Loading: <b>A</b>
+      </div>,
+    );
+    await act(() => {
+      resolveText('Hello: ');
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Hello: <b>B</b>
+        <b>A</b>
+      </div>,
+    );
+  });
+
+  it('should resume the context from where it left off', async () => {
+    const ContextA = React.createContext('A0');
+    const ContextB = React.createContext('B0');
+
+    function PrintA() {
+      return (
+        <ContextA.Consumer>{value => <Text text={value} />}</ContextA.Consumer>
+      );
+    }
+
+    class PrintB extends React.Component {
+      static contextType = ContextB;
+      render() {
+        return <Text text={this.context} />;
+      }
+    }
+
+    function AsyncParent({text, children}) {
+      return (
+        <>
+          <AsyncText text={text} />
+          <b>{children}</b>
+        </>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <PrintA />
+          <div>
+            <ContextA.Provider value="A0.1">
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncParent text="Child:">
+                  <PrintA />
+                </AsyncParent>
+                <PrintB />
+              </Suspense>
+            </ContextA.Provider>
+          </div>
+          <PrintA />
+        </div>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A0<div>Loading...</div>A0
+      </div>,
+    );
+    await act(() => {
+      resolveText('Child:');
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A0
+        <div>
+          Child:<b>A0.1</b>B0
+        </div>
+        A0
+      </div>,
+    );
+  });
+
+  it('should recover the outer context when an error happens inside a provider', async () => {
+    const ContextA = React.createContext('A0');
+    const ContextB = React.createContext('B0');
+
+    function PrintA() {
+      return (
+        <ContextA.Consumer>{value => <Text text={value} />}</ContextA.Consumer>
+      );
+    }
+
+    class PrintB extends React.Component {
+      static contextType = ContextB;
+      render() {
+        return <Text text={this.context} />;
+      }
+    }
+
+    function Throws() {
+      const value = React.useContext(ContextA);
+      throw new Error(value);
+    }
+
+    const loggedErrors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <PrintA />
+          <div>
+            <ContextA.Provider value="A0.1">
+              <Suspense
+                fallback={
+                  <b>
+                    <Text text="Loading..." />
+                  </b>
+                }>
+                <ContextA.Provider value="A0.1.1">
+                  <Throws />
+                </ContextA.Provider>
+              </Suspense>
+              <PrintB />
+            </ContextA.Provider>
+          </div>
+          <PrintA />
+        </div>,
+
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors.length).toBe(1);
+    expect(loggedErrors[0].message).toEqual('A0.1.1');
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A0
+        <div>
+          <b>Loading...</b>B0
+        </div>
+        A0
+      </div>,
+    );
+  });
+
+  it('client renders a boundary if it errors before finishing the fallback', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback="Loading root...">
+            <div>
+              <Suspense fallback={<AsyncText text="Loading..." />}>
+                <h1>
+                  {isClient ? (
+                    <Text text="Hello" />
+                  ) : (
+                    <AsyncText text="Hello" />
+                  )}
+                </h1>
+              </Suspense>
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const theError = new Error('Test');
+    const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return `hash of (${x.message})`;
+    }
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
+
+    let controls;
+    await act(() => {
+      controls = renderToPipeableStream(
+        <App isClient={false} />,
+
+        {
+          onError,
+        },
+      );
+      controls.pipe(writable);
+    });
+
+    // We're still showing a fallback.
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+    await waitForAll([]);
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading root...</div>);
+
+    expect(loggedErrors).toEqual([]);
+
+    // Error the content, but we don't have a fallback yet.
+    await act(() => {
+      rejectText('Hello', theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+
+    // We still can't render it on the client because we haven't unblocked the parent.
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading root...</div>);
+
+    // Unblock the loading state
+    await act(() => {
+      resolveText('Loading...');
+    });
+
+    // Now we're able to show the inner boundary.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Loading...</div>
+      </div>,
+    );
+
+    // That will let us client render it instead.
+    await waitForAll([]);
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering errored:\n\n' +
+            theError.message,
+          expectedDigest,
+          componentStack([
+            'AsyncText',
+            'h1',
+            'Suspense',
+            'div',
+            'Suspense',
+            'div',
+            'App',
+          ]),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
+      ],
+    );
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <h1>Hello</h1>
+        </div>
+      </div>,
+    );
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  it('should be able to abort the fallback if the main content finishes first', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Suspense fallback={<Text text="Loading Outer" />}>
+            <div>
+              <Suspense
+                fallback={
+                  <div>
+                    <AsyncText text="Loading" />
+                    Inner
+                  </div>
+                }>
+                <AsyncText text="Hello" />
+              </Suspense>
+            </div>
+          </Suspense>
+        </div>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Loading Outer</div>);
+    // We should have received a partial segment containing the a partial of the fallback.
+    expect(container.innerHTML).toContain('Inner');
+    await act(() => {
+      resolveText('Hello');
+    });
+    // We should've been able to display the content without waiting for the rest of the fallback.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Hello</div>
+      </div>,
+    );
+  });
+
+  it('calls getServerSnapshot instead of getSnapshot', async () => {
+    const ref = React.createRef();
+
+    function getServerSnapshot() {
+      return 'server';
+    }
+
+    function getClientSnapshot() {
+      return 'client';
+    }
+
+    function subscribe() {
+      return () => {};
+    }
+
+    function Child({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    function App() {
+      const value = useSyncExternalStore(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+      );
+      return (
+        <div ref={ref}>
+          <Child text={value} />
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <Suspense fallback="Loading...">
+          <App />
+        </Suspense>,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      pipe(writable);
+    });
+    assertLog(['server']);
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+
+    // The first paint switches to client rendering due to mismatch
+    await waitForPaint([
+      'client',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+  });
+
+  // The selector implementation uses the lazy ref initialization pattern
+
+  it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
+    // Same as previous test, but with a selector that returns a complex object
+    // that is memoized with a custom `isEqual` function.
+    const ref = React.createRef();
+    function getServerSnapshot() {
+      return {env: 'server', other: 'unrelated'};
+    }
+    function getClientSnapshot() {
+      return {env: 'client', other: 'unrelated'};
+    }
+    function selector({env}) {
+      return {env};
+    }
+    function isEqual(a, b) {
+      return a.env === b.env;
+    }
+    function subscribe() {
+      return () => {};
+    }
+    function Child({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+    function App() {
+      const {env} = useSyncExternalStoreWithSelector(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+        selector,
+        isEqual,
+      );
+      return (
+        <div ref={ref}>
+          <Child text={env} />
+        </div>
+      );
+    }
+    const loggedErrors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <Suspense fallback="Loading...">
+          <App />
+        </Suspense>,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      pipe(writable);
+    });
+    assertLog(['server']);
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+      },
+    });
+
+    // The first paint uses the client due to mismatch forcing client render
+    // The first paint switches to client rendering due to mismatch
+    await waitForPaint([
+      'client',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+  });
+
+  it(
+    'errors during hydration in the shell force a client render at the ' +
+      'root, and during the client render it recovers',
+    async () => {
+      let isClient = false;
+
+      function subscribe() {
+        return () => {};
+      }
+      function getClientSnapshot() {
+        return 'Yay!';
+      }
+
+      // At the time of writing, the only API that exposes whether it's currently
+      // hydrating is the `getServerSnapshot` API, so I'm using that here to
+      // simulate an error during hydration.
+      function getServerSnapshot() {
+        if (isClient) {
+          throw new Error('Hydration error');
+        }
+        return 'Yay!';
+      }
+
+      function Child() {
+        const value = useSyncExternalStore(
+          subscribe,
+          getClientSnapshot,
+          getServerSnapshot,
+        );
+        Scheduler.log(value);
+        return value;
+      }
+
+      const spanRef = React.createRef();
+
+      function App() {
+        return (
+          <span ref={spanRef}>
+            <Child />
+          </span>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog(['Yay!']);
+
+      const span = container.getElementsByTagName('span')[0];
+
+      // Hydrate the tree. Child will throw during hydration, but not when it
+      // falls back to client rendering.
+      isClient = true;
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      await waitForAll([
+        'Yay!',
+        'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering the entire root.',
+        'Cause: Hydration error',
+      ]);
+      expect(getVisibleChildren(container)).toEqual(<span>Yay!</span>);
+
+      // The node that's inside the boundary that errored during hydration was
+      // not hydrated.
+      expect(spanRef.current).not.toBe(span);
+    },
+  );
+
+  it('can hydrate uSES in StrictMode with different client and server snapshot (sync)', async () => {
+    function subscribe() {
+      return () => {};
+    }
+    function getClientSnapshot() {
+      return 'Yay!';
+    }
+    function getServerSnapshot() {
+      return 'Nay!';
+    }
+
+    function App() {
+      const value = useSyncExternalStore(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+      );
+      Scheduler.log(value);
+
+      return value;
+    }
+
+    const element = (
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(element);
+      pipe(writable);
+    });
+
+    assertLog(['Nay!']);
+    expect(getVisibleChildren(container)).toEqual('Nay!');
+
+    await clientAct(() => {
+      ReactDOM.flushSync(() => {
+        ReactDOMClient.hydrateRoot(container, element);
+      });
+    });
+
+    expect(getVisibleChildren(container)).toEqual('Yay!');
+    assertLog(['Nay!', 'Yay!']);
+  });
+
+  it('can hydrate uSES in StrictMode with different client and server snapshot (concurrent)', async () => {
+    function subscribe() {
+      return () => {};
+    }
+    function getClientSnapshot() {
+      return 'Yay!';
+    }
+    function getServerSnapshot() {
+      return 'Nay!';
+    }
+
+    function App() {
+      const value = useSyncExternalStore(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+      );
+      Scheduler.log(value);
+
+      return value;
+    }
+
+    const element = (
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(element);
+      pipe(writable);
+    });
+
+    assertLog(['Nay!']);
+    expect(getVisibleChildren(container)).toEqual('Nay!');
+
+    await clientAct(() => {
+      React.startTransition(() => {
+        ReactDOMClient.hydrateRoot(container, element);
+      });
+    });
+
+    expect(getVisibleChildren(container)).toEqual('Yay!');
+    assertLog(['Nay!', 'Yay!']);
+  });
+
+  it(
+    'errors during hydration force a client render at the nearest Suspense ' +
+      'boundary, and during the client render it recovers',
+    async () => {
+      let isClient = false;
+
+      function subscribe() {
+        return () => {};
+      }
+      function getClientSnapshot() {
+        return 'Yay!';
+      }
+
+      // At the time of writing, the only API that exposes whether it's currently
+      // hydrating is the `getServerSnapshot` API, so I'm using that here to
+      // simulate an error during hydration.
+      function getServerSnapshot() {
+        if (isClient) {
+          throw new Error('Hydration error');
+        }
+        return 'Yay!';
+      }
+
+      function Child() {
+        const value = useSyncExternalStore(
+          subscribe,
+          getClientSnapshot,
+          getServerSnapshot,
+        );
+        Scheduler.log(value);
+        return value;
+      }
+
+      const span1Ref = React.createRef();
+      const span2Ref = React.createRef();
+      const span3Ref = React.createRef();
+
+      function App() {
+        return (
+          <div>
+            <span ref={span1Ref} />
+            <Suspense fallback="Loading...">
+              <span ref={span2Ref}>
+                <Child />
+              </span>
+            </Suspense>
+            <span ref={span3Ref} />
+          </div>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog(['Yay!']);
+
+      const [span1, span2, span3] = container.getElementsByTagName('span');
+
+      // Hydrate the tree. Child will throw during hydration, but not when it
+      // falls back to client rendering.
+      isClient = true;
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      await waitForAll([
+        'Yay!',
+        'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+        'Cause: Hydration error',
+      ]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span />
+          <span>Yay!</span>
+          <span />
+        </div>,
+      );
+
+      // The node that's inside the boundary that errored during hydration was
+      // not hydrated.
+      expect(span2Ref.current).not.toBe(span2);
+
+      // But the nodes outside the boundary were.
+      expect(span1Ref.current).toBe(span1);
+      expect(span3Ref.current).toBe(span3);
+    },
+  );
+
+  it(
+    'errors during hydration force a client render at the nearest Suspense ' +
+      'boundary, and during the client render it fails again',
+    async () => {
+      // Similar to previous test, but the client render errors, too. We should
+      // be able to capture it with an error boundary.
+
+      let isClient = false;
+
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          return {error};
+        }
+        render() {
+          if (this.state.error !== null) {
+            return this.state.error.message;
+          }
+          return this.props.children;
+        }
+      }
+
+      function Child() {
+        if (isClient) {
+          throw new Error('Oops!');
+        }
+        Scheduler.log('Yay!');
+        return 'Yay!';
+      }
+
+      const span1Ref = React.createRef();
+      const span2Ref = React.createRef();
+      const span3Ref = React.createRef();
+
+      function App() {
+        return (
+          <ErrorBoundary>
+            <span ref={span1Ref} />
+            <Suspense fallback="Loading...">
+              <span ref={span2Ref}>
+                <Child />
+              </span>
+            </Suspense>
+            <span ref={span3Ref} />
+          </ErrorBoundary>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog(['Yay!']);
+
+      // Hydrate the tree. Child will throw during render.
+      isClient = true;
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+
+      // Because we failed to recover from the error, onRecoverableError
+      // shouldn't be called.
+      await waitForAll([]);
+      expect(getVisibleChildren(container)).toEqual('Oops!');
+
+      expectErrors(errors, [], []);
+    },
+  );
+
+  // Disabled because of a WWW late mutations regression.
+  // We may want to re-enable this if we figure out why.
+
+  // @gate FIXME
+  it('does not recreate the fallback if server errors and hydration suspends', async () => {
+    let isClient = false;
+
+    function Child() {
+      if (isClient) {
+        readText('Yay!');
+      } else {
+        throw Error('Oops.');
+      }
+      Scheduler.log('Yay!');
+      return 'Yay!';
+    }
+
+    const fallbackRef = React.createRef();
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p ref={fallbackRef}>Loading...</p>}>
+            <span>
+              <Child />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onError(error) {
+          Scheduler.log('[s!] ' + error.message);
+        },
+      });
+      pipe(writable);
+    });
+    assertLog(['[s!] Oops.']);
+
+    // The server could not complete this boundary, so we'll retry on the client.
+    const serverFallback = container.getElementsByTagName('p')[0];
+    expect(serverFallback.innerHTML).toBe('Loading...');
+
+    // Hydrate the tree. This will suspend.
+    isClient = true;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + error.message);
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    // This should not report any errors yet.
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Loading...</p>
+      </div>,
+    );
+
+    // Normally, hydrating after server error would force a clean client render.
+    // However, it suspended so at best we'd only get the same fallback anyway.
+    // We don't want to recreate the same fallback in the DOM again because
+    // that's extra work and would restart animations etc. Check we don't do that.
+    const clientFallback = container.getElementsByTagName('p')[0];
+    expect(serverFallback).toBe(clientFallback);
+
+    // When we're able to fully hydrate, we expect a clean client render.
+    await act(() => {
+      resolveText('Yay!');
+    });
+    await waitForAll([
+      'Yay!',
+      'onRecoverableError: The server could not finish this Suspense boundary, ' +
+        'likely due to an error during server rendering. ' +
+        'Switched to client rendering.',
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Yay!</span>
+      </div>,
+    );
+  });
+
+  // Disabled because of a WWW late mutations regression.
+  // We may want to re-enable this if we figure out why.
+
+  // @gate FIXME
+  it(
+    'does not recreate the fallback if server errors and hydration suspends ' +
+      'and root receives a transition',
+    async () => {
+      let isClient = false;
+
+      function Child({color}) {
+        if (isClient) {
+          readText('Yay!');
+        } else {
+          throw Error('Oops.');
+        }
+        Scheduler.log('Yay! (' + color + ')');
+        return 'Yay! (' + color + ')';
+      }
+
+      const fallbackRef = React.createRef();
+      function App({color}) {
+        return (
+          <div>
+            <Suspense fallback={<p ref={fallbackRef}>Loading...</p>}>
+              <span>
+                <Child color={color} />
+              </span>
+            </Suspense>
+          </div>
+        );
+      }
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App color="red" />, {
+          onError(error) {
+            Scheduler.log('[s!] ' + error.message);
+          },
+        });
+        pipe(writable);
+      });
+      assertLog(['[s!] Oops.']);
+
+      // The server could not complete this boundary, so we'll retry on the client.
+      const serverFallback = container.getElementsByTagName('p')[0];
+      expect(serverFallback.innerHTML).toBe('Loading...');
+
+      // Hydrate the tree. This will suspend.
+      isClient = true;
+      const root = ReactDOMClient.hydrateRoot(container, <App color="red" />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + error.message);
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+      // This should not report any errors yet.
+      await waitForAll([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <p>Loading...</p>
+        </div>,
+      );
+
+      // Normally, hydrating after server error would force a clean client render.
+      // However, it suspended so at best we'd only get the same fallback anyway.
+      // We don't want to recreate the same fallback in the DOM again because
+      // that's extra work and would restart animations etc. Check we don't do that.
+      const clientFallback = container.getElementsByTagName('p')[0];
+      expect(serverFallback).toBe(clientFallback);
+
+      // Transition updates shouldn't recreate the fallback either.
+      React.startTransition(() => {
+        root.render(<App color="blue" />);
+      });
+      await waitForAll([]);
+      jest.runAllTimers();
+      const clientFallback2 = container.getElementsByTagName('p')[0];
+      expect(clientFallback2).toBe(serverFallback);
+
+      // When we're able to fully hydrate, we expect a clean client render.
+      await act(() => {
+        resolveText('Yay!');
+      });
+      await waitForAll([
+        'Yay! (red)',
+        'onRecoverableError: The server could not finish this Suspense boundary, ' +
+          'likely due to an error during server rendering. ' +
+          'Switched to client rendering.',
+        'Yay! (blue)',
+      ]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span>Yay! (blue)</span>
+        </div>,
+      );
+    },
+  );
+
+  // Disabled because of a WWW late mutations regression.
+  // We may want to re-enable this if we figure out why.
+
+  // @gate FIXME
+  it(
+    'recreates the fallback if server errors and hydration suspends but ' +
+      'client receives new props',
+    async () => {
+      let isClient = false;
+
+      function Child() {
+        const value = 'Yay!';
+        if (isClient) {
+          readText(value);
+        } else {
+          throw Error('Oops.');
+        }
+        Scheduler.log(value);
+        return value;
+      }
+
+      const fallbackRef = React.createRef();
+      function App({fallbackText}) {
+        return (
+          <div>
+            <Suspense fallback={<p ref={fallbackRef}>{fallbackText}</p>}>
+              <span>
+                <Child />
+              </span>
+            </Suspense>
+          </div>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <App fallbackText="Loading..." />,
+          {
+            onError(error) {
+              Scheduler.log('[s!] ' + error.message);
+            },
+          },
+        );
+        pipe(writable);
+      });
+      assertLog(['[s!] Oops.']);
+
+      const serverFallback = container.getElementsByTagName('p')[0];
+      expect(serverFallback.innerHTML).toBe('Loading...');
+
+      // Hydrate the tree. This will suspend.
+      isClient = true;
+      const root = ReactDOMClient.hydrateRoot(
+        container,
+        <App fallbackText="Loading..." />,
+        {
+          onRecoverableError(error) {
+            Scheduler.log('onRecoverableError: ' + error.message);
+            if (error.cause) {
+              Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+            }
+          },
+        },
+      );
+      // This should not report any errors yet.
+      await waitForAll([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <p>Loading...</p>
+        </div>,
+      );
+
+      // Normally, hydration after server error would force a clean client render.
+      // However, that suspended so at best we'd only get a fallback anyway.
+      // We don't want to replace a fallback with the same fallback because
+      // that's extra work and would restart animations etc. Verify we don't do that.
+      const clientFallback1 = container.getElementsByTagName('p')[0];
+      expect(serverFallback).toBe(clientFallback1);
+
+      // However, an update may have changed the fallback props. In that case we have to
+      // actually force it to re-render on the client and throw away the server one.
+      root.render(<App fallbackText="More loading..." />);
+      await waitForAll([]);
+      jest.runAllTimers();
+      assertLog([
+        'onRecoverableError: The server could not finish this Suspense boundary, ' +
+          'likely due to an error during server rendering. ' +
+          'Switched to client rendering.',
+      ]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <p>More loading...</p>
+        </div>,
+      );
+      // This should be a clean render without reusing DOM.
+      const clientFallback2 = container.getElementsByTagName('p')[0];
+      expect(clientFallback2).not.toBe(clientFallback1);
+
+      // Verify we can still do a clean content render after.
+      await act(() => {
+        resolveText('Yay!');
+      });
+      await waitForAll(['Yay!']);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span>Yay!</span>
+        </div>,
+      );
+    },
+  );
+
+  it(
+    'errors during hydration force a client render at the nearest Suspense ' +
+      'boundary, and during the client render it recovers, then a deeper ' +
+      'child suspends',
+    async () => {
+      let isClient = false;
+
+      function subscribe() {
+        return () => {};
+      }
+      function getClientSnapshot() {
+        return 'Yay!';
+      }
+
+      // At the time of writing, the only API that exposes whether it's currently
+      // hydrating is the `getServerSnapshot` API, so I'm using that here to
+      // simulate an error during hydration.
+      function getServerSnapshot() {
+        if (isClient) {
+          throw new Error('Hydration error');
+        }
+        return 'Yay!';
+      }
+
+      function Child() {
+        const value = useSyncExternalStore(
+          subscribe,
+          getClientSnapshot,
+          getServerSnapshot,
+        );
+        if (isClient) {
+          readText(value);
+        }
+        Scheduler.log(value);
+        return value;
+      }
+
+      const span1Ref = React.createRef();
+      const span2Ref = React.createRef();
+      const span3Ref = React.createRef();
+
+      function App() {
+        return (
+          <div>
+            <span ref={span1Ref} />
+            <Suspense fallback="Loading...">
+              <span ref={span2Ref}>
+                <Child />
+              </span>
+            </Suspense>
+            <span ref={span3Ref} />
+          </div>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog(['Yay!']);
+
+      const [span1, span2, span3] = container.getElementsByTagName('span');
+
+      // Hydrate the tree. Child will throw during hydration, but not when it
+      // falls back to client rendering.
+      isClient = true;
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      await waitForAll([
+        'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+        'Cause: Hydration error',
+      ]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span />
+          Loading...
+          <span />
+        </div>,
+      );
+
+      await clientAct(() => {
+        resolveText('Yay!');
+      });
+      assertLog(['Yay!']);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span />
+          <span>Yay!</span>
+          <span />
+        </div>,
+      );
+
+      // The node that's inside the boundary that errored during hydration was
+      // not hydrated.
+      expect(span2Ref.current).not.toBe(span2);
+
+      // But the nodes outside the boundary were.
+      expect(span1Ref.current).toBe(span1);
+      expect(span3Ref.current).toBe(span3);
+    },
+  );
+
+  it('logs regular (non-hydration) errors when the UI recovers', async () => {
+    let shouldThrow = true;
+
+    function A({unused}) {
+      if (shouldThrow) {
+        Scheduler.log('Oops!');
+        throw new Error('Oops!');
+      }
+      Scheduler.log('A');
+      return 'A';
+    }
+
+    function B() {
+      Scheduler.log('B');
+      return 'B';
+    }
+
+    function App() {
+      return (
+        <>
+          <A />
+          <B />
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    React.startTransition(() => {
+      root.render(<App />);
+    });
+
+    // Partially render A, but yield before the render has finished
+    await waitFor(['Oops!']);
+
+    // React will try rendering again synchronously. During the retry, A will
+    // not throw. This simulates a concurrent data race that is fixed by
+    // blocking the main thread.
+    shouldThrow = false;
+    await waitForAll([
+      // Render again, synchronously
+      'A',
+      'B',
+
+      // Log the error
+      'onRecoverableError: There was an error during concurrent rendering but React was able to recover by instead synchronously rendering the entire root.',
+      'Cause: Oops!',
+    ]);
+
+    // UI looks normal
+    expect(container.textContent).toEqual('AB');
+  });
+
+  it('logs multiple hydration errors in the same render', async () => {
+    let isClient = false;
+
+    function subscribe() {
+      return () => {};
+    }
+    function getClientSnapshot() {
+      return 'Yay!';
+    }
+    function getServerSnapshot() {
+      if (isClient) {
+        throw new Error('Hydration error');
+      }
+      return 'Yay!';
+    }
+
+    function Child({label}) {
+      // This will throw during client hydration. Only reason to use
+      // useSyncExternalStore in this test is because getServerSnapshot has the
+      // ability to observe whether we're hydrating.
+      useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
+      Scheduler.log(label);
+      return label;
+    }
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback="Loading...">
+            <Child label="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child label="B" />
+          </Suspense>
+        </>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    assertLog(['A', 'B']);
+
+    // Hydrate the tree. Child will throw during hydration, but not when it
+    // falls back to client rendering.
+    isClient = true;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+
+    await waitForAll([
+      'A',
+      'B',
+
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+      'Cause: Hydration error',
+
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+      'Cause: Hydration error',
+    ]);
+  });
+
+  it('supports iterable', async () => {
+    const Immutable = require('immutable');
+
+    const mappedJSX = Immutable.fromJS([
+      {name: 'a', value: 'a'},
+      {name: 'b', value: 'b'},
+    ]).map(item => <li key={item.get('value')}>{item.get('name')}</li>);
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<ul>{mappedJSX}</ul>);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <ul>
+        <li>a</li>
+        <li>b</li>
+      </ul>,
+    );
+  });
+
+  // @gate enableAsyncIterableChildren
+  it('supports async generator component', async () => {
+    async function* App() {
+      yield <span key="1">{await Promise.resolve('Hi')}</span>;
+      yield ' ';
+      yield <span key="2">{await Promise.resolve('World')}</span>;
+    }
+
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <App />
+        </div>,
+      );
+      pipe(writable);
+    });
+
+    // Each act retries once which causes a new ping which schedules
+    // new work but only after the act has finished rendering.
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Hi</span> <span>World</span>
+      </div>,
+    );
+  });
+
+  // @gate enableAsyncIterableChildren
+  it('supports async iterable children', async () => {
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        yield <span key="1">{await Promise.resolve('Hi')}</span>;
+        yield ' ';
+        yield <span key="2">{await Promise.resolve('World')}</span>;
+      },
+    };
+
+    function App({children}) {
+      return <div>{children}</div>;
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App>{iterable}</App>);
+      pipe(writable);
+    });
+
+    // Each act retries once which causes a new ping which schedules
+    // new work but only after the act has finished rendering.
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+    await act(() => {});
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Hi</span> <span>World</span>
+      </div>,
+    );
+  });
+
+  it('supports bigint', async () => {
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <div>{10n}</div>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>10</div>);
+  });
+
+  it('Supports custom abort reasons with a string', async () => {
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <AsyncText text={'hello'} />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <AsyncText text={'world'} />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    let abort;
+    const loggedErrors = [];
+    await act(() => {
+      const {pipe, abort: abortImpl} = renderToPipeableStream(<App />, {
+        onError(error) {
+          // In this test we contrive erroring with strings so we push the error whereas in most
+          // other tests we contrive erroring with Errors and push the message.
+          loggedErrors.push(error);
+          return 'a digest';
+        },
+      });
+      abort = abortImpl;
+      pipe(writable);
+    });
+
+    expect(loggedErrors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>p</p>
+        <span>span</span>
+      </div>,
+    );
+
+    await act(() => {
+      abort('foobar');
+    });
+
+    expect(loggedErrors).toEqual(['foobar', 'foobar']);
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+
+    await waitForAll([]);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering aborted due to:\n\n' +
+            'foobar',
+          'a digest',
+          componentStack(['AsyncText', 'Suspense', 'p', 'div', 'App']),
+        ],
+        [
+          'Switched to client rendering because the server rendering aborted due to:\n\n' +
+            'foobar',
+          'a digest',
+          componentStack(['AsyncText', 'Suspense', 'span', 'div', 'App']),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          'a digest',
+        ],
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          'a digest',
+        ],
+      ],
+    );
+  });
+
+  it('Supports custom abort reasons with an Error', async () => {
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <AsyncText text={'hello'} />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <AsyncText text={'world'} />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    let abort;
+    const loggedErrors = [];
+    await act(() => {
+      const {pipe, abort: abortImpl} = renderToPipeableStream(<App />, {
+        onError(error) {
+          loggedErrors.push(error.message);
+          return 'a digest';
+        },
+      });
+      abort = abortImpl;
+      pipe(writable);
+    });
+
+    expect(loggedErrors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>p</p>
+        <span>span</span>
+      </div>,
+    );
+
+    await act(() => {
+      abort(new Error('uh oh'));
+    });
+
+    expect(loggedErrors).toEqual(['uh oh', 'uh oh']);
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
+      },
+    });
+
+    await waitForAll([]);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'Switched to client rendering because the server rendering aborted due to:\n\n' +
+            'uh oh',
+          'a digest',
+          componentStack(['AsyncText', 'Suspense', 'p', 'div', 'App']),
+        ],
+        [
+          'Switched to client rendering because the server rendering aborted due to:\n\n' +
+            'uh oh',
+          'a digest',
+          componentStack(['AsyncText', 'Suspense', 'span', 'div', 'App']),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          'a digest',
+        ],
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          'a digest',
+        ],
+      ],
+    );
+  });
+
+  it('warns in dev if you access digest from errorInfo in onRecoverableError', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Suspense fallback={'loading...'}>
+            <AsyncText text={'hello'} />
+          </Suspense>
+        </div>,
+        {
+          onError(error) {
+            return 'a digest';
+          },
+        },
+      );
+      rejectText('hello');
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>loading...</div>);
+
+    ReactDOMClient.hydrateRoot(
+      container,
+      <div>
+        <Suspense fallback={'loading...'}>hello</Suspense>
+      </div>,
+      {
+        onRecoverableError(error, errorInfo) {
+          expect(error.digest).toBe('a digest');
+          expect(errorInfo.digest).toBe(undefined);
+          assertConsoleErrorDev(
+            [
+              'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
+                ' This property is no longer provided as part of errorInfo but can be accessed as a property' +
+                ' of the Error instance itself.',
+            ],
+            {withoutStack: true},
+          );
+        },
+      },
+    );
+    await waitForAll([]);
+  });
+
+  it('takes an importMap option which emits an "importmap" script in the head', async () => {
+    const importMap = {
+      foo: './path/to/foo.js',
+    };
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <head>
+            <script async={true} src="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          importMap,
+        },
+      ).pipe(writable);
+    });
+
+    expect(document.head.innerHTML).toBe(
+      '<script type="importmap">' +
+        JSON.stringify(importMap) +
+        '</script><script async="" src="foo"></script>' +
+        (gate(flags => flags.shouldUseFizzExternalRuntime)
+          ? '<script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>'
+          : '') +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render">'
+          : ''),
+    );
+  });
+
+  // bugfix: https://github.com/facebook/react/issues/27286
+  it('can render custom elements with children on ther server', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <my-element>
+              <div>foo</div>
+            </my-element>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <my-element>
+            <div>foo</div>
+          </my-element>
+        </body>
+      </html>,
+    );
+  });
+
+  // https://github.com/facebook/react/issues/27540
+  // This test is not actually asserting much because there is possibly a bug in the closeing logic for the
+  // Node implementation of Fizz. The close leads to an abort which sets the destination to null before the Float
+  // method has an opportunity to schedule a write. We should fix this probably and once we do this test will start
+  // to fail if the underyling issue of writing after stream completion isn't fixed
+  it('does not try to write to the stream after it has been closed', async () => {
+    async function preloadLate() {
+      await 1;
+      ReactDOM.preconnect('foo');
+    }
+
+    function Preload() {
+      preloadLate();
+      return null;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <main>hello</main>
+            <Preload />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <main>hello</main>
+        </body>
+      </html>,
+    );
+  });
+
+  it('provides headers after initial work if onHeaders option used', async () => {
+    let headers = null;
+    function onHeaders(x) {
+      headers = x;
+    }
+
+    function Preloads() {
+      ReactDOM.preload('font2', {as: 'font'});
+      ReactDOM.preload('imagepre2', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preconnect('pre2', {crossOrigin: 'use-credentials'});
+      ReactDOM.prefetchDNS('dns2');
+    }
+
+    function Blocked() {
+      readText('blocked');
+      return (
+        <>
+          <Preloads />
+          <img src="image2" />
+        </>
+      );
+    }
+
+    function App() {
+      ReactDOM.preload('font', {as: 'font'});
+      ReactDOM.preload('imagepre', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preconnect('pre', {crossOrigin: 'use-credentials'});
+      ReactDOM.prefetchDNS('dns');
+      return (
+        <html>
+          <body>
+            <img src="image" />
+            <Blocked />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />, {onHeaders});
+    });
+
+    expect(headers).toEqual({
+      Link: `
+<pre>; rel=preconnect; crossorigin="use-credentials",
+ <dns>; rel=dns-prefetch,
+ <font>; rel=preload; as="font"; crossorigin="",
+ <imagepre>; rel=preload; as="image"; fetchpriority="high",
+ <image>; rel=preload; as="image"
+`
+        .replaceAll('\n', '')
+        .trim(),
+    });
+  });
+
+  it('omits images from preload headers if they contain srcset and sizes', async () => {
+    let headers = null;
+    function onHeaders(x) {
+      headers = x;
+    }
+
+    function App() {
+      ReactDOM.preload('responsive-preload-set-only', {
+        as: 'image',
+        fetchPriority: 'high',
+        imageSrcSet: 'srcset',
+      });
+      ReactDOM.preload('responsive-preload', {
+        as: 'image',
+        fetchPriority: 'high',
+        imageSrcSet: 'srcset',
+        imageSizes: 'sizes',
+      });
+      ReactDOM.preload('non-responsive-preload', {
+        as: 'image',
+        fetchPriority: 'high',
+      });
+      return (
+        <html>
+          <body>
+            <img
+              src="responsive-img-set-only"
+              fetchPriority="high"
+              srcSet="srcset"
+            />
+            <img
+              src="responsive-img"
+              fetchPriority="high"
+              srcSet="srcset"
+              sizes="sizes"
+            />
+            <img src="non-responsive-img" fetchPriority="high" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />, {onHeaders});
+    });
+
+    expect(headers).toEqual({
+      Link: `
+<non-responsive-preload>; rel=preload; as="image"; fetchpriority="high", 
+<non-responsive-img>; rel=preload; as="image"; fetchpriority="high"
+`
+        .replaceAll('\n', '')
+        .trim(),
+    });
+  });
+
+  it('emits nothing for headers if you pipe before work begins', async () => {
+    let headers = null;
+    function onHeaders(x) {
+      headers = x;
+    }
+
+    function App() {
+      ReactDOM.preload('presrc', {
+        as: 'image',
+        fetchPriority: 'high',
+        imageSrcSet: 'presrcset',
+        imageSizes: 'presizes',
+      });
+      return (
+        <html>
+          <body>
+            <img src="src" srcSet="srcset" sizes="sizes" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />, {onHeaders}).pipe(writable);
+    });
+
+    expect(headers).toEqual({});
+  });
+
+  it('stops accumulating new headers once the maxHeadersLength limit is satisifed', async () => {
+    let headers = null;
+    function onHeaders(x) {
+      headers = x;
+    }
+
+    function App() {
+      ReactDOM.preconnect('foo');
+      ReactDOM.preconnect('bar');
+      ReactDOM.preconnect('baz');
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />, {onHeaders, maxHeadersLength: 44});
+    });
+
+    expect(headers).toEqual({
+      Link: `
+<foo>; rel=preconnect,
+ <bar>; rel=preconnect
+`
+        .replaceAll('\n', '')
+        .trim(),
+    });
+  });
+
+  it('logs an error if onHeaders throws but continues the render', async () => {
+    const errors = [];
+    function onError(error) {
+      errors.push(error.message);
+    }
+
+    function onHeaders(x) {
+      throw new Error('bad onHeaders');
+    }
+
+    let pipe;
+    await act(() => {
+      ({pipe} = renderToPipeableStream(<div>hello</div>, {onHeaders, onError}));
+    });
+
+    expect(errors).toEqual(['bad onHeaders']);
+
+    await act(() => {
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>hello</div>);
+  });
+
+  it('accounts for the length of the interstitial between links when computing the headers length', async () => {
+    let headers = null;
+    function onHeaders(x) {
+      headers = x;
+    }
+
+    function App() {
+      // 20 bytes
+      ReactDOM.preconnect('01');
+      // 42 bytes
+      ReactDOM.preconnect('02');
+      // 64 bytes
+      ReactDOM.preconnect('03');
+      // 86 bytes
+      ReactDOM.preconnect('04');
+      // 108 bytes
+      ReactDOM.preconnect('05');
+      // 130 bytes
+      ReactDOM.preconnect('06');
+      // 152 bytes
+      ReactDOM.preconnect('07');
+      // 174 bytes
+      ReactDOM.preconnect('08');
+      // 196 bytes
+      ReactDOM.preconnect('09');
+      // 218 bytes
+      ReactDOM.preconnect('10');
+      // 240 bytes
+      ReactDOM.preconnect('11');
+      // 262 bytes
+      ReactDOM.preconnect('12');
+      // 284 bytes
+      ReactDOM.preconnect('13');
+      // 306 bytes
+      ReactDOM.preconnect('14');
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />, {onHeaders, maxHeadersLength: 305});
+    });
+    expect(headers.Link.length).toBe(284);
+
+    await act(() => {
+      renderToPipeableStream(<App />, {onHeaders, maxHeadersLength: 306});
+    });
+    expect(headers.Link.length).toBe(306);
+  });
+
+  it('does not perform any additional work after fatally erroring', async () => {
+    let resolve: () => void;
+    const promise = new Promise(r => {
+      resolve = r;
+    });
+    function AsyncComp() {
+      React.use(promise);
+      return <DidRender>Async</DidRender>;
+    }
+
+    let didRender = false;
+    function DidRender({children}) {
+      didRender = true;
+      return children;
+    }
+
+    function ErrorComp() {
+      throw new Error('boom');
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <AsyncComp />
+          </Suspense>
+          <ErrorComp />
+        </div>
+      );
+    }
+
+    let pipe;
+    const errors = [];
+    let didFatal = true;
+    await act(() => {
+      pipe = renderToPipeableStream(<App />, {
+        onError(error) {
+          errors.push(error.message);
+        },
+        onShellError(error) {
+          didFatal = true;
+        },
+      }).pipe;
+    });
+
+    expect(didRender).toBe(false);
+    await act(() => {
+      resolve();
+    });
+    expect(didRender).toBe(false);
+
+    const testWritable = new Stream.Writable();
+    await act(() => pipe(testWritable));
+    expect(didRender).toBe(false);
+    expect(didFatal).toBe(didFatal);
+    expect(errors).toEqual([
+      'boom',
+      'The destination stream errored while writing data.',
+    ]);
+  });
+
+  describe('error escaping', () => {
+    it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
+      window.__outlet = {};
+
+      const dangerousErrorString =
+        '"></template></div><script>window.__outlet.message="from error"</script><div><template data-foo="';
+
+      function Erroring() {
+        throw new Error(dangerousErrorString);
+      }
+
+      // We can't test newline in component stacks because the stack always takes just one line and we end up
+      // dropping the first part including the \n character
+      Erroring.displayName =
+        'DangerousName' +
+        dangerousErrorString.replace(
+          'message="from error"',
+          'stack="from_stack"',
+        );
+
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Erroring />
+            </Suspense>
+          </div>
+        );
+      }
+
+      function onError(x) {
+        return `dangerous hash ${x.message.replace(
+          'message="from error"',
+          'hash="from hash"',
+        )}`;
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+      expect(window.__outlet).toEqual({});
+    });
+
+    it('escapes error hash, message, and component stack values in clientRenderInstruction (javascript escaping)', async () => {
+      window.__outlet = {};
+
+      const dangerousErrorString =
+        '");window.__outlet.message="from error";</script><script>(() => {})("';
+
+      let rejectComponent;
+      const SuspensyErroring = React.lazy(() => {
+        return new Promise((resolve, reject) => {
+          rejectComponent = reject;
+        });
+      });
+
+      // We can't test newline in component stacks because the stack always takes just one line and we end up
+      // dropping the first part including the \n character
+      SuspensyErroring.displayName =
+        'DangerousName' +
+        dangerousErrorString.replace(
+          'message="from error"',
+          'stack="from_stack"',
+        );
+
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <SuspensyErroring />
+            </Suspense>
+          </div>
+        );
+      }
+
+      function onError(x) {
+        return `dangerous hash ${x.message.replace(
+          'message="from error"',
+          'hash="from hash"',
+        )}`;
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+
+      await act(() => {
+        rejectComponent(new Error(dangerousErrorString));
+      });
+      expect(window.__outlet).toEqual({});
+    });
+
+    it('escapes such that attributes cannot be masked', async () => {
+      const dangerousErrorString = '" data-msg="bad message" data-foo="';
+      const theError = new Error(dangerousErrorString);
+
+      function Erroring({isClient}) {
+        if (isClient) return 'Hello';
+        throw theError;
+      }
+
+      function App({isClient}) {
+        return (
+          <div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Erroring isClient={isClient} />
+            </Suspense>
+          </div>
+        );
+      }
+
+      const loggedErrors = [];
+      function onError(x) {
+        loggedErrors.push(x);
+        return x.message.replace('bad message', 'bad hash');
+      }
+      const expectedDigest = onError(theError);
+      loggedErrors.length = 0;
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+
+      expect(loggedErrors).toEqual([theError]);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error, errorInfo) {
+          errors.push({error, errorInfo});
+        },
+      });
+      await waitForAll([]);
+
+      // If escaping were not done we would get a message that says "bad hash"
+      expectErrors(
+        errors,
+        [
+          [
+            'Switched to client rendering because the server rendering errored:\n\n' +
+              theError.message,
+            expectedDigest,
+            componentStack(['Erroring', 'Suspense', 'div', 'App']),
+          ],
+        ],
+        [
+          [
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+            expectedDigest,
+          ],
+        ],
+      );
+    });
+  });
+
+  it('accepts an integrity property for bootstrapScripts and bootstrapModules', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          bootstrapScripts: [
+            'foo',
+            {
+              src: 'bar',
+            },
+            {
+              src: 'baz',
+              integrity: 'qux',
+            },
+          ],
+          bootstrapModules: [
+            'quux',
+            {
+              src: 'corge',
+            },
+            {
+              src: 'grault',
+              integrity: 'garply',
+            },
+          ],
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" fetchpriority="low" href="foo" as="script" />
+          <link rel="preload" fetchpriority="low" href="bar" as="script" />
+          <link
+            rel="preload"
+            fetchpriority="low"
+            href="baz"
+            as="script"
+            integrity="qux"
+          />
+          <link rel="modulepreload" fetchpriority="low" href="quux" />
+          <link rel="modulepreload" fetchpriority="low" href="corge" />
+          <link
+            rel="modulepreload"
+            fetchpriority="low"
+            href="grault"
+            integrity="garply"
+          />
+        </head>
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+    expect(
+      stripExternalRuntimeInNodes(
+        document.getElementsByTagName('script'),
+        renderOptions.unstable_externalRuntimeSrc,
+      ).map(n => n.outerHTML),
+    ).toEqual([
+      '<script src="foo" id="_R_" async=""></script>',
+      '<script src="bar" async=""></script>',
+      '<script src="baz" integrity="qux" async=""></script>',
+      '<script type="module" src="quux" async=""></script>',
+      '<script type="module" src="corge" async=""></script>',
+      '<script type="module" src="grault" integrity="garply" async=""></script>',
+    ]);
+  });
+
+  it('accepts a crossOrigin property for bootstrapScripts and bootstrapModules', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+        {
+          bootstrapScripts: [
+            'foo',
+            {
+              src: 'bar',
+            },
+            {
+              src: 'baz',
+              crossOrigin: '',
+            },
+            {
+              src: 'qux',
+              crossOrigin: 'defaults-to-empty',
+            },
+          ],
+          bootstrapModules: [
+            'quux',
+            {
+              src: 'corge',
+            },
+            {
+              src: 'grault',
+              crossOrigin: 'use-credentials',
+            },
+          ],
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" fetchpriority="low" href="foo" as="script" />
+          <link rel="preload" fetchpriority="low" href="bar" as="script" />
+          <link
+            rel="preload"
+            fetchpriority="low"
+            href="baz"
+            as="script"
+            crossorigin=""
+          />
+          <link
+            rel="preload"
+            fetchpriority="low"
+            href="qux"
+            as="script"
+            crossorigin=""
+          />
+          <link rel="modulepreload" fetchpriority="low" href="quux" />
+          <link rel="modulepreload" fetchpriority="low" href="corge" />
+          <link
+            rel="modulepreload"
+            fetchpriority="low"
+            href="grault"
+            crossorigin="use-credentials"
+          />
+        </head>
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+    expect(
+      stripExternalRuntimeInNodes(
+        document.getElementsByTagName('script'),
+        renderOptions.unstable_externalRuntimeSrc,
+      ).map(n => n.outerHTML),
+    ).toEqual([
+      '<script src="foo" id="_R_" async=""></script>',
+      '<script src="bar" async=""></script>',
+      '<script src="baz" crossorigin="" async=""></script>',
+      '<script src="qux" crossorigin="" async=""></script>',
+      '<script type="module" src="quux" async=""></script>',
+      '<script type="module" src="corge" async=""></script>',
+      '<script type="module" src="grault" crossorigin="use-credentials" async=""></script>',
+    ]);
+  });
+
+  describe('inline script escaping', () => {
+    describe('bootstrapScriptContent', () => {
+      it('the "S" in "</?[Ss]cript" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
+        window.__test_outlet = '';
+        const stringWithScriptsInIt =
+          'prescription pre<scription pre<Scription pre</scRipTion pre</ScripTion </script><script><!-- <script> -->';
+        await act(() => {
+          const {pipe} = renderToPipeableStream(<div />, {
+            bootstrapScriptContent:
+              'window.__test_outlet = "This should have been replaced";var x = "' +
+              stringWithScriptsInIt +
+              '";\nwindow.__test_outlet = x;',
+          });
+          pipe(writable);
+        });
+        expect(window.__test_outlet).toMatch(stringWithScriptsInIt);
+      });
+
+      it('does not escape \\u2028, or \\u2029 characters', async () => {
+        // these characters are ignored in engines support https://github.com/tc39/proposal-json-superset
+        // in this test with JSDOM the characters are silently dropped and thus don't need to be encoded.
+        // if you send these characters to an older browser they could fail so it is a good idea to
+        // sanitize JSON input of these characters
+        window.__test_outlet = '';
+        const el = document.createElement('p');
+        el.textContent = '{"one":1,\u2028\u2029"two":2}';
+        const stringWithLSAndPSCharacters = el.textContent;
+        await act(() => {
+          const {pipe} = renderToPipeableStream(<div />, {
+            bootstrapScriptContent:
+              'let x = ' +
+              stringWithLSAndPSCharacters +
+              '; window.__test_outlet = x;',
+          });
+          pipe(writable);
+        });
+        const outletString = JSON.stringify(window.__test_outlet);
+        expect(outletString).toBe(
+          stringWithLSAndPSCharacters.replace(/[\u2028\u2029]/g, ''),
+        );
+      });
+
+      it('does not escape <, >, or & characters', async () => {
+        // these characters valid javascript and may be necessary in scripts and won't be interpretted properly
+        // escaped outside of a string context within javascript
+        window.__test_outlet = null;
+        // this boolean expression will be cast to a number due to the bitwise &. we will look for a truthy value (1) below
+        const booleanLogicString = '1 < 2 & 3 > 1';
+        await act(() => {
+          const {pipe} = renderToPipeableStream(<div />, {
+            bootstrapScriptContent:
+              'let x = ' + booleanLogicString + '; window.__test_outlet = x;',
+          });
+          pipe(writable);
+        });
+        expect(window.__test_outlet).toBe(1);
+      });
+    });
+
+    describe('importMaps', () => {
+      it('escapes </[sS]cirpt> in importMaps', async () => {
+        window.__test_outlet_key = '';
+        window.__test_outlet_value = '';
+        const jsonWithScriptsInIt = {
+          "keypos</script><script>window.__test_outlet_key = 'pwned'</script><script>":
+            'value',
+          key: "valuepos</script><script>window.__test_outlet_value = 'pwned'</script><script>",
+        };
+        await act(() => {
+          const {pipe} = renderToPipeableStream(<div />, {
+            importMap: jsonWithScriptsInIt,
+          });
+          pipe(writable);
+        });
+        expect(window.__test_outlet_key).toBe('');
+        expect(window.__test_outlet_value).toBe('');
+      });
+    });
+
+    describe('inline script', () => {
+      it('escapes </[sS]cirpt> in inline scripts', async () => {
+        window.__test_outlet = '';
+        await act(() => {
+          const {pipe} = renderToPipeableStream(
+            <script>{`
+              <!-- some html comment </script><script>window.__test_outlet = 'pwned'</script>
+              window.__test_outlet = 'safe';
+              --> </script><script>window.__test_outlet = 'pwned after'</script>
+            `}</script>,
+          );
+          pipe(writable);
+        });
+        expect(window.__test_outlet).toBe('safe');
+      });
+    });
+  });
+
+  describe('<style> textContent escaping', () => {
+    it('the "S" in "</?[Ss]style" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <style>{`
+            .foo::after {
+              content: 'sSsS</style></Style></StYlE><style><Style>sSsS'
+            }
+            body {
+              background-color: blue;
+            }
+          `}</style>,
+        );
+        pipe(writable);
+      });
+      expect(window.getComputedStyle(document.body).backgroundColor).toMatch(
+        'rgb(0, 0, 255)',
+      );
+    });
+
+    it('the "S" in "</?[Ss]style" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters inside hoistable style tags', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <>
+            <style href="foo" precedence="default">{`
+            .foo::after {
+              content: 'sSsS</style></Style></StYlE><style><Style>sSsS'
+            }
+            body {
+              background-color: blue;
+            }
+          `}</style>
+            <style href="bar" precedence="default">{`
+          .foo::after {
+            content: 'sSsS</style></Style></StYlE><style><Style>sSsS'
+          }
+          body {
+            background-color: red;
+          }
+        `}</style>
+          </>,
+        );
+        pipe(writable);
+      });
+      expect(window.getComputedStyle(document.body).backgroundColor).toMatch(
+        'rgb(255, 0, 0)',
+      );
+    });
+  });
+
+  // @gate enableFizzExternalRuntime
+  it('supports option to load runtime as an external script', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <Suspense fallback={'loading...'}>
+              <AsyncText text="Hello" />
+            </Suspense>
+          </body>
+        </html>,
+        {
+          unstable_externalRuntimeSrc: 'src-of-external-runtime',
+        },
+      );
+      pipe(writable);
+    });
+
+    // We want the external runtime to be sent in <head> so the script can be
+    // fetched and executed as early as possible. For SSR pages using Suspense,
+    // this script execution would be render blocking.
+    expect(
+      Array.from(document.head.getElementsByTagName('script')).map(
+        n => n.outerHTML,
+      ),
+    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>loading...</body>
+      </html>,
+    );
+  });
+
+  // @gate shouldUseFizzExternalRuntime
+  it('does not send script tags for SSR instructions when using the external runtime', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <div>
+              <AsyncText text="Hello" />
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await act(() => {
+      resolveText('Hello');
+    });
+
+    // The only script elements sent should be from unstable_externalRuntimeSrc
+    expect(document.getElementsByTagName('script').length).toEqual(1);
+  });
+
+  // @gate shouldUseFizzExternalRuntime
+  it('does (unfortunately) send the external runtime for static pages', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <p>hello world!</p>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    // no scripts should be sent
+    expect(document.getElementsByTagName('script').length).toEqual(1);
+
+    // the html should be as-is
+    expect(document.documentElement.innerHTML).toEqual(
+      '<head><script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render">'
+          : '') +
+        '</head><body><p>hello world!</p>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body>',
+    );
+  });
+
+  it('#24384: Suspending should halt hydration warnings and not emit any if hydration completes successfully after unsuspending', async () => {
+    const makeApp = () => {
+      let resolve, resolved;
+      const promise = new Promise(r => {
+        resolve = () => {
+          resolved = true;
+          return r();
+        };
+      });
+      function ComponentThatSuspends() {
+        if (!resolved) {
+          throw promise;
+        }
+        return <p>A</p>;
+      }
+
+      const App = () => {
+        return (
+          <div>
+            <Suspense fallback={<h1>Loading...</h1>}>
+              <ComponentThatSuspends />
+              <h2 name="hello">world</h2>
+            </Suspense>
+          </div>
+        );
+      };
+
+      return [App, resolve];
+    };
+
+    const [ServerApp, serverResolve] = makeApp();
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<ServerApp />);
+      pipe(writable);
+    });
+    await act(() => {
+      serverResolve();
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="hello">world</h2>
+      </div>,
+    );
+
+    const [ClientApp, clientResolve] = makeApp();
+    ReactDOMClient.hydrateRoot(container, <ClientApp />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="hello">world</h2>
+      </div>,
+    );
+
+    // Now that the boundary resolves to it's children the hydration completes and discovers that there is a mismatch requiring
+    // client-side rendering.
+    await clientResolve();
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="hello">world</h2>
+      </div>,
+    );
+  });
+
+  it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
+    const makeApp = () => {
+      let resolve, resolved;
+      const promise = new Promise(r => {
+        resolve = () => {
+          resolved = true;
+          return r();
+        };
+      });
+      function ComponentThatSuspends() {
+        if (!resolved) {
+          throw promise;
+        }
+        return <p>A</p>;
+      }
+
+      const App = ({text}) => {
+        return (
+          <div>
+            <Suspense fallback={<h1>Loading...</h1>}>
+              <ComponentThatSuspends />
+              <h2 name={text}>{text}</h2>
+            </Suspense>
+          </div>
+        );
+      };
+
+      return [App, resolve];
+    };
+
+    const [ServerApp, serverResolve] = makeApp();
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<ServerApp text="initial" />);
+      pipe(writable);
+    });
+    await act(() => {
+      serverResolve();
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="initial">initial</h2>
+      </div>,
+    );
+
+    // The client app is rendered with an intentionally incorrect text. The still Suspended component causes
+    // hydration to fail silently (allowing for cache warming but otherwise skipping this boundary) until it
+    // resolves.
+    const [ClientApp, clientResolve] = makeApp();
+    ReactDOMClient.hydrateRoot(container, <ClientApp text="replaced" />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="initial">initial</h2>
+      </div>,
+    );
+
+    // Now that the boundary resolves to it's children the hydration completes and discovers that there is a mismatch requiring
+    // client-side rendering.
+    await clientResolve();
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="replaced">replaced</h2>
+      </div>,
+    );
+
+    await waitForAll([]);
+  });
+
+  it('only warns once on hydration mismatch while within a suspense boundary', async () => {
+    const App = ({text}) => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <h2>{text}</h2>
+            <h2>{text}</h2>
+            <h2>{text}</h2>
+          </Suspense>
+        </div>
+      );
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App text="initial" />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h2>initial</h2>
+        <h2>initial</h2>
+        <h2>initial</h2>
+      </div>,
+    );
+
+    ReactDOMClient.hydrateRoot(container, <App text="replaced" />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h2>replaced</h2>
+        <h2>replaced</h2>
+        <h2>replaced</h2>
+      </div>,
+    );
+
+    await waitForAll([]);
+  });
+
+  it('supresses hydration warnings when an error occurs within a Suspense boundary', async () => {
+    let isClient = false;
+
+    function ThrowWhenHydrating({children}) {
+      // This is a trick to only throw if we're hydrating, because
+      // useSyncExternalStore calls getServerSnapshot instead of the regular
+      // getSnapshot in that case.
+      useSyncExternalStore(
+        () => {},
+        t => t,
+        () => {
+          if (isClient) {
+            throw new Error('uh oh');
+          }
+        },
+      );
+      return children;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ThrowWhenHydrating>
+              <h1>one</h1>
+            </ThrowWhenHydrating>
+            <h2>two</h2>
+            <h3>{isClient ? 'five' : 'three'}</h3>
+          </Suspense>
+        </div>
+      );
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+
+    isClient = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+      'Cause: uh oh',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>five</h3>
+      </div>,
+    );
+
+    await waitForAll([]);
+  });
+
+  it('does not log for errors after the first hydration error', async () => {
+    let isClient = false;
+
+    function ThrowWhenHydrating({children, message}) {
+      // This is a trick to only throw if we're hydrating, because
+      // useSyncExternalStore calls getServerSnapshot instead of the regular
+      // getSnapshot in that case.
+      useSyncExternalStore(
+        () => {},
+        t => t,
+        () => {
+          if (isClient) {
+            Scheduler.log('throwing: ' + message);
+            throw new Error(message);
+          }
+        },
+      );
+      return children;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ThrowWhenHydrating message="first error">
+              <h1>one</h1>
+            </ThrowWhenHydrating>
+            <ThrowWhenHydrating message="second error">
+              <h2>two</h2>
+            </ThrowWhenHydrating>
+            <ThrowWhenHydrating message="third error">
+              <h3>three</h3>
+            </ThrowWhenHydrating>
+          </Suspense>
+        </div>
+      );
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+
+    isClient = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'throwing: first error',
+
+      // onRecoverableError because the UI recovered without surfacing the
+      // error to the user.
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+      'Cause: first error',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+
+    await waitForAll([]);
+  });
+
+  it('does not log for errors after a preceding fiber suspends', async () => {
+    let isClient = false;
+    let promise = null;
+    let unsuspend = null;
+    let isResolved = false;
+
+    function ComponentThatSuspendsOnClient() {
+      if (isClient && !isResolved) {
+        if (promise === null) {
+          promise = new Promise(resolve => {
+            unsuspend = () => {
+              isResolved = true;
+              resolve();
+            };
+          });
+        }
+        Scheduler.log('suspending');
+        throw promise;
+      }
+      return null;
+    }
+
+    function ThrowWhenHydrating({children, message}) {
+      // This is a trick to only throw if we're hydrating, because
+      // useSyncExternalStore calls getServerSnapshot instead of the regular
+      // getSnapshot in that case.
+      useSyncExternalStore(
+        () => {},
+        t => t,
+        () => {
+          if (isClient) {
+            Scheduler.log('throwing: ' + message);
+            throw new Error(message);
+          }
+        },
+      );
+      return children;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ComponentThatSuspendsOnClient />
+            <ThrowWhenHydrating message="first error">
+              <h1>one</h1>
+            </ThrowWhenHydrating>
+            <ThrowWhenHydrating message="second error">
+              <h2>two</h2>
+            </ThrowWhenHydrating>
+            <ThrowWhenHydrating message="third error">
+              <h3>three</h3>
+            </ThrowWhenHydrating>
+          </Suspense>
+        </div>
+      );
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+
+    isClient = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['suspending']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+    await unsuspend();
+    await waitForAll([
+      'throwing: first error',
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+      'Cause: first error',
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+  });
+
+  it('(outdated behavior) suspending after erroring will cause errors previously queued to be silenced until the boundary resolves', async () => {
+    // NOTE: This test was originally written to test a scenario that doesn't happen
+    // anymore. If something errors during hydration, we immediately unwind the
+    // stack and revert to client rendering. I've kept the test around just to
+    // demonstrate what actually happens in this sequence of events.
+
+    let isClient = false;
+    let promise = null;
+    let unsuspend = null;
+    let isResolved = false;
+
+    function ComponentThatSuspendsOnClient() {
+      if (isClient && !isResolved) {
+        if (promise === null) {
+          promise = new Promise(resolve => {
+            unsuspend = () => {
+              isResolved = true;
+              resolve();
+            };
+          });
+        }
+        Scheduler.log('suspending');
+        throw promise;
+      }
+      return null;
+    }
+
+    function ThrowWhenHydrating({children, message}) {
+      // This is a trick to only throw if we're hydrating, because
+      // useSyncExternalStore calls getServerSnapshot instead of the regular
+      // getSnapshot in that case.
+      useSyncExternalStore(
+        () => {},
+        t => t,
+        () => {
+          if (isClient) {
+            Scheduler.log('throwing: ' + message);
+            throw new Error(message);
+          }
+        },
+      );
+      return children;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ThrowWhenHydrating message="first error">
+              <h1>one</h1>
+            </ThrowWhenHydrating>
+            <ThrowWhenHydrating message="second error">
+              <h2>two</h2>
+            </ThrowWhenHydrating>
+            <ComponentThatSuspendsOnClient />
+            <ThrowWhenHydrating message="third error">
+              <h3>three</h3>
+            </ThrowWhenHydrating>
+          </Suspense>
+        </div>
+      );
+    };
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+
+    isClient = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'throwing: first error',
+      'suspending',
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.',
+      'Cause: first error',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>Loading...</h1>
+      </div>,
+    );
+    await clientAct(() => unsuspend());
+    // Since our client components only throw on the very first render there are no
+    // new throws in this pass
+    assertLog([]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>three</h3>
+      </div>,
+    );
+  });
+
+  it('#24578 Hydration errors caused by a suspending component should not become recoverable when nested in an ancestor Suspense that is showing primary content', async () => {
+    // this test failed before because hydration errors on the inner boundary were upgraded to recoverable by
+    // a codepath of the outer boundary
+    function App({isClient}) {
+      return (
+        <Suspense fallback={'outer'}>
+          <Suspense fallback={'inner'}>
+            <div>
+              {isClient ? <AsyncText text="A" /> : <Text text="A" />}
+              <b>B</b>
+            </div>
+          </Suspense>
+        </Suspense>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error.message);
+      },
+    });
+
+    await waitForAll([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A<b>B</b>
+      </div>,
+    );
+
+    resolveText('A');
+    await waitForAll([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A<b>B</b>
+      </div>,
+    );
+  });
+
+  it('hydration warnings for mismatched text with multiple text nodes caused by suspending should be suppressed', async () => {
+    let resolve;
+    const Lazy = React.lazy(() => {
+      return new Promise(r => {
+        resolve = r;
+      });
+    });
+
+    function App({isClient}) {
+      return (
+        <div>
+          {isClient ? <Lazy /> : <p>lazy</p>}
+          <p>some {'text'}</p>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error.message);
+      },
+    });
+
+    await waitForAll([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>lazy</p>
+        <p>some {'text'}</p>
+      </div>,
+    );
+
+    resolve({default: () => <p>lazy</p>});
+    await waitForAll([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>lazy</p>
+        <p>some {'text'}</p>
+      </div>,
+    );
+  });
+
+  it('can emit the preamble even if the head renders asynchronously', async () => {
+    function AsyncNoOutput() {
+      readText('nooutput');
+      return null;
+    }
+    function AsyncHead() {
+      readText('head');
+      return (
+        <head data-foo="foo">
+          <title>a title</title>
+        </head>
+      );
+    }
+    function AsyncBody() {
+      readText('body');
+      return (
+        <body data-bar="bar">
+          <link rel="preload" as="style" href="foo" />
+          hello
+        </body>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html data-html="html">
+          <AsyncNoOutput />
+          <AsyncHead />
+          <AsyncBody />
+        </html>,
+      );
+      pipe(writable);
+    });
+    await act(() => {
+      resolveText('body');
+    });
+    await act(() => {
+      resolveText('nooutput');
+    });
+    await act(() => {
+      resolveText('head');
+    });
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-html="html">
+        <head data-foo="foo">
+          <link rel="preload" as="style" href="foo" />
+          <title>a title</title>
+        </head>
+        <body data-bar="bar">hello</body>
+      </html>,
+    );
+  });
+
+  it('holds back body and html closing tags (the postamble) until all pending tasks are completed', async () => {
+    const chunks = [];
+    writable.on('data', chunk => {
+      chunks.push(chunk);
+    });
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            first
+            <Suspense>
+              <AsyncText text="second" />
+            </Suspense>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>{'first'}</body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('second');
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          {'first'}
+          {'second'}
+        </body>
+      </html>,
+    );
+
+    expect(chunks.pop()).toEqual('</body></html>');
+  });
+
+  describe('text separators', () => {
+    // To force performWork to start before resolving AsyncText but before piping we need to wait until
+    // after scheduleWork which currently uses setImmediate to delay performWork
+    function afterImmediate() {
+      return new Promise(resolve => {
+        setImmediate(resolve);
+      });
+    }
+
+    it('only includes separators between adjacent text nodes', async () => {
+      function App({name}) {
+        return (
+          <div>
+            hello<b>world, {name}</b>!
+          </div>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App name="Foo" />);
+        pipe(writable);
+      });
+
+      expect(container.innerHTML).toEqual(
+        (gate(flags => flags.shouldUseFizzExternalRuntime)
+          ? '<script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>'
+          : '') + '<div>hello<b>world, <!-- -->Foo</b>!</div>',
+      );
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          hello<b>world, {'Foo'}</b>!
+        </div>,
+      );
+    });
+
+    it('does not insert text separators even when adjacent text is in a delayed segment', async () => {
+      function App({name}) {
+        return (
+          <div>
+            <Suspense fallback={'loading...'}>
+              <div id="app-div">
+                hello
+                <b>
+                  world, <AsyncText text={name} />
+                </b>
+                !
+              </div>
+            </Suspense>
+          </div>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App name="Foo" />);
+        pipe(writable);
+      });
+
+      expect(document.getElementById('app-div').outerHTML).toEqual(
+        '<div id="app-div">hello<b>world, <template id="P:1"></template></b>!</div>',
+      );
+
+      await act(() => resolveText('Foo'));
+
+      const div = stripExternalRuntimeInNodes(
+        container.children,
+        renderOptions.unstable_externalRuntimeSrc,
+      )[0].children[0];
+      expect(div.outerHTML).toEqual(
+        '<div id="app-div">hello<b>world, Foo</b>!</div>',
+      );
+
+      expect(div.childNodes.length).toBe(3);
+      const b = div.childNodes[1];
+      expect(b.childNodes.length).toBe(2);
+      expect(b.childNodes[0]).toMatchInlineSnapshot('world, ');
+      expect(b.childNodes[1]).toMatchInlineSnapshot('Foo');
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div id="app-div">
+            hello<b>world, {'Foo'}</b>!
+          </div>
+        </div>,
+      );
+    });
+
+    it('works with multiple adjacent segments', async () => {
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={'loading...'}>
+              <div id="app-div">
+                h<AsyncText text={'ello'} />
+                w<AsyncText text={'orld'} />
+              </div>
+            </Suspense>
+          </div>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      expect(document.getElementById('app-div').outerHTML).toEqual(
+        '<div id="app-div">h<template id="P:1"></template>w<template id="P:2"></template></div>',
+      );
+
+      await act(() => resolveText('orld'));
+
+      expect(document.getElementById('app-div').outerHTML).toEqual(
+        '<div id="app-div">h<template id="P:1"></template>world</div>',
+      );
+
+      await act(() => resolveText('ello'));
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].children[0].outerHTML,
+      ).toEqual('<div id="app-div">helloworld</div>');
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div id="app-div">{['h', 'ello', 'w', 'orld']}</div>
+        </div>,
+      );
+    });
+
+    it('works when some segments are flushed and others are patched', async () => {
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={'loading...'}>
+              <div id="app-div">
+                h<AsyncText text={'ello'} />
+                w<AsyncText text={'orld'} />
+              </div>
+            </Suspense>
+          </div>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('ello'));
+        pipe(writable);
+      });
+
+      expect(document.getElementById('app-div').outerHTML).toEqual(
+        '<div id="app-div">h<!-- -->ello<!-- -->w<template id="P:1"></template></div>',
+      );
+
+      await act(() => resolveText('orld'));
+
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].children[0].outerHTML,
+      ).toEqual('<div id="app-div">h<!-- -->ello<!-- -->world</div>');
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div id="app-div">{['h', 'ello', 'w', 'orld']}</div>
+        </div>,
+      );
+    });
+
+    it('does not prepend a text separators if the segment follows a non-Text Node', async () => {
+      function App() {
+        return (
+          <Suspense fallback={'loading...'}>
+            <div>
+              hello
+              <b>
+                <AsyncText text={'world'} />
+              </b>
+            </div>
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(container.lastElementChild.outerHTML).toEqual(
+        '<div>hello<b>world<!-- --></b></div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          hello<b>world</b>
+        </div>,
+      );
+    });
+
+    it('does not prepend a text separators if the segments first emission is a non-Text Node', async () => {
+      function App() {
+        return (
+          <Suspense fallback={'loading...'}>
+            <div>
+              hello
+              <AsyncTextWrapped as={'b'} text={'world'} />
+            </div>
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(container.lastElementChild.outerHTML).toEqual(
+        '<div>hello<b>world</b></div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          hello<b>world</b>
+        </div>,
+      );
+    });
+
+    it('should not insert separators for text inside Suspense boundaries even if they would otherwise be considered text-embedded', async () => {
+      function App() {
+        return (
+          <Suspense fallback={'loading...'}>
+            <div id="app-div">
+              start
+              <Suspense fallback={'[loading first]'}>
+                firststart
+                <AsyncText text={'first suspended'} />
+                firstend
+              </Suspense>
+              <Suspense fallback={'[loading second]'}>
+                secondstart
+                <b>
+                  <AsyncText text={'second suspended'} />
+                </b>
+              </Suspense>
+              end
+            </div>
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(document.getElementById('app-div').outerHTML).toEqual(
+        '<div id="app-div">start<!--$?--><template id="B:0"></template>[loading first]<!--/$--><!--$?--><template id="B:1"></template>[loading second]<!--/$-->end</div>',
+      );
+
+      await act(() => {
+        resolveText('first suspended');
+      });
+
+      expect(document.getElementById('app-div').outerHTML).toEqual(
+        '<div id="app-div">start<!--$-->firststartfirst suspendedfirstend<!--/$--><!--$?--><template id="B:1"></template>[loading second]<!--/$-->end</div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">
+          {'start'}
+          {'firststart'}
+          {'first suspended'}
+          {'firstend'}
+          {'[loading second]'}
+          {'end'}
+        </div>,
+      );
+
+      await act(() => {
+        resolveText('second suspended');
+      });
+
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual(
+        '<div id="app-div">start<!--$-->firststartfirst suspendedfirstend<!--/$--><!--$-->secondstart<b>second suspended</b><!--/$-->end</div>',
+      );
+
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">
+          {'start'}
+          {'firststart'}
+          {'first suspended'}
+          {'firstend'}
+          {'secondstart'}
+          <b>second suspended</b>
+          {'end'}
+        </div>,
+      );
+    });
+
+    it('(only) includes extraneous text separators in segments that complete before flushing, followed by nothing or a non-Text node', async () => {
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={'text before, nothing after...'}>
+              hello
+              <AsyncText text="world" />
+            </Suspense>
+            <Suspense fallback={'nothing before or after...'}>
+              <AsyncText text="world" />
+            </Suspense>
+            <Suspense fallback={'text before, element after...'}>
+              hello
+              <AsyncText text="world" />
+              <br />
+            </Suspense>
+            <Suspense fallback={'nothing before, element after...'}>
+              <AsyncText text="world" />
+              <br />
+            </Suspense>
+          </div>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(container.innerHTML).toEqual(
+        (gate(flags => flags.shouldUseFizzExternalRuntime)
+          ? '<script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>'
+          : '') +
+          '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          {/* first boundary */}
+          {'hello'}
+          {'world'}
+          {/* second boundary */}
+          {'world'}
+          {/* third boundary */}
+          {'hello'}
+          {'world'}
+          <br />
+          {/* fourth boundary */}
+          {'world'}
+          <br />
+        </div>,
+      );
+    });
+  });
+
+  describe('title children', () => {
+    it('should accept a single string child', async () => {
+      // a Single string child
+      function App() {
+        return (
+          <head>
+            <title>hello</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
+    });
+
+    it('should accept a single number child', async () => {
+      // a Single number child
+      function App() {
+        return (
+          <head>
+            <title>4</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
+    });
+
+    it('should accept a single bigint child', async () => {
+      // a Single number child
+      function App() {
+        return (
+          <head>
+            <title>5n</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(document.head)).toEqual(<title>5n</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(document.head)).toEqual(<title>5n</title>);
+    });
+
+    it('should accept children array of length 1 containing a string', async () => {
+      // a Single string child
+      function App() {
+        return (
+          <head>
+            <title>{['hello']}</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(document.head)).toEqual(<title>hello</title>);
+    });
+
+    it('should warn in dev when given an array of length 2 or more', async () => {
+      function App() {
+        return (
+          <head>
+            <title>{['hello1', 'hello2']}</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'React expects the `children` prop of <title> tags to be a string, number, bigint, ' +
+          'or object with a novel `toString` method but found an Array with length 2 instead. ' +
+          'Browsers treat all child Nodes of <title> tags as Text content and React expects ' +
+          'to be able to convert `children` of <title> tags to a single string value which is why ' +
+          'Arrays of length greater than 1 are not supported. ' +
+          'When using JSX it can be common to combine text nodes and value nodes. ' +
+          'For example: <title>hello {nameOfUser}</title>. ' +
+          'While not immediately apparent, `children` in this case is an Array with length 2. ' +
+          'If your `children` prop is using this form try rewriting it using a template string: ' +
+          '<title>{`hello ${nameOfUser}`}</title>.\n' +
+          '    in title (at **)\n' +
+          '    in App (at **)',
+      ]);
+
+      expect(getVisibleChildren(document.head)).toEqual(<title />);
+      const errors = [];
+      ReactDOMClient.hydrateRoot(document.head, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      // with float, the title doesn't render on the client or on the server
+      expect(getVisibleChildren(document.head)).toEqual(<title />);
+    });
+
+    it('should warn in dev if you pass a React Component as a child to <title>', async () => {
+      function IndirectTitle() {
+        return 'hello';
+      }
+
+      function App() {
+        return (
+          <head>
+            <title>
+              <IndirectTitle />
+            </title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'React expects the `children` prop of <title> tags to be a string, number, bigint, ' +
+          'or object with a novel `toString` method but found an object that appears to be a ' +
+          'React element which never implements a suitable `toString` method. ' +
+          'Browsers treat all child Nodes of <title> tags as Text content and React expects ' +
+          'to be able to convert children of <title> tags to a single string value which is ' +
+          'why rendering React elements is not supported. If the `children` of <title> is a ' +
+          'React Component try moving the <title> tag into that component. ' +
+          'If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.\n' +
+          '    in title (at **)\n' +
+          '    in App (at **)',
+      ]);
+      // object titles are toStringed when float is on
+      expect(getVisibleChildren(document.head)).toEqual(
+        <title>{'[object Object]'}</title>,
+      );
+      const errors = [];
+      ReactDOMClient.hydrateRoot(document.head, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      // object titles are toStringed when float is on
+      expect(getVisibleChildren(document.head)).toEqual(
+        <title>{'[object Object]'}</title>,
+      );
+    });
+
+    it('should warn in dev if you pass an object that does not implement toString as a child to <title>', async () => {
+      function App() {
+        return (
+          <head>
+            <title>{{}}</title>
+          </head>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'React expects the `children` prop of <title> tags to be a string, number, bigint, ' +
+          'or object with a novel `toString` method but found an object that does not implement a ' +
+          'suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text ' +
+          'content and React expects to be able to convert children of <title> tags to a single string value. ' +
+          'Using the default `toString` method available on every object is almost certainly an error. ' +
+          'Consider whether the `children` of this <title> is an object in error and change it to a ' +
+          'string or number value if so. Otherwise implement a `toString` method that React can ' +
+          'use to produce a valid <title>.\n' +
+          '    in title (at **)\n' +
+          '    in App (at **)',
+      ]);
+      // object titles are toStringed when float is on
+      expect(getVisibleChildren(document.head)).toEqual(
+        <title>{'[object Object]'}</title>,
+      );
+      const errors = [];
+      ReactDOMClient.hydrateRoot(document.head, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      await waitForAll([]);
+      expect(errors).toEqual([]);
+      // object titles are toStringed when float is on
+      expect(getVisibleChildren(document.head)).toEqual(
+        <title>{'[object Object]'}</title>,
+      );
+    });
+  });
+
+  it('basic use(promise)', async () => {
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.resolve('B');
+    const promiseC = Promise.resolve('C');
+
+    function Async() {
+      return use(promiseA) + use(promiseB) + use(promiseC);
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Async />
+        </Suspense>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    // TODO: The `act` implementation in this file doesn't unwrap microtasks
+    // automatically. We can't use the same `act` we use for Fiber tests
+    // because that relies on the mock Scheduler. Doesn't affect any public
+    // API but we might want to fix this for our own internal tests.
+    //
+    // For now, wait for each promise in sequence.
+    await act(async () => {
+      await promiseA;
+    });
+    await act(async () => {
+      await promiseB;
+    });
+    await act(async () => {
+      await promiseC;
+    });
+
+    expect(getVisibleChildren(container)).toEqual('ABC');
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual('ABC');
+  });
+
+  it('basic use(context)', async () => {
+    const ContextA = React.createContext('default');
+    const ContextB = React.createContext('B');
+    function Client() {
+      return use(ContextA) + use(ContextB);
+    }
+    function App() {
+      return (
+        <>
+          <ContextA.Provider value="A">
+            <Client />
+          </ContextA.Provider>
+        </>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual('AB');
+
+    // Hydration uses a different renderer runtime (Fiber instead of Fizz).
+    // We reset _currentRenderer here to not trigger a warning about multiple
+    // renderers concurrently using these contexts
+    ContextA._currentRenderer = null;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual('AB');
+  });
+
+  it('use(promise) in multiple components', async () => {
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.resolve('B');
+    const promiseC = Promise.resolve('C');
+    const promiseD = Promise.resolve('D');
+
+    function Child({prefix}) {
+      return prefix + use(promiseC) + use(promiseD);
+    }
+
+    function Parent() {
+      return <Child prefix={use(promiseA) + use(promiseB)} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Parent />
+        </Suspense>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    // TODO: The `act` implementation in this file doesn't unwrap microtasks
+    // automatically. We can't use the same `act` we use for Fiber tests
+    // because that relies on the mock Scheduler. Doesn't affect any public
+    // API but we might want to fix this for our own internal tests.
+    //
+    // For now, wait for each promise in sequence.
+    await act(async () => {
+      await promiseA;
+    });
+    await act(async () => {
+      await promiseB;
+    });
+    await act(async () => {
+      await promiseC;
+    });
+    await act(async () => {
+      await promiseD;
+    });
+
+    expect(getVisibleChildren(container)).toEqual('ABCD');
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual('ABCD');
+  });
+
+  it('using a rejected promise will throw', async () => {
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.reject(new Error('Oops!'));
+    const promiseC = Promise.resolve('C');
+
+    // Jest/Node will raise an unhandled rejected error unless we await this. It
+    // works fine in the browser, though.
+    await expect(promiseB).rejects.toThrow('Oops!');
+
+    function Async() {
+      return use(promiseA) + use(promiseB) + use(promiseC);
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <ErrorBoundary>
+              <Async />
+            </ErrorBoundary>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const reportedServerErrors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onError(error) {
+          reportedServerErrors.push(error);
+        },
+      });
+      pipe(writable);
+    });
+
+    // TODO: The `act` implementation in this file doesn't unwrap microtasks
+    // automatically. We can't use the same `act` we use for Fiber tests
+    // because that relies on the mock Scheduler. Doesn't affect any public
+    // API but we might want to fix this for our own internal tests.
+    //
+    // For now, wait for each promise in sequence.
+    await act(async () => {
+      await promiseA;
+    });
+    await act(async () => {
+      await expect(promiseB).rejects.toThrow('Oops!');
+    });
+    await act(async () => {
+      await promiseC;
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+    expect(reportedServerErrors.length).toBe(1);
+    expect(reportedServerErrors[0].message).toBe('Oops!');
+
+    const reportedCaughtErrors = [];
+    const reportedClientErrors = [];
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onCaughtError(error) {
+        reportedCaughtErrors.push(error);
+      },
+      onRecoverableError(error) {
+        reportedClientErrors.push(error);
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(<div>Oops!</div>);
+    // Because this is rethrown on the client, it is not a recoverable error.
+    expect(reportedClientErrors.length).toBe(0);
+    // It is caught by the error boundary.
+    expect(reportedCaughtErrors.length).toBe(1);
+    expect(reportedCaughtErrors[0].message).toBe('Oops!');
+  });
+
+  it("use a promise that's already been instrumented and resolved", async () => {
+    const thenable = {
+      status: 'fulfilled',
+      value: 'Hi',
+      then() {},
+    };
+
+    // This will never suspend because the thenable already resolved
+    function App() {
+      return use(thenable);
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual('Hi');
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual('Hi');
+  });
+
+  it('unwraps thenable that fulfills synchronously without suspending', async () => {
+    function App() {
+      const thenable = {
+        then(resolve) {
+          // This thenable immediately resolves, synchronously, without waiting
+          // a microtask.
+          resolve('Hi');
+        },
+      };
+      try {
+        return <Text text={use(thenable)} />;
+      } catch {
+        throw new Error(
+          '`use` should not suspend because the thenable resolved synchronously.',
+        );
+      }
+    }
+    // Because the thenable resolves synchronously, we should be able to finish
+    // rendering synchronously, with no fallback.
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual('Hi');
+  });
+
+  it('promise as node', async () => {
+    const promise = Promise.resolve('Hi');
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(promise);
+      pipe(writable);
+    });
+
+    // TODO: The `act` implementation in this file doesn't unwrap microtasks
+    // automatically. We can't use the same `act` we use for Fiber tests
+    // because that relies on the mock Scheduler. Doesn't affect any public
+    // API but we might want to fix this for our own internal tests.
+    await act(async () => {
+      await promise;
+    });
+
+    expect(getVisibleChildren(container)).toEqual('Hi');
+  });
+
+  it('context as node', async () => {
+    const Context = React.createContext('Hi');
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(Context);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual('Hi');
+  });
+
+  it('recursive Usable as node', async () => {
+    const Context = React.createContext('Hi');
+    const promiseForContext = Promise.resolve(Context);
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(promiseForContext);
+      pipe(writable);
+    });
+
+    // TODO: The `act` implementation in this file doesn't unwrap microtasks
+    // automatically. We can't use the same `act` we use for Fiber tests
+    // because that relies on the mock Scheduler. Doesn't affect any public
+    // API but we might want to fix this for our own internal tests.
+    await act(async () => {
+      await promiseForContext;
+    });
+
+    expect(getVisibleChildren(container)).toEqual('Hi');
+  });
+
+  it('should correctly handle different promises in React.use() across lazy components', async () => {
+    let promise1;
+    let promise2;
+    let promiseLazy;
+
+    function Component1() {
+      promise1 ??= new Promise(r => setTimeout(() => r('value1'), 50));
+      const data = React.use(promise1);
+      return (
+        <div>
+          {data}
+          <Component2Lazy />
+        </div>
+      );
+    }
+
+    function Component2() {
+      promise2 ??= new Promise(r => setTimeout(() => r('value2'), 50));
+      const data = React.use(promise2);
+      return <div>{data}</div>;
+    }
+
+    const Component2Lazy = React.lazy(async () => {
+      promiseLazy ??= new Promise(r => setTimeout(r, 50));
+      await promiseLazy;
+      return {default: Component2};
+    });
+
+    function App() {
+      return <Component1 />;
+    }
+
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    // Wait for promise to resolve
+    await act(async () => {
+      await promise1;
+    });
+    await act(async () => {
+      await promiseLazy;
+    });
+    await act(async () => {
+      await promise2;
+    });
+
+    // Verify both components received the correct values
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        value1
+        <div>value2</div>
+      </div>,
+    );
+  });
+
+  it('useActionState hydrates without a mismatch', async () => {
+    // This is testing an implementation detail: useActionState emits comment
+    // nodes into the SSR stream, so this checks that they are handled correctly
+    // during hydration.
+
+    async function action(state) {
+      return state;
+    }
+
+    const childRef = React.createRef(null);
+    function Form() {
+      const [state] = useActionState(action, 0);
+      const text = `Child: ${state}`;
+      return (
+        <div id="child" ref={childRef}>
+          {text}
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <div>
+            <Form />
+          </div>
+          <span>Sibling</span>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <div id="child">Child: 0</div>
+        </div>
+        <span>Sibling</span>
+      </div>,
+    );
+    const child = document.getElementById('child');
+
+    // Confirm that it hydrates correctly
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(childRef.current).toBe(child);
+  });
+
+  it("useActionState hydrates without a mismatch if there's a render phase update", async () => {
+    async function action(state) {
+      return state;
+    }
+
+    const childRef = React.createRef(null);
+    function Form() {
+      const [localState, setLocalState] = React.useState(0);
+      if (localState < 3) {
+        setLocalState(localState + 1);
+      }
+
+      // Because of the render phase update above, this component is evaluated
+      // multiple times (even during SSR), but it should only emit a single
+      // marker per useActionState instance.
+      const [actionState] = useActionState(action, 0);
+      const text = `${readText('Child')}:${actionState}:${localState}`;
+      return (
+        <div id="child" ref={childRef}>
+          {text}
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Form />
+          </Suspense>
+          <span>Sibling</span>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Loading...<span>Sibling</span>
+      </div>,
+    );
+
+    await act(() => resolveText('Child'));
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div id="child">Child:0:3</div>
+        <span>Sibling</span>
+      </div>,
+    );
+    const child = document.getElementById('child');
+
+    // Confirm that it hydrates correctly
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(childRef.current).toBe(child);
+  });
+
+  describe('useEffectEvent', () => {
+    it('can server render a component with useEffectEvent', async () => {
+      const ref = React.createRef();
+      function App() {
+        const [count, setCount] = React.useState(0);
+        const onClick = React.useEffectEvent(() => {
+          setCount(c => c + 1);
+        });
+        return (
+          <button ref={ref} onClick={() => onClick()}>
+            {count}
+          </button>
+        );
+      }
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(<button>0</button>);
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      await waitForAll([]);
+      expect(getVisibleChildren(container)).toEqual(<button>0</button>);
+
+      ref.current.dispatchEvent(
+        new window.MouseEvent('click', {bubbles: true}),
+      );
+      await jest.runAllTimers();
+      expect(getVisibleChildren(container)).toEqual(<button>1</button>);
+    });
+
+    it('throws if useEffectEvent is called during a server render', async () => {
+      const logs = [];
+      function App() {
+        const onRender = React.useEffectEvent(() => {
+          logs.push('rendered');
+        });
+        onRender();
+        return <p>Hello</p>;
+      }
+
+      const reportedServerErrors = [];
+      let caughtError;
+      try {
+        await act(() => {
+          const {pipe} = renderToPipeableStream(<App />, {
+            onError(e) {
+              reportedServerErrors.push(e);
+            },
+          });
+          pipe(writable);
+        });
+      } catch (err) {
+        caughtError = err;
+      }
+      expect(logs).toEqual([]);
+      expect(caughtError.message).toContain(
+        "A function wrapped in useEffectEvent can't be called during rendering.",
+      );
+      expect(reportedServerErrors).toEqual([caughtError]);
+    });
+
+    it('does not guarantee useEffectEvent return values during server rendering are distinct', async () => {
+      function App() {
+        const onClick1 = React.useEffectEvent(() => {});
+        const onClick2 = React.useEffectEvent(() => {});
+        if (onClick1 === onClick2) {
+          return <div />;
+        } else {
+          return <span />;
+        }
+      }
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(<div />);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error);
+        },
+      });
+      await waitForAll([]);
+      expect(errors.length).toEqual(1);
+      expect(getVisibleChildren(container)).toEqual(<span />);
+    });
+  });
+
+  it('can render scripts with simple children', async () => {
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <body>
+            <script>{'try { foo() } catch (e) {} ;'}</script>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(document.documentElement.outerHTML).toEqual(
+      '<html><head>' +
+        (gate(flags => flags.shouldUseFizzExternalRuntime)
+          ? '<script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>'
+          : '') +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render">'
+          : '') +
+        '</head><body><script>try { foo() } catch (e) {} ;</script>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body></html>',
+    );
+  });
+
+  it('warns if script has complex children', async () => {
+    function MyScript() {
+      return 'bar();';
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <script>{2}</script>
+            <script>
+              {['try { foo() } catch (e) {} ;', 'try { bar() } catch (e) {} ;']}
+            </script>
+            <script>
+              <MyScript />
+            </script>
+          </body>
+        </html>
+      );
+    }
+
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    assertConsoleErrorDev([
+      'A script element was rendered with a number for children. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.' +
+        componentStack(['script', 'App']),
+      'A script element was rendered with an array for children. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.' +
+        componentStack(['script', 'App']),
+      'A script element was rendered with something unexpected for children. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.' +
+        componentStack(['script', 'App']),
+    ]);
+  });
+
+  it(
+    'a transition that flows into a dehydrated boundary should not suspend ' +
+      'if the boundary is showing a fallback',
+    async () => {
+      let setSearch;
+      function App() {
+        const [search, _setSearch] = React.useState('initial query');
+        setSearch = _setSearch;
+        return (
+          <div>
+            <div>{search}</div>
+            <div>
+              <Suspense fallback="Loading...">
+                <AsyncText text="Async" />
+              </Suspense>
+            </div>
+          </div>
+        );
+      }
+
+      // Render the initial HTML, which is showing a fallback.
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      // Start hydrating.
+      await clientAct(() => {
+        ReactDOMClient.hydrateRoot(container, <App />);
+      });
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>initial query</div>
+          <div>Loading...</div>
+        </div>,
+      );
+
+      // Before the HTML has streamed in, update the query. The part outside
+      // the fallback should be allowed to finish.
+      await clientAct(() => {
+        React.startTransition(() => setSearch('updated query'));
+      });
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>updated query</div>
+          <div>Loading...</div>
+        </div>,
+      );
+    },
+  );
+
+  // @gate enableHalt
+  it('can resume a prerender that was aborted', async () => {
+    const promise = new Promise(r => {});
+
+    let prerendering = true;
+
+    function Wait() {
+      if (prerendering) {
+        return React.use(promise);
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <p>
+              <span>
+                <Suspense fallback="Loading again...">
+                  <Wait />
+                </Suspense>
+              </span>
+            </p>
+            <p>
+              <span>
+                <Suspense fallback="Loading again too...">
+                  <Wait />
+                </Suspense>
+              </span>
+            </p>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const errors = [];
+    function onError(error) {
+      errors.push(error);
+    }
+    let pendingPrerender;
+    await act(() => {
+      pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+        signal,
+        onError,
+      });
+    });
+    controller.abort('boom');
+
+    const prerendered = await pendingPrerender;
+
+    expect(errors).toEqual(['boom', 'boom']);
+
+    const preludeWritable = new Stream.PassThrough();
+    preludeWritable.setEncoding('utf8');
+    preludeWritable.on('data', chunk => {
+      writable.write(chunk);
+    });
+
+    await act(() => {
+      prerendered.prelude.pipe(preludeWritable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>
+          <span>Loading again...</span>
+        </p>
+        <p>
+          <span>Loading again too...</span>
+        </p>
+      </div>,
+    );
+
+    prerendering = false;
+
+    errors.length = 0;
+    const resumed = await ReactDOMFizzServer.resumeToPipeableStream(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+      {
+        onError,
+      },
+    );
+
+    await act(() => {
+      resumed.pipe(writable);
+    });
+
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>
+          <span>Hello</span>
+        </p>
+        <p>
+          <span>Hello</span>
+        </p>
+      </div>,
+    );
+  });
+
+  it('should NOT warn for using generator functions as components', async () => {
+    function* Foo() {
+      yield <h1 key="1">Hello</h1>;
+      yield <h1 key="2">World</h1>;
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    expect(document.body.textContent).toBe('HelloWorld');
+  });
+
+  it('can abort synchronously during render', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            <ComponentThatAborts />
+            <Sibling />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    function ComponentThatAborts() {
+      abortRef.current();
+      return <p>hello world</p>;
+    }
+
+    let finished = false;
+    await act(() => {
+      const {pipe, abort} = renderToPipeableStream(<App />);
+      abortRef.current = abort;
+      writable.on('finish', () => {
+        finished = true;
+      });
+      pipe(writable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(finished).toBe(true);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during render in a lazy initializer for a component', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            <LazyAbort />
+            <Sibling />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const LazyAbort = React.lazy(() => {
+      abortRef.current();
+      return {
+        then(cb) {
+          cb({default: 'div'});
+        },
+      };
+    });
+
+    let finished = false;
+    await act(() => {
+      const {pipe, abort} = renderToPipeableStream(<App />);
+      abortRef.current = abort;
+      writable.on('finish', () => {
+        finished = true;
+      });
+      pipe(writable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(finished).toBe(true);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during render in a lazy initializer for an element', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            {lazyAbort}
+            <Sibling />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const lazyAbort = React.lazy(() => {
+      abortRef.current();
+      return {
+        then(cb) {
+          cb({default: 'hello world'});
+        },
+      };
+    });
+
+    let finished = false;
+    await act(() => {
+      const {pipe, abort} = renderToPipeableStream(<App />);
+      abortRef.current = abort;
+      writable.on('finish', () => {
+        finished = true;
+      });
+      pipe(writable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(finished).toBe(true);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during a synchronous thenable resolution', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            {thenable}
+            <Sibling />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const thenable = {
+      then(cb) {
+        abortRef.current();
+        cb(thenable.value);
+      },
+    };
+
+    let finished = false;
+    await act(() => {
+      const {pipe, abort} = renderToPipeableStream(<App />);
+      abortRef.current = abort;
+      writable.on('finish', () => {
+        finished = true;
+      });
+      pipe(writable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(finished).toBe(true);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can support throwing after aborting during a render', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+        </div>
+      );
+    }
+
+    function ComponentThatAborts() {
+      abortRef.current('boom');
+      throw new Error('bam');
+    }
+
+    const abortRef = {current: null};
+    let finished = false;
+    const errors = [];
+    await act(() => {
+      const {pipe, abort} = renderToPipeableStream(<App />, {
+        onError(err) {
+          errors.push(err);
+        },
+      });
+      abortRef.current = abort;
+      writable.on('finish', () => {
+        finished = true;
+      });
+      pipe(writable);
+    });
+
+    expect(errors).toEqual(['boom']);
+
+    expect(finished).toBe(true);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>loading...</p>
+      </div>,
+    );
+  });
+
+  it('should warn for using generators as children props', async () => {
+    function* getChildren() {
+      yield <h1 key="1">Hello</h1>;
+      yield <h1 key="2">World</h1>;
+    }
+
+    function Foo() {
+      const children = getChildren();
+      return <div>{children}</div>;
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'Using Iterators 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. You can also use an ' +
+        'Iterable that can iterate multiple times over the same items.\n' +
+        '    in div (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(document.body.textContent).toBe('HelloWorld');
+  });
+
+  it('should warn for using other types of iterators as children', async () => {
+    function Foo() {
+      let i = 0;
+      const iterator = {
+        [Symbol.iterator]() {
+          return iterator;
+        },
+        next() {
+          switch (i++) {
+            case 0:
+              return {done: false, value: <h1 key="1">Hello</h1>};
+            case 1:
+              return {done: false, value: <h1 key="2">World</h1>};
+            default:
+              return {done: true, value: undefined};
+          }
+        },
+      };
+      return iterator;
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'Using Iterators 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. You can also use an ' +
+        'Iterable that can iterate multiple times over the same items.\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(document.body.textContent).toBe('HelloWorld');
+  });
+
+  // @gate __DEV__
+  it('can get the component owner stacks during rendering in dev', async () => {
+    let stack;
+
+    function Foo() {
+      return <Bar />;
+    }
+    function Bar() {
+      return (
+        <div>
+          <Baz />
+        </div>
+      );
+    }
+    function Baz() {
+      stack = React.captureOwnerStack();
+      return <span>hi</span>;
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Foo />
+        </div>,
+      );
+      pipe(writable);
+    });
+
+    expect(normalizeCodeLocInfo(stack)).toBe(
+      '\n    in Bar (at **)' + '\n    in Foo (at **)',
+    );
+  });
+
+  // @gate __DEV__
+  it('can get the component owner stacks for onError in dev', async () => {
+    const thrownError = new Error('hi');
+    let caughtError;
+    let parentStack;
+    let ownerStack;
+
+    function Foo() {
+      return <Bar />;
+    }
+    function Bar() {
+      return (
+        <div>
+          <Baz />
+        </div>
+      );
+    }
+    function Baz() {
+      throw thrownError;
+    }
+
+    await expect(async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <div>
+            <Foo />
+          </div>,
+          {
+            onError(error, errorInfo) {
+              caughtError = error;
+              parentStack = errorInfo.componentStack;
+              ownerStack = React.captureOwnerStack
+                ? React.captureOwnerStack()
+                : null;
+            },
+          },
+        );
+        pipe(writable);
+      });
+    }).rejects.toThrow(thrownError);
+
+    expect(caughtError).toBe(thrownError);
+    expect(normalizeCodeLocInfo(parentStack)).toBe(
+      '\n    in Baz (at **)' +
+        '\n    in div (at **)' +
+        '\n    in Bar (at **)' +
+        '\n    in Foo (at **)' +
+        '\n    in div (at **)',
+    );
+    expect(normalizeCodeLocInfo(ownerStack)).toBe(
+      '\n    in Bar (at **)' + '\n    in Foo (at **)',
+    );
+  });
+
+  it('can recover from very deep trees to avoid stack overflow', async () => {
+    function Recursive({n}) {
+      if (n > 0) {
+        return <Recursive n={n - 1} />;
+      }
+      return <span>hi</span>;
+    }
+
+    // Recursively render a component tree deep enough to trigger stack overflow.
+    // Don't make this too short to not hit the limit but also not too deep to slow
+    // down the test.
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <div>
+          <Recursive n={1000} />
+        </div>,
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>hi</span>
+      </div>,
+    );
+  });
+
+  it('handles stack overflows inside components themselves', async () => {
+    function StackOverflow() {
+      // This component is recursive inside itself and is therefore an error.
+      // Assuming no tail-call optimizations.
+      function recursive(n, a0, a1, a2, a3) {
+        if (n > 0) {
+          return recursive(n - 1, a0, a1, a2, a3) + a0 + a1 + a2 + a3;
+        }
+        return a0;
+      }
+      return recursive(10000, 'should', 'not', 'resolve', 'this');
+    }
+
+    let caughtError;
+
+    await expect(async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <div>
+            <StackOverflow />
+          </div>,
+          {
+            onError(error, errorInfo) {
+              caughtError = error;
+            },
+          },
+        );
+        pipe(writable);
+      });
+    }).rejects.toThrow('Maximum call stack size exceeded');
+
+    expect(caughtError.message).toBe('Maximum call stack size exceeded');
+  });
+
+  it('client renders incomplete Suspense boundaries when the document is no longer loading when hydration begins', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = r;
+    });
+
+    function Blocking() {
+      React.use(promise);
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <p>outside</p>
+          <Suspense fallback={<p>loading...</p>}>
+            <Blocking />
+            <p>inside</p>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onError(err) {
+          errors.push(err.message);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>loading...</p>
+      </div>,
+    );
+
+    await act(() => {
+      // We now end the stream and resolve the promise that was blocking the boundary
+      // Because the stream is ended it won't actually propagate to the client
+      writable.end();
+      document.readyState = 'complete';
+      resolve();
+    });
+    // ending the stream early will cause it to error on the server
+    expect(errors).toEqual([
+      expect.stringContaining('The destination stream closed early'),
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>loading...</p>
+      </div>,
+    );
+
+    const clientErrors = [];
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error, errorInfo) {
+        clientErrors.push(error.message);
+      },
+    });
+    await waitForAll([]);
+    // When we hydrate the client the document is already not loading
+    // so we client render the boundary in fallback
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>inside</p>
+      </div>,
+    );
+    expect(clientErrors).toEqual([
+      expect.stringContaining(
+        'The server could not finish this Suspense boundar',
+      ),
+    ]);
+  });
+
+  it('client renders incomplete Suspense boundaries when the document stops loading during hydration', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = r;
+    });
+
+    function Blocking() {
+      React.use(promise);
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <p>outside</p>
+          <Suspense fallback={<p>loading...</p>}>
+            <Blocking />
+            <p>inside</p>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onError(err) {
+          errors.push(err.message);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>loading...</p>
+      </div>,
+    );
+
+    await act(() => {
+      // We now end the stream and resolve the promise that was blocking the boundary
+      // Because the stream is ended it won't actually propagate to the client
+      writable.end();
+      resolve();
+    });
+    // ending the stream early will cause it to error on the server
+    expect(errors).toEqual([
+      expect.stringContaining('The destination stream closed early'),
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>loading...</p>
+      </div>,
+    );
+
+    const clientErrors = [];
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error, errorInfo) {
+        clientErrors.push(error.message);
+      },
+    });
+    await waitForAll([]);
+    // When we hydrate the client is still waiting for the blocked boundary
+    // and won't client render unless the document is no longer loading
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>loading...</p>
+      </div>,
+    );
+
+    document.readyState = 'complete';
+    await waitForAll([]);
+    // Now that the document is no longer in loading readyState it will client
+    // render the boundary in fallback
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>outside</p>
+        <p>inside</p>
+      </div>,
+    );
+    expect(clientErrors).toEqual([
+      expect.stringContaining(
+        'The server could not finish this Suspense boundar',
+      ),
+    ]);
+  });
+
+  it('can suspend inside the <head /> tag', async () => {
+    function BlockedOn({value, children}) {
+      readText(value);
+      return children;
+    }
+
+    function App() {
+      return (
+        <html>
+          <head>
+            <Suspense fallback={<meta itemProp="head loading" />}>
+              <BlockedOn value="head">
+                <meta itemProp="" content="head" />
+              </BlockedOn>
+            </Suspense>
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta itemprop="head loading" />
+        </head>
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('head');
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta itemprop="" content="head" />
+        </head>
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta itemprop="" content="head" />
+        </head>
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      root.unmount();
+    });
+    await waitForAll([]);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('can render Suspense before, after, and around <html>', async () => {
+    function BlockedOn({value, children}) {
+      readText(value);
+      return children;
+    }
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback="this fallback never renders">
+            <div>before</div>
+          </Suspense>
+          <Suspense fallback="this fallback never renders">
+            <BlockedOn value="html">
+              <html lang="en">
+                <head>
+                  <meta itemProp="" content="non-floaty meta" />
+                </head>
+                <body>
+                  <div>hello world</div>
+                </body>
+              </html>
+            </BlockedOn>
+          </Suspense>
+          <Suspense fallback="this fallback never renders">
+            <div>after</div>
+          </Suspense>
+        </>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady: () => {
+          shellReady = true;
+        },
+      });
+      pipe(writable);
+    });
+
+    // When we Suspend above the body we block the shell because the root HTML scope
+    // is considered "reconciliation" mode whereby we should stay on the prior view
+    // (the prior page for instance) rather than showing the fallback (semantically)
+    expect(shellReady).toBe(true);
+    expect(content).toBe('');
+
+    await act(() => {
+      resolveText('html');
+    });
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(getVisibleChildren(document)).toEqual(
+      <html lang="en">
+        <head>
+          <meta itemprop="" content="non-floaty meta" />
+        </head>
+        <body>
+          <div>before</div>
+          <div>hello world</div>
+          <div>after</div>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html lang="en">
+        <head>
+          <meta itemprop="" content="non-floaty meta" />
+        </head>
+        <body>
+          <div>before</div>
+          <div>hello world</div>
+          <div>after</div>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('can render Suspense before, after, and around <body>', async () => {
+    function BlockedOn({value, children}) {
+      readText(value);
+      return children;
+    }
+
+    function App() {
+      return (
+        <html>
+          <Suspense fallback="this fallback never renders">
+            <meta content="before" />
+            <meta itemProp="" content="before" />
+          </Suspense>
+          <Suspense fallback="this fallback never renders">
+            <BlockedOn value="body">
+              <body lang="en">
+                <div>hello world</div>
+              </body>
+            </BlockedOn>
+          </Suspense>
+          <Suspense fallback="this fallback never renders">
+            <meta content="after" />
+            <meta itemProp="" content="after" />
+          </Suspense>
+        </html>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toBe('');
+
+    await act(() => {
+      resolveText('body');
+    });
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta content="before" />
+          <meta content="after" />
+        </head>
+        <body lang="en">
+          <meta itemprop="" content="before" />
+          <div>hello world</div>
+          <meta itemprop="" content="after" />
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta content="before" />
+          <meta content="after" />
+        </head>
+        <body lang="en">
+          <meta itemprop="" content="before" />
+          <div>hello world</div>
+          <meta itemprop="" content="after" />
+        </body>
+      </html>,
+    );
+    assertConsoleErrorDev([
+      [
+        'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
+        {withoutStack: true},
+      ],
+      'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
+        '\n' +
+        '\n  <App>' +
+        '\n>   <html>' +
+        '\n      <Suspense fallback="this fallb...">' +
+        '\n        <meta>' +
+        '\n>       <meta itemProp="" content="before">' +
+        '\n      ...' +
+        '\n' +
+        '\n    in meta (at **)' +
+        '\n    in App (at **)',
+      '<html> cannot contain a nested <meta>.\nSee this log for the ancestor stack trace.' +
+        '\n    in html (at **)' +
+        '\n    in App (at **)',
+      [
+        'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
+        {withoutStack: true},
+      ],
+    ]);
+
+    await root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('can render Suspense before, after, and around <head>', async () => {
+    function BlockedOn({value, children}) {
+      readText(value);
+      return children;
+    }
+
+    function App() {
+      return (
+        <html>
+          <Suspense fallback="this fallback never renders">
+            <meta content="before" />
+            <meta itemProp="" content="before" />
+          </Suspense>
+          <Suspense fallback="this fallback never renders">
+            <BlockedOn value="head">
+              <head lang="en">
+                <meta itemProp="" />
+              </head>
+            </BlockedOn>
+          </Suspense>
+          <Suspense fallback="this fallback never renders">
+            <meta content="after" />
+            <meta itemProp="" content="after" />
+          </Suspense>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toBe('');
+
+    await act(() => {
+      resolveText('head');
+    });
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head lang="en">
+          <meta content="before" />
+          <meta content="after" />
+          <meta itemprop="" />
+        </head>
+        <body>
+          <meta itemprop="" content="before" />
+          <meta itemprop="" content="after" />
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head lang="en">
+          <meta content="before" />
+          <meta content="after" />
+          <meta itemprop="" />
+        </head>
+        <body>
+          <meta itemprop="" content="before" />
+          <meta itemprop="" content="after" />
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+    assertConsoleErrorDev([
+      [
+        'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
+        {withoutStack: true},
+      ],
+      'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
+        '\n' +
+        '\n  <App>' +
+        '\n>   <html>' +
+        '\n      <Suspense fallback="this fallb...">' +
+        '\n        <meta>' +
+        '\n>       <meta itemProp="" content="before">' +
+        '\n      ...' +
+        '\n' +
+        '\n    in meta (at **)' +
+        '\n    in App (at **)',
+      '<html> cannot contain a nested <meta>.\nSee this log for the ancestor stack trace.' +
+        '\n    in html (at **)' +
+        '\n    in App (at **)',
+      [
+        'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
+        {withoutStack: true},
+      ],
+    ]);
+
+    await root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('will render fallback Document when erroring a boundary above the body and recover on the client', async () => {
+    let serverRendering = true;
+    function Boom() {
+      if (serverRendering) {
+        throw new Error('Boom!');
+      }
+      return null;
+    }
+
+    function App() {
+      return (
+        <Suspense
+          fallback={
+            <html data-error-html="">
+              <body data-error-body="">
+                <span>hello error</span>
+              </body>
+            </html>
+          }>
+          <html data-content-html="">
+            <body data-content-body="">
+              <Boom />
+              <span>hello world</span>
+            </body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+        onError(e) {
+          errors.push(e);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(errors).toEqual([new Error('Boom!')]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-error-html="">
+        <head />
+        <body data-error-body="">
+          <span>hello error</span>
+        </body>
+      </html>,
+    );
+
+    serverRendering = false;
+
+    const recoverableErrors = [];
+    const root = ReactDOMClient.hydrateRoot(document, <App />, {
+      onRecoverableError(err) {
+        recoverableErrors.push(err);
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-content-html="">
+        <head />
+        <body data-content-body="">
+          <span>hello world</span>
+        </body>
+      </html>,
+    );
+    expect(recoverableErrors).toEqual([
+      __DEV__
+        ? new Error(
+            'Switched to client rendering because the server rendering errored:\n\nBoom!',
+          )
+        : new Error(
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ),
+    ]);
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('will hoist resources and hositables from a primary tree into the <head> of a client rendered fallback', async () => {
+    let serverRendering = true;
+    function Boom() {
+      if (serverRendering) {
+        throw new Error('Boom!');
+      }
+      return null;
+    }
+
+    function App() {
+      return (
+        <>
+          <meta content="hoistable before" />
+          <link rel="stylesheet" href="hoistable before" precedence="default" />
+          <Suspense
+            fallback={
+              <html data-error-html="">
+                <head data-error-head="">
+                  {/* we have to make this a non-hoistable because we don't current emit
+                      hoistables inside fallbacks because we have no way to clean them up
+                      on hydration */}
+                  <meta itemProp="" content="error document" />
+                </head>
+                <body data-error-body="">
+                  <span>hello error</span>
+                </body>
+              </html>
+            }>
+            <html data-content-html="">
+              <body data-content-body="">
+                <Boom />
+                <span>hello world</span>
+              </body>
+            </html>
+          </Suspense>
+          <meta content="hoistable after" />
+          <link rel="stylesheet" href="hoistable after" precedence="default" />
+        </>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+        onError(e) {
+          errors.push(e);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(errors).toEqual([new Error('Boom!')]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-error-html="">
+        <head data-error-head="">
+          <link
+            rel="stylesheet"
+            href="hoistable before"
+            data-precedence="default"
+          />
+          <link
+            rel="stylesheet"
+            href="hoistable after"
+            data-precedence="default"
+          />
+          <meta content="hoistable before" />
+          <meta content="hoistable after" />
+          <meta itemprop="" content="error document" />
+        </head>
+        <body data-error-body="">
+          <span>hello error</span>
+        </body>
+      </html>,
+    );
+
+    serverRendering = false;
+
+    const recoverableErrors = [];
+    const root = ReactDOMClient.hydrateRoot(document, <App />, {
+      onRecoverableError(err) {
+        recoverableErrors.push(err);
+      },
+    });
+    await waitForAll([]);
+    expect(recoverableErrors).toEqual([
+      __DEV__
+        ? new Error(
+            'Switched to client rendering because the server rendering errored:\n\nBoom!',
+          )
+        : new Error(
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ),
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-content-html="">
+        <head>
+          <link
+            rel="stylesheet"
+            href="hoistable before"
+            data-precedence="default"
+          />
+          <link
+            rel="stylesheet"
+            href="hoistable after"
+            data-precedence="default"
+          />
+          <meta content="hoistable before" />
+          <meta content="hoistable after" />
+        </head>
+        <body data-content-body="">
+          <span>hello world</span>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="hoistable before"
+            data-precedence="default"
+          />
+          <link
+            rel="stylesheet"
+            href="hoistable after"
+            data-precedence="default"
+          />
+        </head>
+        <body />
+      </html>,
+    );
+  });
+
+  it('will attempt to render the preamble inline to allow rendering before a later abort in the same task', async () => {
+    const promise = new Promise(() => {});
+    function Pending() {
+      React.use(promise);
+    }
+
+    const controller = new AbortController();
+    function Abort() {
+      controller.abort();
+      return <Comp />;
+    }
+
+    function Comp() {
+      return null;
+    }
+
+    function App() {
+      return (
+        <html>
+          <head>
+            <meta content="here" />
+          </head>
+          <body>
+            <main>hello</main>
+            <Suspense>
+              <Pending />
+            </Suspense>
+            <Abort />
+          </body>
+        </html>
+      );
+    }
+
+    const signal = controller.signal;
+
+    let thrownError = null;
+    const errors = [];
+    try {
+      await act(() => {
+        const {pipe, abort} = renderToPipeableStream(<App />, {
+          onError(e, ei) {
+            errors.push({
+              error: e,
+              componentStack: normalizeCodeLocInfo(ei.componentStack),
+            });
+          },
+        });
+        signal.addEventListener('abort', () => abort('boom'));
+        pipe(writable);
+      });
+    } catch (e) {
+      thrownError = e;
+    }
+
+    expect(thrownError).toBe('boom');
+    // TODO there should actually be three errors. One for the pending Suspense, one for the fallback task, and one for the task
+    // that does the abort itself. At the moment abort will flush queues and if there is no pending tasks will close the request before
+    // the task which initiated the abort can even be processed. This is a bug but not one that I am fixing with the current change
+    // so I am asserting the current behavior
+    expect(errors).toEqual([
+      {
+        error: 'boom',
+        componentStack: componentStack([
+          'Pending',
+          'Suspense',
+          'body',
+          'html',
+          'App',
+        ]),
+      },
+      {
+        error: 'boom',
+        componentStack: componentStack([
+          'Suspense Fallback',
+          'body',
+          'html',
+          'App',
+        ]),
+        // }, {
+        //   error: 'boom',
+        //   componentStack: componentStack(['Abort', 'body', 'html', 'App'])
+      },
+    ]);
+
+    // We expect the render to throw before streaming anything so the default
+    // document is still loaded
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('Will wait to flush Document chunks until all boundaries which might contain a preamble are errored or resolved', async () => {
+    let rejectFirst;
+    const firstPromise = new Promise((_, reject) => {
+      rejectFirst = reject;
+    });
+    function First({children}) {
+      use(firstPromise);
+      return children;
+    }
+
+    let resolveSecond;
+    const secondPromise = new Promise(resolve => {
+      resolveSecond = resolve;
+    });
+    function Second({children}) {
+      use(secondPromise);
+      return children;
+    }
+
+    const hangingPromise = new Promise(() => {});
+    function Hanging({children}) {
+      use(hangingPromise);
+      return children;
+    }
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback={<span>loading...</span>}>
+            <Suspense fallback={<span>inner loading...</span>}>
+              <First>
+                <span>first</span>
+              </First>
+            </Suspense>
+          </Suspense>
+          <Suspense fallback={<span>loading...</span>}>
+            <main>
+              <Second>
+                <span>second</span>
+              </Second>
+            </main>
+          </Suspense>
+          <div>
+            <Suspense fallback={<span>loading...</span>}>
+              <Hanging>
+                <span>third</span>
+              </Hanging>
+            </Suspense>
+          </div>
+        </>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+        onError(e) {
+          errors.push(e);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toBe('');
+
+    await act(() => {
+      resolveSecond();
+    });
+    expect(content).toBe('');
+
+    await act(() => {
+      rejectFirst('Boom!');
+    });
+    expect(content.length).toBeGreaterThan(0);
+    expect(errors).toEqual(['Boom!']);
+
+    expect(getVisibleChildren(container)).toEqual([
+      <span>inner loading...</span>,
+      <main>
+        <span>second</span>
+      </main>,
+      <div>
+        <span>loading...</span>
+      </div>,
+    ]);
+  });
+
+  it('Can render a fallback <head> alongside a non-fallback body', async () => {
+    let serverRendering = true;
+    function Boom() {
+      if (serverRendering) {
+        throw new Error('Boom!');
+      }
+      return null;
+    }
+
+    function App() {
+      return (
+        <html>
+          <Suspense
+            fallback={
+              <head data-fallback="">
+                <meta itemProp="" content="fallback" />
+              </head>
+            }>
+            <Boom />
+            <head data-primary="">
+              <meta itemProp="" content="primary" />
+            </head>
+          </Suspense>
+          <Suspense
+            fallback={
+              <body data-fallback="">
+                <div>fallback body</div>
+              </body>
+            }>
+            <body data-primary="">
+              <div>primary body</div>
+            </body>
+          </Suspense>
+        </html>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+        onError(e) {
+          errors.push(e);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(errors).toEqual([new Error('Boom!')]);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head data-fallback="">
+          <meta itemprop="" content="fallback" />
+        </head>
+        <body data-primary="">
+          <div>primary body</div>
+        </body>
+      </html>,
+    );
+
+    serverRendering = false;
+
+    const recoverableErrors = [];
+    const root = ReactDOMClient.hydrateRoot(document, <App />, {
+      onRecoverableError(err) {
+        recoverableErrors.push(err);
+      },
+    });
+    await waitForAll([]);
+    expect(recoverableErrors).toEqual([
+      __DEV__
+        ? new Error(
+            'Switched to client rendering because the server rendering errored:\n\nBoom!',
+          )
+        : new Error(
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ),
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head data-primary="">
+          <meta itemprop="" content="primary" />
+        </head>
+        <body data-primary="">
+          <div>primary body</div>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('Can render a fallback <body> alongside a non-fallback head', async () => {
+    let serverRendering = true;
+    function Boom() {
+      if (serverRendering) {
+        throw new Error('Boom!');
+      }
+      return null;
+    }
+
+    function App() {
+      return (
+        <html>
+          <Suspense
+            fallback={
+              <head data-fallback="">
+                <meta itemProp="" content="fallback" />
+              </head>
+            }>
+            <head data-primary="">
+              <meta itemProp="" content="primary" />
+            </head>
+          </Suspense>
+          <Suspense
+            fallback={
+              <body data-fallback="">
+                <div>fallback body</div>
+              </body>
+            }>
+            <Boom />
+            <body data-primary="">
+              <div>primary body</div>
+            </body>
+          </Suspense>
+        </html>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+        onError(e) {
+          errors.push(e);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+    expect(errors).toEqual([new Error('Boom!')]);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head data-primary="">
+          <meta itemprop="" content="primary" />
+        </head>
+        <body data-fallback="">
+          <div>fallback body</div>
+        </body>
+      </html>,
+    );
+
+    serverRendering = false;
+
+    const recoverableErrors = [];
+    const root = ReactDOMClient.hydrateRoot(document, <App />, {
+      onRecoverableError(err) {
+        recoverableErrors.push(err);
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head data-primary="">
+          <meta itemprop="" content="primary" />
+        </head>
+        <body data-primary="">
+          <div>primary body</div>
+        </body>
+      </html>,
+    );
+    expect(recoverableErrors).toEqual([
+      __DEV__
+        ? new Error(
+            'Switched to client rendering because the server rendering errored:\n\nBoom!',
+          )
+        : new Error(
+            'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          ),
+    ]);
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('Can render a <head> outside of a containing <html>', async () => {
+    function App() {
+      return (
+        <>
+          <Suspense>
+            <html data-x="">
+              <body data-x="">
+                <span>hello world</span>
+              </body>
+            </html>
+          </Suspense>
+          <head data-y="">
+            <meta itemProp="" />
+          </head>
+        </>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head data-y="">
+          <meta itemprop="" />
+        </head>
+        <body data-x="">
+          <span>hello world</span>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head data-y="">
+          <meta itemprop="" />
+        </head>
+        <body data-x="">
+          <span>hello world</span>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('can render preamble tags in deeply nested indirect component trees', async () => {
+    function App() {
+      return (
+        <Html>
+          <DocumentMetadata />
+          <Main />
+        </Html>
+      );
+    }
+
+    let loadLanguage;
+    const langPromise = new Promise(r => {
+      loadLanguage = r;
+    });
+    function Html({children}) {
+      return (
+        <Suspense fallback={<FallbackHtml>{children}</FallbackHtml>}>
+          <MainHtml>{children}</MainHtml>
+        </Suspense>
+      );
+    }
+    function FallbackHtml({children}) {
+      return <html lang="default">{children}</html>;
+    }
+    function MainHtml({children}) {
+      const lang = use(langPromise);
+      return <html lang={lang}>{children}</html>;
+    }
+
+    let loadMetadata;
+    const metadataPromise = new Promise(r => {
+      loadMetadata = r;
+    });
+    function DocumentMetadata() {
+      return (
+        <Suspense fallback={<FallbackDocumentMetadata />}>
+          <MainDocumentMetadata />
+        </Suspense>
+      );
+    }
+    function FallbackDocumentMetadata() {
+      return (
+        <head data-fallback="">
+          <meta content="fallback metadata" />
+        </head>
+      );
+    }
+    function MainDocumentMetadata() {
+      const metadata = use(metadataPromise);
+      return (
+        <head data-main="">
+          {metadata.map(m => (
+            <meta content={m} key={m} />
+          ))}
+        </head>
+      );
+    }
+
+    let loadMainContent;
+    const mainContentPromise = new Promise(r => {
+      loadMainContent = r;
+    });
+    function Main() {
+      return (
+        <Suspense fallback={<Skeleton />}>
+          <PrimaryContent />
+        </Suspense>
+      );
+    }
+    function Skeleton() {
+      return (
+        <body data-fallback="">
+          <div>Skeleton UI</div>
+        </body>
+      );
+    }
+    function PrimaryContent() {
+      const content = use(mainContentPromise);
+      return (
+        <body data-main="">
+          <div>{content}</div>
+        </body>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    const errors = [];
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+        onError(e) {
+          errors.push(e);
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toBe('');
+
+    await act(() => {
+      loadLanguage('es');
+    });
+    expect(content).toBe('');
+
+    await act(() => {
+      loadMainContent('This is soooo cool!');
+    });
+    expect(content).toBe('');
+
+    await act(() => {
+      loadMetadata(['author', 'published date']);
+    });
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html lang="es">
+        <head data-main="">
+          <meta content="author" />
+          <meta content="published date" />
+        </head>
+        <body data-main="">
+          <div>This is soooo cool!</div>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html lang="es">
+        <head data-main="">
+          <meta content="author" />
+          <meta content="published date" />
+        </head>
+        <body data-main="">
+          <div>This is soooo cool!</div>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('will flush the preamble as soon as a complete preamble is available', async () => {
+    function BlockedOn({value, children}) {
+      readText(value);
+      return children;
+    }
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback="loading before...">
+            <div>
+              <AsyncText text="before" />
+            </div>
+          </Suspense>
+          <Suspense fallback="loading document...">
+            <html>
+              <body>
+                <div>
+                  <AsyncText text="body" />
+                </div>
+              </body>
+            </html>
+          </Suspense>
+          <Suspense fallback="loading head...">
+            <head>
+              <BlockedOn value="head">
+                <meta content="head" />
+              </BlockedOn>
+            </head>
+          </Suspense>
+          <Suspense fallback="loading after...">
+            <div>
+              <AsyncText text="after" />
+            </div>
+          </Suspense>
+        </>
+      );
+    }
+
+    let content = '';
+    writable.on('data', chunk => (content += chunk));
+
+    let shellReady = false;
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onShellReady() {
+          shellReady = true;
+        },
+      });
+      pipe(writable);
+    });
+
+    expect(shellReady).toBe(true);
+    expect(content).toBe('');
+
+    await act(() => {
+      resolveText('body');
+    });
+    expect(content).toBe('');
+
+    await act(() => {
+      resolveText('head');
+    });
+    expect(content).toMatch(/^<!DOCTYPE html>/);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta content="head" />
+        </head>
+        <body>
+          loading before...
+          <div>body</div>
+          loading after...
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta content="head" />
+        </head>
+        <body>
+          loading before...
+          <div>body</div>
+          loading after...
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('before');
+      resolveText('after');
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta content="head" />
+        </head>
+        <body>
+          <div>before</div>
+          <div>body</div>
+          <div>after</div>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('will clean up the head when a hydration mismatch causes a boundary to recover on the client', async () => {
+    let content = 'server';
+
+    function ServerApp() {
+      return (
+        <Suspense>
+          <html data-x={content}>
+            <head data-x={content}>
+              <meta itemProp="" content={content} />
+            </head>
+            <body data-x={content}>{content}</body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    function ClientApp() {
+      return (
+        <Suspense>
+          <html data-y={content}>
+            <head data-y={content}>
+              <meta itemProp="" name={content} />
+            </head>
+            <body data-y={content}>{content}</body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<ServerApp />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="server">
+        <head data-x="server">
+          <meta itemprop="" content="server" />
+        </head>
+        <body data-x="server">server</body>
+      </html>,
+    );
+
+    content = 'client';
+
+    const recoverableErrors = [];
+    const root = ReactDOMClient.hydrateRoot(document, <ClientApp />, {
+      onRecoverableError(err) {
+        recoverableErrors.push(err.message);
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-y="client">
+        <head data-y="client">
+          <meta itemprop="" name="client" />
+        </head>
+        <body data-y="client">client</body>
+      </html>,
+    );
+    expect(recoverableErrors).toEqual([
+      expect.stringContaining(
+        "Hydration failed because the server rendered text didn't match the client.",
+      ),
+    ]);
+
+    root.unmount();
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  it('can render styles with nonce', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+          <style
+            href="bar"
+            precedence="default"
+            nonce={CSPnonce}>{`.bar { background-color: blue; }`}</style>
+        </>,
+        {nonce: {style: CSPnonce}},
+      );
+      pipe(writable);
+    });
+    expect(document.querySelector('style').nonce).toBe(CSPnonce);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo bar"
+              nonce={
+                CSPnonce
+              }>{`.foo { color: hotpink; }.bar { background-color: blue; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it("shouldn't render styles with mismatched nonce", async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+          <style
+            href="bar"
+            precedence="default"
+            nonce={`${CSPnonce}${CSPnonce}`}>{`.bar { background-color: blue; }`}</style>
+        </>,
+        {nonce: {style: CSPnonce}},
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a style tag with `precedence` "default" and `nonce` "R4nd0mR4nd0m". When React manages style rules using `precedence` it will only include rules if the nonce matches the style nonce "R4nd0m" that was included with this render.' +
+        '\n    in style (at **)',
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo"
+              nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it("should render styles without nonce when render call doesn't receive nonce", async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce="R4nd0m">{`.foo { color: hotpink; }`}</style>
+        </>,
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a style tag with `precedence` "default" and `nonce` "R4nd0m". When React manages style rules using `precedence` it will only include a nonce attributes if you also provide the same style nonce value as a render option.' +
+        '\n    in style (at **)',
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo">{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should render styles without nonce when render call receives a string nonce dedicated to scripts', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce={CSPnonce}>{`.foo { color: hotpink; }`}</style>
+        </>,
+        {nonce: CSPnonce},
+      );
+      pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a style tag with `precedence` "default" and `nonce` "R4nd0m". When React manages style rules using `precedence` it will only include a nonce attributes if you also provide the same style nonce value as a render option.' +
+        '\n    in style (at **)',
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo">{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should allow for different script and style nonces', async () => {
+    CSPnonce = 'R4nd0m';
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <style
+            href="foo"
+            precedence="default"
+            nonce="D1ff3r3nt">{`.foo { color: hotpink; }`}</style>
+        </>,
+        {
+          nonce: {script: CSPnonce, style: 'D1ff3r3nt'},
+          bootstrapScriptContent: 'function noop(){}',
+        },
+      );
+      pipe(writable);
+    });
+    const scripts = Array.from(container.getElementsByTagName('script')).filter(
+      node => node.getAttribute('nonce') === CSPnonce,
+    );
+    expect(scripts[scripts.length - 1].textContent).toBe('function noop(){}');
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container">
+            <style
+              data-precedence="default"
+              data-href="foo"
+              nonce="D1ff3r3nt">{`.foo { color: hotpink; }`}</style>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should not error when discarding deeply nested Suspense boundaries in a parent fallback partially complete before the parent boundary resolves', async () => {
+    let resolve1;
+    const promise1 = new Promise(r => (resolve1 = r));
+    let resolve2;
+    const promise2 = new Promise(r => (resolve2 = r));
+    const promise3 = new Promise(r => {});
+
+    function Use({children, promise}) {
+      React.use(promise);
+      return children;
+    }
+    function App() {
+      return (
+        <div>
+          <Suspense
+            fallback={
+              <div>
+                <Suspense fallback="Loading...">
+                  <div>
+                    <Use promise={promise1}>
+                      <div>
+                        <Suspense fallback="Loading more...">
+                          <div>
+                            <Use promise={promise3}>
+                              <div>deep fallback</div>
+                            </Use>
+                          </div>
+                        </Suspense>
+                      </div>
+                    </Use>
+                  </div>
+                </Suspense>
+              </div>
+            }>
+            <Use promise={promise2}>Success!</Use>
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Loading...</div>
+      </div>,
+    );
+
+    await act(() => {
+      resolve1('resolved');
+      resolve2('resolved');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Success!</div>);
+  });
+
+  it('should not error when discarding deeply nested Suspense boundaries in a parent fallback partially complete before the parent boundary resolves with empty segments', async () => {
+    let resolve1;
+    const promise1 = new Promise(r => (resolve1 = r));
+    let resolve2;
+    const promise2 = new Promise(r => (resolve2 = r));
+    const promise3 = new Promise(r => {});
+
+    function Use({children, promise}) {
+      React.use(promise);
+      return children;
+    }
+    function App() {
+      return (
+        <div>
+          <Suspense
+            fallback={
+              <Suspense fallback="Loading...">
+                <Use promise={promise1}>
+                  <Suspense fallback="Loading more...">
+                    <Use promise={promise3}>
+                      <div>deep fallback</div>
+                    </Use>
+                  </Suspense>
+                </Use>
+              </Suspense>
+            }>
+            <Use promise={promise2}>Success!</Use>
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(() => {
+      resolve1('resolved');
+      resolve2('resolved');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Success!</div>);
+  });
+
+  it('should always flush the boundaries contributing the preamble regardless of their size', async () => {
+    const longDescription =
+      `I need to make this segment somewhat large because it needs to be large enought to be outlined during the initial flush. Setting the progressive chunk size to near zero isn't enough because there is a fixed minimum size that we use to avoid doing the size tracking altogether and this needs to be larger than that at least.
+
+Unfortunately that previous paragraph wasn't quite long enough so I'll continue with some more prose and maybe throw on some repeated additional strings at the end for good measure.
+
+` + 'a'.repeat(500);
+
+    const randomTag = Math.random().toString(36).slice(2, 10);
+
+    function App() {
+      return (
+        <Suspense fallback={randomTag}>
+          <html lang="en">
+            <body>
+              <main>{longDescription}</main>
+            </body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    let streamedContent = '';
+    writable.on('data', chunk => (streamedContent += chunk));
+
+    await act(() => {
+      renderToPipeableStream(<App />, {progressiveChunkSize: 100}).pipe(
+        writable,
+      );
+    });
+
+    // We don't use the DOM here b/c we execute scripts which hides whether a fallback was shown briefly
+    // Instead we assert that we never emitted the fallback of the Suspense boundary around the body.
+    expect(streamedContent).not.toContain(randomTag);
+  });
+
+  it('should track byte size of shells that may contribute to the preamble when determining if the blocking render exceeds the max size', async () => {
+    const longDescription =
+      `I need to make this segment somewhat large because it needs to be large enought to be outlined during the initial flush. Setting the progressive chunk size to near zero isn't enough because there is a fixed minimum size that we use to avoid doing the size tracking altogether and this needs to be larger than that at least.
+
+Unfortunately that previous paragraph wasn't quite long enough so I'll continue with some more prose and maybe throw on some repeated additional strings at the end for good measure.
+
+` + 'a'.repeat(500);
+
+    const randomTag = Math.random().toString(36).slice(2, 10);
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback={randomTag}>
+            <html lang="en">
+              <body>
+                <main>{longDescription}</main>
+              </body>
+            </html>
+          </Suspense>
+          <div>Outside Preamble</div>
+        </>
+      );
+    }
+
+    let streamedContent = '';
+    writable.on('data', chunk => (streamedContent += chunk));
+
+    const errors = [];
+    await act(() => {
+      renderToPipeableStream(<App />, {
+        progressiveChunkSize: 5,
+        onError(e) {
+          errors.push(e);
+        },
+      }).pipe(writable);
+    });
+
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(errors.length).toBe(1);
+      expect(errors[0].message).toContain(
+        // We set the chunk size low enough that the threshold rounds to zero kB
+        'This rendered a large document (>0 kB) without any Suspense boundaries around most of it.',
+      );
+    } else {
+      expect(errors.length).toBe(0);
+    }
+
+    // We don't use the DOM here b/c we execute scripts which hides whether a fallback was shown briefly
+    // Instead we assert that we never emitted the fallback of the Suspense boundary around the body.
+    expect(streamedContent).not.toContain(randomTag);
+  });
+
+  it('should be able to Suspend after aborting in the same component without hanging the render', async () => {
+    const controller = new AbortController();
+
+    const promise1 = new Promise(() => {});
+    function AbortAndSuspend() {
+      controller.abort('boom');
+      return React.use(promise1);
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              {/*
+                The particular code path that was problematic required the Suspend to happen in renderNode
+                rather than retryRenderTask so we render the aborting function inside a host component
+                intentionally here
+              */}
+              <div>
+                <AbortAndSuspend />
+              </div>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    const errors = [];
+    await act(async () => {
+      const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+        signal: controller.signal,
+        onError(e) {
+          errors.push(e);
+        },
+      });
+
+      result.prelude.pipe(writable);
+    });
+
+    expect(errors).toEqual(['boom']);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>loading...</body>
+      </html>,
+    );
+  });
+
+  it('not error when a suspended fallback segment directly inside another Suspense is abandoned', async () => {
+    function SuspendForever() {
+      React.use(new Promise(() => {}));
+    }
+
+    let resolve = () => {};
+    const suspendPromise = new Promise(r => {
+      resolve = r;
+    });
+    function Suspend() {
+      return React.use(suspendPromise);
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <Suspense fallback="outer">
+              <Suspense fallback={<SuspendForever />}>
+                <span>hello world</span>
+                <span>
+                  <Suspend />
+                </span>
+              </Suspense>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    await act(async () => {
+      const {pipe} = renderToPipeableStream(<App />, {
+        onError() {},
+      });
+      pipe(writable);
+    });
+
+    await act(() => {
+      resolve('!');
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <span>hello world</span>
+          <span>!</span>
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableCPUSuspense
+  it('outlines deferred Suspense boundaries', async () => {
+    function Log({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    await act(async () => {
+      renderToPipeableStream(
+        <div>
+          <Suspense defer={true} fallback={<Log text="Waiting" />}>
+            <span>{<Log text="hello" />}</span>
+          </Suspense>
+        </div>,
+      ).pipe(writable);
+      await jest.runAllTimers();
+      const temp = document.createElement('body');
+      temp.innerHTML = buffer;
+      expect(getVisibleChildren(temp)).toEqual(<div>Waiting</div>);
+    });
+
+    assertLog(['Waiting', 'hello']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>hello</span>
+      </div>,
+    );
+  });
+
+  it('useId is consistent for siblings when component suspends with nested lazy', async () => {
+    // Inner component uses useId
+    function InnerComponent() {
+      const id = React.useId();
+      Scheduler.log('InnerComponent id: ' + id);
+      return <span id={id}>inner</span>;
+    }
+
+    // Outer component uses useId and renders a lazy inner
+    function OuterComponent({innerElement}) {
+      const id = React.useId();
+      Scheduler.log('OuterComponent id: ' + id);
+      return <div id={id}>{innerElement}</div>;
+    }
+
+    // This sibling also has useId - its ID must be consistent with server
+    function Sibling() {
+      const id = React.useId();
+      Scheduler.log('Sibling id: ' + id);
+      return <span id={id}>sibling</span>;
+    }
+
+    // Create fresh lazy components for SERVER (resolve immediately)
+    const serverLazyInner = React.lazy(async () => {
+      Scheduler.log('server lazy inner initializer');
+      return {default: <InnerComponent />};
+    });
+
+    const serverLazyOuter = React.lazy(async () => {
+      Scheduler.log('server lazy outer initializer');
+      return {
+        default: <OuterComponent key="outer" innerElement={serverLazyInner} />,
+      };
+    });
+
+    // Server render with lazy (resolves immediately)
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <body>
+            <>{serverLazyOuter}</>
+            <>
+              <Sibling />
+            </>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="_R_1_">
+            <span id="_R_5_">inner</span>
+          </div>
+          <span id="_R_2_">sibling</span>
+        </body>
+      </html>,
+    );
+
+    assertLog([
+      'server lazy outer initializer',
+      'Sibling id: _R_2_',
+      'OuterComponent id: _R_1_',
+      'server lazy inner initializer',
+      'InnerComponent id: _R_5_',
+    ]);
+
+    // Create fresh lazy components for CLIENT
+    let resolveClientInner;
+    const clientLazyInner = React.lazy(async () => {
+      Scheduler.log('client lazy inner initializer');
+      return new Promise(r => {
+        resolveClientInner = () => r({default: <InnerComponent />});
+      });
+    });
+
+    let resolveClientOuter;
+    const clientLazyOuter = React.lazy(async () => {
+      Scheduler.log('client lazy outer initializer');
+      return new Promise(r => {
+        resolveClientOuter = () =>
+          r({default: <OuterComponent innerElement={clientLazyInner} />});
+      });
+    });
+
+    const hydrationErrors = [];
+
+    // Client hydrates with nested lazy components
+    let root;
+    React.startTransition(() => {
+      root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <>{clientLazyOuter}</>
+            <>
+              <Sibling />
+            </>
+          </body>
+        </html>,
+        {
+          onRecoverableError(error) {
+            hydrationErrors.push(error.message);
+          },
+        },
+      );
+    });
+
+    // First suspension on outer lazy
+    await waitFor(['client lazy outer initializer']);
+    resolveClientOuter();
+
+    // Second suspension on inner lazy
+    await waitFor([
+      'OuterComponent id: _R_1_',
+      'client lazy inner initializer',
+    ]);
+    resolveClientInner();
+
+    await waitForAll(['InnerComponent id: _R_5_', 'Sibling id: _R_2_']);
+
+    // The IDs should match the server-generated IDs
+    expect(hydrationErrors).toEqual([]);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="_R_1_">
+            <span id="_R_5_">inner</span>
+          </div>
+          <span id="_R_2_">sibling</span>
+        </body>
+      </html>,
+    );
+
+    root.unmount();
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
new file mode 100644
index 00000000000..27e74750c45
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -0,0 +1,554 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let React;
+let ReactDOMFizzServer;
+let Suspense;
+let serverAct;
+
+describe('ReactDOMFizzServerBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    patchMessageChannel();
+    serverAct = require('internal-test-utils').serverAct;
+
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server.browser');
+    Suspense = React.Suspense;
+  });
+
+  const theError = new Error('This is an error');
+  function Throw() {
+    throw theError;
+  }
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  async function readResult(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  it('should call renderToReadableStream', async () => {
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(<div>hello world</div>),
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <html>
+          <body>hello world</body>
+        </html>,
+      ),
+    );
+    const result = await readResult(stream);
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
+      );
+    } else {
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    }
+  });
+
+  it('should emit bootstrap script src at the end', async () => {
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(<div>hello world</div>, {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      }),
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+    );
+  });
+
+  it('emits all HTML as one unit if we wait until the end to start', async () => {
+    let hasLoaded = false;
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      return 'Done';
+    }
+    let isComplete = false;
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback="Loading">
+            <Wait />
+          </Suspense>
+        </div>,
+      ),
+    );
+
+    stream.allReady.then(() => (isComplete = true));
+
+    expect(isComplete).toBe(false);
+    // Resolve the loading.
+    hasLoaded = true;
+    await serverAct(() => resolve());
+
+    expect(isComplete).toBe(true);
+
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
+    );
+  });
+
+  it('should reject the promise when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await serverAct(() =>
+        ReactDOMFizzServer.renderToReadableStream(
+          <div>
+            <Throw />
+          </div>,
+          {
+            onError(x) {
+              reportedErrors.push(x);
+            },
+          },
+        ),
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await serverAct(() =>
+        ReactDOMFizzServer.renderToReadableStream(
+          <div>
+            <Suspense fallback={<Throw />}>
+              <InfiniteSuspend />
+            </Suspense>
+          </div>,
+          {
+            onError(x) {
+              reportedErrors.push(x);
+            },
+          },
+        ),
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <Throw />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(stream);
+    expect(result).toContain('Loading');
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    controller.abort();
+
+    const result = await readResult(stream);
+    expect(result).toContain('Loading');
+
+    expect(errors).toEqual(['The operation was aborted.']);
+  });
+
+  it('should reject if aborting before the shell is complete', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <InfiniteSuspend />
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  it('should be able to abort before something suspends', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    function App() {
+      controller.abort();
+      return (
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      );
+    }
+    const streamPromise = serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <App />
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    let caughtError = null;
+    try {
+      await streamPromise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError.message).toBe('The operation was aborted.');
+    expect(errors).toEqual(['The operation was aborted.']);
+  });
+
+  it('should reject if passing an already aborted signal', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    const promise = serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    // Technically we could still continue rendering the shell but currently the
+    // semantics mean that we also abort any pending CPU work.
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  it('should not continue rendering after the reader cancels', async () => {
+    let hasLoaded = false;
+    let resolve;
+    let isComplete = false;
+    let rendered = false;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      rendered = true;
+      return 'Done';
+    }
+    const errors = [];
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <Wait />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    stream.allReady.then(() => (isComplete = true));
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(false);
+
+    const reader = stream.getReader();
+    await reader.read();
+    await reader.cancel();
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+
+    hasLoaded = true;
+    await serverAct(() => resolve());
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(true);
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  it('should stream large contents that might overlow individual buffers', async () => {
+    const str492 = `(492) This string is intentionally 492 bytes long because we want to make sure we process chunks that will overflow buffer boundaries. It will repeat to fill out the bytes required (inclusive of this prompt):: foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux q :: total count (492)`;
+    const str2049 = `(2049) This string is intentionally 2049 bytes long because we want to make sure we process chunks that will overflow buffer boundaries. It will repeat to fill out the bytes required (inclusive of this prompt):: foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy thud foo bar qux quux corge grault garply waldo fred plugh xyzzy  :: total count (2049)`;
+
+    // this specific layout is somewhat contrived to exercise the landing on
+    // an exact view boundary. it's not critical to test this edge case but
+    // since we are setting up a test in general for larger chunks I contrived it
+    // as such for now. I don't think it needs to be maintained if in the future
+    // the view sizes change or become dynamic becasue of the use of byobRequest
+    let stream;
+    stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <>
+          <div>
+            <span>{''}</span>
+          </div>
+          <div>{str492}</div>
+          <div>{str492}</div>
+        </>,
+      ),
+    );
+
+    let result;
+    result = await readResult(stream);
+
+    expect(result).toMatchInlineSnapshot(
+      // TODO: remove interpolation because it prevents snapshot updates.
+      // eslint-disable-next-line jest/no-interpolation-in-snapshots
+      `"<div><span></span></div><div>${str492}</div><div>${str492}</div>"`,
+    );
+
+    // this size 2049 was chosen to be a couple base 2 orders larger than the current view
+    // size. if the size changes in the future hopefully this will still exercise
+    // a chunk that is too large for the view size.
+    stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <>
+          <div>{str2049}</div>
+        </>,
+      ),
+    );
+
+    result = await readResult(stream);
+    // TODO: remove interpolation because it prevents snapshot updates.
+    // eslint-disable-next-line jest/no-interpolation-in-snapshots
+    expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
+  });
+
+  it('supports custom abort reasons with a string', async () => {
+    const promise = new Promise(r => {});
+    function Wait() {
+      throw promise;
+    }
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <Wait />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x);
+          return 'a digest';
+        },
+      }),
+    );
+
+    controller.abort('foobar');
+
+    expect(errors).toEqual(['foobar', 'foobar']);
+  });
+
+  it('supports custom abort reasons with an Error', async () => {
+    const promise = new Promise(r => {});
+    function Wait() {
+      throw promise;
+    }
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <Wait />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+          return 'a digest';
+        },
+      }),
+    );
+
+    controller.abort(new Error('uh oh'));
+
+    expect(errors).toEqual(['uh oh', 'uh oh']);
+  });
+
+  // https://github.com/facebook/react/pull/25534/files - fix transposed escape functions
+  it('should encode title properly', async () => {
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(
+        <html>
+          <head>
+            <title>foo</title>
+          </head>
+          <body>bar</body>
+        </html>,
+      ),
+    );
+
+    const result = await readResult(stream);
+    expect(result).toEqual(
+      '<!DOCTYPE html><html><head>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render"/>'
+          : '') +
+        '<title>foo</title></head><body>bar' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body></html>',
+    );
+  });
+
+  it('should support nonce attribute for bootstrap scripts', async () => {
+    const nonce = 'R4nd0m';
+    const stream = await serverAct(() =>
+      ReactDOMFizzServer.renderToReadableStream(<div>hello world</div>, {
+        nonce,
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      }),
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      // TODO: remove interpolation because it prevents snapshot updates.
+      // eslint-disable-next-line jest/no-interpolation-in-snapshots
+      `"<link rel="preload" as="script" fetchPriority="low" nonce="R4nd0m" href="init.js"/><link rel="modulepreload" fetchPriority="low" nonce="R4nd0m" href="init.mjs"/><div>hello world</div><script nonce="${nonce}" id="_R_">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js
new file mode 100644
index 00000000000..06b3c61ce3c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
+
+let React;
+let ReactDOM;
+let ReactDOMFizzServer;
+let Suspense;
+
+describe('ReactDOMFizzServerEdge', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useRealTimers();
+    React = require('react');
+    Suspense = React.Suspense;
+    ReactDOM = require('react-dom');
+    ReactDOMFizzServer = require('react-dom/server.edge');
+  });
+
+  async function readResult(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  // https://github.com/facebook/react/issues/27540
+  it('does not try to write to the stream after it has been closed', async () => {
+    async function preloadLate() {
+      await 1;
+      await 1;
+      // need to wait a few microtasks to get the stream to close before this is called
+      ReactDOM.preconnect('foo');
+    }
+
+    function Preload() {
+      preloadLate();
+      return null;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <main>hello</main>
+            <Preload />
+          </body>
+        </html>
+      );
+    }
+    const stream = await ReactDOMFizzServer.renderToReadableStream(<App />);
+    const result = await readResult(stream);
+    // need to wait a macrotask to let the scheduled work from the preconnect to execute
+    await new Promise(resolve => {
+      setTimeout(resolve, 1);
+    });
+
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body><main>hello</main><template id="_R_"></template></body></html>"`,
+      );
+    } else {
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body><main>hello</main></body></html>"`,
+      );
+    }
+  });
+
+  it('recoverably errors and does not add rel="expect" for large shells', async () => {
+    function Paragraph() {
+      return (
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          porttitor tortor ac lectus faucibus, eget eleifend elit hendrerit.
+          Integer porttitor nisi in leo congue rutrum. Morbi sed ante posuere,
+          aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra.
+          Cras facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse
+          aliquet tempus tortor et ultricies. Aliquam libero velit, posuere
+          tempus ante sed, pellentesque tincidunt lorem. Nullam iaculis, eros a
+          varius aliquet, tortor felis tempor metus, nec cursus felis eros
+          aliquam nulla. Vivamus ut orci sed mauris congue lacinia. Cras eget
+          blandit neque. Pellentesque a massa in turpis ullamcorper volutpat vel
+          at massa. Sed ante est, auctor non diam non, vulputate ultrices metus.
+          Maecenas dictum fermentum quam id aliquam. Donec porta risus vitae
+          pretium posuere. Fusce facilisis eros in lacus tincidunt congue.
+        </p>
+      );
+    }
+
+    function App({suspense}) {
+      const paragraphs = [];
+      for (let i = 0; i < 600; i++) {
+        paragraphs.push(<Paragraph key={i} />);
+      }
+      return (
+        <html>
+          <body>
+            {suspense ? (
+              // This is ok
+              <Suspense fallback="Loading">{paragraphs}</Suspense>
+            ) : (
+              // This is not
+              paragraphs
+            )}
+          </body>
+        </html>
+      );
+    }
+    const errors = [];
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <App suspense={false} />,
+      {
+        onError(error) {
+          errors.push(error);
+        },
+      },
+    );
+    const result = await readResult(stream);
+    expect(result).not.toContain('rel="expect"');
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(errors.length).toBe(1);
+      expect(errors[0].message).toContain(
+        'This rendered a large document (>512 kB) without any Suspense boundaries around most of it.',
+      );
+    } else {
+      expect(errors.length).toBe(0);
+    }
+
+    // If we wrap in a Suspense boundary though, then it should be ok.
+    const errors2 = [];
+    const stream2 = await ReactDOMFizzServer.renderToReadableStream(
+      <App suspense={true} />,
+      {
+        onError(error) {
+          errors2.push(error);
+        },
+      },
+    );
+    const result2 = await readResult(stream2);
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(result2).toContain('rel="expect"');
+    } else {
+      expect(result2).not.toContain('rel="expect"');
+    }
+    expect(errors2.length).toBe(0);
+
+    // Or if we increase the progressiveChunkSize.
+    const errors3 = [];
+    const stream3 = await ReactDOMFizzServer.renderToReadableStream(
+      <App suspense={false} />,
+      {
+        progressiveChunkSize: 100000,
+        onError(error) {
+          errors3.push(error);
+        },
+      },
+    );
+    const result3 = await readResult(stream3);
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(result3).toContain('rel="expect"');
+    } else {
+      expect(result3).not.toContain('rel="expect"');
+    }
+    expect(errors3.length).toBe(0);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
new file mode 100644
index 00000000000..98030d43386
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -0,0 +1,703 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Stream;
+let React;
+let ReactDOMFizzServer;
+let Suspense;
+let act;
+
+describe('ReactDOMFizzServerNode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    act = require('internal-test-utils').act;
+  });
+
+  function getTestWritable() {
+    const writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    const output = {result: '', error: undefined};
+    writable.on('data', chunk => {
+      output.result += chunk;
+    });
+    writable.on('error', error => {
+      output.error = error;
+    });
+    const completed = new Promise(resolve => {
+      writable.on('finish', () => {
+        resolve();
+      });
+      writable.on('error', () => {
+        resolve();
+      });
+    });
+    return {writable, completed, output};
+  }
+
+  const theError = new Error('This is an error');
+  function Throw() {
+    throw theError;
+  }
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  async function readContentWeb(stream) {
+    const reader = stream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return content;
+      }
+      content += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  it('should call renderToPipeableStream', async () => {
+    const {writable, output} = getTestWritable();
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <div>hello world</div>,
+      );
+      pipe(writable);
+    });
+    expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  it('should support web streams', async () => {
+    const stream = await act(() =>
+      ReactDOMFizzServer.renderToReadableStream(<div>hello world</div>),
+    );
+    const result = await readContentWeb(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  it('flush fully if piping in on onShellReady', async () => {
+    const {writable, output} = getTestWritable();
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <div>hello world</div>,
+        {
+          onShellReady() {
+            pipe(writable);
+          },
+        },
+      );
+    });
+    expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const {writable, output} = getTestWritable();
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <body>hello world</body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    // with Float, we emit empty heads if they are elided when rendering <html>
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(output.result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
+      );
+    } else {
+      expect(output.result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    }
+  });
+
+  it('should emit bootstrap script src at the end', async () => {
+    const {writable, output} = getTestWritable();
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <div>hello world</div>,
+        {
+          bootstrapScriptContent: 'INIT();',
+          bootstrapScripts: ['init.js'],
+          bootstrapModules: ['init.mjs'],
+        },
+      );
+      pipe(writable);
+    });
+    expect(output.result).toMatchInlineSnapshot(
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+    );
+  });
+
+  it('should start writing after pipe', async () => {
+    const {writable, output} = getTestWritable();
+    let pipe;
+    await act(() => {
+      pipe = ReactDOMFizzServer.renderToPipeableStream(
+        <div>hello world</div>,
+      ).pipe;
+    });
+    // First we write our header.
+    output.result +=
+      '<!doctype html><html><head><title>test</title><head><body>';
+    // Then React starts writing.
+    pipe(writable);
+    expect(output.result).toMatchInlineSnapshot(
+      `"<!doctype html><html><head><title>test</title><head><body><div>hello world</div>"`,
+    );
+  });
+
+  it('emits all HTML as one unit if we wait until the end to start', async () => {
+    let hasLoaded = false;
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      return 'Done';
+    }
+    let isCompleteCalls = 0;
+    const {writable, output} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Suspense fallback="Loading">
+          <Wait />
+        </Suspense>
+      </div>,
+
+      {
+        onAllReady() {
+          isCompleteCalls++;
+        },
+      },
+    );
+    await jest.runAllTimers();
+    expect(output.result).toBe('');
+    expect(isCompleteCalls).toBe(0);
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    await jest.runAllTimers();
+
+    expect(output.result).toBe('');
+    expect(isCompleteCalls).toBe(1);
+
+    // First we write our header.
+    output.result +=
+      '<!doctype html><html><head><title>test</title><head><body>';
+    // Then React starts writing.
+    pipe(writable);
+    expect(output.result).toMatchInlineSnapshot(
+      `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
+    );
+  });
+
+  it('should error the stream when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    const reportedShellErrors = [];
+    const {writable, output, completed} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Throw />
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+        onShellError(x) {
+          reportedShellErrors.push(x);
+        },
+      },
+    );
+
+    // The stream is errored once we start writing.
+    pipe(writable);
+
+    await completed;
+
+    expect(output.error).toBe(theError);
+    expect(output.result).toBe('');
+    // This type of error is reported to the error callback too.
+    expect(reportedErrors).toEqual([theError]);
+    expect(reportedShellErrors).toEqual([theError]);
+  });
+
+  it('should error the stream when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    const reportedShellErrors = [];
+    const {writable, output, completed} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Suspense fallback={<Throw />}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+
+      {
+        onError(x) {
+          reportedErrors.push(x.message);
+        },
+        onShellError(x) {
+          reportedShellErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+
+    await completed;
+
+    expect(output.error).toBe(theError);
+    expect(output.result).toBe('');
+    expect(reportedErrors).toEqual([
+      theError.message,
+      'The destination stream errored while writing data.',
+    ]);
+    expect(reportedShellErrors).toEqual([theError]);
+  });
+
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const reportedShellErrors = [];
+    const {writable, output, completed} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Throw />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+        onShellError(x) {
+          reportedShellErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+
+    await completed;
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('Loading');
+    // While no error is reported to the stream, the error is reported to the callback.
+    expect(reportedErrors).toEqual([theError]);
+    expect(reportedShellErrors).toEqual([]);
+  });
+
+  it('should not attempt to render the fallback if the main content completes first', async () => {
+    const {writable, output, completed} = getTestWritable();
+
+    let renderedFallback = false;
+    function Fallback() {
+      renderedFallback = true;
+      return 'Loading...';
+    }
+    function Content() {
+      return 'Hi';
+    }
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <Suspense fallback={<Fallback />}>
+        <Content />
+      </Suspense>,
+    );
+    pipe(writable);
+
+    await completed;
+
+    expect(output.result).toContain('Hi');
+    expect(output.result).not.toContain('Loading');
+    expect(renderedFallback).toBe(false);
+  });
+
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    let isCompleteCalls = 0;
+    const errors = [];
+    const {writable, output, completed} = getTestWritable();
+    let abort;
+    await act(() => {
+      const pipeable = ReactDOMFizzServer.renderToPipeableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            errors.push(x.message);
+          },
+          onAllReady() {
+            isCompleteCalls++;
+          },
+        },
+      );
+      pipeable.pipe(writable);
+      abort = pipeable.abort;
+    });
+
+    expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(0);
+
+    abort(new Error('uh oh'));
+
+    await completed;
+
+    expect(errors).toEqual(['uh oh']);
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(1);
+  });
+
+  it('should fail the shell if you abort before work has begun', async () => {
+    let isCompleteCalls = 0;
+    const errors = [];
+    const shellErrors = [];
+    const {writable, output, completed} = getTestWritable();
+    const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+        onShellError(x) {
+          shellErrors.push(x.message);
+        },
+        onAllReady() {
+          isCompleteCalls++;
+        },
+      },
+    );
+    pipe(writable);
+
+    // Currently we delay work so if we abort, we abort the remaining CPU
+    // work as well.
+
+    // Abort before running the timers that perform the work
+    const theReason = new Error('uh oh');
+    abort(theReason);
+
+    jest.runAllTimers();
+
+    await completed;
+
+    expect(errors).toEqual(['uh oh']);
+    expect(shellErrors).toEqual(['uh oh']);
+    expect(output.error).toBe(theReason);
+    expect(output.result).toBe('');
+    expect(isCompleteCalls).toBe(0);
+  });
+
+  it('should be able to complete by abort when the fallback is also suspended', async () => {
+    let isCompleteCalls = 0;
+    const errors = [];
+    const {writable, output, completed} = getTestWritable();
+    let abort;
+    await act(() => {
+      const pipeable = ReactDOMFizzServer.renderToPipeableStream(
+        <div>
+          <Suspense fallback="Loading">
+            <Suspense fallback={<InfiniteSuspend />}>
+              <InfiniteSuspend />
+            </Suspense>
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            errors.push(x.message);
+          },
+          onAllReady() {
+            isCompleteCalls++;
+          },
+        },
+      );
+      pipeable.pipe(writable);
+      abort = pipeable.abort;
+    });
+
+    expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(0);
+
+    abort();
+
+    await completed;
+
+    expect(errors).toEqual([
+      // There are two boundaries that abort
+      'The render was aborted by the server without a reason.',
+      'The render was aborted by the server without a reason.',
+    ]);
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(1);
+  });
+
+  it('should be able to get context value when promise resolves', async () => {
+    class DelayClient {
+      get() {
+        if (this.resolved) return this.resolved;
+        if (this.pending) return this.pending;
+        return (this.pending = new Promise(resolve => {
+          setTimeout(() => {
+            delete this.pending;
+            this.resolved = 'OK';
+            resolve();
+          }, 500);
+        }));
+      }
+    }
+
+    const DelayContext = React.createContext(undefined);
+    const Component = () => {
+      const client = React.useContext(DelayContext);
+      if (!client) {
+        return 'context not found.';
+      }
+      const result = client.get();
+      if (typeof result === 'string') {
+        return result;
+      }
+      throw result;
+    };
+
+    const client = new DelayClient();
+    const {writable, output, completed} = getTestWritable();
+    await act(() => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        <DelayContext.Provider value={client}>
+          <div>
+            <Suspense fallback="loading">
+              <Component />
+            </Suspense>
+          </div>
+        </DelayContext.Provider>,
+      ).pipe(writable);
+    });
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('loading');
+
+    await completed;
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).not.toContain('context never found');
+    expect(output.result).toContain('OK');
+  });
+
+  it('should be able to get context value when calls renderToPipeableStream twice at the same time', async () => {
+    class DelayClient {
+      get() {
+        if (this.resolved) return this.resolved;
+        if (this.pending) return this.pending;
+        return (this.pending = new Promise(resolve => {
+          setTimeout(() => {
+            delete this.pending;
+            this.resolved = 'OK';
+            resolve();
+          }, 500);
+        }));
+      }
+    }
+    const DelayContext = React.createContext(undefined);
+    const Component = () => {
+      const client = React.useContext(DelayContext);
+      if (!client) {
+        return 'context never found';
+      }
+      const result = client.get();
+      if (typeof result === 'string') {
+        return result;
+      }
+      throw result;
+    };
+
+    const client0 = new DelayClient();
+    const {
+      writable: writable0,
+      output: output0,
+      completed: completed0,
+    } = getTestWritable();
+    const client1 = new DelayClient();
+    const {
+      writable: writable1,
+      output: output1,
+      completed: completed1,
+    } = getTestWritable();
+    await act(() => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        <DelayContext.Provider value={client0}>
+          <div>
+            <Suspense fallback="loading">
+              <Component />
+            </Suspense>
+          </div>
+        </DelayContext.Provider>,
+      ).pipe(writable0);
+      ReactDOMFizzServer.renderToPipeableStream(
+        <DelayContext.Provider value={client1}>
+          <div>
+            <Suspense fallback="loading">
+              <Component />
+            </Suspense>
+          </div>
+        </DelayContext.Provider>,
+      ).pipe(writable1);
+    });
+
+    expect(output0.error).toBe(undefined);
+    expect(output0.result).toContain('loading');
+
+    expect(output1.error).toBe(undefined);
+    expect(output1.result).toContain('loading');
+
+    await Promise.all([completed0, completed1]);
+
+    expect(output0.error).toBe(undefined);
+    expect(output0.result).not.toContain('context never found');
+    expect(output0.result).toContain('OK');
+
+    expect(output1.error).toBe(undefined);
+    expect(output1.result).not.toContain('context never found');
+    expect(output1.result).toContain('OK');
+  });
+
+  it('should be able to pop context after suspending', async () => {
+    class DelayClient {
+      get() {
+        if (this.resolved) return this.resolved;
+        if (this.pending) return this.pending;
+        return (this.pending = new Promise(resolve => {
+          setTimeout(() => {
+            delete this.pending;
+            this.resolved = 'OK';
+            resolve();
+          }, 500);
+        }));
+      }
+    }
+
+    const DelayContext = React.createContext(undefined);
+    const Component = () => {
+      const client = React.useContext(DelayContext);
+      if (!client) {
+        return 'context not found.';
+      }
+      const result = client.get();
+      if (typeof result === 'string') {
+        return result;
+      }
+      throw result;
+    };
+
+    const client = new DelayClient();
+    const {writable, output, completed} = getTestWritable();
+    await act(() => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        <div>
+          <DelayContext.Provider value={client}>
+            <Suspense fallback="loading">
+              <Component />
+            </Suspense>
+          </DelayContext.Provider>
+          <DelayContext.Provider value={client}>
+            <Suspense fallback="loading">
+              <Component />
+            </Suspense>
+          </DelayContext.Provider>
+        </div>,
+      ).pipe(writable);
+    });
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('loading');
+
+    await completed;
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).not.toContain('context never found');
+    expect(output.result).toContain('OK');
+  });
+
+  it('should not continue rendering after the writable ends unexpectedly', async () => {
+    let hasLoaded = false;
+    let resolve;
+    let isComplete = false;
+    let rendered = false;
+    const promise = new Promise(r => (resolve = r));
+    function Wait({prop}) {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      rendered = true;
+      return 'Done';
+    }
+    const errors = [];
+    const {writable, completed} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Wait />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+        onAllReady() {
+          isComplete = true;
+        },
+      },
+    );
+    pipe(writable);
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(false);
+
+    writable.end();
+
+    await jest.runAllTimers();
+
+    hasLoaded = true;
+    resolve();
+
+    await completed;
+
+    expect(errors).toEqual([
+      'The destination stream errored while writing data.',
+    ]);
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(true);
+  });
+
+  it('should encode multibyte characters correctly without nulls (#24985)', async () => {
+    const {writable, output} = getTestWritable();
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <div>{Array(700).fill('ののの')}</div>,
+      );
+      pipe(writable);
+    });
+    expect(output.result.indexOf('\u0000')).toBe(-1);
+    expect(output.result).toEqual(
+      '<div>' + Array(700).fill('ののの').join('<!-- -->') + '</div>',
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
new file mode 100644
index 00000000000..fb2f33a4bad
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -0,0 +1,658 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+let JSDOM;
+let React;
+let startTransition;
+let ReactDOMClient;
+let Scheduler;
+let clientAct;
+let ReactDOMFizzServer;
+let Stream;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let textCache;
+let assertLog;
+
+describe('ReactDOMFizzShellHydration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    clientAct = require('internal-test-utils').act;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    startTransition = React.startTransition;
+
+    textCache = new Map();
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  async function serverAct(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const fakeBody = document.createElement('body');
+    fakeBody.innerHTML = bufferedContent;
+    while (fakeBody.firstChild) {
+      const node = fakeBody.firstChild;
+      if (node.nodeName === 'SCRIPT') {
+        const script = document.createElement('script');
+        script.textContent = node.textContent;
+        fakeBody.removeChild(node);
+        container.appendChild(script);
+      } else {
+        container.appendChild(node);
+      }
+    }
+  }
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  function resetTextCache() {
+    textCache = new Map();
+  }
+
+  it('suspending in the shell during hydration', async () => {
+    const div = React.createRef(null);
+
+    function App() {
+      return (
+        <div ref={div}>
+          <AsyncText text="Shell" />
+        </div>
+      );
+    }
+
+    // Server render
+    await resolveText('Shell');
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    assertLog(['Shell']);
+    const dehydratedDiv = container.getElementsByTagName('div')[0];
+
+    // Clear the cache and start rendering on the client
+    resetTextCache();
+
+    // Hydration suspends because the data for the shell hasn't loaded yet
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    assertLog(['Suspend! [Shell]']);
+    expect(div.current).toBe(null);
+    expect(container.textContent).toBe('Shell');
+
+    // The shell loads and hydration finishes
+    await clientAct(async () => {
+      await resolveText('Shell');
+    });
+    assertLog(['Shell']);
+    expect(div.current).toBe(dehydratedDiv);
+    expect(container.textContent).toBe('Shell');
+  });
+
+  it('suspending in the shell during a normal client render', async () => {
+    // Same as previous test but during a normal client render, no hydration
+    function App() {
+      return <AsyncText text="Shell" />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await clientAct(async () => {
+      root.render(<App />);
+    });
+    assertLog(['Suspend! [Shell]']);
+
+    await clientAct(async () => {
+      await resolveText('Shell');
+    });
+    assertLog(['Shell']);
+    expect(container.textContent).toBe('Shell');
+  });
+
+  it(
+    'updating the root at lower priority than initial hydration does not ' +
+      'force a client render',
+    async () => {
+      function App() {
+        return <Text text="Initial" />;
+      }
+
+      // Server render
+      await resolveText('Initial');
+      await serverAct(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog(['Initial']);
+
+      await clientAct(async () => {
+        const root = ReactDOMClient.hydrateRoot(container, <App />);
+        // This has lower priority than the initial hydration, so the update
+        // won't be processed until after hydration finishes.
+        startTransition(() => {
+          root.render(<Text text="Updated" />);
+        });
+      });
+      assertLog(['Initial', 'Updated']);
+      expect(container.textContent).toBe('Updated');
+    },
+  );
+
+  it(
+    'updating the root at same priority as initial hydration does not ' +
+      'force a client render',
+    async () => {
+      function App() {
+        return <Text text="Initial" />;
+      }
+
+      // Server render
+      await resolveText('Initial');
+      await serverAct(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog(['Initial']);
+
+      await clientAct(async () => {
+        let root;
+        startTransition(() => {
+          root = ReactDOMClient.hydrateRoot(container, <App />);
+        });
+        // This has lower priority than the initial hydration, so the update
+        // won't be processed until after hydration finishes.
+        startTransition(() => {
+          root.render(<Text text="Updated" />);
+        });
+      });
+      assertLog(['Initial', 'Updated']);
+      expect(container.textContent).toBe('Updated');
+    },
+  );
+
+  it('updating the root while the shell is suspended forces a client render', async () => {
+    function App() {
+      return <AsyncText text="Shell" />;
+    }
+
+    // Server render
+    await resolveText('Shell');
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    assertLog(['Shell']);
+
+    // Clear the cache and start rendering on the client
+    resetTextCache();
+
+    // Hydration suspends because the data for the shell hasn't loaded yet
+    const root = await clientAct(async () => {
+      return ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.log(error.message);
+        },
+      });
+    });
+    assertLog(['Suspend! [Shell]']);
+    expect(container.textContent).toBe('Shell');
+
+    await clientAct(async () => {
+      root.render(<Text text="New screen" />);
+    });
+    assertLog([
+      'New screen',
+      'This root received an early update, before anything was able ' +
+        'hydrate. Switched the entire root to client rendering.',
+    ]);
+    expect(container.textContent).toBe('New screen');
+  });
+
+  it('TODO: A large component stack causes SSR to stack overflow', async () => {
+    spyOnDevAndProd(console, 'error').mockImplementation(() => {});
+
+    function NestedComponent({depth}: {depth: number}) {
+      if (depth <= 0) {
+        return <AsyncText text="Shell" />;
+      }
+      return <NestedComponent depth={depth - 1} />;
+    }
+
+    // Server render
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        <NestedComponent depth={3000} />,
+      );
+    });
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.mock.calls[0][0].toString()).toBe(
+      'RangeError: Maximum call stack size exceeded',
+    );
+  });
+
+  it('client renders when an error is thrown in an error boundary', async () => {
+    function Throws() {
+      throw new Error('plain error');
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <div>Caught an error: {this.state.error.message}</div>;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <Throws />
+        </ErrorBoundary>
+      );
+    }
+
+    // Server render
+    let shellError;
+    try {
+      await serverAct(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError(error) {
+            Scheduler.log('onError: ' + error.message);
+          },
+        });
+        pipe(writable);
+      });
+    } catch (x) {
+      shellError = x;
+    }
+    expect(shellError).toEqual(
+      expect.objectContaining({message: 'plain error'}),
+    );
+    assertLog(['onError: plain error']);
+
+    function ErroredApp() {
+      return <span>loading</span>;
+    }
+
+    // Reset test environment
+    buffer = '';
+    hasErrored = false;
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+
+    // The Server errored at the shell. The recommended approach is to render a
+    // fallback loading state, which can then be hydrated with a mismatch.
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<ErroredApp />);
+      pipe(writable);
+    });
+
+    expect(container.innerHTML).toBe('<span>loading</span>');
+
+    // Hydration suspends because the data for the shell hasn't loaded yet
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onCaughtError(error) {
+          Scheduler.log('onCaughtError: ' + error.message);
+        },
+        onUncaughtError(error) {
+          Scheduler.log('onUncaughtError: ' + error.message);
+        },
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + error.message);
+          if (error.cause) {
+            Scheduler.log('Cause: ' + error.cause.message);
+          }
+        },
+      });
+    });
+
+    assertLog(['onCaughtError: plain error']);
+    expect(container.textContent).toBe('Caught an error: plain error');
+  });
+
+  it('client renders when a client error is thrown in an error boundary', async () => {
+    let isClient = false;
+
+    function Throws() {
+      if (isClient) {
+        throw new Error('plain error');
+      }
+      return <div>Hello world</div>;
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <div>Caught an error: {this.state.error.message}</div>;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <Throws />
+        </ErrorBoundary>
+      );
+    }
+
+    // Server render
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        onError(error) {
+          Scheduler.log('onError: ' + error.message);
+        },
+      });
+      pipe(writable);
+    });
+    assertLog([]);
+
+    expect(container.innerHTML).toBe('<div>Hello world</div>');
+
+    isClient = true;
+
+    // Hydration suspends because the data for the shell hasn't loaded yet
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onCaughtError(error) {
+          Scheduler.log('onCaughtError: ' + error.message);
+        },
+        onUncaughtError(error) {
+          Scheduler.log('onUncaughtError: ' + error.message);
+        },
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + error.message);
+          if (error.cause) {
+            Scheduler.log('Cause: ' + error.cause.message);
+          }
+        },
+      });
+    });
+
+    assertLog(['onCaughtError: plain error']);
+    expect(container.textContent).toBe('Caught an error: plain error');
+  });
+
+  it('client renders when a hydration pass error is thrown in an error boundary', async () => {
+    let isClient = false;
+    let isFirst = true;
+
+    function Throws() {
+      if (isClient && isFirst) {
+        isFirst = false; // simulate a hydration or concurrent error
+        throw new Error('plain error');
+      }
+      return <div>Hello world</div>;
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <div>Caught an error: {this.state.error.message}</div>;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <Throws />
+        </ErrorBoundary>
+      );
+    }
+
+    // Server render
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        onError(error) {
+          Scheduler.log('onError: ' + error.message);
+        },
+      });
+      pipe(writable);
+    });
+    assertLog([]);
+
+    expect(container.innerHTML).toBe('<div>Hello world</div>');
+
+    isClient = true;
+
+    // Hydration suspends because the data for the shell hasn't loaded yet
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onCaughtError(error) {
+          Scheduler.log('onCaughtError: ' + error.message);
+        },
+        onUncaughtError(error) {
+          Scheduler.log('onUncaughtError: ' + error.message);
+        },
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + error.message);
+          if (error.cause) {
+            Scheduler.log('Cause: ' + error.cause.message);
+          }
+        },
+      });
+    });
+
+    assertLog([
+      'onRecoverableError: There was an error while hydrating but React was able to recover by instead client rendering the entire root.',
+      'Cause: plain error',
+    ]);
+    expect(container.textContent).toBe('Hello world');
+  });
+
+  it(
+    'handles suspending while recovering from a hydration error (in the ' +
+      'shell, no Suspense boundary)',
+    async () => {
+      const useSyncExternalStore = React.useSyncExternalStore;
+
+      let isClient = false;
+
+      let resolve;
+      const clientPromise = new Promise(res => {
+        resolve = res;
+      });
+
+      function App() {
+        const state = useSyncExternalStore(
+          function subscribe() {
+            return () => {};
+          },
+          function getSnapshot() {
+            return 'Client';
+          },
+          function getServerSnapshot() {
+            const isHydrating = isClient;
+            if (isHydrating) {
+              // This triggers an error during hydration
+              throw new Error('Oops!');
+            }
+            return 'Server';
+          },
+        );
+
+        if (state === 'Client') {
+          return React.use(clientPromise);
+        }
+
+        return state;
+      }
+
+      // Server render
+      await serverAct(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      assertLog([]);
+
+      expect(container.innerHTML).toBe('Server');
+
+      // During hydration, an error is thrown. React attempts to recover by
+      // switching to client render
+      isClient = true;
+      await clientAct(async () => {
+        ReactDOMClient.hydrateRoot(container, <App />, {
+          onRecoverableError(error) {
+            Scheduler.log('onRecoverableError: ' + error.message);
+            if (error.cause) {
+              Scheduler.log('Cause: ' + error.cause.message);
+            }
+          },
+        });
+      });
+      expect(container.innerHTML).toBe('Server'); // Still suspended
+      assertLog([]);
+
+      await clientAct(async () => {
+        resolve('Client');
+      });
+      assertLog([
+        'onRecoverableError: There was an error while hydrating but React was ' +
+          'able to recover by instead client rendering the entire root.',
+        'Cause: Oops!',
+      ]);
+      expect(container.innerHTML).toBe('Client');
+    },
+  );
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
new file mode 100644
index 00000000000..4542ca618ba
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
@@ -0,0 +1,416 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let JSDOM;
+let Stream;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMFizzStatic;
+let Suspense;
+let textCache;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+
+describe('ReactDOMFizzStatic', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzStatic = require('react-dom/static');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+
+    textCache = new Map();
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  async function act(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const fakeBody = document.createElement('body');
+    fakeBody.innerHTML = bufferedContent;
+    while (fakeBody.firstChild) {
+      const node = fakeBody.firstChild;
+      if (node.nodeName === 'SCRIPT') {
+        const script = document.createElement('script');
+        script.textContent = node.textContent;
+        for (let i = 0; i < node.attributes.length; i++) {
+          const attribute = node.attributes[i];
+          script.setAttribute(attribute.name, attribute.value);
+        }
+        fakeBody.removeChild(node);
+        container.appendChild(script);
+      } else {
+        container.appendChild(node);
+      }
+    }
+  }
+
+  function getVisibleChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          (node.tagName !== 'SCRIPT' || node.hasAttribute('type')) &&
+          node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
+          !node.hasAttribute('hidden') &&
+          !node.hasAttribute('aria-hidden') &&
+          // Ignore the render blocking expect
+          (node.getAttribute('rel') !== 'expect' ||
+            node.getAttribute('blocking') !== 'render')
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  /*
+  function rejectText(text, error) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'rejected',
+        value: error,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'rejected';
+      record.value = error;
+      thenable.pings.forEach(t => t());
+    }
+  }
+  */
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    return text;
+  }
+
+  function AsyncText({text}) {
+    return readText(text);
+  }
+
+  it('should render a fully static document, send it and then hydrate it', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Hello" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(<App />);
+
+    resolveText('Hello');
+
+    const result = await promise;
+
+    expect(result.postponed).toBe(
+      gate(flags => flags.enableHalt) ? null : undefined,
+    );
+
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  it('should support importMap option', async () => {
+    const importMap = {
+      foo: 'path/to/foo.js',
+    };
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+      {importMap},
+    );
+
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual([
+      <script type="importmap">{JSON.stringify(importMap)}</script>,
+      'hello world',
+    ]);
+  });
+
+  it('supports onHeaders', async () => {
+    let headers;
+    function onHeaders(x) {
+      headers = x;
+    }
+
+    function App() {
+      ReactDOM.preload('image', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preload('font', {as: 'font'});
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+      onHeaders,
+    });
+    expect(headers).toEqual({
+      Link: `
+<font>; rel=preload; as="font"; crossorigin="",
+ <image>; rel=preload; as="image"; fetchpriority="high"
+`
+        .replaceAll('\n', '')
+        .trim(),
+    });
+
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual('hello');
+  });
+
+  it('will prerender Suspense fallbacks before children', async () => {
+    const values = [];
+    function Indirection({children}) {
+      values.push(children);
+      return children;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense
+            fallback={
+              <div>
+                <Indirection>outer loading...</Indirection>
+              </div>
+            }>
+            <Suspense
+              fallback={
+                <div>
+                  <Indirection>first inner loading...</Indirection>
+                </div>
+              }>
+              <div>
+                <Indirection>hello world</Indirection>
+              </div>
+            </Suspense>
+            <Suspense
+              fallback={
+                <div>
+                  <Indirection>second inner loading...</Indirection>
+                </div>
+              }>
+              <div>
+                <Indirection>goodbye world</Indirection>
+              </div>
+            </Suspense>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />);
+
+    expect(values).toEqual([
+      'outer loading...',
+      'first inner loading...',
+      'second inner loading...',
+      'hello world',
+      'goodbye world',
+    ]);
+
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>hello world</div>
+        <div>goodbye world</div>
+      </div>,
+    );
+  });
+
+  // @gate enableHalt
+  it('will halt a prerender when aborting with an error during a render', async () => {
+    const controller = new AbortController();
+    function App() {
+      controller.abort('sync');
+      return <div>hello world</div>;
+    }
+
+    const errors = [];
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+      signal: controller.signal,
+      onError(error) {
+        errors.push(error);
+      },
+    });
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(errors).toEqual(['sync']);
+    expect(getVisibleChildren(container)).toEqual(undefined);
+  });
+
+  // @gate enableHalt
+  it('will halt a prerender when aborting with an error in a microtask', async () => {
+    const errors = [];
+
+    const controller = new AbortController();
+    function App() {
+      React.use(
+        new Promise(() => {
+          Promise.resolve().then(() => {
+            controller.abort('async');
+          });
+        }),
+      );
+      return <div>hello world</div>;
+    }
+
+    errors.length = 0;
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+      signal: controller.signal,
+      onError(error) {
+        errors.push(error);
+      },
+    });
+    await act(async () => {
+      result.prelude.pipe(writable);
+    });
+    expect(errors).toEqual(['async']);
+    expect(getVisibleChildren(container)).toEqual(undefined);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
new file mode 100644
index 00000000000..334bb2ddce7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
@@ -0,0 +1,1174 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+import {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+import {
+  getVisibleChildren,
+  insertNodesAndExecuteScripts,
+} from '../test-utils/FizzTestUtils';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let JSDOM;
+let React;
+let ReactDOMFizzServer;
+let ReactDOMFizzStatic;
+let Suspense;
+let SuspenseList;
+let container;
+let serverAct;
+
+describe('ReactDOMFizzStaticBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+
+    // We need the mocked version of setTimeout inside the document.
+    window.setTimeout = setTimeout;
+    window.requestAnimationFrame = setTimeout;
+
+    patchMessageChannel();
+    serverAct = require('internal-test-utils').serverAct;
+
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server.browser');
+    ReactDOMFizzStatic = require('react-dom/static.browser');
+    Suspense = React.Suspense;
+    SuspenseList = React.unstable_SuspenseList;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    if (typeof global.window.__restoreGlobalScope === 'function') {
+      global.window.__restoreGlobalScope();
+    }
+    document.body.removeChild(container);
+  });
+
+  const theError = new Error('This is an error');
+  function Throw() {
+    throw theError;
+  }
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  async function readContent(stream) {
+    const reader = stream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return content;
+      }
+      content += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    await insertNodesAndExecuteScripts(temp, container, null);
+    jest.runAllTimers();
+  }
+
+  async function readIntoNewDocument(stream) {
+    const content = await readContent(stream);
+    const jsdom = new JSDOM(
+      // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+      '<script>window.requestAnimationFrame = setTimeout;</script>' + content,
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    const originalWindow = global.window;
+    const originalDocument = global.document;
+    const originalNavigator = global.navigator;
+    const originalNode = global.Node;
+    const originalAddEventListener = global.addEventListener;
+    const originalMutationObserver = global.MutationObserver;
+    global.window = jsdom.window;
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    global.Node = global.window.Node;
+    global.addEventListener = global.window.addEventListener;
+    global.MutationObserver = global.window.MutationObserver;
+    global.window.__restoreGlobalScope = () => {
+      global.window = originalWindow;
+      global.document = originalDocument;
+      global.navigator = originalNavigator;
+      global.Node = originalNode;
+      global.addEventListener = originalAddEventListener;
+      global.MutationObserver = originalMutationObserver;
+    };
+  }
+
+  async function readIntoCurrentDocument(stream) {
+    const content = await readContent(stream);
+    const temp = document.createElement('div');
+    temp.innerHTML = content;
+    await insertNodesAndExecuteScripts(temp, document.body, null);
+    jest.runAllTimers();
+  }
+
+  it('should call prerender', async () => {
+    const result = await serverAct(() =>
+      ReactDOMFizzStatic.prerender(<div>hello world</div>),
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const result = await serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <html>
+          <body>hello world</body>
+        </html>,
+      ),
+    );
+    const prelude = await readContent(result.prelude);
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
+      );
+    } else {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    }
+  });
+
+  it('should emit bootstrap script src at the end', async () => {
+    const result = await serverAct(() =>
+      ReactDOMFizzStatic.prerender(<div>hello world</div>, {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      }),
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+    );
+  });
+
+  it('emits all HTML as one unit', async () => {
+    let hasLoaded = false;
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      return 'Done';
+    }
+    const resultPromise = serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <Suspense fallback="Loading">
+            <Wait />
+          </Suspense>
+        </div>,
+      ),
+    );
+
+    await jest.runAllTimers();
+
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    const result = await resultPromise;
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div><!--$-->Done<!--/$--></div>"`);
+  });
+
+  it('should reject the promise when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await serverAct(() =>
+        ReactDOMFizzStatic.prerender(
+          <div>
+            <Throw />
+          </div>,
+          {
+            onError(x) {
+              reportedErrors.push(x);
+            },
+          },
+        ),
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await serverAct(() =>
+        ReactDOMFizzStatic.prerender(
+          <div>
+            <Suspense fallback={<Throw />}>
+              <InfiniteSuspend />
+            </Suspense>
+          </div>,
+          {
+            onError(x) {
+              reportedErrors.push(x);
+            },
+          },
+        ),
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const result = await serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <Throw />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      ),
+    );
+
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toContain('Loading');
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    let resultPromise;
+    await serverAct(() => {
+      resultPromise = ReactDOMFizzStatic.prerender(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      );
+    });
+
+    controller.abort();
+
+    const result = await resultPromise;
+
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toContain('Loading');
+
+    expect(errors).toEqual(['This operation was aborted']);
+  });
+
+  // @gate !enableHalt
+  it('should reject if aborting before the shell is complete and enableHalt is disabled', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <InfiniteSuspend />
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  // @gate enableHalt
+  it('should resolve an empty prelude if aborting before the shell is complete', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <InfiniteSuspend />
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    let rejected = false;
+    let prelude;
+    try {
+      ({prelude} = await promise);
+    } catch (error) {
+      rejected = true;
+    }
+    expect(rejected).toBe(false);
+    expect(errors).toEqual(['aborted for reasons']);
+    const content = await readContent(prelude);
+    expect(content).toBe('');
+  });
+
+  it('should be able to abort before something suspends', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    function App() {
+      controller.abort();
+      return (
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      );
+    }
+    const streamPromise = serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <App />
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    if (gate(flags => flags.enableHalt)) {
+      const {prelude} = await streamPromise;
+      const content = await readContent(prelude);
+      expect(errors).toEqual(['This operation was aborted']);
+      expect(content).toBe('');
+    } else {
+      let caughtError = null;
+      try {
+        await streamPromise;
+      } catch (error) {
+        caughtError = error;
+      }
+      expect(caughtError.message).toBe('This operation was aborted');
+      expect(errors).toEqual(['This operation was aborted']);
+    }
+  });
+
+  // @gate !enableHalt
+  it('should reject if passing an already aborted signal and enableHalt is disabled', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    const promise = serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    // Technically we could still continue rendering the shell but currently the
+    // semantics mean that we also abort any pending CPU work.
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  // @gate enableHalt
+  it('should resolve an empty prelude if passing an already aborted signal', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    const promise = serverAct(() =>
+      ReactDOMFizzStatic.prerender(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          signal: controller.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    // Technically we could still continue rendering the shell but currently the
+    // semantics mean that we also abort any pending CPU work.
+    let didThrow = false;
+    let prelude;
+    try {
+      ({prelude} = await promise);
+    } catch (error) {
+      didThrow = true;
+    }
+    expect(didThrow).toBe(false);
+    expect(errors).toEqual(['aborted for reasons']);
+    const content = await readContent(prelude);
+    expect(content).toBe('');
+  });
+
+  it('supports custom abort reasons with a string', async () => {
+    const promise = new Promise(r => {});
+    function Wait() {
+      throw promise;
+    }
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <Wait />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    let resultPromise;
+    await serverAct(() => {
+      resultPromise = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x);
+          return 'a digest';
+        },
+      });
+    });
+
+    controller.abort('foobar');
+
+    await resultPromise;
+
+    expect(errors).toEqual(['foobar', 'foobar']);
+  });
+
+  it('supports custom abort reasons with an Error', async () => {
+    const promise = new Promise(r => {});
+    function Wait() {
+      throw promise;
+    }
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <Wait />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    let resultPromise;
+    await serverAct(() => {
+      resultPromise = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+          return 'a digest';
+        },
+      });
+    });
+
+    controller.abort(new Error('uh oh'));
+
+    await resultPromise;
+
+    expect(errors).toEqual(['uh oh', 'uh oh']);
+  });
+
+  it('logs an error if onHeaders throws but continues the prerender', async () => {
+    const errors = [];
+    function onError(error) {
+      errors.push(error.message);
+    }
+
+    function onHeaders(x) {
+      throw new Error('bad onHeaders');
+    }
+
+    const prerendered = await serverAct(() =>
+      ReactDOMFizzStatic.prerender(<div>hello</div>, {
+        onHeaders,
+        onError,
+      }),
+    );
+    expect(prerendered.postponed).toBe(
+      gate(flags => flags.enableHalt) ? null : undefined,
+    );
+    expect(errors).toEqual(['bad onHeaders']);
+
+    await readIntoContainer(prerendered.prelude);
+    expect(getVisibleChildren(container)).toEqual(<div>hello</div>);
+  });
+
+  // @gate enableHalt
+  it('can resume render of a prerender', async () => {
+    const errors = [];
+
+    let resolveA;
+    const promiseA = new Promise(r => (resolveA = r));
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+
+    async function ComponentA() {
+      await promiseA;
+      return (
+        <Suspense fallback="Loading B">
+          <ComponentB />
+        </Suspense>
+      );
+    }
+
+    async function ComponentB() {
+      await promiseB;
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading A">
+            <ComponentA />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const controller = new AbortController();
+    let pendingResult;
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      });
+    });
+
+    controller.abort();
+    const prerendered = await pendingResult;
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    await readIntoContainer(prerendered.prelude);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading A</div>);
+
+    await resolveA();
+
+    expect(prerendered.postponed).not.toBe(null);
+
+    const controller2 = new AbortController();
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.resumeAndPrerender(
+        <App />,
+        JSON.parse(postponedState),
+        {
+          signal: controller2.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      );
+    });
+
+    controller2.abort();
+
+    const prerendered2 = await pendingResult;
+    const postponedState2 = JSON.stringify(prerendered2.postponed);
+
+    await readIntoContainer(prerendered2.prelude);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading B</div>);
+
+    await resolveB();
+
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState2)),
+    );
+
+    await readIntoContainer(dynamic);
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  // @gate enableHalt
+  it('can prerender a preamble', async () => {
+    const errors = [];
+
+    let resolveA;
+    const promiseA = new Promise(r => (resolveA = r));
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+
+    async function ComponentA() {
+      await promiseA;
+      return (
+        <Suspense fallback="Loading B">
+          <ComponentB />
+        </Suspense>
+      );
+    }
+
+    async function ComponentB() {
+      await promiseB;
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <Suspense>
+          <html data-x="">
+            <body data-x="">
+              <Suspense fallback="Loading A">
+                <ComponentA />
+              </Suspense>
+            </body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    const controller = new AbortController();
+    let pendingResult;
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      });
+    });
+
+    controller.abort();
+
+    const prerendered = await pendingResult;
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    await readIntoNewDocument(prerendered.prelude);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head />
+        <body data-x="">Loading A</body>
+      </html>,
+    );
+
+    await resolveA();
+
+    expect(prerendered.postponed).not.toBe(null);
+
+    const controller2 = new AbortController();
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.resumeAndPrerender(
+        <App />,
+        JSON.parse(postponedState),
+        {
+          signal: controller2.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      );
+    });
+
+    controller2.abort();
+
+    const prerendered2 = await pendingResult;
+    const postponedState2 = JSON.stringify(prerendered2.postponed);
+
+    await readIntoCurrentDocument(prerendered2.prelude);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head />
+        <body data-x="">Loading B</body>
+      </html>,
+    );
+
+    await resolveB();
+
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState2)),
+    );
+
+    await readIntoCurrentDocument(dynamic);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head />
+        <body data-x="">Hello</body>
+      </html>,
+    );
+  });
+
+  it('can suspend inside <head> tag', async () => {
+    const promise = new Promise(() => {});
+
+    function App() {
+      return (
+        <html>
+          <head>
+            <Suspense fallback={<meta itemProp="" content="fallback" />}>
+              <Metadata />
+            </Suspense>
+          </head>
+          <body>
+            <div>hello</div>
+          </body>
+        </html>
+      );
+    }
+
+    function Metadata() {
+      React.use(promise);
+      return <meta itemProp="" content="primary" />;
+    }
+
+    const controller = new AbortController();
+    let pendingResult;
+    const errors = [];
+    await serverAct(() => {
+      pendingResult = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError: e => {
+          errors.push(e.message);
+        },
+      });
+    });
+
+    controller.abort(new Error('boom'));
+
+    const prerendered = await pendingResult;
+
+    await readIntoNewDocument(prerendered.prelude);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta itemprop="" content="fallback" />
+        </head>
+        <body>
+          <div>hello</div>
+        </body>
+      </html>,
+    );
+
+    expect(errors).toEqual(['boom']);
+  });
+
+  // @gate enableHalt
+  it('will render fallback Document when erroring a boundary above the body', async () => {
+    let isPrerendering = true;
+    const promise = new Promise(() => {});
+
+    function Boom() {
+      if (isPrerendering) {
+        React.use(promise);
+      }
+      throw new Error('Boom!');
+    }
+
+    function App() {
+      return (
+        <Suspense
+          fallback={
+            <html data-error-html="">
+              <body data-error-body="">
+                <span>hello error</span>
+              </body>
+            </html>
+          }>
+          <html data-content-html="">
+            <body data-content-body="">
+              <Boom />
+              <span>hello world</span>
+            </body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    const controller = new AbortController();
+    let pendingResult;
+    const errors = [];
+    await serverAct(() => {
+      pendingResult = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError: e => {
+          errors.push(e.message);
+        },
+      });
+    });
+
+    controller.abort();
+
+    const prerendered = await pendingResult;
+
+    expect(errors).toEqual(['This operation was aborted']);
+    const content = await readContent(prerendered.prelude);
+    expect(content).toBe('');
+
+    isPrerendering = false;
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    const resumeErrors = [];
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState), {
+        onError: e => {
+          resumeErrors.push(e.message);
+        },
+      }),
+    );
+
+    expect(resumeErrors).toEqual(['Boom!']);
+    await readIntoNewDocument(dynamic);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-error-html="">
+        <head />
+        <body data-error-body="">
+          <span>hello error</span>
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableHalt
+  it('can omit a preamble with an empty shell if no preamble is ready when prerendering finishes', async () => {
+    const errors = [];
+
+    let resolveA;
+    const promiseA = new Promise(r => (resolveA = r));
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+
+    async function ComponentA() {
+      await promiseA;
+      return (
+        <Suspense fallback="Loading B">
+          <ComponentB />
+        </Suspense>
+      );
+    }
+
+    async function ComponentB() {
+      await promiseB;
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <Suspense>
+          <html data-x="">
+            <body data-x="">
+              <ComponentA />
+            </body>
+          </html>
+        </Suspense>
+      );
+    }
+
+    const controller = new AbortController();
+    let pendingResult;
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      });
+    });
+
+    controller.abort();
+
+    const prerendered = await pendingResult;
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    const content = await readContent(prerendered.prelude);
+    expect(content).toBe('');
+
+    await resolveA();
+
+    expect(prerendered.postponed).not.toBe(null);
+
+    const controller2 = new AbortController();
+    await serverAct(async () => {
+      pendingResult = ReactDOMFizzStatic.resumeAndPrerender(
+        <App />,
+        JSON.parse(postponedState),
+        {
+          signal: controller2.signal,
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      );
+    });
+
+    controller2.abort();
+
+    const prerendered2 = await pendingResult;
+    const postponedState2 = JSON.stringify(prerendered2.postponed);
+
+    await readIntoNewDocument(prerendered2.prelude);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head />
+        <body data-x="">Loading B</body>
+      </html>,
+    );
+
+    await resolveB();
+
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState2)),
+    );
+
+    await readIntoCurrentDocument(dynamic);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-x="">
+        <head />
+        <body data-x="">Hello</body>
+      </html>,
+    );
+  });
+
+  // @gate enableHalt && enableSuspenseList
+  it('can resume a partially prerendered SuspenseList', async () => {
+    const errors = [];
+
+    let resolveA;
+    const promiseA = new Promise(r => (resolveA = r));
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+
+    async function ComponentA() {
+      await promiseA;
+      return 'A';
+    }
+
+    async function ComponentB() {
+      await promiseB;
+      return 'B';
+    }
+
+    function App() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <Suspense fallback="Loading A">
+              <ComponentA />
+            </Suspense>
+            <Suspense fallback="Loading B">
+              <ComponentB />
+            </Suspense>
+            <Suspense fallback="Loading C">C</Suspense>
+            <Suspense fallback="Loading D">D</Suspense>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    const controller = new AbortController();
+    const pendingResult = serverAct(() =>
+      ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      }),
+    );
+
+    await serverAct(() => {
+      controller.abort();
+    });
+
+    const prerendered = await pendingResult;
+
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    await readIntoContainer(prerendered.prelude);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'Loading A'}
+        {'Loading B'}
+        {'Loading C'}
+        {'Loading D'}
+      </div>,
+    );
+
+    expect(prerendered.postponed).not.toBe(null);
+
+    await resolveA();
+    await resolveB();
+
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState)),
+    );
+
+    await readIntoContainer(dynamic);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        {'A'}
+        {'B'}
+        {'C'}
+        {'D'}
+      </div>,
+    );
+  });
+
+  // @gate enableHalt && enableOptimisticKey
+  it('can resume an optimistic keyed slot', async () => {
+    const errors = [];
+
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    async function Component() {
+      await promise;
+      return 'Hi';
+    }
+
+    if (React.optimisticKey === undefined) {
+      throw new Error('optimisticKey missing');
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading">
+            <Component key={React.optimisticKey} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const controller = new AbortController();
+    const pendingResult = serverAct(() =>
+      ReactDOMFizzStatic.prerender(<App />, {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      }),
+    );
+
+    await serverAct(() => {
+      controller.abort();
+    });
+
+    const prerendered = await pendingResult;
+
+    const postponedState = JSON.stringify(prerendered.postponed);
+
+    await readIntoContainer(prerendered.prelude);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading</div>);
+
+    expect(prerendered.postponed).not.toBe(null);
+
+    await resolve();
+
+    const dynamic = await serverAct(() =>
+      ReactDOMFizzServer.resume(<App />, JSON.parse(postponedState)),
+    );
+
+    await readIntoContainer(dynamic);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hi</div>);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
new file mode 100644
index 00000000000..cf98658f932
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
@@ -0,0 +1,498 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMFizzStatic;
+let Suspense;
+
+describe('ReactDOMFizzStaticNode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMFizzStatic = require('react-dom/static');
+    Suspense = React.Suspense;
+  });
+
+  const theError = new Error('This is an error');
+  function Throw() {
+    throw theError;
+  }
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  function readContent(readable) {
+    return new Promise((resolve, reject) => {
+      let content = '';
+      readable.on('data', chunk => {
+        content += Buffer.from(chunk).toString('utf8');
+      });
+      readable.on('error', error => {
+        reject(error);
+      });
+      readable.on('end', () => resolve(content));
+    });
+  }
+
+  async function readContentWeb(stream) {
+    const reader = stream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return content;
+      }
+      content += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  // @gate enableHalt
+  it('should call prerenderToNodeStream', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>hello world</div>,
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  // @gate enableHalt
+  it('should suppport web streams', async () => {
+    const result = await ReactDOMFizzStatic.prerender(<div>hello world</div>);
+    const prelude = await readContentWeb(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  // @gate enableHalt
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+    );
+    const prelude = await readContent(result.prelude);
+    if (gate(flags => flags.enableFizzBlockingRender)) {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
+      );
+    } else {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    }
+  });
+
+  // @gate enableHalt
+  it('should emit bootstrap script src at the end', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+    );
+  });
+
+  // @gate enableHalt
+  it('emits all HTML as one unit', async () => {
+    let hasLoaded = false;
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      return 'Done';
+    }
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <Suspense fallback="Loading">
+          <Wait />
+        </Suspense>
+      </div>,
+    );
+
+    await jest.runAllTimers();
+
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    const result = await resultPromise;
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div><!--$-->Done<!--/$--></div>"`);
+  });
+
+  // @gate enableHalt
+  it('should reject the promise when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzStatic.prerenderToNodeStream(
+        <div>
+          <Throw />
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  // @gate enableHalt
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzStatic.prerenderToNodeStream(
+        <div>
+          <Suspense fallback={<Throw />}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  // @gate enableHalt
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const result = await ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Throw />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toContain('Loading');
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  // @gate enableHalt
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    await jest.runAllTimers();
+
+    controller.abort();
+
+    const result = await resultPromise;
+
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toContain('Loading');
+
+    expect(errors).toEqual(['This operation was aborted']);
+  });
+
+  // @gate enableHalt
+  // @gate !enableHalt
+  it('should reject if aborting before the shell is complete and enableHalt is disabled', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  // @gate enableHalt
+  it('should resolve an empty shell if aborting before the shell is complete', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    let didThrow = false;
+    let prelude;
+    try {
+      ({prelude} = await promise);
+    } catch (error) {
+      didThrow = true;
+    }
+    expect(didThrow).toBe(false);
+    expect(errors).toEqual(['aborted for reasons']);
+    const content = await readContent(prelude);
+    expect(content).toBe('');
+  });
+
+  // @gate enableHalt
+  it('should be able to abort before something suspends', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    function App() {
+      controller.abort();
+      return (
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      );
+    }
+    const streamPromise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <App />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    if (gate(flags => flags.enableHalt)) {
+      const {prelude} = await streamPromise;
+      const content = await readContent(prelude);
+      expect(errors).toEqual(['This operation was aborted']);
+      expect(content).toBe('');
+    } else {
+      let caughtError = null;
+      try {
+        await streamPromise;
+      } catch (error) {
+        caughtError = error;
+      }
+      expect(caughtError.message).toBe('This operation was aborted');
+      expect(errors).toEqual(['This operation was aborted']);
+    }
+  });
+
+  // @gate enableHalt
+  // @gate !enableHalt
+  it('should reject if passing an already aborted signal and enableHalt is disabled', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    // Technically we could still continue rendering the shell but currently the
+    // semantics mean that we also abort any pending CPU work.
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  // @gate enableHalt
+  it('should resolve with an empty prelude if passing an already aborted signal', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    controller.abort(theReason);
+
+    const promise = ReactDOMFizzStatic.prerenderToNodeStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    // Technically we could still continue rendering the shell but currently the
+    // semantics mean that we also abort any pending CPU work.
+
+    let didThrow = false;
+    let prelude;
+    try {
+      ({prelude} = await promise);
+    } catch (error) {
+      didThrow = true;
+    }
+    expect(didThrow).toBe(false);
+    expect(errors).toEqual(['aborted for reasons']);
+    const content = await readContent(prelude);
+    expect(content).toBe('');
+  });
+
+  // @gate enableHalt
+  it('supports custom abort reasons with a string', async () => {
+    const promise = new Promise(r => {});
+    function Wait() {
+      throw promise;
+    }
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <Wait />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x);
+        return 'a digest';
+      },
+    });
+
+    await jest.runAllTimers();
+
+    controller.abort('foobar');
+
+    await resultPromise;
+
+    expect(errors).toEqual(['foobar', 'foobar']);
+  });
+
+  // @gate enableHalt
+  it('supports custom abort reasons with an Error', async () => {
+    const promise = new Promise(r => {});
+    function Wait() {
+      throw promise;
+    }
+    function App() {
+      return (
+        <div>
+          <p>
+            <Suspense fallback={'p'}>
+              <Wait />
+            </Suspense>
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x.message);
+        return 'a digest';
+      },
+    });
+
+    await jest.runAllTimers();
+
+    controller.abort(new Error('uh oh'));
+
+    await resultPromise;
+
+    expect(errors).toEqual(['uh oh', 'uh oh']);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
new file mode 100644
index 00000000000..b1a7ee70d0b
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -0,0 +1,649 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let JSDOM;
+let Stream;
+let Scheduler;
+let React;
+let ReactDOMClient;
+let ReactDOMFizzServer;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let waitForAll;
+
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
+describe('ReactDOMFizzServerHydrationWarning', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    Scheduler = require('scheduler');
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  async function act(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const fakeBody = document.createElement('body');
+    fakeBody.innerHTML = bufferedContent;
+    while (fakeBody.firstChild) {
+      const node = fakeBody.firstChild;
+      if (node.nodeName === 'SCRIPT') {
+        const script = document.createElement('script');
+        script.textContent = node.textContent;
+        fakeBody.removeChild(node);
+        container.appendChild(script);
+      } else {
+        container.appendChild(node);
+      }
+    }
+  }
+
+  function getVisibleChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          node.tagName !== 'SCRIPT' &&
+          node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
+          !node.hasAttribute('hidden') &&
+          !node.hasAttribute('aria-hidden')
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  it('suppresses but does not fix text mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            {isClient ? 'Client Text' : 'Server Text'}
+          </span>
+          <span suppressHydrationWarning={true}>{isClient ? 2 : 1}</span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Server Text</span>
+        <span>1</span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        // Don't miss a hydration error. There should be none.
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+    // The text mismatch should be *silently* fixed. Even in production.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Server Text</span>
+        <span>1</span>
+      </div>,
+    );
+  });
+
+  it('suppresses but does not fix multiple text node mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            {isClient ? 'Client1' : 'Server1'}
+            {isClient ? 'Client2' : 'Server2'}
+          </span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          {'Server1'}
+          {'Server2'}
+        </span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          {'Server1'}
+          {'Server2'}
+        </span>
+      </div>,
+    );
+  });
+
+  it('errors on text-to-element mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            Hello, {isClient ? <span>Client</span> : 'Server'}!
+          </span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          {'Hello, '}
+          {'Server'}
+          {'!'}
+        </span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          Hello, <span>Client</span>!
+        </span>
+      </div>,
+    );
+  });
+
+  it('suppresses but does not fix client-only single text node mismatches with suppressHydrationWarning', async () => {
+    function App({text}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>{text}</span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App text={null} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span />
+      </div>,
+    );
+    const root = ReactDOMClient.hydrateRoot(container, <App text="Client" />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span />
+      </div>,
+    );
+    // An update fixes it though.
+    root.render(<App text="Client 2" />);
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Client 2</span>
+      </div>,
+    );
+  });
+
+  // TODO: This behavior is not consistent with client-only single text node.
+
+  it('errors on server-only single text node mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            {isClient ? null : 'Server'}
+          </span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Server</span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span />
+      </div>,
+    );
+  });
+
+  it('errors on client-only extra text node mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            <span>Shared</span>
+            {isClient ? 'Client' : null}
+          </span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          <span>Shared</span>
+        </span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          <span>Shared</span>
+          {'Client'}
+        </span>
+      </div>,
+    );
+  });
+
+  it('errors on server-only extra text node mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            <span>Shared</span>
+            {isClient ? null : 'Server'}
+          </span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          <span>Shared</span>Server
+        </span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          <span>Shared</span>
+        </span>
+      </div>,
+    );
+  });
+
+  it('errors on element-to-text mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            Hello, {isClient ? 'Client' : <span>Server</span>}!
+          </span>
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          Hello, <span>Server</span>!
+        </span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          {'Hello, '}
+          {'Client'}
+          {'!'}
+        </span>
+      </div>,
+    );
+  });
+
+  it('suppresses but does not fix attribute mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span
+            suppressHydrationWarning={true}
+            className={isClient ? 'client' : 'server'}
+            style={{opacity: isClient ? 1 : 0}}
+            data-serveronly={isClient ? null : 'server-only'}
+            data-clientonly={isClient ? 'client-only' : null}
+          />
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span class="server" style="opacity:0" data-serveronly="server-only" />
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span class="server" style="opacity:0" data-serveronly="server-only" />
+      </div>,
+    );
+  });
+
+  it('suppresses and does not fix html mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <p
+            suppressHydrationWarning={true}
+            dangerouslySetInnerHTML={{
+              __html: isClient ? 'Client HTML' : 'Server HTML',
+            }}
+          />
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Server HTML</p>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Server HTML</p>
+      </div>,
+    );
+  });
+
+  it('errors on insertions with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div suppressHydrationWarning={true}>
+          <p>Client and server</p>
+          {isClient && <p>Client only</p>}
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Client and server</p>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Client and server</p>
+        <p>Client only</p>
+      </div>,
+    );
+  });
+
+  it('errors on deletions with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div suppressHydrationWarning={true}>
+          <p>Client and server</p>
+          {!isClient && <p>Server only</p>}
+        </div>
+      );
+    }
+    await act(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Client and server</p>
+        <p>Server only</p>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Client and server</p>
+      </div>,
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js
new file mode 100644
index 00000000000..0e2fff5cd45
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js
@@ -0,0 +1,989 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+import {
+  insertNodesAndExecuteScripts,
+  getVisibleChildren,
+} from '../test-utils/FizzTestUtils';
+
+let JSDOM;
+let React;
+let Suspense;
+let SuspenseList;
+let assertLog;
+let Scheduler;
+let ReactDOMFizzServer;
+let Stream;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let hasCompleted = false;
+let fatalError = undefined;
+
+describe('ReactDOMFizzSuspenseList', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    assertLog = require('internal-test-utils').assertLog;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+
+    Suspense = React.Suspense;
+    SuspenseList = React.unstable_SuspenseList;
+
+    Scheduler = require('scheduler');
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+    global.window = jsdom.window;
+    // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+    global.requestAnimationFrame = global.window.requestAnimationFrame = cb =>
+      setTimeout(cb);
+
+    buffer = '';
+    hasErrored = false;
+    hasCompleted = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+    writable.on('finish', () => {
+      hasCompleted = true;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  async function serverAct(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const temp = document.createElement('body');
+    temp.innerHTML = bufferedContent;
+    await insertNodesAndExecuteScripts(temp, container, null);
+    jest.runAllTimers();
+  }
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span>{props.text}</span>;
+  }
+
+  function createAsyncText(text) {
+    let resolved = false;
+    let error = undefined;
+    const Component = function () {
+      if (error !== undefined) {
+        Scheduler.log('Error! [' + error.message + ']');
+        throw error;
+      }
+      if (!resolved) {
+        Scheduler.log('Suspend! [' + text + ']');
+        throw promise;
+      }
+      return <Text text={text} />;
+    };
+    const promise = new Promise(resolve => {
+      Component.resolve = function () {
+        resolved = true;
+        return resolve();
+      };
+      Component.reject = function (e) {
+        error = e;
+        return resolve();
+      };
+    });
+    return Component;
+  }
+
+  // @gate enableSuspenseList
+  it('shows content forwards by default', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <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>
+        </div>
+      );
+    }
+
+    await C.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended,
+      'C',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => A.resolve());
+    assertLog(['A']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('independently with revealOrder="independent"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="independent">
+            <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>
+        </div>
+      );
+    }
+
+    await A.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog(['A', 'Suspend! [B]', 'Suspend! [C]', 'Loading B', 'Loading C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <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>
+        </div>
+      );
+    }
+
+    await A.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'A',
+      'Suspend! [B]',
+      'Suspend! [C]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" in a single pass', async () => {
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="together">
+            <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>
+        </div>
+      );
+    }
+
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+    pipe(writable);
+    await 0;
+    const bufferedContent = buffer;
+    buffer = '';
+
+    assertLog(['A', 'B', 'C', 'Loading A', 'Loading B', 'Loading C']);
+
+    expect(bufferedContent).toMatchInlineSnapshot(
+      `"<div><!--$--><span>A</span><!--/$--><!--$--><span>B</span><!--/$--><!--$--><span>C</span><!--/$--></div>"`,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" even when nested as siblings', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <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>
+        </div>
+      );
+    }
+
+    await A.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'A',
+      'Suspend! [B]',
+      'Suspend! [C]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <span>Loading A</span>
+          <span>Loading B</span>
+        </div>
+        <div>
+          <span>Loading C</span>
+        </div>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <span>Loading A</span>
+          <span>Loading B</span>
+        </div>
+        <div>
+          <span>Loading C</span>
+        </div>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>
+          <span>A</span>
+          <span>B</span>
+        </div>
+        <div>
+          <span>C</span>
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" in nested SuspenseLists', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <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>
+        </div>
+      );
+    }
+
+    await A.resolve();
+    await B.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" in nested SuspenseLists where the inner is "independent"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="together">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+            <SuspenseList revealOrder="independent">
+              <Suspense fallback={<Text text="Loading B" />}>
+                <B />
+              </Suspense>
+              <Suspense fallback={<Text text="Loading C" />}>
+                <C />
+              </Suspense>
+            </SuspenseList>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    await A.resolve();
+    await B.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays each items in "forwards" order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <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>
+        </div>
+      );
+    }
+
+    await C.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended,
+      'C',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => A.resolve());
+    assertLog(['A']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays each items in "backwards" mount order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="backwards" tail="visible">
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <B />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    await A.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'Suspend! [C]',
+      'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended,
+      'A',
+      'Loading C',
+      'Loading B',
+      'Loading A',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays each items in "backwards" order in legacy mode', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="unstable_legacy-backwards" tail="visible">
+            <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>
+        </div>
+      );
+    }
+
+    await A.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'Suspend! [C]',
+      'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended,
+      'A',
+      'Loading C',
+      'Loading B',
+      'Loading A',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => C.resolve());
+    assertLog(['C']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('waits for a nested SuspenseList to complete before resolving "forwards"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <SuspenseList revealOrder="backwards" tail="visible">
+              <Suspense fallback={<Text text="Loading B" />}>
+                <B />
+              </Suspense>
+              <Suspense fallback={<Text text="Loading A" />}>
+                <A />
+              </Suspense>
+            </SuspenseList>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    await C.resolve();
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    assertLog([
+      'Suspend! [B]',
+      'Suspend! [A]',
+      'C',
+      'Loading B',
+      'Loading A',
+      'Loading C',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => A.resolve());
+    assertLog(['A']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </div>,
+    );
+
+    await serverAct(() => B.resolve());
+    assertLog(['B']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('can abort a pending SuspenseList', async () => {
+    const A = createAsyncText('A');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <Text text="B" />
+            </Suspense>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    const errors = [];
+    let abortStream;
+    await serverAct(async () => {
+      const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(<Foo />, {
+        onError(error) {
+          errors.push(error.message);
+        },
+      });
+      pipe(writable);
+      abortStream = abort;
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      'B', // TODO: Defer rendering the content after fallback if previous suspended,
+      'Loading A',
+      'Loading B',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </div>,
+    );
+
+    await serverAct(() => {
+      abortStream();
+    });
+
+    expect(hasCompleted).toBe(true);
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('can error a pending SuspenseList', async () => {
+    const A = createAsyncText('A');
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <A />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <Text text="B" />
+            </Suspense>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    const errors = [];
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />, {
+        onError(error) {
+          errors.push(error.message);
+        },
+      });
+      pipe(writable);
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      'B', // TODO: Defer rendering the content after fallback if previous suspended,
+      'Loading A',
+      'Loading B',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </div>,
+    );
+
+    await serverAct(async () => {
+      A.reject(new Error('hi'));
+    });
+
+    assertLog(['Error! [hi]']);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading A</span>
+        <span>B</span>
+      </div>,
+    );
+
+    expect(errors).toEqual(['hi']);
+    expect(hasErrored).toBe(false);
+    expect(hasCompleted).toBe(true);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js
new file mode 100644
index 00000000000..ee87fdac9ce
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js
@@ -0,0 +1,335 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+import {
+  insertNodesAndExecuteScripts,
+  getVisibleChildren,
+} from '../test-utils/FizzTestUtils';
+
+let JSDOM;
+let React;
+let Suspense;
+let ViewTransition;
+let ReactDOMClient;
+let clientAct;
+let ReactDOMFizzServer;
+let Stream;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+
+describe('ReactDOMFizzViewTransition', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    clientAct = require('internal-test-utils').act;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+
+    Suspense = React.Suspense;
+    ViewTransition = React.ViewTransition;
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+    global.window = jsdom.window;
+    // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+    global.requestAnimationFrame = global.window.requestAnimationFrame = cb =>
+      setTimeout(cb);
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  async function serverAct(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const temp = document.createElement('body');
+    temp.innerHTML = bufferedContent;
+    await insertNodesAndExecuteScripts(temp, container, null);
+    jest.runAllTimers();
+  }
+
+  // @gate enableViewTransition
+  it('emits annotations for view transitions', async () => {
+    function App() {
+      return (
+        <div>
+          <ViewTransition>
+            <div />
+          </ViewTransition>
+          <ViewTransition name="foo" update="bar">
+            <div />
+          </ViewTransition>
+          <ViewTransition update={{something: 'a', default: 'baz'}}>
+            <div />
+          </ViewTransition>
+          <ViewTransition name="outer" update="bar" share="pair">
+            <ViewTransition>
+              <div />
+            </ViewTransition>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-update="auto" />
+        <div vt-name="foo" vt-update="bar" vt-share="auto" />
+        <div vt-update="baz" />
+        <div vt-name="outer" vt-update="auto" vt-share="pair" />
+      </div>,
+    );
+
+    // Hydration should not yield any errors.
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+  });
+
+  // @gate enableViewTransition
+  it('emits enter/exit annotations for view transitions inside Suspense', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Suspend() {
+      return React.use(promise);
+    }
+    function App() {
+      const fallback = (
+        <ViewTransition>
+          <div>
+            <ViewTransition>
+              <span>Loading</span>
+            </ViewTransition>
+          </div>
+        </ViewTransition>
+      );
+      return (
+        <div>
+          <Suspense fallback={fallback}>
+            <ViewTransition>
+              <Suspend />
+            </ViewTransition>
+          </Suspense>
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-update="auto" vt-exit="auto">
+          <span vt-update="auto">Loading</span>
+        </div>
+      </div>,
+    );
+
+    await serverAct(async () => {
+      await resolve(
+        <div>
+          <ViewTransition>
+            <span>Content</span>
+          </ViewTransition>
+        </div>,
+      );
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-update="auto" vt-enter="auto">
+          <span vt-update="auto">Content</span>
+        </div>
+      </div>,
+    );
+
+    // Hydration should not yield any errors.
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+  });
+
+  // @gate enableViewTransition
+  it('can emit both enter and exit on the same node', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Suspend() {
+      return React.use(promise);
+    }
+    function App() {
+      const fallback = (
+        <Suspense fallback={null}>
+          <ViewTransition enter="hello" exit="goodbye">
+            <div>
+              <ViewTransition>
+                <span>Loading</span>
+              </ViewTransition>
+            </div>
+          </ViewTransition>
+        </Suspense>
+      );
+      return (
+        <div>
+          <Suspense fallback={fallback}>
+            <ViewTransition enter="hi">
+              <Suspend />
+            </ViewTransition>
+          </Suspense>
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-update="auto" vt-enter="hello" vt-exit="goodbye">
+          <span vt-update="auto">Loading</span>
+        </div>
+      </div>,
+    );
+
+    await serverAct(async () => {
+      await resolve(
+        <div>
+          <ViewTransition>
+            <span>Content</span>
+          </ViewTransition>
+        </div>,
+      );
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-update="auto" vt-enter="hi">
+          <span vt-update="auto">Content</span>
+        </div>
+      </div>,
+    );
+
+    // Hydration should not yield any errors.
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+  });
+
+  // @gate enableViewTransition
+  it('emits annotations for view transitions outside Suspense', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Suspend() {
+      return React.use(promise);
+    }
+    function App() {
+      const fallback = (
+        <div>
+          <ViewTransition>
+            <span>Loading</span>
+          </ViewTransition>
+        </div>
+      );
+      return (
+        <div>
+          <ViewTransition>
+            <Suspense fallback={fallback}>
+              <Suspend />
+            </Suspense>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-name="_R_0_" vt-update="auto" vt-share="auto">
+          <span vt-update="auto">Loading</span>
+        </div>
+      </div>,
+    );
+
+    await serverAct(async () => {
+      await resolve(
+        <div>
+          <ViewTransition>
+            <span>Content</span>
+          </ViewTransition>
+        </div>,
+      );
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div vt-name="_R_0_" vt-update="auto" vt-share="auto">
+          <span vt-update="auto">Content</span>
+        </div>
+      </div>,
+    );
+
+    // Hydration should not yield any errors.
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
new file mode 100644
index 00000000000..ed3d3e08805
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -0,0 +1,9445 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+import {
+  insertNodesAndExecuteScripts,
+  mergeOptions,
+} from '../test-utils/FizzTestUtils';
+
+let JSDOM;
+let Stream;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMFizzServer;
+let Suspense;
+let SuspenseList;
+let textCache;
+let loadCache;
+let writable;
+let CSPnonce = null;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let renderOptions;
+let waitForAll;
+let assertLog;
+let Scheduler;
+let clientAct;
+let streamingContainer;
+let assertConsoleErrorDev;
+
+describe('ReactDOMFloat', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    // We mock matchMedia. for simplicity it only matches 'all' or '' and misses everything else
+    Object.defineProperty(jsdom.window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: query === 'all' || query === '',
+        media: query,
+      })),
+    });
+    streamingContainer = null;
+    global.window = jsdom.window;
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    global.Node = global.window.Node;
+    global.addEventListener = global.window.addEventListener;
+    global.MutationObserver = global.window.MutationObserver;
+    // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+    global.requestAnimationFrame = global.window.requestAnimationFrame = cb =>
+      setTimeout(cb);
+    container = document.getElementById('container');
+
+    CSPnonce = null;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    SuspenseList = React.unstable_SuspenseList;
+    Scheduler = require('scheduler/unstable_mock');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    clientAct = InternalTestUtils.act;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    textCache = new Map();
+    loadCache = new Set();
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+
+    renderOptions = {};
+    if (gate(flags => flags.shouldUseFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        'react-dom/unstable_server-external-runtime';
+    }
+  });
+
+  const bodyStartMatch = /<body(?:>| .*?>)/;
+  const headStartMatch = /<head(?:>| .*?>)/;
+
+  async function act(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    let bufferedContent = buffer;
+    buffer = '';
+
+    if (!bufferedContent) {
+      jest.runAllTimers();
+      return;
+    }
+
+    const bodyMatch = bufferedContent.match(bodyStartMatch);
+    const headMatch = bufferedContent.match(headStartMatch);
+
+    if (streamingContainer === null) {
+      // This is the first streamed content. We decide here where to insert it. If we get <html>, <head>, or <body>
+      // we abandon the pre-built document and start from scratch. If we get anything else we assume it goes into the
+      // container. This is not really production behavior because you can't correctly stream into a deep div effectively
+      // but it's pragmatic for tests.
+
+      if (
+        bufferedContent.startsWith('<head>') ||
+        bufferedContent.startsWith('<head ') ||
+        bufferedContent.startsWith('<body>') ||
+        bufferedContent.startsWith('<body ')
+      ) {
+        // wrap in doctype to normalize the parsing process
+        bufferedContent = '<!DOCTYPE html><html>' + bufferedContent;
+      } else if (
+        bufferedContent.startsWith('<html>') ||
+        bufferedContent.startsWith('<html ')
+      ) {
+        throw new Error(
+          'Recieved <html> without a <!DOCTYPE html> which is almost certainly a bug in React',
+        );
+      }
+
+      if (bufferedContent.startsWith('<!DOCTYPE html>')) {
+        // we can just use the whole document
+        const tempDom = new JSDOM(bufferedContent);
+
+        // Wipe existing head and body content
+        document.head.innerHTML = '';
+        document.body.innerHTML = '';
+
+        // Copy the <html> attributes over
+        const tempHtmlNode = tempDom.window.document.documentElement;
+        for (let i = 0; i < tempHtmlNode.attributes.length; i++) {
+          const attr = tempHtmlNode.attributes[i];
+          document.documentElement.setAttribute(attr.name, attr.value);
+        }
+
+        if (headMatch) {
+          // We parsed a head open tag. we need to copy head attributes and insert future
+          // content into <head>
+          streamingContainer = document.head;
+          const tempHeadNode = tempDom.window.document.head;
+          for (let i = 0; i < tempHeadNode.attributes.length; i++) {
+            const attr = tempHeadNode.attributes[i];
+            document.head.setAttribute(attr.name, attr.value);
+          }
+          const source = document.createElement('head');
+          source.innerHTML = tempHeadNode.innerHTML;
+          await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+        }
+
+        if (bodyMatch) {
+          // We parsed a body open tag. we need to copy head attributes and insert future
+          // content into <body>
+          streamingContainer = document.body;
+          const tempBodyNode = tempDom.window.document.body;
+          for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+            const attr = tempBodyNode.attributes[i];
+            document.body.setAttribute(attr.name, attr.value);
+          }
+          const source = document.createElement('body');
+          source.innerHTML = tempBodyNode.innerHTML;
+          await insertNodesAndExecuteScripts(source, document.body, CSPnonce);
+        }
+
+        if (!headMatch && !bodyMatch) {
+          throw new Error('expected <head> or <body> after <html>');
+        }
+      } else {
+        // we assume we are streaming into the default container'
+        streamingContainer = container;
+        const div = document.createElement('div');
+        div.innerHTML = bufferedContent;
+        await insertNodesAndExecuteScripts(div, container, CSPnonce);
+      }
+    } else if (streamingContainer === document.head) {
+      bufferedContent = '<!DOCTYPE html><html><head>' + bufferedContent;
+      const tempDom = new JSDOM(bufferedContent);
+
+      const tempHeadNode = tempDom.window.document.head;
+      const source = document.createElement('head');
+      source.innerHTML = tempHeadNode.innerHTML;
+      await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+
+      if (bodyMatch) {
+        streamingContainer = document.body;
+
+        const tempBodyNode = tempDom.window.document.body;
+        for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+          const attr = tempBodyNode.attributes[i];
+          document.body.setAttribute(attr.name, attr.value);
+        }
+        const bodySource = document.createElement('body');
+        bodySource.innerHTML = tempBodyNode.innerHTML;
+        await insertNodesAndExecuteScripts(bodySource, document.body, CSPnonce);
+      }
+    } else {
+      const div = document.createElement('div');
+      div.innerHTML = bufferedContent;
+      await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
+    }
+    await 0;
+    // Let throttled boundaries reveal
+    jest.runAllTimers();
+  }
+
+  function getMeaningfulChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          // some tags are ambiguous and might be hidden because they look like non-meaningful children
+          // so we have a global override where if this data attribute is included we also include the node
+          node.hasAttribute('data-meaningful') ||
+          (node.tagName === 'SCRIPT' &&
+            node.hasAttribute('src') &&
+            node.getAttribute('src') !==
+              renderOptions.unstable_externalRuntimeSrc &&
+            node.hasAttribute('async')) ||
+          (node.tagName !== 'SCRIPT' &&
+            node.tagName !== 'TEMPLATE' &&
+            node.tagName !== 'template' &&
+            !node.hasAttribute('hidden') &&
+            !node.hasAttribute('aria-hidden') &&
+            // Ignore the render blocking expect
+            (node.getAttribute('rel') !== 'expect' ||
+              node.getAttribute('blocking') !== 'render'))
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getMeaningfulChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  function BlockedOn({value, children}) {
+    readText(value);
+    return children;
+  }
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function AsyncText({text}) {
+    return readText(text);
+  }
+
+  function renderToPipeableStream(jsx, options) {
+    // Merge options with renderOptions, which may contain featureFlag specific behavior
+    return ReactDOMFizzServer.renderToPipeableStream(
+      jsx,
+      mergeOptions(options, renderOptions),
+    );
+  }
+
+  function loadPreloads(hrefs) {
+    const event = new window.Event('load');
+    const nodes = document.querySelectorAll('link[rel="preload"]');
+    resolveLoadables(hrefs, nodes, event, href =>
+      Scheduler.log('load preload: ' + href),
+    );
+  }
+
+  function errorPreloads(hrefs) {
+    const event = new window.Event('error');
+    const nodes = document.querySelectorAll('link[rel="preload"]');
+    resolveLoadables(hrefs, nodes, event, href =>
+      Scheduler.log('error preload: ' + href),
+    );
+  }
+
+  function loadStylesheets(hrefs) {
+    loadStylesheetsFrom(document, hrefs);
+  }
+
+  function loadStylesheetsFrom(root, hrefs) {
+    const event = new window.Event('load');
+    const nodes = root.querySelectorAll('link[rel="stylesheet"]');
+    resolveLoadables(hrefs, nodes, event, href => {
+      Scheduler.log('load stylesheet: ' + href);
+    });
+  }
+
+  function errorStylesheets(hrefs) {
+    const event = new window.Event('error');
+    const nodes = document.querySelectorAll('link[rel="stylesheet"]');
+    resolveLoadables(hrefs, nodes, event, href => {
+      Scheduler.log('error stylesheet: ' + href);
+    });
+  }
+
+  function resolveLoadables(hrefs, nodes, event, onLoad) {
+    const hrefSet = hrefs ? new Set(hrefs) : null;
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (loadCache.has(node)) {
+        continue;
+      }
+      const href = node.getAttribute('href');
+      if (!hrefSet || hrefSet.has(href)) {
+        loadCache.add(node);
+        onLoad(href);
+        node.dispatchEvent(event);
+      }
+    }
+  }
+
+  it('can render resources before singletons', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <>
+        <title>foo</title>
+        <html>
+          <head>
+            <link rel="foo" href="foo" />
+          </head>
+          <body>hello world</body>
+        </html>
+      </>,
+    );
+    try {
+      await waitForAll([]);
+    } catch (e) {
+      // for DOMExceptions that happen when expecting this test to fail we need
+      // to clear the scheduler first otherwise the expected failure will fail
+      await waitForAll([]);
+      throw e;
+    }
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <title>foo</title>
+          <link rel="foo" href="foo" />
+        </head>
+        <body>hello world</body>
+      </html>,
+    );
+  });
+
+  it('can hydrate non Resources in head when Resources are also inserted there', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head>
+            <meta property="foo" content="bar" />
+            <link rel="foo" href="bar" onLoad={() => {}} />
+            <title>foo</title>
+            <noscript>
+              <link rel="icon" href="icon" />
+            </noscript>
+            <base target="foo" href="bar" />
+            <script async={true} src="foo" onLoad={() => {}} />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta property="foo" content="bar" />
+          <title>foo</title>
+          <link rel="foo" href="bar" />
+          <noscript>&lt;link rel="icon" href="icon"&gt;</noscript>
+          <base target="foo" href="bar" />
+          <script async="" src="foo" />
+        </head>
+        <body>foo</body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head>
+          <meta property="foo" content="bar" />
+          <link rel="foo" href="bar" onLoad={() => {}} />
+          <title>foo</title>
+          <noscript>
+            <link rel="icon" href="icon" />
+          </noscript>
+          <base target="foo" href="bar" />
+          <script async={true} src="foo" onLoad={() => {}} />
+        </head>
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta property="foo" content="bar" />
+          <title>foo</title>
+          <link rel="foo" href="bar" />
+          <noscript>&lt;link rel="icon" href="icon"&gt;</noscript>
+          <base target="foo" href="bar" />
+          <script async="" src="foo" />
+        </head>
+        <body>foo</body>
+      </html>,
+    );
+  });
+
+  it('warns if you render resource-like elements above <head> or <body>', async () => {
+    const root = ReactDOMClient.createRoot(document);
+
+    root.render(
+      <>
+        <noscript>foo</noscript>
+        <html>
+          <body>foo</body>
+        </html>
+      </>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      [
+        'Cannot render <noscript> outside the main document. Try moving it into the root <head> tag.',
+        {withoutStack: true},
+      ],
+    ]);
+
+    root.render(
+      <html>
+        <template>foo</template>
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render <template> outside the main document. Try moving it into the root <head> tag.\n' +
+        '    in html (at **)',
+      'In HTML, <template> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n\n' +
+        '> <html>\n' +
+        '>   <template>\n' +
+        '    ...\n' +
+        '\n' +
+        '    in template (at **)',
+    ]);
+
+    root.render(
+      <html>
+        <body>foo</body>
+        <style>foo</style>
+      </html>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <style> outside the main document without knowing its precedence ' +
+        'and a unique href key. React can hoist and deduplicate <style> tags if you provide a ' +
+        '`precedence` prop along with an `href` prop that does not conflict with the `href` ' +
+        'values used in any other hoisted <style> or <link rel="stylesheet" ...> tags.  ' +
+        'Note that hoisting <style> tags is considered an advanced feature that most will not use directly. ' +
+        'Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` ' +
+        'and `href="some unique resource identifier"`.\n' +
+        '    in html (at **)',
+      'In HTML, <style> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n\n' +
+        '> <html>\n' +
+        '    <body>\n' +
+        '>   <style>\n' +
+        '\n' +
+        '    in style (at **)',
+    ]);
+
+    root.render(
+      <>
+        <html>
+          <body>foo</body>
+        </html>
+        <link rel="stylesheet" href="foo" />
+      </>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      [
+        'Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence. ' +
+          'Consider adding precedence="default" or moving it into the root <head> tag.',
+        {withoutStack: true},
+      ],
+    ]);
+
+    root.render(
+      <>
+        <html>
+          <body>foo</body>
+          <script href="foo" />
+        </html>
+      </>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a sync or defer <script> outside the main document without knowing its order. ' +
+        'Try adding async="" or moving it into the root <head> tag.\n' +
+        '    in html (at **)',
+      'In HTML, <script> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <html>\n' +
+        '    <body>\n' +
+        '>   <script href="foo">\n' +
+        '\n' +
+        '    in script (at **)',
+    ]);
+
+    root.render(
+      <html>
+        <script async={true} onLoad={() => {}} href="bar" />
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <script> with onLoad or onError listeners outside the main document. ' +
+        'Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or ' +
+        'somewhere in the <body>.\n' +
+        '    in html (at **)',
+    ]);
+
+    root.render(
+      <>
+        <link rel="foo" onLoad={() => {}} href="bar" />
+        <html>
+          <body>foo</body>
+        </html>
+      </>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev(
+      [
+        'Cannot render a <link> with onLoad or onError listeners outside the main document. ' +
+          'Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or ' +
+          'somewhere in the <body>.',
+      ],
+      {withoutStack: true},
+    );
+    return;
+  });
+
+  it('can acquire a resource after releasing it in the same commit', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    root.render(
+      <>
+        <script async={true} src="foo" />
+      </>,
+    );
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <script async="" src="foo" />
+        </head>
+        <body>
+          <div id="container" />
+        </body>
+      </html>,
+    );
+
+    root.render(
+      <>
+        {null}
+        <script data-new="new" async={true} src="foo" />
+      </>,
+    );
+    await waitForAll([]);
+    // we don't see the attribute because the resource is the same and was not reconstructed
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <script async="" src="foo" />
+        </head>
+        <body>
+          <div id="container" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('emits an implicit <head> element to hold resources when none is rendered but an <html> is rendered', async () => {
+    const chunks = [];
+
+    writable.on('data', chunk => {
+      chunks.push(chunk);
+    });
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <>
+          <title>foo</title>
+          <html>
+            <body>bar</body>
+          </html>
+          <script async={true} src="foo" />
+        </>,
+      );
+      pipe(writable);
+    });
+    expect(chunks).toEqual([
+      '<!DOCTYPE html><html><head><script async="" src="foo"></script>' +
+        (gate(flags => flags.shouldUseFizzExternalRuntime)
+          ? '<script src="react-dom/unstable_server-external-runtime" async=""></script>'
+          : '') +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render"/>'
+          : '') +
+        '<title>foo</title></head>' +
+        '<body>bar' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : ''),
+      '</body></html>',
+    ]);
+  });
+
+  it('dedupes if the external runtime is explicitly loaded using preinit', async () => {
+    const unstable_externalRuntimeSrc = 'src-of-external-runtime';
+    function App() {
+      ReactDOM.preinit(unstable_externalRuntimeSrc, {as: 'script'});
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <AsyncText text="Hello" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <App />
+          </body>
+        </html>,
+        {
+          unstable_externalRuntimeSrc,
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(
+      Array.from(document.querySelectorAll('script[async]')).map(
+        n => n.outerHTML,
+      ),
+    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+  });
+
+  it('can send style insertion implementation independent of boundary commpletion instruction implementation', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <Suspense fallback="loading foo...">
+              <BlockedOn value="foo">foo</BlockedOn>
+            </Suspense>
+            <Suspense fallback="loading bar...">
+              <BlockedOn value="bar">
+                <link rel="stylesheet" href="bar" precedence="bar" />
+                bar
+              </BlockedOn>
+            </Suspense>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('foo');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          foo
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+    await act(() => {
+      resolveText('bar');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="bar" data-precedence="bar" />
+        </head>
+        <body>
+          foo
+          {'loading bar...'}
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('can avoid inserting a late stylesheet if it already rendered on the client', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <Suspense fallback="loading foo...">
+              <BlockedOn value="foo">
+                <link rel="stylesheet" href="foo" precedence="foo" />
+                foo
+              </BlockedOn>
+            </Suspense>
+            <Suspense fallback="loading bar...">
+              <BlockedOn value="bar">
+                <link rel="stylesheet" href="bar" precedence="bar" />
+                bar
+              </BlockedOn>
+            </Suspense>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <body>
+          <link rel="stylesheet" href="foo" precedence="foo" />
+          <Suspense fallback="loading foo...">
+            <link rel="stylesheet" href="foo" precedence="foo" />
+            foo
+          </Suspense>
+          <Suspense fallback="loading bar...">
+            <link rel="stylesheet" href="bar" precedence="bar" />
+            bar
+          </Suspense>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    loadPreloads();
+    await assertLog(['load preload: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+          <link as="style" href="foo" rel="preload" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('bar');
+    });
+    await act(() => {
+      loadStylesheets();
+    });
+    await assertLog(['load stylesheet: foo', 'load stylesheet: bar']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+          <link rel="stylesheet" href="bar" data-precedence="bar" />
+          <link as="style" href="foo" rel="preload" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'bar'}
+          <link as="style" href="bar" rel="preload" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('foo');
+    });
+    await act(() => {
+      loadStylesheets();
+    });
+    await assertLog([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+          <link rel="stylesheet" href="bar" data-precedence="bar" />
+          <link as="style" href="foo" rel="preload" />
+        </head>
+        <body>
+          {'foo'}
+          {'bar'}
+          <link as="style" href="bar" rel="preload" />
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('can hoist <link rel="stylesheet" .../> and <style /> tags together, respecting order of discovery', async () => {
+    const css = `
+body {
+  background-color: red;
+}`;
+
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <link rel="stylesheet" href="one1" precedence="one" />
+            <style href="two1" precedence="two">
+              {css}
+            </style>
+            <link rel="stylesheet" href="three1" precedence="three" />
+            <style href="four1" precedence="four">
+              {css}
+            </style>
+            <Suspense>
+              <BlockedOn value="block">
+                <link rel="stylesheet" href="one2" precedence="one" />
+                <link rel="stylesheet" href="two2" precedence="two" />
+                <style href="three2" precedence="three">
+                  {css}
+                </style>
+                <style href="four2" precedence="four">
+                  {css}
+                </style>
+                <link rel="stylesheet" href="five1" precedence="five" />
+              </BlockedOn>
+            </Suspense>
+            <Suspense>
+              <BlockedOn value="block2">
+                <style href="one3" precedence="one">
+                  {css}
+                </style>
+                <style href="two3" precedence="two">
+                  {css}
+                </style>
+                <link rel="stylesheet" href="three3" precedence="three" />
+                <link rel="stylesheet" href="four3" precedence="four" />
+                <style href="six1" precedence="six">
+                  {css}
+                </style>
+              </BlockedOn>
+            </Suspense>
+            <Suspense>
+              <BlockedOn value="block again">
+                <link rel="stylesheet" href="one2" precedence="one" />
+                <link rel="stylesheet" href="two2" precedence="two" />
+                <style href="three2" precedence="three">
+                  {css}
+                </style>
+                <style href="four2" precedence="four">
+                  {css}
+                </style>
+                <link rel="stylesheet" href="five1" precedence="five" />
+              </BlockedOn>
+            </Suspense>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+        </head>
+        <body />
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('block');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('block2');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="one3" data-precedence="one">
+            {css}
+          </style>
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <style data-href="two3" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three3" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="four3" data-precedence="four" />
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+          <style data-href="six1" data-precedence="six">
+            {css}
+          </style>
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+          <link rel="preload" href="three3" as="style" />
+          <link rel="preload" href="four3" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('block again');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="one3" data-precedence="one">
+            {css}
+          </style>
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <style data-href="two3" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three3" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="four3" data-precedence="four" />
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+          <style data-href="six1" data-precedence="six">
+            {css}
+          </style>
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+          <link rel="preload" href="three3" as="style" />
+          <link rel="preload" href="four3" as="style" />
+        </body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <body>
+          <link rel="stylesheet" href="one4" precedence="one" />
+          <style href="two4" precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three4" precedence="three" />
+          <style href="four4" precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="seven1" precedence="seven" />
+          <style href="eight1" precedence="eight">
+            {css}
+          </style>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    await act(() => {
+      loadPreloads();
+      loadStylesheets();
+    });
+    await assertLog([
+      'load preload: one4',
+      'load preload: three4',
+      'load preload: seven1',
+      'load preload: one2',
+      'load preload: two2',
+      'load preload: five1',
+      'load preload: three3',
+      'load preload: four3',
+      'load stylesheet: one1',
+      'load stylesheet: one2',
+      'load stylesheet: one4',
+      'load stylesheet: two2',
+      'load stylesheet: three1',
+      'load stylesheet: three3',
+      'load stylesheet: three4',
+      'load stylesheet: four3',
+      'load stylesheet: five1',
+      'load stylesheet: seven1',
+    ]);
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="one3" data-precedence="one">
+            {css}
+          </style>
+          <link rel="stylesheet" href="one4" data-precedence="one" />
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <style data-href="two3" data-precedence="two">
+            {css}
+          </style>
+          <style data-href="two4" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three3" data-precedence="three" />
+          <link rel="stylesheet" href="three4" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="four3" data-precedence="four" />
+          <style data-href="four4" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+          <style data-href="six1" data-precedence="six">
+            {css}
+          </style>
+          <link rel="stylesheet" href="seven1" data-precedence="seven" />
+          <style data-href="eight1" data-precedence="eight">
+            {css}
+          </style>
+          <link rel="preload" href="one4" as="style" />
+          <link rel="preload" href="three4" as="style" />
+          <link rel="preload" href="seven1" as="style" />
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+          <link rel="preload" href="three3" as="style" />
+          <link rel="preload" href="four3" as="style" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('client renders a boundary if a style Resource dependency fails to load', async () => {
+    function App() {
+      return (
+        <html>
+          <head />
+          <body>
+            <Suspense fallback="loading...">
+              <BlockedOn value="unblock">
+                <link rel="stylesheet" href="foo" precedence="arbitrary" />
+                <link rel="stylesheet" href="bar" precedence="arbitrary" />
+                Hello
+              </BlockedOn>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>loading...</body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('unblock');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
+        </head>
+        <body>
+          loading...
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    errorStylesheets(['bar']);
+    assertLog(['error stylesheet: bar']);
+
+    await waitForAll([]);
+
+    const boundaryTemplateInstance = document.getElementById('B:0');
+    const suspenseInstance = boundaryTemplateInstance.previousSibling;
+
+    expect(suspenseInstance.data).toEqual('$!');
+    expect(boundaryTemplateInstance.dataset.dgst).toBe('CSS failed to load');
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
+        </head>
+        <body>
+          loading...
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(document, <App />, {
+      onRecoverableError(err, errInfo) {
+        errors.push(err.message);
+        errors.push(err.digest);
+      },
+    });
+    await waitForAll([]);
+    // When binding a stylesheet that was SSR'd in a boundary reveal there is a loadingState promise
+    // We need to use that promise to resolve the suspended commit because we don't know if the load or error
+    // events have already fired. This requires the load to be awaited for the commit to have a chance to flush
+    // We could change this by tracking the loadingState's fulfilled status directly on the loadingState similar
+    // to thenables however this slightly increases the fizz runtime code size.
+    await clientAct(() => loadStylesheets());
+    assertLog(['load stylesheet: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
+        </head>
+        <body>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          Hello
+        </body>
+      </html>,
+    );
+    expect(errors).toEqual([
+      'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      'CSS failed to load',
+    ]);
+  });
+
+  it('treats stylesheet links with a precedence as a resource', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="foo" precedence="arbitrary" />
+            Hello
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+        </head>
+        <body>Hello</body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head />
+        <body>Hello</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+        </head>
+        <body>Hello</body>
+      </html>,
+    );
+  });
+
+  it('inserts text separators following text when followed by an element that is converted to a resource and thus removed from the html inline', async () => {
+    // If you render many of these as siblings the values get emitted as a single text with no separator sometimes
+    // because the link gets elided as a resource
+    function AsyncTextWithResource({text, href, precedence}) {
+      const value = readText(text);
+      return (
+        <>
+          {value}
+          <link rel="stylesheet" href={href} precedence={precedence} />
+        </>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <AsyncTextWithResource text="foo" href="foo" precedence="one" />
+            <AsyncTextWithResource text="bar" href="bar" precedence="two" />
+            <AsyncTextWithResource text="baz" href="baz" precedence="three" />
+          </body>
+        </html>,
+      );
+      pipe(writable);
+      resolveText('foo');
+      resolveText('bar');
+      resolveText('baz');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+          <link rel="stylesheet" href="baz" data-precedence="three" />
+        </head>
+        <body>
+          {'foo'}
+          {'bar'}
+          {'baz'}
+        </body>
+      </html>,
+    );
+  });
+
+  it('hoists late stylesheets the correct precedence', async () => {
+    function PresetPrecedence() {
+      ReactDOM.preinit('preset', {as: 'style', precedence: 'preset'});
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="initial" precedence="one" />
+            <PresetPrecedence />
+            <div>
+              <Suspense fallback="loading foo bar...">
+                <div>foo</div>
+                <link rel="stylesheet" href="foo" precedence="one" />
+                <BlockedOn value="bar">
+                  <div>bar</div>
+                  <link rel="stylesheet" href="bar" precedence="default" />
+                </BlockedOn>
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback="loading bar baz qux...">
+                <BlockedOn value="bar">
+                  <div>bar</div>
+                  <link rel="stylesheet" href="bar" precedence="default" />
+                </BlockedOn>
+                <BlockedOn value="baz">
+                  <div>baz</div>
+                  <link rel="stylesheet" href="baz" precedence="two" />
+                </BlockedOn>
+                <BlockedOn value="qux">
+                  <div>qux</div>
+                  <link rel="stylesheet" href="qux" precedence="one" />
+                </BlockedOn>
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback="loading bar baz qux...">
+                <BlockedOn value="unblock">
+                  <BlockedOn value="bar">
+                    <div>bar</div>
+                    <link rel="stylesheet" href="bar" precedence="default" />
+                  </BlockedOn>
+                  <BlockedOn value="baz">
+                    <div>baz</div>
+                    <link rel="stylesheet" href="baz" precedence="two" />
+                  </BlockedOn>
+                  <BlockedOn value="qux">
+                    <div>qux</div>
+                    <link rel="stylesheet" href="qux" precedence="one" />
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+        </head>
+        <body>
+          <div>loading foo bar...</div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('foo');
+      resolveText('bar');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading foo bar...</div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const link = document.querySelector('link[rel="stylesheet"][href="foo"]');
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      link.dispatchEvent(event);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading foo bar...</div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const link = document.querySelector('link[rel="stylesheet"][href="bar"]');
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      link.dispatchEvent(event);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('baz');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('qux');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="qux" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="two" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+          <link rel="preload" as="style" href="qux" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const bazlink = document.querySelector(
+        'link[rel="stylesheet"][href="baz"]',
+      );
+      const quxlink = document.querySelector(
+        'link[rel="stylesheet"][href="qux"]',
+      );
+      const presetLink = document.querySelector(
+        'link[rel="stylesheet"][href="preset"]',
+      );
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      bazlink.dispatchEvent(event);
+      quxlink.dispatchEvent(event);
+      presetLink.dispatchEvent(event);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="qux" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="two" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>
+            <div>bar</div>
+            <div>baz</div>
+            <div>qux</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+          <link rel="preload" as="style" href="qux" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('unblock');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="qux" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="two" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>
+            <div>bar</div>
+            <div>baz</div>
+            <div>qux</div>
+          </div>
+          <div>
+            <div>bar</div>
+            <div>baz</div>
+            <div>qux</div>
+          </div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+          <link rel="preload" as="style" href="qux" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('normalizes stylesheet resource precedence for all boundaries inlined as part of the shell flush', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>
+              outer
+              <link rel="stylesheet" href="1one" precedence="one" />
+              <link rel="stylesheet" href="1two" precedence="two" />
+              <link rel="stylesheet" href="1three" precedence="three" />
+              <link rel="stylesheet" href="1four" precedence="four" />
+              <Suspense fallback={null}>
+                <div>
+                  middle
+                  <link rel="stylesheet" href="2one" precedence="one" />
+                  <link rel="stylesheet" href="2two" precedence="two" />
+                  <link rel="stylesheet" href="2three" precedence="three" />
+                  <link rel="stylesheet" href="2four" precedence="four" />
+                  <Suspense fallback={null}>
+                    <div>
+                      inner
+                      <link rel="stylesheet" href="3five" precedence="five" />
+                      <link rel="stylesheet" href="3one" precedence="one" />
+                      <link rel="stylesheet" href="3two" precedence="two" />
+                      <link rel="stylesheet" href="3three" precedence="three" />
+                      <link rel="stylesheet" href="3four" precedence="four" />
+                    </div>
+                  </Suspense>
+                </div>
+              </Suspense>
+              <Suspense fallback={null}>
+                <div>middle</div>
+                <link rel="stylesheet" href="4one" precedence="one" />
+                <link rel="stylesheet" href="4two" precedence="two" />
+                <link rel="stylesheet" href="4three" precedence="three" />
+                <link rel="stylesheet" href="4four" precedence="four" />
+              </Suspense>
+            </div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="1one" data-precedence="one" />
+          <link rel="stylesheet" href="2one" data-precedence="one" />
+          <link rel="stylesheet" href="3one" data-precedence="one" />
+          <link rel="stylesheet" href="4one" data-precedence="one" />
+
+          <link rel="stylesheet" href="1two" data-precedence="two" />
+          <link rel="stylesheet" href="2two" data-precedence="two" />
+          <link rel="stylesheet" href="3two" data-precedence="two" />
+          <link rel="stylesheet" href="4two" data-precedence="two" />
+
+          <link rel="stylesheet" href="1three" data-precedence="three" />
+          <link rel="stylesheet" href="2three" data-precedence="three" />
+          <link rel="stylesheet" href="3three" data-precedence="three" />
+          <link rel="stylesheet" href="4three" data-precedence="three" />
+
+          <link rel="stylesheet" href="1four" data-precedence="four" />
+          <link rel="stylesheet" href="2four" data-precedence="four" />
+          <link rel="stylesheet" href="3four" data-precedence="four" />
+          <link rel="stylesheet" href="4four" data-precedence="four" />
+
+          <link rel="stylesheet" href="3five" data-precedence="five" />
+        </head>
+        <body>
+          <div>
+            outer
+            <div>
+              middle<div>inner</div>
+            </div>
+            <div>middle</div>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('stylesheet resources are inserted according to precedence order on the client', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>
+              <link rel="stylesheet" href="foo" precedence="one" />
+              <link rel="stylesheet" href="bar" precedence="two" />
+              Hello
+            </div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+        </head>
+        <body>
+          <div>Hello</div>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head />
+        <body>
+          <div>
+            <link rel="stylesheet" href="foo" precedence="one" />
+            <link rel="stylesheet" href="bar" precedence="two" />
+            Hello
+          </div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+        </head>
+        <body>
+          <div>Hello</div>
+        </body>
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head />
+        <body>
+          <div>Goodbye</div>
+          <link rel="stylesheet" href="baz" precedence="one" />
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    await act(() => {
+      loadPreloads();
+      loadStylesheets();
+    });
+    await assertLog([
+      'load preload: baz',
+      'load stylesheet: foo',
+      'load stylesheet: baz',
+      'load stylesheet: bar',
+    ]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="baz" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+          <link rel="preload" as="style" href="baz" />
+        </head>
+        <body>
+          <div>Goodbye</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('inserts preloads in render phase eagerly', async () => {
+    function Throw() {
+      throw new Error('Uh oh!');
+    }
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(
+      <ErrorBoundary>
+        <link rel="stylesheet" href="foo" precedence="default" />
+        <div>foo</div>
+        <Throw />
+      </ErrorBoundary>,
+    );
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div id="container">Uh oh!</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('will include child boundary stylesheet resources in the boundary reveal instruction', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>
+              <Suspense fallback="loading foo...">
+                <BlockedOn value="foo">
+                  <div>foo</div>
+                  <link rel="stylesheet" href="foo" precedence="default" />
+                  <Suspense fallback="loading bar...">
+                    <BlockedOn value="bar">
+                      <div>bar</div>
+                      <link rel="stylesheet" href="bar" precedence="default" />
+                      <Suspense fallback="loading baz...">
+                        <BlockedOn value="baz">
+                          <div>baz</div>
+                          <link
+                            rel="stylesheet"
+                            href="baz"
+                            precedence="default"
+                          />
+                        </BlockedOn>
+                      </Suspense>
+                    </BlockedOn>
+                  </Suspense>
+                </BlockedOn>
+              </Suspense>
+            </div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading foo...</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('bar');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading foo...</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('baz');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading foo...</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('foo');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading foo...</div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
+        el => {
+          el.dispatchEvent(event);
+        },
+      );
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+            <div>baz</div>
+          </div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('will hoist resources of child boundaries emitted as part of a partial boundary to the parent boundary', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>
+              <Suspense fallback="loading...">
+                <div>
+                  <BlockedOn value="foo">
+                    <div>foo</div>
+                    <link rel="stylesheet" href="foo" precedence="default" />
+                    <Suspense fallback="loading bar...">
+                      <BlockedOn value="bar">
+                        <div>bar</div>
+                        <link
+                          rel="stylesheet"
+                          href="bar"
+                          precedence="default"
+                        />
+                        <Suspense fallback="loading baz...">
+                          <div>
+                            <BlockedOn value="baz">
+                              <div>baz</div>
+                              <link
+                                rel="stylesheet"
+                                href="baz"
+                                precedence="default"
+                              />
+                            </BlockedOn>
+                          </div>
+                        </Suspense>
+                      </BlockedOn>
+                    </Suspense>
+                  </BlockedOn>
+                  <BlockedOn value="qux">
+                    <div>qux</div>
+                    <link rel="stylesheet" href="qux" precedence="default" />
+                  </BlockedOn>
+                </div>
+              </Suspense>
+            </div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+
+    // This will enqueue a stylesheet resource in a deep blocked boundary (loading baz...).
+    await act(() => {
+      resolveText('baz');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+
+    // This will enqueue a stylesheet resource in the intermediate blocked boundary (loading bar...).
+    await act(() => {
+      resolveText('bar');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+
+    // This will complete a segment in the top level boundary that is still blocked on another segment.
+    // It will flush the completed segment however the inner boundaries should not emit their style dependencies
+    // because they are not going to be revealed yet. instead their dependencies are hoisted to the blocked
+    // boundary (top level).
+    await act(() => {
+      resolveText('foo');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+        </body>
+      </html>,
+    );
+
+    // This resolves the last blocked segment on the top level boundary so we see all dependencies of the
+    // nested boundaries emitted at this level
+    await act(() => {
+      resolveText('qux');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+          <link rel="stylesheet" href="qux" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading...</div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+          <link rel="preload" href="qux" as="style" />
+        </body>
+      </html>,
+    );
+
+    // We load all stylesheets and confirm the content is revealed
+    await act(() => {
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
+        el => {
+          el.dispatchEvent(event);
+        },
+      );
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+          <link rel="stylesheet" href="qux" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>
+              <div>foo</div>
+              <div>bar</div>
+              <div>
+                <div>baz</div>
+              </div>
+              <div>qux</div>
+            </div>
+          </div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+          <link rel="preload" href="qux" as="style" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('encodes attributes consistently whether resources are flushed in shell or in late boundaries', async () => {
+    function App() {
+      return (
+        <html>
+          <head />
+          <body>
+            <div>
+              <link
+                // This preload is explicit so it can flush with a lot of potential attrs
+                // We will duplicate this as a style that flushes after the shell
+                rel="stylesheet"
+                href="foo"
+                // precedence is not a special attribute for preloads so this will just flush as is
+                precedence="default"
+                // Some standard link props
+                crossOrigin="anonymous"
+                media="all"
+                integrity="somehash"
+                referrerPolicy="origin"
+                // data and non starndard attributes that should flush
+                data-foo={'"quoted"'}
+                nonStandardAttr="attr"
+                properlyformattednonstandardattr="attr"
+                // attributes that should be filtered out for violating certain rules
+                onSomething="this should be removed b/c event handler"
+                shouldnotincludefunctions={() => {}}
+                norsymbols={Symbol('foo')}
+              />
+              <Suspense fallback={'loading...'}>
+                <BlockedOn value="unblock">
+                  <link
+                    // This preload is explicit so it can flush with a lot of potential attrs
+                    // We will duplicate this as a style that flushes after the shell
+                    rel="stylesheet"
+                    href="bar"
+                    // opt-in property to get this treated as a resource
+                    precedence="default"
+                    // Some standard link props
+                    crossOrigin="anonymous"
+                    media="all"
+                    integrity="somehash"
+                    referrerPolicy="origin"
+                    // data and non starndard attributes that should flush
+                    data-foo={'"quoted"'}
+                    nonStandardAttr="attr"
+                    properlyformattednonstandardattr="attr"
+                    // attributes that should be filtered out for violating certain rules
+                    onSomething="this should be removed b/c event handler"
+                    shouldnotincludefunctions={() => {}}
+                    norsymbols={Symbol('foo')}
+                  />
+                </BlockedOn>
+              </Suspense>
+            </div>
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="foo"
+            data-precedence="default"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+            data-foo={'"quoted"'}
+            nonstandardattr="attr"
+            properlyformattednonstandardattr="attr"
+          />
+        </head>
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+    assertConsoleErrorDev([
+      'React does not recognize the `nonStandardAttr` prop on a DOM element. ' +
+        'If you intentionally want it to appear in the DOM as a custom attribute, ' +
+        'spell it as lowercase `nonstandardattr` instead. If you accidentally passed it from a ' +
+        'parent component, remove it from the DOM element.\n' +
+        '    in link (at **)\n' +
+        '    in App (at **)',
+      'Invalid values for props `shouldnotincludefunctions`, `norsymbols` on <link> tag. ' +
+        'Either remove them from the element, or pass a string or number value to keep them in the DOM. ' +
+        'For details, see https://react.dev/link/attribute-behavior \n' +
+        '    in link (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    // Now we flush the stylesheet with the boundary
+    await act(() => {
+      resolveText('unblock');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="foo"
+            data-precedence="default"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+            data-foo={'"quoted"'}
+            nonstandardattr="attr"
+            properlyformattednonstandardattr="attr"
+          />
+          <link
+            rel="stylesheet"
+            href="bar"
+            data-precedence="default"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+            data-foo={'"quoted"'}
+            nonstandardattr="attr"
+            properlyformattednonstandardattr="attr"
+          />
+        </head>
+        <body>
+          <div>loading...</div>
+          <link
+            rel="preload"
+            as="style"
+            href="bar"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+          />
+        </body>
+      </html>,
+    );
+  });
+
+  it('boundary stylesheet resource dependencies hoist to a parent boundary when flushed inline', async () => {
+    await act(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <div>
+              <Suspense fallback="loading A...">
+                <BlockedOn value="unblock">
+                  <AsyncText text="A" />
+                  <link rel="stylesheet" href="A" precedence="A" />
+                  <Suspense fallback="loading AA...">
+                    <AsyncText text="AA" />
+                    <link rel="stylesheet" href="AA" precedence="AA" />
+                    <Suspense fallback="loading AAA...">
+                      <AsyncText text="AAA" />
+                      <link rel="stylesheet" href="AAA" precedence="AAA" />
+                      <Suspense fallback="loading AAAA...">
+                        <AsyncText text="AAAA" />
+                        <link rel="stylesheet" href="AAAA" precedence="AAAA" />
+                      </Suspense>
+                    </Suspense>
+                  </Suspense>
+                </BlockedOn>
+              </Suspense>
+            </div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading A...</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('unblock');
+      resolveText('AAAA');
+      resolveText('AA');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading A...</div>
+          <link rel="preload" as="style" href="A" />
+          <link rel="preload" as="style" href="AA" />
+          <link rel="preload" as="style" href="AAA" />
+          <link rel="preload" as="style" href="AAAA" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('A');
+    });
+    await act(() => {
+      document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
+        const event = document.createEvent('Events');
+        event.initEvent('load', true, true);
+        l.dispatchEvent(event);
+      });
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="A" data-precedence="A" />
+          <link rel="stylesheet" href="AA" data-precedence="AA" />
+        </head>
+        <body>
+          <div>
+            {'A'}
+            {'AA'}
+            {'loading AAA...'}
+          </div>
+          <link rel="preload" as="style" href="A" />
+          <link rel="preload" as="style" href="AA" />
+          <link rel="preload" as="style" href="AAA" />
+          <link rel="preload" as="style" href="AAAA" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('AAA');
+    });
+    await act(() => {
+      document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
+        const event = document.createEvent('Events');
+        event.initEvent('load', true, true);
+        l.dispatchEvent(event);
+      });
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="A" data-precedence="A" />
+          <link rel="stylesheet" href="AA" data-precedence="AA" />
+          <link rel="stylesheet" href="AAA" data-precedence="AAA" />
+          <link rel="stylesheet" href="AAAA" data-precedence="AAAA" />
+        </head>
+        <body>
+          <div>
+            {'A'}
+            {'AA'}
+            {'AAA'}
+            {'AAAA'}
+          </div>
+          <link rel="preload" as="style" href="A" />
+          <link rel="preload" as="style" href="AA" />
+          <link rel="preload" as="style" href="AAA" />
+          <link rel="preload" as="style" href="AAAA" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('always enforces crossOrigin "anonymous" for font preloads', async () => {
+    function App() {
+      ReactDOM.preload('foo', {as: 'font', type: 'font/woff2'});
+      ReactDOM.preload('bar', {as: 'font', crossOrigin: 'foo'});
+      ReactDOM.preload('baz', {as: 'font', crossOrigin: 'use-credentials'});
+      ReactDOM.preload('qux', {as: 'font', crossOrigin: 'anonymous'});
+      return (
+        <html>
+          <head />
+          <body />
+        </html>
+      );
+    }
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="font"
+            href="foo"
+            crossorigin=""
+            type="font/woff2"
+          />
+          <link rel="preload" as="font" href="bar" crossorigin="" />
+          <link rel="preload" as="font" href="baz" crossorigin="" />
+          <link rel="preload" as="font" href="qux" crossorigin="" />
+        </head>
+        <body />
+      </html>,
+    );
+  });
+
+  it('does not hoist anything with an itemprop prop', async () => {
+    function App() {
+      return (
+        <html>
+          <head>
+            <meta itemProp="outside" content="unscoped" />
+            <link itemProp="link" rel="foo" href="foo" />
+            <title itemProp="outside-title">title</title>
+            <link
+              itemProp="outside-stylesheet"
+              rel="stylesheet"
+              href="bar"
+              precedence="default"
+            />
+            <style itemProp="outside-style" href="baz" precedence="default">
+              outside style
+            </style>
+            <script itemProp="outside-script" async={true} src="qux" />
+          </head>
+          <body>
+            <div itemScope={true}>
+              <div>
+                <meta itemProp="inside-meta" content="scoped" />
+                <link itemProp="inside-link" rel="foo" href="foo" />
+                <title itemProp="inside-title">title</title>
+                <link
+                  itemProp="inside-stylesheet"
+                  rel="stylesheet"
+                  href="bar"
+                  precedence="default"
+                />
+                <style itemProp="inside-style" href="baz" precedence="default">
+                  inside style
+                </style>
+                <script itemProp="inside-script" async={true} src="qux" />
+              </div>
+            </div>
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta itemprop="outside" content="unscoped" />
+          <link itemprop="link" rel="foo" href="foo" />
+          <title itemprop="outside-title">title</title>
+          <link
+            itemprop="outside-stylesheet"
+            rel="stylesheet"
+            href="bar"
+            precedence="default"
+          />
+          <style itemprop="outside-style" href="baz" precedence="default">
+            outside style
+          </style>
+          <script itemprop="outside-script" async="" src="qux" />
+        </head>
+        <body>
+          <div itemscope="">
+            <div>
+              <meta itemprop="inside-meta" content="scoped" />
+              <link itemprop="inside-link" rel="foo" href="foo" />
+              <title itemprop="inside-title">title</title>
+              <link
+                itemprop="inside-stylesheet"
+                rel="stylesheet"
+                href="bar"
+                precedence="default"
+              />
+              <style itemprop="inside-style" href="baz" precedence="default">
+                inside style
+              </style>
+              <script itemprop="inside-script" async="" src="qux" />
+            </div>
+          </div>
+        </body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta itemprop="outside" content="unscoped" />
+          <link itemprop="link" rel="foo" href="foo" />
+          <title itemprop="outside-title">title</title>
+          <link
+            itemprop="outside-stylesheet"
+            rel="stylesheet"
+            href="bar"
+            precedence="default"
+          />
+          <style itemprop="outside-style" href="baz" precedence="default">
+            outside style
+          </style>
+          <script itemprop="outside-script" async="" src="qux" />
+        </head>
+        <body>
+          <div itemscope="">
+            <div>
+              <meta itemprop="inside-meta" content="scoped" />
+              <link itemprop="inside-link" rel="foo" href="foo" />
+              <title itemprop="inside-title">title</title>
+              <link
+                itemprop="inside-stylesheet"
+                rel="stylesheet"
+                href="bar"
+                precedence="default"
+              />
+              <style itemprop="inside-style" href="baz" precedence="default">
+                inside style
+              </style>
+              <script itemprop="inside-script" async="" src="qux" />
+            </div>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('warns if you render <meta> tag with itemProp outside <body> or <head>', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <meta itemProp="foo" />
+      </html>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <meta> outside the main document if it has an `itemProp` prop. ' +
+        '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
+        'If you were intending for React to hoist this <meta> remove the `itemProp` prop. ' +
+        'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
+        '    in html (at **)',
+      'In HTML, <meta> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <html>\n' +
+        '>   <meta itemProp="foo">' +
+        '\n' +
+        '\n    in meta (at **)',
+    ]);
+  });
+
+  it('warns if you render a <title> tag with itemProp outside <body> or <head>', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <title itemProp="foo">title</title>
+      </html>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <title> outside the main document if it has an `itemProp` prop. ' +
+        '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
+        'If you were intending for React to hoist this <title> remove the `itemProp` prop. ' +
+        'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
+        '    in html (at **)',
+      'In HTML, <title> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <html>\n' +
+        '>   <title itemProp="foo">' +
+        '\n' +
+        '\n    in title (at **)',
+    ]);
+  });
+
+  it('warns if you render a <style> tag with itemProp outside <body> or <head>', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <style itemProp="foo">style</style>
+      </html>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <style> outside the main document if it has an `itemProp` prop. ' +
+        '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
+        'If you were intending for React to hoist this <style> remove the `itemProp` prop. ' +
+        'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
+        '    in html (at **)',
+      'In HTML, <style> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <html>\n' +
+        '>   <style itemProp="foo">' +
+        '\n' +
+        '\n    in style (at **)',
+    ]);
+  });
+
+  it('warns if you render a <link> tag with itemProp outside <body> or <head>', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <link itemProp="foo" />
+      </html>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <link> outside the main document if it has an `itemProp` prop. ' +
+        '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
+        'If you were intending for React to hoist this <link> remove the `itemProp` prop. ' +
+        'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
+        '    in html (at **)',
+      'In HTML, <link> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <html>\n' +
+        '>   <link itemProp="foo">\n' +
+        '\n' +
+        '    in link (at **)',
+    ]);
+  });
+
+  it('warns if you render a <script> tag with itemProp outside <body> or <head>', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <script itemProp="foo" />
+      </html>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Cannot render a <script> outside the main document if it has an `itemProp` prop. ' +
+        '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
+        'If you were intending for React to hoist this <script> remove the `itemProp` prop. ' +
+        'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
+        '    in html (at **)',
+      'In HTML, <script> cannot be a child of <html>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <html>\n' +
+        '>   <script itemProp="foo">\n' +
+        '\n' +
+        '    in script (at **)',
+    ]);
+  });
+
+  it('can hydrate resources and components in the head and body even if a browser or 3rd party script injects extra html nodes', async () => {
+    // This is a stress test case for hydrating a complex combination of hoistable elements, hoistable resources and host components
+    // in an environment that has been manipulated by 3rd party scripts/extensions to modify the <head> and <body>
+    function App() {
+      return (
+        <>
+          <link rel="foo" href="foo" />
+          <script async={true} src="rendered" />
+          <link rel="stylesheet" href="stylesheet" precedence="default" />
+          <html itemScope={true}>
+            <head>
+              {/* Component */}
+              <link rel="stylesheet" href="stylesheet" />
+              <script src="sync rendered" data-meaningful="" />
+              <style>{'body { background-color: red; }'}</style>
+              <script src="async rendered" async={true} onLoad={() => {}} />
+              <noscript>
+                <meta name="noscript" content="noscript" />
+              </noscript>
+              <link rel="foo" href="foo" onLoad={() => {}} />
+            </head>
+            <body>
+              {/* Component because it has itemProp */}
+              <meta name="foo" content="foo" itemProp="a prop" />
+              {/* regular Hoistable */}
+              <meta name="foo" content="foo" />
+              {/* regular Hoistable */}
+              <title>title</title>
+              <div itemScope={true}>
+                <div>
+                  <div>deep hello</div>
+                  {/* Component because it has itemProp */}
+                  <meta name="foo" content="foo" itemProp="a prop" />
+                </div>
+              </div>
+            </body>
+          </html>
+          <link rel="foo" href="foo" />
+        </>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html itemscope="">
+        <head>
+          {/* Hoisted Resources and elements */}
+          <link rel="stylesheet" href="stylesheet" data-precedence="default" />
+          <script async="" src="rendered" />
+          <link rel="foo" href="foo" />
+          <meta name="foo" content="foo" />
+          <title>title</title>
+          <link rel="foo" href="foo" />
+          {/* rendered host components */}
+          <link rel="stylesheet" href="stylesheet" />
+          <script src="sync rendered" data-meaningful="" />
+          <style>{'body { background-color: red; }'}</style>
+          <script src="async rendered" async="" />
+          <noscript>&lt;meta name="noscript" content="noscript"&gt;</noscript>
+          <link rel="foo" href="foo" />
+        </head>
+        <body>
+          <meta name="foo" content="foo" itemprop="a prop" />
+          <div itemscope="">
+            <div>
+              <div>deep hello</div>
+              <meta name="foo" content="foo" itemprop="a prop" />
+            </div>
+          </div>
+        </body>
+      </html>,
+    );
+
+    // We inject some styles, divs, scripts into the begginning, middle, and end
+    // of the head / body.
+    const injectedStyle = document.createElement('style');
+    injectedStyle.textContent = 'body { background-color: blue; }';
+    document.head.prepend(injectedStyle.cloneNode(true));
+    document.head.appendChild(injectedStyle.cloneNode(true));
+    document.body.prepend(injectedStyle.cloneNode(true));
+    document.body.appendChild(injectedStyle.cloneNode(true));
+
+    const injectedDiv = document.createElement('div');
+    document.head.prepend(injectedDiv);
+    document.head.appendChild(injectedDiv.cloneNode(true));
+    // We do not prepend a <div> in body because this will conflict with hyration
+    // We still mostly hydrate by matchign tag and <div> does not have any attributes to
+    // differentiate between likely-inject and likely-rendered cases. If a <div> is prepended
+    // in the <body> and you render a <div> as the first child of <body> there will be a conflict.
+    // We consider this a rare edge case and even if it does happen the fallback to client rendering
+    // should patch up the DOM correctly
+    document.body.appendChild(injectedDiv.cloneNode(true));
+
+    const injectedScript = document.createElement('script');
+    injectedScript.setAttribute('async', '');
+    injectedScript.setAttribute('src', 'injected');
+    document.head.prepend(injectedScript);
+    document.head.appendChild(injectedScript.cloneNode(true));
+    document.body.prepend(injectedScript.cloneNode(true));
+    document.body.appendChild(injectedScript.cloneNode(true));
+
+    // We hydrate the same App and confirm the output is identical except for the async
+    // script insertion that happens because we do not SSR async scripts with load handlers.
+    // All the extra inject nodes are preset
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html itemscope="">
+        <head>
+          <script async="" src="injected" />
+          <div />
+          <style>{'body { background-color: blue; }'}</style>
+          <link rel="stylesheet" href="stylesheet" data-precedence="default" />
+          <script async="" src="rendered" />
+          <link rel="foo" href="foo" />
+          <meta name="foo" content="foo" />
+          <title>title</title>
+          <link rel="foo" href="foo" />
+          <link rel="stylesheet" href="stylesheet" />
+          <script src="sync rendered" data-meaningful="" />
+          <style>{'body { background-color: red; }'}</style>
+          <script src="async rendered" async="" />
+          <noscript>&lt;meta name="noscript" content="noscript"&gt;</noscript>
+          <link rel="foo" href="foo" />
+          <style>{'body { background-color: blue; }'}</style>
+          <div />
+          <script async="" src="injected" />
+        </head>
+        <body>
+          <script async="" src="injected" />
+          <style>{'body { background-color: blue; }'}</style>
+          <meta name="foo" content="foo" itemprop="a prop" />
+          <div itemscope="">
+            <div>
+              <div>deep hello</div>
+              <meta name="foo" content="foo" itemprop="a prop" />
+            </div>
+          </div>
+          <style>{'body { background-color: blue; }'}</style>
+          <div />
+          <script async="" src="injected" />
+        </body>
+      </html>,
+    );
+
+    // We unmount. The nodes that remain are
+    // 1. Hoisted resources (we don't clean these up on unmount to address races with streaming suspense and navigation)
+    // 2. preloads that are injected to hint the browser to load a resource but are not associated to Fibers directly
+    // 3. Nodes that React skipped over during hydration
+    root.unmount();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <script async="" src="injected" />
+          <div />
+          <style>{'body { background-color: blue; }'}</style>
+          <link rel="stylesheet" href="stylesheet" data-precedence="default" />
+          <script async="" src="rendered" />
+          <style>{'body { background-color: blue; }'}</style>
+          <div />
+          <script async="" src="injected" />
+        </head>
+        <body>
+          <script async="" src="injected" />
+          <style>{'body { background-color: blue; }'}</style>
+          <style>{'body { background-color: blue; }'}</style>
+          <div />
+          <script async="" src="injected" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('does not preload nomodule scripts', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <script src="foo" noModule={true} data-meaningful="" />
+            <script async={true} src="bar" noModule={true} data-meaningful="" />
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <script async="" src="bar" nomodule="" data-meaningful="" />
+        </head>
+        <body>
+          <script src="foo" nomodule="" data-meaningful="" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('can delay commit until css resources load', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    React.startTransition(() => {
+      root.render(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          <div>hello</div>
+        </>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    expect(getMeaningfulChildren(document.head)).toEqual(
+      <link rel="preload" as="style" href="foo" />,
+    );
+
+    loadPreloads();
+    assertLog(['load preload: foo']);
+
+    // We expect that the stylesheet is inserted now but the commit has not happened yet.
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link rel="stylesheet" href="foo" data-precedence="default" />,
+      <link rel="preload" as="style" href="foo" />,
+    ]);
+
+    loadStylesheets();
+    assertLog(['load stylesheet: foo']);
+
+    // We expect that the commit finishes synchronously after the stylesheet loads.
+    expect(getMeaningfulChildren(container)).toEqual(<div>hello</div>);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link rel="stylesheet" href="foo" data-precedence="default" />,
+      <link rel="preload" as="style" href="foo" />,
+    ]);
+  });
+
+  // https://github.com/facebook/react/issues/27585
+  it('does not reinsert already inserted stylesheets during a delayed commit', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <link rel="stylesheet" href="first" precedence="default" />
+            <link rel="stylesheet" href="second" precedence="default" />
+            server
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="first" data-precedence="default" />
+          <link rel="stylesheet" href="second" data-precedence="default" />
+        </head>
+        <body>server</body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.createRoot(document.body);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    root.render(
+      <>
+        <link rel="stylesheet" href="first" precedence="default" />
+        <link rel="stylesheet" href="third" precedence="default" />
+        <div>client</div>
+      </>,
+    );
+    await waitForAll([]);
+    await act(() => {
+      loadPreloads();
+      loadStylesheets();
+    });
+    await assertLog([
+      'load preload: third',
+      'load stylesheet: first',
+      'load stylesheet: second',
+      'load stylesheet: third',
+    ]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="first" data-precedence="default" />
+          <link rel="stylesheet" href="second" data-precedence="default" />
+          <link rel="stylesheet" href="third" data-precedence="default" />
+          <link rel="preload" href="third" as="style" />
+        </head>
+        <body>
+          <div>client</div>
+        </body>
+      </html>,
+    );
+
+    // In a transition we add another reference to an already loaded resource
+    // https://github.com/facebook/react/issues/27585
+    React.startTransition(() => {
+      root.render(
+        <>
+          <link rel="stylesheet" href="first" precedence="default" />
+          <link rel="stylesheet" href="third" precedence="default" />
+          <div>client</div>
+          <link rel="stylesheet" href="first" precedence="default" />
+        </>,
+      );
+    });
+    await waitForAll([]);
+    // In https://github.com/facebook/react/issues/27585 the order updated
+    // to second, third, first
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="first" data-precedence="default" />
+          <link rel="stylesheet" href="second" data-precedence="default" />
+          <link rel="stylesheet" href="third" data-precedence="default" />
+          <link rel="preload" href="third" as="style" />
+        </head>
+        <body>
+          <div>client</div>
+        </body>
+      </html>,
+    );
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can delay commit until css resources error', async () => {
+    // TODO: This test fails and crashes jest. need to figure out why before unskipping.
+    const root = ReactDOMClient.createRoot(container);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    React.startTransition(() => {
+      root.render(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          <link rel="stylesheet" href="bar" precedence="default" />
+          <div>hello</div>
+        </>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link rel="preload" as="style" href="foo" />,
+      <link rel="preload" as="style" href="bar" />,
+    ]);
+
+    loadPreloads(['foo']);
+    errorPreloads(['bar']);
+    assertLog(['load preload: foo', 'error preload: bar']);
+
+    // We expect that the stylesheet is inserted now but the commit has not happened yet.
+    expect(getMeaningfulChildren(container)).toBe(undefined);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link rel="stylesheet" href="foo" data-precedence="default" />,
+      <link rel="stylesheet" href="bar" data-precedence="default" />,
+      <link rel="preload" as="style" href="foo" />,
+      <link rel="preload" as="style" href="bar" />,
+    ]);
+
+    errorStylesheets(['bar']);
+
+    loadStylesheets(['foo']);
+    assertLog(['load stylesheet: foo', 'error stylesheet: bar']);
+
+    // We expect that the commit finishes synchronously after the stylesheet loads.
+    expect(getMeaningfulChildren(container)).toEqual(<div>hello</div>);
+    expect(getMeaningfulChildren(document.head)).toEqual([
+      <link rel="stylesheet" href="foo" data-precedence="default" />,
+      <link rel="stylesheet" href="bar" data-precedence="default" />,
+      <link rel="preload" as="style" href="foo" />,
+      <link rel="preload" as="style" href="bar" />,
+    ]);
+  });
+
+  it('assumes stylesheets that load in the shell loaded already', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            hello
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    let root;
+    React.startTransition(() => {
+      root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            hello
+          </body>
+        </html>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    React.startTransition(() => {
+      root.render(
+        <html>
+          <body>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            hello2
+          </body>
+        </html>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+        </head>
+        <body>hello2</body>
+      </html>,
+    );
+
+    React.startTransition(() => {
+      root.render(
+        <html>
+          <body>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            hello3
+            <link rel="stylesheet" href="bar" precedence="default" />
+          </body>
+        </html>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello2</body>
+      </html>,
+    );
+
+    loadPreloads();
+    assertLog(['load preload: bar']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello2</body>
+      </html>,
+    );
+
+    loadStylesheets(['bar']);
+    assertLog(['load stylesheet: bar']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello3</body>
+      </html>,
+    );
+  });
+
+  it('can interrupt a suspended commit with a new update', async () => {
+    function App({children}) {
+      return (
+        <html>
+          <body>{children}</body>
+        </html>
+      );
+    }
+    const root = ReactDOMClient.createRoot(document);
+
+    // Do an initial render. This means subsequent insertions will suspend,
+    // unless they are wrapped inside a fresh Suspense boundary.
+    root.render(<App />);
+    await waitForAll([]);
+
+    // Insert a stylesheet. This will suspend because it's a transition.
+    React.startTransition(() => {
+      root.render(
+        <App>
+          hello
+          <link rel="stylesheet" href="foo" precedence="default" />
+        </App>,
+      );
+    });
+    await waitForAll([]);
+    // Although the commit suspended, a preload was inserted.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body />
+      </html>,
+    );
+
+    // Before the stylesheet has loaded, do an urgent update. This will insert a
+    // different stylesheet, and cancel the first one. This stylesheet will not
+    // suspend, even though it hasn't loaded, because it's an urgent update.
+    root.render(
+      <App>
+        hello2
+        {null}
+        <link rel="stylesheet" href="bar" precedence="default" />
+      </App>,
+    );
+    await waitForAll([]);
+    await act(() => {
+      loadPreloads(['bar']);
+      loadStylesheets(['bar']);
+    });
+    await assertLog(['load preload: bar', 'load stylesheet: bar']);
+
+    // The bar stylesheet was inserted. There's still a "foo" preload, even
+    // though that update was superseded.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello2</body>
+      </html>,
+    );
+
+    // When "foo" finishes loading, nothing happens, because "foo" was not
+    // included in the last root update. However, if we insert "foo" again
+    // later, it should immediately commit without suspending, because it's
+    // been preloaded.
+    loadPreloads(['foo']);
+    assertLog(['load preload: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello2</body>
+      </html>,
+    );
+
+    // Now insert "foo" again.
+    React.startTransition(() => {
+      root.render(
+        <App>
+          hello3
+          <link rel="stylesheet" href="foo" precedence="default" />
+          <link rel="stylesheet" href="bar" precedence="default" />
+        </App>,
+      );
+    });
+    await waitForAll([]);
+    // Commits without suspending because "foo" was preloaded.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello3</body>
+      </html>,
+    );
+
+    loadStylesheets(['foo']);
+    assertLog(['load stylesheet: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>hello3</body>
+      </html>,
+    );
+  });
+
+  it('will put a Suspense boundary into fallback if it contains a stylesheet not loaded during a sync update', async () => {
+    function App({children}) {
+      return (
+        <html>
+          <body>{children}</body>
+        </html>
+      );
+    }
+    const root = ReactDOMClient.createRoot(document);
+
+    await clientAct(() => {
+      root.render(<App />);
+    });
+    await waitForAll([]);
+
+    await clientAct(() => {
+      root.render(
+        <App>
+          <Suspense fallback="loading...">
+            <div>
+              hello
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </div>
+          </Suspense>
+        </App>,
+      );
+    });
+    await waitForAll([]);
+
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      // Although the commit suspended, a preload was inserted.
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" href="foo" as="style" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+
+      loadPreloads(['foo']);
+      assertLog(['load preload: foo']);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+    }
+
+    loadStylesheets(['foo']);
+    assertLog(['load stylesheet: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>hello</div>
+        </body>
+      </html>,
+    );
+
+    await clientAct(() => {
+      root.render(
+        <App>
+          <Suspense fallback="loading...">
+            <div>
+              hello
+              <link rel="stylesheet" href="foo" precedence="default" />
+              <link rel="stylesheet" href="bar" precedence="default" />
+            </div>
+          </Suspense>
+        </App>,
+      );
+    });
+    await waitForAll([]);
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+            <link rel="preload" href="bar" as="style" />
+          </head>
+          <body>
+            <div style="display: none;">hello</div>loading...
+          </body>
+        </html>,
+      );
+
+      loadPreloads(['bar']);
+      assertLog(['load preload: bar']);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="stylesheet" href="bar" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+            <link rel="preload" href="bar" as="style" />
+          </head>
+          <body>
+            <div style="display: none;">hello</div>loading...
+          </body>
+        </html>,
+      );
+    }
+    loadStylesheets(['bar']);
+    assertLog(['load stylesheet: bar']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </head>
+        <body>
+          <div style="">hello</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('will assume stylesheets already in the document have loaded if it cannot confirm it is not yet loaded', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+          </head>
+          <body>
+            <div id="foo" />
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    const root = ReactDOMClient.createRoot(document.querySelector('#foo'));
+
+    root.render(
+      <div>
+        <Suspense fallback="loading...">
+          <link rel="stylesheet" href="foo" precedence="default" />
+          hello world
+        </Suspense>
+      </div>,
+    );
+
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+        </head>
+        <body>
+          <div id="foo">
+            <div>hello world</div>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('will assume wait for loading stylesheets to load before continuing', async () => {
+    let ssr = true;
+    function Component() {
+      if (ssr) {
+        return null;
+      } else {
+        return (
+          <>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            <div>hello client</div>
+          </>
+        );
+      }
+    }
+
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <div>
+              <Suspense fallback="loading...">
+                <BlockedOn value="reveal">
+                  <link rel="stylesheet" href="foo" precedence="default" />
+                  <div>hello world</div>
+                </BlockedOn>
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback="loading 2...">
+                <Component />
+              </Suspense>
+            </div>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+          <div />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('reveal');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading...</div>
+          <div />
+          <link rel="preload" href="foo" as="style" />
+        </body>
+      </html>,
+    );
+
+    ssr = false;
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <body>
+          <div>
+            <Suspense fallback="loading...">
+              <BlockedOn value="reveal">
+                <link rel="stylesheet" href="foo" precedence="default" />
+                <div>hello world</div>
+              </BlockedOn>
+            </Suspense>
+          </div>
+          <div>
+            <Suspense fallback="loading 2...">
+              <Component />
+            </Suspense>
+          </div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading...</div>
+          <div />
+          <link rel="preload" href="foo" as="style" />
+        </body>
+      </html>,
+    );
+
+    loadStylesheets();
+    assertLog(['load stylesheet: foo']);
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      "Error: Hydration failed because the server rendered HTML didn't match the client. " +
+        'As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n\n' +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\n' +
+        'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\n' +
+        'https://react.dev/link/hydration-mismatch\n\n' +
+        '  <html>\n' +
+        '    <body>\n' +
+        '      <div>\n' +
+        '      <div>\n' +
+        '        <Suspense fallback="loading 2...">\n' +
+        '          <Component>\n' +
+        '            <link>\n' +
+        '+           <div>' +
+        '\n    in <stack>',
+    ]);
+    jest.runAllTimers();
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>hello world</div>
+          </div>
+          <div>
+            <div>hello client</div>
+          </div>
+          <link rel="preload" href="foo" as="style" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('can suspend commits on more than one root for the same resource at the same time', async () => {
+    document.body.innerHTML = '';
+    const container1 = document.createElement('div');
+    const container2 = document.createElement('div');
+    document.body.appendChild(container1);
+    document.body.appendChild(container2);
+
+    const root1 = ReactDOMClient.createRoot(container1);
+    const root2 = ReactDOMClient.createRoot(container2);
+
+    React.startTransition(() => {
+      root1.render(
+        <div>
+          one
+          <link rel="stylesheet" href="foo" precedence="default" />
+          <link rel="stylesheet" href="one" precedence="default" />
+        </div>,
+      );
+    });
+    await waitForAll([]);
+    React.startTransition(() => {
+      root2.render(
+        <div>
+          two
+          <link rel="stylesheet" href="foo" precedence="default" />
+          <link rel="stylesheet" href="two" precedence="default" />
+        </div>,
+      );
+    });
+    await waitForAll([]);
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="one" as="style" />
+          <link rel="preload" href="two" as="style" />
+        </head>
+        <body>
+          <div />
+          <div />
+        </body>
+      </html>,
+    );
+
+    loadPreloads(['foo', 'two']);
+    assertLog(['load preload: foo', 'load preload: two']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="two" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="one" as="style" />
+          <link rel="preload" href="two" as="style" />
+        </head>
+        <body>
+          <div />
+          <div />
+        </body>
+      </html>,
+    );
+
+    loadStylesheets(['foo', 'two']);
+    assertLog(['load stylesheet: foo', 'load stylesheet: two']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="two" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="one" as="style" />
+          <link rel="preload" href="two" as="style" />
+        </head>
+        <body>
+          <div />
+          <div>
+            <div>two</div>
+          </div>
+        </body>
+      </html>,
+    );
+
+    loadPreloads();
+    loadStylesheets();
+    assertLog(['load preload: one', 'load stylesheet: one']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="two" data-precedence="default" />
+          <link rel="stylesheet" href="one" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="one" as="style" />
+          <link rel="preload" href="two" as="style" />
+        </head>
+        <body>
+          <div>
+            <div>one</div>
+          </div>
+          <div>
+            <div>two</div>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('stylesheets block render, with a really long timeout', async () => {
+    function App({children}) {
+      return (
+        <html>
+          <body>{children}</body>
+        </html>
+      );
+    }
+    const root = ReactDOMClient.createRoot(document);
+    root.render(<App />);
+    React.startTransition(() => {
+      root.render(
+        <App>
+          hello
+          <link rel="stylesheet" href="foo" precedence="default" />
+        </App>,
+      );
+    });
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body />
+      </html>,
+    );
+
+    // Advance time by 50 seconds. Even still, the transition is suspended.
+    jest.advanceTimersByTime(50000);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body />
+      </html>,
+    );
+
+    // Advance time by 10 seconds more. A full minute total has elapsed. At this
+    // point, something must have really gone wrong, so we time out and allow
+    // unstyled content to be displayed.
+    jest.advanceTimersByTime(10000);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    // We will load these after the commit finishes to ensure nothing errors and nothing new inserts
+    loadPreloads(['foo']);
+    loadStylesheets(['foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
+  it('can interrupt a suspended commit with a new transition', async () => {
+    function App({children}) {
+      return (
+        <html>
+          <body>{children}</body>
+        </html>
+      );
+    }
+    const root = ReactDOMClient.createRoot(document);
+    root.render(<App>(empty)</App>);
+
+    // Start a transition to "A"
+    React.startTransition(() => {
+      root.render(
+        <App>
+          A
+          <link rel="stylesheet" href="A" precedence="default" />
+        </App>,
+      );
+    });
+    await waitForAll([]);
+
+    // "A" hasn't loaded yet, so we remain on the initial UI. Its preload
+    // has been inserted into the head, though.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="A" as="style" />
+        </head>
+        <body>(empty)</body>
+      </html>,
+    );
+
+    // Interrupt the "A" transition with a new one, "B"
+    React.startTransition(() => {
+      root.render(
+        <App>
+          B
+          <link rel="stylesheet" href="B" precedence="default" />
+        </App>,
+      );
+    });
+    await waitForAll([]);
+
+    // Still on the initial UI because "B" hasn't loaded, but its preload
+    // is now in the head, too.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="A" as="style" />
+          <link rel="preload" href="B" as="style" />
+        </head>
+        <body>(empty)</body>
+      </html>,
+    );
+
+    // Finish loading
+    loadPreloads();
+    loadStylesheets();
+    assertLog(['load preload: A', 'load preload: B', 'load stylesheet: B']);
+    // The "B" transition has finished.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="B" data-precedence="default" />
+          <link rel="preload" href="A" as="style" />
+          <link rel="preload" href="B" as="style" />
+        </head>
+        <body>B</body>
+      </html>,
+    );
+  });
+
+  it('loading a stylesheet as part of an error boundary UI, during initial render', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        const error = this.state.error;
+        if (error !== null) {
+          return (
+            <>
+              <link rel="stylesheet" href="A" precedence="default" />
+              {error.message}
+            </>
+          );
+        }
+        return this.props.children;
+      }
+    }
+
+    function Throws() {
+      throw new Error('Oops!');
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>
+            <ErrorBoundary>
+              <Suspense fallback="Loading...">
+                <Throws />
+              </Suspense>
+            </ErrorBoundary>
+          </body>
+        </html>
+      );
+    }
+
+    // Initial server render. Because something threw, a Suspense fallback
+    // is shown.
+    await act(() => {
+      renderToPipeableStream(<App />, {
+        onError(x) {
+          Scheduler.log('Caught server error: ' + x.message);
+        },
+      }).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>Loading...</body>
+      </html>,
+    );
+    assertLog(['Caught server error: Oops!']);
+
+    // Hydrate the tree. The error boundary will capture the error and attempt
+    // to show an error screen. However, the error screen includes a stylesheet,
+    // so the commit should suspend until the stylesheet loads.
+    ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+
+    // A preload for the stylesheet is inserted, but we still haven't committed
+    // the error screen.
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link as="style" href="A" rel="preload" />
+        </head>
+        <body>Loading...</body>
+      </html>,
+    );
+
+    // Finish loading the stylesheets. The commit should be unblocked, and the
+    // error screen should appear.
+    await clientAct(() => loadStylesheets());
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link data-precedence="default" href="A" rel="stylesheet" />
+          <link as="style" href="A" rel="preload" />
+        </head>
+        <body>Oops!</body>
+      </html>,
+    );
+  });
+
+  it('will not flush a preload for a new rendered Stylesheet Resource if one was already flushed', async () => {
+    function Component() {
+      ReactDOM.preload('foo', {as: 'style'});
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <BlockedOn value="blocked">
+              <link rel="stylesheet" href="foo" precedence="default" />
+              hello
+            </BlockedOn>
+          </Suspense>
+        </div>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <Component />
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="style" href="foo" />
+        </head>
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+    await act(() => {
+      resolveText('blocked');
+    });
+    await act(loadStylesheets);
+    assertLog(['load stylesheet: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="preload" as="style" href="foo" />
+        </head>
+        <body>
+          <div>hello</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('will not flush a preload for a new preinitialized Stylesheet Resource if one was already flushed', async () => {
+    function Component() {
+      ReactDOM.preload('foo', {as: 'style'});
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <BlockedOn value="blocked">
+              <Preinit />
+              hello
+            </BlockedOn>
+          </Suspense>
+        </div>
+      );
+    }
+
+    function Preinit() {
+      ReactDOM.preinit('foo', {as: 'style'});
+    }
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <Component />
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="style" href="foo" />
+        </head>
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+    await act(() => {
+      resolveText('blocked');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="style" href="foo" />
+        </head>
+        <body>
+          <div>hello</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('will not insert a preload if the underlying resource already exists in the Document', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            <script async={true} src="bar" />
+            <link rel="preload" href="baz" as="font" />
+          </head>
+          <body>
+            <div id="container" />
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <script async="" src="bar" />
+          <link rel="preload" href="baz" as="font" />
+        </head>
+        <body>
+          <div id="container" />
+        </body>
+      </html>,
+    );
+
+    container = document.getElementById('container');
+
+    function ClientApp() {
+      ReactDOM.preload('foo', {as: 'style'});
+      ReactDOM.preload('bar', {as: 'script'});
+      ReactDOM.preload('baz', {as: 'font'});
+      return 'foo';
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    await clientAct(() => root.render(<ClientApp />));
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <script async="" src="bar" />
+          <link rel="preload" href="baz" as="font" />
+        </head>
+        <body>
+          <div id="container">foo</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('uses imageSrcSet and imageSizes when keying image preloads', async () => {
+    function App({isClient}) {
+      // Will key off href in absense of imageSrcSet
+      ReactDOM.preload('foo', {as: 'image'});
+      ReactDOM.preload('foo', {as: 'image'});
+
+      // Will key off imageSrcSet + imageSizes
+      ReactDOM.preload('foo', {as: 'image', imageSrcSet: 'fooset'});
+      ReactDOM.preload('foo2', {as: 'image', imageSrcSet: 'fooset'});
+
+      // Will key off imageSrcSet + imageSizes
+      ReactDOM.preload('foo', {
+        as: 'image',
+        imageSrcSet: 'fooset',
+        imageSizes: 'foosizes',
+      });
+      ReactDOM.preload('foo2', {
+        as: 'image',
+        imageSrcSet: 'fooset',
+        imageSizes: 'foosizes',
+      });
+
+      // Will key off href in absense of imageSrcSet, imageSizes is ignored. these should match the
+      // first preloads not not emit a new preload tag
+      ReactDOM.preload('foo', {as: 'image', imageSizes: 'foosizes'});
+      ReactDOM.preload('foo', {as: 'image', imageSizes: 'foosizes'});
+
+      // These preloads are for something that isn't an image
+      // They should all key off the href
+      ReactDOM.preload('bar', {as: 'somethingelse'});
+      ReactDOM.preload('bar', {
+        as: 'somethingelse',
+        imageSrcSet: 'makes no sense',
+      });
+      ReactDOM.preload('bar', {
+        as: 'somethingelse',
+        imageSrcSet: 'makes no sense',
+        imageSizes: 'makes no sense',
+      });
+
+      if (isClient) {
+        // Will key off href in absense of imageSrcSet
+        ReactDOM.preload('client', {as: 'image'});
+        ReactDOM.preload('client', {as: 'image'});
+
+        // Will key off imageSrcSet + imageSizes
+        ReactDOM.preload('client', {as: 'image', imageSrcSet: 'clientset'});
+        ReactDOM.preload('client2', {as: 'image', imageSrcSet: 'clientset'});
+
+        // Will key off imageSrcSet + imageSizes
+        ReactDOM.preload('client', {
+          as: 'image',
+          imageSrcSet: 'clientset',
+          imageSizes: 'clientsizes',
+        });
+        ReactDOM.preload('client2', {
+          as: 'image',
+          imageSrcSet: 'clientset',
+          imageSizes: 'clientsizes',
+        });
+
+        // Will key off href in absense of imageSrcSet, imageSizes is ignored. these should match the
+        // first preloads not not emit a new preload tag
+        ReactDOM.preload('client', {as: 'image', imageSizes: 'clientsizes'});
+        ReactDOM.preload('client', {as: 'image', imageSizes: 'clientsizes'});
+      }
+
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" href="foo" />
+          <link rel="preload" as="image" imagesrcset="fooset" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="fooset"
+            imagesizes="foosizes"
+          />
+          <link rel="preload" as="somethingelse" href="bar" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" href="foo" />
+          <link rel="preload" as="image" imagesrcset="fooset" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="fooset"
+            imagesizes="foosizes"
+          />
+          <link rel="preload" as="somethingelse" href="bar" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    root.render(<App isClient={true} />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" href="foo" />
+          <link rel="preload" as="image" imagesrcset="fooset" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="fooset"
+            imagesizes="foosizes"
+          />
+          <link rel="preload" as="somethingelse" href="bar" />
+          <link rel="preload" as="image" href="client" />
+          <link rel="preload" as="image" imagesrcset="clientset" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="clientset"
+            imagesizes="clientsizes"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
+  it('should handle referrerPolicy on image preload', async () => {
+    function App({isClient}) {
+      ReactDOM.preload('/server', {
+        as: 'image',
+        imageSrcSet: '/server',
+        imageSizes: '100vw',
+        referrerPolicy: 'no-referrer',
+      });
+
+      if (isClient) {
+        ReactDOM.preload('/client', {
+          as: 'image',
+          imageSrcSet: '/client',
+          imageSizes: '100vw',
+          referrerPolicy: 'no-referrer',
+        });
+      }
+
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    root.render(<App isClient={true} />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/client"
+            imagesizes="100vw"
+            referrerpolicy="no-referrer"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
+  it('can emit preloads for non-lazy images that are rendered', async () => {
+    function App() {
+      ReactDOM.preload('script', {as: 'script'});
+      ReactDOM.preload('a', {as: 'image'});
+      ReactDOM.preload('b', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <img src="a" />
+            <img src="b" loading="lazy" />
+            <img src="b2" loading="lazy" />
+            <img src="c" srcSet="srcsetc" />
+            <img src="d" srcSet="srcsetd" sizes="sizesd" />
+            <img src="d" srcSet="srcsetd" sizes="sizesd2" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    // non-lazy images are first, then arbitrary preloads like for the script and lazy images
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="a" as="image" />
+          <link rel="preload" as="image" imagesrcset="srcsetc" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="srcsetd"
+            imagesizes="sizesd"
+          />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="srcsetd"
+            imagesizes="sizesd2"
+          />
+          <link rel="preload" href="script" as="script" />
+          <link rel="preload" href="b" as="image" />
+        </head>
+        <body>
+          <img src="a" />
+          <img src="b" loading="lazy" />
+          <img src="b2" loading="lazy" />
+          <img src="c" srcset="srcsetc" />
+          <img src="d" srcset="srcsetd" sizes="sizesd" />
+          <img src="d" srcset="srcsetd" sizes="sizesd2" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('Does not preload lazy images', async () => {
+    function App() {
+      ReactDOM.preload('a', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <img src="a" fetchPriority="low" />
+            <img src="b" fetchPriority="low" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" href="a" />
+        </head>
+        <body>
+          <img src="a" fetchpriority="low" />
+          <img src="b" fetchpriority="low" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('preloads up to 10 suspensey images as high priority when fetchPriority is not specified', async () => {
+    function App() {
+      ReactDOM.preload('1', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preload('auto', {as: 'image'});
+      ReactDOM.preload('low', {as: 'image', fetchPriority: 'low'});
+      ReactDOM.preload('9', {as: 'image', fetchPriority: 'high'});
+      ReactDOM.preload('10', {as: 'image', fetchPriority: 'high'});
+      return (
+        <html>
+          <body>
+            {/* skipping 1 */}
+            <img src="2" />
+            <img src="3" fetchPriority="auto" />
+            <img src="4" fetchPriority="high" />
+            <img src="5" />
+            <img src="5low" fetchPriority="low" />
+            <img src="6" />
+            <img src="7" />
+            <img src="8" />
+            <img src="9" />
+            {/* skipping 10 */}
+            <img src="11" />
+            <img src="12" fetchPriority="high" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          {/* First we see the preloads calls that made it to the high priority image queue */}
+          <link rel="preload" as="image" href="1" fetchpriority="high" />
+          <link rel="preload" as="image" href="9" fetchpriority="high" />
+          <link rel="preload" as="image" href="10" fetchpriority="high" />
+          {/* Next we see up to 7 more images qualify for high priority image queue */}
+          <link rel="preload" as="image" href="2" />
+          <link rel="preload" as="image" href="3" fetchpriority="auto" />
+          <link rel="preload" as="image" href="4" fetchpriority="high" />
+          <link rel="preload" as="image" href="5" />
+          <link rel="preload" as="image" href="6" />
+          <link rel="preload" as="image" href="7" />
+          <link rel="preload" as="image" href="8" />
+          {/* Next we see images that are explicitly high priority and thus make it to the high priority image queue */}
+          <link rel="preload" as="image" href="12" fetchpriority="high" />
+          {/* Next we see the remaining preloads that did not make it to the high priority image queue */}
+          <link rel="preload" as="image" href="auto" />
+          <link rel="preload" as="image" href="low" fetchpriority="low" />
+          <link rel="preload" as="image" href="11" />
+        </head>
+        <body>
+          {/* skipping 1 */}
+          <img src="2" />
+          <img src="3" fetchpriority="auto" />
+          <img src="4" fetchpriority="high" />
+          <img src="5" />
+          <img src="5low" fetchpriority="low" />
+          <img src="6" />
+          <img src="7" />
+          <img src="8" />
+          <img src="9" />
+          {/* skipping 10 */}
+          <img src="11" />
+          <img src="12" fetchpriority="high" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('can promote images to high priority when at least one instance specifies a high fetchPriority', async () => {
+    function App() {
+      // If a ends up in a higher priority queue than b it will flush first
+      ReactDOM.preload('a', {as: 'image'});
+      ReactDOM.preload('b', {as: 'image'});
+      return (
+        <html>
+          <body>
+            <link rel="stylesheet" href="foo" precedence="default" />
+            <img src="1" />
+            <img src="2" />
+            <img src="3" />
+            <img src="4" />
+            <img src="5" />
+            <img src="6" />
+            <img src="7" />
+            <img src="8" />
+            <img src="9" />
+            <img src="10" />
+            <img src="11" />
+            <img src="12" />
+            <img src="a" fetchPriority="low" />
+            <img src="a" />
+            <img src="a" fetchPriority="high" />
+            <img src="a" />
+            <img src="a" />
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          {/* The First 10 high priority images were just the first 10 rendered images */}
+          <link rel="preload" as="image" href="1" />
+          <link rel="preload" as="image" href="2" />
+          <link rel="preload" as="image" href="3" />
+          <link rel="preload" as="image" href="4" />
+          <link rel="preload" as="image" href="5" />
+          <link rel="preload" as="image" href="6" />
+          <link rel="preload" as="image" href="7" />
+          <link rel="preload" as="image" href="8" />
+          <link rel="preload" as="image" href="9" />
+          <link rel="preload" as="image" href="10" />
+          {/* The "a" image was rendered a few times but since at least one of those was with
+          fetchPriorty="high" it ends up in the high priority queue */}
+          <link rel="preload" as="image" href="a" />
+          {/* Stylesheets come in between high priority images and regular preloads */}
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          {/* The remainig images that preloaded at regular priority */}
+          <link rel="preload" as="image" href="b" />
+          <link rel="preload" as="image" href="11" />
+          <link rel="preload" as="image" href="12" />
+        </head>
+        <body>
+          <img src="1" />
+          <img src="2" />
+          <img src="3" />
+          <img src="4" />
+          <img src="5" />
+          <img src="6" />
+          <img src="7" />
+          <img src="8" />
+          <img src="9" />
+          <img src="10" />
+          <img src="11" />
+          <img src="12" />
+          <img src="a" fetchpriority="low" />
+          <img src="a" />
+          <img src="a" fetchpriority="high" />
+          <img src="a" />
+          <img src="a" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('preloads from rendered images properly use srcSet and sizes', async () => {
+    function App() {
+      ReactDOM.preload('1', {as: 'image', imageSrcSet: 'ss1'});
+      ReactDOM.preload('2', {
+        as: 'image',
+        imageSrcSet: 'ss2',
+        imageSizes: 's2',
+      });
+      return (
+        <html>
+          <body>
+            <img src="1" srcSet="ss1" />
+            <img src="2" srcSet="ss2" sizes="s2" />
+            <img src="3" srcSet="ss3" />
+            <img src="4" srcSet="ss4" sizes="s4" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" imagesrcset="ss1" />
+          <link rel="preload" as="image" imagesrcset="ss2" imagesizes="s2" />
+          <link rel="preload" as="image" imagesrcset="ss3" />
+          <link rel="preload" as="image" imagesrcset="ss4" imagesizes="s4" />
+        </head>
+        <body>
+          <img src="1" srcset="ss1" />
+          <img src="2" srcset="ss2" sizes="s2" />
+          <img src="3" srcset="ss3" />
+          <img src="4" srcset="ss4" sizes="s4" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('should not preload images that have a data URIs for src or srcSet', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <img src="data:1" />
+            <img src="data:2" srcSet="ss2" />
+            <img srcSet="data:3a, data:3b 2x" />
+            <img src="4" srcSet="data:4a, data4b 2x" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <img src="data:1" />
+          <img src="data:2" srcset="ss2" />
+          <img srcset="data:3a, data:3b 2x" />
+          <img src="4" srcset="data:4a, data4b 2x" />
+        </body>
+      </html>,
+    );
+  });
+
+  // https://github.com/vercel/next.js/discussions/54799
+  it('omits preloads when an <img> is inside a <picture>', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <picture>
+              <img src="foo" />
+            </picture>
+            <picture>
+              <source type="image/webp" srcSet="webpsrc" />
+              <img src="jpg fallback" />
+            </picture>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <picture>
+            <img src="foo" />
+          </picture>
+          <picture>
+            <source type="image/webp" srcset="webpsrc" />
+            <img src="jpg fallback" />
+          </picture>
+        </body>
+      </html>,
+    );
+  });
+
+  // Fixes: https://github.com/facebook/react/issues/27910
+  it('omits preloads for images inside noscript tags', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <img src="foo" />
+            <noscript>
+              <img src="bar" />
+            </noscript>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="image" />
+        </head>
+        <body>
+          <img src="foo" />
+          <noscript>&lt;img src="bar"&gt;</noscript>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should handle media on image preload', async () => {
+    function App({isClient}) {
+      ReactDOM.preload('/server', {
+        as: 'image',
+        imageSrcSet: '/server',
+        imageSizes: '100vw',
+        media: 'print and (min-width: 768px)',
+      });
+
+      if (isClient) {
+        ReactDOM.preload('/client', {
+          as: 'image',
+          imageSrcSet: '/client',
+          imageSizes: '100vw',
+          media: 'screen and (max-width: 480px)',
+        });
+      }
+
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            media="print and (min-width: 768px)"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            media="print and (min-width: 768px)"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+
+    root.render(<App isClient={true} />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/server"
+            imagesizes="100vw"
+            media="print and (min-width: 768px)"
+          />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="/client"
+            imagesizes="100vw"
+            media="screen and (max-width: 480px)"
+          />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
+  it('should warn if you preload a stylesheet and then render a style tag with the same href', async () => {
+    const style = 'body { color: red; }';
+    function App() {
+      ReactDOM.preload('foo', {as: 'style'});
+      return (
+        <html>
+          <body>
+            hello
+            <style precedence="default" href="foo">
+              {style}
+            </style>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    assertConsoleErrorDev([
+      'React encountered a hoistable style tag for the same href as a preload: "foo". ' +
+        'When using a style tag to inline styles you should not also preload it as a stylsheet.\n' +
+        '    in style (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <style data-precedence="default" data-href="foo">
+            {style}
+          </style>
+          <link rel="preload" as="style" href="foo" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
+  it('should preload only once even if you discover a stylesheet, script, or moduleScript late', async () => {
+    function App() {
+      // We start with preinitializing some resources first
+      ReactDOM.preinit('shell preinit/shell', {as: 'style'});
+      ReactDOM.preinit('shell preinit/shell', {as: 'script'});
+      ReactDOM.preinitModule('shell preinit/shell', {as: 'script'});
+
+      // We initiate all the shell preloads
+      ReactDOM.preload('shell preinit/shell', {as: 'style'});
+      ReactDOM.preload('shell preinit/shell', {as: 'script'});
+      ReactDOM.preloadModule('shell preinit/shell', {as: 'script'});
+
+      ReactDOM.preload('shell/shell preinit', {as: 'style'});
+      ReactDOM.preload('shell/shell preinit', {as: 'script'});
+      ReactDOM.preloadModule('shell/shell preinit', {as: 'script'});
+
+      ReactDOM.preload('shell/shell render', {as: 'style'});
+      ReactDOM.preload('shell/shell render', {as: 'script'});
+      ReactDOM.preloadModule('shell/shell render');
+
+      ReactDOM.preload('shell/late preinit', {as: 'style'});
+      ReactDOM.preload('shell/late preinit', {as: 'script'});
+      ReactDOM.preloadModule('shell/late preinit');
+
+      ReactDOM.preload('shell/late render', {as: 'style'});
+      ReactDOM.preload('shell/late render', {as: 'script'});
+      ReactDOM.preloadModule('shell/late render');
+
+      // we preinit later ones that should be created by
+      ReactDOM.preinit('shell/shell preinit', {as: 'style'});
+      ReactDOM.preinit('shell/shell preinit', {as: 'script'});
+      ReactDOM.preinitModule('shell/shell preinit');
+
+      ReactDOM.preinit('late/shell preinit', {as: 'style'});
+      ReactDOM.preinit('late/shell preinit', {as: 'script'});
+      ReactDOM.preinitModule('late/shell preinit');
+      return (
+        <html>
+          <body>
+            <link
+              rel="stylesheet"
+              precedence="default"
+              href="shell/shell render"
+            />
+            <script async={true} src="shell/shell render" />
+            <script type="module" async={true} src="shell/shell render" />
+            <link
+              rel="stylesheet"
+              precedence="default"
+              href="late/shell render"
+            />
+            <script async={true} src="late/shell render" />
+            <script type="module" async={true} src="late/shell render" />
+            <Suspense fallback="late...">
+              <BlockedOn value="late">
+                <Late />
+              </BlockedOn>
+            </Suspense>
+            <Suspense fallback="later...">
+              <BlockedOn value="later">
+                <Later />
+              </BlockedOn>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    function Late() {
+      ReactDOM.preload('late/later preinit', {as: 'style'});
+      ReactDOM.preload('late/later preinit', {as: 'script'});
+      ReactDOM.preloadModule('late/later preinit');
+
+      ReactDOM.preload('late/later render', {as: 'style'});
+      ReactDOM.preload('late/later render', {as: 'script'});
+      ReactDOM.preloadModule('late/later render');
+
+      ReactDOM.preload('late/shell preinit', {as: 'style'});
+      ReactDOM.preload('late/shell preinit', {as: 'script'});
+      ReactDOM.preloadModule('late/shell preinit');
+
+      ReactDOM.preload('late/shell render', {as: 'style'});
+      ReactDOM.preload('late/shell render', {as: 'script'});
+      ReactDOM.preloadModule('late/shell render');
+
+      // late preinits don't actually flush so we won't see this in the DOM as a stylesehet but we should see
+      // the preload for this resource
+      ReactDOM.preinit('shell/late preinit', {as: 'style'});
+      ReactDOM.preinit('shell/late preinit', {as: 'script'});
+      ReactDOM.preinitModule('shell/late preinit');
+      return (
+        <>
+          Late
+          <link
+            rel="stylesheet"
+            precedence="default"
+            href="shell/late render"
+          />
+          <script async={true} src="shell/late render" />
+          <script type="module" async={true} src="shell/late render" />
+        </>
+      );
+    }
+
+    function Later() {
+      // late preinits don't actually flush so we won't see this in the DOM as a stylesehet but we should see
+      // the preload for this resource
+      ReactDOM.preinit('late/later preinit', {as: 'style'});
+      ReactDOM.preinit('late/later preinit', {as: 'script'});
+      ReactDOM.preinitModule('late/later preinit');
+      return (
+        <>
+          Later
+          <link
+            rel="stylesheet"
+            precedence="default"
+            href="late/later render"
+          />
+          <script async={true} src="late/later render" />
+          <script type="module" async={true} src="late/later render" />
+        </>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'late...'}
+          {'later...'}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('late');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          {/* FROM HERE */}
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late render"
+          />
+          {/** TO HERE:
+           * This was hoisted by boundary complete instruction. The preload was already emitted in the
+           * shell but we see it below because this was inserted clientside by precedence.
+           * We don't observe the "shell/late preinit" because these do not flush unless they are flushing
+           * with the shell
+           * */}
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'late...'}
+          {'later...'}
+          {/* FROM HERE */}
+          <script async="" src="shell/late preinit" />
+          <script async="" src="shell/late preinit" type="module" />
+          <script async="" src="shell/late render" />
+          <script async="" src="shell/late render" type="module" />
+          <link rel="preload" as="style" href="late/later preinit" />
+          <link rel="preload" as="script" href="late/later preinit" />
+          <link rel="modulepreload" href="late/later preinit" />
+          <link rel="preload" as="style" href="late/later render" />
+          <link rel="preload" as="script" href="late/later render" />
+          <link rel="modulepreload" href="late/later render" />
+          {/** TO HERE:
+           * These resources streamed into the body during the boundary flush. Scripts go first then
+           * preloads according to our streaming queue priorities. Note also that late/shell resources
+           * where the resource already emitted in the shell and the preload is invoked later do not
+           * end up with a preload in the document at all.
+           * */}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('later');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late render"
+          />
+          {/* FROM HERE */}
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/later render"
+          />
+          {/** TO HERE:
+           * This was hoisted by boundary complete instruction. The preload was already emitted in the
+           * shell but we see it below because this was inserted clientside by precedence
+           * We don't observe the "late/later preinit" because these do not flush unless they are flushing
+           * with the shell
+           * */}
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'late...'}
+          {'later...'}
+          <script async="" src="shell/late preinit" />
+          <script async="" src="shell/late preinit" type="module" />
+          <script async="" src="shell/late render" />
+          <script async="" src="shell/late render" type="module" />
+          <link rel="preload" as="style" href="late/later preinit" />
+          <link rel="preload" as="script" href="late/later preinit" />
+          <link rel="modulepreload" href="late/later preinit" />
+          <link rel="preload" as="style" href="late/later render" />
+          <link rel="preload" as="script" href="late/later render" />
+          <link rel="modulepreload" href="late/later render" />
+          {/* FROM HERE */}
+          <script async="" src="late/later preinit" />
+          <script async="" src="late/later preinit" type="module" />
+          <script async="" src="late/later render" />
+          <script async="" src="late/later render" type="module" />
+          {/** TO HERE:
+           * These resources streamed into the body during the boundary flush. Scripts go first then
+           * preloads according to our streaming queue priorities
+           * */}
+        </body>
+      </html>,
+    );
+    loadStylesheets();
+    // Let the styles flush and then flush the boundaries
+    await 0;
+    await 0;
+    jest.runAllTimers();
+    assertLog([
+      'load stylesheet: shell preinit/shell',
+      'load stylesheet: shell/shell preinit',
+      'load stylesheet: late/shell preinit',
+      'load stylesheet: shell/shell render',
+      'load stylesheet: late/shell render',
+      'load stylesheet: shell/late render',
+      'load stylesheet: late/later render',
+    ]);
+
+    ReactDOMClient.hydrateRoot(document, <App />);
+    await waitForAll([]);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell preinit/shell"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/shell render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late render"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/later render"
+          />
+          {/* FROM HERE */}
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="shell/late preinit"
+          />
+          <link
+            rel="stylesheet"
+            data-precedence="default"
+            href="late/later preinit"
+          />
+          {/** TO HERE:
+           * The client render patches in the two missing preinit stylesheets when hydration happens
+           * Note that this is only because we repeated the calls to preinit on the client
+           * */}
+          <script async="" src="shell preinit/shell" />
+          <script async="" src="shell preinit/shell" type="module" />
+          <script async="" src="shell/shell preinit" />
+          <script async="" src="shell/shell preinit" type="module" />
+          <script async="" src="late/shell preinit" />
+          <script async="" src="late/shell preinit" type="module" />
+          <script async="" src="shell/shell render" />
+          <script async="" src="shell/shell render" type="module" />
+          <script async="" src="late/shell render" />
+          <script async="" src="late/shell render" type="module" />
+          <link rel="preload" as="style" href="shell/late preinit" />
+          <link rel="preload" as="script" href="shell/late preinit" />
+          <link rel="modulepreload" href="shell/late preinit" />
+          <link rel="preload" as="style" href="shell/late render" />
+          <link rel="preload" as="script" href="shell/late render" />
+          <link rel="modulepreload" href="shell/late render" />
+        </head>
+        <body>
+          {'Late'}
+          {'Later'}
+          <script async="" src="shell/late preinit" />
+          <script async="" src="shell/late preinit" type="module" />
+          <script async="" src="shell/late render" />
+          <script async="" src="shell/late render" type="module" />
+          <link rel="preload" as="style" href="late/later preinit" />
+          <link rel="preload" as="script" href="late/later preinit" />
+          <link rel="modulepreload" href="late/later preinit" />
+          <link rel="preload" as="style" href="late/later render" />
+          <link rel="preload" as="script" href="late/later render" />
+          <link rel="modulepreload" href="late/later render" />
+          <script async="" src="late/later preinit" />
+          <script async="" src="late/later preinit" type="module" />
+          <script async="" src="late/later render" />
+          <script async="" src="late/later render" type="module" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('does not flush hoistables for fallbacks', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <Suspense
+              fallback={
+                <>
+                  <div>fallback1</div>
+                  <meta name="fallback1" />
+                  <title>foo</title>
+                </>
+              }>
+              <>
+                <div>primary1</div>
+                <meta name="primary1" />
+              </>
+            </Suspense>
+            <Suspense
+              fallback={
+                <>
+                  <div>fallback2</div>
+                  <meta name="fallback2" />
+                  <link rel="foo" href="bar" />
+                </>
+              }>
+              <>
+                <div>primary2</div>
+                <BlockedOn value="first">
+                  <meta name="primary2" />
+                </BlockedOn>
+              </>
+            </Suspense>
+            <Suspense
+              fallback={
+                <>
+                  <div>fallback3</div>
+                  <meta name="fallback3" />
+                  <Suspense fallback="deep">
+                    <div>deep fallback ... primary content</div>
+                    <meta name="deep fallback" />
+                  </Suspense>
+                </>
+              }>
+              <>
+                <div>primary3</div>
+                <BlockedOn value="second">
+                  <meta name="primary3" />
+                </BlockedOn>
+              </>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+      resolveText('first');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta name="primary1" />
+          <meta name="primary2" />
+        </head>
+        <body>
+          <div>primary1</div>
+          <div>primary2</div>
+          <div>fallback3</div>
+          <div>deep fallback ... primary content</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('second');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta name="primary1" />
+          <meta name="primary2" />
+        </head>
+        <body>
+          <div>primary1</div>
+          <div>primary2</div>
+          <div>primary3</div>
+          <meta name="primary3" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('avoids flushing hoistables from completed boundaries nested inside fallbacks', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <Suspense
+              fallback={
+                <Suspense
+                  fallback={
+                    <>
+                      <div>nested fallback1</div>
+                      <meta name="nested fallback1" />
+                    </>
+                  }>
+                  <>
+                    <div>nested primary1</div>
+                    <meta name="nested primary1" />
+                  </>
+                </Suspense>
+              }>
+              <BlockedOn value="release" />
+              <>
+                <div>primary1</div>
+                <meta name="primary1" />
+              </>
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          {/* The primary content hoistables emit */}
+          <meta name="primary1" />
+        </head>
+        <body>
+          {/* The fallback content emits but the hoistables do not even if they
+              inside a nested suspense boundary that is resolved */}
+          <div>nested primary1</div>
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('release');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <meta name="primary1" />
+        </head>
+        <body>
+          <div>primary1</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should never flush hoistables before the preamble', async () => {
+    let resolve;
+    const promise = new Promise(res => {
+      resolve = res;
+    });
+
+    function App() {
+      ReactDOM.preinit('foo', {as: 'script'});
+      React.use(promise);
+      return (
+        <html>
+          <body>hello</body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    // we assert the default JSDOM still in tact
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div id="container" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolve();
+    });
+
+    // we assert the DOM was replaced entirely because we streamed an opening html tag
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <script async="" src="foo" />
+        </head>
+        <body>hello</body>
+      </html>,
+    );
+  });
+
+  describe('ReactDOM.prefetchDNS(href)', () => {
+    it('creates a dns-prefetch resource when called', async () => {
+      function App({url}) {
+        ReactDOM.prefetchDNS(url);
+        ReactDOM.prefetchDNS(url);
+        ReactDOM.prefetchDNS(url, {});
+        ReactDOM.prefetchDNS(url, {crossOrigin: 'use-credentials'});
+        return (
+          <html>
+            <body>hello world</body>
+          </html>
+        );
+      }
+
+      await act(() => {
+        renderToPipeableStream(<App url="foo" />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
+          'but encountered something with type "object" as a second argument instead. ' +
+          'This argument is reserved for future options and is currently disallowed. ' +
+          'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
+          '    in App (at **)',
+        'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
+          'but encountered something with type "object" as a second argument instead. ' +
+          'This argument is reserved for future options and is currently disallowed. ' +
+          'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
+          'Browsers do not perform DNS queries using CORS and setting this attribute ' +
+          'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
+          'a single string argument, `href`.\n' +
+          '    in App (at **)',
+      ]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="dns-prefetch" href="foo" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(document, <App url="foo" />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
+          'but encountered something with type "object" as a second argument instead. ' +
+          'This argument is reserved for future options and is currently disallowed. ' +
+          'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
+          '    in App (at **)',
+        'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
+          'but encountered something with type "object" as a second argument instead. ' +
+          'This argument is reserved for future options and is currently disallowed. ' +
+          'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
+          'Browsers do not perform DNS queries using CORS and setting this attribute ' +
+          'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
+          'a single string argument, `href`.\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="dns-prefetch" href="foo" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+
+      root.render(<App url="bar" />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
+          'but encountered something with type "object" as a second argument instead. ' +
+          'This argument is reserved for future options and is currently disallowed. ' +
+          'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
+          '    in App (at **)',
+        'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
+          'but encountered something with type "object" as a second argument instead. ' +
+          'This argument is reserved for future options and is currently disallowed. ' +
+          'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
+          'Browsers do not perform DNS queries using CORS and setting this attribute ' +
+          'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
+          'a single string argument, `href`.\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="dns-prefetch" href="foo" />
+            <link rel="dns-prefetch" href="bar" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+    });
+  });
+
+  it('does not wait for stylesheets of completed fallbacks', async () => {
+    function Unblock({value}) {
+      resolveText(value);
+      return null;
+    }
+    function App() {
+      return (
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              <div>hello world</div>
+              <BlockedOn value="unblock inner boundaries">
+                <Suspense
+                  fallback={
+                    <>
+                      <link
+                        rel="stylesheet"
+                        href="completed inner"
+                        precedence="default"
+                      />
+                      <div>inner fallback</div>
+                      <Unblock value="completed inner" />
+                    </>
+                  }>
+                  <BlockedOn value="completed inner" />
+                  <div>inner boundary</div>
+                </Suspense>
+                <Suspense
+                  fallback={
+                    <>
+                      <link
+                        rel="stylesheet"
+                        href="in fallback inner"
+                        precedence="default"
+                      />
+                      <div>inner blocked fallback</div>
+                    </>
+                  }>
+                  <BlockedOn value="in fallback inner" />
+                  <div>inner blocked boundary</div>
+                </Suspense>
+              </BlockedOn>
+              <BlockedOn value="complete root" />
+            </Suspense>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>loading...</body>
+      </html>,
+    );
+
+    await act(async () => {
+      resolveText('unblock inner boundaries');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          loading...
+          <link rel="preload" href="completed inner" as="style" />
+          <link rel="preload" href="in fallback inner" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('completed inner');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          loading...
+          <link rel="preload" href="completed inner" as="style" />
+          <link rel="preload" href="in fallback inner" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('complete root');
+    });
+    await act(() => {
+      loadStylesheets();
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="in fallback inner"
+            data-precedence="default"
+          />
+        </head>
+        <body>
+          <div>hello world</div>
+          <div>inner boundary</div>
+          <div>inner blocked fallback</div>
+          <link rel="preload" href="completed inner" as="style" />
+          <link rel="preload" href="in fallback inner" as="style" />
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('delays "forwards" SuspenseList rows until the css of previous rows have completed', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              <SuspenseList revealOrder="forwards" tail="visible">
+                <Suspense fallback="loading foo...">
+                  <BlockedOn value="foo">
+                    <link rel="stylesheet" href="foo" precedence="foo" />
+                    foo
+                  </BlockedOn>
+                </Suspense>
+                <Suspense fallback="loading bar...">bar</Suspense>
+                <BlockedOn value="bar">
+                  <Suspense fallback="loading baz...">
+                    <BlockedOn value="baz">baz</BlockedOn>
+                  </Suspense>
+                </BlockedOn>
+              </SuspenseList>
+            </Suspense>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>loading...</body>
+      </html>,
+    );
+
+    // unblock css loading
+    await act(() => {
+      resolveText('foo');
+    });
+
+    // bar is still blocking the whole list
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'loading...'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+
+    // unblock inner loading states
+    await act(() => {
+      resolveText('bar');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+          {'loading baz...'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+
+    // resolve the last boundary
+    await act(() => {
+      resolveText('baz');
+    });
+
+    // still blocked on the css of the first row
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+          {'loading baz...'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      loadStylesheets();
+    });
+    await assertLog(['load stylesheet: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'foo'}
+          {'bar'}
+          {'baz'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('delays "together" SuspenseList rows until the css of previous rows have completed', async () => {
+    await act(() => {
+      renderToPipeableStream(
+        <html>
+          <body>
+            <SuspenseList revealOrder="together">
+              <Suspense fallback="loading foo...">
+                <BlockedOn value="foo">
+                  <link rel="stylesheet" href="foo" precedence="foo" />
+                  foo
+                </BlockedOn>
+              </Suspense>
+              <Suspense fallback="loading bar...">bar</Suspense>
+            </SuspenseList>
+          </body>
+        </html>,
+      ).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('foo');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      loadStylesheets();
+    });
+    await assertLog(['load stylesheet: foo']);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'foo'}
+          {'bar'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+  });
+
+  describe('ReactDOM.preconnect(href, { crossOrigin })', () => {
+    it('creates a preconnect resource when called', async () => {
+      function App({url}) {
+        ReactDOM.preconnect(url);
+        ReactDOM.preconnect(url);
+        ReactDOM.preconnect(url, {crossOrigin: true});
+        ReactDOM.preconnect(url, {crossOrigin: ''});
+        ReactDOM.preconnect(url, {crossOrigin: 'anonymous'});
+        ReactDOM.preconnect(url, {crossOrigin: 'use-credentials'});
+        return (
+          <html>
+            <body>hello world</body>
+          </html>
+        );
+      }
+
+      await act(() => {
+        renderToPipeableStream(<App url="foo" />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) ' +
+          'to be a string but encountered something with type "boolean" instead. ' +
+          'Try removing this option or passing a string value instead.\n' +
+          '    in App (at **)',
+      ]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preconnect" href="foo" />
+            <link rel="preconnect" href="foo" crossorigin="" />
+            <link rel="preconnect" href="foo" crossorigin="use-credentials" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(document, <App url="foo" />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) ' +
+          'to be a string but encountered something with type "boolean" instead. ' +
+          'Try removing this option or passing a string value instead.\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preconnect" href="foo" />
+            <link rel="preconnect" href="foo" crossorigin="" />
+            <link rel="preconnect" href="foo" crossorigin="use-credentials" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+
+      root.render(<App url="bar" />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) ' +
+          'to be a string but encountered something with type "boolean" instead. ' +
+          'Try removing this option or passing a string value instead.\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preconnect" href="foo" />
+            <link rel="preconnect" href="foo" crossorigin="" />
+            <link rel="preconnect" href="foo" crossorigin="use-credentials" />
+            <link rel="preconnect" href="bar" />
+            <link rel="preconnect" href="bar" crossorigin="" />
+            <link rel="preconnect" href="bar" crossorigin="use-credentials" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+    });
+  });
+
+  describe('ReactDOM.preload(href, { as: ... })', () => {
+    it('creates a preload resource when called', async () => {
+      function App() {
+        ReactDOM.preload('foo', {as: 'style'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="blocked">
+                  <Component />
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+      function Component() {
+        ReactDOM.preload('bar', {as: 'script'});
+        return <div>hello</div>;
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" href="foo" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('blocked');
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" href="foo" />
+          </head>
+          <body>
+            <div>hello</div>
+            <link rel="preload" as="script" href="bar" />
+          </body>
+        </html>,
+      );
+
+      function ClientApp() {
+        ReactDOM.preload('foo', {as: 'style'});
+        ReactDOM.preload('font', {as: 'font', type: 'font/woff2'});
+        React.useInsertionEffect(() => ReactDOM.preload('bar', {as: 'script'}));
+        React.useLayoutEffect(() => ReactDOM.preload('baz', {as: 'font'}));
+        React.useEffect(() => ReactDOM.preload('qux', {as: 'style'}));
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <div>hello</div>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+      ReactDOMClient.hydrateRoot(document, <ClientApp />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" href="foo" />
+            <link
+              rel="preload"
+              as="font"
+              href="font"
+              crossorigin=""
+              type="font/woff2"
+            />
+            <link rel="preload" as="font" href="baz" crossorigin="" />
+            <link rel="preload" as="style" href="qux" />
+          </head>
+          <body>
+            <div>hello</div>
+            <link rel="preload" as="script" href="bar" />
+          </body>
+        </html>,
+      );
+    });
+
+    it('can seed connection props for stylesheet and script resources', async () => {
+      function App() {
+        ReactDOM.preload('foo', {
+          as: 'style',
+          crossOrigin: 'use-credentials',
+          integrity: 'some hash',
+          fetchPriority: 'low',
+        });
+        return (
+          <html>
+            <body>
+              <div>hello</div>
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </body>
+          </html>
+        );
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="foo"
+              data-precedence="default"
+              crossorigin="use-credentials"
+              integrity="some hash"
+            />
+          </head>
+          <body>
+            <div>hello</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('warns if you do not pass in a valid href argument or options argument', async () => {
+      function App() {
+        ReactDOM.preload();
+        ReactDOM.preload('');
+        ReactDOM.preload('foo', null);
+        ReactDOM.preload('foo', {});
+        ReactDOM.preload('foo', {as: 'foo'});
+        return <div>foo</div>;
+      }
+
+      await act(() => {
+        renderToPipeableStream(<App />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
+          '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
+          'The `href` argument encountered was `undefined`. ' +
+          'The `options` argument encountered was `undefined`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
+          '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
+          'The `href` argument encountered was an empty string. ' +
+          'The `options` argument encountered was `undefined`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
+          '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
+          'The `options` argument encountered was `null`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
+          '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
+          'The `as` option encountered was `undefined`.\n' +
+          '    in App (at **)',
+      ]);
+    });
+
+    it('supports fetchPriority', async () => {
+      function Component({isServer}) {
+        ReactDOM.preload(isServer ? 'highserver' : 'highclient', {
+          as: 'script',
+          fetchPriority: 'high',
+        });
+        ReactDOM.preload(isServer ? 'lowserver' : 'lowclient', {
+          as: 'style',
+          fetchPriority: 'low',
+        });
+        ReactDOM.preload(isServer ? 'autoserver' : 'autoclient', {
+          as: 'style',
+          fetchPriority: 'auto',
+        });
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Component isServer={true} />
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="preload"
+              as="script"
+              href="highserver"
+              fetchpriority="high"
+            />
+            <link
+              rel="preload"
+              as="style"
+              href="lowserver"
+              fetchpriority="low"
+            />
+            <link
+              rel="preload"
+              as="style"
+              href="autoserver"
+              fetchpriority="auto"
+            />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <Component />
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="preload"
+              as="script"
+              href="highserver"
+              fetchpriority="high"
+            />
+            <link
+              rel="preload"
+              as="style"
+              href="lowserver"
+              fetchpriority="low"
+            />
+            <link
+              rel="preload"
+              as="style"
+              href="autoserver"
+              fetchpriority="auto"
+            />
+            <link
+              rel="preload"
+              as="script"
+              href="highclient"
+              fetchpriority="high"
+            />
+            <link
+              rel="preload"
+              as="style"
+              href="lowclient"
+              fetchpriority="low"
+            />
+            <link
+              rel="preload"
+              as="style"
+              href="autoclient"
+              fetchpriority="auto"
+            />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+    it('supports nonce', async () => {
+      function App({url}) {
+        ReactDOM.preload(url, {as: 'script', nonce: 'abc'});
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(<App url="server" />).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <div id="container">
+              <link rel="preload" as="script" href="server" nonce="abc" />
+              hello
+            </div>
+          </body>
+        </html>,
+      );
+
+      ReactDOMClient.hydrateRoot(container, <App url="client" />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="script" href="client" nonce="abc" />
+          </head>
+          <body>
+            <div id="container">
+              <link rel="preload" as="script" href="server" nonce="abc" />
+              hello
+            </div>
+          </body>
+        </html>,
+      );
+    });
+  });
+
+  describe('ReactDOM.preloadModule(href, options)', () => {
+    it('preloads scripts as modules', async () => {
+      function App({ssr}) {
+        const prefix = ssr ? 'ssr ' : 'browser ';
+        ReactDOM.preloadModule(prefix + 'plain');
+        ReactDOM.preloadModule(prefix + 'default', {as: 'script'});
+        ReactDOM.preloadModule(prefix + 'cors', {
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preloadModule(prefix + 'integrity', {integrity: 'some hash'});
+        ReactDOM.preloadModule(prefix + 'serviceworker', {as: 'serviceworker'});
+        return <div>hello</div>;
+      }
+      await act(() => {
+        renderToPipeableStream(<App ssr={true} />).pipe(writable);
+      });
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <link rel="modulepreload" href="ssr plain" />
+          <link rel="modulepreload" href="ssr default" />
+          <link
+            rel="modulepreload"
+            href="ssr cors"
+            crossorigin="use-credentials"
+          />
+          <link
+            rel="modulepreload"
+            href="ssr integrity"
+            integrity="some hash"
+          />
+          <link
+            rel="modulepreload"
+            href="ssr serviceworker"
+            as="serviceworker"
+          />
+          <div>hello</div>
+        </div>,
+      );
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="modulepreload" href="browser plain" />
+            <link rel="modulepreload" href="browser default" />
+            <link
+              rel="modulepreload"
+              href="browser cors"
+              crossorigin="use-credentials"
+            />
+            <link
+              rel="modulepreload"
+              href="browser integrity"
+              integrity="some hash"
+            />
+            <link
+              rel="modulepreload"
+              href="browser serviceworker"
+              as="serviceworker"
+            />
+          </head>
+          <body>
+            <div id="container">
+              <link rel="modulepreload" href="ssr plain" />
+              <link rel="modulepreload" href="ssr default" />
+              <link
+                rel="modulepreload"
+                href="ssr cors"
+                crossorigin="use-credentials"
+              />
+              <link
+                rel="modulepreload"
+                href="ssr integrity"
+                integrity="some hash"
+              />
+              <link
+                rel="modulepreload"
+                href="ssr serviceworker"
+                as="serviceworker"
+              />
+              <div>hello</div>
+            </div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('warns if you provide invalid arguments', async () => {
+      function App() {
+        ReactDOM.preloadModule();
+        ReactDOM.preloadModule(() => {});
+        ReactDOM.preloadModule('');
+        ReactDOM.preloadModule('1', true);
+        ReactDOM.preloadModule('2', {as: true});
+        return <div>hello</div>;
+      }
+      await act(() => {
+        renderToPipeableStream(<App />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
+          'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `href` argument encountered was `undefined`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
+          'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `href` argument encountered was something with type "function".\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
+          'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `href` argument encountered was an empty string.\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
+          'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `options` argument encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally,' +
+          ' an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `as` option encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <link rel="modulepreload" href="1" />
+          <link rel="modulepreload" href="2" />
+          <div>hello</div>
+        </div>,
+      );
+
+      const root = ReactDOMClient.createRoot(
+        document.getElementById('container'),
+      );
+      root.render(<App />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
+          'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `href` argument encountered was `undefined`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
+          'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `href` argument encountered was something with type "function".\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
+          '`options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `href` argument encountered was an empty string.\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
+          '`options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `options` argument encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
+          '`options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
+          'The `as` option encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+      ]);
+    });
+  });
+
+  describe('ReactDOM.preinit(href, { as: ... })', () => {
+    it('creates a stylesheet resource when ReactDOM.preinit(..., {as: "style" }) is called', async () => {
+      function App() {
+        ReactDOM.preinit('foo', {as: 'style'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="bar">
+                  <Component />
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+
+      function Component() {
+        ReactDOM.preinit('bar', {as: 'style'});
+        return <div>hello</div>;
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('bar');
+      });
+      // The reason we do not see the "bar" stylesheet here is that ReactDOM.preinit is not about
+      // encoding a resource dependency but is a hint that a resource will be used in the near future.
+      // If we call preinit on the server after the shell has flushed the best we can do is emit a preload
+      // because any flushing suspense boundaries are not actually dependent on that resource and we don't
+      // want to delay reveal based on when that resource loads.
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+          </head>
+          <body>
+            <div>hello</div>
+            <link rel="preload" href="bar" as="style" />
+          </body>
+        </html>,
+      );
+
+      function ClientApp() {
+        ReactDOM.preinit('bar', {as: 'style'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <div>hello</div>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+
+      ReactDOMClient.hydrateRoot(document, <ClientApp />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="stylesheet" href="bar" data-precedence="default" />
+          </head>
+          <body>
+            <div>hello</div>
+            <link rel="preload" href="bar" as="style" />
+          </body>
+        </html>,
+      );
+    });
+
+    it('creates a stylesheet resource in the ownerDocument when ReactDOM.preinit(..., {as: "style" }) is called outside of render on the client', async () => {
+      function App() {
+        React.useEffect(() => {
+          ReactDOM.preinit('foo', {as: 'style'});
+        }, []);
+        return (
+          <html>
+            <body>foo</body>
+          </html>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(document);
+      root.render(<App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+    });
+
+    it('creates a stylesheet resource in the ownerDocument when ReactDOM.preinit(..., {as: "style" }) is called in shadowRoot', async () => {
+      // This is testing behavior, but it shows that it is not a good idea to preinit inside a shadowRoot. The point is we are asserting a behavior
+      // you would want to avoid in a real app.
+      const shadow = document.body.attachShadow({mode: 'open'});
+      function ShadowComponent() {
+        ReactDOM.preinit('bar', {as: 'style'});
+        return null;
+      }
+      function App() {
+        React.useEffect(() => {
+          ReactDOM.preinit('foo', {as: 'style'});
+        }, []);
+        return (
+          <html>
+            <body>
+              foo
+              {ReactDOM.createPortal(
+                <div>
+                  <ShadowComponent />
+                  shadow
+                </div>,
+                shadow,
+              )}
+            </body>
+          </html>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(document);
+      root.render(<App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="bar" data-precedence="default" />
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+      expect(getMeaningfulChildren(shadow)).toEqual(<div>shadow</div>);
+    });
+
+    it('creates a script resource when ReactDOM.preinit(..., {as: "script" }) is called', async () => {
+      function App() {
+        ReactDOM.preinit('foo', {as: 'script'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="bar">
+                  <Component />
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+
+      function Component() {
+        ReactDOM.preinit('bar', {as: 'script'});
+        return <div>hello</div>;
+      }
+
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('bar');
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" />
+          </head>
+          <body>
+            <div>hello</div>
+            <script async="" src="bar" />
+          </body>
+        </html>,
+      );
+
+      function ClientApp() {
+        ReactDOM.preinit('bar', {as: 'script'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <div>hello</div>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+
+      ReactDOMClient.hydrateRoot(document, <ClientApp />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" />
+          </head>
+          <body>
+            <div>hello</div>
+            <script async="" src="bar" />
+          </body>
+        </html>,
+      );
+    });
+
+    it('creates a script resource when ReactDOM.preinit(..., {as: "script" }) is called outside of render on the client', async () => {
+      function App() {
+        React.useEffect(() => {
+          ReactDOM.preinit('foo', {as: 'script'});
+        }, []);
+        return (
+          <html>
+            <body>foo</body>
+          </html>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(document);
+      root.render(<App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+    });
+
+    it('warns if you do not pass in a valid href argument or options argument', async () => {
+      function App() {
+        ReactDOM.preinit();
+        ReactDOM.preinit('');
+        ReactDOM.preinit('foo', null);
+        ReactDOM.preinit('foo', {});
+        ReactDOM.preinit('foo', {as: 'foo'});
+        return <div>foo</div>;
+      }
+
+      await act(() => {
+        renderToPipeableStream(<App />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string ' +
+          'but encountered `undefined` instead.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string ' +
+          'but encountered an empty string instead.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` ' +
+          'property describing the type of resource to be preinitialized but encountered `null` instead.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain ' +
+          'a valid value describing the type of resource to be preinitialized but encountered `undefined` instead. ' +
+          'Valid values for `as` are "style" and "script".\n' +
+          '    in App (at **)',
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain ' +
+          'a valid value describing the type of resource to be preinitialized but encountered "foo" instead. ' +
+          'Valid values for `as` are "style" and "script".\n' +
+          '    in App (at **)',
+      ]);
+    });
+
+    it('accepts a `nonce` option for `as: "script"`', async () => {
+      function Component({src}) {
+        ReactDOM.preinit(src, {as: 'script', nonce: 'R4nD0m'});
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Component src="foo" />
+            </body>
+          </html>,
+          {
+            nonce: 'R4nD0m',
+          },
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" nonce="R4nD0m" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+
+      await clientAct(() => {
+        ReactDOMClient.hydrateRoot(
+          document,
+          <html>
+            <body>
+              <Component src="bar" />
+            </body>
+          </html>,
+        );
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" nonce="R4nD0m" />
+            <script async="" src="bar" nonce="R4nD0m" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+    it('accepts an `integrity` option for `as: "script"`', async () => {
+      function Component({src, hash}) {
+        ReactDOM.preinit(src, {as: 'script', integrity: hash});
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Component src="foo" hash="foo hash" />
+            </body>
+          </html>,
+          {
+            nonce: 'R4nD0m',
+          },
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" integrity="foo hash" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+
+      await clientAct(() => {
+        ReactDOMClient.hydrateRoot(
+          document,
+          <html>
+            <body>
+              <Component src="bar" hash="bar hash" />
+            </body>
+          </html>,
+        );
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" integrity="foo hash" />
+            <script async="" src="bar" integrity="bar hash" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+    it('accepts an `integrity` option for `as: "style"`', async () => {
+      function Component({src, hash}) {
+        ReactDOM.preinit(src, {as: 'style', integrity: hash});
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Component src="foo" hash="foo hash" />
+            </body>
+          </html>,
+          {
+            nonce: 'R4nD0m',
+          },
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="foo"
+              integrity="foo hash"
+              data-precedence="default"
+            />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+      await clientAct(() => {
+        ReactDOMClient.hydrateRoot(
+          document,
+          <html>
+            <body>
+              <Component src="bar" hash="bar hash" />
+            </body>
+          </html>,
+        );
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="foo"
+              integrity="foo hash"
+              data-precedence="default"
+            />
+            <link
+              rel="stylesheet"
+              href="bar"
+              integrity="bar hash"
+              data-precedence="default"
+            />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+    it('supports fetchPriority', async () => {
+      function Component({isServer}) {
+        ReactDOM.preinit(isServer ? 'highserver' : 'highclient', {
+          as: 'script',
+          fetchPriority: 'high',
+        });
+        ReactDOM.preinit(isServer ? 'lowserver' : 'lowclient', {
+          as: 'style',
+          fetchPriority: 'low',
+        });
+        ReactDOM.preinit(isServer ? 'autoserver' : 'autoclient', {
+          as: 'style',
+          fetchPriority: 'auto',
+        });
+        return 'hello';
+      }
+
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Component isServer={true} />
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="lowserver"
+              fetchpriority="low"
+              data-precedence="default"
+            />
+            <link
+              rel="stylesheet"
+              href="autoserver"
+              fetchpriority="auto"
+              data-precedence="default"
+            />
+            <script async="" src="highserver" fetchpriority="high" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <Component />
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="lowserver"
+              fetchpriority="low"
+              data-precedence="default"
+            />
+            <link
+              rel="stylesheet"
+              href="autoserver"
+              fetchpriority="auto"
+              data-precedence="default"
+            />
+            <link
+              rel="stylesheet"
+              href="lowclient"
+              fetchpriority="low"
+              data-precedence="default"
+            />
+            <link
+              rel="stylesheet"
+              href="autoclient"
+              fetchpriority="auto"
+              data-precedence="default"
+            />
+            <script async="" src="highserver" fetchpriority="high" />
+            <script async="" src="highclient" fetchpriority="high" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+  });
+
+  describe('ReactDOM.preinitModule(href, options)', () => {
+    it('creates a script module resources', async () => {
+      function App({ssr}) {
+        const prefix = ssr ? 'ssr ' : 'browser ';
+        ReactDOM.preinitModule(prefix + 'plain');
+        ReactDOM.preinitModule(prefix + 'default', {as: 'script'});
+        ReactDOM.preinitModule(prefix + 'cors', {
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preinitModule(prefix + 'integrity', {integrity: 'some hash'});
+        ReactDOM.preinitModule(prefix + 'warning', {as: 'style'});
+        return <div>hello</div>;
+      }
+      await act(() => {
+        renderToPipeableStream(<App ssr={true} />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `as` option encountered was "style".\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <script type="module" src="ssr plain" async="" />
+          <script type="module" src="ssr default" async="" />
+          <script
+            type="module"
+            src="ssr cors"
+            crossorigin="use-credentials"
+            async=""
+          />
+          <script
+            type="module"
+            src="ssr integrity"
+            integrity="some hash"
+            async=""
+          />
+          <div>hello</div>
+        </div>,
+      );
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `as` option encountered was "style".\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script type="module" src="browser plain" async="" />
+            <script type="module" src="browser default" async="" />
+            <script
+              type="module"
+              src="browser cors"
+              crossorigin="use-credentials"
+              async=""
+            />
+            <script
+              type="module"
+              src="browser integrity"
+              integrity="some hash"
+              async=""
+            />
+          </head>
+          <body>
+            <div id="container">
+              <script type="module" src="ssr plain" async="" />
+              <script type="module" src="ssr default" async="" />
+              <script
+                type="module"
+                src="ssr cors"
+                crossorigin="use-credentials"
+                async=""
+              />
+              <script
+                type="module"
+                src="ssr integrity"
+                integrity="some hash"
+                async=""
+              />
+              <div>hello</div>
+            </div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('warns if you provide invalid arguments', async () => {
+      function App() {
+        ReactDOM.preinitModule();
+        ReactDOM.preinitModule(() => {});
+        ReactDOM.preinitModule('');
+        ReactDOM.preinitModule('1', true);
+        ReactDOM.preinitModule('2', {as: true});
+        return <div>hello</div>;
+      }
+      await act(() => {
+        renderToPipeableStream(<App />).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `href` argument encountered was `undefined`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `href` argument encountered was something with type "function".\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `href` argument encountered was an empty string.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `options` argument encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `as` option encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+      ]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div id="container">
+          <div>hello</div>
+        </div>,
+      );
+
+      const root = ReactDOMClient.createRoot(
+        document.getElementById('container'),
+      );
+      root.render(<App />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `href` argument encountered was `undefined`.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `href` argument encountered was something with type "function".\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `href` argument encountered was an empty string.\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `options` argument encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
+          'string and, optionally, an `options` object with a valid `as` property. ' +
+          'The `as` option encountered was something with type "boolean".\n' +
+          '    in App (at **)',
+      ]);
+    });
+  });
+
+  describe('Stylesheet Resources', () => {
+    it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when server rendering', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="aresource" precedence="foo" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="aresource" data-precedence="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when client rendering', async () => {
+      const root = ReactDOMClient.createRoot(document);
+      root.render(
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="aresource" precedence="foo" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog([
+        'load preload: aresource',
+        'load stylesheet: aresource',
+      ]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="aresource" data-precedence="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when hydrating', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="aresource" precedence="foo" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="aresource" precedence="foo" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="aresource" data-precedence="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('hoists stylesheet resources to the correct precedence', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="foo1" precedence="foo" />
+              <link rel="stylesheet" href="default1" precedence="default" />
+              <link rel="stylesheet" href="foo2" precedence="foo" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo1" data-precedence="foo" />
+            <link rel="stylesheet" href="foo2" data-precedence="foo" />
+            <link rel="stylesheet" href="default1" data-precedence="default" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="bar1" precedence="bar" />
+            <link rel="stylesheet" href="foo3" precedence="foo" />
+            <link rel="stylesheet" href="default2" precedence="default" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog([
+        'load preload: bar1',
+        'load preload: foo3',
+        'load preload: default2',
+        'load stylesheet: foo1',
+        'load stylesheet: foo2',
+        'load stylesheet: foo3',
+        'load stylesheet: default1',
+        'load stylesheet: default2',
+        'load stylesheet: bar1',
+      ]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo1" data-precedence="foo" />
+            <link rel="stylesheet" href="foo2" data-precedence="foo" />
+            <link rel="stylesheet" href="foo3" data-precedence="foo" />
+            <link rel="stylesheet" href="default1" data-precedence="default" />
+            <link rel="stylesheet" href="default2" data-precedence="default" />
+            <link rel="stylesheet" href="bar1" data-precedence="bar" />
+            <link rel="preload" as="style" href="bar1" />
+            <link rel="preload" as="style" href="foo3" />
+            <link rel="preload" as="style" href="default2" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('retains styles even after the last referring Resource unmounts', async () => {
+      // This test is true until a future update where there is some form of garbage collection.
+      const root = ReactDOMClient.createRoot(document);
+
+      root.render(
+        <html>
+          <head />
+          <body>
+            hello world
+            <link rel="stylesheet" href="foo" precedence="foo" />
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog(['load preload: foo', 'load stylesheet: foo']);
+
+      root.render(
+        <html>
+          <head />
+          <body>hello world</body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+    });
+
+    it('retains styles even when a new html, head, and/body mount', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="foo" precedence="foo" />
+              <link rel="stylesheet" href="bar" precedence="bar" />
+              server
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      const errors = [];
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head>
+            <link rel="stylesheet" href="qux" precedence="qux" />
+            <link rel="stylesheet" href="foo" precedence="foo" />
+          </head>
+          <body>client</body>
+        </html>,
+        {
+          onRecoverableError(error) {
+            errors.push(error.message);
+          },
+        },
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog([
+        'load preload: qux',
+        'load stylesheet: foo',
+        'load stylesheet: bar',
+        'load stylesheet: qux',
+      ]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="stylesheet" href="bar" data-precedence="bar" />
+            <link rel="stylesheet" href="qux" data-precedence="qux" />
+          </head>
+          <body>client</body>
+        </html>,
+      );
+    });
+
+    it('retains styles in head through head remounts', async () => {
+      const root = ReactDOMClient.createRoot(document);
+      root.render(
+        <html>
+          <head key={1} />
+          <body>
+            <link rel="stylesheet" href="foo" precedence="foo" />
+            <link rel="stylesheet" href="bar" precedence="bar" />
+            {null}
+            hello
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog([
+        'load preload: foo',
+        'load preload: bar',
+        'load stylesheet: foo',
+        'load stylesheet: bar',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="stylesheet" href="bar" data-precedence="bar" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+
+      root.render(
+        <html>
+          <head key={2} />
+          <body>
+            <link rel="stylesheet" href="foo" precedence="foo" />
+            {null}
+            <link rel="stylesheet" href="baz" precedence="baz" />
+            hello
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog(['load preload: baz', 'load stylesheet: baz']);
+
+      // The reason we do not see preloads in the head is they are inserted synchronously
+      // during render and then when the new singleton mounts it resets it's content, retaining only styles
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="stylesheet" href="bar" data-precedence="bar" />
+            <link rel="stylesheet" href="baz" data-precedence="baz" />
+            <link rel="preload" href="baz" as="style" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
+    });
+
+    it('can support styles inside portals to a shadowRoot', async () => {
+      const shadow = document.body.attachShadow({mode: 'open'});
+      const root = ReactDOMClient.createRoot(container);
+      root.render(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          {ReactDOM.createPortal(
+            <div>
+              <link
+                rel="stylesheet"
+                href="foo"
+                data-extra-prop="foo"
+                precedence="different"
+              />
+              shadow
+            </div>,
+            shadow,
+          )}
+          container
+        </>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+        loadStylesheetsFrom(shadow);
+      });
+      await assertLog([
+        'load preload: foo',
+        'load stylesheet: foo',
+        'load stylesheet: foo',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+          </head>
+          <body>
+            <div id="container">container</div>
+          </body>
+        </html>,
+      );
+      expect(getMeaningfulChildren(shadow)).toEqual([
+        <link
+          rel="stylesheet"
+          href="foo"
+          data-precedence="different"
+          data-extra-prop="foo"
+        />,
+        <div>shadow</div>,
+      ]);
+    });
+
+    it('can support styles inside portals to an element in shadowRoots', async () => {
+      const template = document.createElement('template');
+      template.innerHTML =
+        "<div><div id='shadowcontainer1'></div><div id='shadowcontainer2'></div></div>";
+      const shadow = document.body.attachShadow({mode: 'open'});
+      shadow.appendChild(template.content);
+
+      const shadowContainer1 = shadow.getElementById('shadowcontainer1');
+      const shadowContainer2 = shadow.getElementById('shadowcontainer2');
+      const root = ReactDOMClient.createRoot(container);
+      root.render(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          {ReactDOM.createPortal(
+            <div>
+              <link rel="stylesheet" href="foo" precedence="one" />
+              <link rel="stylesheet" href="bar" precedence="two" />1
+            </div>,
+            shadow,
+          )}
+          {ReactDOM.createPortal(
+            <div>
+              <link rel="stylesheet" href="foo" precedence="one" />
+              <link rel="stylesheet" href="baz" precedence="one" />2
+            </div>,
+            shadowContainer1,
+          )}
+          {ReactDOM.createPortal(
+            <div>
+              <link rel="stylesheet" href="bar" precedence="two" />
+              <link rel="stylesheet" href="qux" precedence="three" />3
+            </div>,
+            shadowContainer2,
+          )}
+          container
+        </>,
+      );
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+        loadStylesheetsFrom(shadow);
+        loadStylesheetsFrom(shadowContainer2);
+        loadStylesheetsFrom(shadowContainer2);
+      });
+      await assertLog([
+        'load preload: foo',
+        'load preload: bar',
+        'load preload: baz',
+        'load preload: qux',
+        'load stylesheet: foo',
+        'load stylesheet: foo',
+        'load stylesheet: baz',
+        'load stylesheet: bar',
+        'load stylesheet: qux',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+            <link rel="preload" href="bar" as="style" />
+            <link rel="preload" href="baz" as="style" />
+            <link rel="preload" href="qux" as="style" />
+          </head>
+          <body>
+            <div id="container">container</div>
+          </body>
+        </html>,
+      );
+      expect(getMeaningfulChildren(shadow)).toEqual([
+        <link rel="stylesheet" href="foo" data-precedence="one" />,
+        <link rel="stylesheet" href="baz" data-precedence="one" />,
+        <link rel="stylesheet" href="bar" data-precedence="two" />,
+        <link rel="stylesheet" href="qux" data-precedence="three" />,
+        <div>
+          <div id="shadowcontainer1">
+            <div>2</div>
+          </div>
+          <div id="shadowcontainer2">
+            <div>3</div>
+          </div>
+        </div>,
+        <div>1</div>,
+      ]);
+    });
+
+    it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
+      function App() {
+        ReactDOM.preload('preload', {as: 'style'});
+        ReactDOM.preload('with\nnewline', {as: 'style'});
+        return (
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="style" precedence="style" />
+              <link rel="stylesheet" href="with\slashes" precedence="style" />
+              <div id="container" />
+            </body>
+          </html>
+        );
+      }
+      await act(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
+      container = document.getElementById('container');
+      const root = ReactDOMClient.createRoot(container);
+
+      function ClientApp() {
+        ReactDOM.preload('preload', {as: 'style'});
+        ReactDOM.preload('with\nnewline', {as: 'style'});
+        return (
+          <div>
+            <link
+              rel="stylesheet"
+              href={'style"][rel="stylesheet'}
+              precedence="style"
+            />
+            <link rel="stylesheet" href="with\slashes" precedence="style" />
+            foo
+          </div>
+        );
+      }
+      root.render(<ClientApp />);
+      await waitForAll([]);
+      await act(() => {
+        loadPreloads();
+        loadStylesheets();
+      });
+      await assertLog([
+        'load preload: preload',
+        'load preload: with\nnewline',
+        'load preload: style"][rel="stylesheet',
+        'load stylesheet: style',
+        'load stylesheet: with\\slashes',
+        'load stylesheet: style"][rel="stylesheet',
+      ]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="style" data-precedence="style" />
+            <link
+              rel="stylesheet"
+              href="with\slashes"
+              data-precedence="style"
+            />
+            <link
+              rel="stylesheet"
+              href={'style"][rel="stylesheet'}
+              data-precedence="style"
+            />
+            <link rel="preload" as="style" href="preload" />
+            <link rel="preload" href={'with\nnewline'} as="style" />
+            <link rel="preload" href={'style"][rel="stylesheet'} as="style" />
+          </head>
+          <body>
+            <div id="container">
+              <div>foo</div>
+            </div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('escapes hrefs when selecting matching elements in the document when using preload and preinit', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="preload" href="preload" as="style" />
+              <link rel="stylesheet" href="style" precedence="style" />
+              <link rel="stylesheet" href="with\slashes" precedence="style" />
+              <link rel="preload" href={'with\nnewline'} as="style" />
+              <div id="container" />
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      function App() {
+        ReactDOM.preload('preload"][rel="preload', {as: 'style'});
+        ReactDOM.preinit('style"][rel="stylesheet', {
+          as: 'style',
+          precedence: 'style',
+        });
+        ReactDOM.preinit('with\\slashes', {
+          as: 'style',
+          precedence: 'style',
+        });
+        ReactDOM.preload('with\nnewline', {as: 'style'});
+        return <div>foo</div>;
+      }
+
+      container = document.getElementById('container');
+      const root = ReactDOMClient.createRoot(container);
+      root.render(<App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="style" data-precedence="style" />
+            <link
+              rel="stylesheet"
+              href="with\slashes"
+              data-precedence="style"
+            />
+            <link
+              rel="stylesheet"
+              href={'style"][rel="stylesheet'}
+              data-precedence="style"
+            />
+            <link rel="preload" as="style" href="preload" />
+            <link rel="preload" href={'with\nnewline'} as="style" />
+            <link rel="preload" href={'preload"][rel="preload'} as="style" />
+          </head>
+          <body>
+            <div id="container">
+              <div>foo</div>
+            </div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('does not create stylesheet resources when inside an <svg> context', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <svg>
+                <path>
+                  <link rel="stylesheet" href="foo" precedence="default" />
+                </path>
+                <foreignObject>
+                  <link rel="stylesheet" href="bar" precedence="default" />
+                </foreignObject>
+              </svg>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="bar" data-precedence="default" />
+          </head>
+          <body>
+            <svg>
+              <path>
+                <link rel="stylesheet" href="foo" precedence="default" />
+              </path>
+              <foreignobject />
+            </svg>
+          </body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <svg>
+            <path>
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </path>
+            <foreignObject>
+              <link rel="stylesheet" href="bar" precedence="default" />
+            </foreignObject>
+          </svg>
+        </div>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          <svg>
+            <path>
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </path>
+            <foreignobject />
+          </svg>
+        </div>,
+      );
+    });
+
+    it('does not create stylesheet resources when inside a <noscript> context', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <noscript>
+                <link rel="stylesheet" href="foo" precedence="default" />
+              </noscript>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <noscript>
+              &lt;link rel="stylesheet" href="foo" precedence="default"&gt;
+            </noscript>
+          </body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <noscript>
+            <link rel="stylesheet" href="foo" precedence="default" />
+          </noscript>
+        </div>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          {/* On the client, <noscript> never renders children */}
+          <noscript />
+        </div>,
+      );
+    });
+
+    it('warns if you provide a `precedence` prop with other props that invalidate the creation of a stylesheet resource', async () => {
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <link rel="stylesheet" precedence="default" />
+              <link rel="stylesheet" href="" precedence="default" />
+              <link
+                rel="stylesheet"
+                href="foo"
+                precedence="default"
+                onLoad={() => {}}
+                onError={() => {}}
+              />
+              <link
+                rel="stylesheet"
+                href="foo"
+                precedence="default"
+                onLoad={() => {}}
+              />
+              <link
+                rel="stylesheet"
+                href="foo"
+                precedence="default"
+                onError={() => {}}
+              />
+              <link
+                rel="stylesheet"
+                href="foo"
+                precedence="default"
+                disabled={false}
+              />
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+      assertConsoleErrorDev(
+        [
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
+            'expected the `href` prop to be a non-empty string but ecountered `undefined` instead. ' +
+            'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
+            '`precedence` prop ensure there is a non-empty string `href` prop as well, ' +
+            'otherwise remove the `precedence` prop.\n' +
+            '    in link (at **)',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
+            'expected the `href` prop to be a non-empty string but ecountered an empty string instead. ' +
+            'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
+            '`precedence` prop ensure there is a non-empty string `href` prop as well, ' +
+            'otherwise remove the `precedence` prop.\n' +
+            '    in link (at **)',
+          'An empty string ("") was passed to the href attribute. ' +
+            'To fix this, either do not render the element at all or ' +
+            'pass null to href instead of an empty string.\n' +
+            '    in link (at **)',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
+            '`onLoad` and `onError` props. The presence of loading and error handlers indicates ' +
+            'an intent to manage the stylesheet loading state from your from your Component code ' +
+            'and React will not hoist or deduplicate this stylesheet. ' +
+            'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
+            '`precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.\n' +
+            '    in link (at **)',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
+            '`onLoad` prop. The presence of loading and error handlers indicates an intent to ' +
+            'manage the stylesheet loading state from your from your Component code and ' +
+            'React will not hoist or deduplicate this stylesheet. ' +
+            'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
+            '`precedence` prop remove the `onLoad` prop, otherwise remove the `precedence` prop.\n' +
+            '    in link (at **)',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onError` prop. ' +
+            'The presence of loading and error handlers indicates an intent to manage the stylesheet loading state ' +
+            'from your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
+            'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
+            'prop remove the `onError` prop, otherwise remove the `precedence` prop.\n' +
+            '    in link (at **)',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. ' +
+            'The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from ' +
+            'your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
+            'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
+            'prop remove the `disabled` prop, otherwise remove the `precedence` prop.\n' +
+            '    in link (at **)',
+        ].filter(Boolean),
+      );
+
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <link
+              rel="stylesheet"
+              href="foo"
+              precedence="default"
+              onLoad={() => {}}
+              onError={() => {}}
+            />
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'React encountered a <link rel="stylesheet" href="foo" ... /> with a `precedence` ' +
+          'prop that also included the `onLoad` and `onError` props. ' +
+          'The presence of loading and error handlers indicates an intent to manage the stylesheet ' +
+          'loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
+          'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
+          'prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.\n' +
+          '    in body (at **)',
+      ]);
+    });
+
+    it('will not block displaying a Suspense boundary on a stylesheet with media that does not match', async () => {
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="block">
+                  foo
+                  <link
+                    rel="stylesheet"
+                    href="print"
+                    media="print"
+                    precedence="print"
+                  />
+                  <link
+                    rel="stylesheet"
+                    href="all"
+                    media="all"
+                    precedence="all"
+                  />
+                </BlockedOn>
+              </Suspense>
+              <Suspense fallback="loading...">
+                <BlockedOn value="block">
+                  bar
+                  <link
+                    rel="stylesheet"
+                    href="print"
+                    media="print"
+                    precedence="print"
+                  />
+                  <link
+                    rel="stylesheet"
+                    href="all"
+                    media="all"
+                    precedence="all"
+                  />
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            {'loading...'}
+            {'loading...'}
+          </body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('block');
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="print"
+              media="print"
+              data-precedence="print"
+            />
+            <link
+              rel="stylesheet"
+              href="all"
+              media="all"
+              data-precedence="all"
+            />
+          </head>
+          <body>
+            {'loading...'}
+            {'loading...'}
+            <link rel="preload" href="print" media="print" as="style" />
+            <link rel="preload" href="all" media="all" as="style" />
+          </body>
+        </html>,
+      );
+
+      await act(() => {
+        const allStyle = document.querySelector('link[href="all"]');
+        const event = document.createEvent('Events');
+        event.initEvent('load', true, true);
+        allStyle.dispatchEvent(event);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="print"
+              media="print"
+              data-precedence="print"
+            />
+            <link
+              rel="stylesheet"
+              href="all"
+              media="all"
+              data-precedence="all"
+            />
+          </head>
+          <body>
+            {'foo'}
+            {'bar'}
+            <link rel="preload" href="print" media="print" as="style" />
+            <link rel="preload" href="all" media="all" as="style" />
+          </body>
+        </html>,
+      );
+    });
+  });
+
+  describe('Style Resource', () => {
+    it('treats <style href="..." precedence="..."> elements as a style resource when server rendering', async () => {
+      const css = `
+body {
+  background-color: red;
+}`;
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <style href="foo" precedence="foo">
+                {css}
+              </style>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="foo">
+              {css}
+            </style>
+          </head>
+          <body />
+        </html>,
+      );
+    });
+
+    it('can insert style resources as part of a boundary reveal', async () => {
+      const cssRed = `
+body {
+  background-color: red;
+}`;
+      const cssBlue = `
+body {
+background-color: blue;
+}`;
+      const cssGreen = `
+body {
+background-color: green;
+}`;
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="blocked">
+                  <style href="foo" precedence="foo">
+                    {cssRed}
+                  </style>
+                  loaded
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>loading...</body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('blocked');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="foo">
+              {cssRed}
+            </style>
+          </head>
+          <body>loaded</body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              <style href="foo" precedence="foo">
+                {cssRed}
+              </style>
+              loaded
+            </Suspense>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="foo">
+              {cssRed}
+            </style>
+          </head>
+          <body>loaded</body>
+        </html>,
+      );
+
+      root.render(
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              <style href="foo" precedence="foo">
+                {cssRed}
+              </style>
+              loaded
+            </Suspense>
+            <style href="bar" precedence="bar">
+              {cssBlue}
+            </style>
+            <style href="baz" precedence="foo">
+              {cssGreen}
+            </style>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="foo">
+              {cssRed}
+            </style>
+            <style data-href="baz" data-precedence="foo">
+              {cssGreen}
+            </style>
+            <style data-href="bar" data-precedence="bar">
+              {cssBlue}
+            </style>
+          </head>
+          <body>loaded</body>
+        </html>,
+      );
+    });
+
+    it('can emit styles early when a partial boundary flushes', async () => {
+      const css = 'body { background-color: red; }';
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense>
+                <BlockedOn value="first">
+                  <div>first</div>
+                  <style href="foo" precedence="default">
+                    {css}
+                  </style>
+                  <BlockedOn value="second">
+                    <div>second</div>
+                    <style href="bar" precedence="default">
+                      {css}
+                    </style>
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('first');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <style data-href="foo" data-precedence="default" media="not all">
+              {css}
+            </style>
+          </body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('second');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="default">
+              {css}
+            </style>
+            <style data-href="bar" data-precedence="default">
+              {css}
+            </style>
+          </head>
+          <body>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('can hoist styles flushed early even when no other style dependencies are flushed on completion', async () => {
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="first">
+                  <style href="foo" precedence="default">
+                    some css
+                  </style>
+                  <div>first</div>
+                  <BlockedOn value="second">
+                    <div>second</div>
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>loading...</body>
+        </html>,
+      );
+
+      // When we resolve first we flush the style tag because it is ready but we aren't yet ready to
+      // flush the entire boundary and reveal it.
+      await act(() => {
+        resolveText('first');
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            loading...
+            <style data-href="foo" data-precedence="default" media="not all">
+              some css
+            </style>
+          </body>
+        </html>,
+      );
+
+      // When we resolve second we flush the rest of the boundary segments and reveal the boundary. The style tag
+      // is hoisted during this reveal process even though no other styles flushed during this tick
+      await act(() => {
+        resolveText('second');
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="default">
+              some css
+            </style>
+          </head>
+          <body>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('can emit multiple style rules into a single style tag for a given precedence', async () => {
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <style href="1" precedence="default">
+                1
+              </style>
+              <style href="2" precedence="foo">
+                foo2
+              </style>
+              <style href="3" precedence="default">
+                3
+              </style>
+              <style href="4" precedence="default">
+                4
+              </style>
+              <style href="5" precedence="foo">
+                foo5
+              </style>
+              <div>initial</div>
+              <Suspense fallback="loading...">
+                <BlockedOn value="first">
+                  <style href="6" precedence="default">
+                    6
+                  </style>
+                  <style href="7" precedence="foo">
+                    foo7
+                  </style>
+                  <style href="8" precedence="default">
+                    8
+                  </style>
+                  <style href="9" precedence="default">
+                    9
+                  </style>
+                  <style href="10" precedence="foo">
+                    foo10
+                  </style>
+                  <div>first</div>
+                  <BlockedOn value="second">
+                    <style href="11" precedence="default">
+                      11
+                    </style>
+                    <style href="12" precedence="foo">
+                      foo12
+                    </style>
+                    <style href="13" precedence="default">
+                      13
+                    </style>
+                    <style href="14" precedence="default">
+                      14
+                    </style>
+                    <style href="15" precedence="foo">
+                      foo15
+                    </style>
+                    <div>second</div>
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="1 3 4" data-precedence="default">
+              134
+            </style>
+            <style data-href="2 5" data-precedence="foo">
+              foo2foo5
+            </style>
+          </head>
+          <body>
+            <div>initial</div>loading...
+          </body>
+        </html>,
+      );
+
+      // When we resolve first we flush the style tag because it is ready but we aren't yet ready to
+      // flush the entire boundary and reveal it.
+      await act(() => {
+        resolveText('first');
+      });
+      await act(() => {
+        resolveText('second');
+      });
+
+      // Some sets of styles were ready before the entire boundary and they got emitted as early as they were
+      // ready. The remaining styles were ready when the boundary finished and they got grouped as well
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="1 3 4" data-precedence="default">
+              134
+            </style>
+            <style data-href="6 8 9" data-precedence="default">
+              689
+            </style>
+            <style data-href="11 13 14" data-precedence="default">
+              111314
+            </style>
+            <style data-href="2 5" data-precedence="foo">
+              foo2foo5
+            </style>
+            <style data-href="7 10" data-precedence="foo">
+              foo7foo10
+            </style>
+            <style data-href="12 15" data-precedence="foo">
+              foo12foo15
+            </style>
+          </head>
+          <body>
+            <div>initial</div>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
+
+      // Client inserted style tags are not grouped together but can hydrate against a grouped set
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <style href="1" precedence="default">
+              1
+            </style>
+            <style href="2" precedence="foo">
+              foo2
+            </style>
+            <style href="16" precedence="default">
+              16
+            </style>
+            <style href="17" precedence="default">
+              17
+            </style>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="1 3 4" data-precedence="default">
+              134
+            </style>
+            <style data-href="6 8 9" data-precedence="default">
+              689
+            </style>
+            <style data-href="11 13 14" data-precedence="default">
+              111314
+            </style>
+            <style data-href="16" data-precedence="default">
+              16
+            </style>
+            <style data-href="17" data-precedence="default">
+              17
+            </style>
+            <style data-href="2 5" data-precedence="foo">
+              foo2foo5
+            </style>
+            <style data-href="7 10" data-precedence="foo">
+              foo7foo10
+            </style>
+            <style data-href="12 15" data-precedence="foo">
+              foo12foo15
+            </style>
+          </head>
+          <body>
+            <div>initial</div>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('warns if you render a <style> with an href with a space on the server', async () => {
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <style href="foo bar" precedence="default">
+                style
+              </style>
+            </body>
+          </html>,
+        ).pipe(writable);
+      });
+      assertConsoleErrorDev([
+        'React expected the `href` prop for a <style> tag opting into hoisting semantics ' +
+          'using the `precedence` prop to not have any spaces but ecountered spaces instead. ' +
+          'using spaces in this prop will cause hydration of this style to fail on the client. ' +
+          'The href for the <style> where this ocurred is "foo bar".\n' +
+          '    in style (at **)',
+      ]);
+    });
+
+    it('can emit styles with nonce', async () => {
+      const nonce = 'R4nD0m';
+      const fooCss = '.foo { color: hotpink; }';
+      const barCss = '.bar { background-color: blue; }';
+      const bazCss = '.baz { border: 1px solid black; }';
+      await act(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense>
+                <BlockedOn value="first">
+                  <div>first</div>
+                  <style href="foo" precedence="default" nonce={nonce}>
+                    {fooCss}
+                  </style>
+                  <style href="bar" precedence="default" nonce={nonce}>
+                    {barCss}
+                  </style>
+                  <BlockedOn value="second">
+                    <div>second</div>
+                    <style href="baz" precedence="default" nonce={nonce}>
+                      {bazCss}
+                    </style>
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+          {nonce: {style: nonce}},
+        ).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('first');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <style
+              data-href="foo bar"
+              data-precedence="default"
+              media="not all"
+              nonce={nonce}>
+              {`${fooCss}${barCss}`}
+            </style>
+          </body>
+        </html>,
+      );
+
+      await act(() => {
+        resolveText('second');
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo bar" data-precedence="default" nonce={nonce}>
+              {`${fooCss}${barCss}`}
+            </style>
+            <style data-href="baz" data-precedence="default" nonce={nonce}>
+              {bazCss}
+            </style>
+          </head>
+          <body>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
+    });
+  });
+
+  describe('Script Resources', () => {
+    it('treats async scripts without onLoad or onError as Resources', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <script src="foo" async={true} />
+              <script src="bar" async={true} onLoad={() => {}} />
+              <script src="baz" data-meaningful="" />
+              <script src="qux" defer={true} data-meaningful="" />
+              hello world
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      // The plain async script is converted to a resource and emitted as part of the shell
+      // The async script with onLoad is preloaded in the shell but is expecting to be added
+      // during hydration. This is novel, the script is NOT a HostHoistable but it also will
+      // never hydrate
+      // The regular script is just a normal html that should hydrate with a HostComponent
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script src="foo" async="" />
+          </head>
+          <body>
+            <script src="bar" async="" />
+            <script src="baz" data-meaningful="" />
+            <script src="qux" defer="" data-meaningful="" />
+            hello world
+          </body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head />
+          <body>
+            <script src="foo" async={true} />
+            <script src="bar" async={true} onLoad={() => {}} />
+            <script src="baz" data-meaningful="" />
+            <script src="qux" defer={true} data-meaningful="" />
+            hello world
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      // The async script with onLoad is inserted in the right place but does not cause the hydration
+      // to fail.
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script src="foo" async="" />
+          </head>
+          <body>
+            <script src="bar" async="" />
+            <script src="baz" data-meaningful="" />
+            <script src="qux" defer="" data-meaningful="" />
+            hello world
+          </body>
+        </html>,
+      );
+
+      root.unmount();
+      // When we unmount we expect to retain singletons and any content that is not cleared within them.
+      // The foo script is a resource so it sticks around. The other scripts are regular HostComponents
+      // so they unmount and are removed from the DOM.
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script src="foo" async="" />
+          </head>
+          <body />
+        </html>,
+      );
+    });
+
+    it('does not create script resources when inside an <svg> context', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <svg>
+                <path>
+                  <script async={true} src="foo" />
+                </path>
+                <foreignObject>
+                  <script async={true} src="bar" />
+                </foreignObject>
+              </svg>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="bar" />
+          </head>
+          <body>
+            <svg>
+              <path>
+                <script async="" src="foo" />
+              </path>
+              <foreignobject />
+            </svg>
+          </body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <svg>
+            <path>
+              <script async={true} src="foo" />
+            </path>
+            <foreignObject>
+              <script async={true} src="bar" />
+            </foreignObject>
+          </svg>
+        </div>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          <svg>
+            <path>
+              <script async="" src="foo" />
+            </path>
+            <foreignobject />
+          </svg>
+        </div>,
+      );
+    });
+
+    it('does not create script resources when inside a <noscript> context', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <noscript>
+                <script async={true} src="foo" />
+              </noscript>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <noscript>
+              &lt;script async="" src="foo"&gt;&lt;/script&gt;
+            </noscript>
+          </body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <noscript>
+            <script async={true} src="foo" />
+          </noscript>
+        </div>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          {/* On the client, <noscript> never renders children */}
+          <noscript />
+        </div>,
+      );
+    });
+  });
+
+  describe('Hoistables', () => {
+    it('can hoist meta tags on the server and hydrate them on the client', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <meta name="foo" data-foo="data" content="bar" />
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <meta name="foo" data-foo="data" content="bar" />
+          </head>
+          <body />
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <meta name="foo" data-foo="data" content="bar" />
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <meta name="foo" data-foo="data" content="bar" />
+          </head>
+          <body />
+        </html>,
+      );
+
+      root.render(
+        <html>
+          <body />
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
+    });
+
+    it('can hoist meta tags on the client', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <meta name="foo" data-foo="data" content="bar" />
+          </div>,
+        );
+      });
+      await waitForAll([]);
+
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <meta name="foo" data-foo="data" content="bar" />,
+      );
+      expect(getMeaningfulChildren(container)).toEqual(<div />);
+
+      root.render(<div />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.head)).toEqual(undefined);
+    });
+
+    it('can hoist link (non-stylesheet) tags on the server and hydrate them on the client', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <link rel="foo" data-foo="data" href="foo" />
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="foo" data-foo="data" href="foo" />
+          </head>
+          <body />
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <link rel="foo" data-foo="data" href="foo" />
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="foo" data-foo="data" href="foo" />
+          </head>
+          <body />
+        </html>,
+      );
+
+      root.render(
+        <html>
+          <body />
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
+    });
+
+    it('can hoist link (non-stylesheet) tags on the client', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <link rel="foo" data-foo="data" href="foo" />
+          </div>,
+        );
+      });
+      await waitForAll([]);
+
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <link rel="foo" data-foo="data" href="foo" />,
+      );
+      expect(getMeaningfulChildren(container)).toEqual(<div />);
+
+      root.render(<div />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.head)).toEqual(undefined);
+    });
+
+    it('can hoist title tags on the server and hydrate them on the client', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <title data-foo="foo">a title</title>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <title data-foo="foo">a title</title>
+          </head>
+          <body />
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <title data-foo="foo">a title</title>
+          </body>
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <title data-foo="foo">a title</title>
+          </head>
+          <body />
+        </html>,
+      );
+
+      root.render(
+        <html>
+          <body />
+        </html>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
+    });
+
+    it('can hoist title tags on the client', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <title data-foo="foo">a title</title>
+          </div>,
+        );
+      });
+      await waitForAll([]);
+
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <title data-foo="foo">a title</title>,
+      );
+      expect(getMeaningfulChildren(container)).toEqual(<div />);
+
+      root.render(<div />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.head)).toEqual(undefined);
+    });
+
+    it('prioritizes ordering for certain hoistables over others when rendering on the server', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <link rel="foo" href="foo" />
+              <meta name="bar" />
+              <title>a title</title>
+              <link rel="preload" href="foo" as="style" />
+              <link rel="preconnect" href="bar" />
+              <link rel="dns-prefetch" href="baz" />
+              <meta name="viewport" />
+              <meta charSet="utf-8" />
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            {/* charset first */}
+            <meta charset="utf-8" />
+            {/* viewport meta next */}
+            <meta name="viewport" />
+            {/* Everything else last */}
+            <link rel="foo" href="foo" />
+            <meta name="bar" />
+            <title>a title</title>
+            <link rel="preload" href="foo" as="style" />
+            <link rel="preconnect" href="bar" />
+            <link rel="dns-prefetch" href="baz" />
+          </head>
+          <body />
+        </html>,
+      );
+    });
+
+    it('supports rendering hoistables outside of <html> scope', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <>
+            <meta name="before" />
+            <html>
+              <body>foo</body>
+            </html>
+            <meta name="after" />
+          </>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <meta name="before" />
+            <meta name="after" />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <>
+          <meta name="before" />
+          <html>
+            <body>foo</body>
+          </html>
+          <meta name="after" />
+        </>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <meta name="before" />
+            <meta name="after" />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+
+      root.render(
+        <>
+          {null}
+          <html>
+            <body>foo</body>
+          </html>
+          {null}
+        </>,
+      );
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>foo</body>
+        </html>,
+      );
+    });
+
+    it('can hydrate hoistable tags inside late suspense boundaries', async () => {
+      function App() {
+        return (
+          <html>
+            <body>
+              <link rel="rel1" href="linkhref" />
+              <link rel="rel2" href="linkhref" />
+              <meta name="name1" content="metacontent" />
+              <meta name="name2" content="metacontent" />
+              <Suspense fallback="loading...">
+                <link rel="rel3" href="linkhref" />
+                <link rel="rel4" href="linkhref" />
+                <meta name="name3" content="metacontent" />
+                <meta name="name4" content="metacontent" />
+                <BlockedOn value="release">
+                  <link rel="rel5" href="linkhref" />
+                  <link rel="rel6" href="linkhref" />
+                  <meta name="name5" content="metacontent" />
+                  <meta name="name6" content="metacontent" />
+                  <div>hello world</div>
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+      await act(() => {
+        renderToPipeableStream(<App />).pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="rel1" href="linkhref" />
+            <link rel="rel2" href="linkhref" />
+            <meta name="name1" content="metacontent" />
+            <meta name="name2" content="metacontent" />
+            <link rel="rel3" href="linkhref" />
+            <link rel="rel4" href="linkhref" />
+            <meta name="name3" content="metacontent" />
+            <meta name="name4" content="metacontent" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(document, <App />);
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="rel1" href="linkhref" />
+            <link rel="rel2" href="linkhref" />
+            <meta name="name1" content="metacontent" />
+            <meta name="name2" content="metacontent" />
+            <link rel="rel3" href="linkhref" />
+            <link rel="rel4" href="linkhref" />
+            <meta name="name3" content="metacontent" />
+            <meta name="name4" content="metacontent" />
+          </head>
+          <body>loading...</body>
+        </html>,
+      );
+
+      const thirdPartyLink = document.createElement('link');
+      thirdPartyLink.setAttribute('href', 'linkhref');
+      thirdPartyLink.setAttribute('rel', '3rdparty');
+      document.body.prepend(thirdPartyLink);
+
+      const thirdPartyMeta = document.createElement('meta');
+      thirdPartyMeta.setAttribute('content', 'metacontent');
+      thirdPartyMeta.setAttribute('name', '3rdparty');
+      document.body.prepend(thirdPartyMeta);
+
+      await act(() => {
+        resolveText('release');
+      });
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="rel1" href="linkhref" />
+            <link rel="rel2" href="linkhref" />
+            <meta name="name1" content="metacontent" />
+            <meta name="name2" content="metacontent" />
+            <link rel="rel3" href="linkhref" />
+            <link rel="rel4" href="linkhref" />
+            <meta name="name3" content="metacontent" />
+            <meta name="name4" content="metacontent" />
+          </head>
+          <body>
+            <meta name="3rdparty" content="metacontent" />
+            <link rel="3rdparty" href="linkhref" />
+            <div>hello world</div>
+            <link rel="rel5" href="linkhref" />
+            <link rel="rel6" href="linkhref" />
+            <meta name="name5" content="metacontent" />
+            <meta name="name6" content="metacontent" />
+          </body>
+        </html>,
+      );
+
+      root.unmount();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <meta name="3rdparty" content="metacontent" />
+            <link rel="3rdparty" href="linkhref" />
+          </body>
+        </html>,
+      );
+    });
+
+    it('does not hoist inside an <svg> context', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <svg>
+                <title>svg title</title>
+                <link rel="svg link" href="a" />
+                <meta name="svg meta" />
+                <path>
+                  <title>deep svg title</title>
+                  <meta name="deep svg meta" />
+                  <link rel="deep svg link" href="a" />
+                </path>
+                <foreignObject>
+                  <title>hoistable title</title>
+                  <meta name="hoistable" />
+                  <link rel="hoistable" href="a" />
+                </foreignObject>
+              </svg>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document.head)).toEqual([
+        <title>hoistable title</title>,
+        <meta name="hoistable" />,
+        <link rel="hoistable" href="a" />,
+      ]);
+    });
+
+    it('does not hoist inside noscript context', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <title>title</title>
+              <link rel="link" href="a" />
+              <meta name="meta" />
+              <noscript>
+                <title>noscript title</title>
+                <link rel="noscript link" href="a" />
+                <meta name="noscript meta" />
+              </noscript>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
+      expect(getMeaningfulChildren(document.head)).toEqual([
+        <title>title</title>,
+        <link rel="link" href="a" />,
+        <meta name="meta" />,
+      ]);
+    });
+
+    it('can render a title before a singleton even if that singleton clears its contents', async () => {
+      await act(() => {
+        const {pipe} = renderToPipeableStream(
+          <>
+            <title>foo</title>
+            <html>
+              <head />
+              <body>
+                <div>server</div>
+              </body>
+            </html>
+          </>,
+        );
+        pipe(writable);
+      });
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(
+        document,
+        <>
+          <title>foo</title>
+          <html>
+            <head />
+            <body>
+              <div>client</div>
+            </body>
+          </html>
+        </>,
+        {
+          onRecoverableError(err) {
+            errors.push(err.message);
+          },
+        },
+      );
+
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <title>foo</title>
+          </head>
+          <body>
+            <div>client</div>
+          </body>
+        </html>,
+      );
+    });
+
+    it('can update title tags', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<title data-foo="foo">a title</title>);
+      });
+      await waitForAll([]);
+
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <title data-foo="foo">a title</title>,
+      );
+
+      await act(() => {
+        root.render(<title data-foo="bar">another title</title>);
+      });
+      await waitForAll([]);
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <title data-foo="bar">another title</title>,
+      );
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
new file mode 100644
index 00000000000..21995b68f44
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
@@ -0,0 +1,2358 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+// Our current version of JSDOM doesn't implement the event dispatching
+// so we polyfill it.
+const NativeFormData = global.FormData;
+const FormDataPolyfill = function FormData(form, submitter) {
+  const formData = new NativeFormData(form, submitter);
+  const formDataEvent = new Event('formdata', {
+    bubbles: true,
+    cancelable: false,
+  });
+  formDataEvent.formData = formData;
+  form.dispatchEvent(formDataEvent);
+  return formData;
+};
+NativeFormData.prototype.constructor = FormDataPolyfill;
+global.FormData = FormDataPolyfill;
+
+describe('ReactDOMForm', () => {
+  let act;
+  let container;
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let Scheduler;
+  let assertLog;
+  let assertConsoleErrorDev;
+  let waitForThrow;
+  let useState;
+  let Suspense;
+  let startTransition;
+  let useTransition;
+  let use;
+  let textCache;
+  let useFormStatus;
+  let useActionState;
+  let requestFormReset;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    waitForThrow = require('internal-test-utils').waitForThrow;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    useState = React.useState;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    useTransition = React.useTransition;
+    use = React.use;
+    useFormStatus = ReactDOM.useFormStatus;
+    requestFormReset = ReactDOM.requestFormReset;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    textCache = new Map();
+
+    if (__VARIANT__) {
+      const originalConsoleError = console.error;
+      console.error = (error, ...args) => {
+        if (
+          typeof error !== 'string' ||
+          error.indexOf('ReactDOM.useFormState has been renamed') === -1
+        ) {
+          originalConsoleError(error, ...args);
+        }
+      };
+      // Remove after API is deleted.
+      useActionState = ReactDOM.useFormState;
+    } else {
+      useActionState = React.useActionState;
+    }
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t(text));
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function getText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+      return thenable;
+    } else {
+      switch (record.status) {
+        case 'pending':
+          return record.value;
+        case 'rejected':
+          return Promise.reject(record.value);
+        case 'resolved':
+          return Promise.resolve(record.value);
+      }
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function submit(submitter) {
+    await act(() => {
+      const form = submitter.form || submitter;
+      if (!submitter.form) {
+        submitter = undefined;
+      }
+      const submitEvent = new Event('submit', {
+        bubbles: true,
+        cancelable: true,
+      });
+      submitEvent.submitter = submitter;
+      const returnValue = form.dispatchEvent(submitEvent);
+      if (!returnValue) {
+        return;
+      }
+      const action =
+        (submitter && submitter.getAttribute('formaction')) || form.action;
+      if (!/\s*javascript:/i.test(action)) {
+        throw new Error('Navigate to: ' + action);
+      }
+    });
+  }
+
+  it('should allow passing a function to form action', async () => {
+    const ref = React.createRef();
+    let foo;
+
+    function action(formData) {
+      foo = formData.get('foo');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form action={action} ref={ref}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>,
+      );
+    });
+
+    await submit(ref.current);
+
+    expect(foo).toBe('bar');
+
+    // Try updating the action
+
+    function action2(formData) {
+      foo = formData.get('foo') + '2';
+    }
+
+    await act(async () => {
+      root.render(
+        <form action={action2} ref={ref}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>,
+      );
+    });
+
+    await submit(ref.current);
+
+    expect(foo).toBe('bar2');
+  });
+
+  it('should allow passing a function to an input/button formAction', async () => {
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    let rootActionCalled = false;
+    let savedTitle = null;
+    let deletedTitle = null;
+
+    function action(formData) {
+      rootActionCalled = true;
+    }
+
+    function saveItem(formData) {
+      savedTitle = formData.get('title');
+    }
+
+    function deleteItem(formData) {
+      deletedTitle = formData.get('title');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form action={action}>
+          <input type="text" name="title" defaultValue="Hello" />
+          <input
+            type="submit"
+            formAction={saveItem}
+            value="Save"
+            ref={inputRef}
+          />
+          <button formAction={deleteItem} ref={buttonRef}>
+            Delete
+          </button>
+        </form>,
+      );
+    });
+
+    expect(savedTitle).toBe(null);
+    expect(deletedTitle).toBe(null);
+
+    await submit(inputRef.current);
+    expect(savedTitle).toBe('Hello');
+    expect(deletedTitle).toBe(null);
+    savedTitle = null;
+
+    await submit(buttonRef.current);
+    expect(savedTitle).toBe(null);
+    expect(deletedTitle).toBe('Hello');
+    deletedTitle = null;
+
+    // Try updating the actions
+
+    function saveItem2(formData) {
+      savedTitle = formData.get('title') + '2';
+    }
+
+    function deleteItem2(formData) {
+      deletedTitle = formData.get('title') + '2';
+    }
+
+    await act(async () => {
+      root.render(
+        <form action={action}>
+          <input type="text" name="title" defaultValue="Hello" />
+          <input
+            type="submit"
+            formAction={saveItem2}
+            value="Save"
+            ref={inputRef}
+          />
+          <button formAction={deleteItem2} ref={buttonRef}>
+            Delete
+          </button>
+        </form>,
+      );
+    });
+
+    expect(savedTitle).toBe(null);
+    expect(deletedTitle).toBe(null);
+
+    await submit(inputRef.current);
+    expect(savedTitle).toBe('Hello2');
+    expect(deletedTitle).toBe(null);
+    savedTitle = null;
+
+    await submit(buttonRef.current);
+    expect(savedTitle).toBe(null);
+    expect(deletedTitle).toBe('Hello2');
+
+    expect(rootActionCalled).toBe(false);
+  });
+
+  it('should allow preventing default to block the action', async () => {
+    const ref = React.createRef();
+    let actionCalled = false;
+
+    function action(formData) {
+      actionCalled = true;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form action={action} ref={ref} onSubmit={e => e.preventDefault()}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>,
+      );
+    });
+
+    await submit(ref.current);
+
+    expect(actionCalled).toBe(false);
+  });
+
+  it('should submit the inner of nested forms', async () => {
+    const ref = React.createRef();
+    let data;
+
+    function outerAction(formData) {
+      data = formData.get('data') + 'outer';
+    }
+    function innerAction(formData) {
+      data = formData.get('data') + 'inner';
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      // This isn't valid HTML but just in case.
+      root.render(
+        <form action={outerAction}>
+          <input type="text" name="data" defaultValue="outer" />
+          <form action={innerAction} ref={ref}>
+            <input type="text" name="data" defaultValue="inner" />
+          </form>
+        </form>,
+      );
+    });
+    assertConsoleErrorDev([
+      'In HTML, <form> cannot be a descendant of <form>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <form action={function outerAction}>\n' +
+        '    <input>\n' +
+        '>   <form action={function innerAction} ref={{current:null}}>\n' +
+        '\n    in form (at **)',
+    ]);
+
+    await submit(ref.current);
+
+    expect(data).toBe('innerinner');
+  });
+
+  it('should submit once if one root is nested inside the other', async () => {
+    const ref = React.createRef();
+    let outerCalled = 0;
+    let innerCalled = 0;
+    let bubbledSubmit = false;
+
+    function outerAction(formData) {
+      outerCalled++;
+    }
+
+    function innerAction(formData) {
+      innerCalled++;
+    }
+
+    const innerContainerRef = React.createRef();
+    const outerRoot = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      outerRoot.render(
+        // Nesting forms isn't valid HTML but just in case.
+        <div onSubmit={() => (bubbledSubmit = true)}>
+          <form action={outerAction}>
+            <div ref={innerContainerRef} />
+          </form>
+        </div>,
+      );
+    });
+
+    const innerRoot = ReactDOMClient.createRoot(innerContainerRef.current);
+    await act(async () => {
+      innerRoot.render(
+        <form action={innerAction} ref={ref}>
+          <input type="text" name="data" defaultValue="inner" />
+        </form>,
+      );
+    });
+
+    await submit(ref.current);
+
+    expect(bubbledSubmit).toBe(true);
+    expect(outerCalled).toBe(0);
+    expect(innerCalled).toBe(1);
+  });
+
+  it('should submit once if a portal is nested inside its own root', async () => {
+    const ref = React.createRef();
+    let outerCalled = 0;
+    let innerCalled = 0;
+    let bubbledSubmit = false;
+
+    function outerAction(formData) {
+      outerCalled++;
+    }
+
+    function innerAction(formData) {
+      innerCalled++;
+    }
+
+    const innerContainer = document.createElement('div');
+    const innerContainerRef = React.createRef();
+    const outerRoot = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      outerRoot.render(
+        // Nesting forms isn't valid HTML but just in case.
+        <div onSubmit={() => (bubbledSubmit = true)}>
+          <form action={outerAction}>
+            <div ref={innerContainerRef} />
+            {ReactDOM.createPortal(
+              <form action={innerAction} ref={ref}>
+                <input type="text" name="data" defaultValue="inner" />
+              </form>,
+              innerContainer,
+            )}
+          </form>
+        </div>,
+      );
+    });
+
+    innerContainerRef.current.appendChild(innerContainer);
+
+    await submit(ref.current);
+
+    expect(bubbledSubmit).toBe(true);
+    expect(outerCalled).toBe(0);
+    expect(innerCalled).toBe(1);
+  });
+
+  it('can read the clicked button in the formdata event', async () => {
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    const outsideButtonRef = React.createRef();
+    const imageButtonRef = React.createRef();
+    let button;
+    let buttonX;
+    let buttonY;
+    let title;
+
+    function action(formData) {
+      button = formData.get('button');
+      buttonX = formData.get('button.x');
+      buttonY = formData.get('button.y');
+      title = formData.get('title');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <>
+          <form action={action}>
+            <input type="text" name="title" defaultValue="hello" />
+            <input type="submit" name="button" value="save" />
+            <input type="submit" name="button" value="delete" ref={inputRef} />
+            <button name="button" value="edit" ref={buttonRef}>
+              Edit
+            </button>
+            <input
+              type="image"
+              name="button"
+              href="/some/image.png"
+              ref={imageButtonRef}
+            />
+          </form>
+          <form id="form" action={action}>
+            <input type="text" name="title" defaultValue="hello" />
+          </form>
+          <button
+            form="form"
+            name="button"
+            value="outside"
+            ref={outsideButtonRef}>
+            Button outside form
+          </button>
+          ,
+        </>,
+      );
+    });
+
+    container.addEventListener('formdata', e => {
+      // Process in the formdata event somehow
+      if (e.formData.get('button') === 'delete') {
+        e.formData.delete('title');
+      }
+    });
+
+    await submit(inputRef.current);
+
+    expect(button).toBe('delete');
+    expect(title).toBe(null);
+
+    await submit(buttonRef.current);
+
+    expect(button).toBe('edit');
+    expect(title).toBe('hello');
+
+    await submit(outsideButtonRef.current);
+
+    expect(button).toBe('outside');
+    expect(title).toBe('hello');
+
+    await submit(imageButtonRef.current);
+
+    expect(button).toBe(null);
+    expect(buttonX).toBe('0');
+    expect(buttonY).toBe('0');
+    expect(title).toBe('hello');
+  });
+
+  it('excludes the submitter name when the submitter is a function action', async () => {
+    const inputRef = React.createRef();
+    const buttonRef = React.createRef();
+    let button;
+
+    function action(formData) {
+      // A function action cannot control the name since it might be controlled by the server
+      // so we need to make sure it doesn't get into the FormData.
+      button = formData.get('button');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form>
+          <input
+            type="submit"
+            name="button"
+            value="delete"
+            ref={inputRef}
+            formAction={action}
+          />
+          <button
+            name="button"
+            value="edit"
+            ref={buttonRef}
+            formAction={action}>
+            Edit
+          </button>
+        </form>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Cannot specify a "name" prop for a button that specifies a function as a formAction. ' +
+        'React needs it to encode which action should be invoked. ' +
+        'It will get overridden.\n' +
+        '    in input (at **)',
+    ]);
+
+    await submit(inputRef.current);
+
+    expect(button).toBe(null);
+
+    await submit(buttonRef.current);
+
+    expect(button).toBe(null);
+
+    // Ensure that the type field got correctly restored
+    expect(inputRef.current.getAttribute('type')).toBe('submit');
+    expect(buttonRef.current.getAttribute('type')).toBe(null);
+  });
+
+  it('allows a non-function formaction to override a function one', async () => {
+    const ref = React.createRef();
+    let actionCalled = false;
+
+    function action(formData) {
+      actionCalled = true;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form action={action}>
+          <input
+            type="submit"
+            formAction="http://example.com/submit"
+            ref={ref}
+          />
+        </form>,
+      );
+    });
+
+    let nav;
+    try {
+      await submit(ref.current);
+    } catch (x) {
+      nav = x.message;
+    }
+    expect(nav).toBe('Navigate to: http://example.com/submit');
+    expect(actionCalled).toBe(false);
+  });
+
+  it('allows a non-react html formaction to be invoked', async () => {
+    let actionCalled = false;
+
+    function action(formData) {
+      actionCalled = true;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form
+          action={action}
+          dangerouslySetInnerHTML={{
+            __html: `
+            <input
+              type="submit"
+              formAction="http://example.com/submit"
+            />
+          `,
+          }}
+        />,
+      );
+    });
+
+    const node = container.getElementsByTagName('input')[0];
+    let nav;
+    try {
+      await submit(node);
+    } catch (x) {
+      nav = x.message;
+    }
+    expect(nav).toBe('Navigate to: http://example.com/submit');
+    expect(actionCalled).toBe(false);
+  });
+
+  it('form actions are transitions', async () => {
+    const formRef = React.createRef();
+
+    function Status() {
+      const {pending} = useFormStatus();
+      return pending ? <Text text="Pending..." /> : null;
+    }
+
+    function App() {
+      const [state, setState] = useState('Initial');
+      return (
+        <form action={() => setState('Updated')} ref={formRef}>
+          <Status />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={state} />
+          </Suspense>
+        </form>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await resolveText('Initial');
+    await act(() => root.render(<App />));
+    assertLog(['Initial']);
+    expect(container.textContent).toBe('Initial');
+
+    // This should suspend because form actions are implicitly wrapped
+    // in startTransition.
+    await submit(formRef.current);
+    assertLog(['Pending...', 'Suspend! [Updated]', 'Loading...']);
+    expect(container.textContent).toBe('Pending...Initial');
+
+    await act(() => resolveText('Updated'));
+    assertLog(['Updated']);
+    expect(container.textContent).toBe('Updated');
+  });
+
+  it('multiple form actions', async () => {
+    const formRef = React.createRef();
+
+    function Status() {
+      const {pending} = useFormStatus();
+      return pending ? <Text text="Pending..." /> : null;
+    }
+
+    function App() {
+      const [state, setState] = useState(0);
+      return (
+        <form action={() => setState(n => n + 1)} ref={formRef}>
+          <Status />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={'Count: ' + state} />
+          </Suspense>
+        </form>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await resolveText('Count: 0');
+    await act(() => root.render(<App />));
+    assertLog(['Count: 0']);
+    expect(container.textContent).toBe('Count: 0');
+
+    // Update
+    await submit(formRef.current);
+    assertLog(['Pending...', 'Suspend! [Count: 1]', 'Loading...']);
+    expect(container.textContent).toBe('Pending...Count: 0');
+
+    await act(() => resolveText('Count: 1'));
+    assertLog(['Count: 1']);
+    expect(container.textContent).toBe('Count: 1');
+
+    // Update again
+    await submit(formRef.current);
+    assertLog(['Pending...', 'Suspend! [Count: 2]', 'Loading...']);
+    expect(container.textContent).toBe('Pending...Count: 1');
+
+    await act(() => resolveText('Count: 2'));
+    assertLog(['Count: 2']);
+    expect(container.textContent).toBe('Count: 2');
+  });
+
+  it('form actions can be asynchronous', async () => {
+    const formRef = React.createRef();
+
+    function Status() {
+      const {pending} = useFormStatus();
+      return pending ? <Text text="Pending..." /> : null;
+    }
+
+    function App() {
+      const [state, setState] = useState('Initial');
+      return (
+        <form
+          action={async () => {
+            Scheduler.log('Async action started');
+            await getText('Wait');
+            startTransition(() => setState('Updated'));
+          }}
+          ref={formRef}>
+          <Status />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={state} />
+          </Suspense>
+        </form>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await resolveText('Initial');
+    await act(() => root.render(<App />));
+    assertLog(['Initial']);
+    expect(container.textContent).toBe('Initial');
+
+    await submit(formRef.current);
+    assertLog(['Async action started', 'Pending...']);
+
+    await act(() => resolveText('Wait'));
+    assertLog(['Suspend! [Updated]', 'Loading...']);
+    expect(container.textContent).toBe('Pending...Initial');
+
+    await act(() => resolveText('Updated'));
+    assertLog(['Updated']);
+    expect(container.textContent).toBe('Updated');
+  });
+
+  it('sync errors in form actions can be captured by an error boundary', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const formRef = React.createRef();
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <form
+            action={() => {
+              throw new Error('Oh no!');
+            }}
+            ref={formRef}>
+            <Text text="Everything is fine" />
+          </form>
+        </ErrorBoundary>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['Everything is fine']);
+    expect(container.textContent).toBe('Everything is fine');
+
+    await submit(formRef.current);
+    assertLog(['Oh no!', 'Oh no!']);
+    expect(container.textContent).toBe('Oh no!');
+  });
+
+  it('async errors in form actions can be captured by an error boundary', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const formRef = React.createRef();
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <form
+            action={async () => {
+              Scheduler.log('Async action started');
+              await getText('Wait');
+              throw new Error('Oh no!');
+            }}
+            ref={formRef}>
+            <Text text="Everything is fine" />
+          </form>
+        </ErrorBoundary>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['Everything is fine']);
+    expect(container.textContent).toBe('Everything is fine');
+
+    await submit(formRef.current);
+    assertLog(['Async action started']);
+    expect(container.textContent).toBe('Everything is fine');
+
+    await act(() => resolveText('Wait'));
+    assertLog(['Oh no!', 'Oh no!']);
+    expect(container.textContent).toBe('Oh no!');
+  });
+
+  it('useFormStatus reads the status of a pending form action', async () => {
+    const formRef = React.createRef();
+
+    function Status() {
+      const {pending, data, action, method} = useFormStatus();
+      if (!pending) {
+        return <Text text="No pending action" />;
+      } else {
+        const foo = data.get('foo');
+        return (
+          <Text
+            text={`Pending action ${action.name}: foo is ${foo}, method is ${method}`}
+          />
+        );
+      }
+    }
+
+    async function myAction() {
+      Scheduler.log('Async action started');
+      await getText('Wait');
+      Scheduler.log('Async action finished');
+    }
+
+    function App() {
+      return (
+        <form action={myAction} ref={formRef}>
+          <input type="text" name="foo" defaultValue="bar" />
+          <Status />
+        </form>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['No pending action']);
+    expect(container.textContent).toBe('No pending action');
+
+    await submit(formRef.current);
+    assertLog([
+      'Async action started',
+      'Pending action myAction: foo is bar, method is get',
+    ]);
+    expect(container.textContent).toBe(
+      'Pending action myAction: foo is bar, method is get',
+    );
+
+    await act(() => resolveText('Wait'));
+    assertLog(['Async action finished', 'No pending action']);
+  });
+
+  it('should error if submitting a form manually', async () => {
+    const ref = React.createRef();
+
+    let error = null;
+    let result = null;
+
+    function emulateForceSubmit(submitter) {
+      const form = submitter.form || submitter;
+      const action =
+        (submitter && submitter.getAttribute('formaction')) || form.action;
+      try {
+        if (!/\s*javascript:/i.test(action)) {
+          throw new Error('Navigate to: ' + action);
+        } else {
+          // eslint-disable-next-line no-new-func
+          result = Function(action.slice(11))();
+        }
+      } catch (x) {
+        error = x;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form
+          action={() => {}}
+          ref={ref}
+          onSubmit={e => {
+            e.preventDefault();
+            emulateForceSubmit(e.target);
+          }}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>,
+      );
+    });
+
+    // This submits the form, which gets blocked and then resubmitted. It's a somewhat
+    // common idiom but we don't support this pattern unless it uses requestSubmit().
+    await submit(ref.current);
+    expect(result).toBe(null);
+    expect(error.message).toContain(
+      'A React form was unexpectedly submitted. If you called form.submit()',
+    );
+  });
+
+  it('useActionState updates state asynchronously and queues multiple actions', async () => {
+    let actionCounter = 0;
+    async function action(state, type) {
+      actionCounter++;
+
+      Scheduler.log(`Async action started [${actionCounter}]`);
+      await getText(`Wait [${actionCounter}]`);
+
+      switch (type) {
+        case 'increment':
+          return state + 1;
+        case 'decrement':
+          return state - 1;
+        default:
+          return state;
+      }
+    }
+
+    let dispatch;
+    function App() {
+      const [state, _dispatch, isPending] = useActionState(action, 0);
+      dispatch = _dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['0']);
+    expect(container.textContent).toBe('0');
+
+    await act(() => startTransition(() => dispatch('increment')));
+    assertLog(['Async action started [1]', 'Pending 0']);
+    expect(container.textContent).toBe('Pending 0');
+
+    // Dispatch a few more actions. None of these will start until the previous
+    // one finishes.
+    await act(() => startTransition(() => dispatch('increment')));
+    await act(() => startTransition(() => dispatch('decrement')));
+    await act(() => startTransition(() => dispatch('increment')));
+    assertLog([]);
+
+    // Each action starts as soon as the previous one finishes.
+    // NOTE: React does not render in between these actions because they all
+    // update the same queue, which means they get entangled together. This is
+    // intentional behavior.
+    await act(() => resolveText('Wait [1]'));
+    assertLog(['Async action started [2]']);
+    await act(() => resolveText('Wait [2]'));
+    assertLog(['Async action started [3]']);
+    await act(() => resolveText('Wait [3]'));
+    assertLog(['Async action started [4]']);
+    await act(() => resolveText('Wait [4]'));
+
+    // Finally the last action finishes and we can render the result.
+    assertLog(['2']);
+    expect(container.textContent).toBe('2');
+  });
+
+  it('useActionState supports inline actions', async () => {
+    let increment;
+    function App({stepSize}) {
+      const [state, dispatch, isPending] = useActionState(async prevState => {
+        return prevState + stepSize;
+      }, 0);
+      increment = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    // Initial render
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App stepSize={1} />));
+    assertLog(['0']);
+
+    // Perform an action. This will increase the state by 1, as defined by the
+    // stepSize prop.
+    await act(() => startTransition(() => increment()));
+    assertLog(['Pending 0', '1']);
+
+    // Now increase the stepSize prop to 10. Subsequent steps will increase
+    // by this amount.
+    await act(() => root.render(<App stepSize={10} />));
+    assertLog(['1']);
+
+    // Increment again. The state should increase by 10.
+    await act(() => startTransition(() => increment()));
+    assertLog(['Pending 1', '11']);
+  });
+
+  it('useActionState: dispatch throws if called during render', async () => {
+    function App() {
+      const [state, dispatch, isPending] = useActionState(async () => {}, 0);
+      dispatch();
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+      await waitForThrow('Cannot update form state while rendering.');
+    });
+  });
+
+  it('useActionState: queues multiple actions and runs them in order', async () => {
+    let action;
+    function App() {
+      const [state, dispatch, isPending] = useActionState(
+        async (s, a) => await getText(a),
+        'A',
+      );
+      action = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['A']);
+
+    await act(() => startTransition(() => action('B')));
+    // The first dispatch will update the pending state.
+    assertLog(['Pending A']);
+    await act(() => startTransition(() => action('C')));
+    await act(() => startTransition(() => action('D')));
+    assertLog([]);
+
+    await act(() => resolveText('B'));
+    await act(() => resolveText('C'));
+    await act(() => resolveText('D'));
+
+    assertLog(['D']);
+    expect(container.textContent).toBe('D');
+  });
+
+  it(
+    'useActionState: when calling a queued action, uses the implementation ' +
+      'that was current at the time it was dispatched, not the most recent one',
+    async () => {
+      let action;
+      function App({throwIfActionIsDispatched}) {
+        const [state, dispatch, isPending] = useActionState(async (s, a) => {
+          if (throwIfActionIsDispatched) {
+            throw new Error('Oops!');
+          }
+          return await getText(a);
+        }, 'Initial');
+        action = dispatch;
+        return <Text text={state + (isPending ? ' (pending)' : '')} />;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<App throwIfActionIsDispatched={false} />));
+      assertLog(['Initial']);
+
+      // Dispatch two actions. The first one is async, so it forces the second
+      // one into an async queue.
+      await act(() => startTransition(() => action('First action')));
+      assertLog(['Initial (pending)']);
+      // This action won't run until the first one finishes.
+      await act(() => startTransition(() => action('Second action')));
+
+      // While the first action is still pending, update a prop. This causes the
+      // inline action implementation to change, but it should not affect the
+      // behavior of the action that is already queued.
+      await act(() => root.render(<App throwIfActionIsDispatched={true} />));
+      assertLog(['Initial (pending)']);
+
+      // Finish both of the actions.
+      await act(() => resolveText('First action'));
+      await act(() => resolveText('Second action'));
+      assertLog(['Second action']);
+
+      // Confirm that if we dispatch yet another action, it uses the updated
+      // action implementation.
+      await expect(
+        act(() => startTransition(() => action('Third action'))),
+      ).rejects.toThrow('Oops!');
+    },
+  );
+
+  it('useActionState: works if action is sync', async () => {
+    let increment;
+    function App({stepSize}) {
+      const [state, dispatch, isPending] = useActionState(prevState => {
+        return prevState + stepSize;
+      }, 0);
+      increment = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    // Initial render
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App stepSize={1} />));
+    assertLog(['0']);
+
+    // Perform an action. This will increase the state by 1, as defined by the
+    // stepSize prop.
+    await act(() => startTransition(() => increment()));
+    assertLog(['Pending 0', '1']);
+
+    // Now increase the stepSize prop to 10. Subsequent steps will increase
+    // by this amount.
+    await act(() => root.render(<App stepSize={10} />));
+    assertLog(['1']);
+
+    // Increment again. The state should increase by 10.
+    await act(() => startTransition(() => increment()));
+    assertLog(['Pending 1', '11']);
+  });
+
+  it('useActionState: can mix sync and async actions', async () => {
+    let action;
+    function App() {
+      const [state, dispatch, isPending] = useActionState((s, a) => a, 'A');
+      action = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['A']);
+
+    await act(() => startTransition(() => action(getText('B'))));
+    // The first dispatch will update the pending state.
+    assertLog(['Pending A']);
+    await act(() => startTransition(() => action('C')));
+    await act(() => startTransition(() => action(getText('D'))));
+    await act(() => startTransition(() => action('E')));
+    assertLog([]);
+
+    await act(() => resolveText('B'));
+    await act(() => resolveText('D'));
+    assertLog(['E']);
+    expect(container.textContent).toBe('E');
+  });
+
+  it('useActionState: error handling (sync action)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={'Caught an error: ' + this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let action;
+    function App() {
+      const [state, dispatch, isPending] = useActionState((s, a) => {
+        if (a.endsWith('!')) {
+          throw new Error(a);
+        }
+        return a;
+      }, 'A');
+      action = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() =>
+      root.render(
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>,
+      ),
+    );
+    assertLog(['A']);
+
+    await act(() => startTransition(() => action('Oops!')));
+    assertLog([
+      // Action begins, error has not thrown yet.
+      'Pending A',
+      // Now the action runs and throws.
+      'Caught an error: Oops!',
+      'Caught an error: Oops!',
+    ]);
+    expect(container.textContent).toBe('Caught an error: Oops!');
+  });
+
+  it('useActionState: error handling (async action)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={'Caught an error: ' + this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let action;
+    function App() {
+      const [state, dispatch, isPending] = useActionState(async (s, a) => {
+        const text = await getText(a);
+        if (text.endsWith('!')) {
+          throw new Error(text);
+        }
+        return text;
+      }, 'A');
+      action = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() =>
+      root.render(
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>,
+      ),
+    );
+    assertLog(['A']);
+
+    await act(() => startTransition(() => action('Oops!')));
+    // The first dispatch will update the pending state.
+    assertLog(['Pending A']);
+    await act(() => resolveText('Oops!'));
+    assertLog(['Caught an error: Oops!', 'Caught an error: Oops!']);
+    expect(container.textContent).toBe('Caught an error: Oops!');
+  });
+
+  it('useActionState: when an action errors, subsequent actions are canceled', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={'Caught an error: ' + this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let action;
+    function App() {
+      const [state, dispatch, isPending] = useActionState(async (s, a) => {
+        Scheduler.log('Start action: ' + a);
+        const text = await getText(a);
+        if (text.endsWith('!')) {
+          throw new Error(text);
+        }
+        return text;
+      }, 'A');
+      action = dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() =>
+      root.render(
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>,
+      ),
+    );
+    assertLog(['A']);
+
+    await act(() => startTransition(() => action('Oops!')));
+    assertLog(['Start action: Oops!', 'Pending A']);
+
+    // Queue up another action after the one will error.
+    await act(() => startTransition(() => action('Should never run')));
+    assertLog([]);
+
+    // The first dispatch will update the pending state.
+    await act(() => resolveText('Oops!'));
+    assertLog(['Caught an error: Oops!', 'Caught an error: Oops!']);
+    expect(container.textContent).toBe('Caught an error: Oops!');
+
+    // Attempt to dispatch another action. This should not run either.
+    await act(() =>
+      startTransition(() => action('This also should never run')),
+    );
+    assertLog([]);
+    expect(container.textContent).toBe('Caught an error: Oops!');
+  });
+
+  it('useActionState works in StrictMode', async () => {
+    let actionCounter = 0;
+    async function action(state, type) {
+      actionCounter++;
+
+      Scheduler.log(`Async action started [${actionCounter}]`);
+      await getText(`Wait [${actionCounter}]`);
+
+      switch (type) {
+        case 'increment':
+          return state + 1;
+        case 'decrement':
+          return state - 1;
+        default:
+          return state;
+      }
+    }
+
+    let dispatch;
+    function App() {
+      const [state, _dispatch, isPending] = useActionState(action, 0);
+      dispatch = _dispatch;
+      const pending = isPending ? 'Pending ' : '';
+      return <Text text={pending + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+    assertLog(['0']);
+    expect(container.textContent).toBe('0');
+
+    await act(() => startTransition(() => dispatch('increment')));
+    assertLog(['Async action started [1]', 'Pending 0']);
+    expect(container.textContent).toBe('Pending 0');
+
+    await act(() => resolveText('Wait [1]'));
+    assertLog(['1']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('useActionState does not wrap action in a transition unless dispatch is in a transition', async () => {
+    let dispatch;
+    function App() {
+      const [state, _dispatch] = useActionState(() => {
+        return state + 1;
+      }, 0);
+      dispatch = _dispatch;
+      return <AsyncText text={'Count: ' + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() =>
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <App />
+        </Suspense>,
+      ),
+    );
+    assertLog([
+      'Suspend! [Count: 0]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Count: 0]',
+    ]);
+    await act(() => resolveText('Count: 0'));
+    assertLog(['Count: 0']);
+
+    // Dispatch outside of a transition. This will trigger a loading state.
+    await act(() => dispatch());
+    assertLog([
+      'Suspend! [Count: 1]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Count: 1]',
+    ]);
+    expect(container.textContent).toBe('Loading...');
+
+    await act(() => resolveText('Count: 1'));
+    assertLog(['Count: 1']);
+    expect(container.textContent).toBe('Count: 1');
+
+    // Now dispatch inside of a transition. This one does not trigger a
+    // loading state.
+    await act(() => startTransition(() => dispatch()));
+    assertLog(['Count: 1', 'Suspend! [Count: 2]', 'Loading...']);
+    expect(container.textContent).toBe('Count: 1');
+
+    await act(() => resolveText('Count: 2'));
+    assertLog(['Count: 2']);
+    expect(container.textContent).toBe('Count: 2');
+  });
+
+  it('useActionState warns if async action is dispatched outside of a transition', async () => {
+    let dispatch;
+    function App() {
+      const [state, _dispatch] = useActionState(async () => {
+        return state + 1;
+      }, 0);
+      dispatch = _dispatch;
+      return <AsyncText text={'Count: ' + state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog([
+      'Suspend! [Count: 0]',
+      // pre-warming
+      'Suspend! [Count: 0]',
+    ]);
+    await act(() => resolveText('Count: 0'));
+    assertLog(['Count: 0']);
+
+    // Dispatch outside of a transition.
+    await act(() => dispatch());
+    assertConsoleErrorDev([
+      [
+        'An async function with useActionState was called outside of a transition. ' +
+          'This is likely not what you intended (for example, isPending will not update ' +
+          'correctly). Either call the returned function inside startTransition, or pass it ' +
+          'to an `action` or `formAction` prop.',
+        {withoutStack: true},
+      ],
+    ]);
+    assertLog([
+      'Suspend! [Count: 1]',
+      // pre-warming
+      'Suspend! [Count: 1]',
+    ]);
+    expect(container.textContent).toBe('Count: 0');
+  });
+
+  it('uncontrolled form inputs are reset after the action completes', async () => {
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const divRef = React.createRef();
+
+    function App({promiseForUsername}) {
+      // Make this suspensey to simulate RSC streaming.
+      const username = use(promiseForUsername);
+
+      return (
+        <form
+          ref={formRef}
+          action={async formData => {
+            const rawUsername = formData.get('username');
+            const normalizedUsername = rawUsername.trim().toLowerCase();
+
+            Scheduler.log(`Async action started`);
+            await getText('Wait');
+
+            // Update the app with new data. This is analagous to re-rendering
+            // from the root with a new RSC payload.
+            startTransition(() => {
+              root.render(
+                <App promiseForUsername={getText(normalizedUsername)} />,
+              );
+            });
+          }}>
+          <input
+            ref={inputRef}
+            text="text"
+            name="username"
+            defaultValue={username}
+          />
+          <div ref={divRef}>
+            <Text text={'Current username: ' + username} />
+          </div>
+        </form>
+      );
+    }
+
+    // Initial render
+    const root = ReactDOMClient.createRoot(container);
+    const promiseForInitialUsername = getText('(empty)');
+    await resolveText('(empty)');
+    await act(() =>
+      root.render(<App promiseForUsername={promiseForInitialUsername} />),
+    );
+    assertLog(['Current username: (empty)']);
+    expect(divRef.current.textContent).toEqual('Current username: (empty)');
+
+    // Dirty the uncontrolled input
+    inputRef.current.value = '  AcdLite  ';
+
+    // Submit the form. This will trigger an async action.
+    await submit(formRef.current);
+    assertLog(['Async action started']);
+    expect(inputRef.current.value).toBe('  AcdLite  ');
+
+    // Finish the async action. This will trigger a re-render from the root with
+    // new data from the "server", which suspends.
+    //
+    // The form should not reset yet because we need to update `defaultValue`
+    // first. So we wait for the render to complete.
+    await act(() => resolveText('Wait'));
+    assertLog([]);
+    // The DOM input is still dirty.
+    expect(inputRef.current.value).toBe('  AcdLite  ');
+    // The React tree is suspended.
+    expect(divRef.current.textContent).toEqual('Current username: (empty)');
+
+    // Unsuspend and finish rendering. Now the form should be reset.
+    await act(() => resolveText('acdlite'));
+    assertLog(['Current username: acdlite']);
+    // The form was reset to the new value from the server.
+    expect(inputRef.current.value).toBe('acdlite');
+    expect(divRef.current.textContent).toEqual('Current username: acdlite');
+  });
+
+  it('requestFormReset schedules a form reset after transition completes', async () => {
+    // This is the same as the previous test, except the form is updated with
+    // a userspace action instead of a built-in form action.
+
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const divRef = React.createRef();
+
+    function App({promiseForUsername}) {
+      // Make this suspensey to simulate RSC streaming.
+      const username = use(promiseForUsername);
+
+      return (
+        <form ref={formRef}>
+          <input
+            ref={inputRef}
+            text="text"
+            name="username"
+            defaultValue={username}
+          />
+          <div ref={divRef}>
+            <Text text={'Current username: ' + username} />
+          </div>
+        </form>
+      );
+    }
+
+    // Initial render
+    const root = ReactDOMClient.createRoot(container);
+    const promiseForInitialUsername = getText('(empty)');
+    await resolveText('(empty)');
+    await act(() =>
+      root.render(<App promiseForUsername={promiseForInitialUsername} />),
+    );
+    assertLog(['Current username: (empty)']);
+    expect(divRef.current.textContent).toEqual('Current username: (empty)');
+
+    // Dirty the uncontrolled input
+    inputRef.current.value = '  AcdLite  ';
+
+    // This is a userspace action. It does not trigger a real form submission.
+    // The practical use case is implementing a custom action prop using
+    // onSubmit without losing the built-in form resetting behavior.
+    await act(() => {
+      startTransition(async () => {
+        const form = formRef.current;
+        const formData = new FormData(form);
+        requestFormReset(form);
+
+        const rawUsername = formData.get('username');
+        const normalizedUsername = rawUsername.trim().toLowerCase();
+
+        Scheduler.log(`Async action started`);
+        await getText('Wait');
+
+        // Update the app with new data. This is analagous to re-rendering
+        // from the root with a new RSC payload.
+        startTransition(() => {
+          root.render(<App promiseForUsername={getText(normalizedUsername)} />);
+        });
+      });
+    });
+    assertLog(['Async action started']);
+    expect(inputRef.current.value).toBe('  AcdLite  ');
+
+    // Finish the async action. This will trigger a re-render from the root with
+    // new data from the "server", which suspends.
+    //
+    // The form should not reset yet because we need to update `defaultValue`
+    // first. So we wait for the render to complete.
+    await act(() => resolveText('Wait'));
+    assertLog([]);
+    // The DOM input is still dirty.
+    expect(inputRef.current.value).toBe('  AcdLite  ');
+    // The React tree is suspended.
+    expect(divRef.current.textContent).toEqual('Current username: (empty)');
+
+    // Unsuspend and finish rendering. Now the form should be reset.
+    await act(() => resolveText('acdlite'));
+    assertLog(['Current username: acdlite']);
+    // The form was reset to the new value from the server.
+    expect(inputRef.current.value).toBe('acdlite');
+    expect(divRef.current.textContent).toEqual('Current username: acdlite');
+  });
+
+  it('parallel form submissions do not throw', async () => {
+    const formRef = React.createRef();
+    let resolve = null;
+    function App() {
+      async function submitForm() {
+        Scheduler.log('Action');
+        if (!resolve) {
+          await new Promise(res => {
+            resolve = res;
+          });
+        }
+      }
+      return <form ref={formRef} action={submitForm} />;
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+
+    // Start first form submission
+    await act(async () => {
+      formRef.current.requestSubmit();
+    });
+    assertLog(['Action']);
+
+    // Submit form again while first form action is still pending
+    await act(async () => {
+      formRef.current.requestSubmit();
+      resolve(); // Resolve the promise to allow the first form action to complete
+    });
+    assertLog(['Action']);
+  });
+
+  it(
+    'requestFormReset works with inputs that are not descendants ' +
+      'of the form element',
+    async () => {
+      // This is the same as the previous test, except the input is not a child
+      // of the form; it's linked with <input form="myform" />
+
+      const formRef = React.createRef();
+      const inputRef = React.createRef();
+      const divRef = React.createRef();
+
+      function App({promiseForUsername}) {
+        // Make this suspensey to simulate RSC streaming.
+        const username = use(promiseForUsername);
+
+        return (
+          <>
+            <form id="myform" ref={formRef} />
+            <input
+              form="myform"
+              ref={inputRef}
+              text="text"
+              name="username"
+              defaultValue={username}
+            />
+            <div ref={divRef}>
+              <Text text={'Current username: ' + username} />
+            </div>
+          </>
+        );
+      }
+
+      // Initial render
+      const root = ReactDOMClient.createRoot(container);
+      const promiseForInitialUsername = getText('(empty)');
+      await resolveText('(empty)');
+      await act(() =>
+        root.render(<App promiseForUsername={promiseForInitialUsername} />),
+      );
+      assertLog(['Current username: (empty)']);
+      expect(divRef.current.textContent).toEqual('Current username: (empty)');
+
+      // Dirty the uncontrolled input
+      inputRef.current.value = '  AcdLite  ';
+
+      // This is a userspace action. It does not trigger a real form submission.
+      // The practical use case is implementing a custom action prop using
+      // onSubmit without losing the built-in form resetting behavior.
+      await act(() => {
+        startTransition(async () => {
+          const form = formRef.current;
+          const formData = new FormData(form);
+          requestFormReset(form);
+
+          const rawUsername = formData.get('username');
+          const normalizedUsername = rawUsername.trim().toLowerCase();
+
+          Scheduler.log(`Async action started`);
+          await getText('Wait');
+
+          // Update the app with new data. This is analagous to re-rendering
+          // from the root with a new RSC payload.
+          startTransition(() => {
+            root.render(
+              <App promiseForUsername={getText(normalizedUsername)} />,
+            );
+          });
+        });
+      });
+      assertLog(['Async action started']);
+      expect(inputRef.current.value).toBe('  AcdLite  ');
+
+      // Finish the async action. This will trigger a re-render from the root with
+      // new data from the "server", which suspends.
+      //
+      // The form should not reset yet because we need to update `defaultValue`
+      // first. So we wait for the render to complete.
+      await act(() => resolveText('Wait'));
+      assertLog([]);
+      // The DOM input is still dirty.
+      expect(inputRef.current.value).toBe('  AcdLite  ');
+      // The React tree is suspended.
+      expect(divRef.current.textContent).toEqual('Current username: (empty)');
+
+      // Unsuspend and finish rendering. Now the form should be reset.
+      await act(() => resolveText('acdlite'));
+      assertLog(['Current username: acdlite']);
+      // The form was reset to the new value from the server.
+      expect(inputRef.current.value).toBe('acdlite');
+      expect(divRef.current.textContent).toEqual('Current username: acdlite');
+    },
+  );
+
+  it('reset multiple forms in the same transition', async () => {
+    const formRefA = React.createRef();
+    const formRefB = React.createRef();
+
+    function App({promiseForA, promiseForB}) {
+      // Make these suspensey to simulate RSC streaming.
+      const a = use(promiseForA);
+      const b = use(promiseForB);
+      return (
+        <>
+          <form ref={formRefA}>
+            <input type="text" name="inputName" defaultValue={a} />
+          </form>
+          <form ref={formRefB}>
+            <input type="text" name="inputName" defaultValue={b} />
+          </form>
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    const initialPromiseForA = getText('A1');
+    const initialPromiseForB = getText('B1');
+    await resolveText('A1');
+    await resolveText('B1');
+    await act(() =>
+      root.render(
+        <App
+          promiseForA={initialPromiseForA}
+          promiseForB={initialPromiseForB}
+        />,
+      ),
+    );
+
+    // Dirty the uncontrolled inputs
+    formRefA.current.elements.inputName.value = '       A2       ';
+    formRefB.current.elements.inputName.value = '       B2       ';
+
+    // Trigger an async action that updates and reset both forms.
+    await act(() => {
+      startTransition(async () => {
+        const currentA = formRefA.current.elements.inputName.value;
+        const currentB = formRefB.current.elements.inputName.value;
+
+        requestFormReset(formRefA.current);
+        requestFormReset(formRefB.current);
+
+        Scheduler.log('Async action started');
+        await getText('Wait');
+
+        // Pretend the server did something with the data.
+        const normalizedA = currentA.trim();
+        const normalizedB = currentB.trim();
+
+        // Update the app with new data. This is analagous to re-rendering
+        // from the root with a new RSC payload.
+        startTransition(() => {
+          root.render(
+            <App
+              promiseForA={getText(normalizedA)}
+              promiseForB={getText(normalizedB)}
+            />,
+          );
+        });
+      });
+    });
+    assertLog(['Async action started']);
+
+    // Finish the async action. This will trigger a re-render from the root with
+    // new data from the "server", which suspends.
+    //
+    // The forms should not reset yet because we need to update `defaultValue`
+    // first. So we wait for the render to complete.
+    await act(() => resolveText('Wait'));
+
+    // The DOM inputs are still dirty.
+    expect(formRefA.current.elements.inputName.value).toBe('       A2       ');
+    expect(formRefB.current.elements.inputName.value).toBe('       B2       ');
+
+    // Unsuspend and finish rendering. Now the forms should be reset.
+    await act(() => {
+      resolveText('A2');
+      resolveText('B2');
+    });
+    // The forms were reset to the new value from the server.
+    expect(formRefA.current.elements.inputName.value).toBe('A2');
+    expect(formRefB.current.elements.inputName.value).toBe('B2');
+  });
+
+  it('requestFormReset throws if the form is not managed by React', async () => {
+    container.innerHTML = `
+      <form id="myform">
+        <input id="input" type="text" name="greeting" />
+      </form>
+    `;
+
+    const form = document.getElementById('myform');
+    const input = document.getElementById('input');
+
+    input.value = 'Hi!!!!!!!!!!!!!';
+
+    expect(() => requestFormReset(form)).toThrow('Invalid form element.');
+    // The form was not reset.
+    expect(input.value).toBe('Hi!!!!!!!!!!!!!');
+
+    // Just confirming a regular form reset works fine.
+    form.reset();
+    expect(input.value).toBe('');
+  });
+
+  it('requestFormReset throws on a non-form DOM element', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    const ref = React.createRef();
+    await act(() => root.render(<div ref={ref}>Hi</div>));
+    const div = ref.current;
+    expect(div.textContent).toBe('Hi');
+
+    expect(() => requestFormReset(div)).toThrow('Invalid form element.');
+  });
+
+  it('warns if requestFormReset is called outside of a transition', async () => {
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+
+    function App() {
+      return (
+        <form ref={formRef}>
+          <input ref={inputRef} type="text" defaultValue="Initial" />
+        </form>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+
+    // Dirty the uncontrolled input
+    inputRef.current.value = '  Updated  ';
+
+    // Trigger an async action that updates and reset both forms.
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Action started');
+        await getText('Wait 1');
+        Scheduler.log('Request form reset');
+
+        // This happens after an `await`, and is not wrapped in startTransition,
+        // so it will be scheduled synchronously instead of with the transition.
+        // This is almost certainly a mistake, so we log a warning in dev.
+        requestFormReset(formRef.current);
+
+        await getText('Wait 2');
+        Scheduler.log('Action finished');
+      });
+    });
+    assertLog(['Action started']);
+    expect(inputRef.current.value).toBe('  Updated  ');
+
+    // This triggers a synchronous requestFormReset, and a warning
+    await act(() => resolveText('Wait 1'));
+    assertConsoleErrorDev(
+      [
+        'requestFormReset was called outside a transition or action. ' +
+          'To fix, move to an action, or wrap with startTransition.',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+    assertLog(['Request form reset']);
+
+    // The form was reset even though the action didn't finish.
+    expect(inputRef.current.value).toBe('Initial');
+  });
+
+  it("regression: submitter's formAction prop is coerced correctly before checking if it exists", async () => {
+    function App({submitterAction}) {
+      return (
+        <form action={() => Scheduler.log('Form action')}>
+          <button ref={buttonRef} type="submit" formAction={submitterAction} />
+        </form>
+      );
+    }
+
+    const buttonRef = React.createRef();
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() =>
+      root.render(
+        <App submitterAction={() => Scheduler.log('Button action')} />,
+      ),
+    );
+    await submit(buttonRef.current);
+    assertLog(['Button action']);
+
+    // When there's no button action, the form action should fire
+    await act(() => root.render(<App submitterAction={null} />));
+    await submit(buttonRef.current);
+    assertLog(['Form action']);
+
+    // Symbols are coerced to null, so this should fire the form action
+    await act(() => root.render(<App submitterAction={Symbol()} />));
+    assertConsoleErrorDev([
+      'Invalid value for prop `formAction` on <button> tag. ' +
+        'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+        'For details, see https://react.dev/link/attribute-behavior \n' +
+        '    in button (at **)\n' +
+        '    in App (at **)',
+    ]);
+    await submit(buttonRef.current);
+    assertLog(['Form action']);
+
+    // Booleans are coerced to null, so this should fire the form action
+    await act(() => root.render(<App submitterAction={true} />));
+    await submit(buttonRef.current);
+    assertLog(['Form action']);
+
+    // A string on the submitter should prevent the form action from firing
+    // and trigger the native behavior
+    await act(() => root.render(<App submitterAction="https://react.dev/" />));
+    await expect(submit(buttonRef.current)).rejects.toThrow(
+      'Navigate to: https://react.dev/',
+    );
+  });
+
+  it(
+    'useFormStatus is activated if startTransition is called ' +
+      'inside preventDefault-ed submit event',
+    async () => {
+      function Output({value}) {
+        const {pending} = useFormStatus();
+        return <Text text={pending ? `${value} (pending...)` : value} />;
+      }
+
+      function App({value}) {
+        const [, startFormTransition] = useTransition();
+
+        function onSubmit(event) {
+          event.preventDefault();
+          startFormTransition(async () => {
+            const updatedValue = event.target.elements.search.value;
+            Scheduler.log('Action started');
+            await getText('Wait');
+            Scheduler.log('Action finished');
+            startTransition(() => root.render(<App value={updatedValue} />));
+          });
+        }
+        return (
+          <form ref={formRef} onSubmit={onSubmit}>
+            <input
+              ref={inputRef}
+              type="text"
+              name="search"
+              defaultValue={value}
+            />
+            <div ref={outputRef}>
+              <Output value={value} />
+            </div>
+          </form>
+        );
+      }
+
+      const formRef = React.createRef();
+      const inputRef = React.createRef();
+      const outputRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<App value="Initial" />));
+      assertLog(['Initial']);
+
+      // Update the input to something different
+      inputRef.current.value = 'Updated';
+
+      // Submit the form.
+      await submit(formRef.current);
+      // The form switches into a pending state.
+      assertLog(['Action started', 'Initial (pending...)']);
+      expect(outputRef.current.textContent).toBe('Initial (pending...)');
+
+      // While the submission is still pending, update the input again so we
+      // can check whether the form is reset after the action finishes.
+      inputRef.current.value = 'Updated again after submission';
+
+      // Resolve the async action
+      await act(() => resolveText('Wait'));
+      assertLog(['Action finished', 'Updated']);
+      expect(outputRef.current.textContent).toBe('Updated');
+
+      // Confirm that the form was not automatically reset (should call
+      // requestFormReset(formRef.current) to opt into this behavior)
+      expect(inputRef.current.value).toBe('Updated again after submission');
+    },
+  );
+
+  it('useFormStatus is not activated if startTransition is not called', async () => {
+    function Output({value}) {
+      const {pending} = useFormStatus();
+
+      return (
+        <Text
+          text={
+            pending
+              ? 'Should be unreachable! This test should never activate the pending state.'
+              : value
+          }
+        />
+      );
+    }
+
+    function App({value}) {
+      async function onSubmit(event) {
+        event.preventDefault();
+        const updatedValue = event.target.elements.search.value;
+        Scheduler.log('Async event handler started');
+        await getText('Wait');
+        Scheduler.log('Async event handler finished');
+        startTransition(() => root.render(<App value={updatedValue} />));
+      }
+      return (
+        <form ref={formRef} onSubmit={onSubmit}>
+          <input
+            ref={inputRef}
+            type="text"
+            name="search"
+            defaultValue={value}
+          />
+          <div ref={outputRef}>
+            <Output value={value} />
+          </div>
+        </form>
+      );
+    }
+
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const outputRef = React.createRef();
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App value="Initial" />));
+    assertLog(['Initial']);
+
+    // Update the input to something different
+    inputRef.current.value = 'Updated';
+
+    // Submit the form.
+    await submit(formRef.current);
+    // Unlike the previous test, which uses startTransition to manually dispatch
+    // an action, this test uses a regular event handler, so useFormStatus is
+    // not activated.
+    assertLog(['Async event handler started']);
+    expect(outputRef.current.textContent).toBe('Initial');
+
+    // While the submission is still pending, update the input again so we
+    // can check whether the form is reset after the action finishes.
+    inputRef.current.value = 'Updated again after submission';
+
+    // Resolve the async action
+    await act(() => resolveText('Wait'));
+    assertLog(['Async event handler finished', 'Updated']);
+    expect(outputRef.current.textContent).toBe('Updated');
+
+    // Confirm that the form was not automatically reset (should call
+    // requestFormReset(formRef.current) to opt into this behavior)
+    expect(inputRef.current.value).toBe('Updated again after submission');
+  });
+
+  it('useFormStatus is not activated if event is not preventDefault-ed', async () => {
+    function Output({value}) {
+      const {pending} = useFormStatus();
+      return <Text text={pending ? `${value} (pending...)` : value} />;
+    }
+
+    function App({value}) {
+      const [, startFormTransition] = useTransition();
+
+      function onSubmit(event) {
+        // This event is not preventDefault-ed, so the default form submission
+        // happens, and useFormStatus is not activated.
+        startFormTransition(async () => {
+          const updatedValue = event.target.elements.search.value;
+          Scheduler.log('Action started');
+          await getText('Wait');
+          Scheduler.log('Action finished');
+          startTransition(() => root.render(<App value={updatedValue} />));
+        });
+      }
+      return (
+        <form ref={formRef} onSubmit={onSubmit}>
+          <input
+            ref={inputRef}
+            type="text"
+            name="search"
+            defaultValue={value}
+          />
+          <div ref={outputRef}>
+            <Output value={value} />
+          </div>
+        </form>
+      );
+    }
+
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    const outputRef = React.createRef();
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App value="Initial" />));
+    assertLog(['Initial']);
+
+    // Update the input to something different
+    inputRef.current.value = 'Updated';
+
+    // Submitting the form should trigger the default navigation behavior
+    await expect(submit(formRef.current)).rejects.toThrow(
+      'Navigate to: http://localhost/',
+    );
+
+    // The useFormStatus hook was not activated
+    assertLog(['Action started', 'Initial']);
+    expect(outputRef.current.textContent).toBe('Initial');
+  });
+
+  it('useFormStatus coerces the value of the "action" prop', async () => {
+    function Status() {
+      const {pending, action} = useFormStatus();
+
+      if (pending) {
+        Scheduler.log(action);
+        return 'Pending';
+      } else {
+        return 'Not pending';
+      }
+    }
+
+    function Form({action}) {
+      const [, startFormTransition] = useTransition();
+
+      function onSubmit(event) {
+        event.preventDefault();
+        // Schedule an empty action for no other purpose than to trigger the
+        // pending state.
+        startFormTransition(async () => {});
+      }
+      return (
+        <form ref={formRef} action={action} onSubmit={onSubmit}>
+          <Status />
+        </form>
+      );
+    }
+
+    const formRef = React.createRef();
+    const root = ReactDOMClient.createRoot(container);
+
+    // Symbols are coerced to null
+    await act(() => root.render(<Form action={Symbol()} />));
+    assertConsoleErrorDev([
+      'Invalid value for prop `action` on <form> tag. ' +
+        'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+        'For details, see https://react.dev/link/attribute-behavior \n' +
+        '    in form (at **)\n' +
+        '    in Form (at **)',
+    ]);
+    await submit(formRef.current);
+    assertLog([null]);
+
+    // Booleans are coerced to null
+    await act(() => root.render(<Form action={true} />));
+    await submit(formRef.current);
+    assertLog([null]);
+
+    // Strings are passed through
+    await act(() => root.render(<Form action="https://react.dev" />));
+    await submit(formRef.current);
+    assertLog(['https://react.dev']);
+
+    // Functions are passed through
+    const actionFn = () => {};
+    await act(() => root.render(<Form action={actionFn} />));
+    await submit(formRef.current);
+    assertLog([actionFn]);
+
+    // Everything else is toString-ed
+    class MyAction {
+      toString() {
+        return 'stringified action';
+      }
+    }
+    await act(() => root.render(<Form action={new MyAction()} />));
+    await submit(formRef.current);
+    assertLog(['stringified action']);
+  });
+
+  it('form actions should retain status when nested state changes', async () => {
+    const formRef = React.createRef();
+
+    let rerenderUnrelatedStatus;
+    function UnrelatedStatus() {
+      const {pending} = useFormStatus();
+      const [counter, setCounter] = useState(0);
+      rerenderUnrelatedStatus = () => setCounter(n => n + 1);
+      Scheduler.log(`[unrelated form] pending: ${pending}, state: ${counter}`);
+    }
+
+    let rerenderTargetStatus;
+    function TargetStatus() {
+      const {pending} = useFormStatus();
+      const [counter, setCounter] = useState(0);
+      Scheduler.log(`[target form] pending: ${pending}, state: ${counter}`);
+      rerenderTargetStatus = () => setCounter(n => n + 1);
+    }
+
+    function App() {
+      async function action() {
+        return new Promise(resolve => {
+          // never resolves
+        });
+      }
+
+      return (
+        <>
+          <form action={action} ref={formRef}>
+            <input type="submit" />
+            <TargetStatus />
+          </form>
+          <form>
+            <UnrelatedStatus />
+          </form>
+        </>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+
+    assertLog([
+      '[target form] pending: false, state: 0',
+      '[unrelated form] pending: false, state: 0',
+    ]);
+
+    await submit(formRef.current);
+
+    assertLog(['[target form] pending: true, state: 0']);
+
+    await act(() => rerenderTargetStatus());
+
+    assertLog(['[target form] pending: true, state: 1']);
+
+    await act(() => rerenderUnrelatedStatus());
+
+    assertLog(['[unrelated form] pending: false, state: 1']);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js
new file mode 100644
index 00000000000..a5b9eae6fad
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js
@@ -0,0 +1,2435 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails reactcore
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let ReactDOM;
+let createPortal;
+let act;
+let container;
+let Fragment;
+let Activity;
+let mockIntersectionObserver;
+let simulateIntersection;
+let setClientRects;
+let assertConsoleErrorDev;
+
+function Wrapper({children}) {
+  return children;
+}
+
+describe('FragmentRefs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Fragment = React.Fragment;
+    Activity = React.Activity;
+    ReactDOMClient = require('react-dom/client');
+    ReactDOM = require('react-dom');
+    createPortal = ReactDOM.createPortal;
+    act = require('internal-test-utils').act;
+    const IntersectionMocks = require('./utils/IntersectionMocks');
+    mockIntersectionObserver = IntersectionMocks.mockIntersectionObserver;
+    simulateIntersection = IntersectionMocks.simulateIntersection;
+    setClientRects = IntersectionMocks.setClientRects;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    container = document.createElement('div');
+    document.body.innerHTML = '';
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  // @gate enableFragmentRefs
+  it('attaches a ref to Fragment', async () => {
+    const fragmentRef = React.createRef();
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() =>
+      root.render(
+        <div id="parent">
+          <Fragment ref={fragmentRef}>
+            <div id="child">Hi</div>
+          </Fragment>
+        </div>,
+      ),
+    );
+    expect(container.innerHTML).toEqual(
+      '<div id="parent"><div id="child">Hi</div></div>',
+    );
+
+    expect(fragmentRef.current).not.toBe(null);
+  });
+
+  // @gate enableFragmentRefs
+  it('accepts a ref callback', async () => {
+    let fragmentRef;
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <Fragment ref={ref => (fragmentRef = ref)}>
+          <div id="child">Hi</div>
+        </Fragment>,
+      );
+    });
+
+    expect(fragmentRef._fragmentFiber).toBeTruthy();
+  });
+
+  // @gate enableFragmentRefs
+  it('is available in effects', async () => {
+    function Test() {
+      const fragmentRef = React.useRef(null);
+      React.useLayoutEffect(() => {
+        expect(fragmentRef.current).not.toBe(null);
+      });
+      React.useEffect(() => {
+        expect(fragmentRef.current).not.toBe(null);
+      });
+      return (
+        <Fragment ref={fragmentRef}>
+          <div />
+        </Fragment>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Test />));
+  });
+
+  // @gate enableFragmentRefs && enableFragmentRefsInstanceHandles
+  it('attaches fragment handles to nodes', async () => {
+    const fragmentParentRef = React.createRef();
+    const fragmentRef = React.createRef();
+
+    function Test({show}) {
+      return (
+        <Fragment ref={fragmentParentRef}>
+          <Fragment ref={fragmentRef}>
+            <div id="childA">A</div>
+            <div id="childB">B</div>
+          </Fragment>
+          <div id="childC">C</div>
+          {show && <div id="childD">D</div>}
+        </Fragment>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Test show={false} />));
+
+    const childA = document.querySelector('#childA');
+    const childB = document.querySelector('#childB');
+    const childC = document.querySelector('#childC');
+
+    expect(childA.unstable_reactFragments.has(fragmentRef.current)).toBe(true);
+    expect(childB.unstable_reactFragments.has(fragmentRef.current)).toBe(true);
+    expect(childC.unstable_reactFragments.has(fragmentRef.current)).toBe(false);
+    expect(childA.unstable_reactFragments.has(fragmentParentRef.current)).toBe(
+      true,
+    );
+    expect(childB.unstable_reactFragments.has(fragmentParentRef.current)).toBe(
+      true,
+    );
+    expect(childC.unstable_reactFragments.has(fragmentParentRef.current)).toBe(
+      true,
+    );
+
+    await act(() => root.render(<Test show={true} />));
+
+    const childD = document.querySelector('#childD');
+    expect(childD.unstable_reactFragments.has(fragmentRef.current)).toBe(false);
+    expect(childD.unstable_reactFragments.has(fragmentParentRef.current)).toBe(
+      true,
+    );
+  });
+
+  describe('focus methods', () => {
+    describe('focus()', () => {
+      // @gate enableFragmentRefs
+      it('focuses the first focusable child', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <div>
+              <Fragment ref={fragmentRef}>
+                <div id="child-a" />
+                <style>{`#child-c {}`}</style>
+                <a id="child-b" href="/">
+                  B
+                </a>
+                <a id="child-c" href="/">
+                  C
+                </a>
+              </Fragment>
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        await act(() => {
+          fragmentRef.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('child-b');
+        document.activeElement.blur();
+      });
+
+      // @gate enableFragmentRefs
+      it('focuses deeply nested focusable children, depth first', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <Fragment ref={fragmentRef}>
+              <div id="child-a">
+                <div tabIndex={0} id="grandchild-a">
+                  <a id="greatgrandchild-a" href="/" />
+                </div>
+              </div>
+              <a id="child-b" href="/" />
+            </Fragment>
+          );
+        }
+        await act(() => {
+          root.render(<Test />);
+        });
+        await act(() => {
+          fragmentRef.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('grandchild-a');
+      });
+
+      // @gate enableFragmentRefs
+      it('preserves document order when adding and removing children', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test({showA, showB}) {
+          return (
+            <Fragment ref={fragmentRef}>
+              {showA && <a href="/" id="child-a" />}
+              {showB && <a href="/" id="child-b" />}
+            </Fragment>
+          );
+        }
+
+        // Render with A as the first focusable child
+        await act(() => {
+          root.render(<Test showA={true} showB={false} />);
+        });
+        await act(() => {
+          fragmentRef.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('child-a');
+        document.activeElement.blur();
+        // A is still the first focusable child, but B is also tracked
+        await act(() => {
+          root.render(<Test showA={true} showB={true} />);
+        });
+        await act(() => {
+          fragmentRef.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('child-a');
+        document.activeElement.blur();
+
+        // B is now the first focusable child
+        await act(() => {
+          root.render(<Test showA={false} showB={true} />);
+        });
+        await act(() => {
+          fragmentRef.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('child-b');
+        document.activeElement.blur();
+      });
+    });
+
+    describe('focusLast()', () => {
+      // @gate enableFragmentRefs
+      it('focuses the last focusable child', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <div>
+              <Fragment ref={fragmentRef}>
+                <a id="child-a" href="/">
+                  A
+                </a>
+                <a id="child-b" href="/">
+                  B
+                </a>
+                <Wrapper>
+                  <a id="child-c" href="/">
+                    C
+                  </a>
+                </Wrapper>
+                <div id="child-d" />
+                <style id="child-e">{`#child-d {}`}</style>
+              </Fragment>
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        await act(() => {
+          fragmentRef.current.focusLast();
+        });
+        expect(document.activeElement.id).toEqual('child-c');
+        document.activeElement.blur();
+      });
+
+      // @gate enableFragmentRefs
+      it('focuses deeply nested focusable children, depth first', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <Fragment ref={fragmentRef}>
+              <div id="child-a" href="/">
+                <a id="grandchild-a" href="/" />
+                <a id="grandchild-b" href="/" />
+              </div>
+              <div tabIndex={0} id="child-b">
+                <a id="grandchild-a" href="/" />
+                <a id="grandchild-b" href="/" />
+              </div>
+            </Fragment>
+          );
+        }
+        await act(() => {
+          root.render(<Test />);
+        });
+        await act(() => {
+          fragmentRef.current.focusLast();
+        });
+        expect(document.activeElement.id).toEqual('grandchild-b');
+      });
+    });
+
+    describe('blur()', () => {
+      // @gate enableFragmentRefs
+      it('removes focus from an element inside of the Fragment', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <Fragment ref={fragmentRef}>
+              <a id="child-a" href="/">
+                A
+              </a>
+            </Fragment>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        await act(() => {
+          fragmentRef.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('child-a');
+
+        await act(() => {
+          fragmentRef.current.blur();
+        });
+        expect(document.activeElement).toEqual(document.body);
+      });
+
+      // @gate enableFragmentRefs
+      it('does not remove focus from elements outside of the Fragment', async () => {
+        const fragmentRefA = React.createRef();
+        const fragmentRefB = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <Fragment ref={fragmentRefA}>
+              <a id="child-a" href="/">
+                A
+              </a>
+              <Fragment ref={fragmentRefB}>
+                <a id="child-b" href="/">
+                  B
+                </a>
+              </Fragment>
+            </Fragment>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        await act(() => {
+          fragmentRefA.current.focus();
+        });
+        expect(document.activeElement.id).toEqual('child-a');
+
+        await act(() => {
+          fragmentRefB.current.blur();
+        });
+        expect(document.activeElement.id).toEqual('child-a');
+      });
+    });
+  });
+
+  describe('events', () => {
+    describe('add/remove event listeners', () => {
+      // @gate enableFragmentRefs
+      it('adds and removes event listeners from children', async () => {
+        const parentRef = React.createRef();
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        let logs = [];
+
+        function handleFragmentRefClicks() {
+          logs.push('fragmentRef');
+        }
+
+        function Test() {
+          React.useEffect(() => {
+            fragmentRef.current.addEventListener(
+              'click',
+              handleFragmentRefClicks,
+            );
+
+            return () => {
+              fragmentRef.current.removeEventListener(
+                'click',
+                handleFragmentRefClicks,
+              );
+            };
+          }, []);
+          return (
+            <div ref={parentRef}>
+              <Fragment ref={fragmentRef}>
+                <>Text</>
+                <div ref={childARef}>A</div>
+                <>
+                  <div ref={childBRef}>B</div>
+                </>
+              </Fragment>
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        childARef.current.addEventListener('click', () => {
+          logs.push('A');
+        });
+
+        childBRef.current.addEventListener('click', () => {
+          logs.push('B');
+        });
+
+        // Clicking on the parent should not trigger any listeners
+        parentRef.current.click();
+        expect(logs).toEqual([]);
+
+        // Clicking a child triggers its own listeners and the Fragment's
+        childARef.current.click();
+        expect(logs).toEqual(['fragmentRef', 'A']);
+
+        logs = [];
+
+        childBRef.current.click();
+        expect(logs).toEqual(['fragmentRef', 'B']);
+
+        logs = [];
+
+        fragmentRef.current.removeEventListener(
+          'click',
+          handleFragmentRefClicks,
+        );
+
+        childARef.current.click();
+        expect(logs).toEqual(['A']);
+
+        logs = [];
+
+        childBRef.current.click();
+        expect(logs).toEqual(['B']);
+      });
+
+      // @gate enableFragmentRefs
+      it('adds and removes event listeners from children with multiple fragments', async () => {
+        const fragmentRef = React.createRef();
+        const nestedFragmentRef = React.createRef();
+        const nestedFragmentRef2 = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const childCRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        await act(() => {
+          root.render(
+            <div>
+              <Fragment ref={fragmentRef}>
+                <div ref={childARef}>A</div>
+                <div>
+                  <Fragment ref={nestedFragmentRef}>
+                    <div ref={childBRef}>B</div>
+                  </Fragment>
+                </div>
+                <Fragment ref={nestedFragmentRef2}>
+                  <div ref={childCRef}>C</div>
+                </Fragment>
+              </Fragment>
+            </div>,
+          );
+        });
+
+        let logs = [];
+
+        function handleFragmentRefClicks() {
+          logs.push('fragmentRef');
+        }
+
+        function handleNestedFragmentRefClicks() {
+          logs.push('nestedFragmentRef');
+        }
+
+        function handleNestedFragmentRef2Clicks() {
+          logs.push('nestedFragmentRef2');
+        }
+
+        fragmentRef.current.addEventListener('click', handleFragmentRefClicks);
+        nestedFragmentRef.current.addEventListener(
+          'click',
+          handleNestedFragmentRefClicks,
+        );
+        nestedFragmentRef2.current.addEventListener(
+          'click',
+          handleNestedFragmentRef2Clicks,
+        );
+
+        childBRef.current.click();
+        // Event bubbles to the parent fragment
+        expect(logs).toEqual(['nestedFragmentRef', 'fragmentRef']);
+
+        logs = [];
+
+        childARef.current.click();
+        expect(logs).toEqual(['fragmentRef']);
+
+        logs = [];
+        childCRef.current.click();
+        expect(logs).toEqual(['fragmentRef', 'nestedFragmentRef2']);
+
+        logs = [];
+
+        fragmentRef.current.removeEventListener(
+          'click',
+          handleFragmentRefClicks,
+        );
+        nestedFragmentRef.current.removeEventListener(
+          'click',
+          handleNestedFragmentRefClicks,
+        );
+        childCRef.current.click();
+        expect(logs).toEqual(['nestedFragmentRef2']);
+      });
+
+      // @gate enableFragmentRefs
+      it('adds an event listener to a newly added child', async () => {
+        const fragmentRef = React.createRef();
+        const childRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        let showChild;
+
+        function Component() {
+          const [shouldShowChild, setShouldShowChild] = React.useState(false);
+          showChild = () => {
+            setShouldShowChild(true);
+          };
+
+          return (
+            <div>
+              <Fragment ref={fragmentRef}>
+                <div id="a">A</div>
+                {shouldShowChild && (
+                  <div ref={childRef} id="b">
+                    B
+                  </div>
+                )}
+              </Fragment>
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Component />);
+        });
+
+        expect(fragmentRef.current).not.toBe(null);
+        expect(childRef.current).toBe(null);
+
+        let hasClicked = false;
+        fragmentRef.current.addEventListener('click', () => {
+          hasClicked = true;
+        });
+
+        await act(() => {
+          showChild();
+        });
+        expect(childRef.current).not.toBe(null);
+
+        childRef.current.click();
+        expect(hasClicked).toBe(true);
+      });
+
+      // @gate enableFragmentRefs
+      it('applies event listeners to host children nested within non-host children', async () => {
+        const fragmentRef = React.createRef();
+        const childRef = React.createRef();
+        const nestedChildRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        await act(() => {
+          root.render(
+            <div>
+              <Fragment ref={fragmentRef}>
+                <div ref={childRef}>Host A</div>
+                <Wrapper>
+                  <Wrapper>
+                    <Wrapper>
+                      <div ref={nestedChildRef}>Host B</div>
+                    </Wrapper>
+                  </Wrapper>
+                </Wrapper>
+              </Fragment>
+            </div>,
+          );
+        });
+        const logs = [];
+        fragmentRef.current.addEventListener('click', e => {
+          logs.push(e.target.textContent);
+        });
+
+        expect(logs).toEqual([]);
+        childRef.current.click();
+        expect(logs).toEqual(['Host A']);
+        nestedChildRef.current.click();
+        expect(logs).toEqual(['Host A', 'Host B']);
+      });
+
+      // @gate enableFragmentRefs
+      it('allows adding and cleaning up listeners in effects', async () => {
+        const root = ReactDOMClient.createRoot(container);
+
+        let logs = [];
+        function logClick(e) {
+          logs.push(e.currentTarget.id);
+        }
+
+        let rerender;
+        let removeEventListeners;
+
+        function Test() {
+          const fragmentRef = React.useRef(null);
+          // eslint-disable-next-line no-unused-vars
+          const [_, setState] = React.useState(0);
+          rerender = () => {
+            setState(p => p + 1);
+          };
+          removeEventListeners = () => {
+            fragmentRef.current.removeEventListener('click', logClick);
+          };
+          React.useEffect(() => {
+            fragmentRef.current.addEventListener('click', logClick);
+
+            return removeEventListeners;
+          });
+
+          return (
+            <Fragment ref={fragmentRef}>
+              <div id="child-a" />
+            </Fragment>
+          );
+        }
+
+        // The event listener was applied
+        await act(() => root.render(<Test />));
+        expect(logs).toEqual([]);
+        document.querySelector('#child-a').click();
+        expect(logs).toEqual(['child-a']);
+
+        // The event listener can be removed and re-added
+        logs = [];
+        await act(rerender);
+        document.querySelector('#child-a').click();
+        expect(logs).toEqual(['child-a']);
+      });
+
+      // @gate enableFragmentRefs
+      it('does not apply removed event listeners to new children', async () => {
+        const root = ReactDOMClient.createRoot(container);
+        const fragmentRef = React.createRef(null);
+        function Test() {
+          return (
+            <Fragment ref={fragmentRef}>
+              <div id="child-a" />
+            </Fragment>
+          );
+        }
+
+        let logs = [];
+        function logClick(e) {
+          logs.push(e.currentTarget.id);
+        }
+        await act(() => {
+          root.render(<Test />);
+        });
+        fragmentRef.current.addEventListener('click', logClick);
+        const childA = document.querySelector('#child-a');
+        childA.click();
+        expect(logs).toEqual(['child-a']);
+
+        logs = [];
+        fragmentRef.current.removeEventListener('click', logClick);
+        childA.click();
+        expect(logs).toEqual([]);
+      });
+
+      // @gate enableFragmentRefs
+      it('applies event listeners to portaled children', async () => {
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <Fragment ref={fragmentRef}>
+              <div id="child-a" ref={childARef} />
+              {createPortal(
+                <div id="child-b" ref={childBRef} />,
+                document.body,
+              )}
+            </Fragment>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        const logs = [];
+        fragmentRef.current.addEventListener('click', e => {
+          logs.push(e.target.id);
+        });
+
+        childARef.current.click();
+        expect(logs).toEqual(['child-a']);
+
+        logs.length = 0;
+        childBRef.current.click();
+        expect(logs).toEqual(['child-b']);
+      });
+
+      describe('with activity', () => {
+        // @gate enableFragmentRefs && enableActivity
+        it('does not apply event listeners to hidden trees', async () => {
+          const parentRef = React.createRef();
+          const fragmentRef = React.createRef();
+          const root = ReactDOMClient.createRoot(container);
+
+          function Test() {
+            return (
+              <div ref={parentRef}>
+                <Fragment ref={fragmentRef}>
+                  <div>Child 1</div>
+                  <Activity mode="hidden">
+                    <div>Child 2</div>
+                  </Activity>
+                  <div>Child 3</div>
+                </Fragment>
+              </div>
+            );
+          }
+
+          await act(() => {
+            root.render(<Test />);
+          });
+
+          const logs = [];
+          fragmentRef.current.addEventListener('click', e => {
+            logs.push(e.target.textContent);
+          });
+
+          const [child1, child2, child3] = parentRef.current.children;
+          child1.click();
+          child2.click();
+          child3.click();
+          expect(logs).toEqual(['Child 1', 'Child 3']);
+        });
+
+        // @gate enableFragmentRefs && enableActivity
+        it('applies event listeners to visible trees', async () => {
+          const parentRef = React.createRef();
+          const fragmentRef = React.createRef();
+          const root = ReactDOMClient.createRoot(container);
+
+          function Test() {
+            return (
+              <div ref={parentRef}>
+                <Fragment ref={fragmentRef}>
+                  <div>Child 1</div>
+                  <Activity mode="visible">
+                    <div>Child 2</div>
+                  </Activity>
+                  <div>Child 3</div>
+                </Fragment>
+              </div>
+            );
+          }
+
+          await act(() => {
+            root.render(<Test />);
+          });
+
+          const logs = [];
+          fragmentRef.current.addEventListener('click', e => {
+            logs.push(e.target.textContent);
+          });
+
+          const [child1, child2, child3] = parentRef.current.children;
+          child1.click();
+          child2.click();
+          child3.click();
+          expect(logs).toEqual(['Child 1', 'Child 2', 'Child 3']);
+        });
+
+        // @gate enableFragmentRefs && enableActivity
+        it('handles Activity modes switching', async () => {
+          const fragmentRef = React.createRef();
+          const fragmentRef2 = React.createRef();
+          const parentRef = React.createRef();
+          const root = ReactDOMClient.createRoot(container);
+
+          function Test({mode}) {
+            return (
+              <div id="parent" ref={parentRef}>
+                <Fragment ref={fragmentRef}>
+                  <Activity mode={mode}>
+                    <div id="child1">Child</div>
+                    <Fragment ref={fragmentRef2}>
+                      <div id="child2">Child 2</div>
+                    </Fragment>
+                  </Activity>
+                </Fragment>
+              </div>
+            );
+          }
+
+          await act(() => {
+            root.render(<Test mode="visible" />);
+          });
+
+          let logs = [];
+          fragmentRef.current.addEventListener('click', () => {
+            logs.push('clicked 1');
+          });
+          fragmentRef2.current.addEventListener('click', () => {
+            logs.push('clicked 2');
+          });
+          parentRef.current.lastChild.click();
+          expect(logs).toEqual(['clicked 1', 'clicked 2']);
+
+          logs = [];
+          await act(() => {
+            root.render(<Test mode="hidden" />);
+          });
+          parentRef.current.firstChild.click();
+          parentRef.current.lastChild.click();
+          expect(logs).toEqual([]);
+
+          logs = [];
+          await act(() => {
+            root.render(<Test mode="visible" />);
+          });
+          parentRef.current.lastChild.click();
+          // Event order is flipped here because the nested child re-registers first
+          expect(logs).toEqual(['clicked 2', 'clicked 1']);
+        });
+      });
+    });
+
+    describe('dispatchEvent()', () => {
+      // @gate enableFragmentRefs
+      it('fires events on the host parent if bubbles=true', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        let logs = [];
+
+        function handleClick(e) {
+          logs.push([e.type, e.target.id, e.currentTarget.id]);
+        }
+
+        function Test({isMounted}) {
+          return (
+            <div onClick={handleClick} id="grandparent">
+              <div onClick={handleClick} id="parent">
+                {isMounted && (
+                  <Fragment ref={fragmentRef}>
+                    <div onClick={handleClick} id="child">
+                      Hi
+                    </div>
+                  </Fragment>
+                )}
+              </div>
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test isMounted={true} />);
+        });
+
+        let isCancelable = !fragmentRef.current.dispatchEvent(
+          new MouseEvent('click', {bubbles: true}),
+        );
+        expect(logs).toEqual([
+          ['click', 'parent', 'parent'],
+          ['click', 'parent', 'grandparent'],
+        ]);
+        expect(isCancelable).toBe(false);
+
+        const fragmentInstanceHandle = fragmentRef.current;
+        await act(() => {
+          root.render(<Test isMounted={false} />);
+        });
+        logs = [];
+        isCancelable = !fragmentInstanceHandle.dispatchEvent(
+          new MouseEvent('click', {bubbles: true}),
+        );
+        expect(logs).toEqual([]);
+        expect(isCancelable).toBe(false);
+
+        logs = [];
+        isCancelable = !fragmentInstanceHandle.dispatchEvent(
+          new MouseEvent('click', {bubbles: false}),
+        );
+        expect(logs).toEqual([]);
+        expect(isCancelable).toBe(false);
+      });
+
+      // @gate enableFragmentRefs
+      it('fires events on self, and only self if bubbles=false', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        let logs = [];
+
+        function handleClick(e) {
+          logs.push([e.type, e.target.id, e.currentTarget.id]);
+        }
+
+        function Test() {
+          return (
+            <div id="parent" onClick={handleClick}>
+              <Fragment ref={fragmentRef} />
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        fragmentRef.current.addEventListener('click', handleClick);
+
+        fragmentRef.current.dispatchEvent(
+          new MouseEvent('click', {bubbles: true}),
+        );
+        expect(logs).toEqual([
+          ['click', undefined, undefined],
+          ['click', 'parent', 'parent'],
+        ]);
+
+        logs = [];
+
+        fragmentRef.current.dispatchEvent(
+          new MouseEvent('click', {bubbles: false}),
+        );
+        expect(logs).toEqual([['click', undefined, undefined]]);
+      });
+    });
+  });
+
+  describe('observers', () => {
+    beforeEach(() => {
+      mockIntersectionObserver();
+    });
+
+    // @gate enableFragmentRefs
+    it('attaches intersection observers to children', async () => {
+      let logs = [];
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          logs.push(entry.target.id);
+        });
+      });
+      function Test({showB}) {
+        const fragmentRef = React.useRef(null);
+        React.useEffect(() => {
+          fragmentRef.current.observeUsing(observer);
+          const lastRefValue = fragmentRef.current;
+          return () => {
+            lastRefValue.unobserveUsing(observer);
+          };
+        }, []);
+        return (
+          <div id="parent">
+            <React.Fragment ref={fragmentRef}>
+              <div id="childA">A</div>
+              {showB && <div id="childB">B</div>}
+            </React.Fragment>
+          </div>
+        );
+      }
+
+      function simulateAllChildrenIntersecting() {
+        const parent = container.firstChild;
+        if (parent) {
+          const children = Array.from(parent.children).map(child => {
+            return [child, {y: 0, x: 0, width: 1, height: 1}, 1];
+          });
+          simulateIntersection(...children);
+        }
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Test showB={false} />));
+      simulateAllChildrenIntersecting();
+      expect(logs).toEqual(['childA']);
+
+      // Reveal child and expect it to be observed
+      logs = [];
+      await act(() => root.render(<Test showB={true} />));
+      simulateAllChildrenIntersecting();
+      expect(logs).toEqual(['childA', 'childB']);
+
+      // Hide child and expect it to be unobserved
+      logs = [];
+      await act(() => root.render(<Test showB={false} />));
+      simulateAllChildrenIntersecting();
+      expect(logs).toEqual(['childA']);
+
+      // Unmount component and expect all children to be unobserved
+      logs = [];
+      await act(() => root.render(null));
+      simulateAllChildrenIntersecting();
+      expect(logs).toEqual([]);
+    });
+
+    // @gate enableFragmentRefs
+    it('warns when unobserveUsing() is called with an observer that was not observed', async () => {
+      const fragmentRef = React.createRef();
+      const observer = new IntersectionObserver(() => {});
+      const observer2 = new IntersectionObserver(() => {});
+      function Test() {
+        return (
+          <React.Fragment ref={fragmentRef}>
+            <div />
+          </React.Fragment>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Test />));
+
+      // Warning when there is no attached observer
+      fragmentRef.current.unobserveUsing(observer);
+      assertConsoleErrorDev(
+        [
+          'You are calling unobserveUsing() with an observer that is not being observed with this fragment ' +
+            'instance. First attach the observer with observeUsing()',
+        ],
+        {withoutStack: true},
+      );
+
+      // Warning when the attached observer does not match
+      fragmentRef.current.observeUsing(observer);
+      fragmentRef.current.unobserveUsing(observer2);
+      assertConsoleErrorDev(
+        [
+          'You are calling unobserveUsing() with an observer that is not being observed with this fragment ' +
+            'instance. First attach the observer with observeUsing()',
+        ],
+        {withoutStack: true},
+      );
+    });
+
+    // @gate enableFragmentRefs && enableFragmentRefsInstanceHandles
+    it('attaches handles to observed elements to allow caching of observers', async () => {
+      const targetToCallbackMap = new WeakMap();
+      let cachedObserver = null;
+      function createObserverIfNeeded(fragmentInstance, onIntersection) {
+        const callbacks = targetToCallbackMap.get(fragmentInstance);
+        targetToCallbackMap.set(
+          fragmentInstance,
+          callbacks ? [...callbacks, onIntersection] : [onIntersection],
+        );
+        if (cachedObserver !== null) {
+          return cachedObserver;
+        }
+        const observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            const fragmentInstances = entry.target.unstable_reactFragments;
+            if (fragmentInstances) {
+              Array.from(fragmentInstances).forEach(fInstance => {
+                const cbs = targetToCallbackMap.get(fInstance) || [];
+                cbs.forEach(callback => {
+                  callback(entry);
+                });
+              });
+            }
+
+            targetToCallbackMap.get(entry.target)?.forEach(callback => {
+              callback(entry);
+            });
+          });
+        });
+        cachedObserver = observer;
+        return observer;
+      }
+
+      function IntersectionObserverFragment({onIntersection, children}) {
+        const fragmentRef = React.useRef(null);
+        React.useLayoutEffect(() => {
+          const observer = createObserverIfNeeded(
+            fragmentRef.current,
+            onIntersection,
+          );
+          fragmentRef.current.observeUsing(observer);
+          const lastRefValue = fragmentRef.current;
+          return () => {
+            lastRefValue.unobserveUsing(observer);
+          };
+        }, []);
+        return <React.Fragment ref={fragmentRef}>{children}</React.Fragment>;
+      }
+
+      let logs = [];
+      function logIntersection(id) {
+        logs.push(`observe: ${id}`);
+      }
+
+      function ChildWithManualIO({id}) {
+        const divRef = React.useRef(null);
+        React.useLayoutEffect(() => {
+          const observer = createObserverIfNeeded(divRef.current, entry => {
+            logIntersection(id);
+          });
+          observer.observe(divRef.current);
+          return () => {
+            observer.unobserve(divRef.current);
+          };
+        }, []);
+        return (
+          <div id={id} ref={divRef}>
+            {id}
+          </div>
+        );
+      }
+
+      function Test() {
+        return (
+          <>
+            <IntersectionObserverFragment
+              onIntersection={() => logIntersection('grandparent')}>
+              <IntersectionObserverFragment
+                onIntersection={() => logIntersection('parentA')}>
+                <div id="childA">A</div>
+              </IntersectionObserverFragment>
+            </IntersectionObserverFragment>
+            <IntersectionObserverFragment
+              onIntersection={() => logIntersection('parentB')}>
+              <div id="childB">B</div>
+              <ChildWithManualIO id="childC" />
+            </IntersectionObserverFragment>
+          </>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Test />));
+
+      simulateIntersection([
+        container.querySelector('#childA'),
+        {y: 0, x: 0, width: 1, height: 1},
+        1,
+      ]);
+      expect(logs).toEqual(['observe: grandparent', 'observe: parentA']);
+
+      logs = [];
+
+      simulateIntersection([
+        container.querySelector('#childB'),
+        {y: 0, x: 0, width: 1, height: 1},
+        1,
+      ]);
+      expect(logs).toEqual(['observe: parentB']);
+
+      logs = [];
+      simulateIntersection([
+        container.querySelector('#childC'),
+        {y: 0, x: 0, width: 1, height: 1},
+        1,
+      ]);
+      expect(logs).toEqual(['observe: parentB', 'observe: childC']);
+    });
+  });
+
+  describe('getClientRects', () => {
+    // @gate enableFragmentRefs
+    it('returns the bounding client rects of all children', async () => {
+      const fragmentRef = React.createRef();
+      const childARef = React.createRef();
+      const childBRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <React.Fragment ref={fragmentRef}>
+            <div ref={childARef} />
+            <div ref={childBRef} />
+          </React.Fragment>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+      setClientRects(childARef.current, [
+        {
+          x: 1,
+          y: 2,
+          width: 3,
+          height: 4,
+        },
+        {
+          x: 5,
+          y: 6,
+          width: 7,
+          height: 8,
+        },
+      ]);
+      setClientRects(childBRef.current, [{x: 9, y: 10, width: 11, height: 12}]);
+      const clientRects = fragmentRef.current.getClientRects();
+      expect(clientRects.length).toBe(3);
+      expect(clientRects[0].left).toBe(1);
+      expect(clientRects[1].left).toBe(5);
+      expect(clientRects[2].left).toBe(9);
+    });
+  });
+
+  describe('getRootNode', () => {
+    // @gate enableFragmentRefs
+    it('returns the root node of the parent', async () => {
+      const fragmentRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <div>
+            <React.Fragment ref={fragmentRef}>
+              <div />
+            </React.Fragment>
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+      expect(fragmentRef.current.getRootNode()).toBe(document);
+    });
+
+    // The desired behavior here is to return the topmost disconnected element when
+    // fragment + parent are unmounted. Currently we have a pass during unmount that
+    // recursively cleans up return pointers of the whole tree. We can change this
+    // with a future refactor. See: https://github.com/facebook/react/pull/32682#discussion_r2008313082
+    // @gate enableFragmentRefs
+    it('returns the topmost disconnected element if the fragment and parent are unmounted', async () => {
+      const containerRef = React.createRef();
+      const parentRef = React.createRef();
+      const fragmentRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test({mounted}) {
+        return (
+          <div ref={containerRef} id="container">
+            {mounted && (
+              <div ref={parentRef} id="parent">
+                <React.Fragment ref={fragmentRef}>
+                  <div />
+                </React.Fragment>
+              </div>
+            )}
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test mounted={true} />));
+      expect(fragmentRef.current.getRootNode()).toBe(document);
+      const fragmentHandle = fragmentRef.current;
+      await act(() => root.render(<Test mounted={false} />));
+      // TODO: The commented out assertion is the desired behavior. For now, we return
+      // the fragment instance itself. This is currently the same behavior if you unmount
+      // the fragment but not the parent. See context above.
+      // expect(fragmentHandle.getRootNode().id).toBe(parentRefHandle.id);
+      expect(fragmentHandle.getRootNode()).toBe(fragmentHandle);
+    });
+
+    // @gate enableFragmentRefs
+    it('returns self when only the fragment was unmounted', async () => {
+      const fragmentRef = React.createRef();
+      const parentRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test({mounted}) {
+        return (
+          <div ref={parentRef} id="parent">
+            {mounted && (
+              <React.Fragment ref={fragmentRef}>
+                <div />
+              </React.Fragment>
+            )}
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test mounted={true} />));
+      expect(fragmentRef.current.getRootNode()).toBe(document);
+      const fragmentHandle = fragmentRef.current;
+      await act(() => root.render(<Test mounted={false} />));
+      expect(fragmentHandle.getRootNode()).toBe(fragmentHandle);
+    });
+  });
+
+  describe('compareDocumentPosition', () => {
+    function expectPosition(position, spec) {
+      const positionResult = {
+        following: (position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0,
+        preceding: (position & Node.DOCUMENT_POSITION_PRECEDING) !== 0,
+        contains: (position & Node.DOCUMENT_POSITION_CONTAINS) !== 0,
+        containedBy: (position & Node.DOCUMENT_POSITION_CONTAINED_BY) !== 0,
+        disconnected: (position & Node.DOCUMENT_POSITION_DISCONNECTED) !== 0,
+        implementationSpecific:
+          (position & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) !== 0,
+      };
+      expect(positionResult).toEqual(spec);
+    }
+    // @gate enableFragmentRefs
+    it('returns the relationship between the fragment instance and a given node', async () => {
+      const fragmentRef = React.createRef();
+      const beforeRef = React.createRef();
+      const afterRef = React.createRef();
+      const middleChildRef = React.createRef();
+      const firstChildRef = React.createRef();
+      const lastChildRef = React.createRef();
+      const containerRef = React.createRef();
+      const disconnectedElement = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <div ref={containerRef} id="container">
+            <div ref={beforeRef} id="before" />
+            <React.Fragment ref={fragmentRef}>
+              <div ref={firstChildRef} id="first" />
+              <div ref={middleChildRef} id="middle" />
+              <div ref={lastChildRef} id="last" />
+            </React.Fragment>
+            <div ref={afterRef} id="after" />
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+
+      // document.body is preceding and contains the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(document.body),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // beforeRef is preceding the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(beforeRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // afterRef is following the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(afterRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // firstChildRef is contained by the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(firstChildRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // middleChildRef is contained by the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(middleChildRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // lastChildRef is contained by the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(lastChildRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      // containerRef precedes and contains the fragment
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(containerRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(disconnectedElement),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: true,
+          implementationSpecific: true,
+        },
+      );
+    });
+
+    // @gate enableFragmentRefs
+    it('handles fragment instances with one child', async () => {
+      const fragmentRef = React.createRef();
+      const beforeRef = React.createRef();
+      const afterRef = React.createRef();
+      const containerRef = React.createRef();
+      const onlyChildRef = React.createRef();
+      const disconnectedElement = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <div id="container" ref={containerRef}>
+            <div id="innercontainer">
+              <div ref={beforeRef} id="before" />
+              <React.Fragment ref={fragmentRef}>
+                <div ref={onlyChildRef} id="within" />
+              </React.Fragment>
+              <div id="after" ref={afterRef} />
+            </div>
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(beforeRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(afterRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(onlyChildRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(containerRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(disconnectedElement),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: true,
+          implementationSpecific: true,
+        },
+      );
+    });
+
+    // @gate enableFragmentRefs
+    it('handles empty fragment instances', async () => {
+      const fragmentRef = React.createRef();
+      const beforeParentRef = React.createRef();
+      const beforeRef = React.createRef();
+      const afterRef = React.createRef();
+      const afterParentRef = React.createRef();
+      const containerRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <>
+            <div id="before-container" ref={beforeParentRef} />
+            <div id="container" ref={containerRef}>
+              <div id="before" ref={beforeRef} />
+              <React.Fragment ref={fragmentRef} />
+              <div id="after" ref={afterRef} />
+            </div>
+            <div id="after-container" ref={afterParentRef} />
+          </>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(document.body),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(beforeRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(beforeParentRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(afterRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(afterParentRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(containerRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+    });
+
+    // @gate enableFragmentRefs
+    it('handles nested children', async () => {
+      const fragmentRef = React.createRef();
+      const nestedFragmentRef = React.createRef();
+      const childARef = React.createRef();
+      const childBRef = React.createRef();
+      const childCRef = React.createRef();
+      document.body.appendChild(container);
+      const root = ReactDOMClient.createRoot(container);
+
+      function Child() {
+        return (
+          <div ref={childCRef} id="C">
+            C
+          </div>
+        );
+      }
+
+      function Test() {
+        return (
+          <React.Fragment ref={fragmentRef}>
+            <div ref={childARef} id="A">
+              A
+            </div>
+            <React.Fragment ref={nestedFragmentRef}>
+              <div ref={childBRef} id="B">
+                B
+              </div>
+            </React.Fragment>
+            <Child />
+          </React.Fragment>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(childARef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(childBRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(childCRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+    });
+
+    // @gate enableFragmentRefs
+    it('returns disconnected for comparison with an unmounted fragment instance', async () => {
+      const fragmentRef = React.createRef();
+      const containerRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test({mount}) {
+        return (
+          <div ref={containerRef}>
+            {mount && (
+              <Fragment ref={fragmentRef}>
+                <div />
+              </Fragment>
+            )}
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test mount={true} />));
+
+      const fragmentHandle = fragmentRef.current;
+
+      expectPosition(
+        fragmentHandle.compareDocumentPosition(containerRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      await act(() => {
+        root.render(<Test mount={false} />);
+      });
+
+      expectPosition(
+        fragmentHandle.compareDocumentPosition(containerRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: true,
+          implementationSpecific: false,
+        },
+      );
+    });
+
+    // @gate enableFragmentRefs
+    it('compares a root-level Fragment', async () => {
+      const fragmentRef = React.createRef();
+      const emptyFragmentRef = React.createRef();
+      const childRef = React.createRef();
+      const siblingPrecedingRef = React.createRef();
+      const siblingFollowingRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <Fragment>
+            <div ref={siblingPrecedingRef} />
+            <Fragment ref={fragmentRef}>
+              <div ref={childRef} />
+            </Fragment>
+            <Fragment ref={emptyFragmentRef} />
+            <div ref={siblingFollowingRef} />
+          </Fragment>
+        );
+      }
+
+      await act(() => root.render(<Test />));
+
+      const fragmentInstance = fragmentRef.current;
+      if (fragmentInstance == null) {
+        throw new Error('Expected fragment instance to be non-null');
+      }
+      const emptyFragmentInstance = emptyFragmentRef.current;
+      if (emptyFragmentInstance == null) {
+        throw new Error('Expected empty fragment instance to be non-null');
+      }
+
+      expectPosition(
+        fragmentInstance.compareDocumentPosition(childRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: true,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      expectPosition(
+        fragmentInstance.compareDocumentPosition(siblingPrecedingRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      expectPosition(
+        fragmentInstance.compareDocumentPosition(siblingFollowingRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      expectPosition(
+        emptyFragmentInstance.compareDocumentPosition(childRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+
+      expectPosition(
+        emptyFragmentInstance.compareDocumentPosition(
+          siblingPrecedingRef.current,
+        ),
+        {
+          preceding: true,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+
+      expectPosition(
+        emptyFragmentInstance.compareDocumentPosition(
+          siblingFollowingRef.current,
+        ),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: true,
+        },
+      );
+    });
+
+    describe('with portals', () => {
+      // @gate enableFragmentRefs
+      it('handles portaled elements', async () => {
+        const fragmentRef = React.createRef();
+        const portaledSiblingRef = React.createRef();
+        const portaledChildRef = React.createRef();
+
+        function Test() {
+          return (
+            <div id="wrapper">
+              {createPortal(<div ref={portaledSiblingRef} id="A" />, container)}
+              <Fragment ref={fragmentRef}>
+                {createPortal(<div ref={portaledChildRef} id="B" />, container)}
+                <div id="C" />
+              </Fragment>
+            </div>
+          );
+        }
+
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => root.render(<Test />));
+
+        // The sibling is preceding in both the DOM and the React tree
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(
+            portaledSiblingRef.current,
+          ),
+          {
+            preceding: true,
+            following: false,
+            contains: false,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: false,
+          },
+        );
+
+        // The child is contained by in the React tree but not in the DOM
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(portaledChildRef.current),
+          {
+            preceding: false,
+            following: false,
+            contains: false,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: true,
+          },
+        );
+      });
+
+      // @gate enableFragmentRefs
+      it('handles multiple portals to the same element', async () => {
+        const root = ReactDOMClient.createRoot(container);
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const childCRef = React.createRef();
+        const childDRef = React.createRef();
+        const childERef = React.createRef();
+
+        function Test() {
+          const [c, setC] = React.useState(false);
+          React.useEffect(() => {
+            setC(true);
+          });
+
+          return (
+            <>
+              {createPortal(
+                <Fragment ref={fragmentRef}>
+                  <div id="A" ref={childARef} />
+                  {c ? (
+                    <div id="C" ref={childCRef}>
+                      <div id="D" ref={childDRef} />
+                    </div>
+                  ) : null}
+                </Fragment>,
+                document.body,
+              )}
+              {createPortal(<p id="B" ref={childBRef} />, document.body)}
+              <div id="E" ref={childERef} />
+            </>
+          );
+        }
+
+        await act(() => root.render(<Test />));
+
+        // Due to effect, order is E / A->B->C->D
+        expect(document.body.outerHTML).toBe(
+          '<body>' +
+            '<div><div id="E"></div></div>' +
+            '<div id="A"></div>' +
+            '<p id="B"></p>' +
+            '<div id="C"><div id="D"></div></div>' +
+            '</body>',
+        );
+
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(document.body),
+          {
+            preceding: true,
+            following: false,
+            contains: true,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: false,
+          },
+        );
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childARef.current),
+          {
+            preceding: false,
+            following: false,
+            contains: false,
+            containedBy: true,
+            disconnected: false,
+            implementationSpecific: false,
+          },
+        );
+        // Contained by in DOM, but following in React tree
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childBRef.current),
+          {
+            preceding: false,
+            following: false,
+            contains: false,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: true,
+          },
+        );
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childCRef.current),
+          {
+            preceding: false,
+            following: false,
+            contains: false,
+            containedBy: true,
+            disconnected: false,
+            implementationSpecific: false,
+          },
+        );
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childDRef.current),
+          {
+            preceding: false,
+            following: false,
+            contains: false,
+            containedBy: true,
+            disconnected: false,
+            implementationSpecific: false,
+          },
+        );
+        // Preceding DOM but following in React tree
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childERef.current),
+          {
+            preceding: false,
+            following: false,
+            contains: false,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: true,
+          },
+        );
+      });
+
+      // @gate enableFragmentRefs
+      it('handles empty fragments', async () => {
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+
+        function Test() {
+          return (
+            <>
+              <div id="A" ref={childARef} />
+              {createPortal(<Fragment ref={fragmentRef} />, document.body)}
+              <div id="B" ref={childBRef} />
+            </>
+          );
+        }
+
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => root.render(<Test />));
+
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(document.body),
+          {
+            preceding: true,
+            following: false,
+            contains: true,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: true,
+          },
+        );
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childARef.current),
+          {
+            preceding: true,
+            following: false,
+            contains: false,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: true,
+          },
+        );
+        expectPosition(
+          fragmentRef.current.compareDocumentPosition(childBRef.current),
+          {
+            preceding: true,
+            following: false,
+            contains: false,
+            containedBy: false,
+            disconnected: false,
+            implementationSpecific: true,
+          },
+        );
+      });
+    });
+  });
+
+  describe('scrollIntoView', () => {
+    function expectLast(arr, test) {
+      expect(arr[arr.length - 1]).toBe(test);
+    }
+    // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+    it('does not yet support options', async () => {
+      const fragmentRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Fragment ref={fragmentRef} />);
+      });
+
+      expect(() => {
+        fragmentRef.current.scrollIntoView({block: 'start'});
+      }).toThrowError(
+        'FragmentInstance.scrollIntoView() does not support ' +
+          'scrollIntoViewOptions. Use the alignToTop boolean instead.',
+      );
+    });
+
+    describe('with children', () => {
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('settles scroll on the first child by default, or if alignToTop=true', async () => {
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            <React.Fragment ref={fragmentRef}>
+              <div ref={childARef} id="a">
+                A
+              </div>
+              <div ref={childBRef} id="b">
+                B
+              </div>
+            </React.Fragment>,
+          );
+        });
+
+        let logs = [];
+        childARef.current.scrollIntoView = jest.fn().mockImplementation(() => {
+          logs.push('childA');
+        });
+        childBRef.current.scrollIntoView = jest.fn().mockImplementation(() => {
+          logs.push('childB');
+        });
+
+        // Default call
+        fragmentRef.current.scrollIntoView();
+        expectLast(logs, 'childA');
+        logs = [];
+        // alignToTop=true
+        fragmentRef.current.scrollIntoView(true);
+        expectLast(logs, 'childA');
+      });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('calls scrollIntoView on the last child if alignToTop is false', async () => {
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            <Fragment ref={fragmentRef}>
+              <div ref={childARef}>A</div>
+              <div ref={childBRef}>B</div>
+            </Fragment>,
+          );
+        });
+
+        const logs = [];
+        childARef.current.scrollIntoView = jest.fn().mockImplementation(() => {
+          logs.push('childA');
+        });
+        childBRef.current.scrollIntoView = jest.fn().mockImplementation(() => {
+          logs.push('childB');
+        });
+
+        fragmentRef.current.scrollIntoView(false);
+        expectLast(logs, 'childB');
+      });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('handles portaled elements -- same scroll container', async () => {
+        const fragmentRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test() {
+          return (
+            <Fragment ref={fragmentRef}>
+              {createPortal(
+                <div ref={childARef} id="child-a">
+                  A
+                </div>,
+                document.body,
+              )}
+
+              <div ref={childBRef} id="child-b">
+                B
+              </div>
+            </Fragment>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        const logs = [];
+        childARef.current.scrollIntoView = jest.fn().mockImplementation(() => {
+          logs.push('childA');
+        });
+        childBRef.current.scrollIntoView = jest.fn().mockImplementation(() => {
+          logs.push('childB');
+        });
+
+        // Default call
+        fragmentRef.current.scrollIntoView();
+        expectLast(logs, 'childA');
+      });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('handles portaled elements -- different scroll container', async () => {
+        const fragmentRef = React.createRef();
+        const headerChildRef = React.createRef();
+        const childARef = React.createRef();
+        const childBRef = React.createRef();
+        const childCRef = React.createRef();
+        const scrollContainerRef = React.createRef();
+        const scrollContainerNestedRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+
+        function Test({mountFragment}) {
+          return (
+            <>
+              <div id="header" style={{position: 'fixed'}}>
+                <div id="parent-a" />
+              </div>
+              <div id="parent-b" />
+              <div
+                id="scroll-container"
+                ref={scrollContainerRef}
+                style={{overflow: 'scroll'}}>
+                <div id="parent-c" />
+                <div
+                  id="scroll-container-nested"
+                  ref={scrollContainerNestedRef}
+                  style={{overflow: 'scroll'}}>
+                  <div id="parent-d" />
+                </div>
+              </div>
+              {mountFragment && (
+                <Fragment ref={fragmentRef}>
+                  {createPortal(
+                    <div ref={headerChildRef} id="header-content">
+                      Header
+                    </div>,
+                    document.querySelector('#parent-a'),
+                  )}
+                  {createPortal(
+                    <div ref={childARef} id="child-a">
+                      A
+                    </div>,
+                    document.querySelector('#parent-b'),
+                  )}
+                  {createPortal(
+                    <div ref={childBRef} id="child-b">
+                      B
+                    </div>,
+                    document.querySelector('#parent-b'),
+                  )}
+                  {createPortal(
+                    <div ref={childCRef} id="child-c">
+                      C
+                    </div>,
+                    document.querySelector('#parent-c'),
+                  )}
+                </Fragment>
+              )}
+            </>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test mountFragment={false} />);
+        });
+        // Now that the portal locations exist, mount the fragment
+        await act(() => {
+          root.render(<Test mountFragment={true} />);
+        });
+
+        let logs = [];
+        headerChildRef.current.scrollIntoView = jest.fn(() => {
+          logs.push('header');
+        });
+        childARef.current.scrollIntoView = jest.fn(() => {
+          logs.push('A');
+        });
+        childBRef.current.scrollIntoView = jest.fn(() => {
+          logs.push('B');
+        });
+        childCRef.current.scrollIntoView = jest.fn(() => {
+          logs.push('C');
+        });
+
+        // Default call
+        fragmentRef.current.scrollIntoView();
+        expectLast(logs, 'header');
+
+        childARef.current.scrollIntoView.mockClear();
+        childBRef.current.scrollIntoView.mockClear();
+        childCRef.current.scrollIntoView.mockClear();
+
+        logs = [];
+
+        // // alignToTop=false
+        fragmentRef.current.scrollIntoView(false);
+        expectLast(logs, 'C');
+      });
+    });
+
+    describe('without children', () => {
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('calls scrollIntoView on the next sibling by default, or if alignToTop=true', async () => {
+        const fragmentRef = React.createRef();
+        const siblingARef = React.createRef();
+        const siblingBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            <div>
+              <Wrapper>
+                <div ref={siblingARef} />
+              </Wrapper>
+              <Fragment ref={fragmentRef} />
+              <div ref={siblingBRef} />
+            </div>,
+          );
+        });
+
+        siblingARef.current.scrollIntoView = jest.fn();
+        siblingBRef.current.scrollIntoView = jest.fn();
+
+        // Default call
+        fragmentRef.current.scrollIntoView();
+        expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
+        expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
+
+        siblingBRef.current.scrollIntoView.mockClear();
+
+        // alignToTop=true
+        fragmentRef.current.scrollIntoView(true);
+        expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0);
+        expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
+      });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('calls scrollIntoView on the prev sibling if alignToTop is false', async () => {
+        const fragmentRef = React.createRef();
+        const siblingARef = React.createRef();
+        const siblingBRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        function C() {
+          return (
+            <Wrapper>
+              <div id="C" ref={siblingARef} />
+            </Wrapper>
+          );
+        }
+        function Test() {
+          return (
+            <div id="A">
+              <div id="B" />
+              <C />
+              <Fragment ref={fragmentRef} />
+              <div id="D" ref={siblingBRef} />
+              <div id="E" />
+            </div>
+          );
+        }
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        siblingARef.current.scrollIntoView = jest.fn();
+        siblingBRef.current.scrollIntoView = jest.fn();
+
+        // alignToTop=false
+        fragmentRef.current.scrollIntoView(false);
+        expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1);
+        expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0);
+      });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('calls scrollIntoView on the parent if there are no siblings', async () => {
+        const fragmentRef = React.createRef();
+        const parentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            <div ref={parentRef}>
+              <Wrapper>
+                <Fragment ref={fragmentRef} />
+              </Wrapper>
+            </div>,
+          );
+        });
+
+        parentRef.current.scrollIntoView = jest.fn();
+        fragmentRef.current.scrollIntoView();
+        expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
new file mode 100644
index 00000000000..5e88c60312a
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let waitForAll;
+
+describe('ReactDOMHooks', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    waitForAll = require('internal-test-utils').waitForAll;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  // @gate !disableLegacyMode
+  it('can ReactDOM.render() from useEffect', async () => {
+    const container2 = document.createElement('div');
+    const container3 = document.createElement('div');
+
+    function Example1({n}) {
+      React.useEffect(() => {
+        ReactDOM.render(<Example2 n={n} />, container2);
+      });
+      return 1 * n;
+    }
+
+    function Example2({n}) {
+      React.useEffect(() => {
+        ReactDOM.render(<Example3 n={n} />, container3);
+      });
+      return 2 * n;
+    }
+
+    function Example3({n}) {
+      return 3 * n;
+    }
+
+    ReactDOM.render(<Example1 n={1} />, container);
+    expect(container.textContent).toBe('1');
+    expect(container2.textContent).toBe('');
+    expect(container3.textContent).toBe('');
+    await waitForAll([]);
+    expect(container.textContent).toBe('1');
+    expect(container2.textContent).toBe('2');
+    expect(container3.textContent).toBe('3');
+
+    ReactDOM.render(<Example1 n={2} />, container);
+    expect(container.textContent).toBe('2');
+    expect(container2.textContent).toBe('2'); // Not flushed yet
+    expect(container3.textContent).toBe('3'); // Not flushed yet
+    await waitForAll([]);
+    expect(container.textContent).toBe('2');
+    expect(container2.textContent).toBe('4');
+    expect(container3.textContent).toBe('6');
+  });
+
+  it('can render() from useEffect', async () => {
+    const container2 = document.createElement('div');
+    const container3 = document.createElement('div');
+
+    const root1 = ReactDOMClient.createRoot(container);
+    const root2 = ReactDOMClient.createRoot(container2);
+    const root3 = ReactDOMClient.createRoot(container3);
+
+    function Example1({n}) {
+      React.useEffect(() => {
+        root2.render(<Example2 n={n} />);
+      });
+      return 1 * n;
+    }
+
+    function Example2({n}) {
+      React.useEffect(() => {
+        root3.render(<Example3 n={n} />);
+      });
+      return 2 * n;
+    }
+
+    function Example3({n}) {
+      return 3 * n;
+    }
+
+    await act(() => {
+      root1.render(<Example1 n={1} />);
+    });
+    await waitForAll([]);
+    expect(container.textContent).toBe('1');
+    expect(container2.textContent).toBe('2');
+    expect(container3.textContent).toBe('3');
+
+    await act(() => {
+      root1.render(<Example1 n={2} />);
+    });
+    await waitForAll([]);
+    expect(container.textContent).toBe('2');
+    expect(container2.textContent).toBe('4');
+    expect(container3.textContent).toBe('6');
+  });
+
+  // @gate !disableLegacyMode
+  it('should not bail out when an update is scheduled from within an event handler', () => {
+    const {createRef, useCallback, useState} = React;
+
+    const Example = ({inputRef, labelRef}) => {
+      const [text, setText] = useState('');
+      const handleInput = useCallback(event => {
+        setText(event.target.value);
+      });
+
+      return (
+        <>
+          <input ref={inputRef} onInput={handleInput} />
+          <label ref={labelRef}>{text}</label>
+        </>
+      );
+    };
+
+    const inputRef = createRef();
+    const labelRef = createRef();
+
+    ReactDOM.render(
+      <Example inputRef={inputRef} labelRef={labelRef} />,
+      container,
+    );
+
+    inputRef.current.value = 'abc';
+    inputRef.current.dispatchEvent(
+      new Event('input', {bubbles: true, cancelable: true}),
+    );
+
+    expect(labelRef.current.innerHTML).toBe('abc');
+  });
+
+  it('should not bail out when an update is scheduled from within an event handler in Concurrent Mode', async () => {
+    const {createRef, useCallback, useState} = React;
+
+    const Example = ({inputRef, labelRef}) => {
+      const [text, setText] = useState('');
+      const handleInput = useCallback(event => {
+        setText(event.target.value);
+      });
+
+      return (
+        <>
+          <input ref={inputRef} onInput={handleInput} />
+          <label ref={labelRef}>{text}</label>
+        </>
+      );
+    };
+
+    const inputRef = createRef();
+    const labelRef = createRef();
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
+
+    await waitForAll([]);
+
+    inputRef.current.value = 'abc';
+    await act(() => {
+      inputRef.current.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+
+    expect(labelRef.current.innerHTML).toBe('abc');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMHostComponentTransitions-test.js b/packages/react-dom/src/__tests__/ReactDOMHostComponentTransitions-test.js
new file mode 100644
index 00000000000..a0d3981a5d7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMHostComponentTransitions-test.js
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let JSDOM;
+let React;
+let ReactDOMClient;
+let container;
+let waitForAll;
+
+describe('ReactDOM HostSingleton', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    global.window = jsdom.window;
+    global.document = jsdom.window.document;
+    container = global.document.getElementById('container');
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  it('errors when a hoistable component becomes a Resource', async () => {
+    const errors = [];
+    function onError(e) {
+      errors.push(e.message);
+    }
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError: onError,
+    });
+
+    root.render(
+      <div>
+        <link rel="preload" href="bar" as="style" />
+      </div>,
+    );
+    await waitForAll([]);
+
+    root.render(
+      <div>
+        <link rel="stylesheet" href="bar" precedence="default" />
+      </div>,
+    );
+    await waitForAll([]);
+    if (__DEV__) {
+      expect(errors).toEqual([
+        `Expected <link> not to update to be updated to a stylesheet with precedence. Check the \`rel\`, \`href\`, and \`precedence\` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.
+
+  - <link rel=\"preload\" href=\"bar\" ... />
+  + <link rel=\"stylesheet\" href=\"bar\" precedence=\"default\" />`,
+      ]);
+    } else {
+      expect(errors).toEqual([
+        'Expected <link> not to update to be updated to a stylesheet with precedence. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.',
+      ]);
+    }
+  });
+
+  it('errors when a hoistable Resource becomes an instance', async () => {
+    const errors = [];
+    function onError(e) {
+      errors.push(e.message);
+    }
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError: onError,
+    });
+
+    root.render(
+      <div>
+        <link rel="stylesheet" href="bar" precedence="default" />
+      </div>,
+    );
+    await waitForAll([]);
+    const event = new window.Event('load');
+    const preloads = document.querySelectorAll('link[rel="preload"]');
+    for (let i = 0; i < preloads.length; i++) {
+      const node = preloads[i];
+      node.dispatchEvent(event);
+    }
+    const stylesheets = document.querySelectorAll('link[rel="preload"]');
+    for (let i = 0; i < stylesheets.length; i++) {
+      const node = stylesheets[i];
+      node.dispatchEvent(event);
+    }
+
+    root.render(
+      <div>
+        <link rel="foo" href="bar" />
+      </div>,
+    );
+    await waitForAll([]);
+    if (__DEV__) {
+      expect(errors).toEqual([
+        `Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the \`rel\`, \`href\`, and \`precedence\` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.
+
+  - <link rel=\"stylesheet\" href=\"bar\" precedence=\"default\" />
+  + <link rel=\"foo\" href=\"bar\" />`,
+      ]);
+    } else {
+      expect(errors).toEqual([
+        'Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.',
+      ]);
+    }
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
new file mode 100644
index 00000000000..92da0bc1230
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -0,0 +1,1647 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+let act;
+
+const util = require('util');
+const realConsoleError = console.error;
+
+function errorHandler() {
+  // forward to console.error but don't fail the tests
+}
+
+describe('ReactDOMServerHydration', () => {
+  let container;
+  let ownerStacks;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = React.act;
+
+    window.addEventListener('error', errorHandler);
+    ownerStacks = [];
+    console.error = jest.fn(() => {
+      const ownerStack = React.captureOwnerStack();
+      if (typeof ownerStack === 'string') {
+        ownerStacks.push(ownerStack === '' ? ' <empty>' : ownerStack);
+      } else {
+        ownerStacks.push(' ' + String(ownerStack));
+      }
+    });
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    window.removeEventListener('error', errorHandler);
+    document.body.removeChild(container);
+    console.error = realConsoleError;
+  });
+
+  function normalizeCodeLocInfo(str) {
+    return typeof str === 'string'
+      ? str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+          return '\n    in ' + name + ' (at **)';
+        })
+      : str;
+  }
+
+  function formatMessage(args, index) {
+    const ownerStack = ownerStacks[index];
+
+    if (ownerStack === undefined) {
+      throw new Error(
+        'Expected an owner stack for message ' +
+          index +
+          ':\n' +
+          util.format(...args),
+      );
+    }
+
+    const [format, ...rest] = args;
+    if (format instanceof Error) {
+      if (format.cause instanceof Error) {
+        return (
+          'Caught [' +
+          format.message +
+          ']\n  Cause [' +
+          format.cause.message +
+          ']\n  Owner Stack:' +
+          normalizeCodeLocInfo(ownerStack)
+        );
+      }
+      return (
+        'Caught [' +
+        format.message +
+        ']\n  Owner Stack:' +
+        normalizeCodeLocInfo(ownerStack)
+      );
+    }
+    rest[rest.length - 1] = normalizeCodeLocInfo(rest[rest.length - 1]);
+    return (
+      util.format(format, ...rest) +
+      '\n  Owner Stack:' +
+      normalizeCodeLocInfo(ownerStack)
+    );
+  }
+
+  function formatConsoleErrors() {
+    return console.error.mock.calls.map(formatMessage).filter(Boolean);
+  }
+
+  function testMismatch(Mismatch) {
+    const htmlString = ReactDOMServer.renderToString(
+      <Mismatch isClient={false} />,
+    );
+    container.innerHTML = htmlString;
+    act(() => {
+      ReactDOMClient.hydrateRoot(container, <Mismatch isClient={true} />);
+    });
+    return formatConsoleErrors();
+  }
+
+  describe('text mismatch', () => {
+    // @gate __DEV__
+    it('warns when client and server render different text', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main className="child">{isClient ? 'client' : 'server'}</main>
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <main className="child">
+          +       client
+          -       server
+          ]
+            Owner Stack:
+              in main (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+    });
+
+    // @gate __DEV__
+    it('warns when escaping on a checksum mismatch', () => {
+      function Mismatch({isClient}) {
+        if (isClient) {
+          return (
+            <div>This markup contains an nbsp entity: &nbsp; client text</div>
+          );
+        }
+        return (
+          <div>This markup contains an nbsp entity: &nbsp; server text</div>
+        );
+      }
+
+      /* eslint-disable no-irregular-whitespace */
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div>
+          +     This markup contains an nbsp entity:   client text
+          -     This markup contains an nbsp entity:   server text
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      /* eslint-enable no-irregular-whitespace */
+    });
+
+    // @gate __DEV__
+    it('warns when client and server render different html', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className="child"
+              dangerouslySetInnerHTML={{
+                __html: isClient
+                  ? '<span>client</span>'
+                  : '<span>server</span>',
+              }}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <div className="parent">
+              <main
+                className="child"
+                dangerouslySetInnerHTML={{
+        +         __html: "<span>client</span>"
+        -         __html: "<span>server</span>"
+                }}
+              >
+
+          Owner Stack:
+            in main (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+  });
+
+  describe('attribute mismatch', () => {
+    // @gate __DEV__
+    it('warns when client and server render different attributes', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className={isClient ? 'child client' : 'child server'}
+              dir={isClient ? 'ltr' : 'rtl'}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <div className="parent">
+              <main
+        +       className="child client"
+        -       className="child server"
+        +       dir="ltr"
+        -       dir="rtl"
+              >
+
+          Owner Stack:
+            in main (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+
+    // @gate __DEV__
+    it('warns when client renders extra attributes', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className="child"
+              tabIndex={isClient ? 1 : null}
+              dir={isClient ? 'ltr' : null}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <div className="parent">
+              <main
+                className="child"
+        +       tabIndex={1}
+        -       tabIndex={null}
+        +       dir="ltr"
+        -       dir={null}
+              >
+
+          Owner Stack:
+            in main (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+
+    // @gate __DEV__
+    it('warns when server renders extra attributes', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className="child"
+              tabIndex={isClient ? null : 1}
+              dir={isClient ? null : 'rtl'}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <div className="parent">
+              <main
+                className="child"
+        +       tabIndex={null}
+        -       tabIndex="1"
+        +       dir={null}
+        -       dir="rtl"
+              >
+
+          Owner Stack:
+            in main (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+
+    // @gate __DEV__
+    it('warns when both client and server render extra attributes', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className="child"
+              tabIndex={isClient ? 1 : null}
+              dir={isClient ? null : 'rtl'}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <div className="parent">
+              <main
+                className="child"
+        +       tabIndex={1}
+        -       tabIndex={null}
+        +       dir={null}
+        -       dir="rtl"
+              >
+
+          Owner Stack:
+            in main (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+
+    // @gate __DEV__
+    it('warns when client and server render different styles', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className="child"
+              style={{
+                opacity: isClient ? 1 : 0,
+              }}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <div className="parent">
+              <main
+                className="child"
+        +       style={{opacity:1}}
+        -       style={{opacity:"0"}}
+              >
+
+          Owner Stack:
+            in main (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+
+    // @gate __DEV__
+    it('picks the DFS-first Fiber as the error Owner', () => {
+      function LeftMismatch({isClient}) {
+        return <div className={isClient ? 'client' : 'server'} />;
+      }
+
+      function LeftIndirection({isClient}) {
+        return <LeftMismatch isClient={isClient} />;
+      }
+
+      function MiddleMismatch({isClient}) {
+        return <span className={isClient ? 'client' : 'server'} />;
+      }
+
+      function RightMisMatch({isClient}) {
+        return <p className={isClient ? 'client' : 'server'} />;
+      }
+
+      function App({isClient}) {
+        return (
+          <>
+            <LeftIndirection isClient={isClient} />
+            <MiddleMismatch isClient={isClient} />
+            <RightMisMatch isClient={isClient} />
+          </>
+        );
+      }
+      expect(testMismatch(App)).toMatchInlineSnapshot(`
+        [
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <App isClient={true}>
+            <LeftIndirection isClient={true}>
+              <LeftMismatch isClient={true}>
+                <div
+        +         className="client"
+        -         className="server"
+                >
+            <MiddleMismatch isClient={true}>
+              <span
+        +       className="client"
+        -       className="server"
+              >
+            <RightMisMatch isClient={true}>
+              <p
+        +       className="client"
+        -       className="server"
+              >
+
+          Owner Stack:
+            in div (at **)
+            in LeftMismatch (at **)
+            in LeftIndirection (at **)
+            in App (at **)",
+        ]
+      `);
+    });
+  });
+
+  describe('extra nodes on the client', () => {
+    describe('extra elements on the client', () => {
+      // @gate __DEV__
+      it('warns when client renders an extra element as only child', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {isClient && <main className="only" />}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <main className="only">
+          ]
+            Owner Stack:
+              in main (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra element in the beginning', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {isClient && <header className="1" />}
+              <main className="2" />
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <header className="1">
+          -     <main className="2">
+                ...
+          ]
+            Owner Stack:
+              in header (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra element in the middle', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              {isClient && <main className="2" />}
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <header>
+          +     <main className="2">
+          -     <footer className="3">
+                ...
+          ]
+            Owner Stack:
+              in main (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra element in the end', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              <main className="2" />
+              {isClient && <footer className="3" />}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <header>
+                <main>
+          +     <footer className="3">
+          ]
+            Owner Stack:
+              in footer (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+    });
+
+    describe('extra text nodes on the client', () => {
+      // @gate __DEV__
+      it('warns when client renders an extra text node as only child', () => {
+        function Mismatch({isClient}) {
+          return <div className="parent">{isClient && 'only'}</div>;
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            [
+              "Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+            - A server/client branch \`if (typeof window !== 'undefined')\`.
+            - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+            - Date formatting in a user's locale which doesn't match the server.
+            - External changing data without sending a snapshot of it along with the HTML.
+            - Invalid HTML tag nesting.
+
+            It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+            https://react.dev/link/hydration-mismatch
+
+              <Mismatch isClient={true}>
+                <div className="parent">
+            +     only
+            -     
+            ]
+              Owner Stack:
+                in div (at **)
+                in Mismatch (at **)",
+            ]
+          `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra text node in the beginning', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              {isClient && 'second'}
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <header>
+          +     second
+          -     <footer className="3">
+                ...
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra text node in the middle', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {isClient && 'first'}
+              <main className="2" />
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     first
+          -     <main className="2">
+                ...
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra text node in the end', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              <main className="2" />
+              {isClient && 'third'}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <header>
+                <main>
+          +     third
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+    });
+  });
+
+  describe('extra nodes on the server', () => {
+    describe('extra elements on the server', () => {
+      // @gate __DEV__
+      it('warns when server renders an extra element as only child', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {!isClient && <main className="only" />}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     <main className="only">
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra element in the beginning', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {!isClient && <header className="1" />}
+              <main className="2" />
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <main className="2">
+          -     <header className="1">
+                ...
+          ]
+            Owner Stack:
+              in main (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra element in the middle', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              {!isClient && <main className="2" />}
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <header>
+          +     <footer className="3">
+          -     <main className="2">
+          ]
+            Owner Stack:
+              in footer (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra element in the end', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              <main className="2" />
+              {!isClient && <footer className="3" />}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     <footer className="3">
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+    });
+
+    describe('extra text nodes on the server', () => {
+      // @gate __DEV__
+      it('warns when server renders an extra text node as only child', () => {
+        function Mismatch({isClient}) {
+          return <div className="parent">{!isClient && 'only'}</div>;
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     only
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra text node in the beginning', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {!isClient && 'first'}
+              <main className="2" />
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <main className="2">
+          -     first
+                ...
+          ]
+            Owner Stack:
+              in main (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra text node in the middle', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              {!isClient && 'second'}
+              <footer className="3" />
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <header>
+          +     <footer className="3">
+          -     second
+          ]
+            Owner Stack:
+              in footer (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra text node in the end', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              <main className="2" />
+              {!isClient && 'third'}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     third
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+    });
+  });
+
+  describe('special nodes', () => {
+    describe('Suspense', () => {
+      function Never() {
+        throw new Promise(resolve => {});
+      }
+
+      // @gate __DEV__
+      it('warns when client renders an extra Suspense node in content mode', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {isClient && (
+                <React.Suspense fallback={<p>Loading...</p>}>
+                  <main className="only" />
+                </React.Suspense>
+              )}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <Suspense fallback={<p>}>
+          ]
+            Owner Stack:
+              in Suspense (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra Suspense node in content mode', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {!isClient && (
+                <React.Suspense fallback={<p>Loading...</p>}>
+                  <main className="only" />
+                </React.Suspense>
+              )}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     <Suspense>
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra Suspense node in fallback mode', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {isClient && (
+                <React.Suspense fallback={<p>Loading...</p>}>
+                  <main className="only" />
+                  <Never />
+                </React.Suspense>
+              )}
+            </div>
+          );
+        }
+        // TODO: This message doesn't seem to have any useful details.
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <Suspense fallback={<p>}>
+          ]
+            Owner Stack:
+              in Suspense (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra Suspense node in fallback mode', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {!isClient && (
+                <React.Suspense fallback={<p>Loading...</p>}>
+                  <main className="only" />
+                  <Never />
+                </React.Suspense>
+              )}
+            </div>
+          );
+        }
+
+        // @TODO changes made to sending Fizz errors to client led to the insertion of templates in client rendered
+        // suspense boundaries. This leaks in this test becuase the client rendered suspense boundary appears like
+        // unhydrated tail nodes and this template is the first match. When we add special case handling for client
+        // rendered suspense boundaries this test will likely change again
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     <Suspense>
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra node inside Suspense content', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <React.Suspense fallback={<p>Loading...</p>}>
+                <header className="1" />
+                {isClient && <main className="second" />}
+                <footer className="3" />
+              </React.Suspense>
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <Suspense fallback={<p>}>
+                  <header>
+          +       <main className="second">
+          -       <footer className="3">
+                  ...
+          ]
+            Owner Stack:
+              in main (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra node inside Suspense content', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <React.Suspense fallback={<p>Loading...</p>}>
+                <header className="1" />
+                {!isClient && <main className="second" />}
+                <footer className="3" />
+              </React.Suspense>
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <Suspense fallback={<p>}>
+                  <header>
+          +       <footer className="3">
+          -       <main className="second">
+          ]
+            Owner Stack:
+              in footer (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra node inside Suspense fallback', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <React.Suspense
+                fallback={
+                  <>
+                    <p>Loading...</p>
+                    {isClient && <br />}
+                  </>
+                }>
+                <main className="only" />
+                <Never />
+              </React.Suspense>
+            </div>
+          );
+        }
+
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Switched to client rendering because the server rendering aborted due to:
+
+          The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server]
+            Owner Stack: null",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra node inside Suspense fallback', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <React.Suspense
+                fallback={
+                  <>
+                    <p>Loading...</p>
+                    {!isClient && <br />}
+                  </>
+                }>
+                <main className="only" />
+                <Never />
+              </React.Suspense>
+            </div>
+          );
+        }
+
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Switched to client rendering because the server rendering aborted due to:
+
+          The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server]
+            Owner Stack: null",
+          ]
+        `);
+      });
+    });
+
+    describe('Fragment', () => {
+      // @gate __DEV__
+      it('warns when client renders an extra Fragment node', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {isClient && (
+                <>
+                  <header className="1" />
+                  <main className="2" />
+                  <footer className="3" />
+                </>
+              )}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          +     <header className="1">
+                ...
+          ]
+            Owner Stack:
+              in header (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra Fragment node', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              {!isClient && (
+                <>
+                  <header className="1" />
+                  <main className="2" />
+                  <footer className="3" />
+                </>
+              )}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div className="parent">
+          -     <header className="1">
+          -     <main className="2">
+          -     <footer className="3">
+          ]
+            Owner Stack:
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      });
+    });
+  });
+
+  describe('misc cases', () => {
+    // @gate __DEV__
+    it('warns when client renders an extra node deeper in the tree', () => {
+      function Mismatch({isClient}) {
+        return isClient ? <ProfileSettings /> : <MediaSettings />;
+      }
+
+      function ProfileSettings() {
+        return (
+          <div className="parent">
+            <input />
+            <Panel type="profile" />
+          </div>
+        );
+      }
+
+      function MediaSettings() {
+        return (
+          <div className="parent">
+            <input />
+            <Panel type="media" />
+          </div>
+        );
+      }
+
+      function Panel({type}) {
+        return (
+          <>
+            <header className="1" />
+            <main className="2" />
+            {type === 'profile' && <footer className="3" />}
+          </>
+        );
+      }
+
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <ProfileSettings>
+              <div className="parent">
+                <input>
+                <Panel type="profile">
+                  <header>
+                  <main>
+        +         <footer className="3">
+        ]
+          Owner Stack:
+            in footer (at **)
+            in Panel (at **)
+            in ProfileSettings (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+
+    // @gate __DEV__
+    it('warns when server renders an extra node deeper in the tree', () => {
+      function Mismatch({isClient}) {
+        return isClient ? <ProfileSettings /> : <MediaSettings />;
+      }
+
+      function ProfileSettings() {
+        return (
+          <div className="parent">
+            <input />
+            <Panel type="profile" />
+          </div>
+        );
+      }
+
+      function MediaSettings() {
+        return (
+          <div className="parent">
+            <input />
+            <Panel type="media" />
+          </div>
+        );
+      }
+
+      function Panel({type}) {
+        return (
+          <>
+            <header className="1" />
+            <main className="2" />
+            {type !== 'profile' && <footer className="3" />}
+          </>
+        );
+      }
+
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        [
+          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+
+          <Mismatch isClient={true}>
+            <ProfileSettings>
+              <div className="parent">
+        -       <footer className="3">
+        ]
+          Owner Stack:
+            in div (at **)
+            in ProfileSettings (at **)
+            in Mismatch (at **)",
+        ]
+      `);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMIframe-test.js b/packages/react-dom/src/__tests__/ReactDOMIframe-test.js
new file mode 100644
index 00000000000..5ce6811b247
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMIframe-test.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMIframe', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  it('should trigger load events', async () => {
+    const onLoadSpy = jest.fn();
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(React.createElement('iframe', {onLoad: onLoadSpy}));
+    });
+    const iframe = container.firstChild;
+
+    const loadEvent = document.createEvent('Event');
+    loadEvent.initEvent('load', false, false);
+
+    await act(() => {
+      iframe.dispatchEvent(loadEvent);
+    });
+
+    expect(onLoadSpy).toHaveBeenCalled();
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
new file mode 100644
index 00000000000..8dad091ee8f
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
@@ -0,0 +1,663 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactCache;
+let ReactDOM;
+let ReactDOMClient;
+// let Suspense;
+let originalCreateElement;
+// let TextResource;
+// let textResourceShouldFail;
+let originalHTMLImageElementSrcDescriptor;
+
+let images = [];
+let onLoadSpy = null;
+let actualLoadSpy = null;
+
+let waitForAll;
+let waitFor;
+let assertLog;
+
+function PhaseMarkers({children}) {
+  Scheduler.log('render start');
+  React.useLayoutEffect(() => {
+    Scheduler.log('last layout');
+  });
+  React.useEffect(() => {
+    Scheduler.log('last passive');
+  });
+  return children;
+}
+
+function last(arr) {
+  if (Array.isArray(arr)) {
+    if (arr.length) {
+      return arr[arr.length - 1];
+    }
+    return undefined;
+  }
+  throw new Error('last was passed something that was not an array');
+}
+
+function Text(props) {
+  Scheduler.log(props.text);
+  return props.text;
+}
+
+// function AsyncText(props) {
+//   const text = props.text;
+//   try {
+//     TextResource.read([props.text, props.ms]);
+//     Scheduler.log(text);
+//     return text;
+//   } catch (promise) {
+//     if (typeof promise.then === 'function') {
+//       Scheduler.log(`Suspend! [${text}]`);
+//     } else {
+//       Scheduler.log(`Error! [${text}]`);
+//     }
+//     throw promise;
+//   }
+// }
+
+function Img({src: maybeSrc, onLoad, useImageLoader, ref}) {
+  const src = maybeSrc || 'default';
+  Scheduler.log('Img ' + src);
+  return <img src={src} onLoad={onLoad} />;
+}
+
+function Yield() {
+  Scheduler.log('Yield');
+  Scheduler.unstable_requestPaint();
+  return null;
+}
+
+function loadImage(element) {
+  const event = new Event('load');
+  element.__needsDispatch = false;
+  element.dispatchEvent(event);
+}
+
+describe('ReactDOMImageLoad', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Scheduler = require('scheduler');
+    // ReactCache = require('react-cache');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    // Suspense = React.Suspense;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+
+    onLoadSpy = jest.fn(reactEvent => {
+      const src = reactEvent.target.getAttribute('src');
+      Scheduler.log('onLoadSpy [' + src + ']');
+    });
+
+    actualLoadSpy = jest.fn(nativeEvent => {
+      const src = nativeEvent.target.getAttribute('src');
+      Scheduler.log('actualLoadSpy [' + src + ']');
+      nativeEvent.__originalDispatch = false;
+    });
+
+    // 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.log(
+    //                     `Promise rejected [${text}]`,
+    //                   );
+    //                   status = 'rejected';
+    //                   value = new Error('Failed to load: ' + text);
+    //                   listeners.forEach(listener => listener.reject(value));
+    //                 } else {
+    //                   Scheduler.log(
+    //                     `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;
+    //           }
+    //         }
+    //       },
+    //     };
+    //   },
+    //   ([text, ms]) => text,
+    // );
+    // textResourceShouldFail = false;
+
+    images = [];
+
+    originalCreateElement = document.createElement;
+    document.createElement = function createElement(tagName, options) {
+      const element = originalCreateElement.call(document, tagName, options);
+      if (tagName === 'img') {
+        element.addEventListener('load', actualLoadSpy);
+        images.push(element);
+      }
+      return element;
+    };
+
+    originalHTMLImageElementSrcDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLImageElement.prototype,
+      'src',
+    );
+
+    Object.defineProperty(HTMLImageElement.prototype, 'src', {
+      get() {
+        return this.getAttribute('src');
+      },
+      set(value) {
+        Scheduler.log('load triggered');
+        this.__needsDispatch = true;
+        this.setAttribute('src', value);
+      },
+    });
+  });
+
+  afterEach(() => {
+    document.createElement = originalCreateElement;
+    Object.defineProperty(
+      HTMLImageElement.prototype,
+      'src',
+      originalHTMLImageElementSrcDescriptor,
+    );
+  });
+
+  it('captures the load event if it happens before commit phase and replays it between layout and passive effects', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img onLoad={onLoadSpy} />
+          <Yield />
+          <Text text={'a'} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    await waitFor(['render start', 'Img default', 'Yield']);
+    const img = last(images);
+    loadImage(img);
+    assertLog([
+      'actualLoadSpy [default]',
+      // no onLoadSpy since we have not completed render
+    ]);
+    await waitForAll(['a', 'load triggered', 'last layout', 'last passive']);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+    assertLog([
+      'actualLoadSpy [default]', // the browser reloading of the image causes this to yield again
+      'onLoadSpy [default]',
+    ]);
+    expect(onLoadSpy).toHaveBeenCalled();
+  });
+
+  it('captures the load event if it happens after commit phase and replays it', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img onLoad={onLoadSpy} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    await waitFor([
+      'render start',
+      'Img default',
+      'load triggered',
+      'last layout',
+    ]);
+    Scheduler.unstable_requestPaint();
+    const img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [default]', 'onLoadSpy [default]']);
+    await waitForAll(['last passive']);
+    expect(img.__needsDispatch).toBe(false);
+    expect(onLoadSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('replays the last load event when more than one fire before the end of the layout phase completes', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function Base() {
+      const [src, setSrc] = React.useState('a');
+      return (
+        <PhaseMarkers>
+          <Img src={src} onLoad={onLoadSpy} />
+          <Yield />
+          <UpdateSrc setSrc={setSrc} />
+        </PhaseMarkers>
+      );
+    }
+
+    function UpdateSrc({setSrc}) {
+      React.useLayoutEffect(() => {
+        setSrc('b');
+      }, [setSrc]);
+      return null;
+    }
+
+    React.startTransition(() => root.render(<Base />));
+
+    await waitFor(['render start', 'Img a', 'Yield']);
+    const img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [a]']);
+
+    await waitFor([
+      'load triggered',
+      'last layout',
+      // the update in layout causes a passive effects flush before a sync render
+      'last passive',
+      'render start',
+      'Img b',
+      'Yield',
+      // yield is ignored becasue we are sync rendering
+      'last layout',
+      'last passive',
+    ]);
+    expect(images.length).toBe(1);
+    loadImage(img);
+    assertLog(['actualLoadSpy [b]', 'onLoadSpy [b]']);
+    expect(onLoadSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('replays load events that happen in passive phase after the passive phase.', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    root.render(
+      <PhaseMarkers>
+        <Img onLoad={onLoadSpy} />
+      </PhaseMarkers>,
+    );
+
+    await waitForAll([
+      'render start',
+      'Img default',
+      'load triggered',
+      'last layout',
+      'last passive',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [default]', 'onLoadSpy [default]']);
+    expect(onLoadSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('captures and suppresses the load event if it happens before passive effects and a cascading update causes the img to be removed', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function ChildSuppressing({children}) {
+      const [showChildren, update] = React.useState(true);
+      React.useLayoutEffect(() => {
+        if (showChildren) {
+          update(false);
+        }
+      }, [showChildren]);
+      return showChildren ? children : null;
+    }
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <ChildSuppressing>
+            <Img onLoad={onLoadSpy} />
+            <Yield />
+            <Text text={'a'} />
+          </ChildSuppressing>
+        </PhaseMarkers>,
+      ),
+    );
+
+    await waitFor(['render start', 'Img default', 'Yield']);
+    const img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [default]']);
+    await waitForAll(['a', 'load triggered', 'last layout', 'last passive']);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+    // we expect the browser to load the image again but since we are no longer rendering
+    // the img there will be no onLoad called
+    assertLog(['actualLoadSpy [default]']);
+    await waitForAll([]);
+    expect(onLoadSpy).not.toHaveBeenCalled();
+  });
+
+  it('captures and suppresses the load event if it happens before passive effects and a cascading update causes the img to be removed, alternate', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function Switch({children}) {
+      const [shouldShow, updateShow] = React.useState(true);
+      return children(shouldShow, updateShow);
+    }
+
+    function UpdateSwitchInLayout({updateShow}) {
+      React.useLayoutEffect(() => {
+        updateShow(false);
+      }, []);
+      return null;
+    }
+
+    React.startTransition(() =>
+      root.render(
+        <Switch>
+          {(shouldShow, updateShow) => (
+            <PhaseMarkers>
+              <>
+                {shouldShow === true ? (
+                  <>
+                    <Img onLoad={onLoadSpy} />
+                    <Yield />
+                    <Text text={'a'} />
+                  </>
+                ) : null}
+                ,
+                <UpdateSwitchInLayout updateShow={updateShow} />
+              </>
+            </PhaseMarkers>
+          )}
+        </Switch>,
+      ),
+    );
+
+    await waitFor([
+      // initial render
+      'render start',
+      'Img default',
+      'Yield',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [default]']);
+    await waitForAll([
+      'a',
+      'load triggered',
+      // img is present at first
+      'last layout',
+      'last passive',
+      // sync re-render where the img is suppressed
+      'render start',
+      'last layout',
+      'last passive',
+    ]);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+    // we expect the browser to load the image again but since we are no longer rendering
+    // the img there will be no onLoad called
+    assertLog(['actualLoadSpy [default]']);
+    await waitForAll([]);
+    expect(onLoadSpy).not.toHaveBeenCalled();
+  });
+
+  // eslint-disable-next-line jest/no-commented-out-tests
+  // it('captures the load event if it happens in a suspended subtree and replays it between layout and passive effects on resumption', async function() {
+  //   function SuspendingWithImage() {
+  //     Scheduler.log('SuspendingWithImage');
+  //     return (
+  //       <Suspense fallback={<Text text="Loading..." />}>
+  //         <AsyncText text="A" ms={100} />
+  //         <PhaseMarkers>
+  //           <Img onLoad={onLoadSpy} />
+  //         </PhaseMarkers>
+  //       </Suspense>
+  //     );
+  //   }
+
+  //   const container = document.createElement('div');
+  //   const root = ReactDOMClient.createRoot(container);
+
+  //   React.startTransition(() => root.render(<SuspendingWithImage />));
+
+  //   expect(Scheduler).toFlushAndYield([
+  //     'SuspendingWithImage',
+  //     'Suspend! [A]',
+  //     'render start',
+  //     'Img default',
+  //     'Loading...',
+  //   ]);
+  //   let img = last(images);
+  //   loadImage(img);
+  //   expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
+  //   expect(onLoadSpy).not.toHaveBeenCalled();
+
+  //   // Flush some of the time
+  //   jest.advanceTimersByTime(50);
+  //   // Still nothing...
+  //   expect(Scheduler).toFlushWithoutYielding();
+
+  //   // Flush the promise completely
+  //   jest.advanceTimersByTime(50);
+  //   // Renders successfully
+  //   expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+
+  //   expect(Scheduler).toFlushAndYieldThrough([
+  //     'A',
+  //     // img was recreated on unsuspended tree causing new load event
+  //     'render start',
+  //     'Img default',
+  //     'last layout',
+  //   ]);
+
+  //   expect(images.length).toBe(2);
+  //   img = last(images);
+  //   expect(img.__needsDispatch).toBe(true);
+  //   loadImage(img);
+  //   expect(Scheduler).toHaveYielded([
+  //     'actualLoadSpy [default]',
+  //     'onLoadSpy [default]',
+  //   ]);
+
+  //   expect(Scheduler).toFlushAndYield(['last passive']);
+
+  //   expect(onLoadSpy).toHaveBeenCalledTimes(1);
+  // });
+
+  it('correctly replays the last img load even when a yield + update causes the host element to change', async function () {
+    let externalSetSrc = null;
+    let externalSetSrcAlt = null;
+
+    function Base() {
+      const [src, setSrc] = React.useState(null);
+      const [srcAlt, setSrcAlt] = React.useState(null);
+      externalSetSrc = setSrc;
+      externalSetSrcAlt = setSrcAlt;
+      return srcAlt || src ? <YieldingWithImage src={srcAlt || src} /> : null;
+    }
+
+    function YieldingWithImage({src}) {
+      Scheduler.log('YieldingWithImage');
+      React.useEffect(() => {
+        Scheduler.log('Committed');
+      });
+      return (
+        <>
+          <Img src={src} onLoad={onLoadSpy} />
+          <Yield />
+          <Text text={src} />
+        </>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    root.render(<Base />);
+
+    await waitForAll([]);
+
+    React.startTransition(() => externalSetSrc('a'));
+
+    await waitFor(['YieldingWithImage', 'Img a', 'Yield']);
+    let img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [a]']);
+
+    ReactDOM.flushSync(() => externalSetSrcAlt('b'));
+
+    assertLog([
+      'YieldingWithImage',
+      'Img b',
+      'Yield',
+      'b',
+      'load triggered',
+      'Committed',
+    ]);
+    expect(images.length).toBe(2);
+    img = last(images);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+
+    assertLog(['actualLoadSpy [b]', 'onLoadSpy [b]']);
+    // why is there another update here?
+    await waitForAll(['YieldingWithImage', 'Img b', 'Yield', 'b', 'Committed']);
+  });
+
+  it('preserves the src property / attribute when triggering a potential new load event', async () => {
+    // this test covers a regression identified in https://github.com/mui/material-ui/pull/31263
+    // where the resetting of the src property caused the property to change from relative to fully qualified
+
+    // make sure we are not using the patched src setter
+    Object.defineProperty(
+      HTMLImageElement.prototype,
+      'src',
+      originalHTMLImageElementSrcDescriptor,
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img onLoad={onLoadSpy} />
+          <Yield />
+          <Text text={'a'} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    // render to yield to capture state of img src attribute and property before commit
+    await waitFor(['render start', 'Img default', 'Yield']);
+    const img = last(images);
+    const renderSrcProperty = img.src;
+    const renderSrcAttr = img.getAttribute('src');
+
+    // finish render and commit causing the src property to be rewritten
+    await waitForAll(['a', 'last layout', 'last passive']);
+    const commitSrcProperty = img.src;
+    const commitSrcAttr = img.getAttribute('src');
+
+    // ensure attribute and properties agree
+    expect(renderSrcProperty).toBe(commitSrcProperty);
+    expect(renderSrcAttr).toBe(commitSrcAttr);
+  });
+
+  it('captures the load event for Blob sources if it happens before commit phase', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const blob = new Blob();
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img src={blob} onLoad={onLoadSpy} />
+          <Yield />
+          <Text text={'a'} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    await waitFor(['render start', 'Img [object Blob]', 'Yield']);
+    const img = last(images);
+    loadImage(img);
+    assertLog([
+      'actualLoadSpy [[object Blob]]',
+      // no onLoadSpy since we have not completed render
+    ]);
+    await waitForAll(['a', 'load triggered', 'last layout', 'last passive']);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+    assertLog([
+      'actualLoadSpy [[object Blob]]', // the browser reloading of the image causes this to yield again
+      'onLoadSpy [[object Blob]]',
+    ]);
+    expect(onLoadSpy).toHaveBeenCalled();
+  });
+
+  it('captures the load event for Blob sources if it happens after commit phase and replays it', async function () {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const blob = new Blob();
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img src={blob} onLoad={onLoadSpy} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    await waitFor([
+      'render start',
+      'Img [object Blob]',
+      'load triggered',
+      'last layout',
+    ]);
+    Scheduler.unstable_requestPaint();
+    const img = last(images);
+    loadImage(img);
+    assertLog(['actualLoadSpy [[object Blob]]', 'onLoadSpy [[object Blob]]']);
+    await waitForAll(['last passive']);
+    expect(img.__needsDispatch).toBe(false);
+    expect(onLoadSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js b/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js
new file mode 100644
index 00000000000..f3bc6ea8ade
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMInReactServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+  });
+
+  it('can require react-dom', () => {
+    // In RSC this will be aliased.
+    require('react');
+    require('react-dom');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
new file mode 100644
index 00000000000..04bd96fe2e8
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -0,0 +1,3112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Set by `yarn test-fire`.
+const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
+
+function emptyFunction() {}
+
+describe('ReactDOMInput', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  let Scheduler;
+  let act;
+  let assertLog;
+  let setUntrackedValue;
+  let setUntrackedChecked;
+  let container;
+  let root;
+  let assertConsoleErrorDev;
+
+  function dispatchEventOnNode(node, type) {
+    node.dispatchEvent(new Event(type, {bubbles: true, cancelable: true}));
+  }
+
+  function isValueDirty(node) {
+    // Return the "dirty value flag" as defined in the HTML spec. Cast to text
+    // input to sidestep complicated value sanitization behaviors.
+    const copy = node.cloneNode();
+    copy.type = 'text';
+    // If modifying the attribute now doesn't change the value, the value was already detached.
+    copy.defaultValue += Math.random();
+    return copy.value === node.value;
+  }
+
+  function isCheckedDirty(node) {
+    // Return the "dirty checked flag" as defined in the HTML spec.
+    if (node.checked !== node.defaultChecked) {
+      return true;
+    }
+    const copy = node.cloneNode();
+    copy.type = 'checkbox';
+    copy.defaultChecked = !copy.defaultChecked;
+    return copy.checked === node.checked;
+  }
+
+  function getTrackedAndCurrentInputValue(elem: HTMLElement): [mixed, mixed] {
+    const tracker = elem._valueTracker;
+    if (!tracker) {
+      throw new Error('No input tracker');
+    }
+    return [
+      tracker.getValue(),
+      elem.nodeName === 'INPUT' &&
+      (elem.type === 'checkbox' || elem.type === 'radio')
+        ? String(elem.checked)
+        : elem.value,
+    ];
+  }
+
+  function assertInputTrackingIsCurrent(parent) {
+    parent.querySelectorAll('input, textarea, select').forEach(input => {
+      const [trackedValue, currentValue] =
+        getTrackedAndCurrentInputValue(input);
+      if (trackedValue !== currentValue) {
+        throw new Error(
+          `Input ${input.outerHTML} is currently ${currentValue} but tracker thinks it's ${trackedValue}`,
+        );
+      }
+    });
+  }
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    setUntrackedValue = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    ).set;
+    setUntrackedChecked = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'checked',
+    ).set;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    assertLog = require('internal-test-utils').assertLog;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = ReactDOMClient.createRoot(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    jest.restoreAllMocks();
+  });
+
+  it('should warn for controlled value of 0 with missing onChange', async () => {
+    await act(() => {
+      root.render(<input type="text" value={0} />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn for controlled value of "" with missing onChange', async () => {
+    await act(() => {
+      root.render(<input type="text" value="" />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn for controlled value of "0" with missing onChange', async () => {
+    await act(() => {
+      root.render(<input type="text" value="0" />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn for controlled value of false with missing onChange', async () => {
+    await act(() => {
+      root.render(<input type="checkbox" checked={false} />);
+    });
+    assertConsoleErrorDev([
+      '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`.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn with checked and no onChange handler with readOnly specified', async () => {
+    await act(() => {
+      root.render(<input type="checkbox" checked={false} readOnly={true} />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<input type="checkbox" checked={false} readOnly={false} />);
+    });
+    assertConsoleErrorDev([
+      '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`.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should not warn about missing onChange in uncontrolled inputs', async () => {
+    await act(() => {
+      root.render(<input />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input value={undefined} />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="text" />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="text" value={undefined} />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="checkbox" />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="checkbox" checked={undefined} />);
+    });
+  });
+
+  it('should not warn with value and onInput handler', async () => {
+    await act(() => {
+      root.render(<input value="..." onInput={() => {}} />);
+    });
+  });
+
+  it('should properly control a value even if no event listener exists', async () => {
+    await act(() => {
+      root.render(<input type="text" value="lion" />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)',
+    ]);
+    const node = container.firstChild;
+    expect(isValueDirty(node)).toBe(true);
+
+    setUntrackedValue.call(node, 'giraffe');
+
+    // This must use the native event dispatching. If we simulate, we will
+    // bypass the lazy event attachment system so we won't actually test this.
+    await act(() => {
+      dispatchEventOnNode(node, 'input');
+    });
+
+    expect(node.value).toBe('lion');
+    expect(isValueDirty(node)).toBe(true);
+  });
+
+  it('should control a value in reentrant events', async () => {
+    class ControlledInputs extends React.Component {
+      state = {value: 'lion'};
+      a = null;
+      b = null;
+      switchedFocus = false;
+      change(newValue) {
+        this.setState({value: newValue});
+        // Calling focus here will blur the text box which causes a native
+        // change event. Ideally we shouldn't have to fire this ourselves.
+        // Don't remove unless you've verified the fix in #8240 is still covered.
+        dispatchEventOnNode(this.a, 'input');
+        this.b.focus();
+      }
+      blur(currentValue) {
+        this.switchedFocus = true;
+        // currentValue should be 'giraffe' here because we should not have
+        // restored it on the target yet.
+        this.setState({value: currentValue});
+      }
+      render() {
+        return (
+          <div>
+            <input
+              type="text"
+              ref={n => (this.a = n)}
+              value={this.state.value}
+              onChange={e => this.change(e.target.value)}
+              onBlur={e => this.blur(e.target.value)}
+            />
+            <input type="text" ref={n => (this.b = n)} />
+          </div>
+        );
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<ControlledInputs ref={ref} />);
+    });
+    const instance = ref.current;
+
+    // Focus the field so we can later blur it.
+    // Don't remove unless you've verified the fix in #8240 is still covered.
+    await act(() => {
+      instance.a.focus();
+    });
+    setUntrackedValue.call(instance.a, 'giraffe');
+    // This must use the native event dispatching. If we simulate, we will
+    // bypass the lazy event attachment system so we won't actually test this.
+    await act(() => {
+      dispatchEventOnNode(instance.a, 'input');
+    });
+    await act(() => {
+      dispatchEventOnNode(instance.a, 'blur');
+    });
+    await act(() => {
+      dispatchEventOnNode(instance.a, 'focusout');
+    });
+
+    expect(instance.a.value).toBe('giraffe');
+    expect(instance.switchedFocus).toBe(true);
+  });
+
+  it('should control values in reentrant events with different targets', async () => {
+    class ControlledInputs extends React.Component {
+      state = {value: 'lion'};
+      a = null;
+      b = null;
+      change(newValue) {
+        // This click will change the checkbox's value to false. Then it will
+        // invoke an inner change event. When we finally, flush, we need to
+        // reset the checkbox's value to true since that is its controlled
+        // value.
+        this.b.click();
+      }
+      render() {
+        return (
+          <div>
+            <input
+              type="text"
+              ref={n => (this.a = n)}
+              value="lion"
+              onChange={e => this.change(e.target.value)}
+            />
+            <input
+              type="checkbox"
+              ref={n => (this.b = n)}
+              checked={true}
+              onChange={() => {}}
+            />
+          </div>
+        );
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<ControlledInputs ref={ref} />);
+    });
+    const instance = ref.current;
+
+    setUntrackedValue.call(instance.a, 'giraffe');
+    // This must use the native event dispatching. If we simulate, we will
+    // bypass the lazy event attachment system so we won't actually test this.
+    await act(() => {
+      dispatchEventOnNode(instance.a, 'input');
+    });
+
+    expect(instance.a.value).toBe('lion');
+    expect(instance.b.checked).toBe(true);
+  });
+
+  describe('switching text inputs between numeric and string numbers', () => {
+    it('does change the number 2 to "2.0" with no change handler', async () => {
+      await act(() => {
+        root.render(<input type="text" value={2} onChange={jest.fn()} />);
+      });
+      const node = container.firstChild;
+
+      setUntrackedValue.call(node, '2.0');
+      dispatchEventOnNode(node, 'input');
+
+      expect(node.value).toBe('2');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('2');
+      }
+    });
+
+    it('does change the string "2" to "2.0" with no change handler', async () => {
+      await act(() => {
+        root.render(<input type="text" value={'2'} onChange={jest.fn()} />);
+      });
+      const node = container.firstChild;
+
+      setUntrackedValue.call(node, '2.0');
+      dispatchEventOnNode(node, 'input');
+
+      expect(node.value).toBe('2');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('2');
+      }
+    });
+
+    it('changes the number 2 to "2.0" using a change handler', async () => {
+      class Stub extends React.Component {
+        state = {
+          value: 2,
+        };
+        onChange = event => {
+          this.setState({value: event.target.value});
+        };
+        render() {
+          const {value} = this.state;
+
+          return <input type="text" value={value} onChange={this.onChange} />;
+        }
+      }
+
+      await act(() => {
+        root.render(<Stub />);
+      });
+      const node = container.firstChild;
+
+      setUntrackedValue.call(node, '2.0');
+      dispatchEventOnNode(node, 'input');
+
+      expect(node.value).toBe('2.0');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('2.0');
+      }
+    });
+  });
+
+  it('does change the string ".98" to "0.98" with no change handler', async () => {
+    class Stub extends React.Component {
+      state = {
+        value: '.98',
+      };
+      render() {
+        return <input type="number" value={this.state.value} />;
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<Stub ref={ref} />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)\n' +
+        '    in Stub (at **)',
+    ]);
+    const node = container.firstChild;
+    await act(() => {
+      ref.current.setState({value: '0.98'});
+    });
+
+    expect(node.value).toEqual('0.98');
+  });
+
+  it('performs a state change from "" to 0', async () => {
+    class Stub extends React.Component {
+      state = {
+        value: '',
+      };
+      render() {
+        return <input type="number" value={this.state.value} readOnly={true} />;
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<Stub ref={ref} />);
+    });
+    const node = container.firstChild;
+    await act(() => {
+      ref.current.setState({value: 0});
+    });
+
+    expect(node.value).toEqual('0');
+  });
+
+  it('updates the value on radio buttons from "" to 0', async () => {
+    await act(() => {
+      root.render(<input type="radio" value="" onChange={function () {}} />);
+    });
+    await act(() => {
+      root.render(<input type="radio" value={0} onChange={function () {}} />);
+    });
+    expect(container.firstChild.value).toBe('0');
+    expect(container.firstChild.getAttribute('value')).toBe('0');
+  });
+
+  it('updates the value on checkboxes from "" to 0', async () => {
+    await act(() => {
+      root.render(<input type="checkbox" value="" onChange={function () {}} />);
+    });
+    await act(() => {
+      root.render(
+        <input type="checkbox" value={0} onChange={function () {}} />,
+      );
+    });
+    expect(container.firstChild.value).toBe('0');
+    expect(container.firstChild.getAttribute('value')).toBe('0');
+  });
+
+  it('distinguishes precision for extra zeroes in string number values', async () => {
+    class Stub extends React.Component {
+      state = {
+        value: '3.0000',
+      };
+      render() {
+        return <input type="number" value={this.state.value} />;
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<Stub ref={ref} />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)\n' +
+        '    in Stub (at **)',
+    ]);
+    const node = container.firstChild;
+    await act(() => {
+      ref.current.setState({value: '3'});
+    });
+
+    expect(node.value).toEqual('3');
+  });
+
+  it('should display `defaultValue` of number 0', async () => {
+    await act(() => {
+      root.render(<input type="text" defaultValue={0} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.getAttribute('value')).toBe('0');
+    expect(node.value).toBe('0');
+  });
+
+  it('only assigns defaultValue if it changes', async () => {
+    class Test extends React.Component {
+      render() {
+        return <input defaultValue="0" />;
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<Test ref={ref} />);
+    });
+    const node = container.firstChild;
+
+    Object.defineProperty(node, 'defaultValue', {
+      get() {
+        return '0';
+      },
+      set(value) {
+        throw new Error(
+          `defaultValue was assigned ${value}, but it did not change!`,
+        );
+      },
+    });
+
+    await act(() => {
+      ref.current.forceUpdate();
+    });
+  });
+
+  it('should display "true" for `defaultValue` of `true`', async () => {
+    const stub = <input type="text" defaultValue={true} />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('true');
+  });
+
+  it('should display "false" for `defaultValue` of `false`', async () => {
+    const stub = <input type="text" defaultValue={false} />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('false');
+  });
+
+  it('should update `defaultValue` for uncontrolled input', async () => {
+    await act(() => {
+      root.render(<input type="text" defaultValue="0" />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
+    if (disableInputAttributeSyncing) {
+      expect(isValueDirty(node)).toBe(false);
+    } else {
+      expect(isValueDirty(node)).toBe(true);
+    }
+
+    await act(() => {
+      root.render(<input type="text" defaultValue="1" />);
+    });
+
+    if (disableInputAttributeSyncing) {
+      expect(node.value).toBe('1');
+      expect(node.defaultValue).toBe('1');
+      expect(isValueDirty(node)).toBe(false);
+    } else {
+      expect(node.value).toBe('0');
+      expect(node.defaultValue).toBe('1');
+      expect(isValueDirty(node)).toBe(true);
+    }
+  });
+
+  it('should update `defaultValue` for uncontrolled date/time input', async () => {
+    await act(() => {
+      root.render(<input type="date" defaultValue="1980-01-01" />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('1980-01-01');
+    expect(node.defaultValue).toBe('1980-01-01');
+
+    await act(() => {
+      root.render(<input type="date" defaultValue="2000-01-01" />);
+    });
+
+    if (disableInputAttributeSyncing) {
+      expect(node.value).toBe('2000-01-01');
+      expect(node.defaultValue).toBe('2000-01-01');
+    } else {
+      expect(node.value).toBe('1980-01-01');
+      expect(node.defaultValue).toBe('2000-01-01');
+    }
+
+    await act(() => {
+      root.render(<input type="date" />);
+    });
+  });
+
+  it('should take `defaultValue` when changing to uncontrolled input', async () => {
+    await act(() => {
+      root.render(<input type="text" value="0" readOnly={true} />);
+    });
+    const node = container.firstChild;
+    expect(node.value).toBe('0');
+    expect(isValueDirty(node)).toBe(true);
+    await act(() => {
+      root.render(<input type="text" defaultValue="1" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+        'More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+    expect(node.value).toBe('0');
+    expect(isValueDirty(node)).toBe(true);
+  });
+
+  it('should render defaultValue for SSR', () => {
+    const markup = ReactDOMServer.renderToString(
+      <input type="text" defaultValue="1" />,
+    );
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render bigint defaultValue for SSR', () => {
+    const markup = ReactDOMServer.renderToString(
+      <input type="text" defaultValue={5n} />,
+    );
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('5');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render value for SSR', () => {
+    const element = <input type="text" value="1" onChange={() => {}} />;
+    const markup = ReactDOMServer.renderToString(element);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render bigint value for SSR', () => {
+    const element = <input type="text" value={5n} onChange={() => {}} />;
+    const markup = ReactDOMServer.renderToString(element);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('5');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render name attribute if it is supplied', async () => {
+    await act(() => {
+      root.render(<input type="text" name="name" />);
+    });
+    const node = container.firstChild;
+    expect(node.name).toBe('name');
+    expect(container.firstChild.getAttribute('name')).toBe('name');
+  });
+
+  it('should render name attribute if it is supplied for SSR', () => {
+    const element = <input type="text" name="name" />;
+    const markup = ReactDOMServer.renderToString(element);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('name')).toBe('name');
+  });
+
+  it('should not render name attribute if it is not supplied', async () => {
+    await act(() => {
+      root.render(<input type="text" />);
+    });
+    expect(container.firstChild.getAttribute('name')).toBe(null);
+  });
+
+  it('should not render name attribute if it is not supplied for SSR', () => {
+    const element = <input type="text" />;
+    const markup = ReactDOMServer.renderToString(element);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('name')).toBe(null);
+  });
+
+  it('should display "foobar" for `defaultValue` of `objToString`', async () => {
+    const objToString = {
+      toString: function () {
+        return 'foobar';
+      },
+    };
+
+    const stub = <input type="text" defaultValue={objToString} />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('foobar');
+  });
+
+  it('should throw for date inputs if `defaultValue` is an object where valueOf() throws', async () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    await expect(async () => {
+      await act(() => {
+        root.render(<input defaultValue={new TemporalLike()} type="date" />);
+      });
+    }).rejects.toThrowError(new TypeError('prod message'));
+    assertConsoleErrorDev([
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should throw for text inputs if `defaultValue` is an object where valueOf() throws', async () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    await expect(async () => {
+      await act(() => {
+        root.render(<input defaultValue={new TemporalLike()} type="text" />);
+      });
+    }).rejects.toThrowError(new TypeError('prod message'));
+    assertConsoleErrorDev([
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should throw for date inputs if `value` is an object where valueOf() throws', async () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <input value={new TemporalLike()} type="date" onChange={() => {}} />,
+        );
+      });
+    }).rejects.toThrowError(new TypeError('prod message'));
+    assertConsoleErrorDev([
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should throw for text inputs if `value` is an object where valueOf() throws', async () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <input value={new TemporalLike()} type="text" onChange={() => {}} />,
+        );
+      });
+    }).rejects.toThrowError(new TypeError('prod message'));
+    assertConsoleErrorDev([
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should display `value` of number 0', async () => {
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+  });
+
+  it('should display `value` of bigint 5', async () => {
+    await act(() => {
+      root.render(<input type="text" value={5n} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('5');
+  });
+
+  it('should allow setting `value` to `true`', async () => {
+    await act(() => {
+      root.render(<input type="text" value="yolo" onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('yolo');
+
+    await act(() => {
+      root.render(<input type="text" value={true} onChange={emptyFunction} />);
+    });
+    expect(node.value).toEqual('true');
+  });
+
+  it('should allow setting `value` to `false`', async () => {
+    await act(() => {
+      root.render(<input type="text" value="yolo" onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('yolo');
+
+    await act(() => {
+      root.render(<input type="text" value={false} onChange={emptyFunction} />);
+    });
+    expect(node.value).toEqual('false');
+  });
+
+  it('should allow setting `value` to `objToString`', async () => {
+    await act(() => {
+      root.render(<input type="text" value="foo" onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('foo');
+
+    const objToString = {
+      toString: function () {
+        return 'foobar';
+      },
+    };
+    await act(() => {
+      root.render(
+        <input type="text" value={objToString} onChange={emptyFunction} />,
+      );
+    });
+    expect(node.value).toEqual('foobar');
+  });
+
+  it('should not incur unnecessary DOM mutations', async () => {
+    await act(() => {
+      root.render(<input value="a" onChange={() => {}} />);
+    });
+
+    const node = container.firstChild;
+    let nodeValue = 'a';
+    const nodeValueSetter = jest.fn();
+    Object.defineProperty(node, 'value', {
+      get: function () {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function (newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    await act(() => {
+      root.render(<input value="a" onChange={() => {}} />);
+    });
+    expect(nodeValueSetter).toHaveBeenCalledTimes(0);
+
+    await act(() => {
+      root.render(<input value="b" onChange={() => {}} />);
+    });
+    expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not incur unnecessary DOM mutations for numeric type conversion', async () => {
+    await act(() => {
+      root.render(<input value="0" onChange={() => {}} />);
+    });
+
+    const node = container.firstChild;
+    let nodeValue = '0';
+    const nodeValueSetter = jest.fn();
+    Object.defineProperty(node, 'value', {
+      get: function () {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function (newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    await act(() => {
+      root.render(<input value={0} onChange={() => {}} />);
+    });
+    expect(nodeValueSetter).toHaveBeenCalledTimes(0);
+  });
+
+  it('should not incur unnecessary DOM mutations for the boolean type conversion', async () => {
+    await act(() => {
+      root.render(<input value="true" onChange={() => {}} />);
+    });
+
+    const node = container.firstChild;
+    let nodeValue = 'true';
+    const nodeValueSetter = jest.fn();
+    Object.defineProperty(node, 'value', {
+      get: function () {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function (newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    await act(() => {
+      root.render(<input value={true} onChange={() => {}} />);
+    });
+    expect(nodeValueSetter).toHaveBeenCalledTimes(0);
+  });
+
+  it('should properly control a value of number `0`', async () => {
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    setUntrackedValue.call(node, 'giraffe');
+    dispatchEventOnNode(node, 'input');
+    expect(node.value).toBe('0');
+  });
+
+  it('should properly control 0.0 for a text input', async () => {
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    setUntrackedValue.call(node, '0.0');
+    await act(() => {
+      dispatchEventOnNode(node, 'input');
+    });
+    expect(node.value).toBe('0');
+  });
+
+  it('should properly control 0.0 for a number input', async () => {
+    await act(() => {
+      root.render(<input type="number" value={0} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+
+    setUntrackedValue.call(node, '0.0');
+    await act(() => {
+      dispatchEventOnNode(node, 'input');
+    });
+
+    if (disableInputAttributeSyncing) {
+      expect(node.value).toBe('0.0');
+      expect(node.hasAttribute('value')).toBe(false);
+    } else {
+      dispatchEventOnNode(node, 'blur');
+      dispatchEventOnNode(node, 'focusout');
+
+      expect(node.value).toBe('0.0');
+      expect(node.getAttribute('value')).toBe('0.0');
+    }
+  });
+
+  it('should properly transition from an empty value to 0', async () => {
+    await act(() => {
+      root.render(<input type="text" value="" onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+    expect(isValueDirty(node)).toBe(false);
+
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={emptyFunction} />);
+    });
+
+    expect(node.value).toBe('0');
+    expect(isValueDirty(node)).toBe(true);
+
+    if (disableInputAttributeSyncing) {
+      expect(node.hasAttribute('value')).toBe(false);
+    } else {
+      expect(node.defaultValue).toBe('0');
+    }
+  });
+
+  it('should properly transition from 0 to an empty value', async () => {
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={emptyFunction} />);
+    });
+    const node = container.firstChild;
+    expect(isValueDirty(node)).toBe(true);
+
+    await act(() => {
+      root.render(<input type="text" value="" onChange={emptyFunction} />);
+    });
+
+    expect(node.value).toBe('');
+    expect(node.defaultValue).toBe('');
+    expect(isValueDirty(node)).toBe(true);
+  });
+
+  it('should properly transition a text input from 0 to an empty 0.0', async () => {
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={emptyFunction} />);
+    });
+    await act(() => {
+      root.render(<input type="text" value="0.0" onChange={emptyFunction} />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0.0');
+    if (disableInputAttributeSyncing) {
+      expect(node.hasAttribute('value')).toBe(false);
+    } else {
+      expect(node.defaultValue).toBe('0.0');
+    }
+  });
+
+  it('should properly transition a number input from "" to 0', async () => {
+    await act(() => {
+      root.render(<input type="number" value="" onChange={emptyFunction} />);
+    });
+    await act(() => {
+      root.render(<input type="number" value={0} onChange={emptyFunction} />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    if (disableInputAttributeSyncing) {
+      expect(node.hasAttribute('value')).toBe(false);
+    } else {
+      expect(node.defaultValue).toBe('0');
+    }
+  });
+
+  it('should properly transition a number input from "" to "0"', async () => {
+    await act(() => {
+      root.render(<input type="number" value="" onChange={emptyFunction} />);
+    });
+    await act(() => {
+      root.render(<input type="number" value="0" onChange={emptyFunction} />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    if (disableInputAttributeSyncing) {
+      expect(node.hasAttribute('value')).toBe(false);
+    } else {
+      expect(node.defaultValue).toBe('0');
+    }
+  });
+
+  it('should have the correct target value', async () => {
+    let handled = false;
+    const handler = function (event) {
+      expect(event.target.nodeName).toBe('INPUT');
+      handled = true;
+    };
+    await act(() => {
+      root.render(<input type="text" value={0} onChange={handler} />);
+    });
+    const node = container.firstChild;
+
+    setUntrackedValue.call(node, 'giraffe');
+
+    await act(() => {
+      dispatchEventOnNode(node, 'input');
+    });
+
+    expect(handled).toBe(true);
+  });
+
+  it('should restore uncontrolled inputs to last defaultValue upon reset', async () => {
+    const inputRef = React.createRef();
+    await act(() => {
+      root.render(
+        <form>
+          <input defaultValue="default1" ref={inputRef} />
+          <input type="reset" />
+        </form>,
+      );
+    });
+    expect(inputRef.current.value).toBe('default1');
+    if (disableInputAttributeSyncing) {
+      expect(isValueDirty(inputRef.current)).toBe(false);
+    } else {
+      expect(isValueDirty(inputRef.current)).toBe(true);
+    }
+
+    setUntrackedValue.call(inputRef.current, 'changed');
+    dispatchEventOnNode(inputRef.current, 'input');
+    expect(inputRef.current.value).toBe('changed');
+    expect(isValueDirty(inputRef.current)).toBe(true);
+
+    await act(() => {
+      root.render(
+        <form>
+          <input defaultValue="default2" ref={inputRef} />
+          <input type="reset" />
+        </form>,
+      );
+    });
+    expect(inputRef.current.value).toBe('changed');
+    expect(isValueDirty(inputRef.current)).toBe(true);
+
+    container.firstChild.reset();
+    // Note: I don't know if we want to always support this.
+    // But it's current behavior so worth being intentional if we break it.
+    // https://github.com/facebook/react/issues/4618
+    expect(inputRef.current.value).toBe('default2');
+    expect(isValueDirty(inputRef.current)).toBe(false);
+  });
+
+  it('should not set a value for submit buttons unnecessarily', async () => {
+    const stub = <input type="submit" />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    // The value shouldn't be '', or else the button will have no text; it
+    // should have the default "Submit" or "Submit Query" label. Most browsers
+    // report this as not having a `value` attribute at all; IE reports it as
+    // the actual label that the user sees.
+    expect(node.hasAttribute('value')).toBe(false);
+  });
+
+  it('should remove the value attribute on submit inputs when value is updated to undefined', async () => {
+    const stub = <input type="submit" value="foo" onChange={emptyFunction} />;
+    await act(() => {
+      root.render(stub);
+    });
+
+    // Not really relevant to this particular test, but changing to undefined
+    // should nonetheless trigger a warning
+    await act(() => {
+      root.render(
+        <input type="submit" value={undefined} onChange={emptyFunction} />,
+      );
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+        'More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+
+    const node = container.firstChild;
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should remove the value attribute on reset inputs when value is updated to undefined', async () => {
+    const stub = <input type="reset" value="foo" onChange={emptyFunction} />;
+    await act(() => {
+      root.render(stub);
+    });
+
+    // Not really relevant to this particular test, but changing to undefined
+    // should nonetheless trigger a warning
+    await act(() => {
+      root.render(
+        <input type="reset" value={undefined} onChange={emptyFunction} />,
+      );
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+        'More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+
+    const node = container.firstChild;
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should set a value on a submit input', async () => {
+    const stub = <input type="submit" value="banana" />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.getAttribute('value')).toBe('banana');
+  });
+
+  it('should not set an undefined value on a submit input', async () => {
+    const stub = <input type="submit" value={undefined} />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    // Note: it shouldn't be an empty string
+    // because that would erase the "submit" label.
+    expect(node.getAttribute('value')).toBe(null);
+
+    await act(() => {
+      root.render(stub);
+    });
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should not set an undefined value on a reset input', async () => {
+    const stub = <input type="reset" value={undefined} />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    // Note: it shouldn't be an empty string
+    // because that would erase the "reset" label.
+    expect(node.getAttribute('value')).toBe(null);
+
+    await act(() => {
+      root.render(stub);
+    });
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should not set a null value on a submit input', async () => {
+    const stub = <input type="submit" value={null} />;
+    await act(() => {
+      root.render(stub);
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `input` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` for uncontrolled components.\n' +
+        '    in input (at **)',
+    ]);
+    const node = container.firstChild;
+
+    // Note: it shouldn't be an empty string
+    // because that would erase the "submit" label.
+    expect(node.getAttribute('value')).toBe(null);
+
+    await act(() => {
+      root.render(stub);
+    });
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should not set a null value on a reset input', async () => {
+    const stub = <input type="reset" value={null} />;
+    await act(() => {
+      root.render(stub);
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `input` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` for uncontrolled components.\n' +
+        '    in input (at **)',
+    ]);
+    const node = container.firstChild;
+
+    // Note: it shouldn't be an empty string
+    // because that would erase the "reset" label.
+    expect(node.getAttribute('value')).toBe(null);
+
+    await act(() => {
+      root.render(stub);
+    });
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should set a value on a reset input', async () => {
+    const stub = <input type="reset" value="banana" />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.getAttribute('value')).toBe('banana');
+  });
+
+  it('should set an empty string value on a submit input', async () => {
+    const stub = <input type="submit" value="" />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.getAttribute('value')).toBe('');
+  });
+
+  it('should set an empty string value on a reset input', async () => {
+    const stub = <input type="reset" value="" />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    expect(node.getAttribute('value')).toBe('');
+  });
+
+  it('should control radio buttons', async () => {
+    class RadioGroup extends React.Component {
+      aRef = React.createRef();
+      bRef = React.createRef();
+      cRef = React.createRef();
+
+      render() {
+        return (
+          <div>
+            <input
+              ref={this.aRef}
+              type="radio"
+              name="fruit"
+              checked={true}
+              onChange={emptyFunction}
+              data-which="a"
+            />
+            A
+            <input
+              ref={this.bRef}
+              type="radio"
+              name="fruit"
+              onChange={emptyFunction}
+              data-which="b"
+            />
+            B
+            <form>
+              <input
+                ref={this.cRef}
+                type="radio"
+                name="fruit"
+                defaultChecked={true}
+                onChange={emptyFunction}
+                data-which="c"
+              />
+            </form>
+          </div>
+        );
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<RadioGroup ref={ref} />);
+    });
+    const stub = ref.current;
+    const aNode = stub.aRef.current;
+    const bNode = stub.bRef.current;
+    const cNode = stub.cRef.current;
+
+    expect(aNode.checked).toBe(true);
+    expect(bNode.checked).toBe(false);
+    // c is in a separate form and shouldn't be affected at all here
+    expect(cNode.checked).toBe(true);
+
+    if (disableInputAttributeSyncing) {
+      expect(aNode.hasAttribute('checked')).toBe(false);
+      expect(bNode.hasAttribute('checked')).toBe(false);
+      expect(cNode.hasAttribute('checked')).toBe(true);
+    } else {
+      expect(aNode.hasAttribute('checked')).toBe(true);
+      expect(bNode.hasAttribute('checked')).toBe(false);
+      expect(cNode.hasAttribute('checked')).toBe(true);
+    }
+
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    expect(isCheckedDirty(cNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    setUntrackedChecked.call(bNode, true);
+    expect(aNode.checked).toBe(false);
+    expect(cNode.checked).toBe(true);
+
+    // The original 'checked' attribute should be unchanged
+    if (disableInputAttributeSyncing) {
+      expect(aNode.hasAttribute('checked')).toBe(false);
+      expect(bNode.hasAttribute('checked')).toBe(false);
+      expect(cNode.hasAttribute('checked')).toBe(true);
+    } else {
+      expect(aNode.hasAttribute('checked')).toBe(true);
+      expect(bNode.hasAttribute('checked')).toBe(false);
+      expect(cNode.hasAttribute('checked')).toBe(true);
+    }
+
+    // Now let's run the actual ReactDOMInput change event handler
+    await act(() => {
+      dispatchEventOnNode(bNode, 'click');
+    });
+
+    // The original state should have been restored
+    expect(aNode.checked).toBe(true);
+    expect(cNode.checked).toBe(true);
+
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    expect(isCheckedDirty(cNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it('should hydrate controlled radio buttons', async () => {
+    function App() {
+      const [current, setCurrent] = React.useState('a');
+      return (
+        <>
+          <input
+            type="radio"
+            name="fruit"
+            checked={current === 'a'}
+            onChange={() => {
+              Scheduler.log('click a');
+              setCurrent('a');
+            }}
+          />
+          <input
+            type="radio"
+            name="fruit"
+            checked={current === 'b'}
+            onChange={() => {
+              Scheduler.log('click b');
+              setCurrent('b');
+            }}
+          />
+          <input
+            type="radio"
+            name="fruit"
+            checked={current === 'c'}
+            onChange={() => {
+              Scheduler.log('click c');
+              // Let's say the user can't pick C
+            }}
+          />
+        </>
+      );
+    }
+    const html = ReactDOMServer.renderToString(<App />);
+    // Create a fresh container, not attached a root yet
+    container.remove();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = html;
+    const [a, b, c] = container.querySelectorAll('input');
+    expect(a.checked).toBe(true);
+    expect(b.checked).toBe(false);
+    expect(c.checked).toBe(false);
+    expect(isCheckedDirty(a)).toBe(false);
+    expect(isCheckedDirty(b)).toBe(false);
+    expect(isCheckedDirty(c)).toBe(false);
+
+    // Click on B before hydrating
+    b.checked = true;
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(false);
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // We replayed the click since the value changed before hydration.
+      assertLog(['click b']);
+    } else {
+      assertLog([]);
+      // Strangely, we leave `b` checked even though we rendered A with
+      // checked={true} and B with checked={false}. Arguably this is a bug.
+    }
+    expect(a.checked).toBe(false);
+    expect(b.checked).toBe(true);
+    expect(c.checked).toBe(false);
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    // If we click on C now though...
+    await act(async () => {
+      setUntrackedChecked.call(c, true);
+      dispatchEventOnNode(c, 'click');
+    });
+
+    assertLog(['click c']);
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // then since C's onClick doesn't set state, B becomes rechecked.
+      expect(a.checked).toBe(false);
+      expect(b.checked).toBe(true);
+      expect(c.checked).toBe(false);
+    } else {
+      // then since C's onClick doesn't set state, A becomes rechecked
+      // since in this branch we didn't replay to select B.
+      expect(a.checked).toBe(true);
+      expect(b.checked).toBe(false);
+      expect(c.checked).toBe(false);
+    }
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    await act(async () => {
+      setUntrackedChecked.call(b, true);
+      dispatchEventOnNode(b, 'click');
+    });
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // Since we already had this selected, this doesn't trigger a change again.
+      assertLog([]);
+    } else {
+      // And we can also change to B properly after hydration.
+      assertLog(['click b']);
+    }
+    expect(a.checked).toBe(false);
+    expect(b.checked).toBe(true);
+    expect(c.checked).toBe(false);
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it('should hydrate uncontrolled radio buttons', async () => {
+    function App() {
+      return (
+        <>
+          <input
+            type="radio"
+            name="fruit"
+            defaultChecked={true}
+            onChange={() => Scheduler.log('click a')}
+          />
+          <input
+            type="radio"
+            name="fruit"
+            defaultChecked={false}
+            onChange={() => Scheduler.log('click b')}
+          />
+          <input
+            type="radio"
+            name="fruit"
+            defaultChecked={false}
+            onChange={() => Scheduler.log('click c')}
+          />
+        </>
+      );
+    }
+    const html = ReactDOMServer.renderToString(<App />);
+    // Create a fresh container, not attached a root yet
+    container.remove();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = html;
+    const [a, b, c] = container.querySelectorAll('input');
+    expect(a.checked).toBe(true);
+    expect(b.checked).toBe(false);
+    expect(c.checked).toBe(false);
+    expect(isCheckedDirty(a)).toBe(false);
+    expect(isCheckedDirty(b)).toBe(false);
+    expect(isCheckedDirty(c)).toBe(false);
+
+    // Click on B before hydrating
+    b.checked = true;
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(false);
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    if (gate(flags => flags.enableHydrationChangeEvent)) {
+      // We replayed the click since the value changed before hydration.
+      assertLog(['click b']);
+    } else {
+      assertLog([]);
+    }
+    expect(a.checked).toBe(false);
+    expect(b.checked).toBe(true);
+    expect(c.checked).toBe(false);
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    // Click back to A
+    await act(async () => {
+      setUntrackedChecked.call(a, true);
+      dispatchEventOnNode(a, 'click');
+    });
+
+    assertLog(['click a']);
+    expect(a.checked).toBe(true);
+    expect(b.checked).toBe(false);
+    expect(c.checked).toBe(false);
+    expect(isCheckedDirty(a)).toBe(true);
+    expect(isCheckedDirty(b)).toBe(true);
+    expect(isCheckedDirty(c)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it('should check the correct radio when the selected name moves', async () => {
+    class App extends React.Component {
+      state = {
+        updated: false,
+      };
+      onClick = () => {
+        this.setState({updated: !this.state.updated});
+      };
+      render() {
+        const {updated} = this.state;
+        const radioName = updated ? 'secondName' : 'firstName';
+        return (
+          <div>
+            <button type="button" onClick={this.onClick} />
+            <input
+              type="radio"
+              name={radioName}
+              onChange={emptyFunction}
+              checked={updated === true}
+            />
+            <input
+              type="radio"
+              name={radioName}
+              onChange={emptyFunction}
+              checked={updated === false}
+            />
+          </div>
+        );
+      }
+    }
+
+    await act(() => {
+      root.render(<App />);
+    });
+    const node = container.firstChild;
+    const buttonNode = node.childNodes[0];
+    const firstRadioNode = node.childNodes[1];
+    expect(isCheckedDirty(firstRadioNode)).toBe(true);
+    expect(firstRadioNode.checked).toBe(false);
+    assertInputTrackingIsCurrent(container);
+    await act(() => {
+      dispatchEventOnNode(buttonNode, 'click');
+    });
+    expect(firstRadioNode.checked).toBe(true);
+    assertInputTrackingIsCurrent(container);
+    await act(() => {
+      dispatchEventOnNode(buttonNode, 'click');
+    });
+    expect(firstRadioNode.checked).toBe(false);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it("shouldn't get tricked by changing radio names, part 2", async () => {
+    await act(() => {
+      root.render(
+        <div>
+          <input
+            type="radio"
+            name="a"
+            value="1"
+            checked={true}
+            onChange={() => {}}
+          />
+          <input
+            type="radio"
+            name="a"
+            value="2"
+            checked={false}
+            onChange={() => {}}
+          />
+        </div>,
+      );
+    });
+    const one = container.querySelector('input[name="a"][value="1"]');
+    const two = container.querySelector('input[name="a"][value="2"]');
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(false);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    await act(() => {
+      root.render(
+        <div>
+          <input
+            type="radio"
+            name="a"
+            value="1"
+            checked={true}
+            onChange={() => {}}
+          />
+          <input
+            type="radio"
+            name="b"
+            value="2"
+            checked={true}
+            onChange={() => {}}
+          />
+        </div>,
+      );
+    });
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(true);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  // @gate !disableLegacyMode
+  it('should control radio buttons if the tree updates during render in legacy mode', async () => {
+    container.remove();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    const sharedParent = container;
+    const container1 = document.createElement('div');
+    const container2 = document.createElement('div');
+
+    sharedParent.appendChild(container1);
+
+    let aNode;
+    let bNode;
+    class ComponentA extends React.Component {
+      state = {changed: false};
+      handleChange = () => {
+        this.setState({
+          changed: true,
+        });
+      };
+      componentDidUpdate() {
+        sharedParent.appendChild(container2);
+      }
+      componentDidMount() {
+        ReactDOM.render(<ComponentB />, container2);
+      }
+      render() {
+        return (
+          <div>
+            <input
+              ref={n => (aNode = n)}
+              type="radio"
+              name="fruit"
+              checked={false}
+              onChange={this.handleChange}
+            />
+            A
+          </div>
+        );
+      }
+    }
+
+    class ComponentB extends React.Component {
+      render() {
+        return (
+          <div>
+            <input
+              ref={n => (bNode = n)}
+              type="radio"
+              name="fruit"
+              checked={true}
+              onChange={emptyFunction}
+            />
+            B
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<ComponentA />, container1);
+
+    expect(aNode.checked).toBe(false);
+    expect(bNode.checked).toBe(true);
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    setUntrackedChecked.call(aNode, true);
+    // This next line isn't necessary in a proper browser environment, but
+    // jsdom doesn't uncheck the others in a group (because they are not yet
+    // sharing a parent), which makes this whole test a little less effective.
+    setUntrackedChecked.call(bNode, false);
+
+    // Now let's run the actual ReactDOMInput change event handler
+    dispatchEventOnNode(aNode, 'click');
+
+    // The original state should have been restored
+    expect(aNode.checked).toBe(false);
+    expect(bNode.checked).toBe(true);
+    expect(isCheckedDirty(aNode)).toBe(true);
+    expect(isCheckedDirty(bNode)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it('should control radio buttons if the tree updates during render (case 2; #26876)', async () => {
+    let thunk = null;
+    function App() {
+      const [disabled, setDisabled] = React.useState(false);
+      const [value, setValue] = React.useState('one');
+      function handleChange(e) {
+        setDisabled(true);
+        // Pretend this is in a setTimeout or something
+        thunk = () => {
+          setDisabled(false);
+          setValue(e.target.value);
+        };
+      }
+      return (
+        <>
+          <input
+            type="radio"
+            name="fruit"
+            value="one"
+            checked={value === 'one'}
+            onChange={handleChange}
+            disabled={disabled}
+          />
+          <input
+            type="radio"
+            name="fruit"
+            value="two"
+            checked={value === 'two'}
+            onChange={handleChange}
+            disabled={disabled}
+          />
+        </>
+      );
+    }
+    await act(() => {
+      root.render(<App />);
+    });
+    const [one, two] = container.querySelectorAll('input');
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(false);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    // Click two
+    setUntrackedChecked.call(two, true);
+    await act(() => {
+      dispatchEventOnNode(two, 'click');
+    });
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(false);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    // After a delay...
+    await act(thunk);
+    expect(one.checked).toBe(false);
+    expect(two.checked).toBe(true);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    // Click back to one
+    setUntrackedChecked.call(one, true);
+    await act(() => {
+      dispatchEventOnNode(one, 'click');
+    });
+    expect(one.checked).toBe(false);
+    expect(two.checked).toBe(true);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+
+    // After a delay...
+    await act(thunk);
+    expect(one.checked).toBe(true);
+    expect(two.checked).toBe(false);
+    expect(isCheckedDirty(one)).toBe(true);
+    expect(isCheckedDirty(two)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it('should warn with value and no onChange handler and readOnly specified', async () => {
+    await act(() => {
+      root.render(<input type="text" value="zoink" readOnly={true} />);
+    });
+    root.unmount();
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<input type="text" value="zoink" readOnly={false} />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should have a this value of undefined if bind is not used', async () => {
+    expect.assertions(1);
+    const unboundInputOnChange = function () {
+      expect(this).toBe(undefined);
+    };
+
+    const stub = <input type="text" onChange={unboundInputOnChange} />;
+    await act(() => {
+      root.render(stub);
+    });
+    const node = container.firstChild;
+
+    setUntrackedValue.call(node, 'giraffe');
+    await act(() => {
+      dispatchEventOnNode(node, 'input');
+    });
+  });
+
+  it('should update defaultValue to empty string', async () => {
+    await act(() => {
+      root.render(<input type="text" defaultValue={'foo'} />);
+    });
+    if (disableInputAttributeSyncing) {
+      expect(isValueDirty(container.firstChild)).toBe(false);
+    } else {
+      expect(isValueDirty(container.firstChild)).toBe(true);
+    }
+    await act(() => {
+      root.render(<input type="text" defaultValue={''} />);
+    });
+    expect(container.firstChild.defaultValue).toBe('');
+    if (disableInputAttributeSyncing) {
+      expect(isValueDirty(container.firstChild)).toBe(false);
+    } else {
+      expect(isValueDirty(container.firstChild)).toBe(true);
+    }
+  });
+
+  it('should warn if value is null', async () => {
+    await act(() => {
+      root.render(<input type="text" value={null} />);
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `input` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` ' +
+        'for uncontrolled components.\n' +
+        '    in input (at **)',
+    ]);
+    root.unmount();
+
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="text" value={null} />);
+    });
+  });
+
+  it('should warn if checked and defaultChecked props are specified', async () => {
+    await act(() => {
+      root.render(
+        <input
+          type="radio"
+          checked={true}
+          defaultChecked={true}
+          readOnly={true}
+        />,
+      );
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'both). Decide between using a controlled or uncontrolled input ' +
+        'element and remove one of these props. More info: ' +
+        'https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+    root.unmount();
+
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <input
+          type="radio"
+          checked={true}
+          defaultChecked={true}
+          readOnly={true}
+        />,
+      );
+    });
+  });
+
+  it('should warn if value and defaultValue props are specified', async () => {
+    await act(() => {
+      root.render(
+        <input type="text" value="foo" defaultValue="bar" readOnly={true} />,
+      );
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'both). Decide between using a controlled or uncontrolled input ' +
+        'element and remove one of these props. More info: ' +
+        'https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+    await (() => {
+      root.unmount();
+    });
+
+    await act(() => {
+      root.render(
+        <input type="text" value="foo" defaultValue="bar" readOnly={true} />,
+      );
+    });
+  });
+
+  it('should warn if controlled input switches to uncontrolled (value is undefined)', async () => {
+    const stub = (
+      <input type="text" value="controlled" onChange={emptyFunction} />
+    );
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="text" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled input switches to uncontrolled (value is null)', async () => {
+    const stub = (
+      <input type="text" value="controlled" onChange={emptyFunction} />
+    );
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="text" value={null} />);
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `input` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` for uncontrolled components.\n' +
+        '    in input (at **)',
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled input switches to uncontrolled with defaultValue', async () => {
+    const stub = (
+      <input type="text" value="controlled" onChange={emptyFunction} />
+    );
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="text" defaultValue="uncontrolled" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if uncontrolled input (value is undefined) switches to controlled', async () => {
+    const stub = <input type="text" />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="text" value="controlled" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if uncontrolled input (value is null) switches to controlled', async () => {
+    const stub = <input type="text" value={null} />;
+    await act(() => {
+      root.render(stub);
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `input` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` for uncontrolled components.\n' +
+        '    in input (at **)',
+    ]);
+    await act(() => {
+      root.render(<input type="text" value="controlled" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled checkbox switches to uncontrolled (checked is undefined)', async () => {
+    const stub = (
+      <input type="checkbox" checked={true} onChange={emptyFunction} />
+    );
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="checkbox" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled checkbox switches to uncontrolled (checked is null)', async () => {
+    const stub = (
+      <input type="checkbox" checked={true} onChange={emptyFunction} />
+    );
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="checkbox" checked={null} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled checkbox switches to uncontrolled with defaultChecked', async () => {
+    const stub = (
+      <input type="checkbox" checked={true} onChange={emptyFunction} />
+    );
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="checkbox" defaultChecked={true} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if uncontrolled checkbox (checked is undefined) switches to controlled', async () => {
+    const stub = <input type="checkbox" />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="checkbox" checked={true} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if uncontrolled checkbox (checked is null) switches to controlled', async () => {
+    const stub = <input type="checkbox" checked={null} />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="checkbox" checked={true} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled radio switches to uncontrolled (checked is undefined)', async () => {
+    const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="radio" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled radio switches to uncontrolled (checked is null)', async () => {
+    const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="radio" checked={null} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if controlled radio switches to uncontrolled with defaultChecked', async () => {
+    const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="radio" defaultChecked={true} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if uncontrolled radio (checked is undefined) switches to controlled', async () => {
+    const stub = <input type="radio" />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="radio" checked={true} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should warn if uncontrolled radio (checked is null) switches to controlled', async () => {
+    const stub = <input type="radio" checked={null} />;
+    await act(() => {
+      root.render(stub);
+    });
+    await act(() => {
+      root.render(<input type="radio" checked={true} />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing an uncontrolled input to be controlled. ' +
+        'This is likely caused by the value changing from undefined to ' +
+        'a defined value, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('should not warn if radio value changes but never becomes controlled', async () => {
+    await act(() => {
+      root.render(<input type="radio" value="value" />);
+    });
+    await act(() => {
+      root.render(<input type="radio" />);
+    });
+    await act(() => {
+      root.render(<input type="radio" value="value" defaultChecked={true} />);
+    });
+    await act(() => {
+      root.render(<input type="radio" value="value" onChange={() => null} />);
+    });
+    await act(() => {
+      root.render(<input type="radio" />);
+    });
+  });
+
+  it('should not warn if radio value changes but never becomes uncontrolled', async () => {
+    await act(() => {
+      root.render(<input type="radio" checked={false} onChange={() => null} />);
+    });
+    const input = container.querySelector('input');
+    expect(isCheckedDirty(input)).toBe(true);
+    await act(() => {
+      root.render(
+        <input
+          type="radio"
+          value="value"
+          defaultChecked={true}
+          checked={false}
+          onChange={() => null}
+        />,
+      );
+    });
+    expect(isCheckedDirty(input)).toBe(true);
+    assertInputTrackingIsCurrent(container);
+  });
+
+  it('should warn if radio checked false changes to become uncontrolled', async () => {
+    await act(() => {
+      root.render(
+        <input
+          type="radio"
+          value="value"
+          checked={false}
+          onChange={() => null}
+        />,
+      );
+    });
+    await act(() => {
+      root.render(<input type="radio" value="value" />);
+    });
+    assertConsoleErrorDev([
+      'A component is changing a controlled input to be uncontrolled. ' +
+        'This is likely caused by the value changing from a defined to ' +
+        'undefined, which should not happen. ' +
+        'Decide between using a controlled or uncontrolled input ' +
+        'element for the lifetime of the component. More info: https://react.dev/link/controlled-components\n' +
+        '    in input (at **)',
+    ]);
+  });
+
+  it('sets type, step, min, max before value always', async () => {
+    const log = [];
+    const originalCreateElement = document.createElement;
+    spyOnDevAndProd(document, 'createElement').mockImplementation(
+      function (type) {
+        const el = originalCreateElement.apply(this, arguments);
+        let value = '';
+        let typeProp = '';
+
+        if (type === 'input') {
+          Object.defineProperty(el, 'type', {
+            get: function () {
+              return typeProp;
+            },
+            set: function (val) {
+              typeProp = String(val);
+              log.push('set property type');
+            },
+          });
+          Object.defineProperty(el, 'value', {
+            get: function () {
+              return value;
+            },
+            set: function (val) {
+              value = String(val);
+              log.push('set property value');
+            },
+          });
+          spyOnDevAndProd(el, 'setAttribute').mockImplementation(
+            function (name) {
+              log.push('set attribute ' + name);
+            },
+          );
+        }
+        return el;
+      },
+    );
+
+    await act(() => {
+      root.render(
+        <input
+          value="0"
+          onChange={() => {}}
+          type="range"
+          min="0"
+          max="100"
+          step="1"
+        />,
+      );
+    });
+
+    expect(log).toEqual([
+      'set attribute min',
+      'set attribute max',
+      'set attribute step',
+      'set property type',
+      'set property value',
+    ]);
+  });
+
+  it('sets value properly with type coming later in props', async () => {
+    await act(() => {
+      root.render(<input value="hi" type="radio" />);
+    });
+    expect(container.firstChild.value).toBe('hi');
+  });
+
+  it('does not raise a validation warning when it switches types', async () => {
+    class Input extends React.Component {
+      state = {type: 'number', value: 1000};
+
+      render() {
+        const {value, type} = this.state;
+        return <input onChange={() => {}} type={type} value={value} />;
+      }
+    }
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(<Input ref={ref} />);
+    });
+    const node = container.firstChild;
+
+    // If the value is set before the type, a validation warning will raise and
+    // the value will not be assigned.
+    await act(() => {
+      ref.current.setState({type: 'text', value: 'Test'});
+    });
+    expect(node.value).toEqual('Test');
+  });
+
+  it('resets value of date/time input to fix bugs in iOS Safari', async () => {
+    function strify(x) {
+      return JSON.stringify(x, null, 2);
+    }
+
+    const log = [];
+    const originalCreateElement = document.createElement;
+    spyOnDevAndProd(document, 'createElement').mockImplementation(
+      function (type) {
+        const el = originalCreateElement.apply(this, arguments);
+        const getDefaultValue = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          'defaultValue',
+        ).get;
+        const setDefaultValue = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          'defaultValue',
+        ).set;
+        const getValue = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          'value',
+        ).get;
+        const setValue = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          'value',
+        ).set;
+        const getType = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          'type',
+        ).get;
+        const setType = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          'type',
+        ).set;
+        if (type === 'input') {
+          Object.defineProperty(el, 'defaultValue', {
+            get: function () {
+              return getDefaultValue.call(this);
+            },
+            set: function (val) {
+              log.push(`node.defaultValue = ${strify(val)}`);
+              setDefaultValue.call(this, val);
+            },
+          });
+          Object.defineProperty(el, 'value', {
+            get: function () {
+              return getValue.call(this);
+            },
+            set: function (val) {
+              log.push(`node.value = ${strify(val)}`);
+              setValue.call(this, val);
+            },
+          });
+          Object.defineProperty(el, 'type', {
+            get: function () {
+              return getType.call(this);
+            },
+            set: function (val) {
+              log.push(`node.type = ${strify(val)}`);
+              setType.call(this, val);
+            },
+          });
+          spyOnDevAndProd(el, 'setAttribute').mockImplementation(
+            function (name, val) {
+              log.push(`node.setAttribute(${strify(name)}, ${strify(val)})`);
+            },
+          );
+        }
+        return el;
+      },
+    );
+
+    await act(() => {
+      root.render(<input type="date" defaultValue="1980-01-01" />);
+    });
+
+    if (disableInputAttributeSyncing) {
+      expect(log).toEqual([
+        'node.type = "date"',
+        'node.defaultValue = "1980-01-01"',
+        // TODO: it's possible this reintroduces the bug because we don't assign `value` at all.
+        // Need to check this on mobile Safari and Chrome.
+      ]);
+    } else {
+      expect(log).toEqual([
+        'node.type = "date"',
+        // value must be assigned before defaultValue. This fixes an issue where the
+        // visually displayed value of date inputs disappears on mobile Safari and Chrome:
+        // https://github.com/facebook/react/issues/7233
+        'node.value = "1980-01-01"',
+        'node.defaultValue = "1980-01-01"',
+      ]);
+    }
+  });
+
+  describe('assigning the value attribute on controlled inputs', function () {
+    function getTestInput() {
+      return class extends React.Component {
+        state = {
+          value: this.props.value == null ? '' : this.props.value,
+        };
+        onChange = event => {
+          this.setState({value: event.target.value});
+        };
+        render() {
+          const type = this.props.type;
+          const value = this.state.value;
+
+          return <input type={type} value={value} onChange={this.onChange} />;
+        }
+      };
+    }
+
+    it('always sets the attribute when values change on text inputs', async () => {
+      const Input = getTestInput();
+      await act(() => {
+        root.render(<Input type="text" />);
+      });
+      const node = container.firstChild;
+      expect(isValueDirty(node)).toBe(false);
+
+      setUntrackedValue.call(node, '2');
+      await act(() => {
+        dispatchEventOnNode(node, 'input');
+      });
+
+      expect(isValueDirty(node)).toBe(true);
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('2');
+      }
+    });
+
+    it('does not set the value attribute on number inputs if focused', async () => {
+      const Input = getTestInput();
+      await act(() => {
+        root.render(<Input type="number" value="1" />);
+      });
+      const node = container.firstChild;
+      expect(isValueDirty(node)).toBe(true);
+
+      node.focus();
+
+      setUntrackedValue.call(node, '2');
+      dispatchEventOnNode(node, 'input');
+
+      expect(isValueDirty(node)).toBe(true);
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('1');
+      }
+    });
+
+    it('sets the value attribute on number inputs on blur', async () => {
+      const Input = getTestInput();
+      await act(() => {
+        root.render(<Input type="number" value="1" />);
+      });
+      const node = container.firstChild;
+      expect(isValueDirty(node)).toBe(true);
+
+      node.focus();
+      setUntrackedValue.call(node, '2');
+      dispatchEventOnNode(node, 'input');
+      node.blur();
+
+      expect(isValueDirty(node)).toBe(true);
+      if (disableInputAttributeSyncing) {
+        expect(node.value).toBe('2');
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.value).toBe('2');
+        expect(node.getAttribute('value')).toBe('2');
+      }
+    });
+
+    it('an uncontrolled number input will not update the value attribute on blur', async () => {
+      await act(() => {
+        root.render(<input type="number" defaultValue="1" />);
+      });
+      const node = container.firstChild;
+      if (disableInputAttributeSyncing) {
+        expect(isValueDirty(node)).toBe(false);
+      } else {
+        expect(isValueDirty(node)).toBe(true);
+      }
+
+      node.focus();
+      setUntrackedValue.call(node, 4);
+      dispatchEventOnNode(node, 'input');
+      node.blur();
+
+      expect(isValueDirty(node)).toBe(true);
+      expect(node.getAttribute('value')).toBe('1');
+    });
+
+    it('an uncontrolled text input will not update the value attribute on blur', async () => {
+      await act(() => {
+        root.render(<input type="text" defaultValue="1" />);
+      });
+      const node = container.firstChild;
+      if (disableInputAttributeSyncing) {
+        expect(isValueDirty(node)).toBe(false);
+      } else {
+        expect(isValueDirty(node)).toBe(true);
+      }
+
+      node.focus();
+      setUntrackedValue.call(node, 4);
+      dispatchEventOnNode(node, 'input');
+      node.blur();
+
+      expect(isValueDirty(node)).toBe(true);
+      expect(node.getAttribute('value')).toBe('1');
+    });
+  });
+
+  describe('setting a controlled input to undefined', () => {
+    let input;
+
+    async function renderInputWithStringThenWithUndefined() {
+      let setValueToUndefined;
+      class Input extends React.Component {
+        constructor() {
+          super();
+          setValueToUndefined = () => this.setState({value: undefined});
+        }
+        state = {value: 'first'};
+        render() {
+          return (
+            <input
+              onChange={e => this.setState({value: e.target.value})}
+              value={this.state.value}
+            />
+          );
+        }
+      }
+
+      await act(() => {
+        root.render(<Input />);
+      });
+      input = container.firstChild;
+      setUntrackedValue.call(input, 'latest');
+      dispatchEventOnNode(input, 'input');
+      await act(() => {
+        setValueToUndefined();
+      });
+    }
+
+    it('reverts the value attribute to the initial value', async () => {
+      await renderInputWithStringThenWithUndefined();
+      assertConsoleErrorDev([
+        'A component is changing a controlled input to be uncontrolled. ' +
+          'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+          'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)\n' +
+          '    in Input (at **)',
+      ]);
+      if (disableInputAttributeSyncing) {
+        expect(input.getAttribute('value')).toBe(null);
+      } else {
+        expect(input.getAttribute('value')).toBe('latest');
+      }
+    });
+
+    it('preserves the value property', async () => {
+      await renderInputWithStringThenWithUndefined();
+      assertConsoleErrorDev([
+        'A component is changing a controlled input to be uncontrolled. ' +
+          'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+          'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)\n' +
+          '    in Input (at **)',
+      ]);
+      expect(input.value).toBe('latest');
+    });
+  });
+
+  describe('setting a controlled input to null', () => {
+    let input;
+
+    async function renderInputWithStringThenWithNull() {
+      let setValueToNull;
+      class Input extends React.Component {
+        constructor() {
+          super();
+          setValueToNull = () => this.setState({value: null});
+        }
+        state = {value: 'first'};
+        render() {
+          return (
+            <input
+              onChange={e => this.setState({value: e.target.value})}
+              value={this.state.value}
+            />
+          );
+        }
+      }
+
+      await act(() => {
+        root.render(<Input />);
+      });
+      input = container.firstChild;
+      setUntrackedValue.call(input, 'latest');
+      dispatchEventOnNode(input, 'input');
+      await act(() => {
+        setValueToNull();
+      });
+    }
+
+    it('reverts the value attribute to the initial value', async () => {
+      await renderInputWithStringThenWithNull();
+      assertConsoleErrorDev([
+        '`value` prop on `input` should not be null. ' +
+          'Consider using an empty string to clear the component ' +
+          'or `undefined` for uncontrolled components.\n' +
+          '    in input (at **)\n' +
+          '    in Input (at **)',
+        'A component is changing a controlled input to be uncontrolled. ' +
+          'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+          'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)\n' +
+          '    in Input (at **)',
+      ]);
+      if (disableInputAttributeSyncing) {
+        expect(input.getAttribute('value')).toBe(null);
+      } else {
+        expect(input.getAttribute('value')).toBe('latest');
+      }
+    });
+
+    it('preserves the value property', async () => {
+      await renderInputWithStringThenWithNull();
+      assertConsoleErrorDev([
+        '`value` prop on `input` should not be null. ' +
+          'Consider using an empty string to clear the component ' +
+          'or `undefined` for uncontrolled components.\n' +
+          '    in input (at **)\n' +
+          '    in Input (at **)',
+        'A component is changing a controlled input to be uncontrolled. ' +
+          'This is likely caused by the value changing from a defined to undefined, which should not happen. ' +
+          'Decide between using a controlled or uncontrolled input element for the lifetime of the component. ' +
+          'More info: https://react.dev/link/controlled-components\n' +
+          '    in input (at **)\n' +
+          '    in Input (at **)',
+      ]);
+      expect(input.value).toBe('latest');
+    });
+  });
+
+  describe('When given a Symbol value', function () {
+    it('treats initial Symbol value as an empty string', async () => {
+      await act(() => {
+        root.render(<input value={Symbol('foobar')} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <input> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in input (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('');
+      }
+    });
+
+    it('treats updated Symbol value as an empty string', async () => {
+      await act(() => {
+        root.render(<input value="foo" onChange={() => {}} />);
+      });
+      await act(() => {
+        root.render(<input value={Symbol('foobar')} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <input> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in input (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('');
+      }
+    });
+
+    it('treats initial Symbol defaultValue as an empty string', async () => {
+      await act(() => {
+        root.render(<input defaultValue={Symbol('foobar')} />);
+      });
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+      expect(node.getAttribute('value')).toBe('');
+      // TODO: we should warn here.
+    });
+
+    it('treats updated Symbol defaultValue as an empty string', async () => {
+      await act(() => {
+        root.render(<input defaultValue="foo" />);
+      });
+      await act(() => {
+        root.render(<input defaultValue={Symbol('foobar')} />);
+      });
+      const node = container.firstChild;
+
+      if (disableInputAttributeSyncing) {
+        expect(node.value).toBe('');
+      } else {
+        expect(node.value).toBe('foo');
+      }
+      expect(node.getAttribute('value')).toBe('');
+      // TODO: we should warn here.
+    });
+  });
+
+  describe('When given a function value', function () {
+    it('treats initial function value as an empty string', async () => {
+      await act(() => {
+        root.render(<input value={() => {}} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <input> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in input (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('');
+      }
+    });
+
+    it('treats updated function value as an empty string', async () => {
+      await act(() => {
+        root.render(<input value="foo" onChange={() => {}} />);
+      });
+      await act(() => {
+        root.render(<input value={() => {}} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <input> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in input (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+      if (disableInputAttributeSyncing) {
+        expect(node.hasAttribute('value')).toBe(false);
+      } else {
+        expect(node.getAttribute('value')).toBe('');
+      }
+    });
+
+    it('treats initial function defaultValue as an empty string', async () => {
+      await act(() => {
+        root.render(<input defaultValue={() => {}} />);
+      });
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+      expect(node.getAttribute('value')).toBe('');
+      // TODO: we should warn here.
+    });
+
+    it('treats updated function defaultValue as an empty string', async () => {
+      await act(() => {
+        root.render(<input defaultValue="foo" />);
+      });
+      await act(() => {
+        root.render(<input defaultValue={() => {}} />);
+      });
+      const node = container.firstChild;
+
+      if (disableInputAttributeSyncing) {
+        expect(node.value).toBe('');
+        expect(node.getAttribute('value')).toBe('');
+      } else {
+        expect(node.value).toBe('foo');
+        expect(node.getAttribute('value')).toBe('');
+      }
+      // TODO: we should warn here.
+    });
+  });
+
+  describe('checked inputs without a value property', function () {
+    // In absence of a value, radio and checkboxes report a value of "on".
+    // Between 16 and 16.2, we assigned a node's value to it's current
+    // value in order to "dettach" it from defaultValue. This had the unfortunate
+    // side-effect of assigning value="on" to radio and checkboxes
+    it('does not add "on" in absence of value on a checkbox', async () => {
+      await act(() => {
+        root.render(<input type="checkbox" defaultChecked={true} />);
+      });
+      const node = container.firstChild;
+
+      expect(node.value).toBe('on');
+      expect(node.hasAttribute('value')).toBe(false);
+    });
+
+    it('does not add "on" in absence of value on a radio', async () => {
+      await act(() => {
+        root.render(<input type="radio" defaultChecked={true} />);
+      });
+      const node = container.firstChild;
+
+      expect(node.value).toBe('on');
+      expect(node.hasAttribute('value')).toBe(false);
+    });
+  });
+
+  it('should remove previous `defaultValue`', async () => {
+    await act(() => {
+      root.render(<input type="text" defaultValue="0" />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
+
+    await act(() => {
+      root.render(<input type="text" />);
+    });
+    expect(node.defaultValue).toBe('');
+  });
+
+  it('should treat `defaultValue={null}` as missing', async () => {
+    await act(() => {
+      root.render(<input type="text" defaultValue="0" />);
+    });
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
+
+    await act(() => {
+      root.render(<input type="text" defaultValue={null} />);
+    });
+    expect(node.defaultValue).toBe('');
+  });
+
+  it('should notice input changes when reverting back to original value', async () => {
+    const log = [];
+    function onChange(e) {
+      log.push(e.target.value);
+    }
+    await act(() => {
+      root.render(<input type="text" value="" onChange={onChange} />);
+    });
+    await act(() => {
+      root.render(<input type="text" value="a" onChange={onChange} />);
+    });
+
+    const node = container.firstChild;
+    setUntrackedValue.call(node, '');
+    dispatchEventOnNode(node, 'input');
+
+    expect(log).toEqual(['']);
+    expect(node.value).toBe('a');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
new file mode 100644
index 00000000000..a5fd14e95c9
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMInvalidARIAHook', () => {
+  let React;
+  let ReactDOMClient;
+  let mountComponent;
+  let act;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    mountComponent = async function (props) {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div {...props} />);
+      });
+    };
+  });
+
+  describe('aria-* props', () => {
+    it('should allow valid aria-* props', async () => {
+      await mountComponent({'aria-label': 'Bumble bees'});
+    });
+
+    it('should allow new ARIA 1.3 attributes', async () => {
+      // Test aria-braillelabel
+      await mountComponent({'aria-braillelabel': 'Braille label text'});
+
+      // Test aria-brailleroledescription
+      await mountComponent({'aria-brailleroledescription': 'Navigation menu'});
+
+      // Test aria-colindextext
+      await mountComponent({'aria-colindextext': 'Column A'});
+
+      // Test aria-rowindextext
+      await mountComponent({'aria-rowindextext': 'Row 1'});
+
+      // Test multiple ARIA 1.3 attributes together
+      await mountComponent({
+        'aria-braillelabel': 'Braille text',
+        'aria-colindextext': 'First column',
+        'aria-rowindextext': 'First row',
+      });
+    });
+    it('should warn for one invalid aria-* prop', async () => {
+      await mountComponent({'aria-badprop': 'maybe'});
+      assertConsoleErrorDev([
+        'Invalid aria prop `aria-badprop` on <div> tag. ' +
+          'For details, see https://react.dev/link/invalid-aria-props\n' +
+          '    in div (at **)',
+      ]);
+    });
+    it('should warn for many invalid aria-* props', async () => {
+      await mountComponent({
+        'aria-badprop': 'Very tall trees',
+        'aria-malprop': 'Turbulent seas',
+      });
+      assertConsoleErrorDev([
+        'Invalid aria props `aria-badprop`, `aria-malprop` on <div> ' +
+          'tag. For details, see https://react.dev/link/invalid-aria-props\n' +
+          '    in div (at **)',
+      ]);
+    });
+    it('should warn for an improperly cased aria-* prop', async () => {
+      // The valid attribute name is aria-haspopup.
+      await mountComponent({'aria-hasPopup': 'true'});
+      assertConsoleErrorDev([
+        'Unknown ARIA attribute `aria-hasPopup`. ' +
+          'Did you mean `aria-haspopup`?\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn for use of recognized camel case aria attributes', async () => {
+      // The valid attribute name is aria-haspopup.
+      await mountComponent({ariaHasPopup: 'true'});
+      assertConsoleErrorDev([
+        'Invalid ARIA attribute `ariaHasPopup`. ' +
+          'Did you mean `aria-haspopup`?\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn for use of unrecognized camel case aria attributes', async () => {
+      // The valid attribute name is aria-haspopup.
+      await mountComponent({ariaSomethingInvalid: 'true'});
+      assertConsoleErrorDev([
+        'Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' +
+          'attributes follow the pattern aria-* and must be lowercase.\n' +
+          '    in div (at **)',
+      ]);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js
new file mode 100644
index 00000000000..e1ba0415767
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMComponentTree', () => {
+  let React;
+  let ReactDOM;
+  let container;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOM = require('react-dom');
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  // @gate !disableLegacyMode
+  it('finds instance of node that is attempted to be unmounted', () => {
+    const component = <div />;
+    const node = ReactDOM.render(<div>{component}</div>, container);
+    ReactDOM.unmountComponentAtNode(node);
+    assertConsoleErrorDev(
+      [
+        "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 ' +
+          'container.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('finds instance from node to stop rendering over other react rendered components', () => {
+    const component = (
+      <div>
+        <span>Hello</span>
+      </div>
+    );
+    const anotherComponent = <div />;
+    const instance = ReactDOM.render(component, container);
+    ReactDOM.render(anotherComponent, instance);
+    assertConsoleErrorDev(
+      [
+        '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.',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js
new file mode 100644
index 00000000000..9c1e7f030e1
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js
@@ -0,0 +1,1464 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOM = require('react-dom');
+const PropTypes = require('prop-types');
+let act;
+let assertConsoleErrorDev;
+describe('ReactDOMLegacyFiber', () => {
+  let container;
+
+  beforeEach(() => {
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+    jest.restoreAllMocks();
+  });
+
+  // @gate !disableLegacyMode
+  it('should render strings as children', () => {
+    const Box = ({value}) => <div>{value}</div>;
+
+    ReactDOM.render(<Box value="foo" />, container);
+    expect(container.textContent).toEqual('foo');
+  });
+
+  // @gate !disableLegacyMode
+  it('should render numbers as children', () => {
+    const Box = ({value}) => <div>{value}</div>;
+
+    ReactDOM.render(<Box value={10} />, container);
+
+    expect(container.textContent).toEqual('10');
+  });
+
+  // @gate !disableLegacyMode
+  it('should be called a callback argument', () => {
+    // mounting phase
+    let called = false;
+    ReactDOM.render(<div>Foo</div>, container, () => (called = true));
+    expect(called).toEqual(true);
+
+    // updating phase
+    called = false;
+    ReactDOM.render(<div>Foo</div>, container, () => (called = true));
+    expect(called).toEqual(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('should call a callback argument when the same element is re-rendered', () => {
+    class Foo extends React.Component {
+      render() {
+        return <div>Foo</div>;
+      }
+    }
+    const element = <Foo />;
+
+    // mounting phase
+    let called = false;
+    ReactDOM.render(element, container, () => (called = true));
+    expect(called).toEqual(true);
+
+    // updating phase
+    called = false;
+    ReactDOM.unstable_batchedUpdates(() => {
+      ReactDOM.render(element, container, () => (called = true));
+    });
+    expect(called).toEqual(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('should render a component returning strings directly from render', () => {
+    const Text = ({value}) => value;
+
+    ReactDOM.render(<Text value="foo" />, container);
+    expect(container.textContent).toEqual('foo');
+  });
+
+  // @gate !disableLegacyMode
+  it('should render a component returning numbers directly from render', () => {
+    const Text = ({value}) => value;
+
+    ReactDOM.render(<Text value={10} />, container);
+
+    expect(container.textContent).toEqual('10');
+  });
+
+  // @gate !disableLegacyMode
+  it('finds the DOM Text node of a string child', () => {
+    class Text extends React.Component {
+      render() {
+        return this.props.value;
+      }
+    }
+
+    let instance = null;
+    ReactDOM.render(
+      <Text value="foo" ref={ref => (instance = ref)} />,
+      container,
+    );
+
+    const textNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+        instance,
+      );
+    expect(textNode).toBe(container.firstChild);
+    expect(textNode.nodeType).toBe(3);
+    expect(textNode.nodeValue).toBe('foo');
+  });
+
+  // @gate !disableLegacyMode
+  it('finds the first child when a component returns a fragment', () => {
+    class Fragment extends React.Component {
+      render() {
+        return [<div key="a" />, <span key="b" />];
+      }
+    }
+
+    let instance = null;
+    ReactDOM.render(<Fragment ref={ref => (instance = ref)} />, container);
+
+    expect(container.childNodes.length).toBe(2);
+
+    const firstNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+        instance,
+      );
+    expect(firstNode).toBe(container.firstChild);
+    expect(firstNode.tagName).toBe('DIV');
+  });
+
+  // @gate !disableLegacyMode
+  it('finds the first child even when fragment is nested', () => {
+    class Wrapper extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    class Fragment extends React.Component {
+      render() {
+        return [
+          <Wrapper key="a">
+            <div />
+          </Wrapper>,
+          <span key="b" />,
+        ];
+      }
+    }
+
+    let instance = null;
+    ReactDOM.render(<Fragment ref={ref => (instance = ref)} />, container);
+
+    expect(container.childNodes.length).toBe(2);
+
+    const firstNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+        instance,
+      );
+    expect(firstNode).toBe(container.firstChild);
+    expect(firstNode.tagName).toBe('DIV');
+  });
+
+  // @gate !disableLegacyMode
+  it('finds the first child even when first child renders null', () => {
+    class NullComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    class Fragment extends React.Component {
+      render() {
+        return [<NullComponent key="a" />, <div key="b" />, <span key="c" />];
+      }
+    }
+
+    let instance = null;
+    ReactDOM.render(<Fragment ref={ref => (instance = ref)} />, container);
+
+    expect(container.childNodes.length).toBe(2);
+
+    const firstNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+        instance,
+      );
+    expect(firstNode).toBe(container.firstChild);
+    expect(firstNode.tagName).toBe('DIV');
+  });
+
+  // @gate !disableLegacyMode
+  it('renders an empty fragment', () => {
+    const Div = () => <div />;
+    const EmptyFragment = () => <></>;
+    const NonEmptyFragment = () => (
+      <>
+        <Div />
+      </>
+    );
+
+    ReactDOM.render(<EmptyFragment />, container);
+    expect(container.firstChild).toBe(null);
+
+    ReactDOM.render(<NonEmptyFragment />, container);
+    expect(container.firstChild.tagName).toBe('DIV');
+
+    ReactDOM.render(<EmptyFragment />, container);
+    expect(container.firstChild).toBe(null);
+
+    ReactDOM.render(<Div />, container);
+    expect(container.firstChild.tagName).toBe('DIV');
+
+    ReactDOM.render(<EmptyFragment />, container);
+    expect(container.firstChild).toBe(null);
+  });
+
+  let svgEls, htmlEls, mathEls;
+  const expectSVG = {ref: el => svgEls.push(el)};
+  const expectHTML = {ref: el => htmlEls.push(el)};
+  const expectMath = {ref: el => mathEls.push(el)};
+
+  const usePortal = function (tree) {
+    return ReactDOM.createPortal(tree, document.createElement('div'));
+  };
+
+  const assertNamespacesMatch = function (tree) {
+    const testContainer = document.createElement('div');
+    svgEls = [];
+    htmlEls = [];
+    mathEls = [];
+
+    ReactDOM.render(tree, testContainer);
+    svgEls.forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    });
+    htmlEls.forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+    });
+    mathEls.forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+    });
+
+    ReactDOM.unmountComponentAtNode(testContainer);
+    expect(testContainer.innerHTML).toBe('');
+  };
+
+  // @gate !disableLegacyMode
+  it('should render one portal', () => {
+    const portalContainer = document.createElement('div');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(<div>portal</div>, portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('<div>portal</div>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    ReactDOM.unmountComponentAtNode(container);
+    expect(portalContainer.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('');
+  });
+
+  // @gate !disableLegacyMode
+  it('should render many portals', () => {
+    const portalContainer1 = document.createElement('div');
+    const portalContainer2 = document.createElement('div');
+
+    const ops = [];
+    class Child extends React.Component {
+      componentDidMount() {
+        ops.push(`${this.props.name} componentDidMount`);
+      }
+      componentDidUpdate() {
+        ops.push(`${this.props.name} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        ops.push(`${this.props.name} componentWillUnmount`);
+      }
+      render() {
+        return <div>{this.props.name}</div>;
+      }
+    }
+
+    class Parent extends React.Component {
+      componentDidMount() {
+        ops.push(`Parent:${this.props.step} componentDidMount`);
+      }
+      componentDidUpdate() {
+        ops.push(`Parent:${this.props.step} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        ops.push(`Parent:${this.props.step} componentWillUnmount`);
+      }
+      render() {
+        const {step} = this.props;
+        return [
+          <Child key="a" name={`normal[0]:${step}`} />,
+          ReactDOM.createPortal(
+            <Child key="b" name={`portal1[0]:${step}`} />,
+            portalContainer1,
+          ),
+          <Child key="c" name={`normal[1]:${step}`} />,
+          ReactDOM.createPortal(
+            [
+              <Child key="d" name={`portal2[0]:${step}`} />,
+              <Child key="e" name={`portal2[1]:${step}`} />,
+            ],
+            portalContainer2,
+          ),
+        ];
+      }
+    }
+
+    ReactDOM.render(<Parent step="a" />, container);
+    expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:a</div>');
+    expect(portalContainer2.innerHTML).toBe(
+      '<div>portal2[0]:a</div><div>portal2[1]:a</div>',
+    );
+    expect(container.innerHTML).toBe(
+      '<div>normal[0]:a</div><div>normal[1]:a</div>',
+    );
+    expect(ops).toEqual([
+      'normal[0]:a componentDidMount',
+      'portal1[0]:a componentDidMount',
+      'normal[1]:a componentDidMount',
+      'portal2[0]:a componentDidMount',
+      'portal2[1]:a componentDidMount',
+      'Parent:a componentDidMount',
+    ]);
+
+    ops.length = 0;
+    ReactDOM.render(<Parent step="b" />, container);
+    expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:b</div>');
+    expect(portalContainer2.innerHTML).toBe(
+      '<div>portal2[0]:b</div><div>portal2[1]:b</div>',
+    );
+    expect(container.innerHTML).toBe(
+      '<div>normal[0]:b</div><div>normal[1]:b</div>',
+    );
+    expect(ops).toEqual([
+      'normal[0]:b componentDidUpdate',
+      'portal1[0]:b componentDidUpdate',
+      'normal[1]:b componentDidUpdate',
+      'portal2[0]:b componentDidUpdate',
+      'portal2[1]:b componentDidUpdate',
+      'Parent:b componentDidUpdate',
+    ]);
+
+    ops.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(portalContainer1.innerHTML).toBe('');
+    expect(portalContainer2.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('');
+    expect(ops).toEqual([
+      'Parent:b componentWillUnmount',
+      'normal[0]:b componentWillUnmount',
+      'portal1[0]:b componentWillUnmount',
+      'normal[1]:b componentWillUnmount',
+      'portal2[0]:b componentWillUnmount',
+      'portal2[1]:b componentWillUnmount',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('should render nested portals', () => {
+    const portalContainer1 = document.createElement('div');
+    const portalContainer2 = document.createElement('div');
+    const portalContainer3 = document.createElement('div');
+
+    ReactDOM.render(
+      [
+        <div key="a">normal[0]</div>,
+        ReactDOM.createPortal(
+          [
+            <div key="b">portal1[0]</div>,
+            ReactDOM.createPortal(
+              <div key="c">portal2[0]</div>,
+              portalContainer2,
+            ),
+            ReactDOM.createPortal(
+              <div key="d">portal3[0]</div>,
+              portalContainer3,
+            ),
+            <div key="e">portal1[1]</div>,
+          ],
+          portalContainer1,
+        ),
+        <div key="f">normal[1]</div>,
+      ],
+      container,
+    );
+    expect(portalContainer1.innerHTML).toBe(
+      '<div>portal1[0]</div><div>portal1[1]</div>',
+    );
+    expect(portalContainer2.innerHTML).toBe('<div>portal2[0]</div>');
+    expect(portalContainer3.innerHTML).toBe('<div>portal3[0]</div>');
+    expect(container.innerHTML).toBe(
+      '<div>normal[0]</div><div>normal[1]</div>',
+    );
+
+    ReactDOM.unmountComponentAtNode(container);
+    expect(portalContainer1.innerHTML).toBe('');
+    expect(portalContainer2.innerHTML).toBe('');
+    expect(portalContainer3.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('');
+  });
+
+  // @gate !disableLegacyMode
+  it('should reconcile portal children', () => {
+    const portalContainer = document.createElement('div');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('<div>portal:1</div>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('<div>portal:2</div>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('<p>portal:3</p>');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('HiBye');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('ByeHi');
+    expect(container.innerHTML).toBe('<div></div>');
+
+    ReactDOM.render(
+      <div>{ReactDOM.createPortal(null, portalContainer)}</div>,
+      container,
+    );
+    expect(portalContainer.innerHTML).toBe('');
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  // @gate !disableLegacyMode
+  it('should unmount empty portal component wherever it appears', () => {
+    const portalContainer = document.createElement('div');
+
+    class Wrapper extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          show: true,
+        };
+      }
+      render() {
+        return (
+          <div>
+            {this.state.show && (
+              <>
+                {ReactDOM.createPortal(null, portalContainer)}
+                <div>child</div>
+              </>
+            )}
+            <div>parent</div>
+          </div>
+        );
+      }
+    }
+
+    const instance = ReactDOM.render(<Wrapper />, container);
+    expect(container.innerHTML).toBe(
+      '<div><div>child</div><div>parent</div></div>',
+    );
+    instance.setState({show: false});
+    expect(instance.state.show).toBe(false);
+    expect(container.innerHTML).toBe('<div><div>parent</div></div>');
+  });
+
+  // @gate !disableLegacyMode
+  it('should keep track of namespace across portals (simple)', () => {
+    assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <image {...expectSVG} />
+        {usePortal(<div {...expectHTML} />)}
+        <image {...expectSVG} />
+      </svg>,
+    );
+    assertNamespacesMatch(
+      <math {...expectMath}>
+        <mi {...expectMath} />
+        {usePortal(<div {...expectHTML} />)}
+        <mi {...expectMath} />
+      </math>,
+    );
+    assertNamespacesMatch(
+      <div {...expectHTML}>
+        <p {...expectHTML} />
+        {usePortal(
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <p {...expectHTML} />
+      </div>,
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should keep track of namespace across portals (medium)', () => {
+    assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <image {...expectSVG} />
+        {usePortal(<div {...expectHTML} />)}
+        <image {...expectSVG} />
+        {usePortal(<div {...expectHTML} />)}
+        <image {...expectSVG} />
+      </svg>,
+    );
+    assertNamespacesMatch(
+      <div {...expectHTML}>
+        <math {...expectMath}>
+          <mi {...expectMath} />
+          {usePortal(
+            <svg {...expectSVG}>
+              <image {...expectSVG} />
+            </svg>,
+          )}
+        </math>
+        <p {...expectHTML} />
+      </div>,
+    );
+    assertNamespacesMatch(
+      <math {...expectMath}>
+        <mi {...expectMath} />
+        {usePortal(
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+            <foreignObject {...expectSVG}>
+              <p {...expectHTML} />
+              <math {...expectMath}>
+                <mi {...expectMath} />
+              </math>
+              <p {...expectHTML} />
+            </foreignObject>
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <mi {...expectMath} />
+      </math>,
+    );
+    assertNamespacesMatch(
+      <div {...expectHTML}>
+        {usePortal(
+          <svg {...expectSVG}>
+            {usePortal(<div {...expectHTML} />)}
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <p {...expectHTML} />
+      </div>,
+    );
+    assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <svg {...expectSVG}>
+          {usePortal(<div {...expectHTML} />)}
+          <image {...expectSVG} />
+        </svg>
+        <image {...expectSVG} />
+      </svg>,
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should keep track of namespace across portals (complex)', () => {
+    assertNamespacesMatch(
+      <div {...expectHTML}>
+        {usePortal(
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+          </svg>,
+        )}
+        <p {...expectHTML} />
+        <svg {...expectSVG}>
+          <image {...expectSVG} />
+        </svg>
+        <svg {...expectSVG}>
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+          </svg>
+          <image {...expectSVG} />
+        </svg>
+        <p {...expectHTML} />
+      </div>,
+    );
+    assertNamespacesMatch(
+      <div {...expectHTML}>
+        <svg {...expectSVG}>
+          <svg {...expectSVG}>
+            <image {...expectSVG} />
+            {usePortal(
+              <svg {...expectSVG}>
+                <image {...expectSVG} />
+                <svg {...expectSVG}>
+                  <image {...expectSVG} />
+                </svg>
+                <image {...expectSVG} />
+              </svg>,
+            )}
+            <image {...expectSVG} />
+            <foreignObject {...expectSVG}>
+              <p {...expectHTML} />
+              {usePortal(<p {...expectHTML} />)}
+              <p {...expectHTML} />
+            </foreignObject>
+          </svg>
+          <image {...expectSVG} />
+        </svg>
+        <p {...expectHTML} />
+      </div>,
+    );
+    assertNamespacesMatch(
+      <div {...expectHTML}>
+        <svg {...expectSVG}>
+          <foreignObject {...expectSVG}>
+            <p {...expectHTML} />
+            {usePortal(
+              <svg {...expectSVG}>
+                <image {...expectSVG} />
+                <svg {...expectSVG}>
+                  <image {...expectSVG} />
+                  <foreignObject {...expectSVG}>
+                    <p {...expectHTML} />
+                  </foreignObject>
+                  {usePortal(<p {...expectHTML} />)}
+                </svg>
+                <image {...expectSVG} />
+              </svg>,
+            )}
+            <p {...expectHTML} />
+          </foreignObject>
+          <image {...expectSVG} />
+        </svg>
+        <p {...expectHTML} />
+      </div>,
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should unwind namespaces on uncaught errors', async () => {
+    function BrokenRender() {
+      throw new Error('Hello');
+    }
+
+    await expect(async () => {
+      await act(() => {
+        assertNamespacesMatch(
+          <svg {...expectSVG}>
+            <BrokenRender />
+          </svg>,
+        );
+      });
+    }).rejects.toThrow('Hello');
+    assertNamespacesMatch(<div {...expectHTML} />);
+  });
+
+  // @gate !disableLegacyMode
+  it('should unwind namespaces on caught errors', () => {
+    function BrokenRender() {
+      throw new Error('Hello');
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <p {...expectHTML} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <foreignObject {...expectSVG}>
+          <ErrorBoundary>
+            <math {...expectMath}>
+              <BrokenRender />
+            </math>
+          </ErrorBoundary>
+        </foreignObject>
+        <image {...expectSVG} />
+      </svg>,
+    );
+    assertNamespacesMatch(<div {...expectHTML} />);
+  });
+
+  // @gate !disableLegacyMode
+  it('should unwind namespaces on caught errors in a portal', () => {
+    function BrokenRender() {
+      throw new Error('Hello');
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <image {...expectSVG} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    assertNamespacesMatch(
+      <svg {...expectSVG}>
+        <ErrorBoundary>
+          {usePortal(
+            <div {...expectHTML}>
+              <math {...expectMath}>
+                <BrokenRender />)
+              </math>
+            </div>,
+          )}
+        </ErrorBoundary>
+        {usePortal(<div {...expectHTML} />)}
+      </svg>,
+    );
+  });
+
+  // @gate !disableLegacyContext
+  // @gate !disableLegacyMode
+  it('should pass portal context when rendering subtree elsewhere', () => {
+    const portalContainer = 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',
+        };
+      }
+
+      render() {
+        return ReactDOM.createPortal(<Component />, portalContainer);
+      }
+    }
+
+    ReactDOM.render(<Parent />, container);
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
+    expect(container.innerHTML).toBe('');
+    expect(portalContainer.innerHTML).toBe('<div>bar</div>');
+  });
+
+  // @gate !disableLegacyContext
+  // @gate !disableLegacyMode
+  it('should update portal context if it changes due to setState', () => {
+    const portalContainer = 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,
+        };
+      }
+
+      render() {
+        return ReactDOM.createPortal(<Component />, portalContainer);
+      }
+    }
+
+    const instance = ReactDOM.render(<Parent />, container);
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
+    expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
+    expect(container.innerHTML).toBe('');
+    instance.setState({bar: 'changed'});
+    expect(portalContainer.innerHTML).toBe('<div>changed-changed</div>');
+    expect(container.innerHTML).toBe('');
+  });
+
+  // @gate !disableLegacyContext
+  // @gate !disableLegacyMode
+  it('should update portal context if it changes due to re-render', () => {
+    const portalContainer = 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,
+        };
+      }
+
+      render() {
+        return ReactDOM.createPortal(<Component />, portalContainer);
+      }
+    }
+
+    ReactDOM.render(<Parent bar="initial" />, container);
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
+      'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
+    ]);
+    expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
+    expect(container.innerHTML).toBe('');
+    ReactDOM.render(<Parent bar="changed" />, container);
+    expect(portalContainer.innerHTML).toBe('<div>changed-changed</div>');
+    expect(container.innerHTML).toBe('');
+  });
+
+  // @gate !disableLegacyMode
+  it('findDOMNode should find dom element after expanding a fragment', () => {
+    class MyNode extends React.Component {
+      render() {
+        return !this.props.flag
+          ? [<div key="a" />]
+          : [<span key="b" />, <div key="a" />];
+      }
+    }
+
+    const myNodeA = ReactDOM.render(<MyNode />, container);
+    const a =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+        myNodeA,
+      );
+    expect(a.tagName).toBe('DIV');
+
+    const myNodeB = ReactDOM.render(<MyNode flag={true} />, container);
+    expect(myNodeA === myNodeB).toBe(true);
+
+    const b =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(
+        myNodeB,
+      );
+    expect(b.tagName).toBe('SPAN');
+  });
+
+  // @gate !disableLegacyMode
+  it('should bubble events from the portal to the parent', () => {
+    const portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+    try {
+      const ops = [];
+      let portal = null;
+
+      ReactDOM.render(
+        <div onClick={() => ops.push('parent clicked')}>
+          {ReactDOM.createPortal(
+            <div
+              onClick={() => ops.push('portal clicked')}
+              ref={n => (portal = n)}>
+              portal
+            </div>,
+            portalContainer,
+          )}
+        </div>,
+        container,
+      );
+
+      expect(portal.tagName).toBe('DIV');
+
+      portal.click();
+
+      expect(ops).toEqual(['portal clicked', 'parent clicked']);
+    } finally {
+      document.body.removeChild(portalContainer);
+    }
+  });
+
+  // @gate !disableLegacyMode
+  it('should not onMouseLeave when staying in the portal', () => {
+    const portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+
+    let ops = [];
+    let firstTarget = null;
+    let secondTarget = null;
+    let thirdTarget = null;
+
+    function simulateMouseMove(from, to) {
+      if (from) {
+        from.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: to,
+          }),
+        );
+      }
+      if (to) {
+        to.dispatchEvent(
+          new MouseEvent('mouseover', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: from,
+          }),
+        );
+      }
+    }
+
+    try {
+      ReactDOM.render(
+        <div>
+          <div
+            onMouseEnter={() => ops.push('enter parent')}
+            onMouseLeave={() => ops.push('leave parent')}>
+            <div ref={n => (firstTarget = n)} />
+            {ReactDOM.createPortal(
+              <div
+                onMouseEnter={() => ops.push('enter portal')}
+                onMouseLeave={() => ops.push('leave portal')}
+                ref={n => (secondTarget = n)}>
+                portal
+              </div>,
+              portalContainer,
+            )}
+          </div>
+          <div ref={n => (thirdTarget = n)} />
+        </div>,
+        container,
+      );
+
+      simulateMouseMove(null, firstTarget);
+      expect(ops).toEqual(['enter parent']);
+
+      ops = [];
+
+      simulateMouseMove(firstTarget, secondTarget);
+      expect(ops).toEqual([
+        // Parent did not invoke leave because we're still inside the portal.
+        'enter portal',
+      ]);
+
+      ops = [];
+
+      simulateMouseMove(secondTarget, thirdTarget);
+      expect(ops).toEqual([
+        'leave portal',
+        'leave parent', // Only when we leave the portal does onMouseLeave fire.
+      ]);
+    } finally {
+      document.body.removeChild(portalContainer);
+    }
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/19562
+  // @gate !disableLegacyMode
+  it('does not fire mouseEnter twice when relatedTarget is the root node', () => {
+    let ops = [];
+    let target = null;
+
+    function simulateMouseMove(from, to) {
+      if (from) {
+        from.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: to,
+          }),
+        );
+      }
+      if (to) {
+        to.dispatchEvent(
+          new MouseEvent('mouseover', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: from,
+          }),
+        );
+      }
+    }
+
+    ReactDOM.render(
+      <div
+        ref={n => (target = n)}
+        onMouseEnter={() => ops.push('enter')}
+        onMouseLeave={() => ops.push('leave')}
+      />,
+      container,
+    );
+
+    simulateMouseMove(null, container);
+    expect(ops).toEqual([]);
+
+    ops = [];
+    simulateMouseMove(container, target);
+    expect(ops).toEqual(['enter']);
+
+    ops = [];
+    simulateMouseMove(target, container);
+    expect(ops).toEqual(['leave']);
+
+    ops = [];
+    simulateMouseMove(container, null);
+    expect(ops).toEqual([]);
+  });
+
+  // @gate !disableLegacyMode
+  it('listens to events that do not exist in the Portal subtree', () => {
+    const onClick = jest.fn();
+
+    const ref = React.createRef();
+    ReactDOM.render(
+      <div onClick={onClick}>
+        {ReactDOM.createPortal(<button ref={ref}>click</button>, document.body)}
+      </div>,
+      container,
+    );
+    const event = new MouseEvent('click', {
+      bubbles: true,
+    });
+    ref.current.dispatchEvent(event);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should throw on bad createPortal argument', () => {
+    expect(() => {
+      ReactDOM.createPortal(<div>portal</div>, null);
+    }).toThrow('Target container is not a DOM element.');
+    expect(() => {
+      ReactDOM.createPortal(<div>portal</div>, document.createTextNode('hi'));
+    }).toThrow('Target container is not a DOM element.');
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn for non-functional event listeners', () => {
+    class Example extends React.Component {
+      render() {
+        return <div onClick="woops" />;
+      }
+    }
+    ReactDOM.render(<Example />, container);
+    assertConsoleErrorDev([
+      'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
+        '    in div (at **)\n' +
+        '    in Example (at **)',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn with a special message for `false` event listeners', () => {
+    class Example extends React.Component {
+      render() {
+        return <div onClick={false} />;
+      }
+    }
+    ReactDOM.render(<Example />, container);
+    assertConsoleErrorDev([
+      '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' +
+        '    in div (at **)\n' +
+        '    in Example (at **)',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not update event handlers until commit', () => {
+    spyOnDev(console, 'error');
+
+    let ops = [];
+    const handlerA = () => ops.push('A');
+    const handlerB = () => ops.push('B');
+
+    function click() {
+      const event = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(event, 'timeStamp', {
+        value: 0,
+      });
+      node.dispatchEvent(event);
+    }
+
+    class Example extends React.Component {
+      state = {flip: false, count: 0};
+      flip() {
+        this.setState({flip: true, count: this.state.count + 1});
+      }
+      tick() {
+        this.setState({count: this.state.count + 1});
+      }
+      render() {
+        const useB = !this.props.forceA && this.state.flip;
+        return <div onClick={useB ? handlerB : handlerA} />;
+      }
+    }
+
+    class Click extends React.Component {
+      constructor() {
+        super();
+        node.click();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    let inst;
+    ReactDOM.render([<Example key="a" ref={n => (inst = n)} />], container);
+    const node = container.firstChild;
+    expect(node.tagName).toEqual('DIV');
+
+    click();
+
+    expect(ops).toEqual(['A']);
+    ops = [];
+
+    // Render with the other event handler.
+    inst.flip();
+
+    click();
+
+    expect(ops).toEqual(['B']);
+    ops = [];
+
+    // Rerender without changing any props.
+    inst.tick();
+
+    click();
+
+    expect(ops).toEqual(['B']);
+    ops = [];
+
+    // Render a flip back to the A handler. The second component invokes the
+    // click handler during render to simulate a click during an aborted
+    // render. I use this hack because at current time we don't have a way to
+    // test aborted ReactDOM renders.
+    ReactDOM.render(
+      [<Example key="a" forceA={true} />, <Click key="b" />],
+      container,
+    );
+
+    // Because the new click handler has not yet committed, we should still
+    // invoke B.
+    expect(ops).toEqual(['B']);
+    ops = [];
+
+    // Any click that happens after commit, should invoke A.
+    click();
+    expect(ops).toEqual(['A']);
+
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.mock.calls[0][0]).toMatch(
+        'ReactDOM.render has not been supported since React 18',
+      );
+      expect(console.error.mock.calls[1][0]).toMatch(
+        'ReactDOM.render has not been supported since React 18',
+      );
+    }
+  });
+
+  // @gate !disableLegacyMode
+  it('should not crash encountering low-priority tree', () => {
+    ReactDOM.render(
+      <div hidden={true}>
+        <div />
+      </div>,
+      container,
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should not warn when rendering into an empty container', () => {
+    ReactDOM.render(<div>foo</div>, container);
+    expect(container.innerHTML).toBe('<div>foo</div>');
+    ReactDOM.render(null, container);
+    expect(container.innerHTML).toBe('');
+    ReactDOM.render(<div>bar</div>, container);
+    expect(container.innerHTML).toBe('<div>bar</div>');
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn when replacing a container which was manually updated outside of React', async () => {
+    // when not messing with the DOM outside of React
+    ReactDOM.render(<div key="1">foo</div>, container);
+    ReactDOM.render(<div key="1">bar</div>, container);
+    expect(container.innerHTML).toBe('<div>bar</div>');
+    // then we mess with the DOM before an update
+    // we know this will error - that is expected right now
+    // It's an error of type 'NotFoundError' with no message
+    container.innerHTML = '<div>MEOW.</div>';
+
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<div key="2">baz</div>, container);
+      });
+    }).rejects.toThrow('The node to be removed is not a child of this node.');
+    assertConsoleErrorDev(
+      [
+        '' +
+          '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.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn when doing an update to a container manually updated outside of React', () => {
+    // when not messing with the DOM outside of React
+    ReactDOM.render(<div>foo</div>, container);
+    ReactDOM.render(<div>bar</div>, container);
+    expect(container.innerHTML).toBe('<div>bar</div>');
+    // then we mess with the DOM before an update
+    container.innerHTML = '<div>MEOW.</div>';
+    ReactDOM.render(<div>baz</div>, container);
+    assertConsoleErrorDev(
+      [
+        '' +
+          '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.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn when doing an update to a container manually cleared outside of React', () => {
+    // when not messing with the DOM outside of React
+    ReactDOM.render(<div>foo</div>, container);
+    ReactDOM.render(<div>bar</div>, container);
+    expect(container.innerHTML).toBe('<div>bar</div>');
+    // then we mess with the DOM before an update
+    container.innerHTML = '';
+    ReactDOM.render(<div>baz</div>, container);
+    assertConsoleErrorDev(
+      [
+        '' +
+          '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.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should render a text component with a text DOM node on the same document as the container', () => {
+    // 1. Create a new document through the use of iframe
+    // 2. Set up the spy to make asserts when a text component
+    //    is rendered inside the iframe container
+    const textContent = 'Hello world';
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const iframeDocument = iframe.contentDocument;
+    iframeDocument.write(
+      '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
+    );
+    iframeDocument.close();
+    const iframeContainer = iframeDocument.body.firstChild;
+
+    let actualDocument;
+    let textNode;
+
+    spyOnDevAndProd(iframeContainer, 'appendChild').mockImplementation(node => {
+      actualDocument = node.ownerDocument;
+      textNode = node;
+    });
+
+    ReactDOM.render(textContent, iframeContainer);
+
+    expect(textNode.textContent).toBe(textContent);
+    expect(actualDocument).not.toBe(document);
+    expect(actualDocument).toBe(iframeDocument);
+    expect(iframeContainer.appendChild).toHaveBeenCalledTimes(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('should mount into a document fragment', () => {
+    const fragment = document.createDocumentFragment();
+    ReactDOM.render(<div>foo</div>, fragment);
+    expect(container.innerHTML).toBe('');
+    container.appendChild(fragment);
+    expect(container.innerHTML).toBe('<div>foo</div>');
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/12643#issuecomment-413727104
+  // @gate !disableLegacyMode
+  it('should not diff memoized host components', () => {
+    const inputRef = React.createRef();
+    let didCallOnChange = false;
+
+    class Child extends React.Component {
+      state = {};
+      componentDidMount() {
+        document.addEventListener('click', this.update, true);
+      }
+      componentWillUnmount() {
+        document.removeEventListener('click', this.update, true);
+      }
+      update = () => {
+        // We're testing that this setState()
+        // doesn't cause React to commit updates
+        // to the input outside (which would itself
+        // prevent the parent's onChange parent handler
+        // from firing).
+        this.setState({});
+        // Note that onChange was always broken when there was an
+        // earlier setState() in a manual document capture phase
+        // listener *in the same component*. But that's very rare.
+        // Here we're testing that a *child* component doesn't break
+        // the parent if this happens.
+      };
+      render() {
+        return <div />;
+      }
+    }
+
+    class Parent extends React.Component {
+      handleChange = val => {
+        didCallOnChange = true;
+      };
+      render() {
+        return (
+          <div>
+            <Child />
+            <input
+              ref={inputRef}
+              type="checkbox"
+              checked={true}
+              onChange={this.handleChange}
+            />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<Parent />, container);
+    inputRef.current.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+      }),
+    );
+    expect(didCallOnChange).toBe(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('unmounted legacy roots should never clear newer root content from a container', () => {
+    const ref = React.createRef();
+
+    function OldApp() {
+      const hideOnFocus = () => {
+        // This app unmounts itself inside of a focus event.
+        ReactDOM.unmountComponentAtNode(container);
+      };
+
+      return (
+        <button onFocus={hideOnFocus} ref={ref}>
+          old
+        </button>
+      );
+    }
+
+    function NewApp() {
+      return <button ref={ref}>new</button>;
+    }
+
+    ReactDOM.render(<OldApp />, container);
+    ref.current.focus();
+
+    ReactDOM.render(<NewApp />, container);
+
+    // Calling focus again will flush previously scheduled discrete work for the old root-
+    // but this should not clear out the newly mounted app.
+    ref.current.focus();
+
+    expect(container.textContent).toBe('new');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js
new file mode 100644
index 00000000000..5b22c6364f4
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let React;
+let ReactDOMFizzServer;
+
+describe('ReactDOMFloat', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMFizzServer = require('react-dom/server');
+  });
+
+  // fixes #27177
+  it('does not hoist above the <html> tag', async () => {
+    const result = ReactDOMFizzServer.renderToString(
+      <html>
+        <head>
+          <script src="foo" />
+          <meta charSet="utf-8" />
+          <title>title</title>
+        </head>
+      </html>,
+    );
+
+    expect(result).toEqual(
+      '<html><head><meta charSet="utf-8"/>' +
+        '<title>title</title><script src="foo"></script></head>' +
+        '</html>',
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
new file mode 100644
index 00000000000..fe332a9d3ca
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -0,0 +1,396 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let act;
+let assertLog;
+let waitFor;
+
+describe('ReactDOMNativeEventHeuristic-test', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function dispatchAndSetCurrentEvent(el, event) {
+    try {
+      window.event = event;
+      el.dispatchEvent(event);
+    } finally {
+      window.event = undefined;
+    }
+  }
+
+  it('ignores discrete events on a pending removed element', async () => {
+    const disableButtonRef = React.createRef();
+    const submitButtonRef = React.createRef();
+
+    function Form() {
+      const [active, setActive] = React.useState(true);
+
+      React.useLayoutEffect(() => {
+        disableButtonRef.current.onclick = disableForm;
+      });
+
+      function disableForm() {
+        setActive(false);
+      }
+
+      return (
+        <div>
+          <button ref={disableButtonRef}>Disable</button>
+          {active ? <button ref={submitButtonRef}>Submit</button> : null}
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Form />);
+    });
+
+    const disableButton = disableButtonRef.current;
+    expect(disableButton.tagName).toBe('BUTTON');
+
+    // Dispatch a click event on the Disable-button.
+    await act(async () => {
+      const firstEvent = document.createEvent('Event');
+      firstEvent.initEvent('click', true, true);
+      dispatchAndSetCurrentEvent(disableButton, firstEvent);
+    });
+    // Discrete events should be flushed in a microtask.
+    // Verify that the second button was removed.
+    expect(submitButtonRef.current).toBe(null);
+    // We'll assume that the browser won't let the user click it.
+  });
+
+  it('ignores discrete events on a pending removed event listener', async () => {
+    const disableButtonRef = React.createRef();
+    const submitButtonRef = React.createRef();
+
+    let formSubmitted = false;
+
+    function Form() {
+      const [active, setActive] = React.useState(true);
+
+      React.useLayoutEffect(() => {
+        disableButtonRef.current.onclick = disableForm;
+        submitButtonRef.current.onclick = active
+          ? submitForm
+          : disabledSubmitForm;
+      });
+
+      function disableForm() {
+        setActive(false);
+      }
+
+      function submitForm() {
+        formSubmitted = true; // This should not get invoked
+      }
+
+      function disabledSubmitForm() {
+        // The form is disabled.
+      }
+
+      return (
+        <div>
+          <button ref={disableButtonRef}>Disable</button>
+          <button ref={submitButtonRef}>Submit</button>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Flush
+    await act(() => root.render(<Form />));
+
+    const disableButton = disableButtonRef.current;
+    expect(disableButton.tagName).toBe('BUTTON');
+
+    // Dispatch a click event on the Disable-button.
+    const firstEvent = document.createEvent('Event');
+    firstEvent.initEvent('click', true, true);
+    await act(() => {
+      dispatchAndSetCurrentEvent(disableButton, firstEvent);
+
+      // There should now be a pending update to disable the form.
+      // This should not have flushed yet since it's in concurrent mode.
+      const submitButton = submitButtonRef.current;
+      expect(submitButton.tagName).toBe('BUTTON');
+
+      // Flush the discrete event
+      ReactDOM.flushSync();
+
+      // Now let's dispatch an event on the submit button.
+      const secondEvent = document.createEvent('Event');
+      secondEvent.initEvent('click', true, true);
+      dispatchAndSetCurrentEvent(submitButton, secondEvent);
+    });
+
+    // Therefore the form should never have been submitted.
+    expect(formSubmitted).toBe(false);
+  });
+
+  it('uses the newest discrete events on a pending changed event listener', async () => {
+    const enableButtonRef = React.createRef();
+    const submitButtonRef = React.createRef();
+
+    let formSubmitted = false;
+
+    function Form() {
+      const [active, setActive] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        enableButtonRef.current.onclick = enableForm;
+        submitButtonRef.current.onclick = active ? submitForm : null;
+      });
+
+      function enableForm() {
+        setActive(true);
+      }
+
+      function submitForm() {
+        formSubmitted = true; // This should not get invoked
+      }
+
+      return (
+        <div>
+          <button ref={enableButtonRef}>Enable</button>
+          <button ref={submitButtonRef}>Submit</button>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<Form />));
+
+    const enableButton = enableButtonRef.current;
+    expect(enableButton.tagName).toBe('BUTTON');
+
+    // Dispatch a click event on the Enable-button.
+    await act(() => {
+      const firstEvent = document.createEvent('Event');
+      firstEvent.initEvent('click', true, true);
+      dispatchAndSetCurrentEvent(enableButton, firstEvent);
+
+      // There should now be a pending update to enable the form.
+      // This should not have flushed yet since it's in concurrent mode.
+      const submitButton = submitButtonRef.current;
+      expect(submitButton.tagName).toBe('BUTTON');
+
+      // Flush discrete updates
+      ReactDOM.flushSync();
+
+      // Now let's dispatch an event on the submit button.
+      const secondEvent = document.createEvent('Event');
+      secondEvent.initEvent('click', true, true);
+      dispatchAndSetCurrentEvent(submitButton, secondEvent);
+    });
+
+    // Therefore the form should have been submitted.
+    expect(formSubmitted).toBe(true);
+  });
+
+  it('mouse over should be user-blocking but not discrete', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo() {
+      const [isHover, setHover] = React.useState(false);
+      React.useLayoutEffect(() => {
+        target.current.onmouseover = () => setHover(true);
+      });
+      return <div ref={target}>{isHover ? 'hovered' : 'not hovered'}</div>;
+    }
+
+    await act(() => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('not hovered');
+
+    await act(() => {
+      const mouseOverEvent = document.createEvent('MouseEvents');
+      mouseOverEvent.initEvent('mouseover', true, true);
+      dispatchAndSetCurrentEvent(target.current, mouseOverEvent);
+
+      // Flush discrete updates
+      ReactDOM.flushSync();
+      // Since mouse over is not discrete, should not have updated yet
+      expect(container.textContent).toEqual('not hovered');
+    });
+    expect(container.textContent).toEqual('hovered');
+  });
+
+  it('mouse enter should be user-blocking but not discrete', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo() {
+      const [isHover, setHover] = React.useState(false);
+      React.useLayoutEffect(() => {
+        target.current.onmouseenter = () => setHover(true);
+      });
+      return <div ref={target}>{isHover ? 'hovered' : 'not hovered'}</div>;
+    }
+
+    await act(() => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('not hovered');
+
+    await act(() => {
+      // Note: React does not use native mouseenter/mouseleave events
+      // but we should still correctly determine their priority.
+      const mouseEnterEvent = document.createEvent('MouseEvents');
+      mouseEnterEvent.initEvent('mouseenter', true, true);
+      dispatchAndSetCurrentEvent(target.current, mouseEnterEvent);
+
+      // Flush discrete updates
+      ReactDOM.flushSync();
+      // Since mouse end is not discrete, should not have updated yet
+      expect(container.textContent).toEqual('not hovered');
+    });
+    expect(container.textContent).toEqual('hovered');
+  });
+
+  it('continuous native events flush as expected', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo({hovered}) {
+      const hoverString = hovered ? 'hovered' : 'not hovered';
+      Scheduler.log(hoverString);
+      return <div ref={target}>{hoverString}</div>;
+    }
+
+    await act(() => {
+      root.render(<Foo hovered={false} />);
+    });
+    expect(container.textContent).toEqual('not hovered');
+
+    assertLog(['not hovered']);
+    await act(async () => {
+      // Note: React does not use native mouseenter/mouseleave events
+      // but we should still correctly determine their priority.
+      const mouseEnterEvent = document.createEvent('MouseEvents');
+      mouseEnterEvent.initEvent('mouseover', true, true);
+      target.current.addEventListener('mouseover', () => {
+        root.render(<Foo hovered={true} />);
+      });
+      dispatchAndSetCurrentEvent(target.current, mouseEnterEvent);
+
+      // Since mouse end is not discrete, should not have updated yet
+      assertLog([]);
+      expect(container.textContent).toEqual('not hovered');
+
+      await waitFor(['hovered']);
+      expect(container.textContent).toEqual('hovered');
+    });
+    expect(container.textContent).toEqual('hovered');
+  });
+
+  it('should batch inside native events', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo() {
+      const [count, setCount] = React.useState(0);
+      const countRef = React.useRef(-1);
+
+      React.useLayoutEffect(() => {
+        countRef.current = count;
+        target.current.onclick = () => {
+          setCount(countRef.current + 1);
+          // Now update again. If these updates are batched, then this should be
+          // a no-op, because we didn't re-render yet and `countRef` hasn't
+          // been mutated.
+          setCount(countRef.current + 1);
+        };
+      });
+      return <div ref={target}>Count: {count}</div>;
+    }
+
+    await act(() => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('Count: 0');
+
+    await act(async () => {
+      const pressEvent = document.createEvent('Event');
+      pressEvent.initEvent('click', true, true);
+      dispatchAndSetCurrentEvent(target.current, pressEvent);
+    });
+    // If this is 2, that means the `setCount` calls were not batched.
+    expect(container.textContent).toEqual('Count: 1');
+  });
+
+  it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    let target;
+    function Foo() {
+      const [count, setCount] = React.useState(0);
+      return (
+        <div
+          ref={el => {
+            target = el;
+            if (target !== null) {
+              el.onclick = () => {
+                ReactDOM.unstable_batchedUpdates(() => {
+                  setCount(count + 1);
+                });
+                Scheduler.log(
+                  container.textContent + ' [after batchedUpdates]',
+                );
+              };
+            }
+          }}>
+          Count: {count}
+        </div>
+      );
+    }
+
+    await act(() => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('Count: 0');
+
+    await act(async () => {
+      const pressEvent = document.createEvent('Event');
+      pressEvent.initEvent('click', true, true);
+      dispatchAndSetCurrentEvent(target, pressEvent);
+      assertLog(['Count: 0 [after batchedUpdates]']);
+      expect(container.textContent).toEqual('Count: 0');
+    });
+    expect(container.textContent).toEqual('Count: 1');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
new file mode 100644
index 00000000000..49be4039710
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMNestedEvents', () => {
+  let React;
+  let ReactDOMClient;
+  let Scheduler;
+  let act;
+  let useState;
+  let assertLog;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    useState = React.useState;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  it('nested event dispatches should not cause updates to flush', async () => {
+    const buttonRef = React.createRef(null);
+    function App() {
+      const [isClicked, setIsClicked] = useState(false);
+      const [isFocused, setIsFocused] = useState(false);
+      const onClick = () => {
+        setIsClicked(true);
+        const el = buttonRef.current;
+        el.focus();
+        // The update triggered by the focus event should not have flushed yet.
+        // Nor the click update. They would have if we had wrapped the focus
+        // call in `flushSync`, though.
+        Scheduler.log('Value right after focus call: ' + el.innerHTML);
+      };
+      const onFocus = () => {
+        setIsFocused(true);
+      };
+      return (
+        <>
+          <button ref={buttonRef} onFocus={onFocus} onClick={onClick}>
+            {`Clicked: ${isClicked}, Focused: ${isFocused}`}
+          </button>
+        </>
+      );
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(buttonRef.current.innerHTML).toEqual(
+      'Clicked: false, Focused: false',
+    );
+
+    await act(() => {
+      buttonRef.current.click();
+    });
+    assertLog(['Value right after focus call: Clicked: false, Focused: false']);
+    expect(buttonRef.current.innerHTML).toEqual('Clicked: true, Focused: true');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
new file mode 100644
index 00000000000..910c90a3b96
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMOption', () => {
+  let React;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  let act;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  async function renderIntoDocument(children) {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => root.render(children));
+    return container;
+  }
+
+  it('should flatten children to a string', async () => {
+    const stub = (
+      <option>
+        {1} {'foo'}
+      </option>
+    );
+    const container = await renderIntoDocument(stub);
+
+    expect(container.firstChild.innerHTML).toBe('1 foo');
+  });
+
+  it('should warn for invalid child tags', async () => {
+    const el = (
+      <option value="12">
+        {1} <div /> {2}
+      </option>
+    );
+    const container = await renderIntoDocument(el);
+    assertConsoleErrorDev([
+      'In HTML, <div> cannot be a child of <option>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '> <option value="12">\n' +
+        '>   <div>\n' +
+        '    ...\n' +
+        '\n' +
+        '    in div (at **)',
+    ]);
+    expect(container.firstChild.innerHTML).toBe('1 <div></div> 2');
+    await renderIntoDocument(el);
+  });
+
+  it('should warn for component child if no value prop is provided', async () => {
+    function Foo() {
+      return '2';
+    }
+    const el = (
+      <option>
+        {1} <Foo /> {3}
+      </option>
+    );
+    const container = await renderIntoDocument(el);
+    assertConsoleErrorDev([
+      'Cannot infer the option value of complex children. ' +
+        'Pass a `value` prop or use a plain string as children to <option>.\n' +
+        '    in option (at **)',
+    ]);
+    expect(container.firstChild.innerHTML).toBe('1 2 3');
+    await renderIntoDocument(el);
+  });
+
+  it('should not warn for component child if value prop is provided', async () => {
+    function Foo() {
+      return '2';
+    }
+    const el = (
+      <option value="123">
+        {1} <Foo /> {3}
+      </option>
+    );
+    const container = await renderIntoDocument(el);
+    expect(container.firstChild.innerHTML).toBe('1 2 3');
+    await renderIntoDocument(el);
+  });
+
+  it('should ignore null/undefined/false children without warning', async () => {
+    const stub = (
+      <option>
+        {1} {false}
+        {true}
+        {null}
+        {undefined} {2}
+      </option>
+    );
+    const container = await renderIntoDocument(stub);
+
+    expect(container.firstChild.innerHTML).toBe('1  2');
+  });
+
+  it('should throw on object children', async () => {
+    await expect(async () =>
+      renderIntoDocument(<option>{{}}</option>),
+    ).rejects.toThrow('Objects are not valid as a React child');
+    await expect(async () => {
+      await renderIntoDocument(<option>{[{}]}</option>);
+    }).rejects.toThrow('Objects are not valid as a React child');
+    await expect(async () => {
+      await renderIntoDocument(
+        <option>
+          {{}}
+          <span />
+        </option>,
+      );
+    }).rejects.toThrow('Objects are not valid as a React child');
+    await expect(async () => {
+      await renderIntoDocument(
+        <option>
+          {'1'}
+          {{}}
+          {2}
+        </option>,
+      );
+    }).rejects.toThrow('Objects are not valid as a React child');
+  });
+
+  it('should support element-ish child', async () => {
+    // This is similar to <fbt>.
+    // We don't toString it because you must instead provide a value prop.
+    const obj = {
+      $$typeof: Symbol.for('react.transitional.element'),
+      type: props => props.content,
+      ref: null,
+      key: null,
+      props: {
+        content: 'hello',
+      },
+      toString() {
+        return this.props.content;
+      },
+    };
+
+    let container = await renderIntoDocument(<option value="a">{obj}</option>);
+    expect(container.firstChild.innerHTML).toBe('hello');
+
+    container = await renderIntoDocument(<option value="b">{[obj]}</option>);
+    expect(container.firstChild.innerHTML).toBe('hello');
+
+    container = await renderIntoDocument(<option value={obj}>{obj}</option>);
+    expect(container.firstChild.innerHTML).toBe('hello');
+    expect(container.firstChild.value).toBe('hello');
+
+    container = await renderIntoDocument(
+      <option value={obj}>
+        {'1'}
+        {obj}
+        {2}
+      </option>,
+    );
+    expect(container.firstChild.innerHTML).toBe('1hello2');
+    expect(container.firstChild.value).toBe('hello');
+  });
+
+  it('should support bigint values', async () => {
+    const container = await renderIntoDocument(<option>{5n}</option>);
+    expect(container.firstChild.innerHTML).toBe('5');
+    expect(container.firstChild.value).toBe('5');
+  });
+
+  it('should be able to use dangerouslySetInnerHTML on option', async () => {
+    const stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} />;
+    const container = await renderIntoDocument(stub);
+    assertConsoleErrorDev([
+      'Pass a `value` prop if you set dangerouslyInnerHTML so React knows which value should be selected.\n' +
+        '    in option (at **)',
+    ]);
+
+    expect(container.firstChild.innerHTML).toBe('foobar');
+  });
+
+  it('should set attribute for empty value', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let option;
+    await act(() => {
+      root.render(<option value="" />);
+    });
+    option = container.firstChild;
+    expect(option.hasAttribute('value')).toBe(true);
+    expect(option.getAttribute('value')).toBe('');
+
+    await act(() => {
+      root.render(<option value="lava" />);
+    });
+    option = container.firstChild;
+    expect(option.hasAttribute('value')).toBe(true);
+    expect(option.getAttribute('value')).toBe('lava');
+  });
+
+  it('should allow ignoring `value` on option', async () => {
+    const a = 'a';
+    let node;
+    const stub = (
+      <select value="giraffe" onChange={() => {}}>
+        <option>monkey</option>
+        <option>gir{a}ffe</option>
+        <option>gorill{a}</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+    node = container.firstChild;
+
+    expect(node.selectedIndex).toBe(1);
+
+    await act(() => {
+      root.render(<select value="gorilla">{options}</select>);
+    });
+    node = container.firstChild;
+    expect(node.selectedIndex).toEqual(2);
+  });
+
+  it('generates a hydration error when an invalid nested tag is used as a child', async () => {
+    const ref = React.createRef();
+    const children = (
+      <select readOnly={true} value="bar">
+        <option value="bar">
+          {['Bar', false, 'Foo', <div key="1" ref={ref} />, 'Baz']}
+        </option>
+      </select>
+    );
+
+    const container = document.createElement('div');
+
+    container.innerHTML = ReactDOMServer.renderToString(children);
+
+    expect(container.firstChild.getAttribute('value')).toBe(null);
+    expect(container.firstChild.getAttribute('defaultValue')).toBe(null);
+
+    let option = container.firstChild.firstChild;
+    expect(option.nodeName).toBe('OPTION');
+
+    expect(option.textContent).toBe('BarFooBaz');
+    expect(option.selected).toBe(true);
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, children, {
+        onRecoverableError: () => {},
+      });
+    });
+    assertConsoleErrorDev([
+      'In HTML, <div> cannot be a child of <option>.\n' +
+        'This will cause a hydration error.\n' +
+        '\n' +
+        '  <select readOnly={true} value="bar">\n' +
+        '>   <option value="bar">\n' +
+        '>     <div ref={{current:null}}>\n' +
+        '      ...\n' +
+        '\n' +
+        '    in div (at **)',
+    ]);
+    option = container.firstChild.firstChild;
+
+    expect(option.textContent).toBe('BarFooBaz');
+    expect(option.selected).toBe(true);
+
+    expect(ref.current.nodeName).toBe('DIV');
+    expect(ref.current.parentNode).toBe(option);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
new file mode 100644
index 00000000000..25503d3a3c6
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -0,0 +1,480 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = require('react');
+let ReactDOM = require('react-dom');
+let ReactDOMClient = require('react-dom/client');
+let ReactDOMServer = require('react-dom/server');
+let Scheduler = require('scheduler');
+let act;
+let useEffect;
+let assertLog;
+let waitForAll;
+let assertConsoleErrorDev;
+
+describe('ReactDOMRoot', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    useEffect = React.useEffect;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  it('renders children', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+  });
+
+  it('warns if a callback parameter is provided to render', async () => {
+    const callback = jest.fn();
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>, callback);
+    assertConsoleErrorDev(
+      [
+        'does not support the second callback argument. ' +
+          'To execute a side effect after rendering, declare it in a component body with useEffect().',
+      ],
+      {withoutStack: true},
+    );
+    await waitForAll([]);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('warn if a object is passed to root.render(...)', async () => {
+    function App() {
+      return 'Child';
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<App />, {});
+    assertConsoleErrorDev(
+      [
+        'You passed a second argument to root.render(...) but it only accepts ' +
+          'one argument.',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('warn if a container is passed to root.render(...)', async () => {
+    function App() {
+      return 'Child';
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<App />, container);
+    assertConsoleErrorDev(
+      [
+        'You passed a container to the second argument of root.render(...). ' +
+          "You don't need to pass it again since you already passed it to create " +
+          'the root.',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('warns if a callback parameter is provided to unmount', async () => {
+    const callback = jest.fn();
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    root.unmount(callback);
+    assertConsoleErrorDev(
+      [
+        'does not support a callback argument. ' +
+          'To execute a side effect after rendering, declare it in a component body with useEffect().',
+      ],
+      {withoutStack: true},
+    );
+    await waitForAll([]);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('unmounts children', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+    root.unmount();
+    await waitForAll([]);
+    expect(container.textContent).toEqual('');
+  });
+
+  it('can be immediately unmounted', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.unmount();
+    });
+  });
+
+  it('supports hydration', async () => {
+    const markup = await new Promise(resolve =>
+      resolve(
+        ReactDOMServer.renderToString(
+          <div>
+            <span className="extra" />
+          </div>,
+        ),
+      ),
+    );
+
+    // Does not hydrate by default
+    const container1 = document.createElement('div');
+    container1.innerHTML = markup;
+    const root1 = ReactDOMClient.createRoot(container1);
+    root1.render(
+      <div>
+        <span />
+      </div>,
+    );
+    await waitForAll([]);
+
+    const container2 = document.createElement('div');
+    container2.innerHTML = markup;
+    ReactDOMClient.hydrateRoot(
+      container2,
+      <div>
+        <span />
+      </div>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" +
+        '\n' +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n' +
+        '\n' +
+        'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n' +
+        '\n' +
+        'https://react.dev/link/hydration-mismatch\n' +
+        '\n' +
+        '  <div>\n' +
+        '    <span\n' +
+        '-     className="extra"\n' +
+        '    >\n' +
+        '\n    in span (at **)',
+    ]);
+  });
+
+  it('clears existing children', async () => {
+    container.innerHTML = '<div>a</div><div>b</div>';
+    const root = ReactDOMClient.createRoot(container);
+    root.render(
+      <div>
+        <span>c</span>
+        <span>d</span>
+      </div>,
+    );
+    await waitForAll([]);
+    expect(container.textContent).toEqual('cd');
+    root.render(
+      <div>
+        <span>d</span>
+        <span>c</span>
+      </div>,
+    );
+    await waitForAll([]);
+    expect(container.textContent).toEqual('dc');
+  });
+
+  it('throws a good message on invalid containers', () => {
+    expect(() => {
+      ReactDOMClient.createRoot(<div>Hi</div>);
+    }).toThrow('Target container is not a DOM element.');
+  });
+
+  it('warns when creating two roots managing the same container', () => {
+    ReactDOMClient.createRoot(container);
+    ReactDOMClient.createRoot(container);
+    assertConsoleErrorDev(
+      [
+        'You are calling ReactDOMClient.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', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    root.unmount();
+    await waitForAll([]);
+    ReactDOMClient.createRoot(container); // No warning
+  });
+
+  it('warns if creating a root on the document.body', async () => {
+    // we no longer expect an error for this if float is enabled
+    ReactDOMClient.createRoot(document.body);
+  });
+
+  it('warns if updating a root that has had its contents removed', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    await waitForAll([]);
+    container.innerHTML = '';
+
+    // When either of these flags are on this validation is turned off so we
+    // expect there to be no warnings
+    root.render(<div>Hi</div>);
+  });
+
+  it('should render different components in same root', async () => {
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<div />);
+    });
+    expect(container.firstChild.nodeName).toBe('DIV');
+
+    await act(() => {
+      root.render(<span />);
+    });
+    expect(container.firstChild.nodeName).toBe('SPAN');
+  });
+
+  it('should not warn if mounting into non-empty node', async () => {
+    container.innerHTML = '<div></div>';
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div />);
+    });
+
+    expect(true).toBe(true);
+  });
+
+  it('should reuse markup if rendering to the same target twice', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div />);
+    });
+    const firstElm = container.firstChild;
+    await act(() => {
+      root.render(<div />);
+    });
+
+    expect(firstElm).toBe(container.firstChild);
+  });
+
+  it('should unmount and remount if the key changes', async () => {
+    function Component({text}) {
+      useEffect(() => {
+        Scheduler.log('Mount');
+
+        return () => {
+          Scheduler.log('Unmount');
+        };
+      }, []);
+
+      return <span>{text}</span>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component text="orange" key="A" />);
+    });
+    expect(container.firstChild.innerHTML).toBe('orange');
+    assertLog(['Mount']);
+
+    // If we change the key, the component is unmounted and remounted
+    await act(() => {
+      root.render(<Component text="green" key="B" />);
+    });
+    expect(container.firstChild.innerHTML).toBe('green');
+    assertLog(['Unmount', 'Mount']);
+
+    // But if we don't change the key, the component instance is reused
+    await act(() => {
+      root.render(<Component text="blue" key="B" />);
+    });
+    expect(container.firstChild.innerHTML).toBe('blue');
+    assertLog([]);
+  });
+
+  it('throws if unmounting a root that has had its contents removed', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div>Hi</div>);
+    });
+    container.innerHTML = '';
+
+    await expect(async () => {
+      await act(() => {
+        root.unmount();
+      });
+    }).rejects.toThrow('The node to be removed is not a child of this node.');
+  });
+
+  it('unmount is synchronous', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render('Hi');
+    });
+    expect(container.textContent).toEqual('Hi');
+
+    await act(() => {
+      root.unmount();
+      // Should have already unmounted
+      expect(container.textContent).toEqual('');
+    });
+  });
+
+  it('throws if an unmounted root is updated', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render('Hi');
+    });
+    expect(container.textContent).toEqual('Hi');
+
+    root.unmount();
+
+    expect(() => root.render("I'm back")).toThrow(
+      'Cannot update an unmounted root.',
+    );
+  });
+
+  it('warns if root is unmounted inside an effect', async () => {
+    const container1 = document.createElement('div');
+    const root1 = ReactDOMClient.createRoot(container1);
+    const container2 = document.createElement('div');
+    const root2 = ReactDOMClient.createRoot(container2);
+
+    function App({step}) {
+      useEffect(() => {
+        if (step === 2) {
+          root2.unmount();
+        }
+      }, [step]);
+      return 'Hi';
+    }
+
+    await act(() => {
+      root1.render(<App step={1} />);
+    });
+    expect(container1.textContent).toEqual('Hi');
+
+    ReactDOM.flushSync(() => {
+      root1.render(<App step={2} />);
+    });
+    assertConsoleErrorDev([
+      'Attempted to synchronously unmount a root while React was already rendering. ' +
+        'React cannot finish unmounting the root until the current render has completed, ' +
+        'which may lead to a race condition.\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  // @gate disableCommentsAsDOMContainers
+  it('errors if container is a comment node', () => {
+    // This is an old feature used by www. Disabled in the open source build.
+    const div = document.createElement('div');
+    div.innerHTML = '<!-- react-mount-point-unstable -->';
+    const commentNode = div.childNodes[0];
+
+    expect(() => ReactDOMClient.createRoot(commentNode)).toThrow(
+      'Target container is not a DOM element.',
+    );
+    expect(() => ReactDOMClient.hydrateRoot(commentNode)).toThrow(
+      'Target container is not a DOM element.',
+    );
+  });
+
+  it('warn if no children passed to hydrateRoot', async () => {
+    ReactDOMClient.hydrateRoot(container);
+    assertConsoleErrorDev(
+      [
+        'Must provide initial children as second argument to hydrateRoot. ' +
+          'Example usage: hydrateRoot(domContainer, <App />)',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('warn if JSX passed to createRoot', async () => {
+    function App() {
+      return 'Child';
+    }
+
+    ReactDOMClient.createRoot(container, <App />);
+    assertConsoleErrorDev(
+      [
+        'You passed a JSX element to createRoot. You probably meant to call root.render instead. ' +
+          'Example usage:\n' +
+          '\n' +
+          '  let root = createRoot(domContainer);\n' +
+          '  root.render(<App />);',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('warns when given a function', () => {
+    function Component() {
+      return <div />;
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    ReactDOM.flushSync(() => {
+      root.render(Component);
+    });
+    assertConsoleErrorDev(
+      [
+        'Functions are not valid as a React child. ' +
+          'This may happen if you return Component instead of <Component /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  root.render(Component)',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('warns when given a symbol', () => {
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    ReactDOM.flushSync(() => {
+      root.render(Symbol('foo'));
+    });
+    assertConsoleErrorDev(
+      [
+        'Symbols are not valid as a React child.\n' +
+          '  root.render(Symbol(foo))',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSVG-test.js b/packages/react-dom/src/__tests__/ReactDOMSVG-test.js
new file mode 100644
index 00000000000..6c813569226
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSVG-test.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let act;
+
+describe('ReactDOMSVG', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+  });
+
+  it('creates initial namespaced markup', () => {
+    const markup = ReactDOMServer.renderToString(
+      <svg>
+        <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
+      </svg>,
+    );
+    expect(markup).toContain('xlink:href="http://i.imgur.com/w7GCRPb.png"');
+  });
+
+  it('creates elements with SVG namespace inside SVG tag during mount', async () => {
+    const node = document.createElement('div');
+    let div,
+      div2,
+      div3,
+      foreignObject,
+      foreignObject2,
+      g,
+      image,
+      image2,
+      image3,
+      p,
+      svg,
+      svg2,
+      svg3,
+      svg4;
+    const root = ReactDOMClient.createRoot(node);
+    await act(() => {
+      root.render(
+        <div>
+          <svg ref={el => (svg = el)}>
+            <g ref={el => (g = el)} strokeWidth="5">
+              <svg ref={el => (svg2 = el)}>
+                <foreignObject ref={el => (foreignObject = el)}>
+                  <svg ref={el => (svg3 = el)}>
+                    <svg ref={el => (svg4 = el)} />
+                    <image
+                      ref={el => (image = el)}
+                      xlinkHref="http://i.imgur.com/w7GCRPb.png"
+                    />
+                  </svg>
+                  <div ref={el => (div = el)} />
+                </foreignObject>
+              </svg>
+              <image
+                ref={el => (image2 = el)}
+                xlinkHref="http://i.imgur.com/w7GCRPb.png"
+              />
+              <foreignObject ref={el => (foreignObject2 = el)}>
+                <div ref={el => (div2 = el)} />
+              </foreignObject>
+            </g>
+          </svg>
+          <p ref={el => (p = el)}>
+            <svg>
+              <image
+                ref={el => (image3 = el)}
+                xlinkHref="http://i.imgur.com/w7GCRPb.png"
+              />
+            </svg>
+          </p>
+          <div ref={el => (div3 = el)} />
+        </div>,
+      );
+    });
+    [svg, svg2, svg3, svg4].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      // SVG tagName is case sensitive.
+      expect(el.tagName).toBe('svg');
+    });
+    expect(g.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(g.tagName).toBe('g');
+    expect(g.getAttribute('stroke-width')).toBe('5');
+    expect(p.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+    // DOM tagName is capitalized by browsers.
+    expect(p.tagName).toBe('P');
+    [image, image2, image3].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      expect(el.tagName).toBe('image');
+      expect(el.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(
+        'http://i.imgur.com/w7GCRPb.png',
+      );
+    });
+    [foreignObject, foreignObject2].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      expect(el.tagName).toBe('foreignObject');
+    });
+    [div, div2, div3].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+      expect(el.tagName).toBe('DIV');
+    });
+  });
+
+  it('creates elements with SVG namespace inside SVG tag during update', async () => {
+    let inst,
+      div,
+      div2,
+      foreignObject,
+      foreignObject2,
+      g,
+      image,
+      image2,
+      svg,
+      svg2,
+      svg3,
+      svg4;
+
+    class App extends React.Component {
+      state = {step: 0};
+
+      render() {
+        inst = this;
+        const {step} = this.state;
+        if (step === 0) {
+          return null;
+        }
+        return (
+          <g ref={el => (g = el)} strokeWidth="5">
+            <svg ref={el => (svg2 = el)}>
+              <foreignObject ref={el => (foreignObject = el)}>
+                <svg ref={el => (svg3 = el)}>
+                  <svg ref={el => (svg4 = el)} />
+                  <image
+                    ref={el => (image = el)}
+                    xlinkHref="http://i.imgur.com/w7GCRPb.png"
+                  />
+                </svg>
+                <div ref={el => (div = el)} />
+              </foreignObject>
+            </svg>
+            <image
+              ref={el => (image2 = el)}
+              xlinkHref="http://i.imgur.com/w7GCRPb.png"
+            />
+            <foreignObject ref={el => (foreignObject2 = el)}>
+              <div ref={el => (div2 = el)} />
+            </foreignObject>
+          </g>
+        );
+      }
+    }
+
+    const node = document.createElement('div');
+    const root = ReactDOMClient.createRoot(node);
+    await act(() => {
+      root.render(
+        <svg ref={el => (svg = el)}>
+          <App />
+        </svg>,
+      );
+    });
+    await act(() => {
+      inst.setState({step: 1});
+    });
+
+    [svg, svg2, svg3, svg4].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      // SVG tagName is case sensitive.
+      expect(el.tagName).toBe('svg');
+    });
+    expect(g.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(g.tagName).toBe('g');
+    expect(g.getAttribute('stroke-width')).toBe('5');
+    [image, image2].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      expect(el.tagName).toBe('image');
+      expect(el.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(
+        'http://i.imgur.com/w7GCRPb.png',
+      );
+    });
+    [foreignObject, foreignObject2].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      expect(el.tagName).toBe('foreignObject');
+    });
+    [div, div2].forEach(el => {
+      expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+      // DOM tagName is capitalized by browsers.
+      expect(el.tagName).toBe('DIV');
+    });
+  });
+
+  it('can render SVG into a non-React SVG tree', async () => {
+    const outerSVGRoot = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    const container = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'g',
+    );
+    outerSVGRoot.appendChild(container);
+    let image;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<image ref={el => (image = el)} />);
+    });
+    expect(image.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(image.tagName).toBe('image');
+  });
+
+  it('can render HTML into a foreignObject in non-React SVG tree', async () => {
+    const outerSVGRoot = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    const container = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'foreignObject',
+    );
+    outerSVGRoot.appendChild(container);
+    let div;
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div ref={el => (div = el)} />);
+    });
+    expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+    expect(div.tagName).toBe('DIV');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
new file mode 100644
index 00000000000..17b1aed89ce
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let assertLog;
+let Scheduler;
+
+describe('ReactDOMSafariMicrotaskBug-test', () => {
+  let container;
+  let overrideQueueMicrotask;
+  let flushFakeMicrotasks;
+
+  beforeEach(() => {
+    // In Safari, microtasks don't always run on clean stack.
+    // This setup crudely approximates it.
+    // In reality, the sync flush happens when an iframe is added to the page.
+    // https://github.com/facebook/react/issues/22459
+    const originalQueueMicrotask = queueMicrotask;
+    overrideQueueMicrotask = false;
+    const fakeMicrotaskQueue = [];
+    global.queueMicrotask = cb => {
+      if (overrideQueueMicrotask) {
+        fakeMicrotaskQueue.push(cb);
+      } else {
+        originalQueueMicrotask(cb);
+      }
+    };
+    flushFakeMicrotasks = () => {
+      while (fakeMicrotaskQueue.length > 0) {
+        const cb = fakeMicrotaskQueue.shift();
+        cb();
+      }
+    };
+
+    jest.resetModules();
+    container = document.createElement('div');
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    Scheduler = require('scheduler');
+
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should deal with premature microtask in commit phase', async () => {
+    let ran = false;
+    function Foo() {
+      const [state, setState] = React.useState(0);
+      return (
+        <div
+          ref={() => {
+            overrideQueueMicrotask = true;
+            if (!ran) {
+              ran = true;
+              setState(1);
+              flushFakeMicrotasks();
+              Scheduler.log(
+                'Content at end of ref callback: ' + container.textContent,
+              );
+            }
+          }}>
+          {state}
+        </div>
+      );
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+    assertLog(['Content at end of ref callback: 0']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('should deal with premature microtask in event handler', async () => {
+    function Foo() {
+      const [state, setState] = React.useState(0);
+      return (
+        <button
+          onClick={() => {
+            overrideQueueMicrotask = true;
+            setState(1);
+            flushFakeMicrotasks();
+            Scheduler.log(
+              'Content at end of click handler: ' + container.textContent,
+            );
+          }}>
+          {state}
+        </button>
+      );
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toBe('0');
+    await act(() => {
+      container.firstChild.dispatchEvent(
+        new MouseEvent('click', {bubbles: true}),
+      );
+    });
+    // This causes the update to flush earlier than usual. This isn't the ideal
+    // behavior but we use this test to document it. The bug is Safari's, not
+    // ours, so we just do our best to not crash even though the behavior isn't
+    // completely correct.
+    assertLog(['Content at end of click handler: 1']);
+    expect(container.textContent).toBe('1');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
new file mode 100644
index 00000000000..f05fb3e3726
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -0,0 +1,1809 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Fix JSDOM. setAttribute is supposed to throw on things that can't be implicitly toStringed.
+const setAttribute = Element.prototype.setAttribute;
+Element.prototype.setAttribute = function (name, value) {
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  return setAttribute.call(this, name, '' + value);
+};
+
+describe('ReactDOMSelect', () => {
+  let React;
+  let ReactDOM;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  let act;
+  let assertConsoleErrorDev;
+
+  const noop = function () {};
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  it('should allow setting `defaultValue`', async () => {
+    const stub = (
+      <select defaultValue="giraffe">
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('giraffe');
+
+    await act(() => {
+      root.render(<select defaultValue="gorilla">{options}</select>);
+    });
+
+    expect(node.value).toEqual('giraffe');
+  });
+
+  it('should not throw with `defaultValue` and without children', () => {
+    const stub = <select defaultValue="dummy" />;
+
+    expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(stub);
+      });
+    }).not.toThrow();
+  });
+
+  it('should not control when using `defaultValue`', async () => {
+    const el = (
+      <select defaultValue="giraffe">
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(el);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('giraffe');
+
+    node.value = 'monkey';
+    await act(() => {
+      root.render(el);
+    });
+
+    // Uncontrolled selects shouldn't change the value after first mounting
+    expect(node.value).toEqual('monkey');
+  });
+
+  it('should allow setting `defaultValue` with multiple', async () => {
+    const stub = (
+      <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+
+    await act(() => {
+      root.render(
+        <select multiple={true} defaultValue={['monkey']}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+  });
+
+  it('should allow setting `value`', async () => {
+    const stub = (
+      <select value="giraffe" onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('giraffe');
+
+    await act(() => {
+      root.render(
+        <select value="gorilla" onChange={noop}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should default to the first non-disabled option', async () => {
+    const stub = (
+      <select defaultValue="">
+        <option disabled={true}>Disabled</option>
+        <option disabled={true}>Still Disabled</option>
+        <option>0</option>
+        <option disabled={true}>Also Disabled</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+    expect(node.options[0].selected).toBe(false);
+    expect(node.options[2].selected).toBe(true);
+  });
+
+  it('should allow setting `value` to __proto__', async () => {
+    const stub = (
+      <select value="__proto__" onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="__proto__">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('__proto__');
+
+    await act(() => {
+      root.render(
+        <select value="gorilla" onChange={noop}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should not throw with `value` and without children', () => {
+    const stub = <select value="dummy" onChange={noop} />;
+
+    expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(stub);
+      });
+    }).not.toThrow();
+  });
+
+  it('should allow setting `value` with multiple', async () => {
+    const stub = (
+      <select multiple={true} value={['giraffe', 'gorilla']} onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+
+    await act(() => {
+      root.render(
+        <select multiple={true} value={['monkey']} onChange={noop}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(true); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+  });
+
+  it('should allow setting `value` to __proto__ with multiple', async () => {
+    const stub = (
+      <select multiple={true} value={['__proto__', 'gorilla']} onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="__proto__">A __proto__!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // __proto__
+    expect(node.options[2].selected).toBe(true); // gorilla
+
+    await act(() => {
+      root.render(
+        <select multiple={true} value={['monkey']} onChange={noop}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(true); // monkey
+    expect(node.options[1].selected).toBe(false); // __proto__
+    expect(node.options[2].selected).toBe(false); // gorilla
+  });
+
+  it('should not select other options automatically', async () => {
+    const stub = (
+      <select multiple={true} value={['12']} onChange={noop}>
+        <option value="1">one</option>
+        <option value="2">two</option>
+        <option value="12">twelve</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // one
+    expect(node.options[1].selected).toBe(false); // two
+    expect(node.options[2].selected).toBe(true); // twelve
+  });
+
+  it('should reset child options selected when they are changed and `value` is set', async () => {
+    const stub = <select multiple={true} value={['a', 'b']} onChange={noop} />;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    await act(() => {
+      root.render(
+        <select multiple={true} value={['a', 'b']} onChange={noop}>
+          <option value="a">a</option>
+          <option value="b">b</option>
+          <option value="c">c</option>
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(true); // a
+    expect(node.options[1].selected).toBe(true); // b
+    expect(node.options[2].selected).toBe(false); // c
+  });
+
+  it('should allow setting `value` with `objectToString`', async () => {
+    const objectToString = {
+      animal: 'giraffe',
+      toString: function () {
+        return this.animal;
+      },
+    };
+
+    const el = (
+      <select multiple={true} value={[objectToString]} onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(el);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+    // Changing the `value` prop should change the selected options.
+    objectToString.animal = 'monkey';
+
+    const el2 = (
+      <select multiple={true} value={[objectToString]}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+
+    await act(() => {
+      root.render(el2);
+    });
+
+    expect(node.options[0].selected).toBe(true); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+  });
+
+  it('should allow switching to multiple', async () => {
+    const stub = (
+      <select defaultValue="giraffe">
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+    await act(() => {
+      root.render(
+        <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+  });
+
+  it('should allow switching from multiple', async () => {
+    const stub = (
+      <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+
+    await act(() => {
+      root.render(<select defaultValue="gorilla">{options}</select>);
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+  });
+
+  it('does not select an item when size is initially set to greater than 1', async () => {
+    const stub = (
+      <select size="2">
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const select = container.firstChild;
+
+    expect(select.options[0].selected).toBe(false);
+    expect(select.options[1].selected).toBe(false);
+    expect(select.options[2].selected).toBe(false);
+
+    expect(select.value).toBe('');
+    expect(select.selectedIndex).toBe(-1);
+  });
+
+  it('should remember value when switching to uncontrolled', async () => {
+    const stub = (
+      <select value={'giraffe'} onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+    await act(() => {
+      root.render(<select>{options}</select>);
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+  });
+
+  it('should remember updated value when switching to uncontrolled', async () => {
+    const stub = (
+      <select value={'giraffe'} onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const options = stub.props.children;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+    await act(() => {
+      root.render(
+        <select value="gorilla" onChange={noop}>
+          {options}
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+
+    await act(() => {
+      root.render(<select>{options}</select>);
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(true); // gorilla
+  });
+
+  it('should support server-side rendering', () => {
+    const stub = (
+      <select value="giraffe" onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(false);
+  });
+
+  it('should support server-side rendering with defaultValue', () => {
+    const stub = (
+      <select defaultValue="giraffe">
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(false);
+  });
+
+  it('should support server-side rendering with dangerouslySetInnerHTML', () => {
+    const stub = (
+      <select defaultValue="giraffe">
+        <option
+          value="monkey"
+          dangerouslySetInnerHTML={{
+            __html: 'A monkey!',
+          }}>
+          {undefined}
+        </option>
+        <option
+          value="giraffe"
+          dangerouslySetInnerHTML={{
+            __html: 'A giraffe!',
+          }}>
+          {null}
+        </option>
+        <option
+          value="gorilla"
+          dangerouslySetInnerHTML={{
+            __html: 'A gorilla!',
+          }}
+        />
+      </select>
+    );
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(false);
+  });
+
+  it('should support server-side rendering with multiple', () => {
+    const stub = (
+      <select multiple={true} value={['giraffe', 'gorilla']} onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(true);
+  });
+
+  it('should not control defaultValue if re-adding options', async () => {
+    const container = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <select multiple={true} defaultValue={['giraffe']}>
+          <option key="monkey" value="monkey">
+            A monkey!
+          </option>
+          <option key="giraffe" value="giraffe">
+            A giraffe!
+          </option>
+          <option key="gorilla" value="gorilla">
+            A gorilla!
+          </option>
+        </select>,
+      );
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+    await act(() => {
+      root.render(
+        <select multiple={true} defaultValue={['giraffe']}>
+          <option key="monkey" value="monkey">
+            A monkey!
+          </option>
+          <option key="gorilla" value="gorilla">
+            A gorilla!
+          </option>
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(false); // gorilla
+
+    await act(() => {
+      root.render(
+        <select multiple={true} defaultValue={['giraffe']}>
+          <option key="monkey" value="monkey">
+            A monkey!
+          </option>
+          <option key="giraffe" value="giraffe">
+            A giraffe!
+          </option>
+          <option key="gorilla" value="gorilla">
+            A gorilla!
+          </option>
+        </select>,
+      );
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+  });
+
+  it('should support options with dynamic children', async () => {
+    const container = document.createElement('div');
+
+    let node;
+
+    function App({value}) {
+      return (
+        <select value={value} ref={n => (node = n)} onChange={noop}>
+          <option key="monkey" value="monkey">
+            A monkey {value === 'monkey' ? 'is chosen' : null}!
+          </option>
+          <option key="giraffe" value="giraffe">
+            A giraffe {value === 'giraffe' && 'is chosen'}!
+          </option>
+          <option key="gorilla" value="gorilla">
+            A gorilla {value === 'gorilla' && 'is chosen'}!
+          </option>
+        </select>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App value="monkey" />);
+    });
+
+    expect(node.options[0].selected).toBe(true); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+    await act(() => {
+      root.render(<App value="giraffe" />);
+    });
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+  });
+
+  it('should warn if value is null', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <select value={null}>
+          <option value="test" />
+        </select>,
+      );
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `select` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` ' +
+        'for uncontrolled components.\n' +
+        '    in select (at **)',
+    ]);
+
+    await act(() => {
+      root.render(
+        <select value={null}>
+          <option value="test" />
+        </select>,
+      );
+    });
+  });
+
+  it('should warn if selected is set on <option>', async () => {
+    function App() {
+      return (
+        <select>
+          <option selected={true} />
+          <option selected={true} />
+        </select>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    assertConsoleErrorDev([
+      'Use the `defaultValue` or `value` props on <select> instead of ' +
+        'setting `selected` on <option>.\n' +
+        '    in option (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    await act(() => {
+      root.render(<App />);
+    });
+  });
+
+  it('should warn if value is null and multiple is true', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <select value={null} multiple={true}>
+          <option value="test" />
+        </select>,
+      );
+    });
+    assertConsoleErrorDev([
+      '`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` ' +
+        'for uncontrolled components.\n' +
+        '    in select (at **)',
+    ]);
+
+    await act(() => {
+      root.render(
+        <select value={null} multiple={true}>
+          <option value="test" />
+        </select>,
+      );
+    });
+  });
+
+  it('should refresh state on change', async () => {
+    const stub = (
+      <select value="giraffe" onChange={noop}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    try {
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(stub);
+      });
+
+      const node = container.firstChild;
+
+      await act(() => {
+        node.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: false}),
+        );
+      });
+
+      expect(node.value).toBe('giraffe');
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('should warn if value and defaultValue props are specified', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <select value="giraffe" defaultValue="giraffe" readOnly={true}>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+          <option value="gorilla">A gorilla!</option>
+        </select>,
+      );
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'element and remove one of these props. More info: ' +
+        'https://react.dev/link/controlled-components\n' +
+        '    in select (at **)',
+    ]);
+
+    await act(() => {
+      root.render(
+        <select value="giraffe" defaultValue="giraffe" readOnly={true}>
+          <option value="monkey">A monkey!</option>
+          <option value="giraffe">A giraffe!</option>
+          <option value="gorilla">A gorilla!</option>
+        </select>,
+      );
+    });
+  });
+
+  it('should not warn about missing onChange in uncontrolled textareas', async () => {
+    const container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<select />);
+    });
+
+    await act(() => {
+      root.unmount();
+    });
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<select value={undefined} />);
+    });
+  });
+
+  it('should be able to safely remove select onChange', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    async function changeView() {
+      root.unmount();
+    }
+
+    const stub = (
+      <select value="giraffe" onChange={changeView}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    await expect(
+      act(() => {
+        node.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: false}),
+        );
+      }),
+    ).resolves.not.toThrow();
+
+    expect(container.firstChild).toBe(null);
+  });
+
+  it('should select grandchild options nested inside an optgroup', async () => {
+    const stub = (
+      <select value="b" onChange={noop}>
+        <optgroup label="group">
+          <option value="a">a</option>
+          <option value="b">b</option>
+          <option value="c">c</option>
+        </optgroup>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // a
+    expect(node.options[1].selected).toBe(true); // b
+    expect(node.options[2].selected).toBe(false); // c
+  });
+
+  // @gate !disableLegacyMode
+  it('should allow controlling `value` in a nested legacy render', async () => {
+    let selectNode;
+
+    class Parent extends React.Component {
+      state = {
+        value: 'giraffe',
+      };
+
+      componentDidMount() {
+        this._renderNested();
+      }
+
+      componentDidUpdate() {
+        this._renderNested();
+      }
+
+      _handleChange(event) {
+        this.setState({value: event.target.value});
+      }
+
+      _renderNested() {
+        ReactDOM.render(
+          <select
+            onChange={this._handleChange.bind(this)}
+            ref={n => (selectNode = n)}
+            value={this.state.value}>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+            <option value="gorilla">A gorilla!</option>
+          </select>,
+          this._nestingContainer,
+        );
+      }
+
+      render() {
+        return <div ref={n => (this._nestingContainer = n)} />;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+
+    ReactDOM.render(<Parent />, container);
+
+    expect(selectNode.value).toBe('giraffe');
+
+    selectNode.value = 'gorilla';
+
+    let nativeEvent = document.createEvent('Event');
+    nativeEvent.initEvent('input', true, true);
+    selectNode.dispatchEvent(nativeEvent);
+
+    expect(selectNode.value).toEqual('gorilla');
+
+    nativeEvent = document.createEvent('Event');
+    nativeEvent.initEvent('change', true, true);
+    selectNode.dispatchEvent(nativeEvent);
+
+    expect(selectNode.value).toEqual('gorilla');
+
+    document.body.removeChild(container);
+  });
+
+  it('should not select first option by default when multiple is set and no defaultValue is set', async () => {
+    const stub = (
+      <select multiple={true} onChange={noop}>
+        <option value="a">a</option>
+        <option value="b">b</option>
+        <option value="c">c</option>
+      </select>
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(stub);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.options[0].selected).toBe(false); // a
+    expect(node.options[1].selected).toBe(false); // b
+    expect(node.options[2].selected).toBe(false); // c
+  });
+
+  describe('When given a Symbol value', () => {
+    it('treats initial Symbol value as missing', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select onChange={noop} value={Symbol('foobar')}>
+            <option value={Symbol('foobar')}>A Symbol!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      const node = container.firstChild;
+      expect(node.value).toBe('A Symbol!');
+    });
+
+    it('treats updated Symbol value as missing', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select onChange={noop} value="monkey">
+            <option value={Symbol('foobar')}>A Symbol!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      let node = container.firstChild;
+      expect(node.value).toBe('monkey');
+
+      await act(() => {
+        root.render(
+          <select onChange={noop} value={Symbol('foobar')}>
+            <option value={Symbol('foobar')}>A Symbol!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      node = container.firstChild;
+
+      expect(node.value).toBe('A Symbol!');
+    });
+
+    it('treats initial Symbol defaultValue as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select defaultValue={Symbol('foobar')}>
+            <option value={Symbol('foobar')}>A Symbol!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      const node = container.firstChild;
+      expect(node.value).toBe('A Symbol!');
+    });
+
+    it('treats updated Symbol defaultValue as an empty string', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select defaultValue="monkey">
+            <option value={Symbol('foobar')}>A Symbol!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      let node = container.firstChild;
+      expect(node.value).toBe('monkey');
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select defaultValue={Symbol('foobar')}>
+            <option value={Symbol('foobar')}>A Symbol!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      node = container.firstChild;
+      expect(node.value).toBe('A Symbol!');
+    });
+  });
+
+  describe('When given a function value', () => {
+    it('treats initial function value as missing', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select onChange={noop} value={() => {}}>
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      const node = container.firstChild;
+      expect(node.value).toBe('A function!');
+    });
+
+    it('treats initial function defaultValue as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select defaultValue={() => {}}>
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      const node = container.firstChild;
+      expect(node.value).toBe('A function!');
+    });
+
+    it('treats updated function value as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select onChange={noop} value="monkey">
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      let node = container.firstChild;
+      expect(node.value).toBe('monkey');
+
+      await act(() => {
+        root.render(
+          <select onChange={noop} value={() => {}}>
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      node = container.firstChild;
+      expect(node.value).toBe('A function!');
+    });
+
+    it('treats updated function defaultValue as an empty string', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select defaultValue="monkey">
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <option> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in option (at **)',
+      ]);
+
+      let node = container.firstChild;
+      expect(node.value).toBe('monkey');
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select defaultValue={() => {}}>
+            <option value={() => {}}>A function!</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      node = container.firstChild;
+
+      expect(node.value).toBe('A function!');
+    });
+  });
+
+  describe('When given a Temporal.PlainDate-like value', () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+
+    it('throws when given a Temporal.PlainDate-like value (select)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value={new TemporalLike()}>
+              <option value="2020-01-01">like a Temporal.PlainDate</option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (option)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value="2020-01-01">
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+      ]);
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (both)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value={new TemporalLike()}>
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+      ]);
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (select)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <select onChange={noop} value="monkey">
+            <option value="2020-01-01">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value={new TemporalLike()}>
+              <option value="2020-01-01">like a Temporal.PlainDate</option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (option)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <select onChange={noop} value="2020-01-01">
+            <option value="donkey">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value="2020-01-01">
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+      ]);
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (both)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <select onChange={noop} value="donkey">
+            <option value="donkey">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value={new TemporalLike()}>
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(
+        // eslint-disable-next-line no-undef
+        new AggregateError([
+          new TypeError('prod message'),
+          new TypeError('prod message'),
+        ]),
+      );
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (select)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} defaultValue={new TemporalLike()}>
+              <option value="2020-01-01">like a Temporal.PlainDate</option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (option)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} defaultValue="2020-01-01">
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+      ]);
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (both)', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} defaultValue={new TemporalLike()}>
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+      ]);
+    });
+
+    it('throws with updated Temporal.PlainDate-like defaultValue (select)', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select onChange={noop} defaultValue="monkey">
+            <option value="2020-01-01">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} defaultValue={new TemporalLike()}>
+              <option value="2020-01-01">like a Temporal.PlainDate</option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before using it here.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('throws with updated Temporal.PlainDate-like defaultValue (both)', async () => {
+      let container = document.createElement('div');
+      let root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <select onChange={noop} defaultValue="monkey">
+            <option value="donkey">like a Temporal.PlainDate</option>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+          </select>,
+        );
+      });
+
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select onChange={noop} value={new TemporalLike()}>
+              <option value={new TemporalLike()}>
+                like a Temporal.PlainDate
+              </option>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+            </select>,
+          );
+        }),
+      ).rejects.toThrowError(new TypeError('prod message'));
+      assertConsoleErrorDev([
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.\n' +
+          '    in option (at **)',
+      ]);
+    });
+
+    it('should not warn about missing onChange if value is not set', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+              <option value="gorilla">A gorilla!</option>
+            </select>,
+          );
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    it('should not throw an error about missing onChange if value is undefined', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select value={undefined}>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+              <option value="gorilla">A gorilla!</option>
+            </select>,
+          );
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    it('should not warn about missing onChange if onChange is set', async () => {
+      const change = jest.fn();
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select value="monkey" onChange={change}>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+              <option value="gorilla">A gorilla!</option>
+            </select>,
+          );
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    it('should not warn about missing onChange if disabled is true', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(
+            <select value="monkey" disabled={true}>
+              <option value="monkey">A monkey!</option>
+              <option value="giraffe">A giraffe!</option>
+              <option value="gorilla">A gorilla!</option>
+            </select>,
+          );
+        }),
+      ).resolves.not.toThrow();
+    });
+
+    it('should warn about missing onChange if value is false', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select value={false}>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+            <option value="gorilla">A gorilla!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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`. ' +
+          'Otherwise, set `onChange`.\n    in select (at **)',
+      ]);
+    });
+
+    it('should warn about missing onChange if value is 0', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select value={0}>
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+            <option value="gorilla">A gorilla!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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`. ' +
+          'Otherwise, set `onChange`.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('should warn about missing onChange if value is "0"', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select value="0">
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+            <option value="gorilla">A gorilla!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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`. ' +
+          'Otherwise, set `onChange`.\n' +
+          '    in select (at **)',
+      ]);
+    });
+
+    it('should warn about missing onChange if value is ""', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <select value="">
+            <option value="monkey">A monkey!</option>
+            <option value="giraffe">A giraffe!</option>
+            <option value="gorilla">A gorilla!</option>
+          </select>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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`. ' +
+          'Otherwise, set `onChange`.\n' +
+          '    in select (at **)',
+      ]);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSelection-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMSelection-test.internal.js
new file mode 100644
index 00000000000..9457137ff4f
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSelection-test.internal.js
@@ -0,0 +1,207 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMSelection;
+let act;
+
+let getModernOffsetsFromPoints;
+
+describe('ReactDOMSelection', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMSelection = require('react-dom-bindings/src/client/ReactDOMSelection');
+    act = require('internal-test-utils').act;
+
+    ({getModernOffsetsFromPoints} = ReactDOMSelection);
+  });
+
+  // Simple implementation to compare correctness. React's old implementation of
+  // this logic used DOM Range objects and is available for manual testing at
+  // https://gist.github.com/sophiebits/2e6d571f4f10f33b62ea138a6e9c265c.
+  function simpleModernOffsetsFromPoints(
+    outerNode,
+    anchorNode,
+    anchorOffset,
+    focusNode,
+    focusOffset,
+  ) {
+    let start;
+    let end;
+    let length = 0;
+
+    function traverse(node) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node === anchorNode) {
+          start = length + anchorOffset;
+        }
+        if (node === focusNode) {
+          end = length + focusOffset;
+        }
+        length += node.nodeValue.length;
+        return;
+      }
+
+      for (let i = 0; true; i++) {
+        if (node === anchorNode && i === anchorOffset) {
+          start = length;
+        }
+        if (node === focusNode && i === focusOffset) {
+          end = length;
+        }
+        if (i === node.childNodes.length) {
+          break;
+        }
+        const n = node.childNodes[i];
+        traverse(n);
+      }
+    }
+    traverse(outerNode);
+
+    if (start === null || end === null) {
+      throw new Error('Provided anchor/focus nodes were outside of root.');
+    }
+    return {start, end};
+  }
+
+  // Complicated example derived from a real-world DOM tree. Has a bit of
+  // everything.
+  async function getFixture() {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <div>
+            <div>
+              <div>xxxxxxxxxxxxxxxxxxxx</div>
+            </div>
+            x
+            <div>
+              <div>
+                x
+                <div>
+                  <div>
+                    <div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+                    <div />
+                    <div />
+                    <div>xxxxxxxxxxxxxxxxxx</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div />
+          </div>
+          <div>
+            <div>
+              <div>
+                <div>xxxx</div>
+                <div>xxxxxxxxxxxxxxxxxxx</div>
+              </div>
+            </div>
+            <div>xxx</div>
+            <div>xxxxx</div>
+            <div>xxx</div>
+            <div>
+              <div>
+                <div>
+                  <div>{['x', 'x', 'xxx']}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div>xxxxxx</div>
+          </div>
+        </div>,
+      );
+    });
+    return container.firstChild;
+  }
+
+  it('returns correctly for base case', () => {
+    const node = document.createElement('div');
+    expect(getModernOffsetsFromPoints(node, node, 0, node, 0)).toEqual({
+      start: 0,
+      end: 0,
+    });
+    expect(simpleModernOffsetsFromPoints(node, node, 0, node, 0)).toEqual({
+      start: 0,
+      end: 0,
+    });
+  });
+
+  it('returns correctly for fuzz test', async () => {
+    const fixtureRoot = await getFixture();
+    const allNodes = [fixtureRoot].concat(
+      Array.from(fixtureRoot.querySelectorAll('*')),
+    );
+    expect(allNodes.length).toBe(27);
+    allNodes.slice().forEach(element => {
+      // Add text nodes.
+      allNodes.push(
+        ...Array.from(element.childNodes).filter(n => n.nodeType === 3),
+      );
+    });
+    expect(allNodes.length).toBe(41);
+
+    function randomNode() {
+      return allNodes[(Math.random() * allNodes.length) | 0];
+    }
+    function randomOffset(node) {
+      return (
+        (Math.random() *
+          (1 +
+            (node.nodeType === 3 ? node.nodeValue : node.childNodes).length)) |
+        0
+      );
+    }
+
+    for (let i = 0; i < 2000; i++) {
+      const anchorNode = randomNode();
+      const anchorOffset = randomOffset(anchorNode);
+      const focusNode = randomNode();
+      const focusOffset = randomOffset(focusNode);
+
+      const offsets1 = getModernOffsetsFromPoints(
+        fixtureRoot,
+        anchorNode,
+        anchorOffset,
+        focusNode,
+        focusOffset,
+      );
+      const offsets2 = simpleModernOffsetsFromPoints(
+        fixtureRoot,
+        anchorNode,
+        anchorOffset,
+        focusNode,
+        focusOffset,
+      );
+      if (JSON.stringify(offsets1) !== JSON.stringify(offsets2)) {
+        throw new Error(
+          JSON.stringify(offsets1) +
+            ' does not match ' +
+            JSON.stringify(offsets2) +
+            ' for anchorNode=allNodes[' +
+            allNodes.indexOf(anchorNode) +
+            '], anchorOffset=' +
+            anchorOffset +
+            ', focusNode=allNodes[' +
+            allNodes.indexOf(focusNode) +
+            '], focusOffset=' +
+            focusOffset,
+        );
+      }
+    }
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
new file mode 100644
index 00000000000..be5ff44b8cd
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -0,0 +1,798 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let assertConsoleErrorDev;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+  assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders, clientCleanRender} =
+  ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+  afterEach(() => {
+    // TODO: This is a hack because expectErrors does not restore mock,
+    // however fixing it requires a major refactor to all these tests.
+    if (console.error.mockClear) {
+      console.error.mockRestore();
+    }
+  });
+
+  describe('property to attribute mapping', function () {
+    describe('string properties', function () {
+      itRenders('simple numbers', async render => {
+        const e = await render(<div width={30} />);
+        expect(e.getAttribute('width')).toBe('30');
+      });
+
+      itRenders('simple strings', async render => {
+        const e = await render(<div width={'30'} />);
+        expect(e.getAttribute('width')).toBe('30');
+      });
+
+      itRenders('empty src on img', async render => {
+        const e = await render(<img src="" />, 1);
+        expect(e.getAttribute('src')).toBe(null);
+      });
+
+      itRenders('empty href on anchor', async render => {
+        const e = await render(<a href="" />);
+        expect(e.getAttribute('href')).toBe('');
+      });
+
+      itRenders('empty href on base tags as null', async render => {
+        const e = await render(<base href="" />, 1);
+        expect(e.getAttribute('href')).toBe(null);
+      });
+
+      itRenders('empty href on area tags as null', async render => {
+        const e = await render(
+          <map>
+            <area alt="" href="" />
+          </map>,
+          1,
+        );
+        expect(e.firstChild.getAttribute('href')).toBe(null);
+      });
+
+      itRenders('empty href on link tags as null', async render => {
+        const e = await render(<link rel="stylesheet" href="" />, 1);
+        expect(e.getAttribute('href')).toBe(null);
+      });
+
+      itRenders('no string prop with true value', async render => {
+        const e = await render(<a href={true} />, 1);
+        expect(e.hasAttribute('href')).toBe(false);
+      });
+
+      itRenders('no string prop with false value', async render => {
+        const e = await render(<a href={false} />, 1);
+        expect(e.hasAttribute('href')).toBe(false);
+      });
+
+      itRenders('no string prop with null value', async render => {
+        const e = await render(<div width={null} />);
+        expect(e.hasAttribute('width')).toBe(false);
+      });
+
+      itRenders('no string prop with function value', async render => {
+        const e = await render(<div width={function () {}} />, 1);
+        expect(e.hasAttribute('width')).toBe(false);
+      });
+
+      itRenders('no string prop with symbol value', async render => {
+        const e = await render(<div width={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('width')).toBe(false);
+      });
+    });
+
+    describe('boolean properties', function () {
+      itRenders('boolean prop with true value', async render => {
+        const e = await render(<div hidden={true} />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      itRenders('boolean prop with false value', async render => {
+        const e = await render(<div hidden={false} />);
+        expect(e.getAttribute('hidden')).toBe(null);
+      });
+
+      itRenders('boolean prop with self value', async render => {
+        const e = await render(<div hidden="hidden" />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      // this does not seem like correct behavior, since hidden="" in HTML indicates
+      // that the boolean property is present. however, it is how the current code
+      // behaves, so the test is included here.
+      itRenders('boolean prop with "" value', async render => {
+        const e = await render(<div hidden="" />);
+        expect(e.getAttribute('hidden')).toBe(null);
+      });
+
+      // this seems like it might mask programmer error, but it's existing behavior.
+      itRenders('boolean prop with string value', async render => {
+        const e = await render(<div hidden="foo" />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      // this seems like it might mask programmer error, but it's existing behavior.
+      itRenders('boolean prop with array value', async render => {
+        const e = await render(<div hidden={['foo', 'bar']} />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      // this seems like it might mask programmer error, but it's existing behavior.
+      itRenders('boolean prop with object value', async render => {
+        const e = await render(<div hidden={{foo: 'bar'}} />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      // this seems like it might mask programmer error, but it's existing behavior.
+      itRenders('boolean prop with non-zero number value', async render => {
+        const e = await render(<div hidden={10} />);
+        expect(e.getAttribute('hidden')).toBe('');
+      });
+
+      // this seems like it might mask programmer error, but it's existing behavior.
+      itRenders('boolean prop with zero value', async render => {
+        const e = await render(<div hidden={0} />);
+        expect(e.getAttribute('hidden')).toBe(null);
+      });
+
+      itRenders('no boolean prop with null value', async render => {
+        const e = await render(<div hidden={null} />);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+
+      itRenders('no boolean prop with function value', async render => {
+        const e = await render(<div hidden={function () {}} />, 1);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+
+      itRenders('no boolean prop with symbol value', async render => {
+        const e = await render(<div hidden={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('hidden')).toBe(false);
+      });
+    });
+
+    describe('download property (combined boolean/string attribute)', function () {
+      itRenders('download prop with true value', async render => {
+        const e = await render(<a download={true} />);
+        expect(e.getAttribute('download')).toBe('');
+      });
+
+      itRenders('download prop with false value', async render => {
+        const e = await render(<a download={false} />);
+        expect(e.getAttribute('download')).toBe(null);
+      });
+
+      itRenders('download prop with string value', async render => {
+        const e = await render(<a download="myfile" />);
+        expect(e.getAttribute('download')).toBe('myfile');
+      });
+
+      itRenders('download prop with string "false" value', async render => {
+        const e = await render(<a download="false" />);
+        expect(e.getAttribute('download')).toBe('false');
+      });
+
+      itRenders('download prop with string "true" value', async render => {
+        const e = await render(<a download={'true'} />);
+        expect(e.getAttribute('download')).toBe('true');
+      });
+
+      itRenders('download prop with number 0 value', async render => {
+        const e = await render(<a download={0} />);
+        expect(e.getAttribute('download')).toBe('0');
+      });
+
+      itRenders('no download prop with null value', async render => {
+        const e = await render(<div download={null} />);
+        expect(e.hasAttribute('download')).toBe(false);
+      });
+
+      itRenders('no download prop with undefined value', async render => {
+        const e = await render(<div download={undefined} />);
+        expect(e.hasAttribute('download')).toBe(false);
+      });
+
+      itRenders('no download prop with function value', async render => {
+        const e = await render(<div download={function () {}} />, 1);
+        expect(e.hasAttribute('download')).toBe(false);
+      });
+
+      itRenders('no download prop with symbol value', async render => {
+        const e = await render(<div download={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('download')).toBe(false);
+      });
+    });
+
+    describe('className property', function () {
+      itRenders('className prop with string value', async render => {
+        const e = await render(<div className="myClassName" />);
+        expect(e.getAttribute('class')).toBe('myClassName');
+      });
+
+      itRenders('className prop with empty string value', async render => {
+        const e = await render(<div className="" />);
+        expect(e.getAttribute('class')).toBe('');
+      });
+
+      itRenders('no className prop with true value', async render => {
+        const e = await render(<div className={true} />, 1);
+        expect(e.hasAttribute('class')).toBe(false);
+      });
+
+      itRenders('no className prop with false value', async render => {
+        const e = await render(<div className={false} />, 1);
+        expect(e.hasAttribute('class')).toBe(false);
+      });
+
+      itRenders('no className prop with null value', async render => {
+        const e = await render(<div className={null} />);
+        expect(e.hasAttribute('className')).toBe(false);
+      });
+
+      itRenders('badly cased className with a warning', async render => {
+        const e = await render(<div classname="test" />, 1);
+        expect(e.hasAttribute('class')).toBe(false);
+        expect(e.hasAttribute('classname')).toBe(true);
+      });
+
+      itRenders(
+        'className prop when given the alias with a warning',
+        async render => {
+          const e = await render(<div class="test" />, 1);
+          expect(e.className).toBe('test');
+        },
+      );
+
+      itRenders(
+        'className prop when given a badly cased alias',
+        async render => {
+          const e = await render(<div cLASs="test" />, 1);
+          expect(e.className).toBe('test');
+        },
+      );
+    });
+
+    describe('htmlFor property', function () {
+      itRenders('htmlFor with string value', async render => {
+        const e = await render(<div htmlFor="myFor" />);
+        expect(e.getAttribute('for')).toBe('myFor');
+      });
+
+      itRenders('no badly cased htmlfor', async render => {
+        const e = await render(<div htmlfor="myFor" />, 1);
+        expect(e.hasAttribute('for')).toBe(false);
+        expect(e.getAttribute('htmlfor')).toBe('myFor');
+      });
+
+      itRenders('htmlFor with an empty string', async render => {
+        const e = await render(<div htmlFor="" />);
+        expect(e.getAttribute('for')).toBe('');
+      });
+
+      itRenders('no htmlFor prop with true value', async render => {
+        const e = await render(<div htmlFor={true} />, 1);
+        expect(e.hasAttribute('for')).toBe(false);
+      });
+
+      itRenders('no htmlFor prop with false value', async render => {
+        const e = await render(<div htmlFor={false} />, 1);
+        expect(e.hasAttribute('for')).toBe(false);
+      });
+
+      itRenders('no htmlFor prop with null value', async render => {
+        const e = await render(<div htmlFor={null} />);
+        expect(e.hasAttribute('htmlFor')).toBe(false);
+      });
+    });
+
+    describe('numeric properties', function () {
+      itRenders(
+        'positive numeric property with positive value',
+        async render => {
+          const e = await render(<input size={2} />);
+          expect(e.getAttribute('size')).toBe('2');
+        },
+      );
+
+      itRenders('numeric property with zero value', async render => {
+        const e = await render(<ol start={0} />);
+        expect(e.getAttribute('start')).toBe('0');
+      });
+
+      itRenders(
+        'no positive numeric property with zero value',
+        async render => {
+          const e = await render(<input size={0} />);
+          expect(e.hasAttribute('size')).toBe(false);
+        },
+      );
+
+      itRenders('no numeric prop with function value', async render => {
+        const e = await render(<ol start={function () {}} />, 1);
+        expect(e.hasAttribute('start')).toBe(false);
+      });
+
+      itRenders('no numeric prop with symbol value', async render => {
+        const e = await render(<ol start={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('start')).toBe(false);
+      });
+
+      itRenders(
+        'no positive numeric prop with function value',
+        async render => {
+          const e = await render(<input size={function () {}} />, 1);
+          expect(e.hasAttribute('size')).toBe(false);
+        },
+      );
+
+      itRenders('no positive numeric prop with symbol value', async render => {
+        const e = await render(<input size={Symbol('foo')} />, 1);
+        expect(e.hasAttribute('size')).toBe(false);
+      });
+    });
+
+    describe('props with special meaning in React', function () {
+      itRenders('no ref attribute', async render => {
+        class RefComponent extends React.Component {
+          render() {
+            return <div ref={React.createRef()} />;
+          }
+        }
+        const e = await render(<RefComponent />);
+        expect(e.getAttribute('ref')).toBe(null);
+      });
+
+      itRenders('no children attribute', async render => {
+        const e = await render(React.createElement('div', {}, 'foo'));
+        expect(e.getAttribute('children')).toBe(null);
+      });
+
+      itRenders('no key attribute', async render => {
+        const e = await render(<div key="foo" />);
+        expect(e.getAttribute('key')).toBe(null);
+      });
+
+      itRenders('no dangerouslySetInnerHTML attribute', async render => {
+        const e = await render(
+          <div dangerouslySetInnerHTML={{__html: '<foo />'}} />,
+        );
+        expect(e.getAttribute('dangerouslySetInnerHTML')).toBe(null);
+      });
+
+      itRenders('no suppressContentEditableWarning attribute', async render => {
+        const e = await render(<div suppressContentEditableWarning={true} />);
+        expect(e.getAttribute('suppressContentEditableWarning')).toBe(null);
+      });
+
+      itRenders('no suppressHydrationWarning attribute', async render => {
+        const e = await render(<span suppressHydrationWarning={true} />);
+        expect(e.getAttribute('suppressHydrationWarning')).toBe(null);
+      });
+    });
+
+    describe('inline styles', function () {
+      itRenders('simple styles', async render => {
+        const e = await render(<div style={{color: 'red', width: '30px'}} />);
+        expect(e.style.color).toBe('red');
+        expect(e.style.width).toBe('30px');
+      });
+
+      itRenders('relevant styles with px', async render => {
+        const e = await render(
+          <div
+            style={{
+              left: 0,
+              margin: 16,
+              opacity: 0.5,
+              padding: '4px',
+            }}
+          />,
+        );
+        expect(e.style.left).toBe('0px');
+        expect(e.style.margin).toBe('16px');
+        expect(e.style.opacity).toBe('0.5');
+        expect(e.style.padding).toBe('4px');
+      });
+
+      itRenders('custom properties', async render => {
+        const e = await render(<div style={{'--foo': 5}} />);
+        expect(e.style.getPropertyValue('--foo')).toBe('5');
+      });
+
+      itRenders('camel cased custom properties', async render => {
+        const e = await render(<div style={{'--someColor': '#000000'}} />);
+        expect(e.style.getPropertyValue('--someColor')).toBe('#000000');
+      });
+
+      itRenders('no undefined styles', async render => {
+        const e = await render(
+          <div style={{color: undefined, width: '30px'}} />,
+        );
+        expect(e.style.color).toBe('');
+        expect(e.style.width).toBe('30px');
+      });
+
+      itRenders('no null styles', async render => {
+        const e = await render(<div style={{color: null, width: '30px'}} />);
+        expect(e.style.color).toBe('');
+        expect(e.style.width).toBe('30px');
+      });
+
+      itRenders('no empty styles', async render => {
+        const e = await render(<div style={{color: null, width: null}} />);
+        expect(e.style.color).toBe('');
+        expect(e.style.width).toBe('');
+        expect(e.hasAttribute('style')).toBe(false);
+      });
+
+      itRenders('unitless-number rules with prefixes', async render => {
+        const {style} = await render(
+          <div
+            style={{
+              lineClamp: 10,
+              // TODO: requires https://github.com/jsdom/cssstyle/pull/112
+              // WebkitLineClamp: 10,
+              // TODO: revisit once cssstyle or jsdom figures out
+              // if they want to support other vendors or not
+              // MozFlexGrow: 10,
+              // msFlexGrow: 10,
+              // msGridRow: 10,
+              // msGridRowEnd: 10,
+              // msGridRowSpan: 10,
+              // msGridRowStart: 10,
+              // msGridColumn: 10,
+              // msGridColumnEnd: 10,
+              // msGridColumnSpan: 10,
+              // msGridColumnStart: 10,
+            }}
+          />,
+        );
+
+        expect(style.lineClamp).toBe('10');
+        // see comment at inline styles above
+        // expect(style.WebkitLineClamp).toBe('10');
+        // expect(style.MozFlexGrow).toBe('10');
+        // jsdom is inconsistent in the style property name
+        // it uses on the client and when processing server markup.
+        // But it should be there either way.
+        //expect(style.MsFlexGrow || style.msFlexGrow).toBe('10');
+        // expect(style.MsGridRow || style.msGridRow).toBe('10');
+        // expect(style.MsGridRowEnd || style.msGridRowEnd).toBe('10');
+        // expect(style.MsGridRowSpan || style.msGridRowSpan).toBe('10');
+        // expect(style.MsGridRowStart || style.msGridRowStart).toBe('10');
+        // expect(style.MsGridColumn || style.msGridColumn).toBe('10');
+        // expect(style.MsGridColumnEnd || style.msGridColumnEnd).toBe('10');
+        // expect(style.MsGridColumnSpan || style.msGridColumnSpan).toBe('10');
+        // expect(style.MsGridColumnStart || style.msGridColumnStart).toBe('10');
+      });
+    });
+
+    describe('aria attributes', function () {
+      itRenders('simple strings', async render => {
+        const e = await render(<div aria-label="hello" />);
+        expect(e.getAttribute('aria-label')).toBe('hello');
+      });
+
+      // this probably is just masking programmer error, but it is existing behavior.
+      itRenders('aria string prop with false value', async render => {
+        const e = await render(<div aria-label={false} />);
+        expect(e.getAttribute('aria-label')).toBe('false');
+      });
+
+      itRenders('no aria prop with null value', async render => {
+        const e = await render(<div aria-label={null} />);
+        expect(e.hasAttribute('aria-label')).toBe(false);
+      });
+
+      itRenders('"aria" attribute with a warning', async render => {
+        // Reserved for future use.
+        const e = await render(<div aria="hello" />, 1);
+        expect(e.getAttribute('aria')).toBe('hello');
+      });
+    });
+
+    describe('cased attributes', function () {
+      itRenders(
+        'badly cased aliased HTML attribute with a warning',
+        async render => {
+          const e = await render(<form acceptcharset="utf-8" />, 1);
+          expect(e.hasAttribute('accept-charset')).toBe(false);
+          expect(e.getAttribute('acceptcharset')).toBe('utf-8');
+        },
+      );
+
+      itRenders('badly cased SVG attribute with a warning', async render => {
+        const e = await render(
+          <svg>
+            <text textlength="10" />
+          </svg>,
+          1,
+        );
+        // The discrepancy is expected as long as we emit a warning
+        // both on the client and the server.
+        if (render === clientCleanRender) {
+          // On the client, "textlength" is treated as a case-sensitive
+          // SVG attribute so the wrong attribute ("textlength") gets set.
+          expect(e.firstChild.getAttribute('textlength')).toBe('10');
+          expect(e.firstChild.hasAttribute('textLength')).toBe(false);
+        } else {
+          // When parsing HTML (including the hydration case), the browser
+          // correctly maps "textlength" to "textLength" SVG attribute.
+          // So it happens to work on the initial render.
+          expect(e.firstChild.getAttribute('textLength')).toBe('10');
+          expect(e.firstChild.hasAttribute('textlength')).toBe(false);
+        }
+      });
+
+      itRenders('no badly cased aliased SVG attribute alias', async render => {
+        const e = await render(
+          <svg>
+            <text strokedasharray="10 10" />
+          </svg>,
+          1,
+        );
+        expect(e.firstChild.hasAttribute('stroke-dasharray')).toBe(false);
+        expect(e.firstChild.getAttribute('strokedasharray')).toBe('10 10');
+      });
+
+      itRenders(
+        'no badly cased original SVG attribute that is aliased',
+        async render => {
+          const e = await render(
+            <svg>
+              <text stroke-dasharray="10 10" />
+            </svg>,
+            1,
+          );
+          expect(e.firstChild.getAttribute('stroke-dasharray')).toBe('10 10');
+        },
+      );
+    });
+
+    describe('unknown attributes', function () {
+      itRenders('unknown attributes', async render => {
+        const e = await render(<div foo="bar" />);
+        expect(e.getAttribute('foo')).toBe('bar');
+      });
+
+      itRenders('unknown data- attributes', async render => {
+        const e = await render(<div data-foo="bar" />);
+        expect(e.getAttribute('data-foo')).toBe('bar');
+      });
+
+      itRenders('badly cased reserved attributes', async render => {
+        const e = await render(<div CHILDREN="5" />, 1);
+        expect(e.getAttribute('CHILDREN')).toBe('5');
+      });
+
+      itRenders('"data" attribute', async render => {
+        // For `<object />` acts as `src`.
+        const e = await render(<object data="hello" />);
+        expect(e.getAttribute('data')).toBe('hello');
+      });
+
+      itRenders('no unknown data- attributes with null value', async render => {
+        const e = await render(<div data-foo={null} />);
+        expect(e.hasAttribute('data-foo')).toBe(false);
+      });
+
+      itRenders('unknown data- attributes with casing', async render => {
+        const e = await render(<div data-fooBar="true" />, 1);
+        expect(e.getAttribute('data-foobar')).toBe('true');
+      });
+
+      itRenders('unknown data- attributes with boolean true', async render => {
+        const e = await render(<div data-foobar={true} />);
+        expect(e.getAttribute('data-foobar')).toBe('true');
+      });
+
+      itRenders('unknown data- attributes with boolean false', async render => {
+        const e = await render(<div data-foobar={false} />);
+        expect(e.getAttribute('data-foobar')).toBe('false');
+      });
+
+      itRenders(
+        'no unknown data- attributes with casing and null value',
+        async render => {
+          const e = await render(<div data-fooBar={null} />, 1);
+          expect(e.hasAttribute('data-foobar')).toBe(false);
+        },
+      );
+
+      itRenders('custom attributes for non-standard elements', async render => {
+        // This test suite generally assumes that we get exactly
+        // the same warnings (or none) for all scenarios including
+        // SSR + innerHTML, hydration, and client-side rendering.
+        // However this particular warning fires only when creating
+        // DOM nodes on the client side. We force it to fire early
+        // so that it gets deduplicated later, and doesn't fail the test.
+        ReactDOM.flushSync(() => {
+          const root = ReactDOMClient.createRoot(document.createElement('div'));
+          root.render(<nonstandard />);
+        });
+        assertConsoleErrorDev([
+          'The tag <nonstandard> is unrecognized in this browser. ' +
+            'If you meant to render a React component, start its name with an uppercase letter.\n' +
+            '    in nonstandard (at **)',
+        ]);
+
+        const e = await render(<nonstandard foo="bar" />);
+        expect(e.getAttribute('foo')).toBe('bar');
+      });
+
+      itRenders('SVG tags with dashes in them', async render => {
+        const e = await render(
+          <svg>
+            <font-face accentHeight={10} />
+          </svg>,
+        );
+        expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
+        expect(e.firstChild.getAttribute('accent-height')).toBe('10');
+      });
+
+      itRenders('cased custom attributes', async render => {
+        const e = await render(<div fooBar="test" />, 1);
+        expect(e.getAttribute('foobar')).toBe('test');
+      });
+    });
+
+    itRenders('no HTML events', async render => {
+      const e = await render(<div onClick={() => {}} />);
+      expect(e.getAttribute('onClick')).toBe(null);
+      expect(e.getAttribute('onClick')).toBe(null);
+      expect(e.getAttribute('click')).toBe(null);
+    });
+
+    itRenders('no unknown events', async render => {
+      const e = await render(<div onunknownevent='alert("hack")' />, 1);
+      expect(e.getAttribute('onunknownevent')).toBe(null);
+    });
+
+    itRenders('custom attribute named `on`', async render => {
+      const e = await render(<div on="tap:do-something" />);
+      expect(e.getAttribute('on')).toEqual('tap:do-something');
+    });
+  });
+
+  // These tests mostly verify the existing behavior.
+  // It may not always make sense but we can't change it in minors.
+  describe('custom elements', () => {
+    itRenders('class for custom elements', async render => {
+      const e = await render(<div is="custom-element" class="test" />, 0);
+      expect(e.getAttribute('class')).toBe('test');
+    });
+
+    itRenders('className for is elements', async render => {
+      const e = await render(<div is="custom-element" className="test" />, 0);
+      expect(e.getAttribute('className')).toBe(null);
+      expect(e.getAttribute('class')).toBe('test');
+    });
+
+    itRenders('className for custom elements', async render => {
+      const e = await render(<custom-element className="test" />, 0);
+      expect(e.getAttribute('className')).toBe(null);
+      expect(e.getAttribute('class')).toBe('test');
+    });
+
+    itRenders('htmlFor property on is elements', async render => {
+      const e = await render(<div is="custom-element" htmlFor="test" />);
+      expect(e.getAttribute('htmlFor')).toBe(null);
+      expect(e.getAttribute('for')).toBe('test');
+    });
+
+    itRenders('htmlFor attribute on custom elements', async render => {
+      const e = await render(<custom-element htmlFor="test" />);
+      expect(e.getAttribute('htmlFor')).toBe('test');
+      expect(e.getAttribute('for')).toBe(null);
+    });
+
+    itRenders('for attribute on custom elements', async render => {
+      const e = await render(<div is="custom-element" for="test" />);
+      expect(e.getAttribute('htmlFor')).toBe(null);
+      expect(e.getAttribute('for')).toBe('test');
+    });
+
+    itRenders('unknown attributes for custom elements', async render => {
+      const e = await render(<custom-element foo="bar" />);
+      expect(e.getAttribute('foo')).toBe('bar');
+    });
+
+    itRenders('unknown `on*` attributes for custom elements', async render => {
+      const e = await render(<custom-element onunknown="bar" />);
+      expect(e.getAttribute('onunknown')).toBe('bar');
+    });
+
+    itRenders('unknown boolean `true` attributes as strings', async render => {
+      const e = await render(<custom-element foo={true} />);
+      expect(e.getAttribute('foo')).toBe('');
+    });
+
+    itRenders('unknown boolean `false` attributes as strings', async render => {
+      const e = await render(<custom-element foo={false} />);
+      expect(e.getAttribute('foo')).toBe(null);
+    });
+
+    itRenders('new boolean `true` attributes', async render => {
+      const element = await render(<div inert={true} />, 0);
+
+      expect(element.getAttribute('inert')).toBe('');
+    });
+
+    itRenders('new boolean `""` attributes', async render => {
+      const element = await render(
+        <div inert="" />,
+        // Warns since this used to render `inert=""` like `inert={true}`
+        // but now renders it like `inert={false}`.
+        1,
+      );
+
+      expect(element.getAttribute('inert')).toBe(null);
+    });
+
+    itRenders('new boolean `false` attributes', async render => {
+      const element = await render(<div inert={false} />, 0);
+
+      expect(element.getAttribute('inert')).toBe(null);
+    });
+
+    itRenders(
+      'no unknown attributes for custom elements with null value',
+      async render => {
+        const e = await render(<custom-element foo={null} />);
+        expect(e.hasAttribute('foo')).toBe(false);
+      },
+    );
+
+    itRenders(
+      'unknown attributes for custom elements using is',
+      async render => {
+        const e = await render(<div is="custom-element" foo="bar" />);
+        expect(e.getAttribute('foo')).toBe('bar');
+      },
+    );
+
+    itRenders(
+      'no unknown attributes for custom elements using is with null value',
+      async render => {
+        const e = await render(<div is="custom-element" foo={null} />);
+        expect(e.hasAttribute('foo')).toBe(false);
+      },
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
new file mode 100644
index 00000000000..6323fe9b60c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+const TEXT_NODE_TYPE = 3;
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('basic rendering', function () {
+    itRenders('a blank div', async render => {
+      const e = await render(<div />);
+      expect(e.tagName).toBe('DIV');
+    });
+
+    itRenders('a self-closing tag', async render => {
+      const e = await render(<br />);
+      expect(e.tagName).toBe('BR');
+    });
+
+    itRenders('a self-closing tag as a child', async render => {
+      const e = await render(
+        <div>
+          <br />
+        </div>,
+      );
+      expect(e.childNodes.length).toBe(1);
+      expect(e.firstChild.tagName).toBe('BR');
+    });
+
+    itRenders('a string', async render => {
+      const e = await render('Hello');
+      expect(e.nodeType).toBe(3);
+      expect(e.nodeValue).toMatch('Hello');
+    });
+
+    itRenders('a number', async render => {
+      const e = await render(42);
+      expect(e.nodeType).toBe(3);
+      expect(e.nodeValue).toMatch('42');
+    });
+
+    itRenders('a bigint', async render => {
+      const e = await render(42n);
+      expect(e.nodeType).toBe(3);
+      expect(e.nodeValue).toMatch('42');
+    });
+
+    itRenders('an array with one child', async render => {
+      const e = await render([<div key={1}>text1</div>]);
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+    });
+
+    itRenders('an array with several children', async render => {
+      const Header = props => {
+        return <p>header</p>;
+      };
+      const Footer = props => {
+        return [<h2 key={1}>footer</h2>, <h3 key={2}>about</h3>];
+      };
+      const e = await render([
+        <div key={1}>text1</div>,
+        <span key={2}>text2</span>,
+        <Header key={3} />,
+        <Footer key={4} />,
+      ]);
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+      expect(parent.childNodes[3].tagName).toBe('H2');
+      expect(parent.childNodes[4].tagName).toBe('H3');
+    });
+
+    itRenders('a nested array', async render => {
+      const e = await render([
+        [<div key={1}>text1</div>],
+        <span key={1}>text2</span>,
+        [[[null, <p key={1} />], false]],
+      ]);
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+    });
+
+    itRenders('an iterable', async render => {
+      const threeDivIterable = {
+        '@@iterator': function () {
+          let i = 0;
+          return {
+            next: function () {
+              if (i++ < 3) {
+                return {value: <div key={i} />, done: false};
+              } else {
+                return {value: undefined, done: true};
+              }
+            },
+          };
+        },
+      };
+      const e = await render(threeDivIterable);
+      const parent = e.parentNode;
+      expect(parent.childNodes.length).toBe(3);
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('DIV');
+      expect(parent.childNodes[2].tagName).toBe('DIV');
+    });
+
+    itRenders('emptyish values', async render => {
+      const e = await render(0);
+      expect(e.nodeType).toBe(TEXT_NODE_TYPE);
+      expect(e.nodeValue).toMatch('0');
+
+      // Empty string is special because client renders a node
+      // but server returns empty HTML. So we compare parent text.
+      expect((await render(<div>{''}</div>)).textContent).toBe('');
+
+      expect(await render([])).toBe(null);
+      expect(await render(false)).toBe(null);
+      expect(await render(true)).toBe(null);
+      expect(await render([[[false]], undefined])).toBe(null);
+
+      // hydrateRoot errors for undefined children.
+      expect(await render(undefined, 1)).toBe(null);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js
new file mode 100644
index 00000000000..cda89b825e5
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationCheckbox-test.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+// Set by `yarn test-fire`.
+const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+// TODO: Run this in React Fire mode after we figure out the SSR behavior.
+const desc = disableInputAttributeSyncing ? xdescribe : describe;
+desc('ReactDOMServerIntegrationCheckbox', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('a checkbox that is checked with an onChange', async render => {
+    const e = await render(
+      <input type="checkbox" checked={true} onChange={() => {}} />,
+    );
+    expect(e.checked).toBe(true);
+  });
+
+  itRenders('a checkbox that is checked with readOnly', async render => {
+    const e = await render(
+      <input type="checkbox" checked={true} readOnly={true} />,
+    );
+    expect(e.checked).toBe(true);
+  });
+
+  itRenders(
+    'a checkbox that is checked and no onChange/readOnly',
+    async render => {
+      // this configuration should raise a dev warning that checked without
+      // onChange or readOnly is a mistake.
+      const e = await render(<input type="checkbox" checked={true} />, 1);
+      expect(e.checked).toBe(true);
+    },
+  );
+
+  itRenders('a checkbox with defaultChecked', async render => {
+    const e = await render(<input type="checkbox" defaultChecked={true} />);
+    expect(e.checked).toBe(true);
+    expect(e.getAttribute('defaultChecked')).toBe(null);
+  });
+
+  itRenders('a checkbox checked overriding defaultChecked', async render => {
+    const e = await render(
+      <input
+        type="checkbox"
+        checked={true}
+        defaultChecked={false}
+        readOnly={true}
+      />,
+      1,
+    );
+    expect(e.checked).toBe(true);
+    expect(e.getAttribute('defaultChecked')).toBe(null);
+  });
+
+  itRenders(
+    'a checkbox checked overriding defaultChecked no matter the prop order',
+    async render => {
+      const e = await render(
+        <input
+          type="checkbox"
+          defaultChecked={false}
+          checked={true}
+          readOnly={true}
+        />,
+        1,
+      );
+      expect(e.checked).toBe(true);
+      expect(e.getAttribute('defaultChecked')).toBe(null);
+    },
+  );
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
new file mode 100644
index 00000000000..d39210e8d9f
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationClassContextType-test.js
@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('class contextType', function () {
+    let PurpleContext, RedContext, Context;
+    beforeEach(() => {
+      Context = React.createContext('none');
+
+      class Parent extends React.Component {
+        render() {
+          return (
+            <Context.Provider value={this.props.text}>
+              {this.props.children}
+            </Context.Provider>
+          );
+        }
+      }
+      PurpleContext = props => <Parent text="purple">{props.children}</Parent>;
+      RedContext = props => <Parent text="red">{props.children}</Parent>;
+    });
+
+    itRenders('class child with context', async render => {
+      class ClassChildWithContext extends React.Component {
+        static contextType = Context;
+        render() {
+          const text = this.context;
+          return <div>{text}</div>;
+        }
+      }
+
+      const e = await render(
+        <PurpleContext>
+          <ClassChildWithContext />
+        </PurpleContext>,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('class child without context', async render => {
+      class ClassChildWithoutContext extends React.Component {
+        render() {
+          // this should render blank; context isn't passed to this component.
+          return (
+            <div>{typeof this.context === 'string' ? this.context : ''}</div>
+          );
+        }
+      }
+
+      const e = await render(
+        <PurpleContext>
+          <ClassChildWithoutContext />
+        </PurpleContext>,
+      );
+      expect(e.textContent).toBe('');
+    });
+
+    itRenders('class child with wrong context', async render => {
+      class ClassChildWithWrongContext extends React.Component {
+        static contextType = Context;
+        render() {
+          // this should render blank; context.foo isn't passed to this component.
+          return <div id="classWrongChild">{this.context.foo}</div>;
+        }
+      }
+
+      const e = await render(
+        <PurpleContext>
+          <ClassChildWithWrongContext />
+        </PurpleContext>,
+      );
+      expect(e.textContent).toBe('');
+    });
+
+    itRenders('with context passed through to a grandchild', async render => {
+      class Grandchild extends React.Component {
+        static contextType = Context;
+        render() {
+          return <div>{this.context}</div>;
+        }
+      }
+
+      const Child = props => <Grandchild />;
+
+      const e = await render(
+        <PurpleContext>
+          <Child />
+        </PurpleContext>,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('a child context overriding a parent context', async render => {
+      class Grandchild extends React.Component {
+        static contextType = Context;
+        render() {
+          return <div>{this.context}</div>;
+        }
+      }
+
+      const e = await render(
+        <PurpleContext>
+          <RedContext>
+            <Grandchild />
+          </RedContext>
+        </PurpleContext>,
+      );
+      expect(e.textContent).toBe('red');
+    });
+
+    itRenders('multiple contexts', async render => {
+      const Theme = React.createContext('dark');
+      const Language = React.createContext('french');
+      class Parent extends React.Component {
+        render() {
+          return (
+            <Theme.Provider value="light">
+              <Child />
+            </Theme.Provider>
+          );
+        }
+      }
+
+      function Child() {
+        return (
+          <Language.Provider value="english">
+            <Grandchild />
+          </Language.Provider>
+        );
+      }
+
+      class ThemeComponent extends React.Component {
+        static contextType = Theme;
+        render() {
+          return <div id="theme">{this.context}</div>;
+        }
+      }
+
+      class LanguageComponent extends React.Component {
+        static contextType = Language;
+        render() {
+          return <div id="language">{this.context}</div>;
+        }
+      }
+
+      const Grandchild = props => {
+        return (
+          <div>
+            <ThemeComponent />
+            <LanguageComponent />
+          </div>
+        );
+      };
+
+      const e = await render(<Parent />);
+      expect(e.querySelector('#theme').textContent).toBe('light');
+      expect(e.querySelector('#language').textContent).toBe('english');
+    });
+
+    itRenders('nested context unwinding', async render => {
+      const Theme = React.createContext('dark');
+      const Language = React.createContext('french');
+
+      class ThemeConsumer extends React.Component {
+        static contextType = Theme;
+        render() {
+          return this.props.children(this.context);
+        }
+      }
+
+      class LanguageConsumer extends React.Component {
+        static contextType = Language;
+        render() {
+          return this.props.children(this.context);
+        }
+      }
+
+      const App = () => (
+        <div>
+          <Theme.Provider value="light">
+            <Language.Provider value="english">
+              <Theme.Provider value="dark">
+                <ThemeConsumer>
+                  {theme => <div id="theme1">{theme}</div>}
+                </ThemeConsumer>
+              </Theme.Provider>
+              <ThemeConsumer>
+                {theme => <div id="theme2">{theme}</div>}
+              </ThemeConsumer>
+              <Language.Provider value="sanskrit">
+                <Theme.Provider value="blue">
+                  <Theme.Provider value="red">
+                    <LanguageConsumer>
+                      {() => (
+                        <Language.Provider value="chinese">
+                          <Language.Provider value="hungarian" />
+                          <LanguageConsumer>
+                            {language => <div id="language1">{language}</div>}
+                          </LanguageConsumer>
+                        </Language.Provider>
+                      )}
+                    </LanguageConsumer>
+                  </Theme.Provider>
+                  <LanguageConsumer>
+                    {language => (
+                      <>
+                        <ThemeConsumer>
+                          {theme => <div id="theme3">{theme}</div>}
+                        </ThemeConsumer>
+                        <div id="language2">{language}</div>
+                      </>
+                    )}
+                  </LanguageConsumer>
+                </Theme.Provider>
+              </Language.Provider>
+            </Language.Provider>
+          </Theme.Provider>
+          <LanguageConsumer>
+            {language => <div id="language3">{language}</div>}
+          </LanguageConsumer>
+        </div>
+      );
+      const e = await render(<App />);
+      expect(e.querySelector('#theme1').textContent).toBe('dark');
+      expect(e.querySelector('#theme2').textContent).toBe('light');
+      expect(e.querySelector('#theme3').textContent).toBe('blue');
+      expect(e.querySelector('#language1').textContent).toBe('chinese');
+      expect(e.querySelector('#language2').textContent).toBe('sanskrit');
+      expect(e.querySelector('#language3').textContent).toBe('french');
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
new file mode 100644
index 00000000000..04475485eb8
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -0,0 +1,1035 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+const TEXT_NODE_TYPE = 3;
+
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let assertConsoleErrorDev;
+
+function initModules() {
+  jest.resetModules();
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+  assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {
+  resetModules,
+  itRenders,
+  itThrowsWhenRendering,
+  serverRender,
+  streamRender,
+  clientCleanRender,
+  clientRenderOnServerString,
+} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  afterEach(() => {
+    // TODO: This is a hack because expectErrors does not restore mock,
+    // however fixing it requires a major refactor to all these tests.
+    if (console.error.mockClear) {
+      console.error.mockRestore();
+    }
+  });
+
+  describe('elements and children', function () {
+    function expectNode(node, type, value) {
+      expect(node).not.toBe(null);
+      expect(node.nodeType).toBe(type);
+      expect(node.nodeValue).toMatch(value);
+    }
+
+    function expectTextNode(node, text) {
+      expectNode(node, TEXT_NODE_TYPE, text);
+    }
+
+    describe('text children', function () {
+      itRenders('a div with text', async render => {
+        const e = await render(<div>Text</div>);
+        expect(e.tagName).toBe('DIV');
+        expect(e.childNodes.length).toBe(1);
+        expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+      });
+
+      itRenders('a div with text with flanking whitespace', async render => {
+        // prettier-ignore
+        const e = await render(<div>  Text </div>);
+        expect(e.childNodes.length).toBe(1);
+        expectNode(e.childNodes[0], TEXT_NODE_TYPE, '  Text ');
+      });
+
+      itRenders('a div with an empty text child', async render => {
+        const e = await render(<div>{''}</div>);
+        expect(e.childNodes.length).toBe(0);
+      });
+
+      itRenders('a div with multiple empty text children', async render => {
+        const e = await render(
+          <div>
+            {''}
+            {''}
+            {''}
+          </div>,
+        );
+        expect(e.childNodes.length).toBe(0);
+        expect(e.textContent).toBe('');
+      });
+
+      itRenders('a div with multiple whitespace children', async render => {
+        // prettier-ignore
+        const e = await render(<div>{' '}{' '}{' '}</div>);
+        if (
+          render === serverRender ||
+          render === clientRenderOnServerString ||
+          render === streamRender
+        ) {
+          // For plain server markup result we have comments between.
+          // If we're able to hydrate, they remain.
+          expect(e.childNodes.length).toBe(5);
+          expectTextNode(e.childNodes[0], ' ');
+          expectTextNode(e.childNodes[2], ' ');
+          expectTextNode(e.childNodes[4], ' ');
+        } else {
+          expect(e.childNodes.length).toBe(3);
+          expectTextNode(e.childNodes[0], ' ');
+          expectTextNode(e.childNodes[1], ' ');
+          expectTextNode(e.childNodes[2], ' ');
+        }
+      });
+
+      itRenders('a div with text sibling to a node', async render => {
+        const e = await render(
+          <div>
+            Text<span>More Text</span>
+          </div>,
+        );
+        expect(e.childNodes.length).toBe(2);
+        const spanNode = e.childNodes[1];
+        expectTextNode(e.childNodes[0], 'Text');
+        expect(spanNode.tagName).toBe('SPAN');
+        expect(spanNode.childNodes.length).toBe(1);
+        expectNode(spanNode.firstChild, TEXT_NODE_TYPE, 'More Text');
+      });
+
+      itRenders('a non-standard element with text', async render => {
+        // This test suite generally assumes that we get exactly
+        // the same warnings (or none) for all scenarios including
+        // SSR + innerHTML, hydration, and client-side rendering.
+        // However this particular warning fires only when creating
+        // DOM nodes on the client side. We force it to fire early
+        // so that it gets deduplicated later, and doesn't fail the test.
+        ReactDOM.flushSync(() => {
+          const root = ReactDOMClient.createRoot(document.createElement('div'));
+          root.render(<nonstandard />);
+        });
+        assertConsoleErrorDev([
+          'The tag <nonstandard> is unrecognized in this browser. ' +
+            'If you meant to render a React component, start its name with an uppercase letter.\n' +
+            '    in nonstandard (at **)',
+        ]);
+
+        const e = await render(<nonstandard>Text</nonstandard>);
+        expect(e.tagName).toBe('NONSTANDARD');
+        expect(e.childNodes.length).toBe(1);
+        expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+      });
+
+      itRenders('a custom element with text', async render => {
+        const e = await render(<custom-element>Text</custom-element>);
+        expect(e.tagName).toBe('CUSTOM-ELEMENT');
+        expect(e.childNodes.length).toBe(1);
+        expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+      });
+
+      itRenders('a leading blank child with a text sibling', async render => {
+        const e = await render(<div>{''}foo</div>);
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
+      });
+
+      itRenders('a trailing blank child with a text sibling', async render => {
+        const e = await render(<div>foo{''}</div>);
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
+      });
+
+      itRenders('an element with two text children', async render => {
+        const e = await render(
+          <div>
+            {'foo'}
+            {'bar'}
+          </div>,
+        );
+        if (
+          render === serverRender ||
+          render === clientRenderOnServerString ||
+          render === streamRender
+        ) {
+          // In the server render output there's a comment between them.
+          expect(e.childNodes.length).toBe(3);
+          expectTextNode(e.childNodes[0], 'foo');
+          expectTextNode(e.childNodes[2], 'bar');
+        } else {
+          expect(e.childNodes.length).toBe(2);
+          expectTextNode(e.childNodes[0], 'foo');
+          expectTextNode(e.childNodes[1], 'bar');
+        }
+      });
+
+      itRenders(
+        'a component returning text node between two text nodes',
+        async render => {
+          const B = () => 'b';
+          const e = await render(
+            <div>
+              {'a'}
+              <B />
+              {'c'}
+            </div>,
+          );
+          if (
+            render === serverRender ||
+            render === clientRenderOnServerString ||
+            render === streamRender
+          ) {
+            // In the server render output there's a comment between them.
+            expect(e.childNodes.length).toBe(5);
+            expectTextNode(e.childNodes[0], 'a');
+            expectTextNode(e.childNodes[2], 'b');
+            expectTextNode(e.childNodes[4], 'c');
+          } else {
+            expect(e.childNodes.length).toBe(3);
+            expectTextNode(e.childNodes[0], 'a');
+            expectTextNode(e.childNodes[1], 'b');
+            expectTextNode(e.childNodes[2], 'c');
+          }
+        },
+      );
+
+      itRenders('a tree with sibling host and text nodes', async render => {
+        class X extends React.Component {
+          render() {
+            return [null, [<Y key="1" />], false];
+          }
+        }
+
+        function Y() {
+          return [<Z key="1" />, ['c']];
+        }
+
+        function Z() {
+          return null;
+        }
+
+        const e = await render(
+          <div>
+            {[['a'], 'b']}
+            <div>
+              <X key="1" />d
+            </div>
+            e
+          </div>,
+        );
+        if (
+          render === serverRender ||
+          render === streamRender ||
+          render === clientRenderOnServerString
+        ) {
+          // In the server render output there's comments between text nodes.
+          expect(e.childNodes.length).toBe(5);
+          expectTextNode(e.childNodes[0], 'a');
+          expectTextNode(e.childNodes[2], 'b');
+          expect(e.childNodes[3].childNodes.length).toBe(3);
+          expectTextNode(e.childNodes[3].childNodes[0], 'c');
+          expectTextNode(e.childNodes[3].childNodes[2], 'd');
+          expectTextNode(e.childNodes[4], 'e');
+        } else {
+          expect(e.childNodes.length).toBe(4);
+          expectTextNode(e.childNodes[0], 'a');
+          expectTextNode(e.childNodes[1], 'b');
+          expect(e.childNodes[2].childNodes.length).toBe(2);
+          expectTextNode(e.childNodes[2].childNodes[0], 'c');
+          expectTextNode(e.childNodes[2].childNodes[1], 'd');
+          expectTextNode(e.childNodes[3], 'e');
+        }
+      });
+    });
+
+    describe('number children', function () {
+      itRenders('a number as single child', async render => {
+        const e = await render(<div>{3}</div>);
+        expect(e.textContent).toBe('3');
+      });
+
+      // zero is falsey, so it could look like no children if the code isn't careful.
+      itRenders('zero as single child', async render => {
+        const e = await render(<div>{0}</div>);
+        expect(e.textContent).toBe('0');
+      });
+
+      itRenders('an element with number and text children', async render => {
+        const e = await render(
+          <div>
+            {'foo'}
+            {40}
+          </div>,
+        );
+        // with Fiber, there are just two text nodes.
+        if (
+          render === serverRender ||
+          render === clientRenderOnServerString ||
+          render === streamRender
+        ) {
+          // In the server markup there's a comment between.
+          expect(e.childNodes.length).toBe(3);
+          expectTextNode(e.childNodes[0], 'foo');
+          expectTextNode(e.childNodes[2], '40');
+        } else {
+          expect(e.childNodes.length).toBe(2);
+          expectTextNode(e.childNodes[0], 'foo');
+          expectTextNode(e.childNodes[1], '40');
+        }
+      });
+    });
+
+    describe('null, false, and undefined children', function () {
+      itRenders('null single child as blank', async render => {
+        const e = await render(<div>{null}</div>);
+        expect(e.childNodes.length).toBe(0);
+      });
+
+      itRenders('false single child as blank', async render => {
+        const e = await render(<div>{false}</div>);
+        expect(e.childNodes.length).toBe(0);
+      });
+
+      itRenders('undefined single child as blank', async render => {
+        const e = await render(<div>{undefined}</div>);
+        expect(e.childNodes.length).toBe(0);
+      });
+
+      itRenders('a null component children as empty', async render => {
+        const NullComponent = () => null;
+        const e = await render(
+          <div>
+            <NullComponent />
+          </div>,
+        );
+        expect(e.childNodes.length).toBe(0);
+      });
+
+      itRenders('null children as blank', async render => {
+        const e = await render(<div>{null}foo</div>);
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
+      });
+
+      itRenders('false children as blank', async render => {
+        const e = await render(<div>{false}foo</div>);
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
+      });
+
+      itRenders('null and false children together as blank', async render => {
+        const e = await render(
+          <div>
+            {false}
+            {null}foo{null}
+            {false}
+          </div>,
+        );
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
+      });
+
+      itRenders('only null and false children as blank', async render => {
+        const e = await render(
+          <div>
+            {false}
+            {null}
+            {null}
+            {false}
+          </div>,
+        );
+        expect(e.childNodes.length).toBe(0);
+      });
+    });
+
+    describe('elements with implicit namespaces', function () {
+      itRenders('an svg element', async render => {
+        const e = await render(<svg />);
+        expect(e.childNodes.length).toBe(0);
+        expect(e.tagName).toBe('svg');
+        expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      });
+
+      itRenders('svg child element with an attribute', async render => {
+        const e = await render(<svg viewBox="0 0 0 0" />);
+        expect(e.childNodes.length).toBe(0);
+        expect(e.tagName).toBe('svg');
+        expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
+        expect(e.getAttribute('viewBox')).toBe('0 0 0 0');
+      });
+
+      itRenders(
+        'svg child element with a namespace attribute',
+        async render => {
+          let e = await render(
+            <svg>
+              <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
+            </svg>,
+          );
+          e = e.firstChild;
+          expect(e.childNodes.length).toBe(0);
+          expect(e.tagName).toBe('image');
+          expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
+          expect(e.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(
+            'http://i.imgur.com/w7GCRPb.png',
+          );
+        },
+      );
+
+      itRenders('svg child element with a badly cased alias', async render => {
+        let e = await render(
+          <svg>
+            <image xlinkhref="http://i.imgur.com/w7GCRPb.png" />
+          </svg>,
+          1,
+        );
+        e = e.firstChild;
+        expect(e.hasAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(
+          false,
+        );
+        expect(e.getAttribute('xlinkhref')).toBe(
+          'http://i.imgur.com/w7GCRPb.png',
+        );
+      });
+
+      itRenders('svg element with a tabIndex attribute', async render => {
+        const e = await render(<svg tabIndex="1" />);
+        expect(e.tabIndex).toBe(1);
+      });
+
+      itRenders(
+        'svg element with a badly cased tabIndex attribute',
+        async render => {
+          const e = await render(<svg tabindex="1" />, 1);
+          expect(e.tabIndex).toBe(1);
+        },
+      );
+
+      itRenders('svg element with a mixed case name', async render => {
+        let e = await render(
+          <svg>
+            <filter>
+              <feMorphology />
+            </filter>
+          </svg>,
+        );
+        e = e.firstChild.firstChild;
+        expect(e.childNodes.length).toBe(0);
+        expect(e.tagName).toBe('feMorphology');
+        expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      });
+
+      itRenders('a math element', async render => {
+        const e = await render(<math />);
+        expect(e.childNodes.length).toBe(0);
+        expect(e.tagName).toBe('math');
+        expect(e.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+      });
+    });
+    // specially wrapped components
+    // (see the big switch near the beginning ofReactDOMComponent.mountComponent)
+    itRenders('an img', async render => {
+      const e = await render(<img />);
+      expect(e.childNodes.length).toBe(0);
+      expect(e.nextSibling).toBe(null);
+      expect(e.tagName).toBe('IMG');
+    });
+
+    itRenders('a button', async render => {
+      const e = await render(<button />);
+      expect(e.childNodes.length).toBe(0);
+      expect(e.nextSibling).toBe(null);
+      expect(e.tagName).toBe('BUTTON');
+    });
+
+    itRenders('a div with dangerouslySetInnerHTML number', async render => {
+      // 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;
+      expect(e.childNodes.length).toBe(1);
+      expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);
+      expect(e.textContent).toBe('0');
+    });
+
+    itRenders('a div with dangerouslySetInnerHTML boolean', async render => {
+      // 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;
+      expect(e.childNodes.length).toBe(1);
+      expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);
+      expect(e.firstChild.data).toBe('false');
+    });
+
+    itRenders(
+      'a div with dangerouslySetInnerHTML text string',
+      async render => {
+        // 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;
+        expect(e.childNodes.length).toBe(1);
+        expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);
+        expect(e.textContent).toBe('hello');
+      },
+    );
+
+    itRenders(
+      'a div with dangerouslySetInnerHTML element string',
+      async render => {
+        const e = await render(
+          <div dangerouslySetInnerHTML={{__html: "<span id='child'/>"}} />,
+        );
+        expect(e.childNodes.length).toBe(1);
+        expect(e.firstChild.tagName).toBe('SPAN');
+        expect(e.firstChild.getAttribute('id')).toBe('child');
+        expect(e.firstChild.childNodes.length).toBe(0);
+      },
+    );
+
+    itRenders('a div with dangerouslySetInnerHTML object', async render => {
+      const obj = {
+        toString() {
+          return "<span id='child'/>";
+        },
+      };
+      const e = await render(<div dangerouslySetInnerHTML={{__html: obj}} />);
+      expect(e.childNodes.length).toBe(1);
+      expect(e.firstChild.tagName).toBe('SPAN');
+      expect(e.firstChild.getAttribute('id')).toBe('child');
+      expect(e.firstChild.childNodes.length).toBe(0);
+    });
+
+    itRenders(
+      'a div with dangerouslySetInnerHTML set to null',
+      async render => {
+        const e = await render(
+          <div dangerouslySetInnerHTML={{__html: null}} />,
+        );
+        expect(e.childNodes.length).toBe(0);
+      },
+    );
+
+    itRenders(
+      'a div with dangerouslySetInnerHTML set to undefined',
+      async render => {
+        const e = await render(
+          <div dangerouslySetInnerHTML={{__html: undefined}} />,
+        );
+        expect(e.childNodes.length).toBe(0);
+      },
+    );
+
+    itRenders('a noscript with children', async render => {
+      const e = await render(
+        <noscript>
+          <div>Enable JavaScript to run this app.</div>
+        </noscript>,
+      );
+      if (render === clientCleanRender) {
+        // On the client we ignore the contents of a noscript
+        expect(e.childNodes.length).toBe(0);
+      } else {
+        // On the server or when hydrating the content should be correct
+        expect(e.childNodes.length).toBe(1);
+        expect(e.firstChild.textContent).toBe(
+          '<div>Enable JavaScript to run this app.</div>',
+        );
+      }
+    });
+
+    describe('newline-eating elements', function () {
+      itRenders(
+        'a newline-eating tag with content not starting with \\n',
+        async render => {
+          const e = await render(<pre>Hello</pre>);
+          expect(e.textContent).toBe('Hello');
+        },
+      );
+      itRenders(
+        'a newline-eating tag with content starting with \\n',
+        async render => {
+          const e = await render(<pre>{'\nHello'}</pre>);
+          expect(e.textContent).toBe('\nHello');
+        },
+      );
+      itRenders('a normal tag with content starting with \\n', async render => {
+        const e = await render(<div>{'\nHello'}</div>);
+        expect(e.textContent).toBe('\nHello');
+      });
+    });
+
+    describe('different component implementations', function () {
+      function checkFooDiv(e) {
+        expect(e.childNodes.length).toBe(1);
+        expectNode(e.firstChild, TEXT_NODE_TYPE, 'foo');
+      }
+
+      itRenders('stateless components', async render => {
+        const FunctionComponent = () => <div>foo</div>;
+        checkFooDiv(await render(<FunctionComponent />));
+      });
+
+      itRenders('ES6 class components', async render => {
+        class ClassComponent extends React.Component {
+          render() {
+            return <div>foo</div>;
+          }
+        }
+        checkFooDiv(await render(<ClassComponent />));
+      });
+
+      itThrowsWhenRendering(
+        'factory components',
+        async render => {
+          const FactoryComponent = () => {
+            return {
+              render: function () {
+                return <div>foo</div>;
+              },
+            };
+          };
+          await render(<FactoryComponent />, 1);
+        },
+        'Objects are not valid as a React child (found: object with keys {render})',
+      );
+    });
+
+    describe('component hierarchies', function () {
+      itRenders('single child hierarchies of components', async render => {
+        const Component = props => <div>{props.children}</div>;
+        let e = await render(
+          <Component>
+            <Component>
+              <Component>
+                <Component />
+              </Component>
+            </Component>
+          </Component>,
+        );
+        for (let i = 0; i < 3; i++) {
+          expect(e.tagName).toBe('DIV');
+          expect(e.childNodes.length).toBe(1);
+          e = e.firstChild;
+        }
+        expect(e.tagName).toBe('DIV');
+        expect(e.childNodes.length).toBe(0);
+      });
+
+      itRenders('multi-child hierarchies of components', async render => {
+        const Component = props => <div>{props.children}</div>;
+        const e = await render(
+          <Component>
+            <Component>
+              <Component />
+              <Component />
+            </Component>
+            <Component>
+              <Component />
+              <Component />
+            </Component>
+          </Component>,
+        );
+        expect(e.tagName).toBe('DIV');
+        expect(e.childNodes.length).toBe(2);
+        for (let i = 0; i < 2; i++) {
+          const child = e.childNodes[i];
+          expect(child.tagName).toBe('DIV');
+          expect(child.childNodes.length).toBe(2);
+          for (let j = 0; j < 2; j++) {
+            const grandchild = child.childNodes[j];
+            expect(grandchild.tagName).toBe('DIV');
+            expect(grandchild.childNodes.length).toBe(0);
+          }
+        }
+      });
+
+      itRenders('a div with a child', async render => {
+        const e = await render(
+          <div id="parent">
+            <div id="child" />
+          </div>,
+        );
+        expect(e.id).toBe('parent');
+        expect(e.childNodes.length).toBe(1);
+        expect(e.childNodes[0].id).toBe('child');
+        expect(e.childNodes[0].childNodes.length).toBe(0);
+      });
+
+      itRenders('a div with multiple children', async render => {
+        const e = await render(
+          <div id="parent">
+            <div id="child1" />
+            <div id="child2" />
+          </div>,
+        );
+        expect(e.id).toBe('parent');
+        expect(e.childNodes.length).toBe(2);
+        expect(e.childNodes[0].id).toBe('child1');
+        expect(e.childNodes[0].childNodes.length).toBe(0);
+        expect(e.childNodes[1].id).toBe('child2');
+        expect(e.childNodes[1].childNodes.length).toBe(0);
+      });
+
+      itRenders(
+        'a div with multiple children separated by whitespace',
+        async render => {
+          const e = await render(
+            <div id="parent">
+              <div id="child1" /> <div id="child2" />
+            </div>,
+          );
+          expect(e.id).toBe('parent');
+          expect(e.childNodes.length).toBe(3);
+          const child1 = e.childNodes[0];
+          const textNode = e.childNodes[1];
+          const child2 = e.childNodes[2];
+          expect(child1.id).toBe('child1');
+          expect(child1.childNodes.length).toBe(0);
+          expectTextNode(textNode, ' ');
+          expect(child2.id).toBe('child2');
+          expect(child2.childNodes.length).toBe(0);
+        },
+      );
+
+      itRenders(
+        'a div with a single child surrounded by whitespace',
+        async render => {
+          // prettier-ignore
+          const e = await render(<div id="parent">  <div id="child" />   </div>);
+          expect(e.childNodes.length).toBe(3);
+          const textNode1 = e.childNodes[0];
+          const child = e.childNodes[1];
+          const textNode2 = e.childNodes[2];
+          expect(e.id).toBe('parent');
+          expectTextNode(textNode1, '  ');
+          expect(child.id).toBe('child');
+          expect(child.childNodes.length).toBe(0);
+          expectTextNode(textNode2, '   ');
+        },
+      );
+
+      itRenders('a composite with multiple children', async render => {
+        const Component = props => props.children;
+        const e = await render(
+          <Component>{['a', 'b', [undefined], [[false, 'c']]]}</Component>,
+        );
+
+        const parent = e.parentNode;
+        if (
+          render === serverRender ||
+          render === clientRenderOnServerString ||
+          render === streamRender
+        ) {
+          // For plain server markup result we have comments between.
+          // If we're able to hydrate, they remain.
+          expect(parent.childNodes.length).toBe(5);
+          expectTextNode(parent.childNodes[0], 'a');
+          expectTextNode(parent.childNodes[2], 'b');
+          expectTextNode(parent.childNodes[4], 'c');
+        } else {
+          expect(parent.childNodes.length).toBe(3);
+          expectTextNode(parent.childNodes[0], 'a');
+          expectTextNode(parent.childNodes[1], 'b');
+          expectTextNode(parent.childNodes[2], 'c');
+        }
+      });
+    });
+
+    describe('escaping >, <, and &', function () {
+      itRenders('>,<, and & as single child', async render => {
+        const e = await render(<div>{'<span>Text&quot;</span>'}</div>);
+        expect(e.childNodes.length).toBe(1);
+        expectNode(e.firstChild, TEXT_NODE_TYPE, '<span>Text&quot;</span>');
+      });
+
+      itRenders('>,<, and & as multiple children', async render => {
+        const e = await render(
+          <div>
+            {'<span>Text1&quot;</span>'}
+            {'<span>Text2&quot;</span>'}
+          </div>,
+        );
+        if (
+          render === serverRender ||
+          render === clientRenderOnServerString ||
+          render === streamRender
+        ) {
+          expect(e.childNodes.length).toBe(3);
+          expectTextNode(e.childNodes[0], '<span>Text1&quot;</span>');
+          expectTextNode(e.childNodes[2], '<span>Text2&quot;</span>');
+        } else {
+          expect(e.childNodes.length).toBe(2);
+          expectTextNode(e.childNodes[0], '<span>Text1&quot;</span>');
+          expectTextNode(e.childNodes[1], '<span>Text2&quot;</span>');
+        }
+      });
+    });
+
+    describe('carriage return and null character', () => {
+      // HTML parsing normalizes CR and CRLF to LF.
+      // It also ignores null character.
+      // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
+      // If we have a mismatch, it might be caused by that (and should not be reported).
+      // We won't be patching up in this case as that matches our past behavior.
+
+      itRenders(
+        'an element with one text child with special characters',
+        async render => {
+          const e = await render(<div>{'foo\rbar\r\nbaz\nqux\u0000'}</div>);
+          if (
+            render === serverRender ||
+            render === streamRender ||
+            render === clientRenderOnServerString
+          ) {
+            expect(e.childNodes.length).toBe(1);
+            // Everything becomes LF when parsed from server HTML or hydrated.
+            // Null character is ignored.
+            expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar\nbaz\nqux');
+          } else {
+            expect(e.childNodes.length).toBe(1);
+            // Client rendering uses JS value with CR.
+            // Null character stays.
+
+            expectNode(
+              e.childNodes[0],
+              TEXT_NODE_TYPE,
+              'foo\rbar\r\nbaz\nqux\u0000',
+            );
+          }
+        },
+      );
+
+      itRenders(
+        'an element with two text children with special characters',
+        async render => {
+          const e = await render(
+            <div>
+              {'foo\rbar'}
+              {'\r\nbaz\nqux\u0000'}
+            </div>,
+          );
+          if (
+            render === serverRender ||
+            render === streamRender ||
+            render === clientRenderOnServerString
+          ) {
+            // We have three nodes because there is a comment between them.
+            expect(e.childNodes.length).toBe(3);
+            // Everything becomes LF when parsed from server HTML or hydrated.
+            // Null character is ignored.
+            expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar');
+            expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\nbaz\nqux');
+          } else if (render === clientRenderOnServerString) {
+            // We have three nodes because there is a comment between them.
+            expect(e.childNodes.length).toBe(3);
+            // Hydration uses JS value with CR and null character.
+
+            expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\rbar');
+            expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\r\nbaz\nqux\u0000');
+          } else {
+            expect(e.childNodes.length).toBe(2);
+            // Client rendering uses JS value with CR and null character.
+            expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\rbar');
+            expectNode(e.childNodes[1], TEXT_NODE_TYPE, '\r\nbaz\nqux\u0000');
+          }
+        },
+      );
+
+      itRenders(
+        'an element with an attribute value with special characters',
+        async render => {
+          const e = await render(<a title={'foo\rbar\r\nbaz\nqux\u0000'} />);
+          if (
+            render === serverRender ||
+            render === streamRender ||
+            render === clientRenderOnServerString
+          ) {
+            // Everything becomes LF when parsed from server HTML.
+            // Null character in an attribute becomes the replacement character.
+            // Hydration also ends up with LF because we don't patch up attributes.
+            expect(e.title).toBe('foo\nbar\nbaz\nqux\uFFFD');
+          } else {
+            // Client rendering uses JS value with CR and null character.
+            expect(e.title).toBe('foo\rbar\r\nbaz\nqux\u0000');
+          }
+        },
+      );
+    });
+
+    describe('components that render nullish', function () {
+      itRenders('a function returning null', async render => {
+        const NullComponent = () => null;
+        await render(<NullComponent />);
+      });
+
+      itRenders('a class returning null', async render => {
+        class NullComponent extends React.Component {
+          render() {
+            return null;
+          }
+        }
+        await render(<NullComponent />);
+      });
+
+      itRenders('a function returning undefined', async render => {
+        const UndefinedComponent = () => undefined;
+        await render(<UndefinedComponent />);
+      });
+
+      itRenders('a class returning undefined', async render => {
+        class UndefinedComponent extends React.Component {
+          render() {
+            return undefined;
+          }
+        }
+        await render(<UndefinedComponent />);
+      });
+    });
+
+    describe('components that throw errors', function () {
+      itThrowsWhenRendering(
+        'a function returning an object',
+        async render => {
+          const ObjectComponent = () => ({x: 123});
+          await render(<ObjectComponent />, 1);
+        },
+        'Objects are not valid as a React child (found: object with keys {x}).' +
+          (__DEV__
+            ? ' If you meant to render a collection of children, use ' +
+              'an array instead.'
+            : ''),
+      );
+
+      itThrowsWhenRendering(
+        'a class returning an object',
+        async render => {
+          class ObjectComponent extends React.Component {
+            render() {
+              return {x: 123};
+            }
+          }
+          await render(<ObjectComponent />, 1);
+        },
+        'Objects are not valid as a React child (found: object with keys {x}).' +
+          (__DEV__
+            ? ' If you meant to render a collection of children, use ' +
+              'an array instead.'
+            : ''),
+      );
+
+      itThrowsWhenRendering(
+        'top-level object',
+        async render => {
+          await render({x: 123});
+        },
+        'Objects are not valid as a React child (found: object with keys {x}).' +
+          (__DEV__
+            ? ' If you meant to render a collection of children, use ' +
+              'an array instead.'
+            : ''),
+      );
+    });
+
+    describe('badly-typed elements', function () {
+      itThrowsWhenRendering(
+        'object',
+        async render => {
+          let EmptyComponent = {};
+          EmptyComponent = <EmptyComponent />;
+          await render(EmptyComponent);
+        },
+        'Element type is invalid: expected a string (for built-in components) or a class/function ' +
+          '(for composite components) but got: object.' +
+          (__DEV__
+            ? " You likely forgot to export your component from the file it's defined in, " +
+              'or you might have mixed up default and named imports.'
+            : ''),
+      );
+
+      itThrowsWhenRendering(
+        'null',
+        async render => {
+          let NullComponent = null;
+          NullComponent = <NullComponent />;
+          await render(NullComponent);
+        },
+        'Element type is invalid: expected a string (for built-in components) or a class/function ' +
+          '(for composite components) but got: null',
+      );
+
+      itThrowsWhenRendering(
+        'undefined',
+        async render => {
+          let UndefinedComponent = undefined;
+          UndefinedComponent = <UndefinedComponent />;
+          await render(UndefinedComponent);
+        },
+        'Element type is invalid: expected a string (for built-in components) or a class/function ' +
+          '(for composite components) but got: undefined.' +
+          (__DEV__
+            ? " You likely forgot to export your component from the file it's defined in, " +
+              'or you might have mixed up default and named imports.'
+            : ''),
+      );
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
new file mode 100644
index 00000000000..992e17755f7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('React.Fragment', () => {
+    itRenders('a fragment with one child', async render => {
+      const e = await render(
+        <>
+          <div>text1</div>
+        </>,
+      );
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+    });
+
+    itRenders('a fragment with several children', async render => {
+      const Header = props => {
+        return <p>header</p>;
+      };
+      const Footer = props => {
+        return (
+          <>
+            <h2>footer</h2>
+            <h3>about</h3>
+          </>
+        );
+      };
+      const e = await render(
+        <>
+          <div>text1</div>
+          <span>text2</span>
+          <Header />
+          <Footer />
+        </>,
+      );
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+      expect(parent.childNodes[3].tagName).toBe('H2');
+      expect(parent.childNodes[4].tagName).toBe('H3');
+    });
+
+    itRenders('a nested fragment', async render => {
+      const e = await render(
+        <>
+          <>
+            <div>text1</div>
+          </>
+          <span>text2</span>
+          <>
+            <>
+              <>
+                {null}
+                <p />
+              </>
+              {false}
+            </>
+          </>
+        </>,
+      );
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+    });
+
+    itRenders('an empty fragment', async render => {
+      expect(
+        (
+          await render(
+            <div>
+              <React.Fragment />
+            </div>,
+          )
+        ).firstChild,
+      ).toBe(null);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
new file mode 100644
index 00000000000..e1aeea70fd8
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -0,0 +1,925 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+/* eslint-disable no-func-assign */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+let useState;
+let useReducer;
+let useEffect;
+let useContext;
+let useCallback;
+let useMemo;
+let useRef;
+let useImperativeHandle;
+let useInsertionEffect;
+let useLayoutEffect;
+let useDebugValue;
+let forwardRef;
+let yieldedValues;
+let yieldValue;
+let clearLog;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+  useState = React.useState;
+  useReducer = React.useReducer;
+  useEffect = React.useEffect;
+  useContext = React.useContext;
+  useCallback = React.useCallback;
+  useMemo = React.useMemo;
+  useRef = React.useRef;
+  useDebugValue = React.useDebugValue;
+  useImperativeHandle = React.useImperativeHandle;
+  useInsertionEffect = React.useInsertionEffect;
+  useLayoutEffect = React.useLayoutEffect;
+  forwardRef = React.forwardRef;
+
+  yieldedValues = [];
+  yieldValue = value => {
+    yieldedValues.push(value);
+  };
+  clearLog = () => {
+    const ret = yieldedValues;
+    yieldedValues = [];
+    return ret;
+  };
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {
+  resetModules,
+  itRenders,
+  itThrowsWhenRendering,
+  clientRenderOnBadMarkup,
+  serverRender,
+} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerHooks', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  function Text(props) {
+    yieldValue(props.text);
+    return <span>{props.text}</span>;
+  }
+
+  describe('useState', () => {
+    itRenders('basic render', async render => {
+      function Counter(props) {
+        const [count] = useState(0);
+        return <span>Count: {count}</span>;
+      }
+
+      const domNode = await render(<Counter />);
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+
+    itRenders('lazy state initialization', async render => {
+      function Counter(props) {
+        const [count] = useState(() => {
+          return 0;
+        });
+        return <span>Count: {count}</span>;
+      }
+
+      const domNode = await render(<Counter />);
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+
+    it('does not trigger a re-renders when updater is invoked outside current render function', async () => {
+      function UpdateCount({setCount, count, children}) {
+        if (count < 3) {
+          setCount(c => c + 1);
+        }
+        return <span>{children}</span>;
+      }
+      function Counter() {
+        const [count, setCount] = useState(0);
+        return (
+          <div>
+            <UpdateCount setCount={setCount} count={count}>
+              Count: {count}
+            </UpdateCount>
+          </div>
+        );
+      }
+
+      const domNode = await serverRender(<Counter />);
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+
+    itThrowsWhenRendering(
+      'if used inside a class component',
+      async render => {
+        class Counter extends React.Component {
+          render() {
+            const [count] = useState(0);
+            return <Text text={count} />;
+          }
+        }
+
+        return render(<Counter />);
+      },
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+
+    itRenders('multiple times when an updater is called', async render => {
+      function Counter() {
+        const [count, setCount] = useState(0);
+        if (count < 12) {
+          setCount(c => c + 1);
+          setCount(c => c + 1);
+          setCount(c => c + 1);
+        }
+        return <Text text={'Count: ' + count} />;
+      }
+
+      const domNode = await render(<Counter />);
+      expect(domNode.textContent).toEqual('Count: 12');
+    });
+
+    itRenders('until there are no more new updates', async render => {
+      function Counter() {
+        const [count, setCount] = useState(0);
+        if (count < 3) {
+          setCount(count + 1);
+        }
+        return <span>Count: {count}</span>;
+      }
+
+      const domNode = await render(<Counter />);
+      expect(domNode.textContent).toEqual('Count: 3');
+    });
+
+    itThrowsWhenRendering(
+      'after too many iterations',
+      async render => {
+        function Counter() {
+          const [count, setCount] = useState(0);
+          setCount(count + 1);
+          return <span>{count}</span>;
+        }
+        return render(<Counter />);
+      },
+      'Too many re-renders. React limits the number of renders to prevent ' +
+        'an infinite loop.',
+    );
+  });
+
+  describe('useReducer', () => {
+    itRenders('with initial state', async render => {
+      function reducer(state, action) {
+        return action === 'increment' ? state + 1 : state;
+      }
+      function Counter() {
+        const [count] = useReducer(reducer, 0);
+        yieldValue('Render: ' + count);
+        return <Text text={count} />;
+      }
+
+      const domNode = await render(<Counter />);
+
+      expect(clearLog()).toEqual(['Render: 0', 0]);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('0');
+    });
+
+    itRenders('lazy initialization', async render => {
+      function reducer(state, action) {
+        return action === 'increment' ? state + 1 : state;
+      }
+      function Counter() {
+        const [count] = useReducer(reducer, 0, c => c + 1);
+        yieldValue('Render: ' + count);
+        return <Text text={count} />;
+      }
+
+      const domNode = await render(<Counter />);
+
+      expect(clearLog()).toEqual(['Render: 1', 1]);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('1');
+    });
+
+    itRenders(
+      'multiple times when updates happen during the render phase',
+      async render => {
+        function reducer(state, action) {
+          return action === 'increment' ? state + 1 : state;
+        }
+        function Counter() {
+          const [count, dispatch] = useReducer(reducer, 0);
+          if (count < 3) {
+            dispatch('increment');
+          }
+          yieldValue('Render: ' + count);
+          return <Text text={count} />;
+        }
+
+        const domNode = await render(<Counter />);
+
+        expect(clearLog()).toEqual([
+          'Render: 0',
+          'Render: 1',
+          'Render: 2',
+          'Render: 3',
+          3,
+        ]);
+        expect(domNode.tagName).toEqual('SPAN');
+        expect(domNode.textContent).toEqual('3');
+      },
+    );
+
+    itRenders(
+      'using reducer passed at time of render, not time of dispatch',
+      async render => {
+        // This test is a bit contrived but it demonstrates a subtle edge case.
+
+        // Reducer A increments by 1. Reducer B increments by 10.
+        function reducerA(state, action) {
+          switch (action) {
+            case 'increment':
+              return state + 1;
+            case 'reset':
+              return 0;
+          }
+        }
+        function reducerB(state, action) {
+          switch (action) {
+            case 'increment':
+              return state + 10;
+            case 'reset':
+              return 0;
+          }
+        }
+
+        function Counter() {
+          const [reducer, setReducer] = useState(() => reducerA);
+          const [count, dispatch] = useReducer(reducer, 0);
+          if (count < 20) {
+            dispatch('increment');
+            // Swap reducers each time we increment
+            if (reducer === reducerA) {
+              setReducer(() => reducerB);
+            } else {
+              setReducer(() => reducerA);
+            }
+          }
+          yieldValue('Render: ' + count);
+          return <Text text={count} />;
+        }
+
+        const domNode = await render(<Counter />);
+
+        expect(clearLog()).toEqual([
+          // The count should increase by alternating amounts of 10 and 1
+          // until we reach 21.
+          'Render: 0',
+          'Render: 10',
+          'Render: 11',
+          'Render: 21',
+          21,
+        ]);
+        expect(domNode.tagName).toEqual('SPAN');
+        expect(domNode.textContent).toEqual('21');
+      },
+    );
+  });
+
+  describe('useMemo', () => {
+    itRenders('basic render', async render => {
+      function CapitalizedText(props) {
+        const text = props.text;
+        const capitalizedText = useMemo(() => {
+          yieldValue(`Capitalize '${text}'`);
+          return text.toUpperCase();
+        }, [text]);
+        return <Text text={capitalizedText} />;
+      }
+
+      const domNode = await render(<CapitalizedText text="hello" />);
+      expect(clearLog()).toEqual(["Capitalize 'hello'", 'HELLO']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('HELLO');
+    });
+
+    itRenders('if no inputs are provided', async render => {
+      function LazyCompute(props) {
+        const computed = useMemo(props.compute);
+        return <Text text={computed} />;
+      }
+
+      function computeA() {
+        yieldValue('compute A');
+        return 'A';
+      }
+
+      const domNode = await render(<LazyCompute compute={computeA} />);
+      expect(clearLog()).toEqual(['compute A', 'A']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('A');
+    });
+
+    itRenders(
+      'multiple times when updates happen during the render phase',
+      async render => {
+        function CapitalizedText(props) {
+          const [text, setText] = useState(props.text);
+          const capitalizedText = useMemo(() => {
+            yieldValue(`Capitalize '${text}'`);
+            return text.toUpperCase();
+          }, [text]);
+
+          if (text === 'hello') {
+            setText('hello, world.');
+          }
+          return <Text text={capitalizedText} />;
+        }
+
+        const domNode = await render(<CapitalizedText text="hello" />);
+        expect(clearLog()).toEqual([
+          "Capitalize 'hello'",
+          "Capitalize 'hello, world.'",
+          'HELLO, WORLD.',
+        ]);
+        expect(domNode.tagName).toEqual('SPAN');
+        expect(domNode.textContent).toEqual('HELLO, WORLD.');
+      },
+    );
+
+    itRenders(
+      'should only invoke the memoized function when the inputs change',
+      async render => {
+        function CapitalizedText(props) {
+          const [text, setText] = useState(props.text);
+          const [count, setCount] = useState(0);
+          const capitalizedText = useMemo(() => {
+            yieldValue(`Capitalize '${text}'`);
+            return text.toUpperCase();
+          }, [text]);
+
+          yieldValue(count);
+
+          if (count < 3) {
+            setCount(count + 1);
+          }
+
+          if (text === 'hello' && count === 2) {
+            setText('hello, world.');
+          }
+          return <Text text={capitalizedText} />;
+        }
+
+        const domNode = await render(<CapitalizedText text="hello" />);
+        expect(clearLog()).toEqual([
+          "Capitalize 'hello'",
+          0,
+          1,
+          2,
+          // `capitalizedText` only recomputes when the text has changed
+          "Capitalize 'hello, world.'",
+          3,
+          'HELLO, WORLD.',
+        ]);
+        expect(domNode.tagName).toEqual('SPAN');
+        expect(domNode.textContent).toEqual('HELLO, WORLD.');
+      },
+    );
+
+    itRenders('with a warning for useState inside useMemo', async render => {
+      function App() {
+        useMemo(() => {
+          useState();
+          return 0;
+        });
+        return 'hi';
+      }
+      const domNode = await render(
+        <App />,
+        render === clientRenderOnBadMarkup
+          ? // On hydration mismatch we retry and therefore log the warning again.
+            2
+          : 1,
+      );
+      expect(domNode.textContent).toEqual('hi');
+    });
+
+    itRenders('with a warning for useRef inside useState', async render => {
+      function App() {
+        const [value] = useState(() => {
+          useRef(0);
+          return 0;
+        });
+        return value;
+      }
+
+      const domNode = await render(
+        <App />,
+        render === clientRenderOnBadMarkup
+          ? // On hydration mismatch we retry and therefore log the warning again.
+            2
+          : 1,
+      );
+      expect(domNode.textContent).toEqual('0');
+    });
+  });
+
+  describe('useRef', () => {
+    itRenders('basic render', async render => {
+      function Counter(props) {
+        const ref = useRef();
+        return <span ref={ref}>Hi</span>;
+      }
+
+      const domNode = await render(<Counter />);
+      expect(domNode.textContent).toEqual('Hi');
+    });
+
+    itRenders(
+      'multiple times when updates happen during the render phase',
+      async render => {
+        function Counter(props) {
+          const [count, setCount] = useState(0);
+          const ref = useRef();
+
+          if (count < 3) {
+            const newCount = count + 1;
+            setCount(newCount);
+          }
+
+          yieldValue(count);
+
+          return <span ref={ref}>Count: {count}</span>;
+        }
+
+        const domNode = await render(<Counter />);
+        expect(clearLog()).toEqual([0, 1, 2, 3]);
+        expect(domNode.textContent).toEqual('Count: 3');
+      },
+    );
+
+    itRenders(
+      'always return the same reference through multiple renders',
+      async render => {
+        let firstRef = null;
+        function Counter(props) {
+          const [count, setCount] = useState(0);
+          const ref = useRef();
+          if (firstRef === null) {
+            firstRef = ref;
+          } else if (firstRef !== ref) {
+            throw new Error('should never change');
+          }
+
+          if (count < 3) {
+            setCount(count + 1);
+          } else {
+            firstRef = null;
+          }
+
+          yieldValue(count);
+
+          return <span ref={ref}>Count: {count}</span>;
+        }
+
+        const domNode = await render(<Counter />);
+        expect(clearLog()).toEqual([0, 1, 2, 3]);
+        expect(domNode.textContent).toEqual('Count: 3');
+      },
+    );
+  });
+
+  describe('useEffect', () => {
+    const yields = [];
+    itRenders('should ignore effects on the server', async render => {
+      function Counter(props) {
+        useEffect(() => {
+          yieldValue('invoked on client');
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+
+      const domNode = await render(<Counter count={0} />);
+      yields.push(clearLog());
+      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', () => {
+    itRenders('should not invoke the passed callbacks', async render => {
+      function Counter(props) {
+        useCallback(() => {
+          yieldValue('should not be invoked');
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      const domNode = await render(<Counter count={0} />);
+      expect(clearLog()).toEqual(['Count: 0']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+
+    itRenders('should support render time callbacks', async render => {
+      function Counter(props) {
+        const renderCount = useCallback(increment => {
+          return 'Count: ' + (props.count + increment);
+        });
+        return <Text text={renderCount(3)} />;
+      }
+      const domNode = await render(<Counter count={2} />);
+      expect(clearLog()).toEqual(['Count: 5']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('Count: 5');
+    });
+
+    itRenders(
+      'should only change the returned reference when the inputs change',
+      async render => {
+        function CapitalizedText(props) {
+          const [text, setText] = useState(props.text);
+          const [count, setCount] = useState(0);
+          const capitalizeText = useCallback(() => text.toUpperCase(), [text]);
+          yieldValue(capitalizeText);
+          if (count < 3) {
+            setCount(count + 1);
+          }
+          if (text === 'hello' && count === 2) {
+            setText('hello, world.');
+          }
+          return <Text text={capitalizeText()} />;
+        }
+
+        const domNode = await render(<CapitalizedText text="hello" />);
+        const [first, second, third, fourth, result] = clearLog();
+        expect(first).toBe(second);
+        expect(second).toBe(third);
+        expect(third).not.toBe(fourth);
+        expect(result).toEqual('HELLO, WORLD.');
+        expect(domNode.tagName).toEqual('SPAN');
+        expect(domNode.textContent).toEqual('HELLO, WORLD.');
+      },
+    );
+  });
+
+  describe('useImperativeHandle', () => {
+    it('should not be invoked on the server', async () => {
+      function Counter(props, ref) {
+        useImperativeHandle(ref, () => {
+          throw new Error('should not be invoked');
+        });
+        return <Text text={props.label + ': ' + ref.current} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef();
+      counter.current = 0;
+      const domNode = await serverRender(
+        <Counter label="Count" ref={counter} />,
+      );
+      expect(clearLog()).toEqual(['Count: 0']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+  });
+  describe('useInsertionEffect', () => {
+    it('should warn when invoked during render', async () => {
+      function Counter() {
+        useInsertionEffect(() => {
+          throw new Error('should not be invoked');
+        });
+
+        return <Text text="Count: 0" />;
+      }
+      const domNode = await serverRender(<Counter />, 1);
+      expect(clearLog()).toEqual(['Count: 0']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+  });
+
+  describe('useLayoutEffect', () => {
+    it('should warn when invoked during render', async () => {
+      function Counter() {
+        useLayoutEffect(() => {
+          throw new Error('should not be invoked');
+        });
+
+        return <Text text="Count: 0" />;
+      }
+      const domNode = await serverRender(<Counter />, 1);
+      expect(clearLog()).toEqual(['Count: 0']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+  });
+
+  describe('useContext', () => {
+    itThrowsWhenRendering(
+      'if used inside a class component',
+      async render => {
+        const Context = React.createContext({}, () => {});
+        class Counter extends React.Component {
+          render() {
+            const [count] = useContext(Context);
+            return <Text text={count} />;
+          }
+        }
+
+        return render(<Counter />);
+      },
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  });
+
+  describe('invalid hooks', () => {
+    it('warns when calling useRef inside useReducer', async () => {
+      function App() {
+        const [value, dispatch] = useReducer((state, action) => {
+          useRef(0);
+          return state + 1;
+        }, 0);
+        if (value === 0) {
+          dispatch();
+        }
+        return value;
+      }
+
+      let error;
+      try {
+        await serverRender(<App />);
+      } catch (x) {
+        error = x;
+      }
+      expect(error).not.toBe(undefined);
+      expect(error.message).toContain(
+        'Rendered more hooks than during the previous render',
+      );
+    });
+  });
+
+  itRenders(
+    'can use the same context multiple times in the same function',
+    async render => {
+      const Context = React.createContext({foo: 0, bar: 0, baz: 0});
+
+      function Provider(props) {
+        return (
+          <Context.Provider
+            value={{foo: props.foo, bar: props.bar, baz: props.baz}}>
+            {props.children}
+          </Context.Provider>
+        );
+      }
+
+      function FooAndBar() {
+        const {foo} = useContext(Context);
+        const {bar} = useContext(Context);
+        return <Text text={`Foo: ${foo}, Bar: ${bar}`} />;
+      }
+
+      function Baz() {
+        const {baz} = useContext(Context);
+        return <Text text={'Baz: ' + baz} />;
+      }
+
+      class Indirection extends React.Component {
+        render() {
+          return this.props.children;
+        }
+      }
+
+      function App(props) {
+        return (
+          <div>
+            <Provider foo={props.foo} bar={props.bar} baz={props.baz}>
+              <Indirection>
+                <Indirection>
+                  <FooAndBar />
+                </Indirection>
+                <Indirection>
+                  <Baz />
+                </Indirection>
+              </Indirection>
+            </Provider>
+          </div>
+        );
+      }
+
+      const domNode = await render(<App foo={1} bar={3} baz={5} />);
+      expect(clearLog()).toEqual(['Foo: 1, Bar: 3', 'Baz: 5']);
+      expect(domNode.childNodes.length).toBe(2);
+      expect(domNode.firstChild.tagName).toEqual('SPAN');
+      expect(domNode.firstChild.textContent).toEqual('Foo: 1, Bar: 3');
+      expect(domNode.lastChild.tagName).toEqual('SPAN');
+      expect(domNode.lastChild.textContent).toEqual('Baz: 5');
+    },
+  );
+
+  describe('useDebugValue', () => {
+    itRenders('is a noop', async render => {
+      function Counter(props) {
+        const debugValue = useDebugValue(123);
+        return <Text text={typeof debugValue} />;
+      }
+
+      const domNode = await render(<Counter />);
+      expect(domNode.textContent).toEqual('undefined');
+    });
+  });
+
+  describe('readContext', () => {
+    function readContext(Context) {
+      const dispatcher =
+        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.H;
+      return dispatcher.readContext(Context);
+    }
+
+    itRenders(
+      'can read the same context multiple times in the same function',
+      async render => {
+        const Context = React.createContext(
+          {foo: 0, bar: 0, baz: 0},
+          (a, b) => {
+            let result = 0;
+            if (a.foo !== b.foo) {
+              result |= 0b001;
+            }
+            if (a.bar !== b.bar) {
+              result |= 0b010;
+            }
+            if (a.baz !== b.baz) {
+              result |= 0b100;
+            }
+            return result;
+          },
+        );
+
+        function Provider(props) {
+          return (
+            <Context.Provider
+              value={{foo: props.foo, bar: props.bar, baz: props.baz}}>
+              {props.children}
+            </Context.Provider>
+          );
+        }
+
+        function FooAndBar() {
+          const {foo} = readContext(Context, 0b001);
+          const {bar} = readContext(Context, 0b010);
+          return <Text text={`Foo: ${foo}, Bar: ${bar}`} />;
+        }
+
+        function Baz() {
+          const {baz} = readContext(Context, 0b100);
+          return <Text text={'Baz: ' + baz} />;
+        }
+
+        class Indirection extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+          render() {
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          return (
+            <div>
+              <Provider foo={props.foo} bar={props.bar} baz={props.baz}>
+                <Indirection>
+                  <Indirection>
+                    <FooAndBar />
+                  </Indirection>
+                  <Indirection>
+                    <Baz />
+                  </Indirection>
+                </Indirection>
+              </Provider>
+            </div>
+          );
+        }
+
+        const domNode = await render(<App foo={1} bar={3} baz={5} />);
+        expect(clearLog()).toEqual(['Foo: 1, Bar: 3', 'Baz: 5']);
+        expect(domNode.childNodes.length).toBe(2);
+        expect(domNode.firstChild.tagName).toEqual('SPAN');
+        expect(domNode.firstChild.textContent).toEqual('Foo: 1, Bar: 3');
+        expect(domNode.lastChild.tagName).toEqual('SPAN');
+        expect(domNode.lastChild.textContent).toEqual('Baz: 5');
+      },
+    );
+
+    itRenders('with a warning inside useMemo and useReducer', async render => {
+      const Context = React.createContext(42);
+
+      function ReadInMemo(props) {
+        const count = React.useMemo(() => readContext(Context), []);
+        return <Text text={count} />;
+      }
+
+      function ReadInReducer(props) {
+        const [count, dispatch] = React.useReducer(() => readContext(Context));
+        if (count !== 42) {
+          dispatch();
+        }
+        return <Text text={count} />;
+      }
+
+      const domNode1 = await render(
+        <ReadInMemo />,
+        render === clientRenderOnBadMarkup
+          ? // On hydration mismatch we retry and therefore log the warning again.
+            2
+          : 1,
+      );
+      expect(domNode1.textContent).toEqual('42');
+
+      const domNode2 = await render(<ReadInReducer />, 1);
+      expect(domNode2.textContent).toEqual('42');
+    });
+  });
+
+  it('renders successfully after a component using hooks throws an error', () => {
+    function ThrowingComponent() {
+      const [value, dispatch] = useReducer((state, action) => {
+        return state + 1;
+      }, 0);
+
+      // throw an error if the count gets too high during the re-render phase
+      if (value >= 3) {
+        throw new Error('Error from ThrowingComponent');
+      } else {
+        // dispatch to trigger a re-render of the component
+        dispatch();
+      }
+
+      return <div>{value}</div>;
+    }
+
+    function NonThrowingComponent() {
+      const [count] = useState(0);
+      return <div>{count}</div>;
+    }
+
+    // First, render a component that will throw an error during a re-render triggered
+    // by a dispatch call.
+    expect(() => ReactDOMServer.renderToString(<ThrowingComponent />)).toThrow(
+      'Error from ThrowingComponent',
+    );
+
+    // Next, assert that we can render a function component using hooks immediately
+    // after an error occurred, which indictates the internal hooks state has been
+    // reset.
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(
+      <NonThrowingComponent />,
+    );
+    expect(container.children[0].textContent).toEqual('0');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
new file mode 100644
index 00000000000..7066aea04ba
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+// Set by `yarn test-fire`.
+const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+// TODO: Run this in React Fire mode after we figure out the SSR behavior.
+const desc = disableInputAttributeSyncing ? xdescribe : describe;
+desc('ReactDOMServerIntegrationInput', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('an input with a value and an onChange', async render => {
+    const e = await render(<input value="foo" onChange={() => {}} />);
+    expect(e.value).toBe('foo');
+  });
+
+  itRenders('an input with a bigint value and an onChange', async render => {
+    const e = await render(<input value={5n} onChange={() => {}} />);
+    expect(e.value).toBe('5');
+  });
+
+  itRenders('an input with a value and readOnly', async render => {
+    const e = await render(<input value="foo" readOnly={true} />);
+    expect(e.value).toBe('foo');
+  });
+
+  itRenders('an input with a value and no onChange/readOnly', async render => {
+    // this configuration should raise a dev warning that value without
+    // onChange or readOnly is a mistake.
+    const e = await render(<input value="foo" />, 1);
+    expect(e.value).toBe('foo');
+    expect(e.getAttribute('value')).toBe('foo');
+  });
+
+  itRenders('an input with a defaultValue', async render => {
+    const e = await render(<input defaultValue="foo" />);
+    expect(e.value).toBe('foo');
+    expect(e.getAttribute('value')).toBe('foo');
+    expect(e.getAttribute('defaultValue')).toBe(null);
+  });
+
+  itRenders('an input value overriding defaultValue', async render => {
+    const e = await render(
+      <input value="foo" defaultValue="bar" readOnly={true} />,
+      1,
+    );
+    expect(e.value).toBe('foo');
+    expect(e.getAttribute('value')).toBe('foo');
+    expect(e.getAttribute('defaultValue')).toBe(null);
+  });
+
+  itRenders(
+    'an input value overriding defaultValue no matter the prop order',
+    async render => {
+      const e = await render(
+        <input defaultValue="bar" value="foo" readOnly={true} />,
+        1,
+      );
+      expect(e.value).toBe('foo');
+      expect(e.getAttribute('value')).toBe('foo');
+      expect(e.getAttribute('defaultValue')).toBe(null);
+    },
+  );
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
new file mode 100644
index 00000000000..3fafff04170
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
@@ -0,0 +1,363 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let PropTypes;
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+let assertConsoleErrorDev;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  PropTypes = require('prop-types');
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+  assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {
+  resetModules,
+  itRenders,
+  itThrowsWhenRendering,
+  clientRenderOnBadMarkup,
+} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+  afterEach(() => {
+    // TODO: This is a hack because expectErrors does not restore mock,
+    // however fixing it requires a major refactor to all these tests.
+    if (console.error.mockClear) {
+      console.error.mockRestore();
+    }
+  });
+
+  describe('legacy context', function () {
+    // The `itRenders` test abstraction doesn't work with @gate so we have
+    // to do this instead.
+    if (gate(flags => flags.disableLegacyContext)) {
+      it('empty test to stop Jest from being a complainy complainer', () => {});
+      return;
+    }
+
+    let PurpleContext, RedContext;
+    beforeEach(() => {
+      class Parent extends React.Component {
+        getChildContext() {
+          return {text: this.props.text};
+        }
+        render() {
+          return this.props.children;
+        }
+      }
+      Parent.childContextTypes = {text: PropTypes.string};
+
+      PurpleContext = props => <Parent text="purple">{props.children}</Parent>;
+      RedContext = props => <Parent text="red">{props.children}</Parent>;
+    });
+
+    itRenders('class child with context', async render => {
+      class ClassChildWithContext extends React.Component {
+        render() {
+          return <div>{this.context.text}</div>;
+        }
+      }
+      ClassChildWithContext.contextTypes = {text: PropTypes.string};
+
+      const e = await render(
+        <PurpleContext>
+          <ClassChildWithContext />
+        </PurpleContext>,
+        2,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('stateless child with context', async render => {
+      if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+        return;
+      }
+      function FunctionChildWithContext(props, context) {
+        return <div>{context.text}</div>;
+      }
+      FunctionChildWithContext.contextTypes = {text: PropTypes.string};
+
+      const e = await render(
+        <PurpleContext>
+          <FunctionChildWithContext />
+        </PurpleContext>,
+        2,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('class child without context', async render => {
+      class ClassChildWithoutContext extends React.Component {
+        render() {
+          // this should render blank; context isn't passed to this component.
+          return <div>{this.context.text}</div>;
+        }
+      }
+
+      const e = await render(
+        <PurpleContext>
+          <ClassChildWithoutContext />
+        </PurpleContext>,
+        1,
+      );
+      expect(e.textContent).toBe('');
+    });
+
+    itRenders('stateless child without context', async render => {
+      if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+        return;
+      }
+      function FunctionChildWithoutContext(props, context) {
+        // this should render blank; context isn't passed to this component.
+        return <div>{context.text}</div>;
+      }
+
+      const e = await render(
+        <PurpleContext>
+          <FunctionChildWithoutContext />
+        </PurpleContext>,
+        1,
+      );
+      expect(e.textContent).toBe('');
+    });
+
+    itRenders('class child with wrong context', async render => {
+      class ClassChildWithWrongContext extends React.Component {
+        render() {
+          // this should render blank; context.text isn't passed to this component.
+          return <div id="classWrongChild">{this.context.text}</div>;
+        }
+      }
+      ClassChildWithWrongContext.contextTypes = {foo: PropTypes.string};
+
+      const e = await render(
+        <PurpleContext>
+          <ClassChildWithWrongContext />
+        </PurpleContext>,
+        2,
+      );
+      expect(e.textContent).toBe('');
+    });
+
+    itRenders('stateless child with wrong context', async render => {
+      if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+        return;
+      }
+      function FunctionChildWithWrongContext(props, context) {
+        // this should render blank; context.text isn't passed to this component.
+        return <div id="statelessWrongChild">{context.text}</div>;
+      }
+      FunctionChildWithWrongContext.contextTypes = {
+        foo: PropTypes.string,
+      };
+
+      const e = await render(
+        <PurpleContext>
+          <FunctionChildWithWrongContext />
+        </PurpleContext>,
+        2,
+      );
+      expect(e.textContent).toBe('');
+    });
+
+    itRenders('with context passed through to a grandchild', async render => {
+      if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+        return;
+      }
+      function Grandchild(props, context) {
+        return <div>{context.text}</div>;
+      }
+      Grandchild.contextTypes = {text: PropTypes.string};
+
+      const Child = props => <Grandchild />;
+
+      const e = await render(
+        <PurpleContext>
+          <Child />
+        </PurpleContext>,
+        2,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('a child context overriding a parent context', async render => {
+      if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+        return;
+      }
+      const Grandchild = (props, context) => {
+        return <div>{context.text}</div>;
+      };
+      Grandchild.contextTypes = {text: PropTypes.string};
+
+      const e = await render(
+        <PurpleContext>
+          <RedContext>
+            <Grandchild />
+          </RedContext>
+        </PurpleContext>,
+        2,
+      );
+      expect(e.textContent).toBe('red');
+    });
+
+    itRenders('a child context merged with a parent context', async render => {
+      if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+        return;
+      }
+      class Parent extends React.Component {
+        getChildContext() {
+          return {text1: 'purple'};
+        }
+        render() {
+          return <Child />;
+        }
+      }
+      Parent.childContextTypes = {text1: PropTypes.string};
+
+      class Child extends React.Component {
+        getChildContext() {
+          return {text2: 'red'};
+        }
+        render() {
+          return <Grandchild />;
+        }
+      }
+      Child.childContextTypes = {text2: PropTypes.string};
+
+      const Grandchild = (props, context) => {
+        return (
+          <div>
+            <div id="first">{context.text1}</div>
+            <div id="second">{context.text2}</div>
+          </div>
+        );
+      };
+      Grandchild.contextTypes = {
+        text1: PropTypes.string,
+        text2: PropTypes.string,
+      };
+
+      const e = await render(<Parent />, 3);
+      expect(e.querySelector('#first').textContent).toBe('purple');
+      expect(e.querySelector('#second').textContent).toBe('red');
+    });
+
+    itRenders(
+      'with a call to componentWillMount before getChildContext',
+      async render => {
+        if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+          return;
+        }
+        class WillMountContext extends React.Component {
+          getChildContext() {
+            return {text: this.state.text};
+          }
+          UNSAFE_componentWillMount() {
+            this.setState({text: 'foo'});
+          }
+          render() {
+            return <Child />;
+          }
+        }
+        WillMountContext.childContextTypes = {text: PropTypes.string};
+
+        const Child = (props, context) => {
+          return <div>{context.text}</div>;
+        };
+        Child.contextTypes = {text: PropTypes.string};
+
+        const e = await render(<WillMountContext />, 2);
+        expect(e.textContent).toBe('foo');
+      },
+    );
+
+    itRenders(
+      'if getChildContext exists but childContextTypes is missing with a warning',
+      async render => {
+        if (gate(flags => flags.disableLegacyContextForFunctionComponents)) {
+          return;
+        }
+        function HopefulChild(props, context) {
+          return context.foo || 'nope';
+        }
+        HopefulChild.contextTypes = {
+          foo: PropTypes.string,
+        };
+        class ForgetfulParent extends React.Component {
+          render() {
+            return <HopefulChild />;
+          }
+          getChildContext() {
+            return {foo: 'bar'};
+          }
+        }
+        const e = await render(
+          <ForgetfulParent />,
+          // Some warning is not de-duped and logged again on the client retry render.
+          render === clientRenderOnBadMarkup ? 3 : 2,
+        );
+        expect(e.textContent).toBe('nope');
+      },
+    );
+
+    itThrowsWhenRendering(
+      'if getChildContext returns a value not in childContextTypes',
+      render => {
+        class MyComponent extends React.Component {
+          render() {
+            return <div />;
+          }
+          getChildContext() {
+            return {value1: 'foo', value2: 'bar'};
+          }
+        }
+        MyComponent.childContextTypes = {value1: PropTypes.string};
+        return render(<MyComponent />);
+      },
+      'MyComponent.getChildContext(): key "value2" is not defined in childContextTypes.',
+    );
+
+    it('warns when childContextTypes is not defined', () => {
+      class MyComponent extends React.Component {
+        render() {
+          return <div />;
+        }
+        getChildContext() {
+          return {value1: 'foo', value2: 'bar'};
+        }
+      }
+
+      ReactDOMServer.renderToString(<MyComponent />);
+      assertConsoleErrorDev([
+        'MyComponent.getChildContext(): childContextTypes must be defined in order to use getChildContext().\n' +
+          '    in MyComponent (at **)',
+      ]);
+    });
+  });
+});
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 00000000000..2202c8bf86e
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactFeatureFlags;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.disableLegacyContext = true;
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+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;
+      }
+    }
+
+    const 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 => {
+    const 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>;
+      }
+    }
+
+    const 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
new file mode 100644
index 00000000000..5770bd1e20c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('React.StrictMode', () => {
+    itRenders('a strict mode with one child', async render => {
+      const e = await render(
+        <React.StrictMode>
+          <div>text1</div>
+        </React.StrictMode>,
+      );
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+    });
+
+    itRenders('a strict mode with several children', async render => {
+      const Header = props => {
+        return <p>header</p>;
+      };
+      const Footer = props => {
+        return (
+          <React.StrictMode>
+            <h2>footer</h2>
+            <h3>about</h3>
+          </React.StrictMode>
+        );
+      };
+      const e = await render(
+        <React.StrictMode>
+          <div>text1</div>
+          <span>text2</span>
+          <Header />
+          <Footer />
+        </React.StrictMode>,
+      );
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+      expect(parent.childNodes[3].tagName).toBe('H2');
+      expect(parent.childNodes[4].tagName).toBe('H3');
+    });
+
+    itRenders('a nested strict mode', async render => {
+      const e = await render(
+        <React.StrictMode>
+          <React.StrictMode>
+            <div>text1</div>
+          </React.StrictMode>
+          <span>text2</span>
+          <React.StrictMode>
+            <React.StrictMode>
+              <React.StrictMode>
+                {null}
+                <p />
+              </React.StrictMode>
+              {false}
+            </React.StrictMode>
+          </React.StrictMode>
+        </React.StrictMode>,
+      );
+      const parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+    });
+
+    itRenders('an empty strict mode', async render => {
+      expect(
+        (
+          await render(
+            <div>
+              <React.StrictMode />
+            </div>,
+          )
+        ).firstChild,
+      ).toBe(null);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
new file mode 100644
index 00000000000..213e4ed138c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -0,0 +1,345 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('context', function () {
+    let Context, PurpleContextProvider, RedContextProvider, Consumer;
+    beforeEach(() => {
+      Context = React.createContext('none');
+
+      class Parent extends React.Component {
+        render() {
+          return (
+            <Context.Provider value={this.props.text}>
+              {this.props.children}
+            </Context.Provider>
+          );
+        }
+      }
+      Consumer = Context.Consumer;
+      PurpleContextProvider = props => (
+        <Parent text="purple">{props.children}</Parent>
+      );
+      RedContextProvider = props => (
+        <Parent text="red">{props.children}</Parent>
+      );
+    });
+
+    itRenders('class child with context', async render => {
+      class ClassChildWithContext extends React.Component {
+        render() {
+          return (
+            <div>
+              <Consumer>{text => text}</Consumer>
+            </div>
+          );
+        }
+      }
+
+      const e = await render(
+        <PurpleContextProvider>
+          <ClassChildWithContext />
+        </PurpleContextProvider>,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('stateless child with context', async render => {
+      function FunctionChildWithContext(props) {
+        return <Consumer>{text => text}</Consumer>;
+      }
+
+      const e = await render(
+        <PurpleContextProvider>
+          <FunctionChildWithContext />
+        </PurpleContextProvider>,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('class child with default context', async render => {
+      class ClassChildWithWrongContext extends React.Component {
+        render() {
+          return (
+            <div id="classWrongChild">
+              <Consumer>{text => text}</Consumer>
+            </div>
+          );
+        }
+      }
+
+      const e = await render(<ClassChildWithWrongContext />);
+      expect(e.textContent).toBe('none');
+    });
+
+    itRenders('stateless child with wrong context', async render => {
+      function FunctionChildWithWrongContext(props) {
+        return (
+          <div id="statelessWrongChild">
+            <Consumer>{text => text}</Consumer>
+          </div>
+        );
+      }
+
+      const e = await render(<FunctionChildWithWrongContext />);
+      expect(e.textContent).toBe('none');
+    });
+
+    itRenders('with context passed through to a grandchild', async render => {
+      function Grandchild(props) {
+        return (
+          <div>
+            <Consumer>{text => text}</Consumer>
+          </div>
+        );
+      }
+
+      const Child = props => <Grandchild />;
+
+      const e = await render(
+        <PurpleContextProvider>
+          <Child />
+        </PurpleContextProvider>,
+      );
+      expect(e.textContent).toBe('purple');
+    });
+
+    itRenders('a child context overriding a parent context', async render => {
+      const Grandchild = props => {
+        return (
+          <div>
+            <Consumer>{text => text}</Consumer>
+          </div>
+        );
+      };
+
+      const e = await render(
+        <PurpleContextProvider>
+          <RedContextProvider>
+            <Grandchild />
+          </RedContextProvider>
+        </PurpleContextProvider>,
+      );
+      expect(e.textContent).toBe('red');
+    });
+
+    itRenders('readContext() in different components', async render => {
+      function readContext(Ctx) {
+        const dispatcher =
+          React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+            .H;
+        return dispatcher.readContext(Ctx);
+      }
+
+      class Cls extends React.Component {
+        render() {
+          return readContext(Context);
+        }
+      }
+      function Fn() {
+        return readContext(Context);
+      }
+      const Memo = React.memo(() => {
+        return readContext(Context);
+      });
+      const FwdRef = React.forwardRef((props, ref) => {
+        return readContext(Context);
+      });
+
+      const e = await render(
+        <PurpleContextProvider>
+          <RedContextProvider>
+            <span>
+              <Fn />
+              <Cls />
+              <Memo />
+              <FwdRef />
+              <Consumer>{() => readContext(Context)}</Consumer>
+            </span>
+          </RedContextProvider>
+        </PurpleContextProvider>,
+      );
+      expect(e.textContent).toBe('redredredredred');
+    });
+
+    itRenders('multiple contexts', async render => {
+      const Theme = React.createContext('dark');
+      const Language = React.createContext('french');
+      class Parent extends React.Component {
+        render() {
+          return (
+            <Theme.Provider value="light">
+              <Child />
+            </Theme.Provider>
+          );
+        }
+      }
+
+      function Child() {
+        return (
+          <Language.Provider value="english">
+            <Grandchild />
+          </Language.Provider>
+        );
+      }
+
+      const Grandchild = props => {
+        return (
+          <div>
+            <Theme.Consumer>
+              {theme => <div id="theme">{theme}</div>}
+            </Theme.Consumer>
+            <Language.Consumer>
+              {language => <div id="language">{language}</div>}
+            </Language.Consumer>
+          </div>
+        );
+      };
+
+      const e = await render(<Parent />);
+      expect(e.querySelector('#theme').textContent).toBe('light');
+      expect(e.querySelector('#language').textContent).toBe('english');
+    });
+
+    itRenders('nested context unwinding', async render => {
+      const Theme = React.createContext('dark');
+      const Language = React.createContext('french');
+
+      const App = () => (
+        <div>
+          <Theme.Provider value="light">
+            <Language.Provider value="english">
+              <Theme.Provider value="dark">
+                <Theme.Consumer>
+                  {theme => <div id="theme1">{theme}</div>}
+                </Theme.Consumer>
+              </Theme.Provider>
+              <Theme.Consumer>
+                {theme => <div id="theme2">{theme}</div>}
+              </Theme.Consumer>
+              <Language.Provider value="sanskrit">
+                <Theme.Provider value="blue">
+                  <Theme.Provider value="red">
+                    <Language.Consumer>
+                      {() => (
+                        <Language.Provider value="chinese">
+                          <Language.Provider value="hungarian" />
+                          <Language.Consumer>
+                            {language => <div id="language1">{language}</div>}
+                          </Language.Consumer>
+                        </Language.Provider>
+                      )}
+                    </Language.Consumer>
+                  </Theme.Provider>
+                  <Language.Consumer>
+                    {language => (
+                      <>
+                        <Theme.Consumer>
+                          {theme => <div id="theme3">{theme}</div>}
+                        </Theme.Consumer>
+                        <div id="language2">{language}</div>
+                      </>
+                    )}
+                  </Language.Consumer>
+                </Theme.Provider>
+              </Language.Provider>
+            </Language.Provider>
+          </Theme.Provider>
+          <Language.Consumer>
+            {language => <div id="language3">{language}</div>}
+          </Language.Consumer>
+        </div>
+      );
+      const e = await render(<App />);
+      expect(e.querySelector('#theme1').textContent).toBe('dark');
+      expect(e.querySelector('#theme2').textContent).toBe('light');
+      expect(e.querySelector('#theme3').textContent).toBe('blue');
+      expect(e.querySelector('#language1').textContent).toBe('chinese');
+      expect(e.querySelector('#language2').textContent).toBe('sanskrit');
+      expect(e.querySelector('#language3').textContent).toBe('french');
+    });
+
+    itRenders('should treat Context as Context.Provider', async render => {
+      const Theme = React.createContext('dark');
+      const Language = React.createContext('french');
+
+      expect(Theme.Provider).toBe(Theme);
+
+      const App = () => (
+        <div>
+          <Theme value="light">
+            <Language value="english">
+              <Theme value="dark">
+                <Theme.Consumer>
+                  {theme => <div id="theme1">{theme}</div>}
+                </Theme.Consumer>
+              </Theme>
+            </Language>
+          </Theme>
+        </div>
+      );
+
+      const e = await render(<App />, 0);
+      expect(e.textContent).toBe('dark');
+    });
+
+    it('does not pollute sync renders after an error', () => {
+      const LoggedInUser = React.createContext('default');
+      const Crash = () => {
+        throw new Error('Boo!');
+      };
+      const AppWithUser = user => (
+        <LoggedInUser.Provider value={user}>
+          <LoggedInUser.Consumer>{whoAmI => whoAmI}</LoggedInUser.Consumer>
+          <Crash />
+        </LoggedInUser.Provider>
+      );
+
+      expect(() => {
+        ReactDOMServer.renderToString(AppWithUser('Casper'));
+      }).toThrow('Boo');
+
+      // Should not report a value from failed render
+      expect(
+        ReactDOMServer.renderToString(
+          <LoggedInUser.Consumer>{whoAmI => whoAmI}</LoggedInUser.Consumer>,
+        ),
+      ).toBe('default');
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationObject-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationObject-test.js
new file mode 100644
index 00000000000..5e48134052b
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationObject-test.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegrationObject', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('an object with children', async render => {
+    const e = await render(
+      <object type="video/mp4" data="/example.webm" width={600} height={400}>
+        <div>preview</div>
+      </object>,
+    );
+
+    expect(e.outerHTML).toBe(
+      '<object type="video/mp4" data="/example.webm" width="600" height="400"><div>preview</div></object>',
+    );
+  });
+
+  itRenders('an object with empty data', async render => {
+    const e = await render(<object data="" />, 1);
+    expect(e.outerHTML).toBe('<object></object>');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
new file mode 100644
index 00000000000..3466b672589
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js
@@ -0,0 +1,454 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+
+describe('ReactDOMServerIntegration', () => {
+  function initModules() {
+    // Reset warning cache.
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+
+    // Make them available to the helpers.
+    return {
+      ReactDOMClient,
+      ReactDOMServer,
+    };
+  }
+
+  const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
+    ReactDOMServerIntegrationUtils(initModules);
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('reconnecting to server markup', function () {
+    let EmptyComponent;
+    beforeEach(() => {
+      EmptyComponent = class extends React.Component {
+        render() {
+          return null;
+        }
+      };
+    });
+
+    describe('elements', function () {
+      describe('reconnecting different component implementations', function () {
+        let ES6ClassComponent, PureComponent, bareElement;
+        beforeEach(() => {
+          // try each type of component on client and server.
+          ES6ClassComponent = class extends React.Component {
+            render() {
+              return <div id={this.props.id} />;
+            }
+          };
+          PureComponent = props => <div id={props.id} />;
+          bareElement = <div id="foobarbaz" />;
+        });
+
+        it('should reconnect ES6 Class to ES6 Class', () =>
+          expectMarkupMatch(
+            <ES6ClassComponent id="foobarbaz" />,
+            <ES6ClassComponent id="foobarbaz" />,
+          ));
+
+        it('should reconnect Pure Component to ES6 Class', () =>
+          expectMarkupMatch(
+            <ES6ClassComponent id="foobarbaz" />,
+            <PureComponent id="foobarbaz" />,
+          ));
+
+        it('should reconnect Bare Element to ES6 Class', () =>
+          expectMarkupMatch(<ES6ClassComponent id="foobarbaz" />, bareElement));
+
+        it('should reconnect ES6 Class to Pure Component', () =>
+          expectMarkupMatch(
+            <PureComponent id="foobarbaz" />,
+            <ES6ClassComponent id="foobarbaz" />,
+          ));
+
+        it('should reconnect Pure Component to Pure Component', () =>
+          expectMarkupMatch(
+            <PureComponent id="foobarbaz" />,
+            <PureComponent id="foobarbaz" />,
+          ));
+
+        it('should reconnect Bare Element to Pure Component', () =>
+          expectMarkupMatch(<PureComponent id="foobarbaz" />, bareElement));
+
+        it('should reconnect ES6 Class to Bare Element', () =>
+          expectMarkupMatch(bareElement, <ES6ClassComponent id="foobarbaz" />));
+
+        it('should reconnect Pure Component to Bare Element', () =>
+          expectMarkupMatch(bareElement, <PureComponent id="foobarbaz" />));
+
+        it('should reconnect Bare Element to Bare Element', () =>
+          expectMarkupMatch(bareElement, bareElement));
+      });
+
+      it('should error reconnecting different element types', () =>
+        expectMarkupMismatch(<div />, <span />));
+
+      it('should error reconnecting fewer root children', () =>
+        expectMarkupMismatch(<span key="a" />, [
+          <span key="a" />,
+          <span key="b" />,
+        ]));
+
+      it('should error reconnecting missing attributes', () =>
+        expectMarkupMismatch(<div id="foo" />, <div />));
+
+      it('should error reconnecting added attributes', () =>
+        expectMarkupMismatch(<div />, <div id="foo" />));
+
+      it('should error reconnecting different attribute values', () =>
+        expectMarkupMismatch(<div id="foo" />, <div id="bar" />));
+
+      it('should error reconnecting different element types of children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+          </div>,
+          <div suppressHydrationWarning={true}>
+            <span />
+          </div>,
+        ));
+
+      it('can explicitly ignore errors reconnecting missing attributes', () =>
+        expectMarkupMatch(
+          <div id="foo" />,
+          <div suppressHydrationWarning={true} />,
+        ));
+
+      it('can explicitly ignore errors reconnecting added attributes', () =>
+        expectMarkupMatch(
+          <div />,
+          <div id="foo" suppressHydrationWarning={true} />,
+        ));
+
+      it('can explicitly ignore errors reconnecting different attribute values', () =>
+        expectMarkupMatch(
+          <div id="foo" />,
+          <div id="bar" suppressHydrationWarning={true} />,
+        ));
+
+      it('can not deeply ignore errors reconnecting different attribute values', () =>
+        expectMarkupMismatch(
+          <div>
+            <div id="foo" />
+          </div>,
+          <div suppressHydrationWarning={true}>
+            <div id="bar" />
+          </div>,
+        ));
+    });
+
+    describe('inline styles', function () {
+      it('should error reconnecting missing style attribute', () =>
+        expectMarkupMismatch(<div style={{width: '1px'}} />, <div />));
+
+      it('should error reconnecting added style attribute', () =>
+        expectMarkupMismatch(<div />, <div style={{width: '1px'}} />));
+
+      it('should error reconnecting empty style attribute', () =>
+        expectMarkupMismatch(
+          <div style={{width: '1px'}} />,
+          <div style={{}} />,
+        ));
+
+      it('should error reconnecting added style values', () =>
+        expectMarkupMismatch(
+          <div style={{}} />,
+          <div style={{width: '1px'}} />,
+        ));
+
+      it('should error reconnecting different style values', () =>
+        expectMarkupMismatch(
+          <div style={{width: '1px'}} />,
+          <div style={{width: '2px'}} />,
+        ));
+
+      it('should reconnect number and string versions of a number', () =>
+        expectMarkupMatch(
+          <div style={{width: '1px', height: 2}} />,
+          <div style={{width: 1, height: '2px'}} />,
+        ));
+
+      it('should error reconnecting reordered style values', () =>
+        expectMarkupMismatch(
+          <div style={{width: '1px', fontSize: '2px'}} />,
+          <div style={{fontSize: '2px', width: '1px'}} />,
+        ));
+
+      it('can explicitly ignore errors reconnecting added style values', () =>
+        expectMarkupMatch(
+          <div style={{}} />,
+          <div style={{width: '1px'}} suppressHydrationWarning={true} />,
+        ));
+
+      it('can explicitly ignore reconnecting different style values', () =>
+        expectMarkupMatch(
+          <div style={{width: '1px'}} />,
+          <div style={{width: '2px'}} suppressHydrationWarning={true} />,
+        ));
+    });
+
+    describe('text nodes', function () {
+      it('should error reconnecting different text', () =>
+        expectMarkupMismatch(<div>Text</div>, <div>Other Text</div>));
+
+      it('should reconnect a div with a number and string version of number', () =>
+        expectMarkupMatch(<div>{2}</div>, <div>2</div>));
+
+      it('should error reconnecting different numbers', () =>
+        expectMarkupMismatch(<div>{2}</div>, <div>{3}</div>));
+
+      it('should error reconnecting different number from text', () =>
+        expectMarkupMismatch(<div>{2}</div>, <div>3</div>));
+
+      it('should error reconnecting different text in two code blocks', () =>
+        expectMarkupMismatch(
+          <div>
+            {'Text1'}
+            {'Text2'}
+          </div>,
+          <div>
+            {'Text1'}
+            {'Text3'}
+          </div>,
+        ));
+
+      it('can explicitly ignore reconnecting different text', () =>
+        expectMarkupMatch(
+          <div>Text</div>,
+          <div suppressHydrationWarning={true}>Other Text</div>,
+        ));
+
+      it('can explicitly ignore reconnecting different text in two code blocks', () =>
+        expectMarkupMatch(
+          <div suppressHydrationWarning={true}>
+            {'Text1'}
+            {'Text2'}
+          </div>,
+          <div suppressHydrationWarning={true}>
+            {'Text1'}
+            {'Text3'}
+          </div>,
+        ));
+    });
+
+    describe('element trees and children', function () {
+      it('should error reconnecting missing children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+          </div>,
+          <div />,
+        ));
+
+      it('should error reconnecting added children', () =>
+        expectMarkupMismatch(
+          <div />,
+          <div>
+            <div />
+          </div>,
+        ));
+
+      it('should error reconnecting more children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+          </div>,
+          <div>
+            <div />
+            <div />
+          </div>,
+        ));
+
+      it('should error reconnecting fewer children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+            <div />
+          </div>,
+          <div>
+            <div />
+          </div>,
+        ));
+
+      it('should error reconnecting reordered children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+            <span />
+          </div>,
+          <div>
+            <span />
+            <div />
+          </div>,
+        ));
+
+      it('should error reconnecting a div with children separated by whitespace on the client', () =>
+        expectMarkupMismatch(
+          <div id="parent">
+            <div id="child1" />
+            <div id="child2" />
+          </div>,
+          // prettier-ignore
+          <div id="parent"><div id="child1" />      <div id="child2" /></div>,
+        ));
+
+      it('should error reconnecting a div with children separated by different whitespace on the server', () =>
+        expectMarkupMismatch(
+          // prettier-ignore
+          <div id="parent"><div id="child1" />      <div id="child2" /></div>,
+          <div id="parent">
+            <div id="child1" />
+            <div id="child2" />
+          </div>,
+        ));
+
+      it('should error reconnecting a div with children separated by different whitespace', () =>
+        expectMarkupMismatch(
+          <div id="parent">
+            <div id="child1" /> <div id="child2" />
+          </div>,
+          // prettier-ignore
+          <div id="parent"><div id="child1" />      <div id="child2" /></div>,
+        ));
+
+      it('can distinguish an empty component from a dom node', () =>
+        expectMarkupMismatch(
+          <div>
+            <span />
+          </div>,
+          <div>
+            <EmptyComponent />
+          </div>,
+        ));
+
+      it('can distinguish an empty component from an empty text component', () =>
+        expectMarkupMatch(
+          <div>
+            <EmptyComponent />
+          </div>,
+          <div>{''}</div>,
+        ));
+
+      it('can not ignore reconnecting more children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+          </div>,
+          <div suppressHydrationWarning={true}>
+            <div />
+            <div />
+          </div>,
+        ));
+
+      it('can not ignore reconnecting fewer children', () =>
+        expectMarkupMismatch(
+          <div>
+            <div />
+            <div />
+          </div>,
+          <div suppressHydrationWarning={true}>
+            <div />
+          </div>,
+        ));
+
+      it('can not ignore reconnecting reordered children', () =>
+        expectMarkupMismatch(
+          <div suppressHydrationWarning={true}>
+            <div />
+            <span />
+          </div>,
+          <div suppressHydrationWarning={true}>
+            <span />
+            <div />
+          </div>,
+        ));
+
+      it('can not deeply ignore reconnecting reordered children', () =>
+        expectMarkupMismatch(
+          <div suppressHydrationWarning={true}>
+            <div>
+              <div />
+              <span />
+            </div>
+          </div>,
+          <div suppressHydrationWarning={true}>
+            <div>
+              <span />
+              <div />
+            </div>
+          </div>,
+        ));
+    });
+
+    // Markup Mismatches: misc
+    it('should error reconnecting a div with different dangerouslySetInnerHTML', () =>
+      expectMarkupMismatch(
+        <div dangerouslySetInnerHTML={{__html: "<span id='child1'/>"}} />,
+        <div dangerouslySetInnerHTML={{__html: "<span id='child2'/>"}} />,
+      ));
+
+    it('should error reconnecting a div with different text dangerouslySetInnerHTML', () =>
+      expectMarkupMismatch(
+        <div dangerouslySetInnerHTML={{__html: 'foo'}} />,
+        <div dangerouslySetInnerHTML={{__html: 'bar'}} />,
+      ));
+
+    it('should error reconnecting a div with different number dangerouslySetInnerHTML', () =>
+      expectMarkupMismatch(
+        <div dangerouslySetInnerHTML={{__html: 10}} />,
+        <div dangerouslySetInnerHTML={{__html: 20}} />,
+      ));
+
+    it('should error reconnecting a div with different object dangerouslySetInnerHTML', () =>
+      expectMarkupMismatch(
+        <div
+          dangerouslySetInnerHTML={{
+            __html: {
+              toString() {
+                return 'hi';
+              },
+            },
+          }}
+        />,
+        <div
+          dangerouslySetInnerHTML={{
+            __html: {
+              toString() {
+                return 'bye';
+              },
+            },
+          }}
+        />,
+      ));
+
+    it('can explicitly ignore reconnecting a div with different dangerouslySetInnerHTML', () =>
+      expectMarkupMatch(
+        <div dangerouslySetInnerHTML={{__html: "<span id='child1'/>"}} />,
+        <div
+          dangerouslySetInnerHTML={{__html: "<span id='child2'/>"}}
+          suppressHydrationWarning={true}
+        />,
+      ));
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
new file mode 100644
index 00000000000..9094af34847
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, clientRenderOnServerString, expectMarkupMatch} =
+  ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  describe('refs', function () {
+    it('should not run ref code on server', async () => {
+      let refCount = 0;
+      class RefsComponent extends React.Component {
+        render() {
+          return <div ref={e => refCount++} />;
+        }
+      }
+      await expectMarkupMatch(<RefsComponent />, <div />);
+      expect(refCount).toBe(0);
+    });
+
+    it('should run ref code on client', async () => {
+      let refCount = 0;
+      class RefsComponent extends React.Component {
+        render() {
+          return <div ref={e => refCount++} />;
+        }
+      }
+      await expectMarkupMatch(<div />, <RefsComponent />);
+      expect(refCount).toBe(1);
+    });
+
+    it('should send the correct element to ref functions on client', async () => {
+      let refElement = null;
+      class RefsComponent extends React.Component {
+        render() {
+          return <div ref={e => (refElement = e)} />;
+        }
+      }
+      const e = await clientRenderOnServerString(<RefsComponent />);
+      expect(refElement).not.toBe(null);
+      expect(refElement).toBe(e);
+    });
+  });
+
+  it('should forward refs', async () => {
+    const divRef = React.createRef();
+
+    class InnerComponent extends React.Component {
+      render() {
+        return <div ref={this.props.forwardedRef}>{this.props.value}</div>;
+      }
+    }
+
+    const OuterComponent = React.forwardRef((props, ref) => (
+      <InnerComponent {...props} forwardedRef={ref} />
+    ));
+
+    await clientRenderOnServerString(
+      <OuterComponent ref={divRef} value="hello" />,
+    );
+
+    expect(divRef.current).not.toBe(null);
+    expect(divRef.current.textContent).toBe('hello');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
new file mode 100644
index 00000000000..664914a4366
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -0,0 +1,274 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders, itThrowsWhenRendering} =
+  ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegrationSelect', () => {
+  let options;
+  beforeEach(() => {
+    resetModules();
+
+    options = [
+      <option key={1} value="foo" id="foo">
+        Foo
+      </option>,
+      <option key={2} value="bar" id="bar">
+        Bar
+      </option>,
+      <option key={3} value="baz" id="baz">
+        Baz
+      </option>,
+    ];
+  });
+
+  // a helper function to test the selected value of a <select> element.
+  // takes in a <select> DOM element (element) and a value or array of
+  // values that should be selected (selected).
+  const expectSelectValue = (element, selected) => {
+    if (!Array.isArray(selected)) {
+      selected = [selected];
+    }
+    // the select DOM element shouldn't ever have a value or defaultValue
+    // attribute; that is not how select values are expressed in the DOM.
+    expect(element.getAttribute('value')).toBe(null);
+    expect(element.getAttribute('defaultValue')).toBe(null);
+
+    ['foo', 'bar', 'baz'].forEach(value => {
+      const expectedValue = selected.indexOf(value) !== -1;
+      const option = element.querySelector(`#${value}`);
+      expect(option.selected).toBe(expectedValue);
+    });
+  };
+
+  itRenders('a select with a value and an onChange', async render => {
+    const e = await render(
+      <select value="bar" onChange={() => {}}>
+        {options}
+      </select>,
+    );
+    expectSelectValue(e, 'bar');
+  });
+
+  itRenders('a select with a value and readOnly', async render => {
+    const e = await render(
+      <select value="bar" readOnly={true}>
+        {options}
+      </select>,
+    );
+    expectSelectValue(e, 'bar');
+  });
+
+  itRenders('a select with a multiple values and an onChange', async render => {
+    const e = await render(
+      <select value={['bar', 'baz']} multiple={true} onChange={() => {}}>
+        {options}
+      </select>,
+    );
+    expectSelectValue(e, ['bar', 'baz']);
+  });
+
+  itRenders('a select with a multiple values and readOnly', async render => {
+    const e = await render(
+      <select value={['bar', 'baz']} multiple={true} readOnly={true}>
+        {options}
+      </select>,
+    );
+    expectSelectValue(e, ['bar', 'baz']);
+  });
+
+  itRenders('a select with a value and no onChange/readOnly', async render => {
+    // this configuration should raise a dev warning that value without
+    // onChange or readOnly is a mistake.
+    const e = await render(<select value="bar">{options}</select>, 1);
+    expectSelectValue(e, 'bar');
+  });
+
+  itRenders('a select with a defaultValue', async render => {
+    const e = await render(<select defaultValue="bar">{options}</select>);
+    expectSelectValue(e, 'bar');
+  });
+
+  itRenders('a select value overriding defaultValue', async render => {
+    const e = await render(
+      <select value="bar" defaultValue="baz" readOnly={true}>
+        {options}
+      </select>,
+      1,
+    );
+    expectSelectValue(e, 'bar');
+  });
+
+  itRenders(
+    'a select with options that use dangerouslySetInnerHTML',
+    async render => {
+      const e = await render(
+        <select defaultValue="baz" value="bar" readOnly={true}>
+          <option
+            id="foo"
+            value="foo"
+            dangerouslySetInnerHTML={{
+              __html: 'Foo',
+            }}>
+            {undefined}
+          </option>
+          <option
+            id="bar"
+            value="bar"
+            dangerouslySetInnerHTML={{
+              __html: 'Bar',
+            }}>
+            {null}
+          </option>
+          <option
+            id="baz"
+            dangerouslySetInnerHTML={{
+              __html: 'Baz', // This warns because no value prop is passed.
+            }}
+          />
+        </select>,
+        2,
+      );
+      expectSelectValue(e, 'bar');
+    },
+  );
+
+  itThrowsWhenRendering(
+    'a select with option that uses dangerouslySetInnerHTML and 0 as child',
+    async render => {
+      await render(
+        <select defaultValue="baz" value="foo" readOnly={true}>
+          <option
+            id="foo"
+            value="foo"
+            dangerouslySetInnerHTML={{
+              __html: 'Foo',
+            }}>
+            {0}
+          </option>
+        </select>,
+        1,
+      );
+    },
+    'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+  );
+
+  itThrowsWhenRendering(
+    'a select with option that uses dangerouslySetInnerHTML and empty string as child',
+    async render => {
+      await render(
+        <select defaultValue="baz" value="foo" readOnly={true}>
+          <option
+            id="foo"
+            value="foo"
+            dangerouslySetInnerHTML={{
+              __html: 'Foo',
+            }}>
+            {''}
+          </option>
+        </select>,
+        1,
+      );
+    },
+    'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+  );
+
+  itRenders(
+    'a select value overriding defaultValue no matter the prop order',
+    async render => {
+      const e = await render(
+        <select defaultValue="baz" value="bar" readOnly={true}>
+          {options}
+        </select>,
+        1,
+      );
+      expectSelectValue(e, 'bar');
+    },
+  );
+
+  itRenders('a select option with flattened children', async render => {
+    const e = await render(
+      <select value="bar" readOnly={true}>
+        <option value="bar">
+          A {'B'} {5n}
+        </option>
+      </select>,
+    );
+    const option = e.options[0];
+    expect(option.textContent).toBe('A B 5');
+    expect(option.value).toBe('bar');
+    expect(option.selected).toBe(true);
+  });
+
+  itRenders(
+    'a select option with flattened children no value',
+    async render => {
+      const e = await render(
+        <select value="A B" readOnly={true}>
+          <option>A {'B'}</option>
+        </select>,
+      );
+      const option = e.options[0];
+      expect(option.textContent).toBe('A B');
+      expect(option.value).toBe('A B');
+      expect(option.selected).toBe(true);
+    },
+  );
+
+  itRenders(
+    'a boolean true select value match the string "true"',
+    async render => {
+      const e = await render(
+        <select value={true} readOnly={true}>
+          <option value="first">First</option>
+          <option value="true">True</option>
+        </select>,
+      );
+      expect(e.firstChild.selected).toBe(false);
+      expect(e.lastChild.selected).toBe(true);
+    },
+  );
+
+  itRenders(
+    'a missing select value does not match the string "undefined"',
+    async render => {
+      const e = await render(
+        <select readOnly={true}>
+          <option value="first">First</option>
+          <option value="undefined">Undefined</option>
+        </select>,
+      );
+      expect(e.firstChild.selected).toBe(true);
+      expect(e.lastChild.selected).toBe(false);
+    },
+  );
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
new file mode 100644
index 00000000000..d86fd2fe2c9
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+let forwardRef;
+let memo;
+let yieldedValues;
+let log;
+let clearLog;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+  forwardRef = React.forwardRef;
+  memo = React.memo;
+
+  yieldedValues = [];
+  log = value => {
+    yieldedValues.push(value);
+  };
+  clearLog = () => {
+    const ret = yieldedValues;
+    yieldedValues = [];
+    return ret;
+  };
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('a forwardedRef component and its children', async render => {
+    const FunctionComponent = ({label, forwardedRef}) => (
+      <div ref={forwardedRef}>{label}</div>
+    );
+    const WrappedFunctionComponent = forwardRef((props, ref) => (
+      <FunctionComponent {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+    const element = await render(
+      <WrappedFunctionComponent ref={ref} label="Test" />,
+    );
+    const parent = element.parentNode;
+    const div = parent.childNodes[0];
+    expect(div.tagName).toBe('DIV');
+    expect(div.textContent).toBe('Test');
+  });
+
+  itRenders('a Profiler component and its children', async render => {
+    const element = await render(
+      <React.Profiler id="profiler" onRender={jest.fn()}>
+        <div>Test</div>
+      </React.Profiler>,
+    );
+    const parent = element.parentNode;
+    const div = parent.childNodes[0];
+    expect(div.tagName).toBe('DIV');
+    expect(div.textContent).toBe('Test');
+  });
+
+  describe('memoized function components', () => {
+    beforeEach(() => {
+      resetModules();
+    });
+
+    function Text({text}) {
+      log(text);
+      return <span>{text}</span>;
+    }
+
+    function Counter({count}) {
+      return <Text text={'Count: ' + count} />;
+    }
+
+    itRenders('basic render', async render => {
+      const MemoCounter = memo(Counter);
+      const domNode = await render(<MemoCounter count={0} />);
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+
+    itRenders('composition with forwardRef', async render => {
+      const RefCounter = (props, ref) => <Counter count={ref.current} />;
+      const MemoRefCounter = memo(forwardRef(RefCounter));
+
+      const ref = React.createRef();
+      ref.current = 0;
+      await render(<MemoRefCounter ref={ref} />);
+
+      expect(clearLog()).toEqual(['Count: 0']);
+    });
+
+    itRenders('with comparator', async render => {
+      const MemoCounter = memo(Counter, (oldProps, newProps) => false);
+      await render(<MemoCounter count={0} />);
+      expect(clearLog()).toEqual(['Count: 0']);
+    });
+
+    itRenders(
+      'comparator functions are not invoked on the server',
+      async render => {
+        const MemoCounter = React.memo(Counter, (oldProps, newProps) => {
+          log(`Old count: ${oldProps.count}, New count: ${newProps.count}`);
+          return oldProps.count === newProps.count;
+        });
+
+        await render(<MemoCounter count={0} />);
+        expect(clearLog()).toEqual(['Count: 0']);
+      },
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
new file mode 100644
index 00000000000..9ce04840dbb
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegrationTextarea', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  // textareas
+  // ---------
+  itRenders('a textarea with a value and an onChange', async render => {
+    const e = await render(<textarea value="foo" onChange={() => {}} />);
+    // textarea DOM elements don't have a value **attribute**, the text is
+    // a child of the element and accessible via the .value **property**.
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.value).toBe('foo');
+  });
+
+  itRenders('a textarea with a bigint value and an onChange', async render => {
+    const e = await render(<textarea value={5n} onChange={() => {}} />);
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.value).toBe('5');
+  });
+
+  itRenders('a textarea with a value of undefined', async render => {
+    const e = await render(<textarea value={undefined} />);
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.value).toBe('');
+  });
+  itRenders('a textarea with a value and readOnly', async render => {
+    const e = await render(<textarea value="foo" readOnly={true} />);
+    // textarea DOM elements don't have a value **attribute**, the text is
+    // a child of the element and accessible via the .value **property**.
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.value).toBe('foo');
+  });
+
+  itRenders(
+    'a textarea with a value and no onChange/readOnly',
+    async render => {
+      // this configuration should raise a dev warning that value without
+      // onChange or readOnly is a mistake.
+      const e = await render(<textarea value="foo" />, 1);
+      expect(e.getAttribute('value')).toBe(null);
+      expect(e.value).toBe('foo');
+    },
+  );
+
+  itRenders('a textarea with a defaultValue', async render => {
+    const e = await render(<textarea defaultValue="foo" />);
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.getAttribute('defaultValue')).toBe(null);
+    expect(e.value).toBe('foo');
+  });
+
+  itRenders('a textarea value overriding defaultValue', async render => {
+    const e = await render(
+      <textarea value="foo" defaultValue="bar" readOnly={true} />,
+      1,
+    );
+    expect(e.getAttribute('value')).toBe(null);
+    expect(e.getAttribute('defaultValue')).toBe(null);
+    expect(e.value).toBe('foo');
+  });
+
+  itRenders(
+    'a textarea value overriding defaultValue no matter the prop order',
+    async render => {
+      const e = await render(
+        <textarea defaultValue="bar" value="foo" readOnly={true} />,
+        1,
+      );
+      expect(e.getAttribute('value')).toBe(null);
+      expect(e.getAttribute('defaultValue')).toBe(null);
+      expect(e.value).toBe('foo');
+    },
+  );
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js
new file mode 100644
index 00000000000..8664904130c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+/* eslint-disable no-script-url */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+let act;
+
+const EXPECTED_SAFE_URL =
+  "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')";
+
+describe('ReactDOMServerIntegration - Untrusted URLs', () => {
+  function initModules() {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+
+    // Make them available to the helpers.
+    return {
+      ReactDOMClient,
+      ReactDOMServer,
+    };
+  }
+
+  const {
+    resetModules,
+    itRenders,
+    clientCleanRender,
+    clientRenderOnBadMarkup,
+    clientRenderOnServerString,
+  } = ReactDOMServerIntegrationUtils(initModules);
+
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('a http link with the word javascript in it', async render => {
+    const e = await render(
+      <a href="http://javascript:0/thisisfine">Click me</a>,
+    );
+    expect(e.tagName).toBe('A');
+    expect(e.href).toBe('http://javascript:0/thisisfine');
+  });
+
+  itRenders('a javascript protocol href', async render => {
+    // Only the first one warns. The second warning is deduped.
+    const e = await render(
+      <div>
+        <a href="javascript:notfine">p0wned</a>
+        <a href="javascript:notfineagain">p0wned again</a>
+      </div>,
+    );
+    expect(e.firstChild.href).toBe(EXPECTED_SAFE_URL);
+    expect(e.lastChild.href).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('sanitizes on various tags', async render => {
+    const aElement = await render(<a href="javascript:notfine" />);
+    expect(aElement.href).toBe(EXPECTED_SAFE_URL);
+
+    const objectElement = await render(<object data="javascript:notfine" />);
+    expect(objectElement.data).toBe(EXPECTED_SAFE_URL);
+
+    const embedElement = await render(<embed src="javascript:notfine" />);
+    expect(embedElement.src).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('passes through data on non-object tags', async render => {
+    const div = await render(<div data="test" />);
+    expect(div.getAttribute('data')).toBe('test');
+
+    const a = await render(<a data="javascript:fine" />);
+    expect(a.getAttribute('data')).toBe('javascript:fine');
+  });
+
+  itRenders('a javascript protocol with leading spaces', async render => {
+    const e = await render(
+      <a href={'  \t \u0000\u001F\u0003javascript\n: notfine'}>p0wned</a>,
+    );
+    // We use an approximate comparison here because JSDOM might not parse
+    // \u0000 in HTML properly.
+    expect(e.href).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders(
+    'a javascript protocol with intermediate new lines and mixed casing',
+    async render => {
+      const e = await render(
+        <a href={'\t\r\n Jav\rasCr\r\niP\t\n\rt\n:notfine'}>p0wned</a>,
+      );
+      expect(e.href).toBe(EXPECTED_SAFE_URL);
+    },
+  );
+
+  itRenders('a javascript protocol area href', async render => {
+    const e = await render(
+      <map>
+        <area href="javascript:notfine" />
+      </map>,
+    );
+    expect(e.firstChild.href).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('a javascript protocol form action', async render => {
+    const e = await render(<form action="javascript:notfine">p0wned</form>);
+    expect(e.action).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('a javascript protocol input formAction', async render => {
+    const e = await render(
+      <input type="submit" formAction="javascript:notfine" />,
+    );
+    expect(e.getAttribute('formAction')).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('a javascript protocol button formAction', async render => {
+    const e = await render(
+      <button formAction="javascript:notfine">p0wned</button>,
+    );
+    expect(e.getAttribute('formAction')).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('a javascript protocol iframe src', async render => {
+    const e = await render(<iframe src="javascript:notfine" />);
+    expect(e.src).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('a javascript protocol frame src', async render => {
+    if (render === clientCleanRender || render === clientRenderOnServerString) {
+      // React does not hydrate framesets properly because the default hydration scope
+      // is the body
+      return;
+    }
+    const e = await render(
+      <html>
+        <head />
+        <frameset>
+          <frame src="javascript:notfine" />
+        </frameset>
+      </html>,
+    );
+    expect(e.lastChild.firstChild.src).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('a javascript protocol in an SVG link', async render => {
+    const e = await render(
+      <svg>
+        <a href="javascript:notfine" />
+      </svg>,
+    );
+    expect(e.firstChild.getAttribute('href')).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders(
+    'a javascript protocol in an SVG link with a namespace',
+    async render => {
+      const e = await render(
+        <svg>
+          <a xlinkHref="javascript:notfine" />
+        </svg>,
+      );
+      expect(
+        e.firstChild.getAttributeNS('http://www.w3.org/1999/xlink', 'href'),
+      ).toBe(EXPECTED_SAFE_URL);
+    },
+  );
+
+  it('rejects a javascript protocol href if it is added during an update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<a href="http://thisisfine/">click me</a>);
+    });
+    expect(container.firstChild.href).toBe('http://thisisfine/');
+    await act(() => {
+      root.render(<a href="javascript:notfine">click me</a>);
+    });
+    expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
+  });
+
+  itRenders('only the first invocation of toString', async render => {
+    let expectedToStringCalls = 1;
+    if (render === clientRenderOnBadMarkup) {
+      // It gets called once on the server and once on the client
+      // which happens to share the same object in our test runner.
+      expectedToStringCalls = 2;
+    }
+    if (render === clientRenderOnServerString && __DEV__) {
+      // The hydration validation calls it one extra time.
+      // TODO: It would be good if we only called toString once for
+      // consistency but the code structure makes that hard right now.
+      expectedToStringCalls = 4;
+    } else if (__DEV__) {
+      // Checking for string coercion problems results in double the
+      // toString calls in DEV
+      expectedToStringCalls *= 2;
+    }
+
+    let toStringCalls = 0;
+    const firstIsSafe = {
+      toString() {
+        // This tries to avoid the validation by pretending to be safe
+        // the first times it is called and then becomes dangerous.
+        toStringCalls++;
+        if (toStringCalls <= expectedToStringCalls) {
+          return 'https://reactjs.org/';
+        }
+        return 'javascript:notfine';
+      },
+    };
+
+    const e = await render(<a href={firstIsSafe} />);
+    expect(toStringCalls).toBe(expectedToStringCalls);
+    expect(e.href).toBe('https://reactjs.org/');
+  });
+
+  it('rejects a javascript protocol href if it is added during an update twice', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<a href="http://thisisfine/">click me</a>);
+    });
+    expect(container.firstChild.href).toBe('http://thisisfine/');
+    await act(async () => {
+      root.render(<a href="javascript:notfine">click me</a>);
+    });
+    expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
+    // The second update ensures that a global flag hasn't been added to the regex
+    // which would fail to match the second time it is called.
+    await act(async () => {
+      root.render(<a href="javascript:notfine">click me</a>);
+    });
+    expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
new file mode 100644
index 00000000000..70109949baf
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js
@@ -0,0 +1,444 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itClientRenders, renderIntoDom, serverRender} =
+  ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegrationUserInteraction', () => {
+  let ControlledInput, ControlledTextArea, ControlledCheckbox, ControlledSelect;
+
+  beforeEach(() => {
+    resetModules();
+    ControlledInput = class extends React.Component {
+      static defaultProps = {
+        type: 'text',
+        initialValue: 'Hello',
+      };
+      constructor() {
+        super(...arguments);
+        this.state = {value: this.props.initialValue};
+      }
+      handleChange(event) {
+        if (this.props.onChange) {
+          this.props.onChange(event);
+        }
+        this.setState({value: event.target.value});
+      }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the input.
+          this.setState({cascade: true});
+        }
+      }
+      render() {
+        return (
+          <input
+            type={this.props.type}
+            value={this.state.value}
+            onChange={this.handleChange.bind(this)}
+          />
+        );
+      }
+    };
+    ControlledTextArea = class extends React.Component {
+      constructor() {
+        super();
+        this.state = {value: 'Hello'};
+      }
+      handleChange(event) {
+        if (this.props.onChange) {
+          this.props.onChange(event);
+        }
+        this.setState({value: event.target.value});
+      }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the textarea.
+          this.setState({cascade: true});
+        }
+      }
+      render() {
+        return (
+          <textarea
+            value={this.state.value}
+            onChange={this.handleChange.bind(this)}
+          />
+        );
+      }
+    };
+    ControlledCheckbox = class extends React.Component {
+      constructor() {
+        super();
+        this.state = {value: true};
+      }
+      handleChange(event) {
+        if (this.props.onChange) {
+          this.props.onChange(event);
+        }
+        this.setState({value: event.target.checked});
+      }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the checkbox.
+          this.setState({cascade: true});
+        }
+      }
+      render() {
+        return (
+          <input
+            type="checkbox"
+            checked={this.state.value}
+            onChange={this.handleChange.bind(this)}
+          />
+        );
+      }
+    };
+    ControlledSelect = class extends React.Component {
+      constructor() {
+        super();
+        this.state = {value: 'Hello'};
+      }
+      handleChange(event) {
+        if (this.props.onChange) {
+          this.props.onChange(event);
+        }
+        this.setState({value: event.target.value});
+      }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the select.
+          this.setState({cascade: true});
+        }
+      }
+      render() {
+        return (
+          <select
+            value={this.state.value}
+            onChange={this.handleChange.bind(this)}>
+            <option key="1" value="Hello">
+              Hello
+            </option>
+            <option key="2" value="Goodbye">
+              Goodbye
+            </option>
+          </select>
+        );
+      }
+    };
+  });
+
+  describe('user interaction with controlled inputs', function () {
+    itClientRenders('a controlled text input', async render => {
+      const setUntrackedValue = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      ).set;
+
+      let changeCount = 0;
+      const e = await render(
+        <ControlledInput onChange={() => changeCount++} />,
+      );
+      const container = e.parentNode;
+      document.body.appendChild(container);
+
+      try {
+        expect(changeCount).toBe(0);
+        expect(e.value).toBe('Hello');
+
+        // simulate a user typing.
+        setUntrackedValue.call(e, 'Goodbye');
+        e.dispatchEvent(new Event('input', {bubbles: true, cancelable: false}));
+
+        expect(changeCount).toBe(1);
+        expect(e.value).toBe('Goodbye');
+      } finally {
+        document.body.removeChild(container);
+      }
+    });
+
+    itClientRenders('a controlled textarea', async render => {
+      const setUntrackedValue = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        'value',
+      ).set;
+
+      let changeCount = 0;
+      const e = await render(
+        <ControlledTextArea onChange={() => changeCount++} />,
+      );
+      const container = e.parentNode;
+      document.body.appendChild(container);
+
+      try {
+        expect(changeCount).toBe(0);
+        expect(e.value).toBe('Hello');
+
+        // simulate a user typing.
+        setUntrackedValue.call(e, 'Goodbye');
+        e.dispatchEvent(new Event('input', {bubbles: true, cancelable: false}));
+
+        expect(changeCount).toBe(1);
+        expect(e.value).toBe('Goodbye');
+      } finally {
+        document.body.removeChild(container);
+      }
+    });
+
+    itClientRenders('a controlled checkbox', async render => {
+      let changeCount = 0;
+      const e = await render(
+        <ControlledCheckbox onChange={() => changeCount++} />,
+      );
+      const container = e.parentNode;
+      document.body.appendChild(container);
+
+      try {
+        expect(changeCount).toBe(0);
+        expect(e.checked).toBe(true);
+
+        // simulate a user clicking.
+        e.click();
+
+        expect(changeCount).toBe(1);
+        expect(e.checked).toBe(false);
+      } finally {
+        document.body.removeChild(container);
+      }
+    });
+
+    itClientRenders('a controlled select', async render => {
+      const setUntrackedValue = Object.getOwnPropertyDescriptor(
+        HTMLSelectElement.prototype,
+        'value',
+      ).set;
+
+      let changeCount = 0;
+      const e = await render(
+        <ControlledSelect onChange={() => changeCount++} />,
+      );
+      const container = e.parentNode;
+      document.body.appendChild(container);
+
+      try {
+        expect(changeCount).toBe(0);
+        expect(e.value).toBe('Hello');
+
+        // simulate a user typing.
+        setUntrackedValue.call(e, 'Goodbye');
+        e.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: false}),
+        );
+
+        expect(changeCount).toBe(1);
+        expect(e.value).toBe('Goodbye');
+      } finally {
+        document.body.removeChild(container);
+      }
+    });
+  });
+
+  describe('user interaction with inputs before client render', function () {
+    // renders the element and changes the value **before** the client
+    // code has a chance to render; this simulates what happens when a
+    // user starts to interact with a server-rendered form before
+    // ReactDOM.render is called. the client render should NOT blow away
+    // the changes the user has made.
+    const testUserInteractionBeforeClientRender = async (
+      element,
+      initialValue = 'Hello',
+      changedValue = 'Goodbye',
+      valueKey = 'value',
+    ) => {
+      const field = await serverRender(element);
+      expect(field[valueKey]).toBe(initialValue);
+
+      // simulate a user typing in the field **before** client-side reconnect happens.
+      field[valueKey] = changedValue;
+
+      resetModules();
+      // client render on top of the server markup.
+      const clientField = await renderIntoDom(element, field.parentNode, true);
+      // verify that the input field was not replaced.
+      // Note that we cannot use expect(clientField).toBe(field) because
+      // of jest bug #1772
+      expect(clientField === field).toBe(true);
+      // confirm that the client render has not changed what the user typed.
+      expect(clientField[valueKey]).toBe(changedValue);
+    };
+
+    it('should not blow away user-entered text on successful reconnect to an uncontrolled input', () =>
+      testUserInteractionBeforeClientRender(<input defaultValue="Hello" />));
+
+    it('should not blow away user-entered text on successful reconnect to a controlled input', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledInput onChange={() => changeCount++} />,
+      );
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
+    });
+
+    it('should not blow away user-interaction on successful reconnect to an uncontrolled range input', () =>
+      testUserInteractionBeforeClientRender(
+        <input type="text" defaultValue="0.5" />,
+        '0.5',
+        '1',
+      ));
+
+    it('should not blow away user-interaction on successful reconnect to a controlled range input', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledInput
+          type="range"
+          initialValue="0.25"
+          onChange={() => changeCount++}
+        />,
+        '0.25',
+        '1',
+      );
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
+    });
+
+    it('should not blow away user-entered text on successful reconnect to an uncontrolled checkbox', () =>
+      testUserInteractionBeforeClientRender(
+        <input type="checkbox" defaultChecked={true} />,
+        true,
+        false,
+        'checked',
+      ));
+
+    it('should not blow away user-entered text on successful reconnect to a controlled checkbox', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledCheckbox onChange={() => changeCount++} />,
+        true,
+        false,
+        'checked',
+      );
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text on successful reconnect to an uncontrolled textarea', () =>
+      testUserInteractionBeforeClientRender(<textarea defaultValue="Hello" />));
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text on successful reconnect to a controlled textarea', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledTextArea onChange={() => changeCount++} />,
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    it('should not blow away user-selected value on successful reconnect to an uncontrolled select', () =>
+      testUserInteractionBeforeClientRender(
+        <select defaultValue="Hello">
+          <option key="1" value="Hello">
+            Hello
+          </option>
+          <option key="2" value="Goodbye">
+            Goodbye
+          </option>
+        </select>,
+      ));
+
+    it('should not blow away user-selected value on successful reconnect to an controlled select', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledSelect onChange={() => changeCount++} />,
+      );
+      expect(changeCount).toBe(
+        gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
+      );
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text cascading hydration to a controlled input', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledInput onChange={() => changeCount++} cascade={true} />,
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-interaction cascading hydration to a controlled range input', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledInput
+          type="range"
+          initialValue="0.25"
+          onChange={() => changeCount++}
+          cascade={true}
+        />,
+        '0.25',
+        '1',
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text cascading hydration to a controlled checkbox', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledCheckbox onChange={() => changeCount++} cascade={true} />,
+        true,
+        false,
+        'checked',
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text cascading hydration to a controlled textarea', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledTextArea onChange={() => changeCount++} cascade={true} />,
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-selected value cascading hydration to an controlled select', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledSelect onChange={() => changeCount++} cascade={true} />,
+      );
+      expect(changeCount).toBe(1);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
new file mode 100644
index 00000000000..f72a4e9eecd
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
@@ -0,0 +1,390 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+let assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMServer = require('react-dom/server');
+  assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
+  assertConsoleWarnDev = require('internal-test-utils').assertConsoleWarnDev;
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMServer,
+  };
+}
+
+const {resetModules} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerLifecycles', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  it('should invoke the correct legacy lifecycle hooks', () => {
+    const log = [];
+
+    class Outer extends React.Component {
+      UNSAFE_componentWillMount() {
+        log.push('outer componentWillMount');
+      }
+      render() {
+        log.push('outer render');
+        return <Inner />;
+      }
+    }
+
+    class Inner extends React.Component {
+      UNSAFE_componentWillMount() {
+        log.push('inner componentWillMount');
+      }
+      render() {
+        log.push('inner render');
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Outer />);
+    expect(log).toEqual([
+      'outer componentWillMount',
+      'outer render',
+      'inner componentWillMount',
+      'inner render',
+    ]);
+  });
+
+  it('should invoke the correct new lifecycle hooks', () => {
+    const log = [];
+
+    class Outer extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        log.push('outer getDerivedStateFromProps');
+        return null;
+      }
+      render() {
+        log.push('outer render');
+        return <Inner />;
+      }
+    }
+
+    class Inner extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        log.push('inner getDerivedStateFromProps');
+        return null;
+      }
+      render() {
+        log.push('inner render');
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Outer />);
+    expect(log).toEqual([
+      'outer getDerivedStateFromProps',
+      'outer render',
+      'inner getDerivedStateFromProps',
+      'inner render',
+    ]);
+  });
+
+  it('should not invoke unsafe cWM if static gDSFP is present', () => {
+    class Component extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      UNSAFE_componentWillMount() {
+        throw Error('unexpected');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Component />);
+    assertConsoleErrorDev([
+      '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' +
+        '  UNSAFE_componentWillMount\n' +
+        '\n' +
+        'The above lifecycles should be removed. Learn more about this warning here:\n' +
+        'https://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should update instance.state with value returned from getDerivedStateFromProps', () => {
+    class Grandparent extends React.Component {
+      state = {
+        foo: 'foo',
+      };
+      render() {
+        return (
+          <div>
+            {`Grandparent: ${this.state.foo}`}
+            <Parent />
+          </div>
+        );
+      }
+    }
+
+    class Parent extends React.Component {
+      state = {
+        bar: 'bar',
+        baz: 'baz',
+      };
+      static getDerivedStateFromProps(props, prevState) {
+        return {
+          bar: `not ${prevState.bar}`,
+        };
+      }
+      render() {
+        return (
+          <div>
+            {`Parent: ${this.state.bar}, ${this.state.baz}`}
+            <Child />;
+          </div>
+        );
+      }
+    }
+
+    class Child extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return {
+          qux: 'qux',
+        };
+      }
+      render() {
+        return `Child: ${this.state.qux}`;
+      }
+    }
+
+    const markup = ReactDOMServer.renderToString(<Grandparent />);
+    expect(markup).toContain('Grandparent: foo');
+    expect(markup).toContain('Parent: not bar, baz');
+    expect(markup).toContain('Child: qux');
+  });
+
+  it('should warn if getDerivedStateFromProps returns undefined', () => {
+    class Component extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {}
+      render() {
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Component />);
+    assertConsoleErrorDev([
+      'Component.getDerivedStateFromProps(): A valid state object (or null) must ' +
+        'be returned. You have returned undefined.\n' +
+        '    in Component (at **)',
+    ]);
+
+    // De-duped
+    ReactDOMServer.renderToString(<Component />);
+  });
+
+  it('should warn if state is not initialized before getDerivedStateFromProps', () => {
+    class Component extends React.Component {
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      render() {
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Component />);
+    assertConsoleErrorDev([
+      '`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.\n' +
+        '    in Component (at **)',
+    ]);
+
+    // De-duped
+    ReactDOMServer.renderToString(<Component />);
+  });
+
+  it('should invoke both deprecated and new lifecycles if both are present', () => {
+    const log = [];
+
+    class Component extends React.Component {
+      componentWillMount() {
+        log.push('componentWillMount');
+      }
+      UNSAFE_componentWillMount() {
+        log.push('UNSAFE_componentWillMount');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Component />);
+    assertConsoleWarnDev([
+      'componentWillMount has been renamed, and is not recommended for use. ' +
+        'See https://react.dev/link/unsafe-component-lifecycles for details.\n' +
+        '\n' +
+        '* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.\n' +
+        '\n' +
+        'Please update the following components: Component\n' +
+        '    in Component (at **)',
+    ]);
+    expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);
+  });
+
+  it('tracks state updates across components', () => {
+    class Outer extends React.Component {
+      UNSAFE_componentWillMount() {
+        this.setState({x: 1});
+      }
+      render() {
+        return <Inner updateParent={this.updateParent}>{this.state.x}</Inner>;
+      }
+      updateParent = () => {
+        this.setState({x: 3});
+      };
+    }
+    class Inner extends React.Component {
+      UNSAFE_componentWillMount() {
+        this.setState({x: 2});
+        this.props.updateParent();
+      }
+      render() {
+        return <div>{this.props.children + '-' + this.state.x}</div>;
+      }
+    }
+    // Shouldn't be 1-3.
+    expect(ReactDOMServer.renderToStaticMarkup(<Outer />)).toBe(
+      '<div>1-2</div>',
+    );
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in Outer (at **)',
+    ]);
+  });
+
+  it('should not invoke cWM if static gDSFP is present', () => {
+    class Component extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        return null;
+      }
+      componentWillMount() {
+        throw Error('unexpected');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Component />);
+    assertConsoleErrorDev([
+      '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' +
+        '\n' +
+        'The above lifecycles should be removed. Learn more about this warning here:\n' +
+        'https://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should warn about deprecated lifecycle hooks', () => {
+    class MyComponent extends React.Component {
+      componentWillMount() {}
+      render() {
+        return null;
+      }
+    }
+
+    ReactDOMServer.renderToString(<MyComponent />);
+    assertConsoleWarnDev([
+      'componentWillMount has been renamed, and is not recommended for use. ' +
+        'See https://react.dev/link/unsafe-component-lifecycles for details.\n' +
+        '\n' +
+        '* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.\n' +
+        '\n' +
+        'Please update the following components: MyComponent\n' +
+        '    in MyComponent (at **)',
+    ]);
+
+    // De-duped
+    ReactDOMServer.renderToString(<MyComponent />);
+  });
+
+  describe('react-lifecycles-compat', () => {
+    const {polyfill} = require('react-lifecycles-compat');
+
+    it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
+      class PolyfilledComponent extends React.Component {
+        state = {};
+        static getDerivedStateFromProps() {
+          return null;
+        }
+        render() {
+          return null;
+        }
+      }
+
+      polyfill(PolyfilledComponent);
+
+      const container = document.createElement('div');
+      ReactDOMServer.renderToString(
+        <React.StrictMode>
+          <PolyfilledComponent />
+        </React.StrictMode>,
+        container,
+      );
+    });
+
+    it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
+      class PolyfilledComponent extends React.Component {
+        getSnapshotBeforeUpdate() {
+          return null;
+        }
+        componentDidUpdate() {}
+        render() {
+          return null;
+        }
+      }
+
+      polyfill(PolyfilledComponent);
+
+      const container = document.createElement('div');
+      ReactDOMServer.renderToString(
+        <React.StrictMode>
+          <PolyfilledComponent />
+        </React.StrictMode>,
+        container,
+      );
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
new file mode 100644
index 00000000000..502ac8c326c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -0,0 +1,4232 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let Activity;
+let React = require('react');
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let ReactFeatureFlags;
+let Scheduler;
+let Suspense;
+let SuspenseList;
+let useSyncExternalStore;
+let act;
+let IdleEventPriority;
+let waitForAll;
+let waitFor;
+let waitForPaint;
+let assertLog;
+let assertConsoleErrorDev;
+
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
+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);
+  }
+}
+
+class TestAppClass extends React.Component {
+  render() {
+    return (
+      <div>
+        <>{''}</>
+        <>{'Hello'}</>
+      </div>
+    );
+  }
+}
+
+describe('ReactDOMServerPartialHydration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableSuspenseCallback = true;
+    ReactFeatureFlags.enableCreateEventHandleAPI = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    Activity = React.Activity;
+    Suspense = React.Suspense;
+    useSyncExternalStore = React.useSyncExternalStore;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    waitFor = InternalTestUtils.waitFor;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
+  });
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('hydrates a parent even if a child Suspense boundary is blocked', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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>
+      );
+    }
+
+    // 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([]);
+
+    // We should now have hydrated with a ref on the existing span.
+    expect(ref.current).toBe(span);
+  });
+
+  it('can hydrate siblings of a suspended component without errors', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+          <Suspense fallback="Loading...">
+            <div>Hello</div>
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    // 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    expect(container.textContent).toBe('HelloHello');
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    // Expect the server-generated HTML to stay intact.
+    expect(container.textContent).toBe('HelloHello');
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([]);
+    // Hydration should not change anything.
+    expect(container.textContent).toBe('HelloHello');
+  });
+
+  it('falls back to client rendering boundary on mismatch', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+          <Component />
+          <Component />
+          <Component />
+          <Component shouldMismatch={true} />
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component', 'Component', 'Component', 'Component']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
+
+    // Unchanged
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+
+      // second pass as client render
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+      // Hydration mismatch is logged
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+    );
+  });
+
+  it('does not show a fallback if mismatch is after suspending', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Child />
+          <Component shouldMismatch={true} />
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
+
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><!--/$-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Hello',
+      'Component',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed.
+    expect(container.innerHTML).toBe('Hello<article>Mismatch</article>');
+  });
+
+  it('does not show a fallback if mismatch is child of suspended component', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Child>
+            <Component shouldMismatch={true} />
+          </Child>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div>Component</div></div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
+
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div>Component</div></div><!--/$-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Hello',
+      'Component',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<div><article>Mismatch</article></div>');
+  });
+
+  it('does not show a fallback if mismatch is parent and first child suspends', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch, children}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return (
+          <div>
+            {children}
+            <article>Mismatch</article>
+          </div>
+        );
+      }
+      return (
+        <div>
+          {children}
+          <div>Component</div>
+        </div>
+      );
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Component shouldMismatch={true}>
+            <Child />
+          </Component>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div></div><div>Component</div></div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Component', 'Suspend']);
+    jest.runAllTimers();
+
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div></div><div>Component</div></div><!--/$-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+      'Component',
+      'Hello',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<div><div></div><article>Mismatch</article></div>',
+    );
+  });
+
+  it('does show a fallback if mismatch is parent and second child suspends', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch, children}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return (
+          <div>
+            <article>Mismatch</article>
+            {children}
+          </div>
+        );
+      }
+      return (
+        <div>
+          <div>Component</div>
+          {children}
+        </div>
+      );
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Component shouldMismatch={true}>
+            <Child />
+          </Component>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div>Component</div><div></div></div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll(['Component', 'Hello']);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<div><article>Mismatch</article><div></div></div>',
+    );
+  });
+
+  it('does show a fallback if mismatch is in parent element only', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch, children}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>{children}</article>;
+      }
+      return <div>{children}</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Component shouldMismatch={true}>
+            <Child />
+          </Component>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe('<!--$--><div><div></div></div><!--/$-->');
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll(['Component', 'Hello']);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<article><div></div></article>');
+  });
+
+  it('does show a fallback if mismatch is before suspending', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Component shouldMismatch={true} />
+          <Child />
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><div>Component</div>Hello<!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<article>Mismatch</article>Hello');
+  });
+
+  it('does show a fallback if mismatch is before suspending in a child', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Component shouldMismatch={true} />
+          <div>
+            <Child />
+          </div>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><div>Component</div><div>Hello</div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed.
+    expect(container.innerHTML).toBe(
+      '<article>Mismatch</article><div>Hello</div>',
+    );
+  });
+
+  it('calls the hydration callbacks after hydration or deletion', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let suspend2 = false;
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const hydrated = [];
+    const deleted = [];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    suspend2 = true;
+    const root = ReactDOMClient.hydrateRoot(container, <App />, {
+      onHydrated(node) {
+        hydrated.push(node);
+      },
+      onDeleted(node) {
+        deleted.push(node);
+      },
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    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
+    await act(() => {
+      root.render(<App value={true} />);
+    });
+
+    expect(hydrated.length).toBe(1);
+    expect(deleted.length).toBe(1);
+  });
+
+  it('hydrates an empty suspense boundary', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading..." />
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(container.innerHTML).toContain('<div>Sibling</div>');
+  });
+
+  it('recovers with client render when server rendered additional nodes at suspense root', async () => {
+    function CheckIfHydrating({children}) {
+      // This is a trick to check whether we're hydrating or not, since React
+      // doesn't expose that information currently except
+      // via useSyncExternalStore.
+      let serverOrClient = '(unknown)';
+      useSyncExternalStore(
+        () => {},
+        () => {
+          serverOrClient = 'Client rendered';
+          return null;
+        },
+        () => {
+          serverOrClient = 'Server rendered';
+          return null;
+        },
+      );
+      Scheduler.log(serverOrClient);
+      return null;
+    }
+
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref}>A</span>
+            {hasB ? <span>B</span> : null}
+            <CheckIfHydrating />
+          </Suspense>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+    assertLog(['Server rendered']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+
+    assertLog([
+      'Server rendered',
+      'Client rendered',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(ref.current).not.toBe(span);
+  });
+
+  it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
+    const ref = React.createRef();
+    let shouldSuspend = false;
+    let resolve;
+    const promise = new Promise(res => {
+      resolve = () => {
+        shouldSuspend = false;
+        res();
+      };
+    });
+    function Suspender() {
+      if (shouldSuspend) {
+        throw promise;
+      }
+      return <></>;
+    }
+    function App({hasB}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Suspender />
+            <span ref={ref}>A</span>
+            {hasB ? <span>B</span> : null}
+          </Suspense>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    shouldSuspend = true;
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+
+    await act(() => {
+      resolve();
+    });
+
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).not.toBe(span);
+  });
+
+  it('recovers with client render when server rendered additional nodes deep inside suspense root', async () => {
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <div>
+              <span ref={ref}>A</span>
+              {hasB ? <span>B</span> : null}
+            </div>
+          </Suspense>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).not.toBe(span);
+  });
+
+  it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
+    let suspend = false;
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const deleted = [];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = await act(() => {
+      return ReactDOMClient.hydrateRoot(container, <App />, {
+        onDeleted(node) {
+          deleted.push(node);
+        },
+      });
+    });
+
+    expect(deleted.length).toBe(0);
+
+    await act(() => {
+      root.render(<App deleted={true} />);
+    });
+
+    // The callback should have been invoked.
+    expect(deleted.length).toBe(1);
+  });
+
+  it('can insert siblings before the dehydrated boundary', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    let showSibling;
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Second';
+      }
+    }
+
+    function Sibling() {
+      const [visible, setVisibilty] = React.useState(false);
+      showSibling = () => setVisibilty(true);
+      if (visible) {
+        return <div>First</div>;
+      }
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Sibling />
+          <Suspense fallback="Loading...">
+            <span>
+              <Child />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
+
+    // In this state, we can still update the siblings.
+    await act(() => showSibling());
+
+    expect(container.firstChild.firstChild.tagName).toBe('DIV');
+    expect(container.firstChild.firstChild.textContent).toBe('First');
+  });
+
+  it('can delete the dehydrated boundary before it is hydrated', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    let hideMiddle;
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <>
+            <div>Middle</div>
+            Some text
+          </>
+        );
+      }
+    }
+
+    function App() {
+      const [visible, setVisibilty] = React.useState(true);
+      hideMiddle = () => setVisibilty(false);
+
+      return (
+        <div>
+          <div>Before</div>
+          {visible ? (
+            <Suspense fallback="Loading...">
+              <Child />
+            </Suspense>
+          ) : null}
+          <div>After</div>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(container.firstChild.children[1].textContent).toBe('Middle');
+
+    // In this state, we can still delete the boundary.
+    await act(() => hideMiddle());
+
+    expect(container.firstChild.children[1].textContent).toBe('After');
+  });
+
+  it('blocks updates to hydrate the content first if props have changed', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+    await waitForAll([]);
+
+    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.
+    root.render(<App text="Hi" className="hi" />);
+
+    // At the same time, resolving the promise so that rendering can complete.
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    const 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(span.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');
+  });
+
+  // @gate www
+  it('blocks updates to hydrate the content first if props changed at idle priority', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+    expect(span.textContent).toBe('Hello');
+
+    // Schedule an update at idle priority
+    ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    // At the same time, 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.
+    await waitForAll([]);
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    const 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(span.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('shows the fallback if props have changed before hydration completes and is still suspended', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Render an update, but leave it still suspended.
+    await act(() => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    // Flushing now should delete the existing content and show the fallback.
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Loading...');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+  });
+
+  it('treats missing fallback the same as if it was defined', async () => {
+    // This is the same exact test as above but with a nested Suspense without a fallback.
+    // This should be a noop.
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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}>
+              <Suspense>
+                <Child text={text} />
+              </Suspense>
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+
+    // Render an update, but leave it still suspended.
+    // Flushing now should delete the existing content and show the fallback.
+    await act(() => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    expect(container.getElementsByTagName('span').length).toBe(1);
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+  });
+
+  it('clears nested suspense boundaries if they did not hydrate yet', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Suspense fallback="Never happens">
+              <Child text={text} />
+            </Suspense>{' '}
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Render an update, but leave it still suspended.
+    // Flushing now should delete the existing content and show the fallback.
+    await act(() => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Loading...');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    await waitForAll([]);
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi Hi');
+  });
+
+  it('hydrates first if props changed but we are able to resolve within a timeout', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Render an update with a long timeout.
+    React.startTransition(() => root.render(<App text="Hi" className="hi" />));
+    // This shouldn't force the fallback yet.
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Resolving the promise so that rendering can complete.
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    suspend = false;
+    await act(() => resolve());
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    const 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('warns but works if setState is called before commit in a dehydrated component', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let updateText;
+
+    function Child() {
+      const [state, setState] = React.useState('Hello');
+      updateText = setState;
+      Scheduler.log('Child');
+      if (suspend) {
+        throw promise;
+      } else {
+        return state;
+      }
+    }
+
+    function Sibling() {
+      Scheduler.log('Sibling');
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child />
+            <Sibling />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['Child', 'Sibling']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+
+    await act(async () => {
+      suspend = true;
+      await waitFor(['Child']);
+
+      // While we're part way through the hydration, we update the state.
+      // This will schedule an update on the children of the suspense boundary.
+      updateText('Hi');
+      assertConsoleErrorDev([
+        "Can't perform a React state update on a component that hasn't mounted yet. " +
+          'This indicates that you have a side-effect in your render function that ' +
+          'asynchronously tries to update the component. Move this work to useEffect instead.\n' +
+          '    in App (at **)',
+      ]);
+
+      // This will throw it away and rerender.
+      await waitForAll(['Child']);
+
+      expect(container.textContent).toBe('Hello');
+
+      suspend = false;
+      resolve();
+      await promise;
+    });
+    assertLog(['Child', 'Sibling']);
+
+    expect(container.textContent).toBe('Hello');
+  });
+
+  it('blocks the update to hydrate first if context has changed', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+    const Context = React.createContext(null);
+
+    function Child() {
+      const {text, className} = React.useContext(Context);
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <span ref={ref} className={className}>
+            {text}
+          </span>
+        );
+      }
+    }
+
+    const App = React.memo(function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child />
+          </Suspense>
+        </div>
+      );
+    });
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+    );
+    await waitForAll([]);
+
+    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.
+    root.render(
+      <Context.Provider value={{text: 'Hi', className: 'hi'}}>
+        <App />
+      </Context.Provider>,
+    );
+
+    // At the same time, resolving the promise so that rendering can complete.
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // Since this should have been hydrated, this should still be the same span.
+    const 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);
+    expect(span.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('shows the fallback if context has changed before hydration completes and is still suspended', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+    const Context = React.createContext(null);
+
+    function Child() {
+      const {text, className} = React.useContext(Context);
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <span ref={ref} className={className}>
+            {text}
+          </span>
+        );
+      }
+    }
+
+    const App = React.memo(function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child />
+          </Suspense>
+        </div>
+      );
+    });
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Render an update, but leave it still suspended.
+    // Flushing now should delete the existing content and show the fallback.
+    await act(() => {
+      root.render(
+        <Context.Provider value={{text: 'Hi', className: 'hi'}}>
+          <App />
+        </Context.Provider>,
+      );
+    });
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Loading...');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+  });
+
+  it('replaces the fallback with client content if it is not rendered by the server', async () => {
+    let suspend = false;
+    const promise = new Promise(resolvePromise => {});
+    const 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>
+      );
+    }
+
+    // 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 = true;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+
+    // On the client we have the data available quickly for some reason.
+    suspend = false;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    if (__DEV__) {
+      await waitForAll([
+        'onRecoverableError: Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used' +
+          ' "renderToString" which does not support Suspense.',
+      ]);
+    } else {
+      await waitForAll([
+        'onRecoverableError: The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering.',
+      ]);
+    }
+    jest.runAllTimers();
+
+    expect(container.textContent).toBe('Hello');
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+  });
+
+  it('replaces the fallback within the suspended time if there is a nested suspense', async () => {
+    let suspend = false;
+    const promise = new Promise(resolvePromise => {});
+    const ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function InnerChild() {
+      // Always suspends indefinitely
+      throw promise;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref}>
+              <Child />
+            </span>
+            <Suspense fallback={null}>
+              <InnerChild />
+            </Suspense>
+          </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 = true;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+
+    // On the client we have the data available quickly for some reason.
+    suspend = false;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    if (__DEV__) {
+      await waitForAll([
+        'onRecoverableError: Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used' +
+          ' "renderToString" which does not support Suspense.',
+      ]);
+    } else {
+      await waitForAll([
+        'onRecoverableError: The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering.',
+      ]);
+    }
+    // This will have exceeded the suspended time so we should timeout.
+    jest.advanceTimersByTime(500);
+    // The boundary should longer be suspended for the middle content
+    // even though the inner boundary is still suspended.
+
+    expect(container.textContent).toBe('Hello');
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+  });
+
+  it('replaces the fallback within the suspended time if there is a nested suspense in a nested suspense', async () => {
+    let suspend = false;
+    const promise = new Promise(resolvePromise => {});
+    const ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function InnerChild() {
+      // Always suspends indefinitely
+      throw promise;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Another layer">
+            <Suspense fallback="Loading...">
+              <span ref={ref}>
+                <Child />
+              </span>
+              <Suspense fallback={null}>
+                <InnerChild />
+              </Suspense>
+            </Suspense>
+          </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 = true;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+
+    // On the client we have the data available quickly for some reason.
+    suspend = false;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    if (__DEV__) {
+      await waitForAll([
+        'onRecoverableError: Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used' +
+          ' "renderToString" which does not support Suspense.',
+      ]);
+    } else {
+      await waitForAll([
+        'onRecoverableError: The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering.',
+      ]);
+    }
+    // This will have exceeded the suspended time so we should timeout.
+    jest.advanceTimersByTime(500);
+    // The boundary should longer be suspended for the middle content
+    // even though the inner boundary is still suspended.
+
+    expect(container.textContent).toBe('Hello');
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+  });
+
+  // @gate enableSuspenseList
+  it('shows inserted items in a SuspenseList before content is hydrated', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const 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" tail="visible">
+          {a}
+          {b}
+          {showMore ? (
+            <Suspense fallback="Loading C">
+              <span>C</span>
+            </Suspense>
+          ) : null}
+        </SuspenseList>
+      );
+    }
+
+    suspend = false;
+    const html = ReactDOMServer.renderToString(<App showMore={false} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = html;
+
+    const spanB = container.getElementsByTagName('span')[1];
+
+    suspend = true;
+    const root = await act(() =>
+      ReactDOMClient.hydrateRoot(container, <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.
+    await 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);
+  });
+
+  // @gate enableSuspenseList
+  it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child({children}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return children;
+      }
+    }
+
+    const 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;
+    const html = ReactDOMServer.renderToString(<App showMore={false} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = html;
+
+    const spanA = container.getElementsByTagName('span')[0];
+
+    suspend = true;
+    const root = await act(() =>
+      ReactDOMClient.hydrateRoot(container, <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');
+  });
+
+  // @gate enableSuspenseList
+  it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    const ref = React.createRef();
+
+    function Child({children}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return children;
+      }
+    }
+
+    function Before() {
+      Scheduler.log('Before');
+      return null;
+    }
+
+    function After() {
+      Scheduler.log('After');
+      return null;
+    }
+
+    function FirstRow() {
+      return (
+        <>
+          <Before />
+          <Suspense fallback="Loading A">
+            <span>A</span>
+          </Suspense>
+          <After />
+        </>
+      );
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={null}>
+          <SuspenseList revealOrder="forwards" tail="hidden">
+            <FirstRow />
+            <Suspense fallback="Loading B">
+              <Child>
+                <span ref={ref}>B</span>
+              </Child>
+            </Suspense>
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    suspend = false;
+    const html = ReactDOMServer.renderToString(<App />);
+    assertLog(['Before', 'After']);
+
+    const container = document.createElement('div');
+    container.innerHTML = html;
+
+    const b = container.getElementsByTagName('span')[1];
+    expect(b.textContent).toBe('B');
+
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Increase hydration priority to higher than "offscreen".
+    root.unstable_scheduleHydration(b);
+
+    suspend = true;
+
+    await act(async () => {
+      await waitFor(['Before', 'After']);
+
+      // This will cause us to skip the second row completely.
+    });
+
+    // We haven't hydrated the second child but the placeholder is still in the list.
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('AB');
+
+    suspend = false;
+    await act(async () => {
+      // Resolve the boundary to be in its resolved final state.
+      await resolve();
+    });
+
+    expect(container.textContent).toBe('AB');
+    expect(ref.current).toBe(b);
+  });
+
+  // @gate enableSuspenseList
+  it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({children}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return children;
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={null}>
+          <SuspenseList revealOrder="forwards" tail="hidden">
+            <Suspense fallback="Loading A">
+              <span>A</span>
+            </Suspense>
+            <Suspense fallback="Loading B">
+              <Child>
+                <span>B</span>
+              </Child>
+            </Suspense>
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    suspend = true;
+    const html = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = html;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+
+    suspend = true;
+    if (__DEV__) {
+      await waitForAll([
+        'onRecoverableError: Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used' +
+          ' "renderToString" which does not support Suspense.',
+      ]);
+    } else {
+      await waitForAll([
+        'onRecoverableError: The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering.',
+      ]);
+    }
+
+    // We haven't hydrated the second child but the placeholder is still in the list.
+    expect(container.textContent).toBe('ALoading B');
+
+    suspend = false;
+    await act(async () => {
+      // Resolve the boundary to be in its resolved final state.
+      await resolve();
+    });
+
+    expect(container.textContent).toBe('AB');
+  });
+
+  it('can client render nested boundaries', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    const 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;
+    const html = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = html + '<!--unrelated comment-->';
+
+    const span = container.getElementsByTagName('span')[1];
+
+    suspend = false;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    if (__DEV__) {
+      await waitForAll([
+        'onRecoverableError: Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used' +
+          ' "renderToString" which does not support Suspense.',
+      ]);
+    } else {
+      await waitForAll([
+        'onRecoverableError: The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering.',
+      ]);
+    }
+    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 () => {
+    const ref1 = React.createRef();
+    const 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.
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span1 = container.getElementsByTagName('span')[0];
+    const span2 = container.getElementsByTagName('span')[1];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    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;
+    const promise = new Promise(resolvePromise => {});
+    const ref = React.createRef();
+    const ClassName = React.createContext(null);
+
+    function Child({text}) {
+      const 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;
+    const finalHTML = ReactDOMServer.renderToString(
+      <ClassName.Provider value={'hello'}>
+        <App text="Hello" />
+      </ClassName.Provider>,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <ClassName.Provider value={'hello'}>
+        <App text="Hello" />
+      </ClassName.Provider>,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    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.
+    // Since we're still suspended on the original data, we can't hydrate.
+    // This will force all expiration times to flush.
+    await act(() => {
+      root.render(
+        <ClassName.Provider value={'hi'}>
+          <App text="Hi" />
+        </ClassName.Provider>,
+      );
+    });
+
+    // This will now be a new span because we weren't able to hydrate before
+    const 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;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let clicks = 0;
+
+    function Button() {
+      const [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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(container.textContent).toBe('Click meHello');
+
+    // We're now partially hydrated.
+    await act(() => {
+      a.click();
+    });
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicks).toBe(0);
+    expect(container.textContent).toBe('Click meHello');
+
+    document.body.removeChild(container);
+  });
+
+  // @gate www
+  it('does not invoke an event on a hydrated event handle until it commits', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    const onEvent = jest.fn();
+
+    function Button() {
+      const ref = React.useRef(null);
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, onEvent);
+        });
+      }
+      return <a ref={ref}>Click me</a>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Button />
+            <Sibling />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    isServerRendering = false;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      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.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    document.body.removeChild(container);
+  });
+
+  it('invokes discrete events on nested suspense boundaries in a root (legacy system)', async () => {
+    let suspend = false;
+    let resolve;
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // We'll do one click before hydrating.
+    await act(() => {
+      a.click();
+    });
+    // This should be delayed.
+    expect(clicks).toBe(0);
+
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      a.click();
+    });
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicks).toBe(0);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate www
+  it('invokes discrete events on nested suspense boundaries in a root (createEventHandle)', async () => {
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    const onEvent = jest.fn();
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+
+    function Button() {
+      const ref = React.useRef(null);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, onEvent);
+        });
+      }
+
+      return <a ref={ref}>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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    isServerRendering = false;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      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.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    document.body.removeChild(container);
+  });
+
+  it('does not invoke the parent of dehydrated boundary event', async () => {
+    let suspend = false;
+    let resolve;
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      span.click();
+    });
+    expect(clicksOnChild).toBe(0);
+    expect(clicksOnParent).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicksOnChild).toBe(0);
+    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;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let clicks = 0;
+    const 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const parentContainer = document.createElement('div');
+    const 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.
+    const parentRoot = ReactDOMClient.createRoot(parentContainer);
+    await act(() => parentRoot.render(<Parent />));
+
+    childSlotRef.current.appendChild(childContainer);
+
+    childContainer.innerHTML = finalHTML;
+
+    const a = childContainer.getElementsByTagName('a')[0];
+
+    suspend = true;
+
+    // Hydrate asynchronously.
+    await act(() => ReactDOMClient.hydrateRoot(childContainer, <App />));
+
+    // The Suspense boundary is not yet hydrated.
+    await act(() => {
+      a.click();
+    });
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicks).toBe(0);
+
+    document.body.removeChild(parentContainer);
+  });
+
+  it('blocks only on the last continuous event (legacy system)', async () => {
+    let suspend1 = false;
+    let resolve1;
+    const promise1 = new Promise(resolvePromise => (resolve1 = resolvePromise));
+    let suspend2 = false;
+    let resolve2;
+    const 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';
+      }
+    }
+
+    const 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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const appDiv = container.getElementsByTagName('div')[0];
+    const firstSpan = appDiv.getElementsByTagName('span')[0];
+    const 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;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    await waitForAll([]);
+
+    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;
+
+    await waitForAll([]);
+
+    // 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;
+
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Mouse Enter Second']);
+
+    document.body.removeChild(container);
+  });
+
+  it('finishes normal pri work before continuing to hydrate a retry', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        Scheduler.log('Child');
+        return 'Hello';
+      }
+    }
+
+    function Sibling() {
+      Scheduler.log('Sibling');
+      React.useLayoutEffect(() => {
+        Scheduler.log('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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['Child']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showSibling={false} />,
+    );
+    await waitForAll([]);
+
+    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.
+    await waitFor(['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');
+
+    await waitForAll(['Child']);
+
+    // Now we're hydrated.
+    expect(ref.current).not.toBe(null);
+  });
+
+  it('regression test: does not overfire non-bubbling browser events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let submits = 0;
+
+    function Form() {
+      const [submitted, setSubmitted] = React.useState(false);
+      if (submitted) {
+        return null;
+      }
+      return (
+        <form
+          onSubmit={() => {
+            setSubmitted(true);
+            submits++;
+          }}>
+          Click me
+        </form>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Form />
+            <Sibling />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const form = container.getElementsByTagName('form')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(container.textContent).toBe('Click meHello');
+
+    // We're now partially hydrated.
+    await act(() => {
+      form.dispatchEvent(
+        new window.Event('submit', {
+          bubbles: true,
+        }),
+      );
+    });
+    expect(submits).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // discrete event not replayed
+    expect(submits).toBe(0);
+    expect(container.textContent).toBe('Click meHello');
+
+    document.body.removeChild(container);
+  });
+
+  // This test fails, in both forks. Without a boundary, the deferred tree won't
+  // re-enter hydration mode. It doesn't come up in practice because there's
+  // always a parent Suspense boundary. But it's still a bug. Leaving for a
+  // follow up.
+  //
+  // @gate FIXME
+  it('hydrates a hidden subtree outside of a Suspense boundary', async () => {
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <LegacyHiddenDiv mode="hidden">
+          <span ref={ref}>Hidden child</span>
+        </LegacyHiddenDiv>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.innerHTML).toBe('Hidden child');
+
+    await act(() =>
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + error.message);
+        },
+      }),
+    );
+
+    expect(ref.current).toBe(span);
+    expect(span.innerHTML).toBe('Hidden child');
+  });
+
+  // @gate www
+  it('renders a hidden LegacyHidden component inside a Suspense boundary', async () => {
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <LegacyHiddenDiv mode="hidden">
+            <span ref={ref}>Hidden child</span>
+          </LegacyHiddenDiv>
+        </Suspense>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.innerHTML).toBe('Hidden child');
+
+    await act(() => ReactDOMClient.hydrateRoot(container, <App />));
+    expect(ref.current).toBe(span);
+    expect(span.innerHTML).toBe('Hidden child');
+  });
+
+  // @gate www
+  it('renders a visible LegacyHidden component', async () => {
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <LegacyHiddenDiv mode="visible">
+          <span ref={ref}>Hidden child</span>
+        </LegacyHiddenDiv>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    await act(() => ReactDOMClient.hydrateRoot(container, <App />));
+    expect(ref.current).toBe(span);
+    expect(ref.current.innerHTML).toBe('Hidden child');
+  });
+
+  // @gate enableActivity
+  it('a visible Activity component is surrounded by comment markers', async () => {
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <Activity mode="visible">
+          <span ref={ref}>Child</span>
+        </Activity>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog([]);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // Visible Activity boundaries behave exactly like fragments: a
+    // pure indirection.
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <!--&-->
+        <span>
+          Child
+        </span>
+        <!--/&-->
+      </div>
+    `);
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // The tree successfully hydrates
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+    expect(ref.current).toBe(span);
+  });
+
+  // @gate enableActivity
+  it('a hidden Activity component is skipped over during server rendering', async () => {
+    const visibleRef = React.createRef();
+
+    function HiddenChild() {
+      Scheduler.log('HiddenChild');
+      return <span>Hidden</span>;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <>
+          <span ref={visibleRef}>Visible</span>
+          <Activity mode="hidden">
+            <HiddenChild />
+          </Activity>
+          <Suspense fallback={null}>
+            <Activity mode="hidden">
+              <HiddenChild />
+            </Activity>
+          </Suspense>
+        </>
+      );
+    }
+
+    // During server rendering, the Child component should not be evaluated,
+    // because it's inside a hidden tree.
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['App']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // The hidden child is not part of the server rendered HTML
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <span>
+          Visible
+        </span>
+        <!--$-->
+        <!--/$-->
+      </div>
+    `);
+
+    const visibleSpan = container.getElementsByTagName('span')[0];
+
+    // The visible span successfully hydrates
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForPaint(['App']);
+    expect(visibleRef.current).toBe(visibleSpan);
+
+    if (gate(flags => flags.enableYieldingBeforePassive)) {
+      // Passive effects.
+      await waitForPaint([]);
+    }
+
+    // Subsequently, the hidden child is prerendered on the client
+    // along with hydrating the Suspense boundary outside the Activity.
+    await waitForPaint(['HiddenChild']);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <span>
+          Visible
+        </span>
+        <!--$-->
+        <!--/$-->
+        <span
+          style="display: none;"
+        >
+          Hidden
+        </span>
+      </div>
+    `);
+
+    // Next the child inside the Activity is hydrated.
+    await waitForPaint(['HiddenChild']);
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <span>
+          Visible
+        </span>
+        <!--$-->
+        <!--/$-->
+        <span
+          style="display: none;"
+        >
+          Hidden
+        </span>
+        <span
+          style="display: none;"
+        >
+          Hidden
+        </span>
+      </div>
+    `);
+  });
+
+  function itHydratesWithoutMismatch(msg, App) {
+    it('hydrates without mismatch ' + msg, async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const finalHTML = ReactDOMServer.renderToString(<App />);
+      container.innerHTML = finalHTML;
+
+      await act(() => ReactDOMClient.hydrateRoot(container, <App />));
+    });
+  }
+
+  itHydratesWithoutMismatch('an empty string with neighbors', function App() {
+    return (
+      <div>
+        <div id="test">Test</div>
+        {'' && <div>Test</div>}
+        {'Test'}
+      </div>
+    );
+  });
+
+  itHydratesWithoutMismatch('an empty string', function App() {
+    return '';
+  });
+  itHydratesWithoutMismatch(
+    'an empty string simple in fragment',
+    function App() {
+      return (
+        <>
+          {''}
+          {'sup'}
+        </>
+      );
+    },
+  );
+  itHydratesWithoutMismatch(
+    'an empty string simple in suspense',
+    function App() {
+      return <Suspense>{'' && false}</Suspense>;
+    },
+  );
+
+  itHydratesWithoutMismatch('an empty string in class component', TestAppClass);
+
+  it('fallback to client render on hydration mismatch at root', async () => {
+    let suspend = true;
+    let resolve;
+    const promise = new Promise((res, rej) => {
+      resolve = () => {
+        suspend = false;
+        res();
+      };
+    });
+    function App({isClient}) {
+      return (
+        <>
+          <Suspense fallback={<div>Loading</div>}>
+            <ChildThatSuspends id={1} isClient={isClient} />
+          </Suspense>
+          {isClient ? <span>client</span> : <div>server</div>}
+          <Suspense fallback={<div>Loading</div>}>
+            <ChildThatSuspends id={2} isClient={isClient} />
+          </Suspense>
+        </>
+      );
+    }
+    function ChildThatSuspends({id, isClient}) {
+      if (isClient && suspend) {
+        throw promise;
+      }
+      return <div>{id}</div>;
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App isClient={false} />);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    // We show fallback state when mismatch happens at root
+    expect(container.innerHTML).toEqual(
+      '<div>Loading</div><span>client</span><div>Loading</div>',
+    );
+
+    await act(async () => {
+      resolve();
+      await promise;
+    });
+
+    expect(container.innerHTML).toEqual(
+      '<div>1</div><span>client</span><div>2</div>',
+    );
+  });
+
+  it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
+    function DirectTextChild({text}) {
+      return <div>{text}</div>;
+    }
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(
+      <DirectTextChild text="good" />,
+    );
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
+    ]);
+  });
+
+  it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
+    function Sibling() {
+      return 'Sibling';
+    }
+
+    function TextChildWithSibling({text}) {
+      return (
+        <div>
+          <Sibling />
+          {text}
+        </div>
+      );
+    }
+    const container2 = document.createElement('div');
+    container2.innerHTML = ReactDOMServer.renderToString(
+      <TextChildWithSibling text="good" />,
+    );
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        container2,
+        <TextChildWithSibling text="bad" />,
+        {
+          onRecoverableError(error) {
+            Scheduler.log(
+              'onRecoverableError: ' + normalizeError(error.message),
+            );
+            if (error.cause) {
+              Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+            }
+          },
+        },
+      );
+    });
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
+    ]);
+  });
+
+  it('hides a dehydrated suspense boundary if the parent resuspends', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function Sibling({resuspend}) {
+      if (suspend && resuspend) {
+        throw promise;
+      } else {
+        return null;
+      }
+    }
+
+    function Component({text}) {
+      return (
+        <Suspense>
+          <Child text={text} />
+          <span ref={ref}>World</span>
+        </Suspense>
+      );
+    }
+
+    function App({text, resuspend}) {
+      const memoized = React.useMemo(() => <Component text={text} />, [text]);
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            {memoized}
+            <Sibling resuspend={resuspend} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App text="Hello" />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(container, <App text="Hello" />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null); // Still dehydrated
+    const span = container.getElementsByTagName('span')[0];
+    const textNode = span.previousSibling;
+    expect(textNode.nodeValue).toBe('Hello');
+    expect(span.textContent).toBe('World');
+
+    // Render an update, that resuspends the parent boundary.
+    // Flushing now now hide the text content.
+    await act(() => {
+      root.render(<App text="Hello" resuspend={true} />);
+    });
+
+    expect(ref.current).toBe(null);
+    expect(span.style.display).toBe('none');
+    expect(textNode.nodeValue).toBe('');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(textNode.nodeValue).toBe('Hello');
+    expect(span.textContent).toBe('World');
+    expect(span.style.display).toBe('');
+    expect(ref.current).toBe(span);
+  });
+
+  // Regression for https://github.com/facebook/react/issues/35210 and other issues where lazy elements created in flight
+  // caused hydration issues b/c the replay pathway did not correctly reset the hydration cursor
+  it('Can hydrate even when lazy content resumes immediately inside a HostComponent', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = () => r({default: 'value'});
+    });
+
+    const lazyContent = React.lazy(() => {
+      Scheduler.log('Lazy initializer called');
+      return promise;
+    });
+
+    function App() {
+      return <label>{lazyContent}</label>;
+    }
+
+    // Server-rendered HTML
+    const container = document.createElement('div');
+    container.innerHTML = '<label>value</label>';
+
+    const hydrationErrors = [];
+
+    React.startTransition(() => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          console.log('[DEBUG] hydration error:', error.message);
+          hydrationErrors.push(error.message);
+        },
+      });
+    });
+
+    await waitFor(['Lazy initializer called']);
+    resolve();
+    await waitForAll([]);
+
+    // Without the fix, hydration cursor is wrong and causes mismatch
+    expect(hydrationErrors).toEqual([]);
+    expect(container.innerHTML).toEqual('<label>value</label>');
+  });
+
+  it('Can hydrate even when lazy content resumes immediately inside a HostSingleton', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = () => r({default: <div>value</div>});
+    });
+
+    const lazyContent = React.lazy(() => {
+      Scheduler.log('Lazy initializer called');
+      return promise;
+    });
+
+    function App() {
+      return (
+        <html>
+          <body>{lazyContent}</body>
+        </html>
+      );
+    }
+
+    // Server-rendered HTML
+    document.body.innerHTML = '<div>value</div>';
+
+    const hydrationErrors = [];
+
+    React.startTransition(() => {
+      ReactDOMClient.hydrateRoot(document, <App />, {
+        onRecoverableError(error) {
+          console.log('[DEBUG] hydration error:', error.message);
+          hydrationErrors.push(error.message);
+        },
+      });
+    });
+
+    await waitFor(['Lazy initializer called']);
+    resolve();
+    await waitForAll([]);
+
+    expect(hydrationErrors).toEqual([]);
+    expect(document.documentElement.outerHTML).toEqual(
+      '<html><head></head><body><div>value</div></body></html>',
+    );
+  });
+
+  it('Can hydrate even when lazy content resumes immediately inside a Suspense', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = () => r({default: 'value'});
+    });
+
+    const lazyContent = React.lazy(() => {
+      Scheduler.log('Lazy initializer called');
+      return promise;
+    });
+
+    function App() {
+      return <Suspense>{lazyContent}</Suspense>;
+    }
+
+    // Server-rendered HTML
+    const container = document.createElement('div');
+    container.innerHTML = '<!--$-->value<!--/$-->';
+
+    const hydrationErrors = [];
+
+    let root;
+    React.startTransition(() => {
+      root = ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          console.log('[DEBUG] hydration error:', error.message);
+          hydrationErrors.push(error.message);
+        },
+      });
+    });
+
+    await waitFor(['Lazy initializer called']);
+    resolve();
+    await waitForAll([]);
+
+    expect(hydrationErrors).toEqual([]);
+    expect(container.innerHTML).toEqual('<!--$-->value<!--/$-->');
+    root.unmount();
+    expect(container.innerHTML).toEqual('<!--$--><!--/$-->');
+  });
+
+  it('Can hydrate even when lazy content resumes immediately inside an Activity', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = () => r({default: 'value'});
+    });
+
+    const lazyContent = React.lazy(() => {
+      Scheduler.log('Lazy initializer called');
+      return promise;
+    });
+
+    function App() {
+      return <Activity mode="visible">{lazyContent}</Activity>;
+    }
+
+    // Server-rendered HTML
+    const container = document.createElement('div');
+    container.innerHTML = '<!--&-->value<!--/&-->';
+
+    const hydrationErrors = [];
+
+    let root;
+    React.startTransition(() => {
+      root = ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          console.log('[DEBUG] hydration error:', error.message);
+          hydrationErrors.push(error.message);
+        },
+      });
+    });
+
+    await waitFor(['Lazy initializer called']);
+    resolve();
+    await waitForAll([]);
+
+    expect(hydrationErrors).toEqual([]);
+    expect(container.innerHTML).toEqual('<!--&-->value<!--/&-->');
+    root.unmount();
+    expect(container.innerHTML).toEqual('<!--&--><!--/&-->');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydrationActivity-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydrationActivity-test.internal.js
new file mode 100644
index 00000000000..cf9e5d1d039
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydrationActivity-test.internal.js
@@ -0,0 +1,3014 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let Activity;
+let React = require('react');
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let ReactFeatureFlags;
+let Scheduler;
+let Suspense;
+let useSyncExternalStore;
+let act;
+let IdleEventPriority;
+let waitForAll;
+let waitFor;
+let assertLog;
+let assertConsoleErrorDev;
+
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
+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('ReactDOMServerPartialHydrationActivity', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableSuspenseCallback = true;
+    ReactFeatureFlags.enableCreateEventHandleAPI = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+    Activity = React.Activity;
+    Suspense = React.Suspense;
+    useSyncExternalStore = React.useSyncExternalStore;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
+  });
+
+  // @gate enableActivity
+  it('hydrates a parent even if a child Activity boundary is blocked', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <span ref={ref}>
+              <Child />
+            </span>
+          </Activity>
+        </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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([]);
+
+    // We should now have hydrated with a ref on the existing span.
+    expect(ref.current).toBe(span);
+  });
+
+  // @gate enableActivity
+  it('can hydrate siblings of a suspended component without errors', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <Activity>
+          <Child />
+          <Activity>
+            <div>Hello</div>
+          </Activity>
+        </Activity>
+      );
+    }
+
+    // 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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    expect(container.textContent).toBe('HelloHello');
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    // Expect the server-generated HTML to stay intact.
+    expect(container.textContent).toBe('HelloHello');
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([]);
+    // Hydration should not change anything.
+    expect(container.textContent).toBe('HelloHello');
+  });
+
+  // @gate enableActivity
+  it('falls back to client rendering boundary on mismatch', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function App() {
+      return (
+        <Activity>
+          <Child />
+          <Component />
+          <Component />
+          <Component />
+          <Component shouldMismatch={true} />
+        </Activity>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component', 'Component', 'Component', 'Component']);
+
+    expect(container.innerHTML).toBe(
+      '<!--&-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/&-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
+
+    // Unchanged
+    expect(container.innerHTML).toBe(
+      '<!--&-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/&-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+
+      // second pass as client render
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+      // Hydration mismatch is logged
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+    );
+  });
+
+  // @gate enableActivity
+  it('handles if mismatch is after suspending', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function App() {
+      return (
+        <Activity>
+          <Child />
+          <Component shouldMismatch={true} />
+        </Activity>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component']);
+
+    expect(container.innerHTML).toBe(
+      '<!--&-->Hello<div>Component</div><!--/&-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
+
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--&-->Hello<div>Component</div><!--/&-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Hello',
+      'Component',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed.
+    expect(container.innerHTML).toBe('Hello<article>Mismatch</article>');
+  });
+
+  // @gate enableActivity
+  it('handles if mismatch is child of suspended component', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function App() {
+      return (
+        <Activity>
+          <Child>
+            <Component shouldMismatch={true} />
+          </Child>
+        </Activity>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component']);
+
+    expect(container.innerHTML).toBe(
+      '<!--&--><div><div>Component</div></div><!--/&-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
+
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--&--><div><div>Component</div></div><!--/&-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Hello',
+      'Component',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<div><article>Mismatch</article></div>');
+  });
+
+  // @gate enableActivity
+  it('handles if mismatch is parent and first child suspends', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch, children}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return (
+          <div>
+            {children}
+            <article>Mismatch</article>
+          </div>
+        );
+      }
+      return (
+        <div>
+          {children}
+          <div>Component</div>
+        </div>
+      );
+    }
+    function App() {
+      return (
+        <Activity>
+          <Component shouldMismatch={true}>
+            <Child />
+          </Component>
+        </Activity>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--&--><div><div></div><div>Component</div></div><!--/&-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Component', 'Suspend']);
+    jest.runAllTimers();
+
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--&--><div><div></div><div>Component</div></div><!--/&-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+      'Component',
+      'Hello',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<div><div></div><article>Mismatch</article></div>',
+    );
+  });
+
+  // @gate enableActivity
+  it('does show a parent fallback if mismatch is parent and second child suspends', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch, children}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return (
+          <div>
+            <article>Mismatch</article>
+            {children}
+          </div>
+        );
+      }
+      return (
+        <div>
+          <div>Component</div>
+          {children}
+        </div>
+      );
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Activity>
+            <Component shouldMismatch={true}>
+              <Child />
+            </Component>
+          </Activity>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    const div = container.getElementsByTagName('div')[0];
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div><div>Component</div><div></div></div><!--/&--><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Component', 'Component', 'Suspend', 'Fallback']);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback. The dehydrated content is still hidden because we never
+    // committed the client rendering.
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div style="display: none;"><div>Component</div><div></div></div><!--/&--><!--/$-->' +
+        'Loading...',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      await waitForAll(['Component', 'Component', 'Hello']);
+    } else {
+      await waitForAll([
+        'Component',
+        'Component',
+        'Hello',
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+    jest.runAllTimers();
+
+    // Now that we've hit the throttle timeout, we can commit the failed hydration.
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+
+    // Client rendered - activity comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--/$--><div><article>Mismatch</article><div></div></div>',
+    );
+  });
+
+  // @gate enableActivity
+  it('does show a parent fallback if mismatch is in parent element only', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child({children}) {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return <div>{children}</div>;
+      }
+    }
+    function Component({shouldMismatch, children}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>{children}</article>;
+      }
+      return <div>{children}</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Activity>
+            <Component shouldMismatch={true}>
+              <Child />
+            </Component>
+          </Activity>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div><div></div></div><!--/&--><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Component', 'Component', 'Suspend', 'Fallback']);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback. The dehydrated content is still hidden because we never
+    // committed the client rendering.
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div style="display: none;"><div></div></div><!--/&--><!--/$-->' +
+        'Loading...',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      await waitForAll(['Component', 'Component', 'Hello']);
+    } else {
+      await waitForAll([
+        'Component',
+        'Component',
+        'Hello',
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+    jest.runAllTimers();
+
+    // Now that we've hit the throttle timeout, we can commit the failed hydration.
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+
+    // Client rendered - activity comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--/$--><article><div></div></article>',
+    );
+  });
+
+  // @gate enableActivity
+  it('does show a parent fallback if mismatch is before suspending', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Activity>
+            <Component shouldMismatch={true} />
+            <Child />
+          </Activity>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div>Component</div>Hello<!--/&--><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Component', 'Component', 'Suspend', 'Fallback']);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback. The dehydrated content is still hidden because we never
+    // committed the client rendering.
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div style="display: none;">Component</div><!--/&--><!--/$-->' +
+        'Loading...',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      await waitForAll(['Component', 'Component', 'Hello']);
+    } else {
+      await waitForAll([
+        'Component',
+        'Component',
+        'Hello',
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+    jest.runAllTimers();
+
+    // Now that we've hit the throttle timeout, we can commit the failed hydration.
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+
+    // Client rendered - activity comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--/$--><article>Mismatch</article>Hello',
+    );
+  });
+
+  // @gate enableActivity
+  it('does show a parent fallback if mismatch is before suspending in a child', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.log('Suspend');
+        throw promise;
+      } else {
+        Scheduler.log('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.log('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function Fallback() {
+      Scheduler.log('Fallback');
+      return 'Loading...';
+    }
+    function App() {
+      return (
+        <Suspense fallback={<Fallback />}>
+          <Activity>
+            <Component shouldMismatch={true} />
+            <div>
+              <Child />
+            </div>
+          </Activity>
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
+
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div>Component</div><div>Hello</div><!--/&--><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll(['Component', 'Component', 'Suspend', 'Fallback']);
+    jest.runAllTimers();
+
+    // !! Client switches to suspense fallback. The dehydrated content is still hidden because we never
+    // committed the client rendering.
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--&--><div style="display: none;">Component</div><div style="display: none;">Hello</div><!--/&--><!--/$-->' +
+        'Loading...',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      await waitForAll(['Component', 'Component', 'Hello']);
+    } else {
+      await waitForAll([
+        'Component',
+        'Component',
+        'Hello',
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+    jest.runAllTimers();
+
+    // Now that we've hit the throttle timeout, we can commit the failed hydration.
+    if (gate(flags => flags.alwaysThrottleRetries)) {
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+    }
+
+    // Client rendered - activity comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<!--$--><!--/$--><article>Mismatch</article><div>Hello</div>',
+    );
+  });
+
+  // @gate enableActivity
+  it('calls the hydration callbacks after hydration or deletion', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let suspend2 = false;
+    const promise2 = new Promise(() => {});
+    function Child2({value}) {
+      if (suspend2 && !value) {
+        throw promise2;
+      } else {
+        return 'World';
+      }
+    }
+
+    function App({value}) {
+      return (
+        <div>
+          <Activity>
+            <Child />
+          </Activity>
+          <Activity>
+            <Child2 value={value} />
+          </Activity>
+        </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;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const hydrated = [];
+    const deleted = [];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    suspend2 = true;
+    const root = ReactDOMClient.hydrateRoot(container, <App />, {
+      onHydrated(node) {
+        hydrated.push(node);
+      },
+      onDeleted(node) {
+        deleted.push(node);
+      },
+      onRecoverableError(error) {
+        Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+        if (error.cause) {
+          Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+        }
+      },
+    });
+    await waitForAll([]);
+
+    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 if
+    // it could be unsuspended by the update.
+    await act(() => {
+      root.render(<App value={true} />);
+    });
+
+    expect(hydrated.length).toBe(1);
+    expect(deleted.length).toBe(1);
+  });
+
+  // @gate enableActivity
+  it('hydrates an empty activity boundary', async () => {
+    function App() {
+      return (
+        <div>
+          <Activity />
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(container.innerHTML).toContain('<div>Sibling</div>');
+  });
+
+  // @gate enableActivity
+  it('recovers with client render when server rendered additional nodes at suspense root', async () => {
+    function CheckIfHydrating({children}) {
+      // This is a trick to check whether we're hydrating or not, since React
+      // doesn't expose that information currently except
+      // via useSyncExternalStore.
+      let serverOrClient = '(unknown)';
+      useSyncExternalStore(
+        () => {},
+        () => {
+          serverOrClient = 'Client rendered';
+          return null;
+        },
+        () => {
+          serverOrClient = 'Server rendered';
+          return null;
+        },
+      );
+      Scheduler.log(serverOrClient);
+      return null;
+    }
+
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Activity>
+            <span ref={ref}>A</span>
+            {hasB ? <span>B</span> : null}
+            <CheckIfHydrating />
+          </Activity>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+    assertLog(['Server rendered']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+
+    assertLog([
+      'Server rendered',
+      'Client rendered',
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+    expect(ref.current).not.toBe(span);
+  });
+
+  // @gate enableActivity
+  it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
+    const ref = React.createRef();
+    let shouldSuspend = false;
+    let resolve;
+    const promise = new Promise(res => {
+      resolve = () => {
+        shouldSuspend = false;
+        res();
+      };
+    });
+    function Suspender() {
+      if (shouldSuspend) {
+        throw promise;
+      }
+      return <></>;
+    }
+    function App({hasB}) {
+      return (
+        <div>
+          <Activity>
+            <Suspender />
+            <span ref={ref}>A</span>
+            {hasB ? <span>B</span> : null}
+          </Activity>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    shouldSuspend = true;
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+
+    await act(() => {
+      resolve();
+    });
+
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).not.toBe(span);
+  });
+
+  // @gate enableActivity
+  it('recovers with client render when server rendered additional nodes deep inside suspense root', async () => {
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Activity>
+            <div>
+              <span ref={ref}>A</span>
+              {hasB ? <span>B</span> : null}
+            </div>
+          </Activity>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).not.toBe(span);
+  });
+
+  // @gate enableActivity
+  it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App({deleted}) {
+      if (deleted) {
+        return null;
+      }
+      return (
+        <div>
+          <Activity>
+            <Child />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const deleted = [];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = await act(() => {
+      return ReactDOMClient.hydrateRoot(container, <App />, {
+        onDeleted(node) {
+          deleted.push(node);
+        },
+      });
+    });
+
+    expect(deleted.length).toBe(0);
+
+    await act(() => {
+      root.render(<App deleted={true} />);
+    });
+
+    // The callback should have been invoked.
+    expect(deleted.length).toBe(1);
+  });
+
+  // @gate enableActivity
+  it('can insert siblings before the dehydrated boundary', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    let showSibling;
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Second';
+      }
+    }
+
+    function Sibling() {
+      const [visible, setVisibilty] = React.useState(false);
+      showSibling = () => setVisibilty(true);
+      if (visible) {
+        return <div>First</div>;
+      }
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Sibling />
+          <Activity>
+            <span>
+              <Child />
+            </span>
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
+
+    // In this state, we can still update the siblings.
+    await act(() => showSibling());
+
+    expect(container.firstChild.firstChild.tagName).toBe('DIV');
+    expect(container.firstChild.firstChild.textContent).toBe('First');
+  });
+
+  // @gate enableActivity
+  it('can delete the dehydrated boundary before it is hydrated', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    let hideMiddle;
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <>
+            <div>Middle</div>
+            Some text
+          </>
+        );
+      }
+    }
+
+    function App() {
+      const [visible, setVisibilty] = React.useState(true);
+      hideMiddle = () => setVisibilty(false);
+
+      return (
+        <div>
+          <div>Before</div>
+          {visible ? (
+            <Activity>
+              <Child />
+            </Activity>
+          ) : null}
+          <div>After</div>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(container.firstChild.children[1].textContent).toBe('Middle');
+
+    // In this state, we can still delete the boundary.
+    await act(() => hideMiddle());
+
+    expect(container.firstChild.children[1].textContent).toBe('After');
+  });
+
+  // @gate enableActivity
+  it('blocks updates to hydrate the content first if props have changed', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Activity>
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+    await waitForAll([]);
+
+    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.
+    root.render(<App text="Hi" className="hi" />);
+
+    // At the same time, resolving the promise so that rendering can complete.
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    const 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(span.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');
+  });
+
+  // @gate enableActivity && www
+  it('blocks updates to hydrate the content first if props changed at idle priority', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Activity>
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+    expect(span.textContent).toBe('Hello');
+
+    // Schedule an update at idle priority
+    ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    // At the same time, 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.
+    await waitForAll([]);
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    const 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(span.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');
+  });
+
+  // @gate enableActivity
+  it('shows the fallback of the parent if props have changed before hydration completes and is still suspended', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const outerRef = React.createRef();
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <Suspense fallback="Loading...">
+          <div ref={outerRef}>
+            <Activity>
+              <span ref={ref} className={className}>
+                <Child text={text} />
+              </span>
+            </Activity>
+          </div>
+        </Suspense>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    expect(container.getElementsByTagName('div').length).toBe(1); // hidden
+    const div = container.getElementsByTagName('div')[0];
+
+    expect(outerRef.current).toBe(div);
+    expect(ref.current).toBe(null);
+
+    // Render an update, but leave it still suspended.
+    await act(() => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    // Flushing now should hide the existing content and show the fallback.
+
+    expect(outerRef.current).toBe(null);
+    expect(div.style.display).toBe('none');
+    expect(container.getElementsByTagName('span').length).toBe(1); // hidden
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('HelloLoading...');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+  });
+
+  // @gate enableActivity
+  it('clears nested activity boundaries if they did not hydrate yet', async () => {
+    let suspend = false;
+    const promise = new Promise(() => {});
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend && text !== 'Hi') {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Activity>
+            <Activity>
+              <Child text={text} />
+            </Activity>{' '}
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Render an update, that unblocks.
+    // Flushing now should delete the existing content and show the update.
+    await act(() => {
+      root.render(<App text="Hi" className="hi" />);
+    });
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi Hi');
+  });
+
+  // @gate enableActivity
+  it('hydrates first if props changed but we are able to resolve within a timeout', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Activity>
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Render an update with a long timeout.
+    React.startTransition(() => root.render(<App text="Hi" className="hi" />));
+    // This shouldn't force the fallback yet.
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Hello');
+
+    // Resolving the promise so that rendering can complete.
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    suspend = false;
+    await act(() => resolve());
+
+    // The new span should be the same since we should have successfully hydrated
+    // before changing it.
+    const 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');
+  });
+
+  // @gate enableActivity
+  it('warns but works if setState is called before commit in a dehydrated component', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let updateText;
+
+    function Child() {
+      const [state, setState] = React.useState('Hello');
+      updateText = setState;
+      Scheduler.log('Child');
+      if (suspend) {
+        throw promise;
+      } else {
+        return state;
+      }
+    }
+
+    function Sibling() {
+      Scheduler.log('Sibling');
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <Child />
+            <Sibling />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['Child', 'Sibling']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
+
+    await act(async () => {
+      suspend = true;
+      await waitFor(['Child']);
+
+      // While we're part way through the hydration, we update the state.
+      // This will schedule an update on the children of the activity boundary.
+      updateText('Hi');
+      assertConsoleErrorDev([
+        "Can't perform a React state update on a component that hasn't mounted yet. " +
+          'This indicates that you have a side-effect in your render function that ' +
+          'asynchronously tries to update the component. Move this work to useEffect instead.\n' +
+          '    in App (at **)',
+      ]);
+
+      // This will throw it away and rerender.
+      await waitForAll(['Child']);
+
+      expect(container.textContent).toBe('Hello');
+
+      suspend = false;
+      resolve();
+      await promise;
+    });
+    assertLog(['Child', 'Sibling']);
+
+    expect(container.textContent).toBe('Hello');
+  });
+
+  // @gate enableActivity
+  it('blocks the update to hydrate first if context has changed', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+    const Context = React.createContext(null);
+
+    function Child() {
+      const {text, className} = React.useContext(Context);
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <span ref={ref} className={className}>
+            {text}
+          </span>
+        );
+      }
+    }
+
+    const App = React.memo(function App() {
+      return (
+        <div>
+          <Activity>
+            <Child />
+          </Activity>
+        </div>
+      );
+    });
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+    );
+    await waitForAll([]);
+
+    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.
+    root.render(
+      <Context.Provider value={{text: 'Hi', className: 'hi'}}>
+        <App />
+      </Context.Provider>,
+    );
+
+    // At the same time, resolving the promise so that rendering can complete.
+    // This should first complete the hydration and then flush the update onto the hydrated state.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // Since this should have been hydrated, this should still be the same span.
+    const 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);
+    expect(span.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');
+  });
+
+  // @gate enableActivity
+  it('shows the parent fallback if context has changed before hydration completes and is still suspended', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+    const Context = React.createContext(null);
+
+    function Child() {
+      const {text, className} = React.useContext(Context);
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <span ref={ref} className={className}>
+            {text}
+          </span>
+        );
+      }
+    }
+
+    const App = React.memo(function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <div>
+            <Activity>
+              <Child />
+            </Activity>
+          </div>
+        </Suspense>
+      );
+    });
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <Context.Provider value={{text: 'Hello', className: 'hello'}}>
+        <App />
+      </Context.Provider>,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    expect(ref.current).toBe(null);
+
+    // Render an update, but leave it still suspended.
+    // Flushing now should delete the existing content and show the fallback.
+    await act(() => {
+      root.render(
+        <Context.Provider value={{text: 'Hi', className: 'hi'}}>
+          <App />
+        </Context.Provider>,
+      );
+    });
+
+    expect(container.getElementsByTagName('span').length).toBe(1); // hidden
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('HelloLoading...');
+
+    // Unsuspending shows the content.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+  });
+
+  // @gate enableActivity
+  it('can hydrate TWO activity boundaries', async () => {
+    const ref1 = React.createRef();
+    const ref2 = React.createRef();
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <span ref={ref1}>1</span>
+          </Activity>
+          <Activity>
+            <span ref={ref2}>2</span>
+          </Activity>
+        </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.
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span1 = container.getElementsByTagName('span')[0];
+    const span2 = container.getElementsByTagName('span')[1];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(ref1.current).toBe(span1);
+    expect(ref2.current).toBe(span2);
+  });
+
+  // @gate enableActivity
+  it('regenerates if it cannot hydrate before changes to props/context expire', async () => {
+    let suspend = false;
+    const promise = new Promise(resolvePromise => {});
+    const ref = React.createRef();
+    const ClassName = React.createContext(null);
+
+    function Child({text}) {
+      const 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>
+          <Activity>
+            <Child text={text} />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(
+      <ClassName.Provider value={'hello'}>
+        <App text="Hello" />
+      </ClassName.Provider>,
+    );
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <ClassName.Provider value={'hello'}>
+        <App text="Hello" />
+      </ClassName.Provider>,
+      {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      },
+    );
+    await waitForAll([]);
+
+    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.
+    // Since we're still suspended on the original data, we can't hydrate.
+    // This will force all expiration times to flush.
+    await act(() => {
+      root.render(
+        <ClassName.Provider value={'hi'}>
+          <App text="Hi" />
+        </ClassName.Provider>,
+      );
+    });
+
+    // This will now be a new span because we weren't able to hydrate before
+    const 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');
+  });
+
+  // @gate enableActivity
+  it('does not invoke an event on a hydrated node until it commits', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let clicks = 0;
+
+    function Button() {
+      const [clicked, setClicked] = React.useState(false);
+      if (clicked) {
+        return null;
+      }
+      return (
+        <a
+          onClick={() => {
+            setClicked(true);
+            clicks++;
+          }}>
+          Click me
+        </a>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <Button />
+            <Sibling />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(container.textContent).toBe('Click meHello');
+
+    // We're now partially hydrated.
+    await act(() => {
+      a.click();
+    });
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicks).toBe(0);
+    expect(container.textContent).toBe('Click meHello');
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity && www
+  it('does not invoke an event on a hydrated event handle until it commits', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    const onEvent = jest.fn();
+
+    function Button() {
+      const ref = React.useRef(null);
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, onEvent);
+        });
+      }
+      return <a ref={ref}>Click me</a>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <Button />
+            <Sibling />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    isServerRendering = false;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      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.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('invokes discrete events on nested activity boundaries in a root (legacy system)', async () => {
+    let suspend = false;
+    let resolve;
+    const 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 (
+          <Activity>
+            <Button />
+          </Activity>
+        );
+      }
+    }
+
+    function App() {
+      return (
+        <Activity>
+          <Child />
+        </Activity>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // We'll do one click before hydrating.
+    await act(() => {
+      a.click();
+    });
+    // This should be delayed.
+    expect(clicks).toBe(0);
+
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      a.click();
+    });
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicks).toBe(0);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity && www
+  it('invokes discrete events on nested activity boundaries in a root (createEventHandle)', async () => {
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    const onEvent = jest.fn();
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+
+    function Button() {
+      const ref = React.useRef(null);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, onEvent);
+        });
+      }
+
+      return <a ref={ref}>Click me</a>;
+    }
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return (
+          <Activity>
+            <Button />
+          </Activity>
+        );
+      }
+    }
+
+    function App() {
+      return (
+        <Activity>
+          <Child />
+        </Activity>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const a = container.getElementsByTagName('a')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    isServerRendering = false;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // We'll do one click before hydrating.
+    a.click();
+    // This should be delayed.
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      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.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(onEvent).toHaveBeenCalledTimes(0);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('does not invoke the parent of dehydrated boundary event', async () => {
+    let suspend = false;
+    let resolve;
+    const 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++}>
+          <Activity>
+            <Child />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    // We're now partially hydrated.
+    await act(() => {
+      span.click();
+    });
+    expect(clicksOnChild).toBe(0);
+    expect(clicksOnParent).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicksOnChild).toBe(0);
+    expect(clicksOnParent).toBe(0);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('does not invoke an event on a parent tree when a subtree is dehydrated', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    let clicks = 0;
+    const 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 (
+        <Activity>
+          <Child />
+        </Activity>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const parentContainer = document.createElement('div');
+    const 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.
+    const parentRoot = ReactDOMClient.createRoot(parentContainer);
+    await act(() => parentRoot.render(<Parent />));
+
+    childSlotRef.current.appendChild(childContainer);
+
+    childContainer.innerHTML = finalHTML;
+
+    const a = childContainer.getElementsByTagName('a')[0];
+
+    suspend = true;
+
+    // Hydrate asynchronously.
+    await act(() => ReactDOMClient.hydrateRoot(childContainer, <App />));
+
+    // The Suspense boundary is not yet hydrated.
+    await act(() => {
+      a.click();
+    });
+    expect(clicks).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    expect(clicks).toBe(0);
+
+    document.body.removeChild(parentContainer);
+  });
+
+  // @gate enableActivity
+  it('blocks only on the last continuous event (legacy system)', async () => {
+    let suspend1 = false;
+    let resolve1;
+    const promise1 = new Promise(resolvePromise => (resolve1 = resolvePromise));
+    let suspend2 = false;
+    let resolve2;
+    const 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';
+      }
+    }
+
+    const ops = [];
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <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 />
+          </Activity>
+          <Activity>
+            <span
+              onMouseEnter={() => ops.push('Mouse Enter Second')}
+              onMouseLeave={() => ops.push('Mouse Leave Second')}>
+              <Second />
+            </span>
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const appDiv = container.getElementsByTagName('div')[0];
+    const firstSpan = appDiv.getElementsByTagName('span')[0];
+    const 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;
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    await waitForAll([]);
+
+    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;
+
+    await waitForAll([]);
+
+    // 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;
+
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Mouse Enter Second']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('finishes normal pri work before continuing to hydrate a retry', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const ref = React.createRef();
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        Scheduler.log('Child');
+        return 'Hello';
+      }
+    }
+
+    function Sibling() {
+      Scheduler.log('Sibling');
+      React.useLayoutEffect(() => {
+        Scheduler.log('Commit Sibling');
+      });
+      return 'World';
+    }
+
+    // Avoid rerendering the tree by hoisting it.
+    const tree = (
+      <Activity>
+        <span ref={ref}>
+          <Child />
+        </span>
+      </Activity>
+    );
+
+    function App({showSibling}) {
+      return (
+        <div>
+          {tree}
+          {showSibling ? <Sibling /> : null}
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['Child']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showSibling={false} />,
+    );
+    await waitForAll([]);
+
+    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.
+    await waitFor(['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');
+
+    await waitForAll(['Child']);
+
+    // Now we're hydrated.
+    expect(ref.current).not.toBe(null);
+  });
+
+  // @gate enableActivity
+  it('regression test: does not overfire non-bubbling browser events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Sibling({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    let submits = 0;
+
+    function Form() {
+      const [submitted, setSubmitted] = React.useState(false);
+      if (submitted) {
+        return null;
+      }
+      return (
+        <form
+          onSubmit={() => {
+            setSubmitted(true);
+            submits++;
+          }}>
+          Click me
+        </form>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Activity>
+            <Form />
+            <Sibling />
+          </Activity>
+        </div>
+      );
+    }
+
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const 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);
+
+    const form = container.getElementsByTagName('form')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOMClient.hydrateRoot(container, <App />);
+    await waitForAll([]);
+
+    expect(container.textContent).toBe('Click meHello');
+
+    // We're now partially hydrated.
+    await act(() => {
+      form.dispatchEvent(
+        new window.Event('submit', {
+          bubbles: true,
+        }),
+      );
+    });
+    expect(submits).toBe(0);
+
+    // Resolving the promise so that rendering can complete.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // discrete event not replayed
+    expect(submits).toBe(0);
+    expect(container.textContent).toBe('Click meHello');
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('fallback to client render on hydration mismatch at root', async () => {
+    let suspend = true;
+    let resolve;
+    const promise = new Promise((res, rej) => {
+      resolve = () => {
+        suspend = false;
+        res();
+      };
+    });
+    function App({isClient}) {
+      return (
+        <>
+          <Activity>
+            <ChildThatSuspends id={1} isClient={isClient} />
+          </Activity>
+          {isClient ? <span>client</span> : <div>server</div>}
+          <Activity>
+            <ChildThatSuspends id={2} isClient={isClient} />
+          </Activity>
+        </>
+      );
+    }
+    function ChildThatSuspends({id, isClient}) {
+      if (isClient && suspend) {
+        throw promise;
+      }
+      return <div>{id}</div>;
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App isClient={false} />);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + normalizeError(error.message));
+          if (error.cause) {
+            Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+          }
+        },
+      });
+    });
+
+    // We suspend the root while we wait for the promises to resolve, leaving the
+    // existing content in place.
+    expect(container.innerHTML).toEqual(
+      '<!--&--><div>1</div><!--/&--><div>server</div><!--&--><div>2</div><!--/&-->',
+    );
+
+    await act(async () => {
+      resolve();
+      await promise;
+    });
+
+    assertLog([
+      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+    ]);
+
+    expect(container.innerHTML).toEqual(
+      '<div>1</div><span>client</span><div>2</div>',
+    );
+  });
+});
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 00000000000..cbc4b5256c1
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -0,0 +1,1912 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let ReactFeatureFlags;
+let Scheduler;
+let Suspense;
+let act;
+let assertLog;
+let waitForAll;
+let waitFor;
+let waitForPaint;
+
+let IdleEventPriority;
+let ContinuousEventPriority;
+
+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);
+}
+
+// TODO: There's currently no React DOM API to opt into Idle priority updates,
+// and there's no native DOM event that maps to idle priority, so this is a
+// temporary workaround. Need something like ReactDOM.unstable_IdleUpdates.
+function TODO_scheduleIdleDOMSchedulerTask(fn) {
+  ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
+    const prevEvent = window.event;
+    window.event = {type: 'message'};
+    try {
+      fn();
+    } finally {
+      window.event = prevEvent;
+    }
+  });
+}
+
+function TODO_scheduleContinuousSchedulerTask(fn) {
+  ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => {
+    const prevEvent = window.event;
+    window.event = {type: 'message'};
+    try {
+      fn();
+    } finally {
+      window.event = prevEvent;
+    }
+  });
+}
+
+describe('ReactDOMServerSelectiveHydration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableCreateEventHandleAPI = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+
+    IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
+    ContinuousEventPriority =
+      require('react-reconciler/constants').ContinuousEventPriority;
+  });
+
+  it('hydrates the target boundary synchronously during a click', async () => {
+    function Child({text}) {
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B']);
+
+    const 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;
+
+    const span = container.getElementsByTagName('span')[1];
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    const 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.
+    assertLog(['App', 'B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    await waitForAll(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates at higher pri if sync did not work first time', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This click target cannot be hydrated yet because it's suspended.
+    await act(() => {
+      const result = dispatchClickEvent(spanD);
+      expect(result).toBe(true);
+    });
+    assertLog([
+      'App',
+      // Continuing rendering will render B next.
+      'B',
+      'C',
+    ]);
+
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    assertLog(['D', 'A']);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates at higher pri for secondary discrete events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanC = container.getElementsByTagName('span')[2];
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This click target cannot be hydrated yet because the first is Suspended.
+    dispatchClickEvent(spanA);
+    dispatchClickEvent(spanC);
+    dispatchClickEvent(spanD);
+
+    assertLog(['App', 'C', 'Clicked C']);
+
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    assertLog([
+      'A',
+      'D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate www
+  it('hydrates the target boundary synchronously during a click (createEventHandle)', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+    let isServerRendering = true;
+
+    function Child({text}) {
+      const ref = React.useRef(null);
+      Scheduler.log(text);
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, () => {
+            Scheduler.log('Clicked ' + text);
+          });
+        });
+      }
+
+      return <span ref={ref}>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B']);
+
+    const 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;
+
+    isServerRendering = false;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    const span = container.getElementsByTagName('span')[1];
+
+    const target = createEventTarget(span);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    target.virtualclick();
+
+    // We rendered App, B and then invoked the event without rendering A.
+    assertLog(['App', 'B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    await waitForAll(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate www
+  it('hydrates at higher pri if sync did not work first time (createEventHandle)', async () => {
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+
+    function Child({text}) {
+      const ref = React.useRef(null);
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, () => {
+            Scheduler.log('Clicked ' + text);
+          });
+        });
+      }
+
+      return <span ref={ref}>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+    isServerRendering = false;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // Continuing rendering will render B next.
+    await act(() => {
+      const target = createEventTarget(spanD);
+      target.virtualclick();
+    });
+    assertLog(['App', 'B', 'C']);
+
+    // After the click, we should prioritize D and the Click first,
+    // and only after that render A and C.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // no replay
+    assertLog(['D', 'A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate www
+  it('hydrates at higher pri for secondary discrete events (createEventHandle)', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      const ref = React.useRef(null);
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, () => {
+            Scheduler.log('Clicked ' + text);
+          });
+        });
+      }
+      return <span ref={ref}>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanC = container.getElementsByTagName('span')[2];
+    const spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+    isServerRendering = false;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This click target cannot be hydrated yet because the first is Suspended.
+    createEventTarget(spanA).virtualclick();
+    createEventTarget(spanC).virtualclick();
+    createEventTarget(spanD).virtualclick();
+
+    assertLog(['App', 'C', 'Clicked C']);
+
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    assertLog([
+      'A',
+      'D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates the hovered targets as higher priority for continuous events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.log('Hover ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('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>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+    const 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;
+
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    await act(() => {
+      // Click D
+      dispatchMouseHoverEvent(spanD, null);
+      dispatchClickEvent(spanD);
+
+      // Hover over B and then C.
+      dispatchMouseHoverEvent(spanB, spanD);
+      dispatchMouseHoverEvent(spanC, spanB);
+
+      assertLog(['App']);
+
+      suspend = false;
+      resolve();
+    });
+
+    // We should prioritize hydrating D first because we clicked it.
+    // but event isnt replayed
+    assertLog([
+      'D',
+      'B', // Ideally this should be later.
+      'C',
+      'Hover C',
+      'A',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  it('replays capture phase for continuous events and respects stopPropagation', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          id={text}
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.log('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.log('Mouse Enter ' + text);
+          }}
+          onMouseOut={e => {
+            e.preventDefault();
+            Scheduler.log('Mouse Out ' + text);
+          }}
+          onMouseOutCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.log('Mouse Out Capture ' + text);
+          }}
+          onMouseOverCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.log('Mouse Over Capture ' + text);
+          }}
+          onMouseOver={e => {
+            e.preventDefault();
+            Scheduler.log('Mouse Over ' + text);
+          }}>
+          <div
+            onMouseOverCapture={e => {
+              e.preventDefault();
+              Scheduler.log('Mouse Over Capture Inner ' + text);
+            }}>
+            {text}
+          </div>
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.log('Capture Clicked Parent');
+          }}
+          onMouseOverCapture={e => {
+            Scheduler.log('Mouse Over Capture Parent');
+          }}>
+          <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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanB = document.getElementById('B').firstChild;
+    const spanC = document.getElementById('C').firstChild;
+    const spanD = document.getElementById('D').firstChild;
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    await act(async () => {
+      // Click D
+      dispatchMouseHoverEvent(spanD, null);
+      dispatchClickEvent(spanD);
+      // Hover over B and then C.
+      dispatchMouseHoverEvent(spanB, spanD);
+      dispatchMouseHoverEvent(spanC, spanB);
+
+      assertLog(['App']);
+
+      suspend = false;
+      resolve();
+    });
+
+    // We should prioritize hydrating D first because we clicked it.
+    // but event isnt replayed
+    assertLog([
+      'D',
+      'B', // Ideally this should be later.
+      'C',
+      // Mouse out events aren't replayed
+      // 'Mouse Out Capture B',
+      // 'Mouse Out B',
+      'Mouse Over Capture Parent',
+      'Mouse Over Capture C',
+      // Stop propagation stops these
+      // 'Mouse Over Capture Inner C',
+      // 'Mouse Over C',
+      'A',
+    ]);
+
+    // This test shows existing quirk where stopPropagation on mouseout
+    // prevents mouseEnter from firing
+    dispatchMouseHoverEvent(spanC, spanB);
+    assertLog([
+      'Mouse Out Capture B',
+      // stopPropagation stops these
+      // 'Mouse Out B',
+      // 'Mouse Enter C',
+      'Mouse Over Capture Parent',
+      'Mouse Over Capture C',
+      // Stop propagation stops these
+      // 'Mouse Over Capture Inner C',
+      // 'Mouse Over C',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  describe('can handle replaying events as part of multiple instances of React', () => {
+    let resolveInner;
+    let resolveOuter;
+    let innerPromise;
+    let outerPromise;
+    let OuterScheduler;
+    let InnerScheduler;
+    let innerDiv;
+
+    let OuterTestUtils;
+    let InnerTestUtils;
+
+    beforeEach(async () => {
+      document.body.innerHTML = '';
+      jest.resetModules();
+      let OuterReactDOMClient;
+      let InnerReactDOMClient;
+
+      jest.isolateModules(() => {
+        OuterReactDOMClient = require('react-dom/client');
+        OuterScheduler = require('scheduler');
+        OuterTestUtils = require('internal-test-utils');
+      });
+      jest.isolateModules(() => {
+        InnerReactDOMClient = require('react-dom/client');
+        InnerScheduler = require('scheduler');
+        InnerTestUtils = require('internal-test-utils');
+      });
+
+      expect(OuterReactDOMClient).not.toBe(InnerReactDOMClient);
+      expect(OuterScheduler).not.toBe(InnerScheduler);
+
+      const outerContainer = document.createElement('div');
+      const innerContainer = document.createElement('div');
+
+      let suspendOuter = false;
+      outerPromise = new Promise(res => {
+        resolveOuter = () => {
+          suspendOuter = false;
+          res();
+        };
+      });
+
+      function Outer() {
+        if (suspendOuter) {
+          OuterScheduler.log('Suspend Outer');
+          throw outerPromise;
+        }
+        OuterScheduler.log('Outer');
+        const innerRoot = outerContainer.querySelector('#inner-root');
+        return (
+          <div
+            id="inner-root"
+            onMouseEnter={() => {
+              Scheduler.log('Outer Mouse Enter');
+            }}
+            dangerouslySetInnerHTML={{
+              __html: innerRoot ? innerRoot.innerHTML : '',
+            }}
+          />
+        );
+      }
+      const OuterApp = () => {
+        return (
+          <Suspense fallback={<div>Loading</div>}>
+            <Outer />
+          </Suspense>
+        );
+      };
+
+      let suspendInner = false;
+      innerPromise = new Promise(res => {
+        resolveInner = () => {
+          suspendInner = false;
+          res();
+        };
+      });
+      function Inner() {
+        if (suspendInner) {
+          InnerScheduler.log('Suspend Inner');
+          throw innerPromise;
+        }
+        InnerScheduler.log('Inner');
+        return (
+          <div
+            id="inner"
+            onMouseEnter={() => {
+              Scheduler.log('Inner Mouse Enter');
+            }}
+          />
+        );
+      }
+      const InnerApp = () => {
+        return (
+          <Suspense fallback={<div>Loading</div>}>
+            <Inner />
+          </Suspense>
+        );
+      };
+
+      document.body.appendChild(outerContainer);
+      const outerHTML = ReactDOMServer.renderToString(<OuterApp />);
+      outerContainer.innerHTML = outerHTML;
+
+      const innerWrapper = document.querySelector('#inner-root');
+      innerWrapper.appendChild(innerContainer);
+      const innerHTML = ReactDOMServer.renderToString(<InnerApp />);
+      innerContainer.innerHTML = innerHTML;
+
+      OuterTestUtils.assertLog(['Outer']);
+      InnerTestUtils.assertLog(['Inner']);
+
+      suspendOuter = true;
+      suspendInner = true;
+
+      await OuterTestUtils.act(() =>
+        OuterReactDOMClient.hydrateRoot(outerContainer, <OuterApp />),
+      );
+      await InnerTestUtils.act(() =>
+        InnerReactDOMClient.hydrateRoot(innerContainer, <InnerApp />),
+      );
+
+      OuterTestUtils.assertLog(['Suspend Outer']);
+      InnerTestUtils.assertLog(['Suspend Inner']);
+
+      innerDiv = document.querySelector('#inner');
+
+      dispatchClickEvent(innerDiv);
+
+      await act(() => {
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      OuterTestUtils.assertLog(['Suspend Outer']);
+
+      // InnerApp doesn't see the event because OuterApp calls stopPropagation in
+      // capture phase since the event is blocked on suspended component
+      InnerTestUtils.assertLog([]);
+
+      assertLog([]);
+    });
+    afterEach(async () => {
+      document.body.innerHTML = '';
+    });
+
+    it('Inner hydrates first then Outer', async () => {
+      dispatchMouseHoverEvent(innerDiv);
+
+      await InnerTestUtils.act(async () => {
+        await OuterTestUtils.act(() => {
+          resolveInner();
+        });
+      });
+
+      OuterTestUtils.assertLog(['Suspend Outer']);
+      // Inner App renders because it is unblocked
+      InnerTestUtils.assertLog(['Inner']);
+      // No event is replayed yet
+      assertLog([]);
+
+      dispatchMouseHoverEvent(innerDiv);
+      OuterTestUtils.assertLog([]);
+      InnerTestUtils.assertLog([]);
+      // No event is replayed yet
+      assertLog([]);
+
+      await InnerTestUtils.act(async () => {
+        await OuterTestUtils.act(() => {
+          resolveOuter();
+
+          // Nothing happens to inner app yet.
+          // Its blocked on the outer app replaying the event
+          InnerTestUtils.assertLog([]);
+          // Outer hydrates and schedules Replay
+          OuterTestUtils.waitFor(['Outer']);
+          // No event is replayed yet
+          assertLog([]);
+        });
+      });
+
+      // fire scheduled Replay
+
+      // First Inner Mouse Enter fires then Outer Mouse Enter
+      assertLog(['Inner Mouse Enter', 'Outer Mouse Enter']);
+    });
+
+    it('Outer hydrates first then Inner', async () => {
+      dispatchMouseHoverEvent(innerDiv);
+
+      await act(async () => {
+        resolveOuter();
+        await outerPromise;
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Outer resolves and scheduled replay
+      OuterTestUtils.assertLog(['Outer']);
+      // Inner App is still blocked
+      InnerTestUtils.assertLog([]);
+
+      // Replay outer event
+      await act(() => {
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Inner is still blocked so when Outer replays the event in capture phase
+      // inner ends up caling stopPropagation
+      assertLog([]);
+      OuterTestUtils.assertLog([]);
+      InnerTestUtils.assertLog(['Suspend Inner']);
+
+      dispatchMouseHoverEvent(innerDiv);
+      OuterTestUtils.assertLog([]);
+      InnerTestUtils.assertLog([]);
+      assertLog([]);
+
+      await act(async () => {
+        resolveInner();
+        await innerPromise;
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Inner hydrates
+      InnerTestUtils.assertLog(['Inner']);
+      // Outer was hydrated earlier
+      OuterTestUtils.assertLog([]);
+
+      // First Inner Mouse Enter fires then Outer Mouse Enter
+      assertLog(['Inner Mouse Enter', 'Outer Mouse Enter']);
+
+      await act(() => {
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      assertLog([]);
+    });
+  });
+
+  it('replays event with null target when tree is dismounted', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.log('Child');
+      return (
+        <div
+          onMouseOver={() => {
+            Scheduler.log('on mouse over');
+          }}>
+          Child
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <Suspense>
+          <Child />
+        </Suspense>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['Child']);
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    suspend = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    const childDiv = container.firstElementChild;
+
+    await act(async () => {
+      dispatchMouseHoverEvent(childDiv);
+
+      // Not hydrated so event is saved for replay and stopPropagation is called
+      assertLog([]);
+
+      resolve();
+      await waitFor(['Child']);
+
+      ReactDOM.flushSync(() => {
+        container.removeChild(childDiv);
+
+        const container2 = document.createElement('div');
+        container2.addEventListener('mouseover', () => {
+          Scheduler.log('container2 mouse over');
+        });
+        container2.appendChild(childDiv);
+      });
+    });
+
+    // Even though the tree is remove the event is still dispatched with native event handler
+    // on the container firing.
+    assertLog(['container2 mouse over']);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates the last target path first for continuous events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.log('Hover ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <div>
+              <Suspense fallback="Loading...">
+                <Child text="B" />
+              </Suspense>
+            </div>
+            <Child text="C" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="D" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // Hover over B and then C.
+    dispatchMouseHoverEvent(spanB, spanD);
+    dispatchMouseHoverEvent(spanC, spanB);
+
+    await act(async () => {
+      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.
+    assertLog(['App', 'C', 'Hover C', 'A', 'B', 'D']);
+
+    document.body.removeChild(container);
+  });
+
+  it('hydrates the last explicitly hydrated target at higher priority', async () => {
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('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>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // Increase priority of B and then C.
+    root.unstable_scheduleHydration(spanB);
+    root.unstable_scheduleHydration(spanC);
+
+    // We should prioritize hydrating C first because the last added
+    // gets highest priority followed by the next added.
+    await waitForAll(['App', 'C', 'B', 'A']);
+  });
+
+  // @gate www
+  it('hydrates before an update even if hydration moves away from it', async () => {
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+    const ChildWithBoundary = React.memo(function ({text}) {
+      return (
+        <Suspense fallback="Loading...">
+          <Child text={text} />
+          <Child text={text.toLowerCase()} />
+        </Suspense>
+      );
+    });
+
+    function App({a}) {
+      Scheduler.log('App');
+      React.useEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <div>
+          <ChildWithBoundary text={a} />
+          <ChildWithBoundary text="B" />
+          <ChildWithBoundary text="C" />
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+
+    assertLog(['App', 'A', 'a', 'B', 'b', 'C', 'c']);
+
+    const 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);
+
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanB = container.getElementsByTagName('span')[2];
+    const spanC = container.getElementsByTagName('span')[4];
+
+    await act(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
+      // Hydrate the shell.
+      await waitFor(['App', 'Commit']);
+
+      // Render an update at Idle priority that needs to update A.
+
+      TODO_scheduleIdleDOMSchedulerTask(() => {
+        root.render(<App a="AA" />);
+      });
+
+      // Start rendering. This will force the first boundary to hydrate
+      // by scheduling it at one higher pri than Idle.
+      await waitFor([
+        'App',
+
+        // Start hydrating A
+        'A',
+      ]);
+
+      // Hover over A which (could) schedule at one higher pri than Idle.
+      dispatchMouseHoverEvent(spanA, null);
+
+      // Before, we're done we now switch to hover over B.
+      // This is meant to test that this doesn't cause us to forget that
+      // we still have to hydrate A. The first boundary.
+      // This also tests that we don't do the -1 down-prioritization of
+      // continuous hover events because that would decrease its priority
+      // to Idle.
+      dispatchMouseHoverEvent(spanB, spanA);
+
+      // Also click C to prioritize that even higher which resets the
+      // priority levels.
+      dispatchClickEvent(spanC);
+
+      assertLog([
+        // Hydrate C first since we clicked it.
+        'C',
+        'c',
+      ]);
+
+      await waitForAll([
+        // Finish hydration of A since we forced it to hydrate.
+        'A',
+        'a',
+        // Also, hydrate B since we hovered over it.
+        // It's not important which one comes first. A or B.
+        // As long as they both happen before the Idle update.
+        'B',
+        'b',
+        // Begin the Idle update again.
+        'App',
+        'AA',
+        'aa',
+        'Commit',
+      ]);
+    });
+
+    const spanA2 = container.getElementsByTagName('span')[0];
+    // This is supposed to have been hydrated, not replaced.
+    expect(spanA).toBe(spanA2);
+
+    document.body.removeChild(container);
+  });
+
+  it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {
+    spyOnDev(console, 'error');
+    function Child({text}) {
+      Scheduler.log(text);
+      const ref = React.useRef();
+      React.useLayoutEffect(() => {
+        if (!ref.current) {
+          return;
+        }
+        ref.current.onclick = () => {
+          Scheduler.log('Native Click ' + text);
+        };
+      }, [text]);
+      return (
+        <span
+          ref={ref}
+          onClickCapture={() => {
+            Scheduler.log('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B']);
+
+    const 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;
+
+    const span = container.getElementsByTagName('span')[1];
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    dispatchClickEvent(span);
+
+    // We rendered App, B and then invoked the event without rendering A.
+    assertLog(['App', 'B', 'Capture Clicked B', 'Native Click B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    await waitForAll(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  it('does not propagate discrete event if it cannot be synchronously hydrated', async () => {
+    let triggeredParent = false;
+    let triggeredChild = false;
+    let suspend = false;
+    const promise = new Promise(() => {});
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.log('Child');
+      return (
+        <span
+          onClickCapture={e => {
+            e.stopPropagation();
+            triggeredChild = true;
+          }}>
+          Click me
+        </span>
+      );
+    }
+    function App() {
+      const onClick = () => {
+        triggeredParent = true;
+      };
+      Scheduler.log('App');
+      return (
+        <div
+          ref={n => {
+            if (n) n.onclick = onClick;
+          }}
+          onClick={onClick}>
+          <Suspense fallback={null}>
+            <Child />
+          </Suspense>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'Child']);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    const span = container.getElementsByTagName('span')[0];
+    dispatchClickEvent(span);
+
+    assertLog(['App']);
+
+    dispatchClickEvent(span);
+
+    expect(triggeredParent).toBe(false);
+    expect(triggeredChild).toBe(false);
+  });
+
+  it('can attempt sync hydration if suspended root is still concurrently rendering', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Child text="A" />
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A']);
+
+    const 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;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    // We suspend on the client.
+    suspend = true;
+
+    React.startTransition(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    await waitFor(['App']);
+
+    // This should attempt to synchronously hydrate the root, then pause
+    // because it still suspended
+    const result = dispatchClickEvent(span);
+    assertLog(['App']);
+    // The event should not have been cancelled because we didn't hydrate.
+    expect(result).toBe(true);
+
+    // Finish loading the data
+    await act(async () => {
+      suspend = false;
+      await resolve();
+    });
+
+    // The app should have successfully hydrated and rendered
+    assertLog(['App', 'A']);
+
+    document.body.removeChild(container);
+  });
+
+  it('can force hydration in response to sync update', async () => {
+    function Child({text}) {
+      Scheduler.log(`Child ${text}`);
+      return <span ref={ref => (spanRef = ref)}>{text}</span>;
+    }
+    function App({text}) {
+      Scheduler.log(`App ${text}`);
+      return (
+        <div>
+          <Suspense fallback={null}>
+            <Child text={text} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let spanRef;
+    const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
+    assertLog(['App A', 'Child A']);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    const initialSpan = container.getElementsByTagName('span')[0];
+    const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
+    await waitForPaint(['App A']);
+
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<App text="B" />);
+      });
+    });
+    assertLog(['App B', 'Child A', 'App B', 'Child B']);
+    expect(initialSpan).toBe(spanRef);
+  });
+
+  // @gate www
+  it('can force hydration in response to continuous update', async () => {
+    function Child({text}) {
+      Scheduler.log(`Child ${text}`);
+      return <span ref={ref => (spanRef = ref)}>{text}</span>;
+    }
+    function App({text}) {
+      Scheduler.log(`App ${text}`);
+      return (
+        <div>
+          <Suspense fallback={null}>
+            <Child text={text} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let spanRef;
+    const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
+    assertLog(['App A', 'Child A']);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    const initialSpan = container.getElementsByTagName('span')[0];
+    const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
+    await waitForPaint(['App A']);
+
+    await act(() => {
+      TODO_scheduleContinuousSchedulerTask(() => {
+        root.render(<App text="B" />);
+      });
+    });
+
+    assertLog(['App B', 'Child A', 'App B', 'Child B']);
+    expect(initialSpan).toBe(spanRef);
+  });
+
+  it('can force hydration in response to default update', async () => {
+    function Child({text}) {
+      Scheduler.log(`Child ${text}`);
+      return <span ref={ref => (spanRef = ref)}>{text}</span>;
+    }
+    function App({text}) {
+      Scheduler.log(`App ${text}`);
+      return (
+        <div>
+          <Suspense fallback={null}>
+            <Child text={text} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let spanRef;
+    const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
+    assertLog(['App A', 'Child A']);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    const initialSpan = container.getElementsByTagName('span')[0];
+    const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
+    await waitForPaint(['App A']);
+    await act(() => {
+      root.render(<App text="B" />);
+    });
+    assertLog(['App B', 'Child A', 'App B', 'Child B']);
+    expect(initialSpan).toBe(spanRef);
+  });
+
+  // @gate www
+  it('regression test: can unwind context on selective hydration interruption', async () => {
+    const Context = React.createContext('DefaultContext');
+
+    function ContextReader(props) {
+      const value = React.useContext(Context);
+      Scheduler.log(value);
+      return null;
+    }
+
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+    const ChildWithBoundary = React.memo(function ({text}) {
+      return (
+        <Suspense fallback="Loading...">
+          <Child text={text} />
+        </Suspense>
+      );
+    });
+
+    function App({a}) {
+      Scheduler.log('App');
+      React.useEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <>
+          <Context.Provider value="SiblingContext">
+            <ChildWithBoundary text={a} />
+          </Context.Provider>
+          <ContextReader />
+        </>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+    assertLog(['App', 'A', 'DefaultContext']);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    document.body.appendChild(container);
+
+    const spanA = container.getElementsByTagName('span')[0];
+
+    await act(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
+      await waitFor(['App', 'DefaultContext', 'Commit']);
+
+      TODO_scheduleIdleDOMSchedulerTask(() => {
+        root.render(<App a="AA" />);
+      });
+      await waitFor(['App', 'A']);
+
+      dispatchClickEvent(spanA);
+      assertLog(['A']);
+      await waitForAll(['App', 'AA', 'DefaultContext', 'Commit']);
+    });
+  });
+
+  it('regression test: can unwind context on selective hydration interruption for sync updates', async () => {
+    const Context = React.createContext('DefaultContext');
+
+    function ContextReader(props) {
+      const value = React.useContext(Context);
+      Scheduler.log(value);
+      return null;
+    }
+
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+    const ChildWithBoundary = React.memo(function ({text}) {
+      return (
+        <Suspense fallback="Loading...">
+          <Child text={text} />
+        </Suspense>
+      );
+    });
+
+    function App({a}) {
+      Scheduler.log('App');
+      React.useEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <>
+          <Context.Provider value="SiblingContext">
+            <ChildWithBoundary text={a} />
+          </Context.Provider>
+          <ContextReader />
+        </>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+    assertLog(['App', 'A', 'DefaultContext']);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    await act(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
+      await waitFor(['App', 'DefaultContext', 'Commit']);
+
+      ReactDOM.flushSync(() => {
+        root.render(<App a="AA" />);
+      });
+      assertLog(['App', 'A', 'App', 'AA', 'DefaultContext', 'Commit']);
+    });
+  });
+
+  it('regression: selective hydration does not contribute to "maximum update limit" count', async () => {
+    const outsideRef = React.createRef(null);
+    const insideRef = React.createRef(null);
+    function Child() {
+      return (
+        <Suspense fallback="Loading...">
+          <div ref={insideRef} />
+        </Suspense>
+      );
+    }
+
+    let setIsMounted = false;
+    function App() {
+      const [isMounted, setState] = React.useState(false);
+      setIsMounted = setState;
+
+      const children = [];
+      for (let i = 0; i < 100; i++) {
+        children.push(<Child key={i} isMounted={isMounted} />);
+      }
+
+      return <div ref={outsideRef}>{children}</div>;
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+
+      // Commit just the shell
+      await waitForPaint([]);
+
+      // Assert that the shell has hydrated, but not the children
+      expect(outsideRef.current).not.toBe(null);
+      expect(insideRef.current).toBe(null);
+
+      // Update the shell synchronously. The update will flow into the children,
+      // which haven't hydrated yet. This will trigger a cascade of commits
+      // caused by selective hydration. However, since there's really only one
+      // update, it should not be treated as an update loop.
+      // NOTE: It's unfortunate that every sibling boundary is separately
+      // committed in this case. We should be able to commit everything in a
+      // render phase, which we could do if we had resumable context stacks.
+      ReactDOM.flushSync(() => {
+        setIsMounted(true);
+      });
+    });
+
+    // Should have successfully hydrated with no errors.
+    expect(insideRef.current).not.toBe(null);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydrationActivity-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydrationActivity-test.internal.js
new file mode 100644
index 00000000000..c2a856a0181
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydrationActivity-test.internal.js
@@ -0,0 +1,1609 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let ReactFeatureFlags;
+let Scheduler;
+let Activity;
+let act;
+let assertLog;
+let waitForAll;
+let waitFor;
+let waitForPaint;
+
+let IdleEventPriority;
+let ContinuousEventPriority;
+
+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);
+}
+
+// TODO: There's currently no React DOM API to opt into Idle priority updates,
+// and there's no native DOM event that maps to idle priority, so this is a
+// temporary workaround. Need something like ReactDOM.unstable_IdleUpdates.
+function TODO_scheduleIdleDOMSchedulerTask(fn) {
+  ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
+    const prevEvent = window.event;
+    window.event = {type: 'message'};
+    try {
+      fn();
+    } finally {
+      window.event = prevEvent;
+    }
+  });
+}
+
+function TODO_scheduleContinuousSchedulerTask(fn) {
+  ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => {
+    const prevEvent = window.event;
+    window.event = {type: 'message'};
+    try {
+      fn();
+    } finally {
+      window.event = prevEvent;
+    }
+  });
+}
+
+describe('ReactDOMServerSelectiveHydrationActivity', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableCreateEventHandleAPI = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    Scheduler = require('scheduler');
+    Activity = React.Activity;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+
+    IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
+    ContinuousEventPriority =
+      require('react-reconciler/constants').ContinuousEventPriority;
+  });
+
+  // @gate enableActivity
+  it('hydrates the target boundary synchronously during a click', async () => {
+    function Child({text}) {
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B']);
+
+    const 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;
+
+    const span = container.getElementsByTagName('span')[1];
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    const 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.
+    assertLog(['App', 'B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    await waitForAll(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('hydrates at higher pri if sync did not work first time', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This click target cannot be hydrated yet because it's suspended.
+    await act(() => {
+      const result = dispatchClickEvent(spanD);
+      expect(result).toBe(true);
+    });
+    assertLog([
+      'App',
+      // Continuing rendering will render B next.
+      'B',
+      'C',
+    ]);
+
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    assertLog(['D', 'A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('hydrates at higher pri for secondary discrete events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanC = container.getElementsByTagName('span')[2];
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This click target cannot be hydrated yet because the first is Suspended.
+    dispatchClickEvent(spanA);
+    dispatchClickEvent(spanC);
+    dispatchClickEvent(spanD);
+
+    assertLog(['App', 'C', 'Clicked C']);
+
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    assertLog([
+      'A',
+      'D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity && www
+  it('hydrates the target boundary synchronously during a click (createEventHandle)', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+    let isServerRendering = true;
+
+    function Child({text}) {
+      const ref = React.useRef(null);
+      Scheduler.log(text);
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, () => {
+            Scheduler.log('Clicked ' + text);
+          });
+        });
+      }
+
+      return <span ref={ref}>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B']);
+
+    const 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;
+
+    isServerRendering = false;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    const span = container.getElementsByTagName('span')[1];
+
+    const target = createEventTarget(span);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    target.virtualclick();
+
+    // We rendered App, B and then invoked the event without rendering A.
+    assertLog(['App', 'B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    await waitForAll(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity && www
+  it('hydrates at higher pri if sync did not work first time (createEventHandle)', async () => {
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+
+    function Child({text}) {
+      const ref = React.useRef(null);
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, () => {
+            Scheduler.log('Clicked ' + text);
+          });
+        });
+      }
+
+      return <span ref={ref}>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+    isServerRendering = false;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // Continuing rendering will render B next.
+    await act(() => {
+      const target = createEventTarget(spanD);
+      target.virtualclick();
+    });
+    assertLog(['App', 'B', 'C']);
+
+    // After the click, we should prioritize D and the Click first,
+    // and only after that render A and C.
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    // no replay
+    assertLog(['D', 'A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity && www
+  it('hydrates at higher pri for secondary discrete events (createEventHandle)', async () => {
+    const setClick = ReactDOM.unstable_createEventHandle('click');
+    let suspend = false;
+    let isServerRendering = true;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      const ref = React.useRef(null);
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+
+      if (!isServerRendering) {
+        React.useLayoutEffect(() => {
+          return setClick(ref.current, () => {
+            Scheduler.log('Clicked ' + text);
+          });
+        });
+      }
+      return <span ref={ref}>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanC = container.getElementsByTagName('span')[2];
+    const spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+    isServerRendering = false;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This click target cannot be hydrated yet because the first is Suspended.
+    createEventTarget(spanA).virtualclick();
+    createEventTarget(spanC).virtualclick();
+    createEventTarget(spanD).virtualclick();
+
+    assertLog(['App', 'C', 'Clicked C']);
+
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+
+    assertLog([
+      'A',
+      'D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('hydrates the hovered targets as higher priority for continuous events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.log('Hover ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+    const 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;
+
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    await act(() => {
+      // Click D
+      dispatchMouseHoverEvent(spanD, null);
+      dispatchClickEvent(spanD);
+
+      // Hover over B and then C.
+      dispatchMouseHoverEvent(spanB, spanD);
+      dispatchMouseHoverEvent(spanC, spanB);
+
+      assertLog(['App']);
+
+      suspend = false;
+      resolve();
+    });
+
+    // We should prioritize hydrating D first because we clicked it.
+    // but event isnt replayed
+    assertLog([
+      'D',
+      'B', // Ideally this should be later.
+      'C',
+      'Hover C',
+      'A',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('replays capture phase for continuous events and respects stopPropagation', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          id={text}
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.log('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.log('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.log('Mouse Enter ' + text);
+          }}
+          onMouseOut={e => {
+            e.preventDefault();
+            Scheduler.log('Mouse Out ' + text);
+          }}
+          onMouseOutCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.log('Mouse Out Capture ' + text);
+          }}
+          onMouseOverCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.log('Mouse Over Capture ' + text);
+          }}
+          onMouseOver={e => {
+            e.preventDefault();
+            Scheduler.log('Mouse Over ' + text);
+          }}>
+          <div
+            onMouseOverCapture={e => {
+              e.preventDefault();
+              Scheduler.log('Mouse Over Capture Inner ' + text);
+            }}>
+            {text}
+          </div>
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.log('Capture Clicked Parent');
+          }}
+          onMouseOverCapture={e => {
+            Scheduler.log('Mouse Over Capture Parent');
+          }}>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanB = document.getElementById('B').firstChild;
+    const spanC = document.getElementById('C').firstChild;
+    const spanD = document.getElementById('D').firstChild;
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    await act(async () => {
+      // Click D
+      dispatchMouseHoverEvent(spanD, null);
+      dispatchClickEvent(spanD);
+      // Hover over B and then C.
+      dispatchMouseHoverEvent(spanB, spanD);
+      dispatchMouseHoverEvent(spanC, spanB);
+
+      assertLog(['App']);
+
+      suspend = false;
+      resolve();
+    });
+
+    // We should prioritize hydrating D first because we clicked it.
+    // but event isnt replayed
+    assertLog([
+      'D',
+      'B', // Ideally this should be later.
+      'C',
+      // Mouse out events aren't replayed
+      // 'Mouse Out Capture B',
+      // 'Mouse Out B',
+      'Mouse Over Capture Parent',
+      'Mouse Over Capture C',
+      // Stop propagation stops these
+      // 'Mouse Over Capture Inner C',
+      // 'Mouse Over C',
+      'A',
+    ]);
+
+    // This test shows existing quirk where stopPropagation on mouseout
+    // prevents mouseEnter from firing
+    dispatchMouseHoverEvent(spanC, spanB);
+    assertLog([
+      'Mouse Out Capture B',
+      // stopPropagation stops these
+      // 'Mouse Out B',
+      // 'Mouse Enter C',
+      'Mouse Over Capture Parent',
+      'Mouse Over Capture C',
+      // Stop propagation stops these
+      // 'Mouse Over Capture Inner C',
+      // 'Mouse Over C',
+    ]);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('replays event with null target when tree is dismounted', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.log('Child');
+      return (
+        <div
+          onMouseOver={() => {
+            Scheduler.log('on mouse over');
+          }}>
+          Child
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <Activity>
+          <Child />
+        </Activity>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    assertLog(['Child']);
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    suspend = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    const childDiv = container.firstElementChild;
+
+    await act(async () => {
+      dispatchMouseHoverEvent(childDiv);
+
+      // Not hydrated so event is saved for replay and stopPropagation is called
+      assertLog([]);
+
+      resolve();
+      await waitFor(['Child']);
+
+      ReactDOM.flushSync(() => {
+        container.removeChild(childDiv);
+
+        const container2 = document.createElement('div');
+        container2.addEventListener('mouseover', () => {
+          Scheduler.log('container2 mouse over');
+        });
+        container2.appendChild(childDiv);
+      });
+    });
+
+    // Even though the tree is remove the event is still dispatched with native event handler
+    // on the container firing.
+    assertLog(['container2 mouse over']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('hydrates the last target path first for continuous events', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.log(text);
+      return (
+        <span
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.log('Hover ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <div>
+              <Activity>
+                <Child text="B" />
+              </Activity>
+            </div>
+            <Child text="C" />
+          </Activity>
+          <Activity>
+            <Child text="D" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C', 'D']);
+
+    const 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;
+
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+    const 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.
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // Hover over B and then C.
+    dispatchMouseHoverEvent(spanB, spanD);
+    dispatchMouseHoverEvent(spanC, spanB);
+
+    await act(async () => {
+      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.
+    assertLog(['App', 'C', 'Hover C', 'A', 'B', 'D']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('hydrates the last explicitly hydrated target at higher priority', async () => {
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+          <Activity>
+            <Child text="C" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B', 'C']);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const spanB = container.getElementsByTagName('span')[1];
+    const spanC = container.getElementsByTagName('span')[2];
+
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // Increase priority of B and then C.
+    root.unstable_scheduleHydration(spanB);
+    root.unstable_scheduleHydration(spanC);
+
+    // We should prioritize hydrating C first because the last added
+    // gets highest priority followed by the next added.
+    await waitForAll(['App', 'C', 'B', 'A']);
+  });
+
+  // @gate enableActivity && www
+  it('hydrates before an update even if hydration moves away from it', async () => {
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+    const ChildWithBoundary = React.memo(function ({text}) {
+      return (
+        <Activity>
+          <Child text={text} />
+          <Child text={text.toLowerCase()} />
+        </Activity>
+      );
+    });
+
+    function App({a}) {
+      Scheduler.log('App');
+      React.useEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <div>
+          <ChildWithBoundary text={a} />
+          <ChildWithBoundary text="B" />
+          <ChildWithBoundary text="C" />
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+
+    assertLog(['App', 'A', 'a', 'B', 'b', 'C', 'c']);
+
+    const 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);
+
+    const spanA = container.getElementsByTagName('span')[0];
+    const spanB = container.getElementsByTagName('span')[2];
+    const spanC = container.getElementsByTagName('span')[4];
+
+    await act(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
+      // Hydrate the shell.
+      await waitFor(['App', 'Commit']);
+
+      // Render an update at Idle priority that needs to update A.
+
+      TODO_scheduleIdleDOMSchedulerTask(() => {
+        root.render(<App a="AA" />);
+      });
+
+      // Start rendering. This will force the first boundary to hydrate
+      // by scheduling it at one higher pri than Idle.
+      await waitFor([
+        'App',
+
+        // Start hydrating A
+        'A',
+      ]);
+
+      // Hover over A which (could) schedule at one higher pri than Idle.
+      dispatchMouseHoverEvent(spanA, null);
+
+      // Before, we're done we now switch to hover over B.
+      // This is meant to test that this doesn't cause us to forget that
+      // we still have to hydrate A. The first boundary.
+      // This also tests that we don't do the -1 down-prioritization of
+      // continuous hover events because that would decrease its priority
+      // to Idle.
+      dispatchMouseHoverEvent(spanB, spanA);
+
+      // Also click C to prioritize that even higher which resets the
+      // priority levels.
+      dispatchClickEvent(spanC);
+
+      assertLog([
+        // Hydrate C first since we clicked it.
+        'C',
+        'c',
+      ]);
+
+      await waitForAll([
+        // Finish hydration of A since we forced it to hydrate.
+        'A',
+        'a',
+        // Also, hydrate B since we hovered over it.
+        // It's not important which one comes first. A or B.
+        // As long as they both happen before the Idle update.
+        'B',
+        'b',
+        // Begin the Idle update again.
+        'App',
+        'AA',
+        'aa',
+        'Commit',
+      ]);
+    });
+
+    const spanA2 = container.getElementsByTagName('span')[0];
+    // This is supposed to have been hydrated, not replaced.
+    expect(spanA).toBe(spanA2);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {
+    spyOnDev(console, 'error');
+    function Child({text}) {
+      Scheduler.log(text);
+      const ref = React.useRef();
+      React.useLayoutEffect(() => {
+        if (!ref.current) {
+          return;
+        }
+        ref.current.onclick = () => {
+          Scheduler.log('Native Click ' + text);
+        };
+      }, [text]);
+      return (
+        <span
+          ref={ref}
+          onClickCapture={() => {
+            Scheduler.log('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            Scheduler.log('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <div>
+          <Activity>
+            <Child text="A" />
+          </Activity>
+          <Activity>
+            <Child text="B" />
+          </Activity>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'A', 'B']);
+
+    const 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;
+
+    const span = container.getElementsByTagName('span')[1];
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    dispatchClickEvent(span);
+
+    // We rendered App, B and then invoked the event without rendering A.
+    assertLog(['App', 'B', 'Capture Clicked B', 'Native Click B', 'Clicked B']);
+
+    // After continuing the scheduler, we finally hydrate A.
+    await waitForAll(['A']);
+
+    document.body.removeChild(container);
+  });
+
+  // @gate enableActivity
+  it('does not propagate discrete event if it cannot be synchronously hydrated', async () => {
+    let triggeredParent = false;
+    let triggeredChild = false;
+    let suspend = false;
+    const promise = new Promise(() => {});
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.log('Child');
+      return (
+        <span
+          onClickCapture={e => {
+            e.stopPropagation();
+            triggeredChild = true;
+          }}>
+          Click me
+        </span>
+      );
+    }
+    function App() {
+      const onClick = () => {
+        triggeredParent = true;
+      };
+      Scheduler.log('App');
+      return (
+        <div
+          ref={n => {
+            if (n) n.onclick = onClick;
+          }}
+          onClick={onClick}>
+          <Activity>
+            <Child />
+          </Activity>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    assertLog(['App', 'Child']);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+
+    ReactDOMClient.hydrateRoot(container, <App />);
+    // Nothing has been hydrated so far.
+    assertLog([]);
+
+    const span = container.getElementsByTagName('span')[0];
+    dispatchClickEvent(span);
+
+    assertLog(['App']);
+
+    dispatchClickEvent(span);
+
+    expect(triggeredParent).toBe(false);
+    expect(triggeredChild).toBe(false);
+  });
+
+  // @gate enableActivity
+  it('can force hydration in response to sync update', async () => {
+    function Child({text}) {
+      Scheduler.log(`Child ${text}`);
+      return <span ref={ref => (spanRef = ref)}>{text}</span>;
+    }
+    function App({text}) {
+      Scheduler.log(`App ${text}`);
+      return (
+        <div>
+          <Activity>
+            <Child text={text} />
+          </Activity>
+        </div>
+      );
+    }
+
+    let spanRef;
+    const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
+    assertLog(['App A', 'Child A']);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    const initialSpan = container.getElementsByTagName('span')[0];
+    const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
+    await waitForPaint(['App A']);
+
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<App text="B" />);
+      });
+    });
+    assertLog(['App B', 'Child A', 'App B', 'Child B']);
+    expect(initialSpan).toBe(spanRef);
+  });
+
+  // @gate enableActivity && www
+  it('can force hydration in response to continuous update', async () => {
+    function Child({text}) {
+      Scheduler.log(`Child ${text}`);
+      return <span ref={ref => (spanRef = ref)}>{text}</span>;
+    }
+    function App({text}) {
+      Scheduler.log(`App ${text}`);
+      return (
+        <div>
+          <Activity>
+            <Child text={text} />
+          </Activity>
+        </div>
+      );
+    }
+
+    let spanRef;
+    const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
+    assertLog(['App A', 'Child A']);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    const initialSpan = container.getElementsByTagName('span')[0];
+    const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
+    await waitForPaint(['App A']);
+
+    await act(() => {
+      TODO_scheduleContinuousSchedulerTask(() => {
+        root.render(<App text="B" />);
+      });
+    });
+
+    assertLog(['App B', 'Child A', 'App B', 'Child B']);
+    expect(initialSpan).toBe(spanRef);
+  });
+
+  // @gate enableActivity
+  it('can force hydration in response to default update', async () => {
+    function Child({text}) {
+      Scheduler.log(`Child ${text}`);
+      return <span ref={ref => (spanRef = ref)}>{text}</span>;
+    }
+    function App({text}) {
+      Scheduler.log(`App ${text}`);
+      return (
+        <div>
+          <Activity>
+            <Child text={text} />
+          </Activity>
+        </div>
+      );
+    }
+
+    let spanRef;
+    const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
+    assertLog(['App A', 'Child A']);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    const initialSpan = container.getElementsByTagName('span')[0];
+    const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
+    await waitForPaint(['App A']);
+    await act(() => {
+      root.render(<App text="B" />);
+    });
+    assertLog(['App B', 'Child A', 'App B', 'Child B']);
+    expect(initialSpan).toBe(spanRef);
+  });
+
+  // @gate enableActivity && www
+  it('regression test: can unwind context on selective hydration interruption', async () => {
+    const Context = React.createContext('DefaultContext');
+
+    function ContextReader(props) {
+      const value = React.useContext(Context);
+      Scheduler.log(value);
+      return null;
+    }
+
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+    const ChildWithBoundary = React.memo(function ({text}) {
+      return (
+        <Activity>
+          <Child text={text} />
+        </Activity>
+      );
+    });
+
+    function App({a}) {
+      Scheduler.log('App');
+      React.useEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <>
+          <Context.Provider value="SiblingContext">
+            <ChildWithBoundary text={a} />
+          </Context.Provider>
+          <ContextReader />
+        </>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+    assertLog(['App', 'A', 'DefaultContext']);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    document.body.appendChild(container);
+
+    const spanA = container.getElementsByTagName('span')[0];
+
+    await act(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
+      await waitFor(['App', 'DefaultContext', 'Commit']);
+
+      TODO_scheduleIdleDOMSchedulerTask(() => {
+        root.render(<App a="AA" />);
+      });
+      await waitFor(['App', 'A']);
+
+      dispatchClickEvent(spanA);
+      assertLog(['A']);
+      await waitForAll(['App', 'AA', 'DefaultContext', 'Commit']);
+    });
+  });
+
+  // @gate enableActivity
+  it('regression test: can unwind context on selective hydration interruption for sync updates', async () => {
+    const Context = React.createContext('DefaultContext');
+
+    function ContextReader(props) {
+      const value = React.useContext(Context);
+      Scheduler.log(value);
+      return null;
+    }
+
+    function Child({text}) {
+      Scheduler.log(text);
+      return <span>{text}</span>;
+    }
+    const ChildWithBoundary = React.memo(function ({text}) {
+      return (
+        <Activity>
+          <Child text={text} />
+        </Activity>
+      );
+    });
+
+    function App({a}) {
+      Scheduler.log('App');
+      React.useEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <>
+          <Context.Provider value="SiblingContext">
+            <ChildWithBoundary text={a} />
+          </Context.Provider>
+          <ContextReader />
+        </>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
+    assertLog(['App', 'A', 'DefaultContext']);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    await act(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
+      await waitFor(['App', 'DefaultContext', 'Commit']);
+
+      ReactDOM.flushSync(() => {
+        root.render(<App a="AA" />);
+      });
+      assertLog(['App', 'A', 'App', 'AA', 'DefaultContext', 'Commit']);
+    });
+  });
+
+  // @gate enableActivity
+  it('regression: selective hydration does not contribute to "maximum update limit" count', async () => {
+    const outsideRef = React.createRef(null);
+    const insideRef = React.createRef(null);
+    function Child() {
+      return (
+        <Activity>
+          <div ref={insideRef} />
+        </Activity>
+      );
+    }
+
+    let setIsMounted = false;
+    function App() {
+      const [isMounted, setState] = React.useState(false);
+      setIsMounted = setState;
+
+      const children = [];
+      for (let i = 0; i < 100; i++) {
+        children.push(<Child key={i} isMounted={isMounted} />);
+      }
+
+      return <div ref={outsideRef}>{children}</div>;
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+
+      // Commit just the shell
+      await waitForPaint([]);
+
+      // Assert that the shell has hydrated, but not the children
+      expect(outsideRef.current).not.toBe(null);
+      expect(insideRef.current).toBe(null);
+
+      // Update the shell synchronously. The update will flow into the children,
+      // which haven't hydrated yet. This will trigger a cascade of commits
+      // caused by selective hydration. However, since there's really only one
+      // update, it should not be treated as an update loop.
+      // NOTE: It's unfortunate that every sibling boundary is separately
+      // committed in this case. We should be able to commit everything in a
+      // render phase, which we could do if we had resumable context stacks.
+      ReactDOM.flushSync(() => {
+        setIsMounted(true);
+      });
+    });
+
+    // Should have successfully hydrated with no errors.
+    expect(insideRef.current).not.toBe(null);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
new file mode 100644
index 00000000000..6e6f9bb0926
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let act;
+let SuspenseList;
+
+describe('ReactDOMServerSuspense', () => {
+  beforeEach(() => {
+    // Reset warning cache.
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+  });
+
+  function Text(props) {
+    return <div>{props.text}</div>;
+  }
+
+  function AsyncText(props) {
+    throw new Promise(() => {});
+  }
+
+  function getVisibleChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          node.tagName !== 'SCRIPT' &&
+          node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
+          !node.hasAttribute('hidden') &&
+          !node.hasAttribute('aria-hidden')
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  it('should render the children when no promise is thrown', async () => {
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(
+      <React.Suspense fallback={<Text text="Fallback" />}>
+        <Text text="Children" />
+      </React.Suspense>,
+    );
+    container.innerHTML = html;
+    expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
+  });
+
+  it('should render the fallback when a promise thrown', async () => {
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(
+      <React.Suspense fallback={<Text text="Fallback" />}>
+        <AsyncText text="Children" />
+      </React.Suspense>,
+    );
+    container.innerHTML = html;
+    expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
+  });
+
+  it('should work with nested suspense components', async () => {
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(
+      <React.Suspense fallback={<Text text="Fallback" />}>
+        <div>
+          <Text text="Children" />
+          <React.Suspense fallback={<Text text="Fallback" />}>
+            <AsyncText text="Children" />
+          </React.Suspense>
+        </div>
+      </React.Suspense>,
+    );
+    container.innerHTML = html;
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Children</div>
+        <div>Fallback</div>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('server renders a SuspenseList component and its children', async () => {
+    const example = (
+      <SuspenseList revealOrder="forwards" tail="visible">
+        <React.Suspense fallback="Loading A">
+          <div>A</div>
+        </React.Suspense>
+        <React.Suspense fallback="Loading B">
+          <div>B</div>
+        </React.Suspense>
+      </SuspenseList>
+    );
+    const container = document.createElement('div');
+    const html = ReactDOMServer.renderToString(example);
+    container.innerHTML = html;
+
+    const divA = container.children[0];
+    expect(divA.tagName).toBe('DIV');
+    expect(divA.textContent).toBe('A');
+    const divB = container.children[1];
+    expect(divB.tagName).toBe('DIV');
+    expect(divB.textContent).toBe('B');
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, example);
+    });
+
+    const divA2 = container.children[0];
+    const divB2 = container.children[1];
+    expect(divA).toBe(divA2);
+    expect(divB).toBe(divB2);
+  });
+
+  it('throws when rendering a suspending component outside a Suspense node', async () => {
+    expect(() => {
+      ReactDOMServer.renderToString(
+        <div>
+          <React.Suspense />
+          <AsyncText text="Children" />
+          <React.Suspense />
+        </div>,
+      );
+    }).toThrow('A component suspended while responding to synchronous input.');
+  });
+
+  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.js b/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
new file mode 100644
index 00000000000..c03107e467a
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMShorthandCSSPropertyCollision', () => {
+  let act;
+
+  let React;
+  let ReactDOMClient;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    act = require('internal-test-utils').act;
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  it('should warn for conflicting CSS shorthand updates', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div style={{font: 'foo', fontStyle: 'bar'}} />);
+    });
+    await act(() => {
+      root.render(<div style={{font: 'foo'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'properties for the same value; instead, replace the shorthand ' +
+        'with separate values.' +
+        '\n    in div (at **)',
+    ]);
+
+    // These updates are OK and don't warn:
+    await act(() => {
+      root.render(<div style={{font: 'qux', fontStyle: 'bar'}} />);
+    });
+    await act(() => {
+      root.render(<div style={{font: 'foo', fontStyle: 'baz'}} />);
+    });
+
+    await act(() => {
+      root.render(<div style={{font: 'qux', fontStyle: 'baz'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'properties for the same value; instead, replace the shorthand ' +
+        'with separate values.' +
+        '\n    in div (at **)',
+    ]);
+    await act(() => {
+      root.render(<div style={{fontStyle: 'baz'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'properties for the same value; instead, replace the shorthand ' +
+        'with separate values.' +
+        '\n    in div (at **)',
+    ]);
+
+    // A bit of a special case: backgroundPosition isn't technically longhand
+    // (it expands to backgroundPosition{X,Y} but so does background)
+    await act(() => {
+      root.render(
+        <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
+      );
+    });
+    await act(() => {
+      root.render(<div style={{background: 'yellow'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'shorthand and non-shorthand properties for the same value; ' +
+        'instead, replace the shorthand with separate values.' +
+        '\n    in div (at **)',
+    ]);
+    await act(() => {
+      root.render(
+        <div style={{background: 'yellow', backgroundPosition: 'center'}} />,
+      );
+    });
+    // But setting them  at the same time is OK:
+    await act(() => {
+      root.render(
+        <div style={{background: 'green', backgroundPosition: 'top'}} />,
+      );
+    });
+    await act(() => {
+      root.render(<div style={{backgroundPosition: 'top'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    ]);
+
+    // A bit of an even more special case: borderLeft and borderStyle overlap.
+    await act(() => {
+      root.render(
+        <div style={{borderStyle: 'dotted', borderLeft: '1px solid red'}} />,
+      );
+    });
+    await act(() => {
+      root.render(<div style={{borderLeft: '1px solid red'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    ]);
+    await act(() => {
+      root.render(
+        <div style={{borderStyle: 'dashed', borderLeft: '1px solid red'}} />,
+      );
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    ]);
+    // But setting them  at the same time is OK:
+    await act(() => {
+      root.render(
+        <div style={{borderStyle: 'dotted', borderLeft: '2px solid red'}} />,
+      );
+    });
+    await act(() => {
+      root.render(<div style={{borderStyle: 'dotted'}} />);
+    });
+    assertConsoleErrorDev([
+      '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 " +
+        'non-shorthand properties for the same value; instead, replace the ' +
+        'shorthand with separate values.' +
+        '\n    in div (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
new file mode 100644
index 00000000000..d887972e92c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -0,0 +1,1040 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let JSDOM;
+let Stream;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMFizzServer;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let waitForAll;
+let assertConsoleErrorDev;
+
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
+describe('ReactDOM HostSingleton', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  async function actIntoEmptyDocument(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+
+    const bufferedContent = buffer;
+    buffer = '';
+
+    const jsdom = new JSDOM(bufferedContent, {
+      runScripts: 'dangerously',
+    });
+    document = jsdom.window.document;
+    container = document;
+  }
+
+  function getVisibleChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        const el: Element = (node: any);
+        if (
+          (el.tagName !== 'SCRIPT' &&
+            el.tagName !== 'TEMPLATE' &&
+            el.tagName !== 'template' &&
+            !el.hasAttribute('hidden') &&
+            !el.hasAttribute('aria-hidden') &&
+            // Ignore the render blocking expect
+            (node.getAttribute('rel') !== 'expect' ||
+              node.getAttribute('blocking') !== 'render')) ||
+          el.hasAttribute('data-meaningful')
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  it('warns if you render the same singleton twice at the same time', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <head lang="en">
+          <title>Hello</title>
+        </head>
+        <body />
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head lang="en">
+          <title>Hello</title>
+        </head>
+        <body />
+      </html>,
+    );
+    root.render(
+      <html>
+        <head lang="en">
+          <title>Hello</title>
+        </head>
+        <head lang="es" data-foo="foo">
+          <title>Hola</title>
+        </head>
+        <body />
+      </html>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'You are mounting a new head component when a previous one has not first unmounted. ' +
+        'It is an error to render more than one head component at a time and attributes and ' +
+        'children of these components will likely fail in unpredictable ways. ' +
+        'Please only render a single instance of <head> and if you need to mount a new one, ' +
+        'ensure any previous ones have unmounted first.\n' +
+        '    in head (at **)',
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head lang="es" data-foo="foo">
+          <title>Hola</title>
+          <title>Hello</title>
+        </head>
+        <body />
+      </html>,
+    );
+
+    root.render(
+      <html>
+        {null}
+        {null}
+        <head lang="fr">
+          <title>Bonjour</title>
+        </head>
+        <body />
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head lang="fr">
+          <title>Bonjour</title>
+        </head>
+        <body />
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head lang="en">
+          <title>Hello</title>
+        </head>
+        <body />
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head lang="en">
+          <title>Hello</title>
+        </head>
+        <body />
+      </html>,
+    );
+  });
+
+  it('renders into html, head, and body persistently so the node identities never change and extraneous styles are retained', async () => {
+    // Server render some html that will get replaced with a client render
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html data-foo="foo">
+          <head data-bar="bar">
+            <link rel="stylesheet" href="resource" />
+            <title>a server title</title>
+            <link rel="stylesheet" href="3rdparty" />
+            <link rel="stylesheet" href="3rdparty2" />
+          </head>
+          <body data-baz="baz">
+            <div>hello world</div>
+            <style>
+              {`
+                body: {
+                  background-color: red;
+                }`}
+            </style>
+            <div>goodbye</div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-foo="foo">
+        <head data-bar="bar">
+          <title>a server title</title>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+        </head>
+        <body data-baz="baz">
+          <div>hello world</div>
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+          <div>goodbye</div>
+        </body>
+      </html>,
+    );
+    const {documentElement, head, body} = document;
+    const persistentElements = [documentElement, head, body];
+
+    // Render into the document completely different html. Observe that styles
+    // are retained as are html, body, and head referential identities. Because this was
+    // server rendered and we are not hydrating we lose the semantic placement of the original
+    // head contents and everything gets preprended. In a future update we might emit an insertion
+    // edge from the server and make client rendering reslilient to interstitial placement
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html data-client-foo="foo">
+        <head>
+          <title>a client title</title>
+        </head>
+        <body data-client-baz="baz">
+          <div>hello client</div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    // Similar to Hydration we don't reset attributes on the instance itself even on a fresh render.
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-client-foo="foo">
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+          <title>a client title</title>
+        </head>
+        <body data-client-baz="baz">
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+          <div>hello client</div>
+        </body>
+      </html>,
+    );
+
+    // Render new children and assert they append in the correct locations
+    root.render(
+      <html data-client-foo="foo">
+        <head>
+          <title>a client title</title>
+          <meta />
+        </head>
+        <body data-client-baz="baz">
+          <p>hello client again</p>
+          <div>hello client</div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-client-foo="foo">
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+          <title>a client title</title>
+          <meta />
+        </head>
+        <body data-client-baz="baz">
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+          <p>hello client again</p>
+          <div>hello client</div>
+        </body>
+      </html>,
+    );
+
+    // Remove some children
+    root.render(
+      <html data-client-foo="foo">
+        <head>
+          <title>a client title</title>
+        </head>
+        <body data-client-baz="baz">
+          <p>hello client again</p>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-client-foo="foo">
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+          <title>a client title</title>
+        </head>
+        <body data-client-baz="baz">
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+          <p>hello client again</p>
+        </body>
+      </html>,
+    );
+
+    // Remove a persistent component
+    // @TODO figure out whether to clean up attributes. restoring them is likely
+    // not possible.
+    root.render(
+      <html data-client-foo="foo">
+        <head>
+          <title>a client title</title>
+        </head>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-client-foo="foo">
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+          <title>a client title</title>
+        </head>
+        <body>
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+        </body>
+      </html>,
+    );
+
+    // unmount the root
+    root.unmount();
+    await waitForAll([]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+        </head>
+        <body>
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+        </body>
+      </html>,
+    );
+
+    // Now let's hydrate the document with known mismatching content
+    // We assert that the identities of html, head, and body still haven't changed
+    // and that the embedded styles are still retained
+    const hydrationErrors = [];
+    let hydrateRoot = ReactDOMClient.hydrateRoot(
+      document,
+      <html data-client-foo="foo">
+        <head>
+          <title>a client title</title>
+        </head>
+        <body data-client-baz="baz">
+          <div>hello client</div>
+        </body>
+      </html>,
+      {
+        onRecoverableError(error, errorInfo) {
+          hydrationErrors.push([
+            normalizeError(error.message),
+            errorInfo.componentStack
+              ? errorInfo.componentStack.split('\n')[1].trim()
+              : null,
+          ]);
+        },
+      },
+    );
+    await waitForAll([]);
+    expect(hydrationErrors).toEqual([
+      [
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'at div (<anonymous>)',
+      ],
+    ]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-client-foo="foo">
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+          <title>a client title</title>
+        </head>
+        <body data-client-baz="baz">
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+          <div>hello client</div>
+        </body>
+      </html>,
+    );
+
+    // Reset the tree
+    hydrationErrors.length = 0;
+    hydrateRoot.unmount();
+
+    // Now we try hydrating again with matching nodes and we ensure
+    // the retained styles are bound to the hydrated fibers
+    const link = document.querySelector('link[rel="stylesheet"]');
+    const style = document.querySelector('style');
+    hydrateRoot = ReactDOMClient.hydrateRoot(
+      document,
+      <html data-client-foo="foo">
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+        </head>
+        <body data-client-baz="baz">
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+        </body>
+      </html>,
+      {
+        onRecoverableError(error, errorInfo) {
+          hydrationErrors.push([
+            error.message,
+            errorInfo.componentStack
+              ? errorInfo.componentStack.split('\n')[1].trim()
+              : null,
+          ]);
+        },
+      },
+    );
+    expect(hydrationErrors).toEqual([]);
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" +
+        '\n' +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed ' +
+        'which messes with the HTML before React loaded.\n' +
+        '\n' +
+        'https://react.dev/link/hydration-mismatch\n' +
+        '\n' +
+        '  <html\n' +
+        '+   data-client-foo="foo"\n' +
+        '-   data-client-foo={null}\n' +
+        '  >\n' +
+        '    <head>\n' +
+        '    <body\n' +
+        '+     data-client-baz="baz"\n' +
+        '-     data-client-baz={null}\n' +
+        '    >\n' +
+        '\n    in body (at **)',
+    ]);
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect([link, style]).toEqual([
+      document.querySelector('link[rel="stylesheet"]'),
+      document.querySelector('style'),
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="resource" />
+          <link rel="stylesheet" href="3rdparty" />
+          <link rel="stylesheet" href="3rdparty2" />
+        </head>
+        <body>
+          <style>
+            {`
+                body: {
+                  background-color: red;
+                }`}
+          </style>
+        </body>
+      </html>,
+    );
+
+    // We unmount a final time and observe that still we retain our persistent nodes
+    // but they style contents which matched in hydration is removed
+    hydrateRoot.unmount();
+    expect(persistentElements).toEqual([
+      document.documentElement,
+      document.head,
+      document.body,
+    ]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body />
+      </html>,
+    );
+  });
+
+  // This test is not supported in this implementation. If we reintroduce insertion edge we should revisit
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('is able to maintain insertions in head and body between tree-adjacent Nodes', async () => {
+    // Server render some html and hydrate on the client
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head>
+            <title>title</title>
+          </head>
+          <body>
+            <div>hello</div>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    const root = ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head>
+          <title>title</title>
+        </head>
+        <body>
+          <div>hello</div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+
+    // We construct and insert some artificial stylesheets mimicing what a 3rd party script might do
+    // In the future we could hydrate with these already in the document but the rules are restrictive
+    // still so it would fail and fall back to client rendering
+    const [a, b, c, d, e, f, g, h] = 'abcdefgh'.split('').map(letter => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = letter;
+      return link;
+    });
+
+    const head = document.head;
+    const title = head.firstChild;
+    head.insertBefore(a, title);
+    head.insertBefore(b, title);
+    head.appendChild(c);
+    head.appendChild(d);
+
+    const bodyContent = document.body.firstChild;
+    const body = document.body;
+    body.insertBefore(e, bodyContent);
+    body.insertBefore(f, bodyContent);
+    body.appendChild(g);
+    body.appendChild(h);
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="a" />
+          <link rel="stylesheet" href="b" />
+          <title>title</title>
+          <link rel="stylesheet" href="c" />
+          <link rel="stylesheet" href="d" />
+        </head>
+        <body>
+          <link rel="stylesheet" href="e" />
+          <link rel="stylesheet" href="f" />
+          <div>hello</div>
+          <link rel="stylesheet" href="g" />
+          <link rel="stylesheet" href="h" />
+        </body>
+      </html>,
+    );
+
+    // Unmount head and change children of body
+    root.render(
+      <html>
+        {null}
+        <body>
+          <div>hello</div>
+          <div>world</div>
+        </body>
+      </html>,
+    );
+
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="a" />
+          <link rel="stylesheet" href="b" />
+          <link rel="stylesheet" href="c" />
+          <link rel="stylesheet" href="d" />
+        </head>
+        <body>
+          <link rel="stylesheet" href="e" />
+          <link rel="stylesheet" href="f" />
+          <div>hello</div>
+          <div>world</div>
+          <link rel="stylesheet" href="g" />
+          <link rel="stylesheet" href="h" />
+        </body>
+      </html>,
+    );
+
+    // Mount new head and unmount body
+    root.render(
+      <html>
+        <head>
+          <title>a new title</title>
+        </head>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <title>a new title</title>
+          <link rel="stylesheet" href="a" />
+          <link rel="stylesheet" href="b" />
+          <link rel="stylesheet" href="c" />
+          <link rel="stylesheet" href="d" />
+        </head>
+        <body>
+          <link rel="stylesheet" href="e" />
+          <link rel="stylesheet" href="f" />
+          <link rel="stylesheet" href="g" />
+          <link rel="stylesheet" href="h" />
+        </body>
+      </html>,
+    );
+  });
+
+  it('clears persistent head and body when html is the container', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head>
+            <link rel="stylesheet" href="headbefore" />
+            <title>this should be removed</title>
+            <link rel="stylesheet" href="headafter" />
+            <script data-meaningful="">true</script>
+          </head>
+          <body>
+            <link rel="stylesheet" href="bodybefore" />
+            <div>this should be removed</div>
+            <link rel="stylesheet" href="bodyafter" />
+            <script data-meaningful="">true</script>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    container = document.documentElement;
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(
+      <>
+        <head>
+          <title>something new</title>
+        </head>
+        <body>
+          <div>something new</div>
+        </body>
+      </>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="headbefore" />
+          <link rel="stylesheet" href="headafter" />
+          <script data-meaningful="">true</script>
+          <title>something new</title>
+        </head>
+        <body>
+          <link rel="stylesheet" href="bodybefore" />
+          <link rel="stylesheet" href="bodyafter" />
+          <script data-meaningful="">true</script>
+          <div>something new</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('clears persistent head when it is the container', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head>
+            <link rel="stylesheet" href="before" />
+            <title>this should be removed</title>
+            <link rel="stylesheet" href="after" />
+          </head>
+          <body />
+        </html>,
+      );
+      pipe(writable);
+    });
+    container = document.head;
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<title>something new</title>);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="before" />
+          <link rel="stylesheet" href="after" />
+          <title>something new</title>
+        </head>
+        <body />
+      </html>,
+    );
+  });
+
+  it('clears persistent body when it is the container', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="before" />
+            <div>this should be removed</div>
+            <link rel="stylesheet" href="after" />
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+    container = document.body;
+
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>something new</div>);
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <link rel="stylesheet" href="before" />
+          <link rel="stylesheet" href="after" />
+          <div>something new</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('renders single Text children into HostSingletons correctly', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head />
+          <body>foo</body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    let root = ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head />
+        <body>bar</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>bar</body>
+      </html>,
+    );
+
+    root.unmount();
+
+    root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <head />
+        <body>baz</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>baz</body>
+      </html>,
+    );
+  });
+
+  it('supports going from single text child to many children back to single text child in body', async () => {
+    const root = ReactDOMClient.createRoot(document);
+    root.render(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head />
+        <body>
+          <div>foo</div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>foo</div>
+        </body>
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head />
+        <body>
+          <div>foo</div>
+        </body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>foo</div>
+        </body>
+      </html>,
+    );
+  });
+
+  it('allows for hydrating without a head', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <body>foo</body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <body>foo</body>
+      </html>,
+    );
+    await waitForAll([]);
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>foo</body>
+      </html>,
+    );
+  });
+
+  // https://github.com/facebook/react/issues/26128
+  // @gate !disableLegacyMode
+  it('(#26128) does not throw when rendering at body in legacy mode', async () => {
+    ReactDOM.render(<div />, document.body);
+  });
+
+  // https://github.com/facebook/react/issues/26128
+  // @gate !disableLegacyMode
+  it('(#26128) does not throw when rendering at <html> in legacy mode', async () => {
+    ReactDOM.render(<body />, document.documentElement);
+  });
+
+  // https://github.com/facebook/react/issues/26128
+  // @gate !disableLegacyMode
+  it('(#26128) does not throw when rendering at document in legacy mode', async () => {
+    ReactDOM.render(<html />, document);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSrcObject-test.js b/packages/react-dom/src/__tests__/ReactDOMSrcObject-test.js
new file mode 100644
index 00000000000..c77614dcfb7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSrcObject-test.js
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+describe('ReactDOMSrcObject', () => {
+  let React;
+  let ReactDOMClient;
+  let ReactDOMFizzServer;
+  let act;
+  let container;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server.edge');
+    act = require('internal-test-utils').act;
+
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    jest.restoreAllMocks();
+  });
+
+  // @gate enableSrcObject
+  it('can render a Blob as an img src', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    const ref = React.createRef();
+
+    const blob = new Blob();
+    await act(() => {
+      root.render(<img src={blob} ref={ref} />);
+    });
+
+    expect(ref.current.src).toMatch(/^blob:/);
+  });
+
+  // @gate enableSrcObject
+  it('can render a Blob as a picture img src', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    const ref = React.createRef();
+
+    const blob = new Blob();
+    await act(() => {
+      root.render(
+        <picture>
+          <img src={blob} ref={ref} />
+        </picture>,
+      );
+    });
+
+    expect(ref.current.src).toMatch(/^blob:/);
+  });
+
+  // @gate enableSrcObject
+  it('can render a Blob as a video and audio src', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    const videoRef = React.createRef();
+    const audioRef = React.createRef();
+
+    const blob = new Blob();
+    await act(() => {
+      root.render(
+        <>
+          <video src={blob} ref={videoRef} />
+          <audio src={blob} ref={audioRef} />
+        </>,
+      );
+    });
+
+    expect(videoRef.current.src).toMatch(/^blob:/);
+    expect(audioRef.current.src).toMatch(/^blob:/);
+  });
+
+  // @gate enableSrcObject || !__DEV__
+  it('warn when rendering a Blob as a source src of a video, audio or picture element', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    const videoRef = React.createRef();
+    const audioRef = React.createRef();
+    const pictureRef = React.createRef();
+
+    const blob = new Blob();
+    await act(() => {
+      root.render(
+        <>
+          <video ref={videoRef}>
+            <source src={blob} />
+          </video>
+          <audio ref={audioRef}>
+            <source src={blob} />
+          </audio>
+          <picture ref={pictureRef}>
+            <source src={blob} />
+            <img />
+          </picture>
+        </>,
+      );
+    });
+
+    assertConsoleErrorDev([
+      'Passing Blob, MediaSource or MediaStream to <source src> is not supported. ' +
+        'Pass it directly to <img src>, <video src> or <audio src> instead.' +
+        '\n    in source (at **)',
+      'Passing Blob, MediaSource or MediaStream to <source src> is not supported. ' +
+        'Pass it directly to <img src>, <video src> or <audio src> instead.' +
+        '\n    in source (at **)',
+      'Passing Blob, MediaSource or MediaStream to <source src> is not supported. ' +
+        'Pass it directly to <img src>, <video src> or <audio src> instead.' +
+        '\n    in source (at **)',
+    ]);
+    expect(videoRef.current.firstChild.src).not.toMatch(/^blob:/);
+    expect(videoRef.current.firstChild.src).toContain('[object%20Blob]'); // toString:ed
+    expect(audioRef.current.firstChild.src).not.toMatch(/^blob:/);
+    expect(audioRef.current.firstChild.src).toContain('[object%20Blob]'); // toString:ed
+    expect(pictureRef.current.firstChild.src).not.toMatch(/^blob:/);
+    expect(pictureRef.current.firstChild.src).toContain('[object%20Blob]'); // toString:ed
+  });
+
+  async function readContent(stream) {
+    const reader = stream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return content;
+      }
+      content += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  // @gate enableSrcObject
+  it('can SSR a Blob as an img src', async () => {
+    const blob = new Blob([new Uint8Array([69, 230, 156, 181, 68, 75])], {
+      type: 'image/jpeg',
+    });
+
+    const ref = React.createRef();
+
+    function App() {
+      return <img src={blob} ref={ref} />;
+    }
+
+    const stream = await ReactDOMFizzServer.renderToReadableStream(<App />);
+    container.innerHTML = await readContent(stream);
+
+    expect(container.firstChild.src).toBe('data:image/jpeg;base64,ReactURL');
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+
+    expect(container.firstChild.src).toBe('data:image/jpeg;base64,ReactURL');
+  });
+
+  // @gate enableSrcObject
+  it('errors in DEV when mismatching a Blob during hydration', async () => {
+    const blob = new Blob([new Uint8Array([69, 230, 156, 181, 68, 75])], {
+      type: 'image/jpeg',
+    });
+
+    const ref = React.createRef();
+
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <img src={blob} ref={ref} />,
+    );
+    container.innerHTML = await readContent(stream);
+
+    expect(container.firstChild.src).toBe('data:image/jpeg;base64,ReactURL');
+
+    const clientBlob = new Blob([new Uint8Array([69, 230, 156, 181, 68])], {
+      type: 'image/jpeg',
+    });
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <img src={clientBlob} ref={ref} />);
+    });
+
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n\n" +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\n' +
+        'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\n' +
+        'https://react.dev/link/hydration-mismatch\n\n' +
+        '  <img\n' +
+        '+   src={Blob:image/jpeg}\n' +
+        '-   src="data:image/jpeg;base64,ReactURL"\n' +
+        '    ref={{current:null}}\n' +
+        '  >\n' +
+        '\n    in img (at **)',
+    ]);
+
+    // The original URL left in place.
+    expect(container.firstChild.src).toBe('data:image/jpeg;base64,ReactURL');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
new file mode 100644
index 00000000000..a38eb8f368e
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
@@ -0,0 +1,345 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 findDOMNode;
+let ReactDOMClient;
+let Suspense;
+let Scheduler;
+let act;
+let textCache;
+let assertLog;
+
+describe('ReactDOMSuspensePlaceholder', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    findDOMNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .findDOMNode;
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    Suspense = React.Suspense;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    textCache = new Map();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  // @gate !disableLegacyMode
+  it('hides and unhides timed out DOM elements in legacy roots', async () => {
+    const divs = [
+      React.createRef(null),
+      React.createRef(null),
+      React.createRef(null),
+    ];
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <div ref={divs[0]}>
+            <Text text="A" />
+          </div>
+          <div ref={divs[1]}>
+            <AsyncText text="B" />
+          </div>
+          <div style={{display: 'inline'}} ref={divs[2]}>
+            <Text text="C" />
+          </div>
+        </Suspense>
+      );
+    }
+    ReactDOM.render(<App />, container);
+    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');
+    assertLog(['A', 'Suspend! [B]', 'C', 'Loading...']);
+    await act(async () => {
+      await resolveText('B');
+    });
+
+    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(window.getComputedStyle(divs[2].current).display).toEqual('inline');
+    assertLog(['B']);
+  });
+
+  it('hides and unhides timed out text nodes', async () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="A" />
+          <AsyncText text="B" />
+          <Text text="C" />
+        </Suspense>
+      );
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(container.textContent).toEqual('Loading...');
+    assertLog([
+      'A',
+      'Suspend! [B]',
+      'Loading...',
+      // pre-warming
+      'A',
+      'Suspend! [B]',
+      'C',
+    ]);
+    await act(() => {
+      resolveText('B');
+    });
+    assertLog(['A', 'B', 'C']);
+    expect(container.textContent).toEqual('ABC');
+  });
+
+  // @gate !disableLegacyMode
+  it(
+    'in legacy roots, re-hides children if their display is updated ' +
+      'but the boundary is still showing the fallback',
+    async () => {
+      const {useState} = React;
+
+      let setIsVisible;
+      function Sibling({children}) {
+        const [isVisible, _setIsVisible] = useState(false);
+        setIsVisible = _setIsVisible;
+        return (
+          <span style={{display: isVisible ? 'inline' : 'none'}}>
+            {children}
+          </span>
+        );
+      }
+
+      function App() {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Sibling>Sibling</Sibling>
+            <span>
+              <AsyncText text="Async" />
+            </span>
+          </Suspense>
+        );
+      }
+
+      await act(() => {
+        ReactDOM.render(<App />, container);
+      });
+      expect(container.innerHTML).toEqual(
+        '<span style="display: none;">Sibling</span><span style=' +
+          '"display: none;"></span>Loading...',
+      );
+      assertLog(['Suspend! [Async]', 'Loading...']);
+
+      // Update the inline display style. It will be overridden because it's
+      // inside a hidden fallback.
+      await act(() => setIsVisible(true));
+      expect(container.innerHTML).toEqual(
+        '<span style="display: none;">Sibling</span><span style=' +
+          '"display: none;"></span>Loading...',
+      );
+      assertLog(['Suspend! [Async]']);
+
+      // Unsuspend. The style should now match the inline prop.
+      await act(() => resolveText('Async'));
+      expect(container.innerHTML).toEqual(
+        '<span style="display: inline;">Sibling</span><span style="">Async</span>',
+      );
+    },
+  );
+
+  // Regression test for https://github.com/facebook/react/issues/14188
+  // @gate !disableLegacyMode
+  it('can call findDOMNode() in a suspended component commit phase in legacy roots', async () => {
+    const log = [];
+    const Lazy = React.lazy(
+      () =>
+        new Promise(resolve =>
+          resolve({
+            default() {
+              return 'lazy';
+            },
+          }),
+        ),
+    );
+
+    class Child extends React.Component {
+      componentDidMount() {
+        log.push('cDM ' + this.props.id);
+        findDOMNode(this);
+      }
+      componentDidUpdate() {
+        log.push('cDU ' + this.props.id);
+        findDOMNode(this);
+      }
+      render() {
+        return 'child';
+      }
+    }
+
+    const buttonRef = React.createRef();
+    class App extends React.Component {
+      state = {
+        suspend: false,
+      };
+      handleClick = () => {
+        this.setState({suspend: true});
+      };
+      render() {
+        return (
+          <React.Suspense fallback="Loading">
+            <Child id="first" />
+            <button ref={buttonRef} onClick={this.handleClick}>
+              Suspend
+            </button>
+            <Child id="second" />
+            {this.state.suspend && <Lazy />}
+          </React.Suspense>
+        );
+      }
+    }
+
+    ReactDOM.render(<App />, container);
+
+    expect(log).toEqual(['cDM first', 'cDM second']);
+    log.length = 0;
+
+    buttonRef.current.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    await Lazy;
+    expect(log).toEqual(['cDU first', 'cDU second']);
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/14188
+  it('can call legacy findDOMNode() in a suspended component commit phase (#2)', async () => {
+    let suspendOnce = Promise.resolve();
+    function Suspend() {
+      if (suspendOnce) {
+        const promise = suspendOnce;
+        suspendOnce = null;
+        throw promise;
+      }
+      return null;
+    }
+
+    const log = [];
+    class Child extends React.Component {
+      componentDidMount() {
+        log.push('cDM');
+        findDOMNode(this);
+      }
+
+      componentDidUpdate() {
+        log.push('cDU');
+        findDOMNode(this);
+      }
+
+      render() {
+        return null;
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading">
+          <Suspend />
+          <Child />
+        </Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(log).toEqual(['cDM']);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(log).toEqual(['cDM', 'cDU']);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js
new file mode 100644
index 00000000000..8b6eb0d49d5
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js
@@ -0,0 +1,1511 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMTestSelectors', () => {
+  let React;
+  let createRoot;
+  let act;
+  let createComponentSelector;
+  let createHasPseudoClassSelector;
+  let createRoleSelector;
+  let createTextSelector;
+  let createTestNameSelector;
+  let findAllNodes;
+  let findBoundingRects;
+  let focusWithin;
+  let getFindAllNodesFailureDescription;
+  let observeVisibleRects;
+  let mockIntersectionObserver;
+  let simulateIntersection;
+  let setBoundingClientRect;
+
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+
+    act = require('internal-test-utils').act;
+
+    if (__EXPERIMENTAL__ || global.__WWW__) {
+      const ReactDOM = require('react-dom/unstable_testing');
+      createComponentSelector = ReactDOM.createComponentSelector;
+      createHasPseudoClassSelector = ReactDOM.createHasPseudoClassSelector;
+      createRoleSelector = ReactDOM.createRoleSelector;
+      createTextSelector = ReactDOM.createTextSelector;
+      createTestNameSelector = ReactDOM.createTestNameSelector;
+      findAllNodes = ReactDOM.findAllNodes;
+      findBoundingRects = ReactDOM.findBoundingRects;
+      focusWithin = ReactDOM.focusWithin;
+      getFindAllNodesFailureDescription =
+        ReactDOM.getFindAllNodesFailureDescription;
+      observeVisibleRects = ReactDOM.observeVisibleRects;
+      createRoot = ReactDOM.createRoot;
+    }
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    const IntersectionMocks = require('./utils/IntersectionMocks');
+    mockIntersectionObserver = IntersectionMocks.mockIntersectionObserver;
+    simulateIntersection = IntersectionMocks.simulateIntersection;
+    setBoundingClientRect = IntersectionMocks.setBoundingClientRect;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  describe('findAllNodes', () => {
+    // @gate www || experimental
+    it('should support searching from the document root', async () => {
+      function Example() {
+        return (
+          <div>
+            <div data-testname="match" id="match" />
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should support searching from the container', async () => {
+      function Example() {
+        return (
+          <div>
+            <div data-testname="match" id="match" />
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(container, [
+        createComponentSelector(Example),
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should support searching from a previous match if the match had a data-testname', async () => {
+      function Outer() {
+        return (
+          <div data-testname="outer" id="outer">
+            <Inner />
+          </div>
+        );
+      }
+
+      function Inner() {
+        return <div data-testname="inner" id="inner" />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      let matches = findAllNodes(container, [
+        createComponentSelector(Outer),
+        createTestNameSelector('outer'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('outer');
+
+      matches = findAllNodes(matches[0], [
+        createComponentSelector(Inner),
+        createTestNameSelector('inner'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('inner');
+    });
+
+    // @gate www || experimental
+    it('should not support searching from a previous match if the match did not have a data-testname', async () => {
+      function Outer() {
+        return (
+          <div id="outer">
+            <Inner />
+          </div>
+        );
+      }
+
+      function Inner() {
+        return <div id="inner" />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      const matches = findAllNodes(container, [createComponentSelector(Outer)]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('outer');
+
+      expect(() => {
+        findAllNodes(matches[0], [
+          createComponentSelector(Inner),
+          createTestNameSelector('inner'),
+        ]);
+      }).toThrow(
+        'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
+      );
+    });
+
+    // @gate www || experimental
+    it('should support an multiple component types in the selector array', async () => {
+      function Outer() {
+        return (
+          <>
+            <div data-testname="match" id="match1" />
+            <Middle />
+          </>
+        );
+      }
+      function Middle() {
+        return (
+          <>
+            <div data-testname="match" id="match2" />
+            <Inner />
+          </>
+        );
+      }
+      function Inner() {
+        return (
+          <>
+            <div data-testname="match" id="match3" />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      let matches = findAllNodes(document.body, [
+        createComponentSelector(Outer),
+        createComponentSelector(Middle),
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(2);
+      expect(matches.map(m => m.id).sort()).toEqual(['match2', 'match3']);
+
+      matches = findAllNodes(document.body, [
+        createComponentSelector(Outer),
+        createComponentSelector(Middle),
+        createComponentSelector(Inner),
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match3');
+
+      matches = findAllNodes(document.body, [
+        createComponentSelector(Outer),
+        createComponentSelector(Inner),
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match3');
+    });
+
+    // @gate www || experimental
+    it('should find multiple matches', async () => {
+      function Example1() {
+        return (
+          <div>
+            <div data-testname="match" id="match1" />
+          </div>
+        );
+      }
+
+      function Example2() {
+        return (
+          <div>
+            <div data-testname="match" id="match2" />
+            <div data-testname="match" id="match3" />
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(
+          <>
+            <Example1 />
+            <Example2 />
+          </>,
+        );
+      });
+
+      const matches = findAllNodes(document.body, [
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(3);
+      expect(matches.map(m => m.id).sort()).toEqual([
+        'match1',
+        'match2',
+        'match3',
+      ]);
+    });
+
+    // @gate www || experimental
+    it('should ignore nested matches', async () => {
+      function Example() {
+        return (
+          <div data-testname="match" id="match1">
+            <div data-testname="match" id="match2" />
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createTestNameSelector('match'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toEqual('match1');
+    });
+
+    // @gate www || experimental
+    it('should enforce the specific order of selectors', async () => {
+      function Outer() {
+        return (
+          <>
+            <div data-testname="match" id="match1" />
+            <Inner />
+          </>
+        );
+      }
+      function Inner() {
+        return <div data-testname="match" id="match1" />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      expect(
+        findAllNodes(document.body, [
+          createComponentSelector(Inner),
+          createComponentSelector(Outer),
+          createTestNameSelector('match'),
+        ]),
+      ).toHaveLength(0);
+    });
+
+    // @gate www || experimental
+    it('should not search within hidden subtrees', async () => {
+      const ref1 = React.createRef(null);
+      const ref2 = React.createRef(null);
+
+      function Outer() {
+        return (
+          <>
+            <div hidden={true}>
+              <div ref={ref1} data-testname="match" />
+            </div>
+            <Inner />
+          </>
+        );
+      }
+      function Inner() {
+        return <div ref={ref2} data-testname="match" />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Outer),
+        createTestNameSelector('match'),
+      ]);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toBe(ref2.current);
+    });
+
+    // @gate www || experimental
+    it('should support filtering by display text', async () => {
+      function Example() {
+        return (
+          <div>
+            <div>foo</div>
+            <div>
+              <div id="match">bar</div>
+            </div>
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createTextSelector('bar'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should support filtering by explicit accessibiliy role', async () => {
+      function Example() {
+        return (
+          <div>
+            <div>foo</div>
+            <div>
+              <div role="button" id="match">
+                bar
+              </div>
+            </div>
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createRoleSelector('button'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should support filtering by explicit secondary accessibiliy role', async () => {
+      const ref = React.createRef();
+
+      function Example() {
+        return (
+          <div>
+            <div>foo</div>
+            <div>
+              <div ref={ref} role="meter progressbar" />
+            </div>
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createRoleSelector('progressbar'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toBe(ref.current);
+    });
+
+    // @gate www || experimental
+    it('should support filtering by implicit accessibiliy role', async () => {
+      function Example() {
+        return (
+          <div>
+            <div>foo</div>
+            <div>
+              <button id="match">bar</button>
+            </div>
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createRoleSelector('button'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should support filtering by implicit accessibiliy role with attributes qualifications', async () => {
+      function Example() {
+        return (
+          <div>
+            <div>foo</div>
+            <div>
+              <input type="checkbox" id="match" value="bar" />
+            </div>
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createRoleSelector('checkbox'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should support searching ahead with the has() selector', async () => {
+      function Example() {
+        return (
+          <div>
+            <article>
+              <h1>Should match</h1>
+              <p>
+                <button id="match">Like</button>
+              </p>
+            </article>
+            <article>
+              <h1>Should not match</h1>
+              <p>
+                <button>Like</button>
+              </p>
+            </article>
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const matches = findAllNodes(document.body, [
+        createComponentSelector(Example),
+        createRoleSelector('article'),
+        createHasPseudoClassSelector([
+          createRoleSelector('heading'),
+          createTextSelector('Should match'),
+        ]),
+        createRoleSelector('button'),
+      ]);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].id).toBe('match');
+    });
+
+    // @gate www || experimental
+    it('should throw if no container can be found', () => {
+      expect(() => findAllNodes(document.body, [])).toThrow(
+        'Could not find React container within specified host subtree.',
+      );
+    });
+
+    // @gate www || experimental
+    it('should throw if an invalid host root is specified', async () => {
+      const ref = React.createRef();
+      function Example() {
+        return <div ref={ref} />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      expect(() => findAllNodes(ref.current, [])).toThrow(
+        'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
+      );
+    });
+  });
+
+  describe('getFindAllNodesFailureDescription', () => {
+    // @gate www || experimental
+    it('should describe findAllNodes failures caused by the component type selector', async () => {
+      function Outer() {
+        return <Middle />;
+      }
+      function Middle() {
+        return <div />;
+      }
+      function NotRendered() {
+        return <div data-testname="match" />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      const description = getFindAllNodesFailureDescription(document.body, [
+        createComponentSelector(Outer),
+        createComponentSelector(Middle),
+        createComponentSelector(NotRendered),
+        createTestNameSelector('match'),
+      ]);
+
+      expect(description).toEqual(
+        `findAllNodes was able to match part of the selector:
+  <Outer> > <Middle>
+
+No matching component was found for:
+  <NotRendered> > [data-testname="match"]`,
+      );
+    });
+
+    // @gate www || experimental
+    it('should return null if findAllNodes was able to find a match', async () => {
+      function Example() {
+        return (
+          <div>
+            <div data-testname="match" id="match" />
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const description = getFindAllNodesFailureDescription(document.body, [
+        createComponentSelector(Example),
+      ]);
+
+      expect(description).toBe(null);
+    });
+  });
+
+  describe('findBoundingRects', () => {
+    // @gate www || experimental
+    it('should return a single rect for a component that returns a single root host element', async () => {
+      const ref = React.createRef();
+
+      function Example() {
+        return (
+          <div ref={ref}>
+            <div />
+            <div />
+          </div>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      setBoundingClientRect(ref.current, {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      });
+
+      const rects = findBoundingRects(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(rects).toHaveLength(1);
+      expect(rects).toContainEqual({
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      });
+    });
+
+    // @gate www || experimental
+    it('should return a multiple rects for multiple matches', async () => {
+      const outerRef = React.createRef();
+      const innerRef = React.createRef();
+
+      function Outer() {
+        return (
+          <>
+            <div ref={outerRef} />
+            <Inner />
+          </>
+        );
+      }
+      function Inner() {
+        return <div ref={innerRef} />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Outer />);
+      });
+
+      setBoundingClientRect(outerRef.current, {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      });
+      setBoundingClientRect(innerRef.current, {
+        x: 110,
+        y: 120,
+        width: 250,
+        height: 150,
+      });
+
+      const rects = findBoundingRects(document.body, [
+        createComponentSelector(Outer),
+      ]);
+      expect(rects).toHaveLength(2);
+      expect(rects).toContainEqual({
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      });
+      expect(rects).toContainEqual({
+        x: 110,
+        y: 120,
+        width: 250,
+        height: 150,
+      });
+    });
+
+    // @gate www || experimental
+    it('should return a multiple rects for single match that returns a fragment', async () => {
+      const refA = React.createRef();
+      const refB = React.createRef();
+
+      function Example() {
+        return (
+          <>
+            <div ref={refA}>
+              <div />
+              <div />
+            </div>
+            <div ref={refB} />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      setBoundingClientRect(refA.current, {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      });
+      setBoundingClientRect(refB.current, {
+        x: 110,
+        y: 120,
+        width: 250,
+        height: 150,
+      });
+
+      const rects = findBoundingRects(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(rects).toHaveLength(2);
+      expect(rects).toContainEqual({
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      });
+      expect(rects).toContainEqual({
+        x: 110,
+        y: 120,
+        width: 250,
+        height: 150,
+      });
+    });
+
+    // @gate www || experimental
+    it('should merge overlapping rects', async () => {
+      const refA = React.createRef();
+      const refB = React.createRef();
+      const refC = React.createRef();
+
+      function Example() {
+        return (
+          <>
+            <div ref={refA} />
+            <div ref={refB} />
+            <div ref={refC} />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      setBoundingClientRect(refA.current, {
+        x: 10,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+      setBoundingClientRect(refB.current, {
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 10,
+      });
+      setBoundingClientRect(refC.current, {
+        x: 100,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+
+      const rects = findBoundingRects(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(rects).toHaveLength(2);
+      expect(rects).toContainEqual({
+        x: 10,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+      expect(rects).toContainEqual({
+        x: 100,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+    });
+
+    // @gate www || experimental
+    it('should merge some types of adjacent rects (if they are the same in one dimension)', async () => {
+      const refA = React.createRef();
+      const refB = React.createRef();
+      const refC = React.createRef();
+      const refD = React.createRef();
+      const refE = React.createRef();
+      const refF = React.createRef();
+      const refG = React.createRef();
+
+      function Example() {
+        return (
+          <>
+            <div ref={refA} data-debug="A" />
+            <div ref={refB} data-debug="B" />
+            <div ref={refC} data-debug="C" />
+            <div ref={refD} data-debug="D" />
+            <div ref={refE} data-debug="E" />
+            <div ref={refF} data-debug="F" />
+            <div ref={refG} data-debug="G" />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      // A, B, and C are all adjacent and/or overlapping, with the same height.
+      setBoundingClientRect(refA.current, {
+        x: 30,
+        y: 0,
+        width: 40,
+        height: 25,
+      });
+      setBoundingClientRect(refB.current, {
+        x: 0,
+        y: 0,
+        width: 50,
+        height: 25,
+      });
+      setBoundingClientRect(refC.current, {
+        x: 70,
+        y: 0,
+        width: 20,
+        height: 25,
+      });
+
+      // D is partially overlapping with A and B, but is too tall to be merged.
+      setBoundingClientRect(refD.current, {
+        x: 20,
+        y: 0,
+        width: 20,
+        height: 30,
+      });
+
+      // Same thing but for a vertical group.
+      // Some of them could intersect with the horizontal group,
+      // except they're too far to the right.
+      setBoundingClientRect(refE.current, {
+        x: 100,
+        y: 25,
+        width: 25,
+        height: 50,
+      });
+      setBoundingClientRect(refF.current, {
+        x: 100,
+        y: 0,
+        width: 25,
+        height: 25,
+      });
+      setBoundingClientRect(refG.current, {
+        x: 100,
+        y: 75,
+        width: 25,
+        height: 10,
+      });
+
+      const rects = findBoundingRects(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(rects).toHaveLength(3);
+      expect(rects).toContainEqual({
+        x: 0,
+        y: 0,
+        width: 90,
+        height: 25,
+      });
+      expect(rects).toContainEqual({
+        x: 20,
+        y: 0,
+        width: 20,
+        height: 30,
+      });
+      expect(rects).toContainEqual({
+        x: 100,
+        y: 0,
+        width: 25,
+        height: 85,
+      });
+    });
+
+    // @gate www || experimental
+    it('should not search within hidden subtrees', async () => {
+      const refA = React.createRef();
+      const refB = React.createRef();
+      const refC = React.createRef();
+
+      function Example() {
+        return (
+          <>
+            <div ref={refA} />
+            <div hidden={true} ref={refB} />
+            <div ref={refC} />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      setBoundingClientRect(refA.current, {
+        x: 10,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+      setBoundingClientRect(refB.current, {
+        x: 100,
+        y: 10,
+        width: 20,
+        height: 10,
+      });
+      setBoundingClientRect(refC.current, {
+        x: 200,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+
+      const rects = findBoundingRects(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(rects).toHaveLength(2);
+      expect(rects).toContainEqual({
+        x: 10,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+      expect(rects).toContainEqual({
+        x: 200,
+        y: 10,
+        width: 50,
+        height: 25,
+      });
+    });
+  });
+
+  describe('focusWithin', () => {
+    // @gate www || experimental
+    it('should return false if the specified component path has no matches', async () => {
+      function Example() {
+        return <Child />;
+      }
+      function Child() {
+        return null;
+      }
+      function NotUsed() {
+        return null;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+        createComponentSelector(NotUsed),
+      ]);
+      expect(didFocus).toBe(false);
+    });
+
+    // @gate www || experimental
+    it('should return false if there are no focusable elements within the matched subtree', async () => {
+      function Example() {
+        return <Child />;
+      }
+      function Child() {
+        return 'not focusable';
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+        createComponentSelector(Child),
+      ]);
+      expect(didFocus).toBe(false);
+    });
+
+    // @gate www || experimental
+    it('should return false if the only focusable elements are disabled', async () => {
+      function Example() {
+        return (
+          <button disabled={true} style={{width: 10, height: 10}}>
+            not clickable
+          </button>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(didFocus).toBe(false);
+    });
+
+    // @gate www || experimental
+    it('should return false if the only focusable elements are hidden', async () => {
+      function Example() {
+        return <button hidden={true}>not clickable</button>;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(didFocus).toBe(false);
+    });
+
+    // @gate www || experimental
+    it('should successfully focus the first focusable element within the tree', async () => {
+      const secondRef = React.createRef(null);
+
+      const handleFirstFocus = jest.fn();
+      const handleSecondFocus = jest.fn();
+      const handleThirdFocus = jest.fn();
+
+      function Example() {
+        return (
+          <>
+            <FirstChild />
+            <SecondChild />
+            <ThirdChild />
+          </>
+        );
+      }
+      function FirstChild() {
+        return (
+          <button hidden={true} onFocus={handleFirstFocus}>
+            not clickable
+          </button>
+        );
+      }
+      function SecondChild() {
+        return (
+          <button
+            ref={secondRef}
+            style={{width: 10, height: 10}}
+            onFocus={handleSecondFocus}>
+            clickable
+          </button>
+        );
+      }
+      function ThirdChild() {
+        return (
+          <button style={{width: 10, height: 10}} onFocus={handleThirdFocus}>
+            clickable
+          </button>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(didFocus).toBe(true);
+      expect(document.activeElement).not.toBeNull();
+      expect(document.activeElement).toBe(secondRef.current);
+      expect(handleFirstFocus).not.toHaveBeenCalled();
+      expect(handleSecondFocus).toHaveBeenCalledTimes(1);
+      expect(handleThirdFocus).not.toHaveBeenCalled();
+    });
+
+    // @gate www || experimental
+    it('should successfully focus the first focusable element even if application logic interferes', async () => {
+      const ref = React.createRef(null);
+
+      const handleFocus = jest.fn(event => {
+        event.target.blur();
+      });
+
+      function Example() {
+        return (
+          <button
+            ref={ref}
+            style={{width: 10, height: 10}}
+            onFocus={handleFocus}>
+            clickable
+          </button>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(didFocus).toBe(true);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).not.toBe(document.activeElement);
+      expect(handleFocus).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate www || experimental
+    it('should not focus within hidden subtrees', async () => {
+      const secondRef = React.createRef(null);
+
+      const handleFirstFocus = jest.fn();
+      const handleSecondFocus = jest.fn();
+      const handleThirdFocus = jest.fn();
+
+      function Example() {
+        return (
+          <>
+            <FirstChild />
+            <SecondChild />
+            <ThirdChild />
+          </>
+        );
+      }
+      function FirstChild() {
+        return (
+          <div hidden={true}>
+            <button style={{width: 10, height: 10}} onFocus={handleFirstFocus}>
+              hidden
+            </button>
+          </div>
+        );
+      }
+      function SecondChild() {
+        return (
+          <button
+            ref={secondRef}
+            style={{width: 10, height: 10}}
+            onFocus={handleSecondFocus}>
+            clickable
+          </button>
+        );
+      }
+      function ThirdChild() {
+        return (
+          <button style={{width: 10, height: 10}} onFocus={handleThirdFocus}>
+            clickable
+          </button>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      const didFocus = focusWithin(document.body, [
+        createComponentSelector(Example),
+      ]);
+      expect(didFocus).toBe(true);
+      expect(document.activeElement).not.toBeNull();
+      expect(document.activeElement).toBe(secondRef.current);
+      expect(handleFirstFocus).not.toHaveBeenCalled();
+      expect(handleSecondFocus).toHaveBeenCalledTimes(1);
+      expect(handleThirdFocus).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('observeVisibleRects', () => {
+    let observerMock;
+
+    beforeEach(() => {
+      observerMock = mockIntersectionObserver();
+    });
+
+    // @gate www || experimental
+    it('should notify a listener when the underlying instance intersection changes', async () => {
+      const ref = React.createRef(null);
+
+      function Example() {
+        return <div ref={ref} />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      // Stub out the size of the element this test will be observing.
+      const rect = {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      setBoundingClientRect(ref.current, rect);
+
+      const handleVisibilityChange = jest.fn();
+      observeVisibleRects(
+        document.body,
+        [createComponentSelector(Example)],
+        handleVisibilityChange,
+      );
+
+      expect(observerMock.callback).not.toBeNull();
+      expect(observerMock.observedTargets).toHaveLength(1);
+      expect(handleVisibilityChange).not.toHaveBeenCalled();
+
+      // Simulate IntersectionObserver notification.
+      simulateIntersection([ref.current, rect, 0.5]);
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith([{rect, ratio: 0.5}]);
+    });
+
+    // @gate www || experimental
+    it('should notify a listener of multiple targets when the underlying instance intersection changes', async () => {
+      const ref1 = React.createRef(null);
+      const ref2 = React.createRef(null);
+
+      function Example() {
+        return (
+          <>
+            <div ref={ref1} />
+            <div ref={ref2} />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      // Stub out the size of the element this test will be observing.
+      const rect1 = {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      let rect2 = {
+        x: 210,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      setBoundingClientRect(ref1.current, rect1);
+      setBoundingClientRect(ref2.current, rect2);
+
+      const handleVisibilityChange = jest.fn();
+      observeVisibleRects(
+        document.body,
+        [createComponentSelector(Example)],
+        handleVisibilityChange,
+      );
+
+      expect(observerMock.callback).not.toBeNull();
+      expect(observerMock.observedTargets).toHaveLength(2);
+      expect(handleVisibilityChange).not.toHaveBeenCalled();
+
+      // Simulate IntersectionObserver notification.
+      simulateIntersection([ref1.current, rect1, 0.5]);
+
+      // Even though only one of the rects changed intersection,
+      // the test selector should describe the current state of both.
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith([
+        {rect: rect1, ratio: 0.5},
+        {rect: rect2, ratio: 0},
+      ]);
+
+      handleVisibilityChange.mockClear();
+
+      rect2 = {
+        x: 210,
+        y: 20,
+        width: 200,
+        height: 200,
+      };
+
+      // Simulate another IntersectionObserver notification.
+      simulateIntersection(
+        [ref1.current, rect1, 1],
+        [ref2.current, rect2, 0.25],
+      );
+
+      // The newly changed display rect should also be provided for the second target.
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith([
+        {rect: rect1, ratio: 1},
+        {rect: rect2, ratio: 0.25},
+      ]);
+    });
+
+    // @gate www || experimental
+    it('should stop listening when its disconnected', async () => {
+      const ref = React.createRef(null);
+
+      function Example() {
+        return <div ref={ref} />;
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      // Stub out the size of the element this test will be observing.
+      const rect = {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      setBoundingClientRect(ref.current, rect);
+
+      const handleVisibilityChange = jest.fn();
+      const {disconnect} = observeVisibleRects(
+        document.body,
+        [createComponentSelector(Example)],
+        handleVisibilityChange,
+      );
+
+      expect(observerMock.callback).not.toBeNull();
+      expect(observerMock.observedTargets).toHaveLength(1);
+      expect(handleVisibilityChange).not.toHaveBeenCalled();
+
+      disconnect();
+      expect(observerMock.callback).toBeNull();
+    });
+
+    // This test reuires gating because it relies on the __DEV__ only commit hook to work.
+    // @gate www || experimental && __DEV__
+    it('should update which targets its listening to after a commit', async () => {
+      const ref1 = React.createRef(null);
+      const ref2 = React.createRef(null);
+
+      let increment;
+
+      function Example() {
+        const [count, setCount] = React.useState(0);
+        increment = () => setCount(count + 1);
+        return (
+          <>
+            {count < 2 && <div ref={ref1} />}
+            {count > 0 && <div ref={ref2} />}
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      // Stub out the size of the element this test will be observing.
+      const rect1 = {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      setBoundingClientRect(ref1.current, rect1);
+
+      const handleVisibilityChange = jest.fn();
+      observeVisibleRects(
+        document.body,
+        [createComponentSelector(Example)],
+        handleVisibilityChange,
+      );
+
+      // Simulate IntersectionObserver notification.
+      simulateIntersection([ref1.current, rect1, 1]);
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith([
+        {rect: rect1, ratio: 1},
+      ]);
+
+      await act(() => increment());
+
+      const rect2 = {
+        x: 110,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      setBoundingClientRect(ref2.current, rect2);
+
+      handleVisibilityChange.mockClear();
+
+      simulateIntersection(
+        [ref1.current, rect1, 0.5],
+        [ref2.current, rect2, 0.25],
+      );
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith([
+        {rect: rect1, ratio: 0.5},
+        {rect: rect2, ratio: 0.25},
+      ]);
+
+      await act(() => increment());
+
+      handleVisibilityChange.mockClear();
+
+      simulateIntersection([ref2.current, rect2, 0.75]);
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith([
+        {rect: rect2, ratio: 0.75},
+      ]);
+    });
+
+    // @gate www || experimental
+    it('should not observe components within hidden subtrees', async () => {
+      const ref1 = React.createRef(null);
+      const ref2 = React.createRef(null);
+
+      function Example() {
+        return (
+          <>
+            <div ref={ref1} />
+            <div hidden={true} ref={ref2} />
+          </>
+        );
+      }
+
+      const root = createRoot(container);
+      await act(() => {
+        root.render(<Example />);
+      });
+
+      // Stub out the size of the element this test will be observing.
+      const rect1 = {
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      const rect2 = {
+        x: 210,
+        y: 20,
+        width: 200,
+        height: 100,
+      };
+      setBoundingClientRect(ref1.current, rect1);
+      setBoundingClientRect(ref2.current, rect2);
+
+      const handleVisibilityChange = jest.fn();
+      observeVisibleRects(
+        document.body,
+        [createComponentSelector(Example)],
+        handleVisibilityChange,
+      );
+
+      expect(observerMock.callback).not.toBeNull();
+      expect(observerMock.observedTargets).toHaveLength(1);
+      expect(observerMock.observedTargets[0]).toBe(ref1.current);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
new file mode 100644
index 00000000000..4ec6ba2c7d2
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
@@ -0,0 +1,359 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let act;
+
+describe('ReactDOMTextComponent', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+  });
+
+  it('updates a mounted text component in place', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <span />
+          {'foo'}
+          {'bar'}
+        </div>,
+      );
+    });
+    let inst = container.firstChild;
+    let nodes = inst.childNodes;
+
+    const foo = nodes[1];
+    const bar = nodes[2];
+    expect(foo.data).toBe('foo');
+    expect(bar.data).toBe('bar');
+
+    await act(() => {
+      root.render(
+        <div>
+          <span />
+          {'baz'}
+          {'qux'}
+        </div>,
+      );
+    });
+    inst = container.firstChild;
+    // After the update, the text nodes should have stayed in place (as opposed
+    // to getting unmounted and remounted)
+    nodes = inst.childNodes;
+    expect(nodes[1]).toBe(foo);
+    expect(nodes[2]).toBe(bar);
+    expect(foo.data).toBe('baz');
+    expect(bar.data).toBe('qux');
+  });
+
+  it('can be toggled in and out of the markup', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          {'foo'}
+          <div />
+          {'bar'}
+        </div>,
+      );
+    });
+    let inst = container.firstChild;
+
+    let childNodes = inst.childNodes;
+    const childDiv = childNodes[1];
+
+    await act(() => {
+      root.render(
+        <div>
+          {null}
+          <div />
+          {null}
+        </div>,
+      );
+    });
+    inst = container.firstChild;
+    childNodes = inst.childNodes;
+    expect(childNodes.length).toBe(1);
+    expect(childNodes[0]).toBe(childDiv);
+
+    await act(() => {
+      root.render(
+        <div>
+          {'foo'}
+          <div />
+          {'bar'}
+        </div>,
+      );
+    });
+    inst = container.firstChild;
+    childNodes = inst.childNodes;
+    expect(childNodes.length).toBe(3);
+    expect(childNodes[0].data).toBe('foo');
+    expect(childNodes[1]).toBe(childDiv);
+    expect(childNodes[2].data).toBe('bar');
+  });
+
+  /**
+   * The following Node.normalize() tests are intentionally failing.
+   * See https://github.com/facebook/react/issues/9836 tracking whether we'll need to fix this or if it's unnecessary.
+   */
+  // @gate TODO
+  it('can reconcile text merged by Node.normalize() alongside other elements', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          {'foo'}
+          {'bar'}
+          {'baz'}
+          <span />
+          {'qux'}
+        </div>,
+      );
+    });
+
+    const inst = container.firstChild;
+
+    inst.normalize();
+
+    await act(() => {
+      root.render(
+        <div>
+          {'bar'}
+          {'baz'}
+          {'qux'}
+          <span />
+          {'foo'}
+        </div>,
+        container,
+      );
+    });
+    expect(inst.textContent).toBe('barbazquxfoo');
+  });
+
+  // @gate TODO
+  it('can reconcile text merged by Node.normalize()', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          {'foo'}
+          {'bar'}
+          {'baz'}
+        </div>,
+      );
+    });
+    let inst = container.firstChild;
+
+    inst.normalize();
+
+    await act(() => {
+      root.render(
+        <div>
+          {'bar'}
+          {'baz'}
+          {'qux'}
+        </div>,
+        container,
+      );
+    });
+    inst = container.firstChild;
+    expect(inst.textContent).toBe('barbazqux');
+  });
+
+  it('can reconcile text from pre-rendered markup', async () => {
+    const container = document.createElement('div');
+    let children = (
+      <div>
+        {'foo'}
+        {'bar'}
+        {'baz'}
+      </div>
+    );
+    container.innerHTML = ReactDOMServer.renderToString(children);
+
+    const root = await act(() => {
+      return ReactDOMClient.hydrateRoot(container, children);
+    });
+    expect(container.textContent).toBe('foobarbaz');
+
+    await act(() => {
+      root.unmount();
+    });
+
+    children = (
+      <div>
+        {''}
+        {''}
+        {''}
+      </div>
+    );
+    container.innerHTML = ReactDOMServer.renderToString(children);
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, children);
+    });
+    expect(container.textContent).toBe('');
+  });
+
+  // @gate TODO
+  it('can reconcile text arbitrarily split into multiple nodes', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <div>
+          <span />
+          {'foobarbaz'}
+        </div>,
+      );
+    });
+    let inst = container.firstChild;
+
+    const childNodes = inst.childNodes;
+    const textNode = childNodes[1];
+    textNode.textContent = 'foo';
+    inst.insertBefore(
+      document.createTextNode('bar'),
+      childNodes[1].nextSibling,
+    );
+    inst.insertBefore(
+      document.createTextNode('baz'),
+      childNodes[1].nextSibling,
+    );
+
+    await act(() => {
+      root.render(
+        <div>
+          <span />
+          {'barbazqux'}
+        </div>,
+        container,
+      );
+    });
+    inst = container.firstChild;
+    expect(inst.textContent).toBe('barbazqux');
+  });
+
+  // @gate TODO
+  it('can reconcile text arbitrarily split into multiple nodes on some substitutions only', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <span />
+          {'bar'}
+          <span />
+          {'foobarbaz'}
+          {'foo'}
+          {'barfoo'}
+          <span />
+        </div>,
+      );
+    });
+
+    let inst = container.firstChild;
+
+    const childNodes = inst.childNodes;
+    const textNode = childNodes[3];
+    textNode.textContent = 'foo';
+    inst.insertBefore(
+      document.createTextNode('bar'),
+      childNodes[3].nextSibling,
+    );
+    inst.insertBefore(
+      document.createTextNode('baz'),
+      childNodes[3].nextSibling,
+    );
+    const secondTextNode = childNodes[5];
+    secondTextNode.textContent = 'bar';
+    inst.insertBefore(
+      document.createTextNode('foo'),
+      childNodes[5].nextSibling,
+    );
+
+    await act(() => {
+      root.render(
+        <div>
+          <span />
+          {'baz'}
+          <span />
+          {'barbazqux'}
+          {'bar'}
+          {'bazbar'}
+          <span />
+        </div>,
+        container,
+      );
+    });
+    inst = container.firstChild;
+    expect(inst.textContent).toBe('bazbarbazquxbarbazbar');
+  });
+
+  // @gate TODO
+  it('can unmount normalized text nodes', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          {''}
+          {'foo'}
+          {'bar'}
+        </div>,
+      );
+    });
+
+    container.normalize();
+    await act(() => {
+      root.render(<div />);
+    });
+
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  it('throws for Temporal-like text nodes', async () => {
+    const container = document.createElement('div');
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<div>{new TemporalLike()}</div>);
+      }),
+    ).rejects.toThrowError(
+      new Error(
+        'Objects are not valid as a React child (found: object with keys {}).' +
+          ' If you meant to render a collection of children, use an array instead.',
+      ),
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
new file mode 100644
index 00000000000..b9389f8632f
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -0,0 +1,1134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 emptyFunction() {}
+
+describe('ReactDOMTextarea', () => {
+  let React;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  let act;
+  let assertConsoleErrorDev;
+
+  let renderTextarea;
+
+  const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    renderTextarea = async function (component, container, root) {
+      await act(() => {
+        root.render(component);
+      });
+
+      const node = container.firstChild;
+
+      // Fixing jsdom's quirky behavior -- in reality, the parser should strip
+      // off the leading newline but we need to do it by hand here.
+      node.defaultValue = node.innerHTML.replace(/^\n/, '');
+      return node;
+    };
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should allow setting `defaultValue`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue="giraffe" />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('giraffe');
+
+    // Changing `defaultValue` should do nothing.
+    await renderTextarea(<textarea defaultValue="gorilla" />, container, root);
+    expect(node.value).toEqual('giraffe');
+
+    node.value = 'cat';
+
+    await renderTextarea(<textarea defaultValue="monkey" />, container, root);
+    expect(node.value).toEqual('cat');
+  });
+
+  it('should display `defaultValue` of number 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue={0} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('0');
+  });
+
+  it('should display `defaultValue` of bigint 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue={0n} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('0');
+  });
+
+  it('should display "false" for `defaultValue` of `false`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea defaultValue={false} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('false');
+  });
+
+  it('should display "foobar" for `defaultValue` of `objToString`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const objToString = {
+      toString: function () {
+        return 'foobar';
+      },
+    };
+    const node = await renderTextarea(
+      <textarea defaultValue={objToString} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('foobar');
+  });
+
+  it('should set defaultValue', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="foo" />);
+    });
+    await act(() => {
+      root.render(<textarea defaultValue="bar" />);
+    });
+    await act(() => {
+      root.render(<textarea defaultValue="noise" />);
+    });
+
+    expect(container.firstChild.defaultValue).toBe('noise');
+  });
+
+  it('should not render value as an attribute', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.getAttribute('value')).toBe(null);
+  });
+
+  it('should display `value` of number 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value={0} onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('0');
+  });
+
+  it('should update defaultValue to empty string', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue={'foo'} />);
+    });
+
+    await act(() => {
+      root.render(<textarea defaultValue={''} />);
+    });
+
+    expect(container.firstChild.defaultValue).toBe('');
+  });
+
+  it('should allow setting `value` to `giraffe`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('giraffe');
+
+    await act(() => {
+      root.render(<textarea value="gorilla" onChange={emptyFunction} />);
+    });
+
+    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)', async () => {
+    const container = document.createElement('div');
+
+    let counter = 0;
+    const originalCreateElement = document.createElement;
+    spyOnDevAndProd(document, 'createElement').mockImplementation(
+      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 = String(val);
+              counter++;
+            },
+          });
+        }
+        return el;
+      },
+    );
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value="" readOnly={true} />);
+    });
+
+    expect(counter).toEqual(0);
+  });
+
+  it('should render defaultValue for SSR', () => {
+    const markup = ReactDOMServer.renderToString(<textarea defaultValue="1" />);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.innerHTML).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render value for SSR', () => {
+    const element = <textarea value="1" onChange={function () {}} />;
+    const markup = ReactDOMServer.renderToString(element);
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.innerHTML).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should allow setting `value` to `true`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('giraffe');
+
+    await act(() => {
+      root.render(<textarea value={true} onChange={emptyFunction} />);
+    });
+
+    expect(node.value).toEqual('true');
+  });
+
+  it('should allow setting `value` to `false`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('giraffe');
+
+    await act(() => {
+      root.render(<textarea value={false} onChange={emptyFunction} />);
+    });
+
+    expect(node.value).toEqual('false');
+  });
+
+  it('should allow setting `value` to `objToString`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('giraffe');
+
+    const objToString = {
+      toString: function () {
+        return 'foo';
+      },
+    };
+
+    await act(() => {
+      root.render(<textarea value={objToString} onChange={emptyFunction} />);
+    });
+
+    expect(node.value).toEqual('foo');
+  });
+
+  it('should throw when value is set to a Temporal-like object', async () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="giraffe" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('giraffe');
+
+    const test = async () => {
+      await act(() => {
+        root.render(
+          <textarea value={new TemporalLike()} onChange={emptyFunction} />,
+        );
+      });
+    };
+    await expect(test).rejects.toThrowError(new TypeError('prod message'));
+    assertConsoleErrorDev([
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before using it here.\n' +
+        '    in textarea (at **',
+    ]);
+  });
+
+  it('should take updates to `defaultValue` for uncontrolled textarea', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+
+    await act(() => {
+      root.render(<textarea defaultValue="1" />);
+    });
+
+    expect(node.value).toBe('0');
+  });
+
+  it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+
+    await act(() => {
+      root.render(<textarea>1</textarea>);
+    });
+
+    expect(node.value).toBe('0');
+  });
+
+  it('should not incur unnecessary DOM mutations', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value="a" onChange={emptyFunction} />);
+    });
+
+    const node = container.firstChild;
+    let nodeValue = 'a';
+    const nodeValueSetter = jest.fn();
+    Object.defineProperty(node, 'value', {
+      get: function () {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function (newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    await act(() => {
+      root.render(<textarea value="a" onChange={emptyFunction} />);
+    });
+
+    expect(nodeValueSetter).toHaveBeenCalledTimes(0);
+
+    await act(() => {
+      root.render(<textarea value="b" onChange={emptyFunction} />);
+    });
+
+    expect(nodeValueSetter).toHaveBeenCalledTimes(1);
+  });
+
+  it('should properly control a value of number `0`', async () => {
+    const setUntrackedValue = Object.getOwnPropertyDescriptor(
+      HTMLTextAreaElement.prototype,
+      'value',
+    ).set;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    document.body.appendChild(container);
+
+    try {
+      const node = await renderTextarea(
+        <textarea value={0} onChange={emptyFunction} />,
+        container,
+        root,
+      );
+
+      setUntrackedValue.call(node, 'giraffe');
+      node.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: false}),
+      );
+      expect(node.value).toBe('0');
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore children content', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const node = await renderTextarea(
+        <textarea>giraffe</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('');
+
+      await act(() => {
+        root.render(<textarea>gorilla</textarea>);
+      });
+
+      expect(node.value).toEqual('');
+    });
+  }
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should receive defaultValue and still ignore children content', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const node = await renderTextarea(
+        <textarea defaultValue="dragon">monkey</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('dragon');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should treat children like `defaultValue`', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const node = await renderTextarea(
+        <textarea>giraffe</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+
+      expect(node.value).toBe('giraffe');
+
+      await act(() => {
+        root.render(<textarea>gorilla</textarea>);
+      });
+
+      expect(node.value).toEqual('giraffe');
+    });
+  }
+
+  it('should keep value when switching to uncontrolled element if not changed', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="kitten" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('kitten');
+
+    await act(() => {
+      root.render(<textarea defaultValue="gorilla" />);
+    });
+
+    expect(node.value).toEqual('kitten');
+  });
+
+  it('should keep value when switching to uncontrolled element if changed', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const node = await renderTextarea(
+      <textarea value="kitten" onChange={emptyFunction} />,
+      container,
+      root,
+    );
+
+    expect(node.value).toBe('kitten');
+
+    await act(() => {
+      root.render(<textarea value="puppies" onChange={emptyFunction} />);
+    });
+
+    expect(node.value).toBe('puppies');
+
+    await act(() => {
+      root.render(<textarea defaultValue="gorilla" />);
+    });
+
+    expect(node.value).toEqual('puppies');
+  });
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore numbers as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const node = await renderTextarea(
+        <textarea>{17}</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should allow numbers as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const node = await renderTextarea(
+        <textarea>{17}</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('17');
+    });
+  }
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore booleans as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const node = await renderTextarea(
+        <textarea>{false}</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should allow booleans as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const node = await renderTextarea(
+        <textarea>{false}</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('false');
+    });
+  }
+
+  if (ReactFeatureFlags.disableTextareaChildren) {
+    it('should ignore objects as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const obj = {
+        toString: function () {
+          return 'sharkswithlasers';
+        },
+      };
+      const node = await renderTextarea(
+        <textarea>{obj}</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should allow objects as children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      const obj = {
+        toString: function () {
+          return 'sharkswithlasers';
+        },
+      };
+      const node = await renderTextarea(
+        <textarea>{obj}</textarea>,
+        container,
+        root,
+      );
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      expect(node.value).toBe('sharkswithlasers');
+    });
+  }
+
+  if (!ReactFeatureFlags.disableTextareaChildren) {
+    it('should throw with multiple or invalid children', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(async () => {
+        await act(() => {
+          root.render(
+            <textarea>
+              {'hello'}
+              {'there'}
+            </textarea>,
+          );
+        });
+      }).rejects.toThrow('<textarea> can only have at most one child');
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+
+      let node;
+      await expect(
+        (async () =>
+          (node = await renderTextarea(
+            <textarea>
+              <strong />
+            </textarea>,
+            container,
+            root,
+          )))(),
+      ).resolves.not.toThrow();
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+
+      expect(node.value).toBe('[object Object]');
+    });
+  }
+
+  it('should unmount', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea />);
+    });
+
+    await act(() => {
+      root.unmount();
+    });
+  });
+
+  it('should warn if value is null', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value={null} />);
+    });
+    assertConsoleErrorDev([
+      '`value` prop on `textarea` should not be null. ' +
+        'Consider using an empty string to clear the component or `undefined` ' +
+        'for uncontrolled components.\n' +
+        '    in textarea (at **)',
+    ]);
+
+    await act(() => {
+      root.render(<textarea value={null} />);
+    });
+  });
+
+  it('should warn if value and defaultValue are specified', async () => {
+    const InvalidComponent = () => (
+      <textarea value="foo" defaultValue="bar" readOnly={true} />
+    );
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<InvalidComponent />);
+    });
+    assertConsoleErrorDev([
+      '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 ' +
+        'both). Decide between using a controlled or uncontrolled textarea ' +
+        'and remove one of these props. More info: ' +
+        'https://react.dev/link/controlled-components\n' +
+        '    in textarea (at **)\n' +
+        '    in InvalidComponent (at **)',
+    ]);
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<InvalidComponent />);
+    });
+  });
+
+  it('should not warn about missing onChange in uncontrolled textareas', async () => {
+    const container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<textarea />);
+    });
+
+    await act(() => {
+      root.unmount();
+    });
+    root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<textarea value={undefined} />);
+    });
+  });
+
+  it('does not set textContent if value is unchanged', async () => {
+    const container = document.createElement('div');
+    let node;
+    let instance;
+    // Setting defaultValue on a textarea is equivalent to setting textContent,
+    // and is the method we currently use, so we can observe if defaultValue is
+    // is set to determine if textContent is being recreated.
+    // https://html.spec.whatwg.org/#the-textarea-element
+    let defaultValue;
+    const set = jest.fn(value => {
+      defaultValue = value;
+    });
+    const get = jest.fn(value => {
+      return defaultValue;
+    });
+    class App extends React.Component {
+      state = {count: 0, text: 'foo'};
+      componentDidMount() {
+        instance = this;
+      }
+      render() {
+        return (
+          <div>
+            <span>{this.state.count}</span>
+            <textarea
+              ref={n => (node = n)}
+              value="foo"
+              onChange={emptyFunction}
+              data-count={this.state.count}
+            />
+          </div>
+        );
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    defaultValue = node.defaultValue;
+    Object.defineProperty(node, 'defaultValue', {get, set});
+    instance.setState({count: 1});
+    expect(set.mock.calls.length).toBe(0);
+  });
+
+  describe('When given a Symbol value', () => {
+    it('treats initial Symbol value as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea value={Symbol('foobar')} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <textarea> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in textarea (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+    });
+
+    it('treats initial Symbol children as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea onChange={() => {}}>{Symbol('foo')}</textarea>);
+      });
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+    });
+
+    it('treats updated Symbol value as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea value="foo" onChange={() => {}} />);
+      });
+
+      await act(() => {
+        root.render(<textarea value={Symbol('foo')} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <textarea> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in textarea (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+    });
+
+    it('treats initial Symbol defaultValue as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea defaultValue={Symbol('foobar')} />);
+      });
+
+      const node = container.firstChild;
+
+      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
+      expect(node.value).toBe('');
+    });
+
+    it('treats updated Symbol defaultValue as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea defaultValue="foo" />);
+      });
+
+      await act(() => {
+        root.render(<textarea defaultValue={Symbol('foobar')} />);
+      });
+
+      const node = container.firstChild;
+
+      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
+      expect(node.value).toBe('foo');
+    });
+  });
+
+  describe('When given a function value', () => {
+    it('treats initial function value as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea value={() => {}} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <textarea> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in textarea (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+    });
+
+    it('treats initial function children as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea onChange={() => {}}>{() => {}}</textarea>);
+      });
+      assertConsoleErrorDev([
+        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.\n' +
+          '    in textarea (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+    });
+
+    it('treats updated function value as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<textarea value="foo" onChange={() => {}} />);
+      });
+
+      await act(() => {
+        root.render(<textarea value={() => {}} onChange={() => {}} />);
+      });
+      assertConsoleErrorDev([
+        'Invalid value for prop `value` on <textarea> tag. ' +
+          'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
+          'For details, see https://react.dev/link/attribute-behavior \n' +
+          '    in textarea (at **)',
+      ]);
+      const node = container.firstChild;
+
+      expect(node.value).toBe('');
+    });
+
+    it('treats initial function defaultValue as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea defaultValue={() => {}} />);
+      });
+
+      const node = container.firstChild;
+
+      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
+      expect(node.value).toBe('');
+    });
+
+    it('treats updated function defaultValue as an empty string', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<textarea defaultValue="foo" />);
+      });
+
+      await act(() => {
+        root.render(<textarea defaultValue={() => {}} />);
+      });
+
+      const node = container.firstChild;
+
+      // TODO: defaultValue is a reserved prop and is not validated. Check warnings when they are.
+      expect(node.value).toBe('foo');
+    });
+  });
+
+  it('should remove previous `defaultValue`', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
+
+    await act(() => {
+      root.render(<textarea />);
+    });
+
+    expect(node.defaultValue).toBe('');
+  });
+
+  it('should treat `defaultValue={null}` as missing', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea defaultValue="0" />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('0');
+
+    await act(() => {
+      root.render(<textarea defaultValue={null} />);
+    });
+
+    expect(node.defaultValue).toBe('');
+  });
+
+  it('should not warn about missing onChange if value is undefined', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value={undefined} />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should not warn about missing onChange if onChange is set', async () => {
+    const change = jest.fn();
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value="something" onChange={change} />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should not warn about missing onChange if disabled is true', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value="something" disabled={true} />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should not warn about missing onChange if value is not set', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<textarea value="something" readOnly={true} />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should warn about missing onChange if value is false', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value={false} />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in textarea (at **)',
+    ]);
+  });
+
+  it('should warn about missing onChange if value is 0', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value={0} />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in textarea (at **)',
+    ]);
+  });
+
+  it('should warn about missing onChange if value is "0"', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value="0" />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in textarea (at **)',
+    ]);
+  });
+
+  it('should warn about missing onChange if value is ""', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea value="" />);
+    });
+    assertConsoleErrorDev([
+      '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`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in textarea (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
new file mode 100644
index 00000000000..08c48d5f0d7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -0,0 +1,1019 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+let JSDOM;
+let React;
+let ReactDOMClient;
+let clientAct;
+let ReactDOMFizzServer;
+let Stream;
+let Suspense;
+let useId;
+let useState;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let waitForPaint;
+let SuspenseList;
+
+describe('useId', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    clientAct = require('internal-test-utils').act;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    useId = React.useId;
+    useState = React.useState;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForPaint = InternalTestUtils.waitForPaint;
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  async function serverAct(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const fakeBody = document.createElement('body');
+    fakeBody.innerHTML = bufferedContent;
+    while (fakeBody.firstChild) {
+      const node = fakeBody.firstChild;
+      if (node.nodeName === 'SCRIPT') {
+        const script = document.createElement('script');
+        script.textContent = node.textContent;
+        fakeBody.removeChild(node);
+        container.appendChild(script);
+      } else {
+        container.appendChild(node);
+      }
+    }
+  }
+
+  function normalizeTreeIdForTesting(id) {
+    const result = id.match(/_(R|r)_([a-z0-9]*)(H([0-9]*))?_/);
+    if (result === undefined) {
+      throw new Error('Invalid id format');
+    }
+    const [, serverClientPrefix, base32, hookIndex] = result;
+    if (serverClientPrefix.endsWith('r')) {
+      // Client ids aren't stable. For testing purposes, strip out the counter.
+      return (
+        'CLIENT_GENERATED_ID' +
+        (hookIndex !== undefined ? ` (${hookIndex})` : '')
+      );
+    }
+    // Formats the tree id as a binary sequence, so it's easier to visualize
+    // the structure.
+    return (
+      parseInt(base32, 32).toString(2) +
+      (hookIndex !== undefined ? ` (${hookIndex})` : '')
+    );
+  }
+
+  function DivWithId({children}) {
+    const id = normalizeTreeIdForTesting(useId());
+    return <div id={id}>{children}</div>;
+  }
+
+  it('basic example', async () => {
+    function App() {
+      return (
+        <div>
+          <div>
+            <DivWithId />
+            <DivWithId />
+          </div>
+          <DivWithId />
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          <div>
+            <div
+              id="101"
+            />
+            <div
+              id="1001"
+            />
+          </div>
+          <div
+            id="10"
+          />
+        </div>
+      </div>
+    `);
+  });
+
+  it('indirections', async () => {
+    function App() {
+      // There are no forks in this tree, but the parent and the child should
+      // have different ids.
+      return (
+        <DivWithId>
+          <div>
+            <div>
+              <div>
+                <DivWithId />
+              </div>
+            </div>
+          </div>
+        </DivWithId>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="0"
+        >
+          <div>
+            <div>
+              <div>
+                <div
+                  id="1"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+  });
+
+  it('StrictMode double rendering', async () => {
+    const {StrictMode} = React;
+
+    function App() {
+      return (
+        <StrictMode>
+          <DivWithId />
+        </StrictMode>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="0"
+        />
+      </div>
+    `);
+  });
+
+  it('empty (null) children', async () => {
+    // We don't treat empty children different from non-empty ones, which means
+    // they get allocated a slot when generating ids. There's no inherent reason
+    // to do this; Fiber happens to allocate a fiber for null children that
+    // appear in a list, which is not ideal for performance. For the purposes
+    // of id generation, though, what matters is that Fizz and Fiber
+    // are consistent.
+    function App() {
+      return (
+        <>
+          {null}
+          <DivWithId />
+          {null}
+          <DivWithId />
+        </>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="10"
+        />
+        <div
+          id="100"
+        />
+      </div>
+    `);
+  });
+
+  it('large ids', async () => {
+    // The component in this test outputs a recursive tree of nodes with ids,
+    // where the underlying binary representation is an alternating series of 1s
+    // and 0s. In other words, they are all of the form 101010101.
+    //
+    // Because we use base 32 encoding, the resulting id should consist of
+    // alternating 'a' (01010) and 'l' (10101) characters, except for the the
+    // 'R:' prefix, and the first character after that, which may not correspond
+    // to a complete set of 5 bits.
+    //
+    // Example: _Rclalalalalalalala...:
+    //
+    // We can use this pattern to test large ids that exceed the bitwise
+    // safe range (32 bits). The algorithm should theoretically support ids
+    // of any size.
+
+    function Child({children}) {
+      const id = useId();
+      return <div id={id}>{children}</div>;
+    }
+
+    function App() {
+      let tree = <Child />;
+      for (let i = 0; i < 50; i++) {
+        tree = (
+          <>
+            <Child />
+            {tree}
+          </>
+        );
+      }
+      return tree;
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    const divs = container.querySelectorAll('div');
+
+    // Confirm that every id matches the expected pattern
+    for (let i = 0; i < divs.length; i++) {
+      // Example: _Rclalalalalalalala...:
+      expect(divs[i].id).toMatch(/^_R_.(((al)*a?)((la)*l?))*_$/);
+    }
+  });
+
+  it('multiple ids in a single component', async () => {
+    function App() {
+      const id1 = useId();
+      const id2 = useId();
+      const id3 = useId();
+      return `${id1}, ${id2}, ${id3}`;
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    // We append a suffix to the end of the id to distinguish them
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        _R_0_, _R_0H1_, _R_0H2_
+      </div>
+    `);
+  });
+
+  it('local render phase updates', async () => {
+    function App({swap}) {
+      const [count, setCount] = useState(0);
+      if (count < 3) {
+        setCount(count + 1);
+      }
+      return useId();
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        _R_0_
+      </div>
+    `);
+  });
+
+  // @gate enableSuspenseList
+  it('Supports SuspenseList (reveal order independent)', async () => {
+    function Baz({id, children}) {
+      return <span id={id}>{children}</span>;
+    }
+
+    function Bar({children}) {
+      const id = useId();
+      return <Baz id={id}>{children}</Baz>;
+    }
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="independent">
+          <Bar>A</Bar>
+          <Bar>B</Bar>
+        </SuspenseList>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <Foo />);
+    });
+
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+  });
+
+  // @gate enableSuspenseList
+  it('Supports SuspenseList (reveal order "together")', async () => {
+    function Baz({id, children}) {
+      return <span id={id}>{children}</span>;
+    }
+
+    function Bar({children}) {
+      const id = useId();
+      return <Baz id={id}>{children}</Baz>;
+    }
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Bar>A</Bar>
+          <Bar>B</Bar>
+        </SuspenseList>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <Foo />);
+    });
+
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+  });
+
+  // @gate enableSuspenseList
+  it('Supports SuspenseList (reveal order "forwards")', async () => {
+    function Baz({id, children}) {
+      return <span id={id}>{children}</span>;
+    }
+
+    function Bar({children}) {
+      const id = useId();
+      return <Baz id={id}>{children}</Baz>;
+    }
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <Bar>A</Bar>
+          <Bar>B</Bar>
+        </SuspenseList>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <Foo />);
+    });
+
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+  });
+
+  // @gate enableSuspenseList
+  it('Supports SuspenseList (reveal order "backwards") with a single child in a list of many', async () => {
+    function Baz({id, children}) {
+      return <span id={id}>{children}</span>;
+    }
+
+    function Bar({children}) {
+      const id = useId();
+      return <Baz id={id}>{children}</Baz>;
+    }
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="unstable_legacy-backwards" tail="visible">
+          {null}
+          <Bar>A</Bar>
+          {null}
+        </SuspenseList>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_2_"
+        >
+          A
+        </span>
+        <!-- -->
+      </div>
+    `);
+
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <Foo />);
+    });
+
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_2_"
+        >
+          A
+        </span>
+        <!-- -->
+      </div>
+    `);
+  });
+
+  // @gate enableSuspenseList
+  it('Supports SuspenseList (reveal order "backwards")', async () => {
+    function Baz({id, children}) {
+      return <span id={id}>{children}</span>;
+    }
+
+    function Bar({children}) {
+      const id = useId();
+      return <Baz id={id}>{children}</Baz>;
+    }
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="unstable_legacy-backwards" tail="visible">
+          <Bar>A</Bar>
+          <Bar>B</Bar>
+        </SuspenseList>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_R_1_"
+        >
+          A
+        </span>
+        <span
+          id="_R_2_"
+        >
+          B
+        </span>
+      </div>
+    `);
+
+    // TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
+    await expect(async () => {
+      await clientAct(async () => {
+        ReactDOMClient.hydrateRoot(container, <Foo />);
+      });
+    }).rejects.toThrowError(
+      `Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <span
+          id="_r_1_"
+        >
+          A
+        </span>
+        <span
+          id="_r_0_"
+        >
+          B
+        </span>
+      </div>
+    `);
+  });
+
+  it('basic incremental hydration', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <DivWithId label="A" />
+            <DivWithId label="B" />
+          </Suspense>
+          <DivWithId label="C" />
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          <!--$-->
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <!--/$-->
+          <div
+            id="10"
+          />
+        </div>
+      </div>
+    `);
+  });
+
+  it('inserting/deleting siblings outside a dehydrated Suspense boundary', async () => {
+    const span = React.createRef(null);
+    function App({swap}) {
+      // Note: Using a dynamic array so these are treated as insertions and
+      // deletions instead of updates, because Fiber currently allocates a node
+      // even for empty children.
+      const children = [
+        <DivWithId key="A" />,
+        swap ? <DivWithId key="C" /> : <DivWithId key="B" />,
+        <DivWithId key="D" />,
+      ];
+      return (
+        <>
+          {children}
+          <Suspense key="boundary" fallback="Loading...">
+            <DivWithId />
+            <span ref={span} />
+          </Suspense>
+        </>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    const dehydratedSpan = container.getElementsByTagName('span')[0];
+    await clientAct(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App />);
+      await waitForPaint([]);
+      expect(container).toMatchInlineSnapshot(`
+        <div
+          id="container"
+        >
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <div
+            id="1101"
+          />
+          <!--$-->
+          <div
+            id="110"
+          />
+          <span />
+          <!--/$-->
+        </div>
+      `);
+
+      // The inner boundary hasn't hydrated yet
+      expect(span.current).toBe(null);
+
+      // Swap B for C
+      root.render(<App swap={true} />);
+    });
+    // The swap should not have caused a mismatch.
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="101"
+        />
+        <div
+          id="CLIENT_GENERATED_ID"
+        />
+        <div
+          id="1101"
+        />
+        <!--$-->
+        <div
+          id="110"
+        />
+        <span />
+        <!--/$-->
+      </div>
+    `);
+    // Should have hydrated successfully
+    expect(span.current).toBe(dehydratedSpan);
+  });
+
+  it('inserting/deleting siblings inside a dehydrated Suspense boundary', async () => {
+    const span = React.createRef(null);
+    function App({swap}) {
+      // Note: Using a dynamic array so these are treated as insertions and
+      // deletions instead of updates, because Fiber currently allocates a node
+      // even for empty children.
+      const children = [
+        <DivWithId key="A" />,
+        swap ? <DivWithId key="C" /> : <DivWithId key="B" />,
+        <DivWithId key="D" />,
+      ];
+      return (
+        <Suspense key="boundary" fallback="Loading...">
+          {children}
+          <span ref={span} />
+        </Suspense>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    const dehydratedSpan = container.getElementsByTagName('span')[0];
+    await clientAct(async () => {
+      const root = ReactDOMClient.hydrateRoot(container, <App />);
+      await waitForPaint([]);
+      expect(container).toMatchInlineSnapshot(`
+        <div
+          id="container"
+        >
+          <!--$-->
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <div
+            id="1101"
+          />
+          <span />
+          <!--/$-->
+        </div>
+      `);
+
+      // The inner boundary hasn't hydrated yet
+      expect(span.current).toBe(null);
+
+      // Swap B for C
+      root.render(<App swap={true} />);
+    });
+    // The swap should not have caused a mismatch.
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <!--$-->
+        <div
+          id="101"
+        />
+        <div
+          id="CLIENT_GENERATED_ID"
+        />
+        <div
+          id="1101"
+        />
+        <span />
+        <!--/$-->
+      </div>
+    `);
+    // Should have hydrated successfully
+    expect(span.current).toBe(dehydratedSpan);
+  });
+
+  it('identifierPrefix option', async () => {
+    function Child() {
+      const id = useId();
+      return <div>{id}</div>;
+    }
+
+    function App({showMore}) {
+      return (
+        <>
+          <Child />
+          <Child />
+          {showMore && <Child />}
+        </>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        identifierPrefix: 'custom-prefix-',
+      });
+      pipe(writable);
+    });
+    let root;
+    await clientAct(async () => {
+      root = ReactDOMClient.hydrateRoot(container, <App />, {
+        identifierPrefix: 'custom-prefix-',
+      });
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          _custom-prefix-R_1_
+        </div>
+        <div>
+          _custom-prefix-R_2_
+        </div>
+      </div>
+    `);
+
+    // Mount a new, client-only id
+    await clientAct(async () => {
+      root.render(<App showMore={true} />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          _custom-prefix-R_1_
+        </div>
+        <div>
+          _custom-prefix-R_2_
+        </div>
+        <div>
+          _custom-prefix-r_0_
+        </div>
+      </div>
+    `);
+  });
+
+  // https://github.com/vercel/next.js/issues/43033
+  // re-rendering in strict mode caused the localIdCounter to be reset but it the rerender hook does not
+  // increment it again. This only shows up as a problem for subsequent useId's because it affects child
+  // and sibling counters not the initial one
+  it('does not forget it mounted an id when re-rendering in dev', async () => {
+    function Parent() {
+      const id = useId();
+      return (
+        <div>
+          {id} <Child />
+        </div>
+      );
+    }
+    function Child() {
+      const id = useId();
+      return <div>{id}</div>;
+    }
+
+    function App({showMore}) {
+      return (
+        <React.StrictMode>
+          <Parent />
+        </React.StrictMode>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          _R_0_
+          <!-- -->
+           
+          <div>
+            _R_7_
+          </div>
+        </div>
+      </div>
+    `);
+
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          _R_0_
+          <!-- -->
+           
+          <div>
+            _R_7_
+          </div>
+        </div>
+      </div>
+    `);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js b/packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js
new file mode 100644
index 00000000000..1c5b43a18ac
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Suspense;
+let SuspenseList;
+let ViewTransition;
+let act;
+let assertLog;
+let Scheduler;
+let textCache;
+
+describe('ReactDOMViewTransition', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    Suspense = React.Suspense;
+    ViewTransition = React.ViewTransition;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    textCache = new Map();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  // @gate enableSuspenseList
+  it('handles ViewTransition wrapping Suspense inside SuspenseList', async () => {
+    function Card({id}) {
+      return (
+        <div>
+          <AsyncText text={`Card ${id}`} />
+        </div>
+      );
+    }
+
+    function CardSkeleton({n}) {
+      return <Text text={`Skeleton ${n}`} />;
+    }
+
+    function App() {
+      return (
+        <div>
+          <SuspenseList revealOrder="together">
+            <ViewTransition>
+              <Suspense fallback={<CardSkeleton n={1} />}>
+                <Card id={1} />
+              </Suspense>
+            </ViewTransition>
+            <ViewTransition>
+              <Suspense fallback={<CardSkeleton n={2} />}>
+                <Card id={2} />
+              </Suspense>
+            </ViewTransition>
+            <ViewTransition>
+              <Suspense fallback={<CardSkeleton n={3} />}>
+                <Card id={3} />
+              </Suspense>
+            </ViewTransition>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    // Initial render - all cards should suspend
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([
+      'Suspend! [Card 1]',
+      'Skeleton 1',
+      'Suspend! [Card 2]',
+      'Skeleton 2',
+      'Suspend! [Card 3]',
+      'Skeleton 3',
+      'Skeleton 1',
+      'Skeleton 2',
+      'Skeleton 3',
+    ]);
+
+    await act(() => {
+      resolveText('Card 1');
+      resolveText('Card 2');
+      resolveText('Card 3');
+    });
+
+    assertLog(['Card 1', 'Card 2', 'Card 3']);
+
+    // All cards should be visible
+    expect(container.textContent).toContain('Card 1');
+    expect(container.textContent).toContain('Card 2');
+    expect(container.textContent).toContain('Card 3');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js b/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js
new file mode 100644
index 00000000000..65957d29e98
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMserverIntegrationProgress-test.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModules();
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOMClient,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegrationProgress', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('a progress in an indeterminate state', async render => {
+    // Regression test for https://github.com/facebook/react/issues/6119
+    const e = await render(<progress value={null} />);
+    expect(e.hasAttribute('value')).toBe(false);
+    const e2 = await render(<progress value={50} />);
+    expect(e2.getAttribute('value')).toBe('50');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
new file mode 100644
index 00000000000..c985d0e048d
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
@@ -0,0 +1,386 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 findDOMNode;
+let ReactDOMClient;
+let TogglingComponent;
+let act;
+let Scheduler;
+let assertLog;
+
+let container;
+
+describe('ReactEmptyComponent', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    findDOMNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .findDOMNode;
+    Scheduler = require('scheduler');
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+    assertLog = InternalTestUtils.assertLog;
+
+    container = document.createElement('div');
+
+    TogglingComponent = class extends React.Component {
+      state = {component: this.props.firstComponent};
+
+      componentDidMount() {
+        Scheduler.log('mount ' + findDOMNode(this)?.nodeName);
+        this.setState({component: this.props.secondComponent});
+      }
+
+      componentDidUpdate() {
+        Scheduler.log('update ' + findDOMNode(this)?.nodeName);
+      }
+
+      render() {
+        const Component = this.state.component;
+        return Component ? <Component /> : null;
+      }
+    };
+  });
+
+  describe.each([null, undefined])('when %s', nullORUndefined => {
+    it('should not throw when rendering', () => {
+      function EmptyComponent() {
+        return nullORUndefined;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+
+      expect(() => {
+        ReactDOM.flushSync(() => {
+          root.render(<EmptyComponent />);
+        });
+      }).not.toThrowError();
+    });
+
+    it('should not produce child DOM nodes for nullish and false', async () => {
+      function Component1() {
+        return nullORUndefined;
+      }
+
+      function Component2() {
+        return false;
+      }
+
+      const container1 = document.createElement('div');
+      const root1 = ReactDOMClient.createRoot(container1);
+      await act(() => {
+        root1.render(<Component1 />);
+      });
+      expect(container1.children.length).toBe(0);
+
+      const container2 = document.createElement('div');
+      const root2 = ReactDOMClient.createRoot(container2);
+      await act(() => {
+        root2.render(<Component2 />);
+      });
+      expect(container2.children.length).toBe(0);
+    });
+
+    it('should be able to switch between rendering nullish and a normal tag', async () => {
+      const instance1 = (
+        <TogglingComponent
+          firstComponent={nullORUndefined}
+          secondComponent={'div'}
+        />
+      );
+      const instance2 = (
+        <TogglingComponent
+          firstComponent={'div'}
+          secondComponent={nullORUndefined}
+        />
+      );
+
+      const container2 = document.createElement('div');
+      const root1 = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root1.render(instance1);
+      });
+
+      assertLog(['mount undefined', 'update DIV']);
+
+      const root2 = ReactDOMClient.createRoot(container2);
+      await act(() => {
+        root2.render(instance2);
+      });
+
+      assertLog(['mount DIV', 'update undefined']);
+    });
+
+    it('should be able to switch in a list of children', async () => {
+      const instance1 = (
+        <TogglingComponent
+          firstComponent={nullORUndefined}
+          secondComponent={'div'}
+        />
+      );
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            {instance1}
+            {instance1}
+            {instance1}
+          </div>,
+        );
+      });
+
+      assertLog([
+        'mount undefined',
+        'mount undefined',
+        'mount undefined',
+        'update DIV',
+        'update DIV',
+        'update DIV',
+      ]);
+    });
+
+    it('should distinguish between a script placeholder and an actual script tag', () => {
+      const instance1 = (
+        <TogglingComponent
+          firstComponent={nullORUndefined}
+          secondComponent={'script'}
+        />
+      );
+      const instance2 = (
+        <TogglingComponent
+          firstComponent={'script'}
+          secondComponent={nullORUndefined}
+        />
+      );
+
+      const root1 = ReactDOMClient.createRoot(container);
+      expect(() => {
+        ReactDOM.flushSync(() => {
+          root1.render(instance1);
+        });
+      }).not.toThrow();
+
+      const container2 = document.createElement('div');
+      const root2 = ReactDOMClient.createRoot(container2);
+      expect(() => {
+        ReactDOM.flushSync(() => {
+          root2.render(instance2);
+        });
+      }).not.toThrow();
+
+      assertLog([
+        'mount undefined',
+        'update SCRIPT',
+        'mount SCRIPT',
+        'update undefined',
+      ]);
+    });
+
+    it(
+      'should have findDOMNode return null when multiple layers of composite ' +
+        'components render to the same nullish placeholder',
+      () => {
+        function GrandChild() {
+          return nullORUndefined;
+        }
+
+        function Child() {
+          return <GrandChild />;
+        }
+
+        const instance1 = (
+          <TogglingComponent firstComponent={'div'} secondComponent={Child} />
+        );
+        const instance2 = (
+          <TogglingComponent firstComponent={Child} secondComponent={'div'} />
+        );
+
+        const root1 = ReactDOMClient.createRoot(container);
+        expect(() => {
+          ReactDOM.flushSync(() => {
+            root1.render(instance1);
+          });
+        }).not.toThrow();
+
+        const container2 = document.createElement('div');
+        const root2 = ReactDOMClient.createRoot(container2);
+        expect(() => {
+          ReactDOM.flushSync(() => {
+            root2.render(instance2);
+          });
+        }).not.toThrow();
+
+        assertLog([
+          'mount DIV',
+          'update undefined',
+          'mount undefined',
+          'update DIV',
+        ]);
+      },
+    );
+
+    it('works when switching components', async () => {
+      let innerRef;
+
+      class Inner extends React.Component {
+        render() {
+          return <span />;
+        }
+
+        componentDidMount() {
+          // Make sure the DOM node resolves properly even if we're replacing a
+          // `null` component
+          expect(findDOMNode(this)).not.toBe(null);
+        }
+
+        componentWillUnmount() {
+          // Even though we're getting replaced by `null`, we haven't been
+          // replaced yet!
+          expect(findDOMNode(this)).not.toBe(null);
+        }
+      }
+
+      function Wrapper({showInner}) {
+        innerRef = React.createRef(null);
+        return showInner ? <Inner ref={innerRef} /> : nullORUndefined;
+      }
+
+      const el = document.createElement('div');
+
+      // Render the <Inner /> component...
+      const root = ReactDOMClient.createRoot(el);
+      await act(() => {
+        root.render(<Wrapper showInner={true} />);
+      });
+      expect(innerRef.current).not.toBe(null);
+
+      // Switch to null...
+      await act(() => {
+        root.render(<Wrapper showInner={false} />);
+      });
+      expect(innerRef.current).toBe(null);
+
+      // ...then switch back.
+      await act(() => {
+        root.render(<Wrapper showInner={true} />);
+      });
+      expect(innerRef.current).not.toBe(null);
+
+      expect.assertions(6);
+    });
+
+    it('can render nullish at the top level', async () => {
+      const div = document.createElement('div');
+      const root = ReactDOMClient.createRoot(div);
+
+      await act(() => {
+        root.render(nullORUndefined);
+      });
+      expect(div.innerHTML).toBe('');
+    });
+
+    it('does not break when updating during mount', () => {
+      class Child extends React.Component {
+        componentDidMount() {
+          if (this.props.onMount) {
+            this.props.onMount();
+          }
+        }
+
+        render() {
+          if (!this.props.visible) {
+            return nullORUndefined;
+          }
+
+          return <div>hello world</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        update = () => {
+          this.forceUpdate();
+        };
+
+        render() {
+          return (
+            <div>
+              <Child key="1" visible={false} />
+              <Child key="0" visible={true} onMount={this.update} />
+              <Child key="2" visible={false} />
+            </div>
+          );
+        }
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      expect(() => {
+        ReactDOM.flushSync(() => {
+          root.render(<Parent />);
+        });
+      }).not.toThrow();
+    });
+
+    it('preserves the dom node during updates', async () => {
+      function Empty() {
+        return nullORUndefined;
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Empty />);
+      });
+      const noscript1 = container.firstChild;
+      expect(noscript1).toBe(null);
+
+      // This update shouldn't create a DOM node
+      await act(() => {
+        root.render(<Empty />);
+      });
+      const noscript2 = container.firstChild;
+      expect(noscript2).toBe(null);
+    });
+
+    it('should not warn about React.forwardRef that returns nullish', () => {
+      const Empty = () => {
+        return nullORUndefined;
+      };
+      const EmptyForwardRef = React.forwardRef(Empty);
+
+      const root = ReactDOMClient.createRoot(container);
+      expect(() => {
+        ReactDOM.flushSync(() => {
+          root.render(<EmptyForwardRef />);
+        });
+      }).not.toThrowError();
+    });
+
+    it('should not warn about React.memo that returns nullish', () => {
+      const Empty = () => {
+        return nullORUndefined;
+      };
+      const EmptyMemo = React.memo(Empty);
+
+      const root = ReactDOMClient.createRoot(container);
+      expect(() => {
+        ReactDOM.flushSync(() => {
+          root.render(<EmptyMemo />);
+        });
+      }).not.toThrowError();
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
new file mode 100644
index 00000000000..28b85d35979
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -0,0 +1,2867 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let act;
+let Scheduler;
+
+describe('ReactErrorBoundaries', () => {
+  let BrokenConstructor;
+  let BrokenComponentWillMount;
+  let BrokenComponentDidMount;
+  let BrokenComponentWillReceiveProps;
+  let BrokenComponentWillUpdate;
+  let BrokenComponentDidUpdate;
+  let BrokenComponentWillUnmount;
+  let BrokenRenderErrorBoundary;
+  let BrokenComponentWillMountErrorBoundary;
+  let BrokenComponentDidMountErrorBoundary;
+  let BrokenRender;
+  let BrokenUseEffect;
+  let BrokenUseLayoutEffect;
+  let ErrorBoundary;
+  let ErrorMessage;
+  let NoopErrorBoundary;
+  let RetryErrorBoundary;
+  let Normal;
+  let assertLog;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.resetModules();
+    PropTypes = require('prop-types');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    React = require('react');
+    act = require('internal-test-utils').act;
+    Scheduler = require('scheduler');
+
+    ({assertLog, assertConsoleErrorDev} = require('internal-test-utils'));
+
+    BrokenConstructor = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenConstructor constructor [!]');
+        throw new Error('Hello');
+      }
+      render() {
+        Scheduler.log('BrokenConstructor render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenConstructor componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenConstructor componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenConstructor componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenConstructor componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenConstructor componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenConstructor componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillMount = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenComponentWillMount constructor');
+      }
+      render() {
+        Scheduler.log('BrokenComponentWillMount render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenComponentWillMount componentWillMount [!]');
+        throw new Error('Hello');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenComponentWillMount componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenComponentWillMount componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenComponentWillMount componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenComponentWillMount componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentWillMount componentWillUnmount');
+      }
+    };
+
+    BrokenComponentDidMount = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenComponentDidMount constructor');
+      }
+      render() {
+        Scheduler.log('BrokenComponentDidMount render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenComponentDidMount componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenComponentDidMount componentDidMount [!]');
+        throw new Error('Hello');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenComponentDidMount componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenComponentDidMount componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenComponentDidMount componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentDidMount componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillReceiveProps = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenComponentWillReceiveProps constructor');
+      }
+      render() {
+        Scheduler.log('BrokenComponentWillReceiveProps render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenComponentWillReceiveProps componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenComponentWillReceiveProps componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log(
+          'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',
+        );
+        throw new Error('Hello');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenComponentWillReceiveProps componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenComponentWillReceiveProps componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentWillReceiveProps componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillUpdate = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenComponentWillUpdate constructor');
+      }
+      render() {
+        Scheduler.log('BrokenComponentWillUpdate render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenComponentWillUpdate componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenComponentWillUpdate componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenComponentWillUpdate componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenComponentWillUpdate componentWillUpdate [!]');
+        throw new Error('Hello');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenComponentWillUpdate componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentWillUpdate componentWillUnmount');
+      }
+    };
+
+    BrokenComponentDidUpdate = class extends React.Component {
+      static defaultProps = {
+        errorText: 'Hello',
+      };
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenComponentDidUpdate constructor');
+      }
+      render() {
+        Scheduler.log('BrokenComponentDidUpdate render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenComponentDidUpdate componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenComponentDidUpdate componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenComponentDidUpdate componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenComponentDidUpdate componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenComponentDidUpdate componentDidUpdate [!]');
+        throw new Error(this.props.errorText);
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentDidUpdate componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillUnmount = class extends React.Component {
+      static defaultProps = {
+        errorText: 'Hello',
+      };
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenComponentWillUnmount constructor');
+      }
+      render() {
+        Scheduler.log('BrokenComponentWillUnmount render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenComponentWillUnmount componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenComponentWillUnmount componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenComponentWillUnmount componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenComponentWillUnmount componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenComponentWillUnmount componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentWillUnmount componentWillUnmount [!]');
+        throw new Error(this.props.errorText);
+      }
+    };
+
+    BrokenComponentWillMountErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        Scheduler.log('BrokenComponentWillMountErrorBoundary constructor');
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('BrokenComponentWillMountErrorBoundary render error');
+          return <div>Caught an error: {this.state.error.message}.</div>;
+        }
+        Scheduler.log('BrokenComponentWillMountErrorBoundary render success');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log(
+          'BrokenComponentWillMountErrorBoundary componentWillMount [!]',
+        );
+        throw new Error('Hello');
+      }
+      componentDidMount() {
+        Scheduler.log(
+          'BrokenComponentWillMountErrorBoundary componentDidMount',
+        );
+      }
+      componentWillUnmount() {
+        Scheduler.log(
+          'BrokenComponentWillMountErrorBoundary componentWillUnmount',
+        );
+      }
+      static getDerivedStateFromError(error) {
+        Scheduler.log(
+          'BrokenComponentWillMountErrorBoundary static getDerivedStateFromError',
+        );
+        return {error};
+      }
+    };
+
+    BrokenComponentDidMountErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        Scheduler.log('BrokenComponentDidMountErrorBoundary constructor');
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('BrokenComponentDidMountErrorBoundary render error');
+          return <div>Caught an error: {this.state.error.message}.</div>;
+        }
+        Scheduler.log('BrokenComponentDidMountErrorBoundary render success');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log(
+          'BrokenComponentDidMountErrorBoundary componentWillMount',
+        );
+      }
+      componentDidMount() {
+        Scheduler.log(
+          'BrokenComponentDidMountErrorBoundary componentDidMount [!]',
+        );
+        throw new Error('Hello');
+      }
+      componentWillUnmount() {
+        Scheduler.log(
+          'BrokenComponentDidMountErrorBoundary componentWillUnmount',
+        );
+      }
+      static getDerivedStateFromError(error) {
+        Scheduler.log(
+          'BrokenComponentDidMountErrorBoundary static getDerivedStateFromError',
+        );
+        return {error};
+      }
+    };
+
+    BrokenRenderErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        Scheduler.log('BrokenRenderErrorBoundary constructor');
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('BrokenRenderErrorBoundary render error [!]');
+          throw new Error('Hello');
+        }
+        Scheduler.log('BrokenRenderErrorBoundary render success');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenRenderErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenRenderErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenRenderErrorBoundary componentWillUnmount');
+      }
+      static getDerivedStateFromError(error) {
+        Scheduler.log(
+          'BrokenRenderErrorBoundary static getDerivedStateFromError',
+        );
+        return {error};
+      }
+    };
+
+    BrokenRender = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('BrokenRender constructor');
+      }
+      render() {
+        Scheduler.log('BrokenRender render [!]');
+        throw new Error('Hello');
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('BrokenRender componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('BrokenRender componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('BrokenRender componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('BrokenRender componentWillUpdate');
+      }
+      componentDidUpdate() {
+        Scheduler.log('BrokenRender componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('BrokenRender componentWillUnmount');
+      }
+    };
+
+    BrokenUseEffect = ({children}) => {
+      Scheduler.log('BrokenUseEffect render');
+
+      React.useEffect(() => {
+        Scheduler.log('BrokenUseEffect useEffect [!]');
+        throw new Error('Hello');
+      });
+
+      return children;
+    };
+
+    BrokenUseLayoutEffect = ({children}) => {
+      Scheduler.log('BrokenUseLayoutEffect render');
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('BrokenUseLayoutEffect useLayoutEffect [!]');
+        throw new Error('Hello');
+      });
+
+      return children;
+    };
+
+    NoopErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('NoopErrorBoundary constructor');
+      }
+      render() {
+        Scheduler.log('NoopErrorBoundary render');
+        return <BrokenRender />;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('NoopErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('NoopErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        Scheduler.log('NoopErrorBoundary componentWillUnmount');
+      }
+      static getDerivedStateFromError() {
+        Scheduler.log('NoopErrorBoundary static getDerivedStateFromError');
+      }
+    };
+
+    Normal = class extends React.Component {
+      static defaultProps = {
+        logName: 'Normal',
+      };
+      constructor(props) {
+        super(props);
+        Scheduler.log(`${this.props.logName} constructor`);
+      }
+      render() {
+        Scheduler.log(`${this.props.logName} render`);
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log(`${this.props.logName} componentWillMount`);
+      }
+      componentDidMount() {
+        Scheduler.log(`${this.props.logName} componentDidMount`);
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log(`${this.props.logName} componentWillReceiveProps`);
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log(`${this.props.logName} componentWillUpdate`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`${this.props.logName} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        Scheduler.log(`${this.props.logName} componentWillUnmount`);
+      }
+    };
+
+    ErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        Scheduler.log(`${this.props.logName} constructor`);
+      }
+      render() {
+        if (this.state.error && !this.props.forceRetry) {
+          Scheduler.log(`${this.props.logName} render error`);
+          return this.props.renderError(this.state.error, this.props);
+        }
+        Scheduler.log(`${this.props.logName} render success`);
+        return <div>{this.props.children}</div>;
+      }
+      static getDerivedStateFromError(error) {
+        Scheduler.log('ErrorBoundary static getDerivedStateFromError');
+        return {error};
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log(`${this.props.logName} componentWillMount`);
+      }
+      componentDidMount() {
+        Scheduler.log(`${this.props.logName} componentDidMount`);
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log(`${this.props.logName} componentWillReceiveProps`);
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log(`${this.props.logName} componentWillUpdate`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`${this.props.logName} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        Scheduler.log(`${this.props.logName} componentWillUnmount`);
+      }
+    };
+    ErrorBoundary.defaultProps = {
+      logName: 'ErrorBoundary',
+      renderError(error, props) {
+        return (
+          <div ref={props.errorMessageRef}>
+            Caught an error: {error.message}.
+          </div>
+        );
+      },
+    };
+
+    RetryErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('RetryErrorBoundary constructor');
+      }
+      render() {
+        Scheduler.log('RetryErrorBoundary render');
+        return <BrokenRender />;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('RetryErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('RetryErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        Scheduler.log('RetryErrorBoundary componentWillUnmount');
+      }
+      static getDerivedStateFromError(error) {
+        Scheduler.log('RetryErrorBoundary static getDerivedStateFromError [!]');
+        // In Fiber, calling setState() (and failing) is treated as a rethrow.
+        return {};
+      }
+    };
+
+    ErrorMessage = class extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('ErrorMessage constructor');
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('ErrorMessage componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('ErrorMessage componentDidMount');
+      }
+      componentWillUnmount() {
+        Scheduler.log('ErrorMessage componentWillUnmount');
+      }
+      render() {
+        Scheduler.log('ErrorMessage render');
+        return <div>Caught an error: {this.props.message}.</div>;
+      }
+    };
+  });
+
+  it('does not swallow exceptions on mounting without boundaries', async () => {
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(async () => {
+        root.render(<BrokenRender />);
+      });
+    }).rejects.toThrow('Hello');
+
+    Scheduler.unstable_clearLog();
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(async () => {
+        root.render(<BrokenComponentWillMount />);
+      });
+    }).rejects.toThrow('Hello');
+
+    Scheduler.unstable_clearLog();
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(async () => {
+        root.render(<BrokenComponentDidMount />);
+      });
+    }).rejects.toThrow('Hello');
+  });
+
+  it('does not swallow exceptions on updating without boundaries', async () => {
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<BrokenComponentWillUpdate />);
+    });
+    Scheduler.unstable_clearLog();
+    await expect(async () => {
+      await act(async () => {
+        root.render(<BrokenComponentWillUpdate />);
+      });
+    }).rejects.toThrow('Hello');
+
+    Scheduler.unstable_clearLog();
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<BrokenComponentWillReceiveProps />);
+    });
+    Scheduler.unstable_clearLog();
+    await expect(async () => {
+      await act(async () => {
+        root.render(<BrokenComponentWillReceiveProps />);
+      });
+    }).rejects.toThrow('Hello');
+    Scheduler.unstable_clearLog();
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<BrokenComponentDidUpdate />);
+    });
+    Scheduler.unstable_clearLog();
+    await expect(async () => {
+      await act(async () => {
+        root.render(<BrokenComponentDidUpdate />);
+      });
+    }).rejects.toThrow('Hello');
+  });
+
+  it('does not swallow exceptions on unmounting without boundaries', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<BrokenComponentWillUnmount />);
+    });
+    Scheduler.unstable_clearLog();
+    await expect(async () => {
+      await act(() => root.unmount());
+    }).rejects.toThrow('Hello');
+  });
+
+  it('prevents errors from leaking into other roots', async () => {
+    const container1 = document.createElement('div');
+    const root1 = ReactDOMClient.createRoot(container1);
+    const container2 = document.createElement('div');
+    const root2 = ReactDOMClient.createRoot(container2);
+    const container3 = document.createElement('div');
+    const root3 = ReactDOMClient.createRoot(container3);
+
+    await act(async () => {
+      root1.render(<span>Before 1</span>);
+    });
+    await expect(async () => {
+      await act(async () => {
+        root2.render(<BrokenRender />);
+      });
+    }).rejects.toThrow('Hello');
+
+    assertLog([
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+    ]);
+    await act(async () => {
+      root3.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container1.firstChild.textContent).toBe('Before 1');
+    expect(container2.firstChild).toBe(null);
+    expect(container3.firstChild.textContent).toBe('Caught an error: Hello.');
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root1.render(<span>After 1</span>);
+    });
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root2.render(<span>After 2</span>);
+    });
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root3.render(<ErrorBoundary forceRetry={true}>After 3</ErrorBoundary>);
+    });
+    expect(container1.firstChild.textContent).toBe('After 1');
+    expect(container2.firstChild.textContent).toBe('After 2');
+    expect(container3.firstChild.textContent).toBe('After 3');
+    root1.unmount();
+    root2.unmount();
+    root3.unmount();
+    expect(container1.firstChild).toBe(null);
+    expect(container2.firstChild).toBe(null);
+    expect(container3.firstChild).toBe(null);
+  });
+
+  it('logs a single error when using error boundary', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    spyOnDev(console, 'error');
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.mock.calls[0][2]).toContain(
+        'The above error occurred in the <BrokenRender> component',
+      );
+    }
+
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      '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',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('renders an error state if child throws in render', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      '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',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('renders an error state if child throws in constructor', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenConstructor />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenConstructor constructor [!]',
+      // Catch and render an error message
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenConstructor constructor [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('renders an error state if child throws in componentWillMount', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentWillMount />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillMount constructor',
+      'BrokenComponentWillMount componentWillMount [!]',
+      // Catch and render an error message
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillMount constructor',
+      'BrokenComponentWillMount componentWillMount [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  it('renders an error state if context provider throws in componentWillMount', async () => {
+    class BrokenComponentWillMountWithContext extends React.Component {
+      static childContextTypes = {foo: PropTypes.number};
+      getChildContext() {
+        return {foo: 42};
+      }
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        throw new Error('Hello');
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentWillMountWithContext />
+        </ErrorBoundary>,
+      );
+    });
+    assertConsoleErrorDev([
+      'BrokenComponentWillMountWithContext uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in BrokenComponentWillMountWithContext (at **)',
+    ]);
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+  });
+
+  it('mounts the error message if mounting fails', async () => {
+    function renderError(error) {
+      return <ErrorMessage message={error.message} />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary renderError={renderError}>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorMessage constructor',
+      'ErrorMessage componentWillMount',
+      'ErrorMessage render',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorMessage constructor',
+      'ErrorMessage componentWillMount',
+      'ErrorMessage render',
+      'ErrorMessage componentDidMount',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog([
+      'ErrorBoundary componentWillUnmount',
+      'ErrorMessage componentWillUnmount',
+    ]);
+  });
+
+  it('propagates errors on retry on mounting', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <RetryErrorBoundary>
+            <BrokenRender />
+          </RetryErrorBoundary>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'RetryErrorBoundary constructor',
+      'RetryErrorBoundary componentWillMount',
+      'RetryErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Retry
+      'RetryErrorBoundary static getDerivedStateFromError [!]',
+      'RetryErrorBoundary componentWillMount',
+      'RetryErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // This time, the error propagates to the higher boundary
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'RetryErrorBoundary constructor',
+      'RetryErrorBoundary componentWillMount',
+      'RetryErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'RetryErrorBoundary static getDerivedStateFromError [!]',
+      'RetryErrorBoundary componentWillMount',
+      'RetryErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('propagates errors inside boundary during componentWillMount', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentWillMountErrorBoundary />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillMountErrorBoundary constructor',
+      'BrokenComponentWillMountErrorBoundary componentWillMount [!]',
+      // The error propagates to the higher boundary
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillMountErrorBoundary constructor',
+      'BrokenComponentWillMountErrorBoundary componentWillMount [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('propagates errors inside boundary while rendering error state', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenRenderErrorBoundary>
+            <BrokenRender />
+          </BrokenRenderErrorBoundary>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRenderErrorBoundary constructor',
+      'BrokenRenderErrorBoundary componentWillMount',
+      'BrokenRenderErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Attempt to handle the error
+      'BrokenRenderErrorBoundary static getDerivedStateFromError',
+      'BrokenRenderErrorBoundary componentWillMount',
+      'BrokenRenderErrorBoundary render error [!]',
+      // Attempt to handle the error again
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRenderErrorBoundary constructor',
+      'BrokenRenderErrorBoundary componentWillMount',
+      'BrokenRenderErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'BrokenRenderErrorBoundary static getDerivedStateFromError',
+      'BrokenRenderErrorBoundary componentWillMount',
+      'BrokenRenderErrorBoundary render error [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('does not call componentWillUnmount when aborting initial mount', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenRender />
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      // Render first child
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      // Render second child (it throws)
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Skip the remaining siblings
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('resets callback refs if mounting aborts', async () => {
+    function childRef(x) {
+      Scheduler.log('Child ref is set to ' + x);
+    }
+    function errorMessageRef(x) {
+      Scheduler.log('Error message ref is set to ' + x);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary errorMessageRef={errorMessageRef}>
+          <div ref={childRef} />
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'Error message ref is set to [object HTMLDivElement]',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog([
+      'ErrorBoundary componentWillUnmount',
+      'Error message ref is set to null',
+    ]);
+  });
+
+  it('resets object refs if mounting aborts', async () => {
+    const childRef = React.createRef();
+    const errorMessageRef = React.createRef();
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary errorMessageRef={errorMessageRef}>
+          <div ref={childRef} />
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidMount',
+    ]);
+    expect(errorMessageRef.current.toString()).toEqual(
+      '[object HTMLDivElement]',
+    );
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+    expect(errorMessageRef.current).toEqual(null);
+  });
+
+  it('successfully mounts if no error occurs', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <div>Mounted successfully.</div>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Mounted successfully.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches if child throws in constructor during update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <Normal logName="Normal2" />
+          <BrokenConstructor />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // Normal2 will attempt to mount:
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      // BrokenConstructor will abort rendering:
+      'BrokenConstructor constructor [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      'BrokenConstructor constructor [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Normal componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches if child throws in componentWillMount during update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <Normal logName="Normal2" />
+          <BrokenComponentWillMount />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // Normal2 will attempt to mount:
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      // BrokenComponentWillMount will abort rendering:
+      'BrokenComponentWillMount constructor',
+      'BrokenComponentWillMount componentWillMount [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      'BrokenComponentWillMount constructor',
+      'BrokenComponentWillMount componentWillMount [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Normal componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches if child throws in componentWillReceiveProps during update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenComponentWillReceiveProps />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenComponentWillReceiveProps />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // BrokenComponentWillReceiveProps will abort rendering:
+      'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Normal componentWillUnmount',
+      'BrokenComponentWillReceiveProps componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches if child throws in componentWillUpdate during update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenComponentWillUpdate />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenComponentWillUpdate />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // BrokenComponentWillUpdate will abort rendering:
+      'BrokenComponentWillUpdate componentWillReceiveProps',
+      'BrokenComponentWillUpdate componentWillUpdate [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'BrokenComponentWillUpdate componentWillReceiveProps',
+      'BrokenComponentWillUpdate componentWillUpdate [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Normal componentWillUnmount',
+      'BrokenComponentWillUpdate componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches if child throws in render during update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <Normal logName="Normal2" />
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // Normal2 will attempt to mount:
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      // BrokenRender will abort rendering:
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Normal componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('keeps refs up-to-date during updates', async () => {
+    function child1Ref(x) {
+      Scheduler.log('Child1 ref is set to ' + x);
+    }
+    function child2Ref(x) {
+      Scheduler.log('Child2 ref is set to ' + x);
+    }
+    function errorMessageRef(x) {
+      Scheduler.log('Error message ref is set to ' + x);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary errorMessageRef={errorMessageRef}>
+          <div ref={child1Ref} />
+        </ErrorBoundary>,
+      );
+    });
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'Child1 ref is set to [object HTMLDivElement]',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary errorMessageRef={errorMessageRef}>
+          <div ref={child1Ref} />
+          <div ref={child2Ref} />
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // BrokenRender will abort rendering:
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // logs for error retry
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // Update Child1 ref since Child1 has been unmounted
+      // Child2 ref is never set because its mounting aborted
+      'Child1 ref is set to null',
+      'Error message ref is set to [object HTMLDivElement]',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog([
+      'ErrorBoundary componentWillUnmount',
+      'Error message ref is set to null',
+    ]);
+  });
+
+  it('recovers from componentWillUnmount errors on update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentWillUnmount />
+          <BrokenComponentWillUnmount />
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentWillUnmount />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // Update existing child:
+      'BrokenComponentWillUnmount componentWillReceiveProps',
+      'BrokenComponentWillUnmount componentWillUpdate',
+      'BrokenComponentWillUnmount render',
+      // Unmounting throws:
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Fiber proceeds with lifecycles despite errors
+      'Normal componentWillUnmount',
+      // The components have updated in this phase
+      'BrokenComponentWillUnmount componentDidUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // The initial render was aborted, so
+      // Fiber retries from the root.
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      'ErrorBoundary componentDidUpdate',
+      // The second willUnmount error should be captured and logged, too.
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      // Render an error now (stack will do it later)
+      'ErrorBoundary render error',
+      // Attempt to unmount previous child:
+      // Done
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('recovers from nested componentWillUnmount errors on update', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal>
+            <BrokenComponentWillUnmount />
+          </Normal>
+          <BrokenComponentWillUnmount />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal>
+            <BrokenComponentWillUnmount />
+          </Normal>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // Update existing children:
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'BrokenComponentWillUnmount componentWillReceiveProps',
+      'BrokenComponentWillUnmount componentWillUpdate',
+      'BrokenComponentWillUnmount render',
+      // Unmounting throws:
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Fiber proceeds with lifecycles despite errors
+      'BrokenComponentWillUnmount componentDidUpdate',
+      'Normal componentDidUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // Now that commit phase is done, Fiber handles errors
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Normal componentWillUnmount',
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      'ErrorBoundary componentDidUpdate',
+      // The second willUnmount error should be captured and logged, too.
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      // Render an error now (stack will do it later)
+      'ErrorBoundary render error',
+      // Done
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('picks the right boundary when handling unmounting errors', async () => {
+    function renderInnerError(error) {
+      return <div>Caught an inner error: {error.message}.</div>;
+    }
+    function renderOuterError(error) {
+      return <div>Caught an outer error: {error.message}.</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary
+          logName="OuterErrorBoundary"
+          renderError={renderOuterError}>
+          <ErrorBoundary
+            logName="InnerErrorBoundary"
+            renderError={renderInnerError}>
+            <BrokenComponentWillUnmount />
+          </ErrorBoundary>
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary
+          logName="OuterErrorBoundary"
+          renderError={renderOuterError}>
+          <ErrorBoundary
+            logName="InnerErrorBoundary"
+            renderError={renderInnerError}
+          />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an inner error: Hello.');
+    assertLog([
+      // Update outer boundary
+      'OuterErrorBoundary componentWillReceiveProps',
+      'OuterErrorBoundary componentWillUpdate',
+      'OuterErrorBoundary render success',
+      // Update inner boundary
+      'InnerErrorBoundary componentWillReceiveProps',
+      'InnerErrorBoundary componentWillUpdate',
+      'InnerErrorBoundary render success',
+      // Try unmounting child
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Now that commit phase is done, Fiber handles errors
+      // Only inner boundary receives the error:
+      'InnerErrorBoundary componentDidUpdate',
+      'OuterErrorBoundary componentDidUpdate',
+      'ErrorBoundary static getDerivedStateFromError',
+      'InnerErrorBoundary componentWillUpdate',
+      // Render an error now
+      'InnerErrorBoundary render error',
+      // In Fiber, this was a local update to the
+      // inner boundary so only its hook fires
+      'InnerErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog([
+      'OuterErrorBoundary componentWillUnmount',
+      'InnerErrorBoundary componentWillUnmount',
+    ]);
+  });
+
+  it('can recover from error state', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+    // Error boundary doesn't retry by itself:
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    // Force the success path:
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary forceRetry={true}>
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).not.toContain('Caught an error');
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // Mount children:
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      // Finalize updates:
+      'Normal componentDidMount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog([
+      'ErrorBoundary componentWillUnmount',
+      'Normal componentWillUnmount',
+    ]);
+  });
+
+  it('can update multiple times in error state', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    Scheduler.unstable_clearLog();
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    Scheduler.unstable_clearLog();
+
+    await act(async () => {
+      root.render(<div>Other screen</div>);
+    });
+    expect(container.textContent).toBe('Other screen');
+
+    root.unmount();
+  });
+
+  it("doesn't get into inconsistent state during removals", async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenComponentWillUnmount />
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(<ErrorBoundary />);
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    Scheduler.unstable_clearLog();
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it("doesn't get into inconsistent state during additions", async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<ErrorBoundary />);
+    });
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'ErrorBoundary componentDidMount',
+    ]);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Normal />
+          <BrokenRender />
+          <Normal />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    Scheduler.unstable_clearLog();
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it("doesn't get into inconsistent state during reorders", async () => {
+    function getAMixOfNormalAndBrokenRenderElements() {
+      const elements = [];
+      for (let i = 0; i < 100; i++) {
+        elements.push(<Normal key={i} />);
+      }
+      elements.push(<MaybeBrokenRender key={100} />);
+
+      let currentIndex = elements.length;
+      while (0 !== currentIndex) {
+        const randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+        const temporaryValue = elements[currentIndex];
+        elements[currentIndex] = elements[randomIndex];
+        elements[randomIndex] = temporaryValue;
+      }
+      return elements;
+    }
+
+    class MaybeBrokenRender extends React.Component {
+      render() {
+        if (fail) {
+          throw new Error('Hello');
+        }
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let fail = false;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          {getAMixOfNormalAndBrokenRenderElements()}
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).not.toContain('Caught an error');
+
+    fail = true;
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          {getAMixOfNormalAndBrokenRenderElements()}
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    Scheduler.unstable_clearLog();
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches errors originating downstream', async () => {
+    let fail = false;
+    class Stateful extends React.Component {
+      state = {shouldThrow: false};
+
+      render() {
+        if (fail) {
+          Scheduler.log('Stateful render [!]');
+          throw new Error('Hello');
+        }
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let statefulInst;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Stateful ref={inst => (statefulInst = inst)} />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    expect(() => {
+      fail = true;
+      statefulInst.forceUpdate();
+    }).not.toThrow();
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches errors in componentDidMount', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentWillUnmount>
+            <Normal />
+          </BrokenComponentWillUnmount>
+          <BrokenComponentDidMount />
+          <Normal logName="LastChild" />
+        </ErrorBoundary>,
+      );
+    });
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillUnmount constructor',
+      'BrokenComponentWillUnmount componentWillMount',
+      'BrokenComponentWillUnmount render',
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      'BrokenComponentDidMount constructor',
+      'BrokenComponentDidMount componentWillMount',
+      'BrokenComponentDidMount render',
+      'LastChild constructor',
+      'LastChild componentWillMount',
+      'LastChild render',
+      // Start flushing didMount queue
+      'Normal componentDidMount',
+      'BrokenComponentWillUnmount componentDidMount',
+      'BrokenComponentDidMount componentDidMount [!]',
+      // Continue despite the error
+      'LastChild componentDidMount',
+      // Now we are ready to handle the error
+      'ErrorBoundary componentDidMount',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // Safely unmount every child
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Continue unmounting safely despite any errors
+      'Normal componentWillUnmount',
+      'BrokenComponentDidMount componentWillUnmount',
+      'LastChild componentWillUnmount',
+      // The willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidUpdate',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // The update has finished
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches errors in componentDidUpdate', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentDidUpdate />
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentDidUpdate />
+        </ErrorBoundary>,
+      );
+    });
+    assertLog([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'BrokenComponentDidUpdate componentWillReceiveProps',
+      'BrokenComponentDidUpdate componentWillUpdate',
+      'BrokenComponentDidUpdate render',
+      // All lifecycles run
+      'BrokenComponentDidUpdate componentDidUpdate [!]',
+      'ErrorBoundary componentDidUpdate',
+      // Then, error is handled
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'BrokenComponentDidUpdate componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('catches errors in useEffect', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenUseEffect>Initial value</BrokenUseEffect>
+        </ErrorBoundary>,
+      );
+    });
+
+    // verify flushed passive effects and handle the error
+    assertLog([
+      // logs for error retry
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenUseEffect render',
+      'ErrorBoundary componentDidMount',
+      'BrokenUseEffect useEffect [!]',
+      // Handle the error
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+  });
+
+  it('catches errors in useLayoutEffect', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenUseLayoutEffect>Initial value</BrokenUseLayoutEffect>
+        </ErrorBoundary>,
+      );
+    });
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenUseLayoutEffect render',
+      'BrokenUseLayoutEffect useLayoutEffect [!]',
+      // Fiber proceeds with the hooks
+      'ErrorBoundary componentDidMount',
+      // The error propagates to the higher boundary
+      'ErrorBoundary static getDerivedStateFromError',
+      // Fiber retries from the root
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+  });
+
+  it('propagates errors inside boundary during componentDidMount', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <BrokenComponentDidMountErrorBoundary
+            renderError={error => (
+              <div>We should never catch our own error: {error.message}.</div>
+            )}
+          />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    assertLog([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentDidMountErrorBoundary constructor',
+      'BrokenComponentDidMountErrorBoundary componentWillMount',
+      'BrokenComponentDidMountErrorBoundary render success',
+      'BrokenComponentDidMountErrorBoundary componentDidMount [!]',
+      // Fiber proceeds with the hooks
+      'ErrorBoundary componentDidMount',
+      // The error propagates to the higher boundary
+      'ErrorBoundary static getDerivedStateFromError',
+      // Fiber retries from the root
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'BrokenComponentDidMountErrorBoundary componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog(['ErrorBoundary componentWillUnmount']);
+  });
+
+  it('calls static getDerivedStateFromError for each error that is captured', async () => {
+    function renderUnmountError(error) {
+      return <div>Caught an unmounting error: {error.message}.</div>;
+    }
+    function renderUpdateError(error) {
+      return <div>Caught an updating error: {error.message}.</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary logName="OuterErrorBoundary">
+          <ErrorBoundary
+            logName="InnerUnmountBoundary"
+            renderError={renderUnmountError}>
+            <BrokenComponentWillUnmount errorText="E1" />
+            <BrokenComponentWillUnmount errorText="E2" />
+          </ErrorBoundary>
+          <ErrorBoundary
+            logName="InnerUpdateBoundary"
+            renderError={renderUpdateError}>
+            <BrokenComponentDidUpdate errorText="E3" />
+            <BrokenComponentDidUpdate errorText="E4" />
+          </ErrorBoundary>
+        </ErrorBoundary>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary logName="OuterErrorBoundary">
+          <ErrorBoundary
+            logName="InnerUnmountBoundary"
+            renderError={renderUnmountError}
+          />
+          <ErrorBoundary
+            logName="InnerUpdateBoundary"
+            renderError={renderUpdateError}>
+            <BrokenComponentDidUpdate errorText="E3" />
+            <BrokenComponentDidUpdate errorText="E4" />
+          </ErrorBoundary>
+        </ErrorBoundary>,
+      );
+    });
+
+    expect(container.firstChild.textContent).toBe(
+      'Caught an unmounting error: E2.' + 'Caught an updating error: E4.',
+    );
+    assertLog([
+      // Begin update phase
+      'OuterErrorBoundary componentWillReceiveProps',
+      'OuterErrorBoundary componentWillUpdate',
+      'OuterErrorBoundary render success',
+      'InnerUnmountBoundary componentWillReceiveProps',
+      'InnerUnmountBoundary componentWillUpdate',
+      'InnerUnmountBoundary render success',
+      'InnerUpdateBoundary componentWillReceiveProps',
+      'InnerUpdateBoundary componentWillUpdate',
+      'InnerUpdateBoundary render success',
+      // First come the updates
+      'BrokenComponentDidUpdate componentWillReceiveProps',
+      'BrokenComponentDidUpdate componentWillUpdate',
+      'BrokenComponentDidUpdate render',
+      'BrokenComponentDidUpdate componentWillReceiveProps',
+      'BrokenComponentDidUpdate componentWillUpdate',
+      'BrokenComponentDidUpdate render',
+      // We're in commit phase now, deleting
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Continue despite errors, handle them after commit is done
+      'InnerUnmountBoundary componentDidUpdate',
+      // We're still in commit phase, now calling update lifecycles
+      'BrokenComponentDidUpdate componentDidUpdate [!]',
+      // Again, continue despite errors, we'll handle them later
+      'BrokenComponentDidUpdate componentDidUpdate [!]',
+      'InnerUpdateBoundary componentDidUpdate',
+      'OuterErrorBoundary componentDidUpdate',
+      // After the commit phase, attempt to recover from any errors that
+      // were captured
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary static getDerivedStateFromError',
+      'InnerUnmountBoundary componentWillUpdate',
+      'InnerUnmountBoundary render error',
+      'ErrorBoundary static getDerivedStateFromError',
+      'ErrorBoundary static getDerivedStateFromError',
+      'InnerUpdateBoundary componentWillUpdate',
+      'InnerUpdateBoundary render error',
+      'BrokenComponentDidUpdate componentWillUnmount',
+      'BrokenComponentDidUpdate componentWillUnmount',
+      'InnerUnmountBoundary componentDidUpdate',
+      'InnerUpdateBoundary componentDidUpdate',
+    ]);
+
+    root.unmount();
+    assertLog([
+      'OuterErrorBoundary componentWillUnmount',
+      'InnerUnmountBoundary componentWillUnmount',
+      'InnerUpdateBoundary componentWillUnmount',
+    ]);
+  });
+
+  it('discards a bad root if the root component fails', async () => {
+    const X = null;
+    const Y = undefined;
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(async () => {
+        root.render(<X />);
+      });
+    }).rejects.toThrow(
+      'Element type is invalid: ' +
+        'expected a string (for built-in components) or a ' +
+        'class/function (for composite components) but got: null.',
+    );
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(async () => {
+        root.render(<Y />);
+      });
+    }).rejects.toThrow(
+      'Element type is invalid: ' +
+        'expected a string (for built-in components) or a ' +
+        'class/function (for composite components) but got: undefined.',
+    );
+  });
+
+  it('renders empty output if error boundary does not handle the error', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await expect(async () => {
+      await act(async () => {
+        root.render(
+          <div>
+            Sibling
+            <NoopErrorBoundary>
+              <BrokenRender />
+            </NoopErrorBoundary>
+          </div>,
+        );
+      });
+    }).rejects.toThrow('Hello');
+
+    expect(container.innerHTML).toBe('');
+    assertLog([
+      'NoopErrorBoundary constructor',
+      'NoopErrorBoundary componentWillMount',
+      'NoopErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Noop error boundaries retry render (and fail again)
+      'NoopErrorBoundary static getDerivedStateFromError',
+      'NoopErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // logs for error retry
+      'NoopErrorBoundary constructor',
+      'NoopErrorBoundary componentWillMount',
+      'NoopErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'NoopErrorBoundary static getDerivedStateFromError',
+      'NoopErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+    ]);
+  });
+
+  it('passes an aggregate error when two errors happen in commit', async () => {
+    const errors = [];
+    let caughtError;
+    class Parent extends React.Component {
+      render() {
+        return <Child />;
+      }
+      componentDidMount() {
+        errors.push('parent sad');
+        throw new Error('parent sad');
+      }
+    }
+    class Child extends React.Component {
+      render() {
+        return <div />;
+      }
+      componentDidMount() {
+        errors.push('child sad');
+        throw new Error('child sad');
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    try {
+      // Here, we test the behavior where there is no error boundary and we
+      // delegate to the host root.
+      await act(async () => {
+        root.render(<Parent />);
+      });
+    } catch (e) {
+      caughtError = e;
+    }
+
+    expect(errors).toEqual(['child sad', 'parent sad']);
+    expect(caughtError.errors).toEqual([
+      expect.objectContaining({message: 'child sad'}),
+      expect.objectContaining({message: 'parent sad'}),
+    ]);
+  });
+
+  it('propagates uncaught error inside unbatched initial mount', async () => {
+    function Foo() {
+      throw new Error('foo error');
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await ReactDOM.unstable_batchedUpdates(async () => {
+        await act(async () => {
+          root.render(<Foo />);
+        });
+      });
+    }).rejects.toThrow('foo error');
+  });
+
+  it('handles errors that occur in before-mutation commit hook', async () => {
+    const errors = [];
+    let caughtError;
+    class Parent extends React.Component {
+      getSnapshotBeforeUpdate() {
+        errors.push('parent sad');
+        throw new Error('parent sad');
+      }
+      componentDidUpdate() {}
+      render() {
+        return <Child {...this.props} />;
+      }
+    }
+    class Child extends React.Component {
+      getSnapshotBeforeUpdate() {
+        errors.push('child sad');
+        throw new Error('child sad');
+      }
+      componentDidUpdate() {}
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Parent value={1} />);
+    });
+    try {
+      await act(async () => {
+        root.render(<Parent value={2} />);
+      });
+    } catch (e) {
+      caughtError = e;
+    }
+
+    expect(errors).toEqual(['child sad', 'parent sad']);
+    expect(caughtError.errors).toEqual([
+      expect.objectContaining({message: 'child sad'}),
+      expect.objectContaining({message: 'parent sad'}),
+    ]);
+  });
+
+  it('should warn if an error boundary with only componentDidCatch does not update state', async () => {
+    class InvalidErrorBoundary extends React.Component {
+      componentDidCatch(error, info) {
+        // This component does not define getDerivedStateFromError().
+        // It also doesn't call setState().
+        // So it would swallow errors (which is probably unintentional).
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    const Throws = () => {
+      throw new Error('expected');
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <InvalidErrorBoundary>
+          <Throws />
+        </InvalidErrorBoundary>,
+      );
+    });
+    assertConsoleErrorDev([
+      'InvalidErrorBoundary: Error boundaries should implement getDerivedStateFromError(). ' +
+        'In that method, return a state update to display an error message or fallback UI.\n' +
+        '    in InvalidErrorBoundary (at **)',
+    ]);
+    expect(container.textContent).toBe('');
+  });
+
+  it('should call both componentDidCatch and getDerivedStateFromError if both exist on a component', async () => {
+    let componentDidCatchError, getDerivedStateFromErrorError;
+    class ErrorBoundaryWithBothMethods extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        getDerivedStateFromErrorError = error;
+        return {error};
+      }
+      componentDidCatch(error, info) {
+        componentDidCatchError = error;
+      }
+      render() {
+        return this.state.error ? 'ErrorBoundary' : this.props.children;
+      }
+    }
+
+    const thrownError = new Error('expected');
+    const Throws = () => {
+      throw thrownError;
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundaryWithBothMethods>
+          <Throws />
+        </ErrorBoundaryWithBothMethods>,
+      );
+    });
+    expect(container.textContent).toBe('ErrorBoundary');
+    expect(componentDidCatchError).toBe(thrownError);
+    expect(getDerivedStateFromErrorError).toBe(thrownError);
+  });
+
+  it('should catch errors from invariants in completion phase', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <input>
+            <div />
+          </input>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.textContent).toContain(
+      'Caught an error: input is a void element tag',
+    );
+  });
+
+  it('should catch errors from errors in the throw phase from boundaries', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const thrownError = new Error('original error');
+    const Throws = () => {
+      throw thrownError;
+    };
+
+    class EvilErrorBoundary extends React.Component {
+      get componentDidCatch() {
+        throw new Error('gotta catch em all');
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <EvilErrorBoundary>
+            <Throws />
+          </EvilErrorBoundary>
+        </ErrorBoundary>,
+      );
+    });
+
+    expect(container.textContent).toContain(
+      'Caught an error: gotta catch em all',
+    );
+  });
+
+  it('should protect errors from errors in the stack generation', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const evilError = {
+      message: 'gotta catch em all',
+      get stack() {
+        throw new Error('gotta catch em all');
+      },
+    };
+    const Throws = () => {
+      throw evilError;
+    };
+    Object.defineProperty(Throws, 'displayName', {
+      get: function () {
+        throw new Error('gotta catch em all');
+      },
+    });
+
+    function Wrapper() {
+      return <Throws />;
+    }
+
+    await expect(async () => {
+      await act(async () => {
+        root.render(
+          <ErrorBoundary>
+            <Wrapper />
+          </ErrorBoundary>,
+        );
+      });
+    }).rejects.toThrow('gotta catch em all');
+
+    expect(container.textContent).toContain(
+      'Caught an error: gotta catch em all.',
+    );
+  });
+
+  it('catches errors thrown in componentWillUnmount', async () => {
+    class LocalErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        Scheduler.log(`ErrorBoundary static getDerivedStateFromError`);
+        return {error};
+      }
+      render() {
+        const {children, id, fallbackID} = this.props;
+        const {error} = this.state;
+        if (error) {
+          Scheduler.log(`${id} render error`);
+          return <Component id={fallbackID} />;
+        }
+        Scheduler.log(`${id} render success`);
+        return children || null;
+      }
+    }
+
+    class Component extends React.Component {
+      render() {
+        const {id} = this.props;
+        Scheduler.log('Component render ' + id);
+        return id;
+      }
+    }
+
+    class LocalBrokenComponentWillUnmount extends React.Component {
+      componentWillUnmount() {
+        Scheduler.log('BrokenComponentWillUnmount componentWillUnmount');
+        throw Error('Expected');
+      }
+
+      render() {
+        Scheduler.log('BrokenComponentWillUnmount render');
+        return 'broken';
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(async () => {
+      root.render(
+        <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+          <LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
+            <LocalBrokenComponentWillUnmount />
+          </LocalErrorBoundary>
+        </LocalErrorBoundary>,
+      );
+    });
+
+    expect(container.firstChild.textContent).toBe('sibling');
+    expect(container.lastChild.textContent).toBe('broken');
+    assertLog([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'InnerBoundary render success',
+      'BrokenComponentWillUnmount render',
+    ]);
+
+    await act(async () => {
+      root.render(
+        <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+        </LocalErrorBoundary>,
+      );
+    });
+
+    // React should skip over the unmounting boundary and find the nearest still-mounted boundary.
+    expect(container.firstChild.textContent).toBe('OuterFallback');
+    expect(container.lastChild.textContent).toBe('OuterFallback');
+    assertLog([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'BrokenComponentWillUnmount componentWillUnmount',
+      'ErrorBoundary static getDerivedStateFromError',
+      'OuterBoundary render error',
+      'Component render OuterFallback',
+    ]);
+  });
+
+  it('catches errors thrown while detaching refs', async () => {
+    class LocalErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        Scheduler.log(`ErrorBoundary static getDerivedStateFromError`);
+        return {error};
+      }
+      render() {
+        const {children, id, fallbackID} = this.props;
+        const {error} = this.state;
+        if (error) {
+          Scheduler.log(`${id} render error`);
+          return <Component id={fallbackID} />;
+        }
+        Scheduler.log(`${id} render success`);
+        return children || null;
+      }
+    }
+
+    class Component extends React.Component {
+      render() {
+        const {id} = this.props;
+        Scheduler.log('Component render ' + id);
+        return id;
+      }
+    }
+
+    class LocalBrokenCallbackRef extends React.Component {
+      _ref = ref => {
+        Scheduler.log('LocalBrokenCallbackRef ref ' + !!ref);
+        if (ref === null) {
+          throw Error('Expected');
+        }
+      };
+
+      render() {
+        Scheduler.log('LocalBrokenCallbackRef render');
+        return <div ref={this._ref}>ref</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(async () => {
+      root.render(
+        <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+          <LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
+            <LocalBrokenCallbackRef />
+          </LocalErrorBoundary>
+        </LocalErrorBoundary>,
+      );
+    });
+
+    expect(container.firstChild.textContent).toBe('sibling');
+    expect(container.lastChild.textContent).toBe('ref');
+    assertLog([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'InnerBoundary render success',
+      'LocalBrokenCallbackRef render',
+      'LocalBrokenCallbackRef ref true',
+    ]);
+
+    await act(async () => {
+      root.render(
+        <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+        </LocalErrorBoundary>,
+      );
+    });
+
+    // React should skip over the unmounting boundary and find the nearest still-mounted boundary.
+    expect(container.firstChild.textContent).toBe('OuterFallback');
+    expect(container.lastChild.textContent).toBe('OuterFallback');
+    assertLog([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'LocalBrokenCallbackRef ref false',
+      'ErrorBoundary static getDerivedStateFromError',
+      'OuterBoundary render error',
+      'Component render OuterFallback',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundariesHooks-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundariesHooks-test.internal.js
new file mode 100644
index 00000000000..4a5679e5fcf
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundariesHooks-test.internal.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('ReactErrorBoundariesHooks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  it('should preserve hook order if errors are caught', async () => {
+    function ErrorThrower() {
+      React.useMemo(() => undefined, []);
+      throw new Error('expected');
+    }
+
+    function StatefulComponent() {
+      React.useState(null);
+      return ' | stateful';
+    }
+
+    class ErrorHandler extends React.Component {
+      state = {error: null};
+
+      componentDidCatch(error) {
+        return this.setState({error});
+      }
+
+      render() {
+        if (this.state.error !== null) {
+          return <p>Handled error: {this.state.error.message}</p>;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App(props) {
+      return (
+        <React.Fragment>
+          <ErrorHandler>
+            <ErrorThrower />
+          </ErrorHandler>
+          <StatefulComponent />
+        </React.Fragment>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    await expect(
+      act(() => {
+        root.render(<App />);
+      }),
+    ).resolves.not.toThrow();
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js b/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js
new file mode 100644
index 00000000000..d2392b95031
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// This is a regression test for https://github.com/facebook/react/issues/13188.
+// It reproduces a combination of conditions that led to a problem.
+
+if (global.window) {
+  throw new Error('This test must run in a Node environment.');
+}
+
+// The issue only reproduced when React was loaded before JSDOM.
+const React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const Scheduler = require('scheduler');
+
+// Initialize JSDOM separately.
+// We don't use our normal JSDOM setup because we want to load React first.
+const {JSDOM} = require('jsdom');
+global.requestAnimationFrame = setTimeout;
+global.cancelAnimationFrame = clearTimeout;
+const jsdom = new JSDOM(`<div id="app-root"></div>`);
+global.window = jsdom.window;
+global.document = jsdom.window.document;
+global.navigator = jsdom.window.navigator;
+
+class Bad extends React.Component {
+  componentDidUpdate() {
+    throw new Error('no');
+  }
+  render() {
+    return null;
+  }
+}
+
+async function fakeAct(cb) {
+  // We don't use act/waitForThrow here because we want to observe how errors are reported for real.
+  await cb();
+  Scheduler.unstable_flushAll();
+}
+
+describe('ReactErrorLoggingRecovery', () => {
+  const originalConsoleError = console.error;
+
+  beforeEach(() => {
+    console.error = error => {
+      throw new Error('Buggy console.error');
+    };
+  });
+
+  afterEach(() => {
+    console.error = originalConsoleError;
+  });
+
+  it('should recover from errors in console.error', async function () {
+    const div = document.createElement('div');
+    const root = ReactDOMClient.createRoot(div);
+    await fakeAct(() => {
+      root.render(<Bad />);
+    });
+    await fakeAct(() => {
+      root.render(<Bad />);
+    });
+
+    expect(() => jest.runAllTimers()).toThrow('');
+
+    await fakeAct(() => {
+      root.render(<span>Hello</span>);
+    });
+    expect(div.firstChild.textContent).toBe('Hello');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
new file mode 100644
index 00000000000..05cbca61752
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('ReactEventIndependence', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  it('does not crash with other react inside', async () => {
+    let clicks = 0;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+    try {
+      await act(() => {
+        root.render(
+          <div
+            onClick={() => clicks++}
+            dangerouslySetInnerHTML={{
+              __html: '<button data-reactid=".z">click me</div>',
+            }}
+          />,
+        );
+      });
+
+      container.firstElementChild.click();
+      expect(clicks).toBe(1);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+
+  it('does not crash with other react outside', async () => {
+    let clicks = 0;
+    const outer = document.createElement('div');
+    document.body.appendChild(outer);
+    const root = ReactDOMClient.createRoot(outer);
+    try {
+      outer.setAttribute('data-reactid', '.z');
+      await act(() => {
+        root.render(<button onClick={() => clicks++}>click me</button>);
+      });
+      outer.firstElementChild.click();
+      expect(clicks).toBe(1);
+    } finally {
+      document.body.removeChild(outer);
+    }
+  });
+
+  it('does not when event fired on unmounted tree', async () => {
+    let clicks = 0;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<button onClick={() => clicks++}>click me</button>);
+      });
+
+      const button = container.firstChild;
+
+      // Now we unmount the component, as if caused by a non-React event handler
+      // for the same click we're about to simulate, like closing a layer:
+      root.unmount();
+      button.click();
+
+      // Since the tree is unmounted, we don't dispatch the click event.
+      expect(clicks).toBe(0);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
new file mode 100644
index 00000000000..80f9779fdd1
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let React;
+let ReactDOMClient;
+let act;
+let assertConsoleErrorDev;
+
+function FunctionComponent(props) {
+  return <div>{props.name}</div>;
+}
+
+describe('ReactFunctionComponent', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  it('should render stateless component', async () => {
+    const el = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<FunctionComponent name="A" />);
+    });
+
+    expect(el.textContent).toBe('A');
+  });
+
+  it('should update stateless component', async () => {
+    class Parent extends React.Component {
+      render() {
+        return <FunctionComponent {...this.props} />;
+      }
+    }
+
+    const el = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<Parent name="A" />);
+    });
+    expect(el.textContent).toBe('A');
+
+    await act(() => {
+      root.render(<Parent name="B" />);
+    });
+    expect(el.textContent).toBe('B');
+  });
+
+  it('should unmount stateless component', async () => {
+    const container = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<FunctionComponent name="A" />);
+    });
+    expect(container.textContent).toBe('A');
+
+    root.unmount();
+    expect(container.textContent).toBe('');
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass context thru stateless component', async () => {
+    class Child extends React.Component {
+      static contextTypes = {
+        test: PropTypes.string.isRequired,
+      };
+
+      render() {
+        return <div>{this.context.test}</div>;
+      }
+    }
+
+    function Parent() {
+      return <Child />;
+    }
+
+    class GrandParent extends React.Component {
+      static childContextTypes = {
+        test: PropTypes.string.isRequired,
+      };
+
+      getChildContext() {
+        return {test: this.props.test};
+      }
+
+      render() {
+        return <Parent />;
+      }
+    }
+
+    const el = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<GrandParent test="test" />);
+    });
+
+    assertConsoleErrorDev([
+      'GrandParent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in GrandParent (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)\n' +
+        '    in GrandParent (at **)',
+    ]);
+
+    expect(el.textContent).toBe('test');
+
+    await act(() => {
+      root.render(<GrandParent test="mest" />);
+    });
+
+    expect(el.textContent).toBe('mest');
+  });
+
+  it('should warn for getDerivedStateFromProps on a function component', async () => {
+    function FunctionComponentWithChildContext() {
+      return null;
+    }
+    FunctionComponentWithChildContext.getDerivedStateFromProps = function () {};
+
+    const container = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<FunctionComponentWithChildContext />);
+    });
+    assertConsoleErrorDev([
+      'FunctionComponentWithChildContext: Function ' +
+        'components do not support getDerivedStateFromProps.\n' +
+        '    in FunctionComponentWithChildContext (at **)',
+    ]);
+  });
+
+  it('should warn for childContextTypes on a function component', async () => {
+    function FunctionComponentWithChildContext(props) {
+      return <div>{props.name}</div>;
+    }
+
+    FunctionComponentWithChildContext.childContextTypes = {
+      foo: PropTypes.string,
+    };
+
+    const container = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<FunctionComponentWithChildContext name="A" />);
+    });
+    assertConsoleErrorDev([
+      'childContextTypes cannot ' +
+        'be defined on a function component.\n' +
+        '  FunctionComponentWithChildContext.childContextTypes = ...\n' +
+        '    in FunctionComponentWithChildContext (at **)',
+    ]);
+  });
+
+  it('should not throw when stateless component returns undefined', async () => {
+    function NotAComponent() {}
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(
+          <div>
+            <NotAComponent />
+          </div>,
+        );
+      }),
+    ).resolves.not.toThrowError();
+  });
+
+  it('should use correct name in key warning', async () => {
+    function Child() {
+      return <div>{[<span />]}</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Child />);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n' +
+        '\n' +
+        'Check the render method of `Child`. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Child (at **)',
+    ]);
+  });
+
+  // @gate !disableLegacyContext && !disableLegacyContextForFunctionComponents
+  it('should receive context', async () => {
+    class Parent extends React.Component {
+      static childContextTypes = {
+        lang: PropTypes.string,
+      };
+
+      getChildContext() {
+        return {lang: 'en'};
+      }
+
+      render() {
+        return <Child />;
+      }
+    }
+
+    function Child(props, context) {
+      return <div>{context.lang}</div>;
+    }
+    Child.contextTypes = {lang: PropTypes.string};
+
+    const el = document.createElement('div');
+
+    const root = ReactDOMClient.createRoot(el);
+    await act(() => {
+      root.render(<Parent />);
+    });
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Child uses the legacy contextTypes API which will be removed soon. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+    ]);
+    expect(el.textContent).toBe('en');
+  });
+
+  it('should work with arrow functions', async () => {
+    let Child = function () {
+      return <div />;
+    };
+    // Will create a new bound function without a prototype, much like a native
+    // arrow function.
+    Child = Child.bind(this);
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Child />);
+      });
+    }).not.toThrow();
+  });
+
+  it('should allow simple functions to return null', async () => {
+    const Child = function () {
+      return null;
+    };
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Child />);
+      });
+    }).not.toThrow();
+  });
+
+  it('should allow simple functions to return false', async () => {
+    function Child() {
+      return false;
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<Child />);
+      }),
+    ).resolves.not.toThrow();
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactIdentity-test.js b/packages/react-dom/src/__tests__/ReactIdentity-test.js
new file mode 100644
index 00000000000..0adcedc5388
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactIdentity-test.js
@@ -0,0 +1,334 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactIdentity', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  it('should allow key property to express identity', async () => {
+    let node;
+    const Component = props => (
+      <div ref={c => (node = c)}>
+        <div key={props.swap ? 'banana' : 'apple'} />
+        <div key={props.swap ? 'apple' : 'banana'} />
+      </div>
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Component />);
+    });
+    const origChildren = Array.from(node.childNodes);
+    await act(async () => {
+      root.render(<Component swap={true} />);
+    });
+    const newChildren = Array.from(node.childNodes);
+    expect(origChildren[0]).toBe(newChildren[1]);
+    expect(origChildren[1]).toBe(newChildren[0]);
+  });
+
+  it('should use composite identity', async () => {
+    class Wrapper extends React.Component {
+      render() {
+        return <a>{this.props.children}</a>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let node1;
+    let node2;
+    await act(async () => {
+      root.render(
+        <Wrapper key="wrap1">
+          <span ref={c => (node1 = c)} />
+        </Wrapper>,
+      );
+    });
+    await act(async () => {
+      root.render(
+        <Wrapper key="wrap2">
+          <span ref={c => (node2 = c)} />
+        </Wrapper>,
+      );
+    });
+    expect(node1).not.toBe(node2);
+  });
+
+  async function renderAComponentWithKeyIntoContainer(key, root) {
+    class Wrapper extends React.Component {
+      spanRef = React.createRef();
+      render() {
+        return (
+          <div>
+            <span ref={this.spanRef} key={key} />
+          </div>
+        );
+      }
+    }
+    const wrapperRef = React.createRef();
+    await act(async () => {
+      root.render(<Wrapper ref={wrapperRef} />);
+    });
+    const span = wrapperRef.current.spanRef.current;
+    expect(span).not.toBe(null);
+  }
+
+  it('should allow any character as a key, in a detached parent', async () => {
+    const detachedContainer = document.createElement('div');
+    const root = ReactDOMClient.createRoot(detachedContainer);
+    await renderAComponentWithKeyIntoContainer("<'WEIRD/&\\key'>", root);
+  });
+
+  it('should allow any character as a key, in an attached parent', async () => {
+    // This test exists to protect against implementation details that
+    // incorrectly query escaped IDs using DOM tools like getElementById.
+    const attachedContainer = document.createElement('div');
+    const root = ReactDOMClient.createRoot(attachedContainer);
+    document.body.appendChild(attachedContainer);
+
+    await renderAComponentWithKeyIntoContainer("<'WEIRD/&\\key'>", root);
+
+    document.body.removeChild(attachedContainer);
+  });
+
+  it('should not allow scripts in keys to execute', async () => {
+    const h4x0rKey =
+      '"><script>window[\'YOUVEBEENH4X0RED\']=true;</script><div id="';
+
+    const attachedContainer = document.createElement('div');
+    const root = ReactDOMClient.createRoot(attachedContainer);
+    document.body.appendChild(attachedContainer);
+
+    await renderAComponentWithKeyIntoContainer(h4x0rKey, root);
+
+    document.body.removeChild(attachedContainer);
+
+    // If we get this far, make sure we haven't executed the code
+    expect(window.YOUVEBEENH4X0RED).toBe(undefined);
+  });
+
+  it('should let restructured components retain their uniqueness', async () => {
+    const instance0 = <span />;
+    const instance1 = <span />;
+    const instance2 = <span />;
+
+    class TestComponent extends React.Component {
+      render() {
+        return (
+          <div>
+            {instance2}
+            {this.props.children[0]}
+            {this.props.children[1]}
+          </div>
+        );
+      }
+    }
+
+    class TestContainer extends React.Component {
+      render() {
+        return (
+          <TestComponent>
+            {instance0}
+            {instance1}
+          </TestComponent>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<TestContainer />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should let nested restructures retain their uniqueness', async () => {
+    const instance0 = <span />;
+    const instance1 = <span />;
+    const instance2 = <span />;
+
+    class TestComponent extends React.Component {
+      render() {
+        return (
+          <div>
+            {instance2}
+            {this.props.children[0]}
+            {this.props.children[1]}
+          </div>
+        );
+      }
+    }
+
+    class TestContainer extends React.Component {
+      render() {
+        return (
+          <div>
+            <TestComponent>
+              {instance0}
+              {instance1}
+            </TestComponent>
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<TestContainer />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should let text nodes retain their uniqueness', async () => {
+    class TestComponent extends React.Component {
+      render() {
+        return (
+          <div>
+            {this.props.children}
+            <span />
+          </div>
+        );
+      }
+    }
+
+    class TestContainer extends React.Component {
+      render() {
+        return (
+          <TestComponent>
+            <div />
+            {'second'}
+          </TestComponent>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<TestContainer />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should retain key during updates in composite components', async () => {
+    class TestComponent extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    class TestContainer extends React.Component {
+      state = {swapped: false};
+
+      swap = () => {
+        this.setState({swapped: true});
+      };
+
+      render() {
+        return (
+          <TestComponent>
+            {this.state.swapped ? this.props.second : this.props.first}
+            {this.state.swapped ? this.props.first : this.props.second}
+          </TestComponent>
+        );
+      }
+    }
+
+    const instance0 = <span key="A" />;
+    const instance1 = <span key="B" />;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const wrappedRef = React.createRef();
+    await act(async () => {
+      root.render(
+        <TestContainer first={instance0} second={instance1} ref={wrappedRef} />,
+      );
+    });
+    const div = container.firstChild;
+
+    const beforeA = div.firstChild;
+    const beforeB = div.lastChild;
+    await act(async () => {
+      wrappedRef.current.swap();
+    });
+    const afterA = div.lastChild;
+    const afterB = div.firstChild;
+
+    expect(beforeA).toBe(afterA);
+    expect(beforeB).toBe(afterB);
+  });
+
+  it('should not allow implicit and explicit keys to collide', async () => {
+    const component = (
+      <div>
+        <span />
+        <span key="0" />
+      </div>
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(component);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should throw if key is a Temporal-like object', async () => {
+    class TemporalLike {
+      valueOf() {
+        // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
+        // See https://tc39.es/proposal-temporal/docs/plaindate.html#valueOf
+        throw new TypeError('prod message');
+      }
+      toString() {
+        return '2020-01-01';
+      }
+    }
+
+    const el = document.createElement('div');
+    const root = ReactDOMClient.createRoot(el);
+    await expect(() => {
+      root.render(
+        <div>
+          <span key={new TemporalLike()} />
+        </div>,
+      );
+    }).toThrowError(new TypeError('prod message'));
+    assertConsoleErrorDev(
+      [
+        'The provided key is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before using it here.',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js
new file mode 100644
index 00000000000..1b0776f6265
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js
@@ -0,0 +1,941 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 findDOMNode;
+let ReactDOMClient;
+let PropTypes;
+
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactLegacyCompositeComponent', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    findDOMNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .findDOMNode;
+    PropTypes = require('prop-types');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn about `setState` in render in legacy mode', () => {
+    const container = document.createElement('div');
+
+    let renderedState = -1;
+    let renderPasses = 0;
+
+    class Component extends React.Component {
+      state = {value: 0};
+
+      render() {
+        renderPasses++;
+        renderedState = this.state.value;
+        if (this.state.value === 0) {
+          this.setState({value: 1});
+        }
+        return <div />;
+      }
+    }
+    const instance = ReactDOM.render(<Component />, container);
+    assertConsoleErrorDev([
+      'Cannot update during an existing state transition (such as within ' +
+        '`render`). Render methods should be a pure function of props and state.\n' +
+        '    in Component (at **)',
+    ]);
+
+    // The setState call is queued and then executed as a second pass. This
+    // behavior is undefined though so we're free to change it to suit the
+    // implementation details.
+    expect(renderPasses).toBe(2);
+    expect(renderedState).toBe(1);
+    expect(instance.state.value).toBe(1);
+
+    // Forcing a rerender anywhere will cause the update to happen.
+    const instance2 = ReactDOM.render(<Component prop={123} />, container);
+    expect(instance).toBe(instance2);
+    expect(renderedState).toBe(1);
+    expect(instance2.state.value).toBe(1);
+
+    // Test deduplication; (no additional warnings are expected).
+    ReactDOM.unmountComponentAtNode(container);
+    ReactDOM.render(<Component prop={123} />, container);
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass context to children when not owner', async () => {
+    class Parent extends React.Component {
+      render() {
+        return (
+          <Child>
+            <Grandchild />
+          </Child>
+        );
+      }
+    }
+
+    class Child extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+      };
+
+      getChildContext() {
+        return {
+          foo: 'bar',
+        };
+      }
+
+      render() {
+        return React.Children.only(this.props.children);
+      }
+    }
+
+    class Grandchild extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string,
+      };
+
+      render() {
+        return <div>{this.context.foo}</div>;
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let component;
+    await act(() => {
+      root.render(<Parent ref={current => (component = current)} />);
+    });
+    assertConsoleErrorDev([
+      'Child uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Grandchild uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+    ]);
+    expect(findDOMNode(component).innerHTML).toBe('bar');
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass context when re-rendered for static child', async () => {
+    let parentInstance = null;
+    let childInstance = null;
+
+    class Parent extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+        flag: PropTypes.bool,
+      };
+
+      state = {
+        flag: false,
+      };
+
+      getChildContext() {
+        return {
+          foo: 'bar',
+          flag: this.state.flag,
+        };
+      }
+
+      render() {
+        return React.Children.only(this.props.children);
+      }
+    }
+
+    class Middle extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string,
+        flag: PropTypes.bool,
+      };
+
+      render() {
+        childInstance = this;
+        return <span>Child</span>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <Parent ref={current => (parentInstance = current)}>
+          <Middle>
+            <Child />
+          </Middle>
+        </Parent>,
+      );
+    });
+
+    expect(parentInstance.state.flag).toBe(false);
+    expect(childInstance.context).toEqual({foo: 'bar', flag: false});
+
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Child (at **)',
+    ]);
+
+    await act(() => {
+      parentInstance.setState({flag: true});
+    });
+    expect(parentInstance.state.flag).toBe(true);
+    expect(childInstance.context).toEqual({foo: 'bar', flag: true});
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass context when re-rendered for static child within a composite component', async () => {
+    class Parent extends React.Component {
+      static childContextTypes = {
+        flag: PropTypes.bool,
+      };
+
+      state = {
+        flag: true,
+      };
+
+      getChildContext() {
+        return {
+          flag: this.state.flag,
+        };
+      }
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        flag: PropTypes.bool,
+      };
+
+      render() {
+        return <div />;
+      }
+    }
+
+    class Wrapper extends React.Component {
+      parentRef = React.createRef();
+      childRef = React.createRef();
+
+      render() {
+        return (
+          <Parent ref={this.parentRef}>
+            <Child ref={this.childRef} />
+          </Parent>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let wrapper;
+    await act(() => {
+      root.render(<Wrapper ref={current => (wrapper = current)} />);
+    });
+
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Wrapper (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Wrapper (at **)',
+    ]);
+
+    expect(wrapper.parentRef.current.state.flag).toEqual(true);
+    expect(wrapper.childRef.current.context).toEqual({flag: true});
+
+    // We update <Parent /> while <Child /> is still a static prop relative to this update
+    await act(() => {
+      wrapper.parentRef.current.setState({flag: false});
+    });
+
+    expect(wrapper.parentRef.current.state.flag).toEqual(false);
+    expect(wrapper.childRef.current.context).toEqual({flag: false});
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass context transitively', async () => {
+    let childInstance = null;
+    let grandchildInstance = null;
+
+    class Parent extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+        depth: PropTypes.number,
+      };
+
+      getChildContext() {
+        return {
+          foo: 'bar',
+          depth: 0,
+        };
+      }
+
+      render() {
+        return <Child />;
+      }
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string,
+        depth: PropTypes.number,
+      };
+
+      static childContextTypes = {
+        depth: PropTypes.number,
+      };
+
+      getChildContext() {
+        return {
+          depth: this.context.depth + 1,
+        };
+      }
+
+      render() {
+        childInstance = this;
+        return <Grandchild />;
+      }
+    }
+
+    class Grandchild extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string,
+        depth: PropTypes.number,
+      };
+
+      render() {
+        grandchildInstance = this;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Child uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Grandchild uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Child (at **)\n' +
+        '    in Parent (at **)',
+    ]);
+
+    expect(childInstance.context).toEqual({foo: 'bar', depth: 0});
+    expect(grandchildInstance.context).toEqual({foo: 'bar', depth: 1});
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass context when re-rendered', async () => {
+    let parentInstance = null;
+    let childInstance = null;
+
+    class Parent extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+        depth: PropTypes.number,
+      };
+
+      state = {
+        flag: false,
+      };
+
+      getChildContext() {
+        return {
+          foo: 'bar',
+          depth: 0,
+        };
+      }
+
+      render() {
+        let output = <Child />;
+        if (!this.state.flag) {
+          output = <span>Child</span>;
+        }
+        return output;
+      }
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string,
+        depth: PropTypes.number,
+      };
+
+      render() {
+        childInstance = this;
+        return <span>Child</span>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent ref={current => (parentInstance = current)} />);
+    });
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+    ]);
+
+    expect(childInstance).toBeNull();
+
+    expect(parentInstance.state.flag).toBe(false);
+    await act(() => {
+      parentInstance.setState({flag: true});
+    });
+    assertConsoleErrorDev([
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+    ]);
+
+    expect(parentInstance.state.flag).toBe(true);
+
+    expect(childInstance.context).toEqual({foo: 'bar', depth: 0});
+  });
+
+  // @gate !disableLegacyContext
+  // @gate !disableLegacyMode
+  it('unmasked context propagates through updates', () => {
+    class Leaf extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        expect('foo' in nextContext).toBe(true);
+      }
+
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        expect('foo' in nextContext).toBe(true);
+        return true;
+      }
+
+      render() {
+        return <span>{this.context.foo}</span>;
+      }
+    }
+
+    class Intermediary extends React.Component {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        expect('foo' in nextContext).toBe(false);
+      }
+
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        expect('foo' in nextContext).toBe(false);
+        return true;
+      }
+
+      render() {
+        return <Leaf />;
+      }
+    }
+
+    class Parent extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+      };
+
+      getChildContext() {
+        return {
+          foo: this.props.cntxt,
+        };
+      }
+
+      render() {
+        return <Intermediary />;
+      }
+    }
+
+    const div = document.createElement('div');
+    ReactDOM.render(<Parent cntxt="noise" />, div);
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Leaf uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Intermediary (at **)\n' +
+        '    in Parent (at **)',
+    ]);
+    expect(div.children[0].innerHTML).toBe('noise');
+    div.children[0].innerHTML = 'aliens';
+    div.children[0].id = 'aliens';
+    expect(div.children[0].innerHTML).toBe('aliens');
+    expect(div.children[0].id).toBe('aliens');
+    ReactDOM.render(<Parent cntxt="bar" />, div);
+    expect(div.children[0].innerHTML).toBe('bar');
+    expect(div.children[0].id).toBe('aliens');
+  });
+
+  // @gate !disableLegacyContext
+  // @gate !disableLegacyMode
+  it('should trigger componentWillReceiveProps for context changes', () => {
+    let contextChanges = 0;
+    let propChanges = 0;
+
+    class GrandChild extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        expect('foo' in nextContext).toBe(true);
+
+        if (nextProps !== this.props) {
+          propChanges++;
+        }
+
+        if (nextContext !== this.context) {
+          contextChanges++;
+        }
+      }
+
+      render() {
+        return <span className="grand-child">{this.props.children}</span>;
+      }
+    }
+
+    class ChildWithContext extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        expect('foo' in nextContext).toBe(true);
+
+        if (nextProps !== this.props) {
+          propChanges++;
+        }
+
+        if (nextContext !== this.context) {
+          contextChanges++;
+        }
+      }
+
+      render() {
+        return <div className="child-with">{this.props.children}</div>;
+      }
+    }
+
+    class ChildWithoutContext extends React.Component {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        expect('foo' in nextContext).toBe(false);
+
+        if (nextProps !== this.props) {
+          propChanges++;
+        }
+
+        if (nextContext !== this.context) {
+          contextChanges++;
+        }
+      }
+
+      render() {
+        return <div className="child-without">{this.props.children}</div>;
+      }
+    }
+
+    class Parent extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+      };
+
+      state = {
+        foo: 'abc',
+      };
+
+      getChildContext() {
+        return {
+          foo: this.state.foo,
+        };
+      }
+
+      render() {
+        return <div className="parent">{this.props.children}</div>;
+      }
+    }
+
+    const div = document.createElement('div');
+
+    let parentInstance = null;
+    ReactDOM.render(
+      <Parent ref={inst => (parentInstance = inst)}>
+        <ChildWithoutContext>
+          A1
+          <GrandChild>A2</GrandChild>
+        </ChildWithoutContext>
+
+        <ChildWithContext>
+          B1
+          <GrandChild>B2</GrandChild>
+        </ChildWithContext>
+      </Parent>,
+      div,
+    );
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'GrandChild uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in GrandChild (at **)',
+      'ChildWithContext uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ChildWithContext (at **)',
+    ]);
+
+    parentInstance.setState({
+      foo: 'def',
+    });
+
+    expect(propChanges).toBe(0);
+    expect(contextChanges).toBe(3); // ChildWithContext, GrandChild x 2
+  });
+
+  // @gate !disableLegacyMode
+  it('only renders once if updated in componentWillReceiveProps in legacy mode', () => {
+    let renders = 0;
+
+    class Component extends React.Component {
+      state = {updated: false};
+
+      UNSAFE_componentWillReceiveProps(props) {
+        expect(props.update).toBe(1);
+        expect(renders).toBe(1);
+        this.setState({updated: true});
+        expect(renders).toBe(1);
+      }
+
+      render() {
+        renders++;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component update={0} />, container);
+    expect(renders).toBe(1);
+    expect(instance.state.updated).toBe(false);
+    ReactDOM.render(<Component update={1} />, container);
+    expect(renders).toBe(2);
+    expect(instance.state.updated).toBe(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('only renders once if updated in componentWillReceiveProps when batching in legacy mode', () => {
+    let renders = 0;
+
+    class Component extends React.Component {
+      state = {updated: false};
+
+      UNSAFE_componentWillReceiveProps(props) {
+        expect(props.update).toBe(1);
+        expect(renders).toBe(1);
+        this.setState({updated: true});
+        expect(renders).toBe(1);
+      }
+
+      render() {
+        renders++;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component update={0} />, container);
+    expect(renders).toBe(1);
+    expect(instance.state.updated).toBe(false);
+    ReactDOM.unstable_batchedUpdates(() => {
+      ReactDOM.render(<Component update={1} />, container);
+    });
+    expect(renders).toBe(2);
+    expect(instance.state.updated).toBe(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('should update refs if shouldComponentUpdate gives false in legacy mode', () => {
+    class Static extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    class Component extends React.Component {
+      static0Ref = React.createRef();
+      static1Ref = React.createRef();
+
+      render() {
+        if (this.props.flipped) {
+          return (
+            <div>
+              <Static ref={this.static0Ref} key="B">
+                B (ignored)
+              </Static>
+              <Static ref={this.static1Ref} key="A">
+                A (ignored)
+              </Static>
+            </div>
+          );
+        } else {
+          return (
+            <div>
+              <Static ref={this.static0Ref} key="A">
+                A
+              </Static>
+              <Static ref={this.static1Ref} key="B">
+                B
+              </Static>
+            </div>
+          );
+        }
+      }
+    }
+
+    const container = document.createElement('div');
+    const comp = ReactDOM.render(<Component flipped={false} />, container);
+    expect(findDOMNode(comp.static0Ref.current).textContent).toBe('A');
+    expect(findDOMNode(comp.static1Ref.current).textContent).toBe('B');
+
+    // When flipping the order, the refs should update even though the actual
+    // contents do not
+    ReactDOM.render(<Component flipped={true} />, container);
+    expect(findDOMNode(comp.static0Ref.current).textContent).toBe('B');
+    expect(findDOMNode(comp.static1Ref.current).textContent).toBe('A');
+  });
+
+  // @gate !disableLegacyMode
+  it('should allow access to findDOMNode in componentWillUnmount in legacy mode', () => {
+    let a = null;
+    let b = null;
+
+    class Component extends React.Component {
+      componentDidMount() {
+        a = findDOMNode(this);
+        expect(a).not.toBe(null);
+      }
+
+      componentWillUnmount() {
+        b = findDOMNode(this);
+        expect(b).not.toBe(null);
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    expect(a).toBe(container.firstChild);
+    ReactDOM.render(<Component />, container);
+    ReactDOM.unmountComponentAtNode(container);
+    expect(a).toBe(b);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  // @gate !disableLegacyMode
+  it('context should be passed down from the parent', () => {
+    class Parent extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+      };
+
+      getChildContext() {
+        return {
+          foo: 'bar',
+        };
+      }
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    class Component extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const div = document.createElement('div');
+    ReactDOM.render(
+      <Parent>
+        <Component />
+      </Parent>,
+      div,
+    );
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Component uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should replace state in legacy mode', async () => {
+    class Moo extends React.Component {
+      state = {x: 1};
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let moo;
+    await act(() => {
+      root.render(<Moo ref={current => (moo = current)} />);
+    });
+
+    // No longer a public API, but we can test that it works internally by
+    // reaching into the updater.
+    await act(() => {
+      moo.updater.enqueueReplaceState(moo, {y: 2});
+    });
+    expect('x' in moo.state).toBe(false);
+    expect(moo.state.y).toBe(2);
+  });
+
+  it('should support objects with prototypes as state in legacy mode', async () => {
+    const NotActuallyImmutable = function (str) {
+      this.str = str;
+    };
+    NotActuallyImmutable.prototype.amIImmutable = function () {
+      return true;
+    };
+    class Moo extends React.Component {
+      state = new NotActuallyImmutable('first');
+      // No longer a public API, but we can test that it works internally by
+      // reaching into the updater.
+      _replaceState = update => this.updater.enqueueReplaceState(this, update);
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let moo;
+    await act(() => {
+      root.render(<Moo ref={current => (moo = current)} />);
+    });
+
+    expect(moo.state.str).toBe('first');
+    expect(moo.state.amIImmutable()).toBe(true);
+
+    const secondState = new NotActuallyImmutable('second');
+    await act(() => {
+      moo._replaceState(secondState);
+    });
+    expect(moo.state.str).toBe('second');
+    expect(moo.state.amIImmutable()).toBe(true);
+    expect(moo.state).toBe(secondState);
+
+    await act(() => {
+      moo.setState({str: 'third'});
+    });
+    expect(moo.state.str).toBe('third');
+    // Here we lose the prototype.
+    expect(moo.state.amIImmutable).toBe(undefined);
+
+    // When more than one state update is enqueued, we have the same behavior
+    const fifthState = new NotActuallyImmutable('fifth');
+    await act(() => {
+      moo.setState({str: 'fourth'});
+      moo._replaceState(fifthState);
+    });
+    expect(moo.state).toBe(fifthState);
+
+    // When more than one state update is enqueued, we have the same behavior
+    const sixthState = new NotActuallyImmutable('sixth');
+    await act(() => {
+      moo._replaceState(sixthState);
+      moo.setState({str: 'seventh'});
+    });
+    expect(moo.state.str).toBe('seventh');
+    expect(moo.state.amIImmutable).toBe(undefined);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not warn about unmounting during unmounting in legacy mode', () => {
+    const container = document.createElement('div');
+    const layer = document.createElement('div');
+
+    class Component extends React.Component {
+      componentDidMount() {
+        ReactDOM.render(<div />, layer);
+      }
+
+      componentWillUnmount() {
+        ReactDOM.unmountComponentAtNode(layer);
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    class Outer extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    ReactDOM.render(
+      <Outer>
+        <Component />
+      </Outer>,
+      container,
+    );
+    ReactDOM.render(<Outer />, container);
+  });
+});
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 00000000000..98abd05ff4b
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let ReactFeatureFlags;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactLegacyContextDisabled', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.disableLegacyContext = true;
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  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', async () => {
+    class LegacyProvider extends React.Component {
+      static childContextTypes = {
+        foo() {},
+      };
+      getChildContext() {
+        return {foo: 10};
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    const 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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <LegacyProvider>
+          <span>
+            <LegacyClsConsumer />
+            <LegacyFnConsumer />
+            <RegularFn />
+          </span>
+        </LegacyProvider>,
+      );
+    });
+    assertConsoleErrorDev([
+      'LegacyProvider uses the legacy childContextTypes API which was removed in React 19. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in LegacyProvider (at **)',
+      'LegacyClsConsumer uses the legacy contextTypes API which was removed in React 19. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in LegacyClsConsumer (at **)',
+      'LegacyFnConsumer uses the legacy contextTypes API which was removed in React 19. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in LegacyFnConsumer (at **)',
+    ]);
+    expect(container.textContent).toBe('{}undefinedundefined');
+    expect(lifecycleContextLog).toEqual([]);
+
+    // Test update path.
+    await act(() => {
+      root.render(
+        <LegacyProvider>
+          <span>
+            <LegacyClsConsumer />
+            <LegacyFnConsumer />
+            <RegularFn />
+          </span>
+        </LegacyProvider>,
+      );
+    });
+    expect(container.textContent).toBe('{}undefinedundefined');
+    expect(lifecycleContextLog).toEqual([{}, {}, {}]);
+    root.unmount();
+
+    // test server path.
+    const text = ReactDOMServer.renderToString(
+      <LegacyProvider>
+        <span>
+          <LegacyClsConsumer />
+          <LegacyFnConsumer />
+          <RegularFn />
+        </span>
+      </LegacyProvider>,
+      container,
+    );
+    assertConsoleErrorDev([
+      'LegacyProvider uses the legacy childContextTypes API which was removed in React 19. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in LegacyProvider (at **)',
+      'LegacyClsConsumer uses the legacy contextTypes API which was removed in React 19. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in LegacyClsConsumer (at **)',
+      'LegacyFnConsumer uses the legacy contextTypes API which was removed in React 19. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in LegacyFnConsumer (at **)',
+    ]);
+    expect(text).toBe('<span>{}<!-- -->undefined<!-- -->undefined</span>');
+    expect(lifecycleContextLog).toEqual([{}, {}, {}]);
+  });
+
+  it('renders a tree with modern context', async () => {
+    const 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>;
+      }
+    }
+
+    const 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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Provider value="a">
+          <span>
+            <RenderPropConsumer />
+            <ContextTypeConsumer />
+            <FnConsumer />
+          </span>
+        </Provider>,
+      );
+    });
+    expect(container.textContent).toBe('aaa');
+    expect(lifecycleContextLog).toEqual([]);
+
+    // Test update path
+    await act(() => {
+      root.render(
+        <Provider value="a">
+          <span>
+            <RenderPropConsumer />
+            <ContextTypeConsumer />
+            <FnConsumer />
+          </span>
+        </Provider>,
+      );
+    });
+    expect(container.textContent).toBe('aaa');
+    expect(lifecycleContextLog).toEqual(['a', 'a', 'a']);
+    lifecycleContextLog.length = 0;
+
+    await act(() => {
+      root.render(
+        <Provider value="b">
+          <span>
+            <RenderPropConsumer />
+            <ContextTypeConsumer />
+            <FnConsumer />
+          </span>
+        </Provider>,
+      );
+    });
+    expect(container.textContent).toBe('bbb');
+    expect(lifecycleContextLog).toEqual(['b', 'b', 'b']);
+    root.unmount();
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
new file mode 100644
index 00000000000..8c0505db92d
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
@@ -0,0 +1,2261 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let React;
+let ReactDOM;
+let act;
+let assertConsoleErrorDev;
+
+// TODO: Refactor this test once componentDidCatch setState is deprecated.
+describe('ReactLegacyErrorBoundaries', () => {
+  let log;
+
+  let BrokenConstructor;
+  let BrokenComponentWillMount;
+  let BrokenComponentDidMount;
+  let BrokenComponentWillReceiveProps;
+  let BrokenComponentWillUpdate;
+  let BrokenComponentDidUpdate;
+  let BrokenComponentWillUnmount;
+  let BrokenRenderErrorBoundary;
+  let BrokenComponentWillMountErrorBoundary;
+  let BrokenComponentDidMountErrorBoundary;
+  let BrokenRender;
+  let ErrorBoundary;
+  let BothErrorBoundaries;
+  let ErrorMessage;
+  let NoopErrorBoundary;
+  let RetryErrorBoundary;
+  let Normal;
+
+  beforeEach(() => {
+    jest.resetModules();
+    PropTypes = require('prop-types');
+    ReactDOM = require('react-dom');
+    React = require('react');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    log = [];
+
+    BrokenConstructor = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('BrokenConstructor constructor [!]');
+        throw new Error('Hello');
+      }
+      render() {
+        log.push('BrokenConstructor render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenConstructor componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenConstructor componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenConstructor componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenConstructor componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenConstructor componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenConstructor componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillMount = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('BrokenComponentWillMount constructor');
+      }
+      render() {
+        log.push('BrokenComponentWillMount render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentWillMount componentWillMount [!]');
+        throw new Error('Hello');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentWillMount componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenComponentWillMount componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenComponentWillMount componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenComponentWillMount componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentWillMount componentWillUnmount');
+      }
+    };
+
+    BrokenComponentDidMount = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('BrokenComponentDidMount constructor');
+      }
+      render() {
+        log.push('BrokenComponentDidMount render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentDidMount componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentDidMount componentDidMount [!]');
+        throw new Error('Hello');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenComponentDidMount componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenComponentDidMount componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenComponentDidMount componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentDidMount componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillReceiveProps = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('BrokenComponentWillReceiveProps constructor');
+      }
+      render() {
+        log.push('BrokenComponentWillReceiveProps render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentWillReceiveProps componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentWillReceiveProps componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push(
+          'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',
+        );
+        throw new Error('Hello');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenComponentWillReceiveProps componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenComponentWillReceiveProps componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentWillReceiveProps componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillUpdate = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('BrokenComponentWillUpdate constructor');
+      }
+      render() {
+        log.push('BrokenComponentWillUpdate render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentWillUpdate componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentWillUpdate componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenComponentWillUpdate componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenComponentWillUpdate componentWillUpdate [!]');
+        throw new Error('Hello');
+      }
+      componentDidUpdate() {
+        log.push('BrokenComponentWillUpdate componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentWillUpdate componentWillUnmount');
+      }
+    };
+
+    BrokenComponentDidUpdate = class extends React.Component {
+      static defaultProps = {
+        errorText: 'Hello',
+      };
+      constructor(props) {
+        super(props);
+        log.push('BrokenComponentDidUpdate constructor');
+      }
+      render() {
+        log.push('BrokenComponentDidUpdate render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentDidUpdate componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentDidUpdate componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenComponentDidUpdate componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenComponentDidUpdate componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenComponentDidUpdate componentDidUpdate [!]');
+        throw new Error(this.props.errorText);
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentDidUpdate componentWillUnmount');
+      }
+    };
+
+    BrokenComponentWillUnmount = class extends React.Component {
+      static defaultProps = {
+        errorText: 'Hello',
+      };
+      constructor(props) {
+        super(props);
+        log.push('BrokenComponentWillUnmount constructor');
+      }
+      render() {
+        log.push('BrokenComponentWillUnmount render');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentWillUnmount componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentWillUnmount componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenComponentWillUnmount componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenComponentWillUnmount componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenComponentWillUnmount componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentWillUnmount componentWillUnmount [!]');
+        throw new Error(this.props.errorText);
+      }
+    };
+
+    BrokenComponentWillMountErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        log.push('BrokenComponentWillMountErrorBoundary constructor');
+      }
+      render() {
+        if (this.state.error) {
+          log.push('BrokenComponentWillMountErrorBoundary render error');
+          return <div>Caught an error: {this.state.error.message}.</div>;
+        }
+        log.push('BrokenComponentWillMountErrorBoundary render success');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push(
+          'BrokenComponentWillMountErrorBoundary componentWillMount [!]',
+        );
+        throw new Error('Hello');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentWillMountErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentWillMountErrorBoundary componentWillUnmount');
+      }
+      componentDidCatch(error) {
+        log.push('BrokenComponentWillMountErrorBoundary componentDidCatch');
+        this.setState({error});
+      }
+    };
+
+    BrokenComponentDidMountErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        log.push('BrokenComponentDidMountErrorBoundary constructor');
+      }
+      render() {
+        if (this.state.error) {
+          log.push('BrokenComponentDidMountErrorBoundary render error');
+          return <div>Caught an error: {this.state.error.message}.</div>;
+        }
+        log.push('BrokenComponentDidMountErrorBoundary render success');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenComponentDidMountErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenComponentDidMountErrorBoundary componentDidMount [!]');
+        throw new Error('Hello');
+      }
+      componentWillUnmount() {
+        log.push('BrokenComponentDidMountErrorBoundary componentWillUnmount');
+      }
+      componentDidCatch(error) {
+        log.push('BrokenComponentDidMountErrorBoundary componentDidCatch');
+        this.setState({error});
+      }
+    };
+
+    BrokenRenderErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        log.push('BrokenRenderErrorBoundary constructor');
+      }
+      render() {
+        if (this.state.error) {
+          log.push('BrokenRenderErrorBoundary render error [!]');
+          throw new Error('Hello');
+        }
+        log.push('BrokenRenderErrorBoundary render success');
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenRenderErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenRenderErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('BrokenRenderErrorBoundary componentWillUnmount');
+      }
+      componentDidCatch(error) {
+        log.push('BrokenRenderErrorBoundary componentDidCatch');
+        this.setState({error});
+      }
+    };
+
+    BrokenRender = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('BrokenRender constructor');
+      }
+      render() {
+        log.push('BrokenRender render [!]');
+        throw new Error('Hello');
+      }
+      UNSAFE_componentWillMount() {
+        log.push('BrokenRender componentWillMount');
+      }
+      componentDidMount() {
+        log.push('BrokenRender componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push('BrokenRender componentWillReceiveProps');
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push('BrokenRender componentWillUpdate');
+      }
+      componentDidUpdate() {
+        log.push('BrokenRender componentDidUpdate');
+      }
+      componentWillUnmount() {
+        log.push('BrokenRender componentWillUnmount');
+      }
+    };
+
+    NoopErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('NoopErrorBoundary constructor');
+      }
+      render() {
+        log.push('NoopErrorBoundary render');
+        return <BrokenRender />;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('NoopErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        log.push('NoopErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('NoopErrorBoundary componentWillUnmount');
+      }
+      componentDidCatch() {
+        log.push('NoopErrorBoundary componentDidCatch');
+      }
+    };
+
+    Normal = class extends React.Component {
+      static defaultProps = {
+        logName: 'Normal',
+      };
+      constructor(props) {
+        super(props);
+        log.push(`${this.props.logName} constructor`);
+      }
+      render() {
+        log.push(`${this.props.logName} render`);
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        log.push(`${this.props.logName} componentWillMount`);
+      }
+      componentDidMount() {
+        log.push(`${this.props.logName} componentDidMount`);
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push(`${this.props.logName} componentWillReceiveProps`);
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push(`${this.props.logName} componentWillUpdate`);
+      }
+      componentDidUpdate() {
+        log.push(`${this.props.logName} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        log.push(`${this.props.logName} componentWillUnmount`);
+      }
+    };
+
+    ErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+        log.push(`${this.props.logName} constructor`);
+      }
+      render() {
+        if (this.state.error && !this.props.forceRetry) {
+          log.push(`${this.props.logName} render error`);
+          return this.props.renderError(this.state.error, this.props);
+        }
+        log.push(`${this.props.logName} render success`);
+        return <div>{this.props.children}</div>;
+      }
+      componentDidCatch(error) {
+        log.push(`${this.props.logName} componentDidCatch`);
+        this.setState({error});
+      }
+      UNSAFE_componentWillMount() {
+        log.push(`${this.props.logName} componentWillMount`);
+      }
+      componentDidMount() {
+        log.push(`${this.props.logName} componentDidMount`);
+      }
+      UNSAFE_componentWillReceiveProps() {
+        log.push(`${this.props.logName} componentWillReceiveProps`);
+      }
+      UNSAFE_componentWillUpdate() {
+        log.push(`${this.props.logName} componentWillUpdate`);
+      }
+      componentDidUpdate() {
+        log.push(`${this.props.logName} componentDidUpdate`);
+      }
+      componentWillUnmount() {
+        log.push(`${this.props.logName} componentWillUnmount`);
+      }
+    };
+    ErrorBoundary.defaultProps = {
+      logName: 'ErrorBoundary',
+      renderError(error, props) {
+        return (
+          <div ref={props.errorMessageRef}>
+            Caught an error: {error.message}.
+          </div>
+        );
+      },
+    };
+
+    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);
+        log.push('RetryErrorBoundary constructor');
+      }
+      render() {
+        log.push('RetryErrorBoundary render');
+        return <BrokenRender />;
+      }
+      UNSAFE_componentWillMount() {
+        log.push('RetryErrorBoundary componentWillMount');
+      }
+      componentDidMount() {
+        log.push('RetryErrorBoundary componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('RetryErrorBoundary componentWillUnmount');
+      }
+      componentDidCatch(error) {
+        log.push('RetryErrorBoundary componentDidCatch [!]');
+        // In Fiber, calling setState() (and failing) is treated as a rethrow.
+        this.setState({});
+      }
+    };
+
+    ErrorMessage = class extends React.Component {
+      constructor(props) {
+        super(props);
+        log.push('ErrorMessage constructor');
+      }
+      UNSAFE_componentWillMount() {
+        log.push('ErrorMessage componentWillMount');
+      }
+      componentDidMount() {
+        log.push('ErrorMessage componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('ErrorMessage componentWillUnmount');
+      }
+      render() {
+        log.push('ErrorMessage render');
+        return <div>Caught an error: {this.props.message}.</div>;
+      }
+    };
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // @gate !disableLegacyMode
+  it('does not swallow exceptions on mounting without boundaries', async () => {
+    let container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenRender />, container);
+      });
+    }).rejects.toThrow('Hello');
+
+    container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenComponentWillMount />, container);
+      });
+    }).rejects.toThrow('Hello');
+
+    container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenComponentDidMount />, container);
+      });
+    }).rejects.toThrow('Hello');
+  });
+
+  // @gate !disableLegacyMode
+  it('does not swallow exceptions on updating without boundaries', async () => {
+    let container = document.createElement('div');
+    ReactDOM.render(<BrokenComponentWillUpdate />, container);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenComponentWillUpdate />, container);
+      });
+    }).rejects.toThrow('Hello');
+
+    container = document.createElement('div');
+    ReactDOM.render(<BrokenComponentWillReceiveProps />, container);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenComponentWillReceiveProps />, container);
+      });
+    }).rejects.toThrow('Hello');
+
+    container = document.createElement('div');
+    ReactDOM.render(<BrokenComponentDidUpdate />, container);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenComponentDidUpdate />, container);
+      });
+    }).rejects.toThrow('Hello');
+  });
+
+  // @gate !disableLegacyMode
+  it('does not swallow exceptions on unmounting without boundaries', async () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<BrokenComponentWillUnmount />, container);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.unmountComponentAtNode(container);
+      });
+    }).rejects.toThrow('Hello');
+  });
+
+  // @gate !disableLegacyMode
+  it('prevents errors from leaking into other roots', async () => {
+    const container1 = document.createElement('div');
+    const container2 = document.createElement('div');
+    const container3 = document.createElement('div');
+
+    ReactDOM.render(<span>Before 1</span>, container1);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<BrokenRender />, container2);
+      });
+    }).rejects.toThrow('Hello');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container3,
+    );
+    expect(container1.firstChild.textContent).toBe('Before 1');
+    expect(container2.firstChild).toBe(null);
+    expect(container3.firstChild.textContent).toBe('Caught an error: Hello.');
+
+    ReactDOM.render(<span>After 1</span>, container1);
+    ReactDOM.render(<span>After 2</span>, container2);
+    ReactDOM.render(
+      <ErrorBoundary forceRetry={true}>After 3</ErrorBoundary>,
+      container3,
+    );
+    expect(container1.firstChild.textContent).toBe('After 1');
+    expect(container2.firstChild.textContent).toBe('After 2');
+    expect(container3.firstChild.textContent).toBe('After 3');
+
+    ReactDOM.unmountComponentAtNode(container1);
+    ReactDOM.unmountComponentAtNode(container2);
+    ReactDOM.unmountComponentAtNode(container3);
+    expect(container1.firstChild).toBe(null);
+    expect(container2.firstChild).toBe(null);
+    expect(container3.firstChild).toBe(null);
+  });
+
+  // @gate !disableLegacyMode
+  it('logs a single error using both error boundaries', () => {
+    const container = document.createElement('div');
+    spyOnDev(console, 'error');
+    ReactDOM.render(
+      <BothErrorBoundaries>
+        <BrokenRender />
+      </BothErrorBoundaries>,
+      container,
+    );
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.mock.calls[0][0]).toContain(
+        'ReactDOM.render has not been supported since React 18',
+      );
+      expect(console.error.mock.calls[1][2]).toContain(
+        'The above error occurred in the <BrokenRender> component',
+      );
+    }
+
+    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']);
+  });
+
+  // @gate !disableLegacyMode
+  it('renders an error state if child throws in render', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    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 [!]',
+      // Fiber mounts with null children before capturing error
+      'ErrorBoundary componentDidMount',
+      // Catch and render an error message
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('renders an error state if child throws in constructor', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenConstructor />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenConstructor constructor [!]',
+      // Fiber mounts with null children before capturing error
+      'ErrorBoundary componentDidMount',
+      // Catch and render an error message
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('renders an error state if child throws in componentWillMount', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentWillMount />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillMount constructor',
+      'BrokenComponentWillMount componentWillMount [!]',
+      'ErrorBoundary componentDidMount',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  // @gate !disableLegacyMode
+  it('renders an error state if context provider throws in componentWillMount', () => {
+    class BrokenComponentWillMountWithContext extends React.Component {
+      static childContextTypes = {foo: PropTypes.number};
+      getChildContext() {
+        return {foo: 42};
+      }
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+      UNSAFE_componentWillMount() {
+        throw new Error('Hello');
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentWillMountWithContext />
+      </ErrorBoundary>,
+      container,
+    );
+    assertConsoleErrorDev([
+      'BrokenComponentWillMountWithContext uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in BrokenComponentWillMountWithContext (at **)',
+    ]);
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+  });
+
+  // @gate !disableLegacyMode
+  it('mounts the error message if mounting fails', () => {
+    function renderError(error) {
+      return <ErrorMessage message={error.message} />;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary renderError={renderError}>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      'ErrorBoundary componentDidMount',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorMessage constructor',
+      'ErrorMessage componentWillMount',
+      'ErrorMessage render',
+      'ErrorMessage componentDidMount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual([
+      'ErrorBoundary componentWillUnmount',
+      'ErrorMessage componentWillUnmount',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('propagates errors on retry on mounting', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <RetryErrorBoundary>
+          <BrokenRender />
+        </RetryErrorBoundary>
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'RetryErrorBoundary constructor',
+      'RetryErrorBoundary componentWillMount',
+      'RetryErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // In Fiber, failed error boundaries render null before attempting to recover
+      'RetryErrorBoundary componentDidMount',
+      'RetryErrorBoundary componentDidCatch [!]',
+      'ErrorBoundary componentDidMount',
+      // Retry
+      'RetryErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // This time, the error propagates to the higher boundary
+      'RetryErrorBoundary componentWillUnmount',
+      'ErrorBoundary componentDidCatch',
+      // Render the error
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('propagates errors inside boundary during componentWillMount', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentWillMountErrorBoundary />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillMountErrorBoundary constructor',
+      'BrokenComponentWillMountErrorBoundary componentWillMount [!]',
+      // The error propagates to the higher boundary
+      'ErrorBoundary componentDidMount',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('propagates errors inside boundary while rendering error state', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRenderErrorBoundary>
+          <BrokenRender />
+        </BrokenRenderErrorBoundary>
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRenderErrorBoundary constructor',
+      'BrokenRenderErrorBoundary componentWillMount',
+      'BrokenRenderErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // The first error boundary catches the error
+      // It adjusts state but throws displaying the message
+      // Finish mounting with null children
+      'BrokenRenderErrorBoundary componentDidMount',
+      // Attempt to handle the error
+      'BrokenRenderErrorBoundary componentDidCatch',
+      'ErrorBoundary componentDidMount',
+      'BrokenRenderErrorBoundary render error [!]',
+      // Boundary fails with new error, propagate to next boundary
+      'BrokenRenderErrorBoundary componentWillUnmount',
+      // Attempt to handle the error again
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('does not call componentWillUnmount when aborting initial mount', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenRender />
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      // Render first child
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      // Render second child (it throws)
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Skip the remaining siblings
+      // Finish mounting with null children
+      'ErrorBoundary componentDidMount',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('resets callback refs if mounting aborts', () => {
+    function childRef(x) {
+      log.push('Child ref is set to ' + x);
+    }
+    function errorMessageRef(x) {
+      log.push('Error message ref is set to ' + x);
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary errorMessageRef={errorMessageRef}>
+        <div ref={childRef} />
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Handle error:
+      // Finish mounting with null children
+      'ErrorBoundary componentDidMount',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Error message ref is set to [object HTMLDivElement]',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual([
+      'ErrorBoundary componentWillUnmount',
+      'Error message ref is set to null',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('resets object refs if mounting aborts', () => {
+    const childRef = React.createRef();
+    const errorMessageRef = React.createRef();
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary errorMessageRef={errorMessageRef}>
+        <div ref={childRef} />
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Handle error:
+      // Finish mounting with null children
+      'ErrorBoundary componentDidMount',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+    expect(errorMessageRef.current.toString()).toEqual(
+      '[object HTMLDivElement]',
+    );
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+    expect(errorMessageRef.current).toEqual(null);
+  });
+
+  // @gate !disableLegacyMode
+  it('successfully mounts if no error occurs', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <div>Mounted successfully.</div>
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Mounted successfully.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches if child throws in constructor during update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <Normal logName="Normal2" />
+        <BrokenConstructor />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // Normal2 will attempt to mount:
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      // BrokenConstructor will abort rendering:
+      'BrokenConstructor constructor [!]',
+      // Finish updating with null children
+      'Normal componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches if child throws in componentWillMount during update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <Normal logName="Normal2" />
+        <BrokenComponentWillMount />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // Normal2 will attempt to mount:
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      // BrokenComponentWillMount will abort rendering:
+      'BrokenComponentWillMount constructor',
+      'BrokenComponentWillMount componentWillMount [!]',
+      // Finish updating with null children
+      'Normal componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      // Render the error message
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches if child throws in componentWillReceiveProps during update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenComponentWillReceiveProps />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenComponentWillReceiveProps />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // BrokenComponentWillReceiveProps will abort rendering:
+      'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',
+      // Finish updating with null children
+      'Normal componentWillUnmount',
+      'BrokenComponentWillReceiveProps componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches if child throws in componentWillUpdate during update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenComponentWillUpdate />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenComponentWillUpdate />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // BrokenComponentWillUpdate will abort rendering:
+      'BrokenComponentWillUpdate componentWillReceiveProps',
+      'BrokenComponentWillUpdate componentWillUpdate [!]',
+      // Finish updating with null children
+      'Normal componentWillUnmount',
+      'BrokenComponentWillUpdate componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches if child throws in render during update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <Normal logName="Normal2" />
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      // Normal2 will attempt to mount:
+      'Normal2 constructor',
+      'Normal2 componentWillMount',
+      'Normal2 render',
+      // BrokenRender will abort rendering:
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Finish updating with null children
+      'Normal componentWillUnmount',
+      'ErrorBoundary componentDidUpdate',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('keeps refs up-to-date during updates', () => {
+    function child1Ref(x) {
+      log.push('Child1 ref is set to ' + x);
+    }
+    function child2Ref(x) {
+      log.push('Child2 ref is set to ' + x);
+    }
+    function errorMessageRef(x) {
+      log.push('Error message ref is set to ' + x);
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary errorMessageRef={errorMessageRef}>
+        <div ref={child1Ref} />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'Child1 ref is set to [object HTMLDivElement]',
+      'ErrorBoundary componentDidMount',
+    ]);
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary errorMessageRef={errorMessageRef}>
+        <div ref={child1Ref} />
+        <div ref={child2Ref} />
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // BrokenRender will abort rendering:
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // Finish updating with null children
+      'Child1 ref is set to null',
+      'ErrorBoundary componentDidUpdate',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'Error message ref is set to [object HTMLDivElement]',
+      // Child2 ref is never set because its mounting aborted
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual([
+      'ErrorBoundary componentWillUnmount',
+      'Error message ref is set to null',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('recovers from componentWillUnmount errors on update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentWillUnmount />
+        <BrokenComponentWillUnmount />
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentWillUnmount />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // Update existing child:
+      'BrokenComponentWillUnmount componentWillReceiveProps',
+      'BrokenComponentWillUnmount componentWillUpdate',
+      'BrokenComponentWillUnmount render',
+      // Unmounting throws:
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Fiber proceeds with lifecycles despite errors
+      'Normal componentWillUnmount',
+      // The components have updated in this phase
+      'BrokenComponentWillUnmount componentDidUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // Now that commit phase is done, Fiber unmounts the boundary's children
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      'ErrorBoundary componentDidCatch',
+      // The initial render was aborted, so
+      // Fiber retries from the root.
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // The second willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      // Render an error now (stack will do it later)
+      'ErrorBoundary render error',
+      // Attempt to unmount previous child:
+      // Done
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('recovers from nested componentWillUnmount errors on update', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal>
+          <BrokenComponentWillUnmount />
+        </Normal>
+        <BrokenComponentWillUnmount />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal>
+          <BrokenComponentWillUnmount />
+        </Normal>
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // Update existing children:
+      'Normal componentWillReceiveProps',
+      'Normal componentWillUpdate',
+      'Normal render',
+      'BrokenComponentWillUnmount componentWillReceiveProps',
+      'BrokenComponentWillUnmount componentWillUpdate',
+      'BrokenComponentWillUnmount render',
+      // Unmounting throws:
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Fiber proceeds with lifecycles despite errors
+      'BrokenComponentWillUnmount componentDidUpdate',
+      'Normal componentDidUpdate',
+      'ErrorBoundary componentDidUpdate',
+      'Normal componentWillUnmount',
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Now that commit phase is done, Fiber handles errors
+      'ErrorBoundary componentDidCatch',
+      // The initial render was aborted, so
+      // Fiber retries from the root.
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // The second willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      // Render an error now (stack will do it later)
+      'ErrorBoundary render error',
+      // Done
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('picks the right boundary when handling unmounting errors', () => {
+    function renderInnerError(error) {
+      return <div>Caught an inner error: {error.message}.</div>;
+    }
+    function renderOuterError(error) {
+      return <div>Caught an outer error: {error.message}.</div>;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary
+        logName="OuterErrorBoundary"
+        renderError={renderOuterError}>
+        <ErrorBoundary
+          logName="InnerErrorBoundary"
+          renderError={renderInnerError}>
+          <BrokenComponentWillUnmount />
+        </ErrorBoundary>
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary
+        logName="OuterErrorBoundary"
+        renderError={renderOuterError}>
+        <ErrorBoundary
+          logName="InnerErrorBoundary"
+          renderError={renderInnerError}
+        />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an inner error: Hello.');
+    expect(log).toEqual([
+      // Update outer boundary
+      'OuterErrorBoundary componentWillReceiveProps',
+      'OuterErrorBoundary componentWillUpdate',
+      'OuterErrorBoundary render success',
+      // Update inner boundary
+      'InnerErrorBoundary componentWillReceiveProps',
+      'InnerErrorBoundary componentWillUpdate',
+      'InnerErrorBoundary render success',
+      // Try unmounting child
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Fiber proceeds with lifecycles despite errors
+      // Inner and outer boundaries have updated in this phase
+      'InnerErrorBoundary componentDidUpdate',
+      'OuterErrorBoundary componentDidUpdate',
+      // Now that commit phase is done, Fiber handles errors
+      // Only inner boundary receives the error:
+      'InnerErrorBoundary componentDidCatch',
+      'InnerErrorBoundary componentWillUpdate',
+      // Render an error now
+      'InnerErrorBoundary render error',
+      // In Fiber, this was a local update to the
+      // inner boundary so only its hook fires
+      'InnerErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual([
+      'OuterErrorBoundary componentWillUnmount',
+      'InnerErrorBoundary componentWillUnmount',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('can recover from error state', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+    // Error boundary doesn't retry by itself:
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    // Force the success path:
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary forceRetry={true}>
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).not.toContain('Caught an error');
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      // Mount children:
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      // Finalize updates:
+      'Normal componentDidMount',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual([
+      'ErrorBoundary componentWillUnmount',
+      'Normal componentWillUnmount',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('can update multiple times in error state', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    ReactDOM.render(<div>Other screen</div>, container);
+    expect(container.textContent).toBe('Other screen');
+
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  // @gate !disableLegacyMode
+  it("doesn't get into inconsistent state during removals", () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenComponentWillUnmount />
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+
+    ReactDOM.render(<ErrorBoundary />, container);
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it("doesn't get into inconsistent state during additions", () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<ErrorBoundary />, container);
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Normal />
+        <BrokenRender />
+        <Normal />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it("doesn't get into inconsistent state during reorders", () => {
+    function getAMixOfNormalAndBrokenRenderElements() {
+      const elements = [];
+      for (let i = 0; i < 100; i++) {
+        elements.push(<Normal key={i} />);
+      }
+      elements.push(<MaybeBrokenRender key={100} />);
+
+      let currentIndex = elements.length;
+      while (0 !== currentIndex) {
+        const randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+        const temporaryValue = elements[currentIndex];
+        elements[currentIndex] = elements[randomIndex];
+        elements[randomIndex] = temporaryValue;
+      }
+      return elements;
+    }
+
+    class MaybeBrokenRender extends React.Component {
+      render() {
+        if (fail) {
+          throw new Error('Hello');
+        }
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let fail = false;
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).not.toContain('Caught an error');
+
+    fail = true;
+    ReactDOM.render(
+      <ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,
+      container,
+    );
+    expect(container.textContent).toBe('Caught an error: Hello.');
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches errors originating downstream', () => {
+    let fail = false;
+    class Stateful extends React.Component {
+      state = {shouldThrow: false};
+
+      render() {
+        if (fail) {
+          log.push('Stateful render [!]');
+          throw new Error('Hello');
+        }
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let statefulInst;
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Stateful ref={inst => (statefulInst = inst)} />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    expect(() => {
+      fail = true;
+      statefulInst.forceUpdate();
+    }).not.toThrow();
+
+    expect(log).toEqual([
+      'Stateful render [!]',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches errors in componentDidMount', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentWillUnmount>
+          <Normal />
+        </BrokenComponentWillUnmount>
+        <BrokenComponentDidMount />
+        <Normal logName="LastChild" />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentWillUnmount constructor',
+      'BrokenComponentWillUnmount componentWillMount',
+      'BrokenComponentWillUnmount render',
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
+      'BrokenComponentDidMount constructor',
+      'BrokenComponentDidMount componentWillMount',
+      'BrokenComponentDidMount render',
+      'LastChild constructor',
+      'LastChild componentWillMount',
+      'LastChild render',
+      // Start flushing didMount queue
+      'Normal componentDidMount',
+      'BrokenComponentWillUnmount componentDidMount',
+      'BrokenComponentDidMount componentDidMount [!]',
+      // Continue despite the error
+      'LastChild componentDidMount',
+      'ErrorBoundary componentDidMount',
+      // Now we are ready to handle the error
+      // Safely unmount every child
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Continue unmounting safely despite any errors
+      'Normal componentWillUnmount',
+      'BrokenComponentDidMount componentWillUnmount',
+      'LastChild componentWillUnmount',
+      // Handle the error
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      // The willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidUpdate',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      // The update has finished
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('catches errors in componentDidUpdate', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentDidUpdate />
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentDidUpdate />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(log).toEqual([
+      'ErrorBoundary componentWillReceiveProps',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render success',
+      'BrokenComponentDidUpdate componentWillReceiveProps',
+      'BrokenComponentDidUpdate componentWillUpdate',
+      'BrokenComponentDidUpdate render',
+      // All lifecycles run
+      'BrokenComponentDidUpdate componentDidUpdate [!]',
+      'ErrorBoundary componentDidUpdate',
+      'BrokenComponentDidUpdate componentWillUnmount',
+      // Then, error is handled
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('propagates errors inside boundary during componentDidMount', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenComponentDidMountErrorBoundary
+          renderError={error => (
+            <div>We should never catch our own error: {error.message}.</div>
+          )}
+        />
+      </ErrorBoundary>,
+      container,
+    );
+    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
+    expect(log).toEqual([
+      'ErrorBoundary constructor',
+      'ErrorBoundary componentWillMount',
+      'ErrorBoundary render success',
+      'BrokenComponentDidMountErrorBoundary constructor',
+      'BrokenComponentDidMountErrorBoundary componentWillMount',
+      'BrokenComponentDidMountErrorBoundary render success',
+      'BrokenComponentDidMountErrorBoundary componentDidMount [!]',
+      // Fiber proceeds with the hooks
+      'ErrorBoundary componentDidMount',
+      'BrokenComponentDidMountErrorBoundary componentWillUnmount',
+      // The error propagates to the higher boundary
+      'ErrorBoundary componentDidCatch',
+      // Fiber retries from the root
+      'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary render error',
+      'ErrorBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('calls componentDidCatch for each error that is captured', () => {
+    function renderUnmountError(error) {
+      return <div>Caught an unmounting error: {error.message}.</div>;
+    }
+    function renderUpdateError(error) {
+      return <div>Caught an updating error: {error.message}.</div>;
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ErrorBoundary logName="OuterErrorBoundary">
+        <ErrorBoundary
+          logName="InnerUnmountBoundary"
+          renderError={renderUnmountError}>
+          <BrokenComponentWillUnmount errorText="E1" />
+          <BrokenComponentWillUnmount errorText="E2" />
+        </ErrorBoundary>
+        <ErrorBoundary
+          logName="InnerUpdateBoundary"
+          renderError={renderUpdateError}>
+          <BrokenComponentDidUpdate errorText="E3" />
+          <BrokenComponentDidUpdate errorText="E4" />
+        </ErrorBoundary>
+      </ErrorBoundary>,
+      container,
+    );
+
+    log.length = 0;
+    ReactDOM.render(
+      <ErrorBoundary logName="OuterErrorBoundary">
+        <ErrorBoundary
+          logName="InnerUnmountBoundary"
+          renderError={renderUnmountError}
+        />
+        <ErrorBoundary
+          logName="InnerUpdateBoundary"
+          renderError={renderUpdateError}>
+          <BrokenComponentDidUpdate errorText="E3" />
+          <BrokenComponentDidUpdate errorText="E4" />
+        </ErrorBoundary>
+      </ErrorBoundary>,
+      container,
+    );
+
+    expect(container.firstChild.textContent).toBe(
+      'Caught an unmounting error: E2.' + 'Caught an updating error: E4.',
+    );
+    expect(log).toEqual([
+      // Begin update phase
+      'OuterErrorBoundary componentWillReceiveProps',
+      'OuterErrorBoundary componentWillUpdate',
+      'OuterErrorBoundary render success',
+      'InnerUnmountBoundary componentWillReceiveProps',
+      'InnerUnmountBoundary componentWillUpdate',
+      'InnerUnmountBoundary render success',
+      'InnerUpdateBoundary componentWillReceiveProps',
+      'InnerUpdateBoundary componentWillUpdate',
+      'InnerUpdateBoundary render success',
+      // First come the updates
+      'BrokenComponentDidUpdate componentWillReceiveProps',
+      'BrokenComponentDidUpdate componentWillUpdate',
+      'BrokenComponentDidUpdate render',
+      'BrokenComponentDidUpdate componentWillReceiveProps',
+      'BrokenComponentDidUpdate componentWillUpdate',
+      'BrokenComponentDidUpdate render',
+      // We're in commit phase now, deleting
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      'BrokenComponentWillUnmount componentWillUnmount [!]',
+      // Continue despite errors, handle them after commit is done
+      'InnerUnmountBoundary componentDidUpdate',
+      // We're still in commit phase, now calling update lifecycles
+      'BrokenComponentDidUpdate componentDidUpdate [!]',
+      // Again, continue despite errors, we'll handle them later
+      'BrokenComponentDidUpdate componentDidUpdate [!]',
+      'InnerUpdateBoundary componentDidUpdate',
+      'OuterErrorBoundary componentDidUpdate',
+      // After the commit phase, attempt to recover from any errors that
+      // were captured
+      'BrokenComponentDidUpdate componentWillUnmount',
+      'BrokenComponentDidUpdate componentWillUnmount',
+      'InnerUnmountBoundary componentDidCatch',
+      'InnerUnmountBoundary componentDidCatch',
+      'InnerUpdateBoundary componentDidCatch',
+      'InnerUpdateBoundary componentDidCatch',
+      'InnerUnmountBoundary componentWillUpdate',
+      'InnerUnmountBoundary render error',
+      'InnerUpdateBoundary componentWillUpdate',
+      'InnerUpdateBoundary render error',
+      'InnerUnmountBoundary componentDidUpdate',
+      'InnerUpdateBoundary componentDidUpdate',
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual([
+      'OuterErrorBoundary componentWillUnmount',
+      'InnerUnmountBoundary componentWillUnmount',
+      'InnerUpdateBoundary componentWillUnmount',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('discards a bad root if the root component fails', async () => {
+    const X = null;
+    const Y = undefined;
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      await act(() => {
+        ReactDOM.render(<X />, container);
+      });
+    }).rejects.toThrow('got: null');
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      await act(() => {
+        ReactDOM.render(<Y />, container);
+      });
+    }).rejects.toThrow('got: undefined');
+  });
+
+  // @gate !disableLegacyMode
+  it('renders empty output if error boundary does not handle the error', async () => {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <div>
+        Sibling
+        <NoopErrorBoundary>
+          <BrokenRender />
+        </NoopErrorBoundary>
+      </div>,
+      container,
+    );
+    assertConsoleErrorDev([
+      'NoopErrorBoundary: Error boundaries should implement getDerivedStateFromError(). ' +
+        'In that method, return a state update to display an error message or fallback UI.\n' +
+        '    in NoopErrorBoundary (at **)',
+    ]);
+    expect(container.firstChild.textContent).toBe('Sibling');
+    expect(log).toEqual([
+      'NoopErrorBoundary constructor',
+      'NoopErrorBoundary componentWillMount',
+      'NoopErrorBoundary render',
+      'BrokenRender constructor',
+      'BrokenRender componentWillMount',
+      'BrokenRender render [!]',
+      // In Fiber, noop error boundaries render null
+      'NoopErrorBoundary componentDidMount',
+      'NoopErrorBoundary componentDidCatch',
+      // Nothing happens.
+    ]);
+
+    log.length = 0;
+    ReactDOM.unmountComponentAtNode(container);
+    expect(log).toEqual(['NoopErrorBoundary componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('passes first error when two errors happen in commit', async () => {
+    const errors = [];
+    class Parent extends React.Component {
+      render() {
+        return <Child />;
+      }
+      componentDidMount() {
+        errors.push('parent sad');
+        throw new Error('parent sad');
+      }
+    }
+    class Child extends React.Component {
+      render() {
+        return <div />;
+      }
+      componentDidMount() {
+        errors.push('child sad');
+        throw new Error('child sad');
+      }
+    }
+
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        // Here, we test the behavior where there is no error boundary and we
+        // delegate to the host root.
+        ReactDOM.render(<Parent />, container);
+      });
+    }).rejects.toThrow(
+      expect.objectContaining({
+        errors: [
+          expect.objectContaining({message: 'child sad'}),
+          expect.objectContaining({message: 'parent sad'}),
+        ],
+      }),
+    );
+
+    expect(errors).toEqual(['child sad', 'parent sad']);
+  });
+
+  // @gate !disableLegacyMode
+  it('propagates uncaught error inside unbatched initial mount', async () => {
+    function Foo() {
+      throw new Error('foo error');
+    }
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.unstable_batchedUpdates(() => {
+          ReactDOM.render(<Foo />, container);
+        });
+      });
+    }).rejects.toThrow('foo error');
+  });
+
+  // @gate !disableLegacyMode
+  it('handles errors that occur in before-mutation commit hook', async () => {
+    const errors = [];
+    class Parent extends React.Component {
+      getSnapshotBeforeUpdate() {
+        errors.push('parent sad');
+        throw new Error('parent sad');
+      }
+      componentDidUpdate() {}
+      render() {
+        return <Child {...this.props} />;
+      }
+    }
+    class Child extends React.Component {
+      getSnapshotBeforeUpdate() {
+        errors.push('child sad');
+        throw new Error('child sad');
+      }
+      componentDidUpdate() {}
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    await act(() => {
+      ReactDOM.render(<Parent value={1} />, container);
+    });
+
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<Parent value={2} />, container);
+      });
+    }).rejects.toThrow(
+      expect.objectContaining({
+        errors: [
+          expect.objectContaining({message: 'child sad'}),
+          expect.objectContaining({message: 'parent sad'}),
+        ],
+      }),
+    );
+
+    expect(errors).toEqual(['child sad', 'parent sad']);
+    // Error should be the first thrown
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactLegacyMount-test.js b/packages/react-dom/src/__tests__/ReactLegacyMount-test.js
new file mode 100644
index 00000000000..d8b23a84444
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyMount-test.js
@@ -0,0 +1,455 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {COMMENT_NODE} = require('react-dom-bindings/src/client/HTMLNodeType');
+
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let waitForAll;
+let assertConsoleErrorDev;
+
+describe('ReactMount', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  describe('unmountComponentAtNode', () => {
+    // @gate !disableLegacyMode
+    it('throws when given a non-node', () => {
+      const nodeArray = document.getElementsByTagName('div');
+      expect(() => {
+        ReactDOM.unmountComponentAtNode(nodeArray);
+      }).toThrowError('Target container is not a DOM element.');
+    });
+
+    // @gate !disableLegacyMode
+    it('returns false on non-React containers', () => {
+      const d = document.createElement('div');
+      d.innerHTML = '<b>hellooo</b>';
+      expect(ReactDOM.unmountComponentAtNode(d)).toBe(false);
+      expect(d.textContent).toBe('hellooo');
+    });
+
+    // @gate !disableLegacyMode
+    it('returns true on React containers', () => {
+      const d = document.createElement('div');
+      ReactDOM.render(<b>hellooo</b>, d);
+      expect(d.textContent).toBe('hellooo');
+      expect(ReactDOM.unmountComponentAtNode(d)).toBe(true);
+      expect(d.textContent).toBe('');
+    });
+  });
+
+  // @gate !disableLegacyMode
+  it('warns when given a factory', () => {
+    class Component extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(Component, container);
+    assertConsoleErrorDev(
+      [
+        'Functions are not valid as a React child. ' +
+          'This may happen if you return Component instead of <Component /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  root.render(Component)',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should render different components in same root', () => {
+    const container = document.createElement('container');
+    document.body.appendChild(container);
+
+    ReactDOM.render(<div />, container);
+    expect(container.firstChild.nodeName).toBe('DIV');
+
+    ReactDOM.render(<span />, container);
+    expect(container.firstChild.nodeName).toBe('SPAN');
+  });
+
+  // @gate !disableLegacyMode
+  it('should unmount and remount if the key changes', () => {
+    const container = document.createElement('container');
+
+    const mockMount = jest.fn();
+    const mockUnmount = jest.fn();
+
+    class Component extends React.Component {
+      componentDidMount = mockMount;
+      componentWillUnmount = mockUnmount;
+      render() {
+        return <span>{this.props.text}</span>;
+      }
+    }
+
+    expect(mockMount).toHaveBeenCalledTimes(0);
+    expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+    ReactDOM.render(<Component text="orange" key="A" />, container);
+    expect(container.firstChild.innerHTML).toBe('orange');
+    expect(mockMount).toHaveBeenCalledTimes(1);
+    expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+    // If we change the key, the component is unmounted and remounted
+    ReactDOM.render(<Component text="green" key="B" />, container);
+    expect(container.firstChild.innerHTML).toBe('green');
+    expect(mockMount).toHaveBeenCalledTimes(2);
+    expect(mockUnmount).toHaveBeenCalledTimes(1);
+
+    // But if we don't change the key, the component instance is reused
+    ReactDOM.render(<Component text="blue" key="B" />, container);
+    expect(container.firstChild.innerHTML).toBe('blue');
+    expect(mockMount).toHaveBeenCalledTimes(2);
+    expect(mockUnmount).toHaveBeenCalledTimes(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('should reuse markup if rendering to the same target twice', () => {
+    const container = document.createElement('container');
+    const instance1 = ReactDOM.render(<div />, container);
+    const instance2 = ReactDOM.render(<div />, container);
+
+    expect(instance1 === instance2).toBe(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not warn if mounting into non-empty node', () => {
+    const container = document.createElement('container');
+    container.innerHTML = '<div></div>';
+
+    ReactDOM.render(<div />, container);
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn when mounting into document.body', () => {
+    const iFrame = document.createElement('iframe');
+    document.body.appendChild(iFrame);
+
+    // HostSingletons make the warning for document.body unecessary
+    ReactDOM.render(<div />, iFrame.contentDocument.body);
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn if render removes React-rendered children', () => {
+    const container = document.createElement('container');
+
+    class Component extends React.Component {
+      render() {
+        return (
+          <div>
+            <div />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<Component />, container);
+
+    // Test that blasting away children throws a warning
+    const rootNode = container.firstChild;
+
+    ReactDOM.render(<span />, rootNode);
+    assertConsoleErrorDev(
+      [
+        '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.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn if the unmounted node was rendered by another copy of React', () => {
+    jest.resetModules();
+    const ReactDOMOther = require('react-dom');
+    const container = document.createElement('div');
+
+    class Component extends React.Component {
+      render() {
+        return (
+          <div>
+            <div />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<Component />, container);
+    // Make sure ReactDOM and ReactDOMOther are different copies
+    expect(ReactDOM).not.toEqual(ReactDOMOther);
+
+    ReactDOMOther.unmountComponentAtNode(container);
+    assertConsoleErrorDev(
+      [
+        "unmountComponentAtNode(): The node you're attempting to unmount " +
+          'was rendered by another copy of React.',
+      ],
+      {withoutStack: true},
+    );
+
+    // Don't throw a warning if the correct React copy unmounts the node
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  // @gate !disableLegacyMode
+  it('passes the correct callback context', () => {
+    const container = document.createElement('div');
+    let calls = 0;
+
+    ReactDOM.render(<div />, container, function () {
+      expect(this.nodeName).toBe('DIV');
+      calls++;
+    });
+
+    // Update, no type change
+    ReactDOM.render(<div />, container, function () {
+      expect(this.nodeName).toBe('DIV');
+      calls++;
+    });
+
+    // Update, type change
+    ReactDOM.render(<span />, container, function () {
+      expect(this.nodeName).toBe('SPAN');
+      calls++;
+    });
+
+    // Batched update, no type change
+    ReactDOM.unstable_batchedUpdates(function () {
+      ReactDOM.render(<span />, container, function () {
+        expect(this.nodeName).toBe('SPAN');
+        calls++;
+      });
+    });
+
+    // Batched update, type change
+    ReactDOM.unstable_batchedUpdates(function () {
+      ReactDOM.render(<article />, container, function () {
+        expect(this.nodeName).toBe('ARTICLE');
+        calls++;
+      });
+    });
+
+    expect(calls).toBe(5);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('initial mount of legacy root is sync inside batchedUpdates, as if it were wrapped in flushSync', () => {
+    const container1 = document.createElement('div');
+    const container2 = document.createElement('div');
+
+    class Foo extends React.Component {
+      state = {active: false};
+      componentDidMount() {
+        this.setState({active: true});
+      }
+      render() {
+        return (
+          <div>{this.props.children + (this.state.active ? '!' : '')}</div>
+        );
+      }
+    }
+
+    ReactDOM.render(<div>1</div>, container1);
+
+    ReactDOM.unstable_batchedUpdates(() => {
+      // Update. Does not flush yet.
+      ReactDOM.render(<div>2</div>, container1);
+      expect(container1.textContent).toEqual('1');
+
+      // Initial mount on another root. Should flush immediately.
+      ReactDOM.render(<Foo>a</Foo>, container2);
+      // The earlier update also flushed, since flushSync flushes all pending
+      // sync work across all roots.
+      expect(container1.textContent).toEqual('2');
+      // Layout updates are also flushed synchronously
+      expect(container2.textContent).toEqual('a!');
+    });
+    expect(container1.textContent).toEqual('2');
+    expect(container2.textContent).toEqual('a!');
+  });
+
+  describe('mount point is a comment node', () => {
+    let containerDiv;
+    let mountPoint;
+
+    beforeEach(() => {
+      containerDiv = document.createElement('div');
+      containerDiv.innerHTML = 'A<!-- react-mount-point-unstable -->B';
+      mountPoint = containerDiv.childNodes[1];
+      expect(mountPoint.nodeType).toBe(COMMENT_NODE);
+    });
+
+    // @gate !disableLegacyMode
+    it('renders at a comment node', () => {
+      function Char(props) {
+        return props.children;
+      }
+      function list(chars) {
+        return chars.split('').map(c => <Char key={c}>{c}</Char>);
+      }
+
+      ReactDOM.render(list('aeiou'), mountPoint);
+      expect(containerDiv.innerHTML).toBe(
+        'Aaeiou<!-- react-mount-point-unstable -->B',
+      );
+
+      ReactDOM.render(list('yea'), mountPoint);
+      expect(containerDiv.innerHTML).toBe(
+        'Ayea<!-- react-mount-point-unstable -->B',
+      );
+
+      ReactDOM.render(list(''), mountPoint);
+      expect(containerDiv.innerHTML).toBe(
+        'A<!-- react-mount-point-unstable -->B',
+      );
+    });
+  });
+
+  // @gate !disableLegacyMode
+  it('clears existing children with legacy API', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = '<div>a</div><div>b</div>';
+    ReactDOM.render(
+      <div>
+        <span>c</span>
+        <span>d</span>
+      </div>,
+      container,
+    );
+    expect(container.textContent).toEqual('cd');
+    ReactDOM.render(
+      <div>
+        <span>d</span>
+        <span>c</span>
+      </div>,
+      container,
+    );
+    await waitForAll([]);
+    expect(container.textContent).toEqual('dc');
+  });
+
+  // @gate !disableLegacyMode
+  it('warns when rendering with legacy API into createRoot() container', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+    ReactDOM.render(<div>Bye</div>, container);
+    assertConsoleErrorDev(
+      [
+        // We care about this warning:
+        'You are calling ReactDOM.render() on a container that was previously ' +
+          'passed to ReactDOMClient.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. ' +
+          '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.',
+      ],
+      {withoutStack: true},
+    );
+    await waitForAll([]);
+    // This works now but we could disallow it:
+    expect(container.textContent).toEqual('Bye');
+  });
+
+  // @gate !disableLegacyMode
+  it('warns when unmounting with legacy API (no previous content)', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+    const unmounted = ReactDOM.unmountComponentAtNode(container);
+    assertConsoleErrorDev(
+      [
+        // We care about this warning:
+        'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
+          'passed to ReactDOMClient.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:
+        '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 order to remove this component.',
+      ],
+      {withoutStack: true},
+    );
+    expect(unmounted).toBe(false);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+    root.unmount();
+    await waitForAll([]);
+    expect(container.textContent).toEqual('');
+  });
+
+  // @gate !disableLegacyMode
+  it('warns when unmounting with legacy API (has previous content)', async () => {
+    const container = document.createElement('div');
+    // Currently createRoot().render() doesn't clear this.
+    container.appendChild(document.createElement('div'));
+    // The rest is the same as test above.
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<div>Hi</div>);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+    const unmounted = ReactDOM.unmountComponentAtNode(container);
+    assertConsoleErrorDev(
+      [
+        'You are calling ReactDOM.unmountComponentAtNode() on a container ' +
+          'that was previously passed to ReactDOMClient.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:
+        '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 order to remove this component.',
+      ],
+      {withoutStack: true},
+    );
+    expect(unmounted).toBe(false);
+    await waitForAll([]);
+    expect(container.textContent).toEqual('Hi');
+    root.unmount();
+    await waitForAll([]);
+    expect(container.textContent).toEqual('');
+  });
+
+  // @gate !disableLegacyMode
+  it('warns when passing legacy container to createRoot()', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<div>Hi</div>, container);
+    ReactDOMClient.createRoot(container);
+    assertConsoleErrorDev(
+      [
+        'You are calling ReactDOMClient.createRoot() on a container that was previously ' +
+          'passed to ReactDOM.render(). This is not supported.',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js b/packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js
new file mode 100644
index 00000000000..5c6eb4e0331
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js
@@ -0,0 +1,29 @@
+let ReactDOM = require('react-dom');
+
+describe('ReactDOMRoot', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    ReactDOM = require('react-dom');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // @gate !disableLegacyMode
+  it('deprecation warning for ReactDOM.render', () => {
+    spyOnDev(console, 'error');
+
+    ReactDOM.render('Hi', container);
+    expect(container.textContent).toEqual('Hi');
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.mock.calls[0][0]).toContain(
+        'ReactDOM.render has not been supported since React 18',
+      );
+    }
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactLegacyUpdates-test.js b/packages/react-dom/src/__tests__/ReactLegacyUpdates-test.js
new file mode 100644
index 00000000000..7de6694c2cd
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyUpdates-test.js
@@ -0,0 +1,1709 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 findDOMNode;
+let act;
+let Scheduler;
+let assertLog;
+let assertConsoleErrorDev;
+
+// Copy of ReactUpdates using ReactDOM.render and ReactDOM.unstable_batchedUpdates.
+// Can be deleted when we remove both.
+describe('ReactLegacyUpdates', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    findDOMNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .findDOMNode;
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should batch state when updating state twice', () => {
+    let updateCount = 0;
+
+    class Component extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
+        updateCount++;
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component />, container);
+    expect(instance.state.x).toBe(0);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.setState({x: 1});
+      instance.setState({x: 2});
+      expect(instance.state.x).toBe(0);
+      expect(updateCount).toBe(0);
+    });
+
+    expect(instance.state.x).toBe(2);
+    expect(updateCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should batch state when updating two different state keys', () => {
+    let updateCount = 0;
+
+    class Component extends React.Component {
+      state = {x: 0, y: 0};
+
+      componentDidUpdate() {
+        updateCount++;
+      }
+
+      render() {
+        return <div>{`(${this.state.x}, ${this.state.y})`}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component />, container);
+    expect(instance.state.x).toBe(0);
+    expect(instance.state.y).toBe(0);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.setState({x: 1});
+      instance.setState({y: 2});
+      expect(instance.state.x).toBe(0);
+      expect(instance.state.y).toBe(0);
+      expect(updateCount).toBe(0);
+    });
+
+    expect(instance.state.x).toBe(1);
+    expect(instance.state.y).toBe(2);
+    expect(updateCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should batch state and props together', () => {
+    let updateCount = 0;
+
+    class Component extends React.Component {
+      state = {y: 0};
+
+      componentDidUpdate() {
+        updateCount++;
+      }
+
+      render() {
+        return <div>{`(${this.props.x}, ${this.state.y})`}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component x={0} />, container);
+    expect(instance.props.x).toBe(0);
+    expect(instance.state.y).toBe(0);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      ReactDOM.render(<Component x={1} />, container);
+      instance.setState({y: 2});
+      expect(instance.props.x).toBe(0);
+      expect(instance.state.y).toBe(0);
+      expect(updateCount).toBe(0);
+    });
+
+    expect(instance.props.x).toBe(1);
+    expect(instance.state.y).toBe(2);
+    expect(updateCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should batch parent/child state updates together', () => {
+    let parentUpdateCount = 0;
+
+    class Parent extends React.Component {
+      state = {x: 0};
+      childRef = React.createRef();
+
+      componentDidUpdate() {
+        parentUpdateCount++;
+      }
+
+      render() {
+        return (
+          <div>
+            <Child ref={this.childRef} x={this.state.x} />
+          </div>
+        );
+      }
+    }
+
+    let childUpdateCount = 0;
+
+    class Child extends React.Component {
+      state = {y: 0};
+
+      componentDidUpdate() {
+        childUpdateCount++;
+      }
+
+      render() {
+        return <div>{this.props.x + this.state.y}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Parent />, container);
+    const child = instance.childRef.current;
+    expect(instance.state.x).toBe(0);
+    expect(child.state.y).toBe(0);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.setState({x: 1});
+      child.setState({y: 2});
+      expect(instance.state.x).toBe(0);
+      expect(child.state.y).toBe(0);
+      expect(parentUpdateCount).toBe(0);
+      expect(childUpdateCount).toBe(0);
+    });
+
+    expect(instance.state.x).toBe(1);
+    expect(child.state.y).toBe(2);
+    expect(parentUpdateCount).toBe(1);
+    expect(childUpdateCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should batch child/parent state updates together', () => {
+    let parentUpdateCount = 0;
+
+    class Parent extends React.Component {
+      state = {x: 0};
+      childRef = React.createRef();
+
+      componentDidUpdate() {
+        parentUpdateCount++;
+      }
+
+      render() {
+        return (
+          <div>
+            <Child ref={this.childRef} x={this.state.x} />
+          </div>
+        );
+      }
+    }
+
+    let childUpdateCount = 0;
+
+    class Child extends React.Component {
+      state = {y: 0};
+
+      componentDidUpdate() {
+        childUpdateCount++;
+      }
+
+      render() {
+        return <div>{this.props.x + this.state.y}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Parent />, container);
+    const child = instance.childRef.current;
+    expect(instance.state.x).toBe(0);
+    expect(child.state.y).toBe(0);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      child.setState({y: 2});
+      instance.setState({x: 1});
+      expect(instance.state.x).toBe(0);
+      expect(child.state.y).toBe(0);
+      expect(parentUpdateCount).toBe(0);
+      expect(childUpdateCount).toBe(0);
+    });
+
+    expect(instance.state.x).toBe(1);
+    expect(child.state.y).toBe(2);
+    expect(parentUpdateCount).toBe(1);
+
+    // Batching reduces the number of updates here to 1.
+    expect(childUpdateCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should support chained state updates', () => {
+    let updateCount = 0;
+
+    class Component extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
+        updateCount++;
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component />, container);
+    expect(instance.state.x).toBe(0);
+
+    let innerCallbackRun = false;
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.setState({x: 1}, function () {
+        instance.setState({x: 2}, function () {
+          expect(this).toBe(instance);
+          innerCallbackRun = true;
+          expect(instance.state.x).toBe(2);
+          expect(updateCount).toBe(2);
+        });
+        expect(instance.state.x).toBe(1);
+        expect(updateCount).toBe(1);
+      });
+      expect(instance.state.x).toBe(0);
+      expect(updateCount).toBe(0);
+    });
+
+    expect(innerCallbackRun).toBeTruthy();
+    expect(instance.state.x).toBe(2);
+    expect(updateCount).toBe(2);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should batch forceUpdate together', () => {
+    let shouldUpdateCount = 0;
+    let updateCount = 0;
+
+    class Component extends React.Component {
+      state = {x: 0};
+
+      shouldComponentUpdate() {
+        shouldUpdateCount++;
+      }
+
+      componentDidUpdate() {
+        updateCount++;
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Component />, container);
+    expect(instance.state.x).toBe(0);
+
+    let callbacksRun = 0;
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.setState({x: 1}, function () {
+        callbacksRun++;
+      });
+      instance.forceUpdate(function () {
+        callbacksRun++;
+      });
+      expect(instance.state.x).toBe(0);
+      expect(updateCount).toBe(0);
+    });
+
+    expect(callbacksRun).toBe(2);
+    // shouldComponentUpdate shouldn't be called since we're forcing
+    expect(shouldUpdateCount).toBe(0);
+    expect(instance.state.x).toBe(1);
+    expect(updateCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('should update children even if parent blocks updates', () => {
+    let parentRenderCount = 0;
+    let childRenderCount = 0;
+
+    class Parent extends React.Component {
+      childRef = React.createRef();
+
+      shouldComponentUpdate() {
+        return false;
+      }
+
+      render() {
+        parentRenderCount++;
+        return <Child ref={this.childRef} />;
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
+        childRenderCount++;
+        return <div />;
+      }
+    }
+
+    expect(parentRenderCount).toBe(0);
+    expect(childRenderCount).toBe(0);
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Parent />, container);
+
+    expect(parentRenderCount).toBe(1);
+    expect(childRenderCount).toBe(1);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.setState({x: 1});
+    });
+
+    expect(parentRenderCount).toBe(1);
+    expect(childRenderCount).toBe(1);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      instance.childRef.current.setState({x: 1});
+    });
+
+    expect(parentRenderCount).toBe(1);
+    expect(childRenderCount).toBe(2);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not reconcile children passed via props', () => {
+    let numMiddleRenders = 0;
+    let numBottomRenders = 0;
+
+    class Top extends React.Component {
+      render() {
+        return (
+          <Middle>
+            <Bottom />
+          </Middle>
+        );
+      }
+    }
+
+    class Middle extends React.Component {
+      componentDidMount() {
+        this.forceUpdate();
+      }
+
+      render() {
+        numMiddleRenders++;
+        return React.Children.only(this.props.children);
+      }
+    }
+
+    class Bottom extends React.Component {
+      render() {
+        numBottomRenders++;
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Top />, container);
+    expect(numMiddleRenders).toBe(2);
+    expect(numBottomRenders).toBe(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('should flow updates correctly', () => {
+    let willUpdates = [];
+    let didUpdates = [];
+
+    const UpdateLoggingMixin = {
+      UNSAFE_componentWillUpdate: function () {
+        willUpdates.push(this.constructor.displayName);
+      },
+      componentDidUpdate: function () {
+        didUpdates.push(this.constructor.displayName);
+      },
+    };
+
+    class Box extends React.Component {
+      boxDivRef = React.createRef();
+
+      render() {
+        return <div ref={this.boxDivRef}>{this.props.children}</div>;
+      }
+    }
+    Object.assign(Box.prototype, UpdateLoggingMixin);
+
+    class Child extends React.Component {
+      spanRef = React.createRef();
+
+      render() {
+        return <span ref={this.spanRef}>child</span>;
+      }
+    }
+    Object.assign(Child.prototype, UpdateLoggingMixin);
+
+    class Switcher extends React.Component {
+      state = {tabKey: 'hello'};
+      boxRef = React.createRef();
+      switcherDivRef = React.createRef();
+      render() {
+        const child = this.props.children;
+
+        return (
+          <Box ref={this.boxRef}>
+            <div
+              ref={this.switcherDivRef}
+              style={{
+                display: this.state.tabKey === child.key ? '' : 'none',
+              }}>
+              {child}
+            </div>
+          </Box>
+        );
+      }
+    }
+    Object.assign(Switcher.prototype, UpdateLoggingMixin);
+
+    class App extends React.Component {
+      switcherRef = React.createRef();
+      childRef = React.createRef();
+
+      render() {
+        return (
+          <Switcher ref={this.switcherRef}>
+            <Child key="hello" ref={this.childRef} />
+          </Switcher>
+        );
+      }
+    }
+    Object.assign(App.prototype, UpdateLoggingMixin);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.render(<App />, container);
+
+    function expectUpdates(desiredWillUpdates, desiredDidUpdates) {
+      let i;
+      for (i = 0; i < desiredWillUpdates; i++) {
+        expect(willUpdates).toContain(desiredWillUpdates[i]);
+      }
+      for (i = 0; i < desiredDidUpdates; i++) {
+        expect(didUpdates).toContain(desiredDidUpdates[i]);
+      }
+      willUpdates = [];
+      didUpdates = [];
+    }
+
+    function triggerUpdate(c) {
+      c.setState({x: 1});
+    }
+
+    function testUpdates(components, desiredWillUpdates, desiredDidUpdates) {
+      let i;
+
+      ReactDOM.unstable_batchedUpdates(function () {
+        for (i = 0; i < components.length; i++) {
+          triggerUpdate(components[i]);
+        }
+      });
+
+      expectUpdates(desiredWillUpdates, desiredDidUpdates);
+
+      // Try them in reverse order
+
+      ReactDOM.unstable_batchedUpdates(function () {
+        for (i = components.length - 1; i >= 0; i--) {
+          triggerUpdate(components[i]);
+        }
+      });
+
+      expectUpdates(desiredWillUpdates, desiredDidUpdates);
+    }
+    testUpdates(
+      [root.switcherRef.current.boxRef.current, root.switcherRef.current],
+      // Owner-child relationships have inverse will and did
+      ['Switcher', 'Box'],
+      ['Box', 'Switcher'],
+    );
+
+    testUpdates(
+      [root.childRef.current, root.switcherRef.current.boxRef.current],
+      // Not owner-child so reconcile independently
+      ['Box', 'Child'],
+      ['Box', 'Child'],
+    );
+
+    testUpdates(
+      [root.childRef.current, root.switcherRef.current],
+      // Switcher owns Box and Child, Box does not own Child
+      ['Switcher', 'Box', 'Child'],
+      ['Box', 'Switcher', 'Child'],
+    );
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('should queue mount-ready handlers across different roots', () => {
+    // We'll define two components A and B, then update both of them. When A's
+    // componentDidUpdate handlers is called, B's DOM should already have been
+    // updated.
+
+    const bContainer = document.createElement('div');
+
+    let b;
+
+    let aUpdated = false;
+
+    class A extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
+        expect(findDOMNode(b).textContent).toBe('B1');
+        aUpdated = true;
+      }
+
+      render() {
+        let portal = null;
+        // If we're using Fiber, we use Portals instead to achieve this.
+        portal = ReactDOM.createPortal(<B ref={n => (b = n)} />, bContainer);
+        return (
+          <div>
+            A{this.state.x}
+            {portal}
+          </div>
+        );
+      }
+    }
+
+    class B extends React.Component {
+      state = {x: 0};
+
+      render() {
+        return <div>B{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const a = ReactDOM.render(<A />, container);
+    ReactDOM.unstable_batchedUpdates(function () {
+      a.setState({x: 1});
+      b.setState({x: 1});
+    });
+
+    expect(aUpdated).toBe(true);
+  });
+
+  // @gate !disableLegacyMode
+  it('should flush updates in the correct order', () => {
+    const updates = [];
+
+    class Outer extends React.Component {
+      state = {x: 0};
+      innerRef = React.createRef();
+
+      render() {
+        updates.push('Outer-render-' + this.state.x);
+        return (
+          <div>
+            <Inner x={this.state.x} ref={this.innerRef} />
+          </div>
+        );
+      }
+
+      componentDidUpdate() {
+        const x = this.state.x;
+        updates.push('Outer-didUpdate-' + x);
+        updates.push('Inner-setState-' + x);
+        this.innerRef.current.setState({x: x}, function () {
+          updates.push('Inner-callback-' + x);
+        });
+      }
+    }
+
+    class Inner extends React.Component {
+      state = {x: 0};
+
+      render() {
+        updates.push('Inner-render-' + this.props.x + '-' + this.state.x);
+        return <div />;
+      }
+
+      componentDidUpdate() {
+        updates.push('Inner-didUpdate-' + this.props.x + '-' + this.state.x);
+      }
+    }
+
+    const container = document.createElement('div');
+    const instance = ReactDOM.render(<Outer />, container);
+
+    updates.push('Outer-setState-1');
+    instance.setState({x: 1}, function () {
+      updates.push('Outer-callback-1');
+      updates.push('Outer-setState-2');
+      instance.setState({x: 2}, function () {
+        updates.push('Outer-callback-2');
+      });
+    });
+
+    expect(updates).toEqual([
+      'Outer-render-0',
+      'Inner-render-0-0',
+
+      'Outer-setState-1',
+      'Outer-render-1',
+      'Inner-render-1-0',
+      'Inner-didUpdate-1-0',
+      'Outer-didUpdate-1',
+      // Happens in a batch, so don't re-render yet
+      'Inner-setState-1',
+      'Outer-callback-1',
+
+      // Happens in a batch
+      'Outer-setState-2',
+
+      // Flush batched updates all at once
+      'Outer-render-2',
+      'Inner-render-2-1',
+      'Inner-didUpdate-2-1',
+      'Inner-callback-1',
+      'Outer-didUpdate-2',
+      'Inner-setState-2',
+      'Outer-callback-2',
+      'Inner-render-2-2',
+      'Inner-didUpdate-2-2',
+      'Inner-callback-2',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('should flush updates in the correct order across roots', () => {
+    const instances = [];
+    const updates = [];
+
+    class MockComponent extends React.Component {
+      render() {
+        updates.push(this.props.depth);
+        return <div />;
+      }
+
+      componentDidMount() {
+        instances.push(this);
+        if (this.props.depth < this.props.count) {
+          ReactDOM.render(
+            <MockComponent
+              depth={this.props.depth + 1}
+              count={this.props.count}
+            />,
+            findDOMNode(this),
+          );
+        }
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<MockComponent depth={0} count={2} />, container);
+
+    expect(updates).toEqual([0, 1, 2]);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      // Simulate update on each component from top to bottom.
+      instances.forEach(function (instance) {
+        instance.forceUpdate();
+      });
+    });
+
+    expect(updates).toEqual([0, 1, 2, 0, 1, 2]);
+  });
+
+  // @gate !disableLegacyMode
+  it('should queue nested updates', () => {
+    // See https://github.com/facebook/react/issues/1147
+
+    class X extends React.Component {
+      state = {s: 0};
+
+      render() {
+        if (this.state.s === 0) {
+          return (
+            <div>
+              <span>0</span>
+            </div>
+          );
+        } else {
+          return <div>1</div>;
+        }
+      }
+
+      go = () => {
+        this.setState({s: 1});
+        this.setState({s: 0});
+        this.setState({s: 1});
+      };
+    }
+
+    class Y extends React.Component {
+      render() {
+        return (
+          <div>
+            <Z />
+          </div>
+        );
+      }
+    }
+
+    class Z extends React.Component {
+      render() {
+        return <div />;
+      }
+
+      UNSAFE_componentWillUpdate() {
+        x.go();
+      }
+    }
+
+    let container = document.createElement('div');
+    const x = ReactDOM.render(<X />, container);
+    container = document.createElement('div');
+    const y = ReactDOM.render(<Y />, container);
+    expect(findDOMNode(x).textContent).toBe('0');
+
+    y.forceUpdate();
+    expect(findDOMNode(x).textContent).toBe('1');
+  });
+
+  // @gate !disableLegacyMode
+  it('should queue updates from during mount', () => {
+    // See https://github.com/facebook/react/issues/1353
+    let a;
+
+    class A extends React.Component {
+      state = {x: 0};
+
+      UNSAFE_componentWillMount() {
+        a = this;
+      }
+
+      render() {
+        return <div>A{this.state.x}</div>;
+      }
+    }
+
+    class B extends React.Component {
+      UNSAFE_componentWillMount() {
+        a.setState({x: 1});
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      const container = document.createElement('div');
+
+      ReactDOM.render(
+        <div>
+          <A />
+          <B />
+        </div>,
+        container,
+      );
+    });
+
+    expect(a.state.x).toBe(1);
+    expect(findDOMNode(a).textContent).toBe('A1');
+  });
+
+  // @gate !disableLegacyMode
+  it('calls componentWillReceiveProps setState callback properly', () => {
+    let callbackCount = 0;
+
+    class A extends React.Component {
+      state = {x: this.props.x};
+
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        const newX = nextProps.x;
+        this.setState({x: newX}, function () {
+          // State should have updated by the time this callback gets called
+          expect(this.state.x).toBe(newX);
+          callbackCount++;
+        });
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<A x={1} />, container);
+    ReactDOM.render(<A x={2} />, container);
+    expect(callbackCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode && classic
+  it('does not call render after a component as been deleted', () => {
+    let renderCount = 0;
+    let componentB = null;
+
+    class B extends React.Component {
+      state = {updates: 0};
+
+      componentDidMount() {
+        componentB = this;
+      }
+
+      render() {
+        renderCount++;
+        return <div />;
+      }
+    }
+
+    class A extends React.Component {
+      state = {showB: true};
+
+      render() {
+        return this.state.showB ? <B /> : <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const component = ReactDOM.render(<A />, container);
+
+    ReactDOM.unstable_batchedUpdates(function () {
+      // B will have scheduled an update but the batching should ensure that its
+      // update never fires.
+      componentB.setState({updates: 1});
+      component.setState({showB: false});
+    });
+
+    expect(renderCount).toBe(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('throws in setState if the update callback is not a function', async () => {
+    function Foo() {
+      this.a = 1;
+      this.b = 2;
+    }
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    let container = document.createElement('div');
+    let component = ReactDOM.render(<A />, container);
+
+    await expect(async () => {
+      await act(() => {
+        component.setState({}, 'no');
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. ' +
+        'Instead received: no',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be ' +
+          'a function. Instead received: no.',
+      ],
+      {withoutStack: true},
+    );
+
+    container = document.createElement('div');
+    component = ReactDOM.render(<A />, container);
+    await expect(async () => {
+      await act(() => {
+        component.setState({}, {foo: 'bar'});
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. ' +
+          "Instead received: { foo: 'bar' }.",
+      ],
+      {withoutStack: true},
+    );
+    // Make sure the warning is deduplicated and doesn't fire again
+    container = document.createElement('div');
+    component = ReactDOM.render(<A />, container);
+    await expect(async () => {
+      await act(() => {
+        component.setState({}, new Foo());
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('throws in forceUpdate if the update callback is not a function', async () => {
+    function Foo() {
+      this.a = 1;
+      this.b = 2;
+    }
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    let container = document.createElement('div');
+    let component = ReactDOM.render(<A />, container);
+
+    await expect(async () => {
+      await act(() => {
+        component.forceUpdate('no');
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: no',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. ' +
+          'Instead received: no.',
+      ],
+      {withoutStack: true},
+    );
+    container = document.createElement('div');
+    component = ReactDOM.render(<A />, container);
+    await expect(async () => {
+      await act(() => {
+        component.forceUpdate({foo: 'bar'});
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be a function. ' +
+          "Instead received: { foo: 'bar' }.",
+      ],
+      {withoutStack: true},
+    );
+    // Make sure the warning is deduplicated and doesn't fire again
+    container = document.createElement('div');
+    component = ReactDOM.render(<A />, container);
+    await expect(async () => {
+      await act(() => {
+        component.forceUpdate(new Foo());
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('does not update one component twice in a batch (#2410)', () => {
+    class Parent extends React.Component {
+      childRef = React.createRef();
+
+      getChild = () => {
+        return this.childRef.current;
+      };
+
+      render() {
+        return <Child ref={this.childRef} />;
+      }
+    }
+
+    let renderCount = 0;
+    let postRenderCount = 0;
+    let once = false;
+
+    class Child extends React.Component {
+      state = {updated: false};
+
+      UNSAFE_componentWillUpdate() {
+        if (!once) {
+          once = true;
+          this.setState({updated: true});
+        }
+      }
+
+      componentDidMount() {
+        expect(renderCount).toBe(postRenderCount + 1);
+        postRenderCount++;
+      }
+
+      componentDidUpdate() {
+        expect(renderCount).toBe(postRenderCount + 1);
+        postRenderCount++;
+      }
+
+      render() {
+        expect(renderCount).toBe(postRenderCount);
+        renderCount++;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const parent = ReactDOM.render(<Parent />, container);
+    const child = parent.getChild();
+    ReactDOM.unstable_batchedUpdates(function () {
+      parent.forceUpdate();
+      child.forceUpdate();
+    });
+  });
+
+  // @gate !disableLegacyMode
+  it('does not update one component twice in a batch (#6371)', () => {
+    let callbacks = [];
+    function emitChange() {
+      callbacks.forEach(c => c());
+    }
+
+    class App extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {showChild: true};
+      }
+      componentDidMount() {
+        this.setState({showChild: false});
+      }
+      render() {
+        return (
+          <div>
+            <ForceUpdatesOnChange />
+            {this.state.showChild && <EmitsChangeOnUnmount />}
+          </div>
+        );
+      }
+    }
+
+    class EmitsChangeOnUnmount extends React.Component {
+      componentWillUnmount() {
+        emitChange();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    class ForceUpdatesOnChange extends React.Component {
+      componentDidMount() {
+        this.onChange = () => this.forceUpdate();
+        this.onChange();
+        callbacks.push(this.onChange);
+      }
+      componentWillUnmount() {
+        callbacks = callbacks.filter(c => c !== this.onChange);
+      }
+      render() {
+        return <div key={Math.random()} onClick={function () {}} />;
+      }
+    }
+
+    ReactDOM.render(<App />, document.createElement('div'));
+  });
+
+  it('unstable_batchedUpdates should return value from a callback', () => {
+    const result = ReactDOM.unstable_batchedUpdates(function () {
+      return 42;
+    });
+    expect(result).toEqual(42);
+  });
+
+  // @gate !disableLegacyMode
+  it('unmounts and remounts a root in the same batch', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<span>a</span>, container);
+    ReactDOM.unstable_batchedUpdates(function () {
+      ReactDOM.unmountComponentAtNode(container);
+      ReactDOM.render(<span>b</span>, container);
+    });
+    expect(container.textContent).toBe('b');
+  });
+
+  // @gate !disableLegacyMode
+  it('handles reentrant mounting in synchronous mode', () => {
+    let mounts = 0;
+    class Editor extends React.Component {
+      render() {
+        return <div>{this.props.text}</div>;
+      }
+      componentDidMount() {
+        mounts++;
+        // This should be called only once but we guard just in case.
+        if (!this.props.rendered) {
+          this.props.onChange({rendered: true});
+        }
+      }
+    }
+
+    const container = document.createElement('div');
+    function render() {
+      ReactDOM.render(
+        <Editor
+          onChange={newProps => {
+            props = {...props, ...newProps};
+            render();
+          }}
+          {...props}
+        />,
+        container,
+      );
+    }
+
+    let props = {text: 'hello', rendered: false};
+    render();
+    props = {...props, text: 'goodbye'};
+    render();
+    expect(container.textContent).toBe('goodbye');
+    expect(mounts).toBe(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('mounts and unmounts are sync even in a batch', () => {
+    const ops = [];
+    const container = document.createElement('div');
+    ReactDOM.unstable_batchedUpdates(() => {
+      ReactDOM.render(<div>Hello</div>, container);
+      ops.push(container.textContent);
+      ReactDOM.unmountComponentAtNode(container);
+      ops.push(container.textContent);
+    });
+    expect(ops).toEqual(['Hello', '']);
+  });
+
+  // @gate !disableLegacyMode
+  it(
+    'in legacy mode, updates in componentWillUpdate and componentDidUpdate ' +
+      'should both flush in the immediately subsequent commit',
+    () => {
+      const ops = [];
+      class Foo extends React.Component {
+        state = {a: false, b: false};
+        UNSAFE_componentWillUpdate(_, nextState) {
+          if (!nextState.a) {
+            this.setState({a: true});
+          }
+        }
+        componentDidUpdate() {
+          ops.push('Foo updated');
+          if (!this.state.b) {
+            this.setState({b: true});
+          }
+        }
+        render() {
+          ops.push(`a: ${this.state.a}, b: ${this.state.b}`);
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      // Mount
+      ReactDOM.render(<Foo />, container);
+      // Root update
+      ReactDOM.render(<Foo />, container);
+      expect(ops).toEqual([
+        // Mount
+        'a: false, b: false',
+        // Root update
+        'a: false, b: false',
+        'Foo updated',
+        // Subsequent update (both a and b should have flushed)
+        'a: true, b: true',
+        'Foo updated',
+        // There should not be any additional updates
+      ]);
+    },
+  );
+
+  // @gate !disableLegacyMode
+  it(
+    'in legacy mode, updates in componentWillUpdate and componentDidUpdate ' +
+      '(on a sibling) should both flush in the immediately subsequent commit',
+    () => {
+      const ops = [];
+      class Foo extends React.Component {
+        state = {a: false};
+        UNSAFE_componentWillUpdate(_, nextState) {
+          if (!nextState.a) {
+            this.setState({a: true});
+          }
+        }
+        componentDidUpdate() {
+          ops.push('Foo updated');
+        }
+        render() {
+          ops.push(`a: ${this.state.a}`);
+          return null;
+        }
+      }
+
+      class Bar extends React.Component {
+        state = {b: false};
+        componentDidUpdate() {
+          ops.push('Bar updated');
+          if (!this.state.b) {
+            this.setState({b: true});
+          }
+        }
+        render() {
+          ops.push(`b: ${this.state.b}`);
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      // Mount
+      ReactDOM.render(
+        <div>
+          <Foo />
+          <Bar />
+        </div>,
+        container,
+      );
+      // Root update
+      ReactDOM.render(
+        <div>
+          <Foo />
+          <Bar />
+        </div>,
+        container,
+      );
+      expect(ops).toEqual([
+        // Mount
+        'a: false',
+        'b: false',
+        // Root update
+        'a: false',
+        'b: false',
+        'Foo updated',
+        'Bar updated',
+        // Subsequent update (both a and b should have flushed)
+        'a: true',
+        'b: true',
+        'Foo updated',
+        'Bar updated',
+        // There should not be any additional updates
+      ]);
+    },
+  );
+
+  // @gate !disableLegacyMode
+  it('uses correct base state for setState inside render phase', () => {
+    const ops = [];
+
+    class Foo extends React.Component {
+      state = {step: 0};
+      render() {
+        const memoizedStep = this.state.step;
+        this.setState(baseState => {
+          const baseStep = baseState.step;
+          ops.push(`base: ${baseStep}, memoized: ${memoizedStep}`);
+          return baseStep === 0 ? {step: 1} : null;
+        });
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Foo />, container);
+    assertConsoleErrorDev([
+      'Cannot update during an existing state transition (such as within `render`). ' +
+        'Render methods should be a pure function of props and state.\n' +
+        '    in Foo (at **)',
+    ]);
+    expect(ops).toEqual(['base: 0, memoized: 0', 'base: 1, memoized: 1']);
+  });
+
+  // @gate !disableLegacyMode
+  it('does not re-render if state update is null', () => {
+    const container = document.createElement('div');
+
+    let instance;
+    let ops = [];
+    class Foo extends React.Component {
+      render() {
+        instance = this;
+        ops.push('render');
+        return <div />;
+      }
+    }
+    ReactDOM.render(<Foo />, container);
+
+    ops = [];
+    instance.setState(() => null);
+    expect(ops).toEqual([]);
+  });
+
+  // Will change once we switch to async by default
+  // @gate !disableLegacyMode
+  it('synchronously renders hidden subtrees', () => {
+    const container = document.createElement('div');
+    let ops = [];
+
+    function Baz() {
+      ops.push('Baz');
+      return null;
+    }
+
+    function Bar() {
+      ops.push('Bar');
+      return null;
+    }
+
+    function Foo() {
+      ops.push('Foo');
+      return (
+        <div>
+          <div hidden={true}>
+            <Bar />
+          </div>
+          <Baz />
+        </div>
+      );
+    }
+
+    // Mount
+    ReactDOM.render(<Foo />, container);
+    expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
+    ops = [];
+
+    // Update
+    ReactDOM.render(<Foo />, container);
+    expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
+  });
+
+  // @gate !disableLegacyMode
+  it('can render ridiculously large number of roots without triggering infinite update loop error', () => {
+    class Foo extends React.Component {
+      componentDidMount() {
+        const limit = 1200;
+        for (let i = 0; i < limit; i++) {
+          if (i < limit - 1) {
+            ReactDOM.render(<div />, document.createElement('div'));
+          } else {
+            ReactDOM.render(<div />, document.createElement('div'), () => {
+              // The "nested update limit" error isn't thrown until setState
+              this.setState({});
+            });
+          }
+        }
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Foo />, container);
+  });
+
+  // @gate !disableLegacyMode
+  it('resets the update counter for unrelated updates', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+
+    class EventuallyTerminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      componentDidUpdate() {
+        if (this.state.step < limit) {
+          this.setState({step: this.state.step + 1});
+        }
+      }
+      render() {
+        return this.state.step;
+      }
+    }
+
+    let limit = 55;
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<EventuallyTerminating ref={ref} />, container);
+      });
+    }).rejects.toThrow('Maximum');
+
+    // Verify that we don't go over the limit if these updates are unrelated.
+    limit -= 10;
+    ReactDOM.render(<EventuallyTerminating ref={ref} />, container);
+    expect(container.textContent).toBe(limit.toString());
+    ref.current.setState({step: 0});
+    expect(container.textContent).toBe(limit.toString());
+    ref.current.setState({step: 0});
+    expect(container.textContent).toBe(limit.toString());
+
+    limit += 10;
+    await expect(async () => {
+      await act(() => {
+        ref.current.setState({step: 0});
+      });
+    }).rejects.toThrow('Maximum');
+    expect(ref.current).toBe(null);
+  });
+
+  // @gate !disableLegacyMode
+  it('does not fall into an infinite update loop', async () => {
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      UNSAFE_componentWillUpdate() {
+        this.setState({step: 2});
+      }
+      render() {
+        return (
+          <div>
+            Hello {this.props.name}
+            {this.state.step}
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<NonTerminating />, container);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  // @gate !disableLegacyMode
+  it('does not fall into an infinite update loop with useLayoutEffect', async () => {
+    function NonTerminating() {
+      const [step, setStep] = React.useState(0);
+      React.useLayoutEffect(() => {
+        setStep(x => x + 1);
+      });
+      return step;
+    }
+
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<NonTerminating />, container);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  // @gate !disableLegacyMode
+  it('can recover after falling into an infinite update loop', async () => {
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      componentDidUpdate() {
+        this.setState({step: 2});
+      }
+      render() {
+        return this.state.step;
+      }
+    }
+
+    class Terminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      render() {
+        return this.state.step;
+      }
+    }
+
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<NonTerminating />, container);
+      });
+    }).rejects.toThrow('Maximum');
+
+    ReactDOM.render(<Terminating />, container);
+    expect(container.textContent).toBe('1');
+
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<NonTerminating />, container);
+      });
+    }).rejects.toThrow('Maximum');
+
+    ReactDOM.render(<Terminating />, container);
+    expect(container.textContent).toBe('1');
+  });
+
+  // @gate !disableLegacyMode
+  it('does not fall into mutually recursive infinite update loop with same container', async () => {
+    // Note: this test would fail if there were two or more different roots.
+
+    class A extends React.Component {
+      componentDidMount() {
+        ReactDOM.render(<B />, container);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    class B extends React.Component {
+      componentDidMount() {
+        ReactDOM.render(<A />, container);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<A />, container);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  // @gate !disableLegacyMode
+  it('does not fall into an infinite error loop', async () => {
+    function BadRender() {
+      throw new Error('error');
+    }
+
+    class ErrorBoundary extends React.Component {
+      componentDidCatch() {
+        // Schedule a no-op state update to avoid triggering a DEV warning in the test.
+        this.setState({});
+
+        this.props.parent.remount();
+      }
+      render() {
+        return <BadRender />;
+      }
+    }
+
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+      remount() {
+        this.setState(state => ({step: state.step + 1}));
+      }
+      render() {
+        return <ErrorBoundary key={this.state.step} parent={this} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.render(<NonTerminating />, container);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  // @gate !disableLegacyMode
+  it('can schedule ridiculously many updates within the same batch without triggering a maximum update error', () => {
+    const subscribers = [];
+
+    class Child extends React.Component {
+      state = {value: 'initial'};
+      componentDidMount() {
+        subscribers.push(this);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    class App extends React.Component {
+      render() {
+        const children = [];
+        for (let i = 0; i < 1200; i++) {
+          children.push(<Child key={i} />);
+        }
+        return children;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<App />, container);
+
+    ReactDOM.unstable_batchedUpdates(() => {
+      subscribers.forEach(s => {
+        s.setState({value: 'update'});
+      });
+    });
+  });
+
+  // TODO: Replace this branch with @gate pragmas
+  if (__DEV__) {
+    // @gate !disableLegacyMode
+    it('can have nested updates if they do not cross the limit', async () => {
+      let _setStep;
+      const LIMIT = 50;
+
+      function Terminating() {
+        const [step, setStep] = React.useState(0);
+        _setStep = setStep;
+        React.useEffect(() => {
+          if (step < LIMIT) {
+            setStep(x => x + 1);
+          }
+        });
+        Scheduler.log(step);
+        return step;
+      }
+
+      const container = document.createElement('div');
+      await act(() => {
+        ReactDOM.render(<Terminating />, container);
+      });
+      assertLog(Array.from({length: LIMIT + 1}, (_, k) => k));
+      expect(container.textContent).toBe('50');
+      await act(() => {
+        _setStep(0);
+      });
+      expect(container.textContent).toBe('50');
+    });
+
+    // @gate !disableLegacyMode
+    it('can have many updates inside useEffect without triggering a warning', async () => {
+      function Terminating() {
+        const [step, setStep] = React.useState(0);
+        React.useEffect(() => {
+          for (let i = 0; i < 1000; i++) {
+            setStep(x => x + 1);
+          }
+          Scheduler.log('Done');
+        }, []);
+        return step;
+      }
+
+      const container = document.createElement('div');
+      await act(() => {
+        ReactDOM.render(<Terminating />, container);
+      });
+
+      assertLog(['Done']);
+      expect(container.textContent).toBe('1000');
+    });
+  }
+});
diff --git a/packages/react-dom/src/__tests__/ReactMockedComponent-test.js b/packages/react-dom/src/__tests__/ReactMockedComponent-test.js
new file mode 100644
index 00000000000..0e286ba8931
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactMockedComponent-test.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+let MockedComponent;
+let ReactDOMServer;
+
+describe('ReactMockedComponent', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+
+    MockedComponent = class extends React.Component {
+      render() {
+        throw new Error('Should not get here.');
+      }
+    };
+    // This is close enough to what a Jest mock would give us.
+    MockedComponent.prototype.render = jest.fn();
+  });
+
+  it('should allow a mocked component to be rendered', async () => {
+    const container = document.createElement('container');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<MockedComponent />);
+    });
+  });
+
+  it('should allow a mocked component to be updated in dev', async () => {
+    const container = document.createElement('container');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<MockedComponent />);
+    });
+    await act(() => {
+      root.render(<MockedComponent />);
+    });
+  });
+
+  it('should allow a mocked component to be rendered in dev (SSR)', () => {
+    ReactDOMServer.renderToString(<MockedComponent />);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactMountDestruction-test.js b/packages/react-dom/src/__tests__/ReactMountDestruction-test.js
new file mode 100644
index 00000000000..1d4d3d16406
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactMountDestruction-test.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOM = require('react-dom');
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
+const assertConsoleErrorDev =
+  require('internal-test-utils').assertConsoleErrorDev;
+
+describe('ReactMount', () => {
+  it('should destroy a react root upon request', async () => {
+    const mainContainerDiv = document.createElement('div');
+    document.body.appendChild(mainContainerDiv);
+
+    const instanceOne = <div className="firstReactDiv" />;
+    const firstRootDiv = document.createElement('div');
+    mainContainerDiv.appendChild(firstRootDiv);
+    const firstRoot = ReactDOMClient.createRoot(firstRootDiv);
+    await act(() => {
+      firstRoot.render(instanceOne);
+    });
+
+    const instanceTwo = <div className="secondReactDiv" />;
+    const secondRootDiv = document.createElement('div');
+    mainContainerDiv.appendChild(secondRootDiv);
+    const secondRoot = ReactDOMClient.createRoot(secondRootDiv);
+    await act(() => {
+      secondRoot.render(instanceTwo);
+    });
+
+    // Test that two react roots are rendered in isolation
+    expect(firstRootDiv.firstChild.className).toBe('firstReactDiv');
+    expect(secondRootDiv.firstChild.className).toBe('secondReactDiv');
+
+    // Test that after unmounting each, they are no longer in the document.
+    await act(() => {
+      firstRoot.unmount();
+    });
+    expect(firstRootDiv.firstChild).toBeNull();
+    await act(() => {
+      secondRoot.unmount();
+    });
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn when unmounting a non-container root node', () => {
+    const mainContainerDiv = document.createElement('div');
+
+    const component = (
+      <div>
+        <div />
+      </div>
+    );
+    // Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test.
+    ReactDOM.render(component, mainContainerDiv);
+
+    // Test that unmounting at a root node gives a helpful warning
+    const rootDiv = mainContainerDiv.firstChild;
+    ReactDOM.unmountComponentAtNode(rootDiv);
+    assertConsoleErrorDev(
+      [
+        "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 ' +
+          'container.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn when unmounting a non-container, non-root node', () => {
+    const mainContainerDiv = document.createElement('div');
+
+    const component = (
+      <div>
+        <div>
+          <div />
+        </div>
+      </div>
+    );
+    // Cannot be migrated to createRoot until we remove unmountComponentAtNode i.e. remove this test.
+    ReactDOM.render(component, mainContainerDiv);
+
+    // Test that unmounting at a non-root node gives a different warning
+    const nonRootDiv = mainContainerDiv.firstChild.firstChild;
+    ReactDOM.unmountComponentAtNode(nonRootDiv);
+    assertConsoleErrorDev(
+      [
+        "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 ' +
+          'order to remove this component.',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactMultiChild-test.js b/packages/react-dom/src/__tests__/ReactMultiChild-test.js
new file mode 100644
index 00000000000..31c4e739b68
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactMultiChild-test.js
@@ -0,0 +1,567 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactMultiChild', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+  });
+
+  describe('reconciliation', () => {
+    it('should update children when possible', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const mockMount = jest.fn();
+      const mockUpdate = jest.fn();
+      const mockUnmount = jest.fn();
+
+      class MockComponent extends React.Component {
+        componentDidMount = mockMount;
+        componentDidUpdate = mockUpdate;
+        componentWillUnmount = mockUnmount;
+        render() {
+          return <span />;
+        }
+      }
+
+      expect(mockMount).toHaveBeenCalledTimes(0);
+      expect(mockUpdate).toHaveBeenCalledTimes(0);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <div>
+            <MockComponent />
+          </div>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUpdate).toHaveBeenCalledTimes(0);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <div>
+            <MockComponent />
+          </div>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUpdate).toHaveBeenCalledTimes(1);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+    });
+
+    it('should replace children with different constructors', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const mockMount = jest.fn();
+      const mockUnmount = jest.fn();
+
+      class MockComponent extends React.Component {
+        componentDidMount = mockMount;
+        componentWillUnmount = mockUnmount;
+        render() {
+          return <span />;
+        }
+      }
+
+      expect(mockMount).toHaveBeenCalledTimes(0);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <div>
+            <MockComponent />
+          </div>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <div>
+            <span />
+          </div>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUnmount).toHaveBeenCalledTimes(1);
+    });
+
+    it('should NOT replace children with different owners', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const mockMount = jest.fn();
+      const mockUnmount = jest.fn();
+
+      class MockComponent extends React.Component {
+        componentDidMount = mockMount;
+        componentWillUnmount = mockUnmount;
+        render() {
+          return <span />;
+        }
+      }
+
+      class WrapperComponent extends React.Component {
+        render() {
+          return this.props.children || <MockComponent />;
+        }
+      }
+
+      expect(mockMount).toHaveBeenCalledTimes(0);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(<WrapperComponent />);
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <WrapperComponent>
+            <MockComponent />
+          </WrapperComponent>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+    });
+
+    it('should replace children with different keys', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      const mockMount = jest.fn();
+      const mockUnmount = jest.fn();
+
+      class MockComponent extends React.Component {
+        componentDidMount = mockMount;
+        componentWillUnmount = mockUnmount;
+        render() {
+          return <span />;
+        }
+      }
+
+      expect(mockMount).toHaveBeenCalledTimes(0);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <div>
+            <MockComponent key="A" />
+          </div>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(1);
+      expect(mockUnmount).toHaveBeenCalledTimes(0);
+
+      await act(async () => {
+        root.render(
+          <div>
+            <MockComponent key="B" />
+          </div>,
+        );
+      });
+
+      expect(mockMount).toHaveBeenCalledTimes(2);
+      expect(mockUnmount).toHaveBeenCalledTimes(1);
+    });
+
+    it('should warn for duplicated array keys with component stack info', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      class WrapperComponent extends React.Component {
+        render() {
+          return <div>{this.props.children}</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        render() {
+          return (
+            <div>
+              <WrapperComponent>{this.props.children}</WrapperComponent>
+            </div>
+          );
+        }
+      }
+      await act(async () => {
+        root.render(<Parent>{[<div key="1" />]}</Parent>);
+      });
+
+      await act(async () => {
+        root.render(<Parent>{[<div key="1" />, <div key="1" />]}</Parent>);
+      });
+      assertConsoleErrorDev([
+        '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 ' +
+          'duplicated and/or omitted — the behavior is unsupported and ' +
+          'could change in a future version.\n' +
+          '    in div (at **)',
+      ]);
+    });
+
+    it('should warn for duplicated iterable keys with component stack info', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      class WrapperComponent extends React.Component {
+        render() {
+          return <div>{this.props.children}</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        render() {
+          return (
+            <div>
+              <WrapperComponent>{this.props.children}</WrapperComponent>
+            </div>
+          );
+        }
+      }
+
+      function createIterable(array) {
+        return {
+          '@@iterator': function () {
+            let i = 0;
+            return {
+              next() {
+                const next = {
+                  value: i < array.length ? array[i] : undefined,
+                  done: i === array.length,
+                };
+                i++;
+                return next;
+              },
+            };
+          },
+        };
+      }
+      await act(async () => {
+        root.render(<Parent>{createIterable([<div key="1" />])}</Parent>);
+      });
+
+      await act(async () => {
+        root.render(
+          <Parent>{createIterable([<div key="1" />, <div key="1" />])}</Parent>,
+        );
+      });
+      assertConsoleErrorDev([
+        '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 ' +
+          'duplicated and/or omitted — the behavior is unsupported and ' +
+          'could change in a future version.\n' +
+          '    in div (at **)',
+      ]);
+    });
+  });
+
+  it('should warn for using maps as children with owner info', async () => {
+    class Parent extends React.Component {
+      render() {
+        return (
+          <div>
+            {
+              new Map([
+                ['foo', 0],
+                ['bar', 1],
+              ])
+            }
+          </div>
+        );
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Parent />);
+    });
+    assertConsoleErrorDev([
+      'Using Maps as children is not supported. ' +
+        'Use an array of keyed ReactElements instead.\n' +
+        '    in div (at **)\n' +
+        '    in Parent (at **)',
+    ]);
+  });
+
+  it('should NOT warn for using generator functions as components', async () => {
+    function* Foo() {
+      yield <h1 key="1">Hello</h1>;
+      yield <h1 key="2">World</h1>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+
+    expect(container.textContent).toBe('HelloWorld');
+  });
+
+  it('should warn for using generators as children props', async () => {
+    function* getChildren() {
+      yield <h1 key="1">Hello</h1>;
+      yield <h1 key="2">World</h1>;
+    }
+
+    function Foo() {
+      const children = getChildren();
+      return <div>{children}</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      'Using Iterators 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. You can also use an ' +
+        'Iterable that can iterate multiple times over the same items.\n' +
+        '    in div (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(container.textContent).toBe('HelloWorld');
+
+    // Test de-duplication
+    await act(async () => {
+      root.render(<Foo />);
+    });
+  });
+
+  it('should warn for using other types of iterators as children', async () => {
+    function Foo() {
+      let i = 0;
+      const iterator = {
+        [Symbol.iterator]() {
+          return iterator;
+        },
+        next() {
+          switch (i++) {
+            case 0:
+              return {done: false, value: <h1 key="1">Hello</h1>};
+            case 1:
+              return {done: false, value: <h1 key="2">World</h1>};
+            default:
+              return {done: true, value: undefined};
+          }
+        },
+      };
+      return iterator;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      'Using Iterators 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. You can also use an ' +
+        'Iterable that can iterate multiple times over the same items.\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(container.textContent).toBe('HelloWorld');
+
+    // Test de-duplication
+    await act(async () => {
+      root.render(<Foo />);
+    });
+  });
+
+  it('should not warn for using generators in legacy iterables', async () => {
+    const fooIterable = {
+      '@@iterator': function* () {
+        yield <h1 key="1">Hello</h1>;
+        yield <h1 key="2">World</h1>;
+      },
+    };
+
+    function Foo() {
+      return fooIterable;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toBe('HelloWorld');
+
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toBe('HelloWorld');
+  });
+
+  it('should not warn for using generators in modern iterables', async () => {
+    const fooIterable = {
+      [Symbol.iterator]: function* () {
+        yield <h1 key="1">Hello</h1>;
+        yield <h1 key="2">World</h1>;
+      },
+    };
+
+    function Foo() {
+      return fooIterable;
+    }
+
+    const div = document.createElement('div');
+    const root = ReactDOMClient.createRoot(div);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(div.textContent).toBe('HelloWorld');
+
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(div.textContent).toBe('HelloWorld');
+  });
+
+  it('should reorder bailed-out children', async () => {
+    class LetterInner extends React.Component {
+      render() {
+        return <div>{this.props.char}</div>;
+      }
+    }
+
+    class Letter extends React.Component {
+      render() {
+        return <LetterInner char={this.props.char} />;
+      }
+      shouldComponentUpdate() {
+        return false;
+      }
+    }
+
+    class Letters extends React.Component {
+      render() {
+        const letters = this.props.letters.split('');
+        return (
+          <div>
+            {letters.map(c => (
+              <Letter key={c} char={c} />
+            ))}
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    // Two random strings -- some additions, some removals, some moves
+    await act(async () => {
+      root.render(<Letters letters="XKwHomsNjIkBcQWFbiZU" />);
+    });
+    expect(container.textContent).toBe('XKwHomsNjIkBcQWFbiZU');
+    await act(async () => {
+      root.render(<Letters letters="EHCjpdTUuiybDvhRJwZt" />);
+    });
+    expect(container.textContent).toBe('EHCjpdTUuiybDvhRJwZt');
+  });
+
+  it('prepares new children before unmounting old', async () => {
+    const log = [];
+
+    class Spy extends React.Component {
+      UNSAFE_componentWillMount() {
+        log.push(this.props.name + ' componentWillMount');
+      }
+      render() {
+        log.push(this.props.name + ' render');
+        return <div />;
+      }
+      componentDidMount() {
+        log.push(this.props.name + ' componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push(this.props.name + ' componentWillUnmount');
+      }
+    }
+
+    // These are reference-unequal so they will be swapped even if they have
+    // matching keys
+    const SpyA = props => <Spy {...props} />;
+    const SpyB = props => <Spy {...props} />;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <div>
+          <SpyA key="one" name="oneA" />
+          <SpyA key="two" name="twoA" />
+        </div>,
+      );
+    });
+    await act(async () => {
+      root.render(
+        <div>
+          <SpyB key="one" name="oneB" />
+          <SpyB key="two" name="twoB" />
+        </div>,
+      );
+    });
+
+    expect(log).toEqual([
+      'oneA componentWillMount',
+      'oneA render',
+      'twoA componentWillMount',
+      'twoA render',
+      'oneA componentDidMount',
+      'twoA componentDidMount',
+
+      'oneB componentWillMount',
+      'oneB render',
+      'twoB componentWillMount',
+      'twoB render',
+      'oneA componentWillUnmount',
+      'twoA componentWillUnmount',
+
+      'oneB componentDidMount',
+      'twoB componentDidMount',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildReconcile-test.js b/packages/react-dom/src/__tests__/ReactMultiChildReconcile-test.js
new file mode 100644
index 00000000000..3a2a5126882
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactMultiChildReconcile-test.js
@@ -0,0 +1,984 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
+
+const stripEmptyValues = function (obj) {
+  const ret = {};
+  for (const name in obj) {
+    if (!obj.hasOwnProperty(name)) {
+      continue;
+    }
+    if (obj[name] !== null && obj[name] !== undefined) {
+      ret[name] = obj[name];
+    }
+  }
+  return ret;
+};
+
+let idCounter = 123;
+
+/**
+ * Contains internal static internal state in order to test that updates to
+ * existing children won't reinitialize components, when moving children -
+ * reusing existing DOM/memory resources.
+ */
+class StatusDisplay extends React.Component {
+  state = {internalState: idCounter++};
+
+  getStatus() {
+    return this.props.status;
+  }
+
+  getInternalState() {
+    return this.state.internalState;
+  }
+
+  componentDidMount() {
+    this.props.onFlush();
+  }
+
+  componentDidUpdate() {
+    this.props.onFlush();
+  }
+
+  render() {
+    return <div>{this.props.contentKey}</div>;
+  }
+}
+
+/**
+ * Displays friends statuses.
+ */
+class FriendsStatusDisplay extends React.Component {
+  displays = {};
+
+  /**
+   * Gets the order directly from each rendered child's `index` field.
+   * Refs are not maintained in the rendered order, and neither is
+   * `this._renderedChildren` (surprisingly).
+   */
+  getOriginalKeys() {
+    const originalKeys = [];
+    for (const key in this.props.usernameToStatus) {
+      if (this.props.usernameToStatus[key]) {
+        originalKeys.push(key);
+      }
+    }
+    return originalKeys;
+  }
+
+  /**
+   * Retrieves the rendered children in a nice format for comparing to the input
+   * `this.props.usernameToStatus`.
+   */
+  getStatusDisplays() {
+    const res = {};
+    const originalKeys = this.getOriginalKeys();
+    for (let i = 0; i < originalKeys.length; i++) {
+      const key = originalKeys[i];
+      res[key] = this.displays[key];
+    }
+    return res;
+  }
+
+  /**
+   * Verifies that by the time a child is flushed, the refs that appeared
+   * earlier have already been resolved.
+   * TODO: This assumption will likely break with incremental reconciler
+   * but our internal layer API depends on this assumption. We need to change
+   * it to be more declarative before making ref resolution indeterministic.
+   */
+  verifyPreviousRefsResolved(flushedKey) {
+    const originalKeys = this.getOriginalKeys();
+    for (let i = 0; i < originalKeys.length; i++) {
+      const key = originalKeys[i];
+      if (key === flushedKey) {
+        // We are only interested in children up to the current key.
+        return;
+      }
+      expect(this.displays[key]).toBeTruthy();
+    }
+  }
+
+  render() {
+    const children = [];
+    for (const key in this.props.usernameToStatus) {
+      const status = this.props.usernameToStatus[key];
+      children.push(
+        !status ? null : (
+          <StatusDisplay
+            key={key}
+            ref={current => {
+              this.displays[key] = current;
+            }}
+            contentKey={key}
+            onFlush={this.verifyPreviousRefsResolved.bind(this, key)}
+            status={status}
+          />
+        ),
+      );
+    }
+    const childrenToRender = this.props.prepareChildren(children);
+    return <div>{childrenToRender}</div>;
+  }
+}
+
+function getInternalStateByUserName(statusDisplays) {
+  return Object.keys(statusDisplays).reduce((acc, key) => {
+    acc[key] = statusDisplays[key].getInternalState();
+    return acc;
+  }, {});
+}
+
+/**
+ * Verifies that the rendered `StatusDisplay` instances match the `props` that
+ * were responsible for allocating them. Checks the content of the user's status
+ * message as well as the order of them.
+ */
+function verifyStatuses(statusDisplays, props) {
+  const nonEmptyStatusDisplays = stripEmptyValues(statusDisplays);
+  const nonEmptyStatusProps = stripEmptyValues(props.usernameToStatus);
+  let username;
+  expect(Object.keys(nonEmptyStatusDisplays).length).toEqual(
+    Object.keys(nonEmptyStatusProps).length,
+  );
+  for (username in nonEmptyStatusDisplays) {
+    if (!nonEmptyStatusDisplays.hasOwnProperty(username)) {
+      continue;
+    }
+    expect(nonEmptyStatusDisplays[username].getStatus()).toEqual(
+      nonEmptyStatusProps[username],
+    );
+  }
+
+  // now go the other way to make sure we got them all.
+  for (username in nonEmptyStatusProps) {
+    if (!nonEmptyStatusProps.hasOwnProperty(username)) {
+      continue;
+    }
+    expect(nonEmptyStatusDisplays[username].getStatus()).toEqual(
+      nonEmptyStatusProps[username],
+    );
+  }
+
+  expect(Object.keys(nonEmptyStatusDisplays)).toEqual(
+    Object.keys(nonEmptyStatusProps),
+  );
+}
+
+/**
+ * For all statusDisplays that existed in the previous iteration of the
+ * sequence, verify that the state has been preserved. `StatusDisplay` contains
+ * a unique number that allows us to track internal state across ordering
+ * movements.
+ */
+function verifyStatesPreserved(lastInternalStates, statusDisplays) {
+  let key;
+  for (key in statusDisplays) {
+    if (!statusDisplays.hasOwnProperty(key)) {
+      continue;
+    }
+    if (lastInternalStates[key]) {
+      expect(lastInternalStates[key]).toEqual(
+        statusDisplays[key].getInternalState(),
+      );
+    }
+  }
+}
+
+/**
+ * Verifies that the internal representation of a set of `renderedChildren`
+ * accurately reflects what is in the DOM.
+ */
+function verifyDomOrderingAccurate(outerContainer, statusDisplays) {
+  const containerNode = outerContainer.firstChild;
+  const statusDisplayNodes = containerNode.childNodes;
+  const orderedDomKeys = [];
+  for (let i = 0; i < statusDisplayNodes.length; i++) {
+    const contentKey = statusDisplayNodes[i].textContent;
+    orderedDomKeys.push(contentKey);
+  }
+
+  const orderedLogicalKeys = [];
+  let username;
+  for (username in statusDisplays) {
+    if (!statusDisplays.hasOwnProperty(username)) {
+      continue;
+    }
+    const statusDisplay = statusDisplays[username];
+    orderedLogicalKeys.push(statusDisplay.props.contentKey);
+  }
+  expect(orderedDomKeys).toEqual(orderedLogicalKeys);
+}
+
+async function testPropsSequenceWithPreparedChildren(
+  sequence,
+  prepareChildren,
+) {
+  const container = document.createElement('div');
+  const root = ReactDOMClient.createRoot(container);
+  let parentInstance;
+  await act(() => {
+    root.render(
+      <FriendsStatusDisplay
+        {...sequence[0]}
+        prepareChildren={prepareChildren}
+        ref={current => {
+          if (parentInstance === undefined) {
+            parentInstance = current;
+          }
+        }}
+      />,
+    );
+  });
+  let statusDisplays = parentInstance.getStatusDisplays();
+  let lastInternalStates = getInternalStateByUserName(statusDisplays);
+  verifyStatuses(statusDisplays, sequence[0]);
+
+  for (let i = 1; i < sequence.length; i++) {
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...sequence[i]}
+          prepareChildren={prepareChildren}
+        />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    verifyStatuses(statusDisplays, sequence[i]);
+    verifyStatesPreserved(lastInternalStates, statusDisplays);
+    verifyDomOrderingAccurate(container, statusDisplays);
+
+    lastInternalStates = getInternalStateByUserName(statusDisplays);
+  }
+}
+
+function prepareChildrenArray(childrenArray) {
+  return childrenArray;
+}
+
+function prepareChildrenLegacyIterable(childrenArray) {
+  return {
+    '@@iterator': function* () {
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const child of childrenArray) {
+        yield child;
+      }
+    },
+  };
+}
+
+function prepareChildrenModernIterable(childrenArray) {
+  return {
+    [Symbol.iterator]: function* () {
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const child of childrenArray) {
+        yield child;
+      }
+    },
+  };
+}
+
+async function testPropsSequence(sequence) {
+  await testPropsSequenceWithPreparedChildren(sequence, prepareChildrenArray);
+  await testPropsSequenceWithPreparedChildren(
+    sequence,
+    prepareChildrenLegacyIterable,
+  );
+  await testPropsSequenceWithPreparedChildren(
+    sequence,
+    prepareChildrenModernIterable,
+  );
+}
+
+describe('ReactMultiChildReconcile', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('should reset internal state if removed then readded in an array', async () => {
+    // Test basics.
+    const props = {
+      usernameToStatus: {
+        jcw: 'jcwStatus',
+      },
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let parentInstance;
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...props}
+          prepareChildren={prepareChildrenArray}
+          ref={current => {
+            if (parentInstance === undefined) {
+              parentInstance = current;
+            }
+          }}
+        />,
+      );
+    });
+    let statusDisplays = parentInstance.getStatusDisplays();
+    const startingInternalState = statusDisplays.jcw.getInternalState();
+
+    // Now remove the child.
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay prepareChildren={prepareChildrenArray} />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    expect(statusDisplays.jcw).toBeFalsy();
+
+    // Now reset the props that cause there to be a child
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...props}
+          prepareChildren={prepareChildrenArray}
+        />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    expect(statusDisplays.jcw).toBeTruthy();
+    expect(statusDisplays.jcw.getInternalState()).not.toBe(
+      startingInternalState,
+    );
+  });
+
+  it('should reset internal state if removed then readded in a legacy iterable', async () => {
+    // Test basics.
+    const props = {
+      usernameToStatus: {
+        jcw: 'jcwStatus',
+      },
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let parentInstance;
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...props}
+          prepareChildren={prepareChildrenLegacyIterable}
+          ref={current => {
+            if (parentInstance === undefined) {
+              parentInstance = current;
+            }
+          }}
+        />,
+      );
+    });
+
+    let statusDisplays = parentInstance.getStatusDisplays();
+    const startingInternalState = statusDisplays.jcw.getInternalState();
+
+    // Now remove the child.
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          prepareChildren={prepareChildrenLegacyIterable}
+        />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    expect(statusDisplays.jcw).toBeFalsy();
+
+    // Now reset the props that cause there to be a child
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...props}
+          prepareChildren={prepareChildrenLegacyIterable}
+        />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    expect(statusDisplays.jcw).toBeTruthy();
+    expect(statusDisplays.jcw.getInternalState()).not.toBe(
+      startingInternalState,
+    );
+  });
+
+  it('should reset internal state if removed then readded in a modern iterable', async () => {
+    // Test basics.
+    const props = {
+      usernameToStatus: {
+        jcw: 'jcwStatus',
+      },
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let parentInstance;
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...props}
+          prepareChildren={prepareChildrenModernIterable}
+          ref={current => {
+            if (parentInstance === undefined) {
+              parentInstance = current;
+            }
+          }}
+        />,
+      );
+    });
+
+    let statusDisplays = parentInstance.getStatusDisplays();
+    const startingInternalState = statusDisplays.jcw.getInternalState();
+
+    // Now remove the child.
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          prepareChildren={prepareChildrenModernIterable}
+        />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    expect(statusDisplays.jcw).toBeFalsy();
+
+    // Now reset the props that cause there to be a child
+    await act(() => {
+      root.render(
+        <FriendsStatusDisplay
+          {...props}
+          prepareChildren={prepareChildrenModernIterable}
+        />,
+      );
+    });
+
+    statusDisplays = parentInstance.getStatusDisplays();
+    expect(statusDisplays.jcw).toBeTruthy();
+    expect(statusDisplays.jcw.getInternalState()).not.toBe(
+      startingInternalState,
+    );
+  });
+
+  it('should create unique identity', async () => {
+    // Test basics.
+    const usernameToStatus = {
+      jcw: 'jcwStatus',
+      awalke: 'awalkeStatus',
+      bob: 'bobStatus',
+    };
+
+    await testPropsSequence([{usernameToStatus: usernameToStatus}]);
+  });
+
+  it('should preserve order if children order has not changed', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwstatus2',
+          jordanjcw: 'jordanjcwstatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should transition from zero to one children correctly', async () => {
+    const PROPS_SEQUENCE = [
+      {usernameToStatus: {}},
+      {
+        usernameToStatus: {
+          first: 'firstStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should transition from one to zero children correctly', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          first: 'firstStatus',
+        },
+      },
+      {usernameToStatus: {}},
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should transition from one child to null children', async () => {
+    await testPropsSequence([
+      {
+        usernameToStatus: {
+          first: 'firstStatus',
+        },
+      },
+      {},
+    ]);
+  });
+
+  it('should transition from null children to one child', async () => {
+    await testPropsSequence([
+      {},
+      {
+        usernameToStatus: {
+          first: 'firstStatus',
+        },
+      },
+    ]);
+  });
+
+  it('should transition from zero children to null children', async () => {
+    await testPropsSequence([
+      {
+        usernameToStatus: {},
+      },
+      {},
+    ]);
+  });
+
+  it('should transition from null children to zero children', async () => {
+    await testPropsSequence([
+      {},
+      {
+        usernameToStatus: {},
+      },
+    ]);
+  });
+
+  /**
+   * `FriendsStatusDisplay` renders nulls as empty children (it's a convention
+   * of `FriendsStatusDisplay`, nothing related to React or these test cases.
+   */
+  it('should remove nulled out children at the beginning', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: null,
+          jordanjcw: 'jordanjcwstatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should remove nulled out children at the end', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwstatus2',
+          jordanjcw: null,
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should reverse the order of two children', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userTwo: 'userTwoStatus',
+          userOne: 'userOneStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should reverse the order of more than two children', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userThree: 'userThreeStatus',
+          userTwo: 'userTwoStatus',
+          userOne: 'userOneStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should cycle order correctly', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+          userOne: 'userOneStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userFour: 'userFourStatus',
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          // Full circle!
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should cycle order correctly in the other direction', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userFour: 'userFourStatus',
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+          userOne: 'userOneStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          // Full circle!
+          userOne: 'userOneStatus',
+          userTwo: 'userTwoStatus',
+          userThree: 'userThreeStatus',
+          userFour: 'userFourStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should remove nulled out children and ignore new null children', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jordanjcw: 'jordanjcwstatus2',
+          jcw: null,
+          another: null,
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should remove nulled out children and reorder remaining', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+          john: 'johnStatus', // john will go away
+          joe: 'joeStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jordanjcw: 'jordanjcwStatus',
+          joe: 'joeStatus',
+          jcw: 'jcwStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should append children to the end', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+          jordanjcwnew: 'jordanjcwnewStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should append multiple children to the end', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+          jordanjcwnew: 'jordanjcwnewStatus',
+          jordanjcwnew2: 'jordanjcwnewStatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should prepend children to the beginning', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          newUsername: 'newUsernameStatus',
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should prepend multiple children to the beginning', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          newNewUsername: 'newNewUsernameStatus',
+          newUsername: 'newUsernameStatus',
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should not prepend an empty child to the beginning', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          emptyUsername: null,
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should not append an empty child to the end', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+          emptyUsername: null,
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should not insert empty children in the middle', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwstatus2',
+          skipOverMe: null,
+          skipOverMeToo: null,
+          definitelySkipOverMe: null,
+          jordanjcw: 'jordanjcwstatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should insert one new child in the middle', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwstatus2',
+          insertThis: 'insertThisStatus',
+          jordanjcw: 'jordanjcwstatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should insert multiple new truthy children in the middle', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwstatus2',
+          insertThis: 'insertThisStatus',
+          insertThisToo: 'insertThisTooStatus',
+          definitelyInsertThisToo: 'definitelyInsertThisTooStatus',
+          jordanjcw: 'jordanjcwstatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+
+  it('should insert non-empty children in middle where nulls were', async () => {
+    const PROPS_SEQUENCE = [
+      {
+        usernameToStatus: {
+          jcw: 'jcwStatus',
+          insertThis: null,
+          insertThisToo: null,
+          definitelyInsertThisToo: null,
+          jordanjcw: 'jordanjcwStatus',
+        },
+      },
+      {
+        usernameToStatus: {
+          jcw: 'jcwstatus2',
+          insertThis: 'insertThisStatus',
+          insertThisToo: 'insertThisTooStatus',
+          definitelyInsertThisToo: 'definitelyInsertThisTooStatus',
+          jordanjcw: 'jordanjcwstatus2',
+        },
+      },
+    ];
+    await testPropsSequence(PROPS_SEQUENCE);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
new file mode 100644
index 00000000000..0c9cc963651
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -0,0 +1,253 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
+
+// Helpers
+const testAllPermutations = async function (testCases) {
+  for (let i = 0; i < testCases.length; i += 2) {
+    const renderWithChildren = testCases[i];
+    const expectedResultAfterRender = testCases[i + 1];
+
+    for (let j = 0; j < testCases.length; j += 2) {
+      const updateWithChildren = testCases[j];
+      const expectedResultAfterUpdate = testCases[j + 1];
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<div>{renderWithChildren}</div>));
+      expectChildren(container, expectedResultAfterRender);
+
+      await act(() => root.render(<div>{updateWithChildren}</div>));
+      expectChildren(container, expectedResultAfterUpdate);
+    }
+  }
+};
+
+const expectChildren = function (container, children) {
+  const outerNode = container.firstChild;
+  let textNode;
+  if (typeof children === 'string') {
+    textNode = outerNode.firstChild;
+
+    if (children === '') {
+      expect(textNode != null).toBe(false);
+    } else {
+      expect(textNode != null).toBe(true);
+      expect(textNode.nodeType).toBe(3);
+      expect(textNode.data).toBe(String(children));
+    }
+  } else {
+    let mountIndex = 0;
+
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+
+      if (typeof child === 'string') {
+        if (child === '') {
+          continue;
+        }
+        textNode = outerNode.childNodes[mountIndex];
+        expect(textNode != null).toBe(true);
+        expect(textNode.nodeType).toBe(3);
+        expect(textNode.data).toBe(child);
+        mountIndex++;
+      } else {
+        const elementDOMNode = outerNode.childNodes[mountIndex];
+        expect(elementDOMNode.tagName).toBe('DIV');
+        mountIndex++;
+      }
+    }
+  }
+};
+
+/**
+ * ReactMultiChild DOM integration test. In ReactDOM components, we make sure
+ * that single children that are strings are treated as "content" which is much
+ * faster to render and update.
+ */
+describe('ReactMultiChildText', () => {
+  jest.setTimeout(30000);
+
+  it('should correctly handle all possible children for render and update', async () => {
+    spyOnDev(console, 'error').mockImplementation(() => {});
+    // prettier-ignore
+    await testAllPermutations([
+      // basic values
+      undefined, [],
+      null, [],
+      false, [],
+      true, [],
+      0, '0',
+      1.2, '1.2',
+      '', [],
+      'foo', 'foo',
+    
+      [], [],
+      [undefined], [],
+      [null], [],
+      [false], [],
+      [true], [],
+      [0], ['0'],
+      [1.2], ['1.2'],
+      [''], [],
+      ['foo'], ['foo'],
+      [<div />], [<div />],
+    
+      // two adjacent values
+      [true, 0], ['0'],
+      [0, 0], ['0', '0'],
+      [1.2, 0], ['1.2', '0'],
+      [0, ''], ['0', ''],
+      ['foo', 0], ['foo', '0'],
+      [0, <div />], ['0', <div />],
+    
+      [true, 1.2], ['1.2'],
+      [1.2, 0], ['1.2', '0'],
+      [1.2, 1.2], ['1.2', '1.2'],
+      [1.2, ''], ['1.2', ''],
+      ['foo', 1.2], ['foo', '1.2'],
+      [1.2, <div />], ['1.2', <div />],
+    
+      [true, ''], [''],
+      ['', 0], ['', '0'],
+      [1.2, ''], ['1.2', ''],
+      ['', ''], ['', ''],
+      ['foo', ''], ['foo', ''],
+      ['', <div />], ['', <div />],
+    
+      [true, 'foo'], ['foo'],
+      ['foo', 0], ['foo', '0'],
+      [1.2, 'foo'], ['1.2', 'foo'],
+      ['foo', ''], ['foo', ''],
+      ['foo', 'foo'], ['foo', 'foo'],
+      ['foo', <div />], ['foo', <div />],
+    
+      // values separated by an element
+      [true, <div />, true], [<div />],
+      [1.2, <div />, 1.2], ['1.2', <div />, '1.2'],
+      ['', <div />, ''], ['', <div />, ''],
+      ['foo', <div />, 'foo'], ['foo', <div />, 'foo'],
+    
+      [true, 1.2, <div />, '', 'foo'], ['1.2', <div />, '', 'foo'],
+      [1.2, '', <div />, 'foo', true], ['1.2', '', <div />, 'foo'],
+      ['', 'foo', <div />, true, 1.2], ['', 'foo', <div />, '1.2'],
+    
+      [true, 1.2, '', <div />, 'foo', true, 1.2], ['1.2', '', <div />, 'foo', '1.2'],
+      ['', 'foo', true, <div />, 1.2, '', 'foo'], ['', 'foo', <div />, '1.2', '', 'foo'],
+    
+      // values inside arrays
+      [[true], [true]], [],
+      [[1.2], [1.2]], ['1.2', '1.2'],
+      [[''], ['']], ['', ''],
+      [['foo'], ['foo']], ['foo', 'foo'],
+      [[<div />], [<div />]], [<div />, <div />],
+    
+      [[true, 1.2, <div />], '', 'foo'], ['1.2', <div />, '', 'foo'],
+      [1.2, '', [<div />, 'foo', true]], ['1.2', '', <div />, 'foo'],
+      ['', ['foo', <div />, true], 1.2], ['', 'foo', <div />, '1.2'],
+    
+      [true, [1.2, '', <div />, 'foo'], true, 1.2], ['1.2', '', <div />, 'foo', '1.2'],
+      ['', 'foo', [true, <div />, 1.2, ''], 'foo'], ['', 'foo', <div />, '1.2', '', 'foo'],
+    
+      // values inside elements
+      [<div>{true}{1.2}{<div />}</div>, '', 'foo'], [<div />, '', 'foo'],
+      [1.2, '', <div>{<div />}{'foo'}{true}</div>], ['1.2', '', <div />],
+      ['', <div>{'foo'}{<div />}{true}</div>, 1.2], ['', <div />, '1.2'],
+    
+      [true, <div>{1.2}{''}{<div />}{'foo'}</div>, true, 1.2], [<div />, '1.2'],
+      ['', 'foo', <div>{true}{<div />}{1.2}{''}</div>, 'foo'], ['', 'foo', <div />, 'foo'],
+    ]);
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.mock.calls[0][0]).toMatch(
+        'Each child in a list should have a unique "key" prop.',
+      );
+      expect(console.error.mock.calls[1][0]).toMatch(
+        'Each child in a list should have a unique "key" prop.',
+      );
+    }
+  });
+
+  it('should correctly handle bigint children for render and update', async () => {
+    // prettier-ignore
+    await testAllPermutations([
+      10n, '10',
+      [10n], ['10']
+    ]);
+  });
+
+  it('should throw if rendering both HTML and children', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(
+          <div dangerouslySetInnerHTML={{__html: 'abcdef'}}>ghjkl</div>,
+        );
+      }),
+    ).rejects.toThrow();
+  });
+
+  it('should render between nested components and inline children', async () => {
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <div>
+          <h1>
+            <span />
+            <span />
+          </h1>
+        </div>,
+      );
+    });
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(
+          <div>
+            <h1>A</h1>
+          </div>,
+        );
+      }),
+    ).resolves.not.toThrow();
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(
+          <div>
+            <h1>{['A']}</h1>
+          </div>,
+        );
+      }),
+    ).resolves.not.toThrow();
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(
+          <div>
+            <h1>{['A', 'B']}</h1>
+          </div>,
+        );
+      }),
+    ).resolves.not.toThrow();
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
new file mode 100644
index 00000000000..583643449f7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -0,0 +1,332 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let act;
+let Scheduler;
+let assertLog;
+
+function getTestDocument(markup) {
+  const doc = document.implementation.createHTMLDocument('');
+  doc.open();
+  doc.write(
+    markup ||
+      '<!doctype html><html><meta charset=utf-8><title>test doc</title>',
+  );
+  doc.close();
+  return doc;
+}
+
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
+describe('rendering React components at document', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    Scheduler = require('scheduler');
+  });
+
+  describe('with new explicit hydration API', () => {
+    it('should be able to adopt server markup', async () => {
+      class Root extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>{'Hello ' + this.props.hello}</body>
+            </html>
+          );
+        }
+      }
+
+      const markup = ReactDOMServer.renderToString(<Root hello="world" />);
+      expect(markup).not.toContain('DOCTYPE');
+      expect(markup).not.toContain('rel="expect"');
+      const testDocument = getTestDocument(markup);
+      const body = testDocument.body;
+
+      let root;
+      await act(() => {
+        root = ReactDOMClient.hydrateRoot(testDocument, <Root hello="world" />);
+      });
+      expect(testDocument.body.innerHTML).toBe('Hello world');
+
+      await act(() => {
+        root.render(<Root hello="moon" />);
+      });
+      expect(testDocument.body.innerHTML).toBe('Hello moon');
+
+      expect(body === testDocument.body).toBe(true);
+    });
+
+    it('should be able to unmount component from document node, but leaves singleton nodes intact', async () => {
+      class Root extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>Hello world</body>
+            </html>
+          );
+        }
+      }
+
+      const markup = ReactDOMServer.renderToString(<Root />);
+      const testDocument = getTestDocument(markup);
+      let root;
+      await act(() => {
+        root = ReactDOMClient.hydrateRoot(testDocument, <Root />);
+      });
+      expect(testDocument.body.innerHTML).toBe('Hello world');
+
+      const originalDocEl = testDocument.documentElement;
+      const originalHead = testDocument.head;
+      const originalBody = testDocument.body;
+
+      // When we unmount everything is removed except the singleton nodes of html, head, and body
+      root.unmount();
+      expect(testDocument.firstChild).toBe(originalDocEl);
+      expect(testDocument.head).toBe(originalHead);
+      expect(testDocument.body).toBe(originalBody);
+      expect(originalBody.innerHTML).toBe('');
+      expect(originalHead.innerHTML).toBe('');
+    });
+
+    it('should not be able to switch root constructors', async () => {
+      class Component extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>Hello world</body>
+            </html>
+          );
+        }
+      }
+
+      class Component2 extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>Goodbye world</body>
+            </html>
+          );
+        }
+      }
+
+      const markup = ReactDOMServer.renderToString(<Component />);
+      const testDocument = getTestDocument(markup);
+
+      let root;
+      await act(() => {
+        root = ReactDOMClient.hydrateRoot(testDocument, <Component />);
+      });
+
+      expect(testDocument.body.innerHTML).toBe('Hello world');
+
+      await act(() => {
+        root.render(<Component2 />);
+      });
+
+      expect(testDocument.body.innerHTML).toBe('Goodbye world');
+    });
+
+    it('should be able to mount into document', async () => {
+      class Component extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>{this.props.text}</body>
+            </html>
+          );
+        }
+      }
+
+      const markup = ReactDOMServer.renderToString(
+        <Component text="Hello world" />,
+      );
+      const testDocument = getTestDocument(markup);
+
+      await act(() => {
+        ReactDOMClient.hydrateRoot(
+          testDocument,
+          <Component text="Hello world" />,
+        );
+      });
+
+      expect(testDocument.body.innerHTML).toBe('Hello world');
+    });
+
+    it('cannot render over an existing text child at the root', async () => {
+      const container = document.createElement('div');
+      container.textContent = 'potato';
+
+      ReactDOM.flushSync(() => {
+        ReactDOMClient.hydrateRoot(container, <div>parsnip</div>, {
+          onRecoverableError: error => {
+            Scheduler.log(
+              'onRecoverableError: ' + normalizeError(error.message),
+            );
+            if (error.cause) {
+              Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+            }
+          },
+        });
+      });
+
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+
+      // This creates an unfortunate double text case.
+      expect(container.textContent).toBe('parsnip');
+    });
+
+    it('renders over an existing nested text child without throwing', async () => {
+      const container = document.createElement('div');
+      const wrapper = document.createElement('div');
+      wrapper.textContent = 'potato';
+      container.appendChild(wrapper);
+      ReactDOM.flushSync(() => {
+        ReactDOMClient.hydrateRoot(
+          container,
+          <div>
+            <div>parsnip</div>
+          </div>,
+          {
+            onRecoverableError: error => {
+              Scheduler.log(
+                'onRecoverableError: ' + normalizeError(error.message),
+              );
+              if (error.cause) {
+                Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+              }
+            },
+          },
+        );
+      });
+
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+      expect(container.textContent).toBe('parsnip');
+    });
+
+    it('should give helpful errors on state desync', async () => {
+      class Component extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>{this.props.text}</body>
+            </html>
+          );
+        }
+      }
+
+      const markup = ReactDOMServer.renderToString(
+        <Component text="Goodbye world" />,
+      );
+      const testDocument = getTestDocument(markup);
+
+      ReactDOM.flushSync(() => {
+        ReactDOMClient.hydrateRoot(
+          testDocument,
+          <Component text="Hello world" />,
+          {
+            onRecoverableError: error => {
+              Scheduler.log(
+                'onRecoverableError: ' + normalizeError(error.message),
+              );
+              if (error.cause) {
+                Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+              }
+            },
+          },
+        );
+      });
+
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
+      ]);
+      expect(testDocument.body.innerHTML).toBe('Hello world');
+    });
+
+    it('should render w/ no markup to full document', async () => {
+      const testDocument = getTestDocument();
+
+      class Component extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>{this.props.text}</body>
+            </html>
+          );
+        }
+      }
+
+      // with float the title no longer is a hydration mismatch so we get an error on the body mismatch
+      ReactDOM.flushSync(() => {
+        ReactDOMClient.hydrateRoot(
+          testDocument,
+          <Component text="Hello world" />,
+          {
+            onRecoverableError: error => {
+              Scheduler.log(
+                'onRecoverableError: ' + normalizeError(error.message),
+              );
+              if (error.cause) {
+                Scheduler.log('Cause: ' + normalizeError(error.cause.message));
+              }
+            },
+          },
+        );
+      });
+      assertLog([
+        "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      ]);
+      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
new file mode 100644
index 00000000000..86bdb1633fb
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -0,0 +1,1080 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+let PropTypes;
+let ReactSharedInternals;
+let assertConsoleErrorDev;
+
+describe('ReactDOMServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    PropTypes = require('prop-types');
+    ReactDOMServer = require('react-dom/server');
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  });
+
+  describe('renderToString', () => {
+    it('should generate simple markup', () => {
+      const response = ReactDOMServer.renderToString(<span>hello world</span>);
+      expect(response).toMatch(new RegExp('<span' + '>hello world</span>'));
+    });
+
+    it('should generate simple markup for self-closing tags', () => {
+      const response = ReactDOMServer.renderToString(<img />);
+      expect(response).toMatch(new RegExp('<img' + '/>'));
+    });
+
+    it('should generate comment markup for component returns null', () => {
+      class NullComponent extends React.Component {
+        render() {
+          return null;
+        }
+      }
+
+      const response = ReactDOMServer.renderToString(<NullComponent />);
+      expect(response).toBe('');
+    });
+
+    // TODO: Test that listeners are not registered onto any document/container.
+
+    it('should render composite components', () => {
+      class Parent extends React.Component {
+        render() {
+          return (
+            <div>
+              <Child name="child" />
+            </div>
+          );
+        }
+      }
+
+      class Child extends React.Component {
+        render() {
+          return <span>My name is {this.props.name}</span>;
+        }
+      }
+
+      const response = ReactDOMServer.renderToString(<Parent />);
+      expect(response).toMatch(
+        new RegExp(
+          '<div>' +
+            '<span' +
+            '>' +
+            'My name is <!-- -->child' +
+            '</span>' +
+            '</div>',
+        ),
+      );
+    });
+
+    it('should only execute certain lifecycle methods', () => {
+      function runTest() {
+        const lifecycle = [];
+
+        class TestComponent extends React.Component {
+          constructor(props) {
+            super(props);
+            lifecycle.push('getInitialState');
+            this.state = {name: 'TestComponent'};
+          }
+
+          UNSAFE_componentWillMount() {
+            lifecycle.push('componentWillMount');
+          }
+
+          componentDidMount() {
+            lifecycle.push('componentDidMount');
+          }
+
+          render() {
+            lifecycle.push('render');
+            return <span>Component name: {this.state.name}</span>;
+          }
+
+          UNSAFE_componentWillUpdate() {
+            lifecycle.push('componentWillUpdate');
+          }
+
+          componentDidUpdate() {
+            lifecycle.push('componentDidUpdate');
+          }
+
+          shouldComponentUpdate() {
+            lifecycle.push('shouldComponentUpdate');
+          }
+
+          UNSAFE_componentWillReceiveProps() {
+            lifecycle.push('componentWillReceiveProps');
+          }
+
+          componentWillUnmount() {
+            lifecycle.push('componentWillUnmount');
+          }
+        }
+
+        const response = ReactDOMServer.renderToString(<TestComponent />);
+
+        expect(response).toMatch(
+          new RegExp(
+            '<span>' + 'Component name: <!-- -->TestComponent' + '</span>',
+          ),
+        );
+        expect(lifecycle).toEqual([
+          'getInitialState',
+          'componentWillMount',
+          'render',
+        ]);
+      }
+
+      runTest();
+    });
+
+    it('should throw with silly args', () => {
+      expect(
+        ReactDOMServer.renderToString.bind(ReactDOMServer, {x: 123}),
+      ).toThrowError(
+        'Objects are not valid as a React child (found: object with keys {x})',
+      );
+    });
+
+    it('should throw prop mapping error for an <iframe /> with invalid props', () => {
+      expect(() => {
+        ReactDOMServer.renderToString(<iframe style="border:none;" />);
+      }).toThrowError(
+        'The `style` prop expects a mapping from style properties to values, not ' +
+          "a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.",
+      );
+    });
+
+    it('should not crash on poisoned hasOwnProperty', () => {
+      const html = ReactDOMServer.renderToString(
+        <div hasOwnProperty="poison">
+          <span unknown="test" />
+        </div>,
+      );
+      assertConsoleErrorDev([
+        'React does not recognize the `hasOwnProperty` prop on a DOM element. ' +
+          'If you intentionally want it to appear in the DOM as a custom attribute, ' +
+          'spell it as lowercase `hasownproperty` instead. ' +
+          'If you accidentally passed it from a parent component, remove it from the DOM element.\n' +
+          '    in div (at **)',
+      ]);
+      expect(html).toContain('<span unknown="test">');
+    });
+  });
+
+  describe('renderToStaticMarkup', () => {
+    it('should not put checksum and React ID on components', () => {
+      class NestedComponent extends React.Component {
+        render() {
+          return <div>inner text</div>;
+        }
+      }
+
+      class TestComponent extends React.Component {
+        render() {
+          return (
+            <span>
+              <NestedComponent />
+            </span>
+          );
+        }
+      }
+
+      const response = ReactDOMServer.renderToStaticMarkup(<TestComponent />);
+
+      expect(response).toBe('<span><div>inner text</div></span>');
+    });
+
+    it('should not put checksum and React ID on text components', () => {
+      class TestComponent extends React.Component {
+        render() {
+          return (
+            <span>
+              {'hello'} {'world'}
+            </span>
+          );
+        }
+      }
+
+      const response = ReactDOMServer.renderToStaticMarkup(<TestComponent />);
+
+      expect(response).toBe('<span>hello world</span>');
+    });
+
+    it('should not use comments for empty nodes', () => {
+      class TestComponent extends React.Component {
+        render() {
+          return null;
+        }
+      }
+
+      const response = ReactDOMServer.renderToStaticMarkup(<TestComponent />);
+
+      expect(response).toBe('');
+    });
+
+    it('should only execute certain lifecycle methods', () => {
+      function runTest() {
+        const lifecycle = [];
+
+        class TestComponent extends React.Component {
+          constructor(props) {
+            super(props);
+            lifecycle.push('getInitialState');
+            this.state = {name: 'TestComponent'};
+          }
+
+          UNSAFE_componentWillMount() {
+            lifecycle.push('componentWillMount');
+          }
+
+          componentDidMount() {
+            lifecycle.push('componentDidMount');
+          }
+
+          render() {
+            lifecycle.push('render');
+            return <span>Component name: {this.state.name}</span>;
+          }
+
+          UNSAFE_componentWillUpdate() {
+            lifecycle.push('componentWillUpdate');
+          }
+
+          componentDidUpdate() {
+            lifecycle.push('componentDidUpdate');
+          }
+
+          shouldComponentUpdate() {
+            lifecycle.push('shouldComponentUpdate');
+          }
+
+          UNSAFE_componentWillReceiveProps() {
+            lifecycle.push('componentWillReceiveProps');
+          }
+
+          componentWillUnmount() {
+            lifecycle.push('componentWillUnmount');
+          }
+        }
+
+        const response = ReactDOMServer.renderToStaticMarkup(<TestComponent />);
+
+        expect(response).toBe('<span>Component name: TestComponent</span>');
+        expect(lifecycle).toEqual([
+          'getInitialState',
+          'componentWillMount',
+          'render',
+        ]);
+      }
+
+      runTest();
+    });
+
+    it('should throw with silly args', () => {
+      expect(
+        ReactDOMServer.renderToStaticMarkup.bind(ReactDOMServer, {x: 123}),
+      ).toThrowError(
+        'Objects are not valid as a React child (found: object with keys {x})',
+      );
+    });
+
+    it('allows setState in componentWillMount without using DOM', () => {
+      class Component extends React.Component {
+        UNSAFE_componentWillMount() {
+          this.setState({text: 'hello, world'});
+        }
+
+        render() {
+          return <div>{this.state.text}</div>;
+        }
+      }
+      const markup = ReactDOMServer.renderToStaticMarkup(<Component />);
+      expect(markup).toContain('hello, world');
+    });
+
+    it('allows setState in componentWillMount with custom constructor', () => {
+      class Component extends React.Component {
+        constructor() {
+          super();
+          this.state = {text: 'default state'};
+        }
+
+        UNSAFE_componentWillMount() {
+          this.setState({text: 'hello, world'});
+        }
+
+        render() {
+          return <div>{this.state.text}</div>;
+        }
+      }
+      const markup = ReactDOMServer.renderToStaticMarkup(<Component />);
+      expect(markup).toContain('hello, world');
+    });
+
+    it('renders with props when using custom constructor', () => {
+      class Component extends React.Component {
+        constructor() {
+          super();
+        }
+
+        render() {
+          return <div>{this.props.text}</div>;
+        }
+      }
+
+      const markup = ReactDOMServer.renderToStaticMarkup(
+        <Component text="hello, world" />,
+      );
+      expect(markup).toContain('hello, world');
+    });
+
+    // @gate !disableLegacyContext
+    it('renders with context when using custom constructor', () => {
+      class Component extends React.Component {
+        constructor() {
+          super();
+        }
+
+        render() {
+          return <div>{this.context.text}</div>;
+        }
+      }
+
+      Component.contextTypes = {
+        text: PropTypes.string.isRequired,
+      };
+
+      class ContextProvider extends React.Component {
+        getChildContext() {
+          return {
+            text: 'hello, world',
+          };
+        }
+
+        render() {
+          return this.props.children;
+        }
+      }
+
+      ContextProvider.childContextTypes = {
+        text: PropTypes.string,
+      };
+
+      const markup = ReactDOMServer.renderToStaticMarkup(
+        <ContextProvider>
+          <Component />
+        </ContextProvider>,
+      );
+      assertConsoleErrorDev([
+        'ContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in ContextProvider (at **)',
+        'Component uses the legacy contextTypes API which will soon be removed. ' +
+          'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Component (at **)',
+      ]);
+      expect(markup).toContain('hello, world');
+    });
+
+    it('renders with new context API', () => {
+      const Context = React.createContext(0);
+
+      function Consumer(props) {
+        return (
+          <Context.Consumer>{value => 'Result: ' + value}</Context.Consumer>
+        );
+      }
+
+      const Indirection = React.Fragment;
+
+      function App(props) {
+        return (
+          <Context.Provider value={props.value}>
+            <Context.Provider value={2}>
+              <Consumer />
+            </Context.Provider>
+            <Indirection>
+              <Indirection>
+                <Consumer />
+                <Context.Provider value={3}>
+                  <Consumer />
+                </Context.Provider>
+              </Indirection>
+            </Indirection>
+            <Consumer />
+          </Context.Provider>
+        );
+      }
+
+      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]);
+    });
+
+    it('renders with dispatcher.readContext mechanism', () => {
+      const Context = React.createContext(0);
+
+      function readContext(context) {
+        return ReactSharedInternals.H.readContext(context);
+      }
+
+      function Consumer(props) {
+        return 'Result: ' + readContext(Context);
+      }
+
+      const Indirection = React.Fragment;
+
+      function App(props) {
+        return (
+          <Context.Provider value={props.value}>
+            <Context.Provider value={2}>
+              <Consumer />
+            </Context.Provider>
+            <Indirection>
+              <Indirection>
+                <Consumer />
+                <Context.Provider value={3}>
+                  <Consumer />
+                </Context.Provider>
+              </Indirection>
+            </Indirection>
+            <Consumer />
+          </Context.Provider>
+        );
+      }
+
+      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]);
+    });
+
+    it('renders context API, reentrancy', () => {
+      const Context = React.createContext(0);
+
+      function Consumer(props) {
+        return (
+          <Context.Consumer>{value => 'Result: ' + value}</Context.Consumer>
+        );
+      }
+
+      let reentrantMarkup;
+      function Reentrant() {
+        reentrantMarkup = ReactDOMServer.renderToStaticMarkup(
+          <App value={1} reentrant={false} />,
+        );
+        return null;
+      }
+
+      const Indirection = React.Fragment;
+
+      function App(props) {
+        return (
+          <Context.Provider value={props.value}>
+            {props.reentrant && <Reentrant />}
+            <Context.Provider value={2}>
+              <Consumer />
+            </Context.Provider>
+            <Indirection>
+              <Indirection>
+                <Consumer />
+                <Context.Provider value={3}>
+                  <Consumer />
+                </Context.Provider>
+              </Indirection>
+            </Indirection>
+            <Consumer />
+          </Context.Provider>
+        );
+      }
+
+      const markup = ReactDOMServer.renderToStaticMarkup(
+        <App value={1} reentrant={true} />,
+      );
+      // Extract the numbers rendered by the consumers
+      const results = markup.match(/\d+/g).map(Number);
+      const reentrantResults = reentrantMarkup.match(/\d+/g).map(Number);
+      expect(results).toEqual([2, 1, 3, 1]);
+      expect(reentrantResults).toEqual([2, 1, 3, 1]);
+    });
+
+    it('renders components with different batching strategies', () => {
+      class StaticComponent extends React.Component {
+        render() {
+          const staticContent = ReactDOMServer.renderToStaticMarkup(
+            <div>
+              <img src="foo-bar.jpg" />
+            </div>,
+          );
+          return <div dangerouslySetInnerHTML={{__html: staticContent}} />;
+        }
+      }
+
+      class Component extends React.Component {
+        UNSAFE_componentWillMount() {
+          this.setState({text: 'hello, world'});
+        }
+
+        render() {
+          return <div>{this.state.text}</div>;
+        }
+      }
+
+      expect(
+        ReactDOMServer.renderToString.bind(
+          ReactDOMServer,
+          <div>
+            <StaticComponent />
+            <Component />
+          </div>,
+        ),
+      ).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',
+      );
+    });
+
+    it('aborts synchronously any suspended tasks and renders their fallbacks', () => {
+      const promise = new Promise(res => {});
+      function Suspender() {
+        throw promise;
+      }
+      const response = ReactDOMServer.renderToStaticMarkup(
+        <React.Suspense fallback={'fallback'}>
+          <Suspender />
+        </React.Suspense>,
+      );
+      expect(response).toEqual('fallback');
+    });
+  });
+
+  it('warns with a no-op when an async setState is triggered', () => {
+    class Foo extends React.Component {
+      UNSAFE_componentWillMount() {
+        this.setState({text: 'hello'});
+        setTimeout(() => {
+          this.setState({text: 'error'});
+        });
+      }
+      render() {
+        return <div onClick={() => {}}>{this.state.text}</div>;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Foo />);
+    jest.runOnlyPendingTimers();
+    assertConsoleErrorDev(
+      [
+        '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 Foo component.',
+      ],
+      {withoutStack: true},
+    );
+
+    const markup = ReactDOMServer.renderToStaticMarkup(<Foo />);
+    expect(markup).toBe('<div>hello</div>');
+    // No additional warnings are expected
+    jest.runOnlyPendingTimers();
+  });
+
+  it('warns with a no-op when an async forceUpdate is triggered', () => {
+    class Baz extends React.Component {
+      UNSAFE_componentWillMount() {
+        this.forceUpdate();
+        setTimeout(() => {
+          this.forceUpdate();
+        });
+      }
+
+      render() {
+        return <div onClick={() => {}} />;
+      }
+    }
+
+    ReactDOMServer.renderToString(<Baz />);
+    jest.runOnlyPendingTimers();
+    assertConsoleErrorDev(
+      [
+        'Can only update a mounting component. ' +
+          'This usually means you called forceUpdate() outside componentWillMount() on the server. ' +
+          'This is a no-op.\n' +
+          '\n' +
+          'Please check the code for the Baz component.',
+      ],
+      {withoutStack: true},
+    );
+    const markup = ReactDOMServer.renderToStaticMarkup(<Baz />);
+    expect(markup).toBe('<div></div>');
+  });
+
+  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', () => {
+    function Wrapper(props) {
+      props.children[1] = <p key={1} />; // Mutation is illegal
+      return <div>{props.children}</div>;
+    }
+    if (__DEV__) {
+      expect(() => {
+        ReactDOMServer.renderToStaticMarkup(
+          <Wrapper>
+            <span key={0} />
+            <span key={1} />
+            <span key={2} />
+          </Wrapper>,
+        );
+      }).toThrowError(/Cannot assign to read only property.*/);
+    } else {
+      expect(
+        ReactDOMServer.renderToStaticMarkup(
+          <Wrapper>
+            <span key={0} />
+            <span key={1} />
+            <span key={2} />
+          </Wrapper>,
+        ),
+      ).toContain('<p>');
+    }
+  });
+
+  it('warns about lowercase html but not in svg tags', () => {
+    function CompositeG(props) {
+      // Make sure namespace passes through composites
+      return <g>{props.children}</g>;
+    }
+    ReactDOMServer.renderToStaticMarkup(
+      <div>
+        <inPUT />
+        <svg>
+          <CompositeG>
+            <linearGradient />
+            <foreignObject>
+              {/* back to HTML */}
+              <iFrame />
+            </foreignObject>
+          </CompositeG>
+        </svg>
+      </div>,
+    );
+    assertConsoleErrorDev([
+      '<inPUT /> is using incorrect casing. ' +
+        'Use PascalCase for React components, ' +
+        'or lowercase for HTML elements.\n' +
+        '    in inPUT (at **)',
+      // linearGradient doesn't warn
+      '<iFrame /> is using incorrect casing. ' +
+        'Use PascalCase for React components, ' +
+        'or lowercase for HTML elements.\n' +
+        '    in iFrame (at **)',
+    ]);
+  });
+
+  it('should warn about contentEditable and children', () => {
+    ReactDOMServer.renderToString(<div contentEditable={true} children="" />);
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('should warn when server rendering a class with a render method that does not extend React.Component', () => {
+    class ClassWithRenderNotExtended {
+      render() {
+        return <div />;
+      }
+    }
+
+    expect(() =>
+      ReactDOMServer.renderToString(<ClassWithRenderNotExtended />),
+    ).toThrow(TypeError);
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in ClassWithRenderNotExtended (at **)',
+    ]);
+
+    // Test deduplication
+    expect(() => {
+      ReactDOMServer.renderToString(<ClassWithRenderNotExtended />);
+    }).toThrow(TypeError);
+  });
+
+  // We're just testing importing, not using it.
+  // It is important because even isomorphic components may import it.
+  it('can import react-dom in Node environment', () => {
+    if (
+      typeof requestAnimationFrame !== 'undefined' ||
+      global.hasOwnProperty('requestAnimationFrame') ||
+      typeof requestIdleCallback !== 'undefined' ||
+      global.hasOwnProperty('requestIdleCallback') ||
+      typeof window !== 'undefined' ||
+      global.hasOwnProperty('window')
+    ) {
+      // Don't remove this. This test is specifically checking
+      // what happens when they *don't* exist. It's useless otherwise.
+      throw new Error('Expected this test to run in a Node environment.');
+    }
+    jest.resetModules();
+    expect(() => {
+      require('react-dom');
+    }).not.toThrow();
+  });
+
+  it('includes a useful stack in warnings', () => {
+    function A() {
+      return null;
+    }
+
+    function B() {
+      return (
+        <font>
+          <C>
+            <span ariaTypo="no" />
+          </C>
+        </font>
+      );
+    }
+
+    class C extends React.Component {
+      render() {
+        return <b>{this.props.children}</b>;
+      }
+    }
+
+    function Child() {
+      return [<A key="1" />, <B key="2" />, <span ariaTypo2="no" key="3" />];
+    }
+
+    function App() {
+      return (
+        <div>
+          <section />
+          <span>
+            <Child />
+          </span>
+        </div>
+      );
+    }
+
+    ReactDOMServer.renderToString(<App />);
+    assertConsoleErrorDev([
+      'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in B (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in App (at **)',
+      'Invalid ARIA attribute `ariaTypo2`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('reports stacks with re-entrant renderToString() calls', () => {
+    function Child2(props) {
+      return <span ariaTypo3="no">{props.children}</span>;
+    }
+
+    function App2() {
+      return (
+        <Child2>
+          {ReactDOMServer.renderToString(<blink ariaTypo2="no" />)}
+        </Child2>
+      );
+    }
+
+    function Child() {
+      return (
+        <span ariaTypo4="no">{ReactDOMServer.renderToString(<App2 />)}</span>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <span ariaTypo="no" />
+          <Child />
+          <font ariaTypo5="no" />
+        </div>
+      );
+    }
+
+    ReactDOMServer.renderToString(<App />);
+    assertConsoleErrorDev([
+      // ReactDOMServer(App > div > span)
+      'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in App (at **)',
+      // ReactDOMServer(App > div > Child) >>> ReactDOMServer(App2) >>> ReactDOMServer(blink)
+      'Invalid ARIA attribute `ariaTypo2`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in blink (at **)\n' +
+        '    in App2 (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in App (at **)',
+      // ReactDOMServer(App > div > Child) >>> ReactDOMServer(App2 > Child2 > span)
+      'Invalid ARIA attribute `ariaTypo3`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in Child2 (at **)\n' +
+        '    in App2 (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in App (at **)',
+      // ReactDOMServer(App > div > Child > span)
+      'Invalid ARIA attribute `ariaTypo4`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in span (at **)\n' +
+        '    in Child (at **)\n' +
+        '    in App (at **)',
+      // ReactDOMServer(App > div > font)
+      'Invalid ARIA attribute `ariaTypo5`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in font (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('should warn if an invalid contextType is defined', () => {
+    const Context = React.createContext();
+    class ComponentA extends React.Component {
+      static contextType = Context.Consumer;
+      render() {
+        return <div />;
+      }
+    }
+
+    ReactDOMServer.renderToString(<ComponentA />);
+    assertConsoleErrorDev([
+      'ComponentA defines an invalid contextType. ' +
+        'contextType should point to the Context object returned by React.createContext(). ' +
+        'Did you accidentally pass the Context.Consumer instead?\n' +
+        '    in ComponentA (at **)',
+    ]);
+
+    // Warnings should be deduped by component type
+    ReactDOMServer.renderToString(<ComponentA />);
+
+    class ComponentB extends React.Component {
+      static contextType = Context.Provider;
+      render() {
+        return <div />;
+      }
+    }
+    // Does not warn because Context === Context.Provider.
+    ReactDOMServer.renderToString(<ComponentB />);
+  });
+
+  it('should not warn when class contextType is null', () => {
+    class Foo extends React.Component {
+      static contextType = null; // Handy for conditional declaration
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    expect(() => {
+      ReactDOMServer.renderToString(<Foo />);
+    }).toThrow("Cannot read property 'world' of undefined");
+  });
+
+  it('should warn when class contextType is undefined', () => {
+    class Foo extends React.Component {
+      // This commonly happens with circular deps
+      // https://github.com/facebook/react/issues/13969
+      static contextType = undefined;
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    expect(() => {
+      ReactDOMServer.renderToString(<Foo />);
+    }).toThrow("Cannot read property 'world' of undefined");
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should warn when class contextType is an object', () => {
+    class Foo extends React.Component {
+      // Can happen due to a typo
+      static contextType = {
+        x: 42,
+        y: 'hello',
+      };
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    expect(() => {
+      ReactDOMServer.renderToString(<Foo />);
+    }).toThrow("Cannot read property 'hello' of undefined");
+    assertConsoleErrorDev([
+      '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}.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should warn when class contextType is a primitive', () => {
+    class Foo extends React.Component {
+      static contextType = 'foo';
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    expect(() => {
+      ReactDOMServer.renderToString(<Foo />);
+    }).toThrow("Cannot read property 'world' of undefined");
+    assertConsoleErrorDev([
+      'Foo defines an invalid contextType. ' +
+        'contextType should point to the Context object returned by React.createContext(). ' +
+        'However, it is set to a string.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  describe('custom element server rendering', () => {
+    it('String properties should be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo="bar" />,
+      );
+      expect(output).toBe(`<my-custom-element foo="bar"></my-custom-element>`);
+    });
+
+    it('Number properties should be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={5} />,
+      );
+      expect(output).toBe(`<my-custom-element foo="5"></my-custom-element>`);
+    });
+
+    it('Object properties should not be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={{foo: 'bar'}} />,
+      );
+      expect(output).toBe(`<my-custom-element></my-custom-element>`);
+    });
+
+    it('Array properties should not be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={['foo', 'bar']} />,
+      );
+      expect(output).toBe(`<my-custom-element></my-custom-element>`);
+    });
+
+    it('Function properties should not be server rendered for custom elements', () => {
+      const output = ReactDOMServer.renderToString(
+        <my-custom-element foo={() => console.log('bar')} />,
+      );
+      expect(output).toBe(`<my-custom-element></my-custom-element>`);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js
new file mode 100644
index 00000000000..bfcb32f4f82
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+let ReactDOMServerBrowser;
+
+describe('ReactServerRenderingBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMServer = require('react-dom/server');
+    // For extra isolation between what would be two bundles on npm
+    jest.resetModules();
+    ReactDOMServerBrowser = require('react-dom/server.browser');
+  });
+
+  it('returns the same results as react-dom/server', () => {
+    class Nice extends React.Component {
+      render() {
+        return <h2>I am feeling very good today, thanks, how are you?</h2>;
+      }
+    }
+    function Greeting() {
+      return (
+        <div>
+          <h1>How are you?</h1>
+          <Nice />
+        </div>
+      );
+    }
+    expect(ReactDOMServerBrowser.renderToString(<Greeting />)).toEqual(
+      ReactDOMServer.renderToString(<Greeting />),
+    );
+    expect(ReactDOMServerBrowser.renderToStaticMarkup(<Greeting />)).toEqual(
+      ReactDOMServer.renderToStaticMarkup(<Greeting />),
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
new file mode 100644
index 00000000000..5ea0ceeac45
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -0,0 +1,810 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMServer;
+let ReactDOMServerBrowser;
+let waitForAll;
+let act;
+let assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+// These tests rely both on ReactDOMServer and ReactDOM.
+// If a test only needs ReactDOMServer, put it in ReactServerRendering-test instead.
+describe('ReactDOMServerHydration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    ReactDOMServerBrowser = require('react-dom/server.browser');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    act = InternalTestUtils.act;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+    assertConsoleWarnDev = InternalTestUtils.assertConsoleWarnDev;
+  });
+
+  it('should have the correct mounting behavior', async () => {
+    let mountCount = 0;
+    let numClicks = 0;
+
+    class TestComponent extends React.Component {
+      spanRef = React.createRef();
+
+      componentDidMount() {
+        mountCount++;
+      }
+
+      click = () => {
+        numClicks++;
+      };
+
+      render() {
+        return (
+          <span ref={this.spanRef} onClick={this.click}>
+            Name: {this.props.name}
+          </span>
+        );
+      }
+    }
+
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    try {
+      let root = ReactDOMClient.createRoot(element);
+      await act(() => {
+        root.render(<TestComponent />);
+      });
+
+      let lastMarkup = element.innerHTML;
+
+      // Exercise the update path. Markup should not change,
+      // but some lifecycle methods should be run again.
+      await act(() => {
+        root.render(<TestComponent name="x" />);
+      });
+      expect(mountCount).toEqual(1);
+
+      // Unmount and remount. We should get another mount event and
+      // we should get different markup, as the IDs are unique each time.
+      root.unmount();
+      expect(element.innerHTML).toEqual('');
+      root = ReactDOMClient.createRoot(element);
+      await act(() => {
+        root.render(<TestComponent name="x" />);
+      });
+
+      expect(mountCount).toEqual(2);
+      expect(element.innerHTML).not.toEqual(lastMarkup);
+
+      // Now kill the node and render it on top of server-rendered markup, as if
+      // we used server rendering. We should mount again, but the markup should
+      // be unchanged. We will append a sentinel at the end of innerHTML to be
+      // sure that innerHTML was not changed.
+      await act(() => {
+        root.unmount();
+      });
+      expect(element.innerHTML).toEqual('');
+
+      lastMarkup = ReactDOMServer.renderToString(<TestComponent name="x" />);
+      element.innerHTML = lastMarkup;
+
+      let instance;
+
+      root = await act(() => {
+        return ReactDOMClient.hydrateRoot(
+          element,
+          <TestComponent name="x" ref={current => (instance = current)} />,
+        );
+      });
+      expect(mountCount).toEqual(3);
+      expect(element.innerHTML).toBe(lastMarkup);
+
+      // Ensure the events system works after mount into server markup
+      expect(numClicks).toEqual(0);
+      instance.spanRef.current.click();
+      expect(numClicks).toEqual(1);
+
+      await act(() => {
+        root.unmount();
+      });
+      expect(element.innerHTML).toEqual('');
+
+      // Now simulate a situation where the app is not idempotent. React should
+      // warn but do the right thing.
+      element.innerHTML = lastMarkup;
+      root = await act(() => {
+        return ReactDOMClient.hydrateRoot(
+          element,
+          <TestComponent
+            name="y"
+            ref={current => {
+              instance = current;
+            }}
+          />,
+          {
+            onRecoverableError: error => {},
+          },
+        );
+      });
+
+      expect(mountCount).toEqual(4);
+      expect(element.innerHTML.length > 0).toBe(true);
+      expect(element.innerHTML).not.toEqual(lastMarkup);
+
+      // Ensure the events system works after markup mismatch.
+      expect(numClicks).toEqual(1);
+      instance.spanRef.current.click();
+      expect(numClicks).toEqual(2);
+    } finally {
+      document.body.removeChild(element);
+    }
+  });
+
+  // We have a polyfill for autoFocus on the client, but we intentionally don't
+  // want it to call focus() when hydrating because this can mess up existing
+  // focus before the JS has loaded.
+  it('should emit autofocus on the server but not focus() when hydrating', async () => {
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(
+      <input autoFocus={true} />,
+    );
+    expect(element.firstChild.autofocus).toBe(true);
+
+    // It should not be called on mount.
+    element.firstChild.focus = jest.fn();
+    const root = await act(() =>
+      ReactDOMClient.hydrateRoot(element, <input autoFocus={true} />),
+    );
+    expect(element.firstChild.focus).not.toHaveBeenCalled();
+
+    // Or during an update.
+    await act(() => {
+      root.render(<input autoFocus={true} />);
+    });
+    expect(element.firstChild.focus).not.toHaveBeenCalled();
+  });
+
+  it('should not focus on either server or client with autofocus={false}', async () => {
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(
+      <input autoFocus={false} />,
+    );
+    expect(element.firstChild.autofocus).toBe(false);
+
+    element.firstChild.focus = jest.fn();
+    const root = await act(() =>
+      ReactDOMClient.hydrateRoot(element, <input autoFocus={false} />),
+    );
+
+    expect(element.firstChild.focus).not.toHaveBeenCalled();
+
+    await act(() => {
+      root.render(<input autoFocus={false} />);
+    });
+    expect(element.firstChild.focus).not.toHaveBeenCalled();
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/11726
+  it('should not focus on either server or client with autofocus={false} even if there is a markup mismatch', async () => {
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(
+      <button autoFocus={false}>server</button>,
+    );
+    expect(element.firstChild.autofocus).toBe(false);
+    const onFocusBeforeHydration = jest.fn();
+    const onFocusAfterHydration = jest.fn();
+    element.firstChild.focus = onFocusBeforeHydration;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        element,
+        <button autoFocus={false} onFocus={onFocusAfterHydration}>
+          client
+        </button>,
+        {onRecoverableError: error => {}},
+      );
+    });
+
+    expect(onFocusBeforeHydration).not.toHaveBeenCalled();
+    expect(onFocusAfterHydration).not.toHaveBeenCalled();
+  });
+
+  it('should warn when the style property differs', async () => {
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(
+      <div style={{textDecoration: 'none', color: 'black', height: '10px'}} />,
+    );
+    expect(element.firstChild.style.textDecoration).toBe('none');
+    expect(element.firstChild.style.color).toBe('black');
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        element,
+        <div
+          style={{textDecoration: 'none', color: 'white', height: '10px'}}
+        />,
+      );
+    });
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" +
+        '\n' +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension ' +
+        'installed which messes with the HTML before React loaded.\n' +
+        '\n' +
+        'https://react.dev/link/hydration-mismatch\n' +
+        '\n' +
+        '  <div\n    style={{\n+     textDecoration: "none"\n' +
+        '+     color: "white"\n' +
+        '-     color: "black"\n' +
+        '+     height: "10px"\n' +
+        '-     height: "10px"\n' +
+        '-     text-decoration: "none"\n' +
+        '    }}\n' +
+        '  >\n' +
+        '\n    in div (at **)',
+    ]);
+  });
+
+  it('should not warn when the style property differs on whitespace or order in IE', async () => {
+    document.documentMode = 11;
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    try {
+      const element = document.createElement('div');
+
+      // Simulate IE normalizing the style attribute. IE makes it equal to
+      // what's available under `node.style.cssText`.
+      element.innerHTML =
+        '<div style="height: 10px; color: black; text-decoration: none;"></div>';
+
+      await act(() => {
+        ReactDOMClient.hydrateRoot(
+          element,
+          <div
+            style={{textDecoration: 'none', color: 'black', height: '10px'}}
+          />,
+        );
+      });
+    } finally {
+      delete document.documentMode;
+    }
+  });
+
+  it('should warn when the style property differs on whitespace in non-IE browsers', async () => {
+    const element = document.createElement('div');
+
+    element.innerHTML =
+      '<div style="text-decoration: none; color: black; height: 10px;"></div>';
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        element,
+        <div
+          style={{textDecoration: 'none', color: 'black', height: '10px'}}
+        />,
+      );
+    });
+    assertConsoleErrorDev([
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. " +
+        "This won't be patched up. This can happen if a SSR-ed Client Component used:\n" +
+        '\n' +
+        "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+        "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+        "- Date formatting in a user's locale which doesn't match the server.\n" +
+        '- External changing data without sending a snapshot of it along with the HTML.\n' +
+        '- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension ' +
+        'installed which messes with the HTML before React loaded.\n' +
+        '\n' +
+        'https://react.dev/link/hydration-mismatch\n' +
+        '\n' +
+        '  <div\n' +
+        '    style={{\n' +
+        '+     textDecoration: "none"\n' +
+        '+     color: "black"\n' +
+        '-     color: "black"\n' +
+        '+     height: "10px"\n' +
+        '-     height: "10px"\n' +
+        '-     text-decoration: "none"\n' +
+        '    }}\n' +
+        '  >\n' +
+        '\n    in div (at **)',
+    ]);
+  });
+
+  it('should throw rendering portals on the server', () => {
+    const div = document.createElement('div');
+    expect(() => {
+      ReactDOMServer.renderToString(
+        <div>{ReactDOM.createPortal(<div />, div)}</div>,
+      );
+    }).toThrow(
+      'Portals are not currently supported by the server renderer. ' +
+        'Render them conditionally so that they only appear on the client render.',
+    );
+  });
+
+  it('should be able to render and hydrate Mode components', async () => {
+    class ComponentWithWarning extends React.Component {
+      componentWillMount() {
+        // Expected warning
+      }
+      render() {
+        return 'Hi';
+      }
+    }
+
+    const markup = (
+      <React.StrictMode>
+        <ComponentWithWarning />
+      </React.StrictMode>
+    );
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    assertConsoleWarnDev([
+      'componentWillMount has been renamed, and is not recommended for use. ' +
+        'See https://react.dev/link/unsafe-component-lifecycles for details.\n' +
+        '\n' +
+        '* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.\n' +
+        '\n' +
+        'Please update the following components: ComponentWithWarning\n' +
+        '    in ComponentWithWarning (at **)',
+    ]);
+    expect(element.textContent).toBe('Hi');
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(element, markup);
+    });
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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' +
+          '\n' +
+          'Please update the following components: ComponentWithWarning',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+    expect(element.textContent).toBe('Hi');
+  });
+
+  it('should be able to render and hydrate forwardRef components', async () => {
+    const FunctionComponent = ({label, forwardedRef}) => (
+      <div ref={forwardedRef}>{label}</div>
+    );
+    const WrappedFunctionComponent = React.forwardRef((props, ref) => (
+      <FunctionComponent {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+    const markup = <WrappedFunctionComponent ref={ref} label="Hi" />;
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(element.textContent).toBe('Hi');
+    expect(ref.current).toBe(null);
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(element, markup);
+    });
+    expect(element.textContent).toBe('Hi');
+    expect(ref.current.tagName).toBe('DIV');
+  });
+
+  it('should be able to render and hydrate Profiler components', async () => {
+    const callback = jest.fn();
+    const markup = (
+      <React.Profiler id="profiler" onRender={callback}>
+        <div>Hi</div>
+      </React.Profiler>
+    );
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(element.textContent).toBe('Hi');
+    expect(callback).not.toHaveBeenCalled();
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(element, markup);
+    });
+    expect(element.textContent).toBe('Hi');
+    if (__DEV__) {
+      expect(callback).toHaveBeenCalledTimes(1);
+      const [id, phase] = callback.mock.calls[0];
+      expect(id).toBe('profiler');
+      expect(phase).toBe('mount');
+    } else {
+      expect(callback).toHaveBeenCalledTimes(0);
+    }
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/11423
+  it('should ignore noscript content on the client and not warn about mismatches', async () => {
+    const callback = jest.fn();
+    const TestComponent = ({onRender}) => {
+      onRender();
+      return <div>Enable JavaScript to run this app.</div>;
+    };
+    const markup = (
+      <noscript>
+        <TestComponent onRender={callback} />
+      </noscript>
+    );
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(element.textContent).toBe(
+      '<div>Enable JavaScript to run this app.</div>',
+    );
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(element, markup);
+    });
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(element.textContent).toBe(
+      '<div>Enable JavaScript to run this app.</div>',
+    );
+  });
+
+  it('should be able to use lazy components after hydrating', async () => {
+    let resolveLazy;
+    const Lazy = React.lazy(
+      () =>
+        new Promise(resolve => {
+          resolveLazy = () => {
+            resolve({
+              default: function World() {
+                return 'world';
+              },
+            });
+          };
+        }),
+    );
+    class HelloWorld extends React.Component {
+      state = {isClient: false};
+      componentDidMount() {
+        this.setState({
+          isClient: true,
+        });
+      }
+      render() {
+        return (
+          <div>
+            Hello{' '}
+            {this.state.isClient && (
+              <React.Suspense fallback="loading">
+                <Lazy />
+              </React.Suspense>
+            )}
+          </div>
+        );
+      }
+    }
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(<HelloWorld />);
+    expect(element.textContent).toBe('Hello ');
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(element, <HelloWorld />);
+    });
+    expect(element.textContent).toBe('Hello loading');
+
+    // Resolve Lazy component
+    await act(() => resolveLazy());
+    expect(element.textContent).toBe('Hello world');
+  });
+
+  it('does not re-enter hydration after committing the first one', async () => {
+    const finalHTML = ReactDOMServer.renderToString(<div />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    const root = await act(() =>
+      ReactDOMClient.hydrateRoot(container, <div />),
+    );
+    await act(() => root.render(null));
+    // This should not reenter hydration state and therefore not trigger hydration
+    // warnings.
+    await act(() => root.render(<div />));
+  });
+
+  // regression test for https://github.com/facebook/react/issues/17170
+  it('should not warn if dangerouslySetInnerHtml=undefined', async () => {
+    const domElement = document.createElement('div');
+    const reactElement = (
+      <div dangerouslySetInnerHTML={undefined}>
+        <p>Hello, World!</p>
+      </div>
+    );
+    const markup = ReactDOMServer.renderToStaticMarkup(reactElement);
+    domElement.innerHTML = markup;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(domElement, reactElement);
+    });
+
+    expect(domElement.innerHTML).toEqual(markup);
+  });
+
+  it('should warn if innerHTML mismatches with dangerouslySetInnerHTML=undefined and children on the client', async () => {
+    const domElement = document.createElement('div');
+    const markup = ReactDOMServer.renderToStaticMarkup(
+      <div dangerouslySetInnerHTML={{__html: '<p>server</p>'}} />,
+    );
+    domElement.innerHTML = markup;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        domElement,
+        <div dangerouslySetInnerHTML={undefined}>
+          <p>client</p>
+        </div>,
+        {onRecoverableError: error => {}},
+      );
+    });
+
+    expect(domElement.innerHTML).not.toEqual(markup);
+  });
+
+  it('should warn if innerHTML mismatches with dangerouslySetInnerHTML=undefined on the client', async () => {
+    const domElement = document.createElement('div');
+    const markup = ReactDOMServer.renderToStaticMarkup(
+      <div dangerouslySetInnerHTML={{__html: '<p>server</p>'}} />,
+    );
+    domElement.innerHTML = markup;
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        domElement,
+        <div dangerouslySetInnerHTML={undefined} />,
+        {onRecoverableError: error => {}},
+      );
+    });
+
+    expect(domElement.innerHTML).not.toEqual(markup);
+  });
+
+  it('should warn when hydrating read-only properties', async () => {
+    const readOnlyProperties = [
+      'offsetParent',
+      'offsetTop',
+      'offsetLeft',
+      'offsetWidth',
+      'offsetHeight',
+      'isContentEditable',
+      'outerText',
+      'outerHTML',
+    ];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const readOnlyProperty of readOnlyProperties) {
+      const props = {};
+      props[readOnlyProperty] = 'hello';
+      const jsx = React.createElement('my-custom-element', props);
+      const element = document.createElement('div');
+      element.innerHTML = ReactDOMServer.renderToString(jsx);
+      await act(() => {
+        ReactDOMClient.hydrateRoot(element, jsx);
+      });
+      assertConsoleErrorDev([
+        `Assignment to read-only property will result in a no-op: \`${readOnlyProperty}\`
+            in my-custom-element (at **)`,
+      ]);
+    }
+  });
+
+  it('should not re-assign properties on hydration', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const jsx = React.createElement('my-custom-element', {
+      str: 'string',
+      obj: {foo: 'bar'},
+    });
+
+    container.innerHTML = ReactDOMServer.renderToString(jsx);
+    const customElement = container.querySelector('my-custom-element');
+
+    // Install setters to activate `in` check
+    Object.defineProperty(customElement, 'str', {
+      set: function (x) {
+        this._str = x;
+      },
+      get: function () {
+        return this._str;
+      },
+    });
+    Object.defineProperty(customElement, 'obj', {
+      set: function (x) {
+        this._obj = x;
+      },
+      get: function () {
+        return this._obj;
+      },
+    });
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, jsx);
+    });
+
+    expect(customElement.getAttribute('str')).toBe('string');
+    expect(customElement.getAttribute('obj')).toBe(null);
+    expect(customElement.str).toBe(undefined);
+    expect(customElement.obj).toBe(undefined);
+  });
+
+  it('refers users to apis that support Suspense when something suspends', async () => {
+    const theInfinitePromise = new Promise(() => {});
+    function InfiniteSuspend() {
+      throw theInfinitePromise;
+    }
+
+    function App({isClient}) {
+      return (
+        <div>
+          <React.Suspense fallback={'fallback'}>
+            {isClient ? 'resolved' : <InfiniteSuspend />}
+          </React.Suspense>
+        </div>
+      );
+    }
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(
+      <App isClient={false} />,
+    );
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push(error.message);
+      },
+    });
+
+    await waitForAll([]);
+    expect(errors.length).toBe(1);
+    if (__DEV__) {
+      expect(errors[0]).toBe(
+        'Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used "renderToString" ' +
+          'which does not support Suspense. If you intended for this Suspense boundary to render ' +
+          'the fallback content on the server consider throwing an Error somewhere within the ' +
+          'Suspense boundary. If you intended to have the server wait for the suspended component ' +
+          'please switch to "renderToPipeableStream" which supports Suspense on the server',
+      );
+    } else {
+      expect(errors[0]).toBe(
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
+      );
+    }
+  });
+
+  it('refers users to apis that support Suspense when something suspends (browser)', async () => {
+    const theInfinitePromise = new Promise(() => {});
+    function InfiniteSuspend() {
+      throw theInfinitePromise;
+    }
+
+    function App({isClient}) {
+      return (
+        <div>
+          <React.Suspense fallback={'fallback'}>
+            {isClient ? 'resolved' : <InfiniteSuspend />}
+          </React.Suspense>
+        </div>
+      );
+    }
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServerBrowser.renderToString(
+      <App isClient={false} />,
+    );
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error, errorInfo) {
+        errors.push(error.message);
+      },
+    });
+
+    await waitForAll([]);
+    expect(errors.length).toBe(1);
+    if (__DEV__) {
+      expect(errors[0]).toBe(
+        'Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'The server used "renderToString" ' +
+          'which does not support Suspense. If you intended for this Suspense boundary to render ' +
+          'the fallback content on the server consider throwing an Error somewhere within the ' +
+          'Suspense boundary. If you intended to have the server wait for the suspended component ' +
+          'please switch to "renderToReadableStream" which supports Suspense on the server',
+      );
+    } else {
+      expect(errors[0]).toBe(
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
+      );
+    }
+  });
+
+  it('allows rendering extra hidden inputs in a form', async () => {
+    const element = document.createElement('div');
+    element.innerHTML =
+      '<form>' +
+      '<input type="hidden" /><input type="hidden" name="a" value="A" />' +
+      '<input type="hidden" /><input type="submit" name="b" value="B" />' +
+      '<input type="hidden" /><button name="c" value="C"></button>' +
+      '<input type="hidden" />' +
+      '</form>';
+    const form = element.firstChild;
+    const ref = React.createRef();
+    const a = React.createRef();
+    const b = React.createRef();
+    const c = React.createRef();
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(
+        element,
+        <form ref={ref}>
+          <input type="hidden" name="a" value="A" ref={a} />
+          <input type="submit" name="b" value="B" ref={b} />
+          <button name="c" value="C" ref={c} />
+        </form>,
+      );
+    });
+
+    // The content should not have been client rendered.
+    expect(ref.current).toBe(form);
+
+    expect(a.current.name).toBe('a');
+    expect(a.current.value).toBe('A');
+    expect(b.current.name).toBe('b');
+    expect(b.current.value).toBe('B');
+    expect(c.current.name).toBe('c');
+    expect(c.current.value).toBe('C');
+  });
+
+  it('allows rendering extra hidden inputs immediately before a text instance', async () => {
+    const element = document.createElement('div');
+    element.innerHTML =
+      '<button><input name="a" value="A" type="hidden" />Click <!-- -->me</button>';
+    const button = element.firstChild;
+    const ref = React.createRef();
+    const extraText = 'me';
+
+    await act(() => {
+      ReactDOMClient.hydrateRoot(
+        element,
+        <button ref={ref}>Click {extraText}</button>,
+      );
+    });
+
+    expect(ref.current).toBe(button);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactStartTransitionMultipleRenderers-test.js b/packages/react-dom/src/__tests__/ReactStartTransitionMultipleRenderers-test.js
new file mode 100644
index 00000000000..ccff2abf364
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactStartTransitionMultipleRenderers-test.js
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactStartTransitionMultipleRenderers', () => {
+  let act;
+  let container;
+  let React;
+  let ReactDOMClient;
+  let Scheduler;
+  let assertLog;
+  let startTransition;
+  let useOptimistic;
+  let textCache;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    startTransition = React.startTransition;
+    useOptimistic = React.useOptimistic;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t(text));
+    }
+  }
+
+  function getText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+      return thenable;
+    } else {
+      switch (record.status) {
+        case 'pending':
+          return record.value;
+        case 'rejected':
+          return Promise.reject(record.value);
+        case 'resolved':
+          return Promise.resolve(record.value);
+      }
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  // This test imports multiple reconcilers. Because of how the renderers are
+  // built, it only works when running tests using the actual build artifacts,
+  // not the source files.
+  // @gate !source
+  it('React.startTransition works across multiple renderers', async () => {
+    const ReactNoop = require('react-noop-renderer');
+
+    const setIsPendings = new Set();
+
+    function App() {
+      const [isPending, setIsPending] = useOptimistic(false);
+      setIsPendings.add(setIsPending);
+      return <Text text={isPending ? 'Pending' : 'Not pending'} />;
+    }
+
+    const noopRoot = ReactNoop.createRoot(null);
+    const domRoot = ReactDOMClient.createRoot(container);
+
+    // Run the same component in two separate renderers.
+    await act(() => {
+      noopRoot.render(<App />);
+      domRoot.render(<App />);
+    });
+    assertLog(['Not pending', 'Not pending']);
+    expect(container.textContent).toEqual('Not pending');
+    expect(noopRoot).toMatchRenderedOutput('Not pending');
+
+    await act(() => {
+      startTransition(async () => {
+        // Wait until after an async gap before setting the optimistic state.
+        await getText('Wait before setting isPending');
+        setIsPendings.forEach(setIsPending => setIsPending(true));
+
+        // The optimistic state should not be reverted until the
+        // action completes.
+        await getText('Wait until end of async action');
+      });
+    });
+
+    await act(() => resolveText('Wait before setting isPending'));
+    assertLog(['Pending', 'Pending']);
+    expect(container.textContent).toEqual('Pending');
+    expect(noopRoot).toMatchRenderedOutput('Pending');
+
+    await act(() => resolveText('Wait until end of async action'));
+    assertLog(['Not pending', 'Not pending']);
+    expect(container.textContent).toEqual('Not pending');
+    expect(noopRoot).toMatchRenderedOutput('Not pending');
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
new file mode 100644
index 00000000000..64ccc387d75
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -0,0 +1,783 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let act;
+let container;
+let assertLog;
+let assertConsoleErrorDev;
+
+jest.useRealTimers();
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+function sleep(period) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(true);
+    }, period);
+  });
+}
+
+describe('React.act()', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  let root = null;
+  const renderConcurrent = (el, dom) => {
+    root = ReactDOMClient.createRoot(dom);
+    if (__DEV__) {
+      act(() => root.render(el));
+    } else {
+      root.render(el);
+    }
+  };
+
+  const unmountConcurrent = _dom => {
+    if (__DEV__) {
+      act(() => {
+        if (root !== null) {
+          root.unmount();
+          root = null;
+        }
+      });
+    } else {
+      if (root !== null) {
+        root.unmount();
+        root = null;
+      }
+    }
+  };
+
+  const rerenderConcurrent = el => {
+    act(() => root.render(el));
+  };
+
+  runActTests(renderConcurrent, unmountConcurrent, rerenderConcurrent);
+
+  describe('unacted effects', () => {
+    function App() {
+      React.useEffect(() => {}, []);
+      return null;
+    }
+
+    // @gate __DEV__
+    it('does not warn', () => {
+      root = ReactDOMClient.createRoot(document.createElement('div'));
+      act(() => root.render(<App />));
+    });
+  });
+});
+
+function runActTests(render, unmount, rerender) {
+  describe('concurrent render', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      React = require('react');
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler');
+      act = React.act;
+
+      const InternalTestUtils = require('internal-test-utils');
+      assertLog = InternalTestUtils.assertLog;
+      assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      unmount(container);
+      document.body.removeChild(container);
+    });
+
+    describe('sync', () => {
+      // @gate __DEV__
+      it('can use act to flush effects', () => {
+        function App() {
+          React.useEffect(() => {
+            Scheduler.log(100);
+          });
+          return null;
+        }
+
+        act(() => {
+          render(<App />, container);
+        });
+
+        assertLog([100]);
+      });
+
+      // @gate __DEV__
+      it('flushes effects on every call', async () => {
+        function App() {
+          const [ctr, setCtr] = React.useState(0);
+          React.useEffect(() => {
+            Scheduler.log(ctr);
+          });
+          return (
+            <button id="button" onClick={() => setCtr(x => x + 1)}>
+              {ctr}
+            </button>
+          );
+        }
+
+        act(() => {
+          render(<App />, container);
+        });
+        assertLog([0]);
+        const button = container.querySelector('#button');
+        function click() {
+          button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+        }
+
+        await act(async () => {
+          click();
+          click();
+          click();
+        });
+        // it consolidates the 3 updates, then fires the effect
+        assertLog([3]);
+        await act(async () => click());
+        assertLog([4]);
+        await act(async () => click());
+        assertLog([5]);
+        expect(button.innerHTML).toBe('5');
+      });
+
+      // @gate __DEV__
+      it("should keep flushing effects until they're done", () => {
+        function App() {
+          const [ctr, setCtr] = React.useState(0);
+          React.useEffect(() => {
+            if (ctr < 5) {
+              setCtr(x => x + 1);
+            }
+          });
+          return ctr;
+        }
+
+        act(() => {
+          render(<App />, container);
+        });
+
+        expect(container.innerHTML).toBe('5');
+      });
+
+      // @gate __DEV__
+      it('should flush effects only on exiting the outermost act', () => {
+        function App() {
+          React.useEffect(() => {
+            Scheduler.log(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
+          assertLog([]);
+        });
+        // but after exiting the last one, effects get flushed
+        assertLog([0]);
+      });
+
+      // @gate __DEV__
+      it('warns if a setState is called outside of act(...)', () => {
+        let setValue = null;
+        function App() {
+          const [value, _setValue] = React.useState(0);
+          setValue = _setValue;
+          return value;
+        }
+
+        act(() => {
+          render(<App />, container);
+        });
+
+        setValue(1);
+        assertConsoleErrorDev([
+          'An update to App 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' +
+            '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://react.dev/link/wrap-tests-with-act\n' +
+            '    in App (at **)',
+        ]);
+      });
+
+      // @gate __DEV__
+      it('warns if a setState is called outside of act(...) after a component threw', () => {
+        let setValue = null;
+        function App({defaultValue}) {
+          if (defaultValue === undefined) {
+            throw new Error('some error');
+          }
+          const [value, _setValue] = React.useState(defaultValue);
+          setValue = _setValue;
+          return value;
+        }
+
+        expect(() => {
+          act(() => {
+            render(<App defaultValue={undefined} />, container);
+          });
+        }).toThrow('some error');
+
+        act(() => {
+          rerender(<App defaultValue={0} />, container);
+        });
+
+        setValue(1);
+        assertConsoleErrorDev([
+          'An update to App 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' +
+            '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://react.dev/link/wrap-tests-with-act\n' +
+            '    in App (at **)',
+        ]);
+      });
+
+      // @gate __DEV__
+      it('does not warn if IS_REACT_ACT_ENVIRONMENT is set to false', () => {
+        let setState;
+        function App() {
+          const [state, _setState] = React.useState(0);
+          setState = _setState;
+          return state;
+        }
+
+        act(() => {
+          render(<App />, container);
+        });
+
+        // First show that it does warn
+        setState(1);
+        assertConsoleErrorDev([
+          'An update to App 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' +
+            '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://react.dev/link/wrap-tests-with-act\n' +
+            '    in App (at **)',
+        ]);
+
+        // Now do the same thing again, but disable with the environment flag
+        const prevIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
+        global.IS_REACT_ACT_ENVIRONMENT = false;
+        try {
+          setState(2);
+        } finally {
+          global.IS_REACT_ACT_ENVIRONMENT = prevIsActEnvironment;
+        }
+
+        // When the flag is restored to its previous value, it should start
+        // warning again. This shows that React reads the flag each time.
+        setState(3);
+        assertConsoleErrorDev([
+          'An update to App 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' +
+            '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://react.dev/link/wrap-tests-with-act\n' +
+            '    in App (at **)',
+        ]);
+      });
+
+      describe('fake timers', () => {
+        beforeEach(() => {
+          jest.useFakeTimers();
+        });
+
+        afterEach(() => {
+          jest.useRealTimers();
+        });
+
+        // @gate __DEV__
+        it('lets a ticker update', () => {
+          function App() {
+            const [toggle, setToggle] = React.useState(0);
+            React.useEffect(() => {
+              const timeout = setTimeout(() => {
+                setToggle(1);
+              }, 200);
+              return () => clearTimeout(timeout);
+            }, []);
+            return toggle;
+          }
+
+          act(() => {
+            render(<App />, container);
+          });
+          act(() => {
+            jest.runAllTimers();
+          });
+
+          expect(container.innerHTML).toBe('1');
+        });
+
+        // @gate __DEV__
+        it('can use the async version to catch microtasks', async () => {
+          function App() {
+            const [toggle, setToggle] = React.useState(0);
+            React.useEffect(() => {
+              // just like the previous test, except we
+              // use a promise and schedule the update
+              // after it resolves
+              sleep(200).then(() => setToggle(1));
+            }, []);
+            return toggle;
+          }
+
+          act(() => {
+            render(<App />, container);
+          });
+          await act(async () => {
+            jest.runAllTimers();
+          });
+
+          expect(container.innerHTML).toBe('1');
+        });
+
+        // @gate __DEV__
+        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.
+          function App() {
+            const [state, setState] = React.useState(0);
+            async function ticker() {
+              await null;
+              setState(x => x + 1);
+            }
+            React.useEffect(() => {
+              ticker();
+            }, [Math.min(state, 4)]);
+            return state;
+          }
+
+          await act(async () => {
+            render(<App />, container);
+          });
+
+          // all 5 ticks present and accounted for
+          expect(container.innerHTML).toBe('5');
+        });
+
+        // @gate __DEV__
+        it('flushes immediate re-renders with act', () => {
+          function App() {
+            const [ctr, setCtr] = React.useState(0);
+            React.useEffect(() => {
+              if (ctr === 0) {
+                setCtr(1);
+              }
+              const timeout = setTimeout(() => setCtr(2), 1000);
+              return () => clearTimeout(timeout);
+            });
+            return ctr;
+          }
+
+          act(() => {
+            render(<App />, container);
+            // Since effects haven't been flushed yet, this does not advance the timer
+            jest.runAllTimers();
+          });
+
+          expect(container.innerHTML).toBe('1');
+
+          act(() => {
+            jest.runAllTimers();
+          });
+
+          expect(container.innerHTML).toBe('2');
+        });
+      });
+    });
+
+    describe('asynchronous tests', () => {
+      // @gate __DEV__
+      it('works with timeouts', async () => {
+        function App() {
+          const [ctr, setCtr] = React.useState(0);
+          function doSomething() {
+            setTimeout(() => {
+              setCtr(1);
+            }, 50);
+          }
+
+          React.useEffect(() => {
+            doSomething();
+          }, []);
+          return ctr;
+        }
+
+        await act(async () => {
+          render(<App />, container);
+        });
+        expect(container.innerHTML).toBe('0');
+        // Flush the pending timers
+        await act(async () => {
+          await sleep(100);
+        });
+        expect(container.innerHTML).toBe('1');
+      });
+
+      // @gate __DEV__
+      it('flushes microtasks before exiting (async function)', async () => {
+        function App() {
+          const [ctr, setCtr] = React.useState(0);
+          async function someAsyncFunction() {
+            // queue a bunch of promises to be sure they all flush
+            await null;
+            await null;
+            await null;
+            setCtr(1);
+          }
+          React.useEffect(() => {
+            someAsyncFunction();
+          }, []);
+          return ctr;
+        }
+
+        await act(async () => {
+          render(<App />, container);
+        });
+        expect(container.innerHTML).toEqual('1');
+      });
+
+      // @gate __DEV__
+      it('flushes microtasks before exiting (sync function)', async () => {
+        // Same as previous test, but the callback passed to `act` is not itself
+        // an async function.
+        function App() {
+          const [ctr, setCtr] = React.useState(0);
+          async function someAsyncFunction() {
+            // queue a bunch of promises to be sure they all flush
+            await null;
+            await null;
+            await null;
+            setCtr(1);
+          }
+          React.useEffect(() => {
+            someAsyncFunction();
+          }, []);
+          return ctr;
+        }
+
+        await act(() => {
+          render(<App />, container);
+        });
+        expect(container.innerHTML).toEqual('1');
+      });
+
+      // @gate __DEV__
+      it('warns if you do not await an act call', async () => {
+        spyOnDevAndProd(console, 'error').mockImplementation(() => {});
+        act(async () => {});
+        // it's annoying that we have to wait a tick before this warning comes in
+        await sleep(0);
+        if (__DEV__) {
+          expect(console.error).toHaveBeenCalledTimes(1);
+          expect(console.error.mock.calls[0][0]).toMatch(
+            'You called act(async () => ...) without await.',
+          );
+        }
+      });
+
+      // @gate __DEV__
+      it('warns if you try to interleave multiple act calls', async () => {
+        spyOnDevAndProd(console, 'error').mockImplementation(() => {});
+
+        await Promise.all([
+          act(async () => {
+            await sleep(50);
+          }),
+          act(async () => {
+            await sleep(100);
+          }),
+        ]);
+
+        await sleep(150);
+        if (__DEV__) {
+          expect(console.error).toHaveBeenCalledTimes(2);
+          expect(console.error.mock.calls[0][0]).toMatch(
+            'You seem to have overlapping act() calls',
+          );
+          expect(console.error.mock.calls[1][0]).toMatch(
+            'You seem to have overlapping act() calls',
+          );
+        }
+      });
+
+      // @gate __DEV__
+      it('async commits and effects are guaranteed to be flushed', async () => {
+        function App() {
+          const [state, setState] = React.useState(0);
+          async function something() {
+            await null;
+            setState(1);
+          }
+          React.useEffect(() => {
+            something();
+          }, []);
+          React.useEffect(() => {
+            Scheduler.log(state);
+          });
+          return state;
+        }
+
+        await act(async () => {
+          render(<App />, container);
+        });
+        // exiting act() drains effects and microtasks
+
+        assertLog([0, 1]);
+        expect(container.innerHTML).toBe('1');
+      });
+
+      // @gate __DEV__
+      it('can handle cascading promises', async () => {
+        // this component triggers an effect, that waits a tick,
+        // then sets state. repeats this 5 times.
+        function App() {
+          const [state, setState] = React.useState(0);
+          async function ticker() {
+            await null;
+            setState(x => x + 1);
+          }
+          React.useEffect(() => {
+            Scheduler.log(state);
+            ticker();
+          }, [Math.min(state, 4)]);
+          return state;
+        }
+
+        await act(async () => {
+          render(<App />, container);
+        });
+        // all 5 ticks present and accounted for
+        assertLog([0, 1, 2, 3, 4]);
+        expect(container.innerHTML).toBe('5');
+      });
+    });
+
+    describe('error propagation', () => {
+      // @gate __DEV__
+      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');
+        }
+      });
+
+      // @gate __DEV__
+      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');
+        }
+      });
+
+      // @gate __DEV__
+      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');
+        }
+      });
+
+      // @gate __DEV__
+      it('should cleanup after errors - sync', () => {
+        function App() {
+          React.useEffect(() => {
+            Scheduler.log('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);
+          });
+          assertLog(['oh yes']);
+        }
+      });
+
+      // @gate __DEV__
+      it('should cleanup after errors - async', async () => {
+        function App() {
+          async function somethingAsync() {
+            await null;
+            Scheduler.log('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);
+          });
+          assertLog(['oh yes']);
+        }
+      });
+    });
+
+    describe('suspense', () => {
+      if (__DEV__ && __EXPERIMENTAL__) {
+        // todo - remove __DEV__ check once we start using testing builds
+
+        // @gate __DEV__
+        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.startTransition(() => {
+            act(() => {
+              rerender(<App suspend={true} />);
+            });
+          });
+
+          // In Concurrent Mode, refresh transitions delay indefinitely.
+          expect(document.querySelector('[data-test-id=spinner]')).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');
+        });
+      }
+    });
+  });
+}
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 00000000000..d526344ddda
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let container;
+let yields;
+let prevActGlobal;
+
+function clearLog() {
+  try {
+    return yields;
+  } finally {
+    yields = [];
+  }
+}
+
+beforeEach(() => {
+  prevActGlobal = global.IS_REACT_ACT_ENVIRONMENT;
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+  jest.resetModules();
+  jest.unmock('scheduler');
+  yields = [];
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  act = React.act;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  global.IS_REACT_ACT_ENVIRONMENT = prevActGlobal;
+  document.body.removeChild(container);
+});
+
+// @gate __DEV__
+test('can use act to flush effects', async () => {
+  function App() {
+    React.useEffect(() => {
+      yields.push(100);
+    });
+    return null;
+  }
+
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
+  });
+
+  expect(clearLog()).toEqual([100]);
+});
+
+// @gate __DEV__
+test('flushes effects on every call', async () => {
+  function App() {
+    const [ctr, setCtr] = React.useState(0);
+    React.useEffect(() => {
+      yields.push(ctr);
+    });
+    return (
+      <button id="button" onClick={() => setCtr(x => x + 1)}>
+        {ctr}
+      </button>
+    );
+  }
+
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
+  });
+
+  expect(clearLog()).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(clearLog()).toEqual([3]);
+  act(click);
+  expect(clearLog()).toEqual([4]);
+  act(click);
+  expect(clearLog()).toEqual([5]);
+  expect(button.innerHTML).toEqual('5');
+});
+
+// @gate __DEV__
+test("should keep flushing effects until they're done", async () => {
+  function App() {
+    const [ctr, setCtr] = React.useState(0);
+    React.useEffect(() => {
+      if (ctr < 5) {
+        setCtr(x => x + 1);
+      }
+    });
+    return ctr;
+  }
+
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
+  });
+
+  expect(container.innerHTML).toEqual('5');
+});
+
+// @gate __DEV__
+test('should flush effects only on exiting the outermost act', async () => {
+  function App() {
+    React.useEffect(() => {
+      yields.push(0);
+    });
+    return null;
+  }
+  const root = ReactDOMClient.createRoot(container);
+  // let's nest a couple of act() calls
+  await act(async () => {
+    await act(() => {
+      root.render(<App />);
+    });
+    // the effect wouldn't have yielded yet because
+    // we're still inside an act() scope
+    expect(clearLog()).toEqual([]);
+  });
+  // but after exiting the last one, effects get flushed
+  expect(clearLog()).toEqual([0]);
+});
+
+// @gate __DEV__
+test('can handle cascading promises', async () => {
+  // this component triggers an effect, that waits a tick,
+  // then sets state. repeats this 5 times.
+  function App() {
+    const [state, setState] = React.useState(0);
+    async function ticker() {
+      await null;
+      await act(() => {
+        setState(x => x + 1);
+      });
+    }
+    React.useEffect(() => {
+      yields.push(state);
+      ticker();
+    }, [Math.min(state, 4)]);
+    return state;
+  }
+
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
+  });
+  // all 5 ticks present and accounted for
+  expect(clearLog()).toEqual([0, 1, 2, 3, 4]);
+  expect(container.innerHTML).toBe('5');
+});
diff --git a/packages/react-dom/src/__tests__/ReactTreeTraversal-test.js b/packages/react-dom/src/__tests__/ReactTreeTraversal-test.js
new file mode 100644
index 00000000000..b9de69de85c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactTreeTraversal-test.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let root;
+
+const ChildComponent = ({id, eventHandler}) => (
+  <div
+    id={id + '__DIV'}
+    onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
+    onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
+    onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
+    onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}>
+    <div
+      id={id + '__DIV_1'}
+      onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
+      onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
+      onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
+      onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}
+    />
+    <div
+      id={id + '__DIV_2'}
+      onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
+      onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
+      onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
+      onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}
+    />
+  </div>
+);
+
+const ParentComponent = ({eventHandler}) => (
+  <div
+    id="P"
+    onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
+    onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
+    onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
+    onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}>
+    <div
+      id="P_P1"
+      onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
+      onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
+      onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
+      onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}>
+      <ChildComponent id="P_P1_C1" eventHandler={eventHandler} />
+      <ChildComponent id="P_P1_C2" eventHandler={eventHandler} />
+    </div>
+    <div
+      id="P_OneOff"
+      onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
+      onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
+      onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
+      onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}
+    />
+  </div>
+);
+
+describe('ReactTreeTraversal', () => {
+  const mockFn = jest.fn();
+  let container;
+  let outerNode1;
+  let outerNode2;
+
+  beforeEach(async () => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    mockFn.mockReset();
+
+    container = document.createElement('div');
+    outerNode1 = document.createElement('div');
+    outerNode2 = document.createElement('div');
+    document.body.appendChild(container);
+    document.body.appendChild(outerNode1);
+    document.body.appendChild(outerNode2);
+
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<ParentComponent eventHandler={mockFn} />);
+    });
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(outerNode1);
+    document.body.removeChild(outerNode2);
+    container = null;
+    outerNode1 = null;
+    outerNode2 = null;
+  });
+
+  describe('Two phase traversal', () => {
+    it('should not traverse when target is outside component boundary', () => {
+      outerNode1.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+
+      expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    it('should traverse two phase across component boundary', () => {
+      const expectedCalls = [
+        ['P', 'captured', 'click'],
+        ['P_P1', 'captured', 'click'],
+        ['P_P1_C1__DIV', 'captured', 'click'],
+        ['P_P1_C1__DIV_1', 'captured', 'click'],
+
+        ['P_P1_C1__DIV_1', 'bubbled', 'click'],
+        ['P_P1_C1__DIV', 'bubbled', 'click'],
+        ['P_P1', 'bubbled', 'click'],
+        ['P', 'bubbled', 'click'],
+      ];
+
+      const node = document.getElementById('P_P1_C1__DIV_1');
+      node.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+
+    it('should traverse two phase at shallowest node', () => {
+      const node = document.getElementById('P');
+      node.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+
+      const expectedCalls = [
+        ['P', 'captured', 'click'],
+        ['P', 'bubbled', 'click'],
+      ];
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+  });
+
+  describe('Enter leave traversal', () => {
+    it('should not traverse when enter/leaving outside DOM', () => {
+      outerNode1.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: outerNode2,
+        }),
+      );
+
+      expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    it('should not traverse if enter/leave the same node', () => {
+      const leaveNode = document.getElementById('P_P1_C1__DIV_1');
+      const enterNode = document.getElementById('P_P1_C1__DIV_1');
+
+      leaveNode.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: enterNode,
+        }),
+      );
+
+      expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    it('should traverse enter/leave to sibling - avoids parent', () => {
+      const leaveNode = document.getElementById('P_P1_C1__DIV_1');
+      const enterNode = document.getElementById('P_P1_C1__DIV_2');
+
+      const expectedCalls = [
+        ['P_P1_C1__DIV_1', 'mouseleave'],
+        // enter/leave shouldn't fire anything on the parent
+        ['P_P1_C1__DIV_2', 'mouseenter'],
+      ];
+
+      leaveNode.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: enterNode,
+        }),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+
+    it('should traverse enter/leave to parent - avoids parent', () => {
+      const leaveNode = document.getElementById('P_P1_C1__DIV_1');
+      const enterNode = document.getElementById('P_P1_C1__DIV');
+
+      const expectedCalls = [['P_P1_C1__DIV_1', 'mouseleave']];
+
+      leaveNode.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: enterNode,
+        }),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+
+    // The modern event system attaches event listeners to roots so the
+    // event below is being triggered on a node that React does not listen
+    // to any more. Instead we should fire mouseover.
+    it('should enter from the window', () => {
+      const enterNode = document.getElementById('P_P1_C1__DIV');
+
+      const expectedCalls = [
+        ['P', 'mouseenter'],
+        ['P_P1', 'mouseenter'],
+        ['P_P1_C1__DIV', 'mouseenter'],
+      ];
+
+      enterNode.dispatchEvent(
+        new MouseEvent('mouseover', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: outerNode1,
+        }),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+
+    it('should enter from the window to the shallowest', () => {
+      const enterNode = document.getElementById('P');
+
+      const expectedCalls = [['P', 'mouseenter']];
+
+      enterNode.dispatchEvent(
+        new MouseEvent('mouseover', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: outerNode1,
+        }),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+
+    it('should leave to the window', () => {
+      const leaveNode = document.getElementById('P_P1_C1__DIV');
+
+      const expectedCalls = [
+        ['P_P1_C1__DIV', 'mouseleave'],
+        ['P_P1', 'mouseleave'],
+        ['P', 'mouseleave'],
+      ];
+
+      leaveNode.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: outerNode1,
+        }),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+
+    it('should leave to the window from the shallowest', () => {
+      const leaveNode = document.getElementById('P');
+
+      const expectedCalls = [['P', 'mouseleave']];
+
+      leaveNode.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: outerNode1,
+        }),
+      );
+
+      expect(mockFn.mock.calls).toEqual(expectedCalls);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
new file mode 100644
index 00000000000..2bfab445cc3
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -0,0 +1,2049 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 findDOMNode;
+let ReactDOMClient;
+let act;
+let Scheduler;
+let waitForAll;
+let waitFor;
+let assertLog;
+let assertConsoleErrorDev;
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+      const dot = name.lastIndexOf('.');
+      if (dot !== -1) {
+        name = name.slice(dot + 1);
+      }
+      return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+    })
+  );
+}
+
+describe('ReactUpdates', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    findDOMNode =
+      ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .findDOMNode;
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('should batch state when updating state twice', async () => {
+    let componentState;
+    let setState;
+
+    function Component() {
+      const [state, _setState] = React.useState(0);
+      componentState = state;
+      setState = _setState;
+      React.useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+
+      return <div>{state}</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    assertLog(['Commit']);
+    expect(container.firstChild.textContent).toBe('0');
+
+    await act(() => {
+      setState(1);
+      setState(2);
+      expect(componentState).toBe(0);
+      expect(container.firstChild.textContent).toBe('0');
+      assertLog([]);
+    });
+
+    expect(componentState).toBe(2);
+    assertLog(['Commit']);
+    expect(container.firstChild.textContent).toBe('2');
+  });
+
+  it('should batch state when updating two different states', async () => {
+    let componentStateA;
+    let componentStateB;
+    let setStateA;
+    let setStateB;
+
+    function Component() {
+      const [stateA, _setStateA] = React.useState(0);
+      const [stateB, _setStateB] = React.useState(0);
+      componentStateA = stateA;
+      componentStateB = stateB;
+      setStateA = _setStateA;
+      setStateB = _setStateB;
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+
+      return (
+        <div>
+          {stateA} {stateB}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    assertLog(['Commit']);
+    expect(container.firstChild.textContent).toBe('0 0');
+
+    await act(() => {
+      setStateA(1);
+      setStateB(2);
+      expect(componentStateA).toBe(0);
+      expect(componentStateB).toBe(0);
+      expect(container.firstChild.textContent).toBe('0 0');
+      assertLog([]);
+    });
+
+    expect(componentStateA).toBe(1);
+    expect(componentStateB).toBe(2);
+    assertLog(['Commit']);
+    expect(container.firstChild.textContent).toBe('1 2');
+  });
+
+  it('should batch state and props together', async () => {
+    let setState;
+    let componentProp;
+    let componentState;
+
+    function Component({prop}) {
+      const [state, _setState] = React.useState(0);
+      componentProp = prop;
+      componentState = state;
+      setState = _setState;
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+
+      return (
+        <div>
+          {prop} {state}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component prop={0} />);
+    });
+
+    assertLog(['Commit']);
+    expect(container.firstChild.textContent).toBe('0 0');
+
+    await act(() => {
+      root.render(<Component prop={1} />);
+      setState(2);
+      expect(componentProp).toBe(0);
+      expect(componentState).toBe(0);
+      expect(container.firstChild.textContent).toBe('0 0');
+      assertLog([]);
+    });
+
+    expect(componentProp).toBe(1);
+    expect(componentState).toBe(2);
+    assertLog(['Commit']);
+    expect(container.firstChild.textContent).toBe('1 2');
+  });
+
+  it('should batch parent/child state updates together', async () => {
+    let childRef;
+    let parentState;
+    let childState;
+    let setParentState;
+    let setChildState;
+
+    function Parent() {
+      const [state, _setState] = React.useState(0);
+      parentState = state;
+      setParentState = _setState;
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('Parent Commit');
+      });
+
+      return (
+        <div>
+          <Child prop={state} />
+        </div>
+      );
+    }
+
+    function Child({prop}) {
+      const [state, _setState] = React.useState(0);
+      childState = state;
+      setChildState = _setState;
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('Child Commit');
+      });
+
+      return (
+        <div
+          ref={ref => {
+            childRef = ref;
+          }}>
+          {prop} {state}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    assertLog(['Child Commit', 'Parent Commit']);
+    expect(childRef.textContent).toBe('0 0');
+
+    await act(() => {
+      // Parent update first.
+      setParentState(1);
+      setChildState(2);
+      expect(parentState).toBe(0);
+      expect(childState).toBe(0);
+      expect(childRef.textContent).toBe('0 0');
+      assertLog([]);
+    });
+
+    expect(parentState).toBe(1);
+    expect(childState).toBe(2);
+    expect(childRef.textContent).toBe('1 2');
+    assertLog(['Child Commit', 'Parent Commit']);
+  });
+
+  it('should batch child/parent state updates together', async () => {
+    let childRef;
+    let parentState;
+    let childState;
+    let setParentState;
+    let setChildState;
+
+    function Parent() {
+      const [state, _setState] = React.useState(0);
+      parentState = state;
+      setParentState = _setState;
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('Parent Commit');
+      });
+
+      return (
+        <div>
+          <Child prop={state} />
+        </div>
+      );
+    }
+
+    function Child({prop}) {
+      const [state, _setState] = React.useState(0);
+      childState = state;
+      setChildState = _setState;
+
+      React.useLayoutEffect(() => {
+        Scheduler.log('Child Commit');
+      });
+
+      return (
+        <div
+          ref={ref => {
+            childRef = ref;
+          }}>
+          {prop} {state}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    assertLog(['Child Commit', 'Parent Commit']);
+    expect(childRef.textContent).toBe('0 0');
+
+    await act(() => {
+      // Child update first.
+      setChildState(2);
+      setParentState(1);
+      expect(parentState).toBe(0);
+      expect(childState).toBe(0);
+      expect(childRef.textContent).toBe('0 0');
+      assertLog([]);
+    });
+
+    expect(parentState).toBe(1);
+    expect(childState).toBe(2);
+    expect(childRef.textContent).toBe('1 2');
+    assertLog(['Child Commit', 'Parent Commit']);
+  });
+
+  it('should support chained state updates', async () => {
+    let instance;
+    class Component extends React.Component {
+      state = {x: 0};
+      constructor(props) {
+        super(props);
+        instance = this;
+      }
+
+      componentDidUpdate() {
+        Scheduler.log('Update');
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(instance.state.x).toBe(0);
+    expect(container.firstChild.textContent).toBe('0');
+
+    let innerCallbackRun = false;
+    await act(() => {
+      instance.setState({x: 1}, function () {
+        instance.setState({x: 2}, function () {
+          innerCallbackRun = true;
+          expect(instance.state.x).toBe(2);
+          expect(container.firstChild.textContent).toBe('2');
+          assertLog(['Update']);
+        });
+        expect(instance.state.x).toBe(1);
+        expect(container.firstChild.textContent).toBe('1');
+        assertLog(['Update']);
+      });
+      expect(instance.state.x).toBe(0);
+      expect(container.firstChild.textContent).toBe('0');
+      assertLog([]);
+    });
+
+    assertLog([]);
+    expect(instance.state.x).toBe(2);
+    expect(innerCallbackRun).toBeTruthy();
+    expect(container.firstChild.textContent).toBe('2');
+  });
+
+  it('should batch forceUpdate together', async () => {
+    let instance;
+    let shouldUpdateCount = 0;
+    class Component extends React.Component {
+      state = {x: 0};
+
+      constructor(props) {
+        super(props);
+        instance = this;
+      }
+      shouldComponentUpdate() {
+        shouldUpdateCount++;
+      }
+
+      componentDidUpdate() {
+        Scheduler.log('Update');
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    assertLog([]);
+    expect(instance.state.x).toBe(0);
+
+    await act(() => {
+      instance.setState({x: 1}, function () {
+        Scheduler.log('callback');
+      });
+      instance.forceUpdate(function () {
+        Scheduler.log('forceUpdate');
+      });
+      assertLog([]);
+      expect(instance.state.x).toBe(0);
+      expect(container.firstChild.textContent).toBe('0');
+    });
+
+    // shouldComponentUpdate shouldn't be called since we're forcing
+    expect(shouldUpdateCount).toBe(0);
+    assertLog(['Update', 'callback', 'forceUpdate']);
+    expect(instance.state.x).toBe(1);
+    expect(container.firstChild.textContent).toBe('1');
+  });
+
+  it('should update children even if parent blocks updates', async () => {
+    let instance;
+    class Parent extends React.Component {
+      childRef = React.createRef();
+
+      constructor(props) {
+        super(props);
+        instance = this;
+      }
+      shouldComponentUpdate() {
+        return false;
+      }
+
+      render() {
+        Scheduler.log('Parent render');
+        return <Child ref={this.childRef} />;
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
+        Scheduler.log('Child render');
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    assertLog(['Parent render', 'Child render']);
+
+    await act(() => {
+      instance.setState({x: 1});
+    });
+
+    assertLog([]);
+
+    await act(() => {
+      instance.childRef.current.setState({x: 1});
+    });
+
+    assertLog(['Child render']);
+  });
+
+  it('should not reconcile children passed via props', async () => {
+    class Top extends React.Component {
+      render() {
+        return (
+          <Middle>
+            <Bottom />
+          </Middle>
+        );
+      }
+    }
+
+    class Middle extends React.Component {
+      componentDidMount() {
+        this.forceUpdate();
+      }
+
+      render() {
+        Scheduler.log('Middle');
+        return React.Children.only(this.props.children);
+      }
+    }
+
+    class Bottom extends React.Component {
+      render() {
+        Scheduler.log('Bottom');
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Top />);
+    });
+
+    assertLog(['Middle', 'Bottom', 'Middle']);
+  });
+
+  it('should flow updates correctly', async () => {
+    let willUpdates = [];
+    let didUpdates = [];
+    let instance;
+
+    const UpdateLoggingMixin = {
+      UNSAFE_componentWillUpdate: function () {
+        willUpdates.push(this.constructor.displayName);
+      },
+      componentDidUpdate: function () {
+        didUpdates.push(this.constructor.displayName);
+      },
+    };
+
+    class Box extends React.Component {
+      boxDivRef = React.createRef();
+
+      render() {
+        return <div ref={this.boxDivRef}>{this.props.children}</div>;
+      }
+    }
+    Object.assign(Box.prototype, UpdateLoggingMixin);
+
+    class Child extends React.Component {
+      spanRef = React.createRef();
+
+      render() {
+        return <span ref={this.spanRef}>child</span>;
+      }
+    }
+    Object.assign(Child.prototype, UpdateLoggingMixin);
+
+    class Switcher extends React.Component {
+      state = {tabKey: 'hello'};
+      boxRef = React.createRef();
+      switcherDivRef = React.createRef();
+      render() {
+        const child = this.props.children;
+
+        return (
+          <Box ref={this.boxRef}>
+            <div
+              ref={this.switcherDivRef}
+              style={{
+                display: this.state.tabKey === child.key ? '' : 'none',
+              }}>
+              {child}
+            </div>
+          </Box>
+        );
+      }
+    }
+    Object.assign(Switcher.prototype, UpdateLoggingMixin);
+
+    class App extends React.Component {
+      switcherRef = React.createRef();
+      childRef = React.createRef();
+      constructor(props) {
+        super(props);
+        instance = this;
+      }
+      render() {
+        return (
+          <Switcher ref={this.switcherRef}>
+            <Child key="hello" ref={this.childRef} />
+          </Switcher>
+        );
+      }
+    }
+    Object.assign(App.prototype, UpdateLoggingMixin);
+
+    const container = document.createElement('div');
+    await act(() => {
+      ReactDOMClient.createRoot(container).render(<App />);
+    });
+
+    function expectUpdates(desiredWillUpdates, desiredDidUpdates) {
+      let i;
+      for (i = 0; i < desiredWillUpdates; i++) {
+        expect(willUpdates).toContain(desiredWillUpdates[i]);
+      }
+      for (i = 0; i < desiredDidUpdates; i++) {
+        expect(didUpdates).toContain(desiredDidUpdates[i]);
+      }
+      willUpdates = [];
+      didUpdates = [];
+    }
+
+    function triggerUpdate(c) {
+      c.setState({x: 1});
+    }
+
+    async function testUpdates(
+      components,
+      desiredWillUpdates,
+      desiredDidUpdates,
+    ) {
+      let i;
+
+      await act(() => {
+        for (i = 0; i < components.length; i++) {
+          triggerUpdate(components[i]);
+        }
+      });
+
+      expectUpdates(desiredWillUpdates, desiredDidUpdates);
+
+      // Try them in reverse order
+
+      await act(() => {
+        for (i = components.length - 1; i >= 0; i--) {
+          triggerUpdate(components[i]);
+        }
+      });
+
+      expectUpdates(desiredWillUpdates, desiredDidUpdates);
+    }
+    await testUpdates(
+      [
+        instance.switcherRef.current.boxRef.current,
+        instance.switcherRef.current,
+      ],
+      // Owner-child relationships have inverse will and did
+      ['Switcher', 'Box'],
+      ['Box', 'Switcher'],
+    );
+
+    await testUpdates(
+      [instance.childRef.current, instance.switcherRef.current.boxRef.current],
+      // Not owner-child so reconcile independently
+      ['Box', 'Child'],
+      ['Box', 'Child'],
+    );
+
+    await testUpdates(
+      [instance.childRef.current, instance.switcherRef.current],
+      // Switcher owns Box and Child, Box does not own Child
+      ['Switcher', 'Box', 'Child'],
+      ['Box', 'Switcher', 'Child'],
+    );
+  });
+
+  it('should queue mount-ready handlers across different roots', async () => {
+    // We'll define two components A and B, then update both of them. When A's
+    // componentDidUpdate handlers is called, B's DOM should already have been
+    // updated.
+
+    const bContainer = document.createElement('div');
+    let a;
+    let b;
+
+    let aUpdated = false;
+
+    class A extends React.Component {
+      state = {x: 0};
+      constructor(props) {
+        super(props);
+        a = this;
+      }
+      componentDidUpdate() {
+        expect(findDOMNode(b).textContent).toBe('B1');
+        aUpdated = true;
+      }
+
+      render() {
+        let portal = null;
+        portal = ReactDOM.createPortal(<B ref={n => (b = n)} />, bContainer);
+        return (
+          <div>
+            A{this.state.x}
+            {portal}
+          </div>
+        );
+      }
+    }
+
+    class B extends React.Component {
+      state = {x: 0};
+
+      render() {
+        return <div>B{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A />);
+    });
+
+    await act(() => {
+      a.setState({x: 1});
+      b.setState({x: 1});
+    });
+
+    expect(aUpdated).toBe(true);
+  });
+
+  it('should flush updates in the correct order', async () => {
+    const updates = [];
+    let instance;
+    class Outer extends React.Component {
+      state = {x: 0};
+      innerRef = React.createRef();
+      constructor(props) {
+        super(props);
+        instance = this;
+      }
+      render() {
+        updates.push('Outer-render-' + this.state.x);
+        return (
+          <div>
+            <Inner x={this.state.x} ref={this.innerRef} />
+          </div>
+        );
+      }
+
+      componentDidUpdate() {
+        const x = this.state.x;
+        updates.push('Outer-didUpdate-' + x);
+        updates.push('Inner-setState-' + x);
+        this.innerRef.current.setState({x: x}, function () {
+          updates.push('Inner-callback-' + x);
+        });
+      }
+    }
+
+    class Inner extends React.Component {
+      state = {x: 0};
+
+      render() {
+        updates.push('Inner-render-' + this.props.x + '-' + this.state.x);
+        return <div />;
+      }
+
+      componentDidUpdate() {
+        updates.push('Inner-didUpdate-' + this.props.x + '-' + this.state.x);
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
+
+    await act(() => {
+      updates.push('Outer-setState-1');
+      instance.setState({x: 1}, function () {
+        updates.push('Outer-callback-1');
+        updates.push('Outer-setState-2');
+        instance.setState({x: 2}, function () {
+          updates.push('Outer-callback-2');
+        });
+      });
+    });
+
+    expect(updates).toEqual([
+      'Outer-render-0',
+      'Inner-render-0-0',
+
+      'Outer-setState-1',
+      'Outer-render-1',
+      'Inner-render-1-0',
+      'Inner-didUpdate-1-0',
+      'Outer-didUpdate-1',
+      // Happens in a batch, so don't re-render yet
+      'Inner-setState-1',
+      'Outer-callback-1',
+
+      // Happens in a batch
+      'Outer-setState-2',
+
+      // Flush batched updates all at once
+      'Outer-render-2',
+      'Inner-render-2-1',
+      'Inner-didUpdate-2-1',
+      'Inner-callback-1',
+      'Outer-didUpdate-2',
+      'Inner-setState-2',
+      'Outer-callback-2',
+      'Inner-render-2-2',
+      'Inner-didUpdate-2-2',
+      'Inner-callback-2',
+    ]);
+  });
+
+  it('should flush updates in the correct order across roots', async () => {
+    const instances = [];
+    const updates = [];
+
+    class MockComponent extends React.Component {
+      render() {
+        updates.push(this.props.depth);
+        return <div />;
+      }
+
+      componentDidMount() {
+        instances.push(this);
+        if (this.props.depth < this.props.count) {
+          const root = ReactDOMClient.createRoot(findDOMNode(this));
+          root.render(
+            <MockComponent
+              depth={this.props.depth + 1}
+              count={this.props.count}
+            />,
+          );
+        }
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<MockComponent depth={0} count={2} />);
+    });
+
+    expect(updates).toEqual([0, 1, 2]);
+
+    await act(() => {
+      // Simulate update on each component from top to bottom.
+      instances.forEach(function (instance) {
+        instance.forceUpdate();
+      });
+    });
+
+    expect(updates).toEqual([0, 1, 2, 0, 1, 2]);
+  });
+
+  it('should queue nested updates', async () => {
+    // See https://github.com/facebook/react/issues/1147
+
+    class X extends React.Component {
+      state = {s: 0};
+
+      render() {
+        if (this.state.s === 0) {
+          return (
+            <div>
+              <span>0</span>
+            </div>
+          );
+        } else {
+          return <div>1</div>;
+        }
+      }
+
+      go = () => {
+        this.setState({s: 1});
+        this.setState({s: 0});
+        this.setState({s: 1});
+      };
+    }
+
+    class Y extends React.Component {
+      render() {
+        return (
+          <div>
+            <Z />
+          </div>
+        );
+      }
+    }
+
+    class Z extends React.Component {
+      render() {
+        return <div />;
+      }
+
+      UNSAFE_componentWillUpdate() {
+        x.go();
+      }
+    }
+
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    let x;
+    await act(() => {
+      root.render(<X ref={current => (x = current)} />);
+    });
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    let y;
+    await act(() => {
+      root.render(<Y ref={current => (y = current)} />);
+    });
+
+    expect(findDOMNode(x).textContent).toBe('0');
+
+    await act(() => {
+      y.forceUpdate();
+    });
+    expect(findDOMNode(x).textContent).toBe('1');
+  });
+
+  it('should queue updates from during mount', async () => {
+    // See https://github.com/facebook/react/issues/1353
+    let a;
+
+    class A extends React.Component {
+      state = {x: 0};
+
+      UNSAFE_componentWillMount() {
+        a = this;
+      }
+
+      render() {
+        return <div>A{this.state.x}</div>;
+      }
+    }
+
+    class B extends React.Component {
+      UNSAFE_componentWillMount() {
+        a.setState({x: 1});
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <div>
+          <A />
+          <B />
+        </div>,
+      );
+    });
+
+    expect(container.firstChild.textContent).toBe('A1');
+  });
+
+  it('calls componentWillReceiveProps setState callback properly', async () => {
+    class A extends React.Component {
+      state = {x: this.props.x};
+
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        const newX = nextProps.x;
+        this.setState({x: newX}, function () {
+          // State should have updated by the time this callback gets called
+          expect(this.state.x).toBe(newX);
+          Scheduler.log('Callback');
+        });
+      }
+
+      render() {
+        return <div>{this.state.x}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A x={1} />);
+    });
+    assertLog([]);
+
+    // Needs to be a separate act, or it will be batched.
+    await act(() => {
+      root.render(<A x={2} />);
+    });
+
+    assertLog(['Callback']);
+  });
+
+  it('does not call render after a component as been deleted', async () => {
+    let componentA = null;
+    let componentB = null;
+
+    class B extends React.Component {
+      state = {updates: 0};
+
+      componentDidMount() {
+        componentB = this;
+      }
+
+      render() {
+        Scheduler.log('B');
+        return <div />;
+      }
+    }
+
+    class A extends React.Component {
+      state = {showB: true};
+
+      componentDidMount() {
+        componentA = this;
+      }
+      render() {
+        return this.state.showB ? <B /> : <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A />);
+    });
+    assertLog(['B']);
+
+    await act(() => {
+      // B will have scheduled an update but the batching should ensure that its
+      // update never fires.
+      componentB.setState({updates: 1});
+      componentA.setState({showB: false});
+    });
+
+    assertLog([]);
+  });
+
+  it('throws in setState if the update callback is not a function', async () => {
+    function Foo() {
+      this.a = 1;
+      this.b = 2;
+    }
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    let component;
+    await act(() => {
+      root.render(<A ref={current => (component = current)} />);
+    });
+
+    await expect(async () => {
+      await act(() => {
+        component.setState({}, 'no');
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: no',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be ' +
+          'a function. Instead received: no.',
+      ],
+      {withoutStack: true},
+    );
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A ref={current => (component = current)} />);
+    });
+
+    await expect(async () => {
+      await act(() => {
+        component.setState({}, {foo: 'bar'});
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be ' +
+          "a function. Instead received: { foo: 'bar' }.",
+      ],
+      {withoutStack: true},
+    );
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A ref={current => (component = current)} />);
+    });
+
+    await expect(
+      act(() => {
+        component.setState({}, new Foo());
+      }),
+    ).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+  });
+
+  it('throws in forceUpdate if the update callback is not a function', async () => {
+    function Foo() {
+      this.a = 1;
+      this.b = 2;
+    }
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
+        return <div />;
+      }
+    }
+
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    let component;
+    await act(() => {
+      root.render(<A ref={current => (component = current)} />);
+    });
+
+    await expect(async () => {
+      await act(() => {
+        component.forceUpdate('no');
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: no',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be ' +
+          'a function. Instead received: no.',
+      ],
+      {withoutStack: true},
+    );
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A ref={current => (component = current)} />);
+    });
+
+    await expect(async () => {
+      await act(() => {
+        component.forceUpdate({foo: 'bar'});
+      });
+    }).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+    assertConsoleErrorDev(
+      [
+        'Expected the last optional `callback` argument to be ' +
+          "a function. Instead received: { foo: 'bar' }.",
+      ],
+      {withoutStack: true},
+    );
+    // Make sure the warning is deduplicated and doesn't fire again
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<A ref={current => (component = current)} />);
+    });
+
+    await expect(
+      act(() => {
+        component.forceUpdate(new Foo());
+      }),
+    ).rejects.toThrowError(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        'received: [object Object]',
+    );
+  });
+
+  it('does not update one component twice in a batch (#2410)', async () => {
+    let parent;
+    class Parent extends React.Component {
+      childRef = React.createRef();
+
+      componentDidMount() {
+        parent = this;
+      }
+      getChild = () => {
+        return this.childRef.current;
+      };
+
+      render() {
+        return <Child ref={this.childRef} />;
+      }
+    }
+
+    let renderCount = 0;
+    let postRenderCount = 0;
+    let once = false;
+
+    class Child extends React.Component {
+      state = {updated: false};
+
+      UNSAFE_componentWillUpdate() {
+        if (!once) {
+          once = true;
+          this.setState({updated: true});
+        }
+      }
+
+      componentDidMount() {
+        expect(renderCount).toBe(postRenderCount + 1);
+        postRenderCount++;
+      }
+
+      componentDidUpdate() {
+        expect(renderCount).toBe(postRenderCount + 1);
+        postRenderCount++;
+      }
+
+      render() {
+        expect(renderCount).toBe(postRenderCount);
+        renderCount++;
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+
+    const child = parent.getChild();
+    await act(() => {
+      parent.forceUpdate();
+      child.forceUpdate();
+    });
+
+    expect.assertions(6);
+  });
+
+  it('does not update one component twice in a batch (#6371)', async () => {
+    let callbacks = [];
+    function emitChange() {
+      callbacks.forEach(c => c());
+    }
+
+    class App extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {showChild: true};
+      }
+      componentDidMount() {
+        this.setState({showChild: false});
+      }
+      render() {
+        return (
+          <div>
+            <ForceUpdatesOnChange />
+            {this.state.showChild && <EmitsChangeOnUnmount />}
+          </div>
+        );
+      }
+    }
+
+    class EmitsChangeOnUnmount extends React.Component {
+      componentWillUnmount() {
+        emitChange();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    class ForceUpdatesOnChange extends React.Component {
+      componentDidMount() {
+        this.onChange = () => this.forceUpdate();
+        this.onChange();
+        callbacks.push(this.onChange);
+      }
+      componentWillUnmount() {
+        callbacks = callbacks.filter(c => c !== this.onChange);
+      }
+      render() {
+        return <div key={Math.random()} onClick={function () {}} />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<App />);
+    });
+
+    // Error should not be thrown.
+    expect(true).toBe(true);
+  });
+
+  it('handles reentrant mounting in synchronous mode', async () => {
+    let onChangeCalled = false;
+    class Editor extends React.Component {
+      render() {
+        return <div>{this.props.text}</div>;
+      }
+      componentDidMount() {
+        Scheduler.log('Mount');
+        // This should be called only once but we guard just in case.
+        if (!this.props.rendered) {
+          this.props.onChange({rendered: true});
+        }
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    function render() {
+      root.render(
+        <Editor
+          onChange={newProps => {
+            onChangeCalled = true;
+            props = {...props, ...newProps};
+            render();
+          }}
+          {...props}
+        />,
+      );
+    }
+
+    let props = {text: 'hello', rendered: false};
+    await act(() => {
+      render();
+    });
+    assertLog(['Mount']);
+    props = {...props, text: 'goodbye'};
+    await act(() => {
+      render();
+    });
+
+    assertLog([]);
+    expect(container.textContent).toBe('goodbye');
+    expect(onChangeCalled).toBeTruthy();
+  });
+
+  it('mounts and unmounts are batched', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<div>Hello</div>);
+      expect(container.textContent).toBe('');
+      root.unmount(container);
+      expect(container.textContent).toBe('');
+    });
+
+    expect(container.textContent).toBe('');
+  });
+
+  it('uses correct base state for setState inside render phase', async () => {
+    class Foo extends React.Component {
+      state = {step: 0};
+      render() {
+        const memoizedStep = this.state.step;
+        this.setState(baseState => {
+          const baseStep = baseState.step;
+          Scheduler.log(`base: ${baseStep}, memoized: ${memoizedStep}`);
+          return baseStep === 0 ? {step: 1} : null;
+        });
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      'Cannot update during an existing state transition (such as within `render`). ' +
+        'Render methods should be a pure function of props and state.\n' +
+        '    in Foo (at **)',
+    ]);
+
+    assertLog(['base: 0, memoized: 0', 'base: 1, memoized: 1']);
+  });
+
+  it('does not re-render if state update is null', async () => {
+    const container = document.createElement('div');
+
+    let instance;
+    class Foo extends React.Component {
+      render() {
+        instance = this;
+        Scheduler.log('render');
+        return <div />;
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+
+    assertLog(['render']);
+    await act(() => {
+      instance.setState(() => null);
+    });
+    assertLog([]);
+  });
+
+  it('synchronously renders hidden subtrees', async () => {
+    const container = document.createElement('div');
+
+    function Baz() {
+      Scheduler.log('Baz');
+      return null;
+    }
+
+    function Bar() {
+      Scheduler.log('Bar');
+      return null;
+    }
+
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <div hidden={true}>
+            <Bar />
+          </div>
+          <Baz />
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      // Mount
+      root.render(<Foo />);
+    });
+    assertLog(['Foo', 'Bar', 'Baz']);
+
+    await act(() => {
+      // Update
+      root.render(<Foo />);
+    });
+    assertLog(['Foo', 'Bar', 'Baz']);
+  });
+
+  // @gate www
+  it('delays sync updates inside hidden subtrees in Concurrent Mode', async () => {
+    const container = document.createElement('div');
+
+    function Baz() {
+      Scheduler.log('Baz');
+      return <p>baz</p>;
+    }
+
+    let setCounter;
+    function Bar() {
+      const [counter, _setCounter] = React.useState(0);
+      setCounter = _setCounter;
+      Scheduler.log('Bar');
+      return <p>bar {counter}</p>;
+    }
+
+    function Foo() {
+      Scheduler.log('Foo');
+      React.useEffect(() => {
+        Scheduler.log('Foo#effect');
+      });
+      return (
+        <div>
+          <LegacyHiddenDiv mode="hidden">
+            <Bar />
+          </LegacyHiddenDiv>
+          <Baz />
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    let hiddenDiv;
+    await act(async () => {
+      root.render(<Foo />);
+      await waitFor(['Foo', 'Baz', 'Foo#effect']);
+      hiddenDiv = container.firstChild.firstChild;
+      expect(hiddenDiv.hidden).toBe(true);
+      expect(hiddenDiv.innerHTML).toBe('');
+      // Run offscreen update
+      await waitForAll(['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>');
+
+    // Run offscreen update
+    await waitForAll(['Bar']);
+    expect(hiddenDiv.innerHTML).toBe('<p>bar 1</p>');
+  });
+
+  it('can render ridiculously large number of roots without triggering infinite update loop error', async () => {
+    function Component({trigger}) {
+      const [state, setState] = React.useState(0);
+
+      React.useEffect(() => {
+        if (trigger) {
+          Scheduler.log('Trigger');
+          setState(c => c + 1);
+        }
+      }, [trigger]);
+
+      return <div>{state}</div>;
+    }
+
+    class Foo extends React.Component {
+      componentDidMount() {
+        const limit = 1200;
+        for (let i = 0; i < limit; i++) {
+          if (i < limit - 1) {
+            ReactDOMClient.createRoot(document.createElement('div')).render(
+              <Component />,
+            );
+          } else {
+            // The "nested update limit" error isn't thrown until setState
+            ReactDOMClient.createRoot(document.createElement('div')).render(
+              <Component trigger={true} />,
+            );
+          }
+        }
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Foo />);
+    });
+
+    // Make sure the setState trigger runs.
+    assertLog(['Trigger']);
+  });
+
+  it('resets the update counter for unrelated updates', async () => {
+    const container = document.createElement('div');
+    const ref = React.createRef();
+
+    class EventuallyTerminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      componentDidUpdate() {
+        if (this.state.step < limit) {
+          this.setState({step: this.state.step + 1});
+        }
+      }
+      render() {
+        return this.state.step;
+      }
+    }
+
+    let limit = 55;
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<EventuallyTerminating ref={ref} />);
+      });
+    }).rejects.toThrow('Maximum');
+
+    // Verify that we don't go over the limit if these updates are unrelated.
+    limit -= 10;
+    await act(() => {
+      root.render(<EventuallyTerminating ref={ref} />);
+    });
+    expect(container.textContent).toBe(limit.toString());
+
+    await act(() => {
+      ref.current.setState({step: 0});
+    });
+    expect(container.textContent).toBe(limit.toString());
+
+    await act(() => {
+      ref.current.setState({step: 0});
+    });
+    expect(container.textContent).toBe(limit.toString());
+
+    limit += 10;
+    await expect(async () => {
+      await act(() => {
+        ref.current.setState({step: 0});
+      });
+    }).rejects.toThrow('Maximum');
+    expect(ref.current).toBe(null);
+  });
+
+  it('does not fall into an infinite update loop', async () => {
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+
+      componentDidUpdate() {
+        this.setState({step: 2});
+      }
+
+      render() {
+        return (
+          <div>
+            Hello {this.props.name}
+            {this.state.step}
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await expect(async () => {
+      await act(() => {
+        root.render(<NonTerminating />);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  it('does not fall into an infinite update loop with useLayoutEffect', async () => {
+    function NonTerminating() {
+      const [step, setStep] = React.useState(0);
+      React.useLayoutEffect(() => {
+        setStep(x => x + 1);
+      });
+      return step;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<NonTerminating />);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  it('can recover after falling into an infinite update loop', async () => {
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      componentDidUpdate() {
+        this.setState({step: 2});
+      }
+      render() {
+        return this.state.step;
+      }
+    }
+
+    class Terminating extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      render() {
+        return this.state.step;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<NonTerminating />);
+      });
+    }).rejects.toThrow('Maximum');
+
+    await act(() => {
+      root.render(<Terminating />);
+    });
+    expect(container.textContent).toBe('1');
+
+    await expect(async () => {
+      await act(() => {
+        root.render(<NonTerminating />);
+      });
+    }).rejects.toThrow('Maximum');
+    await act(() => {
+      root.render(<Terminating />);
+    });
+    expect(container.textContent).toBe('1');
+  });
+
+  it('does not fall into mutually recursive infinite update loop with same container', async () => {
+    // Note: this test would fail if there were two or more different roots.
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    class A extends React.Component {
+      componentDidMount() {
+        root.render(<B />);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    class B extends React.Component {
+      componentDidMount() {
+        root.render(<A />);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    await expect(async () => {
+      await act(() => {
+        root.render(<A />);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  it('does not fall into an infinite error loop', async () => {
+    function BadRender() {
+      throw new Error('error');
+    }
+
+    class ErrorBoundary extends React.Component {
+      componentDidCatch() {
+        // Schedule a no-op state update to avoid triggering a DEV warning in the test.
+        this.setState({});
+
+        this.props.parent.remount();
+      }
+      render() {
+        return <BadRender />;
+      }
+    }
+
+    class NonTerminating extends React.Component {
+      state = {step: 0};
+      remount() {
+        this.setState(state => ({step: state.step + 1}));
+      }
+      render() {
+        return <ErrorBoundary key={this.state.step} parent={this} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<NonTerminating />);
+      });
+    }).rejects.toThrow('Maximum');
+  });
+
+  it('can schedule ridiculously many updates within the same batch without triggering a maximum update error', async () => {
+    const subscribers = [];
+    const limit = 1200;
+    class Child extends React.Component {
+      state = {value: 'initial'};
+      componentDidMount() {
+        subscribers.push(this);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    class App extends React.Component {
+      render() {
+        const children = [];
+        for (let i = 0; i < limit; i++) {
+          children.push(<Child key={i} />);
+        }
+        return children;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    await act(() => {
+      subscribers.forEach(s => {
+        s.setState({value: 'update'});
+      });
+    });
+
+    expect(subscribers.length).toBe(limit);
+  });
+
+  it("does not infinite loop if there's a synchronous render phase update on another component", async () => {
+    if (gate(flags => !flags.enableInfiniteRenderLoopDetection)) {
+      return;
+    }
+    let setState;
+    function App() {
+      const [, _setState] = React.useState(0);
+      setState = _setState;
+      return <Child />;
+    }
+
+    function Child(step) {
+      // This will cause an infinite update loop, and a warning in dev.
+      setState(n => n + 1);
+      return null;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await expect(async () => {
+      await act(() => ReactDOM.flushSync(() => root.render(<App />)));
+    }).rejects.toThrow('Maximum update depth exceeded');
+    assertConsoleErrorDev([
+      'Cannot update a component (`App`) while rendering a different component (`Child`). ' +
+        'To locate the bad setState() call inside `Child`, ' +
+        'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it("does not infinite loop if there's an async render phase update on another component", async () => {
+    if (gate(flags => !flags.enableInfiniteRenderLoopDetection)) {
+      return;
+    }
+    let setState;
+    function App() {
+      const [, _setState] = React.useState(0);
+      setState = _setState;
+      return <Child />;
+    }
+
+    function Child(step) {
+      // This will cause an infinite update loop, and a warning in dev.
+      setState(n => n + 1);
+      return null;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await expect(async () => {
+      await act(() => {
+        React.startTransition(() => root.render(<App />));
+      });
+    }).rejects.toThrow('Maximum update depth exceeded');
+
+    assertConsoleErrorDev([
+      'Cannot update a component (`App`) while rendering a different component (`Child`). ' +
+        'To locate the bad setState() call inside `Child`, ' +
+        'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  // TODO: Replace this branch with @gate pragmas
+  if (__DEV__) {
+    it('warns about a deferred infinite update loop with useEffect', async () => {
+      function NonTerminating() {
+        const [step, setStep] = React.useState(0);
+        React.useEffect(function myEffect() {
+          setStep(x => x + 1);
+        });
+        return step;
+      }
+
+      function App() {
+        return <NonTerminating />;
+      }
+
+      let error = null;
+      let ownerStack = null;
+      let debugStack = null;
+      const originalConsoleError = console.error;
+      console.error = e => {
+        error = e;
+        ownerStack = React.captureOwnerStack();
+        debugStack = new Error().stack;
+        Scheduler.log('stop');
+      };
+      try {
+        const container = document.createElement('div');
+        const root = ReactDOMClient.createRoot(container);
+        root.render(<App />);
+        await waitFor(['stop']);
+      } finally {
+        console.error = originalConsoleError;
+      }
+
+      expect(error).toContain('Maximum update depth exceeded');
+      // The currently executing effect should be on the native stack
+      expect(debugStack).toContain('at myEffect');
+      expect(ownerStack).toContain('at App');
+    });
+
+    it('can have nested updates if they do not cross the limit', async () => {
+      let _setStep;
+      const LIMIT = 50;
+
+      function Terminating() {
+        const [step, setStep] = React.useState(0);
+        _setStep = setStep;
+        React.useEffect(() => {
+          if (step < LIMIT) {
+            setStep(x => x + 1);
+          }
+        });
+        Scheduler.log(step);
+        return step;
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Terminating />);
+      });
+
+      assertLog(Array.from({length: LIMIT + 1}, (_, k) => k));
+      expect(container.textContent).toBe('50');
+      await act(() => {
+        _setStep(0);
+      });
+      expect(container.textContent).toBe('50');
+    });
+
+    it('can have many updates inside useEffect without triggering a warning', async () => {
+      function Terminating() {
+        const [step, setStep] = React.useState(0);
+        React.useEffect(() => {
+          for (let i = 0; i < 1000; i++) {
+            setStep(x => x + 1);
+          }
+          Scheduler.log('Done');
+        }, []);
+        return step;
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Terminating />);
+      });
+
+      assertLog(['Done']);
+      expect(container.textContent).toBe('1000');
+    });
+  }
+
+  it('prevents infinite update loop triggered by synchronous updates in useEffect', async () => {
+    // Ignore flushSync warning
+    spyOnDev(console, 'error').mockImplementation(() => {});
+
+    function NonTerminating() {
+      const [step, setStep] = React.useState(0);
+      React.useEffect(() => {
+        // Other examples of synchronous updates in useEffect are imperative
+        // event dispatches like `el.focus`, or `useSyncExternalStore`, which
+        // may schedule a synchronous update upon subscribing if it detects
+        // that the store has been mutated since the initial render.
+        //
+        // (Originally I wrote this test using `el.focus` but those errors
+        // get dispatched in a JSDOM event and I don't know how to "catch" those
+        // so that they don't fail the test.)
+        ReactDOM.flushSync(() => {
+          setStep(step + 1);
+        });
+      }, [step]);
+      return step;
+    }
+
+    const container = document.createElement('div');
+    const errors = [];
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError: (error, errorInfo) => {
+        errors.push(
+          `${error.message}${normalizeCodeLocInfo(errorInfo.componentStack)}`,
+        );
+      },
+    });
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<NonTerminating />);
+      });
+    });
+
+    expect(errors).toEqual([
+      'Maximum update depth exceeded. ' +
+        'This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. ' +
+        'React limits the number of nested updates to prevent infinite loops.' +
+        '\n    in NonTerminating (at **)',
+    ]);
+  });
+
+  it('prevents infinite update loop triggered by too many updates in ref callbacks', async () => {
+    let scheduleUpdate;
+    function TooManyRefUpdates() {
+      const [count, _scheduleUpdate] = React.useReducer(c => c + 1, 0);
+      scheduleUpdate = _scheduleUpdate;
+
+      return (
+        <div
+          ref={() => {
+            for (let i = 0; i < 50; i++) {
+              scheduleUpdate(1);
+            }
+          }}>
+          {count}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const errors = [];
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError: (error, errorInfo) => {
+        errors.push(
+          `${error.message}${normalizeCodeLocInfo(errorInfo.componentStack)}`,
+        );
+      },
+    });
+    await act(() => {
+      root.render(<TooManyRefUpdates />);
+    });
+
+    expect(errors).toEqual([
+      'Maximum update depth exceeded. ' +
+        'This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. ' +
+        'React limits the number of nested updates to prevent infinite loops.' +
+        '\n    in div' +
+        '\n    in TooManyRefUpdates (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
new file mode 100644
index 00000000000..0c73410f2ed
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let SuspenseList;
+let getCacheForType;
+let caches;
+let seededCache;
+let assertLog;
+
+beforeEach(() => {
+  React = require('react');
+  ReactNoop = require('react-noop-renderer');
+  Scheduler = require('scheduler');
+  act = require('internal-test-utils').act;
+
+  const InternalTestUtils = require('internal-test-utils');
+  assertLog = InternalTestUtils.assertLog;
+
+  Suspense = React.Suspense;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.unstable_SuspenseList;
+  }
+
+  getCacheForType = React.unstable_getCacheForType;
+
+  caches = [];
+  seededCache = null;
+});
+
+function createTextCache() {
+  if (seededCache !== null) {
+    // Trick to seed a cache before it exists.
+    // TODO: Need a built-in API to seed data before the initial render (i.e.
+    // not a refresh because nothing has mounted yet).
+    const cache = seededCache;
+    seededCache = null;
+    return cache;
+  }
+
+  const data = new Map();
+  const version = caches.length + 1;
+  const cache = {
+    version,
+    data,
+    resolve(text) {
+      const record = data.get(text);
+      if (record === undefined) {
+        const newRecord = {
+          status: 'resolved',
+          value: text,
+        };
+        data.set(text, newRecord);
+      } else if (record.status === 'pending') {
+        const thenable = record.value;
+        record.status = 'resolved';
+        record.value = text;
+        thenable.pings.forEach(t => t());
+      }
+    },
+    reject(text, error) {
+      const record = data.get(text);
+      if (record === undefined) {
+        const newRecord = {
+          status: 'rejected',
+          value: error,
+        };
+        data.set(text, newRecord);
+      } else if (record.status === 'pending') {
+        const thenable = record.value;
+        record.status = 'rejected';
+        record.value = error;
+        thenable.pings.forEach(t => t());
+      }
+    },
+  };
+  caches.push(cache);
+  return cache;
+}
+
+function readText(text) {
+  const textCache = getCacheForType(createTextCache);
+  const record = textCache.data.get(text);
+  if (record !== undefined) {
+    switch (record.status) {
+      case 'pending':
+        Scheduler.log(`Suspend! [${text}]`);
+        throw record.value;
+      case 'rejected':
+        Scheduler.log(`Error! [${text}]`);
+        throw record.value;
+      case 'resolved':
+        return textCache.version;
+    }
+  } else {
+    Scheduler.log(`Suspend! [${text}]`);
+
+    const thenable = {
+      pings: [],
+      then(resolve) {
+        if (newRecord.status === 'pending') {
+          thenable.pings.push(resolve);
+        } else {
+          Promise.resolve().then(() => resolve(newRecord.value));
+        }
+      },
+    };
+
+    const newRecord = {
+      status: 'pending',
+      value: thenable,
+    };
+    textCache.data.set(text, newRecord);
+
+    throw thenable;
+  }
+}
+
+function Text({text}) {
+  Scheduler.log(text);
+  return <span prop={text} />;
+}
+
+function AsyncText({text, showVersion}) {
+  const version = readText(text);
+  const fullText = showVersion ? `${text} [v${version}]` : text;
+  Scheduler.log(fullText);
+  return <span prop={fullText} />;
+}
+
+// function seedNextTextCache(text) {
+//   if (seededCache === null) {
+//     seededCache = createTextCache();
+//   }
+//   seededCache.resolve(text);
+// }
+
+function resolveMostRecentTextCache(text) {
+  if (caches.length === 0) {
+    throw Error('Cache does not exist.');
+  } else {
+    // Resolve the most recently created cache. An older cache can by
+    // resolved with `caches[index].resolve(text)`.
+    caches[caches.length - 1].resolve(text);
+  }
+}
+
+const resolveText = resolveMostRecentTextCache;
+
+// @gate enableLegacyCache
+// @gate enableSuspenseList
+test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
+  // Based on a production bug. Designed to trigger a very specific
+  // implementation path.
+  function Tail() {
+    return (
+      <Suspense fallback={<Text text="Loading Tail..." />}>
+        <Text text="Tail" />
+      </Suspense>
+    );
+  }
+
+  function App() {
+    return (
+      <SuspenseList revealOrder="forwards" tail="visible">
+        <Suspense fallback={<Text text="Loading Async..." />}>
+          <Async />
+        </Suspense>
+        <Tail />
+      </SuspenseList>
+    );
+  }
+
+  let setAsyncText;
+  function Async() {
+    const [c, _setAsyncText] = React.useState(0);
+    setAsyncText = _setAsyncText;
+    return <AsyncText text={c} />;
+  }
+
+  const root = ReactNoop.createRoot();
+  await act(() => {
+    root.render(<App />);
+  });
+  assertLog([
+    'Suspend! [0]',
+    'Loading Async...',
+    'Loading Tail...',
+    // pre-warming
+    'Suspend! [0]',
+  ]);
+  await act(() => {
+    resolveText(0);
+  });
+  assertLog([0, 'Tail']);
+  await act(() => {
+    setAsyncText(x => x + 1);
+  });
+  assertLog([
+    'Suspend! [1]',
+    'Loading Async...',
+    'Suspend! [1]',
+    'Loading Async...',
+    // pre-warming
+    'Suspend! [1]',
+  ]);
+});
diff --git a/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js b/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js
new file mode 100644
index 00000000000..be8dccf9f63
--- /dev/null
+++ b/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+
+describe('escapeTextForBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMServer = require('react-dom/server');
+  });
+
+  it('ampersand is escaped when passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<span>{'&'}</span>);
+    expect(response).toMatch('<span>&amp;</span>');
+  });
+
+  it('double quote is escaped when passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<span>{'"'}</span>);
+    expect(response).toMatch('<span>&quot;</span>');
+  });
+
+  it('single quote is escaped when passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<span>{"'"}</span>);
+    expect(response).toMatch('<span>&#x27;</span>');
+  });
+
+  it('greater than entity is escaped when passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<span>{'>'}</span>);
+    expect(response).toMatch('<span>&gt;</span>');
+  });
+
+  it('lower than entity is escaped when passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<span>{'<'}</span>);
+    expect(response).toMatch('<span>&lt;</span>');
+  });
+
+  it('number is correctly passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<span>{42}</span>);
+    expect(response).toMatch('<span>42</span>');
+  });
+
+  it('number is escaped to string when passed as text content', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr={42} />);
+    expect(response).toMatch('<img data-attr="42"/>');
+  });
+
+  it('escape text content representing a script tag', () => {
+    const response = ReactDOMServer.renderToString(
+      <span>{'<script type=\'\' src=""></script>'}</span>,
+    );
+    expect(response).toMatch(
+      '<span>&lt;script type=&#x27;&#x27; ' +
+        'src=&quot;&quot;&gt;&lt;/script&gt;</span>',
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/findDOMNodeFB-test.js b/packages/react-dom/src/__tests__/findDOMNodeFB-test.js
new file mode 100644
index 00000000000..28212c0d5cf
--- /dev/null
+++ b/packages/react-dom/src/__tests__/findDOMNodeFB-test.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOM = require('react-dom');
+const StrictMode = React.StrictMode;
+const assertConsoleErrorDev =
+  require('internal-test-utils').assertConsoleErrorDev;
+
+describe('findDOMNode', () => {
+  // @gate www && classic
+  it('findDOMNode should return null if passed null', () => {
+    expect(ReactDOM.findDOMNode(null)).toBe(null);
+  });
+
+  // @gate www && classic && !disableLegacyMode
+  it('findDOMNode should find dom element', () => {
+    class MyNode extends React.Component {
+      render() {
+        return (
+          <div>
+            <span>Noise</span>
+          </div>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const myNode = ReactDOM.render(<MyNode />, container);
+    const myDiv = ReactDOM.findDOMNode(myNode);
+    const mySameDiv = ReactDOM.findDOMNode(myDiv);
+    expect(myDiv.tagName).toBe('DIV');
+    expect(mySameDiv).toBe(myDiv);
+  });
+
+  // @gate www && classic && !disableLegacyMode
+  it('findDOMNode should find dom element after an update from null', () => {
+    function Bar({flag}) {
+      if (flag) {
+        return <span>A</span>;
+      }
+      return null;
+    }
+    class MyNode extends React.Component {
+      render() {
+        return <Bar flag={this.props.flag} />;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    const myNodeA = ReactDOM.render(<MyNode />, container);
+    const a = ReactDOM.findDOMNode(myNodeA);
+    expect(a).toBe(null);
+
+    const myNodeB = ReactDOM.render(<MyNode flag={true} />, container);
+    expect(myNodeA === myNodeB).toBe(true);
+
+    const b = ReactDOM.findDOMNode(myNodeB);
+    expect(b.tagName).toBe('SPAN');
+  });
+
+  // @gate www && classic
+  it('findDOMNode should reject random objects', () => {
+    expect(function () {
+      ReactDOM.findDOMNode({foo: 'bar'});
+    }).toThrowError('Argument appears to not be a ReactComponent. Keys: foo');
+  });
+
+  // @gate www && classic && !disableLegacyMode
+  it('findDOMNode should reject unmounted objects with render func', () => {
+    class Foo extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const inst = ReactDOM.render(<Foo />, container);
+    ReactDOM.unmountComponentAtNode(container);
+
+    expect(() => ReactDOM.findDOMNode(inst)).toThrowError(
+      'Unable to find node on an unmounted component.',
+    );
+  });
+
+  // @gate www && classic && !disableLegacyMode
+  it('findDOMNode should not throw an error when called within a component that is not mounted', () => {
+    class Bar extends React.Component {
+      UNSAFE_componentWillMount() {
+        expect(ReactDOM.findDOMNode(this)).toBeNull();
+      }
+
+      render() {
+        return <div />;
+      }
+    }
+    expect(() => {
+      const container = document.createElement('div');
+      ReactDOM.render(<Bar />, container);
+    }).not.toThrow();
+  });
+
+  // @gate www && classic && !disableLegacyMode
+  it('findDOMNode should warn if used to find a host component inside StrictMode', () => {
+    let parent = undefined;
+    let child = undefined;
+
+    class ContainsStrictModeChild extends React.Component {
+      render() {
+        return (
+          <StrictMode>
+            <div ref={n => (child = n)} />
+          </StrictMode>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <ContainsStrictModeChild ref={n => (parent = n)} />,
+      container,
+    );
+
+    const match = ReactDOM.findDOMNode(parent);
+    assertConsoleErrorDev([
+      '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. ' +
+        'Learn more about using refs safely here: ' +
+        'https://react.dev/link/strict-mode-find-node' +
+        '\n    in div (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  // @gate www && classic && !disableLegacyMode
+  it('findDOMNode should warn if passed a component that is inside StrictMode', () => {
+    let parent = undefined;
+    let child = undefined;
+
+    class IsInStrictMode extends React.Component {
+      render() {
+        return <div ref={n => (child = n)} />;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    ReactDOM.render(
+      <StrictMode>
+        <IsInStrictMode ref={n => (parent = n)} />
+      </StrictMode>,
+      container,
+    );
+
+    const match = ReactDOM.findDOMNode(parent);
+    assertConsoleErrorDev([
+      '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. ' +
+        'Learn more about using refs safely here: ' +
+        'https://react.dev/link/strict-mode-find-node' +
+        '\n    in div (at **)' +
+        '\n    in IsInStrictMode (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js b/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js
new file mode 100644
index 00000000000..902e3c155c3
--- /dev/null
+++ b/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+
+describe('quoteAttributeValueForBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMServer = require('react-dom/server');
+  });
+
+  it('ampersand is escaped inside attributes', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr="&" />);
+    expect(response).toMatch('<img data-attr="&amp;"/>');
+  });
+
+  it('double quote is escaped inside attributes', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr={'"'} />);
+    expect(response).toMatch('<img data-attr="&quot;"/>');
+  });
+
+  it('single quote is escaped inside attributes', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr="'" />);
+    expect(response).toMatch('<img data-attr="&#x27;"/>');
+  });
+
+  it('greater than entity is escaped inside attributes', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr=">" />);
+    expect(response).toMatch('<img data-attr="&gt;"/>');
+  });
+
+  it('lower than entity is escaped inside attributes', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr="<" />);
+    expect(response).toMatch('<img data-attr="&lt;"/>');
+  });
+
+  it('number is escaped to string inside attributes', () => {
+    const response = ReactDOMServer.renderToString(<img data-attr={42} />);
+    expect(response).toMatch('<img data-attr="42"/>');
+  });
+
+  it('object is passed to a string inside attributes', () => {
+    const sampleObject = {
+      toString: function () {
+        return 'ponys';
+      },
+    };
+
+    const response = ReactDOMServer.renderToString(
+      <img data-attr={sampleObject} />,
+    );
+    expect(response).toMatch('<img data-attr="ponys"/>');
+  });
+
+  it('script tag is escaped inside attributes', () => {
+    const response = ReactDOMServer.renderToString(
+      <img data-attr={'<script type=\'\' src=""></script>'} />,
+    );
+    expect(response).toMatch(
+      '<img data-attr="&lt;script type=&#x27;&#x27; ' +
+        'src=&quot;&quot;&gt;&lt;/script&gt;"/>',
+    );
+  });
+});
diff --git a/packages/react-dom/src/__tests__/refs-destruction-test.js b/packages/react-dom/src/__tests__/refs-destruction-test.js
new file mode 100644
index 00000000000..a500b4b24b3
--- /dev/null
+++ b/packages/react-dom/src/__tests__/refs-destruction-test.js
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let TestComponent;
+let act;
+let theInnerDivRef;
+let theInnerClassComponentRef;
+
+describe('refs-destruction', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    class ClassComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    TestComponent = class extends React.Component {
+      constructor(props) {
+        super(props);
+        theInnerDivRef = React.createRef();
+        theInnerClassComponentRef = React.createRef();
+      }
+
+      render() {
+        if (this.props.destroy) {
+          return <div />;
+        } else if (this.props.removeRef) {
+          return (
+            <div>
+              <div />
+              <ClassComponent />
+            </div>
+          );
+        } else {
+          return (
+            <div>
+              <div ref={theInnerDivRef} />
+              <ClassComponent ref={theInnerClassComponentRef} />
+            </div>
+          );
+        }
+      }
+    };
+  });
+
+  afterEach(() => {
+    theInnerClassComponentRef = null;
+    theInnerDivRef = null;
+  });
+
+  it('should remove refs when destroying the parent', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<TestComponent />);
+    });
+
+    expect(theInnerDivRef.current).toBeInstanceOf(Element);
+    expect(theInnerClassComponentRef.current).toBeTruthy();
+
+    root.unmount();
+
+    expect(theInnerDivRef.current).toBe(null);
+    expect(theInnerClassComponentRef.current).toBe(null);
+  });
+
+  it('should remove refs when destroying the child', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<TestComponent />);
+    });
+
+    expect(theInnerDivRef.current).toBeInstanceOf(Element);
+    expect(theInnerClassComponentRef.current).toBeTruthy();
+
+    await act(async () => {
+      root.render(<TestComponent destroy={true} />);
+    });
+
+    expect(theInnerDivRef.current).toBe(null);
+    expect(theInnerClassComponentRef.current).toBe(null);
+  });
+
+  it('should remove refs when removing the child ref attribute', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<TestComponent />);
+    });
+
+    expect(theInnerDivRef.current).toBeInstanceOf(Element);
+    expect(theInnerClassComponentRef.current).toBeTruthy();
+
+    await act(async () => {
+      root.render(<TestComponent removeRef={true} />);
+    });
+
+    expect(theInnerDivRef.current).toBe(null);
+    expect(theInnerClassComponentRef.current).toBe(null);
+  });
+
+  it('should not error when destroying child with ref asynchronously', async () => {
+    let nestedRoot;
+    class Modal extends React.Component {
+      componentDidMount() {
+        this.div = document.createElement('div');
+        nestedRoot = ReactDOMClient.createRoot(this.div);
+        document.body.appendChild(this.div);
+        this.componentDidUpdate();
+      }
+
+      componentDidUpdate() {
+        setTimeout(() => {
+          ReactDOM.flushSync(() => {
+            nestedRoot.render(<div>{this.props.children}</div>);
+          });
+        }, 0);
+      }
+
+      componentWillUnmount() {
+        const self = this;
+        // some async animation
+        setTimeout(function () {
+          expect(function () {
+            nestedRoot.unmount();
+          }).not.toThrow();
+          document.body.removeChild(self.div);
+        }, 0);
+      }
+
+      render() {
+        return null;
+      }
+    }
+
+    class AppModal extends React.Component {
+      render() {
+        return (
+          <Modal>
+            <a ref={React.createRef()} />
+          </Modal>
+        );
+      }
+    }
+
+    class App extends React.Component {
+      render() {
+        return this.props.hidden ? null : <AppModal onClose={this.close} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    await act(async () => {
+      root.render(<App hidden={true} />);
+    });
+  });
+});
diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js
new file mode 100644
index 00000000000..b80f8b27753
--- /dev/null
+++ b/packages/react-dom/src/__tests__/refs-test.js
@@ -0,0 +1,568 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
+
+/**
+ * Tests that when a ref hops around children, we can track that correctly.
+ */
+describe('ref swapping', () => {
+  let RefHopsAround;
+  beforeEach(() => {
+    RefHopsAround = class extends React.Component {
+      container = null;
+      state = {count: 0};
+      hopRef = React.createRef();
+      divOneRef = React.createRef();
+      divTwoRef = React.createRef();
+      divThreeRef = React.createRef();
+
+      moveRef = () => {
+        this.setState({count: this.state.count + 1});
+      };
+
+      render() {
+        const count = this.state.count;
+        /**
+         * What we have here, is three divs with refs (div1/2/3), but a single
+         * moving cursor ref `hopRef` that "hops" around the three. We'll call the
+         * `moveRef()` function several times and make sure that the hop ref
+         * points to the correct divs.
+         */
+        return (
+          <div ref={current => (this.container = current)}>
+            <div
+              className="first"
+              ref={count % 3 === 0 ? this.hopRef : this.divOneRef}
+            />
+            <div
+              className="second"
+              ref={count % 3 === 1 ? this.hopRef : this.divTwoRef}
+            />
+            <div
+              className="third"
+              ref={count % 3 === 2 ? this.hopRef : this.divThreeRef}
+            />
+          </div>
+        );
+      }
+    };
+  });
+
+  it('Allow refs to hop around children correctly', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    let refHopsAround;
+    await act(() => {
+      root.render(<RefHopsAround ref={current => (refHopsAround = current)} />);
+    });
+
+    const firstDiv = refHopsAround.container.querySelector('.first');
+    const secondDiv = refHopsAround.container.querySelector('.second');
+    const thirdDiv = refHopsAround.container.querySelector('.third');
+
+    expect(refHopsAround.hopRef.current).toEqual(firstDiv);
+    expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
+    expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
+
+    await act(() => {
+      refHopsAround.moveRef();
+    });
+    expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
+    expect(refHopsAround.hopRef.current).toEqual(secondDiv);
+    expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
+
+    await act(() => {
+      refHopsAround.moveRef();
+    });
+    expect(refHopsAround.divOneRef.current).toEqual(firstDiv);
+    expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
+    expect(refHopsAround.hopRef.current).toEqual(thirdDiv);
+
+    /**
+     * Make sure that after the third, we're back to where we started and the
+     * refs are completely restored.
+     */
+    await act(() => {
+      refHopsAround.moveRef();
+    });
+    expect(refHopsAround.hopRef.current).toEqual(firstDiv);
+    expect(refHopsAround.divTwoRef.current).toEqual(secondDiv);
+    expect(refHopsAround.divThreeRef.current).toEqual(thirdDiv);
+  });
+
+  it('always has a value for this.refs', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+    expect(!!instance.refs).toBe(true);
+  });
+
+  it('ref called correctly for stateless component', async () => {
+    let refCalled = 0;
+    function Inner(props) {
+      return <a ref={props.saveA} />;
+    }
+
+    class Outer extends React.Component {
+      saveA = () => {
+        refCalled++;
+      };
+
+      componentDidMount() {
+        this.setState({});
+      }
+
+      render() {
+        return <Inner saveA={this.saveA} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
+
+    expect(refCalled).toBe(1);
+  });
+
+  it('provides an error for invalid refs', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(<div ref={10} />);
+      });
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+    }).rejects.toThrow();
+    await expect(async () => {
+      await act(() => {
+        root.render(<div ref={true} />);
+      });
+      // TODO: This throws an AggregateError. Need to update test infra to
+      // support matching against AggregateError.
+    }).rejects.toThrow();
+    await expect(async () => {
+      await act(() => {
+        root.render(<div ref={Symbol('foo')} />);
+      });
+    }).rejects.toThrow('Expected ref to be a function');
+  });
+});
+
+describe('root level refs', () => {
+  it('attaches and detaches root refs', async () => {
+    let inst = null;
+
+    // host node
+    let ref = jest.fn(value => (inst = value));
+    const container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div ref={ref} />);
+    });
+    let result = container.firstChild;
+    expect(ref).toHaveBeenCalledTimes(1);
+    expect(ref.mock.calls[0][0]).toBeInstanceOf(HTMLDivElement);
+    expect(result).toBe(ref.mock.calls[0][0]);
+    await act(() => {
+      root.unmount();
+    });
+    expect(ref).toHaveBeenCalledTimes(2);
+    expect(ref.mock.calls[1][0]).toBe(null);
+
+    // composite
+    class Comp extends React.Component {
+      method() {
+        return true;
+      }
+      render() {
+        return <div>Comp</div>;
+      }
+    }
+
+    inst = null;
+    ref = jest.fn(value => (inst = value));
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Comp ref={ref} />);
+    });
+
+    expect(ref).toHaveBeenCalledTimes(1);
+    expect(inst).toBeInstanceOf(Comp);
+
+    // ensure we have the correct instance
+    expect(inst.method()).toBe(true);
+
+    await act(() => {
+      root.unmount();
+    });
+    expect(ref).toHaveBeenCalledTimes(2);
+    expect(ref.mock.calls[1][0]).toBe(null);
+
+    // fragment
+    inst = null;
+    ref = jest.fn(value => (inst = value));
+    let divInst = null;
+    const ref2 = jest.fn(value => (divInst = value));
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render([
+        <Comp ref={ref} key="a" />,
+        5,
+        <div ref={ref2} key="b">
+          Hello
+        </div>,
+      ]);
+    });
+
+    // first call should be `Comp`
+    expect(ref).toHaveBeenCalledTimes(1);
+    expect(ref.mock.calls[0][0]).toBeInstanceOf(Comp);
+
+    expect(ref2).toHaveBeenCalledTimes(1);
+    expect(divInst).toBeInstanceOf(HTMLDivElement);
+
+    await act(() => {
+      root.unmount();
+    });
+    expect(ref).toHaveBeenCalledTimes(2);
+    expect(ref.mock.calls[1][0]).toBe(null);
+    expect(ref2).toHaveBeenCalledTimes(2);
+    expect(ref2.mock.calls[1][0]).toBe(null);
+
+    // null
+    root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(null);
+    });
+    result = container.firstChild;
+    expect(result).toBe(null);
+
+    // primitives
+    await act(() => {
+      root.render(5);
+    });
+    result = container.firstChild;
+    expect(result).toBeInstanceOf(Text);
+  });
+});
+
+describe('refs return clean up function', () => {
+  it('calls clean up function if it exists', async () => {
+    const container = document.createElement('div');
+    let cleanUp = jest.fn();
+    let setup = jest.fn();
+
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <div
+          ref={_ref => {
+            setup(_ref);
+            return cleanUp;
+          }}
+        />,
+      );
+    });
+
+    await act(() => {
+      root.render(
+        <div
+          ref={_ref => {
+            setup(_ref);
+          }}
+        />,
+      );
+    });
+
+    expect(setup).toHaveBeenCalledTimes(2);
+    expect(cleanUp).toHaveBeenCalledTimes(1);
+    expect(cleanUp.mock.calls[0][0]).toBe(undefined);
+
+    await act(() => {
+      root.render(<div ref={_ref => {}} />);
+    });
+
+    expect(cleanUp).toHaveBeenCalledTimes(1);
+    expect(setup).toHaveBeenCalledTimes(3);
+    expect(setup.mock.calls[2][0]).toBe(null);
+
+    cleanUp = jest.fn();
+    setup = jest.fn();
+
+    await act(() => {
+      root.render(
+        <div
+          ref={_ref => {
+            setup(_ref);
+            return cleanUp;
+          }}
+        />,
+      );
+    });
+
+    expect(setup).toHaveBeenCalledTimes(1);
+    expect(cleanUp).toHaveBeenCalledTimes(0);
+
+    await act(() => {
+      root.render(
+        <div
+          ref={_ref => {
+            setup(_ref);
+            return cleanUp;
+          }}
+        />,
+      );
+    });
+
+    expect(setup).toHaveBeenCalledTimes(2);
+    expect(cleanUp).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles ref functions with stable identity', async () => {
+    const container = document.createElement('div');
+    const cleanUp = jest.fn();
+    const setup = jest.fn();
+
+    function _onRefChange(_ref) {
+      setup(_ref);
+      return cleanUp;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div ref={_onRefChange} />);
+    });
+
+    expect(setup).toHaveBeenCalledTimes(1);
+    expect(cleanUp).toHaveBeenCalledTimes(0);
+
+    await act(() => {
+      root.render(<div className="niceClassName" ref={_onRefChange} />);
+    });
+
+    expect(setup).toHaveBeenCalledTimes(1);
+    expect(cleanUp).toHaveBeenCalledTimes(0);
+
+    await act(() => {
+      root.render(<div />);
+    });
+
+    expect(setup).toHaveBeenCalledTimes(1);
+    expect(cleanUp).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles detaching refs with either cleanup function or null argument', async () => {
+    const container = document.createElement('div');
+    const cleanUp = jest.fn();
+    const setup = jest.fn();
+    const setup2 = jest.fn();
+    const nullHandler = jest.fn();
+
+    function _onRefChangeWithCleanup(_ref) {
+      if (_ref) {
+        setup(_ref.id);
+      } else {
+        nullHandler();
+      }
+      return cleanUp;
+    }
+
+    function _onRefChangeWithoutCleanup(_ref) {
+      if (_ref) {
+        setup2(_ref.id);
+      } else {
+        nullHandler();
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div id="test-div" ref={_onRefChangeWithCleanup} />);
+    });
+
+    expect(setup).toBeCalledWith('test-div');
+    expect(setup).toHaveBeenCalledTimes(1);
+    expect(cleanUp).toHaveBeenCalledTimes(0);
+
+    await act(() => {
+      root.render(<div id="test-div2" ref={_onRefChangeWithoutCleanup} />);
+    });
+
+    // Existing setup call was not called again
+    expect(setup).toHaveBeenCalledTimes(1);
+    // No null call because cleanup is returned
+    expect(nullHandler).toHaveBeenCalledTimes(0);
+    // Now we have a cleanup
+    expect(cleanUp).toHaveBeenCalledTimes(1);
+
+    // New ref is setup
+    expect(setup2).toBeCalledWith('test-div2');
+    expect(setup2).toHaveBeenCalledTimes(1);
+
+    // Now, render with the original ref again
+    await act(() => {
+      root.render(<div id="test-div3" ref={_onRefChangeWithCleanup} />);
+    });
+
+    // Setup was not called again
+    expect(setup2).toBeCalledWith('test-div2');
+    expect(setup2).toHaveBeenCalledTimes(1);
+
+    // Null handler hit because no cleanup is returned
+    expect(nullHandler).toHaveBeenCalledTimes(1);
+
+    // Original setup hit one more time
+    expect(setup).toHaveBeenCalledTimes(2);
+  });
+
+  it('calls cleanup function on unmount', async () => {
+    const container = document.createElement('div');
+    const cleanUp = jest.fn();
+    const setup = jest.fn();
+    const nullHandler = jest.fn();
+
+    function _onRefChangeWithCleanup(_ref) {
+      if (_ref) {
+        setup(_ref.id);
+      } else {
+        nullHandler();
+      }
+      return cleanUp;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div id="test-div" ref={_onRefChangeWithCleanup} />);
+    });
+
+    expect(setup).toHaveBeenCalledTimes(1);
+    expect(cleanUp).toHaveBeenCalledTimes(0);
+    expect(nullHandler).toHaveBeenCalledTimes(0);
+
+    root.unmount();
+
+    expect(setup).toHaveBeenCalledTimes(1);
+    // Now cleanup has been called
+    expect(cleanUp).toHaveBeenCalledTimes(1);
+    // Ref callback never called with null when cleanup is returned
+    expect(nullHandler).toHaveBeenCalledTimes(0);
+  });
+});
+
+describe('useImerativeHandle refs', () => {
+  const ImperativeHandleComponent = React.forwardRef(({name}, ref) => {
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        greet() {
+          return `Hello ${name}`;
+        },
+      }),
+      [name],
+    );
+    return null;
+  });
+
+  it('should work with object style refs', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    const ref = React.createRef();
+
+    await act(async () => {
+      root.render(<ImperativeHandleComponent name="Alice" ref={ref} />);
+    });
+    expect(ref.current.greet()).toBe('Hello Alice');
+    await act(() => {
+      root.render(null);
+    });
+    expect(ref.current).toBe(null);
+  });
+
+  it('should work with callback style refs', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let current = null;
+
+    await act(async () => {
+      root.render(
+        <ImperativeHandleComponent
+          name="Alice"
+          ref={r => {
+            current = r;
+          }}
+        />,
+      );
+    });
+    expect(current.greet()).toBe('Hello Alice');
+    await act(() => {
+      root.render(null);
+    });
+    expect(current).toBe(null);
+  });
+
+  it('should work with callback style refs with cleanup function', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    let cleanupCalls = 0;
+    let createCalls = 0;
+    let current = null;
+
+    const ref = r => {
+      current = r;
+      createCalls++;
+      return () => {
+        current = null;
+        cleanupCalls++;
+      };
+    };
+
+    await act(async () => {
+      root.render(<ImperativeHandleComponent name="Alice" ref={ref} />);
+    });
+    expect(current.greet()).toBe('Hello Alice');
+    expect(createCalls).toBe(1);
+    expect(cleanupCalls).toBe(0);
+
+    // update a dep should recreate the ref
+    await act(async () => {
+      root.render(<ImperativeHandleComponent name="Bob" ref={ref} />);
+    });
+    expect(current.greet()).toBe('Hello Bob');
+    expect(createCalls).toBe(2);
+    expect(cleanupCalls).toBe(1);
+
+    // unmounting should call cleanup
+    await act(() => {
+      root.render(null);
+    });
+    expect(current).toBe(null);
+    expect(createCalls).toBe(2);
+    expect(cleanupCalls).toBe(2);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/refsLegacy-test.js b/packages/react-dom/src/__tests__/refsLegacy-test.js
new file mode 100644
index 00000000000..b207e01e764
--- /dev/null
+++ b/packages/react-dom/src/__tests__/refsLegacy-test.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = require('react');
+let ReactDOM = require('react-dom');
+
+describe('root level refs with legacy APIs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  // @gate !disableLegacyMode
+  it('attaches and detaches root refs', () => {
+    let inst = null;
+
+    // host node
+    let ref = jest.fn(value => (inst = value));
+    const container = document.createElement('div');
+    let result = ReactDOM.render(<div ref={ref} />, container);
+    expect(ref).toHaveBeenCalledTimes(1);
+    expect(ref.mock.calls[0][0]).toBeInstanceOf(HTMLDivElement);
+    expect(result).toBe(ref.mock.calls[0][0]);
+    ReactDOM.unmountComponentAtNode(container);
+    expect(ref).toHaveBeenCalledTimes(2);
+    expect(ref.mock.calls[1][0]).toBe(null);
+
+    // composite
+    class Comp extends React.Component {
+      method() {
+        return true;
+      }
+      render() {
+        return <div>Comp</div>;
+      }
+    }
+
+    inst = null;
+    ref = jest.fn(value => (inst = value));
+    result = ReactDOM.render(<Comp ref={ref} />, container);
+
+    expect(ref).toHaveBeenCalledTimes(1);
+    expect(inst).toBeInstanceOf(Comp);
+    expect(result).toBe(inst);
+
+    // ensure we have the correct instance
+    expect(result.method()).toBe(true);
+    expect(inst.method()).toBe(true);
+
+    ReactDOM.unmountComponentAtNode(container);
+    expect(ref).toHaveBeenCalledTimes(2);
+    expect(ref.mock.calls[1][0]).toBe(null);
+
+    // fragment
+    inst = null;
+    ref = jest.fn(value => (inst = value));
+    let divInst = null;
+    const ref2 = jest.fn(value => (divInst = value));
+    result = ReactDOM.render(
+      [
+        <Comp ref={ref} key="a" />,
+        5,
+        <div ref={ref2} key="b">
+          Hello
+        </div>,
+      ],
+      container,
+    );
+
+    // first call should be `Comp`
+    expect(ref).toHaveBeenCalledTimes(1);
+    expect(ref.mock.calls[0][0]).toBeInstanceOf(Comp);
+    expect(result).toBe(ref.mock.calls[0][0]);
+
+    expect(ref2).toHaveBeenCalledTimes(1);
+    expect(divInst).toBeInstanceOf(HTMLDivElement);
+    expect(result).not.toBe(divInst);
+
+    ReactDOM.unmountComponentAtNode(container);
+    expect(ref).toHaveBeenCalledTimes(2);
+    expect(ref.mock.calls[1][0]).toBe(null);
+    expect(ref2).toHaveBeenCalledTimes(2);
+    expect(ref2.mock.calls[1][0]).toBe(null);
+
+    // null
+    result = ReactDOM.render(null, container);
+    expect(result).toBe(null);
+
+    // primitives
+    result = ReactDOM.render(5, container);
+    expect(result).toBeInstanceOf(Text);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/utils/IntersectionMocks.js b/packages/react-dom/src/__tests__/utils/IntersectionMocks.js
new file mode 100644
index 00000000000..d89a683e8e9
--- /dev/null
+++ b/packages/react-dom/src/__tests__/utils/IntersectionMocks.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const intersectionObserverMock = {callback: null, observedTargets: []};
+
+/**
+ * This is a broken polyfill.
+ * It is only intended to provide bare minimum test coverage.
+ * More meaningful tests will require the use of fixtures.
+ */
+export function mockIntersectionObserver() {
+  intersectionObserverMock.callback = null;
+  intersectionObserverMock.observedTargets = [];
+
+  class IntersectionObserver {
+    constructor() {
+      intersectionObserverMock.callback = arguments[0];
+    }
+
+    disconnect() {
+      intersectionObserverMock.callback = null;
+      intersectionObserverMock.observedTargets.splice(0);
+    }
+
+    observe(target) {
+      intersectionObserverMock.observedTargets.push(target);
+    }
+
+    unobserve(target) {
+      const index = intersectionObserverMock.observedTargets.indexOf(target);
+      if (index >= 0) {
+        intersectionObserverMock.observedTargets.splice(index, 1);
+      }
+    }
+  }
+
+  window.IntersectionObserver = IntersectionObserver;
+
+  return intersectionObserverMock;
+}
+
+export function simulateIntersection(...entries) {
+  intersectionObserverMock.callback(
+    entries.map(([target, rect, ratio]) => ({
+      boundingClientRect: {
+        top: rect.y,
+        left: rect.x,
+        width: rect.width,
+        height: rect.height,
+      },
+      intersectionRatio: ratio,
+      target,
+    })),
+  );
+}
+
+/**
+ * Stub out getBoundingClientRect for the specified target.
+ * This API is required by the test selectors but it isn't implemented by jsdom.
+ */
+export function setBoundingClientRect(target, {x, y, width, height}) {
+  target.getBoundingClientRect = function () {
+    return {
+      width,
+      height,
+      left: x,
+      right: x + width,
+      top: y,
+      bottom: y + height,
+    };
+  };
+}
+
+/**
+ * Stub out getClientRects for the specified target.
+ */
+export function setClientRects(target, rects) {
+  target.getClientRects = function () {
+    return rects.map(({x, y, width, height}) => ({
+      width,
+      height,
+      left: x,
+      right: x + width,
+      top: y,
+      bottom: y + height,
+      x,
+      y,
+    }));
+  };
+}
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
new file mode 100644
index 00000000000..4d2bd050f74
--- /dev/null
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -0,0 +1,408 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 stream = require('stream');
+const shouldIgnoreConsoleError = require('internal-test-utils/shouldIgnoreConsoleError');
+
+module.exports = function (initModules) {
+  let ReactDOM;
+  let ReactDOMClient;
+  let ReactDOMServer;
+  let act;
+
+  function resetModules() {
+    ({ReactDOM, ReactDOMClient, ReactDOMServer} = initModules());
+    act = require('internal-test-utils').act;
+  }
+
+  function shouldUseDocument(reactElement) {
+    // Used for whole document tests.
+    return reactElement && reactElement.type === 'html';
+  }
+
+  function getContainerFromMarkup(reactElement, markup) {
+    if (shouldUseDocument(reactElement)) {
+      const doc = document.implementation.createHTMLDocument('');
+      doc.open();
+      doc.write(
+        markup ||
+          '<!doctype html><html><meta charset=utf-8><title>test doc</title>',
+      );
+      doc.close();
+      return doc;
+    } else {
+      const container = document.createElement('div');
+      container.innerHTML = markup;
+      return container;
+    }
+  }
+
+  // Helper functions for rendering tests
+  // ====================================
+
+  // promisified version of ReactDOM.render()
+  async function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
+    if (forceHydrate) {
+      await act(() => {
+        ReactDOMClient.hydrateRoot(domElement, reactElement, {
+          onRecoverableError(e) {
+            if (
+              e.message.startsWith(
+                'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+              )
+            ) {
+              // We ignore this extra error because it shouldn't really need to be there if
+              // a hydration mismatch is the cause of it.
+            } else {
+              console.error(e);
+            }
+          },
+        });
+      });
+    } else {
+      await act(() => {
+        if (ReactDOMClient) {
+          const root = ReactDOMClient.createRoot(domElement);
+          root.render(reactElement);
+        } else {
+          ReactDOM.render(reactElement, domElement);
+        }
+      });
+    }
+  }
+  // performs fn asynchronously and expects count errors logged to console.error.
+  // will fail the test if the count of errors logged is not equal to count.
+  async function expectErrors(fn, count) {
+    if (console.error.mockClear) {
+      console.error.mockClear();
+    } else {
+      // TODO: Rewrite tests that use this helper to enumerate expected errors.
+      // This will enable the helper to use the assertConsoleErrorDev instead of spying.
+      spyOnDev(console, 'error').mockImplementation(() => {});
+    }
+
+    const result = await fn();
+    if (
+      console.error.mock &&
+      console.error.mock.calls &&
+      console.error.mock.calls.length !== 0
+    ) {
+      const filteredWarnings = [];
+      for (let i = 0; i < console.error.mock.calls.length; i++) {
+        const args = console.error.mock.calls[i];
+        const [format, ...rest] = args;
+        if (!shouldIgnoreConsoleError(format, rest)) {
+          filteredWarnings.push(args);
+        }
+      }
+      if (filteredWarnings.length !== count) {
+        console.log(
+          `We expected ${count} warning(s), but saw ${filteredWarnings.length} warning(s).`,
+        );
+        if (filteredWarnings.length > 0) {
+          console.log(`We saw these warnings:`);
+          for (let i = 0; i < filteredWarnings.length; i++) {
+            console.log(...filteredWarnings[i]);
+          }
+        }
+        if (__DEV__) {
+          expect(console.error).toHaveBeenCalledTimes(count);
+        }
+      }
+    }
+    return result;
+  }
+
+  // renders the reactElement into domElement, and expects a certain number of errors.
+  // returns a Promise that resolves when the render is complete.
+  function renderIntoDom(
+    reactElement,
+    domElement,
+    forceHydrate,
+    errorCount = 0,
+  ) {
+    return expectErrors(async () => {
+      await asyncReactDOMRender(reactElement, domElement, forceHydrate);
+      return domElement.firstChild;
+    }, errorCount);
+  }
+
+  async function renderIntoString(reactElement, errorCount = 0) {
+    return await expectErrors(
+      () =>
+        new Promise(resolve =>
+          resolve(ReactDOMServer.renderToString(reactElement)),
+        ),
+      errorCount,
+    );
+  }
+
+  // Renders text using SSR and then stuffs it into a DOM node; returns the DOM
+  // element that corresponds with the reactElement.
+  // Does not render on client or perform client-side revival.
+  async function serverRender(reactElement, errorCount = 0) {
+    const markup = await renderIntoString(reactElement, errorCount);
+    return getContainerFromMarkup(reactElement, markup).firstChild;
+  }
+
+  // this just drains a readable piped into it to a string, which can be accessed
+  // via .buffer.
+  class DrainWritable extends stream.Writable {
+    constructor(options) {
+      super(options);
+      this.buffer = '';
+    }
+
+    _write(chunk, encoding, cb) {
+      this.buffer += chunk;
+      cb();
+    }
+  }
+
+  async function renderIntoStream(reactElement, errorCount = 0) {
+    return await expectErrors(
+      () =>
+        new Promise((resolve, reject) => {
+          const writable = new DrainWritable();
+          const s = ReactDOMServer.renderToPipeableStream(reactElement, {
+            onShellError(e) {
+              reject(e);
+            },
+          });
+          s.pipe(writable);
+          writable.on('finish', () => resolve(writable.buffer));
+        }),
+      errorCount,
+    );
+  }
+
+  // Renders text using node stream SSR and then stuffs it into a DOM node;
+  // returns the DOM element that corresponds with the reactElement.
+  // Does not render on client or perform client-side revival.
+  async function streamRender(reactElement, errorCount = 0) {
+    const markup = await renderIntoStream(reactElement, errorCount);
+    let firstNode = getContainerFromMarkup(reactElement, markup).firstChild;
+    if (firstNode && firstNode.nodeType === Node.DOCUMENT_TYPE_NODE) {
+      // Skip document type nodes.
+      firstNode = firstNode.nextSibling;
+    }
+    return firstNode;
+  }
+
+  const clientCleanRender = (element, errorCount = 0) => {
+    if (shouldUseDocument(element)) {
+      // Documents can't be rendered from scratch.
+      return clientRenderOnServerString(element, errorCount);
+    }
+    const container = document.createElement('div');
+    return renderIntoDom(element, container, false, errorCount);
+  };
+
+  const clientRenderOnServerString = async (element, errorCount = 0) => {
+    const markup = await renderIntoString(element, errorCount);
+    resetModules();
+
+    const container = getContainerFromMarkup(element, markup);
+    let serverNode = container.firstChild;
+
+    const firstClientNode = await renderIntoDom(
+      element,
+      container,
+      true,
+      errorCount,
+    );
+    let clientNode = firstClientNode;
+
+    // Make sure all top level nodes match up
+    while (serverNode || clientNode) {
+      expect(serverNode != null).toBe(true);
+      expect(clientNode != null).toBe(true);
+      expect(clientNode.nodeType).toBe(serverNode.nodeType);
+      // Assert that the DOM element hasn't been replaced.
+      // Note that we cannot use expect(serverNode).toBe(clientNode) because
+      // of jest bug #1772.
+      expect(serverNode === clientNode).toBe(true);
+      serverNode = serverNode.nextSibling;
+      clientNode = clientNode.nextSibling;
+    }
+    return firstClientNode;
+  };
+
+  function BadMarkupExpected() {}
+
+  const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
+    // First we render the top of bad mark up.
+
+    const container = getContainerFromMarkup(
+      element,
+      shouldUseDocument(element)
+        ? '<html><body><div id="badIdWhichWillCauseMismatch" /></body></html>'
+        : '<div id="badIdWhichWillCauseMismatch"></div>',
+    );
+
+    await renderIntoDom(element, container, true, errorCount + 1);
+
+    // This gives us the resulting text content.
+    const hydratedTextContent =
+      container.lastChild && container.lastChild.textContent;
+
+    // Next we render the element into a clean DOM node client side.
+    let cleanContainer;
+    if (shouldUseDocument(element)) {
+      // We can't render into a document during a clean render,
+      // so instead, we'll render the children into the document element.
+      cleanContainer = getContainerFromMarkup(
+        element,
+        '<html></html>',
+      ).documentElement;
+      element = element.props.children;
+    } else {
+      cleanContainer = document.createElement('div');
+    }
+    await asyncReactDOMRender(element, cleanContainer, true);
+    // This gives us the expected text content.
+    const cleanTextContent =
+      (cleanContainer.lastChild && cleanContainer.lastChild.textContent) || '';
+
+    // The only guarantee is that text content has been patched up if needed.
+    expect(hydratedTextContent).toBe(cleanTextContent);
+
+    // Abort any further expects. All bets are off at this point.
+    throw new BadMarkupExpected();
+  };
+
+  // runs a DOM rendering test as four different tests, with four different rendering
+  // scenarios:
+  // -- render to string on server
+  // -- render on client without any server markup "clean client render"
+  // -- render on client on top of good server-generated string markup
+  // -- render on client on top of bad server-generated markup
+  //
+  // testFn is a test that has one arg, which is a render function. the render
+  // function takes in a ReactElement and an optional expected error count and
+  // returns a promise of a DOM Element.
+  //
+  // You should only perform tests that examine the DOM of the results of
+  // render; you should not depend on the interactivity of the returned DOM element,
+  // as that will not work in the server string scenario.
+  function itRenders(desc, testFn) {
+    it(`renders ${desc} with server string render`, () => testFn(serverRender));
+    it(`renders ${desc} with server stream render`, () => testFn(streamRender));
+    itClientRenders(desc, testFn);
+  }
+
+  // run testFn in three different rendering scenarios:
+  // -- render on client without any server markup "clean client render"
+  // -- render on client on top of good server-generated string markup
+  // -- render on client on top of bad server-generated markup
+  //
+  // testFn is a test that has one arg, which is a render function. the render
+  // function takes in a ReactElement and an optional expected error count and
+  // returns a promise of a DOM Element.
+  //
+  // Since all of the renders in this function are on the client, you can test interactivity,
+  // unlike with itRenders.
+  function itClientRenders(desc, testFn) {
+    it(`renders ${desc} with clean client render`, () =>
+      testFn(clientCleanRender));
+    it(`renders ${desc} with client render on top of good server markup`, () =>
+      testFn(clientRenderOnServerString));
+    it(`renders ${desc} with client render on top of bad server markup`, async () => {
+      try {
+        await testFn(clientRenderOnBadMarkup);
+      } catch (x) {
+        // We expect this to trigger the BadMarkupExpected rejection.
+        if (!(x instanceof BadMarkupExpected)) {
+          // If not, rethrow.
+          throw x;
+        }
+      }
+    });
+  }
+
+  function itThrows(desc, testFn, partialMessage) {
+    it(`throws ${desc}`, () => {
+      return testFn().then(
+        () => expect(false).toBe('The promise resolved and should not have.'),
+        err => {
+          expect(err).toBeInstanceOf(Error);
+          expect(err.message).toContain(partialMessage);
+        },
+      );
+    });
+  }
+
+  function itThrowsWhenRendering(desc, testFn, partialMessage) {
+    itThrows(
+      `when rendering ${desc} with server string render`,
+      () => testFn(serverRender),
+      partialMessage,
+    );
+    itThrows(
+      `when rendering ${desc} with clean client render`,
+      () => testFn(clientCleanRender),
+      partialMessage,
+    );
+
+    // we subtract one from the warning count here because the throw means that it won't
+    // get the usual markup mismatch warning.
+    itThrows(
+      `when rendering ${desc} with client render on top of bad server markup`,
+      () =>
+        testFn((element, warningCount = 0) =>
+          clientRenderOnBadMarkup(element, warningCount - 1),
+        ),
+      partialMessage,
+    );
+  }
+
+  // renders serverElement to a string, sticks it into a DOM element, and then
+  // tries to render clientElement on top of it. shouldMatch is a boolean
+  // telling whether we should expect the markup to match or not.
+  async function testMarkupMatch(serverElement, clientElement, shouldMatch) {
+    const domElement = await serverRender(serverElement);
+    resetModules();
+    return renderIntoDom(
+      clientElement,
+      domElement.parentNode,
+      true,
+      shouldMatch ? 0 : 1,
+    );
+  }
+
+  // expects that rendering clientElement on top of a server-rendered
+  // serverElement does NOT raise a markup mismatch warning.
+  function expectMarkupMatch(serverElement, clientElement) {
+    return testMarkupMatch(serverElement, clientElement, true);
+  }
+
+  // expects that rendering clientElement on top of a server-rendered
+  // serverElement DOES raise a markup mismatch warning.
+  function expectMarkupMismatch(serverElement, clientElement) {
+    return testMarkupMatch(serverElement, clientElement, false);
+  }
+
+  return {
+    resetModules,
+    expectMarkupMismatch,
+    expectMarkupMatch,
+    itRenders,
+    itClientRenders,
+    itThrowsWhenRendering,
+    asyncReactDOMRender,
+    serverRender,
+    clientCleanRender,
+    clientRenderOnBadMarkup,
+    clientRenderOnServerString,
+    renderIntoDom,
+    streamRender,
+  };
+};
diff --git a/packages/react-dom/src/__tests__/validateDOMNesting-test.js b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
new file mode 100644
index 00000000000..0c5de0cc259
--- /dev/null
+++ b/packages/react-dom/src/__tests__/validateDOMNesting-test.js
@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOM = require('react-dom');
+const ReactDOMClient = require('react-dom/client');
+const assertConsoleErrorDev =
+  require('internal-test-utils').assertConsoleErrorDev;
+
+function expectWarnings(tags, warnings = [], withoutStack = 0) {
+  tags = [...tags];
+  warnings = [...warnings];
+
+  document.removeChild(document.documentElement);
+  document.appendChild(document.createElement('html'));
+  document.documentElement.innerHTML = '<head></head><body></body>';
+
+  let element = null;
+  const containerTag = tags.shift();
+  let container;
+  switch (containerTag) {
+    case '#document':
+      container = document;
+      break;
+    case 'html':
+      container = document.documentElement;
+      break;
+    case 'body':
+      container = document.body;
+      break;
+    case 'head':
+      container = document.head;
+      break;
+    case 'svg':
+      container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      break;
+    default:
+      container = document.createElement(containerTag);
+      break;
+  }
+
+  while (tags.length) {
+    const Tag = tags.pop();
+    if (Tag === '#text') {
+      element = 'text';
+    } else {
+      element = <Tag>{element}</Tag>;
+    }
+  }
+
+  const root = ReactDOMClient.createRoot(container);
+  ReactDOM.flushSync(() => {
+    root.render(element);
+  });
+  if (warnings.length) {
+    assertConsoleErrorDev(
+      warnings,
+      withoutStack > 0 ? {withoutStack} : undefined,
+    );
+  }
+  root.unmount();
+}
+
+describe('validateDOMNesting', () => {
+  it('allows valid nestings', () => {
+    expectWarnings(['table', 'tbody', 'tr', 'td', 'b']);
+    expectWarnings(['body', 'datalist', 'option']);
+    expectWarnings(['div', 'a', 'object', 'a']);
+    expectWarnings(['div', 'p', 'button', 'p']);
+    expectWarnings(['p', 'svg', 'foreignObject', 'p']);
+    expectWarnings(['html', 'body', 'div']);
+
+    // Invalid, but not changed by browser parsing so we allow them
+    expectWarnings(['div', 'ul', 'ul', 'li']);
+    expectWarnings(['div', 'label', 'div']);
+    expectWarnings(['div', 'ul', 'li', 'section', 'li']);
+    expectWarnings(['div', 'ul', 'li', 'dd', 'li']);
+  });
+
+  it('prevents problematic nestings', () => {
+    expectWarnings(
+      ['a', 'a'],
+      [
+        'In HTML, <a> cannot be a descendant of <a>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in a (at **)',
+      ],
+    );
+    expectWarnings(
+      ['form', 'form'],
+      [
+        'In HTML, <form> cannot be a descendant of <form>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in form (at **)',
+      ],
+    );
+    expectWarnings(
+      ['p', 'p'],
+      [
+        'In HTML, <p> cannot be a descendant of <p>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in p (at **)',
+      ],
+    );
+    expectWarnings(
+      ['table', 'tr'],
+      [
+        'In HTML, <tr> cannot be a child of <table>. ' +
+          'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
+          'This will cause a hydration error.\n' +
+          '    in tr (at **)',
+      ],
+    );
+    expectWarnings(
+      ['div', 'ul', 'li', 'div', 'li'],
+
+      [
+        'In HTML, <li> cannot be a descendant of <li>.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '  <ul>\n' +
+          '>   <li>\n' +
+          '      <div>\n' +
+          '>       <li>\n' +
+          '\n' +
+          '    in li (at **)',
+        '<li> cannot contain a nested <li>.\nSee this log for the ancestor stack trace.\n' +
+          '    in li (at **)',
+      ],
+    );
+    expectWarnings(
+      ['div', 'html'],
+      [
+        'In HTML, <html> cannot be a child of <div>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in html (at **)',
+      ],
+    );
+    expectWarnings(
+      ['body', 'body'],
+      [
+        'In HTML, <body> cannot be a child of <body>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in body (at **)',
+      ],
+    );
+    expectWarnings(
+      ['head', 'body'],
+      [
+        'In HTML, <body> cannot be a child of <head>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in body (at **)',
+      ],
+    );
+    expectWarnings(
+      ['head', 'head'],
+      [
+        'In HTML, <head> cannot be a child of <head>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in head (at **)',
+      ],
+    );
+    expectWarnings(
+      ['html', 'html'],
+      [
+        'In HTML, <html> cannot be a child of <html>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in html (at **)',
+      ],
+    );
+    expectWarnings(
+      ['body', 'html'],
+      [
+        'In HTML, <html> cannot be a child of <body>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in html (at **)',
+      ],
+    );
+    expectWarnings(
+      ['head', 'html'],
+      [
+        'In HTML, <html> cannot be a child of <head>.\n' +
+          'This will cause a hydration error.\n' +
+          '    in html (at **)',
+      ],
+    );
+    expectWarnings(
+      ['svg', 'foreignObject', 'body', 'p'],
+      [
+        // TODO, this should say "In SVG",
+        'In HTML, <body> cannot be a child of <foreignObject>.\n' +
+          'This will cause a hydration error.\n' +
+          '\n' +
+          '> <foreignObject>\n' +
+          '>   <body>\n' +
+          '\n' +
+          '    in body (at **)',
+      ],
+    );
+  });
+
+  it('relaxes the nesting rules at the root when the container is a singleton', () => {
+    expectWarnings(['#document', 'html']);
+    expectWarnings(['#document', 'body']);
+    expectWarnings(['#document', 'head']);
+    expectWarnings(['#document', 'div']);
+    expectWarnings(['#document', 'meta']);
+    expectWarnings(['#document', '#text']);
+    expectWarnings(['html', 'body']);
+    expectWarnings(['html', 'head']);
+    expectWarnings(['html', 'div']);
+    expectWarnings(['html', 'meta']);
+    expectWarnings(['html', '#text']);
+    expectWarnings(['body', 'head']);
+    expectWarnings(['body', 'div']);
+    expectWarnings(['body', 'meta']);
+    expectWarnings(['body', '#text']);
+  });
+});
diff --git a/packages/react-dom/src/client/ReactDOMClient.js b/packages/react-dom/src/client/ReactDOMClient.js
new file mode 100644
index 00000000000..9a9f3157b82
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMClient.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {createRoot, hydrateRoot} from './ReactDOMRoot';
+
+import {
+  injectIntoDevTools,
+  findHostInstance,
+} from 'react-reconciler/src/ReactFiberReconciler';
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+import ReactVersion from 'shared/ReactVersion';
+
+import Internals from 'shared/ReactDOMSharedInternals';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+if (__DEV__) {
+  if (
+    typeof Map !== 'function' ||
+    // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
+    Map.prototype == null ||
+    typeof Map.prototype.forEach !== 'function' ||
+    typeof Set !== 'function' ||
+    // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype
+    Set.prototype == null ||
+    typeof Set.prototype.clear !== 'function' ||
+    typeof Set.prototype.forEach !== 'function'
+  ) {
+    console.error(
+      'React depends on Map and Set built-in types. Make sure that you load a ' +
+        'polyfill in older browsers. https://react.dev/link/react-polyfills',
+    );
+  }
+}
+
+function findDOMNode(
+  componentOrElement: component(...props: any),
+): null | Element | Text {
+  return findHostInstance(componentOrElement);
+}
+
+// Expose findDOMNode on internals
+Internals.findDOMNode = findDOMNode;
+
+export {ReactVersion as version, createRoot, hydrateRoot};
+
+const foundDevTools = injectIntoDevTools();
+
+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)) {
+        // eslint-disable-next-line react-internal/no-production-logging
+        console.info(
+          '%cDownload the React DevTools ' +
+            'for a better development experience: ' +
+            'https://react.dev/link/react-devtools' +
+            (protocol === 'file:'
+              ? '\nYou might need to use a local HTTP server (instead of file://): ' +
+                'https://react.dev/link/react-devtools-faq'
+              : ''),
+          'font-weight:bold',
+        );
+      }
+    }
+  }
+}
diff --git a/packages/react-dom/src/client/ReactDOMClientFB.js b/packages/react-dom/src/client/ReactDOMClientFB.js
new file mode 100644
index 00000000000..872a4550aa3
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMClientFB.js
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
+import {createEventHandle} from 'react-dom-bindings/src/client/ReactDOMEventHandle';
+import {runWithPriority} from 'react-dom-bindings/src/client/ReactDOMUpdatePriority';
+import {flushSync as flushSyncIsomorphic} from '../shared/ReactDOMFlushSync';
+
+import {
+  flushSyncFromReconciler as flushSyncWithoutWarningIfAlreadyRendering,
+  isAlreadyRendering,
+  injectIntoDevTools,
+  findHostInstance,
+} from 'react-reconciler/src/ReactFiberReconciler';
+import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+import ReactVersion from 'shared/ReactVersion';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+import {
+  getInstanceFromNode,
+  getNodeFromInstance,
+  getFiberCurrentPropsFromNode,
+} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
+import {
+  enqueueStateRestore,
+  restoreStateIfNeeded,
+} from 'react-dom-bindings/src/events/ReactDOMControlledComponent';
+import Internals from '../ReactDOMSharedInternalsFB';
+
+export {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+} from '../shared/ReactDOMFloat';
+export {
+  useFormStatus,
+  useFormState,
+  requestFormReset,
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+
+if (__DEV__) {
+  if (
+    typeof Map !== 'function' ||
+    // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
+    Map.prototype == null ||
+    typeof Map.prototype.forEach !== 'function' ||
+    typeof Set !== 'function' ||
+    // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype
+    Set.prototype == null ||
+    typeof Set.prototype.clear !== 'function' ||
+    typeof Set.prototype.forEach !== 'function'
+  ) {
+    console.error(
+      'React depends on Map and Set built-in types. Make sure that you load a ' +
+        'polyfill in older browsers. https://react.dev/link/react-polyfills',
+    );
+  }
+}
+
+function createPortal(
+  children: ReactNodeList,
+  container: Element | DocumentFragment,
+  key: ?string = null,
+): React$Portal {
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  // TODO: pass ReactDOM portal implementation as third argument
+  // $FlowFixMe[incompatible-return] The Flow type is opaque but there's no way to actually create it.
+  return createPortalImpl(children, container, null, key);
+}
+
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSyncFromReconciler<R>(fn: () => R): R;
+declare function flushSyncFromReconciler(): void;
+function flushSyncFromReconciler<R>(fn: (() => R) | void): R | void {
+  if (__DEV__) {
+    if (isAlreadyRendering()) {
+      console.error(
+        'flushSync was called from inside a lifecycle method. React cannot ' +
+          'flush when React is already rendering. Consider moving this call to ' +
+          'a scheduler task or micro task.',
+      );
+    }
+  }
+  // $FlowFixMe[incompatible-call]
+  return flushSyncWithoutWarningIfAlreadyRendering(fn);
+}
+
+const flushSync: typeof flushSyncIsomorphic = disableLegacyMode
+  ? flushSyncIsomorphic
+  : flushSyncFromReconciler;
+
+function findDOMNode(
+  componentOrElement: component(...props: any),
+): null | Element | Text {
+  return findHostInstance(componentOrElement);
+}
+
+// Expose findDOMNode on internals
+Internals.findDOMNode = findDOMNode;
+
+function unstable_batchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
+  // batchedUpdates was a legacy mode feature that is a no-op outside of
+  // legacy mode. In 19, we made it an actual no-op, but we're keeping it
+  // for now since there may be libraries that still include it.
+  return fn(a);
+}
+
+export {
+  createPortal,
+  unstable_batchedUpdates,
+  flushSync,
+  ReactVersion as version,
+  // enableCreateEventHandleAPI
+  createEventHandle as unstable_createEventHandle,
+  // TODO: Remove this once callers migrate to alternatives.
+  // This should only be used by React internals.
+  runWithPriority as unstable_runWithPriority,
+};
+
+// Keep in sync with ReactTestUtils.js.
+// This is an array for better minification.
+Internals.Events /* Events */ = [
+  getInstanceFromNode,
+  getNodeFromInstance,
+  getFiberCurrentPropsFromNode,
+  enqueueStateRestore,
+  restoreStateIfNeeded,
+  unstable_batchedUpdates,
+];
+
+const foundDevTools = injectIntoDevTools();
+
+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)) {
+        // eslint-disable-next-line react-internal/no-production-logging
+        console.info(
+          '%cDownload the React DevTools ' +
+            'for a better development experience: ' +
+            'https://react.dev/link/react-devtools' +
+            (protocol === 'file:'
+              ? '\nYou might need to use a local HTTP server (instead of file://): ' +
+                'https://react.dev/link/react-devtools-faq'
+              : ''),
+          'font-weight:bold',
+        );
+      }
+    }
+  }
+}
diff --git a/packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js b/packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js
new file mode 100644
index 00000000000..37661849cad
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 defaultOnDefaultTransitionIndicator(): void | (() => void) {
+  if (typeof navigation !== 'object') {
+    // If the Navigation API is not available, then this is a noop.
+    return;
+  }
+
+  let isCancelled = false;
+  let pendingResolve: null | (() => void) = null;
+
+  function handleNavigate(event: NavigateEvent) {
+    if (event.canIntercept && event.info === 'react-transition') {
+      event.intercept({
+        handler() {
+          return new Promise(resolve => (pendingResolve = resolve));
+        },
+        focusReset: 'manual',
+        scroll: 'manual',
+      });
+    }
+  }
+
+  function handleNavigateComplete() {
+    if (pendingResolve !== null) {
+      // If this was not our navigation completing, we were probably cancelled.
+      // We'll start a new one below.
+      pendingResolve();
+      pendingResolve = null;
+    }
+    if (!isCancelled) {
+      // Some other navigation completed but we should still be running.
+      // Start another fake one to keep the loading indicator going.
+      // There needs to be an async gap to work around https://issues.chromium.org/u/1/issues/419746417.
+      setTimeout(startFakeNavigation, 20);
+    }
+  }
+
+  // $FlowFixMe
+  navigation.addEventListener('navigate', handleNavigate);
+  // $FlowFixMe
+  navigation.addEventListener('navigatesuccess', handleNavigateComplete);
+  // $FlowFixMe
+  navigation.addEventListener('navigateerror', handleNavigateComplete);
+
+  function startFakeNavigation() {
+    if (isCancelled) {
+      // We already stopped this Transition.
+      return;
+    }
+    if (navigation.transition) {
+      // There is an on-going Navigation already happening. Let's wait for it to
+      // finish before starting our fake one.
+      return;
+    }
+    // Trigger a fake navigation to the same page
+    const currentEntry = navigation.currentEntry;
+    if (currentEntry && currentEntry.url != null) {
+      navigation.navigate(currentEntry.url, {
+        state: currentEntry.getState(),
+        info: 'react-transition', // indicator to routers to ignore this navigation
+        history: 'replace',
+      });
+    }
+  }
+
+  // Delay the start a bit in case this is a fast Transition.
+  setTimeout(startFakeNavigation, 100);
+
+  return function () {
+    isCancelled = true;
+    // $FlowFixMe
+    navigation.removeEventListener('navigate', handleNavigate);
+    // $FlowFixMe
+    navigation.removeEventListener('navigatesuccess', handleNavigateComplete);
+    // $FlowFixMe
+    navigation.removeEventListener('navigateerror', handleNavigateComplete);
+    if (pendingResolve !== null) {
+      pendingResolve();
+      pendingResolve = null;
+    }
+  };
+}
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
new file mode 100644
index 00000000000..a32cefe81d5
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {
+  FiberRoot,
+  TransitionTracingCallbacks,
+} from 'react-reconciler/src/ReactInternalTypes';
+
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
+import {queueExplicitHydrationTarget} from 'react-dom-bindings/src/events/ReactDOMEventReplaying';
+import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {
+  disableCommentsAsDOMContainers,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+
+export type RootType = {
+  render(children: ReactNodeList): void,
+  unmount(): void,
+  _internalRoot: FiberRoot | null,
+};
+
+export type CreateRootOptions = {
+  unstable_strictMode?: boolean,
+  unstable_transitionCallbacks?: TransitionTracingCallbacks,
+  identifierPrefix?: string,
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?component(...props: any),
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onDefaultTransitionIndicator?: () => void | (() => void),
+};
+
+export type HydrateRootOptions = {
+  // Hydration options
+  onHydrated?: (hydrationBoundary: Comment) => void,
+  onDeleted?: (hydrationBoundary: Comment) => void,
+  // Options for all roots
+  unstable_strictMode?: boolean,
+  unstable_transitionCallbacks?: TransitionTracingCallbacks,
+  identifierPrefix?: string,
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?component(...props: any),
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onDefaultTransitionIndicator?: () => void | (() => void),
+  formState?: ReactFormState<any, any> | null,
+};
+
+import {
+  isContainerMarkedAsRoot,
+  markContainerAsRoot,
+  unmarkContainerAsRoot,
+} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
+import {listenToAllSupportedEvents} from 'react-dom-bindings/src/events/DOMPluginEventSystem';
+import {COMMENT_NODE} from 'react-dom-bindings/src/client/HTMLNodeType';
+
+import {
+  createContainer,
+  createHydrationContainer,
+  updateContainer,
+  updateContainerSync,
+  flushSyncWork,
+  isAlreadyRendering,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
+} from 'react-reconciler/src/ReactFiberReconciler';
+import {defaultOnDefaultTransitionIndicator} from './ReactDOMDefaultTransitionIndicator';
+import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
+
+// $FlowFixMe[missing-this-annot]
+function ReactDOMRoot(internalRoot: FiberRoot) {
+  this._internalRoot = internalRoot;
+}
+
+// $FlowFixMe[prop-missing] found when upgrading Flow
+ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render =
+  // $FlowFixMe[missing-this-annot]
+  function (children: ReactNodeList): void {
+    const root = this._internalRoot;
+    if (root === null) {
+      throw new Error('Cannot update an unmounted root.');
+    }
+
+    if (__DEV__) {
+      // using a reference to `arguments` bails out of GCC optimizations which affect function arity
+      const args = arguments;
+      if (typeof args[1] === 'function') {
+        console.error(
+          'does not support the second callback argument. ' +
+            'To execute a side effect after rendering, declare it in a component body with useEffect().',
+        );
+      } else if (isValidContainer(args[1])) {
+        console.error(
+          'You passed a container to the second argument of root.render(...). ' +
+            "You don't need to pass it again since you already passed it to create the root.",
+        );
+      } else if (typeof args[1] !== 'undefined') {
+        console.error(
+          'You passed a second argument to root.render(...) but it only accepts ' +
+            'one argument.',
+        );
+      }
+    }
+    updateContainer(children, root, null, null);
+  };
+
+// $FlowFixMe[prop-missing] found when upgrading Flow
+ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount =
+  // $FlowFixMe[missing-this-annot]
+  function (): void {
+    if (__DEV__) {
+      // using a reference to `arguments` bails out of GCC optimizations which affect function arity
+      const args = arguments;
+      if (typeof args[0] === 'function') {
+        console.error(
+          'does not support a callback argument. ' +
+            'To execute a side effect after rendering, declare it in a component body with useEffect().',
+        );
+      }
+    }
+    const root = this._internalRoot;
+    if (root !== null) {
+      this._internalRoot = null;
+      const container = root.containerInfo;
+      if (__DEV__) {
+        if (isAlreadyRendering()) {
+          console.error(
+            'Attempted to synchronously unmount a root while React was already ' +
+              'rendering. React cannot finish unmounting the root until the ' +
+              'current render has completed, which may lead to a race condition.',
+          );
+        }
+      }
+      updateContainerSync(null, root, null, null);
+      flushSyncWork();
+      unmarkContainerAsRoot(container);
+    }
+  };
+
+export function createRoot(
+  container: Element | Document | DocumentFragment,
+  options?: CreateRootOptions,
+): RootType {
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  warnIfReactDOMContainerInDEV(container);
+
+  const concurrentUpdatesByDefaultOverride = false;
+  let isStrictMode = false;
+  let identifierPrefix = '';
+  let onUncaughtError = defaultOnUncaughtError;
+  let onCaughtError = defaultOnCaughtError;
+  let onRecoverableError = defaultOnRecoverableError;
+  let onDefaultTransitionIndicator = defaultOnDefaultTransitionIndicator;
+  let transitionCallbacks = null;
+
+  if (options !== null && options !== undefined) {
+    if (__DEV__) {
+      if ((options: any).hydrate) {
+        console.warn(
+          'hydrate through createRoot is deprecated. Use ReactDOMClient.hydrateRoot(container, <App />) instead.',
+        );
+      } else {
+        if (
+          typeof options === 'object' &&
+          options !== null &&
+          (options: any).$$typeof === REACT_ELEMENT_TYPE
+        ) {
+          console.error(
+            'You passed a JSX element to createRoot. You probably meant to ' +
+              'call root.render instead. ' +
+              'Example usage:\n\n' +
+              '  let root = createRoot(domContainer);\n' +
+              '  root.render(<App />);',
+          );
+        }
+      }
+    }
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+    if (options.identifierPrefix !== undefined) {
+      identifierPrefix = options.identifierPrefix;
+    }
+    if (options.onUncaughtError !== undefined) {
+      onUncaughtError = options.onUncaughtError;
+    }
+    if (options.onCaughtError !== undefined) {
+      onCaughtError = options.onCaughtError;
+    }
+    if (options.onRecoverableError !== undefined) {
+      onRecoverableError = options.onRecoverableError;
+    }
+    if (enableDefaultTransitionIndicator) {
+      if (options.onDefaultTransitionIndicator !== undefined) {
+        onDefaultTransitionIndicator = options.onDefaultTransitionIndicator;
+      }
+    }
+    if (options.unstable_transitionCallbacks !== undefined) {
+      transitionCallbacks = options.unstable_transitionCallbacks;
+    }
+  }
+
+  const root = createContainer(
+    container,
+    ConcurrentRoot,
+    null,
+    isStrictMode,
+    concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
+    onUncaughtError,
+    onCaughtError,
+    onRecoverableError,
+    onDefaultTransitionIndicator,
+    transitionCallbacks,
+  );
+  markContainerAsRoot(root.current, container);
+
+  const rootContainerElement: Document | Element | DocumentFragment =
+    !disableCommentsAsDOMContainers && container.nodeType === COMMENT_NODE
+      ? (container.parentNode: any)
+      : container;
+  listenToAllSupportedEvents(rootContainerElement);
+
+  // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
+  return new ReactDOMRoot(root);
+}
+
+// $FlowFixMe[missing-this-annot]
+function ReactDOMHydrationRoot(internalRoot: FiberRoot) {
+  this._internalRoot = internalRoot;
+}
+function scheduleHydration(target: Node) {
+  if (target) {
+    queueExplicitHydrationTarget(target);
+  }
+}
+// $FlowFixMe[prop-missing] found when upgrading Flow
+ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = scheduleHydration;
+
+export function hydrateRoot(
+  container: Document | Element,
+  initialChildren: ReactNodeList,
+  options?: HydrateRootOptions,
+): RootType {
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  warnIfReactDOMContainerInDEV(container);
+
+  if (__DEV__) {
+    if (initialChildren === undefined) {
+      console.error(
+        'Must provide initial children as second argument to hydrateRoot. ' +
+          'Example usage: hydrateRoot(domContainer, <App />)',
+      );
+    }
+  }
+
+  // For now we reuse the whole bag of options since they contain
+  // the hydration callbacks.
+  const hydrationCallbacks = options != null ? options : null;
+
+  const concurrentUpdatesByDefaultOverride = false;
+  let isStrictMode = false;
+  let identifierPrefix = '';
+  let onUncaughtError = defaultOnUncaughtError;
+  let onCaughtError = defaultOnCaughtError;
+  let onRecoverableError = defaultOnRecoverableError;
+  let onDefaultTransitionIndicator = defaultOnDefaultTransitionIndicator;
+  let transitionCallbacks = null;
+  let formState = null;
+  if (options !== null && options !== undefined) {
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+    if (options.identifierPrefix !== undefined) {
+      identifierPrefix = options.identifierPrefix;
+    }
+    if (options.onUncaughtError !== undefined) {
+      onUncaughtError = options.onUncaughtError;
+    }
+    if (options.onCaughtError !== undefined) {
+      onCaughtError = options.onCaughtError;
+    }
+    if (options.onRecoverableError !== undefined) {
+      onRecoverableError = options.onRecoverableError;
+    }
+    if (enableDefaultTransitionIndicator) {
+      if (options.onDefaultTransitionIndicator !== undefined) {
+        onDefaultTransitionIndicator = options.onDefaultTransitionIndicator;
+      }
+    }
+    if (options.unstable_transitionCallbacks !== undefined) {
+      transitionCallbacks = options.unstable_transitionCallbacks;
+    }
+    if (options.formState !== undefined) {
+      formState = options.formState;
+    }
+  }
+
+  const root = createHydrationContainer(
+    initialChildren,
+    null,
+    container,
+    ConcurrentRoot,
+    hydrationCallbacks,
+    isStrictMode,
+    concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
+    onUncaughtError,
+    onCaughtError,
+    onRecoverableError,
+    onDefaultTransitionIndicator,
+    transitionCallbacks,
+    formState,
+  );
+  markContainerAsRoot(root.current, container);
+  // This can't be a comment node since hydration doesn't work on comment nodes anyway.
+  listenToAllSupportedEvents(container);
+
+  // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
+  return new ReactDOMHydrationRoot(root);
+}
+
+function warnIfReactDOMContainerInDEV(container: any) {
+  if (__DEV__) {
+    if (isContainerMarkedAsRoot(container)) {
+      if (container._reactRootContainer) {
+        console.error(
+          'You are calling ReactDOMClient.createRoot() on a container that was previously ' +
+            'passed to ReactDOM.render(). This is not supported.',
+        );
+      } else {
+        console.error(
+          'You are calling ReactDOMClient.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/ReactDOMRootFB.js b/packages/react-dom/src/client/ReactDOMRootFB.js
new file mode 100644
index 00000000000..3a0205fe799
--- /dev/null
+++ b/packages/react-dom/src/client/ReactDOMRootFB.js
@@ -0,0 +1,510 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import type {
+  RootType,
+  CreateRootOptions,
+  HydrateRootOptions,
+} from './ReactDOMRoot';
+
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+
+import type {
+  Container,
+  PublicInstance,
+} from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+
+import {
+  createRoot as createRootImpl,
+  hydrateRoot as hydrateRootImpl,
+} from './ReactDOMRoot';
+
+import {
+  disableLegacyMode,
+  disableCommentsAsDOMContainers,
+} from 'shared/ReactFeatureFlags';
+import {clearContainer} from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+import {
+  getInstanceFromNode,
+  isContainerMarkedAsRoot,
+  markContainerAsRoot,
+  unmarkContainerAsRoot,
+} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
+import {listenToAllSupportedEvents} from 'react-dom-bindings/src/events/DOMPluginEventSystem';
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
+import {
+  DOCUMENT_NODE,
+  ELEMENT_NODE,
+  COMMENT_NODE,
+} from 'react-dom-bindings/src/client/HTMLNodeType';
+
+import {
+  batchedUpdates,
+  createContainer,
+  createHydrationContainer,
+  findHostInstanceWithNoPortals,
+  updateContainer,
+  updateContainerSync,
+  flushSyncWork,
+  getPublicRootInstance,
+  findHostInstance,
+  findHostInstanceWithWarning,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+} from 'react-reconciler/src/ReactFiberReconciler';
+import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+
+import {
+  current as currentOwner,
+  isRendering,
+} from 'react-reconciler/src/ReactCurrentFiber';
+
+import assign from 'shared/assign';
+
+import noop from 'shared/noop';
+
+// Provided by www
+const ReactFiberErrorDialogWWW = require('ReactFiberErrorDialog');
+
+if (typeof ReactFiberErrorDialogWWW.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
+
+function wwwOnUncaughtError(
+  error: mixed,
+  errorInfo: {+componentStack?: ?string},
+): void {
+  const componentStack =
+    errorInfo.componentStack != null ? errorInfo.componentStack : '';
+  const logError = ReactFiberErrorDialogWWW.showErrorDialog({
+    errorBoundary: null,
+    error,
+    componentStack,
+  });
+
+  // Allow injected showErrorDialog() to prevent default console.error logging.
+  // This enables renderers like ReactNative to better manage redbox behavior.
+  if (logError === false) {
+    return;
+  }
+
+  defaultOnUncaughtError(error, errorInfo);
+}
+
+function wwwOnCaughtError(
+  error: mixed,
+  errorInfo: {
+    +componentStack?: ?string,
+    +errorBoundary?: ?component(),
+  },
+): void {
+  const errorBoundary = errorInfo.errorBoundary;
+  const componentStack =
+    errorInfo.componentStack != null ? errorInfo.componentStack : '';
+  const logError = ReactFiberErrorDialogWWW.showErrorDialog({
+    errorBoundary,
+    error,
+    componentStack,
+  });
+
+  // Allow injected showErrorDialog() to prevent default console.error logging.
+  // This enables renderers like ReactNative to better manage redbox behavior.
+  if (logError === false) {
+    return;
+  }
+
+  defaultOnCaughtError(error, errorInfo);
+}
+const noopOnDefaultTransitionIndicator = noop;
+
+export function createRoot(
+  container: Element | Document | DocumentFragment,
+  options?: CreateRootOptions,
+): RootType {
+  return createRootImpl(
+    container,
+    assign(
+      ({
+        onUncaughtError: wwwOnUncaughtError,
+        onCaughtError: wwwOnCaughtError,
+        onDefaultTransitionIndicator: noopOnDefaultTransitionIndicator,
+      }: any),
+      options,
+    ),
+  );
+}
+
+export function hydrateRoot(
+  container: Document | Element,
+  initialChildren: ReactNodeList,
+  options?: HydrateRootOptions,
+): RootType {
+  return hydrateRootImpl(
+    container,
+    initialChildren,
+    assign(
+      ({
+        onUncaughtError: wwwOnUncaughtError,
+        onCaughtError: wwwOnCaughtError,
+        onDefaultTransitionIndicator: noopOnDefaultTransitionIndicator,
+      }: any),
+      options,
+    ),
+  );
+}
+
+let topLevelUpdateWarnings;
+
+if (__DEV__) {
+  topLevelUpdateWarnings = (container: Container) => {
+    if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
+      const hostInstance = findHostInstanceWithNoPortals(
+        container._reactRootContainer.current,
+      );
+      if (hostInstance) {
+        if (hostInstance.parentNode !== container) {
+          console.error(
+            '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(
+        '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.',
+      );
+    }
+  };
+}
+
+function getReactRootElementInContainer(container: any) {
+  if (!container) {
+    return null;
+  }
+
+  if (container.nodeType === DOCUMENT_NODE) {
+    return container.documentElement;
+  } else {
+    return container.firstChild;
+  }
+}
+
+// This isn't reachable because onRecoverableError isn't called in the
+// legacy API.
+const noopOnRecoverableError = noop;
+
+function legacyCreateRootFromDOMContainer(
+  container: Container,
+  initialChildren: ReactNodeList,
+  parentComponent: ?component(...props: any),
+  callback: ?Function,
+  isHydrationContainer: boolean,
+): FiberRoot {
+  if (isHydrationContainer) {
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function () {
+        const instance = getPublicRootInstance(root);
+        originalCallback.call(instance);
+      };
+    }
+
+    const root: FiberRoot = createHydrationContainer(
+      initialChildren,
+      callback,
+      container,
+      LegacyRoot,
+      null, // hydrationCallbacks
+      false, // isStrictMode
+      false, // concurrentUpdatesByDefaultOverride,
+      '', // identifierPrefix
+      wwwOnUncaughtError,
+      wwwOnCaughtError,
+      noopOnRecoverableError,
+      noopOnDefaultTransitionIndicator,
+      // TODO(luna) Support hydration later
+      null,
+      null,
+    );
+    container._reactRootContainer = root;
+    markContainerAsRoot(root.current, container);
+
+    const rootContainerElement =
+      !disableCommentsAsDOMContainers && container.nodeType === COMMENT_NODE
+        ? container.parentNode
+        : container;
+    // $FlowFixMe[incompatible-call]
+    listenToAllSupportedEvents(rootContainerElement);
+
+    flushSyncWork();
+    return root;
+  } else {
+    // First clear any existing content.
+    clearContainer(container);
+
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function () {
+        const instance = getPublicRootInstance(root);
+        originalCallback.call(instance);
+      };
+    }
+
+    const root = createContainer(
+      container,
+      LegacyRoot,
+      null, // hydrationCallbacks
+      false, // isStrictMode
+      false, // concurrentUpdatesByDefaultOverride,
+      '', // identifierPrefix
+      wwwOnUncaughtError,
+      wwwOnCaughtError,
+      noopOnRecoverableError,
+      noopOnDefaultTransitionIndicator,
+      null, // transitionCallbacks
+    );
+    container._reactRootContainer = root;
+    markContainerAsRoot(root.current, container);
+
+    const rootContainerElement =
+      !disableCommentsAsDOMContainers && container.nodeType === COMMENT_NODE
+        ? container.parentNode
+        : container;
+    // $FlowFixMe[incompatible-call]
+    listenToAllSupportedEvents(rootContainerElement);
+
+    // Initial mount should not be batched.
+    updateContainerSync(initialChildren, root, parentComponent, callback);
+    flushSyncWork();
+
+    return root;
+  }
+}
+
+function warnOnInvalidCallback(callback: mixed): void {
+  if (__DEV__) {
+    if (callback !== null && typeof callback !== 'function') {
+      console.error(
+        'Expected the last optional `callback` argument to be a ' +
+          'function. Instead received: %s.',
+        callback,
+      );
+    }
+  }
+}
+
+function legacyRenderSubtreeIntoContainer(
+  parentComponent: ?component(...props: any),
+  children: ReactNodeList,
+  container: Container,
+  forceHydrate: boolean,
+  callback: ?Function,
+): component(...props: any) | PublicInstance | null {
+  if (__DEV__) {
+    topLevelUpdateWarnings(container);
+    warnOnInvalidCallback(callback === undefined ? null : callback);
+  }
+
+  const maybeRoot = container._reactRootContainer;
+  let root: FiberRoot;
+  if (!maybeRoot) {
+    // Initial mount
+    root = legacyCreateRootFromDOMContainer(
+      container,
+      children,
+      parentComponent,
+      callback,
+      forceHydrate,
+    );
+  } else {
+    root = maybeRoot;
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function () {
+        const instance = getPublicRootInstance(root);
+        originalCallback.call(instance);
+      };
+    }
+    // Update
+    updateContainer(children, root, parentComponent, callback);
+  }
+  return getPublicRootInstance(root);
+}
+
+export function findDOMNode(
+  componentOrElement: Element | ?component(...props: any),
+): null | Element | Text {
+  if (__DEV__) {
+    const owner = currentOwner;
+    if (owner !== null && isRendering && 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.',
+          getComponentNameFromType(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 render(
+  element: React$Element<any>,
+  container: Container,
+  callback: ?Function,
+): component(...props: any) | PublicInstance | null {
+  if (disableLegacyMode) {
+    if (__DEV__) {
+      console.error(
+        'ReactDOM.render was removed in React 19. Use createRoot instead.',
+      );
+    }
+    throw new Error('ReactDOM: Unsupported Legacy Mode API.');
+  }
+  if (__DEV__) {
+    console.error(
+      'ReactDOM.render has not been supported since React 18. Use createRoot ' +
+        'instead. Until you switch to the new API, your app will behave as ' +
+        "if it's running React 17. Learn " +
+        'more: https://react.dev/link/switch-to-createroot',
+    );
+  }
+
+  if (!isValidContainer(container)) {
+    throw new Error('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 ReactDOMClient.createRoot(). This is not supported. ' +
+          'Did you mean to call root.render(element)?',
+      );
+    }
+  }
+  return legacyRenderSubtreeIntoContainer(
+    null,
+    element,
+    container,
+    false,
+    callback,
+  );
+}
+
+export function unmountComponentAtNode(container: Container): boolean {
+  if (disableLegacyMode) {
+    if (__DEV__) {
+      console.error(
+        'unmountComponentAtNode was removed in React 19. Use root.unmount() instead.',
+      );
+    }
+    throw new Error('ReactDOM: Unsupported Legacy Mode API.');
+  }
+  if (!isValidContainer(container)) {
+    throw new Error('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 ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?',
+      );
+    }
+  }
+
+  if (container._reactRootContainer) {
+    const root = 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.',
+        );
+      }
+    }
+
+    updateContainerSync(null, root, null, null);
+    flushSyncWork();
+    // $FlowFixMe[incompatible-type] This should probably use `delete container._reactRootContainer`
+    container._reactRootContainer = null;
+    unmarkContainerAsRoot(container);
+    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) &&
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        !!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;
+  }
+}
+
+export {batchedUpdates as unstable_batchedUpdates};
diff --git a/packages/react-dom/src/client/__mocks__/ReactFiberErrorDialog.js b/packages/react-dom/src/client/__mocks__/ReactFiberErrorDialog.js
new file mode 100644
index 00000000000..94b0e9ab67b
--- /dev/null
+++ b/packages/react-dom/src/client/__mocks__/ReactFiberErrorDialog.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 showErrorDialog(): boolean {
+  return true;
+}
diff --git a/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js b/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
new file mode 100644
index 00000000000..ccbd41c2f30
--- /dev/null
+++ b/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React = require('react');
+const ReactDOMClient = require('react-dom/client');
+
+const act = require('internal-test-utils').act;
+
+describe('dangerouslySetInnerHTML', () => {
+  describe('when the node has innerHTML property', () => {
+    it('sets innerHTML on it', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div dangerouslySetInnerHTML={{__html: '<h1>Hello</h1>'}} />,
+        );
+      });
+      expect(container.firstChild.innerHTML).toBe('<h1>Hello</h1>');
+    });
+  });
+});
diff --git a/packages/react-dom/src/client/__tests__/getNodeForCharacterOffset-test.js b/packages/react-dom/src/client/__tests__/getNodeForCharacterOffset-test.js
new file mode 100644
index 00000000000..7835965ed74
--- /dev/null
+++ b/packages/react-dom/src/client/__tests__/getNodeForCharacterOffset-test.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// TODO: can we express this test with only public API?
+const getNodeForCharacterOffset =
+  require('react-dom-bindings/src/client/getNodeForCharacterOffset').default;
+
+// Create node from HTML string
+function createNode(html) {
+  const node = (getTestDocument() || document).createElement('div');
+  node.innerHTML = html;
+  return node;
+}
+
+function getTestDocument(markup) {
+  const doc = document.implementation.createHTMLDocument('');
+  doc.open();
+  doc.write(
+    markup ||
+      '<!doctype html><html><meta charset=utf-8><title>test doc</title>',
+  );
+  doc.close();
+  return doc;
+}
+
+// Check getNodeForCharacterOffset return value matches expected result.
+function expectNodeOffset(result, textContent, nodeOffset) {
+  expect(result.node.textContent).toBe(textContent);
+  expect(result.offset).toBe(nodeOffset);
+}
+
+describe('getNodeForCharacterOffset', () => {
+  it('should handle siblings', () => {
+    const node = createNode('<i>123</i><i>456</i><i>789</i>');
+
+    expectNodeOffset(getNodeForCharacterOffset(node, 0), '123', 0);
+    expectNodeOffset(getNodeForCharacterOffset(node, 4), '456', 1);
+  });
+
+  it('should handle trailing chars', () => {
+    const node = createNode('<i>123</i><i>456</i><i>789</i>');
+
+    expectNodeOffset(getNodeForCharacterOffset(node, 3), '123', 3);
+    expectNodeOffset(getNodeForCharacterOffset(node, 9), '789', 3);
+  });
+
+  it('should handle trees', () => {
+    const node = createNode(
+      '<i>' +
+        '<i>1</i>' +
+        '<i>' +
+        '<i>' +
+        '<i>2</i>' +
+        '<i></i>' +
+        '</i>' +
+        '</i>' +
+        '<i>' +
+        '3' +
+        '<i>45</i>' +
+        '</i>' +
+        '</i>',
+    );
+
+    expectNodeOffset(getNodeForCharacterOffset(node, 3), '3', 1);
+    expectNodeOffset(getNodeForCharacterOffset(node, 5), '45', 2);
+    expect(getNodeForCharacterOffset(node, 10)).toBeUndefined();
+  });
+
+  it('should handle non-existent offset', () => {
+    const node = createNode('<i>123</i>');
+
+    expect(getNodeForCharacterOffset(node, -1)).toBeUndefined();
+    expect(getNodeForCharacterOffset(node, 4)).toBeUndefined();
+  });
+});
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 00000000000..5a43a9ec2f0
--- /dev/null
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+  let ReactFeatureFlags;
+  let act;
+  let assertConsoleErrorDev;
+  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');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+    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', async () => {
+    const 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);
+        },
+      });
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: ttObject1}} />);
+      });
+
+      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;
+      await act(() => {
+        root.render(<div dangerouslySetInnerHTML={{__html: ttObject2}} />);
+      });
+
+      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)', async () => {
+    const setAttribute = Element.prototype.setAttribute;
+    try {
+      const setAttributeCalls = [];
+      Element.prototype.setAttribute = function (name, value) {
+        setAttributeCalls.push([this, name.toLowerCase(), value]);
+        return setAttribute.apply(this, arguments);
+      };
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div data-foo={ttObject1} />);
+      });
+
+      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;
+      await act(() => {
+        root.render(<div data-foo={ttObject2} />);
+      });
+
+      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)', async () => {
+    const setAttribute = Element.prototype.setAttribute;
+    try {
+      const setAttributeCalls = [];
+      Element.prototype.setAttribute = function (name, value) {
+        setAttributeCalls.push([this, name.toLowerCase(), value]);
+        return setAttribute.apply(this, arguments);
+      };
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div className={ttObject1} />);
+      });
+
+      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;
+      await act(() => {
+        root.render(<div className={ttObject2} />);
+      });
+
+      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', async () => {
+    const 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);
+      };
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<svg xlinkHref={ttObject1} />);
+      });
+
+      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;
+      await act(() => {
+        root.render(<svg xlinkHref={ttObject2} />);
+      });
+
+      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;
+    }
+  });
+
+  it('should warn once when rendering script tag in jsx on client', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<script>alert("I am not executed")</script>);
+    });
+    assertConsoleErrorDev([
+      '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
+    await act(() => {
+      root.render(<script>alert("I am not executed")</script>);
+    });
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
new file mode 100644
index 00000000000..5c9f8e7ce38
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -0,0 +1,3408 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let Scheduler;
+let act;
+let waitForAll;
+let waitFor;
+
+function dispatchEvent(element, type) {
+  const event = document.createEvent('Event');
+  event.initEvent(type, true, true);
+  element.dispatchEvent(event);
+}
+
+function dispatchClickEvent(element) {
+  dispatchEvent(element, 'click');
+}
+
+const eventListenersToClear = [];
+
+function startNativeEventListenerClearDown() {
+  const nativeWindowEventListener = window.addEventListener;
+  window.addEventListener = function (...params) {
+    eventListenersToClear.push({target: window, params});
+    return nativeWindowEventListener.apply(this, params);
+  };
+  const nativeDocumentEventListener = document.addEventListener;
+  document.addEventListener = function (...params) {
+    eventListenersToClear.push({target: document, params});
+    return nativeDocumentEventListener.apply(this, params);
+  };
+}
+
+function endNativeEventListenerClearDown() {
+  eventListenersToClear.forEach(({target, params}) => {
+    target.removeEventListener(...params);
+  });
+}
+
+describe('DOMPluginEventSystem', () => {
+  let container;
+
+  function withEnableLegacyFBSupport(enableLegacyFBSupport) {
+    describe(
+      'enableLegacyFBSupport ' +
+        (enableLegacyFBSupport ? 'enabled' : 'disabled'),
+      () => {
+        beforeAll(() => {
+          // These tests are run twice, once with legacyFBSupport enabled and once disabled.
+          // The document needs to be cleaned up a bit before the second pass otherwise it is
+          // operating in a non pristine environment
+          document.removeChild(document.documentElement);
+          document.appendChild(document.createElement('html'));
+          document.documentElement.appendChild(document.createElement('head'));
+          document.documentElement.appendChild(document.createElement('body'));
+        });
+
+        beforeEach(() => {
+          jest.resetModules();
+          ReactFeatureFlags = require('shared/ReactFeatureFlags');
+          ReactFeatureFlags.enableLegacyFBSupport = enableLegacyFBSupport;
+
+          React = require('react');
+          ReactDOM = require('react-dom');
+          ReactDOMClient = require('react-dom/client');
+          Scheduler = require('scheduler');
+          ReactDOMServer = require('react-dom/server');
+
+          const InternalTestUtils = require('internal-test-utils');
+          waitForAll = InternalTestUtils.waitForAll;
+          waitFor = InternalTestUtils.waitFor;
+          act = InternalTestUtils.act;
+
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          startNativeEventListenerClearDown();
+        });
+
+        afterEach(() => {
+          document.body.removeChild(container);
+          container = null;
+          endNativeEventListenerClearDown();
+        });
+
+        it('does not pool events', async () => {
+          const buttonRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(e));
+
+          function Test() {
+            return <button ref={buttonRef} onClick={onClick} />;
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Test />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(2);
+          expect(log[0]).not.toBe(log[1]);
+          expect(log[0].type).toBe('click');
+          expect(log[1].type).toBe('click');
+        });
+
+        it('handle propagation of click events', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Test() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                <div
+                  ref={divRef}
+                  onClick={onClick}
+                  onClickCapture={onClickCapture}>
+                  Click me!
+                </div>
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Test />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          dispatchClickEvent(divElement);
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        it('handle propagation of click events combined with sync clicks', async () => {
+          const buttonRef = React.createRef();
+          let clicks = 0;
+
+          function Test() {
+            const inputRef = React.useRef(null);
+            return (
+              <div>
+                <button
+                  ref={buttonRef}
+                  onClick={() => {
+                    // Sync click
+                    inputRef.current.click();
+                  }}
+                />
+                <input
+                  ref={inputRef}
+                  onClick={() => {
+                    clicks++;
+                  }}
+                />
+              </div>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Test />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+
+          expect(clicks).toBe(1);
+        });
+
+        it('handle propagation of click events between roots', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const childRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                <div ref={childRef} />
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+          const childRoot = ReactDOMClient.createRoot(childRef.current);
+          await act(() => {
+            childRoot.render(<Child />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          dispatchClickEvent(divElement);
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        it('handle propagation of click events between disjointed roots', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}
+              />
+            );
+          }
+
+          const disjointedNode = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          buttonRef.current.appendChild(disjointedNode);
+          const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
+          await act(() => {
+            disjointedNodeRoot.render(<Child />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          dispatchClickEvent(divElement);
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        it('handle propagation of click events between disjointed roots #2', async () => {
+          const buttonRef = React.createRef();
+          const button2Ref = React.createRef();
+          const divRef = React.createRef();
+          const spanRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={button2Ref}
+                onClick={onClick}
+                onClickCapture={onClickCapture}
+              />
+            );
+          }
+
+          function GrandParent() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                <span ref={spanRef} />
+              </button>
+            );
+          }
+
+          // We make a wrapper with an inner container that we
+          // render to. So it looks like <div><span></span></div>
+          // We then render to all three:
+          // - container
+          // - parentContainer
+          // - childContainer
+
+          const parentContainer = document.createElement('div');
+          const childContainer = document.createElement('div');
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<GrandParent />);
+          });
+          const parentRoot = ReactDOMClient.createRoot(parentContainer);
+          await act(() => {
+            parentRoot.render(<Parent />);
+          });
+          const childRoot = ReactDOMClient.createRoot(childContainer);
+          await act(() => {
+            childRoot.render(<Child />);
+          });
+
+          parentContainer.appendChild(childContainer);
+          spanRef.current.appendChild(parentContainer);
+
+          // Inside <GrandParent />
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          // Inside <Child />
+          const divElement = divRef.current;
+          dispatchClickEvent(divElement);
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+
+          // Inside <Parent />
+          const buttonElement2 = button2Ref.current;
+          dispatchClickEvent(buttonElement2);
+          expect(onClick).toHaveBeenCalledTimes(5);
+          expect(onClickCapture).toHaveBeenCalledTimes(5);
+          expect(log[6]).toEqual(['capture', buttonElement]);
+          expect(log[7]).toEqual(['capture', buttonElement2]);
+          expect(log[8]).toEqual(['bubble', buttonElement2]);
+          expect(log[9]).toEqual(['bubble', buttonElement]);
+        });
+
+        // @gate !disableCommentsAsDOMContainers
+        it('handle propagation of click events between disjointed comment roots', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}
+              />
+            );
+          }
+
+          // We use a comment node here, then mount to it
+          const disjointedNode = document.createComment(
+            ' react-mount-point-unstable ',
+          );
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+          buttonRef.current.appendChild(disjointedNode);
+          const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
+          await act(() => {
+            disjointedNodeRoot.render(<Child />);
+          });
+
+          const buttonElement = buttonRef.current;
+          await act(() => {
+            dispatchClickEvent(buttonElement);
+          });
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          await act(() => {
+            dispatchClickEvent(divElement);
+          });
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        // @gate !disableCommentsAsDOMContainers
+        it('handle propagation of click events between disjointed comment roots #2', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const spanRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                <span ref={spanRef} />
+              </button>
+            );
+          }
+
+          // We use a comment node here, then mount to it
+          const disjointedNode = document.createComment(
+            ' react-mount-point-unstable ',
+          );
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+          spanRef.current.appendChild(disjointedNode);
+          const disjointedNodeRoot = ReactDOMClient.createRoot(disjointedNode);
+          await act(() => {
+            disjointedNodeRoot.render(<Child />);
+          });
+
+          const buttonElement = buttonRef.current;
+          await act(() => {
+            dispatchClickEvent(buttonElement);
+          });
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          await act(() => {
+            dispatchClickEvent(divElement);
+          });
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        it('handle propagation of click events between portals', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          const portalElement = document.createElement('div');
+          document.body.appendChild(portalElement);
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                {ReactDOM.createPortal(<Child />, portalElement)}
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          dispatchClickEvent(divElement);
+          expect(onClick).toHaveBeenCalledTimes(3);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+
+          document.body.removeChild(portalElement);
+        });
+
+        it('handle click events on document.body portals', async () => {
+          const log = [];
+
+          function Child({label}) {
+            return <div onClick={() => log.push(label)}>{label}</div>;
+          }
+
+          function Parent() {
+            return (
+              <>
+                {ReactDOM.createPortal(
+                  <Child label={'first'} />,
+                  document.body,
+                )}
+                {ReactDOM.createPortal(
+                  <Child label={'second'} />,
+                  document.body,
+                )}
+              </>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const second = document.body.lastChild;
+          expect(second.textContent).toEqual('second');
+          dispatchClickEvent(second);
+
+          expect(log).toEqual(['second']);
+
+          const first = second.previousSibling;
+          expect(first.textContent).toEqual('first');
+          dispatchClickEvent(first);
+
+          expect(log).toEqual(['second', 'first']);
+        });
+
+        it('does not invoke an event on a parent tree when a subtree is dehydrated', async () => {
+          let suspend = false;
+          let resolve;
+          const promise = new Promise(
+            resolvePromise => (resolve = resolvePromise),
+          );
+
+          let clicks = 0;
+          const 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 (
+              <React.Suspense fallback="Loading...">
+                <Child />
+              </React.Suspense>
+            );
+          }
+
+          suspend = false;
+          const finalHTML = ReactDOMServer.renderToString(<App />);
+
+          const parentContainer = document.createElement('div');
+          const 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.
+          const parentRoot = ReactDOMClient.createRoot(parentContainer);
+          await act(() => {
+            parentRoot.render(<Parent />);
+          });
+
+          childSlotRef.current.appendChild(childContainer);
+
+          childContainer.innerHTML = finalHTML;
+
+          const a = childContainer.getElementsByTagName('a')[0];
+
+          suspend = true;
+
+          // Hydrate asynchronously.
+          await act(() => {
+            ReactDOMClient.hydrateRoot(childContainer, <App />);
+          });
+
+          // The Suspense boundary is not yet hydrated.
+          await act(() => {
+            a.click();
+          });
+          expect(clicks).toBe(0);
+
+          // Resolving the promise so that rendering can complete.
+          await act(async () => {
+            suspend = false;
+            resolve();
+            await promise;
+          });
+
+          // We're now full hydrated.
+          expect(clicks).toBe(0);
+          document.body.removeChild(parentContainer);
+        });
+
+        it('handle click events on dynamic portals', async () => {
+          const log = [];
+
+          function Parent() {
+            const ref = React.useRef(null);
+            const [portal, setPortal] = React.useState(null);
+
+            React.useEffect(() => {
+              setPortal(
+                ReactDOM.createPortal(
+                  <span onClick={() => log.push('child')} id="child" />,
+                  ref.current,
+                ),
+              );
+            }, []);
+
+            return (
+              <div ref={ref} onClick={() => log.push('parent')} id="parent">
+                {portal}
+              </div>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const parent = container.lastChild;
+          expect(parent.id).toEqual('parent');
+
+          await act(() => {
+            dispatchClickEvent(parent);
+          });
+
+          expect(log).toEqual(['parent']);
+
+          const child = parent.lastChild;
+          expect(child.id).toEqual('child');
+
+          await act(() => {
+            dispatchClickEvent(child);
+          });
+
+          // we add both 'child' and 'parent' due to bubbling
+          expect(log).toEqual(['parent', 'child', 'parent']);
+        });
+
+        // Slight alteration to the last test, to catch
+        // a subtle difference in traversal.
+        it('handle click events on dynamic portals #2', async () => {
+          const log = [];
+
+          function Parent() {
+            const ref = React.useRef(null);
+            const [portal, setPortal] = React.useState(null);
+
+            React.useEffect(() => {
+              setPortal(
+                ReactDOM.createPortal(
+                  <span onClick={() => log.push('child')} id="child" />,
+                  ref.current,
+                ),
+              );
+            }, []);
+
+            return (
+              <div ref={ref} onClick={() => log.push('parent')} id="parent">
+                <div>{portal}</div>
+              </div>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const parent = container.lastChild;
+          expect(parent.id).toEqual('parent');
+
+          await act(() => {
+            dispatchClickEvent(parent);
+          });
+
+          expect(log).toEqual(['parent']);
+
+          const child = parent.lastChild;
+          expect(child.id).toEqual('child');
+
+          await act(() => {
+            dispatchClickEvent(child);
+          });
+
+          // we add both 'child' and 'parent' due to bubbling
+          expect(log).toEqual(['parent', 'child', 'parent']);
+        });
+
+        it('native stopPropagation on click events between portals', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const middleDivRef = React.createRef();
+          const log = [];
+          const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onClickCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          const portalElement = document.createElement('div');
+          document.body.appendChild(portalElement);
+
+          function Child() {
+            return (
+              <div ref={middleDivRef}>
+                <div
+                  ref={divRef}
+                  onClick={onClick}
+                  onClickCapture={onClickCapture}>
+                  Click me!
+                </div>
+              </div>
+            );
+          }
+
+          function Parent() {
+            React.useLayoutEffect(() => {
+              // This should prevent the portalElement listeners from
+              // capturing the events in the bubble phase.
+              middleDivRef.current.addEventListener('click', e => {
+                e.stopPropagation();
+              });
+            });
+
+            return (
+              <button
+                ref={buttonRef}
+                onClick={onClick}
+                onClickCapture={onClickCapture}>
+                {ReactDOM.createPortal(<Child />, portalElement)}
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const buttonElement = buttonRef.current;
+          dispatchClickEvent(buttonElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          dispatchClickEvent(divElement);
+          expect(onClick).toHaveBeenCalledTimes(1);
+          expect(onClickCapture).toHaveBeenCalledTimes(3);
+
+          document.body.removeChild(portalElement);
+        });
+
+        it('handle propagation of focus events', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onFocusCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Test() {
+            return (
+              <button
+                ref={buttonRef}
+                onFocus={onFocus}
+                onFocusCapture={onFocusCapture}>
+                <div
+                  ref={divRef}
+                  onFocus={onFocus}
+                  onFocusCapture={onFocusCapture}
+                  tabIndex={0}>
+                  Click me!
+                </div>
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Test />);
+          });
+
+          const buttonElement = buttonRef.current;
+          buttonElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(1);
+          expect(onFocusCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          divElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(3);
+          expect(onFocusCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        it('handle propagation of focus events between roots', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const childRef = React.createRef();
+          const log = [];
+          const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onFocusCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onFocus={onFocus}
+                onFocusCapture={onFocusCapture}
+                tabIndex={0}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onFocus={onFocus}
+                onFocusCapture={onFocusCapture}>
+                <div ref={childRef} />
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+          const childRoot = ReactDOMClient.createRoot(childRef.current);
+          await act(() => {
+            childRoot.render(<Child />);
+          });
+
+          const buttonElement = buttonRef.current;
+          buttonElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(1);
+          expect(onFocusCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          divElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(3);
+          expect(onFocusCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+        });
+
+        it('handle propagation of focus events between portals', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onFocusCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          const portalElement = document.createElement('div');
+          document.body.appendChild(portalElement);
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onFocus={onFocus}
+                onFocusCapture={onFocusCapture}
+                tabIndex={0}>
+                Click me!
+              </div>
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onFocus={onFocus}
+                onFocusCapture={onFocusCapture}>
+                {ReactDOM.createPortal(<Child />, portalElement)}
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const buttonElement = buttonRef.current;
+          buttonElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(1);
+          expect(onFocusCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          divElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(3);
+          expect(onFocusCapture).toHaveBeenCalledTimes(3);
+          expect(log[2]).toEqual(['capture', buttonElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
+
+          document.body.removeChild(portalElement);
+        });
+
+        it('native stopPropagation on focus events between portals', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const middleDivRef = React.createRef();
+          const log = [];
+          const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));
+          const onFocusCapture = jest.fn(e =>
+            log.push(['capture', e.currentTarget]),
+          );
+
+          const portalElement = document.createElement('div');
+          document.body.appendChild(portalElement);
+
+          function Child() {
+            return (
+              <div ref={middleDivRef}>
+                <div
+                  ref={divRef}
+                  onFocus={onFocus}
+                  onFocusCapture={onFocusCapture}
+                  tabIndex={0}>
+                  Click me!
+                </div>
+              </div>
+            );
+          }
+
+          function Parent() {
+            React.useLayoutEffect(() => {
+              // This should prevent the portalElement listeners from
+              // capturing the events in the bubble phase.
+              middleDivRef.current.addEventListener('focusin', e => {
+                e.stopPropagation();
+              });
+            });
+
+            return (
+              <button
+                ref={buttonRef}
+                onFocus={onFocus}
+                onFocusCapture={onFocusCapture}>
+                {ReactDOM.createPortal(<Child />, portalElement)}
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const buttonElement = buttonRef.current;
+          buttonElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(1);
+          expect(onFocusCapture).toHaveBeenCalledTimes(1);
+          expect(log[0]).toEqual(['capture', buttonElement]);
+          expect(log[1]).toEqual(['bubble', buttonElement]);
+
+          const divElement = divRef.current;
+          divElement.focus();
+          expect(onFocus).toHaveBeenCalledTimes(1);
+          expect(onFocusCapture).toHaveBeenCalledTimes(3);
+
+          document.body.removeChild(portalElement);
+        });
+
+        it('handle propagation of enter and leave events between portals', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const log = [];
+          const onMouseEnter = jest.fn(e => log.push(e.currentTarget));
+          const onMouseLeave = jest.fn(e => log.push(e.currentTarget));
+
+          const portalElement = document.createElement('div');
+          document.body.appendChild(portalElement);
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+              />
+            );
+          }
+
+          function Parent() {
+            return (
+              <button
+                ref={buttonRef}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}>
+                {ReactDOM.createPortal(<Child />, portalElement)}
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const buttonElement = buttonRef.current;
+          buttonElement.dispatchEvent(
+            new MouseEvent('mouseover', {
+              bubbles: true,
+              cancelable: true,
+              relatedTarget: null,
+            }),
+          );
+          expect(onMouseEnter).toHaveBeenCalledTimes(1);
+          expect(onMouseLeave).toHaveBeenCalledTimes(0);
+          expect(log[0]).toEqual(buttonElement);
+
+          const divElement = divRef.current;
+          buttonElement.dispatchEvent(
+            new MouseEvent('mouseout', {
+              bubbles: true,
+              cancelable: true,
+              relatedTarget: divElement,
+            }),
+          );
+          divElement.dispatchEvent(
+            new MouseEvent('mouseover', {
+              bubbles: true,
+              cancelable: true,
+              relatedTarget: buttonElement,
+            }),
+          );
+          expect(onMouseEnter).toHaveBeenCalledTimes(2);
+          expect(onMouseLeave).toHaveBeenCalledTimes(0);
+          expect(log[1]).toEqual(divElement);
+
+          document.body.removeChild(portalElement);
+        });
+
+        it('handle propagation of enter and leave events between portals #2', async () => {
+          const buttonRef = React.createRef();
+          const divRef = React.createRef();
+          const portalRef = React.createRef();
+          const log = [];
+          const onMouseEnter = jest.fn(e => log.push(e.currentTarget));
+          const onMouseLeave = jest.fn(e => log.push(e.currentTarget));
+
+          function Child() {
+            return (
+              <div
+                ref={divRef}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+              />
+            );
+          }
+
+          function Parent() {
+            const [portal, setPortal] = React.useState(null);
+
+            React.useLayoutEffect(() => {
+              setPortal(ReactDOM.createPortal(<Child />, portalRef.current));
+            }, []);
+
+            return (
+              <button
+                ref={buttonRef}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}>
+                <div ref={portalRef}>{portal}</div>
+              </button>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Parent />);
+          });
+
+          const buttonElement = buttonRef.current;
+          buttonElement.dispatchEvent(
+            new MouseEvent('mouseover', {
+              bubbles: true,
+              cancelable: true,
+              relatedTarget: null,
+            }),
+          );
+          expect(onMouseEnter).toHaveBeenCalledTimes(1);
+          expect(onMouseLeave).toHaveBeenCalledTimes(0);
+          expect(log[0]).toEqual(buttonElement);
+
+          const divElement = divRef.current;
+          buttonElement.dispatchEvent(
+            new MouseEvent('mouseout', {
+              bubbles: true,
+              cancelable: true,
+              relatedTarget: divElement,
+            }),
+          );
+          divElement.dispatchEvent(
+            new MouseEvent('mouseover', {
+              bubbles: true,
+              cancelable: true,
+              relatedTarget: buttonElement,
+            }),
+          );
+          expect(onMouseEnter).toHaveBeenCalledTimes(2);
+          expect(onMouseLeave).toHaveBeenCalledTimes(0);
+          expect(log[1]).toEqual(divElement);
+        });
+
+        it('should preserve bubble/capture order between roots and nested portals', async () => {
+          const targetRef = React.createRef();
+          let log = [];
+          const onClickRoot = jest.fn(e => log.push('bubble root'));
+          const onClickCaptureRoot = jest.fn(e => log.push('capture root'));
+          const onClickPortal = jest.fn(e => log.push('bubble portal'));
+          const onClickCapturePortal = jest.fn(e => log.push('capture portal'));
+
+          function Portal() {
+            return (
+              <div
+                onClick={onClickPortal}
+                onClickCapture={onClickCapturePortal}
+                ref={targetRef}>
+                Click me!
+              </div>
+            );
+          }
+
+          const portalContainer = document.createElement('div');
+
+          let shouldStopPropagation = false;
+          portalContainer.addEventListener(
+            'click',
+            e => {
+              if (shouldStopPropagation) {
+                e.stopPropagation();
+              }
+            },
+            false,
+          );
+
+          function Root() {
+            const portalTargetRef = React.useRef(null);
+            React.useLayoutEffect(() => {
+              portalTargetRef.current.appendChild(portalContainer);
+            });
+            return (
+              <div onClick={onClickRoot} onClickCapture={onClickCaptureRoot}>
+                <div ref={portalTargetRef} />
+                {ReactDOM.createPortal(<Portal />, portalContainer)}
+              </div>
+            );
+          }
+
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(<Root />);
+          });
+
+          const divElement = targetRef.current;
+          dispatchClickEvent(divElement);
+          expect(log).toEqual([
+            'capture root',
+            'capture portal',
+            'bubble portal',
+            'bubble root',
+          ]);
+
+          log = [];
+
+          shouldStopPropagation = true;
+          dispatchClickEvent(divElement);
+
+          if (enableLegacyFBSupport) {
+            // We aren't using roots with legacyFBSupport, we put clicks on the document, so we exbit the previous
+            // behavior.
+            expect(log).toEqual(['capture root', 'capture portal']);
+          } else {
+            expect(log).toEqual([
+              // The events on root probably shouldn't fire if a non-React intermediated. but current behavior is that they do.
+              'capture root',
+              'capture portal',
+              'bubble portal',
+              'bubble root',
+            ]);
+          }
+        });
+
+        describe('ReactDOM.createEventHandle', () => {
+          beforeEach(() => {
+            jest.resetModules();
+            ReactFeatureFlags = require('shared/ReactFeatureFlags');
+            ReactFeatureFlags.enableLegacyFBSupport = enableLegacyFBSupport;
+            ReactFeatureFlags.enableCreateEventHandleAPI = true;
+
+            React = require('react');
+            ReactDOM = require('react-dom');
+            ReactDOMClient = require('react-dom/client');
+            Scheduler = require('scheduler');
+            ReactDOMServer = require('react-dom/server');
+            act = require('internal-test-utils').act;
+
+            const InternalTestUtils = require('internal-test-utils');
+            waitForAll = InternalTestUtils.waitForAll;
+            waitFor = InternalTestUtils.waitFor;
+          });
+
+          // @gate www
+          it('can render correctly with the ReactDOMServer', () => {
+            const clickEvent = jest.fn();
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              const divRef = React.useRef(null);
+
+              React.useEffect(() => {
+                return setClick(divRef.current, clickEvent);
+              });
+
+              return <div ref={divRef}>Hello world</div>;
+            }
+            const output = ReactDOMServer.renderToString(<Test />);
+            expect(output).toBe(`<div>Hello world</div>`);
+          });
+
+          // @gate www
+          it('can render correctly with the ReactDOMServer hydration', async () => {
+            const clickEvent = jest.fn();
+            const spanRef = React.createRef();
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                return setClick(spanRef.current, clickEvent);
+              });
+
+              return (
+                <div>
+                  <span ref={spanRef}>Hello world</span>
+                </div>
+              );
+            }
+            const output = ReactDOMServer.renderToString(<Test />);
+            expect(output).toBe(`<div><span>Hello world</span></div>`);
+            container.innerHTML = output;
+            await act(() => {
+              ReactDOMClient.hydrateRoot(container, <Test />);
+            });
+            dispatchClickEvent(spanRef.current);
+            expect(clickEvent).toHaveBeenCalledTimes(1);
+          });
+
+          // @gate www
+          it('should correctly work for a basic "click" listener', async () => {
+            let log = [];
+            const clickEvent = jest.fn(event => {
+              log.push({
+                eventPhase: event.eventPhase,
+                type: event.type,
+                currentTarget: event.currentTarget,
+                target: event.target,
+              });
+            });
+            const divRef = React.createRef();
+            const buttonRef = React.createRef();
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                return setClick(buttonRef.current, clickEvent);
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            expect(container.innerHTML).toBe(
+              '<button><div>Click me!</div></button>',
+            );
+
+            // Clicking the button should trigger the event callback
+            let divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(log).toEqual([
+              {
+                eventPhase: 3,
+                type: 'click',
+                currentTarget: buttonRef.current,
+                target: divRef.current,
+              },
+            ]);
+            expect(clickEvent).toBeCalledTimes(1);
+
+            // Unmounting the container and clicking should not work
+            await act(() => {
+              root.render(null);
+            });
+
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toBeCalledTimes(1);
+
+            // Re-rendering the container and clicking should work
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toBeCalledTimes(2);
+
+            log = [];
+
+            // Clicking the button should also work
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(log).toEqual([
+              {
+                eventPhase: 3,
+                type: 'click',
+                currentTarget: buttonRef.current,
+                target: buttonRef.current,
+              },
+            ]);
+
+            const setClick2 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test2({clickEvent2}) {
+              React.useEffect(() => {
+                return setClick2(buttonRef.current, clickEvent2);
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            let clickEvent2 = jest.fn();
+            await act(() => {
+              root.render(<Test2 clickEvent2={clickEvent2} />);
+            });
+
+            divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent2).toBeCalledTimes(1);
+
+            // Reset the function we pass in, so it's different
+            clickEvent2 = jest.fn();
+            await act(() => {
+              root.render(<Test2 clickEvent2={clickEvent2} />);
+            });
+
+            divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent2).toBeCalledTimes(1);
+          });
+
+          // @gate www
+          it('should correctly work for setting and clearing a basic "click" listener', async () => {
+            const clickEvent = jest.fn();
+            const divRef = React.createRef();
+            const buttonRef = React.createRef();
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+
+            function Test({off}) {
+              React.useEffect(() => {
+                const clear = setClick(buttonRef.current, clickEvent);
+                if (off) {
+                  clear();
+                }
+                return clear;
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+
+            await act(() => {
+              root.render(<Test off={false} />);
+            });
+
+            let divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toBeCalledTimes(1);
+
+            // The listener should get unmounted
+            await act(() => {
+              root.render(<Test off={true} />);
+            });
+
+            clickEvent.mockClear();
+
+            divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toBeCalledTimes(0);
+          });
+
+          // @gate www
+          it('should handle the target being a text node', async () => {
+            const clickEvent = jest.fn();
+            const buttonRef = React.createRef();
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                return setClick(buttonRef.current, clickEvent);
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const textNode = buttonRef.current.firstChild;
+            dispatchClickEvent(textNode);
+            expect(clickEvent).toBeCalledTimes(1);
+          });
+
+          // @gate www
+          it('handle propagation of click events', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const log = [];
+            const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+            const onClickCapture = jest.fn(e =>
+              log.push(['capture', e.currentTarget]),
+            );
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+            const setCaptureClick = ReactDOM.unstable_createEventHandle(
+              'click',
+              {
+                capture: true,
+              },
+            );
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick(buttonRef.current, onClick);
+                const clearCaptureClick1 = setCaptureClick(
+                  buttonRef.current,
+                  onClickCapture,
+                );
+                const clearClick2 = setClick(divRef.current, onClick);
+                const clearCaptureClick2 = setCaptureClick(
+                  divRef.current,
+                  onClickCapture,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearCaptureClick1();
+                  clearClick2();
+                  clearCaptureClick2();
+                };
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(onClick).toHaveBeenCalledTimes(1);
+            expect(onClickCapture).toHaveBeenCalledTimes(1);
+            expect(log[0]).toEqual(['capture', buttonElement]);
+            expect(log[1]).toEqual(['bubble', buttonElement]);
+
+            log.length = 0;
+            onClick.mockClear();
+            onClickCapture.mockClear();
+
+            const divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(onClick).toHaveBeenCalledTimes(2);
+            expect(onClickCapture).toHaveBeenCalledTimes(2);
+            expect(log[0]).toEqual(['capture', buttonElement]);
+            expect(log[1]).toEqual(['capture', divElement]);
+            expect(log[2]).toEqual(['bubble', divElement]);
+            expect(log[3]).toEqual(['bubble', buttonElement]);
+          });
+
+          // @gate www
+          it('handle propagation of click events mixed with onClick events', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const log = [];
+            const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+            const onClickCapture = jest.fn(e =>
+              log.push(['capture', e.currentTarget]),
+            );
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+            const setClickCapture = ReactDOM.unstable_createEventHandle(
+              'click',
+              {
+                capture: true,
+              },
+            );
+
+            function Test() {
+              React.useEffect(() => {
+                setClick(buttonRef.current, onClick);
+                setClickCapture(buttonRef.current, onClickCapture);
+
+                return () => {
+                  setClick();
+                  setClickCapture();
+                };
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div
+                    ref={divRef}
+                    onClick={onClick}
+                    onClickCapture={onClickCapture}>
+                    Click me!
+                  </div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(onClick).toHaveBeenCalledTimes(1);
+            expect(onClickCapture).toHaveBeenCalledTimes(1);
+            expect(log[0]).toEqual(['capture', buttonElement]);
+            expect(log[1]).toEqual(['bubble', buttonElement]);
+
+            const divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(onClick).toHaveBeenCalledTimes(3);
+            expect(onClickCapture).toHaveBeenCalledTimes(3);
+            expect(log[2]).toEqual(['capture', buttonElement]);
+            expect(log[3]).toEqual(['capture', divElement]);
+            expect(log[4]).toEqual(['bubble', divElement]);
+            expect(log[5]).toEqual(['bubble', buttonElement]);
+          });
+
+          // @gate www
+          it('should correctly work for a basic "click" listener on the outer target', async () => {
+            const log = [];
+            const clickEvent = jest.fn(event => {
+              log.push({
+                eventPhase: event.eventPhase,
+                type: event.type,
+                currentTarget: event.currentTarget,
+                target: event.target,
+              });
+            });
+            const divRef = React.createRef();
+            const buttonRef = React.createRef();
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                return setClick(divRef.current, clickEvent);
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            expect(container.innerHTML).toBe(
+              '<button><div>Click me!</div></button>',
+            );
+
+            // Clicking the button should trigger the event callback
+            let divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(log).toEqual([
+              {
+                eventPhase: 3,
+                type: 'click',
+                currentTarget: divRef.current,
+                target: divRef.current,
+              },
+            ]);
+
+            // Unmounting the container and clicking should not work
+            await act(() => {
+              root.render(null);
+            });
+
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toBeCalledTimes(1);
+
+            // Re-rendering the container and clicking should work
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toBeCalledTimes(2);
+
+            // Clicking the button should not work
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(clickEvent).toBeCalledTimes(2);
+          });
+
+          // @gate www
+          it('should correctly handle many nested target listeners', async () => {
+            const buttonRef = React.createRef();
+            const targetListener1 = jest.fn();
+            const targetListener2 = jest.fn();
+            const targetListener3 = jest.fn();
+            const targetListener4 = jest.fn();
+            let setClick1 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            let setClick2 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            let setClick3 = ReactDOM.unstable_createEventHandle('click');
+            let setClick4 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(
+                  buttonRef.current,
+                  targetListener1,
+                );
+                const clearClick2 = setClick2(
+                  buttonRef.current,
+                  targetListener2,
+                );
+                const clearClick3 = setClick3(
+                  buttonRef.current,
+                  targetListener3,
+                );
+                const clearClick4 = setClick4(
+                  buttonRef.current,
+                  targetListener4,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
+                };
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            let buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+
+            expect(targetListener1).toHaveBeenCalledTimes(1);
+            expect(targetListener2).toHaveBeenCalledTimes(1);
+            expect(targetListener3).toHaveBeenCalledTimes(1);
+            expect(targetListener4).toHaveBeenCalledTimes(1);
+
+            setClick1 = ReactDOM.unstable_createEventHandle('click');
+            setClick2 = ReactDOM.unstable_createEventHandle('click');
+            setClick3 = ReactDOM.unstable_createEventHandle('click');
+            setClick4 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test2() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(
+                  buttonRef.current,
+                  targetListener1,
+                );
+                const clearClick2 = setClick2(
+                  buttonRef.current,
+                  targetListener2,
+                );
+                const clearClick3 = setClick3(
+                  buttonRef.current,
+                  targetListener3,
+                );
+                const clearClick4 = setClick4(
+                  buttonRef.current,
+                  targetListener4,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
+                };
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            await act(() => {
+              root.render(<Test2 />);
+            });
+
+            buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(targetListener1).toHaveBeenCalledTimes(2);
+            expect(targetListener2).toHaveBeenCalledTimes(2);
+            expect(targetListener3).toHaveBeenCalledTimes(2);
+            expect(targetListener4).toHaveBeenCalledTimes(2);
+          });
+
+          // @gate www
+          it('should correctly handle stopPropagation correctly for target events', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const clickEvent = jest.fn();
+            const setClick1 = ReactDOM.unstable_createEventHandle('click', {
+              bind: buttonRef,
+            });
+            const setClick2 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(buttonRef.current, clickEvent);
+                const clearClick2 = setClick2(divRef.current, e => {
+                  e.stopPropagation();
+                });
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                };
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(clickEvent).toHaveBeenCalledTimes(0);
+          });
+
+          // @gate www
+          it('should correctly handle stopPropagation correctly for many target events', async () => {
+            const buttonRef = React.createRef();
+            const targetListener1 = jest.fn(e => e.stopPropagation());
+            const targetListener2 = jest.fn(e => e.stopPropagation());
+            const targetListener3 = jest.fn(e => e.stopPropagation());
+            const targetListener4 = jest.fn(e => e.stopPropagation());
+            const setClick1 = ReactDOM.unstable_createEventHandle('click');
+            const setClick2 = ReactDOM.unstable_createEventHandle('click');
+            const setClick3 = ReactDOM.unstable_createEventHandle('click');
+            const setClick4 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(
+                  buttonRef.current,
+                  targetListener1,
+                );
+                const clearClick2 = setClick2(
+                  buttonRef.current,
+                  targetListener2,
+                );
+                const clearClick3 = setClick3(
+                  buttonRef.current,
+                  targetListener3,
+                );
+                const clearClick4 = setClick4(
+                  buttonRef.current,
+                  targetListener4,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
+                };
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(targetListener1).toHaveBeenCalledTimes(1);
+            expect(targetListener2).toHaveBeenCalledTimes(1);
+            expect(targetListener3).toHaveBeenCalledTimes(1);
+            expect(targetListener4).toHaveBeenCalledTimes(1);
+          });
+
+          // @gate www
+          it('should correctly handle stopPropagation for mixed capture/bubbling target listeners', async () => {
+            const buttonRef = React.createRef();
+            const targetListener1 = jest.fn(e => e.stopPropagation());
+            const targetListener2 = jest.fn(e => e.stopPropagation());
+            const targetListener3 = jest.fn(e => e.stopPropagation());
+            const targetListener4 = jest.fn(e => e.stopPropagation());
+            const setClick1 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            const setClick2 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            const setClick3 = ReactDOM.unstable_createEventHandle('click');
+            const setClick4 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(
+                  buttonRef.current,
+                  targetListener1,
+                );
+                const clearClick2 = setClick2(
+                  buttonRef.current,
+                  targetListener2,
+                );
+                const clearClick3 = setClick3(
+                  buttonRef.current,
+                  targetListener3,
+                );
+                const clearClick4 = setClick4(
+                  buttonRef.current,
+                  targetListener4,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
+                };
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(targetListener1).toHaveBeenCalledTimes(1);
+            expect(targetListener2).toHaveBeenCalledTimes(1);
+            expect(targetListener3).toHaveBeenCalledTimes(0);
+            expect(targetListener4).toHaveBeenCalledTimes(0);
+          });
+
+          // @gate www
+          it('should work with concurrent mode updates', async () => {
+            const log = [];
+            const ref = React.createRef();
+            const setClick1 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test({counter}) {
+              React.useLayoutEffect(() => {
+                return setClick1(ref.current, () => {
+                  log.push({counter});
+                });
+              });
+
+              Scheduler.log('Test');
+              return <button ref={ref}>Press me</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            root.render(<Test counter={0} />);
+
+            await waitForAll(['Test']);
+
+            // Click the button
+            dispatchClickEvent(ref.current);
+            expect(log).toEqual([{counter: 0}]);
+
+            // Clear log
+            log.length = 0;
+
+            // Increase counter
+            React.startTransition(() => {
+              root.render(<Test counter={1} />);
+            });
+            // Yield before committing
+            await waitFor(['Test']);
+
+            // Click the button again
+            dispatchClickEvent(ref.current);
+            expect(log).toEqual([{counter: 0}]);
+
+            // Clear log
+            log.length = 0;
+
+            // Commit
+            await waitForAll([]);
+            dispatchClickEvent(ref.current);
+            expect(log).toEqual([{counter: 1}]);
+          });
+
+          // @gate www
+          it('should correctly work for a basic "click" window listener', async () => {
+            const log = [];
+            const clickEvent = jest.fn(event => {
+              log.push({
+                eventPhase: event.eventPhase,
+                type: event.type,
+                currentTarget: event.currentTarget,
+                target: event.target,
+              });
+            });
+            const setClick1 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                return setClick1(window, clickEvent);
+              });
+
+              return <button>Click anything!</button>;
+            }
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            expect(container.innerHTML).toBe(
+              '<button>Click anything!</button>',
+            );
+
+            // Clicking outside the button should trigger the event callback
+            dispatchClickEvent(document.body);
+            expect(log[0]).toEqual({
+              eventPhase: 3,
+              type: 'click',
+              currentTarget: window,
+              target: document.body,
+            });
+
+            // Unmounting the container and clicking should not work
+
+            await act(() => {
+              root.render(null);
+            });
+
+            dispatchClickEvent(document.body);
+            expect(clickEvent).toBeCalledTimes(1);
+
+            // Re-rendering and clicking the body should work again
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            dispatchClickEvent(document.body);
+            expect(clickEvent).toBeCalledTimes(2);
+          });
+
+          // @gate www
+          it('handle propagation of click events on the window', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const log = [];
+            const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+            const onClickCapture = jest.fn(e =>
+              log.push(['capture', e.currentTarget]),
+            );
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+            const setClickCapture = ReactDOM.unstable_createEventHandle(
+              'click',
+              {
+                capture: true,
+              },
+            );
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick(window, onClick);
+                const clearClickCapture1 = setClickCapture(
+                  window,
+                  onClickCapture,
+                );
+                const clearClick2 = setClick(buttonRef.current, onClick);
+                const clearClickCapture2 = setClickCapture(
+                  buttonRef.current,
+                  onClickCapture,
+                );
+                const clearClick3 = setClick(divRef.current, onClick);
+                const clearClickCapture3 = setClickCapture(
+                  divRef.current,
+                  onClickCapture,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClickCapture1();
+                  clearClick2();
+                  clearClickCapture2();
+                  clearClick3();
+                  clearClickCapture3();
+                };
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(onClick).toHaveBeenCalledTimes(2);
+            expect(onClickCapture).toHaveBeenCalledTimes(2);
+            expect(log[0]).toEqual(['capture', window]);
+            expect(log[1]).toEqual(['capture', buttonElement]);
+            expect(log[2]).toEqual(['bubble', buttonElement]);
+            expect(log[3]).toEqual(['bubble', window]);
+
+            log.length = 0;
+            onClick.mockClear();
+            onClickCapture.mockClear();
+
+            const divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(onClick).toHaveBeenCalledTimes(3);
+            expect(onClickCapture).toHaveBeenCalledTimes(3);
+            expect(log[0]).toEqual(['capture', window]);
+            expect(log[1]).toEqual(['capture', buttonElement]);
+            expect(log[2]).toEqual(['capture', divElement]);
+            expect(log[3]).toEqual(['bubble', divElement]);
+            expect(log[4]).toEqual(['bubble', buttonElement]);
+            expect(log[5]).toEqual(['bubble', window]);
+          });
+
+          // @gate www
+          it('should correctly handle stopPropagation for mixed listeners', async () => {
+            const buttonRef = React.createRef();
+            const rootListener1 = jest.fn(e => e.stopPropagation());
+            const rootListener2 = jest.fn();
+            const targetListener1 = jest.fn();
+            const targetListener2 = jest.fn();
+            const setClick1 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            const setClick2 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            const setClick3 = ReactDOM.unstable_createEventHandle('click');
+            const setClick4 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(window, rootListener1);
+                const clearClick2 = setClick2(
+                  buttonRef.current,
+                  targetListener1,
+                );
+                const clearClick3 = setClick3(window, rootListener2);
+                const clearClick4 = setClick4(
+                  buttonRef.current,
+                  targetListener2,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
+                };
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(rootListener1).toHaveBeenCalledTimes(1);
+            expect(targetListener1).toHaveBeenCalledTimes(0);
+            expect(targetListener2).toHaveBeenCalledTimes(0);
+            expect(rootListener2).toHaveBeenCalledTimes(0);
+          });
+
+          // @gate www
+          it('should correctly handle stopPropagation for delegated listeners', async () => {
+            const buttonRef = React.createRef();
+            const rootListener1 = jest.fn(e => e.stopPropagation());
+            const rootListener2 = jest.fn();
+            const rootListener3 = jest.fn(e => e.stopPropagation());
+            const rootListener4 = jest.fn();
+            const setClick1 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            const setClick2 = ReactDOM.unstable_createEventHandle('click', {
+              capture: true,
+            });
+            const setClick3 = ReactDOM.unstable_createEventHandle('click');
+            const setClick4 = ReactDOM.unstable_createEventHandle('click');
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick1(window, rootListener1);
+                const clearClick2 = setClick2(window, rootListener2);
+                const clearClick3 = setClick3(window, rootListener3);
+                const clearClick4 = setClick4(window, rootListener4);
+
+                return () => {
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
+                };
+              });
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(rootListener1).toHaveBeenCalledTimes(1);
+            expect(rootListener2).toHaveBeenCalledTimes(1);
+            expect(rootListener3).toHaveBeenCalledTimes(0);
+            expect(rootListener4).toHaveBeenCalledTimes(0);
+          });
+
+          // @gate www
+          it('handle propagation of click events on the window and document', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const log = [];
+            const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+            const onClickCapture = jest.fn(e =>
+              log.push(['capture', e.currentTarget]),
+            );
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+            const setClickCapture = ReactDOM.unstable_createEventHandle(
+              'click',
+              {
+                capture: true,
+              },
+            );
+
+            function Test() {
+              React.useEffect(() => {
+                const clearClick1 = setClick(window, onClick);
+                const clearClickCapture1 = setClickCapture(
+                  window,
+                  onClickCapture,
+                );
+                const clearClick2 = setClick(document, onClick);
+                const clearClickCapture2 = setClickCapture(
+                  document,
+                  onClickCapture,
+                );
+                const clearClick3 = setClick(buttonRef.current, onClick);
+                const clearClickCapture3 = setClickCapture(
+                  buttonRef.current,
+                  onClickCapture,
+                );
+                const clearClick4 = setClick(divRef.current, onClick);
+                const clearClickCapture4 = setClickCapture(
+                  divRef.current,
+                  onClickCapture,
+                );
+
+                return () => {
+                  clearClick1();
+                  clearClickCapture1();
+                  clearClick2();
+                  clearClickCapture2();
+                  clearClick3();
+                  clearClickCapture3();
+                  clearClick4();
+                  clearClickCapture4();
+                };
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  <div ref={divRef}>Click me!</div>
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Test />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(onClick).toHaveBeenCalledTimes(3);
+            expect(onClickCapture).toHaveBeenCalledTimes(3);
+
+            if (enableLegacyFBSupport) {
+              expect(log[0]).toEqual(['capture', window]);
+              expect(log[1]).toEqual(['capture', document]);
+              expect(log[2]).toEqual(['capture', buttonElement]);
+              expect(log[3]).toEqual(['bubble', document]);
+              expect(log[4]).toEqual(['bubble', buttonElement]);
+              expect(log[5]).toEqual(['bubble', window]);
+            } else {
+              expect(log[0]).toEqual(['capture', window]);
+              expect(log[1]).toEqual(['capture', document]);
+              expect(log[2]).toEqual(['capture', buttonElement]);
+              expect(log[3]).toEqual(['bubble', buttonElement]);
+              expect(log[4]).toEqual(['bubble', document]);
+              expect(log[5]).toEqual(['bubble', window]);
+            }
+
+            log.length = 0;
+            onClick.mockClear();
+            onClickCapture.mockClear();
+
+            const divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(onClick).toHaveBeenCalledTimes(4);
+            expect(onClickCapture).toHaveBeenCalledTimes(4);
+
+            if (enableLegacyFBSupport) {
+              expect(log[0]).toEqual(['capture', window]);
+              expect(log[1]).toEqual(['capture', document]);
+              expect(log[2]).toEqual(['capture', buttonElement]);
+              expect(log[3]).toEqual(['capture', divElement]);
+              expect(log[4]).toEqual(['bubble', document]);
+              expect(log[5]).toEqual(['bubble', divElement]);
+              expect(log[6]).toEqual(['bubble', buttonElement]);
+              expect(log[7]).toEqual(['bubble', window]);
+            } else {
+              expect(log[0]).toEqual(['capture', window]);
+              expect(log[1]).toEqual(['capture', document]);
+              expect(log[2]).toEqual(['capture', buttonElement]);
+              expect(log[3]).toEqual(['capture', divElement]);
+              expect(log[4]).toEqual(['bubble', divElement]);
+              expect(log[5]).toEqual(['bubble', buttonElement]);
+              expect(log[6]).toEqual(['bubble', document]);
+              expect(log[7]).toEqual(['bubble', window]);
+            }
+          });
+
+          // @gate www
+          it('does not support custom user events', () => {
+            // With eager listeners, supporting custom events via this API doesn't make sense
+            // because we can't know a full list of them ahead of time. Let's check we throw
+            // since otherwise we'd end up with inconsistent behavior, like no portal bubbling.
+            expect(() => {
+              ReactDOM.unstable_createEventHandle('custom-event');
+            }).toThrow(
+              'Cannot call unstable_createEventHandle with "custom-event", as it is not an event known to React.',
+            );
+          });
+
+          // @gate www
+          it('beforeblur and afterblur are called after a focused element is unmounted', async () => {
+            const log = [];
+            // We have to persist here because we want to read relatedTarget later.
+            const onAfterBlur = jest.fn(e => {
+              e.persist();
+              log.push(e.type);
+            });
+            const onBeforeBlur = jest.fn(e => log.push(e.type));
+            const innerRef = React.createRef();
+            const innerRef2 = React.createRef();
+            const setAfterBlurHandle =
+              ReactDOM.unstable_createEventHandle('afterblur');
+            const setBeforeBlurHandle =
+              ReactDOM.unstable_createEventHandle('beforeblur');
+
+            const Component = ({show}) => {
+              const ref = React.useRef(null);
+
+              React.useEffect(() => {
+                const clear1 = setAfterBlurHandle(document, onAfterBlur);
+                const clear2 = setBeforeBlurHandle(ref.current, onBeforeBlur);
+
+                return () => {
+                  clear1();
+                  clear2();
+                };
+              });
+
+              return (
+                <div ref={ref}>
+                  {show && <input ref={innerRef} />}
+                  <div ref={innerRef2} />
+                </div>
+              );
+            };
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Component show={true} />);
+            });
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+            expect(onAfterBlur).toHaveBeenCalledTimes(0);
+
+            await act(() => {
+              root.render(<Component show={false} />);
+            });
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+            expect(onAfterBlur).toHaveBeenCalledTimes(1);
+            expect(onAfterBlur).toHaveBeenCalledWith(
+              expect.objectContaining({relatedTarget: inner}),
+            );
+            expect(log).toEqual(['beforeblur', 'afterblur']);
+          });
+
+          // @gate www
+          it('beforeblur and afterblur are called after a nested focused element is unmounted', async () => {
+            const log = [];
+            // We have to persist here because we want to read relatedTarget later.
+            const onAfterBlur = jest.fn(e => {
+              e.persist();
+              log.push(e.type);
+            });
+            const onBeforeBlur = jest.fn(e => log.push(e.type));
+            const innerRef = React.createRef();
+            const innerRef2 = React.createRef();
+            const setAfterBlurHandle =
+              ReactDOM.unstable_createEventHandle('afterblur');
+            const setBeforeBlurHandle =
+              ReactDOM.unstable_createEventHandle('beforeblur');
+
+            const Component = ({show}) => {
+              const ref = React.useRef(null);
+
+              React.useEffect(() => {
+                const clear1 = setAfterBlurHandle(document, onAfterBlur);
+                const clear2 = setBeforeBlurHandle(ref.current, onBeforeBlur);
+
+                return () => {
+                  clear1();
+                  clear2();
+                };
+              });
+
+              return (
+                <div ref={ref}>
+                  {show && (
+                    <div>
+                      <input ref={innerRef} />
+                    </div>
+                  )}
+                  <div ref={innerRef2} />
+                </div>
+              );
+            };
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Component show={true} />);
+            });
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+            expect(onAfterBlur).toHaveBeenCalledTimes(0);
+
+            await act(() => {
+              root.render(<Component show={false} />);
+            });
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+            expect(onAfterBlur).toHaveBeenCalledTimes(1);
+            expect(onAfterBlur).toHaveBeenCalledWith(
+              expect.objectContaining({relatedTarget: inner}),
+            );
+            expect(log).toEqual(['beforeblur', 'afterblur']);
+          });
+
+          // @gate www
+          it('beforeblur should skip handlers from a deleted subtree after the focused element is unmounted', async () => {
+            const onBeforeBlur = jest.fn();
+            const innerRef = React.createRef();
+            const innerRef2 = React.createRef();
+            const setBeforeBlurHandle =
+              ReactDOM.unstable_createEventHandle('beforeblur');
+            const ref2 = React.createRef();
+
+            const Component = ({show}) => {
+              const ref = React.useRef(null);
+
+              React.useEffect(() => {
+                const clear1 = setBeforeBlurHandle(ref.current, onBeforeBlur);
+                let clear2;
+                if (ref2.current) {
+                  clear2 = setBeforeBlurHandle(ref2.current, onBeforeBlur);
+                }
+
+                return () => {
+                  clear1();
+                  if (clear2) {
+                    clear2();
+                  }
+                };
+              });
+
+              return (
+                <div ref={ref}>
+                  {show && (
+                    <div ref={ref2}>
+                      <input ref={innerRef} />
+                    </div>
+                  )}
+                  <div ref={innerRef2} />
+                </div>
+              );
+            };
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Component show={true} />);
+            });
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+
+            await act(() => {
+              root.render(<Component show={false} />);
+            });
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+          });
+
+          // @gate www
+          it('beforeblur and afterblur are called after a focused element is suspended', async () => {
+            const log = [];
+            // We have to persist here because we want to read relatedTarget later.
+            const onAfterBlur = jest.fn(e => {
+              e.persist();
+              log.push(e.type);
+            });
+            const onBeforeBlur = jest.fn(e => log.push(e.type));
+            const innerRef = React.createRef();
+            const Suspense = React.Suspense;
+            let suspend = false;
+            let resolve;
+            const promise = new Promise(
+              resolvePromise => (resolve = resolvePromise),
+            );
+            const setAfterBlurHandle =
+              ReactDOM.unstable_createEventHandle('afterblur');
+            const setBeforeBlurHandle =
+              ReactDOM.unstable_createEventHandle('beforeblur');
+
+            function Child() {
+              if (suspend) {
+                throw promise;
+              } else {
+                return <input ref={innerRef} />;
+              }
+            }
+
+            const Component = () => {
+              const ref = React.useRef(null);
+
+              React.useEffect(() => {
+                const clear1 = setAfterBlurHandle(document, onAfterBlur);
+                const clear2 = setBeforeBlurHandle(ref.current, onBeforeBlur);
+
+                return () => {
+                  clear1();
+                  clear2();
+                };
+              });
+
+              return (
+                <div ref={ref}>
+                  <Suspense fallback="Loading...">
+                    <Child />
+                  </Suspense>
+                </div>
+              );
+            };
+
+            const container2 = document.createElement('div');
+            document.body.appendChild(container2);
+
+            const root = ReactDOMClient.createRoot(container2);
+
+            await act(() => {
+              root.render(<Component />);
+            });
+            jest.runAllTimers();
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+            expect(onAfterBlur).toHaveBeenCalledTimes(0);
+
+            suspend = true;
+            await act(() => {
+              root.render(<Component />);
+            });
+            jest.runAllTimers();
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+            expect(onAfterBlur).toHaveBeenCalledTimes(1);
+            expect(onAfterBlur).toHaveBeenCalledWith(
+              expect.objectContaining({relatedTarget: inner}),
+            );
+            resolve();
+            expect(log).toEqual(['beforeblur', 'afterblur']);
+
+            document.body.removeChild(container2);
+          });
+
+          // @gate www
+          it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', async () => {
+            const onBeforeBlur = jest.fn();
+            const innerRef = React.createRef();
+            const innerRef2 = React.createRef();
+            const setBeforeBlurHandle =
+              ReactDOM.unstable_createEventHandle('beforeblur');
+            const ref2 = React.createRef();
+            const Suspense = React.Suspense;
+            let suspend = false;
+            let resolve;
+            const promise = new Promise(
+              resolvePromise => (resolve = resolvePromise),
+            );
+
+            function Child() {
+              if (suspend) {
+                throw promise;
+              } else {
+                return <input ref={innerRef} />;
+              }
+            }
+
+            const Component = () => {
+              const ref = React.useRef(null);
+
+              React.useEffect(() => {
+                const clear1 = setBeforeBlurHandle(ref.current, onBeforeBlur);
+                let clear2;
+                if (ref2.current) {
+                  clear2 = setBeforeBlurHandle(ref2.current, onBeforeBlur);
+                }
+
+                return () => {
+                  clear1();
+                  if (clear2) {
+                    clear2();
+                  }
+                };
+              });
+
+              return (
+                <div ref={ref}>
+                  <Suspense fallback="Loading...">
+                    <div ref={ref2}>
+                      <Child />
+                    </div>
+                  </Suspense>
+                  <div ref={innerRef2} />
+                </div>
+              );
+            };
+
+            const container2 = document.createElement('div');
+            document.body.appendChild(container2);
+
+            const root = ReactDOMClient.createRoot(container2);
+
+            await act(() => {
+              root.render(<Component />);
+            });
+            jest.runAllTimers();
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+
+            suspend = true;
+            await act(() => {
+              root.render(<Component />);
+            });
+            jest.runAllTimers();
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+            resolve();
+
+            document.body.removeChild(container2);
+          });
+
+          // @gate www
+          it('regression: does not fire beforeblur/afterblur if target is already hidden', async () => {
+            const Suspense = React.Suspense;
+            let suspend = false;
+            const fakePromise = {then() {}};
+            const setBeforeBlurHandle =
+              ReactDOM.unstable_createEventHandle('beforeblur');
+            const innerRef = React.createRef();
+
+            function Child() {
+              if (suspend) {
+                throw fakePromise;
+              }
+              return <input ref={innerRef} />;
+            }
+
+            const Component = () => {
+              const ref = React.useRef(null);
+              const [, setState] = React.useState(0);
+
+              React.useEffect(() => {
+                return setBeforeBlurHandle(ref.current, () => {
+                  // In the regression case, this would trigger an update, then
+                  // the resulting render would trigger another blur event,
+                  // which would trigger an update again, and on and on in an
+                  // infinite loop.
+                  setState(n => n + 1);
+                });
+              }, []);
+
+              return (
+                <div ref={ref}>
+                  <Suspense fallback="Loading...">
+                    <Child />
+                  </Suspense>
+                </div>
+              );
+            };
+
+            const container2 = document.createElement('div');
+            document.body.appendChild(container2);
+
+            const root = ReactDOMClient.createRoot(container2);
+            await act(() => {
+              root.render(<Component />);
+            });
+
+            // Focus the input node
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+
+            // Suspend. This hides the input node, causing it to lose focus.
+            suspend = true;
+            await act(() => {
+              root.render(<Component />);
+            });
+
+            document.body.removeChild(container2);
+          });
+
+          // @gate !disableCommentsAsDOMContainers
+          it('handle propagation of click events between disjointed comment roots', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const log = [];
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+            const setClickCapture = ReactDOM.unstable_createEventHandle(
+              'click',
+              {capture: true},
+            );
+            const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+            const onClickCapture = jest.fn(e =>
+              log.push(['capture', e.currentTarget]),
+            );
+
+            function Child() {
+              React.useEffect(() => {
+                const click1 = setClick(divRef.current, onClick);
+                const click2 = setClickCapture(divRef.current, onClickCapture);
+                return () => {
+                  click1();
+                  click2();
+                };
+              });
+
+              return <div ref={divRef}>Click me!</div>;
+            }
+
+            function Parent() {
+              React.useEffect(() => {
+                const click1 = setClick(buttonRef.current, onClick);
+                const click2 = setClickCapture(
+                  buttonRef.current,
+                  onClickCapture,
+                );
+                return () => {
+                  click1();
+                  click2();
+                };
+              });
+
+              return <button ref={buttonRef} />;
+            }
+
+            // We use a comment node here, then mount to it
+            const disjointedNode = document.createComment(
+              ' react-mount-point-unstable ',
+            );
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Parent />);
+            });
+            buttonRef.current.appendChild(disjointedNode);
+            const disjointedNodeRoot =
+              ReactDOMClient.createRoot(disjointedNode);
+            await act(() => {
+              disjointedNodeRoot.render(<Child />);
+            });
+
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(buttonElement);
+            expect(onClick).toHaveBeenCalledTimes(1);
+            expect(onClickCapture).toHaveBeenCalledTimes(1);
+            expect(log[0]).toEqual(['capture', buttonElement]);
+            expect(log[1]).toEqual(['bubble', buttonElement]);
+
+            const divElement = divRef.current;
+            dispatchClickEvent(divElement);
+            expect(onClick).toHaveBeenCalledTimes(3);
+            expect(onClickCapture).toHaveBeenCalledTimes(3);
+            expect(log[2]).toEqual(['capture', buttonElement]);
+            expect(log[3]).toEqual(['capture', divElement]);
+            expect(log[4]).toEqual(['bubble', divElement]);
+            expect(log[5]).toEqual(['bubble', buttonElement]);
+          });
+
+          // @gate www
+          it('propagates known createEventHandle events through portals without inner listeners', async () => {
+            const buttonRef = React.createRef();
+            const divRef = React.createRef();
+            const log = [];
+            const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
+            const onClickCapture = jest.fn(e =>
+              log.push(['capture', e.currentTarget]),
+            );
+            const setClick = ReactDOM.unstable_createEventHandle('click');
+            const setClickCapture = ReactDOM.unstable_createEventHandle(
+              'click',
+              {
+                capture: true,
+              },
+            );
+
+            const portalElement = document.createElement('div');
+            document.body.appendChild(portalElement);
+
+            function Child() {
+              return <div ref={divRef}>Click me!</div>;
+            }
+
+            function Parent() {
+              React.useEffect(() => {
+                const clear1 = setClick(buttonRef.current, onClick);
+                const clear2 = setClickCapture(
+                  buttonRef.current,
+                  onClickCapture,
+                );
+                return () => {
+                  clear1();
+                  clear2();
+                };
+              });
+
+              return (
+                <button ref={buttonRef}>
+                  {ReactDOM.createPortal(<Child />, portalElement)}
+                </button>
+              );
+            }
+
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<Parent />);
+            });
+
+            const divElement = divRef.current;
+            const buttonElement = buttonRef.current;
+            dispatchClickEvent(divElement);
+            expect(onClick).toHaveBeenCalledTimes(1);
+            expect(onClickCapture).toHaveBeenCalledTimes(1);
+            expect(log[0]).toEqual(['capture', buttonElement]);
+            expect(log[1]).toEqual(['bubble', buttonElement]);
+
+            document.body.removeChild(portalElement);
+          });
+
+          describe('Compatibility with Scopes API', () => {
+            beforeEach(() => {
+              jest.resetModules();
+              ReactFeatureFlags = require('shared/ReactFeatureFlags');
+              ReactFeatureFlags.enableCreateEventHandleAPI = true;
+              ReactFeatureFlags.enableScopeAPI = true;
+
+              React = require('react');
+              ReactDOM = require('react-dom');
+              ReactDOMClient = require('react-dom/client');
+              Scheduler = require('scheduler');
+              ReactDOMServer = require('react-dom/server');
+              act = require('internal-test-utils').act;
+            });
+
+            // @gate www
+            it('handle propagation of click events on a scope', async () => {
+              const buttonRef = React.createRef();
+              const log = [];
+              const onClick = jest.fn(e =>
+                log.push(['bubble', e.currentTarget]),
+              );
+              const onClickCapture = jest.fn(e =>
+                log.push(['capture', e.currentTarget]),
+              );
+              const TestScope = React.unstable_Scope;
+              const setClick = ReactDOM.unstable_createEventHandle('click');
+              const setClickCapture = ReactDOM.unstable_createEventHandle(
+                'click',
+                {
+                  capture: true,
+                },
+              );
+
+              function Test() {
+                const scopeRef = React.useRef(null);
+
+                React.useEffect(() => {
+                  const clear1 = setClick(scopeRef.current, onClick);
+                  const clear2 = setClickCapture(
+                    scopeRef.current,
+                    onClickCapture,
+                  );
+
+                  return () => {
+                    clear1();
+                    clear2();
+                  };
+                });
+
+                return (
+                  <TestScope ref={scopeRef}>
+                    <button ref={buttonRef} />
+                  </TestScope>
+                );
+              }
+
+              const root = ReactDOMClient.createRoot(container);
+              await act(() => {
+                root.render(<Test />);
+              });
+
+              const buttonElement = buttonRef.current;
+              dispatchClickEvent(buttonElement);
+
+              expect(onClick).toHaveBeenCalledTimes(1);
+              expect(onClickCapture).toHaveBeenCalledTimes(1);
+              expect(log).toEqual([
+                ['capture', buttonElement],
+                ['bubble', buttonElement],
+              ]);
+            });
+
+            // @gate www
+            it('handle mixed propagation of click events on a scope', async () => {
+              const buttonRef = React.createRef();
+              const divRef = React.createRef();
+              const log = [];
+              const onClick = jest.fn(e =>
+                log.push(['bubble', e.currentTarget]),
+              );
+              const onClickCapture = jest.fn(e =>
+                log.push(['capture', e.currentTarget]),
+              );
+              const TestScope = React.unstable_Scope;
+              const setClick = ReactDOM.unstable_createEventHandle('click');
+              const setClickCapture = ReactDOM.unstable_createEventHandle(
+                'click',
+                {
+                  capture: true,
+                },
+              );
+
+              function Test() {
+                const scopeRef = React.useRef(null);
+
+                React.useEffect(() => {
+                  const clear1 = setClick(scopeRef.current, onClick);
+                  const clear2 = setClickCapture(
+                    scopeRef.current,
+                    onClickCapture,
+                  );
+                  const clear3 = setClick(buttonRef.current, onClick);
+                  const clear4 = setClickCapture(
+                    buttonRef.current,
+                    onClickCapture,
+                  );
+
+                  return () => {
+                    clear1();
+                    clear2();
+                    clear3();
+                    clear4();
+                  };
+                });
+
+                return (
+                  <TestScope ref={scopeRef}>
+                    <button ref={buttonRef}>
+                      <div
+                        ref={divRef}
+                        onClick={onClick}
+                        onClickCapture={onClickCapture}>
+                        Click me!
+                      </div>
+                    </button>
+                  </TestScope>
+                );
+              }
+
+              const root = ReactDOMClient.createRoot(container);
+              await act(() => {
+                root.render(<Test />);
+              });
+
+              const buttonElement = buttonRef.current;
+              dispatchClickEvent(buttonElement);
+
+              expect(onClick).toHaveBeenCalledTimes(2);
+              expect(onClickCapture).toHaveBeenCalledTimes(2);
+              expect(log).toEqual([
+                ['capture', buttonElement],
+                ['capture', buttonElement],
+                ['bubble', buttonElement],
+                ['bubble', buttonElement],
+              ]);
+
+              log.length = 0;
+              onClick.mockClear();
+              onClickCapture.mockClear();
+
+              const divElement = divRef.current;
+              dispatchClickEvent(divElement);
+
+              expect(onClick).toHaveBeenCalledTimes(3);
+              expect(onClickCapture).toHaveBeenCalledTimes(3);
+              expect(log).toEqual([
+                ['capture', buttonElement],
+                ['capture', buttonElement],
+                ['capture', divElement],
+                ['bubble', divElement],
+                ['bubble', buttonElement],
+                ['bubble', buttonElement],
+              ]);
+            });
+
+            // @gate www
+            it('should not handle the target being a dangling text node within a scope', async () => {
+              const clickEvent = jest.fn();
+              const buttonRef = React.createRef();
+              const TestScope = React.unstable_Scope;
+              const setClick = ReactDOM.unstable_createEventHandle('click');
+
+              function Test() {
+                const scopeRef = React.useRef(null);
+
+                React.useEffect(() => {
+                  return setClick(scopeRef.current, clickEvent);
+                });
+
+                return (
+                  <button ref={buttonRef}>
+                    <TestScope ref={scopeRef}>Click me!</TestScope>
+                  </button>
+                );
+              }
+
+              const root = ReactDOMClient.createRoot(container);
+              await act(() => {
+                root.render(<Test />);
+              });
+
+              const textNode = buttonRef.current.firstChild;
+              dispatchClickEvent(textNode);
+              // This should not work, as the target instance will be the
+              // <button>, which is actually outside the scope.
+              expect(clickEvent).toBeCalledTimes(0);
+            });
+
+            // @gate www
+            it('handle stopPropagation (inner) correctly between scopes', async () => {
+              const buttonRef = React.createRef();
+              const outerOnClick = jest.fn();
+              const innerOnClick = jest.fn(e => e.stopPropagation());
+              const TestScope = React.unstable_Scope;
+              const TestScope2 = React.unstable_Scope;
+              const setClick = ReactDOM.unstable_createEventHandle('click');
+
+              function Test() {
+                const scopeRef = React.useRef(null);
+                const scope2Ref = React.useRef(null);
+
+                React.useEffect(() => {
+                  const clear1 = setClick(scopeRef.current, outerOnClick);
+                  const clear2 = setClick(scope2Ref.current, innerOnClick);
+
+                  return () => {
+                    clear1();
+                    clear2();
+                  };
+                });
+
+                return (
+                  <TestScope ref={scopeRef}>
+                    <TestScope2 ref={scope2Ref}>
+                      <button ref={buttonRef} />
+                    </TestScope2>
+                  </TestScope>
+                );
+              }
+
+              const root = ReactDOMClient.createRoot(container);
+              await act(() => {
+                root.render(<Test />);
+              });
+
+              const buttonElement = buttonRef.current;
+              dispatchClickEvent(buttonElement);
+
+              expect(innerOnClick).toHaveBeenCalledTimes(1);
+              expect(outerOnClick).toHaveBeenCalledTimes(0);
+            });
+
+            // @gate www
+            it('handle stopPropagation (outer) correctly between scopes', async () => {
+              const buttonRef = React.createRef();
+              const outerOnClick = jest.fn(e => e.stopPropagation());
+              const innerOnClick = jest.fn();
+              const TestScope = React.unstable_Scope;
+              const TestScope2 = React.unstable_Scope;
+              const setClick = ReactDOM.unstable_createEventHandle('click');
+
+              function Test() {
+                const scopeRef = React.useRef(null);
+                const scope2Ref = React.useRef(null);
+
+                React.useEffect(() => {
+                  const clear1 = setClick(scopeRef.current, outerOnClick);
+                  const clear2 = setClick(scope2Ref.current, innerOnClick);
+
+                  return () => {
+                    clear1();
+                    clear2();
+                  };
+                });
+
+                return (
+                  <TestScope ref={scopeRef}>
+                    <TestScope2 ref={scope2Ref}>
+                      <button ref={buttonRef} />
+                    </TestScope2>
+                  </TestScope>
+                );
+              }
+
+              const root = ReactDOMClient.createRoot(container);
+              await act(() => {
+                root.render(<Test />);
+              });
+
+              const buttonElement = buttonRef.current;
+              dispatchClickEvent(buttonElement);
+
+              expect(innerOnClick).toHaveBeenCalledTimes(1);
+              expect(outerOnClick).toHaveBeenCalledTimes(1);
+            });
+
+            // @gate www
+            it('handle stopPropagation (inner and outer) correctly between scopes', async () => {
+              const buttonRef = React.createRef();
+              const onClick = jest.fn(e => e.stopPropagation());
+              const TestScope = React.unstable_Scope;
+              const TestScope2 = React.unstable_Scope;
+              const setClick = ReactDOM.unstable_createEventHandle('click');
+
+              function Test() {
+                const scopeRef = React.useRef(null);
+                const scope2Ref = React.useRef(null);
+
+                React.useEffect(() => {
+                  const clear1 = setClick(scopeRef.current, onClick);
+                  const clear2 = setClick(scope2Ref.current, onClick);
+
+                  return () => {
+                    clear1();
+                    clear2();
+                  };
+                });
+
+                return (
+                  <TestScope ref={scopeRef}>
+                    <TestScope2 ref={scope2Ref}>
+                      <button ref={buttonRef} />
+                    </TestScope2>
+                  </TestScope>
+                );
+              }
+
+              const root = ReactDOMClient.createRoot(container);
+              await act(() => {
+                root.render(<Test />);
+              });
+
+              const buttonElement = buttonRef.current;
+              dispatchClickEvent(buttonElement);
+
+              expect(onClick).toHaveBeenCalledTimes(1);
+            });
+
+            // @gate www
+            it('should be able to register handlers for events affected by the intervention', async () => {
+              const rootContainer = document.createElement('div');
+              container.appendChild(rootContainer);
+
+              const allEvents = [];
+              const defaultPreventedEvents = [];
+              const handler = e => {
+                allEvents.push(e.type);
+                if (e.defaultPrevented) defaultPreventedEvents.push(e.type);
+              };
+
+              container.addEventListener('touchstart', handler);
+              container.addEventListener('touchmove', handler);
+              container.addEventListener('wheel', handler);
+
+              const ref = React.createRef();
+              const setTouchStart =
+                ReactDOM.unstable_createEventHandle('touchstart');
+              const setTouchMove =
+                ReactDOM.unstable_createEventHandle('touchmove');
+              const setWheel = ReactDOM.unstable_createEventHandle('wheel');
+
+              function Component() {
+                React.useEffect(() => {
+                  const clearTouchStart = setTouchStart(ref.current, e =>
+                    e.preventDefault(),
+                  );
+                  const clearTouchMove = setTouchMove(ref.current, e =>
+                    e.preventDefault(),
+                  );
+                  const clearWheel = setWheel(ref.current, e =>
+                    e.preventDefault(),
+                  );
+                  return () => {
+                    clearTouchStart();
+                    clearTouchMove();
+                    clearWheel();
+                  };
+                });
+                return <div ref={ref}>test</div>;
+              }
+
+              const root = ReactDOMClient.createRoot(rootContainer);
+              await act(() => {
+                root.render(<Component />);
+              });
+
+              dispatchEvent(ref.current, 'touchstart');
+              dispatchEvent(ref.current, 'touchmove');
+              dispatchEvent(ref.current, 'wheel');
+
+              expect(allEvents).toEqual(['touchstart', 'touchmove', 'wheel']);
+              // These events are passive by default, so we can't preventDefault.
+              expect(defaultPreventedEvents).toEqual([]);
+            });
+          });
+        });
+      },
+    );
+  }
+
+  withEnableLegacyFBSupport(false);
+  withEnableLegacyFBSupport(true);
+});
diff --git a/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js
new file mode 100644
index 00000000000..aae6b02239e
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('SyntheticClipboardEvent', () => {
+  let container;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('ClipboardEvent interface', () => {
+    describe('clipboardData', () => {
+      describe('when event has clipboardData', () => {
+        it("returns event's clipboardData", async () => {
+          let expectedCount = 0;
+
+          // Mock clipboardData since jsdom implementation doesn't have a constructor
+          const clipboardData = {
+            dropEffect: null,
+            effectAllowed: null,
+            files: null,
+            items: null,
+            types: null,
+          };
+          const eventHandler = event => {
+            expect(event.clipboardData).toBe(clipboardData);
+            expectedCount++;
+          };
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(
+              <div
+                onCopy={eventHandler}
+                onCut={eventHandler}
+                onPaste={eventHandler}
+              />,
+            );
+          });
+
+          const div = container.firstChild;
+
+          let event;
+          event = document.createEvent('Event');
+          event.initEvent('copy', true, true);
+          event.clipboardData = clipboardData;
+          await act(() => {
+            div.dispatchEvent(event);
+          });
+          event = document.createEvent('Event');
+          event.initEvent('cut', true, true);
+          event.clipboardData = clipboardData;
+          await act(() => {
+            div.dispatchEvent(event);
+          });
+
+          event = document.createEvent('Event');
+          event.initEvent('paste', true, true);
+          event.clipboardData = clipboardData;
+          await act(() => {
+            div.dispatchEvent(event);
+          });
+
+          expect(expectedCount).toBe(3);
+        });
+      });
+    });
+  });
+
+  describe('EventInterface', () => {
+    it('is able to `preventDefault` and `stopPropagation`', async () => {
+      let expectedCount = 0;
+
+      const eventHandler = event => {
+        expect(event.isDefaultPrevented()).toBe(false);
+        event.preventDefault();
+        expect(event.isDefaultPrevented()).toBe(true);
+        expect(event.isPropagationStopped()).toBe(false);
+        event.stopPropagation();
+        expect(event.isPropagationStopped()).toBe(true);
+        expectedCount++;
+      };
+
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <div
+            onCopy={eventHandler}
+            onCut={eventHandler}
+            onPaste={eventHandler}
+          />,
+        );
+      });
+
+      const div = container.firstChild;
+
+      let event;
+      event = document.createEvent('Event');
+      event.initEvent('copy', true, true);
+      div.dispatchEvent(event);
+
+      event = document.createEvent('Event');
+      event.initEvent('cut', true, true);
+      div.dispatchEvent(event);
+
+      event = document.createEvent('Event');
+      event.initEvent('paste', true, true);
+      div.dispatchEvent(event);
+
+      expect(expectedCount).toBe(3);
+    });
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js
new file mode 100644
index 00000000000..c6ca1d17335
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('SyntheticEvent', () => {
+  let container;
+  let root;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should be able to `preventDefault`', async () => {
+    let expectedCount = 0;
+
+    const eventHandler = syntheticEvent => {
+      expect(syntheticEvent.isDefaultPrevented()).toBe(false);
+      syntheticEvent.preventDefault();
+      expect(syntheticEvent.isDefaultPrevented()).toBe(true);
+      expect(syntheticEvent.defaultPrevented).toBe(true);
+
+      expectedCount++;
+    };
+    const nodeRef = React.createRef();
+    await act(async () => {
+      root.render(<div onClick={eventHandler} ref={nodeRef} />);
+    });
+    const node = nodeRef.current;
+
+    const event = document.createEvent('Event');
+    event.initEvent('click', true, true);
+    node.dispatchEvent(event);
+
+    expect(expectedCount).toBe(1);
+  });
+
+  it('should be prevented if nativeEvent is prevented', async () => {
+    let expectedCount = 0;
+
+    const eventHandler = syntheticEvent => {
+      expect(syntheticEvent.isDefaultPrevented()).toBe(true);
+
+      expectedCount++;
+    };
+    const nodeRef = React.createRef();
+    await act(async () => {
+      root.render(<div onClick={eventHandler} ref={nodeRef} />);
+    });
+    const node = nodeRef.current;
+
+    let event;
+    event = document.createEvent('Event');
+    event.initEvent('click', true, true);
+    event.preventDefault();
+    node.dispatchEvent(event);
+
+    event = document.createEvent('Event');
+    event.initEvent('click', true, true);
+    // Emulate IE8
+    Object.defineProperty(event, 'defaultPrevented', {
+      get() {},
+    });
+    Object.defineProperty(event, 'returnValue', {
+      get() {
+        return false;
+      },
+    });
+    node.dispatchEvent(event);
+
+    expect(expectedCount).toBe(2);
+  });
+
+  it('should be able to `stopPropagation`', async () => {
+    let expectedCount = 0;
+
+    const eventHandler = syntheticEvent => {
+      expect(syntheticEvent.isPropagationStopped()).toBe(false);
+      syntheticEvent.stopPropagation();
+      expect(syntheticEvent.isPropagationStopped()).toBe(true);
+
+      expectedCount++;
+    };
+    const nodeRef = React.createRef();
+    await act(async () => {
+      root.render(<div onClick={eventHandler} ref={nodeRef} />);
+    });
+    const node = nodeRef.current;
+
+    const event = document.createEvent('Event');
+    event.initEvent('click', true, true);
+    node.dispatchEvent(event);
+
+    expect(expectedCount).toBe(1);
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
new file mode 100644
index 00000000000..3fdf37b5789
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('SyntheticFocusEvent', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('onFocus events have the focus type', async () => {
+    const log = [];
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <button
+          onFocus={event => log.push(`onFocus: ${event.type}`)}
+          onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
+        />,
+      );
+    });
+
+    const button = container.querySelector('button');
+
+    await act(() => {
+      button.dispatchEvent(
+        new FocusEvent('focusin', {
+          bubbles: true,
+          cancelable: false,
+        }),
+      );
+    });
+
+    expect(log).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
+  });
+
+  it('onBlur events have the blur type', async () => {
+    const log = [];
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <button
+          onBlur={event => log.push(`onBlur: ${event.type}`)}
+          onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
+        />,
+      );
+    });
+
+    const button = container.querySelector('button');
+
+    await act(() => {
+      button.dispatchEvent(
+        new FocusEvent('focusout', {
+          bubbles: true,
+          cancelable: false,
+        }),
+      );
+    });
+
+    expect(log).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js
new file mode 100644
index 00000000000..f616a7c44f5
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js
@@ -0,0 +1,577 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+
+let act;
+
+describe('SyntheticKeyboardEvent', () => {
+  let container;
+  let root;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+
+    act = require('internal-test-utils').act;
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    document.body.appendChild(container);
+  });
+
+  afterEach(async () => {
+    await act(() => {
+      root.unmount();
+    });
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('KeyboardEvent interface', () => {
+    describe('charCode', () => {
+      describe('when event is `keypress`', () => {
+        describe('when charCode is present in nativeEvent', () => {
+          it('when charCode is 0 and keyCode is 13, returns 13', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                charCode: 0,
+                keyCode: 13,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(13);
+          });
+
+          it('when charCode is 32 or bigger and keyCode is missing, returns charCode', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                charCode: 32,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(32);
+          });
+
+          it('when charCode is 13 and keyCode is missing, returns charCode', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                charCode: 13,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(13);
+          });
+
+          // Firefox creates a keypress event for function keys too. This removes
+          // the unwanted keypress events. Enter is however both printable and
+          // non-printable. One would expect Tab to be as well (but it isn't).
+          it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', async () => {
+            let called = false;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={() => {
+                    called = true;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                charCode: 31,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(called).toBe(false);
+          });
+
+          it('when charCode is 10, returns 13', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                charCode: 10,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(13);
+          });
+
+          it('when charCode is 10 and ctrl is pressed, returns 13', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                charCode: 10,
+                ctrlKey: true,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(13);
+          });
+        });
+
+        // TODO: this seems IE8 specific.
+        // We can probably remove this normalization.
+        describe('when charCode is not present in nativeEvent', () => {
+          let charCodeDescriptor;
+
+          beforeEach(() => {
+            charCodeDescriptor = Object.getOwnPropertyDescriptor(
+              KeyboardEvent.prototype,
+              'charCode',
+            );
+            delete KeyboardEvent.prototype.charCode;
+          });
+
+          afterEach(() => {
+            // Don't forget to restore for other tests.
+            Object.defineProperty(
+              KeyboardEvent.prototype,
+              'charCode',
+              charCodeDescriptor,
+            );
+            charCodeDescriptor = null;
+          });
+
+          it('when keyCode is 32 or bigger, returns keyCode', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                keyCode: 32,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(32);
+          });
+
+          it('when keyCode is 13, returns 13', async () => {
+            let charCode = null;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    charCode = e.charCode;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                keyCode: 13,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(charCode).toBe(13);
+          });
+
+          it('when keyCode is smaller than 32 and is not 13, ignores keypress', async () => {
+            let called = false;
+            await act(() => {
+              root.render(
+                <input
+                  onKeyPress={e => {
+                    called = true;
+                  }}
+                />,
+              );
+            });
+            container.firstChild.dispatchEvent(
+              new KeyboardEvent('keypress', {
+                keyCode: 31,
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+            expect(called).toBe(false);
+          });
+        });
+      });
+
+      describe('when event is not `keypress`', () => {
+        it('returns 0', async () => {
+          let charCodeDown = null;
+          let charCodeUp = null;
+          await act(() => {
+            root.render(
+              <input
+                onKeyDown={e => {
+                  charCodeDown = e.charCode;
+                }}
+                onKeyUp={e => {
+                  charCodeUp = e.charCode;
+                }}
+              />,
+            );
+          });
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              key: 'Del',
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              key: 'Del',
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          expect(charCodeDown).toBe(0);
+          expect(charCodeUp).toBe(0);
+        });
+      });
+
+      it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', async () => {
+        let charCode = null;
+        await act(() => {
+          root.render(
+            <input
+              onKeyDown={e => {
+                charCode = e.charCode;
+              }}
+            />,
+          );
+        });
+        container.firstChild.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            charCode: 31,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+        expect(charCode).toBe(0);
+      });
+    });
+
+    describe('keyCode', () => {
+      describe('when event is `keydown` or `keyup`', () => {
+        it('returns a passed keyCode', async () => {
+          let keyCodeDown = null;
+          let keyCodeUp = null;
+          await act(() => {
+            root.render(
+              <input
+                onKeyDown={e => {
+                  keyCodeDown = e.keyCode;
+                }}
+                onKeyUp={e => {
+                  keyCodeUp = e.keyCode;
+                }}
+              />,
+            );
+          });
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              keyCode: 40,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              keyCode: 40,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          expect(keyCodeDown).toBe(40);
+          expect(keyCodeUp).toBe(40);
+        });
+      });
+
+      describe('when event is `keypress`', () => {
+        it('returns 0', async () => {
+          let keyCode = null;
+          await act(() => {
+            root.render(
+              <input
+                onKeyPress={e => {
+                  keyCode = e.keyCode;
+                }}
+              />,
+            );
+          });
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keypress', {
+              charCode: 65,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          expect(keyCode).toBe(0);
+        });
+      });
+    });
+
+    describe('which', () => {
+      describe('when event is `keypress`', () => {
+        it('is consistent with `charCode`', async () => {
+          let calls = 0;
+          await act(() => {
+            root.render(
+              <input
+                onKeyPress={e => {
+                  expect(e.which).toBe(e.charCode);
+                  calls++;
+                }}
+              />,
+            );
+          });
+          // Try different combinations from other tests.
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keypress', {
+              charCode: 0,
+              keyCode: 13,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keypress', {
+              charCode: 32,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keypress', {
+              charCode: 13,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          expect(calls).toBe(3);
+        });
+      });
+
+      describe('when event is `keydown` or `keyup`', () => {
+        it('is consistent with `keyCode`', async () => {
+          let calls = 0;
+          await act(() => {
+            root.render(
+              <input
+                onKeyDown={e => {
+                  expect(e.which).toBe(e.keyCode);
+                  calls++;
+                }}
+                onKeyUp={e => {
+                  expect(e.which).toBe(e.keyCode);
+                  calls++;
+                }}
+              />,
+            );
+          });
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              key: 'Del',
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              charCode: 31,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keydown', {
+              keyCode: 40,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              key: 'Del',
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          container.firstChild.dispatchEvent(
+            new KeyboardEvent('keyup', {
+              keyCode: 40,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+          expect(calls).toBe(5);
+        });
+      });
+    });
+
+    describe('code', () => {
+      it('returns code on `keydown`, `keyup` and `keypress`', async () => {
+        let codeDown = null;
+        let codeUp = null;
+        let codePress = null;
+        await act(() => {
+          root.render(
+            <input
+              onKeyDown={e => {
+                codeDown = e.code;
+              }}
+              onKeyUp={e => {
+                codeUp = e.code;
+              }}
+              onKeyPress={e => {
+                codePress = e.code;
+              }}
+            />,
+          );
+        });
+        container.firstChild.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            code: 'KeyQ',
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+        container.firstChild.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            code: 'KeyQ',
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+        container.firstChild.dispatchEvent(
+          new KeyboardEvent('keypress', {
+            code: 'KeyQ',
+            charCode: 113,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+        expect(codeDown).toBe('KeyQ');
+        expect(codeUp).toBe('KeyQ');
+        expect(codePress).toBe('KeyQ');
+      });
+    });
+  });
+
+  describe('EventInterface', () => {
+    it('is able to `preventDefault` and `stopPropagation`', async () => {
+      let expectedCount = 0;
+      const eventHandler = event => {
+        expect(event.isDefaultPrevented()).toBe(false);
+        event.preventDefault();
+        expect(event.isDefaultPrevented()).toBe(true);
+
+        expect(event.isPropagationStopped()).toBe(false);
+        event.stopPropagation();
+        expect(event.isPropagationStopped()).toBe(true);
+        expectedCount++;
+      };
+      await act(() => {
+        root.render(
+          <div
+            onKeyDown={eventHandler}
+            onKeyUp={eventHandler}
+            onKeyPress={eventHandler}
+          />,
+        );
+      });
+
+      container.firstChild.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          keyCode: 40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      container.firstChild.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          keyCode: 40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      container.firstChild.dispatchEvent(
+        new KeyboardEvent('keypress', {
+          charCode: 40,
+          keyCode: 40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      expect(expectedCount).toBe(3);
+    });
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js
new file mode 100644
index 00000000000..a20886a3e2c
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js
@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('SyntheticMouseEvent', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should only use values from movementX/Y when event type is mousemove', async () => {
+    const events = [];
+    const onMouseMove = event => {
+      events.push(event.movementX);
+    };
+
+    const onMouseDown = event => {
+      events.push(event.movementX);
+    };
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<div onMouseMove={onMouseMove} onMouseDown={onMouseDown} />);
+    });
+    const node = container.firstChild;
+
+    let event = new MouseEvent('mousemove', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 2,
+      screenY: 2,
+    });
+
+    await act(() => {
+      node.dispatchEvent(event);
+    });
+
+    event = new MouseEvent('mousemove', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 8,
+      screenY: 8,
+    });
+
+    await act(() => {
+      node.dispatchEvent(event);
+    });
+
+    // Now trigger a mousedown event to see if movementX has changed back to 0
+    event = new MouseEvent('mousedown', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 25,
+      screenY: 65,
+    });
+
+    await act(() => {
+      node.dispatchEvent(event);
+    });
+
+    expect(events.length).toBe(3);
+    expect(events[0]).toBe(0);
+    expect(events[1]).toBe(6);
+    expect(events[2]).toBe(0); // mousedown event should have movementX at 0
+  });
+
+  it('should correctly calculate movementX/Y for capture phase', async () => {
+    const events = [];
+    const onMouseMove = event => {
+      events.push(['move', false, event.movementX, event.movementY]);
+    };
+    const onMouseMoveCapture = event => {
+      events.push(['move', true, event.movementX, event.movementY]);
+    };
+    const onMouseDown = event => {
+      events.push(['down', false, event.movementX, event.movementY]);
+    };
+    const onMouseDownCapture = event => {
+      events.push(['down', true, event.movementX, event.movementY]);
+    };
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div
+          onMouseMove={onMouseMove}
+          onMouseMoveCapture={onMouseMoveCapture}
+          onMouseDown={onMouseDown}
+          onMouseDownCapture={onMouseDownCapture}
+        />,
+      );
+    });
+    const node = container.firstChild;
+
+    let event = new MouseEvent('mousemove', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 2,
+      screenY: 2,
+    });
+
+    await act(() => {
+      node.dispatchEvent(event);
+    });
+
+    event = new MouseEvent('mousemove', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 8,
+      screenY: 9,
+    });
+
+    await act(() => {
+      node.dispatchEvent(event);
+    });
+
+    // Now trigger a mousedown event to see if movementX has changed back to 0
+    event = new MouseEvent('mousedown', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 25,
+      screenY: 65,
+    });
+
+    await act(() => {
+      node.dispatchEvent(event);
+    });
+
+    expect(events).toEqual([
+      ['move', true, 0, 0],
+      ['move', false, 0, 0],
+      ['move', true, 6, 7],
+      ['move', false, 6, 7],
+      ['down', true, 0, 0],
+      ['down', false, 0, 0],
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js
new file mode 100644
index 00000000000..e0ff34e6f83
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('SyntheticWheelEvent', () => {
+  let container;
+  let root;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = ReactDOMClient.createRoot(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should normalize properties from the MouseEvent interface', async () => {
+    const events = [];
+    const onWheel = event => {
+      event.persist();
+      events.push(event);
+    };
+    await act(async () => {
+      root.render(<div onWheel={onWheel} />);
+    });
+
+    container.firstChild.dispatchEvent(
+      new MouseEvent('wheel', {
+        bubbles: true,
+        button: 1,
+      }),
+    );
+
+    expect(events.length).toBe(1);
+    expect(events[0].button).toBe(1);
+  });
+
+  it('should normalize properties from the WheelEvent interface', async () => {
+    const events = [];
+    const onWheel = event => {
+      event.persist();
+      events.push(event);
+    };
+
+    await act(async () => {
+      root.render(<div onWheel={onWheel} />);
+    });
+
+    let event = new WheelEvent('wheel', {
+      bubbles: true,
+      deltaX: 10,
+      deltaY: -50,
+    });
+    container.firstChild.dispatchEvent(event);
+
+    event = new MouseEvent('wheel', {
+      bubbles: true,
+    });
+    // jsdom doesn't support these legacy Webkit properties so we add them manually.
+    Object.assign(event, {
+      wheelDeltaX: -10,
+      wheelDeltaY: 50,
+    });
+    container.firstChild.dispatchEvent(event);
+
+    expect(events.length).toBe(2);
+    expect(events[0].deltaX).toBe(10);
+    expect(events[0].deltaY).toBe(-50);
+    expect(events[1].deltaX).toBe(10);
+    expect(events[1].deltaY).toBe(-50);
+  });
+
+  it('should be able to `preventDefault` and `stopPropagation`', async () => {
+    const events = [];
+    const onWheel = event => {
+      expect(event.isDefaultPrevented()).toBe(false);
+      event.preventDefault();
+      expect(event.isDefaultPrevented()).toBe(true);
+      event.persist();
+      events.push(event);
+    };
+    await act(async () => {
+      root.render(<div onWheel={onWheel} />);
+    });
+
+    container.firstChild.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        deltaX: 10,
+        deltaY: -50,
+      }),
+    );
+
+    container.firstChild.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        deltaX: 10,
+        deltaY: -50,
+      }),
+    );
+
+    expect(events.length).toBe(2);
+    expect.assertions(5);
+  });
+});
diff --git a/packages/react-dom/src/events/__tests__/getEventKey-test.js b/packages/react-dom/src/events/__tests__/getEventKey-test.js
new file mode 100644
index 00000000000..4c66a121b87
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/getEventKey-test.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+
+let act;
+
+describe('getEventKey', () => {
+  let container;
+  let root;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+
+    act = require('internal-test-utils').act;
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+    root = null;
+  });
+
+  describe('when key is implemented in a browser', () => {
+    describe('when key is not normalized', () => {
+      it('returns a normalized value', async () => {
+        let key = null;
+        class Comp extends React.Component {
+          render() {
+            return <input onKeyDown={e => (key = e.key)} />;
+          }
+        }
+
+        await act(() => {
+          root.render(<Comp />);
+        });
+
+        const nativeEvent = new KeyboardEvent('keydown', {
+          key: 'Del',
+          bubbles: true,
+          cancelable: true,
+        });
+        container.firstChild.dispatchEvent(nativeEvent);
+        expect(key).toBe('Delete');
+      });
+    });
+
+    describe('when key is normalized', () => {
+      it('returns a key', async () => {
+        let key = null;
+        class Comp extends React.Component {
+          render() {
+            return <input onKeyDown={e => (key = e.key)} />;
+          }
+        }
+
+        await act(() => {
+          root.render(<Comp />);
+        });
+
+        const nativeEvent = new KeyboardEvent('keydown', {
+          key: 'f',
+          bubbles: true,
+          cancelable: true,
+        });
+        container.firstChild.dispatchEvent(nativeEvent);
+        expect(key).toBe('f');
+      });
+    });
+  });
+
+  describe('when key is not implemented in a browser', () => {
+    describe('when event type is keypress', () => {
+      describe('when charCode is 13', () => {
+        it('returns "Enter"', async () => {
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyPress={e => (key = e.key)} />;
+            }
+          }
+
+          await act(() => {
+            root.render(<Comp />);
+          });
+
+          const nativeEvent = new KeyboardEvent('keypress', {
+            charCode: 13,
+            bubbles: true,
+            cancelable: true,
+          });
+          container.firstChild.dispatchEvent(nativeEvent);
+          expect(key).toBe('Enter');
+        });
+      });
+
+      describe('when charCode is not 13', () => {
+        it('returns a string from a charCode', async () => {
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyPress={e => (key = e.key)} />;
+            }
+          }
+
+          await act(() => {
+            root.render(<Comp />);
+          });
+
+          const nativeEvent = new KeyboardEvent('keypress', {
+            charCode: 65,
+            bubbles: true,
+            cancelable: true,
+          });
+          container.firstChild.dispatchEvent(nativeEvent);
+          expect(key).toBe('A');
+        });
+      });
+    });
+
+    describe('when event type is keydown or keyup', () => {
+      describe('when keyCode is recognized', () => {
+        it('returns a translated key', async () => {
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyDown={e => (key = e.key)} />;
+            }
+          }
+
+          await act(() => {
+            root.render(<Comp />);
+          });
+
+          const nativeEvent = new KeyboardEvent('keydown', {
+            keyCode: 45,
+            bubbles: true,
+            cancelable: true,
+          });
+          container.firstChild.dispatchEvent(nativeEvent);
+          expect(key).toBe('Insert');
+        });
+      });
+
+      describe('when keyCode is not recognized', () => {
+        it('returns Unidentified', async () => {
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyDown={e => (key = e.key)} />;
+            }
+          }
+
+          await act(() => {
+            root.render(<Comp />);
+          });
+
+          const nativeEvent = new KeyboardEvent('keydown', {
+            keyCode: 1337,
+            bubbles: true,
+            cancelable: true,
+          });
+          container.firstChild.dispatchEvent(nativeEvent);
+          expect(key).toBe('Unidentified');
+        });
+      });
+    });
+  });
+});
diff --git a/packages/react-dom/src/events/plugins/__tests__/BeforeInputEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/BeforeInputEventPlugin-test.js
new file mode 100644
index 00000000000..353f2de4d86
--- /dev/null
+++ b/packages/react-dom/src/events/plugins/__tests__/BeforeInputEventPlugin-test.js
@@ -0,0 +1,861 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('BeforeInputEventPlugin', () => {
+  let container;
+
+  function loadReactDOMClientAndAct(envSimulator) {
+    jest.resetModules();
+    if (envSimulator) {
+      envSimulator();
+    }
+    return {
+      ReactDOMClient: require('react-dom/client'),
+      act: require('internal-test-utils').act,
+    };
+  }
+
+  function simulateIE11() {
+    document.documentMode = 11;
+    window.CompositionEvent = {};
+  }
+
+  function simulateWebkit() {
+    window.CompositionEvent = {};
+    window.TextEvent = {};
+  }
+
+  function simulateComposition() {
+    window.CompositionEvent = {};
+  }
+
+  function simulateNoComposition() {
+    // no composition event in Window - will use fallback
+  }
+
+  function simulateEvent(elem, type, data) {
+    const event = new Event(type, {bubbles: true});
+    Object.assign(event, data);
+    elem.dispatchEvent(event);
+  }
+
+  function simulateKeyboardEvent(elem, type, data) {
+    const {char, value, ...rest} = data;
+    const event = new KeyboardEvent(type, {
+      bubbles: true,
+      ...rest,
+    });
+    if (char) {
+      event.char = char;
+    }
+    if (value) {
+      elem.value = value;
+    }
+    elem.dispatchEvent(event);
+  }
+
+  function simulatePaste(elem) {
+    const pasteEvent = new Event('paste', {
+      bubbles: true,
+    });
+    pasteEvent.clipboardData = {
+      dropEffect: null,
+      effectAllowed: null,
+      files: null,
+      items: null,
+      types: null,
+    };
+    elem.dispatchEvent(pasteEvent);
+  }
+
+  beforeEach(() => {
+    React = require('react');
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    delete document.documentMode;
+    delete window.CompositionEvent;
+    delete window.TextEvent;
+    delete window.opera;
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  function keyCode(char) {
+    return char.charCodeAt(0);
+  }
+
+  const scenarios = [
+    {
+      eventSimulator: simulateEvent,
+      eventSimulatorArgs: [
+        'compositionstart',
+        {detail: {data: 'test'}, data: 'test'},
+      ],
+    },
+    {
+      eventSimulator: simulateEvent,
+      eventSimulatorArgs: [
+        'compositionupdate',
+        {detail: {data: 'test string'}, data: 'test string'},
+      ],
+    },
+    {
+      eventSimulator: simulateEvent,
+      eventSimulatorArgs: [
+        'compositionend',
+        {detail: {data: 'test string 3'}, data: 'test string 3'},
+      ],
+    },
+    {
+      eventSimulator: simulateEvent,
+      eventSimulatorArgs: ['textInput', {data: 'abcß'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keypress', {which: keyCode('a')}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keypress', {which: keyCode(' ')}, ' '],
+    },
+    {
+      eventSimulator: simulateEvent,
+      eventSimulatorArgs: ['textInput', {data: ' '}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keypress', {which: keyCode('a'), ctrlKey: true}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keypress', {which: keyCode('b'), altKey: true}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: [
+        'keypress',
+        {which: keyCode('c'), altKey: true, ctrlKey: true},
+      ],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: [
+        'keypress',
+        {which: keyCode('X'), char: '\uD83D\uDE0A'},
+      ],
+    },
+    {
+      eventSimulator: simulateEvent,
+      eventSimulatorArgs: ['textInput', {data: '\uD83D\uDE0A'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keydown', {keyCode: 229, value: 'foo'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keydown', {keyCode: 9, value: 'foobar'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keydown', {keyCode: 229, value: 'foofoo'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keyup', {keyCode: 9, value: 'fooBARfoo'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keydown', {keyCode: 229, value: 'foofoo'}],
+    },
+    {
+      eventSimulator: simulateKeyboardEvent,
+      eventSimulatorArgs: ['keypress', {keyCode: 60, value: 'Barfoofoo'}],
+    },
+    {
+      eventSimulator: simulatePaste,
+      eventSimulatorArgs: [],
+    },
+  ];
+
+  const environments = [
+    {
+      emulator: simulateWebkit,
+      assertions: [
+        {
+          run: ({
+            beforeInputEvent,
+            compositionStartEvent,
+            spyOnBeforeInput,
+            spyOnCompositionStart,
+          }) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+            expect(spyOnCompositionStart).toHaveBeenCalledTimes(1);
+            expect(compositionStartEvent.type).toBe('compositionstart');
+            expect(compositionStartEvent.data).toBe('test');
+          },
+        },
+        {
+          run: ({
+            beforeInputEvent,
+            compositionUpdateEvent,
+            spyOnBeforeInput,
+            spyOnCompositionUpdate,
+          }) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+            expect(spyOnCompositionUpdate).toHaveBeenCalledTimes(1);
+            expect(compositionUpdateEvent.type).toBe('compositionupdate');
+            expect(compositionUpdateEvent.data).toBe('test string');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('compositionend');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('test string 3');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('textInput');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('abcß');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe(' ');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('textInput');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+      ],
+    },
+    {
+      emulator: simulateIE11,
+      assertions: [
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('a');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe(' ');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('c');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+      ],
+    },
+    {
+      emulator: simulateNoComposition,
+      assertions: [
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('a');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe(' ');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('c');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keydown');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('bar');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keyup');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('BAR');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('Bar');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+      ],
+    },
+    {
+      emulator: simulateComposition,
+      assertions: [
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('compositionend');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('test string 3');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('a');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe(' ');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('c');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
+            expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+        {
+          run: ({beforeInputEvent, spyOnBeforeInput}) => {
+            expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);
+            expect(beforeInputEvent).toBeNull();
+          },
+        },
+      ],
+    },
+  ];
+
+  const testInputComponent = async (env, scenes) => {
+    let beforeInputEvent;
+    let compositionStartEvent;
+    let compositionUpdateEvent;
+    let spyOnBeforeInput;
+    let spyOnCompositionStart;
+    let spyOnCompositionUpdate;
+    ({ReactDOMClient, act} = loadReactDOMClientAndAct(env.emulator));
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <input
+          type="text"
+          onBeforeInput={e => {
+            spyOnBeforeInput();
+            beforeInputEvent = e;
+          }}
+          onCompositionStart={e => {
+            spyOnCompositionStart();
+            compositionStartEvent = e;
+          }}
+          onCompositionUpdate={e => {
+            spyOnCompositionUpdate();
+            compositionUpdateEvent = e;
+          }}
+        />,
+      );
+    });
+
+    const node = container.firstChild;
+
+    scenes.forEach((s, id) => {
+      beforeInputEvent = null;
+      compositionStartEvent = null;
+      compositionUpdateEvent = null;
+      spyOnBeforeInput = jest.fn();
+      spyOnCompositionStart = jest.fn();
+      spyOnCompositionUpdate = jest.fn();
+      s.eventSimulator.apply(null, [node, ...s.eventSimulatorArgs]);
+      env.assertions[id].run({
+        beforeInputEvent,
+        compositionStartEvent,
+        compositionUpdateEvent,
+        spyOnBeforeInput,
+        spyOnCompositionStart,
+        spyOnCompositionUpdate,
+      });
+    });
+  };
+
+  const testContentEditableComponent = async (env, scenes) => {
+    let beforeInputEvent;
+    let compositionStartEvent;
+    let compositionUpdateEvent;
+    let spyOnBeforeInput;
+    let spyOnCompositionStart;
+    let spyOnCompositionUpdate;
+    ({ReactDOMClient, act} = loadReactDOMClientAndAct(env.emulator));
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <div
+          contentEditable={true}
+          onBeforeInput={e => {
+            spyOnBeforeInput();
+            beforeInputEvent = e;
+          }}
+          onCompositionStart={e => {
+            spyOnCompositionStart();
+            compositionStartEvent = e;
+          }}
+          onCompositionUpdate={e => {
+            spyOnCompositionUpdate();
+            compositionUpdateEvent = e;
+          }}
+        />,
+      );
+    });
+
+    const node = container.firstChild;
+
+    scenes.forEach((s, id) => {
+      beforeInputEvent = null;
+      compositionStartEvent = null;
+      compositionUpdateEvent = null;
+      spyOnBeforeInput = jest.fn();
+      spyOnCompositionStart = jest.fn();
+      spyOnCompositionUpdate = jest.fn();
+      s.eventSimulator.apply(null, [node, ...s.eventSimulatorArgs]);
+      env.assertions[id].run({
+        beforeInputEvent,
+        compositionStartEvent,
+        compositionUpdateEvent,
+        spyOnBeforeInput,
+        spyOnCompositionStart,
+        spyOnCompositionUpdate,
+      });
+    });
+  };
+
+  it('should extract onBeforeInput when simulating in Webkit on input[type=text]', async () => {
+    await testInputComponent(environments[0], scenarios);
+  });
+  it('should extract onBeforeInput when simulating in Webkit on contenteditable', async () => {
+    await testContentEditableComponent(environments[0], scenarios);
+  });
+
+  it('should extract onBeforeInput when simulating in IE11 on input[type=text]', async () => {
+    await testInputComponent(environments[1], scenarios);
+  });
+  it('should extract onBeforeInput when simulating in IE11 on contenteditable', async () => {
+    await testContentEditableComponent(environments[1], scenarios);
+  });
+
+  it('should extract onBeforeInput when simulating in env with no CompositionEvent on input[type=text]', async () => {
+    await testInputComponent(environments[2], scenarios);
+  });
+
+  // in an environment using composition fallback onBeforeInput will not work
+  // as expected on a contenteditable as keydown and keyup events are translated
+  // to keypress events
+
+  it('should extract onBeforeInput when simulating in env with only CompositionEvent on input[type=text]', async () => {
+    await testInputComponent(environments[3], scenarios);
+  });
+
+  it('should extract onBeforeInput when simulating in env with only CompositionEvent on contenteditable', async () => {
+    await testContentEditableComponent(environments[3], scenarios);
+  });
+});
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
new file mode 100644
index 00000000000..497f16a2abc
--- /dev/null
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -0,0 +1,875 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let act;
+let waitForAll;
+let waitForDiscrete;
+let assertLog;
+
+const setUntrackedChecked = Object.getOwnPropertyDescriptor(
+  HTMLInputElement.prototype,
+  'checked',
+).set;
+
+const setUntrackedValue = Object.getOwnPropertyDescriptor(
+  HTMLInputElement.prototype,
+  'value',
+).set;
+
+const setUntrackedTextareaValue = Object.getOwnPropertyDescriptor(
+  HTMLTextAreaElement.prototype,
+  'value',
+).set;
+
+describe('ChangeEventPlugin', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    // TODO pull this into helper method, reduce repetition.
+    // mock the browser APIs which are used in schedule:
+    // - calling 'window.postMessage' should actually fire postmessage handlers
+    const originalAddEventListener = global.addEventListener;
+    let postMessageCallback;
+    global.addEventListener = function (eventName, callback, useCapture) {
+      if (eventName === 'message') {
+        postMessageCallback = callback;
+      } else {
+        originalAddEventListener(eventName, callback, useCapture);
+      }
+    };
+    global.postMessage = function (messageKey, targetOrigin) {
+      const postMessageEvent = {source: window, data: messageKey};
+      if (postMessageCallback) {
+        postMessageCallback(postMessageEvent);
+      }
+    };
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForDiscrete = InternalTestUtils.waitForDiscrete;
+    assertLog = InternalTestUtils.assertLog;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  // 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', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="text" onChange={cb} defaultValue="foo" />);
+    });
+
+    const node = container.firstChild;
+    node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should consider initial text value to be current (capture)', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <input type="text" onChangeCapture={cb} defaultValue="foo" />,
+      );
+    });
+
+    const node = container.firstChild;
+    node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should not invoke a change event for textarea same value', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea onChange={cb} defaultValue="initial" />);
+    });
+
+    const node = container.firstChild;
+    node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should not invoke a change event for textarea same value (capture)', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<textarea onChangeCapture={cb} defaultValue="initial" />);
+    });
+
+    const node = container.firstChild;
+    node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should consider initial checkbox checked=true to be current', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <input type="checkbox" onChange={cb} defaultChecked={true} />,
+      );
+    });
+
+    const node = container.firstChild;
+
+    // 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(node, false);
+    node.dispatchEvent(
+      new MouseEvent('click', {bubbles: true, cancelable: true}),
+    );
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should consider initial checkbox checked=false to be current', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <input type="checkbox" onChange={cb} defaultChecked={false} />,
+      );
+    });
+
+    const node = container.firstChild;
+
+    // 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(node, true);
+    node.dispatchEvent(
+      new MouseEvent('click', {bubbles: true, cancelable: true}),
+    );
+    // There should be no React change events because the value stayed the same.
+    expect(called).toBe(0);
+  });
+
+  it('should fire change for checkbox input', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="checkbox" onChange={cb} />);
+    });
+
+    const node = container.firstChild;
+
+    expect(node.checked).toBe(false);
+    node.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(node.checked).toBe(true);
+    expect(called).toBe(1);
+
+    expect(node.checked).toBe(true);
+    node.dispatchEvent(
+      new MouseEvent('click', {bubbles: true, cancelable: true}),
+    );
+    expect(node.checked).toBe(false);
+    expect(called).toBe(2);
+  });
+
+  it('should not fire change setting the value programmatically', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="text" defaultValue="foo" onChange={cb} />);
+    });
+
+    const input = container.firstChild;
+
+    // Set it programmatically.
+    input.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.
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    expect(input.value).toBe('bar');
+    // In this case we don't expect to get a React event.
+    expect(called).toBe(0);
+
+    // However, we can simulate user typing by calling the underlying setter.
+    setUntrackedValue.call(input, 'foo');
+    // Now, when the event fires, the real input value ('foo') differs from the
+    // "current" one we previously recorded ('bar').
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    expect(input.value).toBe('foo');
+    // In this case React should fire an event for it.
+    expect(called).toBe(1);
+
+    // Verify again that extra events without real changes are ignored.
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    expect(called).toBe(1);
+  });
+
+  it('should not distinguish equal string and number values', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="text" defaultValue="42" onChange={cb} />);
+    });
+
+    const input = container.firstChild;
+
+    // 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').
+    input.value = 42;
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    expect(input.value).toBe('42');
+    expect(called).toBe(0);
+  });
+
+  // See a similar input test above for a detailed description of why.
+  it('should not fire change when setting checked programmatically', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <input type="checkbox" onChange={cb} defaultChecked={false} />,
+      );
+    });
+
+    const input = container.firstChild;
+
+    // Set the value, updating the "current" value that React tracks to true.
+    input.checked = true;
+    // Under the hood, uncheck the box so that the click will "check" it again.
+    setUntrackedChecked.call(input, false);
+    input.click();
+    expect(input.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(called).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).
+    input.click();
+    expect(called).toBe(1);
+  });
+
+  it('should unmount', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input />);
+    });
+
+    const input = container.firstChild;
+
+    await act(() => {
+      root.unmount();
+    });
+  });
+
+  it('should only fire change for checked radio button once', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="radio" onChange={cb} />);
+    });
+
+    const input = container.firstChild;
+
+    setUntrackedChecked.call(input, true);
+    input.dispatchEvent(new Event('click', {bubbles: true, cancelable: true}));
+    input.dispatchEvent(new Event('click', {bubbles: true, cancelable: true}));
+    expect(called).toBe(1);
+  });
+
+  it('should track radio button cousins in a group', async () => {
+    let called1 = 0;
+    let called2 = 0;
+
+    function cb1(e) {
+      called1++;
+      expect(e.type).toBe('change');
+    }
+
+    function cb2(e) {
+      called2++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <input type="radio" name="group" onChange={cb1} />
+          <input type="radio" name="group" onChange={cb2} />
+        </div>,
+      );
+    });
+
+    const div = container.firstChild;
+    const option1 = div.childNodes[0];
+    const option2 = div.childNodes[1];
+
+    // Select first option.
+    option1.click();
+    expect(called1).toBe(1);
+    expect(called2).toBe(0);
+
+    // Select second option.
+    option2.click();
+    expect(called1).toBe(1);
+    expect(called2).toBe(1);
+
+    // Select the first option.
+    // It should receive the React change event again.
+    option1.click();
+    expect(called1).toBe(2);
+    expect(called2).toBe(1);
+  });
+
+  it('should deduplicate input value change events', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const inputTypes = ['text', 'number', 'range'];
+    while (inputTypes.length) {
+      const type = inputTypes.pop();
+      called = 0;
+      let root = ReactDOMClient.createRoot(container);
+      let ref = {current: null};
+      await act(() => {
+        root.render(<input ref={ref} type={type} onChange={cb} />);
+      });
+      let input = ref.current;
+      await act(() => {
+        // Should be ignored (no change):
+        input.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        setUntrackedValue.call(input, '42');
+        input.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        // Should be ignored (no change):
+        input.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+      });
+      expect(called).toBe(1);
+      root.unmount();
+
+      called = 0;
+      root = ReactDOMClient.createRoot(container);
+      ref = {current: null};
+      await act(() => {
+        root.render(<input ref={ref} type={type} onChange={cb} />);
+      });
+      input = ref.current;
+      await act(() => {
+        // Should be ignored (no change):
+        input.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        setUntrackedValue.call(input, '42');
+        input.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        // Should be ignored (no change):
+        input.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+      });
+      expect(called).toBe(1);
+      root.unmount();
+
+      called = 0;
+      root = ReactDOMClient.createRoot(container);
+      ref = {current: null};
+      await act(() => {
+        root.render(<input ref={ref} type={type} onChange={cb} />);
+      });
+      input = ref.current;
+      await act(() => {
+        // Should be ignored (no change):
+        input.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+        setUntrackedValue.call(input, '42');
+        input.dispatchEvent(
+          new Event('input', {bubbles: true, cancelable: true}),
+        );
+        // Should be ignored (no change):
+        input.dispatchEvent(
+          new Event('change', {bubbles: true, cancelable: true}),
+        );
+      });
+      expect(called).toBe(1);
+      root.unmount();
+    }
+  });
+
+  it('should listen for both change and input events when supported', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="range" onChange={cb} />);
+    });
+
+    const input = container.firstChild;
+
+    setUntrackedValue.call(input, 10);
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+
+    setUntrackedValue.call(input, 20);
+    input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+
+    expect(called).toBe(2);
+  });
+
+  it('should only fire events when the value changes for range inputs', async () => {
+    let called = 0;
+
+    function cb(e) {
+      called++;
+      expect(e.type).toBe('change');
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<input type="range" onChange={cb} />);
+    });
+
+    const input = container.firstChild;
+    setUntrackedValue.call(input, '40');
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+
+    setUntrackedValue.call(input, 'foo');
+    input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+    input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+
+    expect(called).toBe(2);
+  });
+
+  it('does not crash for nodes with custom value property', async () => {
+    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 div = document.createElement('div');
+      const root = ReactDOMClient.createRoot(div);
+      // Mount
+      await act(() => {
+        root.render(<input type="text" />);
+      });
+      const node = div.firstChild;
+      // Update
+      await act(() => {
+        root.render(<input type="text" />);
+      });
+
+      // Change
+      node.dispatchEvent(
+        new Event('change', {bubbles: true, cancelable: true}),
+      );
+      // Unmount
+      await act(() => {
+        root.unmount();
+      });
+    } finally {
+      document.createElement = originalCreateElement;
+    }
+  });
+
+  describe('concurrent mode', () => {
+    it('text input', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      let input;
+
+      class ControlledInput extends React.Component {
+        state = {value: 'initial'};
+        onChange = event => this.setState({value: event.target.value});
+        render() {
+          Scheduler.log(`render: ${this.state.value}`);
+          const controlledValue =
+            this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+          return (
+            <input
+              ref={el => (input = el)}
+              type="text"
+              value={controlledValue}
+              onChange={this.onChange}
+            />
+          );
+        }
+      }
+
+      // Initial mount. Test that this is async.
+      root.render(<ControlledInput />);
+      // Should not have flushed yet.
+      assertLog([]);
+      expect(input).toBe(undefined);
+      // Flush callbacks.
+      await waitForAll(['render: initial']);
+      expect(input.value).toBe('initial');
+
+      // Trigger a change event.
+      setUntrackedValue.call(input, 'changed');
+      input.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      // Change should synchronously flush
+      assertLog(['render: changed']);
+      // Value should be the controlled value, not the original one
+      expect(input.value).toBe('changed [!]');
+    });
+
+    it('checkbox input', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      let input;
+
+      class ControlledInput extends React.Component {
+        state = {checked: false};
+        onChange = event => {
+          this.setState({checked: event.target.checked});
+        };
+        render() {
+          Scheduler.log(`render: ${this.state.checked}`);
+          const controlledValue = this.props.reverse
+            ? !this.state.checked
+            : this.state.checked;
+          return (
+            <input
+              ref={el => (input = el)}
+              type="checkbox"
+              checked={controlledValue}
+              onChange={this.onChange}
+            />
+          );
+        }
+      }
+
+      // Initial mount. Test that this is async.
+      root.render(<ControlledInput reverse={false} />);
+      // Should not have flushed yet.
+      assertLog([]);
+      expect(input).toBe(undefined);
+      // Flush callbacks.
+      await waitForAll(['render: false']);
+      expect(input.checked).toBe(false);
+
+      // Trigger a change event.
+      input.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+      // Change should synchronously flush
+      assertLog(['render: true']);
+      expect(input.checked).toBe(true);
+
+      // Now let's make sure we're using the controlled value.
+      root.render(<ControlledInput reverse={true} />);
+      await waitForAll(['render: true']);
+
+      // Trigger another change event.
+      input.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+      // Change should synchronously flush
+      assertLog(['render: true']);
+      expect(input.checked).toBe(false);
+    });
+
+    it('textarea', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      let textarea;
+
+      class ControlledTextarea extends React.Component {
+        state = {value: 'initial'};
+        onChange = event => this.setState({value: event.target.value});
+        render() {
+          Scheduler.log(`render: ${this.state.value}`);
+          const controlledValue =
+            this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+          return (
+            <textarea
+              ref={el => (textarea = el)}
+              type="text"
+              value={controlledValue}
+              onChange={this.onChange}
+            />
+          );
+        }
+      }
+
+      // Initial mount. Test that this is async.
+      root.render(<ControlledTextarea />);
+      // Should not have flushed yet.
+      assertLog([]);
+      expect(textarea).toBe(undefined);
+      // Flush callbacks.
+      await waitForAll(['render: initial']);
+      expect(textarea.value).toBe('initial');
+
+      // Trigger a change event.
+      setUntrackedTextareaValue.call(textarea, 'changed');
+      textarea.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      // Change should synchronously flush
+      assertLog(['render: changed']);
+      // Value should be the controlled value, not the original one
+      expect(textarea.value).toBe('changed [!]');
+    });
+
+    it('parent of input', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      let input;
+
+      class ControlledInput extends React.Component {
+        state = {value: 'initial'};
+        onChange = event => this.setState({value: event.target.value});
+        render() {
+          Scheduler.log(`render: ${this.state.value}`);
+          const controlledValue =
+            this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+          return (
+            <div onChange={this.onChange}>
+              <input
+                ref={el => (input = el)}
+                type="text"
+                value={controlledValue}
+                onChange={() => {
+                  // Does nothing. Parent handler is responsible for updating.
+                }}
+              />
+            </div>
+          );
+        }
+      }
+
+      // Initial mount. Test that this is async.
+      root.render(<ControlledInput />);
+      // Should not have flushed yet.
+      assertLog([]);
+      expect(input).toBe(undefined);
+      // Flush callbacks.
+      await waitForAll(['render: initial']);
+      expect(input.value).toBe('initial');
+
+      // Trigger a change event.
+      setUntrackedValue.call(input, 'changed');
+      input.dispatchEvent(
+        new Event('input', {bubbles: true, cancelable: true}),
+      );
+      // Change should synchronously flush
+      assertLog(['render: changed']);
+      // Value should be the controlled value, not the original one
+      expect(input.value).toBe('changed [!]');
+    });
+
+    it('is sync for non-input events', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      let input;
+
+      class ControlledInput extends React.Component {
+        state = {value: 'initial'};
+        onChange = event => this.setState({value: event.target.value});
+        reset = () => {
+          this.setState({value: ''});
+        };
+        render() {
+          Scheduler.log(`render: ${this.state.value}`);
+          const controlledValue =
+            this.state.value === 'changed' ? 'changed [!]' : this.state.value;
+          return (
+            <input
+              ref={el => (input = el)}
+              type="text"
+              value={controlledValue}
+              onChange={this.onChange}
+              onClick={this.reset}
+            />
+          );
+        }
+      }
+
+      // Initial mount. Test that this is async.
+      root.render(<ControlledInput />);
+      // Should not have flushed yet.
+      assertLog([]);
+      expect(input).toBe(undefined);
+      // Flush callbacks.
+      await waitForAll(['render: initial']);
+      expect(input.value).toBe('initial');
+
+      // Trigger a click event
+      input.dispatchEvent(
+        new Event('click', {bubbles: true, cancelable: true}),
+      );
+
+      // Flush microtask queue.
+      await waitForDiscrete(['render: ']);
+      expect(input.value).toBe('');
+    });
+
+    it('mouse enter/leave should be user-blocking but not discrete', async () => {
+      const {useState} = React;
+
+      const root = ReactDOMClient.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(() => {
+        root.render(<Foo />);
+      });
+      expect(container.textContent).toEqual('not hovered');
+
+      await act(() => {
+        const mouseOverEvent = document.createEvent('MouseEvents');
+        mouseOverEvent.initEvent('mouseover', true, true);
+        target.current.dispatchEvent(mouseOverEvent);
+
+        // Flush discrete updates
+        ReactDOM.flushSync();
+        // Since mouse enter/leave is not discrete, should not have updated yet
+        expect(container.textContent).toEqual('not hovered');
+      });
+      expect(container.textContent).toEqual('hovered');
+    });
+  });
+});
diff --git a/packages/react-dom/src/events/plugins/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/EnterLeaveEventPlugin-test.js
new file mode 100644
index 00000000000..d0b4d1cbd09
--- /dev/null
+++ b/packages/react-dom/src/events/plugins/__tests__/EnterLeaveEventPlugin-test.js
@@ -0,0 +1,331 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('EnterLeaveEventPlugin', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should set onMouseLeave relatedTarget properly in iframe', async () => {
+    const iframe = document.createElement('iframe');
+    container.appendChild(iframe);
+    const iframeDocument = iframe.contentDocument;
+    iframeDocument.write(
+      '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
+    );
+    iframeDocument.close();
+
+    const leaveEvents = [];
+    const root = ReactDOMClient.createRoot(
+      iframeDocument.body.getElementsByTagName('div')[0],
+    );
+    await act(() => {
+      root.render(
+        <div
+          onMouseLeave={e => {
+            e.persist();
+            leaveEvents.push(e);
+          }}
+        />,
+      );
+    });
+    const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;
+    await act(() => {
+      node.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: iframe.contentWindow,
+        }),
+      );
+    });
+
+    expect(leaveEvents.length).toBe(1);
+    expect(leaveEvents[0].target).toBe(node);
+    expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);
+  });
+
+  it('should set onMouseEnter relatedTarget properly in iframe', async () => {
+    const iframe = document.createElement('iframe');
+    container.appendChild(iframe);
+    const iframeDocument = iframe.contentDocument;
+    iframeDocument.write(
+      '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
+    );
+    iframeDocument.close();
+
+    const enterEvents = [];
+    const root = ReactDOMClient.createRoot(
+      iframeDocument.body.getElementsByTagName('div')[0],
+    );
+    await act(() => {
+      root.render(
+        <div
+          onMouseEnter={e => {
+            e.persist();
+            enterEvents.push(e);
+          }}
+        />,
+      );
+    });
+    const node = iframeDocument.body.getElementsByTagName('div')[0].firstChild;
+    await act(() => {
+      node.dispatchEvent(
+        new MouseEvent('mouseover', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: null,
+        }),
+      );
+    });
+
+    expect(enterEvents.length).toBe(1);
+    expect(enterEvents[0].target).toBe(node);
+    expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow);
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/10906.
+  it('should find the common parent after updates', async () => {
+    let parentEnterCalls = 0;
+    let childEnterCalls = 0;
+    let parent = null;
+
+    class Parent extends React.Component {
+      render() {
+        return (
+          <div
+            onMouseEnter={() => parentEnterCalls++}
+            ref={node => (parent = node)}>
+            {this.props.showChild && (
+              <div onMouseEnter={() => childEnterCalls++} />
+            )}
+          </div>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent />);
+    });
+    await act(() => {
+      root.render(<Parent showChild={true} />);
+    });
+
+    // Enter from parent into the child.
+    await act(() => {
+      parent.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: parent.firstChild,
+        }),
+      );
+    });
+
+    // Entering a child should fire on the child, not on the parent.
+    expect(childEnterCalls).toBe(1);
+    expect(parentEnterCalls).toBe(0);
+  });
+
+  // Test for https://github.com/facebook/react/issues/16763.
+  // @gate !disableLegacyMode
+  it('should call mouseEnter once from sibling rendered inside a rendered component in legacy roots', async () => {
+    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,
+          }),
+        );
+      }
+
+      render() {
+        return (
+          <React.Fragment>
+            <div ref={this.firstEl} onMouseEnter={mockFn} />
+            <div ref={this.siblingEl} />
+          </React.Fragment>
+        );
+      }
+    }
+
+    await act(() => {
+      ReactDOM.render(<Parent />, container);
+    });
+    expect(mockFn.mock.calls.length).toBe(1);
+  });
+
+  // @gate !disableLegacyMode
+  it('should call mouseEnter when pressing a non tracked React node in legacy root', async () => {
+    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,
+          }),
+        );
+      }
+
+      render() {
+        return (
+          <div ref={this.divRef}>
+            <div ref={this.siblingEl} onMouseEnter={mockFn} />
+          </div>
+        );
+      }
+    }
+
+    await act(() => {
+      ReactDOM.render(<Parent />, container);
+    });
+    expect(mockFn.mock.calls.length).toBe(1);
+  });
+
+  it('should work with portals outside of the root that has onMouseLeave', async () => {
+    const divRef = React.createRef();
+    const onMouseLeave = jest.fn();
+
+    function Component() {
+      return (
+        <div onMouseLeave={onMouseLeave}>
+          {ReactDOM.createPortal(<div ref={divRef} />, document.body)}
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    // Leave from the portal div
+    await act(() => {
+      divRef.current.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          cancelable: true,
+          relatedTarget: document.body,
+        }),
+      );
+    });
+
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+  });
+
+  it('should work with portals that have onMouseEnter outside of the root', async () => {
+    const divRef = React.createRef();
+    const otherDivRef = React.createRef();
+    const onMouseEnter = jest.fn();
+
+    function Component() {
+      return (
+        <div ref={divRef}>
+          {ReactDOM.createPortal(
+            <div ref={otherDivRef} onMouseEnter={onMouseEnter} />,
+            document.body,
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    // Leave from the portal div
+    divRef.current.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: otherDivRef.current,
+      }),
+    );
+
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js
new file mode 100644
index 00000000000..6f7943328af
--- /dev/null
+++ b/packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('SelectEventPlugin', () => {
+  let container;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  // See https://github.com/facebook/react/pull/3639 for details.
+  it('does not get confused when dependent events are registered independently', async () => {
+    const select = jest.fn();
+    const onSelect = event => {
+      expect(typeof event).toBe('object');
+      expect(event.type).toBe('select');
+      expect(event.target).toBe(node);
+      select(event.currentTarget);
+    };
+
+    const root = ReactDOMClient.createRoot(container);
+    const node = await (async function () {
+      await act(() => {
+        // Pass `onMouseDown` so React registers a top-level listener.
+        root.render(<input type="text" onMouseDown={function () {}} />);
+      });
+      return container.firstChild;
+    })();
+
+    // Trigger `mousedown` and `mouseup`. Note that
+    // React is not currently listening to `mouseup`.
+    node.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    node.dispatchEvent(
+      new MouseEvent('mouseup', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    await act(() => {
+      // Now subscribe to `onSelect`
+      root.render(<input type="text" onSelect={onSelect} />);
+    });
+    node.focus();
+
+    // This triggers a `select` event in our polyfill.
+    node.dispatchEvent(
+      new KeyboardEvent('keydown', {bubbles: true, cancelable: true}),
+    );
+
+    // Verify that it doesn't get "stuck" waiting for
+    // a `mouseup` event that it has "missed" because
+    // a top-level listener didn't exist yet.
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it('should fire `onSelect` when a listener is present', async () => {
+    const select = jest.fn();
+    const onSelect = event => {
+      expect(typeof event).toBe('object');
+      expect(event.type).toBe('select');
+      expect(event.target).toBe(node);
+      select(event.currentTarget);
+    };
+
+    const node = await (async function () {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input type="text" onSelect={onSelect} />);
+      });
+      return container.firstChild;
+    })();
+
+    node.focus();
+
+    let nativeEvent = new MouseEvent('focus', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(0);
+
+    nativeEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(0);
+
+    nativeEvent = new MouseEvent('mouseup', {bubbles: true, cancelable: true});
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it('should fire `onSelectCapture` when a listener is present', async () => {
+    const select = jest.fn();
+    const onSelectCapture = event => {
+      expect(typeof event).toBe('object');
+      expect(event.type).toBe('select');
+      expect(event.target).toBe(node);
+      select(event.currentTarget);
+    };
+
+    const node = await (async function () {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input type="text" onSelectCapture={onSelectCapture} />);
+      });
+      return container.firstChild;
+    })();
+
+    node.focus();
+
+    let nativeEvent = new MouseEvent('focus', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(0);
+
+    nativeEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(0);
+
+    nativeEvent = new MouseEvent('mouseup', {bubbles: true, cancelable: true});
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/11379
+  it('should not wait for `mouseup` after receiving `dragend`', async () => {
+    const select = jest.fn();
+    const onSelect = event => {
+      expect(typeof event).toBe('object');
+      expect(event.type).toBe('select');
+      expect(event.target).toBe(node);
+      select(event.currentTarget);
+    };
+
+    const node = await (async function () {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input type="text" onSelect={onSelect} />);
+      });
+      return container.firstChild;
+    })();
+
+    node.focus();
+
+    let nativeEvent = new MouseEvent('focus', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(0);
+
+    nativeEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(0);
+
+    nativeEvent = new MouseEvent('dragend', {bubbles: true, cancelable: true});
+    node.dispatchEvent(nativeEvent);
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle selectionchange events', async function () {
+    const onSelect = jest.fn();
+
+    const node = await (async function () {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<input type="text" onSelect={onSelect} />);
+      });
+      return container.firstChild;
+    })();
+
+    node.focus();
+
+    // Make sure the event was not called before we emit the selection change event
+    expect(onSelect).toHaveBeenCalledTimes(0);
+
+    // This is dispatched e.g. when using CMD+a on macOS
+    document.dispatchEvent(
+      new Event('selectionchange', {bubbles: false, cancelable: false}),
+    );
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
new file mode 100644
index 00000000000..062762e776a
--- /dev/null
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -0,0 +1,594 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// polyfill missing JSDOM support
+class ToggleEvent extends Event {
+  constructor(type, eventInit) {
+    super(type, eventInit);
+    this.newState = eventInit.newState;
+    this.oldState = eventInit.oldState;
+  }
+}
+
+describe('SimpleEventPlugin', function () {
+  let React;
+  let ReactDOMClient;
+  let Scheduler;
+  let act;
+
+  let onClick;
+  let container;
+  let assertLog;
+  let waitForAll;
+
+  async function expectClickThru(element) {
+    await act(() => {
+      element.click();
+    });
+    expect(onClick).toHaveBeenCalledTimes(1);
+  }
+
+  function expectNoClickThru(element) {
+    element.click();
+    expect(onClick).toHaveBeenCalledTimes(0);
+  }
+
+  async function mounted(element) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(element);
+    });
+    element = container.firstChild;
+    return element;
+  }
+
+  beforeEach(function () {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForAll = InternalTestUtils.waitForAll;
+    act = InternalTestUtils.act;
+
+    onClick = jest.fn();
+  });
+
+  afterEach(() => {
+    if (container && document.body.contains(container)) {
+      document.body.removeChild(container);
+      container = null;
+    }
+  });
+
+  it('A non-interactive tags click when disabled', async function () {
+    const element = <div onClick={onClick} />;
+    await expectClickThru(await mounted(element));
+  });
+
+  it('A non-interactive tags clicks bubble when disabled', async function () {
+    const element = await mounted(
+      <div onClick={onClick}>
+        <div />
+      </div>,
+    );
+    const child = element.firstChild;
+    child.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not register a click when clicking a child of a disabled element', async function () {
+    const element = await mounted(
+      <button onClick={onClick} disabled={true}>
+        <span />
+      </button>,
+    );
+    const child = element.querySelector('span');
+
+    child.click();
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+
+  it('triggers click events for children of disabled elements', async function () {
+    const element = await mounted(
+      <button disabled={true}>
+        <span onClick={onClick} />
+      </button>,
+    );
+    const child = element.querySelector('span');
+
+    child.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers parent captured click events when target is a child of a disabled elements', async function () {
+    const element = await mounted(
+      <div onClickCapture={onClick}>
+        <button disabled={true}>
+          <span />
+        </button>
+      </div>,
+    );
+    const child = element.querySelector('span');
+
+    child.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers captured click events for children of disabled elements', async function () {
+    const element = await mounted(
+      <button disabled={true}>
+        <span onClickCapture={onClick} />
+      </button>,
+    );
+    const child = element.querySelector('span');
+
+    child.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  describe.each(['button', 'input', 'select', 'textarea'])(
+    '%s',
+    function (tagName) {
+      it('should forward clicks when it starts out not disabled', async () => {
+        const element = React.createElement(tagName, {
+          onClick: onClick,
+        });
+
+        await expectClickThru(await mounted(element));
+      });
+
+      it('should not forward clicks when it starts out disabled', async () => {
+        const element = React.createElement(tagName, {
+          onClick: onClick,
+          disabled: true,
+        });
+
+        await expectNoClickThru(await mounted(element));
+      });
+
+      it('should forward clicks when it becomes not disabled', async () => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            React.createElement(tagName, {onClick: onClick, disabled: true}),
+          );
+        });
+        await act(() => {
+          root.render(React.createElement(tagName, {onClick: onClick}));
+        });
+        const element = container.firstChild;
+        await expectClickThru(element);
+      });
+
+      it('should not forward clicks when it becomes disabled', async () => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(React.createElement(tagName, {onClick: onClick}));
+        });
+        await act(() => {
+          root.render(
+            React.createElement(tagName, {onClick: onClick, disabled: true}),
+          );
+        });
+        const element = container.firstChild;
+        expectNoClickThru(element);
+      });
+
+      it('should work correctly if the listener is changed', async () => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            React.createElement(tagName, {onClick: onClick, disabled: true}),
+          );
+        });
+        await act(() => {
+          root.render(
+            React.createElement(tagName, {onClick: onClick, disabled: false}),
+          );
+        });
+        const element = container.firstChild;
+        await expectClickThru(element);
+      });
+    },
+  );
+
+  it('batches updates that occur as a result of a nested event dispatch', async () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    let button;
+    class Button extends React.Component {
+      state = {count: 0};
+      increment = () =>
+        this.setState(state => ({
+          count: state.count + 1,
+        }));
+      componentDidUpdate() {
+        Scheduler.log(`didUpdate - Count: ${this.state.count}`);
+      }
+      render() {
+        return (
+          <button
+            ref={el => (button = el)}
+            onFocus={this.increment}
+            onClick={() => {
+              // The focus call synchronously dispatches a nested event. All of
+              // the updates in this handler should be batched together.
+              this.increment();
+              button.focus();
+              this.increment();
+            }}>
+            Count: {this.state.count}
+          </button>
+        );
+      }
+    }
+
+    function click() {
+      button.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, cancelable: true}),
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Button />);
+    });
+
+    expect(button.textContent).toEqual('Count: 0');
+    assertLog([]);
+
+    await act(() => {
+      click();
+    });
+    // There should be exactly one update.
+    assertLog(['didUpdate - Count: 3']);
+    expect(button.textContent).toEqual('Count: 3');
+  });
+
+  describe('interactive events, in concurrent mode', () => {
+    beforeEach(() => {
+      jest.resetModules();
+
+      React = require('react');
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler');
+
+      const InternalTestUtils = require('internal-test-utils');
+      assertLog = InternalTestUtils.assertLog;
+      waitForAll = InternalTestUtils.waitForAll;
+
+      act = require('internal-test-utils').act;
+    });
+
+    it('flushes pending interactive work before exiting event handler', async () => {
+      container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      document.body.appendChild(container);
+
+      let button;
+      class Button extends React.Component {
+        state = {disabled: false};
+        onClick = () => {
+          // Perform some side-effect
+          Scheduler.log('Side-effect');
+          // Disable the button
+          this.setState({disabled: true});
+        };
+        render() {
+          Scheduler.log(
+            `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
+      assertLog([]);
+      expect(button).toBe(undefined);
+      // Flush async work
+      await waitForAll(['render button: enabled']);
+
+      function click() {
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        });
+        Object.defineProperty(event, 'timeStamp', {
+          value: 0,
+        });
+        button.dispatchEvent(event);
+      }
+
+      // Click the button to trigger the side-effect
+      await act(() => click());
+      assertLog([
+        // The handler fired
+        'Side-effect',
+        // The component re-rendered synchronously, even in concurrent mode.
+        'render button: disabled',
+      ]);
+
+      // Click the button again
+      click();
+      assertLog([
+        // The event handler was removed from the button, so there's no effect.
+      ]);
+
+      // The handler should not fire again no matter how many times we
+      // click the handler.
+      click();
+      click();
+      click();
+      click();
+      click();
+      await waitForAll([]);
+    });
+
+    // NOTE: This test was written for the old behavior of discrete updates,
+    // where they would be async, but flushed early if another discrete update
+    // was dispatched.
+    it('end result of many interactive updates is deterministic', async () => {
+      container = document.createElement('div');
+      const root = ReactDOMClient.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>
+          );
+        }
+      }
+
+      // Initial mount
+      root.render(<Button />);
+      // Should not have flushed yet because it's async
+      expect(button).toBe(undefined);
+      // Flush async work
+      await waitForAll([]);
+      expect(button.textContent).toEqual('Count: 0');
+
+      function click() {
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        });
+        Object.defineProperty(event, 'timeStamp', {
+          value: 0,
+        });
+        button.dispatchEvent(event);
+      }
+
+      // Click the button a single time
+      await act(() => click());
+      // The counter should update synchronously, even in concurrent mode.
+      expect(button.textContent).toEqual('Count: 1');
+
+      // Click the button many more times
+      await act(() => click());
+      await act(() => click());
+      await act(() => click());
+      await act(() => click());
+      await act(() => click());
+      await act(() => click());
+
+      // Flush the remaining work
+      await waitForAll([]);
+      // The counter should equal the total number of clicks
+      expect(button.textContent).toEqual('Count: 7');
+    });
+  });
+
+  describe('iOS bubbling click fix', function () {
+    // See http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+
+    it('does not add a local click to interactive elements', async function () {
+      container = document.createElement('div');
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<button onClick={onClick} />);
+      });
+
+      const node = container.firstChild;
+
+      node.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick).toHaveBeenCalledTimes(0);
+    });
+
+    it('adds a local click listener to non-interactive elements', async function () {
+      container = document.createElement('div');
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div onClick={onClick} />);
+      });
+
+      const node = container.firstChild;
+
+      await act(() => {
+        node.dispatchEvent(new MouseEvent('click'));
+      });
+
+      expect(onClick).toHaveBeenCalledTimes(0);
+    });
+
+    it('registers passive handlers for events affected by the intervention', async () => {
+      container = document.createElement('div');
+
+      const passiveEvents = [];
+      const nativeAddEventListener = container.addEventListener;
+      container.addEventListener = function (type, fn, options) {
+        if (options !== null && typeof options === 'object') {
+          if (options.passive) {
+            passiveEvents.push(type);
+          }
+        }
+        return nativeAddEventListener.apply(this, arguments);
+      };
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<div />);
+      });
+
+      expect(passiveEvents).toEqual([
+        'touchstart',
+        'touchstart',
+        'touchmove',
+        'touchmove',
+        'wheel',
+        'wheel',
+      ]);
+    });
+
+    it('dispatches synthetic toggle events when the Popover API is used', async () => {
+      container = document.createElement('div');
+
+      const onToggle = jest.fn();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <>
+            <button popoverTarget="popover">Toggle popover</button>
+            <div id="popover" popover="" onToggle={onToggle}>
+              popover content
+            </div>
+          </>,
+        );
+      });
+
+      const target = container.querySelector('#popover');
+      target.dispatchEvent(
+        new ToggleEvent('toggle', {
+          bubbles: false,
+          cancelable: true,
+          oldState: 'closed',
+          newState: 'open',
+        }),
+      );
+
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      let event = onToggle.mock.calls[0][0];
+      expect(event).toEqual(
+        expect.objectContaining({
+          oldState: 'closed',
+          newState: 'open',
+        }),
+      );
+
+      target.dispatchEvent(
+        new ToggleEvent('toggle', {
+          bubbles: false,
+          cancelable: true,
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+
+      expect(onToggle).toHaveBeenCalledTimes(2);
+      event = onToggle.mock.calls[1][0];
+      expect(event).toEqual(
+        expect.objectContaining({
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+    });
+
+    it('dispatches synthetic toggle events when <details> is used', async () => {
+      // This test just replays browser behavior.
+      // The real test would be if browsers dispatch ToggleEvent on <details>.
+      // This case only exists because MDN claims <details> doesn't receive ToggleEvent.
+      // However, Chrome dispatches ToggleEvent on <details> and the spec confirms that behavior: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
+
+      container = document.createElement('div');
+
+      const onToggle = jest.fn();
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <details id="details" onToggle={onToggle}>
+            <summary>Summary</summary>
+            Details
+          </details>,
+        );
+      });
+
+      const target = container.querySelector('#details');
+      target.dispatchEvent(
+        new ToggleEvent('toggle', {
+          bubbles: false,
+          cancelable: true,
+          oldState: 'closed',
+          newState: 'open',
+        }),
+      );
+
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      let event = onToggle.mock.calls[0][0];
+      expect(event).toEqual(
+        expect.objectContaining({
+          oldState: 'closed',
+          newState: 'open',
+        }),
+      );
+
+      target.dispatchEvent(
+        new ToggleEvent('toggle', {
+          bubbles: false,
+          cancelable: true,
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+
+      expect(onToggle).toHaveBeenCalledTimes(2);
+      event = onToggle.mock.calls[1][0];
+      expect(event).toEqual(
+        expect.objectContaining({
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+    });
+  });
+});
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
new file mode 100644
index 00000000000..75c0768b324
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -0,0 +1,233 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {PostponedState, ErrorInfo} from 'react-server/src/ReactFizzServer';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  resumeRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  nonce?: NonceOption,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  formState?: ReactFormState<any, any> | null,
+  onHeaders?: (headers: Headers) => void,
+  maxHeadersLength?: number,
+};
+
+type ResumeOptions = {
+  nonce?: NonceOption,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+};
+
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function resume(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: ResumeOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+    const request = resumeRequest(
+      children,
+      postponedState,
+      resumeRenderState(
+        postponedState.resumableState,
+        options ? options.nonce : undefined,
+      ),
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {renderToReadableStream, resume, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBun.js b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
new file mode 100644
index 00000000000..90d6ccdad2e
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+import type {ErrorInfo} from 'react-server/src/ReactFizzServer';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  nonce?:
+    | string
+    | {
+        script?: string,
+        style?: string,
+      },
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  formState?: ReactFormState<any, any> | null,
+  onHeaders?: (headers: Headers) => void,
+  maxHeadersLength?: number,
+};
+
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'direct',
+          pull: (controller): ?Promise<void> => {
+            // $FlowIgnore
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 2048},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {renderToReadableStream, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
new file mode 100644
index 00000000000..75c0768b324
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
@@ -0,0 +1,233 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {PostponedState, ErrorInfo} from 'react-server/src/ReactFizzServer';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  resumeRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  nonce?: NonceOption,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  formState?: ReactFormState<any, any> | null,
+  onHeaders?: (headers: Headers) => void,
+  maxHeadersLength?: number,
+};
+
+type ResumeOptions = {
+  nonce?: NonceOption,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+};
+
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function resume(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: ResumeOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+    const request = resumeRequest(
+      children,
+      postponedState,
+      resumeRenderState(
+        postponedState.resumableState,
+        options ? options.nonce : undefined,
+      ),
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {renderToReadableStream, resume, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
new file mode 100644
index 00000000000..c0a3cf1096e
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -0,0 +1,443 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  PostponedState,
+  ErrorInfo,
+} from 'react-server/src/ReactFizzServer';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {Writable} from 'stream';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  resumeRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+  prepareForStartFlowingIfBeforeAllReady,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {textEncoder} from 'react-server/src/ReactServerStreamConfigNode';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+function createDrainHandler(destination: Destination, request: Request) {
+  return () => startFlowing(request, destination);
+}
+
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    // eslint-disable-next-line react-internal/prod-error-codes
+    abort(request, new Error(reason));
+  };
+}
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  nonce?: NonceOption,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  onShellReady?: () => void,
+  onShellError?: (error: mixed) => void,
+  onAllReady?: () => void,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  formState?: ReactFormState<any, any> | null,
+  onHeaders?: (headers: HeadersDescriptor) => void,
+  maxHeadersLength?: number,
+};
+
+type ResumeOptions = {
+  nonce?: NonceOption,
+  onShellReady?: () => void,
+  onShellError?: (error: mixed) => void,
+  onAllReady?: () => void,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+};
+
+type PipeableStream = {
+  // Cancel any pending I/O and put anything remaining into
+  // client rendered mode.
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+function createRequestImpl(children: ReactNodeList, options: void | Options) {
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    options ? options.unstable_externalRuntimeSrc : undefined,
+    options ? options.bootstrapScriptContent : undefined,
+    options ? options.bootstrapScripts : undefined,
+    options ? options.bootstrapModules : undefined,
+  );
+  return createRequest(
+    children,
+    resumableState,
+    createRenderState(
+      resumableState,
+      options ? options.nonce : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.importMap : undefined,
+      options ? options.onHeaders : undefined,
+      options ? options.maxHeadersLength : undefined,
+    ),
+    createRootFormatContext(options ? options.namespaceURI : undefined),
+    options ? options.progressiveChunkSize : undefined,
+    options ? options.onError : undefined,
+    options ? options.onAllReady : undefined,
+    options ? options.onShellReady : undefined,
+    options ? options.onShellError : undefined,
+    undefined,
+    options ? options.formState : undefined,
+  );
+}
+
+function renderToPipeableStream(
+  children: ReactNodeList,
+  options?: Options,
+): PipeableStream {
+  const request = createRequestImpl(children, options);
+  let hasStartedFlowing = false;
+  startWork(request);
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      prepareForStartFlowingIfBeforeAllReady(request);
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      destination.on(
+        'close',
+        createCancelHandler(request, 'The destination stream closed early.'),
+      );
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+function createFakeWritableFromReadableStreamController(
+  controller: ReadableStreamController,
+): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      if (typeof chunk === 'string') {
+        chunk = textEncoder.encode(chunk);
+      }
+      controller.enqueue(chunk);
+      // in web streams there is no backpressure so we can alwas write more
+      return true;
+    },
+    end() {
+      controller.close();
+    },
+    destroy(error) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof controller.error === 'function') {
+        // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+        controller.error(error);
+      } else {
+        controller.close();
+      }
+    },
+  }: any);
+}
+
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
+type WebStreamsOptions = Omit<
+  Options,
+  'onShellReady' | 'onShellError' | 'onAllReady' | 'onHeaders',
+> & {signal: AbortSignal, onHeaders?: (headers: Headers) => void};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: WebStreamsOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      let writable: Writable;
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        options ? options.nonce : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+      options ? options.formState : undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function resumeRequestImpl(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options: void | ResumeOptions,
+) {
+  return resumeRequest(
+    children,
+    postponedState,
+    resumeRenderState(
+      postponedState.resumableState,
+      options ? options.nonce : undefined,
+    ),
+    options ? options.onError : undefined,
+    options ? options.onAllReady : undefined,
+    options ? options.onShellReady : undefined,
+    options ? options.onShellError : undefined,
+    undefined,
+  );
+}
+
+function resumeToPipeableStream(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: ResumeOptions,
+): PipeableStream {
+  const request = resumeRequestImpl(children, postponedState, options);
+  let hasStartedFlowing = false;
+  startWork(request);
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      destination.on(
+        'close',
+        createCancelHandler(request, 'The destination stream closed early.'),
+      );
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+type WebStreamsResumeOptions = Omit<
+  Options,
+  'onShellReady' | 'onShellError' | 'onAllReady',
+> & {signal: AbortSignal};
+
+function resume(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: WebStreamsResumeOptions,
+): Promise<ReactDOMServerReadableStream> {
+  return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onAllReady;
+    const allReady = new Promise<void>((res, rej) => {
+      onAllReady = res;
+      onFatalError = rej;
+    });
+
+    function onShellReady() {
+      let writable: Writable;
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
+      resolve(stream);
+    }
+    function onShellError(error: mixed) {
+      // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
+      // However, `allReady` will be rejected by `onFatalError` as well.
+      // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
+      allReady.catch(() => {});
+      reject(error);
+    }
+    const request = resumeRequest(
+      children,
+      postponedState,
+      resumeRenderState(
+        postponedState.resumableState,
+        options ? options.nonce : undefined,
+      ),
+      options ? options.onError : undefined,
+      onAllReady,
+      onShellReady,
+      onShellError,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {
+  renderToPipeableStream,
+  renderToReadableStream,
+  resumeToPipeableStream,
+  resume,
+  ReactVersion as version,
+};
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
new file mode 100644
index 00000000000..ba0e24c1878
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {PostponedState, ErrorInfo} from 'react-server/src/ReactFizzServer';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createPrerenderRequest,
+  resumeAndPrerenderRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+  getPostponedState,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  onHeaders?: (headers: Headers) => void,
+  maxHeadersLength?: number,
+};
+
+type StaticResult = {
+  postponed: null | PostponedState,
+  prelude: ReadableStream,
+};
+
+function prerender(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result: StaticResult = enableHalt
+        ? {
+            postponed: getPostponedState(request),
+            prelude: stream,
+          }
+        : ({
+            prelude: stream,
+          }: any);
+      resolve(result);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+
+    const resources = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createPrerenderRequest(
+      children,
+      resources,
+      createRenderState(
+        resources,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+type ResumeOptions = {
+  nonce?: NonceOption,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+};
+
+function resumeAndPrerender(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: Omit<ResumeOptions, 'nonce'>,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result = {
+        postponed: getPostponedState(request),
+        prelude: stream,
+      };
+      resolve(result);
+    }
+
+    const request = resumeAndPrerenderRequest(
+      children,
+      postponedState,
+      resumeRenderState(postponedState.resumableState, undefined),
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {prerender, resumeAndPrerender, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
new file mode 100644
index 00000000000..785a8b2f2a4
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {PostponedState, ErrorInfo} from 'react-server/src/ReactFizzServer';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createPrerenderRequest,
+  resumeAndPrerenderRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+  getPostponedState,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  onHeaders?: (headers: Headers) => void,
+  maxHeadersLength?: number,
+};
+
+type StaticResult = {
+  postponed: null | PostponedState,
+  prelude: ReadableStream,
+};
+
+function prerender(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result: StaticResult = enableHalt
+        ? {
+            postponed: getPostponedState(request),
+            prelude: stream,
+          }
+        : ({
+            prelude: stream,
+          }: any);
+      resolve(result);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+    const resources = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createPrerenderRequest(
+      children,
+      resources,
+      createRenderState(
+        resources,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+type ResumeOptions = {
+  nonce?: NonceOption,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+};
+
+function resumeAndPrerender(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: Omit<ResumeOptions, 'nonce'>,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result = {
+        postponed: getPostponedState(request),
+        prelude: stream,
+      };
+      resolve(result);
+    }
+
+    const request = resumeAndPrerenderRequest(
+      children,
+      postponedState,
+      resumeRenderState(postponedState.resumableState, undefined),
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {prerender, resumeAndPrerender, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
new file mode 100644
index 00000000000..60c602cc2aa
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -0,0 +1,403 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  BootstrapScriptDescriptor,
+  HeadersDescriptor,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+import type {PostponedState, ErrorInfo} from 'react-server/src/ReactFizzServer';
+import type {ImportMap} from '../shared/ReactDOMTypes';
+
+import {Writable, Readable} from 'stream';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createPrerenderRequest,
+  resumeAndPrerenderRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+  getPostponedState,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  resumeRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
+import {textEncoder} from 'react-server/src/ReactServerStreamConfigNode';
+
+import {ensureCorrectIsomorphicReactVersion} from '../shared/ensureCorrectIsomorphicReactVersion';
+ensureCorrectIsomorphicReactVersion();
+
+type NonceOption =
+  | string
+  | {
+      script?: string,
+      style?: string,
+    };
+
+type Options = {
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+  importMap?: ImportMap,
+  onHeaders?: (headers: HeadersDescriptor) => void,
+  maxHeadersLength?: number,
+};
+
+type StaticResult = {
+  postponed: null | PostponedState,
+  prelude: Readable,
+};
+
+function createFakeWritableFromReadableStreamController(
+  controller: ReadableStreamController,
+): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      if (typeof chunk === 'string') {
+        chunk = textEncoder.encode(chunk);
+      }
+      controller.enqueue(chunk);
+      // in web streams there is no backpressure so we can alwas write more
+      return true;
+    },
+    end() {
+      controller.close();
+    },
+    destroy(error) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof controller.error === 'function') {
+        // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+        controller.error(error);
+      } else {
+        controller.close();
+      }
+    },
+  }: any);
+}
+
+function createFakeWritableFromReadable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+function prerenderToNodeStream(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritableFromReadable(readable);
+
+      const result: StaticResult = enableHalt
+        ? {
+            postponed: getPostponedState(request),
+            prelude: readable,
+          }
+        : ({
+            prelude: readable,
+          }: any);
+      resolve(result);
+    }
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createPrerenderRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        options ? options.onHeaders : undefined,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function prerender(
+  children: ReactNodeList,
+  options?: Omit<Options, 'onHeaders'> & {
+    onHeaders?: (headers: Headers) => void,
+  },
+): Promise<{
+  postponed: null | PostponedState,
+  prelude: ReadableStream,
+}> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      let writable: Writable;
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result = enableHalt
+        ? {
+            postponed: getPostponedState(request),
+            prelude: stream,
+          }
+        : ({
+            prelude: stream,
+          }: any);
+      resolve(result);
+    }
+
+    const onHeaders = options ? options.onHeaders : undefined;
+    let onHeadersImpl;
+    if (onHeaders) {
+      onHeadersImpl = (headersDescriptor: HeadersDescriptor) => {
+        onHeaders(new Headers(headersDescriptor));
+      };
+    }
+    const resources = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    );
+    const request = createPrerenderRequest(
+      children,
+      resources,
+      createRenderState(
+        resources,
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.unstable_externalRuntimeSrc : undefined,
+        options ? options.importMap : undefined,
+        onHeadersImpl,
+        options ? options.maxHeadersLength : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+type ResumeOptions = {
+  nonce?: NonceOption,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+};
+
+function resumeAndPrerenderToNodeStream(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: Omit<ResumeOptions, 'nonce'>,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritableFromReadable(readable);
+
+      const result = {
+        postponed: getPostponedState(request),
+        prelude: readable,
+      };
+      resolve(result);
+    }
+    const request = resumeAndPrerenderRequest(
+      children,
+      postponedState,
+      resumeRenderState(postponedState.resumableState, undefined),
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function resumeAndPrerender(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  options?: Omit<ResumeOptions, 'nonce'>,
+): Promise<{
+  postponed: null | PostponedState,
+  prelude: ReadableStream,
+}> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      let writable: Writable;
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result = {
+        postponed: getPostponedState(request),
+        prelude: stream,
+      };
+      resolve(result);
+    }
+
+    const request = resumeAndPrerenderRequest(
+      children,
+      postponedState,
+      resumeRenderState(postponedState.resumableState, undefined),
+      options ? options.onError : undefined,
+      onAllReady,
+      undefined,
+      undefined,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export {
+  prerender,
+  prerenderToNodeStream,
+  resumeAndPrerender,
+  resumeAndPrerenderToNodeStream,
+  ReactVersion as version,
+};
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
new file mode 100644
index 00000000000..43bf22bddbd
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import {version, renderToStringImpl} from './ReactDOMLegacyServerImpl';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+function renderToString(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(
+    children,
+    options,
+    false,
+    'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server',
+  );
+}
+
+function renderToStaticMarkup(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(
+    children,
+    options,
+    true,
+    'The server used "renderToStaticMarkup" which does not support Suspense. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server',
+  );
+}
+
+export {renderToString, renderToStaticMarkup, version};
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
new file mode 100644
index 00000000000..0dfc0f34d60
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactVersion from 'shared/ReactVersion';
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  createRootFormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+function onError() {
+  // Non-fatal errors are ignored.
+}
+
+function renderToStringImpl(
+  children: ReactNodeList,
+  options: void | ServerOptions,
+  generateStaticMarkup: boolean,
+  abortReason: string,
+): string {
+  let didFatal = false;
+  let fatalError = null;
+  let result = '';
+  const destination = {
+    // $FlowFixMe[missing-local-annot]
+    push(chunk) {
+      if (chunk !== null) {
+        result += chunk;
+      }
+      return true;
+    },
+    // $FlowFixMe[missing-local-annot]
+    destroy(error) {
+      didFatal = true;
+      fatalError = error;
+    },
+  };
+
+  let readyToStream = false;
+  function onShellReady() {
+    readyToStream = true;
+  }
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    undefined,
+  );
+  const request = createRequest(
+    children,
+    resumableState,
+    createRenderState(resumableState, generateStaticMarkup),
+    createRootFormatContext(),
+    Infinity,
+    onError,
+    undefined,
+    onShellReady,
+    undefined,
+    undefined,
+    undefined,
+  );
+  startWork(request);
+  // If anything suspended and is still pending, we'll abort it before writing.
+  // That way we write only client-rendered boundaries from the start.
+  abort(request, abortReason);
+  startFlowing(request, destination);
+  if (didFatal && fatalError !== abortReason) {
+    throw fatalError;
+  }
+
+  if (!readyToStream) {
+    // Note: This error message is the one we use on the client. It doesn't
+    // really make sense here. But this is the legacy server renderer, anyway.
+    // We're going to delete it soon.
+    throw new Error(
+      'A component suspended while responding to synchronous input. This ' +
+        'will cause the UI to be replaced with a loading indicator. To fix, ' +
+        'updates that suspend should be wrapped with startTransition.',
+    );
+  }
+
+  return result;
+}
+
+export {renderToStringImpl, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
new file mode 100644
index 00000000000..681a07b4110
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import {version, renderToStringImpl} from './ReactDOMLegacyServerImpl';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+function renderToString(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(
+    children,
+    options,
+    false,
+    'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server',
+  );
+}
+
+function renderToStaticMarkup(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(
+    children,
+    options,
+    true,
+    'The server used "renderToStaticMarkup" which does not support Suspense. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server',
+  );
+}
+
+export {renderToString, renderToStaticMarkup, version};
diff --git a/packages/react-dom/src/server/react-dom-server.browser.js b/packages/react-dom/src/server/react-dom-server.browser.js
new file mode 100644
index 00000000000..5ab1f0e1425
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.browser.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFizzServerBrowser.js';
+export {prerender, resumeAndPrerender} from './ReactDOMFizzStaticBrowser.js';
diff --git a/packages/react-dom/src/server/react-dom-server.browser.stable.js b/packages/react-dom/src/server/react-dom-server.browser.stable.js
new file mode 100644
index 00000000000..679e6803f6a
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.browser.stable.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  resume,
+  version,
+} from './ReactDOMFizzServerBrowser.js';
+export {prerender, resumeAndPrerender} from './ReactDOMFizzStaticBrowser.js';
diff --git a/packages/react-dom/src/server/react-dom-server.bun.js b/packages/react-dom/src/server/react-dom-server.bun.js
new file mode 100644
index 00000000000..17c9c1f465a
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.bun.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFizzServerBun.js';
+export {
+  renderToPipeableStream,
+  resumeToPipeableStream,
+  resume,
+} from './ReactDOMFizzServerNode.js';
+export {
+  prerenderToNodeStream,
+  prerender,
+  resumeAndPrerenderToNodeStream,
+  resumeAndPrerender,
+} from './ReactDOMFizzStaticNode.js';
diff --git a/packages/react-dom/src/server/react-dom-server.bun.stable.js b/packages/react-dom/src/server/react-dom-server.bun.stable.js
new file mode 100644
index 00000000000..50c83508ba9
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.bun.stable.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {renderToReadableStream, version} from './ReactDOMFizzServerBun.js';
+export {
+  renderToPipeableStream,
+  resume,
+  resumeToPipeableStream,
+} from './ReactDOMFizzServerNode.js';
+export {
+  prerenderToNodeStream,
+  prerender,
+  resumeAndPrerenderToNodeStream,
+  resumeAndPrerender,
+} from './ReactDOMFizzStaticNode.js';
diff --git a/packages/react-dom/src/server/react-dom-server.edge.js b/packages/react-dom/src/server/react-dom-server.edge.js
new file mode 100644
index 00000000000..e70e8fd4cbe
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.edge.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFizzServerEdge.js';
+export {prerender, resumeAndPrerender} from './ReactDOMFizzStaticEdge.js';
diff --git a/packages/react-dom/src/server/react-dom-server.edge.stable.js b/packages/react-dom/src/server/react-dom-server.edge.stable.js
new file mode 100644
index 00000000000..588b6d8cb59
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.edge.stable.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  resume,
+  version,
+} from './ReactDOMFizzServerEdge.js';
+export {prerender, resumeAndPrerender} from './ReactDOMFizzStaticEdge.js';
diff --git a/packages/react-dom/src/server/react-dom-server.node.js b/packages/react-dom/src/server/react-dom-server.node.js
new file mode 100644
index 00000000000..e01fb6413ce
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.node.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactDOMFizzServerNode.js';
+export {
+  prerenderToNodeStream,
+  prerender,
+  resumeAndPrerenderToNodeStream,
+  resumeAndPrerender,
+} from './ReactDOMFizzStaticNode.js';
diff --git a/packages/react-dom/src/server/react-dom-server.node.stable.js b/packages/react-dom/src/server/react-dom-server.node.stable.js
new file mode 100644
index 00000000000..e26eee22845
--- /dev/null
+++ b/packages/react-dom/src/server/react-dom-server.node.stable.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  renderToReadableStream,
+  resume,
+  resumeToPipeableStream,
+  version,
+} from './ReactDOMFizzServerNode.js';
+export {
+  prerenderToNodeStream,
+  prerender,
+  resumeAndPrerender,
+  resumeAndPrerenderToNodeStream,
+} from './ReactDOMFizzStaticNode.js';
diff --git a/packages/react-dom/src/shared/ReactDOM.js b/packages/react-dom/src/shared/ReactDOM.js
new file mode 100644
index 00000000000..f1d48bfacd4
--- /dev/null
+++ b/packages/react-dom/src/shared/ReactDOM.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
+import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
+import {flushSync} from './ReactDOMFlushSync';
+
+import {
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+} from './ReactDOMFloat';
+import {
+  requestFormReset,
+  useFormStatus,
+  useFormState,
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+
+if (__DEV__) {
+  if (
+    typeof Map !== 'function' ||
+    // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
+    Map.prototype == null ||
+    typeof Map.prototype.forEach !== 'function' ||
+    typeof Set !== 'function' ||
+    // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype
+    Set.prototype == null ||
+    typeof Set.prototype.clear !== 'function' ||
+    typeof Set.prototype.forEach !== 'function'
+  ) {
+    console.error(
+      'React depends on Map and Set built-in types. Make sure that you load a ' +
+        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
+    );
+  }
+}
+
+function batchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
+  // batchedUpdates is now just a passthrough noop
+  return fn(a);
+}
+
+function createPortal(
+  children: ReactNodeList,
+  container: Element | DocumentFragment,
+  key: ?string = null,
+): React$Portal {
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  // TODO: pass ReactDOM portal implementation as third argument
+  // $FlowFixMe[incompatible-return] The Flow type is opaque but there's no way to actually create it.
+  return createPortalImpl(children, container, null, key);
+}
+
+export {
+  ReactVersion as version,
+  createPortal,
+  flushSync,
+  batchedUpdates as unstable_batchedUpdates,
+  prefetchDNS,
+  preconnect,
+  preload,
+  preloadModule,
+  preinit,
+  preinitModule,
+  requestFormReset,
+  useFormStatus,
+  useFormState,
+};
diff --git a/packages/react-dom/src/shared/ReactDOMFloat.js b/packages/react-dom/src/shared/ReactDOMFloat.js
new file mode 100644
index 00000000000..844824fd066
--- /dev/null
+++ b/packages/react-dom/src/shared/ReactDOMFloat.js
@@ -0,0 +1,357 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  PreconnectOptions,
+  PreloadOptions,
+  PreloadModuleOptions,
+  PreinitOptions,
+  PreinitModuleOptions,
+} from './ReactDOMTypes';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+import {
+  getCrossOriginString,
+  getCrossOriginStringAs,
+} from 'react-dom-bindings/src/shared/crossOriginStrings';
+
+export function prefetchDNS(href: string) {
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (arguments.length > 1) {
+      const options = arguments[1];
+      if (
+        typeof options === 'object' &&
+        options.hasOwnProperty('crossOrigin')
+      ) {
+        console.error(
+          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
+          getValueDescriptorExpectingEnumForWarning(options),
+        );
+      } else {
+        console.error(
+          'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
+          getValueDescriptorExpectingEnumForWarning(options),
+        );
+      }
+    }
+  }
+  if (typeof href === 'string') {
+    ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+      .D(/* prefetchDNS */ href);
+  }
+  // We don't error because preconnect needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+export function preconnect(href: string, options?: ?PreconnectOptions) {
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (options != null && typeof options !== 'object') {
+      console.error(
+        'ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.',
+        getValueDescriptorExpectingEnumForWarning(options),
+      );
+    } else if (options != null && typeof options.crossOrigin !== 'string') {
+      console.error(
+        'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.',
+        getValueDescriptorExpectingObjectForWarning(options.crossOrigin),
+      );
+    }
+  }
+  if (typeof href === 'string') {
+    const crossOrigin = options
+      ? getCrossOriginString(options.crossOrigin)
+      : null;
+    ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+      .C(/* preconnect */ href, crossOrigin);
+  }
+  // We don't error because preconnect needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+export function preload(href: string, options: PreloadOptions) {
+  if (__DEV__) {
+    let encountered = '';
+    if (typeof href !== 'string' || !href) {
+      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        href,
+      )}.`;
+    }
+    if (options == null || typeof options !== 'object') {
+      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options,
+      )}.`;
+    } else if (typeof options.as !== 'string' || !options.as) {
+      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options.as,
+      )}.`;
+    }
+    if (encountered) {
+      console.error(
+        'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag.%s',
+        encountered,
+      );
+    }
+  }
+  if (
+    typeof href === 'string' &&
+    // We check existence because we cannot enforce this function is actually called with the stated type
+    typeof options === 'object' &&
+    options !== null &&
+    typeof options.as === 'string'
+  ) {
+    const as = options.as;
+    const crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
+    ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+      .L(/* preload */ href, as, {
+        crossOrigin,
+        integrity:
+          typeof options.integrity === 'string' ? options.integrity : undefined,
+        nonce: typeof options.nonce === 'string' ? options.nonce : undefined,
+        type: typeof options.type === 'string' ? options.type : undefined,
+        fetchPriority:
+          typeof options.fetchPriority === 'string'
+            ? options.fetchPriority
+            : undefined,
+        referrerPolicy:
+          typeof options.referrerPolicy === 'string'
+            ? options.referrerPolicy
+            : undefined,
+        imageSrcSet:
+          typeof options.imageSrcSet === 'string'
+            ? options.imageSrcSet
+            : undefined,
+        imageSizes:
+          typeof options.imageSizes === 'string'
+            ? options.imageSizes
+            : undefined,
+        media: typeof options.media === 'string' ? options.media : undefined,
+      });
+  }
+  // We don't error because preload needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+export function preloadModule(href: string, options?: ?PreloadModuleOptions) {
+  if (__DEV__) {
+    let encountered = '';
+    if (typeof href !== 'string' || !href) {
+      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        href,
+      )}.`;
+    }
+    if (options !== undefined && typeof options !== 'object') {
+      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options,
+      )}.`;
+    } else if (options && 'as' in options && typeof options.as !== 'string') {
+      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options.as,
+      )}.`;
+    }
+    if (encountered) {
+      console.error(
+        'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag.%s',
+        encountered,
+      );
+    }
+  }
+  if (typeof href === 'string') {
+    if (options) {
+      const crossOrigin = getCrossOriginStringAs(
+        options.as,
+        options.crossOrigin,
+      );
+      ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+        .m(/* preloadModule */ href, {
+          as:
+            typeof options.as === 'string' && options.as !== 'script'
+              ? options.as
+              : undefined,
+          crossOrigin,
+          integrity:
+            typeof options.integrity === 'string'
+              ? options.integrity
+              : undefined,
+        });
+    } else {
+      ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+        .m(/* preloadModule */ href);
+    }
+  }
+  // We don't error because preload needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+export function preinit(href: string, options: PreinitOptions) {
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (options == null || typeof options !== 'object') {
+      console.error(
+        'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.',
+        getValueDescriptorExpectingEnumForWarning(options),
+      );
+    } else if (options.as !== 'style' && options.as !== 'script') {
+      console.error(
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are "style" and "script".',
+        getValueDescriptorExpectingEnumForWarning(options.as),
+      );
+    }
+  }
+  if (typeof href === 'string' && options && typeof options.as === 'string') {
+    const as = options.as;
+    const crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
+    const integrity =
+      typeof options.integrity === 'string' ? options.integrity : undefined;
+    const fetchPriority =
+      typeof options.fetchPriority === 'string'
+        ? options.fetchPriority
+        : undefined;
+    if (as === 'style') {
+      ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+        .S(
+          /* preinitStyle */
+          href,
+          typeof options.precedence === 'string'
+            ? options.precedence
+            : undefined,
+          {
+            crossOrigin,
+            integrity,
+            fetchPriority,
+          },
+        );
+    } else if (as === 'script') {
+      ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+        .X(/* preinitScript */ href, {
+          crossOrigin,
+          integrity,
+          fetchPriority,
+          nonce: typeof options.nonce === 'string' ? options.nonce : undefined,
+        });
+    }
+  }
+  // We don't error because preinit needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+export function preinitModule(href: string, options?: ?PreinitModuleOptions) {
+  if (__DEV__) {
+    let encountered = '';
+    if (typeof href !== 'string' || !href) {
+      encountered += ` The \`href\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        href,
+      )}.`;
+    }
+    if (options !== undefined && typeof options !== 'object') {
+      encountered += ` The \`options\` argument encountered was ${getValueDescriptorExpectingObjectForWarning(
+        options,
+      )}.`;
+    } else if (options && 'as' in options && options.as !== 'script') {
+      encountered += ` The \`as\` option encountered was ${getValueDescriptorExpectingEnumForWarning(
+        options.as,
+      )}.`;
+    }
+    if (encountered) {
+      console.error(
+        'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property.%s',
+        encountered,
+      );
+    } else {
+      const as =
+        options && typeof options.as === 'string' ? options.as : 'script';
+      switch (as) {
+        case 'script': {
+          break;
+        }
+
+        // We have an invalid as type and need to warn
+        default: {
+          const typeOfAs = getValueDescriptorExpectingEnumForWarning(as);
+          console.error(
+            'ReactDOM.preinitModule(): Currently the only supported "as" type for this function is "script"' +
+              ' but received "%s" instead. This warning was generated for `href` "%s". In the future other' +
+              ' module types will be supported, aligning with the import-attributes proposal. Learn more here:' +
+              ' (https://github.com/tc39/proposal-import-attributes)',
+            typeOfAs,
+            href,
+          );
+        }
+      }
+    }
+  }
+  if (typeof href === 'string') {
+    if (typeof options === 'object' && options !== null) {
+      if (options.as == null || options.as === 'script') {
+        const crossOrigin = getCrossOriginStringAs(
+          options.as,
+          options.crossOrigin,
+        );
+        ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+          .M(/* preinitModuleScript */ href, {
+            crossOrigin,
+            integrity:
+              typeof options.integrity === 'string'
+                ? options.integrity
+                : undefined,
+            nonce:
+              typeof options.nonce === 'string' ? options.nonce : undefined,
+          });
+      }
+    } else if (options == null) {
+      ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+        .M(/* preinitModuleScript */ href);
+    }
+  }
+  // We don't error because preinit needs to be resilient to being called in a variety of scopes
+  // and the runtime may not be capable of responding. The function is optimistic and not critical
+  // so we favor silent bailout over warning or erroring.
+}
+
+function getValueDescriptorExpectingObjectForWarning(thing: any): string {
+  return thing === null
+    ? '`null`'
+    : thing === undefined
+      ? '`undefined`'
+      : thing === ''
+        ? 'an empty string'
+        : `something with type "${typeof thing}"`;
+}
+
+function getValueDescriptorExpectingEnumForWarning(thing: any): string {
+  return thing === null
+    ? '`null`'
+    : thing === undefined
+      ? '`undefined`'
+      : thing === ''
+        ? 'an empty string'
+        : typeof thing === 'string'
+          ? JSON.stringify(thing)
+          : typeof thing === 'number'
+            ? '`' + thing + '`'
+            : `something with type "${typeof thing}"`;
+}
diff --git a/packages/react-dom/src/shared/ReactDOMFlushSync.js b/packages/react-dom/src/shared/ReactDOMFlushSync.js
new file mode 100644
index 00000000000..a09ba546a81
--- /dev/null
+++ b/packages/react-dom/src/shared/ReactDOMFlushSync.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {disableLegacyMode} from 'shared/ReactFeatureFlags';
+import {DiscreteEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
+
+declare function flushSyncImpl<R>(fn: () => R): R;
+declare function flushSyncImpl(void): void;
+function flushSyncImpl<R>(fn: (() => R) | void): R | void {
+  const previousTransition = ReactSharedInternals.T;
+  const previousUpdatePriority =
+    ReactDOMSharedInternals.p; /* ReactDOMCurrentUpdatePriority */
+
+  try {
+    ReactSharedInternals.T = null;
+    ReactDOMSharedInternals.p /* ReactDOMCurrentUpdatePriority */ =
+      DiscreteEventPriority;
+    if (fn) {
+      return fn();
+    } else {
+      return undefined;
+    }
+  } finally {
+    ReactSharedInternals.T = previousTransition;
+    ReactDOMSharedInternals.p /* ReactDOMCurrentUpdatePriority */ =
+      previousUpdatePriority;
+    const wasInRender =
+      ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+        .f(); /* flushSyncWork */
+    if (__DEV__) {
+      if (wasInRender) {
+        console.error(
+          'flushSync was called from inside a lifecycle method. React cannot ' +
+            'flush when React is already rendering. Consider moving this call to ' +
+            'a scheduler task or micro task.',
+        );
+      }
+    }
+  }
+}
+
+declare function flushSyncErrorInBuildsThatSupportLegacyMode<R>(fn: () => R): R;
+declare function flushSyncErrorInBuildsThatSupportLegacyMode(void): void;
+function flushSyncErrorInBuildsThatSupportLegacyMode() {
+  // eslint-disable-next-line react-internal/prod-error-codes
+  throw new Error(
+    'Expected this build of React to not support legacy mode but it does. This is a bug in React.',
+  );
+}
+
+export const flushSync: typeof flushSyncImpl = disableLegacyMode
+  ? flushSyncImpl
+  : flushSyncErrorInBuildsThatSupportLegacyMode;
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
new file mode 100644
index 00000000000..dbfe07f9ec8
--- /dev/null
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {CrossOriginString} from 'react-dom-bindings/src/shared/crossOriginStrings';
+
+export type PrefetchDNSOptions = {};
+export type PreconnectOptions = {crossOrigin?: string};
+export type PreloadOptions = {
+  as: string,
+  crossOrigin?: string,
+  integrity?: string,
+  type?: string,
+  media?: string,
+  nonce?: string,
+  fetchPriority?: FetchPriorityEnum,
+  imageSrcSet?: string,
+  imageSizes?: string,
+  referrerPolicy?: string,
+};
+export type PreloadModuleOptions = {
+  as?: string,
+  crossOrigin?: string,
+  integrity?: string,
+  nonce?: string,
+};
+export type PreinitOptions = {
+  as: string,
+  precedence?: string,
+  crossOrigin?: string,
+  integrity?: string,
+  nonce?: string,
+  fetchPriority?: FetchPriorityEnum,
+};
+export type PreinitModuleOptions = {
+  as?: string,
+  crossOrigin?: string,
+  integrity?: string,
+  nonce?: string,
+};
+
+export type CrossOriginEnum = '' | 'use-credentials' | CrossOriginString;
+export type FetchPriorityEnum = 'high' | 'low' | 'auto';
+
+export type PreloadImplOptions = {
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  nonce?: ?string,
+  type?: ?string,
+  fetchPriority?: ?string,
+  referrerPolicy?: ?string,
+  imageSrcSet?: ?string,
+  imageSizes?: ?string,
+  media?: ?string,
+};
+export type PreloadModuleImplOptions = {
+  as?: ?string,
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  nonce?: ?string,
+};
+export type PreinitStyleOptions = {
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  fetchPriority?: ?string,
+};
+export type PreinitScriptOptions = {
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  fetchPriority?: ?string,
+  nonce?: ?string,
+};
+export type PreinitModuleScriptOptions = {
+  crossOrigin?: ?CrossOriginEnum,
+  integrity?: ?string,
+  nonce?: ?string,
+};
+
+export type HostDispatcher = {
+  f /* flushSyncWork */: () => boolean | void,
+  r /* requestFormReset */: (form: HTMLFormElement) => void,
+  D /* prefetchDNS */: (href: string) => void,
+  C /* preconnect */: (href: string, crossOrigin?: ?CrossOriginEnum) => void,
+  L /* preload */: (
+    href: string,
+    as: string,
+    options?: ?PreloadImplOptions,
+  ) => void,
+  m /* preloadModule */: (
+    href: string,
+    options?: ?PreloadModuleImplOptions,
+  ) => void,
+  S /* preinitStyle */: (
+    href: string,
+    precedence: ?string,
+    options?: ?PreinitStyleOptions,
+  ) => void,
+  X /* preinitScript */: (src: string, options?: ?PreinitScriptOptions) => void,
+  M /* preinitModuleScript */: (
+    src: string,
+    options?: ?PreinitModuleScriptOptions,
+  ) => void,
+};
+
+export type ImportMap = {
+  imports?: {
+    [specifier: string]: string,
+  },
+  scopes?: {
+    [scope: string]: {
+      [specifier: string]: string,
+    },
+  },
+};
diff --git a/packages/react-dom/src/shared/ensureCorrectIsomorphicReactVersion.js b/packages/react-dom/src/shared/ensureCorrectIsomorphicReactVersion.js
new file mode 100644
index 00000000000..cbfece89832
--- /dev/null
+++ b/packages/react-dom/src/shared/ensureCorrectIsomorphicReactVersion.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 reactDOMPackageVersion from 'shared/ReactVersion';
+import * as IsomorphicReactPackage from 'react';
+
+export function ensureCorrectIsomorphicReactVersion() {
+  const isomorphicReactPackageVersion = IsomorphicReactPackage.version;
+  if (isomorphicReactPackageVersion !== reactDOMPackageVersion) {
+    throw new Error(
+      'Incompatible React versions: The "react" and "react-dom" packages must ' +
+        'have the exact same version. Instead got:\n' +
+        `  - react:      ${isomorphicReactPackageVersion}\n` +
+        `  - react-dom:  ${reactDOMPackageVersion}\n` +
+        'Learn more: https://react.dev/warnings/version-mismatch',
+    );
+  }
+}
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
new file mode 100644
index 00000000000..4d8b6cadbab
--- /dev/null
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+async function insertNodesAndExecuteScripts(
+  source: Document | Element,
+  target: Node,
+  CSPnonce: string | null,
+) {
+  const ownerDocument = target.ownerDocument || target;
+
+  // We need to remove the script content for any scripts that would not run based on CSP
+  // We restore the script content after moving the nodes into the target
+  const badNonceScriptNodes: Map<Element, string> = new Map();
+  if (CSPnonce) {
+    const scripts = source.querySelectorAll('script');
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (
+        !script.hasAttribute('src') &&
+        script.getAttribute('nonce') !== CSPnonce
+      ) {
+        badNonceScriptNodes.set(script, script.textContent);
+        script.textContent = '';
+      }
+    }
+  }
+  let lastChild = null;
+  while (source.firstChild) {
+    const node = source.firstChild;
+    if (lastChild === node) {
+      throw new Error('Infinite loop.');
+    }
+    lastChild = node;
+
+    if (node.nodeType === 1) {
+      const element: Element = (node: any);
+      if (
+        // $FlowFixMe[prop-missing]
+        element.dataset != null &&
+        (element.dataset.rxi != null ||
+          element.dataset.rri != null ||
+          element.dataset.rci != null ||
+          element.dataset.rsi != null)
+      ) {
+        // Fizz external runtime instructions are expected to be in the body.
+        // When we have renderIntoContainer and renderDocument this will be
+        // more enforceable. At the moment you can misconfigure your stream and end up
+        // with instructions that are deep in the document
+        (ownerDocument.body: any).appendChild(element);
+      } else {
+        target.appendChild(element);
+
+        if (element.nodeName === 'SCRIPT') {
+          await executeScript(element);
+        } else {
+          const scripts = element.querySelectorAll('script');
+          for (let i = 0; i < scripts.length; i++) {
+            const script = scripts[i];
+            await executeScript(script);
+          }
+        }
+      }
+    } else {
+      target.appendChild(node);
+    }
+  }
+
+  // restore the textContent now that we have finished attempting to execute scripts
+  badNonceScriptNodes.forEach((scriptContent, script) => {
+    script.textContent = scriptContent;
+  });
+}
+
+async function executeScript(script: Element) {
+  const ownerDocument = script.ownerDocument;
+  if (script.parentNode == null) {
+    throw new Error(
+      'executeScript expects to be called on script nodes that are currently in a document',
+    );
+  }
+  const parent = script.parentNode;
+  const scriptSrc = script.getAttribute('src');
+  if (scriptSrc) {
+    if (document !== ownerDocument) {
+      throw new Error(
+        'You must set the current document to the global document to use script src in tests',
+      );
+    }
+
+    try {
+      // $FlowFixMe
+      require(scriptSrc);
+    } catch (x) {
+      const event = new window.ErrorEvent('error', {error: x});
+      window.dispatchEvent(event);
+    }
+  } else {
+    const newScript = ownerDocument.createElement('script');
+    newScript.textContent = script.textContent;
+    // make sure to add nonce back to script if it exists
+    for (let i = 0; i < script.attributes.length; i++) {
+      const attribute = script.attributes[i];
+      newScript.setAttribute(attribute.name, attribute.value);
+    }
+
+    parent.insertBefore(newScript, script);
+    parent.removeChild(script);
+  }
+}
+
+function mergeOptions(options: Object, defaultOptions: Object): Object {
+  return {
+    ...defaultOptions,
+    ...options,
+  };
+}
+
+function stripExternalRuntimeInNodes(
+  nodes: HTMLElement[] | HTMLCollection<HTMLElement>,
+  externalRuntimeSrc: string | null,
+): HTMLElement[] {
+  if (!Array.isArray(nodes)) {
+    nodes = Array.from(nodes);
+  }
+  if (externalRuntimeSrc == null) {
+    return nodes;
+  }
+  return nodes.filter(
+    n =>
+      (n.tagName !== 'SCRIPT' && n.tagName !== 'script') ||
+      n.getAttribute('src') !== externalRuntimeSrc,
+  );
+}
+
+function getVisibleChildren(element: Element): React$Node {
+  const children = [];
+  let node: any = element.firstChild;
+  while (node) {
+    if (node.nodeType === 1) {
+      if (
+        ((node.tagName !== 'SCRIPT' && node.tagName !== 'script') ||
+          node.hasAttribute('data-meaningful')) &&
+        node.tagName !== 'TEMPLATE' &&
+        node.tagName !== 'template' &&
+        !node.hasAttribute('hidden') &&
+        !node.hasAttribute('aria-hidden') &&
+        // Ignore the render blocking expect
+        (node.getAttribute('rel') !== 'expect' ||
+          node.getAttribute('blocking') !== 'render')
+      ) {
+        const props: any = {};
+        const attributes = node.attributes;
+        for (let i = 0; i < attributes.length; i++) {
+          if (
+            attributes[i].name === 'id' &&
+            attributes[i].value.includes(':')
+          ) {
+            // We assume this is a React added ID that's a non-visual implementation detail.
+            continue;
+          }
+          props[attributes[i].name] = attributes[i].value;
+        }
+        const nestedChildren = getVisibleChildren(node);
+        if (nestedChildren !== undefined) {
+          props.children = nestedChildren;
+        }
+        children.push(
+          require('react').createElement(node.tagName.toLowerCase(), props),
+        );
+      }
+    } else if (node.nodeType === 3) {
+      children.push(node.data);
+    }
+    node = node.nextSibling;
+  }
+  return children.length === 0
+    ? undefined
+    : children.length === 1
+      ? children[0]
+      : children;
+}
+
+export {
+  insertNodesAndExecuteScripts,
+  mergeOptions,
+  stripExternalRuntimeInNodes,
+  getVisibleChildren,
+};
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
new file mode 100644
index 00000000000..942600954d5
--- /dev/null
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import * as React from 'react';
+
+let didWarnAboutUsingAct = false;
+export function act(callback) {
+  if (didWarnAboutUsingAct === false) {
+    didWarnAboutUsingAct = true;
+    console.error(
+      '`ReactDOMTestUtils.act` is deprecated in favor of `React.act`. ' +
+        'Import `act` from `react` instead of `react-dom/test-utils`. ' +
+        'See https://react.dev/warnings/react-dom-test-utils for more info.',
+    );
+  }
+  return React.act(callback);
+}
diff --git a/packages/react-dom/static.browser.js b/packages/react-dom/static.browser.js
new file mode 100644
index 00000000000..23e07d7dd29
--- /dev/null
+++ b/packages/react-dom/static.browser.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  prerender,
+  resumeAndPrerender,
+  version,
+} from './src/server/react-dom-server.browser';
diff --git a/packages/react-dom/static.edge.js b/packages/react-dom/static.edge.js
new file mode 100644
index 00000000000..e2cbc692869
--- /dev/null
+++ b/packages/react-dom/static.edge.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  prerender,
+  resumeAndPrerender,
+  version,
+} from './src/server/react-dom-server.edge';
diff --git a/packages/react-dom/static.js b/packages/react-dom/static.js
new file mode 100644
index 00000000000..c0066e58c49
--- /dev/null
+++ b/packages/react-dom/static.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './static.node';
diff --git a/packages/react-dom/static.node.js b/packages/react-dom/static.node.js
new file mode 100644
index 00000000000..f81cac167d1
--- /dev/null
+++ b/packages/react-dom/static.node.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is only used for tests.
+// It lazily loads the implementation so that we get the correct set of host configs.
+
+import ReactVersion from 'shared/ReactVersion';
+export {ReactVersion as version};
+
+export function prerenderToNodeStream() {
+  return require('./src/server/react-dom-server.node').prerenderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function prerender() {
+  return require('./src/server/react-dom-server.node').prerender.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeAndPrerenderToNodeStream() {
+  return require('./src/server/react-dom-server.node').resumeAndPrerenderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function resumeAndPrerender() {
+  return require('./src/server/react-dom-server.node').resumeAndPrerender.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/test-utils.js b/packages/react-dom/test-utils.js
new file mode 100644
index 00000000000..93d7933d264
--- /dev/null
+++ b/packages/react-dom/test-utils.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/test-utils/ReactTestUtils';
diff --git a/packages/react-dom/unstable_server-external-runtime.js b/packages/react-dom/unstable_server-external-runtime.js
new file mode 100644
index 00000000000..f2b257fbf49
--- /dev/null
+++ b/packages/react-dom/unstable_server-external-runtime.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-bindings/src/server/ReactDOMServerExternalRuntime';
diff --git a/packages/react-dom/unstable_testing.experimental.js b/packages/react-dom/unstable_testing.experimental.js
new file mode 100644
index 00000000000..499635551ed
--- /dev/null
+++ b/packages/react-dom/unstable_testing.experimental.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './client.js';
+
+export {
+  createComponentSelector,
+  createHasPseudoClassSelector,
+  createRoleSelector,
+  createTestNameSelector,
+  createTextSelector,
+  getFindAllNodesFailureDescription,
+  findAllNodes,
+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/react-dom/unstable_testing.js b/packages/react-dom/unstable_testing.js
new file mode 100644
index 00000000000..bc330f3537e
--- /dev/null
+++ b/packages/react-dom/unstable_testing.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './client.js';
diff --git a/packages/react-is/README.md b/packages/react-is/README.md
new file mode 100644
index 00000000000..c446e89c6b0
--- /dev/null
+++ b/packages/react-is/README.md
@@ -0,0 +1,103 @@
+# `react-is`
+
+This package allows you to test arbitrary values and see if they're a particular React element type.
+
+## Installation
+
+```sh
+# Yarn
+yarn add react-is
+
+# NPM
+npm install react-is
+```
+
+## Usage
+
+### Determining if a Component is Valid
+
+```js
+import React from "react";
+import * as ReactIs from "react-is";
+
+class ClassComponent extends React.Component {
+  render() {
+    return React.createElement("div");
+  }
+}
+
+const FunctionComponent = () => React.createElement("div");
+
+const ForwardRefComponent = React.forwardRef((props, ref) =>
+  React.createElement(Component, { forwardedRef: ref, ...props })
+);
+
+const Context = React.createContext(false);
+
+ReactIs.isValidElementType("div"); // true
+ReactIs.isValidElementType(ClassComponent); // true
+ReactIs.isValidElementType(FunctionComponent); // true
+ReactIs.isValidElementType(ForwardRefComponent); // true
+ReactIs.isValidElementType(Context.Provider); // true
+ReactIs.isValidElementType(Context.Consumer); // true
+```
+
+### Determining an Element's Type
+
+#### Context
+
+```js
+import React from "react";
+import * as ReactIs from 'react-is';
+
+const ThemeContext = React.createContext("blue");
+
+ReactIs.isContextConsumer(<ThemeContext.Consumer />); // true
+ReactIs.isContextProvider(<ThemeContext.Provider />); // true
+ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
+ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true
+```
+
+#### Element
+
+```js
+import React from "react";
+import * as ReactIs from 'react-is';
+
+ReactIs.isElement(<div />); // true
+ReactIs.typeOf(<div />) === ReactIs.Element; // true
+```
+
+#### Fragment
+
+```js
+import React from "react";
+import * as ReactIs from 'react-is';
+
+ReactIs.isFragment(<></>); // true
+ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
+```
+
+#### Portal
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+import * as ReactIs from 'react-is';
+
+const div = document.createElement("div");
+const portal = ReactDOM.createPortal(<div />, div);
+
+ReactIs.isPortal(portal); // true
+ReactIs.typeOf(portal) === ReactIs.Portal; // true
+```
+
+#### StrictMode
+
+```js
+import React from "react";
+import * as ReactIs from 'react-is';
+
+ReactIs.isStrictMode(<React.StrictMode />); // true
+ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
+```
diff --git a/packages/react-is/index.experimental.js b/packages/react-is/index.experimental.js
new file mode 100644
index 00000000000..b9bddfa4217
--- /dev/null
+++ b/packages/react-is/index.experimental.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {
+  isValidElementType,
+  typeOf,
+  ContextConsumer,
+  ContextProvider,
+  Element,
+  ForwardRef,
+  Fragment,
+  Lazy,
+  Memo,
+  Portal,
+  Profiler,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  isContextConsumer,
+  isContextProvider,
+  isElement,
+  isForwardRef,
+  isFragment,
+  isLazy,
+  isMemo,
+  isPortal,
+  isProfiler,
+  isStrictMode,
+  isSuspense,
+  isSuspenseList,
+} from './src/ReactIs';
diff --git a/packages/react-is/index.js b/packages/react-is/index.js
new file mode 100644
index 00000000000..f358e66565f
--- /dev/null
+++ b/packages/react-is/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/ReactIs';
diff --git a/packages/react-is/index.stable.js b/packages/react-is/index.stable.js
new file mode 100644
index 00000000000..b9bddfa4217
--- /dev/null
+++ b/packages/react-is/index.stable.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {
+  isValidElementType,
+  typeOf,
+  ContextConsumer,
+  ContextProvider,
+  Element,
+  ForwardRef,
+  Fragment,
+  Lazy,
+  Memo,
+  Portal,
+  Profiler,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  isContextConsumer,
+  isContextProvider,
+  isElement,
+  isForwardRef,
+  isFragment,
+  isLazy,
+  isMemo,
+  isPortal,
+  isProfiler,
+  isStrictMode,
+  isSuspense,
+  isSuspenseList,
+} from './src/ReactIs';
diff --git a/packages/react-is/npm/index.js b/packages/react-is/npm/index.js
new file mode 100644
index 00000000000..2cafe482766
--- /dev/null
+++ b/packages/react-is/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-is.production.js');
+} else {
+  module.exports = require('./cjs/react-is.development.js');
+}
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
new file mode 100644
index 00000000000..f910553fcbc
--- /dev/null
+++ b/packages/react-is/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-is",
+  "version": "19.3.0",
+  "description": "Brand checking of React Elements.",
+  "main": "index.js",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-is"
+  },
+  "keywords": [
+    "react"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/"
+  ]
+}
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
new file mode 100644
index 00000000000..ed70f0e68eb
--- /dev/null
+++ b/packages/react-is/src/ReactIs.js
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_ELEMENT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_CONSUMER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_SCOPE_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
+  REACT_TRACING_MARKER_TYPE,
+} from 'shared/ReactSymbols';
+
+import {
+  enableScopeAPI,
+  enableTransitionTracing,
+  enableLegacyHidden,
+  enableViewTransition,
+} from 'shared/ReactFeatureFlags';
+
+const REACT_CLIENT_REFERENCE: symbol = Symbol.for('react.client.reference');
+
+export function typeOf(object: any): mixed {
+  if (typeof object === 'object' && object !== null) {
+    const $$typeof = object.$$typeof;
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        const type = object.type;
+
+        switch (type) {
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+          case REACT_SUSPENSE_LIST_TYPE:
+          case REACT_VIEW_TRANSITION_TYPE:
+            return type;
+          default:
+            const $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+                return $$typeofType;
+              case REACT_CONSUMER_TYPE:
+                return $$typeofType;
+              // Fall through
+              default:
+                return $$typeof;
+            }
+        }
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+}
+
+export const ContextConsumer: symbol = REACT_CONSUMER_TYPE;
+export const ContextProvider: symbol = REACT_CONTEXT_TYPE;
+export const Element = REACT_ELEMENT_TYPE;
+export const ForwardRef = REACT_FORWARD_REF_TYPE;
+export const Fragment = REACT_FRAGMENT_TYPE;
+export const Lazy = REACT_LAZY_TYPE;
+export const Memo = REACT_MEMO_TYPE;
+export const Portal = REACT_PORTAL_TYPE;
+export const Profiler = REACT_PROFILER_TYPE;
+export const StrictMode = REACT_STRICT_MODE_TYPE;
+export const Suspense = REACT_SUSPENSE_TYPE;
+export const SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+
+export function isValidElementType(type: mixed): boolean {
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  }
+
+  // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+  if (
+    type === REACT_FRAGMENT_TYPE ||
+    type === REACT_PROFILER_TYPE ||
+    type === REACT_STRICT_MODE_TYPE ||
+    type === REACT_SUSPENSE_TYPE ||
+    type === REACT_SUSPENSE_LIST_TYPE ||
+    (enableLegacyHidden && type === REACT_LEGACY_HIDDEN_TYPE) ||
+    (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
+    (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE) ||
+    (enableViewTransition && type === REACT_VIEW_TRANSITION_TYPE)
+  ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (
+      type.$$typeof === REACT_LAZY_TYPE ||
+      type.$$typeof === REACT_MEMO_TYPE ||
+      type.$$typeof === REACT_CONTEXT_TYPE ||
+      type.$$typeof === REACT_CONSUMER_TYPE ||
+      type.$$typeof === REACT_FORWARD_REF_TYPE ||
+      // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      type.$$typeof === REACT_CLIENT_REFERENCE ||
+      type.getModuleId !== undefined
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function isContextConsumer(object: any): boolean {
+  return typeOf(object) === REACT_CONSUMER_TYPE;
+}
+export function isContextProvider(object: any): boolean {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+export function isElement(object: any): boolean {
+  return (
+    typeof object === 'object' &&
+    object !== null &&
+    object.$$typeof === REACT_ELEMENT_TYPE
+  );
+}
+export function isForwardRef(object: any): boolean {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+export function isFragment(object: any): boolean {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+export function isLazy(object: any): boolean {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+export function isMemo(object: any): boolean {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+export function isPortal(object: any): boolean {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+export function isProfiler(object: any): boolean {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+export function isStrictMode(object: any): boolean {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+export function isSuspense(object: any): boolean {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+export function isSuspenseList(object: any): boolean {
+  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+}
diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
new file mode 100644
index 00000000000..f9d9dc923cc
--- /dev/null
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -0,0 +1,203 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactIs;
+let SuspenseList;
+
+describe('ReactIs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactIs = require('react-is');
+
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+  });
+
+  it('should return undefined for unknown/invalid types', () => {
+    expect(ReactIs.typeOf('abc')).toBe(undefined);
+    expect(ReactIs.typeOf(true)).toBe(undefined);
+    expect(ReactIs.typeOf(123)).toBe(undefined);
+    expect(ReactIs.typeOf({})).toBe(undefined);
+    expect(ReactIs.typeOf(null)).toBe(undefined);
+    expect(ReactIs.typeOf(undefined)).toBe(undefined);
+    expect(ReactIs.typeOf(NaN)).toBe(undefined);
+    expect(ReactIs.typeOf(Symbol('def'))).toBe(undefined);
+  });
+
+  it('identifies valid element types', () => {
+    class Component extends React.Component {
+      render() {
+        return React.createElement('div');
+      }
+    }
+    class PureComponent extends React.PureComponent {
+      render() {
+        return React.createElement('div');
+      }
+    }
+
+    const FunctionComponent = () => React.createElement('div');
+    const ForwardRefComponent = React.forwardRef((props, ref) =>
+      React.createElement(Component, {forwardedRef: ref, ...props}),
+    );
+    const LazyComponent = React.lazy(() => Component);
+    const MemoComponent = React.memo(Component);
+    const Context = React.createContext(false);
+
+    expect(ReactIs.isValidElementType('div')).toEqual(true);
+    expect(ReactIs.isValidElementType(Component)).toEqual(true);
+    expect(ReactIs.isValidElementType(PureComponent)).toEqual(true);
+    expect(ReactIs.isValidElementType(FunctionComponent)).toEqual(true);
+    expect(ReactIs.isValidElementType(ForwardRefComponent)).toEqual(true);
+    expect(ReactIs.isValidElementType(LazyComponent)).toEqual(true);
+    expect(ReactIs.isValidElementType(MemoComponent)).toEqual(true);
+    expect(ReactIs.isValidElementType(Context.Provider)).toEqual(true);
+    expect(ReactIs.isValidElementType(Context.Consumer)).toEqual(true);
+    expect(ReactIs.isValidElementType(React.Fragment)).toEqual(true);
+    expect(ReactIs.isValidElementType(React.StrictMode)).toEqual(true);
+    expect(ReactIs.isValidElementType(React.Suspense)).toEqual(true);
+
+    expect(ReactIs.isValidElementType(true)).toEqual(false);
+    expect(ReactIs.isValidElementType(123)).toEqual(false);
+    expect(ReactIs.isValidElementType({})).toEqual(false);
+    expect(ReactIs.isValidElementType(null)).toEqual(false);
+    expect(ReactIs.isValidElementType(undefined)).toEqual(false);
+    expect(ReactIs.isValidElementType({type: 'div', props: {}})).toEqual(false);
+  });
+
+  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);
+    expect(ReactIs.isContextConsumer(<div />)).toBe(false);
+  });
+
+  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);
+    expect(ReactIs.isContextProvider(<div />)).toBe(false);
+  });
+
+  it('should identify elements', () => {
+    expect(ReactIs.typeOf(<div />)).toBe(ReactIs.Element);
+    expect(ReactIs.isElement(<div />)).toBe(true);
+    expect(ReactIs.isElement('div')).toBe(false);
+    expect(ReactIs.isElement(true)).toBe(false);
+    expect(ReactIs.isElement(123)).toBe(false);
+    expect(ReactIs.isElement(null)).toBe(false);
+    expect(ReactIs.isElement(undefined)).toBe(false);
+    expect(ReactIs.isElement({})).toBe(false);
+
+    // It should also identify more specific types as elements
+    const Context = React.createContext(false);
+    expect(ReactIs.isElement(<Context.Provider />)).toBe(true);
+    expect(ReactIs.isElement(<Context.Consumer />)).toBe(true);
+    expect(ReactIs.isElement(<React.Fragment />)).toBe(true);
+    expect(ReactIs.isElement(<React.StrictMode />)).toBe(true);
+    expect(ReactIs.isElement(<React.Suspense />)).toBe(true);
+  });
+
+  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);
+    expect(ReactIs.isForwardRef(<div />)).toBe(false);
+  });
+
+  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);
+    expect(ReactIs.isFragment('React.Fragment')).toBe(false);
+    expect(ReactIs.isFragment(<div />)).toBe(false);
+    expect(ReactIs.isFragment([])).toBe(false);
+  });
+
+  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);
+  });
+
+  it('should identify memo', () => {
+    const Component = () => React.createElement('div');
+    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.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);
+    expect(ReactIs.isStrictMode(<div />)).toBe(false);
+  });
+
+  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);
+    expect(ReactIs.isSuspense('React.Suspense')).toBe(false);
+    expect(ReactIs.isSuspense(<div />)).toBe(false);
+  });
+
+  // @gate enableSuspenseList
+  it('should identify suspense list', () => {
+    expect(ReactIs.isValidElementType(SuspenseList)).toBe(true);
+    expect(ReactIs.typeOf(<SuspenseList />)).toBe(ReactIs.SuspenseList);
+    expect(ReactIs.isSuspenseList(<SuspenseList />)).toBe(true);
+    expect(ReactIs.isSuspenseList({type: ReactIs.SuspenseList})).toBe(false);
+    expect(ReactIs.isSuspenseList('React.SuspenseList')).toBe(false);
+    expect(ReactIs.isSuspenseList(<div />)).toBe(false);
+  });
+
+  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);
+    expect(
+      ReactIs.isProfiler(<React.Profiler id="foo" onRender={jest.fn()} />),
+    ).toBe(true);
+    expect(ReactIs.isProfiler({type: ReactIs.Profiler})).toBe(false);
+    expect(ReactIs.isProfiler(<div />)).toBe(false);
+  });
+});
diff --git a/packages/react-markup/README.md b/packages/react-markup/README.md
new file mode 100644
index 00000000000..f01c9be6b36
--- /dev/null
+++ b/packages/react-markup/README.md
@@ -0,0 +1,36 @@
+# `react-markup`
+
+This package provides the ability to render standalone HTML from Server Components for use in embedded contexts such as e-mails and RSS/Atom feeds. It cannot use Client Components and does not hydrate. It is intended to be paired with the generic React package, which is shipped as `react` to npm.
+
+## Installation
+
+```sh
+npm install react react-markup
+```
+
+## Usage
+
+```js
+import { experimental_renderToHTML as renderToHTML } from 'react-markup';
+import EmailTemplate from './my-email-template-component.js'
+
+async function action(email, name) {
+  "use server";
+  // ... in your server, e.g. a Server Action...
+  const htmlString = await renderToHTML(<EmailTemplate name={name} />);
+  // ... send e-mail using some e-mail provider
+  await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
+}
+```
+
+Note that this is an async function that needs to be awaited - unlike the legacy `renderToString` in `react-dom`.
+
+## API
+
+### `react-markup`
+
+See https://react.dev/reference/react-markup
+
+## Thanks
+
+The React team thanks [Nikolai Mavrenkov](https://www.koluch.ru/) for donating the `react-markup` package name.
diff --git a/packages/react-markup/index.js b/packages/react-markup/index.js
new file mode 100644
index 00000000000..1e53a27a696
--- /dev/null
+++ b/packages/react-markup/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactMarkupClient';
diff --git a/packages/react-markup/npm/index.js b/packages/react-markup/npm/index.js
new file mode 100644
index 00000000000..e0f4dd058f6
--- /dev/null
+++ b/packages/react-markup/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-markup.production.js');
+} else {
+  module.exports = require('./cjs/react-markup.development.js');
+}
diff --git a/packages/react-markup/npm/react-markup.react-server.js b/packages/react-markup/npm/react-markup.react-server.js
new file mode 100644
index 00000000000..08e140b407c
--- /dev/null
+++ b/packages/react-markup/npm/react-markup.react-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-markup.react-server.production.js');
+} else {
+  module.exports = require('./cjs/react-markup.react-server.development.js');
+}
diff --git a/packages/react-markup/package.json b/packages/react-markup/package.json
new file mode 100644
index 00000000000..56448653391
--- /dev/null
+++ b/packages/react-markup/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "react-markup",
+  "version": "19.3.0",
+  "description": "React package generating embedded markup such as e-mails with support for Server Components.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-markup"
+  },
+  "keywords": [
+    "react"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "react-markup.react-server.js",
+    "cjs/"
+  ],
+  "exports": {
+    ".": {
+      "react-server": "./react-markup.react-server.js",
+      "default": "./index.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  }
+}
diff --git a/packages/react-markup/react-markup.react-server.js b/packages/react-markup/react-markup.react-server.js
new file mode 100644
index 00000000000..4b74acd707c
--- /dev/null
+++ b/packages/react-markup/react-markup.react-server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactMarkupServer';
diff --git a/packages/react-markup/src/ReactFizzConfigMarkup.js b/packages/react-markup/src/ReactFizzConfigMarkup.js
new file mode 100644
index 00000000000..7dbe5592f33
--- /dev/null
+++ b/packages/react-markup/src/ReactFizzConfigMarkup.js
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import type {
+  RenderState,
+  ResumableState,
+  PreambleState,
+  HoistableState,
+  FormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {
+  pushStartInstance as pushStartInstanceImpl,
+  writePreambleStart as writePreambleStartImpl,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+
+import {NotPending} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+// Allow embedding inside another Fizz render.
+export const isPrimaryRenderer = false;
+
+// Disable Client Hooks
+export const supportsClientAPIs = false;
+
+import {stringToChunk} from 'react-server/src/ReactServerStreamConfig';
+
+export type {
+  RenderState,
+  ResumableState,
+  HoistableState,
+  PreambleState,
+  FormatContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+export {
+  getChildFormatContext,
+  getSuspenseFallbackFormatContext,
+  getSuspenseContentFormatContext,
+  makeId,
+  pushEndInstance,
+  pushFormStateMarkerIsMatching,
+  pushFormStateMarkerIsNotMatching,
+  writeStartSegment,
+  writeEndSegment,
+  writeCompletedSegmentInstruction,
+  writeCompletedBoundaryInstruction,
+  writeClientRenderBoundaryInstruction,
+  writeStartPendingSuspenseBoundary,
+  writeEndPendingSuspenseBoundary,
+  writeHoistablesForBoundary,
+  writePlaceholder,
+  createRootFormatContext,
+  createRenderState,
+  createResumableState,
+  createPreambleState,
+  createHoistableState,
+  writePreambleEnd,
+  writeHoistables,
+  writePostamble,
+  hoistHoistables,
+  resetResumableState,
+  completeResumableState,
+  emitEarlyPreloads,
+  doctypeChunk,
+  canHavePreamble,
+  hoistPreambleState,
+  isPreambleReady,
+  isPreambleContext,
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import escapeTextForBrowser from 'react-dom-bindings/src/server/escapeTextForBrowser';
+
+export function getViewTransitionFormatContext(
+  resumableState: ResumableState,
+  parentContext: FormatContext,
+  update: void | null | 'none' | 'auto' | string,
+  enter: void | null | 'none' | 'auto' | string,
+  exit: void | null | 'none' | 'auto' | string,
+  share: void | null | 'none' | 'auto' | string,
+  name: void | null | 'auto' | string,
+  autoName: string, // name or an autogenerated unique name
+): FormatContext {
+  // ViewTransition reveals are not supported in markup renders.
+  return parentContext;
+}
+
+export function pushStartInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  type: string,
+  props: Object,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  preambleState: null | PreambleState,
+  hoistableState: null | HoistableState,
+  formatContext: FormatContext,
+  textEmbedded: boolean,
+): ReactNodeList {
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propKey === 'ref' && propValue != null) {
+        throw new Error(
+          'Cannot pass ref in renderToHTML because they will never be hydrated.',
+        );
+      }
+      if (typeof propValue === 'function') {
+        throw new Error(
+          'Cannot pass event handlers (' +
+            propKey +
+            ') in renderToHTML because ' +
+            'the HTML will never be hydrated so they can never get called.',
+        );
+      }
+    }
+  }
+
+  return pushStartInstanceImpl(
+    target,
+    type,
+    props,
+    resumableState,
+    renderState,
+    preambleState,
+    hoistableState,
+    formatContext,
+    textEmbedded,
+  );
+}
+
+export function pushTextInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  text: string,
+  renderState: RenderState,
+  textEmbedded: boolean,
+): boolean {
+  // Markup doesn't need any termination.
+  target.push(stringToChunk(escapeTextForBrowser(text)));
+  return false;
+}
+
+export function pushSegmentFinale(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): void {
+  // Markup doesn't need any termination.
+  return;
+}
+
+export function pushStartActivityBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+): void {
+  // Markup doesn't have any instructions.
+  return;
+}
+
+export function pushEndActivityBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+  renderState: RenderState,
+): void {
+  // Markup doesn't have any instructions.
+  return;
+}
+
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  // Markup doesn't have any instructions.
+  return true;
+}
+
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+  // flushing these error arguments are not currently supported in this legacy streaming format.
+  errorDigest: ?string,
+  errorMessage: ?string,
+  errorStack: ?string,
+  errorComponentStack: ?string,
+): boolean {
+  // Markup doesn't have any instructions.
+  return true;
+}
+
+export function writeEndCompletedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  // Markup doesn't have any instructions.
+  return true;
+}
+export function writeEndClientRenderedSuspenseBoundary(
+  destination: Destination,
+  renderState: RenderState,
+): boolean {
+  // Markup doesn't have any instructions.
+  return true;
+}
+
+export function writePreambleStart(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  skipBlockingShell: boolean,
+): void {
+  return writePreambleStartImpl(
+    destination,
+    resumableState,
+    renderState,
+    true, // skipBlockingShell
+  );
+}
+
+export function writeCompletedRoot(
+  destination: Destination,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  isComplete: boolean,
+): boolean {
+  // Markup doesn't have any bootstrap scripts nor shell completions.
+  return true;
+}
+
+export function hasSuspenseyContent(hoistableState: HoistableState): boolean {
+  // Never outline.
+  return false;
+}
+
+export type TransitionStatus = FormStatus;
+export const NotPendingTransition: TransitionStatus = NotPending;
diff --git a/packages/react-markup/src/ReactMarkupClient.js b/packages/react-markup/src/ReactMarkupClient.js
new file mode 100644
index 00000000000..25ff9ebc0c3
--- /dev/null
+++ b/packages/react-markup/src/ReactMarkupClient.js
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+import type {ErrorInfo} from 'react-server/src/ReactFizzServer';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest as createFizzRequest,
+  startWork as startFizzWork,
+  startFlowing as startFizzFlowing,
+  abort as abortFizz,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  createRootFormatContext,
+} from './ReactFizzConfigMarkup';
+
+type MarkupOptions = {
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+};
+
+export function experimental_renderToHTML(
+  children: ReactNodeList,
+  options?: MarkupOptions,
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let buffer = '';
+    const fizzDestination = {
+      push(chunk: string | null): boolean {
+        if (chunk !== null) {
+          buffer += chunk;
+        } else {
+          // null indicates that we finished
+          resolve(buffer);
+        }
+        return true;
+      },
+      destroy(error: mixed) {
+        reject(error);
+      },
+    };
+    function handleError(error: mixed, errorInfo: ErrorInfo) {
+      // Any error rejects the promise, regardless of where it happened.
+      // Unlike other React SSR we don't want to put Suspense boundaries into
+      // client rendering mode because there's no client rendering here.
+      reject(error);
+
+      const onError = options && options.onError;
+      if (onError) {
+        onError(error, errorInfo);
+      }
+    }
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      undefined,
+    );
+    const fizzRequest = createFizzRequest(
+      children,
+      resumableState,
+      createRenderState(
+        resumableState,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+      ),
+      createRootFormatContext(),
+      Infinity,
+      handleError,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abortFizz(fizzRequest, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abortFizz(fizzRequest, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startFizzWork(fizzRequest);
+    startFizzFlowing(fizzRequest, fizzDestination);
+  });
+}
+
+export {ReactVersion as version};
diff --git a/packages/react-markup/src/ReactMarkupClient.stable.js b/packages/react-markup/src/ReactMarkupClient.stable.js
new file mode 100644
index 00000000000..b4aec8f7600
--- /dev/null
+++ b/packages/react-markup/src/ReactMarkupClient.stable.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-next-line react-internal/prod-error-codes
+throw new Error('react-markup should not get built in stable');
diff --git a/packages/react-markup/src/ReactMarkupLegacyClientStreamConfig.js b/packages/react-markup/src/ReactMarkupLegacyClientStreamConfig.js
new file mode 100644
index 00000000000..eaee8d45938
--- /dev/null
+++ b/packages/react-markup/src/ReactMarkupLegacyClientStreamConfig.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 StringDecoder = null;
+
+export function createStringDecoder(): null {
+  return null;
+}
+
+export function readPartialStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  throw new Error('Not implemented.');
+}
+
+export function readFinalStringChunk(
+  decoder: StringDecoder,
+  buffer: Uint8Array,
+): string {
+  throw new Error('Not implemented.');
+}
diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js
new file mode 100644
index 00000000000..5d22f1a4c94
--- /dev/null
+++ b/packages/react-markup/src/ReactMarkupServer.js
@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+import type {LazyComponent} from 'react/src/ReactLazy';
+import type {ErrorInfo} from 'react-server/src/ReactFizzServer';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import ReactSharedInternalsServer from 'react-server/src/ReactSharedInternalsServer';
+import ReactSharedInternalsClient from 'shared/ReactSharedInternals';
+
+import {
+  createRequest as createFlightRequest,
+  startWork as startFlightWork,
+  startFlowing as startFlightFlowing,
+  abort as abortFlight,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse as createFlightResponse,
+  createStreamState as createFlightStreamState,
+  getRoot as getFlightRoot,
+  processStringChunk as processFlightStringChunk,
+  close as closeFlight,
+} from 'react-client/src/ReactFlightClient';
+
+import {
+  createRequest as createFizzRequest,
+  startWork as startFizzWork,
+  startFlowing as startFizzFlowing,
+  abort as abortFizz,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  createRootFormatContext,
+} from './ReactFizzConfigMarkup';
+
+type ReactMarkupNodeList =
+  // This is the intersection of ReactNodeList and ReactClientValue minus
+  // Client/ServerReferences.
+  | component(...props: any)
+  | LazyComponent<ReactMarkupNodeList, any>
+  | React$Element<string>
+  | string
+  | boolean
+  | number
+  | symbol
+  | null
+  | void
+  | bigint
+  | $AsyncIterable<ReactMarkupNodeList, ReactMarkupNodeList, void>
+  | $AsyncIterator<ReactMarkupNodeList, ReactMarkupNodeList, void>
+  | Iterable<ReactMarkupNodeList>
+  | Iterator<ReactMarkupNodeList>
+  | Array<ReactMarkupNodeList>
+  | Promise<ReactMarkupNodeList>; // Thenable<ReactMarkupNodeList>
+
+type MarkupOptions = {
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
+};
+
+function noServerCallOrFormAction() {
+  throw new Error(
+    'renderToHTML should not have emitted Server References. This is a bug in React.',
+  );
+}
+
+export function experimental_renderToHTML(
+  children: ReactMarkupNodeList,
+  options?: MarkupOptions,
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const flightResponse = createFlightResponse(
+      null,
+      null,
+      null,
+      noServerCallOrFormAction,
+      noServerCallOrFormAction,
+      undefined,
+      undefined,
+      undefined,
+      false,
+      undefined,
+      undefined,
+      undefined,
+    );
+    const streamState = createFlightStreamState(flightResponse, null);
+    const flightDestination = {
+      push(chunk: string | null): boolean {
+        if (chunk !== null) {
+          processFlightStringChunk(flightResponse, streamState, chunk);
+        } else {
+          closeFlight(flightResponse);
+        }
+        return true;
+      },
+      destroy(error: mixed): void {
+        abortFizz(fizzRequest, error);
+        reject(error);
+      },
+    };
+    let buffer = '';
+    const fizzDestination = {
+      // $FlowFixMe[missing-local-annot]
+      push(chunk) {
+        if (chunk !== null) {
+          buffer += chunk;
+        } else {
+          // null indicates that we finished
+          resolve(buffer);
+        }
+        return true;
+      },
+      // $FlowFixMe[missing-local-annot]
+      destroy(error) {
+        abortFlight(flightRequest, error);
+        reject(error);
+      },
+    };
+
+    let stashErrorIdx = 1;
+    const stashedErrors: Map<string, mixed> = new Map();
+
+    function handleFlightError(error: mixed): string {
+      // For Flight errors we don't immediately reject, because they might not matter
+      // to the output of the HTML. We stash the error with a digest in case we need
+      // to get to the original error from the Fizz render.
+      const id = '' + stashErrorIdx++;
+      stashedErrors.set(id, error);
+      return id;
+    }
+
+    function handleError(error: mixed, errorInfo: ErrorInfo) {
+      if (typeof error === 'object' && error !== null) {
+        const id = error.digest;
+        // Note that the original error might be `undefined` so we need a has check.
+        if (typeof id === 'string' && stashedErrors.has(id)) {
+          // Get the original error thrown inside Flight.
+          error = stashedErrors.get(id);
+        }
+      }
+
+      // Any error rejects the promise, regardless of where it happened.
+      // Unlike other React SSR we don't want to put Suspense boundaries into
+      // client rendering mode because there's no client rendering here.
+      reject(error);
+
+      const onError = options && options.onError;
+      if (onError) {
+        if (__DEV__) {
+          const prevGetCurrentStackImpl =
+            ReactSharedInternalsServer.getCurrentStack;
+          // We're inside a "client" callback from Fizz but we only have access to the
+          // "server" runtime so to get access to a stack trace within this callback we
+          // need to override it to get it from the client runtime.
+          ReactSharedInternalsServer.getCurrentStack =
+            ReactSharedInternalsClient.getCurrentStack;
+          try {
+            onError(error, errorInfo);
+          } finally {
+            ReactSharedInternalsServer.getCurrentStack =
+              prevGetCurrentStackImpl;
+          }
+        } else {
+          onError(error, errorInfo);
+        }
+      }
+    }
+    const flightRequest = createFlightRequest(
+      // $FlowFixMe: This should be a subtype but not everything is typed covariant.
+      children,
+      null,
+      handleFlightError,
+      options ? options.identifierPrefix : undefined,
+      undefined,
+      'Markup',
+      undefined,
+      false,
+    );
+    const resumableState = createResumableState(
+      options ? options.identifierPrefix : undefined,
+      undefined,
+    );
+    const root = getFlightRoot<ReactNodeList>(flightResponse);
+    const fizzRequest = createFizzRequest(
+      // $FlowFixMe: Thenables as children are supported.
+      root,
+      resumableState,
+      createRenderState(
+        resumableState,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+      ),
+      createRootFormatContext(),
+      Infinity,
+      handleError,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abortFlight(flightRequest, (signal: any).reason);
+        abortFizz(fizzRequest, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abortFlight(flightRequest, (signal: any).reason);
+          abortFizz(fizzRequest, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startFlightWork(flightRequest);
+    startFlightFlowing(flightRequest, flightDestination);
+    startFizzWork(fizzRequest);
+    startFizzFlowing(fizzRequest, fizzDestination);
+  });
+}
+
+export {ReactVersion as version};
diff --git a/packages/react-markup/src/ReactMarkupServer.stable.js b/packages/react-markup/src/ReactMarkupServer.stable.js
new file mode 100644
index 00000000000..b4aec8f7600
--- /dev/null
+++ b/packages/react-markup/src/ReactMarkupServer.stable.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-next-line react-internal/prod-error-codes
+throw new Error('react-markup should not get built in stable');
diff --git a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
new file mode 100644
index 00000000000..e5f352bf40d
--- /dev/null
+++ b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
@@ -0,0 +1,240 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactMarkup;
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    String(str).replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+      return '\n    in ' + name + ' (at **)';
+    })
+  );
+}
+
+if (!__EXPERIMENTAL__) {
+  it('should not be built in stable', () => {
+    try {
+      require('react-markup');
+    } catch (x) {
+      return;
+    }
+    throw new Error('Expected react-markup not to exist in stable.');
+  });
+} else {
+  describe('ReactMarkup', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      React = require('react');
+      ReactMarkup = require('react-markup');
+    });
+
+    it('should be able to render a simple component', async () => {
+      function Component() {
+        return <div>hello world</div>;
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
+      expect(html).toBe('<div>hello world</div>');
+    });
+
+    it('should be able to render a large string', async () => {
+      function Component() {
+        return <div>{'hello '.repeat(200)}world</div>;
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(
+        React.createElement(Component),
+      );
+      expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
+    });
+
+    it('should prefix html tags with a doctype', async () => {
+      const html = await ReactMarkup.experimental_renderToHTML(
+        <html>
+          <body>hello</body>
+        </html>,
+      );
+      expect(html).toBe(
+        '<!DOCTYPE html><html><head></head><body>hello</body></html>',
+      );
+    });
+
+    it('should error on useState', async () => {
+      function Component() {
+        const [state] = React.useState('hello');
+        return <div>{state}</div>;
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).rejects.toThrow(
+        'Cannot use state or effect Hooks in renderToHTML because this component will never be hydrated.',
+      );
+    });
+
+    it('should error on refs passed to host components', async () => {
+      function Component() {
+        const ref = React.createRef();
+        return <div ref={ref} />;
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).rejects.toThrow(
+        'Cannot pass ref in renderToHTML because they will never be hydrated.',
+      );
+    });
+
+    it('should error on callbacks passed to event handlers', async () => {
+      function Component() {
+        function onClick() {
+          // This won't be able to be called.
+        }
+        return <div onClick={onClick} />;
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).rejects.toThrow(
+        'Cannot pass event handlers (onClick) in renderToHTML because the HTML will never be hydrated so they can never get called.',
+      );
+    });
+
+    it('supports the useId Hook', async () => {
+      function Component() {
+        const firstNameId = React.useId();
+        const lastNameId = React.useId();
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'h2',
+            {
+              id: firstNameId,
+            },
+            'First',
+          ),
+          React.createElement(
+            'p',
+            {
+              'aria-labelledby': firstNameId,
+            },
+            'Sebastian',
+          ),
+          React.createElement(
+            'h2',
+            {
+              id: lastNameId,
+            },
+            'Last',
+          ),
+          React.createElement(
+            'p',
+            {
+              'aria-labelledby': lastNameId,
+            },
+            'Smith',
+          ),
+        );
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
+      const container = document.createElement('div');
+      container.innerHTML = html;
+
+      expect(container.getElementsByTagName('h2')[0].id).toBe(
+        container.getElementsByTagName('p')[0].getAttribute('aria-labelledby'),
+      );
+      expect(container.getElementsByTagName('h2')[1].id).toBe(
+        container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
+      );
+
+      // It's not the same id between them.
+      expect(container.getElementsByTagName('h2')[0].id).not.toBe(
+        container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
+      );
+    });
+
+    // @gate disableClientCache
+    it('does NOT support cache yet because it is a client component', async () => {
+      let counter = 0;
+      const getCount = React.cache(() => {
+        return counter++;
+      });
+      function Component() {
+        const a = getCount();
+        const b = getCount();
+        return (
+          <div>
+            {a}
+            {b}
+          </div>
+        );
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
+      expect(html).toBe('<div>01</div>');
+    });
+
+    it('can get the component owner stacks for onError in dev', async () => {
+      const thrownError = new Error('hi');
+      const caughtErrors = [];
+
+      function Foo() {
+        return <Bar />;
+      }
+      function Bar() {
+        return (
+          <div>
+            <Baz />
+          </div>
+        );
+      }
+      function Baz({unused}) {
+        throw thrownError;
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(
+          <div>
+            <Foo />
+          </div>,
+          {
+            onError(error, errorInfo) {
+              caughtErrors.push({
+                error: error,
+                parentStack: errorInfo.componentStack,
+                ownerStack: React.captureOwnerStack
+                  ? React.captureOwnerStack()
+                  : null,
+              });
+            },
+          },
+        );
+      }).rejects.toThrow(thrownError);
+
+      expect(caughtErrors.length).toBe(1);
+      expect(caughtErrors[0].error).toBe(thrownError);
+      expect(normalizeCodeLocInfo(caughtErrors[0].parentStack)).toBe(
+        '\n    in Baz (at **)' +
+          '\n    in div (at **)' +
+          '\n    in Bar (at **)' +
+          '\n    in Foo (at **)' +
+          '\n    in div (at **)',
+      );
+      expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe(
+        __DEV__ ? '\n    in Bar (at **)' + '\n    in Foo (at **)' : null,
+      );
+    });
+  });
+}
diff --git a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
new file mode 100644
index 00000000000..e334141972e
--- /dev/null
+++ b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
@@ -0,0 +1,276 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+global.TextDecoder = require('util').TextDecoder;
+global.TextEncoder = require('util').TextEncoder;
+
+let React;
+let ReactMarkup;
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    String(str).replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+      return '\n    in ' + name + ' (at **)';
+    })
+  );
+}
+
+if (!__EXPERIMENTAL__) {
+  it('should not be built in stable', () => {
+    try {
+      require('react-markup');
+    } catch (x) {
+      return;
+    }
+    throw new Error('Expected react-markup not to exist in stable.');
+  });
+} else {
+  describe('ReactMarkup', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      // We run in the react-server condition.
+      jest.mock('react', () => require('react/react.react-server'));
+      if (__EXPERIMENTAL__) {
+        jest.mock('react-markup', () =>
+          require('react-markup/react-markup.react-server'),
+        );
+      }
+
+      React = require('react');
+      if (__EXPERIMENTAL__) {
+        ReactMarkup = require('react-markup');
+      } else {
+        try {
+          require('react-markup/react-markup.react-server');
+        } catch (x) {
+          return;
+        }
+        throw new Error('Expected react-markup not to exist in stable.');
+      }
+    });
+
+    it('should be able to render a simple component', async () => {
+      function Component() {
+        // We can't use JSX because that's client-JSX in our tests.
+        return React.createElement('div', null, 'hello world');
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(
+        React.createElement(Component),
+      );
+      expect(html).toBe('<div>hello world</div>');
+    });
+
+    it('should be able to render a large string', async () => {
+      function Component() {
+        // We can't use JSX because that's client-JSX in our tests.
+        return React.createElement('div', null, 'hello '.repeat(200) + 'world');
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(
+        React.createElement(Component),
+      );
+      expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
+    });
+
+    it('should prefix html tags with a doctype', async () => {
+      const html = await ReactMarkup.experimental_renderToHTML(
+        React.createElement(
+          'html',
+          null,
+          React.createElement('body', null, 'hello'),
+        ),
+      );
+      expect(html).toBe(
+        '<!DOCTYPE html><html><head></head><body>hello</body></html>',
+      );
+    });
+
+    it('should error on useState', async () => {
+      function Component() {
+        const [state] = React.useState('hello');
+        // We can't use JSX because that's client-JSX in our tests.
+        return React.createElement('div', null, state);
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement(Component),
+        );
+      }).rejects.toThrow('React.useState is not a function');
+    });
+
+    it('should error on refs passed to host components', async () => {
+      function Component() {
+        const ref = React.createRef();
+        // We can't use JSX because that's client-JSX in our tests.
+        return React.createElement('div', {ref});
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement(Component),
+        );
+      }).rejects.toThrow(
+        'Refs cannot be used in Server Components, nor passed to Client Components.',
+      );
+    });
+
+    it('should error on callbacks passed to event handlers', async () => {
+      function Component() {
+        function onClick() {
+          // This won't be able to be called.
+        }
+        // We can't use JSX because that's client-JSX in our tests.
+        return React.createElement('div', {onClick});
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement(Component),
+        );
+      }).rejects.toThrowError(
+        __DEV__
+          ? `Event handlers cannot be passed to Client Component props.\n` +
+              '  <div onClick={function onClick}>\n' +
+              '               ^^^^^^^^^^^^^^^^^^\n' +
+              'If you need interactivity, consider converting part of this to a Client Component.'
+          : `Event handlers cannot be passed to Client Component props.\n` +
+              '  {onClick: function onClick}\n' +
+              '            ^^^^^^^^^^^^^^^^\n' +
+              'If you need interactivity, consider converting part of this to a Client Component.',
+      );
+    });
+
+    it('supports the useId Hook', async () => {
+      function Component() {
+        const firstNameId = React.useId();
+        const lastNameId = React.useId();
+        // We can't use JSX because that's client-JSX in our tests.
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'h2',
+            {
+              id: firstNameId,
+            },
+            'First',
+          ),
+          React.createElement(
+            'p',
+            {
+              'aria-labelledby': firstNameId,
+            },
+            'Sebastian',
+          ),
+          React.createElement(
+            'h2',
+            {
+              id: lastNameId,
+            },
+            'Last',
+          ),
+          React.createElement(
+            'p',
+            {
+              'aria-labelledby': lastNameId,
+            },
+            'Smith',
+          ),
+        );
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(
+        React.createElement(Component),
+      );
+      const container = document.createElement('div');
+      container.innerHTML = html;
+
+      expect(container.getElementsByTagName('h2')[0].id).toBe(
+        container.getElementsByTagName('p')[0].getAttribute('aria-labelledby'),
+      );
+      expect(container.getElementsByTagName('h2')[1].id).toBe(
+        container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
+      );
+
+      // It's not the same id between them.
+      expect(container.getElementsByTagName('h2')[0].id).not.toBe(
+        container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
+      );
+    });
+
+    it('supports cache', async () => {
+      let counter = 0;
+      const getCount = React.cache(() => {
+        return counter++;
+      });
+      function Component() {
+        const a = getCount();
+        const b = getCount();
+        return React.createElement('div', null, a, b);
+      }
+
+      const html = await ReactMarkup.experimental_renderToHTML(
+        React.createElement(Component),
+      );
+      expect(html).toBe('<div>00</div>');
+    });
+
+    it('can get the component owner stacks for onError in dev', async () => {
+      const thrownError = new Error('hi');
+      const caughtErrors = [];
+
+      function Foo() {
+        return React.createElement(Bar);
+      }
+      function Bar() {
+        return React.createElement('div', null, React.createElement(Baz));
+      }
+      function Baz({unused}) {
+        throw thrownError;
+      }
+
+      await expect(async () => {
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement('div', null, React.createElement(Foo)),
+          {
+            onError(error, errorInfo) {
+              caughtErrors.push({
+                error: error,
+                parentStack: errorInfo.componentStack,
+                ownerStack: React.captureOwnerStack
+                  ? React.captureOwnerStack()
+                  : null,
+              });
+            },
+          },
+        );
+      }).rejects.toThrow(thrownError);
+
+      expect(caughtErrors.length).toBe(1);
+      expect(caughtErrors[0].error).toBe(thrownError);
+      expect(normalizeCodeLocInfo(caughtErrors[0].parentStack)).toBe(
+        __DEV__
+          ? '\n    in Baz (at **)' +
+              '\n    in div (at **)' +
+              '\n    in Bar (at **)' +
+              '\n    in Foo (at **)' +
+              '\n    in div (at **)'
+          : '\n    in div (at **)' + '\n    in div (at **)',
+      );
+      expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe(
+        __DEV__ ? '\n    in Bar (at **)' + '\n    in Foo (at **)' : null,
+      );
+    });
+  });
+}
diff --git a/packages/react-native-renderer/fabric.js b/packages/react-native-renderer/fabric.js
new file mode 100644
index 00000000000..1bf6c861c1f
--- /dev/null
+++ b/packages/react-native-renderer/fabric.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactFabricType} from './src/ReactNativeTypes';
+import * as ReactFabric from './src/ReactFabric';
+// Assert that the exports line up with the type we're going to expose.
+(ReactFabric: ReactFabricType);
+
+export * from './src/ReactFabric';
diff --git a/packages/react-native-renderer/index.js b/packages/react-native-renderer/index.js
new file mode 100644
index 00000000000..131c066ff44
--- /dev/null
+++ b/packages/react-native-renderer/index.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNativeType} from './src/ReactNativeTypes';
+import * as ReactNative from './src/ReactNativeRenderer';
+// Assert that the exports line up with the type we're going to expose.
+(ReactNative: ReactNativeType);
+
+// TODO: Delete the legacy renderer, only Fabric is used now.
+export * from './src/ReactNativeRenderer';
diff --git a/packages/react-native-renderer/package.json b/packages/react-native-renderer/package.json
new file mode 100644
index 00000000000..9dccf45b044
--- /dev/null
+++ b/packages/react-native-renderer/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "react-native-renderer",
+  "version": "16.0.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-native-renderer"
+  },
+  "dependencies": {
+    "scheduler": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  }
+}
diff --git a/packages/react-native-renderer/src/NativeMethodsMixinUtils.js b/packages/react-native-renderer/src/NativeMethodsMixinUtils.js
new file mode 100644
index 00000000000..bda6b263e35
--- /dev/null
+++ b/packages/react-native-renderer/src/NativeMethodsMixinUtils.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * In the future, we should cleanup callbacks by cancelling them instead of
+ * using this.
+ */
+export function mountSafeCallback_NOT_REALLY_SAFE(
+  context: any,
+  callback: ?Function,
+): any {
+  return function () {
+    if (!callback) {
+      return undefined;
+    }
+    // This protects against createClass() components.
+    // We don't know if there is code depending on it.
+    // We intentionally don't use isMounted() because even accessing
+    // isMounted property on a React ES6 class will trigger a warning.
+    if (typeof context.__isMounted === 'boolean') {
+      if (!context.__isMounted) {
+        return undefined;
+      }
+    }
+
+    // FIXME: there used to be other branches that protected
+    // against unmounted host components. But RN host components don't
+    // define isMounted() anymore, so those checks didn't do anything.
+
+    // They caused false positive warning noise so we removed them:
+    // https://github.com/facebook/react-native/issues/18868#issuecomment-413579095
+
+    // However, this means that the callback is NOT guaranteed to be safe
+    // for host components. The solution we should implement is to make
+    // UIManager.measure() and similar calls truly cancelable. Then we
+    // can change our own code calling them to cancel when something unmounts.
+
+    return callback.apply(context, arguments);
+  };
+}
+
+export function warnForStyleProps(props: any, validAttributes: any) {
+  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
new file mode 100644
index 00000000000..30c32433b3b
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactPortal, ReactNodeList} from 'shared/ReactTypes';
+import type {ElementRef, Element, ElementType} from 'react';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {RenderRootOptions} from './ReactNativeTypes';
+
+import './ReactFabricInjection';
+
+import {
+  batchedUpdates as batchedUpdatesImpl,
+  discreteUpdates,
+  createContainer,
+  updateContainer,
+  injectIntoDevTools,
+  getPublicRootInstance,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
+} from 'react-reconciler/src/ReactFiberReconciler';
+
+import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
+import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
+
+import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  findHostInstance_DEPRECATED,
+  findNodeHandle,
+  dispatchCommand,
+  sendAccessibilityEvent,
+  getNodeFromInternalInstanceHandle,
+  isChildPublicInstance,
+} from './ReactNativePublicCompat';
+import {getPublicInstanceFromInternalInstanceHandle} from './ReactFiberConfigFabric';
+
+// Module provided by RN:
+import {
+  ReactFiberErrorDialog,
+  createPublicRootInstance,
+  type PublicRootInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {
+  disableLegacyMode,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+
+if (typeof ReactFiberErrorDialog.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
+
+function nativeOnUncaughtError(
+  error: mixed,
+  errorInfo: {+componentStack?: ?string},
+): void {
+  const componentStack =
+    errorInfo.componentStack != null ? errorInfo.componentStack : '';
+  const logError = ReactFiberErrorDialog.showErrorDialog({
+    errorBoundary: null,
+    error,
+    componentStack,
+  });
+
+  // Allow injected showErrorDialog() to prevent default console.error logging.
+  // This enables renderers like ReactNative to better manage redbox behavior.
+  if (logError === false) {
+    return;
+  }
+
+  defaultOnUncaughtError(error, errorInfo);
+}
+function nativeOnCaughtError(
+  error: mixed,
+  errorInfo: {
+    +componentStack?: ?string,
+    +errorBoundary?: ?component(...props: any),
+  },
+): void {
+  const errorBoundary = errorInfo.errorBoundary;
+  const componentStack =
+    errorInfo.componentStack != null ? errorInfo.componentStack : '';
+  const logError = ReactFiberErrorDialog.showErrorDialog({
+    errorBoundary,
+    error,
+    componentStack,
+  });
+
+  // Allow injected showErrorDialog() to prevent default console.error logging.
+  // This enables renderers like ReactNative to better manage redbox behavior.
+  if (logError === false) {
+    return;
+  }
+
+  defaultOnCaughtError(error, errorInfo);
+}
+function nativeOnDefaultTransitionIndicator(): void | (() => void) {
+  // Native doesn't have a default indicator.
+}
+
+function render(
+  element: Element<ElementType>,
+  containerTag: number,
+  callback: ?() => void,
+  concurrentRoot: ?boolean,
+  options: ?RenderRootOptions,
+): ?ElementRef<ElementType> {
+  if (disableLegacyMode && !concurrentRoot) {
+    throw new Error('render: Unsupported Legacy Mode API.');
+  }
+
+  let root = roots.get(containerTag);
+
+  if (!root) {
+    // TODO: these defaults are for backwards compatibility.
+    // Once RN implements these options internally,
+    // we can remove the defaults and ReactFiberErrorDialog.
+    let onUncaughtError = nativeOnUncaughtError;
+    let onCaughtError = nativeOnCaughtError;
+    let onRecoverableError = defaultOnRecoverableError;
+
+    if (options && options.onUncaughtError !== undefined) {
+      onUncaughtError = options.onUncaughtError;
+    }
+    if (options && options.onCaughtError !== undefined) {
+      onCaughtError = options.onCaughtError;
+    }
+    if (options && options.onRecoverableError !== undefined) {
+      onRecoverableError = options.onRecoverableError;
+    }
+    let onDefaultTransitionIndicator = nativeOnDefaultTransitionIndicator;
+    if (enableDefaultTransitionIndicator) {
+      if (options && options.onDefaultTransitionIndicator !== undefined) {
+        onDefaultTransitionIndicator = options.onDefaultTransitionIndicator;
+      }
+    }
+
+    const publicRootInstance = createPublicRootInstance(containerTag);
+    const rootInstance = {
+      publicInstance: publicRootInstance,
+      containerTag,
+    };
+
+    // 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(
+      rootInstance,
+      concurrentRoot ? ConcurrentRoot : LegacyRoot,
+      null,
+      false,
+      null,
+      '',
+      onUncaughtError,
+      onCaughtError,
+      onRecoverableError,
+      onDefaultTransitionIndicator,
+      null,
+    );
+
+    roots.set(containerTag, root);
+  }
+  updateContainer(element, root, null, callback);
+
+  return getPublicRootInstance(root);
+}
+
+// $FlowFixMe[missing-this-annot]
+function unmountComponentAtNode(containerTag: number) {
+  this.stopSurface(containerTag);
+}
+
+function 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?
+    updateContainer(null, root, null, () => {
+      // Remove the reference to the public instance to prevent memory leaks.
+      root.containerInfo.publicInstance = null;
+
+      roots.delete(containerTag);
+    });
+  }
+}
+
+function createPortal(
+  children: ReactNodeList,
+  containerTag: number,
+  key: ?string = null,
+): ReactPortal {
+  return createPortalImpl(children, containerTag, null, key);
+}
+
+function getPublicInstanceFromRootTag(
+  rootTag: number,
+): PublicRootInstance | null {
+  const root = roots.get(rootTag);
+  if (root) {
+    return root.containerInfo.publicInstance;
+  }
+  return null;
+}
+
+setBatchingImplementation(batchedUpdatesImpl, discreteUpdates);
+
+const roots = new Map<number, FiberRoot>();
+
+export {
+  // This is needed for implementation details of TouchableNativeFeedback
+  // Remove this once TouchableNativeFeedback doesn't use cloneElement
+  findHostInstance_DEPRECATED,
+  findNodeHandle,
+  dispatchCommand,
+  sendAccessibilityEvent,
+  render,
+  // 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,
+  stopSurface,
+  createPortal,
+  // The public instance has a reference to the internal instance handle.
+  // This method allows it to acess the most recent shadow node for
+  // the instance (it's only accessible through it).
+  getNodeFromInternalInstanceHandle,
+  // Fabric native methods to traverse the host tree return the same internal
+  // instance handles we use to dispatch events. This provides a way to access
+  // the public instances we created from them (potentially created lazily).
+  getPublicInstanceFromInternalInstanceHandle,
+  // Returns the document instance for that root tag.
+  getPublicInstanceFromRootTag,
+  // DEV-only:
+  isChildPublicInstance,
+};
+
+injectIntoDevTools();
diff --git a/packages/react-native-renderer/src/ReactFabricComponentTree.js b/packages/react-native-renderer/src/ReactFabricComponentTree.js
new file mode 100644
index 00000000000..f36e742a45a
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFabricComponentTree.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+import type {
+  PublicInstance,
+  Instance,
+  Props,
+  TextInstance,
+} from './ReactFiberConfigFabric';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import {getPublicInstance} from './ReactFiberConfigFabric';
+
+// `node` is typed incorrectly here. The proper type should be `PublicInstance`.
+// This is ok in DOM because they types are interchangeable, but in React Native
+// they aren't.
+function getInstanceFromNode(node: Instance | TextInstance): Fiber | null {
+  const instance: Instance = (node: $FlowFixMe); // In React Native, node is never a text instance
+
+  if (
+    instance.canonical != null &&
+    instance.canonical.internalInstanceHandle != null
+  ) {
+    return instance.canonical.internalInstanceHandle;
+  }
+
+  // $FlowFixMe[incompatible-return] DevTools incorrectly passes a fiber in React Native.
+  return node;
+}
+
+function getNodeFromInstance(fiber: Fiber): PublicInstance {
+  const publicInstance = getPublicInstance(fiber.stateNode);
+
+  if (publicInstance == null) {
+    throw new Error('Could not find host instance from fiber');
+  }
+
+  return publicInstance;
+}
+
+function getFiberCurrentPropsFromNode(instance: Instance): Props {
+  return instance.canonical.currentProps;
+}
+
+export {
+  getInstanceFromNode,
+  getInstanceFromNode as getClosestInstanceFromNode,
+  getNodeFromInstance,
+  getFiberCurrentPropsFromNode,
+};
diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
new file mode 100644
index 00000000000..a0b8eb98b48
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  LegacyPluginModule,
+} from './legacy-events/PluginModuleType';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from './legacy-events/ReactSyntheticEventType';
+import type {
+  RNTopLevelEventType,
+  TopLevelType,
+} from './legacy-events/TopLevelEventTypes';
+
+import {
+  registrationNameModules,
+  plugins,
+} from './legacy-events/EventPluginRegistry';
+import {batchedUpdates} from './legacy-events/ReactGenericBatching';
+import accumulateInto from './legacy-events/accumulateInto';
+
+import getListener from './ReactNativeGetListener';
+import {runEventsInBatch} from './legacy-events/EventBatching';
+
+import {RawEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {getPublicInstance} from './ReactFiberConfigFabric';
+
+export {getListener, registrationNameModules as registrationNames};
+
+/**
+ * Allows registered plugins an opportunity to extract events from top-level
+ * native browser events.
+ *
+ * @return {*} An accumulation of synthetic events.
+ * @internal
+ */
+function extractPluginEvents(
+  topLevelType: TopLevelType,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
+  let events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null = null;
+  const legacyPlugins = ((plugins: any): Array<LegacyPluginModule<Event>>);
+  for (let i = 0; i < legacyPlugins.length; i++) {
+    // Not every plugin in the ordering may be loaded at runtime.
+    const possiblePlugin: LegacyPluginModule<AnyNativeEvent> = legacyPlugins[i];
+    if (possiblePlugin) {
+      const extractedEvents = possiblePlugin.extractEvents(
+        topLevelType,
+        targetInst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      if (extractedEvents) {
+        events = accumulateInto(events, extractedEvents);
+      }
+    }
+  }
+  return events;
+}
+
+function runExtractedPluginEventsInBatch(
+  topLevelType: TopLevelType,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+) {
+  const events = extractPluginEvents(
+    topLevelType,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+  );
+  runEventsInBatch(events);
+}
+
+export function dispatchEvent(
+  target: null | Object,
+  topLevelType: RNTopLevelEventType,
+  nativeEvent: AnyNativeEvent,
+) {
+  const targetFiber = (target: null | Fiber);
+
+  let eventTarget = null;
+  if (targetFiber != null) {
+    const stateNode = targetFiber.stateNode;
+    // Guard against Fiber being unmounted
+    if (stateNode != null) {
+      // $FlowExpectedError[incompatible-cast] public instances in Fabric do not implement `EventTarget` yet.
+      eventTarget = (getPublicInstance(stateNode): EventTarget);
+    }
+  }
+
+  batchedUpdates(function () {
+    // Emit event to the RawEventEmitter. This is an unused-by-default EventEmitter
+    // that can be used to instrument event performance monitoring (primarily - could be useful
+    // for other things too).
+    //
+    // NOTE: this merely emits events into the EventEmitter below.
+    // If *you* do not add listeners to the `RawEventEmitter`,
+    // then all of these emitted events will just blackhole and are no-ops.
+    // It is available (although not officially supported... yet) if you want to collect
+    // perf data on event latency in your application, and could also be useful for debugging
+    // low-level events issues.
+    //
+    // If you do not have any event perf monitoring and are extremely concerned about event perf,
+    // it is safe to disable these "emit" statements; it will prevent checking the size of
+    // an empty array twice and prevent two no-ops. Practically the overhead is so low that
+    // we don't think it's worth thinking about in prod; your perf issues probably lie elsewhere.
+    //
+    // We emit two events here: one for listeners to this specific event,
+    // and one for the catchall listener '*', for any listeners that want
+    // to be notified for all events.
+    // Note that extracted events are *not* emitted,
+    // only events that have a 1:1 mapping with a native event, at least for now.
+    const event = {eventName: topLevelType, nativeEvent};
+    // $FlowFixMe[class-object-subtyping] found when upgrading Flow
+    RawEventEmitter.emit(topLevelType, event);
+    // $FlowFixMe[class-object-subtyping] found when upgrading Flow
+    RawEventEmitter.emit('*', event);
+
+    // Heritage plugin event system
+    runExtractedPluginEventsInBatch(
+      topLevelType,
+      targetFiber,
+      nativeEvent,
+      eventTarget,
+    );
+  });
+  // React Native doesn't use ReactControlledComponent but if it did, here's
+  // where it would do it.
+}
diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
new file mode 100644
index 00000000000..2ec797e9bd4
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactFabricGlobalResponderHandler = {
+  onChange: function (from: any, to: any, blockNativeResponder: boolean) {
+    if (from && from.stateNode) {
+      // equivalent to clearJSResponder
+      nativeFabricUIManager.setIsJSResponder(
+        from.stateNode.node,
+        false,
+        blockNativeResponder || false,
+      );
+    }
+
+    if (to && to.stateNode) {
+      // equivalent to setJSResponder
+      nativeFabricUIManager.setIsJSResponder(
+        to.stateNode.node,
+        true,
+        blockNativeResponder || false,
+      );
+    }
+  },
+};
+
+export default ReactFabricGlobalResponderHandler;
diff --git a/packages/react-native-renderer/src/ReactFabricInjection.js b/packages/react-native-renderer/src/ReactFabricInjection.js
new file mode 100644
index 00000000000..fb263f0b480
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFabricInjection.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactNativeInjectionShared';
+
+import {
+  getFiberCurrentPropsFromNode,
+  getInstanceFromNode,
+  getNodeFromInstance,
+} from './ReactFabricComponentTree';
+import {setComponentTree} from './legacy-events/EventPluginUtils';
+import ReactFabricGlobalResponderHandler from './ReactFabricGlobalResponderHandler';
+import ResponderEventPlugin from './legacy-events/ResponderEventPlugin';
+
+setComponentTree(
+  getFiberCurrentPropsFromNode,
+  getInstanceFromNode,
+  getNodeFromInstance,
+);
+
+ResponderEventPlugin.injection.injectGlobalResponderHandler(
+  ReactFabricGlobalResponderHandler,
+);
diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
new file mode 100644
index 00000000000..f5a4361fd41
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
@@ -0,0 +1,907 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  InspectorData,
+  TouchedViewDataAtPoint,
+  ViewConfig,
+} from './ReactNativeTypes';
+import {dispatchEvent} from './ReactFabricEventEmitter';
+import {
+  NoEventPriority,
+  DefaultEventPriority,
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  IdleEventPriority,
+  type EventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import {HostText} from 'react-reconciler/src/ReactWorkTags';
+import {
+  getFragmentParentHostFiber,
+  traverseFragmentInstance,
+} from 'react-reconciler/src/ReactFiberTreeReflection';
+
+// Modules provided by RN:
+import {
+  ReactNativeViewConfigRegistry,
+  deepFreezeAndThrowOnMutationInDev,
+  createPublicInstance,
+  createPublicTextInstance,
+  createAttributePayload,
+  diffAttributePayloads,
+  type PublicInstance as ReactNativePublicInstance,
+  type PublicTextInstance,
+  type PublicRootInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {enableFragmentRefsInstanceHandles} from 'shared/ReactFeatureFlags';
+
+const {
+  createNode,
+  cloneNodeWithNewChildren,
+  cloneNodeWithNewChildrenAndProps,
+  cloneNodeWithNewProps,
+  createChildSet: createChildNodeSet,
+  appendChild: appendChildNode,
+  appendChildToSet: appendChildNodeToSet,
+  completeRoot,
+  registerEventHandler,
+  unstable_DefaultEventPriority: FabricDefaultPriority,
+  unstable_DiscreteEventPriority: FabricDiscretePriority,
+  unstable_ContinuousEventPriority: FabricContinuousPriority,
+  unstable_IdleEventPriority: FabricIdlePriority,
+  unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
+} = nativeFabricUIManager;
+
+import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
+import {compareDocumentPositionForEmptyFragment} from 'shared/ReactDOMFragmentRefShared';
+
+import {
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+  getInspectorDataForInstance,
+} from './ReactNativeFiberInspector';
+
+import {passChildrenWhenCloningPersistedNodes} from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import type {ReactContext} from 'shared/ReactTypes';
+
+export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
+export const rendererPackageName = 'react-native-renderer';
+export const extraDevToolsConfig = {
+  getInspectorDataForInstance,
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+};
+
+const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
+
+// Counter for uniquely identifying views.
+// % 10 === 1 means it is a rootTag.
+// % 2 === 0 means it is a Fabric tag.
+// This means that they never overlap.
+let nextReactTag = 2;
+
+type InternalInstanceHandle = Object;
+
+export type Type = string;
+export type Props = Object;
+export type Instance = {
+  // Reference to the shadow node.
+  node: Node,
+  // This object is shared by all the clones of the instance.
+  // We use it to access their shared public instance (exposed through refs)
+  // and to access its committed state for events, etc.
+  canonical: {
+    nativeTag: number,
+    viewConfig: ViewConfig,
+    currentProps: Props,
+    // Reference to the React handle (the fiber)
+    internalInstanceHandle: InternalInstanceHandle,
+    // Exposed through refs. Potentially lazily created.
+    publicInstance: PublicInstance | null,
+    // This is only necessary to lazily create `publicInstance`.
+    // Will be set to `null` after that is created.
+    publicRootInstance?: PublicRootInstance | null,
+  },
+};
+export type TextInstance = {
+  // Reference to the shadow node.
+  node: Node,
+  // Text instances are never cloned, so we don't need to keep a "canonical"
+  // reference to make sure all clones of the instance point to the same values.
+  publicInstance?: PublicTextInstance,
+};
+export type HydratableInstance = Instance | TextInstance;
+export type PublicInstance = ReactNativePublicInstance;
+type PublicInstanceWithFragmentHandles = PublicInstance & {
+  unstable_reactFragments?: Set<FragmentInstanceType>,
+};
+export type Container = {
+  containerTag: number,
+  publicInstance: PublicRootInstance | null,
+};
+export type ChildSet = Object | Array<Node>;
+export type HostContext = $ReadOnly<{
+  isInAParentText: boolean,
+}>;
+export type UpdatePayload = Object;
+
+export type TimeoutHandle = TimeoutID;
+export type NoTimeout = -1;
+export type TransitionStatus = mixed;
+
+export type RendererInspectionConfig = $ReadOnly<{
+  getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
+  // Deprecated. Replaced with getInspectorDataForViewAtPoint.
+  getInspectorDataForViewTag?: (tag: number) => Object,
+  getInspectorDataForViewAtPoint?: (
+    inspectedView: Object,
+    locationX: number,
+    locationY: number,
+    callback: (viewData: TouchedViewDataAtPoint) => mixed,
+  ) => void,
+}>;
+
+// TODO: Remove this conditional once all changes have propagated.
+if (registerEventHandler) {
+  /**
+   * Register the event emitter with the native bridge
+   */
+  registerEventHandler(dispatchEvent);
+}
+
+export * from 'react-reconciler/src/ReactFiberConfigWithNoMutation';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
+
+export function appendInitialChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  appendChildNode(parentInstance.node, child.node);
+}
+
+const PROD_HOST_CONTEXT: HostContext = {isInAParentText: true};
+
+export function createInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  internalInstanceHandle: InternalInstanceHandle,
+): Instance {
+  const tag = nextReactTag;
+  nextReactTag += 2;
+
+  const viewConfig = getViewConfigForType(type);
+
+  if (__DEV__) {
+    for (const key in viewConfig.validAttributes) {
+      if (props.hasOwnProperty(key)) {
+        deepFreezeAndThrowOnMutationInDev(props[key]);
+      }
+    }
+  }
+
+  const updatePayload = createAttributePayload(
+    props,
+    viewConfig.validAttributes,
+  );
+
+  const node = createNode(
+    tag, // reactTag
+    viewConfig.uiViewClassName, // viewName
+    rootContainerInstance.containerTag, // rootTag
+    updatePayload, // props
+    internalInstanceHandle, // internalInstanceHandle
+  );
+
+  return {
+    node: node,
+    canonical: {
+      nativeTag: tag,
+      viewConfig,
+      currentProps: props,
+      internalInstanceHandle,
+      publicInstance: null,
+      publicRootInstance: rootContainerInstance.publicInstance,
+    },
+  };
+}
+
+export function createTextInstance(
+  text: string,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  internalInstanceHandle: InternalInstanceHandle,
+): TextInstance {
+  if (__DEV__) {
+    if (!hostContext.isInAParentText) {
+      console.error('Text strings must be rendered within a <Text> component.');
+    }
+  }
+
+  const tag = nextReactTag;
+  nextReactTag += 2;
+
+  const node = createNode(
+    tag, // reactTag
+    'RCTRawText', // viewName
+    rootContainerInstance.containerTag, // rootTag
+    {text: text}, // props
+    internalInstanceHandle, // instance handle
+  );
+
+  return {
+    node: node,
+  };
+}
+
+export function finalizeInitialChildren(
+  parentInstance: Instance,
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+): boolean {
+  return false;
+}
+
+export function getRootHostContext(
+  rootContainerInstance: Container,
+): HostContext {
+  if (__DEV__) {
+    return {isInAParentText: false};
+  }
+
+  return PROD_HOST_CONTEXT;
+}
+
+export function getChildHostContext(
+  parentHostContext: HostContext,
+  type: string,
+): HostContext {
+  if (__DEV__) {
+    const prevIsInAParentText = parentHostContext.isInAParentText;
+    const isInAParentText =
+      type === 'AndroidTextInput' || // Android
+      type === 'RCTMultilineTextInputView' || // iOS
+      type === 'RCTSinglelineTextInputView' || // iOS
+      type === 'RCTText' ||
+      type === 'RCTVirtualText';
+
+    // TODO: If this is an offscreen host container, we should reuse the
+    // parent context.
+
+    if (prevIsInAParentText !== isInAParentText) {
+      return {isInAParentText};
+    }
+  }
+
+  return parentHostContext;
+}
+
+export function getPublicInstance(instance: Instance): null | PublicInstance {
+  if (instance.canonical != null) {
+    if (instance.canonical.publicInstance == null) {
+      instance.canonical.publicInstance = createPublicInstance(
+        instance.canonical.nativeTag,
+        instance.canonical.viewConfig,
+        instance.canonical.internalInstanceHandle,
+        instance.canonical.publicRootInstance ?? null,
+      );
+      // This was only necessary to create the public instance.
+      instance.canonical.publicRootInstance = null;
+    }
+
+    return instance.canonical.publicInstance;
+  }
+
+  // Handle root containers
+  if (instance.containerInfo != null) {
+    if (instance.containerInfo.publicInstance != null) {
+      return instance.containerInfo.publicInstance;
+    }
+  }
+
+  // For compatibility with the legacy renderer, in case it's used with Fabric
+  // in the same app.
+  // $FlowExpectedError[prop-missing]
+  if (instance._nativeTag != null) {
+    // $FlowExpectedError[incompatible-return]
+    return instance;
+  }
+
+  return null;
+}
+
+function getPublicTextInstance(
+  textInstance: TextInstance,
+  internalInstanceHandle: InternalInstanceHandle,
+): PublicTextInstance {
+  if (textInstance.publicInstance == null) {
+    textInstance.publicInstance = createPublicTextInstance(
+      internalInstanceHandle,
+    );
+  }
+  return textInstance.publicInstance;
+}
+
+export function getPublicInstanceFromInternalInstanceHandle(
+  internalInstanceHandle: InternalInstanceHandle,
+): null | PublicInstance | PublicTextInstance {
+  const instance = internalInstanceHandle.stateNode;
+
+  // React resets all the fields in the fiber when the component is unmounted
+  // to prevent memory leaks.
+  if (instance == null) {
+    return null;
+  }
+
+  if (internalInstanceHandle.tag === HostText) {
+    const textInstance: TextInstance = instance;
+    return getPublicTextInstance(textInstance, internalInstanceHandle);
+  }
+
+  const elementInstance: Instance = internalInstanceHandle.stateNode;
+  return getPublicInstance(elementInstance);
+}
+
+function getPublicInstanceFromHostFiber(fiber: Fiber): PublicInstance {
+  const publicInstance = getPublicInstance(fiber.stateNode);
+  if (publicInstance === null) {
+    throw new Error('Expected to find a host node. This is a bug in React.');
+  }
+  return publicInstance;
+}
+
+export function prepareForCommit(containerInfo: Container): null | Object {
+  // Noop
+  return null;
+}
+
+export function resetAfterCommit(containerInfo: Container): void {
+  // Noop
+}
+
+export function shouldSetTextContent(type: string, props: Props): boolean {
+  // TODO (bvaughn) Revisit this decision.
+  // Always returning false simplifies the createInstance() implementation,
+  // But creates an additional child Fiber for raw text children.
+  // No additional native views are created though.
+  // It's not clear to me which is better so I'm deferring for now.
+  // More context @ github.com/facebook/react/pull/8560#discussion_r92111303
+  return false;
+}
+
+let currentUpdatePriority: EventPriority = NoEventPriority;
+export function setCurrentUpdatePriority(newPriority: EventPriority): void {
+  currentUpdatePriority = newPriority;
+}
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return currentUpdatePriority;
+}
+
+export function resolveUpdatePriority(): EventPriority {
+  if (currentUpdatePriority !== NoEventPriority) {
+    return currentUpdatePriority;
+  }
+
+  const currentEventPriority = fabricGetCurrentEventPriority
+    ? fabricGetCurrentEventPriority()
+    : null;
+
+  if (currentEventPriority != null) {
+    switch (currentEventPriority) {
+      case FabricDiscretePriority:
+        return DiscreteEventPriority;
+      case FabricContinuousPriority:
+        return ContinuousEventPriority;
+      case FabricIdlePriority:
+        return IdleEventPriority;
+      case FabricDefaultPriority:
+      default:
+        return DefaultEventPriority;
+    }
+  }
+
+  return DefaultEventPriority;
+}
+
+export function trackSchedulerEvent(): void {}
+
+export function resolveEventType(): null | string {
+  return null;
+}
+
+export function resolveEventTimeStamp(): number {
+  return -1.1;
+}
+
+export function shouldAttemptEagerTransition(): boolean {
+  return false;
+}
+
+// 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 = -1;
+
+// -------------------
+//     Persistence
+// -------------------
+
+export const supportsPersistence = true;
+
+export function cloneInstance(
+  instance: Instance,
+  type: string,
+  oldProps: Props,
+  newProps: Props,
+  keepChildren: boolean,
+  newChildSet: ?ChildSet,
+): Instance {
+  const viewConfig = instance.canonical.viewConfig;
+  const updatePayload = diffAttributePayloads(
+    oldProps,
+    newProps,
+    viewConfig.validAttributes,
+  );
+  // TODO: If the event handlers have changed, we need to update the current props
+  // in the commit phase but there is no host config hook to do it yet.
+  // So instead we hack it by updating it in the render phase.
+  instance.canonical.currentProps = newProps;
+
+  const node = instance.node;
+  let clone;
+  if (keepChildren) {
+    if (updatePayload !== null) {
+      clone = cloneNodeWithNewProps(node, updatePayload);
+    } else {
+      // No changes
+      return instance;
+    }
+  } else {
+    // If passChildrenWhenCloningPersistedNodes is enabled, children will be non-null
+    if (newChildSet != null) {
+      if (updatePayload !== null) {
+        clone = cloneNodeWithNewChildrenAndProps(
+          node,
+          newChildSet,
+          updatePayload,
+        );
+      } else {
+        clone = cloneNodeWithNewChildren(node, newChildSet);
+      }
+    } else {
+      if (updatePayload !== null) {
+        clone = cloneNodeWithNewChildrenAndProps(node, updatePayload);
+      } else {
+        clone = cloneNodeWithNewChildren(node);
+      }
+    }
+  }
+
+  return {
+    node: clone,
+    canonical: instance.canonical,
+  };
+}
+
+export function cloneHiddenInstance(
+  instance: Instance,
+  type: string,
+  props: Props,
+): Instance {
+  const viewConfig = instance.canonical.viewConfig;
+  const node = instance.node;
+  const updatePayload = createAttributePayload(
+    {style: {display: 'none'}},
+    viewConfig.validAttributes,
+  );
+  return {
+    node: cloneNodeWithNewProps(node, updatePayload),
+    canonical: instance.canonical,
+  };
+}
+
+export function cloneHiddenTextInstance(
+  instance: Instance,
+  text: string,
+): TextInstance {
+  throw new Error('Not yet implemented.');
+}
+
+export function createContainerChildSet(): ChildSet {
+  if (passChildrenWhenCloningPersistedNodes) {
+    return [];
+  } else {
+    return createChildNodeSet();
+  }
+}
+
+export function appendChildToContainerChildSet(
+  childSet: ChildSet,
+  child: Instance | TextInstance,
+): void {
+  if (passChildrenWhenCloningPersistedNodes) {
+    childSet.push(child.node);
+  } else {
+    appendChildNodeToSet(childSet, child.node);
+  }
+}
+
+export function finalizeContainerChildren(
+  container: Container,
+  newChildren: ChildSet,
+): void {
+  // Noop - children will be replaced in replaceContainerChildren
+}
+
+export function replaceContainerChildren(
+  container: Container,
+  newChildren: ChildSet,
+): void {
+  completeRoot(container.containerTag, newChildren);
+}
+
+export {getClosestInstanceFromNode as getInstanceFromNode};
+
+export function beforeActiveInstanceBlur(
+  internalInstanceHandle: InternalInstanceHandle,
+) {
+  // noop
+}
+
+export function afterActiveInstanceBlur() {
+  // noop
+}
+
+export function preparePortalMount(portalInstance: Instance): void {
+  // noop
+}
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
+
+export function maySuspendCommit(type: Type, props: Props): boolean {
+  return false;
+}
+
+export function maySuspendCommitOnUpdate(
+  type: Type,
+  oldProps: Props,
+  newProps: Props,
+): boolean {
+  return false;
+}
+
+export function maySuspendCommitInSyncRender(
+  type: Type,
+  props: Props,
+): boolean {
+  return false;
+}
+
+export function preloadInstance(
+  instance: Instance,
+  type: Type,
+  props: Props,
+): boolean {
+  return true;
+}
+
+export opaque type SuspendedState = null;
+
+export function startSuspendingCommit(): SuspendedState {
+  return null;
+}
+
+export function suspendInstance(
+  state: SuspendedState,
+  instance: Instance,
+  type: Type,
+  props: Props,
+): void {}
+
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  container: Container,
+): void {}
+
+export function waitForCommitToBeReady(
+  state: SuspendedState,
+  timeoutOffset: number,
+): null {
+  return null;
+}
+
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  return null;
+}
+
+export type FragmentInstanceType = {
+  _fragmentFiber: Fiber,
+  _observers: null | Set<IntersectionObserver>,
+  observeUsing: (observer: IntersectionObserver) => void,
+  unobserveUsing: (observer: IntersectionObserver) => void,
+  compareDocumentPosition: (otherNode: PublicInstance) => number,
+  getRootNode(getRootNodeOptions?: {
+    composed: boolean,
+  }): Node | FragmentInstanceType,
+  getClientRects: () => Array<DOMRect>,
+};
+
+function FragmentInstance(this: FragmentInstanceType, fragmentFiber: Fiber) {
+  this._fragmentFiber = fragmentFiber;
+  this._observers = null;
+}
+
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.observeUsing = function (
+  this: FragmentInstanceType,
+  observer: IntersectionObserver,
+): void {
+  if (this._observers === null) {
+    this._observers = new Set();
+  }
+  this._observers.add(observer);
+  traverseFragmentInstance(this._fragmentFiber, observeChild, observer);
+};
+function observeChild(child: Fiber, observer: IntersectionObserver) {
+  const publicInstance = getPublicInstanceFromHostFiber(child);
+  // $FlowFixMe[incompatible-call] DOM types expect Element
+  observer.observe(publicInstance);
+  return false;
+}
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.unobserveUsing = function (
+  this: FragmentInstanceType,
+  observer: IntersectionObserver,
+): void {
+  const observers = this._observers;
+  if (observers === null || !observers.has(observer)) {
+    if (__DEV__) {
+      console.error(
+        'You are calling unobserveUsing() with an observer that is not being observed with this fragment ' +
+          'instance. First attach the observer with observeUsing()',
+      );
+    }
+  } else {
+    observers.delete(observer);
+    traverseFragmentInstance(this._fragmentFiber, unobserveChild, observer);
+  }
+};
+function unobserveChild(child: Fiber, observer: IntersectionObserver) {
+  const publicInstance = getPublicInstanceFromHostFiber(child);
+  // $FlowFixMe[incompatible-call] DOM types expect Element
+  observer.unobserve(publicInstance);
+  return false;
+}
+
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.compareDocumentPosition = function (
+  this: FragmentInstanceType,
+  otherNode: PublicInstance,
+): number {
+  const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
+  if (parentHostFiber === null) {
+    return Node.DOCUMENT_POSITION_DISCONNECTED;
+  }
+  const children: Array<Fiber> = [];
+  traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
+  if (children.length === 0) {
+    const parentHostInstance = getPublicInstanceFromHostFiber(parentHostFiber);
+    return compareDocumentPositionForEmptyFragment<PublicInstance>(
+      this._fragmentFiber,
+      parentHostInstance,
+      otherNode,
+      getPublicInstanceFromHostFiber,
+    );
+  }
+
+  const firstInstance = getPublicInstanceFromHostFiber(children[0]);
+  const lastInstance = getPublicInstanceFromHostFiber(
+    children[children.length - 1],
+  );
+
+  // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
+  // $FlowFixMe[prop-missing]
+  const firstResult = firstInstance.compareDocumentPosition(otherNode);
+  // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
+  // $FlowFixMe[prop-missing]
+  const lastResult = lastInstance.compareDocumentPosition(otherNode);
+
+  const otherNodeIsFirstOrLastChild =
+    firstInstance === otherNode || lastInstance === otherNode;
+  const otherNodeIsWithinFirstOrLastChild =
+    firstResult & Node.DOCUMENT_POSITION_CONTAINED_BY ||
+    lastResult & Node.DOCUMENT_POSITION_CONTAINED_BY;
+  const otherNodeIsBetweenFirstAndLastChildren =
+    firstResult & Node.DOCUMENT_POSITION_FOLLOWING &&
+    lastResult & Node.DOCUMENT_POSITION_PRECEDING;
+  let result;
+  if (
+    otherNodeIsFirstOrLastChild ||
+    otherNodeIsWithinFirstOrLastChild ||
+    otherNodeIsBetweenFirstAndLastChildren
+  ) {
+    result = Node.DOCUMENT_POSITION_CONTAINED_BY;
+  } else {
+    result = firstResult;
+  }
+
+  return result;
+};
+
+function collectChildren(child: Fiber, collection: Array<Fiber>): boolean {
+  collection.push(child);
+  return false;
+}
+
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.getRootNode = function (
+  this: FragmentInstanceType,
+  getRootNodeOptions?: {composed: boolean},
+): Node | FragmentInstanceType {
+  const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
+  if (parentHostFiber === null) {
+    return this;
+  }
+  const parentHostInstance = getPublicInstanceFromHostFiber(parentHostFiber);
+  // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
+  const rootNode = (parentHostInstance.getRootNode(getRootNodeOptions): Node);
+  return rootNode;
+};
+
+// $FlowFixMe[prop-missing]
+FragmentInstance.prototype.getClientRects = function (
+  this: FragmentInstanceType,
+): Array<DOMRect> {
+  const rects: Array<DOMRect> = [];
+  traverseFragmentInstance(this._fragmentFiber, collectClientRects, rects);
+  return rects;
+};
+function collectClientRects(child: Fiber, rects: Array<DOMRect>): boolean {
+  const instance = getPublicInstanceFromHostFiber(child);
+
+  // getBoundingClientRect is available on Fabric instances while getClientRects is not.
+  // This should work as a substitute in this case because the only equivalent of a multi-rect
+  // element in RN would be a nested Text component.
+  // Since we only use top-level nodes here, we can assume that getBoundingClientRect is sufficient.
+  // $FlowFixMe[method-unbinding]
+  // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
+  rects.push(instance.getBoundingClientRect());
+  return false;
+}
+
+function addFragmentHandleToFiber(
+  child: Fiber,
+  fragmentInstance: FragmentInstanceType,
+): boolean {
+  if (enableFragmentRefsInstanceHandles) {
+    const instance = ((getPublicInstanceFromHostFiber(
+      child,
+    ): any): PublicInstanceWithFragmentHandles);
+    if (instance != null) {
+      addFragmentHandleToInstance(instance, fragmentInstance);
+    }
+  }
+  return false;
+}
+
+function addFragmentHandleToInstance(
+  instance: PublicInstanceWithFragmentHandles,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  if (enableFragmentRefsInstanceHandles) {
+    if (instance.unstable_reactFragments == null) {
+      instance.unstable_reactFragments = new Set();
+    }
+    instance.unstable_reactFragments.add(fragmentInstance);
+  }
+}
+
+export function createFragmentInstance(
+  fragmentFiber: Fiber,
+): FragmentInstanceType {
+  const fragmentInstance = new (FragmentInstance: any)(fragmentFiber);
+  if (enableFragmentRefsInstanceHandles) {
+    traverseFragmentInstance(
+      fragmentFiber,
+      addFragmentHandleToFiber,
+      fragmentInstance,
+    );
+  }
+  return fragmentInstance;
+}
+
+export function updateFragmentInstanceFiber(
+  fragmentFiber: Fiber,
+  instance: FragmentInstanceType,
+): void {
+  instance._fragmentFiber = fragmentFiber;
+}
+
+export function commitNewChildToFragmentInstance(
+  childInstance: Instance,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  const publicInstance = getPublicInstance(childInstance);
+  if (fragmentInstance._observers !== null) {
+    if (publicInstance == null) {
+      throw new Error('Expected to find a host node. This is a bug in React.');
+    }
+    fragmentInstance._observers.forEach(observer => {
+      // $FlowFixMe[incompatible-call] Element types are behind a flag in RN
+      observer.observe(publicInstance);
+    });
+  }
+  if (enableFragmentRefsInstanceHandles) {
+    addFragmentHandleToInstance(
+      ((publicInstance: any): PublicInstanceWithFragmentHandles),
+      fragmentInstance,
+    );
+  }
+}
+
+export function deleteChildFromFragmentInstance(
+  childInstance: Instance,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  const publicInstance = ((getPublicInstance(
+    childInstance,
+  ): any): PublicInstanceWithFragmentHandles);
+  if (enableFragmentRefsInstanceHandles) {
+    if (publicInstance.unstable_reactFragments != null) {
+      publicInstance.unstable_reactFragments.delete(fragmentInstance);
+    }
+  }
+}
+
+export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
+
+export type FormInstance = Instance;
+export function resetFormInstance(form: Instance): void {}
+
+// -------------------
+//     Microtasks
+// -------------------
+
+export const supportsMicrotasks: boolean =
+  typeof RN$enableMicrotasksInReact !== 'undefined' &&
+  !!RN$enableMicrotasksInReact;
+
+export const scheduleMicrotask: any =
+  typeof queueMicrotask === 'function' ? queueMicrotask : scheduleTimeout;
diff --git a/packages/react-native-renderer/src/ReactFiberConfigNative.js b/packages/react-native-renderer/src/ReactFiberConfigNative.js
new file mode 100644
index 00000000000..fcf356776c2
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactFiberConfigNative.js
@@ -0,0 +1,844 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {InspectorData, TouchedViewDataAtPoint} from './ReactNativeTypes';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+
+// Modules provided by RN:
+import {
+  ReactNativeViewConfigRegistry,
+  UIManager,
+  deepFreezeAndThrowOnMutationInDev,
+  createPublicInstance,
+  type PublicRootInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+import {create, diff} from './ReactNativeAttributePayload';
+import {
+  precacheFiberNode,
+  uncacheFiberNode,
+  updateFiberProps,
+  getClosestInstanceFromNode,
+} from './ReactNativeComponentTree';
+import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
+
+import {
+  DefaultEventPriority,
+  NoEventPriority,
+  type EventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import type {ReactContext} from 'shared/ReactTypes';
+
+import {
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+  getInspectorDataForInstance,
+} from './ReactNativeFiberInspector';
+
+export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
+export const rendererPackageName = 'react-native-renderer';
+export const extraDevToolsConfig = {
+  getInspectorDataForInstance,
+  getInspectorDataForViewTag,
+  getInspectorDataForViewAtPoint,
+};
+
+const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
+
+export type Type = string;
+export type Props = Object;
+export type Container = {
+  containerTag: number,
+  publicInstance: PublicRootInstance | null,
+};
+export type Instance = ReactNativeFiberHostComponent;
+export type TextInstance = number;
+export type HydratableInstance = Instance | TextInstance;
+export type PublicInstance = Instance;
+export type HostContext = $ReadOnly<{
+  isInAParentText: boolean,
+}>;
+export type UpdatePayload = Object; // Unused
+export type ChildSet = void; // Unused
+
+export type TimeoutHandle = TimeoutID;
+export type NoTimeout = -1;
+export type TransitionStatus = mixed;
+
+export type RendererInspectionConfig = $ReadOnly<{
+  getInspectorDataForInstance?: (instance: Fiber | null) => InspectorData,
+  // Deprecated. Replaced with getInspectorDataForViewAtPoint.
+  getInspectorDataForViewTag?: (tag: number) => Object,
+  getInspectorDataForViewAtPoint?: (
+    inspectedView: Object,
+    locationX: number,
+    locationY: number,
+    callback: (viewData: TouchedViewDataAtPoint) => mixed,
+  ) => void,
+}>;
+
+// Counter for uniquely identifying views.
+// % 10 === 1 means it is a rootTag.
+// % 2 === 0 means it is a Fabric tag.
+let nextReactTag = 3;
+function allocateTag() {
+  let tag = nextReactTag;
+  if (tag % 10 === 1) {
+    tag += 2;
+  }
+  nextReactTag = tag + 2;
+  return tag;
+}
+
+function recursivelyUncacheFiberNode(node: Instance | TextInstance) {
+  if (typeof node === 'number') {
+    // Leaf node (eg text)
+    uncacheFiberNode(node);
+  } else {
+    uncacheFiberNode((node: any)._nativeTag);
+
+    (node: any)._children.forEach(recursivelyUncacheFiberNode);
+  }
+}
+
+export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoMicrotasks';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
+
+export function appendInitialChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  parentInstance._children.push(child);
+}
+
+export function createInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  internalInstanceHandle: Object,
+): Instance {
+  const tag = allocateTag();
+  const viewConfig = getViewConfigForType(type);
+
+  if (__DEV__) {
+    for (const key in viewConfig.validAttributes) {
+      if (props.hasOwnProperty(key)) {
+        deepFreezeAndThrowOnMutationInDev(props[key]);
+      }
+    }
+  }
+
+  const updatePayload = create(props, viewConfig.validAttributes);
+
+  UIManager.createView(
+    tag, // reactTag
+    viewConfig.uiViewClassName, // viewName
+    rootContainerInstance.containerTag, // rootTag
+    updatePayload, // props
+  );
+
+  const component = new ReactNativeFiberHostComponent(
+    tag,
+    viewConfig,
+    internalInstanceHandle,
+  );
+
+  precacheFiberNode(internalInstanceHandle, tag);
+  updateFiberProps(tag, props);
+
+  // Not sure how to avoid this cast. Flow is okay if the component is defined
+  // in the same file but if it's external it can't see the types.
+  return ((component: any): Instance);
+}
+
+export function cloneMutableInstance(
+  instance: Instance,
+  keepChildren: boolean,
+): Instance {
+  throw new Error('Not yet implemented.');
+}
+
+export function createTextInstance(
+  text: string,
+  rootContainerInstance: Container,
+  hostContext: HostContext,
+  internalInstanceHandle: Object,
+): TextInstance {
+  if (!hostContext.isInAParentText) {
+    throw new Error('Text strings must be rendered within a <Text> component.');
+  }
+
+  const tag = allocateTag();
+
+  UIManager.createView(
+    tag, // reactTag
+    'RCTRawText', // viewName
+    rootContainerInstance.containerTag, // rootTag
+    {text: text}, // props
+  );
+
+  precacheFiberNode(internalInstanceHandle, tag);
+
+  return tag;
+}
+
+export function cloneMutableTextInstance(
+  textInstance: TextInstance,
+): TextInstance {
+  throw new Error('Not yet implemented.');
+}
+
+export type FragmentInstanceType = null;
+
+export function createFragmentInstance(
+  fragmentFiber: Fiber,
+): FragmentInstanceType {
+  return null;
+}
+
+export function updateFragmentInstanceFiber(
+  fragmentFiber: Fiber,
+  instance: FragmentInstanceType,
+): void {
+  // Noop
+}
+
+export function commitNewChildToFragmentInstance(
+  child: PublicInstance,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  // Noop
+}
+
+export function deleteChildFromFragmentInstance(
+  child: PublicInstance,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  // Noop
+}
+
+export function finalizeInitialChildren(
+  parentInstance: Instance,
+  type: string,
+  props: Props,
+  hostContext: HostContext,
+): boolean {
+  // Don't send a no-op message over the bridge.
+  if (parentInstance._children.length === 0) {
+    return false;
+  }
+
+  // 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,
+  );
+
+  UIManager.setChildren(
+    parentInstance._nativeTag, // containerTag
+    nativeTags, // reactTags
+  );
+
+  return false;
+}
+
+export function getRootHostContext(
+  rootContainerInstance: Container,
+): HostContext {
+  return {isInAParentText: false};
+}
+
+export function getChildHostContext(
+  parentHostContext: HostContext,
+  type: string,
+): HostContext {
+  const prevIsInAParentText = parentHostContext.isInAParentText;
+  const isInAParentText =
+    type === 'AndroidTextInput' || // Android
+    type === 'RCTMultilineTextInputView' || // iOS
+    type === 'RCTSinglelineTextInputView' || // iOS
+    type === 'RCTText' ||
+    type === 'RCTVirtualText';
+
+  if (prevIsInAParentText !== isInAParentText) {
+    return {isInAParentText};
+  } else {
+    return parentHostContext;
+  }
+}
+
+export function getPublicInstance(instance: Instance): PublicInstance {
+  // $FlowExpectedError[prop-missing] For compatibility with Fabric
+  if (instance.canonical != null) {
+    if (instance.canonical.publicInstance == null) {
+      // $FlowExpectedError[incompatible-use]
+      instance.canonical.publicInstance = createPublicInstance(
+        // $FlowExpectedError[incompatible-use]
+        instance.canonical.nativeTag,
+        // $FlowExpectedError[incompatible-use]
+        instance.canonical.viewConfig,
+        // $FlowExpectedError[incompatible-use]
+        instance.canonical.internalInstanceHandle,
+        // $FlowExpectedError[incompatible-use]
+        instance.canonical.publicRootInstance ?? null,
+      );
+      // This was only necessary to create the public instance.
+      // $FlowExpectedError[prop-missing]
+      instance.canonical.publicRootInstance = null;
+    }
+
+    // $FlowExpectedError[prop-missing]
+    // $FlowExpectedError[incompatible-return]
+    return instance.canonical.publicInstance;
+  }
+
+  return instance;
+}
+
+export function prepareForCommit(containerInfo: Container): null | Object {
+  // Noop
+  return null;
+}
+
+export function resetAfterCommit(containerInfo: Container): void {
+  // Noop
+}
+
+export const isPrimaryRenderer = true;
+export const warnsIfNotActing = true;
+
+export const scheduleTimeout = setTimeout;
+export const cancelTimeout = clearTimeout;
+export const noTimeout: -1 = -1;
+
+export function shouldSetTextContent(type: string, props: Props): boolean {
+  // TODO (bvaughn) Revisit this decision.
+  // Always returning false simplifies the createInstance() implementation,
+  // But creates an additional child Fiber for raw text children.
+  // No additional native views are created though.
+  // It's not clear to me which is better so I'm deferring for now.
+  // More context @ github.com/facebook/react/pull/8560#discussion_r92111303
+  return false;
+}
+
+let currentUpdatePriority: EventPriority = NoEventPriority;
+export function setCurrentUpdatePriority(newPriority: EventPriority): void {
+  currentUpdatePriority = newPriority;
+}
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return currentUpdatePriority;
+}
+
+export function resolveUpdatePriority(): EventPriority {
+  if (currentUpdatePriority !== NoEventPriority) {
+    return currentUpdatePriority;
+  }
+  return DefaultEventPriority;
+}
+
+export function trackSchedulerEvent(): void {}
+
+export function resolveEventType(): null | string {
+  return null;
+}
+
+export function resolveEventTimeStamp(): number {
+  return -1.1;
+}
+
+export function shouldAttemptEagerTransition(): boolean {
+  return false;
+}
+
+// -------------------
+//     Mutation
+// -------------------
+
+export const supportsMutation = true;
+
+export function appendChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  const childTag = typeof child === 'number' ? child : child._nativeTag;
+  const children = parentInstance._children;
+  const index = children.indexOf(child);
+
+  if (index >= 0) {
+    children.splice(index, 1);
+    children.push(child);
+
+    UIManager.manageChildren(
+      parentInstance._nativeTag, // containerTag
+      [index], // moveFromIndices
+      [children.length - 1], // moveToIndices
+      [], // addChildReactTags
+      [], // addAtIndices
+      [], // removeAtIndices
+    );
+  } else {
+    children.push(child);
+
+    UIManager.manageChildren(
+      parentInstance._nativeTag, // containerTag
+      [], // moveFromIndices
+      [], // moveToIndices
+      [childTag], // addChildReactTags
+      [children.length - 1], // addAtIndices
+      [], // removeAtIndices
+    );
+  }
+}
+
+export function appendChildToContainer(
+  parentInstance: Container,
+  child: Instance | TextInstance,
+): void {
+  const childTag = typeof child === 'number' ? child : child._nativeTag;
+  UIManager.setChildren(
+    parentInstance.containerTag, // containerTag
+    [childTag], // reactTags
+  );
+}
+
+export function commitTextUpdate(
+  textInstance: TextInstance,
+  oldText: string,
+  newText: string,
+): void {
+  UIManager.updateView(
+    textInstance, // reactTag
+    'RCTRawText', // viewName
+    {text: newText}, // props
+  );
+}
+
+export function commitMount(
+  instance: Instance,
+  type: string,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {
+  // Noop
+}
+
+export function commitUpdate(
+  instance: Instance,
+  type: string,
+  oldProps: Props,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {
+  const viewConfig = instance.viewConfig;
+
+  updateFiberProps(instance._nativeTag, newProps);
+
+  const updatePayload = diff(oldProps, newProps, 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(
+      instance._nativeTag, // reactTag
+      viewConfig.uiViewClassName, // viewName
+      updatePayload, // props
+    );
+  }
+}
+
+export function insertBefore(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+  beforeChild: Instance | TextInstance,
+): void {
+  const children = (parentInstance: any)._children;
+  const index = children.indexOf(child);
+
+  // Move existing child or add new child?
+  if (index >= 0) {
+    children.splice(index, 1);
+    const beforeChildIndex = children.indexOf(beforeChild);
+    children.splice(beforeChildIndex, 0, child);
+
+    UIManager.manageChildren(
+      (parentInstance: any)._nativeTag, // containerID
+      [index], // moveFromIndices
+      [beforeChildIndex], // moveToIndices
+      [], // addChildReactTags
+      [], // addAtIndices
+      [], // removeAtIndices
+    );
+  } else {
+    const beforeChildIndex = children.indexOf(beforeChild);
+    children.splice(beforeChildIndex, 0, child);
+
+    const childTag = typeof child === 'number' ? child : child._nativeTag;
+
+    UIManager.manageChildren(
+      (parentInstance: any)._nativeTag, // containerID
+      [], // moveFromIndices
+      [], // moveToIndices
+      [childTag], // addChildReactTags
+      [beforeChildIndex], // addAtIndices
+      [], // removeAtIndices
+    );
+  }
+}
+
+export function insertInContainerBefore(
+  parentInstance: Container,
+  child: Instance | TextInstance,
+  beforeChild: Instance | TextInstance,
+): void {
+  // TODO (bvaughn): Remove this check when...
+  // We create a wrapper object for the container in ReactNative render()
+  // Or we refactor to remove wrapper objects entirely.
+  // For more info on pros/cons see PR #8560 description.
+  if (typeof parentInstance === 'number') {
+    throw new Error('Container does not support insertBefore operation');
+  }
+}
+
+export function removeChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  recursivelyUncacheFiberNode(child);
+  const children = parentInstance._children;
+  const index = children.indexOf(child);
+
+  children.splice(index, 1);
+
+  UIManager.manageChildren(
+    parentInstance._nativeTag, // containerID
+    [], // moveFromIndices
+    [], // moveToIndices
+    [], // addChildReactTags
+    [], // addAtIndices
+    [index], // removeAtIndices
+  );
+}
+
+export function removeChildFromContainer(
+  parentInstance: Container,
+  child: Instance | TextInstance,
+): void {
+  recursivelyUncacheFiberNode(child);
+  UIManager.manageChildren(
+    parentInstance.containerTag, // containerID
+    [], // moveFromIndices
+    [], // moveToIndices
+    [], // addChildReactTags
+    [], // addAtIndices
+    [0], // removeAtIndices
+  );
+}
+
+export function resetTextContent(instance: Instance): void {
+  // Noop
+}
+
+export function hideInstance(instance: Instance): void {
+  const viewConfig = instance.viewConfig;
+  const updatePayload = create(
+    {style: {display: 'none'}},
+    viewConfig.validAttributes,
+  );
+  UIManager.updateView(
+    instance._nativeTag,
+    viewConfig.uiViewClassName,
+    updatePayload,
+  );
+}
+
+export function hideTextInstance(textInstance: TextInstance): void {
+  throw new Error('Not yet implemented.');
+}
+
+export function unhideInstance(instance: Instance, props: Props): void {
+  const viewConfig = instance.viewConfig;
+  const updatePayload = diff(
+    {...props, style: [props.style, {display: 'none'}]},
+    props,
+    viewConfig.validAttributes,
+  );
+  UIManager.updateView(
+    instance._nativeTag,
+    viewConfig.uiViewClassName,
+    updatePayload,
+  );
+}
+
+export function applyViewTransitionName(
+  instance: Instance,
+  name: string,
+  className: ?string,
+): void {
+  // Not yet implemented
+}
+
+export function restoreViewTransitionName(
+  instance: Instance,
+  props: Props,
+): void {
+  // Not yet implemented
+}
+
+export function cancelViewTransitionName(
+  instance: Instance,
+  name: string,
+  props: Props,
+): void {
+  // Not yet implemented
+}
+
+export function cancelRootViewTransitionName(rootContainer: Container): void {
+  // Not yet implemented
+}
+
+export function restoreRootViewTransitionName(rootContainer: Container): void {
+  // Not yet implemented
+}
+
+export function cloneRootViewTransitionContainer(
+  rootContainer: Container,
+): Instance {
+  throw new Error('Not implemented.');
+}
+
+export function removeRootViewTransitionClone(
+  rootContainer: Container,
+  clone: Instance,
+): void {
+  throw new Error('Not implemented.');
+}
+
+export type InstanceMeasurement = null;
+
+export function measureInstance(instance: Instance): InstanceMeasurement {
+  // This heuristic is better implemented at the native layer.
+  return null;
+}
+
+export function measureClonedInstance(instance: Instance): InstanceMeasurement {
+  return null;
+}
+
+export function wasInstanceInViewport(
+  measurement: InstanceMeasurement,
+): boolean {
+  return true;
+}
+
+export function hasInstanceChanged(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  return false;
+}
+
+export function hasInstanceAffectedParent(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  return false;
+}
+
+export function startViewTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  layoutCallback: () => void,
+  afterMutationCallback: () => void,
+  spawnedWorkCallback: () => void,
+  passiveCallback: () => mixed,
+  errorCallback: mixed => void,
+  blockedCallback: string => void, // Profiling-only
+  finishedAnimation: () => void, // Profiling-only
+): null | RunningViewTransition {
+  mutationCallback();
+  layoutCallback();
+  // Skip afterMutationCallback(). We don't need it since we're not animating.
+  spawnedWorkCallback();
+  if (enableProfilerTimer) {
+    finishedAnimation();
+  }
+  // Skip passiveCallback(). Spawned work will schedule a task.
+  return null;
+}
+
+export type RunningViewTransition = null;
+
+export function startGestureTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  timeline: GestureTimeline,
+  rangeStart: number,
+  rangeEnd: number,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  animateCallback: () => void,
+  errorCallback: mixed => void,
+  finishedAnimation: () => void, // Profiling-only
+): null | RunningViewTransition {
+  mutationCallback();
+  animateCallback();
+  if (enableProfilerTimer) {
+    finishedAnimation();
+  }
+  return null;
+}
+
+export function stopViewTransition(transition: RunningViewTransition) {}
+
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  callback();
+}
+
+export type ViewTransitionInstance = null | {name: string, ...};
+
+export function createViewTransitionInstance(
+  name: string,
+): ViewTransitionInstance {
+  return null;
+}
+
+export type GestureTimeline = null;
+
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
+  throw new Error(
+    'startGestureTransition is not yet supported in React Native.',
+  );
+}
+
+export function clearContainer(container: Container): void {
+  // TODO Implement this for React Native
+  // UIManager does not expose a "remove all" type method.
+}
+
+export function unhideTextInstance(
+  textInstance: TextInstance,
+  text: string,
+): void {
+  throw new Error('Not yet implemented.');
+}
+
+export {getClosestInstanceFromNode as getInstanceFromNode};
+
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
+  // noop
+}
+
+export function afterActiveInstanceBlur() {
+  // noop
+}
+
+export function preparePortalMount(portalInstance: Instance): void {
+  // noop
+}
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
+
+export function maySuspendCommit(type: Type, props: Props): boolean {
+  return false;
+}
+
+export function maySuspendCommitOnUpdate(
+  type: Type,
+  oldProps: Props,
+  newProps: Props,
+): boolean {
+  return false;
+}
+
+export function maySuspendCommitInSyncRender(
+  type: Type,
+  props: Props,
+): boolean {
+  return false;
+}
+
+export function preloadInstance(
+  instance: Instance,
+  type: Type,
+  props: Props,
+): boolean {
+  // Return false to indicate it's already loaded
+  return true;
+}
+
+export opaque type SuspendedState = null;
+
+export function startSuspendingCommit(): SuspendedState {
+  return null;
+}
+
+export function suspendInstance(
+  state: SuspendedState,
+  instance: Instance,
+  type: Type,
+  props: Props,
+): void {}
+
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  container: Container,
+): void {}
+
+export function waitForCommitToBeReady(
+  state: SuspendedState,
+  timeoutOffset: number,
+): null {
+  return null;
+}
+
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  return null;
+}
+
+export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
+
+export type FormInstance = Instance;
+export function resetFormInstance(form: Instance): void {}
diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
new file mode 100644
index 00000000000..68ba068308b
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
@@ -0,0 +1,492 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Modules provided by RN:
+import {
+  deepDiffer,
+  flattenStyle,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import isArray from 'shared/isArray';
+
+import type {AttributeConfiguration} from './ReactNativeTypes';
+
+const emptyObject = {};
+
+/**
+ * Create a payload that contains all the updates between two sets of props.
+ *
+ * These helpers are all encapsulated into a single module, because they use
+ * mutation as a performance optimization which leads to subtle shared
+ * dependencies between the code paths. To avoid this mutable state leaking
+ * across modules, I've kept them isolated to this module.
+ */
+
+type NestedNode = Array<NestedNode> | Object;
+
+// Tracks removed keys
+let removedKeys: {[string]: boolean} | null = 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, deepDifferOptions);
+  }
+}
+
+function restoreDeletedValuesInNestedArray(
+  updatePayload: Object,
+  node: NestedNode,
+  validAttributes: AttributeConfiguration,
+) {
+  if (isArray(node)) {
+    let i = node.length;
+    while (i-- && removedKeyCount > 0) {
+      restoreDeletedValuesInNestedArray(
+        updatePayload,
+        node[i],
+        validAttributes,
+      );
+    }
+  } else if (node && removedKeyCount > 0) {
+    const obj = node;
+    for (const propKey in removedKeys) {
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      if (!removedKeys[propKey]) {
+        continue;
+      }
+      let nextProp = obj[propKey];
+      if (nextProp === undefined) {
+        continue;
+      }
+
+      const attributeConfig = validAttributes[propKey];
+      if (!attributeConfig) {
+        continue; // not a valid native prop
+      }
+
+      if (typeof nextProp === 'function') {
+        // $FlowFixMe[incompatible-type] found when upgrading Flow
+        nextProp = true;
+      }
+      if (typeof nextProp === 'undefined') {
+        // $FlowFixMe[incompatible-type] found when upgrading Flow
+        nextProp = null;
+      }
+
+      if (typeof attributeConfig !== 'object') {
+        // case: !Object is the default case
+        updatePayload[propKey] = nextProp;
+      } else if (
+        typeof attributeConfig.diff === 'function' ||
+        typeof attributeConfig.process === 'function'
+      ) {
+        // case: CustomAttributeConfiguration
+        const nextValue =
+          typeof attributeConfig.process === 'function'
+            ? attributeConfig.process(nextProp)
+            : nextProp;
+        updatePayload[propKey] = nextValue;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      removedKeys[propKey] = false;
+      removedKeyCount--;
+    }
+  }
+}
+
+function diffNestedArrayProperty(
+  updatePayload: null | Object,
+  prevArray: Array<NestedNode>,
+  nextArray: Array<NestedNode>,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  const minLength =
+    prevArray.length < nextArray.length ? prevArray.length : nextArray.length;
+  let i;
+  for (i = 0; i < minLength; i++) {
+    // Diff any items in the array in the forward direction. Repeated keys
+    // will be overwritten by later values.
+    updatePayload = diffNestedProperty(
+      updatePayload,
+      prevArray[i],
+      nextArray[i],
+      validAttributes,
+    );
+  }
+  for (; i < prevArray.length; i++) {
+    // Clear out all remaining properties.
+    updatePayload = clearNestedProperty(
+      updatePayload,
+      prevArray[i],
+      validAttributes,
+    );
+  }
+  for (; i < nextArray.length; i++) {
+    // Add all remaining properties.
+    updatePayload = addNestedProperty(
+      updatePayload,
+      nextArray[i],
+      validAttributes,
+    );
+  }
+  return updatePayload;
+}
+
+function diffNestedProperty(
+  updatePayload: null | Object,
+  prevProp: NestedNode,
+  nextProp: NestedNode,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  if (!updatePayload && prevProp === nextProp) {
+    // If no properties have been added, then we can bail out quickly on object
+    // equality.
+    return updatePayload;
+  }
+
+  if (!prevProp || !nextProp) {
+    if (nextProp) {
+      return addNestedProperty(updatePayload, nextProp, validAttributes);
+    }
+    if (prevProp) {
+      return clearNestedProperty(updatePayload, prevProp, validAttributes);
+    }
+    return updatePayload;
+  }
+
+  if (!isArray(prevProp) && !isArray(nextProp)) {
+    // Both are leaves, we can diff the leaves.
+    return diffProperties(updatePayload, prevProp, nextProp, validAttributes);
+  }
+
+  if (isArray(prevProp) && isArray(nextProp)) {
+    // Both are arrays, we can diff the arrays.
+    return diffNestedArrayProperty(
+      updatePayload,
+      prevProp,
+      nextProp,
+      validAttributes,
+    );
+  }
+
+  if (isArray(prevProp)) {
+    return diffProperties(
+      updatePayload,
+      flattenStyle(prevProp),
+      nextProp,
+      validAttributes,
+    );
+  }
+
+  return diffProperties(
+    updatePayload,
+    prevProp,
+    flattenStyle(nextProp),
+    validAttributes,
+  );
+}
+
+/**
+ * addNestedProperty takes a single set of props and valid attribute
+ * attribute configurations. It processes each prop and adds it to the
+ * updatePayload.
+ */
+function addNestedProperty(
+  updatePayload: null | Object,
+  nextProp: NestedNode,
+  validAttributes: AttributeConfiguration,
+): $FlowFixMe {
+  if (!nextProp) {
+    return updatePayload;
+  }
+
+  if (!isArray(nextProp)) {
+    // Add each property of the leaf.
+    return addProperties(updatePayload, nextProp, validAttributes);
+  }
+
+  for (let i = 0; i < nextProp.length; i++) {
+    // Add all the properties of the array.
+    updatePayload = addNestedProperty(
+      updatePayload,
+      nextProp[i],
+      validAttributes,
+    );
+  }
+
+  return updatePayload;
+}
+
+/**
+ * clearNestedProperty takes a single set of props and valid attributes. It
+ * adds a null sentinel to the updatePayload, for each prop key.
+ */
+function clearNestedProperty(
+  updatePayload: null | Object,
+  prevProp: NestedNode,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  if (!prevProp) {
+    return updatePayload;
+  }
+
+  if (!isArray(prevProp)) {
+    // Add each property of the leaf.
+    return clearProperties(updatePayload, prevProp, validAttributes);
+  }
+
+  for (let i = 0; i < prevProp.length; i++) {
+    // Add all the properties of the array.
+    updatePayload = clearNestedProperty(
+      updatePayload,
+      prevProp[i],
+      validAttributes,
+    );
+  }
+  return updatePayload;
+}
+
+/**
+ * diffProperties takes two sets of props and a set of valid attributes
+ * and write to updatePayload the values that changed or were deleted.
+ * If no updatePayload is provided, a new one is created and returned if
+ * anything changed.
+ */
+function diffProperties(
+  updatePayload: null | Object,
+  prevProps: Object,
+  nextProps: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  let attributeConfig;
+  let nextProp;
+  let prevProp;
+
+  for (const propKey in nextProps) {
+    attributeConfig = validAttributes[propKey];
+    if (!attributeConfig) {
+      continue; // not a valid native prop
+    }
+
+    prevProp = prevProps[propKey];
+    nextProp = nextProps[propKey];
+
+    // functions are converted to booleans as markers that the associated
+    // events should be sent from native.
+    if (typeof nextProp === 'function') {
+      nextProp = (true: any);
+      // If nextProp is not a function, then don't bother changing prevProp
+      // since nextProp will win and go into the updatePayload regardless.
+      if (typeof prevProp === 'function') {
+        prevProp = (true: any);
+      }
+    }
+
+    // An explicit value of undefined is treated as a null because it overrides
+    // any other preceding value.
+    if (typeof nextProp === 'undefined') {
+      nextProp = (null: any);
+      if (typeof prevProp === 'undefined') {
+        prevProp = (null: any);
+      }
+    }
+
+    if (removedKeys) {
+      removedKeys[propKey] = false;
+    }
+
+    if (updatePayload && updatePayload[propKey] !== undefined) {
+      // Something else already triggered an update to this key because another
+      // value diffed. Since we're now later in the nested arrays our value is
+      // more important so we need to calculate it and override the existing
+      // value. It doesn't matter if nothing changed, we'll set it anyway.
+
+      // Pattern match on: attributeConfig
+      if (typeof attributeConfig !== 'object') {
+        // case: !Object is the default case
+        updatePayload[propKey] = nextProp;
+      } else if (
+        typeof attributeConfig.diff === 'function' ||
+        typeof attributeConfig.process === 'function'
+      ) {
+        // case: CustomAttributeConfiguration
+        const nextValue =
+          typeof attributeConfig.process === 'function'
+            ? attributeConfig.process(nextProp)
+            : nextProp;
+        updatePayload[propKey] = nextValue;
+      }
+      continue;
+    }
+
+    if (prevProp === nextProp) {
+      continue; // nothing changed
+    }
+
+    // Pattern match on: attributeConfig
+    if (typeof attributeConfig !== 'object') {
+      // case: !Object is the default case
+      if (defaultDiffer(prevProp, nextProp)) {
+        // a normal leaf has changed
+        (updatePayload || (updatePayload = ({}: {[string]: $FlowFixMe})))[
+          propKey
+        ] = nextProp;
+      }
+    } else if (
+      typeof attributeConfig.diff === 'function' ||
+      typeof attributeConfig.process === 'function'
+    ) {
+      // case: CustomAttributeConfiguration
+      const shouldUpdate =
+        prevProp === undefined ||
+        (typeof attributeConfig.diff === 'function'
+          ? attributeConfig.diff(prevProp, nextProp)
+          : defaultDiffer(prevProp, nextProp));
+      if (shouldUpdate) {
+        const nextValue =
+          typeof attributeConfig.process === 'function'
+            ? // $FlowFixMe[incompatible-use] found when upgrading Flow
+              attributeConfig.process(nextProp)
+            : nextProp;
+        (updatePayload || (updatePayload = ({}: {[string]: $FlowFixMe})))[
+          propKey
+        ] = nextValue;
+      }
+    } else {
+      // default: fallthrough case when nested properties are defined
+      removedKeys = null;
+      removedKeyCount = 0;
+      // We think that attributeConfig is not CustomAttributeConfiguration at
+      // this point so we assume it must be AttributeConfiguration.
+      updatePayload = diffNestedProperty(
+        updatePayload,
+        prevProp,
+        nextProp,
+        ((attributeConfig: any): AttributeConfiguration),
+      );
+      if (removedKeyCount > 0 && updatePayload) {
+        restoreDeletedValuesInNestedArray(
+          updatePayload,
+          nextProp,
+          ((attributeConfig: any): AttributeConfiguration),
+        );
+        removedKeys = null;
+      }
+    }
+  }
+
+  // Also iterate through all the previous props to catch any that have been
+  // removed and make sure native gets the signal so it can reset them to the
+  // default.
+  for (const propKey in prevProps) {
+    if (nextProps[propKey] !== undefined) {
+      continue; // we've already covered this key in the previous pass
+    }
+    attributeConfig = validAttributes[propKey];
+    if (!attributeConfig) {
+      continue; // not a valid native prop
+    }
+
+    if (updatePayload && updatePayload[propKey] !== undefined) {
+      // This was already updated to a diff result earlier.
+      continue;
+    }
+
+    prevProp = prevProps[propKey];
+    if (prevProp === undefined) {
+      continue; // was already empty anyway
+    }
+    // Pattern match on: attributeConfig
+    if (
+      typeof attributeConfig !== 'object' ||
+      typeof attributeConfig.diff === 'function' ||
+      typeof attributeConfig.process === 'function'
+    ) {
+      // case: CustomAttributeConfiguration | !Object
+      // Flag the leaf property for removal by sending a sentinel.
+      (updatePayload || (updatePayload = ({}: {[string]: $FlowFixMe})))[
+        propKey
+      ] = null;
+      if (!removedKeys) {
+        removedKeys = ({}: {[string]: boolean});
+      }
+      if (!removedKeys[propKey]) {
+        removedKeys[propKey] = true;
+        removedKeyCount++;
+      }
+    } else {
+      // default:
+      // This is a nested attribute configuration where all the properties
+      // were removed so we need to go through and clear out all of them.
+      updatePayload = clearNestedProperty(
+        updatePayload,
+        prevProp,
+        ((attributeConfig: any): AttributeConfiguration),
+      );
+    }
+  }
+  return updatePayload;
+}
+
+/**
+ * addProperties adds all the valid props to the payload after being processed.
+ */
+function addProperties(
+  updatePayload: null | Object,
+  props: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  // TODO: Fast path
+  return diffProperties(updatePayload, emptyObject, props, validAttributes);
+}
+
+/**
+ * clearProperties clears all the previous props by adding a null sentinel
+ * to the payload for each valid key.
+ */
+function clearProperties(
+  updatePayload: null | Object,
+  prevProps: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  // TODO: Fast path
+  return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);
+}
+
+export function create(
+  props: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  return addProperties(
+    null, // updatePayload
+    props,
+    validAttributes,
+  );
+}
+
+export function diff(
+  prevProps: Object,
+  nextProps: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  return diffProperties(
+    null, // updatePayload
+    prevProps,
+    nextProps,
+    validAttributes,
+  );
+}
diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
new file mode 100644
index 00000000000..b22927d2cb2
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  EventTypes,
+  LegacyPluginModule,
+} from './legacy-events/PluginModuleType';
+import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
+import SyntheticEvent from './legacy-events/SyntheticEvent';
+
+// Module provided by RN:
+import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import accumulateInto from './legacy-events/accumulateInto';
+import getListener from './ReactNativeGetListener';
+import forEachAccumulated from './legacy-events/forEachAccumulated';
+import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
+
+const {customBubblingEventTypes, customDirectEventTypes} =
+  ReactNativeViewConfigRegistry;
+
+// Start of inline: the below functions were inlined from
+// EventPropagator.js, as they deviated from ReactDOM's newer
+// implementations.
+// $FlowFixMe[missing-local-annot]
+function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
+  const registrationName =
+    event.dispatchConfig.phasedRegistrationNames[propagationPhase];
+  return getListener(inst, registrationName);
+}
+
+// $FlowFixMe[missing-local-annot]
+function accumulateDirectionalDispatches(inst, phase, event) {
+  if (__DEV__) {
+    if (!inst) {
+      console.error('Dispatching inst must not be null');
+    }
+  }
+  const listener = listenerAtPhase(inst, event, phase);
+  if (listener) {
+    event._dispatchListeners = accumulateInto(
+      event._dispatchListeners,
+      listener,
+    );
+    event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+  }
+}
+
+// $FlowFixMe[missing-local-annot]
+function getParent(inst) {
+  do {
+    inst = inst.return;
+    // TODO: If this is a HostRoot we might want to bail out.
+    // That is depending on if we want nested subtrees (layers) to bubble
+    // events to their parent. We could also go through parentNode on the
+    // host node but that wouldn't work for React Native and doesn't let us
+    // do the portal feature.
+  } while (inst && inst.tag !== HostComponent);
+  if (inst) {
+    return inst;
+  }
+  return null;
+}
+
+/**
+ * Simulates the traversal of a two-phase, capture/bubble event dispatch.
+ */
+export function traverseTwoPhase(
+  inst: Object,
+  fn: Function,
+  arg: Function,
+  skipBubbling: boolean,
+) {
+  const path = [];
+  while (inst) {
+    path.push(inst);
+    inst = getParent(inst);
+  }
+  let i;
+  for (i = path.length; i-- > 0; ) {
+    fn(path[i], 'captured', arg);
+  }
+  if (skipBubbling) {
+    // Dispatch on target only
+    fn(path[0], 'bubbled', arg);
+  } else {
+    for (i = 0; i < path.length; i++) {
+      fn(path[i], 'bubbled', arg);
+    }
+  }
+}
+
+// $FlowFixMe[missing-local-annot]
+function accumulateTwoPhaseDispatchesSingle(event) {
+  if (event && event.dispatchConfig.phasedRegistrationNames) {
+    traverseTwoPhase(
+      event._targetInst,
+      accumulateDirectionalDispatches,
+      event,
+      false,
+    );
+  }
+}
+
+// $FlowFixMe[missing-local-annot]
+function accumulateTwoPhaseDispatches(events) {
+  forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
+}
+
+// $FlowFixMe[missing-local-annot]
+function accumulateCapturePhaseDispatches(event) {
+  if (event && event.dispatchConfig.phasedRegistrationNames) {
+    traverseTwoPhase(
+      event._targetInst,
+      accumulateDirectionalDispatches,
+      event,
+      true,
+    );
+  }
+}
+
+/**
+ * Accumulates without regard to direction, does not look for phased
+ * registration names. Same as `accumulateDirectDispatchesSingle` but without
+ * requiring that the `dispatchMarker` be the same as the dispatched ID.
+ */
+function accumulateDispatches(
+  inst: Object,
+  ignoredDirection: ?boolean,
+  event: Object,
+): void {
+  if (inst && event && event.dispatchConfig.registrationName) {
+    const registrationName = event.dispatchConfig.registrationName;
+    const listener = getListener(inst, registrationName);
+    if (listener) {
+      event._dispatchListeners = accumulateInto(
+        event._dispatchListeners,
+        listener,
+      );
+      event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+    }
+  }
+}
+
+/**
+ * Accumulates dispatches on an `SyntheticEvent`, but only for the
+ * `dispatchMarker`.
+ * @param {SyntheticEvent} event
+ */
+function accumulateDirectDispatchesSingle(event: Object) {
+  if (event && event.dispatchConfig.registrationName) {
+    accumulateDispatches(event._targetInst, null, event);
+  }
+}
+
+function accumulateDirectDispatches(events: ?(Array<Object> | Object)) {
+  forEachAccumulated(events, accumulateDirectDispatchesSingle);
+}
+
+// End of inline
+type PropagationPhases = 'bubbled' | 'captured';
+
+const ReactNativeBridgeEventPlugin: LegacyPluginModule<AnyNativeEvent> = {
+  eventTypes: ({}: EventTypes),
+
+  extractEvents: function (
+    topLevelType: TopLevelType,
+    targetInst: null | Object,
+    nativeEvent: AnyNativeEvent,
+    nativeEventTarget: null | Object,
+  ): ?Object {
+    if (targetInst == null) {
+      // Probably a node belonging to another renderer's tree.
+      return null;
+    }
+    const bubbleDispatchConfig = customBubblingEventTypes[topLevelType];
+    const directDispatchConfig = customDirectEventTypes[topLevelType];
+
+    if (!bubbleDispatchConfig && !directDispatchConfig) {
+      throw new Error(
+        // $FlowFixMe[incompatible-type] - Flow doesn't like this string coercion because DOMTopLevelEventType is opaque
+        `Unsupported top level event type "${topLevelType}" dispatched`,
+      );
+    }
+
+    const event = SyntheticEvent.getPooled(
+      bubbleDispatchConfig || directDispatchConfig,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+    );
+    if (bubbleDispatchConfig) {
+      const skipBubbling =
+        event != null &&
+        event.dispatchConfig.phasedRegistrationNames != null &&
+        event.dispatchConfig.phasedRegistrationNames.skipBubbling;
+      if (skipBubbling) {
+        accumulateCapturePhaseDispatches(event);
+      } else {
+        accumulateTwoPhaseDispatches(event);
+      }
+    } else if (directDispatchConfig) {
+      accumulateDirectDispatches(event);
+    } else {
+      return null;
+    }
+    return event;
+  },
+};
+
+export default ReactNativeBridgeEventPlugin;
diff --git a/packages/react-native-renderer/src/ReactNativeComponentTree.js b/packages/react-native-renderer/src/ReactNativeComponentTree.js
new file mode 100644
index 00000000000..bd3f1f44146
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeComponentTree.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const instanceCache = new Map();
+const instanceProps = new Map();
+
+export function precacheFiberNode(hostInst, tag) {
+  instanceCache.set(tag, hostInst);
+}
+
+export function uncacheFiberNode(tag) {
+  instanceCache.delete(tag);
+  instanceProps.delete(tag);
+}
+
+function getInstanceFromTag(tag) {
+  return instanceCache.get(tag) || null;
+}
+
+function getTagFromInstance(inst) {
+  let nativeInstance = inst.stateNode;
+  let tag = nativeInstance._nativeTag;
+  if (tag === undefined && nativeInstance.canonical != null) {
+    // For compatibility with Fabric
+    tag = nativeInstance.canonical.nativeTag;
+    nativeInstance = nativeInstance.canonical.publicInstance;
+  }
+
+  if (!tag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
+  return nativeInstance;
+}
+
+export {
+  getInstanceFromTag as getClosestInstanceFromNode,
+  getInstanceFromTag as getInstanceFromNode,
+  getTagFromInstance as getNodeFromInstance,
+};
+
+export function getFiberCurrentPropsFromNode(stateNode) {
+  return instanceProps.get(stateNode._nativeTag) || null;
+}
+
+export function updateFiberProps(tag, props) {
+  instanceProps.set(tag, props);
+}
diff --git a/packages/react-native-renderer/src/ReactNativeEventEmitter.js b/packages/react-native-renderer/src/ReactNativeEventEmitter.js
new file mode 100644
index 00000000000..27070803674
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeEventEmitter.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  LegacyPluginModule,
+} from './legacy-events/PluginModuleType';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactSyntheticEvent} from './legacy-events/ReactSyntheticEventType';
+import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
+
+import {
+  registrationNameModules,
+  plugins,
+} from './legacy-events/EventPluginRegistry';
+import {batchedUpdates} from './legacy-events/ReactGenericBatching';
+import {runEventsInBatch} from './legacy-events/EventBatching';
+import getListener from './ReactNativeGetListener';
+import accumulateInto from './legacy-events/accumulateInto';
+
+import {getInstanceFromNode} from './ReactNativeComponentTree';
+
+export {getListener, registrationNameModules as registrationNames};
+
+/**
+ * Version of `ReactBrowserEventEmitter` that works on the receiving side of a
+ * serialized worker boundary.
+ */
+
+// Shared default empty native event - conserve memory.
+const EMPTY_NATIVE_EVENT = (({}: any): AnyNativeEvent);
+
+/**
+ * Selects a subsequence of `Touch`es, without destroying `touches`.
+ *
+ * @param {Array<Touch>} touches Deserialized touch objects.
+ * @param {Array<number>} indices Indices by which to pull subsequence.
+ * @return {Array<Touch>} Subsequence of touch objects.
+ */
+// $FlowFixMe[missing-local-annot]
+function touchSubsequence(touches, indices) {
+  const ret = [];
+  for (let i = 0; i < indices.length; i++) {
+    ret.push(touches[indices[i]]);
+  }
+  return ret;
+}
+
+/**
+ * TODO: Pool all of this.
+ *
+ * Destroys `touches` by removing touch objects at indices `indices`. This is
+ * to maintain compatibility with W3C touch "end" events, where the active
+ * touches don't include the set that has just been "ended".
+ *
+ * @param {Array<Touch>} touches Deserialized touch objects.
+ * @param {Array<number>} indices Indices to remove from `touches`.
+ * @return {Array<Touch>} Subsequence of removed touch objects.
+ */
+function removeTouchesAtIndices(
+  touches: Array<Object>,
+  indices: Array<number>,
+): Array<Object> {
+  const rippedOut = [];
+  // use an unsafe downcast to alias to nullable elements,
+  // so we can delete and then compact.
+  const temp: Array<?Object> = (touches: Array<any>);
+  for (let i = 0; i < indices.length; i++) {
+    const index = indices[i];
+    rippedOut.push(touches[index]);
+    temp[index] = null;
+  }
+  let fillAt = 0;
+  for (let j = 0; j < temp.length; j++) {
+    const cur = temp[j];
+    if (cur !== null) {
+      temp[fillAt++] = cur;
+    }
+  }
+  temp.length = fillAt;
+  return rippedOut;
+}
+
+/**
+ * Internal version of `receiveEvent` in terms of normalized (non-tag)
+ * `rootNodeID`.
+ *
+ * @see receiveEvent.
+ *
+ * @param {rootNodeID} rootNodeID React root node ID that event occurred on.
+ * @param {TopLevelType} topLevelType Top level type of event.
+ * @param {?object} nativeEventParam Object passed from native.
+ */
+function _receiveRootNodeIDEvent(
+  rootNodeID: number,
+  topLevelType: TopLevelType,
+  nativeEventParam: ?AnyNativeEvent,
+) {
+  const nativeEvent = nativeEventParam || EMPTY_NATIVE_EVENT;
+  const inst = getInstanceFromNode(rootNodeID);
+
+  let target = null;
+  if (inst != null) {
+    target = inst.stateNode;
+  }
+
+  batchedUpdates(function () {
+    runExtractedPluginEventsInBatch(topLevelType, inst, nativeEvent, target);
+  });
+  // React Native doesn't use ReactControlledComponent but if it did, here's
+  // where it would do it.
+}
+
+/**
+ * Allows registered plugins an opportunity to extract events from top-level
+ * native browser events.
+ *
+ * @return {*} An accumulation of synthetic events.
+ * @internal
+ */
+function extractPluginEvents(
+  topLevelType: TopLevelType,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
+  let events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null = null;
+  const legacyPlugins = ((plugins: any): Array<LegacyPluginModule<Event>>);
+  for (let i = 0; i < legacyPlugins.length; i++) {
+    // Not every plugin in the ordering may be loaded at runtime.
+    const possiblePlugin: LegacyPluginModule<AnyNativeEvent> = legacyPlugins[i];
+    if (possiblePlugin) {
+      const extractedEvents = possiblePlugin.extractEvents(
+        topLevelType,
+        targetInst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      if (extractedEvents) {
+        events = accumulateInto(events, extractedEvents);
+      }
+    }
+  }
+  return events;
+}
+
+function runExtractedPluginEventsInBatch(
+  topLevelType: TopLevelType,
+  targetInst: null | Fiber,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget,
+) {
+  const events = extractPluginEvents(
+    topLevelType,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+  );
+  runEventsInBatch(events);
+}
+
+/**
+ * Publicly exposed method on module for native objc to invoke when a top
+ * level event is extracted.
+ * @param {rootNodeID} rootNodeID React root node ID that event occurred on.
+ * @param {TopLevelType} topLevelType Top level type of event.
+ * @param {object} nativeEventParam Object passed from native.
+ */
+export function receiveEvent(
+  rootNodeID: number,
+  topLevelType: TopLevelType,
+  nativeEventParam: AnyNativeEvent,
+) {
+  _receiveRootNodeIDEvent(rootNodeID, topLevelType, nativeEventParam);
+}
+
+/**
+ * Simple multi-wrapper around `receiveEvent` that is intended to receive an
+ * efficient representation of `Touch` objects, and other information that
+ * can be used to construct W3C compliant `Event` and `Touch` lists.
+ *
+ * This may create dispatch behavior that differs than web touch handling. We
+ * loop through each of the changed touches and receive it as a single event.
+ * So two `touchStart`/`touchMove`s that occur simultaneously are received as
+ * two separate touch event dispatches - when they arguably should be one.
+ *
+ * This implementation reuses the `Touch` objects themselves as the `Event`s
+ * since we dispatch an event for each touch (though that might not be spec
+ * compliant). The main purpose of reusing them is to save allocations.
+ *
+ * TODO: Dispatch multiple changed touches in one event. The bubble path
+ * could be the first common ancestor of all the `changedTouches`.
+ *
+ * One difference between this behavior and W3C spec: cancelled touches will
+ * not appear in `.touches`, or in any future `.touches`, though they may
+ * still be "actively touching the surface".
+ *
+ * Web desktop polyfills only need to construct a fake touch event with
+ * identifier 0, also abandoning traditional click handlers.
+ */
+export function receiveTouches(
+  eventTopLevelType: TopLevelType,
+  touches: Array<Object>,
+  changedIndices: Array<number>,
+) {
+  const changedTouches =
+    eventTopLevelType === 'topTouchEnd' ||
+    eventTopLevelType === 'topTouchCancel'
+      ? removeTouchesAtIndices(touches, changedIndices)
+      : touchSubsequence(touches, changedIndices);
+
+  for (let jj = 0; jj < changedTouches.length; jj++) {
+    const touch = changedTouches[jj];
+    // Touch objects can fulfill the role of `DOM` `Event` objects if we set
+    // the `changedTouches`/`touches`. This saves allocations.
+    touch.changedTouches = changedTouches;
+    touch.touches = touches;
+    const nativeEvent = touch;
+    let rootNodeID = null;
+    const target = nativeEvent.target;
+    if (target !== null && target !== undefined) {
+      if (target < 1) {
+        if (__DEV__) {
+          console.error(
+            'A view is reporting that a touch occurred on tag zero.',
+          );
+        }
+      } else {
+        rootNodeID = target;
+      }
+    }
+    // $FlowFixMe[incompatible-call] Shouldn't we *not* call it if rootNodeID is null?
+    _receiveRootNodeIDEvent(rootNodeID, eventTopLevelType, nativeEvent);
+  }
+}
diff --git a/packages/react-native-renderer/src/ReactNativeEventPluginOrder.js b/packages/react-native-renderer/src/ReactNativeEventPluginOrder.js
new file mode 100644
index 00000000000..404551f87b8
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeEventPluginOrder.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNativeEventPluginOrder = [
+  'ResponderEventPlugin',
+  'ReactNativeBridgeEventPlugin',
+];
+
+export default ReactNativeEventPluginOrder;
diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
new file mode 100644
index 00000000000..7a253304fff
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ViewConfig} from './ReactNativeTypes';
+import type {
+  LegacyPublicInstance,
+  MeasureOnSuccessCallback,
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import type {Instance} from './ReactFiberConfigNative';
+
+// Modules provided by RN:
+import {
+  TextInputState,
+  UIManager,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+import {create} from './ReactNativeAttributePayload';
+import {
+  mountSafeCallback_NOT_REALLY_SAFE,
+  warnForStyleProps,
+} from './NativeMethodsMixinUtils';
+
+class ReactNativeFiberHostComponent implements LegacyPublicInstance {
+  _children: Array<Instance | number>;
+  _nativeTag: number;
+  _internalFiberInstanceHandleDEV: Object;
+  viewConfig: ViewConfig;
+
+  constructor(
+    tag: number,
+    viewConfig: ViewConfig,
+    internalInstanceHandleDEV: Object,
+  ) {
+    this._nativeTag = tag;
+    this._children = [];
+    this.viewConfig = viewConfig;
+    if (__DEV__) {
+      this._internalFiberInstanceHandleDEV = internalInstanceHandleDEV;
+    }
+  }
+
+  blur() {
+    TextInputState.blurTextInput(this);
+  }
+
+  focus() {
+    TextInputState.focusTextInput(this);
+  }
+
+  measure(callback: MeasureOnSuccessCallback) {
+    UIManager.measure(
+      this._nativeTag,
+      mountSafeCallback_NOT_REALLY_SAFE(this, callback),
+    );
+  }
+
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
+    UIManager.measureInWindow(
+      this._nativeTag,
+      mountSafeCallback_NOT_REALLY_SAFE(this, callback),
+    );
+  }
+
+  measureLayout(
+    relativeToNativeNode: number | LegacyPublicInstance,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void /* currently unused */,
+  ) {
+    let relativeNode: ?number;
+
+    if (typeof relativeToNativeNode === 'number') {
+      // Already a node handle
+      relativeNode = relativeToNativeNode;
+    } else {
+      const nativeNode: ReactNativeFiberHostComponent =
+        (relativeToNativeNode: any);
+      if (nativeNode._nativeTag) {
+        relativeNode = nativeNode._nativeTag;
+      }
+    }
+
+    if (relativeNode == null) {
+      if (__DEV__) {
+        console.error(
+          'ref.measureLayout must be called with a node handle or a ref to a native component.',
+        );
+      }
+
+      return;
+    }
+
+    UIManager.measureLayout(
+      this._nativeTag,
+      relativeNode,
+      mountSafeCallback_NOT_REALLY_SAFE(this, onFail),
+      mountSafeCallback_NOT_REALLY_SAFE(this, onSuccess),
+    );
+  }
+
+  setNativeProps(nativeProps: Object) {
+    if (__DEV__) {
+      warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
+    }
+
+    const updatePayload = create(nativeProps, this.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(
+        this._nativeTag,
+        this.viewConfig.uiViewClassName,
+        updatePayload,
+      );
+    }
+  }
+}
+
+export default ReactNativeFiberHostComponent;
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
new file mode 100644
index 00000000000..e8be83f9a9f
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {TouchedViewDataAtPoint, InspectorData} from './ReactNativeTypes';
+
+import {
+  findCurrentHostFiber,
+  findCurrentFiberUsingSlowPath,
+} from 'react-reconciler/src/ReactFiberTreeReflection';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
+// Module provided by RN:
+import {
+  UIManager,
+  getNodeFromPublicInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
+import {
+  getNodeFromInternalInstanceHandle,
+  findNodeHandle,
+} from './ReactNativePublicCompat';
+import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactFiberComponentStack';
+
+let getInspectorDataForInstance: (
+  closestInstance: Fiber | null,
+) => InspectorData;
+
+if (__DEV__) {
+  const emptyObject = Object.freeze({});
+
+  // $FlowFixMe[missing-local-annot]
+  const createHierarchy = function (fiberHierarchy) {
+    return fiberHierarchy.map(fiber => ({
+      name: getComponentNameFromType(fiber.type),
+      getInspectorData: () => {
+        return {
+          props: getHostProps(fiber),
+          measure: callback => {
+            // If this is Fabric, we'll find a shadow node and use that to measure.
+            const hostFiber = findCurrentHostFiber(fiber);
+            const node =
+              hostFiber != null &&
+              hostFiber.stateNode !== null &&
+              hostFiber.stateNode.node;
+
+            if (node) {
+              nativeFabricUIManager.measure(node, callback);
+            } else {
+              return UIManager.measure(getHostNode(fiber), callback);
+            }
+          },
+        };
+      },
+    }));
+  };
+
+  const getHostNode = function (fiber: Fiber | null) {
+    let hostNode;
+    // look for children first for the hostNode
+    // as composite fibers do not have a hostNode
+    while (fiber) {
+      if (fiber.stateNode !== null && fiber.tag === HostComponent) {
+        hostNode = findNodeHandle(fiber.stateNode);
+      }
+      if (hostNode) {
+        return hostNode;
+      }
+      fiber = fiber.child;
+    }
+    return null;
+  };
+
+  const getHostProps = function (fiber: Fiber) {
+    const host = findCurrentHostFiber(fiber);
+    if (host) {
+      return host.memoizedProps || emptyObject;
+    }
+    return emptyObject;
+  };
+
+  getInspectorDataForInstance = function (
+    closestInstance: Fiber | null,
+  ): InspectorData {
+    // Handle case where user clicks outside of ReactNative
+    if (!closestInstance) {
+      return {
+        hierarchy: [],
+        props: emptyObject,
+        selectedIndex: null,
+        componentStack: '',
+      };
+    }
+
+    const fiber = findCurrentFiberUsingSlowPath(closestInstance);
+    if (fiber === null) {
+      // Might not be currently mounted.
+      return {
+        hierarchy: [],
+        props: emptyObject,
+        selectedIndex: null,
+        componentStack: '',
+      };
+    }
+    const fiberHierarchy = getOwnerHierarchy(fiber);
+    const instance = lastNonHostInstance(fiberHierarchy);
+    const hierarchy = createHierarchy(fiberHierarchy);
+    const props = getHostProps(instance);
+    const selectedIndex = fiberHierarchy.indexOf(instance);
+    const componentStack = getStackByFiberInDevAndProd(fiber);
+
+    return {
+      closestInstance: instance,
+      hierarchy,
+      props,
+      selectedIndex,
+      componentStack,
+    };
+  };
+
+  const getOwnerHierarchy = function (instance: Fiber) {
+    const hierarchy: Array<$FlowFixMe> = [];
+    traverseOwnerTreeUp(hierarchy, instance);
+    return hierarchy;
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  const lastNonHostInstance = function (hierarchy) {
+    for (let i = hierarchy.length - 1; i > 1; i--) {
+      const instance = hierarchy[i];
+
+      if (instance.tag !== HostComponent) {
+        return instance;
+      }
+    }
+    return hierarchy[0];
+  };
+
+  const traverseOwnerTreeUp = function (
+    hierarchy: Array<$FlowFixMe>,
+    instance: Fiber,
+  ): void {
+    hierarchy.unshift(instance);
+    const owner = instance._debugOwner;
+    if (owner != null && typeof owner.tag === 'number') {
+      traverseOwnerTreeUp(hierarchy, (owner: any));
+    } else {
+      // TODO: Traverse Server Components owners.
+    }
+  };
+}
+
+function getInspectorDataForViewTag(viewTag: number): InspectorData {
+  if (__DEV__) {
+    const closestInstance = getClosestInstanceFromNode(viewTag);
+    return getInspectorDataForInstance(closestInstance);
+  } else {
+    throw new Error(
+      'getInspectorDataForViewTag() is not available in production',
+    );
+  }
+}
+
+function getInspectorDataForViewAtPoint(
+  inspectedView: Object,
+  locationX: number,
+  locationY: number,
+  callback: (viewData: TouchedViewDataAtPoint) => mixed,
+): void {
+  if (__DEV__) {
+    let closestInstance = null;
+
+    const fabricNode = getNodeFromPublicInstance(inspectedView);
+    if (fabricNode) {
+      // For Fabric we can look up the instance handle directly and measure it.
+      nativeFabricUIManager.findNodeAtPoint(
+        fabricNode,
+        locationX,
+        locationY,
+        internalInstanceHandle => {
+          const node =
+            internalInstanceHandle != null
+              ? getNodeFromInternalInstanceHandle(internalInstanceHandle)
+              : null;
+          if (internalInstanceHandle == null || node == null) {
+            callback({
+              pointerY: locationY,
+              frame: {left: 0, top: 0, width: 0, height: 0},
+              ...getInspectorDataForInstance(closestInstance),
+            });
+            return;
+          }
+
+          closestInstance =
+            internalInstanceHandle.stateNode.canonical.internalInstanceHandle;
+          const closestPublicInstance =
+            internalInstanceHandle.stateNode.canonical.publicInstance;
+
+          // Note: this is deprecated and we want to remove it ASAP. Keeping it here for React DevTools compatibility for now.
+          const nativeViewTag =
+            internalInstanceHandle.stateNode.canonical.nativeTag;
+
+          nativeFabricUIManager.measure(
+            node,
+            (x, y, width, height, pageX, pageY) => {
+              const inspectorData =
+                getInspectorDataForInstance(closestInstance);
+              callback({
+                ...inspectorData,
+                pointerY: locationY,
+                frame: {left: pageX, top: pageY, width, height},
+                touchedViewTag: nativeViewTag,
+                closestPublicInstance,
+              });
+            },
+          );
+        },
+      );
+    } else if (inspectedView._internalFiberInstanceHandleDEV != null) {
+      // For Paper we fall back to the old strategy using the React tag.
+      UIManager.findSubviewIn(
+        findNodeHandle(inspectedView),
+        [locationX, locationY],
+        (nativeViewTag, left, top, width, height) => {
+          const inspectorData = getInspectorDataForInstance(
+            getClosestInstanceFromNode(nativeViewTag),
+          );
+          callback({
+            ...inspectorData,
+            pointerY: locationY,
+            frame: {left, top, width, height},
+            touchedViewTag: nativeViewTag,
+            // $FlowExpectedError[incompatible-call]
+            closestPublicInstance: nativeViewTag,
+          });
+        },
+      );
+    } else {
+      console.error(
+        'getInspectorDataForViewAtPoint expects to receive a host component',
+      );
+
+      return;
+    }
+  } else {
+    throw new Error(
+      'getInspectorDataForViewAtPoint() is not available in production.',
+    );
+  }
+}
+
+export {
+  getInspectorDataForInstance,
+  getInspectorDataForViewAtPoint,
+  getInspectorDataForViewTag,
+};
diff --git a/packages/react-native-renderer/src/ReactNativeGetListener.js b/packages/react-native-renderer/src/ReactNativeGetListener.js
new file mode 100644
index 00000000000..a741ee840a5
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeGetListener.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+
+import {getFiberCurrentPropsFromNode} from './legacy-events/EventPluginUtils';
+
+export default function getListener(
+  inst: Fiber,
+  registrationName: string,
+): Function | null {
+  const stateNode = inst.stateNode;
+  if (stateNode === null) {
+    // Work in progress (ex: onload events in incremental mode).
+    return null;
+  }
+  const props = getFiberCurrentPropsFromNode(stateNode);
+  if (props === null) {
+    // Work in progress.
+    return null;
+  }
+  const listener = props[registrationName];
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
+  return listener;
+}
diff --git a/packages/react-native-renderer/src/ReactNativeGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactNativeGlobalResponderHandler.js
new file mode 100644
index 00000000000..5661daf9061
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeGlobalResponderHandler.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Module provided by RN:
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+const ReactNativeGlobalResponderHandler = {
+  onChange: function (from: any, to: any, blockNativeResponder: boolean) {
+    if (to !== null) {
+      const tag = to.stateNode._nativeTag;
+      UIManager.setJSResponder(tag, blockNativeResponder);
+    } else {
+      UIManager.clearJSResponder();
+    }
+  },
+};
+
+export default ReactNativeGlobalResponderHandler;
diff --git a/packages/react-native-renderer/src/ReactNativeInjection.js b/packages/react-native-renderer/src/ReactNativeInjection.js
new file mode 100644
index 00000000000..6c598c35d76
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeInjection.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactNativeInjectionShared';
+
+import {
+  getFiberCurrentPropsFromNode,
+  getInstanceFromNode,
+  getNodeFromInstance,
+} from './ReactNativeComponentTree';
+import {setComponentTree} from './legacy-events/EventPluginUtils';
+import {receiveEvent, receiveTouches} from './ReactNativeEventEmitter';
+import ReactNativeGlobalResponderHandler from './ReactNativeGlobalResponderHandler';
+import ResponderEventPlugin from './legacy-events/ResponderEventPlugin';
+
+// Module provided by RN:
+import {RCTEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+/**
+ * Register the event emitter with the native bridge
+ */
+RCTEventEmitter.register({
+  receiveEvent,
+  receiveTouches,
+});
+
+setComponentTree(
+  getFiberCurrentPropsFromNode,
+  getInstanceFromNode,
+  getNodeFromInstance,
+);
+
+ResponderEventPlugin.injection.injectGlobalResponderHandler(
+  ReactNativeGlobalResponderHandler,
+);
diff --git a/packages/react-native-renderer/src/ReactNativeInjectionShared.js b/packages/react-native-renderer/src/ReactNativeInjectionShared.js
new file mode 100644
index 00000000000..1e02d792dee
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeInjectionShared.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * Make sure essential globals are available and are patched correctly. Please don't remove this
+ * line. Bundles created by react-packager `require` it before executing any application code. This
+ * ensures it exists in the dependency graph and can be `require`d.
+ * TODO: require this in packager, not in React #10932517
+ */
+// Module provided by RN:
+import 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore';
+
+import ResponderEventPlugin from './legacy-events/ResponderEventPlugin';
+import {
+  injectEventPluginOrder,
+  injectEventPluginsByName,
+} from './legacy-events/EventPluginRegistry';
+
+import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';
+import ReactNativeEventPluginOrder from './ReactNativeEventPluginOrder';
+
+/**
+ * Inject module for resolving DOM hierarchy and plugin ordering.
+ */
+injectEventPluginOrder(ReactNativeEventPluginOrder);
+
+/**
+ * Some important event plugins included by default (without having to require
+ * them).
+ */
+injectEventPluginsByName({
+  ResponderEventPlugin: ResponderEventPlugin,
+  ReactNativeBridgeEventPlugin: ReactNativeBridgeEventPlugin,
+});
diff --git a/packages/react-native-renderer/src/ReactNativePublicCompat.js b/packages/react-native-renderer/src/ReactNativePublicCompat.js
new file mode 100644
index 00000000000..e0193ddc37e
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativePublicCompat.js
@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Node} from './ReactNativeTypes';
+import type {ElementRef, ElementType} from 'react';
+import type {PublicInstance} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+// Modules provided by RN:
+import {
+  UIManager,
+  legacySendAccessibilityEvent,
+  getNodeFromPublicInstance,
+  getNativeTagFromPublicInstance,
+  getInternalInstanceHandleFromPublicInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+import {
+  findHostInstance,
+  findHostInstanceWithWarning,
+} from 'react-reconciler/src/ReactFiberReconciler';
+import {doesFiberContain} from 'react-reconciler/src/ReactFiberTreeReflection';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import {
+  current as currentOwner,
+  isRendering,
+} from 'react-reconciler/src/ReactCurrentFiber';
+
+export function findHostInstance_DEPRECATED<TElementType: ElementType>(
+  componentOrHandle: ?(ElementRef<TElementType> | number),
+): ?PublicInstance {
+  if (__DEV__) {
+    const owner = currentOwner;
+    if (owner !== null && isRendering && 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.',
+          getComponentNameFromType(owner.type) || 'A component',
+        );
+      }
+
+      owner.stateNode._warnedAboutRefsInRender = true;
+    }
+  }
+
+  if (componentOrHandle == null) {
+    return null;
+  }
+
+  // For compatibility with Fabric instances
+  if (
+    componentOrHandle.canonical &&
+    componentOrHandle.canonical.publicInstance
+  ) {
+    // $FlowExpectedError[incompatible-return] Can't refine componentOrHandle as a Fabric instance
+    return componentOrHandle.canonical.publicInstance;
+  }
+
+  // For compatibility with legacy renderer instances
+  if (componentOrHandle._nativeTag) {
+    // $FlowFixMe[incompatible-exact] Necessary when running Flow on Fabric
+    // $FlowFixMe[incompatible-return]
+    return componentOrHandle;
+  }
+
+  let hostInstance;
+  if (__DEV__) {
+    hostInstance = findHostInstanceWithWarning(
+      componentOrHandle,
+      'findHostInstance_DEPRECATED',
+    );
+  } else {
+    hostInstance = findHostInstance(componentOrHandle);
+  }
+
+  // findHostInstance handles legacy vs. Fabric differences correctly
+  // $FlowFixMe[incompatible-exact] we need to fix the definition of `HostComponent` to use NativeMethods as an interface, not as a type.
+  // $FlowFixMe[incompatible-return]
+  return hostInstance;
+}
+
+export function findNodeHandle(componentOrHandle: any): ?number {
+  if (__DEV__) {
+    const owner = currentOwner;
+    if (owner !== null && isRendering && 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.',
+          getComponentNameFromType(owner.type) || 'A component',
+        );
+      }
+
+      owner.stateNode._warnedAboutRefsInRender = true;
+    }
+  }
+
+  if (componentOrHandle == null) {
+    return null;
+  }
+
+  if (typeof componentOrHandle === 'number') {
+    // Already a node handle
+    return componentOrHandle;
+  }
+
+  // For compatibility with legacy renderer instances
+  if (componentOrHandle._nativeTag) {
+    return componentOrHandle._nativeTag;
+  }
+
+  // For compatibility with Fabric instances
+  if (
+    componentOrHandle.canonical != null &&
+    componentOrHandle.canonical.nativeTag != null
+  ) {
+    return componentOrHandle.canonical.nativeTag;
+  }
+
+  // For compatibility with Fabric public instances
+  const nativeTag = getNativeTagFromPublicInstance(componentOrHandle);
+  if (nativeTag) {
+    return nativeTag;
+  }
+
+  let hostInstance;
+  if (__DEV__) {
+    hostInstance = findHostInstanceWithWarning(
+      componentOrHandle,
+      'findNodeHandle',
+    );
+  } else {
+    hostInstance = findHostInstance(componentOrHandle);
+  }
+
+  if (hostInstance == null) {
+    // $FlowFixMe[incompatible-return] Flow limitation in refining an opaque type
+    return hostInstance;
+  }
+
+  if (hostInstance._nativeTag != null) {
+    // $FlowFixMe[incompatible-return] For compatibility with legacy renderer instances
+    return hostInstance._nativeTag;
+  }
+
+  // $FlowFixMe[incompatible-call] Necessary when running Flow on the legacy renderer
+  return getNativeTagFromPublicInstance(hostInstance);
+}
+
+export function dispatchCommand(
+  handle: any,
+  command: string,
+  args: Array<any>,
+) {
+  const nativeTag =
+    handle._nativeTag != null
+      ? handle._nativeTag
+      : getNativeTagFromPublicInstance(handle);
+  if (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;
+  }
+
+  const node = getNodeFromPublicInstance(handle);
+
+  if (node != null) {
+    nativeFabricUIManager.dispatchCommand(node, command, args);
+  } else {
+    UIManager.dispatchViewManagerCommand(nativeTag, command, args);
+  }
+}
+
+export function sendAccessibilityEvent(handle: any, eventType: string) {
+  const nativeTag =
+    handle._nativeTag != null
+      ? handle._nativeTag
+      : getNativeTagFromPublicInstance(handle);
+  if (nativeTag == null) {
+    if (__DEV__) {
+      console.error(
+        "sendAccessibilityEvent was called with a ref that isn't a " +
+          'native component. Use React.forwardRef to get access to the underlying native component',
+      );
+    }
+    return;
+  }
+
+  const node = getNodeFromPublicInstance(handle);
+  if (node != null) {
+    nativeFabricUIManager.sendAccessibilityEvent(node, eventType);
+  } else {
+    legacySendAccessibilityEvent(nativeTag, eventType);
+  }
+}
+
+export function getNodeFromInternalInstanceHandle(
+  internalInstanceHandle: mixed,
+): ?Node {
+  return (
+    // $FlowExpectedError[incompatible-return] internalInstanceHandle is opaque but we need to make an exception here.
+    internalInstanceHandle &&
+    // $FlowExpectedError[incompatible-return]
+    internalInstanceHandle.stateNode &&
+    // $FlowExpectedError[incompatible-use]
+    internalInstanceHandle.stateNode.node
+  );
+}
+
+// Remove this once Paper is no longer supported and DOM Node API are enabled by default in RN.
+export function isChildPublicInstance(
+  parentInstance: PublicInstance,
+  childInstance: PublicInstance,
+): boolean {
+  if (__DEV__) {
+    // Paper
+    if (
+      // $FlowExpectedError[incompatible-type]
+      // $FlowExpectedError[prop-missing] Don't check via `instanceof ReactNativeFiberHostComponent`, so it won't be leaked to Fabric.
+      parentInstance._internalFiberInstanceHandleDEV &&
+      // $FlowExpectedError[incompatible-type]
+      // $FlowExpectedError[prop-missing] Don't check via `instanceof ReactNativeFiberHostComponent`, so it won't be leaked to Fabric.
+      childInstance._internalFiberInstanceHandleDEV
+    ) {
+      return doesFiberContain(
+        // $FlowExpectedError[incompatible-call]
+        parentInstance._internalFiberInstanceHandleDEV,
+        // $FlowExpectedError[incompatible-call]
+        childInstance._internalFiberInstanceHandleDEV,
+      );
+    }
+
+    const parentInternalInstanceHandle =
+      // $FlowExpectedError[incompatible-call] Type for parentInstance should have been PublicInstance from ReactFiberConfigFabric.
+      getInternalInstanceHandleFromPublicInstance(parentInstance);
+    const childInternalInstanceHandle =
+      // $FlowExpectedError[incompatible-call] Type for childInstance should have been PublicInstance from ReactFiberConfigFabric.
+      getInternalInstanceHandleFromPublicInstance(childInstance);
+
+    // Fabric
+    if (
+      parentInternalInstanceHandle != null &&
+      childInternalInstanceHandle != null
+    ) {
+      return doesFiberContain(
+        parentInternalInstanceHandle,
+        childInternalInstanceHandle,
+      );
+    }
+
+    // Means that one instance is from Fabric and other is from Paper.
+    return false;
+  } else {
+    throw new Error('isChildPublicInstance() is not available in production.');
+  }
+}
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
new file mode 100644
index 00000000000..c7f7a11dcc5
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactPortal, ReactNodeList} from 'shared/ReactTypes';
+import type {ElementRef, ElementType, MixedElement} from 'react';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {RenderRootOptions} from './ReactNativeTypes';
+import type {Container} from 'react-reconciler/src/ReactFiberConfig';
+
+import './ReactNativeInjection';
+
+import {
+  batchedUpdates as batchedUpdatesImpl,
+  discreteUpdates,
+  createContainer,
+  updateContainer,
+  injectIntoDevTools,
+  getPublicRootInstance,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
+} from 'react-reconciler/src/ReactFiberReconciler';
+// TODO: direct imports like some-package/src/* are bad. Fix me.
+import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
+import {
+  setBatchingImplementation,
+  batchedUpdates,
+} from './legacy-events/ReactGenericBatching';
+// Modules provided by RN:
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  findHostInstance_DEPRECATED,
+  findNodeHandle,
+  dispatchCommand,
+  sendAccessibilityEvent,
+  isChildPublicInstance,
+} from './ReactNativePublicCompat';
+
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
+
+// Module provided by RN:
+import {ReactFiberErrorDialog} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+import reactNativePackageVersion from 'shared/ReactVersion';
+import * as IsomorphicReactPackage from 'react';
+
+const isomorphicReactPackageVersion = IsomorphicReactPackage.version;
+if (isomorphicReactPackageVersion !== reactNativePackageVersion) {
+  throw new Error(
+    'Incompatible React versions: The "react" and "react-native-renderer" packages must ' +
+      'have the exact same version. Instead got:\n' +
+      `  - react:                  ${isomorphicReactPackageVersion}\n` +
+      `  - react-native-renderer:  ${reactNativePackageVersion}\n` +
+      'Learn more: https://react.dev/warnings/version-mismatch',
+  );
+}
+
+if (typeof ReactFiberErrorDialog.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
+
+function nativeOnUncaughtError(
+  error: mixed,
+  errorInfo: {+componentStack?: ?string},
+): void {
+  const componentStack =
+    errorInfo.componentStack != null ? errorInfo.componentStack : '';
+  const logError = ReactFiberErrorDialog.showErrorDialog({
+    errorBoundary: null,
+    error,
+    componentStack,
+  });
+
+  // Allow injected showErrorDialog() to prevent default console.error logging.
+  // This enables renderers like ReactNative to better manage redbox behavior.
+  if (logError === false) {
+    return;
+  }
+
+  defaultOnUncaughtError(error, errorInfo);
+}
+function nativeOnCaughtError(
+  error: mixed,
+  errorInfo: {
+    +componentStack?: ?string,
+    +errorBoundary?: ?component(...props: any),
+  },
+): void {
+  const errorBoundary = errorInfo.errorBoundary;
+  const componentStack =
+    errorInfo.componentStack != null ? errorInfo.componentStack : '';
+  const logError = ReactFiberErrorDialog.showErrorDialog({
+    errorBoundary,
+    error,
+    componentStack,
+  });
+
+  // Allow injected showErrorDialog() to prevent default console.error logging.
+  // This enables renderers like ReactNative to better manage redbox behavior.
+  if (logError === false) {
+    return;
+  }
+
+  defaultOnCaughtError(error, errorInfo);
+}
+function nativeOnDefaultTransitionIndicator(): void | (() => void) {
+  // Native doesn't have a default indicator.
+}
+
+function render(
+  element: MixedElement,
+  containerTag: number,
+  callback: ?() => void,
+  options: ?RenderRootOptions,
+): ?ElementRef<ElementType> {
+  if (disableLegacyMode) {
+    throw new Error('render: Unsupported Legacy Mode API.');
+  }
+
+  let root = roots.get(containerTag);
+
+  if (!root) {
+    // TODO: these defaults are for backwards compatibility.
+    // Once RN implements these options internally,
+    // we can remove the defaults and ReactFiberErrorDialog.
+    let onUncaughtError = nativeOnUncaughtError;
+    let onCaughtError = nativeOnCaughtError;
+    let onRecoverableError = defaultOnRecoverableError;
+
+    if (options && options.onUncaughtError !== undefined) {
+      onUncaughtError = options.onUncaughtError;
+    }
+    if (options && options.onCaughtError !== undefined) {
+      onCaughtError = options.onCaughtError;
+    }
+    if (options && options.onRecoverableError !== undefined) {
+      onRecoverableError = options.onRecoverableError;
+    }
+
+    const rootInstance: Container = {
+      containerTag,
+      // $FlowExpectedError[incompatible-type] the legacy renderer does not use public root instances
+      publicInstance: null,
+    };
+
+    // 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(
+      rootInstance,
+      LegacyRoot,
+      null,
+      false,
+      null,
+      '',
+      onUncaughtError,
+      onCaughtError,
+      onRecoverableError,
+      nativeOnDefaultTransitionIndicator,
+      null,
+    );
+    roots.set(containerTag, root);
+  }
+  updateContainer(element, root, null, callback);
+
+  return getPublicRootInstance(root);
+}
+
+function unmountComponentAtNode(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?
+    updateContainer(null, root, null, () => {
+      roots.delete(containerTag);
+    });
+  }
+}
+
+function unmountComponentAtNodeAndRemoveContainer(containerTag: number) {
+  unmountComponentAtNode(containerTag);
+
+  // Call back into native to remove all of the subviews from this container
+  UIManager.removeRootView(containerTag);
+}
+
+function createPortal(
+  children: ReactNodeList,
+  containerTag: number,
+  key: ?string = null,
+): ReactPortal {
+  return createPortalImpl(children, containerTag, null, key);
+}
+
+setBatchingImplementation(batchedUpdatesImpl, discreteUpdates);
+
+const roots = new Map<number, FiberRoot>();
+
+export {
+  // This is needed for implementation details of TouchableNativeFeedback
+  // Remove this once TouchableNativeFeedback doesn't use cloneElement
+  findHostInstance_DEPRECATED,
+  findNodeHandle,
+  dispatchCommand,
+  sendAccessibilityEvent,
+  render,
+  unmountComponentAtNode,
+  unmountComponentAtNodeAndRemoveContainer,
+  createPortal,
+  batchedUpdates as unstable_batchedUpdates,
+  // DEV-only:
+  isChildPublicInstance,
+};
+
+injectIntoDevTools();
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
new file mode 100644
index 00000000000..cfd026bc7d0
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noformat
+ * @nolint
+ * @flow strict
+ */
+
+import type {
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  HostInstance as PublicInstance,
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  MeasureOnSuccessCallback,
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  PublicRootInstance,
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  PublicTextInstance,
+} from 'react-native';
+
+import * as React from 'react';
+
+export type AttributeType<T, V> =
+  | true
+  | $ReadOnly<{
+      diff?: (arg1: T, arg2: T) => boolean,
+      process?: (arg1: V) => T,
+    }>;
+
+// We either force that `diff` and `process` always use mixed,
+// or we allow them to define specific types and use this hack
+export type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
+
+export type AttributeConfiguration = $ReadOnly<{
+  [propName: string]: AnyAttributeType | void,
+  style?: $ReadOnly<{
+    [propName: string]: AnyAttributeType,
+    ...
+  }>,
+  ...
+}>;
+
+export type ViewConfig = $ReadOnly<{
+  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
+  Constants?: $ReadOnly<{[name: string]: mixed, ...}>,
+  Manager?: string,
+  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
+  baseModuleName?: ?string,
+  bubblingEventTypes?: $ReadOnly<{
+    [eventName: string]: $ReadOnly<{
+      phasedRegistrationNames: $ReadOnly<{
+        captured: string,
+        bubbled: string,
+        skipBubbling?: ?boolean,
+      }>,
+    }>,
+    ...
+  }>,
+  directEventTypes?: $ReadOnly<{
+    [eventName: string]: $ReadOnly<{
+      registrationName: string,
+    }>,
+    ...
+  }>,
+  supportsRawText?: boolean,
+  uiViewClassName: string,
+  validAttributes: AttributeConfiguration,
+}>;
+
+export type PartialViewConfig = $ReadOnly<{
+  bubblingEventTypes?: ViewConfig['bubblingEventTypes'],
+  directEventTypes?: ViewConfig['directEventTypes'],
+  supportsRawText?: boolean,
+  uiViewClassName: string,
+  validAttributes?: AttributeConfiguration,
+}>;
+
+type InspectorDataProps = $ReadOnly<{
+  [propName: string]: string,
+  ...
+}>;
+
+type InspectorDataGetter = (
+  <TElementType: React.ElementType>(
+    componentOrHandle: React.ElementRef<TElementType> | number,
+  ) => ?number,
+) => $ReadOnly<{
+  measure: (callback: MeasureOnSuccessCallback) => void,
+  props: InspectorDataProps,
+}>;
+
+export type InspectorData = $ReadOnly<{
+  closestInstance?: mixed,
+  hierarchy: Array<{
+    name: ?string,
+    getInspectorData: InspectorDataGetter,
+  }>,
+  selectedIndex: ?number,
+  props: InspectorDataProps,
+  componentStack: string,
+}>;
+
+export type TouchedViewDataAtPoint = $ReadOnly<
+  {
+    pointerY: number,
+    touchedViewTag?: number,
+    frame: $ReadOnly<{
+      top: number,
+      left: number,
+      width: number,
+      height: number,
+    }>,
+    closestPublicInstance?: PublicInstance,
+  } & InspectorData,
+>;
+
+export type RenderRootOptions = {
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      // $FlowFixMe[unclear-type] unknown props and state.
+      // $FlowFixMe[value-as-type] Component in react repo is any-typed, but it will be well typed externally.
+      +errorBoundary?: ?React.Component<any, any>,
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onDefaultTransitionIndicator?: () => void | (() => void),
+};
+
+/**
+ * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.
+ * Provide minimal Flow typing for the high-level RN API and call it a day.
+ */
+export type ReactNativeType = {
+  findHostInstance_DEPRECATED<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
+  ): ?PublicInstance,
+  findNodeHandle<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
+  ): ?number,
+  isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
+  dispatchCommand(
+    handle: PublicInstance,
+    command: string,
+    args: Array<mixed>,
+  ): void,
+  sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
+  render(
+    element: React.MixedElement,
+    containerTag: number,
+    callback: ?() => void,
+    options: ?RenderRootOptions,
+  ): ?React.ElementRef<React.ElementType>,
+  unmountComponentAtNode(containerTag: number): void,
+  unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
+  +unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
+  ...
+};
+
+export opaque type Node = mixed;
+export opaque type InternalInstanceHandle = mixed;
+
+export type ReactFabricType = {
+  findHostInstance_DEPRECATED<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
+  ): ?PublicInstance,
+  findNodeHandle<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
+  ): ?number,
+  dispatchCommand(
+    handle: PublicInstance,
+    command: string,
+    args: Array<mixed>,
+  ): void,
+  isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
+  sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
+  render(
+    element: React.MixedElement,
+    containerTag: number,
+    callback: ?() => void,
+    concurrentRoot: ?boolean,
+    options: ?RenderRootOptions,
+  ): ?React.ElementRef<React.ElementType>,
+  unmountComponentAtNode(containerTag: number): void,
+  getNodeFromInternalInstanceHandle(
+    internalInstanceHandle: InternalInstanceHandle,
+  ): ?Node,
+  getPublicInstanceFromInternalInstanceHandle(
+    internalInstanceHandle: InternalInstanceHandle,
+  ): PublicInstance | PublicTextInstance | null,
+  getPublicInstanceFromRootTag(rootTag: number): PublicRootInstance | null,
+  ...
+};
+
+export type ReactFabricEventTouch = {
+  identifier: number,
+  locationX: number,
+  locationY: number,
+  pageX: number,
+  pageY: number,
+  screenX: number,
+  screenY: number,
+  target: number,
+  timestamp: number,
+  force: number,
+  ...
+};
+
+export type ReactFabricEvent = {
+  touches: Array<ReactFabricEventTouch>,
+  changedTouches: Array<ReactFabricEventTouch>,
+  targetTouches: Array<ReactFabricEventTouch>,
+  target: number,
+  ...
+};
+
+// Imperative LayoutAnimation API types
+//
+export type LayoutAnimationType =
+  | 'spring'
+  | 'linear'
+  | 'easeInEaseOut'
+  | 'easeIn'
+  | 'easeOut'
+  | 'keyboard';
+
+export type LayoutAnimationProperty =
+  | 'opacity'
+  | 'scaleX'
+  | 'scaleY'
+  | 'scaleXY';
+
+export type LayoutAnimationAnimationConfig = $ReadOnly<{
+  duration?: number,
+  delay?: number,
+  springDamping?: number,
+  initialVelocity?: number,
+  type?: LayoutAnimationType,
+  property?: LayoutAnimationProperty,
+}>;
+
+export type LayoutAnimationConfig = $ReadOnly<{
+  duration: number,
+  create?: LayoutAnimationAnimationConfig,
+  update?: LayoutAnimationAnimationConfig,
+  delete?: LayoutAnimationAnimationConfig,
+}>;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/BatchedBridge.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/BatchedBridge.js
new file mode 100644
index 00000000000..9083f2e6d18
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/BatchedBridge.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 BatchedBridge = {
+  registerCallableModule: jest.fn(),
+};
+
+module.exports = BatchedBridge;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ExceptionsManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ExceptionsManager.js
new file mode 100644
index 00000000000..cd43a5b2de0
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ExceptionsManager.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = {
+  handleException: jest.fn(),
+};
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
new file mode 100644
index 00000000000..47f648615fe
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Mock of the Native Hooks
+
+const roots = new Map();
+const allocatedTags = new Set();
+
+function dumpSubtree(info, indent) {
+  let out = '';
+  out += ' '.repeat(indent) + info.viewName + ' ' + JSON.stringify(info.props);
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const child of info.children) {
+    out += '\n' + dumpSubtree(child, indent + 2);
+  }
+  return out;
+}
+
+const RCTFabricUIManager = {
+  __dumpChildSetForJestTestsOnly: function (childSet) {
+    const result = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const child of childSet) {
+      result.push(dumpSubtree(child, 0));
+    }
+    return result.join('\n');
+  },
+  __dumpHierarchyForJestTestsOnly: function () {
+    const result = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const [rootTag, childSet] of roots) {
+      result.push(rootTag);
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const child of childSet) {
+        result.push(dumpSubtree(child, 1));
+      }
+    }
+    return result.join('\n');
+  },
+  createNode: jest.fn(
+    function createNode(reactTag, viewName, rootTag, props, eventTarget) {
+      if (allocatedTags.has(reactTag)) {
+        throw new Error(`Created two native views with tag ${reactTag}`);
+      }
+
+      allocatedTags.add(reactTag);
+      return {
+        reactTag: reactTag,
+        viewName: viewName,
+        props: props,
+        children: [],
+      };
+    },
+  ),
+  cloneNode: jest.fn(function cloneNode(node) {
+    return {
+      reactTag: node.reactTag,
+      viewName: node.viewName,
+      props: node.props,
+      children: node.children,
+    };
+  }),
+  cloneNodeWithNewChildren: jest.fn(
+    function cloneNodeWithNewChildren(node, children) {
+      return {
+        reactTag: node.reactTag,
+        viewName: node.viewName,
+        props: node.props,
+        children: children ?? [],
+      };
+    },
+  ),
+  cloneNodeWithNewProps: jest.fn(
+    function cloneNodeWithNewProps(node, newPropsDiff) {
+      return {
+        reactTag: node.reactTag,
+        viewName: node.viewName,
+        props: {...node.props, ...newPropsDiff},
+        children: node.children,
+      };
+    },
+  ),
+  cloneNodeWithNewChildrenAndProps: jest.fn(
+    function cloneNodeWithNewChildrenAndProps(node, newPropsDiff) {
+      let children = [];
+      if (arguments.length === 3) {
+        children = newPropsDiff;
+        newPropsDiff = arguments[2];
+      }
+
+      return {
+        reactTag: node.reactTag,
+        viewName: node.viewName,
+        props: {...node.props, ...newPropsDiff},
+        children,
+      };
+    },
+  ),
+  appendChild: jest.fn(function appendChild(parentNode, childNode) {
+    parentNode.children.push(childNode);
+  }),
+
+  createChildSet: jest.fn(function createChildSet() {
+    return [];
+  }),
+
+  appendChildToSet: jest.fn(function appendChildToSet(childSet, childNode) {
+    childSet.push(childNode);
+  }),
+
+  completeRoot: jest.fn(function completeRoot(rootTag, newChildSet) {
+    roots.set(rootTag, newChildSet);
+  }),
+
+  dispatchCommand: jest.fn(),
+
+  setNativeProps: jest.fn(),
+
+  sendAccessibilityEvent: jest.fn(),
+
+  registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
+
+  measure: jest.fn(function measure(node, callback) {
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
+    callback(10, 10, 100, 100, 0, 0);
+  }),
+  measureInWindow: jest.fn(function measureInWindow(node, callback) {
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
+    callback(10, 10, 100, 100);
+  }),
+  getBoundingClientRect: jest.fn(function getBoundingClientRect(node) {
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
+    return [10, 10, 100, 100];
+  }),
+  measureLayout: jest.fn(
+    function measureLayout(node, relativeNode, fail, success) {
+      if (typeof node !== 'object') {
+        throw new Error(
+          `Expected node to be an object, was passed "${typeof node}"`,
+        );
+      }
+
+      if (typeof node.viewName !== 'string') {
+        throw new Error('Expected node to be a host node.');
+      }
+
+      if (typeof relativeNode !== 'object') {
+        throw new Error(
+          `Expected relative node to be an object, was passed "${typeof relativeNode}"`,
+        );
+      }
+
+      if (typeof relativeNode.viewName !== 'string') {
+        throw new Error('Expected relative node to be a host node.');
+      }
+
+      success(1, 1, 100, 100);
+    },
+  ),
+  setIsJSResponder: jest.fn(),
+};
+
+global.nativeFabricUIManager = RCTFabricUIManager;
+
+// DOMRect isn't provided by jsdom, but it's used by `ReactFabricHostComponent`.
+// This is a basic implementation for testing.
+global.DOMRect = class DOMRect {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+
+  toJSON() {
+    const {x, y, width, height} = this;
+    return {x, y, width, height};
+  }
+};
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/Platform.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/Platform.js
new file mode 100644
index 00000000000..5ea938a026b
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/Platform.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = {
+  OS: 'ios',
+};
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RCTEventEmitter.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RCTEventEmitter.js
new file mode 100644
index 00000000000..8ddf594a4aa
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RCTEventEmitter.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 RCTEventEmitter = {
+  register: jest.fn(),
+};
+
+module.exports = RCTEventEmitter;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RawEventEmitter.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RawEventEmitter.js
new file mode 100644
index 00000000000..21ef8e7a19a
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RawEventEmitter.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// See the react-native repository for a full implementation.
+// However, this is just an EventEmitter.
+const RawEventEmitter = {
+  emit: jest.fn(),
+};
+
+module.exports = {default: RawEventEmitter};
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 00000000000..c2e264589ed
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactFiberErrorDialog.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/ReactNativePrivateInitializeCore.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore.js
new file mode 100644
index 00000000000..2c6b0cac145
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+'use strict';
+
+// Noop
+
+// TODO #10932517: Move all initialization callers back into react-native
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
new file mode 100644
index 00000000000..0d76206124e
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+module.exports = {
+  get BatchedBridge() {
+    return require('./BatchedBridge.js');
+  },
+  get Platform() {
+    return require('./Platform');
+  },
+  get RCTEventEmitter() {
+    return require('./RCTEventEmitter');
+  },
+  get ReactFiberErrorDialog() {
+    return require('./ReactFiberErrorDialog');
+  },
+  get ReactNativeViewConfigRegistry() {
+    return require('./ReactNativeViewConfigRegistry');
+  },
+  get TextInputState() {
+    return require('./TextInputState');
+  },
+  get UIManager() {
+    return require('./UIManager');
+  },
+  get deepDiffer() {
+    return require('./deepDiffer');
+  },
+  get deepFreezeAndThrowOnMutationInDev() {
+    return require('./deepFreezeAndThrowOnMutationInDev');
+  },
+  get flattenStyle() {
+    return require('./flattenStyle');
+  },
+  get legacySendAccessibilityEvent() {
+    return require('./legacySendAccessibilityEvent');
+  },
+  get RawEventEmitter() {
+    return require('./RawEventEmitter').default;
+  },
+  get getNativeTagFromPublicInstance() {
+    return require('./getNativeTagFromPublicInstance').default;
+  },
+  get getNodeFromPublicInstance() {
+    return require('./getNodeFromPublicInstance').default;
+  },
+  get createPublicInstance() {
+    return require('./createPublicInstance').default;
+  },
+  get createPublicTextInstance() {
+    return require('./createPublicTextInstance').default;
+  },
+  get createPublicRootInstance() {
+    return require('./createPublicRootInstance').default;
+  },
+  get createAttributePayload() {
+    return require('./createAttributePayload').default;
+  },
+  get diffAttributePayloads() {
+    return require('./diffAttributePayloads').default;
+  },
+};
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
new file mode 100644
index 00000000000..a8933b01cc9
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-local
+ */
+
+'use strict';
+
+import {type ViewConfig} from './ReactNativeTypes';
+
+// Event configs
+export const customBubblingEventTypes = {};
+export const customDirectEventTypes = {};
+
+const viewConfigCallbacks = new Map();
+const viewConfigs = new Map();
+
+function processEventTypes(viewConfig: ViewConfig): void {
+  const {bubblingEventTypes, directEventTypes} = viewConfig;
+
+  if (__DEV__) {
+    if (bubblingEventTypes != null && directEventTypes != null) {
+      for (const topLevelType in directEventTypes) {
+        if (bubblingEventTypes[topLevelType] != null) {
+          throw new Error(
+            `Event cannot be both direct and bubbling: ${topLevelType}`,
+          );
+        }
+      }
+    }
+  }
+
+  if (bubblingEventTypes != null) {
+    for (const topLevelType in bubblingEventTypes) {
+      if (customBubblingEventTypes[topLevelType] == null) {
+        customBubblingEventTypes[topLevelType] =
+          bubblingEventTypes[topLevelType];
+      }
+    }
+  }
+
+  if (directEventTypes != null) {
+    for (const topLevelType in directEventTypes) {
+      if (customDirectEventTypes[topLevelType] == null) {
+        customDirectEventTypes[topLevelType] = directEventTypes[topLevelType];
+      }
+    }
+  }
+}
+
+/**
+ * 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.
+ */
+export function register(name: string, callback: () => ViewConfig): string {
+  if (viewConfigCallbacks.has(name)) {
+    throw new Error(`Tried to register two views with the same name ${name}`);
+  }
+
+  if (typeof callback !== 'function') {
+    throw new Error(
+      `View config getter callback for component \`${name}\` must be a function (received \`${
+        callback === null ? 'null' : typeof callback
+      }\`)`,
+    );
+  }
+
+  viewConfigCallbacks.set(name, callback);
+  return name;
+}
+
+/**
+ * Retrieves a config for the specified view.
+ * If this is the first time the view has been used,
+ * This configuration will be lazy-loaded from UIManager.
+ */
+export function get(name: string): ViewConfig {
+  let viewConfig;
+  if (!viewConfigs.has(name)) {
+    const callback = viewConfigCallbacks.get(name);
+    if (typeof callback !== 'function') {
+      throw new Error(
+        `View config getter callback for component \`${name}\` must be a function (received \`${
+          callback === null ? 'null' : typeof callback
+        }\`).${
+          typeof name[0] === 'string' && /[a-z]/.test(name[0])
+            ? ' Make sure to start component names with a capital letter.'
+            : ''
+        }`,
+      );
+    }
+    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);
+  }
+
+  if (!viewConfig) {
+    throw new Error(`View config not found for name ${name}`);
+  }
+
+  return viewConfig;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js
new file mode 100644
index 00000000000..43c18ed78a8
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Mock of the Native Hooks
+// TODO: Should this move into the components themselves? E.g. focusable
+
+const TextInputState = {
+  blurTextInput: jest.fn(),
+  focusTextInput: jest.fn(),
+};
+
+module.exports = TextInputState;
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
new file mode 100644
index 00000000000..2aba1633092
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Mock of the Native Hooks
+
+// Map of viewTag -> {children: [childTag], parent: ?parentTag}
+const roots = [];
+const views = new Map();
+
+function autoCreateRoot(tag) {
+  // Seriously, this is how we distinguish roots in RN.
+  if (!views.has(tag) && tag % 10 === 1) {
+    roots.push(tag);
+    views.set(tag, {
+      children: [],
+      parent: null,
+      props: {},
+      viewName: '<native root>',
+    });
+  }
+}
+
+function insertSubviewAtIndex(parent, child, index) {
+  const parentInfo = views.get(parent);
+  const childInfo = views.get(child);
+
+  if (childInfo.parent !== null) {
+    throw new Error(
+      `Inserting view ${child} ${JSON.stringify(
+        childInfo.props,
+      )} which already has parent`,
+    );
+  }
+
+  if (0 > index || index > parentInfo.children.length) {
+    throw new Error(
+      `Invalid index ${index} for children ${parentInfo.children}`,
+    );
+  }
+
+  parentInfo.children.splice(index, 0, child);
+  childInfo.parent = parent;
+}
+
+function removeChild(parent, child) {
+  const parentInfo = views.get(parent);
+  const childInfo = views.get(child);
+  const index = parentInfo.children.indexOf(child);
+
+  if (index < 0) {
+    throw new Error(`Missing view ${child} during removal`);
+  }
+
+  parentInfo.children.splice(index, 1);
+  childInfo.parent = null;
+}
+
+const RCTUIManager = {
+  __dumpHierarchyForJestTestsOnly: function () {
+    function dumpSubtree(tag, indent) {
+      const info = views.get(tag);
+      let out = '';
+      out +=
+        ' '.repeat(indent) + info.viewName + ' ' + JSON.stringify(info.props);
+      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+      for (const child of info.children) {
+        out += '\n' + dumpSubtree(child, indent + 2);
+      }
+      return out;
+    }
+    return roots.map(tag => dumpSubtree(tag, 0)).join('\n');
+  },
+  clearJSResponder: jest.fn(),
+  createView: jest.fn(function createView(reactTag, viewName, rootTag, props) {
+    if (views.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
+    views.set(reactTag, {
+      children: [],
+      parent: null,
+      props: props,
+      viewName: viewName,
+    });
+  }),
+  dispatchViewManagerCommand: jest.fn(),
+  sendAccessibilityEvent: jest.fn(),
+  setJSResponder: jest.fn(),
+  setChildren: jest.fn(function setChildren(parentTag, reactTags) {
+    autoCreateRoot(parentTag);
+
+    // Native doesn't actually check this but it seems like a good idea
+    if (views.get(parentTag).children.length !== 0) {
+      throw new Error(`Calling .setChildren on nonempty view ${parentTag}`);
+    }
+
+    // This logic ported from iOS (RCTUIManager.m)
+    reactTags.forEach((tag, i) => {
+      insertSubviewAtIndex(parentTag, tag, i);
+    });
+  }),
+  manageChildren: jest.fn(function manageChildren(
+    parentTag,
+    moveFromIndices = [],
+    moveToIndices = [],
+    addChildReactTags = [],
+    addAtIndices = [],
+    removeAtIndices = [],
+  ) {
+    autoCreateRoot(parentTag);
+
+    // This logic ported from iOS (RCTUIManager.m)
+    if (moveFromIndices.length !== moveToIndices.length) {
+      throw new Error(
+        `Mismatched move indices ${moveFromIndices} and ${moveToIndices}`,
+      );
+    }
+
+    if (addChildReactTags.length !== addAtIndices.length) {
+      throw new Error(
+        `Mismatched add indices ${addChildReactTags} and ${addAtIndices}`,
+      );
+    }
+
+    const parentInfo = views.get(parentTag);
+    const permanentlyRemovedChildren = removeAtIndices.map(
+      index => parentInfo.children[index],
+    );
+    const temporarilyRemovedChildren = moveFromIndices.map(
+      index => parentInfo.children[index],
+    );
+    permanentlyRemovedChildren.forEach(tag => removeChild(parentTag, tag));
+    temporarilyRemovedChildren.forEach(tag => removeChild(parentTag, tag));
+    permanentlyRemovedChildren.forEach(tag => {
+      views.delete(tag);
+    });
+    // List of [index, tag]
+    const indicesToInsert = [];
+    temporarilyRemovedChildren.forEach((tag, i) => {
+      indicesToInsert.push([moveToIndices[i], temporarilyRemovedChildren[i]]);
+    });
+    addChildReactTags.forEach((tag, i) => {
+      indicesToInsert.push([addAtIndices[i], addChildReactTags[i]]);
+    });
+    indicesToInsert.sort((a, b) => a[0] - b[0]);
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const [i, tag] of indicesToInsert) {
+      insertSubviewAtIndex(parentTag, tag, i);
+    }
+  }),
+  updateView: jest.fn(),
+  removeSubviewsFromContainerWithID: jest.fn(function (parentTag) {
+    views.get(parentTag).children.forEach(tag => removeChild(parentTag, tag));
+  }),
+  replaceExistingNonRootView: jest.fn(),
+  measure: jest.fn(function measure(tag, callback) {
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
+    callback(10, 10, 100, 100, 0, 0);
+  }),
+  measureInWindow: jest.fn(function measureInWindow(tag, callback) {
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
+    callback(10, 10, 100, 100);
+  }),
+  measureLayout: jest.fn(
+    function measureLayout(tag, relativeTag, fail, success) {
+      if (typeof tag !== 'number') {
+        throw new Error(`Expected tag to be a number, was passed ${tag}`);
+      }
+
+      if (typeof relativeTag !== 'number') {
+        throw new Error(
+          `Expected relativeTag to be a number, was passed ${relativeTag}`,
+        );
+      }
+
+      success(1, 1, 100, 100);
+    },
+  ),
+  __takeSnapshot: jest.fn(),
+};
+
+module.exports = RCTUIManager;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createAttributePayload.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createAttributePayload.js
new file mode 100644
index 00000000000..78ce43e1d9a
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createAttributePayload.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {AttributeConfiguration} from '../../../../ReactNativeTypes';
+
+export default function create(
+  props: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  const {children, ...propsToPass} = props;
+  return propsToPass;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicInstance.js
new file mode 100644
index 00000000000..c0b38c15114
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicInstance.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {
+  PublicInstance,
+  PublicRootInstance,
+} from './ReactNativePrivateInterface';
+
+export default function createPublicInstance(
+  tag: number,
+  viewConfig: mixed,
+  internalInstanceHandle: mixed,
+  rootPublicInstance: PublicRootInstance | null,
+): PublicInstance {
+  return {
+    __nativeTag: tag,
+    __internalInstanceHandle: internalInstanceHandle,
+    __rootPublicInstance: rootPublicInstance,
+  };
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicRootInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicRootInstance.js
new file mode 100644
index 00000000000..a313c3cc849
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicRootInstance.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {PublicRootInstance} from './ReactNativePrivateInterface';
+
+export default function createPublicRootInstance(
+  rootTag: number,
+): PublicRootInstance {
+  return null;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicTextInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicTextInstance.js
new file mode 100644
index 00000000000..a4527bff9f6
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicTextInstance.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {PublicInstance} from './ReactNativePrivateInterface';
+
+export default function createPublicTextInstance(
+  internalInstanceHandle: mixed,
+): PublicInstance {
+  return {
+    __internalInstanceHandle: internalInstanceHandle,
+  };
+}
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
new file mode 100644
index 00000000000..200668afdfe
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+type Options = {+unsafelyIgnoreFunctions?: boolean};
+
+/*
+ * @returns {bool} true if different, false if equal
+ */
+function deepDiffer(
+  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 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
+    return one !== two;
+  }
+  if (typeof two !== 'object' || two === null) {
+    // We know they are different because the previous case would have triggered
+    // otherwise.
+    return true;
+  }
+  if (one.constructor !== two.constructor) {
+    return true;
+  }
+  if (Array.isArray(one)) {
+    // We know two is also an array because the constructors are equal
+    const len = one.length;
+    if (two.length !== len) {
+      return true;
+    }
+    for (let ii = 0; ii < len; ii++) {
+      if (deepDiffer(one[ii], two[ii], maxDepth - 1, options)) {
+        return true;
+      }
+    }
+  } else {
+    for (const key in one) {
+      if (deepDiffer(one[key], two[key], maxDepth - 1, options)) {
+        return true;
+      }
+    }
+    for (const twoKey in two) {
+      // The only case we haven't checked yet is keys that are in two but aren't
+      // in one, which means they are different.
+      if (one[twoKey] === undefined && two[twoKey] !== undefined) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+module.exports = deepDiffer;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepFreezeAndThrowOnMutationInDev.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepFreezeAndThrowOnMutationInDev.js
new file mode 100644
index 00000000000..28da2c86ae5
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepFreezeAndThrowOnMutationInDev.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// TODO: move into react or fbjs
+
+function deepFreezeAndThrowOnMutationInDev() {}
+
+module.exports = deepFreezeAndThrowOnMutationInDev;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/diffAttributePayloads.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/diffAttributePayloads.js
new file mode 100644
index 00000000000..9a1756ef9f9
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/diffAttributePayloads.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {AttributeConfiguration} from '../../../../ReactNativeTypes';
+
+import deepDiffer from './deepDiffer';
+
+export default function diff(
+  prevProps: Object,
+  nextProps: Object,
+  validAttributes: AttributeConfiguration,
+): null | Object {
+  const {children: _prevChildren, ...prevPropsPassed} = prevProps;
+  const {children: _nextChildren, ...nextPropsToPass} = nextProps;
+  return deepDiffer(prevPropsPassed, nextPropsToPass) ? nextPropsToPass : null;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/flattenStyle.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/flattenStyle.js
new file mode 100644
index 00000000000..49bebf6f075
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/flattenStyle.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// TODO: Move flattenStyle into react
+
+function flattenStyle() {}
+
+module.exports = flattenStyle;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNativeTagFromPublicInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNativeTagFromPublicInstance.js
new file mode 100644
index 00000000000..b6862281494
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNativeTagFromPublicInstance.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {PublicInstance} from './ReactNativePrivateInterface';
+
+export default function getNativeTagFromPublicInstance(
+  publicInstance: PublicInstance,
+) {
+  return publicInstance.__nativeTag;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNodeFromPublicInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNodeFromPublicInstance.js
new file mode 100644
index 00000000000..b592968462e
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNodeFromPublicInstance.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import type {PublicInstance} from './ReactNativePrivateInterface';
+
+import {getNodeFromInternalInstanceHandle} from '../../../../ReactNativePublicCompat';
+
+export default function getNodeFromPublicInstance(
+  publicInstance: PublicInstance,
+) {
+  return getNodeFromInternalInstanceHandle(
+    publicInstance.__internalInstanceHandle,
+  );
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js
new file mode 100644
index 00000000000..8ff892ae3a5
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = jest.fn();
diff --git a/packages/react-native-renderer/src/__tests__/EventPluginRegistry-test.internal.js b/packages/react-native-renderer/src/__tests__/EventPluginRegistry-test.internal.js
new file mode 100644
index 00000000000..00a09301dac
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/EventPluginRegistry-test.internal.js
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('EventPluginRegistry', () => {
+  let EventPluginRegistry;
+  let createPlugin;
+
+  beforeEach(() => {
+    jest.resetModules();
+    // These tests are intentionally testing the private injection interface.
+    // 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('react-native-renderer/src/legacy-events/EventPluginRegistry');
+
+    createPlugin = function (properties) {
+      return Object.assign({extractEvents: function () {}}, properties);
+    };
+  });
+
+  it('should be able to inject ordering before plugins', () => {
+    const OnePlugin = createPlugin();
+    const TwoPlugin = createPlugin();
+    const ThreePlugin = createPlugin();
+
+    EventPluginRegistry.injectEventPluginOrder(['one', 'two', 'three']);
+    EventPluginRegistry.injectEventPluginsByName({
+      one: OnePlugin,
+      two: TwoPlugin,
+    });
+    EventPluginRegistry.injectEventPluginsByName({
+      three: ThreePlugin,
+    });
+
+    expect(EventPluginRegistry.plugins.length).toBe(3);
+    expect(EventPluginRegistry.plugins[0]).toBe(OnePlugin);
+    expect(EventPluginRegistry.plugins[1]).toBe(TwoPlugin);
+    expect(EventPluginRegistry.plugins[2]).toBe(ThreePlugin);
+  });
+
+  it('should be able to inject plugins before and after ordering', () => {
+    const OnePlugin = createPlugin();
+    const TwoPlugin = createPlugin();
+    const ThreePlugin = createPlugin();
+
+    EventPluginRegistry.injectEventPluginsByName({
+      one: OnePlugin,
+      two: TwoPlugin,
+    });
+    EventPluginRegistry.injectEventPluginOrder(['one', 'two', 'three']);
+    EventPluginRegistry.injectEventPluginsByName({
+      three: ThreePlugin,
+    });
+
+    expect(EventPluginRegistry.plugins.length).toBe(3);
+    expect(EventPluginRegistry.plugins[0]).toBe(OnePlugin);
+    expect(EventPluginRegistry.plugins[1]).toBe(TwoPlugin);
+    expect(EventPluginRegistry.plugins[2]).toBe(ThreePlugin);
+  });
+
+  it('should be able to inject repeated plugins and out-of-order', () => {
+    const OnePlugin = createPlugin();
+    const TwoPlugin = createPlugin();
+    const ThreePlugin = createPlugin();
+
+    EventPluginRegistry.injectEventPluginsByName({
+      one: OnePlugin,
+      three: ThreePlugin,
+    });
+    EventPluginRegistry.injectEventPluginOrder(['one', 'two', 'three']);
+    EventPluginRegistry.injectEventPluginsByName({
+      two: TwoPlugin,
+      three: ThreePlugin,
+    });
+
+    expect(EventPluginRegistry.plugins.length).toBe(3);
+    expect(EventPluginRegistry.plugins[0]).toBe(OnePlugin);
+    expect(EventPluginRegistry.plugins[1]).toBe(TwoPlugin);
+    expect(EventPluginRegistry.plugins[2]).toBe(ThreePlugin);
+  });
+
+  it('should throw if plugin does not implement `extractEvents`', () => {
+    const BadPlugin = {};
+
+    EventPluginRegistry.injectEventPluginOrder(['bad']);
+
+    expect(function () {
+      EventPluginRegistry.injectEventPluginsByName({
+        bad: BadPlugin,
+      });
+    }).toThrowError(
+      'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
+        'method, but `bad` does not.',
+    );
+  });
+
+  it('should throw if plugin does not exist in ordering', () => {
+    const OnePlugin = createPlugin();
+    const RandomPlugin = createPlugin();
+
+    EventPluginRegistry.injectEventPluginOrder(['one']);
+
+    expect(function () {
+      EventPluginRegistry.injectEventPluginsByName({
+        one: OnePlugin,
+        random: RandomPlugin,
+      });
+    }).toThrowError(
+      'EventPluginRegistry: Cannot inject event plugins that do not exist ' +
+        'in the plugin ordering, `random`.',
+    );
+  });
+
+  it('should throw if ordering is injected more than once', () => {
+    const pluginOrdering = [];
+
+    EventPluginRegistry.injectEventPluginOrder(pluginOrdering);
+
+    expect(function () {
+      EventPluginRegistry.injectEventPluginOrder(pluginOrdering);
+    }).toThrowError(
+      'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
+        'once. You are likely trying to load more than one copy of React.',
+    );
+  });
+
+  it('should throw if different plugins injected using same name', () => {
+    const OnePlugin = createPlugin();
+    const TwoPlugin = createPlugin();
+
+    EventPluginRegistry.injectEventPluginsByName({same: OnePlugin});
+
+    expect(function () {
+      EventPluginRegistry.injectEventPluginsByName({same: TwoPlugin});
+    }).toThrowError(
+      'EventPluginRegistry: Cannot inject two different event plugins using ' +
+        'the same name, `same`.',
+    );
+  });
+
+  it('should publish registration names of injected plugins', () => {
+    const OnePlugin = createPlugin({
+      eventTypes: {
+        click: {registrationName: 'onClick'},
+        focus: {registrationName: 'onFocus'},
+      },
+    });
+    const TwoPlugin = createPlugin({
+      eventTypes: {
+        magic: {
+          phasedRegistrationNames: {
+            bubbled: 'onMagicBubble',
+            captured: 'onMagicCapture',
+          },
+        },
+      },
+    });
+
+    EventPluginRegistry.injectEventPluginsByName({one: OnePlugin});
+    EventPluginRegistry.injectEventPluginOrder(['one', 'two']);
+
+    expect(
+      Object.keys(EventPluginRegistry.registrationNameModules).length,
+    ).toBe(2);
+    expect(EventPluginRegistry.registrationNameModules.onClick).toBe(OnePlugin);
+    expect(EventPluginRegistry.registrationNameModules.onFocus).toBe(OnePlugin);
+
+    EventPluginRegistry.injectEventPluginsByName({two: TwoPlugin});
+
+    expect(
+      Object.keys(EventPluginRegistry.registrationNameModules).length,
+    ).toBe(4);
+    expect(EventPluginRegistry.registrationNameModules.onMagicBubble).toBe(
+      TwoPlugin,
+    );
+    expect(EventPluginRegistry.registrationNameModules.onMagicCapture).toBe(
+      TwoPlugin,
+    );
+  });
+
+  it('should throw if multiple registration names collide', () => {
+    const OnePlugin = createPlugin({
+      eventTypes: {
+        photoCapture: {registrationName: 'onPhotoCapture'},
+      },
+    });
+    const TwoPlugin = createPlugin({
+      eventTypes: {
+        photo: {
+          phasedRegistrationNames: {
+            bubbled: 'onPhotoBubble',
+            captured: 'onPhotoCapture',
+          },
+        },
+      },
+    });
+
+    EventPluginRegistry.injectEventPluginsByName({
+      one: OnePlugin,
+      two: TwoPlugin,
+    });
+
+    expect(function () {
+      EventPluginRegistry.injectEventPluginOrder(['one', 'two']);
+    }).toThrowError(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        'registration name, `onPhotoCapture`.',
+    );
+  });
+
+  it('should throw if an invalid event is published', () => {
+    const OnePlugin = createPlugin({
+      eventTypes: {
+        badEvent: {
+          /* missing configuration */
+        },
+      },
+    });
+
+    EventPluginRegistry.injectEventPluginsByName({one: OnePlugin});
+
+    expect(function () {
+      EventPluginRegistry.injectEventPluginOrder(['one']);
+    }).toThrowError(
+      'EventPluginRegistry: Failed to publish event `badEvent` for plugin ' +
+        '`one`.',
+    );
+  });
+});
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
new file mode 100644
index 00000000000..5bb90c24e65
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -0,0 +1,1509 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactFabric;
+let ReactNativePrivateInterface;
+let createReactNativeComponentClass;
+let StrictMode;
+let act;
+let assertConsoleErrorDev;
+
+const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
+  "dispatchCommand was called with a ref that isn't a " +
+  'native component. Use React.forwardRef to get access to the underlying native component';
+
+const SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT =
+  "sendAccessibilityEvent was called with a ref that isn't a " +
+  'native component. Use React.forwardRef to get access to the underlying native component';
+
+describe('ReactFabric', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
+
+    React = require('react');
+    StrictMode = React.StrictMode;
+    ReactFabric = require('react-native-renderer/fabric');
+    ReactNativePrivateInterface = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
+    createReactNativeComponentClass =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+        .ReactNativeViewConfigRegistry.register;
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  it('should be able to create and render a native component', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    await act(() => {
+      ReactFabric.render(<View foo="test" />, 1, null, true);
+    });
+    expect(nativeFabricUIManager.createNode).toBeCalled();
+    expect(nativeFabricUIManager.appendChild).not.toBeCalled();
+    expect(nativeFabricUIManager.completeRoot).toBeCalled();
+  });
+
+  it('should be able to create and update a native component', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const firstNode = {};
+
+    nativeFabricUIManager.createNode.mockReturnValue(firstNode);
+
+    await act(() => {
+      ReactFabric.render(<View foo="foo" />, 11, null, true);
+    });
+
+    expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
+
+    await act(() => {
+      ReactFabric.render(<View foo="bar" />, 11, null, true);
+    });
+
+    expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][0]).toBe(
+      firstNode,
+    );
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],
+    ).toEqual({
+      foo: 'bar',
+    });
+  });
+
+  it('should not call FabricUIManager.cloneNode after render for properties that have not changed', async () => {
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTText',
+    }));
+
+    await act(() => {
+      ReactFabric.render(<Text foo="a">1</Text>, 11, null, true);
+    });
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+
+    // If no properties have changed, we shouldn't call cloneNode.
+    await act(() => {
+      ReactFabric.render(<Text foo="a">1</Text>, 11, null, true);
+    });
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+
+    // Only call cloneNode for the changed property (and not for text).
+    await act(() => {
+      ReactFabric.render(<Text foo="b">1</Text>, 11, null, true);
+    });
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+
+    // Only call cloneNode for the changed text (and no other properties).
+    await act(() => {
+      ReactFabric.render(<Text foo="b">2</Text>, 11, null, true);
+    });
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildren,
+    ).toHaveBeenCalledTimes(1);
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+
+    // Call cloneNode for both changed text and properties.
+    await act(() => {
+      ReactFabric.render(<Text foo="c">3</Text>, 11, null, true);
+    });
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildren,
+    ).toHaveBeenCalledTimes(1);
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).toHaveBeenCalledTimes(1);
+  });
+
+  it('should only pass props diffs to FabricUIManager.cloneNode', async () => {
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {foo: true, bar: true},
+      uiViewClassName: 'RCTText',
+    }));
+
+    await act(() => {
+      ReactFabric.render(
+        <Text foo="a" bar="a">
+          1
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+
+    jest
+      .spyOn(ReactNativePrivateInterface, 'diffAttributePayloads')
+      .mockReturnValue({bar: 'b'});
+
+    await act(() => {
+      ReactFabric.render(
+        <Text foo="a" bar="b">
+          1
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],
+    ).toEqual({
+      bar: 'b',
+    });
+    expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11
+ RCTText {"foo":"a","bar":"b"}
+   RCTRawText {"text":"1"}`);
+
+    jest
+      .spyOn(ReactNativePrivateInterface, 'diffAttributePayloads')
+      .mockReturnValue({foo: 'b'});
+    await act(() => {
+      ReactFabric.render(
+        <Text foo="b" bar="b">
+          2
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+    const argIndex = gate(flags => flags.passChildrenWhenCloningPersistedNodes)
+      ? 2
+      : 1;
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][
+        argIndex
+      ],
+    ).toEqual({
+      foo: 'b',
+    });
+    expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11
+ RCTText {"foo":"b","bar":"b"}
+   RCTRawText {"text":"2"}`);
+  });
+
+  it('should not clone nodes without children when updating props', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const Component = ({foo}) => (
+      <View>
+        <View foo={foo} />
+      </View>
+    );
+
+    await act(() =>
+      ReactFabric.render(<Component foo={true} />, 11, null, true),
+    );
+    expect(nativeFabricUIManager.completeRoot).toBeCalled();
+    jest.clearAllMocks();
+
+    await act(() =>
+      ReactFabric.render(<Component foo={false} />, 11, null, true),
+    );
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledWith(
+      expect.anything(),
+      {foo: false},
+    );
+
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildren,
+    ).toHaveBeenCalledTimes(1);
+    if (gate(flags => flags.passChildrenWhenCloningPersistedNodes)) {
+      expect(
+        nativeFabricUIManager.cloneNodeWithNewChildren,
+      ).toHaveBeenCalledWith(expect.anything(), [
+        expect.objectContaining({props: {foo: false}}),
+      ]);
+      expect(nativeFabricUIManager.appendChild).not.toBeCalled();
+    } else {
+      expect(
+        nativeFabricUIManager.cloneNodeWithNewChildren,
+      ).toHaveBeenCalledWith(expect.anything());
+      expect(nativeFabricUIManager.appendChild).toHaveBeenCalledTimes(1);
+    }
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+    expect(nativeFabricUIManager.completeRoot).toBeCalled();
+  });
+
+  it('should not clone nodes when layout effects are used', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ComponentWithEffect = () => {
+      React.useLayoutEffect(() => {});
+      return null;
+    };
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <ComponentWithEffect />
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+    expect(nativeFabricUIManager.completeRoot).toBeCalled();
+    jest.clearAllMocks();
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <ComponentWithEffect />
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+    expect(nativeFabricUIManager.completeRoot).not.toBeCalled();
+  });
+
+  it('should not clone nodes when insertion effects are used', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ComponentWithRef = () => {
+      React.useInsertionEffect(() => {});
+      return null;
+    };
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <ComponentWithRef />
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+    expect(nativeFabricUIManager.completeRoot).toBeCalled();
+    jest.clearAllMocks();
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <ComponentWithRef />
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+    expect(nativeFabricUIManager.completeRoot).not.toBeCalled();
+  });
+
+  it('should not clone nodes when useImperativeHandle is used', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ComponentWithImperativeHandle = props => {
+      React.useImperativeHandle(props.ref, () => ({greet: () => 'hello'}));
+      return null;
+    };
+
+    const ref = React.createRef();
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <ComponentWithImperativeHandle ref={ref} />
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+    expect(nativeFabricUIManager.completeRoot).toBeCalled();
+    expect(ref.current.greet()).toBe('hello');
+    jest.clearAllMocks();
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <ComponentWithImperativeHandle ref={ref} />
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+    expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
+    expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
+    expect(
+      nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
+    ).not.toBeCalled();
+    expect(nativeFabricUIManager.completeRoot).not.toBeCalled();
+    expect(ref.current.greet()).toBe('hello');
+  });
+
+  it('should call dispatchCommand for native refs', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.dispatchCommand.mockClear();
+
+    let viewRef;
+    await act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+        null,
+        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],
+    );
+  });
+
+  it('should warn and no-op if calling dispatchCommand on non native refs', async () => {
+    class BasicClass extends React.Component {
+      render() {
+        return <React.Fragment />;
+      }
+    }
+
+    nativeFabricUIManager.dispatchCommand.mockReset();
+
+    let viewRef;
+    await act(() => {
+      ReactFabric.render(
+        <BasicClass
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+        null,
+        true,
+      );
+    });
+
+    expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
+    ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
+    assertConsoleErrorDev([DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT], {
+      withoutStack: true,
+    });
+
+    expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
+  });
+
+  it('should call sendAccessibilityEvent for native refs', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.sendAccessibilityEvent.mockClear();
+
+    let viewRef;
+    await act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+        null,
+        true,
+      );
+    });
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+    ReactFabric.sendAccessibilityEvent(viewRef, 'focus');
+    expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledWith(
+      expect.any(Object),
+      'focus',
+    );
+  });
+
+  it('should warn and no-op if calling sendAccessibilityEvent on non native refs', async () => {
+    class BasicClass extends React.Component {
+      render() {
+        return <React.Fragment />;
+      }
+    }
+
+    nativeFabricUIManager.sendAccessibilityEvent.mockReset();
+
+    let viewRef;
+    await act(() => {
+      ReactFabric.render(
+        <BasicClass
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+        null,
+        true,
+      );
+    });
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+    ReactFabric.sendAccessibilityEvent(viewRef, 'eventTypeName');
+    assertConsoleErrorDev([SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT], {
+      withoutStack: true,
+    });
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
+
+  it('calls the callback with the correct instance and returns null', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let a;
+    let b;
+    let c;
+    await act(() => {
+      c = ReactFabric.render(
+        <View foo="foo" ref={v => (a = v)} />,
+        11,
+        function () {
+          b = this;
+        },
+        true,
+      );
+    });
+
+    expect(a).toBeTruthy();
+    expect(a).toBe(b);
+    expect(c).toBe(null);
+  });
+
+  // @gate !disableLegacyMode
+  it('returns the instance in legacy mode and calls the callback with it', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let a;
+    let b;
+    const c = ReactFabric.render(
+      <View
+        foo="foo"
+        ref={v => {
+          a = v;
+        }}
+      />,
+      11,
+      function () {
+        b = this;
+      },
+    );
+
+    expect(a).toBeTruthy();
+    expect(a).toBe(b);
+    expect(a).toBe(c);
+  });
+
+  it('renders and reorders children', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    class Component extends React.Component {
+      render() {
+        const chars = this.props.chars.split('');
+        return (
+          <View>
+            {chars.map(text => (
+              <View key={text} title={text} />
+            ))}
+          </View>
+        );
+      }
+    }
+
+    // Mini multi-child stress test: lots of reorders, some adds, some removes.
+    const before = 'abcdefghijklmnopqrst';
+    const after = 'mxhpgwfralkeoivcstzy';
+
+    await act(() => {
+      ReactFabric.render(<Component chars={before} />, 11, null, true);
+    });
+    expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11
+ RCTView {}
+   RCTView {"title":"a"}
+   RCTView {"title":"b"}
+   RCTView {"title":"c"}
+   RCTView {"title":"d"}
+   RCTView {"title":"e"}
+   RCTView {"title":"f"}
+   RCTView {"title":"g"}
+   RCTView {"title":"h"}
+   RCTView {"title":"i"}
+   RCTView {"title":"j"}
+   RCTView {"title":"k"}
+   RCTView {"title":"l"}
+   RCTView {"title":"m"}
+   RCTView {"title":"n"}
+   RCTView {"title":"o"}
+   RCTView {"title":"p"}
+   RCTView {"title":"q"}
+   RCTView {"title":"r"}
+   RCTView {"title":"s"}
+   RCTView {"title":"t"}`);
+
+    await act(() => {
+      ReactFabric.render(<Component chars={after} />, 11, null, true);
+    });
+    expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11
+ RCTView {}
+   RCTView {"title":"m"}
+   RCTView {"title":"x"}
+   RCTView {"title":"h"}
+   RCTView {"title":"p"}
+   RCTView {"title":"g"}
+   RCTView {"title":"w"}
+   RCTView {"title":"f"}
+   RCTView {"title":"r"}
+   RCTView {"title":"a"}
+   RCTView {"title":"l"}
+   RCTView {"title":"k"}
+   RCTView {"title":"e"}
+   RCTView {"title":"o"}
+   RCTView {"title":"i"}
+   RCTView {"title":"v"}
+   RCTView {"title":"c"}
+   RCTView {"title":"s"}
+   RCTView {"title":"t"}
+   RCTView {"title":"z"}
+   RCTView {"title":"y"}`);
+  });
+
+  it('recreates host parents even if only children changed', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const before = 'abcdefghijklmnopqrst';
+    const after = 'mxhpgwfralkeoivcstzy';
+
+    class Component extends React.Component {
+      state = {
+        chars: before,
+      };
+      render() {
+        const chars = this.state.chars.split('');
+        return (
+          <View>
+            {chars.map(text => (
+              <View key={text} title={text} />
+            ))}
+          </View>
+        );
+      }
+    }
+
+    const ref = React.createRef();
+    // Wrap in a host node.
+    await act(() => {
+      ReactFabric.render(
+        <View>
+          <Component ref={ref} />
+        </View>,
+        11,
+        null,
+        true,
+      );
+    });
+    expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(
+      `11
+ RCTView {}
+   RCTView {}
+     RCTView {"title":"a"}
+     RCTView {"title":"b"}
+     RCTView {"title":"c"}
+     RCTView {"title":"d"}
+     RCTView {"title":"e"}
+     RCTView {"title":"f"}
+     RCTView {"title":"g"}
+     RCTView {"title":"h"}
+     RCTView {"title":"i"}
+     RCTView {"title":"j"}
+     RCTView {"title":"k"}
+     RCTView {"title":"l"}
+     RCTView {"title":"m"}
+     RCTView {"title":"n"}
+     RCTView {"title":"o"}
+     RCTView {"title":"p"}
+     RCTView {"title":"q"}
+     RCTView {"title":"r"}
+     RCTView {"title":"s"}
+     RCTView {"title":"t"}`,
+    );
+
+    // Call setState() so that we skip over the top-level host node.
+    // It should still get recreated despite a bailout.
+    await act(() => {
+      ref.current.setState({
+        chars: after,
+      });
+    });
+    expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11
+ RCTView {}
+   RCTView {}
+     RCTView {"title":"m"}
+     RCTView {"title":"x"}
+     RCTView {"title":"h"}
+     RCTView {"title":"p"}
+     RCTView {"title":"g"}
+     RCTView {"title":"w"}
+     RCTView {"title":"f"}
+     RCTView {"title":"r"}
+     RCTView {"title":"a"}
+     RCTView {"title":"l"}
+     RCTView {"title":"k"}
+     RCTView {"title":"e"}
+     RCTView {"title":"o"}
+     RCTView {"title":"i"}
+     RCTView {"title":"v"}
+     RCTView {"title":"c"}
+     RCTView {"title":"s"}
+     RCTView {"title":"t"}
+     RCTView {"title":"z"}
+     RCTView {"title":"y"}`);
+  });
+
+  it('calls setState with no arguments', async () => {
+    let mockArgs;
+    class Component extends React.Component {
+      componentDidMount() {
+        this.setState({}, (...args) => (mockArgs = args));
+      }
+      render() {
+        return false;
+      }
+    }
+
+    await act(() => {
+      ReactFabric.render(<Component />, 11, null, true);
+    });
+    expect(mockArgs.length).toEqual(0);
+  });
+
+  it('should call complete after inserting children', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const snapshots = [];
+    nativeFabricUIManager.completeRoot.mockImplementation(
+      function (rootTag, newChildSet) {
+        snapshots.push(
+          nativeFabricUIManager.__dumpChildSetForJestTestsOnly(newChildSet),
+        );
+      },
+    );
+
+    await act(() => {
+      ReactFabric.render(
+        <View foo="a">
+          <View foo="b" />
+        </View>,
+        22,
+        null,
+        true,
+      );
+    });
+    expect(snapshots).toEqual([
+      `RCTView {"foo":"a"}
+  RCTView {"foo":"b"}`,
+    ]);
+  });
+
+  it('should not throw when <View> is used inside of a <Text> ancestor', async () => {
+    const Image = createReactNativeComponentClass('RCTImage', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTImage',
+    }));
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTView',
+    }));
+
+    await act(() => {
+      ReactFabric.render(
+        <Text>
+          <View />
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+
+    await act(() => {
+      ReactFabric.render(
+        <Text>
+          <Image />
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+  });
+
+  it('should console error for text not inside of a <Text> ancestor', async () => {
+    const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTScrollView',
+    }));
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTView',
+    }));
+
+    await act(() => {
+      ReactFabric.render(<View>this should warn</View>, 11, null, true);
+    });
+    assertConsoleErrorDev([
+      'Text strings must be rendered within a <Text> component.\n' +
+        '    in RCTView (at **)',
+    ]);
+
+    await act(() => {
+      ReactFabric.render(
+        <Text>
+          <ScrollView>hi hello hi</ScrollView>
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+    assertConsoleErrorDev([
+      'Text strings must be rendered within a <Text> component.\n' +
+        '    in RCTScrollView (at **)',
+    ]);
+  });
+
+  it('should not throw for text inside of an indirect <Text> ancestor', async () => {
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+
+    const Indirection = () => 'Hi';
+
+    await act(() => {
+      ReactFabric.render(
+        <Text>
+          <Indirection />
+        </Text>,
+        11,
+        null,
+        true,
+      );
+    });
+  });
+
+  it('dispatches events to the last committed props', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTView',
+      directEventTypes: {
+        topTouchStart: {
+          registrationName: 'onTouchStart',
+        },
+      },
+    }));
+
+    const touchStart = jest.fn();
+    const touchStart2 = jest.fn();
+
+    await act(() => {
+      ReactFabric.render(<View onTouchStart={touchStart} />, 11, null, true);
+    });
+
+    expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(1);
+    expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(
+      1,
+    );
+
+    const [, , , , instanceHandle] =
+      nativeFabricUIManager.createNode.mock.calls[0];
+    const [dispatchEvent] =
+      nativeFabricUIManager.registerEventHandler.mock.calls[0];
+
+    const touchEvent = {
+      touches: [],
+      changedTouches: [],
+    };
+
+    expect(touchStart).not.toBeCalled();
+
+    dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);
+
+    expect(touchStart).toBeCalled();
+    expect(touchStart2).not.toBeCalled();
+
+    await act(() => {
+      ReactFabric.render(<View onTouchStart={touchStart2} />, 11, null, true);
+    });
+
+    // Intentionally dispatch to the same instanceHandle again.
+    dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);
+
+    // The current semantics dictate that we always dispatch to the last committed
+    // props even though the actual scheduling of the event could have happened earlier.
+    // This could change in the future.
+    expect(touchStart2).toBeCalled();
+  });
+
+  describe('skipBubbling', () => {
+    it('should skip bubbling to ancestor if specified', async () => {
+      const View = createReactNativeComponentClass('RCTView', () => ({
+        validAttributes: {},
+        uiViewClassName: 'RCTView',
+        bubblingEventTypes: {
+          topDefaultBubblingEvent: {
+            phasedRegistrationNames: {
+              captured: 'onDefaultBubblingEventCapture',
+              bubbled: 'onDefaultBubblingEvent',
+            },
+          },
+          topBubblingEvent: {
+            phasedRegistrationNames: {
+              captured: 'onBubblingEventCapture',
+              bubbled: 'onBubblingEvent',
+              skipBubbling: false,
+            },
+          },
+          topSkipBubblingEvent: {
+            phasedRegistrationNames: {
+              captured: 'onSkippedBubblingEventCapture',
+              bubbled: 'onSkippedBubblingEvent',
+              skipBubbling: true,
+            },
+          },
+        },
+      }));
+      const ancestorBubble = jest.fn();
+      const ancestorCapture = jest.fn();
+      const targetBubble = jest.fn();
+      const targetCapture = jest.fn();
+
+      const event = {};
+
+      await act(() => {
+        ReactFabric.render(
+          <View
+            onSkippedBubblingEventCapture={ancestorCapture}
+            onDefaultBubblingEventCapture={ancestorCapture}
+            onBubblingEventCapture={ancestorCapture}
+            onSkippedBubblingEvent={ancestorBubble}
+            onDefaultBubblingEvent={ancestorBubble}
+            onBubblingEvent={ancestorBubble}>
+            <View
+              onSkippedBubblingEventCapture={targetCapture}
+              onDefaultBubblingEventCapture={targetCapture}
+              onBubblingEventCapture={targetCapture}
+              onSkippedBubblingEvent={targetBubble}
+              onDefaultBubblingEvent={targetBubble}
+              onBubblingEvent={targetBubble}
+            />
+          </View>,
+          11,
+          null,
+          true,
+        );
+      });
+
+      expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(2);
+      expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(
+        1,
+      );
+      const [, , , , childInstance] =
+        nativeFabricUIManager.createNode.mock.calls[0];
+      const [dispatchEvent] =
+        nativeFabricUIManager.registerEventHandler.mock.calls[0];
+
+      dispatchEvent(childInstance, 'topDefaultBubblingEvent', event);
+      expect(targetBubble).toHaveBeenCalledTimes(1);
+      expect(targetCapture).toHaveBeenCalledTimes(1);
+      expect(ancestorCapture).toHaveBeenCalledTimes(1);
+      expect(ancestorBubble).toHaveBeenCalledTimes(1);
+      ancestorBubble.mockReset();
+      ancestorCapture.mockReset();
+      targetBubble.mockReset();
+      targetCapture.mockReset();
+
+      dispatchEvent(childInstance, 'topBubblingEvent', event);
+      expect(targetBubble).toHaveBeenCalledTimes(1);
+      expect(targetCapture).toHaveBeenCalledTimes(1);
+      expect(ancestorCapture).toHaveBeenCalledTimes(1);
+      expect(ancestorBubble).toHaveBeenCalledTimes(1);
+      ancestorBubble.mockReset();
+      ancestorCapture.mockReset();
+      targetBubble.mockReset();
+      targetCapture.mockReset();
+
+      dispatchEvent(childInstance, 'topSkipBubblingEvent', event);
+      expect(targetBubble).toHaveBeenCalledTimes(1);
+      expect(targetCapture).toHaveBeenCalledTimes(1);
+      expect(ancestorCapture).toHaveBeenCalledTimes(1);
+      expect(ancestorBubble).not.toBeCalled();
+    });
+  });
+
+  it('dispatches event with target as instance', async () => {
+    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();
+
+    await act(() => {
+      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,
+        null,
+        true,
+      );
+    });
+
+    const [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', async () => {
+    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>
+        );
+      }
+    }
+
+    await act(() => {
+      ReactFabric.render(
+        <ContainsStrictModeChild ref={n => (parent = n)} />,
+        11,
+        null,
+        true,
+      );
+    });
+
+    const match = ReactFabric.findHostInstance_DEPRECATED(parent);
+    assertConsoleErrorDev([
+      '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://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  it('findHostInstance_DEPRECATED should warn if passed a component that is inside StrictMode', async () => {
+    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)} />;
+      }
+    }
+
+    await act(() => {
+      ReactFabric.render(
+        <StrictMode>
+          <IsInStrictMode ref={n => (parent = n)} />
+        </StrictMode>,
+        11,
+        null,
+        true,
+      );
+    });
+
+    const match = ReactFabric.findHostInstance_DEPRECATED(parent);
+    assertConsoleErrorDev([
+      '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://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in IsInStrictMode (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  it('findNodeHandle should warn if used to find a host component inside StrictMode', async () => {
+    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>
+        );
+      }
+    }
+
+    await act(() => {
+      ReactFabric.render(
+        <ContainsStrictModeChild ref={n => (parent = n)} />,
+        11,
+        null,
+        true,
+      );
+    });
+
+    const match = ReactFabric.findNodeHandle(parent);
+    assertConsoleErrorDev([
+      '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. ' +
+        'Learn more about using refs safely here: ' +
+        'https://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(
+      ReactNativePrivateInterface.getNativeTagFromPublicInstance(child),
+    );
+  });
+
+  it('findNodeHandle should warn if passed a component that is inside StrictMode', async () => {
+    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)} />;
+      }
+    }
+
+    await act(() => {
+      ReactFabric.render(
+        <StrictMode>
+          <IsInStrictMode ref={n => (parent = n)} />
+        </StrictMode>,
+        11,
+        null,
+        true,
+      );
+    });
+
+    const match = ReactFabric.findNodeHandle(parent);
+    assertConsoleErrorDev([
+      '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. ' +
+        'Learn more about using refs safely here: ' +
+        'https://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in IsInStrictMode (at **)',
+    ]);
+    expect(match).toBe(
+      ReactNativePrivateInterface.getNativeTagFromPublicInstance(child),
+    );
+  });
+
+  it('findNodeHandle errors when called from render', async () => {
+    class TestComponent extends React.Component {
+      render() {
+        ReactFabric.findNodeHandle(this);
+        return null;
+      }
+    }
+    await act(() => {
+      ReactFabric.render(<TestComponent />, 11, null, true);
+    });
+    assertConsoleErrorDev([
+      'TestComponent 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.\n' +
+        '    in TestComponent (at **)',
+    ]);
+  });
+
+  it("findNodeHandle doesn't error when called outside render", async () => {
+    class TestComponent extends React.Component {
+      render() {
+        return null;
+      }
+      componentDidMount() {
+        ReactFabric.findNodeHandle(this);
+      }
+    }
+    await act(() => {
+      ReactFabric.render(<TestComponent />, 11, null, true);
+    });
+  });
+
+  it('should no-op if calling sendAccessibilityEvent on unmounted refs', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.sendAccessibilityEvent.mockReset();
+
+    let viewRef;
+    await act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+        null,
+        true,
+      );
+    });
+    const dangerouslyRetainedViewRef = viewRef;
+    await act(() => {
+      ReactFabric.stopSurface(11);
+    });
+
+    ReactFabric.sendAccessibilityEvent(
+      dangerouslyRetainedViewRef,
+      'eventTypeName',
+    );
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
+
+  it('getNodeFromInternalInstanceHandle should return the correct shadow node', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    await act(() => {
+      ReactFabric.render(<View foo="test" />, 1, null, true);
+    });
+
+    const internalInstanceHandle =
+      nativeFabricUIManager.createNode.mock.calls[0][4];
+    expect(internalInstanceHandle).toEqual(expect.any(Object));
+
+    const expectedShadowNode =
+      nativeFabricUIManager.createNode.mock.results[0].value;
+    expect(expectedShadowNode).toEqual(expect.any(Object));
+
+    const node = ReactFabric.getNodeFromInternalInstanceHandle(
+      internalInstanceHandle,
+    );
+    expect(node).toBe(expectedShadowNode);
+  });
+
+  it('getPublicInstanceFromInternalInstanceHandle should provide public instances for HostComponent', async () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let viewRef;
+    await act(() => {
+      ReactFabric.render(
+        <View
+          foo="test"
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        1,
+        null,
+        true,
+      );
+    });
+
+    const internalInstanceHandle =
+      nativeFabricUIManager.createNode.mock.calls[0][4];
+    expect(internalInstanceHandle).toEqual(expect.any(Object));
+
+    const publicInstance =
+      ReactFabric.getPublicInstanceFromInternalInstanceHandle(
+        internalInstanceHandle,
+      );
+    expect(publicInstance).toBe(viewRef);
+
+    await act(() => {
+      ReactFabric.render(null, 1, null, true);
+    });
+
+    const publicInstanceAfterUnmount =
+      ReactFabric.getPublicInstanceFromInternalInstanceHandle(
+        internalInstanceHandle,
+      );
+    expect(publicInstanceAfterUnmount).toBe(null);
+  });
+
+  it('getPublicInstanceFromInternalInstanceHandle should provide public instances for HostText', async () => {
+    jest.spyOn(ReactNativePrivateInterface, 'createPublicTextInstance');
+
+    const RCTText = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+
+    await act(() => {
+      ReactFabric.render(<RCTText>Text content</RCTText>, 1, null, true);
+    });
+
+    // Access the internal instance handle used to create the text node.
+    const internalInstanceHandle =
+      nativeFabricUIManager.createNode.mock.calls[0][4];
+    expect(internalInstanceHandle).toEqual(expect.any(Object));
+
+    // Text public instances should be created lazily.
+    expect(
+      ReactNativePrivateInterface.createPublicTextInstance,
+    ).not.toHaveBeenCalled();
+
+    const publicInstance =
+      ReactFabric.getPublicInstanceFromInternalInstanceHandle(
+        internalInstanceHandle,
+      );
+
+    // We just requested the text public instance, so it should have been created at this point.
+    expect(
+      ReactNativePrivateInterface.createPublicTextInstance,
+    ).toHaveBeenCalledTimes(1);
+    expect(
+      ReactNativePrivateInterface.createPublicTextInstance,
+    ).toHaveBeenCalledWith(internalInstanceHandle);
+
+    const expectedPublicInstance =
+      ReactNativePrivateInterface.createPublicTextInstance.mock.results[0]
+        .value;
+    expect(publicInstance).toBe(expectedPublicInstance);
+
+    await act(() => {
+      ReactFabric.render(null, 1, null, true);
+    });
+
+    const publicInstanceAfterUnmount =
+      ReactFabric.getPublicInstanceFromInternalInstanceHandle(
+        internalInstanceHandle,
+      );
+
+    expect(publicInstanceAfterUnmount).toBe(null);
+  });
+});
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
new file mode 100644
index 00000000000..4e0fcad9c80
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactFabric;
+let ReactNative;
+let UIManager;
+let createReactNativeComponentClass;
+let ReactNativePrivateInterface;
+let getNativeTagFromPublicInstance;
+
+describe('created with ReactFabric called with ReactNative', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
+    ReactNative = require('react-native-renderer');
+    jest.resetModules();
+    ReactNativePrivateInterface = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
+    UIManager =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').UIManager;
+    jest.mock('shared/ReactFeatureFlags', () =>
+      require('shared/forks/ReactFeatureFlags.native-oss'),
+    );
+
+    React = require('react');
+    ReactFabric = require('react-native-renderer/fabric');
+    createReactNativeComponentClass =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+        .ReactNativeViewConfigRegistry.register;
+    getNativeTagFromPublicInstance =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').getNativeTagFromPublicInstance;
+  });
+
+  it('find Fabric instances with the RN renderer', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactFabric.render(<Component ref={ref} />, 11);
+
+    const instance = ReactNative.findHostInstance_DEPRECATED(ref.current);
+    expect(getNativeTagFromPublicInstance(instance)).toBe(2);
+  });
+
+  it('find Fabric nodes with the RN renderer', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactFabric.render(<Component ref={ref} />, 11);
+
+    const handle = ReactNative.findNodeHandle(ref.current);
+    expect(handle).toBe(2);
+  });
+
+  it('dispatches commands on Fabric nodes with the RN renderer', () => {
+    nativeFabricUIManager.dispatchCommand.mockClear();
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ref = React.createRef();
+
+    ReactFabric.render(<View title="bar" ref={ref} />, 11);
+    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();
+  });
+
+  it('dispatches sendAccessibilityEvent on Fabric nodes with the RN renderer', () => {
+    nativeFabricUIManager.sendAccessibilityEvent.mockClear();
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ref = React.createRef();
+
+    ReactFabric.render(<View title="bar" ref={ref} />, 11);
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+    ReactNative.sendAccessibilityEvent(ref.current, 'focus');
+    expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledTimes(
+      1,
+    );
+    expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledWith(
+      expect.any(Object),
+      'focus',
+    );
+    expect(UIManager.sendAccessibilityEvent).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',
+    }));
+
+    const ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactNative.render(<Component ref={ref} />, 11);
+
+    const 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',
+    }));
+
+    const ref = React.createRef();
+
+    class Component extends React.Component {
+      render() {
+        return <View title="foo" />;
+      }
+    }
+
+    ReactNative.render(<Component ref={ref} />, 11);
+
+    const 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',
+    }));
+
+    const 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();
+  });
+
+  it('dispatches sendAccessibilityEvent on Paper nodes with the Fabric renderer', () => {
+    ReactNativePrivateInterface.legacySendAccessibilityEvent.mockReset();
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const ref = React.createRef();
+
+    ReactNative.render(<View title="bar" ref={ref} />, 11);
+    expect(
+      ReactNativePrivateInterface.legacySendAccessibilityEvent,
+    ).not.toBeCalled();
+    ReactFabric.sendAccessibilityEvent(ref.current, 'focus');
+    expect(
+      ReactNativePrivateInterface.legacySendAccessibilityEvent,
+    ).toHaveBeenCalledTimes(1);
+    expect(
+      ReactNativePrivateInterface.legacySendAccessibilityEvent,
+    ).toHaveBeenCalledWith(expect.any(Number), 'focus');
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
+});
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricFragmentRefs-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricFragmentRefs-test.internal.js
new file mode 100644
index 00000000000..ac4bcf36b00
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactFabricFragmentRefs-test.internal.js
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactFabric;
+let createReactNativeComponentClass;
+let act;
+let View;
+let Text;
+
+describe('Fabric FragmentRefs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
+
+    React = require('react');
+    ReactFabric = require('react-native-renderer/fabric');
+    createReactNativeComponentClass =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+        .ReactNativeViewConfigRegistry.register;
+    ({act} = require('internal-test-utils'));
+    View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {nativeID: true},
+      uiViewClassName: 'RCTView',
+    }));
+    Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {nativeID: true},
+      uiViewClassName: 'RCTText',
+    }));
+  });
+
+  // @gate enableFragmentRefs
+  it('attaches a ref to Fragment', async () => {
+    const fragmentRef = React.createRef();
+
+    await act(() =>
+      ReactFabric.render(
+        <View>
+          <React.Fragment ref={fragmentRef}>
+            <View>
+              <Text>Hi</Text>
+            </View>
+          </React.Fragment>
+        </View>,
+        11,
+        null,
+        true,
+      ),
+    );
+
+    expect(fragmentRef.current).not.toBe(null);
+  });
+
+  // @gate enableFragmentRefs
+  it('accepts a ref callback', async () => {
+    let fragmentRef;
+
+    await act(() => {
+      ReactFabric.render(
+        <React.Fragment ref={ref => (fragmentRef = ref)}>
+          <View nativeID="child">
+            <Text>Hi</Text>
+          </View>
+        </React.Fragment>,
+        11,
+        null,
+        true,
+      );
+    });
+
+    expect(fragmentRef && fragmentRef._fragmentFiber).toBeTruthy();
+  });
+
+  describe('observers', () => {
+    // @gate enableFragmentRefs
+    it('observes children, newly added children', async () => {
+      let logs = [];
+      const observer = {
+        observe: entry => {
+          // Here we reference internals because we don't need to mock the native observer
+          // We only need to test that each child node is observed on insertion
+          logs.push(entry.__internalInstanceHandle.pendingProps.nativeID);
+        },
+      };
+      function Test({showB}) {
+        const fragmentRef = React.useRef(null);
+        React.useEffect(() => {
+          fragmentRef.current.observeUsing(observer);
+          const lastRefValue = fragmentRef.current;
+          return () => {
+            lastRefValue.unobserveUsing(observer);
+          };
+        }, []);
+        return (
+          <View nativeID="parent">
+            <React.Fragment ref={fragmentRef}>
+              <View nativeID="A" />
+              {showB && <View nativeID="B" />}
+            </React.Fragment>
+          </View>
+        );
+      }
+
+      await act(() => {
+        ReactFabric.render(<Test showB={false} />, 11, null, true);
+      });
+      expect(logs).toEqual(['A']);
+      logs = [];
+      await act(() => {
+        ReactFabric.render(<Test showB={true} />, 11, null, true);
+      });
+      expect(logs).toEqual(['B']);
+    });
+  });
+});
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.internal.js
new file mode 100644
index 00000000000..da43b939c6e
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.internal.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+'use strict';
+
+const ReactNativeAttributePayload = require('../ReactNativeAttributePayload');
+
+const diff = ReactNativeAttributePayload.diff;
+
+describe('ReactNativeAttributePayload', () => {
+  it('should work with simple example', () => {
+    expect(diff({a: 1, c: 3}, {b: 2, c: 3}, {a: true, b: true})).toEqual({
+      a: null,
+      b: 2,
+    });
+  });
+
+  it('should skip fields that are equal', () => {
+    expect(
+      diff(
+        {a: 1, b: 'two', c: true, d: false, e: undefined, f: 0},
+        {a: 1, b: 'two', c: true, d: false, e: undefined, f: 0},
+        {a: true, b: true, c: true, d: true, e: true, f: true},
+      ),
+    ).toEqual(null);
+  });
+
+  it('should remove fields', () => {
+    expect(diff({a: 1}, {}, {a: true})).toEqual({a: null});
+  });
+
+  it('should remove fields that are set to undefined', () => {
+    expect(diff({a: 1}, {a: undefined}, {a: true})).toEqual({a: null});
+  });
+
+  it('should ignore invalid fields', () => {
+    expect(diff({a: 1}, {b: 2}, {})).toEqual(null);
+  });
+
+  it('should use the diff attribute', () => {
+    const diffA = jest.fn((a, b) => true);
+    const diffB = jest.fn((a, b) => false);
+    expect(
+      diff(
+        {a: [1], b: [3]},
+        {a: [2], b: [4]},
+        {a: {diff: diffA}, b: {diff: diffB}},
+      ),
+    ).toEqual({a: [2]});
+    expect(diffA).toBeCalledWith([1], [2]);
+    expect(diffB).toBeCalledWith([3], [4]);
+  });
+
+  it('should not use the diff attribute on addition/removal', () => {
+    const diffA = jest.fn();
+    const diffB = jest.fn();
+    expect(
+      diff({a: [1]}, {b: [2]}, {a: {diff: diffA}, b: {diff: diffB}}),
+    ).toEqual({a: null, b: [2]});
+    expect(diffA).not.toBeCalled();
+    expect(diffB).not.toBeCalled();
+  });
+
+  it('should do deep diffs of Objects by default', () => {
+    expect(
+      diff(
+        {a: [1], b: {k: [3, 4]}, c: {k: [4, 4]}},
+        {a: [2], b: {k: [3, 4]}, c: {k: [4, 5]}},
+        {a: true, b: true, c: true},
+      ),
+    ).toEqual({a: [2], c: {k: [4, 5]}});
+  });
+
+  it('should work with undefined styles', () => {
+    expect(
+      diff(
+        {style: {a: '#ffffff', b: 1}},
+        {style: undefined},
+        {style: {b: true}},
+      ),
+    ).toEqual({b: null});
+    expect(
+      diff(
+        {style: undefined},
+        {style: {a: '#ffffff', b: 1}},
+        {style: {b: true}},
+      ),
+    ).toEqual({b: 1});
+    expect(
+      diff({style: undefined}, {style: undefined}, {style: {b: true}}),
+    ).toEqual(null);
+  });
+
+  it('should work with empty styles', () => {
+    expect(diff({a: 1, c: 3}, {}, {a: true, b: true})).toEqual({a: null});
+    expect(diff({}, {a: 1, c: 3}, {a: true, b: true})).toEqual({a: 1});
+    expect(diff({}, {}, {a: true, b: true})).toEqual(null);
+  });
+
+  it('should flatten nested styles and predefined styles', () => {
+    const validStyleAttribute = {someStyle: {foo: true, bar: true}};
+
+    expect(
+      diff({}, {someStyle: [{foo: 1}, {bar: 2}]}, validStyleAttribute),
+    ).toEqual({foo: 1, bar: 2});
+
+    expect(
+      diff({someStyle: [{foo: 1}, {bar: 2}]}, {}, validStyleAttribute),
+    ).toEqual({foo: null, bar: null});
+
+    const barStyle = {
+      bar: 3,
+    };
+
+    expect(
+      diff(
+        {},
+        {someStyle: [[{foo: 1}, {foo: 2}], barStyle]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: 2, bar: 3});
+  });
+
+  it('should reset a value to a previous if it is removed', () => {
+    const validStyleAttribute = {someStyle: {foo: true, bar: true}};
+
+    expect(
+      diff(
+        {someStyle: [{foo: 1}, {foo: 3}]},
+        {someStyle: [{foo: 1}, {bar: 2}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: 1, bar: 2});
+  });
+
+  it('should not clear removed props if they are still in another slot', () => {
+    const validStyleAttribute = {someStyle: {foo: true, bar: true}};
+
+    expect(
+      diff(
+        {someStyle: [{}, {foo: 3, bar: 2}]},
+        {someStyle: [{foo: 3}, {bar: 2}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: 3}); // this should ideally be null. heuristic tradeoff.
+
+    expect(
+      diff(
+        {someStyle: [{}, {foo: 3, bar: 2}]},
+        {someStyle: [{foo: 1, bar: 1}, {bar: 2}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({bar: 2, foo: 1});
+  });
+
+  it('should clear a prop if a later style is explicit null/undefined', () => {
+    const validStyleAttribute = {someStyle: {foo: true, bar: true}};
+    expect(
+      diff(
+        {someStyle: [{}, {foo: 3, bar: 2}]},
+        {someStyle: [{foo: 1}, {bar: 2, foo: null}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: null});
+
+    expect(
+      diff(
+        {someStyle: [{foo: 3}, {foo: null, bar: 2}]},
+        {someStyle: [{foo: null}, {bar: 2}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: null});
+
+    expect(
+      diff(
+        {someStyle: [{foo: 1}, {foo: null}]},
+        {someStyle: [{foo: 2}, {foo: null}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: null}); // this should ideally be null. heuristic.
+
+    // Test the same case with object equality because an early bailout doesn't
+    // work in this case.
+    const fooObj = {foo: 3};
+    expect(
+      diff(
+        {someStyle: [{foo: 1}, fooObj]},
+        {someStyle: [{foo: 2}, fooObj]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: 3}); // this should ideally be null. heuristic.
+
+    expect(
+      diff(
+        {someStyle: [{foo: 1}, {foo: 3}]},
+        {someStyle: [{foo: 2}, {foo: undefined}]},
+        validStyleAttribute,
+      ),
+    ).toEqual({foo: null}); // this should ideally be null. heuristic.
+  });
+
+  it('handles attributes defined multiple times', () => {
+    const validAttributes = {foo: true, style: {foo: true}};
+    expect(diff({}, {foo: 4, style: {foo: 2}}, validAttributes)).toEqual({
+      foo: 2,
+    });
+    expect(diff({foo: 4}, {style: {foo: 2}}, validAttributes)).toEqual({
+      foo: 2,
+    });
+    expect(diff({style: {foo: 2}}, {foo: 4}, validAttributes)).toEqual({
+      foo: 4,
+    });
+  });
+
+  // Function properties are just markers to native that events should be sent.
+  it('should convert functions to booleans', () => {
+    // Note that if the property changes from one function to another, we don't
+    // need to send an update.
+    expect(
+      diff(
+        {
+          a: function () {
+            return 1;
+          },
+          b: function () {
+            return 2;
+          },
+          c: 3,
+        },
+        {
+          b: function () {
+            return 9;
+          },
+          c: function () {
+            return 3;
+          },
+        },
+        {a: true, b: true, c: true},
+      ),
+    ).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
new file mode 100644
index 00000000000..8eb6421d492
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 createReactNativeComponentClass;
+
+describe('ReactNativeError', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    createReactNativeComponentClass =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+        .ReactNativeViewConfigRegistry.register;
+  });
+
+  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`)',
+    );
+  });
+});
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js
new file mode 100644
index 00000000000..f4ab24d71d4
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js
@@ -0,0 +1,554 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let RCTEventEmitter;
+let React;
+let act;
+let ReactNative;
+let ResponderEventPlugin;
+let UIManager;
+let createReactNativeComponentClass;
+let assertConsoleErrorDev;
+
+// Parallels requireNativeComponent() in that it lazily constructs a view config,
+// And registers view manager event types with ReactNativeViewConfigRegistry.
+const fakeRequireNativeComponent = (uiViewClassName, validAttributes) => {
+  const getViewConfig = () => {
+    const viewConfig = {
+      uiViewClassName,
+      validAttributes,
+      bubblingEventTypes: {
+        topTouchCancel: {
+          phasedRegistrationNames: {
+            bubbled: 'onTouchCancel',
+            captured: 'onTouchCancelCapture',
+          },
+        },
+        topTouchEnd: {
+          phasedRegistrationNames: {
+            bubbled: 'onTouchEnd',
+            captured: 'onTouchEndCapture',
+          },
+        },
+        topTouchMove: {
+          phasedRegistrationNames: {
+            bubbled: 'onTouchMove',
+            captured: 'onTouchMoveCapture',
+          },
+        },
+        topTouchStart: {
+          phasedRegistrationNames: {
+            bubbled: 'onTouchStart',
+            captured: 'onTouchStartCapture',
+          },
+        },
+      },
+      directEventTypes: {},
+    };
+
+    return viewConfig;
+  };
+
+  return createReactNativeComponentClass(uiViewClassName, getViewConfig);
+};
+
+beforeEach(() => {
+  jest.resetModules();
+
+  PropTypes = require('prop-types');
+  RCTEventEmitter =
+    require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').RCTEventEmitter;
+  React = require('react');
+  act = require('internal-test-utils').act;
+  assertConsoleErrorDev = require('internal-test-utils').assertConsoleErrorDev;
+  ReactNative = require('react-native-renderer');
+  ResponderEventPlugin =
+    require('react-native-renderer/src/legacy-events/ResponderEventPlugin').default;
+  UIManager =
+    require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').UIManager;
+  createReactNativeComponentClass =
+    require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+      .ReactNativeViewConfigRegistry.register;
+});
+
+// @gate !disableLegacyMode
+test('fails to register the same event name with different types', async () => {
+  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 development.
+    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.
+  await expect(
+    async () => await act(() => ReactNative.render(<InvalidEvents />, 1)),
+  ).rejects.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.
+  await expect(
+    async () => await act(() => ReactNative.render(<InvalidEvents />, 1)),
+  ).rejects.toThrow('Event cannot be both direct and bubbling: topChange');
+});
+
+// @gate !disableLegacyMode
+test('fails if unknown/unsupported event types are dispatched', () => {
+  expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
+  const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
+  const View = fakeRequireNativeComponent('View', {});
+
+  ReactNative.render(<View onUnspecifiedEvent={() => {}} />, 1);
+
+  expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+    "<native root> {}
+      View null"
+  `);
+  expect(UIManager.createView).toHaveBeenCalledTimes(1);
+
+  const target = UIManager.createView.mock.calls[0][0];
+
+  expect(() => {
+    EventEmitter.receiveTouches(
+      'unspecifiedEvent',
+      [{target, identifier: 17}],
+      [0],
+    );
+  }).toThrow('Unsupported top level event type "unspecifiedEvent" dispatched');
+});
+
+// @gate !disableLegacyMode
+test('handles events', () => {
+  expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
+  const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
+  const View = fakeRequireNativeComponent('View', {foo: true});
+
+  const log = [];
+  ReactNative.render(
+    <View
+      foo="outer"
+      onTouchEnd={() => log.push('outer touchend')}
+      onTouchEndCapture={() => log.push('outer touchend capture')}
+      onTouchStart={() => log.push('outer touchstart')}
+      onTouchStartCapture={() => log.push('outer touchstart capture')}>
+      <View
+        foo="inner"
+        onTouchEndCapture={() => log.push('inner touchend capture')}
+        onTouchEnd={() => log.push('inner touchend')}
+        onTouchStartCapture={() => log.push('inner touchstart capture')}
+        onTouchStart={() => log.push('inner touchstart')}
+      />
+    </View>,
+    1,
+  );
+
+  expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+    "<native root> {}
+      View {"foo":"outer"}
+        View {"foo":"inner"}"
+  `);
+  expect(UIManager.createView).toHaveBeenCalledTimes(2);
+
+  // Don't depend on the order of createView() calls.
+  // Stack creates views outside-in; fiber creates them inside-out.
+  const innerTag = UIManager.createView.mock.calls.find(
+    args => args[3].foo === 'inner',
+  )[0];
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: innerTag, identifier: 17}],
+    [0],
+  );
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: innerTag, identifier: 17}],
+    [0],
+  );
+
+  expect(log).toEqual([
+    'outer touchstart capture',
+    'inner touchstart capture',
+    'inner touchstart',
+    'outer touchstart',
+    'outer touchend capture',
+    'inner touchend capture',
+    'inner touchend',
+    'outer touchend',
+  ]);
+});
+
+// @gate !disableLegacyContext || !__DEV__
+// @gate !disableLegacyMode
+test('handles events on text nodes', () => {
+  expect(RCTEventEmitter.register).toHaveBeenCalledTimes(1);
+  const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];
+  const Text = fakeRequireNativeComponent('RCTText', {});
+
+  class ContextHack extends React.Component {
+    static childContextTypes = {isInAParentText: PropTypes.bool};
+    getChildContext() {
+      return {isInAParentText: true};
+    }
+    render() {
+      return this.props.children;
+    }
+  }
+
+  const log = [];
+  ReactNative.render(
+    <ContextHack>
+      <Text>
+        <Text
+          onTouchEnd={() => log.push('string touchend')}
+          onTouchEndCapture={() => log.push('string touchend capture')}
+          onTouchStart={() => log.push('string touchstart')}
+          onTouchStartCapture={() => log.push('string touchstart capture')}>
+          Text Content
+        </Text>
+        <Text
+          onTouchEnd={() => log.push('number touchend')}
+          onTouchEndCapture={() => log.push('number touchend capture')}
+          onTouchStart={() => log.push('number touchstart')}
+          onTouchStartCapture={() => log.push('number touchstart capture')}>
+          {123}
+        </Text>
+      </Text>
+    </ContextHack>,
+    1,
+  );
+  assertConsoleErrorDev([
+    'ContextHack uses the legacy childContextTypes API which will soon be removed. ' +
+      'Use React.createContext() instead. ' +
+      '(https://react.dev/link/legacy-context)' +
+      '\n    in ContextHack (at **)',
+  ]);
+
+  expect(UIManager.createView).toHaveBeenCalledTimes(5);
+
+  // Don't depend on the order of createView() calls.
+  // Stack creates views outside-in; fiber creates them inside-out.
+  const innerTagString = UIManager.createView.mock.calls.find(
+    args => args[3] && args[3].text === 'Text Content',
+  )[0];
+  const innerTagNumber = UIManager.createView.mock.calls.find(
+    args => args[3] && args[3].text === '123',
+  )[0];
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: innerTagString, identifier: 17}],
+    [0],
+  );
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: innerTagString, identifier: 17}],
+    [0],
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: innerTagNumber, identifier: 18}],
+    [0],
+  );
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: innerTagNumber, identifier: 18}],
+    [0],
+  );
+
+  expect(log).toEqual([
+    'string touchstart capture',
+    'string touchstart',
+    'string touchend capture',
+    'string touchend',
+    'number touchstart capture',
+    'number touchstart',
+    'number touchend capture',
+    'number touchend',
+  ]);
+});
+
+// @gate !disableLegacyMode
+test('handles when a responder is unmounted while a touch sequence is in progress', () => {
+  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];
+  }
+
+  function getResponderId() {
+    const responder = ResponderEventPlugin._getResponder();
+    if (responder === null) {
+      return null;
+    }
+    const props = responder.memoizedProps;
+    return props ? props.id : null;
+  }
+
+  const log = [];
+  ReactNative.render(
+    <View id="parent">
+      <View key={1}>
+        <View
+          id="one"
+          onResponderEnd={() => log.push('one responder end')}
+          onResponderStart={() => log.push('one responder start')}
+          onStartShouldSetResponder={() => true}
+        />
+      </View>
+      <View key={2}>
+        <View
+          id="two"
+          onResponderEnd={() => log.push('two responder end')}
+          onResponderStart={() => log.push('two responder start')}
+          onStartShouldSetResponder={() => true}
+        />
+      </View>
+    </View>,
+    1,
+  );
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  expect(getResponderId()).toBe('one');
+  expect(log).toEqual(['one responder start']);
+  log.splice(0);
+
+  ReactNative.render(
+    <View id="parent">
+      <View key={2}>
+        <View
+          id="two"
+          onResponderEnd={() => log.push('two responder end')}
+          onResponderStart={() => log.push('two responder start')}
+          onStartShouldSetResponder={() => true}
+        />
+      </View>
+    </View>,
+    1,
+  );
+
+  // TODO Verify the onResponderEnd listener has been called (before the unmount)
+  // expect(log).toEqual(['one responder end']);
+  // log.splice(0);
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('two'), identifier: 17}],
+    [0],
+  );
+
+  expect(getResponderId()).toBeNull();
+  expect(log).toEqual([]);
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('two'), identifier: 17}],
+    [0],
+  );
+
+  expect(getResponderId()).toBe('two');
+  expect(log).toEqual(['two responder start']);
+});
+
+// @gate !disableLegacyMode
+test('handles events without target', () => {
+  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];
+  }
+
+  function getResponderId() {
+    const responder = ResponderEventPlugin._getResponder();
+    if (responder === null) {
+      return null;
+    }
+    const props = responder.memoizedProps;
+    return props ? props.id : null;
+  }
+
+  const log = [];
+
+  function render(renderFirstComponent) {
+    ReactNative.render(
+      <View id="parent">
+        <View key={1}>
+          {renderFirstComponent ? (
+            <View
+              id="one"
+              onResponderEnd={() => log.push('one responder end')}
+              onResponderStart={() => log.push('one responder start')}
+              onStartShouldSetResponder={() => true}
+            />
+          ) : null}
+        </View>
+        <View key={2}>
+          <View
+            id="two"
+            onResponderEnd={() => log.push('two responder end')}
+            onResponderStart={() => log.push('two responder start')}
+            onStartShouldSetResponder={() => true}
+          />
+        </View>
+      </View>,
+      1,
+    );
+  }
+
+  render(true);
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  // Unmounting component 'one'.
+  render(false);
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('one'), identifier: 17}],
+    [0],
+  );
+
+  expect(getResponderId()).toBe(null);
+
+  EventEmitter.receiveTouches(
+    'topTouchStart',
+    [{target: getViewById('two'), identifier: 18}],
+    [0],
+  );
+
+  expect(getResponderId()).toBe('two');
+
+  EventEmitter.receiveTouches(
+    'topTouchEnd',
+    [{target: getViewById('two'), identifier: 18}],
+    [0],
+  );
+
+  expect(getResponderId()).toBe(null);
+
+  expect(log).toEqual([
+    'one responder start',
+    'two responder start',
+    'two responder end',
+  ]);
+});
+
+// @gate !disableLegacyMode
+test('dispatches event with target as instance', () => {
+  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
new file mode 100644
index 00000000000..0aa1c3f0ba0
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -0,0 +1,771 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 StrictMode;
+let ReactNative;
+let createReactNativeComponentClass;
+let UIManager;
+let TextInputState;
+let ReactNativePrivateInterface;
+let act;
+let assertConsoleErrorDev;
+
+const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
+  "dispatchCommand was called with a ref that isn't a " +
+  'native component. Use React.forwardRef to get access to the underlying native component';
+
+const SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT =
+  "sendAccessibilityEvent 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(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+    StrictMode = React.StrictMode;
+    ReactNative = require('react-native-renderer');
+    ReactNativePrivateInterface = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
+    UIManager =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').UIManager;
+    createReactNativeComponentClass =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+        .ReactNativeViewConfigRegistry.register;
+    TextInputState =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').TextInputState;
+  });
+
+  // @gate !disableLegacyMode
+  it('should be able to create and render a native component', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    ReactNative.render(<View foo="test" />, 1);
+    expect(UIManager.createView).toBeCalled();
+    expect(UIManager.setChildren).toBeCalled();
+    expect(UIManager.manageChildren).not.toBeCalled();
+    expect(UIManager.updateView).not.toBeCalled();
+  });
+
+  // @gate !disableLegacyMode
+  it('should be able to create and update a native component', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    ReactNative.render(<View foo="foo" />, 11);
+
+    expect(UIManager.createView).toHaveBeenCalledTimes(1);
+    expect(UIManager.setChildren).toHaveBeenCalledTimes(1);
+    expect(UIManager.manageChildren).not.toBeCalled();
+    expect(UIManager.updateView).not.toBeCalled();
+
+    ReactNative.render(<View foo="bar" />, 11);
+
+    expect(UIManager.createView).toHaveBeenCalledTimes(1);
+    expect(UIManager.setChildren).toHaveBeenCalledTimes(1);
+    expect(UIManager.manageChildren).not.toBeCalled();
+    expect(UIManager.updateView).toBeCalledWith(3, 'RCTView', {foo: 'bar'});
+  });
+
+  // @gate !disableLegacyMode
+  it('should not call UIManager.updateView after render for properties that have not changed', () => {
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTText',
+    }));
+
+    ReactNative.render(<Text foo="a">1</Text>, 11);
+    expect(UIManager.updateView).not.toBeCalled();
+
+    // If no properties have changed, we shouldn't call updateView.
+    ReactNative.render(<Text foo="a">1</Text>, 11);
+    expect(UIManager.updateView).not.toBeCalled();
+
+    // Only call updateView for the changed property (and not for text).
+    ReactNative.render(<Text foo="b">1</Text>, 11);
+    expect(UIManager.updateView).toHaveBeenCalledTimes(1);
+
+    // Only call updateView for the changed text (and no other properties).
+    ReactNative.render(<Text foo="b">2</Text>, 11);
+    expect(UIManager.updateView).toHaveBeenCalledTimes(2);
+
+    // Call updateView for both changed text and properties.
+    ReactNative.render(<Text foo="c">3</Text>, 11);
+    expect(UIManager.updateView).toHaveBeenCalledTimes(4);
+  });
+
+  // @gate !disableLegacyMode
+  it('should call dispatchCommand for native refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    UIManager.dispatchViewManagerCommand.mockClear();
+
+    let viewRef;
+    ReactNative.render(
+      <View
+        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],
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn and no-op if calling dispatchCommand on non native refs', () => {
+    class BasicClass extends React.Component {
+      render() {
+        return <React.Fragment />;
+      }
+    }
+
+    UIManager.dispatchViewManagerCommand.mockReset();
+
+    let viewRef;
+    ReactNative.render(
+      <BasicClass
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+    ReactNative.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
+    assertConsoleErrorDev([DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT], {
+      withoutStack: true,
+    });
+
+    expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
+  });
+
+  // @gate !disableLegacyMode
+  it('should call sendAccessibilityEvent for native refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    ReactNativePrivateInterface.legacySendAccessibilityEvent.mockClear();
+
+    let viewRef;
+    ReactNative.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(
+      ReactNativePrivateInterface.legacySendAccessibilityEvent,
+    ).not.toBeCalled();
+    ReactNative.sendAccessibilityEvent(viewRef, 'focus');
+    expect(
+      ReactNativePrivateInterface.legacySendAccessibilityEvent,
+    ).toHaveBeenCalledTimes(1);
+    expect(
+      ReactNativePrivateInterface.legacySendAccessibilityEvent,
+    ).toHaveBeenCalledWith(expect.any(Number), 'focus');
+  });
+
+  // @gate !disableLegacyMode
+  it('should warn and no-op if calling sendAccessibilityEvent on non native refs', () => {
+    class BasicClass extends React.Component {
+      render() {
+        return <React.Fragment />;
+      }
+    }
+
+    UIManager.sendAccessibilityEvent.mockReset();
+
+    let viewRef;
+    ReactNative.render(
+      <BasicClass
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(UIManager.sendAccessibilityEvent).not.toBeCalled();
+    ReactNative.sendAccessibilityEvent(viewRef, 'updateCommand', [10, 20]);
+    assertConsoleErrorDev([SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT], {
+      withoutStack: true,
+    });
+
+    expect(UIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
+
+  // @gate !disableLegacyMode
+  it('should not call UIManager.updateView from ref.setNativeProps for properties that have not changed', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    UIManager.updateView.mockReset();
+
+    let viewRef;
+    ReactNative.render(
+      <View
+        foo="bar"
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(UIManager.updateView).not.toBeCalled();
+
+    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'},
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should call UIManager.measure on ref.measure', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    UIManager.measure.mockClear();
+
+    let viewRef;
+    ReactNative.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(UIManager.measure).not.toBeCalled();
+    const successCallback = jest.fn();
+    viewRef.measure(successCallback);
+    expect(UIManager.measure).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100, 0, 0);
+  });
+
+  // @gate !disableLegacyMode
+  it('should call UIManager.measureInWindow on ref.measureInWindow', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    UIManager.measureInWindow.mockClear();
+
+    let viewRef;
+    ReactNative.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(UIManager.measureInWindow).not.toBeCalled();
+    const successCallback = jest.fn();
+    viewRef.measureInWindow(successCallback);
+    expect(UIManager.measureInWindow).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100);
+  });
+
+  // @gate !disableLegacyMode
+  it('should support reactTag in ref.measureLayout', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    UIManager.measureLayout.mockClear();
+
+    let viewRef;
+    let otherRef;
+    ReactNative.render(
+      <View>
+        <View
+          foo="bar"
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />
+        <View
+          ref={ref => {
+            otherRef = ref;
+          }}
+        />
+      </View>,
+      11,
+    );
+
+    expect(UIManager.measureLayout).not.toBeCalled();
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    viewRef.measureLayout(
+      ReactNative.findNodeHandle(otherRef),
+      successCallback,
+      failureCallback,
+    );
+    expect(UIManager.measureLayout).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);
+  });
+
+  // @gate !disableLegacyMode
+  it('should support ref in ref.measureLayout of host components', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    UIManager.measureLayout.mockClear();
+
+    let viewRef;
+    let otherRef;
+    ReactNative.render(
+      <View>
+        <View
+          foo="bar"
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />
+        <View
+          ref={ref => {
+            otherRef = ref;
+          }}
+        />
+      </View>,
+      11,
+    );
+
+    expect(UIManager.measureLayout).not.toBeCalled();
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    viewRef.measureLayout(otherRef, successCallback, failureCallback);
+    expect(UIManager.measureLayout).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledTimes(1);
+    expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);
+  });
+
+  // @gate !disableLegacyMode
+  it('returns the correct instance and calls it in the callback', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let a;
+    let b;
+    const c = ReactNative.render(
+      <View foo="foo" ref={v => (a = v)} />,
+      11,
+      function () {
+        b = this;
+      },
+    );
+
+    expect(a).toBeTruthy();
+    expect(a).toBe(b);
+    expect(a).toBe(c);
+  });
+
+  // @gate !disableLegacyMode
+  it('renders and reorders children', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {title: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    class Component extends React.Component {
+      render() {
+        const chars = this.props.chars.split('');
+        return (
+          <View>
+            {chars.map(text => (
+              <View key={text} title={text} />
+            ))}
+          </View>
+        );
+      }
+    }
+
+    // Mini multi-child stress test: lots of reorders, some adds, some removes.
+    const before = 'abcdefghijklmnopqrst';
+    const after = 'mxhpgwfralkeoivcstzy';
+
+    ReactNative.render(<Component chars={before} />, 11);
+    expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+      "<native root> {}
+        RCTView null
+          RCTView {"title":"a"}
+          RCTView {"title":"b"}
+          RCTView {"title":"c"}
+          RCTView {"title":"d"}
+          RCTView {"title":"e"}
+          RCTView {"title":"f"}
+          RCTView {"title":"g"}
+          RCTView {"title":"h"}
+          RCTView {"title":"i"}
+          RCTView {"title":"j"}
+          RCTView {"title":"k"}
+          RCTView {"title":"l"}
+          RCTView {"title":"m"}
+          RCTView {"title":"n"}
+          RCTView {"title":"o"}
+          RCTView {"title":"p"}
+          RCTView {"title":"q"}
+          RCTView {"title":"r"}
+          RCTView {"title":"s"}
+          RCTView {"title":"t"}"
+    `);
+
+    ReactNative.render(<Component chars={after} />, 11);
+    expect(UIManager.__dumpHierarchyForJestTestsOnly()).toMatchInlineSnapshot(`
+      "<native root> {}
+        RCTView null
+          RCTView {"title":"m"}
+          RCTView {"title":"x"}
+          RCTView {"title":"h"}
+          RCTView {"title":"p"}
+          RCTView {"title":"g"}
+          RCTView {"title":"w"}
+          RCTView {"title":"f"}
+          RCTView {"title":"r"}
+          RCTView {"title":"a"}
+          RCTView {"title":"l"}
+          RCTView {"title":"k"}
+          RCTView {"title":"e"}
+          RCTView {"title":"o"}
+          RCTView {"title":"i"}
+          RCTView {"title":"v"}
+          RCTView {"title":"c"}
+          RCTView {"title":"s"}
+          RCTView {"title":"t"}
+          RCTView {"title":"z"}
+          RCTView {"title":"y"}"
+    `);
+  });
+
+  // @gate !disableLegacyMode
+  it('calls setState with no arguments', () => {
+    let mockArgs;
+    class Component extends React.Component {
+      componentDidMount() {
+        this.setState({}, (...args) => (mockArgs = args));
+      }
+      render() {
+        return false;
+      }
+    }
+
+    ReactNative.render(<Component />, 11);
+    expect(mockArgs.length).toEqual(0);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not throw when <View> is used inside of a <Text> ancestor', () => {
+    const Image = createReactNativeComponentClass('RCTImage', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTImage',
+    }));
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTView',
+    }));
+
+    ReactNative.render(
+      <Text>
+        <View />
+      </Text>,
+      11,
+    );
+
+    // Non-View things (e.g. Image) are fine
+    ReactNative.render(
+      <Text>
+        <Image />
+      </Text>,
+      11,
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should throw for text not inside of a <Text> ancestor', async () => {
+    const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTScrollView',
+    }));
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTView',
+    }));
+
+    await expect(async () => {
+      await act(() => ReactNative.render(<View>this should warn</View>, 11));
+    }).rejects.toThrow(
+      'Text strings must be rendered within a <Text> component.',
+    );
+
+    await expect(async () => {
+      await act(() =>
+        ReactNative.render(
+          <Text>
+            <ScrollView>hi hello hi</ScrollView>
+          </Text>,
+          11,
+        ),
+      );
+    }).rejects.toThrow(
+      'Text strings must be rendered within a <Text> component.',
+    );
+  });
+
+  // @gate !disableLegacyMode
+  it('should not throw for text inside of an indirect <Text> ancestor', () => {
+    const Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+
+    const Indirection = () => 'Hi';
+
+    ReactNative.render(
+      <Text>
+        <Indirection />
+      </Text>,
+      11,
+    );
+  });
+
+  // @gate !disableLegacyMode
+  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);
+
+    const match = ReactNative.findHostInstance_DEPRECATED(parent);
+    assertConsoleErrorDev([
+      '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://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  // @gate !disableLegacyMode
+  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,
+    );
+
+    const match = ReactNative.findHostInstance_DEPRECATED(parent);
+    assertConsoleErrorDev([
+      '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://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in IsInStrictMode (at **)',
+    ]);
+    expect(match).toBe(child);
+  });
+
+  // @gate !disableLegacyMode
+  it('findNodeHandle 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);
+
+    const match = ReactNative.findNodeHandle(parent);
+    assertConsoleErrorDev([
+      '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. ' +
+        'Learn more about using refs safely here: ' +
+        'https://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in ContainsStrictModeChild (at **)',
+    ]);
+    expect(match).toBe(child._nativeTag);
+  });
+
+  // @gate !disableLegacyMode
+  it('findNodeHandle 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,
+    );
+
+    const match = ReactNative.findNodeHandle(parent);
+    assertConsoleErrorDev([
+      '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. ' +
+        'Learn more about using refs safely here: ' +
+        'https://react.dev/link/strict-mode-find-node' +
+        '\n    in RCTView (at **)' +
+        '\n    in IsInStrictMode (at **)',
+    ]);
+    expect(match).toBe(child._nativeTag);
+  });
+
+  // @gate !disableLegacyMode
+  it('blur on host component calls TextInputState', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const viewRef = React.createRef();
+    ReactNative.render(<View ref={viewRef} />, 11);
+
+    expect(TextInputState.blurTextInput).not.toBeCalled();
+
+    viewRef.current.blur();
+
+    expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
+    expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
+  });
+
+  // @gate !disableLegacyMode
+  it('focus on host component calls TextInputState', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    const viewRef = React.createRef();
+    ReactNative.render(<View ref={viewRef} />, 11);
+
+    expect(TextInputState.focusTextInput).not.toBeCalled();
+
+    viewRef.current.focus();
+
+    expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
+    expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
+  });
+});
diff --git a/packages/react-native-renderer/src/__tests__/ResponderEventPlugin-test.internal.js b/packages/react-native-renderer/src/__tests__/ResponderEventPlugin-test.internal.js
new file mode 100644
index 00000000000..03882b24744
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ResponderEventPlugin-test.internal.js
@@ -0,0 +1,1494 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// This test is a hot mess. It heavily uses internals and relies on DOM even
+// though the responder plugin is only used in React Native. Sadness ensues.
+// The coverage is valuable though, so we will keep it for now.
+const {HostComponent} = require('react-reconciler/src/ReactWorkTags');
+
+let EventBatching;
+let EventPluginUtils;
+let ResponderEventPlugin;
+
+const touch = function (nodeHandle, i) {
+  return {target: nodeHandle, identifier: i};
+};
+
+function injectComponentTree(ComponentTree) {
+  EventPluginUtils.setComponentTree(
+    ComponentTree.getFiberCurrentPropsFromNode,
+    ComponentTree.getInstanceFromNode,
+    ComponentTree.getNodeFromInstance,
+  );
+}
+
+/**
+ * @param {NodeHandle} nodeHandle @see NodeHandle. Handle of target.
+ * @param {Array<Touch>} touches All active touches.
+ * @param {Array<Touch>} changedTouches Only the touches that have changed.
+ * @return {TouchEvent} Model of a touch event that is compliant with responder
+ * system plugin.
+ */
+const touchEvent = function (nodeHandle, touches, changedTouches) {
+  return {
+    target: nodeHandle,
+    changedTouches: changedTouches,
+    touches: touches,
+  };
+};
+
+const subsequence = function (arr, indices) {
+  const ret = [];
+  for (let i = 0; i < indices.length; i++) {
+    const index = indices[i];
+    ret.push(arr[index]);
+  }
+  return ret;
+};
+
+const antiSubsequence = function (arr, indices) {
+  const ret = [];
+  for (let i = 0; i < arr.length; i++) {
+    if (indices.indexOf(i) === -1) {
+      ret.push(arr[i]);
+    }
+  }
+  return ret;
+};
+
+/**
+ * Helper for creating touch test config data.
+ * @param allTouchHandles
+ */
+const _touchConfig = function (
+  topType,
+  targetNodeHandle,
+  allTouchHandles,
+  changedIndices,
+  eventTarget,
+) {
+  const allTouchObjects = allTouchHandles.map(touch);
+  const changedTouchObjects = subsequence(allTouchObjects, changedIndices);
+  const activeTouchObjects =
+    topType === 'topTouchStart'
+      ? allTouchObjects
+      : topType === 'topTouchMove'
+        ? allTouchObjects
+        : topType === 'topTouchEnd'
+          ? antiSubsequence(allTouchObjects, changedIndices)
+          : topType === 'topTouchCancel'
+            ? antiSubsequence(allTouchObjects, changedIndices)
+            : null;
+
+  return {
+    nativeEvent: touchEvent(
+      targetNodeHandle,
+      activeTouchObjects,
+      changedTouchObjects,
+    ),
+    topLevelType: topType,
+    targetInst: getInstanceFromNode(targetNodeHandle),
+  };
+};
+
+/**
+ * Creates test data for touch events using environment agnostic "node
+ * handles".
+ *
+ * @param {NodeHandle} nodeHandle Environment agnostic handle to DOM node.
+ * @param {Array<NodeHandle>} allTouchHandles Encoding of all "touches" in the
+ * form of a mapping from integer (touch `identifier`) to touch target. This is
+ * encoded in array form. Because of this, it is possible for two separate
+ * touches (meaning two separate indices) to have the same touch target ID -
+ * this corresponds to real world cases where two separate unique touches have
+ * the same target. These touches don't just represent all active touches,
+ * rather it also includes any touches that are not active, but are in the
+ * process of being removed.
+ * @param {Array<NodeHandle>} changedIndices Indices of `allTouchHandles` that
+ * have changed.
+ * @return {object} Config data used by test cases for extracting responder
+ * events.
+ */
+const startConfig = function (nodeHandle, allTouchHandles, changedIndices) {
+  return _touchConfig(
+    'topTouchStart',
+    nodeHandle,
+    allTouchHandles,
+    changedIndices,
+    nodeHandle,
+  );
+};
+
+/**
+ * @see `startConfig`
+ */
+const moveConfig = function (nodeHandle, allTouchHandles, changedIndices) {
+  return _touchConfig(
+    'topTouchMove',
+    nodeHandle,
+    allTouchHandles,
+    changedIndices,
+    nodeHandle,
+  );
+};
+
+/**
+ * @see `startConfig`
+ */
+const endConfig = function (nodeHandle, allTouchHandles, changedIndices) {
+  return _touchConfig(
+    'topTouchEnd',
+    nodeHandle,
+    allTouchHandles,
+    changedIndices,
+    nodeHandle,
+  );
+};
+
+/**
+ * Test config for events that aren't negotiation related, but rather result of
+ * a negotiation.
+ *
+ * Returns object of the form:
+ *
+ *     {
+ *       responderReject: {
+ *         // Whatever "readableIDToID" was passed in.
+ *         grandParent: {order: NA, assertEvent: null, returnVal: blah},
+ *         ...
+ *         child: {order: NA, assertEvent: null, returnVal: blah},
+ *       }
+ *       responderGrant: {
+ *         grandParent: {order: NA, assertEvent: null, returnVal: blah},
+ *         ...
+ *         child: {order: NA, assertEvent: null, returnVal: blah}
+ *       }
+ *       ...
+ *     }
+ *
+ * After this is created, a test case would configure specific event orderings
+ * and optional assertions. Anything left with an `order` of `NA` will be
+ * required to never be invoked (the test runner will make sure it throws if
+ * ever invoked).
+ *
+ */
+const NA = -1;
+const oneEventLoopTestConfig = function (readableIDToID) {
+  const ret = {
+    // Negotiation
+    scrollShouldSetResponder: {bubbled: {}, captured: {}},
+    startShouldSetResponder: {bubbled: {}, captured: {}},
+    moveShouldSetResponder: {bubbled: {}, captured: {}},
+    responderTerminationRequest: {},
+
+    // Non-negotiation
+    responderReject: {}, // These do not bubble capture.
+    responderGrant: {},
+    responderStart: {},
+    responderMove: {},
+    responderTerminate: {},
+    responderEnd: {},
+    responderRelease: {},
+  };
+  for (const eventName in ret) {
+    for (const readableNodeName in readableIDToID) {
+      if (ret[eventName].bubbled) {
+        // Two phase
+        ret[eventName].bubbled[readableNodeName] = {
+          order: NA,
+          assertEvent: null,
+          returnVal: undefined,
+        };
+        ret[eventName].captured[readableNodeName] = {
+          order: NA,
+          assertEvent: null,
+          returnVal: undefined,
+        };
+      } else {
+        ret[eventName][readableNodeName] = {
+          order: NA,
+          assertEvent: null,
+          returnVal: undefined,
+        };
+      }
+    }
+  }
+  return ret;
+};
+
+/**
+ * @param {object} eventTestConfig
+ * @param {object} readableIDToID
+ */
+const registerTestHandlers = function (eventTestConfig, readableIDToID) {
+  const runs = {dispatchCount: 0};
+  const neverFire = function (readableID, registrationName) {
+    runs.dispatchCount++;
+    expect('').toBe(
+      'Event type: ' +
+        registrationName +
+        '\nShould never occur on:' +
+        readableID +
+        '\nFor event test config:\n' +
+        JSON.stringify(eventTestConfig) +
+        '\n',
+    );
+  };
+
+  const registerOneEventType = function (
+    registrationName,
+    eventTypeTestConfig,
+  ) {
+    for (const readableID in eventTypeTestConfig) {
+      const nodeConfig = eventTypeTestConfig[readableID];
+      const id = readableIDToID[readableID];
+      const handler =
+        nodeConfig.order === NA
+          ? neverFire.bind(null, readableID, registrationName)
+          : // We partially apply readableID and nodeConfig, as they change in the
+            // parent closure across iterations.
+            function (rID, config, e) {
+              expect(
+                rID +
+                  '->' +
+                  registrationName +
+                  ' index:' +
+                  runs.dispatchCount++,
+              ).toBe(rID + '->' + registrationName + ' index:' + config.order);
+              if (config.assertEvent) {
+                config.assertEvent(e);
+              }
+              return config.returnVal;
+            }.bind(null, readableID, nodeConfig);
+      putListener(getInstanceFromNode(id), registrationName, handler);
+    }
+  };
+  for (const eventName in eventTestConfig) {
+    const oneEventTypeTestConfig = eventTestConfig[eventName];
+    const hasTwoPhase = !!oneEventTypeTestConfig.bubbled;
+    if (hasTwoPhase) {
+      registerOneEventType(
+        ResponderEventPlugin.eventTypes[eventName].phasedRegistrationNames
+          .bubbled,
+        oneEventTypeTestConfig.bubbled,
+      );
+      registerOneEventType(
+        ResponderEventPlugin.eventTypes[eventName].phasedRegistrationNames
+          .captured,
+        oneEventTypeTestConfig.captured,
+      );
+    } else {
+      registerOneEventType(
+        ResponderEventPlugin.eventTypes[eventName].registrationName,
+        oneEventTypeTestConfig,
+      );
+    }
+  }
+  return runs;
+};
+
+const run = function (config, hierarchyConfig, nativeEventConfig) {
+  let max = NA;
+  const searchForMax = function (nodeConfig) {
+    for (const readableID in nodeConfig) {
+      const order = nodeConfig[readableID].order;
+      max = order > max ? order : max;
+    }
+  };
+  for (const eventName in config) {
+    const eventConfig = config[eventName];
+    if (eventConfig.bubbled) {
+      searchForMax(eventConfig.bubbled);
+      searchForMax(eventConfig.captured);
+    } else {
+      searchForMax(eventConfig);
+    }
+  }
+
+  // Register the handlers
+  const runData = registerTestHandlers(config, hierarchyConfig);
+
+  // Trigger the event
+  const extractedEvents = ResponderEventPlugin.extractEvents(
+    nativeEventConfig.topLevelType,
+    nativeEventConfig.targetInst,
+    nativeEventConfig.nativeEvent,
+    nativeEventConfig.target,
+    0,
+  );
+
+  // At this point the negotiation events have been dispatched as part of the
+  // extraction process, but not the side effectful events. Below, we dispatch
+  // side effectful events.
+  EventBatching.runEventsInBatch(extractedEvents);
+
+  // Ensure that every event that declared an `order`, was actually dispatched.
+  expect('number of events dispatched:' + runData.dispatchCount).toBe(
+    'number of events dispatched:' + (max + 1),
+  ); // +1 for extra ++
+};
+
+const GRANDPARENT_HOST_NODE = {};
+const PARENT_HOST_NODE = {};
+const CHILD_HOST_NODE = {};
+const CHILD_HOST_NODE2 = {};
+
+// These intentionally look like Fibers. ReactTreeTraversal depends on their field names.
+// TODO: we could test this with regular DOM nodes (and real fibers) instead.
+const GRANDPARENT_INST = {
+  return: null,
+  tag: HostComponent,
+  stateNode: GRANDPARENT_HOST_NODE,
+  memoizedProps: {},
+};
+const PARENT_INST = {
+  return: GRANDPARENT_INST,
+  tag: HostComponent,
+  stateNode: PARENT_HOST_NODE,
+  memoizedProps: {},
+};
+const CHILD_INST = {
+  return: PARENT_INST,
+  tag: HostComponent,
+  stateNode: CHILD_HOST_NODE,
+  memoizedProps: {},
+};
+const CHILD_INST2 = {
+  return: PARENT_INST,
+  tag: HostComponent,
+  stateNode: CHILD_HOST_NODE2,
+  memoizedProps: {},
+};
+
+GRANDPARENT_HOST_NODE.testInstance = GRANDPARENT_INST;
+PARENT_HOST_NODE.testInstance = PARENT_INST;
+CHILD_HOST_NODE.testInstance = CHILD_INST;
+CHILD_HOST_NODE2.testInstance = CHILD_INST2;
+
+const three = {
+  grandParent: GRANDPARENT_HOST_NODE,
+  parent: PARENT_HOST_NODE,
+  child: CHILD_HOST_NODE,
+};
+
+const siblings = {
+  parent: PARENT_HOST_NODE,
+  childOne: CHILD_HOST_NODE,
+  childTwo: CHILD_HOST_NODE2,
+};
+
+function getInstanceFromNode(node) {
+  return node.testInstance;
+}
+
+function getNodeFromInstance(inst) {
+  return inst.stateNode;
+}
+
+function getFiberCurrentPropsFromNode(node) {
+  return node.testInstance.memoizedProps;
+}
+
+function putListener(instance, registrationName, handler) {
+  instance.memoizedProps[registrationName] = handler;
+}
+
+function deleteAllListeners(instance) {
+  instance.memoizedProps = {};
+}
+
+describe('ResponderEventPlugin', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    EventBatching = require('react-native-renderer/src/legacy-events/EventBatching');
+    EventPluginUtils = require('react-native-renderer/src/legacy-events/EventPluginUtils');
+    ResponderEventPlugin =
+      require('react-native-renderer/src/legacy-events/ResponderEventPlugin').default;
+
+    deleteAllListeners(GRANDPARENT_INST);
+    deleteAllListeners(PARENT_INST);
+    deleteAllListeners(CHILD_INST);
+    deleteAllListeners(CHILD_INST2);
+
+    injectComponentTree({
+      getInstanceFromNode,
+      getNodeFromInstance,
+      getFiberCurrentPropsFromNode,
+    });
+  });
+
+  it('should do nothing when no one wants to respond', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: false};
+    config.startShouldSetResponder.bubbled.parent = {
+      order: 4,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.grandParent = {
+      order: 5,
+      returnVal: false,
+    };
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+
+    // Now no handlers should be called on `touchEnd`.
+    config = oneEventLoopTestConfig(three);
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  /**
+   * Simple Start Granting
+   * --------------------
+   */
+
+  it('should grant responder grandParent while capturing', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: true,
+    };
+    config.responderGrant.grandParent = {order: 1};
+    config.responderStart.grandParent = {order: 2};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.grandParent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.grandParent = {order: 0};
+    config.responderRelease.grandParent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder parent while capturing', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: true,
+    };
+    config.responderGrant.parent = {order: 2};
+    config.responderStart.parent = {order: 3};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.parent = {order: 0};
+    config.responderRelease.parent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder child while capturing', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {order: 2, returnVal: true};
+    config.responderGrant.child = {order: 3};
+    config.responderStart.child = {order: 4};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    config.responderRelease.child = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder child while bubbling', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};
+    config.responderGrant.child = {order: 4};
+    config.responderStart.child = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    config.responderRelease.child = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder parent while bubbling', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: false};
+    config.startShouldSetResponder.bubbled.parent = {order: 4, returnVal: true};
+    config.responderGrant.parent = {order: 5};
+    config.responderStart.parent = {order: 6};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.parent = {order: 0};
+    config.responderRelease.parent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder grandParent while bubbling', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: false};
+    config.startShouldSetResponder.bubbled.parent = {
+      order: 4,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.grandParent = {
+      order: 5,
+      returnVal: true,
+    };
+    config.responderGrant.grandParent = {order: 6};
+    config.responderStart.grandParent = {order: 7};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.grandParent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.grandParent = {order: 0};
+    config.responderRelease.grandParent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  /**
+   * Simple Move Granting
+   * --------------------
+   */
+
+  it('should grant responder grandParent while capturing move', () => {
+    let config = oneEventLoopTestConfig(three);
+
+    config.startShouldSetResponder.captured.grandParent = {order: 0};
+    config.startShouldSetResponder.captured.parent = {order: 1};
+    config.startShouldSetResponder.captured.child = {order: 2};
+    config.startShouldSetResponder.bubbled.child = {order: 3};
+    config.startShouldSetResponder.bubbled.parent = {order: 4};
+    config.startShouldSetResponder.bubbled.grandParent = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: true,
+    };
+    config.responderGrant.grandParent = {order: 1};
+    config.responderMove.grandParent = {order: 2};
+    run(config, three, moveConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.grandParent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.grandParent = {order: 0};
+    config.responderRelease.grandParent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder parent while capturing move', () => {
+    let config = oneEventLoopTestConfig(three);
+
+    config.startShouldSetResponder.captured.grandParent = {order: 0};
+    config.startShouldSetResponder.captured.parent = {order: 1};
+    config.startShouldSetResponder.captured.child = {order: 2};
+    config.startShouldSetResponder.bubbled.child = {order: 3};
+    config.startShouldSetResponder.bubbled.parent = {order: 4};
+    config.startShouldSetResponder.bubbled.grandParent = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {order: 1, returnVal: true};
+    config.responderGrant.parent = {order: 2};
+    config.responderMove.parent = {order: 3};
+    run(config, three, moveConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.parent = {order: 0};
+    config.responderRelease.parent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder child while capturing move', () => {
+    let config = oneEventLoopTestConfig(three);
+
+    config.startShouldSetResponder.captured.grandParent = {order: 0};
+    config.startShouldSetResponder.captured.parent = {order: 1};
+    config.startShouldSetResponder.captured.child = {order: 2};
+    config.startShouldSetResponder.bubbled.child = {order: 3};
+    config.startShouldSetResponder.bubbled.parent = {order: 4};
+    config.startShouldSetResponder.bubbled.grandParent = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: true};
+    config.responderGrant.child = {order: 3};
+    config.responderMove.child = {order: 4};
+    run(config, three, moveConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    config.responderRelease.child = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder child while bubbling move', () => {
+    let config = oneEventLoopTestConfig(three);
+
+    config.startShouldSetResponder.captured.grandParent = {order: 0};
+    config.startShouldSetResponder.captured.parent = {order: 1};
+    config.startShouldSetResponder.captured.child = {order: 2};
+    config.startShouldSetResponder.bubbled.child = {order: 3};
+    config.startShouldSetResponder.bubbled.parent = {order: 4};
+    config.startShouldSetResponder.bubbled.grandParent = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: false};
+    config.moveShouldSetResponder.bubbled.child = {order: 3, returnVal: true};
+    config.responderGrant.child = {order: 4};
+    config.responderMove.child = {order: 5};
+    run(config, three, moveConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    config.responderRelease.child = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder parent while bubbling move', () => {
+    let config = oneEventLoopTestConfig(three);
+
+    config.startShouldSetResponder.captured.grandParent = {order: 0};
+    config.startShouldSetResponder.captured.parent = {order: 1};
+    config.startShouldSetResponder.captured.child = {order: 2};
+    config.startShouldSetResponder.bubbled.child = {order: 3};
+    config.startShouldSetResponder.bubbled.parent = {order: 4};
+    config.startShouldSetResponder.bubbled.grandParent = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: false};
+    config.moveShouldSetResponder.bubbled.child = {order: 3, returnVal: false};
+    config.moveShouldSetResponder.bubbled.parent = {order: 4, returnVal: true};
+    config.responderGrant.parent = {order: 5};
+    config.responderMove.parent = {order: 6};
+    run(config, three, moveConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.parent = {order: 0};
+    config.responderRelease.parent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should grant responder grandParent while bubbling move', () => {
+    let config = oneEventLoopTestConfig(three);
+
+    config.startShouldSetResponder.captured.grandParent = {order: 0};
+    config.startShouldSetResponder.captured.parent = {order: 1};
+    config.startShouldSetResponder.captured.child = {order: 2};
+    config.startShouldSetResponder.bubbled.child = {order: 3};
+    config.startShouldSetResponder.bubbled.parent = {order: 4};
+    config.startShouldSetResponder.bubbled.grandParent = {order: 5};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: false};
+    config.moveShouldSetResponder.bubbled.child = {order: 3, returnVal: false};
+    config.moveShouldSetResponder.bubbled.parent = {order: 4, returnVal: false};
+    config.moveShouldSetResponder.bubbled.grandParent = {
+      order: 5,
+      returnVal: true,
+    };
+    config.responderGrant.grandParent = {order: 6};
+    config.responderMove.grandParent = {order: 7};
+    run(config, three, moveConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.grandParent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.grandParent = {order: 0};
+    config.responderRelease.grandParent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  /**
+   * Common ancestor tests
+   * ---------------------
+   */
+
+  it('should bubble negotiation to first common ancestor of responder', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: true,
+    };
+    config.responderGrant.parent = {order: 2};
+    config.responderStart.parent = {order: 3};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    // While `parent` is still responder, we create new handlers that verify
+    // the ordering of propagation, restarting the count at `0`.
+    config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+
+    config.startShouldSetResponder.bubbled.grandParent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.responderStart.parent = {order: 2};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.parent = {order: 0};
+    config.responderRelease.parent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it('should bubble negotiation to first common ancestor of responder then transfer', () => {
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: true,
+    };
+    config.responderGrant.parent = {order: 2};
+    config.responderStart.parent = {order: 3};
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+
+    // Parent is responder, and responder is transferred by a second touch start
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: true,
+    };
+    config.responderGrant.grandParent = {order: 1};
+    config.responderTerminationRequest.parent = {order: 2, returnVal: true};
+    config.responderTerminate.parent = {order: 3};
+    config.responderStart.grandParent = {order: 4};
+    run(
+      config,
+      three,
+      startConfig(three.child, [three.child, three.child], [1]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.grandParent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.grandParent = {order: 0};
+    // one remains\ /one ended \
+    run(config, three, endConfig(three.child, [three.child, three.child], [1]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.grandParent),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.grandParent = {order: 0};
+    config.responderRelease.grandParent = {order: 1};
+    run(config, three, endConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  /**
+   * If nothing is responder, then the negotiation should propagate directly to
+   * the deepest target in the second touch.
+   */
+  it('should negotiate with deepest target on second touch if nothing is responder', () => {
+    // Initially nothing wants to become the responder
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.parent = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.grandParent = {
+      order: 3,
+      returnVal: false,
+    };
+
+    run(config, three, startConfig(three.parent, [three.parent], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+
+    config = oneEventLoopTestConfig(three);
+
+    // Now child wants to become responder. Negotiation should bubble as deep
+    // as the target is because we don't find first common ancestor (with
+    // current responder) because there is no current responder.
+    // (Even if this is the second active touch).
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};
+    config.responderGrant.child = {order: 4};
+    config.responderStart.child = {order: 5};
+    //                                     /  Two active touches  \  /one of them new\
+    run(
+      config,
+      three,
+      startConfig(three.child, [three.parent, three.child], [1]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    // Now we remove the original first touch, keeping the second touch that
+    // started within the current responder (child). Nothing changes because
+    // there's still touches that started inside of the current responder.
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    //                                      / one ended\  /one remains \
+    run(
+      config,
+      three,
+      endConfig(three.child, [three.parent, three.child], [0]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    // Okay, now let's add back that first touch (nothing should change) and
+    // then we'll try peeling back the touches in the opposite order to make
+    // sure that first removing the second touch instantly causes responder to
+    // be released.
+    config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.parent = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.grandParent = {
+      order: 3,
+      returnVal: false,
+    };
+    // Interesting: child still gets moves even though touch target is parent!
+    // Current responder gets a `responderStart` for any touch while responder.
+    config.responderStart.child = {order: 4};
+    //                                           /  Two active touches  \  /one of them new\
+    run(
+      config,
+      three,
+      startConfig(three.parent, [three.child, three.parent], [1]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    // Now, move that new touch that had no effect, and did not start within
+    // the current responder.
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.bubbled.parent = {order: 2, returnVal: false};
+    config.moveShouldSetResponder.bubbled.grandParent = {
+      order: 3,
+      returnVal: false,
+    };
+    // Interesting: child still gets moves even though touch target is parent!
+    // Current responder gets a `responderMove` for any touch while responder.
+    config.responderMove.child = {order: 4};
+    //                                     /  Two active touches  \  /one of them moved\
+    run(
+      config,
+      three,
+      moveConfig(three.parent, [three.child, three.parent], [1]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    config.responderRelease.child = {order: 1};
+    //                                        /child end \ /parent remain\
+    run(
+      config,
+      three,
+      endConfig(three.child, [three.child, three.parent], [0]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  /**
+   * If nothing is responder, then the negotiation should propagate directly to
+   * the deepest target in the second touch.
+   */
+  it('should negotiate until first common ancestor when there are siblings', () => {
+    // Initially nothing wants to become the responder
+    let config = oneEventLoopTestConfig(siblings);
+    config.startShouldSetResponder.captured.parent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.childOne = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.childOne = {
+      order: 2,
+      returnVal: true,
+    };
+    config.responderGrant.childOne = {order: 3};
+    config.responderStart.childOne = {order: 4};
+
+    run(
+      config,
+      siblings,
+      startConfig(siblings.childOne, [siblings.childOne], [0]),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(siblings.childOne),
+    );
+
+    // If the touch target is the sibling item, the negotiation should only
+    // propagate to first common ancestor of current responder and sibling (so
+    // the parent).
+    config = oneEventLoopTestConfig(siblings);
+    config.startShouldSetResponder.captured.parent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.responderStart.childOne = {order: 2};
+
+    const touchConfig = startConfig(
+      siblings.childTwo,
+      [siblings.childOne, siblings.childTwo],
+      [1],
+    );
+    run(config, siblings, touchConfig);
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(siblings.childOne),
+    );
+
+    // move childOne
+    config = oneEventLoopTestConfig(siblings);
+    config.moveShouldSetResponder.captured.parent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};
+    config.responderMove.childOne = {order: 2};
+    run(
+      config,
+      siblings,
+      moveConfig(
+        siblings.childOne,
+        [siblings.childOne, siblings.childTwo],
+        [0],
+      ),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(siblings.childOne),
+    );
+
+    // move childTwo: Only negotiates to `parent`.
+    config = oneEventLoopTestConfig(siblings);
+    config.moveShouldSetResponder.captured.parent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};
+    config.responderMove.childOne = {order: 2};
+    run(
+      config,
+      siblings,
+      moveConfig(
+        siblings.childTwo,
+        [siblings.childOne, siblings.childTwo],
+        [1],
+      ),
+    );
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(siblings.childOne),
+    );
+  });
+
+  it('should notify of being rejected. responderStart/Move happens on current responder', () => {
+    // Initially nothing wants to become the responder
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};
+    config.responderGrant.child = {order: 4};
+    config.responderStart.child = {order: 5};
+
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    // Suppose parent wants to become responder on move, and is rejected
+    config = oneEventLoopTestConfig(three);
+    config.moveShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.moveShouldSetResponder.bubbled.parent = {order: 2, returnVal: true};
+    config.responderGrant.parent = {order: 3};
+    config.responderTerminationRequest.child = {order: 4, returnVal: false};
+    config.responderReject.parent = {order: 5};
+    // The start/move should occur on the original responder if new one is rejected
+    config.responderMove.child = {order: 6};
+
+    let touchConfig = moveConfig(three.child, [three.child], [0]);
+    run(config, three, touchConfig);
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.parent = {order: 2, returnVal: true};
+    config.responderGrant.parent = {order: 3};
+    config.responderTerminationRequest.child = {order: 4, returnVal: false};
+    config.responderReject.parent = {order: 5};
+    // The start/move should occur on the original responder if new one is rejected
+    config.responderStart.child = {order: 6};
+
+    touchConfig = startConfig(three.child, [three.child, three.child], [1]);
+    run(config, three, touchConfig);
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+  });
+
+  it('should negotiate scroll', () => {
+    // Initially nothing wants to become the responder
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};
+    config.responderGrant.child = {order: 4};
+    config.responderStart.child = {order: 5};
+
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    // If the touch target is the sibling item, the negotiation should only
+    // propagate to first common ancestor of current responder and sibling (so
+    // the parent).
+    config = oneEventLoopTestConfig(three);
+    config.scrollShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.scrollShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.scrollShouldSetResponder.bubbled.parent = {
+      order: 2,
+      returnVal: true,
+    };
+    config.responderGrant.parent = {order: 3};
+    config.responderTerminationRequest.child = {order: 4, returnVal: false};
+    config.responderReject.parent = {order: 5};
+
+    run(config, three, {
+      topLevelType: 'topScroll',
+      targetInst: getInstanceFromNode(three.parent),
+      nativeEvent: {},
+    });
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    // Now lets let the scroll take control this time.
+    config = oneEventLoopTestConfig(three);
+    config.scrollShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.scrollShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.scrollShouldSetResponder.bubbled.parent = {
+      order: 2,
+      returnVal: true,
+    };
+    config.responderGrant.parent = {order: 3};
+    config.responderTerminationRequest.child = {order: 4, returnVal: true};
+    config.responderTerminate.child = {order: 5};
+
+    run(config, three, {
+      topLevelType: 'topScroll',
+      targetInst: getInstanceFromNode(three.parent),
+      nativeEvent: {},
+    });
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.parent),
+    );
+  });
+
+  it('should cancel correctly', () => {
+    // Initially our child becomes responder
+    let config = oneEventLoopTestConfig(three);
+    config.startShouldSetResponder.captured.grandParent = {
+      order: 0,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.parent = {
+      order: 1,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.captured.child = {
+      order: 2,
+      returnVal: false,
+    };
+    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};
+    config.responderGrant.child = {order: 4};
+    config.responderStart.child = {order: 5};
+
+    run(config, three, startConfig(three.child, [three.child], [0]));
+    expect(ResponderEventPlugin._getResponder()).toBe(
+      getInstanceFromNode(three.child),
+    );
+
+    config = oneEventLoopTestConfig(three);
+    config.responderEnd.child = {order: 0};
+    config.responderTerminate.child = {order: 1};
+
+    const nativeEvent = _touchConfig(
+      'topTouchCancel',
+      three.child,
+      [three.child],
+      [0],
+    );
+    run(config, three, nativeEvent);
+    expect(ResponderEventPlugin._getResponder()).toBe(null);
+  });
+
+  it(
+    'should determine the first common ancestor correctly',
+    async () => {
+      // This test was moved here from the ReactTreeTraversal test since only the
+      // ResponderEventPlugin uses `getLowestCommonAncestor`
+      const React = require('react');
+      const ReactDOMClient = require('react-dom/client');
+      const act = require('internal-test-utils').act;
+      const getLowestCommonAncestor =
+        require('react-native-renderer/src/legacy-events/ResponderEventPlugin').getLowestCommonAncestor;
+      // This works by accident and will likely break in the future.
+      const ReactDOMComponentTree = require('react-dom-bindings/src/client/ReactDOMComponentTree');
+
+      class ChildComponent extends React.Component {
+        divRef = React.createRef();
+        div1Ref = React.createRef();
+        div2Ref = React.createRef();
+
+        render() {
+          return (
+            <div ref={this.divRef} id={this.props.id + '__DIV'}>
+              <div ref={this.div1Ref} id={this.props.id + '__DIV_1'} />
+              <div ref={this.div2Ref} id={this.props.id + '__DIV_2'} />
+            </div>
+          );
+        }
+      }
+
+      class ParentComponent extends React.Component {
+        pRef = React.createRef();
+        p_P1Ref = React.createRef();
+        p_P1_C1Ref = React.createRef();
+        p_P1_C2Ref = React.createRef();
+        p_OneOffRef = React.createRef();
+
+        render() {
+          return (
+            <div ref={this.pRef} id="P">
+              <div ref={this.p_P1Ref} id="P_P1">
+                <ChildComponent ref={this.p_P1_C1Ref} id="P_P1_C1" />
+                <ChildComponent ref={this.p_P1_C2Ref} id="P_P1_C2" />
+              </div>
+              <div ref={this.p_OneOffRef} id="P_OneOff" />
+            </div>
+          );
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      let parent;
+      await act(() => {
+        root.render(<ParentComponent ref={current => (parent = current)} />);
+      });
+
+      const ancestors = [
+        // Common ancestor with self is self.
+        {
+          one: parent.p_P1_C1Ref.current.div1Ref.current,
+          two: parent.p_P1_C1Ref.current.div1Ref.current,
+          com: parent.p_P1_C1Ref.current.div1Ref.current,
+        },
+        // Common ancestor with self is self - even if topmost DOM.
+        {
+          one: parent.pRef.current,
+          two: parent.pRef.current,
+          com: parent.pRef.current,
+        },
+        // Siblings
+        {
+          one: parent.p_P1_C1Ref.current.div1Ref.current,
+          two: parent.p_P1_C1Ref.current.div2Ref.current,
+          com: parent.p_P1_C1Ref.current.divRef.current,
+        },
+        // Common ancestor with parent is the parent.
+        {
+          one: parent.p_P1_C1Ref.current.div1Ref.current,
+          two: parent.p_P1_C1Ref.current.divRef.current,
+          com: parent.p_P1_C1Ref.current.divRef.current,
+        },
+        // Common ancestor with grandparent is the grandparent.
+        {
+          one: parent.p_P1_C1Ref.current.div1Ref.current,
+          two: parent.p_P1Ref.current,
+          com: parent.p_P1Ref.current,
+        },
+        // Grandparent across subcomponent boundaries.
+        {
+          one: parent.p_P1_C1Ref.current.div1Ref.current,
+          two: parent.p_P1_C2Ref.current.div1Ref.current,
+          com: parent.p_P1Ref.current,
+        },
+        // Something deep with something one-off.
+        {
+          one: parent.p_P1_C1Ref.current.div1Ref.current,
+          two: parent.p_OneOffRef.current,
+          com: parent.pRef.current,
+        },
+      ];
+      let i;
+      for (i = 0; i < ancestors.length; i++) {
+        const plan = ancestors[i];
+        const firstCommon = getLowestCommonAncestor(
+          ReactDOMComponentTree.getInstanceFromNode(plan.one),
+          ReactDOMComponentTree.getInstanceFromNode(plan.two),
+        );
+        expect(firstCommon).toBe(
+          ReactDOMComponentTree.getInstanceFromNode(plan.com),
+        );
+      }
+    },
+    // TODO: this is a long running test, we should speed it up.
+    60 * 1000,
+  );
+});
diff --git a/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js b/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js
new file mode 100644
index 00000000000..82199fd79e6
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 createReactNativeComponentClass;
+let React;
+let ReactNative;
+
+describe('createReactNativeComponentClass', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    createReactNativeComponentClass =
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+        .ReactNativeViewConfigRegistry.register;
+    React = require('react');
+    ReactNative = require('react-native-renderer');
+  });
+
+  // @gate !disableLegacyMode
+  it('should register viewConfigs', () => {
+    const textViewConfig = {
+      validAttributes: {},
+      uiViewClassName: 'Text',
+    };
+    const viewViewConfig = {
+      validAttributes: {},
+      uiViewClassName: 'View',
+    };
+
+    const Text = createReactNativeComponentClass(
+      textViewConfig.uiViewClassName,
+      () => textViewConfig,
+    );
+    const View = createReactNativeComponentClass(
+      viewViewConfig.uiViewClassName,
+      () => viewViewConfig,
+    );
+
+    expect(Text).not.toBe(View);
+
+    ReactNative.render(<Text />, 1);
+    ReactNative.render(<View />, 1);
+  });
+
+  it('should not allow viewConfigs with duplicate uiViewClassNames to be registered', () => {
+    const textViewConfig = {
+      validAttributes: {},
+      uiViewClassName: 'Text',
+    };
+    const altTextViewConfig = {
+      validAttributes: {},
+      uiViewClassName: 'Text', // Same
+    };
+
+    createReactNativeComponentClass(
+      textViewConfig.uiViewClassName,
+      () => textViewConfig,
+    );
+
+    expect(() => {
+      createReactNativeComponentClass(
+        altTextViewConfig.uiViewClassName,
+        () => altTextViewConfig,
+      );
+    }).toThrow('Tried to register two views with the same name Text');
+  });
+});
diff --git a/packages/react-native-renderer/src/legacy-events/EventBatching.js b/packages/react-native-renderer/src/legacy-events/EventBatching.js
new file mode 100644
index 00000000000..4a65042fc2e
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/EventBatching.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactSyntheticEvent} from './ReactSyntheticEventType';
+import accumulateInto from './accumulateInto';
+import forEachAccumulated from './forEachAccumulated';
+import {executeDispatchesInOrder, rethrowCaughtError} from './EventPluginUtils';
+
+/**
+ * Internal queue of events that have accumulated their dispatches and are
+ * waiting to have their dispatches executed.
+ */
+let eventQueue: ?(Array<ReactSyntheticEvent> | ReactSyntheticEvent) = null;
+
+/**
+ * Dispatches an event and releases it back into the pool, unless persistent.
+ *
+ * @param {?object} event Synthetic event to be dispatched.
+ * @private
+ */
+function executeDispatchesAndRelease(event: ReactSyntheticEvent) {
+  if (event) {
+    executeDispatchesInOrder(event);
+
+    if (!event.isPersistent()) {
+      event.constructor.release(event);
+    }
+  }
+}
+// $FlowFixMe[missing-local-annot]
+function executeDispatchesAndReleaseTopLevel(e) {
+  return executeDispatchesAndRelease(e);
+}
+
+export function runEventsInBatch(
+  events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null,
+) {
+  if (events !== null) {
+    eventQueue = accumulateInto(eventQueue, events);
+  }
+
+  // Set `eventQueue` to null before processing it so that we can tell if more
+  // events get enqueued while processing.
+  const processingEventQueue = eventQueue;
+  eventQueue = null;
+
+  if (!processingEventQueue) {
+    return;
+  }
+
+  forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
+
+  if (eventQueue) {
+    throw new Error(
+      'processEventQueue(): Additional events were enqueued while processing ' +
+        'an event queue. Support for this has not yet been implemented.',
+    );
+  }
+
+  // This would be a good time to rethrow if any of the event handlers threw.
+  rethrowCaughtError();
+}
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
new file mode 100644
index 00000000000..48cfd5759b3
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {DispatchConfig} from './ReactSyntheticEventType';
+import type {
+  AnyNativeEvent,
+  PluginName,
+  LegacyPluginModule,
+} from './PluginModuleType';
+import type {TopLevelType} from './TopLevelEventTypes';
+
+type NamesToPlugins = {
+  [key: PluginName]: LegacyPluginModule<AnyNativeEvent>,
+};
+type EventPluginOrder = null | Array<PluginName>;
+
+/**
+ * Injectable ordering of event plugins.
+ */
+let eventPluginOrder: EventPluginOrder = null;
+
+/**
+ * Injectable mapping from names to event plugin modules.
+ */
+const namesToPlugins: NamesToPlugins = {};
+
+/**
+ * Recomputes the plugin list using the injected plugins and plugin ordering.
+ *
+ * @private
+ */
+function recomputePluginOrdering(): void {
+  if (!eventPluginOrder) {
+    // Wait until an `eventPluginOrder` is injected.
+    return;
+  }
+  for (const pluginName in namesToPlugins) {
+    const pluginModule = namesToPlugins[pluginName];
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    const pluginIndex = eventPluginOrder.indexOf(pluginName);
+
+    if (pluginIndex <= -1) {
+      throw new Error(
+        'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
+          `the plugin ordering, \`${pluginName}\`.`,
+      );
+    }
+
+    if (plugins[pluginIndex]) {
+      continue;
+    }
+
+    if (!pluginModule.extractEvents) {
+      throw new Error(
+        'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
+          `method, but \`${pluginName}\` does not.`,
+      );
+    }
+
+    plugins[pluginIndex] = pluginModule;
+    const publishedEvents = pluginModule.eventTypes;
+    for (const eventName in publishedEvents) {
+      if (
+        !publishEventForPlugin(
+          publishedEvents[eventName],
+          pluginModule,
+          eventName,
+        )
+      ) {
+        throw new Error(
+          `EventPluginRegistry: Failed to publish event \`${eventName}\` for plugin \`${pluginName}\`.`,
+        );
+      }
+    }
+  }
+}
+
+/**
+ * Publishes an event so that it can be dispatched by the supplied plugin.
+ *
+ * @param {object} dispatchConfig Dispatch configuration for the event.
+ * @param {object} PluginModule Plugin publishing the event.
+ * @return {boolean} True if the event was successfully published.
+ * @private
+ */
+function publishEventForPlugin(
+  dispatchConfig: DispatchConfig,
+  pluginModule: LegacyPluginModule<AnyNativeEvent>,
+  eventName: string,
+): boolean {
+  if (eventNameDispatchConfigs.hasOwnProperty(eventName)) {
+    throw new Error(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        `event name, \`${eventName}\`.`,
+    );
+  }
+
+  eventNameDispatchConfigs[eventName] = dispatchConfig;
+
+  const phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
+  if (phasedRegistrationNames) {
+    for (const phaseName in phasedRegistrationNames) {
+      if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
+        // $FlowFixMe[invalid-computed-prop]
+        const phasedRegistrationName = phasedRegistrationNames[phaseName];
+        publishRegistrationName(
+          phasedRegistrationName,
+          pluginModule,
+          eventName,
+        );
+      }
+    }
+    return true;
+  } else if (dispatchConfig.registrationName) {
+    publishRegistrationName(
+      dispatchConfig.registrationName,
+      pluginModule,
+      eventName,
+    );
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Publishes a registration name that is used to identify dispatched events.
+ *
+ * @param {string} registrationName Registration name to add.
+ * @param {object} PluginModule Plugin publishing the event.
+ * @private
+ */
+function publishRegistrationName(
+  registrationName: string,
+  pluginModule: LegacyPluginModule<AnyNativeEvent>,
+  eventName: string,
+): void {
+  if (registrationNameModules[registrationName]) {
+    throw new Error(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        `registration name, \`${registrationName}\`.`,
+    );
+  }
+
+  registrationNameModules[registrationName] = pluginModule;
+  registrationNameDependencies[registrationName] =
+    pluginModule.eventTypes[eventName].dependencies;
+
+  if (__DEV__) {
+    const lowerCasedName = registrationName.toLowerCase();
+    possibleRegistrationNames[lowerCasedName] = registrationName;
+
+    if (registrationName === 'onDoubleClick') {
+      possibleRegistrationNames.ondblclick = registrationName;
+    }
+  }
+}
+
+/**
+ * Registers plugins so that they can extract and dispatch events.
+ */
+
+/**
+ * Ordered list of injected plugins.
+ */
+export const plugins: Array<LegacyPluginModule<AnyNativeEvent>> = [];
+
+/**
+ * Mapping from event name to dispatch config
+ */
+export const eventNameDispatchConfigs: {
+  [eventName: string]: DispatchConfig,
+} = {};
+
+/**
+ * Mapping from registration name to plugin module
+ */
+export const registrationNameModules: {
+  [registrationName: string]: LegacyPluginModule<AnyNativeEvent>,
+} = {};
+
+/**
+ * Mapping from registration name to event name
+ */
+export const registrationNameDependencies: {
+  [registrationName: string]: Array<TopLevelType> | void,
+} = {};
+
+/**
+ * Mapping from lowercase registration names to the properly cased version,
+ * used to warn in the case of missing event handlers. Available
+ * only in __DEV__.
+ * @type {Object}
+ */
+export const possibleRegistrationNames: {
+  [lowerCasedName: string]: string,
+} = __DEV__ ? {} : (null: any);
+// Trust the developer to only use possibleRegistrationNames in __DEV__
+
+/**
+ * Injects an ordering of plugins (by plugin name). This allows the ordering
+ * to be decoupled from injection of the actual plugins so that ordering is
+ * always deterministic regardless of packaging, on-the-fly injection, etc.
+ *
+ * @param {array} InjectedEventPluginOrder
+ * @internal
+ */
+export function injectEventPluginOrder(
+  injectedEventPluginOrder: EventPluginOrder,
+): void {
+  if (eventPluginOrder) {
+    throw new Error(
+      'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
+        'once. You are likely trying to load more than one copy of React.',
+    );
+  }
+
+  // Clone the ordering so it cannot be dynamically mutated.
+  // $FlowFixMe[method-unbinding] found when upgrading Flow
+  eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
+  recomputePluginOrdering();
+}
+
+/**
+ * Injects plugins to be used by plugin event system. The plugin names must be
+ * in the ordering injected by `injectEventPluginOrder`.
+ *
+ * Plugins can be injected as part of page initialization or on-the-fly.
+ *
+ * @param {object} injectedNamesToPlugins Map from names to plugin modules.
+ * @internal
+ */
+export function injectEventPluginsByName(
+  injectedNamesToPlugins: NamesToPlugins,
+): void {
+  let isOrderingDirty = false;
+  for (const pluginName in injectedNamesToPlugins) {
+    if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
+      continue;
+    }
+    const pluginModule = injectedNamesToPlugins[pluginName];
+    if (
+      !namesToPlugins.hasOwnProperty(pluginName) ||
+      namesToPlugins[pluginName] !== pluginModule
+    ) {
+      if (namesToPlugins[pluginName]) {
+        throw new Error(
+          'EventPluginRegistry: Cannot inject two different event plugins ' +
+            `using the same name, \`${pluginName}\`.`,
+        );
+      }
+
+      namesToPlugins[pluginName] = pluginModule;
+      isOrderingDirty = true;
+    }
+  }
+  if (isOrderingDirty) {
+    recomputePluginOrdering();
+  }
+}
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
new file mode 100644
index 00000000000..64a05cef33f
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import isArray from 'shared/isArray';
+
+import {runWithFiberInDEV} from 'react-reconciler/src/ReactCurrentFiber';
+
+let hasError = false;
+let caughtError = null;
+
+export let getFiberCurrentPropsFromNode = null;
+export let getInstanceFromNode = null;
+export let getNodeFromInstance = null;
+
+export function setComponentTree(
+  getFiberCurrentPropsFromNodeImpl,
+  getInstanceFromNodeImpl,
+  getNodeFromInstanceImpl,
+) {
+  getFiberCurrentPropsFromNode = getFiberCurrentPropsFromNodeImpl;
+  getInstanceFromNode = getInstanceFromNodeImpl;
+  getNodeFromInstance = getNodeFromInstanceImpl;
+  if (__DEV__) {
+    if (!getNodeFromInstance || !getInstanceFromNode) {
+      console.error(
+        'Injected ' +
+          'module is missing getNodeFromInstance or getInstanceFromNode.',
+      );
+    }
+  }
+}
+
+function validateEventDispatches(event) {
+  if (__DEV__) {
+    const dispatchListeners = event._dispatchListeners;
+    const dispatchInstances = event._dispatchInstances;
+
+    const listenersIsArr = isArray(dispatchListeners);
+    const listenersLen = listenersIsArr
+      ? dispatchListeners.length
+      : dispatchListeners
+        ? 1
+        : 0;
+
+    const instancesIsArr = isArray(dispatchInstances);
+    const instancesLen = instancesIsArr
+      ? dispatchInstances.length
+      : dispatchInstances
+        ? 1
+        : 0;
+
+    if (instancesIsArr !== listenersIsArr || instancesLen !== listenersLen) {
+      console.error('EventPluginUtils: Invalid `event`.');
+    }
+  }
+}
+
+/**
+ * Dispatch the event to the listener.
+ * @param {SyntheticEvent} event SyntheticEvent to handle
+ * @param {function} listener Application-level callback
+ * @param {*} inst Internal component instance
+ */
+export function executeDispatch(event, listener, inst) {
+  event.currentTarget = getNodeFromInstance(inst);
+  try {
+    listener(event);
+  } catch (error) {
+    if (!hasError) {
+      hasError = true;
+      caughtError = error;
+    } else {
+      // TODO: Make sure this error gets logged somehow.
+    }
+  }
+  event.currentTarget = null;
+}
+
+/**
+ * Standard/simple iteration through an event's collected dispatches.
+ */
+export function executeDispatchesInOrder(event) {
+  const dispatchListeners = event._dispatchListeners;
+  const dispatchInstances = event._dispatchInstances;
+  if (__DEV__) {
+    validateEventDispatches(event);
+  }
+  if (isArray(dispatchListeners)) {
+    for (let i = 0; i < dispatchListeners.length; i++) {
+      if (event.isPropagationStopped()) {
+        break;
+      }
+      // Listeners and Instances are two parallel arrays that are always in sync.
+      const listener = dispatchListeners[i];
+      const instance = dispatchInstances[i];
+      if (__DEV__ && instance !== null) {
+        runWithFiberInDEV(instance, executeDispatch, event, listener, instance);
+      } else {
+        executeDispatch(event, listener, instance);
+      }
+    }
+  } else if (dispatchListeners) {
+    const listener = dispatchListeners;
+    const instance = dispatchInstances;
+    if (__DEV__ && instance !== null) {
+      runWithFiberInDEV(instance, executeDispatch, event, listener, instance);
+    } else {
+      executeDispatch(event, listener, instance);
+    }
+  }
+  event._dispatchListeners = null;
+  event._dispatchInstances = null;
+}
+
+/**
+ * Standard/simple iteration through an event's collected dispatches, but stops
+ * at the first dispatch execution returning true, and returns that id.
+ *
+ * @return {?string} id of the first dispatch execution who's listener returns
+ * true, or null if no listener returned true.
+ */
+function executeDispatchesInOrderStopAtTrueImpl(event) {
+  const dispatchListeners = event._dispatchListeners;
+  const dispatchInstances = event._dispatchInstances;
+  if (__DEV__) {
+    validateEventDispatches(event);
+  }
+  if (isArray(dispatchListeners)) {
+    for (let i = 0; i < dispatchListeners.length; i++) {
+      if (event.isPropagationStopped()) {
+        break;
+      }
+      // Listeners and Instances are two parallel arrays that are always in sync.
+      if (dispatchListeners[i](event, dispatchInstances[i])) {
+        return dispatchInstances[i];
+      }
+    }
+  } else if (dispatchListeners) {
+    if (dispatchListeners(event, dispatchInstances)) {
+      return dispatchInstances;
+    }
+  }
+  return null;
+}
+
+/**
+ * @see executeDispatchesInOrderStopAtTrueImpl
+ */
+export function executeDispatchesInOrderStopAtTrue(event) {
+  const ret = executeDispatchesInOrderStopAtTrueImpl(event);
+  event._dispatchInstances = null;
+  event._dispatchListeners = null;
+  return ret;
+}
+
+/**
+ * Execution of a "direct" dispatch - there must be at most one dispatch
+ * accumulated on the event or it is considered an error. It doesn't really make
+ * sense for an event with multiple dispatches (bubbled) to keep track of the
+ * return values at each dispatch execution, but it does tend to make sense when
+ * dealing with "direct" dispatches.
+ *
+ * @return {*} The return value of executing the single dispatch.
+ */
+export function executeDirectDispatch(event) {
+  if (__DEV__) {
+    validateEventDispatches(event);
+  }
+  const dispatchListener = event._dispatchListeners;
+  const dispatchInstance = event._dispatchInstances;
+
+  if (isArray(dispatchListener)) {
+    throw new Error('Invalid `event`.');
+  }
+
+  event.currentTarget = dispatchListener
+    ? getNodeFromInstance(dispatchInstance)
+    : null;
+  const res = dispatchListener ? dispatchListener(event) : null;
+  event.currentTarget = null;
+  event._dispatchListeners = null;
+  event._dispatchInstances = null;
+  return res;
+}
+
+/**
+ * @param {SyntheticEvent} event
+ * @return {boolean} True iff number of dispatches accumulated is greater than 0.
+ */
+export function hasDispatches(event) {
+  return !!event._dispatchListeners;
+}
+
+export function rethrowCaughtError() {
+  if (hasError) {
+    const error = caughtError;
+    hasError = false;
+    caughtError = null;
+    throw error;
+  }
+}
diff --git a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
new file mode 100644
index 00000000000..e46fe52f672
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {
+  DispatchConfig,
+  ReactSyntheticEvent,
+} from './ReactSyntheticEventType';
+import type {TopLevelType} from './TopLevelEventTypes';
+
+export type EventTypes = {[key: string]: DispatchConfig};
+
+export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | TouchEvent;
+
+export type PluginName = string;
+
+export type EventSystemFlags = number;
+
+export type LegacyPluginModule<NativeEvent> = {
+  eventTypes: EventTypes,
+  extractEvents: (
+    topLevelType: TopLevelType,
+    targetInst: null | Fiber,
+    nativeTarget: NativeEvent,
+    nativeEventTarget: null | EventTarget,
+    eventSystemFlags?: number,
+    container?: null | EventTarget,
+  ) => ?ReactSyntheticEvent,
+  tapMoveThreshold?: number,
+};
diff --git a/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js b/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
new file mode 100644
index 00000000000..6dfb943bf36
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// 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, d) {
+  return fn(a, b, c, d);
+};
+
+let isInsideEventHandler = false;
+
+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;
+  }
+}
+
+export function discreteUpdates(fn, a, b, c, d) {
+  const prevIsInsideEventHandler = isInsideEventHandler;
+  isInsideEventHandler = true;
+  try {
+    return discreteUpdatesImpl(fn, a, b, c, d);
+  } finally {
+    isInsideEventHandler = prevIsInsideEventHandler;
+  }
+}
+
+export function setBatchingImplementation(
+  _batchedUpdatesImpl,
+  _discreteUpdatesImpl,
+) {
+  batchedUpdatesImpl = _batchedUpdatesImpl;
+  discreteUpdatesImpl = _discreteUpdatesImpl;
+}
diff --git a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
new file mode 100644
index 00000000000..a499e97607e
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Flow type for SyntheticEvent class that includes private properties
+ * @flow
+ */
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {TopLevelType} from './TopLevelEventTypes';
+
+export type DispatchConfig = {
+  dependencies?: Array<TopLevelType>,
+  phasedRegistrationNames: {
+    bubbled: null | string,
+    captured: null | string,
+    skipBubbling?: ?boolean,
+  },
+  registrationName?: string,
+};
+
+export type CustomDispatchConfig = {
+  phasedRegistrationNames: {
+    bubbled: null,
+    captured: null,
+    skipBubbling?: ?boolean,
+  },
+  registrationName?: string,
+  customEvent: true,
+};
+
+export type ReactSyntheticEvent = {
+  dispatchConfig: DispatchConfig | CustomDispatchConfig,
+  getPooled: (
+    dispatchConfig: DispatchConfig | CustomDispatchConfig,
+    targetInst: Fiber,
+    nativeTarget: Event,
+    nativeEventTarget: EventTarget,
+  ) => ReactSyntheticEvent,
+  isPersistent: () => boolean,
+  isPropagationStopped: () => boolean,
+  _dispatchInstances?: null | Array<Fiber | null> | Fiber,
+  _dispatchListeners?: null | Array<Function> | Function,
+  _targetInst: Fiber,
+  type: string,
+  currentTarget: null | EventTarget,
+};
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
new file mode 100644
index 00000000000..77d21c074ee
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
@@ -0,0 +1,804 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import {
+  executeDirectDispatch,
+  hasDispatches,
+  executeDispatchesInOrderStopAtTrue,
+  getInstanceFromNode,
+  getFiberCurrentPropsFromNode,
+} from './EventPluginUtils';
+import ResponderSyntheticEvent from './ResponderSyntheticEvent';
+import ResponderTouchHistoryStore from './ResponderTouchHistoryStore';
+import accumulate from './accumulate';
+import {
+  TOP_SCROLL,
+  TOP_SELECTION_CHANGE,
+  TOP_TOUCH_CANCEL,
+  isStartish,
+  isMoveish,
+  isEndish,
+  startDependencies,
+  moveDependencies,
+  endDependencies,
+} from './ResponderTopLevelEventTypes';
+import accumulateInto from './accumulateInto';
+import forEachAccumulated from './forEachAccumulated';
+import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
+
+/**
+ * Instance of element that should respond to touch/move types of interactions,
+ * as indicated explicitly by relevant callbacks.
+ */
+let responderInst = null;
+
+/**
+ * Count of current touches. A textInput should become responder iff the
+ * selection changes while there is a touch on the screen.
+ */
+let trackedTouchCount = 0;
+
+function changeResponder(nextResponderInst, blockHostResponder) {
+  const oldResponderInst = responderInst;
+  responderInst = nextResponderInst;
+  if (ResponderEventPlugin.GlobalResponderHandler !== null) {
+    ResponderEventPlugin.GlobalResponderHandler.onChange(
+      oldResponderInst,
+      nextResponderInst,
+      blockHostResponder,
+    );
+  }
+}
+
+const eventTypes = {
+  /**
+   * On a `touchStart`/`mouseDown`, is it desired that this element become the
+   * responder?
+   */
+  startShouldSetResponder: {
+    phasedRegistrationNames: {
+      bubbled: 'onStartShouldSetResponder',
+      captured: 'onStartShouldSetResponderCapture',
+    },
+    dependencies: startDependencies,
+  },
+
+  /**
+   * On a `scroll`, is it desired that this element become the responder? This
+   * is usually not needed, but should be used to retroactively infer that a
+   * `touchStart` had occurred during momentum scroll. During a momentum scroll,
+   * a touch start will be immediately followed by a scroll event if the view is
+   * currently scrolling.
+   *
+   * TODO: This shouldn't bubble.
+   */
+  scrollShouldSetResponder: {
+    phasedRegistrationNames: {
+      bubbled: 'onScrollShouldSetResponder',
+      captured: 'onScrollShouldSetResponderCapture',
+    },
+    dependencies: [TOP_SCROLL],
+  },
+
+  /**
+   * On text selection change, should this element become the responder? This
+   * is needed for text inputs or other views with native selection, so the
+   * JS view can claim the responder.
+   *
+   * TODO: This shouldn't bubble.
+   */
+  selectionChangeShouldSetResponder: {
+    phasedRegistrationNames: {
+      bubbled: 'onSelectionChangeShouldSetResponder',
+      captured: 'onSelectionChangeShouldSetResponderCapture',
+    },
+    dependencies: [TOP_SELECTION_CHANGE],
+  },
+
+  /**
+   * On a `touchMove`/`mouseMove`, is it desired that this element become the
+   * responder?
+   */
+  moveShouldSetResponder: {
+    phasedRegistrationNames: {
+      bubbled: 'onMoveShouldSetResponder',
+      captured: 'onMoveShouldSetResponderCapture',
+    },
+    dependencies: moveDependencies,
+  },
+
+  /**
+   * Direct responder events dispatched directly to responder. Do not bubble.
+   */
+  responderStart: {
+    registrationName: 'onResponderStart',
+    dependencies: startDependencies,
+  },
+  responderMove: {
+    registrationName: 'onResponderMove',
+    dependencies: moveDependencies,
+  },
+  responderEnd: {
+    registrationName: 'onResponderEnd',
+    dependencies: endDependencies,
+  },
+  responderRelease: {
+    registrationName: 'onResponderRelease',
+    dependencies: endDependencies,
+  },
+  responderTerminationRequest: {
+    registrationName: 'onResponderTerminationRequest',
+    dependencies: [],
+  },
+  responderGrant: {
+    registrationName: 'onResponderGrant',
+    dependencies: [],
+  },
+  responderReject: {
+    registrationName: 'onResponderReject',
+    dependencies: [],
+  },
+  responderTerminate: {
+    registrationName: 'onResponderTerminate',
+    dependencies: [],
+  },
+};
+
+// Start of inline: the below functions were inlined from
+// EventPropagator.js, as they deviated from ReactDOM's newer
+// implementations.
+
+function getParent(inst) {
+  do {
+    inst = inst.return;
+    // TODO: If this is a HostRoot we might want to bail out.
+    // That is depending on if we want nested subtrees (layers) to bubble
+    // events to their parent. We could also go through parentNode on the
+    // host node but that wouldn't work for React Native and doesn't let us
+    // do the portal feature.
+  } while (inst && inst.tag !== HostComponent);
+  if (inst) {
+    return inst;
+  }
+  return null;
+}
+
+/**
+ * Return the lowest common ancestor of A and B, or null if they are in
+ * different trees.
+ */
+export function getLowestCommonAncestor(instA, instB) {
+  let depthA = 0;
+  for (let tempA = instA; tempA; tempA = getParent(tempA)) {
+    depthA++;
+  }
+  let depthB = 0;
+  for (let tempB = instB; tempB; tempB = getParent(tempB)) {
+    depthB++;
+  }
+
+  // If A is deeper, crawl up.
+  while (depthA - depthB > 0) {
+    instA = getParent(instA);
+    depthA--;
+  }
+
+  // If B is deeper, crawl up.
+  while (depthB - depthA > 0) {
+    instB = getParent(instB);
+    depthB--;
+  }
+
+  // Walk in lockstep until we find a match.
+  let depth = depthA;
+  while (depth--) {
+    if (instA === instB || instA === instB.alternate) {
+      return instA;
+    }
+    instA = getParent(instA);
+    instB = getParent(instB);
+  }
+  return null;
+}
+
+/**
+ * Return if A is an ancestor of B.
+ */
+function isAncestor(instA, instB) {
+  while (instB) {
+    if (instA === instB || instA === instB.alternate) {
+      return true;
+    }
+    instB = getParent(instB);
+  }
+  return false;
+}
+
+/**
+ * Simulates the traversal of a two-phase, capture/bubble event dispatch.
+ */
+function traverseTwoPhase(inst, fn, arg) {
+  const path = [];
+  while (inst) {
+    path.push(inst);
+    inst = getParent(inst);
+  }
+  let i;
+  for (i = path.length; i-- > 0; ) {
+    fn(path[i], 'captured', arg);
+  }
+  for (i = 0; i < path.length; i++) {
+    fn(path[i], 'bubbled', arg);
+  }
+}
+
+function getListener(inst, registrationName) {
+  const stateNode = inst.stateNode;
+  if (stateNode === null) {
+    // Work in progress (ex: onload events in incremental mode).
+    return null;
+  }
+  const props = getFiberCurrentPropsFromNode(stateNode);
+  if (props === null) {
+    // Work in progress.
+    return null;
+  }
+  const listener = props[registrationName];
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
+  return listener;
+}
+
+function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
+  const registrationName =
+    event.dispatchConfig.phasedRegistrationNames[propagationPhase];
+  return getListener(inst, registrationName);
+}
+
+function accumulateDirectionalDispatches(inst, phase, event) {
+  if (__DEV__) {
+    if (!inst) {
+      console.error('Dispatching inst must not be null');
+    }
+  }
+  const listener = listenerAtPhase(inst, event, phase);
+  if (listener) {
+    event._dispatchListeners = accumulateInto(
+      event._dispatchListeners,
+      listener,
+    );
+    event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+  }
+}
+
+/**
+ * Accumulates without regard to direction, does not look for phased
+ * registration names. Same as `accumulateDirectDispatchesSingle` but without
+ * requiring that the `dispatchMarker` be the same as the dispatched ID.
+ */
+function accumulateDispatches(
+  inst: Object,
+  ignoredDirection: ?boolean,
+  event: Object,
+): void {
+  if (inst && event && event.dispatchConfig.registrationName) {
+    const registrationName = event.dispatchConfig.registrationName;
+    const listener = getListener(inst, registrationName);
+    if (listener) {
+      event._dispatchListeners = accumulateInto(
+        event._dispatchListeners,
+        listener,
+      );
+      event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+    }
+  }
+}
+
+/**
+ * Accumulates dispatches on an `SyntheticEvent`, but only for the
+ * `dispatchMarker`.
+ * @param {SyntheticEvent} event
+ */
+function accumulateDirectDispatchesSingle(event: Object) {
+  if (event && event.dispatchConfig.registrationName) {
+    accumulateDispatches(event._targetInst, null, event);
+  }
+}
+
+function accumulateDirectDispatches(events: ?(Array<Object> | Object)) {
+  forEachAccumulated(events, accumulateDirectDispatchesSingle);
+}
+
+function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {
+  if (event && event.dispatchConfig.phasedRegistrationNames) {
+    const targetInst = event._targetInst;
+    const parentInst = targetInst ? getParent(targetInst) : null;
+    traverseTwoPhase(parentInst, accumulateDirectionalDispatches, event);
+  }
+}
+
+function accumulateTwoPhaseDispatchesSkipTarget(events) {
+  forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget);
+}
+
+function accumulateTwoPhaseDispatchesSingle(event) {
+  if (event && event.dispatchConfig.phasedRegistrationNames) {
+    traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
+  }
+}
+
+function accumulateTwoPhaseDispatches(events) {
+  forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
+}
+// End of inline
+
+/**
+ *
+ * Responder System:
+ * ----------------
+ *
+ * - A global, solitary "interaction lock" on a view.
+ * - If a node becomes the responder, it should convey visual feedback
+ *   immediately to indicate so, either by highlighting or moving accordingly.
+ * - To be the responder means, that touches are exclusively important to that
+ *   responder view, and no other view.
+ * - While touches are still occurring, the responder lock can be transferred to
+ *   a new view, but only to increasingly "higher" views (meaning ancestors of
+ *   the current responder).
+ *
+ * Responder being granted:
+ * ------------------------
+ *
+ * - Touch starts, moves, and scrolls can cause an ID to become the responder.
+ * - We capture/bubble `startShouldSetResponder`/`moveShouldSetResponder` to
+ *   the "appropriate place".
+ * - If nothing is currently the responder, the "appropriate place" is the
+ *   initiating event's `targetID`.
+ * - If something *is* already the responder, the "appropriate place" is the
+ *   first common ancestor of the event target and the current `responderInst`.
+ * - Some negotiation happens: See the timing diagram below.
+ * - Scrolled views automatically become responder. The reasoning is that a
+ *   platform scroll view that isn't built on top of the responder system has
+ *   began scrolling, and the active responder must now be notified that the
+ *   interaction is no longer locked to it - the system has taken over.
+ *
+ * - Responder being released:
+ *   As soon as no more touches that *started* inside of descendants of the
+ *   *current* responderInst, an `onResponderRelease` event is dispatched to the
+ *   current responder, and the responder lock is released.
+ *
+ * TODO:
+ * - on "end", a callback hook for `onResponderEndShouldRemainResponder` that
+ *   determines if the responder lock should remain.
+ * - If a view shouldn't "remain" the responder, any active touches should by
+ *   default be considered "dead" and do not influence future negotiations or
+ *   bubble paths. It should be as if those touches do not exist.
+ * -- For multitouch: Usually a translate-z will choose to "remain" responder
+ *  after one out of many touches ended. For translate-y, usually the view
+ *  doesn't wish to "remain" responder after one of many touches end.
+ * - Consider building this on top of a `stopPropagation` model similar to
+ *   `W3C` events.
+ * - Ensure that `onResponderTerminate` is called on touch cancels, whether or
+ *   not `onResponderTerminationRequest` returns `true` or `false`.
+ *
+ */
+
+/*                                             Negotiation Performed
+                                             +-----------------------+
+                                            /                         \
+Process low level events to    +     Current Responder      +   wantsResponderID
+determine who to perform negot-|   (if any exists at all)   |
+iation/transition              | Otherwise just pass through|
+-------------------------------+----------------------------+------------------+
+Bubble to find first ID        |                            |
+to return true:wantsResponderID|                            |
+                               |                            |
+     +-------------+           |                            |
+     | onTouchStart|           |                            |
+     +------+------+     none  |                            |
+            |            return|                            |
++-----------v-------------+true| +------------------------+ |
+|onStartShouldSetResponder|----->|onResponderStart (cur)  |<-----------+
++-----------+-------------+    | +------------------------+ |          |
+            |                  |                            | +--------+-------+
+            | returned true for|       false:REJECT +-------->|onResponderReject
+            | wantsResponderID |                    |       | +----------------+
+            | (now attempt     | +------------------+-----+ |
+            |  handoff)        | |   onResponder          | |
+            +------------------->|      TerminationRequest| |
+                               | +------------------+-----+ |
+                               |                    |       | +----------------+
+                               |         true:GRANT +-------->|onResponderGrant|
+                               |                            | +--------+-------+
+                               | +------------------------+ |          |
+                               | |   onResponderTerminate |<-----------+
+                               | +------------------+-----+ |
+                               |                    |       | +----------------+
+                               |                    +-------->|onResponderStart|
+                               |                            | +----------------+
+Bubble to find first ID        |                            |
+to return true:wantsResponderID|                            |
+                               |                            |
+     +-------------+           |                            |
+     | onTouchMove |           |                            |
+     +------+------+     none  |                            |
+            |            return|                            |
++-----------v-------------+true| +------------------------+ |
+|onMoveShouldSetResponder |----->|onResponderMove (cur)   |<-----------+
++-----------+-------------+    | +------------------------+ |          |
+            |                  |                            | +--------+-------+
+            | returned true for|       false:REJECT +-------->|onResponderRejec|
+            | wantsResponderID |                    |       | +----------------+
+            | (now attempt     | +------------------+-----+ |
+            |  handoff)        | |   onResponder          | |
+            +------------------->|      TerminationRequest| |
+                               | +------------------+-----+ |
+                               |                    |       | +----------------+
+                               |         true:GRANT +-------->|onResponderGrant|
+                               |                            | +--------+-------+
+                               | +------------------------+ |          |
+                               | |   onResponderTerminate |<-----------+
+                               | +------------------+-----+ |
+                               |                    |       | +----------------+
+                               |                    +-------->|onResponderMove |
+                               |                            | +----------------+
+                               |                            |
+                               |                            |
+      Some active touch started|                            |
+      inside current responder | +------------------------+ |
+      +------------------------->|      onResponderEnd    | |
+      |                        | +------------------------+ |
+  +---+---------+              |                            |
+  | onTouchEnd  |              |                            |
+  +---+---------+              |                            |
+      |                        | +------------------------+ |
+      +------------------------->|     onResponderEnd     | |
+      No active touches started| +-----------+------------+ |
+      inside current responder |             |              |
+                               |             v              |
+                               | +------------------------+ |
+                               | |    onResponderRelease  | |
+                               | +------------------------+ |
+                               |                            |
+                               +                            + */
+
+/**
+ * A note about event ordering in the `EventPluginRegistry`.
+ *
+ * Suppose plugins are injected in the following order:
+ *
+ * `[R, S, C]`
+ *
+ * To help illustrate the example, assume `S` is `SimpleEventPlugin` (for
+ * `onClick` etc) and `R` is `ResponderEventPlugin`.
+ *
+ * "Deferred-Dispatched Events":
+ *
+ * - The current event plugin system will traverse the list of injected plugins,
+ *   in order, and extract events by collecting the plugin's return value of
+ *   `extractEvents()`.
+ * - These events that are returned from `extractEvents` are "deferred
+ *   dispatched events".
+ * - When returned from `extractEvents`, deferred-dispatched events contain an
+ *   "accumulation" of deferred dispatches.
+ * - These deferred dispatches are accumulated/collected before they are
+ *   returned, but processed at a later time by the `EventPluginRegistry` (hence the
+ *   name deferred).
+ *
+ * In the process of returning their deferred-dispatched events, event plugins
+ * themselves can dispatch events on-demand without returning them from
+ * `extractEvents`. Plugins might want to do this, so that they can use event
+ * dispatching as a tool that helps them decide which events should be extracted
+ * in the first place.
+ *
+ * "On-Demand-Dispatched Events":
+ *
+ * - On-demand-dispatched events are not returned from `extractEvents`.
+ * - On-demand-dispatched events are dispatched during the process of returning
+ *   the deferred-dispatched events.
+ * - They should not have side effects.
+ * - They should be avoided, and/or eventually be replaced with another
+ *   abstraction that allows event plugins to perform multiple "rounds" of event
+ *   extraction.
+ *
+ * Therefore, the sequence of event dispatches becomes:
+ *
+ * - `R`s on-demand events (if any)   (dispatched by `R` on-demand)
+ * - `S`s on-demand events (if any)   (dispatched by `S` on-demand)
+ * - `C`s on-demand events (if any)   (dispatched by `C` on-demand)
+ * - `R`s extracted events (if any)   (dispatched by `EventPluginRegistry`)
+ * - `S`s extracted events (if any)   (dispatched by `EventPluginRegistry`)
+ * - `C`s extracted events (if any)   (dispatched by `EventPluginRegistry`)
+ *
+ * In the case of `ResponderEventPlugin`: If the `startShouldSetResponder`
+ * on-demand dispatch returns `true` (and some other details are satisfied) the
+ * `onResponderGrant` deferred dispatched event is returned from
+ * `extractEvents`. The sequence of dispatch executions in this case
+ * will appear as follows:
+ *
+ * - `startShouldSetResponder` (`ResponderEventPlugin` dispatches on-demand)
+ * - `touchStartCapture`       (`EventPluginRegistry` dispatches as usual)
+ * - `touchStart`              (`EventPluginRegistry` dispatches as usual)
+ * - `responderGrant/Reject`   (`EventPluginRegistry` dispatches as usual)
+ */
+
+function setResponderAndExtractTransfer(
+  topLevelType,
+  targetInst,
+  nativeEvent,
+  nativeEventTarget,
+) {
+  const shouldSetEventType = isStartish(topLevelType)
+    ? eventTypes.startShouldSetResponder
+    : isMoveish(topLevelType)
+      ? eventTypes.moveShouldSetResponder
+      : topLevelType === TOP_SELECTION_CHANGE
+        ? eventTypes.selectionChangeShouldSetResponder
+        : eventTypes.scrollShouldSetResponder;
+
+  // TODO: stop one short of the current responder.
+  const bubbleShouldSetFrom = !responderInst
+    ? targetInst
+    : getLowestCommonAncestor(responderInst, targetInst);
+
+  // When capturing/bubbling the "shouldSet" event, we want to skip the target
+  // (deepest ID) if it happens to be the current responder. The reasoning:
+  // It's strange to get an `onMoveShouldSetResponder` when you're *already*
+  // the responder.
+  const skipOverBubbleShouldSetFrom = bubbleShouldSetFrom === responderInst;
+  const shouldSetEvent = ResponderSyntheticEvent.getPooled(
+    shouldSetEventType,
+    bubbleShouldSetFrom,
+    nativeEvent,
+    nativeEventTarget,
+  );
+  shouldSetEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
+  if (skipOverBubbleShouldSetFrom) {
+    accumulateTwoPhaseDispatchesSkipTarget(shouldSetEvent);
+  } else {
+    accumulateTwoPhaseDispatches(shouldSetEvent);
+  }
+  const wantsResponderInst = executeDispatchesInOrderStopAtTrue(shouldSetEvent);
+  if (!shouldSetEvent.isPersistent()) {
+    shouldSetEvent.constructor.release(shouldSetEvent);
+  }
+
+  if (!wantsResponderInst || wantsResponderInst === responderInst) {
+    return null;
+  }
+  let extracted;
+  const grantEvent = ResponderSyntheticEvent.getPooled(
+    eventTypes.responderGrant,
+    wantsResponderInst,
+    nativeEvent,
+    nativeEventTarget,
+  );
+  grantEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
+
+  accumulateDirectDispatches(grantEvent);
+  const blockHostResponder = executeDirectDispatch(grantEvent) === true;
+  if (responderInst) {
+    const terminationRequestEvent = ResponderSyntheticEvent.getPooled(
+      eventTypes.responderTerminationRequest,
+      responderInst,
+      nativeEvent,
+      nativeEventTarget,
+    );
+    terminationRequestEvent.touchHistory =
+      ResponderTouchHistoryStore.touchHistory;
+    accumulateDirectDispatches(terminationRequestEvent);
+    const shouldSwitch =
+      !hasDispatches(terminationRequestEvent) ||
+      executeDirectDispatch(terminationRequestEvent);
+    if (!terminationRequestEvent.isPersistent()) {
+      terminationRequestEvent.constructor.release(terminationRequestEvent);
+    }
+
+    if (shouldSwitch) {
+      const terminateEvent = ResponderSyntheticEvent.getPooled(
+        eventTypes.responderTerminate,
+        responderInst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      terminateEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
+      accumulateDirectDispatches(terminateEvent);
+      extracted = accumulate(extracted, [grantEvent, terminateEvent]);
+      changeResponder(wantsResponderInst, blockHostResponder);
+    } else {
+      const rejectEvent = ResponderSyntheticEvent.getPooled(
+        eventTypes.responderReject,
+        wantsResponderInst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      rejectEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
+      accumulateDirectDispatches(rejectEvent);
+      extracted = accumulate(extracted, rejectEvent);
+    }
+  } else {
+    extracted = accumulate(extracted, grantEvent);
+    changeResponder(wantsResponderInst, blockHostResponder);
+  }
+  return extracted;
+}
+
+/**
+ * A transfer is a negotiation between a currently set responder and the next
+ * element to claim responder status. Any start event could trigger a transfer
+ * of responderInst. Any move event could trigger a transfer.
+ *
+ * @param {string} topLevelType Record from `BrowserEventConstants`.
+ * @return {boolean} True if a transfer of responder could possibly occur.
+ */
+function canTriggerTransfer(topLevelType, topLevelInst, nativeEvent) {
+  return (
+    topLevelInst &&
+    // responderIgnoreScroll: We are trying to migrate away from specifically
+    // tracking native scroll events here and responderIgnoreScroll indicates we
+    // will send topTouchCancel to handle canceling touch events instead
+    ((topLevelType === TOP_SCROLL && !nativeEvent.responderIgnoreScroll) ||
+      (trackedTouchCount > 0 && topLevelType === TOP_SELECTION_CHANGE) ||
+      isStartish(topLevelType) ||
+      isMoveish(topLevelType))
+  );
+}
+
+/**
+ * Returns whether or not this touch end event makes it such that there are no
+ * longer any touches that started inside of the current `responderInst`.
+ *
+ * @param {NativeEvent} nativeEvent Native touch end event.
+ * @return {boolean} Whether or not this touch end event ends the responder.
+ */
+function noResponderTouches(nativeEvent) {
+  const touches = nativeEvent.touches;
+  if (!touches || touches.length === 0) {
+    return true;
+  }
+  for (let i = 0; i < touches.length; i++) {
+    const activeTouch = touches[i];
+    const target = activeTouch.target;
+    if (target !== null && target !== undefined && target !== 0) {
+      // Is the original touch location inside of the current responder?
+      const targetInst = getInstanceFromNode(target);
+      if (isAncestor(responderInst, targetInst)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+const ResponderEventPlugin = {
+  /* For unit testing only */
+  _getResponder: function () {
+    return responderInst;
+  },
+
+  eventTypes: eventTypes,
+
+  /**
+   * We must be resilient to `targetInst` being `null` on `touchMove` or
+   * `touchEnd`. On certain platforms, this means that a native scroll has
+   * assumed control and the original touch targets are destroyed.
+   */
+  extractEvents: function (
+    topLevelType,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget,
+    eventSystemFlags,
+  ) {
+    if (isStartish(topLevelType)) {
+      trackedTouchCount += 1;
+    } else if (isEndish(topLevelType)) {
+      if (trackedTouchCount >= 0) {
+        trackedTouchCount -= 1;
+      } else {
+        if (__DEV__) {
+          console.warn(
+            'Ended a touch event which was not counted in `trackedTouchCount`.',
+          );
+        }
+        return null;
+      }
+    }
+
+    ResponderTouchHistoryStore.recordTouchTrack(topLevelType, nativeEvent);
+
+    let extracted = canTriggerTransfer(topLevelType, targetInst, nativeEvent)
+      ? setResponderAndExtractTransfer(
+          topLevelType,
+          targetInst,
+          nativeEvent,
+          nativeEventTarget,
+        )
+      : null;
+    // Responder may or may not have transferred on a new touch start/move.
+    // Regardless, whoever is the responder after any potential transfer, we
+    // direct all touch start/move/ends to them in the form of
+    // `onResponderMove/Start/End`. These will be called for *every* additional
+    // finger that move/start/end, dispatched directly to whoever is the
+    // current responder at that moment, until the responder is "released".
+    //
+    // These multiple individual change touch events are are always bookended
+    // by `onResponderGrant`, and one of
+    // (`onResponderRelease/onResponderTerminate`).
+    const isResponderTouchStart = responderInst && isStartish(topLevelType);
+    const isResponderTouchMove = responderInst && isMoveish(topLevelType);
+    const isResponderTouchEnd = responderInst && isEndish(topLevelType);
+    const incrementalTouch = isResponderTouchStart
+      ? eventTypes.responderStart
+      : isResponderTouchMove
+        ? eventTypes.responderMove
+        : isResponderTouchEnd
+          ? eventTypes.responderEnd
+          : null;
+
+    if (incrementalTouch) {
+      const gesture = ResponderSyntheticEvent.getPooled(
+        incrementalTouch,
+        responderInst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      gesture.touchHistory = ResponderTouchHistoryStore.touchHistory;
+      accumulateDirectDispatches(gesture);
+      extracted = accumulate(extracted, gesture);
+    }
+
+    const isResponderTerminate =
+      responderInst && topLevelType === TOP_TOUCH_CANCEL;
+    const isResponderRelease =
+      responderInst &&
+      !isResponderTerminate &&
+      isEndish(topLevelType) &&
+      noResponderTouches(nativeEvent);
+    const finalTouch = isResponderTerminate
+      ? eventTypes.responderTerminate
+      : isResponderRelease
+        ? eventTypes.responderRelease
+        : null;
+    if (finalTouch) {
+      const finalEvent = ResponderSyntheticEvent.getPooled(
+        finalTouch,
+        responderInst,
+        nativeEvent,
+        nativeEventTarget,
+      );
+      finalEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
+      accumulateDirectDispatches(finalEvent);
+      extracted = accumulate(extracted, finalEvent);
+      changeResponder(null);
+    }
+
+    return extracted;
+  },
+
+  GlobalResponderHandler: null,
+
+  injection: {
+    /**
+     * @param {{onChange: (ReactID, ReactID) => void} GlobalResponderHandler
+     * Object that handles any change in responder. Use this to inject
+     * integration with an existing touch handling system etc.
+     */
+    injectGlobalResponderHandler(GlobalResponderHandler) {
+      ResponderEventPlugin.GlobalResponderHandler = GlobalResponderHandler;
+    },
+  },
+};
+
+export default ResponderEventPlugin;
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderSyntheticEvent.js b/packages/react-native-renderer/src/legacy-events/ResponderSyntheticEvent.js
new file mode 100644
index 00000000000..fa41140d47a
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/ResponderSyntheticEvent.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import SyntheticEvent from './SyntheticEvent';
+
+/**
+ * `touchHistory` isn't actually on the native event, but putting it in the
+ * interface will ensure that it is cleaned up when pooled/destroyed. The
+ * `ResponderEventPlugin` will populate it appropriately.
+ */
+const ResponderSyntheticEvent = SyntheticEvent.extend({
+  touchHistory: function (nativeEvent) {
+    return null; // Actually doesn't even look at the native event.
+  },
+});
+
+export default ResponderSyntheticEvent;
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTopLevelEventTypes.js b/packages/react-native-renderer/src/legacy-events/ResponderTopLevelEventTypes.js
new file mode 100644
index 00000000000..cb89ba7a63c
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTopLevelEventTypes.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 TOP_TOUCH_START = 'topTouchStart';
+export const TOP_TOUCH_MOVE = 'topTouchMove';
+export const TOP_TOUCH_END = 'topTouchEnd';
+export const TOP_TOUCH_CANCEL = 'topTouchCancel';
+export const TOP_SCROLL = 'topScroll';
+export const TOP_SELECTION_CHANGE = 'topSelectionChange';
+
+export function isStartish(topLevelType: mixed): boolean {
+  return topLevelType === TOP_TOUCH_START;
+}
+
+export function isMoveish(topLevelType: mixed): boolean {
+  return topLevelType === TOP_TOUCH_MOVE;
+}
+
+export function isEndish(topLevelType: mixed): boolean {
+  return topLevelType === TOP_TOUCH_END || topLevelType === TOP_TOUCH_CANCEL;
+}
+
+export const startDependencies = [TOP_TOUCH_START];
+export const moveDependencies = [TOP_TOUCH_MOVE];
+export const endDependencies = [TOP_TOUCH_CANCEL, TOP_TOUCH_END];
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
new file mode 100644
index 00000000000..4b523b0a92d
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
+
+/**
+ * Tracks the position and time of each active touch by `touch.identifier`. We
+ * should typically only see IDs in the range of 1-20 because IDs get recycled
+ * when touches end and start again.
+ */
+type TouchRecord = {
+  touchActive: boolean,
+  startPageX: number,
+  startPageY: number,
+  startTimeStamp: number,
+  currentPageX: number,
+  currentPageY: number,
+  currentTimeStamp: number,
+  previousPageX: number,
+  previousPageY: number,
+  previousTimeStamp: number,
+};
+
+const MAX_TOUCH_BANK = 20;
+const touchBank: Array<TouchRecord> = [];
+const touchHistory = {
+  touchBank,
+  numberActiveTouches: 0,
+  // If there is only one active touch, we remember its location. This prevents
+  // us having to loop through all of the touches all the time in the most
+  // common case.
+  indexOfSingleActiveTouch: -1,
+  mostRecentTimeStamp: 0,
+};
+
+type Touch = {
+  identifier: ?number,
+  pageX: number,
+  pageY: number,
+  timestamp: number,
+  ...
+};
+type TouchEvent = {
+  changedTouches: Array<Touch>,
+  touches: Array<Touch>,
+  ...
+};
+
+function timestampForTouch(touch: Touch): number {
+  // The legacy internal implementation provides "timeStamp", which has been
+  // renamed to "timestamp". Let both work for now while we iron it out
+  // TODO (evv): rename timeStamp to timestamp in internal code
+  return (touch: any).timeStamp || touch.timestamp;
+}
+
+/**
+ * TODO: Instead of making gestures recompute filtered velocity, we could
+ * include a built in velocity computation that can be reused globally.
+ */
+function createTouchRecord(touch: Touch): TouchRecord {
+  return {
+    touchActive: true,
+    startPageX: touch.pageX,
+    startPageY: touch.pageY,
+    startTimeStamp: timestampForTouch(touch),
+    currentPageX: touch.pageX,
+    currentPageY: touch.pageY,
+    currentTimeStamp: timestampForTouch(touch),
+    previousPageX: touch.pageX,
+    previousPageY: touch.pageY,
+    previousTimeStamp: timestampForTouch(touch),
+  };
+}
+
+function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
+  touchRecord.touchActive = true;
+  touchRecord.startPageX = touch.pageX;
+  touchRecord.startPageY = touch.pageY;
+  touchRecord.startTimeStamp = timestampForTouch(touch);
+  touchRecord.currentPageX = touch.pageX;
+  touchRecord.currentPageY = touch.pageY;
+  touchRecord.currentTimeStamp = timestampForTouch(touch);
+  touchRecord.previousPageX = touch.pageX;
+  touchRecord.previousPageY = touch.pageY;
+  touchRecord.previousTimeStamp = timestampForTouch(touch);
+}
+
+function getTouchIdentifier({identifier}: Touch): number {
+  if (identifier == null) {
+    throw new Error('Touch object is missing identifier.');
+  }
+
+  if (__DEV__) {
+    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;
+}
+
+function recordTouchStart(touch: Touch): void {
+  const identifier = getTouchIdentifier(touch);
+  const touchRecord = touchBank[identifier];
+  if (touchRecord) {
+    resetTouchRecord(touchRecord, touch);
+  } else {
+    touchBank[identifier] = createTouchRecord(touch);
+  }
+  touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+}
+
+function recordTouchMove(touch: Touch): void {
+  const touchRecord = touchBank[getTouchIdentifier(touch)];
+  if (touchRecord) {
+    touchRecord.touchActive = true;
+    touchRecord.previousPageX = touchRecord.currentPageX;
+    touchRecord.previousPageY = touchRecord.currentPageY;
+    touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
+    touchRecord.currentPageX = touch.pageX;
+    touchRecord.currentPageY = touch.pageY;
+    touchRecord.currentTimeStamp = timestampForTouch(touch);
+    touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+  } else {
+    if (__DEV__) {
+      console.warn(
+        'Cannot record touch move without a touch start.\n' +
+          'Touch Move: %s\n' +
+          'Touch Bank: %s',
+        printTouch(touch),
+        printTouchBank(),
+      );
+    }
+  }
+}
+
+function recordTouchEnd(touch: Touch): void {
+  const touchRecord = touchBank[getTouchIdentifier(touch)];
+  if (touchRecord) {
+    touchRecord.touchActive = false;
+    touchRecord.previousPageX = touchRecord.currentPageX;
+    touchRecord.previousPageY = touchRecord.currentPageY;
+    touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
+    touchRecord.currentPageX = touch.pageX;
+    touchRecord.currentPageY = touch.pageY;
+    touchRecord.currentTimeStamp = timestampForTouch(touch);
+    touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+  } else {
+    if (__DEV__) {
+      console.warn(
+        'Cannot record touch end without a touch start.\n' +
+          'Touch End: %s\n' +
+          'Touch Bank: %s',
+        printTouch(touch),
+        printTouchBank(),
+      );
+    }
+  }
+}
+
+function printTouch(touch: Touch): string {
+  return JSON.stringify({
+    identifier: touch.identifier,
+    pageX: touch.pageX,
+    pageY: touch.pageY,
+    timestamp: timestampForTouch(touch),
+  });
+}
+
+function printTouchBank(): string {
+  let printed = JSON.stringify(touchBank.slice(0, MAX_TOUCH_BANK));
+  if (touchBank.length > MAX_TOUCH_BANK) {
+    printed += ' (original size: ' + touchBank.length + ')';
+  }
+  return printed;
+}
+
+let instrumentationCallback: ?(string, TouchEvent) => void;
+
+const ResponderTouchHistoryStore = {
+  /**
+   * Registers a listener which can be used to instrument every touch event.
+   */
+  instrument(callback: (string, TouchEvent) => void): void {
+    instrumentationCallback = callback;
+  },
+
+  recordTouchTrack(topLevelType: string, nativeEvent: TouchEvent): void {
+    if (instrumentationCallback != null) {
+      instrumentationCallback(topLevelType, nativeEvent);
+    }
+
+    if (isMoveish(topLevelType)) {
+      nativeEvent.changedTouches.forEach(recordTouchMove);
+    } else if (isStartish(topLevelType)) {
+      nativeEvent.changedTouches.forEach(recordTouchStart);
+      touchHistory.numberActiveTouches = nativeEvent.touches.length;
+      if (touchHistory.numberActiveTouches === 1) {
+        touchHistory.indexOfSingleActiveTouch =
+          // $FlowFixMe[incompatible-type] might be null according to type
+          nativeEvent.touches[0].identifier;
+      }
+    } else if (isEndish(topLevelType)) {
+      nativeEvent.changedTouches.forEach(recordTouchEnd);
+      touchHistory.numberActiveTouches = nativeEvent.touches.length;
+      if (touchHistory.numberActiveTouches === 1) {
+        for (let i = 0; i < touchBank.length; i++) {
+          const touchTrackToCheck = touchBank[i];
+          if (touchTrackToCheck != null && touchTrackToCheck.touchActive) {
+            touchHistory.indexOfSingleActiveTouch = i;
+            break;
+          }
+        }
+        if (__DEV__) {
+          const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
+          if (activeRecord == null || !activeRecord.touchActive) {
+            console.error('Cannot find single active touch.');
+          }
+        }
+      }
+    }
+  },
+
+  touchHistory,
+};
+
+export default ResponderTouchHistoryStore;
diff --git a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
new file mode 100644
index 00000000000..723daa0dc9e
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
@@ -0,0 +1,347 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint valid-typeof: 0 */
+
+import assign from 'shared/assign';
+
+const EVENT_POOL_SIZE = 10;
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/
+ */
+const EventInterface = {
+  type: null,
+  target: null,
+  // currentTarget is set when dispatching; no use in copying it here
+  currentTarget: function () {
+    return null;
+  },
+  eventPhase: null,
+  bubbles: null,
+  cancelable: null,
+  timeStamp: function (event) {
+    return event.timeStamp || Date.now();
+  },
+  defaultPrevented: null,
+  isTrusted: null,
+};
+
+function functionThatReturnsTrue() {
+  return true;
+}
+
+function functionThatReturnsFalse() {
+  return false;
+}
+
+/**
+ * Synthetic events are dispatched by event plugins, typically in response to a
+ * top-level event delegation handler.
+ *
+ * These systems should generally use pooling to reduce the frequency of garbage
+ * collection. The system should check `isPersistent` to determine whether the
+ * event should be released into the pool after being dispatched. Users that
+ * need a persisted event should invoke `persist`.
+ *
+ * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
+ * normalizing browser quirks. Subclasses do not necessarily have to implement a
+ * DOM interface; custom application-specific events can also subclass this.
+ *
+ * @param {object} dispatchConfig Configuration used to dispatch this event.
+ * @param {*} targetInst Marker identifying the event target.
+ * @param {object} nativeEvent Native browser event.
+ * @param {DOMEventTarget} nativeEventTarget Target node.
+ */
+function SyntheticEvent(
+  dispatchConfig,
+  targetInst,
+  nativeEvent,
+  nativeEventTarget,
+) {
+  if (__DEV__) {
+    // these have a getter/setter for warnings
+    delete this.nativeEvent;
+    delete this.preventDefault;
+    delete this.stopPropagation;
+    delete this.isDefaultPrevented;
+    delete this.isPropagationStopped;
+  }
+
+  this.dispatchConfig = dispatchConfig;
+  this._targetInst = targetInst;
+  this.nativeEvent = nativeEvent;
+  this._dispatchListeners = null;
+  this._dispatchInstances = null;
+
+  const Interface = this.constructor.Interface;
+  for (const propName in Interface) {
+    if (!Interface.hasOwnProperty(propName)) {
+      continue;
+    }
+    if (__DEV__) {
+      delete this[propName]; // this has a getter/setter for warnings
+    }
+    const normalize = Interface[propName];
+    if (normalize) {
+      this[propName] = normalize(nativeEvent);
+    } else {
+      if (propName === 'target') {
+        this.target = nativeEventTarget;
+      } else {
+        this[propName] = nativeEvent[propName];
+      }
+    }
+  }
+
+  const defaultPrevented =
+    nativeEvent.defaultPrevented != null
+      ? nativeEvent.defaultPrevented
+      : nativeEvent.returnValue === false;
+  if (defaultPrevented) {
+    this.isDefaultPrevented = functionThatReturnsTrue;
+  } else {
+    this.isDefaultPrevented = functionThatReturnsFalse;
+  }
+  this.isPropagationStopped = functionThatReturnsFalse;
+  return this;
+}
+
+assign(SyntheticEvent.prototype, {
+  preventDefault: function () {
+    this.defaultPrevented = true;
+    const event = this.nativeEvent;
+    if (!event) {
+      return;
+    }
+
+    if (event.preventDefault) {
+      event.preventDefault();
+    } else if (typeof event.returnValue !== 'unknown') {
+      event.returnValue = false;
+    }
+    this.isDefaultPrevented = functionThatReturnsTrue;
+  },
+
+  stopPropagation: function () {
+    const event = this.nativeEvent;
+    if (!event) {
+      return;
+    }
+
+    if (event.stopPropagation) {
+      event.stopPropagation();
+    } else if (typeof event.cancelBubble !== 'unknown') {
+      // The ChangeEventPlugin registers a "propertychange" event for
+      // IE. This event does not support bubbling or cancelling, and
+      // any references to cancelBubble throw "Member not found".  A
+      // typeof check of "unknown" circumvents this issue (and is also
+      // IE specific).
+      event.cancelBubble = true;
+    }
+
+    this.isPropagationStopped = functionThatReturnsTrue;
+  },
+
+  /**
+   * We release all dispatched `SyntheticEvent`s after each event loop, adding
+   * them back into the pool. This allows a way to hold onto a reference that
+   * won't be added back into the pool.
+   */
+  persist: function () {
+    this.isPersistent = functionThatReturnsTrue;
+  },
+
+  /**
+   * Checks if this event should be released back into the pool.
+   *
+   * @return {boolean} True if this should not be released, false otherwise.
+   */
+  isPersistent: functionThatReturnsFalse,
+
+  /**
+   * `PooledClass` looks for `destructor` on each instance it releases.
+   */
+  destructor: function () {
+    const Interface = this.constructor.Interface;
+    for (const propName in Interface) {
+      if (__DEV__) {
+        Object.defineProperty(
+          this,
+          propName,
+          getPooledWarningPropertyDefinition(propName, Interface[propName]),
+        );
+      } else {
+        this[propName] = null;
+      }
+    }
+    this.dispatchConfig = null;
+    this._targetInst = null;
+    this.nativeEvent = null;
+    this.isDefaultPrevented = functionThatReturnsFalse;
+    this.isPropagationStopped = functionThatReturnsFalse;
+    this._dispatchListeners = null;
+    this._dispatchInstances = null;
+    if (__DEV__) {
+      Object.defineProperty(
+        this,
+        'nativeEvent',
+        getPooledWarningPropertyDefinition('nativeEvent', null),
+      );
+      Object.defineProperty(
+        this,
+        'isDefaultPrevented',
+        getPooledWarningPropertyDefinition(
+          'isDefaultPrevented',
+          functionThatReturnsFalse,
+        ),
+      );
+      Object.defineProperty(
+        this,
+        'isPropagationStopped',
+        getPooledWarningPropertyDefinition(
+          'isPropagationStopped',
+          functionThatReturnsFalse,
+        ),
+      );
+      Object.defineProperty(
+        this,
+        'preventDefault',
+        getPooledWarningPropertyDefinition('preventDefault', () => {}),
+      );
+      Object.defineProperty(
+        this,
+        'stopPropagation',
+        getPooledWarningPropertyDefinition('stopPropagation', () => {}),
+      );
+    }
+  },
+});
+
+SyntheticEvent.Interface = EventInterface;
+
+/**
+ * Helper to reduce boilerplate when creating subclasses.
+ */
+SyntheticEvent.extend = function (Interface) {
+  const Super = this;
+
+  const E = function () {};
+  E.prototype = Super.prototype;
+  const prototype = new E();
+
+  function Class() {
+    return Super.apply(this, arguments);
+  }
+  assign(prototype, Class.prototype);
+  Class.prototype = prototype;
+  Class.prototype.constructor = Class;
+
+  Class.Interface = assign({}, Super.Interface, Interface);
+  Class.extend = Super.extend;
+  addEventPoolingTo(Class);
+
+  return Class;
+};
+
+addEventPoolingTo(SyntheticEvent);
+
+/**
+ * Helper to nullify syntheticEvent instance properties when destructing
+ *
+ * @param {String} propName
+ * @param {?object} getVal
+ * @return {object} defineProperty object
+ */
+function getPooledWarningPropertyDefinition(propName, getVal) {
+  function set(val) {
+    const action = isFunction ? 'setting the method' : 'setting the property';
+    warn(action, 'This is effectively a no-op');
+    return val;
+  }
+
+  function get() {
+    const action = isFunction
+      ? 'accessing the method'
+      : 'accessing the property';
+    const result = isFunction
+      ? 'This is a no-op function'
+      : 'This is set to null';
+    warn(action, result);
+    return getVal;
+  }
+
+  function warn(action, 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://react.dev/link/event-pooling for more information.',
+        action,
+        propName,
+        result,
+      );
+    }
+  }
+  const isFunction = typeof getVal === 'function';
+  return {
+    configurable: true,
+    set: set,
+    get: get,
+  };
+}
+
+function createOrGetPooledEvent(
+  dispatchConfig,
+  targetInst,
+  nativeEvent,
+  nativeInst,
+) {
+  const EventConstructor = this;
+  if (EventConstructor.eventPool.length) {
+    const instance = EventConstructor.eventPool.pop();
+    EventConstructor.call(
+      instance,
+      dispatchConfig,
+      targetInst,
+      nativeEvent,
+      nativeInst,
+    );
+    return instance;
+  }
+  return new EventConstructor(
+    dispatchConfig,
+    targetInst,
+    nativeEvent,
+    nativeInst,
+  );
+}
+
+function releasePooledEvent(event) {
+  const EventConstructor = this;
+
+  if (!(event instanceof EventConstructor)) {
+    throw new Error(
+      'Trying to release an event instance into a pool of a different type.',
+    );
+  }
+
+  event.destructor();
+  if (EventConstructor.eventPool.length < EVENT_POOL_SIZE) {
+    EventConstructor.eventPool.push(event);
+  }
+}
+
+function addEventPoolingTo(EventConstructor) {
+  EventConstructor.getPooled = createOrGetPooledEvent;
+  EventConstructor.eventPool = [];
+  EventConstructor.release = releasePooledEvent;
+}
+
+export default SyntheticEvent;
diff --git a/packages/react-native-renderer/src/legacy-events/TopLevelEventTypes.js b/packages/react-native-renderer/src/legacy-events/TopLevelEventTypes.js
new file mode 100644
index 00000000000..4a70a2e138f
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/TopLevelEventTypes.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 RNTopLevelEventType =
+  | 'topMouseDown'
+  | 'topMouseMove'
+  | 'topMouseUp'
+  | 'topScroll'
+  | 'topSelectionChange'
+  | 'topTouchCancel'
+  | 'topTouchEnd'
+  | 'topTouchMove'
+  | 'topTouchStart';
+
+export opaque type DOMTopLevelEventType = string;
+
+// Do not use the below two methods directly!
+// Instead use constants exported from DOMTopLevelEventTypes in ReactDOM.
+// (It is the only module that is allowed to access these methods.)
+
+export function unsafeCastStringToDOMTopLevelType(
+  topLevelType: string,
+): DOMTopLevelEventType {
+  return topLevelType;
+}
+
+export function unsafeCastDOMTopLevelTypeToString(
+  topLevelType: DOMTopLevelEventType,
+): string {
+  return topLevelType;
+}
+
+export type TopLevelType = DOMTopLevelEventType | RNTopLevelEventType;
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
new file mode 100644
index 00000000000..94cc9256713
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isArray from 'shared/isArray';
+
+/**
+ * Accumulates items that must not be null or undefined.
+ *
+ * This is used to conserve memory by avoiding array allocations.
+ *
+ * @return {*|array<*>} An accumulation of items.
+ */
+function accumulate<T>(
+  current: ?(T | Array<T>),
+  next: T | Array<T>,
+): T | Array<T> {
+  if (next == null) {
+    throw new Error('Accumulated items must not be null or undefined.');
+  }
+
+  if (current == null) {
+    return next;
+  }
+
+  // Both are not empty. Warning: Never call x.concat(y) when you are not
+  // certain that x is an Array (x could be a string with concat method).
+  if (isArray(current)) {
+    // $FlowFixMe[incompatible-use] `isArray` does not ensure array is mutable
+    return current.concat(next);
+  }
+
+  if (isArray(next)) {
+    /* $FlowFixMe[incompatible-return] unsound if `next` is `T` and `T` an array,
+     * `isArray` might refine to the array element type of `T` */
+    return [current].concat(next);
+  }
+
+  return [current, next];
+}
+
+export default accumulate;
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
new file mode 100644
index 00000000000..3a36e69788c
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isArray from 'shared/isArray';
+
+/**
+ * Accumulates items that must not be null or undefined into the first one. This
+ * is used to conserve memory by avoiding array allocations, and thus sacrifices
+ * API cleanness. Since `current` can be null before being passed in and not
+ * null after this function, make sure to assign it back to `current`:
+ *
+ * `a = accumulateInto(a, b);`
+ *
+ * This API should be sparingly used. Try `accumulate` for something cleaner.
+ *
+ * @return {*|array<*>} An accumulation of items.
+ */
+
+function accumulateInto<T>(
+  current: ?(Array<T> | T),
+  next: T | Array<T>,
+): T | Array<T> {
+  if (next == null) {
+    throw new Error('Accumulated items must not be null or undefined.');
+  }
+
+  if (current == null) {
+    return next;
+  }
+
+  // Both are not empty. Warning: Never call x.concat(y) when you are not
+  // certain that x is an Array (x could be a string with concat method).
+  if (isArray(current)) {
+    if (isArray(next)) {
+      // $FlowFixMe[incompatible-use] `isArray` does not ensure array is mutable
+      // $FlowFixMe[method-unbinding]
+      current.push.apply(current, next);
+      return current;
+    }
+    // $FlowFixMe[incompatible-use] `isArray` does not ensure array is mutable
+    current.push(next);
+    return current;
+  }
+
+  if (isArray(next)) {
+    // A bit too dangerous to mutate `next`.
+    /* $FlowFixMe[incompatible-return] unsound if `next` is `T` and `T` an array,
+     * `isArray` might refine to the array element type of `T` */
+    return [current].concat(next);
+  }
+
+  return [current, next];
+}
+
+export default accumulateInto;
diff --git a/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js b/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js
new file mode 100644
index 00000000000..e9d82b0dd2a
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * @param {array} arr an "accumulation" of items which is either an Array or
+ * a single item. Useful when paired with the `accumulate` module. This is a
+ * simple utility that allows us to reason about a collection of items, but
+ * handling the case when there is exactly one item (and we do not need to
+ * allocate an array).
+ * @param {function} cb Callback invoked with each element or a collection.
+ * @param {?} [scope] Scope used as `this` in a callback.
+ */
+function forEachAccumulated<T>(
+  arr: ?(Array<T> | T),
+  cb: (elem: T) => void,
+  scope: ?any,
+) {
+  if (Array.isArray(arr)) {
+    // $FlowFixMe[incompatible-call] if `T` is an array, `cb` cannot be called
+    arr.forEach(cb, scope);
+  } else if (arr) {
+    cb.call(scope, arr);
+  }
+}
+
+export default forEachAccumulated;
diff --git a/packages/react-noop-renderer/README.md b/packages/react-noop-renderer/README.md
new file mode 100644
index 00000000000..1bd535c9f7b
--- /dev/null
+++ b/packages/react-noop-renderer/README.md
@@ -0,0 +1,4 @@
+# `react-noop-renderer`
+
+This package is the renderer we use for debugging [Fiber](https://github.com/facebook/react/issues/6170).
+It is not intended to be used directly.
diff --git a/packages/react-noop-renderer/flight-client.js b/packages/react-noop-renderer/flight-client.js
new file mode 100644
index 00000000000..d14adf3c88a
--- /dev/null
+++ b/packages/react-noop-renderer/flight-client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactNoopFlightClient';
diff --git a/packages/react-noop-renderer/flight-modules.js b/packages/react-noop-renderer/flight-modules.js
new file mode 100644
index 00000000000..2be0f84adc0
--- /dev/null
+++ b/packages/react-noop-renderer/flight-modules.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 used as temporary storage for modules generated in Flight tests.
+let moduleIdx = 0;
+const modules: Map<string, Function> = new Map();
+
+// This simulates what the compiler will do when it replaces render functions with server blocks.
+export function saveModule(render: Function): string {
+  const idx = '' + moduleIdx++;
+  modules.set(idx, render);
+  return idx;
+}
+
+export function readModule(idx: string): Function {
+  return modules.get(idx);
+}
diff --git a/packages/react-noop-renderer/flight-server.js b/packages/react-noop-renderer/flight-server.js
new file mode 100644
index 00000000000..89e1effdd3d
--- /dev/null
+++ b/packages/react-noop-renderer/flight-server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactNoopFlightServer';
diff --git a/packages/react-noop-renderer/index.js b/packages/react-noop-renderer/index.js
new file mode 100644
index 00000000000..109c88390b7
--- /dev/null
+++ b/packages/react-noop-renderer/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactNoop';
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 00000000000..c4c0919ed61
--- /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.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-flight-client.development.js');
+}
diff --git a/packages/react-noop-renderer/npm/flight-modules.js b/packages/react-noop-renderer/npm/flight-modules.js
new file mode 100644
index 00000000000..f4079d79538
--- /dev/null
+++ b/packages/react-noop-renderer/npm/flight-modules.js
@@ -0,0 +1,16 @@
+'use strict';
+
+// This file is used as temporary storage for modules generated in Flight tests.
+var moduleIdx = 0;
+var modules = new Map();
+
+// This simulates what the compiler will do when it replaces render functions with server blocks.
+exports.saveModule = function saveModule(render) {
+  var idx = '' + moduleIdx++;
+  modules.set(idx, render);
+  return idx;
+};
+
+exports.readModule = function readModule(idx) {
+  return modules.get(idx);
+};
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 00000000000..d1242cd78e2
--- /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.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-flight-server.development.js');
+}
diff --git a/packages/react-noop-renderer/npm/index.js b/packages/react-noop-renderer/npm/index.js
new file mode 100644
index 00000000000..4f878211b65
--- /dev/null
+++ b/packages/react-noop-renderer/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-noop-renderer.production.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer.development.js');
+}
diff --git a/packages/react-noop-renderer/npm/persistent.js b/packages/react-noop-renderer/npm/persistent.js
new file mode 100644
index 00000000000..74d88fb1343
--- /dev/null
+++ b/packages/react-noop-renderer/npm/persistent.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-noop-renderer-persistent.production.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-persistent.development.js');
+}
diff --git a/packages/react-noop-renderer/npm/server.js b/packages/react-noop-renderer/npm/server.js
new file mode 100644
index 00000000000..836aed8242c
--- /dev/null
+++ b/packages/react-noop-renderer/npm/server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-noop-renderer-server.production.js');
+} else {
+  module.exports = require('./cjs/react-noop-renderer-server.development.js');
+}
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
new file mode 100644
index 00000000000..aae14070714
--- /dev/null
+++ b/packages/react-noop-renderer/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "react-noop-renderer",
+  "version": "16.0.0",
+  "private": true,
+  "description": "React package for testing the Fiber, Fizz and Flight reconcilers.",
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-noop-renderer"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react-reconciler": "*",
+    "react-client": "*",
+    "react-server": "*"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "persistent.js",
+    "server.js",
+    "flight-client.js",
+    "flight-modules.js",
+    "flight-server.js",
+    "cjs/"
+  ]
+}
diff --git a/packages/react-noop-renderer/persistent.js b/packages/react-noop-renderer/persistent.js
new file mode 100644
index 00000000000..d1934cc7b2b
--- /dev/null
+++ b/packages/react-noop-renderer/persistent.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactNoopPersistent';
diff --git a/packages/react-noop-renderer/server.js b/packages/react-noop-renderer/server.js
new file mode 100644
index 00000000000..3335456d00a
--- /dev/null
+++ b/packages/react-noop-renderer/server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactNoopServer';
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
new file mode 100644
index 00000000000..df55810493c
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactFiberReconciler from 'react-reconciler';
+import createReactNoop from './createReactNoop';
+
+export const {
+  _Scheduler,
+  getChildren,
+  dangerouslyGetChildren,
+  getPendingChildren,
+  dangerouslyGetPendingChildren,
+  getOrCreateRootContainer,
+  createRoot,
+  createLegacyRoot,
+  getChildrenAsJSX,
+  getPendingChildrenAsJSX,
+  getSuspenseyThingStatus,
+  resolveSuspenseyThing,
+  resetSuspenseyThingCache,
+  createPortal,
+  render,
+  renderLegacySyncRoot,
+  renderToRootWithID,
+  unmountRootWithID,
+  findInstance,
+  flushNextYield,
+  startTrackingHostCounters,
+  stopTrackingHostCounters,
+  expire,
+  flushExpired,
+  batchedUpdates,
+  deferredUpdates,
+  discreteUpdates,
+  idleUpdates,
+  flushSync,
+  flushPassiveEffects,
+  act,
+  dumpTree,
+  getRoot,
+  // TODO: Remove this after callers migrate to alternatives.
+  unstable_runWithPriority,
+} = createReactNoop(
+  ReactFiberReconciler, // reconciler
+  true, // useMutation
+);
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightClient.js b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
new file mode 100644
index 00000000000..fb6259f1a6a
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {FindSourceMapURLCallback} from 'react-client/flight';
+
+import {readModule} from 'react-noop-renderer/flight-modules';
+
+import ReactFlightClient from 'react-client/flight';
+
+type Source = Array<Uint8Array>;
+
+const decoderOptions = {stream: true};
+
+const {createResponse, createStreamState, processBinaryChunk, getRoot, close} =
+  ReactFlightClient({
+    createStringDecoder() {
+      return new TextDecoder();
+    },
+    readPartialStringChunk(decoder: TextDecoder, buffer: Uint8Array): string {
+      return decoder.decode(buffer, decoderOptions);
+    },
+    readFinalStringChunk(decoder: TextDecoder, buffer: Uint8Array): string {
+      return decoder.decode(buffer);
+    },
+    resolveClientReference(bundlerConfig: null, idx: string) {
+      return idx;
+    },
+    prepareDestinationForModule(moduleLoading: null, metadata: string) {},
+    preloadModule(idx: string) {},
+    requireModule(idx: string) {
+      return readModule(idx);
+    },
+    parseModel(response: Response, json) {
+      return JSON.parse(json, response._fromJSON);
+    },
+    bindToConsole(methodName, args, badgeName) {
+      return Function.prototype.bind.apply(
+        // eslint-disable-next-line react-internal/no-production-logging
+        console[methodName],
+        [console].concat(args),
+      );
+    },
+  });
+
+type ReadOptions = {|
+  findSourceMapURL?: FindSourceMapURLCallback,
+  debugChannel?: {onMessage: (message: string) => void},
+  close?: boolean,
+|};
+
+function read<T>(source: Source, options: ReadOptions): Thenable<T> {
+  const response = createResponse(
+    source,
+    null,
+    null,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    options !== undefined ? options.findSourceMapURL : undefined,
+    true,
+    undefined,
+    __DEV__ && options !== undefined && options.debugChannel !== undefined
+      ? options.debugChannel.onMessage
+      : undefined,
+  );
+  const streamState = createStreamState(response, source);
+  for (let i = 0; i < source.length; i++) {
+    processBinaryChunk(response, streamState, source[i], 0);
+  }
+  if (options !== undefined && options.close) {
+    close(response);
+  }
+  return getRoot(response);
+}
+
+export {read};
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
new file mode 100644
index 00000000000..469e5465f30
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+import {saveModule} from 'react-noop-renderer/flight-modules';
+
+import ReactFlightServer from 'react-server/flight';
+
+type Destination = Array<Uint8Array>;
+
+const textEncoder = new TextEncoder();
+
+const ReactNoopFlightServer = ReactFlightServer({
+  scheduleMicrotask(callback: () => void) {
+    callback();
+  },
+  scheduleWork(callback: () => void) {
+    callback();
+  },
+  beginWriting(destination: Destination): void {},
+  writeChunk(destination: Destination, chunk: string): void {
+    destination.push(chunk);
+  },
+  writeChunkAndReturn(destination: Destination, chunk: string): boolean {
+    destination.push(chunk);
+    return true;
+  },
+  completeWriting(destination: Destination): void {},
+  close(destination: Destination): void {},
+  closeWithError(destination: Destination, error: mixed): void {},
+  flushBuffered(destination: Destination): void {},
+  stringToChunk(content: string): Uint8Array {
+    return textEncoder.encode(content);
+  },
+  stringToPrecomputedChunk(content: string): Uint8Array {
+    return textEncoder.encode(content);
+  },
+  isClientReference(reference: Object): boolean {
+    return reference.$$typeof === Symbol.for('react.client.reference');
+  },
+  isServerReference(reference: Object): boolean {
+    return reference.$$typeof === Symbol.for('react.server.reference');
+  },
+  getClientReferenceKey(reference: Object): Object {
+    return reference;
+  },
+  resolveClientReferenceMetadata(
+    config: void,
+    reference: {$$typeof: symbol, value: any},
+  ) {
+    return saveModule(reference.value);
+  },
+});
+
+type Options = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  debugChannel?: {onMessage?: (message: string) => void},
+  onError?: (error: mixed) => void,
+};
+
+function render(model: ReactClientValue, options?: Options): Destination {
+  const destination: Destination = [];
+  const bundlerConfig = undefined;
+  const request = ReactNoopFlightServer.createRequest(
+    model,
+    bundlerConfig,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    __DEV__ && options && options.debugChannel !== undefined,
+  );
+  const signal = options ? options.signal : undefined;
+  if (signal) {
+    if (signal.aborted) {
+      ReactNoopFlightServer.abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        ReactNoopFlightServer.abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (__DEV__ && options && options.debugChannel !== undefined) {
+    options.debugChannel.onMessage = message => {
+      ReactNoopFlightServer.resolveDebugMessage(request, message);
+    };
+  }
+  ReactNoopFlightServer.startWork(request);
+  ReactNoopFlightServer.startFlowing(request, destination);
+  return destination;
+}
+
+export {render};
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
new file mode 100644
index 00000000000..040114b86b8
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactFiberReconciler from 'react-reconciler';
+import createReactNoop from './createReactNoop';
+
+export const {
+  _Scheduler,
+  getChildren,
+  dangerouslyGetChildren,
+  getPendingChildren,
+  dangerouslyGetPendingChildren,
+  getOrCreateRootContainer,
+  createRoot,
+  createLegacyRoot,
+  getChildrenAsJSX,
+  getPendingChildrenAsJSX,
+  getSuspenseyThingStatus,
+  resolveSuspenseyThing,
+  resetSuspenseyThingCache,
+  createPortal,
+  render,
+  renderLegacySyncRoot,
+  renderToRootWithID,
+  unmountRootWithID,
+  findInstance,
+  flushNextYield,
+  startTrackingHostCounters,
+  stopTrackingHostCounters,
+  expire,
+  flushExpired,
+  batchedUpdates,
+  deferredUpdates,
+  discreteUpdates,
+  idleUpdates,
+  flushDiscreteUpdates,
+  flushSync,
+  flushPassiveEffects,
+  act,
+  dumpTree,
+  getRoot,
+  // TODO: Remove this once callers migrate to alternatives.
+  // This should only be used by React internals.
+  unstable_runWithPriority,
+} = createReactNoop(
+  ReactFiberReconciler, // reconciler
+  false, // useMutation
+);
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
new file mode 100644
index 00000000000..1793180cc76
--- /dev/null
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -0,0 +1,381 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import ReactFizzServer from 'react-server';
+
+type Instance = {
+  type: string,
+  children: Array<Instance | TextInstance | SuspenseInstance>,
+  prop: any,
+  hidden: boolean,
+};
+
+type TextInstance = {
+  text: string,
+  hidden: boolean,
+};
+
+type ActivityInstance = {
+  children: Array<Instance | TextInstance | SuspenseInstance>,
+};
+
+type SuspenseInstance = {
+  state: 'pending' | 'complete' | 'client-render',
+  children: Array<Instance | TextInstance | SuspenseInstance>,
+};
+
+type Placeholder = {
+  parent: Instance | SuspenseInstance,
+  index: number,
+};
+
+type Segment = {
+  children: null | Instance | TextInstance | SuspenseInstance,
+};
+
+type Destination = {
+  root: null | Instance | TextInstance | SuspenseInstance,
+  placeholders: Map<number, Placeholder>,
+  segments: Map<number, Segment>,
+  stack: Array<Segment | Instance | SuspenseInstance>,
+};
+
+type ResumableState = null;
+type RenderState = null;
+type HoistableState = null;
+type PreambleState = null;
+
+const POP = Buffer.from('/', 'utf8');
+
+function write(destination: Destination, buffer: Uint8Array): void {
+  const stack = destination.stack;
+  if (buffer === POP) {
+    stack.pop();
+    return;
+  }
+  // We assume one chunk is one instance.
+  const instance = JSON.parse(Buffer.from((buffer: any)).toString('utf8'));
+  if (stack.length === 0) {
+    destination.root = instance;
+  } else {
+    const parent = stack[stack.length - 1];
+    parent.children.push(instance);
+  }
+  stack.push(instance);
+}
+
+const ReactNoopServer = ReactFizzServer({
+  scheduleMicrotask(callback: () => void) {
+    callback();
+  },
+  scheduleWork(callback: () => void) {
+    callback();
+  },
+  beginWriting(destination: Destination): void {},
+  writeChunk(destination: Destination, buffer: Uint8Array): void {
+    write(destination, buffer);
+  },
+  writeChunkAndReturn(destination: Destination, buffer: Uint8Array): boolean {
+    write(destination, buffer);
+    return true;
+  },
+  completeWriting(destination: Destination): void {},
+  close(destination: Destination): void {},
+  closeWithError(destination: Destination, error: mixed): void {},
+  flushBuffered(destination: Destination): void {},
+
+  byteLengthOfChunk: null,
+
+  getChildFormatContext(): null {
+    return null;
+  },
+  getSuspenseFallbackFormatContext(): null {
+    return null;
+  },
+  getSuspenseContentFormatContext(): null {
+    return null;
+  },
+
+  getViewTransitionFormatContext(): null {
+    return null;
+  },
+
+  resetResumableState(): void {},
+  completeResumableState(): void {},
+
+  pushTextInstance(
+    target: Array<Uint8Array>,
+    text: string,
+    renderState: RenderState,
+    textEmbedded: boolean,
+  ): boolean {
+    const textInstance: TextInstance = {
+      text,
+      hidden: false,
+    };
+    target.push(Buffer.from(JSON.stringify(textInstance), 'utf8'), POP);
+    return false;
+  },
+  pushStartInstance(
+    target: Array<Uint8Array>,
+    type: string,
+    props: Object,
+  ): ReactNodeList {
+    const instance: Instance = {
+      type: type,
+      children: [],
+      prop: props.prop,
+      hidden: false,
+    };
+    target.push(Buffer.from(JSON.stringify(instance), 'utf8'));
+    return props.children;
+  },
+
+  pushEndInstance(
+    target: Array<Uint8Array>,
+    type: string,
+    props: Object,
+  ): void {
+    target.push(POP);
+  },
+
+  // This is a noop in ReactNoop
+  pushSegmentFinale(
+    target: Array<Uint8Array>,
+    renderState: RenderState,
+    lastPushedText: boolean,
+    textEmbedded: boolean,
+  ): void {},
+
+  writeCompletedRoot(
+    destination: Destination,
+    resumableState: ResumableState,
+    renderState: RenderState,
+    isComplete: boolean,
+  ): boolean {
+    return true;
+  },
+
+  writePlaceholder(
+    destination: Destination,
+    renderState: RenderState,
+    id: number,
+  ): boolean {
+    const parent = destination.stack[destination.stack.length - 1];
+    destination.placeholders.set(id, {
+      parent: parent,
+      index: parent.children.length,
+    });
+  },
+
+  pushStartActivityBoundary(
+    target: Array<Uint8Array>,
+    renderState: RenderState,
+  ): void {
+    const activityInstance: ActivityInstance = {
+      children: [],
+    };
+    target.push(Buffer.from(JSON.stringify(activityInstance), 'utf8'));
+  },
+
+  pushEndActivityBoundary(
+    target: Array<Uint8Array>,
+    renderState: RenderState,
+  ): void {
+    target.push(POP);
+  },
+
+  writeStartCompletedSuspenseBoundary(
+    destination: Destination,
+    renderState: RenderState,
+  ): boolean {
+    const suspenseInstance: SuspenseInstance = {
+      state: 'complete',
+      children: [],
+    };
+    const parent = destination.stack[destination.stack.length - 1];
+    parent.children.push(suspenseInstance);
+    destination.stack.push(suspenseInstance);
+    return true;
+  },
+  writeStartPendingSuspenseBoundary(
+    destination: Destination,
+    renderState: RenderState,
+  ): boolean {
+    const suspenseInstance: SuspenseInstance = {
+      state: 'pending',
+      children: [],
+    };
+    const parent = destination.stack[destination.stack.length - 1];
+    parent.children.push(suspenseInstance);
+    destination.stack.push(suspenseInstance);
+    return true;
+  },
+  writeStartClientRenderedSuspenseBoundary(
+    destination: Destination,
+    renderState: RenderState,
+  ): boolean {
+    const suspenseInstance: SuspenseInstance = {
+      state: 'client-render',
+      children: [],
+    };
+    const parent = destination.stack[destination.stack.length - 1];
+    parent.children.push(suspenseInstance);
+    destination.stack.push(suspenseInstance);
+    return true;
+  },
+  writeEndCompletedSuspenseBoundary(destination: Destination): boolean {
+    destination.stack.pop();
+    return true;
+  },
+  writeEndPendingSuspenseBoundary(destination: Destination): boolean {
+    destination.stack.pop();
+    return true;
+  },
+  writeEndClientRenderedSuspenseBoundary(destination: Destination): boolean {
+    destination.stack.pop();
+    return true;
+  },
+
+  writeStartSegment(
+    destination: Destination,
+    renderState: RenderState,
+    formatContext: null,
+    id: number,
+  ): boolean {
+    const segment = {
+      children: [],
+    };
+    destination.segments.set(id, segment);
+    if (destination.stack.length > 0) {
+      throw new Error('Segments are only expected at the root of the stack.');
+    }
+    destination.stack.push(segment);
+    return true;
+  },
+  writeEndSegment(destination: Destination, formatContext: null): boolean {
+    destination.stack.pop();
+    return true;
+  },
+
+  writeCompletedSegmentInstruction(
+    destination: Destination,
+    renderState: RenderState,
+    contentSegmentID: number,
+  ): boolean {
+    const segment = destination.segments.get(contentSegmentID);
+    if (!segment) {
+      throw new Error('Missing segment.');
+    }
+    const placeholder = destination.placeholders.get(contentSegmentID);
+    if (!placeholder) {
+      throw new Error('Missing placeholder.');
+    }
+    placeholder.parent.children.splice(
+      placeholder.index,
+      0,
+      ...segment.children,
+    );
+    return true;
+  },
+
+  writeCompletedBoundaryInstruction(
+    destination: Destination,
+    renderState: RenderState,
+    boundary: SuspenseInstance,
+    contentSegmentID: number,
+  ): boolean {
+    const segment = destination.segments.get(contentSegmentID);
+    if (!segment) {
+      throw new Error('Missing segment.');
+    }
+    boundary.children = segment.children;
+    boundary.state = 'complete';
+    return true;
+  },
+
+  writeClientRenderBoundaryInstruction(
+    destination: Destination,
+    renderState: RenderState,
+    boundary: SuspenseInstance,
+  ): boolean {
+    boundary.status = 'client-render';
+    return true;
+  },
+
+  writePreambleStart() {},
+  writePreambleEnd() {},
+  writeHoistables() {},
+  writeHoistablesForBoundary() {},
+  writePostamble() {},
+  hoistHoistables(parent: HoistableState, child: HoistableState) {},
+  hasSuspenseyContent(hoistableState: HoistableState): boolean {
+    return false;
+  },
+  createHoistableState(): HoistableState {
+    return null;
+  },
+  emitEarlyPreloads() {},
+  createPreambleState(): PreambleState {
+    return null;
+  },
+  canHavePreamble() {
+    return false;
+  },
+  hoistPreambleState() {},
+  isPreambleReady() {
+    return true;
+  },
+  isPreambleContext() {
+    return false;
+  },
+});
+
+type Options = {
+  progressiveChunkSize?: number,
+  onShellReady?: () => void,
+  onAllReady?: () => void,
+  onError?: (error: mixed) => ?string,
+};
+
+function render(children: React$Element<any>, options?: Options): Destination {
+  const destination: Destination = {
+    root: null,
+    placeholders: new Map(),
+    segments: new Map(),
+    stack: [],
+    abort() {
+      ReactNoopServer.abort(request);
+    },
+  };
+  const request = ReactNoopServer.createRequest(
+    children,
+    null,
+    null,
+    null,
+    options ? options.progressiveChunkSize : undefined,
+    options ? options.onError : undefined,
+    options ? options.onAllReady : undefined,
+    options ? options.onShellReady : undefined,
+  );
+  ReactNoopServer.startWork(request);
+  ReactNoopServer.startFlowing(request, destination);
+  return destination;
+}
+
+export {render};
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
new file mode 100644
index 00000000000..79d1e1a8c9b
--- /dev/null
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -0,0 +1,1604 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Fiber,
+  TransitionTracingCallbacks,
+} from 'react-reconciler/src/ReactInternalTypes';
+import type {UpdateQueue} from 'react-reconciler/src/ReactFiberClassUpdateQueue';
+import type {ReactNodeList} from 'shared/ReactTypes';
+import type {RootTag} from 'react-reconciler/src/ReactRootTags';
+import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+
+import * as Scheduler from 'scheduler/unstable_mock';
+import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import isArray from 'shared/isArray';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
+import {
+  NoEventPriority,
+  DiscreteEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+  ConcurrentRoot,
+  LegacyRoot,
+} from 'react-reconciler/constants';
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import ReactVersion from 'shared/ReactVersion';
+
+type Container = {
+  rootID: string,
+  children: Array<Instance | TextInstance>,
+  pendingChildren: Array<Instance | TextInstance>,
+  ...
+};
+type Props = {
+  prop: any,
+  hidden: boolean,
+  children?: mixed,
+  bottom?: null | number,
+  left?: null | number,
+  right?: null | number,
+  top?: null | number,
+  src?: string,
+  ...
+};
+type Instance = {
+  type: string,
+  id: number,
+  parent: number,
+  children: Array<Instance | TextInstance>,
+  text: string | null,
+  prop: any,
+  hidden: boolean,
+  context: HostContext,
+};
+type TextInstance = {
+  text: string,
+  id: number,
+  parent: number,
+  hidden: boolean,
+  context: HostContext,
+};
+type HostContext = Object;
+type CreateRootOptions = {
+  unstable_transitionCallbacks?: TransitionTracingCallbacks,
+  onUncaughtError?: (error: mixed, errorInfo: {componentStack: string}) => void,
+  onCaughtError?: (error: mixed, errorInfo: {componentStack: string}) => void,
+  onDefaultTransitionIndicator?: () => void | (() => void),
+  ...
+};
+type InstanceMeasurement = null;
+
+type SuspenseyCommitSubscription = {
+  pendingCount: number,
+  commit: null | (() => void),
+};
+
+export opaque type SuspendedState = SuspenseyCommitSubscription;
+
+export type TransitionStatus = mixed;
+
+export type FormInstance = Instance;
+
+export type RunningViewTransition = null;
+
+export type ViewTransitionInstance = null | {name: string, ...};
+
+export type GestureTimeline = null;
+
+const NO_CONTEXT = {};
+const UPPERCASE_CONTEXT = {};
+if (__DEV__) {
+  Object.freeze(NO_CONTEXT);
+}
+
+function createReactNoop(reconciler: Function, useMutation: boolean) {
+  let instanceCounter = 0;
+  let hostUpdateCounter = 0;
+  let hostCloneCounter = 0;
+
+  function appendChildToContainerOrInstance(
+    parentInstance: Container | Instance,
+    child: Instance | TextInstance,
+  ): void {
+    const prevParent = child.parent;
+    if (prevParent !== -1 && prevParent !== parentInstance.id) {
+      throw new Error('Reparenting is not allowed');
+    }
+    child.parent = parentInstance.id;
+    const index = parentInstance.children.indexOf(child);
+    if (index !== -1) {
+      parentInstance.children.splice(index, 1);
+    }
+    parentInstance.children.push(child);
+  }
+
+  function appendChildToContainer(
+    parentInstance: Container,
+    child: Instance | TextInstance,
+  ): void {
+    if (typeof parentInstance.rootID !== 'string') {
+      // Some calls to this aren't typesafe.
+      // This helps surface mistakes in tests.
+      throw new Error(
+        'appendChildToContainer() first argument is not a container.',
+      );
+    }
+    appendChildToContainerOrInstance(parentInstance, child);
+  }
+
+  function appendChild(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+  ): void {
+    if (typeof (parentInstance: any).rootID === 'string') {
+      // Some calls to this aren't typesafe.
+      // This helps surface mistakes in tests.
+      throw new Error('appendChild() first argument is not an instance.');
+    }
+    appendChildToContainerOrInstance(parentInstance, child);
+  }
+
+  function insertInContainerOrInstanceBefore(
+    parentInstance: Container | Instance,
+    child: Instance | TextInstance,
+    beforeChild: Instance | TextInstance,
+  ): void {
+    const index = parentInstance.children.indexOf(child);
+    if (index !== -1) {
+      parentInstance.children.splice(index, 1);
+    }
+    const beforeIndex = parentInstance.children.indexOf(beforeChild);
+    if (beforeIndex === -1) {
+      throw new Error('This child does not exist.');
+    }
+    parentInstance.children.splice(beforeIndex, 0, child);
+  }
+
+  function insertInContainerBefore(
+    parentInstance: Container,
+    child: Instance | TextInstance,
+    beforeChild: Instance | TextInstance,
+  ) {
+    if (typeof parentInstance.rootID !== 'string') {
+      // Some calls to this aren't typesafe.
+      // This helps surface mistakes in tests.
+      throw new Error(
+        'insertInContainerBefore() first argument is not a container.',
+      );
+    }
+    insertInContainerOrInstanceBefore(parentInstance, child, beforeChild);
+  }
+
+  function insertBefore(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+    beforeChild: Instance | TextInstance,
+  ) {
+    if (typeof (parentInstance: any).rootID === 'string') {
+      // Some calls to this aren't typesafe.
+      // This helps surface mistakes in tests.
+      throw new Error('insertBefore() first argument is not an instance.');
+    }
+    insertInContainerOrInstanceBefore(parentInstance, child, beforeChild);
+  }
+
+  function clearContainer(container: Container): void {
+    container.children.splice(0);
+  }
+
+  function removeChildFromContainerOrInstance(
+    parentInstance: Container | Instance,
+    child: Instance | TextInstance,
+  ): void {
+    const index = parentInstance.children.indexOf(child);
+    if (index === -1) {
+      throw new Error('This child does not exist.');
+    }
+    parentInstance.children.splice(index, 1);
+  }
+
+  function removeChildFromContainer(
+    parentInstance: Container,
+    child: Instance | TextInstance,
+  ): void {
+    if (typeof parentInstance.rootID !== 'string') {
+      // Some calls to this aren't typesafe.
+      // This helps surface mistakes in tests.
+      throw new Error(
+        'removeChildFromContainer() first argument is not a container.',
+      );
+    }
+    removeChildFromContainerOrInstance(parentInstance, child);
+  }
+
+  function removeChild(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+  ): void {
+    if (typeof (parentInstance: any).rootID === 'string') {
+      // Some calls to this aren't typesafe.
+      // This helps surface mistakes in tests.
+      throw new Error('removeChild() first argument is not an instance.');
+    }
+    removeChildFromContainerOrInstance(parentInstance, child);
+  }
+
+  function cloneInstance(
+    instance: Instance,
+    type: string,
+    oldProps: Props,
+    newProps: Props,
+    keepChildren: boolean,
+    children: ?$ReadOnlyArray<Instance>,
+  ): Instance {
+    if (__DEV__) {
+      checkPropStringCoercion(newProps.children, 'children');
+    }
+    const clone = {
+      id: instance.id,
+      type: type,
+      parent: instance.parent,
+      children: keepChildren ? instance.children : (children ?? []),
+      text: shouldSetTextContent(type, newProps)
+        ? computeText((newProps.children: any) + '', instance.context)
+        : null,
+      prop: newProps.prop,
+      hidden: !!newProps.hidden,
+      context: instance.context,
+    };
+
+    if (type === 'suspensey-thing' && typeof newProps.src === 'string') {
+      clone.src = newProps.src;
+    }
+
+    Object.defineProperty(clone, 'id', {
+      value: clone.id,
+      enumerable: false,
+    });
+    Object.defineProperty(clone, 'parent', {
+      value: clone.parent,
+      enumerable: false,
+    });
+    Object.defineProperty(clone, 'text', {
+      value: clone.text,
+      enumerable: false,
+    });
+    Object.defineProperty(clone, 'context', {
+      value: clone.context,
+      enumerable: false,
+    });
+    hostCloneCounter++;
+    return clone;
+  }
+
+  function shouldSetTextContent(type: string, props: Props): boolean {
+    if (type === 'errorInBeginPhase') {
+      throw new Error('Error in host config.');
+    }
+    return (
+      typeof props.children === 'string' ||
+      typeof props.children === 'number' ||
+      typeof props.children === 'bigint'
+    );
+  }
+
+  function computeText(rawText, hostContext) {
+    return hostContext === UPPERCASE_CONTEXT ? rawText.toUpperCase() : rawText;
+  }
+
+  type SuspenseyThingRecord = {
+    status: 'pending' | 'fulfilled',
+    subscriptions: Array<SuspenseyCommitSubscription> | null,
+  };
+
+  let suspenseyThingCache: Map<
+    SuspenseyThingRecord,
+    'pending' | 'fulfilled',
+  > | null = null;
+
+  function startSuspendingCommit(): SuspendedState {
+    // Represents a subscription for all the suspensey things that block a
+    // particular commit. Once they've all loaded, the commit phase can proceed.
+    return {
+      pendingCount: 0,
+      commit: null,
+    };
+  }
+
+  function suspendInstance(
+    state: SuspendedState,
+    instance: Instance,
+    type: string,
+    props: Props,
+  ): void {
+    const src = props.src;
+    if (type === 'suspensey-thing' && typeof src === 'string') {
+      // Attach a listener to the suspensey thing and create a subscription
+      // object that uses reference counting to track when all the suspensey
+      // things have loaded.
+      const record = suspenseyThingCache.get(src);
+      if (record === undefined) {
+        throw new Error('Could not find record for key.');
+      }
+      if (record.status === 'fulfilled') {
+        // Already loaded.
+      } else if (record.status === 'pending') {
+        state.pendingCount++;
+        // Stash the subscription on the record. In `resolveSuspenseyThing`,
+        // we'll use this fire the commit once all the things have loaded.
+        if (record.subscriptions === null) {
+          record.subscriptions = [];
+        }
+        record.subscriptions.push(state);
+      }
+    } else {
+      throw new Error(
+        'Did not expect this host component to be visited when suspending ' +
+          'the commit. Did you check the SuspendCommit flag?',
+      );
+    }
+  }
+
+  function waitForCommitToBeReady(
+    state: SuspendedState,
+    timeoutOffset: number,
+  ): ((commit: () => mixed) => () => void) | null {
+    if (state.pendingCount > 0) {
+      return (commit: () => void) => {
+        state.commit = commit;
+        const cancelCommit = () => {
+          state.commit = null;
+        };
+        return cancelCommit;
+      };
+    }
+    return null;
+  }
+
+  const sharedHostConfig = {
+    rendererVersion: ReactVersion,
+    rendererPackageName: 'react-noop',
+
+    supportsSingletons: false,
+
+    getRootHostContext() {
+      return NO_CONTEXT;
+    },
+
+    getChildHostContext(parentHostContext: HostContext, type: string) {
+      if (type === 'offscreen') {
+        return parentHostContext;
+      }
+      if (type === 'uppercase') {
+        return UPPERCASE_CONTEXT;
+      }
+      return NO_CONTEXT;
+    },
+
+    getPublicInstance(instance) {
+      return instance;
+    },
+
+    createInstance(
+      type: string,
+      props: Props,
+      rootContainerInstance: Container,
+      hostContext: HostContext,
+      internalInstanceHandle: Object,
+    ): Instance {
+      if (type === 'errorInCompletePhase') {
+        throw new Error('Error in host config.');
+      }
+      if (__DEV__) {
+        // The `if` statement here prevents auto-disabling of the safe coercion
+        // ESLint rule, so we must manually disable it below.
+        if (shouldSetTextContent(type, props)) {
+          checkPropStringCoercion(props.children, 'children');
+        }
+      }
+      const inst = {
+        id: instanceCounter++,
+        type: type,
+        children: [],
+        parent: -1,
+        text: shouldSetTextContent(type, props)
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            computeText((props.children: any) + '', hostContext)
+          : null,
+        prop: props.prop,
+        hidden: !!props.hidden,
+        context: hostContext,
+      };
+
+      if (type === 'suspensey-thing' && typeof props.src === 'string') {
+        inst.src = props.src;
+      }
+
+      // Hide from unit tests
+      Object.defineProperty(inst, 'id', {value: inst.id, enumerable: false});
+      Object.defineProperty(inst, 'parent', {
+        value: inst.parent,
+        enumerable: false,
+      });
+      Object.defineProperty(inst, 'text', {
+        value: inst.text,
+        enumerable: false,
+      });
+      Object.defineProperty(inst, 'context', {
+        value: inst.context,
+        enumerable: false,
+      });
+      Object.defineProperty(inst, 'fiber', {
+        value: internalInstanceHandle,
+        enumerable: false,
+      });
+      return inst;
+    },
+
+    cloneMutableInstance(instance: Instance, keepChildren: boolean): Instance {
+      throw new Error('Not yet implemented.');
+    },
+
+    appendInitialChild(
+      parentInstance: Instance,
+      child: Instance | TextInstance,
+    ): void {
+      const prevParent = child.parent;
+      if (prevParent !== -1 && prevParent !== parentInstance.id) {
+        throw new Error('Reparenting is not allowed');
+      }
+      child.parent = parentInstance.id;
+      parentInstance.children.push(child);
+    },
+
+    finalizeInitialChildren(
+      domElement: Instance,
+      type: string,
+      props: Props,
+    ): boolean {
+      return false;
+    },
+
+    shouldSetTextContent,
+
+    createTextInstance(
+      text: string,
+      rootContainerInstance: Container,
+      hostContext: Object,
+      internalInstanceHandle: Object,
+    ): TextInstance {
+      if (hostContext === UPPERCASE_CONTEXT) {
+        text = text.toUpperCase();
+      }
+      const inst = {
+        text: text,
+        id: instanceCounter++,
+        parent: -1,
+        hidden: false,
+        context: hostContext,
+      };
+      // Hide from unit tests
+      Object.defineProperty(inst, 'id', {value: inst.id, enumerable: false});
+      Object.defineProperty(inst, 'parent', {
+        value: inst.parent,
+        enumerable: false,
+      });
+      Object.defineProperty(inst, 'context', {
+        value: inst.context,
+        enumerable: false,
+      });
+      return inst;
+    },
+
+    cloneMutableTextInstance(textInstance: TextInstance): TextInstance {
+      throw new Error('Not yet implemented.');
+    },
+
+    createFragmentInstance(fragmentFiber) {
+      return null;
+    },
+
+    updateFragmentInstanceFiber(fragmentFiber, fragmentInstance) {
+      // Noop
+    },
+
+    commitNewChildToFragmentInstance(child, fragmentInstance) {
+      // Noop
+    },
+
+    deleteChildFromFragmentInstance(child, fragmentInstance) {
+      // Noop
+    },
+
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    noTimeout: -1,
+
+    supportsMicrotasks: true,
+    scheduleMicrotask:
+      typeof queueMicrotask === 'function'
+        ? queueMicrotask
+        : typeof Promise !== 'undefined'
+          ? callback =>
+              Promise.resolve(null)
+                .then(callback)
+                .catch(error => {
+                  setTimeout(() => {
+                    throw error;
+                  });
+                })
+          : setTimeout,
+
+    prepareForCommit(): null | Object {
+      return null;
+    },
+
+    resetAfterCommit(): void {},
+
+    setCurrentUpdatePriority,
+    getCurrentUpdatePriority,
+
+    resolveUpdatePriority() {
+      if (currentUpdatePriority !== NoEventPriority) {
+        return currentUpdatePriority;
+      }
+      return currentEventPriority;
+    },
+
+    trackSchedulerEvent(): void {},
+
+    resolveEventType(): null | string {
+      return null;
+    },
+
+    resolveEventTimeStamp(): number {
+      return -1.1;
+    },
+
+    shouldAttemptEagerTransition(): boolean {
+      return false;
+    },
+
+    now: Scheduler.unstable_now,
+
+    isPrimaryRenderer: true,
+    warnsIfNotActing: true,
+    supportsHydration: false,
+
+    getInstanceFromNode() {
+      throw new Error('Not yet implemented.');
+    },
+
+    beforeActiveInstanceBlur() {
+      // NO-OP
+    },
+
+    afterActiveInstanceBlur() {
+      // NO-OP
+    },
+
+    preparePortalMount() {
+      // NO-OP
+    },
+
+    prepareScopeUpdate() {},
+
+    getInstanceFromScope() {
+      throw new Error('Not yet implemented.');
+    },
+
+    detachDeletedInstance() {},
+
+    logRecoverableError() {
+      // no-op
+    },
+
+    requestPostPaintCallback(callback) {
+      const endTime = Scheduler.unstable_now();
+      callback(endTime);
+    },
+
+    maySuspendCommit(type: string, props: Props): boolean {
+      // Asks whether it's possible for this combination of type and props
+      // to ever need to suspend. This is different from asking whether it's
+      // currently ready because even if it's ready now, it might get purged
+      // from the cache later.
+      return type === 'suspensey-thing' && typeof props.src === 'string';
+    },
+
+    maySuspendCommitOnUpdate(
+      type: string,
+      oldProps: Props,
+      newProps: Props,
+    ): boolean {
+      // Asks whether it's possible for this combination of type and props
+      // to ever need to suspend. This is different from asking whether it's
+      // currently ready because even if it's ready now, it might get purged
+      // from the cache later.
+      return (
+        type === 'suspensey-thing' &&
+        typeof newProps.src === 'string' &&
+        newProps.src !== oldProps.src
+      );
+    },
+
+    maySuspendCommitInSyncRender(type: string, props: Props): boolean {
+      return true;
+    },
+
+    mayResourceSuspendCommit(resource: mixed): boolean {
+      throw new Error(
+        'Resources are not implemented for React Noop yet. This method should not be called',
+      );
+    },
+
+    preloadInstance(instance: Instance, type: string, props: Props): boolean {
+      if (type !== 'suspensey-thing' || typeof props.src !== 'string') {
+        throw new Error('Attempted to preload unexpected instance: ' + type);
+      }
+
+      // In addition to preloading an instance, this method asks whether the
+      // instance is ready to be committed. If it's not, React may yield to the
+      // main thread and ask again. It's possible a load event will fire in
+      // between, in which case we can avoid showing a fallback.
+      if (suspenseyThingCache === null) {
+        suspenseyThingCache = new Map();
+      }
+      const record = suspenseyThingCache.get(props.src);
+      if (record === undefined) {
+        const newRecord: SuspenseyThingRecord = {
+          status: 'pending',
+          subscriptions: null,
+        };
+        suspenseyThingCache.set(props.src, newRecord);
+        const onLoadStart = props.onLoadStart;
+        if (typeof onLoadStart === 'function') {
+          onLoadStart();
+        }
+        return false;
+      } else {
+        return record.status === 'fulfilled';
+      }
+    },
+
+    preloadResource(resource: mixed): number {
+      throw new Error(
+        'Resources are not implemented for React Noop yet. This method should not be called',
+      );
+    },
+
+    startSuspendingCommit,
+    suspendInstance,
+
+    suspendResource(state: SuspendedState, resource: mixed): void {
+      throw new Error(
+        'Resources are not implemented for React Noop yet. This method should not be called',
+      );
+    },
+
+    suspendOnActiveViewTransition(
+      state: SuspendedState,
+      container: Container,
+    ): void {
+      // Not implemented
+    },
+
+    waitForCommitToBeReady,
+
+    getSuspendedCommitReason(
+      state: SuspendedState,
+      rootContainer: Container,
+    ): null | string {
+      return null;
+    },
+
+    NotPendingTransition: (null: TransitionStatus),
+
+    resetFormInstance(form: Instance) {},
+
+    bindToConsole(methodName, args, badgeName) {
+      return Function.prototype.bind.apply(
+        // eslint-disable-next-line react-internal/no-production-logging
+        console[methodName],
+        [console].concat(args),
+      );
+    },
+  };
+
+  const hostConfig = useMutation
+    ? {
+        ...sharedHostConfig,
+
+        supportsMutation: true,
+        supportsPersistence: false,
+
+        commitMount(instance: Instance, type: string, newProps: Props): void {
+          // Noop
+        },
+
+        commitUpdate(
+          instance: Instance,
+          type: string,
+          oldProps: Props,
+          newProps: Props,
+        ): void {
+          if (oldProps === null) {
+            throw new Error('Should have old props');
+          }
+          hostUpdateCounter++;
+          instance.prop = newProps.prop;
+          instance.hidden = !!newProps.hidden;
+
+          if (type === 'suspensey-thing' && typeof newProps.src === 'string') {
+            instance.src = newProps.src;
+          }
+
+          if (shouldSetTextContent(type, newProps)) {
+            if (__DEV__) {
+              checkPropStringCoercion(newProps.children, 'children');
+            }
+            instance.text = computeText(
+              (newProps.children: any) + '',
+              instance.context,
+            );
+          }
+        },
+
+        commitTextUpdate(
+          textInstance: TextInstance,
+          oldText: string,
+          newText: string,
+        ): void {
+          hostUpdateCounter++;
+          textInstance.text = computeText(newText, textInstance.context);
+        },
+
+        appendChild,
+        appendChildToContainer,
+        insertBefore,
+        insertInContainerBefore,
+        removeChild,
+        removeChildFromContainer,
+        clearContainer,
+
+        hideInstance(instance: Instance): void {
+          instance.hidden = true;
+        },
+
+        hideTextInstance(textInstance: TextInstance): void {
+          textInstance.hidden = true;
+        },
+
+        unhideInstance(instance: Instance, props: Props): void {
+          if (!props.hidden) {
+            instance.hidden = false;
+          }
+        },
+
+        unhideTextInstance(textInstance: TextInstance, text: string): void {
+          textInstance.hidden = false;
+        },
+
+        applyViewTransitionName(
+          instance: Instance,
+          name: string,
+          className: ?string,
+        ): void {},
+
+        restoreViewTransitionName(instance: Instance, props: Props): void {},
+
+        cancelViewTransitionName(
+          instance: Instance,
+          name: string,
+          props: Props,
+        ): void {},
+
+        cancelRootViewTransitionName(rootContainer: Container): void {},
+
+        restoreRootViewTransitionName(rootContainer: Container): void {},
+
+        cloneRootViewTransitionContainer(rootContainer: Container): Instance {
+          throw new Error('Not yet implemented.');
+        },
+
+        removeRootViewTransitionClone(
+          rootContainer: Container,
+          clone: Instance,
+        ): void {
+          throw new Error('Not implemented.');
+        },
+
+        measureInstance(instance: Instance): InstanceMeasurement {
+          return null;
+        },
+
+        measureClonedInstance(instance: Instance): InstanceMeasurement {
+          return null;
+        },
+
+        wasInstanceInViewport(measurement: InstanceMeasurement): boolean {
+          return true;
+        },
+
+        hasInstanceChanged(
+          oldMeasurement: InstanceMeasurement,
+          newMeasurement: InstanceMeasurement,
+        ): boolean {
+          return false;
+        },
+
+        hasInstanceAffectedParent(
+          oldMeasurement: InstanceMeasurement,
+          newMeasurement: InstanceMeasurement,
+        ): boolean {
+          return false;
+        },
+
+        startViewTransition(
+          rootContainer: Container,
+          transitionTypes: null | TransitionTypes,
+          mutationCallback: () => void,
+          layoutCallback: () => void,
+          afterMutationCallback: () => void,
+          spawnedWorkCallback: () => void,
+          passiveCallback: () => mixed,
+          errorCallback: mixed => void,
+          blockedCallback: string => void, // Profiling-only
+          finishedAnimation: () => void, // Profiling-only
+        ): null | RunningViewTransition {
+          mutationCallback();
+          layoutCallback();
+          // Skip afterMutationCallback(). We don't need it since we're not animating.
+          spawnedWorkCallback();
+          // Skip passiveCallback(). Spawned work will schedule a task.
+          return null;
+        },
+
+        startGestureTransition(
+          rootContainer: Container,
+          timeline: GestureTimeline,
+          rangeStart: number,
+          rangeEnd: number,
+          transitionTypes: null | TransitionTypes,
+          mutationCallback: () => void,
+          animateCallback: () => void,
+          errorCallback: mixed => void,
+        ): null | RunningViewTransition {
+          mutationCallback();
+          animateCallback();
+          return null;
+        },
+
+        stopViewTransition(transition: RunningViewTransition) {},
+
+        addViewTransitionFinishedListener(
+          transition: RunningViewTransition,
+          callback: () => void,
+        ) {
+          callback();
+        },
+
+        createViewTransitionInstance(name: string): ViewTransitionInstance {
+          return null;
+        },
+
+        getCurrentGestureOffset(provider: GestureTimeline): number {
+          return 0;
+        },
+
+        resetTextContent(instance: Instance): void {
+          instance.text = null;
+        },
+      }
+    : {
+        ...sharedHostConfig,
+        supportsMutation: false,
+        supportsPersistence: true,
+
+        cloneInstance,
+        clearContainer,
+
+        createContainerChildSet(): Array<Instance | TextInstance> {
+          return [];
+        },
+
+        appendChildToContainerChildSet(
+          childSet: Array<Instance | TextInstance>,
+          child: Instance | TextInstance,
+        ): void {
+          childSet.push(child);
+        },
+
+        finalizeContainerChildren(
+          container: Container,
+          newChildren: Array<Instance | TextInstance>,
+        ): void {
+          container.pendingChildren = newChildren;
+          if (
+            newChildren.length === 1 &&
+            newChildren[0].text === 'Error when completing root'
+          ) {
+            // Trigger an error for testing purposes
+            throw Error('Error when completing root');
+          }
+        },
+
+        replaceContainerChildren(
+          container: Container,
+          newChildren: Array<Instance | TextInstance>,
+        ): void {
+          container.children = newChildren;
+        },
+
+        cloneHiddenInstance(
+          instance: Instance,
+          type: string,
+          props: Props,
+        ): Instance {
+          const clone = cloneInstance(instance, type, props, props, true, null);
+          clone.hidden = true;
+          return clone;
+        },
+
+        cloneHiddenTextInstance(
+          instance: TextInstance,
+          text: string,
+        ): TextInstance {
+          const clone = {
+            text: instance.text,
+            id: instance.id,
+            parent: instance.parent,
+            hidden: true,
+            context: instance.context,
+          };
+          // Hide from unit tests
+          Object.defineProperty(clone, 'id', {
+            value: clone.id,
+            enumerable: false,
+          });
+          Object.defineProperty(clone, 'parent', {
+            value: clone.parent,
+            enumerable: false,
+          });
+          Object.defineProperty(clone, 'context', {
+            value: clone.context,
+            enumerable: false,
+          });
+          return clone;
+        },
+      };
+
+  const NoopRenderer = reconciler(hostConfig);
+
+  const rootContainers = new Map();
+  const roots = new Map();
+  const DEFAULT_ROOT_ID = '<default>';
+
+  let currentUpdatePriority = NoEventPriority;
+  function setCurrentUpdatePriority(newPriority: EventPriority): void {
+    currentUpdatePriority = newPriority;
+  }
+
+  function getCurrentUpdatePriority(): EventPriority {
+    return currentUpdatePriority;
+  }
+
+  let currentEventPriority = DefaultEventPriority;
+
+  function createJSXElementForTestComparison(type, props) {
+    if (__DEV__) {
+      const element = {
+        type: type,
+        $$typeof: REACT_ELEMENT_TYPE,
+        key: null,
+        props: props,
+        _owner: null,
+        _store: __DEV__ ? {} : undefined,
+      };
+      Object.defineProperty(element, 'ref', {
+        enumerable: false,
+        value: null,
+      });
+      return element;
+    } else {
+      return {
+        $$typeof: REACT_ELEMENT_TYPE,
+        type: type,
+        key: null,
+        ref: null,
+        props: props,
+      };
+    }
+  }
+
+  function childToJSX(child, text) {
+    if (text !== null) {
+      return text;
+    }
+    if (child === null) {
+      return null;
+    }
+    if (typeof child === 'string') {
+      return child;
+    }
+    if (isArray(child)) {
+      if (child.length === 0) {
+        return null;
+      }
+      if (child.length === 1) {
+        return childToJSX(child[0], null);
+      }
+      const children = child.map(c => childToJSX(c, null));
+      if (
+        children.every(
+          c =>
+            typeof c === 'string' ||
+            typeof c === 'number' ||
+            typeof c === 'bigint',
+        )
+      ) {
+        return children.join('');
+      }
+      return children;
+    }
+    if (isArray(child.children)) {
+      // This is an instance.
+      const instance: Instance = (child: any);
+      const children = childToJSX(instance.children, instance.text);
+      const props = ({prop: instance.prop}: any);
+      if (instance.hidden) {
+        props.hidden = true;
+      }
+      if (instance.src) {
+        props.src = instance.src;
+      }
+      if (children !== null) {
+        props.children = children;
+      }
+      return createJSXElementForTestComparison(instance.type, props);
+    }
+    // This is a text instance
+    const textInstance: TextInstance = (child: any);
+    if (textInstance.hidden) {
+      return '';
+    }
+    return textInstance.text;
+  }
+
+  function getChildren(root) {
+    if (root) {
+      return root.children;
+    } else {
+      return null;
+    }
+  }
+
+  function getPendingChildren(root) {
+    if (root) {
+      return root.children;
+    } else {
+      return null;
+    }
+  }
+
+  function getChildrenAsJSX(root) {
+    const children = childToJSX(getChildren(root), null);
+    if (children === null) {
+      return null;
+    }
+    if (isArray(children)) {
+      return createJSXElementForTestComparison(REACT_FRAGMENT_TYPE, {children});
+    }
+    return children;
+  }
+
+  function getPendingChildrenAsJSX(root) {
+    const children = childToJSX(getChildren(root), null);
+    if (children === null) {
+      return null;
+    }
+    if (isArray(children)) {
+      return createJSXElementForTestComparison(REACT_FRAGMENT_TYPE, {children});
+    }
+    return children;
+  }
+
+  function flushSync<R>(fn: () => R): R {
+    if (__DEV__) {
+      if (NoopRenderer.isAlreadyRendering()) {
+        console.error(
+          'flushSync was called from inside a lifecycle method. React cannot ' +
+            'flush when React is already rendering. Consider moving this call to ' +
+            'a scheduler task or micro task.',
+        );
+      }
+    }
+    if (disableLegacyMode) {
+      const previousTransition = ReactSharedInternals.T;
+      const preivousEventPriority = currentEventPriority;
+      try {
+        ReactSharedInternals.T = null;
+        currentEventPriority = DiscreteEventPriority;
+        if (fn) {
+          return fn();
+        } else {
+          return undefined;
+        }
+      } finally {
+        ReactSharedInternals.T = previousTransition;
+        currentEventPriority = preivousEventPriority;
+        NoopRenderer.flushSyncWork();
+      }
+    } else {
+      return NoopRenderer.flushSyncFromReconciler(fn);
+    }
+  }
+
+  function onRecoverableError(error) {
+    // TODO: Turn this on once tests are fixed
+    // console.error(error);
+  }
+  function onDefaultTransitionIndicator(): void | (() => void) {}
+
+  let idCounter = 0;
+
+  const ReactNoop = {
+    _Scheduler: Scheduler,
+
+    getChildren(rootID: string = DEFAULT_ROOT_ID) {
+      throw new Error(
+        'No longer supported due to bad performance when used with `expect()`. ' +
+          'Use `ReactNoop.getChildrenAsJSX()` instead or, if you really need to, `dangerouslyGetChildren` after you carefully considered the warning in its JSDOC.',
+      );
+    },
+
+    getPendingChildren(rootID: string = DEFAULT_ROOT_ID) {
+      throw new Error(
+        'No longer supported due to bad performance when used with `expect()`. ' +
+          'Use `ReactNoop.getPendingChildrenAsJSX()` instead or, if you really need to, `dangerouslyGetPendingChildren` after you carefully considered the warning in its JSDOC.',
+      );
+    },
+
+    /**
+     * Prefer using `getChildrenAsJSX`.
+     * Using the returned children in `.toEqual` has very poor performance on mismatch due to deep equality checking of fiber structures.
+     * Make sure you deeply remove enumerable properties before passing it to `.toEqual`, or, better, use `getChildrenAsJSX` or `toMatchRenderedOutput`.
+     */
+    dangerouslyGetChildren(rootID: string = DEFAULT_ROOT_ID) {
+      const container = rootContainers.get(rootID);
+      return getChildren(container);
+    },
+
+    /**
+     * Prefer using `getPendingChildrenAsJSX`.
+     * Using the returned children in `.toEqual` has very poor performance on mismatch due to deep equality checking of fiber structures.
+     * Make sure you deeply remove enumerable properties before passing it to `.toEqual`, or, better, use `getChildrenAsJSX` or `toMatchRenderedOutput`.
+     */
+    dangerouslyGetPendingChildren(rootID: string = DEFAULT_ROOT_ID) {
+      const container = rootContainers.get(rootID);
+      return getPendingChildren(container);
+    },
+
+    getOrCreateRootContainer(rootID: string = DEFAULT_ROOT_ID, tag: RootTag) {
+      let root = roots.get(rootID);
+      if (!root) {
+        const container = {rootID: rootID, pendingChildren: [], children: []};
+        rootContainers.set(rootID, container);
+        root = NoopRenderer.createContainer(
+          container,
+          tag,
+          null,
+          null,
+          false,
+          '',
+          NoopRenderer.defaultOnUncaughtError,
+          NoopRenderer.defaultOnCaughtError,
+          onRecoverableError,
+          onDefaultTransitionIndicator,
+          null,
+        );
+        roots.set(rootID, root);
+      }
+      return root.current.stateNode.containerInfo;
+    },
+
+    // TODO: Replace ReactNoop.render with createRoot + root.render
+    createRoot(options?: CreateRootOptions) {
+      const container = {
+        rootID: '' + idCounter++,
+        pendingChildren: [],
+        children: [],
+      };
+      const fiberRoot = NoopRenderer.createContainer(
+        container,
+        ConcurrentRoot,
+        null,
+        null,
+        false,
+        '',
+        options && options.onUncaughtError
+          ? options.onUncaughtError
+          : NoopRenderer.defaultOnUncaughtError,
+        options && options.onCaughtError
+          ? options.onCaughtError
+          : NoopRenderer.defaultOnCaughtError,
+        onRecoverableError,
+        options && options.onDefaultTransitionIndicator
+          ? options.onDefaultTransitionIndicator
+          : onDefaultTransitionIndicator,
+        options && options.unstable_transitionCallbacks
+          ? options.unstable_transitionCallbacks
+          : null,
+      );
+      return {
+        _Scheduler: Scheduler,
+        render(children: ReactNodeList) {
+          NoopRenderer.updateContainer(children, fiberRoot, null, null);
+        },
+        getChildren() {
+          return getChildren(container);
+        },
+        getChildrenAsJSX() {
+          return getChildrenAsJSX(container);
+        },
+      };
+    },
+
+    createLegacyRoot() {
+      if (disableLegacyMode) {
+        throw new Error('createLegacyRoot: Unsupported Legacy Mode API.');
+      }
+
+      const container = {
+        rootID: '' + idCounter++,
+        pendingChildren: [],
+        children: [],
+      };
+      const fiberRoot = NoopRenderer.createContainer(
+        container,
+        LegacyRoot,
+        null,
+        null,
+        false,
+        '',
+        NoopRenderer.defaultOnUncaughtError,
+        NoopRenderer.defaultOnCaughtError,
+        onRecoverableError,
+        onDefaultTransitionIndicator,
+        null,
+      );
+      return {
+        _Scheduler: Scheduler,
+        render(children: ReactNodeList) {
+          NoopRenderer.updateContainer(children, fiberRoot, null, null);
+        },
+        getChildren() {
+          return getChildren(container);
+        },
+        getChildrenAsJSX() {
+          return getChildrenAsJSX(container);
+        },
+        legacy: true,
+      };
+    },
+
+    getChildrenAsJSX(rootID: string = DEFAULT_ROOT_ID) {
+      const container = rootContainers.get(rootID);
+      return getChildrenAsJSX(container);
+    },
+
+    getPendingChildrenAsJSX(rootID: string = DEFAULT_ROOT_ID) {
+      const container = rootContainers.get(rootID);
+      return getPendingChildrenAsJSX(container);
+    },
+
+    getSuspenseyThingStatus(src): string | null {
+      if (suspenseyThingCache === null) {
+        return null;
+      } else {
+        const record = suspenseyThingCache.get(src);
+        return record === undefined ? null : record.status;
+      }
+    },
+
+    resolveSuspenseyThing(key: string): void {
+      if (suspenseyThingCache === null) {
+        suspenseyThingCache = new Map();
+      }
+      const record = suspenseyThingCache.get(key);
+      if (record === undefined) {
+        const newRecord: SuspenseyThingRecord = {
+          status: 'fulfilled',
+          subscriptions: null,
+        };
+        suspenseyThingCache.set(key, newRecord);
+      } else {
+        if (record.status === 'pending') {
+          record.status = 'fulfilled';
+          const subscriptions = record.subscriptions;
+          if (subscriptions !== null) {
+            record.subscriptions = null;
+            for (let i = 0; i < subscriptions.length; i++) {
+              const subscription = subscriptions[i];
+              subscription.pendingCount--;
+              if (subscription.pendingCount === 0) {
+                const commit = subscription.commit;
+                subscription.commit = null;
+                commit();
+              }
+            }
+          }
+        }
+      }
+    },
+
+    resetSuspenseyThingCache() {
+      suspenseyThingCache = null;
+    },
+
+    createPortal(
+      children: ReactNodeList,
+      container: Container,
+      key: ?string = null,
+    ) {
+      return NoopRenderer.createPortal(children, container, null, key);
+    },
+
+    // Shortcut for testing a single root
+    render(element: React$Element<any>, callback: ?Function) {
+      ReactNoop.renderToRootWithID(element, DEFAULT_ROOT_ID, callback);
+    },
+
+    renderLegacySyncRoot(element: React$Element<any>, callback: ?Function) {
+      if (disableLegacyMode) {
+        throw new Error('createLegacyRoot: Unsupported Legacy Mode API.');
+      }
+      const rootID = DEFAULT_ROOT_ID;
+      const container = ReactNoop.getOrCreateRootContainer(rootID, LegacyRoot);
+      const root = roots.get(container.rootID);
+      NoopRenderer.updateContainer(element, root, null, callback);
+    },
+
+    renderToRootWithID(
+      element: React$Element<any>,
+      rootID: string,
+      callback: ?Function,
+    ) {
+      const container = ReactNoop.getOrCreateRootContainer(
+        rootID,
+        ConcurrentRoot,
+      );
+      const root = roots.get(container.rootID);
+      NoopRenderer.updateContainer(element, root, null, callback);
+    },
+
+    unmountRootWithID(rootID: string) {
+      const root = roots.get(rootID);
+      if (root) {
+        NoopRenderer.updateContainer(null, root, null, () => {
+          roots.delete(rootID);
+          rootContainers.delete(rootID);
+        });
+      }
+    },
+
+    findInstance(
+      componentOrElement: Element | ?component(...props: any),
+    ): null | Instance | TextInstance {
+      if (componentOrElement == null) {
+        return null;
+      }
+      // Unsound duck typing.
+      const component = (componentOrElement: any);
+      if (typeof component.id === 'number') {
+        return component;
+      }
+      if (__DEV__) {
+        return NoopRenderer.findHostInstanceWithWarning(
+          component,
+          'findInstance',
+        );
+      }
+      return NoopRenderer.findHostInstance(component);
+    },
+
+    flushNextYield(): Array<mixed> {
+      Scheduler.unstable_flushNumberOfYields(1);
+      return Scheduler.unstable_clearLog();
+    },
+
+    startTrackingHostCounters(): void {
+      hostUpdateCounter = 0;
+      hostCloneCounter = 0;
+    },
+
+    stopTrackingHostCounters():
+      | {
+          hostUpdateCounter: number,
+        }
+      | {
+          hostCloneCounter: number,
+        } {
+      const result = useMutation
+        ? {
+            hostUpdateCounter,
+          }
+        : {
+            hostCloneCounter,
+          };
+      hostUpdateCounter = 0;
+      hostCloneCounter = 0;
+
+      return result;
+    },
+
+    expire: Scheduler.unstable_advanceTime,
+
+    flushExpired(): Array<mixed> {
+      return Scheduler.unstable_flushExpired();
+    },
+
+    unstable_runWithPriority: function runWithPriority<T>(
+      priority: EventPriority,
+      fn: () => T,
+    ): T {
+      const previousPriority = getCurrentUpdatePriority();
+      try {
+        setCurrentUpdatePriority(priority);
+        return fn();
+      } finally {
+        setCurrentUpdatePriority(previousPriority);
+      }
+    },
+
+    batchedUpdates: NoopRenderer.batchedUpdates,
+
+    deferredUpdates: NoopRenderer.deferredUpdates,
+
+    discreteUpdates: NoopRenderer.discreteUpdates,
+
+    idleUpdates<T>(fn: () => T): T {
+      const prevEventPriority = currentEventPriority;
+      currentEventPriority = IdleEventPriority;
+      try {
+        fn();
+      } finally {
+        currentEventPriority = prevEventPriority;
+      }
+    },
+
+    flushSync,
+    flushPassiveEffects: NoopRenderer.flushPassiveEffects,
+
+    // Logs the current state of the tree.
+    dumpTree(rootID: string = DEFAULT_ROOT_ID) {
+      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;
+      }
+
+      const bufferedLog = [];
+      function log(...args) {
+        bufferedLog.push(...args, '\n');
+      }
+
+      function logHostInstances(
+        children: Array<Instance | TextInstance>,
+        depth,
+      ) {
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          const indent = '  '.repeat(depth);
+          if (typeof child.text === 'string') {
+            log(indent + '- ' + child.text);
+          } else {
+            log(indent + '- ' + child.type + '#' + child.id);
+            logHostInstances(child.children, depth + 1);
+          }
+        }
+      }
+      function logContainer(container: Container, depth) {
+        log('  '.repeat(depth) + '- [root#' + container.rootID + ']');
+        logHostInstances(container.children, depth + 1);
+      }
+
+      function logUpdateQueue(updateQueue: UpdateQueue<mixed>, depth) {
+        log('  '.repeat(depth + 1) + 'QUEUED UPDATES');
+        const first = updateQueue.firstBaseUpdate;
+        const update = first;
+        if (update !== null) {
+          do {
+            log(
+              '  '.repeat(depth + 1) + '~',
+              '[' + update.expirationTime + ']',
+            );
+          } while (update !== null);
+        }
+
+        const lastPending = updateQueue.shared.pending;
+        if (lastPending !== null) {
+          const firstPending = lastPending.next;
+          const pendingUpdate = firstPending;
+          if (pendingUpdate !== null) {
+            do {
+              log(
+                '  '.repeat(depth + 1) + '~',
+                '[' + pendingUpdate.expirationTime + ']',
+              );
+            } while (pendingUpdate !== null && pendingUpdate !== firstPending);
+          }
+        }
+      }
+
+      function logFiber(fiber: Fiber, depth) {
+        log(
+          '  '.repeat(depth) +
+            '- ' +
+            // need to explicitly coerce Symbol to a string
+            (fiber.type ? fiber.type.name || fiber.type.toString() : '[root]'),
+          '[' +
+            fiber.childExpirationTime +
+            (fiber.pendingProps ? '*' : '') +
+            ']',
+        );
+        if (fiber.updateQueue) {
+          logUpdateQueue(fiber.updateQueue, depth);
+        }
+        // const childInProgress = fiber.progressedChild;
+        // if (childInProgress && childInProgress !== fiber.child) {
+        //   log(
+        //     '  '.repeat(depth + 1) + 'IN PROGRESS: ' + fiber.pendingWorkPriority,
+        //   );
+        //   logFiber(childInProgress, depth + 1);
+        //   if (fiber.child) {
+        //     log('  '.repeat(depth + 1) + 'CURRENT');
+        //   }
+        // } else if (fiber.child && fiber.updateQueue) {
+        //   log('  '.repeat(depth + 1) + 'CHILDREN');
+        // }
+        if (fiber.child) {
+          logFiber(fiber.child, depth + 1);
+        }
+        if (fiber.sibling) {
+          logFiber(fiber.sibling, depth);
+        }
+      }
+
+      log('HOST INSTANCES:');
+      logContainer(rootContainer, 0);
+      log('FIBERS:');
+      logFiber(root.current, 0);
+
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.log(...bufferedLog);
+    },
+
+    getRoot(rootID: string = DEFAULT_ROOT_ID) {
+      return roots.get(rootID);
+    },
+  };
+
+  return ReactNoop;
+}
+
+export default createReactNoop;
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
new file mode 100644
index 00000000000..82080513a45
--- /dev/null
+++ b/packages/react-reconciler/README.md
@@ -0,0 +1,353 @@
+# react-reconciler
+
+This is an experimental package for creating custom React 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.**
+
+## Usage
+
+```js
+const Reconciler = require('react-reconciler');
+
+const HostConfig = {
+  // You'll need to implement some methods here.
+  // See below for more information and examples.
+};
+
+const MyRenderer = Reconciler(HostConfig);
+
+const RendererPublicAPI = {
+  render(element, container, callback) {
+    // Call MyRenderer.updateContainer() to schedule changes on the roots.
+    // See ReactDOM, React Native, or React ART for practical examples.
+  }
+};
+
+module.exports = RendererPublicAPI;
+```
+
+## Practical Examples
+
+A "host config" is an object that you need to provide, and that describes how to make something happen in the "host" environment (e.g. DOM, canvas, console, or whatever your rendering target is). It looks like this:
+
+```js
+const HostConfig = {
+  createInstance(type, props) {
+    // e.g. DOM renderer returns a DOM node
+  },
+  // ...
+  supportsMutation: true, // it works by mutating nodes
+  appendChild(parent, child) {
+    // e.g. DOM renderer would call .appendChild() here
+  },
+  // ...
+};
+```
+
+**For an introduction to writing a very simple custom renderer, check out this article series:**
+
+* **[Building a simple custom renderer to DOM](https://medium.com/@agent_hunt/hello-world-custom-react-renderer-9a95b7cd04bc)**
+* **[Building a simple custom renderer to native](https://medium.com/@agent_hunt/introduction-to-react-native-renderers-aka-react-native-is-the-java-and-react-native-renderers-are-828a0022f433)**
+
+The full list of supported methods [can be found here](https://github.com/facebook/react/blob/main/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js). For their signatures, we recommend looking at specific examples below.
+
+The React repository includes several renderers. Each of them has its own host config.
+
+The examples in the React repository are declared a bit differently than a third-party renderer would be. In particular, the `HostConfig` object mentioned above is never explicitly declared, and instead is a *module* in our code. However, its exports correspond directly to properties on a `HostConfig` object you'd need to declare in your code:
+
+* [React ART](https://github.com/facebook/react/blob/main/packages/react-art/src/ReactART.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js)
+* [React DOM](https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOM.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js)
+* [React Native](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFabric.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigFabric.js)
+
+If these links break please file an issue and we’ll fix them. They intentionally link to the latest versions since the API is still evolving. If you have more questions please file an issue and we’ll try to help!
+
+## An (Incomplete!) Reference
+
+At the moment, we can't commit to documenting every API detail because the host config still changes very often between the releases. The documentation below is **provided in the spirit of making our best effort rather than an API guarantee**. It focuses on the parts that don't change too often. This is a compromise that strikes a balance between the need for a fast-paced development of React itself, and the usefulness of this package to the custom renderer community. If you notice parts that are out of date or don't match how the latest stable update is behaving, please file an issue or send a pull request, although a response might take time.
+
+#### Modes
+
+The reconciler has two modes: mutation mode and persistent mode. You must specify one of them.
+
+If your target platform is similar to the DOM and has methods similar to `appendChild`, `removeChild`, and so on, you'll want to use the **mutation mode**. This is the same mode used by React DOM, React ART, and the classic React Native renderer.
+
+```js
+const HostConfig = {
+  // ...
+  supportsMutation: true,
+  // ...
+}
+```
+
+If your target platform has immutable trees, you'll want the **persistent mode** instead. In that mode, existing nodes are never mutated, and instead every change clones the parent tree and then replaces the whole parent tree at the root. This is the mode used by the new React Native renderer, codenamed "Fabric".
+
+```js
+const HostConfig = {
+  // ...
+  supportsPersistence: true,
+  // ...
+}
+```
+
+Depending on the mode, the reconciler will call different methods on your host config.
+
+If you're not sure which one you want, you likely need the mutation mode.
+
+#### Core Methods
+
+#### `createInstance(type, props, rootContainer, hostContext, internalHandle)`
+
+This method should return a newly created node. For example, the DOM renderer would call `document.createElement(type)` here and then set the properties from `props`.
+
+You can use `rootContainer` to access the root container associated with that tree. For example, in the DOM renderer, this is useful to get the correct `document` reference that the root belongs to.
+
+The `hostContext` parameter lets you keep track of some information about your current place in the tree. To learn more about it, see `getChildHostContext` below.
+
+The `internalHandle` data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.
+
+This method happens **in the render phase**. It can (and usually should) mutate the node it has just created before returning it, but it must not modify any other nodes. It must not register any event handlers on the parent tree. This is because an instance being created doesn't guarantee it would be placed in the tree — it could be left unused and later collected by GC. If you need to do something when an instance is definitely in the tree, look at `commitMount` instead.
+
+#### `createTextInstance(text, rootContainer, hostContext, internalHandle)`
+
+Same as `createInstance`, but for text nodes. If your renderer doesn't support text nodes, you can throw here.
+
+#### `appendInitialChild(parentInstance, child)`
+
+This method should mutate the `parentInstance` and add the child to its list of children. For example, in the DOM this would translate to a `parentInstance.appendChild(child)` call.
+
+This method happens **in the render phase**. It can mutate `parentInstance` and `child`, but it must not modify any other nodes. It's called while the tree is still being built up and not connected to the actual tree on the screen.
+
+#### `finalizeInitialChildren(instance, type, props, rootContainer, hostContext)`
+
+In this method, you can perform some final mutations on the `instance`. Unlike with `createInstance`, by the time `finalizeInitialChildren` is called, all the initial children have already been added to the `instance`, but the instance itself has not yet been connected to the tree on the screen.
+
+This method happens **in the render phase**. It can mutate `instance`, but it must not modify any other nodes. It's called while the tree is still being built up and not connected to the actual tree on the screen.
+
+There is a second purpose to this method. It lets you specify whether there is some work that needs to happen when the node is connected to the tree on the screen. If you return `true`, the instance will receive a `commitMount` call later. See its documentation below.
+
+If you don't want to do anything here, you should return `false`.
+
+#### `shouldSetTextContent(type, props)`
+
+Some target platforms support setting an instance's text content without manually creating a text node. For example, in the DOM, you can set `node.textContent` instead of creating a text node and appending it.
+
+If you return `true` from this method, React will assume that this node's children are text, and will not create nodes for them. It will instead rely on you to have filled that text during `createInstance`. This is a performance optimization. For example, the DOM renderer returns `true` only if `type` is a known text-only parent (like `'textarea'`) or if `props.children` has a `'string'` type. If you return `true`, you will need to implement `resetTextContent` too.
+
+If you don't want to do anything here, you should return `false`.
+
+This method happens **in the render phase**. Do not mutate the tree from it.
+
+#### `getRootHostContext(rootContainer)`
+
+This method lets you return the initial host context from the root of the tree. See `getChildHostContext` for the explanation of host context.
+
+If you don't intend to use host context, you can return `null`.
+
+This method happens **in the render phase**. Do not mutate the tree from it.
+
+#### `getChildHostContext(parentHostContext, type, rootContainer)`
+
+Host context lets you track some information about where you are in the tree so that it's available inside `createInstance` as the `hostContext` parameter. For example, the DOM renderer uses it to track whether it's inside an HTML or an SVG tree, because `createInstance` implementation needs to be different for them.
+
+If the node of this `type` does not influence the context you want to pass down, you can return `parentHostContext`. Alternatively, you can return any custom object representing the information you want to pass down.
+
+If you don't want to do anything here, return `parentHostContext`.
+
+This method happens **in the render phase**. Do not mutate the tree from it.
+
+#### `getPublicInstance(instance)`
+
+Determines what object gets exposed as a ref. You'll likely want to return the `instance` itself. But in some cases it might make sense to only expose some part of it.
+
+If you don't want to do anything here, return `instance`.
+
+#### `prepareForCommit(containerInfo)`
+
+This method lets you store some information before React starts making changes to the tree on the screen. For example, the DOM renderer stores the current text selection so that it can later restore it. This method is mirrored by `resetAfterCommit`.
+
+Even if you don't want to do anything here, you need to return `null` from it.
+
+#### `resetAfterCommit(containerInfo)`
+
+This method is called right after React has performed the tree mutations. You can use it to restore something you've stored in `prepareForCommit` — for example, text selection.
+
+You can leave it empty.
+
+#### `preparePortalMount(containerInfo)`
+
+This method is called for a container that's used as a portal target. Usually you can leave it empty.
+
+#### `scheduleTimeout(fn, delay)`
+
+You can proxy this to `setTimeout` or its equivalent in your environment.
+
+#### `cancelTimeout(id)`
+
+You can proxy this to `clearTimeout` or its equivalent in your environment.
+
+#### `noTimeout`
+
+This is a property (not a function) that should be set to something that can never be a valid timeout ID. For example, you can set it to `-1`.
+
+#### `supportsMicrotasks`
+
+Set this to true to indicate that your renderer supports `scheduleMicrotask`. We use microtasks as part of our discrete event implementation in React DOM. If you're not sure if your renderer should support this, you probably should. The option to not implement `scheduleMicrotask` exists so that platforms with more control over user events, like React Native, can choose to use a different mechanism.
+#### `scheduleMicrotask(fn)`
+
+Optional. You can proxy this to `queueMicrotask` or its equivalent in your environment.
+
+#### `isPrimaryRenderer`
+
+This is a property (not a function) that should be set to `true` if your renderer is the main one on the page. For example, if you're writing a renderer for the Terminal, it makes sense to set it to `true`, but if your renderer is used *on top of* React DOM or some other existing renderer, set it to `false`.
+
+#### `getCurrentEventPriority`
+
+To implement this method, you'll need some constants available on the special `react-reconciler/constants` entry point:
+
+```js
+import {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+} from 'react-reconciler/constants';
+
+const HostConfig = {
+  // ...
+  getCurrentEventPriority() {
+    return DefaultEventPriority;
+  },
+  // ...
+}
+
+const MyRenderer = Reconciler(HostConfig);
+```
+
+The constant you return depends on which event, if any, is being handled right now. (In the browser, you can check this using `window.event && window.event.type`).
+
+* **Discrete events:** If the active event is _directly caused by the user_ (such as mouse and keyboard events) and _each event in a sequence is intentional_ (e.g. `click`), return `DiscreteEventPriority`. This tells React that they should interrupt any background work and cannot be batched across time.
+
+* **Continuous events:** If the active event is _directly caused by the user_ but _the user can't distinguish between individual events in a sequence_ (e.g. `mouseover`), return `ContinuousEventPriority`. This tells React they should interrupt any background work but can be batched across time.
+
+* **Other events / No active event:** In all other cases, return `DefaultEventPriority`. This tells React that this event is considered background work, and interactive events will be prioritized over it.
+
+You can consult the `getCurrentEventPriority()` implementation in `ReactFiberConfigDOM.js` for a reference implementation.
+
+### Mutation Methods
+
+If you're using React in mutation mode (you probably do), you'll need to implement a few more methods.
+
+#### `appendChild(parentInstance, child)`
+
+This method should mutate the `parentInstance` and add the child to its list of children. For example, in the DOM this would translate to a `parentInstance.appendChild(child)` call.
+
+Although this method currently runs in the commit phase, you still should not mutate any other nodes in it. If you need to do some additional work when a node is definitely connected to the visible tree, look at `commitMount`.
+
+#### `appendChildToContainer(container, child)`
+
+Same as `appendChild`, but for when a node is attached to the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.
+
+#### `insertBefore(parentInstance, child, beforeChild)`
+
+This method should mutate the `parentInstance` and place the `child` before `beforeChild` in the list of its children. For example, in the DOM this would translate to a `parentInstance.insertBefore(child, beforeChild)` call.
+
+Note that React uses this method both for insertions and for reordering nodes. Similar to DOM, it is expected that you can call `insertBefore` to reposition an existing child. Do not mutate any other parts of the tree from it.
+
+#### `insertInContainerBefore(container, child, beforeChild)`
+
+Same as `insertBefore`, but for when a node is attached to the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.
+
+#### `removeChild(parentInstance, child)`
+
+This method should mutate the `parentInstance` to remove the `child` from the list of its children.
+
+React will only call it for the top-level node that is being removed. It is expected that garbage collection would take care of the whole subtree. You are not expected to traverse the child tree in it.
+
+#### `removeChildFromContainer(container, child)`
+
+Same as `removeChild`, but for when a node is detached from the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.
+
+#### `resetTextContent(instance)`
+
+If you returned `true` from `shouldSetTextContent` for the previous props, but returned `false` from `shouldSetTextContent` for the next props, React will call this method so that you can clear the text content you were managing manually. For example, in the DOM you could set `node.textContent = ''`.
+
+If you never return `true` from `shouldSetTextContent`, you can leave it empty.
+
+#### `commitTextUpdate(textInstance, prevText, nextText)`
+
+This method should mutate the `textInstance` and update its text content to `nextText`.
+
+Here, `textInstance` is a node created by `createTextInstance`.
+
+#### `commitMount(instance, type, props, internalHandle)`
+
+This method is only called if you returned `true` from `finalizeInitialChildren` for this instance.
+
+It lets you do some additional work after the node is actually attached to the tree on the screen for the first time. For example, the DOM renderer uses it to trigger focus on nodes with the `autoFocus` attribute.
+
+Note that `commitMount` does not mirror `removeChild` one to one because `removeChild` is only called for the top-level removed node. This is why ideally `commitMount` should not mutate any nodes other than the `instance` itself. For example, if it registers some events on some node above, it will be your responsibility to traverse the tree in `removeChild` and clean them up, which is not ideal.
+
+The `internalHandle` data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.
+
+If you never return `true` from `finalizeInitialChildren`, you can leave it empty.
+
+#### `commitUpdate(instance, type, prevProps, nextProps, internalHandle)`
+
+This method should mutate the `instance` to match `nextProps`.
+
+The `internalHandle` data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.
+
+#### `hideInstance(instance)`
+
+This method should make the `instance` invisible without removing it from the tree. For example, it can apply visual styling to hide it. It is used by Suspense to hide the tree while the fallback is visible.
+
+#### `hideTextInstance(textInstance)`
+
+Same as `hideInstance`, but for nodes created by `createTextInstance`.
+
+#### `unhideInstance(instance, props)`
+
+This method should make the `instance` visible, undoing what `hideInstance` did.
+
+#### `unhideTextInstance(textInstance, text)`
+
+Same as `unhideInstance`, but for nodes created by `createTextInstance`.
+
+#### `clearContainer(container)`
+
+This method should mutate the `container` root node and remove all children from it.
+
+#### `maySuspendCommit(type, props)`
+
+This method is called during render to determine if the Host Component type and props require some kind of loading process to complete before committing an update.
+
+#### `preloadInstance(type, props)`
+
+This method may be called during render if the Host Component type and props might suspend a commit. It can be used to initiate any work that might shorten the duration of a suspended commit.
+
+#### `startSuspendingCommit()`
+
+This method is called just before the commit phase. Use it to set up any necessary state while any Host Components that might suspend this commit are evaluated to determine if the commit must be suspended.
+
+#### `suspendInstance(type, props)`
+
+This method is called after `startSuspendingCommit` for each Host Component that indicated it might suspend a commit.
+
+#### `waitForCommitToBeReady()`
+
+This method is called after all `suspendInstance` calls are complete.
+
+Return `null` if the commit can happen immediately.
+
+Return `(initiateCommit: Function) => Function` if the commit must be suspended. The argument to this callback will initiate the commit when called. The return value is a cancellation function that the Reconciler can use to abort the commit.
+
+### Persistence Methods
+
+If you use the persistent mode instead of the mutation mode, you would still need the "Core Methods". However, instead of the Mutation Methods above you will implement a different set of methods that performs cloning nodes and replacing them at the root level. You can find a list of them in the "Persistence" section [listed in this file](https://github.com/facebook/react/blob/main/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js). File an issue if you need help.
+
+### Hydration Methods
+
+You can optionally implement hydration to "attach" to the existing tree during the initial render instead of creating it from scratch. For example, the DOM renderer uses this to attach to an HTML markup.
+
+To support hydration, you need to declare `supportsHydration: true` and then implement the methods in the "Hydration" section [listed in this file](https://github.com/facebook/react/blob/main/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js). File an issue if you need help.
diff --git a/packages/react-reconciler/constants.js b/packages/react-reconciler/constants.js
new file mode 100644
index 00000000000..1c8f0228d56
--- /dev/null
+++ b/packages/react-reconciler/constants.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/ReactReconcilerConstants';
diff --git a/packages/react-reconciler/index.js b/packages/react-reconciler/index.js
new file mode 100644
index 00000000000..afffd715cff
--- /dev/null
+++ b/packages/react-reconciler/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactFiberReconciler';
diff --git a/packages/react-reconciler/npm/constants.js b/packages/react-reconciler/npm/constants.js
new file mode 100644
index 00000000000..d3ec461294f
--- /dev/null
+++ b/packages/react-reconciler/npm/constants.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-reconciler-constants.production.js');
+} else {
+  module.exports = require('./cjs/react-reconciler-constants.development.js');
+}
diff --git a/packages/react-reconciler/npm/index.js b/packages/react-reconciler/npm/index.js
new file mode 100644
index 00000000000..63c171f1191
--- /dev/null
+++ b/packages/react-reconciler/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-reconciler.production.js');
+} else {
+  module.exports = require('./cjs/react-reconciler.development.js');
+}
diff --git a/packages/react-reconciler/npm/reflection.js b/packages/react-reconciler/npm/reflection.js
new file mode 100644
index 00000000000..e9a23ccf320
--- /dev/null
+++ b/packages/react-reconciler/npm/reflection.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-reconciler-reflection.production.js');
+} else {
+  module.exports = require('./cjs/react-reconciler-reflection.development.js');
+}
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
new file mode 100644
index 00000000000..91c38415dba
--- /dev/null
+++ b/packages/react-reconciler/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "react-reconciler",
+  "description": "React package for creating custom renderers.",
+  "version": "0.34.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "constants.js",
+    "index.js",
+    "reflection.js",
+    "cjs/"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-reconciler"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0"
+  },
+  "dependencies": {
+    "scheduler": "^0.28.0"
+  }
+}
diff --git a/packages/react-reconciler/reflection.js b/packages/react-reconciler/reflection.js
new file mode 100644
index 00000000000..e42f0f46017
--- /dev/null
+++ b/packages/react-reconciler/reflection.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/ReactFiberTreeReflection';
diff --git a/packages/react-reconciler/src/ReactCapturedValue.js b/packages/react-reconciler/src/ReactCapturedValue.js
new file mode 100644
index 00000000000..d53489cc3b7
--- /dev/null
+++ b/packages/react-reconciler/src/ReactCapturedValue.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
+
+const CapturedStacks: WeakMap<any, CapturedValue<any>> = new WeakMap();
+
+export type CapturedValue<+T> = {
+  +value: T,
+  source: Fiber | null,
+  stack: string | null,
+};
+
+export function createCapturedValueAtFiber<T>(
+  value: T,
+  source: Fiber,
+): CapturedValue<T> {
+  // If the value is an error, call this function immediately after it is thrown
+  // so the stack is accurate.
+  if (typeof value === 'object' && value !== null) {
+    const existing = CapturedStacks.get(value);
+    if (existing !== undefined) {
+      return existing;
+    }
+    const captured: CapturedValue<T> = {
+      value,
+      source,
+      stack: getStackByFiberInDevAndProd(source),
+    };
+    CapturedStacks.set(value, captured);
+    return captured;
+  } else {
+    return {
+      value,
+      source,
+      stack: getStackByFiberInDevAndProd(source),
+    };
+  }
+}
+
+export function createCapturedValueFromError(
+  value: Error,
+  stack: null | string,
+): CapturedValue<Error> {
+  const captured = {
+    value,
+    source: null,
+    stack: stack,
+  };
+  if (typeof stack === 'string') {
+    CapturedStacks.set(value, captured);
+  }
+  return captured;
+}
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
new file mode 100644
index 00000000000..2a726447263
--- /dev/null
+++ b/packages/react-reconciler/src/ReactChildFiber.js
@@ -0,0 +1,2251 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactElement} from 'shared/ReactElementType';
+import type {
+  ReactPortal,
+  Thenable,
+  ReactContext,
+  ReactDebugInfo,
+  ReactComponentInfo,
+  SuspenseListRevealOrder,
+  ReactKey,
+  ReactOptimisticKey,
+} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane';
+import type {ThenableState} from './ReactFiberThenable';
+
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {
+  Placement,
+  ChildDeletion,
+  Forked,
+  PlacementDEV,
+} from './ReactFiberFlags';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
+import {
+  getIteratorFn,
+  ASYNC_ITERATOR,
+  REACT_ELEMENT_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_CONTEXT_TYPE,
+  REACT_LEGACY_ELEMENT_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+import {
+  HostRoot,
+  HostText,
+  HostPortal,
+  Fragment,
+  FunctionComponent,
+} from './ReactWorkTags';
+import isArray from 'shared/isArray';
+import {
+  enableAsyncIterableChildren,
+  disableLegacyMode,
+  enableFragmentRefs,
+  enableOptimisticKey,
+} from 'shared/ReactFeatureFlags';
+
+import {
+  createWorkInProgress,
+  resetWorkInProgress,
+  createFiberFromElement,
+  createFiberFromFragment,
+  createFiberFromText,
+  createFiberFromPortal,
+  createFiberFromThrow,
+} from './ReactFiber';
+import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading';
+import {getIsHydrating} from './ReactFiberHydrationContext';
+import {pushTreeFork} from './ReactFiberTreeContext';
+import {
+  SuspenseException,
+  SuspenseActionException,
+  createThenableState,
+  trackUsedThenable,
+  resolveLazy,
+} from './ReactFiberThenable';
+import {readContextDuringReconciliation} from './ReactFiberNewContext';
+
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+
+// This tracks the thenables that are unwrapped during reconcilation.
+let thenableState: ThenableState | null = null;
+let thenableIndexCounter: number = 0;
+
+// Server Components Meta Data
+let currentDebugInfo: null | ReactDebugInfo = null;
+
+function pushDebugInfo(
+  debugInfo: null | ReactDebugInfo,
+): null | ReactDebugInfo {
+  if (!__DEV__) {
+    return null;
+  }
+  const previousDebugInfo = currentDebugInfo;
+  if (debugInfo == null) {
+    // Leave inplace
+  } else if (previousDebugInfo === null) {
+    currentDebugInfo = debugInfo;
+  } else {
+    // If we have two debugInfo, we need to create a new one. This makes the array no longer
+    // live so we'll miss any future updates if we received more so ideally we should always
+    // do this after both have fully resolved/unsuspended.
+    currentDebugInfo = previousDebugInfo.concat(debugInfo);
+  }
+  return previousDebugInfo;
+}
+
+function getCurrentDebugTask(): null | ConsoleTask {
+  // Get the debug task of the parent Server Component if there is one.
+  if (__DEV__) {
+    const debugInfo = currentDebugInfo;
+    if (debugInfo != null) {
+      for (let i = debugInfo.length - 1; i >= 0; i--) {
+        if (debugInfo[i].name != null) {
+          const componentInfo: ReactComponentInfo = debugInfo[i];
+          const debugTask: ?ConsoleTask = componentInfo.debugTask;
+          if (debugTask != null) {
+            return debugTask;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
+let didWarnAboutMaps;
+let didWarnAboutGenerators;
+let ownerHasKeyUseWarning;
+let ownerHasFunctionTypeWarning;
+let ownerHasSymbolTypeWarning;
+let warnForMissingKey = (
+  returnFiber: Fiber,
+  workInProgress: Fiber,
+  child: mixed,
+) => {};
+
+if (__DEV__) {
+  didWarnAboutMaps = false;
+  didWarnAboutGenerators = false;
+
+  /**
+   * Warn if there's no key explicitly set on dynamic arrays of children or
+   * object keys are not valid. This allows us to keep track of children between
+   * updates.
+   */
+  ownerHasKeyUseWarning = ({}: {[string]: boolean});
+  ownerHasFunctionTypeWarning = ({}: {[string]: boolean});
+  ownerHasSymbolTypeWarning = ({}: {[string]: boolean});
+
+  warnForMissingKey = (
+    returnFiber: Fiber,
+    workInProgress: Fiber,
+    child: mixed,
+  ) => {
+    if (child === null || typeof child !== 'object') {
+      return;
+    }
+    if (
+      !child._store ||
+      ((child._store.validated || child.key != null) &&
+        child._store.validated !== 2)
+    ) {
+      return;
+    }
+
+    if (typeof child._store !== 'object') {
+      throw new Error(
+        'React Component in warnForMissingKey should have a _store. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+
+    // $FlowFixMe[cannot-write] unable to narrow type from mixed to writable object
+    child._store.validated = 1;
+
+    const componentName = getComponentNameFromFiber(returnFiber);
+
+    const componentKey = componentName || 'null';
+    if (ownerHasKeyUseWarning[componentKey]) {
+      return;
+    }
+    ownerHasKeyUseWarning[componentKey] = true;
+
+    const childOwner = child._owner;
+    const parentOwner = returnFiber._debugOwner;
+
+    let currentComponentErrorInfo = '';
+    if (parentOwner && typeof parentOwner.tag === 'number') {
+      const name = getComponentNameFromFiber((parentOwner: any));
+      if (name) {
+        currentComponentErrorInfo =
+          '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+    if (!currentComponentErrorInfo) {
+      if (componentName) {
+        currentComponentErrorInfo = `\n\nCheck the top-level render call using <${componentName}>.`;
+      }
+    }
+
+    // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+    let childOwnerAppendix = '';
+    if (childOwner != null && parentOwner !== childOwner) {
+      let ownerName = null;
+      if (typeof childOwner.tag === 'number') {
+        ownerName = getComponentNameFromFiber((childOwner: any));
+      } else if (typeof childOwner.name === 'string') {
+        ownerName = childOwner.name;
+      }
+      if (ownerName) {
+        // Give the component that originally created this child.
+        childOwnerAppendix = ` It was passed a child from ${ownerName}.`;
+      }
+    }
+
+    runWithFiberInDEV(workInProgress, () => {
+      console.error(
+        'Each child in a list should have a unique "key" prop.' +
+          '%s%s See https://react.dev/link/warning-keys for more information.',
+        currentComponentErrorInfo,
+        childOwnerAppendix,
+      );
+    });
+  };
+}
+
+// Given a fragment, validate that it can only be provided with fragment props
+// We do this here instead of BeginWork because the Fragment fiber doesn't have
+// the whole props object, only the children and is shared with arrays.
+function validateFragmentProps(
+  element: ReactElement,
+  fiber: null | Fiber,
+  returnFiber: Fiber,
+) {
+  if (__DEV__) {
+    const keys = Object.keys(element.props);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (
+        key !== 'children' &&
+        key !== 'key' &&
+        (enableFragmentRefs ? key !== 'ref' : true)
+      ) {
+        if (fiber === null) {
+          // For unkeyed root fragments without refs (enableFragmentRefs),
+          // there's no Fiber. We create a fake one just for error stack handling.
+          fiber = createFiberFromElement(element, returnFiber.mode, 0);
+          if (__DEV__) {
+            fiber._debugInfo = currentDebugInfo;
+          }
+          fiber.return = returnFiber;
+        }
+        runWithFiberInDEV(
+          fiber,
+          erroredKey => {
+            if (enableFragmentRefs) {
+              console.error(
+                'Invalid prop `%s` supplied to `React.Fragment`. ' +
+                  'React.Fragment can only have `key`, `ref`, and `children` props.',
+                erroredKey,
+              );
+            } else {
+              console.error(
+                'Invalid prop `%s` supplied to `React.Fragment`. ' +
+                  'React.Fragment can only have `key` and `children` props.',
+                erroredKey,
+              );
+            }
+          },
+          key,
+        );
+        break;
+      }
+    }
+  }
+}
+
+function unwrapThenable<T>(thenable: Thenable<T>): T {
+  const index = thenableIndexCounter;
+  thenableIndexCounter += 1;
+  if (thenableState === null) {
+    thenableState = createThenableState();
+  }
+  return trackUsedThenable(thenableState, thenable, index);
+}
+
+function coerceRef(workInProgress: Fiber, element: ReactElement): void {
+  // TODO: This is a temporary, intermediate step. Now that enableRefAsProp is on,
+  // we should resolve the `ref` prop during the begin phase of the component
+  // it's attached to (HostComponent, ClassComponent, etc).
+  const refProp = element.props.ref;
+  // TODO: With enableRefAsProp now rolled out, we shouldn't use the `ref` field. We
+  // should always read the ref from the prop.
+  workInProgress.ref = refProp !== undefined ? refProp : null;
+}
+
+function throwOnInvalidObjectTypeImpl(returnFiber: Fiber, newChild: Object) {
+  if (newChild.$$typeof === REACT_LEGACY_ELEMENT_TYPE) {
+    throw new Error(
+      'A React Element from an older version of React was rendered. ' +
+        'This is not supported. It can happen if:\n' +
+        '- Multiple copies of the "react" package is used.\n' +
+        '- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' +
+        '- A compiler tries to "inline" JSX instead of using the runtime.',
+    );
+  }
+
+  // $FlowFixMe[method-unbinding]
+  const childString = Object.prototype.toString.call(newChild);
+
+  throw new Error(
+    `Objects are not valid as a React child (found: ${
+      childString === '[object Object]'
+        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+        : childString
+    }). ` +
+      'If you meant to render a collection of children, use an array ' +
+      'instead.',
+  );
+}
+
+function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
+  const debugTask = getCurrentDebugTask();
+  if (__DEV__ && debugTask !== null) {
+    debugTask.run(
+      throwOnInvalidObjectTypeImpl.bind(null, returnFiber, newChild),
+    );
+  } else {
+    throwOnInvalidObjectTypeImpl(returnFiber, newChild);
+  }
+}
+
+function warnOnFunctionTypeImpl(returnFiber: Fiber, invalidChild: Function) {
+  if (__DEV__) {
+    const parentName = getComponentNameFromFiber(returnFiber) || 'Component';
+
+    if (ownerHasFunctionTypeWarning[parentName]) {
+      return;
+    }
+    ownerHasFunctionTypeWarning[parentName] = true;
+
+    const name = invalidChild.displayName || invalidChild.name || 'Component';
+
+    if (returnFiber.tag === HostRoot) {
+      console.error(
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return %s instead of <%s /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  root.render(%s)',
+        name,
+        name,
+        name,
+      );
+    } else {
+      console.error(
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return %s instead of <%s /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <%s>{%s}</%s>',
+        name,
+        name,
+        parentName,
+        name,
+        parentName,
+      );
+    }
+  }
+}
+
+function warnOnFunctionType(returnFiber: Fiber, invalidChild: Function) {
+  const debugTask = getCurrentDebugTask();
+  if (__DEV__ && debugTask !== null) {
+    debugTask.run(warnOnFunctionTypeImpl.bind(null, returnFiber, invalidChild));
+  } else {
+    warnOnFunctionTypeImpl(returnFiber, invalidChild);
+  }
+}
+
+function warnOnSymbolTypeImpl(returnFiber: Fiber, invalidChild: symbol) {
+  if (__DEV__) {
+    const parentName = getComponentNameFromFiber(returnFiber) || 'Component';
+
+    if (ownerHasSymbolTypeWarning[parentName]) {
+      return;
+    }
+    ownerHasSymbolTypeWarning[parentName] = true;
+
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const name = String(invalidChild);
+
+    if (returnFiber.tag === HostRoot) {
+      console.error(
+        'Symbols are not valid as a React child.\n' + '  root.render(%s)',
+        name,
+      );
+    } else {
+      console.error(
+        'Symbols are not valid as a React child.\n' + '  <%s>%s</%s>',
+        parentName,
+        name,
+        parentName,
+      );
+    }
+  }
+}
+
+function warnOnSymbolType(returnFiber: Fiber, invalidChild: symbol) {
+  const debugTask = getCurrentDebugTask();
+  if (__DEV__ && debugTask !== null) {
+    debugTask.run(warnOnSymbolTypeImpl.bind(null, returnFiber, invalidChild));
+  } else {
+    warnOnSymbolTypeImpl(returnFiber, invalidChild);
+  }
+}
+
+type ChildReconciler = (
+  returnFiber: Fiber,
+  currentFirstChild: Fiber | null,
+  newChild: any,
+  lanes: Lanes,
+) => Fiber | null;
+
+// This wrapper function exists because I expect to clone the code in each path
+// to be able to optimize each path individually by branching early. This needs
+// a compiler or we can do it manually. Helpers that don't need this branching
+// live outside of this function.
+function createChildReconciler(
+  shouldTrackSideEffects: boolean,
+): ChildReconciler {
+  function deleteChild(returnFiber: Fiber, childToDelete: Fiber): void {
+    if (!shouldTrackSideEffects) {
+      // Noop.
+      return;
+    }
+    const deletions = returnFiber.deletions;
+    if (deletions === null) {
+      returnFiber.deletions = [childToDelete];
+      returnFiber.flags |= ChildDeletion;
+    } else {
+      deletions.push(childToDelete);
+    }
+  }
+
+  function deleteRemainingChildren(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+  ): null {
+    if (!shouldTrackSideEffects) {
+      // Noop.
+      return null;
+    }
+
+    // TODO: For the shouldClone case, this could be micro-optimized a bit by
+    // assuming that after the first child we've already added everything.
+    let childToDelete = currentFirstChild;
+    while (childToDelete !== null) {
+      deleteChild(returnFiber, childToDelete);
+      childToDelete = childToDelete.sibling;
+    }
+    return null;
+  }
+
+  function mapRemainingChildren(
+    currentFirstChild: Fiber,
+  ): Map<string | number | ReactOptimisticKey, Fiber> {
+    // Add the remaining children to a temporary map so that we can find them by
+    // keys quickly. Implicit (null) keys get added to this set with their index
+    // instead.
+    const existingChildren: Map<
+      | string
+      | number
+      // This type is only here for the case when enableOptimisticKey is disabled.
+      // Remove it after it ships.
+      | ReactOptimisticKey,
+      Fiber,
+    > = new Map();
+
+    let existingChild: null | Fiber = currentFirstChild;
+    while (existingChild !== null) {
+      if (existingChild.key === null) {
+        existingChildren.set(existingChild.index, existingChild);
+      } else if (
+        enableOptimisticKey &&
+        existingChild.key === REACT_OPTIMISTIC_KEY
+      ) {
+        // For optimistic keys, we store the negative index (minus one) to differentiate
+        // them from the regular indices. We'll look this up regardless of what the new
+        // key is, if there's no other match.
+        existingChildren.set(-existingChild.index - 1, existingChild);
+      } else {
+        existingChildren.set(existingChild.key, existingChild);
+      }
+      existingChild = existingChild.sibling;
+    }
+    return existingChildren;
+  }
+
+  function useFiber(fiber: Fiber, pendingProps: mixed): Fiber {
+    // We currently set sibling to null and index to 0 here because it is easy
+    // to forget to do before returning it. E.g. for the single child case.
+    const clone = createWorkInProgress(fiber, pendingProps);
+    clone.index = 0;
+    clone.sibling = null;
+    return clone;
+  }
+
+  function placeChild(
+    newFiber: Fiber,
+    lastPlacedIndex: number,
+    newIndex: number,
+  ): number {
+    newFiber.index = newIndex;
+    if (!shouldTrackSideEffects) {
+      // During hydration, the useId algorithm needs to know which fibers are
+      // part of a list of children (arrays, iterators).
+      newFiber.flags |= Forked;
+      return lastPlacedIndex;
+    }
+    const current = newFiber.alternate;
+    if (current !== null) {
+      const oldIndex = current.index;
+      if (oldIndex < lastPlacedIndex) {
+        // This is a move.
+        newFiber.flags |= Placement | PlacementDEV;
+        return lastPlacedIndex;
+      } else {
+        // This item can stay in place.
+        return oldIndex;
+      }
+    } else {
+      // This is an insertion.
+      newFiber.flags |= Placement | PlacementDEV;
+      return lastPlacedIndex;
+    }
+  }
+
+  function placeSingleChild(newFiber: Fiber): Fiber {
+    // This is simpler for the single child case. We only need to do a
+    // placement for inserting new children.
+    if (shouldTrackSideEffects && newFiber.alternate === null) {
+      newFiber.flags |= Placement | PlacementDEV;
+    }
+    return newFiber;
+  }
+
+  function updateTextNode(
+    returnFiber: Fiber,
+    current: Fiber | null,
+    textContent: string,
+    lanes: Lanes,
+  ) {
+    if (current === null || current.tag !== HostText) {
+      // Insert
+      const created = createFiberFromText(textContent, returnFiber.mode, lanes);
+      created.return = returnFiber;
+      if (__DEV__) {
+        // We treat the parent as the owner for stack purposes.
+        created._debugOwner = returnFiber;
+        created._debugTask = returnFiber._debugTask;
+        created._debugInfo = currentDebugInfo;
+      }
+      return created;
+    } else {
+      // Update
+      const existing = useFiber(current, textContent);
+      existing.return = returnFiber;
+      if (__DEV__) {
+        existing._debugInfo = currentDebugInfo;
+      }
+      return existing;
+    }
+  }
+
+  function updateElement(
+    returnFiber: Fiber,
+    current: Fiber | null,
+    element: ReactElement,
+    lanes: Lanes,
+  ): Fiber {
+    const elementType = element.type;
+    if (elementType === REACT_FRAGMENT_TYPE) {
+      const updated = updateFragment(
+        returnFiber,
+        current,
+        element.props.children,
+        lanes,
+        element.key,
+      );
+      if (enableFragmentRefs) {
+        coerceRef(updated, element);
+      }
+      validateFragmentProps(element, updated, returnFiber);
+      return updated;
+    }
+    if (current !== null) {
+      if (
+        current.elementType === elementType ||
+        // Keep this check inline so it only runs on the false path:
+        (__DEV__
+          ? isCompatibleFamilyForHotReloading(current, element)
+          : false) ||
+        // Lazy types should reconcile their resolved type.
+        // We need to do this after the Hot Reloading check above,
+        // because hot reloading has different semantics than prod because
+        // it doesn't resuspend. So we can't let the call below suspend.
+        (typeof elementType === 'object' &&
+          elementType !== null &&
+          elementType.$$typeof === REACT_LAZY_TYPE &&
+          resolveLazy(elementType) === current.type)
+      ) {
+        // Move based on index
+        const existing = useFiber(current, element.props);
+        coerceRef(existing, element);
+        existing.return = returnFiber;
+        if (__DEV__) {
+          existing._debugOwner = element._owner;
+          existing._debugInfo = currentDebugInfo;
+        }
+        return existing;
+      }
+    }
+    // Insert
+    const created = createFiberFromElement(element, returnFiber.mode, lanes);
+    coerceRef(created, element);
+    created.return = returnFiber;
+    if (__DEV__) {
+      created._debugInfo = currentDebugInfo;
+    }
+    return created;
+  }
+
+  function updatePortal(
+    returnFiber: Fiber,
+    current: Fiber | null,
+    portal: ReactPortal,
+    lanes: Lanes,
+  ): Fiber {
+    if (
+      current === null ||
+      current.tag !== HostPortal ||
+      current.stateNode.containerInfo !== portal.containerInfo ||
+      current.stateNode.implementation !== portal.implementation
+    ) {
+      // Insert
+      const created = createFiberFromPortal(portal, returnFiber.mode, lanes);
+      created.return = returnFiber;
+      if (__DEV__) {
+        created._debugInfo = currentDebugInfo;
+      }
+      return created;
+    } else {
+      // Update
+      const existing = useFiber(current, portal.children || []);
+      if (enableOptimisticKey) {
+        // If the old key was optimistic we need to now save the real one.
+        existing.key = portal.key;
+      }
+      existing.return = returnFiber;
+      if (__DEV__) {
+        existing._debugInfo = currentDebugInfo;
+      }
+      return existing;
+    }
+  }
+
+  function updateFragment(
+    returnFiber: Fiber,
+    current: Fiber | null,
+    fragment: Iterable<React$Node>,
+    lanes: Lanes,
+    key: ReactKey,
+  ): Fiber {
+    if (current === null || current.tag !== Fragment) {
+      // Insert
+      const created = createFiberFromFragment(
+        fragment,
+        returnFiber.mode,
+        lanes,
+        key,
+      );
+      created.return = returnFiber;
+      if (__DEV__) {
+        // We treat the parent as the owner for stack purposes.
+        created._debugOwner = returnFiber;
+        created._debugTask = returnFiber._debugTask;
+        created._debugInfo = currentDebugInfo;
+      }
+      return created;
+    } else {
+      // Update
+      const existing = useFiber(current, fragment);
+      if (enableOptimisticKey) {
+        // If the old key was optimistic we need to now save the real one.
+        existing.key = key;
+      }
+      existing.return = returnFiber;
+      if (__DEV__) {
+        existing._debugInfo = currentDebugInfo;
+      }
+      return existing;
+    }
+  }
+
+  function createChild(
+    returnFiber: Fiber,
+    newChild: any,
+    lanes: Lanes,
+  ): Fiber | null {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
+    ) {
+      // Text nodes don't have keys. If the previous node is implicitly keyed
+      // we can continue to replace it without aborting even if it is not a text
+      // node.
+      const created = createFiberFromText(
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+        '' + newChild,
+        returnFiber.mode,
+        lanes,
+      );
+      created.return = returnFiber;
+      if (__DEV__) {
+        // We treat the parent as the owner for stack purposes.
+        created._debugOwner = returnFiber;
+        created._debugTask = returnFiber._debugTask;
+        created._debugInfo = currentDebugInfo;
+      }
+      return created;
+    }
+
+    if (typeof newChild === 'object' && newChild !== null) {
+      switch (newChild.$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          const created = createFiberFromElement(
+            newChild,
+            returnFiber.mode,
+            lanes,
+          );
+          coerceRef(created, newChild);
+          created.return = returnFiber;
+          if (__DEV__) {
+            const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+            created._debugInfo = currentDebugInfo;
+            currentDebugInfo = prevDebugInfo;
+          }
+          return created;
+        }
+        case REACT_PORTAL_TYPE: {
+          const created = createFiberFromPortal(
+            newChild,
+            returnFiber.mode,
+            lanes,
+          );
+          created.return = returnFiber;
+          if (__DEV__) {
+            created._debugInfo = currentDebugInfo;
+          }
+          return created;
+        }
+        case REACT_LAZY_TYPE: {
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          const resolvedChild = resolveLazy((newChild: any));
+          const created = createChild(returnFiber, resolvedChild, lanes);
+          currentDebugInfo = prevDebugInfo;
+          return created;
+        }
+      }
+
+      if (
+        isArray(newChild) ||
+        getIteratorFn(newChild) ||
+        (enableAsyncIterableChildren &&
+          typeof newChild[ASYNC_ITERATOR] === 'function')
+      ) {
+        const created = createFiberFromFragment(
+          newChild,
+          returnFiber.mode,
+          lanes,
+          null,
+        );
+        created.return = returnFiber;
+        if (__DEV__) {
+          // We treat the parent as the owner for stack purposes.
+          created._debugOwner = returnFiber;
+          created._debugTask = returnFiber._debugTask;
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          created._debugInfo = currentDebugInfo;
+          currentDebugInfo = prevDebugInfo;
+        }
+        return created;
+      }
+
+      // Usable node types
+      //
+      // Unwrap the inner value and recursively call this function again.
+      if (typeof newChild.then === 'function') {
+        const thenable: Thenable<any> = (newChild: any);
+        const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+        const created = createChild(
+          returnFiber,
+          unwrapThenable(thenable),
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return created;
+      }
+
+      if (newChild.$$typeof === REACT_CONTEXT_TYPE) {
+        const context: ReactContext<mixed> = (newChild: any);
+        return createChild(
+          returnFiber,
+          readContextDuringReconciliation(returnFiber, context, lanes),
+          lanes,
+        );
+      }
+
+      throwOnInvalidObjectType(returnFiber, newChild);
+    }
+
+    if (__DEV__) {
+      if (typeof newChild === 'function') {
+        warnOnFunctionType(returnFiber, newChild);
+      }
+      if (typeof newChild === 'symbol') {
+        warnOnSymbolType(returnFiber, newChild);
+      }
+    }
+
+    return null;
+  }
+
+  function updateSlot(
+    returnFiber: Fiber,
+    oldFiber: Fiber | null,
+    newChild: any,
+    lanes: Lanes,
+  ): Fiber | null {
+    // Update the fiber if the keys match, otherwise return null.
+    const key = oldFiber !== null ? oldFiber.key : null;
+
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
+    ) {
+      // Text nodes don't have keys. If the previous node is implicitly keyed
+      // we can continue to replace it without aborting even if it is not a text
+      // node.
+      if (key !== null) {
+        return null;
+      }
+      return updateTextNode(
+        returnFiber,
+        oldFiber,
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+        '' + newChild,
+        lanes,
+      );
+    }
+
+    if (typeof newChild === 'object' && newChild !== null) {
+      switch (newChild.$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          if (
+            // If the old child was an optimisticKey, then we'd normally consider that a match,
+            // but instead, we'll bail to return null from the slot which will bail to slow path.
+            // That's to ensure that if the new key has a match elsewhere in the list, then that
+            // takes precedence over assuming the identity of an optimistic slot.
+            newChild.key === key
+          ) {
+            const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+            const updated = updateElement(
+              returnFiber,
+              oldFiber,
+              newChild,
+              lanes,
+            );
+            currentDebugInfo = prevDebugInfo;
+            return updated;
+          } else {
+            return null;
+          }
+        }
+        case REACT_PORTAL_TYPE: {
+          if (
+            // If the old child was an optimisticKey, then we'd normally consider that a match,
+            // but instead, we'll bail to return null from the slot which will bail to slow path.
+            // That's to ensure that if the new key has a match elsewhere in the list, then that
+            // takes precedence over assuming the identity of an optimistic slot.
+            newChild.key === key
+          ) {
+            return updatePortal(returnFiber, oldFiber, newChild, lanes);
+          } else {
+            return null;
+          }
+        }
+        case REACT_LAZY_TYPE: {
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          const resolvedChild = resolveLazy((newChild: any));
+          const updated = updateSlot(
+            returnFiber,
+            oldFiber,
+            resolvedChild,
+            lanes,
+          );
+          currentDebugInfo = prevDebugInfo;
+          return updated;
+        }
+      }
+
+      if (
+        isArray(newChild) ||
+        getIteratorFn(newChild) ||
+        (enableAsyncIterableChildren &&
+          typeof newChild[ASYNC_ITERATOR] === 'function')
+      ) {
+        if (key !== null) {
+          return null;
+        }
+
+        const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+        const updated = updateFragment(
+          returnFiber,
+          oldFiber,
+          newChild,
+          lanes,
+          null,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return updated;
+      }
+
+      // Usable node types
+      //
+      // Unwrap the inner value and recursively call this function again.
+      if (typeof newChild.then === 'function') {
+        const thenable: Thenable<any> = (newChild: any);
+        const prevDebugInfo = pushDebugInfo((thenable: any)._debugInfo);
+        const updated = updateSlot(
+          returnFiber,
+          oldFiber,
+          unwrapThenable(thenable),
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return updated;
+      }
+
+      if (newChild.$$typeof === REACT_CONTEXT_TYPE) {
+        const context: ReactContext<mixed> = (newChild: any);
+        return updateSlot(
+          returnFiber,
+          oldFiber,
+          readContextDuringReconciliation(returnFiber, context, lanes),
+          lanes,
+        );
+      }
+
+      throwOnInvalidObjectType(returnFiber, newChild);
+    }
+
+    if (__DEV__) {
+      if (typeof newChild === 'function') {
+        warnOnFunctionType(returnFiber, newChild);
+      }
+      if (typeof newChild === 'symbol') {
+        warnOnSymbolType(returnFiber, newChild);
+      }
+    }
+
+    return null;
+  }
+
+  function updateFromMap(
+    existingChildren: Map<string | number | ReactOptimisticKey, Fiber>,
+    returnFiber: Fiber,
+    newIdx: number,
+    newChild: any,
+    lanes: Lanes,
+  ): Fiber | null {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
+    ) {
+      // Text nodes don't have keys, so we neither have to check the old nor
+      // new node for the key. If both are text nodes, they match.
+      const matchedFiber = existingChildren.get(newIdx) || null;
+      return updateTextNode(
+        returnFiber,
+        matchedFiber,
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+        '' + newChild,
+        lanes,
+      );
+    }
+
+    if (typeof newChild === 'object' && newChild !== null) {
+      switch (newChild.$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          const matchedFiber =
+            existingChildren.get(
+              newChild.key === null ? newIdx : newChild.key,
+            ) ||
+            (enableOptimisticKey &&
+              // If the existing child was an optimistic key, we may still match on the index.
+              existingChildren.get(-newIdx - 1)) ||
+            null;
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          const updated = updateElement(
+            returnFiber,
+            matchedFiber,
+            newChild,
+            lanes,
+          );
+          currentDebugInfo = prevDebugInfo;
+          return updated;
+        }
+        case REACT_PORTAL_TYPE: {
+          const matchedFiber =
+            existingChildren.get(
+              newChild.key === null ? newIdx : newChild.key,
+            ) ||
+            (enableOptimisticKey &&
+              // If the existing child was an optimistic key, we may still match on the index.
+              existingChildren.get(-newIdx - 1)) ||
+            null;
+          return updatePortal(returnFiber, matchedFiber, newChild, lanes);
+        }
+        case REACT_LAZY_TYPE: {
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          const resolvedChild = resolveLazy((newChild: any));
+          const updated = updateFromMap(
+            existingChildren,
+            returnFiber,
+            newIdx,
+            resolvedChild,
+            lanes,
+          );
+          currentDebugInfo = prevDebugInfo;
+          return updated;
+        }
+      }
+
+      if (
+        isArray(newChild) ||
+        getIteratorFn(newChild) ||
+        (enableAsyncIterableChildren &&
+          typeof newChild[ASYNC_ITERATOR] === 'function')
+      ) {
+        const matchedFiber = existingChildren.get(newIdx) || null;
+        const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+        const updated = updateFragment(
+          returnFiber,
+          matchedFiber,
+          newChild,
+          lanes,
+          null,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return updated;
+      }
+
+      // Usable node types
+      //
+      // Unwrap the inner value and recursively call this function again.
+      if (typeof newChild.then === 'function') {
+        const thenable: Thenable<any> = (newChild: any);
+        const prevDebugInfo = pushDebugInfo((thenable: any)._debugInfo);
+        const updated = updateFromMap(
+          existingChildren,
+          returnFiber,
+          newIdx,
+          unwrapThenable(thenable),
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return updated;
+      }
+
+      if (newChild.$$typeof === REACT_CONTEXT_TYPE) {
+        const context: ReactContext<mixed> = (newChild: any);
+        return updateFromMap(
+          existingChildren,
+          returnFiber,
+          newIdx,
+          readContextDuringReconciliation(returnFiber, context, lanes),
+          lanes,
+        );
+      }
+
+      throwOnInvalidObjectType(returnFiber, newChild);
+    }
+
+    if (__DEV__) {
+      if (typeof newChild === 'function') {
+        warnOnFunctionType(returnFiber, newChild);
+      }
+      if (typeof newChild === 'symbol') {
+        warnOnSymbolType(returnFiber, newChild);
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Warns if there is a duplicate or missing key
+   */
+  function warnOnInvalidKey(
+    returnFiber: Fiber,
+    workInProgress: Fiber,
+    child: mixed,
+    knownKeys: Set<string> | null,
+  ): Set<string> | null {
+    if (__DEV__) {
+      if (typeof child !== 'object' || child === null) {
+        return knownKeys;
+      }
+      switch (child.$$typeof) {
+        case REACT_ELEMENT_TYPE:
+        case REACT_PORTAL_TYPE:
+          warnForMissingKey(returnFiber, workInProgress, child);
+          const key = child.key;
+          if (typeof key !== 'string') {
+            break;
+          }
+          if (knownKeys === null) {
+            knownKeys = new Set();
+            knownKeys.add(key);
+            break;
+          }
+          if (!knownKeys.has(key)) {
+            knownKeys.add(key);
+            break;
+          }
+          runWithFiberInDEV(workInProgress, () => {
+            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 ' +
+                'duplicated and/or omitted — the behavior is unsupported and ' +
+                'could change in a future version.',
+              key,
+            );
+          });
+          break;
+        case REACT_LAZY_TYPE: {
+          const resolvedChild = resolveLazy((child: any));
+          warnOnInvalidKey(
+            returnFiber,
+            workInProgress,
+            resolvedChild,
+            knownKeys,
+          );
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    return knownKeys;
+  }
+
+  function reconcileChildrenArray(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChildren: Array<any>,
+    lanes: Lanes,
+  ): Fiber | null {
+    // This algorithm can't optimize by searching from both ends since we
+    // don't have backpointers on fibers. I'm trying to see how far we can get
+    // with that model. If it ends up not being worth the tradeoffs, we can
+    // add it later.
+
+    // Even with a two ended optimization, we'd want to optimize for the case
+    // where there are few changes and brute force the comparison instead of
+    // going for the Map. It'd like to explore hitting that path first in
+    // forward-only mode and only go for the Map once we notice that we need
+    // lots of look ahead. This doesn't handle reversal as well as two ended
+    // search but that's unusual. Besides, for the two ended optimization to
+    // work on Iterables, we'd need to copy the whole set.
+
+    // In this first iteration, we'll just live with hitting the bad case
+    // (adding everything to a Map) in for every insert/move.
+
+    // If you change this code, also update reconcileChildrenIterator() which
+    // uses the same algorithm.
+
+    let knownKeys: Set<string> | null = null;
+
+    let resultingFirstChild: Fiber | null = null;
+    let previousNewFiber: Fiber | null = null;
+
+    let oldFiber = currentFirstChild;
+    let lastPlacedIndex = 0;
+    let newIdx = 0;
+    let nextOldFiber = null;
+    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
+      if (oldFiber.index > newIdx) {
+        nextOldFiber = oldFiber;
+        oldFiber = null;
+      } else {
+        nextOldFiber = oldFiber.sibling;
+      }
+      const newFiber = updateSlot(
+        returnFiber,
+        oldFiber,
+        newChildren[newIdx],
+        lanes,
+      );
+      if (newFiber === null) {
+        // TODO: This breaks on empty slots like null children. That's
+        // unfortunate because it triggers the slow path all the time. We need
+        // a better way to communicate whether this was a miss or null,
+        // boolean, undefined, etc.
+        if (oldFiber === null) {
+          oldFiber = nextOldFiber;
+        }
+        break;
+      }
+
+      if (__DEV__) {
+        knownKeys = warnOnInvalidKey(
+          returnFiber,
+          newFiber,
+          newChildren[newIdx],
+          knownKeys,
+        );
+      }
+
+      if (shouldTrackSideEffects) {
+        if (oldFiber && newFiber.alternate === null) {
+          // We matched the slot, but we didn't reuse the existing fiber, so we
+          // need to delete the existing child.
+          deleteChild(returnFiber, oldFiber);
+        }
+      }
+      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
+      if (previousNewFiber === null) {
+        // TODO: Move out of the loop. This only happens for the first run.
+        resultingFirstChild = newFiber;
+      } else {
+        // TODO: Defer siblings if we're not at the right index for this slot.
+        // I.e. if we had null values before, then we want to defer this
+        // for each null value. However, we also don't want to call updateSlot
+        // with the previous one.
+        previousNewFiber.sibling = newFiber;
+      }
+      previousNewFiber = newFiber;
+      oldFiber = nextOldFiber;
+    }
+
+    if (newIdx === newChildren.length) {
+      // We've reached the end of the new children. We can delete the rest.
+      deleteRemainingChildren(returnFiber, oldFiber);
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
+      return resultingFirstChild;
+    }
+
+    if (oldFiber === null) {
+      // If we don't have any more existing children we can choose a fast path
+      // since the rest will all be insertions.
+      for (; newIdx < newChildren.length; newIdx++) {
+        const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
+        if (newFiber === null) {
+          continue;
+        }
+        if (__DEV__) {
+          knownKeys = warnOnInvalidKey(
+            returnFiber,
+            newFiber,
+            newChildren[newIdx],
+            knownKeys,
+          );
+        }
+        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
+        if (previousNewFiber === null) {
+          // TODO: Move out of the loop. This only happens for the first run.
+          resultingFirstChild = newFiber;
+        } else {
+          previousNewFiber.sibling = newFiber;
+        }
+        previousNewFiber = newFiber;
+      }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
+      return resultingFirstChild;
+    }
+
+    // Add all children to a key map for quick lookups.
+    const existingChildren = mapRemainingChildren(oldFiber);
+
+    // Keep scanning and use the map to restore deleted items as moves.
+    for (; newIdx < newChildren.length; newIdx++) {
+      const newFiber = updateFromMap(
+        existingChildren,
+        returnFiber,
+        newIdx,
+        newChildren[newIdx],
+        lanes,
+      );
+      if (newFiber !== null) {
+        if (__DEV__) {
+          knownKeys = warnOnInvalidKey(
+            returnFiber,
+            newFiber,
+            newChildren[newIdx],
+            knownKeys,
+          );
+        }
+        if (shouldTrackSideEffects) {
+          const currentFiber = newFiber.alternate;
+          if (currentFiber !== null) {
+            // The new fiber is a work in progress, but if there exists a
+            // current, that means that we reused the fiber. We need to delete
+            // it from the child list so that we don't add it to the deletion
+            // list.
+            if (
+              enableOptimisticKey &&
+              currentFiber.key === REACT_OPTIMISTIC_KEY
+            ) {
+              existingChildren.delete(-newIdx - 1);
+            } else {
+              existingChildren.delete(
+                currentFiber.key === null ? newIdx : currentFiber.key,
+              );
+            }
+          }
+        }
+        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
+        if (previousNewFiber === null) {
+          resultingFirstChild = newFiber;
+        } else {
+          previousNewFiber.sibling = newFiber;
+        }
+        previousNewFiber = newFiber;
+      }
+    }
+
+    if (shouldTrackSideEffects) {
+      // Any existing children that weren't consumed above were deleted. We need
+      // to add them to the deletion list.
+      existingChildren.forEach(child => deleteChild(returnFiber, child));
+    }
+
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
+    return resultingFirstChild;
+  }
+
+  function reconcileChildrenIteratable(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChildrenIterable: Iterable<mixed>,
+    lanes: Lanes,
+  ): Fiber | null {
+    // This is the same implementation as reconcileChildrenArray(),
+    // but using the iterator instead.
+
+    const iteratorFn = getIteratorFn(newChildrenIterable);
+
+    if (typeof iteratorFn !== 'function') {
+      throw new Error(
+        'An object is not an iterable. This error is likely caused by a bug in ' +
+          'React. Please file an issue.',
+      );
+    }
+
+    const newChildren = iteratorFn.call(newChildrenIterable);
+
+    if (__DEV__) {
+      if (newChildren === newChildrenIterable) {
+        // We don't support rendering Generators as props because it's a mutation.
+        // See https://github.com/facebook/react/issues/12995
+        // We do support generators if they were created by a GeneratorFunction component
+        // as its direct child since we can recreate those by rerendering the component
+        // as needed.
+        const isGeneratorComponent =
+          returnFiber.tag === FunctionComponent &&
+          // $FlowFixMe[method-unbinding]
+          Object.prototype.toString.call(returnFiber.type) ===
+            '[object GeneratorFunction]' &&
+          // $FlowFixMe[method-unbinding]
+          Object.prototype.toString.call(newChildren) === '[object Generator]';
+        if (!isGeneratorComponent) {
+          if (!didWarnAboutGenerators) {
+            console.error(
+              'Using Iterators 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. You can also use an ' +
+                'Iterable that can iterate multiple times over the same items.',
+            );
+          }
+          didWarnAboutGenerators = true;
+        }
+      } else if ((newChildrenIterable: any).entries === iteratorFn) {
+        // Warn about using Maps as children
+        if (!didWarnAboutMaps) {
+          console.error(
+            'Using Maps as children is not supported. ' +
+              'Use an array of keyed ReactElements instead.',
+          );
+          didWarnAboutMaps = true;
+        }
+      }
+    }
+
+    return reconcileChildrenIterator(
+      returnFiber,
+      currentFirstChild,
+      newChildren,
+      lanes,
+    );
+  }
+
+  function reconcileChildrenAsyncIteratable(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChildrenIterable: AsyncIterable<mixed>,
+    lanes: Lanes,
+  ): Fiber | null {
+    const newChildren = newChildrenIterable[ASYNC_ITERATOR]();
+
+    if (__DEV__) {
+      if (newChildren === newChildrenIterable) {
+        // We don't support rendering AsyncGenerators as props because it's a mutation.
+        // We do support generators if they were created by a AsyncGeneratorFunction component
+        // as its direct child since we can recreate those by rerendering the component
+        // as needed.
+        const isGeneratorComponent =
+          returnFiber.tag === FunctionComponent &&
+          // $FlowFixMe[method-unbinding]
+          Object.prototype.toString.call(returnFiber.type) ===
+            '[object AsyncGeneratorFunction]' &&
+          // $FlowFixMe[method-unbinding]
+          Object.prototype.toString.call(newChildren) ===
+            '[object AsyncGenerator]';
+        if (!isGeneratorComponent) {
+          if (!didWarnAboutGenerators) {
+            console.error(
+              'Using AsyncIterators as children is unsupported and will likely yield ' +
+                'unexpected results because enumerating a generator mutates it. ' +
+                'You can use an AsyncIterable that can iterate multiple times over ' +
+                'the same items.',
+            );
+          }
+          didWarnAboutGenerators = true;
+        }
+      }
+    }
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
+
+    // To save bytes, we reuse the logic by creating a synchronous Iterable and
+    // reusing that code path.
+    const iterator: Iterator<mixed> = ({
+      next(): IteratorResult<mixed, void> {
+        return unwrapThenable(newChildren.next());
+      },
+    }: any);
+
+    return reconcileChildrenIterator(
+      returnFiber,
+      currentFirstChild,
+      iterator,
+      lanes,
+    );
+  }
+
+  function reconcileChildrenIterator(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChildren: ?Iterator<mixed>,
+    lanes: Lanes,
+  ): Fiber | null {
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
+
+    let resultingFirstChild: Fiber | null = null;
+    let previousNewFiber: Fiber | null = null;
+
+    let oldFiber = currentFirstChild;
+    let lastPlacedIndex = 0;
+    let newIdx = 0;
+    let nextOldFiber = null;
+
+    let knownKeys: Set<string> | null = null;
+
+    let step = newChildren.next();
+    for (
+      ;
+      oldFiber !== null && !step.done;
+      newIdx++, step = newChildren.next()
+    ) {
+      if (oldFiber.index > newIdx) {
+        nextOldFiber = oldFiber;
+        oldFiber = null;
+      } else {
+        nextOldFiber = oldFiber.sibling;
+      }
+      const newFiber = updateSlot(returnFiber, oldFiber, step.value, lanes);
+      if (newFiber === null) {
+        // TODO: This breaks on empty slots like null children. That's
+        // unfortunate because it triggers the slow path all the time. We need
+        // a better way to communicate whether this was a miss or null,
+        // boolean, undefined, etc.
+        if (oldFiber === null) {
+          oldFiber = nextOldFiber;
+        }
+        break;
+      }
+
+      if (__DEV__) {
+        knownKeys = warnOnInvalidKey(
+          returnFiber,
+          newFiber,
+          step.value,
+          knownKeys,
+        );
+      }
+
+      if (shouldTrackSideEffects) {
+        if (oldFiber && newFiber.alternate === null) {
+          // We matched the slot, but we didn't reuse the existing fiber, so we
+          // need to delete the existing child.
+          deleteChild(returnFiber, oldFiber);
+        }
+      }
+      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
+      if (previousNewFiber === null) {
+        // TODO: Move out of the loop. This only happens for the first run.
+        resultingFirstChild = newFiber;
+      } else {
+        // TODO: Defer siblings if we're not at the right index for this slot.
+        // I.e. if we had null values before, then we want to defer this
+        // for each null value. However, we also don't want to call updateSlot
+        // with the previous one.
+        previousNewFiber.sibling = newFiber;
+      }
+      previousNewFiber = newFiber;
+      oldFiber = nextOldFiber;
+    }
+
+    if (step.done) {
+      // We've reached the end of the new children. We can delete the rest.
+      deleteRemainingChildren(returnFiber, oldFiber);
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
+      return resultingFirstChild;
+    }
+
+    if (oldFiber === null) {
+      // If we don't have any more existing children we can choose a fast path
+      // since the rest will all be insertions.
+      for (; !step.done; newIdx++, step = newChildren.next()) {
+        const newFiber = createChild(returnFiber, step.value, lanes);
+        if (newFiber === null) {
+          continue;
+        }
+        if (__DEV__) {
+          knownKeys = warnOnInvalidKey(
+            returnFiber,
+            newFiber,
+            step.value,
+            knownKeys,
+          );
+        }
+        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
+        if (previousNewFiber === null) {
+          // TODO: Move out of the loop. This only happens for the first run.
+          resultingFirstChild = newFiber;
+        } else {
+          previousNewFiber.sibling = newFiber;
+        }
+        previousNewFiber = newFiber;
+      }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
+      return resultingFirstChild;
+    }
+
+    // Add all children to a key map for quick lookups.
+    const existingChildren = mapRemainingChildren(oldFiber);
+
+    // Keep scanning and use the map to restore deleted items as moves.
+    for (; !step.done; newIdx++, step = newChildren.next()) {
+      const newFiber = updateFromMap(
+        existingChildren,
+        returnFiber,
+        newIdx,
+        step.value,
+        lanes,
+      );
+      if (newFiber !== null) {
+        if (__DEV__) {
+          knownKeys = warnOnInvalidKey(
+            returnFiber,
+            newFiber,
+            step.value,
+            knownKeys,
+          );
+        }
+        if (shouldTrackSideEffects) {
+          const currentFiber = newFiber.alternate;
+          if (currentFiber !== null) {
+            // The new fiber is a work in progress, but if there exists a
+            // current, that means that we reused the fiber. We need to delete
+            // it from the child list so that we don't add it to the deletion
+            // list.
+            if (
+              enableOptimisticKey &&
+              currentFiber.key === REACT_OPTIMISTIC_KEY
+            ) {
+              existingChildren.delete(-newIdx - 1);
+            } else {
+              existingChildren.delete(
+                currentFiber.key === null ? newIdx : currentFiber.key,
+              );
+            }
+          }
+        }
+        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
+        if (previousNewFiber === null) {
+          resultingFirstChild = newFiber;
+        } else {
+          previousNewFiber.sibling = newFiber;
+        }
+        previousNewFiber = newFiber;
+      }
+    }
+
+    if (shouldTrackSideEffects) {
+      // Any existing children that weren't consumed above were deleted. We need
+      // to add them to the deletion list.
+      existingChildren.forEach(child => deleteChild(returnFiber, child));
+    }
+
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
+    return resultingFirstChild;
+  }
+
+  function reconcileSingleTextNode(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    textContent: string,
+    lanes: Lanes,
+  ): Fiber {
+    // There's no need to check for keys on text nodes since we don't have a
+    // way to define them.
+    if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
+      // We already have an existing node so let's just update it and delete
+      // the rest.
+      deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
+      const existing = useFiber(currentFirstChild, textContent);
+      existing.return = returnFiber;
+      return existing;
+    }
+    // The existing first child is not a text node so we need to create one
+    // and delete the existing ones.
+    deleteRemainingChildren(returnFiber, currentFirstChild);
+    const created = createFiberFromText(textContent, returnFiber.mode, lanes);
+    created.return = returnFiber;
+    if (__DEV__) {
+      // We treat the parent as the owner for stack purposes.
+      created._debugOwner = returnFiber;
+      created._debugTask = returnFiber._debugTask;
+      created._debugInfo = currentDebugInfo;
+    }
+    return created;
+  }
+
+  function reconcileSingleElement(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    element: ReactElement,
+    lanes: Lanes,
+  ): Fiber {
+    const key = element.key;
+    let child = currentFirstChild;
+    while (child !== null) {
+      // TODO: If key === null and child.key === null, then this only applies to
+      // the first item in the list.
+      if (
+        child.key === key ||
+        (enableOptimisticKey && child.key === REACT_OPTIMISTIC_KEY)
+      ) {
+        const elementType = element.type;
+        if (elementType === REACT_FRAGMENT_TYPE) {
+          if (child.tag === Fragment) {
+            deleteRemainingChildren(returnFiber, child.sibling);
+            const existing = useFiber(child, element.props.children);
+            if (enableOptimisticKey) {
+              // If the old key was optimistic we need to now save the real one.
+              existing.key = key;
+            }
+            if (enableFragmentRefs) {
+              coerceRef(existing, element);
+            }
+            existing.return = returnFiber;
+            if (__DEV__) {
+              existing._debugOwner = element._owner;
+              existing._debugInfo = currentDebugInfo;
+            }
+            validateFragmentProps(element, existing, returnFiber);
+            return existing;
+          }
+        } else {
+          if (
+            child.elementType === elementType ||
+            // Keep this check inline so it only runs on the false path:
+            (__DEV__
+              ? isCompatibleFamilyForHotReloading(child, element)
+              : false) ||
+            // Lazy types should reconcile their resolved type.
+            // We need to do this after the Hot Reloading check above,
+            // because hot reloading has different semantics than prod because
+            // it doesn't resuspend. So we can't let the call below suspend.
+            (typeof elementType === 'object' &&
+              elementType !== null &&
+              elementType.$$typeof === REACT_LAZY_TYPE &&
+              resolveLazy(elementType) === child.type)
+          ) {
+            deleteRemainingChildren(returnFiber, child.sibling);
+            const existing = useFiber(child, element.props);
+            if (enableOptimisticKey) {
+              // If the old key was optimistic we need to now save the real one.
+              existing.key = key;
+            }
+            coerceRef(existing, element);
+            existing.return = returnFiber;
+            if (__DEV__) {
+              existing._debugOwner = element._owner;
+              existing._debugInfo = currentDebugInfo;
+            }
+            return existing;
+          }
+        }
+        // Didn't match.
+        deleteRemainingChildren(returnFiber, child);
+        break;
+      } else {
+        deleteChild(returnFiber, child);
+      }
+      child = child.sibling;
+    }
+
+    if (element.type === REACT_FRAGMENT_TYPE) {
+      const created = createFiberFromFragment(
+        element.props.children,
+        returnFiber.mode,
+        lanes,
+        element.key,
+      );
+      if (enableFragmentRefs) {
+        coerceRef(created, element);
+      }
+      created.return = returnFiber;
+      if (__DEV__) {
+        // We treat the parent as the owner for stack purposes.
+        created._debugOwner = returnFiber;
+        created._debugTask = returnFiber._debugTask;
+        created._debugInfo = currentDebugInfo;
+      }
+      validateFragmentProps(element, created, returnFiber);
+      return created;
+    } else {
+      const created = createFiberFromElement(element, returnFiber.mode, lanes);
+      coerceRef(created, element);
+      created.return = returnFiber;
+      if (__DEV__) {
+        created._debugInfo = currentDebugInfo;
+      }
+      return created;
+    }
+  }
+
+  function reconcileSinglePortal(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    portal: ReactPortal,
+    lanes: Lanes,
+  ): Fiber {
+    const key = portal.key;
+    let child = currentFirstChild;
+    while (child !== null) {
+      // TODO: If key === null and child.key === null, then this only applies to
+      // the first item in the list.
+      if (
+        child.key === key ||
+        (enableOptimisticKey && child.key === REACT_OPTIMISTIC_KEY)
+      ) {
+        if (
+          child.tag === HostPortal &&
+          child.stateNode.containerInfo === portal.containerInfo &&
+          child.stateNode.implementation === portal.implementation
+        ) {
+          deleteRemainingChildren(returnFiber, child.sibling);
+          const existing = useFiber(child, portal.children || []);
+          if (enableOptimisticKey) {
+            // If the old key was optimistic we need to now save the real one.
+            existing.key = key;
+          }
+          existing.return = returnFiber;
+          return existing;
+        } else {
+          deleteRemainingChildren(returnFiber, child);
+          break;
+        }
+      } else {
+        deleteChild(returnFiber, child);
+      }
+      child = child.sibling;
+    }
+
+    const created = createFiberFromPortal(portal, returnFiber.mode, lanes);
+    created.return = returnFiber;
+    return created;
+  }
+
+  // This API will tag the children with the side-effect of the reconciliation
+  // itself. They will be added to the side-effect list as we pass through the
+  // children and the parent.
+  function reconcileChildFibersImpl(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChild: any,
+    lanes: Lanes,
+  ): Fiber | null {
+    // This function is only recursive for Usables/Lazy and not nested arrays.
+    // That's so that using a Lazy wrapper is unobservable to the Fragment
+    // convention.
+    // If the top level item is an array, we treat it as a set of children,
+    // not as a fragment. Nested arrays on the other hand will be treated as
+    // fragment nodes. Recursion happens at the normal flow.
+
+    // Handle top level unkeyed fragments without refs (enableFragmentRefs)
+    // as if they were arrays. This leads to an ambiguity between <>{[...]}</> and <>...</>.
+    // We treat the ambiguous cases above the same.
+    // We don't use recursion here because a fragment inside a fragment
+    // is no longer considered "top level" for these purposes.
+    const isUnkeyedUnrefedTopLevelFragment =
+      typeof newChild === 'object' &&
+      newChild !== null &&
+      newChild.type === REACT_FRAGMENT_TYPE &&
+      newChild.key === null &&
+      (enableFragmentRefs ? newChild.props.ref === undefined : true);
+
+    if (isUnkeyedUnrefedTopLevelFragment) {
+      validateFragmentProps(newChild, null, returnFiber);
+      newChild = newChild.props.children;
+    }
+
+    // Handle object types
+    if (typeof newChild === 'object' && newChild !== null) {
+      switch (newChild.$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          const firstChild = placeSingleChild(
+            reconcileSingleElement(
+              returnFiber,
+              currentFirstChild,
+              newChild,
+              lanes,
+            ),
+          );
+          currentDebugInfo = prevDebugInfo;
+          return firstChild;
+        }
+        case REACT_PORTAL_TYPE:
+          return placeSingleChild(
+            reconcileSinglePortal(
+              returnFiber,
+              currentFirstChild,
+              newChild,
+              lanes,
+            ),
+          );
+        case REACT_LAZY_TYPE: {
+          const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+          const result = resolveLazy((newChild: any));
+          const firstChild = reconcileChildFibersImpl(
+            returnFiber,
+            currentFirstChild,
+            result,
+            lanes,
+          );
+          currentDebugInfo = prevDebugInfo;
+          return firstChild;
+        }
+      }
+
+      if (isArray(newChild)) {
+        const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+        const firstChild = reconcileChildrenArray(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return firstChild;
+      }
+
+      if (getIteratorFn(newChild)) {
+        const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+        const firstChild = reconcileChildrenIteratable(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return firstChild;
+      }
+
+      if (
+        enableAsyncIterableChildren &&
+        typeof newChild[ASYNC_ITERATOR] === 'function'
+      ) {
+        const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
+        const firstChild = reconcileChildrenAsyncIteratable(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return firstChild;
+      }
+
+      // Usables are a valid React node type. When React encounters a Usable in
+      // a child position, it unwraps it using the same algorithm as `use`. For
+      // example, for promises, React will throw an exception to unwind the
+      // stack, then replay the component once the promise resolves.
+      //
+      // A difference from `use` is that React will keep unwrapping the value
+      // until it reaches a non-Usable type.
+      //
+      // e.g. Usable<Usable<Usable<T>>> should resolve to T
+      //
+      // The structure is a bit unfortunate. Ideally, we shouldn't need to
+      // replay the entire begin phase of the parent fiber in order to reconcile
+      // the children again. This would require a somewhat significant refactor,
+      // because reconcilation happens deep within the begin phase, and
+      // depending on the type of work, not always at the end. We should
+      // consider as an future improvement.
+      if (typeof newChild.then === 'function') {
+        const thenable: Thenable<any> = (newChild: any);
+        const prevDebugInfo = pushDebugInfo((thenable: any)._debugInfo);
+        const firstChild = reconcileChildFibersImpl(
+          returnFiber,
+          currentFirstChild,
+          unwrapThenable(thenable),
+          lanes,
+        );
+        currentDebugInfo = prevDebugInfo;
+        return firstChild;
+      }
+
+      if (newChild.$$typeof === REACT_CONTEXT_TYPE) {
+        const context: ReactContext<mixed> = (newChild: any);
+        return reconcileChildFibersImpl(
+          returnFiber,
+          currentFirstChild,
+          readContextDuringReconciliation(returnFiber, context, lanes),
+          lanes,
+        );
+      }
+
+      throwOnInvalidObjectType(returnFiber, newChild);
+    }
+
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
+    ) {
+      return placeSingleChild(
+        reconcileSingleTextNode(
+          returnFiber,
+          currentFirstChild,
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
+          '' + newChild,
+          lanes,
+        ),
+      );
+    }
+
+    if (__DEV__) {
+      if (typeof newChild === 'function') {
+        warnOnFunctionType(returnFiber, newChild);
+      }
+      if (typeof newChild === 'symbol') {
+        warnOnSymbolType(returnFiber, newChild);
+      }
+    }
+
+    // Remaining cases are all treated as empty.
+    return deleteRemainingChildren(returnFiber, currentFirstChild);
+  }
+
+  function reconcileChildFibers(
+    returnFiber: Fiber,
+    currentFirstChild: Fiber | null,
+    newChild: any,
+    lanes: Lanes,
+  ): Fiber | null {
+    const prevDebugInfo = currentDebugInfo;
+    currentDebugInfo = null;
+    try {
+      // This indirection only exists so we can reset `thenableState` at the end.
+      // It should get inlined by Closure.
+      thenableIndexCounter = 0;
+      const firstChildFiber = reconcileChildFibersImpl(
+        returnFiber,
+        currentFirstChild,
+        newChild,
+        lanes,
+      );
+      thenableState = null;
+      // Don't bother to reset `thenableIndexCounter` to 0 because it always gets
+      // set at the beginning.
+      return firstChildFiber;
+    } catch (x) {
+      if (
+        x === SuspenseException ||
+        x === SuspenseActionException ||
+        (!disableLegacyMode &&
+          (returnFiber.mode & ConcurrentMode) === NoMode &&
+          typeof x === 'object' &&
+          x !== null &&
+          typeof x.then === 'function')
+      ) {
+        // Suspense exceptions need to read the current suspended state before
+        // yielding and replay it using the same sequence so this trick doesn't
+        // work here.
+        // Suspending in legacy mode actually mounts so if we let the child
+        // mount then we delete its state in an update.
+        throw x;
+      }
+      // Something errored during reconciliation but it's conceptually a child that
+      // errored and not the current component itself so we create a virtual child
+      // that throws in its begin phase. That way the current component can handle
+      // the error or suspending if needed.
+      const throwFiber = createFiberFromThrow(x, returnFiber.mode, lanes);
+      throwFiber.return = returnFiber;
+      if (__DEV__) {
+        const debugInfo = (throwFiber._debugInfo = currentDebugInfo);
+        // Conceptually the error's owner should ideally be captured when the
+        // Error constructor is called but we don't override them to capture our
+        // `owner`. So instead, we use the nearest parent as the owner/task of the
+        // error. This is usually the same thing when it's thrown from the same
+        // async component but not if you await a promise started from a different
+        // component/task.
+        // In newer Chrome, Error constructor does capture the Task which is what
+        // is logged by reportError. In that case this debugTask isn't used.
+        throwFiber._debugOwner = returnFiber._debugOwner;
+        throwFiber._debugTask = returnFiber._debugTask;
+        if (debugInfo != null) {
+          for (let i = debugInfo.length - 1; i >= 0; i--) {
+            if (typeof debugInfo[i].stack === 'string') {
+              throwFiber._debugOwner = (debugInfo[i]: any);
+              throwFiber._debugTask = debugInfo[i].debugTask;
+              break;
+            }
+          }
+        }
+      }
+      return throwFiber;
+    } finally {
+      currentDebugInfo = prevDebugInfo;
+    }
+  }
+
+  return reconcileChildFibers;
+}
+
+export const reconcileChildFibers: ChildReconciler =
+  createChildReconciler(true);
+export const mountChildFibers: ChildReconciler = createChildReconciler(false);
+
+export function resetChildReconcilerOnUnwind(): void {
+  // On unwind, clear any pending thenables that were used.
+  thenableState = null;
+  thenableIndexCounter = 0;
+}
+
+export function cloneChildFibers(
+  current: Fiber | null,
+  workInProgress: Fiber,
+): void {
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
+
+  if (workInProgress.child === null) {
+    return;
+  }
+
+  let currentChild = workInProgress.child;
+  let newChild = createWorkInProgress(currentChild, currentChild.pendingProps);
+  workInProgress.child = newChild;
+
+  newChild.return = workInProgress;
+  while (currentChild.sibling !== null) {
+    currentChild = currentChild.sibling;
+    newChild = newChild.sibling = createWorkInProgress(
+      currentChild,
+      currentChild.pendingProps,
+    );
+    newChild.return = workInProgress;
+  }
+  newChild.sibling = null;
+}
+
+// Reset a workInProgress child set to prepare it for a second pass.
+export function resetChildFibers(workInProgress: Fiber, lanes: Lanes): void {
+  let child = workInProgress.child;
+  while (child !== null) {
+    resetWorkInProgress(child, lanes);
+    child = child.sibling;
+  }
+}
+
+function validateSuspenseListNestedChild(childSlot: mixed, index: number) {
+  if (__DEV__) {
+    const isAnArray = isArray(childSlot);
+    const isIterable =
+      !isAnArray && typeof getIteratorFn(childSlot) === 'function';
+    const isAsyncIterable =
+      enableAsyncIterableChildren &&
+      typeof childSlot === 'object' &&
+      childSlot !== null &&
+      typeof (childSlot: any)[ASYNC_ITERATOR] === 'function';
+    if (isAnArray || isIterable || isAsyncIterable) {
+      const type = isAnArray
+        ? 'array'
+        : isAsyncIterable
+          ? 'async iterable'
+          : '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;
+}
+
+export function validateSuspenseListChildren(
+  children: mixed,
+  revealOrder: SuspenseListRevealOrder,
+) {
+  if (__DEV__) {
+    if (
+      (revealOrder == null ||
+        revealOrder === 'forwards' ||
+        revealOrder === 'backwards' ||
+        revealOrder === 'unstable_legacy-backwards') &&
+      children !== undefined &&
+      children !== null &&
+      children !== false
+    ) {
+      if (isArray(children)) {
+        for (let i = 0; i < children.length; i++) {
+          if (!validateSuspenseListNestedChild(children[i], i)) {
+            return;
+          }
+        }
+      } else {
+        const 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 if (
+          enableAsyncIterableChildren &&
+          typeof (children: any)[ASYNC_ITERATOR] === 'function'
+        ) {
+          // TODO: Technically we should warn for nested arrays inside the
+          // async iterable but it would require unwrapping the array.
+          // However, this mistake is not as easy to make so it's ok not to warn.
+        } else if (
+          enableAsyncIterableChildren &&
+          children.$$typeof === REACT_ELEMENT_TYPE &&
+          typeof children.type === 'function' &&
+          // $FlowFixMe
+          (Object.prototype.toString.call(children.type) ===
+            '[object GeneratorFunction]' ||
+            // $FlowFixMe
+            Object.prototype.toString.call(children.type) ===
+              '[object AsyncGeneratorFunction]')
+        ) {
+          console.error(
+            'A generator Component was passed to a <SuspenseList revealOrder="%s" />. ' +
+              'This is not supported as a way to generate lists. Instead, pass an ' +
+              'iterable as the children.',
+            revealOrder,
+          );
+        } 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,
+          );
+        }
+      }
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js
new file mode 100644
index 00000000000..88d0e28512d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactCurrentFiber.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {getOwnerStackByFiberInDev} from './ReactFiberComponentStack';
+import {getComponentNameFromOwner} from 'react-reconciler/src/getComponentNameFromFiber';
+
+export let current: Fiber | null = null;
+export let isRendering: boolean = false;
+
+export function getCurrentFiberOwnerNameInDevOrNull(): string | null {
+  if (__DEV__) {
+    if (current === null) {
+      return null;
+    }
+    const owner = current._debugOwner;
+    if (owner != null) {
+      return getComponentNameFromOwner(owner);
+    }
+  }
+  return null;
+}
+
+function getCurrentFiberStackInDev(): string {
+  if (__DEV__) {
+    if (current === null) {
+      return '';
+    }
+    // Safe because if current fiber exists, we are reconciling,
+    // and it is guaranteed to be the work-in-progress version.
+    // TODO: The above comment is not actually true. We might be
+    // in a commit phase or preemptive set state callback.
+    return getOwnerStackByFiberInDev(current);
+  }
+  return '';
+}
+
+export function runWithFiberInDEV<A0, A1, A2, A3, A4, T>(
+  fiber: null | Fiber,
+  callback: (A0, A1, A2, A3, A4) => T,
+  arg0: A0,
+  arg1: A1,
+  arg2: A2,
+  arg3: A3,
+  arg4: A4,
+): T {
+  if (__DEV__) {
+    const previousFiber = current;
+    setCurrentFiber(fiber);
+    try {
+      if (fiber !== null && fiber._debugTask) {
+        return fiber._debugTask.run(
+          callback.bind(null, arg0, arg1, arg2, arg3, arg4),
+        );
+      }
+      return callback(arg0, arg1, arg2, arg3, arg4);
+    } finally {
+      setCurrentFiber(previousFiber);
+    }
+  }
+  // These errors should never make it into a build so we don't need to encode them in codes.json
+  // eslint-disable-next-line react-internal/prod-error-codes
+  throw new Error(
+    'runWithFiberInDEV should never be called in production. This is a bug in React.',
+  );
+}
+
+export function resetCurrentFiber() {
+  if (__DEV__) {
+    ReactSharedInternals.getCurrentStack = null;
+    isRendering = false;
+  }
+  current = null;
+}
+
+export function setCurrentFiber(fiber: Fiber | null) {
+  if (__DEV__) {
+    ReactSharedInternals.getCurrentStack =
+      fiber === null ? null : getCurrentFiberStackInDev;
+    isRendering = false;
+  }
+  current = fiber;
+}
+
+export function setIsRendering(rendering: boolean) {
+  if (__DEV__) {
+    isRendering = rendering;
+  }
+}
+
+export function getIsRendering(): void | boolean {
+  if (__DEV__) {
+    return isRendering;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactEventPriorities.js b/packages/react-reconciler/src/ReactEventPriorities.js
new file mode 100644
index 00000000000..e28223e9d89
--- /dev/null
+++ b/packages/react-reconciler/src/ReactEventPriorities.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Lane, Lanes} from './ReactFiberLane';
+
+import {
+  NoLane,
+  SyncLane,
+  InputContinuousLane,
+  DefaultLane,
+  IdleLane,
+  getHighestPriorityLane,
+  includesNonIdleWork,
+} from './ReactFiberLane';
+
+export opaque type EventPriority = Lane;
+
+export const NoEventPriority: EventPriority = NoLane;
+export const DiscreteEventPriority: EventPriority = SyncLane;
+export const ContinuousEventPriority: EventPriority = InputContinuousLane;
+export const DefaultEventPriority: EventPriority = DefaultLane;
+export const IdleEventPriority: EventPriority = IdleLane;
+
+export function higherEventPriority(
+  a: EventPriority,
+  b: EventPriority,
+): EventPriority {
+  return a !== 0 && a < b ? a : b;
+}
+
+export function lowerEventPriority(
+  a: EventPriority,
+  b: EventPriority,
+): EventPriority {
+  return a === 0 || a > b ? a : b;
+}
+
+export function isHigherEventPriority(
+  a: EventPriority,
+  b: EventPriority,
+): boolean {
+  return a !== 0 && a < b;
+}
+
+export function eventPriorityToLane(updatePriority: EventPriority): Lane {
+  return updatePriority;
+}
+
+export function lanesToEventPriority(lanes: Lanes): EventPriority {
+  const lane = getHighestPriorityLane(lanes);
+  if (!isHigherEventPriority(DiscreteEventPriority, lane)) {
+    return DiscreteEventPriority;
+  }
+  if (!isHigherEventPriority(ContinuousEventPriority, lane)) {
+    return ContinuousEventPriority;
+  }
+  if (includesNonIdleWork(lane)) {
+    return DefaultEventPriority;
+  }
+  return IdleEventPriority;
+}
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
new file mode 100644
index 00000000000..7ab798ea22b
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -0,0 +1,959 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactElement} from 'shared/ReactElementType';
+import type {
+  ReactFragment,
+  ReactPortal,
+  ReactScope,
+  ViewTransitionProps,
+  ActivityProps,
+  ReactKey,
+} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
+import type {RootTag} from './ReactRootTags';
+import type {WorkTag} from './ReactWorkTags';
+import type {TypeOfMode} from './ReactTypeOfMode';
+import type {Lanes} from './ReactFiberLane';
+import type {ActivityInstance, SuspenseInstance} from './ReactFiberConfig';
+import type {
+  LegacyHiddenProps,
+  OffscreenProps,
+} from './ReactFiberOffscreenComponent';
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+
+import {
+  supportsResources,
+  supportsSingletons,
+  isHostHoistableType,
+  isHostSingletonType,
+} from './ReactFiberConfig';
+import {
+  enableProfilerTimer,
+  enableScopeAPI,
+  enableLegacyHidden,
+  enableTransitionTracing,
+  disableLegacyMode,
+  enableObjectFiber,
+  enableViewTransition,
+  enableSuspenseyImages,
+  enableOptimisticKey,
+} from 'shared/ReactFeatureFlags';
+import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
+import {ConcurrentRoot} from './ReactRootTags';
+import {
+  ClassComponent,
+  HostRoot,
+  HostComponent,
+  HostText,
+  HostPortal,
+  HostHoistable,
+  HostSingleton,
+  ForwardRef,
+  Fragment,
+  Mode,
+  ContextProvider,
+  ContextConsumer,
+  Profiler,
+  SuspenseComponent,
+  SuspenseListComponent,
+  DehydratedFragment,
+  FunctionComponent,
+  MemoComponent,
+  SimpleMemoComponent,
+  LazyComponent,
+  ScopeComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  TracingMarkerComponent,
+  Throw,
+  ViewTransitionComponent,
+  ActivityComponent,
+} from './ReactWorkTags';
+import {getComponentNameFromOwner} from 'react-reconciler/src/getComponentNameFromFiber';
+import {isDevToolsPresent} from './ReactFiberDevToolsHook';
+import {
+  resolveClassForHotReloading,
+  resolveFunctionForHotReloading,
+  resolveForwardRefForHotReloading,
+} from './ReactFiberHotReloading';
+import {NoLanes} from './ReactFiberLane';
+import {
+  NoMode,
+  ConcurrentMode,
+  ProfileMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
+  SuspenseyImagesMode,
+} from './ReactTypeOfMode';
+import {
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_CONTEXT_TYPE,
+  REACT_CONSUMER_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_SCOPE_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
+  REACT_TRACING_MARKER_TYPE,
+  REACT_ELEMENT_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE,
+} from 'shared/ReactSymbols';
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent';
+import {getHostContext} from './ReactFiberHostContext';
+import type {ReactComponentInfo} from '../../shared/ReactTypes';
+import isArray from 'shared/isArray';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+
+export type {Fiber};
+
+let hasBadMapPolyfill;
+
+if (__DEV__) {
+  hasBadMapPolyfill = false;
+  try {
+    const nonExtensibleObject = Object.preventExtensions({});
+    // eslint-disable-next-line no-new
+    new Map([[nonExtensibleObject, null]]);
+    // eslint-disable-next-line no-new
+    new Set([nonExtensibleObject]);
+  } catch (e) {
+    // TODO: Consider warning about bad polyfills
+    hasBadMapPolyfill = true;
+  }
+}
+
+function FiberNode(
+  this: $FlowFixMe,
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: ReactKey,
+  mode: TypeOfMode,
+) {
+  // Instance
+  this.tag = tag;
+  this.key = key;
+  this.elementType = null;
+  this.type = null;
+  this.stateNode = null;
+
+  // Fiber
+  this.return = null;
+  this.child = null;
+  this.sibling = null;
+  this.index = 0;
+
+  this.ref = null;
+  this.refCleanup = null;
+
+  this.pendingProps = pendingProps;
+  this.memoizedProps = null;
+  this.updateQueue = null;
+  this.memoizedState = null;
+  this.dependencies = null;
+
+  this.mode = mode;
+
+  // Effects
+  this.flags = NoFlags;
+  this.subtreeFlags = NoFlags;
+  this.deletions = null;
+
+  this.lanes = NoLanes;
+  this.childLanes = NoLanes;
+
+  this.alternate = null;
+
+  if (enableProfilerTimer) {
+    // Note: The following is done to avoid a v8 performance cliff.
+    //
+    // Initializing the fields below to smis and later updating them with
+    // double values will cause Fibers to end up having separate shapes.
+    // This behavior/bug has something to do with Object.preventExtension().
+    // Fortunately this only impacts DEV builds.
+    // Unfortunately it makes React unusably slow for some applications.
+    // To work around this, initialize the fields below with doubles.
+    //
+    // Learn more about this here:
+    // https://github.com/facebook/react/issues/14365
+    // https://bugs.chromium.org/p/v8/issues/detail?id=8538
+
+    this.actualDuration = -0;
+    this.actualStartTime = -1.1;
+    this.selfBaseDuration = -0;
+    this.treeBaseDuration = -0;
+  }
+
+  if (__DEV__) {
+    // This isn't directly used but is handy for debugging internals:
+    this._debugInfo = null;
+    this._debugOwner = null;
+    this._debugStack = null;
+    this._debugTask = null;
+    this._debugNeedsRemount = false;
+    this._debugHookTypes = null;
+    if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
+      Object.preventExtensions(this);
+    }
+  }
+}
+
+// This is a constructor function, rather than a POJO constructor, still
+// please ensure we do the following:
+// 1) Nobody should add any instance methods on this. Instance methods can be
+//    more difficult to predict when they get optimized and they are almost
+//    never inlined properly in static compilers.
+// 2) Nobody should rely on `instanceof Fiber` for type testing. We should
+//    always know when it is a fiber.
+// 3) We might want to experiment with using numeric keys since they are easier
+//    to optimize in a non-JIT environment.
+// 4) We can easily go from a constructor to a createFiber object literal if that
+//    is faster.
+// 5) It should be easy to port this to a C struct and keep a C implementation
+//    compatible.
+function createFiberImplClass(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: ReactKey,
+  mode: TypeOfMode,
+): Fiber {
+  // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
+  return new FiberNode(tag, pendingProps, key, mode);
+}
+
+function createFiberImplObject(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: ReactKey,
+  mode: TypeOfMode,
+): Fiber {
+  const fiber: Fiber = {
+    // Instance
+    // tag, key - defined at the bottom as dynamic properties
+    elementType: null,
+    type: null,
+    stateNode: null,
+
+    // Fiber
+    return: null,
+    child: null,
+    sibling: null,
+    index: 0,
+
+    ref: null,
+    refCleanup: null,
+
+    // pendingProps - defined at the bottom as dynamic properties
+    memoizedProps: null,
+    updateQueue: null,
+    memoizedState: null,
+    dependencies: null,
+
+    // Effects
+    flags: NoFlags,
+    subtreeFlags: NoFlags,
+    deletions: null,
+
+    lanes: NoLanes,
+    childLanes: NoLanes,
+
+    alternate: null,
+
+    // dynamic properties at the end for more efficient hermes bytecode
+    tag,
+    key,
+    pendingProps,
+    mode,
+  };
+
+  if (enableProfilerTimer) {
+    fiber.actualDuration = -0;
+    fiber.actualStartTime = -1.1;
+    fiber.selfBaseDuration = -0;
+    fiber.treeBaseDuration = -0;
+  }
+
+  if (__DEV__) {
+    // This isn't directly used but is handy for debugging internals:
+    fiber._debugInfo = null;
+    fiber._debugOwner = null;
+    fiber._debugStack = null;
+    fiber._debugTask = null;
+    fiber._debugNeedsRemount = false;
+    fiber._debugHookTypes = null;
+    if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
+      Object.preventExtensions(fiber);
+    }
+  }
+  return fiber;
+}
+
+const createFiber = enableObjectFiber
+  ? createFiberImplObject
+  : createFiberImplClass;
+
+function shouldConstruct(Component: Function) {
+  const prototype = Component.prototype;
+  return !!(prototype && prototype.isReactComponent);
+}
+
+export function isSimpleFunctionComponent(type: any): boolean {
+  return (
+    typeof type === 'function' &&
+    !shouldConstruct(type) &&
+    type.defaultProps === undefined
+  );
+}
+
+export function isFunctionClassComponent(
+  type: (...args: Array<any>) => mixed,
+): boolean {
+  return shouldConstruct(type);
+}
+
+// This is used to create an alternate fiber to do work on.
+export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
+  let workInProgress = current.alternate;
+  if (workInProgress === null) {
+    // We use a double buffering pooling technique because we know that we'll
+    // only ever need at most two versions of a tree. We pool the "other" unused
+    // node that we're free to reuse. This is lazily created to avoid allocating
+    // extra objects for things that are never updated. It also allow us to
+    // reclaim the extra memory if needed.
+    workInProgress = createFiber(
+      current.tag,
+      pendingProps,
+      current.key,
+      current.mode,
+    );
+    workInProgress.elementType = current.elementType;
+    workInProgress.type = current.type;
+    workInProgress.stateNode = current.stateNode;
+
+    if (__DEV__) {
+      // DEV-only fields
+
+      workInProgress._debugOwner = current._debugOwner;
+      workInProgress._debugStack = current._debugStack;
+      workInProgress._debugTask = current._debugTask;
+      workInProgress._debugHookTypes = current._debugHookTypes;
+    }
+
+    workInProgress.alternate = current;
+    current.alternate = workInProgress;
+  } else {
+    workInProgress.pendingProps = pendingProps;
+    // Needed because Blocks store data on type.
+    workInProgress.type = current.type;
+
+    // We already have an alternate.
+    // Reset the effect tag.
+    workInProgress.flags = NoFlags;
+
+    // The effects are no longer valid.
+    workInProgress.subtreeFlags = NoFlags;
+    workInProgress.deletions = null;
+
+    if (enableOptimisticKey) {
+      // For optimistic keys, the Fibers can have different keys if one is optimistic
+      // and the other one is filled in.
+      workInProgress.key = current.key;
+    }
+
+    if (enableProfilerTimer) {
+      // We intentionally reset, rather than copy, actualDuration & actualStartTime.
+      // This prevents time from endlessly accumulating in new commits.
+      // This has the downside of resetting values for different priority renders,
+      // But works for yielding (the common case) and should support resuming.
+      workInProgress.actualDuration = -0;
+      workInProgress.actualStartTime = -1.1;
+    }
+  }
+
+  // Reset all effects except static ones.
+  // Static effects are not specific to a render.
+  workInProgress.flags = current.flags & StaticMask;
+  workInProgress.childLanes = current.childLanes;
+  workInProgress.lanes = current.lanes;
+
+  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
+      : __DEV__
+        ? {
+            lanes: currentDependencies.lanes,
+            firstContext: currentDependencies.firstContext,
+            _debugThenableState: currentDependencies._debugThenableState,
+          }
+        : {
+            lanes: currentDependencies.lanes,
+            firstContext: currentDependencies.firstContext,
+          };
+
+  // These will be overridden during the parent's reconciliation
+  workInProgress.sibling = current.sibling;
+  workInProgress.index = current.index;
+  workInProgress.ref = current.ref;
+  workInProgress.refCleanup = current.refCleanup;
+
+  if (enableProfilerTimer) {
+    workInProgress.selfBaseDuration = current.selfBaseDuration;
+    workInProgress.treeBaseDuration = current.treeBaseDuration;
+  }
+
+  if (__DEV__) {
+    workInProgress._debugInfo = current._debugInfo;
+    workInProgress._debugNeedsRemount = current._debugNeedsRemount;
+    switch (workInProgress.tag) {
+      case FunctionComponent:
+      case SimpleMemoComponent:
+        workInProgress.type = resolveFunctionForHotReloading(current.type);
+        break;
+      case ClassComponent:
+        workInProgress.type = resolveClassForHotReloading(current.type);
+        break;
+      case ForwardRef:
+        workInProgress.type = resolveForwardRefForHotReloading(current.type);
+        break;
+      default:
+        break;
+    }
+  }
+
+  return workInProgress;
+}
+
+// Used to reuse a Fiber for a second pass.
+export function resetWorkInProgress(
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber {
+  // 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 flags but keep any Placement tags, since that's something
+  // that child fiber is setting, not the reconciliation.
+  workInProgress.flags &= StaticMask | Placement;
+
+  // The effects are no longer valid.
+
+  const current = workInProgress.alternate;
+  if (current === null) {
+    // Reset to createFiber's initial values.
+    workInProgress.childLanes = NoLanes;
+    workInProgress.lanes = renderLanes;
+
+    workInProgress.child = null;
+    workInProgress.subtreeFlags = NoFlags;
+    workInProgress.memoizedProps = null;
+    workInProgress.memoizedState = null;
+    workInProgress.updateQueue = null;
+
+    workInProgress.dependencies = null;
+
+    workInProgress.stateNode = 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.childLanes = current.childLanes;
+    workInProgress.lanes = current.lanes;
+
+    workInProgress.child = current.child;
+    workInProgress.subtreeFlags = NoFlags;
+    workInProgress.deletions = null;
+    workInProgress.memoizedProps = current.memoizedProps;
+    workInProgress.memoizedState = current.memoizedState;
+    workInProgress.updateQueue = current.updateQueue;
+    // Needed because Blocks store data on type.
+    // TODO: Blocks don't exist anymore. Do we still need this?
+    workInProgress.type = current.type;
+
+    if (enableOptimisticKey) {
+      // For optimistic keys, the Fibers can have different keys if one is optimistic
+      // and the other one is filled in.
+      workInProgress.key = current.key;
+    }
+
+    // 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
+        : __DEV__
+          ? {
+              lanes: currentDependencies.lanes,
+              firstContext: currentDependencies.firstContext,
+              _debugThenableState: currentDependencies._debugThenableState,
+            }
+          : {
+              lanes: currentDependencies.lanes,
+              firstContext: currentDependencies.firstContext,
+            };
+
+    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,
+  isStrictMode: boolean,
+): Fiber {
+  let mode: number;
+  if (disableLegacyMode || tag === ConcurrentRoot) {
+    mode = ConcurrentMode;
+    if (isStrictMode === true) {
+      mode |= StrictLegacyMode | StrictEffectsMode;
+    }
+  } else {
+    mode = NoMode;
+  }
+
+  if (__DEV__ || (enableProfilerTimer && isDevToolsPresent)) {
+    // dev: Enable profiling instrumentation by default.
+    // profile: enabled if DevTools is present or subtree is wrapped in <Profiler>.
+    // production: disabled.
+    mode |= ProfileMode;
+  }
+
+  return createFiber(HostRoot, null, null, mode);
+}
+
+// TODO: Get rid of this helper. Only createFiberFromElement should exist.
+export function createFiberFromTypeAndProps(
+  type: any, // React$ElementType
+  key: ReactKey,
+  pendingProps: any,
+  owner: null | ReactComponentInfo | Fiber,
+  mode: TypeOfMode,
+  lanes: Lanes,
+): Fiber {
+  let fiberTag: WorkTag = FunctionComponent;
+  // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
+  let resolvedType = type;
+  if (typeof type === 'function') {
+    if (shouldConstruct(type)) {
+      fiberTag = ClassComponent;
+      if (__DEV__) {
+        resolvedType = resolveClassForHotReloading(resolvedType);
+      }
+    } else {
+      if (__DEV__) {
+        resolvedType = resolveFunctionForHotReloading(resolvedType);
+      }
+    }
+  } else if (typeof type === 'string') {
+    if (supportsResources && supportsSingletons) {
+      const hostContext = getHostContext();
+      fiberTag = isHostHoistableType(type, pendingProps, hostContext)
+        ? HostHoistable
+        : isHostSingletonType(type)
+          ? HostSingleton
+          : HostComponent;
+    } else if (supportsResources) {
+      const hostContext = getHostContext();
+      fiberTag = isHostHoistableType(type, pendingProps, hostContext)
+        ? HostHoistable
+        : HostComponent;
+    } else if (supportsSingletons) {
+      fiberTag = isHostSingletonType(type) ? HostSingleton : HostComponent;
+    } else {
+      fiberTag = HostComponent;
+    }
+  } else {
+    getTag: switch (type) {
+      case REACT_ACTIVITY_TYPE:
+        return createFiberFromActivity(pendingProps, mode, lanes, key);
+      case REACT_FRAGMENT_TYPE:
+        return createFiberFromFragment(pendingProps.children, mode, lanes, key);
+      case REACT_STRICT_MODE_TYPE:
+        fiberTag = Mode;
+        mode |= StrictLegacyMode;
+        if (disableLegacyMode || (mode & ConcurrentMode) !== NoMode) {
+          // Strict effects should never run on legacy roots
+          mode |= StrictEffectsMode;
+        }
+        break;
+      case REACT_PROFILER_TYPE:
+        return createFiberFromProfiler(pendingProps, mode, lanes, key);
+      case REACT_SUSPENSE_TYPE:
+        return createFiberFromSuspense(pendingProps, mode, lanes, key);
+      case REACT_SUSPENSE_LIST_TYPE:
+        return createFiberFromSuspenseList(pendingProps, mode, lanes, key);
+      case REACT_LEGACY_HIDDEN_TYPE:
+        if (enableLegacyHidden) {
+          return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+        }
+      // Fall through
+      case REACT_VIEW_TRANSITION_TYPE:
+        if (enableViewTransition) {
+          return createFiberFromViewTransition(pendingProps, mode, lanes, key);
+        }
+      // Fall through
+      case REACT_SCOPE_TYPE:
+        if (enableScopeAPI) {
+          return createFiberFromScope(type, pendingProps, mode, lanes, key);
+        }
+      // Fall through
+      case REACT_TRACING_MARKER_TYPE:
+        if (enableTransitionTracing) {
+          return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
+        }
+      // Fall through
+      default: {
+        if (typeof type === 'object' && type !== null) {
+          switch (type.$$typeof) {
+            case REACT_CONTEXT_TYPE:
+              fiberTag = ContextProvider;
+              break getTag;
+            case REACT_CONSUMER_TYPE:
+              fiberTag = ContextConsumer;
+              break getTag;
+            // Fall through
+            case REACT_FORWARD_REF_TYPE:
+              fiberTag = ForwardRef;
+              if (__DEV__) {
+                resolvedType = resolveForwardRefForHotReloading(resolvedType);
+              }
+              break getTag;
+            case REACT_MEMO_TYPE:
+              fiberTag = MemoComponent;
+              break getTag;
+            case REACT_LAZY_TYPE:
+              fiberTag = LazyComponent;
+              resolvedType = null;
+              break getTag;
+          }
+        }
+        let info = '';
+        let typeString;
+        if (__DEV__) {
+          if (
+            type === undefined ||
+            (typeof type === 'object' &&
+              type !== null &&
+              Object.keys(type).length === 0)
+          ) {
+            info +=
+              ' You likely forgot to export your component from the file ' +
+              "it's defined in, or you might have mixed up default and named imports.";
+          }
+
+          if (type === null) {
+            typeString = 'null';
+          } else if (isArray(type)) {
+            typeString = 'array';
+          } else if (
+            type !== undefined &&
+            type.$$typeof === REACT_ELEMENT_TYPE
+          ) {
+            typeString = `<${
+              getComponentNameFromType(type.type) || 'Unknown'
+            } />`;
+            info =
+              ' Did you accidentally export a JSX literal instead of a component?';
+          } else {
+            typeString = typeof type;
+          }
+
+          const ownerName = owner ? getComponentNameFromOwner(owner) : null;
+          if (ownerName) {
+            info += '\n\nCheck the render method of `' + ownerName + '`.';
+          }
+        } else {
+          typeString = type === null ? 'null' : typeof type;
+        }
+
+        // The type is invalid but it's conceptually a child that errored and not the
+        // current component itself so we create a virtual child that throws in its
+        // begin phase. This is the same thing we do in ReactChildFiber if we throw
+        // but we do it here so that we can assign the debug owner and stack from the
+        // element itself. That way the error stack will point to the JSX callsite.
+        fiberTag = Throw;
+        pendingProps = new Error(
+          'Element type is invalid: expected a string (for built-in ' +
+            'components) or a class/function (for composite components) ' +
+            `but got: ${typeString}.${info}`,
+        );
+        resolvedType = null;
+      }
+    }
+  }
+
+  const fiber = createFiber(fiberTag, pendingProps, key, mode);
+  fiber.elementType = type;
+  fiber.type = resolvedType;
+  fiber.lanes = lanes;
+
+  if (__DEV__) {
+    fiber._debugOwner = owner;
+  }
+
+  return fiber;
+}
+
+export function createFiberFromElement(
+  element: ReactElement,
+  mode: TypeOfMode,
+  lanes: Lanes,
+): Fiber {
+  let owner = null;
+  if (__DEV__) {
+    owner = element._owner;
+  }
+  const type = element.type;
+  const key = element.key;
+  const pendingProps = element.props;
+  const fiber = createFiberFromTypeAndProps(
+    type,
+    key,
+    pendingProps,
+    owner,
+    mode,
+    lanes,
+  );
+  if (__DEV__) {
+    fiber._debugOwner = element._owner;
+    fiber._debugStack = element._debugStack;
+    fiber._debugTask = element._debugTask;
+  }
+  return fiber;
+}
+
+export function createFiberFromFragment(
+  elements: ReactFragment,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(Fragment, elements, key, mode);
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+function createFiberFromScope(
+  scope: ReactScope,
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+) {
+  const fiber = createFiber(ScopeComponent, pendingProps, key, mode);
+  fiber.type = scope;
+  fiber.elementType = scope;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+function createFiberFromProfiler(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  if (__DEV__) {
+    if (typeof pendingProps.id !== 'string') {
+      console.error(
+        'Profiler must specify an "id" of type `string` as a prop. Received the type `%s` instead.',
+        typeof pendingProps.id,
+      );
+    }
+  }
+
+  const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
+  fiber.elementType = REACT_PROFILER_TYPE;
+  fiber.lanes = lanes;
+
+  if (enableProfilerTimer) {
+    fiber.stateNode = {
+      effectDuration: 0,
+      passiveEffectDuration: 0,
+    };
+  }
+
+  return fiber;
+}
+
+export function createFiberFromSuspense(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_SUSPENSE_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+export function createFiberFromSuspenseList(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+export function createFiberFromOffscreen(
+  pendingProps: OffscreenProps,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
+  fiber.lanes = lanes;
+  return fiber;
+}
+export function createFiberFromActivity(
+  pendingProps: ActivityProps,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(ActivityComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_ACTIVITY_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+export function createFiberFromViewTransition(
+  pendingProps: ViewTransitionProps,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  if (!enableSuspenseyImages) {
+    // Render a ViewTransition component opts into SuspenseyImages mode even
+    // when the flag is off.
+    mode |= SuspenseyImagesMode;
+  }
+  const fiber = createFiber(ViewTransitionComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_VIEW_TRANSITION_TYPE;
+  fiber.lanes = lanes;
+  const instance: ViewTransitionState = {
+    autoName: null,
+    paired: null,
+    clones: null,
+    ref: null,
+  };
+  fiber.stateNode = instance;
+  return fiber;
+}
+
+export function createFiberFromLegacyHidden(
+  pendingProps: LegacyHiddenProps,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+export function createFiberFromTracingMarker(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: ReactKey,
+): Fiber {
+  const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_TRACING_MARKER_TYPE;
+  fiber.lanes = lanes;
+  const tracingMarkerInstance: TracingMarkerInstance = {
+    tag: TransitionTracingMarker,
+    transitions: null,
+    pendingBoundaries: null,
+    aborts: null,
+    name: pendingProps.name,
+  };
+  fiber.stateNode = tracingMarkerInstance;
+  return fiber;
+}
+
+export function createFiberFromText(
+  content: string,
+  mode: TypeOfMode,
+  lanes: Lanes,
+): Fiber {
+  const fiber = createFiber(HostText, content, null, mode);
+  fiber.lanes = lanes;
+  return fiber;
+}
+
+export function createFiberFromDehydratedFragment(
+  dehydratedNode: SuspenseInstance | ActivityInstance,
+): Fiber {
+  const fiber = createFiber(DehydratedFragment, null, null, NoMode);
+  fiber.stateNode = dehydratedNode;
+  return fiber;
+}
+
+export function createFiberFromPortal(
+  portal: ReactPortal,
+  mode: TypeOfMode,
+  lanes: Lanes,
+): Fiber {
+  const pendingProps = portal.children !== null ? portal.children : [];
+  const fiber = createFiber(HostPortal, pendingProps, portal.key, mode);
+  fiber.lanes = lanes;
+  fiber.stateNode = {
+    containerInfo: portal.containerInfo,
+    pendingChildren: null, // Used by persistent updates
+    implementation: portal.implementation,
+  };
+  return fiber;
+}
+
+export function createFiberFromThrow(
+  error: mixed,
+  mode: TypeOfMode,
+  lanes: Lanes,
+): Fiber {
+  const fiber = createFiber(Throw, error, null, mode);
+  fiber.lanes = lanes;
+  return fiber;
+}
diff --git a/packages/react-reconciler/src/ReactFiberAct.js b/packages/react-reconciler/src/ReactFiberAct.js
new file mode 100644
index 00000000000..b611d7472b0
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAct.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactSharedInternals from 'shared/ReactSharedInternals';
+
+import {warnsIfNotActing} from './ReactFiberConfig';
+
+export function isLegacyActEnvironment(fiber: Fiber): boolean {
+  if (__DEV__) {
+    // Legacy mode. We preserve the behavior of React 17's act. It assumes an
+    // act environment whenever `jest` is defined, but you can still turn off
+    // spurious warnings by setting IS_REACT_ACT_ENVIRONMENT explicitly
+    // to false.
+
+    const isReactActEnvironmentGlobal =
+      // $FlowFixMe[cannot-resolve-name] Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? // $FlowFixMe[cannot-resolve-name]
+          IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // $FlowFixMe[cannot-resolve-name] - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
+
+export function isConcurrentActEnvironment(): void | boolean {
+  if (__DEV__) {
+    const isReactActEnvironmentGlobal =
+      // $FlowFixMe[cannot-resolve-name] Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? // $FlowFixMe[cannot-resolve-name]
+          IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    if (
+      !isReactActEnvironmentGlobal &&
+      ReactSharedInternals.actQueue !== null
+    ) {
+      // TODO: Include link to relevant documentation page.
+      console.error(
+        'The current testing environment is not configured to support ' +
+          'act(...)',
+      );
+    }
+    return isReactActEnvironmentGlobal;
+  }
+  return false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberActivityComponent.js b/packages/react-reconciler/src/ReactFiberActivityComponent.js
new file mode 100644
index 00000000000..ced456df20b
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberActivityComponent.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ActivityInstance} from './ReactFiberConfig';
+import type {CapturedValue} from './ReactCapturedValue';
+import type {Lane} from './ReactFiberLane';
+import type {TreeContext} from './ReactFiberTreeContext';
+
+// A non-null ActivityState represents a dehydrated Activity boundary.
+export type ActivityState = {
+  dehydrated: ActivityInstance,
+  treeContext: null | TreeContext,
+  // Represents the lane we should attempt to hydrate a dehydrated boundary at.
+  // OffscreenLane is the default for dehydrated boundaries.
+  // NoLane is the default for normal boundaries, which turns into "normal" pri.
+  retryLane: Lane,
+  // Stashed Errors that happened while attempting to hydrate this boundary.
+  hydrationErrors: Array<CapturedValue<mixed>> | null,
+};
diff --git a/packages/react-reconciler/src/ReactFiberApplyGesture.js b/packages/react-reconciler/src/ReactFiberApplyGesture.js
new file mode 100644
index 00000000000..32e59395845
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberApplyGesture.js
@@ -0,0 +1,1335 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ViewTransitionProps} from 'shared/ReactTypes';
+
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+
+import type {Instance, TextInstance, Props} from './ReactFiberConfig';
+
+import type {OffscreenState} from './ReactFiberOffscreenComponent';
+
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
+
+import {
+  cloneMutableInstance,
+  cloneMutableTextInstance,
+  cloneRootViewTransitionContainer,
+  removeRootViewTransitionClone,
+  cancelRootViewTransitionName,
+  restoreRootViewTransitionName,
+  cancelViewTransitionName,
+  applyViewTransitionName,
+  appendChild,
+  commitUpdate,
+  commitTextUpdate,
+  resetTextContent,
+  supportsResources,
+  supportsSingletons,
+  unhideInstance,
+  unhideTextInstance,
+} from './ReactFiberConfig';
+import {
+  popMutationContext,
+  pushMutationContext,
+  viewTransitionMutationContext,
+  trackHostMutation,
+} from './ReactFiberMutationTracking';
+import {
+  MutationMask,
+  Placement,
+  Update,
+  ContentReset,
+  NoFlags,
+  Visibility,
+  ViewTransitionNamedStatic,
+  ViewTransitionStatic,
+  AffectedParentLayout,
+} from './ReactFiberFlags';
+import {
+  HasEffect as HookHasEffect,
+  Insertion as HookInsertion,
+} from './ReactHookEffectTags';
+import {
+  FunctionComponent,
+  ForwardRef,
+  MemoComponent,
+  SimpleMemoComponent,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  HostPortal,
+  OffscreenComponent,
+  ViewTransitionComponent,
+} from './ReactWorkTags';
+import {
+  restoreEnterOrExitViewTransitions,
+  restoreNestedViewTransitions,
+  restoreUpdateViewTransitionForGesture,
+  appearingViewTransitions,
+  commitEnterViewTransitions,
+  measureNestedViewTransitions,
+  measureUpdateViewTransition,
+  viewTransitionCancelableChildren,
+  pushViewTransitionCancelableScope,
+  popViewTransitionCancelableScope,
+} from './ReactFiberCommitViewTransitions';
+import {
+  commitHookEffectListMount,
+  commitHookEffectListUnmount,
+} from './ReactFiberCommitEffects';
+import {
+  getViewTransitionName,
+  getViewTransitionClassName,
+} from './ReactFiberViewTransitionComponent';
+
+import {
+  enableProfilerTimer,
+  enableComponentPerformanceTrack,
+} from 'shared/ReactFeatureFlags';
+import {trackAnimatingTask} from './ReactProfilerTimer';
+import {scheduleGestureTransitionEvent} from './ReactFiberWorkLoop';
+
+// Used during the apply phase to track whether a parent ViewTransition component
+// might have been affected by any mutations / relayouts below.
+let viewTransitionContextChanged: boolean = false;
+
+function detectMutationOrInsertClones(finishedWork: Fiber): boolean {
+  return true;
+}
+
+const CLONE_UPDATE = 0; // Mutations in this subtree or potentially affected by layout.
+const CLONE_EXIT = 1; // Inside a reappearing offscreen before the next ViewTransition or HostComponent.
+const CLONE_UNHIDE = 2; // Inside a reappearing offscreen before the next HostComponent.
+const CLONE_APPEARING_PAIR = 3; // Like UNHIDE but we're already inside the first Host Component only finding pairs.
+const CLONE_UNCHANGED = 4; // Nothing in this tree was changed but we're still walking to clone it.
+const INSERT_EXIT = 5; // Inside a newly mounted tree before the next ViewTransition or HostComponent.
+const INSERT_APPEND = 6; // Inside a newly mounted tree before the next HostComponent.
+const INSERT_APPEARING_PAIR = 7; // Inside a newly mounted tree only finding pairs.
+type VisitPhase = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+
+function applyViewTransitionToClones(
+  name: string,
+  className: ?string,
+  clones: Array<Instance>,
+  fiber: Fiber,
+): void {
+  // This gets called when we have found a pair, but after the clone in created. The clone is
+  // created by the insertion side. If the insertion side if found before the deletion side
+  // then this is called by the deletion. If the deletion is visited first then this is called
+  // later by the insertion when the clone has been created.
+  for (let i = 0; i < clones.length; i++) {
+    applyViewTransitionName(
+      clones[i],
+      i === 0
+        ? name
+        : // If we have multiple Host Instances below, we add a suffix to the name to give
+          // each one a unique name.
+          name + '_' + i,
+      className,
+    );
+  }
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (fiber._debugTask != null) {
+      trackAnimatingTask(fiber._debugTask);
+    }
+  }
+}
+
+function trackDeletedPairViewTransitions(deletion: Fiber): void {
+  if (
+    appearingViewTransitions === null ||
+    appearingViewTransitions.size === 0
+  ) {
+    // We've found all.
+    return;
+  }
+  const pairs = appearingViewTransitions;
+  if ((deletion.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
+    // This has no named view transitions in its subtree.
+    return;
+  }
+  let child = deletion.child;
+  while (child !== null) {
+    if (child.tag === OffscreenComponent && child.memoizedState !== null) {
+      // This tree was already hidden so we skip it.
+    } else {
+      if (
+        child.tag === ViewTransitionComponent &&
+        (child.flags & ViewTransitionNamedStatic) !== NoFlags
+      ) {
+        const props: ViewTransitionProps = child.memoizedProps;
+        const name = props.name;
+        if (name != null && name !== 'auto') {
+          const pair = pairs.get(name);
+          if (pair !== undefined) {
+            // Delete the entry so that we know when we've found all of them
+            // and can stop searching (size reaches zero).
+            pairs.delete(name);
+            const className: ?string = getViewTransitionClassName(
+              props.default,
+              props.share,
+            );
+            if (className !== 'none') {
+              // TODO: Since the deleted instance already has layout we could
+              // check if it's in the viewport and if not skip the pairing.
+              // It would currently cause layout thrash though so if we did that
+              // we need to avoid inserting the root of the cloned trees until
+              // the end.
+
+              // The "old" instance is actually the one we're inserting.
+              const oldInstance: ViewTransitionState = pair;
+              // The "new" instance is the already mounted one we're deleting.
+              const newInstance: ViewTransitionState = child.stateNode;
+              oldInstance.paired = newInstance;
+              newInstance.paired = oldInstance;
+              const clones = oldInstance.clones;
+              if (clones !== null) {
+                // If we have clones that means that we've already visited this
+                // ViewTransition boundary before and we can now apply the name
+                // to those clones. Otherwise, we have to wait until we clone it.
+                applyViewTransitionToClones(name, className, clones, child);
+              }
+            }
+            if (pairs.size === 0) {
+              break;
+            }
+          }
+        }
+      }
+      trackDeletedPairViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+function trackEnterViewTransitions(deletion: Fiber): void {
+  if (deletion.tag === ViewTransitionComponent) {
+    const props: ViewTransitionProps = deletion.memoizedProps;
+    const name = getViewTransitionName(props, deletion.stateNode);
+    const pair =
+      appearingViewTransitions !== null
+        ? appearingViewTransitions.get(name)
+        : undefined;
+    const className: ?string = getViewTransitionClassName(
+      props.default,
+      pair !== undefined ? props.share : props.enter,
+    );
+    if (className !== 'none') {
+      if (pair !== undefined) {
+        // TODO: Since the deleted instance already has layout we could
+        // check if it's in the viewport and if not skip the pairing.
+        // It would currently cause layout thrash though so if we did that
+        // we need to avoid inserting the root of the cloned trees until
+        // the end.
+
+        // Delete the entry so that we know when we've found all of them
+        // and can stop searching (size reaches zero).
+        // $FlowFixMe[incompatible-use]: Refined by the pair.
+        appearingViewTransitions.delete(name);
+        // The "old" instance is actually the one we're inserting.
+        const oldInstance: ViewTransitionState = pair;
+        // The "new" instance is the already mounted one we're deleting.
+        const newInstance: ViewTransitionState = deletion.stateNode;
+        oldInstance.paired = newInstance;
+        newInstance.paired = oldInstance;
+        const clones = oldInstance.clones;
+        if (clones !== null) {
+          // If we have clones that means that we've already visited this
+          // ViewTransition boundary before and we can now apply the name
+          // to those clones. Otherwise, we have to wait until we clone it.
+          applyViewTransitionToClones(name, className, clones, deletion);
+        }
+      }
+    }
+    // Look for more pairs deeper in the tree.
+    trackDeletedPairViewTransitions(deletion);
+  } else if ((deletion.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    let child = deletion.child;
+    while (child !== null) {
+      trackEnterViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    trackDeletedPairViewTransitions(deletion);
+  }
+}
+
+function applyAppearingPairViewTransition(child: Fiber): void {
+  // Normally these helpers do recursive calls but since insertion/offscreen is forked
+  // we call this helper from those loops instead. This must be called only on
+  // ViewTransitionComponent that has already had their clones filled.
+  if ((child.flags & ViewTransitionNamedStatic) !== NoFlags) {
+    const state: ViewTransitionState = child.stateNode;
+    // If this is not yet paired, it doesn't mean that we won't pair it later when
+    // we find the deletion side. If that's the case then we'll add the names to
+    // the clones then.
+    if (state.paired) {
+      const props: ViewTransitionProps = child.memoizedProps;
+      if (props.name == null || props.name === 'auto') {
+        throw new Error(
+          'Found a pair with an auto name. This is a bug in React.',
+        );
+      }
+      const name = props.name;
+      // Note that this class name that doesn't actually really matter because the
+      // "new" side will be the one that wins in practice.
+      const className: ?string = getViewTransitionClassName(
+        props.default,
+        props.share,
+      );
+      if (className !== 'none') {
+        const clones = state.clones;
+        // If there are no clones at this point, that should mean that there are no
+        // HostComponent children in this ViewTransition.
+        if (clones !== null) {
+          applyViewTransitionToClones(name, className, clones, child);
+        }
+        scheduleGestureTransitionEvent(child, props.onGestureShare);
+      }
+    }
+  }
+}
+
+function applyExitViewTransition(placement: Fiber): void {
+  // Normally these helpers do recursive calls but since insertion/offscreen is forked
+  // we call this helper from those loops instead. This must be called only on
+  // ViewTransitionComponent that has already had their clones filled.
+  const state: ViewTransitionState = placement.stateNode;
+  const props: ViewTransitionProps = placement.memoizedProps;
+  const name = getViewTransitionName(props, state);
+  const className: ?string = getViewTransitionClassName(
+    props.default,
+    // Note that just because we don't have a pair yet doesn't mean we won't find one
+    // later. However, that doesn't matter because if we do the class name that wins
+    // is the one applied by the "new" side anyway.
+    state.paired ? props.share : props.exit,
+  );
+  if (className !== 'none') {
+    // TODO: Ideally we could determine if this exit is in the viewport and
+    // exclude it otherwise but that would require waiting until we insert
+    // and layout the clones first. Currently wait until the view transition
+    // starts before reading the layout.
+    const clones = state.clones;
+    // If there are no clones at this point, that should mean that there are no
+    // HostComponent children in this ViewTransition.
+    if (clones !== null) {
+      applyViewTransitionToClones(name, className, clones, placement);
+    }
+    if (state.paired) {
+      scheduleGestureTransitionEvent(placement, props.onGestureShare);
+    } else {
+      scheduleGestureTransitionEvent(placement, props.onGestureExit);
+    }
+  }
+}
+
+function applyNestedViewTransition(child: Fiber): void {
+  const state: ViewTransitionState = child.stateNode;
+  const props: ViewTransitionProps = child.memoizedProps;
+  const name = getViewTransitionName(props, state);
+  const className: ?string = getViewTransitionClassName(
+    props.default,
+    props.update,
+  );
+  if (className !== 'none') {
+    const clones = state.clones;
+    // If there are no clones at this point, that should mean that there are no
+    // HostComponent children in this ViewTransition.
+    if (clones !== null) {
+      applyViewTransitionToClones(name, className, clones, child);
+    }
+  }
+}
+
+function applyUpdateViewTransition(current: Fiber, finishedWork: Fiber): void {
+  const state: ViewTransitionState = finishedWork.stateNode;
+  // Updates can have conflicting names and classNames.
+  // Since we're doing a reverse animation the "new" state is actually the current
+  // and the "old" state is the finishedWork.
+  const newProps: ViewTransitionProps = current.memoizedProps;
+  const oldProps: ViewTransitionProps = finishedWork.memoizedProps;
+  const oldName = getViewTransitionName(oldProps, state);
+  // This className applies only if there are fewer child DOM nodes than
+  // before or if this update should've been cancelled but we ended up with
+  // a parent animating so we need to animate the child too. Otherwise
+  // the "new" state wins. Since "new" normally wins, that's usually what
+  // we would use. However, since this animation is going in reverse we actually
+  // want the props from "current" since that's the class that would've won if
+  // it was the normal direction. To preserve the same effect in either direction.
+  const className: ?string = getViewTransitionClassName(
+    newProps.default,
+    newProps.update,
+  );
+  if (className === 'none') {
+    // If update is "none" then we don't have to apply a name. Since we won't animate this boundary.
+    return;
+  }
+  const clones = state.clones;
+  // If there are no clones at this point, that should mean that there are no
+  // HostComponent children in this ViewTransition.
+  if (clones !== null) {
+    applyViewTransitionToClones(oldName, className, clones, finishedWork);
+  }
+}
+
+function recursivelyInsertNew(
+  parentFiber: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+): void {
+  if (
+    visitPhase === INSERT_APPEARING_PAIR &&
+    parentViewTransition === null &&
+    (parentFiber.subtreeFlags & (ViewTransitionNamedStatic | Placement)) ===
+      NoFlags
+  ) {
+    // We're just searching for pairs or insertion effects but we have reached the end.
+    return;
+  }
+  let child = parentFiber.child;
+  while (child !== null) {
+    recursivelyInsertNewFiber(
+      child,
+      hostParentClone,
+      parentViewTransition,
+      visitPhase,
+    );
+    child = child.sibling;
+  }
+}
+
+function recursivelyInsertNewFiber(
+  finishedWork: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+): void {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      recursivelyInsertNew(
+        finishedWork,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
+      if (finishedWork.flags & Update) {
+        // Insertion Effects are mounted temporarily during the rendering of the snapshot.
+        // This does not affect cloned Offscreen content since those would've been mounted
+        // while inside the offscreen tree already.
+        // Note that because we are mounting a clone of the DOM tree and the previous DOM
+        // tree remains mounted during the snapshot, we can't unmount any previous insertion
+        // effects. This can lead to conflicts but that is similar to what can happen with
+        // conflicts for two mounted Activity boundaries.
+        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+      }
+      break;
+    }
+    case HostHoistable: {
+      if (supportsResources) {
+        // TODO: Hoistables should get optimistically inserted and then removed.
+        recursivelyInsertNew(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+        break;
+      }
+      // Fall through
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        recursivelyInsertNew(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+
+        if (__DEV__) {
+          // We cannot apply mutations to Host Singletons since by definition
+          // they cannot be cloned. Therefore we warn in DEV if this commit
+          // had any effect.
+          if (finishedWork.flags & Update) {
+            console.error(
+              'startGestureTransition() caused something to render a new <%s>. ' +
+                'This is not possible in the current implementation. ' +
+                "Make sure that the swipe doesn't mount any new <%s> elements.",
+              finishedWork.type,
+              finishedWork.type,
+            );
+          }
+        }
+        break;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      const instance: Instance = finishedWork.stateNode;
+      // For insertions we don't need to clone. It's already new state node.
+      if (visitPhase !== INSERT_APPEARING_PAIR) {
+        appendChild(hostParentClone, instance);
+        trackHostMutation();
+        recursivelyInsertNew(
+          finishedWork,
+          instance,
+          null,
+          INSERT_APPEARING_PAIR,
+        );
+      } else {
+        recursivelyInsertNew(finishedWork, instance, null, visitPhase);
+      }
+      if (parentViewTransition !== null) {
+        if (parentViewTransition.clones === null) {
+          parentViewTransition.clones = [instance];
+        } else {
+          parentViewTransition.clones.push(instance);
+        }
+      }
+      break;
+    }
+    case HostText: {
+      const textInstance: TextInstance = finishedWork.stateNode;
+      if (textInstance === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+      // For insertions we don't need to clone. It's already new state node.
+      if (visitPhase !== INSERT_APPEARING_PAIR) {
+        appendChild(hostParentClone, textInstance);
+        trackHostMutation();
+      }
+      break;
+    }
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
+      if (!isHidden) {
+        // Only insert nodes if this tree is going to be visible. No need to
+        // insert invisible content.
+        // Since there was no mutation to this node, it couldn't have changed
+        // visibility so we don't need to update visitPhase here.
+        recursivelyInsertNew(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+      }
+      break;
+    }
+    case ViewTransitionComponent:
+      const prevMutationContext = pushMutationContext();
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
+      // TODO: If this was already cloned by a previous pass we can reuse those clones.
+      viewTransitionState.clones = null;
+      let nextPhase: VisitPhase;
+      if (visitPhase === INSERT_EXIT) {
+        // This was an Enter of a ViewTransition. We now move onto inserting the inner
+        // HostComponents and finding inner pairs.
+        nextPhase = INSERT_APPEND;
+      } else {
+        nextPhase = visitPhase;
+      }
+      recursivelyInsertNew(
+        finishedWork,
+        hostParentClone,
+        viewTransitionState,
+        nextPhase,
+      );
+      // After we've inserted the new nodes into the "clones" set we can apply share
+      // or exit transitions to them.
+      if (visitPhase === INSERT_EXIT) {
+        applyExitViewTransition(finishedWork);
+      } else if (
+        visitPhase === INSERT_APPEARING_PAIR ||
+        visitPhase === INSERT_APPEND
+      ) {
+        applyAppearingPairViewTransition(finishedWork);
+      }
+      popMutationContext(prevMutationContext);
+      break;
+    default: {
+      recursivelyInsertNew(
+        finishedWork,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
+      break;
+    }
+  }
+}
+
+function recursivelyInsertClonesFromExistingTree(
+  parentFiber: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+): void {
+  let child = parentFiber.child;
+  while (child !== null) {
+    switch (child.tag) {
+      case HostComponent: {
+        const instance: Instance = child.stateNode;
+        let nextPhase: VisitPhase;
+        switch (visitPhase) {
+          case CLONE_EXIT:
+          case CLONE_UNHIDE:
+          case CLONE_APPEARING_PAIR:
+            // If this was an unhide, we need to keep going if there are any named
+            // pairs in this subtree, since they might need to be marked.
+            nextPhase =
+              (child.subtreeFlags & ViewTransitionNamedStatic) !== NoFlags
+                ? CLONE_APPEARING_PAIR
+                : CLONE_UNCHANGED;
+            break;
+          default:
+            // We've found any "layout" View Transitions at this point so we can bail.
+            nextPhase = CLONE_UNCHANGED;
+        }
+        let clone: Instance;
+        if (nextPhase !== CLONE_UNCHANGED) {
+          // We might need a handle on these clones, so we need to do a shallow clone
+          // and keep going.
+          clone = cloneMutableInstance(instance, false);
+          recursivelyInsertClonesFromExistingTree(
+            child,
+            clone,
+            null,
+            nextPhase,
+          );
+        } else {
+          // If we have no mutations in this subtree, and we don't need a handle on the
+          // clones, then we can do a deep clone instead and bailout.
+          clone = cloneMutableInstance(instance, true);
+          // TODO: We may need to transfer some DOM state such as scroll position
+          // for the deep clones.
+          // TODO: If there's a manual view-transition-name inside the clone we
+          // should ideally remove it from the original and then restore it in mutation
+          // phase. Otherwise it leads to duplicate names.
+        }
+        appendChild(hostParentClone, clone);
+        if (parentViewTransition !== null) {
+          if (parentViewTransition.clones === null) {
+            parentViewTransition.clones = [clone];
+          } else {
+            parentViewTransition.clones.push(clone);
+          }
+        }
+        if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
+          unhideInstance(clone, child.memoizedProps);
+          trackHostMutation();
+        }
+        break;
+      }
+      case HostText: {
+        const textInstance: TextInstance = child.stateNode;
+        if (textInstance === null) {
+          throw new Error(
+            'This should have a text node initialized. This error is likely ' +
+              'caused by a bug in React. Please file an issue.',
+          );
+        }
+        const clone = cloneMutableTextInstance(textInstance);
+        appendChild(hostParentClone, clone);
+        if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
+          unhideTextInstance(clone, child.memoizedProps);
+          trackHostMutation();
+        }
+        break;
+      }
+      case HostPortal: {
+        // TODO: Consider what should happen to Portals. For now we exclude them.
+        break;
+      }
+      case OffscreenComponent: {
+        const newState: OffscreenState | null = child.memoizedState;
+        const isHidden = newState !== null;
+        if (!isHidden) {
+          // Only insert clones if this tree is going to be visible. No need to
+          // clone invisible content.
+          // TODO: If this is visible but detached it should still be cloned.
+          // Since there was no mutation to this node, it couldn't have changed
+          // visibility so we don't need to update visitPhase here.
+          recursivelyInsertClonesFromExistingTree(
+            child,
+            hostParentClone,
+            parentViewTransition,
+            visitPhase,
+          );
+        }
+        break;
+      }
+      case ViewTransitionComponent:
+        const prevMutationContext = pushMutationContext();
+        const viewTransitionState: ViewTransitionState = child.stateNode;
+        // TODO: If this was already cloned by a previous pass we can reuse those clones.
+        viewTransitionState.clones = null;
+        // "Existing" view transitions are in subtrees that didn't update so
+        // this is a "current". We normally clear this upon rerendering
+        // but we use this flag to track changes from layout in the commit.
+        // So we need it to be cleared before we do that.
+        // TODO: Use some other temporary state to track this.
+        child.flags &= ~Update;
+        let nextPhase: VisitPhase;
+        if (visitPhase === CLONE_EXIT) {
+          // This was an Enter of a ViewTransition. We now move onto unhiding the inner
+          // HostComponents and finding inner pairs.
+          nextPhase = CLONE_UNHIDE;
+          // TODO: Mark the name and find a pair.
+        } else if (visitPhase === CLONE_UPDATE) {
+          // If the tree had no mutations and we've found the top most ViewTransition
+          // then this is the one we might apply the "layout" state too if it has changed
+          // position. After we've found its HostComponents we can bail out.
+          nextPhase = CLONE_UNCHANGED;
+        } else {
+          nextPhase = visitPhase;
+        }
+        recursivelyInsertClonesFromExistingTree(
+          child,
+          hostParentClone,
+          viewTransitionState,
+          nextPhase,
+        );
+        // After we've collected the cloned instances, we can apply exit or share transitions
+        // to them.
+        if (visitPhase === CLONE_EXIT) {
+          applyExitViewTransition(child);
+        } else if (
+          visitPhase === CLONE_APPEARING_PAIR ||
+          visitPhase === CLONE_UNHIDE
+        ) {
+          applyAppearingPairViewTransition(child);
+        } else if (visitPhase === CLONE_UPDATE) {
+          applyNestedViewTransition(child);
+        }
+        popMutationContext(prevMutationContext);
+        break;
+      default: {
+        recursivelyInsertClonesFromExistingTree(
+          child,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+        break;
+      }
+    }
+    child = child.sibling;
+  }
+}
+
+function recursivelyInsertClones(
+  parentFiber: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+) {
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      trackEnterViewTransitions(childToDelete);
+      // Normally we would only mark something as triggering a mutation if there was
+      // actually a HostInstance below here. If this tree didn't contain a HostInstances
+      // we shouldn't trigger a mutation even though a virtual component was deleted.
+      trackHostMutation();
+    }
+  }
+
+  if (
+    parentFiber.alternate === null ||
+    (parentFiber.subtreeFlags & MutationMask) !== NoFlags
+  ) {
+    // If we have mutations or if this is a newly inserted tree, clone as we go.
+    let child = parentFiber.child;
+    while (child !== null) {
+      insertDestinationClonesOfFiber(
+        child,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
+      child = child.sibling;
+    }
+  } else {
+    // Once we reach a subtree with no more mutations we can bail out.
+    // However, we must still insert deep clones of the HostComponents.
+    recursivelyInsertClonesFromExistingTree(
+      parentFiber,
+      hostParentClone,
+      parentViewTransition,
+      visitPhase,
+    );
+  }
+}
+
+function insertDestinationClonesOfFiber(
+  finishedWork: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+) {
+  const current = finishedWork.alternate;
+  if (current === null) {
+    // This is a newly mounted subtree. Insert any HostComponents and trigger
+    // Enter transitions.
+    recursivelyInsertNewFiber(
+      finishedWork,
+      hostParentClone,
+      parentViewTransition,
+      INSERT_EXIT,
+    );
+    return;
+  }
+
+  const flags = finishedWork.flags;
+  // The effect flag should be checked *after* we refine the type of fiber,
+  // because the fiber tag is more specific. An exception is any flag related
+  // to reconciliation, because those can be set on all fiber types.
+  switch (finishedWork.tag) {
+    case HostHoistable: {
+      if (supportsResources) {
+        // TODO: Hoistables should get optimistically inserted and then removed.
+        recursivelyInsertClones(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+        break;
+      }
+      // Fall through
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        recursivelyInsertClones(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+        if (__DEV__) {
+          // We cannot apply mutations to Host Singletons since by definition
+          // they cannot be cloned. Therefore we warn in DEV if this commit
+          // had any effect.
+          if (flags & Update) {
+            const newProps = finishedWork.memoizedProps;
+            const oldProps = current.memoizedProps;
+            const instance = finishedWork.stateNode;
+            const type = finishedWork.type;
+            const prev = pushMutationContext();
+
+            try {
+              // Since we currently don't have a separate diffing algorithm for
+              // individual properties, the Update flag can be a false positive.
+              // We have to apply the new props first o detect any mutations and
+              // then revert them.
+              commitUpdate(instance, type, oldProps, newProps, finishedWork);
+              if (viewTransitionMutationContext) {
+                console.error(
+                  'startGestureTransition() caused something to mutate <%s>. ' +
+                    'This is not possible in the current implementation. ' +
+                    "Make sure that the swipe doesn't update any state which " +
+                    'causes <%s> to change.',
+                  finishedWork.type,
+                  finishedWork.type,
+                );
+              }
+              // Revert
+              commitUpdate(instance, type, newProps, oldProps, finishedWork);
+            } finally {
+              popMutationContext(prev);
+            }
+          }
+        }
+        break;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      const instance: Instance = finishedWork.stateNode;
+      let clone: Instance;
+      if (finishedWork.child === null) {
+        // This node is terminal. We still do a deep clone in case this has user
+        // inserted content, text content or dangerouslySetInnerHTML.
+        clone = cloneMutableInstance(instance, true);
+        if (finishedWork.flags & ContentReset) {
+          resetTextContent(clone);
+          trackHostMutation();
+        }
+      } else {
+        // If we have children we'll clone them as we walk the tree so we just
+        // do a shallow clone here.
+        clone = cloneMutableInstance(instance, false);
+      }
+
+      if (flags & Update) {
+        const newProps = finishedWork.memoizedProps;
+        const oldProps = current.memoizedProps;
+        const type = finishedWork.type;
+        // Apply the delta to the clone.
+        commitUpdate(clone, type, oldProps, newProps, finishedWork);
+      }
+
+      if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
+        appendChild(hostParentClone, clone);
+        unhideInstance(clone, finishedWork.memoizedProps);
+        recursivelyInsertClones(
+          finishedWork,
+          clone,
+          null,
+          CLONE_APPEARING_PAIR,
+        );
+        trackHostMutation();
+      } else {
+        appendChild(hostParentClone, clone);
+        recursivelyInsertClones(finishedWork, clone, null, visitPhase);
+      }
+      if (parentViewTransition !== null) {
+        if (parentViewTransition.clones === null) {
+          parentViewTransition.clones = [clone];
+        } else {
+          parentViewTransition.clones.push(clone);
+        }
+      }
+      break;
+    }
+    case HostText: {
+      const textInstance: TextInstance = finishedWork.stateNode;
+      if (textInstance === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+      const clone = cloneMutableTextInstance(textInstance);
+      if (flags & Update) {
+        const newText: string = finishedWork.memoizedProps;
+        const oldText: string = current.memoizedProps;
+        commitTextUpdate(clone, newText, oldText);
+        trackHostMutation();
+      }
+      appendChild(hostParentClone, clone);
+      if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
+        unhideTextInstance(clone, finishedWork.memoizedProps);
+        trackHostMutation();
+      }
+      break;
+    }
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
+      if (!isHidden) {
+        // Only insert clones if this tree is going to be visible. No need to
+        // clone invisible content.
+        // TODO: If this is visible but detached it should still be cloned.
+        let nextPhase: VisitPhase;
+        if (visitPhase === CLONE_UPDATE && (flags & Visibility) !== NoFlags) {
+          // This is the root of an appear. We need to trigger Enter transitions.
+          nextPhase = CLONE_EXIT;
+        } else {
+          nextPhase = visitPhase;
+        }
+        recursivelyInsertClones(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          nextPhase,
+        );
+      } else if (current !== null && current.memoizedState === null) {
+        // Was previously mounted as visible but is now hidden.
+        trackEnterViewTransitions(current);
+        // Normally we would only mark something as triggering a mutation if there was
+        // actually a HostInstance below here. If this tree didn't contain a HostInstances
+        // we shouldn't trigger a mutation even though a virtual component was hidden.
+        trackHostMutation();
+      }
+      break;
+    }
+    case ViewTransitionComponent:
+      const prevMutationContext = pushMutationContext();
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
+      // TODO: If this was already cloned by a previous pass we can reuse those clones.
+      viewTransitionState.clones = null;
+      let nextPhase: VisitPhase;
+      if (visitPhase === CLONE_EXIT) {
+        // This was an Enter of a ViewTransition. We now move onto unhiding the inner
+        // HostComponents and finding inner pairs.
+        nextPhase = CLONE_UNHIDE;
+        // TODO: Mark the name and find a pair.
+      } else {
+        nextPhase = visitPhase;
+      }
+      recursivelyInsertClones(
+        finishedWork,
+        hostParentClone,
+        viewTransitionState,
+        nextPhase,
+      );
+      if (viewTransitionMutationContext) {
+        // Track that this boundary had a mutation and therefore needs to animate
+        // whether it resized or not.
+        finishedWork.flags |= Update;
+      }
+      // After we've collected the cloned instances, we can apply exit or share transitions
+      // to them.
+      if (visitPhase === CLONE_EXIT) {
+        applyExitViewTransition(finishedWork);
+      } else if (
+        visitPhase === CLONE_APPEARING_PAIR ||
+        visitPhase === CLONE_UNHIDE
+      ) {
+        applyAppearingPairViewTransition(finishedWork);
+      } else if (visitPhase === CLONE_UPDATE) {
+        applyUpdateViewTransition(current, finishedWork);
+      }
+      popMutationContext(prevMutationContext);
+      break;
+    default: {
+      recursivelyInsertClones(
+        finishedWork,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
+      break;
+    }
+  }
+}
+
+// Clone View Transition boundaries that have any mutations or might have had their
+// layout affected by child insertions.
+export function insertDestinationClones(
+  root: FiberRoot,
+  finishedWork: Fiber,
+): void {
+  // We'll either not transition the root, or we'll transition the clone. Regardless
+  // we cancel the root view transition name.
+  const needsClone = detectMutationOrInsertClones(finishedWork);
+  if (needsClone) {
+    // Clone the whole root
+    const rootClone = cloneRootViewTransitionContainer(root.containerInfo);
+    root.gestureClone = rootClone;
+    recursivelyInsertClones(finishedWork, rootClone, null, CLONE_UPDATE);
+  } else {
+    root.gestureClone = null;
+    cancelRootViewTransitionName(root.containerInfo);
+  }
+}
+
+function measureExitViewTransitions(placement: Fiber): void {
+  if (placement.tag === ViewTransitionComponent) {
+    // const state: ViewTransitionState = placement.stateNode;
+    const props: ViewTransitionProps = placement.memoizedProps;
+    const name = props.name;
+    if (name != null && name !== 'auto') {
+      // TODO: Find a pair
+    }
+  } else if ((placement.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    // TODO: Check if this is a hidden Offscreen or a Portal.
+    let child = placement.child;
+    while (child !== null) {
+      measureExitViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    // We don't need to find pairs here because we would've already found and
+    // measured the pairs inside the deletion phase.
+  }
+}
+
+function recursivelyRestoreNew(
+  finishedWork: Fiber,
+  nearestMountedAncestor: Fiber,
+): void {
+  // There has to be move a Placement AND an Update flag somewhere below for this
+  // pass to be relevant since we only apply insertion effects for new components here.
+  if (((Placement | Update) & finishedWork.subtreeFlags) !== NoFlags) {
+    let child = finishedWork.child;
+    while (child !== null) {
+      recursivelyRestoreNew(child, nearestMountedAncestor);
+      child = child.sibling;
+    }
+  }
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      const current = finishedWork.alternate;
+      if (current === null && finishedWork.flags & Update) {
+        // Insertion Effects are mounted temporarily during the rendering of the snapshot.
+        // We have now already takes a snapshot of the inserted state so we can now unmount
+        // them to get back into the original state before starting the animation.
+        commitHookEffectListUnmount(
+          HookInsertion | HookHasEffect,
+          finishedWork,
+          nearestMountedAncestor,
+        );
+      }
+      break;
+    }
+  }
+}
+
+function recursivelyApplyViewTransitions(parentFiber: Fiber) {
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      commitEnterViewTransitions(childToDelete, true);
+    }
+  }
+
+  if (
+    parentFiber.alternate === null ||
+    (parentFiber.subtreeFlags & MutationMask) !== NoFlags
+  ) {
+    // If we have mutations or if this is a newly inserted tree, clone as we go.
+    let child = parentFiber.child;
+    while (child !== null) {
+      const current = child.alternate;
+      if (current === null) {
+        measureExitViewTransitions(child);
+        recursivelyRestoreNew(child, parentFiber);
+      } else {
+        applyViewTransitionsOnFiber(child, current);
+      }
+      child = child.sibling;
+    }
+  } else {
+    // Nothing has changed in this subtree, but the parent may have still affected
+    // its size and position. We need to measure the old and new state to see if
+    // we should animate its size and position.
+    measureNestedViewTransitions(parentFiber, true);
+  }
+}
+
+function applyViewTransitionsOnFiber(finishedWork: Fiber, current: Fiber) {
+  // The effect flag should be checked *after* we refine the type of fiber,
+  // because the fiber tag is more specific. An exception is any flag related
+  // to reconciliation, because those can be set on all fiber types.
+  switch (finishedWork.tag) {
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
+      const wasHidden = current.memoizedState !== null;
+      if (!isHidden) {
+        if (wasHidden) {
+          measureExitViewTransitions(finishedWork);
+          recursivelyRestoreNew(finishedWork, finishedWork);
+        } else {
+          recursivelyApplyViewTransitions(finishedWork);
+        }
+      } else {
+        if (!wasHidden) {
+          // Was previously mounted as visible but is now hidden.
+          commitEnterViewTransitions(current, true);
+        }
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      const prevContextChanged = viewTransitionContextChanged;
+      const prevCancelableChildren = pushViewTransitionCancelableScope();
+      viewTransitionContextChanged = false;
+      recursivelyApplyViewTransitions(finishedWork);
+
+      if (viewTransitionContextChanged) {
+        finishedWork.flags |= Update;
+      }
+
+      const inViewport = measureUpdateViewTransition(
+        current,
+        finishedWork,
+        true,
+      );
+
+      if ((finishedWork.flags & Update) === NoFlags || !inViewport) {
+        // If this boundary didn't update, then we may be able to cancel its children.
+        // We bubble them up to the parent set to be determined later if we can cancel.
+        // Similarly, if old and new state was outside the viewport, we can skip it
+        // even if it did update.
+        if (prevCancelableChildren === null) {
+          // Bubbling up this whole set to the parent.
+        } else {
+          // Merge with parent set.
+          // $FlowFixMe[method-unbinding]
+          prevCancelableChildren.push.apply(
+            prevCancelableChildren,
+            viewTransitionCancelableChildren,
+          );
+          popViewTransitionCancelableScope(prevCancelableChildren);
+        }
+        // TODO: If this doesn't end up canceled, because a parent animates,
+        // then we should probably issue an event since this instance is part of it.
+      } else {
+        const props: ViewTransitionProps = finishedWork.memoizedProps;
+        scheduleGestureTransitionEvent(finishedWork, props.onGestureUpdate);
+        // If this boundary did update, we cannot cancel its children so those are dropped.
+        popViewTransitionCancelableScope(prevCancelableChildren);
+      }
+
+      if ((finishedWork.flags & AffectedParentLayout) !== NoFlags) {
+        // This boundary changed size in a way that may have caused its parent to
+        // relayout. We need to bubble this information up to the parent.
+        viewTransitionContextChanged = true;
+      } else {
+        // Otherwise, we restore it to whatever the parent had found so far.
+        viewTransitionContextChanged = prevContextChanged;
+      }
+
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
+      viewTransitionState.clones = null; // Reset
+      break;
+    }
+    default: {
+      recursivelyApplyViewTransitions(finishedWork);
+      break;
+    }
+  }
+}
+
+// Revert insertions and apply view transition names to the "new" (current) state.
+export function applyDepartureTransitions(
+  root: FiberRoot,
+  finishedWork: Fiber,
+): void {
+  // First measure and apply view-transition-names to the "new" states.
+  viewTransitionContextChanged = false;
+  pushViewTransitionCancelableScope();
+
+  recursivelyApplyViewTransitions(finishedWork);
+
+  // Then remove the clones.
+  const rootClone = root.gestureClone;
+  if (rootClone !== null) {
+    root.gestureClone = null;
+    removeRootViewTransitionClone(root.containerInfo, rootClone);
+  }
+
+  if (!viewTransitionContextChanged) {
+    // If we didn't leak any resizing out to the root, we don't have to transition
+    // the root itself. This means that we can now safely cancel any cancellations
+    // that bubbled all the way up.
+    const cancelableChildren = viewTransitionCancelableChildren;
+    if (cancelableChildren !== null) {
+      for (let i = 0; i < cancelableChildren.length; i += 3) {
+        cancelViewTransitionName(
+          ((cancelableChildren[i]: any): Instance),
+          ((cancelableChildren[i + 1]: any): string),
+          ((cancelableChildren[i + 2]: any): Props),
+        );
+      }
+    }
+    // We also cancel the root itself. First we restore the name to the documentElement
+    // and then we cancel it.
+    restoreRootViewTransitionName(root.containerInfo);
+    cancelRootViewTransitionName(root.containerInfo);
+  }
+  popViewTransitionCancelableScope(null);
+}
+
+function recursivelyRestoreViewTransitions(parentFiber: Fiber) {
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      restoreEnterOrExitViewTransitions(childToDelete);
+    }
+  }
+
+  if (
+    parentFiber.alternate === null ||
+    (parentFiber.subtreeFlags & MutationMask) !== NoFlags
+  ) {
+    // If we have mutations or if this is a newly inserted tree, clone as we go.
+    let child = parentFiber.child;
+    while (child !== null) {
+      restoreViewTransitionsOnFiber(child);
+      child = child.sibling;
+    }
+  } else {
+    // Nothing has changed in this subtree, but the parent may have still affected
+    // its size and position. We need to measure the old and new state to see if
+    // we should animate its size and position.
+    restoreNestedViewTransitions(parentFiber);
+  }
+}
+
+function restoreViewTransitionsOnFiber(finishedWork: Fiber) {
+  const current = finishedWork.alternate;
+  if (current === null) {
+    restoreEnterOrExitViewTransitions(finishedWork);
+    return;
+  }
+
+  const flags = finishedWork.flags;
+  // The effect flag should be checked *after* we refine the type of fiber,
+  // because the fiber tag is more specific. An exception is any flag related
+  // to reconciliation, because those can be set on all fiber types.
+  switch (finishedWork.tag) {
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        if (!isHidden) {
+          restoreEnterOrExitViewTransitions(finishedWork);
+        } else if (current !== null && current.memoizedState === null) {
+          // Was previously mounted as visible but is now hidden.
+          restoreEnterOrExitViewTransitions(current);
+        }
+      }
+      break;
+    }
+    case ViewTransitionComponent:
+      restoreUpdateViewTransitionForGesture(current, finishedWork);
+      recursivelyRestoreViewTransitions(finishedWork);
+      break;
+    default: {
+      recursivelyRestoreViewTransitions(finishedWork);
+      break;
+    }
+  }
+}
+
+// Revert transition names and start/adjust animations on the started View Transition.
+export function startGestureAnimations(
+  root: FiberRoot,
+  finishedWork: Fiber,
+): void {
+  restoreViewTransitionsOnFiber(finishedWork);
+  restoreRootViewTransitionName(root.containerInfo);
+}
diff --git a/packages/react-reconciler/src/ReactFiberAsyncAction.js b/packages/react-reconciler/src/ReactFiberAsyncAction.js
new file mode 100644
index 00000000000..9d1194874d4
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAsyncAction.js
@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+import type {Lane} from './ReactFiberLane';
+import type {Transition} from 'react/src/ReactStartTransition';
+
+import {
+  requestTransitionLane,
+  ensureScheduleIsScheduled,
+} from './ReactFiberRootScheduler';
+import {NoLane} from './ReactFiberLane';
+import {
+  hasScheduledTransitionWork,
+  clearAsyncTransitionTimer,
+} from './ReactProfilerTimer';
+import {
+  enableComponentPerformanceTrack,
+  enableProfilerTimer,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+import {clearEntangledAsyncTransitionTypes} from './ReactFiberTransitionTypes';
+
+import noop from 'shared/noop';
+import reportGlobalError from 'shared/reportGlobalError';
+
+// If there are multiple, concurrent async actions, they are entangled. All
+// transition updates that occur while the async action is still in progress
+// are treated as part of the action.
+//
+// The ideal behavior would be to treat each async function as an independent
+// action. However, without a mechanism like AsyncContext, we can't tell which
+// action an update corresponds to. So instead, we entangle them all into one.
+
+// The listeners to notify once the entangled scope completes.
+let currentEntangledListeners: Array<() => mixed> | null = null;
+// The number of pending async actions in the entangled scope.
+let currentEntangledPendingCount: number = 0;
+// The transition lane shared by all updates in the entangled scope.
+let currentEntangledLane: Lane = NoLane;
+// A thenable that resolves when the entangled scope completes. It does not
+// resolve to a particular value because it's only used for suspending the UI
+// until the async action scope has completed.
+let currentEntangledActionThenable: Thenable<void> | null = null;
+
+// Track the default indicator for every root. undefined means we haven't
+// had any roots registered yet. null means there's more than one callback.
+// If there's more than one callback we bailout to not supporting isomorphic
+// default indicators.
+let isomorphicDefaultTransitionIndicator:
+  | void
+  | null
+  | (() => void | (() => void)) = undefined;
+// The clean up function for the currently running indicator.
+let pendingIsomorphicIndicator: null | (() => void) = null;
+// The number of roots that have pending Transitions that depend on the
+// started isomorphic indicator.
+let pendingEntangledRoots: number = 0;
+let needsIsomorphicIndicator: boolean = false;
+
+export function entangleAsyncAction<S>(
+  transition: Transition,
+  thenable: Thenable<S>,
+): Thenable<S> {
+  // `thenable` is the return value of the async action scope function. Create
+  // a combined thenable that resolves once every entangled scope function
+  // has finished.
+  if (currentEntangledListeners === null) {
+    // There's no outer async action scope. Create a new one.
+    const entangledListeners = (currentEntangledListeners = []);
+    currentEntangledPendingCount = 0;
+    currentEntangledLane = requestTransitionLane(transition);
+    const entangledThenable: Thenable<void> = {
+      status: 'pending',
+      value: undefined,
+      then(resolve: void => mixed) {
+        entangledListeners.push(resolve);
+      },
+    };
+    currentEntangledActionThenable = entangledThenable;
+    if (enableDefaultTransitionIndicator) {
+      needsIsomorphicIndicator = true;
+      // We'll check if we need a default indicator in a microtask. Ensure
+      // we have this scheduled even if no root is scheduled.
+      ensureScheduleIsScheduled();
+    }
+  }
+  currentEntangledPendingCount++;
+  thenable.then(pingEngtangledActionScope, pingEngtangledActionScope);
+  return thenable;
+}
+
+function pingEngtangledActionScope() {
+  if (--currentEntangledPendingCount === 0) {
+    if (enableProfilerTimer && enableComponentPerformanceTrack) {
+      if (!hasScheduledTransitionWork()) {
+        // If we have received no updates since we started the entangled Actions
+        // that means it didn't lead to a Transition being rendered. We need to
+        // clear the timer so that if we start another entangled sequence we use
+        // the next start timer instead of appearing like we were blocked the
+        // whole time. We currently don't log a track for Actions that don't
+        // render a Transition.
+        clearAsyncTransitionTimer();
+      }
+    }
+    clearEntangledAsyncTransitionTypes();
+    if (pendingEntangledRoots === 0) {
+      stopIsomorphicDefaultIndicator();
+    }
+    if (currentEntangledListeners !== null) {
+      // All the actions have finished. Close the entangled async action scope
+      // and notify all the listeners.
+      if (currentEntangledActionThenable !== null) {
+        const fulfilledThenable: FulfilledThenable<void> =
+          (currentEntangledActionThenable: any);
+        fulfilledThenable.status = 'fulfilled';
+      }
+      const listeners = currentEntangledListeners;
+      currentEntangledListeners = null;
+      currentEntangledLane = NoLane;
+      currentEntangledActionThenable = null;
+      needsIsomorphicIndicator = false;
+      for (let i = 0; i < listeners.length; i++) {
+        const listener = listeners[i];
+        listener();
+      }
+    }
+  }
+}
+
+export function chainThenableValue<T>(
+  thenable: Thenable<T>,
+  result: T,
+): Thenable<T> {
+  // Equivalent to: Promise.resolve(thenable).then(() => result), except we can
+  // cheat a bit since we know that that this thenable is only ever consumed
+  // by React.
+  //
+  // We don't technically require promise support on the client yet, hence this
+  // extra code.
+  const listeners = [];
+  const thenableWithOverride: Thenable<T> = {
+    status: 'pending',
+    value: null,
+    reason: null,
+    then(resolve: T => mixed) {
+      listeners.push(resolve);
+    },
+  };
+  thenable.then(
+    (value: T) => {
+      const fulfilledThenable: FulfilledThenable<T> =
+        (thenableWithOverride: any);
+      fulfilledThenable.status = 'fulfilled';
+      fulfilledThenable.value = result;
+      for (let i = 0; i < listeners.length; i++) {
+        const listener = listeners[i];
+        listener(result);
+      }
+    },
+    error => {
+      const rejectedThenable: RejectedThenable<T> = (thenableWithOverride: any);
+      rejectedThenable.status = 'rejected';
+      rejectedThenable.reason = error;
+      for (let i = 0; i < listeners.length; i++) {
+        const listener = listeners[i];
+        // This is a perf hack where we call the `onFulfill` ping function
+        // instead of `onReject`, because we know that React is the only
+        // consumer of these promises, and it passes the same listener to both.
+        // We also know that it will read the error directly off the
+        // `.reason` field.
+        listener((undefined: any));
+      }
+    },
+  );
+  return thenableWithOverride;
+}
+
+export function peekEntangledActionLane(): Lane {
+  return currentEntangledLane;
+}
+
+export function peekEntangledActionThenable(): Thenable<void> | null {
+  return currentEntangledActionThenable;
+}
+
+export function registerDefaultIndicator(
+  onDefaultTransitionIndicator: () => void | (() => void),
+): void {
+  if (!enableDefaultTransitionIndicator) {
+    return;
+  }
+  if (isomorphicDefaultTransitionIndicator === undefined) {
+    isomorphicDefaultTransitionIndicator = onDefaultTransitionIndicator;
+  } else if (
+    isomorphicDefaultTransitionIndicator !== onDefaultTransitionIndicator
+  ) {
+    isomorphicDefaultTransitionIndicator = null;
+    // Stop any on-going indicator since it's now ambiguous.
+    stopIsomorphicDefaultIndicator();
+  }
+}
+
+export function startIsomorphicDefaultIndicatorIfNeeded() {
+  if (!enableDefaultTransitionIndicator) {
+    return;
+  }
+  if (!needsIsomorphicIndicator) {
+    return;
+  }
+  if (
+    isomorphicDefaultTransitionIndicator != null &&
+    pendingIsomorphicIndicator === null
+  ) {
+    try {
+      pendingIsomorphicIndicator =
+        isomorphicDefaultTransitionIndicator() || noop;
+    } catch (x) {
+      pendingIsomorphicIndicator = noop;
+      reportGlobalError(x);
+    }
+  }
+}
+
+function stopIsomorphicDefaultIndicator() {
+  if (!enableDefaultTransitionIndicator) {
+    return;
+  }
+  if (pendingIsomorphicIndicator !== null) {
+    const cleanup = pendingIsomorphicIndicator;
+    pendingIsomorphicIndicator = null;
+    cleanup();
+  }
+}
+
+function releaseIsomorphicIndicator() {
+  if (--pendingEntangledRoots === 0) {
+    stopIsomorphicDefaultIndicator();
+  }
+}
+
+export function hasOngoingIsomorphicIndicator(): boolean {
+  return pendingIsomorphicIndicator !== null;
+}
+
+export function retainIsomorphicIndicator(): () => void {
+  pendingEntangledRoots++;
+  return releaseIsomorphicIndicator;
+}
+
+export function markIsomorphicIndicatorHandled(): void {
+  needsIsomorphicIndicator = false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberAsyncDispatcher.js b/packages/react-reconciler/src/ReactFiberAsyncDispatcher.js
new file mode 100644
index 00000000000..2dfee307e2c
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAsyncDispatcher.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncDispatcher, Fiber} from './ReactInternalTypes';
+import type {Cache} from './ReactFiberCacheComponent';
+
+import {readContext} from './ReactFiberNewContext';
+import {CacheContext} from './ReactFiberCacheComponent';
+
+import {current as currentOwner} from './ReactCurrentFiber';
+
+function getCacheForType<T>(resourceType: () => T): T {
+  const cache: Cache = readContext(CacheContext);
+  let cacheForType: T | void = (cache.data.get(resourceType): any);
+  if (cacheForType === undefined) {
+    cacheForType = resourceType();
+    cache.data.set(resourceType, cacheForType);
+  }
+  return cacheForType;
+}
+
+function cacheSignal(): null | AbortSignal {
+  const cache: Cache = readContext(CacheContext);
+  return cache.controller.signal;
+}
+
+export const DefaultAsyncDispatcher: AsyncDispatcher = ({
+  getCacheForType,
+  cacheSignal,
+}: any);
+
+if (__DEV__) {
+  DefaultAsyncDispatcher.getOwner = (): null | Fiber => {
+    return currentOwner;
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
new file mode 100644
index 00000000000..4ea1a152637
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -0,0 +1,4426 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactConsumerType,
+  ReactContext,
+  ReactNodeList,
+  ViewTransitionProps,
+  ActivityProps,
+  SuspenseProps,
+  SuspenseListProps,
+  SuspenseListRevealOrder,
+  SuspenseListTailMode,
+  TracingMarkerProps,
+  CacheProps,
+  ProfilerProps,
+} from 'shared/ReactTypes';
+import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {TypeOfMode} from './ReactTypeOfMode';
+import type {Lanes, Lane} from './ReactFiberLane';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {
+  SuspenseState,
+  SuspenseListRenderState,
+} from './ReactFiberSuspenseComponent';
+import type {SuspenseContext} from './ReactFiberSuspenseContext';
+import type {
+  LegacyHiddenProps,
+  OffscreenProps,
+  OffscreenState,
+  OffscreenQueue,
+  OffscreenInstance,
+} from './ReactFiberOffscreenComponent';
+import type {
+  Cache,
+  CacheComponentState,
+  SpawnedCachePool,
+} from './ReactFiberCacheComponent';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
+import type {RootState} from './ReactFiberRoot';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
+
+import {
+  markComponentRenderStarted,
+  markComponentRenderStopped,
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook';
+import {
+  FunctionComponent,
+  ClassComponent,
+  HostRoot,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  HostPortal,
+  ForwardRef,
+  Fragment,
+  Mode,
+  ContextProvider,
+  ContextConsumer,
+  Profiler,
+  SuspenseComponent,
+  SuspenseListComponent,
+  MemoComponent,
+  SimpleMemoComponent,
+  LazyComponent,
+  IncompleteClassComponent,
+  IncompleteFunctionComponent,
+  ScopeComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  CacheComponent,
+  TracingMarkerComponent,
+  Throw,
+  ViewTransitionComponent,
+  ActivityComponent,
+} from './ReactWorkTags';
+import {
+  NoFlags,
+  PerformedWork,
+  Placement,
+  Hydrating,
+  Callback,
+  ContentReset,
+  DidCapture,
+  Update,
+  Ref,
+  RefStatic,
+  ChildDeletion,
+  ForceUpdateForLegacySuspense,
+  StaticMask,
+  ShouldCapture,
+  ForceClientRender,
+  Passive,
+  DidDefer,
+  ViewTransitionNamedStatic,
+  ViewTransitionNamedMount,
+  LayoutStatic,
+} from './ReactFiberFlags';
+import {
+  disableLegacyContext,
+  disableLegacyContextForFunctionComponents,
+  enableProfilerCommitHooks,
+  enableProfilerTimer,
+  enableScopeAPI,
+  enableSchedulingProfiler,
+  enableTransitionTracing,
+  enableLegacyHidden,
+  enableCPUSuspense,
+  disableLegacyMode,
+  enableViewTransition,
+  enableFragmentRefs,
+} from 'shared/ReactFeatureFlags';
+import shallowEqual from 'shared/shallowEqual';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import ReactStrictModeWarnings from './ReactStrictModeWarnings';
+import {
+  REACT_LAZY_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+} from 'shared/ReactSymbols';
+import {setCurrentFiber} from './ReactCurrentFiber';
+import {
+  resolveFunctionForHotReloading,
+  resolveForwardRefForHotReloading,
+  resolveClassForHotReloading,
+} from './ReactFiberHotReloading';
+
+import {
+  mountChildFibers,
+  reconcileChildFibers,
+  cloneChildFibers,
+  validateSuspenseListChildren,
+} from './ReactChildFiber';
+import {
+  processUpdateQueue,
+  cloneUpdateQueue,
+  initializeUpdateQueue,
+  enqueueCapturedUpdate,
+  suspendIfUpdateReadFromEntangledAsyncAction,
+} from './ReactFiberClassUpdateQueue';
+import {
+  NoLane,
+  NoLanes,
+  OffscreenLane,
+  DefaultLane,
+  SomeRetryLane,
+  includesSomeLane,
+  includesOnlyRetries,
+  laneToLanes,
+  removeLanes,
+  mergeLanes,
+  getBumpedLaneForHydration,
+  pickArbitraryLane,
+} from './ReactFiberLane';
+import {
+  ConcurrentMode,
+  NoMode,
+  ProfileMode,
+  StrictLegacyMode,
+} from './ReactTypeOfMode';
+import {
+  shouldSetTextContent,
+  isSuspenseInstancePending,
+  isSuspenseInstanceFallback,
+  getSuspenseInstanceFallbackErrorDetails,
+  supportsHydration,
+  supportsResources,
+  supportsSingletons,
+  isPrimaryRenderer,
+  getResource,
+  createHoistableInstance,
+  HostTransitionContext,
+} from './ReactFiberConfig';
+import type {ActivityInstance, SuspenseInstance} from './ReactFiberConfig';
+import {shouldError, shouldSuspend} from './ReactFiberReconciler';
+import {
+  pushHostContext,
+  pushHostContainer,
+  getRootHostContainer,
+} from './ReactFiberHostContext';
+import {
+  suspenseStackCursor,
+  pushSuspenseListContext,
+  ForceSuspenseFallback,
+  hasSuspenseListContext,
+  setDefaultShallowSuspenseListContext,
+  setShallowSuspenseListContext,
+  pushPrimaryTreeSuspenseHandler,
+  pushFallbackTreeSuspenseHandler,
+  pushDehydratedActivitySuspenseHandler,
+  pushOffscreenSuspenseHandler,
+  reuseSuspenseHandlerOnStack,
+  popSuspenseHandler,
+} from './ReactFiberSuspenseContext';
+import {
+  pushHiddenContext,
+  reuseHiddenContextOnStack,
+} from './ReactFiberHiddenContext';
+import {findFirstSuspended} from './ReactFiberSuspenseComponent';
+import {
+  pushProvider,
+  propagateContextChange,
+  lazilyPropagateParentContextChanges,
+  propagateParentContextChangesToDeferredTree,
+  checkIfContextChanged,
+  readContext,
+  prepareToReadContext,
+  scheduleContextWorkOnParentPath,
+} from './ReactFiberNewContext';
+import {
+  renderWithHooks,
+  checkDidRenderIdHook,
+  bailoutHooks,
+  replaySuspendedComponentWithHooks,
+  renderTransitionAwareHostComponentWithHooks,
+} from './ReactFiberHooks';
+import {stopProfilerTimerIfRunning} from './ReactProfilerTimer';
+import {
+  getMaskedContext,
+  getUnmaskedContext,
+  hasContextChanged as hasLegacyContextChanged,
+  pushContextProvider as pushLegacyContextProvider,
+  isContextProvider as isLegacyContextProvider,
+  pushTopLevelContextObject,
+  invalidateContextProvider,
+} from './ReactFiberLegacyContext';
+import {
+  getIsHydrating,
+  enterHydrationState,
+  reenterHydrationStateFromDehydratedActivityInstance,
+  reenterHydrationStateFromDehydratedSuspenseInstance,
+  resetHydrationState,
+  claimHydratableSingleton,
+  tryToClaimNextHydratableInstance,
+  tryToClaimNextHydratableTextInstance,
+  claimNextHydratableActivityInstance,
+  claimNextHydratableSuspenseInstance,
+  warnIfHydrating,
+  queueHydrationError,
+} from './ReactFiberHydrationContext';
+import {
+  constructClassInstance,
+  mountClassInstance,
+  resumeMountClassInstance,
+  updateClassInstance,
+  resolveClassComponentProps,
+} from './ReactFiberClassComponent';
+import {
+  createFiberFromTypeAndProps,
+  createFiberFromFragment,
+  createFiberFromOffscreen,
+  createWorkInProgress,
+  isSimpleFunctionComponent,
+  isFunctionClassComponent,
+} from './ReactFiber';
+import {
+  scheduleUpdateOnFiber,
+  renderDidSuspendDelayIfPossible,
+  markSkippedUpdateLanes,
+  markRenderDerivedCause,
+  getWorkInProgressRoot,
+  peekDeferredLane,
+} from './ReactFiberWorkLoop';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates';
+import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent';
+import {
+  createCapturedValueFromError,
+  createCapturedValueAtFiber,
+} from './ReactCapturedValue';
+import {OffscreenVisible} from './ReactFiberOffscreenComponent';
+import {
+  createClassErrorUpdate,
+  initializeClassErrorUpdate,
+} from './ReactFiberThrow';
+import {
+  getForksAtLevel,
+  isForkedChild,
+  pushTreeId,
+  pushMaterializedTreeId,
+} from './ReactFiberTreeContext';
+import {
+  requestCacheFromPool,
+  pushRootTransition,
+  getSuspendedCache,
+  pushTransition,
+  getOffscreenDeferredCache,
+  getPendingTransitions,
+} from './ReactFiberTransition';
+import {
+  getMarkerInstances,
+  pushMarkerInstance,
+  pushRootMarkerInstance,
+  TransitionTracingMarker,
+} from './ReactFiberTracingMarkerComponent';
+import {callComponentInDEV, callRenderInDEV} from './ReactFiberCallUserSpace';
+import {resolveLazy} from './ReactFiberThenable';
+
+// A special exception that's used to unwind the stack when an update flows
+// into a dehydrated boundary.
+export const SelectiveHydrationException: mixed = new Error(
+  "This is not a real error. It's an implementation detail of React's " +
+    "selective hydration feature. If this leaks into userspace, it's a bug in " +
+    'React. Please file an issue.',
+);
+
+let didReceiveUpdate: boolean = false;
+
+let didWarnAboutBadClass;
+let didWarnAboutContextTypeOnFunctionComponent;
+let didWarnAboutContextTypes;
+let didWarnAboutGetDerivedStateOnFunctionComponent;
+export let didWarnAboutReassigningProps: boolean;
+let didWarnAboutRevealOrder;
+let didWarnAboutTailOptions;
+let didWarnAboutClassNameOnViewTransition;
+
+if (__DEV__) {
+  didWarnAboutBadClass = ({}: {[string]: boolean});
+  didWarnAboutContextTypeOnFunctionComponent = ({}: {[string]: boolean});
+  didWarnAboutContextTypes = ({}: {[string]: boolean});
+  didWarnAboutGetDerivedStateOnFunctionComponent = ({}: {[string]: boolean});
+  didWarnAboutReassigningProps = false;
+  didWarnAboutRevealOrder = ({}: {[string]: boolean});
+  didWarnAboutTailOptions = ({}: {[string]: boolean});
+  didWarnAboutClassNameOnViewTransition = ({}: {[string]: boolean});
+}
+
+export function reconcileChildren(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextChildren: any,
+  renderLanes: Lanes,
+) {
+  if (current === null) {
+    // If this is a fresh new component that hasn't been rendered yet, we
+    // won't update its child set by applying minimal side-effects. Instead,
+    // we will add them all to the child before it gets rendered. That means
+    // we can optimize this reconciliation pass by not tracking side-effects.
+    workInProgress.child = mountChildFibers(
+      workInProgress,
+      null,
+      nextChildren,
+      renderLanes,
+    );
+  } else {
+    // If the current child is the same as the work in progress, it means that
+    // we haven't yet started any work on these children. Therefore, we use
+    // the clone algorithm to create a copy of all the current children.
+
+    // If we had any progressed work already, that is invalid at this point so
+    // let's throw it out.
+    workInProgress.child = reconcileChildFibers(
+      workInProgress,
+      current.child,
+      nextChildren,
+      renderLanes,
+    );
+  }
+}
+
+function forceUnmountCurrentAndReconcile(
+  current: Fiber,
+  workInProgress: Fiber,
+  nextChildren: any,
+  renderLanes: Lanes,
+) {
+  // This function is fork of reconcileChildren. It's used in cases where we
+  // want to reconcile without matching against the existing set. This has the
+  // effect of all current children being unmounted; even if the type and key
+  // are the same, the old child is unmounted and a new child is created.
+  //
+  // To do this, we're going to go through the reconcile algorithm twice. In
+  // the first pass, we schedule a deletion for all the current children by
+  // passing null.
+  workInProgress.child = reconcileChildFibers(
+    workInProgress,
+    current.child,
+    null,
+    renderLanes,
+  );
+  // 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
+  // identities match.
+  workInProgress.child = reconcileChildFibers(
+    workInProgress,
+    null,
+    nextChildren,
+    renderLanes,
+  );
+}
+
+function updateForwardRef(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+) {
+  // 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 = Component.render;
+  const ref = workInProgress.ref;
+
+  let propsWithoutRef;
+  if ('ref' in nextProps) {
+    // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+    // the props object. This used to happen in the JSX runtime, but now we do
+    // it here.
+    propsWithoutRef = ({}: {[string]: any});
+    for (const key in nextProps) {
+      // Since `ref` should only appear in props via the JSX transform, we can
+      // assume that this is a plain object. So we don't need a
+      // hasOwnProperty check.
+      if (key !== 'ref') {
+        propsWithoutRef[key] = nextProps[key];
+      }
+    }
+  } else {
+    propsWithoutRef = nextProps;
+  }
+
+  // The rest is a fork of updateFunctionComponent
+  prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
+
+  const nextChildren = renderWithHooks(
+    current,
+    workInProgress,
+    render,
+    propsWithoutRef,
+    ref,
+    renderLanes,
+  );
+  const hasId = checkDidRenderIdHook();
+
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
+
+  if (current !== null && !didReceiveUpdate) {
+    bailoutHooks(current, workInProgress, renderLanes);
+    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+  }
+
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
+  // React DevTools reads this flag.
+  workInProgress.flags |= PerformedWork;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateMemoComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+): null | Fiber {
+  if (current === null) {
+    const type = Component.type;
+    if (isSimpleFunctionComponent(type) && Component.compare === null) {
+      let resolvedType = type;
+      if (__DEV__) {
+        resolvedType = resolveFunctionForHotReloading(type);
+      }
+      // If this is a plain function component without default props,
+      // and with only the default shallow comparison, we upgrade it
+      // to a SimpleMemoComponent to allow fast path updates.
+      workInProgress.tag = SimpleMemoComponent;
+      workInProgress.type = resolvedType;
+      if (__DEV__) {
+        validateFunctionComponentInDev(workInProgress, type);
+      }
+      return updateSimpleMemoComponent(
+        current,
+        workInProgress,
+        resolvedType,
+        nextProps,
+        renderLanes,
+      );
+    }
+    const child = createFiberFromTypeAndProps(
+      Component.type,
+      null,
+      nextProps,
+      workInProgress,
+      workInProgress.mode,
+      renderLanes,
+    );
+    child.ref = workInProgress.ref;
+    child.return = workInProgress;
+    workInProgress.child = child;
+    return child;
+  }
+  const currentChild = ((current.child: any): Fiber); // This is always exactly one child
+  const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext(
+    current,
+    renderLanes,
+  );
+  if (!hasScheduledUpdateOrContext) {
+    // This will be the props with resolved defaultProps,
+    // unlike current.memoizedProps which will be the unresolved ones.
+    const prevProps = currentChild.memoizedProps;
+    // Default to shallow comparison
+    let compare = Component.compare;
+    compare = compare !== null ? compare : shallowEqual;
+    if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
+      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+    }
+  }
+  // React DevTools reads this flag.
+  workInProgress.flags |= PerformedWork;
+  const newChild = createWorkInProgress(currentChild, nextProps);
+  newChild.ref = workInProgress.ref;
+  newChild.return = workInProgress;
+  workInProgress.child = newChild;
+  return newChild;
+}
+
+function updateSimpleMemoComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+): null | Fiber {
+  // TODO: current can be non-null here even if the component
+  // hasn't yet mounted. This happens when the inner render suspends.
+  // We'll need to figure out if this is fine or can cause issues.
+  if (current !== null) {
+    const prevProps = current.memoizedProps;
+    if (
+      shallowEqual(prevProps, nextProps) &&
+      current.ref === workInProgress.ref &&
+      // Prevent bailout if the implementation changed due to hot reload.
+      (__DEV__ ? workInProgress.type === current.type : true)
+    ) {
+      didReceiveUpdate = false;
+
+      // The props are shallowly equal. Reuse the previous props object, like we
+      // would during a normal fiber bailout.
+      //
+      // We don't have strong guarantees that the props object is referentially
+      // equal during updates where we can't bail out anyway — like if the props
+      // are shallowly equal, but there's a local state or context update in the
+      // same batch.
+      //
+      // However, as a principle, we should aim to make the behavior consistent
+      // across different ways of memoizing a component. For example, React.memo
+      // has a different internal Fiber layout if you pass a normal function
+      // component (SimpleMemoComponent) versus if you pass a different type
+      // like forwardRef (MemoComponent). But this is an implementation detail.
+      // Wrapping a component in forwardRef (or React.lazy, etc) shouldn't
+      // affect whether the props object is reused during a bailout.
+      workInProgress.pendingProps = nextProps = prevProps;
+
+      if (!checkScheduledUpdateOrContext(current, renderLanes)) {
+        // The pending lanes were cleared at the beginning of beginWork. We're
+        // about to bail out, but there might be other lanes that weren't
+        // included in the current render. Usually, the priority level of the
+        // remaining updates is accumulated during the evaluation of the
+        // component (i.e. when processing the update queue). But since since
+        // we're bailing out early *without* evaluating the component, we need
+        // to account for it here, too. Reset to the value of the current fiber.
+        // NOTE: This only applies to SimpleMemoComponent, not MemoComponent,
+        // because a MemoComponent fiber does not have hooks or an update queue;
+        // rather, it wraps around an inner component, which may or may not
+        // contains hooks.
+        // TODO: Move the reset at in beginWork out of the common path so that
+        // this is no longer necessary.
+        workInProgress.lanes = current.lanes;
+        return bailoutOnAlreadyFinishedWork(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      } else if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
+        // This is a special case that only exists for legacy mode.
+        // See https://github.com/facebook/react/pull/19216.
+        didReceiveUpdate = true;
+      }
+    }
+  }
+  return updateFunctionComponent(
+    current,
+    workInProgress,
+    Component,
+    nextProps,
+    renderLanes,
+  );
+}
+
+function updateOffscreenComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+  nextProps: OffscreenProps,
+) {
+  const nextChildren = nextProps.children;
+
+  const prevState: OffscreenState | null =
+    current !== null ? current.memoizedState : null;
+
+  if (current === null && workInProgress.stateNode === null) {
+    // We previously reset the work-in-progress.
+    // We need to create a new Offscreen instance.
+    const primaryChildInstance: OffscreenInstance = {
+      _visibility: OffscreenVisible,
+      _pendingMarkers: null,
+      _retryCache: null,
+      _transitions: null,
+    };
+    workInProgress.stateNode = primaryChildInstance;
+  }
+
+  if (
+    nextProps.mode === 'hidden' ||
+    (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
+  ) {
+    // Rendering a hidden tree.
+
+    const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
+    if (didSuspend) {
+      // Something suspended inside a hidden tree
+
+      // Include the base lanes from the last render
+      const nextBaseLanes =
+        prevState !== null
+          ? mergeLanes(prevState.baseLanes, renderLanes)
+          : renderLanes;
+
+      let remainingChildLanes;
+      if (current !== null) {
+        // Reset to the current children
+        let currentChild = (workInProgress.child = current.child);
+
+        // The current render suspended, but there may be other lanes with
+        // pending work. We can't read `childLanes` from the current Offscreen
+        // fiber because we reset it when it was deferred; however, we can read
+        // the pending lanes from the child fibers.
+        let currentChildLanes: Lanes = NoLanes;
+        while (currentChild !== null) {
+          currentChildLanes = mergeLanes(
+            mergeLanes(currentChildLanes, currentChild.lanes),
+            currentChild.childLanes,
+          );
+          currentChild = currentChild.sibling;
+        }
+        const lanesWeJustAttempted = nextBaseLanes;
+        remainingChildLanes = removeLanes(
+          currentChildLanes,
+          lanesWeJustAttempted,
+        );
+      } else {
+        remainingChildLanes = NoLanes;
+        workInProgress.child = null;
+      }
+
+      return deferHiddenOffscreenComponent(
+        current,
+        workInProgress,
+        nextBaseLanes,
+        renderLanes,
+        remainingChildLanes,
+      );
+    }
+
+    if (
+      !disableLegacyMode &&
+      (workInProgress.mode & ConcurrentMode) === NoMode
+    ) {
+      // In legacy sync mode, don't defer the subtree. Render it now.
+      // TODO: Consider how Offscreen should work with transitions in the future
+      const nextState: OffscreenState = {
+        baseLanes: NoLanes,
+        cachePool: null,
+      };
+      workInProgress.memoizedState = nextState;
+      // push the cache pool even though we're going to bail out
+      // because otherwise there'd be a context mismatch
+      if (current !== null) {
+        pushTransition(workInProgress, null, null);
+      }
+      reuseHiddenContextOnStack(workInProgress);
+      pushOffscreenSuspenseHandler(workInProgress);
+    } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+      // We're hidden, and we're not rendering at Offscreen. We will bail out
+      // and resume this tree later.
+
+      // Schedule this fiber to re-render at Offscreen priority
+
+      const remainingChildLanes = (workInProgress.lanes =
+        laneToLanes(OffscreenLane));
+
+      // Include the base lanes from the last render
+      const nextBaseLanes =
+        prevState !== null
+          ? mergeLanes(prevState.baseLanes, renderLanes)
+          : renderLanes;
+
+      return deferHiddenOffscreenComponent(
+        current,
+        workInProgress,
+        nextBaseLanes,
+        renderLanes,
+        remainingChildLanes,
+      );
+    } else {
+      // This is the second render. The surrounding visible content has already
+      // committed. Now we resume rendering the hidden tree.
+
+      // Rendering at offscreen, so we can clear the base lanes.
+      const nextState: OffscreenState = {
+        baseLanes: NoLanes,
+        cachePool: null,
+      };
+      workInProgress.memoizedState = nextState;
+      if (current !== null) {
+        // If the render that spawned this one accessed the cache pool, resume
+        // using the same cache. Unless the parent changed, since that means
+        // there was a refresh.
+        const prevCachePool = prevState !== null ? prevState.cachePool : null;
+        // TODO: Consider if and how Offscreen pre-rendering should
+        // be attributed to the transition that spawned it
+        pushTransition(workInProgress, prevCachePool, null);
+      }
+
+      // Push the lanes that were skipped when we bailed out.
+      if (prevState !== null) {
+        pushHiddenContext(workInProgress, prevState);
+      } else {
+        reuseHiddenContextOnStack(workInProgress);
+      }
+      pushOffscreenSuspenseHandler(workInProgress);
+    }
+  } else {
+    // Rendering a visible tree.
+    if (prevState !== null) {
+      // We're going from hidden -> visible.
+      let prevCachePool = null;
+      // If the render that spawned this one accessed the cache pool, resume
+      // using the same cache. Unless the parent changed, since that means
+      // there was a refresh.
+      prevCachePool = prevState.cachePool;
+
+      let transitions = null;
+      if (enableTransitionTracing) {
+        // We have now gone from hidden to visible, so any transitions should
+        // be added to the stack to get added to any Offscreen/suspense children
+        const instance: OffscreenInstance | null = workInProgress.stateNode;
+        if (instance !== null && instance._transitions != null) {
+          transitions = Array.from(instance._transitions);
+        }
+      }
+
+      pushTransition(workInProgress, prevCachePool, transitions);
+
+      // Push the lanes that were skipped when we bailed out.
+      pushHiddenContext(workInProgress, prevState);
+      reuseSuspenseHandlerOnStack(workInProgress);
+
+      // Since we're not hidden anymore, reset the state
+      workInProgress.memoizedState = null;
+    } else {
+      // We weren't previously hidden, and we still aren't, so there's nothing
+      // special to do. Need to push to the stack regardless, though, to avoid
+      // a push/pop misalignment.
+
+      // If the render that spawned this one accessed the cache pool, resume
+      // using the same cache. Unless the parent changed, since that means
+      // there was a refresh.
+      if (current !== null) {
+        pushTransition(workInProgress, null, null);
+      }
+
+      // We're about to bail out, but we need to push this to the stack anyway
+      // to avoid a push/pop misalignment.
+      reuseHiddenContextOnStack(workInProgress);
+      reuseSuspenseHandlerOnStack(workInProgress);
+    }
+  }
+
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function bailoutOffscreenComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+): Fiber | null {
+  if (
+    (current === null || current.tag !== OffscreenComponent) &&
+    workInProgress.stateNode === null
+  ) {
+    const primaryChildInstance: OffscreenInstance = {
+      _visibility: OffscreenVisible,
+      _pendingMarkers: null,
+      _retryCache: null,
+      _transitions: null,
+    };
+    workInProgress.stateNode = primaryChildInstance;
+  }
+
+  return workInProgress.sibling;
+}
+
+function deferHiddenOffscreenComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextBaseLanes: Lanes,
+  renderLanes: Lanes,
+  remainingChildLanes: Lanes,
+) {
+  const nextState: OffscreenState = {
+    baseLanes: nextBaseLanes,
+    // Save the cache pool so we can resume later.
+    cachePool: getOffscreenDeferredCache(),
+  };
+  workInProgress.memoizedState = nextState;
+  // push the cache pool even though we're going to bail out
+  // because otherwise there'd be a context mismatch
+  if (current !== null) {
+    pushTransition(workInProgress, null, null);
+  }
+
+  // We're about to bail out, but we need to push this to the stack anyway
+  // to avoid a push/pop misalignment.
+  reuseHiddenContextOnStack(workInProgress);
+
+  pushOffscreenSuspenseHandler(workInProgress);
+
+  if (current !== null) {
+    // Since this tree will resume rendering in a separate render, we need
+    // to propagate parent contexts now so we don't lose track of which
+    // ones changed.
+    propagateParentContextChangesToDeferredTree(
+      current,
+      workInProgress,
+      renderLanes,
+    );
+  }
+
+  // We override the remaining child lanes to be the subset that we computed
+  // on the outside. We need to do this after propagating the context
+  // because propagateParentContextChangesToDeferredTree may schedule
+  // work which bubbles all the way up to the root and updates our child lanes.
+  // We want to dismiss that since we're not going to work on it yet.
+  workInProgress.childLanes = remainingChildLanes;
+
+  return null;
+}
+
+function updateLegacyHiddenComponent(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextProps: LegacyHiddenProps = workInProgress.pendingProps;
+  // Note: These happen to have identical begin phases, for now. We shouldn't hold
+  // ourselves to this constraint, though. If the behavior diverges, we should
+  // fork the function.
+  // This just works today because it has the same Props.
+  return updateOffscreenComponent(
+    current,
+    workInProgress,
+    renderLanes,
+    nextProps,
+  );
+}
+
+function mountActivityChildren(
+  workInProgress: Fiber,
+  nextProps: ActivityProps,
+  renderLanes: Lanes,
+) {
+  if (__DEV__) {
+    const hiddenProp = (nextProps: any).hidden;
+    if (hiddenProp !== undefined) {
+      console.error(
+        '<Activity> doesn\'t accept a hidden prop. Use mode="hidden" instead.\n' +
+          '- <Activity %s>\n' +
+          '+ <Activity %s>',
+        hiddenProp === true
+          ? 'hidden'
+          : hiddenProp === false
+            ? 'hidden={false}'
+            : 'hidden={...}',
+        hiddenProp ? 'mode="hidden"' : 'mode="visible"',
+      );
+    }
+  }
+  const nextChildren = nextProps.children;
+  const nextMode = nextProps.mode;
+  const mode = workInProgress.mode;
+  const offscreenChildProps: OffscreenProps = {
+    mode: nextMode,
+    children: nextChildren,
+  };
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
+    offscreenChildProps,
+    mode,
+    renderLanes,
+  );
+  primaryChildFragment.ref = workInProgress.ref;
+  workInProgress.child = primaryChildFragment;
+  primaryChildFragment.return = workInProgress;
+  return primaryChildFragment;
+}
+
+function retryActivityComponentWithoutHydrating(
+  current: Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  // Falling back to client rendering. Because this has performance
+  // implications, it's considered a recoverable error, even though the user
+  // likely won't observe anything wrong with the UI.
+
+  // This will add the old fiber to the deletion list
+  reconcileChildFibers(workInProgress, current.child, null, renderLanes);
+
+  // We're now not suspended nor dehydrated.
+  const nextProps: ActivityProps = workInProgress.pendingProps;
+  const primaryChildFragment = mountActivityChildren(
+    workInProgress,
+    nextProps,
+    renderLanes,
+  );
+  // Needs a placement effect because the parent (the Activity boundary) already
+  // mounted but this is a new fiber.
+  primaryChildFragment.flags |= Placement;
+
+  // If we're not going to hydrate we can't leave it dehydrated if something
+  // suspends. In that case we want that to bubble to the nearest parent boundary
+  // so we need to pop our own handler that we just pushed.
+  popSuspenseHandler(workInProgress);
+
+  workInProgress.memoizedState = null;
+
+  return primaryChildFragment;
+}
+
+function mountDehydratedActivityComponent(
+  workInProgress: Fiber,
+  activityInstance: ActivityInstance,
+  renderLanes: Lanes,
+): 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.
+  // 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.lanes = laneToLanes(OffscreenLane);
+  return null;
+}
+
+function updateDehydratedActivityComponent(
+  current: Fiber,
+  workInProgress: Fiber,
+  didSuspend: boolean,
+  nextProps: ActivityProps,
+  activityInstance: ActivityInstance,
+  activityState: ActivityState,
+  renderLanes: Lanes,
+): null | Fiber {
+  // We'll handle suspending since if something suspends we can just leave
+  // it dehydrated. We push early and then pop if we enter non-dehydrated attempts.
+  pushDehydratedActivitySuspenseHandler(workInProgress);
+  if (!didSuspend) {
+    // This is the first render pass. Attempt to hydrate.
+
+    // We should never be hydrating at this point because it is the first pass,
+    // but after we've already committed once.
+    warnIfHydrating();
+
+    if (includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+      // If we're rendering Offscreen and we're entering the activity then it's possible
+      // that the only reason we rendered was because this boundary left work. Provide
+      // it as a cause if another one doesn't already exist.
+      markRenderDerivedCause(workInProgress);
+    }
+
+    if (
+      // TODO: Factoring is a little weird, since we check this right below, too.
+      !didReceiveUpdate
+    ) {
+      // We need to check if any children have context before we decide to bail
+      // out, so propagate the changes now.
+      lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
+    }
+
+    // We use lanes to indicate that a child might depend on context, so if
+    // any context has changed, we need to treat is as if the input might have changed.
+    const hasContextChanged = includesSomeLane(renderLanes, current.childLanes);
+    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 a higher priority lane.
+      const root = getWorkInProgressRoot();
+      if (root !== null) {
+        const attemptHydrationAtLane = getBumpedLaneForHydration(
+          root,
+          renderLanes,
+        );
+        if (
+          attemptHydrationAtLane !== NoLane &&
+          attemptHydrationAtLane !== activityState.retryLane
+        ) {
+          // Intentionally mutating since this render will get interrupted. This
+          // is one of the very rare times where we mutate the current tree
+          // during the render phase.
+          activityState.retryLane = attemptHydrationAtLane;
+          enqueueConcurrentRenderForLane(current, attemptHydrationAtLane);
+          scheduleUpdateOnFiber(root, current, attemptHydrationAtLane);
+
+          // Throw a special object that signals to the work loop that it should
+          // interrupt the current render.
+          //
+          // Because we're inside a React-only execution stack, we don't
+          // strictly need to throw here — we could instead modify some internal
+          // work loop state. But using an exception means we don't need to
+          // check for this case on every iteration of the work loop. So doing
+          // it this way moves the check out of the fast path.
+          throw SelectiveHydrationException;
+        } 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 Activity boundary to take its place. This might suspend for a while
+          // and if it does we might still have an opportunity to hydrate before this pass
+          // commits.
+        }
+      }
+
+      // If we did not selectively hydrate, we'll continue rendering without
+      // hydrating. Mark this tree as suspended to prevent it from committing
+      // outside a transition.
+      //
+      // This path should only happen if the hydration lane already suspended.
+      renderDidSuspendDelayIfPossible();
+      return retryActivityComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    } else {
+      // This is the first attempt.
+
+      reenterHydrationStateFromDehydratedActivityInstance(
+        workInProgress,
+        activityInstance,
+        activityState.treeContext,
+      );
+
+      const primaryChildFragment = mountActivityChildren(
+        workInProgress,
+        nextProps,
+        renderLanes,
+      );
+      // Mark the children 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.
+      primaryChildFragment.flags |= Hydrating;
+      return primaryChildFragment;
+    }
+  } else {
+    // This is the second render pass. We already attempted to hydrated, but
+    // something either suspended or errored.
+
+    if (workInProgress.flags & ForceClientRender) {
+      // Something errored during hydration. Try again without hydrating.
+      // The error should've already been logged in throwException.
+      workInProgress.flags &= ~ForceClientRender;
+      return retryActivityComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    } else if ((workInProgress.memoizedState: null | ActivityState) !== 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 offscreen pass doesn't.
+      workInProgress.flags |= DidCapture;
+      return null;
+    } else {
+      // We called retryActivityComponentWithoutHydrating and tried client rendering
+      // but now we suspended again. We should never arrive here because we should
+      // not have pushed a suspense handler during that second pass and it should
+      // instead have suspended above.
+      throw new Error(
+        'Client rendering an Activity suspended it again. This is a bug in React.',
+      );
+    }
+  }
+}
+
+function updateActivityComponent(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextProps: ActivityProps = workInProgress.pendingProps;
+
+  // Check if the first pass suspended.
+  const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
+  workInProgress.flags &= ~DidCapture;
+
+  if (current === null) {
+    // Initial mount
+
+    // Special path for hydration
+    // If we're currently hydrating, try to hydrate this boundary.
+    // Hidden Activity boundaries are not emitted on the server.
+    if (getIsHydrating()) {
+      if (nextProps.mode === 'hidden') {
+        // SSR doesn't render hidden Activity so it shouldn't hydrate,
+        // even at offscreen lane. Defer to a client rendered offscreen lane.
+        const primaryChildFragment = mountActivityChildren(
+          workInProgress,
+          nextProps,
+          renderLanes,
+        );
+        workInProgress.lanes = laneToLanes(OffscreenLane);
+        return bailoutOffscreenComponent(null, primaryChildFragment);
+      } else {
+        // We must push the suspense handler context *before* attempting to
+        // hydrate, to avoid a mismatch in case it errors.
+        pushDehydratedActivitySuspenseHandler(workInProgress);
+        const dehydrated: ActivityInstance =
+          claimNextHydratableActivityInstance(workInProgress);
+        return mountDehydratedActivityComponent(
+          workInProgress,
+          dehydrated,
+          renderLanes,
+        );
+      }
+    }
+
+    return mountActivityChildren(workInProgress, nextProps, renderLanes);
+  } else {
+    // This is an update.
+
+    // Special path for hydration
+    const prevState: null | ActivityState = current.memoizedState;
+
+    if (prevState !== null) {
+      const dehydrated = prevState.dehydrated;
+      return updateDehydratedActivityComponent(
+        current,
+        workInProgress,
+        didSuspend,
+        nextProps,
+        dehydrated,
+        prevState,
+        renderLanes,
+      );
+    }
+
+    const currentChild: Fiber = (current.child: any);
+
+    const nextChildren = nextProps.children;
+    const nextMode = nextProps.mode;
+    const offscreenChildProps: OffscreenProps = {
+      mode: nextMode,
+      children: nextChildren,
+    };
+
+    if (
+      includesSomeLane(renderLanes, (OffscreenLane: Lane)) &&
+      includesSomeLane(renderLanes, current.lanes)
+    ) {
+      // If we're rendering Offscreen and we're entering the activity then it's possible
+      // that the only reason we rendered was because this boundary left work. Provide
+      // it as a cause if another one doesn't already exist.
+      markRenderDerivedCause(workInProgress);
+    }
+
+    const primaryChildFragment = updateWorkInProgressOffscreenFiber(
+      currentChild,
+      offscreenChildProps,
+    );
+
+    primaryChildFragment.ref = workInProgress.ref;
+    workInProgress.child = primaryChildFragment;
+    primaryChildFragment.return = workInProgress;
+    return primaryChildFragment;
+  }
+}
+
+function updateCacheComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  prepareToReadContext(workInProgress, renderLanes);
+  const parentCache = readContext(CacheContext);
+
+  if (current === null) {
+    // Initial mount. Request a fresh cache from the pool.
+    const freshCache = requestCacheFromPool(renderLanes);
+    const initialState: CacheComponentState = {
+      parent: parentCache,
+      cache: freshCache,
+    };
+    workInProgress.memoizedState = initialState;
+    initializeUpdateQueue(workInProgress);
+    pushCacheProvider(workInProgress, freshCache);
+  } else {
+    // Check for updates
+    if (includesSomeLane(current.lanes, renderLanes)) {
+      cloneUpdateQueue(current, workInProgress);
+      processUpdateQueue(workInProgress, null, null, renderLanes);
+      suspendIfUpdateReadFromEntangledAsyncAction();
+    }
+    const prevState: CacheComponentState = current.memoizedState;
+    const nextState: CacheComponentState = workInProgress.memoizedState;
+
+    // Compare the new parent cache to the previous to see detect there was
+    // a refresh.
+    if (prevState.parent !== parentCache) {
+      // Refresh in parent. Update the parent.
+      const derivedState: CacheComponentState = {
+        parent: parentCache,
+        cache: parentCache,
+      };
+
+      // Copied from getDerivedStateFromProps implementation. Once the update
+      // queue is empty, persist the derived state onto the base state.
+      workInProgress.memoizedState = derivedState;
+      if (workInProgress.lanes === NoLanes) {
+        const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);
+        workInProgress.memoizedState = updateQueue.baseState = derivedState;
+      }
+
+      pushCacheProvider(workInProgress, parentCache);
+      // No need to propagate a context change because the refreshed parent
+      // already did.
+    } else {
+      // The parent didn't refresh. Now check if this cache did.
+      const nextCache = nextState.cache;
+      pushCacheProvider(workInProgress, nextCache);
+      if (nextCache !== prevState.cache) {
+        // This cache refreshed. Propagate a context change.
+        propagateContextChange(workInProgress, CacheContext, renderLanes);
+      }
+    }
+  }
+
+  const nextProps: CacheProps = workInProgress.pendingProps;
+
+  const nextChildren = nextProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+// This should only be called if the name changes
+function updateTracingMarkerComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  if (!enableTransitionTracing) {
+    return null;
+  }
+
+  const nextProps: TracingMarkerProps = workInProgress.pendingProps;
+
+  // TODO: (luna) Only update the tracing marker if it's newly rendered or it's name changed.
+  // A tracing marker is only associated with the transitions that rendered
+  // or updated it, so we can create a new set of transitions each time
+  if (current === null) {
+    const currentTransitions = getPendingTransitions();
+    if (currentTransitions !== null) {
+      const markerInstance: TracingMarkerInstance = {
+        tag: TransitionTracingMarker,
+        transitions: new Set(currentTransitions),
+        pendingBoundaries: null,
+        name: nextProps.name,
+        aborts: null,
+      };
+      workInProgress.stateNode = markerInstance;
+
+      // We call the marker complete callback when all child suspense boundaries resolve.
+      // We do this in the commit phase on Offscreen. If the marker has no child suspense
+      // boundaries, we need to schedule a passive effect to make sure we call the marker
+      // complete callback.
+      workInProgress.flags |= Passive;
+    }
+  } else {
+    if (__DEV__) {
+      if (current.memoizedProps.name !== nextProps.name) {
+        console.error(
+          'Changing the name of a tracing marker after mount is not supported. ' +
+            'To remount the tracing marker, pass it a new key.',
+        );
+      }
+    }
+  }
+
+  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+  if (instance !== null) {
+    pushMarkerInstance(workInProgress, instance);
+  }
+  const nextChildren = nextProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateFragment(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextChildren = workInProgress.pendingProps;
+  if (enableFragmentRefs) {
+    markRef(current, workInProgress);
+  }
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateMode(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateProfiler(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  if (enableProfilerTimer) {
+    workInProgress.flags |= Update;
+
+    if (enableProfilerCommitHooks) {
+      // Schedule a passive effect for this Profiler to call onPostCommit hooks.
+      // This effect should be scheduled even if there is no onPostCommit callback for this Profiler,
+      // because the effect is also where times bubble to parent Profilers.
+      workInProgress.flags |= Passive;
+      // Reset effect durations for the next eventual effect phase.
+      // These are reset during render to allow the DevTools commit hook a chance to read them,
+      const stateNode = workInProgress.stateNode;
+      stateNode.effectDuration = -0;
+      stateNode.passiveEffectDuration = -0;
+    }
+  }
+  const nextProps: ProfilerProps = workInProgress.pendingProps;
+  const nextChildren = nextProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function markRef(current: Fiber | null, workInProgress: Fiber) {
+  // TODO: Check props.ref instead of fiber.ref when enableRefAsProp is on.
+  const ref = workInProgress.ref;
+  if (ref === null) {
+    if (current !== null && current.ref !== null) {
+      // Schedule a Ref effect
+      workInProgress.flags |= Ref | RefStatic;
+    }
+  } else {
+    if (typeof ref !== 'function' && typeof ref !== 'object') {
+      throw new Error(
+        'Expected ref to be a function, an object returned by React.createRef(), or undefined/null.',
+      );
+    }
+    if (current === null || current.ref !== ref) {
+      // Schedule a Ref effect
+      workInProgress.flags |= Ref | RefStatic;
+    }
+  }
+}
+
+function mountIncompleteFunctionComponent(
+  _current: null | Fiber,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+) {
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
+
+  workInProgress.tag = FunctionComponent;
+
+  return updateFunctionComponent(
+    null,
+    workInProgress,
+    Component,
+    nextProps,
+    renderLanes,
+  );
+}
+
+function updateFunctionComponent(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+) {
+  if (__DEV__) {
+    if (
+      Component.prototype &&
+      typeof Component.prototype.render === 'function'
+    ) {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+
+      if (!didWarnAboutBadClass[componentName]) {
+        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,
+          componentName,
+        );
+        didWarnAboutBadClass[componentName] = true;
+      }
+    }
+
+    if (workInProgress.mode & StrictLegacyMode) {
+      ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
+    }
+
+    if (current === null) {
+      // Some validations were previously done in mountIndeterminateComponent however and are now run
+      // in updateFuntionComponent but only on mount
+      validateFunctionComponentInDev(workInProgress, workInProgress.type);
+
+      if (Component.contextTypes) {
+        const componentName = getComponentNameFromType(Component) || 'Unknown';
+
+        if (!didWarnAboutContextTypes[componentName]) {
+          didWarnAboutContextTypes[componentName] = true;
+          if (disableLegacyContext) {
+            console.error(
+              '%s uses the legacy contextTypes API which was removed in React 19. ' +
+                'Use React.createContext() with React.useContext() instead. ' +
+                '(https://react.dev/link/legacy-context)',
+              componentName,
+            );
+          } else {
+            console.error(
+              '%s uses the legacy contextTypes API which will be removed soon. ' +
+                'Use React.createContext() with React.useContext() instead. ' +
+                '(https://react.dev/link/legacy-context)',
+              componentName,
+            );
+          }
+        }
+      }
+    }
+  }
+
+  let context;
+  if (!disableLegacyContext && !disableLegacyContextForFunctionComponents) {
+    const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
+    context = getMaskedContext(workInProgress, unmaskedContext);
+  }
+
+  let nextChildren;
+  let hasId;
+  prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
+  if (__DEV__) {
+    nextChildren = renderWithHooks(
+      current,
+      workInProgress,
+      Component,
+      nextProps,
+      context,
+      renderLanes,
+    );
+    hasId = checkDidRenderIdHook();
+  } else {
+    nextChildren = renderWithHooks(
+      current,
+      workInProgress,
+      Component,
+      nextProps,
+      context,
+      renderLanes,
+    );
+    hasId = checkDidRenderIdHook();
+  }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
+
+  if (current !== null && !didReceiveUpdate) {
+    bailoutHooks(current, workInProgress, renderLanes);
+    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+  }
+
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
+  // React DevTools reads this flag.
+  workInProgress.flags |= PerformedWork;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+export function replayFunctionComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextProps: any,
+  Component: any,
+  secondArg: any,
+  renderLanes: Lanes,
+): Fiber | null {
+  // This function is used to replay a component that previously suspended,
+  // after its data resolves. It's a simplified version of
+  // updateFunctionComponent that reuses the hooks from the previous attempt.
+
+  prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
+  const nextChildren = replaySuspendedComponentWithHooks(
+    current,
+    workInProgress,
+    Component,
+    nextProps,
+    secondArg,
+  );
+  const hasId = checkDidRenderIdHook();
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
+
+  if (current !== null && !didReceiveUpdate) {
+    bailoutHooks(current, workInProgress, renderLanes);
+    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+  }
+
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
+  // React DevTools reads this flag.
+  workInProgress.flags |= PerformedWork;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateClassComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+) {
+  if (__DEV__) {
+    // This is used by DevTools to force a boundary to error.
+    switch (shouldError(workInProgress)) {
+      case false: {
+        const instance = workInProgress.stateNode;
+        const ctor = workInProgress.type;
+        // TODO This way of resetting the error boundary state is a hack.
+        // Is there a better way to do this?
+        const tempInstance = new ctor(
+          workInProgress.memoizedProps,
+          instance.context,
+        );
+        const state = tempInstance.state;
+        instance.updater.enqueueSetState(instance, state, null);
+        break;
+      }
+      case true: {
+        workInProgress.flags |= DidCapture;
+        workInProgress.flags |= ShouldCapture;
+        // eslint-disable-next-line react-internal/prod-error-codes
+        const error = new Error('Simulated error coming from DevTools');
+        const lane = pickArbitraryLane(renderLanes);
+        workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
+        // Schedule the error boundary to re-render using updated state
+        const root: FiberRoot | null = getWorkInProgressRoot();
+        if (root === null) {
+          throw new Error(
+            'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+          );
+        }
+        const update = createClassErrorUpdate(lane);
+        initializeClassErrorUpdate(
+          update,
+          root,
+          workInProgress,
+          createCapturedValueAtFiber(error, workInProgress),
+        );
+        enqueueCapturedUpdate(workInProgress, update);
+        break;
+      }
+    }
+  }
+
+  // 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.
+  // We will invalidate the child context in finishClassComponent() right after rendering.
+  let hasContext;
+  if (isLegacyContextProvider(Component)) {
+    hasContext = true;
+    pushLegacyContextProvider(workInProgress);
+  } else {
+    hasContext = false;
+  }
+  prepareToReadContext(workInProgress, renderLanes);
+
+  const instance = workInProgress.stateNode;
+  let shouldUpdate;
+  if (instance === null) {
+    resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress);
+
+    // In the initial pass we might need to construct the instance.
+    constructClassInstance(workInProgress, Component, nextProps);
+    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
+    shouldUpdate = true;
+  } else if (current === null) {
+    // In a resume, we'll already have an instance we can reuse.
+    shouldUpdate = resumeMountClassInstance(
+      workInProgress,
+      Component,
+      nextProps,
+      renderLanes,
+    );
+  } else {
+    shouldUpdate = updateClassInstance(
+      current,
+      workInProgress,
+      Component,
+      nextProps,
+      renderLanes,
+    );
+  }
+  const nextUnitOfWork = finishClassComponent(
+    current,
+    workInProgress,
+    Component,
+    shouldUpdate,
+    hasContext,
+    renderLanes,
+  );
+  if (__DEV__) {
+    const inst = workInProgress.stateNode;
+    if (shouldUpdate && inst.props !== nextProps) {
+      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.',
+          getComponentNameFromFiber(workInProgress) || 'a component',
+        );
+      }
+      didWarnAboutReassigningProps = true;
+    }
+  }
+  return nextUnitOfWork;
+}
+
+function finishClassComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: any,
+  shouldUpdate: boolean,
+  hasContext: boolean,
+  renderLanes: Lanes,
+) {
+  // Refs should update even if shouldComponentUpdate returns false
+  markRef(current, workInProgress);
+
+  const didCaptureError = (workInProgress.flags & DidCapture) !== NoFlags;
+
+  if (!shouldUpdate && !didCaptureError) {
+    // Context providers should defer to sCU for rendering
+    if (hasContext) {
+      invalidateContextProvider(workInProgress, Component, false);
+    }
+
+    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+  }
+
+  const instance = workInProgress.stateNode;
+
+  // Rerender
+  if (__DEV__) {
+    setCurrentFiber(workInProgress);
+  }
+  let nextChildren;
+  if (
+    didCaptureError &&
+    typeof Component.getDerivedStateFromError !== 'function'
+  ) {
+    // 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.
+    // TODO: Warn in a future release.
+    nextChildren = null;
+
+    if (enableProfilerTimer) {
+      stopProfilerTimerIfRunning(workInProgress);
+    }
+  } else {
+    if (enableSchedulingProfiler) {
+      markComponentRenderStarted(workInProgress);
+    }
+    if (__DEV__) {
+      nextChildren = callRenderInDEV(instance);
+      if (workInProgress.mode & StrictLegacyMode) {
+        setIsStrictModeForDevtools(true);
+        try {
+          callRenderInDEV(instance);
+        } finally {
+          setIsStrictModeForDevtools(false);
+        }
+      }
+    } else {
+      nextChildren = instance.render();
+    }
+    if (enableSchedulingProfiler) {
+      markComponentRenderStopped();
+    }
+  }
+
+  // React DevTools reads this flag.
+  workInProgress.flags |= PerformedWork;
+  if (current !== null && didCaptureError) {
+    // If we're recovering from an error, reconcile without reusing any of
+    // the existing children. Conceptually, the normal children and the children
+    // that are shown on error are two different sets, so we shouldn't reuse
+    // normal children even if their identities match.
+    forceUnmountCurrentAndReconcile(
+      current,
+      workInProgress,
+      nextChildren,
+      renderLanes,
+    );
+  } else {
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  }
+
+  // Memoize state using the values we just used to render.
+  // TODO: Restructure so we never read values from the instance.
+  workInProgress.memoizedState = instance.state;
+
+  // The context might have changed so we need to recalculate it.
+  if (hasContext) {
+    invalidateContextProvider(workInProgress, Component, true);
+  }
+
+  return workInProgress.child;
+}
+
+function pushHostRootContext(workInProgress: Fiber) {
+  const root = (workInProgress.stateNode: FiberRoot);
+  if (root.pendingContext) {
+    pushTopLevelContextObject(
+      workInProgress,
+      root.pendingContext,
+      root.pendingContext !== root.context,
+    );
+  } else if (root.context) {
+    // Should always be set
+    pushTopLevelContextObject(workInProgress, root.context, false);
+  }
+  pushHostContainer(workInProgress, root.containerInfo);
+}
+
+function updateHostRoot(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  pushHostRootContext(workInProgress);
+
+  if (current === null) {
+    throw new Error('Should have a current fiber. This is a bug in React.');
+  }
+
+  const nextProps = workInProgress.pendingProps;
+  const prevState: RootState = workInProgress.memoizedState;
+  const prevChildren = prevState.element;
+  cloneUpdateQueue(current, workInProgress);
+  processUpdateQueue(workInProgress, nextProps, null, renderLanes);
+
+  const nextState: RootState = workInProgress.memoizedState;
+  const root: FiberRoot = workInProgress.stateNode;
+  pushRootTransition(workInProgress, root, renderLanes);
+
+  if (enableTransitionTracing) {
+    pushRootMarkerInstance(workInProgress);
+  }
+
+  const nextCache: Cache = nextState.cache;
+  pushCacheProvider(workInProgress, nextCache);
+  if (nextCache !== prevState.cache) {
+    // The root cache refreshed.
+    propagateContextChange(workInProgress, CacheContext, renderLanes);
+  }
+
+  // This would ideally go inside processUpdateQueue, but because it suspends,
+  // it needs to happen after the `pushCacheProvider` call above to avoid a
+  // context stack mismatch. A bit unfortunate.
+  suspendIfUpdateReadFromEntangledAsyncAction();
+
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  const nextChildren = nextState.element;
+  if (supportsHydration && prevState.isDehydrated) {
+    // This is a hydration root whose shell has not yet hydrated. We should
+    // attempt to hydrate.
+
+    // Flip isDehydrated to false to indicate that when this render
+    // finishes, the root will no longer be dehydrated.
+    const overrideState: RootState = {
+      element: nextChildren,
+      isDehydrated: false,
+      cache: nextState.cache,
+    };
+    const updateQueue: UpdateQueue<RootState> =
+      (workInProgress.updateQueue: any);
+    // `baseState` can always be the last state because the root doesn't
+    // have reducer functions so it doesn't need rebasing.
+    updateQueue.baseState = overrideState;
+    workInProgress.memoizedState = overrideState;
+
+    if (workInProgress.flags & ForceClientRender) {
+      // Something errored during a previous attempt to hydrate the shell, so we
+      // forced a client render. We should have a recoverable error already scheduled.
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        nextChildren,
+        renderLanes,
+      );
+    } else if (nextChildren !== prevChildren) {
+      const recoverableError = createCapturedValueAtFiber<mixed>(
+        new Error(
+          'This root received an early update, before anything was able ' +
+            'hydrate. Switched the entire root to client rendering.',
+        ),
+        workInProgress,
+      );
+      queueHydrationError(recoverableError);
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        nextChildren,
+        renderLanes,
+      );
+    } else {
+      // The outermost shell has not hydrated yet. Start hydrating.
+      enterHydrationState(workInProgress);
+
+      const child = mountChildFibers(
+        workInProgress,
+        null,
+        nextChildren,
+        renderLanes,
+      );
+      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.flags = (node.flags & ~Placement) | Hydrating;
+        node = node.sibling;
+      }
+    }
+  } else {
+    // Root is not dehydrated. Either this is a client-only root, or it
+    // already hydrated.
+    resetHydrationState();
+    if (nextChildren === prevChildren) {
+      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+    }
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  }
+  return workInProgress.child;
+}
+
+function mountHostRootWithoutHydrating(
+  current: Fiber,
+  workInProgress: Fiber,
+  nextChildren: ReactNodeList,
+  renderLanes: Lanes,
+) {
+  // Revert to client rendering.
+  resetHydrationState();
+
+  workInProgress.flags |= ForceClientRender;
+
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateHostComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  if (current === null) {
+    tryToClaimNextHydratableInstance(workInProgress);
+  }
+
+  pushHostContext(workInProgress);
+
+  const type = workInProgress.type;
+  const nextProps = workInProgress.pendingProps;
+  const prevProps = current !== null ? current.memoizedProps : null;
+
+  let nextChildren = nextProps.children;
+  const isDirectTextChild = shouldSetTextContent(type, nextProps);
+
+  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 has access to this prop. That
+    // avoids allocating another HostText fiber and traversing it.
+    nextChildren = null;
+  } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
+    // If we're switching from a direct text child to a normal child, or to
+    // empty, we need to schedule the text content to be reset.
+    workInProgress.flags |= ContentReset;
+  }
+
+  const memoizedState = workInProgress.memoizedState;
+  if (memoizedState !== null) {
+    // This fiber has been upgraded to a stateful component. The only way
+    // happens currently is for form actions. We use hooks to track the
+    // pending and error state of the form.
+    //
+    // Once a fiber is upgraded to be stateful, it remains stateful for the
+    // rest of its lifetime.
+    const newState = renderTransitionAwareHostComponentWithHooks(
+      current,
+      workInProgress,
+      renderLanes,
+    );
+
+    // If the transition state changed, propagate the change to all the
+    // descendents. We use Context as an implementation detail for this.
+    //
+    // We need to update it here because
+    // pushHostContext gets called before we process the state hook, to avoid
+    // a state mismatch in the event that something suspends.
+    //
+    // NOTE: This assumes that there cannot be nested transition providers,
+    // because the only renderer that implements this feature is React DOM,
+    // and forms cannot be nested. If we did support nested providers, then
+    // we would need to push a context value even for host fibers that
+    // haven't been upgraded yet.
+    if (isPrimaryRenderer) {
+      HostTransitionContext._currentValue = newState;
+    } else {
+      HostTransitionContext._currentValue2 = newState;
+    }
+  }
+
+  markRef(current, workInProgress);
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateHostHoistable(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  markRef(current, workInProgress);
+
+  if (current === null) {
+    const resource = getResource(
+      workInProgress.type,
+      null,
+      workInProgress.pendingProps,
+      null,
+    );
+    if (resource) {
+      workInProgress.memoizedState = resource;
+    } else {
+      if (!getIsHydrating()) {
+        // This is not a Resource Hoistable and we aren't hydrating so we construct the instance.
+        workInProgress.stateNode = createHoistableInstance(
+          workInProgress.type,
+          workInProgress.pendingProps,
+          getRootHostContainer(),
+          workInProgress,
+        );
+      }
+    }
+  } else {
+    // Get Resource may or may not return a resource. either way we stash the result
+    // on memoized state.
+    workInProgress.memoizedState = getResource(
+      workInProgress.type,
+      current.memoizedProps,
+      workInProgress.pendingProps,
+      current.memoizedState,
+    );
+  }
+
+  // Resources never have reconciler managed children. It is possible for
+  // the host implementation of getResource to consider children in the
+  // resource construction but they will otherwise be discarded. In practice
+  // this precludes all but the simplest children and Host specific warnings
+  // should be implemented to warn when children are passsed when otherwise not
+  // expected
+  return null;
+}
+
+function updateHostSingleton(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  pushHostContext(workInProgress);
+
+  if (current === null) {
+    claimHydratableSingleton(workInProgress);
+  }
+
+  const nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  markRef(current, workInProgress);
+  if (current === null) {
+    // We mark Singletons with a static flag to more efficiently manage their
+    // ownership of the singleton host instance when in offscreen trees including Suspense
+    workInProgress.flags |= LayoutStatic;
+  }
+  return workInProgress.child;
+}
+
+function updateHostText(current: null | Fiber, workInProgress: Fiber) {
+  if (current === null) {
+    tryToClaimNextHydratableTextInstance(workInProgress);
+  }
+  // Nothing to do here. This is terminal. We'll do the completion step
+  // immediately after.
+  return null;
+}
+
+function mountLazyComponent(
+  _current: null | Fiber,
+  workInProgress: Fiber,
+  elementType: any,
+  renderLanes: Lanes,
+) {
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
+
+  const props = workInProgress.pendingProps;
+  const lazyComponent: LazyComponentType<any, any> = elementType;
+  let Component = resolveLazy(lazyComponent);
+  // Store the unwrapped component in the type.
+  workInProgress.type = Component;
+
+  if (typeof Component === 'function') {
+    if (isFunctionClassComponent(Component)) {
+      const resolvedProps = resolveClassComponentProps(Component, props);
+      workInProgress.tag = ClassComponent;
+      if (__DEV__) {
+        workInProgress.type = Component =
+          resolveClassForHotReloading(Component);
+      }
+      return updateClassComponent(
+        null,
+        workInProgress,
+        Component,
+        resolvedProps,
+        renderLanes,
+      );
+    } else {
+      workInProgress.tag = FunctionComponent;
+      if (__DEV__) {
+        validateFunctionComponentInDev(workInProgress, Component);
+        workInProgress.type = Component =
+          resolveFunctionForHotReloading(Component);
+      }
+      return updateFunctionComponent(
+        null,
+        workInProgress,
+        Component,
+        props,
+        renderLanes,
+      );
+    }
+  } else if (Component !== undefined && Component !== null) {
+    const $$typeof = Component.$$typeof;
+    if ($$typeof === REACT_FORWARD_REF_TYPE) {
+      workInProgress.tag = ForwardRef;
+      if (__DEV__) {
+        workInProgress.type = Component =
+          resolveForwardRefForHotReloading(Component);
+      }
+      return updateForwardRef(
+        null,
+        workInProgress,
+        Component,
+        props,
+        renderLanes,
+      );
+    } else if ($$typeof === REACT_MEMO_TYPE) {
+      workInProgress.tag = MemoComponent;
+      return updateMemoComponent(
+        null,
+        workInProgress,
+        Component,
+        props,
+        renderLanes,
+      );
+    }
+  }
+
+  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?';
+    }
+  }
+
+  const loggedComponent = getComponentNameFromType(Component) || Component;
+
+  // This message intentionally doesn't mention ForwardRef or MemoComponent
+  // because the fact that it's a separate type of work is an
+  // implementation detail.
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${loggedComponent}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
+  );
+}
+
+function mountIncompleteClassComponent(
+  _current: null | Fiber,
+  workInProgress: Fiber,
+  Component: any,
+  nextProps: any,
+  renderLanes: Lanes,
+) {
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
+
+  // Promote the fiber to a class and try rendering again.
+  workInProgress.tag = ClassComponent;
+
+  // The rest of this function is a fork of `updateClassComponent`
+
+  // 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.
+  // We will invalidate the child context in finishClassComponent() right after rendering.
+  let hasContext;
+  if (isLegacyContextProvider(Component)) {
+    hasContext = true;
+    pushLegacyContextProvider(workInProgress);
+  } else {
+    hasContext = false;
+  }
+  prepareToReadContext(workInProgress, renderLanes);
+
+  constructClassInstance(workInProgress, Component, nextProps);
+  mountClassInstance(workInProgress, Component, nextProps, renderLanes);
+
+  return finishClassComponent(
+    null,
+    workInProgress,
+    Component,
+    true,
+    hasContext,
+    renderLanes,
+  );
+}
+
+function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
+  if (__DEV__) {
+    if (Component && Component.childContextTypes) {
+      console.error(
+        'childContextTypes cannot be defined on a function component.\n' +
+          '  %s.childContextTypes = ...',
+        Component.displayName || Component.name || 'Component',
+      );
+    }
+
+    if (typeof Component.getDerivedStateFromProps === 'function') {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+
+      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 = getComponentNameFromType(Component) || 'Unknown';
+
+      if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
+        console.error(
+          '%s: Function components do not support contextType.',
+          componentName,
+        );
+        didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
+      }
+    }
+  }
+}
+
+const SUSPENDED_MARKER: SuspenseState = {
+  dehydrated: null,
+  treeContext: null,
+  retryLane: NoLane,
+  hydrationErrors: null,
+};
+
+function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
+  return {
+    baseLanes: renderLanes,
+    cachePool: getSuspendedCache(),
+  };
+}
+
+function updateSuspenseOffscreenState(
+  prevOffscreenState: OffscreenState,
+  renderLanes: Lanes,
+): OffscreenState {
+  let cachePool: SpawnedCachePool | null = null;
+  const prevCachePool: SpawnedCachePool | null = prevOffscreenState.cachePool;
+  if (prevCachePool !== null) {
+    const parentCache = isPrimaryRenderer
+      ? CacheContext._currentValue
+      : CacheContext._currentValue2;
+    if (prevCachePool.parent !== parentCache) {
+      // Detected a refresh in the parent. This overrides any previously
+      // suspended cache.
+      cachePool = {
+        parent: parentCache,
+        pool: parentCache,
+      };
+    } else {
+      // We can reuse the cache from last time. The only thing that would have
+      // overridden it is a parent refresh, which we checked for above.
+      cachePool = prevCachePool;
+    }
+  } else {
+    // If there's no previous cache pool, grab the current one.
+    cachePool = getSuspendedCache();
+  }
+  return {
+    baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
+    cachePool,
+  };
+}
+
+// TODO: Probably should inline this back
+function shouldRemainOnFallback(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  // If we're already showing a fallback, there are cases where we need to
+  // remain on that fallback regardless of whether the content has resolved.
+  // For example, SuspenseList coordinates when nested content appears.
+  // TODO: For compatibility with offscreen prerendering, this should also check
+  // whether the current fiber (if it exists) was visible in the previous tree.
+  if (current !== null) {
+    const suspenseState: SuspenseState = current.memoizedState;
+    if (suspenseState === null) {
+      // Currently showing content. Don't hide it, even if ForceSuspenseFallback
+      // is true. More precise name might be "ForceRemainSuspenseFallback".
+      // Note: This is a factoring smell. Can't remain on a fallback if there's
+      // no fallback to remain on.
+      return false;
+    }
+  }
+
+  // Not currently showing content. Consult the Suspense context.
+  const suspenseContext: SuspenseContext = suspenseStackCursor.current;
+  return hasSuspenseListContext(
+    suspenseContext,
+    (ForceSuspenseFallback: SuspenseContext),
+  );
+}
+
+function getRemainingWorkInPrimaryTree(
+  current: Fiber | null,
+  primaryTreeDidDefer: boolean,
+  renderLanes: Lanes,
+) {
+  let remainingLanes =
+    current !== null ? removeLanes(current.childLanes, renderLanes) : NoLanes;
+  if (primaryTreeDidDefer) {
+    // A useDeferredValue hook spawned a deferred task inside the primary tree.
+    // Ensure that we retry this component at the deferred priority.
+    // TODO: We could make this a per-subtree value instead of a global one.
+    // Would need to track it on the context stack somehow, similar to what
+    // we'd have to do for resumable contexts.
+    remainingLanes = mergeLanes(remainingLanes, peekDeferredLane());
+  }
+  return remainingLanes;
+}
+
+function updateSuspenseComponent(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextProps: SuspenseProps = workInProgress.pendingProps;
+
+  // This is used by DevTools to force a boundary to suspend.
+  if (__DEV__) {
+    if (shouldSuspend(workInProgress)) {
+      workInProgress.flags |= DidCapture;
+    }
+  }
+
+  let showFallback = false;
+  const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
+  if (
+    didSuspend ||
+    shouldRemainOnFallback(current, workInProgress, renderLanes)
+  ) {
+    // Something in this boundary's subtree already suspended. Switch to
+    // rendering the fallback children.
+    showFallback = true;
+    workInProgress.flags &= ~DidCapture;
+  }
+
+  // Check if the primary children spawned a deferred task (useDeferredValue)
+  // during the first pass.
+  const didPrimaryChildrenDefer = (workInProgress.flags & DidDefer) !== NoFlags;
+  workInProgress.flags &= ~DidDefer;
+
+  // OK, the next part is confusing. We're about to reconcile the Suspense
+  // boundary's children. This involves some custom reconciliation logic. Two
+  // main reasons this is so complicated.
+  //
+  // First, Legacy Mode has different semantics for backwards compatibility. The
+  // primary tree will commit in an inconsistent state, so when we do the
+  // second pass to render the fallback, we do some exceedingly, uh, clever
+  // hacks to make that not totally break. Like transferring effects and
+  // deletions from hidden tree. In Concurrent Mode, it's much simpler,
+  // because we bailout on the primary tree completely and leave it in its old
+  // state, no effects. Same as what we do for Offscreen (except that
+  // Offscreen doesn't have the first render pass).
+  //
+  // Second is hydration. During hydration, the Suspense fiber has a slightly
+  // different layout, where the child points to a dehydrated fragment, which
+  // contains the DOM rendered by the server.
+  //
+  // Third, even if you set all that aside, Suspense is like error boundaries in
+  // that we first we try to render one tree, and if that fails, we render again
+  // and switch to a different tree. Like a try/catch block. So we have to track
+  // which branch we're currently rendering. Ideally we would model this using
+  // a stack.
+  if (current === null) {
+    // Initial mount
+
+    // Special path for hydration
+    // If we're currently hydrating, try to hydrate this boundary.
+    if (getIsHydrating()) {
+      // We must push the suspense handler context *before* attempting to
+      // hydrate, to avoid a mismatch in case it errors.
+      if (showFallback) {
+        pushPrimaryTreeSuspenseHandler(workInProgress);
+      } else {
+        pushFallbackTreeSuspenseHandler(workInProgress);
+      }
+      // This throws if we fail to hydrate.
+      const dehydrated: SuspenseInstance =
+        claimNextHydratableSuspenseInstance(workInProgress);
+      return mountDehydratedSuspenseComponent(
+        workInProgress,
+        dehydrated,
+        renderLanes,
+      );
+    }
+
+    const nextPrimaryChildren = nextProps.children;
+    const nextFallbackChildren = nextProps.fallback;
+
+    if (showFallback) {
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
+      mountSuspenseFallbackChildren(
+        workInProgress,
+        nextPrimaryChildren,
+        nextFallbackChildren,
+        renderLanes,
+      );
+      const primaryChildFragment: Fiber = (workInProgress.child: any);
+      primaryChildFragment.memoizedState =
+        mountSuspenseOffscreenState(renderLanes);
+      primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
+        current,
+        didPrimaryChildrenDefer,
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      if (enableTransitionTracing) {
+        const currentTransitions = getPendingTransitions();
+        if (currentTransitions !== null) {
+          const parentMarkerInstances = getMarkerInstances();
+          const offscreenQueue: OffscreenQueue | null =
+            (primaryChildFragment.updateQueue: any);
+          if (offscreenQueue === null) {
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              retryQueue: null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else {
+            offscreenQueue.transitions = currentTransitions;
+            offscreenQueue.markerInstances = parentMarkerInstances;
+          }
+        }
+      }
+
+      return bailoutOffscreenComponent(null, primaryChildFragment);
+    } else if (enableCPUSuspense && nextProps.defer === true) {
+      // This is a CPU-bound tree. Skip this tree and show a placeholder to
+      // unblock the surrounding content. Then immediately retry after the
+      // initial commit.
+      pushFallbackTreeSuspenseHandler(workInProgress);
+      mountSuspenseFallbackChildren(
+        workInProgress,
+        nextPrimaryChildren,
+        nextFallbackChildren,
+        renderLanes,
+      );
+      const primaryChildFragment: Fiber = (workInProgress.child: any);
+      primaryChildFragment.memoizedState =
+        mountSuspenseOffscreenState(renderLanes);
+      primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
+        current,
+        didPrimaryChildrenDefer,
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+
+      // TODO: Transition Tracing is not yet implemented for CPU Suspense.
+
+      // Since nothing actually suspended, there will nothing to ping this to
+      // get it started back up to attempt the next item. While in terms of
+      // priority this work has the same priority as this current render, it's
+      // not part of the same transition once the transition has committed. If
+      // it's sync, we still want to yield so that it can be painted.
+      // Conceptually, this is really the same as pinging. We can use any
+      // RetryLane even if it's the one currently rendering since we're leaving
+      // it behind on this node.
+      workInProgress.lanes = SomeRetryLane;
+      return bailoutOffscreenComponent(null, primaryChildFragment);
+    } else {
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+      return mountSuspensePrimaryChildren(
+        workInProgress,
+        nextPrimaryChildren,
+        renderLanes,
+      );
+    }
+  } else {
+    // This is an update.
+
+    // Special path for hydration
+    const prevState: null | SuspenseState = current.memoizedState;
+    if (prevState !== null) {
+      const dehydrated = prevState.dehydrated;
+      if (dehydrated !== null) {
+        return updateDehydratedSuspenseComponent(
+          current,
+          workInProgress,
+          didSuspend,
+          didPrimaryChildrenDefer,
+          nextProps,
+          dehydrated,
+          prevState,
+          renderLanes,
+        );
+      }
+    }
+
+    if (showFallback) {
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
+      const nextFallbackChildren = nextProps.fallback;
+      const nextPrimaryChildren = nextProps.children;
+      updateSuspenseFallbackChildren(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        nextFallbackChildren,
+        renderLanes,
+      );
+      const primaryChildFragment: Fiber = (workInProgress.child: any);
+      const prevOffscreenState: OffscreenState | null = (current.child: any)
+        .memoizedState;
+      primaryChildFragment.memoizedState =
+        prevOffscreenState === null
+          ? mountSuspenseOffscreenState(renderLanes)
+          : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+      if (enableTransitionTracing) {
+        const currentTransitions = getPendingTransitions();
+        if (currentTransitions !== null) {
+          const parentMarkerInstances = getMarkerInstances();
+          const offscreenQueue: OffscreenQueue | null =
+            (primaryChildFragment.updateQueue: any);
+          const currentOffscreenQueue: OffscreenQueue | null =
+            (current.updateQueue: any);
+          if (offscreenQueue === null) {
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              retryQueue: null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else if (offscreenQueue === currentOffscreenQueue) {
+            // If the work-in-progress queue is the same object as current, we
+            // can't modify it without cloning it first.
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              retryQueue:
+                currentOffscreenQueue !== null
+                  ? currentOffscreenQueue.retryQueue
+                  : null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else {
+            offscreenQueue.transitions = currentTransitions;
+            offscreenQueue.markerInstances = parentMarkerInstances;
+          }
+        }
+      }
+      primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
+        current,
+        didPrimaryChildrenDefer,
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      return bailoutOffscreenComponent(current.child, primaryChildFragment);
+    } else {
+      if (
+        prevState !== null &&
+        includesOnlyRetries(renderLanes) &&
+        includesSomeLane(renderLanes, current.lanes)
+      ) {
+        // If we're rendering Retry lanes and we're entering the primary content then it's possible
+        // that the only reason we rendered was because we left this boundary to be warmed up but
+        // nothing else scheduled an update. If so, use it as the cause of the render.
+        markRenderDerivedCause(workInProgress);
+      }
+
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+
+      const nextPrimaryChildren = nextProps.children;
+      const primaryChildFragment = updateSuspensePrimaryChildren(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        renderLanes,
+      );
+      workInProgress.memoizedState = null;
+      return primaryChildFragment;
+    }
+  }
+}
+
+function mountSuspensePrimaryChildren(
+  workInProgress: Fiber,
+  primaryChildren: $FlowFixMe,
+  renderLanes: Lanes,
+) {
+  const mode = workInProgress.mode;
+  const primaryChildProps: OffscreenProps = {
+    mode: 'visible',
+    children: primaryChildren,
+  };
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
+    primaryChildProps,
+    mode,
+    renderLanes,
+  );
+  primaryChildFragment.return = workInProgress;
+  workInProgress.child = primaryChildFragment;
+  return primaryChildFragment;
+}
+
+function mountSuspenseFallbackChildren(
+  workInProgress: Fiber,
+  primaryChildren: $FlowFixMe,
+  fallbackChildren: $FlowFixMe,
+  renderLanes: Lanes,
+) {
+  const mode = workInProgress.mode;
+  const progressedPrimaryFragment: Fiber | null = workInProgress.child;
+
+  const primaryChildProps: OffscreenProps = {
+    mode: 'hidden',
+    children: primaryChildren,
+  };
+
+  let primaryChildFragment;
+  let fallbackChildFragment;
+  if (
+    !disableLegacyMode &&
+    (mode & ConcurrentMode) === NoMode &&
+    progressedPrimaryFragment !== null
+  ) {
+    // In legacy mode, we commit the primary tree as if it successfully
+    // completed, even though it's in an inconsistent state.
+    primaryChildFragment = progressedPrimaryFragment;
+    primaryChildFragment.childLanes = NoLanes;
+    primaryChildFragment.pendingProps = primaryChildProps;
+
+    if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
+      // Reset the durations from the first pass so they aren't included in the
+      // final amounts. This seems counterintuitive, since we're intentionally
+      // not measuring part of the render phase, but this makes it match what we
+      // do in Concurrent Mode.
+      primaryChildFragment.actualDuration = -0;
+      primaryChildFragment.actualStartTime = -1.1;
+      primaryChildFragment.selfBaseDuration = -0;
+      primaryChildFragment.treeBaseDuration = -0;
+    }
+
+    fallbackChildFragment = createFiberFromFragment(
+      fallbackChildren,
+      mode,
+      renderLanes,
+      null,
+    );
+  } else {
+    primaryChildFragment = mountWorkInProgressOffscreenFiber(
+      primaryChildProps,
+      mode,
+      NoLanes,
+    );
+    fallbackChildFragment = createFiberFromFragment(
+      fallbackChildren,
+      mode,
+      renderLanes,
+      null,
+    );
+  }
+
+  primaryChildFragment.return = workInProgress;
+  fallbackChildFragment.return = workInProgress;
+  primaryChildFragment.sibling = fallbackChildFragment;
+  workInProgress.child = primaryChildFragment;
+  return fallbackChildFragment;
+}
+
+function mountWorkInProgressOffscreenFiber(
+  offscreenProps: OffscreenProps,
+  mode: TypeOfMode,
+  renderLanes: Lanes,
+) {
+  // The props argument to `createFiberFromOffscreen` is `any` typed, so we use
+  // this wrapper function to constrain it.
+  return createFiberFromOffscreen(offscreenProps, mode, NoLanes, null);
+}
+
+function updateWorkInProgressOffscreenFiber(
+  current: Fiber,
+  offscreenProps: OffscreenProps,
+) {
+  // The props argument to `createWorkInProgress` is `any` typed, so we use this
+  // wrapper function to constrain it.
+  return createWorkInProgress(current, offscreenProps);
+}
+
+function updateSuspensePrimaryChildren(
+  current: Fiber,
+  workInProgress: Fiber,
+  primaryChildren: $FlowFixMe,
+  renderLanes: Lanes,
+) {
+  const currentPrimaryChildFragment: Fiber = (current.child: any);
+  const currentFallbackChildFragment: Fiber | null =
+    currentPrimaryChildFragment.sibling;
+
+  const primaryChildFragment = updateWorkInProgressOffscreenFiber(
+    currentPrimaryChildFragment,
+    {
+      mode: 'visible',
+      children: primaryChildren,
+    },
+  );
+  if (!disableLegacyMode && (workInProgress.mode & ConcurrentMode) === NoMode) {
+    primaryChildFragment.lanes = renderLanes;
+  }
+  primaryChildFragment.return = workInProgress;
+  primaryChildFragment.sibling = null;
+  if (currentFallbackChildFragment !== null) {
+    // Delete the fallback child fragment
+    const deletions = workInProgress.deletions;
+    if (deletions === null) {
+      workInProgress.deletions = [currentFallbackChildFragment];
+      workInProgress.flags |= ChildDeletion;
+    } else {
+      deletions.push(currentFallbackChildFragment);
+    }
+  }
+
+  workInProgress.child = primaryChildFragment;
+  return primaryChildFragment;
+}
+
+function updateSuspenseFallbackChildren(
+  current: Fiber,
+  workInProgress: Fiber,
+  primaryChildren: $FlowFixMe,
+  fallbackChildren: $FlowFixMe,
+  renderLanes: Lanes,
+) {
+  const mode = workInProgress.mode;
+  const currentPrimaryChildFragment: Fiber = (current.child: any);
+  const currentFallbackChildFragment: Fiber | null =
+    currentPrimaryChildFragment.sibling;
+
+  const primaryChildProps: OffscreenProps = {
+    mode: 'hidden',
+    children: primaryChildren,
+  };
+
+  let primaryChildFragment;
+  if (
+    // In legacy mode, we commit the primary tree as if it successfully
+    // completed, even though it's in an inconsistent state.
+    !disableLegacyMode &&
+    (mode & ConcurrentMode) === NoMode &&
+    // Make sure we're on the second pass, i.e. the primary child fragment was
+    // already cloned. In legacy mode, the only case where this isn't true is
+    // when DevTools forces us to display a fallback; we skip the first render
+    // pass entirely and go straight to rendering the fallback. (In Concurrent
+    // Mode, SuspenseList can also trigger this scenario, but this is a legacy-
+    // only codepath.)
+    workInProgress.child !== currentPrimaryChildFragment
+  ) {
+    const progressedPrimaryFragment: Fiber = (workInProgress.child: any);
+    primaryChildFragment = progressedPrimaryFragment;
+    primaryChildFragment.childLanes = NoLanes;
+    primaryChildFragment.pendingProps = primaryChildProps;
+
+    if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
+      // Reset the durations from the first pass so they aren't included in the
+      // final amounts. This seems counterintuitive, since we're intentionally
+      // not measuring part of the render phase, but this makes it match what we
+      // do in Concurrent Mode.
+      primaryChildFragment.actualDuration = -0;
+      primaryChildFragment.actualStartTime = -1.1;
+      primaryChildFragment.selfBaseDuration =
+        currentPrimaryChildFragment.selfBaseDuration;
+      primaryChildFragment.treeBaseDuration =
+        currentPrimaryChildFragment.treeBaseDuration;
+    }
+
+    // The fallback fiber was added as a deletion during the first pass.
+    // However, since we're going to remain on the fallback, we no longer want
+    // to delete it.
+    workInProgress.deletions = null;
+  } else {
+    primaryChildFragment = updateWorkInProgressOffscreenFiber(
+      currentPrimaryChildFragment,
+      primaryChildProps,
+    );
+    // Since we're reusing a current tree, we need to reuse the flags, too.
+    // (We don't do this in legacy mode, because in legacy mode we don't re-use
+    // the current tree; see previous branch.)
+    primaryChildFragment.subtreeFlags =
+      currentPrimaryChildFragment.subtreeFlags & StaticMask;
+  }
+  let fallbackChildFragment;
+  if (currentFallbackChildFragment !== null) {
+    fallbackChildFragment = createWorkInProgress(
+      currentFallbackChildFragment,
+      fallbackChildren,
+    );
+  } else {
+    fallbackChildFragment = createFiberFromFragment(
+      fallbackChildren,
+      mode,
+      renderLanes,
+      null,
+    );
+    // Needs a placement effect because the parent (the Suspense boundary) already
+    // mounted but this is a new fiber.
+    fallbackChildFragment.flags |= Placement;
+  }
+
+  fallbackChildFragment.return = workInProgress;
+  primaryChildFragment.return = workInProgress;
+  primaryChildFragment.sibling = fallbackChildFragment;
+  workInProgress.child = primaryChildFragment;
+
+  return bailoutOffscreenComponent(null, primaryChildFragment);
+}
+
+function retrySuspenseComponentWithoutHydrating(
+  current: Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  // Falling back to client rendering. Because this has performance
+  // implications, it's considered a recoverable error, even though the user
+  // likely won't observe anything wrong with the UI.
+
+  // This will add the old fiber to the deletion list
+  reconcileChildFibers(workInProgress, current.child, null, renderLanes);
+
+  // We're now not suspended nor dehydrated.
+  const nextProps = workInProgress.pendingProps;
+  const primaryChildren = nextProps.children;
+  const primaryChildFragment = mountSuspensePrimaryChildren(
+    workInProgress,
+    primaryChildren,
+    renderLanes,
+  );
+  // Needs a placement effect because the parent (the Suspense boundary) already
+  // mounted but this is a new fiber.
+  primaryChildFragment.flags |= Placement;
+  workInProgress.memoizedState = null;
+
+  return primaryChildFragment;
+}
+
+function mountSuspenseFallbackAfterRetryWithoutHydrating(
+  current: Fiber,
+  workInProgress: Fiber,
+  primaryChildren: $FlowFixMe,
+  fallbackChildren: $FlowFixMe,
+  renderLanes: Lanes,
+) {
+  const fiberMode = workInProgress.mode;
+  const primaryChildProps: OffscreenProps = {
+    mode: 'visible',
+    children: primaryChildren,
+  };
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
+    primaryChildProps,
+    fiberMode,
+    NoLanes,
+  );
+  const fallbackChildFragment = createFiberFromFragment(
+    fallbackChildren,
+    fiberMode,
+    renderLanes,
+    null,
+  );
+  // Needs a placement effect because the parent (the Suspense
+  // boundary) already mounted but this is a new fiber.
+  fallbackChildFragment.flags |= Placement;
+
+  primaryChildFragment.return = workInProgress;
+  fallbackChildFragment.return = workInProgress;
+  primaryChildFragment.sibling = fallbackChildFragment;
+  workInProgress.child = primaryChildFragment;
+
+  if (disableLegacyMode || (workInProgress.mode & ConcurrentMode) !== NoMode) {
+    // 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, renderLanes);
+  }
+
+  return fallbackChildFragment;
+}
+
+function mountDehydratedSuspenseComponent(
+  workInProgress: Fiber,
+  suspenseInstance: SuspenseInstance,
+  renderLanes: Lanes,
+): 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 (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.
+    // Schedule a normal pri update to render this content.
+    workInProgress.lanes = laneToLanes(DefaultLane);
+  } 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.lanes = laneToLanes(OffscreenLane);
+  }
+  return null;
+}
+
+function updateDehydratedSuspenseComponent(
+  current: Fiber,
+  workInProgress: Fiber,
+  didSuspend: boolean,
+  didPrimaryChildrenDefer: boolean,
+  nextProps: SuspenseProps,
+  suspenseInstance: SuspenseInstance,
+  suspenseState: SuspenseState,
+  renderLanes: Lanes,
+): null | Fiber {
+  if (!didSuspend) {
+    // This is the first render pass. Attempt to hydrate.
+    pushPrimaryTreeSuspenseHandler(workInProgress);
+
+    // We should never be hydrating at this point because it is the first pass,
+    // but after we've already committed once.
+    warnIfHydrating();
+
+    if (includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+      // If we're rendering Offscreen and we're entering the activity then it's possible
+      // that the only reason we rendered was because this boundary left work. Provide
+      // it as a cause if another one doesn't already exist.
+      markRenderDerivedCause(workInProgress);
+    }
+
+    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
+      // client side render instead.
+      let digest: ?string;
+      let message;
+      let stack = null;
+      let componentStack = null;
+      if (__DEV__) {
+        ({digest, message, stack, componentStack} =
+          getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
+      } else {
+        ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
+      }
+
+      let error: Error;
+      if (__DEV__ && message) {
+        // eslint-disable-next-line react-internal/prod-error-codes
+        error = new Error(message);
+      } else {
+        error = new Error(
+          'The server could not finish this Suspense boundary, likely ' +
+            'due to an error during server rendering. ' +
+            'Switched to client rendering.',
+        );
+      }
+      // Replace the stack with the server stack
+      error.stack = (__DEV__ && stack) || '';
+      (error: any).digest = digest;
+      const capturedValue = createCapturedValueFromError(
+        error,
+        componentStack === undefined ? null : componentStack,
+      );
+      queueHydrationError(capturedValue);
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    }
+
+    if (
+      // TODO: Factoring is a little weird, since we check this right below, too.
+      !didReceiveUpdate
+    ) {
+      // We need to check if any children have context before we decide to bail
+      // out, so propagate the changes now.
+      lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
+    }
+
+    // We use lanes to indicate that a child might depend on context, so if
+    // any context has changed, we need to treat is as if the input might have changed.
+    const hasContextChanged = includesSomeLane(renderLanes, current.childLanes);
+    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 a higher priority lane.
+      const root = getWorkInProgressRoot();
+      if (root !== null) {
+        const attemptHydrationAtLane = getBumpedLaneForHydration(
+          root,
+          renderLanes,
+        );
+        if (
+          attemptHydrationAtLane !== NoLane &&
+          attemptHydrationAtLane !== suspenseState.retryLane
+        ) {
+          // Intentionally mutating since this render will get interrupted. This
+          // is one of the very rare times where we mutate the current tree
+          // during the render phase.
+          suspenseState.retryLane = attemptHydrationAtLane;
+          enqueueConcurrentRenderForLane(current, attemptHydrationAtLane);
+          scheduleUpdateOnFiber(root, current, attemptHydrationAtLane);
+
+          // Throw a special object that signals to the work loop that it should
+          // interrupt the current render.
+          //
+          // Because we're inside a React-only execution stack, we don't
+          // strictly need to throw here — we could instead modify some internal
+          // work loop state. But using an exception means we don't need to
+          // check for this case on every iteration of the work loop. So doing
+          // it this way moves the check out of the fast path.
+          throw SelectiveHydrationException;
+        } 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 did not selectively hydrate, we'll continue rendering without
+      // hydrating. Mark this tree as suspended to prevent it from committing
+      // outside a transition.
+      //
+      // This path should only happen if the hydration lane already suspended.
+      if (isSuspenseInstancePending(suspenseInstance)) {
+        // This is a dehydrated suspense instance. We don't need to suspend
+        // because we're already showing a fallback.
+        // TODO: The Fizz runtime might still stream in completed HTML, out-of-
+        // band. Should we fix this? There's a version of this bug that happens
+        // during client rendering, too. Needs more consideration.
+      } else {
+        renderDidSuspendDelayIfPossible();
+      }
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    } else if (isSuspenseInstancePending(suspenseInstance)) {
+      // This component is still pending more data from the server, so we can't hydrate its
+      // content. We treat it as if this component suspended itself. It might seem as if
+      // we could just try to render it client-side instead. However, this will perform a
+      // lot of unnecessary work and is unlikely to complete since it often will suspend
+      // on missing data anyway. Additionally, the server might be able to render more
+      // than we can on the client yet. In that case we'd end up with more fallback states
+      // on the client than if we just leave it alone. If the server times out or errors
+      // these should update this boundary to the permanent Fallback state instead.
+      // Mark it as having captured (i.e. suspended).
+      // Also Mark it as requiring retry.
+      workInProgress.flags |= DidCapture | Callback;
+      // Leave the child in place. I.e. the dehydrated fragment.
+      workInProgress.child = current.child;
+      return null;
+    } else {
+      // This is the first attempt.
+      reenterHydrationStateFromDehydratedSuspenseInstance(
+        workInProgress,
+        suspenseInstance,
+        suspenseState.treeContext,
+      );
+      const primaryChildren = nextProps.children;
+      const primaryChildFragment = mountSuspensePrimaryChildren(
+        workInProgress,
+        primaryChildren,
+        renderLanes,
+      );
+      // Mark the children 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.
+      primaryChildFragment.flags |= Hydrating;
+      return primaryChildFragment;
+    }
+  } else {
+    // This is the second render pass. We already attempted to hydrated, but
+    // something either suspended or errored.
+
+    if (workInProgress.flags & ForceClientRender) {
+      // Something errored during hydration. Try again without hydrating.
+      // The error should've already been logged in throwException.
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+      workInProgress.flags &= ~ForceClientRender;
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    } else if ((workInProgress.memoizedState: null | SuspenseState) !== null) {
+      // Something suspended and we should still be in dehydrated mode.
+      // Leave the existing child in place.
+
+      // Push to avoid a mismatch
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
+      workInProgress.child = current.child;
+      // The dehydrated completion pass expects this flag to be there
+      // but the normal suspense pass doesn't.
+      workInProgress.flags |= DidCapture;
+      return null;
+    } else {
+      // Suspended but we should no longer be in dehydrated mode.
+      // Therefore we now have to render the fallback.
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
+      const nextPrimaryChildren = nextProps.children;
+      const nextFallbackChildren = nextProps.fallback;
+      mountSuspenseFallbackAfterRetryWithoutHydrating(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        nextFallbackChildren,
+        renderLanes,
+      );
+      const primaryChildFragment: Fiber = (workInProgress.child: any);
+      primaryChildFragment.memoizedState =
+        mountSuspenseOffscreenState(renderLanes);
+      primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
+        current,
+        didPrimaryChildrenDefer,
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      return bailoutOffscreenComponent(null, primaryChildFragment);
+    }
+  }
+}
+
+function scheduleSuspenseWorkOnFiber(
+  fiber: Fiber,
+  renderLanes: Lanes,
+  propagationRoot: Fiber,
+) {
+  fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
+  }
+  scheduleContextWorkOnParentPath(fiber.return, renderLanes, propagationRoot);
+}
+
+function propagateSuspenseContextChange(
+  workInProgress: Fiber,
+  firstChild: null | Fiber,
+  renderLanes: Lanes,
+): 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) {
+        scheduleSuspenseWorkOnFiber(node, renderLanes, workInProgress);
+      }
+    } 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.
+      scheduleSuspenseWorkOnFiber(node, renderLanes, workInProgress);
+    } else if (node.child !== null) {
+      node.child.return = node;
+      node = node.child;
+      continue;
+    }
+    if (node === workInProgress) {
+      return;
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    while (node.sibling === null) {
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      if (node.return === null || node.return === workInProgress) {
+        return;
+      }
+      node = node.return;
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    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) {
+    const currentRow = row.alternate;
+    // New rows can't be content rows.
+    if (currentRow !== null && findFirstSuspended(currentRow) === null) {
+      lastContentRow = row;
+    }
+    row = row.sibling;
+  }
+  return lastContentRow;
+}
+
+function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
+  if (__DEV__) {
+    const cacheKey = revealOrder == null ? 'null' : revealOrder;
+    if (
+      revealOrder != null &&
+      revealOrder !== 'forwards' &&
+      revealOrder !== 'backwards' &&
+      revealOrder !== 'unstable_legacy-backwards' &&
+      revealOrder !== 'together' &&
+      revealOrder !== 'independent' &&
+      !didWarnAboutRevealOrder[cacheKey]
+    ) {
+      didWarnAboutRevealOrder[cacheKey] = true;
+      if (typeof revealOrder === 'string') {
+        switch (revealOrder.toLowerCase()) {
+          case 'together':
+          case 'forwards':
+          case 'backwards':
+          case 'independent': {
+            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 "independent", "together", "forwards" or "backwards"?',
+              revealOrder,
+            );
+            break;
+        }
+      } else {
+        console.error(
+          '%s is not a supported value for revealOrder on <SuspenseList />. ' +
+            'Did you mean "independent", "together", "forwards" or "backwards"?',
+          revealOrder,
+        );
+      }
+    }
+  }
+}
+
+function validateTailOptions(
+  tailMode: SuspenseListTailMode,
+  revealOrder: SuspenseListRevealOrder,
+) {
+  if (__DEV__) {
+    const cacheKey = tailMode == null ? 'null' : tailMode;
+    if (!didWarnAboutTailOptions[cacheKey]) {
+      if (tailMode == null) {
+        // The default tail is now "hidden".
+      } else if (
+        tailMode !== 'visible' &&
+        tailMode !== 'collapsed' &&
+        tailMode !== 'hidden'
+      ) {
+        didWarnAboutTailOptions[cacheKey] = true;
+        console.error(
+          '"%s" is not a supported value for tail on <SuspenseList />. ' +
+            'Did you mean "visible", "collapsed" or "hidden"?',
+          tailMode,
+        );
+      } else if (
+        revealOrder != null &&
+        revealOrder !== 'forwards' &&
+        revealOrder !== 'backwards' &&
+        revealOrder !== 'unstable_legacy-backwards'
+      ) {
+        didWarnAboutTailOptions[cacheKey] = true;
+        console.error(
+          '<SuspenseList tail="%s" /> is only valid if revealOrder is ' +
+            '"forwards" (default) or "backwards". ' +
+            'Did you mean to specify revealOrder="forwards"?',
+          tailMode,
+        );
+      }
+    }
+  }
+}
+
+function initSuspenseListRenderState(
+  workInProgress: Fiber,
+  isBackwards: boolean,
+  tail: null | Fiber,
+  lastContentRow: null | Fiber,
+  tailMode: SuspenseListTailMode,
+  treeForkCount: number,
+): void {
+  const renderState: null | SuspenseListRenderState =
+    workInProgress.memoizedState;
+  if (renderState === null) {
+    workInProgress.memoizedState = ({
+      isBackwards: isBackwards,
+      rendering: null,
+      renderingStartTime: 0,
+      last: lastContentRow,
+      tail: tail,
+      tailMode: tailMode,
+      treeForkCount: treeForkCount,
+    }: 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.tailMode = tailMode;
+    renderState.treeForkCount = treeForkCount;
+  }
+}
+
+function reverseChildren(fiber: Fiber): void {
+  let row = fiber.child;
+  fiber.child = null;
+  while (row !== null) {
+    const nextRow = row.sibling;
+    row.sibling = fiber.child;
+    fiber.child = row;
+    row = nextRow;
+  }
+}
+
+// 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,
+  renderLanes: Lanes,
+) {
+  const nextProps: SuspenseListProps = workInProgress.pendingProps;
+  const revealOrder: SuspenseListRevealOrder = nextProps.revealOrder;
+  const tailMode: SuspenseListTailMode = nextProps.tail;
+  const newChildren = nextProps.children;
+
+  let suspenseContext: SuspenseContext = suspenseStackCursor.current;
+
+  if (workInProgress.flags & DidCapture) {
+    // This is the second pass after having suspended in a row. Proceed directly
+    // to the complete phase.
+    pushSuspenseListContext(workInProgress, suspenseContext);
+    return null;
+  }
+
+  const shouldForceFallback = hasSuspenseListContext(
+    suspenseContext,
+    (ForceSuspenseFallback: SuspenseContext),
+  );
+  if (shouldForceFallback) {
+    suspenseContext = setShallowSuspenseListContext(
+      suspenseContext,
+      ForceSuspenseFallback,
+    );
+    workInProgress.flags |= DidCapture;
+  } else {
+    suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext);
+  }
+  pushSuspenseListContext(workInProgress, suspenseContext);
+
+  validateRevealOrder(revealOrder);
+  validateTailOptions(tailMode, revealOrder);
+  validateSuspenseListChildren(newChildren, revealOrder);
+
+  if (revealOrder === 'backwards' && current !== null) {
+    // For backwards the current mounted set will be backwards. Reconciling against it
+    // will lead to mismatches and reorders. We need to swap the original set first
+    // and then restore it afterwards.
+    reverseChildren(current);
+    reconcileChildren(current, workInProgress, newChildren, renderLanes);
+    reverseChildren(current);
+  } else {
+    reconcileChildren(current, workInProgress, newChildren, renderLanes);
+  }
+  // Read how many children forks this set pushed so we can push it every time we retry.
+  const treeForkCount = getIsHydrating() ? getForksAtLevel(workInProgress) : 0;
+
+  if (!shouldForceFallback) {
+    const didSuspendBefore =
+      current !== null && (current.flags & DidCapture) !== NoFlags;
+    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,
+        renderLanes,
+      );
+    }
+  }
+
+  if (!disableLegacyMode && (workInProgress.mode & ConcurrentMode) === NoMode) {
+    // In legacy 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 'backwards': {
+        // We're going to find the first row that has existing content.
+        // We are also going to reverse the order of anything in the existing content
+        // since we want to actually render them backwards from the reconciled set.
+        // The tail is left in order, because it'll be added to the front as we
+        // complete each item.
+        const lastContentRow = findLastContentRow(workInProgress.child);
+        let tail;
+        if (lastContentRow === null) {
+          // The whole list is part of the tail.
+          tail = workInProgress.child;
+          workInProgress.child = null;
+        } else {
+          // Disconnect the tail rows after the content row.
+          // We're going to render them separately later in reverse order.
+          tail = lastContentRow.sibling;
+          lastContentRow.sibling = null;
+          // We have to now reverse the main content so it renders backwards too.
+          reverseChildren(workInProgress);
+        }
+        // TODO: If workInProgress.child is null, we can continue on the tail immediately.
+        initSuspenseListRenderState(
+          workInProgress,
+          true, // isBackwards
+          tail,
+          null, // last
+          tailMode,
+          treeForkCount,
+        );
+        break;
+      }
+      case 'unstable_legacy-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) {
+          const 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;
+          }
+          const 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,
+          treeForkCount,
+        );
+        break;
+      }
+      case 'together': {
+        initSuspenseListRenderState(
+          workInProgress,
+          false, // isBackwards
+          null, // tail
+          null, // last
+          undefined,
+          treeForkCount,
+        );
+        break;
+      }
+      case 'independent': {
+        // The "independent" reveal order is the same as not having
+        // a boundary.
+        workInProgress.memoizedState = null;
+        break;
+      }
+      // The default is now forwards.
+      case 'forwards':
+      default: {
+        const 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,
+          treeForkCount,
+        );
+        break;
+      }
+    }
+  }
+  return workInProgress.child;
+}
+
+function updateViewTransition(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  if (workInProgress.stateNode === null) {
+    // We previously reset the work-in-progress.
+    // We need to create a new ViewTransitionState instance.
+    const instance: ViewTransitionState = {
+      autoName: null,
+      paired: null,
+      clones: null,
+      ref: null,
+    };
+    workInProgress.stateNode = instance;
+  }
+
+  const pendingProps: ViewTransitionProps = workInProgress.pendingProps;
+  if (pendingProps.name != null && pendingProps.name !== 'auto') {
+    // Explicitly named boundary. We track it so that we can pair it up with another explicit
+    // boundary if we get deleted.
+    workInProgress.flags |=
+      current === null
+        ? ViewTransitionNamedMount | ViewTransitionNamedStatic
+        : ViewTransitionNamedStatic;
+  } else {
+    // The server may have used useId to auto-assign a generated name for this boundary.
+    // We push a materialization to ensure child ids line up with the server.
+    if (getIsHydrating()) {
+      pushMaterializedTreeId(workInProgress);
+    }
+  }
+  if (__DEV__) {
+    // $FlowFixMe[prop-missing]
+    if (pendingProps.className !== undefined) {
+      const example =
+        typeof pendingProps.className === 'string'
+          ? JSON.stringify(pendingProps.className)
+          : '{...}';
+      if (!didWarnAboutClassNameOnViewTransition[example]) {
+        didWarnAboutClassNameOnViewTransition[example] = true;
+        console.error(
+          '<ViewTransition> doesn\'t accept a "className" prop. It has been renamed to "default".\n' +
+            '-   <ViewTransition className=%s>\n' +
+            '+   <ViewTransition default=%s>',
+          example,
+          example,
+        );
+      }
+    }
+  }
+  if (current !== null && current.memoizedProps.name !== pendingProps.name) {
+    // If the name changes, we schedule a ref effect to create a new ref instance.
+    workInProgress.flags |= Ref | RefStatic;
+  } else {
+    markRef(current, workInProgress);
+  }
+  const nextChildren = pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updatePortalComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
+  const nextChildren = workInProgress.pendingProps;
+  if (current === null) {
+    // Portals are special because we don't append the children during mount
+    // but at commit. Therefore we need to track insertions which the normal
+    // flow doesn't do during mount. This doesn't happen at the root because
+    // the root always starts with a "current" with a null child.
+    // TODO: Consider unifying this with how the root works.
+    workInProgress.child = reconcileChildFibers(
+      workInProgress,
+      null,
+      nextChildren,
+      renderLanes,
+    );
+  } else {
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  }
+  return workInProgress.child;
+}
+
+let hasWarnedAboutUsingNoValuePropOnContextProvider = false;
+
+function updateContextProvider(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const context: ReactContext<any> = workInProgress.type;
+  const newProps = workInProgress.pendingProps;
+  const newValue = newProps.value;
+
+  if (__DEV__) {
+    if (!('value' in newProps)) {
+      if (!hasWarnedAboutUsingNoValuePropOnContextProvider) {
+        hasWarnedAboutUsingNoValuePropOnContextProvider = true;
+        console.error(
+          'The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?',
+        );
+      }
+    }
+  }
+
+  pushProvider(workInProgress, context, newValue);
+
+  const newChildren = newProps.children;
+  reconcileChildren(current, workInProgress, newChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateContextConsumer(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const consumerType: ReactConsumerType<any> = workInProgress.type;
+  const context: ReactContext<any> = consumerType._context;
+  const newProps = workInProgress.pendingProps;
+  const render = newProps.children;
+
+  if (__DEV__) {
+    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, renderLanes);
+  const newValue = readContext(context);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
+  let newChildren;
+  if (__DEV__) {
+    newChildren = callComponentInDEV(render, newValue, undefined);
+  } else {
+    newChildren = render(newValue);
+  }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
+
+  // React DevTools reads this flag.
+  workInProgress.flags |= PerformedWork;
+  reconcileChildren(current, workInProgress, newChildren, renderLanes);
+  return workInProgress.child;
+}
+
+function updateScopeComponent(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextProps = workInProgress.pendingProps;
+  const nextChildren = nextProps.children;
+  markRef(current, workInProgress);
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
+export function markWorkInProgressReceivedUpdate() {
+  didReceiveUpdate = true;
+}
+
+export function checkIfWorkInProgressReceivedUpdate(): boolean {
+  return didReceiveUpdate;
+}
+
+function resetSuspendedCurrentOnMountInLegacyMode(
+  current: null | Fiber,
+  workInProgress: Fiber,
+) {
+  if (!disableLegacyMode && (workInProgress.mode & ConcurrentMode) === NoMode) {
+    if (current !== null) {
+      // 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.
+      current.alternate = null;
+      workInProgress.alternate = null;
+      // Since this is conceptually a new fiber, schedule a Placement effect
+      workInProgress.flags |= Placement;
+    }
+  }
+}
+
+function bailoutOnAlreadyFinishedWork(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber | null {
+  if (current !== null) {
+    // Reuse previous dependencies
+    workInProgress.dependencies = current.dependencies;
+  }
+
+  if (enableProfilerTimer) {
+    // Don't update "base" render times for bailouts.
+    stopProfilerTimerIfRunning(workInProgress);
+  }
+
+  markSkippedUpdateLanes(workInProgress.lanes);
+
+  // Check if the children have any pending work.
+  if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
+    // The children don't have any work either. We can skip them.
+    // TODO: Once we add back resuming, we should check if the children are
+    // a work-in-progress set. If so, we need to transfer their effects.
+
+    if (current !== null) {
+      // Before bailing out, check if there are any context changes in
+      // the children.
+      lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
+      if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
+        return null;
+      }
+    } else {
+      return null;
+    }
+  }
+
+  // This fiber doesn't have work, but its subtree does. Clone the child
+  // fibers and continue.
+  cloneChildFibers(current, workInProgress);
+  return workInProgress.child;
+}
+
+function remountFiber(
+  current: Fiber,
+  oldWorkInProgress: Fiber,
+  newWorkInProgress: Fiber,
+): Fiber | null {
+  if (__DEV__) {
+    const returnFiber = oldWorkInProgress.return;
+    if (returnFiber === null) {
+      // eslint-disable-next-line react-internal/prod-error-codes
+      throw new Error('Cannot swap the root fiber.');
+    }
+
+    // Disconnect from the old current.
+    // It will get deleted.
+    current.alternate = null;
+    oldWorkInProgress.alternate = null;
+
+    // Connect to the new tree.
+    newWorkInProgress.index = oldWorkInProgress.index;
+    newWorkInProgress.sibling = oldWorkInProgress.sibling;
+    newWorkInProgress.return = oldWorkInProgress.return;
+    newWorkInProgress.ref = oldWorkInProgress.ref;
+
+    if (__DEV__) {
+      newWorkInProgress._debugInfo = oldWorkInProgress._debugInfo;
+    }
+
+    // Replace the child/sibling pointers above it.
+    if (oldWorkInProgress === returnFiber.child) {
+      returnFiber.child = newWorkInProgress;
+    } else {
+      let prevSibling = returnFiber.child;
+      if (prevSibling === null) {
+        // eslint-disable-next-line react-internal/prod-error-codes
+        throw new Error('Expected parent to have a child.');
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      while (prevSibling.sibling !== oldWorkInProgress) {
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        prevSibling = prevSibling.sibling;
+        if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
+          throw new Error('Expected to find the previous sibling.');
+        }
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      prevSibling.sibling = newWorkInProgress;
+    }
+
+    // Delete the old fiber and place the new one.
+    // Since the old fiber is disconnected, we have to schedule it manually.
+    const deletions = returnFiber.deletions;
+    if (deletions === null) {
+      returnFiber.deletions = [current];
+      returnFiber.flags |= ChildDeletion;
+    } else {
+      deletions.push(current);
+    }
+
+    newWorkInProgress.flags |= Placement;
+
+    // Restart work from the new fiber.
+    return newWorkInProgress;
+  } else {
+    throw new Error(
+      'Did not expect this call in production. ' +
+        'This is a bug in React. Please file an issue.',
+    );
+  }
+}
+
+function checkScheduledUpdateOrContext(
+  current: Fiber,
+  renderLanes: Lanes,
+): boolean {
+  // Before performing an early bailout, we must check if there are pending
+  // updates or context.
+  const updateLanes = current.lanes;
+  if (includesSomeLane(updateLanes, renderLanes)) {
+    return true;
+  }
+  // No pending update, but because context is propagated lazily, we need
+  // to check for a context change before we bail out.
+  const dependencies = current.dependencies;
+  if (dependencies !== null && checkIfContextChanged(dependencies)) {
+    return true;
+  }
+  return false;
+}
+
+function attemptEarlyBailoutIfNoScheduledUpdate(
+  current: Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  // This fiber does not have any pending work. Bailout without entering
+  // the begin phase. There's still some bookkeeping we that needs to be done
+  // in this optimized path, mostly pushing stuff onto the stack.
+  switch (workInProgress.tag) {
+    case HostRoot: {
+      pushHostRootContext(workInProgress);
+      const root: FiberRoot = workInProgress.stateNode;
+      pushRootTransition(workInProgress, root, renderLanes);
+
+      if (enableTransitionTracing) {
+        pushRootMarkerInstance(workInProgress);
+      }
+
+      const cache: Cache = current.memoizedState.cache;
+      pushCacheProvider(workInProgress, cache);
+      resetHydrationState();
+      break;
+    }
+    case HostSingleton:
+    case HostComponent:
+      pushHostContext(workInProgress);
+      break;
+    case ClassComponent: {
+      const Component = workInProgress.type;
+      if (isLegacyContextProvider(Component)) {
+        pushLegacyContextProvider(workInProgress);
+      }
+      break;
+    }
+    case HostPortal:
+      pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
+      break;
+    case ContextProvider: {
+      const newValue = workInProgress.memoizedProps.value;
+      const context: ReactContext<any> = workInProgress.type;
+      pushProvider(workInProgress, context, newValue);
+      break;
+    }
+    case Profiler:
+      if (enableProfilerTimer) {
+        // Profiler should only call onRender when one of its descendants actually rendered.
+        const hasChildWork = includesSomeLane(
+          renderLanes,
+          workInProgress.childLanes,
+        );
+        if (hasChildWork) {
+          workInProgress.flags |= Update;
+        }
+
+        if (enableProfilerCommitHooks) {
+          // Schedule a passive effect for this Profiler to call onPostCommit hooks.
+          // This effect should be scheduled even if there is no onPostCommit callback for this Profiler,
+          // because the effect is also where times bubble to parent Profilers.
+          workInProgress.flags |= Passive;
+          // Reset effect durations for the next eventual effect phase.
+          // These are reset during render to allow the DevTools commit hook a chance to read them,
+          const stateNode = workInProgress.stateNode;
+          stateNode.effectDuration = -0;
+          stateNode.passiveEffectDuration = -0;
+        }
+      }
+      break;
+    case ActivityComponent: {
+      const state: ActivityState | null = workInProgress.memoizedState;
+      if (state !== null) {
+        // We're dehydrated so we're not going to render the children. This is just
+        // to maintain push/pop symmetry.
+        // We know that this component will suspend again because if it has
+        // been unsuspended it has committed as a hydrated Activity component.
+        // If it needs to be retried, it should have work scheduled on it.
+        workInProgress.flags |= DidCapture;
+        pushDehydratedActivitySuspenseHandler(workInProgress);
+        return null;
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      const state: SuspenseState | null = workInProgress.memoizedState;
+      if (state !== null) {
+        if (state.dehydrated !== null) {
+          // We're not going to render the children, so this is just to maintain
+          // push/pop symmetry
+          pushPrimaryTreeSuspenseHandler(workInProgress);
+          // 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.flags |= DidCapture;
+          // We should never render the children of a dehydrated boundary until we
+          // upgrade it. We return null instead of bailoutOnAlreadyFinishedWork.
+          return null;
+        }
+
+        // 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
+        // child fragment.
+        const primaryChildFragment: Fiber = (workInProgress.child: any);
+        const primaryChildLanes = primaryChildFragment.childLanes;
+        if (includesSomeLane(renderLanes, primaryChildLanes)) {
+          // The primary children have pending work. Use the normal path
+          // to attempt to render the primary children again.
+          return updateSuspenseComponent(current, workInProgress, renderLanes);
+        } else {
+          // The primary child fragment does not have pending work marked
+          // on it
+          pushPrimaryTreeSuspenseHandler(workInProgress);
+          // The primary children do not have pending work with sufficient
+          // priority. Bailout.
+          const child = bailoutOnAlreadyFinishedWork(
+            current,
+            workInProgress,
+            renderLanes,
+          );
+          if (child !== null) {
+            // The fallback children have pending work. Skip over the
+            // primary children and work on the fallback.
+            return child.sibling;
+          } else {
+            // Note: We can return `null` here because we already checked
+            // whether there were nested context consumers, via the call to
+            // `bailoutOnAlreadyFinishedWork` above.
+            return null;
+          }
+        }
+      } else {
+        pushPrimaryTreeSuspenseHandler(workInProgress);
+      }
+      break;
+    }
+    case SuspenseListComponent: {
+      if (workInProgress.flags & DidCapture) {
+        // Second pass caught.
+        return updateSuspenseListComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
+
+      let hasChildWork = includesSomeLane(
+        renderLanes,
+        workInProgress.childLanes,
+      );
+
+      if (!hasChildWork) {
+        // Context changes may not have been propagated yet. We need to do
+        // that now, before we can decide whether to bail out.
+        // TODO: We use `childLanes` as a heuristic for whether there is
+        // remaining work in a few places, including
+        // `bailoutOnAlreadyFinishedWork` and
+        // `updateDehydratedSuspenseComponent`. We should maybe extract this
+        // into a dedicated function.
+        lazilyPropagateParentContextChanges(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+        hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
+      }
+
+      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,
+            renderLanes,
+          );
+        }
+        // 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.flags |= DidCapture;
+      }
+
+      // 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.
+      const 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;
+        renderState.lastEffect = null;
+      }
+      pushSuspenseListContext(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;
+      }
+    }
+    case OffscreenComponent: {
+      // Need to check if the tree still needs to be deferred. This is
+      // almost identical to the logic used in the normal update path,
+      // so we'll just enter that. The only difference is we'll bail out
+      // at the next level instead of this one, because the child props
+      // have not changed. Which is fine.
+      // TODO: Probably should refactor `beginWork` to split the bailout
+      // path from the normal path. I'm tempted to do a labeled break here
+      // but I won't :)
+      workInProgress.lanes = NoLanes;
+      return updateOffscreenComponent(
+        current,
+        workInProgress,
+        renderLanes,
+        workInProgress.pendingProps,
+      );
+    }
+    case CacheComponent: {
+      const cache: Cache = current.memoizedState.cache;
+      pushCacheProvider(workInProgress, cache);
+      break;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          pushMarkerInstance(workInProgress, instance);
+        }
+        break;
+      }
+      // Fallthrough
+    }
+    case LegacyHiddenComponent: {
+      if (enableLegacyHidden) {
+        workInProgress.lanes = NoLanes;
+        return updateLegacyHiddenComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      // Fallthrough
+    }
+  }
+  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+}
+
+function beginWork(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber | null {
+  if (__DEV__) {
+    if (workInProgress._debugNeedsRemount && current !== null) {
+      // This will restart the begin phase with a new fiber.
+      const copiedFiber = createFiberFromTypeAndProps(
+        workInProgress.type,
+        workInProgress.key,
+        workInProgress.pendingProps,
+        workInProgress._debugOwner || null,
+        workInProgress.mode,
+        workInProgress.lanes,
+      );
+      copiedFiber._debugStack = workInProgress._debugStack;
+      copiedFiber._debugTask = workInProgress._debugTask;
+      return remountFiber(current, workInProgress, copiedFiber);
+    }
+  }
+
+  if (current !== null) {
+    const oldProps = current.memoizedProps;
+    const newProps = workInProgress.pendingProps;
+
+    if (
+      oldProps !== newProps ||
+      hasLegacyContextChanged() ||
+      // Force a re-render if the implementation changed due to hot reload:
+      (__DEV__ ? workInProgress.type !== current.type : false)
+    ) {
+      // If props or context changed, mark the fiber as having performed work.
+      // This may be unset if the props are determined to be equal later (memo).
+      didReceiveUpdate = true;
+    } else {
+      // Neither props nor legacy context changes. Check if there's a pending
+      // update or context change.
+      const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext(
+        current,
+        renderLanes,
+      );
+      if (
+        !hasScheduledUpdateOrContext &&
+        // If this is the second pass of an error or suspense boundary, there
+        // may not be work scheduled on `current`, so we check for this flag.
+        (workInProgress.flags & DidCapture) === NoFlags
+      ) {
+        // No pending updates or context. Bail out now.
+        didReceiveUpdate = false;
+        return attemptEarlyBailoutIfNoScheduledUpdate(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
+        // This is a special case that only exists for legacy mode.
+        // See https://github.com/facebook/react/pull/19216.
+        didReceiveUpdate = true;
+      } 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;
+
+    if (getIsHydrating() && isForkedChild(workInProgress)) {
+      // Check if this child belongs to a list of muliple children in
+      // its parent.
+      //
+      // In a true multi-threaded implementation, we would render children on
+      // parallel threads. This would represent the beginning of a new render
+      // thread for this subtree.
+      //
+      // We only use this for id generation during hydration, which is why the
+      // logic is located in this special branch.
+      const slotIndex = workInProgress.index;
+      const numberOfForks = getForksAtLevel(workInProgress);
+      pushTreeId(workInProgress, numberOfForks, slotIndex);
+    }
+  }
+
+  // Before entering the begin phase, clear pending update priority.
+  // TODO: This assumes that we're about to evaluate the component and process
+  // the update queue. However, there's an exception: SimpleMemoComponent
+  // sometimes bails out later in the begin phase. This indicates that we should
+  // move this assignment out of the common path and into each branch.
+  workInProgress.lanes = NoLanes;
+
+  switch (workInProgress.tag) {
+    case LazyComponent: {
+      const elementType = workInProgress.elementType;
+      return mountLazyComponent(
+        current,
+        workInProgress,
+        elementType,
+        renderLanes,
+      );
+    }
+    case FunctionComponent: {
+      const Component = workInProgress.type;
+      return updateFunctionComponent(
+        current,
+        workInProgress,
+        Component,
+        workInProgress.pendingProps,
+        renderLanes,
+      );
+    }
+    case ClassComponent: {
+      const Component = workInProgress.type;
+      const unresolvedProps = workInProgress.pendingProps;
+      const resolvedProps = resolveClassComponentProps(
+        Component,
+        unresolvedProps,
+      );
+      return updateClassComponent(
+        current,
+        workInProgress,
+        Component,
+        resolvedProps,
+        renderLanes,
+      );
+    }
+    case HostRoot:
+      return updateHostRoot(current, workInProgress, renderLanes);
+    case HostHoistable:
+      if (supportsResources) {
+        return updateHostHoistable(current, workInProgress, renderLanes);
+      }
+    // Fall through
+    case HostSingleton:
+      if (supportsSingletons) {
+        return updateHostSingleton(current, workInProgress, renderLanes);
+      }
+    // Fall through
+    case HostComponent:
+      return updateHostComponent(current, workInProgress, renderLanes);
+    case HostText:
+      return updateHostText(current, workInProgress);
+    case SuspenseComponent:
+      return updateSuspenseComponent(current, workInProgress, renderLanes);
+    case HostPortal:
+      return updatePortalComponent(current, workInProgress, renderLanes);
+    case ForwardRef: {
+      return updateForwardRef(
+        current,
+        workInProgress,
+        workInProgress.type,
+        workInProgress.pendingProps,
+        renderLanes,
+      );
+    }
+    case Fragment:
+      return updateFragment(current, workInProgress, renderLanes);
+    case Mode:
+      return updateMode(current, workInProgress, renderLanes);
+    case Profiler:
+      return updateProfiler(current, workInProgress, renderLanes);
+    case ContextProvider:
+      return updateContextProvider(current, workInProgress, renderLanes);
+    case ContextConsumer:
+      return updateContextConsumer(current, workInProgress, renderLanes);
+    case MemoComponent: {
+      return updateMemoComponent(
+        current,
+        workInProgress,
+        workInProgress.type,
+        workInProgress.pendingProps,
+        renderLanes,
+      );
+    }
+    case SimpleMemoComponent: {
+      return updateSimpleMemoComponent(
+        current,
+        workInProgress,
+        workInProgress.type,
+        workInProgress.pendingProps,
+        renderLanes,
+      );
+    }
+    case IncompleteClassComponent: {
+      if (disableLegacyMode) {
+        break;
+      }
+      const Component = workInProgress.type;
+      const unresolvedProps = workInProgress.pendingProps;
+      const resolvedProps = resolveClassComponentProps(
+        Component,
+        unresolvedProps,
+      );
+      return mountIncompleteClassComponent(
+        current,
+        workInProgress,
+        Component,
+        resolvedProps,
+        renderLanes,
+      );
+    }
+    case IncompleteFunctionComponent: {
+      if (disableLegacyMode) {
+        break;
+      }
+      const Component = workInProgress.type;
+      const unresolvedProps = workInProgress.pendingProps;
+      const resolvedProps = resolveClassComponentProps(
+        Component,
+        unresolvedProps,
+      );
+      return mountIncompleteFunctionComponent(
+        current,
+        workInProgress,
+        Component,
+        resolvedProps,
+        renderLanes,
+      );
+    }
+    case SuspenseListComponent: {
+      return updateSuspenseListComponent(current, workInProgress, renderLanes);
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        return updateScopeComponent(current, workInProgress, renderLanes);
+      }
+      break;
+    }
+    case ActivityComponent: {
+      return updateActivityComponent(current, workInProgress, renderLanes);
+    }
+    case OffscreenComponent: {
+      return updateOffscreenComponent(
+        current,
+        workInProgress,
+        renderLanes,
+        workInProgress.pendingProps,
+      );
+    }
+    case LegacyHiddenComponent: {
+      if (enableLegacyHidden) {
+        return updateLegacyHiddenComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      break;
+    }
+    case CacheComponent: {
+      return updateCacheComponent(current, workInProgress, renderLanes);
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        return updateTracingMarkerComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        return updateViewTransition(current, workInProgress, renderLanes);
+      }
+      break;
+    }
+    case Throw: {
+      // This represents a Component that threw in the reconciliation phase.
+      // So we'll rethrow here. This might be a Thenable.
+      throw workInProgress.pendingProps;
+    }
+  }
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
+      'React. Please file an issue.',
+  );
+}
+
+export {beginWork};
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.js b/packages/react-reconciler/src/ReactFiberCacheComponent.js
new file mode 100644
index 00000000000..0ab12bd4ec4
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
+import {pushProvider, popProvider} from './ReactFiberNewContext';
+import * as Scheduler from 'scheduler';
+
+// In environments without AbortController (e.g. tests)
+// replace it with a lightweight shim that only has the features we use.
+const AbortControllerLocal: typeof AbortController =
+  typeof AbortController !== 'undefined'
+    ? AbortController
+    : // $FlowFixMe[incompatible-type]
+      // $FlowFixMe[missing-this-annot]
+      function AbortControllerShim() {
+        const listeners = [];
+        const signal = (this.signal = {
+          aborted: false as boolean,
+          addEventListener: (type, listener) => {
+            listeners.push(listener);
+          },
+        });
+
+        this.abort = () => {
+          signal.aborted = true;
+          listeners.forEach(listener => listener());
+        };
+      };
+
+export type Cache = {
+  controller: AbortController,
+  data: Map<() => mixed, mixed>,
+  refCount: number,
+};
+
+export type CacheComponentState = {
+  +parent: Cache,
+  +cache: Cache,
+};
+
+export type SpawnedCachePool = {
+  +parent: Cache,
+  +pool: Cache,
+};
+
+// Intentionally not named imports because Rollup would
+// use dynamic dispatch for CommonJS interop named imports.
+const {
+  unstable_scheduleCallback: scheduleCallback,
+  unstable_NormalPriority: NormalPriority,
+} = Scheduler;
+
+export const CacheContext: ReactContext<Cache> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  // We don't use Consumer/Provider for Cache components. So we'll cheat.
+  Consumer: (null: any),
+  Provider: (null: any),
+  // We'll initialize these at the root.
+  _currentValue: (null: any),
+  _currentValue2: (null: any),
+  _threadCount: 0,
+};
+
+if (__DEV__) {
+  CacheContext._currentRenderer = null;
+  CacheContext._currentRenderer2 = null;
+}
+
+// Creates a new empty Cache instance with a ref-count of 0. The caller is responsible
+// for retaining the cache once it is in use (retainCache), and releasing the cache
+// once it is no longer needed (releaseCache).
+export function createCache(): Cache {
+  return {
+    controller: new AbortControllerLocal(),
+    data: new Map(),
+    refCount: 0,
+  };
+}
+
+export function retainCache(cache: Cache) {
+  if (__DEV__) {
+    if (cache.controller.signal.aborted) {
+      console.warn(
+        'A cache instance was retained after it was already freed. ' +
+          'This likely indicates a bug in React.',
+      );
+    }
+  }
+  cache.refCount++;
+}
+
+// Cleanup a cache instance, potentially freeing it if there are no more references
+export function releaseCache(cache: Cache) {
+  cache.refCount--;
+  if (__DEV__) {
+    if (cache.refCount < 0) {
+      console.warn(
+        'A cache instance was released after it was already freed. ' +
+          'This likely indicates a bug in React.',
+      );
+    }
+  }
+  if (cache.refCount === 0) {
+    scheduleCallback(NormalPriority, () => {
+      cache.controller.abort();
+    });
+  }
+}
+
+export function pushCacheProvider(workInProgress: Fiber, cache: Cache) {
+  pushProvider(workInProgress, CacheContext, cache);
+}
+
+export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
+  popProvider(CacheContext, workInProgress);
+}
diff --git a/packages/react-reconciler/src/ReactFiberCallUserSpace.js b/packages/react-reconciler/src/ReactFiberCallUserSpace.js
new file mode 100644
index 00000000000..ce88814797c
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCallUserSpace.js
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {LazyComponent} from 'react/src/ReactLazy';
+import type {Effect} from './ReactFiberHooks';
+import type {CapturedValue} from './ReactCapturedValue';
+
+import {isRendering, setIsRendering} from './ReactCurrentFiber';
+import {captureCommitPhaseError} from './ReactFiberWorkLoop';
+
+// These indirections exists so we can exclude its stack frame in DEV (and anything below it).
+// TODO: Consider marking the whole bundle instead of these boundaries.
+
+const callComponent = {
+  react_stack_bottom_frame: function <Props, Arg, R>(
+    Component: (p: Props, arg: Arg) => R,
+    props: Props,
+    secondArg: Arg,
+  ): R {
+    const wasRendering = isRendering;
+    setIsRendering(true);
+    try {
+      const result = Component(props, secondArg);
+      return result;
+    } finally {
+      setIsRendering(wasRendering);
+    }
+  },
+};
+
+export const callComponentInDEV: <Props, Arg, R>(
+  Component: (p: Props, arg: Arg) => R,
+  props: Props,
+  secondArg: Arg,
+) => R = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponent.react_stack_bottom_frame.bind(callComponent): any)
+  : (null: any);
+
+interface ClassInstance<R> {
+  render(): R;
+  componentDidMount(): void;
+  componentDidUpdate(
+    prevProps: Object,
+    prevState: Object,
+    snaphot: Object,
+  ): void;
+  componentDidCatch(error: mixed, errorInfo: {componentStack: string}): void;
+  componentWillUnmount(): void;
+}
+
+const callRender = {
+  react_stack_bottom_frame: function <R>(instance: ClassInstance<R>): R {
+    const wasRendering = isRendering;
+    setIsRendering(true);
+    try {
+      const result = instance.render();
+      return result;
+    } finally {
+      setIsRendering(wasRendering);
+    }
+  },
+};
+
+export const callRenderInDEV: <R>(instance: ClassInstance<R>) => R => R =
+  __DEV__
+    ? // We use this technique to trick minifiers to preserve the function name.
+      (callRender.react_stack_bottom_frame.bind(callRender): any)
+    : (null: any);
+
+const callComponentDidMount = {
+  react_stack_bottom_frame: function (
+    finishedWork: Fiber,
+    instance: ClassInstance<any>,
+  ): void {
+    try {
+      instance.componentDidMount();
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  },
+};
+
+export const callComponentDidMountInDEV: (
+  finishedWork: Fiber,
+  instance: ClassInstance<any>,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentDidMount.react_stack_bottom_frame.bind(
+      callComponentDidMount,
+    ): any)
+  : (null: any);
+
+const callComponentDidUpdate = {
+  react_stack_bottom_frame: function (
+    finishedWork: Fiber,
+    instance: ClassInstance<any>,
+    prevProps: Object,
+    prevState: Object,
+    snapshot: Object,
+  ): void {
+    try {
+      instance.componentDidUpdate(prevProps, prevState, snapshot);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  },
+};
+
+export const callComponentDidUpdateInDEV: (
+  finishedWork: Fiber,
+  instance: ClassInstance<any>,
+  prevProps: Object,
+  prevState: Object,
+  snaphot: Object,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentDidUpdate.react_stack_bottom_frame.bind(
+      callComponentDidUpdate,
+    ): any)
+  : (null: any);
+
+const callComponentDidCatch = {
+  react_stack_bottom_frame: function (
+    instance: ClassInstance<any>,
+    errorInfo: CapturedValue<mixed>,
+  ): void {
+    const error = errorInfo.value;
+    const stack = errorInfo.stack;
+    instance.componentDidCatch(error, {
+      componentStack: stack !== null ? stack : '',
+    });
+  },
+};
+
+export const callComponentDidCatchInDEV: (
+  instance: ClassInstance<any>,
+  errorInfo: CapturedValue<mixed>,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentDidCatch.react_stack_bottom_frame.bind(
+      callComponentDidCatch,
+    ): any)
+  : (null: any);
+
+const callComponentWillUnmount = {
+  react_stack_bottom_frame: function (
+    current: Fiber,
+    nearestMountedAncestor: Fiber | null,
+    instance: ClassInstance<any>,
+  ): void {
+    try {
+      instance.componentWillUnmount();
+    } catch (error) {
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
+    }
+  },
+};
+
+export const callComponentWillUnmountInDEV: (
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: ClassInstance<any>,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponentWillUnmount.react_stack_bottom_frame.bind(
+      callComponentWillUnmount,
+    ): any)
+  : (null: any);
+
+const callCreate = {
+  react_stack_bottom_frame: function (
+    effect: Effect,
+  ): (() => void) | {...} | void | null {
+    const create = effect.create;
+    const inst = effect.inst;
+    const destroy = create();
+    inst.destroy = destroy;
+    return destroy;
+  },
+};
+
+export const callCreateInDEV: (effect: Effect) => (() => void) | void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callCreate.react_stack_bottom_frame.bind(callCreate): any)
+  : (null: any);
+
+const callDestroy = {
+  react_stack_bottom_frame: function (
+    current: Fiber,
+    nearestMountedAncestor: Fiber | null,
+    destroy: () => void,
+  ): void {
+    try {
+      destroy();
+    } catch (error) {
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
+    }
+  },
+};
+
+export const callDestroyInDEV: (
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  destroy: (() => void) | (({...}) => void),
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callDestroy.react_stack_bottom_frame.bind(callDestroy): any)
+  : (null: any);
+
+const callLazyInit = {
+  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
+    const payload = lazy._payload;
+    const init = lazy._init;
+    return init(payload);
+  },
+};
+
+export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit): any)
+  : (null: any);
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js
new file mode 100644
index 00000000000..1fae90f07b1
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.js
@@ -0,0 +1,1224 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
+
+import {
+  LayoutStatic,
+  Update,
+  Snapshot,
+  MountLayoutDev,
+} from './ReactFiberFlags';
+import {
+  disableLegacyContext,
+  enableSchedulingProfiler,
+} from 'shared/ReactFeatureFlags';
+import ReactStrictModeWarnings from './ReactStrictModeWarnings';
+import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
+import shallowEqual from 'shared/shallowEqual';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import assign from 'shared/assign';
+import isArray from 'shared/isArray';
+import {REACT_CONTEXT_TYPE, REACT_CONSUMER_TYPE} from 'shared/ReactSymbols';
+
+import {NoMode, StrictLegacyMode, StrictEffectsMode} from './ReactTypeOfMode';
+
+import {
+  enqueueUpdate,
+  entangleTransitions,
+  processUpdateQueue,
+  checkHasForceUpdateAfterProcessing,
+  resetHasForceUpdateBeforeProcessing,
+  createUpdate,
+  ReplaceState,
+  ForceUpdate,
+  initializeUpdateQueue,
+  cloneUpdateQueue,
+  suspendIfUpdateReadFromEntangledAsyncAction,
+} from './ReactFiberClassUpdateQueue';
+import {NoLanes} from './ReactFiberLane';
+import {
+  cacheContext,
+  getMaskedContext,
+  getUnmaskedContext,
+  hasContextChanged,
+  emptyContextObject,
+} from './ReactFiberLegacyContext';
+import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
+import {requestUpdateLane, scheduleUpdateOnFiber} from './ReactFiberWorkLoop';
+import {
+  markForceUpdateScheduled,
+  markStateUpdateScheduled,
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook';
+import {startUpdateTimerByLane} from './ReactProfilerTimer';
+
+const fakeInternalInstance = {};
+
+let didWarnAboutStateAssignmentForComponent;
+let didWarnAboutUninitializedState;
+let didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
+let didWarnAboutLegacyLifecyclesAndDerivedState;
+let didWarnAboutUndefinedDerivedState;
+let didWarnAboutDirectlyAssigningPropsToState;
+let didWarnAboutContextTypeAndContextTypes;
+let didWarnAboutContextTypes;
+let didWarnAboutChildContextTypes;
+let didWarnAboutInvalidateContextType;
+let didWarnOnInvalidCallback;
+
+if (__DEV__) {
+  didWarnAboutStateAssignmentForComponent = new Set<string>();
+  didWarnAboutUninitializedState = new Set<string>();
+  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set<string>();
+  didWarnAboutLegacyLifecyclesAndDerivedState = new Set<string>();
+  didWarnAboutDirectlyAssigningPropsToState = new Set<string>();
+  didWarnAboutUndefinedDerivedState = new Set<string>();
+  didWarnAboutContextTypeAndContextTypes = new Set<string>();
+  didWarnAboutContextTypes = new Set<mixed>();
+  didWarnAboutChildContextTypes = new Set<mixed>();
+  didWarnAboutInvalidateContextType = new Set<string>();
+  didWarnOnInvalidCallback = new Set<string>();
+
+  Object.freeze(fakeInternalInstance);
+}
+
+function warnOnInvalidCallback(callback: mixed) {
+  if (__DEV__) {
+    if (callback === null || typeof callback === 'function') {
+      return;
+    }
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const key = String(callback);
+    if (!didWarnOnInvalidCallback.has(key)) {
+      didWarnOnInvalidCallback.add(key);
+      console.error(
+        'Expected the last optional `callback` argument to be a ' +
+          'function. Instead received: %s.',
+        callback,
+      );
+    }
+  }
+}
+
+function warnOnUndefinedDerivedState(type: any, partialState: any) {
+  if (__DEV__) {
+    if (partialState === undefined) {
+      const componentName = getComponentNameFromType(type) || 'Component';
+      if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
+        didWarnAboutUndefinedDerivedState.add(componentName);
+        console.error(
+          '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
+            'You have returned undefined.',
+          componentName,
+        );
+      }
+    }
+  }
+}
+
+function applyDerivedStateFromProps(
+  workInProgress: Fiber,
+  ctor: any,
+  getDerivedStateFromProps: (props: any, state: any) => any,
+  nextProps: any,
+) {
+  const prevState = workInProgress.memoizedState;
+  let partialState = getDerivedStateFromProps(nextProps, prevState);
+  if (__DEV__) {
+    if (workInProgress.mode & StrictLegacyMode) {
+      setIsStrictModeForDevtools(true);
+      try {
+        // Invoke the function an extra time to help detect side-effects.
+        partialState = getDerivedStateFromProps(nextProps, prevState);
+      } finally {
+        setIsStrictModeForDevtools(false);
+      }
+    }
+    warnOnUndefinedDerivedState(ctor, partialState);
+  }
+  // Merge the partial state and the previous state.
+  const memoizedState =
+    partialState === null || partialState === undefined
+      ? prevState
+      : assign({}, prevState, partialState);
+  workInProgress.memoizedState = memoizedState;
+
+  // Once the update queue is empty, persist the derived state onto the
+  // base state.
+  if (workInProgress.lanes === NoLanes) {
+    // Queue is always non-null for classes
+    const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);
+    updateQueue.baseState = memoizedState;
+  }
+}
+
+const classComponentUpdater = {
+  // $FlowFixMe[missing-local-annot]
+  enqueueSetState(inst: any, payload: any, callback) {
+    const fiber = getInstance(inst);
+    const lane = requestUpdateLane(fiber);
+
+    const update = createUpdate(lane);
+    update.payload = payload;
+    if (callback !== undefined && callback !== null) {
+      if (__DEV__) {
+        warnOnInvalidCallback(callback);
+      }
+      update.callback = callback;
+    }
+
+    const root = enqueueUpdate(fiber, update, lane);
+    if (root !== null) {
+      startUpdateTimerByLane(lane, 'this.setState()', fiber);
+      scheduleUpdateOnFiber(root, fiber, lane);
+      entangleTransitions(root, fiber, lane);
+    }
+
+    if (enableSchedulingProfiler) {
+      markStateUpdateScheduled(fiber, lane);
+    }
+  },
+  enqueueReplaceState(inst: any, payload: any, callback: null) {
+    const fiber = getInstance(inst);
+    const lane = requestUpdateLane(fiber);
+
+    const update = createUpdate(lane);
+    update.tag = ReplaceState;
+    update.payload = payload;
+
+    if (callback !== undefined && callback !== null) {
+      if (__DEV__) {
+        warnOnInvalidCallback(callback);
+      }
+      update.callback = callback;
+    }
+
+    const root = enqueueUpdate(fiber, update, lane);
+    if (root !== null) {
+      startUpdateTimerByLane(lane, 'this.replaceState()', fiber);
+      scheduleUpdateOnFiber(root, fiber, lane);
+      entangleTransitions(root, fiber, lane);
+    }
+
+    if (enableSchedulingProfiler) {
+      markStateUpdateScheduled(fiber, lane);
+    }
+  },
+  // $FlowFixMe[missing-local-annot]
+  enqueueForceUpdate(inst: any, callback) {
+    const fiber = getInstance(inst);
+    const lane = requestUpdateLane(fiber);
+
+    const update = createUpdate(lane);
+    update.tag = ForceUpdate;
+
+    if (callback !== undefined && callback !== null) {
+      if (__DEV__) {
+        warnOnInvalidCallback(callback);
+      }
+      update.callback = callback;
+    }
+
+    const root = enqueueUpdate(fiber, update, lane);
+    if (root !== null) {
+      startUpdateTimerByLane(lane, 'this.forceUpdate()', fiber);
+      scheduleUpdateOnFiber(root, fiber, lane);
+      entangleTransitions(root, fiber, lane);
+    }
+
+    if (enableSchedulingProfiler) {
+      markForceUpdateScheduled(fiber, lane);
+    }
+  },
+};
+
+function checkShouldComponentUpdate(
+  workInProgress: Fiber,
+  ctor: any,
+  oldProps: any,
+  newProps: any,
+  oldState: any,
+  newState: any,
+  nextContext: any,
+) {
+  const instance = workInProgress.stateNode;
+  if (typeof instance.shouldComponentUpdate === 'function') {
+    let shouldUpdate = instance.shouldComponentUpdate(
+      newProps,
+      newState,
+      nextContext,
+    );
+    if (__DEV__) {
+      if (workInProgress.mode & StrictLegacyMode) {
+        setIsStrictModeForDevtools(true);
+        try {
+          // Invoke the function an extra time to help detect side-effects.
+          shouldUpdate = instance.shouldComponentUpdate(
+            newProps,
+            newState,
+            nextContext,
+          );
+        } finally {
+          setIsStrictModeForDevtools(false);
+        }
+      }
+      if (shouldUpdate === undefined) {
+        console.error(
+          '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
+            'boolean value. Make sure to return true or false.',
+          getComponentNameFromType(ctor) || 'Component',
+        );
+      }
+    }
+
+    return shouldUpdate;
+  }
+
+  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
+    return (
+      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
+    );
+  }
+
+  return true;
+}
+
+function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
+  const instance = workInProgress.stateNode;
+  if (__DEV__) {
+    const name = getComponentNameFromType(ctor) || 'Component';
+    const renderPresent = instance.render;
+
+    if (!renderPresent) {
+      if (ctor.prototype && typeof ctor.prototype.render === 'function') {
+        console.error(
+          'No `render` method found on the %s ' +
+            'instance: did you accidentally return an object from the constructor?',
+          name,
+        );
+      } else {
+        console.error(
+          'No `render` method found on the %s ' +
+            'instance: you may have forgotten to define `render`.',
+          name,
+        );
+      }
+    }
+
+    if (
+      instance.getInitialState &&
+      !instance.getInitialState.isReactClassApproved &&
+      !instance.state
+    ) {
+      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.contextType) {
+      console.error(
+        'contextType was defined as an instance property on %s. Use a static ' +
+          'property to define contextType instead.',
+        name,
+      );
+    }
+
+    if (disableLegacyContext) {
+      if (ctor.childContextTypes && !didWarnAboutChildContextTypes.has(ctor)) {
+        didWarnAboutChildContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy childContextTypes API which was removed in React 19. ' +
+            'Use React.createContext() instead. (https://react.dev/link/legacy-context)',
+          name,
+        );
+      }
+      if (ctor.contextTypes && !didWarnAboutContextTypes.has(ctor)) {
+        didWarnAboutContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy contextTypes API which was removed in React 19. ' +
+            'Use React.createContext() with static contextType instead. ' +
+            '(https://react.dev/link/legacy-context)',
+          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 (ctor.childContextTypes && !didWarnAboutChildContextTypes.has(ctor)) {
+        didWarnAboutChildContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy childContextTypes API which will soon be removed. ' +
+            'Use React.createContext() instead. (https://react.dev/link/legacy-context)',
+          name,
+        );
+      }
+      if (ctor.contextTypes && !didWarnAboutContextTypes.has(ctor)) {
+        didWarnAboutContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy contextTypes API which will soon be removed. ' +
+            'Use React.createContext() with static contextType instead. ' +
+            '(https://react.dev/link/legacy-context)',
+          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'
+    ) {
+      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.',
+        getComponentNameFromType(ctor) || 'A pure component',
+      );
+    }
+    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;
+    if (instance.props !== undefined && hasMutatedProps) {
+      console.error(
+        'When calling super() in `%s`, make sure to pass ' +
+          "up the same props that your component's constructor was passed.",
+        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' &&
+      typeof instance.componentDidUpdate !== 'function' &&
+      !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)
+    ) {
+      didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
+      console.error(
+        '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
+          'This component defines getSnapshotBeforeUpdate() only.',
+        getComponentNameFromType(ctor),
+      );
+    }
+
+    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.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,
+      );
+    }
+  }
+}
+
+function constructClassInstance(
+  workInProgress: Fiber,
+  ctor: any,
+  props: any,
+): any {
+  let isLegacyContextConsumer = false;
+  let unmaskedContext = emptyContextObject;
+  let context = emptyContextObject;
+  const contextType = ctor.contextType;
+
+  if (__DEV__) {
+    if ('contextType' in ctor) {
+      const isValid =
+        // Allow null for conditional declaration
+        contextType === null ||
+        (contextType !== undefined &&
+          contextType.$$typeof === REACT_CONTEXT_TYPE);
+
+      if (!isValid && !didWarnAboutInvalidateContextType.has(ctor)) {
+        didWarnAboutInvalidateContextType.add(ctor);
+
+        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_CONSUMER_TYPE) {
+          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',
+          getComponentNameFromType(ctor) || 'Component',
+          addendum,
+        );
+      }
+    }
+  }
+
+  if (typeof contextType === 'object' && contextType !== null) {
+    context = readContext((contextType: any));
+  } else if (!disableLegacyContext) {
+    unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
+    const contextTypes = ctor.contextTypes;
+    isLegacyContextConsumer =
+      contextTypes !== null && contextTypes !== undefined;
+    context = isLegacyContextConsumer
+      ? getMaskedContext(workInProgress, unmaskedContext)
+      : emptyContextObject;
+  }
+
+  let instance = new ctor(props, context);
+  // Instantiate twice to help detect side-effects.
+  if (__DEV__) {
+    if (workInProgress.mode & StrictLegacyMode) {
+      setIsStrictModeForDevtools(true);
+      try {
+        instance = new ctor(props, context);
+      } finally {
+        setIsStrictModeForDevtools(false);
+      }
+    }
+  }
+
+  const state = (workInProgress.memoizedState =
+    instance.state !== null && instance.state !== undefined
+      ? instance.state
+      : null);
+  instance.updater = classComponentUpdater;
+  workInProgress.stateNode = instance;
+  // The instance needs access to the fiber so that it can schedule updates
+  setInstance(instance, workInProgress);
+  if (__DEV__) {
+    instance._reactInternalInstance = fakeInternalInstance;
+  }
+
+  if (__DEV__) {
+    if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
+      const componentName = getComponentNameFromType(ctor) || 'Component';
+      if (!didWarnAboutUninitializedState.has(componentName)) {
+        didWarnAboutUninitializedState.add(componentName);
+        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`. ' +
+            'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
+          componentName,
+          instance.state === null ? 'null' : 'undefined',
+          componentName,
+        );
+      }
+    }
+
+    // If new component APIs are defined, "unsafe" lifecycles won't be called.
+    // Warn about these lifecycles if they are present.
+    // Don't warn about react-lifecycles-compat polyfilled methods though.
+    if (
+      typeof ctor.getDerivedStateFromProps === 'function' ||
+      typeof instance.getSnapshotBeforeUpdate === 'function'
+    ) {
+      let foundWillMountName = null;
+      let foundWillReceivePropsName = null;
+      let foundWillUpdateName = null;
+      if (
+        typeof instance.componentWillMount === 'function' &&
+        instance.componentWillMount.__suppressDeprecationWarning !== true
+      ) {
+        foundWillMountName = 'componentWillMount';
+      } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
+        foundWillMountName = 'UNSAFE_componentWillMount';
+      }
+      if (
+        typeof instance.componentWillReceiveProps === 'function' &&
+        instance.componentWillReceiveProps.__suppressDeprecationWarning !== true
+      ) {
+        foundWillReceivePropsName = 'componentWillReceiveProps';
+      } else if (
+        typeof instance.UNSAFE_componentWillReceiveProps === 'function'
+      ) {
+        foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
+      }
+      if (
+        typeof instance.componentWillUpdate === 'function' &&
+        instance.componentWillUpdate.__suppressDeprecationWarning !== true
+      ) {
+        foundWillUpdateName = 'componentWillUpdate';
+      } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
+        foundWillUpdateName = 'UNSAFE_componentWillUpdate';
+      }
+      if (
+        foundWillMountName !== null ||
+        foundWillReceivePropsName !== null ||
+        foundWillUpdateName !== null
+      ) {
+        const componentName = getComponentNameFromType(ctor) || 'Component';
+        const newApiName =
+          typeof ctor.getDerivedStateFromProps === 'function'
+            ? 'getDerivedStateFromProps()'
+            : 'getSnapshotBeforeUpdate()';
+        if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(componentName)) {
+          didWarnAboutLegacyLifecyclesAndDerivedState.add(componentName);
+          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://react.dev/link/unsafe-component-lifecycles',
+            componentName,
+            newApiName,
+            foundWillMountName !== null ? `\n  ${foundWillMountName}` : '',
+            foundWillReceivePropsName !== null
+              ? `\n  ${foundWillReceivePropsName}`
+              : '',
+            foundWillUpdateName !== null ? `\n  ${foundWillUpdateName}` : '',
+          );
+        }
+      }
+    }
+  }
+
+  // Cache unmasked context so we can avoid recreating masked context unless necessary.
+  // ReactFiberLegacyContext usually updates this cache but can't for newly-created instances.
+  if (isLegacyContextConsumer) {
+    cacheContext(workInProgress, unmaskedContext, context);
+  }
+
+  return instance;
+}
+
+function callComponentWillMount(workInProgress: Fiber, instance: any) {
+  const oldState = instance.state;
+
+  if (typeof instance.componentWillMount === 'function') {
+    instance.componentWillMount();
+  }
+  if (typeof instance.UNSAFE_componentWillMount === 'function') {
+    instance.UNSAFE_componentWillMount();
+  }
+
+  if (oldState !== instance.state) {
+    if (__DEV__) {
+      console.error(
+        '%s.componentWillMount(): Assigning directly to this.state is ' +
+          "deprecated (except inside a component's " +
+          'constructor). Use setState instead.',
+        getComponentNameFromFiber(workInProgress) || 'Component',
+      );
+    }
+    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
+  }
+}
+
+function callComponentWillReceiveProps(
+  workInProgress: Fiber,
+  instance: any,
+  newProps: any,
+  nextContext: any,
+) {
+  const oldState = instance.state;
+  if (typeof instance.componentWillReceiveProps === 'function') {
+    instance.componentWillReceiveProps(newProps, nextContext);
+  }
+  if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
+    instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);
+  }
+
+  if (instance.state !== oldState) {
+    if (__DEV__) {
+      const componentName =
+        getComponentNameFromFiber(workInProgress) || 'Component';
+      if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
+        didWarnAboutStateAssignmentForComponent.add(componentName);
+        console.error(
+          '%s.componentWillReceiveProps(): Assigning directly to ' +
+            "this.state is deprecated (except inside a component's " +
+            'constructor). Use setState instead.',
+          componentName,
+        );
+      }
+    }
+    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
+  }
+}
+
+// Invokes the mount life-cycles on a previously never rendered instance.
+function mountClassInstance(
+  workInProgress: Fiber,
+  ctor: any,
+  newProps: any,
+  renderLanes: Lanes,
+): void {
+  if (__DEV__) {
+    checkClassInstance(workInProgress, ctor, newProps);
+  }
+
+  const instance = workInProgress.stateNode;
+  instance.props = newProps;
+  instance.state = workInProgress.memoizedState;
+  instance.refs = {};
+
+  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);
+  }
+
+  if (__DEV__) {
+    if (instance.state === newProps) {
+      const componentName = getComponentNameFromType(ctor) || 'Component';
+      if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
+        didWarnAboutDirectlyAssigningPropsToState.add(componentName);
+        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.',
+          componentName,
+        );
+      }
+    }
+
+    if (workInProgress.mode & StrictLegacyMode) {
+      ReactStrictModeWarnings.recordLegacyContextWarning(
+        workInProgress,
+        instance,
+      );
+    }
+
+    ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
+      workInProgress,
+      instance,
+    );
+  }
+
+  instance.state = workInProgress.memoizedState;
+
+  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
+  if (typeof getDerivedStateFromProps === 'function') {
+    applyDerivedStateFromProps(
+      workInProgress,
+      ctor,
+      getDerivedStateFromProps,
+      newProps,
+    );
+    instance.state = workInProgress.memoizedState;
+  }
+
+  // In order to support react-lifecycles-compat polyfilled components,
+  // Unsafe lifecycles should not be invoked for components using the new APIs.
+  if (
+    typeof ctor.getDerivedStateFromProps !== 'function' &&
+    typeof instance.getSnapshotBeforeUpdate !== 'function' &&
+    (typeof instance.UNSAFE_componentWillMount === 'function' ||
+      typeof instance.componentWillMount === 'function')
+  ) {
+    callComponentWillMount(workInProgress, instance);
+    // If we had additional state updates during this life-cycle, let's
+    // process them now.
+    processUpdateQueue(workInProgress, newProps, instance, renderLanes);
+    suspendIfUpdateReadFromEntangledAsyncAction();
+    instance.state = workInProgress.memoizedState;
+  }
+
+  if (typeof instance.componentDidMount === 'function') {
+    workInProgress.flags |= Update | LayoutStatic;
+  }
+  if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
+    workInProgress.flags |= MountLayoutDev;
+  }
+}
+
+function resumeMountClassInstance(
+  workInProgress: Fiber,
+  ctor: any,
+  newProps: any,
+  renderLanes: Lanes,
+): boolean {
+  const instance = workInProgress.stateNode;
+
+  const unresolvedOldProps = workInProgress.memoizedProps;
+  const oldProps = resolveClassComponentProps(ctor, unresolvedOldProps);
+  instance.props = oldProps;
+
+  const oldContext = instance.context;
+  const contextType = ctor.contextType;
+  let nextContext = emptyContextObject;
+  if (typeof contextType === 'object' && contextType !== null) {
+    nextContext = readContext(contextType);
+  } else if (!disableLegacyContext) {
+    const nextLegacyUnmaskedContext = getUnmaskedContext(
+      workInProgress,
+      ctor,
+      true,
+    );
+    nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);
+  }
+
+  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
+  const hasNewLifecycles =
+    typeof getDerivedStateFromProps === 'function' ||
+    typeof instance.getSnapshotBeforeUpdate === 'function';
+
+  // When comparing whether props changed, we should compare using the
+  // unresolved props object that is stored on the fiber, rather than the
+  // one that gets assigned to the instance, because that object may have been
+  // cloned to resolve default props and/or remove `ref`.
+  const unresolvedNewProps = workInProgress.pendingProps;
+  const didReceiveNewProps = unresolvedNewProps !== unresolvedOldProps;
+
+  // Note: During these life-cycles, instance.props/instance.state are what
+  // ever the previously attempted to render - not the "current". However,
+  // during componentDidUpdate we pass the "current" props.
+
+  // In order to support react-lifecycles-compat polyfilled components,
+  // Unsafe lifecycles should not be invoked for components using the new APIs.
+  if (
+    !hasNewLifecycles &&
+    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||
+      typeof instance.componentWillReceiveProps === 'function')
+  ) {
+    if (didReceiveNewProps || oldContext !== nextContext) {
+      callComponentWillReceiveProps(
+        workInProgress,
+        instance,
+        newProps,
+        nextContext,
+      );
+    }
+  }
+
+  resetHasForceUpdateBeforeProcessing();
+
+  const oldState = workInProgress.memoizedState;
+  let newState = (instance.state = oldState);
+  processUpdateQueue(workInProgress, newProps, instance, renderLanes);
+  suspendIfUpdateReadFromEntangledAsyncAction();
+  newState = workInProgress.memoizedState;
+  if (
+    !didReceiveNewProps &&
+    oldState === newState &&
+    !hasContextChanged() &&
+    !checkHasForceUpdateAfterProcessing()
+  ) {
+    // If an update was already in progress, we should schedule an Update
+    // effect even though we're bailing out, so that cWU/cDU are called.
+    if (typeof instance.componentDidMount === 'function') {
+      workInProgress.flags |= Update | LayoutStatic;
+    }
+    if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
+      workInProgress.flags |= MountLayoutDev;
+    }
+    return false;
+  }
+
+  if (typeof getDerivedStateFromProps === 'function') {
+    applyDerivedStateFromProps(
+      workInProgress,
+      ctor,
+      getDerivedStateFromProps,
+      newProps,
+    );
+    newState = workInProgress.memoizedState;
+  }
+
+  const shouldUpdate =
+    checkHasForceUpdateAfterProcessing() ||
+    checkShouldComponentUpdate(
+      workInProgress,
+      ctor,
+      oldProps,
+      newProps,
+      oldState,
+      newState,
+      nextContext,
+    );
+
+  if (shouldUpdate) {
+    // In order to support react-lifecycles-compat polyfilled components,
+    // Unsafe lifecycles should not be invoked for components using the new APIs.
+    if (
+      !hasNewLifecycles &&
+      (typeof instance.UNSAFE_componentWillMount === 'function' ||
+        typeof instance.componentWillMount === 'function')
+    ) {
+      if (typeof instance.componentWillMount === 'function') {
+        instance.componentWillMount();
+      }
+      if (typeof instance.UNSAFE_componentWillMount === 'function') {
+        instance.UNSAFE_componentWillMount();
+      }
+    }
+    if (typeof instance.componentDidMount === 'function') {
+      workInProgress.flags |= Update | LayoutStatic;
+    }
+    if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
+      workInProgress.flags |= MountLayoutDev;
+    }
+  } else {
+    // If an update was already in progress, we should schedule an Update
+    // effect even though we're bailing out, so that cWU/cDU are called.
+    if (typeof instance.componentDidMount === 'function') {
+      workInProgress.flags |= Update | LayoutStatic;
+    }
+    if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
+      workInProgress.flags |= MountLayoutDev;
+    }
+
+    // If shouldComponentUpdate returned false, we should still update the
+    // memoized state to indicate that this work can be reused.
+    workInProgress.memoizedProps = newProps;
+    workInProgress.memoizedState = newState;
+  }
+
+  // Update the existing instance's state, props, and context pointers even
+  // if shouldComponentUpdate returns false.
+  instance.props = newProps;
+  instance.state = newState;
+  instance.context = nextContext;
+
+  return shouldUpdate;
+}
+
+// Invokes the update life-cycles and returns false if it shouldn't rerender.
+function updateClassInstance(
+  current: Fiber,
+  workInProgress: Fiber,
+  ctor: any,
+  newProps: any,
+  renderLanes: Lanes,
+): boolean {
+  const instance = workInProgress.stateNode;
+
+  cloneUpdateQueue(current, workInProgress);
+
+  const unresolvedOldProps = workInProgress.memoizedProps;
+  const oldProps = resolveClassComponentProps(ctor, unresolvedOldProps);
+  instance.props = oldProps;
+  const unresolvedNewProps = workInProgress.pendingProps;
+
+  const oldContext = instance.context;
+  const contextType = ctor.contextType;
+  let nextContext = emptyContextObject;
+  if (typeof contextType === 'object' && contextType !== null) {
+    nextContext = readContext(contextType);
+  } else if (!disableLegacyContext) {
+    const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
+    nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);
+  }
+
+  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
+  const hasNewLifecycles =
+    typeof getDerivedStateFromProps === 'function' ||
+    typeof instance.getSnapshotBeforeUpdate === 'function';
+
+  // Note: During these life-cycles, instance.props/instance.state are what
+  // ever the previously attempted to render - not the "current". However,
+  // during componentDidUpdate we pass the "current" props.
+
+  // In order to support react-lifecycles-compat polyfilled components,
+  // Unsafe lifecycles should not be invoked for components using the new APIs.
+  if (
+    !hasNewLifecycles &&
+    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||
+      typeof instance.componentWillReceiveProps === 'function')
+  ) {
+    if (
+      unresolvedOldProps !== unresolvedNewProps ||
+      oldContext !== nextContext
+    ) {
+      callComponentWillReceiveProps(
+        workInProgress,
+        instance,
+        newProps,
+        nextContext,
+      );
+    }
+  }
+
+  resetHasForceUpdateBeforeProcessing();
+
+  const oldState = workInProgress.memoizedState;
+  let newState = (instance.state = oldState);
+  processUpdateQueue(workInProgress, newProps, instance, renderLanes);
+  suspendIfUpdateReadFromEntangledAsyncAction();
+  newState = workInProgress.memoizedState;
+
+  if (
+    unresolvedOldProps === unresolvedNewProps &&
+    oldState === newState &&
+    !hasContextChanged() &&
+    !checkHasForceUpdateAfterProcessing() &&
+    !(
+      current !== null &&
+      current.dependencies !== null &&
+      checkIfContextChanged(current.dependencies)
+    )
+  ) {
+    // If an update was already in progress, we should schedule an Update
+    // effect even though we're bailing out, so that cWU/cDU are called.
+    if (typeof instance.componentDidUpdate === 'function') {
+      if (
+        unresolvedOldProps !== current.memoizedProps ||
+        oldState !== current.memoizedState
+      ) {
+        workInProgress.flags |= Update;
+      }
+    }
+    if (typeof instance.getSnapshotBeforeUpdate === 'function') {
+      if (
+        unresolvedOldProps !== current.memoizedProps ||
+        oldState !== current.memoizedState
+      ) {
+        workInProgress.flags |= Snapshot;
+      }
+    }
+    return false;
+  }
+
+  if (typeof getDerivedStateFromProps === 'function') {
+    applyDerivedStateFromProps(
+      workInProgress,
+      ctor,
+      getDerivedStateFromProps,
+      newProps,
+    );
+    newState = workInProgress.memoizedState;
+  }
+
+  const shouldUpdate =
+    checkHasForceUpdateAfterProcessing() ||
+    checkShouldComponentUpdate(
+      workInProgress,
+      ctor,
+      oldProps,
+      newProps,
+      oldState,
+      newState,
+      nextContext,
+    ) ||
+    // TODO: In some cases, we'll end up checking if context has changed twice,
+    // both before and after `shouldComponentUpdate` has been called. Not ideal,
+    // but I'm loath to refactor this function. This only happens for memoized
+    // components so it's not that common.
+    (current !== null &&
+      current.dependencies !== null &&
+      checkIfContextChanged(current.dependencies));
+
+  if (shouldUpdate) {
+    // In order to support react-lifecycles-compat polyfilled components,
+    // Unsafe lifecycles should not be invoked for components using the new APIs.
+    if (
+      !hasNewLifecycles &&
+      (typeof instance.UNSAFE_componentWillUpdate === 'function' ||
+        typeof instance.componentWillUpdate === 'function')
+    ) {
+      if (typeof instance.componentWillUpdate === 'function') {
+        instance.componentWillUpdate(newProps, newState, nextContext);
+      }
+      if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
+        instance.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
+      }
+    }
+    if (typeof instance.componentDidUpdate === 'function') {
+      workInProgress.flags |= Update;
+    }
+    if (typeof instance.getSnapshotBeforeUpdate === 'function') {
+      workInProgress.flags |= Snapshot;
+    }
+  } else {
+    // If an update was already in progress, we should schedule an Update
+    // effect even though we're bailing out, so that cWU/cDU are called.
+    if (typeof instance.componentDidUpdate === 'function') {
+      if (
+        unresolvedOldProps !== current.memoizedProps ||
+        oldState !== current.memoizedState
+      ) {
+        workInProgress.flags |= Update;
+      }
+    }
+    if (typeof instance.getSnapshotBeforeUpdate === 'function') {
+      if (
+        unresolvedOldProps !== current.memoizedProps ||
+        oldState !== current.memoizedState
+      ) {
+        workInProgress.flags |= Snapshot;
+      }
+    }
+
+    // If shouldComponentUpdate returned false, we should still update the
+    // memoized props/state to indicate that this work can be reused.
+    workInProgress.memoizedProps = newProps;
+    workInProgress.memoizedState = newState;
+  }
+
+  // Update the existing instance's state, props, and context pointers even
+  // if shouldComponentUpdate returns false.
+  instance.props = newProps;
+  instance.state = newState;
+  instance.context = nextContext;
+
+  return shouldUpdate;
+}
+
+export function resolveClassComponentProps(
+  Component: any,
+  baseProps: Object,
+): Object {
+  let newProps = baseProps;
+
+  // Remove ref from the props object, if it exists.
+  if ('ref' in baseProps) {
+    newProps = ({}: any);
+    for (const propName in baseProps) {
+      if (propName !== 'ref') {
+        newProps[propName] = baseProps[propName];
+      }
+    }
+  }
+
+  // Resolve default props.
+  const defaultProps = Component.defaultProps;
+  if (defaultProps) {
+    // We may have already copied the props object above to remove ref. If so,
+    // we can modify that. Otherwise, copy the props object with Object.assign.
+    if (newProps === baseProps) {
+      newProps = assign({}, newProps);
+    }
+    // Taken from old JSX runtime, where this used to live.
+    for (const propName in defaultProps) {
+      if (newProps[propName] === undefined) {
+        newProps[propName] = defaultProps[propName];
+      }
+    }
+  }
+
+  return newProps;
+}
+
+export {
+  constructClassInstance,
+  mountClassInstance,
+  resumeMountClassInstance,
+  updateClassInstance,
+};
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js
new file mode 100644
index 00000000000..23bef1e6b09
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.js
@@ -0,0 +1,763 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// UpdateQueue is a linked list of prioritized updates.
+//
+// Like fibers, update queues come in pairs: a current queue, which represents
+// the visible state of the screen, and a work-in-progress queue, which can be
+// mutated and processed asynchronously before it is committed — a form of
+// double buffering. If a work-in-progress render is discarded before finishing,
+// we create a new work-in-progress by cloning the current queue.
+//
+// Both queues share a persistent, singly-linked list structure. To schedule an
+// update, we append it to the end of both queues. Each queue maintains a
+// pointer to first update in the persistent list that hasn't been processed.
+// The work-in-progress pointer always has a position equal to or greater than
+// the current queue, since we always work on that one. The current queue's
+// pointer is only updated during the commit phase, when we swap in the
+// work-in-progress.
+//
+// For example:
+//
+//   Current pointer:           A - B - C - D - E - F
+//   Work-in-progress pointer:              D - E - F
+//                                          ^
+//                                          The work-in-progress queue has
+//                                          processed more updates than current.
+//
+// The reason we append to both queues is because otherwise we might drop
+// updates without ever processing them. For example, if we only add updates to
+// the work-in-progress queue, some updates could be lost whenever a work-in
+// -progress render restarts by cloning from current. Similarly, if we only add
+// updates to the current queue, the updates will be lost whenever an already
+// in-progress queue commits and swaps with the current queue. However, by
+// adding to both queues, we guarantee that the update will be part of the next
+// work-in-progress. (And because the work-in-progress queue becomes the
+// current queue once it commits, there's no danger of applying the same
+// update twice.)
+//
+// Prioritization
+// --------------
+//
+// Updates are not sorted by priority, but by insertion; new updates are always
+// appended to the end of the list.
+//
+// The priority is still important, though. When processing the update queue
+// during the render phase, only the updates with sufficient priority are
+// included in the result. If we skip an update because it has insufficient
+// priority, it remains in the queue to be processed later, during a lower
+// priority render. Crucially, all updates subsequent to a skipped update also
+// remain in the queue *regardless of their priority*. That means high priority
+// updates are sometimes processed twice, at two separate priorities. We also
+// keep track of a base state, that represents the state before the first
+// update in the queue is applied.
+//
+// For example:
+//
+//   Given a base state of '', and the following queue of updates
+//
+//     A1 - B2 - C1 - D2
+//
+//   where the number indicates the priority, and the update is applied to the
+//   previous state by appending a letter, React will process these updates as
+//   two separate renders, one per distinct priority level:
+//
+//   First render, at priority 1:
+//     Base state: ''
+//     Updates: [A1, C1]
+//     Result state: 'AC'
+//
+//   Second render, at priority 2:
+//     Base state: 'A'            <-  The base state does not include C1,
+//                                    because B2 was skipped.
+//     Updates: [B2, C1, D2]      <-  C1 was rebased on top of B2
+//     Result state: 'ABCD'
+//
+// Because we process updates in insertion order, and rebase high priority
+// updates when preceding updates are skipped, the final result is deterministic
+// regardless of priority. Intermediate state may vary according to system
+// resources, but the final state is always the same.
+
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {Lanes, Lane} from './ReactFiberLane';
+
+import {
+  NoLane,
+  NoLanes,
+  OffscreenLane,
+  isSubsetOfLanes,
+  mergeLanes,
+  removeLanes,
+  isTransitionLane,
+  intersectLanes,
+  markRootEntangled,
+} from './ReactFiberLane';
+import {
+  enterDisallowedContextReadInDEV,
+  exitDisallowedContextReadInDEV,
+} from './ReactFiberNewContext';
+import {
+  Callback,
+  Visibility,
+  ShouldCapture,
+  DidCapture,
+} from './ReactFiberFlags';
+import getComponentNameFromFiber from './getComponentNameFromFiber';
+
+import {StrictLegacyMode} from './ReactTypeOfMode';
+import {
+  markSkippedUpdateLanes,
+  isUnsafeClassRenderPhaseUpdate,
+  getWorkInProgressRootRenderLanes,
+} from './ReactFiberWorkLoop';
+import {
+  enqueueConcurrentClassUpdate,
+  unsafe_markUpdateLaneFromFiberToRoot,
+} from './ReactFiberConcurrentUpdates';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook';
+
+import assign from 'shared/assign';
+import {
+  peekEntangledActionLane,
+  peekEntangledActionThenable,
+} from './ReactFiberAsyncAction';
+
+export type Update<State> = {
+  lane: Lane,
+
+  tag: 0 | 1 | 2 | 3,
+  payload: any,
+  callback: (() => mixed) | null,
+
+  next: Update<State> | null,
+};
+
+export type SharedQueue<State> = {
+  pending: Update<State> | null,
+  lanes: Lanes,
+  hiddenCallbacks: Array<() => mixed> | null,
+};
+
+export type UpdateQueue<State> = {
+  baseState: State,
+  firstBaseUpdate: Update<State> | null,
+  lastBaseUpdate: Update<State> | null,
+  shared: SharedQueue<State>,
+  callbacks: Array<() => mixed> | null,
+};
+
+export const UpdateState = 0;
+export const ReplaceState = 1;
+export const ForceUpdate = 2;
+export const CaptureUpdate = 3;
+
+// Global state that is reset at the beginning of calling `processUpdateQueue`.
+// It should only be read right after calling `processUpdateQueue`, via
+// `checkHasForceUpdateAfterProcessing`.
+let hasForceUpdate = false;
+
+let didWarnUpdateInsideUpdate;
+let currentlyProcessingQueue: ?SharedQueue<$FlowFixMe>;
+export let resetCurrentlyProcessingQueue: () => void;
+if (__DEV__) {
+  didWarnUpdateInsideUpdate = false;
+  currentlyProcessingQueue = null;
+  resetCurrentlyProcessingQueue = () => {
+    currentlyProcessingQueue = null;
+  };
+}
+
+export function initializeUpdateQueue<State>(fiber: Fiber): void {
+  const queue: UpdateQueue<State> = {
+    baseState: fiber.memoizedState,
+    firstBaseUpdate: null,
+    lastBaseUpdate: null,
+    shared: {
+      pending: null,
+      lanes: NoLanes,
+      hiddenCallbacks: null,
+    },
+    callbacks: null,
+  };
+  fiber.updateQueue = 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,
+      firstBaseUpdate: currentQueue.firstBaseUpdate,
+      lastBaseUpdate: currentQueue.lastBaseUpdate,
+      shared: currentQueue.shared,
+      callbacks: null,
+    };
+    workInProgress.updateQueue = clone;
+  }
+}
+
+export function createUpdate(lane: Lane): Update<mixed> {
+  const update: Update<mixed> = {
+    lane,
+
+    tag: UpdateState,
+    payload: null,
+    callback: null,
+
+    next: null,
+  };
+  return update;
+}
+
+export function enqueueUpdate<State>(
+  fiber: Fiber,
+  update: Update<State>,
+  lane: Lane,
+): FiberRoot | null {
+  const updateQueue = fiber.updateQueue;
+  if (updateQueue === null) {
+    // Only occurs if the fiber has been unmounted.
+    return null;
+  }
+
+  const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
+
+  if (__DEV__) {
+    if (
+      currentlyProcessingQueue === sharedQueue &&
+      !didWarnUpdateInsideUpdate
+    ) {
+      const componentName = getComponentNameFromFiber(fiber);
+      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 ' +
+          'callback.\n\nPlease update the following component: %s',
+        componentName,
+      );
+      didWarnUpdateInsideUpdate = true;
+    }
+  }
+
+  if (isUnsafeClassRenderPhaseUpdate(fiber)) {
+    // This is an unsafe render phase update. Add directly to the update
+    // queue so we can process it immediately during the current render.
+    const pending = sharedQueue.pending;
+    if (pending === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+    } else {
+      update.next = pending.next;
+      pending.next = update;
+    }
+    sharedQueue.pending = update;
+
+    // Update the childLanes even though we're most likely already rendering
+    // this fiber. This is for backwards compatibility in the case where you
+    // update a different component during render phase than the one that is
+    // currently renderings (a pattern that is accompanied by a warning).
+    return unsafe_markUpdateLaneFromFiberToRoot(fiber, lane);
+  } else {
+    return enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane);
+  }
+}
+
+export function entangleTransitions(root: FiberRoot, fiber: Fiber, lane: Lane) {
+  const updateQueue = fiber.updateQueue;
+  if (updateQueue === null) {
+    // Only occurs if the fiber has been unmounted.
+    return;
+  }
+
+  const sharedQueue: SharedQueue<mixed> = (updateQueue: any).shared;
+  if (isTransitionLane(lane)) {
+    let queueLanes = sharedQueue.lanes;
+
+    // If any entangled lanes are no longer pending on the root, then they must
+    // have finished. We can remove them from the shared queue, which represents
+    // a superset of the actually pending lanes. In some cases we may entangle
+    // more than we need to, but that's OK. In fact it's worse if we *don't*
+    // entangle when we should.
+    queueLanes = intersectLanes(queueLanes, root.pendingLanes);
+
+    // Entangle the new transition lane with the other transition lanes.
+    const newQueueLanes = mergeLanes(queueLanes, lane);
+    sharedQueue.lanes = newQueueLanes;
+    // Even if queue.lanes already include lane, we don't know for certain if
+    // the lane finished since the last time we entangled it. So we need to
+    // entangle it again, just to be sure.
+    markRootEntangled(root, newQueueLanes);
+  }
+}
+
+export function enqueueCapturedUpdate<State>(
+  workInProgress: Fiber,
+  capturedUpdate: Update<State>,
+) {
+  // Captured updates are updates that are thrown by a child during the render
+  // phase. They should be discarded if the render is aborted. Therefore,
+  // we should only put them on the work-in-progress queue, not the current one.
+  let queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
+
+  // Check if the work-in-progress queue is a clone.
+  const current = workInProgress.alternate;
+  if (current !== null) {
+    const currentQueue: UpdateQueue<State> = (current.updateQueue: any);
+    if (queue === currentQueue) {
+      // The work-in-progress queue is the same as current. This happens when
+      // we bail out on a parent fiber that then captures an error thrown by
+      // a child. Since we want to append the update only to the work-in
+      // -progress queue, we need to clone the updates. We usually clone during
+      // processUpdateQueue, but that didn't happen in this case because we
+      // skipped over the parent when we bailed out.
+      let newFirst = null;
+      let newLast = null;
+      const firstBaseUpdate = queue.firstBaseUpdate;
+      if (firstBaseUpdate !== null) {
+        // Loop through the updates and clone them.
+        let update: Update<State> = firstBaseUpdate;
+        do {
+          const clone: Update<State> = {
+            lane: update.lane,
+
+            tag: update.tag,
+            payload: update.payload,
+            // When this update is rebased, we should not fire its
+            // callback again.
+            callback: null,
+
+            next: null,
+          };
+          if (newLast === null) {
+            newFirst = newLast = clone;
+          } else {
+            newLast.next = clone;
+            newLast = clone;
+          }
+          // $FlowFixMe[incompatible-type] we bail out when we get a null
+          update = update.next;
+        } while (update !== null);
+
+        // Append the captured update the end of the cloned list.
+        if (newLast === null) {
+          newFirst = newLast = capturedUpdate;
+        } else {
+          newLast.next = capturedUpdate;
+          newLast = capturedUpdate;
+        }
+      } else {
+        // There are no base updates.
+        newFirst = newLast = capturedUpdate;
+      }
+      queue = {
+        baseState: currentQueue.baseState,
+        firstBaseUpdate: newFirst,
+        lastBaseUpdate: newLast,
+        shared: currentQueue.shared,
+        callbacks: currentQueue.callbacks,
+      };
+      workInProgress.updateQueue = queue;
+      return;
+    }
+  }
+
+  // Append the update to the end of the list.
+  const lastBaseUpdate = queue.lastBaseUpdate;
+  if (lastBaseUpdate === null) {
+    queue.firstBaseUpdate = capturedUpdate;
+  } else {
+    lastBaseUpdate.next = capturedUpdate;
+  }
+  queue.lastBaseUpdate = capturedUpdate;
+}
+
+function getStateFromUpdate<State>(
+  workInProgress: Fiber,
+  queue: UpdateQueue<State>,
+  update: Update<State>,
+  prevState: State,
+  nextProps: any,
+  instance: any,
+): any {
+  switch (update.tag) {
+    case ReplaceState: {
+      const payload = update.payload;
+      if (typeof payload === 'function') {
+        // Updater function
+        if (__DEV__) {
+          enterDisallowedContextReadInDEV();
+        }
+        const nextState = payload.call(instance, prevState, nextProps);
+        if (__DEV__) {
+          if (workInProgress.mode & StrictLegacyMode) {
+            setIsStrictModeForDevtools(true);
+            try {
+              payload.call(instance, prevState, nextProps);
+            } finally {
+              setIsStrictModeForDevtools(false);
+            }
+          }
+          exitDisallowedContextReadInDEV();
+        }
+        return nextState;
+      }
+      // State object
+      return payload;
+    }
+    case CaptureUpdate: {
+      workInProgress.flags =
+        (workInProgress.flags & ~ShouldCapture) | DidCapture;
+    }
+    // Intentional fallthrough
+    case UpdateState: {
+      const payload = update.payload;
+      let partialState;
+      if (typeof payload === 'function') {
+        // Updater function
+        if (__DEV__) {
+          enterDisallowedContextReadInDEV();
+        }
+        partialState = payload.call(instance, prevState, nextProps);
+        if (__DEV__) {
+          if (workInProgress.mode & StrictLegacyMode) {
+            setIsStrictModeForDevtools(true);
+            try {
+              payload.call(instance, prevState, nextProps);
+            } finally {
+              setIsStrictModeForDevtools(false);
+            }
+          }
+          exitDisallowedContextReadInDEV();
+        }
+      } else {
+        // Partial state object
+        partialState = payload;
+      }
+      if (partialState === null || partialState === undefined) {
+        // Null and undefined are treated as no-ops.
+        return prevState;
+      }
+      // Merge the partial state and the previous state.
+      return assign({}, prevState, partialState);
+    }
+    case ForceUpdate: {
+      hasForceUpdate = true;
+      return prevState;
+    }
+  }
+  return prevState;
+}
+
+let didReadFromEntangledAsyncAction: boolean = false;
+
+// Each call to processUpdateQueue should be accompanied by a call to this. It's
+// only in a separate function because in updateHostRoot, it must happen after
+// all the context stacks have been pushed to, to prevent a stack mismatch. A
+// bit unfortunate.
+export function suspendIfUpdateReadFromEntangledAsyncAction() {
+  // Check if this update is part of a pending async action. If so, we'll
+  // need to suspend until the action has finished, so that it's batched
+  // together with future updates in the same action.
+  // TODO: Once we support hooks inside useMemo (or an equivalent
+  // memoization boundary like Forget), hoist this logic so that it only
+  // suspends if the memo boundary produces a new value.
+  if (didReadFromEntangledAsyncAction) {
+    const entangledActionThenable = peekEntangledActionThenable();
+    if (entangledActionThenable !== null) {
+      // TODO: Instead of the throwing the thenable directly, throw a
+      // special object like `use` does so we can detect if it's captured
+      // by userspace.
+      throw entangledActionThenable;
+    }
+  }
+}
+
+export function processUpdateQueue<State>(
+  workInProgress: Fiber,
+  props: any,
+  instance: any,
+  renderLanes: Lanes,
+): void {
+  didReadFromEntangledAsyncAction = false;
+
+  // This is always non-null on a ClassComponent or HostRoot
+  const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
+
+  hasForceUpdate = false;
+
+  if (__DEV__) {
+    currentlyProcessingQueue = queue.shared;
+  }
+
+  let firstBaseUpdate = queue.firstBaseUpdate;
+  let lastBaseUpdate = queue.lastBaseUpdate;
+
+  // Check if there are pending updates. If so, transfer them to the base queue.
+  let pendingQueue = queue.shared.pending;
+  if (pendingQueue !== null) {
+    queue.shared.pending = null;
+
+    // The pending queue is circular. Disconnect the pointer between first
+    // and last so that it's non-circular.
+    const lastPendingUpdate = pendingQueue;
+    const firstPendingUpdate = lastPendingUpdate.next;
+    lastPendingUpdate.next = null;
+    // Append pending updates to base queue
+    if (lastBaseUpdate === null) {
+      firstBaseUpdate = firstPendingUpdate;
+    } else {
+      lastBaseUpdate.next = firstPendingUpdate;
+    }
+    lastBaseUpdate = lastPendingUpdate;
+
+    // If there's a current queue, and it's different from the base queue, then
+    // we need to transfer the updates to that queue, too. Because the base
+    // queue is a singly-linked list with no cycles, we can append to both
+    // lists and take advantage of structural sharing.
+    // TODO: Pass `current` as argument
+    const current = workInProgress.alternate;
+    if (current !== null) {
+      // This is always non-null on a ClassComponent or HostRoot
+      const currentQueue: UpdateQueue<State> = (current.updateQueue: any);
+      const currentLastBaseUpdate = currentQueue.lastBaseUpdate;
+      if (currentLastBaseUpdate !== lastBaseUpdate) {
+        if (currentLastBaseUpdate === null) {
+          currentQueue.firstBaseUpdate = firstPendingUpdate;
+        } else {
+          currentLastBaseUpdate.next = firstPendingUpdate;
+        }
+        currentQueue.lastBaseUpdate = lastPendingUpdate;
+      }
+    }
+  }
+
+  // These values may change as we process the queue.
+  if (firstBaseUpdate !== null) {
+    // Iterate through the list of updates to compute the result.
+    let newState = queue.baseState;
+    // TODO: Don't need to accumulate this. Instead, we can remove renderLanes
+    // from the original lanes.
+    let newLanes: Lanes = NoLanes;
+
+    let newBaseState = null;
+    let newFirstBaseUpdate = null;
+    let newLastBaseUpdate: null | Update<State> = null;
+
+    let update: Update<State> = firstBaseUpdate;
+    do {
+      // An extra OffscreenLane bit is added to updates that were made to
+      // a hidden tree, so that we can distinguish them from updates that were
+      // already there when the tree was hidden.
+      const updateLane = removeLanes(update.lane, OffscreenLane);
+      const isHiddenUpdate = updateLane !== update.lane;
+
+      // Check if this update was made while the tree was hidden. If so, then
+      // it's not a "base" update and we should disregard the extra base lanes
+      // that were added to renderLanes when we entered the Offscreen tree.
+      const shouldSkipUpdate = isHiddenUpdate
+        ? !isSubsetOfLanes(getWorkInProgressRootRenderLanes(), updateLane)
+        : !isSubsetOfLanes(renderLanes, updateLane);
+
+      if (shouldSkipUpdate) {
+        // 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> = {
+          lane: updateLane,
+
+          tag: update.tag,
+          payload: update.payload,
+          callback: update.callback,
+
+          next: null,
+        };
+        if (newLastBaseUpdate === null) {
+          newFirstBaseUpdate = newLastBaseUpdate = clone;
+          newBaseState = newState;
+        } else {
+          newLastBaseUpdate = newLastBaseUpdate.next = clone;
+        }
+        // Update the remaining priority in the queue.
+        newLanes = mergeLanes(newLanes, updateLane);
+      } else {
+        // This update does have sufficient priority.
+
+        // Check if this update is part of a pending async action. If so,
+        // we'll need to suspend until the action has finished, so that it's
+        // batched together with future updates in the same action.
+        if (updateLane !== NoLane && updateLane === peekEntangledActionLane()) {
+          didReadFromEntangledAsyncAction = true;
+        }
+
+        if (newLastBaseUpdate !== null) {
+          const clone: Update<State> = {
+            // This update is going to be committed so we never want uncommit
+            // it. Using NoLane works because 0 is a subset of all bitmasks, so
+            // this will never be skipped by the check above.
+            lane: NoLane,
+
+            tag: update.tag,
+            payload: update.payload,
+
+            // When this update is rebased, we should not fire its
+            // callback again.
+            callback: null,
+
+            next: null,
+          };
+          newLastBaseUpdate = newLastBaseUpdate.next = clone;
+        }
+
+        // Process this update.
+        newState = getStateFromUpdate(
+          workInProgress,
+          queue,
+          update,
+          newState,
+          props,
+          instance,
+        );
+        const callback = update.callback;
+        if (callback !== null) {
+          workInProgress.flags |= Callback;
+          if (isHiddenUpdate) {
+            workInProgress.flags |= Visibility;
+          }
+          const callbacks = queue.callbacks;
+          if (callbacks === null) {
+            queue.callbacks = [callback];
+          } else {
+            callbacks.push(callback);
+          }
+        }
+      }
+      // $FlowFixMe[incompatible-type] we bail out when we get a null
+      update = update.next;
+      if (update === null) {
+        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.
+          const lastPendingUpdate = pendingQueue;
+          // Intentionally unsound. Pending updates form a circular list, but we
+          // unravel them when transferring them to the base queue.
+          const firstPendingUpdate =
+            ((lastPendingUpdate.next: any): Update<State>);
+          lastPendingUpdate.next = null;
+          update = firstPendingUpdate;
+          queue.lastBaseUpdate = lastPendingUpdate;
+          queue.shared.pending = null;
+        }
+      }
+    } while (true);
+
+    if (newLastBaseUpdate === null) {
+      newBaseState = newState;
+    }
+
+    queue.baseState = ((newBaseState: any): State);
+    queue.firstBaseUpdate = newFirstBaseUpdate;
+    queue.lastBaseUpdate = newLastBaseUpdate;
+
+    if (firstBaseUpdate === null) {
+      // `queue.lanes` is used for entangling transitions. We can set it back to
+      // zero once the queue is empty.
+      queue.shared.lanes = NoLanes;
+    }
+
+    // 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.
+    markSkippedUpdateLanes(newLanes);
+    workInProgress.lanes = newLanes;
+    workInProgress.memoizedState = newState;
+  }
+
+  if (__DEV__) {
+    currentlyProcessingQueue = null;
+  }
+}
+
+function callCallback(callback: () => mixed, context: any) {
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
+  callback.call(context);
+}
+
+export function resetHasForceUpdateBeforeProcessing() {
+  hasForceUpdate = false;
+}
+
+export function checkHasForceUpdateAfterProcessing(): boolean {
+  return hasForceUpdate;
+}
+
+export function deferHiddenCallbacks<State>(
+  updateQueue: UpdateQueue<State>,
+): void {
+  // When an update finishes on a hidden component, its callback should not
+  // be fired until/unless the component is made visible again. Stash the
+  // callback on the shared queue object so it can be fired later.
+  const newHiddenCallbacks = updateQueue.callbacks;
+  if (newHiddenCallbacks !== null) {
+    const existingHiddenCallbacks = updateQueue.shared.hiddenCallbacks;
+    if (existingHiddenCallbacks === null) {
+      updateQueue.shared.hiddenCallbacks = newHiddenCallbacks;
+    } else {
+      updateQueue.shared.hiddenCallbacks =
+        existingHiddenCallbacks.concat(newHiddenCallbacks);
+    }
+  }
+}
+
+export function commitHiddenCallbacks<State>(
+  updateQueue: UpdateQueue<State>,
+  context: any,
+): void {
+  // This component is switching from hidden -> visible. Commit any callbacks
+  // that were previously deferred.
+  const hiddenCallbacks = updateQueue.shared.hiddenCallbacks;
+  if (hiddenCallbacks !== null) {
+    updateQueue.shared.hiddenCallbacks = null;
+    for (let i = 0; i < hiddenCallbacks.length; i++) {
+      const callback = hiddenCallbacks[i];
+      callCallback(callback, context);
+    }
+  }
+}
+
+export function commitCallbacks<State>(
+  updateQueue: UpdateQueue<State>,
+  context: any,
+): void {
+  const callbacks = updateQueue.callbacks;
+  if (callbacks !== null) {
+    updateQueue.callbacks = null;
+    for (let i = 0; i < callbacks.length; i++) {
+      const callback = callbacks[i];
+      callCallback(callback, context);
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberCommitEffects.js b/packages/react-reconciler/src/ReactFiberCommitEffects.js
new file mode 100644
index 00000000000..f7e20fe9261
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCommitEffects.js
@@ -0,0 +1,1044 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ViewTransitionProps,
+  ProfilerProps,
+  ProfilerPhase,
+} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks';
+import type {HookFlags} from './ReactHookEffectTags';
+import type {FragmentInstanceType} from './ReactFiberConfig';
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
+
+import {getViewTransitionName} from './ReactFiberViewTransitionComponent';
+
+import {
+  enableProfilerTimer,
+  enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
+  enableSchedulingProfiler,
+  enableViewTransition,
+  enableFragmentRefs,
+} from 'shared/ReactFeatureFlags';
+import {
+  ClassComponent,
+  Fragment,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  ViewTransitionComponent,
+} from './ReactWorkTags';
+import {NoFlags} from './ReactFiberFlags';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {resolveClassComponentProps} from './ReactFiberClassComponent';
+import {
+  recordEffectDuration,
+  startEffectTimer,
+  isCurrentUpdateNested,
+} from './ReactProfilerTimer';
+import {NoMode, ProfileMode} from './ReactTypeOfMode';
+import {
+  commitCallbacks,
+  commitHiddenCallbacks,
+} from './ReactFiberClassUpdateQueue';
+import {
+  getPublicInstance,
+  createViewTransitionInstance,
+  createFragmentInstance,
+} from './ReactFiberConfig';
+import {
+  captureCommitPhaseError,
+  setIsRunningInsertionEffect,
+} from './ReactFiberWorkLoop';
+import {
+  NoFlags as NoHookEffect,
+  Layout as HookLayout,
+  Insertion as HookInsertion,
+  Passive as HookPassive,
+} from './ReactHookEffectTags';
+import {didWarnAboutReassigningProps} from './ReactFiberBeginWork';
+import {
+  markComponentPassiveEffectMountStarted,
+  markComponentPassiveEffectMountStopped,
+  markComponentPassiveEffectUnmountStarted,
+  markComponentPassiveEffectUnmountStopped,
+  markComponentLayoutEffectMountStarted,
+  markComponentLayoutEffectMountStopped,
+  markComponentLayoutEffectUnmountStarted,
+  markComponentLayoutEffectUnmountStopped,
+} from './ReactFiberDevToolsHook';
+import {
+  callComponentDidMountInDEV,
+  callComponentDidUpdateInDEV,
+  callComponentWillUnmountInDEV,
+  callCreateInDEV,
+  callDestroyInDEV,
+} from './ReactFiberCallUserSpace';
+
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+
+function shouldProfile(current: Fiber): boolean {
+  return (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    (current.mode & ProfileMode) !== NoMode
+  );
+}
+
+export function commitHookLayoutEffects(
+  finishedWork: Fiber,
+  hookFlags: HookFlags,
+) {
+  // At this point layout effects have already been destroyed (during mutation phase).
+  // This is done to prevent sibling component effects from interfering with each other,
+  // e.g. a destroy function in one component should never override a ref set
+  // by a create function in another component during the same commit.
+  if (shouldProfile(finishedWork)) {
+    startEffectTimer();
+    commitHookEffectListMount(hookFlags, finishedWork);
+    recordEffectDuration(finishedWork);
+  } else {
+    commitHookEffectListMount(hookFlags, finishedWork);
+  }
+}
+
+export function commitHookLayoutUnmountEffects(
+  finishedWork: Fiber,
+  nearestMountedAncestor: null | Fiber,
+  hookFlags: HookFlags,
+) {
+  // Layout effects are destroyed during the mutation phase so that all
+  // destroy functions for all fibers are called before any create functions.
+  // This prevents sibling component effects from interfering with each other,
+  // e.g. a destroy function in one component should never override a ref set
+  // by a create function in another component during the same commit.
+  if (shouldProfile(finishedWork)) {
+    startEffectTimer();
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+    recordEffectDuration(finishedWork);
+  } else {
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+  }
+}
+
+export function commitHookEffectListMount(
+  flags: HookFlags,
+  finishedWork: Fiber,
+) {
+  try {
+    const updateQueue: FunctionComponentUpdateQueue | null =
+      (finishedWork.updateQueue: any);
+    const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
+    if (lastEffect !== null) {
+      const firstEffect = lastEffect.next;
+      let effect = firstEffect;
+      do {
+        if ((effect.tag & flags) === flags) {
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectMountStarted(finishedWork);
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectMountStarted(finishedWork);
+            }
+          }
+
+          // Mount
+          let destroy;
+          if (__DEV__) {
+            if ((flags & HookInsertion) !== NoHookEffect) {
+              setIsRunningInsertionEffect(true);
+            }
+            destroy = runWithFiberInDEV(finishedWork, callCreateInDEV, effect);
+            if ((flags & HookInsertion) !== NoHookEffect) {
+              setIsRunningInsertionEffect(false);
+            }
+          } else {
+            const create = effect.create;
+            const inst = effect.inst;
+            destroy = create();
+            inst.destroy = destroy;
+          }
+
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectMountStopped();
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectMountStopped();
+            }
+          }
+
+          if (__DEV__) {
+            if (destroy !== undefined && typeof destroy !== 'function') {
+              let hookName;
+              if ((effect.tag & HookLayout) !== NoFlags) {
+                hookName = 'useLayoutEffect';
+              } else if ((effect.tag & HookInsertion) !== NoFlags) {
+                hookName = 'useInsertionEffect';
+              } else {
+                hookName = 'useEffect';
+              }
+              let addendum;
+              if (destroy === null) {
+                addendum =
+                  ' You returned null. If your effect does not require clean ' +
+                  'up, return undefined (or nothing).';
+                // $FlowFixMe (@poteto) this check is safe on arbitrary non-null/void objects
+              } else if (typeof destroy.then === 'function') {
+                addendum =
+                  '\n\nIt looks like you wrote ' +
+                  hookName +
+                  '(async () => ...) or returned a Promise. ' +
+                  'Instead, write the async function inside your effect ' +
+                  'and call it immediately:\n\n' +
+                  hookName +
+                  '(() => {\n' +
+                  '  async function fetchData() {\n' +
+                  '    // You can await here\n' +
+                  '    const response = await MyAPI.getData(someId);\n' +
+                  '    // ...\n' +
+                  '  }\n' +
+                  '  fetchData();\n' +
+                  `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+                  'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching';
+              } else {
+                // $FlowFixMe[unsafe-addition] (@poteto)
+                addendum = ' You returned: ' + destroy;
+              }
+              runWithFiberInDEV(
+                finishedWork,
+                (n, a) => {
+                  console.error(
+                    '%s must not return anything besides a function, ' +
+                      'which is used for clean-up.%s',
+                    n,
+                    a,
+                  );
+                },
+                hookName,
+                addendum,
+              );
+            }
+          }
+        }
+        effect = effect.next;
+      } while (effect !== firstEffect);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHookEffectListUnmount(
+  flags: HookFlags,
+  finishedWork: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
+  try {
+    const updateQueue: FunctionComponentUpdateQueue | null =
+      (finishedWork.updateQueue: any);
+    const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
+    if (lastEffect !== null) {
+      const firstEffect = lastEffect.next;
+      let effect = firstEffect;
+      do {
+        if ((effect.tag & flags) === flags) {
+          // Unmount
+          const inst = effect.inst;
+          const destroy = inst.destroy;
+          if (destroy !== undefined) {
+            inst.destroy = undefined;
+            if (enableSchedulingProfiler) {
+              if ((flags & HookPassive) !== NoHookEffect) {
+                markComponentPassiveEffectUnmountStarted(finishedWork);
+              } else if ((flags & HookLayout) !== NoHookEffect) {
+                markComponentLayoutEffectUnmountStarted(finishedWork);
+              }
+            }
+
+            if (__DEV__) {
+              if ((flags & HookInsertion) !== NoHookEffect) {
+                setIsRunningInsertionEffect(true);
+              }
+            }
+            safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+            if (__DEV__) {
+              if ((flags & HookInsertion) !== NoHookEffect) {
+                setIsRunningInsertionEffect(false);
+              }
+            }
+
+            if (enableSchedulingProfiler) {
+              if ((flags & HookPassive) !== NoHookEffect) {
+                markComponentPassiveEffectUnmountStopped();
+              } else if ((flags & HookLayout) !== NoHookEffect) {
+                markComponentLayoutEffectUnmountStopped();
+              }
+            }
+          }
+        }
+        effect = effect.next;
+      } while (effect !== firstEffect);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHookPassiveMountEffects(
+  finishedWork: Fiber,
+  hookFlags: HookFlags,
+) {
+  if (shouldProfile(finishedWork)) {
+    startEffectTimer();
+    commitHookEffectListMount(hookFlags, finishedWork);
+    recordEffectDuration(finishedWork);
+  } else {
+    commitHookEffectListMount(hookFlags, finishedWork);
+  }
+}
+
+export function commitHookPassiveUnmountEffects(
+  finishedWork: Fiber,
+  nearestMountedAncestor: null | Fiber,
+  hookFlags: HookFlags,
+) {
+  if (shouldProfile(finishedWork)) {
+    startEffectTimer();
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+    recordEffectDuration(finishedWork);
+  } else {
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+  }
+}
+
+export function commitClassLayoutLifecycles(
+  finishedWork: Fiber,
+  current: Fiber | null,
+) {
+  const instance = finishedWork.stateNode;
+  if (current === null) {
+    // We could update instance props and state here,
+    // but instead we rely on them being set during last render.
+    // TODO: revisit this when we implement resuming.
+    if (__DEV__) {
+      if (
+        !finishedWork.type.defaultProps &&
+        !('ref' in finishedWork.memoizedProps) &&
+        !didWarnAboutReassigningProps
+      ) {
+        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.',
+            getComponentNameFromFiber(finishedWork) || '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.state`. ' +
+              'Please file an issue.',
+            getComponentNameFromFiber(finishedWork) || 'instance',
+          );
+        }
+      }
+    }
+    if (shouldProfile(finishedWork)) {
+      startEffectTimer();
+      if (__DEV__) {
+        runWithFiberInDEV(
+          finishedWork,
+          callComponentDidMountInDEV,
+          finishedWork,
+          instance,
+        );
+      } else {
+        try {
+          instance.componentDidMount();
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
+      }
+      recordEffectDuration(finishedWork);
+    } else {
+      if (__DEV__) {
+        runWithFiberInDEV(
+          finishedWork,
+          callComponentDidMountInDEV,
+          finishedWork,
+          instance,
+        );
+      } else {
+        try {
+          instance.componentDidMount();
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
+      }
+    }
+  } else {
+    const prevProps = resolveClassComponentProps(
+      finishedWork.type,
+      current.memoizedProps,
+    );
+    const prevState = current.memoizedState;
+    // We could update instance props and state here,
+    // but instead we rely on them being set during last render.
+    // TODO: revisit this when we implement resuming.
+    if (__DEV__) {
+      if (
+        !finishedWork.type.defaultProps &&
+        !('ref' in finishedWork.memoizedProps) &&
+        !didWarnAboutReassigningProps
+      ) {
+        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.',
+            getComponentNameFromFiber(finishedWork) || '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.state`. ' +
+              'Please file an issue.',
+            getComponentNameFromFiber(finishedWork) || 'instance',
+          );
+        }
+      }
+    }
+    if (shouldProfile(finishedWork)) {
+      startEffectTimer();
+      if (__DEV__) {
+        runWithFiberInDEV(
+          finishedWork,
+          callComponentDidUpdateInDEV,
+          finishedWork,
+          instance,
+          prevProps,
+          prevState,
+          instance.__reactInternalSnapshotBeforeUpdate,
+        );
+      } else {
+        try {
+          instance.componentDidUpdate(
+            prevProps,
+            prevState,
+            instance.__reactInternalSnapshotBeforeUpdate,
+          );
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
+      }
+      recordEffectDuration(finishedWork);
+    } else {
+      if (__DEV__) {
+        runWithFiberInDEV(
+          finishedWork,
+          callComponentDidUpdateInDEV,
+          finishedWork,
+          instance,
+          prevProps,
+          prevState,
+          instance.__reactInternalSnapshotBeforeUpdate,
+        );
+      } else {
+        try {
+          instance.componentDidUpdate(
+            prevProps,
+            prevState,
+            instance.__reactInternalSnapshotBeforeUpdate,
+          );
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
+      }
+    }
+  }
+}
+
+export function commitClassDidMount(finishedWork: Fiber) {
+  // TODO: Check for LayoutStatic flag
+  const instance = finishedWork.stateNode;
+  if (typeof instance.componentDidMount === 'function') {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        callComponentDidMountInDEV,
+        finishedWork,
+        instance,
+      );
+    } else {
+      try {
+        instance.componentDidMount();
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+    }
+  }
+}
+
+export function commitClassCallbacks(finishedWork: Fiber) {
+  // TODO: I think this is now always non-null by the time it reaches the
+  // commit phase. Consider removing the type check.
+  const updateQueue: UpdateQueue<mixed> | null =
+    (finishedWork.updateQueue: any);
+  if (updateQueue !== null) {
+    const instance = finishedWork.stateNode;
+    if (__DEV__) {
+      if (
+        !finishedWork.type.defaultProps &&
+        !('ref' in finishedWork.memoizedProps) &&
+        !didWarnAboutReassigningProps
+      ) {
+        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.',
+            getComponentNameFromFiber(finishedWork) || '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.state`. ' +
+              'Please file an issue.',
+            getComponentNameFromFiber(finishedWork) || 'instance',
+          );
+        }
+      }
+    }
+    // We could update instance props and state here,
+    // but instead we rely on them being set during last render.
+    // TODO: revisit this when we implement resuming.
+    try {
+      if (__DEV__) {
+        runWithFiberInDEV(finishedWork, commitCallbacks, updateQueue, instance);
+      } else {
+        commitCallbacks(updateQueue, instance);
+      }
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+export function commitClassHiddenCallbacks(finishedWork: Fiber) {
+  // Commit any callbacks that would have fired while the component
+  // was hidden.
+  const updateQueue: UpdateQueue<mixed> | null =
+    (finishedWork.updateQueue: any);
+  if (updateQueue !== null) {
+    const instance = finishedWork.stateNode;
+    try {
+      if (__DEV__) {
+        runWithFiberInDEV(
+          finishedWork,
+          commitHiddenCallbacks,
+          updateQueue,
+          instance,
+        );
+      } else {
+        commitHiddenCallbacks(updateQueue, instance);
+      }
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+export function commitRootCallbacks(finishedWork: Fiber) {
+  // TODO: I think this is now always non-null by the time it reaches the
+  // commit phase. Consider removing the type check.
+  const updateQueue: UpdateQueue<mixed> | null =
+    (finishedWork.updateQueue: any);
+  if (updateQueue !== null) {
+    let instance = null;
+    if (finishedWork.child !== null) {
+      switch (finishedWork.child.tag) {
+        case HostSingleton:
+        case HostComponent:
+          instance = getPublicInstance(finishedWork.child.stateNode);
+          break;
+        case ClassComponent:
+          instance = finishedWork.child.stateNode;
+          break;
+      }
+    }
+    try {
+      if (__DEV__) {
+        runWithFiberInDEV(finishedWork, commitCallbacks, updateQueue, instance);
+      } else {
+        commitCallbacks(updateQueue, instance);
+      }
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
+if (__DEV__) {
+  didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();
+}
+
+function callGetSnapshotBeforeUpdates(
+  instance: any,
+  prevProps: any,
+  prevState: any,
+) {
+  return instance.getSnapshotBeforeUpdate(prevProps, prevState);
+}
+
+export function commitClassSnapshot(finishedWork: Fiber, current: Fiber) {
+  const prevProps = current.memoizedProps;
+  const prevState = current.memoizedState;
+  const instance = finishedWork.stateNode;
+  // We could update instance props and state here,
+  // but instead we rely on them being set during last render.
+  // TODO: revisit this when we implement resuming.
+  if (__DEV__) {
+    if (
+      !finishedWork.type.defaultProps &&
+      !('ref' in finishedWork.memoizedProps) &&
+      !didWarnAboutReassigningProps
+    ) {
+      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.',
+          getComponentNameFromFiber(finishedWork) || '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.state`. ' +
+            'Please file an issue.',
+          getComponentNameFromFiber(finishedWork) || 'instance',
+        );
+      }
+    }
+  }
+  try {
+    const resolvedPrevProps = resolveClassComponentProps(
+      finishedWork.type,
+      prevProps,
+    );
+    let snapshot;
+    if (__DEV__) {
+      snapshot = runWithFiberInDEV(
+        finishedWork,
+        callGetSnapshotBeforeUpdates,
+        instance,
+        resolvedPrevProps,
+        prevState,
+      );
+      const didWarnSet =
+        ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
+      if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
+        didWarnSet.add(finishedWork.type);
+        runWithFiberInDEV(finishedWork, () => {
+          console.error(
+            '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
+              'must be returned. You have returned undefined.',
+            getComponentNameFromFiber(finishedWork),
+          );
+        });
+      }
+    } else {
+      snapshot = callGetSnapshotBeforeUpdates(
+        instance,
+        resolvedPrevProps,
+        prevState,
+      );
+    }
+    instance.__reactInternalSnapshotBeforeUpdate = snapshot;
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+// Capture errors so they don't interrupt unmounting.
+export function safelyCallComponentWillUnmount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: any,
+) {
+  instance.props = resolveClassComponentProps(
+    current.type,
+    current.memoizedProps,
+  );
+  instance.state = current.memoizedState;
+  if (shouldProfile(current)) {
+    startEffectTimer();
+    if (__DEV__) {
+      runWithFiberInDEV(
+        current,
+        callComponentWillUnmountInDEV,
+        current,
+        nearestMountedAncestor,
+        instance,
+      );
+    } else {
+      try {
+        instance.componentWillUnmount();
+      } catch (error) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error);
+      }
+    }
+    recordEffectDuration(current);
+  } else {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        current,
+        callComponentWillUnmountInDEV,
+        current,
+        nearestMountedAncestor,
+        instance,
+      );
+    } else {
+      try {
+        instance.componentWillUnmount();
+      } catch (error) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error);
+      }
+    }
+  }
+}
+
+function commitAttachRef(finishedWork: Fiber) {
+  const ref = finishedWork.ref;
+  if (ref !== null) {
+    let instanceToUse;
+    switch (finishedWork.tag) {
+      case HostHoistable:
+      case HostSingleton:
+      case HostComponent:
+        instanceToUse = getPublicInstance(finishedWork.stateNode);
+        break;
+      case ViewTransitionComponent: {
+        if (enableViewTransition) {
+          const instance: ViewTransitionState = finishedWork.stateNode;
+          const props: ViewTransitionProps = finishedWork.memoizedProps;
+          const name = getViewTransitionName(props, instance);
+          if (instance.ref === null || instance.ref.name !== name) {
+            instance.ref = createViewTransitionInstance(name);
+          }
+          instanceToUse = instance.ref;
+          break;
+        }
+        instanceToUse = finishedWork.stateNode;
+        break;
+      }
+      case Fragment:
+        if (enableFragmentRefs) {
+          const instance: null | FragmentInstanceType = finishedWork.stateNode;
+          if (instance === null) {
+            finishedWork.stateNode = createFragmentInstance(finishedWork);
+          }
+          instanceToUse = finishedWork.stateNode;
+          break;
+        }
+      // Fallthrough
+      default:
+        instanceToUse = finishedWork.stateNode;
+    }
+    if (typeof ref === 'function') {
+      if (shouldProfile(finishedWork)) {
+        try {
+          startEffectTimer();
+          finishedWork.refCleanup = ref(instanceToUse);
+        } finally {
+          recordEffectDuration(finishedWork);
+        }
+      } else {
+        finishedWork.refCleanup = ref(instanceToUse);
+      }
+    } else {
+      if (__DEV__) {
+        // TODO: We should move these warnings to happen during the render
+        // phase (markRef).
+        if (typeof ref === 'string') {
+          console.error('String refs are no longer supported.');
+        } else if (!ref.hasOwnProperty('current')) {
+          console.error(
+            'Unexpected ref object provided for %s. ' +
+              'Use either a ref-setter function or React.createRef().',
+            getComponentNameFromFiber(finishedWork),
+          );
+        }
+      }
+
+      // $FlowFixMe[incompatible-use] unable to narrow type to the non-function case
+      ref.current = instanceToUse;
+    }
+  }
+}
+
+// Capture errors so they don't interrupt mounting.
+export function safelyAttachRef(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(current, commitAttachRef, current);
+    } else {
+      commitAttachRef(current);
+    }
+  } catch (error) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
+  }
+}
+
+export function safelyDetachRef(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
+  const ref = current.ref;
+  const refCleanup = current.refCleanup;
+
+  if (ref !== null) {
+    if (typeof refCleanup === 'function') {
+      try {
+        if (shouldProfile(current)) {
+          try {
+            startEffectTimer();
+            if (__DEV__) {
+              runWithFiberInDEV(current, refCleanup);
+            } else {
+              refCleanup();
+            }
+          } finally {
+            recordEffectDuration(current);
+          }
+        } else {
+          if (__DEV__) {
+            runWithFiberInDEV(current, refCleanup);
+          } else {
+            refCleanup();
+          }
+        }
+      } catch (error) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error);
+      } finally {
+        // `refCleanup` has been called. Nullify all references to it to prevent double invocation.
+        current.refCleanup = null;
+        const finishedWork = current.alternate;
+        if (finishedWork != null) {
+          finishedWork.refCleanup = null;
+        }
+      }
+    } else if (typeof ref === 'function') {
+      try {
+        if (shouldProfile(current)) {
+          try {
+            startEffectTimer();
+            if (__DEV__) {
+              (runWithFiberInDEV(current, ref, null): void);
+            } else {
+              ref(null);
+            }
+          } finally {
+            recordEffectDuration(current);
+          }
+        } else {
+          if (__DEV__) {
+            (runWithFiberInDEV(current, ref, null): void);
+          } else {
+            ref(null);
+          }
+        }
+      } catch (error) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error);
+      }
+    } else {
+      // $FlowFixMe[incompatible-use] unable to narrow type to RefObject
+      ref.current = null;
+    }
+  }
+}
+
+function safelyCallDestroy(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  destroy: (() => void) | (({...}) => void),
+  resource?: {...} | void | null,
+) {
+  // $FlowFixMe[extra-arg] @poteto this is safe either way because the extra arg is ignored if it's not a CRUD effect
+  const destroy_ = resource == null ? destroy : destroy.bind(null, resource);
+  if (__DEV__) {
+    runWithFiberInDEV(
+      current,
+      callDestroyInDEV,
+      current,
+      nearestMountedAncestor,
+      destroy_,
+    );
+  } else {
+    try {
+      // $FlowFixMe(incompatible-call) Already bound to resource
+      destroy_();
+    } catch (error) {
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
+    }
+  }
+}
+
+function commitProfiler(
+  finishedWork: Fiber,
+  current: Fiber | null,
+  commitStartTime: number,
+  effectDuration: number,
+) {
+  const {id, onCommit, onRender} = (finishedWork.memoizedProps: ProfilerProps);
+
+  let phase: ProfilerPhase = current === null ? 'mount' : 'update';
+  if (enableProfilerNestedUpdatePhase) {
+    if (isCurrentUpdateNested()) {
+      phase = 'nested-update';
+    }
+  }
+
+  if (typeof onRender === 'function') {
+    onRender(
+      id,
+      phase,
+      // $FlowFixMe: This should be always a number in profiling mode
+      finishedWork.actualDuration,
+      // $FlowFixMe: This should be always a number in profiling mode
+      finishedWork.treeBaseDuration,
+      // $FlowFixMe: This should be always a number in profiling mode
+      finishedWork.actualStartTime,
+      commitStartTime,
+    );
+  }
+
+  if (enableProfilerCommitHooks) {
+    if (typeof onCommit === 'function') {
+      onCommit(id, phase, effectDuration, commitStartTime);
+    }
+  }
+}
+
+export function commitProfilerUpdate(
+  finishedWork: Fiber,
+  current: Fiber | null,
+  commitStartTime: number,
+  effectDuration: number,
+) {
+  if (enableProfilerTimer) {
+    try {
+      if (__DEV__) {
+        runWithFiberInDEV(
+          finishedWork,
+          commitProfiler,
+          finishedWork,
+          current,
+          commitStartTime,
+          effectDuration,
+        );
+      } else {
+        commitProfiler(finishedWork, current, commitStartTime, effectDuration);
+      }
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+function commitProfilerPostCommitImpl(
+  finishedWork: Fiber,
+  current: Fiber | null,
+  commitStartTime: number,
+  passiveEffectDuration: number,
+): void {
+  const {id, onPostCommit} = finishedWork.memoizedProps;
+
+  let phase = current === null ? 'mount' : 'update';
+  if (enableProfilerNestedUpdatePhase) {
+    if (isCurrentUpdateNested()) {
+      phase = 'nested-update';
+    }
+  }
+
+  if (typeof onPostCommit === 'function') {
+    onPostCommit(id, phase, passiveEffectDuration, commitStartTime);
+  }
+}
+
+export function commitProfilerPostCommit(
+  finishedWork: Fiber,
+  current: Fiber | null,
+  commitStartTime: number,
+  passiveEffectDuration: number,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitProfilerPostCommitImpl,
+        finishedWork,
+        current,
+        commitStartTime,
+        passiveEffectDuration,
+      );
+    } else {
+      commitProfilerPostCommitImpl(
+        finishedWork,
+        current,
+        commitStartTime,
+        passiveEffectDuration,
+      );
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberCommitHostEffects.js b/packages/react-reconciler/src/ReactFiberCommitHostEffects.js
new file mode 100644
index 00000000000..5c7ccf39878
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCommitHostEffects.js
@@ -0,0 +1,822 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  TextInstance,
+  ActivityInstance,
+  SuspenseInstance,
+  Container,
+  ChildSet,
+  FragmentInstanceType,
+} from './ReactFiberConfig';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+
+import {
+  HostRoot,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  HostPortal,
+  DehydratedFragment,
+  Fragment,
+} from './ReactWorkTags';
+import {ContentReset, Placement} from './ReactFiberFlags';
+import {
+  supportsMutation,
+  supportsResources,
+  supportsSingletons,
+  commitMount,
+  commitUpdate,
+  resetTextContent,
+  commitTextUpdate,
+  appendChild,
+  appendChildToContainer,
+  insertBefore,
+  insertInContainerBefore,
+  replaceContainerChildren,
+  hideDehydratedBoundary,
+  hideInstance,
+  hideTextInstance,
+  unhideDehydratedBoundary,
+  unhideInstance,
+  unhideTextInstance,
+  commitHydratedInstance,
+  commitHydratedContainer,
+  commitHydratedActivityInstance,
+  commitHydratedSuspenseInstance,
+  removeChildFromContainer,
+  removeChild,
+  acquireSingletonInstance,
+  releaseSingletonInstance,
+  isSingletonScope,
+  commitNewChildToFragmentInstance,
+  deleteChildFromFragmentInstance,
+} from './ReactFiberConfig';
+import {captureCommitPhaseError} from './ReactFiberWorkLoop';
+import {trackHostMutation} from './ReactFiberMutationTracking';
+
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+import {enableFragmentRefs} from 'shared/ReactFeatureFlags';
+
+export function commitHostMount(finishedWork: Fiber) {
+  const type = finishedWork.type;
+  const props = finishedWork.memoizedProps;
+  const instance: Instance = finishedWork.stateNode;
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitMount,
+        instance,
+        type,
+        props,
+        finishedWork,
+      );
+    } else {
+      commitMount(instance, type, props, finishedWork);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostHydratedInstance(finishedWork: Fiber) {
+  const type = finishedWork.type;
+  const props = finishedWork.memoizedProps;
+  const instance: Instance = finishedWork.stateNode;
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitHydratedInstance,
+        instance,
+        type,
+        props,
+        finishedWork,
+      );
+    } else {
+      commitHydratedInstance(instance, type, props, finishedWork);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostUpdate(
+  finishedWork: Fiber,
+  newProps: any,
+  oldProps: any,
+): void {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitUpdate,
+        finishedWork.stateNode,
+        finishedWork.type,
+        oldProps,
+        newProps,
+        finishedWork,
+      );
+    } else {
+      commitUpdate(
+        finishedWork.stateNode,
+        finishedWork.type,
+        oldProps,
+        newProps,
+        finishedWork,
+      );
+    }
+    // Mutations are tracked manually from within commitUpdate.
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostTextUpdate(
+  finishedWork: Fiber,
+  newText: string,
+  oldText: string,
+) {
+  const textInstance: TextInstance = finishedWork.stateNode;
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitTextUpdate,
+        textInstance,
+        oldText,
+        newText,
+      );
+    } else {
+      commitTextUpdate(textInstance, oldText, newText);
+    }
+    trackHostMutation();
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostResetTextContent(finishedWork: Fiber) {
+  const instance: Instance = finishedWork.stateNode;
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(finishedWork, resetTextContent, instance);
+    } else {
+      resetTextContent(instance);
+    }
+    trackHostMutation();
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitShowHideSuspenseBoundary(node: Fiber, isHidden: boolean) {
+  try {
+    const instance = node.stateNode;
+    if (isHidden) {
+      if (__DEV__) {
+        runWithFiberInDEV(node, hideDehydratedBoundary, instance);
+      } else {
+        hideDehydratedBoundary(instance);
+      }
+    } else {
+      if (__DEV__) {
+        runWithFiberInDEV(node, unhideDehydratedBoundary, node.stateNode);
+      } else {
+        unhideDehydratedBoundary(node.stateNode);
+      }
+    }
+  } catch (error) {
+    captureCommitPhaseError(node, node.return, error);
+  }
+}
+
+export function commitShowHideHostInstance(node: Fiber, isHidden: boolean) {
+  try {
+    const instance = node.stateNode;
+    if (isHidden) {
+      if (__DEV__) {
+        runWithFiberInDEV(node, hideInstance, instance);
+      } else {
+        hideInstance(instance);
+      }
+    } else {
+      if (__DEV__) {
+        runWithFiberInDEV(
+          node,
+          unhideInstance,
+          node.stateNode,
+          node.memoizedProps,
+        );
+      } else {
+        unhideInstance(node.stateNode, node.memoizedProps);
+      }
+    }
+  } catch (error) {
+    captureCommitPhaseError(node, node.return, error);
+  }
+}
+
+export function commitShowHideHostTextInstance(node: Fiber, isHidden: boolean) {
+  try {
+    const instance = node.stateNode;
+    if (isHidden) {
+      if (__DEV__) {
+        runWithFiberInDEV(node, hideTextInstance, instance);
+      } else {
+        hideTextInstance(instance);
+      }
+    } else {
+      if (__DEV__) {
+        runWithFiberInDEV(
+          node,
+          unhideTextInstance,
+          instance,
+          node.memoizedProps,
+        );
+      } else {
+        unhideTextInstance(instance, node.memoizedProps);
+      }
+    }
+    trackHostMutation();
+  } catch (error) {
+    captureCommitPhaseError(node, node.return, error);
+  }
+}
+
+export function commitNewChildToFragmentInstances(
+  fiber: Fiber,
+  parentFragmentInstances: null | Array<FragmentInstanceType>,
+): void {
+  if (
+    fiber.tag !== HostComponent ||
+    // Only run fragment insertion effects for initial insertions
+    fiber.alternate !== null ||
+    parentFragmentInstances === null
+  ) {
+    return;
+  }
+  for (let i = 0; i < parentFragmentInstances.length; i++) {
+    const fragmentInstance = parentFragmentInstances[i];
+    commitNewChildToFragmentInstance(fiber.stateNode, fragmentInstance);
+  }
+}
+
+export function commitFragmentInstanceInsertionEffects(fiber: Fiber): void {
+  let parent = fiber.return;
+  while (parent !== null) {
+    if (isFragmentInstanceParent(parent)) {
+      const fragmentInstance: FragmentInstanceType = parent.stateNode;
+      commitNewChildToFragmentInstance(fiber.stateNode, fragmentInstance);
+    }
+
+    if (isHostParent(parent)) {
+      return;
+    }
+
+    parent = parent.return;
+  }
+}
+
+export function commitFragmentInstanceDeletionEffects(fiber: Fiber): void {
+  let parent = fiber.return;
+  while (parent !== null) {
+    if (isFragmentInstanceParent(parent)) {
+      const fragmentInstance: FragmentInstanceType = parent.stateNode;
+      deleteChildFromFragmentInstance(fiber.stateNode, fragmentInstance);
+    }
+
+    if (isHostParent(parent)) {
+      return;
+    }
+
+    parent = parent.return;
+  }
+}
+
+function isHostParent(fiber: Fiber): boolean {
+  return (
+    fiber.tag === HostComponent ||
+    fiber.tag === HostRoot ||
+    (supportsResources ? fiber.tag === HostHoistable : false) ||
+    (supportsSingletons
+      ? fiber.tag === HostSingleton && isSingletonScope(fiber.type)
+      : false) ||
+    fiber.tag === HostPortal
+  );
+}
+
+function isFragmentInstanceParent(fiber: Fiber): boolean {
+  return fiber && fiber.tag === Fragment && fiber.stateNode !== null;
+}
+
+function getHostSibling(fiber: Fiber): ?Instance {
+  // We're going to search forward into the tree until we find a sibling host
+  // node. Unfortunately, if multiple insertions are done in a row we have to
+  // search past them. This leads to exponential search for the next sibling.
+  // TODO: Find a more efficient way to do this.
+  let node: Fiber = fiber;
+  siblings: while (true) {
+    // If we didn't find anything, let's try the next sibling.
+    while (node.sibling === null) {
+      if (node.return === null || isHostParent(node.return)) {
+        // If we pop out of the root or hit the parent the fiber we are the
+        // last sibling.
+        return null;
+      }
+      // $FlowFixMe[incompatible-type] found when upgrading Flow
+      node = node.return;
+    }
+    node.sibling.return = node.return;
+    node = node.sibling;
+    while (
+      node.tag !== HostComponent &&
+      node.tag !== HostText &&
+      node.tag !== DehydratedFragment
+    ) {
+      // If this is a host singleton we go deeper if it's not a special
+      // singleton scope. If it is a singleton scope we skip over it because
+      // you only insert against this scope when you are already inside of it
+      if (
+        supportsSingletons &&
+        node.tag === HostSingleton &&
+        isSingletonScope(node.type)
+      ) {
+        continue siblings;
+      }
+
+      // If it is not host node and, we might have a host node inside it.
+      // Try to search down until we find one.
+      if (node.flags & Placement) {
+        // If we don't have a child, try the siblings instead.
+        continue siblings;
+      }
+      // If we don't have a child, try the siblings instead.
+      // We also skip portals because they are not part of this host tree.
+      if (node.child === null || node.tag === HostPortal) {
+        continue siblings;
+      } else {
+        node.child.return = node;
+        node = node.child;
+      }
+    }
+    // Check if this host node is stable or about to be placed.
+    if (!(node.flags & Placement)) {
+      // Found it!
+      return node.stateNode;
+    }
+  }
+}
+
+function insertOrAppendPlacementNodeIntoContainer(
+  node: Fiber,
+  before: ?Instance,
+  parent: Container,
+  parentFragmentInstances: null | Array<FragmentInstanceType>,
+): void {
+  const {tag} = node;
+  const isHost = tag === HostComponent || tag === HostText;
+  if (isHost) {
+    const stateNode = node.stateNode;
+    if (before) {
+      insertInContainerBefore(parent, stateNode, before);
+    } else {
+      appendChildToContainer(parent, stateNode);
+    }
+    if (enableFragmentRefs) {
+      commitNewChildToFragmentInstances(node, parentFragmentInstances);
+    }
+    trackHostMutation();
+    return;
+  } else if (tag === HostPortal) {
+    // If the insertion itself is a portal, then we don't want to traverse
+    // down its children. Instead, we'll get insertions from each child in
+    // the portal directly.
+    return;
+  }
+
+  if (
+    (supportsSingletons ? tag === HostSingleton : false) &&
+    isSingletonScope(node.type)
+  ) {
+    // This singleton is the parent of deeper nodes and needs to become
+    // the parent for child insertions and appends
+    parent = node.stateNode;
+    before = null;
+  }
+
+  const child = node.child;
+  if (child !== null) {
+    insertOrAppendPlacementNodeIntoContainer(
+      child,
+      before,
+      parent,
+      parentFragmentInstances,
+    );
+    let sibling = child.sibling;
+    while (sibling !== null) {
+      insertOrAppendPlacementNodeIntoContainer(
+        sibling,
+        before,
+        parent,
+        parentFragmentInstances,
+      );
+      sibling = sibling.sibling;
+    }
+  }
+}
+
+function insertOrAppendPlacementNode(
+  node: Fiber,
+  before: ?Instance,
+  parent: Instance,
+  parentFragmentInstances: null | Array<FragmentInstanceType>,
+): void {
+  const {tag} = node;
+  const isHost = tag === HostComponent || tag === HostText;
+  if (isHost) {
+    const stateNode = node.stateNode;
+    if (before) {
+      insertBefore(parent, stateNode, before);
+    } else {
+      appendChild(parent, stateNode);
+    }
+    if (enableFragmentRefs) {
+      commitNewChildToFragmentInstances(node, parentFragmentInstances);
+    }
+    trackHostMutation();
+    return;
+  } else if (tag === HostPortal) {
+    // If the insertion itself is a portal, then we don't want to traverse
+    // down its children. Instead, we'll get insertions from each child in
+    // the portal directly.
+    return;
+  }
+
+  if (
+    (supportsSingletons ? tag === HostSingleton : false) &&
+    isSingletonScope(node.type)
+  ) {
+    // This singleton is the parent of deeper nodes and needs to become
+    // the parent for child insertions and appends
+    parent = node.stateNode;
+  }
+
+  const child = node.child;
+  if (child !== null) {
+    insertOrAppendPlacementNode(child, before, parent, parentFragmentInstances);
+    let sibling = child.sibling;
+    while (sibling !== null) {
+      insertOrAppendPlacementNode(
+        sibling,
+        before,
+        parent,
+        parentFragmentInstances,
+      );
+      sibling = sibling.sibling;
+    }
+  }
+}
+
+function commitPlacement(finishedWork: Fiber): void {
+  // Recursively insert all host nodes into the parent.
+  let hostParentFiber;
+  let parentFragmentInstances = null;
+  let parentFiber = finishedWork.return;
+  while (parentFiber !== null) {
+    if (enableFragmentRefs && isFragmentInstanceParent(parentFiber)) {
+      const fragmentInstance: FragmentInstanceType = parentFiber.stateNode;
+      if (parentFragmentInstances === null) {
+        parentFragmentInstances = [fragmentInstance];
+      } else {
+        parentFragmentInstances.push(fragmentInstance);
+      }
+    }
+    if (isHostParent(parentFiber)) {
+      hostParentFiber = parentFiber;
+      break;
+    }
+    parentFiber = parentFiber.return;
+  }
+
+  if (!supportsMutation) {
+    if (enableFragmentRefs) {
+      commitImmutablePlacementNodeToFragmentInstances(
+        finishedWork,
+        parentFragmentInstances,
+      );
+    }
+    return;
+  }
+
+  if (hostParentFiber == null) {
+    throw new Error(
+      'Expected to find a host parent. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
+  switch (hostParentFiber.tag) {
+    case HostSingleton: {
+      if (supportsSingletons) {
+        const parent: Instance = hostParentFiber.stateNode;
+        const before = getHostSibling(finishedWork);
+        // We only have the top Fiber that was inserted but we need to recurse down its
+        // children to find all the terminal nodes.
+        insertOrAppendPlacementNode(
+          finishedWork,
+          before,
+          parent,
+          parentFragmentInstances,
+        );
+        break;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      const parent: Instance = hostParentFiber.stateNode;
+      if (hostParentFiber.flags & ContentReset) {
+        // Reset the text content of the parent before doing any insertions
+        resetTextContent(parent);
+        // Clear ContentReset from the effect tag
+        hostParentFiber.flags &= ~ContentReset;
+      }
+
+      const before = getHostSibling(finishedWork);
+      // We only have the top Fiber that was inserted but we need to recurse down its
+      // children to find all the terminal nodes.
+      insertOrAppendPlacementNode(
+        finishedWork,
+        before,
+        parent,
+        parentFragmentInstances,
+      );
+      break;
+    }
+    case HostRoot:
+    case HostPortal: {
+      const parent: Container = hostParentFiber.stateNode.containerInfo;
+      const before = getHostSibling(finishedWork);
+      insertOrAppendPlacementNodeIntoContainer(
+        finishedWork,
+        before,
+        parent,
+        parentFragmentInstances,
+      );
+      break;
+    }
+    default:
+      throw new Error(
+        'Invalid host parent fiber. This error is likely caused by a bug ' +
+          'in React. Please file an issue.',
+      );
+  }
+}
+
+function commitImmutablePlacementNodeToFragmentInstances(
+  finishedWork: Fiber,
+  parentFragmentInstances: null | Array<FragmentInstanceType>,
+): void {
+  if (!enableFragmentRefs) {
+    return;
+  }
+  const isHost = finishedWork.tag === HostComponent;
+  if (isHost) {
+    commitNewChildToFragmentInstances(finishedWork, parentFragmentInstances);
+    return;
+  } else if (finishedWork.tag === HostPortal) {
+    // If the insertion itself is a portal, then we don't want to traverse
+    // down its children. Instead, we'll get insertions from each child in
+    // the portal directly.
+    return;
+  }
+
+  const child = finishedWork.child;
+  if (child !== null) {
+    commitImmutablePlacementNodeToFragmentInstances(
+      child,
+      parentFragmentInstances,
+    );
+    let sibling = child.sibling;
+    while (sibling !== null) {
+      commitImmutablePlacementNodeToFragmentInstances(
+        sibling,
+        parentFragmentInstances,
+      );
+      sibling = sibling.sibling;
+    }
+  }
+}
+
+export function commitHostPlacement(finishedWork: Fiber) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(finishedWork, commitPlacement, finishedWork);
+    } else {
+      commitPlacement(finishedWork);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostRemoveChildFromContainer(
+  deletedFiber: Fiber,
+  nearestMountedAncestor: Fiber,
+  parentContainer: Container,
+  hostInstance: Instance | TextInstance,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        deletedFiber,
+        removeChildFromContainer,
+        parentContainer,
+        hostInstance,
+      );
+    } else {
+      removeChildFromContainer(parentContainer, hostInstance);
+    }
+    trackHostMutation();
+  } catch (error) {
+    captureCommitPhaseError(deletedFiber, nearestMountedAncestor, error);
+  }
+}
+
+export function commitHostRemoveChild(
+  deletedFiber: Fiber,
+  nearestMountedAncestor: Fiber,
+  parentInstance: Instance,
+  hostInstance: Instance | TextInstance,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        deletedFiber,
+        removeChild,
+        parentInstance,
+        hostInstance,
+      );
+    } else {
+      removeChild(parentInstance, hostInstance);
+    }
+    trackHostMutation();
+  } catch (error) {
+    captureCommitPhaseError(deletedFiber, nearestMountedAncestor, error);
+  }
+}
+
+export function commitHostRootContainerChildren(
+  root: FiberRoot,
+  finishedWork: Fiber,
+) {
+  const containerInfo = root.containerInfo;
+  const pendingChildren = root.pendingChildren;
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        replaceContainerChildren,
+        containerInfo,
+        pendingChildren,
+      );
+    } else {
+      replaceContainerChildren(containerInfo, pendingChildren);
+    }
+    trackHostMutation();
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostPortalContainerChildren(
+  portal: {
+    containerInfo: Container,
+    pendingChildren: ChildSet,
+    ...
+  },
+  finishedWork: Fiber,
+  pendingChildren: ChildSet,
+) {
+  const containerInfo = portal.containerInfo;
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        replaceContainerChildren,
+        containerInfo,
+        pendingChildren,
+      );
+    } else {
+      replaceContainerChildren(containerInfo, pendingChildren);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostHydratedContainer(
+  root: FiberRoot,
+  finishedWork: Fiber,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitHydratedContainer,
+        root.containerInfo,
+      );
+    } else {
+      commitHydratedContainer(root.containerInfo);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostHydratedActivity(
+  activityInstance: ActivityInstance,
+  finishedWork: Fiber,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitHydratedActivityInstance,
+        activityInstance,
+      );
+    } else {
+      commitHydratedActivityInstance(activityInstance);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostHydratedSuspense(
+  suspenseInstance: SuspenseInstance,
+  finishedWork: Fiber,
+) {
+  try {
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        commitHydratedSuspenseInstance,
+        suspenseInstance,
+      );
+    } else {
+      commitHydratedSuspenseInstance(suspenseInstance);
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostSingletonAcquisition(finishedWork: Fiber) {
+  const singleton = finishedWork.stateNode;
+  const props = finishedWork.memoizedProps;
+
+  try {
+    // This was a new mount, acquire the DOM instance and set initial properties
+    if (__DEV__) {
+      runWithFiberInDEV(
+        finishedWork,
+        acquireSingletonInstance,
+        finishedWork.type,
+        props,
+        singleton,
+        finishedWork,
+      );
+    } else {
+      acquireSingletonInstance(
+        finishedWork.type,
+        props,
+        singleton,
+        finishedWork,
+      );
+    }
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+export function commitHostSingletonRelease(releasingWork: Fiber) {
+  if (__DEV__) {
+    runWithFiberInDEV(
+      releasingWork,
+      releaseSingletonInstance,
+      releasingWork.stateNode,
+    );
+  } else {
+    releaseSingletonInstance(releasingWork.stateNode);
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberCommitViewTransitions.js b/packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
new file mode 100644
index 00000000000..a9edc0c84d2
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
@@ -0,0 +1,864 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ViewTransitionProps} from 'shared/ReactTypes';
+import type {Instance, InstanceMeasurement, Props} from './ReactFiberConfig';
+import type {Fiber} from './ReactInternalTypes';
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
+
+import {
+  HostComponent,
+  OffscreenComponent,
+  ViewTransitionComponent,
+} from './ReactWorkTags';
+import {
+  NoFlags,
+  Update,
+  ViewTransitionStatic,
+  AffectedParentLayout,
+  ViewTransitionNamedStatic,
+} from './ReactFiberFlags';
+import {
+  supportsMutation,
+  applyViewTransitionName,
+  restoreViewTransitionName,
+  measureInstance,
+  measureClonedInstance,
+  hasInstanceChanged,
+  hasInstanceAffectedParent,
+  wasInstanceInViewport,
+} from './ReactFiberConfig';
+import {
+  scheduleViewTransitionEvent,
+  scheduleGestureTransitionEvent,
+} from './ReactFiberWorkLoop';
+import {
+  getViewTransitionName,
+  getViewTransitionClassName,
+} from './ReactFiberViewTransitionComponent';
+import {trackAnimatingTask} from './ReactProfilerTimer';
+import {
+  enableComponentPerformanceTrack,
+  enableProfilerTimer,
+} from 'shared/ReactFeatureFlags';
+
+export let shouldStartViewTransition: boolean = false;
+
+export function resetShouldStartViewTransition(): void {
+  shouldStartViewTransition = false;
+}
+
+// This tracks named ViewTransition components found in the accumulateSuspenseyCommit
+// phase that might need to find deleted pairs in the beforeMutation phase.
+export let appearingViewTransitions: Map<string, ViewTransitionState> | null =
+  null;
+
+export function resetAppearingViewTransitions(): void {
+  appearingViewTransitions = null;
+}
+
+export function trackAppearingViewTransition(
+  name: string,
+  state: ViewTransitionState,
+): void {
+  if (appearingViewTransitions === null) {
+    appearingViewTransitions = new Map();
+  }
+  appearingViewTransitions.set(name, state);
+}
+
+export function trackEnterViewTransitions(placement: Fiber): void {
+  if (
+    placement.tag === ViewTransitionComponent ||
+    (placement.subtreeFlags & ViewTransitionStatic) !== NoFlags
+  ) {
+    // If an inserted or appearing Fiber is a ViewTransition component or has one as
+    // an immediate child, then that will trigger as an "Enter" in future passes.
+    // We don't do anything else for that case in the "before mutation" phase but we
+    // still have to mark it as needing to call startViewTransition if nothing else
+    // updates.
+    shouldStartViewTransition = true;
+  }
+}
+
+// We can't cancel view transition children until we know that their parent also
+// don't need to transition.
+export let viewTransitionCancelableChildren: null | Array<
+  Instance | string | Props,
+> = null; // tupled array where each entry is [instance: Instance, oldName: string, props: Props]
+
+export function pushViewTransitionCancelableScope(): null | Array<
+  Instance | string | Props,
+> {
+  const prevChildren = viewTransitionCancelableChildren;
+  viewTransitionCancelableChildren = null;
+  return prevChildren;
+}
+
+export function popViewTransitionCancelableScope(
+  prevChildren: null | Array<Instance | string | Props>,
+): void {
+  viewTransitionCancelableChildren = prevChildren;
+}
+
+let viewTransitionHostInstanceIdx = 0;
+
+function applyViewTransitionToHostInstances(
+  fiber: Fiber,
+  name: string,
+  className: ?string,
+  collectMeasurements: null | Array<InstanceMeasurement>,
+  stopAtNestedViewTransitions: boolean,
+): boolean {
+  viewTransitionHostInstanceIdx = 0;
+  const inViewport = applyViewTransitionToHostInstancesRecursive(
+    fiber.child,
+    name,
+    className,
+    collectMeasurements,
+    stopAtNestedViewTransitions,
+  );
+  if (enableProfilerTimer && enableComponentPerformanceTrack && inViewport) {
+    if (fiber._debugTask != null) {
+      trackAnimatingTask(fiber._debugTask);
+    }
+  }
+  return inViewport;
+}
+
+function applyViewTransitionToHostInstancesRecursive(
+  child: null | Fiber,
+  name: string,
+  className: ?string,
+  collectMeasurements: null | Array<InstanceMeasurement>,
+  stopAtNestedViewTransitions: boolean,
+): boolean {
+  if (!supportsMutation) {
+    return false;
+  }
+  let inViewport = false;
+  while (child !== null) {
+    if (child.tag === HostComponent) {
+      const instance: Instance = child.stateNode;
+      if (collectMeasurements !== null) {
+        const measurement = measureInstance(instance);
+        collectMeasurements.push(measurement);
+        if (wasInstanceInViewport(measurement)) {
+          inViewport = true;
+        }
+      } else if (!inViewport) {
+        if (wasInstanceInViewport(measureInstance(instance))) {
+          inViewport = true;
+        }
+      }
+      shouldStartViewTransition = true;
+      applyViewTransitionName(
+        instance,
+        viewTransitionHostInstanceIdx === 0
+          ? name
+          : // If we have multiple Host Instances below, we add a suffix to the name to give
+            // each one a unique name.
+            name + '_' + viewTransitionHostInstanceIdx,
+        className,
+      );
+      viewTransitionHostInstanceIdx++;
+    } else if (
+      child.tag === OffscreenComponent &&
+      child.memoizedState !== null
+    ) {
+      // Skip any hidden subtrees. They were or are effectively not there.
+    } else if (
+      child.tag === ViewTransitionComponent &&
+      stopAtNestedViewTransitions
+    ) {
+      // Skip any nested view transitions for updates since in that case the
+      // inner most one is the one that handles the update.
+    } else {
+      if (
+        applyViewTransitionToHostInstancesRecursive(
+          child.child,
+          name,
+          className,
+          collectMeasurements,
+          stopAtNestedViewTransitions,
+        )
+      ) {
+        inViewport = true;
+      }
+    }
+    child = child.sibling;
+  }
+  return inViewport;
+}
+
+function restoreViewTransitionOnHostInstances(
+  child: null | Fiber,
+  stopAtNestedViewTransitions: boolean,
+): void {
+  if (!supportsMutation) {
+    return;
+  }
+  while (child !== null) {
+    if (child.tag === HostComponent) {
+      const instance: Instance = child.stateNode;
+      restoreViewTransitionName(instance, child.memoizedProps);
+    } else if (
+      child.tag === OffscreenComponent &&
+      child.memoizedState !== null
+    ) {
+      // Skip any hidden subtrees. They were or are effectively not there.
+    } else if (
+      child.tag === ViewTransitionComponent &&
+      stopAtNestedViewTransitions
+    ) {
+      // Skip any nested view transitions for updates since in that case the
+      // inner most one is the one that handles the update.
+    } else {
+      restoreViewTransitionOnHostInstances(
+        child.child,
+        stopAtNestedViewTransitions,
+      );
+    }
+    child = child.sibling;
+  }
+}
+
+function commitAppearingPairViewTransitions(placement: Fiber): void {
+  if ((placement.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
+    // This has no named view transitions in its subtree.
+    return;
+  }
+  let child = placement.child;
+  while (child !== null) {
+    if (child.tag === OffscreenComponent && child.memoizedState !== null) {
+      // This tree was already hidden so we skip it.
+    } else {
+      commitAppearingPairViewTransitions(child);
+      if (
+        child.tag === ViewTransitionComponent &&
+        (child.flags & ViewTransitionNamedStatic) !== NoFlags
+      ) {
+        const instance: ViewTransitionState = child.stateNode;
+        if (instance.paired) {
+          const props: ViewTransitionProps = child.memoizedProps;
+          if (props.name == null || props.name === 'auto') {
+            throw new Error(
+              'Found a pair with an auto name. This is a bug in React.',
+            );
+          }
+          const name = props.name;
+          const className: ?string = getViewTransitionClassName(
+            props.default,
+            props.share,
+          );
+          if (className !== 'none') {
+            // We found a new appearing view transition with the same name as this deletion.
+            // We'll transition between them.
+            const inViewport = applyViewTransitionToHostInstances(
+              child,
+              name,
+              className,
+              null,
+              false,
+            );
+            if (!inViewport) {
+              // This boundary is exiting within the viewport but is going to leave the viewport.
+              // Instead, we treat this as an exit of the previous entry by reverting the new name.
+              // Ideally we could undo the old transition but it's now too late. It's also on its
+              // on snapshot. We have know was for it to paint onto the original group.
+              // TODO: This will lead to things unexpectedly having exit animations that normally
+              // wouldn't happen. Consider if we should just let this fly off the screen instead.
+              restoreViewTransitionOnHostInstances(child.child, false);
+            }
+          }
+        }
+      }
+    }
+    child = child.sibling;
+  }
+}
+
+export function commitEnterViewTransitions(
+  placement: Fiber,
+  gesture: boolean,
+): void {
+  if (placement.tag === ViewTransitionComponent) {
+    const state: ViewTransitionState = placement.stateNode;
+    const props: ViewTransitionProps = placement.memoizedProps;
+    const name = getViewTransitionName(props, state);
+    const className: ?string = getViewTransitionClassName(
+      props.default,
+      state.paired ? props.share : props.enter,
+    );
+    if (className !== 'none') {
+      const inViewport = applyViewTransitionToHostInstances(
+        placement,
+        name,
+        className,
+        null,
+        false,
+      );
+      if (!inViewport) {
+        // TODO: If this was part of a pair we will still run the onShare callback.
+        // Revert the transition names. This boundary is not in the viewport
+        // so we won't bother animating it.
+        restoreViewTransitionOnHostInstances(placement.child, false);
+        // TODO: Should we still visit the children in case a named one was in the viewport?
+      } else {
+        commitAppearingPairViewTransitions(placement);
+
+        if (!state.paired) {
+          if (gesture) {
+            scheduleGestureTransitionEvent(placement, props.onGestureEnter);
+          } else {
+            scheduleViewTransitionEvent(placement, props.onEnter);
+          }
+        }
+      }
+    } else {
+      commitAppearingPairViewTransitions(placement);
+    }
+  } else if ((placement.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    let child = placement.child;
+    while (child !== null) {
+      commitEnterViewTransitions(child, gesture);
+      child = child.sibling;
+    }
+  } else {
+    commitAppearingPairViewTransitions(placement);
+  }
+}
+
+function commitDeletedPairViewTransitions(deletion: Fiber): void {
+  if (
+    appearingViewTransitions === null ||
+    appearingViewTransitions.size === 0
+  ) {
+    // We've found all.
+    return;
+  }
+  const pairs = appearingViewTransitions;
+  if ((deletion.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
+    // This has no named view transitions in its subtree.
+    return;
+  }
+  let child = deletion.child;
+  while (child !== null) {
+    if (child.tag === OffscreenComponent && child.memoizedState !== null) {
+      // This tree was already hidden so we skip it.
+    } else {
+      if (
+        child.tag === ViewTransitionComponent &&
+        (child.flags & ViewTransitionNamedStatic) !== NoFlags
+      ) {
+        const props: ViewTransitionProps = child.memoizedProps;
+        const name = props.name;
+        if (name != null && name !== 'auto') {
+          const pair = pairs.get(name);
+          if (pair !== undefined) {
+            const className: ?string = getViewTransitionClassName(
+              props.default,
+              props.share,
+            );
+            if (className !== 'none') {
+              // We found a new appearing view transition with the same name as this deletion.
+              const inViewport = applyViewTransitionToHostInstances(
+                child,
+                name,
+                className,
+                null,
+                false,
+              );
+              if (!inViewport) {
+                // This boundary is not in the viewport so we won't treat it as a matched pair.
+                // Revert the transition names. This avoids it flying onto the screen which can
+                // be disruptive and doesn't really preserve any continuity anyway.
+                restoreViewTransitionOnHostInstances(child.child, false);
+              } else {
+                // We'll transition between them.
+                const oldInstance: ViewTransitionState = child.stateNode;
+                const newInstance: ViewTransitionState = pair;
+                newInstance.paired = oldInstance;
+                oldInstance.paired = newInstance;
+                // Note: If the other side ends up outside the viewport, we'll still run this.
+                // Therefore it's possible for onShare to be called with only an old snapshot.
+                scheduleViewTransitionEvent(child, props.onShare);
+              }
+            }
+            // Delete the entry so that we know when we've found all of them
+            // and can stop searching (size reaches zero).
+            pairs.delete(name);
+            if (pairs.size === 0) {
+              break;
+            }
+          }
+        }
+      }
+      commitDeletedPairViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+export function commitExitViewTransitions(deletion: Fiber): void {
+  if (deletion.tag === ViewTransitionComponent) {
+    const props: ViewTransitionProps = deletion.memoizedProps;
+    const name = getViewTransitionName(props, deletion.stateNode);
+    const pair =
+      appearingViewTransitions !== null
+        ? appearingViewTransitions.get(name)
+        : undefined;
+    const className: ?string = getViewTransitionClassName(
+      props.default,
+      pair !== undefined ? props.share : props.exit,
+    );
+    if (className !== 'none') {
+      const inViewport = applyViewTransitionToHostInstances(
+        deletion,
+        name,
+        className,
+        null,
+        false,
+      );
+      if (!inViewport) {
+        // Revert the transition names. This boundary is not in the viewport
+        // so we won't bother animating it.
+        restoreViewTransitionOnHostInstances(deletion.child, false);
+        // TODO: Should we still visit the children in case a named one was in the viewport?
+      } else if (pair !== undefined) {
+        // We found a new appearing view transition with the same name as this deletion.
+        // We'll transition between them instead of running the normal exit.
+        const oldInstance: ViewTransitionState = deletion.stateNode;
+        const newInstance: ViewTransitionState = pair;
+        newInstance.paired = oldInstance;
+        oldInstance.paired = newInstance;
+        // Delete the entry so that we know when we've found all of them
+        // and can stop searching (size reaches zero).
+        // $FlowFixMe[incompatible-use]: Refined by the pair.
+        appearingViewTransitions.delete(name);
+        // Note: If the other side ends up outside the viewport, we'll still run this.
+        // Therefore it's possible for onShare to be called with only an old snapshot.
+        scheduleViewTransitionEvent(deletion, props.onShare);
+      } else {
+        scheduleViewTransitionEvent(deletion, props.onExit);
+      }
+    }
+    if (appearingViewTransitions !== null) {
+      // Look for more pairs deeper in the tree.
+      commitDeletedPairViewTransitions(deletion);
+    }
+  } else if ((deletion.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    let child = deletion.child;
+    while (child !== null) {
+      commitExitViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    if (appearingViewTransitions !== null) {
+      commitDeletedPairViewTransitions(deletion);
+    }
+  }
+}
+
+export function commitBeforeUpdateViewTransition(
+  current: Fiber,
+  finishedWork: Fiber,
+): void {
+  // The way we deal with multiple HostInstances as children of a View Transition in an
+  // update can get tricky. The important bit is that if you swap out n HostInstances
+  // from n HostInstances then they match up in order. Similarly, if you don't swap
+  // any HostInstances each instance just transitions as is.
+  //
+  // We call this function twice. First we apply the view transition names on the
+  // "current" tree in the snapshot phase. Then in the mutation phase we apply view
+  // transition names to the "finishedWork" tree.
+  //
+  // This means that if there were insertions or deletions before an updated Instance
+  // that same Instance might get different names in the "old" and the "new" state.
+  // For example if you swap two HostInstances inside a ViewTransition they don't
+  // animate to swap position but rather cross-fade into the other instance. This might
+  // be unexpected but it is in line with the semantics that the ViewTransition is its
+  // own layer that cross-fades its content when it updates. If you want to reorder then
+  // each child needs its own ViewTransition.
+  const oldProps: ViewTransitionProps = current.memoizedProps;
+  const oldName = getViewTransitionName(oldProps, current.stateNode);
+  const newProps: ViewTransitionProps = finishedWork.memoizedProps;
+  // This className applies only if there are fewer child DOM nodes than
+  // before or if this update should've been cancelled but we ended up with
+  // a parent animating so we need to animate the child too.
+  // For example, if update="foo" layout="none" and it turns out this was
+  // a layout only change, then the "foo" class will be applied even though
+  // it was not actually an update. Which is a bug.
+  const className: ?string = getViewTransitionClassName(
+    newProps.default,
+    newProps.update,
+  );
+  if (className === 'none') {
+    // If update is "none" then we don't have to apply a name. Since we won't animate this boundary.
+    return;
+  }
+  applyViewTransitionToHostInstances(
+    current,
+    oldName,
+    className,
+    (current.memoizedState = []),
+    true,
+  );
+}
+
+export function commitNestedViewTransitions(changedParent: Fiber): void {
+  let child = changedParent.child;
+  while (child !== null) {
+    if (child.tag === ViewTransitionComponent) {
+      // In this case the outer ViewTransition component wins but if there
+      // was an update through this component then the inner one wins.
+      const props: ViewTransitionProps = child.memoizedProps;
+      const name = getViewTransitionName(props, child.stateNode);
+      const className: ?string = getViewTransitionClassName(
+        props.default,
+        props.update,
+      );
+      // "Nested" view transitions are in subtrees that didn't update so
+      // this is a "current". We normally clear this upon rerendering
+      // but we use this flag to track changes from layout in the commit.
+      // So we need it to be cleared before we do that.
+      // TODO: Use some other temporary state to track this.
+      child.flags &= ~Update;
+      if (className !== 'none') {
+        applyViewTransitionToHostInstances(
+          child,
+          name,
+          className,
+          (child.memoizedState = []),
+          false,
+        );
+      }
+    } else if ((child.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+      commitNestedViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+function restorePairedViewTransitions(parent: Fiber): void {
+  if ((parent.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
+    // This has no named view transitions in its subtree.
+    return;
+  }
+  let child = parent.child;
+  while (child !== null) {
+    if (child.tag === OffscreenComponent && child.memoizedState !== null) {
+      // This tree was already hidden so we skip it.
+    } else {
+      if (
+        child.tag === ViewTransitionComponent &&
+        (child.flags & ViewTransitionNamedStatic) !== NoFlags
+      ) {
+        const instance: ViewTransitionState = child.stateNode;
+        if (instance.paired !== null) {
+          instance.paired = null;
+          restoreViewTransitionOnHostInstances(child.child, false);
+        }
+      }
+      restorePairedViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+export function restoreEnterOrExitViewTransitions(fiber: Fiber): void {
+  if (fiber.tag === ViewTransitionComponent) {
+    const instance: ViewTransitionState = fiber.stateNode;
+    instance.paired = null;
+    restoreViewTransitionOnHostInstances(fiber.child, false);
+    restorePairedViewTransitions(fiber);
+  } else if ((fiber.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    let child = fiber.child;
+    while (child !== null) {
+      restoreEnterOrExitViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    restorePairedViewTransitions(fiber);
+  }
+}
+
+export function restoreUpdateViewTransition(
+  current: Fiber,
+  finishedWork: Fiber,
+): void {
+  restoreViewTransitionOnHostInstances(current.child, true);
+  restoreViewTransitionOnHostInstances(finishedWork.child, true);
+}
+
+export function restoreUpdateViewTransitionForGesture(
+  current: Fiber,
+  finishedWork: Fiber,
+): void {
+  // For gestures we don't need to reset "finishedWork" because those would
+  // have all been clones that got deleted.
+  restoreViewTransitionOnHostInstances(current.child, true);
+}
+
+export function restoreNestedViewTransitions(changedParent: Fiber): void {
+  let child = changedParent.child;
+  while (child !== null) {
+    if (child.tag === ViewTransitionComponent) {
+      restoreViewTransitionOnHostInstances(child.child, false);
+    } else if ((child.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+      restoreNestedViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+export function measureViewTransitionHostInstances(
+  parentViewTransition: Fiber,
+  child: null | Fiber,
+  newName: string,
+  oldName: string,
+  className: ?string,
+  previousMeasurements: null | Array<InstanceMeasurement>,
+  stopAtNestedViewTransitions: boolean,
+): boolean {
+  viewTransitionHostInstanceIdx = 0;
+  return measureViewTransitionHostInstancesRecursive(
+    parentViewTransition,
+    child,
+    newName,
+    oldName,
+    className,
+    previousMeasurements,
+    stopAtNestedViewTransitions,
+  );
+}
+
+function measureViewTransitionHostInstancesRecursive(
+  parentViewTransition: Fiber,
+  child: null | Fiber,
+  newName: string,
+  oldName: string,
+  className: ?string,
+  previousMeasurements: null | Array<InstanceMeasurement>,
+  stopAtNestedViewTransitions: boolean,
+): boolean {
+  if (!supportsMutation) {
+    return true;
+  }
+  let inViewport = false;
+  while (child !== null) {
+    if (child.tag === HostComponent) {
+      const instance: Instance = child.stateNode;
+      if (
+        previousMeasurements !== null &&
+        viewTransitionHostInstanceIdx < previousMeasurements.length
+      ) {
+        // The previous measurement of the Instance in this location within the ViewTransition.
+        // Note that this might not be the same exact Instance if the Instances within the
+        // ViewTransition changed.
+        const previousMeasurement =
+          previousMeasurements[viewTransitionHostInstanceIdx];
+        const nextMeasurement = measureInstance(instance);
+        if (
+          wasInstanceInViewport(previousMeasurement) ||
+          wasInstanceInViewport(nextMeasurement)
+        ) {
+          // If either the old or new state was within the viewport we have to animate this.
+          // But if it turns out that none of them were we'll be able to skip it.
+          inViewport = true;
+        }
+        if (
+          (parentViewTransition.flags & Update) === NoFlags &&
+          hasInstanceChanged(previousMeasurement, nextMeasurement)
+        ) {
+          parentViewTransition.flags |= Update;
+        }
+        if (hasInstanceAffectedParent(previousMeasurement, nextMeasurement)) {
+          // If this instance size within its parent has changed it might have caused the
+          // parent to relayout which needs a cross fade.
+          parentViewTransition.flags |= AffectedParentLayout;
+        }
+      } else {
+        // If there was an insertion of extra nodes, we have to assume they affected the parent.
+        // It should have already been marked as an Update due to the mutation.
+        parentViewTransition.flags |= AffectedParentLayout;
+      }
+      if ((parentViewTransition.flags & Update) !== NoFlags) {
+        // We might update this node so we need to apply its new name for the new state.
+        // Additionally in the ApplyGesture case we also need to do this because the clone
+        // will have the name but this one won't.
+        applyViewTransitionName(
+          instance,
+          viewTransitionHostInstanceIdx === 0
+            ? newName
+            : // If we have multiple Host Instances below, we add a suffix to the name to give
+              // each one a unique name.
+              newName + '_' + viewTransitionHostInstanceIdx,
+          className,
+        );
+      }
+      if (!inViewport || (parentViewTransition.flags & Update) === NoFlags) {
+        // It turns out that we had no other deeper mutations, the child transitions didn't
+        // affect the parent layout and this instance hasn't changed size. So we can skip
+        // animating it. However, in the current model this only works if the parent also
+        // doesn't animate. So we have to queue these and wait until we complete the parent
+        // to cancel them.
+        if (viewTransitionCancelableChildren === null) {
+          viewTransitionCancelableChildren = [];
+        }
+        viewTransitionCancelableChildren.push(
+          instance,
+          viewTransitionHostInstanceIdx === 0
+            ? oldName
+            : // If we have multiple Host Instances below, we add a suffix to the name to give
+              // each one a unique name.
+              oldName + '_' + viewTransitionHostInstanceIdx,
+          child.memoizedProps,
+        );
+      }
+      viewTransitionHostInstanceIdx++;
+    } else if (
+      child.tag === OffscreenComponent &&
+      child.memoizedState !== null
+    ) {
+      // Skip any hidden subtrees. They were or are effectively not there.
+    } else if (
+      child.tag === ViewTransitionComponent &&
+      stopAtNestedViewTransitions
+    ) {
+      // Skip any nested view transitions for updates since in that case the
+      // inner most one is the one that handles the update.
+      // If this inner boundary resized we need to bubble that information up.
+      parentViewTransition.flags |= child.flags & AffectedParentLayout;
+    } else {
+      if (
+        measureViewTransitionHostInstancesRecursive(
+          parentViewTransition,
+          child.child,
+          newName,
+          oldName,
+          className,
+          previousMeasurements,
+          stopAtNestedViewTransitions,
+        )
+      ) {
+        inViewport = true;
+      }
+    }
+    child = child.sibling;
+  }
+  return inViewport;
+}
+
+export function measureUpdateViewTransition(
+  current: Fiber,
+  finishedWork: Fiber,
+  gesture: boolean,
+): boolean {
+  // If this was a gesture then which Fiber was used for the "old" vs "new" state is reversed.
+  // We still need to treat "finishedWork" as the Fiber that contains the flags for this commmit.
+  const oldFiber = gesture ? finishedWork : current;
+  const newFiber = gesture ? current : finishedWork;
+  const props: ViewTransitionProps = newFiber.memoizedProps;
+  const state: ViewTransitionState = newFiber.stateNode;
+  const newName = getViewTransitionName(props, state);
+  const oldName = getViewTransitionName(oldFiber.memoizedProps, state);
+  // Whether it ends up having been updated or relayout we apply the update class name.
+  const className: ?string = getViewTransitionClassName(
+    props.default,
+    props.update,
+  );
+  if (className === 'none') {
+    // If update is "none" then we don't have to apply a name. Since we won't animate this boundary.
+    return false;
+  }
+  // If nothing changed due to a mutation, or children changing size
+  // and the measurements end up unchanged, we should restore it to not animate.
+  let previousMeasurements: null | Array<InstanceMeasurement>;
+  if (gesture) {
+    const clones = state.clones;
+    if (clones === null) {
+      previousMeasurements = null;
+    } else {
+      previousMeasurements = clones.map(measureClonedInstance);
+    }
+  } else {
+    previousMeasurements = oldFiber.memoizedState;
+    oldFiber.memoizedState = null; // Clear it. We won't need it anymore.
+  }
+  const inViewport = measureViewTransitionHostInstances(
+    finishedWork, // This is always finishedWork since it's used to assign flags.
+    newFiber.child, // This either current or finishedWork depending on if was a gesture.
+    newName,
+    oldName,
+    className,
+    previousMeasurements,
+    true,
+  );
+  const previousCount =
+    previousMeasurements === null ? 0 : previousMeasurements.length;
+  if (viewTransitionHostInstanceIdx !== previousCount) {
+    // If we found a different number of child DOM nodes we need to assume that
+    // the parent layout may have changed as a result. This is not necessarily
+    // true if those nodes were absolutely positioned.
+    finishedWork.flags |= AffectedParentLayout;
+  }
+  return inViewport;
+}
+
+export function measureNestedViewTransitions(
+  changedParent: Fiber,
+  gesture: boolean,
+): void {
+  let child = changedParent.child;
+  while (child !== null) {
+    if (child.tag === ViewTransitionComponent) {
+      const props: ViewTransitionProps = child.memoizedProps;
+      const state: ViewTransitionState = child.stateNode;
+      const name = getViewTransitionName(props, state);
+      const className: ?string = getViewTransitionClassName(
+        props.default,
+        props.update,
+      );
+      let previousMeasurements: null | Array<InstanceMeasurement>;
+      if (gesture) {
+        const clones = state.clones;
+        if (clones === null) {
+          previousMeasurements = null;
+        } else {
+          previousMeasurements = clones.map(measureClonedInstance);
+        }
+      } else {
+        previousMeasurements = child.memoizedState;
+        child.memoizedState = null; // Clear it. We won't need it anymore.
+      }
+      const inViewport = measureViewTransitionHostInstances(
+        child,
+        child.child,
+        name,
+        name, // Since this is unchanged, new and old name is the same.
+        className,
+        previousMeasurements,
+        false,
+      );
+      if ((child.flags & Update) === NoFlags || !inViewport) {
+        // Nothing changed.
+      } else {
+        if (gesture) {
+          scheduleGestureTransitionEvent(child, props.onGestureUpdate);
+        } else {
+          scheduleViewTransitionEvent(child, props.onUpdate);
+        }
+      }
+    } else if ((child.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+      measureNestedViewTransitions(child, gesture);
+    }
+    child = child.sibling;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
new file mode 100644
index 00000000000..43db744007d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -0,0 +1,5327 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  TextInstance,
+  ActivityInstance,
+  SuspenseInstance,
+  Container,
+  HoistableRoot,
+  FormInstance,
+  Props,
+  SuspendedState,
+} from './ReactFiberConfig';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane';
+import {
+  includesLoadingIndicatorLanes,
+  includesOnlySuspenseyCommitEligibleLanes,
+  includesOnlyViewTransitionEligibleLanes,
+} from './ReactFiberLane';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {SuspenseState, RetryQueue} from './ReactFiberSuspenseComponent';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks';
+import type {Wakeable, ViewTransitionProps} from 'shared/ReactTypes';
+import type {
+  OffscreenState,
+  OffscreenInstance,
+  OffscreenQueue,
+} from './ReactFiberOffscreenComponent';
+import type {Cache} from './ReactFiberCacheComponent';
+import type {RootState} from './ReactFiberRoot';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {
+  TracingMarkerInstance,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent';
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
+
+import {
+  alwaysThrottleRetries,
+  enableCreateEventHandleAPI,
+  enableHiddenSubtreeInsertionEffectCleanup,
+  enableProfilerTimer,
+  enableProfilerCommitHooks,
+  enableSuspenseCallback,
+  enableScopeAPI,
+  enableUpdaterTracking,
+  enableTransitionTracing,
+  enableLegacyHidden,
+  disableLegacyMode,
+  enableComponentPerformanceTrack,
+  enableViewTransition,
+  enableFragmentRefs,
+  enableEagerAlternateStateNodeCleanup,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+import {
+  FunctionComponent,
+  ForwardRef,
+  ClassComponent,
+  HostRoot,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  HostPortal,
+  Profiler,
+  ActivityComponent,
+  SuspenseComponent,
+  DehydratedFragment,
+  IncompleteClassComponent,
+  MemoComponent,
+  SimpleMemoComponent,
+  SuspenseListComponent,
+  ScopeComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  CacheComponent,
+  TracingMarkerComponent,
+  ViewTransitionComponent,
+  Fragment,
+} from './ReactWorkTags';
+import {
+  NoFlags,
+  ContentReset,
+  Placement,
+  ChildDeletion,
+  Snapshot,
+  Update,
+  Hydrate,
+  Callback,
+  Ref,
+  Hydrating,
+  Passive,
+  BeforeMutationMask,
+  BeforeAndAfterMutationTransitionMask,
+  MutationMask,
+  LayoutMask,
+  PassiveMask,
+  PassiveTransitionMask,
+  Visibility,
+  ShouldSuspendCommit,
+  MaySuspendCommit,
+  FormReset,
+  Cloned,
+  PerformedWork,
+  ForceClientRender,
+  DidCapture,
+  AffectedParentLayout,
+  ViewTransitionNamedStatic,
+  PortalStatic,
+} from './ReactFiberFlags';
+import {
+  commitStartTime,
+  pushNestedEffectDurations,
+  popNestedEffectDurations,
+  bubbleNestedEffectDurations,
+  resetComponentEffectTimers,
+  pushComponentEffectStart,
+  popComponentEffectStart,
+  pushComponentEffectDuration,
+  popComponentEffectDuration,
+  pushComponentEffectErrors,
+  popComponentEffectErrors,
+  pushComponentEffectDidSpawnUpdate,
+  popComponentEffectDidSpawnUpdate,
+  componentEffectStartTime,
+  componentEffectEndTime,
+  componentEffectDuration,
+  componentEffectErrors,
+  componentEffectSpawnedUpdate,
+} from './ReactProfilerTimer';
+import {
+  logComponentRender,
+  logComponentErrored,
+  logComponentEffect,
+  logComponentMount,
+  logComponentUnmount,
+  logComponentReappeared,
+  logComponentDisappeared,
+  pushDeepEquality,
+  popDeepEquality,
+} from './ReactFiberPerformanceTrack';
+import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
+import {deferHiddenCallbacks} from './ReactFiberClassUpdateQueue';
+import {
+  supportsMutation,
+  supportsPersistence,
+  supportsHydration,
+  supportsResources,
+  supportsSingletons,
+  clearSuspenseBoundary,
+  clearSuspenseBoundaryFromContainer,
+  createContainerChildSet,
+  clearContainer,
+  prepareScopeUpdate,
+  prepareForCommit,
+  beforeActiveInstanceBlur,
+  detachDeletedInstance,
+  getHoistableRoot,
+  acquireResource,
+  releaseResource,
+  hydrateHoistable,
+  mountHoistable,
+  unmountHoistable,
+  prepareToCommitHoistables,
+  maySuspendCommitInSyncRender,
+  suspendInstance,
+  suspendResource,
+  resetFormInstance,
+  registerSuspenseInstanceRetry,
+  cancelViewTransitionName,
+  cancelRootViewTransitionName,
+  restoreRootViewTransitionName,
+  isSingletonScope,
+  updateFragmentInstanceFiber,
+} from './ReactFiberConfig';
+import {
+  captureCommitPhaseError,
+  resolveRetryWakeable,
+  markCommitTimeOfFallback,
+  restorePendingUpdaters,
+  addTransitionStartCallbackToPendingTransition,
+  addTransitionProgressCallbackToPendingTransition,
+  addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
+  addMarkerCompleteCallbackToPendingTransition,
+  retryDehydratedSuspenseBoundary,
+  scheduleViewTransitionEvent,
+} from './ReactFiberWorkLoop';
+import {
+  HasEffect as HookHasEffect,
+  Layout as HookLayout,
+  Insertion as HookInsertion,
+  Passive as HookPassive,
+} from './ReactHookEffectTags';
+import {doesFiberContain} from './ReactFiberTreeReflection';
+import {isDevToolsPresent, onCommitUnmount} from './ReactFiberDevToolsHook';
+import {releaseCache, retainCache} from './ReactFiberCacheComponent';
+import {clearTransitionsForLanes} from './ReactFiberLane';
+import {
+  OffscreenVisible,
+  OffscreenPassiveEffectsConnected,
+} from './ReactFiberOffscreenComponent';
+import {
+  TransitionRoot,
+  TransitionTracingMarker,
+} from './ReactFiberTracingMarkerComponent';
+import {getViewTransitionClassName} from './ReactFiberViewTransitionComponent';
+import {
+  commitHookLayoutEffects,
+  commitHookLayoutUnmountEffects,
+  commitHookEffectListMount,
+  commitHookEffectListUnmount,
+  commitHookPassiveMountEffects,
+  commitHookPassiveUnmountEffects,
+  commitClassLayoutLifecycles,
+  commitClassDidMount,
+  commitClassCallbacks,
+  commitClassHiddenCallbacks,
+  commitClassSnapshot,
+  safelyCallComponentWillUnmount,
+  safelyAttachRef,
+  safelyDetachRef,
+  commitProfilerUpdate,
+  commitProfilerPostCommit,
+  commitRootCallbacks,
+} from './ReactFiberCommitEffects';
+import {
+  commitHostMount,
+  commitHostHydratedInstance,
+  commitHostUpdate,
+  commitHostTextUpdate,
+  commitHostResetTextContent,
+  commitShowHideSuspenseBoundary,
+  commitShowHideHostInstance,
+  commitShowHideHostTextInstance,
+  commitHostPlacement,
+  commitHostRootContainerChildren,
+  commitHostPortalContainerChildren,
+  commitHostHydratedContainer,
+  commitHostHydratedActivity,
+  commitHostHydratedSuspense,
+  commitHostRemoveChildFromContainer,
+  commitHostRemoveChild,
+  commitHostSingletonAcquisition,
+  commitHostSingletonRelease,
+  commitFragmentInstanceDeletionEffects,
+  commitFragmentInstanceInsertionEffects,
+} from './ReactFiberCommitHostEffects';
+import {
+  trackEnterViewTransitions,
+  commitEnterViewTransitions,
+  commitExitViewTransitions,
+  commitBeforeUpdateViewTransition,
+  commitNestedViewTransitions,
+  restoreEnterOrExitViewTransitions,
+  restoreUpdateViewTransition,
+  restoreNestedViewTransitions,
+  measureUpdateViewTransition,
+  measureNestedViewTransitions,
+  resetAppearingViewTransitions,
+  trackAppearingViewTransition,
+  viewTransitionCancelableChildren,
+  pushViewTransitionCancelableScope,
+  popViewTransitionCancelableScope,
+} from './ReactFiberCommitViewTransitions';
+import {
+  viewTransitionMutationContext,
+  pushRootMutationContext,
+  pushMutationContext,
+  popMutationContext,
+  rootMutationContext,
+} from './ReactFiberMutationTracking';
+import {
+  trackNamedViewTransition,
+  untrackNamedViewTransition,
+} from './ReactFiberDuplicateViewTransitions';
+import {markIndicatorHandled} from './ReactFiberRootScheduler';
+import type {Flags} from './ReactFiberFlags';
+
+// Used during the commit phase to track the state of the Offscreen component stack.
+// Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
+let offscreenSubtreeIsHidden: boolean = false;
+let offscreenSubtreeWasHidden: boolean = false;
+// Track whether there's a hidden offscreen above with no HostComponent between. If so,
+// it overrides the hiddenness of the HostComponent below.
+let offscreenDirectParentIsHidden: boolean = false;
+
+// Used to track if a form needs to be reset at the end of the mutation phase.
+let needsFormReset = false;
+
+const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
+
+let nextEffect: Fiber | null = null;
+
+// Used for Profiling builds to track updaters.
+let inProgressLanes: Lanes | null = null;
+let inProgressRoot: FiberRoot | null = null;
+
+let focusedInstanceHandle: null | Fiber = null;
+export let shouldFireAfterActiveInstanceBlur: boolean = false;
+
+// Used during the commit phase to track whether a parent ViewTransition component
+// might have been affected by any mutations / relayouts below.
+let viewTransitionContextChanged: boolean = false;
+let inUpdateViewTransition: boolean = false;
+let rootViewTransitionAffected: boolean = false;
+let rootViewTransitionNameCanceled: boolean = false;
+
+function isHydratingParent(current: Fiber, finishedWork: Fiber): boolean {
+  if (finishedWork.tag === ActivityComponent) {
+    const prevState: ActivityState | null = current.memoizedState;
+    const nextState: ActivityState | null = finishedWork.memoizedState;
+    return prevState !== null && nextState === null;
+  } else if (finishedWork.tag === SuspenseComponent) {
+    const prevState: SuspenseState | null = current.memoizedState;
+    const nextState: SuspenseState | null = finishedWork.memoizedState;
+    return (
+      prevState !== null &&
+      prevState.dehydrated !== null &&
+      (nextState === null || nextState.dehydrated === null)
+    );
+  } else if (finishedWork.tag === HostRoot) {
+    return (
+      (current.memoizedState: RootState).isDehydrated &&
+      (finishedWork.flags & ForceClientRender) === NoFlags
+    );
+  } else {
+    return false;
+  }
+}
+
+export function commitBeforeMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+  committedLanes: Lanes,
+): void {
+  focusedInstanceHandle = prepareForCommit(root.containerInfo);
+  shouldFireAfterActiveInstanceBlur = false;
+
+  const isViewTransitionEligible =
+    enableViewTransition &&
+    includesOnlyViewTransitionEligibleLanes(committedLanes);
+
+  nextEffect = firstChild;
+  commitBeforeMutationEffects_begin(isViewTransitionEligible);
+
+  // We no longer need to track the active instance fiber
+  focusedInstanceHandle = null;
+  // We've found any matched pairs and can now reset.
+  resetAppearingViewTransitions();
+}
+
+function commitBeforeMutationEffects_begin(isViewTransitionEligible: boolean) {
+  // If this commit is eligible for a View Transition we look into all mutated subtrees.
+  // TODO: We could optimize this by marking these with the Snapshot subtree flag in the render phase.
+  const subtreeMask = isViewTransitionEligible
+    ? BeforeAndAfterMutationTransitionMask
+    : BeforeMutationMask;
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // This phase is only used for beforeActiveInstanceBlur.
+    // Let's skip the whole loop if it's off.
+    if (enableCreateEventHandleAPI || isViewTransitionEligible) {
+      // TODO: Should wrap this in flags check, too, as optimization
+      const deletions = fiber.deletions;
+      if (deletions !== null) {
+        for (let i = 0; i < deletions.length; i++) {
+          const deletion = deletions[i];
+          commitBeforeMutationEffectsDeletion(
+            deletion,
+            isViewTransitionEligible,
+          );
+        }
+      }
+    }
+
+    if (
+      enableViewTransition &&
+      fiber.alternate === null &&
+      (fiber.flags & Placement) !== NoFlags
+    ) {
+      // Skip before mutation effects of the children because we don't want
+      // to trigger updates of any nested view transitions and we shouldn't
+      // have any other before mutation effects since snapshot effects are
+      // only applied to updates. TODO: Model this using only flags.
+      if (isViewTransitionEligible) {
+        trackEnterViewTransitions(fiber);
+      }
+      commitBeforeMutationEffects_complete(isViewTransitionEligible);
+      continue;
+    }
+
+    // TODO: This should really unify with the switch in commitBeforeMutationEffectsOnFiber recursively.
+    if (enableViewTransition && fiber.tag === OffscreenComponent) {
+      const isModernRoot =
+        disableLegacyMode || (fiber.mode & ConcurrentMode) !== NoMode;
+      if (isModernRoot) {
+        const current = fiber.alternate;
+        const isHidden = fiber.memoizedState !== null;
+        if (isHidden) {
+          if (
+            current !== null &&
+            current.memoizedState === null &&
+            isViewTransitionEligible
+          ) {
+            // Was previously mounted as visible but is now hidden.
+            commitExitViewTransitions(current);
+          }
+          // Skip before mutation effects of the children because they're hidden.
+          commitBeforeMutationEffects_complete(isViewTransitionEligible);
+          continue;
+        } else if (current !== null && current.memoizedState !== null) {
+          // Was previously mounted as hidden but is now visible.
+          // Skip before mutation effects of the children because we don't want
+          // to trigger updates of any nested view transitions and we shouldn't
+          // have any other before mutation effects since snapshot effects are
+          // only applied to updates. TODO: Model this using only flags.
+          if (isViewTransitionEligible) {
+            trackEnterViewTransitions(fiber);
+          }
+          commitBeforeMutationEffects_complete(isViewTransitionEligible);
+          continue;
+        }
+      }
+    }
+
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & subtreeMask) !== NoFlags && child !== null) {
+      child.return = fiber;
+      nextEffect = child;
+    } else {
+      if (isViewTransitionEligible) {
+        // We are inside an updated subtree. Any mutations that affected the
+        // parent HostInstance's layout or set of children (such as reorders)
+        // might have also affected the positioning or size of the inner
+        // ViewTransitions. Therefore we need to find them inside.
+        commitNestedViewTransitions(fiber);
+      }
+      commitBeforeMutationEffects_complete(isViewTransitionEligible);
+    }
+  }
+}
+
+function commitBeforeMutationEffects_complete(
+  isViewTransitionEligible: boolean,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    commitBeforeMutationEffectsOnFiber(fiber, isViewTransitionEligible);
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitBeforeMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  isViewTransitionEligible: boolean,
+) {
+  const current = finishedWork.alternate;
+  const flags = finishedWork.flags;
+
+  if (enableCreateEventHandleAPI) {
+    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+      // Check to see if the focused element was inside of a hidden (Suspense) subtree.
+      // TODO: Move this out of the hot path using a dedicated effect tag.
+      // TODO: This should consider Offscreen in general and not just SuspenseComponent.
+      if (
+        finishedWork.tag === SuspenseComponent &&
+        isSuspenseBoundaryBeingHidden(current, finishedWork) &&
+        // $FlowFixMe[incompatible-call] found when upgrading Flow
+        doesFiberContain(finishedWork, focusedInstanceHandle)
+      ) {
+        shouldFireAfterActiveInstanceBlur = true;
+        beforeActiveInstanceBlur(finishedWork);
+      }
+    }
+  }
+
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if ((flags & Update) !== NoFlags) {
+        const updateQueue: FunctionComponentUpdateQueue | null =
+          (finishedWork.updateQueue: any);
+        const eventPayloads = updateQueue !== null ? updateQueue.events : null;
+        if (eventPayloads !== null) {
+          for (let ii = 0; ii < eventPayloads.length; ii++) {
+            const {ref, nextImpl} = eventPayloads[ii];
+            ref.impl = nextImpl;
+          }
+        }
+      }
+      break;
+    }
+    case ClassComponent: {
+      if ((flags & Snapshot) !== NoFlags) {
+        if (current !== null) {
+          commitClassSnapshot(finishedWork, current);
+        }
+      }
+      break;
+    }
+    case HostRoot: {
+      if ((flags & Snapshot) !== NoFlags) {
+        if (supportsMutation) {
+          const root = finishedWork.stateNode;
+          clearContainer(root.containerInfo);
+        }
+      }
+      break;
+    }
+    case HostComponent:
+    case HostHoistable:
+    case HostSingleton:
+    case HostText:
+    case HostPortal:
+    case IncompleteClassComponent:
+      // Nothing to do for these component types
+      break;
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        if (isViewTransitionEligible) {
+          if (current === null) {
+            // This is a new mount. We should have handled this as part of the
+            // Placement effect or it is deeper inside a entering transition.
+          } else {
+            // Something may have mutated within this subtree. This might need to cause
+            // a cross-fade of this parent. We first assign old names to the
+            // previous tree in the before mutation phase in case we need to.
+            // TODO: This walks the tree that we might continue walking anyway.
+            // We should just stash the parent ViewTransitionComponent and continue
+            // walking the tree until we find HostComponent but to do that we need
+            // to use a stack which requires refactoring this phase.
+            commitBeforeUpdateViewTransition(current, finishedWork);
+          }
+        }
+        break;
+      }
+    // Fallthrough
+    default: {
+      if ((flags & Snapshot) !== NoFlags) {
+        throw new Error(
+          '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 commitBeforeMutationEffectsDeletion(
+  deletion: Fiber,
+  isViewTransitionEligible: boolean,
+) {
+  if (enableCreateEventHandleAPI) {
+    // TODO (effects) It would be nice to avoid calling doesFiberContain()
+    // Maybe we can repurpose one of the subtreeFlags positions for this instead?
+    // Use it to store which part of the tree the focused instance is in?
+    // This assumes we can safely determine that instance during the "render" phase.
+    if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) {
+      shouldFireAfterActiveInstanceBlur = true;
+      beforeActiveInstanceBlur(deletion);
+    }
+  }
+  if (isViewTransitionEligible) {
+    commitExitViewTransitions(deletion);
+  }
+}
+
+function commitLayoutEffectOnFiber(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+): void {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  // When updating this function, also update reappearLayoutEffects, which does
+  // most of the same things when an offscreen tree goes from hidden -> visible.
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+      if (flags & Update) {
+        commitHookLayoutEffects(finishedWork, HookLayout | HookHasEffect);
+      }
+      break;
+    }
+    case ClassComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+      if (flags & Update) {
+        commitClassLayoutLifecycles(finishedWork, current);
+      }
+
+      if (flags & Callback) {
+        commitClassCallbacks(finishedWork);
+      }
+
+      if (flags & Ref) {
+        safelyAttachRef(finishedWork, finishedWork.return);
+      }
+      break;
+    }
+    case HostRoot: {
+      const prevProfilerEffectDuration = pushNestedEffectDurations();
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+      if (flags & Callback) {
+        commitRootCallbacks(finishedWork);
+      }
+      if (enableProfilerTimer && enableProfilerCommitHooks) {
+        finishedRoot.effectDuration += popNestedEffectDurations(
+          prevProfilerEffectDuration,
+        );
+      }
+      break;
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        // We acquire the singleton instance first so it has appropriate
+        // styles before other layout effects run. This isn't perfect because
+        // an early sibling of the singleton may have an effect that can
+        // observe the singleton before it is acquired.
+        // @TODO move this to the mutation phase. The reason it isn't there yet
+        // is it seemingly requires an extra traversal because we need to move the
+        // disappear effect into a phase before the appear phase
+        if (current === null && flags & Update) {
+          // Unlike in the reappear path we only acquire on new mount
+          commitHostSingletonAcquisition(finishedWork);
+        }
+        // We fall through to the HostComponent case below.
+      }
+      // Fallthrough
+    }
+    case HostHoistable:
+    case HostComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+
+      // Renderers may schedule work to be done after host components are mounted
+      // (eg DOM renderer may schedule auto-focus for inputs and form controls).
+      // These effects should only be committed when components are first mounted,
+      // aka when there is no current/alternate.
+      if (current === null) {
+        if (flags & Update) {
+          commitHostMount(finishedWork);
+        } else if (flags & Hydrate) {
+          commitHostHydratedInstance(finishedWork);
+        }
+      }
+
+      if (flags & Ref) {
+        safelyAttachRef(finishedWork, finishedWork.return);
+      }
+      break;
+    }
+    case Profiler: {
+      // TODO: Should this fire inside an offscreen tree? Or should it wait to
+      // fire when the tree becomes visible again.
+      if (flags & Update) {
+        const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+        recursivelyTraverseLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
+
+        const profilerInstance = finishedWork.stateNode;
+
+        if (enableProfilerTimer && enableProfilerCommitHooks) {
+          // Propagate layout effect durations to the next nearest Profiler ancestor.
+          // Do not reset these values until the next render so DevTools has a chance to read them first.
+          profilerInstance.effectDuration += bubbleNestedEffectDurations(
+            prevProfilerEffectDuration,
+          );
+        }
+
+        commitProfilerUpdate(
+          finishedWork,
+          current,
+          commitStartTime,
+          profilerInstance.effectDuration,
+        );
+      } else {
+        recursivelyTraverseLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
+      }
+      break;
+    }
+    case ActivityComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+      if (flags & Update) {
+        commitActivityHydrationCallbacks(finishedRoot, finishedWork);
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+      if (flags & Update) {
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+      }
+      if (flags & Callback) {
+        // This Boundary is in fallback and has a dehydrated Suspense instance.
+        // We could in theory assume the dehydrated state but we recheck it for
+        // certainty.
+        const finishedState: SuspenseState | null = finishedWork.memoizedState;
+        if (finishedState !== null) {
+          const dehydrated = finishedState.dehydrated;
+          if (dehydrated !== null) {
+            // Register a callback to retry this boundary once the server has sent the result.
+            const retry = retryDehydratedSuspenseBoundary.bind(
+              null,
+              finishedWork,
+            );
+            registerSuspenseInstanceRetry(dehydrated, retry);
+          }
+        }
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      const isModernRoot =
+        disableLegacyMode || (finishedWork.mode & ConcurrentMode) !== NoMode;
+      if (isModernRoot) {
+        const isHidden = finishedWork.memoizedState !== null;
+        const newOffscreenSubtreeIsHidden =
+          isHidden || offscreenSubtreeIsHidden;
+        if (newOffscreenSubtreeIsHidden) {
+          // The Offscreen tree is hidden. Skip over its layout effects.
+        } else {
+          // The Offscreen tree is visible.
+
+          const wasHidden = current !== null && current.memoizedState !== null;
+          const newOffscreenSubtreeWasHidden =
+            wasHidden || offscreenSubtreeWasHidden;
+          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+
+          if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
+            // This is the root of a reappearing boundary. As we continue
+            // traversing the layout effects, we must also re-mount layout
+            // effects that were unmounted when the Offscreen subtree was
+            // hidden. So this is a superset of the normal commitLayoutEffects.
+            const includeWorkInProgressEffects =
+              (finishedWork.subtreeFlags & LayoutMask) !== NoFlags;
+            recursivelyTraverseReappearLayoutEffects(
+              finishedRoot,
+              finishedWork,
+              includeWorkInProgressEffects,
+            );
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              enableComponentPerformanceTrack &&
+              (finishedWork.mode & ProfileMode) !== NoMode &&
+              componentEffectStartTime >= 0 &&
+              componentEffectEndTime >= 0 &&
+              componentEffectEndTime - componentEffectStartTime > 0.05
+            ) {
+              logComponentReappeared(
+                finishedWork,
+                componentEffectStartTime,
+                componentEffectEndTime,
+              );
+            }
+          } else {
+            recursivelyTraverseLayoutEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+            );
+          }
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        }
+      } else {
+        recursivelyTraverseLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if (__DEV__) {
+          if (flags & ViewTransitionNamedStatic) {
+            trackNamedViewTransition(finishedWork);
+          }
+        }
+        recursivelyTraverseLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
+        if (flags & Ref) {
+          safelyAttachRef(finishedWork, finishedWork.return);
+        }
+        break;
+      }
+      break;
+    }
+    case Fragment:
+      if (enableFragmentRefs) {
+        if (flags & Ref) {
+          safelyAttachRef(finishedWork, finishedWork.return);
+        }
+      }
+    // Fallthrough
+    default: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0
+  ) {
+    if (componentEffectSpawnedUpdate || componentEffectDuration > 0.05) {
+      logComponentEffect(
+        finishedWork,
+        componentEffectStartTime,
+        componentEffectEndTime,
+        componentEffectDuration,
+        componentEffectErrors,
+      );
+    }
+    if (
+      // Insertion
+      finishedWork.alternate === null &&
+      finishedWork.return !== null &&
+      finishedWork.return.alternate !== null &&
+      componentEffectEndTime - componentEffectStartTime > 0.05
+    ) {
+      const isHydration = isHydratingParent(
+        finishedWork.return.alternate,
+        finishedWork.return,
+      );
+      if (!isHydration) {
+        logComponentMount(
+          finishedWork,
+          componentEffectStartTime,
+          componentEffectEndTime,
+        );
+      }
+    }
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+}
+
+function abortRootTransitions(
+  root: FiberRoot,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    const rootTransitions = root.incompleteTransitions;
+    deletedTransitions.forEach(transition => {
+      if (rootTransitions.has(transition)) {
+        const transitionInstance: TracingMarkerInstance = (rootTransitions.get(
+          transition,
+        ): any);
+        if (transitionInstance.aborts === null) {
+          transitionInstance.aborts = [];
+        }
+        transitionInstance.aborts.push(abort);
+
+        if (deletedOffscreenInstance !== null) {
+          if (
+            transitionInstance.pendingBoundaries !== null &&
+            transitionInstance.pendingBoundaries.has(deletedOffscreenInstance)
+          ) {
+            // $FlowFixMe[incompatible-use] found when upgrading Flow
+            transitionInstance.pendingBoundaries.delete(
+              deletedOffscreenInstance,
+            );
+          }
+        }
+      }
+    });
+  }
+}
+
+function abortTracingMarkerTransitions(
+  abortedFiber: Fiber,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    const markerInstance: TracingMarkerInstance = abortedFiber.stateNode;
+    const markerTransitions = markerInstance.transitions;
+    const pendingBoundaries = markerInstance.pendingBoundaries;
+    if (markerTransitions !== null) {
+      // TODO: Refactor this code. Is there a way to move this code to
+      // the deletions phase instead of calculating it here while making sure
+      // complete is called appropriately?
+      deletedTransitions.forEach(transition => {
+        // If one of the transitions on the tracing marker is a transition
+        // that was in an aborted subtree, we will abort that tracing marker
+        if (
+          abortedFiber !== null &&
+          markerTransitions.has(transition) &&
+          (markerInstance.aborts === null ||
+            !markerInstance.aborts.includes(abort))
+        ) {
+          if (markerInstance.transitions !== null) {
+            if (markerInstance.aborts === null) {
+              markerInstance.aborts = [abort];
+              addMarkerIncompleteCallbackToPendingTransition(
+                abortedFiber.memoizedProps.name,
+                markerInstance.transitions,
+                markerInstance.aborts,
+              );
+            } else {
+              markerInstance.aborts.push(abort);
+            }
+
+            // We only want to call onTransitionProgress when the marker hasn't been
+            // deleted
+            if (
+              deletedOffscreenInstance !== null &&
+              !isInDeletedTree &&
+              pendingBoundaries !== null &&
+              pendingBoundaries.has(deletedOffscreenInstance)
+            ) {
+              pendingBoundaries.delete(deletedOffscreenInstance);
+
+              addMarkerProgressCallbackToPendingTransition(
+                abortedFiber.memoizedProps.name,
+                deletedTransitions,
+                pendingBoundaries,
+              );
+            }
+          }
+        }
+      });
+    }
+  }
+}
+
+function abortParentMarkerTransitionsForDeletedFiber(
+  abortedFiber: Fiber,
+  abort: TransitionAbort,
+  deletedTransitions: Set<Transition>,
+  deletedOffscreenInstance: OffscreenInstance | null,
+  isInDeletedTree: boolean,
+) {
+  if (enableTransitionTracing) {
+    // Find all pending markers that are waiting on child suspense boundaries in the
+    // aborted subtree and cancels them
+    let fiber: null | Fiber = abortedFiber;
+    while (fiber !== null) {
+      switch (fiber.tag) {
+        case TracingMarkerComponent:
+          abortTracingMarkerTransitions(
+            fiber,
+            abort,
+            deletedTransitions,
+            deletedOffscreenInstance,
+            isInDeletedTree,
+          );
+          break;
+        case HostRoot:
+          const root = fiber.stateNode;
+          abortRootTransitions(
+            root,
+            abort,
+            deletedTransitions,
+            deletedOffscreenInstance,
+            isInDeletedTree,
+          );
+
+          break;
+        default:
+          break;
+      }
+
+      fiber = fiber.return;
+    }
+  }
+}
+
+function commitTransitionProgress(offscreenFiber: Fiber) {
+  if (enableTransitionTracing) {
+    // This function adds suspense boundaries to the root
+    // or tracing marker's pendingBoundaries map.
+    // When a suspense boundary goes from a resolved to a fallback
+    // state we add the boundary to the map, and when it goes from
+    // a fallback to a resolved state, we remove the boundary from
+    // the map.
+
+    // We use stateNode on the Offscreen component as a stable object
+    // that doesnt change from render to render. This way we can
+    // distinguish between different Offscreen instances (vs. the same
+    // Offscreen instance with different fibers)
+    const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
+
+    let prevState: SuspenseState | null = null;
+    const previousFiber = offscreenFiber.alternate;
+    if (previousFiber !== null && previousFiber.memoizedState !== null) {
+      prevState = previousFiber.memoizedState;
+    }
+    const nextState: SuspenseState | null = offscreenFiber.memoizedState;
+
+    const wasHidden = prevState !== null;
+    const isHidden = nextState !== null;
+
+    const pendingMarkers = offscreenInstance._pendingMarkers;
+    // If there is a name on the suspense boundary, store that in
+    // the pending boundaries.
+    let name = null;
+    const parent = offscreenFiber.return;
+    if (
+      parent !== null &&
+      parent.tag === SuspenseComponent &&
+      parent.memoizedProps.name
+    ) {
+      name = parent.memoizedProps.name;
+    }
+
+    if (!wasHidden && isHidden) {
+      // The suspense boundaries was just hidden. Add the boundary
+      // to the pending boundary set if it's there
+      if (pendingMarkers !== null) {
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingBoundaries;
+          const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
+          if (
+            pendingBoundaries !== null &&
+            !pendingBoundaries.has(offscreenInstance)
+          ) {
+            pendingBoundaries.set(offscreenInstance, {
+              name,
+            });
+            if (transitions !== null) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerName !== null
+              ) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerName,
+                  transitions,
+                  pendingBoundaries,
+                );
+              } else if (markerInstance.tag === TransitionRoot) {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
+            }
+          }
+        });
+      }
+    } else if (wasHidden && !isHidden) {
+      // The suspense boundary went from hidden to visible. Remove
+      // the boundary from the pending suspense boundaries set
+      // if it's there
+      if (pendingMarkers !== null) {
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingBoundaries;
+          const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
+          if (
+            pendingBoundaries !== null &&
+            pendingBoundaries.has(offscreenInstance)
+          ) {
+            pendingBoundaries.delete(offscreenInstance);
+            if (transitions !== null) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerName !== null
+              ) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerName,
+                  transitions,
+                  pendingBoundaries,
+                );
+
+                // If there are no more unresolved suspense boundaries, the interaction
+                // is considered finished
+                if (pendingBoundaries.size === 0) {
+                  if (markerInstance.aborts === null) {
+                    addMarkerCompleteCallbackToPendingTransition(
+                      markerName,
+                      transitions,
+                    );
+                  }
+                  markerInstance.transitions = null;
+                  markerInstance.pendingBoundaries = null;
+                  markerInstance.aborts = null;
+                }
+              } else if (markerInstance.tag === TransitionRoot) {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
+            }
+          }
+        });
+      }
+    }
+  }
+}
+
+function hideOrUnhideAllChildren(parentFiber: Fiber, isHidden: boolean) {
+  if (!supportsMutation) {
+    return;
+  }
+  // Finds the nearest host component children and updates their visibility
+  // to either hidden or visible.
+  let child = parentFiber.child;
+  while (child !== null) {
+    hideOrUnhideAllChildrenOnFiber(child, isHidden);
+    child = child.sibling;
+  }
+}
+
+function hideOrUnhideAllChildrenOnFiber(fiber: Fiber, isHidden: boolean) {
+  if (!supportsMutation) {
+    return;
+  }
+  switch (fiber.tag) {
+    case HostComponent:
+    case HostHoistable: {
+      // Found the nearest host component. Hide it.
+      commitShowHideHostInstance(fiber, isHidden);
+      // Typically, only the nearest host nodes need to be hidden, since that
+      // has the effect of also hiding everything inside of them.
+      //
+      // However, there's a special case for portals, because portals do not
+      // exist in the regular host tree hierarchy; we can't assume that just
+      // because a portal's HostComponent parent in the React tree will also be
+      // a parent in the actual host tree.
+      //
+      // So, if any portals exist within the tree, regardless of how deeply
+      // nested they are, we need to repeat this algorithm for its children.
+      hideOrUnhideNearestPortals(fiber, isHidden);
+      return;
+    }
+    case HostText: {
+      commitShowHideHostTextInstance(fiber, isHidden);
+      return;
+    }
+    case DehydratedFragment: {
+      commitShowHideSuspenseBoundary(fiber, isHidden);
+      return;
+    }
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
+      const offscreenState: OffscreenState | null = fiber.memoizedState;
+      if (offscreenState !== null) {
+        // Found a nested Offscreen component that is hidden.
+        // Don't search any deeper. This tree should remain hidden.
+      } else {
+        hideOrUnhideAllChildren(fiber, isHidden);
+      }
+      return;
+    }
+    default: {
+      hideOrUnhideAllChildren(fiber, isHidden);
+      return;
+    }
+  }
+}
+
+function hideOrUnhideNearestPortals(parentFiber: Fiber, isHidden: boolean) {
+  if (!supportsMutation) {
+    return;
+  }
+  if (parentFiber.subtreeFlags & PortalStatic) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      hideOrUnhideNearestPortalsOnFiber(child, isHidden);
+      child = child.sibling;
+    }
+  }
+}
+
+function hideOrUnhideNearestPortalsOnFiber(fiber: Fiber, isHidden: boolean) {
+  if (!supportsMutation) {
+    return;
+  }
+  switch (fiber.tag) {
+    case HostPortal: {
+      // Found a portal. Switch back to the normal hide/unhide algorithm to
+      // toggle the visibility of its children.
+      hideOrUnhideAllChildrenOnFiber(fiber, isHidden);
+      return;
+    }
+    case OffscreenComponent: {
+      const offscreenState: OffscreenState | null = fiber.memoizedState;
+      if (offscreenState !== null) {
+        // Found a nested Offscreen component that is hidden. Don't search any
+        // deeper. This tree should remain hidden.
+      } else {
+        hideOrUnhideNearestPortals(fiber, isHidden);
+      }
+      return;
+    }
+    default: {
+      hideOrUnhideNearestPortals(fiber, isHidden);
+      return;
+    }
+  }
+}
+
+function detachFiberMutation(fiber: Fiber) {
+  // Cut off the return pointer to disconnect it from the tree.
+  // This enables us to detect and warn against state updates on an unmounted component.
+  // It also prevents events from bubbling from within disconnected components.
+  //
+  // Ideally, we should also 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
+  // one so we'll settle for GC:ing the subtree of this child.
+  // This child itself will be GC:ed when the parent updates the next time.
+  //
+  // Note that we can't clear child or sibling pointers yet.
+  // They're needed for passive effects and for findDOMNode.
+  // We defer those fields, and all other cleanup, to the passive phase (see detachFiberAfterEffects).
+  //
+  // Don't reset the alternate yet, either. We need that so we can detach the
+  // alternate's fields in the passive phase. Clearing the return pointer is
+  // sufficient for findDOMNode semantics.
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    alternate.return = null;
+  }
+  fiber.return = null;
+}
+
+function detachFiberAfterEffects(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    fiber.alternate = null;
+    detachFiberAfterEffects(alternate);
+  }
+
+  // Clear cyclical Fiber fields. This level alone is designed to roughly
+  // approximate the planned Fiber refactor. In that world, `setState` will be
+  // bound to a special "instance" object instead of a Fiber. The Instance
+  // object will not have any of these fields. It will only be connected to
+  // the fiber tree via a single link at the root. So if this level alone is
+  // sufficient to fix memory issues, that bodes well for our plans.
+  fiber.child = null;
+  fiber.deletions = null;
+  fiber.sibling = null;
+
+  // The `stateNode` is cyclical because on host nodes it points to the host
+  // tree, which has its own pointers to children, parents, and siblings.
+  // The other host nodes also point back to fibers, so we should detach that
+  // one, too.
+  if (fiber.tag === HostComponent) {
+    const hostInstance: Instance = fiber.stateNode;
+    if (hostInstance !== null) {
+      detachDeletedInstance(hostInstance);
+    }
+  }
+  fiber.stateNode = null;
+
+  if (__DEV__) {
+    fiber._debugOwner = null;
+  }
+
+  // Theoretically, nothing in here should be necessary, because we already
+  // disconnected the fiber from the tree. So even if something leaks this
+  // particular fiber, it won't leak anything else.
+  fiber.return = null;
+  fiber.dependencies = null;
+  fiber.memoizedProps = null;
+  fiber.memoizedState = null;
+  fiber.pendingProps = null;
+  fiber.stateNode = null;
+  // TODO: Move to `commitPassiveUnmountInsideDeletedTreeOnFiber` instead.
+  fiber.updateQueue = null;
+}
+
+// These are tracked on the stack as we recursively traverse a
+// deleted subtree.
+// TODO: Update these during the whole mutation phase, not just during
+// a deletion.
+let hostParent: Instance | Container | null = null;
+let hostParentIsContainer: boolean = false;
+
+function commitDeletionEffects(
+  root: FiberRoot,
+  returnFiber: Fiber,
+  deletedFiber: Fiber,
+) {
+  const prevEffectStart = pushComponentEffectStart();
+
+  if (supportsMutation) {
+    // We only have the top Fiber that was deleted but we need to recurse down its
+    // children to find all the terminal nodes.
+
+    // Recursively delete all host nodes from the parent, detach refs, clean
+    // up mounted layout effects, and call componentWillUnmount.
+
+    // We only need to remove the topmost host child in each branch. But then we
+    // still need to keep traversing to unmount effects, refs, and cWU. TODO: We
+    // could split this into two separate traversals functions, where the second
+    // one doesn't include any removeChild logic. This is maybe the same
+    // function as "disappearLayoutEffects" (or whatever that turns into after
+    // the layout phase is refactored to use recursion).
+
+    // Before starting, find the nearest host parent on the stack so we know
+    // which instance/container to remove the children from.
+    // TODO: Instead of searching up the fiber return path on every deletion, we
+    // can track the nearest host component on the JS stack as we traverse the
+    // tree during the commit phase. This would make insertions faster, too.
+    let parent: null | Fiber = returnFiber;
+    findParent: while (parent !== null) {
+      switch (parent.tag) {
+        case HostSingleton: {
+          if (supportsSingletons) {
+            if (isSingletonScope(parent.type)) {
+              hostParent = parent.stateNode;
+              hostParentIsContainer = false;
+              break findParent;
+            }
+            break;
+          }
+          // Expected fallthrough when supportsSingletons is false
+        }
+        case HostComponent: {
+          hostParent = parent.stateNode;
+          hostParentIsContainer = false;
+          break findParent;
+        }
+        case HostRoot:
+        case HostPortal: {
+          hostParent = parent.stateNode.containerInfo;
+          hostParentIsContainer = true;
+          break findParent;
+        }
+      }
+      parent = parent.return;
+    }
+    if (hostParent === null) {
+      throw new Error(
+        'Expected to find a host parent. This error is likely caused by ' +
+          'a bug in React. Please file an issue.',
+      );
+    }
+
+    commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber);
+    hostParent = null;
+    hostParentIsContainer = false;
+  } else {
+    // Detach refs and call componentWillUnmount() on the whole subtree.
+    commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber);
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (deletedFiber.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    componentEffectEndTime - componentEffectStartTime > 0.05
+  ) {
+    logComponentUnmount(
+      deletedFiber,
+      componentEffectStartTime,
+      componentEffectEndTime,
+    );
+  }
+  popComponentEffectStart(prevEffectStart);
+
+  detachFiberMutation(deletedFiber);
+}
+
+function recursivelyTraverseDeletionEffects(
+  finishedRoot: FiberRoot,
+  nearestMountedAncestor: Fiber,
+  parent: Fiber,
+) {
+  // TODO: Use a static flag to skip trees that don't have unmount effects
+  let child = parent.child;
+  while (child !== null) {
+    commitDeletionEffectsOnFiber(finishedRoot, nearestMountedAncestor, child);
+    child = child.sibling;
+  }
+}
+
+function commitDeletionEffectsOnFiber(
+  finishedRoot: FiberRoot,
+  nearestMountedAncestor: Fiber,
+  deletedFiber: Fiber,
+) {
+  // TODO: Delete this Hook once new DevTools ships everywhere. No longer needed.
+  onCommitUnmount(deletedFiber);
+
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+
+  // The cases in this outer switch modify the stack before they traverse
+  // into their subtree. There are simpler cases in the inner switch
+  // that don't modify the stack.
+  switch (deletedFiber.tag) {
+    case HostHoistable: {
+      if (supportsResources) {
+        if (!offscreenSubtreeWasHidden) {
+          safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        }
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        if (deletedFiber.memoizedState) {
+          releaseResource(deletedFiber.memoizedState);
+        } else if (deletedFiber.stateNode) {
+          unmountHoistable(deletedFiber.stateNode);
+        }
+        break;
+      }
+      // Fall through
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        if (!offscreenSubtreeWasHidden) {
+          safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        }
+
+        const prevHostParent = hostParent;
+        const prevHostParentIsContainer = hostParentIsContainer;
+        if (isSingletonScope(deletedFiber.type)) {
+          hostParent = deletedFiber.stateNode;
+          hostParentIsContainer = false;
+        }
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+
+        // Normally this is called in passive unmount effect phase however with
+        // HostSingleton we warn if you acquire one that is already associated to
+        // a different fiber. To increase our chances of avoiding this, specifically
+        // if you keyed a HostSingleton so there will be a delete followed by a Placement
+        // we treat detach eagerly here
+        commitHostSingletonRelease(deletedFiber);
+
+        hostParent = prevHostParent;
+        hostParentIsContainer = prevHostParentIsContainer;
+
+        break;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      if (!offscreenSubtreeWasHidden) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      }
+      if (enableFragmentRefs && deletedFiber.tag === HostComponent) {
+        commitFragmentInstanceDeletionEffects(deletedFiber);
+      }
+      // Intentional fallthrough to next branch
+    }
+    case HostText: {
+      // We only need to remove the nearest host child. Set the host parent
+      // to `null` on the stack to indicate that nested children don't
+      // need to be removed.
+      if (supportsMutation) {
+        const prevHostParent = hostParent;
+        const prevHostParentIsContainer = hostParentIsContainer;
+        hostParent = null;
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        hostParent = prevHostParent;
+        hostParentIsContainer = prevHostParentIsContainer;
+
+        if (hostParent !== null) {
+          // Now that all the child effects have unmounted, we can remove the
+          // node from the tree.
+          if (hostParentIsContainer) {
+            commitHostRemoveChildFromContainer(
+              deletedFiber,
+              nearestMountedAncestor,
+              ((hostParent: any): Container),
+              (deletedFiber.stateNode: Instance | TextInstance),
+            );
+          } else {
+            commitHostRemoveChild(
+              deletedFiber,
+              nearestMountedAncestor,
+              ((hostParent: any): Instance),
+              (deletedFiber.stateNode: Instance | TextInstance),
+            );
+          }
+        }
+      } else {
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+      }
+      break;
+    }
+    case DehydratedFragment: {
+      if (enableSuspenseCallback) {
+        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+        if (hydrationCallbacks !== null) {
+          try {
+            const onDeleted = hydrationCallbacks.onDeleted;
+            if (onDeleted) {
+              onDeleted(
+                (deletedFiber.stateNode: SuspenseInstance | ActivityInstance),
+              );
+            }
+          } catch (error) {
+            captureCommitPhaseError(
+              deletedFiber,
+              nearestMountedAncestor,
+              error,
+            );
+          }
+        }
+      }
+
+      // Dehydrated fragments don't have any children
+
+      // Delete the dehydrated suspense boundary and all of its content.
+      if (supportsMutation) {
+        if (hostParent !== null) {
+          if (hostParentIsContainer) {
+            clearSuspenseBoundaryFromContainer(
+              ((hostParent: any): Container),
+              (deletedFiber.stateNode: SuspenseInstance),
+            );
+          } else {
+            clearSuspenseBoundary(
+              ((hostParent: any): Instance),
+              (deletedFiber.stateNode: SuspenseInstance),
+            );
+          }
+        }
+      }
+      break;
+    }
+    case HostPortal: {
+      if (supportsMutation) {
+        // When we go into a portal, it becomes the parent to remove from.
+        const prevHostParent = hostParent;
+        const prevHostParentIsContainer = hostParentIsContainer;
+        hostParent = deletedFiber.stateNode.containerInfo;
+        hostParentIsContainer = true;
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        hostParent = prevHostParent;
+        hostParentIsContainer = prevHostParentIsContainer;
+      } else {
+        if (supportsPersistence) {
+          commitHostPortalContainerChildren(
+            deletedFiber.stateNode,
+            deletedFiber,
+            createContainerChildSet(),
+          );
+        }
+
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+      }
+      break;
+    }
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      if (
+        enableHiddenSubtreeInsertionEffectCleanup ||
+        !offscreenSubtreeWasHidden
+      ) {
+        // TODO: Use a commitHookInsertionUnmountEffects wrapper to record timings.
+        commitHookEffectListUnmount(
+          HookInsertion,
+          deletedFiber,
+          nearestMountedAncestor,
+        );
+      }
+      if (!offscreenSubtreeWasHidden) {
+        commitHookLayoutUnmountEffects(
+          deletedFiber,
+          nearestMountedAncestor,
+          HookLayout,
+        );
+      }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      break;
+    }
+    case ClassComponent: {
+      if (!offscreenSubtreeWasHidden) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        const instance = deletedFiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(
+            deletedFiber,
+            nearestMountedAncestor,
+            instance,
+          );
+        }
+      }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      break;
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        if (!offscreenSubtreeWasHidden) {
+          safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        }
+      }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      break;
+    }
+    case OffscreenComponent: {
+      if (disableLegacyMode || deletedFiber.mode & ConcurrentMode) {
+        // If this offscreen component is hidden, we already unmounted it. Before
+        // deleting the children, track that it's already unmounted so that we
+        // don't attempt to unmount the effects again.
+        // TODO: If the tree is hidden, in most cases we should be able to skip
+        // over the nested children entirely. An exception is we haven't yet found
+        // the topmost host node to delete, which we already track on the stack.
+        // But the other case is portals, which need to be detached no matter how
+        // deeply they are nested. We should use a subtree flag to track whether a
+        // subtree includes a nested portal.
+        const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+        offscreenSubtreeWasHidden =
+          prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
+
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+      } else {
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if (__DEV__) {
+          if (deletedFiber.flags & ViewTransitionNamedStatic) {
+            untrackNamedViewTransition(deletedFiber);
+          }
+        }
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        break;
+      }
+      // Fallthrough
+    }
+    case Fragment: {
+      if (enableFragmentRefs) {
+        if (!offscreenSubtreeWasHidden) {
+          safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        }
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        break;
+      }
+      // Fallthrough
+    }
+    default: {
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (deletedFiber.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      deletedFiber,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+}
+
+function commitSuspenseCallback(finishedWork: Fiber) {
+  // TODO: Delete this feature. It's not properly covered by DEV features.
+  const newState: SuspenseState | null = finishedWork.memoizedState;
+  if (enableSuspenseCallback && newState !== null) {
+    const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;
+    if (typeof suspenseCallback === 'function') {
+      const retryQueue: RetryQueue | null = (finishedWork.updateQueue: any);
+      if (retryQueue !== null) {
+        suspenseCallback(new Set(retryQueue));
+      }
+    } else if (__DEV__) {
+      if (suspenseCallback !== undefined) {
+        console.error('Unexpected type for suspenseCallback.');
+      }
+    }
+  }
+}
+
+function commitActivityHydrationCallbacks(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+) {
+  if (!supportsHydration) {
+    return;
+  }
+  const newState: ActivityState | null = finishedWork.memoizedState;
+  if (newState === null) {
+    const current = finishedWork.alternate;
+    if (current !== null) {
+      const prevState: ActivityState | null = current.memoizedState;
+      if (prevState !== null) {
+        const activityInstance = prevState.dehydrated;
+        commitHostHydratedActivity(activityInstance, finishedWork);
+        if (enableSuspenseCallback) {
+          try {
+            // TODO: Delete this feature. It's not properly covered by DEV features.
+            const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+            if (hydrationCallbacks !== null) {
+              const onHydrated = hydrationCallbacks.onHydrated;
+              if (onHydrated) {
+                onHydrated(activityInstance);
+              }
+            }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
+        }
+      }
+    }
+  }
+}
+
+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) {
+          commitHostHydratedSuspense(suspenseInstance, finishedWork);
+          if (enableSuspenseCallback) {
+            try {
+              // TODO: Delete this feature. It's not properly covered by DEV features.
+              const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+              if (hydrationCallbacks !== null) {
+                const onHydrated = hydrationCallbacks.onHydrated;
+                if (onHydrated) {
+                  onHydrated(suspenseInstance);
+                }
+              }
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function getRetryCache(finishedWork: Fiber) {
+  // TODO: Unify the interface for the retry cache so we don't have to switch
+  // on the tag like this.
+  switch (finishedWork.tag) {
+    case ActivityComponent:
+    case SuspenseComponent:
+    case SuspenseListComponent: {
+      let retryCache = finishedWork.stateNode;
+      if (retryCache === null) {
+        retryCache = finishedWork.stateNode = new PossiblyWeakSet();
+      }
+      return retryCache;
+    }
+    case OffscreenComponent: {
+      const instance: OffscreenInstance = finishedWork.stateNode;
+      let retryCache: null | Set<Wakeable> | WeakSet<Wakeable> =
+        instance._retryCache;
+      if (retryCache === null) {
+        retryCache = instance._retryCache = new PossiblyWeakSet();
+      }
+      return retryCache;
+    }
+    default: {
+      throw new Error(
+        `Unexpected Suspense handler tag (${finishedWork.tag}). This is a ` +
+          'bug in React.',
+      );
+    }
+  }
+}
+
+function attachSuspenseRetryListeners(
+  finishedWork: Fiber,
+  wakeables: RetryQueue,
+) {
+  // If this boundary just timed out, then it will have a set of wakeables.
+  // For each wakeable, attach a listener so that when it resolves, React
+  // attempts to re-render the boundary in the primary (pre-timeout) state.
+  const retryCache = getRetryCache(finishedWork);
+  wakeables.forEach(wakeable => {
+    // Memoize using the boundary fiber to prevent redundant listeners.
+    if (!retryCache.has(wakeable)) {
+      retryCache.add(wakeable);
+
+      if (enableUpdaterTracking) {
+        if (isDevToolsPresent) {
+          if (inProgressLanes !== null && inProgressRoot !== null) {
+            // If we have pending work still, associate the original updaters with it.
+            restorePendingUpdaters(inProgressRoot, inProgressLanes);
+          } else {
+            throw Error(
+              'Expected finished root and lanes to be set. This is a bug in React.',
+            );
+          }
+        }
+      }
+
+      const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
+      wakeable.then(retry, retry);
+    }
+  });
+}
+
+// This function detects when a Suspense boundary goes from visible to hidden.
+// It returns false if the boundary is already hidden.
+// TODO: Use an effect tag.
+function isSuspenseBoundaryBeingHidden(
+  current: Fiber | null,
+  finishedWork: Fiber,
+): boolean {
+  if (current !== null) {
+    const oldState: SuspenseState | null = current.memoizedState;
+    if (oldState === null || oldState.dehydrated !== null) {
+      const newState: SuspenseState | null = finishedWork.memoizedState;
+      return newState !== null && newState.dehydrated === null;
+    }
+  }
+  return false;
+}
+
+export function commitMutationEffects(
+  root: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+) {
+  inProgressLanes = committedLanes;
+  inProgressRoot = root;
+
+  rootViewTransitionAffected = false;
+  inUpdateViewTransition = false;
+
+  resetComponentEffectTimers();
+
+  commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
+
+  inProgressLanes = null;
+  inProgressRoot = null;
+}
+
+function recursivelyTraverseMutationEffects(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  lanes: Lanes,
+) {
+  // Deletions effects can be scheduled on any fiber type. They need to happen
+  // before the children effects have fired.
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      commitDeletionEffects(root, parentFiber, childToDelete);
+    }
+  }
+
+  if (parentFiber.subtreeFlags & (MutationMask | Cloned)) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      commitMutationEffectsOnFiber(child, root, lanes);
+      child = child.sibling;
+    }
+  }
+}
+
+let currentHoistableRoot: HoistableRoot | null = null;
+
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  lanes: Lanes,
+) {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  const current = finishedWork.alternate;
+  const flags = finishedWork.flags;
+
+  // The effect flag should be checked *after* we refine the type of fiber,
+  // because the fiber tag is more specific. An exception is any flag related
+  // to reconciliation, because those can be set on all fiber types.
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (flags & Update) {
+        commitHookEffectListUnmount(
+          HookInsertion | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
+        // TODO: Use a commitHookInsertionUnmountEffects wrapper to record timings.
+        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+        commitHookLayoutUnmountEffects(
+          finishedWork,
+          finishedWork.return,
+          HookLayout | HookHasEffect,
+        );
+      }
+      break;
+    }
+    case ClassComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (flags & Ref) {
+        if (!offscreenSubtreeWasHidden && current !== null) {
+          safelyDetachRef(current, current.return);
+        }
+      }
+
+      if (flags & Callback && offscreenSubtreeIsHidden) {
+        const updateQueue: UpdateQueue<mixed> | null =
+          (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
+          deferHiddenCallbacks(updateQueue);
+        }
+      }
+      break;
+    }
+    case HostHoistable: {
+      if (supportsResources) {
+        // We cast because we always set the root at the React root and so it cannot be
+        // null while we are processing mutation effects
+        const hoistableRoot: HoistableRoot = (currentHoistableRoot: any);
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+
+        if (flags & Ref) {
+          if (!offscreenSubtreeWasHidden && current !== null) {
+            safelyDetachRef(current, current.return);
+          }
+        }
+
+        if (flags & Update) {
+          const currentResource =
+            current !== null ? current.memoizedState : null;
+          const newResource = finishedWork.memoizedState;
+          if (current === null) {
+            // We are mounting a new HostHoistable Fiber. We fork the mount
+            // behavior based on whether this instance is a Hoistable Instance
+            // or a Hoistable Resource
+            if (newResource === null) {
+              if (finishedWork.stateNode === null) {
+                finishedWork.stateNode = hydrateHoistable(
+                  hoistableRoot,
+                  finishedWork.type,
+                  finishedWork.memoizedProps,
+                  finishedWork,
+                );
+              } else {
+                mountHoistable(
+                  hoistableRoot,
+                  finishedWork.type,
+                  finishedWork.stateNode,
+                );
+              }
+            } else {
+              finishedWork.stateNode = acquireResource(
+                hoistableRoot,
+                newResource,
+                finishedWork.memoizedProps,
+              );
+            }
+          } else if (currentResource !== newResource) {
+            // We are moving to or from Hoistable Resource, or between different Hoistable Resources
+            if (currentResource === null) {
+              if (current.stateNode !== null) {
+                unmountHoistable(current.stateNode);
+              }
+            } else {
+              releaseResource(currentResource);
+            }
+            if (newResource === null) {
+              mountHoistable(
+                hoistableRoot,
+                finishedWork.type,
+                finishedWork.stateNode,
+              );
+            } else {
+              acquireResource(
+                hoistableRoot,
+                newResource,
+                finishedWork.memoizedProps,
+              );
+            }
+          } else if (newResource === null && finishedWork.stateNode !== null) {
+            commitHostUpdate(
+              finishedWork,
+              finishedWork.memoizedProps,
+              current.memoizedProps,
+            );
+          }
+        }
+        break;
+      }
+      // Fall through
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+        if (flags & Ref) {
+          if (!offscreenSubtreeWasHidden && current !== null) {
+            safelyDetachRef(current, current.return);
+          }
+        }
+        if (current !== null && flags & Update) {
+          const newProps = finishedWork.memoizedProps;
+          const oldProps = current.memoizedProps;
+          commitHostUpdate(finishedWork, newProps, oldProps);
+        }
+        break;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      // We've hit a host component, so it's no longer a direct parent.
+      const prevOffscreenDirectParentIsHidden = offscreenDirectParentIsHidden;
+      offscreenDirectParentIsHidden = false;
+
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+
+      offscreenDirectParentIsHidden = prevOffscreenDirectParentIsHidden;
+
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (flags & Ref) {
+        if (!offscreenSubtreeWasHidden && current !== null) {
+          safelyDetachRef(current, current.return);
+        }
+      }
+      if (supportsMutation) {
+        // TODO: ContentReset gets cleared by the children during the commit
+        // phase. This is a refactor hazard because it means we must read
+        // flags the flags after `commitReconciliationEffects` has already run;
+        // the order matters. We should refactor so that ContentReset does not
+        // rely on mutating the flag during commit. Like by setting a flag
+        // during the render phase instead.
+        if (finishedWork.flags & ContentReset) {
+          commitHostResetTextContent(finishedWork);
+        }
+
+        if (flags & Update) {
+          const instance: Instance = finishedWork.stateNode;
+          if (instance != null) {
+            // Commit the work prepared earlier.
+            // For hydration we reuse the update path but we treat the oldProps
+            // as the newProps. The updatePayload will contain the real change in
+            // this case.
+            const newProps = finishedWork.memoizedProps;
+            const oldProps =
+              current !== null ? current.memoizedProps : newProps;
+            commitHostUpdate(finishedWork, newProps, oldProps);
+          }
+        }
+
+        if (flags & FormReset) {
+          needsFormReset = true;
+          if (__DEV__) {
+            if (finishedWork.type !== 'form') {
+              // Paranoid coding. In case we accidentally start using the
+              // FormReset bit for something else.
+              console.error(
+                'Unexpected host component type. Expected a form. This is a ' +
+                  'bug in React.',
+              );
+            }
+          }
+        }
+      } else {
+        if (enableEagerAlternateStateNodeCleanup) {
+          if (supportsPersistence) {
+            if (finishedWork.alternate !== null) {
+              // `finishedWork.alternate.stateNode` is pointing to a stale shadow
+              // node at this point, retaining it and its subtree. To reclaim
+              // memory, point `alternate.stateNode` to new shadow node. This
+              // prevents shadow node from staying in memory longer than it
+              // needs to. The correct behaviour of this is checked by test in
+              // React Native: ShadowNodeReferenceCounter-itest.js#L150
+              finishedWork.alternate.stateNode = finishedWork.stateNode;
+            }
+          }
+        }
+      }
+      break;
+    }
+    case HostText: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (flags & Update) {
+        if (supportsMutation) {
+          if (finishedWork.stateNode === null) {
+            throw new Error(
+              'This should have a text node initialized. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+
+          const newText: string = finishedWork.memoizedProps;
+          // For hydration we reuse the update path but we treat the oldProps
+          // as the newProps. The updatePayload will contain the real change in
+          // this case.
+          const oldText: string =
+            current !== null ? current.memoizedProps : newText;
+
+          commitHostTextUpdate(finishedWork, newText, oldText);
+        }
+      }
+      break;
+    }
+    case HostRoot: {
+      const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+      pushRootMutationContext();
+      if (supportsResources) {
+        prepareToCommitHoistables();
+
+        const previousHoistableRoot = currentHoistableRoot;
+        currentHoistableRoot = getHoistableRoot(root.containerInfo);
+
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        currentHoistableRoot = previousHoistableRoot;
+
+        commitReconciliationEffects(finishedWork, lanes);
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+      }
+
+      if (flags & Update) {
+        if (supportsMutation && supportsHydration) {
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              commitHostHydratedContainer(root, finishedWork);
+            }
+          }
+        }
+        if (supportsPersistence) {
+          commitHostRootContainerChildren(root, finishedWork);
+        }
+      }
+
+      if (needsFormReset) {
+        // A form component requested to be reset during this commit. We do this
+        // after all mutations in the rest of the tree so that `defaultValue`
+        // will already be updated. This way you can update `defaultValue` using
+        // data sent by the server as a result of the form submission.
+        //
+        // Theoretically we could check finishedWork.subtreeFlags & FormReset,
+        // but the FormReset bit is overloaded with other flags used by other
+        // fiber types. So this extra variable lets us skip traversing the tree
+        // except when a form was actually submitted.
+        needsFormReset = false;
+        recursivelyResetForms(finishedWork);
+      }
+
+      if (enableProfilerTimer && enableProfilerCommitHooks) {
+        root.effectDuration += popNestedEffectDurations(
+          prevProfilerEffectDuration,
+        );
+      }
+
+      popMutationContext(false);
+
+      if (
+        enableDefaultTransitionIndicator &&
+        rootMutationContext &&
+        includesLoadingIndicatorLanes(lanes)
+      ) {
+        // This root had a mutation. Mark this root as having rendered a manual
+        // loading state.
+        markIndicatorHandled(root);
+      }
+
+      break;
+    }
+    case HostPortal: {
+      // For the purposes of visibility toggling, the direct children of a
+      // portal are considered "children" of the nearest hidden
+      // OffscreenComponent, regardless of whether there are any host components
+      // in between them. This is because portals are not part of the regular
+      // host tree hierarchy; we can't assume that just because a portal's
+      // HostComponent parent in the React tree will also be a parent in the
+      // actual host tree. So we must hide all of them.
+      const prevOffscreenDirectParentIsHidden = offscreenDirectParentIsHidden;
+      offscreenDirectParentIsHidden = offscreenSubtreeIsHidden;
+      const prevMutationContext = pushMutationContext();
+      if (supportsResources) {
+        const previousHoistableRoot = currentHoistableRoot;
+        currentHoistableRoot = getHoistableRoot(
+          finishedWork.stateNode.containerInfo,
+        );
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+        currentHoistableRoot = previousHoistableRoot;
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+      }
+      if (viewTransitionMutationContext && inUpdateViewTransition) {
+        // A Portal doesn't necessarily exist within the context of this subtree.
+        // Ideally we would track which React ViewTransition component nests the container
+        // but that's costly. Instead, we treat each Portal as if it's a new React root.
+        // Therefore any leaked mutation means that the root should animate.
+        rootViewTransitionAffected = true;
+      }
+      popMutationContext(prevMutationContext);
+      offscreenDirectParentIsHidden = prevOffscreenDirectParentIsHidden;
+
+      if (flags & Update) {
+        if (supportsPersistence) {
+          commitHostPortalContainerChildren(
+            finishedWork.stateNode,
+            finishedWork,
+            finishedWork.stateNode.pendingChildren,
+          );
+        }
+      }
+      break;
+    }
+    case Profiler: {
+      const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (enableProfilerTimer && enableProfilerCommitHooks) {
+        const profilerInstance = finishedWork.stateNode;
+        // Propagate layout effect durations to the next nearest Profiler ancestor.
+        // Do not reset these values until the next render so DevTools has a chance to read them first.
+        profilerInstance.effectDuration += bubbleNestedEffectDurations(
+          prevProfilerEffectDuration,
+        );
+      }
+      break;
+    }
+    case ActivityComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+      if (flags & Update) {
+        const retryQueue: RetryQueue | null = (finishedWork.updateQueue: any);
+        if (retryQueue !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, retryQueue);
+        }
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      // TODO: We should mark a flag on the Suspense fiber itself, rather than
+      // relying on the Offscreen fiber having a flag also being marked. The
+      // reason is that this offscreen fiber might not be part of the work-in-
+      // progress tree! It could have been reused from a previous render. This
+      // doesn't lead to incorrect behavior because we don't rely on the flag
+      // check alone; we also compare the states explicitly below. But for
+      // modeling purposes, we _should_ be able to rely on the flag check alone.
+      // So this is a bit fragile.
+      //
+      // Also, all this logic could/should move to the passive phase so it
+      // doesn't block paint.
+      const offscreenFiber: Fiber = (finishedWork.child: any);
+      if (offscreenFiber.flags & Visibility) {
+        // Throttle the appearance and disappearance of Suspense fallbacks.
+        const isShowingFallback =
+          (finishedWork.memoizedState: SuspenseState | null) !== null;
+        const wasShowingFallback =
+          current !== null &&
+          (current.memoizedState: SuspenseState | null) !== null;
+
+        if (alwaysThrottleRetries) {
+          if (isShowingFallback !== wasShowingFallback) {
+            // A fallback is either appearing or disappearing.
+            markCommitTimeOfFallback();
+          }
+        } else {
+          if (isShowingFallback && !wasShowingFallback) {
+            // Old behavior. Only mark when a fallback appears, not when
+            // it disappears.
+            markCommitTimeOfFallback();
+          }
+        }
+      }
+
+      if (flags & Update) {
+        try {
+          commitSuspenseCallback(finishedWork);
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
+        const retryQueue: RetryQueue | null = (finishedWork.updateQueue: any);
+        if (retryQueue !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, retryQueue);
+        }
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
+      const wasHidden = current !== null && current.memoizedState !== null;
+
+      if (disableLegacyMode || finishedWork.mode & ConcurrentMode) {
+        // Before committing the children, track on the stack whether this
+        // offscreen subtree was already hidden, so that we don't unmount the
+        // effects again.
+        const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+        const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+        const prevOffscreenDirectParentIsHidden = offscreenDirectParentIsHidden;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden || isHidden;
+        offscreenDirectParentIsHidden =
+          prevOffscreenDirectParentIsHidden || isHidden;
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        offscreenDirectParentIsHidden = prevOffscreenDirectParentIsHidden;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+
+        if (
+          // If this was the root of the reappear.
+          wasHidden &&
+          !isHidden &&
+          !prevOffscreenSubtreeIsHidden &&
+          !prevOffscreenSubtreeWasHidden &&
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          enableComponentPerformanceTrack &&
+          (finishedWork.mode & ProfileMode) !== NoMode &&
+          componentEffectStartTime >= 0 &&
+          componentEffectEndTime >= 0 &&
+          componentEffectEndTime - componentEffectStartTime > 0.05
+        ) {
+          logComponentReappeared(
+            finishedWork,
+            componentEffectStartTime,
+            componentEffectEndTime,
+          );
+        }
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      }
+
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (flags & Visibility) {
+        const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
+
+        // Track the current state on the Offscreen instance so we can
+        // read it during an event
+        if (isHidden) {
+          offscreenInstance._visibility &= ~OffscreenVisible;
+        } else {
+          offscreenInstance._visibility |= OffscreenVisible;
+        }
+
+        const isUpdate = current !== null;
+        if (isHidden) {
+          // Only trigger disappear layout effects if:
+          //   - This is an update, not first mount.
+          //   - This Offscreen was not hidden before.
+          //   - Ancestor Offscreen was not hidden in previous commit or in this commit
+          if (
+            isUpdate &&
+            !wasHidden &&
+            !offscreenSubtreeIsHidden &&
+            !offscreenSubtreeWasHidden
+          ) {
+            if (
+              disableLegacyMode ||
+              (finishedWork.mode & ConcurrentMode) !== NoMode
+            ) {
+              // Disappear the layout effects of all the children
+              recursivelyTraverseDisappearLayoutEffects(finishedWork);
+
+              if (
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                enableComponentPerformanceTrack &&
+                (finishedWork.mode & ProfileMode) !== NoMode &&
+                componentEffectStartTime >= 0 &&
+                componentEffectEndTime >= 0 &&
+                componentEffectEndTime - componentEffectStartTime > 0.05
+              ) {
+                logComponentDisappeared(
+                  finishedWork,
+                  componentEffectStartTime,
+                  componentEffectEndTime,
+                );
+              }
+            }
+          }
+        }
+
+        if (supportsMutation) {
+          // If it's trying to unhide but the parent is still hidden, then we should not unhide.
+          if (isHidden || !offscreenDirectParentIsHidden) {
+            hideOrUnhideAllChildren(finishedWork, isHidden);
+          }
+        }
+      }
+
+      // TODO: Move to passive phase
+      if (flags & Update) {
+        const offscreenQueue: OffscreenQueue | null =
+          (finishedWork.updateQueue: any);
+        if (offscreenQueue !== null) {
+          const retryQueue = offscreenQueue.retryQueue;
+          if (retryQueue !== null) {
+            offscreenQueue.retryQueue = null;
+            attachSuspenseRetryListeners(finishedWork, retryQueue);
+          }
+        }
+      }
+      break;
+    }
+    case SuspenseListComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      if (flags & Update) {
+        const retryQueue: Set<Wakeable> | null =
+          (finishedWork.updateQueue: any);
+        if (retryQueue !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, retryQueue);
+        }
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if (flags & Ref) {
+          if (!offscreenSubtreeWasHidden && current !== null) {
+            safelyDetachRef(current, current.return);
+          }
+        }
+        const prevMutationContext = pushMutationContext();
+        const prevUpdate = inUpdateViewTransition;
+        const isViewTransitionEligible =
+          enableViewTransition &&
+          includesOnlyViewTransitionEligibleLanes(lanes);
+        const props = finishedWork.memoizedProps;
+        inUpdateViewTransition =
+          isViewTransitionEligible &&
+          getViewTransitionClassName(props.default, props.update) !== 'none';
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+        if (isViewTransitionEligible) {
+          if (current === null) {
+            // This is a new mount. We should have handled this as part of the
+            // Placement effect or it is deeper inside a entering transition.
+          } else if (viewTransitionMutationContext) {
+            // Something mutated in this tree so we need to animate this regardless
+            // what the measurements say. We use the Update flag to track this.
+            // If diffing was done in the render phase, like we used, this could have
+            // been done in the render already.
+            finishedWork.flags |= Update;
+          }
+        }
+        inUpdateViewTransition = prevUpdate;
+        popMutationContext(prevMutationContext);
+        break;
+      }
+      break;
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork, lanes);
+
+        // TODO: This is a temporary solution that allowed us to transition away
+        // from React Flare on www.
+        if (flags & Ref) {
+          if (!offscreenSubtreeWasHidden && current !== null) {
+            safelyDetachRef(finishedWork, finishedWork.return);
+          }
+          if (!offscreenSubtreeIsHidden) {
+            safelyAttachRef(finishedWork, finishedWork.return);
+          }
+        }
+        if (flags & Update) {
+          const scopeInstance = finishedWork.stateNode;
+          prepareScopeUpdate(scopeInstance, finishedWork);
+        }
+      }
+      break;
+    }
+    case Fragment:
+      if (enableFragmentRefs) {
+        if (current && current.stateNode !== null) {
+          updateFragmentInstanceFiber(finishedWork, current.stateNode);
+        }
+      }
+    // Fallthrough
+    default: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      commitReconciliationEffects(finishedWork, lanes);
+
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0
+  ) {
+    if (componentEffectSpawnedUpdate || componentEffectDuration > 0.05) {
+      logComponentEffect(
+        finishedWork,
+        componentEffectStartTime,
+        componentEffectEndTime,
+        componentEffectDuration,
+        componentEffectErrors,
+      );
+    }
+    if (
+      // Insertion
+      finishedWork.alternate === null &&
+      finishedWork.return !== null &&
+      finishedWork.return.alternate !== null &&
+      componentEffectEndTime - componentEffectStartTime > 0.05
+    ) {
+      const isHydration = isHydratingParent(
+        finishedWork.return.alternate,
+        finishedWork.return,
+      );
+      if (!isHydration) {
+        logComponentMount(
+          finishedWork,
+          componentEffectStartTime,
+          componentEffectEndTime,
+        );
+      }
+    }
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+}
+
+function commitReconciliationEffects(
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+) {
+  // Placement effects (insertions, reorders) can be scheduled on any fiber
+  // type. They needs to happen after the children effects have fired, but
+  // before the effects on this fiber have fired.
+  const flags = finishedWork.flags;
+  if (flags & Placement) {
+    commitHostPlacement(finishedWork);
+    // Clear the "placement" from effect tag so that we know that this is
+    // inserted, before any life-cycles like componentDidMount gets called.
+    // TODO: findDOMNode doesn't rely on this any more but isMounted does
+    // and isMounted is deprecated anyway so we should be able to kill this.
+    finishedWork.flags &= ~Placement;
+  }
+  if (flags & Hydrating) {
+    finishedWork.flags &= ~Hydrating;
+  }
+}
+
+function recursivelyResetForms(parentFiber: Fiber) {
+  if (parentFiber.subtreeFlags & FormReset) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      resetFormOnFiber(child);
+      child = child.sibling;
+    }
+  }
+}
+
+function resetFormOnFiber(fiber: Fiber) {
+  recursivelyResetForms(fiber);
+  if (fiber.tag === HostComponent && fiber.flags & FormReset) {
+    const formInstance: FormInstance = fiber.stateNode;
+    resetFormInstance(formInstance);
+  }
+}
+
+export function commitAfterMutationEffects(
+  root: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+): void {
+  if (!enableViewTransition) {
+    // This phase is only used for view transitions.
+    return;
+  }
+  commitAfterMutationEffectsOnFiber(finishedWork, root, committedLanes);
+}
+
+function recursivelyTraverseAfterMutationEffects(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  lanes: Lanes,
+) {
+  // We need to visit the same nodes that we visited in the before mutation phase.
+  if (parentFiber.subtreeFlags & BeforeAndAfterMutationTransitionMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      commitAfterMutationEffectsOnFiber(child, root, lanes);
+      child = child.sibling;
+    }
+  } else {
+    // Nothing has changed in this subtree, but the parent may have still affected
+    // its size and position. We need to measure this and if not, restore it to
+    // not animate.
+    measureNestedViewTransitions(parentFiber, false);
+  }
+}
+
+function commitAfterMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  lanes: Lanes,
+) {
+  const current = finishedWork.alternate;
+  if (current === null) {
+    // This is a newly inserted subtree. We can't use Placement flags to detect
+    // this since they get removed in the mutation phase. Usually it's not enough
+    // to just check current because that can also happen deeper in the same tree.
+    // However, since we don't need to visit newly inserted subtrees in AfterMutation
+    // we can just bail after we're done with the first one.
+    // The first ViewTransition inside a newly mounted tree runs an enter transition
+    // but other nested ones don't unless they have a named pair.
+    commitEnterViewTransitions(finishedWork, false);
+    return;
+  }
+
+  switch (finishedWork.tag) {
+    case HostRoot: {
+      viewTransitionContextChanged = false;
+      rootViewTransitionNameCanceled = false;
+      pushViewTransitionCancelableScope();
+      recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+      if (!viewTransitionContextChanged && !rootViewTransitionAffected) {
+        // If we didn't leak any resizing out to the root, we don't have to transition
+        // the root itself. This means that we can now safely cancel any cancellations
+        // that bubbled all the way up.
+        const cancelableChildren = viewTransitionCancelableChildren;
+        if (cancelableChildren !== null) {
+          for (let i = 0; i < cancelableChildren.length; i += 3) {
+            cancelViewTransitionName(
+              ((cancelableChildren[i]: any): Instance),
+              ((cancelableChildren[i + 1]: any): string),
+              ((cancelableChildren[i + 2]: any): Props),
+            );
+          }
+        }
+        // We also cancel the root itself.
+        cancelRootViewTransitionName(root.containerInfo);
+        rootViewTransitionNameCanceled = true;
+      }
+      popViewTransitionCancelableScope(null);
+      break;
+    }
+    case HostComponent: {
+      recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+      break;
+    }
+    case HostPortal: {
+      const prevContextChanged = viewTransitionContextChanged;
+      viewTransitionContextChanged = false;
+      recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+      if (viewTransitionContextChanged) {
+        // A Portal doesn't necessarily exist within the context of this subtree.
+        // Ideally we would track which React ViewTransition component nests the container
+        // but that's costly. Instead, we treat each Portal as if it's a new React root.
+        // Therefore any leaked resize of a child could affect the root so the root should animate.
+        // We only do this if the Portal is inside a ViewTransition and it is not disabled
+        // with update="none". Otherwise the Portal is considered not animating.
+        rootViewTransitionAffected = true;
+      }
+      viewTransitionContextChanged = prevContextChanged;
+      break;
+    }
+    case OffscreenComponent: {
+      const isModernRoot =
+        disableLegacyMode || (finishedWork.mode & ConcurrentMode) !== NoMode;
+      if (isModernRoot) {
+        const isHidden = finishedWork.memoizedState !== null;
+        if (isHidden) {
+          // The Offscreen tree is hidden. Skip over its after mutation effects.
+        } else {
+          // The Offscreen tree is visible.
+          const wasHidden = current.memoizedState !== null;
+          if (wasHidden) {
+            commitEnterViewTransitions(finishedWork, false);
+            // If it was previous hidden then the children are treated as enter
+            // not updates so we don't need to visit these children.
+          } else {
+            recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+          }
+        }
+      } else {
+        recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      const prevContextChanged = viewTransitionContextChanged;
+      const prevCancelableChildren = pushViewTransitionCancelableScope();
+      viewTransitionContextChanged = false;
+      recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+
+      if (viewTransitionContextChanged) {
+        finishedWork.flags |= Update;
+      }
+
+      const inViewport = measureUpdateViewTransition(
+        current,
+        finishedWork,
+        false,
+      );
+
+      if ((finishedWork.flags & Update) === NoFlags || !inViewport) {
+        // If this boundary didn't update, then we may be able to cancel its children.
+        // We bubble them up to the parent set to be determined later if we can cancel.
+        // Similarly, if old and new state was outside the viewport, we can skip it
+        // even if it did update.
+        if (prevCancelableChildren === null) {
+          // Bubbling up this whole set to the parent.
+        } else {
+          // Merge with parent set.
+          // $FlowFixMe[method-unbinding]
+          prevCancelableChildren.push.apply(
+            prevCancelableChildren,
+            viewTransitionCancelableChildren,
+          );
+          popViewTransitionCancelableScope(prevCancelableChildren);
+        }
+        // TODO: If this doesn't end up canceled, because a parent animates,
+        // then we should probably issue an event since this instance is part of it.
+      } else {
+        const props: ViewTransitionProps = finishedWork.memoizedProps;
+        scheduleViewTransitionEvent(finishedWork, props.onUpdate);
+
+        // If this boundary did update, we cannot cancel its children so those are dropped.
+        popViewTransitionCancelableScope(prevCancelableChildren);
+      }
+
+      if ((finishedWork.flags & AffectedParentLayout) !== NoFlags) {
+        // This boundary changed size in a way that may have caused its parent to
+        // relayout. We need to bubble this information up to the parent.
+        viewTransitionContextChanged = true;
+      } else {
+        // Otherwise, we restore it to whatever the parent had found so far.
+        viewTransitionContextChanged = prevContextChanged;
+      }
+      break;
+    }
+    default: {
+      recursivelyTraverseAfterMutationEffects(root, finishedWork, lanes);
+      break;
+    }
+  }
+}
+
+export function commitLayoutEffects(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+): void {
+  inProgressLanes = committedLanes;
+  inProgressRoot = root;
+
+  resetComponentEffectTimers();
+
+  const current = finishedWork.alternate;
+  commitLayoutEffectOnFiber(root, current, finishedWork, committedLanes);
+
+  inProgressLanes = null;
+  inProgressRoot = null;
+}
+
+function recursivelyTraverseLayoutEffects(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  lanes: Lanes,
+) {
+  if (parentFiber.subtreeFlags & LayoutMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      const current = child.alternate;
+      commitLayoutEffectOnFiber(root, current, child, lanes);
+      child = child.sibling;
+    }
+  }
+}
+
+export function disappearLayoutEffects(finishedWork: Fiber) {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      // TODO (Offscreen) Check: flags & LayoutStatic
+      commitHookLayoutUnmountEffects(
+        finishedWork,
+        finishedWork.return,
+        HookLayout,
+      );
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+    case ClassComponent: {
+      // TODO (Offscreen) Check: flags & RefStatic
+      safelyDetachRef(finishedWork, finishedWork.return);
+
+      const instance = finishedWork.stateNode;
+      if (typeof instance.componentWillUnmount === 'function') {
+        safelyCallComponentWillUnmount(
+          finishedWork,
+          finishedWork.return,
+          instance,
+        );
+      }
+
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        // TODO (Offscreen) Check: flags & RefStatic
+        commitHostSingletonRelease(finishedWork);
+      }
+      // Expected fallthrough to HostComponent
+    }
+    case HostHoistable:
+    case HostComponent: {
+      // TODO (Offscreen) Check: flags & RefStatic
+      safelyDetachRef(finishedWork, finishedWork.return);
+
+      if (enableFragmentRefs && finishedWork.tag === HostComponent) {
+        commitFragmentInstanceDeletionEffects(finishedWork);
+      }
+
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+    case OffscreenComponent: {
+      const isHidden = finishedWork.memoizedState !== null;
+      if (isHidden) {
+        // Nested Offscreen tree is already hidden. Don't disappear
+        // its effects.
+      } else {
+        recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if (__DEV__) {
+          if (finishedWork.flags & ViewTransitionNamedStatic) {
+            untrackNamedViewTransition(finishedWork);
+          }
+        }
+        safelyDetachRef(finishedWork, finishedWork.return);
+      }
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+    case Fragment: {
+      if (enableFragmentRefs) {
+        safelyDetachRef(finishedWork, finishedWork.return);
+      }
+      // Fallthrough
+    }
+    default: {
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      finishedWork,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+}
+
+function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
+  // TODO (Offscreen) Check: subtreeflags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    disappearLayoutEffects(child);
+    child = child.sibling;
+  }
+}
+
+export function reappearLayoutEffects(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  // This function visits both newly finished work and nodes that were re-used
+  // from a previously committed tree. We cannot check non-static flags if the
+  // node was reused.
+  includeWorkInProgressEffects: boolean,
+) {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  // Turn on layout effects in a tree that previously disappeared.
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        includeWorkInProgressEffects,
+      );
+      // TODO: Check flags & LayoutStatic
+      commitHookLayoutEffects(finishedWork, HookLayout);
+      break;
+    }
+    case ClassComponent: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        includeWorkInProgressEffects,
+      );
+
+      commitClassDidMount(finishedWork);
+
+      commitClassHiddenCallbacks(finishedWork);
+
+      // If this is newly finished work, check for setState callbacks
+      if (includeWorkInProgressEffects && flags & Callback) {
+        commitClassCallbacks(finishedWork);
+      }
+
+      // TODO: Check flags & RefStatic
+      safelyAttachRef(finishedWork, finishedWork.return);
+      break;
+    }
+    // Unlike commitLayoutEffectsOnFiber, we don't need to handle HostRoot
+    // because this function only visits nodes that are inside an
+    // Offscreen fiber.
+    // case HostRoot: {
+    //  ...
+    // }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        // We acquire the singleton instance first so it has appropriate
+        // styles before other layout effects run. This isn't perfect because
+        // an early sibling of the singleton may have an effect that can
+        // observe the singleton before it is acquired.
+        // @TODO move this to the mutation phase. The reason it isn't there yet
+        // is it seemingly requires an extra traversal because we need to move the
+        // disappear effect into a phase before the appear phase
+        commitHostSingletonAcquisition(finishedWork);
+        // We fall through to the HostComponent case below.
+      }
+      // Fallthrough
+    }
+    case HostHoistable:
+    case HostComponent: {
+      // TODO: Enable HostText for RN
+      if (enableFragmentRefs && finishedWork.tag === HostComponent) {
+        commitFragmentInstanceInsertionEffects(finishedWork);
+      }
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        includeWorkInProgressEffects,
+      );
+
+      // Renderers may schedule work to be done after host components are mounted
+      // (eg DOM renderer may schedule auto-focus for inputs and form controls).
+      // These effects should only be committed when components are first mounted,
+      // aka when there is no current/alternate.
+      if (includeWorkInProgressEffects && current === null && flags & Update) {
+        commitHostMount(finishedWork);
+      }
+
+      // TODO: Check flags & Ref
+      safelyAttachRef(finishedWork, finishedWork.return);
+      break;
+    }
+    case Profiler: {
+      // TODO: Figure out how Profiler updates should work with Offscreen
+      if (includeWorkInProgressEffects && flags & Update) {
+        const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+        recursivelyTraverseReappearLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          includeWorkInProgressEffects,
+        );
+
+        const profilerInstance = finishedWork.stateNode;
+
+        if (enableProfilerTimer && enableProfilerCommitHooks) {
+          // Propagate layout effect durations to the next nearest Profiler ancestor.
+          // Do not reset these values until the next render so DevTools has a chance to read them first.
+          profilerInstance.effectDuration += bubbleNestedEffectDurations(
+            prevProfilerEffectDuration,
+          );
+        }
+
+        commitProfilerUpdate(
+          finishedWork,
+          current,
+          commitStartTime,
+          profilerInstance.effectDuration,
+        );
+      } else {
+        recursivelyTraverseReappearLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          includeWorkInProgressEffects,
+        );
+      }
+      break;
+    }
+    case ActivityComponent: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        includeWorkInProgressEffects,
+      );
+
+      if (includeWorkInProgressEffects && flags & Update) {
+        // TODO: Delete this feature.
+        commitActivityHydrationCallbacks(finishedRoot, finishedWork);
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        includeWorkInProgressEffects,
+      );
+
+      if (includeWorkInProgressEffects && flags & Update) {
+        // TODO: Delete this feature.
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      const offscreenState: OffscreenState = finishedWork.memoizedState;
+      const isHidden = offscreenState !== null;
+      if (isHidden) {
+        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
+      } else {
+        recursivelyTraverseReappearLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          includeWorkInProgressEffects,
+        );
+      }
+      // TODO: Check flags & Ref
+      safelyAttachRef(finishedWork, finishedWork.return);
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        recursivelyTraverseReappearLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          includeWorkInProgressEffects,
+        );
+        if (__DEV__) {
+          if (flags & ViewTransitionNamedStatic) {
+            trackNamedViewTransition(finishedWork);
+          }
+        }
+        safelyAttachRef(finishedWork, finishedWork.return);
+        break;
+      }
+      break;
+    }
+    case Fragment: {
+      if (enableFragmentRefs) {
+        safelyAttachRef(finishedWork, finishedWork.return);
+      }
+      // Fallthrough
+    }
+    default: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        includeWorkInProgressEffects,
+      );
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      finishedWork,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+}
+
+function recursivelyTraverseReappearLayoutEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  includeWorkInProgressEffects: boolean,
+) {
+  // This function visits both newly finished work and nodes that were re-used
+  // from a previously committed tree. We cannot check non-static flags if the
+  // node was reused.
+  const childShouldIncludeWorkInProgressEffects =
+    includeWorkInProgressEffects &&
+    (parentFiber.subtreeFlags & LayoutMask) !== NoFlags;
+
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    const current = child.alternate;
+    reappearLayoutEffects(
+      finishedRoot,
+      current,
+      child,
+      childShouldIncludeWorkInProgressEffects,
+    );
+    child = child.sibling;
+  }
+}
+
+function commitOffscreenPassiveMountEffects(
+  current: Fiber | null,
+  finishedWork: Fiber,
+  instance: OffscreenInstance,
+) {
+  let previousCache: Cache | null = null;
+  if (
+    current !== null &&
+    current.memoizedState !== null &&
+    current.memoizedState.cachePool !== null
+  ) {
+    previousCache = current.memoizedState.cachePool.pool;
+  }
+  let nextCache: Cache | null = null;
+  if (
+    finishedWork.memoizedState !== null &&
+    finishedWork.memoizedState.cachePool !== null
+  ) {
+    nextCache = finishedWork.memoizedState.cachePool.pool;
+  }
+  // Retain/release the cache used for pending (suspended) nodes.
+  // Note that this is only reached in the non-suspended/visible case:
+  // when the content is suspended/hidden, the retain/release occurs
+  // via the parent Suspense component (see case above).
+  if (nextCache !== previousCache) {
+    if (nextCache != null) {
+      retainCache(nextCache);
+    }
+    if (previousCache != null) {
+      releaseCache(previousCache);
+    }
+  }
+
+  if (enableTransitionTracing) {
+    // TODO: Pre-rendering should not be counted as part of a transition. We
+    // may add separate logs for pre-rendering, but it's not part of the
+    // primary metrics.
+    const offscreenState: OffscreenState = finishedWork.memoizedState;
+    const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
+
+    const isHidden = offscreenState !== null;
+    if (queue !== null) {
+      if (isHidden) {
+        const transitions = queue.transitions;
+        if (transitions !== null) {
+          transitions.forEach(transition => {
+            // Add all the transitions saved in the update queue during
+            // the render phase (ie the transitions associated with this boundary)
+            // into the transitions set.
+            if (instance._transitions === null) {
+              instance._transitions = new Set();
+            }
+            instance._transitions.add(transition);
+          });
+        }
+
+        const markerInstances = queue.markerInstances;
+        if (markerInstances !== null) {
+          markerInstances.forEach(markerInstance => {
+            const markerTransitions = markerInstance.transitions;
+            // There should only be a few tracing marker transitions because
+            // they should be only associated with the transition that
+            // caused them
+            if (markerTransitions !== null) {
+              markerTransitions.forEach(transition => {
+                if (instance._transitions === null) {
+                  instance._transitions = new Set();
+                } else if (instance._transitions.has(transition)) {
+                  if (markerInstance.pendingBoundaries === null) {
+                    markerInstance.pendingBoundaries = new Map();
+                  }
+                  if (instance._pendingMarkers === null) {
+                    instance._pendingMarkers = new Set();
+                  }
+
+                  instance._pendingMarkers.add(markerInstance);
+                }
+              });
+            }
+          });
+        }
+      }
+
+      finishedWork.updateQueue = null;
+    }
+
+    commitTransitionProgress(finishedWork);
+
+    // TODO: Refactor this into an if/else branch
+    if (!isHidden) {
+      instance._transitions = null;
+      instance._pendingMarkers = null;
+    }
+  }
+}
+
+function commitCachePassiveMountEffect(
+  current: Fiber | null,
+  finishedWork: Fiber,
+) {
+  let previousCache: Cache | null = null;
+  if (finishedWork.alternate !== null) {
+    previousCache = finishedWork.alternate.memoizedState.cache;
+  }
+  const nextCache = finishedWork.memoizedState.cache;
+  // Retain/release the cache. In theory the cache component
+  // could be "borrowing" a cache instance owned by some parent,
+  // in which case we could avoid retaining/releasing. But it
+  // is non-trivial to determine when that is the case, so we
+  // always retain/release.
+  if (nextCache !== previousCache) {
+    retainCache(nextCache);
+    if (previousCache != null) {
+      releaseCache(previousCache);
+    }
+  }
+}
+
+function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
+  // Get the transitions that were initiatized during the render
+  // and add a start transition callback for each of them
+  // We will only call this on initial mount of the tracing marker
+  // only if there are no suspense children
+  const instance = finishedWork.stateNode;
+  if (instance.transitions !== null && instance.pendingBoundaries === null) {
+    addMarkerCompleteCallbackToPendingTransition(
+      finishedWork.memoizedProps.name,
+      instance.transitions,
+    );
+    instance.transitions = null;
+    instance.pendingBoundaries = null;
+    instance.aborts = null;
+    instance.name = null;
+  }
+}
+
+export function commitPassiveMountEffects(
+  root: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  renderEndTime: number, // Profiling-only
+): void {
+  resetComponentEffectTimers();
+
+  commitPassiveMountOnFiber(
+    root,
+    finishedWork,
+    committedLanes,
+    committedTransitions,
+    enableProfilerTimer && enableComponentPerformanceTrack ? renderEndTime : 0,
+  );
+}
+
+function recursivelyTraversePassiveMountEffects(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
+) {
+  const isViewTransitionEligible =
+    enableViewTransition &&
+    includesOnlyViewTransitionEligibleLanes(committedLanes);
+  // TODO: We could optimize this by marking these with the Passive subtree flag in the render phase.
+  const subtreeMask = isViewTransitionEligible
+    ? PassiveTransitionMask
+    : PassiveMask;
+  if (
+    parentFiber.subtreeFlags & subtreeMask ||
+    // If this subtree rendered with profiling this commit, we need to visit it to log it.
+    (enableProfilerTimer &&
+      enableComponentPerformanceTrack &&
+      parentFiber.actualDuration !== 0 &&
+      (parentFiber.alternate === null ||
+        parentFiber.alternate.child !== parentFiber.child))
+  ) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        const nextSibling = child.sibling;
+        commitPassiveMountOnFiber(
+          root,
+          child,
+          committedLanes,
+          committedTransitions,
+          nextSibling !== null
+            ? ((nextSibling.actualStartTime: any): number)
+            : endTime,
+        );
+        child = nextSibling;
+      } else {
+        commitPassiveMountOnFiber(
+          root,
+          child,
+          committedLanes,
+          committedTransitions,
+          0,
+        );
+        child = child.sibling;
+      }
+    }
+  } else if (isViewTransitionEligible) {
+    // We are inside an updated subtree. Any mutations that affected the
+    // parent HostInstance's layout or set of children (such as reorders)
+    // might have also affected the positioning or size of the inner
+    // ViewTransitions. Therefore we need to restore those too.
+    restoreNestedViewTransitions(parentFiber);
+  }
+}
+
+let inHydratedSubtree = false;
+
+function commitPassiveMountOnFiber(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
+): void {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  const prevDeepEquality = pushDeepEquality();
+
+  const isViewTransitionEligible = enableViewTransition
+    ? includesOnlyViewTransitionEligibleLanes(committedLanes)
+    : false;
+
+  if (
+    isViewTransitionEligible &&
+    finishedWork.alternate === null &&
+    // We can't use the Placement flag here because it gets reset earlier. Instead,
+    // we check if this is the root of the insertion by checking if the parent
+    // was previous existing.
+    finishedWork.return !== null &&
+    finishedWork.return.alternate !== null
+  ) {
+    // This was a new mount. This means we could've triggered an enter animation on
+    // the content. Restore the view transitions if there were any assigned in the
+    // snapshot phase.
+    restoreEnterOrExitViewTransitions(finishedWork);
+  }
+
+  // When updating this function, also update reconnectPassiveEffects, which does
+  // most of the same things when an offscreen tree goes from hidden -> visible,
+  // or when toggling effects inside a hidden tree.
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
+      // render time. We do this after the fact in the passive effect to avoid the overhead of this
+      // getting in the way of the render characteristics and avoid the overhead of unwinding
+      // uncommitted renders.
+      if (
+        enableProfilerTimer &&
+        enableComponentPerformanceTrack &&
+        (finishedWork.mode & ProfileMode) !== NoMode &&
+        ((finishedWork.actualStartTime: any): number) > 0 &&
+        (finishedWork.flags & PerformedWork) !== NoFlags
+      ) {
+        logComponentRender(
+          finishedWork,
+          ((finishedWork.actualStartTime: any): number),
+          endTime,
+          inHydratedSubtree,
+          committedLanes,
+        );
+      }
+
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      if (flags & Passive) {
+        commitHookPassiveMountEffects(
+          finishedWork,
+          HookPassive | HookHasEffect,
+        );
+      }
+      break;
+    }
+    case ClassComponent: {
+      // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
+      // render time. We do this after the fact in the passive effect to avoid the overhead of this
+      // getting in the way of the render characteristics and avoid the overhead of unwinding
+      // uncommitted renders.
+      if (
+        enableProfilerTimer &&
+        enableComponentPerformanceTrack &&
+        (finishedWork.mode & ProfileMode) !== NoMode &&
+        ((finishedWork.actualStartTime: any): number) > 0
+      ) {
+        if ((finishedWork.flags & DidCapture) !== NoFlags) {
+          logComponentErrored(
+            finishedWork,
+            ((finishedWork.actualStartTime: any): number),
+            endTime,
+            // TODO: The captured values are all hidden inside the updater/callback closures so
+            // we can't get to the errors but they're there so we should be able to log them.
+            [],
+          );
+        } else if ((finishedWork.flags & PerformedWork) !== NoFlags) {
+          logComponentRender(
+            finishedWork,
+            ((finishedWork.actualStartTime: any): number),
+            endTime,
+            inHydratedSubtree,
+            committedLanes,
+          );
+        }
+      }
+
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      break;
+    }
+    case HostRoot: {
+      const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+      const wasInHydratedSubtree = inHydratedSubtree;
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        // Detect if this was a hydration commit by look at if the previous state was
+        // dehydrated and this wasn't a forced client render.
+        inHydratedSubtree =
+          finishedWork.alternate !== null &&
+          (finishedWork.alternate.memoizedState: RootState).isDehydrated &&
+          (finishedWork.flags & ForceClientRender) === NoFlags;
+      }
+
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        inHydratedSubtree = wasInHydratedSubtree;
+      }
+
+      if (isViewTransitionEligible) {
+        if (supportsMutation && rootViewTransitionNameCanceled) {
+          restoreRootViewTransitionName(finishedRoot.containerInfo);
+        }
+      }
+
+      if (flags & Passive) {
+        let previousCache: Cache | null = null;
+        if (finishedWork.alternate !== null) {
+          previousCache = finishedWork.alternate.memoizedState.cache;
+        }
+        const nextCache = finishedWork.memoizedState.cache;
+        // Retain/release the root cache.
+        // Note that on initial mount, previousCache and nextCache will be the same
+        // and this retain won't occur. To counter this, we instead retain the HostRoot's
+        // initial cache when creating the root itself (see createFiberRoot() in
+        // ReactFiberRoot.js). Subsequent updates that change the cache are reflected
+        // here, such that previous/next caches are retained correctly.
+        if (nextCache !== previousCache) {
+          retainCache(nextCache);
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+
+        if (enableTransitionTracing) {
+          // Get the transitions that were initiatized during the render
+          // and add a start transition callback for each of them
+          const root: FiberRoot = finishedWork.stateNode;
+          const incompleteTransitions = root.incompleteTransitions;
+          // Initial render
+          if (committedTransitions !== null) {
+            committedTransitions.forEach(transition => {
+              addTransitionStartCallbackToPendingTransition(transition);
+            });
+
+            clearTransitionsForLanes(finishedRoot, committedLanes);
+          }
+
+          incompleteTransitions.forEach((markerInstance, transition) => {
+            const pendingBoundaries = markerInstance.pendingBoundaries;
+            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+              if (markerInstance.aborts === null) {
+                addTransitionCompleteCallbackToPendingTransition(transition);
+              }
+              incompleteTransitions.delete(transition);
+            }
+          });
+
+          clearTransitionsForLanes(finishedRoot, committedLanes);
+        }
+      }
+      if (enableProfilerTimer && enableProfilerCommitHooks) {
+        finishedRoot.passiveEffectDuration += popNestedEffectDurations(
+          prevProfilerEffectDuration,
+        );
+      }
+      break;
+    }
+    case Profiler: {
+      // Only Profilers with work in their subtree will have a Passive effect scheduled.
+      if (flags & Passive) {
+        const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          endTime,
+        );
+
+        const profilerInstance = finishedWork.stateNode;
+
+        if (enableProfilerTimer && enableProfilerCommitHooks) {
+          // Bubble times to the next nearest ancestor Profiler.
+          // After we process that Profiler, we'll bubble further up.
+          profilerInstance.passiveEffectDuration += bubbleNestedEffectDurations(
+            prevProfilerEffectDuration,
+          );
+        }
+
+        commitProfilerPostCommit(
+          finishedWork,
+          finishedWork.alternate,
+          // This value will still reflect the previous commit phase.
+          // It does not get reset until the start of the next commit phase.
+          commitStartTime,
+          profilerInstance.passiveEffectDuration,
+        );
+      } else {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          endTime,
+        );
+      }
+      break;
+    }
+    case ActivityComponent: {
+      const wasInHydratedSubtree = inHydratedSubtree;
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        const prevState: ActivityState | null =
+          finishedWork.alternate !== null
+            ? finishedWork.alternate.memoizedState
+            : null;
+        const nextState: ActivityState | null = finishedWork.memoizedState;
+        if (prevState !== null && nextState === null) {
+          // This was dehydrated but is no longer dehydrated. We may have now either hydrated it
+          // or client rendered it.
+          const deletions = finishedWork.deletions;
+          if (
+            deletions !== null &&
+            deletions.length > 0 &&
+            deletions[0].tag === DehydratedFragment
+          ) {
+            // This was an abandoned hydration that deleted the dehydrated fragment. That means we
+            // are not hydrating this Suspense boundary.
+            inHydratedSubtree = false;
+            const hydrationErrors = prevState.hydrationErrors;
+            // If there were no hydration errors, that suggests that this was an intentional client
+            // rendered boundary.
+            if (hydrationErrors !== null) {
+              const startTime: number = (finishedWork.actualStartTime: any);
+              logComponentErrored(
+                finishedWork,
+                startTime,
+                endTime,
+                hydrationErrors,
+              );
+            }
+          } else {
+            // If any children committed they were hydrated.
+            inHydratedSubtree = true;
+          }
+        } else {
+          inHydratedSubtree = false;
+        }
+      }
+
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        inHydratedSubtree = wasInHydratedSubtree;
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      const wasInHydratedSubtree = inHydratedSubtree;
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        const prevState: SuspenseState | null =
+          finishedWork.alternate !== null
+            ? finishedWork.alternate.memoizedState
+            : null;
+        const nextState: SuspenseState | null = finishedWork.memoizedState;
+        if (
+          prevState !== null &&
+          prevState.dehydrated !== null &&
+          (nextState === null || nextState.dehydrated === null)
+        ) {
+          // This was dehydrated but is no longer dehydrated. We may have now either hydrated it
+          // or client rendered it.
+          const deletions = finishedWork.deletions;
+          if (
+            deletions !== null &&
+            deletions.length > 0 &&
+            deletions[0].tag === DehydratedFragment
+          ) {
+            // This was an abandoned hydration that deleted the dehydrated fragment. That means we
+            // are not hydrating this Suspense boundary.
+            inHydratedSubtree = false;
+            const hydrationErrors = prevState.hydrationErrors;
+            // If there were no hydration errors, that suggests that this was an intentional client
+            // rendered boundary.
+            if (hydrationErrors !== null) {
+              const startTime: number = (finishedWork.actualStartTime: any);
+              logComponentErrored(
+                finishedWork,
+                startTime,
+                endTime,
+                hydrationErrors,
+              );
+            }
+          } else {
+            // If any children committed they were hydrated.
+            inHydratedSubtree = true;
+          }
+        } else {
+          inHydratedSubtree = false;
+        }
+      }
+
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        inHydratedSubtree = wasInHydratedSubtree;
+      }
+      break;
+    }
+    case LegacyHiddenComponent: {
+      if (enableLegacyHidden) {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          endTime,
+        );
+
+        if (flags & Passive) {
+          const current = finishedWork.alternate;
+          const instance: OffscreenInstance = finishedWork.stateNode;
+          commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+        }
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      // TODO: Pass `current` as argument to this function
+      const instance: OffscreenInstance = finishedWork.stateNode;
+      const current = finishedWork.alternate;
+      const nextState: OffscreenState | null = finishedWork.memoizedState;
+
+      const isHidden = nextState !== null;
+
+      if (isHidden) {
+        if (
+          isViewTransitionEligible &&
+          current !== null &&
+          current.memoizedState === null
+        ) {
+          // Content is now hidden but wasn't before. This means we could've
+          // triggered an exit animation on the content. Restore the view
+          // transitions if there were any assigned in the snapshot phase.
+          restoreEnterOrExitViewTransitions(current);
+        }
+        if (instance._visibility & OffscreenPassiveEffectsConnected) {
+          // The effects are currently connected. Update them.
+          recursivelyTraversePassiveMountEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+            endTime,
+          );
+        } else {
+          if (disableLegacyMode || finishedWork.mode & ConcurrentMode) {
+            // The effects are currently disconnected. Since the tree is hidden,
+            // don't connect them. This also applies to the initial render.
+            // "Atomic" effects are ones that need to fire on every commit,
+            // even during pre-rendering. An example is updating the reference
+            // count on cache instances.
+            recursivelyTraverseAtomicPassiveEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+              endTime,
+            );
+          } else {
+            // Legacy Mode: Fire the effects even if the tree is hidden.
+            instance._visibility |= OffscreenPassiveEffectsConnected;
+            recursivelyTraversePassiveMountEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+              endTime,
+            );
+          }
+        }
+      } else {
+        // Tree is visible
+        if (
+          isViewTransitionEligible &&
+          current !== null &&
+          current.memoizedState !== null
+        ) {
+          // Content is now visible but wasn't before. This means we could've
+          // triggered an enter animation on the content. Restore the view
+          // transitions if there were any assigned in the snapshot phase.
+          restoreEnterOrExitViewTransitions(finishedWork);
+        }
+        if (instance._visibility & OffscreenPassiveEffectsConnected) {
+          // The effects are currently connected. Update them.
+          recursivelyTraversePassiveMountEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+            endTime,
+          );
+        } else {
+          // The effects are currently disconnected. Reconnect them, while also
+          // firing effects inside newly mounted trees. This also applies to
+          // the initial render.
+          instance._visibility |= OffscreenPassiveEffectsConnected;
+
+          const includeWorkInProgressEffects =
+            (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
+            (enableProfilerTimer &&
+              enableComponentPerformanceTrack &&
+              finishedWork.actualDuration !== 0 &&
+              (finishedWork.alternate === null ||
+                finishedWork.alternate.child !== finishedWork.child));
+          recursivelyTraverseReconnectPassiveEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+            includeWorkInProgressEffects,
+            endTime,
+          );
+
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            enableComponentPerformanceTrack &&
+            (finishedWork.mode & ProfileMode) !== NoMode &&
+            !inHydratedSubtree
+          ) {
+            // Log the reappear in the render phase.
+            const startTime = ((finishedWork.actualStartTime: any): number);
+            if (startTime >= 0 && endTime - startTime > 0.05) {
+              logComponentReappeared(finishedWork, startTime, endTime);
+            }
+            if (
+              componentEffectStartTime >= 0 &&
+              componentEffectEndTime >= 0 &&
+              componentEffectEndTime - componentEffectStartTime > 0.05
+            ) {
+              logComponentReappeared(
+                finishedWork,
+                componentEffectStartTime,
+                componentEffectEndTime,
+              );
+            }
+          }
+        }
+      }
+
+      if (flags & Passive) {
+        commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+      }
+      break;
+    }
+    case CacheComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      if (flags & Passive) {
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if (isViewTransitionEligible) {
+          const current = finishedWork.alternate;
+          if (current === null) {
+            // This is a new mount. We should have handled this as part of the
+            // Placement effect or it is deeper inside a entering transition.
+          } else {
+            // Something mutated within this subtree. This might have caused
+            // something to cross-fade if we didn't already cancel it.
+            // If not, restore it.
+            restoreUpdateViewTransition(current, finishedWork);
+          }
+        }
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          endTime,
+        );
+        break;
+      }
+      // Fallthrough
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          endTime,
+        );
+        if (flags & Passive) {
+          commitTracingMarkerPassiveMountEffect(finishedWork);
+        }
+        break;
+      }
+      // Intentional fallthrough to next branch
+    }
+    default: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode
+  ) {
+    const isMount =
+      !inHydratedSubtree &&
+      finishedWork.alternate === null &&
+      finishedWork.return !== null &&
+      finishedWork.return.alternate !== null;
+    if (isMount) {
+      // Log the mount in the render phase.
+      const startTime = ((finishedWork.actualStartTime: any): number);
+      if (startTime >= 0 && endTime - startTime > 0.05) {
+        logComponentMount(finishedWork, startTime, endTime);
+      }
+    }
+    if (componentEffectStartTime >= 0 && componentEffectEndTime >= 0) {
+      if (componentEffectSpawnedUpdate || componentEffectDuration > 0.05) {
+        logComponentEffect(
+          finishedWork,
+          componentEffectStartTime,
+          componentEffectEndTime,
+          componentEffectDuration,
+          componentEffectErrors,
+        );
+      }
+      if (isMount && componentEffectEndTime - componentEffectStartTime > 0.05) {
+        logComponentMount(
+          finishedWork,
+          componentEffectStartTime,
+          componentEffectEndTime,
+        );
+      }
+    }
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+  popDeepEquality(prevDeepEquality);
+}
+
+function recursivelyTraverseReconnectPassiveEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  includeWorkInProgressEffects: boolean,
+  endTime: number,
+) {
+  // This function visits both newly finished work and nodes that were re-used
+  // from a previously committed tree. We cannot check non-static flags if the
+  // node was reused.
+  const childShouldIncludeWorkInProgressEffects =
+    includeWorkInProgressEffects &&
+    ((parentFiber.subtreeFlags & PassiveMask) !== NoFlags ||
+      (enableProfilerTimer &&
+        enableComponentPerformanceTrack &&
+        parentFiber.actualDuration !== 0 &&
+        (parentFiber.alternate === null ||
+          parentFiber.alternate.child !== parentFiber.child)));
+
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    if (enableProfilerTimer && enableComponentPerformanceTrack) {
+      const nextSibling = child.sibling;
+      reconnectPassiveEffects(
+        finishedRoot,
+        child,
+        committedLanes,
+        committedTransitions,
+        childShouldIncludeWorkInProgressEffects,
+        nextSibling !== null
+          ? ((nextSibling.actualStartTime: any): number)
+          : endTime,
+      );
+      child = nextSibling;
+    } else {
+      reconnectPassiveEffects(
+        finishedRoot,
+        child,
+        committedLanes,
+        committedTransitions,
+        childShouldIncludeWorkInProgressEffects,
+        endTime,
+      );
+      child = child.sibling;
+    }
+  }
+}
+
+export function reconnectPassiveEffects(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  // This function visits both newly finished work and nodes that were re-used
+  // from a previously committed tree. We cannot check non-static flags if the
+  // node was reused.
+  includeWorkInProgressEffects: boolean,
+  endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
+) {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  const prevDeepEquality = pushDeepEquality();
+
+  // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
+  // render time. We do this after the fact in the passive effect to avoid the overhead of this
+  // getting in the way of the render characteristics and avoid the overhead of unwinding
+  // uncommitted renders.
+  if (
+    enableProfilerTimer &&
+    enableComponentPerformanceTrack &&
+    includeWorkInProgressEffects &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    ((finishedWork.actualStartTime: any): number) > 0 &&
+    (finishedWork.flags & PerformedWork) !== NoFlags
+  ) {
+    logComponentRender(
+      finishedWork,
+      ((finishedWork.actualStartTime: any): number),
+      endTime,
+      inHydratedSubtree,
+      committedLanes,
+    );
+  }
+
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+        endTime,
+      );
+      // TODO: Check for PassiveStatic flag
+      commitHookPassiveMountEffects(finishedWork, HookPassive);
+      break;
+    }
+    // Unlike commitPassiveMountOnFiber, we don't need to handle HostRoot
+    // because this function only visits nodes that are inside an
+    // Offscreen fiber.
+    // case HostRoot: {
+    //  ...
+    // }
+    case LegacyHiddenComponent: {
+      if (enableLegacyHidden) {
+        recursivelyTraverseReconnectPassiveEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          includeWorkInProgressEffects,
+          endTime,
+        );
+
+        if (includeWorkInProgressEffects && flags & Passive) {
+          // TODO: Pass `current` as argument to this function
+          const current: Fiber | null = finishedWork.alternate;
+          const instance: OffscreenInstance = finishedWork.stateNode;
+          commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+        }
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      const instance: OffscreenInstance = finishedWork.stateNode;
+      const nextState: OffscreenState | null = finishedWork.memoizedState;
+
+      const isHidden = nextState !== null;
+
+      if (isHidden) {
+        if (instance._visibility & OffscreenPassiveEffectsConnected) {
+          // The effects are currently connected. Update them.
+          recursivelyTraverseReconnectPassiveEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+            includeWorkInProgressEffects,
+            endTime,
+          );
+        } else {
+          if (disableLegacyMode || finishedWork.mode & ConcurrentMode) {
+            // The effects are currently disconnected. Since the tree is hidden,
+            // don't connect them. This also applies to the initial render.
+            // "Atomic" effects are ones that need to fire on every commit,
+            // even during pre-rendering. An example is updating the reference
+            // count on cache instances.
+            recursivelyTraverseAtomicPassiveEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+              endTime,
+            );
+          } else {
+            // Legacy Mode: Fire the effects even if the tree is hidden.
+            instance._visibility |= OffscreenPassiveEffectsConnected;
+            recursivelyTraverseReconnectPassiveEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+              includeWorkInProgressEffects,
+              endTime,
+            );
+          }
+        }
+      } else {
+        // Tree is visible
+
+        // Since we're already inside a reconnecting tree, it doesn't matter
+        // whether the effects are currently connected. In either case, we'll
+        // continue traversing the tree and firing all the effects.
+        //
+        // We do need to set the "connected" flag on the instance, though.
+        instance._visibility |= OffscreenPassiveEffectsConnected;
+
+        recursivelyTraverseReconnectPassiveEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          includeWorkInProgressEffects,
+          endTime,
+        );
+      }
+
+      if (includeWorkInProgressEffects && flags & Passive) {
+        // TODO: Pass `current` as argument to this function
+        const current: Fiber | null = finishedWork.alternate;
+        commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+      }
+      break;
+    }
+    case CacheComponent: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+        endTime,
+      );
+      if (includeWorkInProgressEffects && flags & Passive) {
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
+      }
+      break;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        recursivelyTraverseReconnectPassiveEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          includeWorkInProgressEffects,
+          endTime,
+        );
+        if (includeWorkInProgressEffects && flags & Passive) {
+          commitTracingMarkerPassiveMountEffect(finishedWork);
+        }
+        break;
+      }
+      // Intentional fallthrough to next branch
+    }
+    default: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+        endTime,
+      );
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      finishedWork,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectErrors(prevEffectErrors);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+  popDeepEquality(prevDeepEquality);
+}
+
+function recursivelyTraverseAtomicPassiveEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
+) {
+  // "Atomic" effects are ones that need to fire on every commit, even during
+  // pre-rendering. We call this function when traversing a hidden tree whose
+  // regular effects are currently disconnected.
+  // TODO: Add special flag for atomic effects
+  if (
+    parentFiber.subtreeFlags & PassiveMask ||
+    (enableProfilerTimer &&
+      enableComponentPerformanceTrack &&
+      parentFiber.actualDuration !== 0 &&
+      (parentFiber.alternate === null ||
+        parentFiber.alternate.child !== parentFiber.child))
+  ) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        const nextSibling = child.sibling;
+        commitAtomicPassiveEffects(
+          finishedRoot,
+          child,
+          committedLanes,
+          committedTransitions,
+          nextSibling !== null
+            ? ((nextSibling.actualStartTime: any): number)
+            : endTime,
+        );
+        child = nextSibling;
+      } else {
+        commitAtomicPassiveEffects(
+          finishedRoot,
+          child,
+          committedLanes,
+          committedTransitions,
+          endTime,
+        );
+        child = child.sibling;
+      }
+    }
+  }
+}
+
+function commitAtomicPassiveEffects(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
+) {
+  const prevDeepEquality = pushDeepEquality();
+
+  // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
+  // render time. A render can happen even if the subtree is offscreen.
+  if (
+    enableProfilerTimer &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    ((finishedWork.actualStartTime: any): number) > 0 &&
+    (finishedWork.flags & PerformedWork) !== NoFlags
+  ) {
+    logComponentRender(
+      finishedWork,
+      ((finishedWork.actualStartTime: any): number),
+      endTime,
+      inHydratedSubtree,
+      committedLanes,
+    );
+  }
+
+  // "Atomic" effects are ones that need to fire on every commit, even during
+  // pre-rendering. We call this function when traversing a hidden tree whose
+  // regular effects are currently disconnected.
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case OffscreenComponent: {
+      recursivelyTraverseAtomicPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      if (flags & Passive) {
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        const instance: OffscreenInstance = finishedWork.stateNode;
+        commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+      }
+      break;
+    }
+    case CacheComponent: {
+      recursivelyTraverseAtomicPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      if (flags & Passive) {
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
+      }
+      break;
+    }
+    default: {
+      recursivelyTraverseAtomicPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        endTime,
+      );
+      break;
+    }
+  }
+
+  popDeepEquality(prevDeepEquality);
+}
+
+export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
+  resetComponentEffectTimers();
+  commitPassiveUnmountOnFiber(finishedWork);
+}
+
+// If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+//
+// Note that MaySuspendCommit and ShouldSuspendCommit also includes named
+// ViewTransitions so that we know to also visit those to collect appearing
+// pairs.
+let suspenseyCommitFlag: Flags = ShouldSuspendCommit;
+export function accumulateSuspenseyCommit(
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  suspendedState: SuspendedState,
+): void {
+  resetAppearingViewTransitions();
+  accumulateSuspenseyCommitOnFiber(
+    finishedWork,
+    committedLanes,
+    suspendedState,
+  );
+}
+
+function recursivelyAccumulateSuspenseyCommit(
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  suspendedState: SuspendedState,
+): void {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      accumulateSuspenseyCommitOnFiber(child, committedLanes, suspendedState);
+      child = child.sibling;
+    }
+  }
+}
+
+function accumulateSuspenseyCommitOnFiber(
+  fiber: Fiber,
+  committedLanes: Lanes,
+  suspendedState: SuspendedState,
+) {
+  switch (fiber.tag) {
+    case HostHoistable: {
+      recursivelyAccumulateSuspenseyCommit(
+        fiber,
+        committedLanes,
+        suspendedState,
+      );
+      if (fiber.flags & suspenseyCommitFlag) {
+        if (fiber.memoizedState !== null) {
+          suspendResource(
+            suspendedState,
+            // This should always be set by visiting HostRoot first
+            (currentHoistableRoot: any),
+            fiber.memoizedState,
+            fiber.memoizedProps,
+          );
+        } else {
+          const instance = fiber.stateNode;
+          const type = fiber.type;
+          const props = fiber.memoizedProps;
+          // TODO: Allow sync lanes to suspend too with an opt-in.
+          if (
+            includesOnlySuspenseyCommitEligibleLanes(committedLanes) ||
+            maySuspendCommitInSyncRender(type, props)
+          ) {
+            suspendInstance(suspendedState, instance, type, props);
+          }
+        }
+      }
+      break;
+    }
+    case HostComponent: {
+      recursivelyAccumulateSuspenseyCommit(
+        fiber,
+        committedLanes,
+        suspendedState,
+      );
+      if (fiber.flags & suspenseyCommitFlag) {
+        const instance = fiber.stateNode;
+        const type = fiber.type;
+        const props = fiber.memoizedProps;
+        // TODO: Allow sync lanes to suspend too with an opt-in.
+        if (
+          includesOnlySuspenseyCommitEligibleLanes(committedLanes) ||
+          maySuspendCommitInSyncRender(type, props)
+        ) {
+          suspendInstance(suspendedState, instance, type, props);
+        }
+      }
+      break;
+    }
+    case HostRoot:
+    case HostPortal: {
+      if (supportsResources) {
+        const previousHoistableRoot = currentHoistableRoot;
+        const container: Container = fiber.stateNode.containerInfo;
+        currentHoistableRoot = getHoistableRoot(container);
+
+        recursivelyAccumulateSuspenseyCommit(
+          fiber,
+          committedLanes,
+          suspendedState,
+        );
+        currentHoistableRoot = previousHoistableRoot;
+      } else {
+        recursivelyAccumulateSuspenseyCommit(
+          fiber,
+          committedLanes,
+          suspendedState,
+        );
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      const isHidden = (fiber.memoizedState: OffscreenState | null) !== null;
+      if (isHidden) {
+        // Don't suspend in hidden trees
+      } else {
+        const current = fiber.alternate;
+        const wasHidden =
+          current !== null &&
+          (current.memoizedState: OffscreenState | null) !== null;
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          const prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(
+            fiber,
+            committedLanes,
+            suspendedState,
+          );
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(
+            fiber,
+            committedLanes,
+            suspendedState,
+          );
+        }
+      }
+      break;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if ((fiber.flags & suspenseyCommitFlag) !== NoFlags) {
+          const props: ViewTransitionProps = fiber.memoizedProps;
+          const name: ?string | 'auto' = props.name;
+          if (name != null && name !== 'auto') {
+            // This is a named ViewTransition being mounted or reappearing. Let's add it to
+            // the map so we can match it with deletions later.
+            const state: ViewTransitionState = fiber.stateNode;
+            // Reset the pair in case we didn't end up restoring the instance in previous commits.
+            // This shouldn't really happen anymore but just in case. We could maybe add an invariant.
+            state.paired = null;
+            trackAppearingViewTransition(name, state);
+          }
+        }
+        recursivelyAccumulateSuspenseyCommit(
+          fiber,
+          committedLanes,
+          suspendedState,
+        );
+        break;
+      }
+      // Fallthrough
+    }
+    default: {
+      recursivelyAccumulateSuspenseyCommit(
+        fiber,
+        committedLanes,
+        suspendedState,
+      );
+    }
+  }
+}
+
+function detachAlternateSiblings(parentFiber: Fiber) {
+  // A fiber was deleted from this parent fiber, but it's still part of the
+  // previous (alternate) parent fiber's list of children. Because children
+  // are a linked list, an earlier sibling that's still alive will be
+  // connected to the deleted fiber via its `alternate`:
+  //
+  //   live fiber --alternate--> previous live fiber --sibling--> deleted
+  //   fiber
+  //
+  // We can't disconnect `alternate` on nodes that haven't been deleted yet,
+  // but we can disconnect the `sibling` and `child` pointers.
+
+  const previousFiber = parentFiber.alternate;
+  if (previousFiber !== null) {
+    let detachedChild = previousFiber.child;
+    if (detachedChild !== null) {
+      previousFiber.child = null;
+      do {
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        const detachedSibling = detachedChild.sibling;
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        detachedChild.sibling = null;
+        detachedChild = detachedSibling;
+      } while (detachedChild !== null);
+    }
+  }
+}
+
+function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
+  // Deletions effects can be scheduled on any fiber type. They need to happen
+  // before the children effects have fired.
+  const deletions = parentFiber.deletions;
+
+  if ((parentFiber.flags & ChildDeletion) !== NoFlags) {
+    if (deletions !== null) {
+      for (let i = 0; i < deletions.length; i++) {
+        const childToDelete = deletions[i];
+        const prevEffectStart = pushComponentEffectStart();
+        // TODO: Convert this to use recursion
+        nextEffect = childToDelete;
+        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          childToDelete,
+          parentFiber,
+        );
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          enableComponentPerformanceTrack &&
+          (childToDelete.mode & ProfileMode) !== NoMode &&
+          componentEffectStartTime >= 0 &&
+          componentEffectEndTime >= 0 &&
+          componentEffectEndTime - componentEffectStartTime > 0.05
+        ) {
+          logComponentUnmount(
+            childToDelete,
+            componentEffectStartTime,
+            componentEffectEndTime,
+          );
+        }
+        popComponentEffectStart(prevEffectStart);
+      }
+    }
+    detachAlternateSiblings(parentFiber);
+  }
+
+  // TODO: Split PassiveMask into separate masks for mount and unmount?
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      commitPassiveUnmountOnFiber(child);
+      child = child.sibling;
+    }
+  }
+}
+
+function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      if (finishedWork.flags & Passive) {
+        commitHookPassiveUnmountEffects(
+          finishedWork,
+          finishedWork.return,
+          HookPassive | HookHasEffect,
+        );
+      }
+      break;
+    }
+    case HostRoot: {
+      const prevProfilerEffectDuration = pushNestedEffectDurations();
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      if (enableProfilerTimer && enableProfilerCommitHooks) {
+        const finishedRoot: FiberRoot = finishedWork.stateNode;
+        finishedRoot.passiveEffectDuration += popNestedEffectDurations(
+          prevProfilerEffectDuration,
+        );
+      }
+      break;
+    }
+    case Profiler: {
+      const prevProfilerEffectDuration = pushNestedEffectDurations();
+
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+
+      if (enableProfilerTimer && enableProfilerCommitHooks) {
+        const profilerInstance = finishedWork.stateNode;
+        // Propagate layout effect durations to the next nearest Profiler ancestor.
+        // Do not reset these values until the next render so DevTools has a chance to read them first.
+        profilerInstance.passiveEffectDuration += bubbleNestedEffectDurations(
+          prevProfilerEffectDuration,
+        );
+      }
+      break;
+    }
+    case OffscreenComponent: {
+      const instance: OffscreenInstance = finishedWork.stateNode;
+      const nextState: OffscreenState | null = finishedWork.memoizedState;
+
+      const isHidden = nextState !== null;
+
+      if (
+        isHidden &&
+        instance._visibility & OffscreenPassiveEffectsConnected &&
+        // For backwards compatibility, don't unmount when a tree suspends. In
+        // the future we may change this to unmount after a delay.
+        (finishedWork.return === null ||
+          finishedWork.return.tag !== SuspenseComponent)
+      ) {
+        // The effects are currently connected. Disconnect them.
+        // TODO: Add option or heuristic to delay before disconnecting the
+        // effects. Then if the tree reappears before the delay has elapsed, we
+        // can skip toggling the effects entirely.
+        instance._visibility &= ~OffscreenPassiveEffectsConnected;
+
+        recursivelyTraverseDisconnectPassiveEffects(finishedWork);
+
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          enableComponentPerformanceTrack &&
+          (finishedWork.mode & ProfileMode) !== NoMode &&
+          componentEffectStartTime >= 0 &&
+          componentEffectEndTime >= 0 &&
+          componentEffectEndTime - componentEffectStartTime > 0.05
+        ) {
+          logComponentDisappeared(
+            finishedWork,
+            componentEffectStartTime,
+            componentEffectEndTime,
+          );
+        }
+      } else {
+        recursivelyTraversePassiveUnmountEffects(finishedWork);
+      }
+
+      break;
+    }
+    default: {
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      finishedWork,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+  popComponentEffectErrors(prevEffectErrors);
+}
+
+function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
+  // Deletions effects can be scheduled on any fiber type. They need to happen
+  // before the children effects have fired.
+  const deletions = parentFiber.deletions;
+
+  if ((parentFiber.flags & ChildDeletion) !== NoFlags) {
+    if (deletions !== null) {
+      for (let i = 0; i < deletions.length; i++) {
+        const childToDelete = deletions[i];
+        const prevEffectStart = pushComponentEffectStart();
+
+        // TODO: Convert this to use recursion
+        nextEffect = childToDelete;
+        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          childToDelete,
+          parentFiber,
+        );
+
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          enableComponentPerformanceTrack &&
+          (childToDelete.mode & ProfileMode) !== NoMode &&
+          componentEffectStartTime >= 0 &&
+          componentEffectEndTime >= 0 &&
+          componentEffectEndTime - componentEffectStartTime > 0.05
+        ) {
+          // While this is inside the disconnect path. This is a deletion within the
+          // disconnected tree. We currently log this for deletions in the mutation
+          // phase since it's shared by the disappear path.
+          logComponentUnmount(
+            childToDelete,
+            componentEffectStartTime,
+            componentEffectEndTime,
+          );
+        }
+        popComponentEffectStart(prevEffectStart);
+      }
+    }
+    detachAlternateSiblings(parentFiber);
+  }
+
+  // TODO: Check PassiveStatic flag
+  let child = parentFiber.child;
+  while (child !== null) {
+    disconnectPassiveEffect(child);
+    child = child.sibling;
+  }
+}
+
+export function disconnectPassiveEffect(finishedWork: Fiber): void {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      // TODO: Check PassiveStatic flag
+      commitHookPassiveUnmountEffects(
+        finishedWork,
+        finishedWork.return,
+        HookPassive,
+      );
+      // When disconnecting passive effects, we fire the effects in the same
+      // order as during a deletiong: parent before child
+      recursivelyTraverseDisconnectPassiveEffects(finishedWork);
+      break;
+    }
+    case OffscreenComponent: {
+      const instance: OffscreenInstance = finishedWork.stateNode;
+      if (instance._visibility & OffscreenPassiveEffectsConnected) {
+        instance._visibility &= ~OffscreenPassiveEffectsConnected;
+        recursivelyTraverseDisconnectPassiveEffects(finishedWork);
+      } else {
+        // The effects are already disconnected.
+      }
+      break;
+    }
+    default: {
+      recursivelyTraverseDisconnectPassiveEffects(finishedWork);
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (finishedWork.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      finishedWork,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+  popComponentEffectErrors(prevEffectErrors);
+}
+
+function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+  deletedSubtreeRoot: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // Deletion effects fire in parent -> child order
+    // TODO: Check if fiber has a PassiveStatic flag
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber, nearestMountedAncestor);
+
+    const child = fiber.child;
+    // TODO: Only traverse subtree if it has a PassiveStatic flag.
+    if (child !== null) {
+      child.return = fiber;
+      nextEffect = child;
+    } else {
+      commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+        deletedSubtreeRoot,
+      );
+    }
+  }
+}
+
+function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+  deletedSubtreeRoot: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const sibling = fiber.sibling;
+    const returnFiber = fiber.return;
+
+    // Recursively traverse the entire deleted tree and clean up fiber fields.
+    // This is more aggressive than ideal, and the long term goal is to only
+    // have to detach the deleted tree at the root.
+    detachFiberAfterEffects(fiber);
+    if (fiber === deletedSubtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    if (sibling !== null) {
+      sibling.return = returnFiber;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = returnFiber;
+  }
+}
+
+function commitPassiveUnmountInsideDeletedTreeOnFiber(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+): void {
+  const prevEffectStart = pushComponentEffectStart();
+  const prevEffectDuration = pushComponentEffectDuration();
+  const prevEffectErrors = pushComponentEffectErrors();
+  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
+  switch (current.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      commitHookPassiveUnmountEffects(
+        current,
+        nearestMountedAncestor,
+        HookPassive,
+      );
+      break;
+    }
+    // TODO: run passive unmount effects when unmounting a root.
+    // Because passive unmount effects are not currently run,
+    // the cache instance owned by the root will never be freed.
+    // When effects are run, the cache should be freed here:
+    // case HostRoot: {
+    //   const cache = current.memoizedState.cache;
+    //   releaseCache(cache);
+    //   break;
+    // }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (
+        current.memoizedState !== null &&
+        current.memoizedState.cachePool !== null
+      ) {
+        const cache: Cache = current.memoizedState.cachePool.pool;
+        // Retain/release the cache used for pending (suspended) nodes.
+        // Note that this is only reached in the non-suspended/visible case:
+        // when the content is suspended/hidden, the retain/release occurs
+        // via the parent Suspense component (see case above).
+        if (cache != null) {
+          retainCache(cache);
+        }
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const offscreenFiber: Fiber = (current.child: any);
+        const instance: OffscreenInstance = offscreenFiber.stateNode;
+        const transitions = instance._transitions;
+        if (transitions !== null) {
+          const abortReason: TransitionAbort = {
+            reason: 'suspense',
+            name: current.memoizedProps.name || null,
+          };
+          if (
+            current.memoizedState === null ||
+            current.memoizedState.dehydrated === null
+          ) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              offscreenFiber,
+              abortReason,
+              transitions,
+              instance,
+              true,
+            );
+
+            if (nearestMountedAncestor !== null) {
+              abortParentMarkerTransitionsForDeletedFiber(
+                nearestMountedAncestor,
+                abortReason,
+                transitions,
+                instance,
+                false,
+              );
+            }
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      const cache = current.memoizedState.cache;
+      releaseCache(cache);
+      break;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const instance: TracingMarkerInstance = current.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abortReason: TransitionAbort = {
+            reason: 'marker',
+            name: current.memoizedProps.name,
+          };
+          abortParentMarkerTransitionsForDeletedFiber(
+            current,
+            abortReason,
+            transitions,
+            null,
+            true,
+          );
+
+          if (nearestMountedAncestor !== null) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              nearestMountedAncestor,
+              abortReason,
+              transitions,
+              null,
+              false,
+            );
+          }
+        }
+      }
+      break;
+    }
+  }
+
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    enableComponentPerformanceTrack &&
+    (current.mode & ProfileMode) !== NoMode &&
+    componentEffectStartTime >= 0 &&
+    componentEffectEndTime >= 0 &&
+    (componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
+  ) {
+    logComponentEffect(
+      current,
+      componentEffectStartTime,
+      componentEffectEndTime,
+      componentEffectDuration,
+      componentEffectErrors,
+    );
+  }
+
+  popComponentEffectStart(prevEffectStart);
+  popComponentEffectDuration(prevEffectDuration);
+  popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
+  popComponentEffectErrors(prevEffectErrors);
+}
+
+export function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__) {
+    // We don't need to re-check StrictEffectsMode here.
+    // This function is only called if that check has already passed.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
+        break;
+      }
+      case ClassComponent: {
+        commitClassDidMount(fiber);
+        break;
+      }
+    }
+  }
+}
+
+export function invokePassiveEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__) {
+    // We don't need to re-check StrictEffectsMode here.
+    // This function is only called if that check has already passed.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
+        break;
+      }
+    }
+  }
+}
+
+export function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__) {
+    // We don't need to re-check StrictEffectsMode here.
+    // This function is only called if that check has already passed.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        commitHookEffectListUnmount(
+          HookLayout | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
+        }
+        break;
+      }
+    }
+  }
+}
+
+export function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__) {
+    // We don't need to re-check StrictEffectsMode here.
+    // This function is only called if that check has already passed.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        commitHookEffectListUnmount(
+          HookPassive | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+      }
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
new file mode 100644
index 00000000000..9b8c4a21bd8
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -0,0 +1,2081 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot';
+import type {Lanes, Lane} from './ReactFiberLane';
+import type {ReactScopeInstance, ReactContext} from 'shared/ReactTypes';
+import type {
+  Instance,
+  Type,
+  Props,
+  Container,
+  ChildSet,
+  Resource,
+} from './ReactFiberConfig';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {
+  SuspenseState,
+  SuspenseListRenderState,
+  RetryQueue,
+} from './ReactFiberSuspenseComponent';
+import type {
+  OffscreenState,
+  OffscreenQueue,
+} from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+import type {Cache} from './ReactFiberCacheComponent';
+import {
+  enableLegacyHidden,
+  enableSuspenseCallback,
+  enableScopeAPI,
+  enableProfilerTimer,
+  enableTransitionTracing,
+  passChildrenWhenCloningPersistedNodes,
+  disableLegacyMode,
+  enableViewTransition,
+  enableSuspenseyImages,
+} from 'shared/ReactFeatureFlags';
+
+import {now} from './Scheduler';
+
+import {
+  FunctionComponent,
+  ClassComponent,
+  HostRoot,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  HostPortal,
+  ContextProvider,
+  ContextConsumer,
+  ForwardRef,
+  Fragment,
+  Mode,
+  Profiler,
+  SuspenseComponent,
+  SuspenseListComponent,
+  MemoComponent,
+  SimpleMemoComponent,
+  LazyComponent,
+  IncompleteClassComponent,
+  IncompleteFunctionComponent,
+  ScopeComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  CacheComponent,
+  TracingMarkerComponent,
+  Throw,
+  ViewTransitionComponent,
+  ActivityComponent,
+} from './ReactWorkTags';
+import {
+  NoMode,
+  ConcurrentMode,
+  ProfileMode,
+  SuspenseyImagesMode,
+} from './ReactTypeOfMode';
+import {
+  Placement,
+  Update,
+  Visibility,
+  NoFlags,
+  DidCapture,
+  Snapshot,
+  ChildDeletion,
+  StaticMask,
+  Passive,
+  ForceClientRender,
+  MaySuspendCommit,
+  ScheduleRetry,
+  ShouldSuspendCommit,
+  Cloned,
+  ViewTransitionStatic,
+  Hydrate,
+  PortalStatic,
+} from './ReactFiberFlags';
+
+import {
+  createInstance,
+  createTextInstance,
+  resolveSingletonInstance,
+  appendInitialChild,
+  finalizeInitialChildren,
+  finalizeHydratedChildren,
+  supportsMutation,
+  supportsPersistence,
+  supportsResources,
+  supportsSingletons,
+  cloneInstance,
+  cloneHiddenInstance,
+  cloneHiddenTextInstance,
+  createContainerChildSet,
+  appendChildToContainerChildSet,
+  finalizeContainerChildren,
+  preparePortalMount,
+  prepareScopeUpdate,
+  maySuspendCommit,
+  maySuspendCommitOnUpdate,
+  maySuspendCommitInSyncRender,
+  mayResourceSuspendCommit,
+  preloadInstance,
+  preloadResource,
+} from './ReactFiberConfig';
+import {
+  getRootHostContainer,
+  popHostContext,
+  getHostContext,
+  popHostContainer,
+} from './ReactFiberHostContext';
+import {
+  suspenseStackCursor,
+  popSuspenseListContext,
+  popSuspenseHandler,
+  pushSuspenseListContext,
+  pushSuspenseListCatch,
+  setShallowSuspenseListContext,
+  ForceSuspenseFallback,
+  setDefaultShallowSuspenseListContext,
+} from './ReactFiberSuspenseContext';
+import {popHiddenContext} from './ReactFiberHiddenContext';
+import {findFirstSuspended} from './ReactFiberSuspenseComponent';
+import {
+  isContextProvider as isLegacyContextProvider,
+  popContext as popLegacyContext,
+  popTopLevelContextObject as popTopLevelLegacyContextObject,
+} from './ReactFiberLegacyContext';
+import {popProvider} from './ReactFiberNewContext';
+import {
+  prepareToHydrateHostInstance,
+  prepareToHydrateHostTextInstance,
+  prepareToHydrateHostActivityInstance,
+  prepareToHydrateHostSuspenseInstance,
+  popHydrationState,
+  resetHydrationState,
+  getIsHydrating,
+  upgradeHydrationErrorsToRecoverable,
+  emitPendingHydrationWarnings,
+} from './ReactFiberHydrationContext';
+import {
+  renderHasNotSuspendedYet,
+  getRenderTargetTime,
+  getWorkInProgressTransitions,
+  shouldRemainOnPreviousScreen,
+  markSpawnedRetryLane,
+} from './ReactFiberWorkLoop';
+import {
+  OffscreenLane,
+  SomeRetryLane,
+  NoLanes,
+  includesSomeLane,
+  mergeLanes,
+  claimNextRetryLane,
+  includesOnlySuspenseyCommitEligibleLanes,
+} from './ReactFiberLane';
+import {resetChildFibers} from './ReactChildFiber';
+import {createScopeInstance} from './ReactFiberScope';
+import {transferActualDuration} from './ReactProfilerTimer';
+import {popCacheProvider} from './ReactFiberCacheComponent';
+import {popTreeContext, pushTreeFork} from './ReactFiberTreeContext';
+import {popRootTransition, popTransition} from './ReactFiberTransition';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent';
+import {suspendCommit} from './ReactFiberThenable';
+import type {Flags} from './ReactFiberFlags';
+
+/**
+ * Tag the fiber with an update effect. This turns a Placement into
+ * a PlacementAndUpdate.
+ */
+function markUpdate(workInProgress: Fiber) {
+  workInProgress.flags |= Update;
+}
+
+/**
+ * Tag the fiber with Cloned in persistent mode to signal that
+ * it received an update that requires a clone of the tree above.
+ */
+function markCloned(workInProgress: Fiber) {
+  if (supportsPersistence) {
+    workInProgress.flags |= Cloned;
+  }
+}
+
+/**
+ * In persistent mode, return whether this update needs to clone the subtree.
+ */
+function doesRequireClone(current: null | Fiber, completedWork: Fiber) {
+  const didBailout = current !== null && current.child === completedWork.child;
+  if (didBailout) {
+    return false;
+  }
+
+  if ((completedWork.flags & ChildDeletion) !== NoFlags) {
+    return true;
+  }
+
+  // TODO: If we move the `doesRequireClone` call after `bubbleProperties`
+  // then we only have to check the `completedWork.subtreeFlags`.
+  let child = completedWork.child;
+  while (child !== null) {
+    const checkedFlags = Cloned | Visibility | Placement | ChildDeletion;
+    if (
+      (child.flags & checkedFlags) !== NoFlags ||
+      (child.subtreeFlags & checkedFlags) !== NoFlags
+    ) {
+      return true;
+    }
+    child = child.sibling;
+  }
+  return false;
+}
+
+function appendAllChildren(
+  parent: Instance,
+  workInProgress: Fiber,
+  needsVisibilityToggle: boolean,
+  isHidden: boolean,
+) {
+  if (supportsMutation) {
+    // We only have the top Fiber that was created but we need recurse down its
+    // children to find all the terminal nodes.
+    let node = workInProgress.child;
+    while (node !== null) {
+      if (node.tag === HostComponent || node.tag === HostText) {
+        appendInitialChild(parent, node.stateNode);
+      } else if (
+        node.tag === HostPortal ||
+        (supportsSingletons ? node.tag === HostSingleton : false)
+      ) {
+        // 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
+        // the portal directly.
+        // If we have a HostSingleton it will be placed independently
+      } else if (node.child !== null) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === workInProgress) {
+        return;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      while (node.sibling === null) {
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        if (node.return === null || node.return === workInProgress) {
+          return;
+        }
+        node = node.return;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+  } else if (supportsPersistence) {
+    // We only have the top Fiber that was created but we need recurse down its
+    // children to find all the terminal nodes.
+    let node = workInProgress.child;
+    while (node !== null) {
+      if (node.tag === HostComponent) {
+        let instance = node.stateNode;
+        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);
+        }
+        appendInitialChild(parent, instance);
+      } else if (node.tag === HostText) {
+        let instance = node.stateNode;
+        if (needsVisibilityToggle && isHidden) {
+          // This child is inside a timed out tree. Hide it.
+          const text = node.memoizedProps;
+          instance = cloneHiddenTextInstance(instance, text);
+        }
+        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
+        // the portal directly.
+      } else if (
+        node.tag === OffscreenComponent &&
+        node.memoizedState !== null
+      ) {
+        // The children in this boundary are hidden. Toggle their visibility
+        // before appending.
+        const child = node.child;
+        if (child !== null) {
+          child.return = node;
+        }
+        appendAllChildren(
+          parent,
+          node,
+          /* needsVisibilityToggle */ true,
+          /* isHidden */ true,
+        );
+      } else if (node.child !== null) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === workInProgress) {
+        return;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      while (node.sibling === null) {
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        if (node.return === null || node.return === workInProgress) {
+          return;
+        }
+        node = node.return;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+  }
+}
+
+// An unfortunate fork of appendAllChildren because we have two different parent types.
+function appendAllChildrenToContainer(
+  containerChildSet: ChildSet,
+  workInProgress: Fiber,
+  needsVisibilityToggle: boolean,
+  isHidden: boolean,
+): boolean {
+  // Host components that have their visibility toggled by an OffscreenComponent
+  // do not support passChildrenWhenCloningPersistedNodes. To inform the callee
+  // about their presence, we track and return if they were added to the
+  // child set.
+  let hasOffscreenComponentChild = false;
+  if (supportsPersistence) {
+    // We only have the top Fiber that was created but we need recurse down its
+    // children to find all the terminal nodes.
+    let node = workInProgress.child;
+    while (node !== null) {
+      if (node.tag === HostComponent) {
+        let instance = node.stateNode;
+        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);
+        }
+        appendChildToContainerChildSet(containerChildSet, instance);
+      } else if (node.tag === HostText) {
+        let instance = node.stateNode;
+        if (needsVisibilityToggle && isHidden) {
+          // This child is inside a timed out tree. Hide it.
+          const text = node.memoizedProps;
+          instance = cloneHiddenTextInstance(instance, text);
+        }
+        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
+        // the portal directly.
+      } else if (
+        node.tag === OffscreenComponent &&
+        node.memoizedState !== null
+      ) {
+        // The children in this boundary are hidden. Toggle their visibility
+        // before appending.
+        const child = node.child;
+        if (child !== null) {
+          child.return = node;
+        }
+        appendAllChildrenToContainer(
+          containerChildSet,
+          node,
+          /* needsVisibilityToggle */ true,
+          /* isHidden */ true,
+        );
+
+        hasOffscreenComponentChild = true;
+      } else if (node.child !== null) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      node = (node: Fiber);
+      if (node === workInProgress) {
+        return hasOffscreenComponentChild;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      while (node.sibling === null) {
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        if (node.return === null || node.return === workInProgress) {
+          return hasOffscreenComponentChild;
+        }
+        node = node.return;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
+  }
+
+  return hasOffscreenComponentChild;
+}
+
+function updateHostContainer(current: null | Fiber, workInProgress: Fiber) {
+  if (supportsPersistence) {
+    if (doesRequireClone(current, workInProgress)) {
+      const portalOrRoot: {
+        containerInfo: Container,
+        pendingChildren: ChildSet,
+        ...
+      } = workInProgress.stateNode;
+      const container = portalOrRoot.containerInfo;
+      const newChildSet = createContainerChildSet();
+      // If children might have changed, we have to add them all to the set.
+      appendAllChildrenToContainer(
+        newChildSet,
+        workInProgress,
+        /* needsVisibilityToggle */ false,
+        /* isHidden */ false,
+      );
+      portalOrRoot.pendingChildren = newChildSet;
+      // Schedule an update on the container to swap out the container.
+      markUpdate(workInProgress);
+      finalizeContainerChildren(container, newChildSet);
+    }
+  }
+}
+
+function updateHostComponent(
+  current: Fiber,
+  workInProgress: Fiber,
+  type: Type,
+  newProps: Props,
+  renderLanes: Lanes,
+) {
+  if (supportsMutation) {
+    // If we have an alternate, that means this is an update and we need to
+    // schedule a side-effect to do the updates.
+    const oldProps = current.memoizedProps;
+    if (oldProps === newProps) {
+      // In mutation mode, this is sufficient for a bailout because
+      // we won't touch this node even if children changed.
+      return;
+    }
+
+    markUpdate(workInProgress);
+  } else if (supportsPersistence) {
+    const currentInstance = current.stateNode;
+    const oldProps = current.memoizedProps;
+    // If there are no effects associated with this node, then none of our children had any updates.
+    // This guarantees that we can reuse all of them.
+    const requiresClone = doesRequireClone(current, workInProgress);
+    if (!requiresClone && oldProps === newProps) {
+      // No changes, just reuse the existing instance.
+      // Note that this might release a previous clone.
+      workInProgress.stateNode = currentInstance;
+      return;
+    }
+    const currentHostContext = getHostContext();
+
+    let newChildSet = null;
+    let hasOffscreenComponentChild = false;
+    if (requiresClone && passChildrenWhenCloningPersistedNodes) {
+      markCloned(workInProgress);
+      newChildSet = createContainerChildSet();
+      // If children might have changed, we have to add them all to the set.
+      hasOffscreenComponentChild = appendAllChildrenToContainer(
+        newChildSet,
+        workInProgress,
+        /* needsVisibilityToggle */ false,
+        /* isHidden */ false,
+      );
+    }
+
+    const newInstance = cloneInstance(
+      currentInstance,
+      type,
+      oldProps,
+      newProps,
+      !requiresClone,
+      !hasOffscreenComponentChild ? newChildSet : undefined,
+    );
+    if (newInstance === currentInstance) {
+      // No changes, just reuse the existing instance.
+      // Note that this might release a previous clone.
+      workInProgress.stateNode = currentInstance;
+      return;
+    } else {
+      markCloned(workInProgress);
+    }
+
+    // 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.
+    if (
+      finalizeInitialChildren(newInstance, type, newProps, currentHostContext)
+    ) {
+      markUpdate(workInProgress);
+    }
+    workInProgress.stateNode = newInstance;
+    if (
+      requiresClone &&
+      (!passChildrenWhenCloningPersistedNodes || hasOffscreenComponentChild)
+    ) {
+      // If children have changed, we have to add them all to the set.
+      appendAllChildren(
+        newInstance,
+        workInProgress,
+        /* needsVisibilityToggle */ false,
+        /* isHidden */ false,
+      );
+    }
+  }
+}
+
+// This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
+// not created until the complete phase. For our existing use cases, host nodes
+// that suspend don't have children, so it doesn't matter. But that might not
+// always be true in the future.
+function preloadInstanceAndSuspendIfNeeded(
+  workInProgress: Fiber,
+  type: Type,
+  oldProps: null | Props,
+  newProps: Props,
+  renderLanes: Lanes,
+) {
+  const maySuspend =
+    (enableSuspenseyImages ||
+      (workInProgress.mode & SuspenseyImagesMode) !== NoMode) &&
+    (oldProps === null
+      ? maySuspendCommit(type, newProps)
+      : maySuspendCommitOnUpdate(type, oldProps, newProps));
+
+  if (!maySuspend) {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  }
+
+  // Mark this fiber with a flag. This gets set on all host instances
+  // that might possibly suspend, even if they don't need to suspend
+  // currently. We use this when revealing a prerendered tree, because
+  // even though the tree has "mounted", its resources might not have
+  // loaded yet.
+  workInProgress.flags |= MaySuspendCommit;
+
+  if (
+    includesOnlySuspenseyCommitEligibleLanes(renderLanes) ||
+    maySuspendCommitInSyncRender(type, newProps)
+  ) {
+    // preload the instance if necessary. Even if this is an urgent render there
+    // could be benefits to preloading early.
+    // @TODO we should probably do the preload in begin work
+    const isReady = preloadInstance(workInProgress.stateNode, type, newProps);
+    if (!isReady) {
+      if (shouldRemainOnPreviousScreen()) {
+        workInProgress.flags |= ShouldSuspendCommit;
+      } else {
+        suspendCommit();
+      }
+    } else {
+      // Even if we're ready we suspend the commit and check again in the pre-commit
+      // phase if we need to suspend anyway. Such as if it's delayed on decoding or
+      // if it was dropped from the cache while rendering due to pressure.
+      workInProgress.flags |= ShouldSuspendCommit;
+    }
+  }
+}
+
+function preloadResourceAndSuspendIfNeeded(
+  workInProgress: Fiber,
+  resource: Resource,
+  type: Type,
+  props: Props,
+  renderLanes: Lanes,
+) {
+  // This is a fork of preloadInstanceAndSuspendIfNeeded, but for resources.
+  if (!mayResourceSuspendCommit(resource)) {
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  }
+
+  workInProgress.flags |= MaySuspendCommit;
+
+  const isReady = preloadResource(resource);
+  if (!isReady) {
+    if (shouldRemainOnPreviousScreen()) {
+      workInProgress.flags |= ShouldSuspendCommit;
+    } else {
+      suspendCommit();
+    }
+  }
+}
+
+function scheduleRetryEffect(
+  workInProgress: Fiber,
+  retryQueue: RetryQueue | null,
+) {
+  const wakeables = retryQueue;
+  if (wakeables !== null) {
+    // Schedule an effect to attach a retry listener to the promise.
+    // TODO: Move to passive phase
+    workInProgress.flags |= Update;
+  }
+
+  // Check if we need to schedule an immediate retry. This should happen
+  // whenever we unwind a suspended tree without fully rendering its siblings;
+  // we need to begin the retry so we can start prerendering them.
+  //
+  // We also use this mechanism for Suspensey Resources (e.g. stylesheets),
+  // because those don't actually block the render phase, only the commit phase.
+  // So we can start rendering even before the resources are ready.
+  if (workInProgress.flags & ScheduleRetry) {
+    const retryLane =
+      // TODO: This check should probably be moved into claimNextRetryLane
+      // I also suspect that we need some further consolidation of offscreen
+      // and retry lanes.
+      workInProgress.tag !== OffscreenComponent
+        ? claimNextRetryLane()
+        : OffscreenLane;
+    workInProgress.lanes = mergeLanes(workInProgress.lanes, retryLane);
+
+    // Track the lanes that have been scheduled for an immediate retry so that
+    // we can mark them as suspended upon committing the root.
+    markSpawnedRetryLane(retryLane);
+  }
+}
+
+function updateHostText(
+  current: Fiber,
+  workInProgress: Fiber,
+  oldText: string,
+  newText: string,
+) {
+  if (supportsMutation) {
+    // If the text differs, mark it as an update. All the work in done in commitWork.
+    if (oldText !== newText) {
+      markUpdate(workInProgress);
+    }
+  } else if (supportsPersistence) {
+    if (oldText !== newText) {
+      // If the text content differs, we'll create a new text instance for it.
+      const rootContainerInstance = getRootHostContainer();
+      const currentHostContext = getHostContext();
+      markCloned(workInProgress);
+      workInProgress.stateNode = createTextInstance(
+        newText,
+        rootContainerInstance,
+        currentHostContext,
+        workInProgress,
+      );
+    } else {
+      workInProgress.stateNode = current.stateNode;
+    }
+  }
+}
+
+function cutOffTailIfNeeded(
+  renderState: SuspenseListRenderState,
+  hasRenderedATailFallback: boolean,
+) {
+  if (getIsHydrating()) {
+    // If we're hydrating, we should consume as many items as we can
+    // so we don't leave any behind.
+    return;
+  }
+  switch (renderState.tailMode) {
+    case 'visible': {
+      // Everything should remain as it was.
+      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;
+    }
+    // Hidden is now the default.
+    case 'hidden':
+    default: {
+      // 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;
+    }
+  }
+}
+
+function isOnlyNewMounts(tail: Fiber): boolean {
+  let fiber: null | Fiber = tail;
+  while (fiber !== null) {
+    if (fiber.alternate !== null) {
+      return false;
+    }
+    fiber = fiber.sibling;
+  }
+  return true;
+}
+
+function bubbleProperties(completedWork: Fiber) {
+  const didBailout =
+    completedWork.alternate !== null &&
+    completedWork.alternate.child === completedWork.child;
+
+  let newChildLanes: Lanes = NoLanes;
+  let subtreeFlags: Flags = NoFlags;
+
+  if (!didBailout) {
+    // Bubble up the earliest expiration time.
+    if (enableProfilerTimer && (completedWork.mode & ProfileMode) !== NoMode) {
+      // In profiling mode, resetChildExpirationTime is also used to reset
+      // profiler durations.
+      let actualDuration = completedWork.actualDuration;
+      let treeBaseDuration = ((completedWork.selfBaseDuration: any): number);
+
+      let child = completedWork.child;
+      while (child !== null) {
+        newChildLanes = mergeLanes(
+          newChildLanes,
+          mergeLanes(child.lanes, child.childLanes),
+        );
+
+        subtreeFlags |= child.subtreeFlags;
+        subtreeFlags |= child.flags;
+
+        // When a fiber is cloned, its actualDuration is reset to 0. This value will
+        // only be updated if work is done on the fiber (i.e. it doesn't bailout).
+        // When work is done, it should bubble to the parent's actualDuration. If
+        // the fiber has not been cloned though, (meaning no work was done), then
+        // this value will reflect the amount of time spent working on a previous
+        // render. In that case it should not bubble. We determine whether it was
+        // cloned by comparing the child pointer.
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+        actualDuration += child.actualDuration;
+
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+        treeBaseDuration += child.treeBaseDuration;
+        child = child.sibling;
+      }
+
+      completedWork.actualDuration = actualDuration;
+      completedWork.treeBaseDuration = treeBaseDuration;
+    } else {
+      let child = completedWork.child;
+      while (child !== null) {
+        newChildLanes = mergeLanes(
+          newChildLanes,
+          mergeLanes(child.lanes, child.childLanes),
+        );
+
+        subtreeFlags |= child.subtreeFlags;
+        subtreeFlags |= child.flags;
+
+        // Update the return pointer so the tree is consistent. This is a code
+        // smell because it assumes the commit phase is never concurrent with
+        // the render phase. Will address during refactor to alternate model.
+        child.return = completedWork;
+
+        child = child.sibling;
+      }
+    }
+
+    completedWork.subtreeFlags |= subtreeFlags;
+  } else {
+    // Bubble up the earliest expiration time.
+    if (enableProfilerTimer && (completedWork.mode & ProfileMode) !== NoMode) {
+      // In profiling mode, resetChildExpirationTime is also used to reset
+      // profiler durations.
+      let treeBaseDuration = ((completedWork.selfBaseDuration: any): number);
+
+      let child = completedWork.child;
+      while (child !== null) {
+        newChildLanes = mergeLanes(
+          newChildLanes,
+          mergeLanes(child.lanes, child.childLanes),
+        );
+
+        // "Static" flags share the lifetime of the fiber/hook they belong to,
+        // so we should bubble those up even during a bailout. All the other
+        // flags have a lifetime only of a single render + commit, so we should
+        // ignore them.
+        subtreeFlags |= child.subtreeFlags & StaticMask;
+        subtreeFlags |= child.flags & StaticMask;
+
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+        treeBaseDuration += child.treeBaseDuration;
+        child = child.sibling;
+      }
+
+      completedWork.treeBaseDuration = treeBaseDuration;
+    } else {
+      let child = completedWork.child;
+      while (child !== null) {
+        newChildLanes = mergeLanes(
+          newChildLanes,
+          mergeLanes(child.lanes, child.childLanes),
+        );
+
+        // "Static" flags share the lifetime of the fiber/hook they belong to,
+        // so we should bubble those up even during a bailout. All the other
+        // flags have a lifetime only of a single render + commit, so we should
+        // ignore them.
+        subtreeFlags |= child.subtreeFlags & StaticMask;
+        subtreeFlags |= child.flags & StaticMask;
+
+        // Update the return pointer so the tree is consistent. This is a code
+        // smell because it assumes the commit phase is never concurrent with
+        // the render phase. Will address during refactor to alternate model.
+        child.return = completedWork;
+
+        child = child.sibling;
+      }
+    }
+
+    completedWork.subtreeFlags |= subtreeFlags;
+  }
+
+  completedWork.childLanes = newChildLanes;
+
+  return didBailout;
+}
+
+function completeDehydratedActivityBoundary(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextState: ActivityState | null,
+): boolean {
+  const wasHydrated = popHydrationState(workInProgress);
+
+  if (nextState !== null) {
+    // We might be inside a hydration state the first time we're picking up this
+    // Activity boundary, and also after we've reentered it for further hydration.
+    if (current === null) {
+      if (!wasHydrated) {
+        throw new Error(
+          'A dehydrated suspense component was completed without a hydrated node. ' +
+            'This is probably a bug in React.',
+        );
+      }
+      prepareToHydrateHostActivityInstance(workInProgress);
+      bubbleProperties(workInProgress);
+      if (enableProfilerTimer) {
+        if ((workInProgress.mode & ProfileMode) !== NoMode) {
+          const isTimedOutSuspense = nextState !== null;
+          if (isTimedOutSuspense) {
+            // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+            const primaryChildFragment = workInProgress.child;
+            if (primaryChildFragment !== null) {
+              // $FlowFixMe[unsafe-arithmetic] Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -=
+                ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return false;
+    } else {
+      emitPendingHydrationWarnings();
+      // We might have reentered this boundary to hydrate it. If so, we need to reset the hydration
+      // state since we're now exiting out of it. popHydrationState doesn't do that for us.
+      resetHydrationState();
+      if ((workInProgress.flags & DidCapture) === NoFlags) {
+        // This boundary did not suspend so it's now hydrated and unsuspended.
+        nextState = 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.flags |= Update;
+      bubbleProperties(workInProgress);
+      if (enableProfilerTimer) {
+        if ((workInProgress.mode & ProfileMode) !== NoMode) {
+          const isTimedOutSuspense = nextState !== null;
+          if (isTimedOutSuspense) {
+            // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+            const primaryChildFragment = workInProgress.child;
+            if (primaryChildFragment !== null) {
+              // $FlowFixMe[unsafe-arithmetic] Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -=
+                ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return false;
+    }
+  } else {
+    // Successfully completed this tree. If this was a forced client render,
+    // there may have been recoverable errors during first hydration
+    // attempt. If so, add them to a queue so we can log them in the
+    // commit phase. We also add them to prev state so we can get to them
+    // from the Suspense Boundary.
+    const hydrationErrors = upgradeHydrationErrorsToRecoverable();
+    if (current !== null && current.memoizedState !== null) {
+      const prevState: ActivityState = current.memoizedState;
+      prevState.hydrationErrors = hydrationErrors;
+    }
+    // Fall through to normal Offscreen path
+    return true;
+  }
+}
+
+function completeDehydratedSuspenseBoundary(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextState: SuspenseState | null,
+): boolean {
+  const wasHydrated = popHydrationState(workInProgress);
+
+  if (nextState !== null && nextState.dehydrated !== null) {
+    // We might be inside a hydration state the first time we're picking up this
+    // Suspense boundary, and also after we've reentered it for further hydration.
+    if (current === null) {
+      if (!wasHydrated) {
+        throw new Error(
+          'A dehydrated suspense component was completed without a hydrated node. ' +
+            'This is probably a bug in React.',
+        );
+      }
+      prepareToHydrateHostSuspenseInstance(workInProgress);
+      bubbleProperties(workInProgress);
+      if (enableProfilerTimer) {
+        if ((workInProgress.mode & ProfileMode) !== NoMode) {
+          const isTimedOutSuspense = nextState !== null;
+          if (isTimedOutSuspense) {
+            // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+            const primaryChildFragment = workInProgress.child;
+            if (primaryChildFragment !== null) {
+              // $FlowFixMe[unsafe-arithmetic] Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -=
+                ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return false;
+    } else {
+      emitPendingHydrationWarnings();
+      // We might have reentered this boundary to hydrate it. If so, we need to reset the hydration
+      // state since we're now exiting out of it. popHydrationState doesn't do that for us.
+      resetHydrationState();
+      if ((workInProgress.flags & DidCapture) === NoFlags) {
+        // This boundary did not suspend so it's now hydrated and unsuspended.
+        nextState = 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.flags |= Update;
+      bubbleProperties(workInProgress);
+      if (enableProfilerTimer) {
+        if ((workInProgress.mode & ProfileMode) !== NoMode) {
+          const isTimedOutSuspense = nextState !== null;
+          if (isTimedOutSuspense) {
+            // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+            const primaryChildFragment = workInProgress.child;
+            if (primaryChildFragment !== null) {
+              // $FlowFixMe[unsafe-arithmetic] Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -=
+                ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return false;
+    }
+  } else {
+    // Successfully completed this tree. If this was a forced client render,
+    // there may have been recoverable errors during first hydration
+    // attempt. If so, add them to a queue so we can log them in the
+    // commit phase. We also add them to prev state so we can get to them
+    // from the Suspense Boundary.
+    const hydrationErrors = upgradeHydrationErrorsToRecoverable();
+    if (current !== null && current.memoizedState !== null) {
+      const prevState: SuspenseState = current.memoizedState;
+      prevState.hydrationErrors = hydrationErrors;
+    }
+    // Fall through to normal Suspense path
+    return true;
+  }
+}
+
+function completeWork(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber | null {
+  const newProps = workInProgress.pendingProps;
+  // Note: This intentionally doesn't check if we're hydrating because comparing
+  // to the current tree provider fiber is just as fast and less error-prone.
+  // Ideally we would have a special version of the work loop only
+  // for hydration.
+  popTreeContext(workInProgress);
+  switch (workInProgress.tag) {
+    case IncompleteFunctionComponent: {
+      if (disableLegacyMode) {
+        break;
+      }
+      // Fallthrough
+    }
+    case LazyComponent:
+    case SimpleMemoComponent:
+    case FunctionComponent:
+    case ForwardRef:
+    case Fragment:
+    case Mode:
+    case Profiler:
+    case ContextConsumer:
+    case MemoComponent:
+      bubbleProperties(workInProgress);
+      return null;
+    case ClassComponent: {
+      const Component = workInProgress.type;
+      if (isLegacyContextProvider(Component)) {
+        popLegacyContext(workInProgress);
+      }
+      bubbleProperties(workInProgress);
+      return null;
+    }
+    case HostRoot: {
+      const fiberRoot = (workInProgress.stateNode: FiberRoot);
+
+      if (enableTransitionTracing) {
+        const transitions = getWorkInProgressTransitions();
+        // We set the Passive flag here because if there are new transitions,
+        // we will need to schedule callbacks and process the transitions,
+        // which we do in the passive phase
+        if (transitions !== null) {
+          workInProgress.flags |= Passive;
+        }
+      }
+
+      let previousCache: Cache | null = null;
+      if (current !== null) {
+        previousCache = current.memoizedState.cache;
+      }
+      const cache: Cache = workInProgress.memoizedState.cache;
+      if (cache !== previousCache) {
+        // Run passive effects to retain/release the cache.
+        workInProgress.flags |= Passive;
+      }
+      popCacheProvider(workInProgress, cache);
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
+      popRootTransition(workInProgress, fiberRoot, renderLanes);
+      popHostContainer(workInProgress);
+      popTopLevelLegacyContextObject(workInProgress);
+      if (fiberRoot.pendingContext) {
+        fiberRoot.context = fiberRoot.pendingContext;
+        fiberRoot.pendingContext = null;
+      }
+      if (current === null || current.child === null) {
+        // If we hydrated, pop so that we can delete any remaining children
+        // that weren't hydrated.
+        const wasHydrated = popHydrationState(workInProgress);
+        if (wasHydrated) {
+          emitPendingHydrationWarnings();
+          // If we hydrated, then we'll need to schedule an update for
+          // the commit side-effects on the root.
+          markUpdate(workInProgress);
+        } else {
+          if (current !== null) {
+            const prevState: RootState = current.memoizedState;
+            if (
+              // Check if this is a client root
+              !prevState.isDehydrated ||
+              // Check if we reverted to client rendering (e.g. due to an error)
+              (workInProgress.flags & ForceClientRender) !== NoFlags
+            ) {
+              // Schedule an effect to clear this container at the start of the
+              // next commit. This handles the case of React rendering into a
+              // container with previous children. It's also safe to do for
+              // updates too, because current.child would only be null if the
+              // previous render was null (so the container would already
+              // be empty).
+              workInProgress.flags |= Snapshot;
+
+              // If this was a forced client render, there may have been
+              // recoverable errors during first hydration attempt. If so, add
+              // them to a queue so we can log them in the commit phase.
+              upgradeHydrationErrorsToRecoverable();
+            }
+          }
+        }
+      }
+      updateHostContainer(current, workInProgress);
+      bubbleProperties(workInProgress);
+      if (enableTransitionTracing) {
+        if ((workInProgress.subtreeFlags & Visibility) !== NoFlags) {
+          // If any of our suspense children toggle visibility, this means that
+          // the pending boundaries array needs to be updated, which we only
+          // do in the passive phase.
+          workInProgress.flags |= Passive;
+        }
+      }
+      return null;
+    }
+    case HostHoistable: {
+      if (supportsResources) {
+        // The branching here is more complicated than you might expect because
+        // a HostHoistable sometimes corresponds to a Resource and sometimes
+        // corresponds to an Instance. It can also switch during an update.
+
+        const type = workInProgress.type;
+        const nextResource: Resource | null = workInProgress.memoizedState;
+        if (current === null) {
+          // We are mounting and must Update this Hoistable in this commit
+          // @TODO refactor this block to create the instance here in complete
+          // phase if we are not hydrating.
+          markUpdate(workInProgress);
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadResourceAndSuspendIfNeeded(
+              workInProgress,
+              nextResource,
+              type,
+              newProps,
+              renderLanes,
+            );
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(
+              workInProgress,
+              type,
+              null,
+              newProps,
+              renderLanes,
+            );
+            return null;
+          }
+        } else {
+          // This is an update.
+          if (nextResource) {
+            // This is a Resource
+            if (nextResource !== current.memoizedState) {
+              // we have a new Resource. we need to update
+              markUpdate(workInProgress);
+              // This must come at the very end of the complete phase.
+              bubbleProperties(workInProgress);
+              // This must come at the very end of the complete phase, because it might
+              // throw to suspend, and if the resource immediately loads, the work loop
+              // will resume rendering as if the work-in-progress completed. So it must
+              // fully complete.
+              preloadResourceAndSuspendIfNeeded(
+                workInProgress,
+                nextResource,
+                type,
+                newProps,
+                renderLanes,
+              );
+              return null;
+            } else {
+              // This must come at the very end of the complete phase.
+              bubbleProperties(workInProgress);
+              workInProgress.flags &= ~MaySuspendCommit;
+              return null;
+            }
+          } else {
+            const oldProps = current.memoizedProps;
+            // This is an Instance
+            // We may have props to update on the Hoistable instance.
+            if (supportsMutation) {
+              if (oldProps !== newProps) {
+                markUpdate(workInProgress);
+              }
+            } else {
+              // We use the updateHostComponent path becuase it produces
+              // the update queue we need for Hoistables.
+              updateHostComponent(
+                current,
+                workInProgress,
+                type,
+                newProps,
+                renderLanes,
+              );
+            }
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(
+              workInProgress,
+              type,
+              oldProps,
+              newProps,
+              renderLanes,
+            );
+            return null;
+          }
+        }
+      }
+      // Fall through
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        popHostContext(workInProgress);
+        const rootContainerInstance = getRootHostContainer();
+        const type = workInProgress.type;
+        if (current !== null && workInProgress.stateNode != null) {
+          if (supportsMutation) {
+            const oldProps = current.memoizedProps;
+            if (oldProps !== newProps) {
+              markUpdate(workInProgress);
+            }
+          } else {
+            updateHostComponent(
+              current,
+              workInProgress,
+              type,
+              newProps,
+              renderLanes,
+            );
+          }
+        } else {
+          if (!newProps) {
+            if (workInProgress.stateNode === null) {
+              throw new Error(
+                'We must have new props for new mounts. This error is likely ' +
+                  'caused by a bug in React. Please file an issue.',
+              );
+            }
+
+            // This can happen when we abort work.
+            bubbleProperties(workInProgress);
+            if (enableViewTransition) {
+              // Host Components act as their own View Transitions which doesn't run enter/exit animations.
+              // We clear any ViewTransitionStatic flag bubbled from inner View Transitions.
+              workInProgress.subtreeFlags &= ~ViewTransitionStatic;
+            }
+            return null;
+          }
+
+          const currentHostContext = getHostContext();
+          const wasHydrated = popHydrationState(workInProgress);
+          let instance: Instance;
+          if (wasHydrated) {
+            // We ignore the boolean indicating there is an updateQueue because
+            // it is used only to set text children and HostSingletons do not
+            // use them.
+            prepareToHydrateHostInstance(workInProgress, currentHostContext);
+            instance = workInProgress.stateNode;
+          } else {
+            instance = resolveSingletonInstance(
+              type,
+              newProps,
+              rootContainerInstance,
+              currentHostContext,
+              true,
+            );
+            workInProgress.stateNode = instance;
+            markUpdate(workInProgress);
+          }
+        }
+        bubbleProperties(workInProgress);
+        if (enableViewTransition) {
+          // Host Components act as their own View Transitions which doesn't run enter/exit animations.
+          // We clear any ViewTransitionStatic flag bubbled from inner View Transitions.
+          workInProgress.subtreeFlags &= ~ViewTransitionStatic;
+        }
+        return null;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      popHostContext(workInProgress);
+      const type = workInProgress.type;
+      if (current !== null && workInProgress.stateNode != null) {
+        updateHostComponent(
+          current,
+          workInProgress,
+          type,
+          newProps,
+          renderLanes,
+        );
+      } else {
+        if (!newProps) {
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+
+          // This can happen when we abort work.
+          bubbleProperties(workInProgress);
+          if (enableViewTransition) {
+            // Host Components act as their own View Transitions which doesn't run enter/exit animations.
+            // We clear any ViewTransitionStatic flag bubbled from inner View Transitions.
+            workInProgress.subtreeFlags &= ~ViewTransitionStatic;
+          }
+          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 whether we want to add them top->down or
+        // bottom->up. Top->down is faster in IE11.
+        const wasHydrated = popHydrationState(workInProgress);
+        if (wasHydrated) {
+          // TODO: Move this and createInstance step into the beginPhase
+          // to consolidate.
+          prepareToHydrateHostInstance(workInProgress, currentHostContext);
+          if (
+            finalizeHydratedChildren(
+              workInProgress.stateNode,
+              type,
+              newProps,
+              currentHostContext,
+            )
+          ) {
+            workInProgress.flags |= Hydrate;
+          }
+        } else {
+          const rootContainerInstance = getRootHostContainer();
+          const instance = createInstance(
+            type,
+            newProps,
+            rootContainerInstance,
+            currentHostContext,
+            workInProgress,
+          );
+          // TODO: For persistent renderers, we should pass children as part
+          // of the initial instance creation
+          markCloned(workInProgress);
+          appendAllChildren(instance, workInProgress, false, false);
+          workInProgress.stateNode = instance;
+
+          // 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.
+          if (
+            finalizeInitialChildren(
+              instance,
+              type,
+              newProps,
+              currentHostContext,
+            )
+          ) {
+            markUpdate(workInProgress);
+          }
+        }
+      }
+      bubbleProperties(workInProgress);
+      if (enableViewTransition) {
+        // Host Components act as their own View Transitions which doesn't run enter/exit animations.
+        // We clear any ViewTransitionStatic flag bubbled from inner View Transitions.
+        workInProgress.subtreeFlags &= ~ViewTransitionStatic;
+      }
+
+      // This must come at the very end of the complete phase, because it might
+      // throw to suspend, and if the resource immediately loads, the work loop
+      // will resume rendering as if the work-in-progress completed. So it must
+      // fully complete.
+      preloadInstanceAndSuspendIfNeeded(
+        workInProgress,
+        workInProgress.type,
+        current === null ? null : current.memoizedProps,
+        workInProgress.pendingProps,
+        renderLanes,
+      );
+      return null;
+    }
+    case HostText: {
+      const newText = newProps;
+      if (current && workInProgress.stateNode != null) {
+        const oldText = current.memoizedProps;
+        // If we have an alternate, that means this is an update and we need
+        // to schedule a side-effect to do the updates.
+        updateHostText(current, workInProgress, oldText, newText);
+      } else {
+        if (typeof newText !== 'string') {
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+          // This can happen when we abort work.
+        }
+        const rootContainerInstance = getRootHostContainer();
+        const currentHostContext = getHostContext();
+        const wasHydrated = popHydrationState(workInProgress);
+        if (wasHydrated) {
+          prepareToHydrateHostTextInstance(workInProgress);
+        } else {
+          markCloned(workInProgress);
+          workInProgress.stateNode = createTextInstance(
+            newText,
+            rootContainerInstance,
+            currentHostContext,
+            workInProgress,
+          );
+        }
+      }
+      bubbleProperties(workInProgress);
+      return null;
+    }
+    case ActivityComponent: {
+      const nextState: null | ActivityState = workInProgress.memoizedState;
+
+      if (current === null || current.memoizedState !== null) {
+        const fallthroughToNormalOffscreenPath =
+          completeDehydratedActivityBoundary(
+            current,
+            workInProgress,
+            nextState,
+          );
+        if (!fallthroughToNormalOffscreenPath) {
+          if (workInProgress.flags & ForceClientRender) {
+            popSuspenseHandler(workInProgress);
+            // Special case. There were remaining unhydrated nodes. We treat
+            // this as a mismatch. Revert to client rendering.
+            return workInProgress;
+          } else {
+            popSuspenseHandler(workInProgress);
+            // Did not finish hydrating, either because this is the initial
+            // render or because something suspended.
+            return null;
+          }
+        }
+
+        if ((workInProgress.flags & DidCapture) !== NoFlags) {
+          // We called retryActivityComponentWithoutHydrating and tried client rendering
+          // but now we suspended again. We should never arrive here because we should
+          // not have pushed a suspense handler during that second pass and it should
+          // instead have suspended above.
+          throw new Error(
+            'Client rendering an Activity suspended it again. This is a bug in React.',
+          );
+        }
+
+        // Continue with the normal Activity path.
+      }
+
+      bubbleProperties(workInProgress);
+      return null;
+    }
+    case SuspenseComponent: {
+      const nextState: null | SuspenseState = workInProgress.memoizedState;
+
+      // Special path for dehydrated boundaries. We may eventually move this
+      // to its own fiber type so that we can add other kinds of hydration
+      // boundaries that aren't associated with a Suspense tree. In anticipation
+      // of such a refactor, all the hydration logic is contained in
+      // this branch.
+      if (
+        current === null ||
+        (current.memoizedState !== null &&
+          current.memoizedState.dehydrated !== null)
+      ) {
+        const fallthroughToNormalSuspensePath =
+          completeDehydratedSuspenseBoundary(
+            current,
+            workInProgress,
+            nextState,
+          );
+        if (!fallthroughToNormalSuspensePath) {
+          if (workInProgress.flags & ForceClientRender) {
+            popSuspenseHandler(workInProgress);
+            // Special case. There were remaining unhydrated nodes. We treat
+            // this as a mismatch. Revert to client rendering.
+            return workInProgress;
+          } else {
+            popSuspenseHandler(workInProgress);
+            // Did not finish hydrating, either because this is the initial
+            // render or because something suspended.
+            return null;
+          }
+        }
+
+        // Continue with the normal Suspense path.
+      }
+
+      popSuspenseHandler(workInProgress);
+
+      if ((workInProgress.flags & DidCapture) !== NoFlags) {
+        // Something suspended. Re-render with the fallback children.
+        workInProgress.lanes = renderLanes;
+        if (
+          enableProfilerTimer &&
+          (workInProgress.mode & ProfileMode) !== NoMode
+        ) {
+          transferActualDuration(workInProgress);
+        }
+        // Don't bubble properties in this case.
+        return workInProgress;
+      }
+
+      const nextDidTimeout = nextState !== null;
+      const prevDidTimeout =
+        current !== null &&
+        (current.memoizedState: null | SuspenseState) !== null;
+
+      if (nextDidTimeout) {
+        const offscreenFiber: Fiber = (workInProgress.child: any);
+        let previousCache: Cache | null = null;
+        if (
+          offscreenFiber.alternate !== null &&
+          offscreenFiber.alternate.memoizedState !== null &&
+          offscreenFiber.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = offscreenFiber.alternate.memoizedState.cachePool.pool;
+        }
+        let cache: Cache | null = null;
+        if (
+          offscreenFiber.memoizedState !== null &&
+          offscreenFiber.memoizedState.cachePool !== null
+        ) {
+          cache = offscreenFiber.memoizedState.cachePool.pool;
+        }
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          offscreenFiber.flags |= Passive;
+        }
+      }
+
+      // If the suspended state of the boundary changes, we need to schedule
+      // a passive effect, which is when we process the transitions
+      if (nextDidTimeout !== prevDidTimeout) {
+        if (enableTransitionTracing) {
+          const offscreenFiber: Fiber = (workInProgress.child: any);
+          offscreenFiber.flags |= Passive;
+        }
+
+        // If the suspended state of the boundary changes, we need to schedule
+        // an effect to toggle the subtree's visibility. When we switch from
+        // fallback -> primary, the inner Offscreen fiber schedules this effect
+        // as part of its normal complete phase. But when we switch from
+        // primary -> fallback, the inner Offscreen fiber does not have a complete
+        // phase. So we need to schedule its effect here.
+        //
+        // We also use this flag to connect/disconnect the effects, but the same
+        // logic applies: when re-connecting, the Offscreen fiber's complete
+        // phase will handle scheduling the effect. It's only when the fallback
+        // is active that we have to do anything special.
+        if (nextDidTimeout) {
+          const offscreenFiber: Fiber = (workInProgress.child: any);
+          offscreenFiber.flags |= Visibility;
+        }
+      }
+
+      const retryQueue: RetryQueue | null = (workInProgress.updateQueue: any);
+      scheduleRetryEffect(workInProgress, retryQueue);
+
+      if (
+        enableSuspenseCallback &&
+        workInProgress.updateQueue !== null &&
+        workInProgress.memoizedProps.suspenseCallback != null
+      ) {
+        // Always notify the callback
+        // TODO: Move to passive phase
+        workInProgress.flags |= Update;
+      }
+      bubbleProperties(workInProgress);
+      if (enableProfilerTimer) {
+        if ((workInProgress.mode & ProfileMode) !== NoMode) {
+          if (nextDidTimeout) {
+            // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+            const primaryChildFragment = workInProgress.child;
+            if (primaryChildFragment !== null) {
+              // $FlowFixMe[unsafe-arithmetic] Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -=
+                ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return null;
+    }
+    case HostPortal:
+      popHostContainer(workInProgress);
+      updateHostContainer(current, workInProgress);
+      if (current === null) {
+        preparePortalMount(workInProgress.stateNode.containerInfo);
+      }
+      workInProgress.flags |= PortalStatic;
+      bubbleProperties(workInProgress);
+      return null;
+    case ContextProvider:
+      // Pop provider fiber
+      const context: ReactContext<any> = workInProgress.type;
+      popProvider(context, workInProgress);
+      bubbleProperties(workInProgress);
+      return null;
+    case IncompleteClassComponent: {
+      if (disableLegacyMode) {
+        break;
+      }
+      // 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.
+      const Component = workInProgress.type;
+      if (isLegacyContextProvider(Component)) {
+        popLegacyContext(workInProgress);
+      }
+      bubbleProperties(workInProgress);
+      return null;
+    }
+    case SuspenseListComponent: {
+      popSuspenseListContext(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.
+        bubbleProperties(workInProgress);
+        return null;
+      }
+
+      let didSuspendAlready = (workInProgress.flags & DidCapture) !== NoFlags;
+
+      const 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.
+          const cannotBeSuspended =
+            renderHasNotSuspendedYet() &&
+            (current === null || (current.flags & DidCapture) === NoFlags);
+          if (!cannotBeSuspended) {
+            let row = workInProgress.child;
+            while (row !== null) {
+              const suspended = findFirstSuspended(row);
+              if (suspended !== null) {
+                didSuspendAlready = true;
+                workInProgress.flags |= 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 thenables. Instead, we'll transfer its thenables 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.
+                const retryQueue: RetryQueue | null =
+                  (suspended.updateQueue: any);
+                workInProgress.updateQueue = retryQueue;
+                scheduleRetryEffect(workInProgress, retryQueue);
+
+                // Rerender the whole list, but this time, we'll force fallbacks
+                // to stay in place.
+                // Reset the effect flags before doing the second pass since that's now invalid.
+                // Reset the child fibers to their original state.
+                workInProgress.subtreeFlags = NoFlags;
+                resetChildFibers(workInProgress, renderLanes);
+
+                // Set up the Suspense List Context to force suspense and
+                // immediately rerender the children.
+                pushSuspenseListContext(
+                  workInProgress,
+                  setShallowSuspenseListContext(
+                    suspenseStackCursor.current,
+                    ForceSuspenseFallback,
+                  ),
+                );
+                if (getIsHydrating()) {
+                  // Re-apply tree fork since we popped the tree fork context in the beginning of this function.
+                  pushTreeFork(workInProgress, renderState.treeForkCount);
+                }
+                // Don't bubble properties in this case.
+                return workInProgress.child;
+              }
+              row = row.sibling;
+            }
+          }
+
+          if (renderState.tail !== null && now() > getRenderTargetTime()) {
+            // We have already passed our CPU deadline but we still have rows
+            // left in the tail. We'll just give up further attempts to render
+            // the main content and only render fallbacks.
+            workInProgress.flags |= 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. While in terms
+            // of priority this work has the same priority as this current render,
+            // it's not part of the same transition once the transition has
+            // committed. If it's sync, we still want to yield so that it can be
+            // painted. Conceptually, this is really the same as pinging.
+            // We can use any RetryLane even if it's the one currently rendering
+            // since we're leaving it behind on this node.
+            workInProgress.lanes = SomeRetryLane;
+          }
+        } else {
+          cutOffTailIfNeeded(renderState, false);
+        }
+        // Next we're going to render the tail.
+      } else {
+        // Append the rendered row to the child list.
+        if (!didSuspendAlready) {
+          const suspended = findFirstSuspended(renderedTail);
+          if (suspended !== null) {
+            workInProgress.flags |= 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.
+            const retryQueue: RetryQueue | null = (suspended.updateQueue: any);
+            workInProgress.updateQueue = retryQueue;
+            scheduleRetryEffect(workInProgress, retryQueue);
+
+            cutOffTailIfNeeded(renderState, true);
+            // This might have been modified.
+            if (
+              renderState.tail === null &&
+              renderState.tailMode !== 'collapsed' &&
+              renderState.tailMode !== 'visible' &&
+              !renderedTail.alternate &&
+              !getIsHydrating() // We don't cut it if we're hydrating.
+            ) {
+              // We're done.
+              bubbleProperties(workInProgress);
+              return null;
+            }
+          } else if (
+            // The time it took to render last row is greater than the remaining
+            // time we have to render. So rendering one more row would likely
+            // exceed it.
+            now() * 2 - renderState.renderingStartTime >
+              getRenderTargetTime() &&
+            renderLanes !== OffscreenLane
+          ) {
+            // 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.flags |= 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. While in terms
+            // of priority this work has the same priority as this current render,
+            // it's not part of the same transition once the transition has
+            // committed. If it's sync, we still want to yield so that it can be
+            // painted. Conceptually, this is really the same as pinging.
+            // We can use any RetryLane even if it's the one currently rendering
+            // since we're leaving it behind on this node.
+            workInProgress.lanes = SomeRetryLane;
+          }
+        }
+        if (renderState.isBackwards) {
+          // Append to the beginning of the list.
+          renderedTail.sibling = workInProgress.child;
+          workInProgress.child = renderedTail;
+        } else {
+          const 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.
+        // Pop a row.
+        // TODO: Consider storing the first of the new mount tail in the state so
+        // that we don't have to recompute this for every row in the list.
+        const next = renderState.tail;
+        const onlyNewMounts = isOnlyNewMounts(next);
+        renderState.rendering = next;
+        renderState.tail = next.sibling;
+        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 = setShallowSuspenseListContext(
+            suspenseContext,
+            ForceSuspenseFallback,
+          );
+        } else {
+          suspenseContext =
+            setDefaultShallowSuspenseListContext(suspenseContext);
+        }
+        if (
+          renderState.tailMode === 'visible' ||
+          renderState.tailMode === 'collapsed' ||
+          !onlyNewMounts ||
+          // TODO: While hydrating, we still let it suspend the parent. Tail mode hidden has broken
+          // hydration anyway right now but this preserves the previous semantics out of caution.
+          // Once proper hydration is implemented, this special case should be removed as it should
+          // never be needed.
+          getIsHydrating()
+        ) {
+          pushSuspenseListContext(workInProgress, suspenseContext);
+        } else {
+          // If we are rendering in 'hidden' (default) tail mode, then we if we suspend in the
+          // tail itself, we can delete it rather than suspend the parent. So we act as a catch in that
+          // case. For 'collapsed' we need to render at least one in suspended state, after which we'll
+          // have cut off the rest to never attempt it so it never hits this case.
+          // If this is an updated node, we cannot delete it from the tail so it's effectively visible.
+          // As a consequence, if it resuspends it actually suspends the parent by taking the other path.
+          pushSuspenseListCatch(workInProgress, suspenseContext);
+        }
+        // Do a pass over the next row.
+        if (getIsHydrating()) {
+          // Re-apply tree fork since we popped the tree fork context in the beginning of this function.
+          pushTreeFork(workInProgress, renderState.treeForkCount);
+        }
+        // Don't bubble properties in this case.
+        return next;
+      }
+      bubbleProperties(workInProgress);
+      return null;
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        if (current === null) {
+          const scopeInstance: ReactScopeInstance = createScopeInstance();
+          workInProgress.stateNode = scopeInstance;
+          prepareScopeUpdate(scopeInstance, workInProgress);
+          if (workInProgress.ref !== null) {
+            // Scope components always do work in the commit phase if there's a
+            // ref attached.
+            markUpdate(workInProgress);
+          }
+        } else {
+          if (workInProgress.ref !== null) {
+            // Scope components always do work in the commit phase if there's a
+            // ref attached.
+            markUpdate(workInProgress);
+          }
+        }
+        bubbleProperties(workInProgress);
+        return null;
+      }
+      break;
+    }
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
+      popSuspenseHandler(workInProgress);
+      popHiddenContext(workInProgress);
+      const nextState: OffscreenState | null = workInProgress.memoizedState;
+      const nextIsHidden = nextState !== null;
+
+      // Schedule a Visibility effect if the visibility has changed
+      if (enableLegacyHidden && workInProgress.tag === LegacyHiddenComponent) {
+        // LegacyHidden doesn't do any hiding — it only pre-renders.
+      } else {
+        if (current !== null) {
+          const prevState: OffscreenState | null = current.memoizedState;
+          const prevIsHidden = prevState !== null;
+          if (prevIsHidden !== nextIsHidden) {
+            workInProgress.flags |= Visibility;
+          }
+        } else {
+          // On initial mount, we only need a Visibility effect if the tree
+          // is hidden.
+          if (nextIsHidden) {
+            workInProgress.flags |= Visibility;
+          }
+        }
+      }
+
+      if (
+        !nextIsHidden ||
+        (!disableLegacyMode &&
+          (workInProgress.mode & ConcurrentMode) === NoMode)
+      ) {
+        bubbleProperties(workInProgress);
+      } else {
+        // Don't bubble properties for hidden children unless we're rendering
+        // at offscreen priority.
+        if (
+          includesSomeLane(renderLanes, (OffscreenLane: Lane)) &&
+          // Also don't bubble if the tree suspended
+          (workInProgress.flags & DidCapture) === NoLanes
+        ) {
+          bubbleProperties(workInProgress);
+          // Check if there was an insertion or update in the hidden subtree.
+          // If so, we need to hide those nodes in the commit phase, so
+          // schedule a visibility effect.
+          if (
+            (!enableLegacyHidden ||
+              workInProgress.tag !== LegacyHiddenComponent) &&
+            workInProgress.subtreeFlags & (Placement | Update)
+          ) {
+            workInProgress.flags |= Visibility;
+          }
+        }
+      }
+
+      const offscreenQueue: OffscreenQueue | null =
+        (workInProgress.updateQueue: any);
+      if (offscreenQueue !== null) {
+        const retryQueue = offscreenQueue.retryQueue;
+        scheduleRetryEffect(workInProgress, retryQueue);
+      }
+
+      let previousCache: Cache | null = null;
+      if (
+        current !== null &&
+        current.memoizedState !== null &&
+        current.memoizedState.cachePool !== null
+      ) {
+        previousCache = current.memoizedState.cachePool.pool;
+      }
+      let cache: Cache | null = null;
+      if (
+        workInProgress.memoizedState !== null &&
+        workInProgress.memoizedState.cachePool !== null
+      ) {
+        cache = workInProgress.memoizedState.cachePool.pool;
+      }
+      if (cache !== previousCache) {
+        // Run passive effects to retain/release the cache.
+        workInProgress.flags |= Passive;
+      }
+
+      popTransition(workInProgress, current);
+
+      return null;
+    }
+    case CacheComponent: {
+      let previousCache: Cache | null = null;
+      if (current !== null) {
+        previousCache = current.memoizedState.cache;
+      }
+      const cache: Cache = workInProgress.memoizedState.cache;
+      if (cache !== previousCache) {
+        // Run passive effects to retain/release the cache.
+        workInProgress.flags |= Passive;
+      }
+      popCacheProvider(workInProgress, cache);
+      bubbleProperties(workInProgress);
+      return null;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(workInProgress);
+        }
+        bubbleProperties(workInProgress);
+      }
+      return null;
+    }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        // We're a component that might need an exit transition. This flag will
+        // bubble up to the parent tree to indicate that there's a child that
+        // might need an exit View Transition upon unmount.
+        workInProgress.flags |= ViewTransitionStatic;
+        bubbleProperties(workInProgress);
+      }
+      return null;
+    }
+    case Throw: {
+      if (!disableLegacyMode) {
+        // Only Legacy Mode completes an errored node.
+        return null;
+      }
+    }
+  }
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
+      'React. Please file an issue.',
+  );
+}
+
+export {completeWork};
diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js
new file mode 100644
index 00000000000..da804171da5
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberComponentStack.js
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {enableViewTransition} from 'shared/ReactFeatureFlags';
+import type {Fiber} from './ReactInternalTypes';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+import {
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  LazyComponent,
+  SuspenseComponent,
+  SuspenseListComponent,
+  FunctionComponent,
+  ForwardRef,
+  SimpleMemoComponent,
+  ClassComponent,
+  HostText,
+  ViewTransitionComponent,
+  ActivityComponent,
+} from './ReactWorkTags';
+import {
+  describeBuiltInComponentFrame,
+  describeFunctionComponentFrame,
+  describeClassComponentFrame,
+  describeDebugInfoFrame,
+} from 'shared/ReactComponentStackFrame';
+import {formatOwnerStack} from 'shared/ReactOwnerStackFrames';
+
+function describeFiber(fiber: Fiber, childFiber: null | Fiber): string {
+  switch (fiber.tag) {
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent:
+      return describeBuiltInComponentFrame(fiber.type);
+    case LazyComponent:
+      // TODO: When we support Thenables as component types we should rename this.
+      return describeBuiltInComponentFrame('Lazy');
+    case SuspenseComponent:
+      if (fiber.child !== childFiber && childFiber !== null) {
+        // If we came from the second Fiber then we're in the Suspense Fallback.
+        return describeBuiltInComponentFrame('Suspense Fallback');
+      }
+      return describeBuiltInComponentFrame('Suspense');
+    case SuspenseListComponent:
+      return describeBuiltInComponentFrame('SuspenseList');
+    case FunctionComponent:
+    case SimpleMemoComponent:
+      return describeFunctionComponentFrame(fiber.type);
+    case ForwardRef:
+      return describeFunctionComponentFrame(fiber.type.render);
+    case ClassComponent:
+      return describeClassComponentFrame(fiber.type);
+    case ActivityComponent:
+      return describeBuiltInComponentFrame('Activity');
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        return describeBuiltInComponentFrame('ViewTransition');
+      }
+    // Fallthrough
+    default:
+      return '';
+  }
+}
+
+export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
+  try {
+    let info = '';
+    let node: Fiber = workInProgress;
+    let previous: null | Fiber = null;
+    do {
+      info += describeFiber(node, previous);
+      if (__DEV__) {
+        // Add any Server Component stack frames in reverse order.
+        const debugInfo = node._debugInfo;
+        if (debugInfo) {
+          for (let i = debugInfo.length - 1; i >= 0; i--) {
+            const entry = debugInfo[i];
+            if (typeof entry.name === 'string') {
+              info += describeDebugInfoFrame(
+                entry.name,
+                entry.env,
+                entry.debugLocation,
+              );
+            }
+          }
+        }
+      }
+      previous = node;
+      // $FlowFixMe[incompatible-type] we bail out when we get a null
+      node = node.return;
+    } while (node);
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
+
+function describeFunctionComponentFrameWithoutLineNumber(fn: Function): string {
+  // We use this because we don't actually want to describe the line of the component
+  // but just the component name.
+  const name = fn ? fn.displayName || fn.name : '';
+  return name ? describeBuiltInComponentFrame(name) : '';
+}
+
+export function getOwnerStackByFiberInDev(workInProgress: Fiber): string {
+  if (!__DEV__) {
+    return '';
+  }
+  try {
+    let info = '';
+
+    if (workInProgress.tag === HostText) {
+      // Text nodes never have an owner/stack because they're not created through JSX.
+      // We use the parent since text nodes are always created through a host parent.
+      workInProgress = (workInProgress.return: any);
+    }
+
+    // The owner stack of the current fiber will be where it was created, i.e. inside its owner.
+    // There's no actual name of the currently executing component. Instead, that is available
+    // on the regular stack that's currently executing. However, for built-ins there is no such
+    // named stack frame and it would be ignored as being internal anyway. Therefore we add
+    // add one extra frame just to describe the "current" built-in component by name.
+    // Similarly, if there is no owner at all, then there's no stack frame so we add the name
+    // of the root component to the stack to know which component is currently executing.
+    switch (workInProgress.tag) {
+      case HostHoistable:
+      case HostSingleton:
+      case HostComponent:
+        info += describeBuiltInComponentFrame(workInProgress.type);
+        break;
+      case SuspenseComponent:
+        info += describeBuiltInComponentFrame('Suspense');
+        break;
+      case SuspenseListComponent:
+        info += describeBuiltInComponentFrame('SuspenseList');
+        break;
+      case ActivityComponent:
+        info += describeBuiltInComponentFrame('Activity');
+        break;
+      case ViewTransitionComponent:
+        if (enableViewTransition) {
+          info += describeBuiltInComponentFrame('ViewTransition');
+          break;
+        }
+      // Fallthrough
+      case FunctionComponent:
+      case SimpleMemoComponent:
+      case ClassComponent:
+        if (!workInProgress._debugOwner && info === '') {
+          // Only if we have no other data about the callsite do we add
+          // the component name as the single stack frame.
+          info += describeFunctionComponentFrameWithoutLineNumber(
+            workInProgress.type,
+          );
+        }
+        break;
+      case ForwardRef:
+        if (!workInProgress._debugOwner && info === '') {
+          info += describeFunctionComponentFrameWithoutLineNumber(
+            workInProgress.type.render,
+          );
+        }
+        break;
+    }
+
+    let owner: void | null | Fiber | ReactComponentInfo = workInProgress;
+
+    while (owner) {
+      if (typeof owner.tag === 'number') {
+        const fiber: Fiber = (owner: any);
+        owner = fiber._debugOwner;
+        const debugStack = fiber._debugStack;
+        // If we don't actually print the stack if there is no owner of this JSX element.
+        // In a real app it's typically not useful since the root app is always controlled
+        // by the framework. These also tend to have noisy stacks because they're not rooted
+        // in a React render but in some imperative bootstrapping code. It could be useful
+        // if the element was created in module scope. E.g. hoisted. We could add a a single
+        // stack frame for context for example but it doesn't say much if that's a wrapper.
+        if (owner && debugStack) {
+          const formattedStack = formatOwnerStack(debugStack);
+          if (formattedStack !== '') {
+            info += '\n' + formattedStack;
+          }
+        }
+      } else if (owner.debugStack != null) {
+        // Server Component
+        const ownerStack: Error = owner.debugStack;
+        owner = owner.owner;
+        if (owner && ownerStack) {
+          // TODO: Should we stash this somewhere for caching purposes?
+          info += '\n' + formatOwnerStack(ownerStack);
+        }
+      } else {
+        break;
+      }
+    }
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.js
new file mode 100644
index 00000000000..05aeb3cfbb3
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from './ReactInternalTypes';
+import type {
+  UpdateQueue as HookQueue,
+  Update as HookUpdate,
+} from './ReactFiberHooks';
+import type {
+  SharedQueue as ClassQueue,
+  Update as ClassUpdate,
+} from './ReactFiberClassUpdateQueue';
+import type {Lane, Lanes} from './ReactFiberLane';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+
+import {
+  warnAboutUpdateOnNotYetMountedFiberInDEV,
+  throwIfInfiniteUpdateLoopDetected,
+  getWorkInProgressRoot,
+} from './ReactFiberWorkLoop';
+import {NoLane, NoLanes, mergeLanes, markHiddenUpdate} from './ReactFiberLane';
+import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
+import {HostRoot, OffscreenComponent} from './ReactWorkTags';
+import {OffscreenVisible} from './ReactFiberOffscreenComponent';
+
+export type ConcurrentUpdate = {
+  next: ConcurrentUpdate,
+  lane: Lane,
+};
+
+type ConcurrentQueue = {
+  pending: ConcurrentUpdate | null,
+};
+
+// If a render is in progress, and we receive an update from a concurrent event,
+// we wait until the current render is over (either finished or interrupted)
+// before adding it to the fiber/hook queue. Push to this array so we can
+// access the queue, fiber, update, et al later.
+const concurrentQueues: Array<any> = [];
+let concurrentQueuesIndex = 0;
+
+let concurrentlyUpdatedLanes: Lanes = NoLanes;
+
+export function finishQueueingConcurrentUpdates(): void {
+  const endIndex = concurrentQueuesIndex;
+  concurrentQueuesIndex = 0;
+
+  concurrentlyUpdatedLanes = NoLanes;
+
+  let i = 0;
+  while (i < endIndex) {
+    const fiber: Fiber = concurrentQueues[i];
+    concurrentQueues[i++] = null;
+    const queue: ConcurrentQueue = concurrentQueues[i];
+    concurrentQueues[i++] = null;
+    const update: ConcurrentUpdate = concurrentQueues[i];
+    concurrentQueues[i++] = null;
+    const lane: Lane = concurrentQueues[i];
+    concurrentQueues[i++] = null;
+
+    if (queue !== null && update !== null) {
+      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;
+    }
+
+    if (lane !== NoLane) {
+      markUpdateLaneFromFiberToRoot(fiber, update, lane);
+    }
+  }
+}
+
+export function getConcurrentlyUpdatedLanes(): Lanes {
+  return concurrentlyUpdatedLanes;
+}
+
+function enqueueUpdate(
+  fiber: Fiber,
+  queue: ConcurrentQueue | null,
+  update: ConcurrentUpdate | null,
+  lane: Lane,
+) {
+  // Don't update the `childLanes` on the return path yet. If we already in
+  // the middle of rendering, wait until after it has completed.
+  concurrentQueues[concurrentQueuesIndex++] = fiber;
+  concurrentQueues[concurrentQueuesIndex++] = queue;
+  concurrentQueues[concurrentQueuesIndex++] = update;
+  concurrentQueues[concurrentQueuesIndex++] = lane;
+
+  concurrentlyUpdatedLanes = mergeLanes(concurrentlyUpdatedLanes, lane);
+
+  // The fiber's `lane` field is used in some places to check if any work is
+  // scheduled, to perform an eager bailout, so we need to update it immediately.
+  // TODO: We should probably move this to the "shared" queue instead.
+  fiber.lanes = mergeLanes(fiber.lanes, lane);
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    alternate.lanes = mergeLanes(alternate.lanes, lane);
+  }
+}
+
+export function enqueueConcurrentHookUpdate<S, A>(
+  fiber: Fiber,
+  queue: HookQueue<S, A>,
+  update: HookUpdate<S, A>,
+  lane: Lane,
+): FiberRoot | null {
+  const concurrentQueue: ConcurrentQueue = (queue: any);
+  const concurrentUpdate: ConcurrentUpdate = (update: any);
+  enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);
+  return getRootForUpdatedFiber(fiber);
+}
+
+export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(
+  fiber: Fiber,
+  queue: HookQueue<S, A>,
+  update: HookUpdate<S, A>,
+): void {
+  // This function is used to queue an update that doesn't need a rerender. The
+  // only reason we queue it is in case there's a subsequent higher priority
+  // update that causes it to be rebased.
+  const lane = NoLane;
+  const concurrentQueue: ConcurrentQueue = (queue: any);
+  const concurrentUpdate: ConcurrentUpdate = (update: any);
+  enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);
+
+  // Usually we can rely on the upcoming render phase to process the concurrent
+  // queue. However, since this is a bail out, we're not scheduling any work
+  // here. So the update we just queued will leak until something else happens
+  // to schedule work (if ever).
+  //
+  // Check if we're currently in the middle of rendering a tree, and if not,
+  // process the queue immediately to prevent a leak.
+  const isConcurrentlyRendering = getWorkInProgressRoot() !== null;
+  if (!isConcurrentlyRendering) {
+    finishQueueingConcurrentUpdates();
+  }
+}
+
+export function enqueueConcurrentClassUpdate<State>(
+  fiber: Fiber,
+  queue: ClassQueue<State>,
+  update: ClassUpdate<State>,
+  lane: Lane,
+): FiberRoot | null {
+  const concurrentQueue: ConcurrentQueue = (queue: any);
+  const concurrentUpdate: ConcurrentUpdate = (update: any);
+  enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);
+  return getRootForUpdatedFiber(fiber);
+}
+
+export function enqueueConcurrentRenderForLane(
+  fiber: Fiber,
+  lane: Lane,
+): FiberRoot | null {
+  enqueueUpdate(fiber, null, null, lane);
+  return getRootForUpdatedFiber(fiber);
+}
+
+// Calling this function outside this module should only be done for backwards
+// compatibility and should always be accompanied by a warning.
+export function unsafe_markUpdateLaneFromFiberToRoot(
+  sourceFiber: Fiber,
+  lane: Lane,
+): FiberRoot | null {
+  // NOTE: For Hyrum's Law reasons, if an infinite update loop is detected, it
+  // should throw before `markUpdateLaneFromFiberToRoot` is called. But this is
+  // undefined behavior and we can change it if we need to; it just so happens
+  // that, at the time of this writing, there's an internal product test that
+  // happens to rely on this.
+  const root = getRootForUpdatedFiber(sourceFiber);
+  markUpdateLaneFromFiberToRoot(sourceFiber, null, lane);
+  return root;
+}
+
+function markUpdateLaneFromFiberToRoot(
+  sourceFiber: Fiber,
+  update: ConcurrentUpdate | null,
+  lane: Lane,
+): null | FiberRoot {
+  // Update the source fiber's lanes
+  sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
+  let alternate = sourceFiber.alternate;
+  if (alternate !== null) {
+    alternate.lanes = mergeLanes(alternate.lanes, lane);
+  }
+  // Walk the parent path to the root and update the child lanes.
+  let isHidden = false;
+  let parent = sourceFiber.return;
+  let node = sourceFiber;
+  while (parent !== null) {
+    parent.childLanes = mergeLanes(parent.childLanes, lane);
+    alternate = parent.alternate;
+    if (alternate !== null) {
+      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
+    }
+
+    if (parent.tag === OffscreenComponent) {
+      // Check if this offscreen boundary is currently hidden.
+      //
+      // The instance may be null if the Offscreen parent was unmounted. Usually
+      // the parent wouldn't be reachable in that case because we disconnect
+      // fibers from the tree when they are deleted. However, there's a weird
+      // edge case where setState is called on a fiber that was interrupted
+      // before it ever mounted. Because it never mounts, it also never gets
+      // deleted. Because it never gets deleted, its return pointer never gets
+      // disconnected. Which means it may be attached to a deleted Offscreen
+      // parent node. (This discovery suggests it may be better for memory usage
+      // if we don't attach the `return` pointer until the commit phase, though
+      // in order to do that we'd need some other way to track the return
+      // pointer during the initial render, like on the stack.)
+      //
+      // This case is always accompanied by a warning, but we still need to
+      // account for it. (There may be other cases that we haven't discovered,
+      // too.)
+      const offscreenInstance: OffscreenInstance | null = parent.stateNode;
+      if (
+        offscreenInstance !== null &&
+        !(offscreenInstance._visibility & OffscreenVisible)
+      ) {
+        isHidden = true;
+      }
+    }
+
+    node = parent;
+    parent = parent.return;
+  }
+
+  if (node.tag === HostRoot) {
+    const root: FiberRoot = node.stateNode;
+    if (isHidden && update !== null) {
+      markHiddenUpdate(root, update, lane);
+    }
+    return root;
+  }
+  return null;
+}
+
+function getRootForUpdatedFiber(sourceFiber: Fiber): FiberRoot | null {
+  // TODO: We will detect and infinite update loop and throw even if this fiber
+  // has already unmounted. This isn't really necessary but it happens to be the
+  // current behavior we've used for several release cycles. Consider not
+  // performing this check if the updated fiber already unmounted, since it's
+  // not possible for that to cause an infinite update loop.
+  throwIfInfiniteUpdateLoopDetected();
+
+  // When a setState happens, we must ensure the root is scheduled. Because
+  // update queues do not have a backpointer to the root, the only way to do
+  // this currently is to walk up the return path. This used to not be a big
+  // deal because we would have to walk up the return path to set
+  // the `childLanes`, anyway, but now those two traversals happen at
+  // different times.
+  // TODO: Consider adding a `root` backpointer on the update queue.
+  detectUpdateOnUnmountedFiber(sourceFiber, sourceFiber);
+  let node = sourceFiber;
+  let parent = node.return;
+  while (parent !== null) {
+    detectUpdateOnUnmountedFiber(sourceFiber, node);
+    node = parent;
+    parent = node.return;
+  }
+  return node.tag === HostRoot ? (node.stateNode: FiberRoot) : null;
+}
+
+function detectUpdateOnUnmountedFiber(sourceFiber: Fiber, parent: Fiber) {
+  if (__DEV__) {
+    const alternate = parent.alternate;
+    if (
+      alternate === null &&
+      (parent.flags & (Placement | Hydrating)) !== NoFlags
+    ) {
+      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberConfig.js b/packages/react-reconciler/src/ReactFiberConfig.js
new file mode 100644
index 00000000000..4d6251b12a5
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfig.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/prod-error-codes */
+
+// 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.
+
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js
new file mode 100644
index 00000000000..2d472cf2bf5
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support hydration
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support hydration. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// Hydration (when unsupported)
+export type ActivityInstance = mixed;
+export type SuspenseInstance = mixed;
+export const supportsHydration = false;
+export const isSuspenseInstancePending = shim;
+export const isSuspenseInstanceFallback = shim;
+export const getSuspenseInstanceFallbackErrorDetails = shim;
+export const registerSuspenseInstanceRetry = shim;
+export const canHydrateFormStateMarker = shim;
+export const isFormStateMarkerMatching = shim;
+export const getNextHydratableSibling = shim;
+export const getNextHydratableSiblingAfterSingleton = shim;
+export const getFirstHydratableChild = shim;
+export const getFirstHydratableChildWithinContainer = shim;
+export const getFirstHydratableChildWithinActivityInstance = shim;
+export const getFirstHydratableChildWithinSuspenseInstance = shim;
+export const getFirstHydratableChildWithinSingleton = shim;
+export const canHydrateInstance = shim;
+export const canHydrateTextInstance = shim;
+export const canHydrateActivityInstance = shim;
+export const canHydrateSuspenseInstance = shim;
+export const hydrateInstance = shim;
+export const hydrateTextInstance = shim;
+export const hydrateActivityInstance = shim;
+export const hydrateSuspenseInstance = shim;
+export const getNextHydratableInstanceAfterActivityInstance = shim;
+export const getNextHydratableInstanceAfterSuspenseInstance = shim;
+export const finalizeHydratedChildren = shim;
+export const commitHydratedInstance = shim;
+export const commitHydratedContainer = shim;
+export const commitHydratedActivityInstance = shim;
+export const commitHydratedSuspenseInstance = shim;
+export const flushHydrationEvents = shim;
+export const clearActivityBoundary = shim;
+export const clearSuspenseBoundary = shim;
+export const clearActivityBoundaryFromContainer = shim;
+export const clearSuspenseBoundaryFromContainer = shim;
+export const hideDehydratedBoundary = shim;
+export const unhideDehydratedBoundary = shim;
+export const shouldDeleteUnhydratedTailInstances = shim;
+export const diffHydratedPropsForDevWarnings = shim;
+export const diffHydratedTextForDevWarnings = shim;
+export const describeHydratableInstanceForDevWarnings = shim;
+export const validateHydratableInstance = shim;
+export const validateHydratableTextInstance = shim;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoMicrotasks.js b/packages/react-reconciler/src/ReactFiberConfigWithNoMicrotasks.js
new file mode 100644
index 00000000000..b2668b1d611
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoMicrotasks.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support microtasks
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support microtasks. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// Test selectors (when unsupported)
+export const supportsMicrotasks = false;
+export const scheduleMicrotask = shim;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js b/packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
new file mode 100644
index 00000000000..79cf3990a72
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support mutation
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support mutation. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// Mutation (when unsupported)
+export const supportsMutation = false;
+export const cloneMutableInstance = shim;
+export const cloneMutableTextInstance = shim;
+export const appendChild = shim;
+export const appendChildToContainer = shim;
+export const commitTextUpdate = shim;
+export const commitMount = shim;
+export const commitUpdate = shim;
+export const insertBefore = shim;
+export const insertInContainerBefore = shim;
+export const removeChild = shim;
+export const removeChildFromContainer = shim;
+export const resetTextContent = shim;
+export const hideInstance = shim;
+export const hideTextInstance = shim;
+export const unhideInstance = shim;
+export const unhideTextInstance = shim;
+export const clearContainer = shim;
+export const applyViewTransitionName = shim;
+export const restoreViewTransitionName = shim;
+export const cancelViewTransitionName = shim;
+export const cancelRootViewTransitionName = shim;
+export const restoreRootViewTransitionName = shim;
+export const cloneRootViewTransitionContainer = shim;
+export const removeRootViewTransitionClone = shim;
+export type InstanceMeasurement = null;
+export const measureInstance = shim;
+export const measureClonedInstance = shim;
+export const wasInstanceInViewport = shim;
+export const hasInstanceChanged = shim;
+export const hasInstanceAffectedParent = shim;
+export const startViewTransition = shim;
+export type RunningViewTransition = null;
+export const startGestureTransition = shim;
+export const stopViewTransition = shim;
+export const addViewTransitionFinishedListener = shim;
+export type ViewTransitionInstance = null | {name: string, ...};
+export const createViewTransitionInstance = shim;
+export type GestureTimeline = any;
+export const getCurrentGestureOffset = shim;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberConfigWithNoPersistence.js
new file mode 100644
index 00000000000..052543a79e7
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoPersistence.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support persistence
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support persistence. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// Persistence (when unsupported)
+export const supportsPersistence = false;
+export const cloneInstance = 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;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoResources.js b/packages/react-reconciler/src/ReactFiberConfigWithNoResources.js
new file mode 100644
index 00000000000..0ab629a20ee
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoResources.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support hydration
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support Resources. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+export type HoistableRoot = mixed;
+export type Resource = mixed;
+
+// Resources (when unsupported)
+export const supportsResources = false;
+export const isHostHoistableType = shim;
+export const getHoistableRoot = shim;
+export const getResource = shim;
+export const acquireResource = shim;
+export const releaseResource = shim;
+export const hydrateHoistable = shim;
+export const mountHoistable = shim;
+export const unmountHoistable = shim;
+export const createHoistableInstance = shim;
+export const prepareToCommitHoistables = shim;
+export const mayResourceSuspendCommit = shim;
+export const preloadResource = shim;
+export const suspendResource = shim;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoScopes.js b/packages/react-reconciler/src/ReactFiberConfigWithNoScopes.js
new file mode 100644
index 00000000000..3c1d8673542
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoScopes.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support React Scopes
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support React Scopes. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// React Scopes (when unsupported)
+export const prepareScopeUpdate = shim;
+export const getInstanceFromScope = shim;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoSingletons.js b/packages/react-reconciler/src/ReactFiberConfigWithNoSingletons.js
new file mode 100644
index 00000000000..92d2fadd39b
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoSingletons.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support mutation
+// can re-export everything from this module.
+
+function shim(...args: any): any {
+  throw new Error(
+    'The current renderer does not support Singletons. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// Resources (when unsupported)
+export const supportsSingletons = false;
+export const resolveSingletonInstance = shim;
+export const acquireSingletonInstance = shim;
+export const releaseSingletonInstance = shim;
+export const isHostSingletonType = shim;
+export const isSingletonScope = shim;
diff --git a/packages/react-reconciler/src/ReactFiberConfigWithNoTestSelectors.js b/packages/react-reconciler/src/ReactFiberConfigWithNoTestSelectors.js
new file mode 100644
index 00000000000..0c261350971
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConfigWithNoTestSelectors.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Renderers that don't support test selectors
+// can re-export everything from this module.
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support test selectors. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+// Test selectors (when unsupported)
+export const supportsTestSelectors = false;
+export const findFiberRoot = shim;
+export const getBoundingRect = shim;
+export const getTextContent = shim;
+export const isHiddenSubtree = shim;
+export const matchAccessibilityRole = shim;
+export const setFocusIfFocusable = shim;
+export const setupIntersectionObserver = shim;
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.js
new file mode 100644
index 00000000000..975c97d1b65
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.js
@@ -0,0 +1,495 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Lane, Lanes} from './ReactFiberLane';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
+import type {EventPriority} from './ReactEventPriorities';
+// import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// TODO: This import doesn't work because the DevTools depend on the DOM version of React
+// and to properly type check against DOM React we can't also type check again non-DOM
+// React which this hook might be in.
+type DevToolsProfilingHooks = any;
+
+import {DidCapture} from './ReactFiberFlags';
+import {
+  enableProfilerTimer,
+  enableSchedulingProfiler,
+} from 'shared/ReactFeatureFlags';
+import {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+} from './ReactEventPriorities';
+import {
+  ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
+  log,
+  unstable_setDisableYieldValue,
+} from './Scheduler';
+
+declare const __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
+
+let rendererID = null;
+let injectedHook = null;
+let injectedProfilingHooks: DevToolsProfilingHooks | null = null;
+let hasLoggedError = false;
+
+export const isDevToolsPresent =
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
+
+export function injectInternals(internals: Object): boolean {
+  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+    // No DevTools
+    return false;
+  }
+  const hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook.isDisabled) {
+    // This isn't a real property on the hook, but it can be set to opt out
+    // of DevTools integration and associated warnings and logs.
+    // https://github.com/facebook/react/issues/3877
+    return true;
+  }
+  if (!hook.supportsFiber) {
+    if (__DEV__) {
+      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://react.dev/link/react-devtools',
+      );
+    }
+    // DevTools exists, even though it doesn't support Fiber.
+    return true;
+  }
+  try {
+    rendererID = hook.inject(internals);
+
+    // We have successfully injected, so now it is safe to set up hooks.
+    injectedHook = hook;
+  } catch (err) {
+    // Catch all errors because it is unsafe to throw during initialization.
+    if (__DEV__) {
+      console.error('React instrumentation encountered an error: %o.', err);
+    }
+  }
+  if (hook.checkDCE) {
+    // This is the real DevTools.
+    return true;
+  } else {
+    // This is likely a hook installed by Fast Refresh runtime.
+    return false;
+  }
+}
+
+export function onScheduleRoot(root: FiberRoot, children: ReactNodeList) {
+  if (__DEV__) {
+    if (
+      injectedHook &&
+      typeof injectedHook.onScheduleFiberRoot === 'function'
+    ) {
+      try {
+        injectedHook.onScheduleFiberRoot(rendererID, root, children);
+      } catch (err) {
+        if (__DEV__ && !hasLoggedError) {
+          hasLoggedError = true;
+          console.error('React instrumentation encountered an error: %o', err);
+        }
+      }
+    }
+  }
+}
+
+export function onCommitRoot(root: FiberRoot, eventPriority: EventPriority) {
+  if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
+    try {
+      const didError = (root.current.flags & DidCapture) === DidCapture;
+      if (enableProfilerTimer) {
+        let schedulerPriority;
+        switch (eventPriority) {
+          case DiscreteEventPriority:
+            schedulerPriority = ImmediateSchedulerPriority;
+            break;
+          case ContinuousEventPriority:
+            schedulerPriority = UserBlockingSchedulerPriority;
+            break;
+          case DefaultEventPriority:
+            schedulerPriority = NormalSchedulerPriority;
+            break;
+          case IdleEventPriority:
+            schedulerPriority = IdleSchedulerPriority;
+            break;
+          default:
+            schedulerPriority = NormalSchedulerPriority;
+            break;
+        }
+        injectedHook.onCommitFiberRoot(
+          rendererID,
+          root,
+          schedulerPriority,
+          didError,
+        );
+      } else {
+        injectedHook.onCommitFiberRoot(rendererID, root, undefined, didError);
+      }
+    } catch (err) {
+      if (__DEV__) {
+        if (!hasLoggedError) {
+          hasLoggedError = true;
+          console.error('React instrumentation encountered an error: %o', err);
+        }
+      }
+    }
+  }
+}
+
+export function onPostCommitRoot(root: FiberRoot) {
+  if (
+    injectedHook &&
+    typeof injectedHook.onPostCommitFiberRoot === 'function'
+  ) {
+    try {
+      injectedHook.onPostCommitFiberRoot(rendererID, root);
+    } catch (err) {
+      if (__DEV__) {
+        if (!hasLoggedError) {
+          hasLoggedError = true;
+          console.error('React instrumentation encountered an error: %o', err);
+        }
+      }
+    }
+  }
+}
+
+export function onCommitUnmount(fiber: Fiber) {
+  if (injectedHook && typeof injectedHook.onCommitFiberUnmount === 'function') {
+    try {
+      injectedHook.onCommitFiberUnmount(rendererID, fiber);
+    } catch (err) {
+      if (__DEV__) {
+        if (!hasLoggedError) {
+          hasLoggedError = true;
+          console.error('React instrumentation encountered an error: %o', err);
+        }
+      }
+    }
+  }
+}
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  if (typeof log === 'function') {
+    // We're in a test because Scheduler.log only exists
+    // in SchedulerMock. To reduce the noise in strict mode tests,
+    // suppress warnings and disable scheduler yielding during the double render
+    unstable_setDisableYieldValue(newIsStrictMode);
+  }
+
+  if (injectedHook && typeof injectedHook.setStrictMode === 'function') {
+    try {
+      injectedHook.setStrictMode(rendererID, newIsStrictMode);
+    } catch (err) {
+      if (__DEV__) {
+        if (!hasLoggedError) {
+          hasLoggedError = true;
+          console.error('React instrumentation encountered an error: %o', err);
+        }
+      }
+    }
+  }
+}
+
+// Profiler API hooks
+
+export function injectProfilingHooks(
+  profilingHooks: DevToolsProfilingHooks,
+): void {
+  injectedProfilingHooks = profilingHooks;
+}
+
+export function markCommitStarted(lanes: Lanes): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markCommitStarted === 'function'
+    ) {
+      injectedProfilingHooks.markCommitStarted(lanes);
+    }
+  }
+}
+
+export function markCommitStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markCommitStopped === 'function'
+    ) {
+      injectedProfilingHooks.markCommitStopped();
+    }
+  }
+}
+
+export function markComponentRenderStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentRenderStarted === 'function'
+    ) {
+      injectedProfilingHooks.markComponentRenderStarted(fiber);
+    }
+  }
+}
+
+export function markComponentRenderStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentRenderStopped === 'function'
+    ) {
+      injectedProfilingHooks.markComponentRenderStopped();
+    }
+  }
+}
+
+export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectMountStarted ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectMountStarted(fiber);
+    }
+  }
+}
+
+export function markComponentPassiveEffectMountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectMountStopped ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectMountStopped();
+    }
+  }
+}
+
+export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectUnmountStarted ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectUnmountStarted(fiber);
+    }
+  }
+}
+
+export function markComponentPassiveEffectUnmountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectUnmountStopped ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectUnmountStopped();
+    }
+  }
+}
+
+export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectMountStarted ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectMountStarted(fiber);
+    }
+  }
+}
+
+export function markComponentLayoutEffectMountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectMountStopped ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectMountStopped();
+    }
+  }
+}
+
+export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectUnmountStarted ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectUnmountStarted(fiber);
+    }
+  }
+}
+
+export function markComponentLayoutEffectUnmountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectUnmountStopped ===
+        'function'
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectUnmountStopped();
+    }
+  }
+}
+
+export function markComponentErrored(
+  fiber: Fiber,
+  thrownValue: mixed,
+  lanes: Lanes,
+): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentErrored === 'function'
+    ) {
+      injectedProfilingHooks.markComponentErrored(fiber, thrownValue, lanes);
+    }
+  }
+}
+
+export function markComponentSuspended(
+  fiber: Fiber,
+  wakeable: Wakeable,
+  lanes: Lanes,
+): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentSuspended === 'function'
+    ) {
+      injectedProfilingHooks.markComponentSuspended(fiber, wakeable, lanes);
+    }
+  }
+}
+
+export function markLayoutEffectsStarted(lanes: Lanes): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markLayoutEffectsStarted === 'function'
+    ) {
+      injectedProfilingHooks.markLayoutEffectsStarted(lanes);
+    }
+  }
+}
+
+export function markLayoutEffectsStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markLayoutEffectsStopped === 'function'
+    ) {
+      injectedProfilingHooks.markLayoutEffectsStopped();
+    }
+  }
+}
+
+export function markPassiveEffectsStarted(lanes: Lanes): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markPassiveEffectsStarted === 'function'
+    ) {
+      injectedProfilingHooks.markPassiveEffectsStarted(lanes);
+    }
+  }
+}
+
+export function markPassiveEffectsStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markPassiveEffectsStopped === 'function'
+    ) {
+      injectedProfilingHooks.markPassiveEffectsStopped();
+    }
+  }
+}
+
+export function markRenderStarted(lanes: Lanes): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderStarted === 'function'
+    ) {
+      injectedProfilingHooks.markRenderStarted(lanes);
+    }
+  }
+}
+
+export function markRenderYielded(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderYielded === 'function'
+    ) {
+      injectedProfilingHooks.markRenderYielded();
+    }
+  }
+}
+
+export function markRenderStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderStopped === 'function'
+    ) {
+      injectedProfilingHooks.markRenderStopped();
+    }
+  }
+}
+
+export function markRenderScheduled(lane: Lane): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderScheduled === 'function'
+    ) {
+      injectedProfilingHooks.markRenderScheduled(lane);
+    }
+  }
+}
+
+export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markForceUpdateScheduled === 'function'
+    ) {
+      injectedProfilingHooks.markForceUpdateScheduled(fiber, lane);
+    }
+  }
+}
+
+export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
+  if (enableSchedulingProfiler) {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markStateUpdateScheduled === 'function'
+    ) {
+      injectedProfilingHooks.markStateUpdateScheduled(fiber, lane);
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberDuplicateViewTransitions.js b/packages/react-reconciler/src/ReactFiberDuplicateViewTransitions.js
new file mode 100644
index 00000000000..aa8a6eceed6
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberDuplicateViewTransitions.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {ViewTransitionProps} from 'shared/ReactTypes';
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+
+// Use in DEV to track mounted named ViewTransitions. This is used to warn for
+// duplicate names. This should technically be tracked per Document because you could
+// have two different documents that can have separate namespaces, but to keep things
+// simple we just use a global Map. Technically it should also include any manually
+// assigned view-transition-name outside React too.
+const mountedNamedViewTransitions: Map<string, Fiber> = __DEV__
+  ? new Map()
+  : (null: any);
+const didWarnAboutName: {[string]: boolean} = __DEV__ ? {} : (null: any);
+
+export function trackNamedViewTransition(fiber: Fiber): void {
+  if (__DEV__) {
+    const name = (fiber.memoizedProps: ViewTransitionProps).name;
+    if (name != null && name !== 'auto') {
+      const existing = mountedNamedViewTransitions.get(name);
+      if (existing !== undefined) {
+        if (existing !== fiber && existing !== fiber.alternate) {
+          if (!didWarnAboutName[name]) {
+            didWarnAboutName[name] = true;
+            const stringifiedName = JSON.stringify(name);
+            runWithFiberInDEV(fiber, () => {
+              console.error(
+                'There are two <ViewTransition name=%s> components with the same name mounted ' +
+                  'at the same time. This is not supported and will cause View Transitions ' +
+                  'to error. Try to use a more unique name e.g. by using a namespace prefix ' +
+                  'and adding the id of an item to the name.',
+                stringifiedName,
+              );
+            });
+            runWithFiberInDEV(existing, () => {
+              console.error(
+                'The existing <ViewTransition name=%s> duplicate has this stack trace.',
+                stringifiedName,
+              );
+            });
+          }
+        }
+      } else {
+        mountedNamedViewTransitions.set(name, fiber);
+      }
+    }
+  }
+}
+
+export function untrackNamedViewTransition(fiber: Fiber): void {
+  if (__DEV__) {
+    const name = (fiber.memoizedProps: ViewTransitionProps).name;
+    if (name != null && name !== 'auto') {
+      const existing = mountedNamedViewTransitions.get(name);
+      if (
+        existing !== undefined &&
+        (existing === fiber || existing === fiber.alternate)
+      ) {
+        mountedNamedViewTransitions.delete(name);
+      }
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js
new file mode 100644
index 00000000000..e6111d8be74
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberErrorLogger.js
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from './ReactInternalTypes';
+import type {CapturedValue} from './ReactCapturedValue';
+
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+
+import {ClassComponent} from './ReactWorkTags';
+
+import reportGlobalError from 'shared/reportGlobalError';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+import {bindToConsole} from './ReactFiberConfig';
+
+// Side-channel since I'm not sure we want to make this part of the public API
+let componentName: null | string = null;
+let errorBoundaryName: null | string = null;
+
+export function defaultOnUncaughtError(
+  error: mixed,
+  errorInfo: {+componentStack?: ?string},
+): void {
+  // Overriding this can silence these warnings e.g. for tests.
+  // See https://github.com/facebook/react/pull/13384
+
+  // For uncaught root errors we report them as uncaught to the browser's
+  // onerror callback. This won't have component stacks and the error addendum.
+  // So we add those into a separate console.warn.
+  reportGlobalError(error);
+  if (__DEV__) {
+    const componentNameMessage = componentName
+      ? `An error occurred in the <${componentName}> component.`
+      : 'An error occurred in one of your React components.';
+
+    const errorBoundaryMessage =
+      'Consider adding an error boundary to your tree to customize error handling behavior.\n' +
+      'Visit https://react.dev/link/error-boundaries to learn more about error boundaries.';
+
+    try {
+      console.warn(
+        '%s\n\n%s\n',
+        componentNameMessage,
+        errorBoundaryMessage,
+        // We let our console.error wrapper add the component stack to the end.
+      );
+    } finally {
+      // ignore
+    }
+  }
+}
+
+export function defaultOnCaughtError(
+  error: mixed,
+  errorInfo: {
+    +componentStack?: ?string,
+    +errorBoundary?: ?component(...props: any),
+  },
+): void {
+  // Overriding this can silence these warnings e.g. for tests.
+  // See https://github.com/facebook/react/pull/13384
+
+  // Caught by error boundary
+  if (__DEV__) {
+    const componentNameMessage = componentName
+      ? `The above error occurred in the <${componentName}> component.`
+      : 'The above error occurred in one of your React components.';
+
+    // In development, we provide our own message which includes the component stack
+    // in addition to the error.
+    const recreateMessage =
+      `React will try to recreate this component tree from scratch ` +
+      `using the error boundary you provided, ${
+        errorBoundaryName || 'Anonymous'
+      }.`;
+
+    try {
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        typeof error.environmentName === 'string'
+      ) {
+        // This was a Server error. We print the environment name in a badge just like we do with
+        // replays of console logs to indicate that the source of this throw as actually the Server.
+        bindToConsole(
+          'error',
+          [
+            '%o\n\n%s\n\n%s\n',
+            error,
+            componentNameMessage,
+            recreateMessage,
+            // We let DevTools or console.createTask add the component stack to the end.
+          ],
+          error.environmentName,
+        )();
+      } else {
+        console.error(
+          '%o\n\n%s\n\n%s\n',
+          error,
+          componentNameMessage,
+          recreateMessage,
+          // We let our DevTools or console.createTask add the component stack to the end.
+        );
+      }
+    } finally {
+      // ignore
+    }
+  } 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); // Don't transform to our wrapper, however, React DevTools can still add a stack.
+  }
+}
+
+export function defaultOnRecoverableError(
+  error: mixed,
+  errorInfo: {+componentStack?: ?string},
+) {
+  reportGlobalError(error);
+}
+
+export function logUncaughtError(
+  root: FiberRoot,
+  errorInfo: CapturedValue<mixed>,
+): void {
+  try {
+    if (__DEV__) {
+      componentName = errorInfo.source
+        ? getComponentNameFromFiber(errorInfo.source)
+        : null;
+      errorBoundaryName = null;
+    }
+    const error = (errorInfo.value: any);
+    if (__DEV__ && ReactSharedInternals.actQueue !== null) {
+      // For uncaught errors inside act, we track them on the act and then
+      // rethrow them into the test.
+      ReactSharedInternals.thrownErrors.push(error);
+      return;
+    }
+    const onUncaughtError = root.onUncaughtError;
+    onUncaughtError(error, {
+      componentStack: errorInfo.stack,
+    });
+  } catch (e) {
+    // This method must not throw, or React internal state will get messed up.
+    // If console.error is overridden, or logCapturedError() shows a dialog that throws,
+    // we want to report this error outside of the normal stack as a last resort.
+    // https://github.com/facebook/react/issues/13188
+    setTimeout(() => {
+      throw e;
+    });
+  }
+}
+
+export function logCaughtError(
+  root: FiberRoot,
+  boundary: Fiber,
+  errorInfo: CapturedValue<mixed>,
+): void {
+  try {
+    if (__DEV__) {
+      componentName = errorInfo.source
+        ? getComponentNameFromFiber(errorInfo.source)
+        : null;
+      errorBoundaryName = getComponentNameFromFiber(boundary);
+    }
+    const error = (errorInfo.value: any);
+    const onCaughtError = root.onCaughtError;
+    onCaughtError(error, {
+      componentStack: errorInfo.stack,
+      errorBoundary:
+        boundary.tag === ClassComponent
+          ? boundary.stateNode // This should always be the case as long as we only have class boundaries
+          : null,
+    });
+  } catch (e) {
+    // This method must not throw, or React internal state will get messed up.
+    // If console.error is overridden, or logCapturedError() shows a dialog that throws,
+    // we want to report this error outside of the normal stack as a last resort.
+    // https://github.com/facebook/react/issues/13188
+    setTimeout(() => {
+      throw e;
+    });
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
new file mode 100644
index 00000000000..2d8d3f7fd16
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
+
+export type Flags = number;
+
+// Don't change these values. They're used by React Dev Tools.
+export const NoFlags = /*                      */ 0b0000000000000000000000000000000;
+export const PerformedWork = /*                */ 0b0000000000000000000000000000001;
+export const Placement = /*                    */ 0b0000000000000000000000000000010;
+export const DidCapture = /*                   */ 0b0000000000000000000000010000000;
+export const Hydrating = /*                    */ 0b0000000000000000001000000000000;
+
+// You can change the rest (and add more).
+export const Update = /*                       */ 0b0000000000000000000000000000100;
+export const Cloned = /*                       */ 0b0000000000000000000000000001000;
+
+export const ChildDeletion = /*                */ 0b0000000000000000000000000010000;
+export const ContentReset = /*                 */ 0b0000000000000000000000000100000;
+export const Callback = /*                     */ 0b0000000000000000000000001000000;
+/* Used by DidCapture:                            0b0000000000000000000000010000000; */
+
+export const ForceClientRender = /*            */ 0b0000000000000000000000100000000;
+export const Ref = /*                          */ 0b0000000000000000000001000000000;
+export const Snapshot = /*                     */ 0b0000000000000000000010000000000;
+export const Passive = /*                      */ 0b0000000000000000000100000000000;
+/* Used by Hydrating:                             0b0000000000000000001000000000000; */
+
+export const Visibility = /*                   */ 0b0000000000000000010000000000000;
+export const StoreConsistency = /*             */ 0b0000000000000000100000000000000;
+
+// It's OK to reuse these bits because these flags are mutually exclusive for
+// different fiber types. We should really be doing this for as many flags as
+// possible, because we're about to run out of bits.
+export const Hydrate = Callback;
+export const ScheduleRetry = StoreConsistency;
+export const ShouldSuspendCommit = Visibility;
+export const ViewTransitionNamedMount = ShouldSuspendCommit;
+export const DidDefer = ContentReset;
+export const FormReset = Snapshot;
+export const AffectedParentLayout = ContentReset;
+
+export const LifecycleEffectMask =
+  Passive | Update | Callback | Ref | Snapshot | StoreConsistency;
+
+// Union of all commit flags (flags with the lifetime of a particular commit)
+export const HostEffectMask = /*               */ 0b0000000000000000111111111111111;
+
+// These are not really side effects, but we still reuse this field.
+export const Incomplete = /*                   */ 0b0000000000000001000000000000000;
+export const ShouldCapture = /*                */ 0b0000000000000010000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b0000000000000100000000000000000;
+export const DidPropagateContext = /*          */ 0b0000000000001000000000000000000;
+export const NeedsPropagation = /*             */ 0b0000000000010000000000000000000;
+
+// Static tags describe aspects of a fiber that are not specific to a render,
+// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
+// This enables us to defer more work in the unmount case,
+// since we can defer traversing the tree during layout to look for Passive effects,
+// and instead rely on the static flag as a signal that there may be cleanup work.
+export const Forked = /*                       */ 0b0000000000100000000000000000000;
+export const SnapshotStatic = /*               */ 0b0000000001000000000000000000000;
+export const LayoutStatic = /*                 */ 0b0000000010000000000000000000000;
+export const RefStatic = LayoutStatic;
+export const PassiveStatic = /*                */ 0b0000000100000000000000000000000;
+export const MaySuspendCommit = /*             */ 0b0000001000000000000000000000000;
+// ViewTransitionNamedStatic tracks explicitly name ViewTransition components deeply
+// that might need to be visited during clean up. This is similar to SnapshotStatic
+// if there was any other use for it. It also needs to run in the same phase as
+// MaySuspendCommit tracking.
+export const ViewTransitionNamedStatic =
+  /*    */ SnapshotStatic | MaySuspendCommit;
+// ViewTransitionStatic tracks whether there are an ViewTransition components from
+// the nearest HostComponent down. It resets at every HostComponent level.
+export const ViewTransitionStatic = /*         */ 0b0000010000000000000000000000000;
+// Tracks whether a HostPortal is present in the tree.
+export const PortalStatic = /*                 */ 0b0000100000000000000000000000000;
+
+// Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
+export const PlacementDEV = /*                 */ 0b0001000000000000000000000000000;
+export const MountLayoutDev = /*               */ 0b0010000000000000000000000000000;
+export const MountPassiveDev = /*              */ 0b0100000000000000000000000000000;
+
+// Groups of flags that are used in the commit phase to skip over trees that
+// don't contain effects, by checking subtreeFlags.
+
+export const BeforeMutationMask: number =
+  Snapshot |
+  (enableCreateEventHandleAPI
+    ? // createEventHandle needs to visit deleted and hidden trees to
+      // fire beforeblur
+      // TODO: Only need to visit Deletions during BeforeMutation phase if an
+      // element is focused.
+      Update | ChildDeletion | Visibility
+    : // TODO: The useEffectEvent hook uses the snapshot phase for clean up but it
+      // really should use the mutation phase for this or at least schedule an
+      // explicit Snapshot phase flag for this.
+      Update);
+
+// For View Transition support we use the snapshot phase to scan the tree for potentially
+// affected ViewTransition components.
+export const BeforeAndAfterMutationTransitionMask: number =
+  Snapshot | Update | Placement | ChildDeletion | Visibility | ContentReset;
+
+export const MutationMask =
+  Placement |
+  Update |
+  ChildDeletion |
+  ContentReset |
+  Ref |
+  Hydrating |
+  Visibility |
+  FormReset;
+export const LayoutMask = Update | Callback | Ref | Visibility;
+
+// TODO: Split into PassiveMountMask and PassiveUnmountMask
+export const PassiveMask = Passive | Visibility | ChildDeletion;
+
+// For View Transitions we need to visit anything we visited in the snapshot phase to
+// restore the view-transition-name after committing the transition.
+export const PassiveTransitionMask: number = PassiveMask | Update | Placement;
+
+// Union of tags that don't get reset on clones.
+// This allows certain concepts to persist without recalculating them,
+// e.g. whether a subtree contains passive effects or portals.
+export const StaticMask =
+  LayoutStatic |
+  PassiveStatic |
+  RefStatic |
+  MaySuspendCommit |
+  ViewTransitionStatic |
+  ViewTransitionNamedStatic |
+  PortalStatic |
+  Forked;
diff --git a/packages/react-reconciler/src/ReactFiberGestureScheduler.js b/packages/react-reconciler/src/ReactFiberGestureScheduler.js
new file mode 100644
index 00000000000..373e8167cab
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberGestureScheduler.js
@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {FiberRoot} from './ReactInternalTypes';
+import type {GestureOptions} from 'shared/ReactTypes';
+import type {GestureTimeline, RunningViewTransition} from './ReactFiberConfig';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+import type {Lane} from './ReactFiberLane';
+
+import {
+  GestureLane,
+  markRootEntangled,
+  markRootFinished,
+  NoLane,
+  NoLanes,
+} from './ReactFiberLane';
+import {
+  ensureRootIsScheduled,
+  requestTransitionLane,
+} from './ReactFiberRootScheduler';
+import {getCurrentGestureOffset, stopViewTransition} from './ReactFiberConfig';
+import {pingGestureRoot, restartGestureRoot} from './ReactFiberWorkLoop';
+
+// This type keeps track of any scheduled or active gestures.
+export type ScheduledGesture = {
+  provider: GestureTimeline,
+  count: number, // The number of times this same provider has been started.
+  rangeStart: number, // The percentage along the timeline where the "current" state starts.
+  rangeEnd: number, // The percentage along the timeline where the "destination" state is reached.
+  types: null | TransitionTypes, // Any addTransitionType call made during startGestureTransition.
+  running: null | RunningViewTransition, // Used to cancel the running transition after we're done.
+  commit: null | (() => void), // Callback to run to commit if there's a pending commit.
+  committing: boolean, // If the gesture was released in a committed state and should actually commit.
+  revertLane: Lane, // The Lane that we'll use to schedule the revert.
+  prev: null | ScheduledGesture, // The previous scheduled gesture in the queue for this root.
+  next: null | ScheduledGesture, // The next scheduled gesture in the queue for this root.
+};
+
+export function scheduleGesture(
+  root: FiberRoot,
+  provider: GestureTimeline,
+): ScheduledGesture {
+  let prev = root.pendingGestures;
+  while (prev !== null) {
+    if (prev.provider === provider) {
+      // Existing instance found.
+      return prev;
+    }
+    const next = prev.next;
+    if (next === null) {
+      break;
+    }
+    prev = next;
+  }
+  const gesture: ScheduledGesture = {
+    provider: provider,
+    count: 0,
+    rangeStart: 0, // Uninitialized
+    rangeEnd: 100, // Uninitialized
+    types: null,
+    running: null,
+    commit: null,
+    committing: false,
+    revertLane: NoLane, // Starts uninitialized.
+    prev: prev,
+    next: null,
+  };
+  if (prev === null) {
+    root.pendingGestures = gesture;
+  } else {
+    prev.next = gesture;
+  }
+  ensureRootIsScheduled(root);
+  return gesture;
+}
+
+export function startScheduledGesture(
+  root: FiberRoot,
+  gestureTimeline: GestureTimeline,
+  gestureOptions: ?GestureOptions,
+  transitionTypes: null | TransitionTypes,
+): null | ScheduledGesture {
+  const rangeStart =
+    gestureOptions && gestureOptions.rangeStart != null
+      ? gestureOptions.rangeStart
+      : getCurrentGestureOffset(gestureTimeline);
+  const rangeEnd =
+    gestureOptions && gestureOptions.rangeEnd != null
+      ? gestureOptions.rangeEnd
+      : rangeStart < 50
+        ? 100
+        : 0;
+  let prev = root.pendingGestures;
+  while (prev !== null) {
+    if (prev.provider === gestureTimeline) {
+      // Existing instance found.
+      prev.count++;
+      // Update the options.
+      prev.rangeStart = rangeStart;
+      prev.rangeEnd = rangeEnd;
+      if (transitionTypes !== null) {
+        let scheduledTypes = prev.types;
+        if (scheduledTypes === null) {
+          scheduledTypes = prev.types = [];
+        }
+        for (let i = 0; i < transitionTypes.length; i++) {
+          const transitionType = transitionTypes[i];
+          if (scheduledTypes.indexOf(transitionType) === -1) {
+            scheduledTypes.push(transitionType);
+          }
+        }
+      }
+      return prev;
+    }
+    const next = prev.next;
+    if (next === null) {
+      break;
+    }
+    prev = next;
+  }
+  // No scheduled gestures. It must mean nothing for this renderer updated but
+  // some other renderer might have updated.
+  return null;
+}
+
+export function cancelScheduledGesture(
+  root: FiberRoot,
+  gesture: ScheduledGesture,
+): void {
+  // Entangle any Transitions started in this event with the revertLane of the gesture
+  // so that we commit them all together.
+  if (gesture.revertLane !== NoLane) {
+    const entangledLanes = gesture.revertLane | requestTransitionLane(null);
+    markRootEntangled(root, entangledLanes);
+  }
+
+  gesture.count--;
+  if (gesture.count === 0) {
+    // If the end state is closer to the end than the beginning then we commit into the
+    // end state before reverting back (or applying a new Transition).
+    // Otherwise we just revert back and don't commit.
+    let shouldCommit: boolean;
+    const finalOffset = getCurrentGestureOffset(gesture.provider);
+    const rangeStart = gesture.rangeStart;
+    const rangeEnd = gesture.rangeEnd;
+    if (rangeStart < rangeEnd) {
+      shouldCommit = finalOffset > rangeStart + (rangeEnd - rangeStart) / 2;
+    } else {
+      shouldCommit = finalOffset < rangeEnd + (rangeStart - rangeEnd) / 2;
+    }
+    // TODO: If we're currently rendering this gesture, we need to restart the render
+    // on a different gesture or cancel the render..
+    // TODO: We might want to pause the View Transition at this point since you should
+    // no longer be able to update the position of anything but it might be better to
+    // just commit the gesture state.
+    const runningTransition = gesture.running;
+    if (runningTransition !== null && shouldCommit) {
+      // If we are going to commit this gesture in its to state, we need to wait to
+      // stop it until it commits. We should now schedule a render at the gesture
+      // lane to actually commit it.
+      gesture.committing = true;
+      if (root.pendingGestures === gesture) {
+        const commitCallback = gesture.commit;
+        if (commitCallback !== null) {
+          gesture.commit = null;
+          // If we already have a commit prepared we can immediately commit the tree
+          // without rerendering.
+          // TODO: Consider scheduling this in a task instead of synchronously inside the last cancellation.s
+          commitCallback();
+        } else {
+          // Ping the root given the new state. This is similar to pingSuspendedRoot.
+          pingGestureRoot(root);
+        }
+      }
+    } else {
+      // If we're not going to commit this gesture we can stop the View Transition
+      // right away and delete the scheduled gesture from the pending queue.
+      if (gesture.prev === null) {
+        if (root.pendingGestures === gesture) {
+          // This was the currently rendering gesture.
+          root.pendingGestures = gesture.next;
+          let remainingLanes = root.pendingLanes;
+          if (root.pendingGestures === null) {
+            // Gestures don't clear their lanes while the gesture is still active but it
+            // might not be scheduled to do any more renders and so we shouldn't schedule
+            // any more gesture lane work until a new gesture is scheduled.
+            remainingLanes &= ~GestureLane;
+          }
+          markRootFinished(
+            root,
+            GestureLane,
+            remainingLanes,
+            NoLane,
+            NoLane,
+            NoLanes,
+          );
+          // If we had a currently rendering gesture we need to now reset the gesture lane to
+          // now render the next gesture or cancel if there's no more gestures in the queue.
+          restartGestureRoot(root);
+        }
+        gesture.running = null;
+        if (runningTransition !== null) {
+          stopViewTransition(runningTransition);
+        }
+      } else {
+        // This was not the current gesture so it doesn't affect the current render.
+        gesture.prev.next = gesture.next;
+        if (gesture.next !== null) {
+          gesture.next.prev = gesture.prev;
+        }
+        gesture.prev = null;
+        gesture.next = null;
+      }
+    }
+  }
+}
+
+export function stopCommittedGesture(root: FiberRoot) {
+  // The top was just committed. We can delete it from the queue
+  // and stop its View Transition now.
+  const committedGesture = root.pendingGestures;
+  if (committedGesture !== null) {
+    // Mark it as no longer committing and should no longer be included in rerenders.
+    committedGesture.committing = false;
+    const nextGesture = committedGesture.next;
+    if (nextGesture === null) {
+      // Gestures don't clear their lanes while the gesture is still active but it
+      // might not be scheduled to do any more renders and so we shouldn't schedule
+      // any more gesture lane work until a new gesture is scheduled.
+      root.pendingLanes &= ~GestureLane;
+    } else {
+      nextGesture.prev = null;
+    }
+    root.pendingGestures = nextGesture;
+    const runningTransition = committedGesture.running;
+    if (runningTransition !== null) {
+      committedGesture.running = null;
+      stopViewTransition(runningTransition);
+    }
+  }
+}
+
+export function scheduleGestureCommit(
+  gesture: ScheduledGesture,
+  callback: () => void,
+): () => void {
+  gesture.commit = callback;
+  return function () {
+    gesture.commit = null;
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.js b/packages/react-reconciler/src/ReactFiberHiddenContext.js
new file mode 100644
index 00000000000..def05ba91dd
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack';
+import type {Lanes} from './ReactFiberLane';
+
+import {createCursor, push, pop} from './ReactFiberStack';
+
+import {
+  getEntangledRenderLanes,
+  setEntangledRenderLanes,
+} from './ReactFiberWorkLoop';
+import {NoLanes, mergeLanes} from './ReactFiberLane';
+
+// TODO: Remove `renderLanes` context in favor of hidden context
+type HiddenContext = {
+  // Represents the lanes that must be included when processing updates in
+  // order to reveal the hidden content.
+  // TODO: Remove `subtreeLanes` context from work loop in favor of this one.
+  baseLanes: number,
+  ...
+};
+
+// TODO: This isn't being used yet, but it's intended to replace the
+// InvisibleParentContext that is currently managed by SuspenseContext.
+export const currentTreeHiddenStackCursor: StackCursor<HiddenContext | null> =
+  createCursor(null);
+export const prevEntangledRenderLanesCursor: StackCursor<Lanes> =
+  createCursor(NoLanes);
+
+export function pushHiddenContext(fiber: Fiber, context: HiddenContext): void {
+  const prevEntangledRenderLanes = getEntangledRenderLanes();
+  push(prevEntangledRenderLanesCursor, prevEntangledRenderLanes, fiber);
+  push(currentTreeHiddenStackCursor, context, fiber);
+
+  // When rendering a subtree that's currently hidden, we must include all
+  // lanes that would have rendered if the hidden subtree hadn't been deferred.
+  // That is, in order to reveal content from hidden -> visible, we must commit
+  // all the updates that we skipped when we originally hid the tree.
+  setEntangledRenderLanes(
+    mergeLanes(prevEntangledRenderLanes, context.baseLanes),
+  );
+}
+
+export function reuseHiddenContextOnStack(fiber: Fiber): void {
+  // This subtree is not currently hidden, so we don't need to add any lanes
+  // to the render lanes. But we still need to push something to avoid a
+  // context mismatch. Reuse the existing context on the stack.
+  push(prevEntangledRenderLanesCursor, getEntangledRenderLanes(), fiber);
+  push(
+    currentTreeHiddenStackCursor,
+    currentTreeHiddenStackCursor.current,
+    fiber,
+  );
+}
+
+export function popHiddenContext(fiber: Fiber): void {
+  // Restore the previous render lanes from the stack
+  setEntangledRenderLanes(prevEntangledRenderLanesCursor.current);
+
+  pop(currentTreeHiddenStackCursor, fiber);
+  pop(prevEntangledRenderLanesCursor, fiber);
+}
+
+export function isCurrentTreeHidden(): boolean {
+  return currentTreeHiddenStackCursor.current !== null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
new file mode 100644
index 00000000000..0450495ff0d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -0,0 +1,5237 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  StartTransitionOptions,
+  Usable,
+  Thenable,
+  RejectedThenable,
+  Awaited,
+} from 'shared/ReactTypes';
+import type {
+  Fiber,
+  FiberRoot,
+  Dispatcher,
+  HookType,
+  MemoCache,
+} from './ReactInternalTypes';
+import type {Lanes, Lane} from './ReactFiberLane';
+import type {HookFlags} from './ReactHookEffectTags';
+import type {Flags} from './ReactFiberFlags';
+import type {TransitionStatus} from './ReactFiberConfig';
+import type {ScheduledGesture} from './ReactFiberGestureScheduler';
+
+import {
+  HostTransitionContext,
+  NotPendingTransition as NoPendingHostTransition,
+  setCurrentUpdatePriority,
+  getCurrentUpdatePriority,
+} from './ReactFiberConfig';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  enableSchedulingProfiler,
+  enableTransitionTracing,
+  enableLegacyCache,
+  disableLegacyMode,
+  enableNoCloningMemoCache,
+  enableViewTransition,
+  enableGestureTransition,
+} from 'shared/ReactFeatureFlags';
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_MEMO_CACHE_SENTINEL,
+} from 'shared/ReactSymbols';
+
+import {
+  NoMode,
+  ConcurrentMode,
+  StrictEffectsMode,
+  StrictLegacyMode,
+} from './ReactTypeOfMode';
+import {
+  NoLane,
+  SyncLane,
+  OffscreenLane,
+  DeferredLane,
+  NoLanes,
+  isSubsetOfLanes,
+  includesBlockingLane,
+  includesOnlyNonUrgentLanes,
+  mergeLanes,
+  removeLanes,
+  intersectLanes,
+  isTransitionLane,
+  markRootEntangled,
+  includesSomeLane,
+  isGestureRender,
+  GestureLane,
+  UpdateLanes,
+} from './ReactFiberLane';
+import {
+  ContinuousEventPriority,
+  higherEventPriority,
+} from './ReactEventPriorities';
+import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
+import {HostRoot, CacheComponent, HostComponent} from './ReactWorkTags';
+import {
+  LayoutStatic as LayoutStaticEffect,
+  Passive as PassiveEffect,
+  PassiveStatic as PassiveStaticEffect,
+  StaticMask as StaticMaskEffect,
+  Update as UpdateEffect,
+  StoreConsistency,
+  MountLayoutDev as MountLayoutDevEffect,
+  MountPassiveDev as MountPassiveDevEffect,
+  FormReset,
+} from './ReactFiberFlags';
+import {
+  HasEffect as HookHasEffect,
+  Layout as HookLayout,
+  Passive as HookPassive,
+  Insertion as HookInsertion,
+} from './ReactHookEffectTags';
+import {
+  getWorkInProgressRoot,
+  getWorkInProgressRootRenderLanes,
+  scheduleUpdateOnFiber,
+  requestUpdateLane,
+  requestDeferredLane,
+  markSkippedUpdateLanes,
+  isInvalidExecutionContextForEventFunction,
+} from './ReactFiberWorkLoop';
+
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import is from 'shared/objectIs';
+import isArray from 'shared/isArray';
+import {
+  markWorkInProgressReceivedUpdate,
+  checkIfWorkInProgressReceivedUpdate,
+} from './ReactFiberBeginWork';
+import {
+  getIsHydrating,
+  tryToClaimNextHydratableFormMarkerInstance,
+} from './ReactFiberHydrationContext';
+import {
+  markStateUpdateScheduled,
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook';
+import {
+  startUpdateTimerByLane,
+  startHostActionTimer,
+} from './ReactProfilerTimer';
+import {createCache} from './ReactFiberCacheComponent';
+import {
+  createUpdate as createLegacyQueueUpdate,
+  enqueueUpdate as enqueueLegacyQueueUpdate,
+  entangleTransitions as entangleLegacyQueueTransitions,
+} from './ReactFiberClassUpdateQueue';
+import {
+  enqueueConcurrentHookUpdate,
+  enqueueConcurrentHookUpdateAndEagerlyBailout,
+  enqueueConcurrentRenderForLane,
+} from './ReactFiberConcurrentUpdates';
+import {getTreeId} from './ReactFiberTreeContext';
+import {now} from './Scheduler';
+import {
+  trackUsedThenable,
+  checkIfUseWrappedInTryCatch,
+  createThenableState,
+  SuspenseException,
+  SuspenseActionException,
+} from './ReactFiberThenable';
+import type {ThenableState} from './ReactFiberThenable';
+import type {Transition} from 'react/src/ReactStartTransition';
+import {
+  peekEntangledActionLane,
+  peekEntangledActionThenable,
+  chainThenableValue,
+} from './ReactFiberAsyncAction';
+import {requestTransitionLane} from './ReactFiberRootScheduler';
+import {isCurrentTreeHidden} from './ReactFiberHiddenContext';
+import {requestCurrentTransition} from './ReactFiberTransition';
+
+import {callComponentInDEV} from './ReactFiberCallUserSpace';
+
+import {scheduleGesture} from './ReactFiberGestureScheduler';
+
+export type Update<S, A> = {
+  lane: Lane,
+  revertLane: Lane,
+  action: A,
+  hasEagerState: boolean,
+  eagerState: S | null,
+  next: Update<S, A>,
+  gesture: null | ScheduledGesture, // enableGestureTransition
+};
+
+export type UpdateQueue<S, A> = {
+  pending: Update<S, A> | null,
+  lanes: Lanes,
+  dispatch: (A => mixed) | null,
+  lastRenderedReducer: ((S, A) => S) | null,
+  lastRenderedState: S | null,
+};
+
+let didWarnAboutMismatchedHooksForComponent;
+let didWarnUncachedGetSnapshot: void | true;
+let didWarnAboutUseWrappedInTryCatch;
+let didWarnAboutAsyncClientComponent;
+let didWarnAboutUseFormState;
+if (__DEV__) {
+  didWarnAboutMismatchedHooksForComponent = new Set<string | null>();
+  didWarnAboutUseWrappedInTryCatch = new Set<string | null>();
+  didWarnAboutAsyncClientComponent = new Set<string | null>();
+  didWarnAboutUseFormState = new Set<string | null>();
+}
+
+export type Hook = {
+  memoizedState: any,
+  baseState: any,
+  baseQueue: Update<any, any> | null,
+  queue: any,
+  next: Hook | null,
+};
+
+// The effect "instance" is a shared object that remains the same for the entire
+// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
+// "destroy" function that is returned from an effect, because that is stateful.
+// The field is `undefined` if the effect is unmounted, or if the effect ran
+// but is not stateful. We don't explicitly track whether the effect is mounted
+// or unmounted because that can be inferred by the hiddenness of the fiber in
+// the tree, i.e. whether there is a hidden Offscreen fiber above it.
+//
+// It's unfortunate that this is stored on a separate object, because it adds
+// more memory per effect instance, but it's conceptually sound. I think there's
+// likely a better data structure we could use for effects; perhaps just one
+// array of effect instances per fiber. But I think this is OK for now despite
+// the additional memory and we can follow up with performance
+// optimizations later.
+type EffectInstance = {
+  destroy: void | (() => void),
+};
+
+export type Effect = {
+  tag: HookFlags,
+  inst: EffectInstance,
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+  next: Effect,
+};
+
+type StoreInstance<T> = {
+  value: T,
+  getSnapshot: () => T,
+};
+
+type StoreConsistencyCheck<T> = {
+  value: T,
+  getSnapshot: () => T,
+};
+
+type EventFunctionPayload<Args, Return, F: (...Array<Args>) => Return> = {
+  ref: {
+    eventFn: F,
+    impl: F,
+  },
+  nextImpl: F,
+};
+
+export type FunctionComponentUpdateQueue = {
+  lastEffect: Effect | null,
+  events: Array<EventFunctionPayload<any, any, any>> | null,
+  stores: Array<StoreConsistencyCheck<any>> | null,
+  memoCache: MemoCache | null,
+};
+
+type BasicStateAction<S> = (S => S) | S;
+
+type Dispatch<A> = A => void;
+
+// These are set right before calling the component.
+let renderLanes: Lanes = NoLanes;
+// The work-in-progress fiber. I've named it differently to distinguish it from
+// the work-in-progress hook.
+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 workInProgressHook: Hook | null = null;
+
+// 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;
+// Where an update was scheduled only during the current render pass. This
+// gets reset after each attempt.
+// TODO: Maybe there's some way to consolidate this with
+// `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
+let didScheduleRenderPhaseUpdateDuringThisPass: boolean = false;
+let shouldDoubleInvokeUserFnsInHooksDEV: boolean = false;
+// Counts the number of useId hooks in this component.
+let localIdCounter: number = 0;
+// Counts number of `use`-d thenables
+let thenableIndexCounter: number = 0;
+let thenableState: ThenableState | null = null;
+
+// Used for ids that are generated completely client-side (i.e. not during
+// hydration). This counter is global, so client ids are not stable across
+// render attempts.
+let globalClientIdCounter: number = 0;
+
+const RE_RENDER_LIMIT = 25;
+
+// In DEV, this is the name of the currently executing primitive hook
+let currentHookNameInDev: ?HookType = null;
+
+// In DEV, this list ensures that hooks are called in the same order between renders.
+// The list stores the order of hooks used during the initial render (mount).
+// Subsequent renders (updates) reference this list.
+let hookTypesDev: Array<HookType> | null = null;
+let hookTypesUpdateIndexDev: number = -1;
+
+// In DEV, this tracks whether currently rendering component needs to ignore
+// the dependencies for Hooks that need them (e.g. useEffect or useMemo).
+// When true, such Hooks will always be "remounted". Only used during hot reload.
+let ignorePreviousDependencies: boolean = false;
+
+function mountHookTypesDev(): void {
+  if (__DEV__) {
+    const hookName = ((currentHookNameInDev: any): HookType);
+
+    if (hookTypesDev === null) {
+      hookTypesDev = [hookName];
+    } else {
+      hookTypesDev.push(hookName);
+    }
+  }
+}
+
+function updateHookTypesDev(): void {
+  if (__DEV__) {
+    const hookName = ((currentHookNameInDev: any): HookType);
+
+    if (hookTypesDev !== null) {
+      hookTypesUpdateIndexDev++;
+      if (hookTypesDev[hookTypesUpdateIndexDev] !== hookName) {
+        warnOnHookMismatchInDev(hookName);
+      }
+    }
+  }
+}
+
+function checkDepsAreArrayDev(deps: mixed): void {
+  if (__DEV__) {
+    if (deps !== undefined && deps !== null && !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.
+      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,
+        typeof deps,
+      );
+    }
+  }
+}
+
+function warnOnHookMismatchInDev(currentHookName: HookType): void {
+  if (__DEV__) {
+    const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
+    if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
+      didWarnAboutMismatchedHooksForComponent.add(componentName);
+
+      if (hookTypesDev !== null) {
+        let table = '';
+
+        const secondColumnStart = 30;
+
+        for (let i = 0; i <= ((hookTypesUpdateIndexDev: any): number); i++) {
+          const oldHookName = hookTypesDev[i];
+          const newHookName =
+            i === ((hookTypesUpdateIndexDev: any): number)
+              ? currentHookName
+              : oldHookName;
+
+          let row = `${i + 1}. ${oldHookName}`;
+
+          // Extra space so second column lines up
+          // lol @ IE not supporting String#repeat
+          while (row.length < secondColumnStart) {
+            row += ' ';
+          }
+
+          row += newHookName + '\n';
+
+          table += row;
+        }
+
+        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://react.dev/link/rules-of-hooks\n\n' +
+            '   Previous render            Next render\n' +
+            '   ------------------------------------------------------\n' +
+            '%s' +
+            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n',
+          componentName,
+          table,
+        );
+      }
+    }
+  }
+}
+
+function warnOnUseFormStateInDev(): void {
+  if (__DEV__) {
+    const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
+    if (!didWarnAboutUseFormState.has(componentName)) {
+      didWarnAboutUseFormState.add(componentName);
+
+      console.error(
+        'ReactDOM.useFormState has been renamed to React.useActionState. ' +
+          'Please update %s to use React.useActionState.',
+        componentName,
+      );
+    }
+  }
+}
+
+function warnIfAsyncClientComponent(Component: Function) {
+  if (__DEV__) {
+    // This dev-only check only works for detecting native async functions,
+    // not transpiled ones. There's also a prod check that we use to prevent
+    // async client components from crashing the app; the prod one works even
+    // for transpiled async functions. Neither mechanism is completely
+    // bulletproof but together they cover the most common cases.
+    const isAsyncFunction =
+      // $FlowIgnore[method-unbinding]
+      Object.prototype.toString.call(Component) === '[object AsyncFunction]' ||
+      // $FlowIgnore[method-unbinding]
+      Object.prototype.toString.call(Component) ===
+        '[object AsyncGeneratorFunction]';
+    if (isAsyncFunction) {
+      // Encountered an async Client Component. This is not yet supported.
+      const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
+      if (!didWarnAboutAsyncClientComponent.has(componentName)) {
+        didWarnAboutAsyncClientComponent.add(componentName);
+        console.error(
+          '%s is an async Client Component. ' +
+            'Only Server Components can be async at the moment. This error is often caused by accidentally ' +
+            "adding `'use client'` to a module that was originally written " +
+            'for the server.',
+          componentName === null
+            ? 'An unknown Component'
+            : `<${componentName}>`,
+        );
+      }
+    }
+  }
+}
+
+function throwInvalidHookError() {
+  throw new Error(
+    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+      ' one of the following reasons:\n' +
+      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+      '2. You might be breaking the Rules of Hooks\n' +
+      '3. You might have more than one copy of React in the same app\n' +
+      'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+  );
+}
+
+function areHookInputsEqual(
+  nextDeps: Array<mixed>,
+  prevDeps: Array<mixed> | null,
+): boolean {
+  if (__DEV__) {
+    if (ignorePreviousDependencies) {
+      // Only true when this component is being hot reloaded.
+      return false;
+    }
+  }
+
+  if (prevDeps === null) {
+    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;
+  }
+
+  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,
+        `[${prevDeps.join(', ')}]`,
+        `[${nextDeps.join(', ')}]`,
+      );
+    }
+  }
+  // $FlowFixMe[incompatible-use] found when upgrading Flow
+  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    if (is(nextDeps[i], prevDeps[i])) {
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+
+export function renderWithHooks<Props, SecondArg>(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: (p: Props, arg: SecondArg) => any,
+  props: Props,
+  secondArg: SecondArg,
+  nextRenderLanes: Lanes,
+): any {
+  renderLanes = nextRenderLanes;
+  currentlyRenderingFiber = workInProgress;
+
+  if (__DEV__) {
+    hookTypesDev =
+      current !== null
+        ? ((current._debugHookTypes: any): Array<HookType>)
+        : null;
+    hookTypesUpdateIndexDev = -1;
+    // Used for hot reloading:
+    ignorePreviousDependencies =
+      current !== null && current.type !== workInProgress.type;
+
+    warnIfAsyncClientComponent(Component);
+  }
+
+  workInProgress.memoizedState = null;
+  workInProgress.updateQueue = null;
+  workInProgress.lanes = NoLanes;
+
+  // The following should have already been reset
+  // currentHook = null;
+  // workInProgressHook = null;
+
+  // didScheduleRenderPhaseUpdate = false;
+  // localIdCounter = 0;
+  // thenableIndexCounter = 0;
+  // thenableState = null;
+
+  // 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 memoizedState === null.
+  // This is tricky because it's valid for certain types of components (e.g. React.lazy)
+
+  // 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 memoizedState would be null during updates and mounts.
+  if (__DEV__) {
+    if (current !== null && current.memoizedState !== null) {
+      ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
+    } else if (hookTypesDev !== null) {
+      // This dispatcher handles an edge case where a component is updating,
+      // but no stateful hooks have been used.
+      // We want to match the production code behavior (which will use HooksDispatcherOnMount),
+      // but with the extra DEV validation to ensure hooks ordering hasn't changed.
+      // This dispatcher does that.
+      ReactSharedInternals.H = HooksDispatcherOnMountWithHookTypesInDEV;
+    } else {
+      ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+    }
+  } else {
+    ReactSharedInternals.H =
+      current === null || current.memoizedState === null
+        ? HooksDispatcherOnMount
+        : HooksDispatcherOnUpdate;
+  }
+
+  // In Strict Mode, during development, user functions are double invoked to
+  // help detect side effects. The logic for how this is implemented for in
+  // hook components is a bit complex so let's break it down.
+  //
+  // We will invoke the entire component function twice. However, during the
+  // second invocation of the component, the hook state from the first
+  // invocation will be reused. That means things like `useMemo` functions won't
+  // run again, because the deps will match and the memoized result will
+  // be reused.
+  //
+  // We want memoized functions to run twice, too, so account for this, user
+  // functions are double invoked during the *first* invocation of the component
+  // function, and are *not* double invoked during the second incovation:
+  //
+  // - First execution of component function: user functions are double invoked
+  // - Second execution of component function (in Strict Mode, during
+  //   development): user functions are not double invoked.
+  //
+  // This is intentional for a few reasons; most importantly, it's because of
+  // how `use` works when something suspends: it reuses the promise that was
+  // passed during the first attempt. This is itself a form of memoization.
+  // We need to be able to memoize the reactive inputs to the `use` call using
+  // a hook (i.e. `useMemo`), which means, the reactive inputs to `use` must
+  // come from the same component invocation as the output.
+  //
+  // There are plenty of tests to ensure this behavior is correct.
+  const shouldDoubleRenderDEV =
+    __DEV__ && (workInProgress.mode & StrictLegacyMode) !== NoMode;
+
+  shouldDoubleInvokeUserFnsInHooksDEV = shouldDoubleRenderDEV;
+  let children = __DEV__
+    ? callComponentInDEV(Component, props, secondArg)
+    : Component(props, secondArg);
+  shouldDoubleInvokeUserFnsInHooksDEV = false;
+
+  // Check if there was a render phase update
+  if (didScheduleRenderPhaseUpdateDuringThisPass) {
+    // Keep rendering until the component stabilizes (there are no more render
+    // phase updates).
+    children = renderWithHooksAgain(
+      workInProgress,
+      Component,
+      props,
+      secondArg,
+    );
+  }
+
+  if (shouldDoubleRenderDEV) {
+    // In development, components are invoked twice to help detect side effects.
+    setIsStrictModeForDevtools(true);
+    try {
+      children = renderWithHooksAgain(
+        workInProgress,
+        Component,
+        props,
+        secondArg,
+      );
+    } finally {
+      setIsStrictModeForDevtools(false);
+    }
+  }
+
+  finishRenderingHooks(current, workInProgress, Component);
+
+  return children;
+}
+
+function finishRenderingHooks<Props, SecondArg>(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: (p: Props, arg: SecondArg) => any,
+): void {
+  if (__DEV__) {
+    workInProgress._debugHookTypes = hookTypesDev;
+    // Stash the thenable state for use by DevTools.
+    if (workInProgress.dependencies === null) {
+      if (thenableState !== null) {
+        workInProgress.dependencies = {
+          lanes: NoLanes,
+          firstContext: null,
+          _debugThenableState: thenableState,
+        };
+      }
+    } else {
+      workInProgress.dependencies._debugThenableState = thenableState;
+    }
+  }
+
+  // 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-entrance.
+  ReactSharedInternals.H = ContextOnlyDispatcher;
+
+  // This check uses currentHook so that it works the same in DEV and prod bundles.
+  // hookTypesDev could catch more cases (e.g. context) but only in DEV bundles.
+  const didRenderTooFewHooks =
+    currentHook !== null && currentHook.next !== null;
+
+  renderLanes = NoLanes;
+  currentlyRenderingFiber = (null: any);
+
+  currentHook = null;
+  workInProgressHook = null;
+
+  if (__DEV__) {
+    currentHookNameInDev = null;
+    hookTypesDev = null;
+    hookTypesUpdateIndexDev = -1;
+
+    // Confirm that a static flag was not added or removed since the last
+    // render. If this fires, it suggests that we incorrectly reset the static
+    // flags in some other part of the codebase. This has happened before, for
+    // example, in the SuspenseList implementation.
+    if (
+      current !== null &&
+      (current.flags & StaticMaskEffect) !==
+        (workInProgress.flags & StaticMaskEffect) &&
+      // Disable this warning in legacy mode, because legacy Suspense is weird
+      // and creates false positives. To make this work in legacy mode, we'd
+      // need to mark fibers that commit in an incomplete state, somehow. For
+      // now I'll disable the warning that most of the bugs that would trigger
+      // it are either exclusive to concurrent mode or exist in both.
+      (disableLegacyMode || (current.mode & ConcurrentMode) !== NoMode)
+    ) {
+      console.error(
+        'Internal React error: Expected static flag was missing. Please ' +
+          'notify the React team.',
+      );
+    }
+  }
+
+  didScheduleRenderPhaseUpdate = false;
+  // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
+
+  thenableIndexCounter = 0;
+  thenableState = null;
+
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
+
+  if (current !== null) {
+    if (!checkIfWorkInProgressReceivedUpdate()) {
+      // If there were no changes to props or state, we need to check if there
+      // was a context change. We didn't already do this because there's no
+      // 1:1 correspondence between dependencies and hooks. Although, because
+      // there almost always is in the common case (`readContext` is an
+      // internal API), we could compare in there. OTOH, we only hit this case
+      // if everything else bails out, so on the whole it might be better to
+      // keep the comparison out of the common path.
+      const currentDependencies = current.dependencies;
+      if (
+        currentDependencies !== null &&
+        checkIfContextChanged(currentDependencies)
+      ) {
+        markWorkInProgressReceivedUpdate();
+      }
+    }
+  }
+
+  if (__DEV__) {
+    if (checkIfUseWrappedInTryCatch()) {
+      const componentName =
+        getComponentNameFromFiber(workInProgress) || 'Unknown';
+      if (
+        !didWarnAboutUseWrappedInTryCatch.has(componentName) &&
+        // This warning also fires if you suspend with `use` inside an
+        // async component. Since we warn for that above, we'll silence this
+        // second warning by checking here.
+        !didWarnAboutAsyncClientComponent.has(componentName)
+      ) {
+        didWarnAboutUseWrappedInTryCatch.add(componentName);
+        console.error(
+          '`use` was called from inside a try/catch block. This is not allowed ' +
+            'and can lead to unexpected behavior. To handle errors triggered ' +
+            'by `use`, wrap your component in a error boundary.',
+        );
+      }
+    }
+  }
+}
+
+export function replaySuspendedComponentWithHooks<Props, SecondArg>(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  Component: (p: Props, arg: SecondArg) => any,
+  props: Props,
+  secondArg: SecondArg,
+): any {
+  // This function is used to replay a component that previously suspended,
+  // after its data resolves.
+  //
+  // It's a simplified version of renderWithHooks, but it doesn't need to do
+  // most of the set up work because they weren't reset when we suspended; they
+  // only get reset when the component either completes (finishRenderingHooks)
+  // or unwinds (resetHooksOnUnwind).
+  if (__DEV__) {
+    hookTypesUpdateIndexDev = -1;
+    // Used for hot reloading:
+    ignorePreviousDependencies =
+      current !== null && current.type !== workInProgress.type;
+  }
+  // renderWithHooks only resets the updateQueue but does not clear it, since
+  // it needs to work for both this case (suspense replay) as well as for double
+  // renders in dev and setState-in-render. However, for the suspense replay case
+  // we need to reset the updateQueue to correctly handle unmount effects, so we
+  // clear the queue here
+  workInProgress.updateQueue = null;
+  const children = renderWithHooksAgain(
+    workInProgress,
+    Component,
+    props,
+    secondArg,
+  );
+  finishRenderingHooks(current, workInProgress, Component);
+  return children;
+}
+
+function renderWithHooksAgain<Props, SecondArg>(
+  workInProgress: Fiber,
+  Component: (p: Props, arg: SecondArg) => any,
+  props: Props,
+  secondArg: SecondArg,
+): any {
+  // This is used to perform another render pass. It's used when setState is
+  // called during render, and for double invoking components in Strict Mode
+  // during development.
+  //
+  // The state from the previous pass is reused whenever possible. So, state
+  // updates that were already processed are not processed again, and memoized
+  // functions (`useMemo`) are not invoked again.
+  //
+  // Keep rendering in a loop for as long as render phase updates continue to
+  // be scheduled. Use a counter to prevent infinite loops.
+
+  currentlyRenderingFiber = workInProgress;
+
+  let numberOfReRenders: number = 0;
+  let children;
+  do {
+    if (didScheduleRenderPhaseUpdateDuringThisPass) {
+      // It's possible that a use() value depended on a state that was updated in
+      // this rerender, so we need to watch for different thenables this time.
+      thenableState = null;
+    }
+    thenableIndexCounter = 0;
+    didScheduleRenderPhaseUpdateDuringThisPass = false;
+
+    if (numberOfReRenders >= RE_RENDER_LIMIT) {
+      throw new Error(
+        '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
+    currentHook = null;
+    workInProgressHook = null;
+
+    if (workInProgress.updateQueue != null) {
+      resetFunctionComponentUpdateQueue((workInProgress.updateQueue: any));
+    }
+
+    if (__DEV__) {
+      // Also validate hook order for cascading updates.
+      hookTypesUpdateIndexDev = -1;
+    }
+
+    ReactSharedInternals.H = __DEV__
+      ? HooksDispatcherOnRerenderInDEV
+      : HooksDispatcherOnRerender;
+
+    children = __DEV__
+      ? callComponentInDEV(Component, props, secondArg)
+      : Component(props, secondArg);
+  } while (didScheduleRenderPhaseUpdateDuringThisPass);
+  return children;
+}
+
+export function renderTransitionAwareHostComponentWithHooks(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  lanes: Lanes,
+): TransitionStatus {
+  return renderWithHooks(
+    current,
+    workInProgress,
+    TransitionAwareHostComponent,
+    null,
+    null,
+    lanes,
+  );
+}
+
+export function TransitionAwareHostComponent(): TransitionStatus {
+  const dispatcher: any = ReactSharedInternals.H;
+  const [maybeThenable] = dispatcher.useState();
+  let nextState;
+  if (typeof maybeThenable.then === 'function') {
+    const thenable: Thenable<TransitionStatus> = (maybeThenable: any);
+    nextState = useThenable(thenable);
+  } else {
+    const status: TransitionStatus = maybeThenable;
+    nextState = status;
+  }
+
+  // The "reset state" is an object. If it changes, that means something
+  // requested that we reset the form.
+  const [nextResetState] = dispatcher.useState();
+  const prevResetState =
+    currentHook !== null ? currentHook.memoizedState : null;
+  if (prevResetState !== nextResetState) {
+    // Schedule a form reset
+    currentlyRenderingFiber.flags |= FormReset;
+  }
+
+  return nextState;
+}
+
+export function checkDidRenderIdHook(): boolean {
+  // This should be called immediately after every renderWithHooks call.
+  // Conceptually, it's part of the return value of renderWithHooks; it's only a
+  // separate function to avoid using an array tuple.
+  const didRenderIdHook = localIdCounter !== 0;
+  localIdCounter = 0;
+  return didRenderIdHook;
+}
+
+export function bailoutHooks(
+  current: Fiber,
+  workInProgress: Fiber,
+  lanes: Lanes,
+): void {
+  workInProgress.updateQueue = current.updateQueue;
+  // TODO: Don't need to reset the flags here, because they're reset in the
+  // complete phase (bubbleProperties).
+  if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
+    workInProgress.flags &= ~(
+      MountPassiveDevEffect |
+      MountLayoutDevEffect |
+      PassiveEffect |
+      UpdateEffect
+    );
+  } else {
+    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  }
+  current.lanes = removeLanes(current.lanes, lanes);
+}
+
+export function resetHooksAfterThrow(): void {
+  // This is called immediaetly after a throw. It shouldn't reset the entire
+  // module state, because the work loop might decide to replay the component
+  // again without rewinding.
+  //
+  // It should only reset things like the current dispatcher, to prevent hooks
+  // from being called outside of a component.
+  currentlyRenderingFiber = (null: any);
+
+  // 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-entrance.
+  ReactSharedInternals.H = ContextOnlyDispatcher;
+}
+
+export function resetHooksOnUnwind(workInProgress: Fiber): void {
+  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 = workInProgress.memoizedState;
+    while (hook !== null) {
+      const queue = hook.queue;
+      if (queue !== null) {
+        queue.pending = null;
+      }
+      hook = hook.next;
+    }
+    didScheduleRenderPhaseUpdate = false;
+  }
+
+  renderLanes = NoLanes;
+  currentlyRenderingFiber = (null: any);
+
+  currentHook = null;
+  workInProgressHook = null;
+
+  if (__DEV__) {
+    hookTypesDev = null;
+    hookTypesUpdateIndexDev = -1;
+
+    currentHookNameInDev = null;
+  }
+
+  didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
+  thenableIndexCounter = 0;
+  thenableState = null;
+}
+
+function mountWorkInProgressHook(): Hook {
+  const hook: Hook = {
+    memoizedState: null,
+
+    baseState: null,
+    baseQueue: null,
+    queue: null,
+
+    next: null,
+  };
+
+  if (workInProgressHook === null) {
+    // This is the first hook in the list
+    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
+  } else {
+    // Append to the end of the list
+    workInProgressHook = workInProgressHook.next = hook;
+  }
+  return workInProgressHook;
+}
+
+function updateWorkInProgressHook(): Hook {
+  // This function is used both for updates and for re-renders triggered by a
+  // render phase update. It assumes there is either a current hook we can
+  // clone, or a work-in-progress hook from a previous render pass that we can
+  // use as a base.
+  let nextCurrentHook: null | Hook;
+  if (currentHook === null) {
+    const 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;
+  } else {
+    // Clone from the current hook.
+
+    if (nextCurrentHook === null) {
+      const currentFiber = currentlyRenderingFiber.alternate;
+      if (currentFiber === null) {
+        // This is the initial render. This branch is reached when the component
+        // suspends, resumes, then renders an additional hook.
+        // Should never be reached because we should switch to the mount dispatcher first.
+        throw new Error(
+          'Update hook called on initial render. This is likely a bug in React. Please file an issue.',
+        );
+      } else {
+        // This is an update. We should always have a current hook.
+        throw new Error('Rendered more hooks than during the previous render.');
+      }
+    }
+
+    currentHook = nextCurrentHook;
+
+    const newHook: Hook = {
+      memoizedState: currentHook.memoizedState,
+
+      baseState: currentHook.baseState,
+      baseQueue: currentHook.baseQueue,
+      queue: currentHook.queue,
+
+      next: null,
+    };
+
+    if (workInProgressHook === null) {
+      // This is the first hook in the list.
+      currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
+    } else {
+      // Append to the end of the list.
+      workInProgressHook = workInProgressHook.next = newHook;
+    }
+  }
+  return workInProgressHook;
+}
+
+function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
+  return {
+    lastEffect: null,
+    events: null,
+    stores: null,
+    memoCache: null,
+  };
+}
+
+function resetFunctionComponentUpdateQueue(
+  updateQueue: FunctionComponentUpdateQueue,
+): void {
+  updateQueue.lastEffect = null;
+  updateQueue.events = null;
+  updateQueue.stores = null;
+  if (updateQueue.memoCache != null) {
+    // NOTE: this function intentionally does not reset memoCache data. We reuse updateQueue for the memo
+    // cache to avoid increasing the size of fibers that don't need a cache, but we don't want to reset
+    // the cache when other properties are reset.
+    updateQueue.memoCache.index = 0;
+  }
+}
+
+function useThenable<T>(thenable: Thenable<T>): T {
+  // Track the position of the thenable within this fiber.
+  const index = thenableIndexCounter;
+  thenableIndexCounter += 1;
+  if (thenableState === null) {
+    thenableState = createThenableState();
+  }
+  const result = trackUsedThenable(thenableState, thenable, index);
+
+  // When something suspends with `use`, we replay the component with the
+  // "re-render" dispatcher instead of the "mount" or "update" dispatcher.
+  //
+  // But if there are additional hooks that occur after the `use` invocation
+  // that suspended, they wouldn't have been processed during the previous
+  // attempt. So after we invoke `use` again, we may need to switch from the
+  // "re-render" dispatcher back to the "mount" or "update" dispatcher. That's
+  // what the following logic accounts for.
+  //
+  // TODO: Theoretically this logic only needs to go into the rerender
+  // dispatcher. Could optimize, but probably not be worth it.
+
+  // This is the same logic as in updateWorkInProgressHook.
+  const workInProgressFiber = currentlyRenderingFiber;
+  const nextWorkInProgressHook =
+    workInProgressHook === null
+      ? // We're at the beginning of the list, so read from the first hook from
+        // the fiber.
+        workInProgressFiber.memoizedState
+      : workInProgressHook.next;
+
+  if (nextWorkInProgressHook !== null) {
+    // There are still hooks remaining from the previous attempt.
+  } else {
+    // There are no remaining hooks from the previous attempt. We're no longer
+    // in "re-render" mode. Switch to the normal mount or update dispatcher.
+    //
+    // This is the same as the logic in renderWithHooks, except we don't bother
+    // to track the hook types debug information in this case (sufficient to
+    // only do that when nothing suspends).
+    const currentFiber = workInProgressFiber.alternate;
+    if (__DEV__) {
+      if (currentFiber !== null && currentFiber.memoizedState !== null) {
+        ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
+      } else {
+        ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      }
+    } else {
+      ReactSharedInternals.H =
+        currentFiber === null || currentFiber.memoizedState === null
+          ? HooksDispatcherOnMount
+          : HooksDispatcherOnUpdate;
+    }
+  }
+  return result;
+}
+
+function use<T>(usable: Usable<T>): T {
+  if (usable !== null && typeof usable === 'object') {
+    // $FlowFixMe[method-unbinding]
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+      return useThenable(thenable);
+    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
+
+function useMemoCache(size: number): Array<mixed> {
+  let memoCache = null;
+  // Fast-path, load memo cache from wip fiber if already prepared
+  let updateQueue: FunctionComponentUpdateQueue | null =
+    (currentlyRenderingFiber.updateQueue: any);
+  if (updateQueue !== null) {
+    memoCache = updateQueue.memoCache;
+  }
+  // Otherwise clone from the current fiber
+  if (memoCache == null) {
+    const current: Fiber | null = currentlyRenderingFiber.alternate;
+    if (current !== null) {
+      const currentUpdateQueue: FunctionComponentUpdateQueue | null =
+        (current.updateQueue: any);
+      if (currentUpdateQueue !== null) {
+        const currentMemoCache: ?MemoCache = currentUpdateQueue.memoCache;
+        if (currentMemoCache != null) {
+          memoCache = {
+            // When enableNoCloningMemoCache is enabled, instead of treating the
+            // cache as copy-on-write, like we do with fibers, we share the same
+            // cache instance across all render attempts, even if the component
+            // is interrupted before it commits.
+            //
+            // If an update is interrupted, either because it suspended or
+            // because of another update, we can reuse the memoized computations
+            // from the previous attempt. We can do this because the React
+            // Compiler performs atomic writes to the memo cache, i.e. it will
+            // not record the inputs to a memoization without also recording its
+            // output.
+            //
+            // This gives us a form of "resuming" within components and hooks.
+            //
+            // This only works when updating a component that already mounted.
+            // It has no impact during initial render, because the memo cache is
+            // stored on the fiber, and since we have not implemented resuming
+            // for fibers, it's always a fresh memo cache, anyway.
+            //
+            // However, this alone is pretty useful — it happens whenever you
+            // update the UI with fresh data after a mutation/action, which is
+            // extremely common in a Suspense-driven (e.g. RSC or Relay) app.
+            data: enableNoCloningMemoCache
+              ? currentMemoCache.data
+              : // Clone the memo cache before each render (copy-on-write)
+                currentMemoCache.data.map(array => array.slice()),
+            index: 0 as number,
+          };
+        }
+      }
+    }
+  }
+  // Finally fall back to allocating a fresh instance of the cache
+  if (memoCache == null) {
+    memoCache = {
+      data: [],
+      index: 0 as number,
+    };
+  }
+  if (updateQueue === null) {
+    updateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = updateQueue;
+  }
+  updateQueue.memoCache = memoCache;
+
+  let data = memoCache.data[memoCache.index];
+  if (data === undefined || (__DEV__ && ignorePreviousDependencies)) {
+    data = memoCache.data[memoCache.index] = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_MEMO_CACHE_SENTINEL;
+    }
+  } else if (data.length !== size) {
+    // TODO: consider warning or throwing here
+    if (__DEV__) {
+      console.error(
+        'Expected a constant size argument for each invocation of useMemoCache. ' +
+          'The previous cache was allocated with size %s but size %s was requested.',
+        data.length,
+        size,
+      );
+    }
+  }
+  memoCache.index++;
+  return data;
+}
+
+function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
+  // $FlowFixMe[incompatible-use]: Flow doesn't like mixed types
+  return typeof action === 'function' ? action(state) : action;
+}
+
+function mountReducer<S, I, A>(
+  reducer: (S, A) => S,
+  initialArg: I,
+  init?: I => S,
+): [S, Dispatch<A>] {
+  const hook = mountWorkInProgressHook();
+  let initialState;
+  if (init !== undefined) {
+    initialState = init(initialArg);
+    if (shouldDoubleInvokeUserFnsInHooksDEV) {
+      setIsStrictModeForDevtools(true);
+      try {
+        init(initialArg);
+      } finally {
+        setIsStrictModeForDevtools(false);
+      }
+    }
+  } else {
+    initialState = ((initialArg: any): S);
+  }
+  hook.memoizedState = hook.baseState = initialState;
+  const queue: UpdateQueue<S, A> = {
+    pending: null,
+    lanes: NoLanes,
+    dispatch: null,
+    lastRenderedReducer: reducer,
+    lastRenderedState: (initialState: any),
+  };
+  hook.queue = queue;
+  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchReducerAction.bind(
+    null,
+    currentlyRenderingFiber,
+    queue,
+  ): any));
+  return [hook.memoizedState, dispatch];
+}
+
+function updateReducer<S, I, A>(
+  reducer: (S, A) => S,
+  initialArg: I,
+  init?: I => S,
+): [S, Dispatch<A>] {
+  const hook = updateWorkInProgressHook();
+  return updateReducerImpl(hook, ((currentHook: any): Hook), reducer);
+}
+
+function updateReducerImpl<S, A>(
+  hook: Hook,
+  current: Hook,
+  reducer: (S, A) => S,
+): [S, Dispatch<A>] {
+  const queue = hook.queue;
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. You are likely calling Hooks conditionally, ' +
+        'which is not allowed. (https://react.dev/link/invalid-hook-call)',
+    );
+  }
+
+  queue.lastRenderedReducer = reducer;
+
+  // The last rebase update that is NOT part of the base state.
+  let baseQueue = hook.baseQueue;
+
+  // The last pending update that hasn't been processed yet.
+  const 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.
+      const baseFirst = baseQueue.next;
+      const pendingFirst = pendingQueue.next;
+      baseQueue.next = pendingFirst;
+      pendingQueue.next = baseFirst;
+    }
+    if (__DEV__) {
+      if (current.baseQueue !== baseQueue) {
+        // Internal invariant that should never happen, but feasibly could in
+        // the future if we implement resuming, or some form of that.
+        console.error(
+          'Internal error: Expected work-in-progress queue to be a clone. ' +
+            'This is a bug in React.',
+        );
+      }
+    }
+    current.baseQueue = baseQueue = pendingQueue;
+    queue.pending = null;
+  }
+
+  const baseState = hook.baseState;
+  if (baseQueue === null) {
+    // If there are no pending updates, then the memoized state should be the
+    // same as the base state. Currently these only diverge in the case of
+    // useOptimistic, because useOptimistic accepts a new baseState on
+    // every render.
+    hook.memoizedState = baseState;
+    // We don't need to call markWorkInProgressReceivedUpdate because
+    // baseState is derived from other reactive values.
+  } else {
+    // We have a queue to process.
+    const first = baseQueue.next;
+    let newState = baseState;
+
+    let newBaseState = null;
+    let newBaseQueueFirst = null;
+    let newBaseQueueLast: Update<S, A> | null = null;
+    let update = first;
+    let didReadFromEntangledAsyncAction = false;
+    do {
+      // An extra OffscreenLane bit is added to updates that were made to
+      // a hidden tree, so that we can distinguish them from updates that were
+      // already there when the tree was hidden.
+      const updateLane = removeLanes(update.lane, OffscreenLane);
+      const isHiddenUpdate = updateLane !== update.lane;
+
+      // Check if this update was made while the tree was hidden. If so, then
+      // it's not a "base" update and we should disregard the extra base lanes
+      // that were added to renderLanes when we entered the Offscreen tree.
+      let shouldSkipUpdate = isHiddenUpdate
+        ? !isSubsetOfLanes(getWorkInProgressRootRenderLanes(), updateLane)
+        : !isSubsetOfLanes(renderLanes, updateLane);
+
+      if (enableGestureTransition && updateLane === GestureLane) {
+        // This is a gesture optimistic update. It should only be considered as part of the
+        // rendered state while rendering the gesture lane and if the rendering the associated
+        // ScheduledGesture.
+        const scheduledGesture = update.gesture;
+        if (scheduledGesture !== null) {
+          if (scheduledGesture.count === 0 && !scheduledGesture.committing) {
+            // This gesture has already been cancelled. We can clean up this update.
+            update = update.next;
+            continue;
+          } else if (!isGestureRender(renderLanes)) {
+            shouldSkipUpdate = true;
+          } else {
+            const root: FiberRoot | null = getWorkInProgressRoot();
+            if (root === null) {
+              throw new Error(
+                'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+              );
+            }
+            // We assume that the currently rendering gesture is the one first in the queue.
+            shouldSkipUpdate = root.pendingGestures !== scheduledGesture;
+          }
+        }
+      }
+
+      if (shouldSkipUpdate) {
+        // 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<S, A> = {
+          lane: updateLane,
+          revertLane: update.revertLane,
+          gesture: update.gesture,
+          action: update.action,
+          hasEagerState: update.hasEagerState,
+          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.
+        // TODO: Don't need to accumulate this. Instead, we can remove
+        // renderLanes from the original lanes.
+        currentlyRenderingFiber.lanes = mergeLanes(
+          currentlyRenderingFiber.lanes,
+          updateLane,
+        );
+        markSkippedUpdateLanes(updateLane);
+      } else {
+        // This update does have sufficient priority.
+
+        // Check if this is an optimistic update.
+        const revertLane = update.revertLane;
+        if (revertLane === NoLane) {
+          // This is not an optimistic update, and we're going to apply it now.
+          // But, if there were earlier updates that were skipped, we need to
+          // leave this update in the queue so it can be rebased later.
+          if (newBaseQueueLast !== null) {
+            const clone: Update<S, A> = {
+              // This update is going to be committed so we never want uncommit
+              // it. Using NoLane works because 0 is a subset of all bitmasks, so
+              // this will never be skipped by the check above.
+              lane: NoLane,
+              revertLane: NoLane,
+              gesture: null,
+              action: update.action,
+              hasEagerState: update.hasEagerState,
+              eagerState: update.eagerState,
+              next: (null: any),
+            };
+            newBaseQueueLast = newBaseQueueLast.next = clone;
+          }
+
+          // Check if this update is part of a pending async action. If so,
+          // we'll need to suspend until the action has finished, so that it's
+          // batched together with future updates in the same action.
+          if (updateLane === peekEntangledActionLane()) {
+            didReadFromEntangledAsyncAction = true;
+          }
+        } else {
+          // This is an optimistic update. If the "revert" priority is
+          // sufficient, don't apply the update. Otherwise, apply the update,
+          // but leave it in the queue so it can be either reverted or
+          // rebased in a subsequent render.
+          if (isSubsetOfLanes(renderLanes, revertLane)) {
+            // The transition that this optimistic update is associated with
+            // has finished. Pretend the update doesn't exist by skipping
+            // over it.
+            update = update.next;
+
+            // Check if this update is part of a pending async action. If so,
+            // we'll need to suspend until the action has finished, so that it's
+            // batched together with future updates in the same action.
+            if (revertLane === peekEntangledActionLane()) {
+              didReadFromEntangledAsyncAction = true;
+            }
+            continue;
+          } else {
+            const clone: Update<S, A> = {
+              // Once we commit an optimistic update, we shouldn't uncommit it
+              // until the transition it is associated with has finished
+              // (represented by revertLane). Using NoLane here works because 0
+              // is a subset of all bitmasks, so this will never be skipped by
+              // the check above.
+              lane: NoLane,
+              // Reuse the same revertLane so we know when the transition
+              // has finished.
+              revertLane: update.revertLane,
+              gesture: null, // If it commits, it's no longer a gesture update.
+              action: update.action,
+              hasEagerState: update.hasEagerState,
+              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.
+            // TODO: Don't need to accumulate this. Instead, we can remove
+            // renderLanes from the original lanes.
+            currentlyRenderingFiber.lanes = mergeLanes(
+              currentlyRenderingFiber.lanes,
+              revertLane,
+            );
+            markSkippedUpdateLanes(revertLane);
+          }
+        }
+
+        // Process this update.
+        const action = update.action;
+        if (shouldDoubleInvokeUserFnsInHooksDEV) {
+          reducer(newState, action);
+        }
+        if (update.hasEagerState) {
+          // If this update is a state update (not a reducer) and was processed eagerly,
+          // we can use the eagerly computed state
+          newState = ((update.eagerState: any): S);
+        } else {
+          newState = reducer(newState, action);
+        }
+      }
+      update = update.next;
+    } while (update !== null && update !== first);
+
+    if (newBaseQueueLast === null) {
+      newBaseState = newState;
+    } else {
+      newBaseQueueLast.next = (newBaseQueueFirst: any);
+    }
+
+    // Mark that the fiber performed work, but only if the new state is
+    // different from the current state.
+    if (!is(newState, hook.memoizedState)) {
+      markWorkInProgressReceivedUpdate();
+
+      // Check if this update is part of a pending async action. If so, we'll
+      // need to suspend until the action has finished, so that it's batched
+      // together with future updates in the same action.
+      // TODO: Once we support hooks inside useMemo (or an equivalent
+      // memoization boundary like Forget), hoist this logic so that it only
+      // suspends if the memo boundary produces a new value.
+      if (didReadFromEntangledAsyncAction) {
+        const entangledActionThenable = peekEntangledActionThenable();
+        if (entangledActionThenable !== null) {
+          // TODO: Instead of the throwing the thenable directly, throw a
+          // special object like `use` does so we can detect if it's captured
+          // by userspace.
+          throw entangledActionThenable;
+        }
+      }
+    }
+
+    hook.memoizedState = newState;
+    hook.baseState = newBaseState;
+    hook.baseQueue = newBaseQueueLast;
+
+    queue.lastRenderedState = newState;
+  }
+
+  if (baseQueue === null) {
+    // `queue.lanes` is used for entangling transitions. We can set it back to
+    // zero once the queue is empty.
+    queue.lanes = NoLanes;
+  }
+
+  const dispatch: Dispatch<A> = (queue.dispatch: any);
+  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;
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. You are likely calling Hooks conditionally, ' +
+        'which is not allowed. (https://react.dev/link/invalid-hook-call)',
+    );
+  }
+
+  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 mountSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  const fiber = currentlyRenderingFiber;
+  const hook = mountWorkInProgressHook();
+
+  let nextSnapshot;
+  const isHydrating = getIsHydrating();
+  if (isHydrating) {
+    if (getServerSnapshot === undefined) {
+      throw new Error(
+        'Missing getServerSnapshot, which is required for ' +
+          'server-rendered content. Will revert to client rendering.',
+      );
+    }
+    nextSnapshot = getServerSnapshot();
+    if (__DEV__) {
+      if (!didWarnUncachedGetSnapshot) {
+        if (nextSnapshot !== getServerSnapshot()) {
+          console.error(
+            'The result of getServerSnapshot should be cached to avoid an infinite loop',
+          );
+          didWarnUncachedGetSnapshot = true;
+        }
+      }
+    }
+  } else {
+    nextSnapshot = getSnapshot();
+    if (__DEV__) {
+      if (!didWarnUncachedGetSnapshot) {
+        const cachedSnapshot = getSnapshot();
+        if (!is(nextSnapshot, cachedSnapshot)) {
+          console.error(
+            'The result of getSnapshot should be cached to avoid an infinite loop',
+          );
+          didWarnUncachedGetSnapshot = true;
+        }
+      }
+    }
+    // Unless we're rendering a blocking lane, schedule a consistency check.
+    // Right before committing, we will walk the tree and check if any of the
+    // stores were mutated.
+    //
+    // We won't do this if we're hydrating server-rendered content, because if
+    // the content is stale, it's already visible anyway. Instead we'll patch
+    // it up in a passive effect.
+    const root: FiberRoot | null = getWorkInProgressRoot();
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
+    const rootRenderLanes = getWorkInProgressRootRenderLanes();
+    if (!includesBlockingLane(rootRenderLanes)) {
+      pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
+    }
+  }
+
+  // Read the current snapshot from the store on every render. This breaks the
+  // normal rules of React, and only works because store updates are
+  // always synchronous.
+  hook.memoizedState = nextSnapshot;
+  const inst: StoreInstance<T> = {
+    value: nextSnapshot,
+    getSnapshot,
+  };
+  hook.queue = inst;
+
+  // Schedule an effect to subscribe to the store.
+  mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
+
+  // Schedule an effect to update the mutable instance fields. We will update
+  // this whenever subscribe, getSnapshot, or value changes. Because there's no
+  // clean-up function, and we track the deps correctly, we can call pushEffect
+  // directly, without storing any additional state. For the same reason, we
+  // don't need to set a static flag, either.
+  fiber.flags |= PassiveEffect;
+  pushSimpleEffect(
+    HookHasEffect | HookPassive,
+    createEffectInstance(),
+    updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
+    null,
+  );
+
+  return nextSnapshot;
+}
+
+function updateSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  const fiber = currentlyRenderingFiber;
+  const hook = updateWorkInProgressHook();
+  // Read the current snapshot from the store on every render. This breaks the
+  // normal rules of React, and only works because store updates are
+  // always synchronous.
+  let nextSnapshot;
+  const isHydrating = getIsHydrating();
+  if (isHydrating) {
+    // Needed for strict mode double render
+    if (getServerSnapshot === undefined) {
+      throw new Error(
+        'Missing getServerSnapshot, which is required for ' +
+          'server-rendered content. Will revert to client rendering.',
+      );
+    }
+    nextSnapshot = getServerSnapshot();
+  } else {
+    nextSnapshot = getSnapshot();
+    if (__DEV__) {
+      if (!didWarnUncachedGetSnapshot) {
+        const cachedSnapshot = getSnapshot();
+        if (!is(nextSnapshot, cachedSnapshot)) {
+          console.error(
+            'The result of getSnapshot should be cached to avoid an infinite loop',
+          );
+          didWarnUncachedGetSnapshot = true;
+        }
+      }
+    }
+  }
+  const prevSnapshot = (currentHook || hook).memoizedState;
+  const snapshotChanged = !is(prevSnapshot, nextSnapshot);
+  if (snapshotChanged) {
+    hook.memoizedState = nextSnapshot;
+    markWorkInProgressReceivedUpdate();
+  }
+  const inst = hook.queue;
+
+  updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [
+    subscribe,
+  ]);
+
+  // Whenever getSnapshot or subscribe changes, we need to check in the
+  // commit phase if there was an interleaved mutation. In concurrent mode
+  // this can happen all the time, but even in synchronous mode, an earlier
+  // effect may have mutated the store.
+  if (
+    inst.getSnapshot !== getSnapshot ||
+    snapshotChanged ||
+    // Check if the subscribe function changed. We can save some memory by
+    // checking whether we scheduled a subscription effect above.
+    (workInProgressHook !== null &&
+      workInProgressHook.memoizedState.tag & HookHasEffect)
+  ) {
+    fiber.flags |= PassiveEffect;
+    pushSimpleEffect(
+      HookHasEffect | HookPassive,
+      createEffectInstance(),
+      updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
+      null,
+    );
+
+    // Unless we're rendering a blocking lane, schedule a consistency check.
+    // Right before committing, we will walk the tree and check if any of the
+    // stores were mutated.
+    const root: FiberRoot | null = getWorkInProgressRoot();
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
+    if (!isHydrating && !includesBlockingLane(renderLanes)) {
+      pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
+    }
+  }
+
+  return nextSnapshot;
+}
+
+function pushStoreConsistencyCheck<T>(
+  fiber: Fiber,
+  getSnapshot: () => T,
+  renderedSnapshot: T,
+): void {
+  fiber.flags |= StoreConsistency;
+  const check: StoreConsistencyCheck<T> = {
+    getSnapshot,
+    value: renderedSnapshot,
+  };
+  let componentUpdateQueue: null | FunctionComponentUpdateQueue =
+    (currentlyRenderingFiber.updateQueue: any);
+  if (componentUpdateQueue === null) {
+    componentUpdateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
+    componentUpdateQueue.stores = [check];
+  } else {
+    const stores = componentUpdateQueue.stores;
+    if (stores === null) {
+      componentUpdateQueue.stores = [check];
+    } else {
+      stores.push(check);
+    }
+  }
+}
+
+function updateStoreInstance<T>(
+  fiber: Fiber,
+  inst: StoreInstance<T>,
+  nextSnapshot: T,
+  getSnapshot: () => T,
+): void {
+  // These are updated in the passive phase
+  inst.value = nextSnapshot;
+  inst.getSnapshot = getSnapshot;
+
+  // Something may have been mutated in between render and commit. This could
+  // have been in an event that fired before the passive effects, or it could
+  // have been in a layout effect. In that case, we would have used the old
+  // snapsho and getSnapshot values to bail out. We need to check one more time.
+  if (checkIfSnapshotChanged(inst)) {
+    // Force a re-render.
+    // We intentionally don't log update times and stacks here because this
+    // was not an external trigger but rather an internal one.
+    forceStoreRerender(fiber);
+  }
+}
+
+function subscribeToStore<T>(
+  fiber: Fiber,
+  inst: StoreInstance<T>,
+  subscribe: (() => void) => () => void,
+): any {
+  const handleStoreChange = () => {
+    // The store changed. Check if the snapshot changed since the last time we
+    // read from the store.
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      startUpdateTimerByLane(SyncLane, 'updateSyncExternalStore()', fiber);
+      forceStoreRerender(fiber);
+    }
+  };
+  // Subscribe to the store and return a clean-up function.
+  return subscribe(handleStoreChange);
+}
+
+function checkIfSnapshotChanged<T>(inst: StoreInstance<T>): boolean {
+  const latestGetSnapshot = inst.getSnapshot;
+  const prevValue = inst.value;
+  try {
+    const nextValue = latestGetSnapshot();
+    return !is(prevValue, nextValue);
+  } catch (error) {
+    return true;
+  }
+}
+
+function forceStoreRerender(fiber: Fiber) {
+  const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+  if (root !== null) {
+    scheduleUpdateOnFiber(root, fiber, SyncLane);
+  }
+}
+
+function mountStateImpl<S>(initialState: (() => S) | S): Hook {
+  const hook = mountWorkInProgressHook();
+  if (typeof initialState === 'function') {
+    const initialStateInitializer = initialState;
+    // $FlowFixMe[incompatible-use]: Flow doesn't like mixed types
+    initialState = initialStateInitializer();
+    if (shouldDoubleInvokeUserFnsInHooksDEV) {
+      setIsStrictModeForDevtools(true);
+      try {
+        // $FlowFixMe[incompatible-use]: Flow doesn't like mixed types
+        initialStateInitializer();
+      } finally {
+        setIsStrictModeForDevtools(false);
+      }
+    }
+  }
+  hook.memoizedState = hook.baseState = initialState;
+  const queue: UpdateQueue<S, BasicStateAction<S>> = {
+    pending: null,
+    lanes: NoLanes,
+    dispatch: null,
+    lastRenderedReducer: basicStateReducer,
+    lastRenderedState: (initialState: any),
+  };
+  hook.queue = queue;
+  return hook;
+}
+
+function mountState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  const hook = mountStateImpl(initialState);
+  const queue = hook.queue;
+  const dispatch: Dispatch<BasicStateAction<S>> = (dispatchSetState.bind(
+    null,
+    currentlyRenderingFiber,
+    queue,
+  ): any);
+  queue.dispatch = dispatch;
+  return [hook.memoizedState, dispatch];
+}
+
+function updateState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  return updateReducer(basicStateReducer, initialState);
+}
+
+function rerenderState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  return rerenderReducer(basicStateReducer, initialState);
+}
+
+function mountOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = hook.baseState = passthrough;
+  const queue: UpdateQueue<S, A> = {
+    pending: null,
+    lanes: NoLanes,
+    dispatch: null,
+    // Optimistic state does not use the eager update optimization.
+    lastRenderedReducer: null,
+    lastRenderedState: null,
+  };
+  hook.queue = queue;
+  // This is different than the normal setState function.
+  const dispatch: A => void = (dispatchOptimisticSetState.bind(
+    null,
+    currentlyRenderingFiber,
+    true,
+    queue,
+  ): any);
+  queue.dispatch = dispatch;
+  return [passthrough, dispatch];
+}
+
+function updateOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  const hook = updateWorkInProgressHook();
+  return updateOptimisticImpl(
+    hook,
+    ((currentHook: any): Hook),
+    passthrough,
+    reducer,
+  );
+}
+
+function updateOptimisticImpl<S, A>(
+  hook: Hook,
+  current: Hook | null,
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  // Optimistic updates are always rebased on top of the latest value passed in
+  // as an argument. It's called a passthrough because if there are no pending
+  // updates, it will be returned as-is.
+  //
+  // Reset the base state to the passthrough. Future updates will be applied
+  // on top of this.
+  hook.baseState = passthrough;
+
+  // If a reducer is not provided, default to the same one used by useState.
+  const resolvedReducer: (S, A) => S =
+    typeof reducer === 'function' ? reducer : (basicStateReducer: any);
+
+  return updateReducerImpl(hook, ((currentHook: any): Hook), resolvedReducer);
+}
+
+function rerenderOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  // Unlike useState, useOptimistic doesn't support render phase updates.
+  // Also unlike useState, we need to replay all pending updates again in case
+  // the passthrough value changed.
+  //
+  // So instead of a forked re-render implementation that knows how to handle
+  // render phase udpates, we can use the same implementation as during a
+  // regular mount or update.
+  const hook = updateWorkInProgressHook();
+
+  if (currentHook !== null) {
+    // This is an update. Process the update queue.
+    return updateOptimisticImpl(
+      hook,
+      ((currentHook: any): Hook),
+      passthrough,
+      reducer,
+    );
+  }
+
+  // This is a mount. No updates to process.
+
+  // Reset the base state to the passthrough. Future updates will be applied
+  // on top of this.
+  hook.baseState = passthrough;
+  const dispatch = hook.queue.dispatch;
+  return [passthrough, dispatch];
+}
+
+// useActionState actions run sequentially, because each action receives the
+// previous state as an argument. We store pending actions on a queue.
+type ActionStateQueue<S, P> = {
+  // This is the most recent state returned from an action. It's updated as
+  // soon as the action finishes running.
+  state: Awaited<S>,
+  // A stable dispatch method, passed to the user.
+  dispatch: Dispatch<P>,
+  // This is the most recent action function that was rendered. It's updated
+  // during the commit phase.
+  // If it's null, it means the action queue errored and subsequent actions
+  // should not run.
+  action: ((Awaited<S>, P) => S) | null,
+  // This is a circular linked list of pending action payloads. It incudes the
+  // action that is currently running.
+  pending: ActionStateQueueNode<S, P> | null,
+};
+
+type ActionStateQueueNode<S, P> = {
+  payload: P,
+  // This is the action implementation at the time it was dispatched.
+  action: (Awaited<S>, P) => S,
+  // This is never null because it's part of a circular linked list.
+  next: ActionStateQueueNode<S, P>,
+
+  // Whether or not the action was dispatched as part of a transition. We use
+  // this to restore the transition context when the queued action is run. Once
+  // we're able to track parallel async actions, this should be updated to
+  // represent the specific transition instance the action is associated with.
+  isTransition: boolean,
+
+  // Implements the Thenable interface. We use it to suspend until the action
+  // finishes.
+  then: (listener: () => void) => void,
+  status: 'pending' | 'rejected' | 'fulfilled',
+  value: any,
+  reason: any,
+  listeners: Array<() => void>,
+};
+
+function dispatchActionState<S, P>(
+  fiber: Fiber,
+  actionQueue: ActionStateQueue<S, P>,
+  setPendingState: boolean => void,
+  setState: Dispatch<ActionStateQueueNode<S, P>>,
+  payload: P,
+): void {
+  if (isRenderPhaseUpdate(fiber)) {
+    throw new Error('Cannot update form state while rendering.');
+  }
+
+  const currentAction = actionQueue.action;
+  if (currentAction === null) {
+    // An earlier action errored. Subsequent actions should not run.
+    return;
+  }
+
+  const actionNode: ActionStateQueueNode<S, P> = {
+    payload,
+    action: currentAction,
+    next: (null: any), // circular
+
+    isTransition: true,
+
+    status: 'pending',
+    value: null,
+    reason: null,
+    listeners: [],
+    then(listener) {
+      // We know the only thing that subscribes to these promises is `use` so
+      // this implementation is simpler than a generic thenable. E.g. we don't
+      // bother to check if the thenable is still pending because `use` already
+      // does that.
+      actionNode.listeners.push(listener);
+    },
+  };
+
+  // Check if we're inside a transition. If so, we'll need to restore the
+  // transition context when the action is run.
+  const prevTransition = ReactSharedInternals.T;
+  if (prevTransition !== null) {
+    // Optimistically update the pending state, similar to useTransition.
+    // This will be reverted automatically when all actions are finished.
+    setPendingState(true);
+    // `actionNode` is a thenable that resolves to the return value of
+    // the action.
+    setState(actionNode);
+  } else {
+    // This is not a transition.
+    actionNode.isTransition = false;
+    setState(actionNode);
+  }
+
+  const last = actionQueue.pending;
+  if (last === null) {
+    // There are no pending actions; this is the first one. We can run
+    // it immediately.
+    actionNode.next = actionQueue.pending = actionNode;
+    runActionStateAction(actionQueue, actionNode);
+  } else {
+    // There's already an action running. Add to the queue.
+    const first = last.next;
+    actionNode.next = first;
+    actionQueue.pending = last.next = actionNode;
+  }
+}
+
+function runActionStateAction<S, P>(
+  actionQueue: ActionStateQueue<S, P>,
+  node: ActionStateQueueNode<S, P>,
+) {
+  // `node.action` represents the action function at the time it was dispatched.
+  // If this action was queued, it might be stale, i.e. it's not necessarily the
+  // most current implementation of the action, stored on `actionQueue`. This is
+  // intentional. The conceptual model for queued actions is that they are
+  // queued in a remote worker; the dispatch happens immediately, only the
+  // execution is delayed.
+  const action = node.action;
+  const payload = node.payload;
+  const prevState = actionQueue.state;
+
+  if (node.isTransition) {
+    // The original dispatch was part of a transition. We restore its
+    // transition context here.
+
+    // This is a fork of startTransition
+    const prevTransition = ReactSharedInternals.T;
+    const currentTransition: Transition = ({}: any);
+    if (enableViewTransition) {
+      currentTransition.types =
+        prevTransition !== null
+          ? // If we're a nested transition, we should use the same set as the parent
+            // since we're conceptually always joined into the same entangled transition.
+            // In practice, this only matters if we add transition types in the inner
+            // without setting state. In that case, the inner transition can finish
+            // without waiting for the outer.
+            prevTransition.types
+          : null;
+    }
+    if (enableGestureTransition) {
+      currentTransition.gesture = null;
+    }
+    if (enableTransitionTracing) {
+      currentTransition.name = null;
+      currentTransition.startTime = -1;
+    }
+    if (__DEV__) {
+      currentTransition._updatedFibers = new Set();
+    }
+    ReactSharedInternals.T = currentTransition;
+    try {
+      const returnValue = action(prevState, payload);
+      const onStartTransitionFinish = ReactSharedInternals.S;
+      if (onStartTransitionFinish !== null) {
+        onStartTransitionFinish(currentTransition, returnValue);
+      }
+      handleActionReturnValue(actionQueue, node, returnValue);
+    } catch (error) {
+      onActionError(actionQueue, node, error);
+    } finally {
+      if (prevTransition !== null && currentTransition.types !== null) {
+        // If we created a new types set in the inner transition, we transfer it to the parent
+        // since they should share the same set. They're conceptually entangled.
+        if (__DEV__) {
+          if (
+            prevTransition.types !== null &&
+            prevTransition.types !== currentTransition.types
+          ) {
+            // Just assert that assumption holds that we're not overriding anything.
+            console.error(
+              'We expected inner Transitions to have transferred the outer types set and ' +
+                'that you cannot add to the outer Transition while inside the inner.' +
+                'This is a bug in React.',
+            );
+          }
+        }
+        prevTransition.types = currentTransition.types;
+      }
+      ReactSharedInternals.T = prevTransition;
+
+      if (__DEV__) {
+        if (prevTransition === null && currentTransition._updatedFibers) {
+          const updatedFibersCount = currentTransition._updatedFibers.size;
+          currentTransition._updatedFibers.clear();
+          if (updatedFibersCount > 10) {
+            console.warn(
+              'Detected a large number of updates inside startTransition. ' +
+                'If this is due to a subscription please re-write it to use React provided hooks. ' +
+                'Otherwise concurrent mode guarantees are off the table.',
+            );
+          }
+        }
+      }
+    }
+  } else {
+    // The original dispatch was not part of a transition.
+    try {
+      const returnValue = action(prevState, payload);
+      handleActionReturnValue(actionQueue, node, returnValue);
+    } catch (error) {
+      onActionError(actionQueue, node, error);
+    }
+  }
+}
+
+function handleActionReturnValue<S, P>(
+  actionQueue: ActionStateQueue<S, P>,
+  node: ActionStateQueueNode<S, P>,
+  returnValue: mixed,
+) {
+  if (
+    returnValue !== null &&
+    typeof returnValue === 'object' &&
+    // $FlowFixMe[method-unbinding]
+    typeof returnValue.then === 'function'
+  ) {
+    const thenable = ((returnValue: any): Thenable<Awaited<S>>);
+    if (__DEV__) {
+      // Keep track of the number of async transitions still running so we can warn.
+      ReactSharedInternals.asyncTransitions++;
+      thenable.then(releaseAsyncTransition, releaseAsyncTransition);
+    }
+    // Attach a listener to read the return state of the action. As soon as
+    // this resolves, we can run the next action in the sequence.
+    thenable.then(
+      (nextState: Awaited<S>) => {
+        onActionSuccess(actionQueue, node, nextState);
+      },
+      (error: mixed) => onActionError(actionQueue, node, error),
+    );
+
+    if (__DEV__) {
+      if (!node.isTransition) {
+        console.error(
+          'An async function with useActionState was called outside of a transition. ' +
+            'This is likely not what you intended (for example, isPending will not update ' +
+            'correctly). Either call the returned function inside startTransition, or pass it ' +
+            'to an `action` or `formAction` prop.',
+        );
+      }
+    }
+  } else {
+    const nextState = ((returnValue: any): Awaited<S>);
+    onActionSuccess(actionQueue, node, nextState);
+  }
+}
+
+function onActionSuccess<S, P>(
+  actionQueue: ActionStateQueue<S, P>,
+  actionNode: ActionStateQueueNode<S, P>,
+  nextState: Awaited<S>,
+) {
+  // The action finished running.
+  actionNode.status = 'fulfilled';
+  actionNode.value = nextState;
+  notifyActionListeners(actionNode);
+
+  actionQueue.state = nextState;
+
+  // Pop the action from the queue and run the next pending action, if there
+  // are any.
+  const last = actionQueue.pending;
+  if (last !== null) {
+    const first = last.next;
+    if (first === last) {
+      // This was the last action in the queue.
+      actionQueue.pending = null;
+    } else {
+      // Remove the first node from the circular queue.
+      const next = first.next;
+      last.next = next;
+
+      // Run the next action.
+      runActionStateAction(actionQueue, next);
+    }
+  }
+}
+
+function onActionError<S, P>(
+  actionQueue: ActionStateQueue<S, P>,
+  actionNode: ActionStateQueueNode<S, P>,
+  error: mixed,
+) {
+  // Mark all the following actions as rejected.
+  const last = actionQueue.pending;
+  actionQueue.pending = null;
+  if (last !== null) {
+    const first = last.next;
+    do {
+      actionNode.status = 'rejected';
+      actionNode.reason = error;
+      notifyActionListeners(actionNode);
+      actionNode = actionNode.next;
+    } while (actionNode !== first);
+  }
+
+  // Prevent subsequent actions from being dispatched.
+  actionQueue.action = null;
+}
+
+function notifyActionListeners<S, P>(actionNode: ActionStateQueueNode<S, P>) {
+  // Notify React that the action has finished.
+  const listeners = actionNode.listeners;
+  for (let i = 0; i < listeners.length; i++) {
+    // This is always a React internal listener, so we don't need to worry
+    // about it throwing.
+    const listener = listeners[i];
+    listener();
+  }
+}
+
+function actionStateReducer<S>(oldState: S, newState: S): S {
+  return newState;
+}
+
+function mountActionState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialStateProp: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  let initialState: Awaited<S> = initialStateProp;
+  if (getIsHydrating()) {
+    const root: FiberRoot = (getWorkInProgressRoot(): any);
+    const ssrFormState = root.formState;
+    // If a formState option was passed to the root, there are form state
+    // markers that we need to hydrate. These indicate whether the form state
+    // matches this hook instance.
+    if (ssrFormState !== null) {
+      const isMatching = tryToClaimNextHydratableFormMarkerInstance(
+        currentlyRenderingFiber,
+      );
+      if (isMatching) {
+        initialState = ssrFormState[0];
+      }
+    }
+  }
+
+  // State hook. The state is stored in a thenable which is then unwrapped by
+  // the `use` algorithm during render.
+  const stateHook = mountWorkInProgressHook();
+  stateHook.memoizedState = stateHook.baseState = initialState;
+  // TODO: Typing this "correctly" results in recursion limit errors
+  // const stateQueue: UpdateQueue<S | Awaited<S>, S | Awaited<S>> = {
+  const stateQueue = {
+    pending: null,
+    lanes: NoLanes,
+    dispatch: (null: any),
+    lastRenderedReducer: actionStateReducer,
+    lastRenderedState: initialState,
+  };
+  stateHook.queue = stateQueue;
+  const setState: Dispatch<S | Awaited<S>> = (dispatchSetState.bind(
+    null,
+    currentlyRenderingFiber,
+    ((stateQueue: any): UpdateQueue<S | Awaited<S>, S | Awaited<S>>),
+  ): any);
+  stateQueue.dispatch = setState;
+
+  // Pending state. This is used to store the pending state of the action.
+  // Tracked optimistically, like a transition pending state.
+  const pendingStateHook = mountStateImpl((false: Thenable<boolean> | boolean));
+  const setPendingState: boolean => void = (dispatchOptimisticSetState.bind(
+    null,
+    currentlyRenderingFiber,
+    false,
+    ((pendingStateHook.queue: any): UpdateQueue<
+      S | Awaited<S>,
+      S | Awaited<S>,
+    >),
+  ): any);
+
+  // Action queue hook. This is used to queue pending actions. The queue is
+  // shared between all instances of the hook. Similar to a regular state queue,
+  // but different because the actions are run sequentially, and they run in
+  // an event instead of during render.
+  const actionQueueHook = mountWorkInProgressHook();
+  const actionQueue: ActionStateQueue<S, P> = {
+    state: initialState,
+    dispatch: (null: any), // circular
+    action,
+    pending: null,
+  };
+  actionQueueHook.queue = actionQueue;
+  const dispatch = (dispatchActionState: any).bind(
+    null,
+    currentlyRenderingFiber,
+    actionQueue,
+    setPendingState,
+    setState,
+  );
+  actionQueue.dispatch = dispatch;
+
+  // Stash the action function on the memoized state of the hook. We'll use this
+  // to detect when the action function changes so we can update it in
+  // an effect.
+  actionQueueHook.memoizedState = action;
+
+  return [initialState, dispatch, false];
+}
+
+function updateActionState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  const stateHook = updateWorkInProgressHook();
+  const currentStateHook = ((currentHook: any): Hook);
+  return updateActionStateImpl(
+    stateHook,
+    currentStateHook,
+    action,
+    initialState,
+    permalink,
+  );
+}
+
+function updateActionStateImpl<S, P>(
+  stateHook: Hook,
+  currentStateHook: Hook,
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  const [actionResult] = updateReducerImpl<S | Thenable<S>, S | Thenable<S>>(
+    stateHook,
+    currentStateHook,
+    actionStateReducer,
+  );
+
+  const [isPending] = updateState(false);
+
+  // This will suspend until the action finishes.
+  let state: Awaited<S>;
+  if (
+    typeof actionResult === 'object' &&
+    actionResult !== null &&
+    // $FlowFixMe[method-unbinding]
+    typeof actionResult.then === 'function'
+  ) {
+    try {
+      state = useThenable(((actionResult: any): Thenable<Awaited<S>>));
+    } catch (x) {
+      if (x === SuspenseException) {
+        // If we Suspend here, mark this separately so that we can track this
+        // as an Action in Profiling tools.
+        throw SuspenseActionException;
+      } else {
+        throw x;
+      }
+    }
+  } else {
+    state = (actionResult: any);
+  }
+
+  const actionQueueHook = updateWorkInProgressHook();
+  const actionQueue = actionQueueHook.queue;
+  const dispatch = actionQueue.dispatch;
+
+  // Check if a new action was passed. If so, update it in an effect.
+  const prevAction = actionQueueHook.memoizedState;
+  if (action !== prevAction) {
+    currentlyRenderingFiber.flags |= PassiveEffect;
+    pushSimpleEffect(
+      HookHasEffect | HookPassive,
+      createEffectInstance(),
+      actionStateActionEffect.bind(null, actionQueue, action),
+      null,
+    );
+  }
+
+  return [state, dispatch, isPending];
+}
+
+function actionStateActionEffect<S, P>(
+  actionQueue: ActionStateQueue<S, P>,
+  action: (Awaited<S>, P) => S,
+): void {
+  actionQueue.action = action;
+}
+
+function rerenderActionState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  // Unlike useState, useActionState doesn't support render phase updates.
+  // Also unlike useState, we need to replay all pending updates again in case
+  // the passthrough value changed.
+  //
+  // So instead of a forked re-render implementation that knows how to handle
+  // render phase udpates, we can use the same implementation as during a
+  // regular mount or update.
+  const stateHook = updateWorkInProgressHook();
+  const currentStateHook = currentHook;
+
+  if (currentStateHook !== null) {
+    // This is an update. Process the update queue.
+    return updateActionStateImpl(
+      stateHook,
+      currentStateHook,
+      action,
+      initialState,
+      permalink,
+    );
+  }
+
+  updateWorkInProgressHook(); // State
+
+  // This is a mount. No updates to process.
+  const state: Awaited<S> = stateHook.memoizedState;
+
+  const actionQueueHook = updateWorkInProgressHook();
+  const actionQueue = actionQueueHook.queue;
+  const dispatch = actionQueue.dispatch;
+
+  // This may have changed during the rerender.
+  actionQueueHook.memoizedState = action;
+
+  // For mount, pending is always false.
+  return [state, dispatch, false];
+}
+
+function pushSimpleEffect(
+  tag: HookFlags,
+  inst: EffectInstance,
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): Effect {
+  const effect: Effect = {
+    tag,
+    create,
+    deps,
+    inst,
+    // Circular
+    next: (null: any),
+  };
+  return pushEffectImpl(effect);
+}
+
+function pushEffectImpl(effect: Effect): Effect {
+  let componentUpdateQueue: null | FunctionComponentUpdateQueue =
+    (currentlyRenderingFiber.updateQueue: any);
+  if (componentUpdateQueue === null) {
+    componentUpdateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
+  }
+  const lastEffect = componentUpdateQueue.lastEffect;
+  if (lastEffect === null) {
+    componentUpdateQueue.lastEffect = effect.next = effect;
+  } else {
+    const firstEffect = lastEffect.next;
+    lastEffect.next = effect;
+    effect.next = firstEffect;
+    componentUpdateQueue.lastEffect = effect;
+  }
+  return effect;
+}
+
+function createEffectInstance(): EffectInstance {
+  return {destroy: undefined};
+}
+
+function mountRef<T>(initialValue: T): {current: T} {
+  const hook = mountWorkInProgressHook();
+  const ref = {current: initialValue};
+  hook.memoizedState = ref;
+  return ref;
+}
+
+function updateRef<T>(initialValue: T): {current: T} {
+  const hook = updateWorkInProgressHook();
+  return hook.memoizedState;
+}
+
+function mountEffectImpl(
+  fiberFlags: Flags,
+  hookFlags: HookFlags,
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  const hook = mountWorkInProgressHook();
+  const nextDeps = deps === undefined ? null : deps;
+  currentlyRenderingFiber.flags |= fiberFlags;
+  hook.memoizedState = pushSimpleEffect(
+    HookHasEffect | hookFlags,
+    createEffectInstance(),
+    create,
+    nextDeps,
+  );
+}
+
+function updateEffectImpl(
+  fiberFlags: Flags,
+  hookFlags: HookFlags,
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  const hook = updateWorkInProgressHook();
+  const nextDeps = deps === undefined ? null : deps;
+  const effect: Effect = hook.memoizedState;
+  const inst = effect.inst;
+
+  // currentHook is null on initial mount when rerendering after a render phase
+  // state update or for strict mode.
+  if (currentHook !== null) {
+    if (nextDeps !== null) {
+      const prevEffect: Effect = currentHook.memoizedState;
+      const prevDeps = prevEffect.deps;
+      // $FlowFixMe[incompatible-call] (@poteto)
+      if (areHookInputsEqual(nextDeps, prevDeps)) {
+        hook.memoizedState = pushSimpleEffect(
+          hookFlags,
+          inst,
+          create,
+          nextDeps,
+        );
+        return;
+      }
+    }
+  }
+
+  currentlyRenderingFiber.flags |= fiberFlags;
+
+  hook.memoizedState = pushSimpleEffect(
+    HookHasEffect | hookFlags,
+    inst,
+    create,
+    nextDeps,
+  );
+}
+
+function mountEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  if (
+    __DEV__ &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
+  ) {
+    mountEffectImpl(
+      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  } else {
+    mountEffectImpl(
+      PassiveEffect | PassiveStaticEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  }
+}
+
+function updateEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  updateEffectImpl(PassiveEffect, HookPassive, create, deps);
+}
+
+function useEffectEventImpl<Args, Return, F: (...Array<Args>) => Return>(
+  payload: EventFunctionPayload<Args, Return, F>,
+) {
+  currentlyRenderingFiber.flags |= UpdateEffect;
+  let componentUpdateQueue: null | FunctionComponentUpdateQueue =
+    (currentlyRenderingFiber.updateQueue: any);
+  if (componentUpdateQueue === null) {
+    componentUpdateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
+    componentUpdateQueue.events = [payload];
+  } else {
+    const events = componentUpdateQueue.events;
+    if (events === null) {
+      componentUpdateQueue.events = [payload];
+    } else {
+      events.push(payload);
+    }
+  }
+}
+
+function mountEvent<Args, Return, F: (...Array<Args>) => Return>(
+  callback: F,
+): F {
+  const hook = mountWorkInProgressHook();
+  const ref = {impl: callback};
+  hook.memoizedState = ref;
+  // $FlowIgnore[incompatible-return]
+  return function eventFn() {
+    if (isInvalidExecutionContextForEventFunction()) {
+      throw new Error(
+        "A function wrapped in useEffectEvent can't be called during rendering.",
+      );
+    }
+    return ref.impl.apply(undefined, arguments);
+  };
+}
+
+function updateEvent<Args, Return, F: (...Array<Args>) => Return>(
+  callback: F,
+): F {
+  const hook = updateWorkInProgressHook();
+  const ref = hook.memoizedState;
+  useEffectEventImpl({ref, nextImpl: callback});
+  // $FlowIgnore[incompatible-return]
+  return function eventFn() {
+    if (isInvalidExecutionContextForEventFunction()) {
+      throw new Error(
+        "A function wrapped in useEffectEvent can't be called during rendering.",
+      );
+    }
+    return ref.impl.apply(undefined, arguments);
+  };
+}
+
+function mountInsertionEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  mountEffectImpl(UpdateEffect, HookInsertion, create, deps);
+}
+
+function updateInsertionEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  return updateEffectImpl(UpdateEffect, HookInsertion, create, deps);
+}
+
+function mountLayoutEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
+  if (
+    __DEV__ &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
+  ) {
+    fiberFlags |= MountLayoutDevEffect;
+  }
+  return mountEffectImpl(fiberFlags, HookLayout, create, deps);
+}
+
+function updateLayoutEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  return updateEffectImpl(UpdateEffect, HookLayout, create, deps);
+}
+
+function imperativeHandleEffect<T>(
+  create: () => T,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+): void | (() => void) {
+  if (typeof ref === 'function') {
+    const refCallback = ref;
+    const inst = create();
+    const refCleanup = refCallback(inst);
+    return () => {
+      if (typeof refCleanup === 'function') {
+        // $FlowFixMe[incompatible-use] we need to assume no parameters
+        refCleanup();
+      } else {
+        refCallback(null);
+      }
+    };
+  } else if (ref !== null && ref !== undefined) {
+    const refObject = ref;
+    if (__DEV__) {
+      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;
+    return () => {
+      refObject.current = null;
+    };
+  }
+}
+
+function mountImperativeHandle<T>(
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  create: () => T,
+  deps: Array<mixed> | void | null,
+): void {
+  if (__DEV__) {
+    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?
+  const effectDeps =
+    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
+
+  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
+  if (
+    __DEV__ &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
+  ) {
+    fiberFlags |= MountLayoutDevEffect;
+  }
+  mountEffectImpl(
+    fiberFlags,
+    HookLayout,
+    imperativeHandleEffect.bind(null, create, ref),
+    effectDeps,
+  );
+}
+
+function updateImperativeHandle<T>(
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  create: () => T,
+  deps: Array<mixed> | void | null,
+): void {
+  if (__DEV__) {
+    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?
+  const effectDeps =
+    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
+
+  updateEffectImpl(
+    UpdateEffect,
+    HookLayout,
+    imperativeHandleEffect.bind(null, create, ref),
+    effectDeps,
+  );
+}
+
+function mountDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+  // This hook is normally a no-op.
+  // The react-debug-hooks package injects its own implementation
+  // so that e.g. DevTools can display custom hook values.
+}
+
+const updateDebugValue = mountDebugValue;
+
+function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+  const hook = mountWorkInProgressHook();
+  const nextDeps = deps === undefined ? null : deps;
+  hook.memoizedState = [callback, nextDeps];
+  return callback;
+}
+
+function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+  const hook = updateWorkInProgressHook();
+  const nextDeps = deps === undefined ? null : deps;
+  const prevState = hook.memoizedState;
+  if (nextDeps !== null) {
+    const prevDeps: Array<mixed> | null = prevState[1];
+    if (areHookInputsEqual(nextDeps, prevDeps)) {
+      return prevState[0];
+    }
+  }
+  hook.memoizedState = [callback, nextDeps];
+  return callback;
+}
+
+function mountMemo<T>(
+  nextCreate: () => T,
+  deps: Array<mixed> | void | null,
+): T {
+  const hook = mountWorkInProgressHook();
+  const nextDeps = deps === undefined ? null : deps;
+  const nextValue = nextCreate();
+  if (shouldDoubleInvokeUserFnsInHooksDEV) {
+    setIsStrictModeForDevtools(true);
+    try {
+      nextCreate();
+    } finally {
+      setIsStrictModeForDevtools(false);
+    }
+  }
+  hook.memoizedState = [nextValue, nextDeps];
+  return nextValue;
+}
+
+function updateMemo<T>(
+  nextCreate: () => T,
+  deps: Array<mixed> | void | null,
+): T {
+  const hook = updateWorkInProgressHook();
+  const nextDeps = deps === undefined ? null : deps;
+  const prevState = hook.memoizedState;
+  // Assume these are defined. If they're not, areHookInputsEqual will warn.
+  if (nextDeps !== null) {
+    const prevDeps: Array<mixed> | null = prevState[1];
+    if (areHookInputsEqual(nextDeps, prevDeps)) {
+      return prevState[0];
+    }
+  }
+  const nextValue = nextCreate();
+  if (shouldDoubleInvokeUserFnsInHooksDEV) {
+    setIsStrictModeForDevtools(true);
+    try {
+      nextCreate();
+    } finally {
+      setIsStrictModeForDevtools(false);
+    }
+  }
+  hook.memoizedState = [nextValue, nextDeps];
+  return nextValue;
+}
+
+function mountDeferredValue<T>(value: T, initialValue?: T): T {
+  const hook = mountWorkInProgressHook();
+  return mountDeferredValueImpl(hook, value, initialValue);
+}
+
+function updateDeferredValue<T>(value: T, initialValue?: T): T {
+  const hook = updateWorkInProgressHook();
+  const resolvedCurrentHook: Hook = (currentHook: any);
+  const prevValue: T = resolvedCurrentHook.memoizedState;
+  return updateDeferredValueImpl(hook, prevValue, value, initialValue);
+}
+
+function rerenderDeferredValue<T>(value: T, initialValue?: T): T {
+  const hook = updateWorkInProgressHook();
+  if (currentHook === null) {
+    // This is a rerender during a mount.
+    return mountDeferredValueImpl(hook, value, initialValue);
+  } else {
+    // This is a rerender during an update.
+    const prevValue: T = currentHook.memoizedState;
+    return updateDeferredValueImpl(hook, prevValue, value, initialValue);
+  }
+}
+
+function isRenderingDeferredWork(): boolean {
+  if (!includesSomeLane(renderLanes, DeferredLane)) {
+    // None of the render lanes are deferred lanes.
+    return false;
+  }
+  // At least one of the render lanes are deferred lanes. However, if the
+  // current render is also batched together with an update, then we can't
+  // say that the render is wholly the result of deferred work. We can check
+  // this by checking if the root render lanes contain any "update" lanes, i.e.
+  // lanes that are only assigned to updates, like setState.
+  const rootRenderLanes = getWorkInProgressRootRenderLanes();
+  return !includesSomeLane(rootRenderLanes, UpdateLanes);
+}
+
+function mountDeferredValueImpl<T>(hook: Hook, value: T, initialValue?: T): T {
+  if (
+    // When `initialValue` is provided, we defer the initial render even if the
+    // current render is not synchronous.
+    initialValue !== undefined &&
+    // However, to avoid waterfalls, we do not defer if this render
+    // was itself spawned by an earlier useDeferredValue. Check if DeferredLane
+    // is part of the render lanes.
+    !isRenderingDeferredWork()
+  ) {
+    // Render with the initial value
+    hook.memoizedState = initialValue;
+
+    // Schedule a deferred render to switch to the final value.
+    const deferredLane = requestDeferredLane();
+    currentlyRenderingFiber.lanes = mergeLanes(
+      currentlyRenderingFiber.lanes,
+      deferredLane,
+    );
+    markSkippedUpdateLanes(deferredLane);
+
+    return initialValue;
+  } else {
+    hook.memoizedState = value;
+    return value;
+  }
+}
+
+function updateDeferredValueImpl<T>(
+  hook: Hook,
+  prevValue: T,
+  value: T,
+  initialValue?: T,
+): T {
+  if (is(value, prevValue)) {
+    // The incoming value is referentially identical to the currently rendered
+    // value, so we can bail out quickly.
+    return value;
+  } else {
+    // Received a new value that's different from the current value.
+
+    // Check if we're inside a hidden tree
+    if (isCurrentTreeHidden()) {
+      // Revealing a prerendered tree is considered the same as mounting new
+      // one, so we reuse the "mount" path in this case.
+      const resultValue = mountDeferredValueImpl(hook, value, initialValue);
+      // Unlike during an actual mount, we need to mark this as an update if
+      // the value changed.
+      if (!is(resultValue, prevValue)) {
+        markWorkInProgressReceivedUpdate();
+      }
+      return resultValue;
+    }
+
+    const shouldDeferValue =
+      !includesOnlyNonUrgentLanes(renderLanes) && !isRenderingDeferredWork();
+    if (shouldDeferValue) {
+      // This is an urgent update. Since the value has changed, keep using the
+      // previous value and spawn a deferred render to update it later.
+
+      // Schedule a deferred render
+      const deferredLane = requestDeferredLane();
+      currentlyRenderingFiber.lanes = mergeLanes(
+        currentlyRenderingFiber.lanes,
+        deferredLane,
+      );
+      markSkippedUpdateLanes(deferredLane);
+
+      // Reuse the previous value. We do not need to mark this as an update,
+      // because we did not render a new value.
+      return prevValue;
+    } else {
+      // This is not an urgent update, so we can use the latest value regardless
+      // of what it is. No need to defer it.
+
+      // Mark this as an update to prevent the fiber from bailing out.
+      markWorkInProgressReceivedUpdate();
+      hook.memoizedState = value;
+      return value;
+    }
+  }
+}
+
+function releaseAsyncTransition() {
+  if (__DEV__) {
+    ReactSharedInternals.asyncTransitions--;
+  }
+}
+
+function startTransition<S>(
+  fiber: Fiber,
+  queue: UpdateQueue<S | Thenable<S>, BasicStateAction<S | Thenable<S>>>,
+  pendingState: S,
+  finishedState: S,
+  callback: () => mixed,
+  options?: StartTransitionOptions,
+): void {
+  const previousPriority = getCurrentUpdatePriority();
+  setCurrentUpdatePriority(
+    higherEventPriority(previousPriority, ContinuousEventPriority),
+  );
+
+  const prevTransition = ReactSharedInternals.T;
+  const currentTransition: Transition = ({}: any);
+  if (enableViewTransition) {
+    currentTransition.types =
+      prevTransition !== null
+        ? // If we're a nested transition, we should use the same set as the parent
+          // since we're conceptually always joined into the same entangled transition.
+          // In practice, this only matters if we add transition types in the inner
+          // without setting state. In that case, the inner transition can finish
+          // without waiting for the outer.
+          prevTransition.types
+        : null;
+  }
+  if (enableGestureTransition) {
+    currentTransition.gesture = null;
+  }
+  if (enableTransitionTracing) {
+    currentTransition.name =
+      options !== undefined && options.name !== undefined ? options.name : null;
+    currentTransition.startTime = now();
+  }
+  if (__DEV__) {
+    currentTransition._updatedFibers = new Set();
+  }
+
+  // We don't really need to use an optimistic update here, because we
+  // schedule a second "revert" update below (which we use to suspend the
+  // transition until the async action scope has finished). But we'll use an
+  // optimistic update anyway to make it less likely the behavior accidentally
+  // diverges; for example, both an optimistic update and this one should
+  // share the same lane.
+  ReactSharedInternals.T = currentTransition;
+  dispatchOptimisticSetState(fiber, false, queue, pendingState);
+
+  try {
+    const returnValue = callback();
+    const onStartTransitionFinish = ReactSharedInternals.S;
+    if (onStartTransitionFinish !== null) {
+      onStartTransitionFinish(currentTransition, returnValue);
+    }
+
+    // Check if we're inside an async action scope. If so, we'll entangle
+    // this new action with the existing scope.
+    //
+    // If we're not already inside an async action scope, and this action is
+    // async, then we'll create a new async scope.
+    //
+    // In the async case, the resulting render will suspend until the async
+    // action scope has finished.
+    if (
+      returnValue !== null &&
+      typeof returnValue === 'object' &&
+      typeof returnValue.then === 'function'
+    ) {
+      const thenable = ((returnValue: any): Thenable<mixed>);
+      if (__DEV__) {
+        // Keep track of the number of async transitions still running so we can warn.
+        ReactSharedInternals.asyncTransitions++;
+        thenable.then(releaseAsyncTransition, releaseAsyncTransition);
+      }
+      // Create a thenable that resolves to `finishedState` once the async
+      // action has completed.
+      const thenableForFinishedState = chainThenableValue(
+        thenable,
+        finishedState,
+      );
+      dispatchSetStateInternal(
+        fiber,
+        queue,
+        (thenableForFinishedState: any),
+        requestUpdateLane(fiber),
+      );
+    } else {
+      dispatchSetStateInternal(
+        fiber,
+        queue,
+        finishedState,
+        requestUpdateLane(fiber),
+      );
+    }
+  } catch (error) {
+    // This is a trick to get the `useTransition` hook to rethrow the error.
+    // When it unwraps the thenable with the `use` algorithm, the error
+    // will be thrown.
+    const rejectedThenable: RejectedThenable<S> = {
+      then() {},
+      status: 'rejected',
+      reason: error,
+    };
+    dispatchSetStateInternal(
+      fiber,
+      queue,
+      rejectedThenable,
+      requestUpdateLane(fiber),
+    );
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+
+    if (prevTransition !== null && currentTransition.types !== null) {
+      // If we created a new types set in the inner transition, we transfer it to the parent
+      // since they should share the same set. They're conceptually entangled.
+      if (__DEV__) {
+        if (
+          prevTransition.types !== null &&
+          prevTransition.types !== currentTransition.types
+        ) {
+          // Just assert that assumption holds that we're not overriding anything.
+          console.error(
+            'We expected inner Transitions to have transferred the outer types set and ' +
+              'that you cannot add to the outer Transition while inside the inner.' +
+              'This is a bug in React.',
+          );
+        }
+      }
+      prevTransition.types = currentTransition.types;
+    }
+    ReactSharedInternals.T = prevTransition;
+
+    if (__DEV__) {
+      if (prevTransition === null && currentTransition._updatedFibers) {
+        const updatedFibersCount = currentTransition._updatedFibers.size;
+        currentTransition._updatedFibers.clear();
+        if (updatedFibersCount > 10) {
+          console.warn(
+            'Detected a large number of updates inside startTransition. ' +
+              'If this is due to a subscription please re-write it to use React provided hooks. ' +
+              'Otherwise concurrent mode guarantees are off the table.',
+          );
+        }
+      }
+    }
+  }
+}
+
+const noop = () => {};
+
+export function startHostTransition<F>(
+  formFiber: Fiber,
+  pendingState: TransitionStatus,
+  action: (F => mixed) | null,
+  formData: F,
+): void {
+  if (formFiber.tag !== HostComponent) {
+    throw new Error(
+      'Expected the form instance to be a HostComponent. This ' +
+        'is a bug in React.',
+    );
+  }
+
+  const stateHook = ensureFormComponentIsStateful(formFiber);
+
+  const queue: UpdateQueue<
+    Thenable<TransitionStatus> | TransitionStatus,
+    BasicStateAction<Thenable<TransitionStatus> | TransitionStatus>,
+  > = stateHook.queue;
+
+  startHostActionTimer(formFiber);
+
+  startTransition(
+    formFiber,
+    queue,
+    pendingState,
+    NoPendingHostTransition,
+    // TODO: `startTransition` both sets the pending state and dispatches
+    // the action, if one is provided. Consider refactoring these two
+    // concerns to avoid the extra lambda.
+
+    action === null
+      ? // No action was provided, but we still call `startTransition` to
+        // set the pending form status.
+        noop
+      : () => {
+          // Automatically reset the form when the action completes.
+          requestFormReset(formFiber);
+          return action(formData);
+        },
+  );
+}
+
+function ensureFormComponentIsStateful(formFiber: Fiber) {
+  const existingStateHook: Hook | null = formFiber.memoizedState;
+  if (existingStateHook !== null) {
+    // This fiber was already upgraded to be stateful.
+    return existingStateHook;
+  }
+
+  // Upgrade this host component fiber to be stateful. We're going to pretend
+  // it was stateful all along so we can reuse most of the implementation
+  // for function components and useTransition.
+  //
+  // Create the state hook used by TransitionAwareHostComponent. This is
+  // essentially an inlined version of mountState.
+  const newQueue: UpdateQueue<
+    Thenable<TransitionStatus> | TransitionStatus,
+    BasicStateAction<Thenable<TransitionStatus> | TransitionStatus>,
+  > = {
+    pending: null,
+    lanes: NoLanes,
+    // We're going to cheat and intentionally not create a bound dispatch
+    // method, because we can call it directly in startTransition.
+    dispatch: (null: any),
+    lastRenderedReducer: basicStateReducer,
+    lastRenderedState: NoPendingHostTransition,
+  };
+
+  const stateHook: Hook = {
+    memoizedState: NoPendingHostTransition,
+    baseState: NoPendingHostTransition,
+    baseQueue: null,
+    queue: newQueue,
+    next: null,
+  };
+
+  // We use another state hook to track whether the form needs to be reset.
+  // The state is an empty object. To trigger a reset, we update the state
+  // to a new object. Then during rendering, we detect that the state has
+  // changed and schedule a commit effect.
+  const initialResetState = {};
+  const newResetStateQueue: UpdateQueue<Object, Object> = {
+    pending: null,
+    lanes: NoLanes,
+    // We're going to cheat and intentionally not create a bound dispatch
+    // method, because we can call it directly in startTransition.
+    dispatch: (null: any),
+    lastRenderedReducer: basicStateReducer,
+    lastRenderedState: initialResetState,
+  };
+  const resetStateHook: Hook = {
+    memoizedState: initialResetState,
+    baseState: initialResetState,
+    baseQueue: null,
+    queue: newResetStateQueue,
+    next: null,
+  };
+  stateHook.next = resetStateHook;
+
+  // Add the hook list to both fiber alternates. The idea is that the fiber
+  // had this hook all along.
+  formFiber.memoizedState = stateHook;
+  const alternate = formFiber.alternate;
+  if (alternate !== null) {
+    alternate.memoizedState = stateHook;
+  }
+
+  return stateHook;
+}
+
+export function requestFormReset(formFiber: Fiber) {
+  const transition = requestCurrentTransition();
+
+  if (transition === null) {
+    if (__DEV__) {
+      // An optimistic update occurred, but startTransition is not on the stack.
+      // The form reset will be scheduled at default (sync) priority, which
+      // is probably not what the user intended. Most likely because the
+      // requestFormReset call happened after an `await`.
+      // TODO: Theoretically, requestFormReset is still useful even for
+      // non-transition updates because it allows you to update defaultValue
+      // synchronously and then wait to reset until after the update commits.
+      // I've chosen to warn anyway because it's more likely the `await` mistake
+      // described above. But arguably we shouldn't.
+      console.error(
+        'requestFormReset was called outside a transition or action. To ' +
+          'fix, move to an action, or wrap with startTransition.',
+      );
+    }
+  } else if (enableGestureTransition && transition.gesture) {
+    throw new Error(
+      'Cannot requestFormReset() inside a startGestureTransition. ' +
+        'There should be no side-effects associated with starting a ' +
+        'Gesture until its Action is invoked. Move side-effects to the ' +
+        'Action instead.',
+    );
+  }
+
+  let stateHook: Hook = ensureFormComponentIsStateful(formFiber);
+  const newResetState = {};
+  if (stateHook.next === null) {
+    // Hack alert. If formFiber is the workInProgress Fiber then
+    // we might get a broken intermediate state. Try the alternate
+    // instead.
+    // TODO: We should really stash the Queue somewhere stateful
+    // just like how setState binds the Queue.
+    stateHook = (formFiber.alternate: any).memoizedState;
+  }
+  const resetStateHook: Hook = (stateHook.next: any);
+  const resetStateQueue = resetStateHook.queue;
+  dispatchSetStateInternal(
+    formFiber,
+    resetStateQueue,
+    newResetState,
+    requestUpdateLane(formFiber),
+  );
+}
+
+function mountTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
+  const stateHook = mountStateImpl((false: Thenable<boolean> | boolean));
+  // The `start` method never changes.
+  const start = startTransition.bind(
+    null,
+    currentlyRenderingFiber,
+    stateHook.queue,
+    true,
+    false,
+  );
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = start;
+  return [false, start];
+}
+
+function updateTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
+  const [booleanOrThenable] = updateState(false);
+  const hook = updateWorkInProgressHook();
+  const start = hook.memoizedState;
+  const isPending =
+    typeof booleanOrThenable === 'boolean'
+      ? booleanOrThenable
+      : // This will suspend until the async action scope has finished.
+        useThenable(booleanOrThenable);
+  return [isPending, start];
+}
+
+function rerenderTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
+  const [booleanOrThenable] = rerenderState(false);
+  const hook = updateWorkInProgressHook();
+  const start = hook.memoizedState;
+  const isPending =
+    typeof booleanOrThenable === 'boolean'
+      ? booleanOrThenable
+      : // This will suspend until the async action scope has finished.
+        useThenable(booleanOrThenable);
+  return [isPending, start];
+}
+
+function useHostTransitionStatus(): TransitionStatus {
+  return readContext(HostTransitionContext);
+}
+
+function mountId(): string {
+  const hook = mountWorkInProgressHook();
+
+  const root = ((getWorkInProgressRoot(): any): FiberRoot);
+  // TODO: In Fizz, id generation is specific to each server config. Maybe we
+  // should do this in Fiber, too? Deferring this decision for now because
+  // there's no other place to store the prefix except for an internal field on
+  // the public createRoot object, which the fiber tree does not currently have
+  // a reference to.
+  const identifierPrefix = root.identifierPrefix;
+
+  let id;
+  if (getIsHydrating()) {
+    const treeId = getTreeId();
+
+    // Use a captial R prefix for server-generated ids.
+    id = '_' + identifierPrefix + 'R_' + treeId;
+
+    // Unless this is the first id at this level, append a number at the end
+    // that represents the position of this useId hook among all the useId
+    // hooks for this fiber.
+    const localId = localIdCounter++;
+    if (localId > 0) {
+      id += 'H' + localId.toString(32);
+    }
+
+    id += '_';
+  } else {
+    // Use a lowercase r prefix for client-generated ids.
+    const globalClientId = globalClientIdCounter++;
+    id = '_' + identifierPrefix + 'r_' + globalClientId.toString(32) + '_';
+  }
+
+  hook.memoizedState = id;
+  return id;
+}
+
+function updateId(): string {
+  const hook = updateWorkInProgressHook();
+  const id: string = hook.memoizedState;
+  return id;
+}
+
+function mountRefresh(): any {
+  const hook = mountWorkInProgressHook();
+  const refresh = (hook.memoizedState = refreshCache.bind(
+    null,
+    currentlyRenderingFiber,
+  ));
+  return refresh;
+}
+
+function updateRefresh(): any {
+  const hook = updateWorkInProgressHook();
+  return hook.memoizedState;
+}
+
+function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T): void {
+  // TODO: Does Cache work in legacy mode? Should decide and write a test.
+  // TODO: Consider warning if the refresh is at discrete priority, or if we
+  // otherwise suspect that it wasn't batched properly.
+  let provider = fiber.return;
+  while (provider !== null) {
+    switch (provider.tag) {
+      case CacheComponent:
+      case HostRoot: {
+        // Schedule an update on the cache boundary to trigger a refresh.
+        const lane = requestUpdateLane(provider);
+        const refreshUpdate = createLegacyQueueUpdate(lane);
+        const root = enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
+        if (root !== null) {
+          startUpdateTimerByLane(lane, 'refresh()', fiber);
+          scheduleUpdateOnFiber(root, provider, lane);
+          entangleLegacyQueueTransitions(root, provider, lane);
+        }
+
+        // TODO: If a refresh never commits, the new cache created here must be
+        // released. A simple case is start refreshing a cache boundary, but then
+        // unmount that boundary before the refresh completes.
+        const seededCache = createCache();
+        if (seedKey !== null && seedKey !== undefined && root !== null) {
+          if (enableLegacyCache) {
+            // Seed the cache with the value passed by the caller. This could be
+            // from a server mutation, or it could be a streaming response.
+            seededCache.data.set(seedKey, seedValue);
+          } else {
+            if (__DEV__) {
+              console.error(
+                'The seed argument is not enabled outside experimental channels.',
+              );
+            }
+          }
+        }
+
+        const payload = {
+          cache: seededCache,
+        };
+        refreshUpdate.payload = payload;
+        return;
+      }
+    }
+    provider = provider.return;
+  }
+  // TODO: Warn if unmounted?
+}
+
+function dispatchReducerAction<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  action: A,
+): void {
+  if (__DEV__) {
+    // using a reference to `arguments` bails out of GCC optimizations which affect function arity
+    const args = arguments;
+    if (typeof args[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 lane = requestUpdateLane(fiber);
+
+  const update: Update<S, A> = {
+    lane,
+    revertLane: NoLane,
+    gesture: null,
+    action,
+    hasEagerState: false,
+    eagerState: null,
+    next: (null: any),
+  };
+
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
+  } else {
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
+    if (root !== null) {
+      startUpdateTimerByLane(lane, 'dispatch()', fiber);
+      scheduleUpdateOnFiber(root, fiber, lane);
+      entangleTransitionUpdate(root, queue, lane);
+    }
+  }
+
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function dispatchSetState<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  action: A,
+): void {
+  if (__DEV__) {
+    // using a reference to `arguments` bails out of GCC optimizations which affect function arity
+    const args = arguments;
+    if (typeof args[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 lane = requestUpdateLane(fiber);
+  const didScheduleUpdate = dispatchSetStateInternal(
+    fiber,
+    queue,
+    action,
+    lane,
+  );
+  if (didScheduleUpdate) {
+    startUpdateTimerByLane(lane, 'setState()', fiber);
+  }
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function dispatchSetStateInternal<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  action: A,
+  lane: Lane,
+): boolean {
+  const update: Update<S, A> = {
+    lane,
+    revertLane: NoLane,
+    gesture: null,
+    action,
+    hasEagerState: false,
+    eagerState: null,
+    next: (null: any),
+  };
+
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
+  } else {
+    const alternate = fiber.alternate;
+    if (
+      fiber.lanes === NoLanes &&
+      (alternate === null || alternate.lanes === NoLanes)
+    ) {
+      // The queue is currently empty, which means we can eagerly compute the
+      // next state before entering the render phase. If the new state is the
+      // same as the current state, we may be able to bail out entirely.
+      const lastRenderedReducer = queue.lastRenderedReducer;
+      if (lastRenderedReducer !== null) {
+        let prevDispatcher = null;
+        if (__DEV__) {
+          prevDispatcher = ReactSharedInternals.H;
+          ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+        }
+        try {
+          const currentState: S = (queue.lastRenderedState: any);
+          const eagerState = lastRenderedReducer(currentState, action);
+          // Stash the eagerly computed state, and the reducer used to compute
+          // it, on the update object. If the reducer hasn't changed by the
+          // time we enter the render phase, then the eager state can be used
+          // without calling the reducer again.
+          update.hasEagerState = true;
+          update.eagerState = eagerState;
+          if (is(eagerState, currentState)) {
+            // Fast path. We can bail out without scheduling React to re-render.
+            // It's still possible that we'll need to rebase this update later,
+            // if the component re-renders for a different reason and by that
+            // time the reducer has changed.
+            // TODO: Do we still need to entangle transitions in this case?
+            enqueueConcurrentHookUpdateAndEagerlyBailout(fiber, queue, update);
+            return false;
+          }
+        } catch (error) {
+          // Suppress the error. It will throw again in the render phase.
+        } finally {
+          if (__DEV__) {
+            ReactSharedInternals.H = prevDispatcher;
+          }
+        }
+      }
+    }
+
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane);
+      entangleTransitionUpdate(root, queue, lane);
+      return true;
+    }
+  }
+  return false;
+}
+
+function dispatchOptimisticSetState<S, A>(
+  fiber: Fiber,
+  throwIfDuringRender: boolean,
+  queue: UpdateQueue<S, A>,
+  action: A,
+): void {
+  const transition = requestCurrentTransition();
+
+  if (__DEV__) {
+    if (transition === null) {
+      // An optimistic update occurred, but startTransition is not on the stack.
+      // There are two likely scenarios.
+
+      // One possibility is that the optimistic update is triggered by a regular
+      // event handler (e.g. `onSubmit`) instead of an action. This is a mistake
+      // and we will warn.
+
+      // The other possibility is the optimistic update is inside an async
+      // action, but after an `await`. In this case, we can make it "just work"
+      // by associating the optimistic update with the pending async action.
+
+      // Technically it's possible that the optimistic update is unrelated to
+      // the pending action, but we don't have a way of knowing this for sure
+      // because browsers currently do not provide a way to track async scope.
+      // (The AsyncContext proposal, if it lands, will solve this in the
+      // future.) However, this is no different than the problem of unrelated
+      // transitions being grouped together — it's not wrong per se, but it's
+      // not ideal.
+
+      // Once AsyncContext starts landing in browsers, we will provide better
+      // warnings in development for these cases.
+      if (peekEntangledActionLane() !== NoLane) {
+        // There is a pending async action. Don't warn.
+      } else {
+        // There's no pending async action. The most likely cause is that we're
+        // inside a regular event handler (e.g. onSubmit) instead of an action.
+        console.error(
+          'An optimistic state update occurred outside a transition or ' +
+            'action. To fix, move the update to an action, or wrap ' +
+            'with startTransition.',
+        );
+      }
+    }
+  }
+
+  // For regular Transitions an optimistic update commits synchronously.
+  // For gesture Transitions an optimistic update commits on the GestureLane.
+  const lane =
+    enableGestureTransition && transition !== null && transition.gesture
+      ? GestureLane
+      : SyncLane;
+  const update: Update<S, A> = {
+    lane: lane,
+    // After committing, the optimistic update is "reverted" using the same
+    // lane as the transition it's associated with.
+    revertLane: requestTransitionLane(transition),
+    gesture: null,
+    action,
+    hasEagerState: false,
+    eagerState: null,
+    next: (null: any),
+  };
+
+  if (isRenderPhaseUpdate(fiber)) {
+    // When calling startTransition during render, this warns instead of
+    // throwing because throwing would be a breaking change. setOptimisticState
+    // is a new API so it's OK to throw.
+    if (throwIfDuringRender) {
+      throw new Error('Cannot update optimistic state while rendering.');
+    } else {
+      // startTransition was called during render. We don't need to do anything
+      // besides warn here because the render phase update would be overidden by
+      // the second update, anyway. We can remove this branch and make it throw
+      // in a future release.
+      if (__DEV__) {
+        console.error('Cannot call startTransition while rendering.');
+      }
+    }
+  } else {
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
+    if (root !== null) {
+      // NOTE: The optimistic update implementation assumes that the transition
+      // will never be attempted before the optimistic update. This currently
+      // holds because the optimistic update is always synchronous. If we ever
+      // change that, we'll need to account for this.
+      startUpdateTimerByLane(lane, 'setOptimistic()', fiber);
+      scheduleUpdateOnFiber(root, fiber, lane);
+      // Optimistic updates are always synchronous, so we don't need to call
+      // entangleTransitionUpdate here.
+      if (enableGestureTransition && transition !== null) {
+        const provider = transition.gesture;
+        if (provider !== null) {
+          // If this was a gesture, ensure we have a scheduled gesture and that
+          // we associate this update with this specific gesture instance.
+          const gesture = (update.gesture = scheduleGesture(root, provider));
+          // Ensure the gesture always uses the same revert lane. This can happen for
+          // two startGestureTransition calls to the same provider in different events.
+          if (gesture.revertLane === NoLane) {
+            gesture.revertLane = update.revertLane;
+          } else {
+            update.revertLane = gesture.revertLane;
+          }
+        }
+      }
+    }
+  }
+
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function isRenderPhaseUpdate(fiber: Fiber): boolean {
+  const alternate = fiber.alternate;
+  return (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  );
+}
+
+function enqueueRenderPhaseUpdate<S, A>(
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+): void {
+  // This is a render phase update. Stash it in a lazily-created map of
+  // 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.
+  didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate =
+    true;
+  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;
+}
+
+// TODO: Move to ReactFiberConcurrentUpdates?
+function entangleTransitionUpdate<S, A>(
+  root: FiberRoot,
+  queue: UpdateQueue<S, A>,
+  lane: Lane,
+): void {
+  if (isTransitionLane(lane)) {
+    let queueLanes = queue.lanes;
+
+    // If any entangled lanes are no longer pending on the root, then they
+    // must have finished. We can remove them from the shared queue, which
+    // represents a superset of the actually pending lanes. In some cases we
+    // may entangle more than we need to, but that's OK. In fact it's worse if
+    // we *don't* entangle when we should.
+    queueLanes = intersectLanes(queueLanes, root.pendingLanes);
+
+    // Entangle the new transition lane with the other transition lanes.
+    const newQueueLanes = mergeLanes(queueLanes, lane);
+    queue.lanes = newQueueLanes;
+    // Even if queue.lanes already include lane, we don't know for certain if
+    // the lane finished since the last time we entangled it. So we need to
+    // entangle it again, just to be sure.
+    markRootEntangled(root, newQueueLanes);
+  }
+}
+
+function markUpdateInDevTools<A>(fiber: Fiber, lane: Lane, action: A): void {
+  if (enableSchedulingProfiler) {
+    markStateUpdateScheduled(fiber, lane);
+  }
+}
+
+export const ContextOnlyDispatcher: Dispatcher = {
+  readContext,
+
+  use,
+  useCallback: throwInvalidHookError,
+  useContext: throwInvalidHookError,
+  useEffect: throwInvalidHookError,
+  useImperativeHandle: throwInvalidHookError,
+  useLayoutEffect: throwInvalidHookError,
+  useInsertionEffect: throwInvalidHookError,
+  useMemo: throwInvalidHookError,
+  useReducer: throwInvalidHookError,
+  useRef: throwInvalidHookError,
+  useState: throwInvalidHookError,
+  useDebugValue: throwInvalidHookError,
+  useDeferredValue: throwInvalidHookError,
+  useTransition: throwInvalidHookError,
+  useSyncExternalStore: throwInvalidHookError,
+  useId: throwInvalidHookError,
+  useHostTransitionStatus: throwInvalidHookError,
+  useFormState: throwInvalidHookError,
+  useActionState: throwInvalidHookError,
+  useOptimistic: throwInvalidHookError,
+  useMemoCache: throwInvalidHookError,
+  useCacheRefresh: throwInvalidHookError,
+  useEffectEvent: throwInvalidHookError,
+};
+
+const HooksDispatcherOnMount: Dispatcher = {
+  readContext,
+
+  use,
+  useCallback: mountCallback,
+  useContext: readContext,
+  useEffect: mountEffect,
+  useImperativeHandle: mountImperativeHandle,
+  useLayoutEffect: mountLayoutEffect,
+  useInsertionEffect: mountInsertionEffect,
+  useMemo: mountMemo,
+  useReducer: mountReducer,
+  useRef: mountRef,
+  useState: mountState,
+  useDebugValue: mountDebugValue,
+  useDeferredValue: mountDeferredValue,
+  useTransition: mountTransition,
+  useSyncExternalStore: mountSyncExternalStore,
+  useId: mountId,
+  useHostTransitionStatus: useHostTransitionStatus,
+  useFormState: mountActionState,
+  useActionState: mountActionState,
+  useOptimistic: mountOptimistic,
+  useMemoCache,
+  useCacheRefresh: mountRefresh,
+  useEffectEvent: mountEvent,
+};
+
+const HooksDispatcherOnUpdate: Dispatcher = {
+  readContext,
+
+  use,
+  useCallback: updateCallback,
+  useContext: readContext,
+  useEffect: updateEffect,
+  useImperativeHandle: updateImperativeHandle,
+  useInsertionEffect: updateInsertionEffect,
+  useLayoutEffect: updateLayoutEffect,
+  useMemo: updateMemo,
+  useReducer: updateReducer,
+  useRef: updateRef,
+  useState: updateState,
+  useDebugValue: updateDebugValue,
+  useDeferredValue: updateDeferredValue,
+  useTransition: updateTransition,
+  useSyncExternalStore: updateSyncExternalStore,
+  useId: updateId,
+  useHostTransitionStatus: useHostTransitionStatus,
+  useFormState: updateActionState,
+  useActionState: updateActionState,
+  useOptimistic: updateOptimistic,
+  useMemoCache,
+  useCacheRefresh: updateRefresh,
+  useEffectEvent: updateEvent,
+};
+
+const HooksDispatcherOnRerender: Dispatcher = {
+  readContext,
+
+  use,
+  useCallback: updateCallback,
+  useContext: readContext,
+  useEffect: updateEffect,
+  useImperativeHandle: updateImperativeHandle,
+  useInsertionEffect: updateInsertionEffect,
+  useLayoutEffect: updateLayoutEffect,
+  useMemo: updateMemo,
+  useReducer: rerenderReducer,
+  useRef: updateRef,
+  useState: rerenderState,
+  useDebugValue: updateDebugValue,
+  useDeferredValue: rerenderDeferredValue,
+  useTransition: rerenderTransition,
+  useSyncExternalStore: updateSyncExternalStore,
+  useId: updateId,
+  useHostTransitionStatus: useHostTransitionStatus,
+  useFormState: rerenderActionState,
+  useActionState: rerenderActionState,
+  useOptimistic: rerenderOptimistic,
+  useMemoCache,
+  useCacheRefresh: updateRefresh,
+  useEffectEvent: updateEvent,
+};
+
+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 = () => {
+    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().',
+    );
+  };
+
+  const warnInvalidHookAccess = () => {
+    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://react.dev/link/rules-of-hooks',
+    );
+  };
+
+  HooksDispatcherOnMountInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
+    },
+    use,
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      mountHookTypesDev();
+      checkDepsAreArrayDev(deps);
+      return mountCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      mountHookTypesDev();
+      return readContext(context);
+    },
+    useEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useEffect';
+      mountHookTypesDev();
+      checkDepsAreArrayDev(deps);
+      return mountEffect(create, deps);
+    },
+    useImperativeHandle<T>(
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+      create: () => T,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useImperativeHandle';
+      mountHookTypesDev();
+      checkDepsAreArrayDev(deps);
+      return mountImperativeHandle(ref, create, deps);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      mountHookTypesDev();
+      checkDepsAreArrayDev(deps);
+      return mountInsertionEffect(create, deps);
+    },
+    useLayoutEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useLayoutEffect';
+      mountHookTypesDev();
+      checkDepsAreArrayDev(deps);
+      return mountLayoutEffect(create, deps);
+    },
+    useMemo<T>(create: () => T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useMemo';
+      mountHookTypesDev();
+      checkDepsAreArrayDev(deps);
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      mountHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useRef<T>(initialValue: T): {current: T} {
+      currentHookNameInDev = 'useRef';
+      mountHookTypesDev();
+      return mountRef(initialValue);
+    },
+    useState<S>(
+      initialState: (() => S) | S,
+    ): [S, Dispatch<BasicStateAction<S>>] {
+      currentHookNameInDev = 'useState';
+      mountHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      mountHookTypesDev();
+      return mountDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      mountHookTypesDev();
+      return mountDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      mountHookTypesDev();
+      return mountTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      mountHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      mountHookTypesDev();
+      return mountId();
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      mountHookTypesDev();
+      warnOnUseFormStateInDev();
+      return mountActionState(action, initialState, permalink);
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      mountHookTypesDev();
+      return mountActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      mountHookTypesDev();
+      return mountOptimistic(passthrough, reducer);
+    },
+    useHostTransitionStatus,
+    useMemoCache,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      mountHookTypesDev();
+      return mountRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      mountHookTypesDev();
+      return mountEvent(callback);
+    },
+  };
+
+  HooksDispatcherOnMountWithHookTypesInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
+    },
+    use,
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      updateHookTypesDev();
+      return mountCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      updateHookTypesDev();
+      return readContext(context);
+    },
+    useEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useEffect';
+      updateHookTypesDev();
+      return mountEffect(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 mountImperativeHandle(ref, create, deps);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      updateHookTypesDev();
+      return mountInsertionEffect(create, deps);
+    },
+    useLayoutEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useLayoutEffect';
+      updateHookTypesDev();
+      return mountLayoutEffect(create, deps);
+    },
+    useMemo<T>(create: () => T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useMemo';
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useRef<T>(initialValue: T): {current: T} {
+      currentHookNameInDev = 'useRef';
+      updateHookTypesDev();
+      return mountRef(initialValue);
+    },
+    useState<S>(
+      initialState: (() => S) | S,
+    ): [S, Dispatch<BasicStateAction<S>>] {
+      currentHookNameInDev = 'useState';
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      updateHookTypesDev();
+      return mountDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      updateHookTypesDev();
+      return mountDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      updateHookTypesDev();
+      return mountTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return mountId();
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      updateHookTypesDev();
+      return mountActionState(action, initialState, permalink);
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      updateHookTypesDev();
+      warnOnUseFormStateInDev();
+      return mountActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      updateHookTypesDev();
+      return mountOptimistic(passthrough, reducer);
+    },
+    useHostTransitionStatus,
+    useMemoCache,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return mountRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      updateHookTypesDev();
+      return mountEvent(callback);
+    },
+  };
+
+  HooksDispatcherOnUpdateInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
+    },
+    use,
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      updateHookTypesDev();
+      return updateCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      updateHookTypesDev();
+      return readContext(context);
+    },
+    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);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      updateHookTypesDev();
+      return updateInsertionEffect(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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = 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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      updateHookTypesDev();
+      return updateDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      updateHookTypesDev();
+      return updateDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      updateHookTypesDev();
+      return updateTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      updateHookTypesDev();
+      warnOnUseFormStateInDev();
+      return updateActionState(action, initialState, permalink);
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      updateHookTypesDev();
+      return updateActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      updateHookTypesDev();
+      return updateOptimistic(passthrough, reducer);
+    },
+    useHostTransitionStatus,
+    useMemoCache,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      updateHookTypesDev();
+      return updateEvent(callback);
+    },
+  };
+
+  HooksDispatcherOnRerenderInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
+    },
+    use,
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      updateHookTypesDev();
+      return updateCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      updateHookTypesDev();
+      return readContext(context);
+    },
+    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);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      updateHookTypesDev();
+      return updateInsertionEffect(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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return updateMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return rerenderReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = 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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return rerenderState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      updateHookTypesDev();
+      return updateDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      updateHookTypesDev();
+      return rerenderDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      updateHookTypesDev();
+      return rerenderTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      updateHookTypesDev();
+      warnOnUseFormStateInDev();
+      return rerenderActionState(action, initialState, permalink);
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      updateHookTypesDev();
+      return rerenderActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      updateHookTypesDev();
+      return rerenderOptimistic(passthrough, reducer);
+    },
+    useHostTransitionStatus,
+    useMemoCache,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      updateHookTypesDev();
+      return updateEvent(callback);
+    },
+  };
+
+  InvalidNestedHooksDispatcherOnMountInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      warnInvalidContextAccess();
+      return readContext(context);
+    },
+    use<T>(usable: Usable<T>): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    },
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return readContext(context);
+    },
+    useEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useEffect';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountEffect(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();
+      mountHookTypesDev();
+      return mountImperativeHandle(ref, create, deps);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountInsertionEffect(create, deps);
+    },
+    useLayoutEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useLayoutEffect';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountLayoutEffect(create, deps);
+    },
+    useMemo<T>(create: () => T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useMemo';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useRef<T>(initialValue: T): {current: T} {
+      currentHookNameInDev = 'useRef';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountRef(initialValue);
+    },
+    useState<S>(
+      initialState: (() => S) | S,
+    ): [S, Dispatch<BasicStateAction<S>>] {
+      currentHookNameInDev = 'useState';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return mountState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountId();
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountActionState(action, initialState, permalink);
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountOptimistic(passthrough, reducer);
+    },
+    useMemoCache(size: number): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    },
+    useHostTransitionStatus,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      mountHookTypesDev();
+      return mountRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountEvent(callback);
+    },
+  };
+
+  InvalidNestedHooksDispatcherOnUpdateInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      warnInvalidContextAccess();
+      return readContext(context);
+    },
+    use<T>(usable: Usable<T>): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    },
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return readContext(context);
+    },
+    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);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateInsertionEffect(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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = 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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateActionState(action, initialState, permalink);
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateOptimistic(passthrough, reducer);
+    },
+    useMemoCache(size: number): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    },
+    useHostTransitionStatus,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEvent(callback);
+    },
+  };
+
+  InvalidNestedHooksDispatcherOnRerenderInDEV = {
+    readContext<T>(context: ReactContext<T>): T {
+      warnInvalidContextAccess();
+      return readContext(context);
+    },
+    use<T>(usable: Usable<T>): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    },
+    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
+      currentHookNameInDev = 'useCallback';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateCallback(callback, deps);
+    },
+    useContext<T>(context: ReactContext<T>): T {
+      currentHookNameInDev = 'useContext';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return readContext(context);
+    },
+    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);
+    },
+    useInsertionEffect(
+      create: () => (() => void) | void,
+      deps: Array<mixed> | void | null,
+    ): void {
+      currentHookNameInDev = 'useInsertionEffect';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateInsertionEffect(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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return updateMemo(create, deps);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useReducer<S, I, A>(
+      reducer: (S, A) => S,
+      initialArg: I,
+      init?: I => S,
+    ): [S, Dispatch<A>] {
+      currentHookNameInDev = 'useReducer';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return rerenderReducer(reducer, initialArg, init);
+      } finally {
+        ReactSharedInternals.H = 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 = ReactSharedInternals.H;
+      ReactSharedInternals.H = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return rerenderState(initialState);
+      } finally {
+        ReactSharedInternals.H = prevDispatcher;
+      }
+    },
+    useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void {
+      currentHookNameInDev = 'useDebugValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateDebugValue(value, formatterFn);
+    },
+    useDeferredValue<T>(value: T, initialValue?: T): T {
+      currentHookNameInDev = 'useDeferredValue';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderDeferredValue(value, initialValue);
+    },
+    useTransition(): [boolean, (() => void) => void] {
+      currentHookNameInDev = 'useTransition';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderTransition();
+    },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+      getServerSnapshot?: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
+    useFormState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useFormState';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderActionState(action, initialState, permalink);
+    },
+    useActionState<S, P>(
+      action: (Awaited<S>, P) => S,
+      initialState: Awaited<S>,
+      permalink?: string,
+    ): [Awaited<S>, (P) => void, boolean] {
+      currentHookNameInDev = 'useActionState';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderActionState(action, initialState, permalink);
+    },
+    useOptimistic<S, A>(
+      passthrough: S,
+      reducer: ?(S, A) => S,
+    ): [S, (A) => void] {
+      currentHookNameInDev = 'useOptimistic';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderOptimistic(passthrough, reducer);
+    },
+    useMemoCache(size: number): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    },
+    useHostTransitionStatus,
+    useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    },
+    useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+      callback: F,
+    ): F {
+      currentHookNameInDev = 'useEffectEvent';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEvent(callback);
+    },
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.js b/packages/react-reconciler/src/ReactFiberHostContext.js
new file mode 100644
index 00000000000..2d2ec4c88ac
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHostContext.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack';
+import type {
+  Container,
+  HostContext,
+  TransitionStatus,
+} from './ReactFiberConfig';
+import type {Hook} from './ReactFiberHooks';
+
+import {
+  getChildHostContext,
+  getRootHostContext,
+  HostTransitionContext,
+  NotPendingTransition,
+  isPrimaryRenderer,
+} from './ReactFiberConfig';
+import {createCursor, push, pop} from './ReactFiberStack';
+
+const contextStackCursor: StackCursor<HostContext | null> = createCursor(null);
+const contextFiberStackCursor: StackCursor<Fiber | null> = createCursor(null);
+const rootInstanceStackCursor: StackCursor<Container | null> =
+  createCursor(null);
+
+// Represents the nearest host transition provider (in React DOM, a <form />)
+// NOTE: Since forms cannot be nested, and this feature is only implemented by
+// React DOM, we don't technically need this to be a stack. It could be a single
+// module variable instead.
+const hostTransitionProviderCursor: StackCursor<Fiber | null> =
+  createCursor(null);
+
+function requiredContext<Value>(c: Value | null): Value {
+  if (__DEV__) {
+    if (c === null) {
+      console.error(
+        'Expected host context to exist. This error is likely caused by a bug ' +
+          'in React. Please file an issue.',
+      );
+    }
+  }
+  return (c: any);
+}
+
+function getCurrentRootHostContainer(): null | Container {
+  return rootInstanceStackCursor.current;
+}
+
+function getRootHostContainer(): Container {
+  const rootInstance = requiredContext(rootInstanceStackCursor.current);
+  return rootInstance;
+}
+
+export function getHostTransitionProvider(): Fiber | null {
+  return hostTransitionProviderCursor.current;
+}
+
+function pushHostContainer(fiber: Fiber, nextRootInstance: Container): void {
+  // Push current root instance onto the stack;
+  // This allows us to reset root when portals are popped.
+  push(rootInstanceStackCursor, nextRootInstance, fiber);
+  // Track the context and the Fiber that provided it.
+  // This enables us to pop only Fibers that provide unique contexts.
+  push(contextFiberStackCursor, fiber, fiber);
+
+  // Finally, we need to push the host context to the stack.
+  // However, we can't just call getRootHostContext() and push it because
+  // we'd have a different number of entries on the stack depending on
+  // whether getRootHostContext() throws somewhere in renderer code or not.
+  // So we push an empty value first. This lets us safely unwind on errors.
+  push(contextStackCursor, null, fiber);
+  const nextRootContext = getRootHostContext(nextRootInstance);
+  // Now that we know this function doesn't throw, replace it.
+  pop(contextStackCursor, fiber);
+  push(contextStackCursor, nextRootContext, fiber);
+}
+
+function popHostContainer(fiber: Fiber) {
+  pop(contextStackCursor, fiber);
+  pop(contextFiberStackCursor, fiber);
+  pop(rootInstanceStackCursor, fiber);
+}
+
+function getHostContext(): HostContext {
+  const context = requiredContext(contextStackCursor.current);
+  return context;
+}
+
+function pushHostContext(fiber: Fiber): void {
+  const stateHook: Hook | null = fiber.memoizedState;
+  if (stateHook !== null) {
+    // Propagate the current state to all the descendents.
+    // We use Context as an implementation detail for this.
+    //
+    // NOTE: This assumes that there cannot be nested transition providers,
+    // because the only renderer that implements this feature is React DOM,
+    // and forms cannot be nested. If we did support nested providers, then
+    // we would need to push a context value even for host fibers that
+    // haven't been upgraded yet.
+    const transitionStatus: TransitionStatus = stateHook.memoizedState;
+    if (isPrimaryRenderer) {
+      HostTransitionContext._currentValue = transitionStatus;
+    } else {
+      HostTransitionContext._currentValue2 = transitionStatus;
+    }
+
+    // Only provide context if this fiber has been upgraded by a host
+    // transition. We use the same optimization for regular host context below.
+    push(hostTransitionProviderCursor, fiber, fiber);
+  }
+
+  const context: HostContext = requiredContext(contextStackCursor.current);
+  const nextContext = getChildHostContext(context, fiber.type);
+
+  // Don't push this Fiber's context unless it's unique.
+  if (context !== nextContext) {
+    // 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 {
+  if (contextFiberStackCursor.current === fiber) {
+    // Do not pop unless this Fiber provided the current context.
+    // pushHostContext() only pushes Fibers that provide unique contexts.
+    pop(contextStackCursor, fiber);
+    pop(contextFiberStackCursor, fiber);
+  }
+
+  if (hostTransitionProviderCursor.current === fiber) {
+    // Do not pop unless this Fiber provided the current context. This is mostly
+    // a performance optimization, but conveniently it also prevents a potential
+    // data race where a host provider is upgraded (i.e. memoizedState becomes
+    // non-null) during a concurrent event. This is a bit of a flaw in the way
+    // we upgrade host components, but because we're accounting for it here, it
+    // should be fine.
+    pop(hostTransitionProviderCursor, fiber);
+
+    // When popping the transition provider, we reset the context value back
+    // to `NotPendingTransition`. We can do this because you're not allowed to nest forms. If
+    // we allowed for multiple nested host transition providers, then we'd
+    // need to reset this to the parent provider's status.
+    if (isPrimaryRenderer) {
+      HostTransitionContext._currentValue = NotPendingTransition;
+    } else {
+      HostTransitionContext._currentValue2 = NotPendingTransition;
+    }
+  }
+}
+
+export {
+  getHostContext,
+  getCurrentRootHostContainer,
+  getRootHostContainer,
+  popHostContainer,
+  popHostContext,
+  pushHostContainer,
+  pushHostContext,
+};
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
new file mode 100644
index 00000000000..984f832359f
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -0,0 +1,334 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/prod-error-codes */
+
+import type {ReactElement} from 'shared/ReactElementType';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  flushSyncWork,
+  scheduleUpdateOnFiber,
+  flushPendingEffects,
+} from './ReactFiberWorkLoop';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates';
+import {updateContainerSync} from './ReactFiberReconciler';
+import {emptyContextObject} from './ReactFiberLegacyContext';
+import {SyncLane} from './ReactFiberLane';
+import {
+  ClassComponent,
+  FunctionComponent,
+  ForwardRef,
+  MemoComponent,
+  SimpleMemoComponent,
+} from './ReactWorkTags';
+import {
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_LAZY_TYPE,
+} from 'shared/ReactSymbols';
+
+export type Family = {
+  current: any,
+};
+
+export type RefreshUpdate = {
+  staleFamilies: Set<Family>,
+  updatedFamilies: Set<Family>,
+};
+
+// 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;
+
+let resolveFamily: RefreshHandler | null = null;
+let failedBoundaries: WeakSet<Fiber> | null = null;
+
+export const setRefreshHandler = (handler: RefreshHandler | null): void => {
+  if (__DEV__) {
+    resolveFamily = handler;
+  }
+};
+
+export function resolveFunctionForHotReloading(type: any): any {
+  if (__DEV__) {
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
+      return type;
+    }
+    const family = resolveFamily(type);
+    if (family === undefined) {
+      return type;
+    }
+    // Use the latest known implementation.
+    return family.current;
+  } else {
+    return type;
+  }
+}
+
+export function resolveClassForHotReloading(type: any): any {
+  // No implementation differences.
+  return resolveFunctionForHotReloading(type);
+}
+
+export function resolveForwardRefForHotReloading(type: any): any {
+  if (__DEV__) {
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
+      return type;
+    }
+    const family = resolveFamily(type);
+    if (family === undefined) {
+      // Check if we're dealing with a real forwardRef. Don't want to crash early.
+      if (
+        type !== null &&
+        type !== undefined &&
+        typeof type.render === 'function'
+      ) {
+        // ForwardRef is special because its resolved .type is an object,
+        // but it's possible that we only have its inner render function in the map.
+        // If that inner render function is different, we'll build a new forwardRef type.
+        const currentRender = resolveFunctionForHotReloading(type.render);
+        if (type.render !== currentRender) {
+          const syntheticType = {
+            $$typeof: REACT_FORWARD_REF_TYPE,
+            render: currentRender,
+          };
+          if (type.displayName !== undefined) {
+            (syntheticType: any).displayName = type.displayName;
+          }
+          return syntheticType;
+        }
+      }
+      return type;
+    }
+    // Use the latest known implementation.
+    return family.current;
+  } else {
+    return type;
+  }
+}
+
+export function isCompatibleFamilyForHotReloading(
+  fiber: Fiber,
+  element: ReactElement,
+): boolean {
+  if (__DEV__) {
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
+      return false;
+    }
+
+    const prevType = fiber.elementType;
+    const nextType = element.type;
+
+    // If we got here, we know types aren't === equal.
+    let needsCompareFamilies = false;
+
+    const $$typeofNextType =
+      typeof nextType === 'object' && nextType !== null
+        ? nextType.$$typeof
+        : null;
+
+    switch (fiber.tag) {
+      case ClassComponent: {
+        if (typeof nextType === 'function') {
+          needsCompareFamilies = true;
+        }
+        break;
+      }
+      case FunctionComponent: {
+        if (typeof nextType === 'function') {
+          needsCompareFamilies = true;
+        } else if ($$typeofNextType === REACT_LAZY_TYPE) {
+          // We don't know the inner type yet.
+          // We're going to assume that the lazy inner type is stable,
+          // and so it is sufficient to avoid reconciling it away.
+          // We're not going to unwrap or actually use the new lazy type.
+          needsCompareFamilies = true;
+        }
+        break;
+      }
+      case ForwardRef: {
+        if ($$typeofNextType === REACT_FORWARD_REF_TYPE) {
+          needsCompareFamilies = true;
+        } else if ($$typeofNextType === REACT_LAZY_TYPE) {
+          needsCompareFamilies = true;
+        }
+        break;
+      }
+      case MemoComponent:
+      case SimpleMemoComponent: {
+        if ($$typeofNextType === REACT_MEMO_TYPE) {
+          // TODO: if it was but can no longer be simple,
+          // we shouldn't set this.
+          needsCompareFamilies = true;
+        } else if ($$typeofNextType === REACT_LAZY_TYPE) {
+          needsCompareFamilies = true;
+        }
+        break;
+      }
+      default:
+        return false;
+    }
+
+    // Check if both types have a family and it's the same one.
+    if (needsCompareFamilies) {
+      // Note: memo() and forwardRef() we'll compare outer rather than inner type.
+      // This means both of them need to be registered to preserve state.
+      // 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 = resolveFamily(prevType);
+      // $FlowFixMe[not-a-function] found when upgrading Flow
+      if (prevFamily !== undefined && prevFamily === resolveFamily(nextType)) {
+        return true;
+      }
+    }
+    return false;
+  } else {
+    return false;
+  }
+}
+
+export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
+  if (__DEV__) {
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
+      return;
+    }
+    if (typeof WeakSet !== 'function') {
+      return;
+    }
+    if (failedBoundaries === null) {
+      failedBoundaries = new WeakSet();
+    }
+    failedBoundaries.add(fiber);
+  }
+}
+
+export const scheduleRefresh: ScheduleRefresh = (
+  root: FiberRoot,
+  update: RefreshUpdate,
+): void => {
+  if (__DEV__) {
+    if (resolveFamily === null) {
+      // Hot reloading is disabled.
+      return;
+    }
+    const {staleFamilies, updatedFamilies} = update;
+    flushPendingEffects();
+    scheduleFibersWithFamiliesRecursively(
+      root.current,
+      updatedFamilies,
+      staleFamilies,
+    );
+    flushSyncWork();
+  }
+};
+
+export const 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;
+    }
+    updateContainerSync(element, root, null, null);
+    flushSyncWork();
+  }
+};
+
+function scheduleFibersWithFamiliesRecursively(
+  fiber: Fiber,
+  updatedFamilies: Set<Family>,
+  staleFamilies: Set<Family>,
+): void {
+  if (__DEV__) {
+    do {
+      const {alternate, 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;
+      }
+
+      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 = resolveFamily(candidateType);
+        if (family !== undefined) {
+          if (staleFamilies.has(family)) {
+            needsRemount = true;
+          } else if (updatedFamilies.has(family)) {
+            if (tag === ClassComponent) {
+              needsRemount = true;
+            } else {
+              needsRender = true;
+            }
+          }
+        }
+      }
+      if (failedBoundaries !== null) {
+        if (
+          failedBoundaries.has(fiber) ||
+          // $FlowFixMe[incompatible-use] found when upgrading Flow
+          (alternate !== null && failedBoundaries.has(alternate))
+        ) {
+          needsRemount = true;
+        }
+      }
+
+      if (needsRemount) {
+        fiber._debugNeedsRemount = true;
+      }
+      if (needsRemount || needsRender) {
+        const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+        if (root !== null) {
+          scheduleUpdateOnFiber(root, fiber, SyncLane);
+        }
+      }
+      if (child !== null && !needsRemount) {
+        scheduleFibersWithFamiliesRecursively(
+          child,
+          updatedFamilies,
+          staleFamilies,
+        );
+      }
+
+      if (sibling === null) {
+        break;
+      }
+      fiber = sibling;
+    } while (true);
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
new file mode 100644
index 00000000000..0c758202b52
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -0,0 +1,957 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {
+  Instance,
+  TextInstance,
+  HydratableInstance,
+  ActivityInstance,
+  SuspenseInstance,
+  Container,
+  HostContext,
+} from './ReactFiberConfig';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
+import type {TreeContext} from './ReactFiberTreeContext';
+import type {CapturedValue} from './ReactCapturedValue';
+import type {HydrationDiffNode} from './ReactFiberHydrationDiffs';
+
+import {
+  HostComponent,
+  HostSingleton,
+  HostRoot,
+  SuspenseComponent,
+  ActivityComponent,
+} from './ReactWorkTags';
+
+import {createCapturedValueAtFiber} from './ReactCapturedValue';
+
+import {createFiberFromDehydratedFragment} from './ReactFiber';
+import {
+  shouldSetTextContent,
+  supportsHydration,
+  supportsSingletons,
+  getNextHydratableSibling,
+  getNextHydratableSiblingAfterSingleton,
+  getFirstHydratableChild,
+  getFirstHydratableChildWithinContainer,
+  getFirstHydratableChildWithinActivityInstance,
+  getFirstHydratableChildWithinSuspenseInstance,
+  getFirstHydratableChildWithinSingleton,
+  hydrateInstance,
+  diffHydratedPropsForDevWarnings,
+  describeHydratableInstanceForDevWarnings,
+  hydrateTextInstance,
+  diffHydratedTextForDevWarnings,
+  hydrateActivityInstance,
+  hydrateSuspenseInstance,
+  getNextHydratableInstanceAfterActivityInstance,
+  getNextHydratableInstanceAfterSuspenseInstance,
+  shouldDeleteUnhydratedTailInstances,
+  resolveSingletonInstance,
+  canHydrateInstance,
+  canHydrateTextInstance,
+  canHydrateActivityInstance,
+  canHydrateSuspenseInstance,
+  canHydrateFormStateMarker,
+  isFormStateMarkerMatching,
+  validateHydratableInstance,
+  validateHydratableTextInstance,
+} from './ReactFiberConfig';
+import {OffscreenLane} from './ReactFiberLane';
+import {
+  getSuspendedTreeContext,
+  restoreSuspendedTreeContext,
+} from './ReactFiberTreeContext';
+import {queueRecoverableErrors} from './ReactFiberWorkLoop';
+import {getRootHostContainer, getHostContext} from './ReactFiberHostContext';
+import {describeDiff} from './ReactFiberHydrationDiffs';
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+
+// The deepest Fiber on the stack involved in a hydration context.
+// This may have been an insertion or a hydration.
+let hydrationParentFiber: null | Fiber = null;
+let nextHydratableInstance: null | HydratableInstance = null;
+let isHydrating: boolean = false;
+
+// This flag allows for warning supression when we expect there to be mismatches
+// due to earlier mismatches or a suspended fiber.
+let didSuspendOrErrorDEV: boolean = false;
+
+// Hydration differences found that haven't yet been logged.
+let hydrationDiffRootDEV: null | HydrationDiffNode = null;
+
+// Hydration errors that were thrown inside this boundary
+let hydrationErrors: Array<CapturedValue<mixed>> | null = null;
+
+let rootOrSingletonContext = false;
+
+// Builds a common ancestor tree from the root down for collecting diffs.
+function buildHydrationDiffNode(
+  fiber: Fiber,
+  distanceFromLeaf: number,
+): HydrationDiffNode {
+  if (fiber.return === null) {
+    // We're at the root.
+    if (hydrationDiffRootDEV === null) {
+      hydrationDiffRootDEV = {
+        fiber: fiber,
+        children: [],
+        serverProps: undefined,
+        serverTail: [],
+        distanceFromLeaf: distanceFromLeaf,
+      };
+    } else if (hydrationDiffRootDEV.fiber !== fiber) {
+      throw new Error(
+        'Saw multiple hydration diff roots in a pass. This is a bug in React.',
+      );
+    } else if (hydrationDiffRootDEV.distanceFromLeaf > distanceFromLeaf) {
+      hydrationDiffRootDEV.distanceFromLeaf = distanceFromLeaf;
+    }
+    return hydrationDiffRootDEV;
+  }
+  const siblings = buildHydrationDiffNode(
+    fiber.return,
+    distanceFromLeaf + 1,
+  ).children;
+  // The same node may already exist in the parent. Since we currently always render depth first
+  // and rerender if we suspend or terminate early, if a shared ancestor was added we should still
+  // be inside of that shared ancestor which means it was the last one to be added. If this changes
+  // we may have to scan the whole set.
+  if (siblings.length > 0 && siblings[siblings.length - 1].fiber === fiber) {
+    const existing = siblings[siblings.length - 1];
+    if (existing.distanceFromLeaf > distanceFromLeaf) {
+      existing.distanceFromLeaf = distanceFromLeaf;
+    }
+    return existing;
+  }
+  const newNode: HydrationDiffNode = {
+    fiber: fiber,
+    children: [],
+    serverProps: undefined,
+    serverTail: [],
+    distanceFromLeaf: distanceFromLeaf,
+  };
+  siblings.push(newNode);
+  return newNode;
+}
+
+function warnIfHydrating() {
+  if (__DEV__) {
+    if (isHydrating) {
+      console.error(
+        'We should not be hydrating here. This is a bug in React. Please file a bug.',
+      );
+    }
+  }
+}
+
+export function markDidThrowWhileHydratingDEV() {
+  if (__DEV__) {
+    didSuspendOrErrorDEV = true;
+  }
+}
+
+function enterHydrationState(fiber: Fiber): boolean {
+  if (!supportsHydration) {
+    return false;
+  }
+
+  const parentInstance: Container = fiber.stateNode.containerInfo;
+  nextHydratableInstance =
+    getFirstHydratableChildWithinContainer(parentInstance);
+  hydrationParentFiber = fiber;
+  isHydrating = true;
+  hydrationErrors = null;
+  didSuspendOrErrorDEV = false;
+  hydrationDiffRootDEV = null;
+  rootOrSingletonContext = true;
+
+  return true;
+}
+
+function reenterHydrationStateFromDehydratedActivityInstance(
+  fiber: Fiber,
+  activityInstance: ActivityInstance,
+  treeContext: TreeContext | null,
+): boolean {
+  if (!supportsHydration) {
+    return false;
+  }
+  nextHydratableInstance =
+    getFirstHydratableChildWithinActivityInstance(activityInstance);
+  hydrationParentFiber = fiber;
+  isHydrating = true;
+  hydrationErrors = null;
+  didSuspendOrErrorDEV = false;
+  hydrationDiffRootDEV = null;
+  rootOrSingletonContext = false;
+  if (treeContext !== null) {
+    restoreSuspendedTreeContext(fiber, treeContext);
+  }
+  return true;
+}
+
+function reenterHydrationStateFromDehydratedSuspenseInstance(
+  fiber: Fiber,
+  suspenseInstance: SuspenseInstance,
+  treeContext: TreeContext | null,
+): boolean {
+  if (!supportsHydration) {
+    return false;
+  }
+  nextHydratableInstance =
+    getFirstHydratableChildWithinSuspenseInstance(suspenseInstance);
+  hydrationParentFiber = fiber;
+  isHydrating = true;
+  hydrationErrors = null;
+  didSuspendOrErrorDEV = false;
+  hydrationDiffRootDEV = null;
+  rootOrSingletonContext = false;
+  if (treeContext !== null) {
+    restoreSuspendedTreeContext(fiber, treeContext);
+  }
+  return true;
+}
+
+function warnNonHydratedInstance(
+  fiber: Fiber,
+  rejectedCandidate: null | HydratableInstance,
+) {
+  if (__DEV__) {
+    if (didSuspendOrErrorDEV) {
+      // Inside a boundary that already suspended. We're currently rendering the
+      // siblings of a suspended node. The mismatch may be due to the missing
+      // data, so it's probably a false positive.
+      return;
+    }
+
+    // Add this fiber to the diff tree.
+    const diffNode = buildHydrationDiffNode(fiber, 0);
+    // We use null as a signal that there was no node to match.
+    diffNode.serverProps = null;
+    if (rejectedCandidate !== null) {
+      const description =
+        describeHydratableInstanceForDevWarnings(rejectedCandidate);
+      diffNode.serverTail.push(description);
+    }
+  }
+}
+
+function tryHydrateInstance(
+  fiber: Fiber,
+  nextInstance: any,
+  hostContext: HostContext,
+) {
+  // fiber is a HostComponent Fiber
+  const instance = canHydrateInstance(
+    nextInstance,
+    fiber.type,
+    fiber.pendingProps,
+    rootOrSingletonContext,
+  );
+  if (instance !== null) {
+    fiber.stateNode = (instance: Instance);
+
+    if (__DEV__) {
+      if (!didSuspendOrErrorDEV) {
+        const differences = diffHydratedPropsForDevWarnings(
+          instance,
+          fiber.type,
+          fiber.pendingProps,
+          hostContext,
+        );
+        if (differences !== null) {
+          const diffNode = buildHydrationDiffNode(fiber, 0);
+          diffNode.serverProps = differences;
+        }
+      }
+    }
+
+    hydrationParentFiber = fiber;
+    nextHydratableInstance = getFirstHydratableChild(instance);
+    rootOrSingletonContext = false;
+    return true;
+  }
+  return false;
+}
+
+function tryHydrateText(fiber: Fiber, nextInstance: any) {
+  // fiber is a HostText Fiber
+  const text = fiber.pendingProps;
+  const textInstance = canHydrateTextInstance(
+    nextInstance,
+    text,
+    rootOrSingletonContext,
+  );
+  if (textInstance !== null) {
+    fiber.stateNode = (textInstance: TextInstance);
+    hydrationParentFiber = fiber;
+    // Text Instances don't have children so there's nothing to hydrate.
+    nextHydratableInstance = null;
+    return true;
+  }
+  return false;
+}
+
+function tryHydrateActivity(
+  fiber: Fiber,
+  nextInstance: any,
+): null | ActivityInstance {
+  // fiber is a ActivityComponent Fiber
+  const activityInstance = canHydrateActivityInstance(
+    nextInstance,
+    rootOrSingletonContext,
+  );
+  if (activityInstance !== null) {
+    const activityState: ActivityState = {
+      dehydrated: activityInstance,
+      treeContext: getSuspendedTreeContext(),
+      retryLane: OffscreenLane,
+      hydrationErrors: null,
+    };
+    fiber.memoizedState = activityState;
+    // 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(activityInstance);
+    dehydratedFragment.return = fiber;
+    fiber.child = dehydratedFragment;
+    hydrationParentFiber = fiber;
+    // While an Activity Instance does have children, we won't step into
+    // it during the first pass. Instead, we'll reenter it later.
+    nextHydratableInstance = null;
+  }
+  return activityInstance;
+}
+
+function tryHydrateSuspense(
+  fiber: Fiber,
+  nextInstance: any,
+): null | SuspenseInstance {
+  // fiber is a SuspenseComponent Fiber
+  const suspenseInstance = canHydrateSuspenseInstance(
+    nextInstance,
+    rootOrSingletonContext,
+  );
+  if (suspenseInstance !== null) {
+    const suspenseState: SuspenseState = {
+      dehydrated: suspenseInstance,
+      treeContext: getSuspendedTreeContext(),
+      retryLane: OffscreenLane,
+      hydrationErrors: null,
+    };
+    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;
+    hydrationParentFiber = fiber;
+    // While a Suspense Instance does have children, we won't step into
+    // it during the first pass. Instead, we'll reenter it later.
+    nextHydratableInstance = null;
+  }
+  return suspenseInstance;
+}
+
+export const HydrationMismatchException: mixed = new Error(
+  'Hydration Mismatch Exception: This is not a real error, and should not leak into ' +
+    "userspace. If you're seeing this, it's likely a bug in React.",
+);
+
+function throwOnHydrationMismatch(fiber: Fiber, fromText: boolean = false) {
+  let diff = '';
+  if (__DEV__) {
+    // Consume the diff root for this mismatch.
+    // Any other errors will get their own diffs.
+    const diffRoot = hydrationDiffRootDEV;
+    if (diffRoot !== null) {
+      hydrationDiffRootDEV = null;
+      diff = describeDiff(diffRoot);
+    }
+  }
+  const error = new Error(
+    `Hydration failed because the server rendered ${fromText ? 'text' : 'HTML'} didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+` +
+      '\n' +
+      "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+      "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+      "- Date formatting in a user's locale which doesn't match the server.\n" +
+      '- External changing data without sending a snapshot of it along with the HTML.\n' +
+      '- Invalid HTML tag nesting.\n' +
+      '\n' +
+      'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n' +
+      '\n' +
+      'https://react.dev/link/hydration-mismatch' +
+      diff,
+  );
+  queueHydrationError(createCapturedValueAtFiber(error, fiber));
+  throw HydrationMismatchException;
+}
+
+function claimHydratableSingleton(fiber: Fiber): void {
+  if (supportsSingletons) {
+    if (!isHydrating) {
+      return;
+    }
+    const currentRootContainer = getRootHostContainer();
+    const currentHostContext = getHostContext();
+    const instance = (fiber.stateNode = resolveSingletonInstance(
+      fiber.type,
+      fiber.pendingProps,
+      currentRootContainer,
+      currentHostContext,
+      false,
+    ));
+
+    if (__DEV__) {
+      if (!didSuspendOrErrorDEV) {
+        const differences = diffHydratedPropsForDevWarnings(
+          instance,
+          fiber.type,
+          fiber.pendingProps,
+          currentHostContext,
+        );
+        if (differences !== null) {
+          const diffNode = buildHydrationDiffNode(fiber, 0);
+          diffNode.serverProps = differences;
+        }
+      }
+    }
+
+    hydrationParentFiber = fiber;
+    rootOrSingletonContext = true;
+    nextHydratableInstance = getFirstHydratableChildWithinSingleton(
+      fiber.type,
+      instance,
+      nextHydratableInstance,
+    );
+  }
+}
+
+function tryToClaimNextHydratableInstance(fiber: Fiber): void {
+  if (!isHydrating) {
+    return;
+  }
+
+  // Validate that this is ok to render here before any mismatches.
+  const currentHostContext = getHostContext();
+  const shouldKeepWarning = validateHydratableInstance(
+    fiber.type,
+    fiber.pendingProps,
+    currentHostContext,
+  );
+
+  const nextInstance = nextHydratableInstance;
+  if (
+    !nextInstance ||
+    !tryHydrateInstance(fiber, nextInstance, currentHostContext)
+  ) {
+    if (shouldKeepWarning) {
+      warnNonHydratedInstance(fiber, nextInstance);
+    }
+    throwOnHydrationMismatch(fiber);
+  }
+}
+
+function tryToClaimNextHydratableTextInstance(fiber: Fiber): void {
+  if (!isHydrating) {
+    return;
+  }
+  const text = fiber.pendingProps;
+
+  let shouldKeepWarning = true;
+  // Validate that this is ok to render here before any mismatches.
+  const currentHostContext = getHostContext();
+  shouldKeepWarning = validateHydratableTextInstance(text, currentHostContext);
+
+  const nextInstance = nextHydratableInstance;
+  if (!nextInstance || !tryHydrateText(fiber, nextInstance)) {
+    if (shouldKeepWarning) {
+      warnNonHydratedInstance(fiber, nextInstance);
+    }
+    throwOnHydrationMismatch(fiber);
+  }
+}
+
+function claimNextHydratableActivityInstance(fiber: Fiber): ActivityInstance {
+  const nextInstance = nextHydratableInstance;
+  const activityInstance = nextInstance
+    ? tryHydrateActivity(fiber, nextInstance)
+    : null;
+  if (activityInstance === null) {
+    warnNonHydratedInstance(fiber, nextInstance);
+    throw throwOnHydrationMismatch(fiber);
+  }
+  return activityInstance;
+}
+
+function claimNextHydratableSuspenseInstance(fiber: Fiber): SuspenseInstance {
+  const nextInstance = nextHydratableInstance;
+  const suspenseInstance = nextInstance
+    ? tryHydrateSuspense(fiber, nextInstance)
+    : null;
+  if (suspenseInstance === null) {
+    warnNonHydratedInstance(fiber, nextInstance);
+    throw throwOnHydrationMismatch(fiber);
+  }
+  return suspenseInstance;
+}
+
+export function tryToClaimNextHydratableFormMarkerInstance(
+  fiber: Fiber,
+): boolean {
+  if (!isHydrating) {
+    return false;
+  }
+  if (nextHydratableInstance) {
+    const markerInstance = canHydrateFormStateMarker(
+      nextHydratableInstance,
+      rootOrSingletonContext,
+    );
+    if (markerInstance) {
+      // Found the marker instance.
+      nextHydratableInstance = getNextHydratableSibling(markerInstance);
+      // Return true if this marker instance should use the state passed
+      // to hydrateRoot.
+      // TODO: As an optimization, Fizz should only emit these markers if form
+      // state is passed at the root.
+      return isFormStateMarkerMatching(markerInstance);
+    }
+  }
+  // Should have found a marker instance. Throw an error to trigger client
+  // rendering. We don't bother to check if we're in a concurrent root because
+  // useActionState is a new API, so backwards compat is not an issue.
+  throwOnHydrationMismatch(fiber);
+  return false;
+}
+
+function prepareToHydrateHostInstance(
+  fiber: Fiber,
+  hostContext: HostContext,
+): void {
+  if (!supportsHydration) {
+    throw new Error(
+      'Expected prepareToHydrateHostInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
+  const instance: Instance = fiber.stateNode;
+  const didHydrate = hydrateInstance(
+    instance,
+    fiber.type,
+    fiber.memoizedProps,
+    hostContext,
+    fiber,
+  );
+  if (!didHydrate) {
+    throwOnHydrationMismatch(fiber, true);
+  }
+}
+
+function prepareToHydrateHostTextInstance(fiber: Fiber): void {
+  if (!supportsHydration) {
+    throw new Error(
+      'Expected prepareToHydrateHostTextInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
+  const textInstance: TextInstance = fiber.stateNode;
+  const textContent: string = fiber.memoizedProps;
+  const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
+  let parentProps = null;
+  // We assume that prepareToHydrateHostTextInstance is called in a context where the
+  // hydration parent is the parent host component of this host text.
+  const returnFiber = hydrationParentFiber;
+  if (returnFiber !== null) {
+    switch (returnFiber.tag) {
+      case HostRoot: {
+        if (__DEV__) {
+          if (shouldWarnIfMismatchDev) {
+            const difference = diffHydratedTextForDevWarnings(
+              textInstance,
+              textContent,
+              parentProps,
+            );
+            if (difference !== null) {
+              const diffNode = buildHydrationDiffNode(fiber, 0);
+              diffNode.serverProps = difference;
+            }
+          }
+        }
+        break;
+      }
+      case HostSingleton:
+      case HostComponent: {
+        parentProps = returnFiber.memoizedProps;
+        if (__DEV__) {
+          if (shouldWarnIfMismatchDev) {
+            const difference = diffHydratedTextForDevWarnings(
+              textInstance,
+              textContent,
+              parentProps,
+            );
+            if (difference !== null) {
+              const diffNode = buildHydrationDiffNode(fiber, 0);
+              diffNode.serverProps = difference;
+            }
+          }
+        }
+        break;
+      }
+    }
+    // TODO: What if it's a SuspenseInstance?
+  }
+
+  const didHydrate = hydrateTextInstance(
+    textInstance,
+    textContent,
+    fiber,
+    parentProps,
+  );
+  if (!didHydrate) {
+    throwOnHydrationMismatch(fiber, true);
+  }
+}
+
+function prepareToHydrateHostActivityInstance(fiber: Fiber): void {
+  if (!supportsHydration) {
+    throw new Error(
+      'Expected prepareToHydrateHostActivityInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+  const activityState: null | ActivityState = fiber.memoizedState;
+  const activityInstance: null | ActivityInstance =
+    activityState !== null ? activityState.dehydrated : null;
+
+  if (!activityInstance) {
+    throw new Error(
+      'Expected to have a hydrated activity instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
+  hydrateActivityInstance(activityInstance, fiber);
+}
+
+function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
+  if (!supportsHydration) {
+    throw new Error(
+      'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
+  const suspenseState: null | SuspenseState = fiber.memoizedState;
+  const suspenseInstance: null | SuspenseInstance =
+    suspenseState !== null ? suspenseState.dehydrated : null;
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
+  hydrateSuspenseInstance(suspenseInstance, fiber);
+}
+
+function skipPastDehydratedActivityInstance(
+  fiber: Fiber,
+): null | HydratableInstance {
+  const activityState: null | ActivityState = fiber.memoizedState;
+  const activityInstance: null | ActivityInstance =
+    activityState !== null ? activityState.dehydrated : null;
+
+  if (!activityInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
+  return getNextHydratableInstanceAfterActivityInstance(activityInstance);
+}
+
+function skipPastDehydratedSuspenseInstance(
+  fiber: Fiber,
+): null | HydratableInstance {
+  if (!supportsHydration) {
+    throw new Error(
+      'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+  const suspenseState: null | SuspenseState = fiber.memoizedState;
+  const suspenseInstance: null | SuspenseInstance =
+    suspenseState !== null ? suspenseState.dehydrated : null;
+
+  if (!suspenseInstance) {
+    throw new Error(
+      '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 {
+  hydrationParentFiber = fiber.return;
+  while (hydrationParentFiber) {
+    switch (hydrationParentFiber.tag) {
+      case HostComponent:
+      case ActivityComponent:
+      case SuspenseComponent:
+        rootOrSingletonContext = false;
+        return;
+      case HostSingleton:
+      case HostRoot:
+        rootOrSingletonContext = true;
+        return;
+      default:
+        hydrationParentFiber = hydrationParentFiber.return;
+    }
+  }
+}
+
+function popHydrationState(fiber: Fiber): boolean {
+  if (!supportsHydration) {
+    return false;
+  }
+  if (fiber !== hydrationParentFiber) {
+    // We're deeper than the current hydration context, inside an inserted
+    // tree.
+    return false;
+  }
+  if (!isHydrating) {
+    // If we're not currently hydrating but we're in a hydration context, then
+    // we were an insertion and now need to pop up reenter hydration of our
+    // siblings.
+    popToNextHostParent(fiber);
+    isHydrating = true;
+    return false;
+  }
+
+  const tag = fiber.tag;
+
+  if (supportsSingletons) {
+    // With float we never clear the Root, or Singleton instances. We also do not clear Instances
+    // that have singleton text content
+    if (
+      tag !== HostRoot &&
+      tag !== HostSingleton &&
+      !(
+        tag === HostComponent &&
+        (!shouldDeleteUnhydratedTailInstances(fiber.type) ||
+          shouldSetTextContent(fiber.type, fiber.memoizedProps))
+      )
+    ) {
+      const nextInstance = nextHydratableInstance;
+      if (nextInstance) {
+        warnIfUnhydratedTailNodes(fiber);
+        throwOnHydrationMismatch(fiber);
+      }
+    }
+  } else {
+    // If we have any remaining hydratable nodes, we need to delete them now.
+    // We only do this deeper than head and body since they tend to have random
+    // other nodes in them. We also ignore components with pure text content in
+    // side of them. We also don't delete anything inside the root container.
+    if (
+      tag !== HostRoot &&
+      (tag !== HostComponent ||
+        (shouldDeleteUnhydratedTailInstances(fiber.type) &&
+          !shouldSetTextContent(fiber.type, fiber.memoizedProps)))
+    ) {
+      const nextInstance = nextHydratableInstance;
+      if (nextInstance) {
+        warnIfUnhydratedTailNodes(fiber);
+        throwOnHydrationMismatch(fiber);
+      }
+    }
+  }
+  popToNextHostParent(fiber);
+  if (tag === SuspenseComponent) {
+    nextHydratableInstance = skipPastDehydratedSuspenseInstance(fiber);
+  } else if (tag === ActivityComponent) {
+    nextHydratableInstance = skipPastDehydratedActivityInstance(fiber);
+  } else if (supportsSingletons && tag === HostSingleton) {
+    nextHydratableInstance = getNextHydratableSiblingAfterSingleton(
+      fiber.type,
+      nextHydratableInstance,
+    );
+  } else {
+    nextHydratableInstance = hydrationParentFiber
+      ? getNextHydratableSibling(fiber.stateNode)
+      : null;
+  }
+  return true;
+}
+
+function warnIfUnhydratedTailNodes(fiber: Fiber) {
+  if (__DEV__) {
+    let nextInstance = nextHydratableInstance;
+    while (nextInstance) {
+      const diffNode = buildHydrationDiffNode(fiber, 0);
+      const description =
+        describeHydratableInstanceForDevWarnings(nextInstance);
+      diffNode.serverTail.push(description);
+      if (description.type === 'Suspense') {
+        const suspenseInstance: SuspenseInstance = (nextInstance: any);
+        nextInstance =
+          getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
+      } else {
+        nextInstance = getNextHydratableSibling(nextInstance);
+      }
+    }
+  }
+}
+
+function resetHydrationState(): void {
+  if (!supportsHydration) {
+    return;
+  }
+
+  hydrationParentFiber = null;
+  nextHydratableInstance = null;
+  isHydrating = false;
+  didSuspendOrErrorDEV = false;
+}
+
+// Restore the hydration cursor when unwinding a HostComponent that already
+// claimed a DOM node. This is a fork of popHydrationState that does all the
+// same validity checks but restores the cursor to this fiber's DOM node
+// instead of advancing past it. It also does NOT clear unhydrated tail nodes
+// or throw on mismatches since we're unwinding, not completing.
+//
+// This is needed when replaySuspendedUnitOfWork calls unwindInterruptedWork
+// before re-running beginWork on the same fiber, or when throwAndUnwindWorkLoop
+// calls unwindWork on ancestor fibers.
+function popHydrationStateOnInterruptedWork(fiber: Fiber): void {
+  if (!supportsHydration) {
+    return;
+  }
+  if (fiber !== hydrationParentFiber) {
+    // We're deeper than the current hydration context, inside an inserted
+    // tree. Don't touch the cursor.
+    return;
+  }
+  if (!isHydrating) {
+    // If we're not currently hydrating but we're in a hydration context, then
+    // we were an insertion and now need to pop up to reenter hydration of our
+    // siblings. Same as popHydrationState.
+    popToNextHostParent(fiber);
+    isHydrating = true;
+    return;
+  }
+
+  // We're in a valid hydration context. Restore the cursor to this fiber's
+  // DOM node so that when beginWork re-runs, it can claim the same node.
+  // Unlike popHydrationState, we do NOT check for unhydrated tail nodes
+  // or advance the cursor - we're restoring, not completing.
+  popToNextHostParent(fiber);
+  if (fiber.tag === HostComponent && fiber.stateNode != null) {
+    nextHydratableInstance = fiber.stateNode;
+  }
+}
+
+export function upgradeHydrationErrorsToRecoverable(): Array<
+  CapturedValue<mixed>,
+> | null {
+  const queuedErrors = hydrationErrors;
+  if (queuedErrors !== null) {
+    // Successfully completed a forced client render. The errors that occurred
+    // during the hydration attempt are now recovered. We will log them in
+    // commit phase, once the entire tree has finished.
+    queueRecoverableErrors(queuedErrors);
+    hydrationErrors = null;
+  }
+  return queuedErrors;
+}
+
+function getIsHydrating(): boolean {
+  return isHydrating;
+}
+
+export function queueHydrationError(error: CapturedValue<mixed>): void {
+  if (hydrationErrors === null) {
+    hydrationErrors = [error];
+  } else {
+    hydrationErrors.push(error);
+  }
+}
+
+export function emitPendingHydrationWarnings() {
+  if (__DEV__) {
+    // If we haven't yet thrown any hydration errors by the time we reach the end we've successfully
+    // hydrated, however, we might still have DEV-only mismatches that we log now.
+    const diffRoot = hydrationDiffRootDEV;
+    if (diffRoot !== null) {
+      hydrationDiffRootDEV = null;
+      const diff = describeDiff(diffRoot);
+
+      // Just pick the DFS-first leaf as the owner.
+      // Should be good enough since most warnings only have a single error.
+      let diffOwner: HydrationDiffNode = diffRoot;
+      while (diffOwner.children.length > 0) {
+        diffOwner = diffOwner.children[0];
+      }
+
+      runWithFiberInDEV(diffOwner.fiber, () => {
+        console.error(
+          "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. " +
+            'This can happen if a SSR-ed Client Component used:\n' +
+            '\n' +
+            "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+            "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+            "- Date formatting in a user's locale which doesn't match the server.\n" +
+            '- External changing data without sending a snapshot of it along with the HTML.\n' +
+            '- Invalid HTML tag nesting.\n' +
+            '\n' +
+            'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n' +
+            '\n' +
+            '%s%s',
+          'https://react.dev/link/hydration-mismatch',
+          diff,
+        );
+      });
+    }
+  }
+}
+
+export {
+  warnIfHydrating,
+  enterHydrationState,
+  getIsHydrating,
+  reenterHydrationStateFromDehydratedActivityInstance,
+  reenterHydrationStateFromDehydratedSuspenseInstance,
+  resetHydrationState,
+  popHydrationStateOnInterruptedWork,
+  claimHydratableSingleton,
+  tryToClaimNextHydratableInstance,
+  tryToClaimNextHydratableTextInstance,
+  claimNextHydratableActivityInstance,
+  claimNextHydratableSuspenseInstance,
+  prepareToHydrateHostInstance,
+  prepareToHydrateHostTextInstance,
+  prepareToHydrateHostActivityInstance,
+  prepareToHydrateHostSuspenseInstance,
+  popHydrationState,
+};
diff --git a/packages/react-reconciler/src/ReactFiberHydrationDiffs.js b/packages/react-reconciler/src/ReactFiberHydrationDiffs.js
new file mode 100644
index 00000000000..51df2a25d6c
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHydrationDiffs.js
@@ -0,0 +1,656 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+
+import {
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  LazyComponent,
+  ActivityComponent,
+  SuspenseComponent,
+  SuspenseListComponent,
+  FunctionComponent,
+  ForwardRef,
+  SimpleMemoComponent,
+  ClassComponent,
+  HostText,
+} from './ReactWorkTags';
+
+import {enableSrcObject} from 'shared/ReactFeatureFlags';
+
+import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import assign from 'shared/assign';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+
+import isArray from 'shared/isArray';
+
+export type HydrationDiffNode = {
+  fiber: Fiber,
+  children: Array<HydrationDiffNode>,
+  serverProps: void | null | $ReadOnly<{[propName: string]: mixed}> | string, // null means no matching server node
+  serverTail: Array<
+    | $ReadOnly<{type: string, props: $ReadOnly<{[propName: string]: mixed}>}>
+    | string,
+  >,
+  distanceFromLeaf: number,
+};
+
+const maxRowLength = 120;
+const idealDepth = 15;
+
+function findNotableNode(
+  node: HydrationDiffNode,
+  indent: number,
+): HydrationDiffNode {
+  if (
+    node.serverProps === undefined &&
+    node.serverTail.length === 0 &&
+    node.children.length === 1 &&
+    node.distanceFromLeaf > 3 &&
+    node.distanceFromLeaf > idealDepth - indent
+  ) {
+    // This is not an interesting node for contextual purposes so we can skip it.
+    const child = node.children[0];
+    return findNotableNode(child, indent);
+  }
+  return node;
+}
+
+function indentation(indent: number): string {
+  return '  ' + '  '.repeat(indent);
+}
+
+function added(indent: number): string {
+  return '+ ' + '  '.repeat(indent);
+}
+
+function removed(indent: number): string {
+  return '- ' + '  '.repeat(indent);
+}
+
+function describeFiberType(fiber: Fiber): null | string {
+  switch (fiber.tag) {
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent:
+      return fiber.type;
+    case LazyComponent:
+      return 'Lazy';
+    case ActivityComponent:
+      return 'Activity';
+    case SuspenseComponent:
+      return 'Suspense';
+    case SuspenseListComponent:
+      return 'SuspenseList';
+    case FunctionComponent:
+    case SimpleMemoComponent:
+      const fn = fiber.type;
+      return fn.displayName || fn.name || null;
+    case ForwardRef:
+      const render = fiber.type.render;
+      return render.displayName || render.name || null;
+    case ClassComponent:
+      const ctr = fiber.type;
+      return ctr.displayName || ctr.name || null;
+    default:
+      // Skip
+      return null;
+  }
+}
+
+const needsEscaping = /["'&<>\n\t]|^\s|\s$/;
+
+function describeTextNode(content: string, maxLength: number): string {
+  if (needsEscaping.test(content)) {
+    const encoded = JSON.stringify(content);
+    if (encoded.length > maxLength - 2) {
+      if (maxLength < 8) {
+        return '{"..."}';
+      }
+      return '{' + encoded.slice(0, maxLength - 7) + '..."}';
+    }
+    return '{' + encoded + '}';
+  } else {
+    if (content.length > maxLength) {
+      if (maxLength < 5) {
+        return '{"..."}';
+      }
+      return content.slice(0, maxLength - 3) + '...';
+    }
+    return content;
+  }
+}
+
+function describeTextDiff(
+  clientText: string,
+  serverProps: mixed,
+  indent: number,
+): string {
+  const maxLength = maxRowLength - indent * 2;
+  if (serverProps === null) {
+    return added(indent) + describeTextNode(clientText, maxLength) + '\n';
+  } else if (typeof serverProps === 'string') {
+    let serverText: string = serverProps;
+    let firstDiff = 0;
+    for (
+      ;
+      firstDiff < serverText.length && firstDiff < clientText.length;
+      firstDiff++
+    ) {
+      if (
+        serverText.charCodeAt(firstDiff) !== clientText.charCodeAt(firstDiff)
+      ) {
+        break;
+      }
+    }
+    if (firstDiff > maxLength - 8 && firstDiff > 10) {
+      // The first difference between the two strings would be cut off, so cut off in
+      // the beginning instead.
+      clientText = '...' + clientText.slice(firstDiff - 8);
+      serverText = '...' + serverText.slice(firstDiff - 8);
+    }
+    return (
+      added(indent) +
+      describeTextNode(clientText, maxLength) +
+      '\n' +
+      removed(indent) +
+      describeTextNode(serverText, maxLength) +
+      '\n'
+    );
+  } else {
+    return indentation(indent) + describeTextNode(clientText, maxLength) + '\n';
+  }
+}
+
+function objectName(object: mixed): string {
+  // $FlowFixMe[method-unbinding]
+  const name = Object.prototype.toString.call(object);
+  return name.replace(/^\[object (.*)\]$/, function (m, p0) {
+    return p0;
+  });
+}
+
+function describeValue(value: mixed, maxLength: number): string {
+  switch (typeof value) {
+    case 'string': {
+      const encoded = JSON.stringify(value);
+      if (encoded.length > maxLength) {
+        if (maxLength < 5) {
+          return '"..."';
+        }
+        return encoded.slice(0, maxLength - 4) + '..."';
+      }
+      return encoded;
+    }
+    case 'object': {
+      if (value === null) {
+        return 'null';
+      }
+      if (isArray(value)) {
+        return '[...]';
+      }
+      if ((value: any).$$typeof === REACT_ELEMENT_TYPE) {
+        const type = getComponentNameFromType((value: any).type);
+        return type ? '<' + type + '>' : '<...>';
+      }
+      const name = objectName(value);
+      if (name === 'Object') {
+        let properties = '';
+        maxLength -= 2;
+        for (let propName in value) {
+          if (!value.hasOwnProperty(propName)) {
+            continue;
+          }
+          const jsonPropName = JSON.stringify(propName);
+          if (jsonPropName !== '"' + propName + '"') {
+            propName = jsonPropName;
+          }
+          maxLength -= propName.length - 2;
+          const propValue = describeValue(
+            value[propName],
+            maxLength < 15 ? maxLength : 15,
+          );
+          maxLength -= propValue.length;
+          if (maxLength < 0) {
+            properties += properties === '' ? '...' : ', ...';
+            break;
+          }
+          properties +=
+            (properties === '' ? '' : ',') + propName + ':' + propValue;
+        }
+        return '{' + properties + '}';
+      } else if (enableSrcObject && (name === 'Blob' || name === 'File')) {
+        return name + ':' + (value: any).type;
+      }
+      return name;
+    }
+    case 'function': {
+      const name = (value: any).displayName || value.name;
+      return name ? 'function ' + name : 'function';
+    }
+    default:
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      return String(value);
+  }
+}
+
+function describePropValue(value: mixed, maxLength: number): string {
+  if (typeof value === 'string' && !needsEscaping.test(value)) {
+    if (value.length > maxLength - 2) {
+      if (maxLength < 5) {
+        return '"..."';
+      }
+      return '"' + value.slice(0, maxLength - 5) + '..."';
+    }
+    return '"' + value + '"';
+  }
+  return '{' + describeValue(value, maxLength - 2) + '}';
+}
+
+function describeCollapsedElement(
+  type: string,
+  props: {[propName: string]: mixed},
+  indent: number,
+): string {
+  // This function tries to fit the props into a single line for non-essential elements.
+  // We also ignore children because we're not going deeper.
+
+  let maxLength = maxRowLength - indent * 2 - type.length - 2;
+
+  let content = '';
+
+  for (const propName in props) {
+    if (!props.hasOwnProperty(propName)) {
+      continue;
+    }
+    if (propName === 'children') {
+      // Ignored.
+      continue;
+    }
+    const propValue = describePropValue(props[propName], 15);
+    maxLength -= propName.length + propValue.length + 2;
+    if (maxLength < 0) {
+      content += ' ...';
+      break;
+    }
+    content += ' ' + propName + '=' + propValue;
+  }
+
+  return indentation(indent) + '<' + type + content + '>\n';
+}
+
+function describeExpandedElement(
+  type: string,
+  props: {+[propName: string]: mixed},
+  rowPrefix: string,
+): string {
+  // This function tries to fit the props into a single line for non-essential elements.
+  // We also ignore children because we're not going deeper.
+
+  let remainingRowLength = maxRowLength - rowPrefix.length - type.length;
+
+  // We add the properties to a set so we can choose later whether we'll put it on one
+  // line or multiple lines.
+
+  const properties = [];
+
+  for (const propName in props) {
+    if (!props.hasOwnProperty(propName)) {
+      continue;
+    }
+    if (propName === 'children') {
+      // Ignored.
+      continue;
+    }
+    const maxLength = maxRowLength - rowPrefix.length - propName.length - 1;
+    const propValue = describePropValue(props[propName], maxLength);
+    remainingRowLength -= propName.length + propValue.length + 2;
+    properties.push(propName + '=' + propValue);
+  }
+
+  if (properties.length === 0) {
+    return rowPrefix + '<' + type + '>\n';
+  } else if (remainingRowLength > 0) {
+    // We can fit all on one row.
+    return rowPrefix + '<' + type + ' ' + properties.join(' ') + '>\n';
+  } else {
+    // Split into one row per property:
+    return (
+      rowPrefix +
+      '<' +
+      type +
+      '\n' +
+      rowPrefix +
+      '  ' +
+      properties.join('\n' + rowPrefix + '  ') +
+      '\n' +
+      rowPrefix +
+      '>\n'
+    );
+  }
+}
+
+function describePropertiesDiff(
+  clientObject: {+[propName: string]: mixed},
+  serverObject: {+[propName: string]: mixed},
+  indent: number,
+): string {
+  let properties = '';
+  const remainingServerProperties = assign({}, serverObject);
+  for (const propName in clientObject) {
+    if (!clientObject.hasOwnProperty(propName)) {
+      continue;
+    }
+    delete remainingServerProperties[propName];
+    const maxLength = maxRowLength - indent * 2 - propName.length - 2;
+    const clientValue = clientObject[propName];
+    const clientPropValue = describeValue(clientValue, maxLength);
+    if (serverObject.hasOwnProperty(propName)) {
+      const serverValue = serverObject[propName];
+      const serverPropValue = describeValue(serverValue, maxLength);
+      properties += added(indent) + propName + ': ' + clientPropValue + '\n';
+      properties += removed(indent) + propName + ': ' + serverPropValue + '\n';
+    } else {
+      properties += added(indent) + propName + ': ' + clientPropValue + '\n';
+    }
+  }
+  for (const propName in remainingServerProperties) {
+    if (!remainingServerProperties.hasOwnProperty(propName)) {
+      continue;
+    }
+    const maxLength = maxRowLength - indent * 2 - propName.length - 2;
+    const serverValue = remainingServerProperties[propName];
+    const serverPropValue = describeValue(serverValue, maxLength);
+    properties += removed(indent) + propName + ': ' + serverPropValue + '\n';
+  }
+  return properties;
+}
+
+function describeElementDiff(
+  type: string,
+  clientProps: {+[propName: string]: mixed},
+  serverProps: {+[propName: string]: mixed},
+  indent: number,
+): string {
+  let content = '';
+
+  // Maps any previously unmatched lower case server prop name to its full prop name
+  const serverPropNames: Map<string, string> = new Map();
+
+  for (const propName in serverProps) {
+    if (!serverProps.hasOwnProperty(propName)) {
+      continue;
+    }
+    serverPropNames.set(propName.toLowerCase(), propName);
+  }
+
+  if (serverPropNames.size === 1 && serverPropNames.has('children')) {
+    content += describeExpandedElement(type, clientProps, indentation(indent));
+  } else {
+    for (const propName in clientProps) {
+      if (!clientProps.hasOwnProperty(propName)) {
+        continue;
+      }
+      if (propName === 'children') {
+        // Handled below.
+        continue;
+      }
+      const maxLength = maxRowLength - (indent + 1) * 2 - propName.length - 1;
+      const serverPropName = serverPropNames.get(propName.toLowerCase());
+      if (serverPropName !== undefined) {
+        serverPropNames.delete(propName.toLowerCase());
+        // There's a diff here.
+        const clientValue = clientProps[propName];
+        const serverValue = serverProps[serverPropName];
+        const clientPropValue = describePropValue(clientValue, maxLength);
+        const serverPropValue = describePropValue(serverValue, maxLength);
+        if (
+          typeof clientValue === 'object' &&
+          clientValue !== null &&
+          typeof serverValue === 'object' &&
+          serverValue !== null &&
+          objectName(clientValue) === 'Object' &&
+          objectName(serverValue) === 'Object' &&
+          // Only do the diff if the object has a lot of keys or was shortened.
+          (Object.keys(clientValue).length > 2 ||
+            Object.keys(serverValue).length > 2 ||
+            clientPropValue.indexOf('...') > -1 ||
+            serverPropValue.indexOf('...') > -1)
+        ) {
+          // We're comparing two plain objects. We can diff the nested objects instead.
+          content +=
+            indentation(indent + 1) +
+            propName +
+            '={{\n' +
+            describePropertiesDiff(clientValue, serverValue, indent + 2) +
+            indentation(indent + 1) +
+            '}}\n';
+        } else {
+          content +=
+            added(indent + 1) + propName + '=' + clientPropValue + '\n';
+          content +=
+            removed(indent + 1) + propName + '=' + serverPropValue + '\n';
+        }
+      } else {
+        // Considered equal.
+        content +=
+          indentation(indent + 1) +
+          propName +
+          '=' +
+          describePropValue(clientProps[propName], maxLength) +
+          '\n';
+      }
+    }
+
+    serverPropNames.forEach(propName => {
+      if (propName === 'children') {
+        // Handled below.
+        return;
+      }
+      const maxLength = maxRowLength - (indent + 1) * 2 - propName.length - 1;
+      content +=
+        removed(indent + 1) +
+        propName +
+        '=' +
+        describePropValue(serverProps[propName], maxLength) +
+        '\n';
+    });
+
+    if (content === '') {
+      // No properties
+      content = indentation(indent) + '<' + type + '>\n';
+    } else {
+      // Had properties
+      content =
+        indentation(indent) +
+        '<' +
+        type +
+        '\n' +
+        content +
+        indentation(indent) +
+        '>\n';
+    }
+  }
+
+  const serverChildren = serverProps.children;
+  const clientChildren = clientProps.children;
+  if (
+    typeof serverChildren === 'string' ||
+    typeof serverChildren === 'number' ||
+    typeof serverChildren === 'bigint'
+  ) {
+    // There's a diff of the children.
+    // $FlowFixMe[unsafe-addition]
+    const serverText = '' + serverChildren;
+    let clientText = '';
+    if (
+      typeof clientChildren === 'string' ||
+      typeof clientChildren === 'number' ||
+      typeof clientChildren === 'bigint'
+    ) {
+      // $FlowFixMe[unsafe-addition]
+      clientText = '' + clientChildren;
+    }
+    content += describeTextDiff(clientText, serverText, indent + 1);
+  } else if (
+    typeof clientChildren === 'string' ||
+    typeof clientChildren === 'number' ||
+    typeof clientChildren === 'bigint'
+  ) {
+    if (serverChildren == null) {
+      // This is a new string child.
+      // $FlowFixMe[unsafe-addition]
+      content += describeTextDiff('' + clientChildren, null, indent + 1);
+    } else {
+      // The client has children but it's not considered a difference from the server.
+      // $FlowFixMe[unsafe-addition]
+      content += describeTextDiff('' + clientChildren, undefined, indent + 1);
+    }
+  }
+  return content;
+}
+
+function describeSiblingFiber(fiber: Fiber, indent: number): string {
+  const type = describeFiberType(fiber);
+  if (type === null) {
+    // Skip this type of fiber. We currently treat this as a fragment
+    // so it's just part of the parent's children.
+    let flatContent = '';
+    let childFiber = fiber.child;
+    while (childFiber) {
+      flatContent += describeSiblingFiber(childFiber, indent);
+      childFiber = childFiber.sibling;
+    }
+    return flatContent;
+  }
+  return indentation(indent) + '<' + type + '>' + '\n';
+}
+
+function describeNode(node: HydrationDiffNode, indent: number): string {
+  const skipToNode = findNotableNode(node, indent);
+  if (
+    skipToNode !== node &&
+    (node.children.length !== 1 || node.children[0] !== skipToNode)
+  ) {
+    return indentation(indent) + '...\n' + describeNode(skipToNode, indent + 1);
+  }
+
+  // Prefix with any server components for context
+  let parentContent = '';
+  const debugInfo = node.fiber._debugInfo;
+  if (debugInfo) {
+    for (let i = 0; i < debugInfo.length; i++) {
+      const serverComponentName = debugInfo[i].name;
+      if (typeof serverComponentName === 'string') {
+        parentContent +=
+          indentation(indent) + '<' + serverComponentName + '>' + '\n';
+        indent++;
+      }
+    }
+  }
+
+  // Self
+  let selfContent = '';
+
+  // We use the pending props since we might be generating a diff before the complete phase
+  // when something throws.
+  const clientProps = node.fiber.pendingProps;
+
+  if (node.fiber.tag === HostText) {
+    // Text Node
+    selfContent = describeTextDiff(clientProps, node.serverProps, indent);
+    indent++;
+  } else {
+    const type = describeFiberType(node.fiber);
+    if (type !== null) {
+      // Element Node
+      if (node.serverProps === undefined) {
+        // Just a reference node for context.
+        selfContent = describeCollapsedElement(type, clientProps, indent);
+        indent++;
+      } else if (node.serverProps === null) {
+        selfContent = describeExpandedElement(type, clientProps, added(indent));
+        indent++;
+      } else if (typeof node.serverProps === 'string') {
+        if (__DEV__) {
+          console.error(
+            'Should not have matched a non HostText fiber to a Text node. This is a bug in React.',
+          );
+        }
+      } else {
+        selfContent = describeElementDiff(
+          type,
+          clientProps,
+          node.serverProps,
+          indent,
+        );
+        indent++;
+      }
+    }
+  }
+
+  // Compute children
+  let childContent = '';
+  let childFiber = node.fiber.child;
+  let diffIdx = 0;
+  while (childFiber && diffIdx < node.children.length) {
+    const childNode = node.children[diffIdx];
+    if (childNode.fiber === childFiber) {
+      // This was a match in the diff.
+      childContent += describeNode(childNode, indent);
+      diffIdx++;
+    } else {
+      // This is an unrelated previous sibling.
+      childContent += describeSiblingFiber(childFiber, indent);
+    }
+    childFiber = childFiber.sibling;
+  }
+
+  if (childFiber && node.children.length > 0) {
+    // If we had any further siblings after the last mismatch, we can't be sure if it's
+    // actually a valid match since it might not have found a match. So we exclude next
+    // siblings to avoid confusion.
+    childContent += indentation(indent) + '...' + '\n';
+  }
+
+  // Deleted tail nodes
+  const serverTail = node.serverTail;
+  if (node.serverProps === null) {
+    indent--;
+  }
+  for (let i = 0; i < serverTail.length; i++) {
+    const tailNode = serverTail[i];
+    if (typeof tailNode === 'string') {
+      // Removed text node
+      childContent +=
+        removed(indent) +
+        describeTextNode(tailNode, maxRowLength - indent * 2) +
+        '\n';
+    } else {
+      // Removed element
+      childContent += describeExpandedElement(
+        tailNode.type,
+        tailNode.props,
+        removed(indent),
+      );
+    }
+  }
+
+  return parentContent + selfContent + childContent;
+}
+
+export function describeDiff(rootNode: HydrationDiffNode): string {
+  try {
+    return '\n\n' + describeNode(rootNode, 0);
+  } catch (x) {
+    return '';
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberLane.js b/packages/react-reconciler/src/ReactFiberLane.js
new file mode 100644
index 00000000000..b54047cb4aa
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberLane.js
@@ -0,0 +1,1303 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from './ReactInternalTypes';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates';
+
+// TODO: Ideally these types would be opaque but that doesn't work well with
+// our reconciler fork infra, since these leak into non-reconciler packages.
+
+export type Lanes = number;
+export type Lane = number;
+export type LaneMap<T> = Array<T>;
+
+import {
+  enableRetryLaneExpiration,
+  enableSchedulingProfiler,
+  enableTransitionTracing,
+  enableUpdaterTracking,
+  syncLaneExpirationMs,
+  transitionLaneExpirationMs,
+  retryLaneExpirationMs,
+  disableLegacyMode,
+  enableDefaultTransitionIndicator,
+  enableGestureTransition,
+} from 'shared/ReactFeatureFlags';
+import {isDevToolsPresent} from './ReactFiberDevToolsHook';
+import {clz32} from './clz32';
+import {LegacyRoot} from './ReactRootTags';
+
+// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-timeline.
+// If those values are changed that package should be rebuilt and redeployed.
+
+export const TotalLanes = 31;
+
+export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
+export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
+
+export const SyncHydrationLane: Lane = /*               */ 0b0000000000000000000000000000001;
+export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000010;
+export const SyncLaneIndex: number = 1;
+
+export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000100;
+export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000001000;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
+export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000000100000;
+
+export const SyncUpdateLanes: Lane =
+  SyncLane | InputContinuousLane | DefaultLane;
+
+export const GestureLane: Lane = /*                     */ 0b0000000000000000000000001000000;
+
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000010000000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111100000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000100000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000010000000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000000100000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000001000000000000000000000;
+
+export const SomeTransitionLane: Lane = TransitionLane1;
+
+const TransitionUpdateLanes =
+  TransitionLane1 |
+  TransitionLane2 |
+  TransitionLane3 |
+  TransitionLane4 |
+  TransitionLane5 |
+  TransitionLane6 |
+  TransitionLane7 |
+  TransitionLane8 |
+  TransitionLane9 |
+  TransitionLane10;
+const TransitionDeferredLanes =
+  TransitionLane11 | TransitionLane12 | TransitionLane13 | TransitionLane14;
+
+const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
+
+export const SomeRetryLane: Lane = RetryLane1;
+
+export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
+
+const NonIdleLanes: Lanes = /*                          */ 0b0000111111111111111111111111111;
+
+export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
+export const IdleLane: Lane = /*                        */ 0b0010000000000000000000000000000;
+
+export const OffscreenLane: Lane = /*                   */ 0b0100000000000000000000000000000;
+export const DeferredLane: Lane = /*                    */ 0b1000000000000000000000000000000;
+
+// Any lane that might schedule an update. This is used to detect infinite
+// update loops, so it doesn't include hydration lanes or retries.
+export const UpdateLanes: Lanes =
+  SyncLane | InputContinuousLane | DefaultLane | TransitionUpdateLanes;
+
+export const HydrationLanes =
+  SyncHydrationLane |
+  InputContinuousHydrationLane |
+  DefaultHydrationLane |
+  TransitionHydrationLane |
+  SelectiveHydrationLane |
+  IdleHydrationLane;
+
+// This function is used for the experimental timeline (react-devtools-timeline)
+// It should be kept in sync with the Lanes values above.
+export function getLabelForLane(lane: Lane): string | void {
+  if (enableSchedulingProfiler) {
+    if (lane & SyncHydrationLane) {
+      return 'SyncHydrationLane';
+    }
+    if (lane & SyncLane) {
+      return 'Sync';
+    }
+    if (lane & InputContinuousHydrationLane) {
+      return 'InputContinuousHydration';
+    }
+    if (lane & InputContinuousLane) {
+      return 'InputContinuous';
+    }
+    if (lane & DefaultHydrationLane) {
+      return 'DefaultHydration';
+    }
+    if (lane & DefaultLane) {
+      return 'Default';
+    }
+    if (lane & TransitionHydrationLane) {
+      return 'TransitionHydration';
+    }
+    if (lane & TransitionLanes) {
+      return 'Transition';
+    }
+    if (lane & RetryLanes) {
+      return 'Retry';
+    }
+    if (lane & SelectiveHydrationLane) {
+      return 'SelectiveHydration';
+    }
+    if (lane & IdleHydrationLane) {
+      return 'IdleHydration';
+    }
+    if (lane & IdleLane) {
+      return 'Idle';
+    }
+    if (lane & OffscreenLane) {
+      return 'Offscreen';
+    }
+    if (lane & DeferredLane) {
+      return 'Deferred';
+    }
+  }
+}
+
+export const NoTimestamp = -1;
+
+let nextTransitionUpdateLane: Lane = TransitionLane1;
+let nextTransitionDeferredLane: Lane = TransitionLane11;
+let nextRetryLane: Lane = RetryLane1;
+
+function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
+  const pendingSyncLanes = lanes & SyncUpdateLanes;
+  if (pendingSyncLanes !== 0) {
+    return pendingSyncLanes;
+  }
+  switch (getHighestPriorityLane(lanes)) {
+    case SyncHydrationLane:
+      return SyncHydrationLane;
+    case SyncLane:
+      return SyncLane;
+    case InputContinuousHydrationLane:
+      return InputContinuousHydrationLane;
+    case InputContinuousLane:
+      return InputContinuousLane;
+    case DefaultHydrationLane:
+      return DefaultHydrationLane;
+    case DefaultLane:
+      return DefaultLane;
+    case GestureLane:
+      return GestureLane;
+    case TransitionHydrationLane:
+      return TransitionHydrationLane;
+    case TransitionLane1:
+    case TransitionLane2:
+    case TransitionLane3:
+    case TransitionLane4:
+    case TransitionLane5:
+    case TransitionLane6:
+    case TransitionLane7:
+    case TransitionLane8:
+    case TransitionLane9:
+    case TransitionLane10:
+      return lanes & TransitionUpdateLanes;
+    case TransitionLane11:
+    case TransitionLane12:
+    case TransitionLane13:
+    case TransitionLane14:
+      return lanes & TransitionDeferredLanes;
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+      return lanes & RetryLanes;
+    case SelectiveHydrationLane:
+      return SelectiveHydrationLane;
+    case IdleHydrationLane:
+      return IdleHydrationLane;
+    case IdleLane:
+      return IdleLane;
+    case OffscreenLane:
+      return OffscreenLane;
+    case DeferredLane:
+      // This shouldn't be reachable because deferred work is always entangled
+      // with something else.
+      return NoLanes;
+    default:
+      if (__DEV__) {
+        console.error(
+          'Should have found matching lanes. This is a bug in React.',
+        );
+      }
+      // This shouldn't be reachable, but as a fallback, return the entire bitmask.
+      return lanes;
+  }
+}
+
+export function getNextLanes(
+  root: FiberRoot,
+  wipLanes: Lanes,
+  rootHasPendingCommit: boolean,
+): Lanes {
+  // Early bailout if there's no pending work left.
+  const pendingLanes = root.pendingLanes;
+  if (pendingLanes === NoLanes) {
+    return NoLanes;
+  }
+
+  let nextLanes: Lanes = NoLanes;
+
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+  const warmLanes = root.warmLanes;
+
+  // finishedLanes represents a completed tree that is ready to commit.
+  //
+  // It's not worth doing discarding the completed tree in favor of performing
+  // speculative work. So always check this before deciding to warm up
+  // the siblings.
+  //
+  // Note that this is not set in a "suspend indefinitely" scenario, like when
+  // suspending outside of a Suspense boundary, or in the shell during a
+  // transition — only in cases where we are very likely to commit the tree in
+  // a brief amount of time (i.e. below the "Just Noticeable Difference"
+  // threshold).
+  //
+
+  // Do not work on any idle work until all the non-idle work has finished,
+  // even if the work is suspended.
+  const nonIdlePendingLanes = pendingLanes & NonIdleLanes;
+  if (nonIdlePendingLanes !== NoLanes) {
+    // First check for fresh updates.
+    const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
+    if (nonIdleUnblockedLanes !== NoLanes) {
+      nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+    } else {
+      // No fresh updates. Check if suspended work has been pinged.
+      const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
+      if (nonIdlePingedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
+      } else {
+        // Nothing has been pinged. Check for lanes that need to be prewarmed.
+        if (!rootHasPendingCommit) {
+          const lanesToPrewarm = nonIdlePendingLanes & ~warmLanes;
+          if (lanesToPrewarm !== NoLanes) {
+            nextLanes = getHighestPriorityLanes(lanesToPrewarm);
+          }
+        }
+      }
+    }
+  } else {
+    // The only remaining work is Idle.
+    // TODO: Idle isn't really used anywhere, and the thinking around
+    // speculative rendering has evolved since this was implemented. Consider
+    // removing until we've thought about this again.
+
+    // First check for fresh updates.
+    const unblockedLanes = pendingLanes & ~suspendedLanes;
+    if (unblockedLanes !== NoLanes) {
+      nextLanes = getHighestPriorityLanes(unblockedLanes);
+    } else {
+      // No fresh updates. Check if suspended work has been pinged.
+      if (pingedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(pingedLanes);
+      } else {
+        // Nothing has been pinged. Check for lanes that need to be prewarmed.
+        if (!rootHasPendingCommit) {
+          const lanesToPrewarm = pendingLanes & ~warmLanes;
+          if (lanesToPrewarm !== NoLanes) {
+            nextLanes = getHighestPriorityLanes(lanesToPrewarm);
+          }
+        }
+      }
+    }
+  }
+
+  if (nextLanes === NoLanes) {
+    // This should only be reachable if we're suspended
+    // TODO: Consider warning in this path if a fallback timer is not scheduled.
+    return NoLanes;
+  }
+
+  // If we're already in the middle of a render, switching lanes will interrupt
+  // it and we'll lose our progress. We should only do this if the new lanes are
+  // higher priority.
+  if (
+    wipLanes !== NoLanes &&
+    wipLanes !== nextLanes &&
+    // If we already suspended with a delay, then interrupting is fine. Don't
+    // bother waiting until the root is complete.
+    (wipLanes & suspendedLanes) === NoLanes
+  ) {
+    const nextLane = getHighestPriorityLane(nextLanes);
+    const wipLane = getHighestPriorityLane(wipLanes);
+    if (
+      // Tests whether the next lane is equal or lower priority than the wip
+      // one. This works because the bits decrease in priority as you go left.
+      nextLane >= wipLane ||
+      // Default priority updates should not interrupt transition updates. The
+      // only difference between default updates and transition updates is that
+      // default updates do not support refresh transitions.
+      (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
+    ) {
+      // Keep working on the existing in-progress tree. Do not interrupt.
+      return wipLanes;
+    }
+  }
+
+  return nextLanes;
+}
+
+export function getNextLanesToFlushSync(
+  root: FiberRoot,
+  extraLanesToForceSync: Lane | Lanes,
+): Lanes {
+  // Similar to getNextLanes, except instead of choosing the next lanes to work
+  // on based on their priority, it selects all the lanes that have equal or
+  // higher priority than those are given. That way they can be synchronously
+  // rendered in a single batch.
+  //
+  // The main use case is updates scheduled by popstate events, which are
+  // flushed synchronously even though they are transitions.
+  // Note that we intentionally treat this as a sync flush to include any
+  // sync updates in a single pass but also intentionally disables View Transitions
+  // inside popstate. Because they can start synchronously before scroll restoration
+  // happens.
+  const lanesToFlush = SyncUpdateLanes | extraLanesToForceSync;
+
+  // Early bailout if there's no pending work left.
+  const pendingLanes = root.pendingLanes;
+  if (pendingLanes === NoLanes) {
+    return NoLanes;
+  }
+
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+
+  // Remove lanes that are suspended (but not pinged)
+  const unblockedLanes = pendingLanes & ~(suspendedLanes & ~pingedLanes);
+  const unblockedLanesWithMatchingPriority =
+    unblockedLanes & getLanesOfEqualOrHigherPriority(lanesToFlush);
+
+  // If there are matching hydration lanes, we should do those by themselves.
+  // Hydration lanes must never include updates.
+  if (unblockedLanesWithMatchingPriority & HydrationLanes) {
+    return (
+      (unblockedLanesWithMatchingPriority & HydrationLanes) | SyncHydrationLane
+    );
+  }
+
+  if (unblockedLanesWithMatchingPriority) {
+    // Always include the SyncLane as part of the result, even if there's no
+    // pending sync work, to indicate the priority of the entire batch of work
+    // is considered Sync.
+    return unblockedLanesWithMatchingPriority | SyncLane;
+  }
+
+  return NoLanes;
+}
+
+export function checkIfRootIsPrerendering(
+  root: FiberRoot,
+  renderLanes: Lanes,
+): boolean {
+  const pendingLanes = root.pendingLanes;
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+  // Remove lanes that are suspended (but not pinged)
+  const unblockedLanes = pendingLanes & ~(suspendedLanes & ~pingedLanes);
+
+  // If there are no unsuspended or pinged lanes, that implies that we're
+  // performing a prerender.
+  return (unblockedLanes & renderLanes) === 0;
+}
+
+export function getEntangledLanes(root: FiberRoot, renderLanes: Lanes): Lanes {
+  let entangledLanes = renderLanes;
+
+  if ((entangledLanes & InputContinuousLane) !== NoLanes) {
+    // When updates are sync by default, we entangle continuous priority updates
+    // and default updates, so they render in the same batch. The only reason
+    // they use separate lanes is because continuous updates should interrupt
+    // transitions, but default updates should not.
+    entangledLanes |= entangledLanes & DefaultLane;
+  }
+
+  // Check for entangled lanes and add them to the batch.
+  //
+  // A lane is said to be entangled with another when it's not allowed to render
+  // in a batch that does not also include the other lane. Typically we do this
+  // when multiple updates have the same source, and we only want to respond to
+  // the most recent event from that source.
+  //
+  // Note that we apply entanglements *after* checking for partial work above.
+  // This means that if a lane is entangled during an interleaved event while
+  // it's already rendering, we won't interrupt it. This is intentional, since
+  // entanglement is usually "best effort": we'll try our best to render the
+  // lanes in the same batch, but it's not worth throwing out partially
+  // completed work in order to do it.
+  // TODO: Reconsider this. The counter-argument is that the partial work
+  // represents an intermediate state, which we don't want to show to the user.
+  // And by spending extra time finishing it, we're increasing the amount of
+  // time it takes to show the final state, which is what they are actually
+  // waiting for.
+  //
+  // For those exceptions where entanglement is semantically important,
+  // we should ensure that there is no partial work at the
+  // time we apply the entanglement.
+  const allEntangledLanes = root.entangledLanes;
+  if (allEntangledLanes !== NoLanes) {
+    const entanglements = root.entanglements;
+    let lanes = entangledLanes & allEntangledLanes;
+    while (lanes > 0) {
+      const index = pickArbitraryLaneIndex(lanes);
+      const lane = 1 << index;
+
+      entangledLanes |= entanglements[index];
+
+      lanes &= ~lane;
+    }
+  }
+
+  return entangledLanes;
+}
+
+function computeExpirationTime(lane: Lane, currentTime: number) {
+  switch (lane) {
+    case SyncHydrationLane:
+    case SyncLane:
+    case InputContinuousHydrationLane:
+    case InputContinuousLane:
+    case GestureLane:
+      // User interactions should expire slightly more quickly.
+      //
+      // NOTE: This is set to the corresponding constant as in Scheduler.js.
+      // When we made it larger, a product metric in www regressed, suggesting
+      // there's a user interaction that's being starved by a series of
+      // synchronous updates. If that theory is correct, the proper solution is
+      // to fix the starvation. However, this scenario supports the idea that
+      // expiration times are an important safeguard when starvation
+      // does happen.
+      return currentTime + syncLaneExpirationMs;
+    case DefaultHydrationLane:
+    case DefaultLane:
+    case TransitionHydrationLane:
+    case TransitionLane1:
+    case TransitionLane2:
+    case TransitionLane3:
+    case TransitionLane4:
+    case TransitionLane5:
+    case TransitionLane6:
+    case TransitionLane7:
+    case TransitionLane8:
+    case TransitionLane9:
+    case TransitionLane10:
+    case TransitionLane11:
+    case TransitionLane12:
+    case TransitionLane13:
+    case TransitionLane14:
+      return currentTime + transitionLaneExpirationMs;
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+      // TODO: Retries should be allowed to expire if they are CPU bound for
+      // too long, but when I made this change it caused a spike in browser
+      // crashes. There must be some other underlying bug; not super urgent but
+      // ideally should figure out why and fix it. Unfortunately we don't have
+      // a repro for the crashes, only detected via production metrics.
+      return enableRetryLaneExpiration
+        ? currentTime + retryLaneExpirationMs
+        : NoTimestamp;
+    case SelectiveHydrationLane:
+    case IdleHydrationLane:
+    case IdleLane:
+    case OffscreenLane:
+    case DeferredLane:
+      // Anything idle priority or lower should never expire.
+      return NoTimestamp;
+    default:
+      if (__DEV__) {
+        console.error(
+          'Should have found matching lanes. This is a bug in React.',
+        );
+      }
+      return NoTimestamp;
+  }
+}
+
+export function markStarvedLanesAsExpired(
+  root: FiberRoot,
+  currentTime: number,
+): void {
+  // TODO: This gets called every time we yield. We can optimize by storing
+  // the earliest expiration time on the root. Then use that to quickly bail out
+  // of this function.
+
+  const pendingLanes = root.pendingLanes;
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+  const expirationTimes = root.expirationTimes;
+
+  // Iterate through the pending lanes and check if we've reached their
+  // expiration time. If so, we'll assume the update is being starved and mark
+  // it as expired to force it to finish.
+  // TODO: We should be able to replace this with upgradePendingLanesToSync
+  //
+  // We exclude retry lanes because those must always be time sliced, in order
+  // to unwrap uncached promises.
+  // TODO: Write a test for this
+  let lanes = enableRetryLaneExpiration
+    ? pendingLanes
+    : pendingLanes & ~RetryLanes;
+  while (lanes > 0) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+
+    const expirationTime = expirationTimes[index];
+    if (expirationTime === NoTimestamp) {
+      // Found a pending lane with no expiration time. If it's not suspended, or
+      // if it's pinged, assume it's CPU-bound. Compute a new expiration time
+      // using the current time.
+      if (
+        (lane & suspendedLanes) === NoLanes ||
+        (lane & pingedLanes) !== NoLanes
+      ) {
+        // Assumes timestamps are monotonically increasing.
+        expirationTimes[index] = computeExpirationTime(lane, currentTime);
+      }
+    } else if (expirationTime <= currentTime) {
+      // This lane expired
+      root.expiredLanes |= lane;
+    }
+
+    lanes &= ~lane;
+  }
+}
+
+// This returns the highest priority pending lanes regardless of whether they
+// are suspended.
+export function getHighestPriorityPendingLanes(root: FiberRoot): Lanes {
+  return getHighestPriorityLanes(root.pendingLanes);
+}
+
+export function getLanesToRetrySynchronouslyOnError(
+  root: FiberRoot,
+  originallyAttemptedLanes: Lanes,
+): Lanes {
+  if (root.errorRecoveryDisabledLanes & originallyAttemptedLanes) {
+    // The error recovery mechanism is disabled until these lanes are cleared.
+    return NoLanes;
+  }
+
+  const everythingButOffscreen = root.pendingLanes & ~OffscreenLane;
+  if (everythingButOffscreen !== NoLanes) {
+    return everythingButOffscreen;
+  }
+  if (everythingButOffscreen & OffscreenLane) {
+    return OffscreenLane;
+  }
+  return NoLanes;
+}
+
+export function includesSyncLane(lanes: Lanes): boolean {
+  return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
+}
+
+export function includesNonIdleWork(lanes: Lanes): boolean {
+  return (lanes & NonIdleLanes) !== NoLanes;
+}
+export function includesOnlyRetries(lanes: Lanes): boolean {
+  return (lanes & RetryLanes) === lanes;
+}
+export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
+  // TODO: Should hydration lanes be included here? This function is only
+  // used in `updateDeferredValueImpl`.
+  const UrgentLanes =
+    SyncLane | InputContinuousLane | DefaultLane | GestureLane;
+  return (lanes & UrgentLanes) === NoLanes;
+}
+export function includesOnlyTransitions(lanes: Lanes): boolean {
+  return (lanes & TransitionLanes) === lanes;
+}
+
+export function includesTransitionLane(lanes: Lanes): boolean {
+  return (lanes & TransitionLanes) !== NoLanes;
+}
+
+export function includesRetryLane(lanes: Lanes): boolean {
+  return (lanes & RetryLanes) !== NoLanes;
+}
+
+export function includesIdleGroupLanes(lanes: Lanes): boolean {
+  return (
+    (lanes &
+      (SelectiveHydrationLane |
+        IdleHydrationLane |
+        IdleLane |
+        OffscreenLane |
+        DeferredLane)) !==
+    NoLanes
+  );
+}
+
+export function includesOnlyHydrationLanes(lanes: Lanes): boolean {
+  return (lanes & HydrationLanes) === lanes;
+}
+
+export function includesOnlyOffscreenLanes(lanes: Lanes): boolean {
+  return (lanes & OffscreenLane) === lanes;
+}
+
+export function includesOnlyHydrationOrOffscreenLanes(lanes: Lanes): boolean {
+  return (lanes & (HydrationLanes | OffscreenLane)) === lanes;
+}
+
+export function includesOnlyViewTransitionEligibleLanes(lanes: Lanes): boolean {
+  return (lanes & (TransitionLanes | RetryLanes | IdleLane)) === lanes;
+}
+
+export function includesOnlySuspenseyCommitEligibleLanes(
+  lanes: Lanes,
+): boolean {
+  return (
+    (lanes & (TransitionLanes | RetryLanes | IdleLane | GestureLane)) === lanes
+  );
+}
+
+export function includesLoadingIndicatorLanes(lanes: Lanes): boolean {
+  return (lanes & (SyncLane | DefaultLane)) !== NoLanes;
+}
+
+export function includesBlockingLane(lanes: Lanes): boolean {
+  const SyncDefaultLanes =
+    SyncHydrationLane |
+    SyncLane |
+    InputContinuousHydrationLane |
+    InputContinuousLane |
+    DefaultHydrationLane |
+    DefaultLane |
+    GestureLane;
+  return (lanes & SyncDefaultLanes) !== NoLanes;
+}
+
+export function includesExpiredLane(root: FiberRoot, lanes: Lanes): boolean {
+  // This is a separate check from includesBlockingLane because a lane can
+  // expire after a render has already started.
+  return (lanes & root.expiredLanes) !== NoLanes;
+}
+
+export function isBlockingLane(lane: Lane): boolean {
+  const SyncDefaultLanes =
+    SyncHydrationLane |
+    SyncLane |
+    InputContinuousHydrationLane |
+    InputContinuousLane |
+    DefaultHydrationLane |
+    DefaultLane |
+    GestureLane;
+  return (lane & SyncDefaultLanes) !== NoLanes;
+}
+
+export function isTransitionLane(lane: Lane): boolean {
+  return (lane & TransitionLanes) !== NoLanes;
+}
+
+export function isGestureRender(lanes: Lanes): boolean {
+  if (!enableGestureTransition) {
+    return false;
+  }
+  // This should render only the one lane.
+  return lanes === GestureLane;
+}
+
+export function claimNextTransitionUpdateLane(): Lane {
+  // Cycle through the lanes, assigning each new transition to the next lane.
+  // In most cases, this means every transition gets its own lane, until we
+  // run out of lanes and cycle back to the beginning.
+  const lane = nextTransitionUpdateLane;
+  nextTransitionUpdateLane <<= 1;
+  if ((nextTransitionUpdateLane & TransitionUpdateLanes) === NoLanes) {
+    nextTransitionUpdateLane = TransitionLane1;
+  }
+  return lane;
+}
+
+export function claimNextTransitionDeferredLane(): Lane {
+  const lane = nextTransitionDeferredLane;
+  nextTransitionDeferredLane <<= 1;
+  if ((nextTransitionDeferredLane & TransitionDeferredLanes) === NoLanes) {
+    nextTransitionDeferredLane = TransitionLane11;
+  }
+  return lane;
+}
+
+export function claimNextRetryLane(): Lane {
+  const lane = nextRetryLane;
+  nextRetryLane <<= 1;
+  if ((nextRetryLane & RetryLanes) === NoLanes) {
+    nextRetryLane = RetryLane1;
+  }
+  return lane;
+}
+
+export function getHighestPriorityLane(lanes: Lanes): Lane {
+  return lanes & -lanes;
+}
+
+function getLanesOfEqualOrHigherPriority(lanes: Lane | Lanes): Lanes {
+  // Create a mask with all bits to the right or same as the highest bit.
+  // So if lanes is 0b100, the result would be 0b111.
+  // If lanes is 0b101, the result would be 0b111.
+  const lowestPriorityLaneIndex = 31 - clz32(lanes);
+  return (1 << (lowestPriorityLaneIndex + 1)) - 1;
+}
+
+export function pickArbitraryLane(lanes: Lanes): Lane {
+  // This wrapper function gets inlined. Only exists so to communicate that it
+  // doesn't matter which bit is selected; you can pick any bit without
+  // affecting the algorithms where its used. Here I'm using
+  // getHighestPriorityLane because it requires the fewest operations.
+  return getHighestPriorityLane(lanes);
+}
+
+function pickArbitraryLaneIndex(lanes: Lanes) {
+  return 31 - clz32(lanes);
+}
+
+function laneToIndex(lane: Lane) {
+  return pickArbitraryLaneIndex(lane);
+}
+
+export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane): boolean {
+  return (a & b) !== NoLanes;
+}
+
+export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane): boolean {
+  return (set & subset) === subset;
+}
+
+export function mergeLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {
+  return a | b;
+}
+
+export function removeLanes(set: Lanes, subset: Lanes | Lane): Lanes {
+  return set & ~subset;
+}
+
+export function intersectLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {
+  return a & b;
+}
+
+// Seems redundant, but it changes the type from a single lane (used for
+// updates) to a group of lanes (used for flushing work).
+export function laneToLanes(lane: Lane): Lanes {
+  return lane;
+}
+
+export function higherPriorityLane(a: Lane, b: Lane): Lane {
+  // This works because the bit ranges decrease in priority as you go left.
+  return a !== NoLane && a < b ? a : b;
+}
+
+export function createLaneMap<T>(initial: T): LaneMap<T> {
+  // Intentionally pushing one by one.
+  // https://v8.dev/blog/elements-kinds#avoid-creating-holes
+  const laneMap = [];
+  for (let i = 0; i < TotalLanes; i++) {
+    laneMap.push(initial);
+  }
+  return laneMap;
+}
+
+export function markRootUpdated(root: FiberRoot, updateLane: Lane) {
+  root.pendingLanes |= updateLane;
+  if (enableDefaultTransitionIndicator) {
+    // Mark that this lane might need a loading indicator to be shown.
+    root.indicatorLanes |= updateLane & TransitionLanes;
+  }
+
+  // If there are any suspended transitions, it's possible this new update
+  // could unblock them. Clear the suspended lanes so that we can try rendering
+  // them again.
+  //
+  // TODO: We really only need to unsuspend only lanes that are in the
+  // `subtreeLanes` of the updated fiber, or the update lanes of the return
+  // path. This would exclude suspended updates in an unrelated sibling tree,
+  // since there's no way for this update to unblock it.
+  //
+  // We don't do this if the incoming update is idle, because we never process
+  // idle updates until after all the regular updates have finished; there's no
+  // way it could unblock a transition.
+  if (updateLane !== IdleLane) {
+    root.suspendedLanes = NoLanes;
+    root.pingedLanes = NoLanes;
+    root.warmLanes = NoLanes;
+  }
+}
+
+export function markRootSuspended(
+  root: FiberRoot,
+  suspendedLanes: Lanes,
+  spawnedLane: Lane,
+  didAttemptEntireTree: boolean,
+) {
+  // TODO: Split this into separate functions for marking the root at the end of
+  // a render attempt versus suspending while the root is still in progress.
+  root.suspendedLanes |= suspendedLanes;
+  root.pingedLanes &= ~suspendedLanes;
+
+  if (didAttemptEntireTree) {
+    // Mark these lanes as warm so we know there's nothing else to work on.
+    root.warmLanes |= suspendedLanes;
+  } else {
+    // Render unwound without attempting all the siblings. Do no mark the lanes
+    // as warm. This will cause a prewarm render to be scheduled.
+  }
+
+  // The suspended lanes are no longer CPU-bound. Clear their expiration times.
+  const expirationTimes = root.expirationTimes;
+  let lanes = suspendedLanes;
+  while (lanes > 0) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+
+    expirationTimes[index] = NoTimestamp;
+
+    lanes &= ~lane;
+  }
+
+  if (spawnedLane !== NoLane) {
+    markSpawnedDeferredLane(root, spawnedLane, suspendedLanes);
+  }
+}
+
+export function markRootPinged(root: FiberRoot, pingedLanes: Lanes) {
+  root.pingedLanes |= root.suspendedLanes & pingedLanes;
+  // The data that just resolved could have unblocked additional children, which
+  // will also need to be prewarmed if something suspends again.
+  root.warmLanes &= ~pingedLanes;
+}
+
+export function markRootFinished(
+  root: FiberRoot,
+  finishedLanes: Lanes,
+  remainingLanes: Lanes,
+  spawnedLane: Lane,
+  updatedLanes: Lanes,
+  suspendedRetryLanes: Lanes,
+) {
+  const previouslyPendingLanes = root.pendingLanes;
+  const noLongerPendingLanes = previouslyPendingLanes & ~remainingLanes;
+
+  root.pendingLanes = remainingLanes;
+
+  // Let's try everything again
+  root.suspendedLanes = NoLanes;
+  root.pingedLanes = NoLanes;
+  root.warmLanes = NoLanes;
+
+  if (enableDefaultTransitionIndicator) {
+    root.indicatorLanes &= remainingLanes;
+  }
+
+  root.expiredLanes &= remainingLanes;
+
+  root.entangledLanes &= remainingLanes;
+
+  root.errorRecoveryDisabledLanes &= remainingLanes;
+  root.shellSuspendCounter = 0;
+
+  const entanglements = root.entanglements;
+  const expirationTimes = root.expirationTimes;
+  const hiddenUpdates = root.hiddenUpdates;
+
+  // Clear the lanes that no longer have pending work
+  let lanes = noLongerPendingLanes;
+  while (lanes > 0) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+
+    entanglements[index] = NoLanes;
+    expirationTimes[index] = NoTimestamp;
+
+    const hiddenUpdatesForLane = hiddenUpdates[index];
+    if (hiddenUpdatesForLane !== null) {
+      hiddenUpdates[index] = null;
+      // "Hidden" updates are updates that were made to a hidden component. They
+      // have special logic associated with them because they may be entangled
+      // with updates that occur outside that tree. But once the outer tree
+      // commits, they behave like regular updates.
+      for (let i = 0; i < hiddenUpdatesForLane.length; i++) {
+        const update = hiddenUpdatesForLane[i];
+        if (update !== null) {
+          update.lane &= ~OffscreenLane;
+        }
+      }
+    }
+
+    lanes &= ~lane;
+  }
+
+  if (spawnedLane !== NoLane) {
+    markSpawnedDeferredLane(
+      root,
+      spawnedLane,
+      // This render finished successfully without suspending, so we don't need
+      // to entangle the spawned task with the parent task.
+      NoLanes,
+    );
+  }
+
+  // suspendedRetryLanes represents the retry lanes spawned by new Suspense
+  // boundaries during this render that were not later pinged.
+  //
+  // These lanes were marked as pending on their associated Suspense boundary
+  // fiber during the render phase so that we could start rendering them
+  // before new data streams in. As soon as the fallback commits, we can try
+  // to render them again.
+  //
+  // But since we know they're still suspended, we can skip straight to the
+  // "prerender" mode (i.e. don't skip over siblings after something
+  // suspended) instead of the regular mode (i.e. unwind and skip the siblings
+  // as soon as something suspends to unblock the rest of the update).
+  if (
+    suspendedRetryLanes !== NoLanes &&
+    // Note that we only do this if there were no updates since we started
+    // rendering. This mirrors the logic in markRootUpdated — whenever we
+    // receive an update, we reset all the suspended and pinged lanes.
+    updatedLanes === NoLanes &&
+    !(disableLegacyMode && root.tag === LegacyRoot)
+  ) {
+    // We also need to avoid marking a retry lane as suspended if it was already
+    // pending before this render. We can't say these are now suspended if they
+    // weren't included in our attempt.
+    const freshlySpawnedRetryLanes =
+      suspendedRetryLanes &
+      // Remove any retry lane that was already pending before our just-finished
+      // attempt, and also wasn't included in that attempt.
+      ~(previouslyPendingLanes & ~finishedLanes);
+    root.suspendedLanes |= freshlySpawnedRetryLanes;
+  }
+}
+
+function markSpawnedDeferredLane(
+  root: FiberRoot,
+  spawnedLane: Lane,
+  entangledLanes: Lanes,
+) {
+  // This render spawned a deferred task. Mark it as pending.
+  root.pendingLanes |= spawnedLane;
+  root.suspendedLanes &= ~spawnedLane;
+
+  // Entangle the spawned lane with the DeferredLane bit so that we know it
+  // was the result of another render. This lets us avoid a useDeferredValue
+  // waterfall — only the first level will defer.
+  // TODO: Now that there is a reserved set of transition lanes that are used
+  // exclusively for deferred work, we should get rid of this special
+  // DeferredLane bit; the same information can be inferred by checking whether
+  // the lane is one of the TransitionDeferredLanes. The only reason this still
+  // exists is because we need to also do the same for OffscreenLane. That
+  // requires additional changes because there are more places around the
+  // codebase that treat OffscreenLane as a magic value; would need to check
+  // for a new OffscreenDeferredLane, too. Will leave this for a follow-up.
+  const spawnedLaneIndex = laneToIndex(spawnedLane);
+  root.entangledLanes |= spawnedLane;
+  root.entanglements[spawnedLaneIndex] |=
+    DeferredLane |
+    // If the parent render task suspended, we must also entangle those lanes
+    // with the spawned task, so that the deferred task includes all the same
+    // updates that the parent task did. We can exclude any lane that is not
+    // used for updates (e.g. Offscreen).
+    (entangledLanes & UpdateLanes);
+}
+
+export function markRootEntangled(root: FiberRoot, entangledLanes: Lanes) {
+  // In addition to entangling each of the given lanes with each other, we also
+  // have to consider _transitive_ entanglements. For each lane that is already
+  // entangled with *any* of the given lanes, that lane is now transitively
+  // entangled with *all* the given lanes.
+  //
+  // Translated: If C is entangled with A, then entangling A with B also
+  // entangles C with B.
+  //
+  // If this is hard to grasp, it might help to intentionally break this
+  // function and look at the tests that fail in ReactTransition-test.js. Try
+  // commenting out one of the conditions below.
+
+  const rootEntangledLanes = (root.entangledLanes |= entangledLanes);
+  const entanglements = root.entanglements;
+  let lanes = rootEntangledLanes;
+  while (lanes) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+    if (
+      // Is this one of the newly entangled lanes?
+      (lane & entangledLanes) |
+      // Is this lane transitively entangled with the newly entangled lanes?
+      (entanglements[index] & entangledLanes)
+    ) {
+      entanglements[index] |= entangledLanes;
+    }
+    lanes &= ~lane;
+  }
+}
+
+export function upgradePendingLanesToSync(
+  root: FiberRoot,
+  lanesToUpgrade: Lanes,
+) {
+  // Same as upgradePendingLaneToSync but accepts multiple lanes, so it's a
+  // bit slower.
+  root.pendingLanes |= SyncLane;
+  root.entangledLanes |= SyncLane;
+  let lanes = lanesToUpgrade;
+  while (lanes) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+    root.entanglements[SyncLaneIndex] |= lane;
+    lanes &= ~lane;
+  }
+}
+
+export function markHiddenUpdate(
+  root: FiberRoot,
+  update: ConcurrentUpdate,
+  lane: Lane,
+) {
+  const index = laneToIndex(lane);
+  const hiddenUpdates = root.hiddenUpdates;
+  const hiddenUpdatesForLane = hiddenUpdates[index];
+  if (hiddenUpdatesForLane === null) {
+    hiddenUpdates[index] = [update];
+  } else {
+    hiddenUpdatesForLane.push(update);
+  }
+  update.lane = lane | OffscreenLane;
+}
+
+export function getBumpedLaneForHydration(
+  root: FiberRoot,
+  renderLanes: Lanes,
+): Lane {
+  const renderLane = getHighestPriorityLane(renderLanes);
+  const bumpedLane =
+    (renderLane & SyncUpdateLanes) !== NoLane
+      ? // Unify sync lanes. We don't do this inside getBumpedLaneForHydrationByLane
+        // because that causes things to flush synchronously when they shouldn't.
+        // TODO: This is not coherent but that's beacuse the unification is not coherent.
+        // We need to get merge these into an actual single lane.
+        SyncHydrationLane
+      : getBumpedLaneForHydrationByLane(renderLane);
+  // Check if the lane we chose is suspended. If so, that indicates that we
+  // already attempted and failed to hydrate at that level. Also check if we're
+  // already rendering that lane, which is rare but could happen.
+  // TODO: This should move into the caller to decide whether giving up is valid.
+  if ((bumpedLane & (root.suspendedLanes | renderLanes)) !== NoLane) {
+    // Give up trying to hydrate and fall back to client render.
+    return NoLane;
+  }
+  return bumpedLane;
+}
+
+export function getBumpedLaneForHydrationByLane(lane: Lane): Lane {
+  switch (lane) {
+    case SyncLane:
+      lane = SyncHydrationLane;
+      break;
+    case InputContinuousLane:
+      lane = InputContinuousHydrationLane;
+      break;
+    case DefaultLane:
+      lane = DefaultHydrationLane;
+      break;
+    case TransitionLane1:
+    case TransitionLane2:
+    case TransitionLane3:
+    case TransitionLane4:
+    case TransitionLane5:
+    case TransitionLane6:
+    case TransitionLane7:
+    case TransitionLane8:
+    case TransitionLane9:
+    case TransitionLane10:
+    case TransitionLane11:
+    case TransitionLane12:
+    case TransitionLane13:
+    case TransitionLane14:
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+      lane = TransitionHydrationLane;
+      break;
+    case IdleLane:
+      lane = IdleHydrationLane;
+      break;
+    default:
+      // Everything else is already either a hydration lane, or shouldn't
+      // be retried at a hydration lane.
+      lane = NoLane;
+      break;
+  }
+  return lane;
+}
+
+export function addFiberToLanesMap(
+  root: FiberRoot,
+  fiber: Fiber,
+  lanes: Lanes | Lane,
+) {
+  if (!enableUpdaterTracking) {
+    return;
+  }
+  if (!isDevToolsPresent) {
+    return;
+  }
+  const pendingUpdatersLaneMap = root.pendingUpdatersLaneMap;
+  while (lanes > 0) {
+    const index = laneToIndex(lanes);
+    const lane = 1 << index;
+
+    const updaters = pendingUpdatersLaneMap[index];
+    updaters.add(fiber);
+
+    lanes &= ~lane;
+  }
+}
+
+export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
+  if (!enableUpdaterTracking) {
+    return;
+  }
+  if (!isDevToolsPresent) {
+    return;
+  }
+  const pendingUpdatersLaneMap = root.pendingUpdatersLaneMap;
+  const memoizedUpdaters = root.memoizedUpdaters;
+  while (lanes > 0) {
+    const index = laneToIndex(lanes);
+    const lane = 1 << index;
+
+    const updaters = pendingUpdatersLaneMap[index];
+    if (updaters.size > 0) {
+      updaters.forEach(fiber => {
+        const alternate = fiber.alternate;
+        if (alternate === null || !memoizedUpdaters.has(alternate)) {
+          memoizedUpdaters.add(fiber);
+        }
+      });
+      updaters.clear();
+    }
+
+    lanes &= ~lane;
+  }
+}
+
+export function addTransitionToLanesMap(
+  root: FiberRoot,
+  transition: Transition,
+  lane: Lane,
+) {
+  if (enableTransitionTracing) {
+    const transitionLanesMap = root.transitionLanes;
+    const index = laneToIndex(lane);
+    let transitions = transitionLanesMap[index];
+    if (transitions === null) {
+      transitions = new Set();
+    }
+    transitions.add(transition);
+
+    transitionLanesMap[index] = transitions;
+  }
+}
+
+export function getTransitionsForLanes(
+  root: FiberRoot,
+  lanes: Lane | Lanes,
+): Array<Transition> | null {
+  if (!enableTransitionTracing) {
+    return null;
+  }
+
+  const transitionsForLanes = [];
+  while (lanes > 0) {
+    const index = laneToIndex(lanes);
+    const lane = 1 << index;
+    const transitions = root.transitionLanes[index];
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        transitionsForLanes.push(transition);
+      });
+    }
+
+    lanes &= ~lane;
+  }
+
+  if (transitionsForLanes.length === 0) {
+    return null;
+  }
+
+  return transitionsForLanes;
+}
+
+export function clearTransitionsForLanes(root: FiberRoot, lanes: Lane | Lanes) {
+  if (!enableTransitionTracing) {
+    return;
+  }
+
+  while (lanes > 0) {
+    const index = laneToIndex(lanes);
+    const lane = 1 << index;
+
+    const transitions = root.transitionLanes[index];
+    if (transitions !== null) {
+      root.transitionLanes[index] = null;
+    }
+
+    lanes &= ~lane;
+  }
+}
+
+// Used to name the Performance Track
+export function getGroupNameOfHighestPriorityLane(lanes: Lanes): string {
+  if (
+    lanes &
+    (SyncHydrationLane |
+      SyncLane |
+      InputContinuousHydrationLane |
+      InputContinuousLane |
+      DefaultHydrationLane |
+      DefaultLane)
+  ) {
+    return 'Blocking';
+  }
+  if (lanes & GestureLane) {
+    return 'Gesture';
+  }
+  if (lanes & (TransitionHydrationLane | TransitionLanes)) {
+    return 'Transition';
+  }
+  if (lanes & RetryLanes) {
+    return 'Suspense';
+  }
+  if (
+    lanes &
+    (SelectiveHydrationLane |
+      IdleHydrationLane |
+      IdleLane |
+      OffscreenLane |
+      DeferredLane)
+  ) {
+    return 'Idle';
+  }
+  return 'Other';
+}
diff --git a/packages/react-reconciler/src/ReactFiberLegacyContext.js b/packages/react-reconciler/src/ReactFiberLegacyContext.js
new file mode 100644
index 00000000000..e8a586e856e
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberLegacyContext.js
@@ -0,0 +1,324 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack';
+
+import {disableLegacyContext} from 'shared/ReactFeatureFlags';
+import {ClassComponent, HostRoot} from './ReactWorkTags';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+
+import {createCursor, push, pop} from './ReactFiberStack';
+
+let warnedAboutMissingGetChildContext;
+
+if (__DEV__) {
+  warnedAboutMissingGetChildContext = ({}: {[string]: boolean});
+}
+
+export const emptyContextObject: {} = {};
+if (__DEV__) {
+  Object.freeze(emptyContextObject);
+}
+
+// A cursor to the current merged context object on the stack.
+const contextStackCursor: StackCursor<Object> =
+  createCursor(emptyContextObject);
+// A cursor to a boolean indicating whether the context has changed.
+const didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);
+// Keep track of the previous context object that was on the stack.
+// We use this to get access to the parent context after we have already
+// pushed the next context provider, and now need to merge their contexts.
+let previousContext: Object = emptyContextObject;
+
+function getUnmaskedContext(
+  workInProgress: Fiber,
+  Component: Function,
+  didPushOwnContextIfProvider: boolean,
+): Object {
+  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;
+  }
+}
+
+function cacheContext(
+  workInProgress: Fiber,
+  unmaskedContext: Object,
+  maskedContext: Object,
+): void {
+  if (disableLegacyContext) {
+    return;
+  } else {
+    const instance = workInProgress.stateNode;
+    instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;
+    instance.__reactInternalMemoizedMaskedChildContext = maskedContext;
+  }
+}
+
+function getMaskedContext(
+  workInProgress: Fiber,
+  unmaskedContext: Object,
+): Object {
+  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;
+    }
+
+    const context: {[string]: $FlowFixMe} = {};
+    for (const key in contextTypes) {
+      context[key] = unmaskedContext[key];
+    }
+
+    // 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;
+  }
+}
+
+function hasContextChanged(): boolean {
+  if (disableLegacyContext) {
+    return false;
+  } else {
+    return didPerformWorkStackCursor.current;
+  }
+}
+
+function isContextProvider(type: Function): boolean {
+  if (disableLegacyContext) {
+    return false;
+  } else {
+    const childContextTypes = type.childContextTypes;
+    return childContextTypes !== null && childContextTypes !== undefined;
+  }
+}
+
+function popContext(fiber: Fiber): void {
+  if (disableLegacyContext) {
+    return;
+  } else {
+    pop(didPerformWorkStackCursor, fiber);
+    pop(contextStackCursor, fiber);
+  }
+}
+
+function popTopLevelContextObject(fiber: Fiber): void {
+  if (disableLegacyContext) {
+    return;
+  } else {
+    pop(didPerformWorkStackCursor, fiber);
+    pop(contextStackCursor, fiber);
+  }
+}
+
+function pushTopLevelContextObject(
+  fiber: Fiber,
+  context: Object,
+  didChange: boolean,
+): void {
+  if (disableLegacyContext) {
+    return;
+  } else {
+    if (contextStackCursor.current !== emptyContextObject) {
+      throw new Error(
+        '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(
+  fiber: Fiber,
+  type: any,
+  parentContext: Object,
+): Object {
+  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 = getComponentNameFromFiber(fiber) || '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;
+    }
+
+    const childContext = instance.getChildContext();
+    for (const contextKey in childContext) {
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${
+            getComponentNameFromFiber(fiber) || 'Unknown'
+          }.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
+    }
+
+    return {...parentContext, ...childContext};
+  }
+}
+
+function pushContextProvider(workInProgress: Fiber): boolean {
+  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(
+  workInProgress: Fiber,
+  type: any,
+  didChange: boolean,
+): void {
+  if (disableLegacyContext) {
+    return;
+  } else {
+    const instance = workInProgress.stateNode;
+
+    if (!instance) {
+      throw new Error(
+        '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 {
+  if (disableLegacyContext) {
+    return emptyContextObject;
+  } else {
+    // Currently this is only used with renderSubtreeIntoContainer; not sure if it
+    // makes sense elsewhere
+    let node: Fiber = 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;
+        }
+      }
+      // $FlowFixMe[incompatible-type] we bail out when we get a null
+      node = node.return;
+    } while (node !== null);
+
+    throw new Error(
+      'Found unexpected detached subtree parent. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+}
+
+export {
+  getUnmaskedContext,
+  cacheContext,
+  getMaskedContext,
+  hasContextChanged,
+  popContext,
+  popTopLevelContextObject,
+  pushTopLevelContextObject,
+  processChildContext,
+  isContextProvider,
+  pushContextProvider,
+  invalidateContextProvider,
+  findCurrentUnmaskedContext,
+};
diff --git a/packages/react-reconciler/src/ReactFiberMutationTracking.js b/packages/react-reconciler/src/ReactFiberMutationTracking.js
new file mode 100644
index 00000000000..cb439bd68fb
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberMutationTracking.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  enableDefaultTransitionIndicator,
+  enableViewTransition,
+} from 'shared/ReactFeatureFlags';
+
+export let rootMutationContext: boolean = false;
+export let viewTransitionMutationContext: boolean = false;
+
+export function pushRootMutationContext(): void {
+  if (enableDefaultTransitionIndicator) {
+    rootMutationContext = false;
+  }
+  if (enableViewTransition) {
+    viewTransitionMutationContext = false;
+  }
+}
+
+export function pushMutationContext(): boolean {
+  if (!enableViewTransition) {
+    return false;
+  }
+  const prev = viewTransitionMutationContext;
+  viewTransitionMutationContext = false;
+  return prev;
+}
+
+export function popMutationContext(prev: boolean): void {
+  if (enableViewTransition) {
+    if (viewTransitionMutationContext) {
+      rootMutationContext = true;
+    }
+    viewTransitionMutationContext = prev;
+  }
+}
+
+export function trackHostMutation(): void {
+  // This is extremely hot function that must be inlined. Don't add more stuff.
+  if (enableViewTransition) {
+    viewTransitionMutationContext = true;
+  } else if (enableDefaultTransitionIndicator) {
+    // We only set this if enableViewTransition is not on. Otherwise we track
+    // it on the viewTransitionMutationContext and collect it when we pop
+    // to avoid more than a single operation in this hot path.
+    rootMutationContext = true;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.js b/packages/react-reconciler/src/ReactFiberNewContext.js
new file mode 100644
index 00000000000..02792d863af
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberNewContext.js
@@ -0,0 +1,571 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Fiber,
+  ContextDependency,
+  Dependencies,
+} from './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack';
+import type {Lanes} from './ReactFiberLane';
+import type {TransitionStatus} from './ReactFiberConfig';
+import type {Hook} from './ReactFiberHooks';
+
+import {isPrimaryRenderer, HostTransitionContext} from './ReactFiberConfig';
+import {createCursor, push, pop} from './ReactFiberStack';
+import {ContextProvider, DehydratedFragment} from './ReactWorkTags';
+import {NoLanes, isSubsetOfLanes, mergeLanes} from './ReactFiberLane';
+import {
+  NoFlags,
+  DidPropagateContext,
+  NeedsPropagation,
+} from './ReactFiberFlags';
+
+import is from 'shared/objectIs';
+import {getHostTransitionProvider} from './ReactFiberHostContext';
+
+const valueCursor: StackCursor<mixed> = createCursor(null);
+
+let rendererCursorDEV: StackCursor<Object | null>;
+if (__DEV__) {
+  rendererCursorDEV = createCursor(null);
+}
+let renderer2CursorDEV: StackCursor<Object | null>;
+if (__DEV__) {
+  renderer2CursorDEV = createCursor(null);
+}
+
+let rendererSigil;
+if (__DEV__) {
+  // Use this to detect multiple renderers using the same context
+  rendererSigil = {};
+}
+
+let currentlyRenderingFiber: Fiber | null = null;
+let lastContextDependency: ContextDependency<mixed> | null = null;
+
+let isDisallowedContextReadInDEV: boolean = false;
+
+export function resetContextDependencies(): void {
+  // This is called right before React yields execution, to ensure `readContext`
+  // cannot be called outside the render phase.
+  currentlyRenderingFiber = null;
+  lastContextDependency = null;
+  if (__DEV__) {
+    isDisallowedContextReadInDEV = false;
+  }
+}
+
+export function enterDisallowedContextReadInDEV(): void {
+  if (__DEV__) {
+    isDisallowedContextReadInDEV = true;
+  }
+}
+
+export function exitDisallowedContextReadInDEV(): void {
+  if (__DEV__) {
+    isDisallowedContextReadInDEV = false;
+  }
+}
+
+export function pushProvider<T>(
+  providerFiber: Fiber,
+  context: ReactContext<T>,
+  nextValue: T,
+): void {
+  if (isPrimaryRenderer) {
+    push(valueCursor, context._currentValue, providerFiber);
+
+    context._currentValue = nextValue;
+    if (__DEV__) {
+      push(rendererCursorDEV, context._currentRenderer, providerFiber);
+
+      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 {
+    push(valueCursor, context._currentValue2, providerFiber);
+
+    context._currentValue2 = nextValue;
+    if (__DEV__) {
+      push(renderer2CursorDEV, context._currentRenderer2, providerFiber);
+
+      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;
+    }
+  }
+}
+
+export function popProvider(
+  context: ReactContext<any>,
+  providerFiber: Fiber,
+): void {
+  const currentValue = valueCursor.current;
+
+  if (isPrimaryRenderer) {
+    context._currentValue = currentValue;
+    if (__DEV__) {
+      const currentRenderer = rendererCursorDEV.current;
+      pop(rendererCursorDEV, providerFiber);
+      context._currentRenderer = currentRenderer;
+    }
+  } else {
+    context._currentValue2 = currentValue;
+    if (__DEV__) {
+      const currentRenderer2 = renderer2CursorDEV.current;
+      pop(renderer2CursorDEV, providerFiber);
+      context._currentRenderer2 = currentRenderer2;
+    }
+  }
+
+  pop(valueCursor, providerFiber);
+}
+
+export function scheduleContextWorkOnParentPath(
+  parent: Fiber | null,
+  renderLanes: Lanes,
+  propagationRoot: Fiber,
+) {
+  // Update the child lanes of all the ancestors, including the alternates.
+  let node = parent;
+  while (node !== null) {
+    const alternate = node.alternate;
+    if (!isSubsetOfLanes(node.childLanes, renderLanes)) {
+      node.childLanes = mergeLanes(node.childLanes, renderLanes);
+      if (alternate !== null) {
+        alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
+      }
+    } else if (
+      alternate !== null &&
+      !isSubsetOfLanes(alternate.childLanes, renderLanes)
+    ) {
+      alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
+    } else {
+      // Neither alternate was updated.
+      // Normally, this would mean that the rest of the
+      // ancestor path already has sufficient priority.
+      // However, this is not necessarily true inside offscreen
+      // or fallback trees because childLanes may be inconsistent
+      // with the surroundings. This is why we continue the loop.
+    }
+    if (node === propagationRoot) {
+      break;
+    }
+    node = node.return;
+  }
+  if (__DEV__) {
+    if (node !== propagationRoot) {
+      console.error(
+        'Expected to find the propagation root when scheduling context work. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+  }
+}
+
+export function propagateContextChange<T>(
+  workInProgress: Fiber,
+  context: ReactContext<T>,
+  renderLanes: Lanes,
+): void {
+  // TODO: This path is only used by Cache components. Update
+  // lazilyPropagateParentContextChanges to look for Cache components so they
+  // can take advantage of lazy propagation.
+  const forcePropagateEntireTree = true;
+  propagateContextChanges(
+    workInProgress,
+    [context],
+    renderLanes,
+    forcePropagateEntireTree,
+  );
+}
+
+function propagateContextChanges<T>(
+  workInProgress: Fiber,
+  contexts: Array<any>,
+  renderLanes: Lanes,
+  forcePropagateEntireTree: boolean,
+): void {
+  let fiber = workInProgress.child;
+  if (fiber !== null) {
+    // Set the return pointer of the child to the work-in-progress fiber.
+    fiber.return = workInProgress;
+  }
+  while (fiber !== null) {
+    let nextFiber;
+
+    // Visit this fiber.
+    const list = fiber.dependencies;
+    if (list !== null) {
+      nextFiber = fiber.child;
+
+      let dep = list.firstContext;
+      findChangedDep: while (dep !== null) {
+        // Assigning these to constants to help Flow
+        const dependency = dep;
+        const consumer = fiber;
+        findContext: for (let i = 0; i < contexts.length; i++) {
+          const context: ReactContext<T> = contexts[i];
+          // Check if the context matches.
+          if (dependency.context === context) {
+            // Match! Schedule an update on this fiber.
+
+            // In the lazy implementation, don't mark a dirty flag on the
+            // dependency itself. Not all changes are propagated, so we can't
+            // rely on the propagation function alone to determine whether
+            // something has changed; the consumer will check. In the future, we
+            // could add back a dirty flag as an optimization to avoid double
+            // checking, but until we have selectors it's not really worth
+            // the trouble.
+            consumer.lanes = mergeLanes(consumer.lanes, renderLanes);
+            const alternate = consumer.alternate;
+            if (alternate !== null) {
+              alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
+            }
+            scheduleContextWorkOnParentPath(
+              consumer.return,
+              renderLanes,
+              workInProgress,
+            );
+
+            if (!forcePropagateEntireTree) {
+              // During lazy propagation, when we find a match, we can defer
+              // propagating changes to the children, because we're going to
+              // visit them during render. We should continue propagating the
+              // siblings, though
+              nextFiber = null;
+            }
+
+            // Since we already found a match, we can stop traversing the
+            // dependency list.
+            break findChangedDep;
+          }
+        }
+        dep = dependency.next;
+      }
+    } else if (fiber.tag === DehydratedFragment) {
+      // If a dehydrated suspense boundary 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.
+      const parentSuspense = fiber.return;
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
+      parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
+      const alternate = parentSuspense.alternate;
+      if (alternate !== null) {
+        alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
+      }
+      // This is intentionally passing this fiber as the parent
+      // because we want to schedule this fiber as having work
+      // on its children. We'll use the childLanes on
+      // this fiber to indicate that a context has changed.
+      scheduleContextWorkOnParentPath(
+        parentSuspense,
+        renderLanes,
+        workInProgress,
+      );
+      nextFiber = null;
+    } else {
+      // Traverse down.
+      nextFiber = fiber.child;
+    }
+
+    if (nextFiber !== null) {
+      // Set the return pointer of the child to the work-in-progress fiber.
+      nextFiber.return = fiber;
+    } else {
+      // No child. Traverse to next sibling.
+      nextFiber = fiber;
+      while (nextFiber !== null) {
+        if (nextFiber === workInProgress) {
+          // We're back to the root of this subtree. Exit.
+          nextFiber = null;
+          break;
+        }
+        const sibling = nextFiber.sibling;
+        if (sibling !== null) {
+          // Set the return pointer of the sibling to the work-in-progress fiber.
+          sibling.return = nextFiber.return;
+          nextFiber = sibling;
+          break;
+        }
+        // No more siblings. Traverse up.
+        nextFiber = nextFiber.return;
+      }
+    }
+    fiber = nextFiber;
+  }
+}
+
+export function lazilyPropagateParentContextChanges(
+  current: Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const forcePropagateEntireTree = false;
+  propagateParentContextChanges(
+    current,
+    workInProgress,
+    renderLanes,
+    forcePropagateEntireTree,
+  );
+}
+
+// Used for propagating a deferred tree (Suspense, Offscreen). We must propagate
+// to the entire subtree, because we won't revisit it until after the current
+// render has completed, at which point we'll have lost track of which providers
+// have changed.
+export function propagateParentContextChangesToDeferredTree(
+  current: Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const forcePropagateEntireTree = true;
+  propagateParentContextChanges(
+    current,
+    workInProgress,
+    renderLanes,
+    forcePropagateEntireTree,
+  );
+}
+
+function propagateParentContextChanges(
+  current: Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+  forcePropagateEntireTree: boolean,
+) {
+  // Collect all the parent providers that changed. Since this is usually small
+  // number, we use an Array instead of Set.
+  let contexts = null;
+  let parent: null | Fiber = workInProgress;
+  let isInsidePropagationBailout = false;
+  while (parent !== null) {
+    if (!isInsidePropagationBailout) {
+      if ((parent.flags & NeedsPropagation) !== NoFlags) {
+        isInsidePropagationBailout = true;
+      } else if ((parent.flags & DidPropagateContext) !== NoFlags) {
+        break;
+      }
+    }
+
+    if (parent.tag === ContextProvider) {
+      const currentParent = parent.alternate;
+
+      if (currentParent === null) {
+        throw new Error('Should have a current fiber. This is a bug in React.');
+      }
+
+      const oldProps = currentParent.memoizedProps;
+      if (oldProps !== null) {
+        const context: ReactContext<any> = parent.type;
+        const newProps = parent.pendingProps;
+        const newValue = newProps.value;
+
+        const oldValue = oldProps.value;
+
+        if (!is(newValue, oldValue)) {
+          if (contexts !== null) {
+            contexts.push(context);
+          } else {
+            contexts = [context];
+          }
+        }
+      }
+    } else if (parent === getHostTransitionProvider()) {
+      // During a host transition, a host component can act like a context
+      // provider. E.g. in React DOM, this would be a <form />.
+      const currentParent = parent.alternate;
+      if (currentParent === null) {
+        throw new Error('Should have a current fiber. This is a bug in React.');
+      }
+
+      const oldStateHook: Hook = currentParent.memoizedState;
+      const oldState: TransitionStatus = oldStateHook.memoizedState;
+
+      const newStateHook: Hook = parent.memoizedState;
+      const newState: TransitionStatus = newStateHook.memoizedState;
+
+      // This uses regular equality instead of Object.is because we assume that
+      // host transition state doesn't include NaN as a valid type.
+      if (oldState !== newState) {
+        if (contexts !== null) {
+          contexts.push(HostTransitionContext);
+        } else {
+          contexts = [HostTransitionContext];
+        }
+      }
+    }
+    parent = parent.return;
+  }
+
+  if (contexts !== null) {
+    // If there were any changed providers, search through the children and
+    // propagate their changes.
+    propagateContextChanges(
+      workInProgress,
+      contexts,
+      renderLanes,
+      forcePropagateEntireTree,
+    );
+  }
+
+  // This is an optimization so that we only propagate once per subtree. If a
+  // deeply nested child bails out, and it calls this propagation function, it
+  // uses this flag to know that the remaining ancestor providers have already
+  // been propagated.
+  //
+  // NOTE: This optimization is only necessary because we sometimes enter the
+  // begin phase of nodes that don't have any work scheduled on them —
+  // specifically, the siblings of a node that _does_ have scheduled work. The
+  // siblings will bail out and call this function again, even though we already
+  // propagated content changes to it and its subtree. So we use this flag to
+  // mark that the parent providers already propagated.
+  //
+  // Unfortunately, though, we need to ignore this flag when we're inside a
+  // tree whose context propagation was deferred — that's what the
+  // `NeedsPropagation` flag is for.
+  //
+  // If we could instead bail out before entering the siblings' begin phase,
+  // then we could remove both `DidPropagateContext` and `NeedsPropagation`.
+  // Consider this as part of the next refactor to the fiber tree structure.
+  workInProgress.flags |= DidPropagateContext;
+}
+
+export function checkIfContextChanged(
+  currentDependencies: Dependencies,
+): boolean {
+  // Iterate over the current dependencies to see if something changed. This
+  // only gets called if props and state has already bailed out, so it's a
+  // relatively uncommon path, except at the root of a changed subtree.
+  // Alternatively, we could move these comparisons into `readContext`, but
+  // that's a much hotter path, so I think this is an appropriate trade off.
+  let dependency = currentDependencies.firstContext;
+  while (dependency !== null) {
+    const context = dependency.context;
+    const newValue = isPrimaryRenderer
+      ? context._currentValue
+      : context._currentValue2;
+    const oldValue = dependency.memoizedValue;
+    if (!is(newValue, oldValue)) {
+      return true;
+    }
+    dependency = dependency.next;
+  }
+  return false;
+}
+
+export function prepareToReadContext(
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): void {
+  currentlyRenderingFiber = workInProgress;
+  lastContextDependency = null;
+
+  const dependencies = workInProgress.dependencies;
+  if (dependencies !== null) {
+    // Reset the work-in-progress list
+    dependencies.firstContext = null;
+  }
+}
+
+export function readContext<T>(context: ReactContext<T>): 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.
+    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().',
+      );
+    }
+  }
+  return readContextForConsumer(currentlyRenderingFiber, context);
+}
+
+export function readContextDuringReconciliation<T>(
+  consumer: Fiber,
+  context: ReactContext<T>,
+  renderLanes: Lanes,
+): T {
+  if (currentlyRenderingFiber === null) {
+    prepareToReadContext(consumer, renderLanes);
+  }
+  return readContextForConsumer(consumer, context);
+}
+
+function readContextForConsumer<T>(
+  consumer: Fiber | null,
+  context: ReactContext<T>,
+): T {
+  const value = isPrimaryRenderer
+    ? context._currentValue
+    : context._currentValue2;
+
+  const contextItem = {
+    context: ((context: any): ReactContext<mixed>),
+    memoizedValue: value,
+    next: null,
+  };
+
+  if (lastContextDependency === null) {
+    if (consumer === null) {
+      throw new 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().',
+      );
+    }
+
+    // This is the first dependency for this component. Create a new list.
+    lastContextDependency = contextItem;
+    consumer.dependencies = __DEV__
+      ? {
+          lanes: NoLanes,
+          firstContext: contextItem,
+          _debugThenableState: null,
+        }
+      : {
+          lanes: NoLanes,
+          firstContext: contextItem,
+        };
+    consumer.flags |= NeedsPropagation;
+  } else {
+    // Append a new context item.
+    lastContextDependency = lastContextDependency.next = contextItem;
+  }
+  return value;
+}
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
new file mode 100644
index 00000000000..c68a050fcff
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList, Wakeable} from 'shared/ReactTypes';
+import type {Lanes} from './ReactFiberLane';
+import type {SpawnedCachePool} from './ReactFiberCacheComponent';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+import type {RetryQueue} from './ReactFiberSuspenseComponent';
+
+type OffscreenMode = 'hidden' | 'unstable-defer-without-hiding' | 'visible';
+
+export type LegacyHiddenProps = {
+  mode?: OffscreenMode | null | void,
+  children?: ReactNodeList,
+};
+
+export type OffscreenProps = {
+  // TODO: Pick an API before exposing the Offscreen type. I've chosen an enum
+  // for now, since we might have multiple variants. For example, hiding the
+  // content without changing the layout.
+  //
+  // Default mode is visible. Kind of a weird default for a component
+  // called "Offscreen." Possible alt: <Visibility />?
+  mode?: OffscreenMode | null | void,
+  children?: ReactNodeList,
+};
+
+// We use the existence of the state object as an indicator that the component
+// is hidden.
+export type OffscreenState = {
+  // TODO: This doesn't do anything, yet. It's always NoLanes. But eventually it
+  // will represent the pending work that must be included in the render in
+  // order to unhide the component.
+  baseLanes: Lanes,
+  cachePool: SpawnedCachePool | null,
+};
+
+export type OffscreenQueue = {
+  transitions: Array<Transition> | null,
+  markerInstances: Array<TracingMarkerInstance> | null,
+  retryQueue: RetryQueue | null,
+};
+
+type OffscreenVisibility = number;
+
+export const OffscreenVisible = /*                     */ 0b001;
+export const OffscreenPassiveEffectsConnected = /*     */ 0b010;
+
+export type OffscreenInstance = {
+  _visibility: OffscreenVisibility,
+  _pendingMarkers: Set<TracingMarkerInstance> | null,
+  _transitions: Set<Transition> | null,
+  _retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
+};
diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
new file mode 100644
index 00000000000..a1a2d76cecc
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
@@ -0,0 +1,1720 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/no-production-logging */
+
+import type {Fiber} from './ReactInternalTypes';
+
+import type {Lanes} from './ReactFiberLane';
+
+import type {CapturedValue} from './ReactCapturedValue';
+
+import {SuspenseComponent} from './ReactWorkTags';
+
+import getComponentNameFromFiber from './getComponentNameFromFiber';
+
+import {
+  getGroupNameOfHighestPriorityLane,
+  includesOnlyHydrationLanes,
+  includesOnlyOffscreenLanes,
+  includesOnlyHydrationOrOffscreenLanes,
+  includesSomeLane,
+} from './ReactFiberLane';
+
+import {
+  addValueToProperties,
+  addObjectToProperties,
+  addObjectDiffToProperties,
+} from 'shared/ReactPerformanceTrackProperties';
+
+import {
+  enableProfilerTimer,
+  enableGestureTransition,
+  enablePerformanceIssueReporting,
+} from 'shared/ReactFeatureFlags';
+
+const supportsUserTiming =
+  enableProfilerTimer &&
+  typeof console !== 'undefined' &&
+  typeof console.timeStamp === 'function' &&
+  (!__DEV__ ||
+    // In DEV we also rely on performance.measure
+    (typeof performance !== 'undefined' &&
+      // $FlowFixMe[method-unbinding]
+      typeof performance.measure === 'function'));
+
+const COMPONENTS_TRACK = 'Components ⚛';
+const LANES_TRACK_GROUP = 'Scheduler ⚛';
+
+let currentTrack: string = 'Blocking'; // Lane
+
+export function setCurrentTrackFromLanes(lanes: Lanes): void {
+  currentTrack = getGroupNameOfHighestPriorityLane(lanes);
+}
+
+export function markAllLanesInOrder() {
+  if (supportsUserTiming) {
+    // Ensure we create all tracks in priority order. Currently performance.mark() are in
+    // first insertion order but performance.measure() are in the reverse order. We can
+    // always add the 0 time slot even if it's in the past. That's still considered for
+    // ordering.
+    console.timeStamp(
+      'Blocking Track',
+      0.003,
+      0.003,
+      'Blocking',
+      LANES_TRACK_GROUP,
+      'primary-light',
+    );
+    if (enableGestureTransition) {
+      console.timeStamp(
+        'Gesture Track',
+        0.003,
+        0.003,
+        'Gesture',
+        LANES_TRACK_GROUP,
+        'primary-light',
+      );
+    }
+    console.timeStamp(
+      'Transition Track',
+      0.003,
+      0.003,
+      'Transition',
+      LANES_TRACK_GROUP,
+      'primary-light',
+    );
+    console.timeStamp(
+      'Suspense Track',
+      0.003,
+      0.003,
+      'Suspense',
+      LANES_TRACK_GROUP,
+      'primary-light',
+    );
+    console.timeStamp(
+      'Idle Track',
+      0.003,
+      0.003,
+      'Idle',
+      LANES_TRACK_GROUP,
+      'primary-light',
+    );
+  }
+}
+
+function logComponentTrigger(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+  trigger: string,
+) {
+  if (supportsUserTiming) {
+    reusableComponentOptions.start = startTime;
+    reusableComponentOptions.end = endTime;
+    reusableComponentDevToolDetails.color = 'warning';
+    reusableComponentDevToolDetails.tooltipText = trigger;
+    reusableComponentDevToolDetails.properties = null;
+    const debugTask = fiber._debugTask;
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        performance.measure.bind(
+          performance,
+          trigger,
+          reusableComponentOptions,
+        ),
+      );
+    } else {
+      performance.measure(trigger, reusableComponentOptions);
+    }
+    performance.clearMeasures(trigger);
+  }
+}
+
+export function logComponentMount(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+): void {
+  logComponentTrigger(fiber, startTime, endTime, 'Mount');
+}
+
+export function logComponentUnmount(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+): void {
+  logComponentTrigger(fiber, startTime, endTime, 'Unmount');
+}
+
+export function logComponentReappeared(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+): void {
+  logComponentTrigger(fiber, startTime, endTime, 'Reconnect');
+}
+
+export function logComponentDisappeared(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+): void {
+  logComponentTrigger(fiber, startTime, endTime, 'Disconnect');
+}
+
+let alreadyWarnedForDeepEquality = false;
+
+export function pushDeepEquality(): boolean {
+  if (__DEV__) {
+    // If this is true then we don't reset it to false because we're tracking if any
+    // parent already warned about having deep equality props in this subtree.
+    return alreadyWarnedForDeepEquality;
+  }
+  return false;
+}
+
+export function popDeepEquality(prev: boolean): void {
+  if (__DEV__) {
+    alreadyWarnedForDeepEquality = prev;
+  }
+}
+
+const reusableComponentDevToolDetails = {
+  color: 'primary',
+  properties: (null: null | Array<[string, string]>),
+  tooltipText: '',
+  track: COMPONENTS_TRACK,
+};
+
+const reusableComponentOptions: PerformanceMeasureOptions = {
+  start: -0,
+  end: -0,
+  detail: {
+    devtools: reusableComponentDevToolDetails,
+  },
+};
+
+const reusableChangedPropsEntry = ['Changed Props', ''];
+
+const reusableCascadingUpdateIssue = {
+  name: 'React: Cascading Update',
+  severity: 'warning',
+  description:
+    'A cascading update is an update that is triggered during an ongoing render. This can lead to performance issues.',
+  learnMoreUrl:
+    'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates',
+};
+
+const DEEP_EQUALITY_WARNING =
+  'This component received deeply equal props. It might benefit from useMemo or the React Compiler in its owner.';
+
+const reusableDeeplyEqualPropsEntry = ['Changed Props', DEEP_EQUALITY_WARNING];
+
+export function logComponentRender(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+  wasHydrated: boolean,
+  committedLanes: Lanes,
+): void {
+  const name = getComponentNameFromFiber(fiber);
+  if (name === null) {
+    // Skip
+    return;
+  }
+  if (supportsUserTiming) {
+    const alternate = fiber.alternate;
+    let selfTime: number = (fiber.actualDuration: any);
+    if (alternate === null || alternate.child !== fiber.child) {
+      for (let child = fiber.child; child !== null; child = child.sibling) {
+        selfTime -= (child.actualDuration: any);
+      }
+    }
+    const color =
+      selfTime < 0.5
+        ? wasHydrated
+          ? 'tertiary-light'
+          : 'primary-light'
+        : selfTime < 10
+          ? wasHydrated
+            ? 'tertiary'
+            : 'primary'
+          : selfTime < 100
+            ? wasHydrated
+              ? 'tertiary-dark'
+              : 'primary-dark'
+            : 'error';
+
+    if (!__DEV__) {
+      console.timeStamp(
+        name,
+        startTime,
+        endTime,
+        COMPONENTS_TRACK,
+        undefined,
+        color,
+      );
+    } else {
+      const props = fiber.memoizedProps;
+      const debugTask = fiber._debugTask;
+
+      if (
+        props !== null &&
+        alternate !== null &&
+        alternate.memoizedProps !== props
+      ) {
+        // If this is an update, we'll diff the props and emit which ones changed.
+        const properties: Array<[string, string]> = [reusableChangedPropsEntry];
+        const isDeeplyEqual = addObjectDiffToProperties(
+          alternate.memoizedProps,
+          props,
+          properties,
+          0,
+        );
+        if (properties.length > 1) {
+          if (
+            isDeeplyEqual &&
+            !alreadyWarnedForDeepEquality &&
+            !includesSomeLane(alternate.lanes, committedLanes) &&
+            (fiber.actualDuration: any) > 100
+          ) {
+            alreadyWarnedForDeepEquality = true;
+            // This is the first component in a subtree which rerendered with deeply equal props
+            // and didn't have its own work scheduled and took a non-trivial amount of time.
+            // We highlight this for further inspection.
+            // Note that we only consider this case if properties.length > 1 which it will only
+            // be if we have emitted any diffs. We'd only emit diffs if there were any nested
+            // equal objects. Therefore, we don't warn for simple shallow equality.
+            properties[0] = reusableDeeplyEqualPropsEntry;
+            reusableComponentDevToolDetails.color = 'warning';
+            reusableComponentDevToolDetails.tooltipText = DEEP_EQUALITY_WARNING;
+          } else {
+            reusableComponentDevToolDetails.color = color;
+            reusableComponentDevToolDetails.tooltipText = name;
+          }
+          reusableComponentDevToolDetails.properties = properties;
+          reusableComponentOptions.start = startTime;
+          reusableComponentOptions.end = endTime;
+
+          const measureName = '\u200b' + name;
+          if (debugTask != null) {
+            debugTask.run(
+              // $FlowFixMe[method-unbinding]
+              performance.measure.bind(
+                performance,
+                measureName,
+                reusableComponentOptions,
+              ),
+            );
+          } else {
+            performance.measure(measureName, reusableComponentOptions);
+          }
+          performance.clearMeasures(measureName);
+        } else {
+          if (debugTask != null) {
+            debugTask.run(
+              // $FlowFixMe[method-unbinding]
+              console.timeStamp.bind(
+                console,
+                name,
+                startTime,
+                endTime,
+                COMPONENTS_TRACK,
+                undefined,
+                color,
+              ),
+            );
+          } else {
+            console.timeStamp(
+              name,
+              startTime,
+              endTime,
+              COMPONENTS_TRACK,
+              undefined,
+              color,
+            );
+          }
+        }
+      } else {
+        if (debugTask != null) {
+          debugTask.run(
+            // $FlowFixMe[method-unbinding]
+            console.timeStamp.bind(
+              console,
+              name,
+              startTime,
+              endTime,
+              COMPONENTS_TRACK,
+              undefined,
+              color,
+            ),
+          );
+        } else {
+          console.timeStamp(
+            name,
+            startTime,
+            endTime,
+            COMPONENTS_TRACK,
+            undefined,
+            color,
+          );
+        }
+      }
+    }
+  }
+}
+
+export function logComponentErrored(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+  errors: Array<CapturedValue<mixed>>,
+): void {
+  if (supportsUserTiming) {
+    const name = getComponentNameFromFiber(fiber);
+    if (name === null) {
+      // Skip
+      return;
+    }
+    if (__DEV__) {
+      let debugTask: ?ConsoleTask = null;
+      const properties: Array<[string, string]> = [];
+      for (let i = 0; i < errors.length; i++) {
+        const capturedValue = errors[i];
+        if (debugTask == null && capturedValue.source !== null) {
+          // If the captured value has a source Fiber, use its debugTask for
+          // the stack instead of the error boundary's stack. So you can find
+          // which component errored since we don't show the errored render tree.
+          // TODO: Ideally we should instead, store the failed fibers and log the
+          // whole subtree including the component that errored.
+          debugTask = capturedValue.source._debugTask;
+        }
+        const error = capturedValue.value;
+        const message =
+          typeof error === 'object' &&
+          error !== null &&
+          typeof error.message === 'string'
+            ? // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error.message)
+            : // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error);
+        properties.push(['Error', message]);
+      }
+      if (fiber.key !== null) {
+        addValueToProperties('key', fiber.key, properties, 0, '');
+      }
+      if (fiber.memoizedProps !== null) {
+        addObjectToProperties(fiber.memoizedProps, properties, 0, '');
+      }
+      if (debugTask == null) {
+        // If the captured values don't have a debug task, fallback to the
+        // error boundary itself.
+        debugTask = fiber._debugTask;
+      }
+      const options: PerformanceMeasureOptions = {
+        start: startTime,
+        end: endTime,
+        detail: {
+          devtools: {
+            color: 'error',
+            track: COMPONENTS_TRACK,
+            tooltipText:
+              fiber.tag === SuspenseComponent
+                ? 'Hydration failed'
+                : 'Error boundary caught an error',
+            properties,
+          },
+        },
+      };
+
+      const measureName = '\u200b' + name;
+      if (__DEV__ && debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          performance.measure.bind(performance, measureName, options),
+        );
+      } else {
+        performance.measure(measureName, options);
+      }
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        name,
+        startTime,
+        endTime,
+        COMPONENTS_TRACK,
+        undefined,
+        'error',
+      );
+    }
+  }
+}
+
+function logComponentEffectErrored(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+  errors: Array<CapturedValue<mixed>>,
+): void {
+  if (supportsUserTiming) {
+    const name = getComponentNameFromFiber(fiber);
+    if (name === null) {
+      // Skip
+      return;
+    }
+    if (__DEV__) {
+      const properties: Array<[string, string]> = [];
+      for (let i = 0; i < errors.length; i++) {
+        const capturedValue = errors[i];
+        const error = capturedValue.value;
+        const message =
+          typeof error === 'object' &&
+          error !== null &&
+          typeof error.message === 'string'
+            ? // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error.message)
+            : // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error);
+        properties.push(['Error', message]);
+      }
+      if (fiber.key !== null) {
+        addValueToProperties('key', fiber.key, properties, 0, '');
+      }
+      if (fiber.memoizedProps !== null) {
+        addObjectToProperties(fiber.memoizedProps, properties, 0, '');
+      }
+      const options = {
+        start: startTime,
+        end: endTime,
+        detail: {
+          devtools: {
+            color: 'error',
+            track: COMPONENTS_TRACK,
+            tooltipText: 'A lifecycle or effect errored',
+            properties,
+          },
+        },
+      };
+      const debugTask = fiber._debugTask;
+      const measureName = '\u200b' + name;
+      if (debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          performance.measure.bind(performance, measureName, options),
+        );
+      } else {
+        performance.measure(measureName, options);
+      }
+      performance.clearMeasures(measureName);
+    } else {
+      console.timeStamp(
+        name,
+        startTime,
+        endTime,
+        COMPONENTS_TRACK,
+        undefined,
+        'error',
+      );
+    }
+  }
+}
+
+export function logComponentEffect(
+  fiber: Fiber,
+  startTime: number,
+  endTime: number,
+  selfTime: number,
+  errors: null | Array<CapturedValue<mixed>>,
+): void {
+  if (errors !== null) {
+    logComponentEffectErrored(fiber, startTime, endTime, errors);
+    return;
+  }
+  const name = getComponentNameFromFiber(fiber);
+  if (name === null) {
+    // Skip
+    return;
+  }
+  if (supportsUserTiming) {
+    const color =
+      selfTime < 1
+        ? 'secondary-light'
+        : selfTime < 100
+          ? 'secondary'
+          : selfTime < 500
+            ? 'secondary-dark'
+            : 'error';
+    const debugTask = fiber._debugTask;
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          name,
+          startTime,
+          endTime,
+          COMPONENTS_TRACK,
+          undefined,
+          color,
+        ),
+      );
+    } else {
+      console.timeStamp(
+        name,
+        startTime,
+        endTime,
+        COMPONENTS_TRACK,
+        undefined,
+        color,
+      );
+    }
+  }
+}
+
+export function logYieldTime(startTime: number, endTime: number): void {
+  if (supportsUserTiming) {
+    const yieldDuration = endTime - startTime;
+    if (yieldDuration < 3) {
+      // Skip sub-millisecond yields. This happens all the time and is not interesting.
+      return;
+    }
+    // Being blocked on CPU is potentially bad so we color it by how long it took.
+    const color =
+      yieldDuration < 5
+        ? 'primary-light'
+        : yieldDuration < 10
+          ? 'primary'
+          : yieldDuration < 100
+            ? 'primary-dark'
+            : 'error';
+    // This get logged in the components track if we don't commit which leaves them
+    // hanging by themselves without context. It's a useful indicator for why something
+    // might be starving this render though.
+    // TODO: Considering adding these to a queue and only logging them if we commit.
+    console.timeStamp(
+      'Blocked',
+      startTime,
+      endTime,
+      COMPONENTS_TRACK,
+      undefined,
+      color,
+    );
+  }
+}
+
+export function logSuspendedYieldTime(
+  startTime: number,
+  endTime: number,
+  suspendedFiber: Fiber,
+): void {
+  if (supportsUserTiming) {
+    const debugTask = suspendedFiber._debugTask;
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Suspended',
+          startTime,
+          endTime,
+          COMPONENTS_TRACK,
+          undefined,
+          'primary-light',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Suspended',
+        startTime,
+        endTime,
+        COMPONENTS_TRACK,
+        undefined,
+        'primary-light',
+      );
+    }
+  }
+}
+
+export function logActionYieldTime(
+  startTime: number,
+  endTime: number,
+  suspendedFiber: Fiber,
+): void {
+  if (supportsUserTiming) {
+    const debugTask = suspendedFiber._debugTask;
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Action',
+          startTime,
+          endTime,
+          COMPONENTS_TRACK,
+          undefined,
+          'primary-light',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Action',
+        startTime,
+        endTime,
+        COMPONENTS_TRACK,
+        undefined,
+        'primary-light',
+      );
+    }
+  }
+}
+
+export function logBlockingStart(
+  updateTime: number,
+  eventTime: number,
+  eventType: null | string,
+  eventIsRepeat: boolean,
+  isSpawnedUpdate: boolean,
+  isPingedUpdate: boolean,
+  renderStartTime: number,
+  lanes: Lanes,
+  debugTask: null | ConsoleTask, // DEV-only
+  updateMethodName: null | string,
+  updateComponentName: null | string,
+): void {
+  if (supportsUserTiming) {
+    currentTrack = 'Blocking';
+    // Clamp start times
+    if (updateTime > 0) {
+      if (updateTime > renderStartTime) {
+        updateTime = renderStartTime;
+      }
+    } else {
+      updateTime = renderStartTime;
+    }
+    if (eventTime > 0) {
+      if (eventTime > updateTime) {
+        eventTime = updateTime;
+      }
+    } else {
+      eventTime = updateTime;
+    }
+    // If a blocking update was spawned within render or an effect, that's considered a cascading render.
+    // If you have a second blocking update within the same event, that suggests multiple flushSync or
+    // setState in a microtask which is also considered a cascade.
+    if (eventType !== null && updateTime > eventTime) {
+      // Log the time from the event timeStamp until we called setState.
+      const color = eventIsRepeat ? 'secondary-light' : 'warning';
+      if (__DEV__ && debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          console.timeStamp.bind(
+            console,
+            eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
+            eventTime,
+            updateTime,
+            currentTrack,
+            LANES_TRACK_GROUP,
+            color,
+          ),
+        );
+      } else {
+        console.timeStamp(
+          eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
+          eventTime,
+          updateTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        );
+      }
+    }
+    if (renderStartTime > updateTime) {
+      // Log the time from when we called setState until we started rendering.
+      const color = isSpawnedUpdate
+        ? 'error'
+        : includesOnlyHydrationOrOffscreenLanes(lanes)
+          ? 'tertiary-light'
+          : 'primary-light';
+      const label = isPingedUpdate
+        ? 'Promise Resolved'
+        : isSpawnedUpdate
+          ? 'Cascading Update'
+          : renderStartTime - updateTime > 5
+            ? 'Update Blocked'
+            : 'Update';
+
+      if (__DEV__) {
+        const properties = [];
+        if (updateComponentName != null) {
+          properties.push(['Component name', updateComponentName]);
+        }
+        if (updateMethodName != null) {
+          properties.push(['Method name', updateMethodName]);
+        }
+        const measureOptions = {
+          start: updateTime,
+          end: renderStartTime,
+          detail: {
+            devtools: {
+              properties,
+              track: currentTrack,
+              trackGroup: LANES_TRACK_GROUP,
+              color,
+            },
+          },
+        };
+        if (enablePerformanceIssueReporting && isSpawnedUpdate) {
+          // $FlowFixMe[prop-missing] - detail is untyped
+          measureOptions.detail.devtools.performanceIssue =
+            reusableCascadingUpdateIssue;
+        }
+
+        if (debugTask) {
+          debugTask.run(
+            // $FlowFixMe[method-unbinding]
+            performance.measure.bind(performance, label, measureOptions),
+          );
+        } else {
+          performance.measure(label, measureOptions);
+        }
+        performance.clearMeasures(label);
+      } else {
+        console.timeStamp(
+          label,
+          updateTime,
+          renderStartTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        );
+      }
+    }
+  }
+}
+
+export function logGestureStart(
+  updateTime: number,
+  eventTime: number,
+  eventType: null | string,
+  eventIsRepeat: boolean,
+  isPingedUpdate: boolean,
+  renderStartTime: number,
+  debugTask: null | ConsoleTask, // DEV-only
+  updateMethodName: null | string,
+  updateComponentName: null | string,
+): void {
+  if (supportsUserTiming) {
+    currentTrack = 'Gesture';
+    // Clamp start times
+    if (updateTime > 0) {
+      if (updateTime > renderStartTime) {
+        updateTime = renderStartTime;
+      }
+    } else {
+      updateTime = renderStartTime;
+    }
+    if (eventTime > 0) {
+      if (eventTime > updateTime) {
+        eventTime = updateTime;
+      }
+    } else {
+      eventTime = updateTime;
+    }
+
+    if (updateTime > eventTime && eventType !== null) {
+      // Log the time from the event timeStamp until we started a gesture.
+      const color = eventIsRepeat ? 'secondary-light' : 'warning';
+      if (__DEV__ && debugTask) {
+        debugTask.run(
+          console.timeStamp.bind(
+            console,
+            eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
+            eventTime,
+            updateTime,
+            currentTrack,
+            LANES_TRACK_GROUP,
+            color,
+          ),
+        );
+      } else {
+        console.timeStamp(
+          eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
+          eventTime,
+          updateTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        );
+      }
+    }
+    if (renderStartTime > updateTime) {
+      // Log the time from when we called setState until we started rendering.
+      const label = isPingedUpdate
+        ? 'Promise Resolved'
+        : renderStartTime - updateTime > 5
+          ? 'Gesture Blocked'
+          : 'Gesture';
+      if (__DEV__) {
+        const properties = [];
+        if (updateComponentName != null) {
+          properties.push(['Component name', updateComponentName]);
+        }
+        if (updateMethodName != null) {
+          properties.push(['Method name', updateMethodName]);
+        }
+        const measureOptions = {
+          start: updateTime,
+          end: renderStartTime,
+          detail: {
+            devtools: {
+              properties,
+              track: currentTrack,
+              trackGroup: LANES_TRACK_GROUP,
+              color: 'primary-light',
+            },
+          },
+        };
+
+        if (debugTask) {
+          debugTask.run(
+            // $FlowFixMe[method-unbinding]
+            performance.measure.bind(performance, label, measureOptions),
+          );
+        } else {
+          performance.measure(label, measureOptions);
+        }
+        performance.clearMeasures(label);
+      } else {
+        console.timeStamp(
+          label,
+          updateTime,
+          renderStartTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'primary-light',
+        );
+      }
+    }
+  }
+}
+
+export function logTransitionStart(
+  startTime: number,
+  updateTime: number,
+  eventTime: number,
+  eventType: null | string,
+  eventIsRepeat: boolean,
+  isPingedUpdate: boolean,
+  renderStartTime: number,
+  debugTask: null | ConsoleTask, // DEV-only
+  updateMethodName: null | string,
+  updateComponentName: null | string,
+): void {
+  if (supportsUserTiming) {
+    currentTrack = 'Transition';
+    // Clamp start times
+    if (updateTime > 0) {
+      if (updateTime > renderStartTime) {
+        updateTime = renderStartTime;
+      }
+    } else {
+      updateTime = renderStartTime;
+    }
+    if (startTime > 0) {
+      if (startTime > updateTime) {
+        startTime = updateTime;
+      }
+    } else {
+      startTime = updateTime;
+    }
+    if (eventTime > 0) {
+      if (eventTime > startTime) {
+        eventTime = startTime;
+      }
+    } else {
+      eventTime = startTime;
+    }
+
+    if (startTime > eventTime && eventType !== null) {
+      // Log the time from the event timeStamp until we started a transition.
+      const color = eventIsRepeat ? 'secondary-light' : 'warning';
+      if (__DEV__ && debugTask) {
+        debugTask.run(
+          console.timeStamp.bind(
+            console,
+            eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
+            eventTime,
+            startTime,
+            currentTrack,
+            LANES_TRACK_GROUP,
+            color,
+          ),
+        );
+      } else {
+        console.timeStamp(
+          eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
+          eventTime,
+          startTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        );
+      }
+    }
+    if (updateTime > startTime) {
+      // Log the time from when we started an async transition until we called setState or started rendering.
+      // TODO: Ideally this would use the debugTask of the startTransition call perhaps.
+      if (__DEV__ && debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          console.timeStamp.bind(
+            console,
+            'Action',
+            startTime,
+            updateTime,
+            currentTrack,
+            LANES_TRACK_GROUP,
+            'primary-dark',
+          ),
+        );
+      } else {
+        console.timeStamp(
+          'Action',
+          startTime,
+          updateTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'primary-dark',
+        );
+      }
+    }
+    if (renderStartTime > updateTime) {
+      // Log the time from when we called setState until we started rendering.
+      const label = isPingedUpdate
+        ? 'Promise Resolved'
+        : renderStartTime - updateTime > 5
+          ? 'Update Blocked'
+          : 'Update';
+      if (__DEV__) {
+        const properties = [];
+        if (updateComponentName != null) {
+          properties.push(['Component name', updateComponentName]);
+        }
+        if (updateMethodName != null) {
+          properties.push(['Method name', updateMethodName]);
+        }
+        const measureOptions = {
+          start: updateTime,
+          end: renderStartTime,
+          detail: {
+            devtools: {
+              properties,
+              track: currentTrack,
+              trackGroup: LANES_TRACK_GROUP,
+              color: 'primary-light',
+            },
+          },
+        };
+
+        if (debugTask) {
+          debugTask.run(
+            // $FlowFixMe[method-unbinding]
+            performance.measure.bind(performance, label, measureOptions),
+          );
+        } else {
+          performance.measure(label, measureOptions);
+        }
+        performance.clearMeasures(label);
+      } else {
+        console.timeStamp(
+          label,
+          updateTime,
+          renderStartTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'primary-light',
+        );
+      }
+    }
+  }
+}
+
+export function logRenderPhase(
+  startTime: number,
+  endTime: number,
+  lanes: Lanes,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    const color = includesOnlyHydrationOrOffscreenLanes(lanes)
+      ? 'tertiary-dark'
+      : 'primary-dark';
+    const label = includesOnlyOffscreenLanes(lanes)
+      ? 'Prepared'
+      : includesOnlyHydrationLanes(lanes)
+        ? 'Hydrated'
+        : 'Render';
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          label,
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        ),
+      );
+    } else {
+      console.timeStamp(
+        label,
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        color,
+      );
+    }
+  }
+}
+
+export function logInterruptedRenderPhase(
+  startTime: number,
+  endTime: number,
+  lanes: Lanes,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    const color = includesOnlyHydrationOrOffscreenLanes(lanes)
+      ? 'tertiary-dark'
+      : 'primary-dark';
+    const label = includesOnlyOffscreenLanes(lanes)
+      ? 'Prewarm'
+      : includesOnlyHydrationLanes(lanes)
+        ? 'Interrupted Hydration'
+        : 'Interrupted Render';
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          label,
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        ),
+      );
+    } else {
+      console.timeStamp(
+        label,
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        color,
+      );
+    }
+  }
+}
+
+export function logSuspendedRenderPhase(
+  startTime: number,
+  endTime: number,
+  lanes: Lanes,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    const color = includesOnlyHydrationOrOffscreenLanes(lanes)
+      ? 'tertiary-dark'
+      : 'primary-dark';
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Prewarm',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Prewarm',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        color,
+      );
+    }
+  }
+}
+
+export function logSuspendedWithDelayPhase(
+  startTime: number,
+  endTime: number,
+  lanes: Lanes,
+  debugTask: null | ConsoleTask,
+): void {
+  // This means the render was suspended and cannot commit until it gets unblocked.
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    const color = includesOnlyHydrationOrOffscreenLanes(lanes)
+      ? 'tertiary-dark'
+      : 'primary-dark';
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Suspended',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          color,
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Suspended',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        color,
+      );
+    }
+  }
+}
+
+export function logRecoveredRenderPhase(
+  startTime: number,
+  endTime: number,
+  lanes: Lanes,
+  recoverableErrors: Array<CapturedValue<mixed>>,
+  hydrationFailed: boolean,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__) {
+      const properties: Array<[string, string]> = [];
+      for (let i = 0; i < recoverableErrors.length; i++) {
+        const capturedValue = recoverableErrors[i];
+        const error = capturedValue.value;
+        const message =
+          typeof error === 'object' &&
+          error !== null &&
+          typeof error.message === 'string'
+            ? // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error.message)
+            : // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error);
+        properties.push(['Recoverable Error', message]);
+      }
+      const options: PerformanceMeasureOptions = {
+        start: startTime,
+        end: endTime,
+        detail: {
+          devtools: {
+            color: 'primary-dark',
+            track: currentTrack,
+            trackGroup: LANES_TRACK_GROUP,
+            tooltipText: hydrationFailed
+              ? 'Hydration Failed'
+              : 'Recovered after Error',
+            properties,
+          },
+        },
+      };
+      if (debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          performance.measure.bind(performance, 'Recovered', options),
+        );
+      } else {
+        performance.measure('Recovered', options);
+      }
+      performance.clearMeasures('Recovered');
+    } else {
+      console.timeStamp(
+        'Recovered',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'error',
+      );
+    }
+  }
+}
+
+export function logErroredRenderPhase(
+  startTime: number,
+  endTime: number,
+  lanes: Lanes,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Errored',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'error',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Errored',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'error',
+      );
+    }
+  }
+}
+
+export function logInconsistentRender(
+  startTime: number,
+  endTime: number,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Teared Render',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'error',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Teared Render',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'error',
+      );
+    }
+  }
+}
+
+export function logSuspendedCommitPhase(
+  startTime: number,
+  endTime: number,
+  reason: string,
+  debugTask: null | ConsoleTask,
+): void {
+  // This means the commit was suspended on CSS or images.
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    // TODO: Include the exact reason and URLs of what resources suspended.
+    // TODO: This might also be Suspended while waiting on a View Transition.
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          reason,
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary-light',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        reason,
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary-light',
+      );
+    }
+  }
+}
+
+export function logSuspendedViewTransitionPhase(
+  startTime: number,
+  endTime: number,
+  reason: string,
+  debugTask: null | ConsoleTask,
+): void {
+  // This means the commit was suspended on CSS or images.
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    // TODO: Include the exact reason and URLs of what resources suspended.
+    // TODO: This might also be Suspended while waiting on a View Transition.
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          reason,
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary-light',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        reason,
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary-light',
+      );
+    }
+  }
+}
+
+export function logCommitErrored(
+  startTime: number,
+  endTime: number,
+  errors: Array<CapturedValue<mixed>>,
+  passive: boolean,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__) {
+      const properties: Array<[string, string]> = [];
+      for (let i = 0; i < errors.length; i++) {
+        const capturedValue = errors[i];
+        const error = capturedValue.value;
+        const message =
+          typeof error === 'object' &&
+          error !== null &&
+          typeof error.message === 'string'
+            ? // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error.message)
+            : // eslint-disable-next-line react-internal/safe-string-coercion
+              String(error);
+        properties.push(['Error', message]);
+      }
+      const options: PerformanceMeasureOptions = {
+        start: startTime,
+        end: endTime,
+        detail: {
+          devtools: {
+            color: 'error',
+            track: currentTrack,
+            trackGroup: LANES_TRACK_GROUP,
+            tooltipText: passive
+              ? 'Remaining Effects Errored'
+              : 'Commit Errored',
+            properties,
+          },
+        },
+      };
+      if (debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          performance.measure.bind(performance, 'Errored', options),
+        );
+      } else {
+        performance.measure('Errored', options);
+      }
+      performance.clearMeasures('Errored');
+    } else {
+      console.timeStamp(
+        'Errored',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'error',
+      );
+    }
+  }
+}
+
+export function logCommitPhase(
+  startTime: number,
+  endTime: number,
+  errors: null | Array<CapturedValue<mixed>>,
+  abortedViewTransition: boolean,
+  debugTask: null | ConsoleTask,
+): void {
+  if (errors !== null) {
+    logCommitErrored(startTime, endTime, errors, false, debugTask);
+    return;
+  }
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          abortedViewTransition
+            ? 'Commit Interrupted View Transition'
+            : 'Commit',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          abortedViewTransition ? 'error' : 'secondary-dark',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        abortedViewTransition ? 'Commit Interrupted View Transition' : 'Commit',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        abortedViewTransition ? 'error' : 'secondary-dark',
+      );
+    }
+  }
+}
+
+export function logPaintYieldPhase(
+  startTime: number,
+  endTime: number,
+  delayedUntilPaint: boolean,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          delayedUntilPaint ? 'Waiting for Paint' : 'Waiting',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary-light',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        delayedUntilPaint ? 'Waiting for Paint' : 'Waiting',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary-light',
+      );
+    }
+  }
+}
+
+export function logApplyGesturePhase(
+  startTime: number,
+  endTime: number,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Create Ghost Tree',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary-dark',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Create Ghost Tree',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary-dark',
+      );
+    }
+  }
+}
+
+export function logStartViewTransitionYieldPhase(
+  startTime: number,
+  endTime: number,
+  abortedViewTransition: boolean,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          abortedViewTransition
+            ? 'Interrupted View Transition'
+            : 'Starting Animation',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          abortedViewTransition ? 'error' : 'secondary-light',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        abortedViewTransition
+          ? 'Interrupted View Transition'
+          : 'Starting Animation',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        abortedViewTransition ? ' error' : 'secondary-light',
+      );
+    }
+  }
+}
+
+export function logAnimatingPhase(
+  startTime: number,
+  endTime: number,
+  debugTask: null | ConsoleTask,
+): void {
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Animating',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary-dark',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Animating',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary-dark',
+      );
+    }
+  }
+}
+
+export function logPassiveCommitPhase(
+  startTime: number,
+  endTime: number,
+  errors: null | Array<CapturedValue<mixed>>,
+  debugTask: null | ConsoleTask,
+): void {
+  if (errors !== null) {
+    logCommitErrored(startTime, endTime, errors, true, debugTask);
+    return;
+  }
+  if (supportsUserTiming) {
+    if (endTime <= startTime) {
+      return;
+    }
+    if (__DEV__ && debugTask) {
+      debugTask.run(
+        // $FlowFixMe[method-unbinding]
+        console.timeStamp.bind(
+          console,
+          'Remaining Effects',
+          startTime,
+          endTime,
+          currentTrack,
+          LANES_TRACK_GROUP,
+          'secondary-dark',
+        ),
+      );
+    } else {
+      console.timeStamp(
+        'Remaining Effects',
+        startTime,
+        endTime,
+        currentTrack,
+        LANES_TRACK_GROUP,
+        'secondary-dark',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
new file mode 100644
index 00000000000..4a36b39c43c
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -0,0 +1,912 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  FiberRoot,
+  SuspenseHydrationCallbacks,
+  TransitionTracingCallbacks,
+} from './ReactInternalTypes';
+import type {RootTag} from './ReactRootTags';
+import type {
+  Container,
+  PublicInstance,
+  RendererInspectionConfig,
+} from './ReactFiberConfig';
+import type {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {Lane} from './ReactFiberLane';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
+
+import {LegacyRoot} from './ReactRootTags';
+import {
+  findCurrentHostFiber,
+  findCurrentHostFiberWithNoPortals,
+} from './ReactFiberTreeReflection';
+import {get as getInstance} from 'shared/ReactInstanceMap';
+import {
+  HostComponent,
+  HostSingleton,
+  ClassComponent,
+  HostRoot,
+  SuspenseComponent,
+  ActivityComponent,
+} from './ReactWorkTags';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import isArray from 'shared/isArray';
+import {
+  enableSchedulingProfiler,
+  disableLegacyMode,
+} from 'shared/ReactFeatureFlags';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  getPublicInstance,
+  rendererVersion,
+  rendererPackageName,
+  extraDevToolsConfig,
+} from './ReactFiberConfig';
+import {
+  findCurrentUnmaskedContext,
+  processChildContext,
+  emptyContextObject,
+  isContextProvider as isLegacyContextProvider,
+} from './ReactFiberLegacyContext';
+import {createFiberRoot} from './ReactFiberRoot';
+import {isRootDehydrated} from './ReactFiberShellHydration';
+import {
+  injectInternals,
+  markRenderScheduled,
+  onScheduleRoot,
+  injectProfilingHooks,
+} from './ReactFiberDevToolsHook';
+import {startUpdateTimerByLane} from './ReactProfilerTimer';
+import {
+  requestUpdateLane,
+  scheduleUpdateOnFiber,
+  scheduleInitialHydrationOnRoot,
+  flushRoot,
+  batchedUpdates,
+  flushSyncFromReconciler,
+  flushSyncWork,
+  isAlreadyRendering,
+  deferredUpdates,
+  discreteUpdates,
+  flushPendingEffects,
+} from './ReactFiberWorkLoop';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates';
+import {
+  createUpdate,
+  enqueueUpdate,
+  entangleTransitions,
+} from './ReactFiberClassUpdateQueue';
+import {
+  isRendering as ReactCurrentFiberIsRendering,
+  current as ReactCurrentFiberCurrent,
+  runWithFiberInDEV,
+} from './ReactCurrentFiber';
+import {StrictLegacyMode} from './ReactTypeOfMode';
+import {
+  SyncLane,
+  SelectiveHydrationLane,
+  getHighestPriorityPendingLanes,
+  higherPriorityLane,
+  getBumpedLaneForHydrationByLane,
+  claimNextRetryLane,
+} from './ReactFiberLane';
+import {
+  scheduleRefresh,
+  scheduleRoot,
+  setRefreshHandler,
+} from './ReactFiberHotReloading';
+import ReactVersion from 'shared/ReactVersion';
+export {createPortal} from './ReactPortal';
+export {
+  createComponentSelector,
+  createHasPseudoClassSelector,
+  createRoleSelector,
+  createTestNameSelector,
+  createTextSelector,
+  getFindAllNodesFailureDescription,
+  findAllNodes,
+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from './ReactTestSelectors';
+export {startHostTransition} from './ReactFiberHooks';
+export {
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
+} from './ReactFiberErrorLogger';
+import {getLabelForLane, TotalLanes} from 'react-reconciler/src/ReactFiberLane';
+import {registerDefaultIndicator} from './ReactFiberAsyncAction';
+
+type OpaqueRoot = FiberRoot;
+
+let didWarnAboutNestedUpdates;
+let didWarnAboutFindNodeInStrictMode;
+
+if (__DEV__) {
+  didWarnAboutNestedUpdates = false;
+  didWarnAboutFindNodeInStrictMode = ({}: {[string]: boolean});
+}
+
+function getContextForSubtree(
+  parentComponent: ?component(...props: any),
+): Object {
+  if (!parentComponent) {
+    return emptyContextObject;
+  }
+
+  const fiber = getInstance(parentComponent);
+  const parentContext = findCurrentUnmaskedContext(fiber);
+
+  if (fiber.tag === ClassComponent) {
+    const Component = fiber.type;
+    if (isLegacyContextProvider(Component)) {
+      return processChildContext(fiber, Component, parentContext);
+    }
+  }
+
+  return parentContext;
+}
+
+function findHostInstance(component: Object): PublicInstance | null {
+  const fiber = getInstance(component);
+  if (fiber === undefined) {
+    if (typeof component.render === 'function') {
+      throw new Error('Unable to find node on an unmounted component.');
+    } else {
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
+      );
+    }
+  }
+  const hostFiber = findCurrentHostFiber(fiber);
+  if (hostFiber === null) {
+    return null;
+  }
+  return getPublicInstance(hostFiber.stateNode);
+}
+
+function findHostInstanceWithWarning(
+  component: Object,
+  methodName: string,
+): PublicInstance | null {
+  if (__DEV__) {
+    const fiber = getInstance(component);
+    if (fiber === undefined) {
+      if (typeof component.render === 'function') {
+        throw new Error('Unable to find node on an unmounted component.');
+      } else {
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
+        );
+      }
+    }
+    const hostFiber = findCurrentHostFiber(fiber);
+    if (hostFiber === null) {
+      return null;
+    }
+    if (hostFiber.mode & StrictLegacyMode) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Component';
+      if (!didWarnAboutFindNodeInStrictMode[componentName]) {
+        didWarnAboutFindNodeInStrictMode[componentName] = true;
+        runWithFiberInDEV(hostFiber, () => {
+          if (fiber.mode & StrictLegacyMode) {
+            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. ' +
+                'Learn more about using refs safely here: ' +
+                'https://react.dev/link/strict-mode-find-node',
+              methodName,
+              methodName,
+              componentName,
+            );
+          } else {
+            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. ' +
+                'Learn more about using refs safely here: ' +
+                'https://react.dev/link/strict-mode-find-node',
+              methodName,
+              methodName,
+              componentName,
+            );
+          }
+        });
+      }
+    }
+    return getPublicInstance(hostFiber.stateNode);
+  }
+  return findHostInstance(component);
+}
+
+export function createContainer(
+  containerInfo: Container,
+  tag: RootTag,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
+  // TODO: Remove `concurrentUpdatesByDefaultOverride`. It is now ignored.
+  concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
+  onUncaughtError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?component(...props: any),
+    },
+  ) => void,
+  onRecoverableError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onDefaultTransitionIndicator: () => void | (() => void),
+  transitionCallbacks: null | TransitionTracingCallbacks,
+): OpaqueRoot {
+  const hydrate = false;
+  const initialChildren = null;
+  const root = createFiberRoot(
+    containerInfo,
+    tag,
+    hydrate,
+    initialChildren,
+    hydrationCallbacks,
+    isStrictMode,
+    identifierPrefix,
+    null,
+    onUncaughtError,
+    onCaughtError,
+    onRecoverableError,
+    onDefaultTransitionIndicator,
+    transitionCallbacks,
+  );
+  registerDefaultIndicator(onDefaultTransitionIndicator);
+  return root;
+}
+
+export function createHydrationContainer(
+  initialChildren: ReactNodeList,
+  // TODO: Remove `callback` when we delete legacy mode.
+  callback: ?Function,
+  containerInfo: Container,
+  tag: RootTag,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
+  // TODO: Remove `concurrentUpdatesByDefaultOverride`. It is now ignored.
+  concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
+  onUncaughtError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?component(...props: any),
+    },
+  ) => void,
+  onRecoverableError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onDefaultTransitionIndicator: () => void | (() => void),
+  transitionCallbacks: null | TransitionTracingCallbacks,
+  formState: ReactFormState<any, any> | null,
+): OpaqueRoot {
+  const hydrate = true;
+  const root = createFiberRoot(
+    containerInfo,
+    tag,
+    hydrate,
+    initialChildren,
+    hydrationCallbacks,
+    isStrictMode,
+    identifierPrefix,
+    formState,
+    onUncaughtError,
+    onCaughtError,
+    onRecoverableError,
+    onDefaultTransitionIndicator,
+    transitionCallbacks,
+  );
+
+  registerDefaultIndicator(onDefaultTransitionIndicator);
+
+  // TODO: Move this to FiberRoot constructor
+  root.context = getContextForSubtree(null);
+
+  // Schedule the initial render. In a hydration root, this is different from
+  // a regular update because the initial render must match was was rendered
+  // on the server.
+  // NOTE: This update intentionally doesn't have a payload. We're only using
+  // the update to schedule work on the root fiber (and, for legacy roots, to
+  // enqueue the callback if one is provided).
+  const current = root.current;
+  let lane = requestUpdateLane(current);
+  lane = getBumpedLaneForHydrationByLane(lane);
+  const update = createUpdate(lane);
+  update.callback =
+    callback !== undefined && callback !== null ? callback : null;
+  enqueueUpdate(current, update, lane);
+  startUpdateTimerByLane(lane, 'hydrateRoot()', null);
+  scheduleInitialHydrationOnRoot(root, lane);
+
+  return root;
+}
+
+export function updateContainer(
+  element: ReactNodeList,
+  container: OpaqueRoot,
+  parentComponent: ?component(...props: any),
+  callback: ?Function,
+): Lane {
+  const current = container.current;
+  const lane = requestUpdateLane(current);
+  updateContainerImpl(
+    current,
+    lane,
+    element,
+    container,
+    parentComponent,
+    callback,
+  );
+  return lane;
+}
+
+export function updateContainerSync(
+  element: ReactNodeList,
+  container: OpaqueRoot,
+  parentComponent: ?component(...props: any),
+  callback: ?Function,
+): Lane {
+  if (!disableLegacyMode && container.tag === LegacyRoot) {
+    flushPendingEffects();
+  }
+  const current = container.current;
+  updateContainerImpl(
+    current,
+    SyncLane,
+    element,
+    container,
+    parentComponent,
+    callback,
+  );
+  return SyncLane;
+}
+
+function updateContainerImpl(
+  rootFiber: Fiber,
+  lane: Lane,
+  element: ReactNodeList,
+  container: OpaqueRoot,
+  parentComponent: ?component(...props: any),
+  callback: ?Function,
+): void {
+  if (__DEV__) {
+    onScheduleRoot(container, element);
+  }
+
+  if (enableSchedulingProfiler) {
+    markRenderScheduled(lane);
+  }
+
+  const context = getContextForSubtree(parentComponent);
+  if (container.context === null) {
+    container.context = context;
+  } else {
+    container.pendingContext = context;
+  }
+
+  if (__DEV__) {
+    if (
+      ReactCurrentFiberIsRendering &&
+      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.',
+        getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',
+      );
+    }
+  }
+
+  const update = createUpdate(lane);
+  // 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(
+          'Expected the last optional `callback` argument to be a ' +
+            'function. Instead received: %s.',
+          callback,
+        );
+      }
+    }
+    update.callback = callback;
+  }
+
+  const root = enqueueUpdate(rootFiber, update, lane);
+  if (root !== null) {
+    startUpdateTimerByLane(lane, 'root.render()', null);
+    scheduleUpdateOnFiber(root, rootFiber, lane);
+    entangleTransitions(root, rootFiber, lane);
+  }
+}
+
+export {
+  batchedUpdates,
+  deferredUpdates,
+  discreteUpdates,
+  flushSyncFromReconciler,
+  flushSyncWork,
+  isAlreadyRendering,
+  flushPendingEffects as flushPassiveEffects,
+};
+
+export function getPublicRootInstance(
+  container: OpaqueRoot,
+): component(...props: any) | PublicInstance | null {
+  const containerFiber = container.current;
+  if (!containerFiber.child) {
+    return null;
+  }
+  switch (containerFiber.child.tag) {
+    case HostSingleton:
+    case HostComponent:
+      return getPublicInstance(containerFiber.child.stateNode);
+    default:
+      return containerFiber.child.stateNode;
+  }
+}
+
+export function attemptSynchronousHydration(fiber: Fiber): void {
+  switch (fiber.tag) {
+    case HostRoot: {
+      const root: FiberRoot = fiber.stateNode;
+      if (isRootDehydrated(root)) {
+        // Flush the first scheduled "update".
+        const lanes = getHighestPriorityPendingLanes(root);
+        flushRoot(root, lanes);
+      }
+      break;
+    }
+    case ActivityComponent:
+    case SuspenseComponent: {
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane);
+      }
+      flushSyncWork();
+      // 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.
+      const retryLane = SyncLane;
+      markRetryLaneIfNotHydrated(fiber, retryLane);
+      break;
+    }
+  }
+}
+
+function markRetryLaneImpl(fiber: Fiber, retryLane: Lane) {
+  const suspenseState: null | SuspenseState | ActivityState =
+    fiber.memoizedState;
+  if (suspenseState !== null && suspenseState.dehydrated !== null) {
+    suspenseState.retryLane = higherPriorityLane(
+      suspenseState.retryLane,
+      retryLane,
+    );
+  }
+}
+
+// Increases the priority of thenables when they resolve within this boundary.
+function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
+  markRetryLaneImpl(fiber, retryLane);
+  const alternate = fiber.alternate;
+  if (alternate) {
+    markRetryLaneImpl(alternate, retryLane);
+  }
+}
+
+export function attemptContinuousHydration(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent && fiber.tag !== ActivityComponent) {
+    // 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;
+  }
+  const lane = SelectiveHydrationLane;
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    scheduleUpdateOnFiber(root, fiber, lane);
+  }
+  markRetryLaneIfNotHydrated(fiber, lane);
+}
+
+export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent && fiber.tag !== ActivityComponent) {
+    // We ignore HostRoots here because we can't increase
+    // their priority other than synchronously flush it.
+    return;
+  }
+  let lane = requestUpdateLane(fiber);
+  lane = getBumpedLaneForHydrationByLane(lane);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    scheduleUpdateOnFiber(root, fiber, lane);
+  }
+  markRetryLaneIfNotHydrated(fiber, lane);
+}
+
+export {findHostInstance};
+
+export {findHostInstanceWithWarning};
+
+export function findHostInstanceWithNoPortals(
+  fiber: Fiber,
+): PublicInstance | null {
+  const hostFiber = findCurrentHostFiberWithNoPortals(fiber);
+  if (hostFiber === null) {
+    return null;
+  }
+  return getPublicInstance(hostFiber.stateNode);
+}
+
+let shouldErrorImpl: Fiber => ?boolean = fiber => null;
+
+export function shouldError(fiber: Fiber): ?boolean {
+  return shouldErrorImpl(fiber);
+}
+
+let shouldSuspendImpl = (fiber: Fiber) => false;
+
+export function shouldSuspend(fiber: Fiber): boolean {
+  return shouldSuspendImpl(fiber);
+}
+
+let overrideHookState = null;
+let overrideHookStateDeletePath = null;
+let overrideHookStateRenamePath = null;
+let overrideProps = null;
+let overridePropsDeletePath = null;
+let overridePropsRenamePath = null;
+let scheduleUpdate = null;
+let scheduleRetry = null;
+let setErrorHandler = null;
+let setSuspenseHandler = null;
+
+if (__DEV__) {
+  const copyWithDeleteImpl = (
+    obj: Object | Array<any>,
+    path: Array<string | number>,
+    index: number,
+  ): $FlowFixMe => {
+    const key = path[index];
+    const updated = isArray(obj) ? obj.slice() : {...obj};
+    if (index + 1 === path.length) {
+      if (isArray(updated)) {
+        updated.splice(((key: any): number), 1);
+      } else {
+        delete updated[key];
+      }
+      return updated;
+    }
+    // $FlowFixMe[incompatible-use] number or string is fine here
+    updated[key] = copyWithDeleteImpl(obj[key], path, index + 1);
+    return updated;
+  };
+
+  const copyWithDelete = (
+    obj: Object | Array<any>,
+    path: Array<string | number>,
+  ): Object | Array<any> => {
+    return copyWithDeleteImpl(obj, path, 0);
+  };
+
+  const copyWithRenameImpl = (
+    obj: Object | Array<any>,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+    index: number,
+  ): $FlowFixMe => {
+    const oldKey = oldPath[index];
+    const updated = isArray(obj) ? obj.slice() : {...obj};
+    if (index + 1 === oldPath.length) {
+      const newKey = newPath[index];
+      // $FlowFixMe[incompatible-use] number or string is fine here
+      updated[newKey] = updated[oldKey];
+      if (isArray(updated)) {
+        updated.splice(((oldKey: any): number), 1);
+      } else {
+        delete updated[oldKey];
+      }
+    } else {
+      // $FlowFixMe[incompatible-use] number or string is fine here
+      updated[oldKey] = copyWithRenameImpl(
+        // $FlowFixMe[incompatible-use] number or string is fine here
+        obj[oldKey],
+        oldPath,
+        newPath,
+        index + 1,
+      );
+    }
+    return updated;
+  };
+
+  const copyWithRename = (
+    obj: Object | Array<any>,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ): Object | Array<any> => {
+    if (oldPath.length !== newPath.length) {
+      console.warn('copyWithRename() expects paths of the same length');
+      return;
+    } else {
+      for (let i = 0; i < newPath.length - 1; i++) {
+        if (oldPath[i] !== newPath[i]) {
+          console.warn(
+            'copyWithRename() expects paths to be the same except for the deepest key',
+          );
+          return;
+        }
+      }
+    }
+    return copyWithRenameImpl(obj, oldPath, newPath, 0);
+  };
+
+  const copyWithSetImpl = (
+    obj: Object | Array<any>,
+    path: Array<string | number>,
+    index: number,
+    value: any,
+  ): $FlowFixMe => {
+    if (index >= path.length) {
+      return value;
+    }
+    const key = path[index];
+    const updated = isArray(obj) ? obj.slice() : {...obj};
+    // $FlowFixMe[incompatible-use] number or string is fine here
+    updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
+    return updated;
+  };
+
+  const copyWithSet = (
+    obj: Object | Array<any>,
+    path: Array<string | number>,
+    value: any,
+  ): Object | Array<any> => {
+    return copyWithSetImpl(obj, path, 0, value);
+  };
+
+  const findHook = (fiber: Fiber, id: number) => {
+    // For now, the "id" of stateful hooks is just the stateful hook index.
+    // This may change in the future with e.g. nested hooks.
+    let currentHook = fiber.memoizedState;
+    while (currentHook !== null && id > 0) {
+      currentHook = currentHook.next;
+      id--;
+    }
+    return currentHook;
+  };
+
+  // Support DevTools editable values for useState and useReducer.
+  overrideHookState = (
+    fiber: Fiber,
+    id: number,
+    path: Array<string | number>,
+    value: any,
+  ) => {
+    const hook = findHook(fiber, id);
+    if (hook !== null) {
+      const newState = copyWithSet(hook.memoizedState, path, value);
+      hook.memoizedState = newState;
+      hook.baseState = newState;
+
+      // We aren't actually adding an update to the queue,
+      // because there is no update we can add for useReducer hooks that won't trigger an error.
+      // (There's no appropriate action type for DevTools overrides.)
+      // As a result though, React will see the scheduled update as a noop and bailout.
+      // Shallow cloning props works as a workaround for now to bypass the bailout check.
+      fiber.memoizedProps = {...fiber.memoizedProps};
+
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane);
+      }
+    }
+  };
+  overrideHookStateDeletePath = (
+    fiber: Fiber,
+    id: number,
+    path: Array<string | number>,
+  ) => {
+    const hook = findHook(fiber, id);
+    if (hook !== null) {
+      const newState = copyWithDelete(hook.memoizedState, path);
+      hook.memoizedState = newState;
+      hook.baseState = newState;
+
+      // We aren't actually adding an update to the queue,
+      // because there is no update we can add for useReducer hooks that won't trigger an error.
+      // (There's no appropriate action type for DevTools overrides.)
+      // As a result though, React will see the scheduled update as a noop and bailout.
+      // Shallow cloning props works as a workaround for now to bypass the bailout check.
+      fiber.memoizedProps = {...fiber.memoizedProps};
+
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane);
+      }
+    }
+  };
+  overrideHookStateRenamePath = (
+    fiber: Fiber,
+    id: number,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ) => {
+    const hook = findHook(fiber, id);
+    if (hook !== null) {
+      const newState = copyWithRename(hook.memoizedState, oldPath, newPath);
+      hook.memoizedState = newState;
+      hook.baseState = newState;
+
+      // We aren't actually adding an update to the queue,
+      // because there is no update we can add for useReducer hooks that won't trigger an error.
+      // (There's no appropriate action type for DevTools overrides.)
+      // As a result though, React will see the scheduled update as a noop and bailout.
+      // Shallow cloning props works as a workaround for now to bypass the bailout check.
+      fiber.memoizedProps = {...fiber.memoizedProps};
+
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane);
+      }
+    }
+  };
+
+  // Support DevTools props for function components, forwardRef, memo, host components, etc.
+  overrideProps = (fiber: Fiber, path: Array<string | number>, value: any) => {
+    fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
+    if (fiber.alternate) {
+      fiber.alternate.pendingProps = fiber.pendingProps;
+    }
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane);
+    }
+  };
+  overridePropsDeletePath = (fiber: Fiber, path: Array<string | number>) => {
+    fiber.pendingProps = copyWithDelete(fiber.memoizedProps, path);
+    if (fiber.alternate) {
+      fiber.alternate.pendingProps = fiber.pendingProps;
+    }
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane);
+    }
+  };
+  overridePropsRenamePath = (
+    fiber: Fiber,
+    oldPath: Array<string | number>,
+    newPath: Array<string | number>,
+  ) => {
+    fiber.pendingProps = copyWithRename(fiber.memoizedProps, oldPath, newPath);
+    if (fiber.alternate) {
+      fiber.alternate.pendingProps = fiber.pendingProps;
+    }
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane);
+    }
+  };
+
+  scheduleUpdate = (fiber: Fiber) => {
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane);
+    }
+  };
+
+  scheduleRetry = (fiber: Fiber) => {
+    const lane = claimNextRetryLane();
+    const root = enqueueConcurrentRenderForLane(fiber, lane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane);
+    }
+  };
+
+  setErrorHandler = (newShouldErrorImpl: Fiber => ?boolean) => {
+    shouldErrorImpl = newShouldErrorImpl;
+  };
+
+  setSuspenseHandler = (newShouldSuspendImpl: Fiber => boolean) => {
+    shouldSuspendImpl = newShouldSuspendImpl;
+  };
+}
+
+function getCurrentFiberForDevTools() {
+  return ReactCurrentFiberCurrent;
+}
+
+function getLaneLabelMap(): Map<Lane, string> | null {
+  if (enableSchedulingProfiler) {
+    const map: Map<Lane, string> = new Map();
+
+    let lane = 1;
+    for (let index = 0; index < TotalLanes; index++) {
+      const label = ((getLabelForLane(lane): any): string);
+      map.set(lane, label);
+      lane *= 2;
+    }
+
+    return map;
+  } else {
+    return null;
+  }
+}
+
+export function injectIntoDevTools(): boolean {
+  const internals: Object = {
+    bundleType: __DEV__ ? 1 : 0, // Might add PROFILE later.
+    version: rendererVersion,
+    rendererPackageName: rendererPackageName,
+    currentDispatcherRef: ReactSharedInternals,
+    // Enables DevTools to detect reconciler version rather than renderer version
+    // which may not match for third party renderers.
+    reconcilerVersion: ReactVersion,
+  };
+  if (extraDevToolsConfig !== null) {
+    internals.rendererConfig = (extraDevToolsConfig: RendererInspectionConfig);
+  }
+  if (__DEV__) {
+    internals.overrideHookState = overrideHookState;
+    internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
+    internals.overrideHookStateRenamePath = overrideHookStateRenamePath;
+    internals.overrideProps = overrideProps;
+    internals.overridePropsDeletePath = overridePropsDeletePath;
+    internals.overridePropsRenamePath = overridePropsRenamePath;
+    internals.scheduleUpdate = scheduleUpdate;
+    internals.scheduleRetry = scheduleRetry;
+    internals.setErrorHandler = setErrorHandler;
+    internals.setSuspenseHandler = setSuspenseHandler;
+    // React Refresh
+    internals.scheduleRefresh = scheduleRefresh;
+    internals.scheduleRoot = scheduleRoot;
+    internals.setRefreshHandler = setRefreshHandler;
+    // Enables DevTools to append owner stacks to error messages in DEV mode.
+    internals.getCurrentFiber = getCurrentFiberForDevTools;
+  }
+  if (enableSchedulingProfiler) {
+    // Conditionally inject these hooks only if Timeline profiler is supported by this build.
+    // This gives DevTools a way to feature detect that isn't tied to version number
+    // (since profiling and timeline are controlled by different feature flags).
+    internals.getLaneLabelMap = getLaneLabelMap;
+    internals.injectProfilingHooks = injectProfilingHooks;
+  }
+  return injectInternals(internals);
+}
diff --git a/packages/react-reconciler/src/ReactFiberRoot.js b/packages/react-reconciler/src/ReactFiberRoot.js
new file mode 100644
index 00000000000..26386597ee4
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberRoot.js
@@ -0,0 +1,236 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList, ReactFormState} from 'shared/ReactTypes';
+import type {
+  FiberRoot,
+  SuspenseHydrationCallbacks,
+  TransitionTracingCallbacks,
+} from './ReactInternalTypes';
+import type {RootTag} from './ReactRootTags';
+import type {Cache} from './ReactFiberCacheComponent';
+import type {Container} from './ReactFiberConfig';
+
+import {noTimeout} from './ReactFiberConfig';
+import {createHostRootFiber} from './ReactFiber';
+import {
+  NoLane,
+  NoLanes,
+  NoTimestamp,
+  TotalLanes,
+  createLaneMap,
+} from './ReactFiberLane';
+import {
+  enableSuspenseCallback,
+  enableProfilerCommitHooks,
+  enableProfilerTimer,
+  enableUpdaterTracking,
+  enableTransitionTracing,
+  disableLegacyMode,
+  enableViewTransition,
+  enableGestureTransition,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue';
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {createCache, retainCache} from './ReactFiberCacheComponent';
+
+export type RootState = {
+  element: any,
+  isDehydrated: boolean,
+  cache: Cache,
+};
+
+function FiberRootNode(
+  this: $FlowFixMe,
+  containerInfo: any,
+  // $FlowFixMe[missing-local-annot]
+  tag,
+  hydrate: any,
+  identifierPrefix: any,
+  onUncaughtError: any,
+  onCaughtError: any,
+  onRecoverableError: any,
+  onDefaultTransitionIndicator: any,
+  formState: ReactFormState<any, any> | null,
+) {
+  this.tag = disableLegacyMode ? ConcurrentRoot : tag;
+  this.containerInfo = containerInfo;
+  this.pendingChildren = null;
+  this.current = null;
+  this.pingCache = null;
+  this.timeoutHandle = noTimeout;
+  this.cancelPendingCommit = null;
+  this.context = null;
+  this.pendingContext = null;
+  this.next = null;
+  this.callbackNode = null;
+  this.callbackPriority = NoLane;
+  this.expirationTimes = createLaneMap(NoTimestamp);
+
+  this.pendingLanes = NoLanes;
+  this.suspendedLanes = NoLanes;
+  this.pingedLanes = NoLanes;
+  this.warmLanes = NoLanes;
+  this.expiredLanes = NoLanes;
+  if (enableDefaultTransitionIndicator) {
+    this.indicatorLanes = NoLanes;
+  }
+  this.errorRecoveryDisabledLanes = NoLanes;
+  this.shellSuspendCounter = 0;
+
+  this.entangledLanes = NoLanes;
+  this.entanglements = createLaneMap(NoLanes);
+
+  this.hiddenUpdates = createLaneMap(null);
+
+  this.identifierPrefix = identifierPrefix;
+  this.onUncaughtError = onUncaughtError;
+  this.onCaughtError = onCaughtError;
+  this.onRecoverableError = onRecoverableError;
+
+  if (enableDefaultTransitionIndicator) {
+    this.onDefaultTransitionIndicator = onDefaultTransitionIndicator;
+    this.pendingIndicator = null;
+  }
+
+  this.pooledCache = null;
+  this.pooledCacheLanes = NoLanes;
+
+  if (enableSuspenseCallback) {
+    this.hydrationCallbacks = null;
+  }
+
+  this.formState = formState;
+
+  if (enableViewTransition) {
+    this.transitionTypes = null;
+  }
+
+  if (enableGestureTransition) {
+    this.pendingGestures = null;
+    this.gestureClone = null;
+  }
+
+  this.incompleteTransitions = new Map();
+  if (enableTransitionTracing) {
+    this.transitionCallbacks = null;
+    this.transitionLanes = createLaneMap(null);
+  }
+
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    this.effectDuration = -0;
+    this.passiveEffectDuration = -0;
+  }
+
+  if (enableUpdaterTracking) {
+    this.memoizedUpdaters = new Set();
+    const pendingUpdatersLaneMap = (this.pendingUpdatersLaneMap = []);
+    for (let i = 0; i < TotalLanes; i++) {
+      pendingUpdatersLaneMap.push(new Set());
+    }
+  }
+
+  if (__DEV__) {
+    if (disableLegacyMode) {
+      // TODO: This varies by each renderer.
+      this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
+    } else {
+      switch (tag) {
+        case ConcurrentRoot:
+          this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
+          break;
+        case LegacyRoot:
+          this._debugRootType = hydrate ? 'hydrate()' : 'render()';
+          break;
+      }
+    }
+  }
+}
+
+export function createFiberRoot(
+  containerInfo: Container,
+  tag: RootTag,
+  hydrate: boolean,
+  initialChildren: ReactNodeList,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
+  // TODO: We have several of these arguments that are conceptually part of the
+  // host config, but because they are passed in at runtime, we have to thread
+  // them through the root constructor. Perhaps we should put them all into a
+  // single type, like a DynamicHostConfig that is defined by the renderer.
+  identifierPrefix: string,
+  formState: ReactFormState<any, any> | null,
+  onUncaughtError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?component(...props: any),
+    },
+  ) => void,
+  onRecoverableError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onDefaultTransitionIndicator: () => void | (() => void),
+  transitionCallbacks: null | TransitionTracingCallbacks,
+): FiberRoot {
+  // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
+  const root: FiberRoot = (new FiberRootNode(
+    containerInfo,
+    tag,
+    hydrate,
+    identifierPrefix,
+    onUncaughtError,
+    onCaughtError,
+    onRecoverableError,
+    onDefaultTransitionIndicator,
+    formState,
+  ): any);
+  if (enableSuspenseCallback) {
+    root.hydrationCallbacks = hydrationCallbacks;
+  }
+
+  if (enableTransitionTracing) {
+    root.transitionCallbacks = transitionCallbacks;
+  }
+
+  // Cyclic construction. This cheats the type system right now because
+  // stateNode is any.
+  const uninitializedFiber = createHostRootFiber(tag, isStrictMode);
+  root.current = uninitializedFiber;
+  uninitializedFiber.stateNode = root;
+
+  const initialCache = createCache();
+  retainCache(initialCache);
+
+  // The pooledCache is a fresh cache instance that is used temporarily
+  // for newly mounted boundaries during a render. In general, the
+  // pooledCache is always cleared from the root at the end of a render:
+  // it is either released when render commits, or moved to an Offscreen
+  // component if rendering suspends. Because the lifetime of the pooled
+  // cache is distinct from the main memoizedState.cache, it must be
+  // retained separately.
+  root.pooledCache = initialCache;
+  retainCache(initialCache);
+  const initialState: RootState = {
+    element: initialChildren,
+    isDehydrated: hydrate,
+    cache: initialCache,
+  };
+  uninitializedFiber.memoizedState = initialState;
+
+  initializeUpdateQueue(uninitializedFiber);
+
+  return root;
+}
diff --git a/packages/react-reconciler/src/ReactFiberRootScheduler.js b/packages/react-reconciler/src/ReactFiberRootScheduler.js
new file mode 100644
index 00000000000..26b62552276
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberRootScheduler.js
@@ -0,0 +1,737 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {FiberRoot} from './ReactInternalTypes';
+import type {Lane, Lanes} from './ReactFiberLane';
+import type {PriorityLevel} from 'scheduler/src/SchedulerPriorities';
+import type {Transition} from 'react/src/ReactStartTransition';
+
+import {
+  disableLegacyMode,
+  disableSchedulerTimeoutInWorkLoop,
+  enableProfilerTimer,
+  enableProfilerNestedUpdatePhase,
+  enableComponentPerformanceTrack,
+  enableYieldingBeforePassive,
+  enableGestureTransition,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+import {
+  NoLane,
+  NoLanes,
+  SyncLane,
+  DefaultLane,
+  getHighestPriorityLane,
+  getNextLanes,
+  includesSyncLane,
+  markStarvedLanesAsExpired,
+  claimNextTransitionUpdateLane,
+  getNextLanesToFlushSync,
+  checkIfRootIsPrerendering,
+  isGestureRender,
+} from './ReactFiberLane';
+import {
+  CommitContext,
+  NoContext,
+  RenderContext,
+  flushPendingEffects,
+  flushPendingEffectsDelayed,
+  getExecutionContext,
+  getWorkInProgressRoot,
+  getWorkInProgressRootRenderLanes,
+  getRootWithPendingPassiveEffects,
+  getPendingPassiveEffectsLanes,
+  hasPendingCommitEffects,
+  isWorkLoopSuspendedOnData,
+  performWorkOnRoot,
+} from './ReactFiberWorkLoop';
+import {LegacyRoot} from './ReactRootTags';
+import {
+  ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
+  cancelCallback as Scheduler_cancelCallback,
+  scheduleCallback as Scheduler_scheduleCallback,
+  now,
+} from './Scheduler';
+import {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+  lanesToEventPriority,
+} from './ReactEventPriorities';
+import {
+  supportsMicrotasks,
+  scheduleMicrotask,
+  shouldAttemptEagerTransition,
+  trackSchedulerEvent,
+  noTimeout,
+} from './ReactFiberConfig';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  resetNestedUpdateFlag,
+  syncNestedUpdateFlag,
+} from './ReactProfilerTimer';
+import {peekEntangledActionLane} from './ReactFiberAsyncAction';
+
+import noop from 'shared/noop';
+import reportGlobalError from 'shared/reportGlobalError';
+
+import {
+  startIsomorphicDefaultIndicatorIfNeeded,
+  hasOngoingIsomorphicIndicator,
+  retainIsomorphicIndicator,
+  markIsomorphicIndicatorHandled,
+} from './ReactFiberAsyncAction';
+
+// A linked list of all the roots with pending work. In an idiomatic app,
+// there's only a single root, but we do support multi root apps, hence this
+// extra complexity. But this module is optimized for the single root case.
+export let firstScheduledRoot: FiberRoot | null = null;
+let lastScheduledRoot: FiberRoot | null = null;
+
+// Used to prevent redundant mircotasks from being scheduled.
+let didScheduleMicrotask: boolean = false;
+// `act` "microtasks" are scheduled on the `act` queue instead of an actual
+// microtask, so we have to dedupe those separately. This wouldn't be an issue
+// if we required all `act` calls to be awaited, which we might in the future.
+let didScheduleMicrotask_act: boolean = false;
+
+// Used to quickly bail out of flushSync if there's no sync work to do.
+let mightHavePendingSyncWork: boolean = false;
+
+let isFlushingWork: boolean = false;
+
+let currentEventTransitionLane: Lane = NoLane;
+
+export function ensureRootIsScheduled(root: FiberRoot): void {
+  // This function is called whenever a root receives an update. It does two
+  // things 1) it ensures the root is in the root schedule, and 2) it ensures
+  // there's a pending microtask to process the root schedule.
+  //
+  // Most of the actual scheduling logic does not happen until
+  // `scheduleTaskForRootDuringMicrotask` runs.
+
+  // Add the root to the schedule
+  if (root === lastScheduledRoot || root.next !== null) {
+    // Fast path. This root is already scheduled.
+  } else {
+    if (lastScheduledRoot === null) {
+      firstScheduledRoot = lastScheduledRoot = root;
+    } else {
+      lastScheduledRoot.next = root;
+      lastScheduledRoot = root;
+    }
+  }
+
+  // Any time a root received an update, we set this to true until the next time
+  // we process the schedule. If it's false, then we can quickly exit flushSync
+  // without consulting the schedule.
+  mightHavePendingSyncWork = true;
+
+  ensureScheduleIsScheduled();
+
+  if (
+    __DEV__ &&
+    !disableLegacyMode &&
+    ReactSharedInternals.isBatchingLegacy &&
+    root.tag === LegacyRoot
+  ) {
+    // Special `act` case: Record whenever a legacy update is scheduled.
+    ReactSharedInternals.didScheduleLegacyUpdate = true;
+  }
+}
+
+export function ensureScheduleIsScheduled(): void {
+  // At the end of the current event, go through each of the roots and ensure
+  // there's a task scheduled for each one at the correct priority.
+  if (__DEV__ && ReactSharedInternals.actQueue !== null) {
+    // We're inside an `act` scope.
+    if (!didScheduleMicrotask_act) {
+      didScheduleMicrotask_act = true;
+      scheduleImmediateRootScheduleTask();
+    }
+  } else {
+    if (!didScheduleMicrotask) {
+      didScheduleMicrotask = true;
+      scheduleImmediateRootScheduleTask();
+    }
+  }
+}
+
+export function flushSyncWorkOnAllRoots() {
+  // This is allowed to be called synchronously, but the caller should check
+  // the execution context first.
+  flushSyncWorkAcrossRoots_impl(NoLanes, false);
+}
+
+export function flushSyncWorkOnLegacyRootsOnly() {
+  // This is allowed to be called synchronously, but the caller should check
+  // the execution context first.
+  if (!disableLegacyMode) {
+    flushSyncWorkAcrossRoots_impl(NoLanes, true);
+  }
+}
+
+function flushSyncWorkAcrossRoots_impl(
+  syncTransitionLanes: Lanes | Lane,
+  onlyLegacy: boolean,
+) {
+  if (isFlushingWork) {
+    // Prevent reentrancy.
+    // TODO: Is this overly defensive? The callers must check the execution
+    // context first regardless.
+    return;
+  }
+
+  if (!mightHavePendingSyncWork) {
+    // Fast path. There's no sync work to do.
+    return;
+  }
+
+  // There may or may not be synchronous work scheduled. Let's check.
+  let didPerformSomeWork;
+  isFlushingWork = true;
+  do {
+    didPerformSomeWork = false;
+    let root = firstScheduledRoot;
+    while (root !== null) {
+      if (onlyLegacy && (disableLegacyMode || root.tag !== LegacyRoot)) {
+        // Skip non-legacy roots.
+      } else {
+        if (syncTransitionLanes !== NoLanes) {
+          const nextLanes = getNextLanesToFlushSync(root, syncTransitionLanes);
+          if (nextLanes !== NoLanes) {
+            // This root has pending sync work. Flush it now.
+            didPerformSomeWork = true;
+            performSyncWorkOnRoot(root, nextLanes);
+          }
+        } else {
+          const workInProgressRoot = getWorkInProgressRoot();
+          const workInProgressRootRenderLanes =
+            getWorkInProgressRootRenderLanes();
+          const rootHasPendingCommit =
+            root.cancelPendingCommit !== null ||
+            root.timeoutHandle !== noTimeout;
+          const nextLanes = getNextLanes(
+            root,
+            root === workInProgressRoot
+              ? workInProgressRootRenderLanes
+              : NoLanes,
+            rootHasPendingCommit,
+          );
+          if (
+            (includesSyncLane(nextLanes) ||
+              (enableGestureTransition && isGestureRender(nextLanes))) &&
+            !checkIfRootIsPrerendering(root, nextLanes)
+          ) {
+            // This root has pending sync work. Flush it now.
+            didPerformSomeWork = true;
+            performSyncWorkOnRoot(root, nextLanes);
+          }
+        }
+      }
+      root = root.next;
+    }
+  } while (didPerformSomeWork);
+  isFlushingWork = false;
+}
+
+function processRootScheduleInImmediateTask() {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // Track the currently executing event if there is one so we can ignore this
+    // event when logging events.
+    trackSchedulerEvent();
+  }
+
+  processRootScheduleInMicrotask();
+}
+
+function processRootScheduleInMicrotask() {
+  // This function is always called inside a microtask. It should never be
+  // called synchronously.
+  didScheduleMicrotask = false;
+  if (__DEV__) {
+    didScheduleMicrotask_act = false;
+  }
+
+  // We'll recompute this as we iterate through all the roots and schedule them.
+  mightHavePendingSyncWork = false;
+
+  let syncTransitionLanes = NoLanes;
+  if (currentEventTransitionLane !== NoLane) {
+    if (shouldAttemptEagerTransition()) {
+      // A transition was scheduled during an event, but we're going to try to
+      // render it synchronously anyway. We do this during a popstate event to
+      // preserve the scroll position of the previous page.
+      syncTransitionLanes = currentEventTransitionLane;
+    } else if (enableDefaultTransitionIndicator) {
+      // If we have a Transition scheduled by this event it might be paired
+      // with Default lane scheduled loading indicators. To unbatch it from
+      // other events later on, flush it early to determine whether it
+      // rendered an indicator. This ensures that setState in default priority
+      // event doesn't trigger onDefaultTransitionIndicator.
+      syncTransitionLanes = DefaultLane;
+    }
+  }
+
+  const currentTime = now();
+
+  let prev = null;
+  let root = firstScheduledRoot;
+  while (root !== null) {
+    const next = root.next;
+    const nextLanes = scheduleTaskForRootDuringMicrotask(root, currentTime);
+    if (nextLanes === NoLane) {
+      // This root has no more pending work. Remove it from the schedule. To
+      // guard against subtle reentrancy bugs, this microtask is the only place
+      // we do this — you can add roots to the schedule whenever, but you can
+      // only remove them here.
+
+      // Null this out so we know it's been removed from the schedule.
+      root.next = null;
+      if (prev === null) {
+        // This is the new head of the list
+        firstScheduledRoot = next;
+      } else {
+        prev.next = next;
+      }
+      if (next === null) {
+        // This is the new tail of the list
+        lastScheduledRoot = prev;
+      }
+    } else {
+      // This root still has work. Keep it in the list.
+      prev = root;
+
+      // This is a fast-path optimization to early exit from
+      // flushSyncWorkOnAllRoots if we can be certain that there is no remaining
+      // synchronous work to perform. Set this to true if there might be sync
+      // work left.
+      if (
+        // Skip the optimization if syncTransitionLanes is set
+        syncTransitionLanes !== NoLanes ||
+        // Common case: we're not treating any extra lanes as synchronous, so we
+        // can just check if the next lanes are sync.
+        includesSyncLane(nextLanes) ||
+        (enableGestureTransition && isGestureRender(nextLanes))
+      ) {
+        mightHavePendingSyncWork = true;
+      }
+    }
+    root = next;
+  }
+
+  // At the end of the microtask, flush any pending synchronous work. This has
+  // to come at the end, because it does actual rendering work that might throw.
+  // If we're in the middle of a View Transition async sequence, we don't want to
+  // interrupt that sequence. Instead, we'll flush any remaining work when it
+  // completes.
+  if (!hasPendingCommitEffects()) {
+    flushSyncWorkAcrossRoots_impl(syncTransitionLanes, false);
+  }
+
+  if (currentEventTransitionLane !== NoLane) {
+    // Reset Event Transition Lane so that we allocate a new one next time.
+    currentEventTransitionLane = NoLane;
+    startDefaultTransitionIndicatorIfNeeded();
+  }
+}
+
+function startDefaultTransitionIndicatorIfNeeded() {
+  if (!enableDefaultTransitionIndicator) {
+    return;
+  }
+  // Check if we need to start an isomorphic indicator like if an async action
+  // was started.
+  startIsomorphicDefaultIndicatorIfNeeded();
+  // Check all the roots if there are any new indicators needed.
+  let root = firstScheduledRoot;
+  while (root !== null) {
+    if (root.indicatorLanes !== NoLanes && root.pendingIndicator === null) {
+      // We have new indicator lanes that requires a loading state. Start the
+      // default transition indicator.
+      if (hasOngoingIsomorphicIndicator()) {
+        // We already have an isomorphic indicator going which means it has to
+        // also apply to this root since it implies all roots have the same one.
+        // We retain this indicator so that it keeps going until we commit this
+        // root.
+        root.pendingIndicator = retainIsomorphicIndicator();
+      } else {
+        try {
+          const onDefaultTransitionIndicator =
+            root.onDefaultTransitionIndicator;
+          root.pendingIndicator = onDefaultTransitionIndicator() || noop;
+        } catch (x) {
+          root.pendingIndicator = noop;
+          reportGlobalError(x);
+        }
+      }
+    }
+    root = root.next;
+  }
+}
+
+function scheduleTaskForRootDuringMicrotask(
+  root: FiberRoot,
+  currentTime: number,
+): Lane {
+  // This function is always called inside a microtask, or at the very end of a
+  // rendering task right before we yield to the main thread. It should never be
+  // called synchronously.
+
+  // This function also never performs React work synchronously; it should
+  // only schedule work to be performed later, in a separate task or microtask.
+
+  // Check if any lanes are being starved by other work. If so, mark them as
+  // expired so we know to work on those next.
+  markStarvedLanesAsExpired(root, currentTime);
+
+  // Determine the next lanes to work on, and their priority.
+  const rootWithPendingPassiveEffects = getRootWithPendingPassiveEffects();
+  const pendingPassiveEffectsLanes = getPendingPassiveEffectsLanes();
+  const workInProgressRoot = getWorkInProgressRoot();
+  const workInProgressRootRenderLanes = getWorkInProgressRootRenderLanes();
+  const rootHasPendingCommit =
+    root.cancelPendingCommit !== null || root.timeoutHandle !== noTimeout;
+  const nextLanes =
+    enableYieldingBeforePassive && root === rootWithPendingPassiveEffects
+      ? // This will schedule the callback at the priority of the lane but we used to
+        // always schedule it at NormalPriority. Discrete will flush it sync anyway.
+        // So the only difference is Idle and it doesn't seem necessarily right for that
+        // to get upgraded beyond something important just because we're past commit.
+        pendingPassiveEffectsLanes
+      : getNextLanes(
+          root,
+          root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
+          rootHasPendingCommit,
+        );
+
+  const existingCallbackNode = root.callbackNode;
+  if (
+    // Check if there's nothing to work on
+    nextLanes === NoLanes ||
+    // If this root is currently suspended and waiting for data to resolve, don't
+    // schedule a task to render it. We'll either wait for a ping, or wait to
+    // receive an update.
+    //
+    // Suspended render phase
+    (root === workInProgressRoot && isWorkLoopSuspendedOnData()) ||
+    // Suspended commit phase
+    root.cancelPendingCommit !== null
+  ) {
+    // Fast path: There's nothing to work on.
+    if (existingCallbackNode !== null) {
+      cancelCallback(existingCallbackNode);
+    }
+    root.callbackNode = null;
+    root.callbackPriority = NoLane;
+    return NoLane;
+  }
+
+  // Schedule a new callback in the host environment.
+  if (
+    includesSyncLane(nextLanes) &&
+    // If we're prerendering, then we should use the concurrent work loop
+    // even if the lanes are synchronous, so that prerendering never blocks
+    // the main thread.
+    !checkIfRootIsPrerendering(root, nextLanes)
+  ) {
+    // Synchronous work is always flushed at the end of the microtask, so we
+    // don't need to schedule an additional task.
+    if (existingCallbackNode !== null) {
+      cancelCallback(existingCallbackNode);
+    }
+    root.callbackPriority = SyncLane;
+    root.callbackNode = null;
+    return SyncLane;
+  } else {
+    // We use the highest priority lane to represent the priority of the callback.
+    const existingCallbackPriority = root.callbackPriority;
+    const newCallbackPriority = getHighestPriorityLane(nextLanes);
+
+    if (
+      newCallbackPriority === existingCallbackPriority &&
+      // Special case related to `act`. If the currently scheduled task is a
+      // Scheduler task, rather than an `act` task, cancel it and re-schedule
+      // on the `act` queue.
+      !(
+        __DEV__ &&
+        ReactSharedInternals.actQueue !== null &&
+        existingCallbackNode !== fakeActCallbackNode
+      )
+    ) {
+      // The priority hasn't changed. We can reuse the existing task.
+      return newCallbackPriority;
+    } else {
+      // Cancel the existing callback. We'll schedule a new one below.
+      cancelCallback(existingCallbackNode);
+    }
+
+    let schedulerPriorityLevel;
+    switch (lanesToEventPriority(nextLanes)) {
+      // Scheduler does have an "ImmediatePriority", but now that we use
+      // microtasks for sync work we no longer use that. Any sync work that
+      // reaches this path is meant to be time sliced.
+      case DiscreteEventPriority:
+      case ContinuousEventPriority:
+        schedulerPriorityLevel = UserBlockingSchedulerPriority;
+        break;
+      case DefaultEventPriority:
+        schedulerPriorityLevel = NormalSchedulerPriority;
+        break;
+      case IdleEventPriority:
+        schedulerPriorityLevel = IdleSchedulerPriority;
+        break;
+      default:
+        schedulerPriorityLevel = NormalSchedulerPriority;
+        break;
+    }
+
+    const newCallbackNode = scheduleCallback(
+      schedulerPriorityLevel,
+      performWorkOnRootViaSchedulerTask.bind(null, root),
+    );
+
+    root.callbackPriority = newCallbackPriority;
+    root.callbackNode = newCallbackNode;
+    return newCallbackPriority;
+  }
+}
+
+type RenderTaskFn = (didTimeout: boolean) => RenderTaskFn | null;
+
+function performWorkOnRootViaSchedulerTask(
+  root: FiberRoot,
+  didTimeout: boolean,
+): RenderTaskFn | null {
+  // This is the entry point for concurrent tasks scheduled via Scheduler (and
+  // postTask, in the future).
+
+  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+    resetNestedUpdateFlag();
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // Track the currently executing event if there is one so we can ignore this
+    // event when logging events.
+    trackSchedulerEvent();
+  }
+
+  if (hasPendingCommitEffects()) {
+    // We are currently in the middle of an async committing (such as a View Transition).
+    // We could force these to flush eagerly but it's better to defer any work until
+    // it finishes. This may not be the same root as we're waiting on.
+    // TODO: This relies on the commit eventually calling ensureRootIsScheduled which
+    // always calls processRootScheduleInMicrotask which in turn always loops through
+    // all the roots to figure out. This is all a bit inefficient and if optimized
+    // it'll need to consider rescheduling a task for any skipped roots.
+    root.callbackNode = null;
+    root.callbackPriority = NoLane;
+    return null;
+  }
+
+  // Flush any pending passive effects before deciding which lanes to work on,
+  // in case they schedule additional work.
+  const originalCallbackNode = root.callbackNode;
+  const didFlushPassiveEffects = flushPendingEffectsDelayed();
+  if (didFlushPassiveEffects) {
+    // Something in the passive effect phase may have canceled the current task.
+    // Check if the task node for this root was changed.
+    if (root.callbackNode !== originalCallbackNode) {
+      // The current task was canceled. Exit. We don't need to call
+      // `ensureRootIsScheduled` because the check above implies either that
+      // there's a new task, or that there's no remaining work on this root.
+      return null;
+    } else {
+      // Current task was not canceled. Continue.
+    }
+  }
+
+  // Determine the next lanes to work on, using the fields stored on the root.
+  // TODO: We already called getNextLanes when we scheduled the callback; we
+  // should be able to avoid calling it again by stashing the result on the
+  // root object. However, because we always schedule the callback during
+  // a microtask (scheduleTaskForRootDuringMicrotask), it's possible that
+  // an update was scheduled earlier during this same browser task (and
+  // therefore before the microtasks have run). That's because Scheduler batches
+  // together multiple callbacks into a single browser macrotask, without
+  // yielding to microtasks in between. We should probably change this to align
+  // with the postTask behavior (and literally use postTask when
+  // it's available).
+  const workInProgressRoot = getWorkInProgressRoot();
+  const workInProgressRootRenderLanes = getWorkInProgressRootRenderLanes();
+  const rootHasPendingCommit =
+    root.cancelPendingCommit !== null || root.timeoutHandle !== noTimeout;
+  const lanes = getNextLanes(
+    root,
+    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
+    rootHasPendingCommit,
+  );
+  if (lanes === NoLanes) {
+    // No more work on this root.
+    return null;
+  }
+
+  // Enter the work loop.
+  // TODO: We only check `didTimeout` defensively, to account for a Scheduler
+  // bug we're still investigating. Once the bug in Scheduler is fixed,
+  // we can remove this, since we track expiration ourselves.
+  const forceSync = !disableSchedulerTimeoutInWorkLoop && didTimeout;
+  performWorkOnRoot(root, lanes, forceSync);
+
+  // The work loop yielded, but there may or may not be work left at the current
+  // priority. Need to determine whether we need to schedule a continuation.
+  // Usually `scheduleTaskForRootDuringMicrotask` only runs inside a microtask;
+  // however, since most of the logic for determining if we need a continuation
+  // versus a new task is the same, we cheat a bit and call it here. This is
+  // only safe to do because we know we're at the end of the browser task.
+  // So although it's not an actual microtask, it might as well be.
+  scheduleTaskForRootDuringMicrotask(root, now());
+  if (root.callbackNode != null && root.callbackNode === originalCallbackNode) {
+    // The task node scheduled for this root is the same one that's
+    // currently executed. Need to return a continuation.
+    return performWorkOnRootViaSchedulerTask.bind(null, root);
+  }
+  return null;
+}
+
+function performSyncWorkOnRoot(root: FiberRoot, lanes: Lanes) {
+  // This is the entry point for synchronous tasks that don't go
+  // through Scheduler.
+  const didFlushPassiveEffects = flushPendingEffects();
+  if (didFlushPassiveEffects) {
+    // If passive effects were flushed, exit to the outer work loop in the root
+    // scheduler, so we can recompute the priority.
+    return null;
+  }
+  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+    syncNestedUpdateFlag();
+  }
+  const forceSync = true;
+  performWorkOnRoot(root, lanes, forceSync);
+}
+
+const fakeActCallbackNode = {};
+
+function scheduleCallback(
+  priorityLevel: PriorityLevel,
+  callback: RenderTaskFn,
+) {
+  if (__DEV__ && ReactSharedInternals.actQueue !== null) {
+    // Special case: We're inside an `act` scope (a testing utility).
+    // Instead of scheduling work in the host environment, add it to a
+    // fake internal queue that's managed by the `act` implementation.
+    ReactSharedInternals.actQueue.push(callback);
+    return fakeActCallbackNode;
+  } else {
+    return Scheduler_scheduleCallback(priorityLevel, callback);
+  }
+}
+
+function cancelCallback(callbackNode: mixed) {
+  if (__DEV__ && callbackNode === fakeActCallbackNode) {
+    // Special `act` case: check if this is the fake callback node used by
+    // the `act` implementation.
+  } else if (callbackNode !== null) {
+    Scheduler_cancelCallback(callbackNode);
+  }
+}
+
+function scheduleImmediateRootScheduleTask() {
+  if (__DEV__ && ReactSharedInternals.actQueue !== null) {
+    // Special case: Inside an `act` scope, we push microtasks to the fake `act`
+    // callback queue. This is because we currently support calling `act`
+    // without awaiting the result. The plan is to deprecate that, and require
+    // that you always await the result so that the microtasks have a chance to
+    // run. But it hasn't happened yet.
+    ReactSharedInternals.actQueue.push(() => {
+      processRootScheduleInMicrotask();
+      return null;
+    });
+  }
+
+  // TODO: Can we land supportsMicrotasks? Which environments don't support it?
+  // Alternatively, can we move this check to the host config?
+  if (supportsMicrotasks) {
+    scheduleMicrotask(() => {
+      // In Safari, appending an iframe forces microtasks to run.
+      // https://github.com/facebook/react/issues/22459
+      // We don't support running callbacks in the middle of render
+      // or commit so we need to check against that.
+      const executionContext = getExecutionContext();
+      if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+        // Note that this would still prematurely flush the callbacks
+        // if this happens outside render or commit phase (e.g. in an event).
+
+        // Intentionally using a macrotask instead of a microtask here. This is
+        // wrong semantically but it prevents an infinite loop. The bug is
+        // Safari's, not ours, so we just do our best to not crash even though
+        // the behavior isn't completely correct.
+        Scheduler_scheduleCallback(
+          ImmediateSchedulerPriority,
+          processRootScheduleInImmediateTask,
+        );
+        return;
+      }
+      processRootScheduleInMicrotask();
+    });
+  } else {
+    // If microtasks are not supported, use Scheduler.
+    Scheduler_scheduleCallback(
+      ImmediateSchedulerPriority,
+      processRootScheduleInImmediateTask,
+    );
+  }
+}
+
+export function requestTransitionLane(
+  // This argument isn't used, it's only here to encourage the caller to
+  // check that it's inside a transition before calling this function.
+  // TODO: Make this non-nullable. Requires a tweak to useOptimistic.
+  transition: Transition | null,
+): Lane {
+  // The algorithm for assigning an update to a lane should be stable for all
+  // updates at the same priority within the same event. To do this, the
+  // inputs to the algorithm must be the same.
+  //
+  // The trick we use is to cache the first of each of these inputs within an
+  // event. Then reset the cached values once we can be sure the event is
+  // over. Our heuristic for that is whenever we enter a concurrent work loop.
+  if (currentEventTransitionLane === NoLane) {
+    // All transitions within the same event are assigned the same lane.
+    const actionScopeLane = peekEntangledActionLane();
+    currentEventTransitionLane =
+      actionScopeLane !== NoLane
+        ? // We're inside an async action scope. Reuse the same lane.
+          actionScopeLane
+        : // We may or may not be inside an async action scope. If we are, this
+          // is the first update in that scope. Either way, we need to get a
+          // fresh transition lane.
+          claimNextTransitionUpdateLane();
+  }
+  return currentEventTransitionLane;
+}
+
+export function didCurrentEventScheduleTransition(): boolean {
+  return currentEventTransitionLane !== NoLane;
+}
+
+export function markIndicatorHandled(root: FiberRoot): void {
+  if (enableDefaultTransitionIndicator) {
+    // The current transition event rendered a synchronous loading state.
+    // Clear it from the indicator lanes. We don't need to show a separate
+    // loading state for this lane.
+    root.indicatorLanes &= ~currentEventTransitionLane;
+    markIsomorphicIndicatorHandled();
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberScope.js b/packages/react-reconciler/src/ReactFiberScope.js
new file mode 100644
index 00000000000..8f9f1cdea57
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberScope.js
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {
+  ReactScopeInstance,
+  ReactContext,
+  ReactScopeQuery,
+} from 'shared/ReactTypes';
+
+import {
+  getPublicInstance,
+  getInstanceFromNode,
+  getInstanceFromScope,
+} from './ReactFiberConfig';
+import {isFiberSuspenseAndTimedOut} from './ReactFiberTreeReflection';
+
+import {HostComponent, ScopeComponent, ContextProvider} from './ReactWorkTags';
+import {enableScopeAPI} from 'shared/ReactFeatureFlags';
+
+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: null | Fiber = startingChild;
+  while (child !== null) {
+    collectScopedNodes(child, fn, scopedNodes);
+    child = child.sibling;
+  }
+}
+
+function collectFirstScopedNodeFromChildren(
+  startingChild: Fiber,
+  fn: ReactScopeQuery,
+): Object | null {
+  let child: null | Fiber = 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) {
+    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;
+  }
+}
+
+function DO_NOT_USE_queryAllNodes(
+  this: $FlowFixMe,
+  fn: ReactScopeQuery,
+): null | Array<Object> {
+  const currentFiber = getInstanceFromScope(this);
+  if (currentFiber === null) {
+    return null;
+  }
+  const child = currentFiber.child;
+  const scopedNodes: Array<any> = [];
+  if (child !== null) {
+    collectScopedNodesFromChildren(child, fn, scopedNodes);
+  }
+  return scopedNodes.length === 0 ? null : scopedNodes;
+}
+
+function DO_NOT_USE_queryFirstNode(
+  this: $FlowFixMe,
+  fn: ReactScopeQuery,
+): null | Object {
+  const currentFiber = getInstanceFromScope(this);
+  if (currentFiber === null) {
+    return null;
+  }
+  const child = currentFiber.child;
+  if (child !== null) {
+    return collectFirstScopedNodeFromChildren(child, fn);
+  }
+  return null;
+}
+
+function containsNode(this: $FlowFixMe, node: Object): boolean {
+  let fiber = getInstanceFromNode(node);
+  while (fiber !== null) {
+    if (fiber.tag === ScopeComponent && fiber.stateNode === this) {
+      return true;
+    }
+    fiber = fiber.return;
+  }
+  return false;
+}
+
+function getChildContextValues<T>(
+  this: $FlowFixMe,
+  context: ReactContext<T>,
+): Array<T> {
+  const currentFiber = getInstanceFromScope(this);
+  if (currentFiber === null) {
+    return [];
+  }
+  const child = currentFiber.child;
+  const childContextValues: Array<T> = [];
+  if (child !== null) {
+    collectNearestChildContextValues(child, context, childContextValues);
+  }
+  return childContextValues;
+}
+
+export function createScopeInstance(): ReactScopeInstance {
+  return {
+    DO_NOT_USE_queryAllNodes,
+    DO_NOT_USE_queryFirstNode,
+    containsNode,
+    getChildContextValues,
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberShellHydration.js b/packages/react-reconciler/src/ReactFiberShellHydration.js
new file mode 100644
index 00000000000..6e89763aeed
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberShellHydration.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {FiberRoot} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot';
+
+// This is imported by the event replaying implementation in React DOM. It's
+// in a separate file to break a circular dependency between the renderer and
+// the reconciler.
+export function isRootDehydrated(root: FiberRoot): boolean {
+  const currentState: RootState = root.current.memoizedState;
+  return currentState.isDehydrated;
+}
diff --git a/packages/react-reconciler/src/ReactFiberStack.js b/packages/react-reconciler/src/ReactFiberStack.js
new file mode 100644
index 00000000000..1af6dd6971d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberStack.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+
+export type StackCursor<T> = {current: T};
+
+const valueStack: Array<any> = [];
+
+let fiberStack: Array<Fiber | null>;
+
+if (__DEV__) {
+  fiberStack = [];
+}
+
+let index = -1;
+
+function createCursor<T>(defaultValue: T): StackCursor<T> {
+  return {
+    current: defaultValue,
+  };
+}
+
+function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
+  if (index < 0) {
+    if (__DEV__) {
+      console.error('Unexpected pop.');
+    }
+    return;
+  }
+
+  if (__DEV__) {
+    if (fiber !== fiberStack[index]) {
+      console.error('Unexpected Fiber popped.');
+    }
+  }
+
+  cursor.current = valueStack[index];
+
+  valueStack[index] = null;
+
+  if (__DEV__) {
+    fiberStack[index] = null;
+  }
+
+  index--;
+}
+
+function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
+  index++;
+
+  valueStack[index] = cursor.current;
+
+  if (__DEV__) {
+    fiberStack[index] = fiber;
+  }
+
+  cursor.current = value;
+}
+export {createCursor, pop, push};
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js
new file mode 100644
index 00000000000..695c3697154
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Wakeable, SuspenseListTailMode} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
+import type {SuspenseInstance} from './ReactFiberConfig';
+import type {Lane} from './ReactFiberLane';
+import type {TreeContext} from './ReactFiberTreeContext';
+import type {CapturedValue} from './ReactCapturedValue';
+
+import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
+import {NoFlags, DidCapture} from './ReactFiberFlags';
+import {
+  isSuspenseInstancePending,
+  isSuspenseInstanceFallback,
+} from './ReactFiberConfig';
+
+// 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 = {
+  // 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,
+  treeContext: null | TreeContext,
+  // Represents the lane we should attempt to hydrate a dehydrated boundary at.
+  // OffscreenLane is the default for dehydrated boundaries.
+  // NoLane is the default for normal boundaries, which turns into "normal" pri.
+  retryLane: Lane,
+  // Stashed Errors that happened while attempting to hydrate this boundary.
+  hydrationErrors: Array<CapturedValue<mixed>> | null,
+};
+
+export type SuspenseListRenderState = {
+  isBackwards: boolean,
+  // The currently rendering tail row.
+  rendering: null | Fiber,
+  // The absolute time when we started rendering the most recent 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,
+  // Tail insertions setting.
+  tailMode: SuspenseListTailMode,
+  // Keep track of total number of forks during multiple passes
+  treeForkCount: number,
+};
+
+export type RetryQueue = Set<Wakeable>;
+
+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 &&
+      // Independent revealOrder can't be trusted because it doesn't
+      // keep track of whether it suspended or not.
+      node.memoizedProps.revealOrder !== 'independent'
+    ) {
+      const didSuspend = (node.flags & DidCapture) !== NoFlags;
+      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/ReactFiberSuspenseContext.js b/packages/react-reconciler/src/ReactFiberSuspenseContext.js
new file mode 100644
index 00000000000..aec47af4656
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberSuspenseContext.js
@@ -0,0 +1,233 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SuspenseProps} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
+
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {createCursor, push, pop} from './ReactFiberStack';
+import {isCurrentTreeHidden} from './ReactFiberHiddenContext';
+import {OffscreenComponent} from './ReactWorkTags';
+
+// The Suspense handler is the boundary that should capture if something
+// suspends, i.e. it's the nearest `catch` block on the stack.
+const suspenseHandlerStackCursor: StackCursor<Fiber | null> =
+  createCursor(null);
+
+// Represents the outermost boundary that is not visible in the current tree.
+// Everything above this is the "shell". When this is null, it means we're
+// rendering in the shell of the app. If it's non-null, it means we're rendering
+// deeper than the shell, inside a new tree that wasn't already visible.
+//
+// The main way we use this concept is to determine whether showing a fallback
+// would result in a desirable or undesirable loading state. Activing a fallback
+// in the shell is considered an undersirable loading state, because it would
+// mean hiding visible (albeit stale) content in the current tree — we prefer to
+// show the stale content, rather than switch to a fallback. But showing a
+// fallback in a new tree is fine, because there's no stale content to
+// prefer instead.
+let shellBoundary: Fiber | null = null;
+
+export function getShellBoundary(): Fiber | null {
+  return shellBoundary;
+}
+
+export function pushPrimaryTreeSuspenseHandler(handler: Fiber): void {
+  // TODO: Pass as argument
+  const current = handler.alternate;
+  const props: SuspenseProps = handler.pendingProps;
+
+  // Shallow Suspense context fields, like ForceSuspenseFallback, should only be
+  // propagated a single level. For example, when ForceSuspenseFallback is set,
+  // it should only force the nearest Suspense boundary into fallback mode.
+  push(
+    suspenseStackCursor,
+    setDefaultShallowSuspenseListContext(suspenseStackCursor.current),
+    handler,
+  );
+
+  // Experimental feature: Some Suspense boundaries are marked as having an
+  // undesirable fallback state. These have special behavior where we only
+  // activate the fallback if there's no other boundary on the stack that we can
+  // use instead.
+  if (
+    enableSuspenseAvoidThisFallback &&
+    props.unstable_avoidThisFallback === true &&
+    // If an avoided boundary is already visible, it behaves identically to
+    // a regular Suspense boundary.
+    (current === null || isCurrentTreeHidden())
+  ) {
+    if (shellBoundary === null) {
+      // We're rendering in the shell. There's no parent Suspense boundary that
+      // can provide a desirable fallback state. We'll use this boundary.
+      push(suspenseHandlerStackCursor, handler, handler);
+
+      // However, because this is not a desirable fallback, the children are
+      // still considered part of the shell. So we intentionally don't assign
+      // to `shellBoundary`.
+    } else {
+      // There's already a parent Suspense boundary that can provide a desirable
+      // fallback state. Prefer that one.
+      const handlerOnStack = suspenseHandlerStackCursor.current;
+      push(suspenseHandlerStackCursor, handlerOnStack, handler);
+    }
+    return;
+  }
+
+  // TODO: If the parent Suspense handler already suspended, there's no reason
+  // to push a nested Suspense handler, because it will get replaced by the
+  // outer fallback, anyway. Consider this as a future optimization.
+  push(suspenseHandlerStackCursor, handler, handler);
+  if (shellBoundary === null) {
+    if (current === null || isCurrentTreeHidden()) {
+      // This boundary is not visible in the current UI.
+      shellBoundary = handler;
+    } else {
+      const prevState: SuspenseState = current.memoizedState;
+      if (prevState !== null) {
+        // This boundary is showing a fallback in the current UI.
+        shellBoundary = handler;
+      }
+    }
+  }
+}
+
+export function pushFallbackTreeSuspenseHandler(fiber: Fiber): void {
+  // We're about to render the fallback. If something in the fallback suspends,
+  // it's akin to throwing inside of a `catch` block. This boundary should not
+  // capture. Reuse the existing handler on the stack.
+  reuseSuspenseHandlerOnStack(fiber);
+}
+
+export function pushDehydratedActivitySuspenseHandler(fiber: Fiber): void {
+  // This is called when hydrating an Activity boundary. We can just leave it
+  // dehydrated if it suspends.
+  // A SuspenseList context is only pushed here to avoid a push/pop mismatch.
+  // Reuse the current value on the stack.
+  // TODO: We can avoid needing to push here by by forking popSuspenseHandler
+  // into separate functions for Activity, Suspense and Offscreen.
+  push(suspenseStackCursor, suspenseStackCursor.current, fiber);
+  push(suspenseHandlerStackCursor, fiber, fiber);
+  if (shellBoundary === null) {
+    // We can contain any suspense inside the Activity boundary.
+    shellBoundary = fiber;
+  }
+}
+
+export function pushOffscreenSuspenseHandler(fiber: Fiber): void {
+  if (fiber.tag === OffscreenComponent) {
+    // A SuspenseList context is only pushed here to avoid a push/pop mismatch.
+    // Reuse the current value on the stack.
+    // TODO: We can avoid needing to push here by by forking popSuspenseHandler
+    // into separate functions for Activity, Suspense and Offscreen.
+    push(suspenseStackCursor, suspenseStackCursor.current, fiber);
+    push(suspenseHandlerStackCursor, fiber, fiber);
+    if (shellBoundary === null) {
+      // We're rendering hidden content. If it suspends, we can handle it by
+      // just not committing the offscreen boundary.
+      shellBoundary = fiber;
+    }
+  } else {
+    // This is a LegacyHidden component.
+    reuseSuspenseHandlerOnStack(fiber);
+  }
+}
+
+export function reuseSuspenseHandlerOnStack(fiber: Fiber) {
+  push(suspenseStackCursor, suspenseStackCursor.current, fiber);
+  push(suspenseHandlerStackCursor, getSuspenseHandler(), fiber);
+}
+
+export function getSuspenseHandler(): Fiber | null {
+  return suspenseHandlerStackCursor.current;
+}
+
+export function popSuspenseHandler(fiber: Fiber): void {
+  pop(suspenseHandlerStackCursor, fiber);
+  if (shellBoundary === fiber) {
+    // Popping back into the shell.
+    shellBoundary = null;
+  }
+  pop(suspenseStackCursor, fiber);
+}
+
+// SuspenseList context
+// TODO: Move to a separate module? We may change the SuspenseList
+// implementation to hide/show in the commit phase, anyway.
+export opaque type SuspenseContext = number;
+export opaque type SubtreeSuspenseContext: SuspenseContext = number;
+export opaque type ShallowSuspenseContext: SuspenseContext = number;
+
+const DefaultSuspenseContext: SuspenseContext = 0b00;
+
+const SubtreeSuspenseContextMask: SuspenseContext = 0b01;
+
+// ForceSuspenseFallback can be used by SuspenseList to force newly added
+// items into their fallback state during one of the render passes.
+export const ForceSuspenseFallback: ShallowSuspenseContext = 0b10;
+
+export const suspenseStackCursor: StackCursor<SuspenseContext> = createCursor(
+  DefaultSuspenseContext,
+);
+
+export function hasSuspenseListContext(
+  parentContext: SuspenseContext,
+  flag: SuspenseContext,
+): boolean {
+  return (parentContext & flag) !== 0;
+}
+
+export function setDefaultShallowSuspenseListContext(
+  parentContext: SuspenseContext,
+): SuspenseContext {
+  return parentContext & SubtreeSuspenseContextMask;
+}
+
+export function setShallowSuspenseListContext(
+  parentContext: SuspenseContext,
+  shallowContext: ShallowSuspenseContext,
+): SuspenseContext {
+  return (parentContext & SubtreeSuspenseContextMask) | shallowContext;
+}
+
+export function pushSuspenseListContext(
+  fiber: Fiber,
+  newContext: SuspenseContext,
+): void {
+  // Push the current handler in this case since we're not catching at the SuspenseList
+  // for typical rows.
+  const handlerOnStack = suspenseHandlerStackCursor.current;
+  push(suspenseHandlerStackCursor, handlerOnStack, fiber);
+  push(suspenseStackCursor, newContext, fiber);
+}
+
+export function pushSuspenseListCatch(
+  fiber: Fiber,
+  newContext: SuspenseContext,
+): void {
+  // In this case we do want to handle catching suspending on the actual boundary itself.
+  // This is used for rows that are allowed to be hidden anyway.
+  push(suspenseHandlerStackCursor, fiber, fiber);
+  push(suspenseStackCursor, newContext, fiber);
+  if (shellBoundary === null) {
+    // We can contain the effects to hiding the current row.
+    shellBoundary = fiber;
+  }
+}
+
+export function popSuspenseListContext(fiber: Fiber): void {
+  pop(suspenseStackCursor, fiber);
+  pop(suspenseHandlerStackCursor, fiber);
+  if (shellBoundary === fiber) {
+    // Popping back into the shell.
+    shellBoundary = null;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberThenable.js b/packages/react-reconciler/src/ReactFiberThenable.js
new file mode 100644
index 00000000000..643be63ffa1
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberThenable.js
@@ -0,0 +1,373 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactIOInfo,
+} from 'shared/ReactTypes';
+
+import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
+
+import {callLazyInitInDEV} from './ReactFiberCallUserSpace';
+
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+import {enableAsyncDebugInfo} from 'shared/ReactFeatureFlags';
+
+import noop from 'shared/noop';
+
+opaque type ThenableStateDev = {
+  didWarnAboutUncachedPromise: boolean,
+  thenables: Array<Thenable<any>>,
+};
+
+opaque type ThenableStateProd = Array<Thenable<any>>;
+
+export opaque type ThenableState = ThenableStateDev | ThenableStateProd;
+
+function getThenablesFromState(state: ThenableState): Array<Thenable<any>> {
+  if (__DEV__) {
+    const devState: ThenableStateDev = (state: any);
+    return devState.thenables;
+  } else {
+    const prodState = (state: any);
+    return prodState;
+  }
+}
+
+// An error that is thrown (e.g. by `use`) to trigger Suspense. If we
+// detect this is caught by userspace, we'll log a warning in development.
+export const SuspenseException: mixed = new Error(
+  "Suspense Exception: This is not a real error! It's an implementation " +
+    'detail of `use` to interrupt the current render. You must either ' +
+    'rethrow it immediately, or move the `use` call outside of the ' +
+    '`try/catch` block. Capturing without rethrowing will lead to ' +
+    'unexpected behavior.\n\n' +
+    'To handle async errors, wrap your component in an error boundary, or ' +
+    "call the promise's `.catch` method and pass the result to `use`.",
+);
+
+export const SuspenseyCommitException: mixed = new Error(
+  'Suspense Exception: This is not a real error, and should not leak into ' +
+    "userspace. If you're seeing this, it's likely a bug in React.",
+);
+
+export const SuspenseActionException: mixed = new Error(
+  "Suspense Exception: This is not a real error! It's an implementation " +
+    'detail of `useActionState` to interrupt the current render. You must either ' +
+    'rethrow it immediately, or move the `useActionState` call outside of the ' +
+    '`try/catch` block. Capturing without rethrowing will lead to ' +
+    'unexpected behavior.\n\n' +
+    'To handle async errors, wrap your component in an error boundary.',
+);
+// This is a noop thenable that we use to trigger a fallback in throwException.
+// TODO: It would be better to refactor throwException into multiple functions
+// so we can trigger a fallback directly without having to check the type. But
+// for now this will do.
+export const noopSuspenseyCommitThenable = {
+  then() {
+    if (__DEV__) {
+      console.error(
+        'Internal React error: A listener was unexpectedly attached to a ' +
+          '"noop" thenable. This is a bug in React. Please file an issue.',
+      );
+    }
+  },
+};
+
+export function createThenableState(): ThenableState {
+  // The ThenableState is created the first time a component suspends. If it
+  // suspends again, we'll reuse the same state.
+  if (__DEV__) {
+    return {
+      didWarnAboutUncachedPromise: false,
+      thenables: [],
+    };
+  } else {
+    return [];
+  }
+}
+
+export function isThenableResolved(thenable: Thenable<mixed>): boolean {
+  const status = thenable.status;
+  return status === 'fulfilled' || status === 'rejected';
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+): T {
+  if (__DEV__ && ReactSharedInternals.actQueue !== null) {
+    ReactSharedInternals.didUsePromise = true;
+  }
+  const trackedThenables = getThenablesFromState(thenableState);
+  const previous = trackedThenables[index];
+  if (previous === undefined) {
+    trackedThenables.push(thenable);
+  } else {
+    if (previous !== thenable) {
+      // Reuse the previous thenable, and drop the new one. We can assume
+      // they represent the same value, because components are idempotent.
+
+      if (__DEV__) {
+        const thenableStateDev: ThenableStateDev = (thenableState: any);
+        if (!thenableStateDev.didWarnAboutUncachedPromise) {
+          // We should only warn the first time an uncached thenable is
+          // discovered per component, because if there are multiple, the
+          // subsequent ones are likely derived from the first.
+          //
+          // We track this on the thenableState instead of deduping using the
+          // component name like we usually do, because in the case of a
+          // promise-as-React-node, the owner component is likely different from
+          // the parent that's currently being reconciled. We'd have to track
+          // the owner using state, which we're trying to move away from. Though
+          // since this is dev-only, maybe that'd be OK.
+          //
+          // However, another benefit of doing it this way is we might
+          // eventually have a thenableState per memo/Forget boundary instead
+          // of per component, so this would allow us to have more
+          // granular warnings.
+          thenableStateDev.didWarnAboutUncachedPromise = true;
+
+          // TODO: This warning should link to a corresponding docs page.
+          console.error(
+            'A component was suspended by an uncached promise. Creating ' +
+              'promises inside a Client Component or hook is not yet ' +
+              'supported, except via a Suspense-compatible library or framework.',
+          );
+        }
+      }
+
+      // Avoid an unhandled rejection errors for the Promises that we'll
+      // intentionally ignore.
+      thenable.then(noop, noop);
+      thenable = previous;
+    }
+  }
+
+  if (__DEV__ && enableAsyncDebugInfo && thenable._debugInfo === undefined) {
+    // In DEV mode if the thenable that we observed had no debug info, then we add
+    // an inferred debug info so that we're able to track its potential I/O uniquely.
+    // We don't know the real start time since the I/O could have started much
+    // earlier and this could even be a cached Promise. Could be misleading.
+    const startTime = performance.now();
+    const displayName = thenable.displayName;
+    const ioInfo: ReactIOInfo = {
+      name: typeof displayName === 'string' ? displayName : 'Promise',
+      start: startTime,
+      end: startTime,
+      value: (thenable: any),
+      // We don't know the requesting owner nor stack.
+    };
+    // We can infer the await owner/stack lazily from where this promise ends up
+    // used. It can be used in more than one place so we can't assign it here.
+    thenable._debugInfo = [{awaited: ioInfo}];
+    // Track when we resolved the Promise as the approximate end time.
+    if (thenable.status !== 'fulfilled' && thenable.status !== 'rejected') {
+      const trackEndTime = () => {
+        // $FlowFixMe[cannot-write]
+        ioInfo.end = performance.now();
+      };
+      thenable.then(trackEndTime, trackEndTime);
+    }
+  }
+
+  // We use an expando to track the status and result of a thenable so that we
+  // can synchronously unwrap the value. Think of this as an extension of the
+  // Promise API, or a custom interface that is a superset of Thenable.
+  //
+  // If the thenable doesn't have a status, set it to "pending" and attach
+  // a listener that will update its status and result when it resolves.
+  switch (thenable.status) {
+    case 'fulfilled': {
+      const fulfilledValue: T = thenable.value;
+      return fulfilledValue;
+    }
+    case 'rejected': {
+      const rejectedError = thenable.reason;
+      checkIfUseWrappedInAsyncCatch(rejectedError);
+      throw rejectedError;
+    }
+    default: {
+      if (typeof thenable.status === 'string') {
+        // Only instrument the thenable if the status if not defined. If
+        // it's defined, but an unknown value, assume it's been instrumented by
+        // some custom userspace implementation. We treat it as "pending".
+        // Attach a dummy listener, to ensure that any lazy initialization can
+        // happen. Flight lazily parses JSON when the value is actually awaited.
+        thenable.then(noop, noop);
+      } else {
+        // This is an uncached thenable that we haven't seen before.
+
+        // Detect infinite ping loops caused by uncached promises.
+        const root = getWorkInProgressRoot();
+        if (root !== null && root.shellSuspendCounter > 100) {
+          // This root has suspended repeatedly in the shell without making any
+          // progress (i.e. committing something). This is highly suggestive of
+          // an infinite ping loop, often caused by an accidental Async Client
+          // Component.
+          //
+          // During a transition, we can suspend the work loop until the promise
+          // to resolve, but this is a sync render, so that's not an option. We
+          // also can't show a fallback, because none was provided. So our last
+          // resort is to throw an error.
+          //
+          // TODO: Remove this error in a future release. Other ways of handling
+          // this case include forcing a concurrent render, or putting the whole
+          // root into offscreen mode.
+          throw new Error(
+            'An unknown Component is an async Client Component. ' +
+              'Only Server Components can be async at the moment. ' +
+              'This error is often caused by accidentally ' +
+              "adding `'use client'` to a module that was originally written " +
+              'for the server.',
+          );
+        }
+
+        const pendingThenable: PendingThenable<T> = (thenable: any);
+        pendingThenable.status = 'pending';
+        pendingThenable.then(
+          fulfilledValue => {
+            if (thenable.status === 'pending') {
+              const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = fulfilledValue;
+            }
+          },
+          (error: mixed) => {
+            if (thenable.status === 'pending') {
+              const rejectedThenable: RejectedThenable<T> = (thenable: any);
+              rejectedThenable.status = 'rejected';
+              rejectedThenable.reason = error;
+            }
+          },
+        );
+      }
+
+      // Check one more time in case the thenable resolved synchronously.
+      switch ((thenable: Thenable<T>).status) {
+        case 'fulfilled': {
+          const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+          return fulfilledThenable.value;
+        }
+        case 'rejected': {
+          const rejectedThenable: RejectedThenable<T> = (thenable: any);
+          const rejectedError = rejectedThenable.reason;
+          checkIfUseWrappedInAsyncCatch(rejectedError);
+          throw rejectedError;
+        }
+      }
+
+      // Suspend.
+      //
+      // Throwing here is an implementation detail that allows us to unwind the
+      // call stack. But we shouldn't allow it to leak into userspace. Throw an
+      // opaque placeholder value instead of the actual thenable. If it doesn't
+      // get captured by the work loop, log a warning, because that means
+      // something in userspace must have caught it.
+      suspendedThenable = thenable;
+      if (__DEV__) {
+        needsToResetSuspendedThenableDEV = true;
+      }
+      throw SuspenseException;
+    }
+  }
+}
+
+export function suspendCommit(): void {
+  // This extra indirection only exists so it can handle passing
+  // noopSuspenseyCommitThenable through to throwException.
+  // TODO: Factor the thenable check out of throwException
+  suspendedThenable = noopSuspenseyCommitThenable;
+  throw SuspenseyCommitException;
+}
+
+export function resolveLazy<T>(lazyType: LazyComponentType<T, any>): T {
+  try {
+    if (__DEV__) {
+      return callLazyInitInDEV(lazyType);
+    }
+    const payload = lazyType._payload;
+    const init = lazyType._init;
+    return init(payload);
+  } catch (x) {
+    if (x !== null && typeof x === 'object' && typeof x.then === 'function') {
+      // This lazy Suspended. Treat this as if we called use() to unwrap it.
+      suspendedThenable = x;
+      if (__DEV__) {
+        needsToResetSuspendedThenableDEV = true;
+      }
+      throw SuspenseException;
+    }
+    throw x;
+  }
+}
+
+// This is used to track the actual thenable that suspended so it can be
+// passed to the rest of the Suspense implementation — which, for historical
+// reasons, expects to receive a thenable.
+let suspendedThenable: Thenable<any> | null = null;
+let needsToResetSuspendedThenableDEV = false;
+export function getSuspendedThenable(): Thenable<mixed> {
+  // This is called right after `use` suspends by throwing an exception. `use`
+  // throws an opaque value instead of the thenable itself so that it can't be
+  // caught in userspace. Then the work loop accesses the actual thenable using
+  // this function.
+  if (suspendedThenable === null) {
+    throw new Error(
+      'Expected a suspended thenable. This is a bug in React. Please file ' +
+        'an issue.',
+    );
+  }
+  const thenable = suspendedThenable;
+  suspendedThenable = null;
+  if (__DEV__) {
+    needsToResetSuspendedThenableDEV = false;
+  }
+  return thenable;
+}
+
+export function checkIfUseWrappedInTryCatch(): boolean {
+  if (__DEV__) {
+    // This was set right before SuspenseException was thrown, and it should
+    // have been cleared when the exception was handled. If it wasn't,
+    // it must have been caught by userspace.
+    if (needsToResetSuspendedThenableDEV) {
+      needsToResetSuspendedThenableDEV = false;
+      return true;
+    }
+  }
+  return false;
+}
+
+export function checkIfUseWrappedInAsyncCatch(rejectedReason: any) {
+  // This check runs in prod, too, because it prevents a more confusing
+  // downstream error, where SuspenseException is caught by a promise and
+  // thrown asynchronously.
+  // TODO: Another way to prevent SuspenseException from leaking into an async
+  // execution context is to check the dispatcher every time `use` is called,
+  // or some equivalent. That might be preferable for other reasons, too, since
+  // it matches how we prevent similar mistakes for other hooks.
+  if (
+    rejectedReason === SuspenseException ||
+    rejectedReason === SuspenseActionException
+  ) {
+    throw new Error(
+      'Hooks are not supported inside an async component. This ' +
+        "error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.',
+    );
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js
new file mode 100644
index 00000000000..d04bff34fae
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberThrow.js
@@ -0,0 +1,712 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from './ReactInternalTypes';
+import type {Lane, Lanes} from './ReactFiberLane';
+import type {CapturedValue} from './ReactCapturedValue';
+import type {Update} from './ReactFiberClassUpdateQueue';
+import type {Wakeable} from 'shared/ReactTypes';
+import type {
+  OffscreenQueue,
+  OffscreenState,
+} from './ReactFiberOffscreenComponent';
+import type {RetryQueue} from './ReactFiberSuspenseComponent';
+
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {
+  ClassComponent,
+  HostRoot,
+  IncompleteClassComponent,
+  IncompleteFunctionComponent,
+  FunctionComponent,
+  ForwardRef,
+  SimpleMemoComponent,
+  ActivityComponent,
+  SuspenseComponent,
+  OffscreenComponent,
+  SuspenseListComponent,
+} from './ReactWorkTags';
+import {
+  DidCapture,
+  Incomplete,
+  NoFlags,
+  ShouldCapture,
+  LifecycleEffectMask,
+  ForceUpdateForLegacySuspense,
+  ForceClientRender,
+  ScheduleRetry,
+} from './ReactFiberFlags';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
+import {
+  enableUpdaterTracking,
+  disableLegacyMode,
+} from 'shared/ReactFeatureFlags';
+import {createCapturedValueAtFiber} from './ReactCapturedValue';
+import {
+  enqueueCapturedUpdate,
+  createUpdate,
+  CaptureUpdate,
+  ForceUpdate,
+  enqueueUpdate,
+} from './ReactFiberClassUpdateQueue';
+import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading';
+import {
+  getShellBoundary,
+  getSuspenseHandler,
+} from './ReactFiberSuspenseContext';
+import {
+  renderDidError,
+  queueConcurrentError,
+  renderDidSuspendDelayIfPossible,
+  markLegacyErrorBoundaryAsFailed,
+  isAlreadyFailedLegacyErrorBoundary,
+  attachPingListener,
+  restorePendingUpdaters,
+  renderDidSuspend,
+} from './ReactFiberWorkLoop';
+import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext';
+import {logUncaughtError, logCaughtError} from './ReactFiberErrorLogger';
+import {isDevToolsPresent} from './ReactFiberDevToolsHook';
+import {
+  SyncLane,
+  includesSomeLane,
+  mergeLanes,
+  pickArbitraryLane,
+} from './ReactFiberLane';
+import {
+  getIsHydrating,
+  markDidThrowWhileHydratingDEV,
+  queueHydrationError,
+  HydrationMismatchException,
+} from './ReactFiberHydrationContext';
+import {ConcurrentRoot} from './ReactRootTags';
+import {noopSuspenseyCommitThenable} from './ReactFiberThenable';
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+import {callComponentDidCatchInDEV} from './ReactFiberCallUserSpace';
+
+function createRootErrorUpdate(
+  root: FiberRoot,
+  errorInfo: CapturedValue<mixed>,
+  lane: Lane,
+): Update<mixed> {
+  const update = createUpdate(lane);
+  // Unmount the root by rendering null.
+  update.tag = CaptureUpdate;
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  update.payload = {element: null};
+  update.callback = () => {
+    if (__DEV__) {
+      runWithFiberInDEV(errorInfo.source, logUncaughtError, root, errorInfo);
+    } else {
+      logUncaughtError(root, errorInfo);
+    }
+  };
+  return update;
+}
+
+function createClassErrorUpdate(lane: Lane): Update<mixed> {
+  const update = createUpdate(lane);
+  update.tag = CaptureUpdate;
+  return update;
+}
+
+function initializeClassErrorUpdate(
+  update: Update<mixed>,
+  root: FiberRoot,
+  fiber: Fiber,
+  errorInfo: CapturedValue<mixed>,
+): void {
+  const getDerivedStateFromError = fiber.type.getDerivedStateFromError;
+  if (typeof getDerivedStateFromError === 'function') {
+    const error = errorInfo.value;
+    update.payload = () => {
+      return getDerivedStateFromError(error);
+    };
+    update.callback = () => {
+      if (__DEV__) {
+        markFailedErrorBoundaryForHotReloading(fiber);
+      }
+      if (__DEV__) {
+        runWithFiberInDEV(
+          errorInfo.source,
+          logCaughtError,
+          root,
+          fiber,
+          errorInfo,
+        );
+      } else {
+        logCaughtError(root, fiber, errorInfo);
+      }
+    };
+  }
+
+  const inst = fiber.stateNode;
+  if (inst !== null && typeof inst.componentDidCatch === 'function') {
+    // $FlowFixMe[missing-this-annot]
+    update.callback = function callback() {
+      if (__DEV__) {
+        markFailedErrorBoundaryForHotReloading(fiber);
+      }
+      if (__DEV__) {
+        runWithFiberInDEV(
+          errorInfo.source,
+          logCaughtError,
+          root,
+          fiber,
+          errorInfo,
+        );
+      } else {
+        logCaughtError(root, fiber, errorInfo);
+      }
+      if (typeof getDerivedStateFromError !== 'function') {
+        // To preserve the preexisting retry behavior of error boundaries,
+        // we keep track of which ones already failed during this batch.
+        // This gets reset before we yield back to the browser.
+        // TODO: Warn in strict mode if getDerivedStateFromError is
+        // not defined.
+        markLegacyErrorBoundaryAsFailed(this);
+      }
+      if (__DEV__) {
+        callComponentDidCatchInDEV(this, errorInfo);
+      } else {
+        const error = errorInfo.value;
+        const stack = errorInfo.stack;
+        this.componentDidCatch(error, {
+          componentStack: stack !== null ? stack : '',
+        });
+      }
+      if (__DEV__) {
+        if (typeof getDerivedStateFromError !== 'function') {
+          // 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.
+          if (!includesSomeLane(fiber.lanes, (SyncLane: Lane))) {
+            console.error(
+              '%s: Error boundaries should implement getDerivedStateFromError(). ' +
+                'In that method, return a state update to display an error message or fallback UI.',
+              getComponentNameFromFiber(fiber) || 'Unknown',
+            );
+          }
+        }
+      }
+    };
+  }
+}
+
+function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
+  const currentSourceFiber = sourceFiber.alternate;
+  if (currentSourceFiber !== null) {
+    // Since we never visited the children of the suspended component, we
+    // need to propagate the context change now, to ensure that we visit
+    // them during the retry.
+    //
+    // We don't have to do this for errors because we retry errors without
+    // committing in between. So this is specific to Suspense.
+    propagateParentContextChangesToDeferredTree(
+      currentSourceFiber,
+      sourceFiber,
+      rootRenderLanes,
+    );
+  }
+
+  // Reset the memoizedState to what it was before we attempted to render it.
+  // A legacy mode Suspense quirk, only relevant to hook components.
+  const tag = sourceFiber.tag;
+  if (
+    !disableLegacyMode &&
+    (sourceFiber.mode & ConcurrentMode) === NoMode &&
+    (tag === FunctionComponent ||
+      tag === ForwardRef ||
+      tag === SimpleMemoComponent)
+  ) {
+    const currentSource = sourceFiber.alternate;
+    if (currentSource) {
+      sourceFiber.updateQueue = currentSource.updateQueue;
+      sourceFiber.memoizedState = currentSource.memoizedState;
+      sourceFiber.lanes = currentSource.lanes;
+    } else {
+      sourceFiber.updateQueue = null;
+      sourceFiber.memoizedState = null;
+    }
+  }
+}
+
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber | null,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  // This marks a Suspense boundary so that when we're unwinding the stack,
+  // it captures the suspended "exception" and does a second (fallback) pass.
+  if (
+    !disableLegacyMode &&
+    (suspenseBoundary.mode & ConcurrentMode) === NoMode
+  ) {
+    // Legacy Mode Suspense
+    //
+    // If the boundary is in legacy mode, we should *not*
+    // suspend the commit. Pretend as if the suspended component rendered
+    // null and keep rendering. When the Suspense boundary completes,
+    // we'll do a second pass to render the fallback.
+    if (suspenseBoundary === returnFiber) {
+      // Special case where we suspended while reconciling the children of
+      // a Suspense boundary's inner Offscreen wrapper fiber. This happens
+      // when a React.lazy component is a direct child of a
+      // Suspense boundary.
+      //
+      // Suspense boundaries are implemented as multiple fibers, but they
+      // are a single conceptual unit. The legacy mode behavior where we
+      // pretend the suspended fiber committed as `null` won't work,
+      // because in this case the "suspended" fiber is the inner
+      // Offscreen wrapper.
+      //
+      // Because the contents of the boundary haven't started rendering
+      // yet (i.e. nothing in the tree has partially rendered) we can
+      // switch to the regular, concurrent mode behavior: mark the
+      // boundary with ShouldCapture and enter the unwind phase.
+      suspenseBoundary.flags |= ShouldCapture;
+    } else {
+      suspenseBoundary.flags |= DidCapture;
+      sourceFiber.flags |= ForceUpdateForLegacySuspense;
+
+      // We're going to commit this fiber even though it didn't complete.
+      // But we shouldn't call any lifecycle methods or callbacks. Remove
+      // all lifecycle effect tags.
+      sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
+
+      if (sourceFiber.tag === ClassComponent) {
+        const currentSourceFiber = sourceFiber.alternate;
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed class component. For example, we should not call
+          // componentWillUnmount if it is deleted.
+          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 update to
+          // prevent a bail out.
+          const update = createUpdate(SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, SyncLane);
+        }
+      } else if (sourceFiber.tag === FunctionComponent) {
+        const currentSourceFiber = sourceFiber.alternate;
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed function component.
+          sourceFiber.tag = IncompleteFunctionComponent;
+        }
+      }
+
+      // The source fiber did not complete. Mark it with Sync priority to
+      // indicate that it still has pending work.
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+    }
+    return suspenseBoundary;
+  }
+  // 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.
+
+  // 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. Transitions apply
+  // 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.
+  suspenseBoundary.flags |= ShouldCapture;
+  // TODO: I think we can remove this, since we now use `DidCapture` in
+  // the begin phase to prevent an early bailout.
+  suspenseBoundary.lanes = rootRenderLanes;
+  return suspenseBoundary;
+}
+
+function throwException(
+  root: FiberRoot,
+  returnFiber: Fiber | null,
+  sourceFiber: Fiber,
+  value: mixed,
+  rootRenderLanes: Lanes,
+): boolean {
+  // The source fiber did not complete.
+  sourceFiber.flags |= Incomplete;
+
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      // If we have pending work still, restore the original updaters
+      restorePendingUpdaters(root, rootRenderLanes);
+    }
+  }
+
+  if (value !== null && typeof value === 'object') {
+    if (typeof value.then === 'function') {
+      // This is a wakeable. The component suspended.
+      const wakeable: Wakeable = (value: any);
+      resetSuspendedComponent(sourceFiber, rootRenderLanes);
+
+      if (__DEV__) {
+        if (
+          getIsHydrating() &&
+          (disableLegacyMode || sourceFiber.mode & ConcurrentMode)
+        ) {
+          markDidThrowWhileHydratingDEV();
+        }
+      }
+
+      // Mark the nearest Suspense boundary to switch to rendering a fallback.
+      const suspenseBoundary = getSuspenseHandler();
+      if (suspenseBoundary !== null) {
+        switch (suspenseBoundary.tag) {
+          case ActivityComponent:
+          case SuspenseComponent:
+          case SuspenseListComponent: {
+            // If this suspense/activity boundary is not already showing a fallback, mark
+            // the in-progress render as suspended. We try to perform this logic
+            // as soon as soon as possible during the render phase, so the work
+            // loop can know things like whether it's OK to switch to other tasks,
+            // or whether it can wait for data to resolve before continuing.
+            // TODO: Most of these checks are already performed when entering a
+            // Suspense boundary. We should track the information on the stack so
+            // we don't have to recompute it on demand. This would also allow us
+            // to unify with `use` which needs to perform this logic even sooner,
+            // before `throwException` is called.
+            if (disableLegacyMode || sourceFiber.mode & ConcurrentMode) {
+              if (getShellBoundary() === null) {
+                // Suspended in the "shell" of the app. This is an undesirable
+                // loading state. We should avoid committing this tree.
+                renderDidSuspendDelayIfPossible();
+              } else {
+                // If we suspended deeper than the shell, we don't need to delay
+                // the commmit. However, we still call renderDidSuspend if this is
+                // a new boundary, to tell the work loop that a new fallback has
+                // appeared during this render.
+                // TODO: Theoretically we should be able to delete this branch.
+                // It's currently used for two things: 1) to throttle the
+                // appearance of successive loading states, and 2) in
+                // SuspenseList, to determine whether the children include any
+                // pending fallbacks. For 1, we should apply throttling to all
+                // retries, not just ones that render an additional fallback. For
+                // 2, we should check subtreeFlags instead. Then we can delete
+                // this branch.
+                const current = suspenseBoundary.alternate;
+                if (current === null) {
+                  renderDidSuspend();
+                }
+              }
+            }
+
+            suspenseBoundary.flags &= ~ForceClientRender;
+            markSuspenseBoundaryShouldCapture(
+              suspenseBoundary,
+              returnFiber,
+              sourceFiber,
+              root,
+              rootRenderLanes,
+            );
+            // Retry listener
+            //
+            // If the fallback does commit, we need to attach a different type of
+            // listener. This one schedules an update on the Suspense boundary to
+            // turn the fallback state off.
+            //
+            // Stash the wakeable on the boundary fiber so we can access it in the
+            // commit phase.
+            //
+            // When the wakeable resolves, we'll attempt to render the boundary
+            // again ("retry").
+
+            // Check if this is a Suspensey resource. We do not attach retry
+            // listeners to these, because we don't actually need them for
+            // rendering. Only for committing. Instead, if a fallback commits
+            // and the only thing that suspended was a Suspensey resource, we
+            // retry immediately.
+            // TODO: Refactor throwException so that we don't have to do this type
+            // check. The caller already knows what the cause was.
+            const isSuspenseyResource =
+              wakeable === noopSuspenseyCommitThenable;
+            if (isSuspenseyResource) {
+              suspenseBoundary.flags |= ScheduleRetry;
+            } else {
+              const retryQueue: RetryQueue | null =
+                (suspenseBoundary.updateQueue: any);
+              if (retryQueue === null) {
+                suspenseBoundary.updateQueue = new Set([wakeable]);
+              } else {
+                retryQueue.add(wakeable);
+              }
+
+              // We only attach ping listeners in concurrent mode. Legacy
+              // Suspense always commits fallbacks synchronously, so there are
+              // no pings.
+              if (disableLegacyMode || suspenseBoundary.mode & ConcurrentMode) {
+                attachPingListener(root, wakeable, rootRenderLanes);
+              }
+            }
+            return false;
+          }
+          case OffscreenComponent: {
+            if (disableLegacyMode || suspenseBoundary.mode & ConcurrentMode) {
+              suspenseBoundary.flags |= ShouldCapture;
+              const isSuspenseyResource =
+                wakeable === noopSuspenseyCommitThenable;
+              if (isSuspenseyResource) {
+                suspenseBoundary.flags |= ScheduleRetry;
+              } else {
+                const offscreenQueue: OffscreenQueue | null =
+                  (suspenseBoundary.updateQueue: any);
+                if (offscreenQueue === null) {
+                  const newOffscreenQueue: OffscreenQueue = {
+                    transitions: null,
+                    markerInstances: null,
+                    retryQueue: new Set([wakeable]),
+                  };
+                  suspenseBoundary.updateQueue = newOffscreenQueue;
+                } else {
+                  const retryQueue = offscreenQueue.retryQueue;
+                  if (retryQueue === null) {
+                    offscreenQueue.retryQueue = new Set([wakeable]);
+                  } else {
+                    retryQueue.add(wakeable);
+                  }
+                }
+
+                attachPingListener(root, wakeable, rootRenderLanes);
+              }
+              return false;
+            }
+          }
+        }
+        throw new Error(
+          `Unexpected Suspense handler tag (${suspenseBoundary.tag}). This ` +
+            'is a bug in React.',
+        );
+      } else {
+        // No boundary was found. Unless this is a sync update, this is OK.
+        // We can suspend and wait for more data to arrive.
+
+        if (disableLegacyMode || root.tag === ConcurrentRoot) {
+          // In a concurrent root, suspending without a Suspense boundary is
+          // allowed. It will suspend indefinitely without committing.
+          //
+          // TODO: Should we have different behavior for discrete updates? What
+          // about flushSync? Maybe it should put the tree into an inert state,
+          // and potentially log a warning. Revisit this for a future release.
+          attachPingListener(root, wakeable, rootRenderLanes);
+          renderDidSuspendDelayIfPossible();
+          return false;
+        } else {
+          // In a legacy root, suspending without a boundary is always an error.
+          const uncaughtSuspenseError = new Error(
+            'A component suspended while responding to synchronous input. This ' +
+              'will cause the UI to be replaced with a loading indicator. To ' +
+              'fix, updates that suspend should be wrapped ' +
+              'with startTransition.',
+          );
+          value = uncaughtSuspenseError;
+        }
+      }
+    }
+  }
+
+  // This is a regular error, not a Suspense wakeable.
+  if (
+    getIsHydrating() &&
+    (disableLegacyMode || sourceFiber.mode & ConcurrentMode)
+  ) {
+    markDidThrowWhileHydratingDEV();
+    const hydrationBoundary = getSuspenseHandler();
+    // If the error was thrown during hydration, we may be able to recover by
+    // discarding the dehydrated content and switching to a client render.
+    // Instead of surfacing the error, find the nearest Suspense boundary
+    // and render it again without hydration.
+    if (hydrationBoundary !== null) {
+      if (__DEV__) {
+        if (hydrationBoundary.tag === SuspenseListComponent) {
+          console.error(
+            'SuspenseList should never catch while hydrating. This is a bug in React.',
+          );
+        }
+      }
+      if ((hydrationBoundary.flags & ShouldCapture) === NoFlags) {
+        // Set a flag to indicate that we should try rendering the normal
+        // children again, not the fallback.
+        hydrationBoundary.flags |= ForceClientRender;
+      }
+      markSuspenseBoundaryShouldCapture(
+        hydrationBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
+
+      // Even though the user may not be affected by this error, we should
+      // still log it so it can be fixed.
+      if (value !== HydrationMismatchException) {
+        const wrapperError = new Error(
+          'There was an error while hydrating but React was able to recover by ' +
+            'instead client rendering from the nearest Suspense boundary.',
+          {cause: value},
+        );
+        queueHydrationError(
+          createCapturedValueAtFiber(wrapperError, sourceFiber),
+        );
+      }
+      return false;
+    } else {
+      if (value !== HydrationMismatchException) {
+        const wrapperError = new Error(
+          'There was an error while hydrating but React was able to recover by ' +
+            'instead client rendering the entire root.',
+          {cause: value},
+        );
+        queueHydrationError(
+          createCapturedValueAtFiber(wrapperError, sourceFiber),
+        );
+      }
+      const workInProgress: Fiber = (root.current: any).alternate;
+      // Schedule an update at the root to log the error but this shouldn't
+      // actually happen because we should recover.
+      workInProgress.flags |= ShouldCapture;
+      const lane = pickArbitraryLane(rootRenderLanes);
+      workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
+      const rootErrorInfo = createCapturedValueAtFiber(value, sourceFiber);
+      const update = createRootErrorUpdate(
+        workInProgress.stateNode,
+        rootErrorInfo, // This should never actually get logged due to the recovery.
+        lane,
+      );
+      enqueueCapturedUpdate(workInProgress, update);
+      renderDidError();
+      return false;
+    }
+  } else {
+    // Otherwise, fall through to the error path.
+  }
+
+  const wrapperError = new Error(
+    'There was an error during concurrent rendering but React was able to recover by ' +
+      'instead synchronously rendering the entire root.',
+    {cause: value},
+  );
+  queueConcurrentError(createCapturedValueAtFiber(wrapperError, sourceFiber));
+  renderDidError();
+
+  // We didn't find a boundary that could handle this type of exception. Start
+  // over and traverse parent path again, this time treating the exception
+  // as an error.
+
+  if (returnFiber === null) {
+    // There's no return fiber, which means the root errored. This should never
+    // happen. Return `true` to trigger a fatal error (panic).
+    return true;
+  }
+
+  const errorInfo = createCapturedValueAtFiber(value, sourceFiber);
+  let workInProgress: Fiber = returnFiber;
+  do {
+    switch (workInProgress.tag) {
+      case HostRoot: {
+        workInProgress.flags |= ShouldCapture;
+        const lane = pickArbitraryLane(rootRenderLanes);
+        workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
+        const update = createRootErrorUpdate(
+          workInProgress.stateNode,
+          errorInfo,
+          lane,
+        );
+        enqueueCapturedUpdate(workInProgress, update);
+        return false;
+      }
+      case ClassComponent:
+        // Capture and retry
+        const ctor = workInProgress.type;
+        const instance = workInProgress.stateNode;
+        if (
+          (workInProgress.flags & DidCapture) === NoFlags &&
+          (typeof ctor.getDerivedStateFromError === 'function' ||
+            (instance !== null &&
+              typeof instance.componentDidCatch === 'function' &&
+              !isAlreadyFailedLegacyErrorBoundary(instance)))
+        ) {
+          workInProgress.flags |= ShouldCapture;
+          const lane = pickArbitraryLane(rootRenderLanes);
+          workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
+          // Schedule the error boundary to re-render using updated state
+          const update = createClassErrorUpdate(lane);
+          initializeClassErrorUpdate(update, root, workInProgress, errorInfo);
+          enqueueCapturedUpdate(workInProgress, update);
+          return false;
+        }
+        break;
+      case OffscreenComponent: {
+        const offscreenState: OffscreenState | null =
+          (workInProgress.memoizedState: any);
+        if (offscreenState !== null) {
+          // An error was thrown inside a hidden Offscreen boundary. This should
+          // not be allowed to escape into the visible part of the UI. Mark the
+          // boundary with ShouldCapture to abort the ongoing prerendering
+          // attempt. This is the same flag would be set if something were to
+          // suspend. It will be cleared the next time the boundary
+          // is attempted.
+          workInProgress.flags |= ShouldCapture;
+          return false;
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    // $FlowFixMe[incompatible-type] we bail out when we get a null
+    workInProgress = workInProgress.return;
+  } while (workInProgress !== null);
+
+  return false;
+}
+
+export {
+  throwException,
+  createRootErrorUpdate,
+  createClassErrorUpdate,
+  initializeClassErrorUpdate,
+};
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js
new file mode 100644
index 00000000000..a54025294bb
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js
@@ -0,0 +1,276 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  TransitionTracingCallbacks,
+  Fiber,
+  FiberRoot,
+} from './ReactInternalTypes';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+import type {StackCursor} from './ReactFiberStack';
+
+import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
+import {createCursor, push, pop} from './ReactFiberStack';
+import {getWorkInProgressTransitions} from './ReactFiberWorkLoop';
+
+export type SuspenseInfo = {name: string | null};
+
+export type PendingTransitionCallbacks = {
+  transitionStart: Array<Transition> | null,
+  transitionProgress: Map<Transition, PendingBoundaries> | null,
+  transitionComplete: Array<Transition> | null,
+  markerProgress: Map<
+    string,
+    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
+  > | null,
+  markerIncomplete: Map<
+    string,
+    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
+  > | null,
+  markerComplete: Map<string, Set<Transition>> | null,
+};
+
+// TODO: Is there a way to not include the tag or name here?
+export type TracingMarkerInstance = {
+  tag?: TracingMarkerTag,
+  transitions: Set<Transition> | null,
+  pendingBoundaries: PendingBoundaries | null,
+  aborts: Array<TransitionAbort> | null,
+  name: string | null,
+};
+
+export type TransitionAbort = {
+  reason: 'error' | 'unknown' | 'marker' | 'suspense',
+  name?: string | null,
+};
+
+export const TransitionRoot = 0;
+export const TransitionTracingMarker = 1;
+export type TracingMarkerTag = 0 | 1;
+
+export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
+
+export function processTransitionCallbacks(
+  pendingTransitions: PendingTransitionCallbacks,
+  endTime: number,
+  callbacks: TransitionTracingCallbacks,
+): void {
+  if (enableTransitionTracing) {
+    if (pendingTransitions !== null) {
+      const transitionStart = pendingTransitions.transitionStart;
+      const onTransitionStart = callbacks.onTransitionStart;
+      if (transitionStart !== null && onTransitionStart != null) {
+        transitionStart.forEach(transition => {
+          if (transition.name != null) {
+            onTransitionStart(transition.name, transition.startTime);
+          }
+        });
+      }
+
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach((markerInstance, markerName) => {
+          if (markerInstance.transitions !== null) {
+            // TODO: Clone the suspense object so users can't modify it
+            const pending =
+              markerInstance.pendingBoundaries !== null
+                ? Array.from(markerInstance.pendingBoundaries.values())
+                : [];
+            markerInstance.transitions.forEach(transition => {
+              if (transition.name != null) {
+                onMarkerProgress(
+                  transition.name,
+                  markerName,
+                  transition.startTime,
+                  endTime,
+                  pending,
+                );
+              }
+            });
+          }
+        });
+      }
+
+      const markerComplete = pendingTransitions.markerComplete;
+      const onMarkerComplete = callbacks.onMarkerComplete;
+      if (markerComplete !== null && onMarkerComplete != null) {
+        markerComplete.forEach((transitions, markerName) => {
+          transitions.forEach(transition => {
+            if (transition.name != null) {
+              onMarkerComplete(
+                transition.name,
+                markerName,
+                transition.startTime,
+                endTime,
+              );
+            }
+          });
+        });
+      }
+
+      const markerIncomplete = pendingTransitions.markerIncomplete;
+      const onMarkerIncomplete = callbacks.onMarkerIncomplete;
+      if (onMarkerIncomplete != null && markerIncomplete !== null) {
+        markerIncomplete.forEach(({transitions, aborts}, markerName) => {
+          transitions.forEach(transition => {
+            const filteredAborts = [];
+            aborts.forEach(abort => {
+              switch (abort.reason) {
+                case 'marker': {
+                  filteredAborts.push({
+                    type: 'marker',
+                    name: abort.name,
+                    endTime,
+                  });
+                  break;
+                }
+                case 'suspense': {
+                  filteredAborts.push({
+                    type: 'suspense',
+                    name: abort.name,
+                    endTime,
+                  });
+                  break;
+                }
+                default: {
+                  break;
+                }
+              }
+            });
+
+            if (filteredAborts.length > 0) {
+              if (transition.name != null) {
+                onMarkerIncomplete(
+                  transition.name,
+                  markerName,
+                  transition.startTime,
+                  filteredAborts,
+                );
+              }
+            }
+          });
+        });
+      }
+
+      const transitionProgress = pendingTransitions.transitionProgress;
+      const onTransitionProgress = callbacks.onTransitionProgress;
+      if (onTransitionProgress != null && transitionProgress !== null) {
+        transitionProgress.forEach((pending, transition) => {
+          if (transition.name != null) {
+            onTransitionProgress(
+              transition.name,
+              transition.startTime,
+              endTime,
+              Array.from(pending.values()),
+            );
+          }
+        });
+      }
+
+      const transitionComplete = pendingTransitions.transitionComplete;
+      const onTransitionComplete = callbacks.onTransitionComplete;
+      if (transitionComplete !== null && onTransitionComplete != null) {
+        transitionComplete.forEach(transition => {
+          if (transition.name != null) {
+            onTransitionComplete(
+              transition.name,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+    }
+  }
+}
+
+// For every tracing marker, store a pointer to it. We will later access it
+// to get the set of suspense boundaries that need to resolve before the
+// tracing marker can be logged as complete
+// This code lives separate from the ReactFiberTransition code because
+// we push and pop on the tracing marker, not the suspense boundary
+const markerInstanceStack: StackCursor<Array<TracingMarkerInstance> | null> =
+  createCursor(null);
+
+export function pushRootMarkerInstance(workInProgress: Fiber): void {
+  if (enableTransitionTracing) {
+    // On the root, every transition gets mapped to it's own map of
+    // suspense boundaries. The transition is marked as complete when
+    // the suspense boundaries map is empty. We do this because every
+    // transition completes at different times and depends on different
+    // suspense boundaries to complete. We store all the transitions
+    // along with its map of suspense boundaries in the root incomplete
+    // transitions map. Each entry in this map functions like a tracing
+    // marker does, so we can push it onto the marker instance stack
+    const transitions = getWorkInProgressTransitions();
+    const root: FiberRoot = workInProgress.stateNode;
+
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        if (!root.incompleteTransitions.has(transition)) {
+          const markerInstance: TracingMarkerInstance = {
+            tag: TransitionRoot,
+            transitions: new Set([transition]),
+            pendingBoundaries: null,
+            aborts: null,
+            name: null,
+          };
+          root.incompleteTransitions.set(transition, markerInstance);
+        }
+      });
+    }
+
+    const markerInstances = [];
+    // For ever transition on the suspense boundary, we push the transition
+    // along with its map of pending suspense boundaries onto the marker
+    // instance stack.
+    root.incompleteTransitions.forEach(markerInstance => {
+      markerInstances.push(markerInstance);
+    });
+    push(markerInstanceStack, markerInstances, workInProgress);
+  }
+}
+
+export function popRootMarkerInstance(workInProgress: Fiber) {
+  if (enableTransitionTracing) {
+    pop(markerInstanceStack, workInProgress);
+  }
+}
+
+export function pushMarkerInstance(
+  workInProgress: Fiber,
+  markerInstance: TracingMarkerInstance,
+): void {
+  if (enableTransitionTracing) {
+    if (markerInstanceStack.current === null) {
+      push(markerInstanceStack, [markerInstance], workInProgress);
+    } else {
+      push(
+        markerInstanceStack,
+        markerInstanceStack.current.concat(markerInstance),
+        workInProgress,
+      );
+    }
+  }
+}
+
+export function popMarkerInstance(workInProgress: Fiber): void {
+  if (enableTransitionTracing) {
+    pop(markerInstanceStack, workInProgress);
+  }
+}
+
+export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
+  if (enableTransitionTracing) {
+    return markerInstanceStack.current;
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberTransition.js b/packages/react-reconciler/src/ReactFiberTransition.js
new file mode 100644
index 00000000000..180a09b3659
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTransition.js
@@ -0,0 +1,353 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from './ReactInternalTypes';
+import type {
+  Thenable,
+  GestureProvider,
+  GestureOptions,
+} from 'shared/ReactTypes';
+import {NoLane, type Lanes} from './ReactFiberLane';
+import type {StackCursor} from './ReactFiberStack';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {ScheduledGesture} from './ReactFiberGestureScheduler';
+
+import {
+  enableTransitionTracing,
+  enableViewTransition,
+  enableGestureTransition,
+} from 'shared/ReactFeatureFlags';
+import {isPrimaryRenderer} from './ReactFiberConfig';
+import {createCursor, push, pop} from './ReactFiberStack';
+import {
+  getWorkInProgressRoot,
+  getWorkInProgressTransitions,
+  markTransitionStarted,
+} from './ReactFiberWorkLoop';
+import {
+  createCache,
+  retainCache,
+  CacheContext,
+} from './ReactFiberCacheComponent';
+import {
+  queueTransitionTypes,
+  entangleAsyncTransitionTypes,
+  entangledTransitionTypes,
+} from './ReactFiberTransitionTypes';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  entangleAsyncAction,
+  peekEntangledActionLane,
+} from './ReactFiberAsyncAction';
+import {startAsyncTransitionTimer} from './ReactProfilerTimer';
+import {firstScheduledRoot} from './ReactFiberRootScheduler';
+import {
+  startScheduledGesture,
+  cancelScheduledGesture,
+} from './ReactFiberGestureScheduler';
+
+export const NoTransition = null;
+
+// Attach this reconciler instance's onStartTransitionFinish implementation to
+// the shared internals object. This is used by the isomorphic implementation of
+// startTransition to compose all the startTransitions together.
+//
+//   function startTransition(fn) {
+//     return startTransitionDOM(() => {
+//       return startTransitionART(() => {
+//         return startTransitionThreeFiber(() => {
+//           // and so on...
+//           return fn();
+//         });
+//       });
+//     });
+//   }
+//
+// Currently we only compose together the code that runs at the end of each
+// startTransition, because for now that's sufficient — the part that sets
+// isTransition=true on the stack uses a separate shared internal field. But
+// really we should delete the shared field and track isTransition per
+// reconciler. Leaving this for a future PR.
+const prevOnStartTransitionFinish = ReactSharedInternals.S;
+ReactSharedInternals.S = function onStartTransitionFinishForReconciler(
+  transition: Transition,
+  returnValue: mixed,
+) {
+  markTransitionStarted();
+  if (
+    typeof returnValue === 'object' &&
+    returnValue !== null &&
+    typeof returnValue.then === 'function'
+  ) {
+    // If we're going to wait on some async work before scheduling an update.
+    // We mark the time so we can later log how long we were blocked on the Action.
+    // Ideally, we'd include the sync part of the action too but since that starts
+    // in isomorphic code it currently leads to tricky layering. We'd have to pass
+    // in performance.now() to this callback but we sometimes use a polyfill.
+    startAsyncTransitionTimer();
+
+    // This is an async action
+    const thenable: Thenable<mixed> = (returnValue: any);
+    entangleAsyncAction(transition, thenable);
+  }
+  if (enableViewTransition) {
+    if (entangledTransitionTypes !== null) {
+      // If we scheduled work on any new roots, we need to add any entangled async
+      // transition types to those roots too.
+      let root = firstScheduledRoot;
+      while (root !== null) {
+        queueTransitionTypes(root, entangledTransitionTypes);
+        root = root.next;
+      }
+    }
+    const transitionTypes = transition.types;
+    if (transitionTypes !== null) {
+      // Within this Transition we should've now scheduled any roots we have updates
+      // to work on. If there are no updates on a root, then the Transition type won't
+      // be applied to that root.
+      let root = firstScheduledRoot;
+      while (root !== null) {
+        queueTransitionTypes(root, transitionTypes);
+        root = root.next;
+      }
+      if (peekEntangledActionLane() !== NoLane) {
+        // If we have entangled, async actions going on, the update associated with
+        // these types might come later. We need to save them for later.
+        entangleAsyncTransitionTypes(transitionTypes);
+      }
+    }
+  }
+  if (prevOnStartTransitionFinish !== null) {
+    prevOnStartTransitionFinish(transition, returnValue);
+  }
+};
+
+function chainGestureCancellation(
+  root: FiberRoot,
+  scheduledGesture: ScheduledGesture,
+  prevCancel: null | (() => void),
+): () => void {
+  return function cancelGesture(): void {
+    if (scheduledGesture !== null) {
+      cancelScheduledGesture(root, scheduledGesture);
+    }
+    if (prevCancel !== null) {
+      prevCancel();
+    }
+  };
+}
+
+if (enableGestureTransition) {
+  const prevOnStartGestureTransitionFinish = ReactSharedInternals.G;
+  ReactSharedInternals.G = function onStartGestureTransitionFinishForReconciler(
+    transition: Transition,
+    provider: GestureProvider,
+    options: ?GestureOptions,
+  ): () => void {
+    let cancel = null;
+    if (prevOnStartGestureTransitionFinish !== null) {
+      cancel = prevOnStartGestureTransitionFinish(
+        transition,
+        provider,
+        options,
+      );
+    }
+    // For every root that has work scheduled, check if there's a ScheduledGesture
+    // matching this provider and if so, increase its ref count so its retained by
+    // this cancellation callback. We could add the roots to a temporary array as
+    // we schedule them inside the callback to keep track of them. There's a slight
+    // nuance here which is that if there's more than one root scheduled with the
+    // same provider, but it doesn't update in this callback, then we still update
+    // its options and retain it until this cancellation releases. The idea being
+    // that it's conceptually started globally.
+    let root = firstScheduledRoot;
+    while (root !== null) {
+      const scheduledGesture = startScheduledGesture(
+        root,
+        provider,
+        options,
+        transition.types,
+      );
+      if (scheduledGesture !== null) {
+        cancel = chainGestureCancellation(root, scheduledGesture, cancel);
+      }
+      root = root.next;
+    }
+    if (cancel !== null) {
+      return cancel;
+    }
+    return function cancelGesture(): void {
+      // Nothing was scheduled but it could've been scheduled by another renderer.
+    };
+  };
+}
+
+export function requestCurrentTransition(): Transition | null {
+  return ReactSharedInternals.T;
+}
+
+// When retrying a Suspense/Offscreen boundary, we restore the cache that was
+// used during the previous render by placing it here, on the stack.
+const resumedCache: StackCursor<Cache | null> = createCursor(null);
+
+// During the render/synchronous commit phase, we don't actually process the
+// transitions. Therefore, we want to lazily combine transitions. Instead of
+// comparing the arrays of transitions when we combine them and storing them
+// and filtering out the duplicates, we will instead store the unprocessed transitions
+// in an array and actually filter them in the passive phase.
+const transitionStack: StackCursor<Array<Transition> | null> =
+  createCursor(null);
+
+function peekCacheFromPool(): Cache | null {
+  // Check if the cache pool already has a cache we can use.
+
+  // If we're rendering inside a Suspense boundary that is currently hidden,
+  // we should use the same cache that we used during the previous render, if
+  // one exists.
+  const cacheResumedFromPreviousRender = resumedCache.current;
+  if (cacheResumedFromPreviousRender !== null) {
+    return cacheResumedFromPreviousRender;
+  }
+
+  // Otherwise, check the root's cache pool.
+  const root = (getWorkInProgressRoot(): any);
+  const cacheFromRootCachePool = root.pooledCache;
+
+  return cacheFromRootCachePool;
+}
+
+export function requestCacheFromPool(renderLanes: Lanes): Cache {
+  // Similar to previous function, except if there's not already a cache in the
+  // pool, we allocate a new one.
+  const cacheFromPool = peekCacheFromPool();
+  if (cacheFromPool !== null) {
+    return cacheFromPool;
+  }
+
+  // Create a fresh cache and add it to the root cache pool. A cache can have
+  // multiple owners:
+  // - A cache pool that lives on the FiberRoot. This is where all fresh caches
+  //   are originally created (TODO: except during refreshes, until we implement
+  //   this correctly). The root takes ownership immediately when the cache is
+  //   created. Conceptually, root.pooledCache is an Option<Arc<Cache>> (owned),
+  //   and the return value of this function is a &Arc<Cache> (borrowed).
+  // - One of several fiber types: host root, cache boundary, suspense
+  //   component. These retain and release in the commit phase.
+
+  const root = (getWorkInProgressRoot(): any);
+  const freshCache = createCache();
+  root.pooledCache = freshCache;
+  retainCache(freshCache);
+  if (freshCache !== null) {
+    root.pooledCacheLanes |= renderLanes;
+  }
+  return freshCache;
+}
+
+export function pushRootTransition(
+  workInProgress: Fiber,
+  root: FiberRoot,
+  renderLanes: Lanes,
+) {
+  if (enableTransitionTracing) {
+    const rootTransitions = getWorkInProgressTransitions();
+    push(transitionStack, rootTransitions, workInProgress);
+  }
+}
+
+export function popRootTransition(
+  workInProgress: Fiber,
+  root: FiberRoot,
+  renderLanes: Lanes,
+) {
+  if (enableTransitionTracing) {
+    pop(transitionStack, workInProgress);
+  }
+}
+
+export function pushTransition(
+  offscreenWorkInProgress: Fiber,
+  prevCachePool: SpawnedCachePool | null,
+  newTransitions: Array<Transition> | null,
+): void {
+  if (prevCachePool === null) {
+    push(resumedCache, resumedCache.current, offscreenWorkInProgress);
+  } else {
+    push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
+  }
+
+  if (enableTransitionTracing) {
+    if (transitionStack.current === null) {
+      push(transitionStack, newTransitions, offscreenWorkInProgress);
+    } else if (newTransitions === null) {
+      push(transitionStack, transitionStack.current, offscreenWorkInProgress);
+    } else {
+      push(
+        transitionStack,
+        transitionStack.current.concat(newTransitions),
+        offscreenWorkInProgress,
+      );
+    }
+  }
+}
+
+export function popTransition(workInProgress: Fiber, current: Fiber | null) {
+  if (current !== null) {
+    if (enableTransitionTracing) {
+      pop(transitionStack, workInProgress);
+    }
+
+    pop(resumedCache, workInProgress);
+  }
+}
+
+export function getPendingTransitions(): Array<Transition> | null {
+  if (!enableTransitionTracing) {
+    return null;
+  }
+
+  return transitionStack.current;
+}
+
+export function getSuspendedCache(): SpawnedCachePool | null {
+  // This function is called when a Suspense boundary suspends. It returns the
+  // cache that would have been used to render fresh data during this render,
+  // if there was any, so that we can resume rendering with the same cache when
+  // we receive more data.
+  const cacheFromPool = peekCacheFromPool();
+  if (cacheFromPool === null) {
+    return null;
+  }
+
+  return {
+    // We must also save the parent, so that when we resume we can detect
+    // a refresh.
+    parent: isPrimaryRenderer
+      ? CacheContext._currentValue
+      : CacheContext._currentValue2,
+    pool: cacheFromPool,
+  };
+}
+
+export function getOffscreenDeferredCache(): SpawnedCachePool | null {
+  const cacheFromPool = peekCacheFromPool();
+  if (cacheFromPool === null) {
+    return null;
+  }
+
+  return {
+    // We must also store the parent, so that when we resume we can detect
+    // a refresh.
+    parent: isPrimaryRenderer
+      ? CacheContext._currentValue
+      : CacheContext._currentValue2,
+    pool: cacheFromPool,
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberTransitionTypes.js b/packages/react-reconciler/src/ReactFiberTransitionTypes.js
new file mode 100644
index 00000000000..95233a1341d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTransitionTypes.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {FiberRoot} from './ReactInternalTypes';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
+import {includesTransitionLane} from './ReactFiberLane';
+
+export function queueTransitionTypes(
+  root: FiberRoot,
+  transitionTypes: TransitionTypes,
+): void {
+  if (enableViewTransition) {
+    // TODO: We should really store transitionTypes per lane in a LaneMap on
+    // the root. Then merge it when we commit. We currently assume that all
+    // Transitions are entangled.
+    if (includesTransitionLane(root.pendingLanes)) {
+      let queued = root.transitionTypes;
+      if (queued === null) {
+        queued = root.transitionTypes = [];
+      }
+      for (let i = 0; i < transitionTypes.length; i++) {
+        const transitionType = transitionTypes[i];
+        if (queued.indexOf(transitionType) === -1) {
+          queued.push(transitionType);
+        }
+      }
+    }
+  }
+}
+
+// Store all types while we're entangled with an async Transition.
+export let entangledTransitionTypes: null | TransitionTypes = null;
+
+export function entangleAsyncTransitionTypes(
+  transitionTypes: TransitionTypes,
+): void {
+  if (enableViewTransition) {
+    let queued = entangledTransitionTypes;
+    if (queued === null) {
+      queued = entangledTransitionTypes = [];
+    }
+    for (let i = 0; i < transitionTypes.length; i++) {
+      const transitionType = transitionTypes[i];
+      if (queued.indexOf(transitionType) === -1) {
+        queued.push(transitionType);
+      }
+    }
+  }
+}
+
+export function clearEntangledAsyncTransitionTypes() {
+  // Called when all Async Actions are done.
+  entangledTransitionTypes = null;
+}
+
+export function claimQueuedTransitionTypes(
+  root: FiberRoot,
+): null | TransitionTypes {
+  const claimed = root.transitionTypes;
+  root.transitionTypes = null;
+  return claimed;
+}
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.js b/packages/react-reconciler/src/ReactFiberTreeContext.js
new file mode 100644
index 00000000000..00e8313b03e
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.js
@@ -0,0 +1,289 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Ids are base 32 strings whose binary representation corresponds to the
+// position of a node in a tree.
+
+// Every time the tree forks into multiple children, we add additional bits to
+// the left of the sequence that represent the position of the child within the
+// current level of children.
+//
+//      00101       00010001011010101
+//      ╰─┬─╯       ╰───────┬───────╯
+//   Fork 5 of 20       Parent id
+//
+// The leading 0s are important. In the above example, you only need 3 bits to
+// represent slot 5. However, you need 5 bits to represent all the forks at
+// the current level, so we must account for the empty bits at the end.
+//
+// For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
+// the zeroth id at a level would be indistinguishable from its parent.
+//
+// If a node has only one child, and does not materialize an id (i.e. does not
+// contain a useId hook), then we don't need to allocate any space in the
+// sequence. It's treated as a transparent indirection. For example, these two
+// trees produce the same ids:
+//
+// <>                          <>
+//   <Indirection>               <A />
+//     <A />                     <B />
+//   </Indirection>            </>
+//   <B />
+// </>
+//
+// However, we cannot skip any node that materializes an id. Otherwise, a parent
+// id that does not fork would be indistinguishable from its child id. For
+// example, this tree does not fork, but the parent and child must have
+// different ids.
+//
+// <Parent>
+//   <Child />
+// </Parent>
+//
+// To handle this scenario, every time we materialize an id, we allocate a
+// new level with a single slot. You can think of this as a fork with only one
+// prong, or an array of children with length 1.
+//
+// It's possible for the size of the sequence to exceed 32 bits, the max
+// size for bitwise operations. When this happens, we make more room by
+// converting the right part of the id to a string and storing it in an overflow
+// variable. We use a base 32 string representation, because 32 is the largest
+// power of 2 that is supported by toString(). We want the base to be large so
+// that the resulting ids are compact, and we want the base to be a power of 2
+// because every log2(base) bits corresponds to a single character, i.e. every
+// log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
+// affecting the final result.
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+import {getIsHydrating} from './ReactFiberHydrationContext';
+import {clz32} from './clz32';
+import {Forked, NoFlags} from './ReactFiberFlags';
+
+export type TreeContext = {
+  id: number,
+  overflow: string,
+};
+
+// TODO: Use the unified fiber stack module instead of this local one?
+// Intentionally not using it yet to derisk the initial implementation, because
+// the way we push/pop these values is a bit unusual. If there's a mistake, I'd
+// rather the ids be wrong than crash the whole reconciler.
+const forkStack: Array<any> = [];
+let forkStackIndex: number = 0;
+let treeForkProvider: Fiber | null = null;
+let treeForkCount: number = 0;
+
+const idStack: Array<any> = [];
+let idStackIndex: number = 0;
+let treeContextProvider: Fiber | null = null;
+let treeContextId: number = 1;
+let treeContextOverflow: string = '';
+
+export function isForkedChild(workInProgress: Fiber): boolean {
+  warnIfNotHydrating();
+  return (workInProgress.flags & Forked) !== NoFlags;
+}
+
+export function getForksAtLevel(workInProgress: Fiber): number {
+  warnIfNotHydrating();
+  return treeForkCount;
+}
+
+export function getTreeId(): string {
+  const overflow = treeContextOverflow;
+  const idWithLeadingBit = treeContextId;
+  const id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
+  return id.toString(32) + overflow;
+}
+
+export function pushTreeFork(
+  workInProgress: Fiber,
+  totalChildren: number,
+): void {
+  // This is called right after we reconcile an array (or iterator) of child
+  // fibers, because that's the only place where we know how many children in
+  // the whole set without doing extra work later, or storing addtional
+  // information on the fiber.
+  //
+  // That's why this function is separate from pushTreeId — it's called during
+  // the render phase of the fork parent, not the child, which is where we push
+  // the other context values.
+  //
+  // In the Fizz implementation this is much simpler because the child is
+  // rendered in the same callstack as the parent.
+  //
+  // It might be better to just add a `forks` field to the Fiber type. It would
+  // make this module simpler.
+
+  warnIfNotHydrating();
+
+  forkStack[forkStackIndex++] = treeForkCount;
+  forkStack[forkStackIndex++] = treeForkProvider;
+
+  treeForkProvider = workInProgress;
+  treeForkCount = totalChildren;
+}
+
+export function pushTreeId(
+  workInProgress: Fiber,
+  totalChildren: number,
+  index: number,
+) {
+  warnIfNotHydrating();
+
+  idStack[idStackIndex++] = treeContextId;
+  idStack[idStackIndex++] = treeContextOverflow;
+  idStack[idStackIndex++] = treeContextProvider;
+
+  treeContextProvider = workInProgress;
+
+  const baseIdWithLeadingBit = treeContextId;
+  const baseOverflow = treeContextOverflow;
+
+  // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
+  // of the id; we use it to account for leading 0s.
+  const baseLength = getBitLength(baseIdWithLeadingBit) - 1;
+  const baseId = baseIdWithLeadingBit & ~(1 << baseLength);
+
+  const slot = index + 1;
+  const length = getBitLength(totalChildren) + baseLength;
+
+  // 30 is the max length we can store without overflowing, taking into
+  // consideration the leading 1 we use to mark the end of the sequence.
+  if (length > 30) {
+    // We overflowed the bitwise-safe range. Fall back to slower algorithm.
+    // This branch assumes the length of the base id is greater than 5; it won't
+    // work for smaller ids, because you need 5 bits per character.
+    //
+    // We encode the id in multiple steps: first the base id, then the
+    // remaining digits.
+    //
+    // Each 5 bit sequence corresponds to a single base 32 character. So for
+    // example, if the current id is 23 bits long, we can convert 20 of those
+    // bits into a string of 4 characters, with 3 bits left over.
+    //
+    // First calculate how many bits in the base id represent a complete
+    // sequence of characters.
+    const numberOfOverflowBits = baseLength - (baseLength % 5);
+
+    // Then create a bitmask that selects only those bits.
+    const newOverflowBits = (1 << numberOfOverflowBits) - 1;
+
+    // Select the bits, and convert them to a base 32 string.
+    const newOverflow = (baseId & newOverflowBits).toString(32);
+
+    // Now we can remove those bits from the base id.
+    const restOfBaseId = baseId >> numberOfOverflowBits;
+    const restOfBaseLength = baseLength - numberOfOverflowBits;
+
+    // Finally, encode the rest of the bits using the normal algorithm. Because
+    // we made more room, this time it won't overflow.
+    const restOfLength = getBitLength(totalChildren) + restOfBaseLength;
+    const restOfNewBits = slot << restOfBaseLength;
+    const id = restOfNewBits | restOfBaseId;
+    const overflow = newOverflow + baseOverflow;
+
+    treeContextId = (1 << restOfLength) | id;
+    treeContextOverflow = overflow;
+  } else {
+    // Normal path
+    const newBits = slot << baseLength;
+    const id = newBits | baseId;
+    const overflow = baseOverflow;
+
+    treeContextId = (1 << length) | id;
+    treeContextOverflow = overflow;
+  }
+}
+
+export function pushMaterializedTreeId(workInProgress: Fiber) {
+  warnIfNotHydrating();
+
+  // This component materialized an id. This will affect any ids that appear
+  // in its children.
+  const returnFiber = workInProgress.return;
+  if (returnFiber !== null) {
+    const numberOfForks = 1;
+    const slotIndex = 0;
+    pushTreeFork(workInProgress, numberOfForks);
+    pushTreeId(workInProgress, numberOfForks, slotIndex);
+  }
+}
+
+function getBitLength(number: number): number {
+  return 32 - clz32(number);
+}
+
+function getLeadingBit(id: number) {
+  return 1 << (getBitLength(id) - 1);
+}
+
+export function popTreeContext(workInProgress: Fiber) {
+  // Restore the previous values.
+
+  // This is a bit more complicated than other context-like modules in Fiber
+  // because the same Fiber may appear on the stack multiple times and for
+  // different reasons. We have to keep popping until the work-in-progress is
+  // no longer at the top of the stack.
+
+  while (workInProgress === treeForkProvider) {
+    treeForkProvider = forkStack[--forkStackIndex];
+    forkStack[forkStackIndex] = null;
+    treeForkCount = forkStack[--forkStackIndex];
+    forkStack[forkStackIndex] = null;
+  }
+
+  while (workInProgress === treeContextProvider) {
+    treeContextProvider = idStack[--idStackIndex];
+    idStack[idStackIndex] = null;
+    treeContextOverflow = idStack[--idStackIndex];
+    idStack[idStackIndex] = null;
+    treeContextId = idStack[--idStackIndex];
+    idStack[idStackIndex] = null;
+  }
+}
+
+export function getSuspendedTreeContext(): TreeContext | null {
+  warnIfNotHydrating();
+  if (treeContextProvider !== null) {
+    return {
+      id: treeContextId,
+      overflow: treeContextOverflow,
+    };
+  } else {
+    return null;
+  }
+}
+
+export function restoreSuspendedTreeContext(
+  workInProgress: Fiber,
+  suspendedContext: TreeContext,
+) {
+  warnIfNotHydrating();
+
+  idStack[idStackIndex++] = treeContextId;
+  idStack[idStackIndex++] = treeContextOverflow;
+  idStack[idStackIndex++] = treeContextProvider;
+
+  treeContextId = suspendedContext.id;
+  treeContextOverflow = suspendedContext.overflow;
+  treeContextProvider = workInProgress;
+}
+
+function warnIfNotHydrating() {
+  if (__DEV__) {
+    if (!getIsHydrating()) {
+      console.error(
+        'Expected to be hydrating. This is a bug in React. Please file ' +
+          'an issue.',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
new file mode 100644
index 00000000000..530b65d6995
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -0,0 +1,684 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+import type {
+  Container,
+  ActivityInstance,
+  SuspenseInstance,
+} from './ReactFiberConfig';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
+
+import {
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostRoot,
+  HostPortal,
+  HostText,
+  ActivityComponent,
+  SuspenseComponent,
+  OffscreenComponent,
+  Fragment,
+} from './ReactWorkTags';
+import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
+
+export function getNearestMountedFiber(fiber: Fiber): null | Fiber {
+  let node = fiber;
+  let nearestMounted: null | Fiber = fiber;
+  // 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.
+  let nextNode: Fiber = node;
+  while (nextNode && !nextNode.alternate) {
+    node = nextNode;
+    if ((node.flags & (Placement | Hydrating)) !== NoFlags) {
+      // 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;
+    }
+    // $FlowFixMe[incompatible-type] we bail out when we get a null
+    nextNode = node.return;
+  }
+  // After we've reached an alternate, go the rest of the way to see if the
+  // tree is still mounted. If it's not, its return pointer will be disconnected.
+  while (node.return) {
+    node = node.return;
+  }
+  if (node.tag === HostRoot) {
+    // TODO: Check if this was a nested HostRoot when used with
+    // renderContainerIntoSubtree.
+    return nearestMounted;
+  }
+  // If we didn't hit the root, that means that we're in an disconnected tree
+  // that has been 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 getActivityInstanceFromFiber(
+  fiber: Fiber,
+): null | ActivityInstance {
+  if (fiber.tag === ActivityComponent) {
+    let activityState: ActivityState | null = fiber.memoizedState;
+    if (activityState === null) {
+      const current = fiber.alternate;
+      if (current !== null) {
+        activityState = current.memoizedState;
+      }
+    }
+    if (activityState !== null) {
+      return activityState.dehydrated;
+    }
+  }
+  // TODO: Implement this on ActivityComponent.
+  return null;
+}
+
+export function getContainerFromFiber(fiber: Fiber): null | Container {
+  return fiber.tag === HostRoot
+    ? (fiber.stateNode.containerInfo: Container)
+    : null;
+}
+
+function assertIsMounted(fiber: Fiber) {
+  if (getNearestMountedFiber(fiber) !== fiber) {
+    throw new Error('Unable to find node on an unmounted component.');
+  }
+}
+
+export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
+  const alternate = fiber.alternate;
+  if (!alternate) {
+    // If there is no alternate, then we only need to check if it is mounted.
+    const nearestMounted = getNearestMountedFiber(fiber);
+
+    if (nearestMounted === null) {
+      throw new Error('Unable to find node on an unmounted component.');
+    }
+
+    if (nearestMounted !== fiber) {
+      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) {
+    const parentA = a.return;
+    if (parentA === null) {
+      // We're at the root.
+      break;
+    }
+    const 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.
+          assertIsMounted(parentA);
+          return fiber;
+        }
+        if (child === b) {
+          // We've determined that B is the current branch.
+          assertIsMounted(parentA);
+          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 new 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 new 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 new 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 new 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;
+}
+
+export function findCurrentHostFiber(parent: Fiber): Fiber | null {
+  const currentParent = findCurrentFiberUsingSlowPath(parent);
+  return currentParent !== null
+    ? findCurrentHostFiberImpl(currentParent)
+    : null;
+}
+
+function findCurrentHostFiberImpl(node: Fiber): Fiber | null {
+  // Next we'll drill down this component to find the first HostComponent/Text.
+  const tag = node.tag;
+  if (
+    tag === HostComponent ||
+    tag === HostHoistable ||
+    tag === HostSingleton ||
+    tag === HostText
+  ) {
+    return node;
+  }
+
+  let child = node.child;
+  while (child !== null) {
+    const match = findCurrentHostFiberImpl(child);
+    if (match !== null) {
+      return match;
+    }
+    child = child.sibling;
+  }
+
+  return null;
+}
+
+export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {
+  const currentParent = findCurrentFiberUsingSlowPath(parent);
+  return currentParent !== null
+    ? findCurrentHostFiberWithNoPortalsImpl(currentParent)
+    : null;
+}
+
+function findCurrentHostFiberWithNoPortalsImpl(node: Fiber): Fiber | null {
+  // Next we'll drill down this component to find the first HostComponent/Text.
+  const tag = node.tag;
+  if (
+    tag === HostComponent ||
+    tag === HostHoistable ||
+    tag === HostSingleton ||
+    tag === HostText
+  ) {
+    return node;
+  }
+
+  let child = node.child;
+  while (child !== null) {
+    if (child.tag !== HostPortal) {
+      const match = findCurrentHostFiberWithNoPortalsImpl(child);
+      if (match !== null) {
+        return match;
+      }
+    }
+    child = child.sibling;
+  }
+
+  return null;
+}
+
+export function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean {
+  const memoizedState = fiber.memoizedState;
+  return (
+    fiber.tag === SuspenseComponent &&
+    memoizedState !== null &&
+    memoizedState.dehydrated === null
+  );
+}
+
+export function doesFiberContain(
+  parentFiber: Fiber,
+  childFiber: Fiber,
+): boolean {
+  let node: null | Fiber = childFiber;
+  const parentFiberAlternate = parentFiber.alternate;
+  while (node !== null) {
+    if (node === parentFiber || node === parentFiberAlternate) {
+      return true;
+    }
+    node = node.return;
+  }
+  return false;
+}
+
+export function traverseFragmentInstance<A, B, C>(
+  fragmentFiber: Fiber,
+  fn: (Fiber, A, B, C) => boolean,
+  a: A,
+  b: B,
+  c: C,
+): void {
+  traverseVisibleHostChildren(fragmentFiber.child, false, fn, a, b, c);
+}
+
+export function traverseFragmentInstanceDeeply<A, B, C>(
+  fragmentFiber: Fiber,
+  fn: (Fiber, A, B, C) => boolean,
+  a: A,
+  b: B,
+  c: C,
+): void {
+  traverseVisibleHostChildren(fragmentFiber.child, true, fn, a, b, c);
+}
+
+function traverseVisibleHostChildren<A, B, C>(
+  child: Fiber | null,
+  searchWithinHosts: boolean,
+  fn: (Fiber, A, B, C) => boolean,
+  a: A,
+  b: B,
+  c: C,
+): boolean {
+  while (child !== null) {
+    if (child.tag === HostComponent && fn(child, a, b, c)) {
+      return true;
+    } else if (
+      child.tag === OffscreenComponent &&
+      child.memoizedState !== null
+    ) {
+      // Skip hidden subtrees
+    } else {
+      if (
+        (searchWithinHosts || child.tag !== HostComponent) &&
+        traverseVisibleHostChildren(child.child, searchWithinHosts, fn, a, b, c)
+      ) {
+        return true;
+      }
+    }
+    child = child.sibling;
+  }
+  return false;
+}
+
+export function getFragmentParentHostFiber(fiber: Fiber): null | Fiber {
+  let parent = fiber.return;
+  while (parent !== null) {
+    if (parent.tag === HostRoot || parent.tag === HostComponent) {
+      return parent;
+    }
+    parent = parent.return;
+  }
+
+  return null;
+}
+
+export function fiberIsPortaledIntoHost(fiber: Fiber): boolean {
+  let foundPortalParent = false;
+  let parent = fiber.return;
+  while (parent !== null) {
+    if (parent.tag === HostPortal) {
+      foundPortalParent = true;
+    }
+    if (parent.tag === HostRoot || parent.tag === HostComponent) {
+      break;
+    }
+    parent = parent.return;
+  }
+  return foundPortalParent;
+}
+
+export function getFragmentInstanceSiblings(
+  fiber: Fiber,
+): [Fiber | null, Fiber | null] {
+  const result: [Fiber | null, Fiber | null] = [null, null];
+  const parentHostFiber = getFragmentParentHostFiber(fiber);
+  if (parentHostFiber === null) {
+    return result;
+  }
+
+  findFragmentInstanceSiblings(result, fiber, parentHostFiber.child);
+  return result;
+}
+
+function findFragmentInstanceSiblings(
+  result: [Fiber | null, Fiber | null],
+  self: Fiber,
+  child: null | Fiber,
+  foundSelf: boolean = false,
+): boolean {
+  while (child !== null) {
+    if (child === self) {
+      foundSelf = true;
+      if (child.sibling) {
+        child = child.sibling;
+      } else {
+        return true;
+      }
+    }
+    if (child.tag === HostComponent) {
+      if (foundSelf) {
+        result[1] = child;
+        return true;
+      } else {
+        result[0] = child;
+      }
+    } else if (
+      child.tag === OffscreenComponent &&
+      child.memoizedState !== null
+    ) {
+      // Skip hidden subtrees
+    } else {
+      if (findFragmentInstanceSiblings(result, self, child.child, foundSelf)) {
+        return true;
+      }
+    }
+    child = child.sibling;
+  }
+  return false;
+}
+
+export function getInstanceFromHostFiber<I>(fiber: Fiber): I {
+  switch (fiber.tag) {
+    case HostComponent:
+      return fiber.stateNode;
+    case HostRoot:
+      return fiber.stateNode.containerInfo;
+    default:
+      throw new Error('Expected to find a host node. This is a bug in React.');
+  }
+}
+
+let searchTarget = null;
+let searchBoundary = null;
+function pushSearchTarget(target: null | Fiber): void {
+  searchTarget = target;
+}
+function popSearchTarget(): null | Fiber {
+  return searchTarget;
+}
+function pushSearchBoundary(value: null | Fiber): void {
+  searchBoundary = value;
+}
+function popSearchBoundary(): null | Fiber {
+  return searchBoundary;
+}
+
+export function getNextSiblingHostFiber(fiber: Fiber): null | Fiber {
+  traverseVisibleHostChildren(fiber.sibling, false, findNextSibling);
+  const sibling = popSearchTarget();
+  pushSearchTarget(null);
+  return sibling;
+}
+
+function findNextSibling(child: Fiber): boolean {
+  pushSearchTarget(child);
+  return true;
+}
+
+export function isFiberContainedByFragment(
+  fiber: Fiber,
+  fragmentFiber: Fiber,
+): boolean {
+  let current: Fiber | null = fiber;
+  while (current !== null) {
+    if (
+      current.tag === Fragment &&
+      (current === fragmentFiber || current.alternate === fragmentFiber)
+    ) {
+      return true;
+    }
+    current = current.return;
+  }
+  return false;
+}
+
+export function isFragmentContainedByFiber(
+  fragmentFiber: Fiber,
+  otherFiber: Fiber,
+): boolean {
+  let current: Fiber | null = fragmentFiber;
+  const fiberHostParent: Fiber | null =
+    getFragmentParentHostFiber(fragmentFiber);
+  while (current !== null) {
+    if (
+      (current.tag === HostComponent || current.tag === HostRoot) &&
+      (current === fiberHostParent || current.alternate === fiberHostParent)
+    ) {
+      return true;
+    }
+    current = current.return;
+  }
+  return false;
+}
+
+export function isFiberPreceding(fiber: Fiber, otherFiber: Fiber): boolean {
+  const commonAncestor = getLowestCommonAncestor(
+    fiber,
+    otherFiber,
+    getParentForFragmentAncestors,
+  );
+  if (commonAncestor === null) {
+    return false;
+  }
+  traverseVisibleHostChildren(
+    commonAncestor,
+    true,
+    isFiberPrecedingCheck,
+    otherFiber,
+    fiber,
+  );
+  const target = popSearchTarget();
+  pushSearchTarget(null);
+  return target !== null;
+}
+
+function isFiberPrecedingCheck(
+  child: Fiber,
+  target: Fiber,
+  boundary: Fiber,
+): boolean {
+  if (child === boundary) {
+    return true;
+  }
+  if (child === target) {
+    pushSearchTarget(child);
+    return true;
+  }
+  return false;
+}
+
+export function isFiberFollowing(fiber: Fiber, otherFiber: Fiber): boolean {
+  const commonAncestor = getLowestCommonAncestor(
+    fiber,
+    otherFiber,
+    getParentForFragmentAncestors,
+  );
+  if (commonAncestor === null) {
+    return false;
+  }
+  traverseVisibleHostChildren(
+    commonAncestor,
+    true,
+    isFiberFollowingCheck,
+    otherFiber,
+    fiber,
+  );
+  const target = popSearchTarget();
+  pushSearchTarget(null);
+  pushSearchBoundary(null);
+  return target !== null;
+}
+
+function isFiberFollowingCheck(
+  child: Fiber,
+  target: Fiber,
+  boundary: Fiber,
+): boolean {
+  if (child === boundary) {
+    pushSearchBoundary(child);
+    return false;
+  }
+  if (child === target) {
+    // The target is only following if we already found the boundary.
+    if (popSearchBoundary() !== null) {
+      pushSearchTarget(child);
+    }
+    return true;
+  }
+  return false;
+}
+
+function getParentForFragmentAncestors(inst: Fiber | null): Fiber | null {
+  if (inst === null) {
+    return null;
+  }
+  do {
+    inst = inst === null ? null : inst.return;
+  } while (
+    inst &&
+    inst.tag !== HostComponent &&
+    inst.tag !== HostSingleton &&
+    inst.tag !== HostRoot
+  );
+  if (inst) {
+    return inst;
+  }
+  return null;
+}
+
+/**
+ * Return the lowest common ancestor of A and B, or null if they are in
+ * different trees.
+ */
+export function getLowestCommonAncestor(
+  instA: Fiber,
+  instB: Fiber,
+  getParent: (inst: Fiber | null) => Fiber | null,
+): Fiber | null {
+  let nodeA: null | Fiber = instA;
+  let nodeB: null | Fiber = instB;
+  let depthA = 0;
+  for (let tempA: null | Fiber = nodeA; tempA; tempA = getParent(tempA)) {
+    depthA++;
+  }
+  let depthB = 0;
+  for (let tempB: null | Fiber = nodeB; tempB; tempB = getParent(tempB)) {
+    depthB++;
+  }
+
+  // If A is deeper, crawl up.
+  while (depthA - depthB > 0) {
+    nodeA = getParent(nodeA);
+    depthA--;
+  }
+
+  // If B is deeper, crawl up.
+  while (depthB - depthA > 0) {
+    nodeB = getParent(nodeB);
+    depthB--;
+  }
+
+  // Walk in lockstep until we find a match.
+  let depth = depthA;
+  while (depth--) {
+    if (nodeA === nodeB || (nodeB !== null && nodeA === nodeB.alternate)) {
+      return nodeA;
+    }
+    nodeA = getParent(nodeA);
+    nodeB = getParent(nodeB);
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.js b/packages/react-reconciler/src/ReactFiberUnwindWork.js
new file mode 100644
index 00000000000..b2954c41f5a
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.js
@@ -0,0 +1,332 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {
+  SuspenseState,
+  SuspenseListRenderState,
+} from './ReactFiberSuspenseComponent';
+import type {Cache} from './ReactFiberCacheComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+
+import {
+  ClassComponent,
+  HostRoot,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostPortal,
+  ContextProvider,
+  ActivityComponent,
+  SuspenseComponent,
+  SuspenseListComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  CacheComponent,
+  TracingMarkerComponent,
+} from './ReactWorkTags';
+import {DidCapture, NoFlags, ShouldCapture, Update} from './ReactFiberFlags';
+import {NoMode, ProfileMode} from './ReactTypeOfMode';
+import {
+  enableProfilerTimer,
+  enableTransitionTracing,
+} from 'shared/ReactFeatureFlags';
+
+import {popHostContainer, popHostContext} from './ReactFiberHostContext';
+import {
+  popSuspenseListContext,
+  popSuspenseHandler,
+} from './ReactFiberSuspenseContext';
+import {popHiddenContext} from './ReactFiberHiddenContext';
+import {resetHydrationState} from './ReactFiberHydrationContext';
+import {
+  isContextProvider as isLegacyContextProvider,
+  popContext as popLegacyContext,
+  popTopLevelContextObject as popTopLevelLegacyContextObject,
+} from './ReactFiberLegacyContext';
+import {popProvider} from './ReactFiberNewContext';
+import {popCacheProvider} from './ReactFiberCacheComponent';
+import {transferActualDuration} from './ReactProfilerTimer';
+import {popTreeContext} from './ReactFiberTreeContext';
+import {popRootTransition, popTransition} from './ReactFiberTransition';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent';
+
+function unwindWork(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber | null {
+  // Note: This intentionally doesn't check if we're hydrating because comparing
+  // to the current tree provider fiber is just as fast and less error-prone.
+  // Ideally we would have a special version of the work loop only
+  // for hydration.
+  popTreeContext(workInProgress);
+  switch (workInProgress.tag) {
+    case ClassComponent: {
+      const Component = workInProgress.type;
+      if (isLegacyContextProvider(Component)) {
+        popLegacyContext(workInProgress);
+      }
+      const flags = workInProgress.flags;
+      if (flags & ShouldCapture) {
+        workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
+        if (
+          enableProfilerTimer &&
+          (workInProgress.mode & ProfileMode) !== NoMode
+        ) {
+          transferActualDuration(workInProgress);
+        }
+        return workInProgress;
+      }
+      return null;
+    }
+    case HostRoot: {
+      const root: FiberRoot = workInProgress.stateNode;
+      const cache: Cache = workInProgress.memoizedState.cache;
+      popCacheProvider(workInProgress, cache);
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
+      popRootTransition(workInProgress, root, renderLanes);
+      popHostContainer(workInProgress);
+      popTopLevelLegacyContextObject(workInProgress);
+      const flags = workInProgress.flags;
+      if (
+        (flags & ShouldCapture) !== NoFlags &&
+        (flags & DidCapture) === NoFlags
+      ) {
+        // There was an error during render that wasn't captured by a suspense
+        // boundary. Do a second pass on the root to unmount the children.
+        workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
+        return workInProgress;
+      }
+      // We unwound to the root without completing it. Exit.
+      return null;
+    }
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent: {
+      // TODO: popHydrationState
+      popHostContext(workInProgress);
+      return null;
+    }
+    case ActivityComponent: {
+      const activityState: null | ActivityState = workInProgress.memoizedState;
+      if (activityState !== null) {
+        popSuspenseHandler(workInProgress);
+
+        if (workInProgress.alternate === null) {
+          throw new Error(
+            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+              'React. Please file an issue.',
+          );
+        }
+
+        resetHydrationState();
+      }
+
+      const flags = workInProgress.flags;
+      if (flags & ShouldCapture) {
+        workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
+        // Captured a suspense effect. Re-render the boundary.
+        if (
+          enableProfilerTimer &&
+          (workInProgress.mode & ProfileMode) !== NoMode
+        ) {
+          transferActualDuration(workInProgress);
+        }
+        return workInProgress;
+      }
+      return null;
+    }
+    case SuspenseComponent: {
+      popSuspenseHandler(workInProgress);
+      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+      if (suspenseState !== null && suspenseState.dehydrated !== null) {
+        if (workInProgress.alternate === null) {
+          throw new Error(
+            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+              'React. Please file an issue.',
+          );
+        }
+
+        resetHydrationState();
+      }
+
+      const flags = workInProgress.flags;
+      if (flags & ShouldCapture) {
+        workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
+        // Captured a suspense effect. Re-render the boundary.
+        if (
+          enableProfilerTimer &&
+          (workInProgress.mode & ProfileMode) !== NoMode
+        ) {
+          transferActualDuration(workInProgress);
+        }
+        return workInProgress;
+      }
+      return null;
+    }
+    case SuspenseListComponent: {
+      popSuspenseListContext(workInProgress);
+      // SuspenseList doesn't normally catch anything. It should've been
+      // caught by a nested boundary. If not, it should bubble through.
+      const flags = workInProgress.flags;
+      if (flags & ShouldCapture) {
+        workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
+        // If we caught something on the SuspenseList itself it's because
+        // we want to ignore something. Re-enter the cycle and handle it
+        // in the complete phase.
+        const renderState: null | SuspenseListRenderState =
+          workInProgress.memoizedState;
+        if (renderState !== null) {
+          // Cut off any remaining tail work and don't commit the rendering one.
+          // This assumes that we have already confirmed that none of these are
+          // already mounted.
+          renderState.rendering = null;
+          renderState.tail = null;
+        }
+        // Schedule the commit phase to attach retry listeners.
+        workInProgress.flags |= Update;
+        return workInProgress;
+      }
+      return null;
+    }
+    case HostPortal:
+      popHostContainer(workInProgress);
+      return null;
+    case ContextProvider:
+      const context: ReactContext<any> = workInProgress.type;
+      popProvider(context, workInProgress);
+      return null;
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
+      popSuspenseHandler(workInProgress);
+      popHiddenContext(workInProgress);
+      popTransition(workInProgress, current);
+      const flags = workInProgress.flags;
+      if (flags & ShouldCapture) {
+        workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
+        // Captured a suspense effect. Re-render the boundary.
+        if (
+          enableProfilerTimer &&
+          (workInProgress.mode & ProfileMode) !== NoMode
+        ) {
+          transferActualDuration(workInProgress);
+        }
+        return workInProgress;
+      }
+      return null;
+    }
+    case CacheComponent:
+      const cache: Cache = workInProgress.memoizedState.cache;
+      popCacheProvider(workInProgress, cache);
+      return null;
+    case TracingMarkerComponent:
+      if (enableTransitionTracing) {
+        if (workInProgress.stateNode !== null) {
+          popMarkerInstance(workInProgress);
+        }
+      }
+      return null;
+    default:
+      return null;
+  }
+}
+
+function unwindInterruptedWork(
+  current: Fiber | null,
+  interruptedWork: Fiber,
+  renderLanes: Lanes,
+) {
+  // Note: This intentionally doesn't check if we're hydrating because comparing
+  // to the current tree provider fiber is just as fast and less error-prone.
+  // Ideally we would have a special version of the work loop only
+  // for hydration.
+  popTreeContext(interruptedWork);
+  switch (interruptedWork.tag) {
+    case ClassComponent: {
+      const childContextTypes = interruptedWork.type.childContextTypes;
+      if (childContextTypes !== null && childContextTypes !== undefined) {
+        popLegacyContext(interruptedWork);
+      }
+      break;
+    }
+    case HostRoot: {
+      const root: FiberRoot = interruptedWork.stateNode;
+      const cache: Cache = interruptedWork.memoizedState.cache;
+      popCacheProvider(interruptedWork, cache);
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(interruptedWork);
+      }
+
+      popRootTransition(interruptedWork, root, renderLanes);
+      popHostContainer(interruptedWork);
+      popTopLevelLegacyContextObject(interruptedWork);
+      break;
+    }
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent: {
+      popHostContext(interruptedWork);
+      break;
+    }
+    case HostPortal:
+      popHostContainer(interruptedWork);
+      break;
+    case ActivityComponent: {
+      if (interruptedWork.memoizedState !== null) {
+        popSuspenseHandler(interruptedWork);
+      }
+      break;
+    }
+    case SuspenseComponent:
+      popSuspenseHandler(interruptedWork);
+      break;
+    case SuspenseListComponent:
+      popSuspenseListContext(interruptedWork);
+      break;
+    case ContextProvider:
+      const context: ReactContext<any> = interruptedWork.type;
+      popProvider(context, interruptedWork);
+      break;
+    case OffscreenComponent:
+    case LegacyHiddenComponent:
+      popSuspenseHandler(interruptedWork);
+      popHiddenContext(interruptedWork);
+      popTransition(interruptedWork, current);
+      break;
+    case CacheComponent:
+      const cache: Cache = interruptedWork.memoizedState.cache;
+      popCacheProvider(interruptedWork, cache);
+      break;
+    case TracingMarkerComponent:
+      if (enableTransitionTracing) {
+        const instance: TracingMarkerInstance | null =
+          interruptedWork.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(interruptedWork);
+        }
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+export {unwindWork, unwindInterruptedWork};
diff --git a/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js b/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
new file mode 100644
index 00000000000..37768bcccbd
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ViewTransitionClass, ViewTransitionProps} from 'shared/ReactTypes';
+import type {FiberRoot} from './ReactInternalTypes';
+import type {ViewTransitionInstance, Instance} from './ReactFiberConfig';
+
+import {
+  getCommittingRoot,
+  getPendingTransitionTypes,
+} from './ReactFiberWorkLoop';
+
+export type ViewTransitionState = {
+  autoName: null | string, // the view-transition-name to use when an explicit one is not specified
+  paired: null | ViewTransitionState, // a temporary state during the commit phase if we have paired this with another instance
+  clones: null | Array<Instance>, // a temporary state during the apply gesture phase if we cloned this boundary
+  ref: null | ViewTransitionInstance, // the current ref instance. This can change through the lifetime of the instance.
+};
+
+let globalClientIdCounter: number = 0;
+
+export function getViewTransitionName(
+  props: ViewTransitionProps,
+  instance: ViewTransitionState,
+): string {
+  if (props.name != null && props.name !== 'auto') {
+    return props.name;
+  }
+  if (instance.autoName !== null) {
+    return instance.autoName;
+  }
+
+  // We assume we always call this in the commit phase.
+  const root = ((getCommittingRoot(): any): FiberRoot);
+  const identifierPrefix = root.identifierPrefix;
+  const globalClientId = globalClientIdCounter++;
+  const name =
+    '_' + identifierPrefix + 't_' + globalClientId.toString(32) + '_';
+  instance.autoName = name;
+  return name;
+}
+
+function getClassNameByType(classByType: ?ViewTransitionClass): ?string {
+  if (classByType == null || typeof classByType === 'string') {
+    return classByType;
+  }
+  let className: ?string = null;
+  const activeTypes = getPendingTransitionTypes();
+  if (activeTypes !== null) {
+    for (let i = 0; i < activeTypes.length; i++) {
+      const match = classByType[activeTypes[i]];
+      if (match != null) {
+        if (match === 'none') {
+          // If anything matches "none" that takes precedence over any other
+          // type that also matches.
+          return 'none';
+        }
+        if (className == null) {
+          className = match;
+        } else {
+          className += ' ' + match;
+        }
+      }
+    }
+  }
+  if (className == null) {
+    // We had no other matches. Match the default for this configuration.
+    return classByType.default;
+  }
+  return className;
+}
+
+export function getViewTransitionClassName(
+  defaultClass: ?ViewTransitionClass,
+  eventClass: ?ViewTransitionClass,
+): ?string {
+  const className: ?string = getClassNameByType(defaultClass);
+  const eventClassName: ?string = getClassNameByType(eventClass);
+  if (eventClassName == null) {
+    return className === 'auto' ? null : className;
+  }
+  if (eventClassName === 'auto') {
+    return null;
+  }
+  return eventClassName;
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
new file mode 100644
index 00000000000..b03f5eff159
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -0,0 +1,5563 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
+
+import type {
+  Wakeable,
+  Thenable,
+  GestureOptionsRequired,
+} from 'shared/ReactTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {Lanes, Lane} from './ReactFiberLane';
+import type {ActivityState} from './ReactFiberActivityComponent';
+import type {SuspenseState} from './ReactFiberSuspenseComponent';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {
+  PendingTransitionCallbacks,
+  PendingBoundaries,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+import type {
+  Resource,
+  ViewTransitionInstance,
+  RunningViewTransition,
+  GestureTimeline,
+  SuspendedState,
+} from './ReactFiberConfig';
+import type {RootState} from './ReactFiberRoot';
+import {
+  getViewTransitionName,
+  type ViewTransitionState,
+} from './ReactFiberViewTransitionComponent';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+
+import {
+  enableCreateEventHandleAPI,
+  enableProfilerTimer,
+  enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
+  enableSchedulingProfiler,
+  enableUpdaterTracking,
+  enableTransitionTracing,
+  disableLegacyContext,
+  alwaysThrottleRetries,
+  enableInfiniteRenderLoopDetection,
+  disableLegacyMode,
+  enableComponentPerformanceTrack,
+  enableYieldingBeforePassive,
+  enableThrottledScheduling,
+  enableViewTransition,
+  enableGestureTransition,
+  enableDefaultTransitionIndicator,
+} from 'shared/ReactFeatureFlags';
+import {resetOwnerStackLimit} from 'shared/ReactOwnerStackReset';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import is from 'shared/objectIs';
+
+import reportGlobalError from 'shared/reportGlobalError';
+
+import {
+  // Aliased because `act` will override and push to an internal queue
+  scheduleCallback as Scheduler_scheduleCallback,
+  shouldYield,
+  requestPaint,
+  now,
+  NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
+} from './Scheduler';
+import {
+  logBlockingStart,
+  logGestureStart,
+  logTransitionStart,
+  logRenderPhase,
+  logInterruptedRenderPhase,
+  logSuspendedRenderPhase,
+  logRecoveredRenderPhase,
+  logErroredRenderPhase,
+  logInconsistentRender,
+  logSuspendedWithDelayPhase,
+  logSuspendedCommitPhase,
+  logSuspendedViewTransitionPhase,
+  logCommitPhase,
+  logPaintYieldPhase,
+  logStartViewTransitionYieldPhase,
+  logAnimatingPhase,
+  logPassiveCommitPhase,
+  logYieldTime,
+  logActionYieldTime,
+  logSuspendedYieldTime,
+  setCurrentTrackFromLanes,
+  markAllLanesInOrder,
+  logApplyGesturePhase,
+} from './ReactFiberPerformanceTrack';
+
+import {
+  resetAfterCommit,
+  scheduleTimeout,
+  cancelTimeout,
+  noTimeout,
+  afterActiveInstanceBlur,
+  startSuspendingCommit,
+  suspendOnActiveViewTransition,
+  waitForCommitToBeReady,
+  getSuspendedCommitReason,
+  preloadInstance,
+  preloadResource,
+  supportsHydration,
+  setCurrentUpdatePriority,
+  getCurrentUpdatePriority,
+  resolveUpdatePriority,
+  trackSchedulerEvent,
+  startViewTransition,
+  startGestureTransition,
+  stopViewTransition,
+  addViewTransitionFinishedListener,
+  createViewTransitionInstance,
+  flushHydrationEvents,
+} from './ReactFiberConfig';
+
+import {createWorkInProgress, resetWorkInProgress} from './ReactFiber';
+import {isRootDehydrated} from './ReactFiberShellHydration';
+import {
+  getIsHydrating,
+  popHydrationStateOnInterruptedWork,
+} from './ReactFiberHydrationContext';
+import {
+  NoMode,
+  ProfileMode,
+  ConcurrentMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
+} from './ReactTypeOfMode';
+import {
+  HostRoot,
+  ClassComponent,
+  ActivityComponent,
+  SuspenseComponent,
+  SuspenseListComponent,
+  OffscreenComponent,
+  FunctionComponent,
+  ForwardRef,
+  MemoComponent,
+  SimpleMemoComponent,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+} from './ReactWorkTags';
+import {ConcurrentRoot, LegacyRoot} from './ReactRootTags';
+import type {Flags} from './ReactFiberFlags';
+import {
+  NoFlags,
+  Incomplete,
+  StoreConsistency,
+  HostEffectMask,
+  ForceClientRender,
+  BeforeMutationMask,
+  MutationMask,
+  LayoutMask,
+  PassiveMask,
+  PlacementDEV,
+  Visibility,
+  MountPassiveDev,
+  MountLayoutDev,
+  DidDefer,
+  ShouldSuspendCommit,
+  MaySuspendCommit,
+  ScheduleRetry,
+  PassiveTransitionMask,
+} from './ReactFiberFlags';
+import {
+  NoLanes,
+  NoLane,
+  SyncLane,
+  claimNextRetryLane,
+  includesSyncLane,
+  isSubsetOfLanes,
+  mergeLanes,
+  removeLanes,
+  pickArbitraryLane,
+  includesNonIdleWork,
+  includesOnlyRetries,
+  includesOnlyTransitions,
+  includesBlockingLane,
+  includesTransitionLane,
+  includesRetryLane,
+  includesIdleGroupLanes,
+  includesExpiredLane,
+  getNextLanes,
+  getEntangledLanes,
+  getLanesToRetrySynchronouslyOnError,
+  upgradePendingLanesToSync,
+  markRootSuspended as _markRootSuspended,
+  markRootUpdated as _markRootUpdated,
+  markRootPinged as _markRootPinged,
+  markRootFinished,
+  addFiberToLanesMap,
+  movePendingFibersToMemoized,
+  addTransitionToLanesMap,
+  getTransitionsForLanes,
+  includesSomeLane,
+  OffscreenLane,
+  SyncUpdateLanes,
+  UpdateLanes,
+  claimNextTransitionDeferredLane,
+  checkIfRootIsPrerendering,
+  includesOnlyViewTransitionEligibleLanes,
+  isGestureRender,
+  GestureLane,
+  SomeTransitionLane,
+  SomeRetryLane,
+  IdleLane,
+} from './ReactFiberLane';
+import {
+  DiscreteEventPriority,
+  DefaultEventPriority,
+  lowerEventPriority,
+  lanesToEventPriority,
+  eventPriorityToLane,
+} from './ReactEventPriorities';
+import {requestCurrentTransition} from './ReactFiberTransition';
+import {
+  SelectiveHydrationException,
+  beginWork,
+  replayFunctionComponent,
+} from './ReactFiberBeginWork';
+import {completeWork} from './ReactFiberCompleteWork';
+import {unwindWork, unwindInterruptedWork} from './ReactFiberUnwindWork';
+import {
+  throwException,
+  createRootErrorUpdate,
+  createClassErrorUpdate,
+  initializeClassErrorUpdate,
+} from './ReactFiberThrow';
+import {
+  commitBeforeMutationEffects,
+  shouldFireAfterActiveInstanceBlur,
+  commitAfterMutationEffects,
+  commitLayoutEffects,
+  commitMutationEffects,
+  commitPassiveMountEffects,
+  commitPassiveUnmountEffects,
+  disappearLayoutEffects,
+  reconnectPassiveEffects,
+  reappearLayoutEffects,
+  disconnectPassiveEffect,
+  invokeLayoutEffectMountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectUnmountInDEV,
+  accumulateSuspenseyCommit,
+} from './ReactFiberCommitWork';
+import {resetShouldStartViewTransition} from './ReactFiberCommitViewTransitions';
+import {shouldStartViewTransition} from './ReactFiberCommitViewTransitions';
+import {
+  insertDestinationClones,
+  applyDepartureTransitions,
+  startGestureAnimations,
+} from './ReactFiberApplyGesture';
+import {enqueueUpdate} from './ReactFiberClassUpdateQueue';
+import {resetContextDependencies} from './ReactFiberNewContext';
+import {
+  resetHooksAfterThrow,
+  resetHooksOnUnwind,
+  ContextOnlyDispatcher,
+} from './ReactFiberHooks';
+import {DefaultAsyncDispatcher} from './ReactFiberAsyncDispatcher';
+import {
+  createCapturedValueAtFiber,
+  type CapturedValue,
+} from './ReactCapturedValue';
+import {
+  enqueueConcurrentRenderForLane,
+  finishQueueingConcurrentUpdates,
+  getConcurrentlyUpdatedLanes,
+} from './ReactFiberConcurrentUpdates';
+
+import {
+  blockingClampTime,
+  blockingUpdateTime,
+  blockingUpdateTask,
+  blockingUpdateType,
+  blockingUpdateMethodName,
+  blockingUpdateComponentName,
+  blockingEventTime,
+  blockingEventType,
+  blockingEventRepeatTime,
+  blockingSuspendedTime,
+  gestureClampTime,
+  gestureUpdateTime,
+  gestureUpdateTask,
+  gestureUpdateType,
+  gestureUpdateMethodName,
+  gestureUpdateComponentName,
+  gestureEventTime,
+  gestureEventType,
+  gestureEventRepeatTime,
+  gestureSuspendedTime,
+  transitionClampTime,
+  transitionStartTime,
+  transitionUpdateTime,
+  transitionUpdateTask,
+  transitionUpdateType,
+  transitionUpdateMethodName,
+  transitionUpdateComponentName,
+  transitionEventTime,
+  transitionEventType,
+  transitionEventRepeatTime,
+  transitionSuspendedTime,
+  clearBlockingTimers,
+  clearGestureTimers,
+  clearGestureUpdates,
+  clearTransitionTimers,
+  clampBlockingTimers,
+  clampGestureTimers,
+  clampTransitionTimers,
+  clampRetryTimers,
+  clampIdleTimers,
+  markNestedUpdateScheduled,
+  renderStartTime,
+  commitStartTime,
+  commitEndTime,
+  commitErrors,
+  recordRenderTime,
+  recordCommitTime,
+  recordCommitEndTime,
+  startProfilerTimer,
+  stopProfilerTimerIfRunningAndRecordDuration,
+  stopProfilerTimerIfRunningAndRecordIncompleteDuration,
+  trackSuspendedTime,
+  startYieldTimer,
+  yieldStartTime,
+  yieldReason,
+  startPingTimerByLanes,
+  recordEffectError,
+  resetCommitErrors,
+  PINGED_UPDATE,
+  SPAWNED_UPDATE,
+  startAnimating,
+  stopAnimating,
+  animatingLanes,
+  retryClampTime,
+  idleClampTime,
+  animatingTask,
+} from './ReactProfilerTimer';
+
+// DEV stuff
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import ReactStrictModeWarnings from './ReactStrictModeWarnings';
+import {
+  isRendering as ReactCurrentDebugFiberIsRenderingInDEV,
+  resetCurrentFiber,
+  runWithFiberInDEV,
+} from './ReactCurrentFiber';
+import {
+  isDevToolsPresent,
+  markCommitStarted,
+  markCommitStopped,
+  markComponentRenderStopped,
+  markComponentSuspended,
+  markComponentErrored,
+  markLayoutEffectsStarted,
+  markLayoutEffectsStopped,
+  markPassiveEffectsStarted,
+  markPassiveEffectsStopped,
+  markRenderStarted,
+  markRenderYielded,
+  markRenderStopped,
+  onCommitRoot as onCommitRootDevTools,
+  onPostCommitRoot as onPostCommitRootDevTools,
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook';
+import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
+import {releaseCache} from './ReactFiberCacheComponent';
+import {
+  isLegacyActEnvironment,
+  isConcurrentActEnvironment,
+} from './ReactFiberAct';
+import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent';
+import {
+  SuspenseException,
+  SuspenseActionException,
+  SuspenseyCommitException,
+  getSuspendedThenable,
+  isThenableResolved,
+} from './ReactFiberThenable';
+import {schedulePostPaintCallback} from './ReactPostPaintCallback';
+import {
+  getSuspenseHandler,
+  getShellBoundary,
+} from './ReactFiberSuspenseContext';
+import {resetChildReconcilerOnUnwind} from './ReactChildFiber';
+import {
+  ensureRootIsScheduled,
+  flushSyncWorkOnAllRoots,
+  flushSyncWorkOnLegacyRootsOnly,
+  requestTransitionLane,
+} from './ReactFiberRootScheduler';
+import {getMaskedContext, getUnmaskedContext} from './ReactFiberLegacyContext';
+import {logUncaughtError} from './ReactFiberErrorLogger';
+import {
+  scheduleGestureCommit,
+  stopCommittedGesture,
+} from './ReactFiberGestureScheduler';
+import {claimQueuedTransitionTypes} from './ReactFiberTransitionTypes';
+
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+
+type ExecutionContext = number;
+
+export const NoContext = /*             */ 0b000;
+const BatchedContext = /*               */ 0b001;
+export const RenderContext = /*         */ 0b010;
+export const CommitContext = /*         */ 0b100;
+
+type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+const RootInProgress = 0;
+const RootFatalErrored = 1;
+const RootErrored = 2;
+const RootSuspended = 3;
+const RootSuspendedWithDelay = 4;
+const RootSuspendedAtTheShell = 6;
+const RootCompleted = 5;
+
+// 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
+let workInProgress: Fiber | null = null;
+// The lanes we're rendering
+let workInProgressRootRenderLanes: Lanes = NoLanes;
+
+export opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+const NotSuspended: SuspendedReason = 0;
+const SuspendedOnError: SuspendedReason = 1;
+const SuspendedOnData: SuspendedReason = 2;
+const SuspendedOnImmediate: SuspendedReason = 3;
+const SuspendedOnInstance: SuspendedReason = 4;
+const SuspendedOnInstanceAndReadyToContinue: SuspendedReason = 5;
+const SuspendedOnDeprecatedThrowPromise: SuspendedReason = 6;
+const SuspendedAndReadyToContinue: SuspendedReason = 7;
+const SuspendedOnHydration: SuspendedReason = 8;
+const SuspendedOnAction: SuspendedReason = 9;
+
+// When this is true, the work-in-progress fiber just suspended (or errored) and
+// we've yet to unwind the stack. In some cases, we may yield to the main thread
+// after this happens. If the fiber is pinged before we resume, we can retry
+// immediately instead of unwinding the stack.
+let workInProgressSuspendedReason: SuspendedReason = NotSuspended;
+let workInProgressThrownValue: mixed = null;
+
+// Tracks whether any siblings were skipped during the unwind phase after
+// something suspends. Used to determine whether to schedule another render
+// to prewarm the skipped siblings.
+let workInProgressRootDidSkipSuspendedSiblings: boolean = false;
+// Whether the work-in-progress render is the result of a prewarm/prerender.
+// This tells us whether or not we should render the siblings after
+// something suspends.
+let workInProgressRootIsPrerendering: boolean = false;
+
+// Whether a ping listener was attached during this render. This is slightly
+// different that whether something suspended, because we don't add multiple
+// listeners to a promise we've already seen (per root and lane).
+let workInProgressRootDidAttachPingListener: boolean = false;
+
+// A contextual version of workInProgressRootRenderLanes. It is a superset of
+// the lanes that we started working on at the root. When we enter a subtree
+// that is currently hidden, we add the lanes that would have committed if
+// the hidden tree hadn't been deferred. This is modified by the
+// HiddenContext module.
+//
+// Most things in the work loop should deal with workInProgressRootRenderLanes.
+// Most things in begin/complete phases should deal with entangledRenderLanes.
+export let entangledRenderLanes: Lanes = NoLanes;
+
+// Whether to root completed, errored, suspended, etc.
+let workInProgressRootExitStatus: RootExitStatus = RootInProgress;
+// The work left over by components that were visited during this render. Only
+// includes unprocessed updates, not work in bailed out children.
+let workInProgressRootSkippedLanes: Lanes = NoLanes;
+// Lanes that were updated (in an interleaved event) during this render.
+let workInProgressRootInterleavedUpdatedLanes: Lanes = NoLanes;
+// Lanes that were updated during the render phase (*not* an interleaved event).
+let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
+// Lanes that were pinged (in an interleaved event) during this render.
+let workInProgressRootPingedLanes: Lanes = NoLanes;
+// If this render scheduled deferred work, this is the lane of the deferred task.
+let workInProgressDeferredLane: Lane = NoLane;
+// Represents the retry lanes that were spawned by this render and have not
+// been pinged since, implying that they are still suspended.
+let workInProgressSuspendedRetryLanes: Lanes = NoLanes;
+// Errors that are thrown during the render phase.
+let workInProgressRootConcurrentErrors: Array<CapturedValue<mixed>> | null =
+  null;
+// These are errors that we recovered from without surfacing them to the UI.
+// We will log them once the tree commits.
+let workInProgressRootRecoverableErrors: Array<CapturedValue<mixed>> | null =
+  null;
+
+// Tracks when an update occurs during the render phase.
+let workInProgressRootDidIncludeRecursiveRenderUpdate: boolean = false;
+// Thacks when an update occurs during the commit phase. It's a separate
+// variable from the one for renders because the commit phase may run
+// concurrently to a render phase.
+let didIncludeCommitPhaseUpdate: boolean = false;
+// The most recent time we either committed a fallback, or when a fallback was
+// filled in with the resolved UI. This lets us throttle the appearance of new
+// content as it streams in, to minimize jank.
+// TODO: Think of a better name for this variable?
+let globalMostRecentFallbackTime: number = 0;
+// Track the most recent time we started a new Transition. This lets us apply
+// heuristics like the suspensey image timeout based on how long we've waited
+// already.
+let globalMostRecentTransitionTime: number = 0;
+
+const FALLBACK_THROTTLE_MS: number = 300;
+
+// The absolute time for when we should start giving up on rendering
+// more and prefer CPU suspense heuristics instead.
+let workInProgressRootRenderTargetTime: number = Infinity;
+// How long a render is supposed to take before we start following CPU
+// suspense heuristics and opt out of rendering more content.
+const RENDER_TIMEOUT_MS = 500;
+
+let workInProgressTransitions: Array<Transition> | null = null;
+export function getWorkInProgressTransitions(): null | Array<Transition> {
+  return workInProgressTransitions;
+}
+
+// The first setState call that eventually caused the current render.
+let workInProgressUpdateTask: null | ConsoleTask = null;
+
+let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
+let currentEndTime: number | null = null;
+
+export function addTransitionStartCallbackToPendingTransition(
+  transition: Transition,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: [],
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionStart === null) {
+      currentPendingTransitionCallbacks.transitionStart =
+        ([]: Array<Transition>);
+    }
+
+    currentPendingTransitionCallbacks.transitionStart.push(transition);
+  }
+}
+
+export function addMarkerProgressCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  pendingBoundaries: PendingBoundaries,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = ({
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: new Map(),
+        markerIncomplete: null,
+        markerComplete: null,
+      }: PendingTransitionCallbacks);
+    }
+
+    if (currentPendingTransitionCallbacks.markerProgress === null) {
+      currentPendingTransitionCallbacks.markerProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerProgress.set(markerName, {
+      pendingBoundaries,
+      transitions,
+    });
+  }
+}
+
+export function addMarkerIncompleteCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  aborts: Array<TransitionAbort>,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerIncomplete === null) {
+      currentPendingTransitionCallbacks.markerIncomplete = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerIncomplete.set(markerName, {
+      transitions,
+      aborts,
+    });
+  }
+}
+
+export function addMarkerCompleteCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: null,
+        markerComplete: new Map(),
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerComplete === null) {
+      currentPendingTransitionCallbacks.markerComplete = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerComplete.set(
+      markerName,
+      transitions,
+    );
+  }
+}
+
+export function addTransitionProgressCallbackToPendingTransition(
+  transition: Transition,
+  boundaries: PendingBoundaries,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: new Map(),
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionProgress === null) {
+      currentPendingTransitionCallbacks.transitionProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.transitionProgress.set(
+      transition,
+      boundaries,
+    );
+  }
+}
+
+export function addTransitionCompleteCallbackToPendingTransition(
+  transition: Transition,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: [],
+        markerProgress: null,
+        markerIncomplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionComplete === null) {
+      currentPendingTransitionCallbacks.transitionComplete =
+        ([]: Array<Transition>);
+    }
+
+    currentPendingTransitionCallbacks.transitionComplete.push(transition);
+  }
+}
+
+function resetRenderTimer() {
+  workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
+}
+
+export function getRenderTargetTime(): number {
+  return workInProgressRootRenderTargetTime;
+}
+
+let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
+
+type SuspendedCommitReason = null | string;
+
+type DelayedCommitReason = 0 | 1 | 2 | 3;
+const IMMEDIATE_COMMIT = 0;
+const ABORTED_VIEW_TRANSITION_COMMIT = 1;
+const DELAYED_PASSIVE_COMMIT = 2;
+const ANIMATION_STARTED_COMMIT = 3;
+
+const NO_PENDING_EFFECTS = 0;
+const PENDING_MUTATION_PHASE = 1;
+const PENDING_LAYOUT_PHASE = 2;
+const PENDING_AFTER_MUTATION_PHASE = 3;
+const PENDING_SPAWNED_WORK = 4;
+const PENDING_PASSIVE_PHASE = 5;
+const PENDING_GESTURE_MUTATION_PHASE = 6;
+const PENDING_GESTURE_ANIMATION_PHASE = 7;
+let pendingEffectsStatus: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 = 0;
+let pendingEffectsRoot: FiberRoot = (null: any);
+let pendingFinishedWork: Fiber = (null: any);
+let pendingEffectsLanes: Lanes = NoLanes;
+let pendingEffectsRemainingLanes: Lanes = NoLanes;
+let pendingEffectsRenderEndTime: number = -0; // Profiling-only
+let pendingPassiveTransitions: Array<Transition> | null = null;
+let pendingRecoverableErrors: null | Array<CapturedValue<mixed>> = null;
+let pendingViewTransition: null | RunningViewTransition = null;
+let pendingViewTransitionEvents: Array<
+  (types: Array<string>) => void | (() => void),
+> | null = null;
+let pendingTransitionTypes: null | TransitionTypes = null;
+let pendingDidIncludeRenderPhaseUpdate: boolean = false;
+let pendingSuspendedCommitReason: SuspendedCommitReason = null; // Profiling-only
+let pendingDelayedCommitReason: DelayedCommitReason = IMMEDIATE_COMMIT; // Profiling-only
+let pendingSuspendedViewTransitionReason: null | string = null; // Profiling-only
+
+// Use these to prevent an infinite loop of nested updates
+const NESTED_UPDATE_LIMIT = 50;
+let nestedUpdateCount: number = 0;
+let rootWithNestedUpdates: FiberRoot | null = null;
+let isFlushingPassiveEffects = false;
+let didScheduleUpdateDuringPassiveEffects = false;
+
+const NESTED_PASSIVE_UPDATE_LIMIT = 50;
+let nestedPassiveUpdateCount: number = 0;
+let rootWithPassiveNestedUpdates: FiberRoot | null = null;
+
+let isRunningInsertionEffect = false;
+
+export function getWorkInProgressRoot(): FiberRoot | null {
+  return workInProgressRoot;
+}
+
+export function getCommittingRoot(): FiberRoot | null {
+  return pendingEffectsRoot;
+}
+
+export function getWorkInProgressRootRenderLanes(): Lanes {
+  return workInProgressRootRenderLanes;
+}
+
+export function hasPendingCommitEffects(): boolean {
+  return (
+    pendingEffectsStatus !== NO_PENDING_EFFECTS &&
+    pendingEffectsStatus !== PENDING_PASSIVE_PHASE
+  );
+}
+
+export function getRootWithPendingPassiveEffects(): FiberRoot | null {
+  return pendingEffectsStatus === PENDING_PASSIVE_PHASE
+    ? pendingEffectsRoot
+    : null;
+}
+
+export function getPendingPassiveEffectsLanes(): Lanes {
+  return pendingEffectsLanes;
+}
+
+export function getPendingTransitionTypes(): null | TransitionTypes {
+  return pendingTransitionTypes;
+}
+
+export function isWorkLoopSuspendedOnData(): boolean {
+  return (
+    workInProgressSuspendedReason === SuspendedOnData ||
+    workInProgressSuspendedReason === SuspendedOnAction
+  );
+}
+
+export function getCurrentTime(): number {
+  return now();
+}
+
+export function requestUpdateLane(fiber: Fiber): Lane {
+  // Special cases
+  const mode = fiber.mode;
+  if (!disableLegacyMode && (mode & ConcurrentMode) === NoMode) {
+    return (SyncLane: Lane);
+  } else if (
+    (executionContext & RenderContext) !== NoContext &&
+    workInProgressRootRenderLanes !== NoLanes
+  ) {
+    // This is a render phase update. These are not officially supported. The
+    // old behavior is to give this the same "thread" (lanes) as
+    // whatever is currently rendering. So if you call `setState` on a component
+    // that happens later in the same render, it will flush. Ideally, we want to
+    // remove the special case and treat them as if they came from an
+    // interleaved event. Regardless, this pattern is not officially supported.
+    // This behavior is only a fallback. The flag only exists until we can roll
+    // out the setState warning, since existing code might accidentally rely on
+    // the current behavior.
+    return pickArbitraryLane(workInProgressRootRenderLanes);
+  }
+
+  const transition = requestCurrentTransition();
+  if (transition !== null) {
+    if (enableGestureTransition) {
+      if (transition.gesture) {
+        throw new Error(
+          'Cannot setState on regular state inside a startGestureTransition. ' +
+            'Gestures can only update the useOptimistic() hook. There should be no ' +
+            'side-effects associated with starting a Gesture until its Action is ' +
+            'invoked. Move side-effects to the Action instead.',
+        );
+      }
+    }
+    if (__DEV__) {
+      if (!transition._updatedFibers) {
+        transition._updatedFibers = new Set();
+      }
+      transition._updatedFibers.add(fiber);
+    }
+
+    return requestTransitionLane(transition);
+  }
+
+  return eventPriorityToLane(resolveUpdatePriority());
+}
+
+function requestRetryLane(fiber: Fiber) {
+  // This is a fork of `requestUpdateLane` designed specifically for Suspense
+  // "retries" — a special update that attempts to flip a Suspense boundary
+  // from its placeholder state to its primary/resolved state.
+
+  // Special cases
+  const mode = fiber.mode;
+  if (!disableLegacyMode && (mode & ConcurrentMode) === NoMode) {
+    return (SyncLane: Lane);
+  }
+
+  return claimNextRetryLane();
+}
+
+export function requestDeferredLane(): Lane {
+  if (workInProgressDeferredLane === NoLane) {
+    // If there are multiple useDeferredValue hooks in the same render, the
+    // tasks that they spawn should all be batched together, so they should all
+    // receive the same lane.
+
+    // Check the priority of the current render to decide the priority of the
+    // deferred task.
+
+    // OffscreenLane is used for prerendering, but we also use OffscreenLane
+    // for incremental hydration. It's given the lowest priority because the
+    // initial HTML is the same as the final UI. But useDeferredValue during
+    // hydration is an exception — we need to upgrade the UI to the final
+    // value. So if we're currently hydrating, we treat it like a transition.
+    const isPrerendering =
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane) &&
+      !getIsHydrating();
+    if (isPrerendering) {
+      // There's only one OffscreenLane, so if it contains deferred work, we
+      // should just reschedule using the same lane.
+      workInProgressDeferredLane = OffscreenLane;
+    } else {
+      // Everything else is spawned as a transition.
+      workInProgressDeferredLane = claimNextTransitionDeferredLane();
+    }
+  }
+
+  // Mark the parent Suspense boundary so it knows to spawn the deferred lane.
+  const suspenseHandler = getSuspenseHandler();
+  if (suspenseHandler !== null) {
+    // TODO: As an optimization, we shouldn't entangle the lanes at the root; we
+    // can entangle them using the baseLanes of the Suspense boundary instead.
+    // We only need to do something special if there's no Suspense boundary.
+    suspenseHandler.flags |= DidDefer;
+  }
+
+  return workInProgressDeferredLane;
+}
+
+export function scheduleViewTransitionEvent(
+  fiber: Fiber,
+  callback: ?(
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+): void {
+  if (enableViewTransition) {
+    if (callback != null) {
+      const state: ViewTransitionState = fiber.stateNode;
+      let instance = state.ref;
+      if (instance === null) {
+        instance = state.ref = createViewTransitionInstance(
+          getViewTransitionName(fiber.memoizedProps, state),
+        );
+      }
+      if (pendingViewTransitionEvents === null) {
+        pendingViewTransitionEvents = [];
+      }
+      pendingViewTransitionEvents.push(callback.bind(null, instance));
+    }
+  }
+}
+
+export function scheduleGestureTransitionEvent(
+  fiber: Fiber,
+  callback: ?(
+    timeline: GestureTimeline,
+    options: GestureOptionsRequired,
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+): void {
+  if (enableGestureTransition) {
+    if (callback != null) {
+      const applyingGesture = pendingEffectsRoot.pendingGestures;
+      if (applyingGesture !== null) {
+        const state: ViewTransitionState = fiber.stateNode;
+        let instance = state.ref;
+        if (instance === null) {
+          instance = state.ref = createViewTransitionInstance(
+            getViewTransitionName(fiber.memoizedProps, state),
+          );
+        }
+        const timeline = applyingGesture.provider;
+        const options = {
+          rangeStart: applyingGesture.rangeStart,
+          rangeEnd: applyingGesture.rangeEnd,
+        };
+        if (pendingViewTransitionEvents === null) {
+          pendingViewTransitionEvents = [];
+        }
+        pendingViewTransitionEvents.push(
+          callback.bind(null, timeline, options, instance),
+        );
+      }
+    }
+  }
+}
+
+export function peekDeferredLane(): Lane {
+  return workInProgressDeferredLane;
+}
+
+export function scheduleUpdateOnFiber(
+  root: FiberRoot,
+  fiber: Fiber,
+  lane: Lane,
+) {
+  if (__DEV__) {
+    if (isRunningInsertionEffect) {
+      console.error('useInsertionEffect must not schedule updates.');
+    }
+  }
+
+  if (__DEV__) {
+    if (isFlushingPassiveEffects) {
+      didScheduleUpdateDuringPassiveEffects = true;
+    }
+  }
+
+  // Check if the work loop is currently suspended and waiting for data to
+  // finish loading.
+  if (
+    // Suspended render phase
+    (root === workInProgressRoot &&
+      (workInProgressSuspendedReason === SuspendedOnData ||
+        workInProgressSuspendedReason === SuspendedOnAction)) ||
+    // Suspended commit phase
+    root.cancelPendingCommit !== null
+  ) {
+    // The incoming update might unblock the current render. Interrupt the
+    // current attempt and restart from the top.
+    prepareFreshStack(root, NoLanes);
+    const didAttemptEntireTree = false;
+    markRootSuspended(
+      root,
+      workInProgressRootRenderLanes,
+      workInProgressDeferredLane,
+      didAttemptEntireTree,
+    );
+  }
+
+  // Mark that the root has a pending update.
+  markRootUpdated(root, lane);
+
+  if (
+    (executionContext & RenderContext) !== NoContext &&
+    root === workInProgressRoot
+  ) {
+    // This update was dispatched during the render phase. This is a mistake
+    // if the update originates from user space (with the exception of local
+    // hook updates, which are handled differently and don't reach this
+    // function), but there are some internal React features that use this as
+    // an implementation detail, like selective hydration.
+    warnAboutRenderPhaseUpdatesInDEV(fiber);
+
+    // Track lanes that were updated during the render phase
+    workInProgressRootRenderPhaseUpdatedLanes = mergeLanes(
+      workInProgressRootRenderPhaseUpdatedLanes,
+      lane,
+    );
+  } else {
+    // This is a normal update, scheduled from outside the render phase. For
+    // example, during an input event.
+    if (enableUpdaterTracking) {
+      if (isDevToolsPresent) {
+        addFiberToLanesMap(root, fiber, lane);
+      }
+    }
+
+    warnIfUpdatesNotWrappedWithActDEV(fiber);
+
+    if (enableTransitionTracing) {
+      const transition = ReactSharedInternals.T;
+      if (transition !== null && transition.name != null) {
+        if (transition.startTime === -1) {
+          transition.startTime = now();
+        }
+
+        addTransitionToLanesMap(root, transition, lane);
+      }
+    }
+
+    if (root === workInProgressRoot) {
+      // Received an update to a tree that's in the middle of rendering. Mark
+      // that there was an interleaved update work on this root.
+      if ((executionContext & RenderContext) === NoContext) {
+        workInProgressRootInterleavedUpdatedLanes = mergeLanes(
+          workInProgressRootInterleavedUpdatedLanes,
+          lane,
+        );
+      }
+      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: Make sure this doesn't override pings that happen while we've
+        // already started rendering.
+        const didAttemptEntireTree = false;
+        markRootSuspended(
+          root,
+          workInProgressRootRenderLanes,
+          workInProgressDeferredLane,
+          didAttemptEntireTree,
+        );
+      }
+    }
+
+    ensureRootIsScheduled(root);
+    if (
+      lane === SyncLane &&
+      executionContext === NoContext &&
+      !disableLegacyMode &&
+      (fiber.mode & ConcurrentMode) === NoMode
+    ) {
+      if (__DEV__ && ReactSharedInternals.isBatchingLegacy) {
+        // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      } else {
+        // 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-initiated
+        // updates, to preserve historical behavior of legacy mode.
+        resetRenderTimer();
+        flushSyncWorkOnLegacyRootsOnly();
+      }
+    }
+  }
+}
+
+export function scheduleInitialHydrationOnRoot(root: FiberRoot, lane: Lane) {
+  // This is a special fork of scheduleUpdateOnFiber that is only used to
+  // schedule the initial hydration of a root that has just been created. Most
+  // of the stuff in scheduleUpdateOnFiber can be skipped.
+  //
+  // The main reason for this separate path, though, is to distinguish the
+  // initial children from subsequent updates. In fully client-rendered roots
+  // (createRoot instead of hydrateRoot), all top-level renders are modeled as
+  // updates, but hydration roots are special because the initial render must
+  // match what was rendered on the server.
+  const current = root.current;
+  current.lanes = lane;
+  markRootUpdated(root, lane);
+  ensureRootIsScheduled(root);
+}
+
+export function isUnsafeClassRenderPhaseUpdate(fiber: Fiber): boolean {
+  // Check if this is a render phase update. Only called by class components,
+  // which special (deprecated) behavior for UNSAFE_componentWillReceive props.
+  return (executionContext & RenderContext) !== NoContext;
+}
+
+export function performWorkOnRoot(
+  root: FiberRoot,
+  lanes: Lanes,
+  forceSync: boolean,
+): void {
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (workInProgressRootRenderLanes !== NoLanes && workInProgress !== null) {
+      const yieldedFiber = workInProgress;
+      // We've returned from yielding to the event loop. Let's log the time it took.
+      const yieldEndTime = now();
+      switch (yieldReason) {
+        case SuspendedOnImmediate:
+        case SuspendedOnData:
+          logSuspendedYieldTime(yieldStartTime, yieldEndTime, yieldedFiber);
+          break;
+        case SuspendedOnAction:
+          logActionYieldTime(yieldStartTime, yieldEndTime, yieldedFiber);
+          break;
+        default:
+          logYieldTime(yieldStartTime, yieldEndTime);
+      }
+    }
+  }
+
+  // We disable time-slicing in some cases: if the work has been CPU-bound
+  // for too long ("expired" work, to prevent starvation), or we're in
+  // sync-updates-by-default mode.
+  const shouldTimeSlice =
+    (!forceSync &&
+      !includesBlockingLane(lanes) &&
+      !includesExpiredLane(root, lanes)) ||
+    // If we're prerendering, then we should use the concurrent work loop
+    // even if the lanes are synchronous, so that prerendering never blocks
+    // the main thread.
+    // TODO: We should consider doing this whenever a sync lane is suspended,
+    // even for regular pings.
+    checkIfRootIsPrerendering(root, lanes);
+
+  let exitStatus: RootExitStatus = shouldTimeSlice
+    ? renderRootConcurrent(root, lanes)
+    : renderRootSync(root, lanes, true);
+
+  let renderWasConcurrent = shouldTimeSlice;
+
+  do {
+    if (exitStatus === RootInProgress) {
+      // Render phase is still in progress.
+      if (workInProgressRootIsPrerendering && !shouldTimeSlice) {
+        // We're in prerendering mode, but time slicing is not enabled. This
+        // happens when something suspends during a synchronous update. Exit the
+        // the work loop. When we resume, we'll use the concurrent work loop so
+        // that prerendering is non-blocking.
+        //
+        // Mark the root as suspended. Usually we do this at the end of the
+        // render phase, but we do it here so that we resume in
+        // prerendering mode.
+        // TODO: Consider always calling markRootSuspended immediately.
+        // Needs to be *after* we attach a ping listener, though.
+        const didAttemptEntireTree = false;
+        markRootSuspended(root, lanes, NoLane, didAttemptEntireTree);
+      }
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        // We're about to yield. Let's keep track of how long we yield to the event loop.
+        // We also stash the suspended reason at the time we yielded since it might have
+        // changed when we resume such as when it gets pinged.
+        startYieldTimer(workInProgressSuspendedReason);
+      }
+      break;
+    } else {
+      let renderEndTime = 0;
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        renderEndTime = now();
+      }
+
+      // The render completed.
+
+      // Check if this render may have yielded to a concurrent event, and if so,
+      // confirm that any newly rendered stores are consistent.
+      // TODO: It's possible that even a concurrent render may never have yielded
+      // to the main thread, if it was fast enough, or if it expired. We could
+      // skip the consistency check in that case, too.
+      const finishedWork: Fiber = (root.current.alternate: any);
+      if (
+        renderWasConcurrent &&
+        !isRenderConsistentWithExternalStores(finishedWork)
+      ) {
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          setCurrentTrackFromLanes(lanes);
+          logInconsistentRender(
+            renderStartTime,
+            renderEndTime,
+            workInProgressUpdateTask,
+          );
+          finalizeRender(lanes, renderEndTime);
+        }
+        // A store was mutated in an interleaved event. Render again,
+        // synchronously, to block further mutations.
+        exitStatus = renderRootSync(root, lanes, false);
+        // We assume the tree is now consistent because we didn't yield to any
+        // concurrent events.
+        renderWasConcurrent = false;
+        // Need to check the exit status again.
+        continue;
+      }
+
+      // Check if something threw
+      if (
+        (disableLegacyMode || root.tag !== LegacyRoot) &&
+        exitStatus === RootErrored
+      ) {
+        const lanesThatJustErrored = lanes;
+        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+          root,
+          lanesThatJustErrored,
+        );
+        if (errorRetryLanes !== NoLanes) {
+          if (enableProfilerTimer && enableComponentPerformanceTrack) {
+            setCurrentTrackFromLanes(lanes);
+            logErroredRenderPhase(
+              renderStartTime,
+              renderEndTime,
+              lanes,
+              workInProgressUpdateTask,
+            );
+            finalizeRender(lanes, renderEndTime);
+          }
+          lanes = errorRetryLanes;
+          exitStatus = recoverFromConcurrentError(
+            root,
+            lanesThatJustErrored,
+            errorRetryLanes,
+          );
+          renderWasConcurrent = false;
+          // Need to check the exit status again.
+          if (exitStatus !== RootErrored) {
+            // The root did not error this time. Restart the exit algorithm
+            // from the beginning.
+            // TODO: Refactor the exit algorithm to be less confusing. Maybe
+            // more branches + recursion instead of a loop. I think the only
+            // thing that causes it to be a loop is the RootSuspendedAtTheShell
+            // check. If that's true, then we don't need a loop/recursion
+            // at all.
+            continue;
+          } else {
+            // The root errored yet again. Proceed to commit the tree.
+            if (enableProfilerTimer && enableComponentPerformanceTrack) {
+              renderEndTime = now();
+            }
+          }
+        }
+      }
+      if (exitStatus === RootFatalErrored) {
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          setCurrentTrackFromLanes(lanes);
+          logErroredRenderPhase(
+            renderStartTime,
+            renderEndTime,
+            lanes,
+            workInProgressUpdateTask,
+          );
+          finalizeRender(lanes, renderEndTime);
+        }
+        prepareFreshStack(root, NoLanes);
+        // Since this is a fatal error, we're going to pretend we attempted
+        // the entire tree, to avoid scheduling a prerender.
+        const didAttemptEntireTree = true;
+        markRootSuspended(root, lanes, NoLane, didAttemptEntireTree);
+        break;
+      }
+
+      // 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.
+      finishConcurrentRender(
+        root,
+        exitStatus,
+        finishedWork,
+        lanes,
+        renderEndTime,
+      );
+    }
+    break;
+  } while (true);
+
+  ensureRootIsScheduled(root);
+}
+
+function recoverFromConcurrentError(
+  root: FiberRoot,
+  originallyAttemptedLanes: Lanes,
+  errorRetryLanes: Lanes,
+): RootExitStatus {
+  // If an error occurred during hydration, discard server response and fall
+  // back to client side render.
+
+  // Before rendering again, save the errors from the previous attempt.
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
+
+  const wasRootDehydrated = supportsHydration && isRootDehydrated(root);
+  if (wasRootDehydrated) {
+    // The shell failed to hydrate. Set a flag to force a client rendering
+    // during the next attempt. To do this, we call prepareFreshStack now
+    // to create the root work-in-progress fiber. This is a bit weird in terms
+    // of factoring, because it relies on renderRootSync not calling
+    // prepareFreshStack again in the call below, which happens because the
+    // root and lanes haven't changed.
+    //
+    // TODO: I think what we should do is set ForceClientRender inside
+    // throwException, like we do for nested Suspense boundaries. The reason
+    // it's here instead is so we can switch to the synchronous work loop, too.
+    // Something to consider for a future refactor.
+    const rootWorkInProgress = prepareFreshStack(root, errorRetryLanes);
+    rootWorkInProgress.flags |= ForceClientRender;
+  }
+
+  const exitStatus = renderRootSync(root, errorRetryLanes, false);
+  if (exitStatus !== RootErrored) {
+    // Successfully finished rendering on retry
+
+    if (workInProgressRootDidAttachPingListener && !wasRootDehydrated) {
+      // During the synchronous render, we attached additional ping listeners.
+      // This is highly suggestive of an uncached promise (though it's not the
+      // only reason this would happen). If it was an uncached promise, then
+      // it may have masked a downstream error from ocurring without actually
+      // fixing it. Example:
+      //
+      //    use(Promise.resolve('uncached'))
+      //    throw new Error('Oops!')
+      //
+      // When this happens, there's a conflict between blocking potential
+      // concurrent data races and unwrapping uncached promise values. We
+      // have to choose one or the other. Because the data race recovery is
+      // a last ditch effort, we'll disable it.
+      root.errorRecoveryDisabledLanes = mergeLanes(
+        root.errorRecoveryDisabledLanes,
+        originallyAttemptedLanes,
+      );
+
+      // Mark the current render as suspended and force it to restart. Once
+      // these lanes finish successfully, we'll re-enable the error recovery
+      // mechanism for subsequent updates.
+      workInProgressRootInterleavedUpdatedLanes |= originallyAttemptedLanes;
+      return RootSuspendedWithDelay;
+    }
+
+    // The errors from the failed first attempt have been recovered. Add
+    // them to the collection of recoverable errors. We'll log them in the
+    // commit phase.
+    const errorsFromSecondAttempt = workInProgressRootRecoverableErrors;
+    workInProgressRootRecoverableErrors = errorsFromFirstAttempt;
+    // The errors from the second attempt should be queued after the errors
+    // from the first attempt, to preserve the causal sequence.
+    if (errorsFromSecondAttempt !== null) {
+      queueRecoverableErrors(errorsFromSecondAttempt);
+    }
+  } else {
+    // The UI failed to recover.
+  }
+  return exitStatus;
+}
+
+export function queueRecoverableErrors(errors: Array<CapturedValue<mixed>>) {
+  if (workInProgressRootRecoverableErrors === null) {
+    workInProgressRootRecoverableErrors = errors;
+  } else {
+    // $FlowFixMe[method-unbinding]
+    workInProgressRootRecoverableErrors.push.apply(
+      workInProgressRootRecoverableErrors,
+      errors,
+    );
+  }
+}
+
+function finishConcurrentRender(
+  root: FiberRoot,
+  exitStatus: RootExitStatus,
+  finishedWork: Fiber,
+  lanes: Lanes,
+  renderEndTime: number, // Profiling-only
+) {
+  // TODO: The fact that most of these branches are identical suggests that some
+  // of the exit statuses are not best modeled as exit statuses and should be
+  // tracked orthogonally.
+  switch (exitStatus) {
+    case RootInProgress:
+    case RootFatalErrored: {
+      throw new Error('Root did not complete. This is a bug in React.');
+    }
+    case RootSuspendedWithDelay: {
+      if (!includesOnlyTransitions(lanes) && !includesOnlyRetries(lanes)) {
+        // Commit the placeholder.
+        break;
+      }
+    }
+    // Fallthrough
+    case RootSuspendedAtTheShell: {
+      // This is a transition, so we should exit without committing a
+      // placeholder and without scheduling a timeout. Delay indefinitely
+      // until we receive more data.
+      if (enableProfilerTimer && enableComponentPerformanceTrack) {
+        setCurrentTrackFromLanes(lanes);
+        logSuspendedRenderPhase(
+          renderStartTime,
+          renderEndTime,
+          lanes,
+          workInProgressUpdateTask,
+        );
+        finalizeRender(lanes, renderEndTime);
+        trackSuspendedTime(lanes, renderEndTime);
+      }
+      const didAttemptEntireTree = !workInProgressRootDidSkipSuspendedSiblings;
+      markRootSuspended(
+        root,
+        lanes,
+        workInProgressDeferredLane,
+        didAttemptEntireTree,
+      );
+      return;
+    }
+    case RootErrored: {
+      // This render errored. Ignore any recoverable errors because we weren't actually
+      // able to recover. Instead, whatever the final errors were is the ones we log.
+      // This ensures that we only log the actual client side error if it's just a plain
+      // error thrown from a component on the server and the client.
+      workInProgressRootRecoverableErrors = null;
+      break;
+    }
+    case RootSuspended:
+    case RootCompleted: {
+      break;
+    }
+    default: {
+      throw new Error('Unknown root exit status.');
+    }
+  }
+
+  if (shouldForceFlushFallbacksInDEV()) {
+    // We're inside an `act` scope. Commit immediately.
+    completeRoot(
+      root,
+      finishedWork,
+      lanes,
+      workInProgressRootRecoverableErrors,
+      workInProgressTransitions,
+      workInProgressRootDidIncludeRecursiveRenderUpdate,
+      workInProgressDeferredLane,
+      workInProgressRootInterleavedUpdatedLanes,
+      workInProgressSuspendedRetryLanes,
+      workInProgressRootDidSkipSuspendedSiblings,
+      exitStatus,
+      null,
+      null,
+      renderStartTime,
+      renderEndTime,
+    );
+  } else {
+    if (
+      includesOnlyRetries(lanes) &&
+      (alwaysThrottleRetries || exitStatus === RootSuspended)
+    ) {
+      // This render only included retries, no updates. Throttle committing
+      // retries so that we don't show too many loading states too quickly.
+      const msUntilTimeout =
+        globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();
+
+      // Don't bother with a very short suspense time.
+      if (msUntilTimeout > 10) {
+        const didAttemptEntireTree =
+          !workInProgressRootDidSkipSuspendedSiblings;
+        markRootSuspended(
+          root,
+          lanes,
+          workInProgressDeferredLane,
+          didAttemptEntireTree,
+        );
+
+        const nextLanes = getNextLanes(root, NoLanes, true);
+        if (nextLanes !== NoLanes) {
+          // There's additional work we can do on this root. We might as well
+          // attempt to work on that while we're suspended.
+          return;
+        }
+
+        // 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.
+        // TODO: Combine retry throttling with Suspensey commits. Right now they
+        // run one after the other.
+        pendingEffectsLanes = lanes;
+        root.timeoutHandle = scheduleTimeout(
+          completeRootWhenReady.bind(
+            null,
+            root,
+            finishedWork,
+            workInProgressRootRecoverableErrors,
+            workInProgressTransitions,
+            workInProgressRootDidIncludeRecursiveRenderUpdate,
+            lanes,
+            workInProgressDeferredLane,
+            workInProgressRootInterleavedUpdatedLanes,
+            workInProgressSuspendedRetryLanes,
+            workInProgressRootDidSkipSuspendedSiblings,
+            exitStatus,
+            'Throttled',
+            renderStartTime,
+            renderEndTime,
+          ),
+          msUntilTimeout,
+        );
+        return;
+      }
+    }
+    completeRootWhenReady(
+      root,
+      finishedWork,
+      workInProgressRootRecoverableErrors,
+      workInProgressTransitions,
+      workInProgressRootDidIncludeRecursiveRenderUpdate,
+      lanes,
+      workInProgressDeferredLane,
+      workInProgressRootInterleavedUpdatedLanes,
+      workInProgressSuspendedRetryLanes,
+      workInProgressRootDidSkipSuspendedSiblings,
+      exitStatus,
+      null,
+      renderStartTime,
+      renderEndTime,
+    );
+  }
+}
+
+function completeRootWhenReady(
+  root: FiberRoot,
+  finishedWork: Fiber,
+  recoverableErrors: Array<CapturedValue<mixed>> | null,
+  transitions: Array<Transition> | null,
+  didIncludeRenderPhaseUpdate: boolean,
+  lanes: Lanes,
+  spawnedLane: Lane,
+  updatedLanes: Lanes,
+  suspendedRetryLanes: Lanes,
+  didSkipSuspendedSiblings: boolean,
+  exitStatus: RootExitStatus,
+  suspendedCommitReason: SuspendedCommitReason, // Profiling-only
+  completedRenderStartTime: number, // Profiling-only
+  completedRenderEndTime: number, // Profiling-only
+) {
+  root.timeoutHandle = noTimeout;
+
+  // TODO: Combine retry throttling with Suspensey commits. Right now they run
+  // one after the other.
+  const BothVisibilityAndMaySuspendCommit = Visibility | MaySuspendCommit;
+  const subtreeFlags = finishedWork.subtreeFlags;
+  const isViewTransitionEligible =
+    enableViewTransition && includesOnlyViewTransitionEligibleLanes(lanes); // TODO: Use a subtreeFlag to optimize.
+  const isGestureTransition = enableGestureTransition && isGestureRender(lanes);
+  const maySuspendCommit =
+    subtreeFlags & ShouldSuspendCommit ||
+    (subtreeFlags & BothVisibilityAndMaySuspendCommit) ===
+      BothVisibilityAndMaySuspendCommit;
+  let suspendedState: null | SuspendedState = null;
+  if (isViewTransitionEligible || maySuspendCommit || isGestureTransition) {
+    // Before committing, ask the renderer whether the host tree is ready.
+    // If it's not, we'll wait until it notifies us.
+    suspendedState = startSuspendingCommit();
+    // This will walk the completed fiber tree and attach listeners to all
+    // the suspensey resources. The renderer is responsible for accumulating
+    // all the load events. This all happens in a single synchronous
+    // transaction, so it track state in its own module scope.
+    // This will also track any newly added or appearing ViewTransition
+    // components for the purposes of forming pairs.
+    accumulateSuspenseyCommit(finishedWork, lanes, suspendedState);
+    if (
+      isViewTransitionEligible ||
+      (isGestureTransition &&
+        root.pendingGestures !== null &&
+        // If this gesture already has a View Transition running then we don't
+        // have to wait on that one before proceeding. We may hold the commit
+        // on the gesture committing later on in completeRoot.
+        root.pendingGestures.running === null)
+    ) {
+      // Wait for any pending View Transition (including gestures) to finish.
+      suspendOnActiveViewTransition(suspendedState, root.containerInfo);
+    }
+    // For timeouts we use the previous fallback commit for retries and
+    // the start time of the transition for transitions. This offset
+    // represents the time already passed.
+    const timeoutOffset = includesOnlyRetries(lanes)
+      ? globalMostRecentFallbackTime - now()
+      : includesOnlyTransitions(lanes)
+        ? globalMostRecentTransitionTime - now()
+        : 0;
+    // At the end, ask the renderer if it's ready to commit, or if we should
+    // suspend. If it's not ready, it will return a callback to subscribe to
+    // a ready event.
+    const schedulePendingCommit = waitForCommitToBeReady(
+      suspendedState,
+      timeoutOffset,
+    );
+    if (schedulePendingCommit !== null) {
+      // NOTE: waitForCommitToBeReady returns a subscribe function so that we
+      // only allocate a function if the commit isn't ready yet. The other
+      // pattern would be to always pass a callback to waitForCommitToBeReady.
+
+      // Not yet ready to commit. Delay the commit until the renderer notifies
+      // us that it's ready. This will be canceled if we start work on the
+      // root again.
+      pendingEffectsLanes = lanes;
+      root.cancelPendingCommit = schedulePendingCommit(
+        completeRoot.bind(
+          null,
+          root,
+          finishedWork,
+          lanes,
+          recoverableErrors,
+          transitions,
+          didIncludeRenderPhaseUpdate,
+          spawnedLane,
+          updatedLanes,
+          suspendedRetryLanes,
+          didSkipSuspendedSiblings,
+          exitStatus,
+          suspendedState,
+          enableProfilerTimer
+            ? getSuspendedCommitReason(suspendedState, root.containerInfo)
+            : null,
+          completedRenderStartTime,
+          completedRenderEndTime,
+        ),
+      );
+      const didAttemptEntireTree = !didSkipSuspendedSiblings;
+      markRootSuspended(root, lanes, spawnedLane, didAttemptEntireTree);
+      return;
+    }
+  }
+
+  // Otherwise, commit immediately.;
+  completeRoot(
+    root,
+    finishedWork,
+    lanes,
+    recoverableErrors,
+    transitions,
+    didIncludeRenderPhaseUpdate,
+    spawnedLane,
+    updatedLanes,
+    suspendedRetryLanes,
+    didSkipSuspendedSiblings,
+    exitStatus,
+    suspendedState,
+    suspendedCommitReason,
+    completedRenderStartTime,
+    completedRenderEndTime,
+  );
+}
+
+function isRenderConsistentWithExternalStores(finishedWork: Fiber): boolean {
+  // Search the rendered tree for external store reads, and check whether the
+  // stores were mutated in a concurrent event. Intentionally using an iterative
+  // loop instead of recursion so we can exit early.
+  let node: Fiber = finishedWork;
+  while (true) {
+    const tag = node.tag;
+    if (
+      (tag === FunctionComponent ||
+        tag === ForwardRef ||
+        tag === SimpleMemoComponent) &&
+      node.flags & StoreConsistency
+    ) {
+      const updateQueue: FunctionComponentUpdateQueue | null =
+        (node.updateQueue: any);
+      if (updateQueue !== null) {
+        const checks = updateQueue.stores;
+        if (checks !== null) {
+          for (let i = 0; i < checks.length; i++) {
+            const check = checks[i];
+            const getSnapshot = check.getSnapshot;
+            const renderedValue = check.value;
+            try {
+              if (!is(getSnapshot(), renderedValue)) {
+                // Found an inconsistent store.
+                return false;
+              }
+            } catch (error) {
+              // If `getSnapshot` throws, return `false`. This will schedule
+              // a re-render, and the error will be rethrown during render.
+              return false;
+            }
+          }
+        }
+      }
+    }
+    const child = node.child;
+    if (node.subtreeFlags & StoreConsistency && child !== null) {
+      child.return = node;
+      node = child;
+      continue;
+    }
+    if (node === finishedWork) {
+      return true;
+    }
+    while (node.sibling === null) {
+      if (node.return === null || node.return === finishedWork) {
+        return true;
+      }
+      node = node.return;
+    }
+    node.sibling.return = node.return;
+    node = node.sibling;
+  }
+  // Flow doesn't know this is unreachable, but eslint does
+  // eslint-disable-next-line no-unreachable
+  return true;
+}
+
+// The extra indirections around markRootUpdated and markRootSuspended is
+// needed to avoid a circular dependency between this module and
+// ReactFiberLane. There's probably a better way to split up these modules and
+// avoid this problem. Perhaps all the root-marking functions should move into
+// the work loop.
+
+function markRootUpdated(root: FiberRoot, updatedLanes: Lanes) {
+  _markRootUpdated(root, updatedLanes);
+
+  if (enableInfiniteRenderLoopDetection) {
+    // Check for recursive updates
+    if (executionContext & RenderContext) {
+      workInProgressRootDidIncludeRecursiveRenderUpdate = true;
+    } else if (executionContext & CommitContext) {
+      didIncludeCommitPhaseUpdate = true;
+    }
+
+    throwIfInfiniteUpdateLoopDetected();
+  }
+}
+
+function markRootPinged(root: FiberRoot, pingedLanes: Lanes) {
+  _markRootPinged(root, pingedLanes);
+
+  if (enableInfiniteRenderLoopDetection) {
+    // Check for recursive pings. Pings are conceptually different from updates in
+    // other contexts but we call it an "update" in this context because
+    // repeatedly pinging a suspended render can cause a recursive render loop.
+    // The relevant property is that it can result in a new render attempt
+    // being scheduled.
+    if (executionContext & RenderContext) {
+      workInProgressRootDidIncludeRecursiveRenderUpdate = true;
+    } else if (executionContext & CommitContext) {
+      didIncludeCommitPhaseUpdate = true;
+    }
+
+    throwIfInfiniteUpdateLoopDetected();
+  }
+}
+
+function markRootSuspended(
+  root: FiberRoot,
+  suspendedLanes: Lanes,
+  spawnedLane: Lane,
+  didAttemptEntireTree: boolean,
+) {
+  // When suspending, we should always exclude lanes that were pinged or (more
+  // rarely, since we try to avoid it) updated during the render phase.
+  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
+  suspendedLanes = removeLanes(
+    suspendedLanes,
+    workInProgressRootInterleavedUpdatedLanes,
+  );
+  _markRootSuspended(root, suspendedLanes, spawnedLane, didAttemptEntireTree);
+}
+
+export function flushRoot(root: FiberRoot, lanes: Lanes) {
+  if (lanes !== NoLanes) {
+    upgradePendingLanesToSync(root, lanes);
+    ensureRootIsScheduled(root);
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      resetRenderTimer();
+      // TODO: For historical reasons this flushes all sync work across all
+      // roots. It shouldn't really matter either way, but we could change this
+      // to only flush the given root.
+      flushSyncWorkOnAllRoots();
+    }
+  }
+}
+
+export function getExecutionContext(): ExecutionContext {
+  return executionContext;
+}
+
+export function deferredUpdates<A>(fn: () => A): A {
+  const prevTransition = ReactSharedInternals.T;
+  const previousPriority = getCurrentUpdatePriority();
+  try {
+    setCurrentUpdatePriority(DefaultEventPriority);
+    ReactSharedInternals.T = null;
+    return fn();
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+  }
+}
+
+export function batchedUpdates<A, R>(fn: A => R, a: A): R {
+  if (disableLegacyMode) {
+    // batchedUpdates is a no-op now, but there's still some internal react-dom
+    // code calling it, that we can't remove until we remove legacy mode.
+    return fn(a);
+  } else {
+    const prevExecutionContext = executionContext;
+    executionContext |= BatchedContext;
+    try {
+      return fn(a);
+    } finally {
+      executionContext = prevExecutionContext;
+      // If there were legacy sync updates, flush them at the end of the outer
+      // most batchedUpdates-like method.
+      if (
+        executionContext === NoContext &&
+        // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+        !(__DEV__ && ReactSharedInternals.isBatchingLegacy)
+      ) {
+        resetRenderTimer();
+        flushSyncWorkOnLegacyRootsOnly();
+      }
+    }
+  }
+}
+
+export function discreteUpdates<A, B, C, D, R>(
+  fn: (A, B, C, D) => R,
+  a: A,
+  b: B,
+  c: C,
+  d: D,
+): R {
+  const prevTransition = ReactSharedInternals.T;
+  const previousPriority = getCurrentUpdatePriority();
+  try {
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    ReactSharedInternals.T = null;
+    return fn(a, b, c, d);
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+    if (executionContext === NoContext) {
+      resetRenderTimer();
+    }
+  }
+}
+
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSyncFromReconciler<R>(fn: () => R): R;
+declare function flushSyncFromReconciler(void): void;
+export function flushSyncFromReconciler<R>(fn: (() => R) | void): R | void {
+  // In legacy mode, we flush pending passive effects at the beginning of the
+  // next event, not at the end of the previous one.
+  if (
+    pendingEffectsStatus !== NO_PENDING_EFFECTS &&
+    !disableLegacyMode &&
+    pendingEffectsRoot.tag === LegacyRoot &&
+    (executionContext & (RenderContext | CommitContext)) === NoContext
+  ) {
+    flushPendingEffects();
+  }
+
+  const prevExecutionContext = executionContext;
+  executionContext |= BatchedContext;
+
+  const prevTransition = ReactSharedInternals.T;
+  const previousPriority = getCurrentUpdatePriority();
+
+  try {
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    ReactSharedInternals.T = null;
+    if (fn) {
+      return fn();
+    } else {
+      return undefined;
+    }
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+
+    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.
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      flushSyncWorkOnAllRoots();
+    }
+  }
+}
+
+// If called outside of a render or commit will flush all sync work on all roots
+// Returns whether the the call was during a render or not
+export function flushSyncWork(): boolean {
+  if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+    flushSyncWorkOnAllRoots();
+    return false;
+  }
+  return true;
+}
+
+export function isAlreadyRendering(): boolean {
+  // Used by the renderer to print a warning if certain APIs are called from
+  // the wrong context, and for profiling warnings.
+  return (executionContext & (RenderContext | CommitContext)) !== NoContext;
+}
+
+export function isInvalidExecutionContextForEventFunction(): boolean {
+  // Used to throw if certain APIs are called from the wrong context.
+  return (executionContext & RenderContext) !== NoContext;
+}
+
+// This is called by the HiddenContext module when we enter or leave a
+// hidden subtree. The stack logic is managed there because that's the only
+// place that ever modifies it. Which module it lives in doesn't matter for
+// performance because this function will get inlined regardless
+export function setEntangledRenderLanes(newEntangledRenderLanes: Lanes) {
+  entangledRenderLanes = newEntangledRenderLanes;
+}
+
+export function getEntangledRenderLanes(): Lanes {
+  return entangledRenderLanes;
+}
+
+function resetWorkInProgressStack() {
+  if (workInProgress === null) return;
+  let interruptedWork;
+  if (workInProgressSuspendedReason === NotSuspended) {
+    // Normal case. Work-in-progress hasn't started yet. Unwind all
+    // its parents.
+    interruptedWork = workInProgress.return;
+  } else {
+    // Work-in-progress is in suspended state. Reset the work loop and unwind
+    // both the suspended fiber and all its parents.
+    resetSuspendedWorkLoopOnUnwind(workInProgress);
+    interruptedWork = workInProgress;
+  }
+  while (interruptedWork !== null) {
+    const current = interruptedWork.alternate;
+    unwindInterruptedWork(
+      current,
+      interruptedWork,
+      workInProgressRootRenderLanes,
+    );
+    interruptedWork = interruptedWork.return;
+  }
+  workInProgress = null;
+}
+
+function finalizeRender(lanes: Lanes, finalizationTime: number): void {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (isGestureRender(lanes)) {
+      clampGestureTimers(finalizationTime);
+    } else if (includesBlockingLane(lanes)) {
+      clampBlockingTimers(finalizationTime);
+    }
+    if (includesTransitionLane(lanes)) {
+      clampTransitionTimers(finalizationTime);
+    }
+    if (includesRetryLane(lanes)) {
+      clampRetryTimers(finalizationTime);
+    }
+    if (includesIdleGroupLanes(lanes)) {
+      clampIdleTimers(finalizationTime);
+    }
+  }
+}
+
+function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // The order of tracks within a group are determined by the earliest start time.
+    // Are tracks should show up in priority order and we should ideally always show
+    // every track. This is a hack to ensure that we're displaying all tracks in the
+    // right order. Ideally we could do this only once but because calls that aren't
+    // recorded aren't considered for ordering purposes, we need to keep adding these
+    // over and over again in case recording has just started. We can't tell when
+    // recording starts.
+    markAllLanesInOrder();
+
+    const previousRenderStartTime = renderStartTime;
+    // Starting a new render. Log the end of any previous renders and the
+    // blocked time before the render started.
+    recordRenderTime();
+    // If this was a restart, e.g. due to an interrupting update, then there's no space
+    // in the track to log the cause since we'll have rendered all the way up until the
+    // restart so we need to clamp that.
+    if (
+      workInProgressRootRenderLanes !== NoLanes &&
+      previousRenderStartTime > 0
+    ) {
+      setCurrentTrackFromLanes(workInProgressRootRenderLanes);
+      if (
+        workInProgressRootExitStatus === RootSuspended ||
+        workInProgressRootExitStatus === RootSuspendedWithDelay
+      ) {
+        // If the root was already suspended when it got interrupted and restarted,
+        // then this is considered a prewarm and not an interrupted render because
+        // we couldn't have shown anything anyway so it's not a bad thing that we
+        // got interrupted.
+        logSuspendedRenderPhase(
+          previousRenderStartTime,
+          renderStartTime,
+          lanes,
+          workInProgressUpdateTask,
+        );
+      } else {
+        logInterruptedRenderPhase(
+          previousRenderStartTime,
+          renderStartTime,
+          lanes,
+          workInProgressUpdateTask,
+        );
+      }
+      finalizeRender(workInProgressRootRenderLanes, renderStartTime);
+    }
+    const previousUpdateTask = workInProgressUpdateTask;
+
+    workInProgressUpdateTask = null;
+    if (isGestureRender(lanes)) {
+      workInProgressUpdateTask = gestureUpdateTask;
+      const clampedUpdateTime =
+        gestureUpdateTime >= 0 && gestureUpdateTime < gestureClampTime
+          ? gestureClampTime
+          : gestureUpdateTime;
+      const clampedEventTime =
+        gestureEventTime >= 0 && gestureEventTime < gestureClampTime
+          ? gestureClampTime
+          : gestureEventTime;
+      const clampedRenderStartTime =
+        // Clamp the suspended time to the first event/update.
+        clampedEventTime >= 0
+          ? clampedEventTime
+          : clampedUpdateTime >= 0
+            ? clampedUpdateTime
+            : renderStartTime;
+      if (gestureSuspendedTime >= 0) {
+        setCurrentTrackFromLanes(GestureLane);
+        logSuspendedWithDelayPhase(
+          gestureSuspendedTime,
+          clampedRenderStartTime,
+          lanes,
+          workInProgressUpdateTask,
+        );
+      } else if (isGestureRender(animatingLanes)) {
+        // If this lane is still animating, log the time from previous render finishing to now as animating.
+        setCurrentTrackFromLanes(GestureLane);
+        logAnimatingPhase(
+          gestureClampTime,
+          clampedRenderStartTime,
+          animatingTask,
+        );
+      }
+      logGestureStart(
+        clampedUpdateTime,
+        clampedEventTime,
+        gestureEventType,
+        gestureEventRepeatTime > 0,
+        gestureUpdateType === PINGED_UPDATE,
+        renderStartTime,
+        gestureUpdateTask,
+        gestureUpdateMethodName,
+        gestureUpdateComponentName,
+      );
+      clearGestureTimers();
+    } else if (includesBlockingLane(lanes)) {
+      workInProgressUpdateTask = blockingUpdateTask;
+      const clampedUpdateTime =
+        blockingUpdateTime >= 0 && blockingUpdateTime < blockingClampTime
+          ? blockingClampTime
+          : blockingUpdateTime;
+      const clampedEventTime =
+        blockingEventTime >= 0 && blockingEventTime < blockingClampTime
+          ? blockingClampTime
+          : blockingEventTime;
+      const clampedRenderStartTime = // Clamp the suspended time to the first event/update.
+        clampedEventTime >= 0
+          ? clampedEventTime
+          : clampedUpdateTime >= 0
+            ? clampedUpdateTime
+            : renderStartTime;
+      if (blockingSuspendedTime >= 0) {
+        setCurrentTrackFromLanes(SyncLane);
+        logSuspendedWithDelayPhase(
+          blockingSuspendedTime,
+          clampedRenderStartTime,
+          lanes,
+          previousUpdateTask,
+        );
+      } else if (
+        !isGestureRender(animatingLanes) &&
+        includesBlockingLane(animatingLanes)
+      ) {
+        // If this lane is still animating, log the time from previous render finishing to now as animating.
+        setCurrentTrackFromLanes(SyncLane);
+        logAnimatingPhase(
+          blockingClampTime,
+          clampedRenderStartTime,
+          animatingTask,
+        );
+      }
+      logBlockingStart(
+        clampedUpdateTime,
+        clampedEventTime,
+        blockingEventType,
+        blockingEventRepeatTime > 0,
+        blockingUpdateType === SPAWNED_UPDATE,
+        blockingUpdateType === PINGED_UPDATE,
+        renderStartTime,
+        lanes,
+        blockingUpdateTask,
+        blockingUpdateMethodName,
+        blockingUpdateComponentName,
+      );
+      clearBlockingTimers();
+    }
+    if (includesTransitionLane(lanes)) {
+      workInProgressUpdateTask = transitionUpdateTask;
+      const clampedStartTime =
+        transitionStartTime >= 0 && transitionStartTime < transitionClampTime
+          ? transitionClampTime
+          : transitionStartTime;
+      const clampedUpdateTime =
+        transitionUpdateTime >= 0 && transitionUpdateTime < transitionClampTime
+          ? transitionClampTime
+          : transitionUpdateTime;
+      const clampedEventTime =
+        transitionEventTime >= 0 && transitionEventTime < transitionClampTime
+          ? transitionClampTime
+          : transitionEventTime;
+      const clampedRenderStartTime =
+        // Clamp the suspended time to the first event/update.
+        clampedEventTime >= 0
+          ? clampedEventTime
+          : clampedUpdateTime >= 0
+            ? clampedUpdateTime
+            : renderStartTime;
+      if (transitionSuspendedTime >= 0) {
+        setCurrentTrackFromLanes(SomeTransitionLane);
+        logSuspendedWithDelayPhase(
+          transitionSuspendedTime,
+          clampedRenderStartTime,
+          lanes,
+          workInProgressUpdateTask,
+        );
+      } else if (includesTransitionLane(animatingLanes)) {
+        // If this lane is still animating, log the time from previous render finishing to now as animating.
+        setCurrentTrackFromLanes(SomeTransitionLane);
+        logAnimatingPhase(
+          transitionClampTime,
+          clampedRenderStartTime,
+          animatingTask,
+        );
+      }
+      logTransitionStart(
+        clampedStartTime,
+        clampedUpdateTime,
+        clampedEventTime,
+        transitionEventType,
+        transitionEventRepeatTime > 0,
+        transitionUpdateType === PINGED_UPDATE,
+        renderStartTime,
+        transitionUpdateTask,
+        transitionUpdateMethodName,
+        transitionUpdateComponentName,
+      );
+      clearTransitionTimers();
+    }
+    if (includesRetryLane(lanes)) {
+      if (includesRetryLane(animatingLanes)) {
+        // If this lane is still animating, log the time from previous render finishing to now as animating.
+        setCurrentTrackFromLanes(SomeRetryLane);
+        logAnimatingPhase(retryClampTime, renderStartTime, animatingTask);
+      }
+    }
+    if (includesIdleGroupLanes(lanes)) {
+      if (includesIdleGroupLanes(animatingLanes)) {
+        // If this lane is still animating, log the time from previous render finishing to now as animating.
+        setCurrentTrackFromLanes(IdleLane);
+        logAnimatingPhase(idleClampTime, renderStartTime, animatingTask);
+      }
+    }
+  }
+
+  const timeoutHandle = root.timeoutHandle;
+  if (timeoutHandle !== noTimeout) {
+    // The root previous suspended and scheduled a timeout to commit a fallback
+    // state. Now that we have additional work, cancel the timeout.
+    root.timeoutHandle = noTimeout;
+    // $FlowFixMe[incompatible-call] Complains noTimeout is not a TimeoutID, despite the check above
+    cancelTimeout(timeoutHandle);
+  }
+  const cancelPendingCommit = root.cancelPendingCommit;
+  if (cancelPendingCommit !== null) {
+    root.cancelPendingCommit = null;
+    cancelPendingCommit();
+  }
+
+  pendingEffectsLanes = NoLanes;
+
+  resetWorkInProgressStack();
+  workInProgressRoot = root;
+  const rootWorkInProgress = createWorkInProgress(root.current, null);
+  workInProgress = rootWorkInProgress;
+  workInProgressRootRenderLanes = lanes;
+  workInProgressSuspendedReason = NotSuspended;
+  workInProgressThrownValue = null;
+  workInProgressRootDidSkipSuspendedSiblings = false;
+  workInProgressRootIsPrerendering = checkIfRootIsPrerendering(root, lanes);
+  workInProgressRootDidAttachPingListener = false;
+  workInProgressRootExitStatus = RootInProgress;
+  workInProgressRootSkippedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
+  workInProgressRootPingedLanes = NoLanes;
+  workInProgressDeferredLane = NoLane;
+  workInProgressSuspendedRetryLanes = NoLanes;
+  workInProgressRootConcurrentErrors = null;
+  workInProgressRootRecoverableErrors = null;
+  workInProgressRootDidIncludeRecursiveRenderUpdate = false;
+
+  // Get the lanes that are entangled with whatever we're about to render. We
+  // track these separately so we can distinguish the priority of the render
+  // task from the priority of the lanes it is entangled with. For example, a
+  // transition may not be allowed to finish unless it includes the Sync lane,
+  // which is currently suspended. We should be able to render the Transition
+  // and Sync lane in the same batch, but at Transition priority, because the
+  // Sync lane already suspended.
+  entangledRenderLanes = getEntangledLanes(root, lanes);
+
+  finishQueueingConcurrentUpdates();
+
+  if (__DEV__) {
+    resetOwnerStackLimit();
+
+    ReactStrictModeWarnings.discardPendingWarnings();
+  }
+
+  return rootWorkInProgress;
+}
+
+function resetSuspendedWorkLoopOnUnwind(fiber: Fiber) {
+  // Reset module-level state that was set during the render phase.
+  resetContextDependencies();
+  resetHooksOnUnwind(fiber);
+  resetChildReconcilerOnUnwind();
+}
+
+function handleThrow(root: FiberRoot, thrownValue: any): void {
+  // A component threw an exception. Usually this is because it suspended, but
+  // it also includes regular program errors.
+  //
+  // We're either going to unwind the stack to show a Suspense or error
+  // boundary, or we're going to replay the component again. Like after a
+  // promise resolves.
+  //
+  // Until we decide whether we're going to unwind or replay, we should preserve
+  // the current state of the work loop without resetting anything.
+  //
+  // If we do decide to unwind the stack, module-level variables will be reset
+  // in resetSuspendedWorkLoopOnUnwind.
+
+  // These should be reset immediately because they're only supposed to be set
+  // when React is executing user code.
+  resetHooksAfterThrow();
+  if (__DEV__) {
+    resetCurrentFiber();
+  }
+
+  if (
+    thrownValue === SuspenseException ||
+    thrownValue === SuspenseActionException
+  ) {
+    // This is a special type of exception used for Suspense. For historical
+    // reasons, the rest of the Suspense implementation expects the thrown value
+    // to be a thenable, because before `use` existed that was the (unstable)
+    // API for suspending. This implementation detail can change later, once we
+    // deprecate the old API in favor of `use`.
+    thrownValue = getSuspendedThenable();
+    // TODO: Suspending the work loop during the render phase is
+    // currently not compatible with sibling prerendering. We will add
+    // this optimization back in a later step.
+    // Don't suspend work loop, except to check if the data has
+    // immediately resolved (i.e. in a microtask). Otherwise, trigger the
+    // nearest Suspense fallback.
+    workInProgressSuspendedReason = SuspendedOnImmediate;
+  } else if (thrownValue === SuspenseyCommitException) {
+    thrownValue = getSuspendedThenable();
+    workInProgressSuspendedReason = SuspendedOnInstance;
+  } else if (thrownValue === SelectiveHydrationException) {
+    // An update flowed into a dehydrated boundary. Before we can apply the
+    // update, we need to finish hydrating. Interrupt the work-in-progress
+    // render so we can restart at the hydration lane.
+    //
+    // The ideal implementation would be able to switch contexts without
+    // unwinding the current stack.
+    //
+    // We could name this something more general but as of now it's the only
+    // case where we think this should happen.
+    workInProgressSuspendedReason = SuspendedOnHydration;
+  } else {
+    // This is a regular error.
+    const isWakeable =
+      thrownValue !== null &&
+      typeof thrownValue === 'object' &&
+      typeof thrownValue.then === 'function';
+
+    workInProgressSuspendedReason = isWakeable
+      ? // A wakeable object was thrown by a legacy Suspense implementation.
+        // This has slightly different behavior than suspending with `use`.
+        SuspendedOnDeprecatedThrowPromise
+      : // This is a regular error. If something earlier in the component already
+        // suspended, we must clear the thenable state to unblock the work loop.
+        SuspendedOnError;
+  }
+
+  workInProgressThrownValue = thrownValue;
+
+  const erroredWork = workInProgress;
+  if (erroredWork === null) {
+    // This is a fatal error
+    workInProgressRootExitStatus = RootFatalErrored;
+    logUncaughtError(
+      root,
+      createCapturedValueAtFiber(thrownValue, root.current),
+    );
+    return;
+  }
+
+  if (enableProfilerTimer && erroredWork.mode & ProfileMode) {
+    // Record the time spent rendering before an error was thrown. This
+    // avoids inaccurate Profiler durations in the case of a
+    // suspended render.
+    stopProfilerTimerIfRunningAndRecordDuration(erroredWork);
+  }
+
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+    switch (workInProgressSuspendedReason) {
+      case SuspendedOnError: {
+        markComponentErrored(
+          erroredWork,
+          thrownValue,
+          workInProgressRootRenderLanes,
+        );
+        break;
+      }
+      case SuspendedOnData:
+      case SuspendedOnAction:
+      case SuspendedOnImmediate:
+      case SuspendedOnDeprecatedThrowPromise:
+      case SuspendedAndReadyToContinue: {
+        const wakeable: Wakeable = (thrownValue: any);
+        markComponentSuspended(
+          erroredWork,
+          wakeable,
+          workInProgressRootRenderLanes,
+        );
+        break;
+      }
+      case SuspendedOnInstance: {
+        // This is conceptually like a suspend, but it's not associated with
+        // a particular wakeable. It's associated with a host resource (e.g.
+        // a CSS file or an image) that hasn't loaded yet. DevTools doesn't
+        // handle this currently.
+        break;
+      }
+      case SuspendedOnHydration: {
+        // This is conceptually like a suspend, but it's not associated with
+        // a particular wakeable. DevTools doesn't seem to care about this case,
+        // currently. It's similar to if the component were interrupted, which
+        // we don't mark with a special function.
+        break;
+      }
+    }
+  }
+}
+
+export function shouldRemainOnPreviousScreen(): boolean {
+  // This is asking whether it's better to suspend the transition and remain
+  // on the previous screen, versus showing a fallback as soon as possible. It
+  // takes into account both the priority of render and also whether showing a
+  // fallback would produce a desirable user experience.
+
+  const handler = getSuspenseHandler();
+  if (handler === null) {
+    // There's no Suspense boundary that can provide a fallback. We have no
+    // choice but to remain on the previous screen.
+    // NOTE: We do this even for sync updates, for lack of any better option. In
+    // the future, we may change how we handle this, like by putting the whole
+    // root into a "detached" mode.
+    return true;
+  }
+
+  // TODO: Once `use` has fully replaced the `throw promise` pattern, we should
+  // be able to remove the equivalent check in finishConcurrentRender, and rely
+  // just on this one.
+  if (includesOnlyTransitions(workInProgressRootRenderLanes)) {
+    if (getShellBoundary() === null) {
+      // We're rendering inside the "shell" of the app. Activating the nearest
+      // fallback would cause visible content to disappear. It's better to
+      // suspend the transition and remain on the previous screen.
+      return true;
+    } else {
+      // We're rendering content that wasn't part of the previous screen.
+      // Rather than block the transition, it's better to show a fallback as
+      // soon as possible. The appearance of any nested fallbacks will be
+      // throttled to avoid jank.
+      return false;
+    }
+  }
+
+  if (
+    includesOnlyRetries(workInProgressRootRenderLanes) ||
+    // In this context, an OffscreenLane counts as a Retry
+    // TODO: It's become increasingly clear that Retries and Offscreen are
+    // deeply connected. They probably can be unified further.
+    includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+  ) {
+    // During a retry, we can suspend rendering if the nearest Suspense boundary
+    // is the boundary of the "shell", because we're guaranteed not to block
+    // any new content from appearing.
+    //
+    // The reason we must check if this is a retry is because it guarantees
+    // that suspending the work loop won't block an actual update, because
+    // retries don't "update" anything; they fill in fallbacks that were left
+    // behind by a previous transition.
+    return handler === getShellBoundary();
+  }
+
+  // For all other Lanes besides Transitions and Retries, we should not wait
+  // for the data to load.
+  return false;
+}
+
+function pushDispatcher(container: any) {
+  const prevDispatcher = ReactSharedInternals.H;
+  ReactSharedInternals.H = 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;
+  }
+}
+
+function popDispatcher(prevDispatcher: any) {
+  ReactSharedInternals.H = prevDispatcher;
+}
+
+function pushAsyncDispatcher() {
+  const prevAsyncDispatcher = ReactSharedInternals.A;
+  ReactSharedInternals.A = DefaultAsyncDispatcher;
+  return prevAsyncDispatcher;
+}
+
+function popAsyncDispatcher(prevAsyncDispatcher: any) {
+  ReactSharedInternals.A = prevAsyncDispatcher;
+}
+
+export function markRenderDerivedCause(fiber: Fiber): void {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (__DEV__) {
+      if (workInProgressUpdateTask === null) {
+        // If we don't have a cause associated with this render, it's likely because some
+        // other render left work behind on this Fiber. The real cause is this Fiber itself.
+        // We use its debugTask as the cause for this render. This might not be the only
+        // one when multiple siblings are rendered but they ideally shouldn't be.
+        workInProgressUpdateTask =
+          fiber._debugTask == null ? null : fiber._debugTask;
+      }
+    }
+  }
+}
+
+export function markTransitionStarted() {
+  globalMostRecentTransitionTime = now();
+}
+
+export function markCommitTimeOfFallback() {
+  globalMostRecentFallbackTime = now();
+}
+
+export function markSkippedUpdateLanes(lane: Lane | Lanes): void {
+  workInProgressRootSkippedLanes = mergeLanes(
+    lane,
+    workInProgressRootSkippedLanes,
+  );
+}
+
+export function renderDidSuspend(): void {
+  if (workInProgressRootExitStatus === RootInProgress) {
+    workInProgressRootExitStatus = RootSuspended;
+  }
+}
+
+export function renderDidSuspendDelayIfPossible(): void {
+  workInProgressRootExitStatus = RootSuspendedWithDelay;
+
+  if (
+    !workInProgressRootDidSkipSuspendedSiblings &&
+    // Check if the root will be blocked from committing.
+    // TODO: Consider aligning this better with the rest of the logic. Maybe
+    // we should only set the exit status to RootSuspendedWithDelay if this
+    // condition is true? And remove the equivalent checks elsewhere.
+    (includesOnlyTransitions(workInProgressRootRenderLanes) ||
+      getSuspenseHandler() === null)
+  ) {
+    // This render may not have originally been scheduled as a prerender, but
+    // something suspended inside the visible part of the tree, which means we
+    // won't be able to commit a fallback anyway. Let's proceed as if this were
+    // a prerender so that we can warm up the siblings without scheduling a
+    // separate pass.
+    workInProgressRootIsPrerendering = true;
+  }
+
+  // Check if there are updates that we skipped tree that might have unblocked
+  // this render.
+  if (
+    (includesNonIdleWork(workInProgressRootSkippedLanes) ||
+      includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes)) &&
+    workInProgressRoot !== null
+  ) {
+    // Mark the current render as suspended so that we switch to working on
+    // the updates that were skipped. Usually we only suspend at the end of
+    // the render phase.
+    // TODO: We should probably always mark the root as suspended immediately
+    // (inside this function), since by suspending at the end of the render
+    // phase introduces a potential mistake where we suspend lanes that were
+    // pinged or updated while we were rendering.
+    // TODO: Consider unwinding immediately, using the
+    // SuspendedOnHydration mechanism.
+    const didAttemptEntireTree = false;
+    markRootSuspended(
+      workInProgressRoot,
+      workInProgressRootRenderLanes,
+      workInProgressDeferredLane,
+      didAttemptEntireTree,
+    );
+  }
+}
+
+export function renderDidError() {
+  if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
+    workInProgressRootExitStatus = RootErrored;
+  }
+}
+
+export function queueConcurrentError(error: CapturedValue<mixed>) {
+  if (workInProgressRootConcurrentErrors === null) {
+    workInProgressRootConcurrentErrors = [error];
+  } else {
+    workInProgressRootConcurrentErrors.push(error);
+  }
+}
+
+// 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 === RootInProgress;
+}
+
+// TODO: Over time, this function and renderRootConcurrent have become more
+// and more similar. Not sure it makes sense to maintain forked paths. Consider
+// unifying them again.
+function renderRootSync(
+  root: FiberRoot,
+  lanes: Lanes,
+  shouldYieldForPrerendering: boolean,
+): RootExitStatus {
+  const prevExecutionContext = executionContext;
+  executionContext |= RenderContext;
+  const prevDispatcher = pushDispatcher(root.containerInfo);
+  const prevAsyncDispatcher = pushAsyncDispatcher();
+
+  // If the root or lanes have changed, throw out the existing stack
+  // and prepare a fresh one. Otherwise we'll continue where we left off.
+  if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
+    if (enableUpdaterTracking) {
+      if (isDevToolsPresent) {
+        const memoizedUpdaters = root.memoizedUpdaters;
+        if (memoizedUpdaters.size > 0) {
+          restorePendingUpdaters(root, workInProgressRootRenderLanes);
+          memoizedUpdaters.clear();
+        }
+
+        // At this point, move Fibers that scheduled the upcoming work from the Map to the Set.
+        // If we bailout on this work, we'll move them back (like above).
+        // It's important to move them now in case the work spawns more work at the same priority with different updaters.
+        // That way we can keep the current update and future updates separate.
+        movePendingFibersToMemoized(root, lanes);
+      }
+    }
+
+    workInProgressTransitions = getTransitionsForLanes(root, lanes);
+    prepareFreshStack(root, lanes);
+  }
+
+  if (enableSchedulingProfiler) {
+    markRenderStarted(lanes);
+  }
+
+  let didSuspendInShell = false;
+  let exitStatus = workInProgressRootExitStatus;
+  outer: do {
+    try {
+      if (
+        workInProgressSuspendedReason !== NotSuspended &&
+        workInProgress !== null
+      ) {
+        // The work loop is suspended. During a synchronous render, we don't
+        // yield to the main thread. Immediately unwind the stack. This will
+        // trigger either a fallback or an error boundary.
+        // TODO: For discrete and "default" updates (anything that's not
+        // flushSync), we want to wait for the microtasks the flush before
+        // unwinding. Will probably implement this using renderRootConcurrent,
+        // or merge renderRootSync and renderRootConcurrent into the same
+        // function and fork the behavior some other way.
+        const unitOfWork = workInProgress;
+        const thrownValue = workInProgressThrownValue;
+        switch (workInProgressSuspendedReason) {
+          case SuspendedOnHydration: {
+            // Selective hydration. An update flowed into a dehydrated tree.
+            // Interrupt the current render so the work loop can switch to the
+            // hydration lane.
+            // TODO: I think we might not need to reset the stack here; we can
+            // just yield and reset the stack when we re-enter the work loop,
+            // like normal.
+            resetWorkInProgressStack();
+            exitStatus = RootSuspendedAtTheShell;
+            break outer;
+          }
+          case SuspendedOnImmediate:
+          case SuspendedOnData:
+          case SuspendedOnAction:
+          case SuspendedOnDeprecatedThrowPromise: {
+            if (getSuspenseHandler() === null) {
+              didSuspendInShell = true;
+            }
+            const reason = workInProgressSuspendedReason;
+            workInProgressSuspendedReason = NotSuspended;
+            workInProgressThrownValue = null;
+            throwAndUnwindWorkLoop(root, unitOfWork, thrownValue, reason);
+            if (
+              shouldYieldForPrerendering &&
+              workInProgressRootIsPrerendering
+            ) {
+              // We've switched into prerendering mode. This implies that we
+              // suspended outside of a Suspense boundary, which means this
+              // render will be blocked from committing. Yield to the main
+              // thread so we can switch to prerendering using the concurrent
+              // work loop.
+              exitStatus = RootInProgress;
+              break outer;
+            }
+            break;
+          }
+          default: {
+            // Unwind then continue with the normal work loop.
+            const reason = workInProgressSuspendedReason;
+            workInProgressSuspendedReason = NotSuspended;
+            workInProgressThrownValue = null;
+            throwAndUnwindWorkLoop(root, unitOfWork, thrownValue, reason);
+            break;
+          }
+        }
+      }
+      workLoopSync();
+      exitStatus = workInProgressRootExitStatus;
+      break;
+    } catch (thrownValue) {
+      handleThrow(root, thrownValue);
+    }
+  } while (true);
+
+  // Check if something suspended in the shell. We use this to detect an
+  // infinite ping loop caused by an uncached promise.
+  //
+  // Only increment this counter once per synchronous render attempt across the
+  // whole tree. Even if there are many sibling components that suspend, this
+  // counter only gets incremented once.
+  if (didSuspendInShell) {
+    root.shellSuspendCounter++;
+  }
+
+  resetContextDependencies();
+
+  executionContext = prevExecutionContext;
+  popDispatcher(prevDispatcher);
+  popAsyncDispatcher(prevAsyncDispatcher);
+
+  if (enableSchedulingProfiler) {
+    markRenderStopped();
+  }
+
+  if (workInProgress !== null) {
+    // Did not complete the tree. This can happen if something suspended in
+    // the shell.
+  } else {
+    // Normal case. We completed the whole tree.
+
+    // Set this to null to indicate there's no in-progress render.
+    workInProgressRoot = null;
+    workInProgressRootRenderLanes = NoLanes;
+
+    // It's safe to process the queue now that the render phase is complete.
+    finishQueueingConcurrentUpdates();
+  }
+
+  return exitStatus;
+}
+
+// The work loop is an extremely hot path. Tell Closure not to inline it.
+/** @noinline */
+function workLoopSync() {
+  // Perform work without checking if we need to yield between fiber.
+  while (workInProgress !== null) {
+    performUnitOfWork(workInProgress);
+  }
+}
+
+function renderRootConcurrent(root: FiberRoot, lanes: Lanes): RootExitStatus {
+  const prevExecutionContext = executionContext;
+  executionContext |= RenderContext;
+  const prevDispatcher = pushDispatcher(root.containerInfo);
+  const prevAsyncDispatcher = pushAsyncDispatcher();
+
+  // If the root or lanes have changed, throw out the existing stack
+  // and prepare a fresh one. Otherwise we'll continue where we left off.
+  if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
+    if (enableUpdaterTracking) {
+      if (isDevToolsPresent) {
+        const memoizedUpdaters = root.memoizedUpdaters;
+        if (memoizedUpdaters.size > 0) {
+          restorePendingUpdaters(root, workInProgressRootRenderLanes);
+          memoizedUpdaters.clear();
+        }
+
+        // At this point, move Fibers that scheduled the upcoming work from the Map to the Set.
+        // If we bailout on this work, we'll move them back (like above).
+        // It's important to move them now in case the work spawns more work at the same priority with different updaters.
+        // That way we can keep the current update and future updates separate.
+        movePendingFibersToMemoized(root, lanes);
+      }
+    }
+
+    workInProgressTransitions = getTransitionsForLanes(root, lanes);
+
+    resetRenderTimer();
+    prepareFreshStack(root, lanes);
+  } else {
+    // This is a continuation of an existing work-in-progress.
+    //
+    // If we were previously in prerendering mode, check if we received any new
+    // data during an interleaved event.
+    workInProgressRootIsPrerendering = checkIfRootIsPrerendering(root, lanes);
+  }
+
+  if (enableSchedulingProfiler) {
+    markRenderStarted(lanes);
+  }
+
+  outer: do {
+    try {
+      if (
+        workInProgressSuspendedReason !== NotSuspended &&
+        workInProgress !== null
+      ) {
+        // The work loop is suspended. We need to either unwind the stack or
+        // replay the suspended component.
+        const unitOfWork = workInProgress;
+        const thrownValue = workInProgressThrownValue;
+        resumeOrUnwind: switch (workInProgressSuspendedReason) {
+          case SuspendedOnError: {
+            // Unwind then continue with the normal work loop.
+            workInProgressSuspendedReason = NotSuspended;
+            workInProgressThrownValue = null;
+            throwAndUnwindWorkLoop(
+              root,
+              unitOfWork,
+              thrownValue,
+              SuspendedOnError,
+            );
+            break;
+          }
+          case SuspendedOnData:
+          case SuspendedOnAction: {
+            const thenable: Thenable<mixed> = (thrownValue: any);
+            if (isThenableResolved(thenable)) {
+              // The data resolved. Try rendering the component again.
+              workInProgressSuspendedReason = NotSuspended;
+              workInProgressThrownValue = null;
+              replaySuspendedUnitOfWork(unitOfWork);
+              break;
+            }
+            // The work loop is suspended on data. We should wait for it to
+            // resolve before continuing to render.
+            // TODO: Handle the case where the promise resolves synchronously.
+            // Usually this is handled when we instrument the promise to add a
+            // `status` field, but if the promise already has a status, we won't
+            // have added a listener until right here.
+            const onResolution = () => {
+              // Check if the root is still suspended on this promise.
+              if (
+                (workInProgressSuspendedReason === SuspendedOnData ||
+                  workInProgressSuspendedReason === SuspendedOnAction) &&
+                workInProgressRoot === root
+              ) {
+                // Mark the root as ready to continue rendering.
+                workInProgressSuspendedReason = SuspendedAndReadyToContinue;
+              }
+              // Ensure the root is scheduled. We should do this even if we're
+              // currently working on a different root, so that we resume
+              // rendering later.
+              ensureRootIsScheduled(root);
+            };
+            thenable.then(onResolution, onResolution);
+            break outer;
+          }
+          case SuspendedOnImmediate: {
+            // If this fiber just suspended, it's possible the data is already
+            // cached. Yield to the main thread to give it a chance to ping. If
+            // it does, we can retry immediately without unwinding the stack.
+            workInProgressSuspendedReason = SuspendedAndReadyToContinue;
+            break outer;
+          }
+          case SuspendedOnInstance: {
+            workInProgressSuspendedReason =
+              SuspendedOnInstanceAndReadyToContinue;
+            break outer;
+          }
+          case SuspendedAndReadyToContinue: {
+            const thenable: Thenable<mixed> = (thrownValue: any);
+            if (isThenableResolved(thenable)) {
+              // The data resolved. Try rendering the component again.
+              workInProgressSuspendedReason = NotSuspended;
+              workInProgressThrownValue = null;
+              replaySuspendedUnitOfWork(unitOfWork);
+            } else {
+              // Otherwise, unwind then continue with the normal work loop.
+              workInProgressSuspendedReason = NotSuspended;
+              workInProgressThrownValue = null;
+              throwAndUnwindWorkLoop(
+                root,
+                unitOfWork,
+                thrownValue,
+                SuspendedAndReadyToContinue,
+              );
+            }
+            break;
+          }
+          case SuspendedOnInstanceAndReadyToContinue: {
+            let resource: null | Resource = null;
+            switch (workInProgress.tag) {
+              case HostHoistable: {
+                resource = workInProgress.memoizedState;
+              }
+              // intentional fallthrough
+              case HostComponent:
+              case HostSingleton: {
+                // Before unwinding the stack, check one more time if the
+                // instance is ready. It may have loaded when React yielded to
+                // the main thread.
+
+                // Assigning this to a constant so Flow knows the binding won't
+                // be mutated by `preloadInstance`.
+                const hostFiber = workInProgress;
+                const type = hostFiber.type;
+                const props = hostFiber.pendingProps;
+                const isReady = resource
+                  ? preloadResource(resource)
+                  : preloadInstance(hostFiber.stateNode, type, props);
+                if (isReady) {
+                  // The data resolved. Resume the work loop as if nothing
+                  // suspended. Unlike when a user component suspends, we don't
+                  // have to replay anything because the host fiber
+                  // already completed.
+                  workInProgressSuspendedReason = NotSuspended;
+                  workInProgressThrownValue = null;
+                  const sibling = hostFiber.sibling;
+                  if (sibling !== null) {
+                    workInProgress = sibling;
+                  } else {
+                    const returnFiber = hostFiber.return;
+                    if (returnFiber !== null) {
+                      workInProgress = returnFiber;
+                      completeUnitOfWork(returnFiber);
+                    } else {
+                      workInProgress = null;
+                    }
+                  }
+                  break resumeOrUnwind;
+                }
+                break;
+              }
+              default: {
+                // This will fail gracefully but it's not correct, so log a
+                // warning in dev.
+                if (__DEV__) {
+                  console.error(
+                    'Unexpected type of fiber triggered a suspensey commit. ' +
+                      'This is a bug in React.',
+                  );
+                }
+                break;
+              }
+            }
+            // Otherwise, unwind then continue with the normal work loop.
+            workInProgressSuspendedReason = NotSuspended;
+            workInProgressThrownValue = null;
+            throwAndUnwindWorkLoop(
+              root,
+              unitOfWork,
+              thrownValue,
+              SuspendedOnInstanceAndReadyToContinue,
+            );
+            break;
+          }
+          case SuspendedOnDeprecatedThrowPromise: {
+            // Suspended by an old implementation that uses the `throw promise`
+            // pattern. The newer replaying behavior can cause subtle issues
+            // like infinite ping loops. So we maintain the old behavior and
+            // always unwind.
+            workInProgressSuspendedReason = NotSuspended;
+            workInProgressThrownValue = null;
+            throwAndUnwindWorkLoop(
+              root,
+              unitOfWork,
+              thrownValue,
+              SuspendedOnDeprecatedThrowPromise,
+            );
+            break;
+          }
+          case SuspendedOnHydration: {
+            // Selective hydration. An update flowed into a dehydrated tree.
+            // Interrupt the current render so the work loop can switch to the
+            // hydration lane.
+            resetWorkInProgressStack();
+            workInProgressRootExitStatus = RootSuspendedAtTheShell;
+            break outer;
+          }
+          default: {
+            throw new Error(
+              'Unexpected SuspendedReason. This is a bug in React.',
+            );
+          }
+        }
+      }
+
+      if (__DEV__ && ReactSharedInternals.actQueue !== null) {
+        // `act` special case: If we're inside an `act` scope, don't consult
+        // `shouldYield`. Always keep working until the render is complete.
+        // This is not just an optimization: in a unit test environment, we
+        // can't trust the result of `shouldYield`, because the host I/O is
+        // likely mocked.
+        workLoopSync();
+      } else if (enableThrottledScheduling) {
+        workLoopConcurrent(includesNonIdleWork(lanes));
+      } else {
+        workLoopConcurrentByScheduler();
+      }
+      break;
+    } catch (thrownValue) {
+      handleThrow(root, thrownValue);
+    }
+  } while (true);
+  resetContextDependencies();
+
+  popDispatcher(prevDispatcher);
+  popAsyncDispatcher(prevAsyncDispatcher);
+  executionContext = prevExecutionContext;
+
+  // Check if the tree has completed.
+  if (workInProgress !== null) {
+    // Still work remaining.
+    if (enableSchedulingProfiler) {
+      markRenderYielded();
+    }
+    return RootInProgress;
+  } else {
+    // Completed the tree.
+    if (enableSchedulingProfiler) {
+      markRenderStopped();
+    }
+
+    // Set this to null to indicate there's no in-progress render.
+    workInProgressRoot = null;
+    workInProgressRootRenderLanes = NoLanes;
+
+    // It's safe to process the queue now that the render phase is complete.
+    finishQueueingConcurrentUpdates();
+
+    // Return the final exit status.
+    return workInProgressRootExitStatus;
+  }
+}
+
+/** @noinline */
+function workLoopConcurrent(nonIdle: boolean) {
+  // We yield every other "frame" when rendering Transition or Retries. Those are blocking
+  // revealing new content. The purpose of this yield is not to avoid the overhead of yielding,
+  // which is very low, but rather to intentionally block any frequently occuring other main
+  // thread work like animations from starving our work. In other words, the purpose of this
+  // is to reduce the framerate of animations to 30 frames per second.
+  // For Idle work we yield every 5ms to keep animations going smooth.
+  if (workInProgress !== null) {
+    const yieldAfter = now() + (nonIdle ? 25 : 5);
+    do {
+      // $FlowFixMe[incompatible-call] flow doesn't know that now() is side-effect free
+      performUnitOfWork(workInProgress);
+    } while (workInProgress !== null && now() < yieldAfter);
+  }
+}
+
+/** @noinline */
+function workLoopConcurrentByScheduler() {
+  // Perform work until Scheduler asks us to yield
+  while (workInProgress !== null && !shouldYield()) {
+    // $FlowFixMe[incompatible-call] flow doesn't know that shouldYield() is side-effect free
+    performUnitOfWork(workInProgress);
+  }
+}
+
+function performUnitOfWork(unitOfWork: Fiber): void {
+  // The current, flushed, state of this fiber is the alternate. Ideally
+  // nothing should rely on this, but relying on it here means that we don't
+  // need an additional field on the work in progress.
+  const current = unitOfWork.alternate;
+
+  let next;
+  if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
+    startProfilerTimer(unitOfWork);
+    if (__DEV__) {
+      next = runWithFiberInDEV(
+        unitOfWork,
+        beginWork,
+        current,
+        unitOfWork,
+        entangledRenderLanes,
+      );
+    } else {
+      next = beginWork(current, unitOfWork, entangledRenderLanes);
+    }
+    stopProfilerTimerIfRunningAndRecordDuration(unitOfWork);
+  } else {
+    if (__DEV__) {
+      next = runWithFiberInDEV(
+        unitOfWork,
+        beginWork,
+        current,
+        unitOfWork,
+        entangledRenderLanes,
+      );
+    } else {
+      next = beginWork(current, unitOfWork, entangledRenderLanes);
+    }
+  }
+
+  unitOfWork.memoizedProps = unitOfWork.pendingProps;
+  if (next === null) {
+    // If this doesn't spawn new work, complete the current work.
+    completeUnitOfWork(unitOfWork);
+  } else {
+    workInProgress = next;
+  }
+}
+
+function replaySuspendedUnitOfWork(unitOfWork: Fiber): void {
+  // This is a fork of performUnitOfWork specifcally for replaying a fiber that
+  // just suspended.
+  let next;
+  if (__DEV__) {
+    next = runWithFiberInDEV(unitOfWork, replayBeginWork, unitOfWork);
+  } else {
+    next = replayBeginWork(unitOfWork);
+  }
+
+  unitOfWork.memoizedProps = unitOfWork.pendingProps;
+  if (next === null) {
+    // If this doesn't spawn new work, complete the current work.
+    completeUnitOfWork(unitOfWork);
+  } else {
+    workInProgress = next;
+  }
+}
+
+function replayBeginWork(unitOfWork: Fiber): null | Fiber {
+  // This is a fork of beginWork specifcally for replaying a fiber that
+  // just suspended.
+
+  const current = unitOfWork.alternate;
+
+  let next;
+  const isProfilingMode =
+    enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode;
+  if (isProfilingMode) {
+    startProfilerTimer(unitOfWork);
+  }
+  switch (unitOfWork.tag) {
+    case SimpleMemoComponent:
+    case FunctionComponent: {
+      // Resolve `defaultProps`. This logic is copied from `beginWork`.
+      // TODO: Consider moving this switch statement into that module. Also,
+      // could maybe use this as an opportunity to say `use` doesn't work with
+      // `defaultProps` :)
+      const Component = unitOfWork.type;
+      let context: any;
+      if (!disableLegacyContext) {
+        const unmaskedContext = getUnmaskedContext(unitOfWork, Component, true);
+        context = getMaskedContext(unitOfWork, unmaskedContext);
+      }
+      next = replayFunctionComponent(
+        current,
+        unitOfWork,
+        unitOfWork.pendingProps,
+        Component,
+        context,
+        workInProgressRootRenderLanes,
+      );
+      break;
+    }
+    case ForwardRef: {
+      // Resolve `defaultProps`. This logic is copied from `beginWork`.
+      // TODO: Consider moving this switch statement into that module. Also,
+      // could maybe use this as an opportunity to say `use` doesn't work with
+      // `defaultProps` :)
+      const Component = unitOfWork.type.render;
+      next = replayFunctionComponent(
+        current,
+        unitOfWork,
+        unitOfWork.pendingProps,
+        Component,
+        unitOfWork.ref,
+        workInProgressRootRenderLanes,
+      );
+      break;
+    }
+    case HostComponent: {
+      // Some host components are stateful (that's how we implement form
+      // actions) but we don't bother to reuse the memoized state because it's
+      // not worth the extra code. The main reason to reuse the previous hooks
+      // is to reuse uncached promises, but we happen to know that the only
+      // promises that a host component might suspend on are definitely cached
+      // because they are controlled by us. So don't bother.
+      resetHooksOnUnwind(unitOfWork);
+      // We are about to retry this host component and need to ensure the hydration
+      // state is appropriate for hydrating this unit. Other fiber types hydrate differently
+      // and aren't reliant on the cursor positioning so this function is only for HostComponent
+      popHydrationStateOnInterruptedWork(unitOfWork);
+      // Fallthrough to the next branch.
+    }
+    default: {
+      // Other types besides function components are reset completely before
+      // being replayed. Currently this only happens when a Usable type is
+      // reconciled — the reconciler will suspend.
+      //
+      // We reset the fiber back to its original state; however, this isn't
+      // a full "unwind" because we're going to reuse the promises that were
+      // reconciled previously. So it's intentional that we don't call
+      // resetSuspendedWorkLoopOnUnwind here.
+      unwindInterruptedWork(current, unitOfWork, workInProgressRootRenderLanes);
+      unitOfWork = workInProgress = resetWorkInProgress(
+        unitOfWork,
+        entangledRenderLanes,
+      );
+      next = beginWork(current, unitOfWork, entangledRenderLanes);
+      break;
+    }
+  }
+  if (isProfilingMode) {
+    stopProfilerTimerIfRunningAndRecordDuration(unitOfWork);
+  }
+
+  return next;
+}
+
+function throwAndUnwindWorkLoop(
+  root: FiberRoot,
+  unitOfWork: Fiber,
+  thrownValue: mixed,
+  suspendedReason: SuspendedReason,
+) {
+  // This is a fork of performUnitOfWork specifcally for unwinding a fiber
+  // that threw an exception.
+  //
+  // Return to the normal work loop. This will unwind the stack, and potentially
+  // result in showing a fallback.
+  resetSuspendedWorkLoopOnUnwind(unitOfWork);
+
+  const returnFiber = unitOfWork.return;
+  try {
+    // Find and mark the nearest Suspense or error boundary that can handle
+    // this "exception".
+    const didFatal = throwException(
+      root,
+      returnFiber,
+      unitOfWork,
+      thrownValue,
+      workInProgressRootRenderLanes,
+    );
+    if (didFatal) {
+      panicOnRootError(root, thrownValue);
+      return;
+    }
+  } catch (error) {
+    // We had trouble processing the error. An example of this happening is
+    // when accessing the `componentDidCatch` property of an error boundary
+    // throws an error. A weird edge case. There's a regression test for this.
+    // To prevent an infinite loop, bubble the error up to the next parent.
+    if (returnFiber !== null) {
+      workInProgress = returnFiber;
+      throw error;
+    } else {
+      panicOnRootError(root, thrownValue);
+      return;
+    }
+  }
+
+  if (unitOfWork.flags & Incomplete) {
+    // Unwind the stack until we reach the nearest boundary.
+    let skipSiblings;
+
+    if (
+      // The current algorithm for both hydration and error handling assumes
+      // that the tree is rendered sequentially. So we always skip the siblings.
+      getIsHydrating() ||
+      suspendedReason === SuspendedOnError
+    ) {
+      skipSiblings = true;
+      // We intentionally don't set workInProgressRootDidSkipSuspendedSiblings,
+      // because we don't want to trigger another prerender attempt.
+    } else if (
+      // Check whether this is a prerender
+      !workInProgressRootIsPrerendering &&
+      // Offscreen rendering is also a form of speculative rendering
+      !includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
+      // This is not a prerender. Skip the siblings during this render. A
+      // separate prerender will be scheduled for later.
+      skipSiblings = true;
+      workInProgressRootDidSkipSuspendedSiblings = true;
+
+      // Because we're skipping the siblings, schedule an immediate retry of
+      // this boundary.
+      //
+      // The reason we do this is because a prerender is only scheduled when
+      // the root is blocked from committing, i.e. RootSuspendedWithDelay.
+      // When the root is not blocked, as in the case when we render a
+      // fallback, the original lane is considered to be finished, and
+      // therefore no longer in need of being prerendered. However, there's
+      // still a pending retry that will happen once the data streams in.
+      // We should start rendering that even before the data streams in so we
+      // can prerender the siblings.
+      if (
+        suspendedReason === SuspendedOnData ||
+        suspendedReason === SuspendedOnAction ||
+        suspendedReason === SuspendedOnImmediate ||
+        suspendedReason === SuspendedOnDeprecatedThrowPromise
+      ) {
+        const boundary = getSuspenseHandler();
+        if (boundary !== null && boundary.tag === SuspenseComponent) {
+          boundary.flags |= ScheduleRetry;
+        }
+      }
+    } else {
+      // This is a prerender. Don't skip the siblings.
+      skipSiblings = false;
+    }
+
+    unwindUnitOfWork(unitOfWork, skipSiblings);
+  } else {
+    // Although the fiber suspended, we're intentionally going to commit it in
+    // an inconsistent state. We can do this safely in cases where we know the
+    // inconsistent tree will be hidden.
+    //
+    // This currently only applies to Legacy Suspense implementation, but we may
+    // port a version of this to concurrent roots, too, when performing a
+    // synchronous render. Because that will allow us to mutate the tree as we
+    // go instead of buffering mutations until the end. Though it's unclear if
+    // this particular path is how that would be implemented.
+    completeUnitOfWork(unitOfWork);
+  }
+}
+
+export function markSpawnedRetryLane(lane: Lane): void {
+  // Keep track of the retry lanes that were spawned by a fallback during the
+  // current render and were not later pinged. This will represent the lanes
+  // that are known to still be suspended.
+  workInProgressSuspendedRetryLanes = mergeLanes(
+    workInProgressSuspendedRetryLanes,
+    lane,
+  );
+}
+
+function panicOnRootError(root: FiberRoot, error: mixed) {
+  // There's no ancestor that can handle this exception. This should never
+  // happen because the root is supposed to capture all errors that weren't
+  // caught by an error boundary. This is a fatal error, or panic condition,
+  // because we've run out of ways to recover.
+  workInProgressRootExitStatus = RootFatalErrored;
+  logUncaughtError(root, createCapturedValueAtFiber(error, root.current));
+  // Set `workInProgress` to null. This represents advancing to the next
+  // sibling, or the parent if there are no siblings. But since the root
+  // has no siblings nor a parent, we set it to null. Usually this is
+  // handled by `completeUnitOfWork` or `unwindWork`, but since we're
+  // intentionally not calling those, we need set it here.
+  // TODO: Consider calling `unwindWork` to pop the contexts.
+  workInProgress = null;
+}
+
+function completeUnitOfWork(unitOfWork: Fiber): void {
+  // Attempt to complete the current unit of work, then move to the next
+  // sibling. If there are no more siblings, return to the parent fiber.
+  let completedWork: Fiber = unitOfWork;
+  do {
+    if ((completedWork.flags & Incomplete) !== NoFlags) {
+      // This fiber did not complete, because one of its children did not
+      // complete. Switch to unwinding the stack instead of completing it.
+      //
+      // The reason "unwind" and "complete" is interleaved is because when
+      // something suspends, we continue rendering the siblings even though
+      // they will be replaced by a fallback.
+      const skipSiblings = workInProgressRootDidSkipSuspendedSiblings;
+      unwindUnitOfWork(completedWork, skipSiblings);
+      return;
+    }
+
+    // The current, flushed, state of this fiber is the alternate. Ideally
+    // nothing should rely on this, but relying on it here means that we don't
+    // need an additional field on the work in progress.
+    const current = completedWork.alternate;
+    const returnFiber = completedWork.return;
+
+    let next;
+    startProfilerTimer(completedWork);
+    if (__DEV__) {
+      next = runWithFiberInDEV(
+        completedWork,
+        completeWork,
+        current,
+        completedWork,
+        entangledRenderLanes,
+      );
+    } else {
+      next = completeWork(current, completedWork, entangledRenderLanes);
+    }
+    if (enableProfilerTimer && (completedWork.mode & ProfileMode) !== NoMode) {
+      // Update render duration assuming we didn't error.
+      stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
+    }
+    if (next !== null) {
+      // Completing this fiber spawned new work. Work on that next.
+      workInProgress = next;
+      return;
+    }
+
+    const siblingFiber = completedWork.sibling;
+    if (siblingFiber !== null) {
+      // If there is more work to do in this returnFiber, do that next.
+      workInProgress = siblingFiber;
+      return;
+    }
+    // Otherwise, return to the parent
+    // $FlowFixMe[incompatible-type] we bail out when we get a null
+    completedWork = returnFiber;
+    // Update the next thing we're working on in case something throws.
+    workInProgress = completedWork;
+  } while (completedWork !== null);
+
+  // We've reached the root.
+  if (workInProgressRootExitStatus === RootInProgress) {
+    workInProgressRootExitStatus = RootCompleted;
+  }
+}
+
+function unwindUnitOfWork(unitOfWork: Fiber, skipSiblings: boolean): void {
+  let incompleteWork: Fiber = unitOfWork;
+  do {
+    // The current, flushed, state of this fiber is the alternate. Ideally
+    // nothing should rely on this, but relying on it here means that we don't
+    // need an additional field on the work in progress.
+    const current = incompleteWork.alternate;
+
+    // This fiber did not complete because something threw. Pop values off
+    // the stack without entering the complete phase. If this is a boundary,
+    // capture values if possible.
+    const next = unwindWork(current, incompleteWork, entangledRenderLanes);
+
+    // Because this fiber did not complete, don't reset its lanes.
+
+    if (next !== null) {
+      // Found a boundary that can handle this exception. Re-renter the
+      // begin phase. This branch will return us to the normal work loop.
+      //
+      // Since we're restarting, remove anything that is not a host effect
+      // from the effect tag.
+      next.flags &= HostEffectMask;
+      workInProgress = next;
+      return;
+    }
+
+    // Keep unwinding until we reach either a boundary or the root.
+
+    if (enableProfilerTimer && (incompleteWork.mode & ProfileMode) !== NoMode) {
+      // Record the render duration for the fiber that errored.
+      stopProfilerTimerIfRunningAndRecordIncompleteDuration(incompleteWork);
+
+      // Include the time spent working on failed children before continuing.
+      let actualDuration = incompleteWork.actualDuration;
+      let child = incompleteWork.child;
+      while (child !== null) {
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+        actualDuration += child.actualDuration;
+        child = child.sibling;
+      }
+      incompleteWork.actualDuration = actualDuration;
+    }
+
+    // TODO: Once we stop prerendering siblings, instead of resetting the parent
+    // of the node being unwound, we should be able to reset node itself as we
+    // unwind the stack. Saves an additional null check.
+    const returnFiber = incompleteWork.return;
+    if (returnFiber !== null) {
+      // Mark the parent fiber as incomplete and clear its subtree flags.
+      // TODO: Once we stop prerendering siblings, we may be able to get rid of
+      // the Incomplete flag because unwinding to the nearest boundary will
+      // happen synchronously.
+      returnFiber.flags |= Incomplete;
+      returnFiber.subtreeFlags = NoFlags;
+      returnFiber.deletions = null;
+    }
+
+    if (!skipSiblings) {
+      const siblingFiber = incompleteWork.sibling;
+      if (siblingFiber !== null) {
+        // This branch will return us to the normal work loop.
+        workInProgress = siblingFiber;
+        return;
+      }
+    }
+
+    // Otherwise, return to the parent
+    // $FlowFixMe[incompatible-type] we bail out when we get a null
+    incompleteWork = returnFiber;
+    // Update the next thing we're working on in case something throws.
+    workInProgress = incompleteWork;
+  } while (incompleteWork !== null);
+
+  // We've unwound all the way to the root.
+  workInProgressRootExitStatus = RootSuspendedAtTheShell;
+  workInProgress = null;
+}
+
+function completeRoot(
+  root: FiberRoot,
+  finishedWork: null | Fiber,
+  lanes: Lanes,
+  recoverableErrors: null | Array<CapturedValue<mixed>>,
+  transitions: Array<Transition> | null,
+  didIncludeRenderPhaseUpdate: boolean,
+  spawnedLane: Lane,
+  updatedLanes: Lanes,
+  suspendedRetryLanes: Lanes,
+  didSkipSuspendedSiblings: boolean,
+  exitStatus: RootExitStatus,
+  suspendedState: null | SuspendedState,
+  suspendedCommitReason: SuspendedCommitReason, // Profiling-only
+  completedRenderStartTime: number, // Profiling-only
+  completedRenderEndTime: number, // Profiling-only
+): void {
+  root.cancelPendingCommit = null;
+
+  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.
+    flushPendingEffects();
+  } while (pendingEffectsStatus !== NO_PENDING_EFFECTS);
+  flushRenderPhaseStrictModeWarningsInDEV();
+
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // Log the previous render phase once we commit. I.e. we weren't interrupted.
+    setCurrentTrackFromLanes(lanes);
+    if (isGestureRender(lanes)) {
+      // Clamp the render start time in case if something else on this lane was committed
+      // (such as this same tree before).
+      if (completedRenderStartTime < gestureClampTime) {
+        completedRenderStartTime = gestureClampTime;
+      }
+      if (completedRenderEndTime < gestureClampTime) {
+        completedRenderEndTime = gestureClampTime;
+      }
+    }
+    if (exitStatus === RootErrored) {
+      logErroredRenderPhase(
+        completedRenderStartTime,
+        completedRenderEndTime,
+        lanes,
+        workInProgressUpdateTask,
+      );
+    } else if (recoverableErrors !== null) {
+      const hydrationFailed =
+        finishedWork !== null &&
+        finishedWork.alternate !== null &&
+        (finishedWork.alternate.memoizedState: RootState).isDehydrated &&
+        (finishedWork.flags & ForceClientRender) !== NoFlags;
+      logRecoveredRenderPhase(
+        completedRenderStartTime,
+        completedRenderEndTime,
+        lanes,
+        recoverableErrors,
+        hydrationFailed,
+        workInProgressUpdateTask,
+      );
+    } else {
+      logRenderPhase(
+        completedRenderStartTime,
+        completedRenderEndTime,
+        lanes,
+        workInProgressUpdateTask,
+      );
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markCommitStarted(lanes);
+  }
+
+  if (finishedWork === null) {
+    if (enableSchedulingProfiler) {
+      markCommitStopped();
+    }
+    if (enableGestureTransition) {
+      // Stop any gestures that were committed.
+      if (isGestureRender(lanes)) {
+        stopCommittedGesture(root);
+      }
+    }
+    return;
+  } else {
+    if (__DEV__) {
+      if (lanes === NoLanes) {
+        console.error(
+          'finishedLanes should not be empty during a commit. This is a ' +
+            'bug in React.',
+        );
+      }
+    }
+  }
+
+  if (finishedWork === root.current) {
+    throw new Error(
+      'Cannot commit the same tree as before. This error is likely caused by ' +
+        'a bug in React. Please file an issue.',
+    );
+  }
+
+  if (root === workInProgressRoot) {
+    // We can reset these now that they are finished.
+    workInProgressRoot = null;
+    workInProgress = null;
+    workInProgressRootRenderLanes = NoLanes;
+  } else {
+    // This indicates that the last root we worked on is not the same one that
+    // we're committing now. This most commonly happens when a suspended root
+    // times out.
+  }
+
+  // workInProgressX might be overwritten, so we want
+  // to store it in pendingPassiveX until they get processed
+  // We need to pass this through as an argument to completeRoot
+  // because workInProgressX might have changed between
+  // the previous render and commit if we throttle the commit
+  // with setTimeout
+  pendingFinishedWork = finishedWork;
+  pendingEffectsRoot = root;
+  pendingEffectsLanes = lanes;
+  pendingPassiveTransitions = transitions;
+  pendingRecoverableErrors = recoverableErrors;
+  pendingDidIncludeRenderPhaseUpdate = didIncludeRenderPhaseUpdate;
+  if (enableProfilerTimer) {
+    pendingEffectsRenderEndTime = completedRenderEndTime;
+    pendingSuspendedCommitReason = suspendedCommitReason;
+    pendingDelayedCommitReason = IMMEDIATE_COMMIT;
+    pendingSuspendedViewTransitionReason = null;
+  }
+
+  if (enableGestureTransition && isGestureRender(lanes)) {
+    const committingGesture = root.pendingGestures;
+    if (committingGesture !== null && !committingGesture.committing) {
+      // This gesture is not ready to commit yet. We'll mark it as suspended and
+      // start a gesture transition which isn't really a side-effect. Then later
+      // we might come back around to actually committing the root.
+      const didAttemptEntireTree = !didSkipSuspendedSiblings;
+      markRootSuspended(root, lanes, spawnedLane, didAttemptEntireTree);
+      if (committingGesture.running === null) {
+        applyGestureOnRoot(
+          root,
+          finishedWork,
+          recoverableErrors,
+          suspendedState,
+          enableProfilerTimer
+            ? suspendedCommitReason === null
+              ? completedRenderEndTime
+              : commitStartTime
+            : 0,
+        );
+      } else {
+        // If we already have a gesture running, we don't update it in place
+        // even if we have a new tree. Instead we wait until we can commit.
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          // Clamp at the render time since we're not going to finish the rest
+          // of this commit or apply yet.
+          finalizeRender(lanes, completedRenderEndTime);
+        }
+        // We are no longer committing.
+        pendingEffectsRoot = (null: any); // Clear for GC purposes.
+        pendingFinishedWork = (null: any); // Clear for GC purposes.
+        pendingEffectsLanes = NoLanes;
+      }
+      // Schedule the root to be committed when the gesture completes.
+      root.cancelPendingCommit = scheduleGestureCommit(
+        committingGesture,
+        completeRoot.bind(
+          null,
+          root,
+          finishedWork,
+          lanes,
+          recoverableErrors,
+          transitions,
+          didIncludeRenderPhaseUpdate,
+          spawnedLane,
+          updatedLanes,
+          suspendedRetryLanes,
+          didSkipSuspendedSiblings,
+          exitStatus,
+          suspendedState,
+          'Waiting for the Gesture to finish' /* suspendedCommitReason */,
+          completedRenderStartTime,
+          completedRenderEndTime,
+        ),
+      );
+      return;
+    }
+  }
+
+  // If we're not starting a gesture we now actually commit the root.
+  commitRoot(
+    root,
+    finishedWork,
+    lanes,
+    spawnedLane,
+    updatedLanes,
+    suspendedRetryLanes,
+    suspendedState,
+    suspendedCommitReason,
+    completedRenderEndTime,
+  );
+}
+
+function commitRoot(
+  root: FiberRoot,
+  finishedWork: Fiber,
+  lanes: Lanes,
+  spawnedLane: Lane,
+  updatedLanes: Lanes,
+  suspendedRetryLanes: Lanes,
+  suspendedState: null | SuspendedState,
+  suspendedCommitReason: SuspendedCommitReason, // Profiling-only
+  completedRenderEndTime: number, // Profiling-only
+) {
+  // Check which lanes no longer have any work scheduled on them, and mark
+  // those as finished.
+  let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
+
+  pendingEffectsRemainingLanes = remainingLanes;
+
+  // Make sure to account for lanes that were updated by a concurrent event
+  // during the render phase; don't mark them as finished.
+  const concurrentlyUpdatedLanes = getConcurrentlyUpdatedLanes();
+  remainingLanes = mergeLanes(remainingLanes, concurrentlyUpdatedLanes);
+
+  if (enableGestureTransition && root.pendingGestures === null) {
+    // Gestures don't clear their lanes while the gesture is still active but it
+    // might not be scheduled to do any more renders and so we shouldn't schedule
+    // any more gesture lane work until a new gesture is scheduled.
+    if (enableProfilerTimer && (remainingLanes & GestureLane) !== NoLanes) {
+      // We need to clear any updates scheduled so that we can treat future updates
+      // as the cause of the render.
+      clearGestureUpdates();
+    }
+    remainingLanes &= ~GestureLane;
+  }
+
+  markRootFinished(
+    root,
+    lanes,
+    remainingLanes,
+    spawnedLane,
+    updatedLanes,
+    suspendedRetryLanes,
+  );
+
+  // Reset this before firing side effects so we can detect recursive updates.
+  didIncludeCommitPhaseUpdate = false;
+
+  // If there are pending passive effects, schedule a callback to process them.
+  // Do this as early as possible, so it is queued before anything else that
+  // might get scheduled in the commit phase. (See #16714.)
+  // TODO: Delete all other places that schedule the passive effect callback
+  // They're redundant.
+  let passiveSubtreeMask;
+  if (enableViewTransition) {
+    pendingViewTransitionEvents = null;
+    if (includesOnlyViewTransitionEligibleLanes(lanes)) {
+      // Claim any pending Transition Types for this commit.
+      pendingTransitionTypes = claimQueuedTransitionTypes(root);
+      passiveSubtreeMask = PassiveTransitionMask;
+    } else {
+      pendingTransitionTypes = null;
+      passiveSubtreeMask = PassiveMask;
+    }
+  } else {
+    passiveSubtreeMask = PassiveMask;
+  }
+  if (
+    // If this subtree rendered with profiling this commit, we need to visit it to log it.
+    (enableProfilerTimer &&
+      enableComponentPerformanceTrack &&
+      finishedWork.actualDuration !== 0) ||
+    (finishedWork.subtreeFlags & passiveSubtreeMask) !== NoFlags ||
+    (finishedWork.flags & passiveSubtreeMask) !== NoFlags
+  ) {
+    if (enableYieldingBeforePassive) {
+      // We don't schedule a separate task for flushing passive effects.
+      // Instead, we just rely on ensureRootIsScheduled below to schedule
+      // a callback for us to flush the passive effects.
+    } else {
+      // So we can clear these now to allow a new callback to be scheduled.
+      root.callbackNode = null;
+      root.callbackPriority = NoLane;
+      scheduleCallback(NormalSchedulerPriority, () => {
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          // Track the currently executing event if there is one so we can ignore this
+          // event when logging events.
+          trackSchedulerEvent();
+        }
+        if (pendingDelayedCommitReason === IMMEDIATE_COMMIT) {
+          pendingDelayedCommitReason = DELAYED_PASSIVE_COMMIT;
+        }
+        flushPassiveEffects();
+        // This render triggered passive effects: release the root cache pool
+        // *after* passive effects fire to avoid freeing a cache pool that may
+        // be referenced by a node in the tree (HostRoot, Cache boundary etc)
+        return null;
+      });
+    }
+  } else {
+    // If we don't have passive effects, we're not going to need to perform more work
+    // so we can clear the callback now.
+    root.callbackNode = null;
+    root.callbackPriority = NoLane;
+  }
+
+  if (enableProfilerTimer) {
+    // Mark the current commit time to be shared by all Profilers in this
+    // batch. This enables them to be grouped later.
+    resetCommitErrors();
+    recordCommitTime();
+    if (enableComponentPerformanceTrack) {
+      if (suspendedCommitReason !== null) {
+        logSuspendedCommitPhase(
+          completedRenderEndTime,
+          commitStartTime,
+          suspendedCommitReason,
+          workInProgressUpdateTask,
+        );
+      }
+    }
+  }
+
+  resetShouldStartViewTransition();
+
+  // The commit phase is broken into several sub-phases. We do a separate pass
+  // of the effect list for each phase: all mutation effects come before all
+  // layout effects, and so on.
+
+  // Check if there are any effects in the whole tree.
+  // TODO: This is left over from the effect list implementation, where we had
+  // to check for the existence of `firstEffect` to satisfy Flow. I think the
+  // only other reason this optimization exists is because it affects profiling.
+  // Reconsider whether this is necessary.
+  const subtreeHasBeforeMutationEffects =
+    (finishedWork.subtreeFlags & (BeforeMutationMask | MutationMask)) !==
+    NoFlags;
+  const rootHasBeforeMutationEffect =
+    (finishedWork.flags & (BeforeMutationMask | MutationMask)) !== NoFlags;
+
+  if (subtreeHasBeforeMutationEffects || rootHasBeforeMutationEffect) {
+    const prevTransition = ReactSharedInternals.T;
+    ReactSharedInternals.T = null;
+    const previousPriority = getCurrentUpdatePriority();
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    const prevExecutionContext = executionContext;
+    executionContext |= CommitContext;
+    try {
+      // The first phase a "before mutation" phase. We use this phase to read the
+      // state of the host tree right before we mutate it. This is where
+      // getSnapshotBeforeUpdate is called.
+      commitBeforeMutationEffects(root, finishedWork, lanes);
+    } finally {
+      // Reset the priority to the previous non-sync value.
+      executionContext = prevExecutionContext;
+      setCurrentUpdatePriority(previousPriority);
+      ReactSharedInternals.T = prevTransition;
+    }
+  }
+
+  if (enableGestureTransition) {
+    // Stop any gestures that were committed.
+    if (isGestureRender(lanes)) {
+      stopCommittedGesture(root);
+      // Note that shouldStartViewTransition should always be false here because
+      // committing a gesture never starts a new View Transition itself since it's
+      // not a View Transition eligible lane. Only follow up Transition commits can
+      // cause animate.
+    }
+  }
+
+  pendingEffectsStatus = PENDING_MUTATION_PHASE;
+  if (enableViewTransition && shouldStartViewTransition) {
+    if (enableProfilerTimer && enableComponentPerformanceTrack) {
+      startAnimating(lanes);
+    }
+    pendingViewTransition = startViewTransition(
+      suspendedState,
+      root.containerInfo,
+      pendingTransitionTypes,
+      flushMutationEffects,
+      flushLayoutEffects,
+      flushAfterMutationEffects,
+      flushSpawnedWork,
+      flushPassiveEffects,
+      reportViewTransitionError,
+      enableProfilerTimer ? suspendedViewTransition : (null: any),
+      enableProfilerTimer
+        ? // This callback fires after "pendingEffects" so we need to snapshot the arguments.
+          finishedViewTransition.bind(null, lanes)
+        : (null: any),
+    );
+  } else {
+    // Flush synchronously.
+    flushMutationEffects();
+    flushLayoutEffects();
+    // Skip flushAfterMutationEffects
+    flushSpawnedWork();
+  }
+}
+
+function reportViewTransitionError(error: mixed) {
+  // Report errors that happens while preparing a View Transition.
+  if (pendingEffectsStatus === NO_PENDING_EFFECTS) {
+    return;
+  }
+  const root = pendingEffectsRoot;
+  const onRecoverableError = root.onRecoverableError;
+  onRecoverableError(error, makeErrorInfo(null));
+}
+
+function suspendedViewTransition(reason: string): void {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // We'll split the commit into two phases, because we're suspended in the middle.
+    recordCommitEndTime();
+    logCommitPhase(
+      pendingSuspendedCommitReason === null
+        ? pendingEffectsRenderEndTime
+        : commitStartTime,
+      commitEndTime,
+      commitErrors,
+      pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
+      workInProgressUpdateTask, // TODO: Use a ViewTransition Task and this is not safe to read in this phase.
+    );
+    pendingSuspendedViewTransitionReason = reason;
+    pendingSuspendedCommitReason = reason;
+  }
+}
+
+function finishedViewTransition(lanes: Lanes): void {
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if ((animatingLanes & lanes) === NoLanes) {
+      // Was already stopped by some other action or maybe other root.
+      return;
+    }
+    const task = animatingTask;
+    stopAnimating(lanes);
+    // If an affected track isn't in the middle of rendering or committing, log from the previous
+    // finished render until the end of the animation.
+    if (
+      isGestureRender(lanes) &&
+      !isGestureRender(workInProgressRootRenderLanes) &&
+      !isGestureRender(pendingEffectsLanes)
+    ) {
+      setCurrentTrackFromLanes(GestureLane);
+      logAnimatingPhase(gestureClampTime, now(), task);
+    }
+    if (
+      includesTransitionLane(lanes) &&
+      !includesTransitionLane(workInProgressRootRenderLanes) &&
+      !includesTransitionLane(pendingEffectsLanes)
+    ) {
+      setCurrentTrackFromLanes(SomeTransitionLane);
+      logAnimatingPhase(transitionClampTime, now(), task);
+    }
+    if (
+      includesRetryLane(lanes) &&
+      !includesRetryLane(workInProgressRootRenderLanes) &&
+      !includesRetryLane(pendingEffectsLanes)
+    ) {
+      setCurrentTrackFromLanes(SomeRetryLane);
+      logAnimatingPhase(retryClampTime, now(), task);
+    }
+    if (
+      includesIdleGroupLanes(lanes) &&
+      !includesIdleGroupLanes(workInProgressRootRenderLanes) &&
+      !includesIdleGroupLanes(pendingEffectsLanes)
+    ) {
+      setCurrentTrackFromLanes(IdleLane);
+      logAnimatingPhase(idleClampTime, now(), task);
+    }
+  }
+}
+
+function flushAfterMutationEffects(): void {
+  if (pendingEffectsStatus !== PENDING_AFTER_MUTATION_PHASE) {
+    return;
+  }
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+  const root = pendingEffectsRoot;
+  const finishedWork = pendingFinishedWork;
+  const lanes = pendingEffectsLanes;
+  commitAfterMutationEffects(root, finishedWork, lanes);
+  pendingEffectsStatus = PENDING_SPAWNED_WORK;
+}
+
+function flushMutationEffects(): void {
+  if (pendingEffectsStatus !== PENDING_MUTATION_PHASE) {
+    return;
+  }
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+
+  const root = pendingEffectsRoot;
+  const finishedWork = pendingFinishedWork;
+  const lanes = pendingEffectsLanes;
+  const subtreeMutationHasEffects =
+    (finishedWork.subtreeFlags & MutationMask) !== NoFlags;
+  const rootMutationHasEffect = (finishedWork.flags & MutationMask) !== NoFlags;
+
+  if (subtreeMutationHasEffects || rootMutationHasEffect) {
+    const prevTransition = ReactSharedInternals.T;
+    ReactSharedInternals.T = null;
+    const previousPriority = getCurrentUpdatePriority();
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    const prevExecutionContext = executionContext;
+    executionContext |= CommitContext;
+    try {
+      // The next phase is the mutation phase, where we mutate the host tree.
+      commitMutationEffects(root, finishedWork, lanes);
+
+      if (enableCreateEventHandleAPI) {
+        if (shouldFireAfterActiveInstanceBlur) {
+          afterActiveInstanceBlur();
+        }
+      }
+      resetAfterCommit(root.containerInfo);
+    } finally {
+      // Reset the priority to the previous non-sync value.
+      executionContext = prevExecutionContext;
+      setCurrentUpdatePriority(previousPriority);
+      ReactSharedInternals.T = prevTransition;
+    }
+  }
+
+  // The work-in-progress tree is now the current tree. This must come after
+  // the mutation phase, so that the previous tree is still current during
+  // componentWillUnmount, but before the layout phase, so that the finished
+  // work is current during componentDidMount/Update.
+  root.current = finishedWork;
+  pendingEffectsStatus = PENDING_LAYOUT_PHASE;
+}
+
+function flushLayoutEffects(): void {
+  if (pendingEffectsStatus !== PENDING_LAYOUT_PHASE) {
+    return;
+  }
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    const suspendedViewTransitionReason = pendingSuspendedViewTransitionReason;
+    if (suspendedViewTransitionReason !== null) {
+      // We suspended in the middle of the commit for the view transition.
+      // We'll start a new commit track now.
+      recordCommitTime();
+      logSuspendedViewTransitionPhase(
+        commitEndTime, // The start is the end of the first commit part.
+        commitStartTime, // The end is the start of the second commit part.
+        suspendedViewTransitionReason,
+        animatingTask,
+      );
+    }
+  }
+
+  const root = pendingEffectsRoot;
+  const finishedWork = pendingFinishedWork;
+  const lanes = pendingEffectsLanes;
+
+  if (enableDefaultTransitionIndicator) {
+    const cleanUpIndicator = root.pendingIndicator;
+    if (cleanUpIndicator !== null && root.indicatorLanes === NoLanes) {
+      // We have now committed all Transitions that needed the default indicator
+      // so we can now run the clean up function. We do this in the layout phase
+      // so it has the same semantics as if you did it with a useLayoutEffect or
+      // if it was reset automatically with useOptimistic.
+      const prevTransition = ReactSharedInternals.T;
+      ReactSharedInternals.T = null;
+      const previousPriority = getCurrentUpdatePriority();
+      setCurrentUpdatePriority(DiscreteEventPriority);
+      const prevExecutionContext = executionContext;
+      executionContext |= CommitContext;
+      root.pendingIndicator = null;
+      try {
+        cleanUpIndicator();
+      } catch (x) {
+        reportGlobalError(x);
+      } finally {
+        // Reset the priority to the previous non-sync value.
+        executionContext = prevExecutionContext;
+        setCurrentUpdatePriority(previousPriority);
+        ReactSharedInternals.T = prevTransition;
+      }
+    }
+  }
+
+  const subtreeHasLayoutEffects =
+    (finishedWork.subtreeFlags & LayoutMask) !== NoFlags;
+  const rootHasLayoutEffect = (finishedWork.flags & LayoutMask) !== NoFlags;
+
+  if (subtreeHasLayoutEffects || rootHasLayoutEffect) {
+    const prevTransition = ReactSharedInternals.T;
+    ReactSharedInternals.T = null;
+    const previousPriority = getCurrentUpdatePriority();
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    const prevExecutionContext = executionContext;
+    executionContext |= CommitContext;
+    try {
+      // The next phase is the layout phase, where we call effects that read
+      // the host tree after it's been mutated. The idiomatic use case for this is
+      // layout, but class component lifecycles also fire here for legacy reasons.
+      if (enableSchedulingProfiler) {
+        markLayoutEffectsStarted(lanes);
+      }
+      commitLayoutEffects(finishedWork, root, lanes);
+      if (enableSchedulingProfiler) {
+        markLayoutEffectsStopped();
+      }
+    } finally {
+      // Reset the priority to the previous non-sync value.
+      executionContext = prevExecutionContext;
+      setCurrentUpdatePriority(previousPriority);
+      ReactSharedInternals.T = prevTransition;
+    }
+  }
+
+  const completedRenderEndTime = pendingEffectsRenderEndTime;
+  const suspendedCommitReason = pendingSuspendedCommitReason;
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    recordCommitEndTime();
+    logCommitPhase(
+      suspendedCommitReason === null ? completedRenderEndTime : commitStartTime,
+      commitEndTime,
+      commitErrors,
+      pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
+      workInProgressUpdateTask,
+    );
+  }
+
+  pendingEffectsStatus = PENDING_AFTER_MUTATION_PHASE;
+}
+
+function flushSpawnedWork(): void {
+  if (
+    pendingEffectsStatus !== PENDING_SPAWNED_WORK &&
+    // If a startViewTransition times out, we might flush this earlier than
+    // after mutation phase. In that case, we just skip the after mutation phase.
+    pendingEffectsStatus !== PENDING_AFTER_MUTATION_PHASE
+  ) {
+    return;
+  }
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // If we didn't skip the after mutation phase, when is means we started an animation.
+    const startedAnimation = pendingEffectsStatus === PENDING_SPAWNED_WORK;
+    if (startedAnimation) {
+      const startViewTransitionStartTime = commitEndTime;
+      // Update the new commitEndTime to when we started the animation.
+      recordCommitEndTime();
+      logStartViewTransitionYieldPhase(
+        startViewTransitionStartTime,
+        commitEndTime,
+        pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
+        animatingTask,
+      );
+      if (pendingDelayedCommitReason !== ABORTED_VIEW_TRANSITION_COMMIT) {
+        pendingDelayedCommitReason = ANIMATION_STARTED_COMMIT;
+      }
+    }
+  }
+
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+
+  const committedViewTransition = pendingViewTransition;
+  pendingViewTransition = null; // The view transition has now fully started.
+
+  // Tell Scheduler to yield at the end of the frame, so the browser has an
+  // opportunity to paint.
+  requestPaint();
+
+  const root = pendingEffectsRoot;
+  const finishedWork = pendingFinishedWork;
+  const lanes = pendingEffectsLanes;
+  const recoverableErrors = pendingRecoverableErrors;
+  const didIncludeRenderPhaseUpdate = pendingDidIncludeRenderPhaseUpdate;
+
+  const passiveSubtreeMask =
+    enableViewTransition && includesOnlyViewTransitionEligibleLanes(lanes)
+      ? PassiveTransitionMask
+      : PassiveMask;
+  const rootDidHavePassiveEffects = // If this subtree rendered with profiling this commit, we need to visit it to log it.
+    (enableProfilerTimer &&
+      enableComponentPerformanceTrack &&
+      finishedWork.actualDuration !== 0) ||
+    (finishedWork.subtreeFlags & passiveSubtreeMask) !== NoFlags ||
+    (finishedWork.flags & passiveSubtreeMask) !== NoFlags;
+
+  if (rootDidHavePassiveEffects) {
+    pendingEffectsStatus = PENDING_PASSIVE_PHASE;
+  } else {
+    pendingEffectsStatus = NO_PENDING_EFFECTS;
+    pendingEffectsRoot = (null: any); // Clear for GC purposes.
+    pendingFinishedWork = (null: any); // Clear for GC purposes.
+    // There were no passive effects, so we can immediately release the cache
+    // pool for this render.
+    releaseRootPooledCache(root, root.pendingLanes);
+    if (__DEV__) {
+      nestedPassiveUpdateCount = 0;
+      rootWithPassiveNestedUpdates = null;
+    }
+  }
+
+  // Read this again, since an effect might have updated it
+  let remainingLanes = root.pendingLanes;
+
+  // Check if there's remaining work on this root
+  // TODO: This is part of the `componentDidCatch` implementation. Its purpose
+  // is to detect whether something might have called setState inside
+  // `componentDidCatch`. The mechanism is known to be flawed because `setState`
+  // inside `componentDidCatch` is itself flawed — that's why we recommend
+  // `getDerivedStateFromError` instead. However, it could be improved by
+  // checking if remainingLanes includes Sync work, instead of whether there's
+  // any work remaining at all (which would also include stuff like Suspense
+  // retries or transitions). It's been like this for a while, though, so fixing
+  // it probably isn't that urgent.
+  if (remainingLanes === NoLanes) {
+    // If there's no remaining work, we can clear the set of already failed
+    // error boundaries.
+    legacyErrorBoundariesThatAlreadyFailed = null;
+  }
+
+  if (__DEV__) {
+    if (!rootDidHavePassiveEffects) {
+      commitDoubleInvokeEffectsInDEV(root, false);
+    }
+  }
+
+  const renderPriority = lanesToEventPriority(lanes);
+  onCommitRootDevTools(finishedWork.stateNode, renderPriority);
+
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      root.memoizedUpdaters.clear();
+    }
+  }
+
+  if (__DEV__) {
+    onCommitRootTestSelector();
+  }
+
+  if (recoverableErrors !== null) {
+    const prevTransition = ReactSharedInternals.T;
+    const previousUpdateLanePriority = getCurrentUpdatePriority();
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    ReactSharedInternals.T = null;
+    try {
+      // There were errors during this render, but recovered from them without
+      // needing to surface it to the UI. We log them here.
+      const onRecoverableError = root.onRecoverableError;
+      for (let i = 0; i < recoverableErrors.length; i++) {
+        const recoverableError = recoverableErrors[i];
+        const errorInfo = makeErrorInfo(recoverableError.stack);
+        if (__DEV__) {
+          runWithFiberInDEV(
+            recoverableError.source,
+            onRecoverableError,
+            recoverableError.value,
+            errorInfo,
+          );
+        } else {
+          onRecoverableError(recoverableError.value, errorInfo);
+        }
+      }
+    } finally {
+      ReactSharedInternals.T = prevTransition;
+      setCurrentUpdatePriority(previousUpdateLanePriority);
+    }
+  }
+
+  if (enableViewTransition) {
+    // We should now be after the startViewTransition's .ready call which is late enough
+    // to start animating any pseudo-elements. We do this before flushing any passive
+    // effects or spawned sync work since this is still part of the previous commit.
+    // Even though conceptually it's like its own task between layout effets and passive.
+    const pendingEvents = pendingViewTransitionEvents;
+    let pendingTypes = pendingTransitionTypes;
+    pendingTransitionTypes = null;
+    if (pendingEvents !== null) {
+      pendingViewTransitionEvents = null;
+      if (pendingTypes === null) {
+        // Normalize the type. This is lazily created only for events.
+        pendingTypes = [];
+      }
+      if (committedViewTransition !== null) {
+        for (let i = 0; i < pendingEvents.length; i++) {
+          const viewTransitionEvent = pendingEvents[i];
+          const cleanup = viewTransitionEvent(pendingTypes);
+          if (cleanup !== undefined) {
+            addViewTransitionFinishedListener(committedViewTransition, cleanup);
+          }
+        }
+      }
+    }
+  }
+
+  // If the passive effects are the result of a discrete render, flush them
+  // synchronously at the end of the current task so that the result is
+  // immediately observable. Otherwise, we assume that they are not
+  // order-dependent and do not need to be observed by external systems, so we
+  // can wait until after paint.
+  // TODO: We can optimize this by not scheduling the callback earlier. Since we
+  // currently schedule the callback in multiple places, will wait until those
+  // are consolidated.
+  if (
+    includesSyncLane(pendingEffectsLanes) &&
+    (disableLegacyMode || root.tag !== LegacyRoot)
+  ) {
+    flushPendingEffects();
+  }
+
+  // Always call this before exiting `completeRoot`, to ensure that any
+  // additional work on this root is scheduled.
+  ensureRootIsScheduled(root);
+
+  // Read this again, since a passive effect might have updated it
+  remainingLanes = root.pendingLanes;
+
+  // Check if this render scheduled a cascading synchronous update. This is a
+  // heurstic to detect infinite update loops. We are intentionally excluding
+  // hydration lanes in this check, because render triggered by selective
+  // hydration is conceptually not an update.
+  if (
+    // Check if there was a recursive update spawned by this render, in either
+    // the render phase or the commit phase. We track these explicitly because
+    // we can't infer from the remaining lanes alone.
+    (enableInfiniteRenderLoopDetection &&
+      (didIncludeRenderPhaseUpdate || didIncludeCommitPhaseUpdate)) ||
+    // Was the finished render the result of an update (not hydration)?
+    (includesSomeLane(lanes, UpdateLanes) &&
+      // Did it schedule a sync update?
+      includesSomeLane(remainingLanes, SyncUpdateLanes))
+  ) {
+    if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+      markNestedUpdateScheduled();
+    }
+
+    // Count the number of times the root synchronously re-renders without
+    // finishing. If there are too many, it indicates an infinite update loop.
+    if (root === rootWithNestedUpdates) {
+      nestedUpdateCount++;
+    } else {
+      nestedUpdateCount = 0;
+      rootWithNestedUpdates = root;
+    }
+  } else {
+    nestedUpdateCount = 0;
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    if (!rootDidHavePassiveEffects) {
+      finalizeRender(lanes, commitEndTime);
+    }
+  }
+
+  // Eagerly flush any event replaying that we unblocked within this commit.
+  // This ensures that those are observed before we render any new changes.
+  if (supportsHydration) {
+    flushHydrationEvents();
+  }
+
+  // If layout work was scheduled, flush it now.
+  flushSyncWorkOnAllRoots();
+
+  if (enableSchedulingProfiler) {
+    markCommitStopped();
+  }
+
+  if (enableTransitionTracing) {
+    // We process transitions during passive effects. However, passive effects can be
+    // processed synchronously during the commit phase as well as asynchronously after
+    // paint. At the end of the commit phase, we schedule a callback that will be called
+    // after the next paint. If the transitions have already been processed (passive
+    // effect phase happened synchronously), we will schedule a callback to process
+    // the transitions. However, if we don't have any pending transition callbacks, this
+    // means that the transitions have yet to be processed (passive effects processed after paint)
+    // so we will store the end time of paint so that we can process the transitions
+    // and then call the callback via the correct end time.
+    const prevRootTransitionCallbacks = root.transitionCallbacks;
+    if (prevRootTransitionCallbacks !== null) {
+      schedulePostPaintCallback(endTime => {
+        const prevPendingTransitionCallbacks =
+          currentPendingTransitionCallbacks;
+        if (prevPendingTransitionCallbacks !== null) {
+          currentPendingTransitionCallbacks = null;
+          scheduleCallback(IdleSchedulerPriority, () => {
+            processTransitionCallbacks(
+              prevPendingTransitionCallbacks,
+              endTime,
+              prevRootTransitionCallbacks,
+            );
+          });
+        } else {
+          currentEndTime = endTime;
+        }
+      });
+    }
+  }
+}
+
+function applyGestureOnRoot(
+  root: FiberRoot,
+  finishedWork: Fiber,
+  recoverableErrors: null | Array<CapturedValue<mixed>>,
+  suspendedState: null | SuspendedState,
+  renderEndTime: number, // Profiling-only
+): void {
+  // We assume that the gesture we just rendered was the first one in the queue.
+  const finishedGesture = root.pendingGestures;
+  if (finishedGesture === null) {
+    // We must have already cancelled this gesture before we had a chance to
+    // render it. Let's schedule work on the next set of lanes.
+    ensureRootIsScheduled(root);
+    return;
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    startAnimating(pendingEffectsLanes);
+  }
+
+  pendingViewTransitionEvents = null;
+
+  const prevTransition = ReactSharedInternals.T;
+  ReactSharedInternals.T = null;
+  const previousPriority = getCurrentUpdatePriority();
+  setCurrentUpdatePriority(DiscreteEventPriority);
+  const prevExecutionContext = executionContext;
+  executionContext |= CommitContext;
+  try {
+    insertDestinationClones(root, finishedWork);
+  } finally {
+    // Reset the priority to the previous non-sync value.
+    executionContext = prevExecutionContext;
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+  }
+  pendingTransitionTypes = finishedGesture.types;
+  pendingEffectsStatus = PENDING_GESTURE_MUTATION_PHASE;
+
+  pendingViewTransition = finishedGesture.running = startGestureTransition(
+    suspendedState,
+    root.containerInfo,
+    finishedGesture.provider,
+    finishedGesture.rangeStart,
+    finishedGesture.rangeEnd,
+    pendingTransitionTypes,
+    flushGestureMutations,
+    flushGestureAnimations,
+    reportViewTransitionError,
+    enableProfilerTimer
+      ? // This callback fires after "pendingEffects" so we need to snapshot the arguments.
+        finishedViewTransition.bind(null, pendingEffectsLanes)
+      : (null: any),
+  );
+}
+
+function flushGestureMutations(): void {
+  if (!enableGestureTransition) {
+    return;
+  }
+  if (pendingEffectsStatus !== PENDING_GESTURE_MUTATION_PHASE) {
+    return;
+  }
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+  const root = pendingEffectsRoot;
+  const finishedWork = pendingFinishedWork;
+
+  const prevTransition = ReactSharedInternals.T;
+  ReactSharedInternals.T = null;
+  const previousPriority = getCurrentUpdatePriority();
+  setCurrentUpdatePriority(DiscreteEventPriority);
+  const prevExecutionContext = executionContext;
+  executionContext |= CommitContext;
+  try {
+    applyDepartureTransitions(root, finishedWork);
+  } finally {
+    // Reset the priority to the previous non-sync value.
+    executionContext = prevExecutionContext;
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    recordCommitEndTime();
+    logApplyGesturePhase(
+      pendingEffectsRenderEndTime,
+      commitEndTime,
+      animatingTask,
+    );
+  }
+
+  pendingEffectsStatus = PENDING_GESTURE_ANIMATION_PHASE;
+}
+
+function flushGestureAnimations(): void {
+  if (!enableGestureTransition) {
+    return;
+  }
+  // If we get canceled before we start we might not have applied
+  // mutations yet. We need to apply them first.
+  flushGestureMutations();
+  if (pendingEffectsStatus !== PENDING_GESTURE_ANIMATION_PHASE) {
+    return;
+  }
+
+  const lanes = pendingEffectsLanes;
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    const startViewTransitionStartTime = commitEndTime;
+    // Update the new commitEndTime to when we started the animation.
+    recordCommitEndTime();
+    logStartViewTransitionYieldPhase(
+      startViewTransitionStartTime,
+      commitEndTime,
+      pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
+      animatingTask,
+    );
+    if (pendingDelayedCommitReason !== ABORTED_VIEW_TRANSITION_COMMIT) {
+      pendingDelayedCommitReason = ANIMATION_STARTED_COMMIT;
+    }
+  }
+
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+  const root = pendingEffectsRoot;
+  const finishedWork = pendingFinishedWork;
+  pendingEffectsRoot = (null: any); // Clear for GC purposes.
+  pendingFinishedWork = (null: any); // Clear for GC purposes.
+  pendingEffectsLanes = NoLanes;
+
+  pendingViewTransition = null; // The view transition has now fully started.
+
+  const prevTransition = ReactSharedInternals.T;
+  ReactSharedInternals.T = null;
+  const previousPriority = getCurrentUpdatePriority();
+  setCurrentUpdatePriority(DiscreteEventPriority);
+  const prevExecutionContext = executionContext;
+  executionContext |= CommitContext;
+  try {
+    startGestureAnimations(root, finishedWork);
+  } finally {
+    // Reset the priority to the previous non-sync value.
+    executionContext = prevExecutionContext;
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+  }
+
+  if (enableViewTransition) {
+    // We should now be after the startGestureTransition's .ready call which is late enough
+    // to start animating any pseudo-elements. We have also already applied any adjustments
+    // we do to the built-in animations which can now be read by the refs.
+    const pendingEvents = pendingViewTransitionEvents;
+    let pendingTypes = pendingTransitionTypes;
+    pendingTransitionTypes = null;
+    if (pendingEvents !== null) {
+      pendingViewTransitionEvents = null;
+      if (pendingTypes === null) {
+        // Normalize the type. This is lazily created only for events.
+        pendingTypes = [];
+      }
+      const appliedGesture = root.pendingGestures;
+      if (appliedGesture !== null) {
+        const runningTransition = appliedGesture.running;
+        if (runningTransition !== null) {
+          for (let i = 0; i < pendingEvents.length; i++) {
+            const viewTransitionEvent = pendingEvents[i];
+            const cleanup = viewTransitionEvent(pendingTypes);
+            if (cleanup !== undefined) {
+              addViewTransitionFinishedListener(runningTransition, cleanup);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    finalizeRender(lanes, commitEndTime);
+  }
+
+  // Now that we've rendered this lane. Start working on the next lane.
+  ensureRootIsScheduled(root);
+}
+
+function makeErrorInfo(componentStack: ?string) {
+  const errorInfo = {
+    componentStack,
+  };
+  if (__DEV__) {
+    Object.defineProperty((errorInfo: any), 'digest', {
+      get() {
+        console.error(
+          'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
+            ' This property is no longer provided as part of errorInfo but can be accessed as a property' +
+            ' of the Error instance itself.',
+        );
+      },
+    });
+  }
+  return errorInfo;
+}
+
+function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
+  const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
+  if (pooledCacheLanes === NoLanes) {
+    // None of the remaining work relies on the cache pool. Clear it so
+    // subsequent requests get a new cache
+    const pooledCache = root.pooledCache;
+    if (pooledCache != null) {
+      root.pooledCache = null;
+      releaseCache(pooledCache);
+    }
+  }
+}
+
+let didWarnAboutInterruptedViewTransitions = false;
+
+export function flushPendingEffectsDelayed(): boolean {
+  if (pendingDelayedCommitReason === IMMEDIATE_COMMIT) {
+    pendingDelayedCommitReason = DELAYED_PASSIVE_COMMIT;
+  }
+  return flushPendingEffects();
+}
+
+export function flushPendingEffects(): boolean {
+  // Returns whether passive effects were flushed.
+  if (enableViewTransition && pendingViewTransition !== null) {
+    // If we forced a flush before the View Transition full started then we skip it.
+    // This ensures that we're not running a partial animation.
+    stopViewTransition(pendingViewTransition);
+    if (__DEV__) {
+      if (!didWarnAboutInterruptedViewTransitions) {
+        didWarnAboutInterruptedViewTransitions = true;
+        console.warn(
+          'A flushSync update cancelled a View Transition because it was called ' +
+            'while the View Transition was still preparing. To preserve the synchronous ' +
+            'semantics, React had to skip the View Transition. If you can, try to avoid ' +
+            "flushSync() in a scenario that's likely to interfere.",
+        );
+      }
+    }
+    pendingViewTransition = null;
+    pendingDelayedCommitReason = ABORTED_VIEW_TRANSITION_COMMIT;
+  }
+  flushGestureMutations();
+  flushGestureAnimations();
+  flushMutationEffects();
+  flushLayoutEffects();
+  // Skip flushAfterMutation if we're forcing this early.
+  flushSpawnedWork();
+  return flushPassiveEffects();
+}
+
+function flushPassiveEffects(): boolean {
+  if (pendingEffectsStatus !== PENDING_PASSIVE_PHASE) {
+    return false;
+  }
+  // TODO: Merge flushPassiveEffectsImpl into this function. I believe they were only separate
+  // in the first place because we used to wrap it with
+  // `Scheduler.runWithPriority`, which accepts a function. But now we track the
+  // priority within React itself, so we can mutate the variable directly.
+  // Cache the root since pendingEffectsRoot is cleared in
+  // flushPassiveEffectsImpl
+  const root = pendingEffectsRoot;
+  // Cache and clear the remaining lanes flag; it must be reset since this
+  // method can be called from various places, not always from completeRoot
+  // where the remaining lanes are known
+  const remainingLanes = pendingEffectsRemainingLanes;
+  pendingEffectsRemainingLanes = NoLanes;
+
+  const renderPriority = lanesToEventPriority(pendingEffectsLanes);
+  const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
+  const prevTransition = ReactSharedInternals.T;
+  const previousPriority = getCurrentUpdatePriority();
+
+  try {
+    setCurrentUpdatePriority(priority);
+    ReactSharedInternals.T = null;
+    return flushPassiveEffectsImpl();
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactSharedInternals.T = prevTransition;
+
+    // Once passive effects have run for the tree - giving components a
+    // chance to retain cache instances they use - release the pooled
+    // cache at the root (if there is one)
+    releaseRootPooledCache(root, remainingLanes);
+  }
+}
+
+function flushPassiveEffectsImpl() {
+  // Cache and clear the transitions flag
+  const transitions = pendingPassiveTransitions;
+  pendingPassiveTransitions = null;
+
+  const root = pendingEffectsRoot;
+  const lanes = pendingEffectsLanes;
+  pendingEffectsStatus = NO_PENDING_EFFECTS;
+  pendingEffectsRoot = (null: any); // Clear for GC purposes.
+  pendingFinishedWork = (null: any); // Clear for GC purposes.
+  // TODO: This is sometimes out of sync with pendingEffectsRoot.
+  // Figure out why and fix it. It's not causing any known issues (probably
+  // because it's only used for profiling), but it's a refactor hazard.
+  pendingEffectsLanes = NoLanes;
+
+  if (enableYieldingBeforePassive) {
+    // We've finished our work for this render pass.
+    root.callbackNode = null;
+    root.callbackPriority = NoLane;
+  }
+
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // We're about to log a lot of profiling for this commit.
+    // We set this once so we don't have to recompute it for every log.
+    setCurrentTrackFromLanes(lanes);
+  }
+
+  if (__DEV__) {
+    isFlushingPassiveEffects = true;
+    didScheduleUpdateDuringPassiveEffects = false;
+  }
+
+  let passiveEffectStartTime = 0;
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    resetCommitErrors();
+    passiveEffectStartTime = now();
+    if (pendingDelayedCommitReason === ANIMATION_STARTED_COMMIT) {
+      // The animation was started, so we've been animating since that happened.
+      logAnimatingPhase(commitEndTime, passiveEffectStartTime, animatingTask);
+    } else {
+      logPaintYieldPhase(
+        commitEndTime,
+        passiveEffectStartTime,
+        pendingDelayedCommitReason === DELAYED_PASSIVE_COMMIT,
+        workInProgressUpdateTask,
+      );
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markPassiveEffectsStarted(lanes);
+  }
+
+  const prevExecutionContext = executionContext;
+  executionContext |= CommitContext;
+
+  commitPassiveUnmountEffects(root.current);
+  commitPassiveMountEffects(
+    root,
+    root.current,
+    lanes,
+    transitions,
+    pendingEffectsRenderEndTime,
+  );
+
+  if (enableSchedulingProfiler) {
+    markPassiveEffectsStopped();
+  }
+
+  if (__DEV__) {
+    commitDoubleInvokeEffectsInDEV(root, true);
+  }
+
+  executionContext = prevExecutionContext;
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    const passiveEffectsEndTime = now();
+    logPassiveCommitPhase(
+      passiveEffectStartTime,
+      passiveEffectsEndTime,
+      commitErrors,
+      workInProgressUpdateTask,
+    );
+    finalizeRender(lanes, passiveEffectsEndTime);
+  }
+
+  flushSyncWorkOnAllRoots();
+
+  if (enableTransitionTracing) {
+    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
+    const prevRootTransitionCallbacks = root.transitionCallbacks;
+    const prevEndTime = currentEndTime;
+    if (
+      prevPendingTransitionCallbacks !== null &&
+      prevRootTransitionCallbacks !== null &&
+      prevEndTime !== null
+    ) {
+      currentPendingTransitionCallbacks = null;
+      currentEndTime = null;
+      scheduleCallback(IdleSchedulerPriority, () => {
+        processTransitionCallbacks(
+          prevPendingTransitionCallbacks,
+          prevEndTime,
+          prevRootTransitionCallbacks,
+        );
+      });
+    }
+  }
+
+  if (__DEV__) {
+    // If additional passive effects were scheduled, increment a counter. If this
+    // exceeds the limit, we'll fire a warning.
+    if (didScheduleUpdateDuringPassiveEffects) {
+      if (root === rootWithPassiveNestedUpdates) {
+        nestedPassiveUpdateCount++;
+      } else {
+        nestedPassiveUpdateCount = 0;
+        rootWithPassiveNestedUpdates = root;
+      }
+    } else {
+      nestedPassiveUpdateCount = 0;
+    }
+    isFlushingPassiveEffects = false;
+    didScheduleUpdateDuringPassiveEffects = false;
+  }
+
+  if (enableYieldingBeforePassive) {
+    // Next, we reschedule any remaining work in a new task since it's a new
+    // sequence of work. We wait until the end to do this in case the passive
+    // effect schedules higher priority work than we had remaining. That way
+    // we don't schedule an early callback that gets cancelled anyway.
+    ensureRootIsScheduled(root);
+  }
+
+  // TODO: Move to commitPassiveMountEffects
+  onPostCommitRootDevTools(root);
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    const stateNode = root.current.stateNode;
+    stateNode.effectDuration = 0;
+    stateNode.passiveEffectDuration = 0;
+  }
+
+  return true;
+}
+
+export function isAlreadyFailedLegacyErrorBoundary(instance: mixed): boolean {
+  return (
+    legacyErrorBoundariesThatAlreadyFailed !== null &&
+    legacyErrorBoundariesThatAlreadyFailed.has(instance)
+  );
+}
+
+export function markLegacyErrorBoundaryAsFailed(instance: mixed) {
+  if (legacyErrorBoundariesThatAlreadyFailed === null) {
+    legacyErrorBoundariesThatAlreadyFailed = new Set([instance]);
+  } else {
+    legacyErrorBoundariesThatAlreadyFailed.add(instance);
+  }
+}
+
+function captureCommitPhaseErrorOnRoot(
+  rootFiber: Fiber,
+  sourceFiber: Fiber,
+  error: mixed,
+) {
+  const errorInfo = createCapturedValueAtFiber(error, sourceFiber);
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    recordEffectError(errorInfo);
+  }
+  const update = createRootErrorUpdate(
+    rootFiber.stateNode,
+    errorInfo,
+    (SyncLane: Lane),
+  );
+  const root = enqueueUpdate(rootFiber, update, (SyncLane: Lane));
+  if (root !== null) {
+    markRootUpdated(root, SyncLane);
+    ensureRootIsScheduled(root);
+  }
+}
+
+export function captureCommitPhaseError(
+  sourceFiber: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  error: mixed,
+) {
+  if (__DEV__) {
+    setIsRunningInsertionEffect(false);
+  }
+  if (sourceFiber.tag === HostRoot) {
+    // Error was thrown at the root. There is no parent, so the root
+    // itself should capture it.
+    captureCommitPhaseErrorOnRoot(sourceFiber, sourceFiber, error);
+    return;
+  }
+
+  let fiber = nearestMountedAncestor;
+  while (fiber !== null) {
+    if (fiber.tag === HostRoot) {
+      captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
+      return;
+    } else if (fiber.tag === ClassComponent) {
+      const ctor = fiber.type;
+      const instance = fiber.stateNode;
+      if (
+        typeof ctor.getDerivedStateFromError === 'function' ||
+        (typeof instance.componentDidCatch === 'function' &&
+          !isAlreadyFailedLegacyErrorBoundary(instance))
+      ) {
+        const errorInfo = createCapturedValueAtFiber(error, sourceFiber);
+        if (enableProfilerTimer && enableComponentPerformanceTrack) {
+          recordEffectError(errorInfo);
+        }
+        const update = createClassErrorUpdate((SyncLane: Lane));
+        const root = enqueueUpdate(fiber, update, (SyncLane: Lane));
+        if (root !== null) {
+          initializeClassErrorUpdate(update, root, fiber, errorInfo);
+          markRootUpdated(root, SyncLane);
+          ensureRootIsScheduled(root);
+        }
+        return;
+      }
+    }
+    fiber = fiber.return;
+  }
+
+  if (__DEV__) {
+    console.error(
+      'Internal React error: Attempted to capture a commit phase error ' +
+        'inside a detached tree. This indicates a bug in React. Potential ' +
+        'causes include deleting the same fiber more than once, committing an ' +
+        'already-finished tree, or an inconsistent return pointer.\n\n' +
+        'Error message:\n\n%s',
+      error,
+    );
+  }
+}
+
+export function attachPingListener(
+  root: FiberRoot,
+  wakeable: Wakeable,
+  lanes: Lanes,
+) {
+  // Attach a ping listener
+  //
+  // The data might resolve before we have a chance to commit the fallback. Or,
+  // in the case of a refresh, we'll never commit a fallback. So we need to
+  // attach a listener now. When it resolves ("pings"), we can decide whether to
+  // try rendering the tree again.
+  //
+  // Only attach a listener if one does not already exist for the lanes
+  // we're currently rendering (which acts like a "thread ID" here).
+  //
+  // We only need to do this in concurrent mode. Legacy Suspense always
+  // commits fallbacks synchronously, so there are no pings.
+  let pingCache = root.pingCache;
+  let threadIDs;
+  if (pingCache === null) {
+    pingCache = root.pingCache = new PossiblyWeakMap();
+    threadIDs = new Set<mixed>();
+    pingCache.set(wakeable, threadIDs);
+  } else {
+    threadIDs = pingCache.get(wakeable);
+    if (threadIDs === undefined) {
+      threadIDs = new Set();
+      pingCache.set(wakeable, threadIDs);
+    }
+  }
+  if (!threadIDs.has(lanes)) {
+    workInProgressRootDidAttachPingListener = true;
+
+    // Memoize using the thread ID to prevent redundant listeners.
+    threadIDs.add(lanes);
+    const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);
+    if (enableUpdaterTracking) {
+      if (isDevToolsPresent) {
+        // If we have pending work still, restore the original updaters
+        restorePendingUpdaters(root, lanes);
+      }
+    }
+    wakeable.then(ping, ping);
+  }
+}
+
+function pingSuspendedRoot(
+  root: FiberRoot,
+  wakeable: Wakeable,
+  pingedLanes: Lanes,
+) {
+  const pingCache = root.pingCache;
+  if (pingCache !== null) {
+    // The wakeable resolved, so we no longer need to memoize, because it will
+    // never be thrown again.
+    pingCache.delete(wakeable);
+  }
+
+  markRootPinged(root, pingedLanes);
+
+  if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    startPingTimerByLanes(pingedLanes);
+  }
+
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
+
+  if (
+    workInProgressRoot === root &&
+    isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)
+  ) {
+    // Received a ping at the same priority level at which we're currently
+    // 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.
+    // TODO: Attach different listeners depending on whether the listener was
+    // attached during prerendering. Prerender pings should not interrupt
+    // normal renders.
+
+    // If we're suspended with delay, or if it's a retry, we'll always suspend
+    // so we can always restart.
+    if (
+      workInProgressRootExitStatus === RootSuspendedWithDelay ||
+      (workInProgressRootExitStatus === RootSuspended &&
+        includesOnlyRetries(workInProgressRootRenderLanes) &&
+        now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS)
+    ) {
+      // Force a restart from the root by unwinding the stack. Unless this is
+      // being called from the render phase, because that would cause a crash.
+      if ((executionContext & RenderContext) === NoContext) {
+        prepareFreshStack(root, NoLanes);
+      } else {
+        // TODO: If this does happen during the render phase, we should throw
+        // the special internal exception that we use to interrupt the stack for
+        // selective hydration. That was temporarily reverted but we once we add
+        // it back we can use it here.
+      }
+    } else {
+      // Even though we can't restart right now, we might get an
+      // opportunity later. So we mark this render as having a ping.
+      workInProgressRootPingedLanes = mergeLanes(
+        workInProgressRootPingedLanes,
+        pingedLanes,
+      );
+    }
+
+    // If something pings the work-in-progress render, any work that suspended
+    // up to this point may now be unblocked; in other words, no
+    // longer suspended.
+    //
+    // Unlike the broader check above, we only need do this if the lanes match
+    // exactly. If the lanes don't exactly match, that implies the promise
+    // was created by an older render.
+    if (workInProgressSuspendedRetryLanes === workInProgressRootRenderLanes) {
+      workInProgressSuspendedRetryLanes = NoLanes;
+    }
+  }
+
+  ensureRootIsScheduled(root);
+}
+
+export function pingGestureRoot(root: FiberRoot): void {
+  const gesture = root.pendingGestures;
+  if (gesture === null) {
+    return;
+  }
+  // Ping it for rerender and commit.
+  markRootPinged(root, GestureLane);
+  ensureRootIsScheduled(root);
+}
+
+export function restartGestureRoot(root: FiberRoot): void {
+  if (
+    workInProgressRoot === root &&
+    isGestureRender(workInProgressRootRenderLanes)
+  ) {
+    // The current render was a gesture but it's now defunct. We need to restart the render.
+    if ((executionContext & RenderContext) === NoContext) {
+      prepareFreshStack(root, NoLanes);
+    } else {
+      // TODO: Throw interruption when supported again.
+    }
+  } else if (
+    root.cancelPendingCommit !== null &&
+    isGestureRender(pendingEffectsLanes)
+  ) {
+    // We have a suspended commit which we'll discard.
+    const cancelPendingCommit = root.cancelPendingCommit;
+    if (cancelPendingCommit !== null) {
+      root.cancelPendingCommit = null;
+      cancelPendingCommit();
+    }
+  }
+  if (root.pendingGestures !== null) {
+    // We still have gestures to work on. Let's schedule a restart.
+    markRootPinged(root, GestureLane);
+  }
+  ensureRootIsScheduled(root);
+}
+
+function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
+  // 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 lanes.
+  if (retryLane === NoLane) {
+    // TODO: Assign this to `suspenseState.retryLane`? to avoid
+    // unnecessary entanglement?
+    retryLane = requestRetryLane(boundaryFiber);
+  }
+  // TODO: Special case idle priority?
+  const root = enqueueConcurrentRenderForLane(boundaryFiber, retryLane);
+  if (root !== null) {
+    markRootUpdated(root, retryLane);
+    ensureRootIsScheduled(root);
+  }
+}
+
+export function retryDehydratedSuspenseBoundary(boundaryFiber: Fiber) {
+  const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
+  let retryLane: Lane = NoLane;
+  if (suspenseState !== null) {
+    retryLane = suspenseState.retryLane;
+  }
+  retryTimedOutBoundary(boundaryFiber, retryLane);
+}
+
+export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
+  let retryLane: Lane = NoLane; // Default
+  let retryCache: WeakSet<Wakeable> | Set<Wakeable> | null;
+  switch (boundaryFiber.tag) {
+    case ActivityComponent:
+    case SuspenseComponent:
+      retryCache = boundaryFiber.stateNode;
+      const suspenseState: null | SuspenseState | ActivityState =
+        boundaryFiber.memoizedState;
+      if (suspenseState !== null) {
+        retryLane = suspenseState.retryLane;
+      }
+      break;
+    case SuspenseListComponent:
+      retryCache = boundaryFiber.stateNode;
+      break;
+    case OffscreenComponent: {
+      const instance: OffscreenInstance = boundaryFiber.stateNode;
+      retryCache = instance._retryCache;
+      break;
+    }
+    default:
+      throw new Error(
+        'Pinged unknown suspense boundary type. ' +
+          'This is probably a bug in React.',
+      );
+  }
+
+  if (retryCache !== null) {
+    // The wakeable resolved, so we no longer need to memoize, because it will
+    // never be thrown again.
+    retryCache.delete(wakeable);
+  }
+
+  retryTimedOutBoundary(boundaryFiber, retryLane);
+}
+
+export function throwIfInfiniteUpdateLoopDetected() {
+  if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
+    nestedUpdateCount = 0;
+    nestedPassiveUpdateCount = 0;
+    rootWithNestedUpdates = null;
+    rootWithPassiveNestedUpdates = null;
+
+    if (enableInfiniteRenderLoopDetection) {
+      if (executionContext & RenderContext && workInProgressRoot !== null) {
+        // We're in the render phase. Disable the concurrent error recovery
+        // mechanism to ensure that the error we're about to throw gets handled.
+        // We need it to trigger the nearest error boundary so that the infinite
+        // update loop is broken.
+        workInProgressRoot.errorRecoveryDisabledLanes = mergeLanes(
+          workInProgressRoot.errorRecoveryDisabledLanes,
+          workInProgressRootRenderLanes,
+        );
+      }
+    }
+
+    throw new Error(
+      'Maximum update depth exceeded. This can happen when a component ' +
+        'repeatedly calls setState inside componentWillUpdate or ' +
+        'componentDidUpdate. React limits the number of nested updates to ' +
+        'prevent infinite loops.',
+    );
+  }
+
+  if (__DEV__) {
+    if (nestedPassiveUpdateCount > NESTED_PASSIVE_UPDATE_LIMIT) {
+      nestedPassiveUpdateCount = 0;
+      rootWithPassiveNestedUpdates = null;
+
+      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 ' +
+          'every render.',
+      );
+    }
+  }
+}
+
+function flushRenderPhaseStrictModeWarningsInDEV() {
+  if (__DEV__) {
+    ReactStrictModeWarnings.flushLegacyContextWarning();
+    ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
+  }
+}
+
+function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  isInStrictMode: boolean,
+) {
+  if ((parentFiber.subtreeFlags & (PlacementDEV | Visibility)) === NoFlags) {
+    // Parent's descendants have already had effects double invoked.
+    // Early exit to avoid unnecessary tree traversal.
+    return;
+  }
+  let child = parentFiber.child;
+  while (child !== null) {
+    doubleInvokeEffectsInDEVIfNecessary(root, child, isInStrictMode);
+    child = child.sibling;
+  }
+}
+
+// Unconditionally disconnects and connects passive and layout effects.
+function doubleInvokeEffectsOnFiber(root: FiberRoot, fiber: Fiber) {
+  setIsStrictModeForDevtools(true);
+  try {
+    disappearLayoutEffects(fiber);
+    disconnectPassiveEffect(fiber);
+    reappearLayoutEffects(root, fiber.alternate, fiber, false);
+    reconnectPassiveEffects(root, fiber, NoLanes, null, false, 0);
+  } finally {
+    setIsStrictModeForDevtools(false);
+  }
+}
+
+function doubleInvokeEffectsInDEVIfNecessary(
+  root: FiberRoot,
+  fiber: Fiber,
+  parentIsInStrictMode: boolean,
+) {
+  const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
+  const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
+  // First case: the fiber **is not** of type OffscreenComponent. No
+  // special rules apply to double invoking effects.
+  if (fiber.tag !== OffscreenComponent) {
+    if (fiber.flags & PlacementDEV) {
+      if (isInStrictMode) {
+        runWithFiberInDEV(fiber, doubleInvokeEffectsOnFiber, root, fiber);
+      }
+    } else {
+      recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+        root,
+        fiber,
+        isInStrictMode,
+      );
+    }
+    return;
+  }
+
+  // Second case: the fiber **is** of type OffscreenComponent.
+  // This branch contains cases specific to Offscreen.
+  if (fiber.memoizedState === null) {
+    // Only consider Offscreen that is visible.
+    // TODO (Offscreen) Handle manual mode.
+    if (isInStrictMode && fiber.flags & Visibility) {
+      // Double invoke effects on Offscreen's subtree only
+      // if it is visible and its visibility has changed.
+      runWithFiberInDEV(fiber, doubleInvokeEffectsOnFiber, root, fiber);
+    } else if (fiber.subtreeFlags & PlacementDEV) {
+      // Something in the subtree could have been suspended.
+      // We need to continue traversal and find newly inserted fibers.
+      runWithFiberInDEV(
+        fiber,
+        recursivelyTraverseAndDoubleInvokeEffectsInDEV,
+        root,
+        fiber,
+        isInStrictMode,
+      );
+    }
+  }
+}
+
+function commitDoubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  hasPassiveEffects: boolean,
+) {
+  if (__DEV__) {
+    if (disableLegacyMode || root.tag !== LegacyRoot) {
+      let doubleInvokeEffects = true;
+
+      if (
+        (disableLegacyMode || root.tag === ConcurrentRoot) &&
+        !(root.current.mode & (StrictLegacyMode | StrictEffectsMode))
+      ) {
+        doubleInvokeEffects = false;
+      }
+      recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+        root,
+        root.current,
+        doubleInvokeEffects,
+      );
+    } else {
+      // TODO: Is this runWithFiberInDEV needed since the other effect functions do it too?
+      runWithFiberInDEV(
+        root.current,
+        legacyCommitDoubleInvokeEffectsInDEV,
+        root.current,
+        hasPassiveEffects,
+      );
+    }
+  }
+}
+
+function legacyCommitDoubleInvokeEffectsInDEV(
+  fiber: Fiber,
+  hasPassiveEffects: boolean,
+) {
+  // TODO (StrictEffects) Should we set a marker on the root if it contains strict effects
+  // so we don't traverse unnecessarily? similar to subtreeFlags but just at the root level.
+  // Maybe not a big deal since this is DEV only behavior.
+
+  invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
+  if (hasPassiveEffects) {
+    invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectUnmountInDEV);
+  }
+
+  invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
+  if (hasPassiveEffects) {
+    invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
+  }
+}
+
+function invokeEffectsInDev(
+  firstChild: Fiber,
+  fiberFlags: Flags,
+  invokeEffectFn: (fiber: Fiber) => void,
+) {
+  let current: null | Fiber = firstChild;
+  let subtreeRoot = null;
+  while (current != null) {
+    const primarySubtreeFlag = current.subtreeFlags & fiberFlags;
+    if (
+      current !== subtreeRoot &&
+      current.child != null &&
+      primarySubtreeFlag !== NoFlags
+    ) {
+      current = current.child;
+    } else {
+      if ((current.flags & fiberFlags) !== NoFlags) {
+        invokeEffectFn(current);
+      }
+
+      if (current.sibling !== null) {
+        current = current.sibling;
+      } else {
+        current = subtreeRoot = current.return;
+      }
+    }
+  }
+}
+
+let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
+export function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber: Fiber) {
+  if (__DEV__) {
+    if ((executionContext & RenderContext) !== NoContext) {
+      // We let the other warning about render phase updates deal with this one.
+      return;
+    }
+
+    if (!disableLegacyMode && !(fiber.mode & ConcurrentMode)) {
+      return;
+    }
+
+    const tag = fiber.tag;
+    if (
+      tag !== HostRoot &&
+      tag !== ClassComponent &&
+      tag !== FunctionComponent &&
+      tag !== ForwardRef &&
+      tag !== MemoComponent &&
+      tag !== SimpleMemoComponent
+    ) {
+      // Only warn for user-defined components, not internal ones like Suspense.
+      return;
+    }
+
+    // We show the whole stack but dedupe on the top component's name because
+    // the problematic code almost always lies inside that component.
+    const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
+    if (didWarnStateUpdateForNotYetMountedComponent !== null) {
+      if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {
+        return;
+      }
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      didWarnStateUpdateForNotYetMountedComponent.add(componentName);
+    } else {
+      didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]);
+    }
+
+    runWithFiberInDEV(fiber, () => {
+      console.error(
+        "Can't perform a React state update on a component that hasn't mounted yet. " +
+          'This indicates that you have a side-effect in your render function that ' +
+          'asynchronously tries to update the component. Move this work to ' +
+          'useEffect instead.',
+      );
+    });
+  }
+}
+
+let didWarnAboutUpdateInRender = false;
+let didWarnAboutUpdateInRenderForAnotherComponent;
+if (__DEV__) {
+  didWarnAboutUpdateInRenderForAnotherComponent = new Set<string>();
+}
+
+function warnAboutRenderPhaseUpdatesInDEV(fiber: Fiber) {
+  if (__DEV__) {
+    if (ReactCurrentDebugFiberIsRenderingInDEV) {
+      switch (fiber.tag) {
+        case FunctionComponent:
+        case ForwardRef:
+        case SimpleMemoComponent: {
+          const renderingComponentName =
+            (workInProgress && getComponentNameFromFiber(workInProgress)) ||
+            'Unknown';
+          // Dedupe by the rendering component because it's the one that needs to be fixed.
+          const dedupeKey = renderingComponentName;
+          if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {
+            didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);
+            const setStateComponentName =
+              getComponentNameFromFiber(fiber) || 'Unknown';
+            console.error(
+              'Cannot update a component (`%s`) while rendering a ' +
+                'different component (`%s`). To locate the bad setState() call inside `%s`, ' +
+                'follow the stack trace as described in https://react.dev/link/setstate-in-render',
+              setStateComponentName,
+              renderingComponentName,
+              renderingComponentName,
+            );
+          }
+          break;
+        }
+        case ClassComponent: {
+          if (!didWarnAboutUpdateInRender) {
+            console.error(
+              'Cannot update during an existing state transition (such as ' +
+                'within `render`). Render methods should be a pure ' +
+                'function of props and state.',
+            );
+            didWarnAboutUpdateInRender = true;
+          }
+          break;
+        }
+      }
+    }
+  }
+}
+
+export function restorePendingUpdaters(root: FiberRoot, lanes: Lanes): void {
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      const memoizedUpdaters = root.memoizedUpdaters;
+      memoizedUpdaters.forEach(schedulingFiber => {
+        addFiberToLanesMap(root, schedulingFiber, lanes);
+      });
+
+      // This function intentionally does not clear memoized updaters.
+      // Those may still be relevant to the current commit
+      // and a future one (e.g. Suspense).
+    }
+  }
+}
+
+const fakeActCallbackNode = {};
+// $FlowFixMe[missing-local-annot]
+function scheduleCallback(priorityLevel: any, callback) {
+  if (__DEV__) {
+    // If we're currently inside an `act` scope, bypass Scheduler and push to
+    // the `act` queue instead.
+    const actQueue = ReactSharedInternals.actQueue;
+    if (actQueue !== null) {
+      actQueue.push(callback);
+      return fakeActCallbackNode;
+    } else {
+      return Scheduler_scheduleCallback(priorityLevel, callback);
+    }
+  } else {
+    // In production, always call Scheduler. This function will be stripped out.
+    return Scheduler_scheduleCallback(priorityLevel, callback);
+  }
+}
+
+function shouldForceFlushFallbacksInDEV() {
+  // Never force flush in production. This function should get stripped out.
+  return __DEV__ && ReactSharedInternals.actQueue !== null;
+}
+
+function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
+  if (__DEV__) {
+    if (disableLegacyMode || fiber.mode & ConcurrentMode) {
+      if (!isConcurrentActEnvironment()) {
+        // Not in an act environment. No need to warn.
+        return;
+      }
+    } else {
+      // Legacy mode has additional cases where we suppress a warning.
+      if (!isLegacyActEnvironment(fiber)) {
+        // Not in an act environment. No need to warn.
+        return;
+      }
+      if (executionContext !== NoContext) {
+        // Legacy mode doesn't warn if the update is batched, i.e.
+        // batchedUpdates or flushSync.
+        return;
+      }
+      if (
+        fiber.tag !== FunctionComponent &&
+        fiber.tag !== ForwardRef &&
+        fiber.tag !== SimpleMemoComponent
+      ) {
+        // For backwards compatibility with pre-hooks code, legacy mode only
+        // warns for updates that originate from a hook.
+        return;
+      }
+    }
+
+    if (ReactSharedInternals.actQueue === null) {
+      runWithFiberInDEV(fiber, () => {
+        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' +
+            '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://react.dev/link/wrap-tests-with-act',
+          getComponentNameFromFiber(fiber),
+        );
+      });
+    }
+  }
+}
+
+function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
+  if (__DEV__) {
+    if (
+      (disableLegacyMode || root.tag !== LegacyRoot) &&
+      isConcurrentActEnvironment() &&
+      ReactSharedInternals.actQueue === null
+    ) {
+      console.error(
+        'A suspended resource finished loading inside a test, but the event ' +
+          'was not wrapped in act(...).\n\n' +
+          'When testing, code that resolves suspended data should be wrapped ' +
+          'into act(...):\n\n' +
+          'act(() => {\n' +
+          '  /* finish loading suspended data */\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://react.dev/link/wrap-tests-with-act',
+      );
+    }
+  }
+}
+
+export function setIsRunningInsertionEffect(isRunning: boolean): void {
+  if (__DEV__) {
+    isRunningInsertionEffect = isRunning;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactHookEffectTags.js b/packages/react-reconciler/src/ReactHookEffectTags.js
new file mode 100644
index 00000000000..ad7378da674
--- /dev/null
+++ b/packages/react-reconciler/src/ReactHookEffectTags.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 HookFlags = number;
+
+export const NoFlags = /*   */ 0b0000;
+
+// Represents whether effect should fire.
+export const HasEffect = /* */ 0b0001;
+
+// Represents the phase in which the effect (not the clean-up) fires.
+export const Insertion = /* */ 0b0010;
+export const Layout = /*    */ 0b0100;
+export const Passive = /*   */ 0b1000;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
new file mode 100644
index 00000000000..d12c1e38694
--- /dev/null
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -0,0 +1,464 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  RefObject,
+  ReactContext,
+  StartTransitionOptions,
+  Wakeable,
+  Usable,
+  ReactFormState,
+  Awaited,
+  ReactComponentInfo,
+  ReactDebugInfo,
+  ReactKey,
+} from 'shared/ReactTypes';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+import type {WorkTag} from './ReactWorkTags';
+import type {TypeOfMode} from './ReactTypeOfMode';
+import type {Flags} from './ReactFiberFlags';
+import type {Lane, Lanes, LaneMap} from './ReactFiberLane';
+import type {RootTag} from './ReactRootTags';
+import type {
+  Container,
+  Instance,
+  TimeoutHandle,
+  NoTimeout,
+  ActivityInstance,
+  SuspenseInstance,
+  TransitionStatus,
+} from './ReactFiberConfig';
+import type {Cache} from './ReactFiberCacheComponent';
+import type {Transition} from 'react/src/ReactStartTransition';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates';
+import type {ComponentStackNode} from 'react-server/src/ReactFizzComponentStack';
+import type {ThenableState} from './ReactFiberThenable';
+import type {ScheduledGesture} from './ReactFiberGestureScheduler';
+
+// Unwind Circular: moved from ReactFiberHooks.old
+export type HookType =
+  | 'useState'
+  | 'useReducer'
+  | 'useContext'
+  | 'useRef'
+  | 'useEffect'
+  | 'useEffectEvent'
+  | 'useInsertionEffect'
+  | 'useLayoutEffect'
+  | 'useCallback'
+  | 'useMemo'
+  | 'useImperativeHandle'
+  | 'useDebugValue'
+  | 'useDeferredValue'
+  | 'useTransition'
+  | 'useSyncExternalStore'
+  | 'useId'
+  | 'useCacheRefresh'
+  | 'useOptimistic'
+  | 'useFormState'
+  | 'useActionState';
+
+export type ContextDependency<T> = {
+  context: ReactContext<T>,
+  next: ContextDependency<mixed> | null,
+  memoizedValue: T,
+  ...
+};
+
+export type Dependencies = {
+  lanes: Lanes,
+  firstContext: ContextDependency<mixed> | null,
+  _debugThenableState?: null | ThenableState, // DEV-only
+  ...
+};
+
+export type MemoCache = {
+  data: Array<Array<any>>,
+  index: number,
+};
+
+// 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 = {
+  // These first fields are conceptually members of an Instance. This used to
+  // be split into a separate type and intersected with the other Fiber fields,
+  // but until Flow fixes its intersection bugs, we've merged them into a
+  // single type.
+
+  // An Instance is shared between all versions of a component. We can easily
+  // break this out into a separate object to avoid copying so much to the
+  // alternate versions of the tree. We put this on a single object for now to
+  // minimize the number of objects created during the initial render.
+
+  // Tag identifying the type of fiber.
+  tag: WorkTag,
+
+  // Unique identifier of this child.
+  key: ReactKey,
+
+  // The value of element.type which is used to preserve the identity during
+  // reconciliation of this child.
+  elementType: any,
+
+  // The resolved function/class/ associated with this fiber.
+  type: any,
+
+  // The local state associated with this fiber.
+  stateNode: any,
+
+  // Conceptual aliases
+  // parent : Instance -> return The parent happens to be the same as the
+  // return fiber since we've merged the fiber and instance.
+
+  // Remaining fields belong to Fiber
+
+  // The Fiber to return to after finishing processing this one.
+  // This is effectively the parent, but there can be multiple parents (two)
+  // so this is only the parent of the thing we're currently processing.
+  // It is conceptually the same as the return address of a stack frame.
+  return: Fiber | null,
+
+  // Singly Linked List Tree Structure.
+  child: Fiber | null,
+  sibling: Fiber | null,
+  index: number,
+
+  // 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,
+
+  refCleanup: null | (() => void),
+
+  // Input is the data coming into process this fiber. Arguments. Props.
+  pendingProps: any, // This type will be more specific once we overload the tag.
+  memoizedProps: any, // The props used to create the output.
+
+  // A queue of state updates and callbacks.
+  updateQueue: mixed,
+
+  // The state used to create the output
+  memoizedState: any,
+
+  // 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-
+  // default. When a fiber is created, it inherits the mode of its
+  // parent. Additional flags can be set at creation time, but after that the
+  // value should remain unchanged throughout the fiber's lifetime, particularly
+  // before its child fibers are created.
+  mode: TypeOfMode,
+
+  // Effect
+  flags: Flags,
+  subtreeFlags: Flags,
+  deletions: Array<Fiber> | null,
+
+  lanes: Lanes,
+  childLanes: Lanes,
+
+  // This is a pooled version of a Fiber. Every fiber that gets updated will
+  // eventually have a pair. There are cases when we can clean up pairs to save
+  // memory if we need to.
+  alternate: Fiber | null,
+
+  // Time spent rendering this Fiber and its descendants for the current update.
+  // This tells us how well the tree makes use of sCU for memoization.
+  // It is reset to 0 each time we render and only updated when we don't bailout.
+  // This field is only set when the enableProfilerTimer flag is enabled.
+  actualDuration?: number,
+
+  // If the Fiber is currently active in the "render" phase,
+  // This marks the time at which the work began.
+  // This field is only set when the enableProfilerTimer flag is enabled.
+  actualStartTime?: number,
+
+  // Duration of the most recent render time for this Fiber.
+  // This value is not updated when we bailout for memoization purposes.
+  // This field is only set when the enableProfilerTimer flag is enabled.
+  selfBaseDuration?: number,
+
+  // 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,
+
+  // Conceptual aliases
+  // workInProgress : Fiber ->  alternate The alternate used for reuse happens
+  // to be the same as work in progress.
+  // __DEV__ only
+
+  _debugInfo?: ReactDebugInfo | null,
+  _debugOwner?: ReactComponentInfo | Fiber | null,
+  _debugStack?: Error | null,
+  _debugTask?: ConsoleTask | null,
+  _debugNeedsRemount?: boolean,
+
+  // Used to verify that the order of hooks does not change between renders.
+  _debugHookTypes?: Array<HookType> | null,
+};
+
+type BaseFiberRootProperties = {
+  // The type of root (legacy, batched, concurrent, etc.)
+  tag: RootTag,
+
+  // Any additional information from the host associated with this root.
+  containerInfo: Container,
+  // Used only by persistent updates.
+  pendingChildren: any,
+  // The currently active root fiber. This is the mutable root of the tree.
+  current: Fiber,
+
+  pingCache: WeakMap<Wakeable, Set<mixed>> | Map<Wakeable, Set<mixed>> | null,
+
+  // Timeout handle returned by setTimeout. Used to cancel a pending timeout, if
+  // it's superseded by a new one.
+  timeoutHandle: TimeoutHandle | NoTimeout,
+  // When a root has a pending commit scheduled, calling this function will
+  // cancel it.
+  // TODO: Can this be consolidated with timeoutHandle?
+  cancelPendingCommit: null | (() => void),
+  // Top context object, used by renderSubtreeIntoContainer
+  context: Object | null,
+  pendingContext: Object | null,
+
+  // Used to create a linked list that represent all the roots that have
+  // pending work scheduled on them.
+  next: FiberRoot | null,
+
+  // Node returned by Scheduler.scheduleCallback. Represents the next rendering
+  // task that the root will work on.
+  callbackNode: any,
+  callbackPriority: Lane,
+  expirationTimes: LaneMap<number>,
+  hiddenUpdates: LaneMap<Array<ConcurrentUpdate> | null>,
+
+  pendingLanes: Lanes,
+  suspendedLanes: Lanes,
+  pingedLanes: Lanes,
+  warmLanes: Lanes,
+  expiredLanes: Lanes,
+  indicatorLanes: Lanes, // enableDefaultTransitionIndicator only
+  errorRecoveryDisabledLanes: Lanes,
+  shellSuspendCounter: number,
+
+  entangledLanes: Lanes,
+  entanglements: LaneMap<Lanes>,
+
+  pooledCache: Cache | null,
+  pooledCacheLanes: Lanes,
+
+  // TODO: In Fizz, id generation is specific to each server config. Maybe we
+  // should do this in Fiber, too? Deferring this decision for now because
+  // there's no other place to store the prefix except for an internal field on
+  // the public createRoot object, which the fiber tree does not currently have
+  // a reference to.
+  identifierPrefix: string,
+
+  onUncaughtError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?component(...props: any),
+    },
+  ) => void,
+  onRecoverableError: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+
+  // enableDefaultTransitionIndicator only
+  onDefaultTransitionIndicator: () => void | (() => void),
+  pendingIndicator: null | (() => void),
+
+  formState: ReactFormState<any, any> | null,
+
+  // enableViewTransition only
+  transitionTypes: null | TransitionTypes, // TODO: Make this a LaneMap.
+  // enableGestureTransition only
+  pendingGestures: null | ScheduledGesture,
+  gestureClone: null | Instance,
+};
+
+// The following attributes are only used by DevTools and are only present in DEV builds.
+// They enable DevTools Profiler UI to show which Fiber(s) scheduled a given commit.
+type UpdaterTrackingOnlyFiberRootProperties = {
+  memoizedUpdaters: Set<Fiber>,
+  pendingUpdatersLaneMap: LaneMap<Set<Fiber>>,
+};
+
+export type SuspenseHydrationCallbacks = {
+  +onHydrated?: (
+    hydrationBoundary: SuspenseInstance | ActivityInstance,
+  ) => void,
+  +onDeleted?: (hydrationBoundary: SuspenseInstance | ActivityInstance) => void,
+  ...
+};
+
+// The follow fields are only used by enableSuspenseCallback for hydration.
+type SuspenseCallbackOnlyFiberRootProperties = {
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+};
+
+export type TransitionTracingCallbacks = {
+  onTransitionStart?: (transitionName: string, startTime: number) => void,
+  onTransitionProgress?: (
+    transitionName: string,
+    startTime: number,
+    currentTime: number,
+    pending: Array<{name: null | string}>,
+  ) => void,
+  onTransitionIncomplete?: (
+    transitionName: string,
+    startTime: number,
+    deletions: Array<{
+      type: string,
+      name?: string | null,
+      endTime: number,
+    }>,
+  ) => void,
+  onTransitionComplete?: (
+    transitionName: string,
+    startTime: number,
+    endTime: number,
+  ) => void,
+  onMarkerProgress?: (
+    transitionName: string,
+    marker: string,
+    startTime: number,
+    currentTime: number,
+    pending: Array<{name: null | string}>,
+  ) => void,
+  onMarkerIncomplete?: (
+    transitionName: string,
+    marker: string,
+    startTime: number,
+    deletions: Array<{
+      type: string,
+      name?: string | null,
+      endTime: number,
+    }>,
+  ) => void,
+  onMarkerComplete?: (
+    transitionName: string,
+    marker: string,
+    startTime: number,
+    endTime: number,
+  ) => void,
+};
+
+// The following fields are only used in transition tracing in Profile builds
+type TransitionTracingOnlyFiberRootProperties = {
+  transitionCallbacks: null | TransitionTracingCallbacks,
+  transitionLanes: LaneMap<Set<Transition> | null>,
+  // Transitions on the root can be represented as a bunch of tracing markers.
+  // Each entangled group of transitions can be treated as a tracing marker.
+  // It will have a set of pending suspense boundaries. These transitions
+  // are considered complete when the pending suspense boundaries set is
+  // empty. We can represent this as a Map of transitions to suspense
+  // boundary sets
+  incompleteTransitions: Map<Transition, TracingMarkerInstance>,
+};
+
+type ProfilerCommitHooksOnlyFiberRootProperties = {
+  effectDuration: number,
+  passiveEffectDuration: number,
+};
+
+// Exported FiberRoot type includes all properties,
+// To avoid requiring potentially error-prone :any casts throughout the project.
+// The types are defined separately within this file to ensure they stay in sync.
+export type FiberRoot = {
+  ...BaseFiberRootProperties,
+  ...SuspenseCallbackOnlyFiberRootProperties,
+  ...UpdaterTrackingOnlyFiberRootProperties,
+  ...TransitionTracingOnlyFiberRootProperties,
+  ...ProfilerCommitHooksOnlyFiberRootProperties,
+};
+
+type BasicStateAction<S> = (S => S) | S;
+type Dispatch<A> = A => void;
+
+export type Dispatcher = {
+  use: <T>(Usable<T>) => T,
+  readContext<T>(context: ReactContext<T>): T,
+  useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>],
+  useReducer<S, I, A>(
+    reducer: (S, A) => S,
+    initialArg: I,
+    init?: (I) => S,
+  ): [S, Dispatch<A>],
+  useContext<T>(context: ReactContext<T>): T,
+  useRef<T>(initialValue: T): {current: T},
+  useEffect(
+    create: () => (() => void) | void,
+    deps: Array<mixed> | void | null,
+  ): void,
+  useEffectEvent: <Args, F: (...Array<Args>) => mixed>(callback: F) => F,
+  useInsertionEffect(
+    create: () => (() => void) | void,
+    deps: Array<mixed> | void | null,
+  ): void,
+  useLayoutEffect(
+    create: () => (() => void) | void,
+    deps: Array<mixed> | void | null,
+  ): void,
+  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,
+    create: () => T,
+    deps: Array<mixed> | void | null,
+  ): void,
+  useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
+  useDeferredValue<T>(value: T, initialValue?: T): T,
+  useTransition(): [
+    boolean,
+    (callback: () => void, options?: StartTransitionOptions) => void,
+  ],
+  useSyncExternalStore<T>(
+    subscribe: (() => void) => () => void,
+    getSnapshot: () => T,
+    getServerSnapshot?: () => T,
+  ): T,
+  useId(): string,
+  useCacheRefresh: () => <T>(?() => T, ?T) => void,
+  useMemoCache: (size: number) => Array<any>,
+  useHostTransitionStatus: () => TransitionStatus,
+  useOptimistic: <S, A>(
+    passthrough: S,
+    reducer: ?(S, A) => S,
+  ) => [S, (A) => void],
+  useFormState: <S, P>(
+    action: (Awaited<S>, P) => S,
+    initialState: Awaited<S>,
+    permalink?: string,
+  ) => [Awaited<S>, (P) => void, boolean],
+  useActionState: <S, P>(
+    action: (Awaited<S>, P) => S,
+    initialState: Awaited<S>,
+    permalink?: string,
+  ) => [Awaited<S>, (P) => void, boolean],
+};
+
+export type AsyncDispatcher = {
+  getCacheForType: <T>(resourceType: () => T) => T,
+  cacheSignal: () => null | AbortSignal,
+  // DEV-only
+  getOwner: () => null | Fiber | ReactComponentInfo | ComponentStackNode,
+};
diff --git a/packages/react-reconciler/src/ReactPortal.js b/packages/react-reconciler/src/ReactPortal.js
new file mode 100644
index 00000000000..78d9d7f6372
--- /dev/null
+++ b/packages/react-reconciler/src/ReactPortal.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_PORTAL_TYPE, REACT_OPTIMISTIC_KEY} from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
+
+import type {
+  ReactNodeList,
+  ReactPortal,
+  ReactOptimisticKey,
+} from 'shared/ReactTypes';
+
+export function createPortal(
+  children: ReactNodeList,
+  containerInfo: any,
+  // TODO: figure out the API for cross-renderer implementation.
+  implementation: any,
+  key: ?string | ReactOptimisticKey = null,
+): ReactPortal {
+  let resolvedKey;
+  if (key == null) {
+    resolvedKey = null;
+  } else if (key === REACT_OPTIMISTIC_KEY) {
+    resolvedKey = REACT_OPTIMISTIC_KEY;
+  } else {
+    if (__DEV__) {
+      checkKeyStringCoercion(key);
+    }
+    resolvedKey = '' + key;
+  }
+  return {
+    // This tag allow us to uniquely identify this as a React Portal
+    $$typeof: REACT_PORTAL_TYPE,
+    key: resolvedKey,
+    children,
+    containerInfo,
+    implementation,
+  };
+}
diff --git a/packages/react-reconciler/src/ReactPostPaintCallback.js b/packages/react-reconciler/src/ReactPostPaintCallback.js
new file mode 100644
index 00000000000..76c56e90c3f
--- /dev/null
+++ b/packages/react-reconciler/src/ReactPostPaintCallback.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {requestPostPaintCallback} from './ReactFiberConfig';
+
+let postPaintCallbackScheduled = false;
+let callbacks: Array<any | ((endTime: number) => void)> = [];
+
+export function schedulePostPaintCallback(callback: (endTime: number) => void) {
+  callbacks.push(callback);
+  if (!postPaintCallbackScheduled) {
+    postPaintCallbackScheduled = true;
+    requestPostPaintCallback(endTime => {
+      for (let i = 0; i < callbacks.length; i++) {
+        callbacks[i](endTime);
+      }
+      postPaintCallbackScheduled = false;
+      callbacks = [];
+    });
+  }
+}
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.js b/packages/react-reconciler/src/ReactProfilerTimer.js
new file mode 100644
index 00000000000..42289ea30a1
--- /dev/null
+++ b/packages/react-reconciler/src/ReactProfilerTimer.js
@@ -0,0 +1,711 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+
+import type {SuspendedReason} from './ReactFiberWorkLoop';
+
+import type {Lane, Lanes} from './ReactFiberLane';
+
+import type {CapturedValue} from './ReactCapturedValue';
+
+import {
+  isTransitionLane,
+  isBlockingLane,
+  isGestureRender,
+  includesTransitionLane,
+  includesBlockingLane,
+  NoLanes,
+} from './ReactFiberLane';
+
+import {resolveEventType, resolveEventTimeStamp} from './ReactFiberConfig';
+
+import {
+  enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
+  enableProfilerTimer,
+  enableComponentPerformanceTrack,
+} from 'shared/ReactFeatureFlags';
+
+import getComponentNameFromFiber from './getComponentNameFromFiber';
+import {isAlreadyRendering} from './ReactFiberWorkLoop';
+
+// Intentionally not named imports because Rollup would use dynamic dispatch for
+// CommonJS interop named imports.
+import * as Scheduler from 'scheduler';
+
+const {unstable_now: now} = Scheduler;
+
+const createTask =
+  // eslint-disable-next-line react-internal/no-production-logging
+  __DEV__ && console.createTask
+    ? // eslint-disable-next-line react-internal/no-production-logging
+      console.createTask
+    : (name: string) => null;
+
+export const REGULAR_UPDATE: UpdateType = 0;
+export const SPAWNED_UPDATE: UpdateType = 1;
+export const PINGED_UPDATE: UpdateType = 2;
+export opaque type UpdateType = 0 | 1 | 2;
+
+export let renderStartTime: number = -0;
+export let commitStartTime: number = -0;
+export let commitEndTime: number = -0;
+export let commitErrors: null | Array<CapturedValue<mixed>> = null;
+export let profilerStartTime: number = -1.1;
+export let profilerEffectDuration: number = -0;
+export let componentEffectDuration: number = -0;
+export let componentEffectStartTime: number = -1.1;
+export let componentEffectEndTime: number = -1.1;
+export let componentEffectErrors: null | Array<CapturedValue<mixed>> = null;
+export let componentEffectSpawnedUpdate: boolean = false;
+
+export let blockingClampTime: number = -0;
+export let blockingUpdateTime: number = -1.1; // First sync setState scheduled.
+export let blockingUpdateTask: null | ConsoleTask = null; // First sync setState's stack trace.
+export let blockingUpdateType: UpdateType = 0;
+export let blockingUpdateMethodName: null | string = null; // The name of the method that caused first sync update.
+export let blockingUpdateComponentName: null | string = null; // The name of the component where first sync update happened.
+export let blockingEventTime: number = -1.1; // Event timeStamp of the first setState.
+export let blockingEventType: null | string = null; // Event type of the first setState.
+export let blockingEventRepeatTime: number = -1.1;
+export let blockingSuspendedTime: number = -1.1;
+
+export let gestureClampTime: number = -0;
+export let gestureUpdateTime: number = -1.1; // First setOptimistic scheduled inside startGestureTransition.
+export let gestureUpdateTask: null | ConsoleTask = null; // First sync setState's stack trace.
+export let gestureUpdateType: UpdateType = 0;
+export let gestureUpdateMethodName: null | string = null; // The name of the method that caused first gesture update.
+export let gestureUpdateComponentName: null | string = null; // The name of the component where first gesture update happened.
+export let gestureEventTime: number = -1.1; // Event timeStamp of the first setState.
+export let gestureEventType: null | string = null; // Event type of the first setState.
+export let gestureEventRepeatTime: number = -1.1;
+export let gestureSuspendedTime: number = -1.1;
+
+// TODO: This should really be one per Transition lane.
+export let transitionClampTime: number = -0;
+export let transitionStartTime: number = -1.1; // First startTransition call before setState.
+export let transitionUpdateTime: number = -1.1; // First transition setState scheduled.
+export let transitionUpdateType: UpdateType = 0;
+export let transitionUpdateTask: null | ConsoleTask = null; // First transition setState's stack trace.
+export let transitionUpdateMethodName: null | string = null; // The name of the method that caused first transition update.
+export let transitionUpdateComponentName: null | string = null; // The name of the component where first transition update happened.
+export let transitionEventTime: number = -1.1; // Event timeStamp of the first transition.
+export let transitionEventType: null | string = null; // Event type of the first transition.
+export let transitionEventRepeatTime: number = -1.1;
+export let transitionSuspendedTime: number = -1.1;
+
+export let retryClampTime: number = -0;
+export let idleClampTime: number = -0;
+
+export let animatingLanes: Lanes = NoLanes;
+export let animatingTask: null | ConsoleTask = null; // First ViewTransition applying an Animation.
+
+export let yieldReason: SuspendedReason = (0: any);
+export let yieldStartTime: number = -1.1; // The time when we yielded to the event loop
+
+export function startYieldTimer(reason: SuspendedReason) {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  yieldStartTime = now();
+  yieldReason = reason;
+}
+
+export function startUpdateTimerByLane(
+  lane: Lane,
+  method: string,
+  fiber: Fiber | null,
+): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  if (isGestureRender(lane)) {
+    if (gestureUpdateTime < 0) {
+      gestureUpdateTime = now();
+      gestureUpdateTask = createTask(method);
+      gestureUpdateMethodName = method;
+      if (__DEV__ && fiber != null) {
+        gestureUpdateComponentName = getComponentNameFromFiber(fiber);
+      }
+      const newEventTime = resolveEventTimeStamp();
+      const newEventType = resolveEventType();
+      if (
+        newEventTime !== gestureEventRepeatTime ||
+        newEventType !== gestureEventType
+      ) {
+        gestureEventRepeatTime = -1.1;
+      }
+      gestureEventTime = newEventTime;
+      gestureEventType = newEventType;
+    }
+  } else if (isBlockingLane(lane)) {
+    if (blockingUpdateTime < 0) {
+      blockingUpdateTime = now();
+      blockingUpdateTask = createTask(method);
+      blockingUpdateMethodName = method;
+      if (__DEV__ && fiber != null) {
+        blockingUpdateComponentName = getComponentNameFromFiber(fiber);
+      }
+      if (isAlreadyRendering()) {
+        componentEffectSpawnedUpdate = true;
+        blockingUpdateType = SPAWNED_UPDATE;
+      }
+      const newEventTime = resolveEventTimeStamp();
+      const newEventType = resolveEventType();
+      if (
+        newEventTime !== blockingEventRepeatTime ||
+        newEventType !== blockingEventType
+      ) {
+        blockingEventRepeatTime = -1.1;
+      } else if (newEventType !== null) {
+        // If this is a second update in the same event, we treat it as a spawned update.
+        // This might be a microtask spawned from useEffect, multiple flushSync or
+        // a setState in a microtask spawned after the first setState. Regardless it's bad.
+        blockingUpdateType = SPAWNED_UPDATE;
+      }
+      blockingEventTime = newEventTime;
+      blockingEventType = newEventType;
+    }
+  } else if (isTransitionLane(lane)) {
+    if (transitionUpdateTime < 0) {
+      transitionUpdateTime = now();
+      transitionUpdateTask = createTask(method);
+      transitionUpdateMethodName = method;
+      if (__DEV__ && fiber != null) {
+        transitionUpdateComponentName = getComponentNameFromFiber(fiber);
+      }
+      if (transitionStartTime < 0) {
+        const newEventTime = resolveEventTimeStamp();
+        const newEventType = resolveEventType();
+        if (
+          newEventTime !== transitionEventRepeatTime ||
+          newEventType !== transitionEventType
+        ) {
+          transitionEventRepeatTime = -1.1;
+        }
+        transitionEventTime = newEventTime;
+        transitionEventType = newEventType;
+      }
+    }
+  }
+}
+
+export function startHostActionTimer(fiber: Fiber): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  // This schedules an update on both the blocking lane for the pending state and on the
+  // transition lane for the action update. Using the debug task from the host fiber.
+  if (blockingUpdateTime < 0) {
+    blockingUpdateTime = now();
+    blockingUpdateTask =
+      __DEV__ && fiber._debugTask != null ? fiber._debugTask : null;
+    if (isAlreadyRendering()) {
+      blockingUpdateType = SPAWNED_UPDATE;
+    }
+    const newEventTime = resolveEventTimeStamp();
+    const newEventType = resolveEventType();
+    if (
+      newEventTime !== blockingEventRepeatTime ||
+      newEventType !== blockingEventType
+    ) {
+      blockingEventRepeatTime = -1.1;
+    } else if (newEventType !== null) {
+      // If this is a second update in the same event, we treat it as a spawned update.
+      // This might be a microtask spawned from useEffect, multiple flushSync or
+      // a setState in a microtask spawned after the first setState. Regardless it's bad.
+      blockingUpdateType = SPAWNED_UPDATE;
+    }
+    blockingEventTime = newEventTime;
+    blockingEventType = newEventType;
+  }
+  if (transitionUpdateTime < 0) {
+    transitionUpdateTime = now();
+    transitionUpdateTask =
+      __DEV__ && fiber._debugTask != null ? fiber._debugTask : null;
+    if (transitionStartTime < 0) {
+      const newEventTime = resolveEventTimeStamp();
+      const newEventType = resolveEventType();
+      if (
+        newEventTime !== transitionEventRepeatTime ||
+        newEventType !== transitionEventType
+      ) {
+        transitionEventRepeatTime = -1.1;
+      }
+      transitionEventTime = newEventTime;
+      transitionEventType = newEventType;
+    }
+  }
+}
+
+export function startPingTimerByLanes(lanes: Lanes): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  // Mark the update time and clamp anything before it because we don't want
+  // to show the event time for pings but we also don't want to clear it
+  // because we still need to track if this was a repeat.
+  if (isGestureRender(lanes)) {
+    if (gestureUpdateTime < 0) {
+      gestureClampTime = gestureUpdateTime = now();
+      gestureUpdateTask = createTask('Promise Resolved');
+      gestureUpdateType = PINGED_UPDATE;
+    }
+  } else if (includesBlockingLane(lanes)) {
+    if (blockingUpdateTime < 0) {
+      blockingClampTime = blockingUpdateTime = now();
+      blockingUpdateTask = createTask('Promise Resolved');
+      blockingUpdateType = PINGED_UPDATE;
+    }
+  } else if (includesTransitionLane(lanes)) {
+    if (transitionUpdateTime < 0) {
+      transitionClampTime = transitionUpdateTime = now();
+      transitionUpdateTask = createTask('Promise Resolved');
+      transitionUpdateType = PINGED_UPDATE;
+    }
+  }
+}
+
+export function trackSuspendedTime(lanes: Lanes, renderEndTime: number) {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  if (isGestureRender(lanes)) {
+    gestureSuspendedTime = renderEndTime;
+  } else if (includesBlockingLane(lanes)) {
+    blockingSuspendedTime = renderEndTime;
+  } else if (includesTransitionLane(lanes)) {
+    transitionSuspendedTime = renderEndTime;
+  }
+}
+
+export function clearBlockingTimers(): void {
+  blockingUpdateTime = -1.1;
+  blockingUpdateType = 0;
+  blockingUpdateMethodName = null;
+  blockingUpdateComponentName = null;
+  blockingSuspendedTime = -1.1;
+  blockingEventRepeatTime = blockingEventTime;
+  blockingEventTime = -1.1;
+  blockingClampTime = now();
+}
+
+export function startAsyncTransitionTimer(): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  if (transitionStartTime < 0 && transitionUpdateTime < 0) {
+    transitionStartTime = now();
+    const newEventTime = resolveEventTimeStamp();
+    const newEventType = resolveEventType();
+    if (
+      newEventTime !== transitionEventRepeatTime ||
+      newEventType !== transitionEventType
+    ) {
+      transitionEventRepeatTime = -1.1;
+    }
+    transitionEventTime = newEventTime;
+    transitionEventType = newEventType;
+  }
+}
+
+export function hasScheduledTransitionWork(): boolean {
+  // If we have setState on a transition or scheduled useActionState update.
+  return transitionUpdateTime > -1;
+}
+
+export function clearAsyncTransitionTimer(): void {
+  transitionStartTime = -1.1;
+}
+
+export function clearTransitionTimers(): void {
+  transitionStartTime = -1.1;
+  transitionUpdateTime = -1.1;
+  transitionUpdateType = 0;
+  transitionSuspendedTime = -1.1;
+  transitionEventRepeatTime = transitionEventTime;
+  transitionEventTime = -1.1;
+  transitionClampTime = now();
+}
+
+export function hasScheduledGestureTransitionWork(): boolean {
+  // If we have call setOptimistic on a gesture
+  return gestureUpdateTime > -1;
+}
+
+export function clearGestureTimers(): void {
+  gestureUpdateTime = -1.1;
+  gestureUpdateType = 0;
+  gestureSuspendedTime = -1.1;
+  gestureEventRepeatTime = gestureEventTime;
+  gestureEventTime = -1.1;
+  gestureClampTime = now();
+}
+
+export function clearGestureUpdates(): void {
+  // Same as clearGestureTimers but doesn't reset the clamp time because we didn't
+  // actually emit a render.
+  gestureUpdateTime = -1.1;
+  gestureUpdateType = 0;
+  gestureSuspendedTime = -1.1;
+  gestureEventRepeatTime = gestureEventTime;
+  gestureEventTime = -1.1;
+}
+
+export function clampBlockingTimers(finalTime: number): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  // If we had new updates come in while we were still rendering or committing, we don't want
+  // those update times to create overlapping tracks in the performance timeline so we clamp
+  // them to the end of the commit phase.
+  blockingClampTime = finalTime;
+}
+
+export function clampGestureTimers(finalTime: number): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  // If we had new updates come in while we were still rendering or committing, we don't want
+  // those update times to create overlapping tracks in the performance timeline so we clamp
+  // them to the end of the commit phase.
+  gestureClampTime = finalTime;
+}
+
+export function clampTransitionTimers(finalTime: number): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  // If we had new updates come in while we were still rendering or committing, we don't want
+  // those update times to create overlapping tracks in the performance timeline so we clamp
+  // them to the end of the commit phase.
+  transitionClampTime = finalTime;
+}
+
+export function clampRetryTimers(finalTime: number): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  retryClampTime = finalTime;
+}
+
+export function clampIdleTimers(finalTime: number): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  idleClampTime = finalTime;
+}
+
+export function pushNestedEffectDurations(): number {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return 0;
+  }
+  const prevEffectDuration = profilerEffectDuration;
+  profilerEffectDuration = 0; // Reset counter.
+  return prevEffectDuration;
+}
+
+export function popNestedEffectDurations(prevEffectDuration: number): number {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return 0;
+  }
+  const elapsedTime = profilerEffectDuration;
+  profilerEffectDuration = prevEffectDuration;
+  return elapsedTime;
+}
+
+// Like pop but it also adds the current elapsed time to the parent scope.
+export function bubbleNestedEffectDurations(
+  prevEffectDuration: number,
+): number {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return 0;
+  }
+  const elapsedTime = profilerEffectDuration;
+  profilerEffectDuration += prevEffectDuration;
+  return elapsedTime;
+}
+
+export function resetComponentEffectTimers(): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+  componentEffectStartTime = -1.1;
+  componentEffectEndTime = -1.1;
+}
+
+export function pushComponentEffectStart(): number {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return 0;
+  }
+  const prevEffectStart = componentEffectStartTime;
+  componentEffectStartTime = -1.1; // Track the next start.
+  return prevEffectStart;
+}
+
+export function popComponentEffectStart(prevEffectStart: number): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+  // If the parent component didn't have a start time, we let this current time persist.
+  if (prevEffectStart >= 0) {
+    // Otherwise, we restore the previous parent's start time.
+    componentEffectStartTime = prevEffectStart;
+  }
+}
+
+export function pushComponentEffectDuration(): number {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return 0;
+  }
+  const prevEffectDuration = componentEffectDuration;
+  componentEffectDuration = -0; // Reset component level duration.
+  return prevEffectDuration;
+}
+
+export function popComponentEffectDuration(prevEffectDuration: number): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+  // If the parent component didn't have a start time, we let this current time persist.
+  if (prevEffectDuration >= 0) {
+    // Otherwise, we restore the previous parent's start time.
+    componentEffectDuration = prevEffectDuration;
+  }
+}
+
+export function pushComponentEffectErrors(): null | Array<
+  CapturedValue<mixed>,
+> {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return null;
+  }
+  const prevErrors = componentEffectErrors;
+  componentEffectErrors = null;
+  return prevErrors;
+}
+
+export function popComponentEffectErrors(
+  prevErrors: null | Array<CapturedValue<mixed>>,
+): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+  componentEffectErrors = prevErrors;
+}
+
+export function pushComponentEffectDidSpawnUpdate(): boolean {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return false;
+  }
+
+  const prev = componentEffectSpawnedUpdate;
+  componentEffectSpawnedUpdate = false; // Reset.
+  return prev;
+}
+
+export function popComponentEffectDidSpawnUpdate(previousValue: boolean): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+
+  componentEffectSpawnedUpdate = previousValue;
+}
+
+/**
+ * Tracks whether the current update was a nested/cascading update (scheduled from a layout effect).
+ *
+ * The overall sequence is:
+ *   1. render
+ *   2. commit (and call `onRender`, `onCommit`)
+ *   3. check for nested updates
+ *   4. flush passive effects (and call `onPostCommit`)
+ *
+ * Nested updates are identified in step 3 above,
+ * but step 4 still applies to the work that was just committed.
+ * We use two flags to track nested updates then:
+ * one tracks whether the upcoming update is a nested update,
+ * and the other tracks whether the current update was a nested update.
+ * The first value gets synced to the second at the start of the render phase.
+ */
+let currentUpdateIsNested: boolean = false;
+let nestedUpdateScheduled: boolean = false;
+
+export function isCurrentUpdateNested(): boolean {
+  return currentUpdateIsNested;
+}
+
+export function markNestedUpdateScheduled(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    nestedUpdateScheduled = true;
+  }
+}
+
+export function resetNestedUpdateFlag(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    currentUpdateIsNested = false;
+    nestedUpdateScheduled = false;
+  }
+}
+
+export function syncNestedUpdateFlag(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    currentUpdateIsNested = nestedUpdateScheduled;
+    nestedUpdateScheduled = false;
+  }
+}
+
+export function recordRenderTime(): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  renderStartTime = now();
+}
+
+export function recordCommitTime(): void {
+  if (!enableProfilerTimer) {
+    return;
+  }
+  commitStartTime = now();
+}
+
+export function recordCommitEndTime(): void {
+  if (!enableProfilerTimer) {
+    return;
+  }
+  commitEndTime = now();
+}
+
+export function startProfilerTimer(fiber: Fiber): void {
+  if (!enableProfilerTimer) {
+    return;
+  }
+
+  profilerStartTime = now();
+
+  if (((fiber.actualStartTime: any): number) < 0) {
+    fiber.actualStartTime = profilerStartTime;
+  }
+}
+
+export function stopProfilerTimerIfRunning(fiber: Fiber): void {
+  if (!enableProfilerTimer) {
+    return;
+  }
+  profilerStartTime = -1;
+}
+
+export function stopProfilerTimerIfRunningAndRecordDuration(
+  fiber: Fiber,
+): void {
+  if (!enableProfilerTimer) {
+    return;
+  }
+
+  if (profilerStartTime >= 0) {
+    const elapsedTime = now() - profilerStartTime;
+    fiber.actualDuration += elapsedTime;
+    fiber.selfBaseDuration = elapsedTime;
+    profilerStartTime = -1;
+  }
+}
+
+export function stopProfilerTimerIfRunningAndRecordIncompleteDuration(
+  fiber: Fiber,
+): void {
+  if (!enableProfilerTimer) {
+    return;
+  }
+
+  if (profilerStartTime >= 0) {
+    const elapsedTime = now() - profilerStartTime;
+    fiber.actualDuration += elapsedTime;
+    // We don't update the selfBaseDuration here because we errored.
+    profilerStartTime = -1;
+  }
+}
+
+export function recordEffectDuration(fiber: Fiber): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+
+  if (profilerStartTime >= 0) {
+    const endTime = now();
+    const elapsedTime = endTime - profilerStartTime;
+
+    profilerStartTime = -1;
+
+    // Store duration on the next nearest Profiler ancestor
+    // Or the root (for the DevTools Profiler to read)
+    profilerEffectDuration += elapsedTime;
+    componentEffectDuration += elapsedTime;
+
+    // Keep track of the last end time of the effects.
+    componentEffectEndTime = endTime;
+  }
+}
+
+export function recordEffectError(errorInfo: CapturedValue<mixed>): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+  if (componentEffectErrors === null) {
+    componentEffectErrors = [];
+  }
+  componentEffectErrors.push(errorInfo);
+  if (commitErrors === null) {
+    commitErrors = [];
+  }
+  commitErrors.push(errorInfo);
+}
+
+export function resetCommitErrors(): void {
+  commitErrors = null;
+}
+
+export function startEffectTimer(): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
+  profilerStartTime = now();
+  if (componentEffectStartTime < 0) {
+    // Keep track of the first time we start an effect as the component's effect start time.
+    componentEffectStartTime = profilerStartTime;
+  }
+}
+
+export function transferActualDuration(fiber: Fiber): void {
+  // Transfer time spent rendering these children so we don't lose it
+  // after we rerender. This is used as a helper in special cases
+  // where we should count the work of multiple passes.
+  let child = fiber.child;
+  while (child) {
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+    fiber.actualDuration += child.actualDuration;
+    child = child.sibling;
+  }
+}
+
+export function startAnimating(lanes: Lanes): void {
+  animatingLanes |= lanes;
+  animatingTask = null;
+}
+
+export function stopAnimating(lanes: Lanes): void {
+  animatingLanes &= ~lanes;
+  animatingTask = null;
+}
+
+export function trackAnimatingTask(task: ConsoleTask): void {
+  if (animatingTask === null) {
+    animatingTask = task;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactReconcilerConstants.js b/packages/react-reconciler/src/ReactReconcilerConstants.js
new file mode 100644
index 00000000000..7c650048ddc
--- /dev/null
+++ b/packages/react-reconciler/src/ReactReconcilerConstants.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// These are semi-public constants exposed to any third-party renderers.
+// Only expose the minimal subset necessary to implement a host config.
+
+export {
+  NoEventPriority,
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+} from './ReactEventPriorities';
+export {ConcurrentRoot, LegacyRoot} from './ReactRootTags';
diff --git a/packages/react-reconciler/src/ReactRootTags.js b/packages/react-reconciler/src/ReactRootTags.js
new file mode 100644
index 00000000000..f1bdc080304
--- /dev/null
+++ b/packages/react-reconciler/src/ReactRootTags.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 RootTag = 0 | 1;
+
+export const LegacyRoot = 0;
+export const ConcurrentRoot = 1;
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js
new file mode 100644
index 00000000000..99a37206ed5
--- /dev/null
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.js
@@ -0,0 +1,364 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactInternalTypes';
+
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {StrictLegacyMode} from './ReactTypeOfMode';
+
+type FiberArray = Array<Fiber>;
+type FiberToFiberComponentsMap = Map<Fiber, FiberArray>;
+
+const ReactStrictModeWarnings = {
+  recordUnsafeLifecycleWarnings: (fiber: Fiber, instance: any): void => {},
+  flushPendingUnsafeLifecycleWarnings: (): void => {},
+  recordLegacyContextWarning: (fiber: Fiber, instance: any): void => {},
+  flushLegacyContextWarning: (): void => {},
+  discardPendingWarnings: (): void => {},
+};
+
+if (__DEV__) {
+  const findStrictRoot = (fiber: Fiber): Fiber | null => {
+    let maybeStrictRoot = null;
+
+    let node: null | Fiber = fiber;
+    while (node !== null) {
+      if (node.mode & StrictLegacyMode) {
+        maybeStrictRoot = node;
+      }
+      node = node.return;
+    }
+
+    return maybeStrictRoot;
+  };
+
+  const setToSortedString = (set: Set<string>) => {
+    const array = [];
+    set.forEach(value => {
+      array.push(value);
+    });
+    return array.sort().join(', ');
+  };
+
+  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> = [];
+
+  // Tracks components we have already warned about.
+  const didWarnAboutUnsafeLifecycles = new Set<mixed>();
+
+  ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = (
+    fiber: Fiber,
+    instance: any,
+  ) => {
+    // Dedupe strategy: Warn once per component.
+    if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
+      return;
+    }
+
+    if (
+      typeof instance.componentWillMount === 'function' &&
+      // Don't warn about react-lifecycles-compat polyfilled components.
+      instance.componentWillMount.__suppressDeprecationWarning !== true
+    ) {
+      pendingComponentWillMountWarnings.push(fiber);
+    }
+
+    if (
+      fiber.mode & StrictLegacyMode &&
+      typeof instance.UNSAFE_componentWillMount === 'function'
+    ) {
+      pendingUNSAFE_ComponentWillMountWarnings.push(fiber);
+    }
+
+    if (
+      typeof instance.componentWillReceiveProps === 'function' &&
+      instance.componentWillReceiveProps.__suppressDeprecationWarning !== true
+    ) {
+      pendingComponentWillReceivePropsWarnings.push(fiber);
+    }
+
+    if (
+      fiber.mode & StrictLegacyMode &&
+      typeof instance.UNSAFE_componentWillReceiveProps === 'function'
+    ) {
+      pendingUNSAFE_ComponentWillReceivePropsWarnings.push(fiber);
+    }
+
+    if (
+      typeof instance.componentWillUpdate === 'function' &&
+      instance.componentWillUpdate.__suppressDeprecationWarning !== true
+    ) {
+      pendingComponentWillUpdateWarnings.push(fiber);
+    }
+
+    if (
+      fiber.mode & StrictLegacyMode &&
+      typeof instance.UNSAFE_componentWillUpdate === 'function'
+    ) {
+      pendingUNSAFE_ComponentWillUpdateWarnings.push(fiber);
+    }
+  };
+
+  ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings = () => {
+    // We do an initial pass to gather component names
+    const componentWillMountUniqueNames = new Set<string>();
+    if (pendingComponentWillMountWarnings.length > 0) {
+      pendingComponentWillMountWarnings.forEach(fiber => {
+        componentWillMountUniqueNames.add(
+          getComponentNameFromFiber(fiber) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+      pendingComponentWillMountWarnings = [];
+    }
+
+    const UNSAFE_componentWillMountUniqueNames = new Set<string>();
+    if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
+      pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
+        UNSAFE_componentWillMountUniqueNames.add(
+          getComponentNameFromFiber(fiber) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+      pendingUNSAFE_ComponentWillMountWarnings = [];
+    }
+
+    const componentWillReceivePropsUniqueNames = new Set<string>();
+    if (pendingComponentWillReceivePropsWarnings.length > 0) {
+      pendingComponentWillReceivePropsWarnings.forEach(fiber => {
+        componentWillReceivePropsUniqueNames.add(
+          getComponentNameFromFiber(fiber) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+
+      pendingComponentWillReceivePropsWarnings = [];
+    }
+
+    const UNSAFE_componentWillReceivePropsUniqueNames = new Set<string>();
+    if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
+      pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
+        UNSAFE_componentWillReceivePropsUniqueNames.add(
+          getComponentNameFromFiber(fiber) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+
+      pendingUNSAFE_ComponentWillReceivePropsWarnings = [];
+    }
+
+    const componentWillUpdateUniqueNames = new Set<string>();
+    if (pendingComponentWillUpdateWarnings.length > 0) {
+      pendingComponentWillUpdateWarnings.forEach(fiber => {
+        componentWillUpdateUniqueNames.add(
+          getComponentNameFromFiber(fiber) || 'Component',
+        );
+        didWarnAboutUnsafeLifecycles.add(fiber.type);
+      });
+
+      pendingComponentWillUpdateWarnings = [];
+    }
+
+    const UNSAFE_componentWillUpdateUniqueNames = new Set<string>();
+    if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
+      pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
+        UNSAFE_componentWillUpdateUniqueNames.add(
+          getComponentNameFromFiber(fiber) || '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://react.dev/link/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://react.dev/link/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://react.dev/link/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://react.dev/link/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://react.dev/link/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 18.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://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +
+          'this warning in non-strict mode. In React 18.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://react.dev/link/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 18.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<mixed>();
+
+  ReactStrictModeWarnings.recordLegacyContextWarning = (
+    fiber: Fiber,
+    instance: any,
+  ) => {
+    const strictRoot = findStrictRoot(fiber);
+    if (strictRoot === null) {
+      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.',
+      );
+      return;
+    }
+
+    // Dedup strategy: Warn once per component.
+    if (didWarnAboutLegacyContext.has(fiber.type)) {
+      return;
+    }
+
+    let warningsForRoot = pendingLegacyContextWarning.get(strictRoot);
+
+    if (
+      fiber.type.contextTypes != null ||
+      fiber.type.childContextTypes != null ||
+      (instance !== null && typeof instance.getChildContext === 'function')
+    ) {
+      if (warningsForRoot === undefined) {
+        warningsForRoot = [];
+        pendingLegacyContextWarning.set(strictRoot, warningsForRoot);
+      }
+      warningsForRoot.push(fiber);
+    }
+  };
+
+  ReactStrictModeWarnings.flushLegacyContextWarning = () => {
+    ((pendingLegacyContextWarning: any): FiberToFiberComponentsMap).forEach(
+      (fiberArray: FiberArray, strictRoot) => {
+        if (fiberArray.length === 0) {
+          return;
+        }
+        const firstFiber = fiberArray[0];
+
+        const uniqueNames = new Set<string>();
+        fiberArray.forEach(fiber => {
+          uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');
+          didWarnAboutLegacyContext.add(fiber.type);
+        });
+
+        const sortedNames = setToSortedString(uniqueNames);
+
+        runWithFiberInDEV(firstFiber, () => {
+          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: https://react.dev/link/legacy-context',
+            sortedNames,
+          );
+        });
+      },
+    );
+  };
+
+  ReactStrictModeWarnings.discardPendingWarnings = () => {
+    pendingComponentWillMountWarnings = [];
+    pendingUNSAFE_ComponentWillMountWarnings = [];
+    pendingComponentWillReceivePropsWarnings = [];
+    pendingUNSAFE_ComponentWillReceivePropsWarnings = [];
+    pendingComponentWillUpdateWarnings = [];
+    pendingUNSAFE_ComponentWillUpdateWarnings = [];
+    pendingLegacyContextWarning = new Map();
+  };
+}
+
+export default ReactStrictModeWarnings;
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
new file mode 100644
index 00000000000..ec30b2112b2
--- /dev/null
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -0,0 +1,608 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {Instance} from './ReactFiberConfig';
+
+import {
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+} from 'react-reconciler/src/ReactWorkTags';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import {
+  findFiberRoot,
+  getBoundingRect,
+  getInstanceFromNode,
+  getTextContent,
+  isHiddenSubtree,
+  matchAccessibilityRole,
+  setFocusIfFocusable,
+  setupIntersectionObserver,
+  supportsTestSelectors,
+} from './ReactFiberConfig';
+
+let COMPONENT_TYPE: symbol | number = 0b000;
+let HAS_PSEUDO_CLASS_TYPE: symbol | number = 0b001;
+let ROLE_TYPE: symbol | number = 0b010;
+let TEST_NAME_TYPE: symbol | number = 0b011;
+let TEXT_TYPE: symbol | number = 0b100;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  const symbolFor = Symbol.for;
+  COMPONENT_TYPE = symbolFor('selector.component');
+  HAS_PSEUDO_CLASS_TYPE = symbolFor('selector.has_pseudo_class');
+  ROLE_TYPE = symbolFor('selector.role');
+  TEST_NAME_TYPE = symbolFor('selector.test_id');
+  TEXT_TYPE = symbolFor('selector.text');
+}
+
+type Type = symbol | number;
+
+type ComponentSelector = {
+  $$typeof: Type,
+  value: component(),
+};
+
+type HasPseudoClassSelector = {
+  $$typeof: Type,
+  value: Array<Selector>,
+};
+
+type RoleSelector = {
+  $$typeof: Type,
+  value: string,
+};
+
+type TextSelector = {
+  $$typeof: Type,
+  value: string,
+};
+
+type TestNameSelector = {
+  $$typeof: Type,
+  value: string,
+};
+
+type Selector =
+  | ComponentSelector
+  | HasPseudoClassSelector
+  | RoleSelector
+  | TextSelector
+  | TestNameSelector;
+
+export function createComponentSelector(
+  component: component(),
+): ComponentSelector {
+  return {
+    $$typeof: COMPONENT_TYPE,
+    value: component,
+  };
+}
+
+export function createHasPseudoClassSelector(
+  selectors: Array<Selector>,
+): HasPseudoClassSelector {
+  return {
+    $$typeof: HAS_PSEUDO_CLASS_TYPE,
+    value: selectors,
+  };
+}
+
+export function createRoleSelector(role: string): RoleSelector {
+  return {
+    $$typeof: ROLE_TYPE,
+    value: role,
+  };
+}
+
+export function createTextSelector(text: string): TextSelector {
+  return {
+    $$typeof: TEXT_TYPE,
+    value: text,
+  };
+}
+
+export function createTestNameSelector(id: string): TestNameSelector {
+  return {
+    $$typeof: TEST_NAME_TYPE,
+    value: id,
+  };
+}
+
+function findFiberRootForHostRoot(hostRoot: Instance): Fiber {
+  const maybeFiber = getInstanceFromNode((hostRoot: any));
+  if (maybeFiber != null) {
+    if (typeof maybeFiber.memoizedProps['data-testname'] !== 'string') {
+      throw new Error(
+        'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
+      );
+    }
+
+    return ((maybeFiber: any): Fiber);
+  } else {
+    const fiberRoot = findFiberRoot(hostRoot);
+
+    if (fiberRoot === null) {
+      throw new Error(
+        'Could not find React container within specified host subtree.',
+      );
+    }
+
+    // The Flow type for FiberRoot is a little funky.
+    // createFiberRoot() cheats this by treating the root as :any and adding stateNode lazily.
+    return ((fiberRoot: any).stateNode.current: Fiber);
+  }
+}
+
+function matchSelector(fiber: Fiber, selector: Selector): boolean {
+  const tag = fiber.tag;
+  switch (selector.$$typeof) {
+    case COMPONENT_TYPE:
+      if (fiber.type === selector.value) {
+        return true;
+      }
+      break;
+    case HAS_PSEUDO_CLASS_TYPE:
+      return hasMatchingPaths(
+        fiber,
+        ((selector: any): HasPseudoClassSelector).value,
+      );
+    case ROLE_TYPE:
+      if (
+        tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton
+      ) {
+        const node = fiber.stateNode;
+        if (
+          matchAccessibilityRole(node, ((selector: any): RoleSelector).value)
+        ) {
+          return true;
+        }
+      }
+      break;
+    case TEXT_TYPE:
+      if (
+        tag === HostComponent ||
+        tag === HostText ||
+        tag === HostHoistable ||
+        tag === HostSingleton
+      ) {
+        const textContent = getTextContent(fiber);
+        if (
+          textContent !== null &&
+          textContent.indexOf(((selector: any): TextSelector).value) >= 0
+        ) {
+          return true;
+        }
+      }
+      break;
+    case TEST_NAME_TYPE:
+      if (
+        tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton
+      ) {
+        const dataTestID = fiber.memoizedProps['data-testname'];
+        if (
+          typeof dataTestID === 'string' &&
+          dataTestID.toLowerCase() ===
+            ((selector: any): TestNameSelector).value.toLowerCase()
+        ) {
+          return true;
+        }
+      }
+      break;
+    default:
+      throw new Error('Invalid selector type specified.');
+  }
+
+  return false;
+}
+
+function selectorToString(selector: Selector): string | null {
+  switch (selector.$$typeof) {
+    case COMPONENT_TYPE:
+      const displayName = getComponentNameFromType(selector.value) || 'Unknown';
+      return `<${displayName}>`;
+    case HAS_PSEUDO_CLASS_TYPE:
+      return `:has(${selectorToString(selector) || ''})`;
+    case ROLE_TYPE:
+      return `[role="${((selector: any): RoleSelector).value}"]`;
+    case TEXT_TYPE:
+      return `"${((selector: any): TextSelector).value}"`;
+    case TEST_NAME_TYPE:
+      return `[data-testname="${((selector: any): TestNameSelector).value}"]`;
+    default:
+      throw new Error('Invalid selector type specified.');
+  }
+}
+
+function findPaths(root: Fiber, selectors: Array<Selector>): Array<Fiber> {
+  const matchingFibers: Array<Fiber> = [];
+
+  const stack = [root, 0];
+  let index = 0;
+  while (index < stack.length) {
+    const fiber = ((stack[index++]: any): Fiber);
+    const tag = fiber.tag;
+    let selectorIndex = ((stack[index++]: any): number);
+    let selector = selectors[selectorIndex];
+
+    if (
+      (tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton) &&
+      isHiddenSubtree(fiber)
+    ) {
+      continue;
+    } else {
+      while (selector != null && matchSelector(fiber, selector)) {
+        selectorIndex++;
+        selector = selectors[selectorIndex];
+      }
+    }
+
+    if (selectorIndex === selectors.length) {
+      matchingFibers.push(fiber);
+    } else {
+      let child = fiber.child;
+      while (child !== null) {
+        stack.push(child, selectorIndex);
+        child = child.sibling;
+      }
+    }
+  }
+
+  return matchingFibers;
+}
+
+// Same as findPaths but with eager bailout on first match
+function hasMatchingPaths(root: Fiber, selectors: Array<Selector>): boolean {
+  const stack = [root, 0];
+  let index = 0;
+  while (index < stack.length) {
+    const fiber = ((stack[index++]: any): Fiber);
+    const tag = fiber.tag;
+    let selectorIndex = ((stack[index++]: any): number);
+    let selector = selectors[selectorIndex];
+
+    if (
+      (tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton) &&
+      isHiddenSubtree(fiber)
+    ) {
+      continue;
+    } else {
+      while (selector != null && matchSelector(fiber, selector)) {
+        selectorIndex++;
+        selector = selectors[selectorIndex];
+      }
+    }
+
+    if (selectorIndex === selectors.length) {
+      return true;
+    } else {
+      let child = fiber.child;
+      while (child !== null) {
+        stack.push(child, selectorIndex);
+        child = child.sibling;
+      }
+    }
+  }
+
+  return false;
+}
+
+export function findAllNodes(
+  hostRoot: Instance,
+  selectors: Array<Selector>,
+): Array<Instance> {
+  if (!supportsTestSelectors) {
+    throw new Error('Test selector API is not supported by this renderer.');
+  }
+
+  const root = findFiberRootForHostRoot(hostRoot);
+  const matchingFibers = findPaths(root, selectors);
+
+  const instanceRoots: Array<Instance> = [];
+
+  const stack = Array.from(matchingFibers);
+  let index = 0;
+  while (index < stack.length) {
+    const node = ((stack[index++]: any): Fiber);
+    const tag = node.tag;
+    if (
+      tag === HostComponent ||
+      tag === HostHoistable ||
+      tag === HostSingleton
+    ) {
+      if (isHiddenSubtree(node)) {
+        continue;
+      }
+      instanceRoots.push(node.stateNode);
+    } else {
+      let child = node.child;
+      while (child !== null) {
+        stack.push(child);
+        child = child.sibling;
+      }
+    }
+  }
+
+  return instanceRoots;
+}
+
+export function getFindAllNodesFailureDescription(
+  hostRoot: Instance,
+  selectors: Array<Selector>,
+): string | null {
+  if (!supportsTestSelectors) {
+    throw new Error('Test selector API is not supported by this renderer.');
+  }
+
+  const root = findFiberRootForHostRoot(hostRoot);
+
+  let maxSelectorIndex: number = 0;
+  const matchedNames = [];
+
+  // The logic of this loop should be kept in sync with findPaths()
+  const stack = [root, 0];
+  let index = 0;
+  while (index < stack.length) {
+    const fiber = ((stack[index++]: any): Fiber);
+    const tag = fiber.tag;
+    let selectorIndex = ((stack[index++]: any): number);
+    const selector = selectors[selectorIndex];
+
+    if (
+      (tag === HostComponent ||
+        tag === HostHoistable ||
+        tag === HostSingleton) &&
+      isHiddenSubtree(fiber)
+    ) {
+      continue;
+    } else if (matchSelector(fiber, selector)) {
+      matchedNames.push(selectorToString(selector));
+      selectorIndex++;
+
+      if (selectorIndex > maxSelectorIndex) {
+        maxSelectorIndex = selectorIndex;
+      }
+    }
+
+    if (selectorIndex < selectors.length) {
+      let child = fiber.child;
+      while (child !== null) {
+        stack.push(child, selectorIndex);
+        child = child.sibling;
+      }
+    }
+  }
+
+  if (maxSelectorIndex < selectors.length) {
+    const unmatchedNames = [];
+    for (let i = maxSelectorIndex; i < selectors.length; i++) {
+      unmatchedNames.push(selectorToString(selectors[i]));
+    }
+
+    return (
+      'findAllNodes was able to match part of the selector:\n' +
+      `  ${matchedNames.join(' > ')}\n\n` +
+      'No matching component was found for:\n' +
+      `  ${unmatchedNames.join(' > ')}`
+    );
+  }
+
+  return null;
+}
+
+export type BoundingRect = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
+export function findBoundingRects(
+  hostRoot: Instance,
+  selectors: Array<Selector>,
+): Array<BoundingRect> {
+  if (!supportsTestSelectors) {
+    throw new Error('Test selector API is not supported by this renderer.');
+  }
+
+  const instanceRoots = findAllNodes(hostRoot, selectors);
+
+  const boundingRects: Array<BoundingRect> = [];
+  for (let i = 0; i < instanceRoots.length; i++) {
+    boundingRects.push(getBoundingRect(instanceRoots[i]));
+  }
+
+  for (let i = boundingRects.length - 1; i > 0; i--) {
+    const targetRect = boundingRects[i];
+    const targetLeft = targetRect.x;
+    const targetRight = targetLeft + targetRect.width;
+    const targetTop = targetRect.y;
+    const targetBottom = targetTop + targetRect.height;
+
+    for (let j = i - 1; j >= 0; j--) {
+      if (i !== j) {
+        const otherRect = boundingRects[j];
+        const otherLeft = otherRect.x;
+        const otherRight = otherLeft + otherRect.width;
+        const otherTop = otherRect.y;
+        const otherBottom = otherTop + otherRect.height;
+
+        // Merging all rects to the minimums set would be complicated,
+        // but we can handle the most common cases:
+        // 1. completely overlapping rects
+        // 2. adjacent rects that are the same width or height (e.g. items in a list)
+        //
+        // Even given the above constraints,
+        // we still won't end up with the fewest possible rects without doing multiple passes,
+        // but it's good enough for this purpose.
+
+        if (
+          targetLeft >= otherLeft &&
+          targetTop >= otherTop &&
+          targetRight <= otherRight &&
+          targetBottom <= otherBottom
+        ) {
+          // Complete overlapping rects; remove the inner one.
+          boundingRects.splice(i, 1);
+          break;
+        } else if (
+          targetLeft === otherLeft &&
+          targetRect.width === otherRect.width &&
+          !(otherBottom < targetTop) &&
+          !(otherTop > targetBottom)
+        ) {
+          // Adjacent vertical rects; merge them.
+          if (otherTop > targetTop) {
+            otherRect.height += otherTop - targetTop;
+            otherRect.y = targetTop;
+          }
+          if (otherBottom < targetBottom) {
+            otherRect.height = targetBottom - otherTop;
+          }
+
+          boundingRects.splice(i, 1);
+          break;
+        } else if (
+          targetTop === otherTop &&
+          targetRect.height === otherRect.height &&
+          !(otherRight < targetLeft) &&
+          !(otherLeft > targetRight)
+        ) {
+          // Adjacent horizontal rects; merge them.
+          if (otherLeft > targetLeft) {
+            otherRect.width += otherLeft - targetLeft;
+            otherRect.x = targetLeft;
+          }
+          if (otherRight < targetRight) {
+            otherRect.width = targetRight - otherLeft;
+          }
+
+          boundingRects.splice(i, 1);
+          break;
+        }
+      }
+    }
+  }
+
+  return boundingRects;
+}
+
+export function focusWithin(
+  hostRoot: Instance,
+  selectors: Array<Selector>,
+): boolean {
+  if (!supportsTestSelectors) {
+    throw new Error('Test selector API is not supported by this renderer.');
+  }
+
+  const root = findFiberRootForHostRoot(hostRoot);
+  const matchingFibers = findPaths(root, selectors);
+
+  const stack = Array.from(matchingFibers);
+  let index = 0;
+  while (index < stack.length) {
+    const fiber = ((stack[index++]: any): Fiber);
+    const tag = fiber.tag;
+    if (isHiddenSubtree(fiber)) {
+      continue;
+    }
+    if (
+      tag === HostComponent ||
+      tag === HostHoistable ||
+      tag === HostSingleton
+    ) {
+      const node = fiber.stateNode;
+      if (setFocusIfFocusable(node)) {
+        return true;
+      }
+    }
+    let child = fiber.child;
+    while (child !== null) {
+      stack.push(child);
+      child = child.sibling;
+    }
+  }
+
+  return false;
+}
+
+const commitHooks: Array<Function> = [];
+
+export function onCommitRoot(): void {
+  if (supportsTestSelectors) {
+    commitHooks.forEach(commitHook => commitHook());
+  }
+}
+
+export type IntersectionObserverOptions = Object;
+
+export type ObserveVisibleRectsCallback = (
+  intersections: Array<{ratio: number, rect: BoundingRect}>,
+) => void;
+
+export function observeVisibleRects(
+  hostRoot: Instance,
+  selectors: Array<Selector>,
+  callback: (intersections: Array<{ratio: number, rect: BoundingRect}>) => void,
+  options?: IntersectionObserverOptions,
+): {disconnect: () => void} {
+  if (!supportsTestSelectors) {
+    throw new Error('Test selector API is not supported by this renderer.');
+  }
+
+  const instanceRoots = findAllNodes(hostRoot, selectors);
+
+  const {disconnect, observe, unobserve} = setupIntersectionObserver(
+    instanceRoots,
+    callback,
+    options,
+  );
+
+  // When React mutates the host environment, we may need to change what we're listening to.
+  const commitHook = () => {
+    const nextInstanceRoots = findAllNodes(hostRoot, selectors);
+
+    instanceRoots.forEach(target => {
+      if (nextInstanceRoots.indexOf(target) < 0) {
+        unobserve(target);
+      }
+    });
+
+    nextInstanceRoots.forEach(target => {
+      if (instanceRoots.indexOf(target) < 0) {
+        observe(target);
+      }
+    });
+  };
+
+  commitHooks.push(commitHook);
+
+  return {
+    disconnect: () => {
+      // Stop listening for React mutations:
+      const index = commitHooks.indexOf(commitHook);
+      if (index >= 0) {
+        commitHooks.splice(index, 1);
+      }
+
+      // Disconnect the host observer:
+      disconnect();
+    },
+  };
+}
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
new file mode 100644
index 00000000000..22d0a7c6d1a
--- /dev/null
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 TypeOfMode = number;
+
+export const NoMode = /*                         */ 0b0000000;
+// TODO: Remove ConcurrentMode by reading from the root tag instead
+export const ConcurrentMode = /*                 */ 0b0000001;
+export const ProfileMode = /*                    */ 0b0000010;
+//export const DebugTracingMode = /*             */ 0b0000100; // Removed
+export const StrictLegacyMode = /*               */ 0b0001000;
+export const StrictEffectsMode = /*              */ 0b0010000;
+// Keep track of if we're in a SuspenseyImages eligible subtree.
+// TODO: Remove this when enableSuspenseyImages ship where it's always on.
+export const SuspenseyImagesMode = /*            */ 0b0100000;
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
new file mode 100644
index 00000000000..4b01934be77
--- /dev/null
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 WorkTag =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | 25
+  | 26
+  | 27
+  | 28
+  | 29
+  | 30
+  | 31;
+
+export const FunctionComponent = 0;
+export const ClassComponent = 1;
+export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
+export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
+export const HostComponent = 5;
+export const HostText = 6;
+export const Fragment = 7;
+export const Mode = 8;
+export const ContextConsumer = 9;
+export const ContextProvider = 10;
+export const ForwardRef = 11;
+export const Profiler = 12;
+export const SuspenseComponent = 13;
+export const MemoComponent = 14;
+export const SimpleMemoComponent = 15;
+export const LazyComponent = 16;
+export const IncompleteClassComponent = 17;
+export const DehydratedFragment = 18;
+export const SuspenseListComponent = 19;
+export const ScopeComponent = 21;
+export const OffscreenComponent = 22;
+export const LegacyHiddenComponent = 23;
+export const CacheComponent = 24;
+export const TracingMarkerComponent = 25;
+export const HostHoistable = 26;
+export const HostSingleton = 27;
+export const IncompleteFunctionComponent = 28;
+export const Throw = 29;
+export const ViewTransitionComponent = 30;
+export const ActivityComponent = 31;
diff --git a/packages/react-reconciler/src/Scheduler.js b/packages/react-reconciler/src/Scheduler.js
new file mode 100644
index 00000000000..76dbad84d28
--- /dev/null
+++ b/packages/react-reconciler/src/Scheduler.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 module only exists as an ESM wrapper around the external CommonJS
+// Scheduler dependency. Notice that we're intentionally not using named imports
+// because Rollup would use dynamic dispatch for CommonJS interop named imports.
+// When we switch to ESM, we can delete this module.
+import * as Scheduler from 'scheduler';
+
+export const scheduleCallback = Scheduler.unstable_scheduleCallback;
+export const cancelCallback = Scheduler.unstable_cancelCallback;
+export const shouldYield = Scheduler.unstable_shouldYield;
+export const requestPaint = Scheduler.unstable_requestPaint;
+export const now = Scheduler.unstable_now;
+export const getCurrentPriorityLevel =
+  Scheduler.unstable_getCurrentPriorityLevel;
+export const ImmediatePriority = Scheduler.unstable_ImmediatePriority;
+export const UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
+export const NormalPriority = Scheduler.unstable_NormalPriority;
+export const LowPriority = Scheduler.unstable_LowPriority;
+export const IdlePriority = Scheduler.unstable_IdlePriority;
+export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
+
+// this doesn't actually exist on the scheduler, but it *does*
+// on scheduler/unstable_mock, which we'll need for internal testing
+export const log = Scheduler.log;
+export const unstable_setDisableYieldValue =
+  Scheduler.unstable_setDisableYieldValue;
diff --git a/packages/react-reconciler/src/__mocks__/scheduler/tracing.js b/packages/react-reconciler/src/__mocks__/scheduler/tracing.js
new file mode 100644
index 00000000000..565d81a5d0b
--- /dev/null
+++ b/packages/react-reconciler/src/__mocks__/scheduler/tracing.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 placeholder is to support a legacy/regression test in ReactFresh-test.
+// Without this mock, jest.mock('scheduler/tracing') throws.
diff --git a/packages/react-reconciler/src/__tests__/Activity-test.js b/packages/react-reconciler/src/__tests__/Activity-test.js
new file mode 100644
index 00000000000..2fdcc16701d
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/Activity-test.js
@@ -0,0 +1,1575 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let LegacyHidden;
+let Activity;
+let useState;
+let useLayoutEffect;
+let useEffect;
+let useInsertionEffect;
+let useMemo;
+let startTransition;
+let waitForPaint;
+let waitFor;
+let assertLog;
+let assertConsoleErrorDev;
+let Suspense;
+
+describe('Activity', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    LegacyHidden = React.unstable_LegacyHidden;
+    Activity = React.Activity;
+    Suspense = React.Suspense;
+    useState = React.useState;
+    useInsertionEffect = React.useInsertionEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    useEffect = React.useEffect;
+    useMemo = React.useMemo;
+    startTransition = React.startTransition;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForPaint = InternalTestUtils.waitForPaint;
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text}>{props.children}</span>;
+  }
+
+  // @gate enableLegacyHidden
+  it('unstable-defer-without-hiding should never toggle the visibility of its children', async () => {
+    function App({mode}) {
+      return (
+        <>
+          <Text text="Normal" />
+          <LegacyHidden mode={mode}>
+            <Text text="Deferred" />
+          </LegacyHidden>
+        </>
+      );
+    }
+
+    // Test the initial mount
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App mode="unstable-defer-without-hiding" />);
+      await waitForPaint(['Normal']);
+      expect(root).toMatchRenderedOutput(<span prop="Normal" />);
+    });
+    assertLog(['Deferred']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Normal" />
+        <span prop="Deferred" />
+      </>,
+    );
+
+    // Now try after an update
+    await act(() => {
+      root.render(<App mode="visible" />);
+    });
+    assertLog(['Normal', 'Deferred']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Normal" />
+        <span prop="Deferred" />
+      </>,
+    );
+
+    await act(async () => {
+      root.render(<App mode="unstable-defer-without-hiding" />);
+      await waitForPaint(['Normal']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Normal" />
+          <span prop="Deferred" />
+        </>,
+      );
+    });
+    assertLog(['Deferred']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Normal" />
+        <span prop="Deferred" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyHidden && !disableLegacyMode
+  it('does not defer in legacy mode', async () => {
+    let setState;
+    function Foo() {
+      const [state, _setState] = useState('A');
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+    await act(() => {
+      root.render(
+        <>
+          <LegacyHidden mode="hidden">
+            <Foo />
+          </LegacyHidden>
+          <Text text="Outside" />
+        </>,
+      );
+
+      ReactNoop.flushSync();
+
+      // Should not defer the hidden tree
+      assertLog(['A', 'Outside']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Outside" />
+      </>,
+    );
+
+    // Test that the children can be updated
+    await act(() => {
+      setState('B');
+    });
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="Outside" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  it('does defer in concurrent mode', async () => {
+    let setState;
+    function Foo() {
+      const [state, _setState] = useState('A');
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <>
+          <LegacyHidden mode="hidden">
+            <Foo />
+          </LegacyHidden>
+          <Text text="Outside" />
+        </>,
+      );
+      // Should defer the hidden tree.
+      await waitForPaint(['Outside']);
+    });
+
+    // The hidden tree was rendered at lower priority.
+    assertLog(['A']);
+
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Outside" />
+      </>,
+    );
+
+    // Test that the children can be updated
+    await act(() => {
+      setState('B');
+    });
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="Outside" />
+      </>,
+    );
+  });
+
+  // @gate enableActivity
+  it('mounts without layout effects when hidden', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount hidden tree.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    // No layout effect.
+    assertLog(['Child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+
+    // Unhide the tree. The layout effect is mounted.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+  });
+
+  // @gate enableActivity
+  it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree. The layout effect is unmounted.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Unmount layout', 'Child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+
+    // Unhide the tree. The layout effect is re-mounted.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+  });
+
+  // @gate enableActivity
+  it('nested offscreen does not call componentWillUnmount when hidden', async () => {
+    // This is a bug that appeared during production test of <Activity />.
+    // It is a very specific scenario with nested Offscreens. The inner offscreen
+    // goes from visible to hidden in synchronous update.
+    class ClassComponent extends React.Component {
+      render() {
+        return <Text text="child" />;
+      }
+
+      componentWillUnmount() {
+        Scheduler.log('componentWillUnmount');
+      }
+
+      componentDidMount() {
+        Scheduler.log('componentDidMount');
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      // Outer and inner offscreen are hidden.
+      root.render(
+        <Activity mode={'hidden'}>
+          <Activity mode={'hidden'}>
+            <ClassComponent />
+          </Activity>
+        </Activity>,
+      );
+    });
+
+    assertLog(['child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="child" />);
+
+    await act(() => {
+      // Inner offscreen is visible.
+      root.render(
+        <Activity mode={'hidden'}>
+          <Activity mode={'visible'}>
+            <ClassComponent />
+          </Activity>
+        </Activity>,
+      );
+    });
+
+    assertLog(['child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="child" />);
+
+    await act(() => {
+      // Inner offscreen is hidden.
+      root.render(
+        <Activity mode={'hidden'}>
+          <Activity mode={'hidden'}>
+            <ClassComponent />
+          </Activity>
+        </Activity>,
+      );
+    });
+
+    assertLog(['child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="child" />);
+
+    await act(() => {
+      // Inner offscreen is visible.
+      root.render(
+        <Activity mode={'hidden'}>
+          <Activity mode={'visible'}>
+            <ClassComponent />
+          </Activity>
+        </Activity>,
+      );
+    });
+
+    Scheduler.unstable_clearLog();
+
+    await act(() => {
+      // Outer offscreen is visible.
+      // Inner offscreen is hidden.
+      root.render(
+        <Activity mode={'visible'}>
+          <Activity mode={'hidden'}>
+            <ClassComponent />
+          </Activity>
+        </Activity>,
+      );
+    });
+
+    assertLog(['child']);
+
+    await act(() => {
+      // Outer offscreen is hidden.
+      // Inner offscreen is visible.
+      root.render(
+        <Activity mode={'hidden'}>
+          <Activity mode={'visible'}>
+            <ClassComponent />
+          </Activity>
+        </Activity>,
+      );
+    });
+
+    assertLog(['child']);
+  });
+
+  // @gate enableActivity
+  it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      // Start the tree hidden. The layout effect is not mounted.
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+
+    // Show the tree. The layout effect is mounted.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree again. The layout effect is un-mounted.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Unmount layout', 'Child']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+  });
+
+  // @gate enableActivity
+  it('hides children of offscreen after layout effects are destroyed', async () => {
+    const root = ReactNoop.createRoot();
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          // The child should not be hidden yet.
+          expect(root).toMatchRenderedOutput(<span prop="Child" />);
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree. The layout effect is unmounted.
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['Unmount layout', 'Child']);
+
+    // After the layout effect is unmounted, the child is hidden.
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+  });
+
+  // @gate enableLegacyHidden
+  it('does not toggle effects for LegacyHidden component', async () => {
+    // LegacyHidden is meant to be the same as offscreen except it doesn't
+    // do anything to effects. Only used by www, as a temporary migration step.
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout');
+        return () => {
+          Scheduler.log('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    assertLog(['Child', 'Mount layout']);
+
+    await act(() => {
+      root.render(
+        <LegacyHidden mode="hidden">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    assertLog(['Child']);
+
+    await act(() => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    assertLog(['Child']);
+
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount layout']);
+  });
+
+  // @gate enableActivity
+  it('hides new insertions into an already hidden tree', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <span>Hi</span>
+        </Activity>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Insert a new node into the hidden tree
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <span>Hi</span>
+          <span>Something new</span>
+        </Activity>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>Hi</span>
+        {/* This new node should also be hidden */}
+        <span hidden={true}>Something new</span>
+      </>,
+    );
+  });
+
+  // @gate enableActivity
+  it('hides updated nodes inside an already hidden tree', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <span>Hi</span>
+        </Activity>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Set the `hidden` prop to on an already hidden node
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <span hidden={false}>Hi</span>
+        </Activity>,
+      );
+    });
+    // It should still be hidden, because the Activity container overrides it
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Unhide the boundary
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <span hidden={true}>Hi</span>
+        </Activity>,
+      );
+    });
+    // It should still be hidden, because of the prop
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Remove the `hidden` prop
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <span>Hi</span>
+        </Activity>,
+      );
+    });
+    // Now it's visible
+    expect(root).toMatchRenderedOutput(<span>Hi</span>);
+  });
+
+  // @gate enableActivity
+  it('revealing a hidden tree at high priority does not cause tearing', async () => {
+    // When revealing an offscreen tree, we need to include updates that were
+    // previously deferred because the tree was hidden, even if they are lower
+    // priority than the current render. However, we should *not* include low
+    // priority updates that are entangled with updates outside of the hidden
+    // tree, because that can cause tearing.
+    //
+    // This test covers a scenario where an update multiple updates inside a
+    // hidden tree share the same lane, but are processed at different times
+    // because of the timing of when they were scheduled.
+
+    // This functions checks whether the "outer" and "inner" states are
+    // consistent in the rendered output.
+    let currentOuter = null;
+    let currentInner = null;
+    function areOuterAndInnerConsistent() {
+      return (
+        currentOuter === null ||
+        currentInner === null ||
+        currentOuter === currentInner
+      );
+    }
+
+    let setInner;
+    function Child() {
+      const [inner, _setInner] = useState(0);
+      setInner = _setInner;
+
+      useEffect(() => {
+        currentInner = inner;
+        return () => {
+          currentInner = null;
+        };
+      }, [inner]);
+
+      return <Text text={'Inner: ' + inner} />;
+    }
+
+    let setOuter;
+    function App({show}) {
+      const [outer, _setOuter] = useState(0);
+      setOuter = _setOuter;
+
+      useEffect(() => {
+        currentOuter = outer;
+        return () => {
+          currentOuter = null;
+        };
+      }, [outer]);
+
+      return (
+        <>
+          <Text text={'Outer: ' + outer} />
+          <Activity mode={show ? 'visible' : 'hidden'}>
+            <Child />
+          </Activity>
+        </>
+      );
+    }
+
+    // Render a hidden tree
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['Outer: 0', 'Inner: 0']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: 0" />
+        <span hidden={true} prop="Inner: 0" />
+      </>,
+    );
+    expect(areOuterAndInnerConsistent()).toBe(true);
+
+    await act(async () => {
+      // Update a value both inside and outside the hidden tree. These values
+      // must always be consistent.
+      setOuter(1);
+      setInner(1);
+      // Only the outer updates finishes because the inner update is inside a
+      // hidden tree. The outer update is deferred to a later render.
+      await waitForPaint(['Outer: 1']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer: 1" />
+          <span hidden={true} prop="Inner: 0" />
+        </>,
+      );
+
+      // Before the inner update can finish, we receive another pair of updates.
+      React.startTransition(() => {
+        setOuter(2);
+        setInner(2);
+      });
+
+      // Also, before either of these new updates are processed, the hidden
+      // tree is revealed at high priority.
+      ReactNoop.flushSync(() => {
+        root.render(<App show={true} />);
+      });
+
+      assertLog([
+        'Outer: 1',
+
+        // There are two pending updates on Inner, but only the first one
+        // is processed, even though they share the same lane. If the second
+        // update were erroneously processed, then Inner would be inconsistent
+        // with Outer.
+        'Inner: 1',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer: 1" />
+          <span prop="Inner: 1" />
+        </>,
+      );
+      expect(areOuterAndInnerConsistent()).toBe(true);
+    });
+    assertLog(['Outer: 2', 'Inner: 2']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: 2" />
+        <span prop="Inner: 2" />
+      </>,
+    );
+    expect(areOuterAndInnerConsistent()).toBe(true);
+  });
+
+  // @gate enableActivity
+  it('regression: Activity instance is sometimes null during setState', async () => {
+    let setState;
+    function Child() {
+      const [state, _setState] = useState('Initial');
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Activity />);
+    });
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(null);
+
+    await act(async () => {
+      // Partially render a component
+      startTransition(() => {
+        root.render(
+          <Activity>
+            <Child />
+            <Text text="Sibling" />
+          </Activity>,
+        );
+      });
+      await waitFor(['Initial']);
+
+      // Before it finishes rendering, the whole tree gets deleted
+      ReactNoop.flushSync(() => {
+        root.render(null);
+      });
+
+      // Something attempts to update the never-mounted component. When this
+      // regression test was written, we would walk up the component's return
+      // path and reach an unmounted Activity component fiber. Its `stateNode`
+      // would be null because it was nulled out when it was deleted, but there
+      // was no null check before we accessed it. A weird edge case but we must
+      // account for it.
+      setState('Updated');
+      assertConsoleErrorDev([
+        "Can't perform a React state update on a component that hasn't mounted yet. " +
+          'This indicates that you have a side-effect in your render function that ' +
+          'asynchronously tries to update the component. ' +
+          'Move this work to useEffect instead.\n' +
+          '    in Child (at **)',
+      ]);
+    });
+    expect(root).toMatchRenderedOutput(null);
+  });
+
+  // @gate enableActivity
+  it('class component setState callbacks do not fire until tree is visible', async () => {
+    const root = ReactNoop.createRoot();
+
+    let child;
+    class Child extends React.Component {
+      state = {text: 'A'};
+      render() {
+        child = this;
+        return <Text text={this.state.text} />;
+      }
+    }
+
+    // Initial render
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['A']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="A" />);
+
+    // Schedule an update to a hidden class component. The update will finish
+    // rendering in the background, but the callback shouldn't fire yet, because
+    // the component isn't visible.
+    await act(() => {
+      child.setState({text: 'B'}, () => {
+        Scheduler.log('B update finished');
+      });
+    });
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="B" />);
+
+    // Now reveal the hidden component. Simultaneously, schedule another
+    // update with a callback to the same component. When the component is
+    // revealed, both the B callback and C callback should fire, in that order.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+      child.setState({text: 'C'}, () => {
+        Scheduler.log('C update finished');
+      });
+    });
+    assertLog(['C', 'B update finished', 'C update finished']);
+    expect(root).toMatchRenderedOutput(<span prop="C" />);
+  });
+
+  // @gate enableActivity
+  it('does not call componentDidUpdate when reappearing a hidden class component', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.log('componentDidMount');
+      }
+      componentDidUpdate() {
+        Scheduler.log('componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.log('componentWillUnmount');
+      }
+      render() {
+        return 'Child';
+      }
+    }
+
+    // Initial mount
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['componentDidMount']);
+
+    // Hide the class component
+    await act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['componentWillUnmount']);
+
+    // Reappear the class component. componentDidMount should fire, not
+    // componentDidUpdate.
+    await act(() => {
+      root.render(
+        <Activity mode="visible">
+          <Child />
+        </Activity>,
+      );
+    });
+    assertLog(['componentDidMount']);
+  });
+
+  // @gate enableActivity
+  it(
+    'when reusing old components (hidden -> visible), layout effects fire ' +
+      'with same timing as if it were brand new',
+    async () => {
+      function Child({label}) {
+        useLayoutEffect(() => {
+          Scheduler.log('Mount ' + label);
+          return () => {
+            Scheduler.log('Unmount ' + label);
+          };
+        }, [label]);
+        return label;
+      }
+
+      // Initial mount
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(
+          <Activity mode="visible">
+            <Child key="B" label="B" />
+          </Activity>,
+        );
+      });
+      assertLog(['Mount B']);
+
+      // Hide the component
+      await act(() => {
+        root.render(
+          <Activity mode="hidden">
+            <Child key="B" label="B" />
+          </Activity>,
+        );
+      });
+      assertLog(['Unmount B']);
+
+      // Reappear the component and also add some new siblings.
+      await act(() => {
+        root.render(
+          <Activity mode="visible">
+            <Child key="A" label="A" />
+            <Child key="B" label="B" />
+            <Child key="C" label="C" />
+          </Activity>,
+        );
+      });
+      // B's effect should fire in between A and C even though it's been reused
+      // from a previous render. In other words, it's the same order as if all
+      // three siblings were brand new.
+      assertLog(['Mount A', 'Mount B', 'Mount C']);
+    },
+  );
+
+  // @gate enableActivity
+  it(
+    'when reusing old components (hidden -> visible), layout effects fire ' +
+      'with same timing as if it were brand new (includes setState callback)',
+    async () => {
+      class Child extends React.Component {
+        componentDidMount() {
+          Scheduler.log('Mount ' + this.props.label);
+        }
+        componentWillUnmount() {
+          Scheduler.log('Unmount ' + this.props.label);
+        }
+        render() {
+          return this.props.label;
+        }
+      }
+
+      // Initial mount
+      const bRef = React.createRef();
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(
+          <Activity mode="visible">
+            <Child key="B" ref={bRef} label="B" />
+          </Activity>,
+        );
+      });
+      assertLog(['Mount B']);
+
+      // We're going to schedule an update on a hidden component, so stash a
+      // reference to its setState before the ref gets detached
+      const setStateB = bRef.current.setState.bind(bRef.current);
+
+      // Hide the component
+      await act(() => {
+        root.render(
+          <Activity mode="hidden">
+            <Child key="B" ref={bRef} label="B" />
+          </Activity>,
+        );
+      });
+      assertLog(['Unmount B']);
+
+      // Reappear the component and also add some new siblings.
+      await act(() => {
+        setStateB(null, () => {
+          Scheduler.log('setState callback B');
+        });
+        root.render(
+          <Activity mode="visible">
+            <Child key="A" label="A" />
+            <Child key="B" ref={bRef} label="B" />
+            <Child key="C" label="C" />
+          </Activity>,
+        );
+      });
+      // B's effect should fire in between A and C even though it's been reused
+      // from a previous render. In other words, it's the same order as if all
+      // three siblings were brand new.
+      assertLog(['Mount A', 'Mount B', 'setState callback B', 'Mount C']);
+    },
+  );
+
+  // @gate enableActivity
+  it('defer passive effects when prerendering a new Activity tree', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showMore}) {
+      return (
+        <>
+          <Child label="Shell" />
+          <Activity mode={showMore ? 'visible' : 'hidden'}>
+            <Child label="More" />
+          </Activity>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount the app without showing the extra content
+    await act(() => {
+      root.render(<App showMore={false} />);
+    });
+    assertLog([
+      // First mount the outer visible shell
+      'Shell',
+      'Mount Shell',
+
+      // Then prerender the hidden extra context. The passive effects in the
+      // hidden tree should not fire
+      'More',
+      // Does not fire
+      // 'Mount More',
+    ]);
+    // The hidden content has been prerendered
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Shell" />
+        <span hidden={true} prop="More" />
+      </>,
+    );
+
+    // Reveal the prerendered tree
+    await act(() => {
+      root.render(<App showMore={true} />);
+    });
+    assertLog([
+      'Shell',
+      'More',
+
+      // Mount the passive effects in the newly revealed tree, the ones that
+      // were skipped during pre-rendering.
+      'Mount More',
+    ]);
+  });
+
+  // @gate enableLegacyHidden
+  it('do not defer passive effects when prerendering a new LegacyHidden tree', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showMore}) {
+      return (
+        <>
+          <Child label="Shell" />
+          <LegacyHidden
+            mode={showMore ? 'visible' : 'unstable-defer-without-hiding'}>
+            <Child label="More" />
+          </LegacyHidden>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount the app without showing the extra content
+    await act(() => {
+      root.render(<App showMore={false} />);
+    });
+    assertLog([
+      // First mount the outer visible shell
+      'Shell',
+      'Mount Shell',
+
+      // Then prerender the hidden extra context. Unlike Activity, the passive
+      // effects in the hidden tree *should* fire
+      'More',
+      'Mount More',
+    ]);
+
+    // The hidden content has been prerendered
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Shell" />
+        <span prop="More" />
+      </>,
+    );
+
+    // Reveal the prerendered tree
+    await act(() => {
+      root.render(<App showMore={true} />);
+    });
+    assertLog(['Shell', 'More']);
+  });
+
+  // @gate enableActivity
+  it('passive effects are connected and disconnected when the visibility changes', async () => {
+    function Child({step}) {
+      useEffect(() => {
+        Scheduler.log(`Commit mount [${step}]`);
+        return () => {
+          Scheduler.log(`Commit unmount [${step}]`);
+        };
+      }, [step]);
+      return <Text text={step} />;
+    }
+
+    function App({show, step}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <Child step={step} />
+            ),
+            [step],
+          )}
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App show={true} step={1} />);
+    });
+    assertLog([1, 'Commit mount [1]']);
+    expect(root).toMatchRenderedOutput(<span prop={1} />);
+
+    // Hide the tree. This will unmount the effect.
+    await act(() => {
+      root.render(<App show={false} step={1} />);
+    });
+    assertLog(['Commit unmount [1]']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop={1} />);
+
+    // Update.
+    await act(() => {
+      root.render(<App show={false} step={2} />);
+    });
+    // The update is prerendered but no effects are fired
+    assertLog([2]);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop={2} />);
+
+    // Reveal the tree.
+    await act(() => {
+      root.render(<App show={true} step={2} />);
+    });
+    // The update doesn't render because it was already prerendered, but we do
+    // fire the effect.
+    assertLog(['Commit mount [2]']);
+    expect(root).toMatchRenderedOutput(<span prop={2} />);
+  });
+
+  // @gate enableActivity
+  it('passive effects are unmounted on hide in the same order as during a deletion: parent before child', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount Child');
+        return () => {
+          Scheduler.log('Unmount Child');
+        };
+      }, []);
+      return <div>Hi</div>;
+    }
+    function Parent() {
+      useEffect(() => {
+        Scheduler.log('Mount Parent');
+        return () => {
+          Scheduler.log('Unmount Parent');
+        };
+      }, []);
+      return <Child />;
+    }
+
+    function App({show}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          <Parent />
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App show={true} />);
+    });
+    assertLog(['Mount Child', 'Mount Parent']);
+
+    // First demonstrate what happens during a normal deletion
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount Parent', 'Unmount Child']);
+
+    // Now redo the same thing but hide instead of deleting
+    await act(() => {
+      root.render(<App show={true} />);
+    });
+    assertLog(['Mount Child', 'Mount Parent']);
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    // The order is the same as during a deletion: parent before child
+    assertLog(['Unmount Parent', 'Unmount Child']);
+  });
+
+  // TODO: As of now, there's no way to hide a tree without also unmounting its
+  // effects. (Except for Suspense, which has its own tests associated with it.)
+  // Re-enable this test once we add this ability. For example, we'll likely add
+  // either an option or a heuristic to mount passive effects inside a hidden
+  // tree after a delay.
+  // @gate enableActivity
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip("don't defer passive effects when prerendering in a tree whose effects are already connected", async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showMore, step}) {
+      return (
+        <>
+          <Child label={'Shell ' + step} />
+          <Activity mode={showMore ? 'visible' : 'hidden'}>
+            <Child label={'More ' + step} />
+          </Activity>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount the app, including the extra content
+    await act(() => {
+      root.render(<App showMore={true} step={1} />);
+    });
+    assertLog(['Shell 1', 'More 1', 'Mount Shell 1', 'Mount More 1']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Shell 1" />
+        <span prop="More 1" />
+      </>,
+    );
+
+    // Hide the extra content. while also updating one of its props
+    await act(() => {
+      root.render(<App showMore={false} step={2} />);
+    });
+    assertLog([
+      // First update the outer visible shell
+      'Shell 2',
+      'Unmount Shell 1',
+      'Mount Shell 2',
+
+      // Then prerender the update to the hidden content. Since the effects
+      // are already connected inside the hidden tree, we don't defer updates
+      // to them.
+      'More 2',
+      'Unmount More 1',
+      'Mount More 2',
+    ]);
+  });
+
+  // @gate enableActivity
+  it('does not mount effects when prerendering a nested Activity boundary', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showOuter, showInner}) {
+      return (
+        <Activity mode={showOuter ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <div>
+                <Child label="Outer" />
+                {showInner ? (
+                  <Activity mode="visible">
+                    <div>
+                      <Child label="Inner" />
+                    </div>
+                  </Activity>
+                ) : null}
+              </div>
+            ),
+            [showInner],
+          )}
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender the outer contents. No effects should mount.
+    await act(() => {
+      root.render(<App showOuter={false} showInner={false} />);
+    });
+    assertLog(['Outer']);
+    expect(root).toMatchRenderedOutput(
+      <div hidden={true}>
+        <span prop="Outer" />
+      </div>,
+    );
+
+    // Prerender the inner contents. No effects should mount.
+    await act(() => {
+      root.render(<App showOuter={false} showInner={true} />);
+    });
+    assertLog(['Outer', 'Inner']);
+    expect(root).toMatchRenderedOutput(
+      <div hidden={true}>
+        <span prop="Outer" />
+        <div>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+
+    // Reveal the prerendered tree
+    await act(() => {
+      root.render(<App showOuter={true} showInner={true} />);
+    });
+    // The effects fire, but the tree is not re-rendered because it already
+    // prerendered.
+    assertLog(['Mount Outer', 'Mount Inner']);
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span prop="Outer" />
+        <div>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate enableActivity
+  it('reveal an outer Activity boundary without revealing an inner one', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showOuter, showInner}) {
+      return (
+        <Activity mode={showOuter ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <div>
+                <Child label="Outer" />
+                <Activity mode={showInner ? 'visible' : 'hidden'}>
+                  <div>
+                    <Child label="Inner" />
+                  </div>
+                </Activity>
+              </div>
+            ),
+            [showInner],
+          )}
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender the whole tree.
+    await act(() => {
+      root.render(<App showOuter={false} showInner={false} />);
+    });
+    assertLog(['Outer', 'Inner']);
+    // Both the inner and the outer tree should be hidden. Hiding the inner tree
+    // is arguably redundant, but the advantage of hiding both is that later you
+    // can reveal the outer tree without having to examine the inner one.
+    expect(root).toMatchRenderedOutput(
+      <div hidden={true}>
+        <span prop="Outer" />
+        <div hidden={true}>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+
+    // Reveal the outer contents. The inner tree remains hidden.
+    await act(() => {
+      root.render(<App showOuter={true} showInner={false} />);
+    });
+    assertLog(['Mount Outer']);
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span prop="Outer" />
+        <div hidden={true}>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate enableActivity
+  it('reveal an inner Activity boundary without revealing an outer one on the same host child', async () => {
+    // This ensures that no update is scheduled, which would cover up the bug if the parent
+    // then re-hides the child on the way up.
+    const memoizedElement = <div />;
+    function App({showOuter, showInner}) {
+      return (
+        <Activity mode={showOuter ? 'visible' : 'hidden'} name="Outer">
+          <Activity mode={showInner ? 'visible' : 'hidden'} name="Inner">
+            {memoizedElement}
+          </Activity>
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender the whole tree.
+    await act(() => {
+      root.render(<App showOuter={false} showInner={false} />);
+    });
+    expect(root).toMatchRenderedOutput(<div hidden={true} />);
+
+    await act(() => {
+      root.render(<App showOuter={false} showInner={true} />);
+    });
+    expect(root).toMatchRenderedOutput(<div hidden={true} />);
+  });
+
+  // @gate enableActivity
+  it('reveal an inner Suspense boundary without revealing an outer Activity on the same host child', async () => {
+    // This ensures that no update is scheduled, which would cover up the bug if the parent
+    // then re-hides the child on the way up.
+    const memoizedElement = <div />;
+    const promise = new Promise(() => {});
+    function App({showOuter, showInner}) {
+      return (
+        <Activity mode={showOuter ? 'visible' : 'hidden'} name="Outer">
+          <Suspense name="Inner">
+            {memoizedElement}
+            {showInner ? null : promise}
+          </Suspense>
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender the whole tree.
+    await act(() => {
+      root.render(<App showOuter={false} showInner={true} />);
+    });
+    expect(root).toMatchRenderedOutput(<div hidden={true} />);
+
+    // Resuspend the inner.
+    await act(() => {
+      root.render(<App showOuter={false} showInner={false} />);
+    });
+    expect(root).toMatchRenderedOutput(<div hidden={true} />);
+
+    await act(() => {
+      root.render(<App showOuter={false} showInner={true} />);
+    });
+    expect(root).toMatchRenderedOutput(<div hidden={true} />);
+  });
+
+  // @gate enableActivity
+  it('insertion effects are not disconnected when the visibility changes', async () => {
+    function Child({step}) {
+      useInsertionEffect(() => {
+        Scheduler.log(`Commit mount [${step}]`);
+        return () => {
+          Scheduler.log(`Commit unmount [${step}]`);
+        };
+      }, [step]);
+      return <Text text={step} />;
+    }
+
+    function App({show, step}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <Child step={step} />
+            ),
+            [step],
+          )}
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App show={true} step={1} />);
+    });
+    assertLog([1, 'Commit mount [1]']);
+    expect(root).toMatchRenderedOutput(<span prop={1} />);
+
+    // Hide the tree. This will not unmount insertion effects.
+    await act(() => {
+      root.render(<App show={false} step={1} />);
+    });
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop={1} />);
+
+    // Update.
+    await act(() => {
+      root.render(<App show={false} step={2} />);
+    });
+    // The update is pre-rendered so insertion effects are fired
+    assertLog([2, 'Commit unmount [1]', 'Commit mount [2]']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop={2} />);
+
+    // Reveal the tree.
+    await act(() => {
+      root.render(<App show={true} step={2} />);
+    });
+    // The update doesn't render because it was already pre-rendered, and the
+    // insertion effect already fired.
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(<span prop={2} />);
+  });
+
+  // @gate enableActivity
+  it('warns if you pass a hidden prop', async () => {
+    function App() {
+      return (
+        // eslint-disable-next-line react/jsx-boolean-value
+        <Activity hidden>
+          <div />
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App show={true} step={1} />);
+    });
+    assertConsoleErrorDev([
+      '<Activity> doesn\'t accept a hidden prop. Use mode="hidden" instead.\n' +
+        '- <Activity hidden>\n' +
+        '+ <Activity mode="hidden">\n' +
+        '    in Activity (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ActivityErrorHandling-test.js b/packages/react-reconciler/src/__tests__/ActivityErrorHandling-test.js
new file mode 100644
index 00000000000..ac6d1f9b88b
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ActivityErrorHandling-test.js
@@ -0,0 +1,99 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Activity;
+let useState;
+let assertLog;
+
+describe('Activity error handling', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Activity = React.Activity;
+    useState = React.useState;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  // @gate enableActivity
+  it(
+    'errors inside a hidden Activity do not escape in the visible part ' +
+      'of the UI',
+    async () => {
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          return {error};
+        }
+        render() {
+          if (this.state.error) {
+            return (
+              <Text text={`Caught an error: ${this.state.error.message}`} />
+            );
+          }
+          return this.props.children;
+        }
+      }
+
+      function Throws() {
+        throw new Error('Oops!');
+      }
+
+      let setShowMore;
+      function App({content, more}) {
+        const [showMore, _setShowMore] = useState(false);
+        setShowMore = _setShowMore;
+        return (
+          <>
+            <div>{content}</div>
+            <div>
+              <ErrorBoundary>
+                <Activity mode={showMore ? 'visible' : 'hidden'}>
+                  {more}
+                </Activity>
+              </ErrorBoundary>
+            </div>
+          </>
+        );
+      }
+
+      await act(() =>
+        ReactNoop.render(
+          <App content={<Text text="Visible" />} more={<Throws />} />,
+        ),
+      );
+
+      // Initial render. An error is thrown when prerendering the hidden
+      // Activity boundary, but since it's hidden, the UI doesn't observe it.
+      assertLog(['Visible']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div>Visible</div>
+          <div />
+        </>,
+      );
+
+      // Once the Activity boundary is revealed, the error is thrown and
+      // captured by the outer ErrorBoundary.
+      await act(() => setShowMore(true));
+      assertLog(['Caught an error: Oops!', 'Caught an error: Oops!']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div>Visible</div>
+          <div>Caught an error: Oops!</div>
+        </>,
+      );
+    },
+  );
+});
diff --git a/packages/react-reconciler/src/__tests__/ActivityLegacySuspense-test.js b/packages/react-reconciler/src/__tests__/ActivityLegacySuspense-test.js
new file mode 100644
index 00000000000..a4ec2298174
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ActivityLegacySuspense-test.js
@@ -0,0 +1,603 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let LegacyHidden;
+let Activity;
+let Suspense;
+let useState;
+let useEffect;
+let startTransition;
+let textCache;
+let waitFor;
+let waitForPaint;
+let assertLog;
+
+describe('Activity Suspense', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    LegacyHidden = React.unstable_LegacyHidden;
+    Activity = React.Activity;
+    Suspense = React.Suspense;
+    useState = React.useState;
+    useEffect = React.useEffect;
+    startTransition = React.startTransition;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  // @gate enableActivity
+  it('basic example of suspending inside hidden tree', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text="Visible" />
+          </span>
+          <Activity mode="hidden">
+            <span>
+              <AsyncText text="Hidden" />
+            </span>
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    // The hidden tree hasn't finished loading, but we should still be able to
+    // show the surrounding contents. The outer Suspense boundary
+    // isn't affected.
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Visible', 'Suspend! [Hidden]']);
+    expect(root).toMatchRenderedOutput(<span>Visible</span>);
+
+    // When the data resolves, we should be able to finish prerendering
+    // the hidden tree.
+    await act(async () => {
+      await resolveText('Hidden');
+    });
+    assertLog(['Hidden']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Visible</span>
+        <span hidden={true}>Hidden</span>
+      </>,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  test('LegacyHidden does not handle suspense', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text="Visible" />
+          </span>
+          <LegacyHidden mode="hidden">
+            <span>
+              <AsyncText text="Hidden" />
+            </span>
+          </LegacyHidden>
+        </Suspense>
+      );
+    }
+
+    // Unlike Activity, LegacyHidden never captures if something suspends
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Visible', 'Suspend! [Hidden]', 'Loading...']);
+    // Nearest Suspense boundary switches to a fallback even though the
+    // suspended content is hidden.
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>Visible</span>
+        Loading...
+      </>,
+    );
+  });
+
+  // @gate __DEV__ && enableActivity
+  test('Regression: Suspending on hide should not infinite loop.', async () => {
+    // This regression only repros in public act.
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+    const root = ReactNoop.createRoot();
+
+    let setMode;
+    function Container({text}) {
+      const [mode, _setMode] = React.useState('visible');
+      setMode = _setMode;
+      useEffect(() => {
+        return () => {
+          Scheduler.log(`Clear [${text}]`);
+          textCache.delete(text);
+        };
+      });
+      return (
+        //$FlowFixMe
+        <Suspense fallback="Loading">
+          <Activity mode={mode}>
+            <AsyncText text={text} />
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    await React.act(() => {
+      root.render(<Container text="hello" />);
+    });
+    assertLog([
+      'Suspend! [hello]',
+      // pre-warming
+      'Suspend! [hello]',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading');
+
+    await React.act(async () => {
+      await resolveText('hello');
+    });
+    assertLog(['hello']);
+    expect(root).toMatchRenderedOutput('hello');
+
+    await React.act(async () => {
+      setMode('hidden');
+    });
+    assertLog(['Clear [hello]', 'Suspend! [hello]']);
+    expect(root).toMatchRenderedOutput('');
+  });
+
+  // @gate enableActivity
+  test("suspending inside currently hidden tree that's switching to visible", async () => {
+    const root = ReactNoop.createRoot();
+
+    function Details({open, children}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text={open ? 'Open' : 'Closed'} />
+          </span>
+          <Activity mode={open ? 'visible' : 'hidden'}>
+            <span>{children}</span>
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    // The hidden tree hasn't finished loading, but we should still be able to
+    // show the surrounding contents. It doesn't matter that there's no
+    // Suspense boundary because the unfinished content isn't visible.
+    await act(() => {
+      root.render(
+        <Details open={false}>
+          <AsyncText text="Async" />
+        </Details>,
+      );
+    });
+    assertLog(['Closed', 'Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(<span>Closed</span>);
+
+    // But when we switch the boundary from hidden to visible, it should
+    // now bubble to the nearest Suspense boundary.
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Details open={true}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    assertLog(['Open', 'Suspend! [Async]', 'Loading...']);
+    // It should suspend with delay to prevent the already-visible Suspense
+    // boundary from switching to a fallback
+    expect(root).toMatchRenderedOutput(<span>Closed</span>);
+
+    // Resolve the data and finish rendering
+    await act(async () => {
+      await resolveText('Async');
+    });
+    assertLog(['Open', 'Async']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>Async</span>
+      </>,
+    );
+  });
+
+  // @gate enableActivity
+  test("suspending inside currently visible tree that's switching to hidden", async () => {
+    const root = ReactNoop.createRoot();
+
+    function Details({open, children}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text={open ? 'Open' : 'Closed'} />
+          </span>
+          <Activity mode={open ? 'visible' : 'hidden'}>
+            <span>{children}</span>
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    // Initial mount. Nothing suspends
+    await act(() => {
+      root.render(
+        <Details open={true}>
+          <Text text="(empty)" />
+        </Details>,
+      );
+    });
+    assertLog(['Open', '(empty)']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>(empty)</span>
+      </>,
+    );
+
+    // Update that suspends inside the currently visible tree
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Details open={true}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    assertLog(['Open', 'Suspend! [Async]', 'Loading...']);
+    // It should suspend with delay to prevent the already-visible Suspense
+    // boundary from switching to a fallback
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>(empty)</span>
+      </>,
+    );
+
+    // Update that hides the suspended tree
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Details open={false}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    // Now the visible part of the tree can commit without being blocked
+    // by the suspended content, which is hidden.
+    assertLog(['Closed', 'Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Closed</span>
+        <span hidden={true}>(empty)</span>
+      </>,
+    );
+
+    // Resolve the data and finish rendering
+    await act(async () => {
+      await resolveText('Async');
+    });
+    assertLog(['Async']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Closed</span>
+        <span hidden={true}>Async</span>
+      </>,
+    );
+  });
+
+  // @gate enableActivity
+  test('update that suspends inside hidden tree', async () => {
+    let setText;
+    function Child() {
+      const [text, _setText] = useState('A');
+      setText = _setText;
+      return <AsyncText text={text} />;
+    }
+
+    function App({show}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          <span>
+            <Child />
+          </span>
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A');
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['A']);
+
+    await act(() => {
+      startTransition(() => {
+        setText('B');
+      });
+    });
+  });
+
+  // @gate enableActivity
+  test('updates at multiple priorities that suspend inside hidden tree', async () => {
+    let setText;
+    let setStep;
+    function Child() {
+      const [text, _setText] = useState('A');
+      setText = _setText;
+
+      const [step, _setStep] = useState(0);
+      setStep = _setStep;
+
+      return <AsyncText text={text + step} />;
+    }
+
+    function App({show}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          <span>
+            <Child />
+          </span>
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A0');
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['A0']);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>A0</span>);
+
+    await act(() => {
+      React.startTransition(() => {
+        setStep(1);
+      });
+      ReactNoop.flushSync(() => {
+        setText('B');
+      });
+    });
+    assertLog([
+      // The high priority render suspends again
+      'Suspend! [B0]',
+      // There's still pending work in another lane, so we should attempt
+      // that, too.
+      'Suspend! [B1]',
+    ]);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>A0</span>);
+
+    // Resolve the data and finish rendering
+    await act(() => {
+      resolveText('B1');
+    });
+    assertLog(['B1']);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>B1</span>);
+  });
+
+  // @gate enableActivity
+  test('detect updates to a hidden tree during a concurrent event', async () => {
+    // This is a pretty complex test case. It relates to how we detect if an
+    // update is made to a hidden tree: when scheduling the update, we walk up
+    // the fiber return path to see if any of the parents is a hidden Activity
+    // component. This doesn't work if there's already a render in progress,
+    // because the tree might be about to flip to hidden. To avoid a data race,
+    // queue updates atomically: wait to queue the update until after the
+    // current render has finished.
+
+    let setInner;
+    function Child({outer}) {
+      const [inner, _setInner] = useState(0);
+      setInner = _setInner;
+
+      useEffect(() => {
+        // Inner and outer values are always updated simultaneously, so they
+        // should always be consistent.
+        if (inner !== outer) {
+          Scheduler.log('Tearing! Inner and outer are inconsistent!');
+        } else {
+          Scheduler.log('Inner and outer are consistent');
+        }
+      }, [inner, outer]);
+
+      return <Text text={'Inner: ' + inner} />;
+    }
+
+    let setOuter;
+    function App({show}) {
+      const [outer, _setOuter] = useState(0);
+      setOuter = _setOuter;
+      return (
+        <>
+          <Activity mode={show ? 'visible' : 'hidden'}>
+            <span>
+              <Child outer={outer} />
+            </span>
+          </Activity>
+          <span>
+            <Text text={'Outer: ' + outer} />
+          </span>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <span>
+              <Text text={'Sibling: ' + outer} />
+            </span>
+          </Suspense>
+        </>
+      );
+    }
+
+    // Render a hidden tree
+    const root = ReactNoop.createRoot();
+    resolveText('Async: 0');
+    await act(() => {
+      root.render(<App show={true} />);
+    });
+    assertLog([
+      'Inner: 0',
+      'Outer: 0',
+      'Sibling: 0',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Inner: 0</span>
+        <span>Outer: 0</span>
+        <span>Sibling: 0</span>
+      </>,
+    );
+
+    await act(async () => {
+      // Update a value both inside and outside the hidden tree. These values
+      // must always be consistent.
+      startTransition(() => {
+        setOuter(1);
+        setInner(1);
+        // In the same render, also hide the offscreen tree.
+        root.render(<App show={false} />);
+      });
+
+      await waitFor([
+        // The outer update will commit, but the inner update is deferred until
+        // a later render.
+        'Outer: 1',
+      ]);
+
+      // Assert that we haven't committed quite yet
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Inner: 0</span>
+          <span>Outer: 0</span>
+          <span>Sibling: 0</span>
+        </>,
+      );
+
+      // Before the tree commits, schedule a concurrent event. The inner update
+      // is to a tree that's just about to be hidden.
+      startTransition(() => {
+        setOuter(2);
+        setInner(2);
+      });
+
+      // Finish rendering and commit the in-progress render.
+      await waitForPaint(['Sibling: 1']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true}>Inner: 0</span>
+          <span>Outer: 1</span>
+          <span>Sibling: 1</span>
+        </>,
+      );
+
+      // Now reveal the hidden tree at high priority.
+      ReactNoop.flushSync(() => {
+        root.render(<App show={true} />);
+      });
+      assertLog([
+        // There are two pending updates on Inner, but only the first one
+        // is processed, even though they share the same lane. If the second
+        // update were erroneously processed, then Inner would be inconsistent
+        // with Outer.
+        'Inner: 1',
+        'Outer: 1',
+        'Sibling: 1',
+        'Inner and outer are consistent',
+      ]);
+    });
+    assertLog([
+      'Inner: 2',
+      'Outer: 2',
+      'Sibling: 2',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Inner: 2</span>
+        <span>Outer: 2</span>
+        <span>Sibling: 2</span>
+      </>,
+    );
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ActivityReactServer-test.js b/packages/react-reconciler/src/__tests__/ActivityReactServer-test.js
new file mode 100644
index 00000000000..93f4e5683b6
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ActivityReactServer-test.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let Activity;
+let React;
+let ReactServer;
+let ReactNoop;
+let ReactNoopFlightClient;
+let ReactNoopFlightServer;
+
+describe('ActivityReactServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    Activity = ReactServer.Activity;
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+
+    jest.resetModules();
+    __unmockReact();
+    React = require('react');
+    ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    ReactNoop = require('react-noop-renderer');
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('can be rendered in React Server', async () => {
+    function App() {
+      return ReactServer.createElement(
+        Activity,
+        {mode: 'hidden'},
+        ReactServer.createElement('div', null, 'Hello, Dave!'),
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      ReactServer.createElement(App, null),
+    );
+
+    await act(async () => {
+      const app = await ReactNoopFlightClient.read(transport);
+
+      ReactNoop.render(app);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div hidden={true}>Hello, Dave!</div>,
+    );
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js b/packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js
new file mode 100644
index 00000000000..f8f7fca0e09
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js
@@ -0,0 +1,233 @@
+let React;
+let Activity;
+let ReactNoop;
+let act;
+let log;
+
+describe('Activity StrictMode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    log = [];
+
+    React = require('react');
+    Activity = React.Activity;
+    ReactNoop = require('react-noop-renderer');
+    act = require('internal-test-utils').act;
+  });
+
+  function Component({label}) {
+    React.useEffect(() => {
+      log.push(`${label}: useEffect mount`);
+      return () => log.push(`${label}: useEffect unmount`);
+    });
+
+    React.useLayoutEffect(() => {
+      log.push(`${label}: useLayoutEffect mount`);
+      return () => log.push(`${label}: useLayoutEffect unmount`);
+    });
+
+    log.push(`${label}: render`);
+
+    return <span>label</span>;
+  }
+
+  // @gate __DEV__ && enableActivity
+  it('should trigger strict effects when offscreen is visible', async () => {
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Activity mode="visible">
+            <Component label="A" />
+          </Activity>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'A: render',
+      'A: render',
+      'A: useLayoutEffect mount',
+      'A: useEffect mount',
+      'A: useLayoutEffect unmount',
+      'A: useEffect unmount',
+      'A: useLayoutEffect mount',
+      'A: useEffect mount',
+    ]);
+  });
+
+  // @gate __DEV__ && enableActivity
+  it('should not trigger strict effects when offscreen is hidden', async () => {
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Activity mode="hidden">
+            <Component label="A" />
+          </Activity>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['A: render', 'A: render']);
+
+    log = [];
+
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Activity mode="hidden">
+            <Component label="A" />
+            <Component label="B" />
+          </Activity>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['A: render', 'A: render', 'B: render', 'B: render']);
+
+    log = [];
+
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Activity mode="visible">
+            <Component label="A" />
+          </Activity>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'A: render',
+      'A: render',
+      'A: useLayoutEffect mount',
+      'A: useEffect mount',
+      'A: useLayoutEffect unmount',
+      'A: useEffect unmount',
+      'A: useLayoutEffect mount',
+      'A: useEffect mount',
+    ]);
+
+    log = [];
+
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Activity mode="hidden">
+            <Component label="A" />
+          </Activity>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'A: useLayoutEffect unmount',
+      'A: useEffect unmount',
+      'A: render',
+      'A: render',
+    ]);
+  });
+
+  it('should not cause infinite render loop when StrictMode is used with Suspense and synchronous set states', async () => {
+    // This is a regression test, see https://github.com/facebook/react/pull/25179 for more details.
+    function App() {
+      const [state, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        setState(true);
+      }, []);
+
+      React.useEffect(() => {
+        // Empty useEffect with empty dependency array is needed to trigger infinite render loop.
+      }, []);
+
+      return state;
+    }
+
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <React.Suspense>
+            <App />
+          </React.Suspense>
+        </React.StrictMode>,
+      );
+    });
+  });
+
+  // @gate __DEV__ && enableActivity
+  it('should double invoke effects on unsuspended child', async () => {
+    let shouldSuspend = true;
+    let resolve;
+    const suspensePromise = new Promise(_resolve => {
+      resolve = _resolve;
+    });
+
+    function Parent() {
+      log.push('Parent rendered');
+      React.useEffect(() => {
+        log.push('Parent mount');
+        return () => {
+          log.push('Parent unmount');
+        };
+      });
+
+      return (
+        <React.Suspense fallback="fallback">
+          <Child />
+        </React.Suspense>
+      );
+    }
+
+    function Child() {
+      log.push('Child rendered');
+      React.useEffect(() => {
+        log.push('Child mount');
+        return () => {
+          log.push('Child unmount');
+        };
+      });
+      if (shouldSuspend) {
+        log.push('Child suspended');
+        throw suspensePromise;
+      }
+      return null;
+    }
+
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Activity mode="visible">
+            <Parent />
+          </Activity>
+        </React.StrictMode>,
+      );
+    });
+
+    log.push('------------------------------');
+
+    await act(() => {
+      resolve();
+      shouldSuspend = false;
+    });
+
+    expect(log).toEqual([
+      'Parent rendered',
+      'Parent rendered',
+      'Child rendered',
+      'Child suspended',
+      'Parent mount',
+      'Parent unmount',
+      'Parent mount',
+      // pre-warming
+      'Child rendered',
+      'Child suspended',
+      // end pre-warming
+      '------------------------------',
+      'Child rendered',
+      'Child rendered',
+      'Child mount',
+      'Child unmount',
+      'Child mount',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js b/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js
new file mode 100644
index 00000000000..90fdf21a428
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js
@@ -0,0 +1,615 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let LegacyHidden;
+let Activity;
+let Suspense;
+let useState;
+let useEffect;
+let startTransition;
+let textCache;
+let waitFor;
+let waitForPaint;
+let assertLog;
+let use;
+
+describe('Activity Suspense', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    LegacyHidden = React.unstable_LegacyHidden;
+    Activity = React.Activity;
+    Suspense = React.Suspense;
+    useState = React.useState;
+    useEffect = React.useEffect;
+    startTransition = React.startTransition;
+    use = React.use;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const resolve = record.resolve;
+      record.status = 'resolved';
+      record.value = text;
+      resolve();
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          return use(record.value);
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      let resolve;
+      const promise = new Promise(_resolve => {
+        resolve = _resolve;
+      });
+
+      const newRecord = {
+        status: 'pending',
+        value: promise,
+        resolve,
+      };
+      textCache.set(text, newRecord);
+
+      return use(promise);
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  // @gate enableActivity
+  it('basic example of suspending inside hidden tree', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text="Visible" />
+          </span>
+          <Activity mode="hidden">
+            <span>
+              <AsyncText text="Hidden" />
+            </span>
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    // The hidden tree hasn't finished loading, but we should still be able to
+    // show the surrounding contents. The outer Suspense boundary
+    // isn't affected.
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Visible', 'Suspend! [Hidden]']);
+    expect(root).toMatchRenderedOutput(<span>Visible</span>);
+
+    // When the data resolves, we should be able to finish prerendering
+    // the hidden tree.
+    await act(async () => {
+      await resolveText('Hidden');
+    });
+    assertLog(['Hidden']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Visible</span>
+        <span hidden={true}>Hidden</span>
+      </>,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  test('LegacyHidden does not handle suspense', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text="Visible" />
+          </span>
+          <LegacyHidden mode="hidden">
+            <span>
+              <AsyncText text="Hidden" />
+            </span>
+          </LegacyHidden>
+        </Suspense>
+      );
+    }
+
+    // Unlike Activity, LegacyHidden never captures if something suspends
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Visible', 'Suspend! [Hidden]', 'Loading...']);
+    // Nearest Suspense boundary switches to a fallback even though the
+    // suspended content is hidden.
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>Visible</span>
+        Loading...
+      </>,
+    );
+  });
+
+  // @gate __DEV__ && enableActivity
+  test('Regression: Suspending on hide should not infinite loop.', async () => {
+    // This regression only repros in public act.
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+    const root = ReactNoop.createRoot();
+
+    let setMode;
+    function Container({text}) {
+      const [mode, _setMode] = React.useState('visible');
+      setMode = _setMode;
+      useEffect(() => {
+        return () => {
+          Scheduler.log(`Clear [${text}]`);
+          textCache.delete(text);
+        };
+      });
+      return (
+        //$FlowFixMe
+        <Suspense fallback="Loading">
+          <Activity mode={mode}>
+            <AsyncText text={text} />
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    await React.act(() => {
+      root.render(<Container text="hello" />);
+    });
+    assertLog([
+      'Suspend! [hello]',
+      // pre-warming
+      'Suspend! [hello]',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading');
+
+    await React.act(async () => {
+      await resolveText('hello');
+    });
+    assertLog(['hello']);
+    expect(root).toMatchRenderedOutput('hello');
+
+    await React.act(() => {
+      setMode('hidden');
+    });
+    assertLog(['Clear [hello]', 'Suspend! [hello]']);
+    expect(root).toMatchRenderedOutput('');
+  });
+
+  // @gate enableActivity
+  test("suspending inside currently hidden tree that's switching to visible", async () => {
+    const root = ReactNoop.createRoot();
+
+    function Details({open, children}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text={open ? 'Open' : 'Closed'} />
+          </span>
+          <Activity mode={open ? 'visible' : 'hidden'}>
+            <span>{children}</span>
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    // The hidden tree hasn't finished loading, but we should still be able to
+    // show the surrounding contents. It doesn't matter that there's no
+    // Suspense boundary because the unfinished content isn't visible.
+    await act(() => {
+      root.render(
+        <Details open={false}>
+          <AsyncText text="Async" />
+        </Details>,
+      );
+    });
+    assertLog(['Closed', 'Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(<span>Closed</span>);
+
+    // But when we switch the boundary from hidden to visible, it should
+    // now bubble to the nearest Suspense boundary.
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Details open={true}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    assertLog([
+      'Open',
+      'Suspend! [Async]',
+      // pre-warming
+      'Loading...',
+    ]);
+    // It should suspend with delay to prevent the already-visible Suspense
+    // boundary from switching to a fallback
+    expect(root).toMatchRenderedOutput(<span>Closed</span>);
+
+    // Resolve the data and finish rendering
+    await act(async () => {
+      await resolveText('Async');
+    });
+    assertLog([
+      // pre-warming
+      'Open',
+      // end pre-warming
+      'Async',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>Async</span>
+      </>,
+    );
+  });
+
+  // @gate enableActivity
+  test("suspending inside currently visible tree that's switching to hidden", async () => {
+    const root = ReactNoop.createRoot();
+
+    function Details({open, children}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <span>
+            <Text text={open ? 'Open' : 'Closed'} />
+          </span>
+          <Activity mode={open ? 'visible' : 'hidden'}>
+            <span>{children}</span>
+          </Activity>
+        </Suspense>
+      );
+    }
+
+    // Initial mount. Nothing suspends
+    await act(() => {
+      root.render(
+        <Details open={true}>
+          <Text text="(empty)" />
+        </Details>,
+      );
+    });
+    assertLog(['Open', '(empty)']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>(empty)</span>
+      </>,
+    );
+
+    // Update that suspends inside the currently visible tree
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Details open={true}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    assertLog([
+      'Open',
+      'Suspend! [Async]',
+      // pre-warming
+      'Loading...',
+    ]);
+    // It should suspend with delay to prevent the already-visible Suspense
+    // boundary from switching to a fallback
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>(empty)</span>
+      </>,
+    );
+
+    // Update that hides the suspended tree
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Details open={false}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    // Now the visible part of the tree can commit without being blocked
+    // by the suspended content, which is hidden.
+    assertLog(['Closed', 'Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Closed</span>
+        <span hidden={true}>(empty)</span>
+      </>,
+    );
+
+    // Resolve the data and finish rendering
+    await act(async () => {
+      await resolveText('Async');
+    });
+    assertLog(['Async']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Closed</span>
+        <span hidden={true}>Async</span>
+      </>,
+    );
+  });
+
+  // @gate enableActivity
+  test('update that suspends inside hidden tree', async () => {
+    let setText;
+    function Child() {
+      const [text, _setText] = useState('A');
+      setText = _setText;
+      return <AsyncText text={text} />;
+    }
+
+    function App({show}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          <span>
+            <Child />
+          </span>
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A');
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['A']);
+
+    await act(() => {
+      startTransition(() => {
+        setText('B');
+      });
+    });
+  });
+
+  // @gate enableActivity
+  test('updates at multiple priorities that suspend inside hidden tree', async () => {
+    let setText;
+    let setStep;
+    function Child() {
+      const [text, _setText] = useState('A');
+      setText = _setText;
+
+      const [step, _setStep] = useState(0);
+      setStep = _setStep;
+
+      return <AsyncText text={text + step} />;
+    }
+
+    function App({show}) {
+      return (
+        <Activity mode={show ? 'visible' : 'hidden'}>
+          <span>
+            <Child />
+          </span>
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A0');
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['A0']);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>A0</span>);
+
+    await act(() => {
+      React.startTransition(() => {
+        setStep(1);
+      });
+      ReactNoop.flushSync(() => {
+        setText('B');
+      });
+    });
+    assertLog([
+      // The high priority render suspends again
+      'Suspend! [B0]',
+      // There's still pending work in another lane, so we should attempt
+      // that, too.
+      'Suspend! [B1]',
+    ]);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>A0</span>);
+
+    // Resolve the data and finish rendering
+    await act(() => {
+      resolveText('B1');
+    });
+    assertLog(['B1']);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>B1</span>);
+  });
+
+  // @gate enableActivity
+  test('detect updates to a hidden tree during a concurrent event', async () => {
+    // This is a pretty complex test case. It relates to how we detect if an
+    // update is made to a hidden tree: when scheduling the update, we walk up
+    // the fiber return path to see if any of the parents is a hidden Activity
+    // component. This doesn't work if there's already a render in progress,
+    // because the tree might be about to flip to hidden. To avoid a data race,
+    // queue updates atomically: wait to queue the update until after the
+    // current render has finished.
+
+    let setInner;
+    function Child({outer}) {
+      const [inner, _setInner] = useState(0);
+      setInner = _setInner;
+
+      useEffect(() => {
+        // Inner and outer values are always updated simultaneously, so they
+        // should always be consistent.
+        if (inner !== outer) {
+          Scheduler.log('Tearing! Inner and outer are inconsistent!');
+        } else {
+          Scheduler.log('Inner and outer are consistent');
+        }
+      }, [inner, outer]);
+
+      return <Text text={'Inner: ' + inner} />;
+    }
+
+    let setOuter;
+    function App({show}) {
+      const [outer, _setOuter] = useState(0);
+      setOuter = _setOuter;
+      return (
+        <>
+          <Activity mode={show ? 'visible' : 'hidden'}>
+            <span>
+              <Child outer={outer} />
+            </span>
+          </Activity>
+          <span>
+            <Text text={'Outer: ' + outer} />
+          </span>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <span>
+              <Text text={'Sibling: ' + outer} />
+            </span>
+          </Suspense>
+        </>
+      );
+    }
+
+    // Render a hidden tree
+    const root = ReactNoop.createRoot();
+    resolveText('Async: 0');
+    await act(() => {
+      root.render(<App show={true} />);
+    });
+    assertLog([
+      'Inner: 0',
+      'Outer: 0',
+      'Sibling: 0',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Inner: 0</span>
+        <span>Outer: 0</span>
+        <span>Sibling: 0</span>
+      </>,
+    );
+
+    await act(async () => {
+      // Update a value both inside and outside the hidden tree. These values
+      // must always be consistent.
+      startTransition(() => {
+        setOuter(1);
+        setInner(1);
+        // In the same render, also hide the offscreen tree.
+        root.render(<App show={false} />);
+      });
+
+      await waitFor([
+        // The outer update will commit, but the inner update is deferred until
+        // a later render.
+        'Outer: 1',
+      ]);
+
+      // Assert that we haven't committed quite yet
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Inner: 0</span>
+          <span>Outer: 0</span>
+          <span>Sibling: 0</span>
+        </>,
+      );
+
+      // Before the tree commits, schedule a concurrent event. The inner update
+      // is to a tree that's just about to be hidden.
+      startTransition(() => {
+        setOuter(2);
+        setInner(2);
+      });
+
+      // Finish rendering and commit the in-progress render.
+      await waitForPaint(['Sibling: 1']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true}>Inner: 0</span>
+          <span>Outer: 1</span>
+          <span>Sibling: 1</span>
+        </>,
+      );
+
+      // Now reveal the hidden tree at high priority.
+      ReactNoop.flushSync(() => {
+        root.render(<App show={true} />);
+      });
+      assertLog([
+        // There are two pending updates on Inner, but only the first one
+        // is processed, even though they share the same lane. If the second
+        // update were erroneously processed, then Inner would be inconsistent
+        // with Outer.
+        'Inner: 1',
+        'Outer: 1',
+        'Sibling: 1',
+        'Inner and outer are consistent',
+      ]);
+    });
+    assertLog([
+      'Inner: 2',
+      'Outer: 2',
+      'Sibling: 2',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Inner: 2</span>
+        <span>Outer: 2</span>
+        <span>Sibling: 2</span>
+      </>,
+    );
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js b/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js
new file mode 100644
index 00000000000..869cc308a98
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js
@@ -0,0 +1,84 @@
+describe('ErrorBoundaryReconciliation', () => {
+  let BrokenRender;
+  let DidCatchErrorBoundary;
+  let GetDerivedErrorBoundary;
+  let React;
+  let ReactTestRenderer;
+  let span;
+  let act;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactTestRenderer = require('react-test-renderer');
+    React = require('react');
+    act = require('internal-test-utils').act;
+    DidCatchErrorBoundary = class extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        return this.state.error
+          ? React.createElement(this.props.fallbackTagName, {
+              prop: 'ErrorBoundary',
+            })
+          : this.props.children;
+      }
+    };
+
+    GetDerivedErrorBoundary = class extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        return this.state.error
+          ? React.createElement(this.props.fallbackTagName, {
+              prop: 'ErrorBoundary',
+            })
+          : this.props.children;
+      }
+    };
+
+    const InvalidType = undefined;
+    BrokenRender = ({fail}) =>
+      fail ? <InvalidType /> : <span prop="BrokenRender" />;
+  });
+
+  async function sharedTest(ErrorBoundary, fallbackTagName) {
+    let renderer;
+
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <ErrorBoundary fallbackTagName={fallbackTagName}>
+          <BrokenRender fail={false} />
+        </ErrorBoundary>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(renderer).toMatchRenderedOutput(<span prop="BrokenRender" />);
+    await act(() => {
+      renderer.update(
+        <ErrorBoundary fallbackTagName={fallbackTagName}>
+          <BrokenRender fail={true} />
+        </ErrorBoundary>,
+      );
+    });
+
+    const Fallback = fallbackTagName;
+    expect(renderer).toMatchRenderedOutput(<Fallback prop="ErrorBoundary" />);
+  }
+
+  it('componentDidCatch can recover by rendering an element of the same type', () =>
+    sharedTest(DidCatchErrorBoundary, 'span'));
+
+  it('componentDidCatch can recover by rendering an element of a different type', () =>
+    sharedTest(DidCatchErrorBoundary, 'div'));
+
+  it('getDerivedStateFromError can recover by rendering an element of the same type', () =>
+    sharedTest(GetDerivedErrorBoundary, 'span'));
+
+  it('getDerivedStateFromError can recover by rendering an element of a different type', () =>
+    sharedTest(GetDerivedErrorBoundary, 'div'));
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
new file mode 100644
index 00000000000..017238e3f95
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
@@ -0,0 +1,458 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+let React;
+let Scheduler;
+let waitForAll;
+let assertLog;
+let ReactNoop;
+let useState;
+let act;
+let Suspense;
+let startTransition;
+let getCacheForType;
+let caches;
+let assertConsoleErrorDev;
+
+// These tests are mostly concerned with concurrent roots. The legacy root
+// behavior is covered by other older test suites and is unchanged from
+// React 17.
+describe('act warnings', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Scheduler = require('scheduler');
+    ReactNoop = require('react-noop-renderer');
+    act = React.act;
+    useState = React.useState;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    getCacheForType = React.unstable_getCacheForType;
+    caches = [];
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  function createTextCache() {
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  function resolveText(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  async function withActEnvironment(value, scope) {
+    const prevValue = global.IS_REACT_ACT_ENVIRONMENT;
+    global.IS_REACT_ACT_ENVIRONMENT = value;
+    try {
+      return await scope();
+    } finally {
+      global.IS_REACT_ACT_ENVIRONMENT = prevValue;
+    }
+  }
+
+  it('warns about unwrapped updates only if environment flag is enabled', async () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    await waitForAll([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Default behavior. Flag is undefined. No warning.
+    expect(global.IS_REACT_ACT_ENVIRONMENT).toBe(undefined);
+    setState(1);
+    await waitForAll([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Flag is true. Warn.
+    await withActEnvironment(true, async () => {
+      setState(2);
+      assertConsoleErrorDev([
+        'An update to App 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' +
+          '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://react.dev/link/wrap-tests-with-act\n' +
+          '    in App (at **)',
+      ]);
+      await waitForAll([2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+
+    // Flag is false. No warning.
+    await withActEnvironment(false, async () => {
+      setState(3);
+      await waitForAll([3]);
+      expect(root).toMatchRenderedOutput('3');
+    });
+  });
+
+  // @gate __DEV__
+  it('act warns if the environment flag is not enabled', async () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    await waitForAll([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Default behavior. Flag is undefined. Warn.
+    expect(global.IS_REACT_ACT_ENVIRONMENT).toBe(undefined);
+    act(() => {
+      setState(1);
+    });
+    assertConsoleErrorDev(
+      ['The current testing environment is not configured to support act(...)'],
+      {withoutStack: true},
+    );
+    assertLog([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Flag is true. Don't warn.
+    await withActEnvironment(true, () => {
+      act(() => {
+        setState(2);
+      });
+      assertLog([2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+
+    // Flag is false. Warn.
+    await withActEnvironment(false, () => {
+      act(() => {
+        setState(1);
+      });
+      assertConsoleErrorDev(
+        [
+          'The current testing environment is not configured to support act(...)',
+        ],
+        {withoutStack: true},
+      );
+      assertLog([1]);
+      expect(root).toMatchRenderedOutput('1');
+    });
+  });
+
+  it('warns if root update is not wrapped', async () => {
+    await withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      root.render('Hi');
+      assertConsoleErrorDev(
+        [
+          // TODO: Better error message that doesn't make it look like "Root" is
+          // the name of a custom component
+          'An update to Root 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' +
+            '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://react.dev/link/wrap-tests-with-act',
+        ],
+        {withoutStack: true},
+      );
+    });
+  });
+
+  // @gate __DEV__
+  it('warns if class update is not wrapped', async () => {
+    let app;
+    class App extends React.Component {
+      state = {count: 0};
+      render() {
+        app = this;
+        return <Text text={this.state.count} />;
+      }
+    }
+
+    await withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App />);
+      });
+      app.setState({count: 1});
+      assertConsoleErrorDev([
+        'An update to App 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' +
+          '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://react.dev/link/wrap-tests-with-act\n' +
+          '    in App (at **)',
+      ]);
+    });
+  });
+
+  // @gate __DEV__
+  it('warns even if update is synchronous', async () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    await withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => root.render(<App />));
+      assertLog([0]);
+      expect(root).toMatchRenderedOutput('0');
+
+      // Even though this update is synchronous, we should still fire a warning,
+      // because it could have spawned additional asynchronous work
+      ReactNoop.flushSync(() => setState(1));
+      assertConsoleErrorDev([
+        'An update to App 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' +
+          '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://react.dev/link/wrap-tests-with-act\n' +
+          '    in App (at **)',
+      ]);
+
+      assertLog([1]);
+      expect(root).toMatchRenderedOutput('1');
+    });
+  });
+
+  // @gate __DEV__
+  // @gate enableLegacyCache
+  it('warns if Suspense retry is not wrapped', async () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Async" />
+        </Suspense>
+      );
+    }
+
+    await withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App />);
+      });
+      assertLog([
+        'Suspend! [Async]',
+        'Loading...',
+        // pre-warming
+        'Suspend! [Async]',
+      ]);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      // This is a retry, not a ping, because we already showed a fallback.
+      resolveText('Async');
+      assertConsoleErrorDev(
+        [
+          'A suspended resource finished loading inside a test, but the event was not wrapped in act(...).\n' +
+            '\n' +
+            'When testing, code that resolves suspended data should be wrapped into act(...):\n' +
+            '\n' +
+            'act(() => {\n' +
+            '  /* finish loading suspended data */\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://react.dev/link/wrap-tests-with-act',
+
+          // pre-warming
+
+          'A suspended resource finished loading inside a test, but the event was not wrapped in act(...).\n' +
+            '\n' +
+            'When testing, code that resolves suspended data should be wrapped into act(...):\n' +
+            '\n' +
+            'act(() => {\n' +
+            '  /* finish loading suspended data */\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://react.dev/link/wrap-tests-with-act',
+        ],
+
+        {withoutStack: true},
+      );
+    });
+  });
+
+  // @gate __DEV__
+  // @gate enableLegacyCache
+  it('warns if Suspense ping is not wrapped', async () => {
+    function App({showMore}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {showMore ? <AsyncText text="Async" /> : <Text text="(empty)" />}
+        </Suspense>
+      );
+    }
+
+    await withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App showMore={false} />);
+      });
+      assertLog(['(empty)']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      act(() => {
+        startTransition(() => {
+          root.render(<App showMore={true} />);
+        });
+      });
+      assertLog(['Suspend! [Async]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      // This is a ping, not a retry, because no fallback is showing.
+      resolveText('Async');
+      assertConsoleErrorDev(
+        [
+          'A suspended resource finished loading inside a test, but the event was not wrapped in act(...).\n' +
+            '\n' +
+            'When testing, code that resolves suspended data should be wrapped into act(...):\n' +
+            '\n' +
+            'act(() => {\n' +
+            '  /* finish loading suspended data */\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://react.dev/link/wrap-tests-with-act',
+        ],
+        {withoutStack: true},
+      );
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
new file mode 100644
index 00000000000..45d939fd13d
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
@@ -0,0 +1,1871 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let assertLog;
+let useTransition;
+let useState;
+let useOptimistic;
+let textCache;
+let assertConsoleErrorDev;
+
+describe('ReactAsyncActions', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    global.reportError = error => {
+      Scheduler.log('reportError: ' + error.message);
+    };
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    useTransition = React.useTransition;
+    useState = React.useState;
+    useOptimistic = React.useOptimistic;
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function getText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+      return thenable;
+    } else {
+      switch (record.status) {
+        case 'pending':
+          return record.value;
+        case 'rejected':
+          return Promise.reject(record.value);
+        case 'resolved':
+          return Promise.resolve(record.value);
+      }
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('isPending remains true until async action finishes', async () => {
+    let startTransition;
+    function App() {
+      const [isPending, _start] = useTransition();
+      startTransition = _start;
+      return <Text text={'Pending: ' + isPending} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Pending: false']);
+    expect(root).toMatchRenderedOutput('Pending: false');
+
+    // At the start of an async action, isPending is set to true.
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Async action started');
+        await getText('Wait');
+        Scheduler.log('Async action ended');
+      });
+    });
+    assertLog(['Async action started', 'Pending: true']);
+    expect(root).toMatchRenderedOutput('Pending: true');
+
+    // Once the action finishes, isPending is set back to false.
+    await act(() => resolveText('Wait'));
+    assertLog(['Async action ended', 'Pending: false']);
+    expect(root).toMatchRenderedOutput('Pending: false');
+  });
+
+  it('multiple updates in an async action scope are entangled together', async () => {
+    let startTransition;
+    function App({text}) {
+      const [isPending, _start] = useTransition();
+      startTransition = _start;
+      return (
+        <>
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+          <span>
+            <Text text={text} />
+          </span>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App text="A" />);
+    });
+    assertLog(['Pending: false', 'A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: false</span>
+        <span>A</span>
+      </>,
+    );
+
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Async action started');
+        await getText('Yield before updating');
+        Scheduler.log('Async action ended');
+        startTransition(() => root.render(<App text="B" />));
+      });
+    });
+    assertLog(['Async action started', 'Pending: true', 'A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A</span>
+      </>,
+    );
+
+    await act(() => resolveText('Yield before updating'));
+    assertLog(['Async action ended', 'Pending: false', 'B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: false</span>
+        <span>B</span>
+      </>,
+    );
+  });
+
+  it('multiple async action updates in the same scope are entangled together', async () => {
+    let setStepA;
+    function A() {
+      const [step, setStep] = useState(0);
+      setStepA = setStep;
+      return <AsyncText text={'A' + step} />;
+    }
+
+    let setStepB;
+    function B() {
+      const [step, setStep] = useState(0);
+      setStepB = setStep;
+      return <AsyncText text={'B' + step} />;
+    }
+
+    let setStepC;
+    function C() {
+      const [step, setStep] = useState(0);
+      setStepC = setStep;
+      return <AsyncText text={'C' + step} />;
+    }
+
+    let startTransition;
+    function App() {
+      const [isPending, _start] = useTransition();
+      startTransition = _start;
+      return (
+        <>
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+          <span>
+            <A />, <B />, <C />
+          </span>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A0');
+    resolveText('B0');
+    resolveText('C0');
+    await act(() => {
+      root.render(<App text="A" />);
+    });
+    assertLog(['Pending: false', 'A0', 'B0', 'C0']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: false</span>
+        <span>A0, B0, C0</span>
+      </>,
+    );
+
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Async action started');
+        setStepA(1);
+        await getText('Wait before updating B');
+        startTransition(() => setStepB(1));
+        await getText('Wait before updating C');
+        startTransition(() => setStepC(1));
+        Scheduler.log('Async action ended');
+      });
+    });
+    assertLog(['Async action started', 'Pending: true', 'A0', 'B0', 'C0']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B0, C0</span>
+      </>,
+    );
+
+    // This will schedule an update on B, but nothing will render yet because
+    // the async action scope hasn't finished.
+    await act(() => resolveText('Wait before updating B'));
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B0, C0</span>
+      </>,
+    );
+
+    // This will schedule an update on C, and also the async action scope
+    // will end. This will allow React to attempt to render the updates.
+    await act(() => resolveText('Wait before updating C'));
+    assertLog([
+      'Async action ended',
+      'Pending: false',
+      'Suspend! [A1]',
+      // pre-warming
+      'Suspend! [B1]',
+      'Suspend! [C1]',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B0, C0</span>
+      </>,
+    );
+
+    // Progressively load the all the data. Because they are all entangled
+    // together, only when the all of A, B, and C updates are unblocked is the
+    // render allowed to proceed.
+    await act(() => resolveText('A1'));
+    assertLog([
+      'Pending: false',
+      'A1',
+      'Suspend! [B1]',
+      // pre-warming
+      'Suspend! [C1]',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B0, C0</span>
+      </>,
+    );
+    await act(() => resolveText('B1'));
+    assertLog(['Pending: false', 'A1', 'B1', 'Suspend! [C1]']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B0, C0</span>
+      </>,
+    );
+
+    // Finally, all the data has loaded and the transition is complete.
+    await act(() => resolveText('C1'));
+    assertLog(['Pending: false', 'A1', 'B1', 'C1']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: false</span>
+        <span>A1, B1, C1</span>
+      </>,
+    );
+  });
+
+  it('urgent updates are not blocked during an async action', async () => {
+    let setStepA;
+    function A() {
+      const [step, setStep] = useState(0);
+      setStepA = setStep;
+      return <Text text={'A' + step} />;
+    }
+
+    let setStepB;
+    function B() {
+      const [step, setStep] = useState(0);
+      setStepB = setStep;
+      return <Text text={'B' + step} />;
+    }
+
+    let startTransition;
+    function App() {
+      const [isPending, _start] = useTransition();
+      startTransition = _start;
+      return (
+        <>
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+          <span>
+            <A />, <B />
+          </span>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App text="A" />);
+    });
+    assertLog(['Pending: false', 'A0', 'B0']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: false</span>
+        <span>A0, B0</span>
+      </>,
+    );
+
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Async action started');
+        startTransition(() => setStepA(1));
+        await getText('Wait');
+        Scheduler.log('Async action ended');
+      });
+    });
+    assertLog(['Async action started', 'Pending: true', 'A0', 'B0']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B0</span>
+      </>,
+    );
+
+    // Update B at urgent priority. This should be allowed to finish.
+    await act(() => setStepB(1));
+    assertLog(['B1']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: true</span>
+        <span>A0, B1</span>
+      </>,
+    );
+
+    // Finish the async action.
+    await act(() => resolveText('Wait'));
+    assertLog(['Async action ended', 'Pending: false', 'A1', 'B1']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Pending: false</span>
+        <span>A1, B1</span>
+      </>,
+    );
+  });
+
+  it("if a sync action throws, it's rethrown from the `useTransition`", async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let startTransition;
+    function App() {
+      const [isPending, _start] = useTransition();
+      startTransition = _start;
+      return <Text text={'Pending: ' + isPending} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>,
+      );
+    });
+    assertLog(['Pending: false']);
+    expect(root).toMatchRenderedOutput('Pending: false');
+
+    await act(() => {
+      startTransition(() => {
+        throw new Error('Oops!');
+      });
+    });
+    assertLog(['Pending: true', 'Oops!', 'Oops!']);
+    expect(root).toMatchRenderedOutput('Oops!');
+  });
+
+  it("if an async action throws, it's rethrown from the `useTransition`", async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let startTransition;
+    function App() {
+      const [isPending, _start] = useTransition();
+      startTransition = _start;
+      return <Text text={'Pending: ' + isPending} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>,
+      );
+    });
+    assertLog(['Pending: false']);
+    expect(root).toMatchRenderedOutput('Pending: false');
+
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Async action started');
+        await getText('Wait');
+        throw new Error('Oops!');
+      });
+    });
+    assertLog(['Async action started', 'Pending: true']);
+    expect(root).toMatchRenderedOutput('Pending: true');
+
+    await act(() => resolveText('Wait'));
+    assertLog(['Oops!', 'Oops!']);
+    expect(root).toMatchRenderedOutput('Oops!');
+  });
+
+  it('if there are multiple entangled actions, and one of them errors, it only affects that action', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let startTransitionA;
+    function ActionA() {
+      const [isPendingA, start] = useTransition();
+      startTransitionA = start;
+      return <Text text={'Pending A: ' + isPendingA} />;
+    }
+
+    let startTransitionB;
+    function ActionB() {
+      const [isPending, start] = useTransition();
+      startTransitionB = start;
+      return <Text text={'Pending B: ' + isPending} />;
+    }
+
+    let startTransitionC;
+    function ActionC() {
+      const [isPending, start] = useTransition();
+      startTransitionC = start;
+      return <Text text={'Pending C: ' + isPending} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <>
+          <div>
+            <ErrorBoundary>
+              <ActionA />
+            </ErrorBoundary>
+          </div>
+          <div>
+            <ErrorBoundary>
+              <ActionB />
+            </ErrorBoundary>
+          </div>
+          <div>
+            <ErrorBoundary>
+              <ActionC />
+            </ErrorBoundary>
+          </div>
+        </>,
+      );
+    });
+    assertLog(['Pending A: false', 'Pending B: false', 'Pending C: false']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending A: false</div>
+        <div>Pending B: false</div>
+        <div>Pending C: false</div>
+      </>,
+    );
+
+    // Start a bunch of entangled transitions. A and C throw errors, but B
+    // doesn't. A and should surface their respective errors, but B should
+    // finish successfully.
+    await act(() => {
+      startTransitionC(async () => {
+        startTransitionB(async () => {
+          startTransitionA(async () => {
+            await getText('Wait for A');
+            throw new Error('Oops A!');
+          });
+          await getText('Wait for B');
+        });
+        await getText('Wait for C');
+        throw new Error('Oops C!');
+      });
+    });
+    assertLog(['Pending A: true', 'Pending B: true', 'Pending C: true']);
+
+    // Finish action A. We can't commit the result yet because it's entangled
+    // with B and C.
+    await act(() => resolveText('Wait for A'));
+    assertLog([]);
+
+    // Finish action B. Same as above.
+    await act(() => resolveText('Wait for B'));
+    assertLog([]);
+
+    // Now finish action C. This is the last action in the entangled set, so
+    // rendering can proceed.
+    await act(() => resolveText('Wait for C'));
+    assertLog([
+      // A and C result in (separate) errors, but B does not.
+      'Oops A!',
+      'Pending B: false',
+      'Oops C!',
+
+      // Because there was an error, React will try rendering one more time.
+      'Oops A!',
+      'Pending B: false',
+      'Oops C!',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Oops A!</div>
+        <div>Pending B: false</div>
+        <div>Oops C!</div>
+      </>,
+    );
+  });
+
+  it('useOptimistic can be used to implement a pending state', async () => {
+    const startTransition = React.startTransition;
+
+    let setIsPending;
+    function App({text}) {
+      const [isPending, _setIsPending] = useOptimistic(false);
+      setIsPending = _setIsPending;
+      return (
+        <>
+          <Text text={'Pending: ' + isPending} />
+          <AsyncText text={text} />
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    resolveText('A');
+    await act(() => root.render(<App text="A" />));
+    assertLog(['Pending: false', 'A']);
+    expect(root).toMatchRenderedOutput('Pending: falseA');
+
+    // Start a transition
+    await act(() =>
+      startTransition(() => {
+        setIsPending(true);
+        root.render(<App text="B" />);
+      }),
+    );
+    assertLog([
+      // Render the pending state immediately
+      'Pending: true',
+      'A',
+
+      // Then attempt to render the transition. The pending state will be
+      // automatically reverted.
+      'Pending: false',
+      'Suspend! [B]',
+    ]);
+
+    // Resolve the transition
+    await act(() => resolveText('B'));
+    assertLog([
+      // Render the pending state immediately
+      'Pending: false',
+      'B',
+    ]);
+  });
+
+  it('useOptimistic rebases pending updates on top of passthrough value', async () => {
+    let serverCart = ['A'];
+
+    async function submitNewItem(item) {
+      await getText('Adding item ' + item);
+      serverCart = [...serverCart, item];
+      React.startTransition(() => {
+        root.render(<App cart={serverCart} />);
+      });
+    }
+
+    let addItemToCart;
+    function App({cart}) {
+      const [isPending, startTransition] = useTransition();
+
+      const savedCartSize = cart.length;
+      const [optimisticCartSize, setOptimisticCartSize] =
+        useOptimistic(savedCartSize);
+
+      addItemToCart = item => {
+        startTransition(async () => {
+          setOptimisticCartSize(n => n + 1);
+          await submitNewItem(item);
+        });
+      };
+
+      return (
+        <>
+          <div>
+            <Text text={'Pending: ' + isPending} />
+          </div>
+          <div>
+            <Text text={'Items in cart: ' + optimisticCartSize} />
+          </div>
+          <ul>
+            {cart.map(item => (
+              <li key={item}>
+                <Text text={'Item ' + item} />
+              </li>
+            ))}
+          </ul>
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App cart={serverCart} />));
+    assertLog(['Pending: false', 'Items in cart: 1', 'Item A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: false</div>
+        <div>Items in cart: 1</div>
+        <ul>
+          <li>Item A</li>
+        </ul>
+      </>,
+    );
+
+    // The cart size is incremented even though B hasn't been added yet.
+    await act(() => addItemToCart('B'));
+    assertLog(['Pending: true', 'Items in cart: 2', 'Item A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: true</div>
+        <div>Items in cart: 2</div>
+        <ul>
+          <li>Item A</li>
+        </ul>
+      </>,
+    );
+
+    // While B is still pending, another item gets added to the cart
+    // out-of-band.
+    serverCart = [...serverCart, 'C'];
+    // NOTE: This is a synchronous update only because we don't yet support
+    // parallel transitions; all transitions are entangled together. Once we add
+    // support for parallel transitions, we can update this test.
+    ReactNoop.flushSync(() => root.render(<App cart={serverCart} />));
+    assertLog([
+      'Pending: true',
+      // Note that the optimistic cart size is still correct, because the
+      // pending update was rebased on top new value.
+      'Items in cart: 3',
+      'Item A',
+      'Item C',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: true</div>
+        <div>Items in cart: 3</div>
+        <ul>
+          <li>Item A</li>
+          <li>Item C</li>
+        </ul>
+      </>,
+    );
+
+    // Finish loading B. The optimistic state is reverted.
+    await act(() => resolveText('Adding item B'));
+    assertLog([
+      'Pending: false',
+      'Items in cart: 3',
+      'Item A',
+      'Item C',
+      'Item B',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: false</div>
+        <div>Items in cart: 3</div>
+        <ul>
+          <li>Item A</li>
+          <li>Item C</li>
+          <li>Item B</li>
+        </ul>
+      </>,
+    );
+  });
+
+  it(
+    'regression: when there are no pending transitions, useOptimistic should ' +
+      'always return the passthrough value',
+    async () => {
+      let setCanonicalState;
+      function App() {
+        const [canonicalState, _setCanonicalState] = useState(0);
+        const [optimisticState] = useOptimistic(canonicalState);
+        setCanonicalState = _setCanonicalState;
+
+        return (
+          <>
+            <div>
+              <Text text={'Canonical: ' + canonicalState} />
+            </div>
+            <div>
+              <Text text={'Optimistic: ' + optimisticState} />
+            </div>
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => root.render(<App />));
+      assertLog(['Canonical: 0', 'Optimistic: 0']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <div>Canonical: 0</div>
+          <div>Optimistic: 0</div>
+        </>,
+      );
+
+      // Update the canonical state. The optimistic state should update, too,
+      // even though there was no transition, and no call to setOptimisticState.
+      await act(() => setCanonicalState(1));
+      assertLog(['Canonical: 1', 'Optimistic: 1']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <div>Canonical: 1</div>
+          <div>Optimistic: 1</div>
+        </>,
+      );
+    },
+  );
+
+  it('regression: useOptimistic during setState-in-render', async () => {
+    // This is a regression test for a very specific case where useOptimistic is
+    // the first hook in the component, it has a pending update, and a later
+    // hook schedules a local (setState-in-render) update. Don't sweat about
+    // deleting this test if the implementation details change.
+
+    let setOptimisticState;
+    let startTransition;
+    function App() {
+      const [optimisticState, _setOptimisticState] = useOptimistic(0);
+      setOptimisticState = _setOptimisticState;
+      const [, _startTransition] = useTransition();
+      startTransition = _startTransition;
+
+      const [derivedState, setDerivedState] = useState(0);
+      if (derivedState !== optimisticState) {
+        setDerivedState(optimisticState);
+      }
+
+      return <Text text={optimisticState} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() => {
+      startTransition(async () => {
+        setOptimisticState(1);
+        await getText('Wait');
+      });
+    });
+    assertLog([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  it('useOptimistic accepts a custom reducer', async () => {
+    let serverCart = ['A'];
+
+    async function submitNewItem(item) {
+      await getText('Adding item ' + item);
+      serverCart = [...serverCart, item];
+      React.startTransition(() => {
+        root.render(<App cart={serverCart} />);
+      });
+    }
+
+    let addItemToCart;
+    function App({cart}) {
+      const [isPending, startTransition] = useTransition();
+
+      const savedCartSize = cart.length;
+      const [optimisticCartSize, addToOptimisticCart] = useOptimistic(
+        savedCartSize,
+        (prevSize, newItem) => {
+          Scheduler.log('Increment optimistic cart size for ' + newItem);
+          return prevSize + 1;
+        },
+      );
+
+      addItemToCart = item => {
+        startTransition(async () => {
+          addToOptimisticCart(item);
+          await submitNewItem(item);
+        });
+      };
+
+      return (
+        <>
+          <div>
+            <Text text={'Pending: ' + isPending} />
+          </div>
+          <div>
+            <Text text={'Items in cart: ' + optimisticCartSize} />
+          </div>
+          <ul>
+            {cart.map(item => (
+              <li key={item}>
+                <Text text={'Item ' + item} />
+              </li>
+            ))}
+          </ul>
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App cart={serverCart} />));
+    assertLog(['Pending: false', 'Items in cart: 1', 'Item A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: false</div>
+        <div>Items in cart: 1</div>
+        <ul>
+          <li>Item A</li>
+        </ul>
+      </>,
+    );
+
+    // The cart size is incremented even though B hasn't been added yet.
+    await act(() => addItemToCart('B'));
+    assertLog([
+      'Increment optimistic cart size for B',
+      'Pending: true',
+      'Items in cart: 2',
+      'Item A',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: true</div>
+        <div>Items in cart: 2</div>
+        <ul>
+          <li>Item A</li>
+        </ul>
+      </>,
+    );
+
+    // While B is still pending, another item gets added to the cart
+    // out-of-band.
+    serverCart = [...serverCart, 'C'];
+    // NOTE: This is a synchronous update only because we don't yet support
+    // parallel transitions; all transitions are entangled together. Once we add
+    // support for parallel transitions, we can update this test.
+    ReactNoop.flushSync(() => root.render(<App cart={serverCart} />));
+    assertLog([
+      'Increment optimistic cart size for B',
+      'Pending: true',
+      // Note that the optimistic cart size is still correct, because the
+      // pending update was rebased on top new value.
+      'Items in cart: 3',
+      'Item A',
+      'Item C',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: true</div>
+        <div>Items in cart: 3</div>
+        <ul>
+          <li>Item A</li>
+          <li>Item C</li>
+        </ul>
+      </>,
+    );
+
+    // Finish loading B. The optimistic state is reverted.
+    await act(() => resolveText('Adding item B'));
+    assertLog([
+      'Pending: false',
+      'Items in cart: 3',
+      'Item A',
+      'Item C',
+      'Item B',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Pending: false</div>
+        <div>Items in cart: 3</div>
+        <ul>
+          <li>Item A</li>
+          <li>Item C</li>
+          <li>Item B</li>
+        </ul>
+      </>,
+    );
+  });
+
+  it('useOptimistic rebases if the passthrough is updated during a render phase update', async () => {
+    // This is kind of an esoteric case where it's hard to come up with a
+    // realistic real-world scenario but it should still work.
+    let increment;
+    let setCount;
+    function App() {
+      const [isPending, startTransition] = useTransition(2);
+      const [count, _setCount] = useState(0);
+      setCount = _setCount;
+
+      const [optimisticCount, setOptimisticCount] = useOptimistic(
+        count,
+        prev => {
+          Scheduler.log('Increment optimistic count');
+          return prev + 1;
+        },
+      );
+
+      if (count === 1) {
+        Scheduler.log('Render phase update count from 1 to 2');
+        setCount(2);
+      }
+
+      increment = () =>
+        startTransition(async () => {
+          setOptimisticCount(n => n + 1);
+          await getText('Wait to increment');
+          React.startTransition(() => setCount(n => n + 1));
+        });
+
+      return (
+        <>
+          <div>
+            <Text text={'Count: ' + count} />
+          </div>
+          {isPending ? (
+            <div>
+              <Text text={'Optimistic count: ' + optimisticCount} />
+            </div>
+          ) : null}
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog(['Count: 0']);
+    expect(root).toMatchRenderedOutput(<div>Count: 0</div>);
+
+    await act(() => increment());
+    assertLog([
+      'Increment optimistic count',
+      'Count: 0',
+      'Optimistic count: 1',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Count: 0</div>
+        <div>Optimistic count: 1</div>
+      </>,
+    );
+
+    await act(() => setCount(1));
+    assertLog([
+      'Increment optimistic count',
+      'Render phase update count from 1 to 2',
+      // The optimistic update is rebased on top of the new passthrough value.
+      'Increment optimistic count',
+      'Count: 2',
+      'Optimistic count: 3',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Count: 2</div>
+        <div>Optimistic count: 3</div>
+      </>,
+    );
+
+    // Finish the action
+    await act(() => resolveText('Wait to increment'));
+    assertLog(['Count: 3']);
+    expect(root).toMatchRenderedOutput(<div>Count: 3</div>);
+  });
+
+  it('useOptimistic rebases if the passthrough is updated during a render phase update (initial mount)', async () => {
+    // This is kind of an esoteric case where it's hard to come up with a
+    // realistic real-world scenario but it should still work.
+    function App() {
+      const [count, setCount] = useState(0);
+      const [optimisticCount] = useOptimistic(count);
+
+      if (count === 0) {
+        Scheduler.log('Render phase update count from 1 to 2');
+        setCount(1);
+      }
+
+      return (
+        <>
+          <div>
+            <Text text={'Count: ' + count} />
+          </div>
+          <div>
+            <Text text={'Optimistic count: ' + optimisticCount} />
+          </div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog([
+      'Render phase update count from 1 to 2',
+      'Count: 1',
+      'Optimistic count: 1',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Count: 1</div>
+        <div>Optimistic count: 1</div>
+      </>,
+    );
+  });
+
+  it('useOptimistic can update repeatedly in the same async action', async () => {
+    let startTransition;
+    let setLoadingProgress;
+    let setText;
+    function App() {
+      const [, _startTransition] = useTransition();
+      const [text, _setText] = useState('A');
+      const [loadingProgress, _setLoadingProgress] = useOptimistic(0);
+      startTransition = _startTransition;
+      setText = _setText;
+      setLoadingProgress = _setLoadingProgress;
+
+      return (
+        <>
+          {loadingProgress !== 0 ? (
+            <div key="progress">
+              <Text text={`Loading... (${loadingProgress})`} />
+            </div>
+          ) : null}
+          <div key="real">
+            <Text text={text} />
+          </div>
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog(['A']);
+    expect(root).toMatchRenderedOutput(<div>A</div>);
+
+    await act(async () => {
+      startTransition(async () => {
+        setLoadingProgress('25%');
+        await getText('Wait 1');
+        setLoadingProgress('75%');
+        await getText('Wait 2');
+        startTransition(() => setText('B'));
+      });
+    });
+    assertLog(['Loading... (25%)', 'A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Loading... (25%)</div>
+        <div>A</div>
+      </>,
+    );
+
+    await act(() => resolveText('Wait 1'));
+    assertLog(['Loading... (75%)', 'A']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Loading... (75%)</div>
+        <div>A</div>
+      </>,
+    );
+
+    await act(() => resolveText('Wait 2'));
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput(<div>B</div>);
+  });
+
+  it('useOptimistic warns if outside of a transition', async () => {
+    let startTransition;
+    let setLoadingProgress;
+    let setText;
+    function App() {
+      const [, _startTransition] = useTransition();
+      const [text, _setText] = useState('A');
+      const [loadingProgress, _setLoadingProgress] = useOptimistic(0);
+      startTransition = _startTransition;
+      setText = _setText;
+      setLoadingProgress = _setLoadingProgress;
+
+      return (
+        <>
+          {loadingProgress !== 0 ? (
+            <div key="progress">
+              <Text text={`Loading... (${loadingProgress})`} />
+            </div>
+          ) : null}
+          <div key="real">
+            <Text text={text} />
+          </div>
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog(['A']);
+    expect(root).toMatchRenderedOutput(<div>A</div>);
+
+    await act(() => {
+      setLoadingProgress('25%');
+      startTransition(() => setText('B'));
+    });
+    assertConsoleErrorDev(
+      [
+        'An optimistic state update occurred outside a transition or ' +
+          'action. To fix, move the update to an action, or wrap ' +
+          'with startTransition.',
+      ],
+      {withoutStack: true},
+    );
+    assertLog(['Loading... (25%)', 'A', 'B']);
+    expect(root).toMatchRenderedOutput(<div>B</div>);
+  });
+
+  it(
+    'optimistic state is not reverted until async action finishes, even if ' +
+      'useTransition hook is unmounted',
+    async () => {
+      let startTransition;
+      function Updater() {
+        const [isPending, _start] = useTransition();
+        startTransition = _start;
+        return (
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+        );
+      }
+
+      let setText;
+      let setOptimisticText;
+      function Sibling() {
+        const [canonicalText, _setText] = useState('A');
+        setText = _setText;
+
+        const [text, _setOptimisticText] = useOptimistic(
+          canonicalText,
+          (_, optimisticText) => `${optimisticText} (loading...)`,
+        );
+        setOptimisticText = _setOptimisticText;
+
+        return (
+          <span>
+            <Text text={text} />
+          </span>
+        );
+      }
+
+      function App({showUpdater}) {
+        return (
+          <>
+            {showUpdater ? <Updater /> : null}
+            <Sibling />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App showUpdater={true} />);
+      });
+      assertLog(['Pending: false', 'A']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: false</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Start an async action that has multiple updates with async
+      // operations in between.
+      await act(() => {
+        startTransition(async () => {
+          Scheduler.log('Async action started');
+
+          setOptimisticText('C');
+
+          startTransition(() => setText('B'));
+
+          await getText('Wait before updating to C');
+
+          Scheduler.log('Async action ended');
+          startTransition(() => setText('C'));
+        });
+      });
+      assertLog([
+        'Async action started',
+        'Pending: true',
+        // Render an optimistic value
+        'C (loading...)',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: true</span>
+          <span>C (loading...)</span>
+        </>,
+      );
+
+      // Delete the component that contains the useTransition hook. This
+      // component no longer blocks the transition from completing. But the
+      // we're still showing an optimistic state, because the async action has
+      // not yet finished.
+      await act(() => {
+        root.render(<App showUpdater={false} />);
+      });
+      assertLog(['C (loading...)']);
+      expect(root).toMatchRenderedOutput(<span>C (loading...)</span>);
+
+      // Finish the async action. Now the optimistic state is reverted and we
+      // switch to the canonical value.
+      await act(() => resolveText('Wait before updating to C'));
+      assertLog(['Async action ended', 'C']);
+      expect(root).toMatchRenderedOutput(<span>C</span>);
+    },
+  );
+
+  it(
+    'updates in an async action are entangled even if useTransition hook ' +
+      'is unmounted before it finishes',
+    async () => {
+      let startTransition;
+      function Updater() {
+        const [isPending, _start] = useTransition();
+        startTransition = _start;
+        return (
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+        );
+      }
+
+      let setText;
+      function Sibling() {
+        const [text, _setText] = useState('A');
+        setText = _setText;
+        return (
+          <span>
+            <Text text={text} />
+          </span>
+        );
+      }
+
+      function App({showUpdater}) {
+        return (
+          <>
+            {showUpdater ? <Updater /> : null}
+            <Sibling />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App showUpdater={true} />);
+      });
+      assertLog(['Pending: false', 'A']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: false</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Start an async action that has multiple updates with async
+      // operations in between.
+      await act(() => {
+        startTransition(async () => {
+          Scheduler.log('Async action started');
+          startTransition(() => setText('B'));
+
+          await getText('Wait before updating to C');
+
+          Scheduler.log('Async action ended');
+          startTransition(() => setText('C'));
+        });
+      });
+      assertLog(['Async action started', 'Pending: true']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: true</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Delete the component that contains the useTransition hook. This
+      // component no longer blocks the transition from completing. But the
+      // pending update to Sibling should not be allowed to finish, because it's
+      // part of the async action.
+      await act(() => {
+        root.render(<App showUpdater={false} />);
+      });
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<span>A</span>);
+
+      // Finish the async action. Notice the intermediate B state was never
+      // shown, because it was batched with the update that came later in the
+      // same action.
+      await act(() => resolveText('Wait before updating to C'));
+      assertLog(['Async action ended', 'C']);
+      expect(root).toMatchRenderedOutput(<span>C</span>);
+    },
+  );
+
+  it(
+    'updates in an async action are entangled even if useTransition hook ' +
+      'is unmounted before it finishes (class component)',
+    async () => {
+      let startTransition;
+      function Updater() {
+        const [isPending, _start] = useTransition();
+        startTransition = _start;
+        return (
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+        );
+      }
+
+      let setText;
+      class Sibling extends React.Component {
+        state = {text: 'A'};
+        render() {
+          setText = text => this.setState({text});
+          return (
+            <span>
+              <Text text={this.state.text} />
+            </span>
+          );
+        }
+      }
+
+      function App({showUpdater}) {
+        return (
+          <>
+            {showUpdater ? <Updater /> : null}
+            <Sibling />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App showUpdater={true} />);
+      });
+      assertLog(['Pending: false', 'A']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: false</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Start an async action that has multiple updates with async
+      // operations in between.
+      await act(() => {
+        startTransition(async () => {
+          Scheduler.log('Async action started');
+          startTransition(() => setText('B'));
+
+          await getText('Wait before updating to C');
+
+          Scheduler.log('Async action ended');
+          startTransition(() => setText('C'));
+        });
+      });
+      assertLog(['Async action started', 'Pending: true']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: true</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Delete the component that contains the useTransition hook. This
+      // component no longer blocks the transition from completing. But the
+      // pending update to Sibling should not be allowed to finish, because it's
+      // part of the async action.
+      await act(() => {
+        root.render(<App showUpdater={false} />);
+      });
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<span>A</span>);
+
+      // Finish the async action. Notice the intermediate B state was never
+      // shown, because it was batched with the update that came later in the
+      // same action.
+      await act(() => resolveText('Wait before updating to C'));
+      assertLog(['Async action ended', 'C']);
+      expect(root).toMatchRenderedOutput(<span>C</span>);
+
+      // Check that subsequent updates are unaffected.
+      await act(() => setText('D'));
+      assertLog(['D']);
+      expect(root).toMatchRenderedOutput(<span>D</span>);
+    },
+  );
+
+  it(
+    'updates in an async action are entangled even if useTransition hook ' +
+      'is unmounted before it finishes (root update)',
+    async () => {
+      let startTransition;
+      function Updater() {
+        const [isPending, _start] = useTransition();
+        startTransition = _start;
+        return (
+          <span>
+            <Text text={'Pending: ' + isPending} />
+          </span>
+        );
+      }
+
+      let setShowUpdater;
+      function App({text}) {
+        const [showUpdater, _setShowUpdater] = useState(true);
+        setShowUpdater = _setShowUpdater;
+        return (
+          <>
+            {showUpdater ? <Updater /> : null}
+            <span>
+              <Text text={text} />
+            </span>
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App text="A" />);
+      });
+      assertLog(['Pending: false', 'A']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: false</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Start an async action that has multiple updates with async
+      // operations in between.
+      await act(() => {
+        startTransition(async () => {
+          Scheduler.log('Async action started');
+          startTransition(() => root.render(<App text="B" />));
+
+          await getText('Wait before updating to C');
+
+          Scheduler.log('Async action ended');
+          startTransition(() => root.render(<App text="C" />));
+        });
+      });
+      assertLog(['Async action started', 'Pending: true']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Pending: true</span>
+          <span>A</span>
+        </>,
+      );
+
+      // Delete the component that contains the useTransition hook. This
+      // component no longer blocks the transition from completing. But the
+      // pending update to Sibling should not be allowed to finish, because it's
+      // part of the async action.
+      await act(() => setShowUpdater(false));
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<span>A</span>);
+
+      // Finish the async action. Notice the intermediate B state was never
+      // shown, because it was batched with the update that came later in the
+      // same action.
+      await act(() => resolveText('Wait before updating to C'));
+      assertLog(['Async action ended', 'C']);
+      expect(root).toMatchRenderedOutput(<span>C</span>);
+
+      // Check that subsequent updates are unaffected.
+      await act(() => root.render(<App text="D" />));
+      assertLog(['D']);
+      expect(root).toMatchRenderedOutput(<span>D</span>);
+    },
+  );
+
+  it('React.startTransition supports async actions', async () => {
+    const startTransition = React.startTransition;
+
+    function App({text}) {
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App text="A" />);
+    });
+    assertLog(['A']);
+
+    await act(() => {
+      startTransition(async () => {
+        // Update to B
+        root.render(<App text="B" />);
+
+        // There's an async gap before C is updated
+        await getText('Wait before updating to C');
+        root.render(<App text="C" />);
+
+        Scheduler.log('Async action ended');
+      });
+    });
+    // The update to B is blocked because the async action hasn't completed yet.
+    assertLog([]);
+    expect(root).toMatchRenderedOutput('A');
+
+    // Finish the async action
+    await act(() => resolveText('Wait before updating to C'));
+
+    // Now both B and C can finish in a single batch.
+    assertLog(['Async action ended', 'C']);
+    expect(root).toMatchRenderedOutput('C');
+  });
+
+  it('useOptimistic works with async actions passed to React.startTransition', async () => {
+    const startTransition = React.startTransition;
+
+    let setOptimisticText;
+    function App({text: canonicalText}) {
+      const [text, _setOptimisticText] = useOptimistic(
+        canonicalText,
+        (_, optimisticText) => `${optimisticText} (loading...)`,
+      );
+      setOptimisticText = _setOptimisticText;
+      return (
+        <span>
+          <Text text={text} />
+        </span>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App text="Initial" />);
+    });
+    assertLog(['Initial']);
+    expect(root).toMatchRenderedOutput(<span>Initial</span>);
+
+    // Start an async action using the non-hook form of startTransition. The
+    // action includes an optimistic update.
+    await act(() => {
+      startTransition(async () => {
+        Scheduler.log('Async action started');
+        setOptimisticText('Updated');
+        await getText('Yield before updating');
+        Scheduler.log('Async action ended');
+        startTransition(() => root.render(<App text="Updated" />));
+      });
+    });
+    // Because the action hasn't finished yet, the optimistic UI is shown.
+    assertLog(['Async action started', 'Updated (loading...)']);
+    expect(root).toMatchRenderedOutput(<span>Updated (loading...)</span>);
+
+    // Finish the async action. The optimistic state is reverted and replaced by
+    // the canonical state.
+    await act(() => resolveText('Yield before updating'));
+    assertLog(['Async action ended', 'Updated']);
+    expect(root).toMatchRenderedOutput(<span>Updated</span>);
+  });
+
+  it(
+    'regression: updates in an action passed to React.startTransition are batched ' +
+      'even if there were no updates before the first await',
+    async () => {
+      // Regression for a bug that occured in an older, too-clever-by-half
+      // implementation of the isomorphic startTransition API. Now, the
+      // isomorphic startTransition is literally the composition of every
+      // reconciler instance's startTransition, so the behavior is less likely
+      // to regress in the future.
+      const startTransition = React.startTransition;
+
+      let setOptimisticText;
+      function App({text: canonicalText}) {
+        const [text, _setOptimisticText] = useOptimistic(
+          canonicalText,
+          (_, optimisticText) => `${optimisticText} (loading...)`,
+        );
+        setOptimisticText = _setOptimisticText;
+        return (
+          <span>
+            <Text text={text} />
+          </span>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App text="Initial" />);
+      });
+      assertLog(['Initial']);
+      expect(root).toMatchRenderedOutput(<span>Initial</span>);
+
+      // Start an async action using the non-hook form of startTransition. The
+      // action includes an optimistic update.
+      await act(() => {
+        startTransition(async () => {
+          Scheduler.log('Async action started');
+
+          // Yield to an async task *before* any updates have occurred.
+          await getText('Yield before optimistic update');
+
+          // This optimistic update happens after an async gap. In the
+          // regression case, this update was not correctly associated with
+          // the outer async action, causing the optimistic update to be
+          // immediately reverted.
+          setOptimisticText('Updated');
+
+          await getText('Yield before updating');
+          Scheduler.log('Async action ended');
+          startTransition(() => root.render(<App text="Updated" />));
+        });
+      });
+      assertLog(['Async action started']);
+
+      // Wait for an async gap, then schedule an optimistic update.
+      await act(() => resolveText('Yield before optimistic update'));
+
+      // Because the action hasn't finished yet, the optimistic UI is shown.
+      assertLog(['Updated (loading...)']);
+      expect(root).toMatchRenderedOutput(<span>Updated (loading...)</span>);
+
+      // Finish the async action. The optimistic state is reverted and replaced
+      // by the canonical state.
+      await act(() => resolveText('Yield before updating'));
+      assertLog(['Async action ended', 'Updated']);
+      expect(root).toMatchRenderedOutput(<span>Updated</span>);
+    },
+  );
+
+  it('React.startTransition captures async errors and passes them to reportError', async () => {
+    await act(() => {
+      React.startTransition(async () => {
+        throw new Error('Oops');
+      });
+    });
+    assertLog(['reportError: Oops']);
+  });
+
+  it('React.startTransition captures sync errors and passes them to reportError', async () => {
+    await act(() => {
+      try {
+        React.startTransition(() => {
+          throw new Error('Oops');
+        });
+      } catch (e) {
+        throw new Error('Should not be reachable.');
+      }
+    });
+    assertLog(['reportError: Oops']);
+  });
+
+  // @gate enableOptimisticKey
+  it('reconciles against new items when optimisticKey is used', async () => {
+    const startTransition = React.startTransition;
+
+    function Item({text}) {
+      const [initialText] = React.useState(text);
+      return <span>{initialText + '-' + text}</span>;
+    }
+
+    let addOptimisticItem;
+    function App({items}) {
+      const [optimisticItems, _addOptimisticItem] = useOptimistic(
+        items,
+        (canonicalItems, optimisticText) =>
+          canonicalItems.concat({
+            id: React.optimisticKey,
+            text: optimisticText,
+          }),
+      );
+      addOptimisticItem = _addOptimisticItem;
+      return (
+        <div>
+          {optimisticItems.map(item => (
+            <Item key={item.id} text={item.text} />
+          ))}
+        </div>
+      );
+    }
+
+    const A = {
+      id: 'a',
+      text: 'A',
+    };
+
+    const B = {
+      id: 'b',
+      text: 'B',
+    };
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App items={[A]} />);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span>A-A</span>
+      </div>,
+    );
+
+    // Start an async action using the non-hook form of startTransition. The
+    // action includes an optimistic update.
+    await act(() => {
+      startTransition(async () => {
+        addOptimisticItem('b');
+        await getText('Yield before updating');
+        startTransition(() => root.render(<App items={[A, B]} />));
+      });
+    });
+    // Because the action hasn't finished yet, the optimistic UI is shown.
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span>A-A</span>
+        <span>b-b</span>
+      </div>,
+    );
+
+    // Finish the async action. The optimistic state is reverted and replaced by
+    // the canonical state. The state is transferred to the new row.
+    await act(() => {
+      resolveText('Yield before updating');
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span>A-A</span>
+        <span>b-B</span>
+      </div>,
+    );
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js
new file mode 100644
index 00000000000..bc3cfd8deb5
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js
@@ -0,0 +1,173 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let waitForAll;
+let assertLog;
+let ReactCache;
+let Suspense;
+let TextResource;
+let act;
+
+describe('ReactBlockingMode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    ReactCache = require('react-cache');
+    Suspense = React.Suspense;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    act = InternalTestUtils.act;
+
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        return new Promise((resolve, reject) =>
+          setTimeout(() => {
+            Scheduler.log(`Promise resolved [${text}]`);
+            resolve(text);
+          }, ms),
+        );
+      },
+      ([text, ms]) => text,
+    );
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return props.text;
+  }
+
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      TextResource.read([props.text, props.ms]);
+      Scheduler.log(text);
+      return props.text;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.log(`Suspend! [${text}]`);
+      } else {
+        Scheduler.log(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  it('updates flush without yielding in the next event', async () => {
+    const root = ReactNoop.createRoot();
+
+    root.render(
+      <>
+        <Text text="A" />
+        <Text text="B" />
+        <Text text="C" />
+      </>,
+    );
+
+    // Nothing should have rendered yet
+    expect(root).toMatchRenderedOutput(null);
+
+    await waitForAll(['A', 'B', 'C']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  it('layout updates flush synchronously in same event', async () => {
+    const {useLayoutEffect} = React;
+
+    function App() {
+      useLayoutEffect(() => {
+        Scheduler.log('Layout effect');
+      });
+      return <Text text="Hi" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    expect(root).toMatchRenderedOutput(null);
+    assertLog([]);
+
+    await waitForAll(['Hi', 'Layout effect']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('uses proper Suspense semantics, not legacy ones', async () => {
+    const root = ReactNoop.createRoot();
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <span>
+          <Text text="A" />
+        </span>
+        <span>
+          <AsyncText text="B" />
+        </span>
+        <span>
+          <Text text="C" />
+        </span>
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading...',
+      // pre-warming
+      'A',
+      'Suspend! [B]',
+      'C',
+    ]);
+    // In Legacy Mode, A and B would mount in a hidden primary tree. In
+    // Concurrent Mode, nothing in the primary tree should mount. But the
+    // fallback should mount immediately.
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [B]', 'A', 'B', 'C']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('flushSync does not flush batched work', async () => {
+    const {useState, forwardRef, useImperativeHandle} = React;
+    const root = ReactNoop.createRoot();
+
+    const Foo = forwardRef(({label}, ref) => {
+      const [step, setStep] = useState(0);
+      useImperativeHandle(ref, () => ({setStep}));
+      return <Text text={label + step} />;
+    });
+
+    const foo1 = React.createRef(null);
+    const foo2 = React.createRef(null);
+    root.render(
+      <>
+        <Foo label="A" ref={foo1} />
+        <Foo label="B" ref={foo2} />
+      </>,
+    );
+
+    await waitForAll(['A0', 'B0']);
+    expect(root).toMatchRenderedOutput('A0B0');
+
+    // Schedule a batched update to the first sibling
+    ReactNoop.batchedUpdates(() => foo1.current.setStep(1));
+
+    // Before it flushes, update the second sibling inside flushSync
+    ReactNoop.batchedUpdates(() =>
+      ReactNoop.flushSync(() => {
+        foo2.current.setStep(1);
+      }),
+    );
+
+    // Now flush the first update
+    assertLog(['A1', 'B1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
new file mode 100644
index 00000000000..54e4207c656
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
@@ -0,0 +1,290 @@
+/* eslint-disable react/jsx-boolean-value */
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let useState;
+let textCache;
+
+let readText;
+let resolveText;
+// let rejectText;
+
+let assertLog;
+let waitForPaint;
+
+describe('ReactSuspenseWithNoopRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Suspense = React.Suspense;
+    useState = React.useState;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+
+    textCache = new Map();
+
+    readText = text => {
+      const record = textCache.get(text);
+      if (record !== undefined) {
+        switch (record.status) {
+          case 'pending':
+            throw record.promise;
+          case 'rejected':
+            throw Error('Failed to load: ' + text);
+          case 'resolved':
+            return text;
+        }
+      } else {
+        let ping;
+        const promise = new Promise(resolve => (ping = resolve));
+        const newRecord = {
+          status: 'pending',
+          ping: ping,
+          promise,
+        };
+        textCache.set(text, newRecord);
+        throw promise;
+      }
+    };
+
+    resolveText = text => {
+      const record = textCache.get(text);
+      if (record !== undefined) {
+        if (record.status === 'pending') {
+          record.ping();
+          record.ping = null;
+          record.status = 'resolved';
+          record.promise = null;
+        }
+      } else {
+        const newRecord = {
+          ping: null,
+          status: 'resolved',
+          promise: null,
+        };
+        textCache.set(text, newRecord);
+      }
+    };
+
+    // rejectText = text => {
+    //   const record = textCache.get(text);
+    //   if (record !== undefined) {
+    //     if (record.status === 'pending') {
+    //       Scheduler.log(`Promise rejected [${text}]`);
+    //       record.ping();
+    //       record.status = 'rejected';
+    //       clearTimeout(record.promise._timer);
+    //       record.promise = null;
+    //     }
+    //   } else {
+    //     const newRecord = {
+    //       ping: null,
+    //       status: 'rejected',
+    //       promise: null,
+    //     };
+    //     textCache.set(text, newRecord);
+    //   }
+    // };
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return props.text;
+  }
+
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      readText(text);
+      Scheduler.log(text);
+      return text;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.log(`Suspend! [${text}]`);
+      } else {
+        Scheduler.log(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  // @gate enableCPUSuspense
+  it('skips CPU-bound trees on initial mount', async () => {
+    function App() {
+      return (
+        <>
+          <Text text="Outer" />
+          <div>
+            <Suspense defer fallback={<Text text="Loading..." />}>
+              <Text text="Inner" />
+            </Suspense>
+          </div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+      await waitForPaint(['Outer', 'Loading...']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          Outer
+          <div>Loading...</div>
+        </>,
+      );
+    });
+    // Inner contents finish in separate commit from outer
+    assertLog(['Inner']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Outer
+        <div>Inner</div>
+      </>,
+    );
+  });
+
+  // @gate enableCPUSuspense
+  it('does not skip CPU-bound trees during updates', async () => {
+    let setCount;
+
+    function App() {
+      const [count, _setCount] = useState(0);
+      setCount = _setCount;
+      return (
+        <>
+          <Text text="Outer" />
+          <div>
+            <Suspense defer fallback={<Text text="Loading..." />}>
+              <Text text={`Inner [${count}]`} />
+            </Suspense>
+          </div>
+        </>
+      );
+    }
+
+    // Initial mount
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    // Inner contents finish in separate commit from outer
+    assertLog(['Outer', 'Loading...', 'Inner [0]']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Outer
+        <div>Inner [0]</div>
+      </>,
+    );
+
+    // Update
+    await act(() => {
+      setCount(1);
+    });
+    // Entire update finishes in a single commit
+    assertLog(['Outer', 'Inner [1]']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Outer
+        <div>Inner [1]</div>
+      </>,
+    );
+  });
+
+  // @gate enableCPUSuspense
+  it('suspend inside CPU-bound tree', async () => {
+    function App() {
+      return (
+        <>
+          <Text text="Outer" />
+          <div>
+            <Suspense defer fallback={<Text text="Loading..." />}>
+              <AsyncText text="Inner" />
+            </Suspense>
+          </div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+      await waitForPaint(['Outer', 'Loading...']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          Outer
+          <div>Loading...</div>
+        </>,
+      );
+    });
+    // Inner contents suspended, so we continue showing a fallback.
+    assertLog([
+      'Suspend! [Inner]',
+      // pre-warming
+      'Suspend! [Inner]',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Outer
+        <div>Loading...</div>
+      </>,
+    );
+
+    // Resolve the data and finish rendering
+    await act(async () => {
+      await resolveText('Inner');
+    });
+    assertLog(['Inner']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Outer
+        <div>Inner</div>
+      </>,
+    );
+  });
+
+  // @gate enableCPUSuspense
+  it('nested CPU-bound trees', async () => {
+    function App() {
+      return (
+        <>
+          <Text text="A" />
+          <div>
+            <Suspense defer fallback={<Text text="Loading B..." />}>
+              <Text text="B" />
+              <div>
+                <Suspense defer fallback={<Text text="Loading C..." />}>
+                  <Text text="C" />
+                </Suspense>
+              </div>
+            </Suspense>
+          </div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    // Each level commits separately
+    assertLog(['A', 'Loading B...', 'B', 'Loading C...', 'C']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        A
+        <div>
+          B<div>C</div>
+        </div>
+      </>,
+    );
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
new file mode 100644
index 00000000000..4803ab5283c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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;
+let cache;
+let cacheSignal;
+
+describe('ReactCache', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    React = require('react');
+
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+
+    cache = React.cache;
+    cacheSignal = React.cacheSignal;
+
+    jest.resetModules();
+    __unmockReact();
+  });
+
+  it('cache objects and primitive arguments and a mix of them', async () => {
+    const types = cache((a, b) => ({a: typeof a, b: typeof b}));
+    function Print({a, b}) {
+      return types(a, b).a + ' ' + types(a, b).b + ' ';
+    }
+    function Same({a, b}) {
+      const x = types(a, b);
+      const y = types(a, b);
+      return (x === y).toString() + ' ';
+    }
+    function FlippedOrder({a, b}) {
+      return (types(a, b) === types(b, a)).toString() + ' ';
+    }
+    function FewerArgs({a, b}) {
+      return (types(a, b) === types(a)).toString() + ' ';
+    }
+    function MoreArgs({a, b}) {
+      return (types(a) === types(a, b)).toString() + ' ';
+    }
+
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a="e" b="f" />
+              <Same a="a" b="b" />
+              <FlippedOrder a="c" b="d" />
+              <FewerArgs a="e" b="f" />
+              <MoreArgs a="g" b="h" />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('string string true false false false ');
+
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a="e" b={null} />
+              <Same a="a" b={null} />
+              <FlippedOrder a="c" b={null} />
+              <FewerArgs a="e" b={null} />
+              <MoreArgs a="g" b={null} />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('string object true false false false ');
+
+    const obj = {};
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a="e" b={obj} />
+              <Same a="a" b={obj} />
+              <FlippedOrder a="c" b={obj} />
+              <FewerArgs a="e" b={obj} />
+              <MoreArgs a="g" b={obj} />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('string object true false false false ');
+
+    const sameObj = {};
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a={sameObj} b={sameObj} />
+              <Same a={sameObj} b={sameObj} />
+              <FlippedOrder a={sameObj} b={sameObj} />
+              <FewerArgs a={sameObj} b={sameObj} />
+              <MoreArgs a={sameObj} b={sameObj} />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('object object true true false false ');
+
+    const objA = {};
+    const objB = {};
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a={objA} b={objB} />
+              <Same a={objA} b={objB} />
+              <FlippedOrder a={objA} b={objB} />
+              <FewerArgs a={objA} b={objB} />
+              <MoreArgs a={objA} b={objB} />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('object object true false false false ');
+
+    const sameSymbol = Symbol();
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a={sameSymbol} b={sameSymbol} />
+              <Same a={sameSymbol} b={sameSymbol} />
+              <FlippedOrder a={sameSymbol} b={sameSymbol} />
+              <FewerArgs a={sameSymbol} b={sameSymbol} />
+              <MoreArgs a={sameSymbol} b={sameSymbol} />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('symbol symbol true true false false ');
+
+    const notANumber = +'nan';
+    expect(
+      (
+        await ReactNoopFlightClient.read(
+          ReactNoopFlightServer.render(
+            <>
+              <Print a={1} b={notANumber} />
+              <Same a={1} b={notANumber} />
+              <FlippedOrder a={1} b={notANumber} />
+              <FewerArgs a={1} b={notANumber} />
+              <MoreArgs a={1} b={notANumber} />
+            </>,
+          ),
+        )
+      ).join(''),
+    ).toEqual('number number true false false false ');
+  });
+
+  it('cached functions that throw should cache the error', async () => {
+    const throws = cache(v => {
+      throw new Error(v);
+    });
+    let x;
+    let y;
+    let z;
+    function Test() {
+      try {
+        throws(1);
+      } catch (e) {
+        x = e;
+      }
+      try {
+        throws(1);
+      } catch (e) {
+        y = e;
+      }
+      try {
+        throws(2);
+      } catch (e) {
+        z = e;
+      }
+
+      return 'Blank';
+    }
+
+    ReactNoopFlightServer.render(<Test />);
+    expect(x).toBe(y);
+    expect(z).not.toBe(x);
+  });
+
+  it('introspection of returned wrapper function is same on client and server', async () => {
+    // When the variant flag is true, test the client version of `cache`.
+    if (gate(flags => flags.variant)) {
+      jest.resetModules();
+      jest.mock('react', () => jest.requireActual('react'));
+      const ClientReact = require('react');
+      cache = ClientReact.cache;
+    }
+
+    function foo(a, b, c) {
+      return a + b + c;
+    }
+    foo.displayName = 'Custom display name';
+
+    const cachedFoo = cache(foo);
+    expect(cachedFoo).not.toBe(foo);
+    expect(cachedFoo.length).toBe(0);
+    expect(cachedFoo.displayName).toBe(undefined);
+  });
+
+  it('cacheSignal() returns null outside a render', async () => {
+    expect(cacheSignal()).toBe(null);
+  });
+
+  it('cacheSignal() aborts when the render finishes normally', async () => {
+    let renderedCacheSignal = null;
+
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    async function Test() {
+      renderedCacheSignal = cacheSignal();
+      await promise;
+      return 'Hi';
+    }
+
+    const controller = new AbortController();
+    const errors = [];
+    const result = ReactNoopFlightServer.render(<Test />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x);
+      },
+    });
+    expect(errors).toEqual([]);
+    expect(renderedCacheSignal).not.toBe(controller.signal); // In the future we might make these the same
+    expect(renderedCacheSignal.aborted).toBe(false);
+    await resolve();
+    await 0;
+    await 0;
+
+    expect(await ReactNoopFlightClient.read(result)).toBe('Hi');
+
+    expect(errors).toEqual([]);
+    expect(renderedCacheSignal.aborted).toBe(true);
+    expect(renderedCacheSignal.reason.message).toContain(
+      'This render completed successfully.',
+    );
+  });
+
+  it('cacheSignal() aborts when the render is aborted', async () => {
+    let renderedCacheSignal = null;
+
+    const promise = new Promise(() => {});
+
+    async function Test() {
+      renderedCacheSignal = cacheSignal();
+      await promise;
+      return 'Hi';
+    }
+
+    const controller = new AbortController();
+    const errors = [];
+    const result = ReactNoopFlightServer.render(<Test />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x);
+        return 'hi';
+      },
+    });
+    expect(errors).toEqual([]);
+    expect(renderedCacheSignal).not.toBe(controller.signal); // In the future we might make these the same
+    expect(renderedCacheSignal.aborted).toBe(false);
+    const reason = new Error('Timed out');
+    controller.abort(reason);
+    expect(errors).toEqual([reason]);
+    expect(renderedCacheSignal.aborted).toBe(true);
+    expect(renderedCacheSignal.reason).toBe(reason);
+
+    let clientError = null;
+    try {
+      await ReactNoopFlightClient.read(result);
+    } catch (x) {
+      clientError = x;
+    }
+    expect(clientError).not.toBe(null);
+    if (__DEV__) {
+      expect(clientError.message).toBe('Timed out');
+    }
+    expect(clientError.digest).toBe('hi');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js b/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js
new file mode 100644
index 00000000000..36889aed296
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let assertLog;
+
+describe('ReactClassComponentPropResolution', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('resolves ref and default props before calling lifecycle methods', async () => {
+    const root = ReactNoop.createRoot();
+
+    function getPropKeys(props) {
+      return Object.keys(props).join(', ');
+    }
+
+    class Component extends React.Component {
+      constructor(props) {
+        super(props);
+        Scheduler.log('constructor: ' + getPropKeys(props));
+      }
+      shouldComponentUpdate(props) {
+        Scheduler.log(
+          'shouldComponentUpdate (prev props): ' + getPropKeys(this.props),
+        );
+        Scheduler.log(
+          'shouldComponentUpdate (next props): ' + getPropKeys(props),
+        );
+        return true;
+      }
+      componentDidUpdate(props) {
+        Scheduler.log('componentDidUpdate (prev props): ' + getPropKeys(props));
+        Scheduler.log(
+          'componentDidUpdate (next props): ' + getPropKeys(this.props),
+        );
+        return true;
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount: ' + getPropKeys(this.props));
+        return true;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('componentWillMount: ' + getPropKeys(this.props));
+      }
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log(
+          'componentWillReceiveProps (prev props): ' + getPropKeys(this.props),
+        );
+        Scheduler.log(
+          'componentWillReceiveProps (next props): ' + getPropKeys(nextProps),
+        );
+      }
+      UNSAFE_componentWillUpdate(nextProps) {
+        Scheduler.log(
+          'componentWillUpdate (prev props): ' + getPropKeys(this.props),
+        );
+        Scheduler.log(
+          'componentWillUpdate (next props): ' + getPropKeys(nextProps),
+        );
+      }
+      componentWillUnmount() {
+        Scheduler.log('componentWillUnmount: ' + getPropKeys(this.props));
+      }
+      render() {
+        return <Text text={'render: ' + getPropKeys(this.props)} />;
+      }
+    }
+
+    Component.defaultProps = {
+      default: 'yo',
+    };
+
+    // `ref` should never appear as a prop. `default` always should.
+
+    // Mount
+    const ref = React.createRef();
+    await act(async () => {
+      root.render(<Component text="Yay" ref={ref} />);
+    });
+    assertLog([
+      'constructor: text, default',
+      'componentWillMount: text, default',
+      'render: text, default',
+      'componentDidMount: text, default',
+    ]);
+
+    // Update
+    await act(async () => {
+      root.render(<Component text="Yay (again)" ref={ref} />);
+    });
+    assertLog([
+      'componentWillReceiveProps (prev props): text, default',
+      'componentWillReceiveProps (next props): text, default',
+      'shouldComponentUpdate (prev props): text, default',
+      'shouldComponentUpdate (next props): text, default',
+      'componentWillUpdate (prev props): text, default',
+      'componentWillUpdate (next props): text, default',
+      'render: text, default',
+      'componentDidUpdate (prev props): text, default',
+      'componentDidUpdate (next props): text, default',
+    ]);
+
+    // Unmount
+    await act(async () => {
+      root.render(null);
+    });
+    assertLog(['componentWillUnmount: text, default']);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js b/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js
new file mode 100644
index 00000000000..e0533df2bcd
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js
@@ -0,0 +1,51 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let assertLog;
+
+describe('ReactClassSetStateCallback', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('regression: setState callback (2nd arg) should only fire once, even after a rebase', async () => {
+    let app;
+    class App extends React.Component {
+      state = {step: 0};
+      render() {
+        app = this;
+        return <Text text={this.state.step} />;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([0]);
+
+    await act(() => {
+      React.startTransition(() => {
+        app.setState({step: 1}, () => Scheduler.log('Callback 1'));
+      });
+      ReactNoop.flushSync(() => {
+        app.setState({step: 2}, () => Scheduler.log('Callback 2'));
+      });
+    });
+    assertLog([2, 'Callback 2', 2, 'Callback 1']);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
new file mode 100644
index 00000000000..d4bd1958f64
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
@@ -0,0 +1,440 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let getCacheForType;
+let startTransition;
+let assertLog;
+
+let caches;
+let seededCache;
+
+describe('ReactConcurrentErrorRecovery', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.log(fullText);
+    return fullText;
+  }
+
+  function seedNextTextCache(text) {
+    if (seededCache === null) {
+      seededCache = createTextCache();
+    }
+    seededCache.resolve(text);
+  }
+
+  function resolveMostRecentTextCache(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  const resolveText = resolveMostRecentTextCache;
+
+  function rejectMostRecentTextCache(text, error) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].reject(text, error)`.
+      caches[caches.length - 1].reject(text, error);
+    }
+  }
+
+  const rejectText = rejectMostRecentTextCache;
+
+  // @gate enableLegacyCache
+  it('errors during a refresh transition should not force fallbacks to display (suspend then error)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App({step}) {
+      return (
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <ErrorBoundary>
+              <AsyncText text={'A' + step} />
+            </ErrorBoundary>
+          </Suspense>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <ErrorBoundary>
+              <AsyncText text={'B' + step} />
+            </ErrorBoundary>
+          </Suspense>
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    seedNextTextCache('A1');
+    seedNextTextCache('B1');
+    await act(() => {
+      root.render(<App step={1} />);
+    });
+    assertLog(['A1', 'B1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // Start a refresh transition
+    await act(() => {
+      startTransition(() => {
+        root.render(<App step={2} />);
+      });
+    });
+    assertLog(['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']);
+    // Because this is a refresh, we don't switch to a fallback
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // B fails to load.
+    await act(() => {
+      rejectText('B2', new Error('Oops!'));
+    });
+
+    // Because we're still suspended on A, we can't show an error boundary. We
+    // should wait for A to resolve.
+    assertLog(['Suspend! [A2]', 'Loading...', 'Error! [B2]', 'Oops!']);
+    // Remain on previous screen.
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // A finishes loading.
+    await act(() => {
+      resolveText('A2');
+    });
+    assertLog(['A2', 'Error! [B2]', 'Oops!', 'A2', 'Error! [B2]', 'Oops!']);
+    // Now we can show the error boundary that's wrapped around B.
+    expect(root).toMatchRenderedOutput('A2Oops!');
+  });
+
+  // @gate enableLegacyCache
+  it('errors during a refresh transition should not force fallbacks to display (error then suspend)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    function App({step}) {
+      return (
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <ErrorBoundary>
+              <AsyncText text={'A' + step} />
+            </ErrorBoundary>
+          </Suspense>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <ErrorBoundary>
+              <AsyncText text={'B' + step} />
+            </ErrorBoundary>
+          </Suspense>
+        </>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    seedNextTextCache('A1');
+    seedNextTextCache('B1');
+    await act(() => {
+      root.render(<App step={1} />);
+    });
+    assertLog(['A1', 'B1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // Start a refresh transition
+    await act(() => {
+      startTransition(() => {
+        root.render(<App step={2} />);
+      });
+    });
+    assertLog(['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']);
+    // Because this is a refresh, we don't switch to a fallback
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // A fails to load.
+    await act(() => {
+      rejectText('A2', new Error('Oops!'));
+    });
+
+    // Because we're still suspended on B, we can't show an error boundary. We
+    // should wait for B to resolve.
+    assertLog(['Error! [A2]', 'Oops!', 'Suspend! [B2]', 'Loading...']);
+    // Remain on previous screen.
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // B finishes loading.
+    await act(() => {
+      resolveText('B2');
+    });
+    assertLog(['Error! [A2]', 'Oops!', 'B2', 'Error! [A2]', 'Oops!', 'B2']);
+    // Now we can show the error boundary that's wrapped around B.
+    expect(root).toMatchRenderedOutput('Oops!B2');
+  });
+
+  // @gate enableLegacyCache
+  it('suspending in the shell (outside a Suspense boundary) should not throw, warn, or log during a transition', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    // The initial render suspends without a Suspense boundary. Since it's
+    // wrapped in startTransition, it suspends instead of erroring.
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<AsyncText text="Async" />);
+      });
+    });
+    assertLog(['Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(null);
+
+    // This also works if the suspended component is wrapped with an error
+    // boundary. (This is only interesting because when a component suspends
+    // outside of a transition, we throw an error, which can be captured by
+    // an error boundary.
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <ErrorBoundary>
+            <AsyncText text="Async" />
+          </ErrorBoundary>,
+        );
+      });
+    });
+    assertLog(['Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(null);
+
+    // Continues rendering once data resolves
+    await act(() => {
+      resolveText('Async');
+    });
+    assertLog(['Async']);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate enableLegacyCache
+  it(
+    'errors during a suspended transition at the shell should not force ' +
+      'fallbacks to display (error then suspend)',
+    async () => {
+      // This is similar to the earlier test for errors that occur during
+      // a refresh transition. Suspending in the shell is conceptually the same
+      // as a refresh, but they have slightly different implementation paths.
+
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          return {error};
+        }
+        render() {
+          if (this.state.error !== null) {
+            return (
+              <Text text={'Caught an error: ' + this.state.error.message} />
+            );
+          }
+          return this.props.children;
+        }
+      }
+
+      function Throws() {
+        throw new Error('Oops!');
+      }
+
+      // Suspend and throw in the same transition
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        startTransition(() => {
+          root.render(
+            <>
+              <AsyncText text="Async" />
+              <ErrorBoundary>
+                <Throws />
+              </ErrorBoundary>
+            </>,
+          );
+        });
+      });
+      assertLog([
+        'Suspend! [Async]',
+        // pre-warming
+        'Caught an error: Oops!',
+      ]);
+      // The render suspended without committing the error.
+      expect(root).toMatchRenderedOutput(null);
+
+      // Try the reverse order, too: throw then suspend
+      await act(() => {
+        startTransition(() => {
+          root.render(
+            <>
+              <AsyncText text="Async" />
+              <ErrorBoundary>
+                <Throws />
+              </ErrorBoundary>
+            </>,
+          );
+        });
+      });
+      assertLog(['Suspend! [Async]', 'Caught an error: Oops!']);
+      expect(root).toMatchRenderedOutput(null);
+
+      await act(async () => {
+        await resolveText('Async');
+      });
+
+      assertLog([
+        'Async',
+        'Caught an error: Oops!',
+
+        // Try recovering from the error by rendering again synchronously
+        'Async',
+        'Caught an error: Oops!',
+      ]);
+
+      expect(root).toMatchRenderedOutput('AsyncCaught an error: Oops!');
+    },
+  );
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactConfigurableErrorLogging-test.js b/packages/react-reconciler/src/__tests__/ReactConfigurableErrorLogging-test.js
new file mode 100644
index 00000000000..4cdde5ce646
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactConfigurableErrorLogging-test.js
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let container;
+let act;
+
+async function fakeAct(cb) {
+  // We don't use act/waitForThrow here because we want to observe how errors are reported for real.
+  await cb();
+  Scheduler.unstable_flushAll();
+}
+
+describe('ReactConfigurableErrorLogging', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    container = document.createElement('div');
+    if (__DEV__) {
+      act = React.act;
+    }
+  });
+
+  it('should log errors that occur during the begin phase', async () => {
+    class ErrorThrowingComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        throw new Error('constructor error');
+      }
+      render() {
+        return <div />;
+      }
+    }
+    const uncaughtErrors = [];
+    const caughtErrors = [];
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError(error, errorInfo) {
+        uncaughtErrors.push(error, errorInfo);
+      },
+      onCaughtError(error, errorInfo) {
+        caughtErrors.push(error, errorInfo);
+      },
+    });
+    await fakeAct(() => {
+      root.render(
+        <div>
+          <span>
+            <ErrorThrowingComponent />
+          </span>
+        </div>,
+      );
+    });
+
+    expect(uncaughtErrors).toEqual([
+      expect.objectContaining({
+        message: 'constructor error',
+      }),
+      expect.objectContaining({
+        componentStack: expect.stringMatching(
+          new RegExp(
+            '\\s+(in|at) ErrorThrowingComponent (.*)\n' +
+              '\\s+(in|at) span(.*)\n' +
+              '\\s+(in|at) div(.*)',
+          ),
+        ),
+      }),
+    ]);
+    expect(caughtErrors).toEqual([]);
+  });
+
+  it('should log errors that occur during the commit phase', async () => {
+    class ErrorThrowingComponent extends React.Component {
+      componentDidMount() {
+        throw new Error('componentDidMount error');
+      }
+      render() {
+        return <div />;
+      }
+    }
+    const uncaughtErrors = [];
+    const caughtErrors = [];
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError(error, errorInfo) {
+        uncaughtErrors.push(error, errorInfo);
+      },
+      onCaughtError(error, errorInfo) {
+        caughtErrors.push(error, errorInfo);
+      },
+    });
+    await fakeAct(() => {
+      root.render(
+        <div>
+          <span>
+            <ErrorThrowingComponent />
+          </span>
+        </div>,
+      );
+    });
+
+    expect(uncaughtErrors).toEqual([
+      expect.objectContaining({
+        message: 'componentDidMount error',
+      }),
+      expect.objectContaining({
+        componentStack: expect.stringMatching(
+          new RegExp(
+            '\\s+(in|at) ErrorThrowingComponent (.*)\n' +
+              '\\s+(in|at) span(.*)\n' +
+              '\\s+(in|at) div(.*)',
+          ),
+        ),
+      }),
+    ]);
+    expect(caughtErrors).toEqual([]);
+  });
+
+  it('should ignore errors thrown in log method to prevent cycle', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        return this.state.error ? null : this.props.children;
+      }
+    }
+    class ErrorThrowingComponent extends React.Component {
+      render() {
+        throw new Error('render error');
+      }
+    }
+
+    const uncaughtErrors = [];
+    const caughtErrors = [];
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError(error, errorInfo) {
+        uncaughtErrors.push(error, errorInfo);
+      },
+      onCaughtError(error, errorInfo) {
+        caughtErrors.push(error, errorInfo);
+        throw new Error('onCaughtError error');
+      },
+    });
+
+    const ref = React.createRef();
+
+    await fakeAct(() => {
+      root.render(
+        <div>
+          <ErrorBoundary ref={ref}>
+            <span>
+              <ErrorThrowingComponent />
+            </span>
+          </ErrorBoundary>
+        </div>,
+      );
+    });
+
+    expect(uncaughtErrors).toEqual([]);
+    expect(caughtErrors).toEqual([
+      expect.objectContaining({
+        message: 'render error',
+      }),
+      expect.objectContaining({
+        componentStack: expect.stringMatching(
+          new RegExp(
+            '\\s+(in|at) ErrorThrowingComponent (.*)\n' +
+              '\\s+(in|at) span(.*)\n' +
+              '\\s+(in|at) ErrorBoundary(.*)\n' +
+              '\\s+(in|at) div(.*)',
+          ),
+        ),
+        errorBoundary: ref.current,
+      }),
+    ]);
+
+    // The error thrown in caughtError should be rethrown with a clean stack
+    expect(() => {
+      jest.runAllTimers();
+    }).toThrow('onCaughtError error');
+  });
+
+  it('does not log errors when inside real act', async () => {
+    function ErrorThrowingComponent() {
+      throw new Error('render error');
+    }
+    const uncaughtErrors = [];
+    const caughtErrors = [];
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError(error, errorInfo) {
+        uncaughtErrors.push(error, errorInfo);
+      },
+      onCaughtError(error, errorInfo) {
+        caughtErrors.push(error, errorInfo);
+      },
+    });
+
+    if (__DEV__) {
+      global.IS_REACT_ACT_ENVIRONMENT = true;
+
+      await expect(async () => {
+        await act(() => {
+          root.render(
+            <div>
+              <span>
+                <ErrorThrowingComponent />
+              </span>
+            </div>,
+          );
+        });
+      }).rejects.toThrow('render error');
+    }
+
+    expect(uncaughtErrors).toEqual([]);
+    expect(caughtErrors).toEqual([]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
new file mode 100644
index 00000000000..0a338c8aa87
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -0,0 +1,940 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let useState;
+let useContext;
+let Suspense;
+let SuspenseList;
+let getCacheForType;
+let caches;
+let seededCache;
+let assertLog;
+
+describe('ReactLazyContextPropagation', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    useState = React.useState;
+    useContext = React.useContext;
+    Suspense = React.Suspense;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  // function AsyncText({text, showVersion}) {
+  //   const version = readText(text);
+  //   const fullText = showVersion ? `${text} [v${version}]` : text;
+  //   Scheduler.log(fullText);
+  //   return text;
+  // }
+
+  function seedNextTextCache(text) {
+    if (seededCache === null) {
+      seededCache = createTextCache();
+    }
+    seededCache.resolve(text);
+  }
+
+  function resolveMostRecentTextCache(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  const resolveText = resolveMostRecentTextCache;
+
+  // function rejectMostRecentTextCache(text, error) {
+  //   if (caches.length === 0) {
+  //     throw Error('Cache does not exist.');
+  //   } else {
+  //     // Resolve the most recently created cache. An older cache can by
+  //     // resolved with `caches[index].reject(text, error)`.
+  //     caches[caches.length - 1].reject(text, error);
+  //   }
+  // }
+
+  it(
+    'context change should prevent bailout of memoized component (useMemo -> ' +
+      'no intermediate fiber)',
+    async () => {
+      const root = ReactNoop.createRoot();
+
+      const Context = React.createContext(0);
+
+      let setValue;
+      function App() {
+        const [value, _setValue] = useState(0);
+        setValue = _setValue;
+
+        // NOTE: It's an important part of this test that we're memoizing the
+        // props of the Consumer component, as opposed to wrapping in an
+        // additional memoized fiber, because the implementation propagates
+        // context changes whenever a fiber bails out.
+        const consumer = React.useMemo(() => <Consumer />, []);
+
+        return <Context.Provider value={value}>{consumer}</Context.Provider>;
+      }
+
+      function Consumer() {
+        const value = useContext(Context);
+        // Even though Consumer is memoized, Consumer should re-render
+        // DeepChild whenever the context value changes. Otherwise DeepChild
+        // won't receive the new value.
+        return <DeepChild value={value} />;
+      }
+
+      function DeepChild({value}) {
+        return <Text text={value} />;
+      }
+
+      await act(() => {
+        root.render(<App />);
+      });
+      assertLog([0]);
+      expect(root).toMatchRenderedOutput('0');
+
+      await act(() => {
+        setValue(1);
+      });
+      assertLog([1]);
+      expect(root).toMatchRenderedOutput('1');
+    },
+  );
+
+  it('context change should prevent bailout of memoized component (memo HOC)', async () => {
+    const root = ReactNoop.createRoot();
+
+    const Context = React.createContext(0);
+
+    let setValue;
+    function App() {
+      const [value, _setValue] = useState(0);
+      setValue = _setValue;
+      return (
+        <Context.Provider value={value}>
+          <Consumer />
+        </Context.Provider>
+      );
+    }
+
+    const Consumer = React.memo(() => {
+      const value = useContext(Context);
+      // Even though Consumer is memoized, Consumer should re-render
+      // DeepChild whenever the context value changes. Otherwise DeepChild
+      // won't receive the new value.
+      return <DeepChild value={value} />;
+    });
+
+    function DeepChild({value}) {
+      return <Text text={value} />;
+    }
+
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() => {
+      setValue(1);
+    });
+    assertLog([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  it('context change should prevent bailout of memoized component (PureComponent)', async () => {
+    const root = ReactNoop.createRoot();
+
+    const Context = React.createContext(0);
+
+    let setValue;
+    function App() {
+      const [value, _setValue] = useState(0);
+      setValue = _setValue;
+      return (
+        <Context.Provider value={value}>
+          <Consumer />
+        </Context.Provider>
+      );
+    }
+
+    class Consumer extends React.PureComponent {
+      static contextType = Context;
+      render() {
+        // Even though Consumer is memoized, Consumer should re-render
+        // DeepChild whenever the context value changes. Otherwise DeepChild
+        // won't receive the new value.
+        return <DeepChild value={this.context} />;
+      }
+    }
+
+    function DeepChild({value}) {
+      return <Text text={value} />;
+    }
+
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() => {
+      setValue(1);
+    });
+    assertLog([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  it("context consumer bails out if context hasn't changed", async () => {
+    const root = ReactNoop.createRoot();
+
+    const Context = React.createContext(0);
+
+    function App() {
+      return (
+        <Context.Provider value={0}>
+          <Consumer />
+        </Context.Provider>
+      );
+    }
+
+    let setOtherValue;
+    const Consumer = React.memo(() => {
+      const value = useContext(Context);
+
+      const [, _setOtherValue] = useState(0);
+      setOtherValue = _setOtherValue;
+
+      Scheduler.log('Consumer');
+
+      return <Text text={value} />;
+    });
+
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Consumer', 0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() => {
+      // Intentionally calling setState to some other arbitrary value before
+      // setting it back to the current one. That way an update is scheduled,
+      // but we'll bail out during render when nothing has changed.
+      setOtherValue(1);
+      setOtherValue(0);
+    });
+    // NOTE: If this didn't yield anything, that indicates that we never visited
+    // the consumer during the render phase, which probably means the eager
+    // bailout mechanism kicked in. Because we're testing the _lazy_ bailout
+    // mechanism, update this test to foil the _eager_ bailout, somehow. Perhaps
+    // by switching to useReducer.
+    assertLog(['Consumer']);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  // @gate enableLegacyCache
+  it('context is propagated across retries', async () => {
+    const root = ReactNoop.createRoot();
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Async />
+          </Suspense>
+          <Text text={value} />
+        </Context.Provider>
+      );
+    }
+
+    function Async() {
+      const value = useContext(Context);
+      readText(value);
+
+      // When `readText` suspends, we haven't yet visited Indirection and all
+      // of its children. They won't get rendered until a later retry.
+      return <Indirection />;
+    }
+
+    const Indirection = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild />;
+    });
+
+    function DeepChild() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    await seedNextTextCache('A');
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      // Intentionally not wrapping in startTransition, so that the fallback
+      // the fallback displays despite this being a refresh.
+      setContext('B');
+    });
+    assertLog([
+      'Suspend! [B]',
+      'Loading...',
+      'B',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...B');
+
+    await act(async () => {
+      await resolveText('B');
+    });
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate enableLegacyCache
+  it('multiple contexts are propagated across retries', async () => {
+    // Same as previous test, but with multiple context providers
+    const root = ReactNoop.createRoot();
+
+    const Context1 = React.createContext('A');
+    const Context2 = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context1.Provider value={value}>
+          <Context2.Provider value={value}>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Async />
+            </Suspense>
+            <Text text={value} />
+          </Context2.Provider>
+        </Context1.Provider>
+      );
+    }
+
+    function Async() {
+      const value = useContext(Context1);
+      readText(value);
+
+      // When `readText` suspends, we haven't yet visited Indirection and all
+      // of its children. They won't get rendered until a later retry.
+      return (
+        <>
+          <Indirection1 />
+          <Indirection2 />
+        </>
+      );
+    }
+
+    const Indirection1 = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild1 />;
+    });
+
+    const Indirection2 = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild2 />;
+    });
+
+    function DeepChild1() {
+      const value = useContext(Context1);
+      return <Text text={value} />;
+    }
+
+    function DeepChild2() {
+      const value = useContext(Context2);
+      return <Text text={value} />;
+    }
+
+    await seedNextTextCache('A');
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A', 'A']);
+    expect(root).toMatchRenderedOutput('AAA');
+
+    await act(() => {
+      // Intentionally not wrapping in startTransition, so that the fallback
+      // the fallback displays despite this being a refresh.
+      setContext('B');
+    });
+    assertLog([
+      'Suspend! [B]',
+      'Loading...',
+      'B',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...B');
+
+    await act(async () => {
+      await resolveText('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BBB');
+  });
+
+  // @gate enableLegacyCache && !disableLegacyMode
+  it('context is propagated across retries (legacy)', async () => {
+    const root = ReactNoop.createLegacyRoot();
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Async />
+          </Suspense>
+          <Text text={value} />
+        </Context.Provider>
+      );
+    }
+
+    function Async() {
+      const value = useContext(Context);
+      readText(value);
+
+      // When `readText` suspends, we haven't yet visited Indirection and all
+      // of its children. They won't get rendered until a later retry.
+      return <Indirection />;
+    }
+
+    const Indirection = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild />;
+    });
+
+    function DeepChild() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    await seedNextTextCache('A');
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      // Intentionally not wrapping in startTransition, so that the fallback
+      // the fallback displays despite this being a refresh.
+      setContext('B');
+    });
+    assertLog(['Suspend! [B]', 'Loading...', 'B']);
+    expect(root).toMatchRenderedOutput('Loading...B');
+
+    await act(async () => {
+      await resolveText('B');
+    });
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate enableLegacyCache && enableLegacyHidden
+  it('context is propagated through offscreen trees', async () => {
+    const LegacyHidden = React.unstable_LegacyHidden;
+
+    const root = ReactNoop.createRoot();
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <LegacyHidden mode="hidden">
+            <Indirection />
+          </LegacyHidden>
+          <Text text={value} />
+        </Context.Provider>
+      );
+    }
+
+    const Indirection = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild />;
+    });
+
+    function DeepChild() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    await seedNextTextCache('A');
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate enableLegacyCache && enableLegacyHidden
+  it('multiple contexts are propagated across through offscreen trees', async () => {
+    // Same as previous test, but with multiple context providers
+    const LegacyHidden = React.unstable_LegacyHidden;
+
+    const root = ReactNoop.createRoot();
+
+    const Context1 = React.createContext('A');
+    const Context2 = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context1.Provider value={value}>
+          <Context2.Provider value={value}>
+            <LegacyHidden mode="hidden">
+              <Indirection1 />
+              <Indirection2 />
+            </LegacyHidden>
+            <Text text={value} />
+          </Context2.Provider>
+        </Context1.Provider>
+      );
+    }
+
+    const Indirection1 = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild1 />;
+    });
+
+    const Indirection2 = React.memo(() => {
+      // This child must always be consistent with the sibling Text component.
+      return <DeepChild2 />;
+    });
+
+    function DeepChild1() {
+      const value = useContext(Context1);
+      return <Text text={value} />;
+    }
+
+    function DeepChild2() {
+      const value = useContext(Context2);
+      return <Text text={value} />;
+    }
+
+    await seedNextTextCache('A');
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A', 'A']);
+    expect(root).toMatchRenderedOutput('AAA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog(['B', 'B', 'B']);
+    expect(root).toMatchRenderedOutput('BBB');
+  });
+
+  // @gate enableSuspenseList
+  it('contexts are propagated through SuspenseList', async () => {
+    // This kinda tests an implementation detail. SuspenseList has an early
+    // bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably
+    // should just use that function, though.
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      const children = React.useMemo(
+        () => (
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <Child />
+            <Child />
+          </SuspenseList>
+        ),
+        [],
+      );
+      return <Context.Provider value={value}>{children}</Context.Provider>;
+    }
+
+    function Child() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  it('nested bailouts', async () => {
+    // Lazy context propagation will stop propagating when it hits the first
+    // match. If we bail out again inside that tree, we must resume propagating.
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <ChildIndirection />
+        </Context.Provider>
+      );
+    }
+
+    const ChildIndirection = React.memo(() => {
+      return <Child />;
+    });
+
+    function Child() {
+      const value = useContext(Context);
+      return (
+        <>
+          <Text text={value} />
+          <DeepChildIndirection />
+        </>
+      );
+    }
+
+    const DeepChildIndirection = React.memo(() => {
+      return <DeepChild />;
+    });
+
+    function DeepChild() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate enableLegacyCache
+  it('nested bailouts across retries', async () => {
+    // Lazy context propagation will stop propagating when it hits the first
+    // match. If we bail out again inside that tree, we must resume propagating.
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Async value={value} />
+          </Suspense>
+        </Context.Provider>
+      );
+    }
+
+    function Async({value}) {
+      // When this suspends, we won't be able to visit its children during the
+      // current render. So we must take extra care to propagate the context
+      // change in such a way that they're aren't lost when we retry in a
+      // later render.
+      readText(value);
+      return <Child value={value} />;
+    }
+
+    function Child() {
+      const value = useContext(Context);
+      return (
+        <>
+          <Text text={value} />
+          <DeepChildIndirection />
+        </>
+      );
+    }
+
+    const DeepChildIndirection = React.memo(() => {
+      return <DeepChild />;
+    });
+
+    function DeepChild() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await seedNextTextCache('A');
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog([
+      'Suspend! [B]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      await resolveText('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate enableLegacyCache && enableLegacyHidden
+  it('nested bailouts through offscreen trees', async () => {
+    // Lazy context propagation will stop propagating when it hits the first
+    // match. If we bail out again inside that tree, we must resume propagating.
+
+    const LegacyHidden = React.unstable_LegacyHidden;
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <LegacyHidden mode="hidden">
+            <Child />
+          </LegacyHidden>
+        </Context.Provider>
+      );
+    }
+
+    function Child() {
+      const value = useContext(Context);
+      return (
+        <>
+          <Text text={value} />
+          <DeepChildIndirection />
+        </>
+      );
+    }
+
+    const DeepChildIndirection = React.memo(() => {
+      return <DeepChild />;
+    });
+
+    function DeepChild() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  it('finds context consumers in multiple sibling branches', async () => {
+    // This test confirms that when we find a matching context consumer during
+    // propagation, we continue propagating to its sibling branches.
+
+    const Context = React.createContext('A');
+
+    let setContext;
+    function App() {
+      const [value, setValue] = useState('A');
+      setContext = setValue;
+      return (
+        <Context.Provider value={value}>
+          <Blah />
+        </Context.Provider>
+      );
+    }
+
+    const Blah = React.memo(() => {
+      return (
+        <>
+          <Indirection />
+          <Indirection />
+        </>
+      );
+    });
+
+    const Indirection = React.memo(() => {
+      return <Child />;
+    });
+
+    function Child() {
+      const value = useContext(Context);
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(() => {
+      setContext('B');
+    });
+    assertLog(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactDefaultTransitionIndicator-test.js b/packages/react-reconciler/src/__tests__/ReactDefaultTransitionIndicator-test.js
new file mode 100644
index 00000000000..fb698e821aa
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactDefaultTransitionIndicator-test.js
@@ -0,0 +1,480 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let act;
+let use;
+let useOptimistic;
+let useState;
+let useTransition;
+let useDeferredValue;
+let assertLog;
+let waitForPaint;
+
+describe('ReactDefaultTransitionIndicator', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    use = React.use;
+    useOptimistic = React.useOptimistic;
+    useState = React.useState;
+    useTransition = React.useTransition;
+    useDeferredValue = React.useDeferredValue;
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('triggers the default indicator while a transition is on-going', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function App() {
+      return use(promise);
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      React.startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    assertLog(['start']);
+
+    await act(async () => {
+      await resolve('Hello');
+    });
+
+    assertLog(['stop']);
+
+    expect(root).toMatchRenderedOutput('Hello');
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('does not trigger the default indicator if there is a sync mutation', async () => {
+    const promiseA = Promise.resolve('Hi');
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+    let update;
+    function App({children}) {
+      const [state, setState] = useState('');
+      update = setState;
+      return (
+        <div>
+          {state}
+          {children}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      React.startTransition(() => {
+        root.render(<App>{promiseA}</App>);
+      });
+    });
+
+    assertLog(['start', 'stop']);
+
+    expect(root).toMatchRenderedOutput(<div>Hi</div>);
+
+    await act(() => {
+      update('Loading...');
+      React.startTransition(() => {
+        update('');
+        root.render(<App>{promiseB}</App>);
+      });
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput(<div>Loading...Hi</div>);
+
+    await act(async () => {
+      await resolveB('Hello');
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('does not trigger the default indicator if there is an optimistic update', async () => {
+    const promiseA = Promise.resolve('Hi');
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+    let update;
+    function App({children}) {
+      const [state, setOptimistic] = useOptimistic('');
+      update = setOptimistic;
+      return (
+        <div>
+          {state}
+          {children}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      React.startTransition(() => {
+        root.render(<App>{promiseA}</App>);
+      });
+    });
+
+    assertLog(['start', 'stop']);
+
+    expect(root).toMatchRenderedOutput(<div>Hi</div>);
+
+    await act(() => {
+      React.startTransition(() => {
+        update('Loading...');
+        root.render(<App>{promiseB}</App>);
+      });
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput(<div>Loading...Hi</div>);
+
+    await act(async () => {
+      await resolveB('Hello');
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('does not trigger the default indicator if there is an isPending update', async () => {
+    const promiseA = Promise.resolve('Hi');
+    let resolveB;
+    const promiseB = new Promise(r => (resolveB = r));
+    let start;
+    function App({children}) {
+      const [isPending, startTransition] = useTransition();
+      start = startTransition;
+      return (
+        <div>
+          {isPending ? 'Loading...' : ''}
+          {children}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      React.startTransition(() => {
+        root.render(<App>{promiseA}</App>);
+      });
+    });
+
+    assertLog(['start', 'stop']);
+
+    expect(root).toMatchRenderedOutput(<div>Hi</div>);
+
+    await act(() => {
+      start(() => {
+        root.render(<App>{promiseB}</App>);
+      });
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput(<div>Loading...Hi</div>);
+
+    await act(async () => {
+      await resolveB('Hello');
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('triggers the default indicator while an async transition is ongoing', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    let start;
+    function App() {
+      const [, startTransition] = useTransition();
+      start = startTransition;
+      return 'Hi';
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([]);
+
+    await act(() => {
+      // Start an async action but we haven't called setState yet
+      start(() => promise);
+    });
+
+    assertLog(['start']);
+
+    await act(async () => {
+      await resolve('Hello');
+    });
+
+    assertLog(['stop']);
+
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('triggers the default indicator while an async transition is ongoing (isomorphic)', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function App() {
+      return 'Hi';
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([]);
+
+    await act(() => {
+      // Start an async action but we haven't called setState yet
+      React.startTransition(() => promise);
+    });
+
+    assertLog(['start']);
+
+    await act(async () => {
+      await resolve('Hello');
+    });
+
+    assertLog(['stop']);
+
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('does not triggers isomorphic async action default indicator if there are two different ones', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function App() {
+      return 'Hi';
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    // Initialize second root. This is now ambiguous which indicator to use.
+    ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start2');
+        return () => {
+          Scheduler.log('stop2');
+        };
+      },
+    });
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([]);
+
+    await act(() => {
+      // Start an async action but we haven't called setState yet
+      React.startTransition(() => promise);
+    });
+
+    assertLog([]);
+
+    await act(async () => {
+      await resolve('Hello');
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('does not triggers isomorphic async action default indicator if there is a loading state', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    let update;
+    function App() {
+      const [state, setState] = useState(false);
+      update = setState;
+      return state ? 'Loading' : 'Hi';
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([]);
+
+    await act(() => {
+      update(true);
+      React.startTransition(() => promise.then(() => update(false)));
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput('Loading');
+
+    await act(async () => {
+      await resolve('Hello');
+    });
+
+    assertLog([]);
+
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('should not trigger for useDeferredValue (sync)', async () => {
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+    function App({value}) {
+      const deferredValue = useDeferredValue(value, 'Hi');
+      return <Text text={deferredValue} />;
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(async () => {
+      root.render(<App value="Hello" />);
+      await waitForPaint(['Hi']);
+      expect(root).toMatchRenderedOutput('Hi');
+    });
+
+    assertLog(['Hello']);
+
+    expect(root).toMatchRenderedOutput('Hello');
+
+    assertLog([]);
+
+    await act(async () => {
+      root.render(<App value="Bye" />);
+      await waitForPaint(['Hello']);
+      expect(root).toMatchRenderedOutput('Hello');
+    });
+
+    assertLog(['Bye']);
+
+    expect(root).toMatchRenderedOutput('Bye');
+  });
+
+  // @gate enableDefaultTransitionIndicator
+  it('should not trigger for useDeferredValue (transition)', async () => {
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+    function App({value}) {
+      const deferredValue = useDeferredValue(value, 'Hi');
+      return <Text text={deferredValue} />;
+    }
+
+    const root = ReactNoop.createRoot({
+      onDefaultTransitionIndicator() {
+        Scheduler.log('start');
+        return () => {
+          Scheduler.log('stop');
+        };
+      },
+    });
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<App value="Hello" />);
+      });
+      await waitForPaint(['start', 'Hi', 'stop']);
+      expect(root).toMatchRenderedOutput('Hi');
+    });
+
+    assertLog(['Hello']);
+
+    expect(root).toMatchRenderedOutput('Hello');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
new file mode 100644
index 00000000000..ad07ce89589
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
@@ -0,0 +1,930 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let startTransition;
+let useDeferredValue;
+let useMemo;
+let useState;
+let Suspense;
+let Activity;
+let assertLog;
+let waitForPaint;
+let textCache;
+
+describe('ReactDeferredValue', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    startTransition = React.startTransition;
+    useDeferredValue = React.useDeferredValue;
+    useMemo = React.useMemo;
+    useState = React.useState;
+    Suspense = React.Suspense;
+    Activity = React.Activity;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('does not cause an infinite defer loop if the original value isn\t memoized', async () => {
+    function App({value}) {
+      // The object passed to useDeferredValue is never the same as the previous
+      // render. A naive implementation would endlessly spawn deferred renders.
+      const {value: deferredValue} = useDeferredValue({value});
+
+      const child = useMemo(
+        () => <Text text={'Original: ' + value} />,
+        [value],
+      );
+
+      const deferredChild = useMemo(
+        () => <Text text={'Deferred: ' + deferredValue} />,
+        [deferredValue],
+      );
+
+      return (
+        <div>
+          <div>{child}</div>
+          <div>{deferredChild}</div>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Initial render
+    await act(() => {
+      root.render(<App value={1} />);
+    });
+    assertLog(['Original: 1', 'Deferred: 1']);
+
+    // If it's an urgent update, the value is deferred
+    await act(async () => {
+      root.render(<App value={2} />);
+
+      await waitForPaint(['Original: 2']);
+      // The deferred value updates in a separate render
+      await waitForPaint(['Deferred: 2']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 2</div>
+        <div>Deferred: 2</div>
+      </div>,
+    );
+
+    // But if it updates during a transition, it doesn't defer
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App value={3} />);
+      });
+      // The deferred value updates in the same render as the original
+      await waitForPaint(['Original: 3', 'Deferred: 3']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 3</div>
+        <div>Deferred: 3</div>
+      </div>,
+    );
+  });
+
+  it('does not defer during a transition', async () => {
+    function App({value}) {
+      const deferredValue = useDeferredValue(value);
+
+      const child = useMemo(
+        () => <Text text={'Original: ' + value} />,
+        [value],
+      );
+
+      const deferredChild = useMemo(
+        () => <Text text={'Deferred: ' + deferredValue} />,
+        [deferredValue],
+      );
+
+      return (
+        <div>
+          <div>{child}</div>
+          <div>{deferredChild}</div>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Initial render
+    await act(() => {
+      root.render(<App value={1} />);
+    });
+    assertLog(['Original: 1', 'Deferred: 1']);
+
+    // If it's an urgent update, the value is deferred
+    await act(async () => {
+      root.render(<App value={2} />);
+
+      await waitForPaint(['Original: 2']);
+      // The deferred value updates in a separate render
+      await waitForPaint(['Deferred: 2']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 2</div>
+        <div>Deferred: 2</div>
+      </div>,
+    );
+
+    // But if it updates during a transition, it doesn't defer
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App value={3} />);
+      });
+      // The deferred value updates in the same render as the original
+      await waitForPaint(['Original: 3', 'Deferred: 3']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 3</div>
+        <div>Deferred: 3</div>
+      </div>,
+    );
+  });
+
+  it("works if there's a render phase update", async () => {
+    function App({value: propValue}) {
+      const [value, setValue] = useState(null);
+      if (value !== propValue) {
+        setValue(propValue);
+      }
+
+      const deferredValue = useDeferredValue(value);
+
+      const child = useMemo(
+        () => <Text text={'Original: ' + value} />,
+        [value],
+      );
+
+      const deferredChild = useMemo(
+        () => <Text text={'Deferred: ' + deferredValue} />,
+        [deferredValue],
+      );
+
+      return (
+        <div>
+          <div>{child}</div>
+          <div>{deferredChild}</div>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Initial render
+    await act(() => {
+      root.render(<App value={1} />);
+    });
+    assertLog(['Original: 1', 'Deferred: 1']);
+
+    // If it's an urgent update, the value is deferred
+    await act(async () => {
+      root.render(<App value={2} />);
+
+      await waitForPaint(['Original: 2']);
+      // The deferred value updates in a separate render
+      await waitForPaint(['Deferred: 2']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 2</div>
+        <div>Deferred: 2</div>
+      </div>,
+    );
+
+    // But if it updates during a transition, it doesn't defer
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App value={3} />);
+      });
+      // The deferred value updates in the same render as the original
+      await waitForPaint(['Original: 3', 'Deferred: 3']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 3</div>
+        <div>Deferred: 3</div>
+      </div>,
+    );
+  });
+
+  it('regression test: during urgent update, reuse previous value, not initial value', async () => {
+    function App({value: propValue}) {
+      const [value, setValue] = useState(null);
+      if (value !== propValue) {
+        setValue(propValue);
+      }
+
+      const deferredValue = useDeferredValue(value);
+
+      const child = useMemo(
+        () => <Text text={'Original: ' + value} />,
+        [value],
+      );
+
+      const deferredChild = useMemo(
+        () => <Text text={'Deferred: ' + deferredValue} />,
+        [deferredValue],
+      );
+
+      return (
+        <div>
+          <div>{child}</div>
+          <div>{deferredChild}</div>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Initial render
+    await act(async () => {
+      root.render(<App value={1} />);
+      await waitForPaint(['Original: 1', 'Deferred: 1']);
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>Original: 1</div>
+          <div>Deferred: 1</div>
+        </div>,
+      );
+    });
+
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App value={2} />);
+      });
+      // In the regression, the memoized value was not updated during non-urgent
+      // updates, so this would flip the deferred value back to the initial
+      // value (1) instead of reusing the current one (2).
+      await waitForPaint(['Original: 2', 'Deferred: 2']);
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>Original: 2</div>
+          <div>Deferred: 2</div>
+        </div>,
+      );
+    });
+
+    await act(async () => {
+      root.render(<App value={3} />);
+      await waitForPaint(['Original: 3']);
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>Original: 3</div>
+          <div>Deferred: 2</div>
+        </div>,
+      );
+      await waitForPaint(['Deferred: 3']);
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>Original: 3</div>
+          <div>Deferred: 3</div>
+        </div>,
+      );
+    });
+  });
+
+  it('supports initialValue argument', async () => {
+    function App() {
+      const value = useDeferredValue('Final', 'Initial');
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+      await waitForPaint(['Initial']);
+      expect(root).toMatchRenderedOutput('Initial');
+    });
+    assertLog(['Final']);
+    expect(root).toMatchRenderedOutput('Final');
+  });
+
+  it('defers during initial render when initialValue is provided, even if render is not sync', async () => {
+    function App() {
+      const value = useDeferredValue('Final', 'Initial');
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      // Initial mount is a transition, but it should defer anyway
+      startTransition(() => root.render(<App />));
+      await waitForPaint(['Initial']);
+      expect(root).toMatchRenderedOutput('Initial');
+    });
+    assertLog(['Final']);
+    expect(root).toMatchRenderedOutput('Final');
+  });
+
+  it(
+    'if a suspended render spawns a deferred task, we can switch to the ' +
+      'deferred task without finishing the original one (no Suspense boundary)',
+    async () => {
+      function App() {
+        const text = useDeferredValue('Final', 'Loading...');
+        return <AsyncText text={text} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => root.render(<App />));
+      assertLog([
+        'Suspend! [Loading...]',
+        // The initial value suspended, so we attempt the final value, which
+        // also suspends.
+        'Suspend! [Final]',
+        // pre-warming
+        'Suspend! [Loading...]',
+        'Suspend! [Final]',
+      ]);
+      expect(root).toMatchRenderedOutput(null);
+
+      // The final value loads, so we can skip the initial value entirely.
+      await act(() => resolveText('Final'));
+      assertLog(['Final']);
+      expect(root).toMatchRenderedOutput('Final');
+
+      // When the initial value finally loads, nothing happens because we no
+      // longer need it.
+      await act(() => resolveText('Loading...'));
+      assertLog([]);
+      expect(root).toMatchRenderedOutput('Final');
+    },
+  );
+
+  it(
+    'if a suspended render spawns a deferred task, we can switch to the ' +
+      'deferred task without finishing the original one (no Suspense boundary, ' +
+      'synchronous parent update)',
+    async () => {
+      function App() {
+        const text = useDeferredValue('Final', 'Loading...');
+        return <AsyncText text={text} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      // TODO: This made me realize that we don't warn if an update spawns a
+      // deferred task without being wrapped with `act`. Usually it would work
+      // anyway because the parent task has to wrapped with `act`... but not
+      // if it was flushed with `flushSync` instead.
+      await act(() => {
+        ReactNoop.flushSync(() => root.render(<App />));
+      });
+      assertLog([
+        'Suspend! [Loading...]',
+        // The initial value suspended, so we attempt the final value, which
+        // also suspends.
+        'Suspend! [Final]',
+        // pre-warming
+        'Suspend! [Loading...]',
+        'Suspend! [Final]',
+      ]);
+      expect(root).toMatchRenderedOutput(null);
+
+      // The final value loads, so we can skip the initial value entirely.
+      await act(() => resolveText('Final'));
+      assertLog(['Final']);
+      expect(root).toMatchRenderedOutput('Final');
+
+      // When the initial value finally loads, nothing happens because we no
+      // longer need it.
+      await act(() => resolveText('Loading...'));
+      assertLog([]);
+      expect(root).toMatchRenderedOutput('Final');
+    },
+  );
+
+  it(
+    'if a suspended render spawns a deferred task, we can switch to the ' +
+      'deferred task without finishing the original one (Suspense boundary)',
+    async () => {
+      function App() {
+        const text = useDeferredValue('Final', 'Loading...');
+        return <AsyncText text={text} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() =>
+        root.render(
+          <Suspense fallback={<Text text="Fallback" />}>
+            <App />
+          </Suspense>,
+        ),
+      );
+      assertLog([
+        'Suspend! [Loading...]',
+        'Fallback',
+
+        // The initial value suspended, so we attempt the final value, which
+        // also suspends.
+        'Suspend! [Final]',
+        // pre-warming
+        'Suspend! [Final]',
+      ]);
+      expect(root).toMatchRenderedOutput('Fallback');
+
+      // The final value loads, so we can skip the initial value entirely.
+      await act(() => resolveText('Final'));
+      assertLog(['Final']);
+      expect(root).toMatchRenderedOutput('Final');
+
+      // When the initial value finally loads, nothing happens because we no
+      // longer need it.
+      await act(() => resolveText('Loading...'));
+      assertLog([]);
+      expect(root).toMatchRenderedOutput('Final');
+    },
+  );
+
+  it(
+    'if a suspended render spawns a deferred task that also suspends, we can ' +
+      'finish the original task if that one loads first',
+    async () => {
+      function App() {
+        const text = useDeferredValue('Final', 'Loading...');
+        return <AsyncText text={text} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => root.render(<App />));
+      assertLog([
+        'Suspend! [Loading...]',
+        // The initial value suspended, so we attempt the final value, which
+        // also suspends.
+        'Suspend! [Final]',
+        // pre-warming
+        'Suspend! [Loading...]',
+        'Suspend! [Final]',
+      ]);
+      expect(root).toMatchRenderedOutput(null);
+
+      // The initial value resolves first, so we render that.
+      await act(() => resolveText('Loading...'));
+      assertLog([
+        'Loading...',
+        // Still waiting for the final value.
+        'Suspend! [Final]',
+      ]);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      // The final value loads, so we can switch to that.
+      await act(() => resolveText('Final'));
+      assertLog(['Final']);
+      expect(root).toMatchRenderedOutput('Final');
+    },
+  );
+
+  it(
+    'if there are multiple useDeferredValues in the same tree, only the ' +
+      'first level defers; subsequent ones go straight to the final value, to ' +
+      'avoid a waterfall',
+    async () => {
+      function App() {
+        const showContent = useDeferredValue(true, false);
+        if (!showContent) {
+          return <Text text="App Preview" />;
+        }
+        return <Content />;
+      }
+
+      function Content() {
+        const text = useDeferredValue('Content', 'Content Preview');
+        return <AsyncText text={text} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      resolveText('App Preview');
+
+      await act(() => root.render(<App />));
+      assertLog([
+        // The App shows an immediate preview
+        'App Preview',
+        // Then we switch to showing the content. The Content component also
+        // contains a useDeferredValue, but since we already showed a preview
+        // in a parent component, we skip the preview in the inner one and
+        // go straight to attempting the final value.
+        //
+        // (Note that this is intentionally different from how nested Suspense
+        // boundaries work, where we always prefer to show the innermost
+        // loading state.)
+        'Suspend! [Content]',
+      ]);
+      // Still showing the App preview state because the inner
+      // content suspended.
+      expect(root).toMatchRenderedOutput('App Preview');
+
+      // Finish loading the content
+      await act(() => resolveText('Content'));
+      // We didn't even attempt to render Content Preview.
+      assertLog(['Content']);
+      expect(root).toMatchRenderedOutput('Content');
+    },
+  );
+
+  it(
+    "regression: useDeferredValue's initial value argument works even if an unrelated " +
+      'transition is suspended',
+    async () => {
+      // Simulates a previous bug where a new useDeferredValue hook is mounted
+      // while some unrelated transition is suspended. In the regression case,
+      // the initial values was skipped/ignored.
+
+      function Content({text}) {
+        return (
+          <AsyncText text={useDeferredValue(text, `Preview ${text}...`)} />
+        );
+      }
+
+      function App({text}) {
+        // Use a key to force a new Content instance to be mounted each time
+        // the text changes.
+        return <Content key={text} text={text} />;
+      }
+
+      const root = ReactNoop.createRoot();
+
+      // Render a previous UI using useDeferredValue. Suspend on the
+      // final value.
+      resolveText('Preview A...');
+      await act(() => startTransition(() => root.render(<App text="A" />)));
+      assertLog(['Preview A...', 'Suspend! [A]']);
+
+      // While it's still suspended, update the UI to show a different screen
+      // with a different preview value. We should be able to show the new
+      // preview even though the previous transition never finished.
+      resolveText('Preview B...');
+      await act(() => startTransition(() => root.render(<App text="B" />)));
+      assertLog(['Preview B...', 'Suspend! [B]']);
+
+      // Now finish loading the final value.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(root).toMatchRenderedOutput('B');
+    },
+  );
+
+  it('avoids a useDeferredValue waterfall when separated by a Suspense boundary', async () => {
+    // Same as the previous test but with a Suspense boundary separating the
+    // two useDeferredValue hooks.
+    function App() {
+      const showContent = useDeferredValue(true, false);
+      if (!showContent) {
+        return <Text text="App Preview" />;
+      }
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Content />
+        </Suspense>
+      );
+    }
+
+    function Content() {
+      const text = useDeferredValue('Content', 'Content Preview');
+      return <AsyncText text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('App Preview');
+
+    await act(() => root.render(<App />));
+    assertLog([
+      // The App shows an immediate preview
+      'App Preview',
+      // Then we switch to showing the content. The Content component also
+      // contains a useDeferredValue, but since we already showed a preview
+      // in a parent component, we skip the preview in the inner one and
+      // go straight to attempting the final value.
+      'Suspend! [Content]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Content]',
+    ]);
+    // The content suspended, so we show a Suspense fallback
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // Finish loading the content
+    await act(() => resolveText('Content'));
+    // We didn't even attempt to render Content Preview.
+    assertLog(['Content']);
+    expect(root).toMatchRenderedOutput('Content');
+  });
+
+  // @gate enableActivity
+  it('useDeferredValue can spawn a deferred task while prerendering a hidden tree', async () => {
+    function App() {
+      const text = useDeferredValue('Final', 'Preview');
+      return (
+        <div>
+          <AsyncText text={text} />
+        </div>
+      );
+    }
+
+    let revealContent;
+    function Container({children}) {
+      const [shouldShow, setState] = useState(false);
+      revealContent = () => setState(true);
+      return (
+        <Activity mode={shouldShow ? 'visible' : 'hidden'}>{children}</Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender a hidden tree
+    resolveText('Preview');
+    await act(() =>
+      root.render(
+        <Container>
+          <App />
+        </Container>,
+      ),
+    );
+    assertLog(['Preview', 'Suspend! [Final]']);
+    expect(root).toMatchRenderedOutput(<div hidden={true}>Preview</div>);
+
+    // Finish loading the content
+    await act(() => resolveText('Final'));
+    assertLog(['Final']);
+    expect(root).toMatchRenderedOutput(<div hidden={true}>Final</div>);
+
+    // Now reveal the hidden tree. It should toggle the visibility without
+    // having to re-render anything inside the prerendered tree.
+    await act(() => revealContent());
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(<div>Final</div>);
+  });
+
+  // @gate enableActivity
+  it('useDeferredValue can prerender the initial value inside a hidden tree', async () => {
+    function App({text}) {
+      const renderedText = useDeferredValue(text, `Preview [${text}]`);
+      return (
+        <div>
+          <Text text={renderedText} />
+        </div>
+      );
+    }
+
+    let revealContent;
+    function Container({children}) {
+      const [shouldShow, setState] = useState(false);
+      revealContent = () => setState(true);
+      return (
+        <Activity mode={shouldShow ? 'visible' : 'hidden'}>{children}</Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender some content
+    await act(() => {
+      root.render(
+        <Container>
+          <App text="A" />
+        </Container>,
+      );
+    });
+    assertLog(['Preview [A]', 'A']);
+    expect(root).toMatchRenderedOutput(<div hidden={true}>A</div>);
+
+    await act(async () => {
+      // While the tree is still hidden, update the pre-rendered tree.
+      root.render(
+        <Container>
+          <App text="B" />
+        </Container>,
+      );
+      // We should switch to pre-rendering the new preview.
+      await waitForPaint([]);
+      await waitForPaint(['Preview [B]']);
+      expect(root).toMatchRenderedOutput(<div hidden={true}>Preview [B]</div>);
+
+      // Before the prerender is complete, reveal the hidden tree. Because we
+      // consider revealing a hidden tree to be the same as mounting a new one,
+      // we should not skip the preview state.
+      revealContent();
+      // Because the preview state was already prerendered, we can reveal it
+      // without any addditional work.
+      if (gate(flags => flags.enableYieldingBeforePassive)) {
+        // Passive effects.
+        await waitForPaint([]);
+      }
+      await waitForPaint([]);
+      expect(root).toMatchRenderedOutput(<div>Preview [B]</div>);
+    });
+    // Finally, finish rendering the final value.
+    assertLog(['B']);
+    expect(root).toMatchRenderedOutput(<div>B</div>);
+  });
+
+  // @gate enableActivity
+  it(
+    'useDeferredValue skips the preview state when revealing a hidden tree ' +
+      'if the final value is referentially identical',
+    async () => {
+      function App({text}) {
+        const renderedText = useDeferredValue(text, `Preview [${text}]`);
+        return (
+          <div>
+            <Text text={renderedText} />
+          </div>
+        );
+      }
+
+      function Container({text, shouldShow}) {
+        return (
+          <Activity mode={shouldShow ? 'visible' : 'hidden'}>
+            <App text={text} />
+          </Activity>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      // Prerender some content
+      await act(() => root.render(<Container text="A" shouldShow={false} />));
+      assertLog(['Preview [A]', 'A']);
+      expect(root).toMatchRenderedOutput(<div hidden={true}>A</div>);
+
+      // Reveal the prerendered tree. Because the final value is referentially
+      // equal to what was already prerendered, we can skip the preview state
+      // and go straight to the final one. The practical upshot of this is
+      // that we can completely prerender the final value without having to
+      // do additional rendering work when the tree is revealed.
+      await act(() => root.render(<Container text="A" shouldShow={true} />));
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<div>A</div>);
+    },
+  );
+
+  // @gate enableActivity
+  it(
+    'useDeferredValue does not skip the preview state when revealing a ' +
+      'hidden tree if the final value is different from the currently rendered one',
+    async () => {
+      function App({text}) {
+        const renderedText = useDeferredValue(text, `Preview [${text}]`);
+        return (
+          <div>
+            <Text text={renderedText} />
+          </div>
+        );
+      }
+
+      function Container({text, shouldShow}) {
+        return (
+          <Activity mode={shouldShow ? 'visible' : 'hidden'}>
+            <App text={text} />
+          </Activity>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      // Prerender some content
+      await act(() => root.render(<Container text="A" shouldShow={false} />));
+      assertLog(['Preview [A]', 'A']);
+      expect(root).toMatchRenderedOutput(<div hidden={true}>A</div>);
+
+      // Reveal the prerendered tree. Because the final value is different from
+      // what was already prerendered, we can't bail out. Since we treat
+      // revealing a hidden tree the same as a new mount, show the preview state
+      // before switching to the final one.
+      await act(async () => {
+        root.render(<Container text="B" shouldShow={true} />);
+        // First commit the preview state
+        await waitForPaint(['Preview [B]']);
+        expect(root).toMatchRenderedOutput(<div>Preview [B]</div>);
+      });
+      // Then switch to the final state
+      assertLog(['B']);
+      expect(root).toMatchRenderedOutput(<div>B</div>);
+    },
+  );
+
+  // @gate enableActivity
+  it(
+    'useDeferredValue does not show "previous" value when revealing a hidden ' +
+      'tree (no initial value)',
+    async () => {
+      function App({text}) {
+        const renderedText = useDeferredValue(text);
+        return (
+          <div>
+            <Text text={renderedText} />
+          </div>
+        );
+      }
+
+      function Container({text, shouldShow}) {
+        return (
+          <Activity mode={shouldShow ? 'visible' : 'hidden'}>
+            <App text={text} />
+          </Activity>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      // Prerender some content
+      await act(() => root.render(<Container text="A" shouldShow={false} />));
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<div hidden={true}>A</div>);
+
+      // Update the prerendered tree and reveal it at the same time. Even though
+      // this is a sync update, we should update B immediately rather than stay
+      // on the old value (A), because conceptually this is a new tree.
+      await act(() => root.render(<Container text="B" shouldShow={true} />));
+      assertLog(['B']);
+      expect(root).toMatchRenderedOutput(<div>B</div>);
+    },
+  );
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
new file mode 100644
index 00000000000..ab02f5df71e
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let act;
+let useEffect;
+let useLayoutEffect;
+let assertLog;
+
+describe('ReactEffectOrdering', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useFakeTimers();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  it('layout unmounts on deletion are fired in parent -> child order', async () => {
+    const root = ReactNoop.createRoot();
+
+    function Parent() {
+      useLayoutEffect(() => {
+        return () => Scheduler.log('Unmount parent');
+      });
+      return <Child />;
+    }
+
+    function Child() {
+      useLayoutEffect(() => {
+        return () => Scheduler.log('Unmount child');
+      });
+      return 'Child';
+    }
+
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(root).toMatchRenderedOutput('Child');
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount parent', 'Unmount child']);
+  });
+
+  it('passive unmounts on deletion are fired in parent -> child order', async () => {
+    const root = ReactNoop.createRoot();
+
+    function Parent() {
+      useEffect(() => {
+        return () => Scheduler.log('Unmount parent');
+      });
+      return <Child />;
+    }
+
+    function Child() {
+      useEffect(() => {
+        return () => Scheduler.log('Unmount child');
+      });
+      return 'Child';
+    }
+
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(root).toMatchRenderedOutput('Child');
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount parent', 'Unmount child']);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js b/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js
new file mode 100644
index 00000000000..5b96ad1ee67
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js
@@ -0,0 +1,346 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Suspense;
+let Activity;
+let ViewTransition;
+let ReactNoop;
+let waitForAll;
+
+describe('ReactFragment', () => {
+  let didCatchErrors = [];
+  let rootCaughtErrors = [];
+  let SomethingThatErrors;
+  let CatchingBoundary;
+  let onCaughtError;
+
+  beforeEach(function () {
+    jest.resetModules();
+
+    React = require('react');
+    Suspense = React.Suspense;
+    Activity = React.Activity;
+    ViewTransition = React.ViewTransition;
+    ReactNoop = require('react-noop-renderer');
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+
+    didCatchErrors = [];
+    rootCaughtErrors = [];
+
+    onCaughtError = function (error, errorInfo) {
+      rootCaughtErrors.push(
+        error.message,
+        normalizeCodeLocInfo(errorInfo.componentStack),
+        React.captureOwnerStack
+          ? normalizeCodeLocInfo(React.captureOwnerStack())
+          : null,
+      );
+    };
+
+    SomethingThatErrors = () => {
+      throw new Error('uh oh');
+    };
+
+    // eslint-disable-next-line no-shadow
+    CatchingBoundary = class CatchingBoundary extends React.Component {
+      constructor() {
+        super();
+        this.state = {};
+      }
+
+      static getDerivedStateFromError(error) {
+        return {errored: true};
+      }
+
+      componentDidCatch(err, errInfo) {
+        didCatchErrors.push(
+          err.message,
+          normalizeCodeLocInfo(errInfo.componentStack),
+        );
+      }
+
+      render() {
+        if (this.state.errored) {
+          return null;
+        }
+        return this.props.children;
+      }
+    };
+  });
+
+  function componentStack(components) {
+    return components
+      .map(component => `\n    in ${component} (at **)`)
+      .join('');
+  }
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/\n +(?:at|in) ([^\(]+) [^\n]*/g, function (m, name) {
+        return '\n    in ' + name + ' (at **)';
+      })
+    );
+  }
+
+  it('retains component and owner stacks when rethrowing an error', async () => {
+    class RethrowingBoundary extends React.Component {
+      static getDerivedStateFromError(error) {
+        throw error;
+      }
+
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function Foo() {
+      return (
+        <RethrowingBoundary>
+          <Bar />
+        </RethrowingBoundary>
+      );
+    }
+    function Bar() {
+      return <SomethingThatErrors />;
+    }
+
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <Foo />
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'Bar',
+        'RethrowingBoundary',
+        'Foo',
+        'CatchingBoundary',
+      ]),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'Bar',
+        'RethrowingBoundary',
+        'Foo',
+        'CatchingBoundary',
+      ]),
+      __DEV__ ? componentStack(['Bar', 'Foo']) : null,
+    ]);
+  });
+
+  it('includes built-in for Suspense', async () => {
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <Suspense>
+          <SomethingThatErrors />
+        </Suspense>
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack(['SomethingThatErrors', 'Suspense', 'CatchingBoundary']),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack(['SomethingThatErrors', 'Suspense', 'CatchingBoundary']),
+      __DEV__ ? componentStack(['SomethingThatErrors']) : null,
+    ]);
+  });
+
+  it('includes built-in for Suspense fallbacks', async () => {
+    const SomethingThatSuspends = React.lazy(() => {
+      return new Promise(() => {});
+    });
+
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <Suspense fallback={<SomethingThatErrors />}>
+          <SomethingThatSuspends />
+        </Suspense>
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'Suspense Fallback',
+        'CatchingBoundary',
+      ]),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'Suspense Fallback',
+        'CatchingBoundary',
+      ]),
+      __DEV__ ? componentStack(['SomethingThatErrors']) : null,
+    ]);
+  });
+
+  // @gate enableActivity
+  it('includes built-in for Activity', async () => {
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <Activity>
+          <SomethingThatErrors />
+        </Activity>
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack(['SomethingThatErrors', 'Activity', 'CatchingBoundary']),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack(['SomethingThatErrors', 'Activity', 'CatchingBoundary']),
+      __DEV__ ? componentStack(['SomethingThatErrors']) : null,
+    ]);
+  });
+
+  // @gate enableViewTransition
+  it('includes built-in for ViewTransition', async () => {
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <ViewTransition>
+          <SomethingThatErrors />
+        </ViewTransition>
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'ViewTransition',
+        'CatchingBoundary',
+      ]),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'ViewTransition',
+        'CatchingBoundary',
+      ]),
+      __DEV__ ? componentStack(['SomethingThatErrors']) : null,
+    ]);
+  });
+
+  it('includes built-in for Lazy', async () => {
+    // Lazy component throws
+    const LazyComponent = React.lazy(() => {
+      throw new Error('uh oh');
+    });
+
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <LazyComponent />
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack(['Lazy', 'CatchingBoundary']),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack(['Lazy', 'CatchingBoundary']),
+      __DEV__ ? '' : null, // No owner stack
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('includes built-in for SuspenseList', async () => {
+    const SuspenseList = React.unstable_SuspenseList;
+
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <SuspenseList revealOrder="independent">
+          <SomethingThatErrors />
+        </SuspenseList>
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'SuspenseList',
+        'CatchingBoundary',
+      ]),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        'SuspenseList',
+        'CatchingBoundary',
+      ]),
+      __DEV__ ? componentStack(['SomethingThatErrors']) : null,
+    ]);
+  });
+
+  it('does not include built-in for Fragment', async () => {
+    ReactNoop.createRoot({
+      onCaughtError,
+    }).render(
+      <CatchingBoundary>
+        <>
+          <SomethingThatErrors />
+        </>
+      </CatchingBoundary>,
+    );
+    await waitForAll([]);
+    expect(didCatchErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        // No Fragment
+        'CatchingBoundary',
+      ]),
+    ]);
+    expect(rootCaughtErrors).toEqual([
+      'uh oh',
+      componentStack([
+        'SomethingThatErrors',
+        // No Fragment
+        'CatchingBoundary',
+      ]),
+      __DEV__ ? componentStack(['SomethingThatErrors']) : null,
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
new file mode 100644
index 00000000000..1c678f8cfe4
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -0,0 +1,771 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let readText;
+let resolveText;
+let startTransition;
+let useState;
+let useEffect;
+let assertLog;
+let waitFor;
+let waitForAll;
+let unstable_waitForExpired;
+
+describe('ReactExpiration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    startTransition = React.startTransition;
+    useState = React.useState;
+    useEffect = React.useEffect;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    unstable_waitForExpired = InternalTestUtils.unstable_waitForExpired;
+
+    const textCache = new Map();
+
+    readText = text => {
+      const record = textCache.get(text);
+      if (record !== undefined) {
+        switch (record.status) {
+          case 'pending':
+            throw record.promise;
+          case 'rejected':
+            throw Error('Failed to load: ' + text);
+          case 'resolved':
+            return text;
+        }
+      } else {
+        let ping;
+        const promise = new Promise(resolve => (ping = resolve));
+        const newRecord = {
+          status: 'pending',
+          ping: ping,
+          promise,
+        };
+        textCache.set(text, newRecord);
+        throw promise;
+      }
+    };
+
+    resolveText = text => {
+      const record = textCache.get(text);
+      if (record !== undefined) {
+        if (record.status === 'pending') {
+          Scheduler.log(`Promise resolved [${text}]`);
+          record.ping();
+          record.ping = null;
+          record.status = 'resolved';
+          clearTimeout(record.promise._timer);
+          record.promise = null;
+        }
+      } else {
+        const newRecord = {
+          ping: null,
+          status: 'resolved',
+          promise: null,
+        };
+        textCache.set(text, newRecord);
+      }
+    };
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return props.text;
+  }
+
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      readText(text);
+      Scheduler.log(text);
+      return text;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.log(`Suspend! [${text}]`);
+        if (typeof props.ms === 'number' && promise._timer === undefined) {
+          promise._timer = setTimeout(() => {
+            resolveText(text);
+          }, props.ms);
+        }
+      } else {
+        Scheduler.log(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  it('increases priority of updates as time progresses', async () => {
+    ReactNoop.render(<Text text="Step 1" />);
+    React.startTransition(() => {
+      ReactNoop.render(<Text text="Step 2" />);
+    });
+    await waitFor(['Step 1']);
+
+    expect(ReactNoop).toMatchRenderedOutput('Step 1');
+
+    // Nothing has expired yet because time hasn't advanced.
+    await unstable_waitForExpired([]);
+    expect(ReactNoop).toMatchRenderedOutput('Step 1');
+
+    // Advance time a bit, but not enough to expire the low pri update.
+    ReactNoop.expire(4500);
+    await unstable_waitForExpired([]);
+    expect(ReactNoop).toMatchRenderedOutput('Step 1');
+
+    // Advance by a little bit more. Now the update should expire and flush.
+    ReactNoop.expire(500);
+    await unstable_waitForExpired(['Step 2']);
+    expect(ReactNoop).toMatchRenderedOutput('Step 2');
+  });
+
+  it('two updates of like priority in the same event always flush within the same batch', async () => {
+    class TextClass extends React.Component {
+      componentDidMount() {
+        Scheduler.log(`${this.props.text} [commit]`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`${this.props.text} [commit]`);
+      }
+      render() {
+        Scheduler.log(`${this.props.text} [render]`);
+        return <span prop={this.props.text} />;
+      }
+    }
+
+    function interrupt() {
+      ReactNoop.flushSync(() => {
+        ReactNoop.renderToRootWithID(null, 'other-root');
+      });
+    }
+
+    // First, show what happens for updates in two separate events.
+    // Schedule an update.
+    React.startTransition(() => {
+      ReactNoop.render(<TextClass text="A" />);
+    });
+    // Advance the timer.
+    Scheduler.unstable_advanceTime(2000);
+    // Partially flush the first update, then interrupt it.
+    await waitFor(['A [render]']);
+    interrupt();
+
+    // Don't advance time by enough to expire the first update.
+    assertLog([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Schedule another update.
+    ReactNoop.render(<TextClass text="B" />);
+    // Both updates are batched
+    await waitForAll(['B [render]', 'B [commit]']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+    // Now do the same thing again, except this time don't flush any work in
+    // between the two updates.
+    ReactNoop.render(<TextClass text="A" />);
+    Scheduler.unstable_advanceTime(2000);
+    assertLog([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+    // Schedule another update.
+    ReactNoop.render(<TextClass text="B" />);
+    // The updates should flush in the same batch, since as far as the scheduler
+    // knows, they may have occurred inside the same event.
+    await waitForAll(['B [render]', 'B [commit]']);
+  });
+
+  it(
+    'two updates of like priority in the same event always flush within the ' +
+      "same batch, even if there's a sync update in between",
+    async () => {
+      class TextClass extends React.Component {
+        componentDidMount() {
+          Scheduler.log(`${this.props.text} [commit]`);
+        }
+        componentDidUpdate() {
+          Scheduler.log(`${this.props.text} [commit]`);
+        }
+        render() {
+          Scheduler.log(`${this.props.text} [render]`);
+          return <span prop={this.props.text} />;
+        }
+      }
+
+      function interrupt() {
+        ReactNoop.flushSync(() => {
+          ReactNoop.renderToRootWithID(null, 'other-root');
+        });
+      }
+
+      // First, show what happens for updates in two separate events.
+      // Schedule an update.
+      React.startTransition(() => {
+        ReactNoop.render(<TextClass text="A" />);
+      });
+
+      // Advance the timer.
+      Scheduler.unstable_advanceTime(2000);
+      // Partially flush the first update, then interrupt it.
+      await waitFor(['A [render]']);
+      interrupt();
+
+      // Don't advance time by enough to expire the first update.
+      assertLog([]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+
+      // Schedule another update.
+      ReactNoop.render(<TextClass text="B" />);
+      // Both updates are batched
+      await waitForAll(['B [render]', 'B [commit]']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+      // Now do the same thing again, except this time don't flush any work in
+      // between the two updates.
+      ReactNoop.render(<TextClass text="A" />);
+      Scheduler.unstable_advanceTime(2000);
+      assertLog([]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+      // Perform some synchronous work. The scheduler must assume we're inside
+      // the same event.
+      interrupt();
+
+      // Schedule another update.
+      ReactNoop.render(<TextClass text="B" />);
+      // The updates should flush in the same batch, since as far as the scheduler
+      // knows, they may have occurred inside the same event.
+      await waitForAll(['B [render]', 'B [commit]']);
+    },
+  );
+
+  it('cannot update at the same expiration time that is already rendering', async () => {
+    const store = {text: 'initial'};
+    const subscribers = [];
+    class Connected extends React.Component {
+      state = {text: store.text};
+      componentDidMount() {
+        subscribers.push(this);
+        Scheduler.log(`${this.state.text} [${this.props.label}] [commit]`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`${this.state.text} [${this.props.label}] [commit]`);
+      }
+      render() {
+        Scheduler.log(`${this.state.text} [${this.props.label}] [render]`);
+        return <span prop={this.state.text} />;
+      }
+    }
+
+    function App() {
+      return (
+        <>
+          <Connected label="A" />
+          <Connected label="B" />
+          <Connected label="C" />
+          <Connected label="D" />
+        </>
+      );
+    }
+
+    // Initial mount
+    React.startTransition(() => {
+      ReactNoop.render(<App />);
+    });
+
+    await waitForAll([
+      'initial [A] [render]',
+      'initial [B] [render]',
+      'initial [C] [render]',
+      'initial [D] [render]',
+      'initial [A] [commit]',
+      'initial [B] [commit]',
+      'initial [C] [commit]',
+      'initial [D] [commit]',
+    ]);
+
+    // Partial update
+    React.startTransition(() => {
+      subscribers.forEach(s => s.setState({text: '1'}));
+    });
+
+    await waitFor(['1 [A] [render]', '1 [B] [render]']);
+
+    // Before the update can finish, update again. Even though no time has
+    // advanced, this update should be given a different expiration time than
+    // the currently rendering one. So, C and D should render with 1, not 2.
+    React.startTransition(() => {
+      subscribers.forEach(s => s.setState({text: '2'}));
+    });
+    await waitFor(['1 [C] [render]', '1 [D] [render]']);
+  });
+
+  it('stops yielding if CPU-bound update takes too long to finish', async () => {
+    const root = ReactNoop.createRoot();
+    function App() {
+      return (
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Text text="C" />
+          <Text text="D" />
+          <Text text="E" />
+        </>
+      );
+    }
+
+    React.startTransition(() => {
+      root.render(<App />);
+    });
+
+    await waitFor(['A']);
+    await waitFor(['B']);
+    await waitFor(['C']);
+
+    Scheduler.unstable_advanceTime(10000);
+
+    await unstable_waitForExpired(['D', 'E']);
+    expect(root).toMatchRenderedOutput('ABCDE');
+  });
+
+  it('root expiration is measured from the time of the first update', async () => {
+    Scheduler.unstable_advanceTime(10000);
+
+    const root = ReactNoop.createRoot();
+    function App() {
+      return (
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Text text="C" />
+          <Text text="D" />
+          <Text text="E" />
+        </>
+      );
+    }
+    React.startTransition(() => {
+      root.render(<App />);
+    });
+
+    await waitFor(['A']);
+    await waitFor(['B']);
+    await waitFor(['C']);
+
+    Scheduler.unstable_advanceTime(10000);
+
+    await unstable_waitForExpired(['D', 'E']);
+    expect(root).toMatchRenderedOutput('ABCDE');
+  });
+
+  it('should measure expiration times relative to module initialization', async () => {
+    // Tests an implementation detail where expiration times are computed using
+    // bitwise operations.
+
+    jest.resetModules();
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+    unstable_waitForExpired = InternalTestUtils.unstable_waitForExpired;
+
+    // Before importing the renderer, advance the current time by a number
+    // larger than the maximum allowed for bitwise operations.
+    const maxSigned31BitInt = 1073741823;
+    Scheduler.unstable_advanceTime(maxSigned31BitInt * 100);
+
+    // Now import the renderer. On module initialization, it will read the
+    // current time.
+    ReactNoop = require('react-noop-renderer');
+    React = require('react');
+
+    ReactNoop.render(<Text text="Step 1" />);
+    React.startTransition(() => {
+      ReactNoop.render(<Text text="Step 2" />);
+    });
+    await waitFor(['Step 1']);
+
+    // The update should not have expired yet.
+    await unstable_waitForExpired([]);
+
+    expect(ReactNoop).toMatchRenderedOutput('Step 1');
+
+    // Advance the time some more to expire the update.
+    Scheduler.unstable_advanceTime(10000);
+    await unstable_waitForExpired(['Step 2']);
+    expect(ReactNoop).toMatchRenderedOutput('Step 2');
+  });
+
+  it('should measure callback timeout relative to current time, not start-up time', async () => {
+    // Corresponds to a bugfix: https://github.com/facebook/react/pull/15479
+    // The bug wasn't caught by other tests because we use virtual times that
+    // default to 0, and most tests don't advance time.
+
+    // Before scheduling an update, advance the current time.
+    Scheduler.unstable_advanceTime(10000);
+
+    React.startTransition(() => {
+      ReactNoop.render('Hi');
+    });
+
+    await unstable_waitForExpired([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Advancing by ~5 seconds should be sufficient to expire the update. (I
+    // used a slightly larger number to allow for possible rounding.)
+    Scheduler.unstable_advanceTime(6000);
+    await unstable_waitForExpired([]);
+    expect(ReactNoop).toMatchRenderedOutput('Hi');
+  });
+
+  it('prevents starvation by sync updates by disabling time slicing if too much time has elapsed', async () => {
+    let updateSyncPri;
+    let updateNormalPri;
+    function App() {
+      const [highPri, setHighPri] = useState(0);
+      const [normalPri, setNormalPri] = useState(0);
+      updateSyncPri = () => {
+        ReactNoop.flushSync(() => {
+          setHighPri(n => n + 1);
+        });
+      };
+      updateNormalPri = () => setNormalPri(n => n + 1);
+      return (
+        <>
+          <Text text={'Sync pri: ' + highPri} />
+          {', '}
+          <Text text={'Normal pri: ' + normalPri} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Sync pri: 0', 'Normal pri: 0']);
+    expect(root).toMatchRenderedOutput('Sync pri: 0, Normal pri: 0');
+
+    // First demonstrate what happens when there's no starvation
+    await act(async () => {
+      React.startTransition(() => {
+        updateNormalPri();
+      });
+      await waitFor(['Sync pri: 0']);
+      updateSyncPri();
+      assertLog(['Sync pri: 1', 'Normal pri: 0']);
+
+      // The remaining work hasn't expired, so the render phase is time sliced.
+      // In other words, we can flush just the first child without flushing
+      // the rest.
+      //
+      // Yield right after first child.
+      await waitFor(['Sync pri: 1']);
+      // Now do the rest.
+      await waitForAll(['Normal pri: 1']);
+    });
+    expect(root).toMatchRenderedOutput('Sync pri: 1, Normal pri: 1');
+
+    // Do the same thing, but starve the first update
+    await act(async () => {
+      React.startTransition(() => {
+        updateNormalPri();
+      });
+      await waitFor(['Sync pri: 1']);
+
+      // This time, a lot of time has elapsed since the normal pri update
+      // started rendering. (This should advance time by some number that's
+      // definitely bigger than the constant heuristic we use to detect
+      // starvation of normal priority updates.)
+      Scheduler.unstable_advanceTime(10000);
+
+      updateSyncPri();
+      assertLog(['Sync pri: 2', 'Normal pri: 1']);
+
+      // The remaining work _has_ expired, so the render phase is _not_ time
+      // sliced. Attempting to flush just the first child also flushes the rest.
+      await waitFor(['Sync pri: 2'], {
+        additionalLogsAfterAttemptingToYield: ['Normal pri: 2'],
+      });
+    });
+    expect(root).toMatchRenderedOutput('Sync pri: 2, Normal pri: 2');
+  });
+
+  it('idle work never expires', async () => {
+    let updateSyncPri;
+    let updateIdlePri;
+    function App() {
+      const [syncPri, setSyncPri] = useState(0);
+      const [highPri, setIdlePri] = useState(0);
+      updateSyncPri = () => ReactNoop.flushSync(() => setSyncPri(n => n + 1));
+      updateIdlePri = () =>
+        ReactNoop.idleUpdates(() => {
+          setIdlePri(n => n + 1);
+        });
+      return (
+        <>
+          <Text text={'Sync pri: ' + syncPri} />
+          {', '}
+          <Text text={'Idle pri: ' + highPri} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Sync pri: 0', 'Idle pri: 0']);
+    expect(root).toMatchRenderedOutput('Sync pri: 0, Idle pri: 0');
+
+    // First demonstrate what happens when there's no starvation
+    await act(async () => {
+      updateIdlePri();
+      await waitFor(['Sync pri: 0']);
+      updateSyncPri();
+    });
+    // Same thing should happen as last time
+    assertLog([
+      // Interrupt idle update to render sync update
+      'Sync pri: 1',
+      'Idle pri: 0',
+      // Now render idle
+      'Sync pri: 1',
+      'Idle pri: 1',
+    ]);
+    expect(root).toMatchRenderedOutput('Sync pri: 1, Idle pri: 1');
+
+    // Do the same thing, but starve the first update
+    await act(async () => {
+      updateIdlePri();
+      await waitFor(['Sync pri: 1']);
+
+      // Advance a ridiculously large amount of time to demonstrate that the
+      // idle work never expires
+      Scheduler.unstable_advanceTime(100000);
+
+      updateSyncPri();
+    });
+    assertLog([
+      // Interrupt idle update to render sync update
+      'Sync pri: 2',
+      'Idle pri: 1',
+      // Now render idle
+      'Sync pri: 2',
+      'Idle pri: 2',
+    ]);
+    expect(root).toMatchRenderedOutput('Sync pri: 2, Idle pri: 2');
+  });
+
+  it('when multiple lanes expire, we can finish the in-progress one without including the others', async () => {
+    let setA;
+    let setB;
+    function App() {
+      const [a, _setA] = useState(0);
+      const [b, _setB] = useState(0);
+      setA = _setA;
+      setB = _setB;
+      return (
+        <>
+          <Text text={'A' + a} />
+          <Text text={'B' + b} />
+          <Text text="C" />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A0', 'B0', 'C']);
+    expect(root).toMatchRenderedOutput('A0B0C');
+
+    await act(async () => {
+      startTransition(() => {
+        setA(1);
+      });
+      await waitFor(['A1']);
+      startTransition(() => {
+        setB(1);
+      });
+      await waitFor(['B0']);
+
+      // Expire both the transitions
+      Scheduler.unstable_advanceTime(10000);
+      // Both transitions have expired, but since they aren't related
+      // (entangled), we should be able to finish the in-progress transition
+      // without also including the next one.
+      await waitFor([], {
+        additionalLogsAfterAttemptingToYield: ['C'],
+      });
+      expect(root).toMatchRenderedOutput('A1B0C');
+
+      // The next transition also finishes without yielding.
+      await waitFor(['A1'], {
+        additionalLogsAfterAttemptingToYield: ['B1', 'C'],
+      });
+      expect(root).toMatchRenderedOutput('A1B1C');
+    });
+  });
+
+  it('updates do not expire while they are IO-bound', async () => {
+    const {Suspense} = React;
+
+    function App({step}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text={'A' + step} />
+          <Text text="B" />
+          <Text text="C" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      await resolveText('A0');
+      root.render(<App step={0} />);
+    });
+    assertLog(['A0', 'B', 'C']);
+    expect(root).toMatchRenderedOutput('A0BC');
+
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<App step={1} />);
+      });
+      await waitForAll([
+        'Suspend! [A1]',
+        // pre-warming
+        'B',
+        'C',
+        // end pre-warming
+        'Loading...',
+      ]);
+
+      // Lots of time elapses before the promise resolves
+      Scheduler.unstable_advanceTime(10000);
+      await resolveText('A1');
+      assertLog(['Promise resolved [A1]']);
+
+      await waitFor(['A1']);
+      expect(root).toMatchRenderedOutput('A0BC');
+
+      // Lots more time elapses. We're CPU-bound now, so we should treat this
+      // as starvation.
+      Scheduler.unstable_advanceTime(10000);
+
+      // The rest of the update finishes without yielding.
+      await waitFor([], {
+        additionalLogsAfterAttemptingToYield: ['B', 'C'],
+      });
+    });
+  });
+
+  it('flushSync should not affect expired work', async () => {
+    let setA;
+    let setB;
+    function App() {
+      const [a, _setA] = useState(0);
+      const [b, _setB] = useState(0);
+      setA = _setA;
+      setB = _setB;
+      return (
+        <>
+          <Text text={'A' + a} />
+          <Text text={'B' + b} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A0', 'B0']);
+
+    await act(async () => {
+      startTransition(() => {
+        setA(1);
+      });
+      await waitFor(['A1']);
+
+      // Expire the in-progress update
+      Scheduler.unstable_advanceTime(10000);
+
+      ReactNoop.flushSync(() => {
+        setB(1);
+      });
+      assertLog(['A0', 'B1']);
+
+      // Now flush the original update. Because it expired, it should finish
+      // without yielding.
+      await waitFor(['A1'], {
+        additionalLogsAfterAttemptingToYield: ['B1'],
+      });
+    });
+  });
+
+  it('passive effects of expired update flush after paint', async () => {
+    function App({step}) {
+      useEffect(() => {
+        Scheduler.log('Effect: ' + step);
+      }, [step]);
+      return (
+        <>
+          <Text text={'A' + step} />
+          <Text text={'B' + step} />
+          <Text text={'C' + step} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App step={0} />);
+    });
+    assertLog(['A0', 'B0', 'C0', 'Effect: 0']);
+    expect(root).toMatchRenderedOutput('A0B0C0');
+
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App step={1} />);
+      });
+      await waitFor(['A1']);
+
+      // Expire the update
+      Scheduler.unstable_advanceTime(10000);
+
+      // The update finishes without yielding. But it does not flush the effect.
+      await waitFor(['B1'], {
+        additionalLogsAfterAttemptingToYield: gate(
+          flags => flags.enableYieldingBeforePassive,
+        )
+          ? ['C1', 'Effect: 1']
+          : ['C1'],
+      });
+    });
+    if (!gate(flags => flags.enableYieldingBeforePassive)) {
+      // The effect flushes after paint.
+      assertLog(['Effect: 1']);
+    }
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
new file mode 100644
index 00000000000..b0e827259dc
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let ReactFiberReconciler;
+let ConcurrentRoot;
+let DefaultEventPriority;
+let NoEventPriority;
+
+describe('ReactFiberHostContext', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    act = React.act;
+    ReactFiberReconciler = require('react-reconciler');
+    ConcurrentRoot =
+      require('react-reconciler/src/ReactRootTags').ConcurrentRoot;
+    DefaultEventPriority =
+      require('react-reconciler/src/ReactEventPriorities').DefaultEventPriority;
+    NoEventPriority =
+      require('react-reconciler/src/ReactEventPriorities').NoEventPriority;
+  });
+
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
+  // @gate __DEV__
+  it('should send the context to prepareForCommit and resetAfterCommit', () => {
+    const rootContext = {};
+    const childContext = {};
+    let updatePriority: typeof DefaultEventPriority = NoEventPriority;
+    const Renderer = ReactFiberReconciler({
+      prepareForCommit: function (hostContext) {
+        expect(hostContext).toBe(rootContext);
+        return null;
+      },
+      resetAfterCommit: function (hostContext) {
+        expect(hostContext).toBe(rootContext);
+      },
+      getRootHostContext: function () {
+        return rootContext;
+      },
+      getChildHostContext: function () {
+        return childContext;
+      },
+      shouldSetTextContent: function () {
+        return false;
+      },
+      createInstance: function () {
+        return null;
+      },
+      finalizeInitialChildren: function () {
+        return null;
+      },
+      appendInitialChild: function () {
+        return null;
+      },
+      now: function () {
+        return 0;
+      },
+      appendChildToContainer: function () {
+        return null;
+      },
+      clearContainer: function () {},
+      setCurrentUpdatePriority: function (newPriority: any) {
+        updatePriority = newPriority;
+      },
+      getCurrentUpdatePriority: function () {
+        return updatePriority;
+      },
+      resolveUpdatePriority: function () {
+        if (updatePriority !== NoEventPriority) {
+          return updatePriority;
+        }
+        return DefaultEventPriority;
+      },
+      trackSchedulerEvent: function () {},
+      resolveEventType: function () {
+        return null;
+      },
+      resolveEventTimeStamp: function () {
+        return -1.1;
+      },
+      shouldAttemptEagerTransition() {
+        return false;
+      },
+      requestPostPaintCallback: function () {},
+      maySuspendCommit(type, props) {
+        return false;
+      },
+      maySuspendCommitOnUpdate(type, oldProps, newProps) {
+        return false;
+      },
+      maySuspendCommitInSyncRender(type, props) {
+        return false;
+      },
+      preloadInstance(instance, type, props) {
+        return true;
+      },
+      startSuspendingCommit() {
+        return null;
+      },
+      suspendInstance(state, instance, type, props) {},
+      suspendOnActiveViewTransition(state, container) {},
+      waitForCommitToBeReady(state, timeoutOffset) {
+        return null;
+      },
+      getSuspendedCommitReason(state, rootContainer) {
+        return null;
+      },
+      supportsMutation: true,
+    });
+
+    const container = Renderer.createContainer(
+      rootContext,
+      ConcurrentRoot,
+      null,
+      false,
+      null,
+      '',
+      () => {},
+      () => {},
+      () => {},
+      null,
+    );
+    act(() => {
+      Renderer.updateContainer(
+        <a>
+          <b />
+        </a>,
+        container,
+        /* parentComponent: */ null,
+        /* callback: */ null,
+      );
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js b/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js
new file mode 100644
index 00000000000..78409c8e2a4
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFiberRefs-test.js
@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let act;
+let assertLog;
+
+describe('ReactFiberRefs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Scheduler = require('scheduler');
+    ReactNoop = require('react-noop-renderer');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+  });
+
+  it('ref is attached even if there are no other updates (class)', async () => {
+    let component;
+    class Component extends React.Component {
+      shouldComponentUpdate() {
+        // This component's output doesn't depend on any props or state
+        return false;
+      }
+      render() {
+        Scheduler.log('Render');
+        component = this;
+        return 'Hi';
+      }
+    }
+
+    const ref1 = React.createRef();
+    const ref2 = React.createRef();
+    const root = ReactNoop.createRoot();
+
+    // Mount with ref1 attached
+    await act(() => root.render(<Component ref={ref1} />));
+    assertLog(['Render']);
+    expect(root).toMatchRenderedOutput('Hi');
+    expect(ref1.current).toBe(component);
+    // ref2 has no value
+    expect(ref2.current).toBe(null);
+
+    // Switch to ref2, but don't update anything else.
+    await act(() => root.render(<Component ref={ref2} />));
+    // The component did not re-render because no props changed.
+    assertLog([]);
+    expect(root).toMatchRenderedOutput('Hi');
+    // But the refs still should have been swapped.
+    expect(ref1.current).toBe(null);
+    expect(ref2.current).toBe(component);
+  });
+
+  it('ref is attached even if there are no other updates (host component)', async () => {
+    // This is kind of ailly test because host components never bail out if they
+    // receive a new element, and there's no way to update a ref without also
+    // updating the props, but adding it here anyway for symmetry with the
+    // class case above.
+    const ref1 = React.createRef();
+    const ref2 = React.createRef();
+    const root = ReactNoop.createRoot();
+
+    // Mount with ref1 attached
+    await act(() => root.render(<div ref={ref1}>Hi</div>));
+    expect(root).toMatchRenderedOutput(<div>Hi</div>);
+    expect(ref1.current).not.toBe(null);
+    // ref2 has no value
+    expect(ref2.current).toBe(null);
+
+    // Switch to ref2, but don't update anything else.
+    await act(() => root.render(<div ref={ref2}>Hi</div>));
+    expect(root).toMatchRenderedOutput(<div>Hi</div>);
+    // But the refs still should have been swapped.
+    expect(ref1.current).toBe(null);
+    expect(ref2.current).not.toBe(null);
+  });
+
+  it('throw if a string ref is passed to a ref-receiving component', async () => {
+    let refProp;
+    function Child({ref}) {
+      // This component renders successfully because the ref type check does not
+      // occur until you pass it to a component that accepts refs.
+      //
+      // So the div will throw, but not Child.
+      refProp = ref;
+      return <div ref={ref} />;
+    }
+
+    class Owner extends React.Component {
+      render() {
+        return <Child ref="child" />;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await expect(act(() => root.render(<Owner />))).rejects.toThrow(
+      'Expected ref to be a function',
+    );
+    expect(refProp).toBe('child');
+  });
+
+  it('strings refs can be codemodded to callback refs', async () => {
+    let app;
+    class App extends React.Component {
+      render() {
+        app = this;
+        return (
+          <div
+            prop="Hello!"
+            ref={el => {
+              // `refs` used to be a shared frozen object unless/until a string
+              // ref attached by the reconciler, but it's not anymore so that we
+              // can codemod string refs to userspace callback refs.
+              this.refs.div = el;
+            }}
+          />
+        );
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    expect(app.refs.div.prop).toBe('Hello!');
+  });
+
+  it('class refs are initialized to a frozen shared object', async () => {
+    const refsCollection = new Set();
+    class Component extends React.Component {
+      constructor(props) {
+        super(props);
+        refsCollection.add(this.refs);
+      }
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() =>
+      root.render(
+        <>
+          <Component />
+          <Component />
+        </>,
+      ),
+    );
+
+    expect(refsCollection.size).toBe(1);
+    const refsInstance = Array.from(refsCollection)[0];
+    expect(Object.isFrozen(refsInstance)).toBe(__DEV__);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
new file mode 100644
index 00000000000..679a9370dd3
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -0,0 +1,346 @@
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let Scheduler;
+let act;
+let useState;
+let useEffect;
+let startTransition;
+let assertLog;
+let assertConsoleErrorDev;
+let waitForPaint;
+
+// TODO: Migrate tests to React DOM instead of React Noop
+
+describe('ReactFlushSync', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    useState = React.useState;
+    useEffect = React.useEffect;
+    startTransition = React.startTransition;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function getVisibleChildren(element: Element): React$Node {
+    const children = [];
+    let node: any = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          ((node.tagName !== 'SCRIPT' && node.tagName !== 'script') ||
+            node.hasAttribute('data-meaningful')) &&
+          node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
+          !node.hasAttribute('hidden') &&
+          !node.hasAttribute('aria-hidden')
+        ) {
+          const props: any = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(
+            require('react').createElement(node.tagName.toLowerCase(), props),
+          );
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  it('changes priority of updates in useEffect', async () => {
+    function App() {
+      const [syncState, setSyncState] = useState(0);
+      const [state, setState] = useState(0);
+      useEffect(() => {
+        if (syncState !== 1) {
+          setState(1);
+          ReactDOM.flushSync(() => setSyncState(1));
+        }
+      }, [syncState, state]);
+      return <Text text={`${syncState}, ${state}`} />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<App />);
+      });
+      // This will yield right before the passive effect fires
+      await waitForPaint(['0, 0']);
+
+      // The passive effect will schedule a sync update and a normal update.
+      // They should commit in two separate batches. First the sync one.
+      await waitForPaint(['1, 1']);
+
+      // The remaining update is not sync
+      ReactDOM.flushSync();
+      assertLog([]);
+      assertConsoleErrorDev([
+        'flushSync was called from inside a lifecycle method. React ' +
+          'cannot flush when React is already rendering. Consider moving this ' +
+          'call to a scheduler task or micro task.' +
+          '\n    in App',
+      ]);
+
+      await waitForPaint([]);
+    });
+    expect(getVisibleChildren(container)).toEqual('1, 1');
+  });
+
+  it('supports nested flushSync with startTransition', async () => {
+    let setSyncState;
+    let setState;
+    function App() {
+      const [syncState, _setSyncState] = useState(0);
+      const [state, _setState] = useState(0);
+      setSyncState = _setSyncState;
+      setState = _setState;
+      return <Text text={`${syncState}, ${state}`} />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['0, 0']);
+    expect(getVisibleChildren(container)).toEqual('0, 0');
+
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        startTransition(() => {
+          // This should be async even though flushSync is on the stack, because
+          // startTransition is closer.
+          setState(1);
+          ReactDOM.flushSync(() => {
+            // This should be async even though startTransition is on the stack,
+            // because flushSync is closer.
+            setSyncState(1);
+          });
+        });
+      });
+      // Only the sync update should have flushed
+      assertLog(['1, 0']);
+      expect(getVisibleChildren(container)).toEqual('1, 0');
+    });
+    // Now the async update has flushed, too.
+    assertLog(['1, 1']);
+    expect(getVisibleChildren(container)).toEqual('1, 1');
+  });
+
+  it('flushes passive effects synchronously when they are the result of a sync render', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.log('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<App />);
+      });
+      assertLog([
+        'Child',
+        // Because the pending effect was the result of a sync update, calling
+        // flushSync should flush it.
+        'Effect',
+      ]);
+      expect(getVisibleChildren(container)).toEqual('Child');
+    });
+  });
+
+  // @gate !disableLegacyMode
+  it('does not flush passive effects synchronously after render in legacy mode', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.log('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const container = document.createElement('div');
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        ReactDOM.render(<App />, container);
+      });
+      assertLog([
+        'Child',
+        // Because we're in legacy mode, we shouldn't have flushed the passive
+        // effects yet.
+      ]);
+      expect(getVisibleChildren(container)).toEqual('Child');
+    });
+    // Effect flushes after paint.
+    assertLog(['Effect']);
+  });
+
+  // @gate !disableLegacyMode
+  it('flushes pending passive effects before scope is called in legacy mode', async () => {
+    let currentStep = 0;
+
+    function App({step}) {
+      useEffect(() => {
+        currentStep = step;
+        Scheduler.log('Effect: ' + step);
+      }, [step]);
+      return <Text text={step} />;
+    }
+
+    const container = document.createElement('div');
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        ReactDOM.render(<App step={1} />, container);
+      });
+      assertLog([
+        1,
+        // Because we're in legacy mode, we shouldn't have flushed the passive
+        // effects yet.
+      ]);
+      expect(getVisibleChildren(container)).toEqual('1');
+
+      ReactDOM.flushSync(() => {
+        // This should render step 2 because the passive effect has already
+        // fired, before the scope function is called.
+        ReactDOM.render(<App step={currentStep + 1} />, container);
+      });
+      assertLog(['Effect: 1', 2]);
+      expect(getVisibleChildren(container)).toEqual('2');
+    });
+    assertLog(['Effect: 2']);
+  });
+
+  it("does not flush passive effects synchronously when they aren't the result of a sync render", async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.log('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+      await waitForPaint([
+        'Child',
+        // Because the passive effect was not the result of a sync update, it
+        // should not flush before paint.
+      ]);
+      expect(getVisibleChildren(container)).toEqual('Child');
+    });
+    // Effect flushes after paint.
+    assertLog(['Effect']);
+  });
+
+  it('does not flush pending passive effects', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.log('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+      await waitForPaint(['Child']);
+      expect(getVisibleChildren(container)).toEqual('Child');
+
+      // Passive effects are pending. Calling flushSync should not affect them.
+      ReactDOM.flushSync();
+      // Effects still haven't fired.
+      assertLog([]);
+    });
+    // Now the effects have fired.
+    assertLog(['Effect']);
+  });
+
+  it('completely exhausts synchronous work queue even if something throws', async () => {
+    function Throws({error}) {
+      throw error;
+    }
+
+    const container1 = document.createElement('div');
+    const root1 = ReactDOMClient.createRoot(container1);
+
+    const container2 = document.createElement('div');
+    const root2 = ReactDOMClient.createRoot(container2);
+
+    const container3 = document.createElement('div');
+    const root3 = ReactDOMClient.createRoot(container3);
+
+    await act(async () => {
+      root1.render(<Text text="Hi" />);
+      root2.render(<Text text="Andrew" />);
+      root3.render(<Text text="!" />);
+    });
+    assertLog(['Hi', 'Andrew', '!']);
+
+    const aahh = new Error('AAHH!');
+    const nooo = new Error('Noooooooooo!');
+
+    let error;
+    try {
+      await act(() => {
+        ReactDOM.flushSync(() => {
+          root1.render(<Throws error={aahh} />);
+          root2.render(<Throws error={nooo} />);
+          root3.render(<Text text="aww" />);
+        });
+      });
+    } catch (e) {
+      error = e;
+    }
+
+    // The update to root 3 should have finished synchronously, even though the
+    // earlier updates errored.
+    assertLog(['aww']);
+    // Roots 1 and 2 were unmounted.
+    expect(getVisibleChildren(container1)).toEqual(undefined);
+    expect(getVisibleChildren(container2)).toEqual(undefined);
+    expect(getVisibleChildren(container3)).toEqual('aww');
+
+    // Because there were multiple errors, React threw an AggregateError.
+    // eslint-disable-next-line no-undef
+    expect(error).toBeInstanceOf(AggregateError);
+    expect(error.errors.length).toBe(2);
+    expect(error.errors[0]).toBe(aahh);
+    expect(error.errors[1]).toBe(nooo);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSyncNoAggregateError-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSyncNoAggregateError-test.js
new file mode 100644
index 00000000000..b7f05d8a59d
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSyncNoAggregateError-test.js
@@ -0,0 +1,147 @@
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let Scheduler;
+let act;
+let assertLog;
+
+let overrideQueueMicrotask;
+let flushFakeMicrotasks;
+
+// TODO: Migrate tests to React DOM instead of React Noop
+
+describe('ReactFlushSync (AggregateError not available)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    global.AggregateError = undefined;
+
+    // When AggregateError is not available, the errors are rethrown in a
+    // microtask. This is an implementation detail but we want to test it here
+    // so override the global one.
+    const originalQueueMicrotask = queueMicrotask;
+    overrideQueueMicrotask = false;
+    const fakeMicrotaskQueue = [];
+    global.queueMicrotask = cb => {
+      if (overrideQueueMicrotask) {
+        fakeMicrotaskQueue.push(cb);
+      } else {
+        originalQueueMicrotask(cb);
+      }
+    };
+    flushFakeMicrotasks = () => {
+      while (fakeMicrotaskQueue.length > 0) {
+        const cb = fakeMicrotaskQueue.shift();
+        cb();
+      }
+    };
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function getVisibleChildren(element: Element): React$Node {
+    const children = [];
+    let node: any = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          ((node.tagName !== 'SCRIPT' && node.tagName !== 'script') ||
+            node.hasAttribute('data-meaningful')) &&
+          node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
+          !node.hasAttribute('hidden') &&
+          !node.hasAttribute('aria-hidden')
+        ) {
+          const props: any = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(
+            require('react').createElement(node.tagName.toLowerCase(), props),
+          );
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  it('completely exhausts synchronous work queue even if something throws', async () => {
+    function Throws({error}) {
+      throw error;
+    }
+
+    const container1 = document.createElement('div');
+    const root1 = ReactDOMClient.createRoot(container1);
+    const container2 = document.createElement('div');
+    const root2 = ReactDOMClient.createRoot(container2);
+    const container3 = document.createElement('div');
+    const root3 = ReactDOMClient.createRoot(container3);
+
+    await act(async () => {
+      root1.render(<Text text="Hi" />);
+      root2.render(<Text text="Andrew" />);
+      root3.render(<Text text="!" />);
+    });
+    assertLog(['Hi', 'Andrew', '!']);
+
+    const aahh = new Error('AAHH!');
+    const nooo = new Error('Noooooooooo!');
+
+    // Override the global queueMicrotask so we can test the behavior.
+    overrideQueueMicrotask = true;
+    let error;
+    try {
+      await act(() => {
+        ReactDOM.flushSync(() => {
+          root1.render(<Throws error={aahh} />);
+          root2.render(<Throws error={nooo} />);
+          root3.render(<Text text="aww" />);
+        });
+      });
+    } catch (e) {
+      error = e;
+    }
+
+    // The update to root 3 should have finished synchronously, even though the
+    // earlier updates errored.
+    assertLog(['aww']);
+    // Roots 1 and 2 were unmounted.
+    expect(getVisibleChildren(container1)).toEqual(undefined);
+    expect(getVisibleChildren(container2)).toEqual(undefined);
+    expect(getVisibleChildren(container3)).toEqual('aww');
+
+    // In modern environments, React would throw an AggregateError. Because
+    // AggregateError is not available, React throws the first error, then
+    // throws the remaining errors in separate tasks.
+    expect(error).toBe(aahh);
+    await flushFakeMicrotasks();
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactFragment-test.js b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
new file mode 100644
index 00000000000..a9dbabca244
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFragment-test.js
@@ -0,0 +1,1030 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let waitForAll;
+let assertConsoleErrorDev;
+
+describe('ReactFragment', () => {
+  beforeEach(function () {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  it('should render a single child via noop renderer', async () => {
+    const element = (
+      <>
+        <span>foo</span>
+      </>
+    );
+
+    ReactNoop.render(element);
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>foo</span>);
+  });
+
+  it('should render zero children via noop renderer', async () => {
+    const element = <React.Fragment />;
+
+    ReactNoop.render(element);
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('should render multiple children via noop renderer', async () => {
+    const element = (
+      <>
+        hello <span>world</span>
+      </>
+    );
+
+    ReactNoop.render(element);
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        hello <span>world</span>
+      </>,
+    );
+  });
+
+  it('should render an iterable via noop renderer', async () => {
+    const element = (
+      <>{new Set([<span key="a">hi</span>, <span key="b">bye</span>])}</>
+    );
+
+    ReactNoop.render(element);
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>hi</span>
+        <span>bye</span>
+      </>,
+    );
+  });
+
+  it('should preserve state of children with 1 level nesting', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <Stateful key="a" />
+      ) : (
+        <>
+          <Stateful key="a" />
+          <div key="b">World</div>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <div>World</div>
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state between top-level fragments', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <Stateful />
+        </>
+      ) : (
+        <>
+          <Stateful />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state of children nested at same level', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <>
+            <>
+              <Stateful key="a" />
+            </>
+          </>
+        </>
+      ) : (
+        <>
+          <>
+            <>
+              <div />
+              <Stateful key="a" />
+            </>
+          </>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div />
+        <div>Hello</div>
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state in non-top-level fragment nesting', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <>
+            <Stateful key="a" />
+          </>
+        </>
+      ) : (
+        <>
+          <Stateful key="a" />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state of children if nested 2 levels without siblings', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <Stateful key="a" />
+      ) : (
+        <>
+          <>
+            <Stateful key="a" />
+          </>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state of children if nested 2 levels with siblings', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <Stateful key="a" />
+      ) : (
+        <>
+          <>
+            <Stateful key="a" />
+          </>
+          <div />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <div />
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state between array nested in fragment and fragment', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <Stateful key="a" />
+        </>
+      ) : (
+        <>{[<Stateful key="a" />]}</>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state between top level fragment and array', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        [<Stateful key="a" />]
+      ) : (
+        <>
+          <Stateful key="a" />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state between array nested in fragment and double nested fragment', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>{[<Stateful key="a" />]}</>
+      ) : (
+        <>
+          <>
+            <Stateful key="a" />
+          </>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state between array nested in fragment and double nested array', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>{[<Stateful key="a" />]}</>
+      ) : (
+        [[<Stateful key="a" />]]
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state between double nested fragment and double nested array', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <>
+          <>
+            <Stateful key="a" />
+          </>
+        </>
+      ) : (
+        [[<Stateful key="a" />]]
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state of children when the keys are different', async function () {
+    const ops = [];
+
+    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>
+      ) : (
+        <React.Fragment key="b">
+          <Stateful />
+          <span>World</span>
+        </React.Fragment>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <span>World</span>
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state between unkeyed and keyed fragment', async function () {
+    const ops = [];
+
+    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>
+      ) : (
+        <>
+          <Stateful />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state with reordering in multiple levels', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <div>
+          <React.Fragment key="c">
+            <span>foo</span>
+            <div key="b">
+              <Stateful key="a" />
+            </div>
+          </React.Fragment>
+          <span>boop</span>
+        </div>
+      ) : (
+        <div>
+          <span>beep</span>
+          <React.Fragment key="c">
+            <div key="b">
+              <Stateful key="a" />
+            </div>
+            <span>bar</span>
+          </React.Fragment>
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>beep</span>
+        <div>
+          <div>Hello</div>
+        </div>
+        <span>bar</span>
+      </div>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>foo</span>
+        <div>
+          <div>Hello</div>
+        </div>
+        <span>boop</span>
+      </div>,
+    );
+  });
+
+  it('should not preserve state when switching to a keyed fragment to an array', async () => {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition ? (
+        <div>
+          {
+            <React.Fragment key="foo">
+              <Stateful />
+            </React.Fragment>
+          }
+          <span />
+        </div>
+      ) : (
+        <div>
+          {[<Stateful />]}
+          <span />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n' +
+        '\n' +
+        'Check the render method of `div`. ' +
+        'It was passed a child from Foo. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>Hello</div>
+        <span />
+      </div>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>Hello</div>
+        <span />
+      </div>,
+    );
+  });
+
+  it('should not preserve state when switching a nested unkeyed fragment to a passthrough component', async 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} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state when switching a nested keyed fragment to a passthrough component', async 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} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should not preserve state when switching a nested keyed array to a passthrough component', async 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} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+
+  it('should preserve state when it does not change positions', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    function Foo({condition}) {
+      return condition
+        ? [
+            <span />,
+            <>
+              <Stateful />
+            </>,
+          ]
+        : [
+            <span />,
+            <>
+              <Stateful />
+            </>,
+          ];
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n' +
+        '\n' +
+        'Check the top-level render call using <Foo>. ' +
+        'It was passed a child from Foo. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    // The key warning gets deduped because it's in the same component.
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span />
+        <div>Hello</div>
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    // The key warning gets deduped because it's in the same component.
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span />
+        <div>Hello</div>
+      </>,
+    );
+  });
+
+  it('should preserve state of children when adding a fragment wrapped in Lazy', async function () {
+    const ops = [];
+
+    class Stateful extends React.Component {
+      componentDidUpdate() {
+        ops.push('Update Stateful');
+      }
+
+      render() {
+        return <div>Hello</div>;
+      }
+    }
+
+    const lazyChild = React.lazy(async () => ({
+      default: (
+        <>
+          <Stateful key="a" />
+          <div key="b">World</div>
+        </>
+      ),
+    }));
+
+    function Foo({condition}) {
+      return condition ? <Stateful key="a" /> : lazyChild;
+    }
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo condition={false} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>Hello</div>
+        <div>World</div>
+      </>,
+    );
+
+    ReactNoop.render(<Foo condition={true} />);
+    await waitForAll([]);
+
+    expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
new file mode 100644
index 00000000000..82eb4620642
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -0,0 +1,2101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-func-assign */
+
+'use strict';
+
+let React;
+let ReactTestRenderer;
+let Scheduler;
+let ReactDOMServer;
+let act;
+let assertLog;
+let assertConsoleErrorDev;
+let waitForAll;
+let waitForThrow;
+
+describe('ReactHooks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    Scheduler = require('scheduler');
+    ReactDOMServer = require('react-dom/server');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForThrow = InternalTestUtils.waitForThrow;
+  });
+
+  if (__DEV__) {
+    // useDebugValue is a DEV-only hook
+    it('useDebugValue throws when used in a class component', async () => {
+      class Example extends React.Component {
+        render() {
+          React.useDebugValue('abc');
+          return null;
+        }
+      }
+      await expect(async () => {
+        await act(() => {
+          ReactTestRenderer.create(<Example />, {
+            unstable_isConcurrent: true,
+          });
+        });
+      }).rejects.toThrow(
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen' +
+          ' for one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      );
+    });
+  }
+
+  it('bails out in the render phase if all of the state is the same', async () => {
+    const {useState, useLayoutEffect} = React;
+
+    function Child({text}) {
+      Scheduler.log('Child: ' + text);
+      return text;
+    }
+
+    let setCounter1;
+    let setCounter2;
+    function Parent() {
+      const [counter1, _setCounter1] = useState(0);
+      setCounter1 = _setCounter1;
+      const [counter2, _setCounter2] = useState(0);
+      setCounter2 = _setCounter2;
+
+      const text = `${counter1}, ${counter2}`;
+      Scheduler.log(`Parent: ${text}`);
+      useLayoutEffect(() => {
+        Scheduler.log(`Effect: ${text}`);
+      });
+      return <Child text={text} />;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Parent />);
+    await waitForAll(['Parent: 0, 0', 'Child: 0, 0', 'Effect: 0, 0']);
+    expect(root).toMatchRenderedOutput('0, 0');
+
+    // Normal update
+    await act(() => {
+      setCounter1(1);
+      setCounter2(1);
+    });
+
+    assertLog(['Parent: 1, 1', 'Child: 1, 1', 'Effect: 1, 1']);
+
+    // Update that bails out.
+    await act(() => setCounter1(1));
+    assertLog(['Parent: 1, 1']);
+
+    // This time, one of the state updates but the other one doesn't. So we
+    // can't bail out.
+    await act(() => {
+      setCounter1(1);
+      setCounter2(2);
+    });
+
+    assertLog(['Parent: 1, 2', 'Child: 1, 2', 'Effect: 1, 2']);
+
+    // Lots of updates that eventually resolve to the current values.
+    await act(() => {
+      setCounter1(9);
+      setCounter2(3);
+      setCounter1(4);
+      setCounter2(7);
+      setCounter1(1);
+      setCounter2(2);
+    });
+
+    // Because the final values are the same as the current values, the
+    // component bails out.
+    assertLog(['Parent: 1, 2']);
+
+    // prepare to check SameValue
+    await act(() => {
+      setCounter1(0 / -1);
+      setCounter2(NaN);
+    });
+
+    assertLog(['Parent: 0, NaN', 'Child: 0, NaN', 'Effect: 0, NaN']);
+
+    // check if re-setting to negative 0 / NaN still bails out
+    await act(() => {
+      setCounter1(0 / -1);
+      setCounter2(NaN);
+      setCounter2(Infinity);
+      setCounter2(NaN);
+    });
+
+    assertLog(['Parent: 0, NaN']);
+
+    // check if changing negative 0 to positive 0 does not bail out
+    await act(() => {
+      setCounter1(0);
+    });
+    assertLog(['Parent: 0, NaN', 'Child: 0, NaN', 'Effect: 0, NaN']);
+  });
+
+  it('bails out in render phase if all the state is the same and props bail out with memo', async () => {
+    const {useState, memo} = React;
+
+    function Child({text}) {
+      Scheduler.log('Child: ' + text);
+      return text;
+    }
+
+    let setCounter1;
+    let setCounter2;
+    function Parent({theme}) {
+      const [counter1, _setCounter1] = useState(0);
+      setCounter1 = _setCounter1;
+      const [counter2, _setCounter2] = useState(0);
+      setCounter2 = _setCounter2;
+
+      const text = `${counter1}, ${counter2} (${theme})`;
+      Scheduler.log(`Parent: ${text}`);
+      return <Child text={text} />;
+    }
+
+    Parent = memo(Parent);
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Parent theme="light" />);
+    await waitForAll(['Parent: 0, 0 (light)', 'Child: 0, 0 (light)']);
+    expect(root).toMatchRenderedOutput('0, 0 (light)');
+
+    // Normal update
+    await act(() => {
+      setCounter1(1);
+      setCounter2(1);
+    });
+
+    assertLog(['Parent: 1, 1 (light)', 'Child: 1, 1 (light)']);
+
+    // Update that bails out.
+    await act(() => setCounter1(1));
+    assertLog(['Parent: 1, 1 (light)']);
+
+    // This time, one of the state updates but the other one doesn't. So we
+    // can't bail out.
+    await act(() => {
+      setCounter1(1);
+      setCounter2(2);
+    });
+
+    assertLog(['Parent: 1, 2 (light)', 'Child: 1, 2 (light)']);
+
+    // Updates bail out, but component still renders because props
+    // have changed
+    await act(() => {
+      setCounter1(1);
+      setCounter2(2);
+      root.update(<Parent theme="dark" />);
+    });
+
+    assertLog(['Parent: 1, 2 (dark)', 'Child: 1, 2 (dark)']);
+
+    // Both props and state bail out
+    await act(() => {
+      setCounter1(1);
+      setCounter2(2);
+      root.update(<Parent theme="dark" />);
+    });
+
+    assertLog(['Parent: 1, 2 (dark)']);
+  });
+
+  it('warns about setState second argument', async () => {
+    const {useState} = React;
+
+    let setCounter;
+    function Counter() {
+      const [counter, _setCounter] = useState(0);
+      setCounter = _setCounter;
+
+      Scheduler.log(`Count: ${counter}`);
+      return counter;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Counter />);
+    await waitForAll(['Count: 0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() =>
+      setCounter(1, () => {
+        throw new Error('Expected to ignore the callback.');
+      }),
+    );
+    assertConsoleErrorDev(
+      [
+        '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().',
+      ],
+      {withoutStack: true},
+    );
+    assertLog(['Count: 1']);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  it('warns about dispatch second argument', async () => {
+    const {useReducer} = React;
+
+    let dispatch;
+    function Counter() {
+      const [counter, _dispatch] = useReducer((s, a) => a, 0);
+      dispatch = _dispatch;
+
+      Scheduler.log(`Count: ${counter}`);
+      return counter;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Counter />);
+    await waitForAll(['Count: 0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    await act(() =>
+      dispatch(1, () => {
+        throw new Error('Expected to ignore the callback.');
+      }),
+    );
+    assertConsoleErrorDev(
+      [
+        '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().',
+      ],
+      {withoutStack: true},
+    );
+    assertLog(['Count: 1']);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  it('never bails out if context has changed', async () => {
+    const {useState, useLayoutEffect, useContext} = React;
+
+    const ThemeContext = React.createContext('light');
+
+    let setTheme;
+    function ThemeProvider({children}) {
+      const [theme, _setTheme] = useState('light');
+      Scheduler.log('Theme: ' + theme);
+      setTheme = _setTheme;
+      return (
+        <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      );
+    }
+
+    function Child({text}) {
+      Scheduler.log('Child: ' + text);
+      return text;
+    }
+
+    let setCounter;
+    function Parent() {
+      const [counter, _setCounter] = useState(0);
+      setCounter = _setCounter;
+
+      const theme = useContext(ThemeContext);
+
+      const text = `${counter} (${theme})`;
+      Scheduler.log(`Parent: ${text}`);
+      useLayoutEffect(() => {
+        Scheduler.log(`Effect: ${text}`);
+      });
+      return <Child text={text} />;
+    }
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    await act(() => {
+      root.update(
+        <ThemeProvider>
+          <Parent />
+        </ThemeProvider>,
+      );
+    });
+
+    assertLog([
+      'Theme: light',
+      'Parent: 0 (light)',
+      'Child: 0 (light)',
+      'Effect: 0 (light)',
+    ]);
+    expect(root).toMatchRenderedOutput('0 (light)');
+
+    // Updating the theme to the same value doesn't cause the consumers
+    // to re-render.
+    setTheme('light');
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0 (light)');
+
+    // Normal update
+    await act(() => setCounter(1));
+    assertLog(['Parent: 1 (light)', 'Child: 1 (light)', 'Effect: 1 (light)']);
+    expect(root).toMatchRenderedOutput('1 (light)');
+
+    // Update that doesn't change state, so it bails out
+    await act(() => setCounter(1));
+    assertLog(['Parent: 1 (light)']);
+    expect(root).toMatchRenderedOutput('1 (light)');
+
+    // Update that doesn't change state, but the context changes, too, so it
+    // can't bail out
+    await act(() => {
+      setCounter(1);
+      setTheme('dark');
+    });
+
+    assertLog([
+      'Theme: dark',
+      'Parent: 1 (dark)',
+      'Child: 1 (dark)',
+      'Effect: 1 (dark)',
+    ]);
+    expect(root).toMatchRenderedOutput('1 (dark)');
+  });
+
+  it('can bail out without calling render phase (as an optimization) if queue is known to be empty', async () => {
+    const {useState, useLayoutEffect} = React;
+
+    function Child({text}) {
+      Scheduler.log('Child: ' + text);
+      return text;
+    }
+
+    let setCounter;
+    function Parent() {
+      const [counter, _setCounter] = useState(0);
+      setCounter = _setCounter;
+      Scheduler.log('Parent: ' + counter);
+      useLayoutEffect(() => {
+        Scheduler.log('Effect: ' + counter);
+      });
+      return <Child text={counter} />;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Parent />);
+    await waitForAll(['Parent: 0', 'Child: 0', 'Effect: 0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Normal update
+    await act(() => setCounter(1));
+    assertLog(['Parent: 1', 'Child: 1', 'Effect: 1']);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Update to the same state. React doesn't know if the queue is empty
+    // 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.
+    await act(() => setCounter(1));
+    assertLog(['Parent: 1']);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Update to the same state again. This times, neither fiber has pending
+    // update priority, so we can bail out before even entering the render phase.
+    await act(() => setCounter(1));
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // This changes the state to something different so it renders normally.
+    await act(() => setCounter(2));
+    assertLog(['Parent: 2', 'Child: 2', 'Effect: 2']);
+    expect(root).toMatchRenderedOutput('2');
+
+    // prepare to check SameValue
+    await act(() => {
+      setCounter(0);
+    });
+    assertLog(['Parent: 0', 'Child: 0', 'Effect: 0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Update to the same state for the first time to flush the queue
+    await act(() => {
+      setCounter(0);
+    });
+
+    assertLog(['Parent: 0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Update again to the same state. Should bail out.
+    await act(() => {
+      setCounter(0);
+    });
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Update to a different state (positive 0 to negative 0)
+    await act(() => {
+      setCounter(0 / -1);
+    });
+    assertLog(['Parent: 0', 'Child: 0', 'Effect: 0']);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('bails out multiple times in a row without entering render phase', async () => {
+    const {useState} = React;
+
+    function Child({text}) {
+      Scheduler.log('Child: ' + text);
+      return text;
+    }
+
+    let setCounter;
+    function Parent() {
+      const [counter, _setCounter] = useState(0);
+      setCounter = _setCounter;
+      Scheduler.log('Parent: ' + counter);
+      return <Child text={counter} />;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Parent />);
+    await waitForAll(['Parent: 0', 'Child: 0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    const update = value => {
+      setCounter(previous => {
+        Scheduler.log(`Compute state (${previous} -> ${value})`);
+        return value;
+      });
+    };
+    ReactTestRenderer.unstable_batchedUpdates(() => {
+      update(0);
+      update(0);
+      update(0);
+      update(1);
+      update(2);
+      update(3);
+    });
+
+    assertLog([
+      // The first four updates were eagerly computed, because the queue is
+      // empty before each one.
+      'Compute state (0 -> 0)',
+      'Compute state (0 -> 0)',
+      'Compute state (0 -> 0)',
+      // The fourth update doesn't bail out
+      'Compute state (0 -> 1)',
+      // so subsequent updates can't be eagerly computed.
+    ]);
+
+    // Now let's enter the render phase
+    await waitForAll([
+      // We don't need to re-compute the first four updates. Only the final two.
+      'Compute state (1 -> 2)',
+      'Compute state (2 -> 3)',
+      'Parent: 3',
+      'Child: 3',
+    ]);
+    expect(root).toMatchRenderedOutput('3');
+  });
+
+  it('can rebase on top of a previously skipped update', async () => {
+    const {useState} = React;
+
+    function Child({text}) {
+      Scheduler.log('Child: ' + text);
+      return text;
+    }
+
+    let setCounter;
+    function Parent() {
+      const [counter, _setCounter] = useState(1);
+      setCounter = _setCounter;
+      Scheduler.log('Parent: ' + counter);
+      return <Child text={counter} />;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    root.update(<Parent />);
+    await waitForAll(['Parent: 1', 'Child: 1']);
+    expect(root).toMatchRenderedOutput('1');
+
+    const update = compute => {
+      setCounter(previous => {
+        const value = compute(previous);
+        Scheduler.log(`Compute state (${previous} -> ${value})`);
+        return value;
+      });
+    };
+
+    // Update at transition priority
+    React.startTransition(() => update(n => n * 100));
+    // The new state is eagerly computed.
+    assertLog(['Compute state (1 -> 100)']);
+
+    // but before it's flushed, a higher priority update interrupts it.
+    root.unstable_flushSync(() => {
+      update(n => n + 5);
+    });
+    assertLog([
+      // The eagerly computed state was completely skipped
+      'Compute state (1 -> 6)',
+      'Parent: 6',
+      'Child: 6',
+    ]);
+    expect(root).toMatchRenderedOutput('6');
+
+    // Now when we finish the first update, the second update is rebased on top.
+    // Notice we didn't have to recompute the first update even though it was
+    // skipped in the previous render.
+    await waitForAll([
+      'Compute state (100 -> 105)',
+      'Parent: 105',
+      'Child: 105',
+    ]);
+    expect(root).toMatchRenderedOutput('105');
+  });
+
+  it('warns about variable number of dependencies', async () => {
+    const {useLayoutEffect} = React;
+    function App(props) {
+      useLayoutEffect(() => {
+        Scheduler.log('Did commit: ' + props.dependencies.join(', '));
+      }, props.dependencies);
+      return props.dependencies;
+    }
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(<App dependencies={['A']} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    assertLog(['Did commit: A']);
+    await act(() => {
+      root.update(<App dependencies={['A', 'B']} />);
+    });
+    assertConsoleErrorDev([
+      'The final argument passed to useLayoutEffect changed size ' +
+        'between renders. The order and size of this array must remain ' +
+        'constant.\n' +
+        '\n' +
+        'Previous: [A]\n' +
+        'Incoming: [A, B]\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('warns if switching from dependencies to no dependencies', async () => {
+    const {useMemo} = React;
+    function App({text, hasDeps}) {
+      const resolvedText = useMemo(
+        () => {
+          Scheduler.log('Compute');
+          return text.toUpperCase();
+        },
+        hasDeps ? null : [text],
+      );
+      return resolvedText;
+    }
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    });
+    await act(() => {
+      root.update(<App text="Hello" hasDeps={true} />);
+    });
+    assertLog(['Compute']);
+    expect(root).toMatchRenderedOutput('HELLO');
+
+    await act(() => {
+      root.update(<App text="Hello" hasDeps={false} />);
+    });
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('warns if deps is not an array', async () => {
+    const {useEffect, useLayoutEffect, useMemo, useCallback} = React;
+
+    function App(props) {
+      useEffect(() => {}, props.deps);
+      useLayoutEffect(() => {}, props.deps);
+      useMemo(() => {}, props.deps);
+      useCallback(() => {}, props.deps);
+      return null;
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(<App deps={'hello'} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    assertConsoleErrorDev([
+      'useEffect received a final argument that is not an array (instead, received `string`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useLayoutEffect received a final argument that is not an array (instead, received `string`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useMemo received a final argument that is not an array (instead, received `string`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useCallback received a final argument that is not an array (instead, received `string`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+    ]);
+    await act(() => {
+      ReactTestRenderer.create(<App deps={100500} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    assertConsoleErrorDev([
+      'useEffect received a final argument that is not an array (instead, received `number`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useLayoutEffect received a final argument that is not an array (instead, received `number`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useMemo received a final argument that is not an array (instead, received `number`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useCallback received a final argument that is not an array (instead, received `number`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+    ]);
+    await act(() => {
+      ReactTestRenderer.create(<App deps={{}} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    assertConsoleErrorDev([
+      'useEffect received a final argument that is not an array (instead, received `object`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useLayoutEffect received a final argument that is not an array (instead, received `object`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useMemo received a final argument that is not an array (instead, received `object`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+      'useCallback received a final argument that is not an array (instead, received `object`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+    ]);
+
+    await act(() => {
+      ReactTestRenderer.create(<App deps={[]} />, {
+        unstable_isConcurrent: true,
+      });
+      ReactTestRenderer.create(<App deps={null} />, {
+        unstable_isConcurrent: true,
+      });
+      ReactTestRenderer.create(<App deps={undefined} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+  });
+
+  it('warns if deps is not an array for useImperativeHandle', async () => {
+    const {useImperativeHandle} = React;
+
+    const App = React.forwardRef((props, ref) => {
+      useImperativeHandle(ref, () => {}, props.deps);
+      return null;
+    });
+    App.displayName = 'App';
+
+    await act(() => {
+      ReactTestRenderer.create(<App deps={'hello'} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    assertConsoleErrorDev([
+      'useImperativeHandle received a final argument that is not an array (instead, received `string`). ' +
+        'When specified, the final argument must be an array.\n' +
+        '    in App (at **)',
+    ]);
+    await act(() => {
+      ReactTestRenderer.create(<App deps={null} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    await act(() => {
+      ReactTestRenderer.create(<App deps={[]} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    await act(() => {
+      ReactTestRenderer.create(<App deps={undefined} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+  });
+
+  it('does not forget render phase useState updates inside an effect', async () => {
+    const {useState, useEffect} = React;
+
+    function Counter() {
+      const [counter, setCounter] = useState(0);
+      if (counter === 0) {
+        setCounter(x => x + 1);
+        setCounter(x => x + 1);
+      }
+      useEffect(() => {
+        setCounter(x => x + 1);
+        setCounter(x => x + 1);
+      }, []);
+      return counter;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    await act(() => {
+      root.update(<Counter />);
+    });
+    expect(root).toMatchRenderedOutput('4');
+  });
+
+  it('does not forget render phase useReducer updates inside an effect with hoisted reducer', async () => {
+    const {useReducer, useEffect} = React;
+
+    const reducer = x => x + 1;
+    function Counter() {
+      const [counter, increment] = useReducer(reducer, 0);
+      if (counter === 0) {
+        increment();
+        increment();
+      }
+      useEffect(() => {
+        increment();
+        increment();
+      }, []);
+      return counter;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    await act(() => {
+      root.update(<Counter />);
+    });
+    expect(root).toMatchRenderedOutput('4');
+  });
+
+  it('does not forget render phase useReducer updates inside an effect with inline reducer', async () => {
+    const {useReducer, useEffect} = React;
+
+    function Counter() {
+      const [counter, increment] = useReducer(x => x + 1, 0);
+      if (counter === 0) {
+        increment();
+        increment();
+      }
+      useEffect(() => {
+        increment();
+        increment();
+      }, []);
+      return counter;
+    }
+
+    const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    await act(() => {
+      root.update(<Counter />);
+    });
+    expect(root).toMatchRenderedOutput('4');
+  });
+
+  it('warns for bad useImperativeHandle first arg', async () => {
+    const {useImperativeHandle} = React;
+    function App() {
+      useImperativeHandle({
+        focus() {},
+      });
+      return null;
+    }
+
+    await expect(async () => {
+      await act(() => {
+        ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+      });
+    }).rejects.toThrow('create is not a function');
+    assertConsoleErrorDev([
+      'Expected useImperativeHandle() second argument to be a function ' +
+        'that creates a handle. Instead received: undefined.\n' +
+        '    in App (at **)',
+      'Expected useImperativeHandle() first argument to either be a ' +
+        'ref callback or React.createRef() object. ' +
+        'Instead received: an object with keys {focus}.\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('warns for bad useImperativeHandle second arg', async () => {
+    const {useImperativeHandle} = React;
+    const App = React.forwardRef((props, ref) => {
+      useImperativeHandle(ref, {
+        focus() {},
+      });
+      return null;
+    });
+    App.displayName = 'App';
+
+    await act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    assertConsoleErrorDev([
+      'Expected useImperativeHandle() second argument to be a function ' +
+        'that creates a handle. Instead received: object.\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  // https://github.com/facebook/react/issues/14022
+  it('works with ReactDOMServer calls inside a component', async () => {
+    const {useState} = React;
+    function App(props) {
+      const markup1 = ReactDOMServer.renderToString(<p>hello</p>);
+      const markup2 = ReactDOMServer.renderToStaticMarkup(<p>bye</p>);
+      const [counter] = useState(0);
+      return markup1 + counter + markup2;
+    }
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    expect(root.toJSON()).toMatchSnapshot();
+  });
+
+  it("throws when calling hooks inside .memo's compare function", async () => {
+    const {useState} = React;
+    function App() {
+      useState(0);
+      return null;
+    }
+    const MemoApp = React.memo(App, () => {
+      useState(0);
+      return false;
+    });
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(<MemoApp />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    // trying to render again should trigger comparison and throw
+    await expect(
+      act(() => {
+        root.update(<MemoApp />);
+      }),
+    ).rejects.toThrow(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+    // the next round, it does a fresh mount, so should render
+    await expect(
+      act(() => {
+        root.update(<MemoApp />);
+      }),
+    ).resolves.not.toThrow(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+    // and then again, fail
+    await expect(
+      act(() => {
+        root.update(<MemoApp />);
+      }),
+    ).rejects.toThrow(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  });
+
+  it('warns when calling hooks inside useMemo', async () => {
+    const {useMemo, useState} = React;
+    function App() {
+      useMemo(() => {
+        useState(0);
+      });
+      return null;
+    }
+    await act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('warns when reading context inside useMemo', async () => {
+    const {useMemo, createContext} = React;
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    const ThemeContext = createContext('light');
+    function App() {
+      return useMemo(() => {
+        return ReactSharedInternals.H.readContext(ThemeContext);
+      }, []);
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('warns when reading context inside useMemo after reading outside it', async () => {
+    const {useMemo, createContext} = React;
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    const ThemeContext = createContext('light');
+    let firstRead, secondRead;
+    function App() {
+      firstRead = ReactSharedInternals.H.readContext(ThemeContext);
+      useMemo(() => {});
+      secondRead = ReactSharedInternals.H.readContext(ThemeContext);
+      return useMemo(() => {
+        return ReactSharedInternals.H.readContext(ThemeContext);
+      }, []);
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in App (at **)',
+    ]);
+    expect(firstRead).toBe('light');
+    expect(secondRead).toBe('light');
+  });
+
+  // Throws because there's no runtime cost for being strict here.
+  it('throws when reading context inside useEffect', async () => {
+    const {useEffect, createContext} = React;
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    const ThemeContext = createContext('light');
+    function App() {
+      useEffect(() => {
+        ReactSharedInternals.H.readContext(ThemeContext);
+      });
+      return null;
+    }
+
+    await act(async () => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+      // The exact message doesn't matter, just make sure we don't allow this
+      await waitForThrow('Context can only be read while React is rendering');
+    });
+  });
+
+  // Throws because there's no runtime cost for being strict here.
+  it('throws when reading context inside useLayoutEffect', async () => {
+    const {useLayoutEffect, createContext} = React;
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    const ThemeContext = createContext('light');
+    function App() {
+      useLayoutEffect(() => {
+        ReactSharedInternals.H.readContext(ThemeContext);
+      });
+      return null;
+    }
+
+    await expect(
+      act(() => {
+        ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+      }),
+    ).rejects.toThrow(
+      // The exact message doesn't matter, just make sure we don't allow this
+      'Context can only be read while React is rendering',
+    );
+  });
+
+  it('warns when reading context inside useReducer', async () => {
+    const {useReducer, createContext} = React;
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    const ThemeContext = createContext('light');
+    function App() {
+      const [state, dispatch] = useReducer((s, action) => {
+        ReactSharedInternals.H.readContext(ThemeContext);
+        return action;
+      }, 0);
+      if (state === 0) {
+        dispatch(1);
+      }
+      return null;
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  // Edge case.
+  it('warns when reading context inside eager useReducer', async () => {
+    const {useState, createContext} = React;
+    const ThemeContext = createContext('light');
+
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    let _setState;
+    function Fn() {
+      const [, setState] = useState(0);
+      _setState = setState;
+      return null;
+    }
+
+    class Cls extends React.Component {
+      render() {
+        _setState(() => ReactSharedInternals.H.readContext(ThemeContext));
+
+        return null;
+      }
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(
+        <>
+          <Fn />
+          <Cls />
+        </>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in Cls (at **)',
+      'Cannot update a component (`Fn`) while rendering a different component (`Cls`). ' +
+        'To locate the bad setState() call inside `Cls`, ' +
+        'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
+        '    in Cls (at **)',
+    ]);
+  });
+
+  it('warns when calling hooks inside useReducer', async () => {
+    const {useReducer, useState, useRef} = React;
+
+    function App() {
+      const [value, dispatch] = useReducer((state, action) => {
+        useRef(0);
+        return state + 1;
+      }, 0);
+      if (value === 0) {
+        dispatch('foo');
+      }
+      useState();
+      return value;
+    }
+
+    await expect(async () => {
+      await act(() => {
+        ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+      });
+    }).rejects.toThrow(
+      'Update hook called on initial render. This is likely a bug in React. Please file an issue.',
+    );
+    assertConsoleErrorDev([
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+      '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://react.dev/link/rules-of-hooks\n' +
+        '\n' +
+        '   Previous render            Next render\n' +
+        '   ------------------------------------------------------\n' +
+        '1. useReducer                 useReducer\n' +
+        '2. useState                   useRef\n' +
+        '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+        '\n' +
+        '    in App (at **)',
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it("warns when calling hooks inside useState's initialize function", async () => {
+    const {useState, useRef} = React;
+    function App() {
+      useState(() => {
+        useRef(0);
+        return 0;
+      });
+      return null;
+    }
+    await act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('resets warning internal state when interrupted by an error', async () => {
+    const ReactSharedInternals =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+    const ThemeContext = React.createContext('light');
+    function App() {
+      React.useMemo(() => {
+        // Trigger warnings
+        ReactSharedInternals.H.readContext(ThemeContext);
+        React.useRef();
+        // Interrupt exit from a Hook
+        throw new Error('No.');
+      }, []);
+    }
+
+    class Boundary extends React.Component {
+      state = {};
+      static getDerivedStateFromError(error) {
+        return {err: true};
+      }
+      render() {
+        if (this.state.err) {
+          return 'Oops';
+        }
+        return this.props.children;
+      }
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(
+        <Boundary>
+          <App />
+        </Boundary>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in App (at **)',
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+      '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().\n' +
+        '    in App (at **)',
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+    ]);
+
+    function Valid() {
+      React.useState();
+      React.useMemo(() => {});
+      React.useReducer(() => {});
+      React.useEffect(() => {});
+      React.useLayoutEffect(() => {});
+      React.useCallback(() => {});
+      React.useRef();
+      React.useImperativeHandle(
+        () => {},
+        () => {},
+      );
+      if (__DEV__) {
+        React.useDebugValue();
+      }
+      return null;
+    }
+    // Verify it doesn't think we're still inside a Hook.
+    // Should have no warnings.
+    await act(() => {
+      ReactTestRenderer.create(<Valid />, {unstable_isConcurrent: true});
+    });
+
+    // Verify warnings don't get permanently disabled.
+    await act(() => {
+      ReactTestRenderer.create(
+        <Boundary>
+          <App />
+        </Boundary>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    assertConsoleErrorDev([
+      '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().\n' +
+        '    in App (at **)',
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+      '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().\n' +
+        '    in App (at **)',
+      '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://react.dev/link/rules-of-hooks\n' +
+        '    in App (at **)',
+    ]);
+  });
+
+  it('double-invokes components with Hooks in Strict Mode', async () => {
+    const {useState, StrictMode} = React;
+    let renderCount = 0;
+
+    function NoHooks() {
+      renderCount++;
+      return <div />;
+    }
+
+    function HasHooks() {
+      useState(0);
+      renderCount++;
+      return <div />;
+    }
+
+    const FwdRef = React.forwardRef((props, ref) => {
+      renderCount++;
+      return <div />;
+    });
+
+    const FwdRefHasHooks = React.forwardRef((props, ref) => {
+      useState(0);
+      renderCount++;
+      return <div />;
+    });
+
+    const Memo = React.memo(props => {
+      renderCount++;
+      return <div />;
+    });
+
+    const MemoHasHooks = React.memo(props => {
+      useState(0);
+      renderCount++;
+      return <div />;
+    });
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    });
+
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<NoHooks />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<NoHooks />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <NoHooks />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <NoHooks />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<FwdRef />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<FwdRef />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <FwdRef />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <FwdRef />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<Memo arg={1} />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<Memo arg={2} />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <Memo arg={1} />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <Memo arg={2} />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<HasHooks />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<HasHooks />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <HasHooks />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <HasHooks />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<FwdRefHasHooks />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<FwdRefHasHooks />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <FwdRefHasHooks />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <FwdRefHasHooks />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<MemoHasHooks arg={1} />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(<MemoHasHooks arg={2} />);
+    });
+    expect(renderCount).toBe(1);
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <MemoHasHooks arg={1} />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+    renderCount = 0;
+    await act(() => {
+      renderer.update(
+        <StrictMode>
+          <MemoHasHooks arg={2} />
+        </StrictMode>,
+      );
+    });
+    expect(renderCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+  });
+
+  it('double-invokes useMemo in DEV StrictMode despite []', async () => {
+    const {useMemo, StrictMode} = React;
+
+    let useMemoCount = 0;
+    function BadUseMemo() {
+      useMemo(() => {
+        useMemoCount++;
+      }, []);
+      return <div />;
+    }
+
+    useMemoCount = 0;
+    await act(() => {
+      ReactTestRenderer.create(
+        <StrictMode>
+          <BadUseMemo />
+        </StrictMode>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(useMemoCount).toBe(__DEV__ ? 2 : 1); // Has Hooks
+  });
+
+  describe('hook ordering', () => {
+    const useCallbackHelper = () => React.useCallback(() => {}, []);
+    const useContextHelper = () => React.useContext(React.createContext());
+    const useDebugValueHelper = () => React.useDebugValue('abc');
+    const useEffectHelper = () => React.useEffect(() => () => {}, []);
+    const useImperativeHandleHelper = () => {
+      React.useImperativeHandle({current: null}, () => ({}), []);
+    };
+    const useLayoutEffectHelper = () =>
+      React.useLayoutEffect(() => () => {}, []);
+    const useMemoHelper = () => React.useMemo(() => 123, []);
+    const useReducerHelper = () => React.useReducer((s, a) => a, 0);
+    const useRefHelper = () => React.useRef(null);
+    const useStateHelper = () => React.useState(0);
+
+    // We don't include useImperativeHandleHelper in this set,
+    // because it generates an additional warning about the inputs length changing.
+    // We test it below with its own test.
+    const orderedHooks = [
+      useCallbackHelper,
+      useContextHelper,
+      useDebugValueHelper,
+      useEffectHelper,
+      useLayoutEffectHelper,
+      useMemoHelper,
+      useReducerHelper,
+      useRefHelper,
+      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.
+    const hooksInList = [
+      useCallbackHelper,
+      useEffectHelper,
+      useImperativeHandleHelper,
+      useLayoutEffectHelper,
+      useMemoHelper,
+      useReducerHelper,
+      useRefHelper,
+      useStateHelper,
+    ];
+
+    const useTransitionHelper = () => React.useTransition();
+    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
+      }`;
+    };
+
+    orderedHooks.forEach((firstHelper, index) => {
+      const secondHelper =
+        index > 0
+          ? orderedHooks[index - 1]
+          : orderedHooks[orderedHooks.length - 1];
+
+      const hookNameA = firstHelper.name
+        .replace('use', '')
+        .replace('Helper', '');
+      const hookNameB = secondHelper.name
+        .replace('use', '')
+        .replace('Helper', '');
+
+      it(`warns on using differently ordered hooks (${hookNameA}, ${hookNameB}) on subsequent renders`, async () => {
+        function App(props) {
+          if (props.update) {
+            secondHelper();
+            firstHelper();
+          } else {
+            firstHelper();
+            secondHelper();
+          }
+          // This should not appear in the warning message because it occurs after the first mismatch
+          useRefHelper();
+          return null;
+        }
+        let root;
+        await act(() => {
+          root = ReactTestRenderer.create(<App update={false} />, {
+            unstable_isConcurrent: true,
+          });
+        });
+        try {
+          await 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.
+        }
+        assertConsoleErrorDev([
+          '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://react.dev/link/rules-of-hooks\n' +
+            '\n' +
+            '   Previous render            Next render\n' +
+            '   ------------------------------------------------------\n' +
+            `1. ${formatHookNamesToMatchErrorMessage(hookNameA, hookNameB)}\n` +
+            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+            '\n' +
+            '    in App (at **)',
+        ]);
+
+        // further warnings for this component are silenced
+        try {
+          await 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.
+          // We just want to verify that warnings are always logged.
+        }
+      });
+
+      it(`warns when more hooks (${hookNameA}, ${hookNameB}) are used during update than mount`, async () => {
+        function App(props) {
+          if (props.update) {
+            firstHelper();
+            secondHelper();
+          } else {
+            firstHelper();
+          }
+          return null;
+        }
+        let root;
+        await act(() => {
+          root = ReactTestRenderer.create(<App update={false} />, {
+            unstable_isConcurrent: true,
+          });
+        });
+
+        try {
+          await 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.
+        }
+        assertConsoleErrorDev([
+          '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://react.dev/link/rules-of-hooks\n' +
+            '\n' +
+            '   Previous render            Next render\n' +
+            '   ------------------------------------------------------\n' +
+            `1. ${formatHookNamesToMatchErrorMessage(hookNameA, hookNameA)}\n` +
+            `2. undefined                  use${hookNameB}\n` +
+            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+            '\n' +
+            '    in App (at **)',
+        ]);
+      });
+    });
+
+    hooksInList.forEach((firstHelper, index) => {
+      const secondHelper =
+        index > 0
+          ? hooksInList[index - 1]
+          : hooksInList[hooksInList.length - 1];
+
+      const hookNameA = firstHelper.name
+        .replace('use', '')
+        .replace('Helper', '');
+      const hookNameB = secondHelper.name
+        .replace('use', '')
+        .replace('Helper', '');
+
+      it(`warns when fewer hooks (${hookNameA}, ${hookNameB}) are used during update than mount`, async () => {
+        function App(props) {
+          if (props.update) {
+            firstHelper();
+          } else {
+            firstHelper();
+            secondHelper();
+          }
+          return null;
+        }
+        let root;
+        await act(() => {
+          root = ReactTestRenderer.create(<App update={false} />, {
+            unstable_isConcurrent: true,
+          });
+        });
+
+        await expect(async () => {
+          await act(() => {
+            root.update(<App update={true} />);
+          });
+        }).rejects.toThrow('Rendered fewer hooks than expected. ');
+      });
+    });
+
+    it(
+      'warns on using differently ordered hooks ' +
+        '(useImperativeHandleHelper, useMemoHelper) on subsequent renders',
+      async () => {
+        function App(props) {
+          if (props.update) {
+            useMemoHelper();
+            useImperativeHandleHelper();
+          } else {
+            useImperativeHandleHelper();
+            useMemoHelper();
+          }
+          // This should not appear in the warning message because it occurs after the first mismatch
+          useRefHelper();
+          return null;
+        }
+        let root;
+        await act(() => {
+          root = ReactTestRenderer.create(<App update={false} />, {
+            unstable_isConcurrent: true,
+          });
+        });
+        await act(() => {
+          root.update(<App update={true} />);
+        }).catch(e => {});
+        // 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.
+        assertConsoleErrorDev([
+          '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://react.dev/link/rules-of-hooks\n' +
+            '\n' +
+            '   Previous render            Next render\n' +
+            '   ------------------------------------------------------\n' +
+            `1. ${formatHookNamesToMatchErrorMessage(
+              'ImperativeHandle',
+              'Memo',
+            )}\n` +
+            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+            '\n' +
+            '    in App (at **)',
+        ]);
+
+        // further warnings for this component are silenced
+        await act(() => {
+          root.update(<App update={false} />);
+        });
+      },
+    );
+
+    it('detects a bad hook order even if the component throws', async () => {
+      const {useState, useReducer} = React;
+      function useCustomHook() {
+        useState(0);
+      }
+      function App(props) {
+        if (props.update) {
+          useCustomHook();
+          useReducer((s, a) => a, 0);
+          throw new Error('custom error');
+        } else {
+          useReducer((s, a) => a, 0);
+          useCustomHook();
+        }
+        return null;
+      }
+      let root;
+      await act(() => {
+        root = ReactTestRenderer.create(<App update={false} />, {
+          unstable_isConcurrent: true,
+        });
+      });
+      await expect(async () => {
+        await act(() => {
+          root.update(<App update={true} />);
+        });
+      }).rejects.toThrow('custom error');
+      assertConsoleErrorDev([
+        '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://react.dev/link/rules-of-hooks\n' +
+          '\n' +
+          '   Previous render            Next render\n' +
+          '   ------------------------------------------------------\n' +
+          '1. useReducer                 useState\n' +
+          '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+          '\n' +
+          '    in App (at **)',
+      ]);
+    });
+  });
+
+  // Regression test for #14674
+  it('does not swallow original error when updating another component in render phase', async () => {
+    const {useState} = React;
+
+    let _setState;
+    function A() {
+      const [, setState] = useState(0);
+      _setState = setState;
+      return null;
+    }
+
+    function B() {
+      _setState(() => {
+        throw new Error('Hello');
+      });
+      return null;
+    }
+
+    await expect(async () => {
+      await act(() => {
+        ReactTestRenderer.create(
+          <>
+            <A />
+            <B />
+          </>,
+          {unstable_isConcurrent: true},
+        );
+      });
+    }).rejects.toThrow('Hello');
+    assertConsoleErrorDev([
+      'Cannot update a component (`A`) while rendering a different component (`B`). ' +
+        'To locate the bad setState() call inside `B`, ' +
+        'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
+        '    in B (at **)',
+    ]);
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/15057
+  it('does not fire a false positive warning when previous effect unmounts the component', async () => {
+    const {useState, useEffect} = React;
+    let globalListener;
+
+    function A() {
+      const [show, setShow] = useState(true);
+      function hideMe() {
+        setShow(false);
+      }
+      return show ? <B hideMe={hideMe} /> : null;
+    }
+
+    function B(props) {
+      return <C {...props} />;
+    }
+
+    function C({hideMe}) {
+      const [, setState] = useState();
+
+      useEffect(() => {
+        let isStale = false;
+
+        globalListener = () => {
+          if (!isStale) {
+            setState('hello');
+          }
+        };
+
+        return () => {
+          isStale = true;
+          hideMe();
+        };
+      });
+      return null;
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(<A />, {unstable_isConcurrent: true});
+    });
+
+    // Note: should *not* warn about updates on unmounted component.
+    // Because there's no way for component to know it got unmounted.
+    await expect(
+      act(() => {
+        globalListener();
+        globalListener();
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/14790
+  it('does not fire a false positive warning when suspending memo', async () => {
+    const {Suspense, useState} = React;
+
+    let isSuspended = true;
+    let resolve;
+    function trySuspend() {
+      if (isSuspended) {
+        throw new Promise(res => {
+          resolve = () => {
+            isSuspended = false;
+            res();
+          };
+        });
+      }
+    }
+
+    function Child() {
+      useState();
+      trySuspend();
+      return 'hello';
+    }
+
+    const Wrapper = React.memo(Child);
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <Suspense fallback="loading">
+          <Wrapper />
+        </Suspense>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(root).toMatchRenderedOutput('loading');
+    await act(resolve);
+    expect(root).toMatchRenderedOutput('hello');
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/14790
+  it('does not fire a false positive warning when suspending forwardRef', async () => {
+    const {Suspense, useState} = React;
+
+    let isSuspended = true;
+    let resolve;
+    function trySuspend() {
+      if (isSuspended) {
+        throw new Promise(res => {
+          resolve = () => {
+            isSuspended = false;
+            res();
+          };
+        });
+      }
+    }
+
+    function render(props, ref) {
+      useState();
+      trySuspend();
+      return 'hello';
+    }
+
+    const Wrapper = React.forwardRef(render);
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <Suspense fallback="loading">
+          <Wrapper />
+        </Suspense>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(root).toMatchRenderedOutput('loading');
+    await act(resolve);
+    expect(root).toMatchRenderedOutput('hello');
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/14790
+  it('does not fire a false positive warning when suspending memo(forwardRef)', async () => {
+    const {Suspense, useState} = React;
+
+    let isSuspended = true;
+    let resolve;
+    function trySuspend() {
+      if (isSuspended) {
+        throw new Promise(res => {
+          resolve = () => {
+            isSuspended = false;
+            res();
+          };
+        });
+      }
+    }
+
+    function render(props, ref) {
+      useState();
+      trySuspend();
+      return 'hello';
+    }
+
+    const Wrapper = React.memo(React.forwardRef(render));
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <Suspense fallback="loading">
+          <Wrapper />
+        </Suspense>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    expect(root).toMatchRenderedOutput('loading');
+    await act(resolve);
+    expect(root).toMatchRenderedOutput('hello');
+  });
+
+  // Regression test for https://github.com/facebook/react/issues/15732
+  it('resets hooks when an error is thrown in the middle of a list of hooks', async () => {
+    const {useEffect, useState} = React;
+
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false};
+
+      static getDerivedStateFromError() {
+        return {hasError: true};
+      }
+
+      render() {
+        return (
+          <Wrapper>
+            {this.state.hasError ? 'Error!' : this.props.children}
+          </Wrapper>
+        );
+      }
+    }
+
+    function Wrapper({children}) {
+      return children;
+    }
+
+    let setShouldThrow;
+    function Thrower() {
+      const [shouldThrow, _setShouldThrow] = useState(false);
+      setShouldThrow = _setShouldThrow;
+
+      if (shouldThrow) {
+        throw new Error('Throw!');
+      }
+
+      useEffect(() => {}, []);
+
+      return 'Throw!';
+    }
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <ErrorBoundary>
+          <Thrower />
+        </ErrorBoundary>,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    expect(root).toMatchRenderedOutput('Throw!');
+    await act(() => setShouldThrow(true));
+    expect(root).toMatchRenderedOutput('Error!');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
new file mode 100644
index 00000000000..c61336b4dd4
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -0,0 +1,4377 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-func-assign */
+
+'use strict';
+
+let React;
+let textCache;
+let readText;
+let resolveText;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let Activity;
+let useState;
+let useReducer;
+let useEffect;
+let useInsertionEffect;
+let useLayoutEffect;
+let useCallback;
+let useMemo;
+let useRef;
+let useImperativeHandle;
+let useTransition;
+let useDeferredValue;
+let forwardRef;
+let memo;
+let act;
+let ContinuousEventPriority;
+let SuspenseList;
+let waitForAll;
+let waitFor;
+let waitForThrow;
+let waitForPaint;
+let assertLog;
+let assertConsoleErrorDev;
+
+describe('ReactHooksWithNoopRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useFakeTimers();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    useState = React.useState;
+    useReducer = React.useReducer;
+    useEffect = React.useEffect;
+    useInsertionEffect = React.useInsertionEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    useCallback = React.useCallback;
+    useMemo = React.useMemo;
+    useRef = React.useRef;
+    useImperativeHandle = React.useImperativeHandle;
+    forwardRef = React.forwardRef;
+    memo = React.memo;
+    useTransition = React.useTransition;
+    useDeferredValue = React.useDeferredValue;
+    Suspense = React.Suspense;
+    Activity = React.Activity;
+    ContinuousEventPriority =
+      require('react-reconciler/constants').ContinuousEventPriority;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForThrow = InternalTestUtils.waitForThrow;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+
+    textCache = new Map();
+
+    readText = text => {
+      const record = textCache.get(text);
+      if (record !== undefined) {
+        switch (record.status) {
+          case 'pending':
+            throw record.promise;
+          case 'rejected':
+            throw Error('Failed to load: ' + text);
+          case 'resolved':
+            return text;
+        }
+      } else {
+        let ping;
+        const promise = new Promise(resolve => (ping = resolve));
+        const newRecord = {
+          status: 'pending',
+          ping: ping,
+          promise,
+        };
+        textCache.set(text, newRecord);
+        throw promise;
+      }
+    };
+
+    resolveText = text => {
+      const record = textCache.get(text);
+      if (record !== undefined) {
+        if (record.status === 'pending') {
+          Scheduler.log(`Promise resolved [${text}]`);
+          record.ping();
+          record.ping = null;
+          record.status = 'resolved';
+          clearTimeout(record.promise._timer);
+          record.promise = null;
+        }
+      } else {
+        const newRecord = {
+          ping: null,
+          status: 'resolved',
+          promise: null,
+        };
+        textCache.set(text, newRecord);
+      }
+    };
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text} />;
+  }
+
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      readText(text);
+      Scheduler.log(text);
+      return <span prop={text} />;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.log(`Suspend! [${text}]`);
+        if (typeof props.ms === 'number' && promise._timer === undefined) {
+          promise._timer = setTimeout(() => {
+            resolveText(text);
+          }, props.ms);
+        }
+      } else {
+        Scheduler.log(`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', async () => {
+    function Counter(props, ref) {
+      const [count, updateCount] = useState(0);
+      useImperativeHandle(ref, () => ({updateCount}));
+      return <Text text={props.label + ': ' + count} />;
+    }
+    Counter = forwardRef(Counter);
+
+    // Initial mount
+    const counter = React.createRef(null);
+    ReactNoop.render(<Counter label="Count" ref={counter} />);
+    await waitForAll(['Count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+    // Schedule some updates
+    await act(async () => {
+      React.startTransition(() => {
+        counter.current.updateCount(1);
+        counter.current.updateCount(count => count + 10);
+      });
+
+      // Partially flush without committing
+      await waitFor(['Count: 11']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      // Interrupt with a high priority update
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(<Counter label="Total" />);
+      });
+      assertLog(['Total: 0']);
+
+      // Resume rendering
+      await waitForAll(['Total: 11']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Total: 11" />);
+    });
+  });
+
+  it('throws inside class components', async () => {
+    class BadCounter extends React.Component {
+      render() {
+        const [count] = useState(0);
+        return <Text text={this.props.label + ': ' + count} />;
+      }
+    }
+    ReactNoop.render(<BadCounter />);
+
+    await waitForThrow(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+
+    // Confirm that a subsequent hook works properly.
+    function GoodCounter(props, ref) {
+      const [count] = useState(props.initialCount);
+      return <Text text={count} />;
+    }
+    ReactNoop.render(<GoodCounter initialCount={10} />);
+    await waitForAll([10]);
+  });
+
+  it('throws when called outside the render phase', async () => {
+    expect(() => useState(0)).toThrow(
+      "Cannot read property 'useState' of null",
+    );
+    assertConsoleErrorDev(
+      [
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+          ' one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  describe('useState', () => {
+    it('simple mount and update', async () => {
+      function Counter(props, ref) {
+        const [count, updateCount] = useState(0);
+        useImperativeHandle(ref, () => ({updateCount}));
+        return <Text text={'Count: ' + count} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      await act(() => counter.current.updateCount(1));
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+
+      await act(() => counter.current.updateCount(count => count + 10));
+      assertLog(['Count: 11']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 11" />);
+    });
+
+    it('lazy state initializer', async () => {
+      function Counter(props, ref) {
+        const [count, updateCount] = useState(() => {
+          Scheduler.log('getInitialState');
+          return props.initialState;
+        });
+        useImperativeHandle(ref, () => ({updateCount}));
+        return <Text text={'Count: ' + count} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter initialState={42} ref={counter} />);
+      await waitForAll(['getInitialState', 'Count: 42']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 42" />);
+
+      await act(() => counter.current.updateCount(7));
+      assertLog(['Count: 7']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 7" />);
+    });
+
+    it('multiple states', async () => {
+      function Counter(props, ref) {
+        const [count, updateCount] = useState(0);
+        const [label, updateLabel] = useState('Count');
+        useImperativeHandle(ref, () => ({updateCount, updateLabel}));
+        return <Text text={label + ': ' + count} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      await act(() => counter.current.updateCount(7));
+      assertLog(['Count: 7']);
+
+      await act(() => counter.current.updateLabel('Total'));
+      assertLog(['Total: 7']);
+    });
+
+    it('returns the same updater function every time', async () => {
+      let updater = null;
+      function Counter() {
+        const [count, updateCount] = useState(0);
+        updater = updateCount;
+        return <Text text={'Count: ' + count} />;
+      }
+      ReactNoop.render(<Counter />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      const firstUpdater = updater;
+
+      await act(() => firstUpdater(1));
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+
+      const secondUpdater = updater;
+
+      await act(() => firstUpdater(count => count + 10));
+      assertLog(['Count: 11']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 11" />);
+
+      expect(firstUpdater).toBe(secondUpdater);
+    });
+
+    it('does not warn on set after unmount', async () => {
+      let _updateCount;
+      function Counter(props, ref) {
+        const [, updateCount] = useState(0);
+        _updateCount = updateCount;
+        return null;
+      }
+
+      ReactNoop.render(<Counter />);
+      await waitForAll([]);
+      ReactNoop.render(null);
+      await waitForAll([]);
+      await act(() => _updateCount(1));
+    });
+
+    it('works with memo', async () => {
+      let _updateCount;
+      function Counter(props) {
+        const [count, updateCount] = useState(0);
+        _updateCount = updateCount;
+        return <Text text={'Count: ' + count} />;
+      }
+      Counter = memo(Counter);
+
+      ReactNoop.render(<Counter />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      ReactNoop.render(<Counter />);
+      await waitForAll([]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      await act(() => _updateCount(1));
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+    });
+  });
+
+  describe('updates during the render phase', () => {
+    it('restarts the render function and applies the new updates on top', async () => {
+      function ScrollView({row: newRow}) {
+        const [isScrollingDown, setIsScrollingDown] = useState(false);
+        const [row, setRow] = useState(null);
+
+        if (row !== newRow) {
+          // Row changed since last render. Update isScrollingDown.
+          setIsScrollingDown(row !== null && newRow > row);
+          setRow(newRow);
+        }
+
+        return <Text text={`Scrolling down: ${isScrollingDown}`} />;
+      }
+
+      ReactNoop.render(<ScrollView row={1} />);
+      await waitForAll(['Scrolling down: false']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: false" />,
+      );
+
+      ReactNoop.render(<ScrollView row={5} />);
+      await waitForAll(['Scrolling down: true']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: true" />,
+      );
+
+      ReactNoop.render(<ScrollView row={5} />);
+      await waitForAll(['Scrolling down: true']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: true" />,
+      );
+
+      ReactNoop.render(<ScrollView row={10} />);
+      await waitForAll(['Scrolling down: true']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: true" />,
+      );
+
+      ReactNoop.render(<ScrollView row={2} />);
+      await waitForAll(['Scrolling down: false']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: false" />,
+      );
+
+      ReactNoop.render(<ScrollView row={2} />);
+      await waitForAll(['Scrolling down: false']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Scrolling down: false" />,
+      );
+    });
+
+    it('warns about render phase update on a different component', async () => {
+      let setStep;
+      function Foo() {
+        const [step, _setStep] = useState(0);
+        setStep = _setStep;
+        return <Text text={`Foo [${step}]`} />;
+      }
+
+      function Bar({triggerUpdate}) {
+        if (triggerUpdate) {
+          setStep(x => x + 1);
+        }
+        return <Text text="Bar" />;
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await act(() => {
+        root.render(
+          <>
+            <Foo />
+            <Bar />
+          </>,
+        );
+      });
+      assertLog(['Foo [0]', 'Bar']);
+
+      // Bar will update Foo during its render phase. React should warn.
+      root.render(
+        <>
+          <Foo />
+          <Bar triggerUpdate={true} />
+        </>,
+      );
+      await waitForAll(['Foo [0]', 'Bar', 'Foo [1]']);
+      assertConsoleErrorDev([
+        'Cannot update a component (`Foo`) while rendering a different component (`Bar`). ' +
+          'To locate the bad setState() call inside `Bar`, ' +
+          'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
+          '    in Bar (at **)',
+      ]);
+
+      // It should not warn again (deduplication).
+      await act(async () => {
+        root.render(
+          <>
+            <Foo />
+            <Bar triggerUpdate={true} />
+          </>,
+        );
+        await waitForAll(['Foo [1]', 'Bar', 'Foo [2]']);
+      });
+    });
+
+    it('keeps restarting until there are no more new updates', async () => {
+      function Counter({row: newRow}) {
+        const [count, setCount] = useState(0);
+        if (count < 3) {
+          setCount(count + 1);
+        }
+        Scheduler.log('Render: ' + count);
+        return <Text text={count} />;
+      }
+
+      ReactNoop.render(<Counter />);
+      await waitForAll(['Render: 0', 'Render: 1', 'Render: 2', 'Render: 3', 3]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+    });
+
+    it('updates multiple times within same render function', async () => {
+      function Counter({row: newRow}) {
+        const [count, setCount] = useState(0);
+        if (count < 12) {
+          setCount(c => c + 1);
+          setCount(c => c + 1);
+          setCount(c => c + 1);
+        }
+        Scheduler.log('Render: ' + count);
+        return <Text text={count} />;
+      }
+
+      ReactNoop.render(<Counter />);
+      await waitForAll([
+        // Should increase by three each time
+        'Render: 0',
+        'Render: 3',
+        'Render: 6',
+        'Render: 9',
+        'Render: 12',
+        12,
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={12} />);
+    });
+
+    it('throws after too many iterations', async () => {
+      function Counter({row: newRow}) {
+        const [count, setCount] = useState(0);
+        setCount(count + 1);
+        Scheduler.log('Render: ' + count);
+        return <Text text={count} />;
+      }
+      ReactNoop.render(<Counter />);
+      await waitForThrow(
+        'Too many re-renders. React limits the number of renders to prevent ' +
+          'an infinite loop.',
+      );
+    });
+
+    it('works with useReducer', async () => {
+      function reducer(state, action) {
+        return action === 'increment' ? state + 1 : state;
+      }
+      function Counter({row: newRow}) {
+        const [count, dispatch] = useReducer(reducer, 0);
+        if (count < 3) {
+          dispatch('increment');
+        }
+        Scheduler.log('Render: ' + count);
+        return <Text text={count} />;
+      }
+
+      ReactNoop.render(<Counter />);
+      await waitForAll(['Render: 0', 'Render: 1', 'Render: 2', 'Render: 3', 3]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+    });
+
+    it('uses reducer passed at time of render, not time of dispatch', async () => {
+      // This test is a bit contrived but it demonstrates a subtle edge case.
+
+      // Reducer A increments by 1. Reducer B increments by 10.
+      function reducerA(state, action) {
+        switch (action) {
+          case 'increment':
+            return state + 1;
+          case 'reset':
+            return 0;
+        }
+      }
+      function reducerB(state, action) {
+        switch (action) {
+          case 'increment':
+            return state + 10;
+          case 'reset':
+            return 0;
+        }
+      }
+
+      function Counter({row: newRow}, ref) {
+        const [reducer, setReducer] = useState(() => reducerA);
+        const [count, dispatch] = useReducer(reducer, 0);
+        useImperativeHandle(ref, () => ({dispatch}));
+        if (count < 20) {
+          dispatch('increment');
+          // Swap reducers each time we increment
+          if (reducer === reducerA) {
+            setReducer(() => reducerB);
+          } else {
+            setReducer(() => reducerA);
+          }
+        }
+        Scheduler.log('Render: ' + count);
+        return <Text text={count} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll([
+        // The count should increase by alternating amounts of 10 and 1
+        // until we reach 21.
+        'Render: 0',
+        'Render: 10',
+        'Render: 11',
+        'Render: 21',
+        21,
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={21} />);
+
+      // Test that it works on update, too. This time the log is a bit different
+      // because we started with reducerB instead of reducerA.
+      await act(() => {
+        counter.current.dispatch('reset');
+      });
+      ReactNoop.render(<Counter ref={counter} />);
+      assertLog([
+        'Render: 0',
+        'Render: 1',
+        'Render: 11',
+        'Render: 12',
+        'Render: 22',
+        22,
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={22} />);
+    });
+
+    it('discards render phase updates if something suspends', async () => {
+      const thenable = {then() {}};
+      function Foo({signal}) {
+        return (
+          <Suspense fallback="Loading...">
+            <Bar signal={signal} />
+          </Suspense>
+        );
+      }
+
+      function Bar({signal: newSignal}) {
+        const [counter, setCounter] = useState(0);
+        const [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.log('Suspend!');
+            throw thenable;
+          }
+        }
+
+        return <Text text={counter} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<Foo signal={true} />);
+
+      await waitForAll([0]);
+      expect(root).toMatchRenderedOutput(<span prop={0} />);
+
+      React.startTransition(() => {
+        root.render(<Foo signal={false} />);
+      });
+      await waitForAll(['Suspend!']);
+      expect(root).toMatchRenderedOutput(<span prop={0} />);
+
+      // Rendering again should suspend again.
+      React.startTransition(() => {
+        root.render(<Foo signal={false} />);
+      });
+      await waitForAll(['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}) {
+        const [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.log('Suspend!');
+          throw thenable;
+        }
+
+        const [signal, setSignal] = useState(true);
+
+        // Increment a counter every time the signal changes
+        if (signal !== newSignal) {
+          setCounter(c => c + 1);
+          setSignal(newSignal);
+        }
+
+        const [label, _setLabel] = useState('A');
+        setLabel = _setLabel;
+
+        return <Text text={`${label}:${counter}`} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<Foo signal={true} />);
+
+      await waitForAll(['A:0']);
+      expect(root).toMatchRenderedOutput(<span prop="A:0" />);
+
+      await act(async () => {
+        React.startTransition(() => {
+          root.render(<Foo signal={false} />);
+          setLabel('B');
+        });
+
+        await waitForAll(['Suspend!']);
+        expect(root).toMatchRenderedOutput(<span prop="A:0" />);
+
+        // Rendering again should suspend again.
+        React.startTransition(() => {
+          root.render(<Foo signal={false} />);
+        });
+        await waitForAll(['Suspend!']);
+
+        // Flip the signal back to "cancel" the update. However, the update to
+        // label should still proceed. It shouldn't have been dropped.
+        React.startTransition(() => {
+          root.render(<Foo signal={true} />);
+        });
+        await waitForAll(['B:0']);
+        expect(root).toMatchRenderedOutput(<span prop="B:0" />);
+      });
+    });
+
+    it('regression: render phase updates cause lower pri work to be dropped', async () => {
+      let setRow;
+      function ScrollView() {
+        const [row, _setRow] = useState(10);
+        setRow = _setRow;
+
+        const [scrollDirection, setScrollDirection] = useState('Up');
+        const [prevRow, setPrevRow] = useState(null);
+
+        if (prevRow !== row) {
+          setScrollDirection(prevRow !== null && row > prevRow ? 'Down' : 'Up');
+          setPrevRow(row);
+        }
+
+        return <Text text={scrollDirection} />;
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await act(() => {
+        root.render(<ScrollView row={10} />);
+      });
+      assertLog(['Up']);
+      expect(root).toMatchRenderedOutput(<span prop="Up" />);
+
+      await act(() => {
+        ReactNoop.discreteUpdates(() => {
+          setRow(5);
+        });
+        React.startTransition(() => {
+          setRow(20);
+        });
+      });
+      assertLog(['Up', 'Down']);
+      expect(root).toMatchRenderedOutput(<span prop="Down" />);
+    });
+
+    // TODO: This should probably warn
+    it('calling startTransition inside render phase', async () => {
+      function App() {
+        const [counter, setCounter] = useState(0);
+
+        if (counter === 0) {
+          React.startTransition(() => {
+            setCounter(c => c + 1);
+          });
+        }
+
+        return <Text text={counter} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      root.render(<App />);
+      await waitForAll([1]);
+      expect(root).toMatchRenderedOutput(<span prop={1} />);
+    });
+  });
+
+  describe('useReducer', () => {
+    it('simple mount and update', async () => {
+      const INCREMENT = 'INCREMENT';
+      const DECREMENT = 'DECREMENT';
+
+      function reducer(state, action) {
+        switch (action) {
+          case 'INCREMENT':
+            return state + 1;
+          case 'DECREMENT':
+            return state - 1;
+          default:
+            return state;
+        }
+      }
+
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer, 0);
+        useImperativeHandle(ref, () => ({dispatch}));
+        return <Text text={'Count: ' + count} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      await act(() => counter.current.dispatch(INCREMENT));
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      await act(() => {
+        counter.current.dispatch(DECREMENT);
+        counter.current.dispatch(DECREMENT);
+        counter.current.dispatch(DECREMENT);
+      });
+
+      assertLog(['Count: -2']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: -2" />);
+    });
+
+    it('lazy init', async () => {
+      const INCREMENT = 'INCREMENT';
+      const DECREMENT = 'DECREMENT';
+
+      function reducer(state, action) {
+        switch (action) {
+          case 'INCREMENT':
+            return state + 1;
+          case 'DECREMENT':
+            return state - 1;
+          default:
+            return state;
+        }
+      }
+
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer, props, p => {
+          Scheduler.log('Init');
+          return p.initialCount;
+        });
+        useImperativeHandle(ref, () => ({dispatch}));
+        return <Text text={'Count: ' + count} />;
+      }
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter initialCount={10} ref={counter} />);
+      await waitForAll(['Init', 'Count: 10']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 10" />);
+
+      await act(() => counter.current.dispatch(INCREMENT));
+      assertLog(['Count: 11']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 11" />);
+
+      await act(() => {
+        counter.current.dispatch(DECREMENT);
+        counter.current.dispatch(DECREMENT);
+        counter.current.dispatch(DECREMENT);
+      });
+
+      assertLog(['Count: 8']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 8" />);
+    });
+
+    // Regression test for https://github.com/facebook/react/issues/14360
+    it('handles dispatches with mixed priorities', async () => {
+      const INCREMENT = 'INCREMENT';
+
+      function reducer(state, action) {
+        return action === INCREMENT ? state + 1 : state;
+      }
+
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer, 0);
+        useImperativeHandle(ref, () => ({dispatch}));
+        return <Text text={'Count: ' + count} />;
+      }
+
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      ReactNoop.batchedUpdates(() => {
+        counter.current.dispatch(INCREMENT);
+        counter.current.dispatch(INCREMENT);
+        counter.current.dispatch(INCREMENT);
+      });
+
+      ReactNoop.flushSync(() => {
+        counter.current.dispatch(INCREMENT);
+      });
+      assertLog(['Count: 4']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 4" />);
+    });
+  });
+
+  describe('useEffect', () => {
+    it('simple mount and update', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Passive effect [${props.count}]`);
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        // Effects are deferred until after the commit
+        await waitForAll(['Passive effect [0]']);
+      });
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+        // Effects are deferred until after the commit
+        await waitForAll(['Passive effect [1]']);
+      });
+    });
+
+    it('flushes passive effects even with sibling deletions', async () => {
+      function LayoutEffect(props) {
+        useLayoutEffect(() => {
+          Scheduler.log(`Layout effect`);
+        });
+        return <Text text="Layout" />;
+      }
+      function PassiveEffect(props) {
+        useEffect(() => {
+          Scheduler.log(`Passive effect`);
+        }, []);
+        return <Text text="Passive" />;
+      }
+      const passive = <PassiveEffect key="p" />;
+      await act(async () => {
+        ReactNoop.render([<LayoutEffect key="l" />, passive]);
+        await waitFor(['Layout', 'Passive', 'Layout effect']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Layout" />
+            <span prop="Passive" />
+          </>,
+        );
+        // Destroying the first child shouldn't prevent the passive effect from
+        // being executed
+        ReactNoop.render([passive]);
+        await waitForAll(['Passive effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Passive" />);
+      });
+      // exiting act calls flushPassiveEffects(), but there are none left to flush.
+      assertLog([]);
+    });
+
+    it('flushes passive effects even if siblings schedule an update', async () => {
+      function PassiveEffect(props) {
+        useEffect(() => {
+          Scheduler.log('Passive effect');
+        });
+        return <Text text="Passive" />;
+      }
+      function LayoutEffect(props) {
+        const [count, setCount] = useState(0);
+        useLayoutEffect(() => {
+          // Scheduling work shouldn't interfere with the queued passive effect
+          if (count === 0) {
+            setCount(1);
+          }
+          Scheduler.log('Layout effect ' + count);
+        });
+        return <Text text="Layout" />;
+      }
+
+      ReactNoop.render([<PassiveEffect key="p" />, <LayoutEffect key="l" />]);
+
+      await act(async () => {
+        await waitForAll([
+          'Passive',
+          'Layout',
+          'Layout effect 0',
+          'Passive effect',
+          'Layout',
+          'Layout effect 1',
+        ]);
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Passive" />
+          <span prop="Layout" />
+        </>,
+      );
+    });
+
+    it('flushes passive effects even if siblings schedule a new root', async () => {
+      function PassiveEffect(props) {
+        useEffect(() => {
+          Scheduler.log('Passive effect');
+        }, []);
+        return <Text text="Passive" />;
+      }
+      function LayoutEffect(props) {
+        useLayoutEffect(() => {
+          Scheduler.log('Layout effect');
+          // Scheduling work shouldn't interfere with the queued passive effect
+          ReactNoop.renderToRootWithID(<Text text="New Root" />, 'root2');
+        });
+        return <Text text="Layout" />;
+      }
+      await act(async () => {
+        ReactNoop.render([<PassiveEffect key="p" />, <LayoutEffect key="l" />]);
+        await waitForAll([
+          'Passive',
+          'Layout',
+          'Layout effect',
+          'Passive effect',
+          'New Root',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Passive" />
+            <span prop="Layout" />
+          </>,
+        );
+      });
+    });
+
+    it(
+      'flushes effects serially by flushing old effects before flushing ' +
+        "new ones, if they haven't already fired",
+      async () => {
+        function getCommittedText() {
+          const children = ReactNoop.getChildrenAsJSX();
+          if (children === null) {
+            return null;
+          }
+          return children.props.prop;
+        }
+
+        function Counter(props) {
+          useEffect(() => {
+            Scheduler.log(
+              `Committed state when effect was fired: ${getCommittedText()}`,
+            );
+          });
+          return <Text text={props.count} />;
+        }
+        await act(async () => {
+          ReactNoop.render(<Counter count={0} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor([0, 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+          // Before the effects have a chance to flush, schedule another update
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor([
+            // The previous effect flushes before the reconciliation
+            'Committed state when effect was fired: 0',
+            1,
+            'Sync effect',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+        });
+
+        assertLog(['Committed state when effect was fired: 1']);
+      },
+    );
+
+    it('defers passive effect destroy functions during unmount', async () => {
+      function Child({bar, foo}) {
+        React.useEffect(() => {
+          Scheduler.log('passive bar create');
+          return () => {
+            Scheduler.log('passive bar destroy');
+          };
+        }, [bar]);
+        React.useLayoutEffect(() => {
+          Scheduler.log('layout bar create');
+          return () => {
+            Scheduler.log('layout bar destroy');
+          };
+        }, [bar]);
+        React.useEffect(() => {
+          Scheduler.log('passive foo create');
+          return () => {
+            Scheduler.log('passive foo destroy');
+          };
+        }, [foo]);
+        React.useLayoutEffect(() => {
+          Scheduler.log('layout foo create');
+          return () => {
+            Scheduler.log('layout foo destroy');
+          };
+        }, [foo]);
+        Scheduler.log('render');
+        return null;
+      }
+
+      await act(async () => {
+        ReactNoop.render(<Child bar={1} foo={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor([
+          'render',
+          'layout bar create',
+          'layout foo create',
+          'Sync effect',
+        ]);
+        // Effects are deferred until after the commit
+        await waitForAll(['passive bar create', 'passive foo create']);
+      });
+
+      // This update exists to test an internal implementation detail:
+      // Effects without updating dependencies lose their layout/passive tag during an update.
+      await act(async () => {
+        ReactNoop.render(<Child bar={1} foo={2} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor([
+          'render',
+          'layout foo destroy',
+          'layout foo create',
+          'Sync effect',
+        ]);
+        // Effects are deferred until after the commit
+        await waitForAll(['passive foo destroy', 'passive foo create']);
+      });
+
+      // Unmount the component and verify that passive destroy functions are deferred until post-commit.
+      await act(async () => {
+        ReactNoop.render(null, () => Scheduler.log('Sync effect'));
+        await waitFor([
+          'layout bar destroy',
+          'layout foo destroy',
+          'Sync effect',
+        ]);
+        // Effects are deferred until after the commit
+        await waitForAll(['passive bar destroy', 'passive foo destroy']);
+      });
+    });
+
+    it('does not warn about state updates for unmounted components with pending passive unmounts', async () => {
+      let completePendingRequest = null;
+      function Component() {
+        Scheduler.log('Component');
+        const [didLoad, setDidLoad] = React.useState(false);
+        React.useLayoutEffect(() => {
+          Scheduler.log('layout create');
+          return () => {
+            Scheduler.log('layout destroy');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('passive create');
+          // Mimic an XHR request with a complete handler that updates state.
+          completePendingRequest = () => setDidLoad(true);
+          return () => {
+            Scheduler.log('passive destroy');
+          };
+        }, []);
+        return didLoad;
+      }
+
+      await act(async () => {
+        ReactNoop.renderToRootWithID(<Component />, 'root', () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Component', 'layout create', 'Sync effect']);
+        ReactNoop.flushPassiveEffects();
+        assertLog(['passive create']);
+
+        // Unmount but don't process pending passive destroy function
+        ReactNoop.unmountRootWithID('root');
+        await waitFor(['layout destroy']);
+
+        // Simulate an XHR completing, which will cause a state update-
+        // but should not log a warning.
+        completePendingRequest();
+
+        ReactNoop.flushPassiveEffects();
+        assertLog(['passive destroy']);
+      });
+    });
+
+    it('does not warn about state updates for unmounted components with pending passive unmounts for alternates', async () => {
+      let setParentState = null;
+      const setChildStates = [];
+
+      function Parent() {
+        const [state, setState] = useState(true);
+        setParentState = setState;
+        Scheduler.log(`Parent ${state} render`);
+        useLayoutEffect(() => {
+          Scheduler.log(`Parent ${state} commit`);
+        });
+        if (state) {
+          return (
+            <>
+              <Child label="one" />
+              <Child label="two" />
+            </>
+          );
+        } else {
+          return null;
+        }
+      }
+
+      function Child({label}) {
+        const [state, setState] = useState(0);
+        useLayoutEffect(() => {
+          Scheduler.log(`Child ${label} commit`);
+        });
+        useEffect(() => {
+          setChildStates.push(setState);
+          Scheduler.log(`Child ${label} passive create`);
+          return () => {
+            Scheduler.log(`Child ${label} passive destroy`);
+          };
+        }, []);
+        Scheduler.log(`Child ${label} render`);
+        return state;
+      }
+
+      // Schedule debounced state update for child (prob a no-op for this test)
+      // later tick: schedule unmount for parent
+      // start process unmount (but don't flush passive effectS)
+      // State update on child
+      await act(async () => {
+        ReactNoop.render(<Parent />);
+        await waitFor([
+          'Parent true render',
+          'Child one render',
+          'Child two render',
+          'Child one commit',
+          'Child two commit',
+          'Parent true commit',
+          'Child one passive create',
+          'Child two passive create',
+        ]);
+
+        // Update children.
+        setChildStates.forEach(setChildState => setChildState(1));
+        await waitFor([
+          'Child one render',
+          'Child two render',
+          'Child one commit',
+          'Child two commit',
+        ]);
+
+        // Schedule another update for children, and partially process it.
+        React.startTransition(() => {
+          setChildStates.forEach(setChildState => setChildState(2));
+        });
+        await waitFor(['Child one render']);
+
+        // Schedule unmount for the parent that unmounts children with pending update.
+        ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
+          setParentState(false);
+        });
+        await waitForPaint(['Parent false render', 'Parent false commit']);
+
+        // Schedule updates for children too (which should be ignored)
+        setChildStates.forEach(setChildState => setChildState(2));
+        await waitForAll([
+          'Child one passive destroy',
+          'Child two passive destroy',
+        ]);
+      });
+    });
+
+    it('does not warn about state updates for unmounted components with no pending passive unmounts', async () => {
+      let completePendingRequest = null;
+      function Component() {
+        Scheduler.log('Component');
+        const [didLoad, setDidLoad] = React.useState(false);
+        React.useLayoutEffect(() => {
+          Scheduler.log('layout create');
+          // Mimic an XHR request with a complete handler that updates state.
+          completePendingRequest = () => setDidLoad(true);
+          return () => {
+            Scheduler.log('layout destroy');
+          };
+        }, []);
+        return didLoad;
+      }
+
+      await act(async () => {
+        ReactNoop.renderToRootWithID(<Component />, 'root', () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Component', 'layout create', 'Sync effect']);
+
+        // Unmount but don't process pending passive destroy function
+        ReactNoop.unmountRootWithID('root');
+        await waitFor(['layout destroy']);
+
+        // Simulate an XHR completing.
+        completePendingRequest();
+      });
+    });
+
+    it('does not warn if there are pending passive unmount effects but not for the current fiber', async () => {
+      let completePendingRequest = null;
+      function ComponentWithXHR() {
+        Scheduler.log('Component');
+        const [didLoad, setDidLoad] = React.useState(false);
+        React.useLayoutEffect(() => {
+          Scheduler.log('a:layout create');
+          return () => {
+            Scheduler.log('a:layout destroy');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('a:passive create');
+          // Mimic an XHR request with a complete handler that updates state.
+          completePendingRequest = () => setDidLoad(true);
+        }, []);
+        return didLoad;
+      }
+
+      function ComponentWithPendingPassiveUnmount() {
+        React.useEffect(() => {
+          Scheduler.log('b:passive create');
+          return () => {
+            Scheduler.log('b:passive destroy');
+          };
+        }, []);
+        return null;
+      }
+
+      await act(async () => {
+        ReactNoop.renderToRootWithID(
+          <>
+            <ComponentWithXHR />
+            <ComponentWithPendingPassiveUnmount />
+          </>,
+          'root',
+          () => Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Component', 'a:layout create', 'Sync effect']);
+        ReactNoop.flushPassiveEffects();
+        assertLog(['a:passive create', 'b:passive create']);
+
+        // Unmount but don't process pending passive destroy function
+        ReactNoop.unmountRootWithID('root');
+        await waitFor(['a:layout destroy']);
+
+        // Simulate an XHR completing in the component without a pending passive effect..
+        completePendingRequest();
+      });
+    });
+
+    it('does not warn if there are updates after pending passive unmount effects have been flushed', async () => {
+      let updaterFunction;
+
+      function Component() {
+        Scheduler.log('Component');
+        const [state, setState] = React.useState(false);
+        updaterFunction = setState;
+        React.useEffect(() => {
+          Scheduler.log('passive create');
+          return () => {
+            Scheduler.log('passive destroy');
+          };
+        }, []);
+        return state;
+      }
+
+      await act(() => {
+        ReactNoop.renderToRootWithID(<Component />, 'root', () =>
+          Scheduler.log('Sync effect'),
+        );
+      });
+      assertLog(['Component', 'Sync effect', 'passive create']);
+
+      ReactNoop.unmountRootWithID('root');
+      await waitForAll(['passive destroy']);
+
+      await act(() => {
+        updaterFunction(true);
+      });
+    });
+
+    it('does not show a warning when a component updates its own state from within passive unmount function', async () => {
+      function Component() {
+        Scheduler.log('Component');
+        const [didLoad, setDidLoad] = React.useState(false);
+        React.useEffect(() => {
+          Scheduler.log('passive create');
+          return () => {
+            setDidLoad(true);
+            Scheduler.log('passive destroy');
+          };
+        }, []);
+        return didLoad;
+      }
+
+      await act(async () => {
+        ReactNoop.renderToRootWithID(<Component />, 'root', () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Component', 'Sync effect', 'passive create']);
+
+        // Unmount but don't process pending passive destroy function
+        ReactNoop.unmountRootWithID('root');
+        await waitForAll(['passive destroy']);
+      });
+    });
+
+    it('does not show a warning when a component updates a child state from within passive unmount function', async () => {
+      function Parent() {
+        Scheduler.log('Parent');
+        const updaterRef = useRef(null);
+        React.useEffect(() => {
+          Scheduler.log('Parent passive create');
+          return () => {
+            updaterRef.current(true);
+            Scheduler.log('Parent passive destroy');
+          };
+        }, []);
+        return <Child updaterRef={updaterRef} />;
+      }
+
+      function Child({updaterRef}) {
+        Scheduler.log('Child');
+        const [state, setState] = React.useState(false);
+        React.useEffect(() => {
+          Scheduler.log('Child passive create');
+          updaterRef.current = setState;
+        }, []);
+        return state;
+      }
+
+      await act(async () => {
+        ReactNoop.renderToRootWithID(<Parent />, 'root');
+        await waitFor([
+          'Parent',
+          'Child',
+          'Child passive create',
+          'Parent passive create',
+        ]);
+
+        // Unmount but don't process pending passive destroy function
+        ReactNoop.unmountRootWithID('root');
+        await waitForAll(['Parent passive destroy']);
+      });
+    });
+
+    it('does not show a warning when a component updates a parents state from within passive unmount function', async () => {
+      function Parent() {
+        const [state, setState] = React.useState(false);
+        Scheduler.log('Parent');
+        return <Child setState={setState} state={state} />;
+      }
+
+      function Child({setState, state}) {
+        Scheduler.log('Child');
+        React.useEffect(() => {
+          Scheduler.log('Child passive create');
+          return () => {
+            Scheduler.log('Child passive destroy');
+            setState(true);
+          };
+        }, []);
+        return state;
+      }
+
+      await act(async () => {
+        ReactNoop.renderToRootWithID(<Parent />, 'root');
+        await waitFor(['Parent', 'Child', 'Child passive create']);
+
+        // Unmount but don't process pending passive destroy function
+        ReactNoop.unmountRootWithID('root');
+        await waitForAll(['Child passive destroy']);
+      });
+    });
+
+    it('updates have async priority', async () => {
+      function Counter(props) {
+        const [count, updateCount] = useState('(empty)');
+        useEffect(() => {
+          Scheduler.log(`Schedule update [${props.count}]`);
+          updateCount(props.count);
+        }, [props.count]);
+        return <Text text={'Count: ' + count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: (empty)', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: (empty)" />);
+        ReactNoop.flushPassiveEffects();
+        assertLog(['Schedule update [0]']);
+        await waitForAll(['Count: 0']);
+      });
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        ReactNoop.flushPassiveEffects();
+        assertLog(['Schedule update [1]']);
+        await waitForAll(['Count: 1']);
+      });
+    });
+
+    it('updates have async priority even if effects are flushed early', async () => {
+      function Counter(props) {
+        const [count, updateCount] = useState('(empty)');
+        useEffect(() => {
+          Scheduler.log(`Schedule update [${props.count}]`);
+          updateCount(props.count);
+        }, [props.count]);
+        return <Text text={'Count: ' + count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: (empty)', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: (empty)" />);
+
+        // Rendering again should flush the previous commit's effects
+        React.startTransition(() => {
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+        });
+
+        await waitFor(['Schedule update [0]', 'Count: 0']);
+
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        await waitFor([
+          'Count: 0',
+          'Sync effect',
+          'Schedule update [1]',
+          'Count: 1',
+        ]);
+
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+    });
+
+    it('does not flush non-discrete passive effects when flushing sync', async () => {
+      let _updateCount;
+      function Counter(props) {
+        const [count, updateCount] = useState(0);
+        _updateCount = updateCount;
+        useEffect(() => {
+          Scheduler.log(`Will set count to 1`);
+          updateCount(1);
+        }, []);
+        return <Text text={'Count: ' + count} />;
+      }
+
+      ReactNoop.render(<Counter count={0} />, () =>
+        Scheduler.log('Sync effect'),
+      );
+      await waitFor(['Count: 0', 'Sync effect']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      // A flush sync doesn't cause the passive effects to fire.
+      // So we haven't added the other update yet.
+      await act(() => {
+        ReactNoop.flushSync(() => {
+          _updateCount(2);
+        });
+      });
+
+      // As a result we, somewhat surprisingly, commit them in the opposite order.
+      // This should be fine because any non-discrete set of work doesn't guarantee order
+      // and easily could've happened slightly later too.
+      assertLog(['Will set count to 1', 'Count: 1']);
+
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+    });
+
+    // @gate !disableLegacyMode
+    it(
+      'in legacy mode, useEffect is deferred and updates finish synchronously ' +
+        '(in a single batch)',
+      async () => {
+        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]);
+          return <Text text={'Count: ' + count} />;
+        }
+        await act(() => {
+          ReactNoop.flushSync(() => {
+            ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
+          });
+
+          // Even in legacy mode, effects are deferred until after paint
+          assertLog(['Count: (empty)']);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <span prop="Count: (empty)" />,
+          );
+        });
+
+        // effects get forced on exiting act()
+        // There were multiple updates, but there should only be a
+        // single render
+        assertLog(['Count: 0']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      },
+    );
+
+    it('flushSync is not allowed', async () => {
+      function Counter(props) {
+        const [count, updateCount] = useState('(empty)');
+        useEffect(() => {
+          Scheduler.log(`Schedule update [${props.count}]`);
+          ReactNoop.flushSync(() => {
+            updateCount(props.count);
+          });
+          assertLog([`Schedule update [${props.count}]`]);
+          assertConsoleErrorDev([
+            'flushSync was called from inside a lifecycle method. ' +
+              'React cannot flush when React is already rendering. ' +
+              'Consider moving this call to a scheduler task or micro task.\n' +
+              '    in Counter (at **)',
+          ]);
+          // This shouldn't flush synchronously.
+          expect(ReactNoop).not.toMatchRenderedOutput(
+            <span prop={`Count: ${props.count}`} />,
+          );
+        }, [props.count]);
+        return <Text text={'Count: ' + count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: (empty)', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: (empty)" />);
+      });
+
+      assertLog([`Count: 0`]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+    });
+
+    it('unmounts previous effect', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Did create [${props.count}]`);
+          return () => {
+            Scheduler.log(`Did destroy [${props.count}]`);
+          };
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      });
+
+      assertLog(['Did create [0]']);
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+
+      assertLog(['Did destroy [0]', 'Did create [1]']);
+    });
+
+    it('unmounts on deletion', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Did create [${props.count}]`);
+          return () => {
+            Scheduler.log(`Did destroy [${props.count}]`);
+          };
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      });
+
+      assertLog(['Did create [0]']);
+
+      ReactNoop.render(null);
+      await waitForAll(['Did destroy [0]']);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    it('unmounts on deletion after skipped effect', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Did create [${props.count}]`);
+          return () => {
+            Scheduler.log(`Did destroy [${props.count}]`);
+          };
+        }, []);
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      });
+
+      assertLog(['Did create [0]']);
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+
+      assertLog([]);
+
+      ReactNoop.render(null);
+      await waitForAll(['Did destroy [0]']);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    it('always fires effects if no dependencies are provided', async () => {
+      function effect() {
+        Scheduler.log(`Did create`);
+        return () => {
+          Scheduler.log(`Did destroy`);
+        };
+      }
+      function Counter(props) {
+        useEffect(effect);
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      });
+
+      assertLog(['Did create']);
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+
+      assertLog(['Did destroy', 'Did create']);
+
+      ReactNoop.render(null);
+      await waitForAll(['Did destroy']);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    it('skips effect if inputs have not changed', async () => {
+      function Counter(props) {
+        const text = `${props.label}: ${props.count}`;
+        useEffect(() => {
+          Scheduler.log(`Did create [${text}]`);
+          return () => {
+            Scheduler.log(`Did destroy [${text}]`);
+          };
+        }, [props.label, props.count]);
+        return <Text text={text} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter label="Count" count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+      });
+
+      assertLog(['Did create [Count: 0]']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      await act(async () => {
+        ReactNoop.render(<Counter label="Count" count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        // Count changed
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+
+      assertLog(['Did destroy [Count: 0]', 'Did create [Count: 1]']);
+
+      await act(async () => {
+        ReactNoop.render(<Counter label="Count" count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        // Nothing changed, so no effect should have fired
+        await waitFor(['Count: 1', 'Sync effect']);
+      });
+
+      assertLog([]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+
+      await act(async () => {
+        ReactNoop.render(<Counter label="Total" count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        // Label changed
+        await waitFor(['Total: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Total: 1" />);
+      });
+
+      assertLog(['Did destroy [Count: 1]', 'Did create [Total: 1]']);
+    });
+
+    it('multiple effects', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Did commit 1 [${props.count}]`);
+        });
+        useEffect(() => {
+          Scheduler.log(`Did commit 2 [${props.count}]`);
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      });
+
+      assertLog(['Did commit 1 [0]', 'Did commit 2 [0]']);
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+      assertLog(['Did commit 1 [1]', 'Did commit 2 [1]']);
+    });
+
+    it('unmounts all previous effects before creating any new ones', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Mount A [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount A [${props.count}]`);
+          };
+        });
+        useEffect(() => {
+          Scheduler.log(`Mount B [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount B [${props.count}]`);
+          };
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      });
+
+      assertLog(['Mount A [0]', 'Mount B [0]']);
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+      assertLog([
+        'Unmount A [0]',
+        'Unmount B [0]',
+        'Mount A [1]',
+        'Mount B [1]',
+      ]);
+    });
+
+    it('unmounts all previous effects between siblings before creating any new ones', async () => {
+      function Counter({count, label}) {
+        useEffect(() => {
+          Scheduler.log(`Mount ${label} [${count}]`);
+          return () => {
+            Scheduler.log(`Unmount ${label} [${count}]`);
+          };
+        });
+        return <Text text={`${label} ${count}`} />;
+      }
+      await act(async () => {
+        ReactNoop.render(
+          <>
+            <Counter label="A" count={0} />
+            <Counter label="B" count={0} />
+          </>,
+          () => Scheduler.log('Sync effect'),
+        );
+        await waitFor(['A 0', 'B 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A 0" />
+            <span prop="B 0" />
+          </>,
+        );
+      });
+
+      assertLog(['Mount A [0]', 'Mount B [0]']);
+
+      await act(async () => {
+        ReactNoop.render(
+          <>
+            <Counter label="A" count={1} />
+            <Counter label="B" count={1} />
+          </>,
+          () => Scheduler.log('Sync effect'),
+        );
+        await waitFor(['A 1', 'B 1', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A 1" />
+            <span prop="B 1" />
+          </>,
+        );
+      });
+      assertLog([
+        'Unmount A [0]',
+        'Unmount B [0]',
+        'Mount A [1]',
+        'Mount B [1]',
+      ]);
+
+      await act(async () => {
+        ReactNoop.render(
+          <>
+            <Counter label="B" count={2} />
+            <Counter label="C" count={0} />
+          </>,
+          () => Scheduler.log('Sync effect'),
+        );
+        await waitFor(['B 2', 'C 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="B 2" />
+            <span prop="C 0" />
+          </>,
+        );
+      });
+      assertLog([
+        'Unmount A [1]',
+        'Unmount B [1]',
+        'Mount B [2]',
+        'Mount C [0]',
+      ]);
+    });
+
+    it('handles errors in create on mount', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Mount A [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount A [${props.count}]`);
+          };
+        });
+        useEffect(() => {
+          Scheduler.log('Oops!');
+          throw new Error('Oops!');
+          // eslint-disable-next-line no-unreachable
+          Scheduler.log(`Mount B [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount B [${props.count}]`);
+          };
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await expect(async () => {
+        await act(async () => {
+          ReactNoop.render(<Counter count={0} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor(['Count: 0', 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        });
+      }).rejects.toThrow('Oops');
+
+      assertLog([
+        'Mount A [0]',
+        'Oops!',
+        // Clean up effect A. There's no effect B to clean-up, because it
+        // never mounted.
+        'Unmount A [0]',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    it('handles errors in create on update', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Mount A [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount A [${props.count}]`);
+          };
+        });
+        useEffect(() => {
+          if (props.count === 1) {
+            Scheduler.log('Oops!');
+            throw new Error('Oops error!');
+          }
+          Scheduler.log(`Mount B [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount B [${props.count}]`);
+          };
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        ReactNoop.flushPassiveEffects();
+        assertLog(['Mount A [0]', 'Mount B [0]']);
+      });
+
+      await expect(async () => {
+        await act(async () => {
+          // This update will trigger an error
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor(['Count: 1', 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+          ReactNoop.flushPassiveEffects();
+          assertLog([
+            'Unmount A [0]',
+            'Unmount B [0]',
+            'Mount A [1]',
+            'Oops!',
+            // Clean up effect A runs passively on unmount.
+            // There's no effect B to clean-up, because it never mounted.
+            'Unmount A [1]',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput(null);
+        });
+      }).rejects.toThrow('Oops error!');
+    });
+
+    it('handles errors in destroy on update', async () => {
+      function Counter(props) {
+        useEffect(() => {
+          Scheduler.log(`Mount A [${props.count}]`);
+          return () => {
+            Scheduler.log('Oops!');
+            if (props.count === 0) {
+              throw new Error('Oops error!');
+            }
+          };
+        });
+        useEffect(() => {
+          Scheduler.log(`Mount B [${props.count}]`);
+          return () => {
+            Scheduler.log(`Unmount B [${props.count}]`);
+          };
+        });
+        return <Text text={'Count: ' + props.count} />;
+      }
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Count: 0', 'Sync effect']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        ReactNoop.flushPassiveEffects();
+        assertLog(['Mount A [0]', 'Mount B [0]']);
+      });
+
+      await expect(async () => {
+        await act(async () => {
+          // This update will trigger an error during passive effect unmount
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor(['Count: 1', 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+          ReactNoop.flushPassiveEffects();
+
+          // This branch enables a feature flag that flushes all passive destroys in a
+          // separate pass before flushing any passive creates.
+          // A result of this two-pass flush is that an error thrown from unmount does
+          // not block the subsequent create functions from being run.
+          assertLog([
+            'Oops!',
+            'Unmount B [0]',
+            'Mount A [1]',
+            'Mount B [1]',
+            // <Counter> gets unmounted because an error is thrown above.
+            // The remaining destroy functions are run later on unmount, since they're passive.
+            // In this case, one of them throws again (because of how the test is written).
+            'Oops!',
+            'Unmount B [1]',
+          ]);
+        });
+      }).rejects.toThrow('Oops error!');
+
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    it('works with memo', async () => {
+      function Counter({count}) {
+        useLayoutEffect(() => {
+          Scheduler.log('Mount: ' + count);
+          return () => Scheduler.log('Unmount: ' + count);
+        });
+        return <Text text={'Count: ' + count} />;
+      }
+      Counter = memo(Counter);
+
+      ReactNoop.render(<Counter count={0} />, () =>
+        Scheduler.log('Sync effect'),
+      );
+      await waitFor(['Count: 0', 'Mount: 0', 'Sync effect']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+      ReactNoop.render(<Counter count={1} />, () =>
+        Scheduler.log('Sync effect'),
+      );
+      await waitFor(['Count: 1', 'Unmount: 0', 'Mount: 1', 'Sync effect']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+
+      ReactNoop.render(null);
+      await waitFor(['Unmount: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    describe('errors thrown in passive destroy function within unmounted trees', () => {
+      let BrokenUseEffectCleanup;
+      let ErrorBoundary;
+      let LogOnlyErrorBoundary;
+
+      beforeEach(() => {
+        BrokenUseEffectCleanup = function () {
+          useEffect(() => {
+            Scheduler.log('BrokenUseEffectCleanup useEffect');
+            return () => {
+              Scheduler.log('BrokenUseEffectCleanup useEffect destroy');
+              throw new Error('Expected error');
+            };
+          }, []);
+
+          return 'inner child';
+        };
+
+        ErrorBoundary = class extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            Scheduler.log(`ErrorBoundary static getDerivedStateFromError`);
+            return {error};
+          }
+          componentDidCatch(error, info) {
+            Scheduler.log(`ErrorBoundary componentDidCatch`);
+          }
+          render() {
+            if (this.state.error) {
+              Scheduler.log('ErrorBoundary render error');
+              return <span prop="ErrorBoundary fallback" />;
+            }
+            Scheduler.log('ErrorBoundary render success');
+            return this.props.children || null;
+          }
+        };
+
+        LogOnlyErrorBoundary = class extends React.Component {
+          componentDidCatch(error, info) {
+            Scheduler.log(`LogOnlyErrorBoundary componentDidCatch`);
+          }
+          render() {
+            Scheduler.log(`LogOnlyErrorBoundary render`);
+            return this.props.children || null;
+          }
+        };
+      });
+
+      it('should use the nearest still-mounted boundary if there are no unmounted boundaries', async () => {
+        await act(() => {
+          ReactNoop.render(
+            <LogOnlyErrorBoundary>
+              <BrokenUseEffectCleanup />
+            </LogOnlyErrorBoundary>,
+          );
+        });
+
+        assertLog([
+          'LogOnlyErrorBoundary render',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        await act(() => {
+          ReactNoop.render(<LogOnlyErrorBoundary />);
+        });
+
+        assertLog([
+          'LogOnlyErrorBoundary render',
+          'BrokenUseEffectCleanup useEffect destroy',
+          'LogOnlyErrorBoundary componentDidCatch',
+        ]);
+      });
+
+      it('should skip unmounted boundaries and use the nearest still-mounted boundary', async () => {
+        function Conditional({showChildren}) {
+          if (showChildren) {
+            return (
+              <ErrorBoundary>
+                <BrokenUseEffectCleanup />
+              </ErrorBoundary>
+            );
+          } else {
+            return null;
+          }
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <LogOnlyErrorBoundary>
+              <Conditional showChildren={true} />
+            </LogOnlyErrorBoundary>,
+          );
+        });
+
+        assertLog([
+          'LogOnlyErrorBoundary render',
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        await act(() => {
+          ReactNoop.render(
+            <LogOnlyErrorBoundary>
+              <Conditional showChildren={false} />
+            </LogOnlyErrorBoundary>,
+          );
+        });
+
+        assertLog([
+          'LogOnlyErrorBoundary render',
+          'BrokenUseEffectCleanup useEffect destroy',
+          'LogOnlyErrorBoundary componentDidCatch',
+        ]);
+      });
+
+      it('should call getDerivedStateFromError in the nearest still-mounted boundary', async () => {
+        function Conditional({showChildren}) {
+          if (showChildren) {
+            return <BrokenUseEffectCleanup />;
+          } else {
+            return null;
+          }
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary>
+              <Conditional showChildren={true} />
+            </ErrorBoundary>,
+          );
+        });
+
+        assertLog([
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary>
+              <Conditional showChildren={false} />
+            </ErrorBoundary>,
+          );
+        });
+
+        assertLog([
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect destroy',
+          'ErrorBoundary static getDerivedStateFromError',
+          'ErrorBoundary render error',
+          'ErrorBoundary componentDidCatch',
+        ]);
+
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="ErrorBoundary fallback" />,
+        );
+      });
+
+      it('should rethrow error if there are no still-mounted boundaries', async () => {
+        function Conditional({showChildren}) {
+          if (showChildren) {
+            return (
+              <ErrorBoundary>
+                <BrokenUseEffectCleanup />
+              </ErrorBoundary>
+            );
+          } else {
+            return null;
+          }
+        }
+
+        await act(() => {
+          ReactNoop.render(<Conditional showChildren={true} />);
+        });
+
+        assertLog([
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        await act(async () => {
+          ReactNoop.render(<Conditional showChildren={false} />);
+          await waitForThrow('Expected error');
+        });
+
+        assertLog(['BrokenUseEffectCleanup useEffect destroy']);
+
+        expect(ReactNoop).toMatchRenderedOutput(null);
+      });
+    });
+
+    it('calls passive effect destroy functions for memoized components', async () => {
+      const Wrapper = ({children}) => children;
+      function Child() {
+        React.useEffect(() => {
+          Scheduler.log('passive create');
+          return () => {
+            Scheduler.log('passive destroy');
+          };
+        }, []);
+        React.useLayoutEffect(() => {
+          Scheduler.log('layout create');
+          return () => {
+            Scheduler.log('layout destroy');
+          };
+        }, []);
+        Scheduler.log('render');
+        return null;
+      }
+
+      const isEqual = (prevProps, nextProps) =>
+        prevProps.prop === nextProps.prop;
+      const MemoizedChild = React.memo(Child, isEqual);
+
+      await act(() => {
+        ReactNoop.render(
+          <Wrapper>
+            <MemoizedChild key={1} />
+          </Wrapper>,
+        );
+      });
+      assertLog(['render', 'layout create', 'passive create']);
+
+      // Include at least one no-op (memoized) update to trigger original bug.
+      await act(() => {
+        ReactNoop.render(
+          <Wrapper>
+            <MemoizedChild key={1} />
+          </Wrapper>,
+        );
+      });
+      assertLog([]);
+
+      await act(() => {
+        ReactNoop.render(
+          <Wrapper>
+            <MemoizedChild key={2} />
+          </Wrapper>,
+        );
+      });
+      assertLog([
+        'render',
+        'layout destroy',
+        'layout create',
+        'passive destroy',
+        'passive create',
+      ]);
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog(['layout destroy', 'passive destroy']);
+    });
+
+    it('calls passive effect destroy functions for descendants of memoized components', async () => {
+      const Wrapper = ({children}) => children;
+      function Child() {
+        return <Grandchild />;
+      }
+
+      function Grandchild() {
+        React.useEffect(() => {
+          Scheduler.log('passive create');
+          return () => {
+            Scheduler.log('passive destroy');
+          };
+        }, []);
+        React.useLayoutEffect(() => {
+          Scheduler.log('layout create');
+          return () => {
+            Scheduler.log('layout destroy');
+          };
+        }, []);
+        Scheduler.log('render');
+        return null;
+      }
+
+      const isEqual = (prevProps, nextProps) =>
+        prevProps.prop === nextProps.prop;
+      const MemoizedChild = React.memo(Child, isEqual);
+
+      await act(() => {
+        ReactNoop.render(
+          <Wrapper>
+            <MemoizedChild key={1} />
+          </Wrapper>,
+        );
+      });
+      assertLog(['render', 'layout create', 'passive create']);
+
+      // Include at least one no-op (memoized) update to trigger original bug.
+      await act(() => {
+        ReactNoop.render(
+          <Wrapper>
+            <MemoizedChild key={1} />
+          </Wrapper>,
+        );
+      });
+      assertLog([]);
+
+      await act(() => {
+        ReactNoop.render(
+          <Wrapper>
+            <MemoizedChild key={2} />
+          </Wrapper>,
+        );
+      });
+      assertLog([
+        'render',
+        'layout destroy',
+        'layout create',
+        'passive destroy',
+        'passive create',
+      ]);
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog(['layout destroy', 'passive destroy']);
+    });
+
+    it('assumes passive effect destroy function is either a function or undefined', async () => {
+      function App(props) {
+        useEffect(() => {
+          return props.return;
+        });
+        return null;
+      }
+
+      const root1 = ReactNoop.createRoot();
+      await act(() => {
+        root1.render(<App return={17} />);
+      });
+      assertConsoleErrorDev([
+        'useEffect must not return anything besides a function, ' +
+          'which is used for clean-up. You returned: 17\n' +
+          '    in App (at **)',
+      ]);
+
+      const root2 = ReactNoop.createRoot();
+      await act(() => {
+        root2.render(<App return={null} />);
+      });
+      assertConsoleErrorDev([
+        'useEffect 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).\n' +
+          '    in App (at **)',
+      ]);
+
+      const root3 = ReactNoop.createRoot();
+      await act(() => {
+        root3.render(<App return={Promise.resolve()} />);
+      });
+      assertConsoleErrorDev([
+        'useEffect 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. ' +
+          'Instead, write the async function inside your effect and call it immediately:\n' +
+          '\n' +
+          'useEffect(() => {\n' +
+          '  async function fetchData() {\n' +
+          '    // You can await here\n' +
+          '    const response = await MyAPI.getData(someId);\n' +
+          '    // ...\n' +
+          '  }\n' +
+          '  fetchData();\n' +
+          "}, [someId]); // Or [] if effect doesn't need props or state\n" +
+          '\n' +
+          'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching\n' +
+          '    in App (at **)',
+      ]);
+
+      // Error on unmount because React assumes the value is a function
+      await act(async () => {
+        root3.render(null);
+        await waitForThrow('is not a function');
+      });
+    });
+  });
+
+  describe('useInsertionEffect', () => {
+    it('fires insertion effects after snapshots on update', async () => {
+      function CounterA(props) {
+        useInsertionEffect(() => {
+          Scheduler.log(`Create insertion`);
+          return () => {
+            Scheduler.log(`Destroy insertion`);
+          };
+        });
+        return null;
+      }
+
+      class CounterB extends React.Component {
+        getSnapshotBeforeUpdate(prevProps, prevState) {
+          Scheduler.log(`Get Snapshot`);
+          return null;
+        }
+
+        componentDidUpdate() {}
+
+        render() {
+          return null;
+        }
+      }
+
+      await act(async () => {
+        ReactNoop.render(
+          <>
+            <CounterA />
+            <CounterB />
+          </>,
+        );
+
+        await waitForAll(['Create insertion']);
+      });
+
+      // Update
+      await act(async () => {
+        ReactNoop.render(
+          <>
+            <CounterA />
+            <CounterB />
+          </>,
+        );
+
+        await waitForAll([
+          'Get Snapshot',
+          'Destroy insertion',
+          'Create insertion',
+        ]);
+      });
+
+      // Unmount everything
+      await act(async () => {
+        ReactNoop.render(null);
+
+        await waitForAll(['Destroy insertion']);
+      });
+    });
+
+    it('fires insertion effects before layout effects', async () => {
+      let committedText = '(empty)';
+
+      function Counter(props) {
+        useInsertionEffect(() => {
+          Scheduler.log(`Create insertion [current: ${committedText}]`);
+          committedText = String(props.count);
+          return () => {
+            Scheduler.log(`Destroy insertion [current: ${committedText}]`);
+          };
+        });
+        useLayoutEffect(() => {
+          Scheduler.log(`Create layout [current: ${committedText}]`);
+          return () => {
+            Scheduler.log(`Destroy layout [current: ${committedText}]`);
+          };
+        });
+        useEffect(() => {
+          Scheduler.log(`Create passive [current: ${committedText}]`);
+          return () => {
+            Scheduler.log(`Destroy passive [current: ${committedText}]`);
+          };
+        });
+        return null;
+      }
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />);
+
+        await waitForPaint([
+          'Create insertion [current: (empty)]',
+          'Create layout [current: 0]',
+        ]);
+        expect(committedText).toEqual('0');
+      });
+
+      assertLog(['Create passive [current: 0]']);
+
+      // Unmount everything
+      await act(async () => {
+        ReactNoop.render(null);
+
+        await waitForPaint([
+          'Destroy insertion [current: 0]',
+          'Destroy layout [current: 0]',
+        ]);
+      });
+
+      assertLog(['Destroy passive [current: 0]']);
+    });
+
+    it('force flushes passive effects before firing new insertion effects', async () => {
+      let committedText = '(empty)';
+
+      function Counter(props) {
+        useInsertionEffect(() => {
+          Scheduler.log(`Create insertion [current: ${committedText}]`);
+          committedText = String(props.count);
+          return () => {
+            Scheduler.log(`Destroy insertion [current: ${committedText}]`);
+          };
+        });
+        useLayoutEffect(() => {
+          Scheduler.log(`Create layout [current: ${committedText}]`);
+          committedText = String(props.count);
+          return () => {
+            Scheduler.log(`Destroy layout [current: ${committedText}]`);
+          };
+        });
+        useEffect(() => {
+          Scheduler.log(`Create passive [current: ${committedText}]`);
+          return () => {
+            Scheduler.log(`Destroy passive [current: ${committedText}]`);
+          };
+        });
+        return null;
+      }
+
+      await act(async () => {
+        React.startTransition(() => {
+          ReactNoop.render(<Counter count={0} />);
+        });
+        await waitForPaint([
+          'Create insertion [current: (empty)]',
+          'Create layout [current: 0]',
+        ]);
+        expect(committedText).toEqual('0');
+
+        React.startTransition(() => {
+          ReactNoop.render(<Counter count={1} />);
+        });
+        if (gate(flags => flags.enableYieldingBeforePassive)) {
+          await waitForPaint(['Create passive [current: 0]']);
+          await waitForPaint([
+            'Destroy insertion [current: 0]',
+            'Create insertion [current: 0]',
+            'Destroy layout [current: 1]',
+            'Create layout [current: 1]',
+          ]);
+        } else {
+          await waitForPaint([
+            'Create passive [current: 0]',
+            'Destroy insertion [current: 0]',
+            'Create insertion [current: 0]',
+            'Destroy layout [current: 1]',
+            'Create layout [current: 1]',
+          ]);
+        }
+        expect(committedText).toEqual('1');
+      });
+      assertLog([
+        'Destroy passive [current: 1]',
+        'Create passive [current: 1]',
+      ]);
+    });
+
+    it('fires all insertion effects (interleaved) before firing any layout effects', async () => {
+      let committedA = '(empty)';
+      let committedB = '(empty)';
+
+      function CounterA(props) {
+        useInsertionEffect(() => {
+          Scheduler.log(
+            `Create Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedA = String(props.count);
+          return () => {
+            Scheduler.log(
+              `Destroy Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        useInsertionEffect(() => {
+          Scheduler.log(
+            `Create Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedA = String(props.count);
+          return () => {
+            Scheduler.log(
+              `Destroy Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.log(
+            `Create Layout 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.log(
+              `Destroy Layout 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.log(
+            `Create Layout 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.log(
+              `Destroy Layout 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        return null;
+      }
+
+      function CounterB(props) {
+        useInsertionEffect(() => {
+          Scheduler.log(
+            `Create Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedB = String(props.count);
+          return () => {
+            Scheduler.log(
+              `Destroy Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        useInsertionEffect(() => {
+          Scheduler.log(
+            `Create Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedB = String(props.count);
+          return () => {
+            Scheduler.log(
+              `Destroy Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.log(
+            `Create Layout 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.log(
+              `Destroy Layout 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.log(
+            `Create Layout 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.log(
+              `Destroy Layout 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        return null;
+      }
+
+      await act(async () => {
+        ReactNoop.render(
+          <React.Fragment>
+            <CounterA count={0} />
+            <CounterB count={0} />
+          </React.Fragment>,
+        );
+        await waitForAll([
+          // All insertion effects fire before all layout effects
+          'Create Insertion 1 for Component A [A: (empty), B: (empty)]',
+          'Create Insertion 2 for Component A [A: 0, B: (empty)]',
+          'Create Insertion 1 for Component B [A: 0, B: (empty)]',
+          'Create Insertion 2 for Component B [A: 0, B: 0]',
+          'Create Layout 1 for Component A [A: 0, B: 0]',
+          'Create Layout 2 for Component A [A: 0, B: 0]',
+          'Create Layout 1 for Component B [A: 0, B: 0]',
+          'Create Layout 2 for Component B [A: 0, B: 0]',
+        ]);
+        expect([committedA, committedB]).toEqual(['0', '0']);
+      });
+
+      await act(async () => {
+        ReactNoop.render(
+          <React.Fragment>
+            <CounterA count={1} />
+            <CounterB count={1} />
+          </React.Fragment>,
+        );
+        await waitForAll([
+          'Destroy Insertion 1 for Component A [A: 0, B: 0]',
+          'Destroy Insertion 2 for Component A [A: 0, B: 0]',
+          'Create Insertion 1 for Component A [A: 0, B: 0]',
+          'Create Insertion 2 for Component A [A: 1, B: 0]',
+          'Destroy Layout 1 for Component A [A: 1, B: 0]',
+          'Destroy Layout 2 for Component A [A: 1, B: 0]',
+          'Destroy Insertion 1 for Component B [A: 1, B: 0]',
+          'Destroy Insertion 2 for Component B [A: 1, B: 0]',
+          'Create Insertion 1 for Component B [A: 1, B: 0]',
+          'Create Insertion 2 for Component B [A: 1, B: 1]',
+          'Destroy Layout 1 for Component B [A: 1, B: 1]',
+          'Destroy Layout 2 for Component B [A: 1, B: 1]',
+          'Create Layout 1 for Component A [A: 1, B: 1]',
+          'Create Layout 2 for Component A [A: 1, B: 1]',
+          'Create Layout 1 for Component B [A: 1, B: 1]',
+          'Create Layout 2 for Component B [A: 1, B: 1]',
+        ]);
+        expect([committedA, committedB]).toEqual(['1', '1']);
+
+        // Unmount everything
+        await act(async () => {
+          ReactNoop.render(null);
+
+          await waitForAll([
+            'Destroy Insertion 1 for Component A [A: 1, B: 1]',
+            'Destroy Insertion 2 for Component A [A: 1, B: 1]',
+            'Destroy Layout 1 for Component A [A: 1, B: 1]',
+            'Destroy Layout 2 for Component A [A: 1, B: 1]',
+            'Destroy Insertion 1 for Component B [A: 1, B: 1]',
+            'Destroy Insertion 2 for Component B [A: 1, B: 1]',
+            'Destroy Layout 1 for Component B [A: 1, B: 1]',
+            'Destroy Layout 2 for Component B [A: 1, B: 1]',
+          ]);
+        });
+      });
+    });
+
+    it('assumes insertion effect destroy function is either a function or undefined', async () => {
+      function App(props) {
+        useInsertionEffect(() => {
+          return props.return;
+        });
+        return null;
+      }
+
+      const root1 = ReactNoop.createRoot();
+      await act(() => {
+        root1.render(<App return={17} />);
+      });
+      assertConsoleErrorDev([
+        'useInsertionEffect must not return anything besides a function, ' +
+          'which is used for clean-up. You returned: 17\n' +
+          '    in App (at **)',
+      ]);
+
+      const root2 = ReactNoop.createRoot();
+      await act(() => {
+        root2.render(<App return={null} />);
+      });
+      assertConsoleErrorDev([
+        'useInsertionEffect 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).\n' +
+          '    in App (at **)',
+      ]);
+
+      const root3 = ReactNoop.createRoot();
+      await act(() => {
+        root3.render(<App return={Promise.resolve()} />);
+      });
+      assertConsoleErrorDev([
+        'useInsertionEffect must not return anything besides a ' +
+          'function, which is used for clean-up.\n' +
+          '\n' +
+          'It looks like you wrote useInsertionEffect(async () => ...) or returned a Promise. ' +
+          'Instead, write the async function inside your effect and call it immediately:\n' +
+          '\n' +
+          'useInsertionEffect(() => {\n' +
+          '  async function fetchData() {\n' +
+          '    // You can await here\n' +
+          '    const response = await MyAPI.getData(someId);\n' +
+          '    // ...\n' +
+          '  }\n' +
+          '  fetchData();\n' +
+          "}, [someId]); // Or [] if effect doesn't need props or state\n" +
+          '\n' +
+          'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching\n' +
+          '    in App (at **)',
+      ]);
+
+      // Error on unmount because React assumes the value is a function
+      await act(async () => {
+        root3.render(null);
+        await waitForThrow('is not a function');
+      });
+    });
+
+    it('warns when setState is called from insertion effect setup', async () => {
+      function App(props) {
+        const [, setX] = useState(0);
+        useInsertionEffect(() => {
+          setX(1);
+          if (props.throw) {
+            throw Error('No');
+          }
+        }, [props.throw]);
+        return null;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      assertConsoleErrorDev([
+        'useInsertionEffect must not schedule updates.\n' +
+          '    in App (at **)',
+      ]);
+
+      await act(async () => {
+        root.render(<App throw={true} />);
+        await waitForThrow('No');
+      });
+
+      // Should not warn for regular effects after throw.
+      function NotInsertion() {
+        const [, setX] = useState(0);
+        useEffect(() => {
+          setX(1);
+        }, []);
+        return null;
+      }
+      await act(() => {
+        root.render(<NotInsertion />);
+      });
+    });
+
+    it('warns when setState is called from insertion effect cleanup', async () => {
+      function App(props) {
+        const [, setX] = useState(0);
+        useInsertionEffect(() => {
+          if (props.throw) {
+            throw Error('No');
+          }
+          return () => {
+            setX(1);
+          };
+        }, [props.throw, props.foo]);
+        return null;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App foo="hello" />);
+      });
+      await act(() => {
+        root.render(<App foo="goodbye" />);
+      });
+      assertConsoleErrorDev([
+        'useInsertionEffect must not schedule updates.\n' +
+          '    in App (at **)',
+      ]);
+
+      await act(async () => {
+        root.render(<App throw={true} />);
+        await waitForThrow('No');
+      });
+
+      // Should not warn for regular effects after throw.
+      function NotInsertion() {
+        const [, setX] = useState(0);
+        useEffect(() => {
+          setX(1);
+        }, []);
+        return null;
+      }
+      await act(() => {
+        root.render(<NotInsertion />);
+      });
+    });
+
+    // @gate enableActivity
+    it('warns when setState is called from offscreen deleted insertion effect cleanup', async () => {
+      function App(props) {
+        const [, setX] = useState(0);
+        useInsertionEffect(() => {
+          if (props.throw) {
+            throw Error('No');
+          }
+          return () => {
+            setX(1);
+          };
+        }, [props.throw, props.foo]);
+        return null;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(
+          <Activity mode="hidden">
+            <App foo="hello" />
+          </Activity>,
+        );
+      });
+
+      await act(() => {
+        root.render(<Activity mode="hidden" />);
+      });
+      assertConsoleErrorDev(
+        gate('enableHiddenSubtreeInsertionEffectCleanup')
+          ? [
+              'useInsertionEffect must not schedule updates.\n' +
+                '    in App (at **)',
+            ]
+          : [],
+      );
+
+      // Should not warn for regular effects after throw.
+      function NotInsertion() {
+        const [, setX] = useState(0);
+        useEffect(() => {
+          setX(1);
+        }, []);
+        return null;
+      }
+      await act(() => {
+        root.render(<NotInsertion />);
+      });
+    });
+  });
+
+  describe('useLayoutEffect', () => {
+    it('fires layout effects after the host has been mutated', async () => {
+      function getCommittedText() {
+        const yields = Scheduler.unstable_clearLog();
+        const children = ReactNoop.getChildrenAsJSX();
+        Scheduler.log(yields);
+        if (children === null) {
+          return null;
+        }
+        return children.props.prop;
+      }
+
+      function Counter(props) {
+        useLayoutEffect(() => {
+          Scheduler.log(`Current: ${getCommittedText()}`);
+        });
+        return <Text text={props.count} />;
+      }
+
+      ReactNoop.render(<Counter count={0} />, () =>
+        Scheduler.log('Sync effect'),
+      );
+      await waitFor([[0], 'Current: 0', 'Sync effect']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+      ReactNoop.render(<Counter count={1} />, () =>
+        Scheduler.log('Sync effect'),
+      );
+      await waitFor([[1], 'Current: 1', 'Sync effect']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+    });
+
+    it('force flushes passive effects before firing new layout effects', async () => {
+      let committedText = '(empty)';
+
+      function Counter(props) {
+        useLayoutEffect(() => {
+          // Normally this would go in a mutation effect, but this test
+          // intentionally omits a mutation effect.
+          committedText = String(props.count);
+
+          Scheduler.log(`Mount layout [current: ${committedText}]`);
+          return () => {
+            Scheduler.log(`Unmount layout [current: ${committedText}]`);
+          };
+        });
+        useEffect(() => {
+          Scheduler.log(`Mount normal [current: ${committedText}]`);
+          return () => {
+            Scheduler.log(`Unmount normal [current: ${committedText}]`);
+          };
+        });
+        return null;
+      }
+
+      await act(async () => {
+        ReactNoop.render(<Counter count={0} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Mount layout [current: 0]', 'Sync effect']);
+        expect(committedText).toEqual('0');
+        ReactNoop.render(<Counter count={1} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor([
+          'Mount normal [current: 0]',
+          'Unmount layout [current: 0]',
+          'Mount layout [current: 1]',
+          'Sync effect',
+        ]);
+        expect(committedText).toEqual('1');
+      });
+
+      assertLog(['Unmount normal [current: 1]', 'Mount normal [current: 1]']);
+    });
+
+    it('catches errors thrown in useLayoutEffect', async () => {
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          Scheduler.log(`ErrorBoundary static getDerivedStateFromError`);
+          return {error};
+        }
+        render() {
+          const {children, id, fallbackID} = this.props;
+          const {error} = this.state;
+          if (error) {
+            Scheduler.log(`${id} render error`);
+            return <Component id={fallbackID} />;
+          }
+          Scheduler.log(`${id} render success`);
+          return children || null;
+        }
+      }
+
+      function Component({id}) {
+        Scheduler.log('Component render ' + id);
+        return <span prop={id} />;
+      }
+
+      function BrokenLayoutEffectDestroy() {
+        useLayoutEffect(() => {
+          return () => {
+            Scheduler.log('BrokenLayoutEffectDestroy useLayoutEffect destroy');
+            throw Error('Expected');
+          };
+        }, []);
+
+        Scheduler.log('BrokenLayoutEffectDestroy render');
+        return <span prop="broken" />;
+      }
+
+      ReactNoop.render(
+        <ErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+          <ErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
+            <BrokenLayoutEffectDestroy />
+          </ErrorBoundary>
+        </ErrorBoundary>,
+      );
+
+      await waitForAll([
+        'OuterBoundary render success',
+        'Component render sibling',
+        'InnerBoundary render success',
+        'BrokenLayoutEffectDestroy render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="sibling" />
+          <span prop="broken" />
+        </>,
+      );
+
+      ReactNoop.render(
+        <ErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+        </ErrorBoundary>,
+      );
+
+      // React should skip over the unmounting boundary and find the nearest still-mounted boundary.
+      await waitForAll([
+        'OuterBoundary render success',
+        'Component render sibling',
+        'BrokenLayoutEffectDestroy useLayoutEffect destroy',
+        'ErrorBoundary static getDerivedStateFromError',
+        'OuterBoundary render error',
+        'Component render OuterFallback',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="OuterFallback" />);
+    });
+
+    it('assumes layout effect destroy function is either a function or undefined', async () => {
+      function App(props) {
+        useLayoutEffect(() => {
+          return props.return;
+        });
+        return null;
+      }
+
+      const root1 = ReactNoop.createRoot();
+      await act(() => {
+        root1.render(<App return={17} />);
+      });
+      assertConsoleErrorDev([
+        'useLayoutEffect must not return anything besides a ' +
+          'function, which is used for clean-up. You returned: 17\n' +
+          '    in App (at **)',
+      ]);
+
+      const root2 = ReactNoop.createRoot();
+      await act(() => {
+        root2.render(<App return={null} />);
+      });
+      assertConsoleErrorDev([
+        'useLayoutEffect 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).\n' +
+          '    in App (at **)',
+      ]);
+
+      const root3 = ReactNoop.createRoot();
+      await act(() => {
+        root3.render(<App return={Promise.resolve()} />);
+      });
+      assertConsoleErrorDev([
+        'useLayoutEffect must not return anything besides a ' +
+          'function, which is used for clean-up.\n\n' +
+          'It looks like you wrote useLayoutEffect(async () => ...) or returned a Promise. ' +
+          'Instead, write the async function inside your effect and call it immediately:\n' +
+          '\n' +
+          'useLayoutEffect(() => {\n' +
+          '  async function fetchData() {\n' +
+          '    // You can await here\n' +
+          '    const response = await MyAPI.getData(someId);\n' +
+          '    // ...\n' +
+          '  }\n' +
+          '  fetchData();\n' +
+          "}, [someId]); // Or [] if effect doesn't need props or state\n" +
+          '\n' +
+          'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching\n' +
+          '    in App (at **)',
+      ]);
+
+      // Error on unmount because React assumes the value is a function
+      await act(async () => {
+        root3.render(null);
+        await waitForThrow('is not a function');
+      });
+    });
+  });
+
+  describe('useCallback', () => {
+    it('memoizes callback by comparing inputs', async () => {
+      class IncrementButton extends React.PureComponent {
+        increment = () => {
+          this.props.increment();
+        };
+        render() {
+          return <Text text="Increment" />;
+        }
+      }
+
+      function Counter({incrementBy}) {
+        const [count, updateCount] = useState(0);
+        const increment = useCallback(
+          () => updateCount(c => c + incrementBy),
+          [incrementBy],
+        );
+        return (
+          <>
+            <IncrementButton increment={increment} ref={button} />
+            <Text text={'Count: ' + count} />
+          </>
+        );
+      }
+
+      const button = React.createRef(null);
+      ReactNoop.render(<Counter incrementBy={1} />);
+      await waitForAll(['Increment', 'Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 0" />
+        </>,
+      );
+
+      await act(() => button.current.increment());
+      assertLog([
+        // Button should not re-render, because its props haven't changed
+        // 'Increment',
+        'Count: 1',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 1" />
+        </>,
+      );
+
+      // Increase the increment amount
+      ReactNoop.render(<Counter incrementBy={10} />);
+      await waitForAll([
+        // Inputs did change this time
+        'Increment',
+        'Count: 1',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 1" />
+        </>,
+      );
+
+      // Callback should have updated
+      await act(() => button.current.increment());
+      assertLog(['Count: 11']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Increment" />
+          <span prop="Count: 11" />
+        </>,
+      );
+    });
+  });
+
+  describe('useMemo', () => {
+    it('memoizes value by comparing to previous inputs', async () => {
+      function CapitalizedText(props) {
+        const text = props.text;
+        const capitalizedText = useMemo(() => {
+          Scheduler.log(`Capitalize '${text}'`);
+          return text.toUpperCase();
+        }, [text]);
+        return <Text text={capitalizedText} />;
+      }
+
+      ReactNoop.render(<CapitalizedText text="hello" />);
+      await waitForAll(["Capitalize 'hello'", 'HELLO']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="HELLO" />);
+
+      ReactNoop.render(<CapitalizedText text="hi" />);
+      await waitForAll(["Capitalize 'hi'", 'HI']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="HI" />);
+
+      ReactNoop.render(<CapitalizedText text="hi" />);
+      await waitForAll(['HI']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="HI" />);
+
+      ReactNoop.render(<CapitalizedText text="goodbye" />);
+      await waitForAll(["Capitalize 'goodbye'", 'GOODBYE']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="GOODBYE" />);
+    });
+
+    it('always re-computes if no inputs are provided', async () => {
+      function LazyCompute(props) {
+        const computed = useMemo(props.compute);
+        return <Text text={computed} />;
+      }
+
+      function computeA() {
+        Scheduler.log('compute A');
+        return 'A';
+      }
+
+      function computeB() {
+        Scheduler.log('compute B');
+        return 'B';
+      }
+
+      ReactNoop.render(<LazyCompute compute={computeA} />);
+      await waitForAll(['compute A', 'A']);
+
+      ReactNoop.render(<LazyCompute compute={computeA} />);
+      await waitForAll(['compute A', 'A']);
+
+      ReactNoop.render(<LazyCompute compute={computeA} />);
+      await waitForAll(['compute A', 'A']);
+
+      ReactNoop.render(<LazyCompute compute={computeB} />);
+      await waitForAll(['compute B', 'B']);
+    });
+
+    it('should not invoke memoized function during re-renders unless inputs change', async () => {
+      function LazyCompute(props) {
+        const computed = useMemo(
+          () => props.compute(props.input),
+          [props.input],
+        );
+        const [count, setCount] = useState(0);
+        if (count < 3) {
+          setCount(count + 1);
+        }
+        return <Text text={computed} />;
+      }
+
+      function compute(val) {
+        Scheduler.log('compute ' + val);
+        return val;
+      }
+
+      ReactNoop.render(<LazyCompute compute={compute} input="A" />);
+      await waitForAll(['compute A', 'A']);
+
+      ReactNoop.render(<LazyCompute compute={compute} input="A" />);
+      await waitForAll(['A']);
+
+      ReactNoop.render(<LazyCompute compute={compute} input="B" />);
+      await waitForAll(['compute B', 'B']);
+    });
+  });
+
+  describe('useImperativeHandle', () => {
+    it('does not update when deps are the same', async () => {
+      const INCREMENT = 'INCREMENT';
+
+      function reducer(state, action) {
+        return action === INCREMENT ? state + 1 : state;
+      }
+
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer, 0);
+        useImperativeHandle(ref, () => ({count, dispatch}), []);
+        return <Text text={'Count: ' + count} />;
+      }
+
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      expect(counter.current.count).toBe(0);
+
+      await act(() => {
+        counter.current.dispatch(INCREMENT);
+      });
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      // Intentionally not updated because of [] deps:
+      expect(counter.current.count).toBe(0);
+    });
+
+    // Regression test for https://github.com/facebook/react/issues/14782
+    it('automatically updates when deps are not specified', async () => {
+      const INCREMENT = 'INCREMENT';
+
+      function reducer(state, action) {
+        return action === INCREMENT ? state + 1 : state;
+      }
+
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer, 0);
+        useImperativeHandle(ref, () => ({count, dispatch}));
+        return <Text text={'Count: ' + count} />;
+      }
+
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      expect(counter.current.count).toBe(0);
+
+      await act(() => {
+        counter.current.dispatch(INCREMENT);
+      });
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      expect(counter.current.count).toBe(1);
+    });
+
+    it('updates when deps are different', async () => {
+      const INCREMENT = 'INCREMENT';
+
+      function reducer(state, action) {
+        return action === INCREMENT ? state + 1 : state;
+      }
+
+      let totalRefUpdates = 0;
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer, 0);
+        useImperativeHandle(ref, () => {
+          totalRefUpdates++;
+          return {count, dispatch};
+        }, [count]);
+        return <Text text={'Count: ' + count} />;
+      }
+
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+      expect(counter.current.count).toBe(0);
+      expect(totalRefUpdates).toBe(1);
+
+      await act(() => {
+        counter.current.dispatch(INCREMENT);
+      });
+      assertLog(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      expect(counter.current.count).toBe(1);
+      expect(totalRefUpdates).toBe(2);
+
+      // Update that doesn't change the ref dependencies
+      ReactNoop.render(<Counter ref={counter} />);
+      await waitForAll(['Count: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      expect(counter.current.count).toBe(1);
+      expect(totalRefUpdates).toBe(2); // Should not increase since last time
+    });
+  });
+
+  describe('useTransition', () => {
+    it('delays showing loading state until after timeout', async () => {
+      let transition;
+      function App() {
+        const [show, setShow] = useState(false);
+        const [isPending, startTransition] = useTransition();
+        transition = () => {
+          startTransition(() => {
+            setShow(true);
+          });
+        };
+        return (
+          <Suspense
+            fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
+            {show ? (
+              <AsyncText text={`After... Pending: ${isPending}`} />
+            ) : (
+              <Text text={`Before... Pending: ${isPending}`} />
+            )}
+          </Suspense>
+        );
+      }
+      ReactNoop.render(<App />);
+      await waitForAll(['Before... Pending: false']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Before... Pending: false" />,
+      );
+
+      await act(async () => {
+        transition();
+
+        await waitForAll([
+          'Before... Pending: true',
+          'Suspend! [After... Pending: false]',
+          'Loading... Pending: false',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Before... Pending: true" />,
+        );
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+
+        // Even after a long amount of time, we still don't show a placeholder.
+        Scheduler.unstable_advanceTime(100000);
+        await advanceTimers(100000);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Before... Pending: true" />,
+        );
+
+        await resolveText('After... Pending: false');
+        assertLog(['Promise resolved [After... Pending: false]']);
+        await waitForAll(['After... Pending: false']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="After... Pending: false" />,
+        );
+      });
+    });
+  });
+
+  describe('useDeferredValue', () => {
+    it('defers text value', async () => {
+      function TextBox({text}) {
+        return <AsyncText text={text} />;
+      }
+
+      let _setText;
+      function App() {
+        const [text, setText] = useState('A');
+        const deferredText = useDeferredValue(text);
+        _setText = setText;
+        return (
+          <>
+            <Text text={text} />
+            <Suspense fallback={<Text text={'Loading'} />}>
+              <TextBox text={deferredText} />
+            </Suspense>
+          </>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+
+      assertLog([
+        'A',
+        'Suspend! [A]',
+        'Loading',
+        // pre-warming
+        'Suspend! [A]',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="Loading" />
+        </>,
+      );
+
+      await act(() => resolveText('A'));
+      assertLog(['Promise resolved [A]', 'A']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="A" />
+        </>,
+      );
+
+      await act(async () => {
+        _setText('B');
+        await waitForAll(['B', 'A', 'B', 'Suspend! [B]', 'Loading']);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="B" />
+            <span prop="A" />
+          </>,
+        );
+      });
+
+      await act(async () => {
+        Scheduler.unstable_advanceTime(250);
+        await advanceTimers(250);
+      });
+      assertLog([]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="A" />
+        </>,
+      );
+
+      // Even after a long amount of time, we don't show a fallback
+      Scheduler.unstable_advanceTime(100000);
+      await advanceTimers(100000);
+      await waitForAll([]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="A" />
+        </>,
+      );
+
+      await act(async () => {
+        await resolveText('B');
+      });
+      assertLog(['Promise resolved [B]', 'B', 'B']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="B" />
+        </>,
+      );
+    });
+  });
+
+  describe('progressive enhancement (not supported)', () => {
+    it('mount additional state', async () => {
+      let updateA;
+      let updateB;
+      // let updateC;
+
+      function App(props) {
+        const [A, _updateA] = useState(0);
+        const [B, _updateB] = useState(0);
+        updateA = _updateA;
+        updateB = _updateB;
+
+        let C;
+        if (props.loadC) {
+          useState(0);
+        } else {
+          C = '[not loaded]';
+        }
+
+        return <Text text={`A: ${A}, B: ${B}, C: ${C}`} />;
+      }
+
+      ReactNoop.render(<App loadC={false} />);
+      await waitForAll(['A: 0, B: 0, C: [not loaded]']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="A: 0, B: 0, C: [not loaded]" />,
+      );
+
+      await act(() => {
+        updateA(2);
+        updateB(3);
+      });
+
+      assertLog(['A: 2, B: 3, C: [not loaded]']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="A: 2, B: 3, C: [not loaded]" />,
+      );
+
+      ReactNoop.render(<App loadC={true} />);
+      await waitForThrow(
+        'Rendered more hooks than during the previous render.',
+      );
+      assertLog([]);
+      assertConsoleErrorDev([
+        '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://react.dev/link/rules-of-hooks\n' +
+          '\n' +
+          '   Previous render            Next render\n' +
+          '   ------------------------------------------------------\n' +
+          '1. useState                   useState\n' +
+          '2. useState                   useState\n' +
+          '3. undefined                  useState\n' +
+          '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+          '\n' +
+          '    in App (at **)',
+      ]);
+
+      // Uncomment if/when we support this again
+      // expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 2, B: 3, C: 0" />]);
+
+      // updateC(4);
+      // expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 4']);
+      // expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 2, B: 3, C: 4" />]);
+    });
+
+    it('unmount state', async () => {
+      let updateA;
+      let updateB;
+      let updateC;
+
+      function App(props) {
+        const [A, _updateA] = useState(0);
+        const [B, _updateB] = useState(0);
+        updateA = _updateA;
+        updateB = _updateB;
+
+        let C;
+        if (props.loadC) {
+          const [_C, _updateC] = useState(0);
+          C = _C;
+          updateC = _updateC;
+        } else {
+          C = '[not loaded]';
+        }
+
+        return <Text text={`A: ${A}, B: ${B}, C: ${C}`} />;
+      }
+
+      ReactNoop.render(<App loadC={true} />);
+      await waitForAll(['A: 0, B: 0, C: 0']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 0, B: 0, C: 0" />);
+      await act(() => {
+        updateA(2);
+        updateB(3);
+        updateC(4);
+      });
+      assertLog(['A: 2, B: 3, C: 4']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A: 2, B: 3, C: 4" />);
+      ReactNoop.render(<App loadC={false} />);
+      await waitForThrow(
+        'Rendered fewer hooks than expected. This may be caused by an ' +
+          'accidental early return statement.',
+      );
+    });
+
+    it('unmount effects', async () => {
+      function App(props) {
+        useEffect(() => {
+          Scheduler.log('Mount A');
+          return () => {
+            Scheduler.log('Unmount A');
+          };
+        }, []);
+
+        if (props.showMore) {
+          useEffect(() => {
+            Scheduler.log('Mount B');
+            return () => {
+              Scheduler.log('Unmount B');
+            };
+          }, []);
+        }
+
+        return null;
+      }
+
+      await act(async () => {
+        ReactNoop.render(<App showMore={false} />, () =>
+          Scheduler.log('Sync effect'),
+        );
+        await waitFor(['Sync effect']);
+      });
+
+      assertLog(['Mount A']);
+
+      await act(async () => {
+        ReactNoop.render(<App showMore={true} />);
+        await waitForThrow(
+          'Rendered more hooks than during the previous render.',
+        );
+        assertLog(['Unmount A']);
+        assertConsoleErrorDev([
+          '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://react.dev/link/rules-of-hooks\n' +
+            '\n' +
+            '   Previous render            Next render\n' +
+            '   ------------------------------------------------------\n' +
+            '1. useEffect                  useEffect\n' +
+            '2. undefined                  useEffect\n' +
+            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
+            '\n' +
+            '    in App (at **)',
+        ]);
+      });
+
+      // Uncomment if/when we support this again
+      // ReactNoop.flushPassiveEffects();
+      // expect(Scheduler).toHaveYielded(['Mount B']);
+
+      // ReactNoop.render(<App showMore={false} />);
+      // expect(Scheduler).toFlushAndThrow(
+      //   'Rendered fewer hooks than expected. This may be caused by an ' +
+      //     'accidental early return statement.',
+      // );
+    });
+  });
+
+  it('useReducer does not eagerly bail out of state updates', async () => {
+    // Edge case based on a bug report
+    let setCounter;
+    function App() {
+      const [counter, _setCounter] = useState(1);
+      setCounter = _setCounter;
+      return <Component count={counter} />;
+    }
+
+    function Component({count}) {
+      const [state, dispatch] = useReducer(() => {
+        // 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.log('Reducer: ' + count);
+        return count;
+      }, -1);
+      useEffect(() => {
+        Scheduler.log('Effect: ' + count);
+        dispatch();
+      }, [count]);
+      Scheduler.log('Render: ' + state);
+      return count;
+    }
+
+    await act(async () => {
+      ReactNoop.render(<App />);
+      await waitForAll(['Render: -1', 'Effect: 1', 'Reducer: 1', 'Render: 1']);
+      expect(ReactNoop).toMatchRenderedOutput('1');
+    });
+
+    await act(() => {
+      setCounter(2);
+    });
+    assertLog(['Render: 1', 'Effect: 2', 'Reducer: 2', 'Render: 2']);
+    expect(ReactNoop).toMatchRenderedOutput('2');
+  });
+
+  it('useReducer does not replay previous no-op actions when other state changes', async () => {
+    let increment;
+    let setDisabled;
+
+    function Counter() {
+      const [disabled, _setDisabled] = useState(true);
+      const [count, dispatch] = useReducer((state, action) => {
+        if (disabled) {
+          return state;
+        }
+        if (action.type === 'increment') {
+          return state + 1;
+        }
+        return state;
+      }, 0);
+
+      increment = () => dispatch({type: 'increment'});
+      setDisabled = _setDisabled;
+
+      Scheduler.log('Render disabled: ' + disabled);
+      Scheduler.log('Render count: ' + count);
+      return count;
+    }
+
+    ReactNoop.render(<Counter />);
+    await waitForAll(['Render disabled: true', 'Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    await act(() => {
+      // These increments should have no effect, since disabled=true
+      increment();
+      increment();
+      increment();
+    });
+    assertLog(['Render disabled: true', 'Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    await act(() => {
+      // Enabling the updater should *not* replay the previous increment() actions
+      setDisabled(false);
+    });
+    assertLog(['Render disabled: false', 'Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+  });
+
+  it('useReducer does not replay previous no-op actions when props change', async () => {
+    let setDisabled;
+    let increment;
+
+    function Counter({disabled}) {
+      const [count, dispatch] = useReducer((state, action) => {
+        if (disabled) {
+          return state;
+        }
+        if (action.type === 'increment') {
+          return state + 1;
+        }
+        return state;
+      }, 0);
+
+      increment = () => dispatch({type: 'increment'});
+
+      Scheduler.log('Render count: ' + count);
+      return count;
+    }
+
+    function App() {
+      const [disabled, _setDisabled] = useState(true);
+      setDisabled = _setDisabled;
+      Scheduler.log('Render disabled: ' + disabled);
+      return <Counter disabled={disabled} />;
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll(['Render disabled: true', 'Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    await act(() => {
+      // These increments should have no effect, since disabled=true
+      increment();
+      increment();
+      increment();
+    });
+    assertLog(['Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    await act(() => {
+      // Enabling the updater should *not* replay the previous increment() actions
+      setDisabled(false);
+    });
+    assertLog(['Render disabled: false', 'Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+  });
+
+  it('useReducer applies potential no-op changes if made relevant by other updates in the batch', async () => {
+    let setDisabled;
+    let increment;
+
+    function Counter({disabled}) {
+      const [count, dispatch] = useReducer((state, action) => {
+        if (disabled) {
+          return state;
+        }
+        if (action.type === 'increment') {
+          return state + 1;
+        }
+        return state;
+      }, 0);
+
+      increment = () => dispatch({type: 'increment'});
+
+      Scheduler.log('Render count: ' + count);
+      return count;
+    }
+
+    function App() {
+      const [disabled, _setDisabled] = useState(true);
+      setDisabled = _setDisabled;
+      Scheduler.log('Render disabled: ' + disabled);
+      return <Counter disabled={disabled} />;
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll(['Render disabled: true', 'Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    await act(() => {
+      // Although the increment happens first (and would seem to do nothing since disabled=true),
+      // because these calls are in a batch the parent updates first. This should cause the child
+      // to re-render with disabled=false and *then* process the increment action, which now
+      // increments the count and causes the component output to change.
+      increment();
+      setDisabled(false);
+    });
+    assertLog(['Render disabled: false', 'Render count: 1']);
+    expect(ReactNoop).toMatchRenderedOutput('1');
+  });
+
+  // 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.log('Render A: ' + counter);
+      useEffect(() => {
+        Scheduler.log('Commit A: ' + counter);
+      });
+      return counter;
+    }
+
+    function CounterB() {
+      const [counter, setCounter] = useState(0);
+      setCounterB = setCounter;
+      Scheduler.log('Render B: ' + counter);
+      useEffect(() => {
+        Scheduler.log('Commit B: ' + counter);
+      });
+      return counter;
+    }
+
+    const root = ReactNoop.createRoot(null);
+    await act(() => {
+      root.render(
+        <>
+          <CounterA />
+          <CounterB />
+        </>,
+      );
+    });
+    assertLog(['Render A: 0', 'Render B: 0', 'Commit A: 0', 'Commit B: 0']);
+
+    await act(() => {
+      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);
+    });
+    assertLog([
+      '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', async () => {
+    // Similar to previous test, except using a preceding render phase update
+    // instead of new props.
+    let dispatch;
+    function App() {
+      const [step, setStep] = useState(0);
+      const [shadow, _dispatch] = useReducer(() => step, step);
+      dispatch = _dispatch;
+
+      if (step < 5) {
+        setStep(step + 1);
+      }
+
+      Scheduler.log(`Step: ${step}, Shadow: ${shadow}`);
+      return shadow;
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll([
+      'Step: 0, Shadow: 0',
+      'Step: 1, Shadow: 0',
+      'Step: 2, Shadow: 0',
+      'Step: 3, Shadow: 0',
+      'Step: 4, Shadow: 0',
+      'Step: 5, Shadow: 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    await act(() => dispatch());
+    assertLog(['Step: 5, Shadow: 5']);
+    expect(ReactNoop).toMatchRenderedOutput('5');
+  });
+
+  it('should process the rest pending updates after a render phase update', async () => {
+    // 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'}`;
+    }
+
+    await act(() => ReactNoop.render(<App />));
+    expect(ReactNoop).toMatchRenderedOutput('abc');
+
+    await act(() => {
+      updateA(true);
+      // This update should not get dropped.
+      updateC(true);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('ABC');
+  });
+
+  it("regression test: don't unmount effects on siblings of deleted nodes", async () => {
+    const root = ReactNoop.createRoot();
+
+    function Child({label}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Mount layout ' + label);
+        return () => {
+          Scheduler.log('Unmount layout ' + label);
+        };
+      }, [label]);
+      useEffect(() => {
+        Scheduler.log('Mount passive ' + label);
+        return () => {
+          Scheduler.log('Unmount passive ' + label);
+        };
+      }, [label]);
+      return label;
+    }
+
+    await act(() => {
+      root.render(
+        <>
+          <Child key="A" label="A" />
+          <Child key="B" label="B" />
+        </>,
+      );
+    });
+    assertLog([
+      'Mount layout A',
+      'Mount layout B',
+      'Mount passive A',
+      'Mount passive B',
+    ]);
+
+    // Delete A. This should only unmount the effect on A. In the regression,
+    // B's effect would also unmount.
+    await act(() => {
+      root.render(
+        <>
+          <Child key="B" label="B" />
+        </>,
+      );
+    });
+    assertLog(['Unmount layout A', 'Unmount passive A']);
+
+    // Now delete and unmount B.
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount layout B', 'Unmount passive B']);
+  });
+
+  it('regression: deleting a tree and unmounting its effects after a reorder', async () => {
+    const root = ReactNoop.createRoot();
+
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return label;
+    }
+
+    await act(() => {
+      root.render(
+        <>
+          <Child key="A" label="A" />
+          <Child key="B" label="B" />
+        </>,
+      );
+    });
+    assertLog(['Mount A', 'Mount B']);
+
+    await act(() => {
+      root.render(
+        <>
+          <Child key="B" label="B" />
+          <Child key="A" label="A" />
+        </>,
+      );
+    });
+    assertLog([]);
+
+    await act(() => {
+      root.render(null);
+    });
+
+    assertLog([
+      'Unmount B',
+      // In the regression, the reorder would cause Child A to "forget" that it
+      // contains passive effects. Then when we deleted the tree, A's unmount
+      // effect would not fire.
+      'Unmount A',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
+    function Row({label}) {
+      useEffect(() => {
+        Scheduler.log('Mount ' + label);
+        return () => {
+          Scheduler.log('Unmount ' + label);
+        };
+      }, [label]);
+      return (
+        <Suspense fallback="Loading...">
+          <AsyncText text={label} />
+        </Suspense>
+      );
+    }
+
+    function App() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Row label="A" />
+          <Row label="B" />
+        </SuspenseList>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Suspend! [A]', 'Suspend! [B]', 'Mount A', 'Mount B']);
+
+    await act(async () => {
+      await resolveText('A');
+    });
+    assertLog(['Promise resolved [A]', 'A', 'Suspend! [B]']);
+
+    await act(() => {
+      root.render(null);
+    });
+    // In the regression, SuspenseList would cause the children to "forget" that
+    // it contains passive effects. Then when we deleted the tree, these unmount
+    // effects would not fire.
+    assertLog(['Unmount A', 'Unmount B']);
+  });
+
+  it('effect dependencies are persisted after a render phase update', async () => {
+    let handleClick;
+    function Test() {
+      const [count, setCount] = useState(0);
+
+      useEffect(() => {
+        Scheduler.log(`Effect: ${count}`);
+      }, [count]);
+
+      if (count > 0) {
+        setCount(0);
+      }
+
+      handleClick = () => setCount(2);
+
+      return <Text text={`Render: ${count}`} />;
+    }
+
+    await act(() => {
+      ReactNoop.render(<Test />);
+    });
+
+    assertLog(['Render: 0', 'Effect: 0']);
+
+    await act(() => {
+      handleClick();
+    });
+
+    assertLog(['Render: 0']);
+
+    await act(() => {
+      handleClick();
+    });
+
+    assertLog(['Render: 0']);
+
+    await act(() => {
+      handleClick();
+    });
+
+    assertLog(['Render: 0']);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
new file mode 100644
index 00000000000..781a8f7579f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -0,0 +1,2892 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let PropTypes;
+
+let assertConsoleErrorDev;
+let waitForAll;
+let waitFor;
+let waitForThrow;
+let assertLog;
+
+describe('ReactIncremental', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    PropTypes = require('prop-types');
+
+    ({
+      assertConsoleErrorDev,
+      waitForAll,
+      waitFor,
+      waitForThrow,
+      assertLog,
+    } = require('internal-test-utils'));
+  });
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('should render a simple component', async () => {
+    function Bar() {
+      return <div>Hello World</div>;
+    }
+
+    function Foo() {
+      return <Bar isBar={true} />;
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+  });
+
+  it('should render a simple component, in steps if needed', async () => {
+    function Bar() {
+      Scheduler.log('Bar');
+      return (
+        <span>
+          <div>Hello World</div>
+        </span>
+      );
+    }
+
+    function Foo() {
+      Scheduler.log('Foo');
+      return [<Bar key="a" isBar={true} />, <Bar key="b" isBar={true} />];
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo />, () => Scheduler.log('callback'));
+    });
+    // Do one step of work.
+    await waitFor(['Foo']);
+
+    // Do the rest of the work.
+    await waitForAll(['Bar', 'Bar', 'callback']);
+  });
+
+  it('updates a previous render', async () => {
+    function Header() {
+      Scheduler.log('Header');
+      return <h1>Hi</h1>;
+    }
+
+    function Content(props) {
+      Scheduler.log('Content');
+      return <div>{props.children}</div>;
+    }
+
+    function Footer() {
+      Scheduler.log('Footer');
+      return <footer>Bye</footer>;
+    }
+
+    const header = <Header />;
+    const footer = <Footer />;
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          {header}
+          <Content>{props.text}</Content>
+          {footer}
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo text="foo" />, () =>
+      Scheduler.log('renderCallbackCalled'),
+    );
+    await waitForAll([
+      'Foo',
+      'Header',
+      'Content',
+      'Footer',
+      'renderCallbackCalled',
+    ]);
+
+    ReactNoop.render(<Foo text="bar" />, () =>
+      Scheduler.log('firstRenderCallbackCalled'),
+    );
+    ReactNoop.render(<Foo text="bar" />, () =>
+      Scheduler.log('secondRenderCallbackCalled'),
+    );
+    // TODO: Test bail out of host components. This is currently unobservable.
+
+    // Since this is an update, it should bail out and reuse the work from
+    // Header and Content.
+    await waitForAll([
+      'Foo',
+      'Content',
+      'firstRenderCallbackCalled',
+      'secondRenderCallbackCalled',
+    ]);
+  });
+
+  it('can cancel partially rendered work and restart', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar>{props.text}</Bar>
+          <Bar>{props.text}</Bar>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" />);
+    await waitForAll(['Foo', 'Bar', 'Bar']);
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo text="bar" />);
+    });
+    // Flush part of the work
+    await waitFor(['Foo', 'Bar']);
+
+    // This will abort the previous work and restart
+    ReactNoop.flushSync(() => ReactNoop.render(null));
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo text="baz" />);
+    });
+
+    // Flush part of the new work
+    await waitFor(['Foo', 'Bar']);
+
+    // Flush the rest of the work which now includes the low priority
+    await waitForAll(['Bar']);
+  });
+
+  it('should call callbacks even if updates are aborted', async () => {
+    let inst;
+
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          text: 'foo',
+          text2: 'foo',
+        };
+        inst = this;
+      }
+      render() {
+        return (
+          <div>
+            <div>{this.state.text}</div>
+            <div>{this.state.text2}</div>
+          </div>
+        );
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+
+    React.startTransition(() => {
+      inst.setState(
+        () => {
+          Scheduler.log('setState1');
+          return {text: 'bar'};
+        },
+        () => Scheduler.log('callback1'),
+      );
+    });
+
+    // Flush part of the work
+    await waitFor(['setState1']);
+
+    // This will abort the previous work and restart
+    ReactNoop.flushSync(() => ReactNoop.render(<Foo />));
+    React.startTransition(() => {
+      inst.setState(
+        () => {
+          Scheduler.log('setState2');
+          return {text2: 'baz'};
+        },
+        () => Scheduler.log('callback2'),
+      );
+    });
+
+    // Flush the rest of the work which now includes the low priority
+    await waitForAll(['setState1', 'setState2', 'callback1', 'callback2']);
+    expect(inst.state).toEqual({text: 'bar', text2: 'baz'});
+  });
+
+  // @gate enableLegacyHidden
+  it('can deprioritize unfinished work and resume it later', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <span>{props.children}</span>;
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar>{props.text}</Bar>
+          <LegacyHiddenDiv mode="hidden">
+            <Middle>{props.text}</Middle>
+          </LegacyHiddenDiv>
+          <Bar>{props.text}</Bar>
+          <LegacyHiddenDiv mode="hidden">
+            <Middle>Footer</Middle>
+          </LegacyHiddenDiv>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" />);
+    await waitForAll(['Foo', 'Bar', 'Bar', 'Middle', 'Middle']);
+
+    // Render part of the work. This should be enough to flush everything except
+    // the middle which has lower priority.
+    ReactNoop.render(<Foo text="bar" />);
+    await waitFor(['Foo', 'Bar', 'Bar']);
+    // Flush only the remaining work
+    await waitForAll(['Middle', 'Middle']);
+  });
+
+  // @gate enableLegacyHidden
+  it('can deprioritize a tree from without dropping work', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <span>{props.children}</span>;
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar>{props.text}</Bar>
+          <LegacyHiddenDiv mode="hidden">
+            <Middle>{props.text}</Middle>
+          </LegacyHiddenDiv>
+          <Bar>{props.text}</Bar>
+          <LegacyHiddenDiv mode="hidden">
+            <Middle>Footer</Middle>
+          </LegacyHiddenDiv>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<Foo text="foo" />);
+    });
+    assertLog(['Foo', 'Bar', 'Bar']);
+    await waitForAll(['Middle', 'Middle']);
+
+    // Render the high priority work (everything except the hidden trees).
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<Foo text="foo" />);
+    });
+    assertLog(['Foo', 'Bar', 'Bar']);
+
+    // The hidden content was deprioritized from high to low priority. A low
+    // priority callback should have been scheduled. Flush it now.
+    await waitForAll(['Middle', 'Middle']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can resume work in a subtree even when a parent bails out', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    function Tester() {
+      // This component is just here to ensure that the bail out is
+      // in fact in effect in the expected place for this test.
+      Scheduler.log('Tester');
+      return <div />;
+    }
+
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <span>{props.children}</span>;
+    }
+
+    const middleContent = (
+      <aaa>
+        <Tester />
+        <bbb hidden={true}>
+          <ccc>
+            <Middle>Hi</Middle>
+          </ccc>
+        </bbb>
+      </aaa>
+    );
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar>{props.text}</Bar>
+          {middleContent}
+          <Bar>{props.text}</Bar>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" />);
+    ReactNoop.flushDeferredPri(52);
+
+    assertLog(['Foo', 'Bar', 'Tester', 'Bar']);
+
+    // We're now rendering an update that will bail out on updating middle.
+    ReactNoop.render(<Foo text="bar" />);
+    ReactNoop.flushDeferredPri(45 + 5);
+
+    assertLog(['Foo', 'Bar', 'Bar']);
+
+    // Flush the rest to make sure that the bailout didn't block this work.
+    await waitForAll(['Middle']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can resume work in a bailed subtree within one pass', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    class Tester extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        // This component is just here to ensure that the bail out is
+        // in fact in effect in the expected place for this test.
+        Scheduler.log('Tester');
+        return <div />;
+      }
+    }
+
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <span>{props.children}</span>;
+    }
+
+    // Should content not just bail out on current, not workInProgress?
+
+    class Content extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return [
+          <Tester key="a" unused={this.props.unused} />,
+          <bbb key="b" hidden={true}>
+            <ccc>
+              <Middle>Hi</Middle>
+            </ccc>
+          </bbb>,
+        ];
+      }
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div hidden={props.text === 'bar'}>
+          <Bar>{props.text}</Bar>
+          <Content unused={props.text} />
+          <Bar>{props.text}</Bar>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" />);
+    ReactNoop.flushDeferredPri(52 + 5);
+
+    assertLog(['Foo', 'Bar', 'Tester', 'Bar']);
+
+    // Make a quick update which will create a low pri tree on top of the
+    // already low pri tree.
+    ReactNoop.render(<Foo text="bar" />);
+    ReactNoop.flushDeferredPri(15);
+
+    assertLog(['Foo']);
+
+    // At this point, middle will bail out but it has not yet fully rendered.
+    // Since that is the same priority as its parent tree. This should render
+    // as a single batch. Therefore, it is correct that Middle should be in the
+    // middle. If it occurs after the two "Bar" components then it was flushed
+    // after them which is not correct.
+    await waitForAll(['Bar', 'Middle', 'Bar']);
+
+    // Let us try this again without fully finishing the first time. This will
+    // create a hanging subtree that is reconciling at the normal priority.
+    ReactNoop.render(<Foo text="foo" />);
+    ReactNoop.flushDeferredPri(40);
+
+    assertLog(['Foo', 'Bar']);
+
+    // This update will create a tree that aborts that work and down-prioritizes
+    // it. If the priority levels aren't down-prioritized correctly this may
+    // abort rendering of the down-prioritized content.
+    ReactNoop.render(<Foo text="bar" />);
+    await waitForAll(['Foo', 'Bar', 'Bar']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can resume mounting a class component', async () => {
+    let foo;
+    class Parent extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return <Foo prop={this.props.prop} />;
+      }
+    }
+
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        // Test based on a www bug where props was null on resume
+        Scheduler.log('Foo constructor: ' + props.prop);
+      }
+      render() {
+        foo = this;
+        Scheduler.log('Foo');
+        return <Bar />;
+      }
+    }
+
+    function Bar() {
+      Scheduler.log('Bar');
+      return <div />;
+    }
+
+    ReactNoop.render(<Parent prop="foo" />);
+    ReactNoop.flushDeferredPri(20);
+    assertLog(['Foo constructor: foo', 'Foo']);
+
+    foo.setState({value: 'bar'});
+
+    await waitForAll(['Foo', 'Bar']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('reuses the same instance when resuming a class instance', async () => {
+    let foo;
+    class Parent extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return <Foo prop={this.props.prop} />;
+      }
+    }
+
+    let constructorCount = 0;
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        // Test based on a www bug where props was null on resume
+        Scheduler.log('constructor: ' + props.prop);
+        constructorCount++;
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('componentWillMount: ' + this.props.prop);
+      }
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('componentWillReceiveProps: ' + this.props.prop);
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount: ' + this.props.prop);
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log('componentWillUpdate: ' + this.props.prop);
+      }
+      componentDidUpdate() {
+        Scheduler.log('componentDidUpdate: ' + this.props.prop);
+      }
+      render() {
+        foo = this;
+        Scheduler.log('render: ' + this.props.prop);
+        return <Bar />;
+      }
+    }
+
+    function Bar() {
+      Scheduler.log('Foo did complete');
+      return <div />;
+    }
+
+    ReactNoop.render(<Parent prop="foo" />);
+    ReactNoop.flushDeferredPri(25);
+    assertLog([
+      'constructor: foo',
+      'componentWillMount: foo',
+      'render: foo',
+      'Foo did complete',
+    ]);
+
+    foo.setState({value: 'bar'});
+
+    await waitForAll([]);
+    expect(constructorCount).toEqual(1);
+    assertLog([
+      'componentWillMount: foo',
+      'render: foo',
+      'Foo did complete',
+      'componentDidMount: foo',
+    ]);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can reuse work done after being preempted', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <span>{props.children}</span>;
+    }
+
+    const middleContent = (
+      <div>
+        <Middle>Hello</Middle>
+        <Bar>-</Bar>
+        <Middle>World</Middle>
+      </div>
+    );
+
+    const step0 = (
+      <div>
+        <Middle>Hi</Middle>
+        <Bar>{'Foo'}</Bar>
+        <Middle>There</Middle>
+      </div>
+    );
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar>{props.text2}</Bar>
+          <div hidden={true}>{props.step === 0 ? step0 : middleContent}</div>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" text2="foo" step={0} />);
+    ReactNoop.flushDeferredPri(55 + 25 + 5 + 5);
+
+    // We only finish the higher priority work. So the low pri content
+    // has not yet finished mounting.
+    assertLog(['Foo', 'Bar', 'Middle', 'Bar']);
+
+    // Interrupt the rendering with a quick update. This should not touch the
+    // middle content.
+    ReactNoop.render(<Foo text="foo" text2="bar" step={0} />);
+    await waitForAll([]);
+
+    // We've now rendered the entire tree but we didn't have to redo the work
+    // done by the first Middle and Bar already.
+    assertLog(['Foo', 'Bar', 'Middle']);
+
+    // Make a quick update which will schedule low priority work to
+    // update the middle content.
+    ReactNoop.render(<Foo text="bar" text2="bar" step={1} />);
+    ReactNoop.flushDeferredPri(30 + 25 + 5);
+
+    assertLog(['Foo', 'Bar']);
+
+    // The middle content is now pending rendering...
+    ReactNoop.flushDeferredPri(30 + 5);
+    assertLog(['Middle', 'Bar']);
+
+    // but we'll interrupt it to render some higher priority work.
+    // The middle content will bailout so it remains untouched.
+    ReactNoop.render(<Foo text="foo" text2="bar" step={1} />);
+    ReactNoop.flushDeferredPri(30);
+
+    assertLog(['Foo', 'Bar']);
+
+    // Since we did nothing to the middle subtree during the interruption,
+    // we should be able to reuse the reconciliation work that we already did
+    // without restarting.
+    await waitForAll(['Middle']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can reuse work that began but did not complete, after being preempted', async () => {
+    let child;
+    let sibling;
+
+    function GreatGrandchild() {
+      Scheduler.log('GreatGrandchild');
+      return <div />;
+    }
+
+    function Grandchild() {
+      Scheduler.log('Grandchild');
+      return <GreatGrandchild />;
+    }
+
+    class Child extends React.Component {
+      state = {step: 0};
+      render() {
+        child = this;
+        Scheduler.log('Child');
+        return <Grandchild />;
+      }
+    }
+
+    class Sibling extends React.Component {
+      render() {
+        Scheduler.log('Sibling');
+        sibling = this;
+        return <div />;
+      }
+    }
+
+    function Parent() {
+      Scheduler.log('Parent');
+      return [
+        // The extra div is necessary because when Parent bails out during the
+        // high priority update, its progressedPriority is set to high.
+        // So its direct children cannot be reused when we resume at
+        // low priority. I think this would be fixed by changing
+        // pendingWorkPriority and progressedPriority to be the priority of
+        // the children only, not including the fiber itself.
+        <div key="a">
+          <Child />
+        </div>,
+        <Sibling key="b" />,
+      ];
+    }
+
+    ReactNoop.render(<Parent />);
+    await waitForAll([]);
+
+    // Begin working on a low priority update to Child, but stop before
+    // GreatGrandchild. Child and Grandchild begin but don't complete.
+    child.setState({step: 1});
+    ReactNoop.flushDeferredPri(30);
+    assertLog(['Child', 'Grandchild']);
+
+    // Interrupt the current low pri work with a high pri update elsewhere in
+    // the tree.
+
+    ReactNoop.flushSync(() => {
+      sibling.setState({});
+    });
+    assertLog(['Sibling']);
+
+    // Continue the low pri work. The work on Child and GrandChild was memoized
+    // so they should not be worked on again.
+
+    await waitForAll([
+      // No Child
+      // No Grandchild
+      'GreatGrandchild',
+    ]);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can reuse work if shouldComponentUpdate is false, after being preempted', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <div>{props.children}</div>;
+    }
+
+    class Middle extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.children !== nextProps.children;
+      }
+      render() {
+        Scheduler.log('Middle');
+        return <span>{this.props.children}</span>;
+      }
+    }
+
+    class Content extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.step !== nextProps.step;
+      }
+      render() {
+        Scheduler.log('Content');
+        return (
+          <div>
+            <Middle>{this.props.step === 0 ? 'Hi' : 'Hello'}</Middle>
+            <Bar>{this.props.step === 0 ? this.props.text : '-'}</Bar>
+            <Middle>{this.props.step === 0 ? 'There' : 'World'}</Middle>
+          </div>
+        );
+      }
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar>{props.text}</Bar>
+          <div hidden={true}>
+            <Content step={props.step} text={props.text} />
+          </div>
+        </div>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" step={0} />);
+    await waitForAll(['Foo', 'Bar', 'Content', 'Middle', 'Bar', 'Middle']);
+
+    // Make a quick update which will schedule low priority work to
+    // update the middle content.
+    ReactNoop.render(<Foo text="bar" step={1} />);
+    ReactNoop.flushDeferredPri(30 + 5);
+
+    assertLog(['Foo', 'Bar']);
+
+    // The middle content is now pending rendering...
+    ReactNoop.flushDeferredPri(30 + 25 + 5);
+    assertLog(['Content', 'Middle', 'Bar']); // One more Middle left.
+
+    // but we'll interrupt it to render some higher priority work.
+    // The middle content will bailout so it remains untouched.
+    ReactNoop.render(<Foo text="foo" step={1} />);
+    ReactNoop.flushDeferredPri(30);
+
+    assertLog(['Foo', 'Bar']);
+
+    // Since we did nothing to the middle subtree during the interruption,
+    // we should be able to reuse the reconciliation work that we already did
+    // without restarting.
+    await waitForAll(['Middle']);
+  });
+
+  it('memoizes work even if shouldComponentUpdate returns false', async () => {
+    class Foo extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        // this.props is the memoized props. So this should return true for
+        // every update except the first one.
+        const shouldUpdate = this.props.step !== 1;
+        Scheduler.log('shouldComponentUpdate: ' + shouldUpdate);
+        return shouldUpdate;
+      }
+      render() {
+        Scheduler.log('render');
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo step={1} />);
+    await waitForAll(['render']);
+
+    ReactNoop.render(<Foo step={2} />);
+    await waitForAll(['shouldComponentUpdate: false']);
+
+    ReactNoop.render(<Foo step={3} />);
+    await waitForAll([
+      // If the memoized props were not updated during last bail out, sCU will
+      // keep returning false.
+      'shouldComponentUpdate: true',
+      'render',
+    ]);
+  });
+
+  it('can update in the middle of a tree using setState', async () => {
+    let instance;
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        this.state = {a: 'a'};
+        instance = this;
+      }
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    function Foo() {
+      return (
+        <div>
+          <Bar />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(instance.state).toEqual({a: 'a'});
+    instance.setState({b: 'b'});
+    await waitForAll([]);
+    expect(instance.state).toEqual({a: 'a', b: 'b'});
+  });
+
+  it('can queue multiple state updates', async () => {
+    let instance;
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        this.state = {a: 'a'};
+        instance = this;
+      }
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    function Foo() {
+      return (
+        <div>
+          <Bar />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    // Call setState multiple times before flushing
+    instance.setState({b: 'b'});
+    instance.setState({c: 'c'});
+    instance.setState({d: 'd'});
+    await waitForAll([]);
+    expect(instance.state).toEqual({a: 'a', b: 'b', c: 'c', d: 'd'});
+  });
+
+  it('can use updater form of setState', async () => {
+    let instance;
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        this.state = {num: 1};
+        instance = this;
+      }
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    function Foo({multiplier}) {
+      return (
+        <div>
+          <Bar multiplier={multiplier} />
+        </div>
+      );
+    }
+
+    function updater(state, props) {
+      return {num: state.num * props.multiplier};
+    }
+
+    ReactNoop.render(<Foo multiplier={2} />);
+    await waitForAll([]);
+    expect(instance.state.num).toEqual(1);
+    instance.setState(updater);
+    await waitForAll([]);
+    expect(instance.state.num).toEqual(2);
+
+    instance.setState(updater);
+    ReactNoop.render(<Foo multiplier={3} />);
+    await waitForAll([]);
+    expect(instance.state.num).toEqual(6);
+  });
+
+  it('can call setState inside update callback', async () => {
+    let instance;
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        this.state = {num: 1};
+        instance = this;
+      }
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    function Foo({multiplier}) {
+      return (
+        <div>
+          <Bar multiplier={multiplier} />
+        </div>
+      );
+    }
+
+    function updater(state, props) {
+      return {num: state.num * props.multiplier};
+    }
+
+    function callback() {
+      this.setState({called: true});
+    }
+
+    ReactNoop.render(<Foo multiplier={2} />);
+    await waitForAll([]);
+    instance.setState(updater);
+    instance.setState(updater, callback);
+    await waitForAll([]);
+    expect(instance.state.num).toEqual(4);
+    expect(instance.state.called).toEqual(true);
+  });
+
+  it('can replaceState', async () => {
+    let instance;
+    class Bar extends React.Component {
+      state = {a: 'a'};
+      render() {
+        instance = this;
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    function Foo() {
+      return (
+        <div>
+          <Bar />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    instance.setState({b: 'b'});
+    instance.setState({c: 'c'});
+    instance.updater.enqueueReplaceState(instance, {d: 'd'});
+    await waitForAll([]);
+    expect(instance.state).toEqual({d: 'd'});
+  });
+
+  it('can forceUpdate', async () => {
+    function Baz() {
+      Scheduler.log('Baz');
+      return <div />;
+    }
+
+    let instance;
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        instance = this;
+      }
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        Scheduler.log('Bar');
+        return <Baz />;
+      }
+    }
+
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <Bar />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['Foo', 'Bar', 'Baz']);
+    instance.forceUpdate();
+    await waitForAll(['Bar', 'Baz']);
+  });
+
+  it('should clear forceUpdate after update is flushed', async () => {
+    let a = 0;
+
+    class Foo extends React.PureComponent {
+      render() {
+        const msg = `A: ${a}, B: ${this.props.b}`;
+        Scheduler.log(msg);
+        return msg;
+      }
+    }
+
+    const foo = React.createRef(null);
+    ReactNoop.render(<Foo ref={foo} b={0} />);
+    await waitForAll(['A: 0, B: 0']);
+
+    a = 1;
+    foo.current.forceUpdate();
+    await waitForAll(['A: 1, B: 0']);
+
+    ReactNoop.render(<Foo ref={foo} b={0} />);
+    await waitForAll([]);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can call sCU while resuming a partly mounted component', () => {
+    const instances = new Set();
+
+    class Bar extends React.Component {
+      state = {y: 'A'};
+      constructor() {
+        super();
+        instances.add(this);
+      }
+      shouldComponentUpdate(newProps, newState) {
+        return this.props.x !== newProps.x || this.state.y !== newState.y;
+      }
+      render() {
+        Scheduler.log('Bar:' + this.props.x);
+        return <span prop={String(this.props.x === this.state.y)} />;
+      }
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return [
+        <Bar key="a" x="A" />,
+        <Bar key="b" x={props.step === 0 ? 'B' : 'B2'} />,
+        <Bar key="c" x="C" />,
+        <Bar key="d" x="D" />,
+      ];
+    }
+
+    ReactNoop.render(<Foo step={0} />);
+    ReactNoop.flushDeferredPri(40);
+    assertLog(['Foo', 'Bar:A', 'Bar:B', 'Bar:C']);
+
+    expect(instances.size).toBe(3);
+
+    ReactNoop.render(<Foo step={1} />);
+    ReactNoop.flushDeferredPri(50);
+    // A was memoized and reused. B was memoized but couldn't be reused because
+    // props differences. C was memoized and reused. D never even started so it
+    // needed a new instance.
+    assertLog(['Foo', 'Bar:B2', 'Bar:D']);
+
+    // We expect each rerender to correspond to a new instance.
+    expect(instances.size).toBe(4);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('gets new props when setting state on a partly updated component', async () => {
+    const instances = [];
+
+    class Bar extends React.Component {
+      state = {y: 'A'};
+      constructor() {
+        super();
+        instances.push(this);
+      }
+      performAction() {
+        this.setState({
+          y: 'B',
+        });
+      }
+      render() {
+        Scheduler.log('Bar:' + this.props.x + '-' + this.props.step);
+        return <span prop={String(this.props.x === this.state.y)} />;
+      }
+    }
+
+    function Baz() {
+      // This component is used as a sibling to Foo so that we can fully
+      // complete Foo, without committing.
+      Scheduler.log('Baz');
+      return <div />;
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return [
+        <Bar key="a" x="A" step={props.step} />,
+        <Bar key="b" x="B" step={props.step} />,
+      ];
+    }
+
+    ReactNoop.render(
+      <div>
+        <Foo step={0} />
+        <Baz />
+        <Baz />
+      </div>,
+    );
+    await waitForAll([]);
+
+    // Flush part way through with new props, fully completing the first Bar.
+    // However, it doesn't commit yet.
+    ReactNoop.render(
+      <div>
+        <Foo step={1} />
+        <Baz />
+        <Baz />
+      </div>,
+    );
+    ReactNoop.flushDeferredPri(45);
+    assertLog(['Foo', 'Bar:A-1', 'Bar:B-1', 'Baz']);
+
+    // Make an update to the same Bar.
+    instances[0].performAction();
+
+    await waitForAll(['Bar:A-1', 'Baz']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('calls componentWillMount twice if the initial render is aborted', async () => {
+    class LifeCycle extends React.Component {
+      state = {x: this.props.x};
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log(
+          'componentWillReceiveProps:' + this.state.x + '-' + nextProps.x,
+        );
+        this.setState({x: nextProps.x});
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log(
+          'componentWillMount:' + this.state.x + '-' + this.props.x,
+        );
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount:' + this.state.x + '-' + this.props.x);
+      }
+      render() {
+        return <span />;
+      }
+    }
+
+    function Trail() {
+      Scheduler.log('Trail');
+      return null;
+    }
+
+    function App(props) {
+      Scheduler.log('App');
+      return (
+        <div>
+          <LifeCycle x={props.x} />
+          <Trail />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<App x={0} />);
+    ReactNoop.flushDeferredPri(30);
+
+    assertLog(['App', 'componentWillMount:0-0']);
+
+    ReactNoop.render(<App x={1} />);
+    await waitForAll([
+      'App',
+      'componentWillReceiveProps:0-1',
+      'componentWillMount:1-1',
+      'Trail',
+      'componentDidMount:1-1',
+    ]);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('uses state set in componentWillMount even if initial render was aborted', async () => {
+    class LifeCycle extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {x: this.props.x + '(ctor)'};
+      }
+      UNSAFE_componentWillMount() {
+        Scheduler.log('componentWillMount:' + this.state.x);
+        this.setState({x: this.props.x + '(willMount)'});
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount:' + this.state.x);
+      }
+      render() {
+        Scheduler.log('render:' + this.state.x);
+        return <span />;
+      }
+    }
+
+    function App(props) {
+      Scheduler.log('App');
+      return <LifeCycle x={props.x} />;
+    }
+
+    ReactNoop.render(<App x={0} />);
+    ReactNoop.flushDeferredPri(20);
+
+    assertLog(['App', 'componentWillMount:0(ctor)', 'render:0(willMount)']);
+
+    ReactNoop.render(<App x={1} />);
+    await waitForAll([
+      'App',
+      'componentWillMount:0(willMount)',
+      'render:1(willMount)',
+      'componentDidMount:1(willMount)',
+    ]);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('calls componentWill* twice if an update render is aborted', async () => {
+    class LifeCycle extends React.Component {
+      UNSAFE_componentWillMount() {
+        Scheduler.log('componentWillMount:' + this.props.x);
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount:' + this.props.x);
+      }
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log(
+          'componentWillReceiveProps:' + this.props.x + '-' + nextProps.x,
+        );
+      }
+      shouldComponentUpdate(nextProps) {
+        Scheduler.log(
+          'shouldComponentUpdate:' + this.props.x + '-' + nextProps.x,
+        );
+        return true;
+      }
+      UNSAFE_componentWillUpdate(nextProps) {
+        Scheduler.log(
+          'componentWillUpdate:' + this.props.x + '-' + nextProps.x,
+        );
+      }
+      componentDidUpdate(prevProps) {
+        Scheduler.log('componentDidUpdate:' + this.props.x + '-' + prevProps.x);
+      }
+      render() {
+        Scheduler.log('render:' + this.props.x);
+        return <span />;
+      }
+    }
+
+    function Sibling() {
+      // The sibling is used to confirm that we've completed the first child,
+      // but not yet flushed.
+      Scheduler.log('Sibling');
+      return <span />;
+    }
+
+    function App(props) {
+      Scheduler.log('App');
+
+      return [<LifeCycle key="a" x={props.x} />, <Sibling key="b" />];
+    }
+
+    ReactNoop.render(<App x={0} />);
+    await waitForAll([
+      'App',
+      'componentWillMount:0',
+      'render:0',
+      'Sibling',
+      'componentDidMount:0',
+    ]);
+
+    ReactNoop.render(<App x={1} />);
+    ReactNoop.flushDeferredPri(30);
+
+    assertLog([
+      'App',
+      'componentWillReceiveProps:0-1',
+      'shouldComponentUpdate:0-1',
+      'componentWillUpdate:0-1',
+      'render:1',
+      'Sibling',
+      // no componentDidUpdate
+    ]);
+
+    ReactNoop.render(<App x={2} />);
+    await waitForAll([
+      'App',
+      'componentWillReceiveProps:1-2',
+      'shouldComponentUpdate:1-2',
+      'componentWillUpdate:1-2',
+      'render:2',
+      'Sibling',
+      // When componentDidUpdate finally gets called, it covers both updates.
+      'componentDidUpdate:2-0',
+    ]);
+  });
+
+  it('calls getDerivedStateFromProps even for state-only updates', async () => {
+    let instance;
+
+    class LifeCycle extends React.Component {
+      state = {};
+      static getDerivedStateFromProps(props, prevState) {
+        Scheduler.log('getDerivedStateFromProps');
+        return {foo: 'foo'};
+      }
+      changeState() {
+        this.setState({foo: 'bar'});
+      }
+      componentDidUpdate() {
+        Scheduler.log('componentDidUpdate');
+      }
+      render() {
+        Scheduler.log('render');
+        instance = this;
+        return null;
+      }
+    }
+
+    ReactNoop.render(<LifeCycle />);
+    await waitForAll(['getDerivedStateFromProps', 'render']);
+    expect(instance.state).toEqual({foo: 'foo'});
+
+    instance.changeState();
+    await waitForAll([
+      'getDerivedStateFromProps',
+      'render',
+      'componentDidUpdate',
+    ]);
+    expect(instance.state).toEqual({foo: 'foo'});
+  });
+
+  it('does not call getDerivedStateFromProps if neither state nor props have changed', async () => {
+    class Parent extends React.Component {
+      state = {parentRenders: 0};
+      static getDerivedStateFromProps(props, prevState) {
+        Scheduler.log('getDerivedStateFromProps');
+        return prevState.parentRenders + 1;
+      }
+      render() {
+        Scheduler.log('Parent');
+        return <Child parentRenders={this.state.parentRenders} ref={child} />;
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
+        Scheduler.log('Child');
+        return this.props.parentRenders;
+      }
+    }
+
+    const child = React.createRef(null);
+    ReactNoop.render(<Parent />);
+    await waitForAll(['getDerivedStateFromProps', 'Parent', 'Child']);
+
+    // Schedule an update on the child. The parent should not re-render.
+    child.current.setState({});
+    await waitForAll(['Child']);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('does not call componentWillReceiveProps for state-only updates', async () => {
+    const instances = [];
+
+    class LifeCycle extends React.Component {
+      state = {x: 0};
+      tick() {
+        this.setState({
+          x: this.state.x + 1,
+        });
+      }
+      UNSAFE_componentWillMount() {
+        instances.push(this);
+        Scheduler.log('componentWillMount:' + this.state.x);
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount:' + this.state.x);
+      }
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log('componentWillReceiveProps');
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        Scheduler.log(
+          'shouldComponentUpdate:' + this.state.x + '-' + nextState.x,
+        );
+        return true;
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState) {
+        Scheduler.log(
+          'componentWillUpdate:' + this.state.x + '-' + nextState.x,
+        );
+      }
+      componentDidUpdate(prevProps, prevState) {
+        Scheduler.log('componentDidUpdate:' + this.state.x + '-' + prevState.x);
+      }
+      render() {
+        Scheduler.log('render:' + this.state.x);
+        return <span />;
+      }
+    }
+
+    // This wrap is a bit contrived because we can't pause a completed root and
+    // there is currently an issue where a component can't reuse its render
+    // output unless it fully completed.
+    class Wrap extends React.Component {
+      state = {y: 0};
+      UNSAFE_componentWillMount() {
+        instances.push(this);
+      }
+      tick() {
+        this.setState({
+          y: this.state.y + 1,
+        });
+      }
+      render() {
+        Scheduler.log('Wrap');
+        return <LifeCycle y={this.state.y} />;
+      }
+    }
+
+    function Sibling() {
+      // The sibling is used to confirm that we've completed the first child,
+      // but not yet flushed.
+      Scheduler.log('Sibling');
+      return <span />;
+    }
+
+    function App(props) {
+      Scheduler.log('App');
+      return [<Wrap key="a" />, <Sibling key="b" />];
+    }
+
+    ReactNoop.render(<App y={0} />);
+    await waitForAll([
+      'App',
+      'Wrap',
+      'componentWillMount:0',
+      'render:0',
+      'Sibling',
+      'componentDidMount:0',
+    ]);
+
+    // LifeCycle
+    instances[1].tick();
+
+    ReactNoop.flushDeferredPri(25);
+
+    assertLog([
+      // no componentWillReceiveProps
+      'shouldComponentUpdate:0-1',
+      'componentWillUpdate:0-1',
+      'render:1',
+      // no componentDidUpdate
+    ]);
+
+    // LifeCycle
+    instances[1].tick();
+
+    await waitForAll([
+      // no componentWillReceiveProps
+      'shouldComponentUpdate:1-2',
+      'componentWillUpdate:1-2',
+      'render:2',
+      // When componentDidUpdate finally gets called, it covers both updates.
+      'componentDidUpdate:2-0',
+    ]);
+
+    // Next we will update props of LifeCycle by updating its parent.
+
+    instances[0].tick();
+
+    ReactNoop.flushDeferredPri(30);
+
+    assertLog([
+      'Wrap',
+      'componentWillReceiveProps',
+      'shouldComponentUpdate:2-2',
+      'componentWillUpdate:2-2',
+      'render:2',
+      // no componentDidUpdate
+    ]);
+
+    // Next we will update LifeCycle directly but not with new props.
+    instances[1].tick();
+
+    await waitForAll([
+      // This should not trigger another componentWillReceiveProps because
+      // we never got new props.
+      'shouldComponentUpdate:2-3',
+      'componentWillUpdate:2-3',
+      'render:3',
+      'componentDidUpdate:3-2',
+    ]);
+
+    // TODO: Test that we get the expected values for the same scenario with
+    // incomplete parents.
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('skips will/DidUpdate when bailing unless an update was already in progress', async () => {
+    class LifeCycle extends React.Component {
+      UNSAFE_componentWillMount() {
+        Scheduler.log('componentWillMount');
+      }
+      componentDidMount() {
+        Scheduler.log('componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log('componentWillReceiveProps');
+      }
+      shouldComponentUpdate(nextProps) {
+        Scheduler.log('shouldComponentUpdate');
+        // Bail
+        return this.props.x !== nextProps.x;
+      }
+      UNSAFE_componentWillUpdate(nextProps) {
+        Scheduler.log('componentWillUpdate');
+      }
+      componentDidUpdate(prevProps) {
+        Scheduler.log('componentDidUpdate');
+      }
+      render() {
+        Scheduler.log('render');
+        return <span />;
+      }
+    }
+
+    function Sibling() {
+      Scheduler.log('render sibling');
+      return <span />;
+    }
+
+    function App(props) {
+      return [<LifeCycle key="a" x={props.x} />, <Sibling key="b" />];
+    }
+
+    ReactNoop.render(<App x={0} />);
+    await waitForAll([
+      'componentWillMount',
+      'render',
+      'render sibling',
+      'componentDidMount',
+    ]);
+
+    // Update to same props
+    ReactNoop.render(<App x={0} />);
+    await waitForAll([
+      'componentWillReceiveProps',
+      'shouldComponentUpdate',
+      // no componentWillUpdate
+      // no render
+      'render sibling',
+      // no componentDidUpdate
+    ]);
+
+    // Begin updating to new props...
+    ReactNoop.render(<App x={1} />);
+    ReactNoop.flushDeferredPri(30);
+
+    assertLog([
+      'componentWillReceiveProps',
+      'shouldComponentUpdate',
+      'componentWillUpdate',
+      'render',
+      'render sibling',
+      // no componentDidUpdate yet
+    ]);
+
+    // ...but we'll interrupt it to rerender the same props.
+    ReactNoop.render(<App x={1} />);
+    await waitForAll([]);
+
+    // We can bail out this time, but we must call componentDidUpdate.
+    assertLog([
+      'componentWillReceiveProps',
+      'shouldComponentUpdate',
+      // no componentWillUpdate
+      // no render
+      'render sibling',
+      'componentDidUpdate',
+    ]);
+  });
+
+  it('can nest batchedUpdates', async () => {
+    let instance;
+
+    class Foo extends React.Component {
+      state = {n: 0};
+      render() {
+        instance = this;
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.batchedUpdates(() => {
+        instance.setState({n: 1}, () => Scheduler.log('setState 1'));
+        instance.setState({n: 2}, () => Scheduler.log('setState 2'));
+        ReactNoop.batchedUpdates(() => {
+          instance.setState({n: 3}, () => Scheduler.log('setState 3'));
+          instance.setState({n: 4}, () => Scheduler.log('setState 4'));
+          Scheduler.log('end inner batchedUpdates');
+        });
+        Scheduler.log('end outer batchedUpdates');
+      });
+    });
+
+    // ReactNoop.flush() not needed because updates are synchronous
+
+    assertLog([
+      'end inner batchedUpdates',
+      'end outer batchedUpdates',
+      'setState 1',
+      'setState 2',
+      'setState 3',
+      'setState 4',
+    ]);
+    expect(instance.state.n).toEqual(4);
+  });
+
+  it('can handle if setState callback throws', async () => {
+    let instance;
+
+    class Foo extends React.Component {
+      state = {n: 0};
+      render() {
+        instance = this;
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+
+    function updater({n}) {
+      return {n: n + 1};
+    }
+
+    instance.setState(updater, () => Scheduler.log('first callback'));
+    instance.setState(updater, () => {
+      Scheduler.log('second callback');
+      throw new Error('callback error');
+    });
+    instance.setState(updater, () => Scheduler.log('third callback'));
+
+    await waitForThrow('callback error');
+
+    // The third callback isn't called because the second one throws
+    assertLog(['first callback', 'second callback']);
+    expect(instance.state.n).toEqual(3);
+  });
+
+  // @gate !disableLegacyContext && !disableLegacyContextForFunctionComponents
+  it('merges and masks context', async () => {
+    class Intl extends React.Component {
+      static childContextTypes = {
+        locale: PropTypes.string,
+      };
+      getChildContext() {
+        return {
+          locale: this.props.locale,
+        };
+      }
+      render() {
+        Scheduler.log('Intl ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    class Router extends React.Component {
+      static childContextTypes = {
+        route: PropTypes.string,
+      };
+      getChildContext() {
+        return {
+          route: this.props.route,
+        };
+      }
+      render() {
+        Scheduler.log('Router ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    class ShowLocale extends React.Component {
+      static contextTypes = {
+        locale: PropTypes.string,
+      };
+      render() {
+        Scheduler.log('ShowLocale ' + JSON.stringify(this.context));
+        return this.context.locale;
+      }
+    }
+
+    class ShowRoute extends React.Component {
+      static contextTypes = {
+        route: PropTypes.string,
+      };
+      render() {
+        Scheduler.log('ShowRoute ' + JSON.stringify(this.context));
+        return this.context.route;
+      }
+    }
+
+    function ShowBoth(props, context) {
+      Scheduler.log('ShowBoth ' + JSON.stringify(context));
+      return `${context.route} in ${context.locale}`;
+    }
+    ShowBoth.contextTypes = {
+      locale: PropTypes.string,
+      route: PropTypes.string,
+    };
+
+    class ShowNeither extends React.Component {
+      render() {
+        Scheduler.log('ShowNeither ' + JSON.stringify(this.context));
+        return null;
+      }
+    }
+
+    class Indirection extends React.Component {
+      render() {
+        Scheduler.log('Indirection ' + JSON.stringify(this.context));
+        return [
+          <ShowLocale key="a" />,
+          <ShowRoute key="b" />,
+          <ShowNeither key="c" />,
+          <Intl key="d" locale="ru">
+            <ShowBoth />
+          </Intl>,
+          <ShowBoth key="e" />,
+        ];
+      }
+    }
+
+    ReactNoop.render(
+      <Intl locale="fr">
+        <ShowLocale />
+        <div>
+          <ShowBoth />
+        </div>
+      </Intl>,
+    );
+    await waitForAll([
+      'Intl {}',
+      'ShowLocale {"locale":"fr"}',
+      'ShowBoth {"locale":"fr"}',
+    ]);
+    assertConsoleErrorDev([
+      'Intl uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Intl (at **)',
+      'ShowLocale uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowLocale (at **)',
+      'ShowBoth uses the legacy contextTypes API which will be removed soon. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowBoth (at **)',
+    ]);
+
+    ReactNoop.render(
+      <Intl locale="de">
+        <ShowLocale />
+        <div>
+          <ShowBoth />
+        </div>
+      </Intl>,
+    );
+    await waitForAll([
+      'Intl {}',
+      'ShowLocale {"locale":"de"}',
+      'ShowBoth {"locale":"de"}',
+    ]);
+    React.startTransition(() => {
+      ReactNoop.render(
+        <Intl locale="sv">
+          <ShowLocale />
+          <div>
+            <ShowBoth />
+          </div>
+        </Intl>,
+      );
+    });
+    await waitFor(['Intl {}']);
+
+    ReactNoop.render(
+      <Intl locale="en">
+        <ShowLocale />
+        <Router route="/about">
+          <Indirection />
+        </Router>
+        <ShowBoth />
+      </Intl>,
+    );
+    await waitForAll([
+      'ShowLocale {"locale":"sv"}',
+      'ShowBoth {"locale":"sv"}',
+      'Intl {}',
+      'ShowLocale {"locale":"en"}',
+      'Router {}',
+      'Indirection {}',
+      'ShowLocale {"locale":"en"}',
+      'ShowRoute {"route":"/about"}',
+      'ShowNeither {}',
+      'Intl {}',
+      'ShowBoth {"locale":"ru","route":"/about"}',
+      'ShowBoth {"locale":"en","route":"/about"}',
+      'ShowBoth {"locale":"en"}',
+    ]);
+    assertConsoleErrorDev([
+      'Router uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Router (at **)',
+      'ShowRoute uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Indirection (at **)',
+    ]);
+  });
+
+  // @gate !disableLegacyContext
+  it('does not leak own context into context provider', async () => {
+    if (gate(flags => flags.disableLegacyContext)) {
+      throw new Error('This test infinite loops when context is disabled.');
+    }
+    class Recurse extends React.Component {
+      static contextTypes = {
+        n: PropTypes.number,
+      };
+      static childContextTypes = {
+        n: PropTypes.number,
+      };
+      getChildContext() {
+        return {n: (this.context.n || 3) - 1};
+      }
+      render() {
+        Scheduler.log('Recurse ' + JSON.stringify(this.context));
+        if (this.context.n === 0) {
+          return null;
+        }
+        return <Recurse />;
+      }
+    }
+
+    ReactNoop.render(<Recurse />);
+    await waitForAll([
+      'Recurse {}',
+      'Recurse {"n":2}',
+      'Recurse {"n":1}',
+      'Recurse {"n":0}',
+    ]);
+    assertConsoleErrorDev([
+      'Recurse uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Recurse (at **)',
+      'Recurse uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Recurse (at **)',
+    ]);
+  });
+
+  // @gate enableLegacyHidden && !disableLegacyContext
+  it('provides context when reusing work', async () => {
+    class Intl extends React.Component {
+      static childContextTypes = {
+        locale: PropTypes.string,
+      };
+      getChildContext() {
+        return {
+          locale: this.props.locale,
+        };
+      }
+      render() {
+        Scheduler.log('Intl ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    class ShowLocale extends React.Component {
+      static contextTypes = {
+        locale: PropTypes.string,
+      };
+      render() {
+        Scheduler.log('ShowLocale ' + JSON.stringify(this.context));
+        return this.context.locale;
+      }
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <Intl locale="fr">
+          <ShowLocale />
+          <LegacyHiddenDiv mode="hidden">
+            <ShowLocale />
+            <Intl locale="ru">
+              <ShowLocale />
+            </Intl>
+          </LegacyHiddenDiv>
+          <ShowLocale />
+        </Intl>,
+      );
+    });
+
+    await waitFor([
+      'Intl {}',
+      'ShowLocale {"locale":"fr"}',
+      'ShowLocale {"locale":"fr"}',
+    ]);
+    assertConsoleErrorDev([
+      'Intl uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Intl (at **)',
+      'ShowLocale uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowLocale (at **)',
+    ]);
+
+    await waitForAll([
+      'ShowLocale {"locale":"fr"}',
+      'Intl {}',
+      'ShowLocale {"locale":"ru"}',
+    ]);
+  });
+
+  // @gate !disableLegacyContext && !disableLegacyContextForFunctionComponents
+  it('reads context when setState is below the provider', async () => {
+    let statefulInst;
+
+    class Intl extends React.Component {
+      static childContextTypes = {
+        locale: PropTypes.string,
+      };
+      getChildContext() {
+        const childContext = {
+          locale: this.props.locale,
+        };
+        Scheduler.log('Intl:provide ' + JSON.stringify(childContext));
+        return childContext;
+      }
+      render() {
+        Scheduler.log('Intl:read ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    class ShowLocaleClass extends React.Component {
+      static contextTypes = {
+        locale: PropTypes.string,
+      };
+      render() {
+        Scheduler.log('ShowLocaleClass:read ' + JSON.stringify(this.context));
+        return this.context.locale;
+      }
+    }
+
+    function ShowLocaleFn(props, context) {
+      Scheduler.log('ShowLocaleFn:read ' + JSON.stringify(context));
+      return context.locale;
+    }
+    ShowLocaleFn.contextTypes = {
+      locale: PropTypes.string,
+    };
+
+    class Stateful extends React.Component {
+      state = {x: 0};
+      render() {
+        statefulInst = this;
+        return this.props.children;
+      }
+    }
+
+    function IndirectionFn(props, context) {
+      Scheduler.log('IndirectionFn ' + JSON.stringify(context));
+      return props.children;
+    }
+
+    class IndirectionClass extends React.Component {
+      render() {
+        Scheduler.log('IndirectionClass ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    ReactNoop.render(
+      <Intl locale="fr">
+        <IndirectionFn>
+          <IndirectionClass>
+            <Stateful>
+              <ShowLocaleClass />
+              <ShowLocaleFn />
+            </Stateful>
+          </IndirectionClass>
+        </IndirectionFn>
+      </Intl>,
+    );
+    await waitForAll([
+      'Intl:read {}',
+      'Intl:provide {"locale":"fr"}',
+      'IndirectionFn {}',
+      'IndirectionClass {}',
+      'ShowLocaleClass:read {"locale":"fr"}',
+      'ShowLocaleFn:read {"locale":"fr"}',
+    ]);
+    assertConsoleErrorDev([
+      'Intl uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Intl (at **)',
+      'ShowLocaleClass uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowLocaleClass (at **)',
+      'ShowLocaleFn uses the legacy contextTypes API which will be removed soon. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowLocaleFn (at **)',
+    ]);
+
+    statefulInst.setState({x: 1});
+    await waitForAll([]);
+    // All work has been memoized because setState()
+    // happened below the context and could not have affected it.
+    assertLog([]);
+  });
+
+  // @gate !disableLegacyContext && !disableLegacyContextForFunctionComponents
+  it('reads context when setState is above the provider', async () => {
+    let statefulInst;
+
+    class Intl extends React.Component {
+      static childContextTypes = {
+        locale: PropTypes.string,
+      };
+      getChildContext() {
+        const childContext = {
+          locale: this.props.locale,
+        };
+        Scheduler.log('Intl:provide ' + JSON.stringify(childContext));
+        return childContext;
+      }
+      render() {
+        Scheduler.log('Intl:read ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    class ShowLocaleClass extends React.Component {
+      static contextTypes = {
+        locale: PropTypes.string,
+      };
+      render() {
+        Scheduler.log('ShowLocaleClass:read ' + JSON.stringify(this.context));
+        return this.context.locale;
+      }
+    }
+
+    function ShowLocaleFn(props, context) {
+      Scheduler.log('ShowLocaleFn:read ' + JSON.stringify(context));
+      return context.locale;
+    }
+    ShowLocaleFn.contextTypes = {
+      locale: PropTypes.string,
+    };
+
+    function IndirectionFn(props, context) {
+      Scheduler.log('IndirectionFn ' + JSON.stringify(context));
+      return props.children;
+    }
+
+    class IndirectionClass extends React.Component {
+      render() {
+        Scheduler.log('IndirectionClass ' + JSON.stringify(this.context));
+        return this.props.children;
+      }
+    }
+
+    class Stateful extends React.Component {
+      state = {locale: 'fr'};
+      render() {
+        statefulInst = this;
+        return <Intl locale={this.state.locale}>{this.props.children}</Intl>;
+      }
+    }
+
+    ReactNoop.render(
+      <Stateful>
+        <IndirectionFn>
+          <IndirectionClass>
+            <ShowLocaleClass />
+            <ShowLocaleFn />
+          </IndirectionClass>
+        </IndirectionFn>
+      </Stateful>,
+    );
+    await waitForAll([
+      'Intl:read {}',
+      'Intl:provide {"locale":"fr"}',
+      'IndirectionFn {}',
+      'IndirectionClass {}',
+      'ShowLocaleClass:read {"locale":"fr"}',
+      'ShowLocaleFn:read {"locale":"fr"}',
+    ]);
+
+    assertConsoleErrorDev([
+      'Intl uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Stateful (at **)',
+      'ShowLocaleClass uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowLocaleClass (at **)',
+
+      'ShowLocaleFn uses the legacy contextTypes API which will be removed soon. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ShowLocaleFn (at **)',
+    ]);
+
+    statefulInst.setState({locale: 'gr'});
+    await waitForAll([
+      // Intl is below setState() so it might have been
+      // affected by it. Therefore we re-render and recompute
+      // its child context.
+      'Intl:read {}',
+      'Intl:provide {"locale":"gr"}',
+      // TODO: it's unfortunate that we can't reuse work on
+      // these components even though they don't depend on context.
+      'IndirectionFn {}',
+      'IndirectionClass {}',
+      // These components depend on context:
+      'ShowLocaleClass:read {"locale":"gr"}',
+      'ShowLocaleFn:read {"locale":"gr"}',
+    ]);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  it('maintains the correct context when providers bail out due to low priority', async () => {
+    class Root extends React.Component {
+      render() {
+        return <Middle {...this.props} />;
+      }
+    }
+
+    let instance;
+
+    class Middle extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        instance = this;
+      }
+      shouldComponentUpdate() {
+        // Return false so that our child will get a NoWork priority (and get bailed out)
+        return false;
+      }
+      render() {
+        return <Child />;
+      }
+    }
+
+    // Child must be a context provider to trigger the bug
+    class Child extends React.Component {
+      static childContextTypes = {};
+      getChildContext() {
+        return {};
+      }
+      render() {
+        return <div />;
+      }
+    }
+
+    // Init
+    ReactNoop.render(<Root />);
+    await waitForAll([]);
+
+    assertConsoleErrorDev([
+      'Child uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Middle (at **)\n' +
+        '    in Root (at **)',
+    ]);
+
+    // Trigger an update in the middle of the tree
+    instance.setState({});
+    await waitForAll([]);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  it('maintains the correct context when unwinding due to an error in render', async () => {
+    class Root extends React.Component {
+      componentDidCatch(error) {
+        // If context is pushed/popped correctly,
+        // This method will be used to handle the intentionally-thrown Error.
+      }
+      render() {
+        return <ContextProvider depth={1} />;
+      }
+    }
+
+    let instance;
+
+    class ContextProvider extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        this.state = {};
+        if (props.depth === 1) {
+          instance = this;
+        }
+      }
+      static childContextTypes = {};
+      getChildContext() {
+        return {};
+      }
+      render() {
+        if (this.state.throwError) {
+          throw Error();
+        }
+        return this.props.depth < 4 ? (
+          <ContextProvider depth={this.props.depth + 1} />
+        ) : (
+          <div />
+        );
+      }
+    }
+
+    // Init
+    ReactNoop.render(<Root />);
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'ContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Root (at **)',
+    ]);
+
+    // Trigger an update in the middle of the tree
+    // This is necessary to reproduce the error as it currently exists.
+    instance.setState({
+      throwError: true,
+    });
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Root: Error boundaries should implement getDerivedStateFromError(). ' +
+        'In that method, return a state update to display an error message or fallback UI.\n' +
+        '    in Root (at **)',
+    ]);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  it('should not recreate masked context unless inputs have changed', async () => {
+    let scuCounter = 0;
+
+    class MyComponent extends React.Component {
+      static contextTypes = {};
+      componentDidMount(prevProps, prevState) {
+        Scheduler.log('componentDidMount');
+        this.setState({setStateInCDU: true});
+      }
+      componentDidUpdate(prevProps, prevState) {
+        Scheduler.log('componentDidUpdate');
+        if (this.state.setStateInCDU) {
+          this.setState({setStateInCDU: false});
+        }
+      }
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log('componentWillReceiveProps');
+        this.setState({setStateInCDU: true});
+      }
+      render() {
+        Scheduler.log('render');
+        return null;
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        Scheduler.log('shouldComponentUpdate');
+        return scuCounter++ < 5; // Don't let test hang
+      }
+    }
+
+    ReactNoop.render(<MyComponent />);
+    await waitForAll([
+      'render',
+      'componentDidMount',
+      'shouldComponentUpdate',
+      'render',
+      'componentDidUpdate',
+      'shouldComponentUpdate',
+      'render',
+      'componentDidUpdate',
+    ]);
+
+    assertConsoleErrorDev([
+      'MyComponent uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in MyComponent (at **)',
+    ]);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should reuse memoized work if pointers are updated before calling lifecycles', async () => {
+    const cduNextProps = [];
+    const cduPrevProps = [];
+    const scuNextProps = [];
+    const scuPrevProps = [];
+    let renderCounter = 0;
+
+    function SecondChild(props) {
+      return <span>{props.children}</span>;
+    }
+
+    class FirstChild extends React.Component {
+      componentDidUpdate(prevProps, prevState) {
+        cduNextProps.push(this.props);
+        cduPrevProps.push(prevProps);
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        scuNextProps.push(nextProps);
+        scuPrevProps.push(this.props);
+        return this.props.children !== nextProps.children;
+      }
+      render() {
+        renderCounter++;
+        return <span>{this.props.children}</span>;
+      }
+    }
+
+    class Middle extends React.Component {
+      render() {
+        return (
+          <div>
+            <FirstChild>{this.props.children}</FirstChild>
+            <SecondChild>{this.props.children}</SecondChild>
+          </div>
+        );
+      }
+    }
+
+    function Root(props) {
+      return (
+        <div hidden={true}>
+          <Middle {...props} />
+        </div>
+      );
+    }
+
+    // Initial render of the entire tree.
+    // Renders: Root, Middle, FirstChild, SecondChild
+    ReactNoop.render(<Root>A</Root>);
+    await waitForAll([]);
+
+    expect(renderCounter).toBe(1);
+
+    // Schedule low priority work to update children.
+    // Give it enough time to partially render.
+    // Renders: Root, Middle, FirstChild
+    ReactNoop.render(<Root>B</Root>);
+    ReactNoop.flushDeferredPri(20 + 30 + 5);
+
+    // At this point our FirstChild component has rendered a second time,
+    // But since the render is not completed cDU should not be called yet.
+    expect(renderCounter).toBe(2);
+    expect(scuPrevProps).toEqual([{children: 'A'}]);
+    expect(scuNextProps).toEqual([{children: 'B'}]);
+    expect(cduPrevProps).toEqual([]);
+    expect(cduNextProps).toEqual([]);
+
+    // Next interrupt the partial render with higher priority work.
+    // The in-progress child content will bailout.
+    // Renders: Root, Middle, FirstChild, SecondChild
+    ReactNoop.render(<Root>B</Root>);
+    await waitForAll([]);
+
+    // At this point the higher priority render has completed.
+    // Since FirstChild props didn't change, sCU returned false.
+    // The previous memoized copy should be used.
+    expect(renderCounter).toBe(2);
+    expect(scuPrevProps).toEqual([{children: 'A'}, {children: 'B'}]);
+    expect(scuNextProps).toEqual([{children: 'B'}, {children: 'B'}]);
+    expect(cduPrevProps).toEqual([{children: 'A'}]);
+    expect(cduNextProps).toEqual([{children: 'B'}]);
+  });
+
+  // @gate !disableLegacyContext
+  it('updates descendants with new context values', async () => {
+    let instance;
+
+    class TopContextProvider extends React.Component {
+      static childContextTypes = {
+        count: PropTypes.number,
+      };
+      constructor() {
+        super();
+        this.state = {count: 0};
+        instance = this;
+      }
+      getChildContext = () => ({
+        count: this.state.count,
+      });
+      render = () => this.props.children;
+      updateCount = () =>
+        this.setState(state => ({
+          count: state.count + 1,
+        }));
+    }
+
+    class Middle extends React.Component {
+      render = () => this.props.children;
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        count: PropTypes.number,
+      };
+      render = () => {
+        Scheduler.log(`count:${this.context.count}`);
+        return null;
+      };
+    }
+
+    ReactNoop.render(
+      <TopContextProvider>
+        <Middle>
+          <Child />
+        </Middle>
+      </TopContextProvider>,
+    );
+
+    await waitForAll(['count:0']);
+    assertConsoleErrorDev([
+      'TopContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in TopContextProvider (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Child (at **)',
+    ]);
+    instance.updateCount();
+    await waitForAll(['count:1']);
+  });
+
+  // @gate !disableLegacyContext
+  it('updates descendants with multiple context-providing ancestors with new context values', async () => {
+    let instance;
+
+    class TopContextProvider extends React.Component {
+      static childContextTypes = {
+        count: PropTypes.number,
+      };
+      constructor() {
+        super();
+        this.state = {count: 0};
+        instance = this;
+      }
+      getChildContext = () => ({
+        count: this.state.count,
+      });
+      render = () => this.props.children;
+      updateCount = () =>
+        this.setState(state => ({
+          count: state.count + 1,
+        }));
+    }
+
+    class MiddleContextProvider extends React.Component {
+      static childContextTypes = {
+        name: PropTypes.string,
+      };
+      getChildContext = () => ({
+        name: 'brian',
+      });
+      render = () => this.props.children;
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        count: PropTypes.number,
+      };
+      render = () => {
+        Scheduler.log(`count:${this.context.count}`);
+        return null;
+      };
+    }
+
+    ReactNoop.render(
+      <TopContextProvider>
+        <MiddleContextProvider>
+          <Child />
+        </MiddleContextProvider>
+      </TopContextProvider>,
+    );
+
+    await waitForAll(['count:0']);
+    assertConsoleErrorDev([
+      'TopContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in TopContextProvider (at **)',
+      'MiddleContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in MiddleContextProvider (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Child (at **)',
+    ]);
+    instance.updateCount();
+    await waitForAll(['count:1']);
+  });
+
+  // @gate !disableLegacyContext
+  it('should not update descendants with new context values if shouldComponentUpdate returns false', async () => {
+    let instance;
+
+    class TopContextProvider extends React.Component {
+      static childContextTypes = {
+        count: PropTypes.number,
+      };
+      constructor() {
+        super();
+        this.state = {count: 0};
+        instance = this;
+      }
+      getChildContext = () => ({
+        count: this.state.count,
+      });
+      render = () => this.props.children;
+      updateCount = () =>
+        this.setState(state => ({
+          count: state.count + 1,
+        }));
+    }
+
+    class MiddleScu extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render = () => this.props.children;
+    }
+
+    class MiddleContextProvider extends React.Component {
+      static childContextTypes = {
+        name: PropTypes.string,
+      };
+      getChildContext = () => ({
+        name: 'brian',
+      });
+      render = () => this.props.children;
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        count: PropTypes.number,
+      };
+      render = () => {
+        Scheduler.log(`count:${this.context.count}`);
+        return null;
+      };
+    }
+
+    ReactNoop.render(
+      <TopContextProvider>
+        <MiddleScu>
+          <MiddleContextProvider>
+            <Child />
+          </MiddleContextProvider>
+        </MiddleScu>
+      </TopContextProvider>,
+    );
+
+    await waitForAll(['count:0']);
+    assertConsoleErrorDev([
+      'TopContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in TopContextProvider (at **)',
+      'MiddleContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in MiddleContextProvider (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Child (at **)',
+    ]);
+    instance.updateCount();
+    await waitForAll([]);
+  });
+
+  // @gate !disableLegacyContext
+  it('should update descendants with new context values if setState() is called in the middle of the tree', async () => {
+    let middleInstance;
+    let topInstance;
+
+    class TopContextProvider extends React.Component {
+      static childContextTypes = {
+        count: PropTypes.number,
+      };
+      constructor() {
+        super();
+        this.state = {count: 0};
+        topInstance = this;
+      }
+      getChildContext = () => ({
+        count: this.state.count,
+      });
+      render = () => this.props.children;
+      updateCount = () =>
+        this.setState(state => ({
+          count: state.count + 1,
+        }));
+    }
+
+    class MiddleScu extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render = () => this.props.children;
+    }
+
+    class MiddleContextProvider extends React.Component {
+      static childContextTypes = {
+        name: PropTypes.string,
+      };
+      constructor() {
+        super();
+        this.state = {name: 'brian'};
+        middleInstance = this;
+      }
+      getChildContext = () => ({
+        name: this.state.name,
+      });
+      updateName = name => {
+        this.setState({name});
+      };
+      render = () => this.props.children;
+    }
+
+    class Child extends React.Component {
+      static contextTypes = {
+        count: PropTypes.number,
+        name: PropTypes.string,
+      };
+      render = () => {
+        Scheduler.log(`count:${this.context.count}, name:${this.context.name}`);
+        return null;
+      };
+    }
+
+    ReactNoop.render(
+      <TopContextProvider>
+        <MiddleScu>
+          <MiddleContextProvider>
+            <Child />
+          </MiddleContextProvider>
+        </MiddleScu>
+      </TopContextProvider>,
+    );
+
+    await waitForAll(['count:0, name:brian']);
+    assertConsoleErrorDev([
+      'TopContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in TopContextProvider (at **)',
+      'MiddleContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in MiddleContextProvider (at **)',
+      'Child uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Child (at **)',
+    ]);
+    topInstance.updateCount();
+    await waitForAll([]);
+    middleInstance.updateName('not brian');
+    await waitForAll(['count:1, name:not brian']);
+  });
+
+  it('does not interrupt for update at same priority', async () => {
+    function Parent(props) {
+      Scheduler.log('Parent: ' + props.step);
+      return <Child step={props.step} />;
+    }
+
+    function Child(props) {
+      Scheduler.log('Child: ' + props.step);
+      return null;
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Parent step={1} />);
+    });
+    await waitFor(['Parent: 1']);
+
+    // Interrupt at same priority
+    ReactNoop.render(<Parent step={2} />);
+
+    await waitForAll(['Child: 1', 'Parent: 2', 'Child: 2']);
+  });
+
+  it('does not interrupt for update at lower priority', async () => {
+    function Parent(props) {
+      Scheduler.log('Parent: ' + props.step);
+      return <Child step={props.step} />;
+    }
+
+    function Child(props) {
+      Scheduler.log('Child: ' + props.step);
+      return null;
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Parent step={1} />);
+    });
+    await waitFor(['Parent: 1']);
+
+    // Interrupt at lower priority
+    ReactNoop.expire(2000);
+    ReactNoop.render(<Parent step={2} />);
+
+    await waitForAll(['Child: 1', 'Parent: 2', 'Child: 2']);
+  });
+
+  it('does interrupt for update at higher priority', async () => {
+    function Parent(props) {
+      Scheduler.log('Parent: ' + props.step);
+      return <Child step={props.step} />;
+    }
+
+    function Child(props) {
+      Scheduler.log('Child: ' + props.step);
+      return null;
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Parent step={1} />);
+    });
+    await waitFor(['Parent: 1']);
+
+    // Interrupt at higher priority
+    ReactNoop.flushSync(() => ReactNoop.render(<Parent step={2} />));
+    assertLog(['Parent: 2', 'Child: 2']);
+
+    await waitForAll([]);
+  });
+
+  // We sometimes use Maps with Fibers as keys.
+  // @gate !disableLegacyContext || !__DEV__
+  it('does not break with a bad Map polyfill', async () => {
+    const realMapSet = Map.prototype.set;
+
+    async function triggerCodePathThatUsesFibersAsMapKeys() {
+      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(
+        <React.StrictMode>
+          <Boundary />
+        </React.StrictMode>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Boundary uses the legacy contextTypes API which will soon be removed. ' +
+          'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Boundary (at **)',
+        '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: Boundary\n' +
+          '\n' +
+          'Learn more about this warning here: https://react.dev/link/legacy-context\n' +
+          '    in Boundary (at **)',
+      ]);
+    }
+
+    // First, verify that this code path normally receives Fibers as keys,
+    // and that they're not extensible.
+    jest.resetModules();
+    let receivedNonExtensibleObjects;
+    // eslint-disable-next-line no-extend-native
+    Map.prototype.set = function (key) {
+      if (typeof key === 'object' && key !== null) {
+        if (!Object.isExtensible(key)) {
+          receivedNonExtensibleObjects = true;
+        }
+      }
+      return realMapSet.apply(this, arguments);
+    };
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    let InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForThrow = InternalTestUtils.waitForThrow;
+    assertLog = InternalTestUtils.assertLog;
+
+    try {
+      receivedNonExtensibleObjects = false;
+      await triggerCodePathThatUsesFibersAsMapKeys();
+    } finally {
+      // eslint-disable-next-line no-extend-native
+      Map.prototype.set = realMapSet;
+    }
+    // If this fails, find another code path in Fiber
+    // that passes Fibers as keys to Maps.
+    // Note that we only expect them to be non-extensible
+    // in development.
+    expect(receivedNonExtensibleObjects).toBe(__DEV__);
+
+    // Next, verify that a Map polyfill that "writes" to keys
+    // doesn't cause a failure.
+    jest.resetModules();
+    // eslint-disable-next-line no-extend-native
+    Map.prototype.set = function (key, value) {
+      if (typeof key === 'object' && key !== null) {
+        // A polyfill could do something like this.
+        // It would throw if an object is not extensible.
+        key.__internalValueSlot = value;
+      }
+      return realMapSet.apply(this, arguments);
+    };
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForThrow = InternalTestUtils.waitForThrow;
+    assertLog = InternalTestUtils.assertLog;
+
+    try {
+      await triggerCodePathThatUsesFibersAsMapKeys();
+    } finally {
+      // eslint-disable-next-line no-extend-native
+      Map.prototype.set = realMapSet;
+    }
+    // If we got this far, our feature detection worked.
+    // We knew that Map#set() throws for non-extensible objects,
+    // so we didn't set them as non-extensible for that reason.
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
new file mode 100644
index 00000000000..f81a83379f8
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -0,0 +1,1906 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let assertLog;
+let waitForAll;
+let waitFor;
+let waitForThrow;
+let assertConsoleErrorDev;
+
+describe('ReactIncrementalErrorHandling', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForThrow = InternalTestUtils.waitForThrow;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+        return '\n    in ' + name + ' (at **)';
+      })
+    );
+  }
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('recovers from errors asynchronously', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        Scheduler.log('getDerivedStateFromError');
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary (catch)');
+          return <ErrorMessage error={this.state.error} />;
+        }
+        Scheduler.log('ErrorBoundary (try)');
+        return this.props.children;
+      }
+    }
+
+    function ErrorMessage({error}) {
+      Scheduler.log('ErrorMessage');
+      return <span prop={`Caught an error: ${error.message}`} />;
+    }
+
+    function Indirection({children}) {
+      Scheduler.log('Indirection');
+      return children || null;
+    }
+
+    function BadRender({unused}) {
+      Scheduler.log('throw');
+      throw new Error('oops!');
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <>
+          <ErrorBoundary>
+            <Indirection>
+              <Indirection>
+                <Indirection>
+                  <BadRender />
+                </Indirection>
+              </Indirection>
+            </Indirection>
+          </ErrorBoundary>
+          <Indirection />
+          <Indirection />
+        </>,
+      );
+    });
+
+    // Start rendering asynchronously
+    await waitFor([
+      'ErrorBoundary (try)',
+      'Indirection',
+      'Indirection',
+      'Indirection',
+      // An error is thrown. React keeps rendering asynchronously.
+      'throw',
+
+      // Call getDerivedStateFromError and re-render the error boundary, this
+      // time rendering an error message.
+      'getDerivedStateFromError',
+      'ErrorBoundary (catch)',
+      'ErrorMessage',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // The work loop unwound to the nearest error boundary. Continue rendering
+    // asynchronously.
+    await waitFor(['Indirection']);
+
+    // Since the error was thrown during an async render, React won't commit the
+    // result yet. After render we render the last child, React will attempt to
+    // render again, synchronously, just in case that happens to fix the error
+    // (i.e. as in the case of a data race). Flush just one more unit of work to
+    // demonstrate that this render is synchronous.
+    expect(ReactNoop.flushNextYield()).toEqual([
+      'Indirection',
+
+      'ErrorBoundary (try)',
+      'Indirection',
+      'Indirection',
+      'Indirection',
+
+      // The error was thrown again. This time, React will actually commit
+      // the result.
+      'throw',
+      'getDerivedStateFromError',
+      'ErrorBoundary (catch)',
+      'ErrorMessage',
+      'Indirection',
+      'Indirection',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
+  });
+
+  it('recovers from errors asynchronously (legacy, no getDerivedStateFromError)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        Scheduler.log('componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary (catch)');
+          return <ErrorMessage error={this.state.error} />;
+        }
+        Scheduler.log('ErrorBoundary (try)');
+        return this.props.children;
+      }
+    }
+
+    function ErrorMessage({error}) {
+      Scheduler.log('ErrorMessage');
+      return <span prop={`Caught an error: ${error.message}`} />;
+    }
+
+    function Indirection({children}) {
+      Scheduler.log('Indirection');
+      return children || null;
+    }
+
+    function BadRender({unused}) {
+      Scheduler.log('throw');
+      throw new Error('oops!');
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <>
+          <ErrorBoundary>
+            <Indirection>
+              <Indirection>
+                <Indirection>
+                  <BadRender />
+                </Indirection>
+              </Indirection>
+            </Indirection>
+          </ErrorBoundary>
+          <Indirection />
+          <Indirection />
+        </>,
+      );
+    });
+
+    // Start rendering asynchronously
+    await waitFor([
+      'ErrorBoundary (try)',
+      'Indirection',
+      'Indirection',
+      'Indirection',
+      // An error is thrown. React keeps rendering asynchronously.
+      'throw',
+    ]);
+
+    // Still rendering async...
+    await waitFor(['Indirection']);
+
+    await waitFor([
+      'Indirection',
+      // Now that the tree is complete, and there's no remaining work, React
+      // reverts to legacy mode to retry one more time before handling the error.
+
+      'ErrorBoundary (try)',
+      'Indirection',
+      'Indirection',
+      'Indirection',
+
+      // The error was thrown again. Now we can handle it.
+      'throw',
+      'Indirection',
+      'Indirection',
+      'componentDidCatch',
+      'ErrorBoundary (catch)',
+      'ErrorMessage',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
+  });
+
+  it("retries at a lower priority if there's additional pending work", async () => {
+    function App(props) {
+      if (props.isBroken) {
+        Scheduler.log('error');
+        throw new Error('Oops!');
+      }
+      Scheduler.log('success');
+      return <span prop="Everything is fine." />;
+    }
+
+    function onCommit() {
+      Scheduler.log('commit');
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<App isBroken={true} />, onCommit);
+    });
+    await waitFor(['error']);
+
+    React.startTransition(() => {
+      // This update is in a separate batch
+      ReactNoop.render(<App isBroken={false} />, onCommit);
+    });
+
+    // 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);
+    assertLog([
+      'success',
+      // Nothing commits until the second update completes.
+      'commit',
+      'commit',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Everything is fine." />,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  it('does not include offscreen work when retrying after an error', async () => {
+    function App(props) {
+      if (props.isBroken) {
+        Scheduler.log('error');
+        throw new Error('Oops!');
+      }
+      Scheduler.log('success');
+      return (
+        <>
+          Everything is fine
+          <LegacyHiddenDiv mode="hidden">
+            <div>Offscreen content</div>
+          </LegacyHiddenDiv>
+        </>
+      );
+    }
+
+    function onCommit() {
+      Scheduler.log('commit');
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<App isBroken={true} />, onCommit);
+    });
+    await waitFor(['error']);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    React.startTransition(() => {
+      // This update is in a separate batch
+      ReactNoop.render(<App isBroken={false} />, onCommit);
+    });
+
+    // 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);
+    assertLog([
+      'success',
+      // Nothing commits until the second update completes.
+      'commit',
+      'commit',
+    ]);
+    // This should not include the offscreen content
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        Everything is fine
+        <div hidden={true} />
+      </>,
+    );
+
+    // The offscreen content finishes in a subsequent render
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        Everything is fine
+        <div hidden={true}>
+          <div>Offscreen content</div>
+        </div>
+      </>,
+    );
+  });
+
+  it('retries one more time before handling error', async () => {
+    function BadRender({unused}) {
+      Scheduler.log('BadRender');
+      throw new Error('oops');
+    }
+
+    function Sibling({unused}) {
+      Scheduler.log('Sibling');
+      return <span prop="Sibling" />;
+    }
+
+    function Parent({unused}) {
+      Scheduler.log('Parent');
+      return (
+        <>
+          <BadRender />
+          <Sibling />
+        </>
+      );
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Parent />, () => Scheduler.log('commit'));
+    });
+
+    // Render the bad component asynchronously
+    await waitFor(['Parent', 'BadRender']);
+
+    // The work loop unwound to the nearest error boundary. React will try
+    // to render one more time, synchronously. Flush just one unit of work to
+    // demonstrate that this render is synchronous.
+    Scheduler.unstable_flushNumberOfYields(1);
+    assertLog(['Parent', 'BadRender', 'commit']);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('retries one more time if an error occurs during a render that expires midway through the tree', async () => {
+    function Oops({unused}) {
+      Scheduler.log('Oops');
+      throw new Error('Oops');
+    }
+
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    function App({unused}) {
+      return (
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Oops />
+          <Text text="C" />
+          <Text text="D" />
+        </>
+      );
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<App />);
+    });
+
+    // Render part of the tree
+    await waitFor(['A', 'B']);
+
+    // Expire the render midway through
+    Scheduler.unstable_advanceTime(10000);
+
+    Scheduler.unstable_flushExpired();
+    ReactNoop.flushSync();
+
+    assertLog([
+      // The render expired, but we shouldn't throw out the partial work.
+      // Finish the current level.
+      'Oops',
+
+      // Since the error occurred during a partially concurrent render, we should
+      // retry one more time, synchronously.
+      'A',
+      'B',
+      'Oops',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('calls componentDidCatch multiple times for multiple errors', async () => {
+    let id = 0;
+    class BadMount extends React.Component {
+      componentDidMount() {
+        throw new Error(`Error ${++id}`);
+      }
+      render() {
+        Scheduler.log('BadMount');
+        return null;
+      }
+    }
+
+    class ErrorBoundary extends React.Component {
+      state = {errorCount: 0};
+      componentDidCatch(error) {
+        Scheduler.log(`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.log('ErrorBoundary');
+        return this.props.children;
+      }
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BadMount />
+        <BadMount />
+        <BadMount />
+      </ErrorBoundary>,
+    );
+
+    await waitForAll([
+      'ErrorBoundary',
+      'BadMount',
+      'BadMount',
+      'BadMount',
+      'componentDidCatch: Error 1',
+      'componentDidCatch: Error 2',
+      'componentDidCatch: Error 3',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Number of errors: 3" />,
+    );
+  });
+
+  it('catches render error in a boundary during full deferred mounting', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return (
+            <span prop={`Caught an error: ${this.state.error.message}.`} />
+          );
+        }
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender(props) {
+      throw new Error('Hello');
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
+  });
+
+  it('catches render error in a boundary during partial deferred mounting', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        Scheduler.log('ErrorBoundary componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary render error');
+          return (
+            <span prop={`Caught an error: ${this.state.error.message}.`} />
+          );
+        }
+        Scheduler.log('ErrorBoundary render success');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+
+    await waitFor(['ErrorBoundary render success']);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await waitForAll([
+      'BrokenRender',
+      // React retries one more time
+      'ErrorBoundary render success',
+
+      // Errored again on retry. Now handle it.
+      'BrokenRender',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary render error',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
+  });
+
+  it('catches render error in a boundary during synchronous mounting', () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        Scheduler.log('ErrorBoundary componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary render error');
+          return (
+            <span prop={`Caught an error: ${this.state.error.message}.`} />
+          );
+        }
+        Scheduler.log('ErrorBoundary render success');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+
+    assertLog([
+      'ErrorBoundary render success',
+      'BrokenRender',
+
+      // React retries one more time
+      'ErrorBoundary render success',
+      'BrokenRender',
+
+      // Errored again on retry. Now handle it.
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary render error',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
+  });
+
+  it('catches render error in a boundary during batched mounting', () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        Scheduler.log('ErrorBoundary componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary render error');
+          return (
+            <span prop={`Caught an error: ${this.state.error.message}.`} />
+          );
+        }
+        Scheduler.log('ErrorBoundary render success');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<ErrorBoundary>Before the storm.</ErrorBoundary>);
+      ReactNoop.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    });
+
+    assertLog([
+      'ErrorBoundary render success',
+      'BrokenRender',
+
+      // React retries one more time
+      'ErrorBoundary render success',
+      'BrokenRender',
+
+      // Errored again on retry. Now handle it.
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary render error',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello." />,
+    );
+  });
+
+  it('propagates an error from a noop error boundary during full deferred mounting', async () => {
+    class RethrowErrorBoundary extends React.Component {
+      componentDidCatch(error) {
+        Scheduler.log('RethrowErrorBoundary componentDidCatch');
+        throw error;
+      }
+      render() {
+        Scheduler.log('RethrowErrorBoundary render');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    ReactNoop.render(
+      <RethrowErrorBoundary>
+        <BrokenRender />
+      </RethrowErrorBoundary>,
+    );
+
+    await waitForThrow('Hello');
+    assertLog([
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // React retries one more time
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // Errored again on retry. Now handle it.
+      'RethrowErrorBoundary componentDidCatch',
+    ]);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(null);
+  });
+
+  it('propagates an error from a noop error boundary during partial deferred mounting', async () => {
+    class RethrowErrorBoundary extends React.Component {
+      componentDidCatch(error) {
+        Scheduler.log('RethrowErrorBoundary componentDidCatch');
+        throw error;
+      }
+      render() {
+        Scheduler.log('RethrowErrorBoundary render');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <RethrowErrorBoundary>
+          <BrokenRender />
+        </RethrowErrorBoundary>,
+      );
+    });
+
+    await waitFor(['RethrowErrorBoundary render']);
+
+    await waitForThrow('Hello');
+    assertLog([
+      'BrokenRender',
+
+      // React retries one more time
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // Errored again on retry. Now handle it.
+      'RethrowErrorBoundary componentDidCatch',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('propagates an error from a noop error boundary during synchronous mounting', () => {
+    class RethrowErrorBoundary extends React.Component {
+      componentDidCatch(error) {
+        Scheduler.log('RethrowErrorBoundary componentDidCatch');
+        throw error;
+      }
+      render() {
+        Scheduler.log('RethrowErrorBoundary render');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(
+        <RethrowErrorBoundary>
+          <BrokenRender />
+        </RethrowErrorBoundary>,
+      );
+    });
+
+    assertLog([
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // React retries one more time
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // Errored again on retry. Now handle it.
+      'RethrowErrorBoundary componentDidCatch',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('propagates an error from a noop error boundary during batched mounting', () => {
+    class RethrowErrorBoundary extends React.Component {
+      componentDidCatch(error) {
+        Scheduler.log('RethrowErrorBoundary componentDidCatch');
+        throw error;
+      }
+      render() {
+        Scheduler.log('RethrowErrorBoundary render');
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(
+        <RethrowErrorBoundary>Before the storm.</RethrowErrorBoundary>,
+      );
+      ReactNoop.render(
+        <RethrowErrorBoundary>
+          <BrokenRender />
+        </RethrowErrorBoundary>,
+      );
+    });
+
+    assertLog([
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // React retries one more time
+      'RethrowErrorBoundary render',
+      'BrokenRender',
+
+      // Errored again on retry. Now handle it.
+      'RethrowErrorBoundary componentDidCatch',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('applies batched updates regardless despite errors in scheduling', async () => {
+    ReactNoop.render(<span prop="a:1" />);
+    expect(() => {
+      ReactNoop.batchedUpdates(() => {
+        ReactNoop.render(<span prop="a:2" />);
+        ReactNoop.render(<span prop="a:3" />);
+        throw new Error('Hello');
+      });
+    }).toThrow('Hello');
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a:3" />);
+  });
+
+  it('applies nested batched updates despite errors in scheduling', async () => {
+    ReactNoop.render(<span prop="a:1" />);
+    expect(() => {
+      ReactNoop.batchedUpdates(() => {
+        ReactNoop.render(<span prop="a:2" />);
+        ReactNoop.render(<span prop="a:3" />);
+        ReactNoop.batchedUpdates(() => {
+          ReactNoop.render(<span prop="a:4" />);
+          ReactNoop.render(<span prop="a:5" />);
+          throw new Error('Hello');
+        });
+      });
+    }).toThrow('Hello');
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a:5" />);
+  });
+
+  // TODO: Is this a breaking change?
+  it('defers additional sync work to a separate event after an error', async () => {
+    ReactNoop.render(<span prop="a:1" />);
+    expect(() => {
+      ReactNoop.flushSync(() => {
+        ReactNoop.batchedUpdates(() => {
+          ReactNoop.render(<span prop="a:2" />);
+          ReactNoop.render(<span prop="a:3" />);
+          throw new Error('Hello');
+        });
+      });
+    }).toThrow('Hello');
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a:3" />);
+  });
+
+  it('can schedule updates after uncaught error in render on mount', async () => {
+    function BrokenRender({unused}) {
+      Scheduler.log('BrokenRender');
+      throw new Error('Hello');
+    }
+
+    function Foo({unused}) {
+      Scheduler.log('Foo');
+      return null;
+    }
+
+    ReactNoop.render(<BrokenRender />);
+    await waitForThrow('Hello');
+    ReactNoop.render(<Foo />);
+    assertLog([
+      'BrokenRender',
+      // React retries one more time
+      'BrokenRender',
+      // Errored again on retry
+    ]);
+    await waitForAll(['Foo']);
+  });
+
+  it('can schedule updates after uncaught error in render on update', async () => {
+    function BrokenRender({shouldThrow}) {
+      Scheduler.log('BrokenRender');
+      if (shouldThrow) {
+        throw new Error('Hello');
+      }
+      return null;
+    }
+
+    function Foo({unused}) {
+      Scheduler.log('Foo');
+      return null;
+    }
+
+    ReactNoop.render(<BrokenRender shouldThrow={false} />);
+    await waitForAll(['BrokenRender']);
+
+    ReactNoop.render(<BrokenRender shouldThrow={true} />);
+    await waitForThrow('Hello');
+    assertLog([
+      'BrokenRender',
+      // React retries one more time
+      'BrokenRender',
+      // Errored again on retry
+    ]);
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['Foo']);
+  });
+
+  it('can schedule updates after uncaught error during unmounting', async () => {
+    class BrokenComponentWillUnmount extends React.Component {
+      render() {
+        return <div />;
+      }
+      componentWillUnmount() {
+        throw new Error('Hello');
+      }
+    }
+
+    function Foo() {
+      Scheduler.log('Foo');
+      return null;
+    }
+
+    ReactNoop.render(<BrokenComponentWillUnmount />);
+    await waitForAll([]);
+
+    ReactNoop.render(<div />);
+    await waitForThrow('Hello');
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['Foo']);
+  });
+
+  it('should not attempt to recover an unmounting error boundary', async () => {
+    class Parent extends React.Component {
+      componentWillUnmount() {
+        Scheduler.log('Parent componentWillUnmount');
+      }
+      render() {
+        return <Boundary />;
+      }
+    }
+
+    class Boundary extends React.Component {
+      componentDidCatch(e) {
+        Scheduler.log(`Caught error: ${e.message}`);
+      }
+      render() {
+        return <ThrowsOnUnmount />;
+      }
+    }
+
+    class ThrowsOnUnmount extends React.Component {
+      componentWillUnmount() {
+        Scheduler.log('ThrowsOnUnmount componentWillUnmount');
+        throw new Error('unmount error');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    ReactNoop.render(<Parent />);
+    await waitForAll([]);
+
+    // Because the error boundary is also unmounting,
+    // an error in ThrowsOnUnmount should be rethrown.
+    ReactNoop.render(null);
+    await waitForThrow('unmount error');
+    await assertLog([
+      'Parent componentWillUnmount',
+      'ThrowsOnUnmount componentWillUnmount',
+    ]);
+
+    ReactNoop.render(<Parent />);
+  });
+
+  it('can unmount an error boundary before it is handled', async () => {
+    let parent;
+
+    class Parent extends React.Component {
+      state = {step: 0};
+      render() {
+        parent = this;
+        return this.state.step === 0 ? <Boundary /> : null;
+      }
+    }
+
+    class Boundary extends React.Component {
+      componentDidCatch() {}
+      render() {
+        return <Child />;
+      }
+    }
+
+    class Child extends React.Component {
+      componentDidUpdate() {
+        parent.setState({step: 1});
+        throw new Error('update error');
+      }
+      render() {
+        return null;
+      }
+    }
+
+    ReactNoop.render(<Parent />);
+    await waitForAll([]);
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<Parent />);
+    });
+  });
+
+  it('continues work on other roots despite caught errors', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return (
+            <span prop={`Caught an error: ${this.state.error.message}.`} />
+          );
+        }
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender(props) {
+      throw new Error('Hello');
+    }
+
+    ReactNoop.renderToRootWithID(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      'a',
+    );
+    ReactNoop.renderToRootWithID(<span prop="b:1" />, 'b');
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(
+      <span prop="Caught an error: Hello." />,
+    );
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:1" />);
+  });
+
+  it('continues work on other roots despite uncaught errors', async () => {
+    function BrokenRender(props) {
+      throw new Error(props.label);
+    }
+
+    ReactNoop.renderToRootWithID(<BrokenRender label="a" />, 'a');
+    await waitForThrow('a');
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+
+    ReactNoop.renderToRootWithID(<BrokenRender label="a" />, 'a');
+    ReactNoop.renderToRootWithID(<span prop="b:2" />, 'b');
+    await waitForThrow('a');
+
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:2" />);
+
+    ReactNoop.renderToRootWithID(<span prop="a:3" />, 'a');
+    ReactNoop.renderToRootWithID(<BrokenRender label="b" />, 'b');
+    await waitForThrow('b');
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:3" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(null);
+
+    ReactNoop.renderToRootWithID(<span prop="a:4" />, 'a');
+    ReactNoop.renderToRootWithID(<BrokenRender label="b" />, 'b');
+    ReactNoop.renderToRootWithID(<span prop="c:4" />, 'c');
+    await waitForThrow('b');
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:4" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(<span prop="c:4" />);
+
+    ReactNoop.renderToRootWithID(<span prop="a:5" />, 'a');
+    ReactNoop.renderToRootWithID(<span prop="b:5" />, 'b');
+    ReactNoop.renderToRootWithID(<span prop="c:5" />, 'c');
+    ReactNoop.renderToRootWithID(<span prop="d:5" />, 'd');
+    ReactNoop.renderToRootWithID(<BrokenRender label="e" />, 'e');
+    await waitForThrow('e');
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:5" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:5" />);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(<span prop="c:5" />);
+    expect(ReactNoop.getChildrenAsJSX('d')).toEqual(<span prop="d:5" />);
+    expect(ReactNoop.getChildrenAsJSX('e')).toEqual(null);
+
+    ReactNoop.renderToRootWithID(<BrokenRender label="a" />, 'a');
+    await waitForThrow('a');
+
+    ReactNoop.renderToRootWithID(<span prop="b:6" />, 'b');
+    ReactNoop.renderToRootWithID(<BrokenRender label="c" />, 'c');
+    await waitForThrow('c');
+
+    ReactNoop.renderToRootWithID(<span prop="d:6" />, 'd');
+    ReactNoop.renderToRootWithID(<BrokenRender label="e" />, 'e');
+    ReactNoop.renderToRootWithID(<span prop="f:6" />, 'f');
+    await waitForThrow('e');
+
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:6" />);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('d')).toEqual(<span prop="d:6" />);
+    expect(ReactNoop.getChildrenAsJSX('e')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('f')).toEqual(<span prop="f:6" />);
+
+    ReactNoop.unmountRootWithID('a');
+    ReactNoop.unmountRootWithID('b');
+    ReactNoop.unmountRootWithID('c');
+    ReactNoop.unmountRootWithID('d');
+    ReactNoop.unmountRootWithID('e');
+    ReactNoop.unmountRootWithID('f');
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('d')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('e')).toEqual(null);
+    expect(ReactNoop.getChildrenAsJSX('f')).toEqual(null);
+  });
+
+  // NOTE: When legacy context is removed, it's probably fine to just delete
+  // this test. There's plenty of test coverage of stack unwinding in general
+  // because it's used for new context, suspense, and many other features.
+  // It has to be tested independently for each feature anyway. So although it
+  // doesn't look like it, this test is specific to legacy context.
+  // @gate !disableLegacyContext && !disableLegacyContextForFunctionComponents
+  it('unwinds the context stack correctly on error', async () => {
+    class Provider extends React.Component {
+      static childContextTypes = {message: PropTypes.string};
+      static contextTypes = {message: PropTypes.string};
+      getChildContext() {
+        return {
+          message: (this.context.message || '') + this.props.message,
+        };
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function Connector(props, context) {
+      return <span prop={context.message} />;
+    }
+
+    Connector.contextTypes = {
+      message: PropTypes.string,
+    };
+
+    function BadRender() {
+      throw new Error('render error');
+    }
+
+    class Boundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        return (
+          <Provider message="b">
+            <Provider message="c">
+              <Provider message="d">
+                <Provider message="e">
+                  {!this.state.error && <BadRender />}
+                </Provider>
+              </Provider>
+            </Provider>
+          </Provider>
+        );
+      }
+    }
+
+    ReactNoop.render(
+      <Provider message="a">
+        <Boundary />
+        <Connector />
+      </Provider>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Provider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Provider (at **)',
+      'Provider uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Provider (at **)',
+      'Connector uses the legacy contextTypes API which will be removed soon. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Connector (at **)',
+    ]);
+
+    // If the context stack does not unwind, span will get 'abcde'
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="a" />);
+  });
+
+  it('catches reconciler errors in a boundary during mounting', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <span prop={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+    const InvalidType = undefined;
+    function BrokenRender(props) {
+      return <InvalidType />;
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+    );
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Element type is invalid: expected a string (for built-in components) or ' +
+          'a class/function (for composite components) but got: undefined.' +
+          (__DEV__
+            ? " You likely forgot to export your component from the file it's " +
+              'defined in, or you might have mixed up default and named imports.' +
+              '\n\nCheck the render method of `BrokenRender`.'
+            : '')
+        }
+      />,
+    );
+  });
+
+  it('catches reconciler errors in a boundary during update', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <span prop={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const InvalidType = undefined;
+    function BrokenRender(props) {
+      return props.fail ? <InvalidType /> : <span />;
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender fail={false} />
+      </ErrorBoundary>,
+    );
+    await waitForAll([]);
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender fail={true} />
+      </ErrorBoundary>,
+    );
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Element type is invalid: expected a string (for built-in components) or ' +
+          'a class/function (for composite components) but got: undefined.' +
+          (__DEV__
+            ? " You likely forgot to export your component from the file it's " +
+              'defined in, or you might have mixed up default and named imports.' +
+              '\n\nCheck the render method of `BrokenRender`.'
+            : '')
+        }
+      />,
+    );
+  });
+
+  it('recovers from uncaught reconciler errors', async () => {
+    const InvalidType = undefined;
+    ReactNoop.render(<InvalidType />);
+
+    await waitForThrow(
+      'Element type is invalid: expected a string (for built-in components) or ' +
+        'a class/function (for composite components) but got: undefined.' +
+        (__DEV__
+          ? " You likely forgot to export your component from the file it's " +
+            'defined in, or you might have mixed up default and named imports.'
+          : ''),
+    );
+
+    ReactNoop.render(<span prop="hi" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="hi" />);
+  });
+
+  it('unmounts components with uncaught errors', async () => {
+    let inst;
+
+    class BrokenRenderAndUnmount extends React.Component {
+      state = {fail: false};
+      componentWillUnmount() {
+        Scheduler.log('BrokenRenderAndUnmount componentWillUnmount');
+      }
+      render() {
+        inst = this;
+        if (this.state.fail) {
+          throw new Error('Hello.');
+        }
+        return null;
+      }
+    }
+
+    class Parent extends React.Component {
+      componentWillUnmount() {
+        Scheduler.log('Parent componentWillUnmount [!]');
+        throw new Error('One does not simply unmount me.');
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    ReactNoop.render(
+      <Parent>
+        <Parent>
+          <BrokenRenderAndUnmount />
+        </Parent>
+      </Parent>,
+    );
+    await waitForAll([]);
+
+    let aggregateError;
+    try {
+      await act(() => {
+        ReactNoop.flushSync(() => {
+          inst.setState({fail: true});
+        });
+      });
+    } catch (e) {
+      aggregateError = e;
+    }
+
+    assertLog([
+      // Attempt to clean up.
+      // Errors in parents shouldn't stop children from unmounting.
+      'Parent componentWillUnmount [!]',
+      'Parent componentWillUnmount [!]',
+      'BrokenRenderAndUnmount componentWillUnmount',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // React threw both errors as a single AggregateError
+    const errors = aggregateError.errors;
+    expect(errors.length).toBe(3);
+    expect(errors[0].message).toBe('Hello.');
+    expect(errors[1].message).toBe('One does not simply unmount me.');
+    expect(errors[2].message).toBe('One does not simply unmount me.');
+  });
+
+  it('does not interrupt unmounting if detaching a ref throws', async () => {
+    class Bar extends React.Component {
+      componentWillUnmount() {
+        Scheduler.log('Bar unmount');
+      }
+      render() {
+        return <span prop="Bar" />;
+      }
+    }
+
+    function barRef(inst) {
+      if (inst === null) {
+        Scheduler.log('barRef detach');
+        throw new Error('Detach error');
+      }
+      Scheduler.log('barRef attach');
+    }
+
+    function Foo(props) {
+      return <div>{props.hide ? null : <Bar ref={barRef} />}</div>;
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['barRef attach']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Bar" />
+      </div>,
+    );
+
+    // Unmount
+    ReactNoop.render(<Foo hide={true} />);
+    await waitForThrow('Detach error');
+    assertLog([
+      'barRef detach',
+      // Bar should unmount even though its ref threw an error while detaching
+      'Bar unmount',
+    ]);
+    // Because there was an error, entire tree should unmount
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('handles error thrown by host config while working on failed root', async () => {
+    ReactNoop.render(<errorInBeginPhase />);
+    await waitForThrow('Error in host config.');
+  });
+
+  it('handles error thrown by top-level callback', async () => {
+    ReactNoop.render(<div />, () => {
+      throw new Error('Error!');
+    });
+    await waitForThrow('Error!');
+  });
+
+  it('error boundaries capture non-errors', async () => {
+    spyOnProd(console, 'error').mockImplementation(() => {});
+    spyOnDev(console, 'error').mockImplementation(() => {});
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        // Should not be called
+        Scheduler.log('componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary (catch)');
+          return (
+            <span
+              prop={`Caught an error: ${this.state.error.nonStandardMessage}`}
+            />
+          );
+        }
+        Scheduler.log('ErrorBoundary (try)');
+        return this.props.children;
+      }
+    }
+
+    function Indirection({children}) {
+      Scheduler.log('Indirection');
+      return children;
+    }
+
+    const notAnError = {nonStandardMessage: 'oops'};
+    function BadRender({unused}) {
+      Scheduler.log('BadRender');
+      throw notAnError;
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <Indirection>
+          <BadRender />
+        </Indirection>
+      </ErrorBoundary>,
+    );
+
+    await waitForAll([
+      'ErrorBoundary (try)',
+      'Indirection',
+      'BadRender',
+
+      // React retries one more time
+      'ErrorBoundary (try)',
+      'Indirection',
+      'BadRender',
+
+      // Errored again on retry. Now handle it.
+      'componentDidCatch',
+      'ErrorBoundary (catch)',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops" />,
+    );
+
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.mock.calls[0][1]).toBe(notAnError);
+      expect(console.error.mock.calls[0][2]).toContain(
+        'The above error occurred in the <BadRender> component',
+      );
+    } else {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.mock.calls[0][0]).toBe(notAnError);
+    }
+  });
+
+  // TODO: Error boundary does not catch promises
+
+  it('continues working on siblings of a component that throws', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        Scheduler.log('componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary (catch)');
+          return <ErrorMessage error={this.state.error} />;
+        }
+        Scheduler.log('ErrorBoundary (try)');
+        return this.props.children;
+      }
+    }
+
+    function ErrorMessage({error}) {
+      Scheduler.log('ErrorMessage');
+      return <span prop={`Caught an error: ${error.message}`} />;
+    }
+
+    function BadRenderSibling({unused}) {
+      Scheduler.log('BadRenderSibling');
+      return null;
+    }
+
+    function BadRender({unused}) {
+      Scheduler.log('throw');
+      throw new Error('oops!');
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BadRender />
+        <BadRenderSibling />
+        <BadRenderSibling />
+      </ErrorBoundary>,
+    );
+
+    await waitForAll([
+      'ErrorBoundary (try)',
+      'throw',
+      // Continue rendering siblings after BadRender throws
+
+      // React retries one more time
+      'ErrorBoundary (try)',
+      'throw',
+
+      // Errored again on retry. Now handle it.
+      'componentDidCatch',
+      'ErrorBoundary (catch)',
+      'ErrorMessage',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
+  });
+
+  it('calls the correct lifecycles on the error boundary after catching an error (mixed)', async () => {
+    // This test seems a bit contrived, but it's based on an actual regression
+    // where we checked for the existence of didUpdate instead of didMount, and
+    // didMount was not defined.
+    function BadRender({unused}) {
+      Scheduler.log('throw');
+      throw new Error('oops!');
+    }
+
+    class Parent extends React.Component {
+      state = {error: null, other: false};
+      componentDidCatch(error) {
+        Scheduler.log('did catch');
+        this.setState({error});
+      }
+      componentDidUpdate() {
+        Scheduler.log('did update');
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('render error message');
+          return <span prop={`Caught an error: ${this.state.error.message}`} />;
+        }
+        Scheduler.log('render');
+        return <BadRender />;
+      }
+    }
+
+    ReactNoop.render(<Parent step={1} />);
+    await waitFor([
+      'render',
+      'throw',
+      'render',
+      'throw',
+      'did catch',
+      'render error message',
+      'did update',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: oops!" />,
+    );
+  });
+
+  it('provides component stack to the error boundary with componentDidCatch', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null, errorInfo: null};
+      componentDidCatch(error, errorInfo) {
+        this.setState({error, errorInfo});
+      }
+      render() {
+        if (this.state.errorInfo) {
+          Scheduler.log('render error message');
+          return (
+            <span
+              prop={`Caught an error:${normalizeCodeLocInfo(
+                this.state.errorInfo.componentStack,
+              )}.`}
+            />
+          );
+        }
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender(props) {
+      throw new Error('Hello');
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+    );
+    await waitForAll(['render error message']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Caught an error:\n' +
+          '    in BrokenRender (at **)\n' +
+          '    in ErrorBoundary (at **).'
+        }
+      />,
+    );
+  });
+
+  it('does not provide component stack to the error boundary with getDerivedStateFromError', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error, errorInfo) {
+        expect(errorInfo).toBeUndefined();
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <span prop={`Caught an error: ${this.state.error.message}`} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender(props) {
+      throw new Error('Hello');
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught an error: Hello" />,
+    );
+  });
+
+  it('provides component stack even if overriding prepareStackTrace', async () => {
+    Error.prepareStackTrace = function (error, callsites) {
+      const stack = ['An error occurred:', error.message];
+      for (let i = 0; i < callsites.length; i++) {
+        const callsite = callsites[i];
+        stack.push(
+          '\t' + callsite.getFunctionName(),
+          '\t\tat ' + callsite.getFileName(),
+          '\t\ton line ' + callsite.getLineNumber(),
+        );
+      }
+
+      return stack.join('\n');
+    };
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null, errorInfo: null};
+      componentDidCatch(error, errorInfo) {
+        this.setState({error, errorInfo});
+      }
+      render() {
+        if (this.state.errorInfo) {
+          Scheduler.log('render error message');
+          return (
+            <span
+              prop={`Caught an error:${normalizeCodeLocInfo(
+                this.state.errorInfo.componentStack,
+              )}.`}
+            />
+          );
+        }
+        return this.props.children;
+      }
+    }
+
+    function BrokenRender(props) {
+      throw new Error('Hello');
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+    );
+    await waitForAll(['render error message']);
+    Error.prepareStackTrace = undefined;
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span
+        prop={
+          'Caught an error:\n' +
+          '    in BrokenRender (at **)\n' +
+          '    in ErrorBoundary (at **).'
+        }
+      />,
+    );
+  });
+
+  it('uncaught errors should be discarded if the render is aborted', async () => {
+    const root = ReactNoop.createRoot();
+
+    function Oops({unused}) {
+      Scheduler.log('Oops');
+      throw Error('Oops');
+    }
+
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<Oops />);
+      });
+
+      // Render past the component that throws, then yield.
+      await waitFor(['Oops']);
+      expect(root).toMatchRenderedOutput(null);
+      // Interleaved update. When the root completes, instead of throwing the
+      // error, it should try rendering again. This update will cause it to
+      // recover gracefully.
+      React.startTransition(() => {
+        root.render('Everything is fine.');
+      });
+    });
+
+    // Should finish without throwing.
+    expect(root).toMatchRenderedOutput('Everything is fine.');
+  });
+
+  it('uncaught errors are discarded if the render is aborted, case 2', async () => {
+    const {useState} = React;
+    const root = ReactNoop.createRoot();
+
+    let setShouldThrow;
+    function Oops() {
+      const [shouldThrow, _setShouldThrow] = useState(false);
+      setShouldThrow = _setShouldThrow;
+      if (shouldThrow) {
+        throw Error('Oops');
+      }
+      return null;
+    }
+
+    function AllGood() {
+      Scheduler.log('Everything is fine.');
+      return 'Everything is fine.';
+    }
+
+    await act(() => {
+      root.render(<Oops />);
+    });
+
+    await act(async () => {
+      // Schedule a default pri and a low pri update on the root.
+      root.render(<Oops />);
+      React.startTransition(() => {
+        root.render(<AllGood />);
+      });
+
+      // Render through just the default pri update. The low pri update remains on
+      // the queue.
+      await waitFor(['Everything is fine.']);
+
+      // Schedule a discrete update on a child that triggers an error.
+      // The root should capture this error. But since there's still a pending
+      // update on the root, the error should be suppressed.
+      ReactNoop.discreteUpdates(() => {
+        setShouldThrow(true);
+      });
+    });
+    // Should render the final state without throwing the error.
+    assertLog(['Everything is fine.']);
+    expect(root).toMatchRenderedOutput('Everything is fine.');
+  });
+
+  it("does not infinite loop if there's a render phase update in the same render as an error", async () => {
+    // Some React features may schedule a render phase update as an
+    // implementation detail. When an error is accompanied by a render phase
+    // update, we assume that it comes from React internals, because render
+    // phase updates triggered from userspace are not allowed (we log a
+    // warning). So we keep attempting to recover until no more opaque
+    // identifiers need to be upgraded. However, we should give up after some
+    // point to prevent an infinite loop in the case where there is (by
+    // accident) a render phase triggered from userspace.
+
+    spyOnDev(console, 'error').mockImplementation(() => {});
+    spyOnDev(console, 'warn').mockImplementation(() => {});
+
+    let numberOfThrows = 0;
+
+    let setStateInRenderPhase;
+    function Child() {
+      const [, setState] = React.useState(0);
+      setStateInRenderPhase = setState;
+      return 'All good';
+    }
+
+    function App({shouldThrow}) {
+      if (shouldThrow) {
+        setStateInRenderPhase();
+        numberOfThrows++;
+        throw new Error('Oops!');
+      }
+      return <Child />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App shouldThrow={false} />);
+    });
+    expect(root).toMatchRenderedOutput('All good');
+
+    let error;
+    try {
+      await act(() => {
+        root.render(<App shouldThrow={true} />);
+      });
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error.message).toBe('Oops!');
+    expect(numberOfThrows < 100).toBe(true);
+
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.mock.calls[0][0]).toContain(
+        'Cannot update a component (`%s`) while rendering a different component',
+      );
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn.mock.calls[0][1]).toContain(
+        'An error occurred in the <App> component',
+      );
+    }
+  });
+
+  if (global.__PERSISTENT__) {
+    it('regression test: should fatal if error is thrown at the root', async () => {
+      const root = ReactNoop.createRoot();
+      root.render('Error when completing root');
+      await waitForThrow('Error when completing root');
+    });
+  }
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js
new file mode 100644
index 00000000000..3dde9c75bf0
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let waitForAll;
+let uncaughtExceptionMock;
+
+async function fakeAct(cb) {
+  // We don't use act/waitForThrow here because we want to observe how errors are reported for real.
+  await cb();
+  Scheduler.unstable_flushAll();
+}
+
+describe('ReactIncrementalErrorLogging', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  // Note: in this test file we won't be using assertConsoleDev() matchers
+  // because they filter out precisely the messages we want to test for.
+  let oldConsoleWarn;
+  let oldConsoleError;
+  beforeEach(() => {
+    oldConsoleWarn = console.warn;
+    oldConsoleError = console.error;
+    console.warn = jest.fn();
+    console.error = jest.fn();
+    uncaughtExceptionMock = jest.fn();
+    process.on('uncaughtException', uncaughtExceptionMock);
+  });
+
+  afterEach(() => {
+    console.warn = oldConsoleWarn;
+    console.error = oldConsoleError;
+    process.off('uncaughtException', uncaughtExceptionMock);
+    oldConsoleWarn = null;
+    oldConsoleError = null;
+    uncaughtExceptionMock = null;
+  });
+
+  it('should log errors that occur during the begin phase', async () => {
+    class ErrorThrowingComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        throw new Error('constructor error');
+      }
+      render() {
+        return <div />;
+      }
+    }
+    await fakeAct(() => {
+      ReactNoop.render(
+        <div>
+          <span>
+            <ErrorThrowingComponent />
+          </span>
+        </div>,
+      );
+    });
+    expect(uncaughtExceptionMock).toHaveBeenCalledTimes(1);
+    expect(uncaughtExceptionMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: 'constructor error',
+      }),
+    );
+    if (__DEV__) {
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringContaining('%s'),
+        expect.stringContaining(
+          'An error occurred in the <ErrorThrowingComponent> component.',
+        ),
+        expect.stringContaining(
+          'Consider adding an error boundary to your tree ' +
+            'to customize error handling behavior.',
+        ),
+        // The component stack is not added without the polyfill/devtools.
+        // expect.stringMatching(
+        //  new RegExp(
+        //    '\\s+(in|at) ErrorThrowingComponent'
+        //  ),
+        // ),
+      );
+    }
+  });
+
+  it('should log errors that occur during the commit phase', async () => {
+    class ErrorThrowingComponent extends React.Component {
+      componentDidMount() {
+        throw new Error('componentDidMount error');
+      }
+      render() {
+        return <div />;
+      }
+    }
+    await fakeAct(() => {
+      ReactNoop.render(
+        <div>
+          <span>
+            <ErrorThrowingComponent />
+          </span>
+        </div>,
+      );
+    });
+    expect(uncaughtExceptionMock).toHaveBeenCalledTimes(1);
+    expect(uncaughtExceptionMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: 'componentDidMount error',
+      }),
+    );
+    if (__DEV__) {
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringContaining('%s'),
+        expect.stringContaining(
+          'An error occurred in the <ErrorThrowingComponent> component.',
+        ),
+        expect.stringContaining(
+          'Consider adding an error boundary to your tree ' +
+            'to customize error handling behavior.',
+        ),
+        // The component stack is not added without the polyfill/devtools.
+        // expect.stringMatching(
+        //   new RegExp(
+        //     '\\s+(in|at) ErrorThrowingComponent'
+        //   ),
+        // ),
+      );
+    }
+  });
+
+  it('should ignore errors thrown in log method to prevent cycle', async () => {
+    const logCapturedErrorCalls = [];
+    console.error.mockImplementation(error => {
+      // Test what happens when logging itself is buggy.
+      logCapturedErrorCalls.push(error);
+      throw new Error('logCapturedError error');
+    });
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        return this.state.error ? null : this.props.children;
+      }
+    }
+    class ErrorThrowingComponent extends React.Component {
+      render() {
+        throw new Error('render error');
+      }
+    }
+    await fakeAct(() => {
+      ReactNoop.render(
+        <div>
+          <ErrorBoundary>
+            <span>
+              <ErrorThrowingComponent />
+            </span>
+          </ErrorBoundary>
+        </div>,
+      );
+    });
+    expect(logCapturedErrorCalls.length).toBe(1);
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringContaining('%o'),
+        expect.objectContaining({
+          message: 'render error',
+        }),
+        expect.stringContaining(
+          'The above error occurred in the <ErrorThrowingComponent> component.',
+        ),
+        expect.stringContaining(
+          'React will try to recreate this component tree from scratch ' +
+            'using the error boundary you provided, ErrorBoundary.',
+        ),
+        // The component stack is not added without the polyfill/devtools.
+        // expect.stringMatching(
+        //   new RegExp(
+        //     '\\s+(in|at) ErrorThrowingComponent'
+        //   ),
+        // ),
+      );
+    } else {
+      expect(logCapturedErrorCalls[0]).toEqual(
+        expect.objectContaining({
+          message: 'render error',
+        }),
+      );
+    }
+    // The error thrown in logCapturedError should be rethrown with a clean stack
+    expect(() => {
+      jest.runAllTimers();
+    }).toThrow('logCapturedError error');
+  });
+
+  it('resets instance variables before unmounting failed node', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        return this.state.error ? null : this.props.children;
+      }
+    }
+    class Foo extends React.Component {
+      state = {step: 0};
+      componentDidMount() {
+        this.setState({step: 1});
+      }
+      componentWillUnmount() {
+        Scheduler.log('componentWillUnmount: ' + this.state.step);
+      }
+      render() {
+        Scheduler.log('render: ' + this.state.step);
+        if (this.state.step > 0) {
+          throw new Error('oops');
+        }
+        return null;
+      }
+    }
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <Foo />
+      </ErrorBoundary>,
+    );
+    await waitForAll(
+      [
+        'render: 0',
+
+        'render: 1',
+
+        // Retry one more time before handling error
+        'render: 1',
+
+        'componentWillUnmount: 0',
+      ].filter(Boolean),
+    );
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringContaining('%o'),
+        expect.objectContaining({
+          message: 'oops',
+        }),
+        expect.stringContaining(
+          'The above error occurred in the <Foo> component.',
+        ),
+        expect.stringContaining(
+          'React will try to recreate this component tree from scratch ' +
+            'using the error boundary you provided, ErrorBoundary.',
+        ),
+        // The component stack is not added without the polyfill/devtools.
+        // expect.stringMatching(
+        //   new RegExp('\\s+(in|at) Foo')
+        // ),
+      );
+    } else {
+      expect(console.error).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: 'oops',
+        }),
+      );
+    }
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorReplay-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorReplay-test.js
new file mode 100644
index 00000000000..ed4317d9570
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorReplay-test.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let waitForAll;
+let waitForThrow;
+
+describe('ReactIncrementalErrorReplay', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForThrow = InternalTestUtils.waitForThrow;
+  });
+
+  it('should fail gracefully on error in the host environment', async () => {
+    ReactNoop.render(<errorInBeginPhase />);
+    await waitForThrow('Error in host config.');
+  });
+
+  it("should ignore error if it doesn't throw on retry", async () => {
+    let didInit = false;
+
+    function badLazyInit() {
+      const needsInit = !didInit;
+      didInit = true;
+      if (needsInit) {
+        throw new Error('Hi');
+      }
+    }
+
+    class App extends React.Component {
+      render() {
+        badLazyInit();
+        return <div />;
+      }
+    }
+    ReactNoop.render(<App />);
+    await waitForAll([]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
new file mode 100644
index 00000000000..63ff106bf84
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let waitFor;
+let waitForAll;
+
+describe('ReactIncrementalReflection', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  function div(...children) {
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
+    );
+    return {type: 'div', children, prop: undefined, hidden: false};
+  }
+
+  function span(prop) {
+    return {type: 'span', children: [], prop, hidden: false};
+  }
+
+  it('finds no node before insertion and correct node before deletion', async () => {
+    let classInstance = null;
+
+    function findInstance(inst) {
+      // We ignore warnings fired by findInstance because we are testing
+      // that the actual behavior still works as expected even though it
+      // is deprecated.
+      const oldConsoleError = console.error;
+      console.error = jest.fn();
+      try {
+        return ReactNoop.findInstance(inst);
+      } finally {
+        console.error = oldConsoleError;
+      }
+    }
+
+    class Component extends React.Component {
+      UNSAFE_componentWillMount() {
+        classInstance = this;
+        Scheduler.log(['componentWillMount', findInstance(this)]);
+      }
+      componentDidMount() {
+        Scheduler.log(['componentDidMount', findInstance(this)]);
+      }
+      UNSAFE_componentWillUpdate() {
+        Scheduler.log(['componentWillUpdate', findInstance(this)]);
+      }
+      componentDidUpdate() {
+        Scheduler.log(['componentDidUpdate', findInstance(this)]);
+      }
+      componentWillUnmount() {
+        Scheduler.log(['componentWillUnmount', findInstance(this)]);
+      }
+      render() {
+        Scheduler.log('render');
+        return this.props.step < 2 ? (
+          <span ref={ref => (this.span = ref)} />
+        ) : this.props.step === 2 ? (
+          <div ref={ref => (this.div = ref)} />
+        ) : this.props.step === 3 ? null : this.props.step === 4 ? (
+          <div ref={ref => (this.span = ref)} />
+        ) : null;
+      }
+    }
+
+    function Sibling() {
+      // Sibling is used to assert that we've rendered past the first component.
+      Scheduler.log('render sibling');
+      return <span />;
+    }
+
+    function Foo(props) {
+      return [<Component key="a" step={props.step} />, <Sibling key="b" />];
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo step={0} />);
+    });
+    // Flush past Component but don't complete rendering everything yet.
+    await waitFor([['componentWillMount', null], 'render', 'render sibling']);
+
+    expect(classInstance).toBeDefined();
+    // The instance has been complete but is still not committed so it should
+    // not find any host nodes in it.
+    expect(findInstance(classInstance)).toBe(null);
+
+    await waitForAll([['componentDidMount', span()]]);
+
+    const hostSpan = classInstance.span;
+    expect(hostSpan).toBeDefined();
+
+    expect(findInstance(classInstance)).toBe(hostSpan);
+
+    // Flush next step which will cause an update but not yet render a new host
+    // node.
+    ReactNoop.render(<Foo step={1} />);
+    await waitForAll([
+      ['componentWillUpdate', hostSpan],
+      'render',
+      'render sibling',
+      ['componentDidUpdate', hostSpan],
+    ]);
+
+    expect(ReactNoop.findInstance(classInstance)).toBe(hostSpan);
+
+    // The next step will render a new host node but won't get committed yet.
+    // We expect this to mutate the original Fiber.
+    React.startTransition(() => {
+      ReactNoop.render(<Foo step={2} />);
+    });
+    await waitFor([
+      ['componentWillUpdate', hostSpan],
+      'render',
+      'render sibling',
+    ]);
+
+    // This should still be the host span.
+    expect(ReactNoop.findInstance(classInstance)).toBe(hostSpan);
+
+    // When we finally flush the tree it will get committed.
+    await waitForAll([['componentDidUpdate', div()]]);
+
+    const hostDiv = classInstance.div;
+    expect(hostDiv).toBeDefined();
+    expect(hostSpan).not.toBe(hostDiv);
+
+    // We should now find the new host node.
+    expect(ReactNoop.findInstance(classInstance)).toBe(hostDiv);
+
+    // Render to null but don't commit it yet.
+    React.startTransition(() => {
+      ReactNoop.render(<Foo step={3} />);
+    });
+    await waitFor([
+      ['componentWillUpdate', hostDiv],
+      'render',
+      'render sibling',
+    ]);
+
+    // This should still be the host div since the deletion is not committed.
+    expect(ReactNoop.findInstance(classInstance)).toBe(hostDiv);
+
+    await waitForAll([['componentDidUpdate', null]]);
+
+    // This should still be the host div since the deletion is not committed.
+    expect(ReactNoop.findInstance(classInstance)).toBe(null);
+
+    // Render a div again
+    ReactNoop.render(<Foo step={4} />);
+    await waitForAll([
+      ['componentWillUpdate', null],
+      'render',
+      'render sibling',
+      ['componentDidUpdate', div()],
+    ]);
+
+    // Unmount the component.
+    ReactNoop.render([]);
+    await waitForAll([['componentWillUnmount', hostDiv]]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
new file mode 100644
index 00000000000..8c00ec74120
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -0,0 +1,316 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let act;
+let waitForAll;
+let waitFor;
+let assertLog;
+let waitForPaint;
+
+describe('ReactIncrementalScheduling', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  it('schedules and flushes deferred work', async () => {
+    ReactNoop.render(<span prop="1" />);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="1" />);
+  });
+
+  it('searches for work on other roots once the current root completes', async () => {
+    ReactNoop.renderToRootWithID(<span prop="a:1" />, 'a');
+    ReactNoop.renderToRootWithID(<span prop="b:1" />, 'b');
+    ReactNoop.renderToRootWithID(<span prop="c:1" />, 'c');
+
+    await waitForAll([]);
+
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual(<span prop="a:1" />);
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual(<span prop="b:1" />);
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual(<span prop="c:1" />);
+  });
+
+  it('schedules top-level updates in order of priority', async () => {
+    // Initial render.
+    ReactNoop.render(<span prop={1} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+
+    ReactNoop.batchedUpdates(() => {
+      ReactNoop.render(<span prop={5} />);
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(<span prop={2} />);
+        ReactNoop.render(<span prop={3} />);
+        ReactNoop.render(<span prop={4} />);
+      });
+    });
+    // The sync updates flush first.
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={4} />);
+
+    // The terminal value should be the last update that was scheduled,
+    // regardless of priority. In this case, that's the last sync update.
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={4} />);
+  });
+
+  it('schedules top-level updates with same priority in order of insertion', async () => {
+    // Initial render.
+    ReactNoop.render(<span prop={1} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+
+    ReactNoop.render(<span prop={2} />);
+    ReactNoop.render(<span prop={3} />);
+    ReactNoop.render(<span prop={4} />);
+    ReactNoop.render(<span prop={5} />);
+
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
+  });
+
+  it('works on deferred roots in the order they were scheduled', async () => {
+    const {useEffect} = React;
+    function Text({text}) {
+      useEffect(() => {
+        Scheduler.log(text);
+      }, [text]);
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(<Text text="a:1" />, 'a');
+      ReactNoop.renderToRootWithID(<Text text="b:1" />, 'b');
+      ReactNoop.renderToRootWithID(<Text text="c:1" />, 'c');
+    });
+    assertLog(['a:1', 'b:1', 'c:1']);
+
+    expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:1');
+    expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:1');
+    expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:1');
+
+    // Schedule deferred work in the reverse order
+    await act(async () => {
+      React.startTransition(() => {
+        ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
+        ReactNoop.renderToRootWithID(<Text text="b:2" />, 'b');
+      });
+      // Ensure it starts in the order it was scheduled
+      await waitFor(['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
+
+      React.startTransition(() => {
+        ReactNoop.renderToRootWithID(<Text text="a:2" />, 'a');
+      });
+
+      // Keep performing work in the order it was scheduled
+      await waitFor(['b:2']);
+      expect(ReactNoop.getChildrenAsJSX('a')).toEqual('a:1');
+      expect(ReactNoop.getChildrenAsJSX('b')).toEqual('b:2');
+      expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
+
+      await waitFor(['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', async () => {
+    let instance;
+
+    class Foo extends React.Component {
+      state = {tick: 0};
+
+      componentDidMount() {
+        Scheduler.log(
+          'componentDidMount (before setState): ' + this.state.tick,
+        );
+        this.setState({tick: 1});
+        // We're in a batch. Update hasn't flushed yet.
+        Scheduler.log('componentDidMount (after setState): ' + this.state.tick);
+      }
+
+      componentDidUpdate() {
+        Scheduler.log('componentDidUpdate: ' + this.state.tick);
+        if (this.state.tick === 2) {
+          Scheduler.log(
+            'componentDidUpdate (before setState): ' + this.state.tick,
+          );
+          this.setState({tick: 3});
+          Scheduler.log(
+            'componentDidUpdate (after setState): ' + this.state.tick,
+          );
+          // We're in a batch. Update hasn't flushed yet.
+        }
+      }
+
+      render() {
+        Scheduler.log('render: ' + this.state.tick);
+        instance = this;
+        return <span prop={this.state.tick} />;
+      }
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo />);
+    });
+    // Render without committing
+    await waitFor(['render: 0']);
+
+    // Do one more unit of work to commit
+    expect(ReactNoop.flushNextYield()).toEqual([
+      'componentDidMount (before setState): 0',
+      'componentDidMount (after setState): 0',
+      // If the setState inside componentDidMount were deferred, there would be
+      // no more ops. Because it has Task priority, we get these ops, too:
+      'render: 1',
+      'componentDidUpdate: 1',
+    ]);
+
+    React.startTransition(() => {
+      instance.setState({tick: 2});
+    });
+    await waitFor(['render: 2']);
+    expect(ReactNoop.flushNextYield()).toEqual([
+      'componentDidUpdate: 2',
+      'componentDidUpdate (before setState): 2',
+      'componentDidUpdate (after setState): 2',
+      // If the setState inside componentDidUpdate were deferred, there would be
+      // no more ops. Because it has Task priority, we get these ops, too:
+      'render: 3',
+      'componentDidUpdate: 3',
+    ]);
+  });
+
+  it('can opt-in to async scheduling inside componentDidMount/Update', async () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {tick: 0};
+
+      componentDidMount() {
+        React.startTransition(() => {
+          Scheduler.log(
+            'componentDidMount (before setState): ' + this.state.tick,
+          );
+          this.setState({tick: 1});
+          Scheduler.log(
+            'componentDidMount (after setState): ' + this.state.tick,
+          );
+        });
+      }
+
+      componentDidUpdate() {
+        React.startTransition(() => {
+          Scheduler.log('componentDidUpdate: ' + this.state.tick);
+          if (this.state.tick === 2) {
+            Scheduler.log(
+              'componentDidUpdate (before setState): ' + this.state.tick,
+            );
+            this.setState({tick: 3});
+            Scheduler.log(
+              'componentDidUpdate (after setState): ' + this.state.tick,
+            );
+          }
+        });
+      }
+
+      render() {
+        Scheduler.log('render: ' + this.state.tick);
+        instance = this;
+        return <span prop={this.state.tick} />;
+      }
+    }
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<Foo />);
+    });
+    // The cDM update should not have flushed yet because it has async priority.
+    assertLog([
+      'render: 0',
+      'componentDidMount (before setState): 0',
+      'componentDidMount (after setState): 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+    // Now flush the cDM update.
+    await waitForAll(['render: 1', 'componentDidUpdate: 1']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+
+    React.startTransition(() => {
+      instance.setState({tick: 2});
+    });
+
+    await waitForPaint([
+      'render: 2',
+      'componentDidUpdate: 2',
+      'componentDidUpdate (before setState): 2',
+      'componentDidUpdate (after setState): 2',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+
+    // Now flush the cDU update.
+    await waitForAll(['render: 3', 'componentDidUpdate: 3']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+  });
+
+  it('performs Task work even after time runs out', async () => {
+    class Foo extends React.Component {
+      state = {step: 1};
+      componentDidMount() {
+        this.setState({step: 2}, () => {
+          this.setState({step: 3}, () => {
+            this.setState({step: 4}, () => {
+              this.setState({step: 5});
+            });
+          });
+        });
+      }
+      render() {
+        Scheduler.log('Foo');
+        return <span prop={this.state.step} />;
+      }
+    }
+    React.startTransition(() => {
+      ReactNoop.render(<Foo />);
+    });
+
+    // This should be just enough to complete all the work, but not enough to
+    // commit it.
+    await waitFor(['Foo']);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Do one more unit of work.
+    ReactNoop.flushNextYield();
+    // The updates should all be flushed with Task priority
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
new file mode 100644
index 00000000000..c4473c1774e
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -0,0 +1,1337 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let waitForAll;
+let waitFor;
+let waitForPaint;
+
+describe('ReactIncrementalSideEffects', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('can update child nodes of a host instance', async () => {
+    function Bar(props) {
+      return <span>{props.text}</span>;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          <Bar text={props.text} />
+          {props.text === 'World' ? <Bar text={props.text} /> : null}
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo text="Hello" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Hello</span>
+      </div>,
+    );
+
+    ReactNoop.render(<Foo text="World" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>World</span>
+        <span>World</span>
+      </div>,
+    );
+  });
+
+  it('can update child nodes of a fragment', async function () {
+    function Bar(props) {
+      return <span>{props.text}</span>;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          <Bar text={props.text} />
+          {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}
+          <span prop="test" />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo text="Hello" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Hello</span>
+        <span prop="test" />
+      </div>,
+    );
+
+    ReactNoop.render(<Foo text="World" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>World</span>
+        <span>World</span>
+        <div />
+        <span prop="test" />
+      </div>,
+    );
+
+    ReactNoop.render(<Foo text="Hi" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>Hi</span>
+        <div />
+        <span>Hi</span>
+        <span prop="test" />
+      </div>,
+    );
+  });
+
+  it('can update child nodes rendering into text nodes', async function () {
+    function Bar(props) {
+      return props.text;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          <Bar text={props.text} />
+          {props.text === 'World'
+            ? [<Bar key="a" text={props.text} />, '!']
+            : null}
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo text="Hello" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
+
+    ReactNoop.render(<Foo text="World" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>WorldWorld!</div>);
+  });
+
+  it('can deletes children either components, host or text', async function () {
+    function Bar(props) {
+      return <span prop={props.children} />;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          {props.show
+            ? [<div key="a" />, <Bar key="b">Hello</Bar>, 'World']
+            : []}
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo show={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div />
+        <span prop="Hello" />
+        World
+      </div>,
+    );
+
+    ReactNoop.render(<Foo show={false} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+  });
+
+  it('can delete a child that changes type - implicit keys', async function () {
+    let unmounted = false;
+
+    class ClassComponent extends React.Component {
+      componentWillUnmount() {
+        unmounted = true;
+      }
+      render() {
+        return <span prop="Class" />;
+      }
+    }
+
+    function FunctionComponent(props) {
+      return <span prop="Function" />;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          {props.useClass ? (
+            <ClassComponent />
+          ) : props.useFunction ? (
+            <FunctionComponent />
+          ) : props.useText ? (
+            'Text'
+          ) : null}
+          Trail
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo useClass={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Class" />
+        Trail
+      </div>,
+    );
+
+    expect(unmounted).toBe(false);
+
+    ReactNoop.render(<Foo useFunction={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Function" />
+        Trail
+      </div>,
+    );
+
+    expect(unmounted).toBe(true);
+
+    ReactNoop.render(<Foo useText={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>TextTrail</div>);
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Trail</div>);
+  });
+
+  it('can delete a child that changes type - explicit keys', async function () {
+    let unmounted = false;
+
+    class ClassComponent extends React.Component {
+      componentWillUnmount() {
+        unmounted = true;
+      }
+      render() {
+        return <span prop="Class" />;
+      }
+    }
+
+    function FunctionComponent(props) {
+      return <span prop="Function" />;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          {props.useClass ? (
+            <ClassComponent key="a" />
+          ) : props.useFunction ? (
+            <FunctionComponent key="a" />
+          ) : null}
+          Trail
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo useClass={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Class" />
+        Trail
+      </div>,
+    );
+
+    expect(unmounted).toBe(false);
+
+    ReactNoop.render(<Foo useFunction={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop="Function" />
+        Trail
+      </div>,
+    );
+
+    expect(unmounted).toBe(true);
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div>Trail</div>);
+  });
+
+  it('can delete a child when it unmounts inside a portal', async () => {
+    function Bar(props) {
+      return <span prop={props.children} />;
+    }
+
+    const portalContainer =
+      ReactNoop.getOrCreateRootContainer('portalContainer');
+    function Foo(props) {
+      return ReactNoop.createPortal(
+        props.show ? [<div key="a" />, <Bar key="b">Hello</Bar>, 'World'] : [],
+        portalContainer,
+        null,
+      );
+    }
+
+    ReactNoop.render(
+      <div>
+        <Foo show={true} />
+      </div>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
+
+    ReactNoop.render(
+      <div>
+        <Foo show={false} />
+      </div>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
+
+    ReactNoop.render(
+      <div>
+        <Foo show={true} />
+      </div>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
+
+    ReactNoop.render(null);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
+
+    ReactNoop.render(<Foo show={false} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
+
+    ReactNoop.render(<Foo show={true} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
+
+    ReactNoop.render(null);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
+  });
+
+  it('can delete a child when it unmounts with a portal', async () => {
+    function Bar(props) {
+      return <span prop={props.children} />;
+    }
+
+    const portalContainer =
+      ReactNoop.getOrCreateRootContainer('portalContainer');
+    function Foo(props) {
+      return ReactNoop.createPortal(
+        [<div key="a" />, <Bar key="b">Hello</Bar>, 'World'],
+        portalContainer,
+        null,
+      );
+    }
+
+    ReactNoop.render(
+      <div>
+        <Foo />
+      </div>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<div />);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
+
+    ReactNoop.render(null);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(
+      <>
+        <div />
+        <span prop="Hello" />
+        World
+      </>,
+    );
+
+    ReactNoop.render(null);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+    expect(ReactNoop.getChildrenAsJSX('portalContainer')).toEqual(null);
+  });
+
+  it('does not update child nodes if a flush is aborted', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <span prop={props.text} />;
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <div>
+            <Bar text={props.text} />
+            {props.text === 'Hello' ? <Bar text={props.text} /> : null}
+          </div>
+          <Bar text="Yo" />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo text="Hello" />);
+    await waitForAll(['Foo', 'Bar', 'Bar', 'Bar']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>
+          <span prop="Hello" />
+          <span prop="Hello" />
+        </div>
+        <span prop="Yo" />
+      </div>,
+    );
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo text="World" />);
+    });
+
+    // Flush some of the work without committing
+    await waitFor(['Foo', 'Bar']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <div>
+          <span prop="Hello" />
+          <span prop="Hello" />
+        </div>
+        <span prop="Yo" />
+      </div>,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  it('preserves a previously rendered node when deprioritized', async () => {
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <span prop={props.children} />;
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <LegacyHiddenDiv mode="hidden">
+            <Middle>{props.text}</Middle>
+          </LegacyHiddenDiv>
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo text="foo" />);
+    await waitForAll(['Foo', 'Middle']);
+
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        <div hidden={true}>
+          <span prop="foo" />
+        </div>
+      </div>,
+    );
+
+    ReactNoop.render(<Foo text="bar" />, () => Scheduler.log('commit'));
+    await waitFor(['Foo', 'commit']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        <div hidden={true}>
+          <span prop="foo" />
+        </div>
+      </div>,
+    );
+
+    await waitForAll(['Middle']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        <div hidden={true}>
+          <span prop="bar" />
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  it('can reuse side-effects after being preempted', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return <span prop={props.children} />;
+    }
+
+    const middleContent = (
+      <div>
+        <Bar>Hello</Bar>
+        <Bar>World</Bar>
+      </div>
+    );
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <LegacyHiddenDiv mode="hidden">
+          {props.step === 0 ? (
+            <div>
+              <Bar>Hi</Bar>
+              <Bar>{props.text}</Bar>
+            </div>
+          ) : (
+            middleContent
+          )}
+        </LegacyHiddenDiv>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" step={0} />);
+    await waitForAll(['Foo', 'Bar', 'Bar']);
+
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <div>
+          <span prop="Hi" />
+          <span prop="foo" />
+        </div>
+      </div>,
+    );
+
+    // Make a quick update which will schedule low priority work to
+    // update the middle content.
+    ReactNoop.render(<Foo text="bar" step={1} />, () =>
+      Scheduler.log('commit'),
+    );
+    await waitFor(['Foo', 'commit', 'Bar']);
+
+    // The tree remains unchanged.
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <div>
+          <span prop="Hi" />
+          <span prop="foo" />
+        </div>
+      </div>,
+    );
+
+    // The first Bar has already completed its update but we'll interrupt it to
+    // render some higher priority work. The middle content will bailout so
+    // it remains untouched which means that it should reuse it next time.
+    ReactNoop.render(<Foo text="foo" step={1} />);
+    await waitForAll(['Foo', 'Bar', 'Bar']);
+
+    // Since we did nothing to the middle subtree during the interruption,
+    // we should be able to reuse the reconciliation work that we already did
+    // without restarting. The side-effects should still be replayed.
+
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <div>
+          <span prop="Hello" />
+          <span prop="World" />
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate enableLegacyHidden
+  it('can reuse side-effects after being preempted, if shouldComponentUpdate is false', async () => {
+    class Bar extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.children !== nextProps.children;
+      }
+      render() {
+        Scheduler.log('Bar');
+        return <span prop={this.props.children} />;
+      }
+    }
+
+    class Content extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.step !== nextProps.step;
+      }
+      render() {
+        Scheduler.log('Content');
+        return (
+          <div>
+            <Bar>{this.props.step === 0 ? 'Hi' : 'Hello'}</Bar>
+            <Bar>{this.props.step === 0 ? this.props.text : 'World'}</Bar>
+          </div>
+        );
+      }
+    }
+
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <LegacyHiddenDiv mode="hidden">
+          <Content step={props.step} text={props.text} />
+        </LegacyHiddenDiv>
+      );
+    }
+
+    // Init
+    ReactNoop.render(<Foo text="foo" step={0} />);
+    await waitForAll(['Foo', 'Content', 'Bar', 'Bar']);
+
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <div>
+          <span prop="Hi" />
+          <span prop="foo" />
+        </div>
+      </div>,
+    );
+
+    // Make a quick update which will schedule low priority work to
+    // update the middle content.
+    ReactNoop.render(<Foo text="bar" step={1} />);
+    await waitFor(['Foo', 'Content', 'Bar']);
+
+    // The tree remains unchanged.
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <div>
+          <span prop="Hi" />
+          <span prop="foo" />
+        </div>
+      </div>,
+    );
+
+    // The first Bar has already completed its update but we'll interrupt it to
+    // render some higher priority work. The middle content will bailout so
+    // it remains untouched which means that it should reuse it next time.
+    ReactNoop.render(<Foo text="foo" step={1} />);
+    await waitForAll(['Foo', 'Content', 'Bar', 'Bar']);
+
+    // Since we did nothing to the middle subtree during the interruption,
+    // we should be able to reuse the reconciliation work that we already did
+    // without restarting. The side-effects should still be replayed.
+
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <div>
+          <span prop="Hello" />
+          <span prop="World" />
+        </div>
+      </div>,
+    );
+  });
+
+  it('can update a completed tree before it has a chance to commit', async () => {
+    function Foo(props) {
+      Scheduler.log('Foo ' + props.step);
+      return <span prop={props.step} />;
+    }
+    React.startTransition(() => {
+      ReactNoop.render(<Foo step={1} />);
+    });
+    // This should be just enough to complete the tree without committing it
+    await waitFor(['Foo 1']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(null);
+    // To confirm, perform one more unit of work. The tree should now
+    // be flushed.
+    await waitForPaint([]);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={1} />);
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo step={2} />);
+    });
+    // This should be just enough to complete the tree without committing it
+    await waitFor(['Foo 2']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={1} />);
+    // This time, before we commit the tree, we update the root component with
+    // new props
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo step={3} />);
+    });
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={1} />);
+    // Now let's commit. We already had a commit that was pending, which will
+    // render 2.
+    await waitForPaint([]);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={2} />);
+    // If we flush the rest of the work, we should get another commit that
+    // renders 3. If it renders 2 again, that means an update was dropped.
+    await waitForAll(['Foo 3']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={3} />);
+  });
+
+  // @gate enableLegacyHidden
+  it('updates a child even though the old props is empty', async () => {
+    function Foo(props) {
+      return (
+        <LegacyHiddenDiv mode="hidden">
+          <span prop={1} />
+        </LegacyHiddenDiv>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div hidden={true}>
+        <span prop={1} />
+      </div>,
+    );
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can defer side-effects and resume them later on', async () => {
+    class Bar extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.idx !== nextProps.idx;
+      }
+      render() {
+        return <span prop={this.props.idx} />;
+      }
+    }
+    function Foo(props) {
+      return (
+        <div>
+          <span prop={props.tick} />
+          <div hidden={true}>
+            <Bar idx={props.idx} />
+            <Bar idx={props.idx + 1} />
+          </div>
+        </div>
+      );
+    }
+    ReactNoop.render(<Foo tick={0} idx={0} />);
+    ReactNoop.flushDeferredPri(40 + 25);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={0} />
+        <div />
+      </div>,
+    );
+    ReactNoop.render(<Foo tick={1} idx={0} />);
+    ReactNoop.flushDeferredPri(35 + 25);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={1} />
+        <div>{/*still not rendered yet*/}</div>
+      </div>,
+    );
+    ReactNoop.flushDeferredPri(30 + 25);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={1} />
+        <div>
+          {/* Now we had enough time to finish the spans. */}
+          <span prop={0} />
+          <span prop={1} />
+        </div>
+        ,
+      </div>,
+    );
+    const innerSpanA =
+      ReactNoop.dangerouslyGetChildren()[0].children[1].children[1];
+    ReactNoop.render(<Foo tick={2} idx={1} />);
+    ReactNoop.flushDeferredPri(30 + 25);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={2} />
+        <div>
+          {/* Still same old numbers. */}
+          <span prop={0} />
+          <span prop={1} />
+        </div>
+      </div>,
+    );
+    ReactNoop.render(<Foo tick={3} idx={1} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={3} />
+        <div>
+          {/* New numbers. */}
+          <span prop={1} />
+          <span prop={2} />
+        </div>
+      </div>,
+    );
+
+    const innerSpanB =
+      ReactNoop.dangerouslyGetChildren()[0].children[1].children[1];
+    // This should have been an update to an existing instance, not recreation.
+    // We verify that by ensuring that the child instance was the same as
+    // before.
+    expect(innerSpanA).toBe(innerSpanB);
+  });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('can defer side-effects and reuse them later - complex', async function () {
+    let ops = [];
+
+    class Bar extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.idx !== nextProps.idx;
+      }
+      render() {
+        ops.push('Bar');
+        return <span prop={this.props.idx} />;
+      }
+    }
+    class Baz extends React.Component {
+      shouldComponentUpdate(nextProps) {
+        return this.props.idx !== nextProps.idx;
+      }
+      render() {
+        ops.push('Baz');
+        return [
+          <Bar key="a" idx={this.props.idx} />,
+          <Bar key="b" idx={this.props.idx} />,
+        ];
+      }
+    }
+    function Foo(props) {
+      ops.push('Foo');
+      return (
+        <div>
+          <span prop={props.tick} />
+          <div hidden={true}>
+            <Baz idx={props.idx} />
+            <Baz idx={props.idx} />
+            <Baz idx={props.idx} />
+          </div>
+        </div>
+      );
+    }
+    ReactNoop.render(<Foo tick={0} idx={0} />);
+    ReactNoop.flushDeferredPri(65 + 5);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={0} />
+        {/*the spans are down-prioritized and not rendered yet*/}
+        <div />
+      </div>,
+    );
+
+    expect(ops).toEqual(['Foo', 'Baz', 'Bar']);
+    ops = [];
+
+    ReactNoop.render(<Foo tick={1} idx={0} />);
+    ReactNoop.flushDeferredPri(70);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={1} />
+        {/*still not rendered yet*/}
+        <div />
+      </div>,
+    );
+
+    expect(ops).toEqual(['Foo']);
+    ops = [];
+
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput([
+      <div>
+        <span prop={1} />,
+        <div>
+          {/* Now we had enough time to finish the spans. */}
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+          <span prop={0} />,
+        </div>
+      </div>,
+    ]);
+
+    expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar', 'Baz', 'Bar', 'Bar']);
+    ops = [];
+
+    // Now we're going to update the index but we'll only let it finish half
+    // way through.
+    ReactNoop.render(<Foo tick={2} idx={1} />);
+    ReactNoop.flushDeferredPri(95);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={2} />,
+        <div>
+          {/* Still same old numbers. */}
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
+
+    // We let it finish half way through. That means we'll have one fully
+    // completed Baz, one half-way completed Baz and one fully incomplete Baz.
+    expect(ops).toEqual(['Foo', 'Baz', 'Bar', 'Bar', 'Baz', 'Bar']);
+    ops = [];
+
+    // We'll update again, without letting the new index update yet. Only half
+    // way through.
+    ReactNoop.render(<Foo tick={3} idx={1} />);
+    ReactNoop.flushDeferredPri(50);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span prop={3} />
+        <div>
+          {/* Old numbers. */}
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
+
+    expect(ops).toEqual(['Foo']);
+    ops = [];
+
+    // We should now be able to reuse some of the work we've already done
+    // and replay those side-effects.
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput([
+      <div>
+        <span prop={3} />,
+        <div>
+          {/* New numbers. */}
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+          <span prop={1} />
+        </div>
+      </div>,
+    ]);
+
+    expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar']);
+  });
+
+  // @gate enableLegacyHidden
+  it('deprioritizes setStates that happens within a deprioritized tree', async () => {
+    const barInstances = [];
+
+    class Bar extends React.Component {
+      constructor() {
+        super();
+        this.state = {active: false};
+      }
+      activate() {
+        this.setState({active: true});
+      }
+      render() {
+        barInstances.push(this);
+        Scheduler.log('Bar');
+        return <span prop={this.state.active ? 'X' : this.props.idx} />;
+      }
+    }
+    function Foo(props) {
+      Scheduler.log('Foo');
+      return (
+        <div>
+          <span prop={props.tick} />
+          <LegacyHiddenDiv mode="hidden">
+            <Bar idx={props.idx} />
+            <Bar idx={props.idx} />
+            <Bar idx={props.idx} />
+          </LegacyHiddenDiv>
+        </div>
+      );
+    }
+    ReactNoop.render(<Foo tick={0} idx={0} />);
+    await waitForAll(['Foo', 'Bar', 'Bar', 'Bar']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        <span prop={0} />
+        <div hidden={true}>
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
+
+    ReactNoop.render(<Foo tick={1} idx={1} />);
+    await waitFor(['Foo', 'Bar', 'Bar']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        {/* Updated */}
+        <span prop={1} />
+        <div hidden={true}>
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
+
+    barInstances[0].activate();
+
+    // This should not be enough time to render the content of all the hidden
+    // items. Including the set state since that is deprioritized.
+    // ReactNoop.flushDeferredPri(35);
+    await waitFor(['Bar']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        {/* Updated */}
+        <span prop={1} />
+        <div hidden={true}>
+          {/* Still not updated */}
+          <span prop={0} />
+          <span prop={0} />
+          <span prop={0} />
+        </div>
+      </div>,
+    );
+
+    // However, once we render fully, we will have enough time to finish it all
+    // at once.
+    await waitForAll(['Bar', 'Bar']);
+    expect(ReactNoop.getChildrenAsJSX()).toEqual(
+      <div>
+        <span prop={1} />
+        <div hidden={true}>
+          {/* Now we had enough time to finish the spans. */}
+          <span prop="X" />
+          <span prop={1} />
+          <span prop={1} />
+        </div>
+      </div>,
+    );
+  });
+  // TODO: Test that side-effects are not cut off when a work in progress node
+  // moves to "current" without flushing due to having lower priority. Does this
+  // even happen? Maybe a child doesn't get processed because it is lower prio?
+
+  it('calls callback after update is flushed', async () => {
+    let instance;
+    class Foo extends React.Component {
+      constructor() {
+        super();
+        instance = this;
+        this.state = {text: 'foo'};
+      }
+      render() {
+        return <span prop={this.state.text} />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="foo" />);
+    let called = false;
+    instance.setState({text: 'bar'}, () => {
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="bar" />);
+      called = true;
+    });
+    await waitForAll([]);
+    expect(called).toBe(true);
+  });
+
+  it('calls setState callback even if component bails out', async () => {
+    let instance;
+    class Foo extends React.Component {
+      constructor() {
+        super();
+        instance = this;
+        this.state = {text: 'foo'};
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        return this.state.text !== nextState.text;
+      }
+      render() {
+        return <span prop={this.state.text} />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="foo" />);
+    let called = false;
+    instance.setState({}, () => {
+      called = true;
+    });
+    await waitForAll([]);
+    expect(called).toBe(true);
+  });
+
+  // TODO: Test that callbacks are not lost if an update is preempted.
+
+  it('calls componentWillUnmount after a deletion, even if nested', async () => {
+    const ops = [];
+
+    class Bar extends React.Component {
+      componentWillUnmount() {
+        ops.push(this.props.name);
+      }
+      render() {
+        return <span />;
+      }
+    }
+
+    class Wrapper extends React.Component {
+      componentWillUnmount() {
+        ops.push('Wrapper');
+      }
+      render() {
+        return <Bar name={this.props.name} />;
+      }
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          {props.show
+            ? [
+                <Bar key="a" name="A" />,
+                <Wrapper key="b" name="B" />,
+                <div key="cd">
+                  <Bar name="C" />
+                  <Wrapper name="D" />,
+                </div>,
+                [<Bar key="e" name="E" />, <Bar key="f" name="F" />],
+              ]
+            : []}
+          <div>{props.show ? <Bar key="g" name="G" /> : null}</div>
+          <Bar name="this should not unmount" />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo show={true} />);
+    await waitForAll([]);
+    expect(ops).toEqual([]);
+
+    ReactNoop.render(<Foo show={false} />);
+    await waitForAll([]);
+    expect(ops).toEqual([
+      'A',
+      'Wrapper',
+      'B',
+      'C',
+      'Wrapper',
+      'D',
+      'E',
+      'F',
+      'G',
+    ]);
+  });
+
+  it('calls componentDidMount/Update after insertion/update', async () => {
+    let ops = [];
+
+    class Bar extends React.Component {
+      componentDidMount() {
+        ops.push('mount:' + this.props.name);
+      }
+      componentDidUpdate() {
+        ops.push('update:' + this.props.name);
+      }
+      render() {
+        return <span />;
+      }
+    }
+
+    class Wrapper extends React.Component {
+      componentDidMount() {
+        ops.push('mount:wrapper-' + this.props.name);
+      }
+      componentDidUpdate() {
+        ops.push('update:wrapper-' + this.props.name);
+      }
+      render() {
+        return <Bar name={this.props.name} />;
+      }
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          <Bar key="a" name="A" />
+          <Wrapper key="b" name="B" />
+          <div key="cd">
+            <Bar name="C" />
+            <Wrapper name="D" />
+          </div>
+          {[<Bar key="e" name="E" />, <Bar key="f" name="F" />]}
+          <div>
+            <Bar key="g" name="G" />
+          </div>
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ops).toEqual([
+      'mount:A',
+      'mount:B',
+      'mount:wrapper-B',
+      'mount:C',
+      'mount:D',
+      'mount:wrapper-D',
+      'mount:E',
+      'mount:F',
+      'mount:G',
+    ]);
+
+    ops = [];
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(ops).toEqual([
+      'update:A',
+      'update:B',
+      'update:wrapper-B',
+      'update:C',
+      'update:D',
+      'update:wrapper-D',
+      'update:E',
+      'update:F',
+      'update:G',
+    ]);
+  });
+
+  it('invokes ref callbacks after insertion/update/unmount', async () => {
+    let classInstance = null;
+
+    let ops = [];
+
+    class ClassComponent extends React.Component {
+      render() {
+        classInstance = this;
+        return <span />;
+      }
+    }
+
+    function FunctionComponent(props) {
+      return <span />;
+    }
+
+    function Foo(props) {
+      return props.show ? (
+        <div>
+          <ClassComponent ref={n => ops.push(n)} />
+          <FunctionComponent ref={n => ops.push(n)} />
+          <div ref={n => ops.push(n)} />
+        </div>
+      ) : null;
+    }
+
+    ReactNoop.render(<Foo show={true} />);
+
+    await waitForAll([]);
+
+    expect(ops).toEqual([
+      classInstance,
+      // no call for function components
+      {type: 'div', children: [], prop: undefined, hidden: false},
+    ]);
+
+    ops = [];
+
+    // Refs that switch function instances get reinvoked
+    ReactNoop.render(<Foo show={true} />);
+    await waitForAll([]);
+    expect(ops).toEqual([
+      // detach all refs that switched handlers first.
+      null,
+      null,
+      // reattach as a separate phase
+      classInstance,
+      {type: 'div', children: [], prop: undefined, hidden: false},
+    ]);
+
+    ops = [];
+
+    ReactNoop.render(<Foo show={false} />);
+    await waitForAll([]);
+    expect(ops).toEqual([
+      // unmount
+      null,
+      null,
+    ]);
+  });
+
+  // TODO: Test that mounts, updates, refs, unmounts and deletions happen in the
+  // expected way for aborted and resumed render life-cycles.
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
new file mode 100644
index 00000000000..b7a2d6b661f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -0,0 +1,688 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let ContinuousEventPriority;
+let act;
+let waitForAll;
+let waitFor;
+let assertLog;
+let assertConsoleErrorDev;
+
+describe('ReactIncrementalUpdates', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    ContinuousEventPriority =
+      require('react-reconciler/constants').ContinuousEventPriority;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('applies updates in order of priority', async () => {
+    let state;
+    class Foo extends React.Component {
+      state = {};
+      componentDidMount() {
+        Scheduler.log('commit');
+        React.startTransition(() => {
+          // Has low priority
+          this.setState({b: 'b'});
+          this.setState({c: 'c'});
+        });
+        // Has Task priority
+        this.setState({a: 'a'});
+      }
+      render() {
+        state = this.state;
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitFor(['commit']);
+
+    expect(state).toEqual({a: 'a'});
+    await waitForAll([]);
+    expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
+  });
+
+  it('applies updates with equal priority in insertion order', async () => {
+    let state;
+    class Foo extends React.Component {
+      state = {};
+      componentDidMount() {
+        // All have Task priority
+        this.setState({a: 'a'});
+        this.setState({b: 'b'});
+        this.setState({c: 'c'});
+      }
+      render() {
+        state = this.state;
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+    expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
+  });
+
+  it('only drops updates with equal or lesser priority when replaceState is called', async () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {};
+      componentDidMount() {
+        Scheduler.log('componentDidMount');
+      }
+      componentDidUpdate() {
+        Scheduler.log('componentDidUpdate');
+      }
+      render() {
+        Scheduler.log('render');
+        instance = this;
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['render', 'componentDidMount']);
+
+    ReactNoop.flushSync(() => {
+      React.startTransition(() => {
+        instance.setState({x: 'x'});
+        instance.setState({y: 'y'});
+      });
+      instance.setState({a: 'a'});
+      instance.setState({b: 'b'});
+      React.startTransition(() => {
+        instance.updater.enqueueReplaceState(instance, {c: 'c'});
+        instance.setState({d: 'd'});
+      });
+    });
+
+    // Even though a replaceState has been already scheduled, it hasn't been
+    // flushed yet because it has async priority.
+    expect(instance.state).toEqual({a: 'a', b: 'b'});
+    assertLog(['render', 'componentDidUpdate']);
+
+    await waitForAll(['render', 'componentDidUpdate']);
+    // Now the rest of the updates are flushed, including the replaceState.
+    expect(instance.state).toEqual({c: 'c', d: 'd'});
+  });
+
+  it('can abort an update, schedule additional updates, and resume', async () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {};
+      render() {
+        instance = this;
+        return <span prop={Object.keys(this.state).sort().join('')} />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+
+    function createUpdate(letter) {
+      return () => {
+        Scheduler.log(letter);
+        return {
+          [letter]: letter,
+        };
+      };
+    }
+
+    // Schedule some async updates
+    React.startTransition(() => {
+      instance.setState(createUpdate('a'));
+      instance.setState(createUpdate('b'));
+      instance.setState(createUpdate('c'));
+    });
+
+    // Begin the updates but don't flush them yet
+    await waitFor(['a', 'b', 'c']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="" />);
+
+    // Schedule some more updates at different priorities
+    instance.setState(createUpdate('d'));
+    ReactNoop.flushSync(() => {
+      instance.setState(createUpdate('e'));
+      instance.setState(createUpdate('f'));
+    });
+    React.startTransition(() => {
+      instance.setState(createUpdate('g'));
+    });
+
+    // The sync updates should have flushed, but not the async ones.
+    assertLog(['d', 'e', 'f']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="def" />);
+
+    // Now flush the remaining work. Even though e and f were already processed,
+    // they should be processed again, to ensure that the terminal state
+    // is deterministic.
+    await waitForAll([
+      // Then we'll re-process everything for 'g'.
+      'a',
+      'b',
+      'c',
+      'd',
+      'e',
+      'f',
+      'g',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="abcdefg" />);
+  });
+
+  it('can abort an update, schedule a replaceState, and resume', async () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {};
+      render() {
+        instance = this;
+        return <span prop={Object.keys(this.state).sort().join('')} />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+
+    function createUpdate(letter) {
+      return () => {
+        Scheduler.log(letter);
+        return {
+          [letter]: letter,
+        };
+      };
+    }
+
+    // Schedule some async updates
+    React.startTransition(() => {
+      instance.setState(createUpdate('a'));
+      instance.setState(createUpdate('b'));
+      instance.setState(createUpdate('c'));
+    });
+
+    // Begin the updates but don't flush them yet
+    await waitFor(['a', 'b', 'c']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="" />);
+
+    // Schedule some more updates at different priorities
+    instance.setState(createUpdate('d'));
+
+    ReactNoop.flushSync(() => {
+      instance.setState(createUpdate('e'));
+      // No longer a public API, but we can test that it works internally by
+      // reaching into the updater.
+      instance.updater.enqueueReplaceState(instance, createUpdate('f'));
+    });
+    React.startTransition(() => {
+      instance.setState(createUpdate('g'));
+    });
+
+    // The sync updates should have flushed, but not the async ones.
+    assertLog(['d', 'e', 'f']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="f" />);
+
+    // Now flush the remaining work. Even though e and f were already processed,
+    // they should be processed again, to ensure that the terminal state
+    // is deterministic.
+    await waitForAll([
+      // Then we'll re-process everything for 'g'.
+      'a',
+      'b',
+      'c',
+      'd',
+      'e',
+      'f',
+      'g',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="fg" />);
+  });
+
+  it('passes accumulation of previous updates to replaceState updater function', async () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {};
+      render() {
+        instance = this;
+        return <span />;
+      }
+    }
+    ReactNoop.render(<Foo />);
+    await waitForAll([]);
+
+    instance.setState({a: 'a'});
+    instance.setState({b: 'b'});
+    // No longer a public API, but we can test that it works internally by
+    // reaching into the updater.
+    instance.updater.enqueueReplaceState(instance, previousState => ({
+      previousState,
+    }));
+    await waitForAll([]);
+    expect(instance.state).toEqual({previousState: {a: 'a', b: 'b'}});
+  });
+
+  it('does not call callbacks that are scheduled by another callback until a later commit', async () => {
+    class Foo extends React.Component {
+      state = {};
+      componentDidMount() {
+        Scheduler.log('did mount');
+        this.setState({a: 'a'}, () => {
+          Scheduler.log('callback a');
+          this.setState({b: 'b'}, () => {
+            Scheduler.log('callback b');
+          });
+        });
+      }
+      render() {
+        Scheduler.log('render');
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([
+      'render',
+      'did mount',
+      'render',
+      'callback a',
+      'render',
+      'callback b',
+    ]);
+  });
+
+  it('gives setState during reconciliation the same priority as whatever level is currently reconciling', async () => {
+    let instance;
+
+    class Foo extends React.Component {
+      state = {};
+      UNSAFE_componentWillReceiveProps() {
+        Scheduler.log('componentWillReceiveProps');
+        this.setState({b: 'b'});
+      }
+      render() {
+        Scheduler.log('render');
+        instance = this;
+        return <div />;
+      }
+    }
+    ReactNoop.render(<Foo />);
+    await waitForAll(['render']);
+
+    ReactNoop.flushSync(() => {
+      instance.setState({a: 'a'});
+
+      ReactNoop.render(<Foo />); // Trigger componentWillReceiveProps
+    });
+
+    expect(instance.state).toEqual({a: 'a', b: 'b'});
+
+    assertLog(['componentWillReceiveProps', 'render']);
+  });
+
+  it('updates triggered from inside a class setState updater', async () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {};
+      render() {
+        Scheduler.log('render');
+        instance = this;
+        return <div />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([
+      // Initial render
+      'render',
+    ]);
+
+    instance.setState(function a() {
+      Scheduler.log('setState updater');
+      this.setState({b: 'b'});
+      return {a: 'a'};
+    });
+
+    await waitForAll([
+      'setState updater',
+      // Updates in the render phase receive the currently rendering
+      // lane, so the update flushes immediately in the same render.
+      'render',
+    ]);
+    assertConsoleErrorDev([
+      '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.\n' +
+        '\n' +
+        'Please update the following component: Foo\n' +
+        '    in Foo (at **)',
+    ]);
+    expect(instance.state).toEqual({a: 'a', b: 'b'});
+
+    // Test deduplication (no additional warnings expected)
+    instance.setState(function a() {
+      this.setState({a: 'a'});
+      return {b: 'b'};
+    });
+    await waitForAll(
+      gate(flags =>
+        // Updates in the render phase receive the currently rendering
+        // lane, so the update flushes immediately in the same render.
+        ['render'],
+      ),
+    );
+  });
+
+  it('getDerivedStateFromProps should update base state of updateQueue (based on product bug)', () => {
+    // Based on real-world bug.
+
+    let foo;
+    class Foo extends React.Component {
+      state = {value: 'initial state'};
+      static getDerivedStateFromProps() {
+        return {value: 'derived state'};
+      }
+      render() {
+        foo = this;
+        return (
+          <>
+            <span prop={this.state.value} />
+            <Bar />
+          </>
+        );
+      }
+    }
+
+    let bar;
+    class Bar extends React.Component {
+      render() {
+        bar = this;
+        return null;
+      }
+    }
+
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<Foo />);
+    });
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="derived state" />);
+
+    ReactNoop.flushSync(() => {
+      // Triggers getDerivedStateFromProps again
+      ReactNoop.render(<Foo />);
+      // The noop callback is needed to trigger the specific internal path that
+      // led to this bug. Removing it causes it to "accidentally" work.
+      foo.setState({value: 'update state'}, function noop() {});
+    });
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="derived state" />);
+
+    ReactNoop.flushSync(() => {
+      bar.setState({});
+    });
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="derived state" />);
+  });
+
+  it('regression: does not expire soon due to layout effects in the last batch', async () => {
+    const {useState, useLayoutEffect} = React;
+
+    let setCount;
+    function App() {
+      const [count, _setCount] = useState(0);
+      setCount = _setCount;
+      Scheduler.log('Render: ' + count);
+      useLayoutEffect(() => {
+        setCount(1);
+        Scheduler.log('Commit: ' + count);
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    await act(async () => {
+      React.startTransition(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([]);
+      await waitForAll([
+        'Render: 0',
+        'Child',
+        'Commit: 0',
+        'Render: 1',
+        'Child',
+      ]);
+
+      Scheduler.unstable_advanceTime(10000);
+      React.startTransition(() => {
+        setCount(2);
+      });
+      // The transition should not have expired, so we should be able to
+      // partially render it.
+      await waitFor(['Render: 2']);
+      // Now do the rest
+      await waitForAll(['Child']);
+    });
+  });
+
+  it('regression: does not expire soon due to previous flushSync', async () => {
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<Text text="A" />);
+    });
+    assertLog(['A']);
+
+    Scheduler.unstable_advanceTime(10000);
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Text text="C" />
+          <Text text="D" />
+        </>,
+      );
+    });
+    // The transition should not have expired, so we should be able to
+    // partially render it.
+    await waitFor(['A']);
+    await waitFor(['B']);
+    await waitForAll(['C', 'D']);
+  });
+
+  it('regression: does not expire soon due to previous expired work', async () => {
+    React.startTransition(() => {
+      ReactNoop.render(
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Text text="C" />
+          <Text text="D" />
+        </>,
+      );
+    });
+
+    await waitFor(['A']);
+    // This will expire the rest of the update
+    Scheduler.unstable_advanceTime(10000);
+    await waitFor(['B'], {
+      additionalLogsAfterAttemptingToYield: ['C', 'D'],
+    });
+
+    Scheduler.unstable_advanceTime(10000);
+
+    // Now do another transition. This one should not expire.
+    React.startTransition(() => {
+      ReactNoop.render(
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Text text="C" />
+          <Text text="D" />
+        </>,
+      );
+    });
+
+    // The transition should not have expired, so we should be able to
+    // partially render it.
+    await waitFor(['A']);
+    await waitFor(['B']);
+    await waitForAll(['C', 'D']);
+  });
+
+  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.log('Committed: ' + log);
+        if (log === 'B') {
+          // Right after B commits, schedule additional updates.
+          ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
+            pushToLog('C'),
+          );
+          setLog(prevLog => prevLog + 'D');
+        }
+      }, [log]);
+
+      return log;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Committed: ']);
+    expect(root).toMatchRenderedOutput(null);
+
+    await act(() => {
+      React.startTransition(() => {
+        pushToLog('A');
+      });
+
+      ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
+        pushToLog('B'),
+      );
+    });
+    assertLog(['Committed: B', 'Committed: BCD', 'Committed: ABCD']);
+    expect(root).toMatchRenderedOutput('ABCD');
+  });
+
+  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.log('Committed: ' + this.state.log);
+        if (this.state.log === 'B') {
+          // Right after B commits, schedule additional updates.
+          ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
+            this.pushToLog('C'),
+          );
+          this.pushToLog('D');
+        }
+      }
+      render() {
+        pushToLog = this.pushToLog;
+        return this.state.log;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(null);
+
+    await act(() => {
+      React.startTransition(() => {
+        pushToLog('A');
+      });
+      ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
+        pushToLog('B'),
+      );
+    });
+    assertLog(['Committed: B', 'Committed: BCD', 'Committed: ABCD']);
+    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 act(() => {
+      root.render(<App prop="A" />);
+    });
+    expect(root).toMatchRenderedOutput('0');
+
+    // Changing the prop causes the count to increase by 100
+    await act(() => {
+      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 act(() => {
+      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__/ReactIncrementalUpdatesMinimalism-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdatesMinimalism-test.js
new file mode 100644
index 00000000000..5f1959de160
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdatesMinimalism-test.js
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let act;
+
+describe('ReactIncrementalUpdatesMinimalism', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    act = require('internal-test-utils').act;
+  });
+
+  it('should render a simple component', async () => {
+    function Child() {
+      return <div>Hello World</div>;
+    }
+
+    function Parent() {
+      return <Child />;
+    }
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => ReactNoop.render(<Parent />));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      hostUpdateCounter: 0,
+    });
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => ReactNoop.render(<Parent />));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      hostUpdateCounter: 1,
+    });
+  });
+
+  it('should not diff referentially equal host elements', async () => {
+    function Leaf(props) {
+      return (
+        <span>
+          hello
+          <b />
+          {props.name}
+        </span>
+      );
+    }
+
+    const constEl = (
+      <div>
+        <Leaf name="world" />
+      </div>
+    );
+
+    function Child() {
+      return constEl;
+    }
+
+    function Parent() {
+      return <Child />;
+    }
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => ReactNoop.render(<Parent />));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      hostUpdateCounter: 0,
+    });
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => ReactNoop.render(<Parent />));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      hostUpdateCounter: 0,
+    });
+  });
+
+  it('should not diff parents of setState targets', async () => {
+    let childInst;
+
+    function Leaf(props) {
+      return (
+        <span>
+          hello
+          <b />
+          {props.name}
+        </span>
+      );
+    }
+
+    class Child extends React.Component {
+      state = {name: 'Batman'};
+      render() {
+        childInst = this;
+        return (
+          <div>
+            <Leaf name={this.state.name} />
+          </div>
+        );
+      }
+    }
+
+    function Parent() {
+      return (
+        <section>
+          <div>
+            <Leaf name="world" />
+            <Child />
+            <hr />
+            <Leaf name="world" />
+          </div>
+        </section>
+      );
+    }
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => ReactNoop.render(<Parent />));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      hostUpdateCounter: 0,
+    });
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => childInst.setState({name: 'Robin'}));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      // Child > div
+      // Child > Leaf > span
+      // Child > Leaf > span > b
+      // Child > Leaf > span > #text
+      hostUpdateCounter: 4,
+    });
+
+    ReactNoop.startTrackingHostCounters();
+    await act(() => ReactNoop.render(<Parent />));
+    expect(ReactNoop.stopTrackingHostCounters()).toEqual({
+      // Parent > section
+      // Parent > section > div
+      // Parent > section > div > Leaf > span
+      // Parent > section > div > Leaf > span > b
+      // Parent > section > div > Child > div
+      // Parent > section > div > Child > div > Leaf > span
+      // Parent > section > div > Child > div > Leaf > span > b
+      // Parent > section > div > hr
+      // Parent > section > div > Leaf > span
+      // Parent > section > div > Leaf > span > b
+      hostUpdateCounter: 10,
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
new file mode 100644
index 00000000000..f40004b9eaf
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
@@ -0,0 +1,136 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let startTransition;
+let useState;
+let useEffect;
+let act;
+let assertLog;
+let waitFor;
+let waitForPaint;
+
+describe('ReactInterleavedUpdates', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    startTransition = React.startTransition;
+    useState = React.useState;
+    useEffect = React.useEffect;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('update during an interleaved event is not processed during the current render', async () => {
+    const updaters = [];
+
+    function Child() {
+      const [state, setState] = useState(0);
+      useEffect(() => {
+        updaters.push(setState);
+      }, []);
+      return <Text text={state} />;
+    }
+
+    function updateChildren(value) {
+      for (let i = 0; i < updaters.length; i++) {
+        const setState = updaters[i];
+        setState(value);
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+
+    await act(() => {
+      root.render(
+        <>
+          <Child />
+          <Child />
+          <Child />
+        </>,
+      );
+    });
+    assertLog([0, 0, 0]);
+    expect(root).toMatchRenderedOutput('000');
+
+    await act(async () => {
+      React.startTransition(() => {
+        updateChildren(1);
+      });
+      // Partially render the children. Only the first one.
+      await waitFor([1]);
+
+      // In an interleaved event, schedule an update on each of the children.
+      // Including the two that haven't rendered yet.
+      React.startTransition(() => {
+        updateChildren(2);
+      });
+
+      // We should continue rendering without including the interleaved updates.
+      await waitForPaint([1, 1]);
+      expect(root).toMatchRenderedOutput('111');
+    });
+    // The interleaved updates flush in a separate render.
+    assertLog([2, 2, 2]);
+    expect(root).toMatchRenderedOutput('222');
+  });
+
+  it('regression for #24350: does not add to main update queue until interleaved update queue has been cleared', async () => {
+    let setStep;
+    function App() {
+      const [step, _setState] = useState(0);
+      setStep = _setState;
+      return (
+        <>
+          <Text text={'A' + step} />
+          <Text text={'B' + step} />
+          <Text text={'C' + step} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A0', 'B0', 'C0']);
+    expect(root).toMatchRenderedOutput('A0B0C0');
+
+    await act(async () => {
+      // Start the render phase.
+      startTransition(() => {
+        setStep(1);
+      });
+      await waitFor(['A1', 'B1']);
+
+      // Schedule an interleaved update. This gets placed on a special queue.
+      startTransition(() => {
+        setStep(2);
+      });
+
+      // Finish rendering the first update.
+      await waitForPaint(['C1']);
+
+      // Schedule another update. (In the regression case, this was treated
+      // as a normal, non-interleaved update and it was inserted into the queue
+      // before the interleaved one was processed.)
+      startTransition(() => {
+        setStep(3);
+      });
+    });
+    // The last update should win.
+    assertLog(['A3', 'B3', 'C3']);
+    expect(root).toMatchRenderedOutput('A3B3C3');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
new file mode 100644
index 00000000000..874969b131e
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
@@ -0,0 +1,362 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+// sanity tests for act()
+
+let React;
+let ReactNoop;
+let act;
+let use;
+let Suspense;
+let DiscreteEventPriority;
+let startTransition;
+let waitForMicrotasks;
+let Scheduler;
+let assertLog;
+
+describe('isomorphic act()', () => {
+  beforeEach(() => {
+    React = require('react');
+    Scheduler = require('scheduler');
+
+    ReactNoop = require('react-noop-renderer');
+    DiscreteEventPriority =
+      require('react-reconciler/constants').DiscreteEventPriority;
+    act = React.act;
+    use = React.use;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+
+    waitForMicrotasks = require('internal-test-utils').waitForMicrotasks;
+    assertLog = require('internal-test-utils').assertLog;
+  });
+
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('behavior in production', () => {
+    if (!__DEV__) {
+      if (gate('fb')) {
+        expect(() => act(() => {})).toThrow(
+          'act(...) is not supported in production builds of React',
+        );
+      } else {
+        expect(React).not.toHaveProperty('act');
+      }
+    }
+  });
+
+  // @gate __DEV__
+  it('bypasses queueMicrotask', async () => {
+    const root = ReactNoop.createRoot();
+
+    // First test what happens without wrapping in act. This update would
+    // normally be queued in a microtask.
+    global.IS_REACT_ACT_ENVIRONMENT = false;
+    ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
+      root.render('A');
+    });
+    // Nothing has rendered yet
+    expect(root).toMatchRenderedOutput(null);
+    // Flush the microtasks by awaiting
+    await waitForMicrotasks();
+    expect(root).toMatchRenderedOutput('A');
+
+    // Now do the same thing but wrap the update with `act`. No
+    // `await` necessary.
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+    act(() => {
+      ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
+        root.render('B');
+      });
+    });
+    expect(root).toMatchRenderedOutput('B');
+  });
+
+  // @gate __DEV__
+  it('return value – sync callback', async () => {
+    expect(await act(() => 'hi')).toEqual('hi');
+  });
+
+  // @gate __DEV__
+  it('return value – sync callback, nested', async () => {
+    const returnValue = await act(() => {
+      return act(() => 'hi');
+    });
+    expect(returnValue).toEqual('hi');
+  });
+
+  // @gate __DEV__
+  it('return value – async callback', async () => {
+    const returnValue = await act(async () => {
+      return await Promise.resolve('hi');
+    });
+    expect(returnValue).toEqual('hi');
+  });
+
+  // @gate __DEV__
+  it('return value – async callback, nested', async () => {
+    const returnValue = await act(async () => {
+      return await act(async () => {
+        return await Promise.resolve('hi');
+      });
+    });
+    expect(returnValue).toEqual('hi');
+  });
+
+  // @gate __DEV__ && !disableLegacyMode
+  it('in legacy mode, updates are batched', () => {
+    const root = ReactNoop.createLegacyRoot();
+
+    // Outside of `act`, legacy updates are flushed completely synchronously
+    root.render('A');
+    expect(root).toMatchRenderedOutput('A');
+
+    // `act` will batch the updates and flush them at the end
+    act(() => {
+      root.render('B');
+      // Hasn't flushed yet
+      expect(root).toMatchRenderedOutput('A');
+
+      // Confirm that a nested `batchedUpdates` call won't cause the updates
+      // to flush early.
+      ReactNoop.batchedUpdates(() => {
+        root.render('C');
+      });
+
+      // Still hasn't flushed
+      expect(root).toMatchRenderedOutput('A');
+    });
+
+    // Now everything renders in a single batch.
+    expect(root).toMatchRenderedOutput('C');
+  });
+
+  // @gate __DEV__ && !disableLegacyMode
+  it('in legacy mode, in an async scope, updates are batched until the first `await`', async () => {
+    const root = ReactNoop.createLegacyRoot();
+
+    await act(async () => {
+      queueMicrotask(() => {
+        Scheduler.log('Current tree in microtask: ' + root.getChildrenAsJSX());
+        root.render(<Text text="C" />);
+      });
+      root.render(<Text text="A" />);
+      root.render(<Text text="B" />);
+
+      await null;
+      assertLog([
+        // A and B should render in a single batch _before_ the microtask queue
+        // has run. This replicates the behavior of the original `act`
+        // implementation, for compatibility.
+        'B',
+        'Current tree in microtask: B',
+
+        // C isn't scheduled until a microtask, so it's rendered separately.
+        'C',
+      ]);
+
+      // Subsequent updates should also render in separate batches.
+      root.render(<Text text="D" />);
+      root.render(<Text text="E" />);
+      assertLog(['D', 'E']);
+    });
+  });
+
+  // @gate __DEV__ && !disableLegacyMode
+  it('in legacy mode, in an async scope, updates are batched until the first `await` (regression test: batchedUpdates)', async () => {
+    const root = ReactNoop.createLegacyRoot();
+
+    await act(async () => {
+      queueMicrotask(() => {
+        Scheduler.log('Current tree in microtask: ' + root.getChildrenAsJSX());
+        root.render(<Text text="C" />);
+      });
+
+      // This is a regression test. The presence of `batchedUpdates` would cause
+      // these updates to not flush until a microtask. The correct behavior is
+      // that they flush before the microtask queue, regardless of whether
+      // they are wrapped with `batchedUpdates`.
+      ReactNoop.batchedUpdates(() => {
+        root.render(<Text text="A" />);
+        root.render(<Text text="B" />);
+      });
+
+      await null;
+      assertLog([
+        // A and B should render in a single batch _before_ the microtask queue
+        // has run. This replicates the behavior of the original `act`
+        // implementation, for compatibility.
+        'B',
+        'Current tree in microtask: B',
+
+        // C isn't scheduled until a microtask, so it's rendered separately.
+        'C',
+      ]);
+
+      // Subsequent updates should also render in separate batches.
+      root.render(<Text text="D" />);
+      root.render(<Text text="E" />);
+      assertLog(['D', 'E']);
+    });
+  });
+
+  // @gate __DEV__
+  it('unwraps promises by yielding to microtasks (async act scope)', async () => {
+    const promise = Promise.resolve('Async');
+
+    function Fallback() {
+      throw new Error('Fallback should never be rendered');
+    }
+
+    function App() {
+      return use(promise);
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Fallback />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate __DEV__
+  it('unwraps promises by yielding to microtasks (non-async act scope)', async () => {
+    const promise = Promise.resolve('Async');
+
+    function Fallback() {
+      throw new Error('Fallback should never be rendered');
+    }
+
+    function App() {
+      return use(promise);
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Note that the scope function is not an async function
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Fallback />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate __DEV__
+  it('warns if a promise is used in a non-awaited `act` scope', async () => {
+    const promise = new Promise(() => {});
+
+    function Fallback() {
+      throw new Error('Fallback should never be rendered');
+    }
+
+    function App() {
+      return use(promise);
+    }
+
+    spyOnDev(console, 'error').mockImplementation(() => {});
+    const root = ReactNoop.createRoot();
+    act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Fallback />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+
+    // `act` warns after a few microtasks, instead of a macrotask, so that it's
+    // more likely to be attributed to the correct test case.
+    //
+    // The exact number of microtasks is an implementation detail; just needs
+    // to happen when the microtask queue is flushed.
+    await waitForMicrotasks();
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.mock.calls[0][0]).toContain(
+      'A component suspended inside an `act` scope, but the `act` ' +
+        'call was not awaited. When testing React components that ' +
+        'depend on asynchronous data, you must await the result:\n\n' +
+        'await act(() => ...)',
+    );
+  });
+
+  // @gate __DEV__
+  it('does not warn when suspending via legacy `throw` API  in non-awaited `act` scope', async () => {
+    let didResolve = false;
+    let resolvePromise;
+    const promise = new Promise(r => {
+      resolvePromise = () => {
+        didResolve = true;
+        r();
+      };
+    });
+
+    function Fallback() {
+      return 'Loading...';
+    }
+
+    function App() {
+      if (!didResolve) {
+        throw promise;
+      }
+      return 'Async';
+    }
+
+    spyOnDev(console, 'error').mockImplementation(() => {});
+    const root = ReactNoop.createRoot();
+    act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Fallback />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // `act` warns after a few microtasks, instead of a macrotask, so that it's
+    // more likely to be attributed to the correct test case.
+    //
+    // The exact number of microtasks is an implementation detail; just needs
+    // to happen when the microtask queue is flushed.
+    await waitForMicrotasks();
+
+    expect(console.error).toHaveBeenCalledTimes(0);
+
+    // Finish loading the data
+    await act(async () => {
+      resolvePromise();
+    });
+    expect(root).toMatchRenderedOutput('Async');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
new file mode 100644
index 00000000000..3afb0008ab5
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -0,0 +1,1727 @@
+let React;
+let ReactTestRenderer;
+let Scheduler;
+let Suspense;
+let lazy;
+let waitFor;
+let waitForAll;
+let waitForThrow;
+let assertLog;
+let assertConsoleErrorDev;
+let act;
+
+let fakeModuleCache;
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+      return '\n    in ' + name + ' (at **)';
+    })
+  );
+}
+
+describe('ReactLazy', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Suspense = React.Suspense;
+    lazy = React.lazy;
+    ReactTestRenderer = require('react-test-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForThrow = InternalTestUtils.waitForThrow;
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+    act = InternalTestUtils.act;
+
+    fakeModuleCache = new Map();
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return props.text;
+  }
+
+  async function fakeImport(Component) {
+    const record = fakeModuleCache.get(Component);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'pending',
+        value: {default: Component},
+        pings: [],
+        then(ping) {
+          switch (newRecord.status) {
+            case 'pending': {
+              newRecord.pings.push(ping);
+              return;
+            }
+            case 'resolved': {
+              ping(newRecord.value);
+              return;
+            }
+            case 'rejected': {
+              throw newRecord.value;
+            }
+          }
+        },
+      };
+      fakeModuleCache.set(Component, newRecord);
+      return newRecord;
+    }
+    return record;
+  }
+
+  function resolveFakeImport(moduleName) {
+    const record = fakeModuleCache.get(moduleName);
+    if (record === undefined) {
+      throw new Error('Module not found');
+    }
+    if (record.status !== 'pending') {
+      throw new Error('Module already resolved');
+    }
+    record.status = 'resolved';
+    record.pings.forEach(ping => ping(record.value));
+  }
+
+  it('suspends until module has loaded', async () => {
+    const LazyText = lazy(() => fakeImport(Text));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyText text="Hi" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('Hi');
+
+    await act(() => resolveFakeImport(Text));
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+
+    // Should not suspend on update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyText text="Hi again" />
+      </Suspense>,
+    );
+    await waitForAll(['Hi again']);
+    expect(root).toMatchRenderedOutput('Hi again');
+  });
+
+  it('can resolve synchronously without suspending', async () => {
+    const LazyText = lazy(() => ({
+      then(cb) {
+        cb({default: Text});
+      },
+    }));
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyText text="Hi" />
+        </Suspense>,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('can reject synchronously without suspending', async () => {
+    const LazyText = lazy(() => ({
+      then(resolve, reject) {
+        reject(new Error('oh no'));
+      },
+    }));
+
+    class ErrorBoundary extends React.Component {
+      state = {};
+      static getDerivedStateFromError(error) {
+        return {message: error.message};
+      }
+      render() {
+        return this.state.message
+          ? `Error: ${this.state.message}`
+          : this.props.children;
+      }
+    }
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <ErrorBoundary>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <LazyText text="Hi" />
+          </Suspense>
+        </ErrorBoundary>,
+        {unstable_isConcurrent: true},
+      );
+    });
+    assertLog([]);
+    expect(root).toMatchRenderedOutput('Error: oh no');
+  });
+
+  it('multiple lazy components', async () => {
+    function Foo() {
+      return <Text text="Foo" />;
+    }
+
+    function Bar() {
+      return <Text text="Bar" />;
+    }
+
+    const LazyFoo = lazy(() => fakeImport(Foo));
+    const LazyBar = lazy(() => fakeImport(Bar));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyFoo />
+        <LazyBar />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('FooBar');
+
+    await resolveFakeImport(Foo);
+
+    await waitForAll(['Foo']);
+    expect(root).not.toMatchRenderedOutput('FooBar');
+
+    await act(() => resolveFakeImport(Bar));
+    assertLog(['Foo', 'Bar']);
+    expect(root).toMatchRenderedOutput('FooBar');
+  });
+
+  it('does not support arbitrary promises, only module objects', async () => {
+    const LazyText = lazy(async () => Text);
+
+    const root = ReactTestRenderer.create(null, {
+      unstable_isConcurrent: true,
+    });
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyText text="Hi" />
+        </Suspense>
+      );
+    }
+
+    let error;
+    try {
+      await act(() => {
+        root.update(<App />);
+      });
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error.message).toMatch('Element type is invalid');
+    assertLog(['Loading...']);
+    assertConsoleErrorDev([
+      'lazy: Expected the result of a dynamic import() call. ' +
+        'Instead received: function Text(props) {\n' +
+        '    Scheduler.log(props.text);\n' +
+        '    return props.text;\n' +
+        '  }\n\n' +
+        'Your code should look like: \n  ' +
+        "const MyComponent = lazy(() => import('./MyComponent'))\n" +
+        '    in App (at **)',
+      'lazy: Expected the result of a dynamic import() call. ' +
+        'Instead received: function Text(props) {\n' +
+        '    Scheduler.log(props.text);\n' +
+        '    return props.text;\n' +
+        '  }\n\n' +
+        'Your code should look like: \n  ' +
+        "const MyComponent = lazy(() => import('./MyComponent'))\n" +
+        '    in App (at **)',
+    ]);
+    expect(root).not.toMatchRenderedOutput('Hi');
+  });
+
+  it('throws if promise rejects', async () => {
+    const networkError = new Error('Bad network');
+    const LazyText = lazy(async () => {
+      throw networkError;
+    });
+
+    const root = ReactTestRenderer.create(null, {
+      unstable_isConcurrent: true,
+    });
+
+    let error;
+    try {
+      await act(() => {
+        root.update(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <LazyText text="Hi" />
+          </Suspense>,
+        );
+      });
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toBe(networkError);
+    assertLog(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('Hi');
+  });
+
+  it('mount and reorder', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.log('Did update: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    const LazyChildA = lazy(() => {
+      Scheduler.log('Suspend! [LazyChildA]');
+      return fakeImport(Child);
+    });
+    const LazyChildB = lazy(() => {
+      Scheduler.log('Suspend! [LazyChildB]');
+      return fakeImport(Child);
+    });
+
+    function Parent({swap}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {swap
+            ? [
+                <LazyChildB key="B" label="B" />,
+                <LazyChildA key="A" label="A" />,
+              ]
+            : [
+                <LazyChildA key="A" label="A" />,
+                <LazyChildB key="B" label="B" />,
+              ]}
+        </Suspense>
+      );
+    }
+
+    const root = ReactTestRenderer.create(<Parent swap={false} />, {
+      unstable_isConcurrent: true,
+    });
+
+    await waitForAll([
+      'Suspend! [LazyChildA]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [LazyChildB]',
+    ]);
+    expect(root).not.toMatchRenderedOutput('AB');
+
+    await act(async () => {
+      await resolveFakeImport(Child);
+
+      // B suspends even though it happens to share the same import as A.
+      // TODO: React.lazy should implement the `status` and `value` fields, so
+      // we can unwrap the result synchronously if it already loaded. Like `use`.
+      await waitFor([
+        'A',
+        // pre-warming: LazyChildB was already initialized. So it also already resolved
+        // when we called resolveFakeImport above. So it doesn't suspend again.
+        'B',
+      ]);
+    });
+    assertLog(['Did mount: A', 'Did mount: B']);
+    expect(root).toMatchRenderedOutput('AB');
+
+    // Swap the position of A and B
+    root.update(<Parent swap={true} />);
+    await waitForAll(['B', 'A', 'Did update: B', 'Did update: A']);
+    expect(root).toMatchRenderedOutput('BA');
+  });
+
+  it('resolves defaultProps, on mount and update', async () => {
+    class T extends React.Component {
+      render() {
+        return <Text {...this.props} />;
+      }
+    }
+    T.defaultProps = {text: 'Hi'};
+    const LazyText = lazy(() => fakeImport(T));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyText />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('Hi');
+
+    await act(() => resolveFakeImport(T));
+    assertLog(['Hi']);
+
+    expect(root).toMatchRenderedOutput('Hi');
+
+    T.defaultProps = {text: 'Hi again'};
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyText />
+      </Suspense>,
+    );
+    await waitForAll(['Hi again']);
+    expect(root).toMatchRenderedOutput('Hi again');
+  });
+
+  it('resolves defaultProps without breaking memoization', async () => {
+    class LazyImpl extends React.Component {
+      render() {
+        Scheduler.log('Lazy');
+        return (
+          <>
+            <Text text={this.props.siblingText} />
+            {this.props.children}
+          </>
+        );
+      }
+    }
+    LazyImpl.defaultProps = {siblingText: 'Sibling'};
+    const Lazy = lazy(() => fakeImport(LazyImpl));
+
+    class Stateful extends React.Component {
+      state = {text: 'A'};
+      render() {
+        return <Text text={this.state.text} />;
+      }
+    }
+
+    const stateful = React.createRef(null);
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <Lazy>
+          <Stateful ref={stateful} />
+        </Lazy>
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('SiblingA');
+
+    await act(() => resolveFakeImport(LazyImpl));
+    assertLog(['Lazy', 'Sibling', 'A']);
+
+    expect(root).toMatchRenderedOutput('SiblingA');
+
+    // Lazy should not re-render
+    stateful.current.setState({text: 'B'});
+    await waitForAll(['B']);
+    expect(root).toMatchRenderedOutput('SiblingB');
+  });
+
+  it('resolves defaultProps without breaking bailout due to unchanged props and state, #17151', async () => {
+    class LazyImpl extends React.Component {
+      static defaultProps = {value: 0};
+
+      render() {
+        const text = `${this.props.label}: ${this.props.value}`;
+        return <Text text={text} />;
+      }
+    }
+
+    const Lazy = lazy(() => fakeImport(LazyImpl));
+
+    const instance1 = React.createRef(null);
+    const instance2 = React.createRef(null);
+
+    const root = ReactTestRenderer.create(
+      <>
+        <LazyImpl ref={instance1} label="Not lazy" />
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Lazy ref={instance2} label="Lazy" />
+        </Suspense>
+      </>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+    await waitForAll(['Not lazy: 0', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+
+    await act(() => resolveFakeImport(LazyImpl));
+    assertLog(['Lazy: 0']);
+    expect(root).toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+
+    // Should bailout due to unchanged props and state
+    instance1.current.setState(null);
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+
+    // Should bailout due to unchanged props and state
+    instance2.current.setState(null);
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+  });
+
+  it('resolves defaultProps without breaking bailout in PureComponent, #17151', async () => {
+    class LazyImpl extends React.PureComponent {
+      static defaultProps = {value: 0};
+      state = {};
+
+      render() {
+        const text = `${this.props.label}: ${this.props.value}`;
+        return <Text text={text} />;
+      }
+    }
+
+    const Lazy = lazy(() => fakeImport(LazyImpl));
+
+    const instance1 = React.createRef(null);
+    const instance2 = React.createRef(null);
+
+    const root = ReactTestRenderer.create(
+      <>
+        <LazyImpl ref={instance1} label="Not lazy" />
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Lazy ref={instance2} label="Lazy" />
+        </Suspense>
+      </>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+    await waitForAll(['Not lazy: 0', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+
+    await act(() => resolveFakeImport(LazyImpl));
+    assertLog(['Lazy: 0']);
+    expect(root).toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+
+    // Should bailout due to shallow equal props and state
+    instance1.current.setState({});
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+
+    // Should bailout due to shallow equal props and state
+    instance2.current.setState({});
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('Not lazy: 0Lazy: 0');
+  });
+
+  it('sets defaultProps for modern lifecycles', async () => {
+    class C extends React.Component {
+      static defaultProps = {text: 'A'};
+      state = {};
+
+      static getDerivedStateFromProps(props) {
+        Scheduler.log(`getDerivedStateFromProps: ${props.text}`);
+        return null;
+      }
+
+      constructor(props) {
+        super(props);
+        Scheduler.log(`constructor: ${this.props.text}`);
+      }
+
+      componentDidMount() {
+        Scheduler.log(`componentDidMount: ${this.props.text}`);
+      }
+
+      componentDidUpdate(prevProps) {
+        Scheduler.log(
+          `componentDidUpdate: ${prevProps.text} -> ${this.props.text}`,
+        );
+      }
+
+      componentWillUnmount() {
+        Scheduler.log(`componentWillUnmount: ${this.props.text}`);
+      }
+
+      shouldComponentUpdate(nextProps) {
+        Scheduler.log(
+          `shouldComponentUpdate: ${this.props.text} -> ${nextProps.text}`,
+        );
+        return true;
+      }
+
+      getSnapshotBeforeUpdate(prevProps) {
+        Scheduler.log(
+          `getSnapshotBeforeUpdate: ${prevProps.text} -> ${this.props.text}`,
+        );
+        return null;
+      }
+
+      render() {
+        return <Text text={this.props.text + this.props.num} />;
+      }
+    }
+
+    const LazyClass = lazy(() => fakeImport(C));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyClass num={1} />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('A1');
+
+    await act(() => resolveFakeImport(C));
+    assertLog([
+      'constructor: A',
+      'getDerivedStateFromProps: A',
+      'A1',
+      'componentDidMount: A',
+    ]);
+
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyClass num={2} />
+      </Suspense>,
+    );
+    await waitForAll([
+      'getDerivedStateFromProps: A',
+      'shouldComponentUpdate: A -> A',
+      'A2',
+      'getSnapshotBeforeUpdate: A -> A',
+      'componentDidUpdate: A -> A',
+    ]);
+    expect(root).toMatchRenderedOutput('A2');
+
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyClass num={3} />
+      </Suspense>,
+    );
+    await waitForAll([
+      'getDerivedStateFromProps: A',
+      'shouldComponentUpdate: A -> A',
+      'A3',
+      'getSnapshotBeforeUpdate: A -> A',
+      'componentDidUpdate: A -> A',
+    ]);
+    expect(root).toMatchRenderedOutput('A3');
+  });
+
+  it('sets defaultProps for legacy lifecycles', async () => {
+    class C extends React.Component {
+      static defaultProps = {text: 'A'};
+      state = {};
+
+      UNSAFE_componentWillMount() {
+        Scheduler.log(`UNSAFE_componentWillMount: ${this.props.text}`);
+      }
+
+      UNSAFE_componentWillUpdate(nextProps) {
+        Scheduler.log(
+          `UNSAFE_componentWillUpdate: ${this.props.text} -> ${nextProps.text}`,
+        );
+      }
+
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        Scheduler.log(
+          `UNSAFE_componentWillReceiveProps: ${this.props.text} -> ${nextProps.text}`,
+        );
+      }
+
+      render() {
+        return <Text text={this.props.text + this.props.num} />;
+      }
+    }
+
+    const LazyClass = lazy(() => fakeImport(C));
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyClass num={1} />
+        </Suspense>,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    assertLog(['Loading...']);
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await resolveFakeImport(C);
+
+    assertLog([]);
+
+    await act(() => {
+      root.update(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyClass num={2} />
+        </Suspense>,
+      );
+    });
+
+    assertLog(['UNSAFE_componentWillMount: A', 'A2']);
+    expect(root).toMatchRenderedOutput('A2');
+
+    await act(() => {
+      root.update(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyClass num={3} />
+        </Suspense>,
+      );
+    });
+    assertLog([
+      'UNSAFE_componentWillReceiveProps: A -> A',
+      'UNSAFE_componentWillUpdate: A -> A',
+      'A3',
+    ]);
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('A3');
+  });
+
+  it('throws with a useful error when wrapping invalid type with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(42));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(42);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: 42. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping Fragment with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.Fragment));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.Fragment);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Fragment. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  // @gate !fb
+  it('throws with a useful error when wrapping createPortal with lazy()', async () => {
+    const ReactDOM = require('react-dom');
+    const container = document.createElement('div');
+    const portal = ReactDOM.createPortal(<div />, container);
+    const BadLazy = lazy(() => fakeImport(portal));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(portal);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Portal. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping Profiler with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.Profiler));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.Profiler);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Profiler. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping StrictMode with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.StrictMode));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.StrictMode);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: StrictMode. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping Suspense with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.Suspense));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.Suspense);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Suspense. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping Context with lazy()', async () => {
+    const Context = React.createContext(null);
+    const BadLazy = lazy(() => fakeImport(Context));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(Context);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Context. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping Context.Consumer with lazy()', async () => {
+    const Context = React.createContext(null);
+    const BadLazy = lazy(() => fakeImport(Context.Consumer));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(Context.Consumer);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Context.Consumer. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('throws with a useful error when wrapping SuspenseList with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.unstable_SuspenseList));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.unstable_SuspenseList);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: SuspenseList. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  // @gate enableViewTransition
+  it('throws with a useful error when wrapping ViewTransition with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.ViewTransition));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.ViewTransition);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: ViewTransition. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  // @gate enableActivity
+  it('throws with a useful error when wrapping Activity with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.Activity));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.Activity);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: Activity. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  // @gate enableTransitionTracing
+  it('throws with a useful error when wrapping TracingMarker with lazy()', async () => {
+    const BadLazy = lazy(() => fakeImport(React.unstable_TracingMarker));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+
+    await resolveFakeImport(React.unstable_TracingMarker);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <BadLazy />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: TracingMarker. ' +
+        'Lazy element type must resolve to a class or function.',
+    );
+  });
+
+  it('throws with a useful error when wrapping lazy() multiple times', async () => {
+    const Lazy1 = lazy(() => fakeImport(Text));
+    const Lazy2 = lazy(() => fakeImport(Lazy1));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <Lazy2 text="Hello" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('Hello');
+
+    await resolveFakeImport(Lazy1);
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <Lazy2 text="Hello" />
+      </Suspense>,
+    );
+    await waitForThrow(
+      'Element type is invalid. Received a promise that resolves to: [object Object]. ' +
+        'Lazy element type must resolve to a class or function.' +
+        (__DEV__
+          ? ' Did you wrap a component in React.lazy() more than once?'
+          : ''),
+    );
+  });
+
+  it('resolves props for function component without defaultProps', async () => {
+    function Add(props) {
+      return props.inner + props.outer;
+    }
+    const LazyAdd = lazy(() => fakeImport(Add));
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner="2" outer="2" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('22');
+
+    // Mount
+    await act(() => resolveFakeImport(Add));
+
+    expect(root).toMatchRenderedOutput('22');
+
+    // Update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner={false} outer={false} />
+      </Suspense>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('resolves props for class component with defaultProps', async () => {
+    class Add extends React.Component {
+      render() {
+        expect(this.props.innerWithDefault).toBe(42);
+        return this.props.inner + this.props.outer;
+      }
+    }
+    Add.defaultProps = {
+      innerWithDefault: 42,
+    };
+    const LazyAdd = lazy(() => fakeImport(Add));
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner="2" outer="2" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('22');
+
+    // Mount
+    await act(() => resolveFakeImport(Add));
+
+    expect(root).toMatchRenderedOutput('22');
+
+    // Update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner={false} outer={false} />
+      </Suspense>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('resolves props for class component without defaultProps', async () => {
+    class Add extends React.Component {
+      render() {
+        return this.props.inner + this.props.outer;
+      }
+    }
+    const LazyAdd = lazy(() => fakeImport(Add));
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner="2" outer="2" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('22');
+
+    // Mount
+    await act(() => resolveFakeImport(Add));
+
+    expect(root).toMatchRenderedOutput('22');
+
+    // Update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner={false} outer={false} />
+      </Suspense>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('resolves props for forwardRef component without defaultProps', async () => {
+    const Add = React.forwardRef((props, ref) => {
+      return props.inner + props.outer;
+    });
+    Add.displayName = 'Add';
+
+    const LazyAdd = lazy(() => fakeImport(Add));
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner="2" outer="2" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('22');
+
+    // Mount
+    await act(() => resolveFakeImport(Add));
+
+    expect(root).toMatchRenderedOutput('22');
+
+    // Update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner={false} outer={false} />
+      </Suspense>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('resolves props for outer memo component without defaultProps', async () => {
+    let Add = props => {
+      return props.inner + props.outer;
+    };
+    Add = React.memo(Add);
+    const LazyAdd = lazy(() => fakeImport(Add));
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner="2" outer="2" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('22');
+
+    // Mount
+    await act(() => resolveFakeImport(Add));
+
+    expect(root).toMatchRenderedOutput('22');
+
+    // Update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner={false} outer={false} />
+      </Suspense>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('resolves props for inner memo component without defaultProps', async () => {
+    const Add = props => {
+      return props.inner + props.outer;
+    };
+    Add.displayName = 'Add';
+    const LazyAdd = lazy(() => fakeImport(Add));
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner="2" outer="2" />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('22');
+
+    // Mount
+    await act(() => resolveFakeImport(Add));
+
+    expect(root).toMatchRenderedOutput('22');
+
+    // Update
+    root.update(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyAdd inner={false} outer={false} />
+      </Suspense>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('0');
+  });
+
+  it('includes lazy-loaded component in warning stack', async () => {
+    const Foo = props => <div>{[<Text text="A" />, <Text text="B" />]}</div>;
+    const LazyFoo = lazy(() => {
+      Scheduler.log('Started loading');
+      return fakeImport(Foo);
+    });
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyFoo />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Started loading', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput(<div>AB</div>);
+
+    await act(() => resolveFakeImport(Foo));
+    assertLog(['A', 'B']);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n' +
+        '\n' +
+        'Check the render method of `Foo`. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Foo (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput(<div>AB</div>);
+  });
+
+  it('supports class and forwardRef components', async () => {
+    class Foo extends React.Component {
+      render() {
+        return <Text text="Foo" />;
+      }
+    }
+    const LazyClass = lazy(() => {
+      return fakeImport(Foo);
+    });
+
+    class Bar extends React.Component {
+      render() {
+        return <Text text="Bar" />;
+      }
+    }
+    const ForwardRefBar = React.forwardRef((props, ref) => {
+      Scheduler.log('forwardRef');
+      return <Bar ref={ref} />;
+    });
+
+    const LazyForwardRef = lazy(() => {
+      return fakeImport(ForwardRefBar);
+    });
+
+    const ref = React.createRef();
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyClass />
+        <LazyForwardRef ref={ref} />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    await waitForAll(['Loading...']);
+    expect(root).not.toMatchRenderedOutput('FooBar');
+    expect(ref.current).toBe(null);
+
+    await act(() => resolveFakeImport(Foo));
+    assertLog(['Foo']);
+
+    await act(() => resolveFakeImport(ForwardRefBar));
+    assertLog(['Foo', 'forwardRef', 'Bar']);
+    expect(root).toMatchRenderedOutput('FooBar');
+    expect(ref.current).not.toBe(null);
+  });
+
+  it('should error with a component stack naming the resolved component', async () => {
+    let componentStackMessage;
+
+    function ResolvedText() {
+      throw new Error('oh no');
+    }
+    const LazyText = lazy(() => fakeImport(ResolvedText));
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+
+      componentDidCatch(error, errMessage) {
+        componentStackMessage = normalizeCodeLocInfo(errMessage.componentStack);
+        this.setState({
+          error,
+        });
+      }
+
+      render() {
+        return this.state.error ? null : this.props.children;
+      }
+    }
+
+    ReactTestRenderer.create(
+      <ErrorBoundary>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyText text="Hi" />
+        </Suspense>
+      </ErrorBoundary>,
+      {unstable_isConcurrent: true},
+    );
+
+    await waitForAll(['Loading...']);
+
+    await act(() => resolveFakeImport(ResolvedText));
+    assertLog([]);
+
+    expect(componentStackMessage).toContain('in ResolvedText');
+  });
+
+  it('should error with a component stack containing Lazy if unresolved', async () => {
+    let componentStackMessage;
+
+    const LazyText = lazy(() => ({
+      then(resolve, reject) {
+        reject(new Error('oh no'));
+      },
+    }));
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+
+      componentDidCatch(error, errMessage) {
+        componentStackMessage = normalizeCodeLocInfo(errMessage.componentStack);
+        this.setState({
+          error,
+        });
+      }
+
+      render() {
+        return this.state.error ? null : this.props.children;
+      }
+    }
+
+    await act(() => {
+      ReactTestRenderer.create(
+        <ErrorBoundary>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <LazyText text="Hi" />
+          </Suspense>
+        </ErrorBoundary>,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    assertLog([]);
+
+    expect(componentStackMessage).toContain('in Lazy');
+  });
+
+  it('mount and reorder lazy types', async () => {
+    class Child extends React.Component {
+      componentWillUnmount() {
+        Scheduler.log('Did unmount: ' + this.props.label);
+      }
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.log('Did update: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    function ChildA({lowerCase}) {
+      return <Child label={lowerCase ? 'a' : 'A'} />;
+    }
+
+    function ChildB({lowerCase}) {
+      return <Child label={lowerCase ? 'b' : 'B'} />;
+    }
+
+    const LazyChildA = lazy(() => {
+      Scheduler.log('Init A');
+      return fakeImport(ChildA);
+    });
+    const LazyChildB = lazy(() => {
+      Scheduler.log('Init B');
+      return fakeImport(ChildB);
+    });
+    const LazyChildA2 = lazy(() => {
+      Scheduler.log('Init A2');
+      return fakeImport(ChildA);
+    });
+    let resolveB2;
+    const LazyChildB2 = lazy(() => {
+      Scheduler.log('Init B2');
+      return new Promise(r => {
+        resolveB2 = r;
+      });
+    });
+
+    function Parent({swap}) {
+      return (
+        <Suspense fallback={<Text text="Outer..." />}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {swap
+              ? [
+                  <LazyChildB2 key="B" lowerCase={true} />,
+                  <LazyChildA2 key="A" lowerCase={true} />,
+                ]
+              : [<LazyChildA key="A" />, <LazyChildB key="B" />]}
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    const root = ReactTestRenderer.create(<Parent swap={false} />, {
+      unstable_isConcurrent: true,
+    });
+
+    await waitForAll([
+      'Init A',
+      'Loading...',
+      // pre-warming
+      'Init B',
+    ]);
+    expect(root).not.toMatchRenderedOutput('AB');
+
+    await act(() => resolveFakeImport(ChildA));
+    assertLog(['A']);
+
+    await act(() => resolveFakeImport(ChildB));
+    assertLog(['A', 'B', 'Did mount: A', 'Did mount: B']);
+    expect(root).toMatchRenderedOutput('AB');
+
+    // Swap the position of A and B
+    root.update(<Parent swap={true} />);
+    await waitForAll([
+      'Init B2',
+      'Loading...',
+      'Did unmount: A',
+      'Did unmount: B',
+    ]);
+
+    // The suspense boundary should've triggered now.
+    expect(root).toMatchRenderedOutput('Loading...');
+    await act(() => resolveB2({default: ChildB}));
+
+    // We need to flush to trigger the second one to load.
+    assertLog(['Init A2', 'b', 'a', 'Did mount: b', 'Did mount: a']);
+    expect(root).toMatchRenderedOutput('ba');
+  });
+
+  it('mount and reorder lazy elements', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.log('Did update: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    const ChildA = <Child key="A" label="A" />;
+    const lazyChildA = lazy(() => {
+      Scheduler.log('Init A');
+      return fakeImport(ChildA);
+    });
+    const ChildB = <Child key="B" label="B" />;
+    const lazyChildB = lazy(() => {
+      Scheduler.log('Init B');
+      return fakeImport(ChildB);
+    });
+    const ChildA2 = <Child key="A" label="a" />;
+    const lazyChildA2 = lazy(() => {
+      Scheduler.log('Init A2');
+      return fakeImport(ChildA2);
+    });
+    const ChildB2 = <Child key="B" label="b" />;
+    const lazyChildB2 = lazy(() => {
+      Scheduler.log('Init B2');
+      return fakeImport(ChildB2);
+    });
+
+    function Parent({swap}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {swap ? [lazyChildB2, lazyChildA2] : [lazyChildA, lazyChildB]}
+        </Suspense>
+      );
+    }
+
+    const root = ReactTestRenderer.create(<Parent swap={false} />, {
+      unstable_isConcurrent: true,
+    });
+
+    await waitForAll(['Init A', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput('AB');
+
+    await act(() => resolveFakeImport(ChildA));
+    // We need to flush to trigger the B to load.
+    await assertLog(['Init B']);
+    await act(() => resolveFakeImport(ChildB));
+    assertLog(['A', 'B', 'Did mount: A', 'Did mount: B']);
+    expect(root).toMatchRenderedOutput('AB');
+
+    // Swap the position of A and B
+    React.startTransition(() => {
+      root.update(<Parent swap={true} />);
+    });
+    await waitForAll(['Init B2', 'Loading...']);
+    await act(() => resolveFakeImport(ChildB2));
+    // We need to flush to trigger the second one to load.
+    assertLog(['Init A2', 'Loading...']);
+    await act(() => resolveFakeImport(ChildA2));
+    assertLog(['b', 'a', 'Did update: b', 'Did update: a']);
+    expect(root).toMatchRenderedOutput('ba');
+  });
+
+  describe('legacy mode', () => {
+    // @gate !disableLegacyMode
+    it('mount and reorder lazy elements (legacy mode)', async () => {
+      class Child extends React.Component {
+        componentDidMount() {
+          Scheduler.log('Did mount: ' + this.props.label);
+        }
+        componentDidUpdate() {
+          Scheduler.log('Did update: ' + this.props.label);
+        }
+        render() {
+          return <Text text={this.props.label} />;
+        }
+      }
+
+      const ChildA = <Child key="A" label="A" />;
+      const lazyChildA = lazy(() => {
+        Scheduler.log('Init A');
+        return fakeImport(ChildA);
+      });
+      const ChildB = <Child key="B" label="B" />;
+      const lazyChildB = lazy(() => {
+        Scheduler.log('Init B');
+        return fakeImport(ChildB);
+      });
+      const ChildA2 = <Child key="A" label="a" />;
+      const lazyChildA2 = lazy(() => {
+        Scheduler.log('Init A2');
+        return fakeImport(ChildA2);
+      });
+      const ChildB2 = <Child key="B" label="b" />;
+      const lazyChildB2 = lazy(() => {
+        Scheduler.log('Init B2');
+        return fakeImport(ChildB2);
+      });
+
+      function Parent({swap}) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            {swap ? [lazyChildB2, lazyChildA2] : [lazyChildA, lazyChildB]}
+          </Suspense>
+        );
+      }
+
+      const root = ReactTestRenderer.create(<Parent swap={false} />, {
+        unstable_isConcurrent: false,
+      });
+
+      assertLog(['Init A', 'Loading...']);
+      expect(root).not.toMatchRenderedOutput('AB');
+
+      await resolveFakeImport(ChildA);
+      // We need to flush to trigger the B to load.
+      await waitForAll(['Init B']);
+      await resolveFakeImport(ChildB);
+
+      await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']);
+      expect(root).toMatchRenderedOutput('AB');
+
+      // Swap the position of A and B
+      root.update(<Parent swap={true} />);
+      assertLog(['Init B2', 'Loading...']);
+      await resolveFakeImport(ChildB2);
+      // We need to flush to trigger the second one to load.
+      await waitForAll(['Init A2']);
+      await resolveFakeImport(ChildA2);
+
+      await waitForAll(['b', 'a', 'Did update: b', 'Did update: a']);
+      expect(root).toMatchRenderedOutput('ba');
+    });
+
+    // @gate !disableLegacyMode
+    it('mount and reorder lazy types (legacy mode)', async () => {
+      class Child extends React.Component {
+        componentDidMount() {
+          Scheduler.log('Did mount: ' + this.props.label);
+        }
+        componentDidUpdate() {
+          Scheduler.log('Did update: ' + this.props.label);
+        }
+        render() {
+          return <Text text={this.props.label} />;
+        }
+      }
+
+      function ChildA({lowerCase}) {
+        return <Child label={lowerCase ? 'a' : 'A'} />;
+      }
+
+      function ChildB({lowerCase}) {
+        return <Child label={lowerCase ? 'b' : 'B'} />;
+      }
+
+      const LazyChildA = lazy(() => {
+        Scheduler.log('Init A');
+        return fakeImport(ChildA);
+      });
+      const LazyChildB = lazy(() => {
+        Scheduler.log('Init B');
+        return fakeImport(ChildB);
+      });
+      const LazyChildA2 = lazy(() => {
+        Scheduler.log('Init A2');
+        return fakeImport(ChildA);
+      });
+      const LazyChildB2 = lazy(() => {
+        Scheduler.log('Init B2');
+        return fakeImport(ChildB);
+      });
+
+      function Parent({swap}) {
+        return (
+          <Suspense fallback={<Text text="Outer..." />}>
+            <Suspense fallback={<Text text="Loading..." />}>
+              {swap
+                ? [
+                    <LazyChildB2 key="B" lowerCase={true} />,
+                    <LazyChildA2 key="A" lowerCase={true} />,
+                  ]
+                : [<LazyChildA key="A" />, <LazyChildB key="B" />]}
+            </Suspense>
+          </Suspense>
+        );
+      }
+
+      const root = ReactTestRenderer.create(<Parent swap={false} />, {
+        unstable_isConcurrent: false,
+      });
+
+      assertLog(['Init A', 'Init B', 'Loading...']);
+      expect(root).not.toMatchRenderedOutput('AB');
+
+      await resolveFakeImport(ChildA);
+      await resolveFakeImport(ChildB);
+
+      await waitForAll(['A', 'B', 'Did mount: A', 'Did mount: B']);
+      expect(root).toMatchRenderedOutput('AB');
+
+      // Swap the position of A and B
+      root.update(<Parent swap={true} />);
+      assertLog(['Init B2', 'Loading...']);
+      await waitForAll(['Init A2', 'b', 'a', 'Did update: b', 'Did update: a']);
+      expect(root).toMatchRenderedOutput('ba');
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
new file mode 100644
index 00000000000..e96dc72e6a1
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -0,0 +1,566 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-func-assign */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Suspense;
+let Scheduler;
+let act;
+let waitForAll;
+let assertLog;
+let assertConsoleErrorDev;
+
+describe('memo', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    ({Suspense} = React);
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text} />;
+  }
+
+  async function fakeImport(result) {
+    return {default: result};
+  }
+
+  // Tests should run against both the lazy and non-lazy versions of `memo`.
+  // To make the tests work for both versions, we wrap the non-lazy version in
+  // a lazy function component.
+  sharedTests('normal', (...args) => {
+    const Memo = React.memo(...args);
+    function Indirection(props) {
+      return <Memo {...props} />;
+    }
+    return React.lazy(() => fakeImport(Indirection));
+  });
+  sharedTests('lazy', (...args) => {
+    const Memo = React.memo(...args);
+    return React.lazy(() => fakeImport(Memo));
+  });
+
+  function sharedTests(label, memo) {
+    describe(`${label}`, () => {
+      it('bails out on props equality', async () => {
+        function Counter({count}) {
+          return <Text text={count} />;
+        }
+        Counter = memo(Counter);
+
+        await act(() =>
+          ReactNoop.render(
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Counter count={0} />
+            </Suspense>,
+          ),
+        );
+        assertLog(['Loading...', 0]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+        // Should bail out because props have not changed
+        ReactNoop.render(
+          <Suspense>
+            <Counter count={0} />
+          </Suspense>,
+        );
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+        // Should update because count prop changed
+        ReactNoop.render(
+          <Suspense>
+            <Counter count={1} />
+          </Suspense>,
+        );
+        await waitForAll([1]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+      });
+
+      it("does not bail out if there's a context change", async () => {
+        const CountContext = React.createContext(0);
+
+        function readContext(Context) {
+          const dispatcher =
+            React
+              .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+              .H;
+          return dispatcher.readContext(Context);
+        }
+
+        function Counter(props) {
+          const count = readContext(CountContext);
+          return <Text text={`${props.label}: ${count}`} />;
+        }
+        Counter = memo(Counter);
+
+        class Parent extends React.Component {
+          state = {count: 0};
+          render() {
+            return (
+              <Suspense fallback={<Text text="Loading..." />}>
+                <CountContext.Provider value={this.state.count}>
+                  <Counter label="Count" />
+                </CountContext.Provider>
+              </Suspense>
+            );
+          }
+        }
+
+        const parent = React.createRef(null);
+        await act(() => ReactNoop.render(<Parent ref={parent} />));
+        assertLog(['Loading...', 'Count: 0']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+        // Should bail out because props have not changed
+        ReactNoop.render(<Parent ref={parent} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+
+        // Should update because there was a context change
+        parent.current.setState({count: 1});
+        await waitForAll(['Count: 1']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+      });
+
+      it('consistent behavior for reusing props object across different function component types', async () => {
+        // This test is a bit complicated because it relates to an
+        // implementation detail. We don't have strong guarantees that the props
+        // object is referentially equal during updates where we can't bail
+        // out anyway — like if the props are shallowly equal, but there's a
+        // local state or context update in the same batch.
+        //
+        // However, as a principle, we should aim to make the behavior
+        // consistent across different ways of memoizing a component. For
+        // example, React.memo has a different internal Fiber layout if you pass
+        // a normal function component (SimpleMemoComponent) versus if you pass
+        // a different type like forwardRef (MemoComponent). But this is an
+        // implementation detail. Wrapping a component in forwardRef (or
+        // React.lazy, etc) shouldn't affect whether the props object is reused
+        // during a bailout.
+        //
+        // So this test isn't primarily about asserting a particular behavior
+        // for reusing the props object; it's about making sure the behavior
+        // is consistent.
+
+        const {useEffect, useState} = React;
+
+        let setSimpleMemoStep;
+        const SimpleMemo = React.memo(props => {
+          const [step, setStep] = useState(0);
+          setSimpleMemoStep = setStep;
+
+          const prevProps = React.useRef(props);
+          useEffect(() => {
+            if (props !== prevProps.current) {
+              prevProps.current = props;
+              Scheduler.log('Props changed [SimpleMemo]');
+            }
+          }, [props]);
+
+          return <Text text={`SimpleMemo [${props.prop}${step}]`} />;
+        });
+
+        let setComplexMemo;
+        const ComplexMemo = React.memo(
+          React.forwardRef((props, ref) => {
+            const [step, setStep] = useState(0);
+            setComplexMemo = setStep;
+
+            const prevProps = React.useRef(props);
+            useEffect(() => {
+              if (props !== prevProps.current) {
+                prevProps.current = props;
+                Scheduler.log('Props changed [ComplexMemo]');
+              }
+            }, [props]);
+
+            return <Text text={`ComplexMemo [${props.prop}${step}]`} />;
+          }),
+        );
+
+        let setMemoWithIndirectionStep;
+        const MemoWithIndirection = React.memo(props => {
+          return <Indirection props={props} />;
+        });
+        function Indirection({props}) {
+          const [step, setStep] = useState(0);
+          setMemoWithIndirectionStep = setStep;
+
+          const prevProps = React.useRef(props);
+          useEffect(() => {
+            if (props !== prevProps.current) {
+              prevProps.current = props;
+              Scheduler.log('Props changed [MemoWithIndirection]');
+            }
+          }, [props]);
+
+          return <Text text={`MemoWithIndirection [${props.prop}${step}]`} />;
+        }
+
+        function setLocalUpdateOnChildren(step) {
+          setSimpleMemoStep(step);
+          setMemoWithIndirectionStep(step);
+          setComplexMemo(step);
+        }
+
+        function App({prop}) {
+          return (
+            <>
+              <SimpleMemo prop={prop} />
+              <ComplexMemo prop={prop} />
+              <MemoWithIndirection prop={prop} />
+            </>
+          );
+        }
+
+        const root = ReactNoop.createRoot();
+        await act(() => {
+          root.render(<App prop="A" />);
+        });
+        assertLog([
+          'SimpleMemo [A0]',
+          'ComplexMemo [A0]',
+          'MemoWithIndirection [A0]',
+        ]);
+
+        // Demonstrate what happens when the props change
+        await act(() => {
+          root.render(<App prop="B" />);
+        });
+        assertLog([
+          'SimpleMemo [B0]',
+          'ComplexMemo [B0]',
+          'MemoWithIndirection [B0]',
+          'Props changed [SimpleMemo]',
+          'Props changed [ComplexMemo]',
+          'Props changed [MemoWithIndirection]',
+        ]);
+
+        // Demonstrate what happens when the prop object changes but there's a
+        // bailout because all the individual props are the same.
+        await act(() => {
+          root.render(<App prop="B" />);
+        });
+        // Nothing re-renders
+        assertLog([]);
+
+        // Demonstrate what happens when the prop object changes, it bails out
+        // because all the props are the same, but we still render the
+        // children because there's a local update in the same batch.
+        await act(() => {
+          root.render(<App prop="B" />);
+          setLocalUpdateOnChildren(1);
+        });
+        // The components should re-render with the new local state, but none
+        // of the props objects should have changed
+        assertLog([
+          'SimpleMemo [B1]',
+          'ComplexMemo [B1]',
+          'MemoWithIndirection [B1]',
+        ]);
+
+        // Do the same thing again. We should still reuse the props object.
+        await act(() => {
+          root.render(<App prop="B" />);
+          setLocalUpdateOnChildren(2);
+        });
+        // The components should re-render with the new local state, but none
+        // of the props objects should have changed
+        assertLog([
+          'SimpleMemo [B2]',
+          'ComplexMemo [B2]',
+          'MemoWithIndirection [B2]',
+        ]);
+      });
+
+      it('accepts custom comparison function', async () => {
+        function Counter({count}) {
+          return <Text text={count} />;
+        }
+        Counter = memo(Counter, (oldProps, newProps) => {
+          Scheduler.log(
+            `Old count: ${oldProps.count}, New count: ${newProps.count}`,
+          );
+          return oldProps.count === newProps.count;
+        });
+
+        await act(() =>
+          ReactNoop.render(
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Counter count={0} />
+            </Suspense>,
+          ),
+        );
+        assertLog(['Loading...', 0]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+        // Should bail out because props have not changed
+        ReactNoop.render(
+          <Suspense>
+            <Counter count={0} />
+          </Suspense>,
+        );
+        await waitForAll(['Old count: 0, New count: 0']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+        // Should update because count prop changed
+        ReactNoop.render(
+          <Suspense>
+            <Counter count={1} />
+          </Suspense>,
+        );
+        await waitForAll(['Old count: 0, New count: 1', 1]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+      });
+
+      it('supports non-pure class components', async () => {
+        class CounterInner extends React.Component {
+          static defaultProps = {suffix: '!'};
+          render() {
+            return <Text text={this.props.count + String(this.props.suffix)} />;
+          }
+        }
+        const Counter = memo(CounterInner);
+
+        await act(() =>
+          ReactNoop.render(
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Counter count={0} />
+            </Suspense>,
+          ),
+        );
+        assertLog(['Loading...', '0!']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="0!" />);
+
+        // Should bail out because props have not changed
+        ReactNoop.render(
+          <Suspense>
+            <Counter count={0} />
+          </Suspense>,
+        );
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="0!" />);
+
+        // Should update because count prop changed
+        ReactNoop.render(
+          <Suspense>
+            <Counter count={1} />
+          </Suspense>,
+        );
+        await waitForAll(['1!']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="1!" />);
+      });
+
+      it('warns if the first argument is undefined', () => {
+        memo();
+        assertConsoleErrorDev(
+          [
+            'memo: The first argument must be a component. Instead ' +
+              'received: undefined',
+          ],
+          {withoutStack: true},
+        );
+      });
+
+      it('warns if the first argument is null', () => {
+        memo(null);
+        assertConsoleErrorDev(
+          [
+            'memo: The first argument must be a component. Instead ' +
+              'received: null',
+          ],
+          {withoutStack: true},
+        );
+      });
+
+      it('does not drop lower priority state updates when bailing out at higher pri (simple)', async () => {
+        const {useState} = React;
+
+        let setCounter;
+        const Counter = memo(() => {
+          const [counter, _setCounter] = useState(0);
+          setCounter = _setCounter;
+          return counter;
+        });
+
+        function App() {
+          return (
+            <Suspense fallback="Loading...">
+              <Counter />
+            </Suspense>
+          );
+        }
+
+        const root = ReactNoop.createRoot();
+        await act(() => {
+          root.render(<App />);
+        });
+        expect(root).toMatchRenderedOutput('0');
+
+        await act(() => {
+          setCounter(1);
+          ReactNoop.discreteUpdates(() => {
+            root.render(<App />);
+          });
+        });
+        expect(root).toMatchRenderedOutput('1');
+      });
+
+      it('does not drop lower priority state updates when bailing out at higher pri (complex)', async () => {
+        const {useState} = React;
+
+        let setCounter;
+        const Counter = memo(
+          () => {
+            const [counter, _setCounter] = useState(0);
+            setCounter = _setCounter;
+            return counter;
+          },
+          (a, b) => a.complexProp.val === b.complexProp.val,
+        );
+
+        function App() {
+          return (
+            <Suspense fallback="Loading...">
+              <Counter complexProp={{val: 1}} />
+            </Suspense>
+          );
+        }
+
+        const root = ReactNoop.createRoot();
+        await act(() => {
+          root.render(<App />);
+        });
+        expect(root).toMatchRenderedOutput('0');
+
+        await act(() => {
+          setCounter(1);
+          ReactNoop.discreteUpdates(() => {
+            root.render(<App />);
+          });
+        });
+        expect(root).toMatchRenderedOutput('1');
+      });
+    });
+
+    it('should skip memo in the stack if neither displayName nor name are present', async () => {
+      const MemoComponent = React.memo(props => [<span />]);
+      ReactNoop.render(
+        <p>
+          <MemoComponent />
+        </p>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop. ' +
+          'See https://react.dev/link/warning-keys for more information.\n' +
+          '    in span (at **)\n' +
+          '    in **/ReactMemo-test.js:**:** (at **)',
+      ]);
+    });
+
+    it('should use the inner function name for the stack', async () => {
+      const MemoComponent = React.memo(function Inner(props, ref) {
+        return [<span />];
+      });
+      ReactNoop.render(
+        <p>
+          <MemoComponent />
+        </p>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop.' +
+          '\n\nCheck the top-level render call using <Inner>. It was passed a child from Inner. ' +
+          'See https://react.dev/link/warning-keys for more information.\n' +
+          '    in span (at **)\n' +
+          '    in Inner (at **)',
+      ]);
+    });
+
+    it('should use the inner name in the stack', async () => {
+      const fn = (props, ref) => {
+        return [<span />];
+      };
+      Object.defineProperty(fn, 'name', {value: 'Inner'});
+      const MemoComponent = React.memo(fn);
+      ReactNoop.render(
+        <p>
+          <MemoComponent />
+        </p>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop.' +
+          '\n\nCheck the top-level render call using <Inner>. It was passed a child from Inner. ' +
+          'See https://react.dev/link/warning-keys for more information.\n' +
+          '    in span (at **)\n' +
+          '    in Inner (at **)',
+      ]);
+    });
+
+    it('can use the outer displayName in the stack', async () => {
+      const MemoComponent = React.memo((props, ref) => {
+        return [<span />];
+      });
+      MemoComponent.displayName = 'Outer';
+      ReactNoop.render(
+        <p>
+          <MemoComponent />
+        </p>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop.' +
+          '\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
+          'See https://react.dev/link/warning-keys for more information.\n' +
+          '    in span (at **)\n' +
+          '    in Outer (at **)',
+      ]);
+    });
+
+    it('should prefer the inner to the outer displayName in the stack', async () => {
+      const fn = (props, ref) => {
+        return [<span />];
+      };
+      Object.defineProperty(fn, 'name', {value: 'Inner'});
+      const MemoComponent = React.memo(fn);
+      MemoComponent.displayName = 'Outer';
+      ReactNoop.render(
+        <p>
+          <MemoComponent />
+        </p>,
+      );
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop.' +
+          '\n\nCheck the top-level render call using <Inner>. It was passed a child from Inner. ' +
+          'See https://react.dev/link/warning-keys for more information.\n' +
+          '    in span (at **)\n' +
+          '    in Inner (at **)',
+      ]);
+    });
+  }
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
new file mode 100644
index 00000000000..2a61b1192d9
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -0,0 +1,1677 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = require('react');
+let useContext;
+let ReactNoop;
+let Scheduler;
+let gen;
+let waitForAll;
+let waitFor;
+let waitForThrow;
+let assertConsoleErrorDev;
+
+describe('ReactNewContext', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    useContext = React.useContext;
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    gen = require('random-seed');
+
+    ({
+      waitForAll,
+      waitFor,
+      waitForThrow,
+      assertConsoleErrorDev,
+    } = require('internal-test-utils'));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text} />;
+  }
+
+  function span(prop) {
+    return {type: 'span', children: [], prop, hidden: false};
+  }
+
+  function readContext(Context) {
+    const dispatcher =
+      React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.H;
+    return dispatcher.readContext(Context);
+  }
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  // We have several ways of reading from context. sharedContextTests runs
+  // a suite of tests for a given context consumer implementation.
+  sharedContextTests('Context.Consumer', Context => Context.Consumer);
+  sharedContextTests(
+    'useContext inside function component',
+    Context =>
+      function Consumer(props) {
+        const contextValue = useContext(Context);
+        const render = props.children;
+        return render(contextValue);
+      },
+  );
+  sharedContextTests('useContext inside forwardRef component', Context =>
+    React.forwardRef(function Consumer(props, ref) {
+      const contextValue = useContext(Context);
+      const render = props.children;
+      return render(contextValue);
+    }),
+  );
+  sharedContextTests('useContext inside memoized function component', Context =>
+    React.memo(function Consumer(props) {
+      const contextValue = useContext(Context);
+      const render = props.children;
+      return render(contextValue);
+    }),
+  );
+  sharedContextTests(
+    'readContext(Context) inside class component',
+    Context =>
+      class Consumer extends React.Component {
+        render() {
+          const contextValue = readContext(Context);
+          const render = this.props.children;
+          return render(contextValue);
+        }
+      },
+  );
+  sharedContextTests(
+    'readContext(Context) inside pure class component',
+    Context =>
+      class Consumer extends React.PureComponent {
+        render() {
+          const contextValue = readContext(Context);
+          const render = this.props.children;
+          return render(contextValue);
+        }
+      },
+  );
+
+  function sharedContextTests(label, getConsumer) {
+    describe(`reading context with ${label}`, () => {
+      it('simple mount and update', async () => {
+        const Context = React.createContext(1);
+        const Consumer = getConsumer(Context);
+
+        const Indirection = React.Fragment;
+
+        function App(props) {
+          return (
+            <Context.Provider value={props.value}>
+              <Indirection>
+                <Indirection>
+                  <Consumer>
+                    {value => <span prop={'Result: ' + value} />}
+                  </Consumer>
+                </Indirection>
+              </Indirection>
+            </Context.Provider>
+          );
+        }
+
+        ReactNoop.render(<App value={2} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
+
+        // Update
+        ReactNoop.render(<App value={3} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 3" />);
+      });
+
+      it('propagates through shouldComponentUpdate false', async () => {
+        const Context = React.createContext(1);
+        const ContextConsumer = getConsumer(Context);
+
+        function Provider(props) {
+          Scheduler.log('Provider');
+          return (
+            <Context.Provider value={props.value}>
+              {props.children}
+            </Context.Provider>
+          );
+        }
+
+        function Consumer(props) {
+          Scheduler.log('Consumer');
+          return (
+            <ContextConsumer>
+              {value => {
+                Scheduler.log('Consumer render prop');
+                return <span prop={'Result: ' + value} />;
+              }}
+            </ContextConsumer>
+          );
+        }
+
+        class Indirection extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+          render() {
+            Scheduler.log('Indirection');
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          Scheduler.log('App');
+          return (
+            <Provider value={props.value}>
+              <Indirection>
+                <Indirection>
+                  <Consumer />
+                </Indirection>
+              </Indirection>
+            </Provider>
+          );
+        }
+
+        ReactNoop.render(<App value={2} />);
+        await waitForAll([
+          'App',
+          'Provider',
+          'Indirection',
+          'Indirection',
+          'Consumer',
+          'Consumer render prop',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
+
+        // Update
+        ReactNoop.render(<App value={3} />);
+        await waitForAll(['App', 'Provider', 'Consumer render prop']);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 3" />);
+      });
+
+      it('consumers bail out if context value is the same', async () => {
+        const Context = React.createContext(1);
+        const ContextConsumer = getConsumer(Context);
+
+        function Provider(props) {
+          Scheduler.log('Provider');
+          return (
+            <Context.Provider value={props.value}>
+              {props.children}
+            </Context.Provider>
+          );
+        }
+
+        function Consumer(props) {
+          Scheduler.log('Consumer');
+          return (
+            <ContextConsumer>
+              {value => {
+                Scheduler.log('Consumer render prop');
+                return <span prop={'Result: ' + value} />;
+              }}
+            </ContextConsumer>
+          );
+        }
+
+        class Indirection extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+          render() {
+            Scheduler.log('Indirection');
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          Scheduler.log('App');
+          return (
+            <Provider value={props.value}>
+              <Indirection>
+                <Indirection>
+                  <Consumer />
+                </Indirection>
+              </Indirection>
+            </Provider>
+          );
+        }
+
+        ReactNoop.render(<App value={2} />);
+        await waitForAll([
+          'App',
+          'Provider',
+          'Indirection',
+          'Indirection',
+          'Consumer',
+          'Consumer render prop',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
+
+        // Update with the same context value
+        ReactNoop.render(<App value={2} />);
+        await waitForAll([
+          'App',
+          'Provider',
+          // Don't call render prop again
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 2" />);
+      });
+
+      it('nested providers', async () => {
+        const Context = React.createContext(1);
+        const Consumer = getConsumer(Context);
+
+        function Provider(props) {
+          return (
+            <Consumer>
+              {contextValue => (
+                // Multiply previous context value by 2, unless prop overrides
+                <Context.Provider value={props.value || contextValue * 2}>
+                  {props.children}
+                </Context.Provider>
+              )}
+            </Consumer>
+          );
+        }
+
+        class Indirection extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+          render() {
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          return (
+            <Provider value={props.value}>
+              <Indirection>
+                <Provider>
+                  <Indirection>
+                    <Provider>
+                      <Indirection>
+                        <Consumer>
+                          {value => <span prop={'Result: ' + value} />}
+                        </Consumer>
+                      </Indirection>
+                    </Provider>
+                  </Indirection>
+                </Provider>
+              </Indirection>
+            </Provider>
+          );
+        }
+
+        ReactNoop.render(<App value={2} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 8" />);
+
+        // Update
+        ReactNoop.render(<App value={3} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: 12" />);
+      });
+
+      it('should provide the correct (default) values to consumers outside of a provider', async () => {
+        const FooContext = React.createContext({value: 'foo-initial'});
+        const BarContext = React.createContext({value: 'bar-initial'});
+        const FooConsumer = getConsumer(FooContext);
+        const BarConsumer = getConsumer(BarContext);
+
+        const Verify = ({actual, expected}) => {
+          expect(expected).toBe(actual);
+          return null;
+        };
+
+        ReactNoop.render(
+          <>
+            <BarContext.Provider value={{value: 'bar-updated'}}>
+              <BarConsumer>
+                {({value}) => <Verify actual={value} expected="bar-updated" />}
+              </BarConsumer>
+
+              <FooContext.Provider value={{value: 'foo-updated'}}>
+                <FooConsumer>
+                  {({value}) => (
+                    <Verify actual={value} expected="foo-updated" />
+                  )}
+                </FooConsumer>
+              </FooContext.Provider>
+            </BarContext.Provider>
+
+            <FooConsumer>
+              {({value}) => <Verify actual={value} expected="foo-initial" />}
+            </FooConsumer>
+            <BarConsumer>
+              {({value}) => <Verify actual={value} expected="bar-initial" />}
+            </BarConsumer>
+          </>,
+        );
+        await waitForAll([]);
+      });
+
+      it('multiple consumers in different branches', async () => {
+        const Context = React.createContext(1);
+        const Consumer = getConsumer(Context);
+
+        function Provider(props) {
+          return (
+            <Context.Consumer>
+              {contextValue => (
+                // Multiply previous context value by 2, unless prop overrides
+                <Context.Provider value={props.value || contextValue * 2}>
+                  {props.children}
+                </Context.Provider>
+              )}
+            </Context.Consumer>
+          );
+        }
+
+        class Indirection extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+          render() {
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          return (
+            <Provider value={props.value}>
+              <Indirection>
+                <Indirection>
+                  <Provider>
+                    <Consumer>
+                      {value => <span prop={'Result: ' + value} />}
+                    </Consumer>
+                  </Provider>
+                </Indirection>
+                <Indirection>
+                  <Consumer>
+                    {value => <span prop={'Result: ' + value} />}
+                  </Consumer>
+                </Indirection>
+              </Indirection>
+            </Provider>
+          );
+        }
+
+        ReactNoop.render(<App value={2} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Result: 4" />
+            <span prop="Result: 2" />
+          </>,
+        );
+
+        // Update
+        ReactNoop.render(<App value={3} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Result: 6" />
+            <span prop="Result: 3" />
+          </>,
+        );
+
+        // Another update
+        ReactNoop.render(<App value={4} />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Result: 8" />
+            <span prop="Result: 4" />
+          </>,
+        );
+      });
+
+      it('compares context values with Object.is semantics', async () => {
+        const Context = React.createContext(1);
+        const ContextConsumer = getConsumer(Context);
+
+        function Provider(props) {
+          Scheduler.log('Provider');
+          return (
+            <Context.Provider value={props.value}>
+              {props.children}
+            </Context.Provider>
+          );
+        }
+
+        function Consumer(props) {
+          Scheduler.log('Consumer');
+          return (
+            <ContextConsumer>
+              {value => {
+                Scheduler.log('Consumer render prop');
+                return <span prop={'Result: ' + value} />;
+              }}
+            </ContextConsumer>
+          );
+        }
+
+        class Indirection extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+          render() {
+            Scheduler.log('Indirection');
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          Scheduler.log('App');
+          return (
+            <Provider value={props.value}>
+              <Indirection>
+                <Indirection>
+                  <Consumer />
+                </Indirection>
+              </Indirection>
+            </Provider>
+          );
+        }
+
+        ReactNoop.render(<App value={NaN} />);
+        await waitForAll([
+          'App',
+          'Provider',
+          'Indirection',
+          'Indirection',
+          'Consumer',
+          'Consumer render prop',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: NaN" />);
+
+        // Update
+        ReactNoop.render(<App value={NaN} />);
+        await waitForAll([
+          'App',
+          'Provider',
+          // Consumer should not re-render again
+          // 'Consumer render prop',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Result: NaN" />);
+      });
+
+      it('context unwinds when interrupted', async () => {
+        const Context = React.createContext('Default');
+        const ContextConsumer = getConsumer(Context);
+
+        function Consumer(props) {
+          return (
+            <ContextConsumer>
+              {value => <span prop={'Result: ' + value} />}
+            </ContextConsumer>
+          );
+        }
+
+        function BadRender() {
+          throw new Error('Bad render');
+        }
+
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          componentDidCatch(error) {
+            this.setState({error});
+          }
+          render() {
+            if (this.state.error) {
+              return null;
+            }
+            return this.props.children;
+          }
+        }
+
+        function App(props) {
+          return (
+            <>
+              <Context.Provider value="Does not unwind">
+                <ErrorBoundary>
+                  <Context.Provider value="Unwinds after BadRender throws">
+                    <BadRender />
+                  </Context.Provider>
+                </ErrorBoundary>
+                <Consumer />
+              </Context.Provider>
+            </>
+          );
+        }
+
+        ReactNoop.render(<App value="A" />);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          // The second provider should use the default value.
+          <span prop="Result: Does not unwind" />,
+        );
+      });
+
+      it("does not re-render if there's an update in a child", async () => {
+        const Context = React.createContext(0);
+        const Consumer = getConsumer(Context);
+
+        let child;
+        class Child extends React.Component {
+          state = {step: 0};
+          render() {
+            Scheduler.log('Child');
+            return (
+              <span
+                prop={`Context: ${this.props.context}, Step: ${this.state.step}`}
+              />
+            );
+          }
+        }
+
+        function App(props) {
+          return (
+            <Context.Provider value={props.value}>
+              <Consumer>
+                {value => {
+                  Scheduler.log('Consumer render prop');
+                  return <Child ref={inst => (child = inst)} context={value} />;
+                }}
+              </Consumer>
+            </Context.Provider>
+          );
+        }
+
+        // Initial mount
+        ReactNoop.render(<App value={1} />);
+        await waitForAll(['Consumer render prop', 'Child']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Context: 1, Step: 0" />,
+        );
+
+        child.setState({step: 1});
+        await waitForAll(['Child']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <span prop="Context: 1, Step: 1" />,
+        );
+      });
+
+      it('consumer bails out if value is unchanged and something above bailed out', async () => {
+        const Context = React.createContext(0);
+        const Consumer = getConsumer(Context);
+
+        function renderChildValue(value) {
+          Scheduler.log('Consumer');
+          return <span prop={value} />;
+        }
+
+        function ChildWithInlineRenderCallback() {
+          Scheduler.log('ChildWithInlineRenderCallback');
+          // Note: we are intentionally passing an inline arrow. Don't refactor.
+          return <Consumer>{value => renderChildValue(value)}</Consumer>;
+        }
+
+        function ChildWithCachedRenderCallback() {
+          Scheduler.log('ChildWithCachedRenderCallback');
+          return <Consumer>{renderChildValue}</Consumer>;
+        }
+
+        class PureIndirection extends React.PureComponent {
+          render() {
+            Scheduler.log('PureIndirection');
+            return (
+              <>
+                <ChildWithInlineRenderCallback />
+                <ChildWithCachedRenderCallback />
+              </>
+            );
+          }
+        }
+
+        class App extends React.Component {
+          render() {
+            Scheduler.log('App');
+            return (
+              <Context.Provider value={this.props.value}>
+                <PureIndirection />
+              </Context.Provider>
+            );
+          }
+        }
+
+        // Initial mount
+        ReactNoop.render(<App value={1} />);
+        await waitForAll([
+          'App',
+          'PureIndirection',
+          'ChildWithInlineRenderCallback',
+          'Consumer',
+          'ChildWithCachedRenderCallback',
+          'Consumer',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop={1} />
+            <span prop={1} />
+          </>,
+        );
+
+        // Update (bailout)
+        ReactNoop.render(<App value={1} />);
+        await waitForAll(['App']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop={1} />
+            <span prop={1} />
+          </>,
+        );
+
+        // Update (no bailout)
+        ReactNoop.render(<App value={2} />);
+        await waitForAll(['App', 'Consumer', 'Consumer']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop={2} />
+            <span prop={2} />
+          </>,
+        );
+      });
+
+      // @gate enableLegacyHidden
+      it("context consumer doesn't bail out inside hidden subtree", async () => {
+        const Context = React.createContext('dark');
+        const Consumer = getConsumer(Context);
+
+        function App({theme}) {
+          return (
+            <Context.Provider value={theme}>
+              <LegacyHiddenDiv mode="hidden">
+                <Consumer>{value => <Text text={value} />}</Consumer>
+              </LegacyHiddenDiv>
+            </Context.Provider>
+          );
+        }
+
+        ReactNoop.render(<App theme="dark" />);
+        await waitForAll(['dark']);
+        expect(ReactNoop.getChildrenAsJSX()).toEqual(
+          <div hidden={true}>
+            <span prop="dark" />
+          </div>,
+        );
+
+        ReactNoop.render(<App theme="light" />);
+        await waitForAll(['light']);
+        expect(ReactNoop.getChildrenAsJSX()).toEqual(
+          <div hidden={true}>
+            <span prop="light" />
+          </div>,
+        );
+      });
+
+      // This is a regression case for https://github.com/facebook/react/issues/12389.
+      it('does not run into an infinite loop', async () => {
+        const Context = React.createContext(null);
+        const Consumer = getConsumer(Context);
+
+        class App extends React.Component {
+          renderItem(id) {
+            return (
+              <span key={id}>
+                <Consumer>{() => <span>inner</span>}</Consumer>
+                <span>outer</span>
+              </span>
+            );
+          }
+          renderList() {
+            const list = [1, 2].map(id => this.renderItem(id));
+            if (this.props.reverse) {
+              list.reverse();
+            }
+            return list;
+          }
+          render() {
+            return (
+              <Context.Provider value={{}}>
+                {this.renderList()}
+              </Context.Provider>
+            );
+          }
+        }
+
+        ReactNoop.render(<App reverse={false} />);
+        await waitForAll([]);
+        ReactNoop.render(<App reverse={true} />);
+        await waitForAll([]);
+        ReactNoop.render(<App reverse={false} />);
+        await waitForAll([]);
+      });
+
+      // This is a regression case for https://github.com/facebook/react/issues/12686
+      it('does not skip some siblings', async () => {
+        const Context = React.createContext(0);
+        const ContextConsumer = getConsumer(Context);
+
+        class App extends React.Component {
+          state = {
+            step: 0,
+          };
+
+          render() {
+            Scheduler.log('App');
+            return (
+              <Context.Provider value={this.state.step}>
+                <StaticContent />
+                {this.state.step > 0 && <Indirection />}
+              </Context.Provider>
+            );
+          }
+        }
+
+        class StaticContent extends React.PureComponent {
+          render() {
+            return (
+              <>
+                <>
+                  <span prop="static 1" />
+                  <span prop="static 2" />
+                </>
+              </>
+            );
+          }
+        }
+
+        class Indirection extends React.PureComponent {
+          render() {
+            return (
+              <ContextConsumer>
+                {value => {
+                  Scheduler.log('Consumer');
+                  return <span prop={value} />;
+                }}
+              </ContextConsumer>
+            );
+          }
+        }
+
+        // Initial mount
+        let inst;
+        ReactNoop.render(<App ref={ref => (inst = ref)} />);
+        await waitForAll(['App']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="static 1" />
+            <span prop="static 2" />
+          </>,
+        );
+        // Update the first time
+        inst.setState({step: 1});
+        await waitForAll(['App', 'Consumer']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="static 1" />
+            <span prop="static 2" />
+            <span prop={1} />
+          </>,
+        );
+        // Update the second time
+        inst.setState({step: 2});
+        await waitForAll(['App', 'Consumer']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="static 1" />
+            <span prop="static 2" />
+            <span prop={2} />
+          </>,
+        );
+      });
+    });
+  }
+
+  describe('Context.Provider', () => {
+    it('warns if no value prop provided', async () => {
+      const Context = React.createContext();
+
+      ReactNoop.render(
+        <Context.Provider anyPropNameOtherThanValue="value could be anything" />,
+      );
+
+      await waitForAll([]);
+      assertConsoleErrorDev(
+        [
+          'The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?',
+        ],
+        {
+          withoutStack: true,
+        },
+      );
+    });
+
+    it('warns if multiple renderers concurrently render the same context', async () => {
+      spyOnDev(console, 'error').mockImplementation(() => {});
+      const Context = React.createContext(0);
+
+      function Foo(props) {
+        Scheduler.log('Foo');
+        return null;
+      }
+
+      function App(props) {
+        return (
+          <Context.Provider value={props.value}>
+            <Foo />
+            <Foo />
+          </Context.Provider>
+        );
+      }
+
+      React.startTransition(() => {
+        ReactNoop.render(<App value={1} />);
+      });
+      // Render past the Provider, but don't commit yet
+      await waitFor(['Foo']);
+
+      // Get a new copy of ReactNoop
+      jest.resetModules();
+      React = require('react');
+      ReactNoop = require('react-noop-renderer');
+      Scheduler = require('scheduler');
+      const InternalTestUtils = require('internal-test-utils');
+      waitForAll = InternalTestUtils.waitForAll;
+      waitFor = InternalTestUtils.waitFor;
+
+      // Render the provider again using a different renderer
+      ReactNoop.render(<App value={1} />);
+      await waitForAll(['Foo', 'Foo']);
+
+      if (__DEV__) {
+        expect(console.error.mock.calls[0][0]).toContain(
+          'Detected multiple renderers concurrently rendering the same ' +
+            'context provider. This is currently unsupported',
+        );
+      }
+    });
+
+    it('does not warn if multiple renderers use the same context sequentially', async () => {
+      spyOnDev(console, 'error');
+      const Context = React.createContext(0);
+
+      function Foo(props) {
+        Scheduler.log('Foo');
+        return null;
+      }
+
+      function App(props) {
+        return (
+          <Context.Provider value={props.value}>
+            <Foo />
+            <Foo />
+          </Context.Provider>
+        );
+      }
+
+      React.startTransition(() => {
+        ReactNoop.render(<App value={1} />);
+      });
+      await waitForAll(['Foo', 'Foo']);
+
+      // Get a new copy of ReactNoop
+      jest.resetModules();
+      React = require('react');
+      ReactNoop = require('react-noop-renderer');
+      Scheduler = require('scheduler');
+      const InternalTestUtils = require('internal-test-utils');
+      waitForAll = InternalTestUtils.waitForAll;
+      waitFor = InternalTestUtils.waitFor;
+
+      // Render the provider again using a different renderer
+      ReactNoop.render(<App value={1} />);
+      await waitForAll(['Foo', 'Foo']);
+
+      if (__DEV__) {
+        expect(console.error).not.toHaveBeenCalled();
+      }
+    });
+
+    it('provider bails out if children and value are unchanged (like sCU)', async () => {
+      const Context = React.createContext(0);
+
+      function Child() {
+        Scheduler.log('Child');
+        return <span prop="Child" />;
+      }
+
+      const children = <Child />;
+
+      function App(props) {
+        Scheduler.log('App');
+        return (
+          <Context.Provider value={props.value}>{children}</Context.Provider>
+        );
+      }
+
+      // Initial mount
+      ReactNoop.render(<App value={1} />);
+      await waitForAll(['App', 'Child']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
+
+      // Update
+      ReactNoop.render(<App value={1} />);
+      await waitForAll([
+        'App',
+        // Child does not re-render
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
+    });
+
+    // @gate !disableLegacyContext
+    it('provider does not bail out if legacy context changed above', async () => {
+      const Context = React.createContext(0);
+
+      function Child() {
+        Scheduler.log('Child');
+        return <span prop="Child" />;
+      }
+
+      const children = <Child />;
+
+      class LegacyProvider extends React.Component {
+        static childContextTypes = {
+          legacyValue: () => {},
+        };
+        state = {legacyValue: 1};
+        getChildContext() {
+          return {legacyValue: this.state.legacyValue};
+        }
+        render() {
+          Scheduler.log('LegacyProvider');
+          return this.props.children;
+        }
+      }
+
+      class App extends React.Component {
+        state = {value: 1};
+        render() {
+          Scheduler.log('App');
+          return (
+            <Context.Provider value={this.state.value}>
+              {this.props.children}
+            </Context.Provider>
+          );
+        }
+      }
+
+      const legacyProviderRef = React.createRef();
+      const appRef = React.createRef();
+
+      // Initial mount
+      ReactNoop.render(
+        <LegacyProvider ref={legacyProviderRef}>
+          <App ref={appRef} value={1}>
+            {children}
+          </App>
+        </LegacyProvider>,
+      );
+      await waitForAll(['LegacyProvider', 'App', 'Child']);
+      assertConsoleErrorDev([
+        'LegacyProvider uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in LegacyProvider (at **)',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
+
+      // Update App with same value (should bail out)
+      appRef.current.setState({value: 1});
+      await waitForAll(['App']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
+
+      // Update LegacyProvider (should not bail out)
+      legacyProviderRef.current.setState({value: 1});
+      await waitForAll(['LegacyProvider', 'App', 'Child']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
+
+      // Update App with same value (should bail out)
+      appRef.current.setState({value: 1});
+      await waitForAll(['App']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Child" />);
+    });
+  });
+
+  describe('Context.Consumer', () => {
+    it('warns if child is not a function', async () => {
+      spyOnDev(console, 'error').mockImplementation(() => {});
+      const Context = React.createContext(0);
+      ReactNoop.render(<Context.Consumer />);
+      await waitForThrow('is not a function');
+      if (__DEV__) {
+        expect(console.error.mock.calls[0][0]).toContain(
+          'A context consumer was rendered with multiple children, or a child ' +
+            "that isn't a function",
+        );
+      }
+    });
+
+    it('can read other contexts inside consumer render prop', async () => {
+      const FooContext = React.createContext(0);
+      const BarContext = React.createContext(0);
+
+      function FooAndBar() {
+        return (
+          <FooContext.Consumer>
+            {foo => {
+              const bar = readContext(BarContext);
+              return <Text text={`Foo: ${foo}, Bar: ${bar}`} />;
+            }}
+          </FooContext.Consumer>
+        );
+      }
+
+      class Indirection extends React.Component {
+        shouldComponentUpdate() {
+          return false;
+        }
+        render() {
+          return this.props.children;
+        }
+      }
+
+      function App(props) {
+        return (
+          <FooContext.Provider value={props.foo}>
+            <BarContext.Provider value={props.bar}>
+              <Indirection>
+                <FooAndBar />
+              </Indirection>
+            </BarContext.Provider>
+          </FooContext.Provider>
+        );
+      }
+
+      ReactNoop.render(<App foo={1} bar={1} />);
+      await waitForAll(['Foo: 1, Bar: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Foo: 1, Bar: 1" />);
+
+      // Update foo
+      ReactNoop.render(<App foo={2} bar={1} />);
+      await waitForAll(['Foo: 2, Bar: 1']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Foo: 2, Bar: 1" />);
+
+      // Update bar
+      ReactNoop.render(<App foo={2} bar={2} />);
+      await waitForAll(['Foo: 2, Bar: 2']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Foo: 2, Bar: 2" />);
+    });
+
+    // Context consumer bails out on propagating "deep" updates when `value` hasn't changed.
+    // However, it doesn't bail out from rendering if the component above it re-rendered anyway.
+    // If we bailed out on referential equality, it would be confusing that you
+    // can call this.setState(), but an autobound render callback "blocked" the update.
+    // https://github.com/facebook/react/pull/12470#issuecomment-376917711
+    it('consumer does not bail out if there were no bailouts above it', async () => {
+      const Context = React.createContext(0);
+      const Consumer = Context.Consumer;
+
+      class App extends React.Component {
+        state = {
+          text: 'hello',
+        };
+
+        renderConsumer = context => {
+          Scheduler.log('App#renderConsumer');
+          return <span prop={this.state.text} />;
+        };
+
+        render() {
+          Scheduler.log('App');
+          return (
+            <Context.Provider value={this.props.value}>
+              <Consumer>{this.renderConsumer}</Consumer>
+            </Context.Provider>
+          );
+        }
+      }
+
+      // Initial mount
+      let inst;
+      ReactNoop.render(<App value={1} ref={ref => (inst = ref)} />);
+      await waitForAll(['App', 'App#renderConsumer']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="hello" />);
+
+      // Update
+      inst.setState({text: 'goodbye'});
+      await waitForAll(['App', 'App#renderConsumer']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
+    });
+  });
+
+  describe('readContext', () => {
+    // Unstable changedBits API was removed. Port this test to context selectors
+    // once that exists.
+    // @gate FIXME
+    it('can read the same context multiple times in the same function', async () => {
+      const Context = React.createContext({foo: 0, bar: 0, baz: 0}, (a, b) => {
+        let result = 0;
+        if (a.foo !== b.foo) {
+          result |= 0b001;
+        }
+        if (a.bar !== b.bar) {
+          result |= 0b010;
+        }
+        if (a.baz !== b.baz) {
+          result |= 0b100;
+        }
+        return result;
+      });
+
+      function Provider(props) {
+        return (
+          <Context.Provider
+            value={{foo: props.foo, bar: props.bar, baz: props.baz}}>
+            {props.children}
+          </Context.Provider>
+        );
+      }
+
+      function FooAndBar() {
+        const {foo} = readContext(Context, 0b001);
+        const {bar} = readContext(Context, 0b010);
+        return <Text text={`Foo: ${foo}, Bar: ${bar}`} />;
+      }
+
+      function Baz() {
+        const {baz} = readContext(Context, 0b100);
+        return <Text text={'Baz: ' + baz} />;
+      }
+
+      class Indirection extends React.Component {
+        shouldComponentUpdate() {
+          return false;
+        }
+        render() {
+          return this.props.children;
+        }
+      }
+
+      function App(props) {
+        return (
+          <Provider foo={props.foo} bar={props.bar} baz={props.baz}>
+            <Indirection>
+              <Indirection>
+                <FooAndBar />
+              </Indirection>
+              <Indirection>
+                <Baz />
+              </Indirection>
+            </Indirection>
+          </Provider>
+        );
+      }
+
+      ReactNoop.render(<App foo={1} bar={1} baz={1} />);
+      await waitForAll(['Foo: 1, Bar: 1', 'Baz: 1']);
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 1, Bar: 1" />,
+        <span prop="Baz: 1" />,
+      ]);
+
+      // Update only foo
+      ReactNoop.render(<App foo={2} bar={1} baz={1} />);
+      await waitForAll(['Foo: 2, Bar: 1']);
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 2, Bar: 1" />,
+        <span prop="Baz: 1" />,
+      ]);
+
+      // Update only bar
+      ReactNoop.render(<App foo={2} bar={2} baz={1} />);
+      await waitForAll(['Foo: 2, Bar: 2']);
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 2, Bar: 2" />,
+        <span prop="Baz: 1" />,
+      ]);
+
+      // Update only baz
+      ReactNoop.render(<App foo={2} bar={2} baz={2} />);
+      await waitForAll(['Baz: 2']);
+      expect(ReactNoop).toMatchRenderedOutput([
+        <span prop="Foo: 2, Bar: 2" />,
+        <span prop="Baz: 2" />,
+      ]);
+    });
+
+    // Context consumer bails out on propagating "deep" updates when `value` hasn't changed.
+    // However, it doesn't bail out from rendering if the component above it re-rendered anyway.
+    // If we bailed out on referential equality, it would be confusing that you
+    // can call this.setState(), but an autobound render callback "blocked" the update.
+    // https://github.com/facebook/react/pull/12470#issuecomment-376917711
+    it('does not bail out if there were no bailouts above it', async () => {
+      const Context = React.createContext(0);
+
+      class Consumer extends React.Component {
+        render() {
+          const contextValue = readContext(Context);
+          return this.props.children(contextValue);
+        }
+      }
+
+      class App extends React.Component {
+        state = {
+          text: 'hello',
+        };
+
+        renderConsumer = context => {
+          Scheduler.log('App#renderConsumer');
+          return <span prop={this.state.text} />;
+        };
+
+        render() {
+          Scheduler.log('App');
+          return (
+            <Context.Provider value={this.props.value}>
+              <Consumer>{this.renderConsumer}</Consumer>
+            </Context.Provider>
+          );
+        }
+      }
+
+      // Initial mount
+      let inst;
+      ReactNoop.render(<App value={1} ref={ref => (inst = ref)} />);
+      await waitForAll(['App', 'App#renderConsumer']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="hello" />);
+
+      // Update
+      inst.setState({text: 'goodbye'});
+      await waitForAll(['App', 'App#renderConsumer']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
+    });
+
+    it('warns when reading context inside render phase class setState updater', async () => {
+      const ThemeContext = React.createContext('light');
+
+      class Cls extends React.Component {
+        state = {};
+        render() {
+          this.setState(() => {
+            readContext(ThemeContext);
+          });
+          return null;
+        }
+      }
+
+      ReactNoop.render(<Cls />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Cannot update during an existing state transition (such as within `render`). ' +
+          'Render methods should be a pure function of props and state.\n' +
+          '    in Cls (at **)',
+        '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().\n' +
+          '    in Cls (at **)',
+      ]);
+    });
+  });
+
+  describe('useContext', () => {
+    it('throws when used in a class component', async () => {
+      const Context = React.createContext(0);
+      class Foo extends React.Component {
+        render() {
+          return useContext(Context);
+        }
+      }
+      ReactNoop.render(<Foo />);
+      await waitForThrow(
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen' +
+          ' for one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      );
+    });
+
+    it('warns when passed a consumer', async () => {
+      const Context = React.createContext(0);
+      function Foo() {
+        return useContext(Context.Consumer);
+      }
+      ReactNoop.render(<Foo />);
+      await waitForAll([]);
+      assertConsoleErrorDev([
+        'Calling useContext(Context.Consumer) is not supported and will cause bugs. ' +
+          'Did you mean to call useContext(Context) instead?\n' +
+          '    in Foo (at **)',
+      ]);
+    });
+
+    // Context consumer bails out on propagating "deep" updates when `value` hasn't changed.
+    // However, it doesn't bail out from rendering if the component above it re-rendered anyway.
+    // If we bailed out on referential equality, it would be confusing that you
+    // can call this.setState(), but an autobound render callback "blocked" the update.
+    // https://github.com/facebook/react/pull/12470#issuecomment-376917711
+    it('does not bail out if there were no bailouts above it', async () => {
+      const Context = React.createContext(0);
+
+      function Consumer({children}) {
+        const contextValue = useContext(Context);
+        return children(contextValue);
+      }
+
+      class App extends React.Component {
+        state = {
+          text: 'hello',
+        };
+
+        renderConsumer = context => {
+          Scheduler.log('App#renderConsumer');
+          return <span prop={this.state.text} />;
+        };
+
+        render() {
+          Scheduler.log('App');
+          return (
+            <Context.Provider value={this.props.value}>
+              <Consumer>{this.renderConsumer}</Consumer>
+            </Context.Provider>
+          );
+        }
+      }
+
+      // Initial mount
+      let inst;
+      ReactNoop.render(<App value={1} ref={ref => (inst = ref)} />);
+      await waitForAll(['App', 'App#renderConsumer']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="hello" />);
+
+      // Update
+      inst.setState({text: 'goodbye'});
+      await waitForAll(['App', 'App#renderConsumer']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="goodbye" />);
+    });
+  });
+
+  it('unwinds after errors in complete phase', async () => {
+    const Context = React.createContext(0);
+
+    // This is a regression test for stack misalignment
+    // caused by unwinding the context from wrong point.
+    ReactNoop.render(
+      <errorInCompletePhase>
+        <Context.Provider value={null} />
+      </errorInCompletePhase>,
+    );
+    await waitForThrow('Error in host config.');
+
+    ReactNoop.render(
+      <Context.Provider value={10}>
+        <Context.Consumer>{value => <span prop={value} />}</Context.Consumer>
+      </Context.Provider>,
+    );
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={10} />);
+  });
+
+  describe('fuzz test', () => {
+    const contextKeys = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+
+    const FLUSH_ALL = 'FLUSH_ALL';
+    function flushAll() {
+      return {
+        type: FLUSH_ALL,
+        toString() {
+          return `flushAll()`;
+        },
+      };
+    }
+
+    const FLUSH = 'FLUSH';
+    function flush(unitsOfWork) {
+      return {
+        type: FLUSH,
+        unitsOfWork,
+        toString() {
+          return `flush(${unitsOfWork})`;
+        },
+      };
+    }
+
+    const UPDATE = 'UPDATE';
+    function update(key, value) {
+      return {
+        type: UPDATE,
+        key,
+        value,
+        toString() {
+          return `update('${key}', ${value})`;
+        },
+      };
+    }
+
+    function randomInteger(min, max) {
+      min = Math.ceil(min);
+      max = Math.floor(max);
+      return Math.floor(Math.random() * (max - min)) + min;
+    }
+
+    function randomAction() {
+      switch (randomInteger(0, 3)) {
+        case 0:
+          return flushAll();
+        case 1:
+          return flush(randomInteger(0, 500));
+        case 2:
+          const key = contextKeys[randomInteger(0, contextKeys.length)];
+          const value = randomInteger(1, 10);
+          return update(key, value);
+        default:
+          throw new Error('Switch statement should be exhaustive');
+      }
+    }
+
+    function randomActions(n) {
+      const actions = [];
+      for (let i = 0; i < n; i++) {
+        actions.push(randomAction());
+      }
+      return actions;
+    }
+
+    function ContextSimulator(maxDepth) {
+      const contexts = new Map(
+        contextKeys.map(key => {
+          const Context = React.createContext(0);
+          Context.displayName = 'Context' + key;
+          return [key, Context];
+        }),
+      );
+
+      class ConsumerTree extends React.Component {
+        shouldComponentUpdate() {
+          return false;
+        }
+        render() {
+          Scheduler.log();
+          if (this.props.depth >= this.props.maxDepth) {
+            return null;
+          }
+          const consumers = [0, 1, 2].map(i => {
+            const randomKey =
+              contextKeys[
+                this.props.rand.intBetween(0, contextKeys.length - 1)
+              ];
+            const Context = contexts.get(randomKey);
+            return (
+              <Context.Consumer key={i}>
+                {value => (
+                  <>
+                    <span prop={`${randomKey}:${value}`} />
+                    <ConsumerTree
+                      rand={this.props.rand}
+                      depth={this.props.depth + 1}
+                      maxDepth={this.props.maxDepth}
+                    />
+                  </>
+                )}
+              </Context.Consumer>
+            );
+          });
+          return consumers;
+        }
+      }
+
+      function Root(props) {
+        return contextKeys.reduceRight(
+          (children, key) => {
+            const Context = contexts.get(key);
+            const value = props.values[key];
+            return (
+              <Context.Provider value={value}>{children}</Context.Provider>
+            );
+          },
+          <ConsumerTree
+            rand={props.rand}
+            depth={0}
+            maxDepth={props.maxDepth}
+          />,
+        );
+      }
+
+      const initialValues = contextKeys.reduce(
+        (result, key, i) => ({...result, [key]: i + 1}),
+        {},
+      );
+
+      function assertConsistentTree(expectedValues = {}) {
+        const jsx = ReactNoop.getChildrenAsJSX();
+        const children = jsx === null ? [] : jsx.props.children;
+        children.forEach(child => {
+          const text = child.props.prop;
+          const key = text[0];
+          const value = parseInt(text[2], 10);
+          const expectedValue = expectedValues[key];
+          if (expectedValue === undefined) {
+            // If an expected value was not explicitly passed to this function,
+            // use the first occurrence.
+            expectedValues[key] = value;
+          } else if (value !== expectedValue) {
+            throw new Error(
+              `Inconsistent value! Expected: ${key}:${expectedValue}. Actual: ${text}`,
+            );
+          }
+        });
+      }
+
+      function simulate(seed, actions) {
+        const rand = gen.create(seed);
+        let finalExpectedValues = initialValues;
+        function updateRoot() {
+          ReactNoop.render(
+            <Root
+              maxDepth={maxDepth}
+              rand={rand}
+              values={finalExpectedValues}
+            />,
+          );
+        }
+        updateRoot();
+
+        actions.forEach(action => {
+          switch (action.type) {
+            case FLUSH_ALL:
+              Scheduler.unstable_flushAllWithoutAsserting();
+              break;
+            case FLUSH:
+              Scheduler.unstable_flushNumberOfYields(action.unitsOfWork);
+              break;
+            case UPDATE:
+              finalExpectedValues = {
+                ...finalExpectedValues,
+                [action.key]: action.value,
+              };
+              updateRoot();
+              break;
+            default:
+              throw new Error('Switch statement should be exhaustive');
+          }
+          assertConsistentTree();
+        });
+
+        Scheduler.unstable_flushAllWithoutAsserting();
+        assertConsistentTree(finalExpectedValues);
+      }
+
+      return {simulate};
+    }
+
+    it('hard-coded tests', () => {
+      const {simulate} = ContextSimulator(5);
+      simulate('randomSeed', [flush(3), update('A', 4)]);
+    });
+
+    it('generated tests', () => {
+      const {simulate} = ContextSimulator(5);
+
+      const LIMIT = 100;
+      for (let i = 0; i < LIMIT; i++) {
+        const seed = Math.random().toString(36).slice(2, 7);
+        const actions = randomActions(5);
+        try {
+          simulate(seed, actions);
+        } catch (error) {
+          console.error(`
+Context fuzz tester error! Copy and paste the following line into the test suite:
+  simulate('${seed}', ${actions.join(', ')});
+`);
+          throw error;
+        }
+      }
+    });
+  });
+
+  it('should treat Context as Context.Provider', async () => {
+    const BarContext = React.createContext({value: 'bar-initial'});
+    expect(BarContext.Provider).toBe(BarContext);
+
+    function Component() {
+      return (
+        <BarContext value={{value: 'bar-updated'}}>
+          <BarContext.Consumer>
+            {({value}) => <span prop={value} />}
+          </BarContext.Consumer>
+        </BarContext>
+      );
+    }
+
+    ReactNoop.render(<Component />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="bar-updated" />);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
new file mode 100644
index 00000000000..7668e9ee855
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+// sanity tests for act()
+
+const React = require('react');
+const ReactNoop = require('react-noop-renderer');
+const Scheduler = require('scheduler');
+const act = require('internal-test-utils').act;
+const {assertLog, waitForAll} = require('internal-test-utils');
+
+// TODO: These tests are no longer specific to the noop renderer
+// implementation. They test the internal implementation we use in the React
+// test suite.
+describe('internal act()', () => {
+  it('can use act to flush effects', async () => {
+    function App(props) {
+      React.useEffect(props.callback);
+      return null;
+    }
+
+    const calledLog = [];
+    await act(() => {
+      ReactNoop.render(
+        <App
+          callback={() => {
+            calledLog.push(calledLog.length);
+          }}
+        />,
+      );
+    });
+    await waitForAll([]);
+    expect(calledLog).toEqual([0]);
+  });
+
+  it('should work with async/await', async () => {
+    function App() {
+      const [ctr, setCtr] = React.useState(0);
+      async function someAsyncFunction() {
+        Scheduler.log('stage 1');
+        await null;
+        Scheduler.log('stage 2');
+        await null;
+        setCtr(1);
+      }
+      React.useEffect(() => {
+        someAsyncFunction();
+      }, []);
+      return ctr;
+    }
+    await act(() => {
+      ReactNoop.render(<App />);
+    });
+    assertLog(['stage 1', 'stage 2']);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('1');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactOwnerStacks-test.js b/packages/react-reconciler/src/__tests__/ReactOwnerStacks-test.js
new file mode 100644
index 00000000000..e7b0581d5f4
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactOwnerStacks-test.js
@@ -0,0 +1,423 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let ReactNoopServer;
+let Scheduler;
+let act;
+let advanceTimersByTime;
+let assertLog;
+let serverAct;
+let waitFor;
+
+describe('ReactOwnerStacks', () => {
+  beforeEach(function () {
+    let time = 10;
+    advanceTimersByTime = timeMS => {
+      jest.advanceTimersByTime(timeMS);
+      time += timeMS;
+    };
+
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    ReactNoopServer = require('react-noop-renderer/server');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    serverAct = require('internal-test-utils').serverAct;
+    waitFor = require('internal-test-utils').waitFor;
+  });
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
+        return '\n    in ' + name + ' (at **)';
+      })
+    );
+  }
+
+  it('behavior in production', () => {
+    if (!__DEV__) {
+      if (gate('fb')) {
+        expect(React).toHaveProperty('captureOwnerStack', undefined);
+      } else {
+        expect(React).not.toHaveProperty('captureOwnerStack');
+      }
+    }
+  });
+
+  // @gate __DEV__
+  it('can get the component owner stacks during rendering in dev', async () => {
+    let stack;
+
+    function Foo() {
+      return <Bar />;
+    }
+    function Bar() {
+      return (
+        <div>
+          <Baz />
+        </div>
+      );
+    }
+    function Baz() {
+      stack = React.captureOwnerStack();
+      return <span>hi</span>;
+    }
+
+    await act(() => {
+      ReactNoop.render(
+        <div>
+          <Foo />
+        </div>,
+      );
+    });
+
+    expect(normalizeCodeLocInfo(stack)).toBe(
+      '\n    in Bar (at **)' + '\n    in Foo (at **)',
+    );
+  });
+
+  it('returns null outside of render', async () => {
+    // Awkward to gate since some builds will have `captureOwnerStack` return null in prod
+    if (__DEV__) {
+      expect(React.captureOwnerStack()).toBe(null);
+
+      await act(() => {
+        ReactNoop.render(<div />);
+      });
+
+      expect(React.captureOwnerStack()).toBe(null);
+    }
+  });
+
+  // @gate __DEV__
+  it('cuts off at the owner stack limit', async () => {
+    function App({siblingsBeforeStackOne}) {
+      const children = [];
+      for (
+        let i = 0;
+        i <
+        siblingsBeforeStackOne -
+          // <App /> callsite
+          1 -
+          // Stop so that OwnerStackOne will be right before cutoff
+          1;
+        i++
+      ) {
+        children.push(<Component key={i} />);
+      }
+      children.push(<OwnerStackOne key="stackOne" />);
+      children.push(<OwnerStackTwo key="stackTwo" />);
+
+      return children;
+    }
+
+    function Component() {
+      return null;
+    }
+
+    let stackOne;
+    function OwnerStackOne() {
+      stackOne = React.captureOwnerStack();
+    }
+
+    let stackTwo;
+    function OwnerStackTwo() {
+      stackTwo = React.captureOwnerStack();
+    }
+
+    await act(() => {
+      ReactNoop.render(
+        <App
+          key="one"
+          // Should be the value with of `ownerStackLimit` with `__VARIANT__` so that we see the cutoff
+          siblingsBeforeStackOne={500}
+        />,
+      );
+    });
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: '\n    in App (at **)',
+      stackTwo: __VARIANT__
+        ? // captured right after cutoff
+          '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in App (at **)',
+    });
+
+    await act(() => {
+      ReactNoop.render(
+        <App
+          // TODO: Owner Stacks should update on re-render.
+          key="two"
+          siblingsBeforeStackOne={0}
+        />,
+      );
+    });
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: __VARIANT__
+        ? // We re-rendered immediately so not enough time has ellapsed to reset the limit.
+          '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in App (at **)',
+      stackTwo: __VARIANT__
+        ? // We re-rendered immediately so not enough time has ellapsed to reset the limit.
+          '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in App (at **)',
+    });
+
+    // advance time so that we reset the limit
+    advanceTimersByTime(1001);
+
+    await act(() => {
+      ReactNoop.render(
+        <App
+          // TODO: Owner Stacks should update on re-render.
+          key="three"
+          // We reset after <App /> so we need to render one more
+          // to have similar cutoff as the initial render (key="one")
+          siblingsBeforeStackOne={501}
+        />,
+      );
+    });
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: '\n    in App (at **)',
+      stackTwo: __VARIANT__
+        ? // captured right after cutoff
+          '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in App (at **)',
+    });
+  });
+
+  // @gate __DEV__
+  it('Fiber: resets the owner stack limit periodically', async () => {
+    function App({siblingsBeforeStackOne, timeout}) {
+      const children = [];
+      for (
+        let i = 0;
+        i <
+        siblingsBeforeStackOne -
+          // <App /> callsite
+          1 -
+          // Stop so that OwnerStackOne will be right before cutoff
+          1;
+        i++
+      ) {
+        children.push(<Component key={i} />);
+      }
+      children.push(<OwnerStackOne key="stackOne" />);
+      children.push(<OwnerStackDelayed key="stackTwo" timeout={timeout} />);
+
+      return children;
+    }
+
+    function Component() {
+      return null;
+    }
+
+    let stackOne;
+    function OwnerStackOne() {
+      Scheduler.log('render OwnerStackOne');
+      stackOne = React.captureOwnerStack();
+    }
+
+    let stackTwo;
+    function OwnerStackTwo() {
+      Scheduler.log('render OwnerStackTwo');
+      stackTwo = React.captureOwnerStack();
+    }
+    function OwnerStackDelayed({timeout}) {
+      Scheduler.log('render OwnerStackDelayed');
+      React.use(timeout);
+      return <OwnerStackTwo />;
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <App
+          key="one"
+          // Should be the value with of `ownerStackLimit` with `__VARIANT__` so that we see the cutoff
+          siblingsBeforeStackOne={500}
+          timeout={
+            new Promise(resolve =>
+              setTimeout(
+                resolve,
+                // Must be greater or equal then the reset interval
+                1000,
+              ),
+            )
+          }
+        />,
+      );
+    });
+
+    await waitFor(['render OwnerStackOne', 'render OwnerStackDelayed']);
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      // 1 for the timeout
+      pendingTimers: 1,
+      stackOne: '\n    in App (at **)',
+      stackTwo: undefined,
+    });
+
+    // resolve `timeout` Promise
+    advanceTimersByTime(1000);
+
+    await waitFor(['render OwnerStackDelayed', 'render OwnerStackTwo']);
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: '\n    in App (at **)',
+      stackTwo: __VARIANT__
+        ? // We don't reset in Fiber until we start a new render.
+          // Here we just continued after a ping.
+          '\n    in UnknownOwner (at **)' + '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in OwnerStackDelayed (at **)' + '\n    in App (at **)',
+    });
+  });
+
+  // @gate __DEV__
+  it('Fizz: resets the owner stack limit periodically', async () => {
+    function App({siblingsBeforeStackOne, timeout}) {
+      const children = [];
+      for (
+        let i = 0;
+        i <
+        siblingsBeforeStackOne -
+          // <App /> callsite
+          1 -
+          // Stop so that OwnerStackOne will be right before cutoff
+          1;
+        i++
+      ) {
+        children.push(<Component key={i} />);
+      }
+      children.push(<OwnerStackOne key="stackOne" />);
+      children.push(<OwnerStackDelayed key="stackTwo" timeout={timeout} />);
+
+      return children;
+    }
+
+    function Component() {
+      return null;
+    }
+
+    let stackOne;
+    function OwnerStackOne() {
+      Scheduler.log('render OwnerStackOne');
+      stackOne = React.captureOwnerStack();
+    }
+
+    let stackTwo;
+    function OwnerStackTwo() {
+      Scheduler.log('render OwnerStackTwo');
+      stackTwo = React.captureOwnerStack();
+    }
+    function OwnerStackDelayed({timeout}) {
+      Scheduler.log('render OwnerStackDelayed');
+      React.use(timeout);
+      return <OwnerStackTwo />;
+    }
+
+    ReactNoopServer.render(
+      <App
+        key="one"
+        // Should be the value with of `ownerStackLimit` with `__VARIANT__` so that we see the cutoff
+        siblingsBeforeStackOne={500}
+        timeout={
+          new Promise(resolve =>
+            setTimeout(
+              resolve,
+              // Must be greater or equal then the reset interval
+              1000,
+            ),
+          )
+        }
+      />,
+    );
+
+    assertLog(['render OwnerStackOne', 'render OwnerStackDelayed']);
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      // 1 for the timeout
+      pendingTimers: 1,
+      stackOne: '\n    in App (at **)',
+      stackTwo: undefined,
+    });
+
+    await serverAct(() => {
+      advanceTimersByTime(1000);
+    });
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: '\n    in App (at **)',
+      stackTwo: __VARIANT__
+        ? // We don't reset in Fiber until we start a new render.
+          // Here we just continued after a ping.
+          '\n    in UnknownOwner (at **)' + '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in OwnerStackDelayed (at **)' + '\n    in App (at **)',
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js
new file mode 100644
index 00000000000..0f5152e8d47
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js
@@ -0,0 +1,443 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let act;
+let useEffect;
+
+describe('ReactPerformanceTracks', () => {
+  const performanceMeasureCalls = [];
+
+  beforeEach(() => {
+    performanceMeasureCalls.length = 0;
+    Object.defineProperty(performance, 'measure', {
+      value: jest.fn((measureName, reusableOptions) => {
+        performanceMeasureCalls.push([
+          measureName,
+          {
+            // React will mutate the options it passes to performance.measure.
+            ...reusableOptions,
+          },
+        ]);
+      }),
+      configurable: true,
+    });
+    console.timeStamp = () => {};
+    jest.spyOn(console, 'timeStamp').mockImplementation(() => {});
+
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    useEffect = React.useEffect;
+  });
+
+  function getConsoleTimestampEntries() {
+    try {
+      return console.timeStamp.mock.calls.filter(call => {
+        const [, startTime, endTime] = call;
+
+        const isRegisterTrackCall = startTime !== 0.003 && endTime !== 0.003;
+        return isRegisterTrackCall;
+      });
+    } finally {
+      console.timeStamp.mockClear();
+    }
+  }
+
+  // @gate __DEV__ && enableComponentPerformanceTrack
+  it('shows a hint if an update is triggered by a deeply equal object', async () => {
+    const App = function App({items}) {
+      Scheduler.unstable_advanceTime(10);
+      useEffect(() => {}, [items]);
+    };
+
+    Scheduler.unstable_advanceTime(1);
+    const items = ['one', 'two'];
+    await act(() => {
+      ReactNoop.render(<App items={items} />);
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        'Mount',
+        {
+          detail: {
+            devtools: {
+              color: 'warning',
+              properties: null,
+              tooltipText: 'Mount',
+              track: 'Components ⚛',
+            },
+          },
+          end: 11,
+          start: 1,
+        },
+      ],
+    ]);
+    performanceMeasureCalls.length = 0;
+
+    Scheduler.unstable_advanceTime(10);
+    await act(() => {
+      ReactNoop.render(<App items={items.concat('4')} />);
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        '​App',
+        {
+          detail: {
+            devtools: {
+              color: 'primary-dark',
+              properties: [
+                ['Changed Props', ''],
+                ['  items', 'Array'],
+                ['+   2', '…'],
+              ],
+              tooltipText: 'App',
+              track: 'Components ⚛',
+            },
+          },
+          end: 31,
+          start: 21,
+        },
+      ],
+    ]);
+  });
+
+  // @gate __DEV__ && enableComponentPerformanceTrack
+  it('bails out of diffing wide arrays', async () => {
+    const App = function App({items}) {
+      Scheduler.unstable_advanceTime(10);
+      React.useEffect(() => {}, [items]);
+    };
+
+    Scheduler.unstable_advanceTime(1);
+    const items = Array.from({length: 1000}, (_, i) => i);
+    await act(() => {
+      ReactNoop.render(<App items={items} />);
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        'Mount',
+        {
+          detail: {
+            devtools: {
+              color: 'warning',
+              properties: null,
+              tooltipText: 'Mount',
+              track: 'Components ⚛',
+            },
+          },
+          end: 11,
+          start: 1,
+        },
+      ],
+    ]);
+    performanceMeasureCalls.length = 0;
+
+    Scheduler.unstable_advanceTime(10);
+    await act(() => {
+      ReactNoop.render(<App items={items.concat('-1')} />);
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        '​App',
+        {
+          detail: {
+            devtools: {
+              color: 'primary-dark',
+              properties: [
+                ['Changed Props', ''],
+                ['  items', 'Array'],
+                [
+                  'Previous object has more than 100 properties. React will not attempt to diff objects with too many properties.',
+                  '',
+                ],
+                [
+                  'Next object has more than 100 properties. React will not attempt to diff objects with too many properties.',
+                  '',
+                ],
+              ],
+              tooltipText: 'App',
+              track: 'Components ⚛',
+            },
+          },
+          end: 31,
+          start: 21,
+        },
+      ],
+    ]);
+  });
+
+  // @gate __DEV__ && enableComponentPerformanceTrack
+  it('does not show all properties of wide objects', async () => {
+    const App = function App({items}) {
+      Scheduler.unstable_advanceTime(10);
+      React.useEffect(() => {}, [items]);
+    };
+
+    Scheduler.unstable_advanceTime(1);
+    await act(() => {
+      ReactNoop.render(<App data={{buffer: null}} />);
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        'Mount',
+        {
+          detail: {
+            devtools: {
+              color: 'warning',
+              properties: null,
+              tooltipText: 'Mount',
+              track: 'Components ⚛',
+            },
+          },
+          end: 11,
+          start: 1,
+        },
+      ],
+    ]);
+    performanceMeasureCalls.length = 0;
+
+    Scheduler.unstable_advanceTime(10);
+
+    const bigData = new Uint8Array(1000);
+    await act(() => {
+      ReactNoop.render(<App data={{buffer: bigData}} />);
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        '​App',
+        {
+          detail: {
+            devtools: {
+              color: 'primary-dark',
+              properties: [
+                ['Changed Props', ''],
+                ['  data', ''],
+                ['–   buffer', 'null'],
+                ['+   buffer', 'Uint8Array'],
+                ['+     0', '0'],
+                ['+     1', '0'],
+                ['+     2', '0'],
+                ['+     3', '0'],
+                ['+     4', '0'],
+                ['+     5', '0'],
+                ['+     6', '0'],
+                ['+     7', '0'],
+                ['+     8', '0'],
+                ['+     9', '0'],
+                ['+     10', '0'],
+                ['+     11', '0'],
+                ['+     12', '0'],
+                ['+     13', '0'],
+                ['+     14', '0'],
+                ['+     15', '0'],
+                ['+     16', '0'],
+                ['+     17', '0'],
+                ['+     18', '0'],
+                ['+     19', '0'],
+                ['+     20', '0'],
+                ['+     21', '0'],
+                ['+     22', '0'],
+                ['+     23', '0'],
+                ['+     24', '0'],
+                ['+     25', '0'],
+                ['+     26', '0'],
+                ['+     27', '0'],
+                ['+     28', '0'],
+                ['+     29', '0'],
+                ['+     30', '0'],
+                ['+     31', '0'],
+                ['+     32', '0'],
+                ['+     33', '0'],
+                ['+     34', '0'],
+                ['+     35', '0'],
+                ['+     36', '0'],
+                ['+     37', '0'],
+                ['+     38', '0'],
+                ['+     39', '0'],
+                ['+     40', '0'],
+                ['+     41', '0'],
+                ['+     42', '0'],
+                ['+     43', '0'],
+                ['+     44', '0'],
+                ['+     45', '0'],
+                ['+     46', '0'],
+                ['+     47', '0'],
+                ['+     48', '0'],
+                ['+     49', '0'],
+                ['+     50', '0'],
+                ['+     51', '0'],
+                ['+     52', '0'],
+                ['+     53', '0'],
+                ['+     54', '0'],
+                ['+     55', '0'],
+                ['+     56', '0'],
+                ['+     57', '0'],
+                ['+     58', '0'],
+                ['+     59', '0'],
+                ['+     60', '0'],
+                ['+     61', '0'],
+                ['+     62', '0'],
+                ['+     63', '0'],
+                ['+     64', '0'],
+                ['+     65', '0'],
+                ['+     66', '0'],
+                ['+     67', '0'],
+                ['+     68', '0'],
+                ['+     69', '0'],
+                ['+     70', '0'],
+                ['+     71', '0'],
+                ['+     72', '0'],
+                ['+     73', '0'],
+                ['+     74', '0'],
+                ['+     75', '0'],
+                ['+     76', '0'],
+                ['+     77', '0'],
+                ['+     78', '0'],
+                ['+     79', '0'],
+                ['+     80', '0'],
+                ['+     81', '0'],
+                ['+     82', '0'],
+                ['+     83', '0'],
+                ['+     84', '0'],
+                ['+     85', '0'],
+                ['+     86', '0'],
+                ['+     87', '0'],
+                ['+     88', '0'],
+                ['+     89', '0'],
+                ['+     90', '0'],
+                ['+     91', '0'],
+                ['+     92', '0'],
+                ['+     93', '0'],
+                ['+     94', '0'],
+                ['+     95', '0'],
+                ['+     96', '0'],
+                ['+     97', '0'],
+                ['+     98', '0'],
+                ['+     99', '0'],
+                [
+                  '+     Only 100 properties are shown. React will not log more properties of this object.',
+                  '',
+                ],
+              ],
+              tooltipText: 'App',
+              track: 'Components ⚛',
+            },
+          },
+          end: 31,
+          start: 21,
+        },
+      ],
+    ]);
+  });
+
+  // @gate __DEV__ && enableComponentPerformanceTrack
+  it('includes console.timeStamp spans for Components with no prop changes', async () => {
+    function Left({value}) {
+      Scheduler.unstable_advanceTime(5000);
+    }
+    function Right() {
+      Scheduler.unstable_advanceTime(10000);
+    }
+
+    await act(() => {
+      ReactNoop.render(
+        <>
+          <Left value={1} />
+          <Right />
+        </>,
+      );
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        'Mount',
+        {
+          detail: {
+            devtools: {
+              color: 'warning',
+              properties: null,
+              tooltipText: 'Mount',
+              track: 'Components ⚛',
+            },
+          },
+          end: 5000,
+          start: 0,
+        },
+      ],
+      [
+        'Mount',
+        {
+          detail: {
+            devtools: {
+              color: 'warning',
+              properties: null,
+              tooltipText: 'Mount',
+              track: 'Components ⚛',
+            },
+          },
+          end: 15000,
+          start: 5000,
+        },
+      ],
+    ]);
+    performanceMeasureCalls.length = 0;
+    getConsoleTimestampEntries();
+
+    Scheduler.unstable_advanceTime(1000);
+
+    await act(() => {
+      ReactNoop.render(
+        <>
+          <Left value={2} />
+          <Right />
+        </>,
+      );
+    });
+
+    expect(performanceMeasureCalls).toEqual([
+      [
+        '​Left',
+        {
+          detail: {
+            devtools: {
+              color: 'error',
+              properties: [
+                ['Changed Props', ''],
+                ['– value', '1'],
+                ['+ value', '2'],
+              ],
+              tooltipText: 'Left',
+              track: 'Components ⚛',
+            },
+          },
+          end: 21000,
+          start: 16000,
+        },
+      ],
+    ]);
+    expect(getConsoleTimestampEntries()).toEqual([
+      ['Render', 16000, 31000, 'Blocking', 'Scheduler ⚛', 'primary-dark'],
+      ['Right', 21000, 31000, 'Components ⚛', undefined, 'error'],
+    ]);
+    performanceMeasureCalls.length = 0;
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
new file mode 100644
index 00000000000..dba30d6d267
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoopPersistent;
+
+let act;
+let waitForAll;
+
+describe('ReactPersistent', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoopPersistent = require('react-noop-renderer/persistent');
+    ({act, waitForAll} = require('internal-test-utils'));
+  });
+
+  // Inlined from shared folder so we can run this test on a bundle.
+  function createPortal(children, containerInfo, implementation, key) {
+    return {
+      $$typeof: Symbol.for('react.portal'),
+      key: key == null ? null : String(key),
+      children,
+      containerInfo,
+      implementation,
+    };
+  }
+
+  function render(element) {
+    ReactNoopPersistent.render(element);
+  }
+
+  function div(...children) {
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
+    );
+    return {type: 'div', children, prop: undefined, hidden: false};
+  }
+
+  function span(prop) {
+    return {type: 'span', children: [], prop, hidden: false};
+  }
+
+  // For persistent renderers we have to mix deep equality and reference equality checks
+  //  for which we need the actual children.
+  //  None of the tests are gated and the underlying implementation is rarely touch
+  //  so it's unlikely we deal with failing `toEqual` checks which cause bad performance.
+  function dangerouslyGetChildren() {
+    return ReactNoopPersistent.dangerouslyGetChildren();
+  }
+
+  it('can update child nodes of a host instance', async () => {
+    function Bar(props) {
+      return <span>{props.text}</span>;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          <Bar text={props.text} />
+          {props.text === 'World' ? <Bar text={props.text} /> : null}
+        </div>
+      );
+    }
+
+    render(<Foo text="Hello" />);
+    await waitForAll([]);
+    const originalChildren = dangerouslyGetChildren();
+    expect(originalChildren).toEqual([div(span())]);
+
+    render(<Foo text="World" />);
+    await waitForAll([]);
+    const newChildren = dangerouslyGetChildren();
+    expect(newChildren).toEqual([div(span(), span())]);
+
+    expect(originalChildren).toEqual([div(span())]);
+  });
+
+  it('can reuse child nodes between updates', async () => {
+    function Baz(props) {
+      return <span prop={props.text} />;
+    }
+    class Bar extends React.Component {
+      shouldComponentUpdate(newProps) {
+        return false;
+      }
+      render() {
+        return <Baz text={this.props.text} />;
+      }
+    }
+    function Foo(props) {
+      return (
+        <div>
+          <Bar text={props.text} />
+          {props.text === 'World' ? <Bar text={props.text} /> : null}
+        </div>
+      );
+    }
+
+    render(<Foo text="Hello" />);
+    await waitForAll([]);
+    const originalChildren = dangerouslyGetChildren();
+    expect(originalChildren).toEqual([div(span('Hello'))]);
+
+    render(<Foo text="World" />);
+    await waitForAll([]);
+    const newChildren = dangerouslyGetChildren();
+    expect(newChildren).toEqual([div(span('Hello'), span('World'))]);
+
+    expect(originalChildren).toEqual([div(span('Hello'))]);
+
+    // Reused node should have reference equality
+    expect(newChildren[0].children[0]).toBe(originalChildren[0].children[0]);
+  });
+
+  it('can update child text nodes', async () => {
+    function Foo(props) {
+      return (
+        <div>
+          {props.text}
+          <span />
+        </div>
+      );
+    }
+
+    render(<Foo text="Hello" />);
+    await waitForAll([]);
+    const originalChildren = dangerouslyGetChildren();
+    expect(originalChildren).toEqual([div('Hello', span())]);
+
+    render(<Foo text="World" />);
+    await waitForAll([]);
+    const newChildren = dangerouslyGetChildren();
+    expect(newChildren).toEqual([div('World', span())]);
+
+    expect(originalChildren).toEqual([div('Hello', span())]);
+  });
+
+  it('supports portals', async () => {
+    function Parent(props) {
+      return <div>{props.children}</div>;
+    }
+
+    function BailoutSpan() {
+      return <span />;
+    }
+
+    class BailoutTest extends React.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return <BailoutSpan />;
+      }
+    }
+
+    function Child(props) {
+      return (
+        <div>
+          <BailoutTest />
+          {props.children}
+        </div>
+      );
+    }
+    const portalContainer = {rootID: 'persistent-portal-test', children: []};
+    const emptyPortalChildSet = portalContainer.children;
+    render(<Parent>{createPortal(<Child />, portalContainer, null)}</Parent>);
+    await waitForAll([]);
+
+    expect(emptyPortalChildSet).toEqual([]);
+
+    const originalChildren = dangerouslyGetChildren();
+    expect(originalChildren).toEqual([div()]);
+    const originalPortalChildren = portalContainer.children;
+    expect(originalPortalChildren).toEqual([div(span())]);
+
+    render(
+      <Parent>
+        {createPortal(<Child>Hello {'World'}</Child>, portalContainer, null)}
+      </Parent>,
+    );
+    await waitForAll([]);
+
+    const newChildren = dangerouslyGetChildren();
+    expect(newChildren).toEqual([div()]);
+    const newPortalChildren = portalContainer.children;
+    expect(newPortalChildren).toEqual([div(span(), 'Hello ', 'World')]);
+
+    expect(originalChildren).toEqual([div()]);
+    expect(originalPortalChildren).toEqual([div(span())]);
+
+    // Reused portal children should have reference equality
+    expect(newPortalChildren[0].children[0]).toBe(
+      originalPortalChildren[0].children[0],
+    );
+
+    // Deleting the Portal, should clear its children
+    render(<Parent />);
+    await waitForAll([]);
+
+    const clearedPortalChildren = portalContainer.children;
+    expect(clearedPortalChildren).toEqual([]);
+
+    // The original is unchanged.
+    expect(newPortalChildren).toEqual([div(span(), 'Hello ', 'World')]);
+  });
+
+  it('remove children', async () => {
+    function Wrapper({children}) {
+      return children;
+    }
+
+    const root = ReactNoopPersistent.createRoot();
+    await act(() => {
+      root.render(
+        <Wrapper>
+          <inner />
+        </Wrapper>,
+      );
+    });
+    expect(root.getChildrenAsJSX()).toEqual(<inner />);
+
+    await act(() => {
+      root.render(<Wrapper />);
+    });
+    expect(root.getChildrenAsJSX()).toEqual(null);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactPersistentUpdatesMinimalism-test.js b/packages/react-reconciler/src/__tests__/ReactPersistentUpdatesMinimalism-test.js
new file mode 100644
index 00000000000..359c80c247f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactPersistentUpdatesMinimalism-test.js
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoopPersistent;
+let act;
+
+describe('ReactPersistentUpdatesMinimalism', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoopPersistent = require('react-noop-renderer/persistent');
+    act = require('internal-test-utils').act;
+  });
+
+  it('should render a simple component', async () => {
+    function Child() {
+      return <div>Hello World</div>;
+    }
+
+    function Parent() {
+      return <Child />;
+    }
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => ReactNoopPersistent.render(<Parent />));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      hostCloneCounter: 0,
+    });
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => ReactNoopPersistent.render(<Parent />));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      hostCloneCounter: 1,
+    });
+  });
+
+  it('should not diff referentially equal host elements', async () => {
+    function Leaf(props) {
+      return (
+        <span>
+          hello
+          <b />
+          {props.name}
+        </span>
+      );
+    }
+
+    const constEl = (
+      <div>
+        <Leaf name="world" />
+      </div>
+    );
+
+    function Child() {
+      return constEl;
+    }
+
+    function Parent() {
+      return <Child />;
+    }
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => ReactNoopPersistent.render(<Parent />));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      hostCloneCounter: 0,
+    });
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => ReactNoopPersistent.render(<Parent />));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      hostCloneCounter: 0,
+    });
+  });
+
+  it('should not diff parents of setState targets', async () => {
+    let childInst;
+
+    function Leaf(props) {
+      return (
+        <span>
+          hello
+          <b />
+          {props.name}
+        </span>
+      );
+    }
+
+    class Child extends React.Component {
+      state = {name: 'Batman'};
+      render() {
+        childInst = this;
+        return (
+          <div>
+            <Leaf name={this.state.name} />
+          </div>
+        );
+      }
+    }
+
+    function Parent() {
+      return (
+        <section>
+          <div>
+            <Leaf name="world" />
+            <Child />
+            <hr />
+            <Leaf name="world" />
+          </div>
+        </section>
+      );
+    }
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => ReactNoopPersistent.render(<Parent />));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      hostCloneCounter: 0,
+    });
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => childInst.setState({name: 'Robin'}));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      // section
+      // section > div
+      // section > div > Child > div
+      // section > div > Child > Leaf > span
+      // section > div > Child > Leaf > span > b
+      hostCloneCounter: 5,
+    });
+
+    ReactNoopPersistent.startTrackingHostCounters();
+    await act(() => ReactNoopPersistent.render(<Parent />));
+    expect(ReactNoopPersistent.stopTrackingHostCounters()).toEqual({
+      // Parent > section
+      // Parent > section > div
+      // Parent > section > div > Leaf > span
+      // Parent > section > div > Leaf > span > b
+      // Parent > section > div > Child > div
+      // Parent > section > div > Child > div > Leaf > span
+      // Parent > section > div > Child > div > Leaf > span > b
+      // Parent > section > div > hr
+      // Parent > section > div > Leaf > span
+      // Parent > section > div > Leaf > span > b
+      hostCloneCounter: 10,
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
new file mode 100644
index 00000000000..8646c0ff46c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -0,0 +1,391 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let act;
+let NormalPriority;
+let IdlePriority;
+let runWithPriority;
+let startTransition;
+let waitForAll;
+let waitForPaint;
+let assertLog;
+let waitFor;
+
+describe('ReactSchedulerIntegration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+    IdlePriority = Scheduler.unstable_IdlePriority;
+    runWithPriority = Scheduler.unstable_runWithPriority;
+    startTransition = React.startTransition;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+  });
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('passive effects are called before Normal-pri scheduled in layout effects', async () => {
+    const {useEffect, useLayoutEffect} = React;
+    function Effects({step}) {
+      useLayoutEffect(() => {
+        Scheduler.log('Layout Effect');
+        Scheduler.unstable_scheduleCallback(NormalPriority, () =>
+          Scheduler.log('Scheduled Normal Callback from Layout Effect'),
+        );
+      });
+      useEffect(() => {
+        Scheduler.log('Passive Effect');
+      });
+      return null;
+    }
+    function CleanupEffect() {
+      useLayoutEffect(() => () => {
+        Scheduler.log('Cleanup Layout Effect');
+        Scheduler.unstable_scheduleCallback(NormalPriority, () =>
+          Scheduler.log('Scheduled Normal Callback from Cleanup Layout Effect'),
+        );
+      });
+      return null;
+    }
+    await act(() => {
+      ReactNoop.render(<CleanupEffect />);
+    });
+    assertLog([]);
+    await act(() => {
+      ReactNoop.render(<Effects />);
+    });
+    assertLog([
+      '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('requests a paint after committing', async () => {
+    const scheduleCallback = Scheduler.unstable_scheduleCallback;
+
+    const root = ReactNoop.createRoot();
+    root.render('Initial');
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('Initial');
+
+    scheduleCallback(NormalPriority, () => Scheduler.log('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('B'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('C'));
+
+    // Schedule a React render. React will request a paint after committing it.
+    React.startTransition(() => {
+      root.render('Update');
+    });
+
+    // Perform just a little bit of work. By now, the React task will have
+    // already been scheduled, behind A, B, and C.
+    await waitFor(['A']);
+
+    // Schedule some additional tasks. These won't fire until after the React
+    // update has finished.
+    scheduleCallback(NormalPriority, () => Scheduler.log('D'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('E'));
+
+    // Flush everything up to the next paint. Should yield after the
+    // React commit.
+    await waitForPaint(['B', 'C']);
+    expect(root).toMatchRenderedOutput('Update');
+
+    // Now flush the rest of the work.
+    await waitForAll(['D', 'E']);
+  });
+
+  // @gate enableLegacyHidden
+  it('idle updates are not blocked by offscreen work', async () => {
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    function App({label}) {
+      return (
+        <>
+          <Text text={`Visible: ` + label} />
+          <LegacyHiddenDiv mode="hidden">
+            <Text text={`Hidden: ` + label} />
+          </LegacyHiddenDiv>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App label="A" />);
+
+      // Commit the visible content
+      await waitForPaint(['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
+      await waitForPaint(['Visible: B']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          Visible: B
+          <div hidden={true} />
+        </>,
+      );
+    });
+
+    // The hidden content commits later
+    assertLog(['Hidden: B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        Visible: B<div hidden={true}>Hidden: B</div>
+      </>,
+    );
+  });
+});
+
+describe(
+  'regression test: does not infinite loop if `shouldYield` returns ' +
+    'true after a partial tree expires',
+  () => {
+    let logDuringShouldYield = false;
+
+    beforeEach(() => {
+      jest.resetModules();
+
+      jest.mock('scheduler', () => {
+        const actual = jest.requireActual('scheduler/unstable_mock');
+        return {
+          ...actual,
+          unstable_shouldYield() {
+            if (logDuringShouldYield) {
+              actual.log('shouldYield');
+            }
+            return actual.unstable_shouldYield();
+          },
+        };
+      });
+
+      React = require('react');
+      ReactNoop = require('react-noop-renderer');
+      Scheduler = require('scheduler');
+      startTransition = React.startTransition;
+
+      const InternalTestUtils = require('internal-test-utils');
+      waitForAll = InternalTestUtils.waitForAll;
+      waitForPaint = InternalTestUtils.waitForPaint;
+      assertLog = InternalTestUtils.assertLog;
+      waitFor = InternalTestUtils.waitFor;
+      act = InternalTestUtils.act;
+    });
+
+    afterEach(() => {
+      jest.mock('scheduler', () =>
+        jest.requireActual('scheduler/unstable_mock'),
+      );
+    });
+
+    it('using public APIs to trigger real world scenario', async () => {
+      // This test reproduces a case where React's Scheduler task timed out but
+      // the `shouldYield` method returned true. The bug was that React fell
+      // into an infinite loop, because it would enter the work loop then
+      // immediately yield back to Scheduler.
+      //
+      // (The next test in this suite covers the same case. The difference is
+      // that this test only uses public APIs, whereas the next test mocks
+      // `shouldYield` to check when it is called.)
+      function Text({text}) {
+        return text;
+      }
+
+      function App({step}) {
+        return (
+          <>
+            <Text text="A" />
+            <TriggerErstwhileSchedulerBug />
+            <Text text="B" />
+            <TriggerErstwhileSchedulerBug />
+            <Text text="C" />
+          </>
+        );
+      }
+
+      function TriggerErstwhileSchedulerBug() {
+        // This triggers a once-upon-a-time bug in Scheduler that caused
+        // `shouldYield` to return true even though the current task expired.
+        Scheduler.unstable_advanceTime(10000);
+        Scheduler.unstable_requestPaint();
+        return null;
+      }
+
+      await act(async () => {
+        ReactNoop.render(<App />);
+        await waitForPaint([]);
+        await waitForPaint([]);
+      });
+    });
+
+    it('mock Scheduler module to check if `shouldYield` is called', async () => {
+      // This test reproduces a bug where React's Scheduler task timed out but
+      // the `shouldYield` method returned true. Usually we try not to mock
+      // internal methods, but I've made an exception here since the point is
+      // specifically to test that React is resilient to the behavior of a
+      // Scheduler API. That being said, feel free to rewrite or delete this
+      // test if/when the API changes.
+      function Text({text}) {
+        Scheduler.log(text);
+        return text;
+      }
+
+      function App({step}) {
+        return (
+          <>
+            <Text text="A" />
+            <Text text="B" />
+            <Text text="C" />
+          </>
+        );
+      }
+
+      await act(async () => {
+        // Partially render the tree, then yield
+        startTransition(() => {
+          ReactNoop.render(<App />);
+        });
+        await waitFor(['A']);
+
+        // Start logging whenever shouldYield is called
+        logDuringShouldYield = true;
+        // Let's call it once to confirm the mock actually works
+        await waitFor(['shouldYield']);
+
+        // Expire the task
+        Scheduler.unstable_advanceTime(10000);
+        // Scheduling a new update is a trick to force the expiration to kick
+        // in. We don't check if a update has been starved at the beginning of
+        // working on it, since there's no point — we're already working on it.
+        // We only check before yielding to the main thread (to avoid starvation
+        // by other main thread work) or when receiving an update (to avoid
+        // starvation by incoming updates).
+        startTransition(() => {
+          ReactNoop.render(<App />);
+        });
+        // Because the render expired, React should finish the tree without
+        // consulting `shouldYield` again
+        await waitFor(['B', 'C']);
+      });
+    });
+  },
+);
+
+describe('`act` bypasses Scheduler methods completely,', () => {
+  let infiniteLoopGuard;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    infiniteLoopGuard = 0;
+
+    jest.mock('scheduler', () => {
+      const actual = jest.requireActual('scheduler/unstable_mock');
+      return {
+        ...actual,
+        unstable_shouldYield() {
+          // This simulates a bug report where `shouldYield` returns true in a
+          // unit testing environment. Because `act` will keep working until
+          // there's no more work left, it would fall into an infinite loop.
+          // The fix is that when performing work inside `act`, we should bypass
+          // `shouldYield` completely, because we can't trust it to be correct.
+          if (infiniteLoopGuard++ > 100) {
+            throw new Error('Detected an infinite loop');
+          }
+          return true;
+        },
+      };
+    });
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    startTransition = React.startTransition;
+  });
+
+  afterEach(() => {
+    jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
+  });
+
+  // @gate __DEV__
+  it('inside `act`, does not call `shouldYield`, even during a concurrent render', async () => {
+    function App() {
+      return (
+        <>
+          <div>A</div>
+          <div>B</div>
+          <div>C</div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    const publicAct = React.act;
+    const prevIsReactActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
+    try {
+      global.IS_REACT_ACT_ENVIRONMENT = true;
+      await publicAct(async () => {
+        startTransition(() => root.render(<App />));
+      });
+    } finally {
+      global.IS_REACT_ACT_ENVIRONMENT = prevIsReactActEnvironment;
+    }
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>A</div>
+        <div>B</div>
+        <div>C</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 00000000000..e3960ec678f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -0,0 +1,539 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+let act;
+
+describe('ReactScope', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableScopeAPI = true;
+    React = require('react');
+
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+  });
+
+  describe('ReactDOM', () => {
+    let ReactDOMClient;
+    let container;
+
+    beforeEach(() => {
+      ReactDOMClient = require('react-dom/client');
+      ReactDOMServer = require('react-dom/server');
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    // @gate enableScopeAPI
+    it('DO_NOT_USE_queryAllNodes() works as intended', async () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_Scope;
+      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 root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test toggle={true} />);
+      });
+
+      let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+      await act(() => {
+        root.render(<Test toggle={false} />);
+      });
+
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
+      await act(() => {
+        root.render(null);
+      });
+
+      expect(scopeRef.current).toBe(null);
+    });
+
+    // @gate enableScopeAPI
+    it('DO_NOT_USE_queryAllNodes() provides the correct host instance', async () => {
+      const testScopeQuery = (type, props) => type === 'div';
+      const TestScope = React.unstable_Scope;
+      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 root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test toggle={true} />);
+      });
+
+      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]);
+      await act(() => {
+        root.render(<Test toggle={false} />);
+      });
+
+      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]);
+      await act(() => {
+        root.render(null);
+      });
+
+      expect(scopeRef.current).toBe(null);
+    });
+
+    // @gate enableScopeAPI
+    it('DO_NOT_USE_queryFirstNode() works as intended', async () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_Scope;
+      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 root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test toggle={true} />);
+      });
+
+      let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(divRef.current);
+      await act(() => {
+        root.render(<Test toggle={false} />);
+      });
+
+      node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(aRef.current);
+      await act(() => {
+        root.render(null);
+      });
+
+      expect(scopeRef.current).toBe(null);
+    });
+
+    // @gate enableScopeAPI
+    it('containsNode() works as intended', async () => {
+      const TestScope = React.unstable_Scope;
+      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 root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test toggle={true} />);
+      });
+
+      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);
+      await act(() => {
+        root.render(<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);
+      await act(() => {
+        root.render(<Test toggle={true} />);
+      });
+
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
+    });
+
+    // @gate enableScopeAPI
+    it('scopes support server-side rendering and hydration', async () => {
+      const TestScope = React.unstable_Scope;
+      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><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
+      );
+      container.innerHTML = html;
+      await act(() => {
+        ReactDOMClient.hydrateRoot(container, <Test />);
+      });
+      const testScopeQuery = (type, props) => true;
+      const nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+    });
+
+    // @gate enableScopeAPI
+    it('getChildContextValues() works as intended', async () => {
+      const TestContext = React.createContext();
+      const TestScope = React.unstable_Scope;
+      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>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Test toggle={true} />);
+      });
+
+      let nodes = scopeRef.current.getChildContextValues(TestContext);
+      expect(nodes).toEqual([1]);
+      await act(() => {
+        root.render(<Test toggle={false} />);
+      });
+
+      nodes = scopeRef.current.getChildContextValues(TestContext);
+      expect(nodes).toEqual([1, 2]);
+      await act(() => {
+        root.render(null);
+      });
+
+      expect(scopeRef.current).toBe(null);
+    });
+
+    // @gate enableScopeAPI
+    it('correctly works with suspended boundaries that are hydrated', async () => {
+      let suspend = false;
+      let resolve;
+      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+      const ref = React.createRef();
+      const TestScope = React.unstable_Scope;
+      const scopeRef = React.createRef();
+      const testScopeQuery = (type, props) => true;
+
+      function Child() {
+        if (suspend) {
+          throw promise;
+        } else {
+          return 'Hello';
+        }
+      }
+
+      function App() {
+        return (
+          <div>
+            <TestScope ref={scopeRef}>
+              <React.Suspense fallback="Loading...">
+                <span ref={ref}>
+                  <Child />
+                </span>
+              </React.Suspense>
+            </TestScope>
+          </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;
+      const finalHTML = ReactDOMServer.renderToString(<App />);
+
+      const container2 = document.createElement('div');
+      container2.innerHTML = finalHTML;
+
+      const span = container2.getElementsByTagName('span')[0];
+
+      // On the client we don't have all data yet but we want to start
+      // hydrating anyway.
+      suspend = true;
+      await act(() => ReactDOMClient.hydrateRoot(container2, <App />));
+
+      // This should not cause a runtime exception, see:
+      // https://github.com/facebook/react/pull/18184
+      scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(ref.current).toBe(null);
+
+      // Resolving the promise should continue hydration
+      suspend = false;
+      await act(async () => {
+        resolve();
+        await promise;
+      });
+
+      // We should now have hydrated with a ref on the existing span.
+      expect(ref.current).toBe(span);
+    });
+  });
+
+  describe('ReactTestRenderer', () => {
+    let ReactTestRenderer;
+
+    beforeEach(() => {
+      ReactTestRenderer = require('react-test-renderer');
+    });
+
+    // @gate enableScopeAPI
+    it('DO_NOT_USE_queryAllNodes() works as intended', async () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_Scope;
+      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>
+        );
+      }
+
+      let renderer;
+      await act(
+        () =>
+          (renderer = ReactTestRenderer.create(<Test toggle={true} />, {
+            createNodeMock: element => {
+              return element;
+            },
+            unstable_isConcurrent: true,
+          })),
+      );
+      let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
+      await act(() => renderer.update(<Test toggle={false} />));
+      nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
+      expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
+    });
+
+    // @gate enableScopeAPI
+    it('DO_NOT_USE_queryFirstNode() works as intended', async () => {
+      const testScopeQuery = (type, props) => true;
+      const TestScope = React.unstable_Scope;
+      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>
+        );
+      }
+
+      let renderer;
+      await act(
+        () =>
+          (renderer = ReactTestRenderer.create(<Test toggle={true} />, {
+            createNodeMock: element => {
+              return element;
+            },
+            unstable_isConcurrent: true,
+          })),
+      );
+      let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(divRef.current);
+      await act(() => renderer.update(<Test toggle={false} />));
+
+      node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
+      expect(node).toEqual(aRef.current);
+    });
+
+    // @gate enableScopeAPI
+    it('containsNode() works as intended', async () => {
+      const TestScope = React.unstable_Scope;
+      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>
+        );
+      }
+
+      let renderer;
+      await act(
+        () =>
+          (renderer = ReactTestRenderer.create(<Test toggle={true} />, {
+            createNodeMock: element => {
+              return element;
+            },
+            unstable_isConcurrent: true,
+          })),
+      );
+      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);
+      await act(() => 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);
+      await act(() => renderer.update(<Test toggle={true} />));
+      expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSiblingPrerendering-test.js b/packages/react-reconciler/src/__tests__/ReactSiblingPrerendering-test.js
new file mode 100644
index 00000000000..14dcea33ffe
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSiblingPrerendering-test.js
@@ -0,0 +1,545 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let assertLog;
+let waitFor;
+let waitForPaint;
+let waitForAll;
+let textCache;
+let startTransition;
+let Suspense;
+let Activity;
+
+describe('ReactSiblingPrerendering', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    waitFor = require('internal-test-utils').waitFor;
+    waitForPaint = require('internal-test-utils').waitForPaint;
+    waitForAll = require('internal-test-utils').waitForAll;
+    startTransition = React.startTransition;
+    Suspense = React.Suspense;
+    Activity = React.Activity;
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  // function getText(text) {
+  //   const record = textCache.get(text);
+  //   if (record === undefined) {
+  //     const thenable = {
+  //       pings: [],
+  //       then(resolve) {
+  //         if (newRecord.status === 'pending') {
+  //           thenable.pings.push(resolve);
+  //         } else {
+  //           Promise.resolve().then(() => resolve(newRecord.value));
+  //         }
+  //       },
+  //     };
+  //     const newRecord = {
+  //       status: 'pending',
+  //       value: thenable,
+  //     };
+  //     textCache.set(text, newRecord);
+  //     return thenable;
+  //   } else {
+  //     switch (record.status) {
+  //       case 'pending':
+  //         return record.value;
+  //       case 'rejected':
+  //         return Promise.reject(record.value);
+  //       case 'resolved':
+  //         return Promise.resolve(record.value);
+  //     }
+  //   }
+  // }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  it("don't prerender siblings when something errors", async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    function Oops() {
+      throw new Error('Oops!');
+    }
+
+    function App() {
+      return (
+        <>
+          <div>
+            <ErrorBoundary>
+              <Oops />
+              <AsyncText text="A" />
+            </ErrorBoundary>
+          </div>
+          <div>
+            <AsyncText text="B" />
+            <AsyncText text="C" />
+          </div>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => startTransition(() => root.render(<App />)));
+    assertLog([
+      'Oops!',
+
+      // A is skipped because we don't prerender siblings when
+      // something errors.
+
+      'Suspend! [B]',
+
+      // After B suspends, we're still able to prerender C without starting
+      // over because there's no fallback, so the root is blocked from
+      // committing anyway.
+      'Suspend! [C]',
+    ]);
+  });
+
+  // @gate enableActivity
+  it("don't skip siblings when rendering inside a hidden tree", async () => {
+    function App() {
+      return (
+        <>
+          <Text text="A" />
+          <Activity mode="hidden">
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="B" />
+              <AsyncText text="C" />
+            </Suspense>
+          </Activity>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(async () => root.render(<App />));
+
+      // The first render includes only the visible part of the tree. The
+      // hidden content is deferred until later.
+      await waitForPaint(['A']);
+      expect(root).toMatchRenderedOutput('A');
+
+      if (gate(flags => flags.enableYieldingBeforePassive)) {
+        // Passive effects.
+        await waitForPaint([]);
+      }
+      // The second render is a prerender of the hidden content.
+      await waitForPaint([
+        'Suspend! [B]',
+        // If B and C were visible, C would not have been attempted
+        // during this pass, because it would prevented the fallback
+        // from showing.
+        'Suspend! [C]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput('A');
+    });
+  });
+
+  it('start prerendering retries right after the fallback commits', async () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+          <AsyncText text="B" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => root.render(<App />));
+
+      // On the first attempt, A suspends. Unwind and show a fallback, without
+      // attempting B.
+      await waitForPaint(['Suspend! [A]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      // Immediately after the fallback commits, retry the boundary again. This
+      // time we include B, since we're not blocking the fallback from showing.
+      if (gate(flags => flags.enableYieldingBeforePassive)) {
+        // Passive effects.
+        await waitForPaint([]);
+      }
+      await waitForPaint(['Suspend! [A]', 'Suspend! [B]']);
+    });
+    expect(root).toMatchRenderedOutput('Loading...');
+  });
+
+  it('switch back to normal rendering mode if a ping occurs during prerendering', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading outer..." />}>
+            <div>
+              <Text text="A" />
+              <AsyncText text="B" />
+            </div>
+            <div>
+              <Suspense fallback={<Text text="Loading inner..." />}>
+                <AsyncText text="C" />
+                <AsyncText text="D" />
+              </Suspense>
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => root.render(<App />));
+
+      // On the first attempt, B suspends. Unwind and show a fallback, without
+      // attempting the siblings.
+      await waitForPaint(['A', 'Suspend! [B]', 'Loading outer...']);
+      expect(root).toMatchRenderedOutput(<div>Loading outer...</div>);
+
+      // Now that the fallback is visible, we can prerender the siblings. Start
+      // prerendering, then yield to simulate an interleaved event.
+      await waitFor(['A']);
+
+      // To avoid the Suspense throttling mechanism, let's pretend there's been
+      // more than a Just Noticeable Difference since we rendered the
+      // outer fallback.
+      Scheduler.unstable_advanceTime(500);
+
+      // During the render phase, but before we get to B again, resolve its
+      // promise. We should re-enter normal rendering mode, but we also
+      // shouldn't unwind and lose our work-in-progress.
+      await resolveText('B');
+      await waitForPaint([
+        'B',
+        'Suspend! [C]',
+
+        // If we were still in prerendering mode, then we would have attempted
+        // to render D here. But since we received new data, we will skip the
+        // remaining siblings to unblock the inner fallback.
+        'Loading inner...',
+      ]);
+
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>AB</div>
+          <div>Loading inner...</div>
+        </div>,
+      );
+    });
+
+    // Now that the inner fallback is showing, we can prerender the rest of
+    // the tree.
+    assertLog([
+      // NOTE: C renders twice instead of once because when B resolved, it
+      // was treated like a retry update, not just a ping. So first it
+      // regular renders, then it prerenders. TODO: We should be able to
+      // optimize this by detecting inside the retry listener that the
+      // outer boundary is no longer suspended, and therefore doesn't need
+      // to be updated.
+      'Suspend! [C]',
+
+      // Now we're in prerender mode, so D is incuded in this attempt.
+      'Suspend! [C]',
+      'Suspend! [D]',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>AB</div>
+        <div>Loading inner...</div>
+      </div>,
+    );
+  });
+
+  it("don't throw out completed work in order to prerender", async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading outer..." />}>
+            <div>
+              <AsyncText text="A" />
+            </div>
+            <div>
+              <Suspense fallback={<Text text="Loading inner..." />}>
+                <AsyncText text="B" />
+                <AsyncText text="C" />
+              </Suspense>
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => root.render(<App />));
+
+      await waitForPaint(['Suspend! [A]', 'Loading outer...']);
+      expect(root).toMatchRenderedOutput(<div>Loading outer...</div>);
+
+      // Before the prerendering of the inner boundary starts, the data for A
+      // resolves, so we try rendering that again.
+      await resolveText('A');
+      // This produces a new tree that we can show. However, the commit phase
+      // is throttled because it's been less than a Just Noticeable Difference
+      // since the outer fallback was committed.
+      //
+      // In the meantime, we could choose to start prerendering C, but instead
+      // we wait for a JND to elapse and the commit to finish — it's not
+      // worth discarding the work we've already done.
+      await waitForAll([
+        'A',
+        'Suspend! [B]',
+
+        // C is skipped because we're no longer in prerendering mode; there's
+        // a new fallback we can show.
+        'Loading inner...',
+      ]);
+      expect(root).toMatchRenderedOutput(<div>Loading outer...</div>);
+
+      // Fire the timer to commit the outer fallback.
+      jest.runAllTimers();
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>A</div>
+          <div>Loading inner...</div>
+        </div>,
+      );
+    });
+    // Once the inner fallback is committed, we can start prerendering C.
+    assertLog(['Suspend! [B]', 'Suspend! [C]']);
+  });
+
+  it(
+    "don't skip siblings during the retry if there was a ping since the " +
+      'first attempt',
+    async () => {
+      function App() {
+        return (
+          <>
+            <div>
+              <Suspense fallback={<Text text="Loading outer..." />}>
+                <div>
+                  <AsyncText text="A" />
+                </div>
+                <div>
+                  <Suspense fallback={<Text text="Loading inner..." />}>
+                    <AsyncText text="B" />
+                    <AsyncText text="C" />
+                  </Suspense>
+                </div>
+              </Suspense>
+            </div>
+            <div>
+              <Text text="D" />
+            </div>
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        startTransition(() => root.render(<App />));
+
+        // On the first attempt, A suspends. Unwind and show a fallback, without
+        // attempting B or C.
+        await waitFor([
+          'Suspend! [A]',
+          'Loading outer...',
+
+          // Yield to simulate an interleaved event
+        ]);
+
+        // Ping the promise for A before the render phase has finished, as might
+        // happen in an interleaved network event
+        await resolveText('A');
+
+        // Now continue rendering the rest of the tree.
+        await waitForPaint(['D']);
+        expect(root).toMatchRenderedOutput(
+          <>
+            <div>Loading outer...</div>
+            <div>D</div>
+          </>,
+        );
+
+        if (gate(flags => flags.enableYieldingBeforePassive)) {
+          // Passive effects.
+          await waitForPaint([]);
+        }
+        // Immediately after the fallback commits, retry the boundary again.
+        // Because the promise for A resolved, this is a normal render, _not_
+        // a prerender. So when we proceed to B, and B suspends, we unwind again
+        // without attempting C. The practical benefit of this is that we don't
+        // block the inner Suspense fallback from appearing.
+        await waitForPaint(['A', 'Suspend! [B]', 'Loading inner...']);
+        // (Since this is a retry, the commit phase is throttled by a timer.)
+        jest.runAllTimers();
+        // The inner fallback is now visible.
+        expect(root).toMatchRenderedOutput(
+          <>
+            <div>
+              <div>A</div>
+              <div>Loading inner...</div>
+            </div>
+            <div>D</div>
+          </>,
+        );
+
+        if (gate(flags => flags.enableYieldingBeforePassive)) {
+          // Passive effects.
+          await waitForPaint([]);
+        }
+        // Now we can proceed to prerendering C.
+        await waitForPaint(['Suspend! [B]', 'Suspend! [C]']);
+      });
+      assertLog([]);
+    },
+  );
+
+  it(
+    'when a synchronous update suspends outside a boundary, the resulting' +
+      'prerender is concurrent',
+    async () => {
+      function App() {
+        return (
+          <>
+            <Text text="A" />
+            <Text text="B" />
+            <AsyncText text="Async" />
+            <Text text="C" />
+            <Text text="D" />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      // Mount the root synchronously
+      ReactNoop.flushSync(() => root.render(<App />));
+
+      // Synchronously render everything until we suspend in the shell
+      assertLog(['A', 'B', 'Suspend! [Async]']);
+
+      // The rest of the siblings begin to prerender concurrently. Notice
+      // that we don't unwind here; we pick up where we left off above.
+      await waitFor(['C']);
+      await waitFor(['D']);
+
+      assertLog([]);
+      expect(root).toMatchRenderedOutput(null);
+
+      await resolveText('Async');
+      assertLog(['A', 'B', 'Async', 'C', 'D']);
+      expect(root).toMatchRenderedOutput('ABAsyncCD');
+    },
+  );
+
+  it('restart a suspended sync render if something suspends while prerendering the siblings', async () => {
+    function App() {
+      return (
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <AsyncText text="Async" />
+          <Text text="C" />
+          <Text text="D" />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    // Mount the root synchronously
+    ReactNoop.flushSync(() => root.render(<App />));
+
+    // Synchronously render everything until we suspend in the shell
+    assertLog(['A', 'B', 'Suspend! [Async]']);
+
+    // The rest of the siblings begin to prerender concurrently
+    await waitFor(['C']);
+
+    // While we're prerendering, Async resolves. We should unwind and
+    // start over, rather than continue prerendering D.
+    await resolveText('Async');
+    assertLog(['A', 'B', 'Async', 'C', 'D']);
+    expect(root).toMatchRenderedOutput('ABAsyncCD');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
new file mode 100644
index 00000000000..6c58d1b6d11
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
@@ -0,0 +1,175 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let useEffect;
+let getCacheForType;
+
+let caches;
+let seededCache;
+let assertLog;
+
+describe('ReactSuspenseWithNoopRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Suspense = React.Suspense;
+    useEffect = React.useEffect;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    caches = [];
+    seededCache = null;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function resolveMostRecentTextCache(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  const resolveText = resolveMostRecentTextCache;
+
+  // @gate enableLegacyCache && !disableLegacyMode
+  it('regression: false positive for legacy suspense', async () => {
+    const Child = ({text}) => {
+      // If text hasn't resolved, this will throw and exit before the passive
+      // static effect flag is added by the useEffect call below.
+      readText(text);
+
+      useEffect(() => {
+        Scheduler.log('Effect');
+      }, []);
+
+      Scheduler.log(text);
+      return text;
+    };
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child text="Async" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createLegacyRoot(null);
+
+    // On initial mount, the suspended component is committed in an incomplete
+    // state, without a passive static effect flag.
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // When the promise resolves, a passive static effect flag is added. In the
+    // regression, the "missing expected static flag" would fire, because the
+    // previous fiber did not have one.
+    await act(() => {
+      resolveText('Async');
+    });
+    assertLog(['Async', 'Effect']);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
new file mode 100644
index 00000000000..8657365b063
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -0,0 +1,1462 @@
+let React;
+let ReactDOMClient;
+let ReactDOM;
+let Scheduler;
+let Suspense;
+let act;
+let textCache;
+let container;
+
+let assertLog;
+let waitForPaint;
+let waitForAll;
+let waitFor;
+
+describe('ReactSuspense', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    Scheduler = require('scheduler');
+    container = document.createElement('div');
+
+    Suspense = React.Suspense;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+
+    textCache = new Map();
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('suspends rendering and continues later', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return props.children;
+    }
+
+    function Foo({renderBar}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {renderBar ? (
+            <Bar>
+              <AsyncText text="A" />
+              <Text text="B" />
+            </Bar>
+          ) : null}
+        </Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Render an empty shell
+    await act(() => {
+      root.render(<Foo />);
+    });
+    assertLog(['Foo']);
+    const renderedEl = container;
+    expect(renderedEl.innerText).toBeUndefined();
+
+    // Navigate the shell to now render the child content.
+    // This should suspend.
+    React.startTransition(() => {
+      root.render(<Foo renderBar={true} />);
+    });
+
+    await waitForAll([
+      'Foo',
+      'Bar',
+      // A suspends
+      'Suspend! [A]',
+      // pre-warming
+      'B',
+      // end pre-warming
+      'Loading...',
+    ]);
+    expect(container.textContent).toEqual('');
+
+    await waitForAll([]);
+    expect(container.textContent).toEqual('');
+
+    resolveText('A');
+    await waitForAll(['Foo', 'Bar', 'A', 'B']);
+    expect(container.textContent).toEqual('AB');
+  });
+
+  it('suspends siblings and later recovers each independently', async () => {
+    const root = ReactDOMClient.createRoot(container);
+    // Render two sibling Suspense components
+    root.render(
+      <>
+        <Suspense fallback={<Text text="Loading A..." />}>
+          <AsyncText text="A" />
+        </Suspense>
+        <Suspense fallback={<Text text="Loading B..." />}>
+          <AsyncText text="B" />
+        </Suspense>
+      </>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading A...',
+      'Suspend! [B]',
+      'Loading B...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+    ]);
+    expect(container.innerHTML).toEqual('Loading A...Loading B...');
+
+    // Resolve first Suspense's promise and switch back to the normal view. The
+    // second Suspense should still show the placeholder
+    await act(() => resolveText('A'));
+    assertLog([
+      'A',
+      ...(gate('alwaysThrottleRetries')
+        ? ['Suspend! [B]', 'Suspend! [B]']
+        : []),
+    ]);
+    expect(container.textContent).toEqual('ALoading B...');
+
+    // Resolve the second Suspense's promise resolves and switche back to the
+    // normal view
+    await act(() => resolveText('B'));
+    assertLog(['B']);
+    expect(container.textContent).toEqual('AB');
+  });
+
+  it('interrupts current render if promise resolves before current render phase', async () => {
+    let didResolve = false;
+    const listeners = [];
+
+    const thenable = {
+      then(resolve) {
+        if (!didResolve) {
+          listeners.push(resolve);
+        } else {
+          resolve();
+        }
+      },
+    };
+
+    function resolveThenable() {
+      didResolve = true;
+      listeners.forEach(l => l());
+    }
+
+    function Async() {
+      if (!didResolve) {
+        Scheduler.log('Suspend!');
+        throw thenable;
+      }
+      Scheduler.log('Async');
+      return 'Async';
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <>
+          <Suspense fallback={<Text text="Loading..." />} />
+          <Text text="Initial" />
+        </>,
+      );
+    });
+
+    assertLog(['Initial']);
+    expect(container.textContent).toEqual('Initial');
+
+    // The update will suspend.
+    React.startTransition(() => {
+      root.render(
+        <>
+          <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.
+    await waitFor(['Suspend!', 'Loading...', 'After Suspense']);
+
+    // The promise resolves before the current render phase has completed
+    resolveThenable();
+    assertLog([]);
+    expect(container.textContent).toEqual('Initial');
+
+    // Start over from the root, instead of continuing.
+    await waitForAll([
+      // Async renders again *before* Sibling
+      'Async',
+      'After Suspense',
+      'Sibling',
+    ]);
+    expect(container.textContent).toEqual('AsyncAfter SuspenseSibling');
+  });
+
+  it('throttles fallback committing globally', async () => {
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+
+    assertLog([
+      'Foo',
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+    expect(container.textContent).toEqual('Loading...');
+
+    await resolveText('A');
+    await waitForAll(['A', 'Suspend! [B]', 'Loading more...']);
+
+    // By this point, we have enough info to show "A" and "Loading more..."
+    // However, we've just shown the outer fallback. So we'll delay
+    // showing the inner fallback hoping that B will resolve soon enough.
+    expect(container.textContent).toEqual('Loading...');
+
+    await act(() => resolveText('B'));
+    // By this point, B has resolved.
+    // The contents of both should pop in together.
+    assertLog(['A', 'B']);
+    expect(container.textContent).toEqual('AB');
+  });
+
+  it('pushes out siblings that render faster than throttle', async () => {
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" ms={290} />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" ms={30} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    setTimeout(async () => {
+      // TODO: this is dumb, but AsyncText isn't timer based after the act changes.
+      // Pretend that this is the start of the sibling suspending.
+      // In a real test, the timer would start when we render B.
+      setTimeout(async () => {
+        resolveText('B');
+      }, 30);
+
+      resolveText('A');
+    }, 290);
+
+    // Render an empty shell
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<Foo />);
+    await waitForAll([
+      'Foo',
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+    expect(container.textContent).toEqual('Loading...');
+
+    // Now resolve A
+    jest.advanceTimersByTime(290);
+    await waitFor(['A']);
+    expect(container.textContent).toEqual('Loading...');
+
+    // B starts loading. Parent boundary is in throttle.
+    // Still shows parent loading under throttle
+    jest.advanceTimersByTime(10);
+    await waitForAll(['Suspend! [B]', 'Loading more...']);
+    expect(container.textContent).toEqual('Loading...');
+
+    // !! B could have finished before the throttle, but we show a fallback.
+    // !! Pushing out the 30ms fetch for B to 300ms.
+    jest.advanceTimersByTime(300);
+    await waitFor(['B']);
+    expect(container.textContent).toEqual('ALoading more...');
+
+    await act(() => {});
+    expect(container.textContent).toEqual('AB');
+  });
+
+  it('does not throttle fallback committing for too long', async () => {
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+    assertLog([
+      'Foo',
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+    expect(container.textContent).toEqual('Loading...');
+
+    await resolveText('A');
+    await waitForAll(['A', 'Suspend! [B]', 'Loading more...']);
+
+    // By this point, we have enough info to show "A" and "Loading more..."
+    // However, we've just shown the outer fallback. So we'll delay
+    // showing the inner fallback hoping that B will resolve soon enough.
+    expect(container.textContent).toEqual('Loading...');
+    // But if we wait a bit longer, eventually we'll give up and show a
+    // fallback. The exact value here isn't important. It's a JND ("Just
+    // Noticeable Difference").
+    jest.advanceTimersByTime(500);
+    expect(container.textContent).toEqual('ALoading more...');
+
+    await act(() => resolveText('B'));
+    assertLog(['B']);
+    expect(container.textContent).toEqual('AB');
+  });
+
+  // @gate !disableLegacyMode
+  it('mounts a lazy class component in non-concurrent mode (legacy)', async () => {
+    class Class extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.log('Did update: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    async function fakeImport(result) {
+      return {default: result};
+    }
+
+    const LazyClass = React.lazy(() => fakeImport(Class));
+
+    ReactDOM.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyClass label="Hi" />
+      </Suspense>,
+      container,
+    );
+
+    assertLog(['Loading...']);
+    expect(container.textContent).toEqual('Loading...');
+
+    await LazyClass;
+
+    await waitForPaint(['Hi', 'Did mount: Hi']);
+    expect(container.textContent).toEqual('Hi');
+  });
+
+  it('updates memoized child of suspense component when context updates (simple memo)', async () => {
+    const {useContext, createContext, useState, memo} = React;
+
+    const ValueContext = createContext(null);
+
+    const MemoizedChild = memo(function MemoizedChild() {
+      const text = useContext(ValueContext);
+      return <Text text={readText(text)} />;
+    });
+
+    let setValue;
+    function App() {
+      const [value, _setValue] = useState('default');
+      setValue = _setValue;
+
+      return (
+        <ValueContext.Provider value={value}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <MemoizedChild />
+          </Suspense>
+        </ValueContext.Provider>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([
+      'Suspend! [default]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [default]',
+    ]);
+
+    await act(() => resolveText('default'));
+    assertLog(['default']);
+    expect(container.textContent).toEqual('default');
+
+    await act(() => setValue('new value'));
+    assertLog([
+      'Suspend! [new value]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [new value]',
+    ]);
+
+    await act(() => resolveText('new value'));
+    assertLog(['new value']);
+    expect(container.textContent).toEqual('new value');
+  });
+
+  it('updates memoized child of suspense component when context updates (manual memo)', async () => {
+    const {useContext, createContext, useState, memo} = React;
+
+    const ValueContext = createContext(null);
+
+    const MemoizedChild = memo(
+      function MemoizedChild() {
+        const text = useContext(ValueContext);
+        return <Text text={readText(text)} />;
+      },
+      function areEqual(prevProps, nextProps) {
+        return true;
+      },
+    );
+
+    let setValue;
+    function App() {
+      const [value, _setValue] = useState('default');
+      setValue = _setValue;
+
+      return (
+        <ValueContext.Provider value={value}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <MemoizedChild />
+          </Suspense>
+        </ValueContext.Provider>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([
+      'Suspend! [default]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [default]',
+    ]);
+
+    await act(() => resolveText('default'));
+    assertLog(['default']);
+    expect(container.textContent).toEqual('default');
+
+    await act(() => setValue('new value'));
+    assertLog([
+      'Suspend! [new value]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [new value]',
+    ]);
+
+    await act(() => resolveText('new value'));
+    assertLog(['new value']);
+    expect(container.textContent).toEqual('new value');
+  });
+
+  it('updates memoized child of suspense component when context updates (function)', async () => {
+    const {useContext, createContext, useState} = React;
+
+    const ValueContext = createContext(null);
+
+    function MemoizedChild() {
+      const text = useContext(ValueContext);
+      return <Text text={readText(text)} />;
+    }
+
+    let setValue;
+    function App({children}) {
+      const [value, _setValue] = useState('default');
+      setValue = _setValue;
+
+      return (
+        <ValueContext.Provider value={value}>{children}</ValueContext.Provider>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <App>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <MemoizedChild />
+          </Suspense>
+        </App>,
+      );
+    });
+    assertLog([
+      'Suspend! [default]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [default]',
+    ]);
+
+    await act(() => resolveText('default'));
+    assertLog(['default']);
+    expect(container.textContent).toEqual('default');
+
+    await act(() => setValue('new value'));
+    assertLog([
+      'Suspend! [new value]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [new value]',
+    ]);
+
+    await act(() => resolveText('new value'));
+    assertLog(['new value']);
+    expect(container.textContent).toEqual('new value');
+  });
+
+  it('updates memoized child of suspense component when context updates (forwardRef)', async () => {
+    const {forwardRef, useContext, createContext, useState} = React;
+
+    const ValueContext = createContext(null);
+
+    const MemoizedChild = forwardRef(() => {
+      const text = useContext(ValueContext);
+      return <Text text={readText(text)} />;
+    });
+
+    let setValue;
+    function App({children}) {
+      const [value, _setValue] = useState('default');
+      setValue = _setValue;
+
+      return (
+        <ValueContext.Provider value={value}>{children}</ValueContext.Provider>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <App>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <MemoizedChild />
+          </Suspense>
+        </App>,
+      );
+    });
+    assertLog([
+      'Suspend! [default]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [default]',
+    ]);
+
+    await act(() => resolveText('default'));
+    assertLog(['default']);
+    expect(container.textContent).toEqual('default');
+
+    await act(() => setValue('new value'));
+    assertLog([
+      'Suspend! [new value]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [new value]',
+    ]);
+
+    await act(() => resolveText('new value'));
+    assertLog(['new value']);
+    expect(container.textContent).toEqual('new value');
+  });
+
+  it('re-fires layout effects when re-showing Suspense', async () => {
+    function TextWithLayout(props) {
+      Scheduler.log(props.text);
+      React.useLayoutEffect(() => {
+        Scheduler.log('create layout');
+        return () => {
+          Scheduler.log('destroy layout');
+        };
+      }, []);
+      return props.text;
+    }
+
+    let _setShow;
+    function App(props) {
+      const [show, setShow] = React.useState(false);
+      _setShow = setShow;
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <TextWithLayout text="Child 1" />
+          {show && <AsyncText text="Child 2" />}
+        </Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog(['Child 1', 'create layout']);
+    expect(container.textContent).toEqual('Child 1');
+
+    await act(() => {
+      _setShow(true);
+    });
+    assertLog([
+      'Child 1',
+      'Suspend! [Child 2]',
+      'Loading...',
+      'destroy layout',
+      // pre-warming
+      'Child 1',
+      'Suspend! [Child 2]',
+    ]);
+
+    await act(() => resolveText('Child 2'));
+    assertLog(['Child 1', 'Child 2', 'create layout']);
+    expect(container.textContent).toEqual(['Child 1', 'Child 2'].join(''));
+  });
+
+  it('does not get stuck with fallback in concurrent mode for a large delay', async () => {
+    function App(props) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Child 1" />
+          <AsyncText text="Child 2" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([
+      'Suspend! [Child 1]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Child 1]',
+      'Suspend! [Child 2]',
+    ]);
+    await resolveText('Child 1');
+    await waitForAll([
+      'Child 1',
+      'Suspend! [Child 2]',
+      ...(gate('alwaysThrottleRetries')
+        ? []
+        : ['Child 1', 'Suspend! [Child 2]']),
+    ]);
+
+    jest.advanceTimersByTime(6000);
+
+    await act(() => resolveText('Child 2'));
+    assertLog(['Child 1', 'Child 2']);
+    expect(container.textContent).toEqual(['Child 1', 'Child 2'].join(''));
+  });
+
+  describe('outside concurrent mode (legacy)', () => {
+    // @gate !disableLegacyMode
+    it('a mounted class component can suspend without losing state', async () => {
+      class TextWithLifecycle extends React.Component {
+        componentDidMount() {
+          Scheduler.log(`Mount [${this.props.text}]`);
+        }
+        componentDidUpdate() {
+          Scheduler.log(`Update [${this.props.text}]`);
+        }
+        componentWillUnmount() {
+          Scheduler.log(`Unmount [${this.props.text}]`);
+        }
+        render() {
+          return <Text {...this.props} />;
+        }
+      }
+
+      let instance;
+      class AsyncTextWithLifecycle extends React.Component {
+        state = {step: 1};
+        componentDidMount() {
+          Scheduler.log(`Mount [${this.props.text}:${this.state.step}]`);
+        }
+        componentDidUpdate() {
+          Scheduler.log(`Update [${this.props.text}:${this.state.step}]`);
+        }
+        componentWillUnmount() {
+          Scheduler.log(`Unmount [${this.props.text}:${this.state.step}]`);
+        }
+        render() {
+          instance = this;
+          const text = readText(`${this.props.text}:${this.state.step}`);
+          return <Text text={text} />;
+        }
+      }
+
+      function App() {
+        return (
+          <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+            <TextWithLifecycle text="A" />
+            <AsyncTextWithLifecycle text="B" ref={instance} />
+            <TextWithLifecycle text="C" />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+      assertLog([
+        'A',
+        'Suspend! [B:1]',
+        'C',
+        'Loading...',
+
+        'Mount [A]',
+        // B's lifecycle should not fire because it suspended
+        // 'Mount [B]',
+        'Mount [C]',
+        'Mount [Loading...]',
+      ]);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('B:1');
+      assertLog([
+        'B:1',
+        'Unmount [Loading...]',
+        // Should be a mount, not an update
+        'Mount [B:1]',
+      ]);
+      expect(container.textContent).toEqual('AB:1C');
+
+      instance.setState({step: 2});
+      assertLog(['Suspend! [B:2]', 'Loading...', 'Mount [Loading...]']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('B:2');
+      assertLog(['B:2', 'Unmount [Loading...]', 'Update [B:2]']);
+      expect(container.textContent).toEqual('AB:2C');
+    });
+
+    // @gate !disableLegacyMode
+    it('bails out on timed-out primary children even if they receive an update', async () => {
+      let instance;
+      class Stateful extends React.Component {
+        state = {step: 1};
+        render() {
+          instance = this;
+          return <Text text={`Stateful: ${this.state.step}`} />;
+        }
+      }
+
+      function App(props) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Stateful />
+            <AsyncText text={props.text} />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App text="A" />, container);
+
+      assertLog(['Stateful: 1', 'Suspend! [A]', 'Loading...']);
+
+      await resolveText('A');
+      assertLog(['A']);
+      expect(container.textContent).toEqual('Stateful: 1A');
+
+      ReactDOM.render(<App text="B" />, container);
+      assertLog(['Stateful: 1', 'Suspend! [B]', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      instance.setState({step: 2});
+      assertLog(['Stateful: 2', 'Suspend! [B]']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('B');
+      assertLog(['B']);
+      expect(container.textContent).toEqual('Stateful: 2B');
+    });
+
+    // @gate !disableLegacyMode
+    it('when updating a timed-out tree, always retries the suspended component', async () => {
+      let instance;
+      class Stateful extends React.Component {
+        state = {step: 1};
+        render() {
+          instance = this;
+          return <Text text={`Stateful: ${this.state.step}`} />;
+        }
+      }
+
+      const Indirection = React.Fragment;
+
+      function App(props) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Stateful />
+            <Indirection>
+              <Indirection>
+                <Indirection>
+                  <AsyncText text={props.text} />
+                </Indirection>
+              </Indirection>
+            </Indirection>
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App text="A" />, container);
+
+      assertLog(['Stateful: 1', 'Suspend! [A]', 'Loading...']);
+
+      await resolveText('A');
+      assertLog(['A']);
+      expect(container.textContent).toEqual('Stateful: 1A');
+
+      ReactDOM.render(<App text="B" />, container);
+      assertLog(['Stateful: 1', 'Suspend! [B]', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      instance.setState({step: 2});
+      assertLog([
+        'Stateful: 2',
+
+        // The suspended component should suspend again. If it doesn't, the
+        // likely mistake is that the suspended fiber wasn't marked with
+        // pending work, so it was improperly treated as complete.
+        'Suspend! [B]',
+      ]);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('B');
+      assertLog(['B']);
+      expect(container.textContent).toEqual('Stateful: 2B');
+    });
+
+    // @gate !disableLegacyMode
+    it('suspends in a class that has componentWillUnmount and is then deleted', async () => {
+      class AsyncTextWithUnmount extends React.Component {
+        componentWillUnmount() {
+          Scheduler.log('will unmount');
+        }
+        render() {
+          return <Text text={readText(this.props.text)} />;
+        }
+      }
+
+      function App({text}) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncTextWithUnmount text={text} />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App text="A" />, container);
+      assertLog(['Suspend! [A]', 'Loading...']);
+      ReactDOM.render(<Text text="B" />, container);
+      // Should not fire componentWillUnmount
+      assertLog(['B']);
+      expect(container.textContent).toEqual('B');
+    });
+
+    // @gate !disableLegacyMode
+    it('suspends in a component that also contains useEffect', async () => {
+      const {useLayoutEffect} = React;
+
+      function AsyncTextWithEffect(props) {
+        const text = props.text;
+
+        useLayoutEffect(() => {
+          Scheduler.log('Did commit: ' + text);
+        }, [text]);
+
+        return <Text text={readText(text)} />;
+      }
+
+      function App({text}) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncTextWithEffect text={text} />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App text="A" />, container);
+      assertLog(['Suspend! [A]', 'Loading...']);
+      await resolveText('A');
+      assertLog(['A', 'Did commit: A']);
+    });
+
+    // @gate !disableLegacyMode
+    it('retries when an update is scheduled on a timed out tree', async () => {
+      let instance;
+      class Stateful extends React.Component {
+        state = {step: 1};
+        render() {
+          instance = this;
+          return <AsyncText text={`Step: ${this.state.step}`} />;
+        }
+      }
+
+      function App(props) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Stateful />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+
+      // Initial render
+      assertLog(['Suspend! [Step: 1]', 'Loading...']);
+
+      await act(() => resolveText('Step: 1'));
+      assertLog(['Step: 1']);
+      expect(container.textContent).toEqual('Step: 1');
+
+      // Update that suspends
+      await act(() => {
+        instance.setState({step: 2});
+      });
+      assertLog(['Suspend! [Step: 2]', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      // Update while still suspended
+      instance.setState({step: 3});
+      assertLog(['Suspend! [Step: 3]']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await act(() => {
+        resolveText('Step: 2');
+        resolveText('Step: 3');
+      });
+      assertLog(['Step: 3']);
+      expect(container.textContent).toEqual('Step: 3');
+    });
+
+    // @gate !disableLegacyMode
+    it('does not remount the fallback while suspended children resolve in legacy mode', async () => {
+      let mounts = 0;
+      class ShouldMountOnce extends React.Component {
+        componentDidMount() {
+          mounts++;
+        }
+        render() {
+          return <Text text="Loading..." />;
+        }
+      }
+
+      function App(props) {
+        return (
+          <Suspense fallback={<ShouldMountOnce />}>
+            <AsyncText text="Child 1" />
+            <AsyncText text="Child 2" />
+            <AsyncText text="Child 3" />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+
+      // Initial render
+      assertLog([
+        'Suspend! [Child 1]',
+        'Suspend! [Child 2]',
+        'Suspend! [Child 3]',
+        'Loading...',
+      ]);
+      await waitForAll([]);
+
+      await resolveText('Child 1');
+      assertLog(['Child 1', 'Suspend! [Child 2]', 'Suspend! [Child 3]']);
+
+      await resolveText('Child 2');
+      assertLog(['Child 2', 'Suspend! [Child 3]']);
+
+      await resolveText('Child 3');
+      assertLog(['Child 3']);
+      expect(container.textContent).toEqual(
+        ['Child 1', 'Child 2', 'Child 3'].join(''),
+      );
+      expect(mounts).toBe(1);
+    });
+
+    // @gate !disableLegacyMode
+    it('reuses effects, including deletions, from the suspended tree', async () => {
+      const {useState} = React;
+
+      let setTab;
+      function App() {
+        const [tab, _setTab] = useState(0);
+        setTab = _setTab;
+
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText key={tab} text={'Tab: ' + tab} />
+            <Text key={tab + 'sibling'} text=" + sibling" />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+      assertLog(['Suspend! [Tab: 0]', ' + sibling', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('Tab: 0');
+      assertLog(['Tab: 0']);
+      expect(container.textContent).toEqual('Tab: 0 + sibling');
+
+      await act(() => setTab(1));
+      assertLog(['Suspend! [Tab: 1]', ' + sibling', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('Tab: 1');
+      assertLog(['Tab: 1']);
+      expect(container.textContent).toEqual('Tab: 1 + sibling');
+
+      await act(() => setTab(2));
+      assertLog(['Suspend! [Tab: 2]', ' + sibling', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await resolveText('Tab: 2');
+      assertLog(['Tab: 2']);
+      expect(container.textContent).toEqual('Tab: 2 + sibling');
+    });
+
+    // @gate !disableLegacyMode
+    it('does not warn if a mounted component is pinged', async () => {
+      const {useState} = React;
+
+      ReactDOM.render(null, container);
+
+      let setStep;
+      function UpdatingText({text, ms}) {
+        const [step, _setStep] = useState(0);
+        setStep = _setStep;
+        const fullText = `${text}:${step}`;
+        return <Text text={readText(fullText)} />;
+      }
+
+      ReactDOM.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <UpdatingText text="A" ms={1000} />
+        </Suspense>,
+        container,
+      );
+
+      assertLog(['Suspend! [A:0]', 'Loading...']);
+
+      await resolveText('A:0');
+      assertLog(['A:0']);
+      expect(container.textContent).toEqual('A:0');
+
+      await act(() => setStep(1));
+      assertLog(['Suspend! [A:1]', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+    });
+
+    // @gate !disableLegacyMode
+    it('memoizes promise listeners per thread ID to prevent redundant renders', async () => {
+      function App() {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="A" />
+            <AsyncText text="B" />
+            <AsyncText text="C" />
+          </Suspense>
+        );
+      }
+
+      ReactDOM.render(null, container);
+
+      ReactDOM.render(<App />, container);
+
+      assertLog(['Suspend! [A]', 'Suspend! [B]', 'Suspend! [C]', 'Loading...']);
+
+      await resolveText('A');
+      assertLog([
+        'A',
+        // The promises for B and C have now been thrown twice
+        'Suspend! [B]',
+        'Suspend! [C]',
+      ]);
+
+      await resolveText('B');
+      assertLog([
+        // Even though the promise for B was thrown twice, we should only
+        // re-render once.
+        'B',
+        // The promise for C has now been thrown three times
+        'Suspend! [C]',
+      ]);
+
+      await resolveText('C');
+      assertLog([
+        // Even though the promise for C was thrown three times, we should only
+        // re-render once.
+        'C',
+      ]);
+    });
+
+    // @gate !disableLegacyMode
+    it('#14162', async () => {
+      const {lazy} = React;
+
+      function Hello() {
+        return <span>hello</span>;
+      }
+
+      async function fetchComponent() {
+        return new Promise(r => {
+          // simulating a delayed import() call
+          setTimeout(r, 1000, {default: Hello});
+        });
+      }
+
+      const LazyHello = lazy(fetchComponent);
+
+      class App extends React.Component {
+        state = {render: false};
+
+        componentDidMount() {
+          setTimeout(() => this.setState({render: true}));
+        }
+
+        render() {
+          return (
+            <Suspense fallback={<span>loading...</span>}>
+              {this.state.render && <LazyHello />}
+            </Suspense>
+          );
+        }
+      }
+
+      ReactDOM.render(null, container);
+
+      ReactDOM.render(<App name="world" />, container);
+    });
+
+    // @gate !disableLegacyMode
+    it('updates memoized child of suspense component when context updates (simple memo)', async () => {
+      const {useContext, createContext, useState, memo} = React;
+
+      const ValueContext = createContext(null);
+
+      const MemoizedChild = memo(function MemoizedChild() {
+        const text = useContext(ValueContext);
+        return <Text text={readText(text)} />;
+      });
+
+      let setValue;
+      function App() {
+        const [value, _setValue] = useState('default');
+        setValue = _setValue;
+
+        return (
+          <ValueContext.Provider value={value}>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <MemoizedChild />
+            </Suspense>
+          </ValueContext.Provider>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+      assertLog(['Suspend! [default]', 'Loading...']);
+
+      await resolveText('default');
+      assertLog(['default']);
+      expect(container.textContent).toEqual('default');
+
+      await act(() => setValue('new value'));
+      assertLog(['Suspend! [new value]', 'Loading...']);
+
+      await resolveText('new value');
+      assertLog(['new value']);
+      expect(container.textContent).toEqual('new value');
+    });
+
+    // @gate !disableLegacyMode
+    it('updates memoized child of suspense component when context updates (manual memo)', async () => {
+      const {useContext, createContext, useState, memo} = React;
+
+      const ValueContext = createContext(null);
+
+      const MemoizedChild = memo(
+        function MemoizedChild() {
+          const text = useContext(ValueContext);
+          return <Text text={readText(text)} />;
+        },
+        function areEqual(prevProps, nextProps) {
+          return true;
+        },
+      );
+
+      let setValue;
+      function App() {
+        const [value, _setValue] = useState('default');
+        setValue = _setValue;
+
+        return (
+          <ValueContext.Provider value={value}>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <MemoizedChild />
+            </Suspense>
+          </ValueContext.Provider>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+      assertLog(['Suspend! [default]', 'Loading...']);
+
+      await resolveText('default');
+      assertLog(['default']);
+      expect(container.textContent).toEqual('default');
+
+      await act(() => setValue('new value'));
+      assertLog(['Suspend! [new value]', 'Loading...']);
+
+      await resolveText('new value');
+      assertLog(['new value']);
+      expect(container.textContent).toEqual('new value');
+    });
+
+    // @gate !disableLegacyMode
+    it('updates memoized child of suspense component when context updates (function)', async () => {
+      const {useContext, createContext, useState} = React;
+
+      const ValueContext = createContext(null);
+
+      function MemoizedChild() {
+        const text = useContext(ValueContext);
+        return <Text text={readText(text)} />;
+      }
+
+      let setValue;
+      function App({children}) {
+        const [value, _setValue] = useState('default');
+        setValue = _setValue;
+
+        return (
+          <ValueContext.Provider value={value}>
+            {children}
+          </ValueContext.Provider>
+        );
+      }
+
+      ReactDOM.render(
+        <App>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <MemoizedChild />
+          </Suspense>
+        </App>,
+        container,
+      );
+      assertLog(['Suspend! [default]', 'Loading...']);
+
+      await resolveText('default');
+      assertLog(['default']);
+      expect(container.textContent).toEqual('default');
+
+      await act(() => setValue('new value'));
+      assertLog(['Suspend! [new value]', 'Loading...']);
+
+      await resolveText('new value');
+      assertLog(['new value']);
+      expect(container.textContent).toEqual('new value');
+    });
+
+    // @gate !disableLegacyMode
+    it('updates memoized child of suspense component when context updates (forwardRef)', async () => {
+      const {forwardRef, useContext, createContext, useState} = React;
+
+      const ValueContext = createContext(null);
+
+      const MemoizedChild = forwardRef(function MemoizedChild() {
+        const text = useContext(ValueContext);
+        return <Text text={readText(text)} />;
+      });
+
+      let setValue;
+      function App() {
+        const [value, _setValue] = useState('default');
+        setValue = _setValue;
+
+        return (
+          <ValueContext.Provider value={value}>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <MemoizedChild />
+            </Suspense>
+          </ValueContext.Provider>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+      assertLog(['Suspend! [default]', 'Loading...']);
+
+      await resolveText('default');
+      assertLog(['default']);
+      expect(container.textContent).toEqual('default');
+
+      await act(() => setValue('new value'));
+      assertLog(['Suspend! [new value]', 'Loading...']);
+
+      await resolveText('new value');
+      assertLog(['new value']);
+      expect(container.textContent).toEqual('new value');
+    });
+
+    // @gate !disableLegacyMode
+    it('updates context consumer within child of suspended suspense component when context updates', async () => {
+      const {createContext, useState} = React;
+
+      const ValueContext = createContext(null);
+
+      const promiseThatNeverResolves = new Promise(() => {});
+      function Child() {
+        return (
+          <ValueContext.Consumer>
+            {value => {
+              Scheduler.log(`Received context value [${value}]`);
+              if (value === 'default') return <Text text="default" />;
+              throw promiseThatNeverResolves;
+            }}
+          </ValueContext.Consumer>
+        );
+      }
+
+      let setValue;
+      function Wrapper({children}) {
+        const [value, _setValue] = useState('default');
+        setValue = _setValue;
+        return (
+          <ValueContext.Provider value={value}>
+            {children}
+          </ValueContext.Provider>
+        );
+      }
+
+      function App() {
+        return (
+          <Wrapper>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Child />
+            </Suspense>
+          </Wrapper>
+        );
+      }
+
+      ReactDOM.render(<App />, container);
+      assertLog(['Received context value [default]', 'default']);
+      expect(container.textContent).toEqual('default');
+
+      await act(() => setValue('new value'));
+      assertLog(['Received context value [new value]', 'Loading...']);
+      expect(container.textContent).toEqual('Loading...');
+
+      await act(() => setValue('default'));
+      assertLog(['Received context value [default]', 'default']);
+      expect(container.textContent).toEqual('default');
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
new file mode 100644
index 00000000000..866e87bd6c4
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
@@ -0,0 +1,260 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let waitForAll;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactSuspense', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    act = InternalTestUtils.act;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  function createThenable() {
+    let completed = false;
+    let resolve;
+    const promise = new Promise(res => {
+      resolve = () => {
+        completed = true;
+        res();
+      };
+    });
+    const PromiseComp = () => {
+      if (!completed) {
+        throw promise;
+      }
+      return 'Done';
+    };
+    return {promise, resolve, PromiseComp};
+  }
+
+  // Warning don't fire in production, so this test passes in prod even if
+  // the suspenseCallback feature is not enabled
+  // @gate enableSuspenseCallback || !__DEV__
+  it('check type', async () => {
+    const {PromiseComp} = createThenable();
+
+    const elementBadType = (
+      <React.Suspense suspenseCallback={1} fallback={'Waiting'}>
+        <PromiseComp />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(elementBadType);
+    await waitForAll([]);
+    assertConsoleErrorDev(
+      [
+        'Unexpected type for suspenseCallback.',
+        ...(gate('alwaysThrottleRetries')
+          ? []
+          : ['Unexpected type for suspenseCallback.']),
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+
+    const elementMissingCallback = (
+      <React.Suspense fallback={'Waiting'}>
+        <PromiseComp />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(elementMissingCallback);
+    await waitForAll([]);
+    assertConsoleErrorDev([]);
+  });
+
+  // @gate enableSuspenseCallback
+  it('1 then 0 suspense callback', async () => {
+    const {promise, resolve, PromiseComp} = createThenable();
+
+    let ops = [];
+    const suspenseCallback = thenables => {
+      ops.push(thenables);
+    };
+
+    const element = (
+      <React.Suspense suspenseCallback={suspenseCallback} fallback={'Waiting'}>
+        <PromiseComp />
+      </React.Suspense>
+    );
+
+    ReactNoop.render(element);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting');
+    expect(ops).toEqual([
+      new Set([promise]),
+      ...(gate('alwaysThrottleRetries') ? [] : new Set([promise])),
+    ]);
+    ops = [];
+
+    await act(() => resolve());
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Done');
+    expect(ops).toEqual([]);
+  });
+
+  // @gate enableSuspenseCallback
+  it('2 then 1 then 0 suspense callback', async () => {
+    const {
+      promise: promise1,
+      resolve: resolve1,
+      PromiseComp: PromiseComp1,
+    } = createThenable();
+    const {
+      promise: promise2,
+      resolve: resolve2,
+      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);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 1');
+    expect(ops).toEqual([
+      new Set([promise1]),
+      ...(gate('alwaysThrottleRetries') ? [] : new Set([promise1, promise2])),
+    ]);
+    ops = [];
+
+    await act(() => resolve1());
+    ReactNoop.render(element);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 1');
+    expect(ops).toEqual([
+      new Set([promise2]),
+      // pre-warming
+      new Set([promise2]),
+    ]);
+    ops = [];
+
+    await act(() => resolve2());
+    ReactNoop.render(element);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('DoneDone');
+    expect(ops).toEqual([]);
+  });
+
+  // @gate enableSuspenseCallback
+  it('nested suspense promises are reported only for their tier', async () => {
+    const {promise, PromiseComp} = createThenable();
+
+    const ops1 = [];
+    const suspenseCallback1 = thenables => {
+      ops1.push(thenables);
+    };
+    const 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);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 2');
+    expect(ops1).toEqual([]);
+    expect(ops2).toEqual([
+      new Set([promise]),
+      ...(gate('alwaysThrottleRetries') ? [] : [new Set([promise])]),
+    ]);
+  });
+
+  // @gate enableSuspenseCallback
+  it('competing suspense promises', async () => {
+    const {
+      promise: promise1,
+      resolve: resolve1,
+      PromiseComp: PromiseComp1,
+    } = createThenable();
+    const {
+      promise: promise2,
+      resolve: resolve2,
+      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);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 1');
+    expect(ops1).toEqual([new Set([promise1])]);
+    expect(ops2).toEqual([]);
+    ops1 = [];
+    ops2 = [];
+
+    await act(() => resolve1());
+    expect(ReactNoop).toMatchRenderedOutput('Waiting Tier 2Done');
+    expect(ops1).toEqual([]);
+    expect(ops2).toEqual([new Set([promise2]), new Set([promise2])]);
+    ops1 = [];
+    ops2 = [];
+
+    await act(() => resolve2());
+    expect(ReactNoop).toMatchRenderedOutput('DoneDone');
+    expect(ops1).toEqual([]);
+    expect(ops2).toEqual([]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
new file mode 100644
index 00000000000..eeb00ac9850
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -0,0 +1,3526 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let getCacheForType;
+let caches;
+let seededCache;
+let ErrorBoundary;
+let waitForAll;
+let waitFor;
+let assertLog;
+
+// TODO: These tests don't pass in persistent mode yet. Need to implement.
+
+describe('ReactSuspenseEffectsSemantics', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Suspense = React.Suspense;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
+
+    caches = [];
+    seededCache = null;
+
+    ErrorBoundary = class extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary render: catch');
+          return this.props.fallback;
+        }
+        Scheduler.log('ErrorBoundary render: try');
+        return this.props.children;
+      }
+    };
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend:${text}`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error:${text}`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend:${text}`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({children = null, text}) {
+    Scheduler.log(`Text:${text} render`);
+    React.useInsertionEffect(() => {
+      Scheduler.log(`Text:${text} create insertion`);
+      return () => {
+        Scheduler.log(`Text:${text} destroy insertion`);
+      };
+    }, []);
+
+    React.useLayoutEffect(() => {
+      Scheduler.log(`Text:${text} create layout`);
+      return () => {
+        Scheduler.log(`Text:${text} destroy layout`);
+      };
+    }, []);
+    React.useEffect(() => {
+      Scheduler.log(`Text:${text} create passive`);
+      return () => {
+        Scheduler.log(`Text:${text} destroy passive`);
+      };
+    }, []);
+    return <span prop={text}>{children}</span>;
+  }
+
+  function AsyncText({children = null, text}) {
+    readText(text);
+    Scheduler.log(`AsyncText:${text} render`);
+    React.useLayoutEffect(() => {
+      Scheduler.log(`AsyncText:${text} create layout`);
+      return () => {
+        Scheduler.log(`AsyncText:${text} destroy layout`);
+      };
+    }, []);
+    React.useEffect(() => {
+      Scheduler.log(`AsyncText:${text} create passive`);
+      return () => {
+        Scheduler.log(`AsyncText:${text} destroy passive`);
+      };
+    }, []);
+    return <span prop={text}>{children}</span>;
+  }
+
+  function resolveMostRecentTextCache(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  const resolveText = resolveMostRecentTextCache;
+
+  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(() => {});
+  }
+
+  describe('when a component suspends during initial mount', () => {
+    // @gate enableLegacyCache
+    it('should not change behavior in concurrent mode', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentWillUnmount`);
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.log(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <Text text="Inside:Before" />
+              {children}
+              <ClassText text="Inside:After" />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount and suspend.
+      await act(() => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+      });
+      assertLog([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'Text:Fallback render',
+        'Text:Outside render',
+        'Text:Fallback create insertion',
+        'Text:Outside create insertion',
+        'Text:Fallback create layout',
+        'Text:Outside create layout',
+        'App create layout',
+        'Text:Fallback create passive',
+        'Text:Outside create passive',
+        'App create passive',
+        // pre-warming
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'ClassText:Inside:After render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Resolving the suspended resource should
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'Text:Inside:Before render',
+        'AsyncText:Async render',
+        'ClassText:Inside:After render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'Text:Inside:Before create insertion',
+        'Text:Inside:Before create layout',
+        'AsyncText:Async create layout',
+        'ClassText:Inside:After componentDidMount',
+        'Text:Fallback destroy passive',
+        'Text:Inside:Before create passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'Text:Inside:Before destroy insertion',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'ClassText:Inside:After componentWillUnmount',
+        'Text:Outside destroy insertion',
+        'Text:Outside destroy layout',
+        'App destroy passive',
+        'Text:Inside:Before destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outside destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('should not change behavior in sync', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentWillUnmount`);
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.log(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <Text text="Inside:Before" />
+              {children}
+              <ClassText text="Inside:After" />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount and suspend.
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+      });
+      assertLog([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'ClassText:Inside:After render',
+        'Text:Fallback render',
+        'Text:Outside render',
+        'Text:Inside:Before create insertion',
+        'Text:Fallback create insertion',
+        'Text:Outside create insertion',
+        'Text:Inside:Before create layout',
+        'ClassText:Inside:After componentDidMount',
+        'Text:Fallback create layout',
+        'Text:Outside create layout',
+        'App create layout',
+        'Text:Inside:Before create passive',
+        'Text:Fallback create passive',
+        'Text:Outside create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Resolving the suspended resource should
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'Text:Inside:Before destroy insertion',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'ClassText:Inside:After componentWillUnmount',
+        'Text:Outside destroy insertion',
+        'Text:Outside destroy layout',
+        'App destroy passive',
+        'Text:Inside:Before destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outside destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+  });
+
+  describe('effects within a tree that re-suspends in an update', () => {
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('should not be destroyed or recreated in legacy roots', async () => {
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <Text text="Inside:Before" />
+              {children}
+              <Text text="Inside:After" />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(<App />);
+      });
+      assertLog([
+        'App render',
+        'Text:Inside:Before render',
+        'Text:Inside:After render',
+        'Text:Outside render',
+        'Text:Inside:Before create insertion',
+        'Text:Inside:After create insertion',
+        'Text:Outside create insertion',
+        'Text:Inside:Before create layout',
+        'Text:Inside:After create layout',
+        'Text:Outside create layout',
+        'App create layout',
+        'Text:Inside:Before create passive',
+        'Text:Inside:After create passive',
+        'Text:Outside create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+      });
+      assertLog([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'Text:Inside:After render',
+        'Text:Fallback render',
+        'Text:Outside render',
+        'Text:Fallback create insertion',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      await advanceTimers(1000);
+
+      // Noop since sync root has already committed
+      assertLog([]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" hidden={true} />
+          <span prop="Inside:After" hidden={true} />
+          <span prop="Fallback" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'Text:Inside:Before destroy insertion',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Inside:After destroy insertion',
+        'Text:Inside:After destroy layout',
+        'Text:Outside destroy insertion',
+        'Text:Outside destroy layout',
+        'App destroy passive',
+        'Text:Inside:Before destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Inside:After destroy passive',
+        'Text:Outside destroy passive',
+      ]);
+    });
+
+    // @gate enableLegacyCache
+    it('should be destroyed and recreated for function components', async () => {
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <Text text="Inside:Before" />
+              {children}
+              <Text text="Inside:After" />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'Text:Inside:Before render',
+        'Text:Inside:After render',
+        'Text:Outside render',
+        'Text:Inside:Before create insertion',
+        'Text:Inside:After create insertion',
+        'Text:Outside create insertion',
+        'Text:Inside:Before create layout',
+        'Text:Inside:After create layout',
+        'Text:Outside create layout',
+        'App create layout',
+        'Text:Inside:Before create passive',
+        'Text:Inside:After create passive',
+        'Text:Outside create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      await act(async () => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+        await waitFor([
+          'App render',
+          'Text:Inside:Before render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'Text:Inside:Before destroy layout',
+          'Text:Inside:After destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+        ]);
+        await waitForAll([
+          'Text:Fallback create passive',
+          // pre-warming
+          'Text:Inside:Before render',
+          'Suspend:Async',
+          'Text:Inside:After render',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Inside:Before" hidden={true} />
+            <span prop="Inside:After" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
+      });
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'Text:Inside:Before render',
+        'AsyncText:Async render',
+        'Text:Inside:After render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'Text:Inside:Before create layout',
+        'AsyncText:Async create layout',
+        'Text:Inside:After create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'Text:Inside:Before destroy insertion',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Inside:After destroy insertion',
+        'Text:Inside:After destroy layout',
+        'Text:Outside destroy insertion',
+        'Text:Outside destroy layout',
+        'App destroy passive',
+        'Text:Inside:Before destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Inside:After destroy passive',
+        'Text:Outside destroy passive',
+      ]);
+    });
+
+    // @gate enableLegacyCache
+    it('should be destroyed and recreated for class components', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentWillUnmount`);
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.log(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<ClassText text="Fallback" />}>
+              <ClassText text="Inside:Before" />
+              {children}
+              <ClassText text="Inside:After" />
+            </Suspense>
+            <ClassText text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'ClassText:Inside:Before render',
+        'ClassText:Inside:After render',
+        'ClassText:Outside render',
+        'ClassText:Inside:Before componentDidMount',
+        'ClassText:Inside:After componentDidMount',
+        'ClassText:Outside componentDidMount',
+        'App create layout',
+        'App create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      await act(async () => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+
+        await waitFor([
+          'App render',
+          'ClassText:Inside:Before render',
+          'Suspend:Async',
+          'ClassText:Fallback render',
+          'ClassText:Outside render',
+          'ClassText:Inside:Before componentWillUnmount',
+          'ClassText:Inside:After componentWillUnmount',
+          'ClassText:Fallback componentDidMount',
+          'ClassText:Outside componentDidUpdate',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Inside:Before" hidden={true} />
+            <span prop="Inside:After" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
+      });
+      // pre-warming
+      assertLog([
+        'ClassText:Inside:Before render',
+        'Suspend:Async',
+        'ClassText:Inside:After render',
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'ClassText:Inside:Before render',
+        'AsyncText:Async render',
+        'ClassText:Inside:After render',
+        'ClassText:Fallback componentWillUnmount',
+        'ClassText:Inside:Before componentDidMount',
+        'AsyncText:Async create layout',
+        'ClassText:Inside:After componentDidMount',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside:Before" />
+          <span prop="Async" />
+          <span prop="Inside:After" />
+          <span prop="Outside" />
+        </>,
+      );
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'ClassText:Inside:Before componentWillUnmount',
+        'AsyncText:Async destroy layout',
+        'ClassText:Inside:After componentWillUnmount',
+        'ClassText:Outside componentWillUnmount',
+        'App destroy passive',
+        'AsyncText:Async destroy passive',
+      ]);
+    });
+
+    // @gate enableLegacyCache
+    it('should be destroyed and recreated when nested below host components', async () => {
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <Text text="Outer">
+              <Text text="Inner" />
+            </Text>
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Inner create insertion',
+        'Text:Outer create insertion',
+        'Text:Inner create layout',
+        'Text:Outer create layout',
+        'App create layout',
+        'Text:Inner create passive',
+        'Text:Outer create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Outer">
+          <span prop="Inner" />
+        </span>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      await act(async () => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+        await waitFor([
+          'App render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outer destroy layout',
+          'Text:Inner destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+        ]);
+        await waitForAll([
+          'Text:Fallback create passive',
+          // pre-warming
+          'Suspend:Async',
+          'Text:Outer render',
+          'Text:Inner render',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span hidden={true} prop="Outer">
+              <span prop="Inner" />
+            </span>
+            <span prop="Fallback" />
+          </>,
+        );
+      });
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Inner create layout',
+        'Text:Outer create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Async" />
+          <span prop="Outer">
+            <span prop="Inner" />
+          </span>
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Outer destroy insertion',
+        'Text:Outer destroy layout',
+        'Text:Inner destroy insertion',
+        'Text:Inner destroy layout',
+        'App destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outer destroy passive',
+        'Text:Inner destroy passive',
+      ]);
+    });
+
+    // @gate enableLegacyCache
+    it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
+      const MemoizedText = React.memo(Text, () => true);
+
+      function App({children = null}) {
+        Scheduler.log('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.log('App create layout');
+          return () => {
+            Scheduler.log('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.log('App create passive');
+          return () => {
+            Scheduler.log('App destroy passive');
+          };
+        }, []);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <Text text="Outer">
+              <MemoizedText text="MemoizedInner" />
+            </Text>
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'Text:Outer render',
+        'Text:MemoizedInner render',
+        'Text:MemoizedInner create insertion',
+        'Text:Outer create insertion',
+        'Text:MemoizedInner create layout',
+        'Text:Outer create layout',
+        'App create layout',
+        'Text:MemoizedInner create passive',
+        'Text:Outer create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <span prop="Outer">
+          <span prop="MemoizedInner" />
+        </span>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      await act(async () => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" />
+          </App>,
+        );
+        await waitFor([
+          'App render',
+          'Suspend:Async',
+          // Text:MemoizedInner is memoized
+          'Text:Fallback render',
+          'Text:Outer destroy layout',
+          'Text:MemoizedInner destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+        ]);
+        await waitForAll([
+          'Text:Fallback create passive',
+          // pre-warming
+          'Suspend:Async',
+          'Text:Outer render',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span hidden={true} prop="Outer">
+              <span prop="MemoizedInner" />
+            </span>
+            <span prop="Fallback" />
+          </>,
+        );
+      });
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'Text:Outer render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:MemoizedInner create layout',
+        'Text:Outer create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Async" />
+          <span prop="Outer">
+            <span prop="MemoizedInner" />
+          </span>
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'App destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Outer destroy insertion',
+        'Text:Outer destroy layout',
+        'Text:MemoizedInner destroy insertion',
+        'Text:MemoizedInner destroy layout',
+        'App destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outer destroy passive',
+        'Text:MemoizedInner destroy passive',
+      ]);
+    });
+
+    // @gate enableLegacyCache
+    it('should respect nested suspense boundaries', async () => {
+      function App({innerChildren = null, outerChildren = null}) {
+        return (
+          <Suspense fallback={<Text text="OuterFallback" />}>
+            <Text text="Outer" />
+            {outerChildren}
+            <Suspense fallback={<Text text="InnerFallback" />}>
+              <Text text="Inner" />
+              {innerChildren}
+            </Suspense>
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Outer create insertion',
+        'Text:Inner create insertion',
+        'Text:Outer create layout',
+        'Text:Inner create layout',
+        'Text:Outer create passive',
+        'Text:Inner create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" />
+        </>,
+      );
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(
+          <App innerChildren={<AsyncText text="InnerAsync_1" />} />,
+        );
+      });
+      assertLog([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+        'Text:Inner destroy layout',
+        'Text:InnerFallback create insertion',
+        'Text:InnerFallback create layout',
+        'Text:InnerFallback create passive',
+        // pre-warming
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
+
+      // Suspend the outer Suspense subtree (outer effects and inner fallback effects should be destroyed)
+      // (This check also ensures we don't destroy effects for mounted inner fallback.)
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_1" />}
+            innerChildren={<AsyncText text="InnerAsync_1" />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:OuterFallback render',
+        'Text:Outer destroy layout',
+        'Text:InnerFallback destroy layout',
+        'Text:OuterFallback create insertion',
+        'Text:OuterFallback create layout',
+        'Text:OuterFallback create passive',
+        // pre-warming
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+
+      // Show the inner Suspense subtree (no effects should be recreated)
+      await act(async () => {
+        await resolveText('InnerAsync_1');
+      });
+      assertLog([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        // pre-warming
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_1 render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+
+      // Suspend the inner Suspense subtree (no effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_1" />}
+            innerChildren={<AsyncText text="InnerAsync_2" />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:OuterFallback render',
+        // pre-warming
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'Suspend:InnerAsync_2',
+        'Text:InnerFallback render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+
+      // Show the outer Suspense subtree (only outer effects should be recreated)
+      await act(async () => {
+        await resolveText('OuterAsync_1');
+      });
+      assertLog([
+        'Text:Outer render',
+        'AsyncText:OuterAsync_1 render',
+        'Text:Inner render',
+        'Suspend:InnerAsync_2',
+        'Text:InnerFallback render',
+        'Text:OuterFallback destroy insertion',
+        'Text:OuterFallback destroy layout',
+        'Text:Outer create layout',
+        'AsyncText:OuterAsync_1 create layout',
+        'Text:InnerFallback create layout',
+        'Text:OuterFallback destroy passive',
+        'AsyncText:OuterAsync_1 create passive',
+        // pre-warming
+        'Text:Inner render',
+        'Suspend:InnerAsync_2',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_1" />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
+
+      // Show the inner Suspense subtree (only inner effects should be recreated)
+      await act(async () => {
+        await resolveText('InnerAsync_2');
+      });
+      assertLog([
+        'Text:Inner render',
+        'AsyncText:InnerAsync_2 render',
+        'Text:InnerFallback destroy insertion',
+        'Text:InnerFallback destroy layout',
+        'Text:Inner create layout',
+        'AsyncText:InnerAsync_2 create layout',
+        'Text:InnerFallback destroy passive',
+        'AsyncText:InnerAsync_2 create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_1" />
+          <span prop="Inner" />
+          <span prop="InnerAsync_2" />
+        </>,
+      );
+
+      // Suspend the outer Suspense subtree (all effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_2" />}
+            innerChildren={<AsyncText text="InnerAsync_2" />}
+          />,
+        );
+      });
+      assertLog([
+        'Text:Outer render',
+        'Suspend:OuterAsync_2',
+        'Text:OuterFallback render',
+        'Text:Outer destroy layout',
+        'AsyncText:OuterAsync_1 destroy layout',
+        'Text:Inner destroy layout',
+        'AsyncText:InnerAsync_2 destroy layout',
+        'Text:OuterFallback create insertion',
+        'Text:OuterFallback create layout',
+        'Text:OuterFallback create passive',
+        // pre-warming
+        'Text:Outer render',
+        'Suspend:OuterAsync_2',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_2 render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="OuterAsync_1" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerAsync_2" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+
+      // Show the outer Suspense subtree (all effects should be recreated)
+      await act(async () => {
+        await resolveText('OuterAsync_2');
+      });
+      assertLog([
+        'Text:Outer render',
+        'AsyncText:OuterAsync_2 render',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_2 render',
+        'Text:OuterFallback destroy insertion',
+        'Text:OuterFallback destroy layout',
+        'Text:Outer create layout',
+        'AsyncText:OuterAsync_2 create layout',
+        'Text:Inner create layout',
+        'AsyncText:InnerAsync_2 create layout',
+        'Text:OuterFallback destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_2" />
+          <span prop="Inner" />
+          <span prop="InnerAsync_2" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache
+    it('should wait to reveal an inner child when inner one reveals first', async () => {
+      function App({outerChildren, innerChildren}) {
+        return (
+          <Suspense fallback={<Text text="OuterFallback" />} name="Outer">
+            <Suspense fallback={<Text text="InnerFallback" />} name="Inner">
+              <div>{innerChildren}</div>
+            </Suspense>
+            {outerChildren}
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([]);
+      expect(ReactNoop).toMatchRenderedOutput(<div />);
+
+      // Resuspend inner boundary
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={null}
+            innerChildren={<AsyncText text="InnerAsync" />}
+          />,
+        );
+      });
+      assertLog([
+        'Suspend:InnerAsync',
+        'Text:InnerFallback render',
+        'Text:InnerFallback create insertion',
+        'Text:InnerFallback create layout',
+        'Text:InnerFallback create passive',
+        'Suspend:InnerAsync',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
+
+      // Resuspend both boundaries
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync" />}
+            innerChildren={<AsyncText text="InnerAsync" />}
+          />,
+        );
+      });
+      assertLog([
+        'Suspend:InnerAsync',
+        'Text:InnerFallback render',
+        'Suspend:OuterAsync',
+        'Text:OuterFallback render',
+        'Text:InnerFallback destroy layout',
+        'Text:OuterFallback create insertion',
+        'Text:OuterFallback create layout',
+        'Text:OuterFallback create passive',
+        'Suspend:InnerAsync',
+        'Text:InnerFallback render',
+        'Suspend:OuterAsync',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+
+      // Unsuspend the inner Suspense subtree only
+      // Interestingly, this never commits because the tree is left suspended.
+      // If it did commit, it would potentially cause the div to incorrectly reappear.
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync" />}
+            innerChildren={null}
+          />,
+        );
+      });
+      assertLog([
+        'Suspend:OuterAsync',
+        'Text:OuterFallback render',
+        'Suspend:OuterAsync',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache
+    it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
+      function App({innerChildren = null, outerChildren = null}) {
+        return (
+          <Suspense fallback={<Text text="OuterFallback" />}>
+            <Text text="Outer" />
+            {outerChildren}
+            <Suspense fallback={<Text text="InnerFallback" />}>
+              <Text text="Inner" />
+              {innerChildren}
+            </Suspense>
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Outer create insertion',
+        'Text:Inner create insertion',
+        'Text:Outer create layout',
+        'Text:Inner create layout',
+        'Text:Outer create passive',
+        'Text:Inner create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" />
+        </>,
+      );
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(
+          <App innerChildren={<AsyncText text="InnerAsync_1" />} />,
+        );
+      });
+      assertLog([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+        'Text:Inner destroy layout',
+        'Text:InnerFallback create insertion',
+        'Text:InnerFallback create layout',
+        'Text:InnerFallback create passive',
+        // pre-warming
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" />
+        </>,
+      );
+
+      // Suspend the outer Suspense subtree (outer effects and inner fallback effects should be destroyed)
+      // (This check also ensures we don't destroy effects for mounted inner fallback.)
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_1" />}
+            innerChildren={<AsyncText text="InnerAsync_1" />}
+          />,
+        );
+      });
+      assertLog([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:OuterFallback render',
+        'Text:Outer destroy layout',
+        'Text:InnerFallback destroy layout',
+        'Text:OuterFallback create insertion',
+        'Text:OuterFallback create layout',
+        'Text:OuterFallback create passive',
+        // pre-warming
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" hidden={true} />
+          <span prop="Inner" hidden={true} />
+          <span prop="InnerFallback" hidden={true} />
+          <span prop="OuterFallback" />
+        </>,
+      );
+
+      // Resolve both suspended trees.
+      await act(async () => {
+        await resolveText('OuterAsync_1');
+        await resolveText('InnerAsync_1');
+      });
+      assertLog([
+        'Text:Outer render',
+        'AsyncText:OuterAsync_1 render',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_1 render',
+        'Text:OuterFallback destroy insertion',
+        'Text:OuterFallback destroy layout',
+        ...(gate(flags => flags.enableHiddenSubtreeInsertionEffectCleanup)
+          ? ['Text:InnerFallback destroy insertion']
+          : []),
+        'Text:Outer create layout',
+        'AsyncText:OuterAsync_1 create layout',
+        'Text:Inner create layout',
+        'AsyncText:InnerAsync_1 create layout',
+        'Text:OuterFallback destroy passive',
+        'Text:InnerFallback destroy passive',
+        'AsyncText:OuterAsync_1 create passive',
+        'AsyncText:InnerAsync_1 create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Outer" />
+          <span prop="OuterAsync_1" />
+          <span prop="Inner" />
+          <span prop="InnerAsync_1" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache
+    it('should be cleaned up inside of a fallback that suspends', async () => {
+      function App({fallbackChildren = null, outerChildren = null}) {
+        return (
+          <>
+            <Suspense
+              fallback={
+                <>
+                  <Suspense fallback={<Text text="Fallback:Fallback" />}>
+                    <Text text="Fallback:Inside" />
+                    {fallbackChildren}
+                  </Suspense>
+                  <Text text="Fallback:Outside" />
+                </>
+              }>
+              <Text text="Inside" />
+              {outerChildren}
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'Text:Inside render',
+        'Text:Outside render',
+        'Text:Inside create insertion',
+        'Text:Outside create insertion',
+        'Text:Inside create layout',
+        'Text:Outside create layout',
+        'Text:Inside create passive',
+        'Text:Outside create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Suspend the outer shell
+      await act(async () => {
+        ReactNoop.render(
+          <App outerChildren={<AsyncText text="OutsideAsync" />} />,
+        );
+        await waitFor([
+          'Text:Inside render',
+          'Suspend:OutsideAsync',
+          'Text:Fallback:Inside render',
+          'Text:Fallback:Outside render',
+          'Text:Outside render',
+          'Text:Inside destroy layout',
+          'Text:Fallback:Inside create insertion',
+          'Text:Fallback:Outside create insertion',
+          'Text:Fallback:Inside create layout',
+          'Text:Fallback:Outside create layout',
+        ]);
+        await waitForAll([
+          'Text:Fallback:Inside create passive',
+          'Text:Fallback:Outside create passive',
+          // pre-warming
+          'Text:Inside render',
+          'Suspend:OutsideAsync',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback:Inside" />
+            <span prop="Fallback:Outside" />
+            <span prop="Outside" />
+          </>,
+        );
+      });
+
+      // Suspend the fallback and verify that it's effects get cleaned up as well
+      await act(async () => {
+        ReactNoop.render(
+          <App
+            fallbackChildren={<AsyncText text="FallbackAsync" />}
+            outerChildren={<AsyncText text="OutsideAsync" />}
+          />,
+        );
+        await waitFor([
+          'Text:Inside render',
+          'Suspend:OutsideAsync',
+          'Text:Fallback:Inside render',
+          'Suspend:FallbackAsync',
+          'Text:Fallback:Fallback render',
+          'Text:Fallback:Outside render',
+          'Text:Outside render',
+          'Text:Fallback:Inside destroy layout',
+          'Text:Fallback:Fallback create insertion',
+          'Text:Fallback:Fallback create layout',
+        ]);
+        await waitForAll([
+          'Text:Fallback:Fallback create passive',
+          // pre-warming
+          'Text:Inside render',
+          'Suspend:OutsideAsync',
+          'Text:Fallback:Inside render',
+          'Suspend:FallbackAsync',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback:Inside" hidden={true} />
+            <span prop="Fallback:Fallback" />
+            <span prop="Fallback:Outside" />
+            <span prop="Outside" />
+          </>,
+        );
+      });
+
+      // Resolving both resources should cleanup fallback effects and recreate main effects
+      await act(async () => {
+        await resolveText('FallbackAsync');
+        await resolveText('OutsideAsync');
+      });
+      assertLog([
+        'Text:Inside render',
+        'AsyncText:OutsideAsync render',
+        ...(gate(flags => flags.enableHiddenSubtreeInsertionEffectCleanup)
+          ? ['Text:Fallback:Inside destroy insertion']
+          : []),
+        'Text:Fallback:Fallback destroy insertion',
+        'Text:Fallback:Fallback destroy layout',
+        'Text:Fallback:Outside destroy insertion',
+        'Text:Fallback:Outside destroy layout',
+        'Text:Inside create layout',
+        'AsyncText:OutsideAsync create layout',
+        'Text:Fallback:Inside destroy passive',
+        'Text:Fallback:Fallback destroy passive',
+        'Text:Fallback:Outside destroy passive',
+        'AsyncText:OutsideAsync create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="OutsideAsync" />
+          <span prop="Outside" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache
+    it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
+      function App({fallbackChildren = null, outerChildren = null}) {
+        return (
+          <>
+            <Suspense
+              fallback={
+                <>
+                  <Suspense fallback={<Text text="Fallback:Fallback" />}>
+                    <Text text="Fallback:Inside" />
+                    {fallbackChildren}
+                  </Suspense>
+                  <Text text="Fallback:Outside" />
+                </>
+              }>
+              <Text text="Inside" />
+              {outerChildren}
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'Text:Inside render',
+        'Text:Outside render',
+        'Text:Inside create insertion',
+        'Text:Outside create insertion',
+        'Text:Inside create layout',
+        'Text:Outside create layout',
+        'Text:Inside create passive',
+        'Text:Outside create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Suspend both the outer boundary and the fallback
+      await act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OutsideAsync" />}
+            fallbackChildren={<AsyncText text="FallbackAsync" />}
+          />,
+        );
+      });
+      assertLog([
+        'Text:Inside render',
+        'Suspend:OutsideAsync',
+        'Text:Fallback:Inside render',
+        'Suspend:FallbackAsync',
+        'Text:Fallback:Fallback render',
+        'Text:Fallback:Outside render',
+        'Text:Outside render',
+        'Text:Inside destroy layout',
+        'Text:Fallback:Fallback create insertion',
+        'Text:Fallback:Outside create insertion',
+        'Text:Fallback:Fallback create layout',
+        'Text:Fallback:Outside create layout',
+        'Text:Fallback:Fallback create passive',
+        'Text:Fallback:Outside create passive',
+        // pre-warming
+        'Text:Inside render',
+        'Suspend:OutsideAsync',
+        'Text:Fallback:Inside render',
+        'Suspend:FallbackAsync',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Fallback" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Resolving the inside fallback
+      await act(async () => {
+        await resolveText('FallbackAsync');
+      });
+      assertLog([
+        'Text:Fallback:Inside render',
+        'AsyncText:FallbackAsync render',
+        'Text:Fallback:Fallback destroy insertion',
+        'Text:Fallback:Fallback destroy layout',
+        'Text:Fallback:Inside create insertion',
+        'Text:Fallback:Inside create layout',
+        'AsyncText:FallbackAsync create layout',
+        'Text:Fallback:Fallback destroy passive',
+        'Text:Fallback:Inside create passive',
+        'AsyncText:FallbackAsync create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" hidden={true} />
+          <span prop="Fallback:Inside" />
+          <span prop="FallbackAsync" />
+          <span prop="Fallback:Outside" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Resolving the outer fallback only
+      await act(async () => {
+        await resolveText('OutsideAsync');
+      });
+      assertLog([
+        'Text:Inside render',
+        'AsyncText:OutsideAsync render',
+        'Text:Fallback:Inside destroy insertion',
+        'Text:Fallback:Inside destroy layout',
+        'AsyncText:FallbackAsync destroy layout',
+        'Text:Fallback:Outside destroy insertion',
+        'Text:Fallback:Outside destroy layout',
+        'Text:Inside create layout',
+        'AsyncText:OutsideAsync create layout',
+        'Text:Fallback:Inside destroy passive',
+        'AsyncText:FallbackAsync destroy passive',
+        'Text:Fallback:Outside destroy passive',
+        'AsyncText:OutsideAsync create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="OutsideAsync" />
+          <span prop="Outside" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache
+    it('should be cleaned up deeper inside of a subtree that suspends', async () => {
+      function ConditionalSuspense({shouldSuspend}) {
+        if (shouldSuspend) {
+          readText('Suspend');
+        }
+        return <Text text="Inside" />;
+      }
+
+      function App({children = null, shouldSuspend}) {
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <ConditionalSuspense shouldSuspend={shouldSuspend} />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App shouldSuspend={false} />);
+      });
+      assertLog([
+        'Text:Inside render',
+        'Text:Outside render',
+        'Text:Inside create insertion',
+        'Text:Outside create insertion',
+        'Text:Inside create layout',
+        'Text:Outside create layout',
+        'Text:Inside create passive',
+        'Text:Outside create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
+
+      // Suspending a component in the middle of the tree
+      // should still properly cleanup effects deeper in the tree
+      await act(async () => {
+        ReactNoop.render(<App shouldSuspend={true} />);
+        await waitFor([
+          'Suspend:Suspend',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'Text:Inside destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+        ]);
+        await waitForAll([
+          'Text:Fallback create passive',
+          // pre-warming
+          'Suspend:Suspend',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
+      });
+
+      // Resolving should cleanup.
+      await act(async () => {
+        await resolveText('Suspend');
+      });
+      assertLog([
+        'Text:Inside render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'Text:Inside create layout',
+        'Text:Fallback destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Inside" />
+          <span prop="Outside" />
+        </>,
+      );
+    });
+
+    describe('that throw errors', () => {
+      // @gate enableLegacyCache
+      it('are properly handled for componentDidMount', async () => {
+        let componentDidMountShouldThrow = false;
+
+        class ThrowsInDidMount extends React.Component {
+          componentWillUnmount() {
+            Scheduler.log('ThrowsInDidMount componentWillUnmount');
+          }
+          componentDidMount() {
+            Scheduler.log('ThrowsInDidMount componentDidMount');
+            if (componentDidMountShouldThrow) {
+              throw Error('expected');
+            }
+          }
+          render() {
+            Scheduler.log('ThrowsInDidMount render');
+            return <span prop="ThrowsInDidMount" />;
+          }
+        }
+
+        function App({children = null}) {
+          Scheduler.log('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('App create layout');
+            return () => {
+              Scheduler.log('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInDidMount />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInDidMount render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'Text:Inside create insertion',
+          'Text:Outside create insertion',
+          'ThrowsInDidMount componentDidMount',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInDidMount" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Schedule an update that causes React to suspend.
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'ThrowsInDidMount componentWillUnmount',
+          'Text:Inside destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+          // pre-warming
+          'Suspend:Async',
+          'ThrowsInDidMount render',
+          'Text:Inside render',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInDidMount" hidden={true} />
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Resolve the pending suspense and throw
+        componentDidMountShouldThrow = true;
+        await act(async () => {
+          await resolveText('Async');
+        });
+        assertLog([
+          'AsyncText:Async render',
+          'ThrowsInDidMount render',
+          'Text:Inside render',
+          'Text:Fallback destroy insertion',
+          'Text:Fallback destroy layout',
+          'AsyncText:Async create layout',
+
+          // Even though an error was thrown in componentDidMount,
+          // subsequent layout effects should still be destroyed.
+          'ThrowsInDidMount componentDidMount',
+          'Text:Inside create layout',
+
+          // Finish the in-progress commit
+          'Text:Fallback destroy passive',
+          'AsyncText:Async create passive',
+
+          // Destroy insertion, layout, and passive effects in the errored tree.
+          'App destroy layout',
+          'AsyncText:Async destroy layout',
+          'ThrowsInDidMount componentWillUnmount',
+          'Text:Inside destroy insertion',
+          'Text:Inside destroy layout',
+          'Text:Outside destroy insertion',
+          'Text:Outside destroy layout',
+          'AsyncText:Async destroy passive',
+          'Text:Inside destroy passive',
+          'Text:Outside destroy passive',
+
+          // Render fallback
+          'ErrorBoundary render: catch',
+          'Text:Error render',
+          'Text:Error create insertion',
+          'Text:Error create layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
+      });
+
+      // @gate enableLegacyCache
+      it('are properly handled for componentWillUnmount', async () => {
+        class ThrowsInWillUnmount extends React.Component {
+          componentDidMount() {
+            Scheduler.log('ThrowsInWillUnmount componentDidMount');
+          }
+          componentWillUnmount() {
+            Scheduler.log('ThrowsInWillUnmount componentWillUnmount');
+            throw Error('expected');
+          }
+          render() {
+            Scheduler.log('ThrowsInWillUnmount render');
+            return <span prop="ThrowsInWillUnmount" />;
+          }
+        }
+
+        function App({children = null}) {
+          Scheduler.log('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('App create layout');
+            return () => {
+              Scheduler.log('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInWillUnmount />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInWillUnmount render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'Text:Inside create insertion',
+          'Text:Outside create insertion',
+          'ThrowsInWillUnmount componentDidMount',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInWillUnmount" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Schedule an update that suspends and triggers our error code.
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outside render',
+
+          // Even though an error was thrown in componentWillUnmount,
+          // subsequent layout effects should still be destroyed.
+          'ThrowsInWillUnmount componentWillUnmount',
+          'Text:Inside destroy layout',
+
+          // Finish the in-progress commit
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+
+          // Destroy layout and passive effects in the errored tree.
+          'App destroy layout',
+          ...(gate(flags => flags.enableHiddenSubtreeInsertionEffectCleanup)
+            ? ['Text:Inside destroy insertion']
+            : []),
+          'Text:Fallback destroy insertion',
+          'Text:Fallback destroy layout',
+          'Text:Outside destroy insertion',
+          'Text:Outside destroy layout',
+          'Text:Inside destroy passive',
+          'Text:Fallback destroy passive',
+          'Text:Outside destroy passive',
+
+          // Render fallback
+          'ErrorBoundary render: catch',
+          'Text:Error render',
+          'Text:Error create insertion',
+          'Text:Error create layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
+      });
+
+      // @gate enableLegacyCache
+      it('are properly handled for layout effect creation', async () => {
+        let useLayoutEffectShouldThrow = false;
+
+        function ThrowsInLayoutEffect({unused}) {
+          Scheduler.log('ThrowsInLayoutEffect render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('ThrowsInLayoutEffect useLayoutEffect create');
+            if (useLayoutEffectShouldThrow) {
+              throw Error('expected');
+            }
+            return () => {
+              Scheduler.log('ThrowsInLayoutEffect useLayoutEffect destroy');
+            };
+          }, []);
+          return <span prop="ThrowsInLayoutEffect" />;
+        }
+
+        function App({children = null}) {
+          Scheduler.log('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('App create layout');
+            return () => {
+              Scheduler.log('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInLayoutEffect />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInLayoutEffect render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'Text:Inside create insertion',
+          'Text:Outside create insertion',
+          'ThrowsInLayoutEffect useLayoutEffect create',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInLayoutEffect" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Schedule an update that causes React to suspend.
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'ThrowsInLayoutEffect useLayoutEffect destroy',
+          'Text:Inside destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+          // pre-warming
+          'Suspend:Async',
+          'ThrowsInLayoutEffect render',
+          'Text:Inside render',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInLayoutEffect" hidden={true} />
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Resolve the pending suspense and throw
+        useLayoutEffectShouldThrow = true;
+        await act(async () => {
+          await resolveText('Async');
+        });
+        assertLog([
+          'AsyncText:Async render',
+          'ThrowsInLayoutEffect render',
+          'Text:Inside render',
+
+          'Text:Fallback destroy insertion',
+          'Text:Fallback destroy layout',
+
+          // Even though an error was thrown in useLayoutEffect,
+          // subsequent layout effects should still be created.
+          'AsyncText:Async create layout',
+          'ThrowsInLayoutEffect useLayoutEffect create',
+          'Text:Inside create layout',
+
+          // Finish the in-progress commit
+          'Text:Fallback destroy passive',
+          'AsyncText:Async create passive',
+
+          // Destroy layout and passive effects in the errored tree.
+          'App destroy layout',
+          'AsyncText:Async destroy layout',
+          'Text:Inside destroy insertion',
+          'Text:Inside destroy layout',
+          'Text:Outside destroy insertion',
+          'Text:Outside destroy layout',
+          'AsyncText:Async destroy passive',
+          'Text:Inside destroy passive',
+          'Text:Outside destroy passive',
+
+          // Render fallback
+          'ErrorBoundary render: catch',
+          'Text:Error render',
+          'Text:Error create insertion',
+          'Text:Error create layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
+      });
+
+      // @gate enableLegacyCache
+      it('are properly handled for layout effect destruction', async () => {
+        function ThrowsInLayoutEffectDestroy({unused}) {
+          Scheduler.log('ThrowsInLayoutEffectDestroy render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('ThrowsInLayoutEffectDestroy useLayoutEffect create');
+            return () => {
+              Scheduler.log(
+                'ThrowsInLayoutEffectDestroy useLayoutEffect destroy',
+              );
+              throw Error('expected');
+            };
+          }, []);
+          return <span prop="ThrowsInLayoutEffectDestroy" />;
+        }
+
+        function App({children = null}) {
+          Scheduler.log('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('App create layout');
+            return () => {
+              Scheduler.log('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInLayoutEffectDestroy />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInLayoutEffectDestroy render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'Text:Inside create insertion',
+          'Text:Outside create insertion',
+          'ThrowsInLayoutEffectDestroy useLayoutEffect create',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInLayoutEffectDestroy" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Schedule an update that suspends and triggers our error code.
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outside render',
+
+          // Even though an error was thrown in useLayoutEffect destroy,
+          // subsequent layout effects should still be destroyed.
+          'ThrowsInLayoutEffectDestroy useLayoutEffect destroy',
+          'Text:Inside destroy layout',
+
+          // Finish the in-progress commit
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+
+          // Destroy layout and passive effects in the errored tree.
+          'App destroy layout',
+          ...(gate(flags => flags.enableHiddenSubtreeInsertionEffectCleanup)
+            ? ['Text:Inside destroy insertion']
+            : []),
+          'Text:Fallback destroy insertion',
+          'Text:Fallback destroy layout',
+          'Text:Outside destroy insertion',
+          'Text:Outside destroy layout',
+          'Text:Inside destroy passive',
+          'Text:Fallback destroy passive',
+          'Text:Outside destroy passive',
+
+          // Render fallback
+          'ErrorBoundary render: catch',
+          'Text:Error render',
+          'Text:Error create insertion',
+          'Text:Error create layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
+      });
+    });
+
+    // @gate enableLegacyCache
+    it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentWillUnmount`);
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.log(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        return (
+          <Suspense fallback={<ClassText text="Fallback" />}>
+            <Text text="Function" />
+            {children}
+            <ClassText text="Class" />
+          </Suspense>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'Text:Function render',
+        'ClassText:Class render',
+        'Text:Function create insertion',
+        'Text:Function create layout',
+        'ClassText:Class componentDidMount',
+        'Text:Function create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Class" />
+        </>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      await act(async () => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async_1" />
+            <AsyncText text="Async_2" />
+          </App>,
+        );
+        await waitFor([
+          'Text:Function render',
+          'Suspend:Async_1',
+          'ClassText:Fallback render',
+          'Text:Function destroy layout',
+          'ClassText:Class componentWillUnmount',
+          'ClassText:Fallback componentDidMount',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Function" hidden={true} />
+            <span prop="Class" hidden={true} />
+            <span prop="Fallback" />
+          </>,
+        );
+      });
+
+      // pre-warming
+      assertLog([
+        'Text:Function render',
+        'Suspend:Async_1',
+        'Suspend:Async_2',
+        'ClassText:Class render',
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async_1');
+      });
+      assertLog([
+        'Text:Function render',
+        'AsyncText:Async_1 render',
+        'Suspend:Async_2',
+        // pre-warming
+        'Text:Function render',
+        'AsyncText:Async_1 render',
+        'Suspend:Async_2',
+        'ClassText:Class render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" hidden={true} />
+          <span prop="Class" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async_2');
+      });
+      assertLog([
+        'Text:Function render',
+        'AsyncText:Async_1 render',
+        'AsyncText:Async_2 render',
+        'ClassText:Class render',
+        'ClassText:Fallback componentWillUnmount',
+        'Text:Function create layout',
+        'AsyncText:Async_1 create layout',
+        'AsyncText:Async_2 create layout',
+        'ClassText:Class componentDidMount',
+        'AsyncText:Async_1 create passive',
+        'AsyncText:Async_2 create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Async_1" />
+          <span prop="Async_2" />
+          <span prop="Class" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'Text:Function destroy insertion',
+        'Text:Function destroy layout',
+        'AsyncText:Async_1 destroy layout',
+        'AsyncText:Async_2 destroy layout',
+        'ClassText:Class componentWillUnmount',
+        'Text:Function destroy passive',
+        'AsyncText:Async_1 destroy passive',
+        'AsyncText:Async_2 destroy passive',
+      ]);
+    });
+
+    // @gate enableLegacyCache
+    it('should be only destroy layout effects once if a component suspends multiple times', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.log(`ClassText:${text} componentWillUnmount`);
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.log(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      let textToRead = null;
+
+      function Suspender() {
+        Scheduler.log(`Suspender "${textToRead}" render`);
+        if (textToRead !== null) {
+          readText(textToRead);
+        }
+        return <span prop="Suspender" />;
+      }
+
+      function App({children = null}) {
+        return (
+          <Suspense fallback={<ClassText text="Fallback" />}>
+            <Text text="Function" />
+            <Suspender />
+            <ClassText text="Class" />
+          </Suspense>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'Text:Function render',
+        'Suspender "null" render',
+        'ClassText:Class render',
+        'Text:Function create insertion',
+        'Text:Function create layout',
+        'ClassText:Class componentDidMount',
+        'Text:Function create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Suspender" />
+          <span prop="Class" />
+        </>,
+      );
+
+      // Schedule an update that causes React to suspend.
+      textToRead = 'A';
+      await act(async () => {
+        ReactNoop.render(<App />);
+        await waitFor([
+          'Text:Function render',
+          'Suspender "A" render',
+          'Suspend:A',
+          'ClassText:Fallback render',
+          'Text:Function destroy layout',
+          'ClassText:Class componentWillUnmount',
+          'ClassText:Fallback componentDidMount',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="Function" hidden={true} />
+            <span prop="Suspender" hidden={true} />
+            <span prop="Class" hidden={true} />
+            <span prop="Fallback" />
+          </>,
+        );
+      });
+
+      // pre-warming
+      assertLog([
+        'Text:Function render',
+        'Suspender "A" render',
+        'Suspend:A',
+        'ClassText:Class render',
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      textToRead = 'B';
+      await act(async () => {
+        await resolveText('A');
+      });
+      assertLog([
+        'Text:Function render',
+        'Suspender "B" render',
+        'Suspend:B',
+        // pre-warming
+        'Text:Function render',
+        'Suspender "B" render',
+        'Suspend:B',
+        'ClassText:Class render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" hidden={true} />
+          <span prop="Suspender" hidden={true} />
+          <span prop="Class" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('B');
+      });
+      assertLog([
+        'Text:Function render',
+        'Suspender "B" render',
+        'ClassText:Class render',
+        'ClassText:Fallback componentWillUnmount',
+        'Text:Function create layout',
+        'ClassText:Class componentDidMount',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Function" />
+          <span prop="Suspender" />
+          <span prop="Class" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'Text:Function destroy insertion',
+        'Text:Function destroy layout',
+        'ClassText:Class componentWillUnmount',
+        'Text:Function destroy passive',
+      ]);
+    });
+  });
+
+  describe('refs within a tree that re-suspends in an update', () => {
+    function RefCheckerOuter({Component}) {
+      const refObject = React.useRef(null);
+
+      const manualRef = React.useMemo(() => ({current: null}), []);
+      const refCallback = React.useCallback(value => {
+        Scheduler.log(`RefCheckerOuter refCallback value? ${value != null}`);
+        manualRef.current = value;
+      }, []);
+
+      Scheduler.log(`RefCheckerOuter render`);
+
+      React.useLayoutEffect(() => {
+        Scheduler.log(
+          `RefCheckerOuter create layout refObject? ${
+            refObject.current != null
+          } refCallback? ${manualRef.current != null}`,
+        );
+        return () => {
+          Scheduler.log(
+            `RefCheckerOuter destroy layout refObject? ${
+              refObject.current != null
+            } refCallback? ${manualRef.current != null}`,
+          );
+        };
+      }, []);
+
+      return (
+        <>
+          <Component ref={refObject} prop="refObject">
+            <RefCheckerInner forwardedRef={refObject} text="refObject" />
+          </Component>
+          <Component ref={refCallback} prop="refCallback">
+            <RefCheckerInner forwardedRef={manualRef} text="refCallback" />
+          </Component>
+        </>
+      );
+    }
+
+    function RefCheckerInner({forwardedRef, text}) {
+      Scheduler.log(`RefCheckerInner:${text} render`);
+      React.useLayoutEffect(() => {
+        Scheduler.log(
+          `RefCheckerInner:${text} create layout ref? ${
+            forwardedRef.current != null
+          }`,
+        );
+        return () => {
+          Scheduler.log(
+            `RefCheckerInner:${text} destroy layout ref? ${
+              forwardedRef.current != null
+            }`,
+          );
+        };
+      }, []);
+      return null;
+    }
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('should not be cleared within legacy roots', async () => {
+      class ClassComponent extends React.Component {
+        render() {
+          Scheduler.log(`ClassComponent:${this.props.prop} render`);
+          return this.props.children;
+        }
+      }
+
+      function App({children}) {
+        Scheduler.log(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component={ClassComponent} />
+          </Suspense>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(<App />);
+      });
+      assertLog([
+        'App render',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(
+          <App children={<AsyncText text="Async" />} />,
+        );
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'App render',
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        'Text:Fallback render',
+        'Text:Fallback create insertion',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
+
+      await act(() => {
+        ReactNoop.renderLegacySyncRoot(null);
+      });
+      assertLog([
+        'AsyncText:Async destroy layout',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'AsyncText:Async destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    // @gate enableLegacyCache
+    it('should be cleared and reset for host components', async () => {
+      function App({children}) {
+        Scheduler.log(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component="span" />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'RefCheckerOuter render',
+        'RefCheckerInner:refObject render',
+        'RefCheckerInner:refCallback render',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="refObject" />
+          <span prop="refCallback" />
+        </>,
+      );
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(<App children={<AsyncText text="Async" />} />);
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'App render',
+        'Suspend:Async',
+        'Text:Fallback render',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'Text:Fallback create insertion',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+        // pre-warming
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'RefCheckerInner:refObject render',
+        'RefCheckerInner:refCallback render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="refObject" hidden={true} />
+          <span prop="refCallback" hidden={true} />
+          <span prop="Fallback" />
+        </>,
+      );
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'RefCheckerOuter render',
+        'RefCheckerInner:refObject render',
+        'RefCheckerInner:refCallback render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Async" />
+          <span prop="refObject" />
+          <span prop="refCallback" />
+        </>,
+      );
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'AsyncText:Async destroy layout',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'AsyncText:Async destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    // @gate enableLegacyCache
+    it('should be cleared and reset for class components', async () => {
+      class ClassComponent extends React.Component {
+        render() {
+          Scheduler.log(`ClassComponent:${this.props.prop} render`);
+          return this.props.children;
+        }
+      }
+
+      function App({children}) {
+        Scheduler.log(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component={ClassComponent} />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(<App children={<AsyncText text="Async" />} />);
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'App render',
+        'Suspend:Async',
+        'Text:Fallback render',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'Text:Fallback create insertion',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+        // pre-warming
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'AsyncText:Async destroy layout',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'AsyncText:Async destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    // @gate enableLegacyCache
+    it('should be cleared and reset for function components with useImperativeHandle', async () => {
+      const FunctionComponent = React.forwardRef((props, ref) => {
+        Scheduler.log('FunctionComponent render');
+        React.useImperativeHandle(
+          ref,
+          () => ({
+            // Noop
+          }),
+          [],
+        );
+        return props.children;
+      });
+      FunctionComponent.displayName = 'FunctionComponent';
+
+      function App({children}) {
+        Scheduler.log(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component={FunctionComponent} />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'RefCheckerOuter render',
+        'FunctionComponent render',
+        'RefCheckerInner:refObject render',
+        'FunctionComponent render',
+        'RefCheckerInner:refCallback render',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(<App children={<AsyncText text="Async" />} />);
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'App render',
+        'Suspend:Async',
+        'Text:Fallback render',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'Text:Fallback create insertion',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+        // pre-warming
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'FunctionComponent render',
+        'RefCheckerInner:refObject render',
+        'FunctionComponent render',
+        'RefCheckerInner:refCallback render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'RefCheckerOuter render',
+        'FunctionComponent render',
+        'RefCheckerInner:refObject render',
+        'FunctionComponent render',
+        'RefCheckerInner:refCallback render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'RefCheckerInner:refObject create layout ref? false',
+        'RefCheckerInner:refCallback create layout ref? false',
+        'RefCheckerOuter refCallback value? true',
+        'RefCheckerOuter create layout refObject? true refCallback? true',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'AsyncText:Async destroy layout',
+        'RefCheckerOuter destroy layout refObject? true refCallback? true',
+        'RefCheckerInner:refObject destroy layout ref? false',
+        'RefCheckerOuter refCallback value? false',
+        'RefCheckerInner:refCallback destroy layout ref? false',
+        'AsyncText:Async destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    // @gate enableLegacyCache
+    it('should not reset for user-managed values', async () => {
+      function RefChecker({forwardedRef}) {
+        Scheduler.log(`RefChecker render`);
+        React.useLayoutEffect(() => {
+          Scheduler.log(
+            `RefChecker create layout ref? ${forwardedRef.current === 'test'}`,
+          );
+          return () => {
+            Scheduler.log(
+              `RefChecker destroy layout ref? ${
+                forwardedRef.current === 'test'
+              }`,
+            );
+          };
+        }, []);
+        return null;
+      }
+
+      function App({children = null}) {
+        const ref = React.useRef('test');
+        Scheduler.log(`App render`);
+        React.useLayoutEffect(() => {
+          Scheduler.log(`App create layout ref? ${ref.current === 'test'}`);
+          return () => {
+            Scheduler.log(`App destroy layout ref? ${ref.current === 'test'}`);
+          };
+        }, []);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefChecker forwardedRef={ref} />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await act(() => {
+        ReactNoop.render(<App />);
+      });
+      assertLog([
+        'App render',
+        'RefChecker render',
+        'RefChecker create layout ref? true',
+        'App create layout ref? true',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      await act(() => {
+        ReactNoop.render(<App children={<AsyncText text="Async" />} />);
+      });
+      await advanceTimers(1000);
+      assertLog([
+        'App render',
+        'Suspend:Async',
+        'Text:Fallback render',
+        'RefChecker destroy layout ref? true',
+        'Text:Fallback create insertion',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+        // pre-warming
+        'Suspend:Async',
+        'RefChecker render',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Fallback" />);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await act(async () => {
+        await resolveText('Async');
+      });
+      assertLog([
+        'AsyncText:Async render',
+        'RefChecker render',
+        'Text:Fallback destroy insertion',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'RefChecker create layout ref? true',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
+
+      await act(() => {
+        ReactNoop.render(null);
+      });
+      assertLog([
+        'App destroy layout ref? true',
+        'AsyncText:Async destroy layout',
+        'RefChecker destroy layout ref? true',
+        'AsyncText:Async destroy passive',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    });
+
+    describe('that throw errors', () => {
+      // @gate enableLegacyCache
+      it('are properly handled in ref callbacks', async () => {
+        let useRefCallbackShouldThrow = false;
+
+        function ThrowsInRefCallback({unused}) {
+          Scheduler.log('ThrowsInRefCallback render');
+          const refCallback = React.useCallback(value => {
+            Scheduler.log('ThrowsInRefCallback refCallback ref? ' + !!value);
+            if (useRefCallbackShouldThrow) {
+              throw Error('expected');
+            }
+          }, []);
+          return <span ref={refCallback} prop="ThrowsInRefCallback" />;
+        }
+
+        function App({children = null}) {
+          Scheduler.log('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.log('App create layout');
+            return () => {
+              Scheduler.log('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInRefCallback />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInRefCallback render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'Text:Inside create insertion',
+          'Text:Outside create insertion',
+          'ThrowsInRefCallback refCallback ref? true',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInRefCallback" />
+            <span prop="Inside" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Schedule an update that causes React to suspend.
+        await act(() => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        assertLog([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'ThrowsInRefCallback refCallback ref? false',
+          'Text:Inside destroy layout',
+          'Text:Fallback create insertion',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+          // pre-warming
+          'Suspend:Async',
+          'ThrowsInRefCallback render',
+          'Text:Inside render',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="ThrowsInRefCallback" hidden={true} />
+            <span prop="Inside" hidden={true} />
+            <span prop="Fallback" />
+            <span prop="Outside" />
+          </>,
+        );
+
+        // Resolve the pending suspense and throw
+        useRefCallbackShouldThrow = true;
+        await act(async () => {
+          await resolveText('Async');
+        });
+        assertLog([
+          'AsyncText:Async render',
+          'ThrowsInRefCallback render',
+          'Text:Inside render',
+
+          // Even though an error was thrown in refCallback,
+          // subsequent layout effects should still be created.
+          'Text:Fallback destroy insertion',
+          'Text:Fallback destroy layout',
+          'AsyncText:Async create layout',
+          'ThrowsInRefCallback refCallback ref? true',
+          'Text:Inside create layout',
+
+          // Finish the in-progress commit
+          'Text:Fallback destroy passive',
+          'AsyncText:Async create passive',
+
+          // Destroy insertion, layout, and passive effects in the errored tree.
+          'App destroy layout',
+          'AsyncText:Async destroy layout',
+          'ThrowsInRefCallback refCallback ref? false',
+          'Text:Inside destroy insertion',
+          'Text:Inside destroy layout',
+          'Text:Outside destroy insertion',
+          'Text:Outside destroy layout',
+          'AsyncText:Async destroy passive',
+          'Text:Inside destroy passive',
+          'Text:Outside destroy passive',
+
+          // Render fallback
+          'ErrorBoundary render: catch',
+          'Text:Error render',
+          'Text:Error create insertion',
+          'Text:Error create layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Error" />);
+      });
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
new file mode 100644
index 00000000000..e351052a4a2
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -0,0 +1,578 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let act;
+let container;
+let waitForAll;
+let assertLog;
+let fakeModuleCache;
+
+describe('ReactSuspenseEffectsSemanticsDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    fakeModuleCache = new Map();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function fakeImport(Component) {
+    const record = fakeModuleCache.get(Component);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'pending',
+        value: {default: Component},
+        pings: [],
+        then(ping) {
+          switch (newRecord.status) {
+            case 'pending': {
+              newRecord.pings.push(ping);
+              return;
+            }
+            case 'resolved': {
+              ping(newRecord.value);
+              return;
+            }
+            case 'rejected': {
+              throw newRecord.value;
+            }
+          }
+        },
+      };
+      fakeModuleCache.set(Component, newRecord);
+      return newRecord;
+    }
+    return record;
+  }
+
+  function resolveFakeImport(moduleName) {
+    const record = fakeModuleCache.get(moduleName);
+    if (record === undefined) {
+      throw new Error('Module not found');
+    }
+    if (record.status !== 'pending') {
+      throw new Error('Module already resolved');
+    }
+    record.status = 'resolved';
+    record.pings.forEach(ping => ping(record.value));
+  }
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return props.text;
+  }
+
+  it('should not cause a cycle when combined with a render phase update', async () => {
+    let scheduleSuspendingUpdate;
+
+    function App() {
+      const [value, setValue] = React.useState(true);
+
+      scheduleSuspendingUpdate = () => setValue(!value);
+
+      return (
+        <>
+          <React.Suspense fallback="Loading...">
+            <ComponentThatCausesBug value={value} />
+            <ComponentThatSuspendsOnUpdate shouldSuspend={!value} />
+          </React.Suspense>
+        </>
+      );
+    }
+
+    function ComponentThatCausesBug({value}) {
+      const [mirroredValue, setMirroredValue] = React.useState(value);
+      if (mirroredValue !== value) {
+        setMirroredValue(value);
+      }
+
+      // eslint-disable-next-line no-unused-vars
+      const [_, setRef] = React.useState(null);
+
+      return <div ref={setRef} />;
+    }
+
+    const neverResolves = {then() {}};
+
+    function ComponentThatSuspendsOnUpdate({shouldSuspend}) {
+      if (shouldSuspend) {
+        // Fake Suspend
+        throw neverResolves;
+      }
+      return null;
+    }
+
+    await act(() => {
+      const root = ReactDOMClient.createRoot(container);
+      root.render(<App />);
+    });
+
+    await act(() => {
+      scheduleSuspendingUpdate();
+    });
+  });
+
+  it('does not destroy ref cleanup twice when hidden child is removed', async () => {
+    function ChildA({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.log('Ref mount: ' + label);
+            } else {
+              Scheduler.log('Ref unmount: ' + label);
+            }
+          }}>
+          <Text text={label} />
+        </span>
+      );
+    }
+
+    function ChildB({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.log('Ref mount: ' + label);
+            } else {
+              Scheduler.log('Ref unmount: ' + label);
+            }
+          }}>
+          <Text text={label} />
+        </span>
+      );
+    }
+
+    const LazyChildA = React.lazy(() => fakeImport(ChildA));
+    const LazyChildB = React.lazy(() => fakeImport(ChildB));
+
+    function Parent({swap}) {
+      return (
+        <React.Suspense fallback={<Text text="Loading..." />}>
+          {swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
+        </React.Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    assertLog(['Loading...']);
+
+    await act(() => resolveFakeImport(ChildA));
+    assertLog(['A', 'Ref mount: A']);
+    expect(container.innerHTML).toBe('<span>A</span>');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    assertLog(['Loading...', 'Ref unmount: A']);
+    expect(container.innerHTML).toBe(
+      '<span style="display: none;">A</span>Loading...',
+    );
+
+    await act(() => resolveFakeImport(ChildB));
+    assertLog(['B', 'Ref mount: B']);
+    expect(container.innerHTML).toBe('<span>B</span>');
+  });
+
+  it('does not call componentWillUnmount twice when hidden child is removed', async () => {
+    class ChildA extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.log('Will unmount: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    class ChildB extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.log('Will unmount: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    const LazyChildA = React.lazy(() => fakeImport(ChildA));
+    const LazyChildB = React.lazy(() => fakeImport(ChildB));
+
+    function Parent({swap}) {
+      return (
+        <React.Suspense fallback={<Text text="Loading..." />}>
+          {swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
+        </React.Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    assertLog(['Loading...']);
+
+    await act(() => resolveFakeImport(ChildA));
+    assertLog(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    assertLog(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    await act(() => resolveFakeImport(ChildB));
+    assertLog(['B', 'Did mount: B']);
+    expect(container.innerHTML).toBe('B');
+  });
+
+  it('does not destroy layout effects twice when parent suspense is removed', async () => {
+    function ChildA({label}) {
+      React.useLayoutEffect(() => {
+        Scheduler.log('Did mount: ' + label);
+        return () => {
+          Scheduler.log('Will unmount: ' + label);
+        };
+      }, []);
+      return <Text text={label} />;
+    }
+    function ChildB({label}) {
+      React.useLayoutEffect(() => {
+        Scheduler.log('Did mount: ' + label);
+        return () => {
+          Scheduler.log('Will unmount: ' + label);
+        };
+      }, []);
+      return <Text text={label} />;
+    }
+    const LazyChildA = React.lazy(() => fakeImport(ChildA));
+    const LazyChildB = React.lazy(() => fakeImport(ChildB));
+
+    function Parent({swap}) {
+      return (
+        <React.Suspense fallback={<Text text="Loading..." />}>
+          {swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
+        </React.Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    assertLog(['Loading...']);
+
+    await act(() => resolveFakeImport(ChildA));
+    assertLog(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    assertLog(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    // Destroy the whole tree, including the hidden A
+    ReactDOM.flushSync(() => {
+      root.render(<h1>Hello</h1>);
+    });
+    await waitForAll([]);
+    expect(container.innerHTML).toBe('<h1>Hello</h1>');
+  });
+
+  it('does not destroy ref cleanup twice when parent suspense is removed', async () => {
+    function ChildA({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.log('Ref mount: ' + label);
+            } else {
+              Scheduler.log('Ref unmount: ' + label);
+            }
+          }}>
+          <Text text={label} />
+        </span>
+      );
+    }
+
+    function ChildB({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.log('Ref mount: ' + label);
+            } else {
+              Scheduler.log('Ref unmount: ' + label);
+            }
+          }}>
+          <Text text={label} />
+        </span>
+      );
+    }
+
+    const LazyChildA = React.lazy(() => fakeImport(ChildA));
+    const LazyChildB = React.lazy(() => fakeImport(ChildB));
+
+    function Parent({swap}) {
+      return (
+        <React.Suspense fallback={<Text text="Loading..." />}>
+          {swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
+        </React.Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    assertLog(['Loading...']);
+
+    await act(() => resolveFakeImport(ChildA));
+    assertLog(['A', 'Ref mount: A']);
+    expect(container.innerHTML).toBe('<span>A</span>');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    assertLog(['Loading...', 'Ref unmount: A']);
+    expect(container.innerHTML).toBe(
+      '<span style="display: none;">A</span>Loading...',
+    );
+
+    // Destroy the whole tree, including the hidden A
+    ReactDOM.flushSync(() => {
+      root.render(<h1>Hello</h1>);
+    });
+    await waitForAll([]);
+    expect(container.innerHTML).toBe('<h1>Hello</h1>');
+  });
+
+  it('does not call componentWillUnmount twice when parent suspense is removed', async () => {
+    class ChildA extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.log('Will unmount: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    class ChildB extends React.Component {
+      componentDidMount() {
+        Scheduler.log('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.log('Will unmount: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    const LazyChildA = React.lazy(() => fakeImport(ChildA));
+    const LazyChildB = React.lazy(() => fakeImport(ChildB));
+
+    function Parent({swap}) {
+      return (
+        <React.Suspense fallback={<Text text="Loading..." />}>
+          {swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
+        </React.Suspense>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    assertLog(['Loading...']);
+
+    await act(() => resolveFakeImport(ChildA));
+    assertLog(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    assertLog(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    // Destroy the whole tree, including the hidden A
+    ReactDOM.flushSync(() => {
+      root.render(<h1>Hello</h1>);
+    });
+    await waitForAll([]);
+    expect(container.innerHTML).toBe('<h1>Hello</h1>');
+  });
+
+  // @gate !disableLegacyMode
+  it('regression: unmount hidden tree, in legacy mode', async () => {
+    // In legacy mode, when a tree suspends and switches to a fallback, the
+    // effects are not unmounted. So we have to unmount them during a deletion.
+
+    function Child() {
+      React.useLayoutEffect(() => {
+        Scheduler.log('Mount');
+        return () => {
+          Scheduler.log('Unmount');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    function Sibling() {
+      return <Text text="Sibling" />;
+    }
+    const LazySibling = React.lazy(() => fakeImport(Sibling));
+
+    function App({showMore}) {
+      return (
+        <React.Suspense fallback={<Text text="Loading..." />}>
+          <Child />
+          {showMore ? <LazySibling /> : null}
+        </React.Suspense>
+      );
+    }
+
+    // Initial render
+    ReactDOM.render(<App showMore={false} />, container);
+    assertLog(['Child', 'Mount']);
+
+    // Update that suspends, causing the existing tree to switches it to
+    // a fallback.
+    ReactDOM.render(<App showMore={true} />, container);
+    assertLog([
+      'Child',
+      'Loading...',
+
+      // In a concurrent root, the effect would unmount here. But this is legacy
+      // mode, so it doesn't.
+      // Unmount
+    ]);
+
+    // Delete the tree and unmount the effect
+    ReactDOM.render(null, container);
+    assertLog(['Unmount']);
+  });
+
+  it('does not call cleanup effects twice after a bailout', async () => {
+    const never = new Promise(resolve => {});
+    function Never() {
+      throw never;
+    }
+
+    let setSuspended;
+    let setLetter;
+
+    function App() {
+      const [suspended, _setSuspended] = React.useState(false);
+      setSuspended = _setSuspended;
+      const [letter, _setLetter] = React.useState('A');
+      setLetter = _setLetter;
+
+      return (
+        <React.Suspense fallback="Loading...">
+          <Child letter={letter} />
+          {suspended && <Never />}
+        </React.Suspense>
+      );
+    }
+
+    let nextId = 0;
+    const freed = new Set();
+    let setStep;
+
+    function Child({letter}) {
+      const [, _setStep] = React.useState(0);
+      setStep = _setStep;
+
+      React.useLayoutEffect(() => {
+        const localId = nextId++;
+        Scheduler.log('Did mount: ' + letter + localId);
+        return () => {
+          if (freed.has(localId)) {
+            throw Error('Double free: ' + letter + localId);
+          }
+          freed.add(localId);
+          Scheduler.log('Will unmount: ' + letter + localId);
+        };
+      }, [letter]);
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Did mount: A0']);
+
+    await act(() => {
+      setStep(1);
+      setSuspended(false);
+    });
+    assertLog([]);
+
+    await act(() => {
+      setStep(1);
+    });
+    assertLog([]);
+
+    await act(() => {
+      setSuspended(true);
+    });
+    assertLog(['Will unmount: A0']);
+
+    await act(() => {
+      setSuspended(false);
+      setLetter('B');
+    });
+    assertLog(['Did mount: B1']);
+
+    await act(() => {
+      root.unmount();
+    });
+    assertLog(['Will unmount: B1']);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
new file mode 100644
index 00000000000..836ed7aac82
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+let React;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let getCacheForType;
+let caches;
+let seededCache;
+let waitForAll;
+
+describe('ReactSuspenseFallback', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+    getCacheForType = React.unstable_getCacheForType;
+    caches = [];
+    seededCache = null;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return <span prop={text} />;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.log(fullText);
+    return <span prop={fullText} />;
+  }
+
+  // @gate enableLegacyCache
+  it('suspends and shows fallback', async () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <AsyncText text="A" />
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+  });
+
+  // @gate enableLegacyCache
+  it('suspends and shows null fallback', async () => {
+    ReactNoop.render(
+      <Suspense fallback={null}>
+        <AsyncText text="A" />
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      // null
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  // @gate enableLegacyCache
+  it('suspends and shows undefined fallback', async () => {
+    ReactNoop.render(
+      <Suspense>
+        <AsyncText text="A" />
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      // null
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  // @gate enableLegacyCache
+  it('suspends and shows inner fallback', async () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Should not show..." />}>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+        </Suspense>
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+  });
+
+  // @gate enableLegacyCache
+  it('suspends and shows inner undefined fallback', async () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Should not show..." />}>
+        <Suspense>
+          <AsyncText text="A" />
+        </Suspense>
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      // null
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  // @gate enableLegacyCache
+  it('suspends and shows inner null fallback', async () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Should not show..." />}>
+        <Suspense fallback={null}>
+          <AsyncText text="A" />
+        </Suspense>
+      </Suspense>,
+    );
+
+    await waitForAll([
+      'Suspend! [A]',
+      // null
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
new file mode 100644
index 00000000000..aa206a682d8
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -0,0 +1,447 @@
+let React;
+let Suspense;
+let ReactNoop;
+let Scheduler;
+let act;
+let Random;
+let ReactFeatureFlags;
+
+const SEED = process.env.FUZZ_TEST_SEED || 'default';
+const prettyFormatPkg = require('pretty-format');
+
+function prettyFormat(thing) {
+  return prettyFormatPkg.format(thing, {
+    plugins: [
+      prettyFormatPkg.plugins.ReactElement,
+      prettyFormatPkg.plugins.ReactTestComponent,
+    ],
+  });
+}
+
+describe('ReactSuspenseFuzz', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Suspense = React.Suspense;
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Random = require('random-seed');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  });
+
+  jest.setTimeout(20000);
+
+  function createFuzzer() {
+    const {useState, useContext, useLayoutEffect} = React;
+
+    const ShouldSuspendContext = React.createContext(true);
+
+    let pendingTasks = new Set();
+    let cache = new Map();
+
+    function resetCache() {
+      pendingTasks = new Set();
+      cache = new Map();
+    }
+
+    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 children after ${remountAfter}ms`,
+            };
+            const timeoutID = setTimeout(() => {
+              pendingTasks.delete(task);
+              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>;
+    }
+
+    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);
+              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}]`;
+
+      const shouldSuspend = useContext(ShouldSuspendContext);
+
+      let resolvedText;
+      if (shouldSuspend && delay > 0) {
+        resolvedText = cache.get(fullText);
+        if (resolvedText === undefined) {
+          const thenable = {
+            then(resolve) {
+              const task = {label: `Promise resolved [${fullText}]`};
+              pendingTasks.add(task);
+              setTimeout(() => {
+                cache.set(fullText, fullText);
+                pendingTasks.delete(task);
+                resolve();
+              }, delay);
+            },
+          };
+          cache.set(fullText, thenable);
+          throw thenable;
+        } else if (typeof resolvedText.then === 'function') {
+          throw resolvedText;
+        }
+      } else {
+        resolvedText = fullText;
+      }
+
+      return resolvedText;
+    }
+
+    async function testResolvedOutput(unwrappedChildren) {
+      const children = (
+        <Suspense fallback="Loading...">{unwrappedChildren}</Suspense>
+      );
+
+      // Render the app multiple times: once without suspending (as if all the
+      // data was already preloaded), and then again with suspensey data.
+      resetCache();
+      const expectedRoot = ReactNoop.createRoot();
+      await act(() => {
+        expectedRoot.render(
+          <ShouldSuspendContext.Provider value={false}>
+            {children}
+          </ShouldSuspendContext.Provider>,
+        );
+      });
+
+      const expectedOutput = expectedRoot.getChildrenAsJSX();
+
+      resetCache();
+
+      const concurrentRootThatSuspends = ReactNoop.createRoot();
+      await act(() => {
+        concurrentRootThatSuspends.render(children);
+      });
+
+      resetCache();
+
+      // Do it again in legacy mode.
+      if (!ReactFeatureFlags.disableLegacyMode) {
+        const legacyRootThatSuspends = ReactNoop.createLegacyRoot();
+        await act(() => {
+          legacyRootThatSuspends.render(children);
+        });
+
+        expect(legacyRootThatSuspends.getChildrenAsJSX()).toEqual(
+          expectedOutput,
+        );
+      }
+
+      // Now compare the final output. It should be the same.
+      expect(concurrentRootThatSuspends.getChildrenAsJSX()).toEqual(
+        expectedOutput,
+      );
+
+      // TODO: There are Scheduler logs in this test file but they were only
+      // added for debugging purposes; we don't make any assertions on them.
+      // Should probably just delete.
+      Scheduler.unstable_clearLog();
+    }
+
+    function pickRandomWeighted(rand, options) {
+      let totalWeight = 0;
+      for (let i = 0; i < options.length; i++) {
+        totalWeight += options[i].weight;
+      }
+      let remainingWeight = rand.floatBetween(0, totalWeight);
+      for (let i = 0; i < options.length; i++) {
+        const {value, weight} = options[i];
+        remainingWeight -= weight;
+        if (remainingWeight <= 0) {
+          return value;
+        }
+      }
+    }
+
+    function generateTestCase(rand, numberOfElements) {
+      let remainingElements = numberOfElements;
+
+      function createRandomChild(hasSibling) {
+        const possibleActions = [
+          {value: 'return', weight: 1},
+          {value: 'text', weight: 1},
+        ];
+
+        if (hasSibling) {
+          possibleActions.push({value: 'container', weight: 1});
+          possibleActions.push({value: 'suspense', weight: 1});
+        }
+
+        const action = pickRandomWeighted(rand, possibleActions);
+
+        switch (action) {
+          case 'text': {
+            remainingElements--;
+
+            const numberOfUpdates = pickRandomWeighted(rand, [
+              {value: 0, weight: 8},
+              {value: 1, weight: 4},
+              {value: 2, weight: 1},
+            ]);
+
+            const updates = [];
+            for (let i = 0; i < numberOfUpdates; i++) {
+              updates.push({
+                beginAfter: rand.intBetween(0, 10000),
+                suspendFor: rand.intBetween(0, 10000),
+              });
+            }
+
+            return (
+              <Text
+                text={(remainingElements + 9).toString(36).toUpperCase()}
+                initialDelay={rand.intBetween(0, 10000)}
+                updates={updates}
+              />
+            );
+          }
+          case 'container': {
+            const numberOfUpdates = pickRandomWeighted(rand, [
+              {value: 0, weight: 8},
+              {value: 1, weight: 4},
+              {value: 2, weight: 1},
+            ]);
+
+            const updates = [];
+            for (let i = 0; i < numberOfUpdates; i++) {
+              updates.push({
+                remountAfter: rand.intBetween(0, 10000),
+              });
+            }
+
+            remainingElements--;
+            const children = createRandomChildren(3);
+            return React.createElement(Container, {updates}, ...children);
+          }
+          case 'suspense': {
+            remainingElements--;
+            const children = createRandomChildren(3);
+
+            const fallbackType = pickRandomWeighted(rand, [
+              {value: 'none', weight: 1},
+              {value: 'normal', weight: 1},
+              {value: 'nested suspense', weight: 1},
+            ]);
+
+            let fallback;
+            if (fallbackType === 'normal') {
+              fallback = 'Loading...';
+            } else if (fallbackType === 'nested suspense') {
+              fallback = React.createElement(
+                React.Fragment,
+                null,
+                ...createRandomChildren(3),
+              );
+            }
+
+            return React.createElement(Suspense, {fallback}, ...children);
+          }
+          case 'return':
+          default:
+            return null;
+        }
+      }
+
+      function createRandomChildren(limit) {
+        const children = [];
+        while (remainingElements > 0 && children.length < limit) {
+          children.push(createRandomChild(children.length > 0));
+        }
+        return children;
+      }
+
+      const children = createRandomChildren(Infinity);
+      return React.createElement(React.Fragment, null, ...children);
+    }
+
+    return {Container, Text, testResolvedOutput, generateTestCase};
+  }
+
+  it('basic cases', async () => {
+    // This demonstrates that the testing primitives work
+    const {Container, Text, testResolvedOutput} = createFuzzer();
+    await testResolvedOutput(
+      <Container updates={[{remountAfter: 150}]}>
+        <Text
+          text="Hi"
+          initialDelay={2000}
+          updates={[{beginAfter: 100, suspendFor: 200}]}
+        />
+      </Container>,
+    );
+  });
+
+  it(`generative tests (random seed: ${SEED})`, async () => {
+    const {generateTestCase, testResolvedOutput} = createFuzzer();
+
+    const rand = Random.create(SEED);
+
+    // If this is too large the test will time out. We use a scheduled CI
+    // workflow to run these tests with a random seed.
+    const NUMBER_OF_TEST_CASES = 250;
+    const ELEMENTS_PER_CASE = 12;
+
+    for (let i = 0; i < NUMBER_OF_TEST_CASES; i++) {
+      const randomTestCase = generateTestCase(rand, ELEMENTS_PER_CASE);
+      try {
+        await testResolvedOutput(randomTestCase);
+      } catch (e) {
+        console.log(`
+Failed fuzzy test case:
+
+${prettyFormat(randomTestCase)}
+
+Random seed is ${SEED}
+`);
+
+        throw e;
+      }
+    }
+  });
+
+  describe('hard-coded cases', () => {
+    it('1', async () => {
+      const {Text, testResolvedOutput} = createFuzzer();
+      await testResolvedOutput(
+        <>
+          <Text
+            initialDelay={20}
+            text="A"
+            updates={[{beginAfter: 10, suspendFor: 20}]}
+          />
+          <Suspense fallback="Loading... (B)">
+            <Text
+              initialDelay={10}
+              text="B"
+              updates={[{beginAfter: 30, suspendFor: 50}]}
+            />
+            <Text text="C" />
+          </Suspense>
+        </>,
+      );
+    });
+
+    it('2', async () => {
+      const {Text, Container, testResolvedOutput} = createFuzzer();
+      await testResolvedOutput(
+        <>
+          <Suspense fallback="Loading...">
+            <Text initialDelay={7200} text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Container>
+              <Text initialDelay={1000} text="B" />
+              <Text initialDelay={7200} text="C" />
+              <Text initialDelay={9000} text="D" />
+            </Container>
+          </Suspense>
+        </>,
+      );
+    });
+
+    it('3', async () => {
+      const {Text, Container, testResolvedOutput} = createFuzzer();
+      await testResolvedOutput(
+        <>
+          <Suspense fallback="Loading...">
+            <Text
+              initialDelay={3183}
+              text="A"
+              updates={[
+                {
+                  beginAfter: 2256,
+                  suspendFor: 6696,
+                },
+              ]}
+            />
+            <Text initialDelay={3251} text="B" />
+          </Suspense>
+          <Container>
+            <Text
+              initialDelay={2700}
+              text="C"
+              updates={[
+                {
+                  beginAfter: 3266,
+                  suspendFor: 9139,
+                },
+              ]}
+            />
+            <Text initialDelay={6732} text="D" />
+          </Container>
+        </>,
+      );
+    });
+
+    it('4', async () => {
+      const {Text, testResolvedOutput} = createFuzzer();
+      await testResolvedOutput(
+        <React.Suspense fallback="Loading...">
+          <React.Suspense>
+            <React.Suspense>
+              <Text initialDelay={9683} text="E" updates={[]} />
+            </React.Suspense>
+            <Text
+              initialDelay={4053}
+              text="C"
+              updates={[
+                {
+                  beginAfter: 1566,
+                  suspendFor: 4142,
+                },
+                {
+                  beginAfter: 9572,
+                  suspendFor: 4832,
+                },
+              ]}
+            />
+          </React.Suspense>
+        </React.Suspense>,
+      );
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
new file mode 100644
index 00000000000..c7d4de1421e
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -0,0 +1,3739 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let act;
+let Profiler;
+let Suspense;
+let SuspenseList;
+let waitForAll;
+let assertLog;
+let waitFor;
+let assertConsoleErrorDev;
+
+describe('ReactSuspenseList', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Profiler = React.Profiler;
+    Suspense = React.Suspense;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+    act = InternalTestUtils.act;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span>{props.text}</span>;
+  }
+
+  function createAsyncText(text) {
+    let resolved = false;
+    const Component = function () {
+      if (!resolved) {
+        Scheduler.log('Suspend! [' + text + ']');
+        throw promise;
+      }
+      return <Text text={text} />;
+    };
+    const promise = new Promise(resolve => {
+      Component.resolve = function () {
+        resolved = true;
+        return resolve();
+      };
+    });
+    return Component;
+  }
+
+  // @gate enableSuspenseList
+  it('warns if an unsupported revealOrder option is used', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="something">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      '"something" is not a supported revealOrder on ' +
+        '<SuspenseList />. Did you mean "independent", "together", "forwards" or "backwards"?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('warns if a upper case revealOrder option is used', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="TOGETHER">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      '"TOGETHER" is not a valid value for revealOrder on ' +
+        '<SuspenseList />. Use lowercase "together" instead.' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('warns if a misspelled revealOrder option is used', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forward">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      '"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 **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('warns if a single element is passed to a "forwards" list', async () => {
+    function Foo({children}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          {children}
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    // No warning
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo>{null}</Foo>);
+    // No warning
+    await waitForAll([]);
+
+    ReactNoop.render(<Foo>{false}</Foo>);
+    // No warning
+    await waitForAll([]);
+
+    await act(() => {
+      ReactNoop.render(
+        <Foo>
+          <Suspense fallback="Loading">Child</Suspense>
+        </Foo>,
+      );
+    });
+    assertConsoleErrorDev([
+      '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 **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('warns if a single fragment is passed to a "backwards" list', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="unstable_legacy-backwards" tail="visible">
+          <>{[]}</>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      'A single row was passed to a <SuspenseList revealOrder="unstable_legacy-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 **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('warns if a nested array is passed to a "forwards" list', async () => {
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          {items.map(name => (
+            <Suspense key={name} fallback="Loading">
+              {name}
+            </Suspense>
+          ))}
+          <div>Tail</div>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo items={['A', 'B']} />);
+    });
+    assertConsoleErrorDev([
+      '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 **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('behaves as revealOrder=forwards by default', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll(['Suspend! [A]', 'Loading A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await A.resolve();
+
+    await waitForAll(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await act(() => B.resolve());
+    assertLog(['B', 'Suspend! [C]', 'Loading C']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('shows content independently with revealOrder="independent"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="independent">
+          <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 />);
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      // pre-warming
+      'Suspend! [B]',
+      'Suspend! [C]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(
+      gate('alwaysThrottleRetries')
+        ? ['Suspend! [B]', 'C', 'Suspend! [B]']
+        : ['C'],
+    );
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList && !disableLegacyMode
+  it('shows content independently in legacy mode regardless of option', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    assertLog(['A', 'Suspend! [B]', 'Loading B', 'Suspend! [C]', 'Loading C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => {
+      C.resolve();
+    });
+
+    assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await act(() => {
+      B.resolve();
+    });
+
+    assertLog(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    await waitForAll([
+      '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 act(() => B.resolve());
+    assertLog(['A', 'B', 'Suspend! [C]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" even when nested as siblings', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    await waitForAll([
+      '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 act(() => B.resolve());
+    assertLog(['A', 'B', 'Suspend! [C]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>Loading A</span>
+          <span>Loading B</span>
+        </div>
+        <div>
+          <span>Loading C</span>
+        </div>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>A</span>
+          <span>B</span>
+        </div>
+        <div>
+          <span>C</span>
+        </div>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" in nested SuspenseLists', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    await waitForAll([
+      '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 act(() => C.resolve());
+    assertLog(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" in nested SuspenseLists where the inner is "independent"', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <SuspenseList revealOrder="independent">
+            <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 />);
+
+    await waitForAll([
+      '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 act(() => C.resolve());
+    assertLog(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays all "together" during an update', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+    const 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} />);
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Loading A',
+      'Loading B',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </>,
+    );
+    await act(() => B.resolve());
+    assertLog(['A', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    // Update
+    await C.resolve();
+    ReactNoop.render(<Foo step={1} />);
+    await waitForAll([
+      'C',
+      'Suspend! [D]',
+      'Loading D',
+      'Loading C',
+      'Loading D',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading C</span>
+        <span>Loading D</span>
+      </>,
+    );
+    await act(() => D.resolve());
+    assertLog(['C', 'D']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList && enableSuspenseAvoidThisFallback
+  it('avoided boundaries can be coordinate with SuspenseList', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Loading</span>);
+
+    await act(() => A.resolve());
+    assertLog(['A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    // Let's do an update that should consult the avoided boundaries.
+    ReactNoop.render(<Foo showMore={true} />);
+
+    await waitForAll([
+      '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 act(() => B.resolve());
+    assertLog(['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 act(() => C.resolve());
+    assertLog(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('boundaries without fallbacks can be coordinate with SuspenseList', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo({showMore}) {
+      return (
+        <Suspense fallback={<Text text="Loading" />}>
+          <SuspenseList revealOrder="together">
+            <Suspense>
+              <A />
+            </Suspense>
+            {showMore ? (
+              <>
+                <Suspense>
+                  <B />
+                </Suspense>
+                <Suspense>
+                  <C />
+                </Suspense>
+              </>
+            ) : null}
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll([
+      'Suspend! [A]',
+      // null
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await act(() => A.resolve());
+    assertLog(['A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    // Let's do an update that should consult the avoided boundaries.
+    ReactNoop.render(<Foo showMore={true} />);
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      // null
+      'Suspend! [C]',
+      // null
+      'A',
+      // null
+      // null
+    ]);
+
+    // 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>);
+
+    await act(() => B.resolve());
+    assertLog(['B', 'Suspend! [C]']);
+
+    // Even though we could now show B, we're still waiting on C.
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await act(() => C.resolve());
+    assertLog(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays each items in "forwards" order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <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 />);
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => A.resolve());
+    assertLog(['A', 'Suspend! [B]', 'Suspend! [B]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays each items in "backwards" order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="backwards" tail="visible">
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll([
+      'Suspend! [C]',
+      'Loading C',
+      'Loading B',
+      'Loading A',
+      // pre-warming
+      'Suspend! [C]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog([
+      'C',
+      'Suspend! [B]',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B', 'A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays each items in "backwards" order (legacy)', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="unstable_legacy-backwards" tail="visible">
+          <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 />);
+
+    await waitForAll([
+      'Suspend! [C]',
+      'Loading C',
+      'Loading B',
+      'Loading A',
+      // pre-warming
+      'Suspend! [C]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog([
+      'C',
+      'Suspend! [B]',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>C</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B', 'A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays added row at the top "together" and the bottom in "forwards" order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+    const D = createAsyncText('D');
+    const E = createAsyncText('E');
+    const F = createAsyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          {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],
+        ]}
+      />,
+    );
+
+    await waitForAll(['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],
+        ]}
+      />,
+    );
+
+    await waitForAll([
+      '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 act(() => A.resolve());
+    assertLog(['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 act(() => C.resolve());
+    assertLog([
+      'A',
+      'C',
+      'Suspend! [E]',
+      // pre-warming
+      '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 act(() => E.resolve());
+    assertLog([
+      'E',
+      'Suspend! [F]',
+      // pre-warming
+      '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 act(() => F.resolve());
+    assertLog(['F']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+
+    // We can also delete some items.
+    ReactNoop.render(
+      <Foo
+        items={[
+          ['D', D],
+          ['E', E],
+          ['F', F],
+        ]}
+      />,
+    );
+
+    await waitForAll(['D', 'E', 'F']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('displays added row at the top "together" and the bottom in "backwards" order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const D = createAsyncText('D');
+    const F = createAsyncText('F');
+
+    function createSyncText(text) {
+      return function () {
+        return <Text text={text} />;
+      };
+    }
+
+    const As = createSyncText('A');
+    const Bs = createSyncText('B');
+    const Cs = createSyncText('C');
+    const Ds = createSyncText('D');
+    const Es = createSyncText('E');
+    const Fs = createSyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="unstable_legacy-backwards" tail="visible">
+          {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],
+        ]}
+      />,
+    );
+    await waitForAll(['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],
+        ]}
+      />,
+    );
+
+    await waitForAll([
+      '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',
+      // pre-warming
+      'Suspend! [D]',
+      'Suspend! [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();
+
+    await waitForAll(['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 act(() => D.resolve());
+    assertLog([
+      'D',
+      'F',
+      'Suspend! [B]',
+      // pre-warming
+      '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 act(() => B.resolve());
+    assertLog([
+      'B',
+      'Suspend! [A]',
+      // pre-warming
+      '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 act(() => A.resolve());
+    assertLog(['A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+        <span>E</span>
+        <span>F</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <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.
+    await act(async () => {
+      React.startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+
+      await waitFor(['A']);
+
+      Scheduler.unstable_advanceTime(200);
+      jest.advanceTimersByTime(200);
+
+      await waitFor(['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.
+      await waitFor([
+        '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.
+    assertLog([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading A',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
+
+    await A.resolve();
+
+    await waitForAll(['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();
+
+    await waitForAll(['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 act(() => C.resolve());
+    await assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('behaves as tail=hidden if no tail option is specified', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll(['Suspend! [A]', 'Loading A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await A.resolve();
+
+    await waitForAll(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await act(() => B.resolve());
+    assertLog(['B', 'Suspend! [C]', 'Loading C']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('warns if an unsupported tail option is used', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapse">
+          <Suspense fallback="Loading">A</Suspense>
+          <Suspense fallback="Loading">B</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      '"collapse" is not a supported value for tail on ' +
+        '<SuspenseList />. Did you mean "visible", "collapsed" or "hidden"?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  it('warns if a tail option is used with "together"', async () => {
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together" tail="collapsed">
+          <Suspense fallback="Loading">Content</Suspense>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      '<SuspenseList tail="collapsed" /> is only valid if ' +
+        'revealOrder is "forwards" (default) or "backwards". ' +
+        'Did you mean to specify revealOrder="forwards"?' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList
+  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.
+    await act(async () => {
+      React.startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+
+      await waitFor(['A']);
+
+      Scheduler.unstable_advanceTime(200);
+      jest.advanceTimersByTime(200);
+
+      await waitFor(['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.
+      await waitFor([
+        '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.
+    assertLog(['D']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('adding to the middle does not collapse insertions (forwards)', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+    const D = createAsyncText('D');
+    const E = createAsyncText('E');
+    const 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();
+
+    await waitForAll(['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],
+        ]}
+      />,
+    );
+
+    await waitForAll([
+      '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();
+
+    await waitForAll(['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();
+
+    await waitForAll(['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();
+
+    await waitForAll(['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>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('adding to the middle does not collapse insertions (backwards)', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+    const D = createAsyncText('D');
+    const E = createAsyncText('E');
+    const F = createAsyncText('F');
+
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="unstable_legacy-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();
+
+    await waitForAll(['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],
+        ]}
+      />,
+    );
+
+    await waitForAll([
+      '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();
+
+    await waitForAll(['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();
+
+    await waitForAll(['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();
+
+    await waitForAll(['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>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('adding to the middle of committed tail does not collapse insertions', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+    const D = createAsyncText('D');
+    const E = createAsyncText('E');
+    const 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();
+
+    await waitForAll(['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],
+        ]}
+      />,
+    );
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Suspend! [C]',
+      'Loading C',
+      'Suspend! [D]',
+      'Loading D',
+      'A',
+      'Loading B',
+      'Loading C',
+      'Suspend! [D]',
+      'Loading D',
+      'Loading E',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+
+    // 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();
+
+    await waitForAll([
+      'B',
+      'Suspend! [C]',
+      ...(!gate('alwaysThrottleRetries') ? ['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();
+
+    await waitForAll(['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();
+
+    await waitForAll(['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>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('only shows no initial loading state "hidden" tail insertions', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const 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 />);
+
+    await waitForAll(['Suspend! [A]', 'Loading A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await A.resolve();
+
+    await waitForAll(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await act(() => B.resolve());
+    assertLog(['B', 'Suspend! [C]', 'Loading C']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('reveals "hidden" rows one by one without suspense boundaries', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="hidden">
+          <div>
+            <A />
+          </div>
+          <B />
+          <C />
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(
+      <Suspense fallback="Loading root">
+        <Foo />
+      </Suspense>,
+    );
+
+    await waitForAll(['Suspend! [A]']);
+
+    // We can commit without any rows at all leaving empty.
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await act(() => A.resolve());
+    assertLog(['A', 'Suspend! [B]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A</span>
+      </div>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B', 'Suspend! [C]']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>A</span>
+        </div>
+        <span>B</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div>
+          <span>A</span>
+        </div>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('preserves already mounted rows when a new hidden on is inserted in the tail', async () => {
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    let count = 0;
+    function MountCount({children}) {
+      // This component should only mount once.
+      React.useLayoutEffect(() => {
+        count++;
+      }, []);
+      return children;
+    }
+
+    function Foo({insert}) {
+      return (
+        <SuspenseList
+          revealOrder="forwards"
+          tail={insert ? 'hidden' : 'visible'}>
+          <Text text="A" />
+          {insert ? <B /> : null}
+          <MountCount>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <C />
+            </Suspense>
+          </MountCount>
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<Foo insert={false} />);
+    });
+    assertLog(['A', 'Suspend! [C]', 'Loading C', 'Suspend! [C]']);
+
+    expect(count).toBe(1);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => {
+      ReactNoop.render(<Foo insert={true} />);
+    });
+
+    assertLog(['A', 'Suspend! [B]', 'A', 'Suspend! [B]']);
+
+    expect(count).toBe(1);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(async () => {
+      await B.resolve();
+      await C.resolve();
+    });
+
+    assertLog(['A', 'B', 'C']);
+
+    expect(count).toBe(1);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('reveals "collapsed" rows one by one after the first without boundaries', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="collapsed">
+          <A />
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <C />
+        </SuspenseList>
+      );
+    }
+
+    await act(async () => {
+      ReactNoop.render(
+        <Suspense fallback="Loading root">
+          <Foo />
+        </Suspense>,
+      );
+      await waitForAll(['Suspend! [A]', 'Suspend! [A]']);
+    });
+
+    // The root is still blocked on the first row.
+    expect(ReactNoop).toMatchRenderedOutput('Loading root');
+
+    await A.resolve();
+
+    await waitForAll(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    // Because we have a Suspense boundary that can commit we can now unblock the rest.
+    // If it wasn't a boundary then we couldn't make progress because it would commit
+    // without any loading state.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B', 'Suspend! [C]', 'B', 'Suspend! [C]']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    // Surprisingly unsuspending B actually causes the parent to resuspend
+    // because C is now unblocked which resuspends the parent. Preventing the
+    // Retry from committing. That's because we don't want to commit into a
+    // state that doesn't have any loading indicators at all. That's what
+    // "collapsed" is for. To ensure there's always a loading indicator.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await act(() => C.resolve());
+    assertLog(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('eventually resolves a nested forwards suspense list', async () => {
+    const B = createAsyncText('B');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="together">
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <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 />);
+
+    await waitForAll([
+      '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 act(() => B.resolve());
+    assertLog(['A', 'B', 'C', 'D']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
+    const 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 />);
+
+    await waitForAll(['A', 'Suspend! [B]', 'Loading B', 'C', 'Loading C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Loading C</span>);
+
+    await act(() => B.resolve());
+    assertLog(['A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
+    const B = createAsyncText('B');
+
+    function Foo({showB}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <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} />);
+
+    await waitForAll(['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} />);
+
+    await waitForAll(['A', 'Suspend! [B]', 'Loading B', 'C', 'A', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>C</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('can do unrelated adjacent updates', async () => {
+    let updateAdjacent;
+    function Adjacent() {
+      const [text, setText] = React.useState('-');
+      updateAdjacent = setText;
+      return <Text text={text} />;
+    }
+
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <Text text="A" />
+            <Text text="B" />
+          </SuspenseList>
+          <Adjacent />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll(['A', 'B', '-']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>-</span>
+      </div>,
+    );
+
+    // Update the row adjacent to the list
+    await act(() => updateAdjacent('C'));
+
+    assertLog(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </div>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('is able to re-suspend the last rows during an update with hidden', async () => {
+    const AsyncB = createAsyncText('B');
+
+    let setAsyncB;
+
+    function B() {
+      const [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 />);
+
+    await waitForAll(['A', 'Sync B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Sync B</span>
+      </>,
+    );
+
+    const previousInst = setAsyncB;
+
+    // During an update we suspend on B.
+    await act(() => setAsyncB(true));
+
+    assertLog([
+      '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.
+    await act(() => ReactNoop.render(<Foo updateList={true} />));
+
+    assertLog([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await act(() => AsyncB.resolve());
+    assertLog(['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);
+  });
+
+  // @gate enableSuspenseList
+  it('is able to interrupt a partially rendered tree and continue later', async () => {
+    const AsyncA = createAsyncText('A');
+
+    let updateLowPri;
+    let updateHighPri;
+
+    function Bar() {
+      const [highPriState, setHighPriState] = React.useState(false);
+      updateHighPri = setHighPriState;
+      return highPriState ? <AsyncA /> : null;
+    }
+
+    function Foo() {
+      const [lowPriState, setLowPriState] = React.useState(false);
+      updateLowPri = setLowPriState;
+      return (
+        <SuspenseList revealOrder="forwards" tail="hidden">
+          <Suspense key="A" fallback={<Text text="Loading A" />}>
+            <Bar />
+          </Suspense>
+          {lowPriState ? <Text text="B" /> : null}
+          {lowPriState ? <Text text="C" /> : null}
+          {lowPriState ? <Text text="D" /> : null}
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll([]);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await act(async () => {
+      // Add a few items at the end.
+      React.startTransition(() => {
+        updateLowPri(true);
+      });
+
+      // Flush partially through.
+      await waitFor(['B', 'C']);
+
+      // Schedule another update at higher priority.
+      ReactNoop.flushSync(() => updateHighPri(true));
+
+      // That will intercept the previous render.
+      assertLog([
+        'Suspend! [A]',
+        'Loading A',
+        // Re-render at forced.
+        'Suspend! [A]',
+        'Loading A',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
+
+      // Try again on low-pri.
+      await waitForAll([
+        'Suspend! [A]',
+        'Loading A',
+        // pre-warming
+        'Suspend! [A]',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
+    });
+
+    await act(() => AsyncA.resolve());
+    assertLog(['A', 'B', 'C', 'D']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>D</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('can resume class components when revealed together', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+
+    class ClassComponent extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function Foo() {
+      return (
+        <Suspense fallback={<Text text="Loading" />}>
+          <SuspenseList revealOrder="together">
+            <ClassComponent>
+              <Suspense fallback={<Text text="Loading A" />}>
+                <A />
+              </Suspense>
+            </ClassComponent>
+            <ClassComponent>
+              <Suspense fallback={<Text text="Loading B" />}>
+                <B />
+              </Suspense>
+            </ClassComponent>
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Loading A',
+      'Loading B',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll(['A', 'B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('should be able to progressively show CPU expensive rows with two pass rendering', async () => {
+    function TwoPass({text}) {
+      const [pass, setPass] = React.useState(0);
+      React.useLayoutEffect(() => {
+        Scheduler.log('Mount ' + text);
+        setPass(1);
+      }, []);
+      return <Text text={pass === 0 ? 'First Pass ' + text : text} />;
+    }
+
+    function Sleep({time, children}) {
+      Scheduler.unstable_advanceTime(time);
+      return children;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <SuspenseList revealOrder="forwards" tail="hidden">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <Sleep time={600}>
+              <TwoPass text="A" />
+            </Sleep>
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <Sleep time={600}>
+              <TwoPass text="B" />
+            </Sleep>
+          </Suspense>
+          <Sleep time={600}>
+            <Text text="C" />
+          </Sleep>
+        </SuspenseList>
+      );
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<App />);
+    });
+
+    await waitFor(['App', 'First Pass A', 'Mount A', 'A']);
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await waitFor(['First Pass B', 'Mount B', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+
+    await waitForAll(['C']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it('should be able to progressively show rows with two pass rendering and visible', async () => {
+    function TwoPass({text}) {
+      const [pass, setPass] = React.useState(0);
+      React.useLayoutEffect(() => {
+        Scheduler.log('Mount ' + text);
+        setPass(1);
+      }, []);
+      return <Text text={pass === 0 ? 'First Pass ' + text : text} />;
+    }
+
+    function Sleep({time, children}) {
+      Scheduler.unstable_advanceTime(time);
+      return children;
+    }
+
+    function App() {
+      Scheduler.log('App');
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <Sleep time={600}>
+              <TwoPass text="A" />
+            </Sleep>
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <Sleep time={600}>
+              <TwoPass text="B" />
+            </Sleep>
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <Sleep time={600}>
+              <Text text="C" />
+            </Sleep>
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<App />);
+    });
+
+    await waitFor([
+      'App',
+      'First Pass A',
+      'Loading B',
+      'Loading C',
+      'Mount A',
+      'A',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await waitFor(['First Pass B', 'Mount B', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await waitForAll(['C']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableProfilerTimer
+  // @gate enableSuspenseList
+  it('counts the actual duration when profiling a SuspenseList', async () => {
+    // Order of parameters: id, phase, actualDuration, treeBaseDuration
+    const onRender = jest.fn();
+
+    const Fallback = () => {
+      Scheduler.log('Fallback');
+      Scheduler.unstable_advanceTime(3);
+      return <span>Loading...</span>;
+    };
+
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+    const D = createAsyncText('D');
+    await A.resolve();
+    await B.resolve();
+
+    function Sleep({time, children}) {
+      Scheduler.unstable_advanceTime(time);
+      return children;
+    }
+
+    function App({addRow, suspendTail}) {
+      Scheduler.log('App');
+      return (
+        <Profiler id="root" onRender={onRender}>
+          <SuspenseList revealOrder="forwards" tail="visible">
+            <Suspense fallback={<Fallback />}>
+              <Sleep time={1}>
+                <A />
+              </Sleep>
+            </Suspense>
+            <Suspense fallback={<Fallback />}>
+              <Sleep time={4}>
+                <B />
+              </Sleep>
+            </Suspense>
+            <Suspense fallback={<Fallback />}>
+              <Sleep time={5}>{suspendTail ? <C /> : <Text text="C" />}</Sleep>
+            </Suspense>
+            {addRow ? (
+              <Suspense fallback={<Fallback />}>
+                <Sleep time={12}>
+                  <D />
+                </Sleep>
+              </Suspense>
+            ) : null}
+          </SuspenseList>
+        </Profiler>
+      );
+    }
+
+    ReactNoop.render(<App suspendTail={true} />);
+
+    await waitForAll([
+      'App',
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Fallback',
+      // pre-warming
+      'Suspend! [C]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>Loading...</span>
+      </>,
+    );
+    expect(onRender).toHaveBeenCalledTimes(
+      gate('alwaysThrottleRetries') ? 1 : 2,
+    );
+
+    // The treeBaseDuration should be the time to render each child. The last
+    // one counts the fallback time.
+    // The actualDuration should also include the 5ms spent rendering the
+    // last suspended row.
+
+    // actualDuration
+    expect(onRender.mock.calls[0][2]).toBe(1 + 4 + 5 + 3);
+    // treeBaseDuration
+    expect(onRender.mock.calls[0][3]).toBe(1 + 4 + 3);
+
+    ReactNoop.render(<App suspendTail={false} />);
+
+    await waitForAll(['App', 'A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+    expect(onRender).toHaveBeenCalledTimes(
+      gate('alwaysThrottleRetries') ? 2 : 3,
+    );
+
+    // actualDuration
+    expect(onRender.mock.calls[1][2]).toBe(
+      gate('alwaysThrottleRetries') ? 1 + 4 + 5 : 5,
+    );
+    // treeBaseDuration
+    expect(onRender.mock.calls[1][3]).toBe(
+      gate('alwaysThrottleRetries') ? 1 + 4 + 5 : 8,
+    );
+
+    ReactNoop.render(<App addRow={true} suspendTail={true} />);
+
+    await waitForAll([
+      'App',
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Fallback',
+      // We rendered in together mode for the head, now we re-render with forced suspense.
+      'A',
+      'B',
+      'Suspend! [C]',
+      'Fallback',
+      // Lastly we render the tail.
+      'Fallback',
+      // pre-warming
+      'Suspend! [C]',
+    ]);
+
+    // Flush suspended time.
+    jest.advanceTimersByTime(1000);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span hidden={true}>C</span>
+        <span>Loading...</span>
+        <span>Loading...</span>
+      </>,
+    );
+    expect(onRender).toHaveBeenCalledTimes(
+      gate('alwaysThrottleRetries') ? 4 : 5,
+    );
+
+    // The treeBaseDuration should be the time to render the first two
+    // children and then two fallbacks.
+    // The actualDuration should also include rendering the content of
+    // the first fallback, as well as the second pass to render the head
+    // with force fallback mode.
+
+    // actualDuration
+    expect(onRender.mock.calls[2][2]).toBe(
+      gate('alwaysThrottleRetries') ? (1 + 4 + 5 + 3) * 2 + 3 : 10,
+    );
+    // treeBaseDuration
+    expect(onRender.mock.calls[2][3]).toBe(
+      gate('alwaysThrottleRetries') ? 1 + 4 + 3 + 3 : 10,
+    );
+
+    await act(() => C.resolve());
+    assertLog([
+      'C',
+      'Suspend! [D]',
+      // pre-warming
+      'Suspend! [D]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+        <span>Loading...</span>
+      </>,
+    );
+
+    expect(onRender).toHaveBeenCalledTimes(
+      gate('alwaysThrottleRetries') ? 6 : 7,
+    );
+
+    // actualDuration
+    expect(onRender.mock.calls[5][2]).toBe(
+      gate('alwaysThrottleRetries') ? 12 : 17,
+    );
+    // treeBaseDuration
+    expect(onRender.mock.calls[5][3]).toBe(1 + 4 + 5 + 3);
+  });
+
+  // @gate enableSuspenseList
+  it('propagates despite a memo bailout', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+    const C = createAsyncText('C');
+
+    const Bailout = React.memo(({children}) => {
+      return children;
+    });
+
+    function Foo() {
+      // To test the part that relies on context propagation,
+      // we need to bailout *above* the Suspense's parent.
+      // Several layers of Bailout wrappers help verify we're
+      // marking updates all the way to the propagation root.
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <Bailout>
+            <Bailout>
+              <Bailout>
+                <Bailout>
+                  <Suspense fallback={<Text text="Loading A" />}>
+                    <A />
+                  </Suspense>
+                </Bailout>
+              </Bailout>
+            </Bailout>
+          </Bailout>
+          <Bailout>
+            <Bailout>
+              <Bailout>
+                <Bailout>
+                  <Suspense fallback={<Text text="Loading B" />}>
+                    <B />
+                  </Suspense>
+                </Bailout>
+              </Bailout>
+            </Bailout>
+          </Bailout>
+          <Bailout>
+            <Bailout>
+              <Bailout>
+                <Bailout>
+                  <Suspense fallback={<Text text="Loading C" />}>
+                    <C />
+                  </Suspense>
+                </Bailout>
+              </Bailout>
+            </Bailout>
+          </Bailout>
+        </SuspenseList>
+      );
+    }
+
+    await C.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => A.resolve());
+    assertLog(['A', 'Suspend! [B]', 'Suspend! [B]']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B', 'C']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList
+  it(
+    'regression test: SuspenseList should never force boundaries deeper than ' +
+      'a single level into fallback mode',
+    async () => {
+      const A = createAsyncText('A');
+
+      function UnreachableFallback() {
+        throw new Error('Should never be thrown!');
+      }
+
+      function Repro({update}) {
+        return (
+          <SuspenseList revealOrder="forwards" tail="visible">
+            {update && (
+              <Suspense fallback={<Text text="Loading A..." />}>
+                <A />
+              </Suspense>
+            )}
+            <Suspense fallback={<Text text="Loading B..." />}>
+              {update ? (
+                <Suspense fallback={<UnreachableFallback />}>
+                  <Text text="B2" />
+                </Suspense>
+              ) : (
+                <Text text="B1" />
+              )}
+            </Suspense>
+            <Suspense fallback={<Text text="Loading C..." />}>
+              <Text text="C" />
+            </Suspense>
+            {update && (
+              <Suspense fallback={<Text text="Loading D..." />}>
+                <Text text="D" />
+              </Suspense>
+            )}
+          </SuspenseList>
+        );
+      }
+
+      // Initial mount. Only two rows are mounted, B and C.
+      const root = ReactNoop.createRoot();
+      await act(() => root.render(<Repro update={false} />));
+      assertLog(['B1', 'C']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>B1</span>
+          <span>C</span>
+        </>,
+      );
+
+      // During the update, a few things happen simultaneously:
+      // - A new row, A, is inserted into the head. This row suspends.
+      // - The context in row B is replaced. The new content contains a nested
+      //   Suspense boundary.
+      // - A new row, D, is inserted into the tail.
+      await act(() => root.render(<Repro update={true} />));
+      assertLog([
+        // During the first pass, the new row, A, suspends. This means any new
+        // rows in the tail should be forced into fallback mode.
+        'Suspend! [A]',
+        'Loading A...',
+        'B2',
+        'C',
+
+        // A second pass is used to render the fallbacks in the tail.
+        //
+        // Rows B and C were already mounted, so they should not be forced into
+        // fallback mode.
+        //
+        // In the regression that this test was written for, the inner
+        // Suspense boundary around B2 was incorrectly activated. Only the
+        // nearest fallbacks per row should be activated, and only if they
+        // haven't already mounted.
+        'Loading A...',
+        'B2',
+        'C',
+
+        // D is part of the tail, so it should show a fallback.
+        'Loading D...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Loading A...</span>
+          <span>B2</span>
+          <span>C</span>
+          <span>Loading D...</span>
+        </>,
+      );
+
+      // Now finish loading A.
+      await act(() => A.resolve());
+      assertLog(['A', 'D']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>A</span>
+          <span>B2</span>
+          <span>C</span>
+          <span>D</span>
+        </>,
+      );
+    },
+  );
+
+  // @gate enableSuspenseList && enableAsyncIterableChildren
+  it('warns for async generator components in "forwards" order', async () => {
+    async function* Generator() {
+      yield 'A';
+      yield 'B';
+    }
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <Generator />
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      React.startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    });
+    assertConsoleErrorDev([
+      'A generator Component was passed to a <SuspenseList revealOrder="forwards" />. ' +
+        'This is not supported as a way to generate lists. Instead, pass an ' +
+        'iterable as the children.' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+      '<Generator> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in Foo (at **)',
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  // @gate enableSuspenseList && enableAsyncIterableChildren
+  it('can display async iterable in "forwards" order', async () => {
+    const A = createAsyncText('A');
+    const B = createAsyncText('B');
+
+    // We use Cached elements to avoid rerender.
+    const ASlot = (
+      <Suspense key="A" fallback={<Text text="Loading A" />}>
+        <A />
+      </Suspense>
+    );
+
+    const BSlot = (
+      <Suspense key="B" fallback={<Text text="Loading B" />}>
+        <B />
+      </Suspense>
+    );
+
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        yield ASlot;
+        yield BSlot;
+      },
+    };
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          {iterable}
+        </SuspenseList>
+      );
+    }
+
+    await act(() => {
+      React.startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      'Loading A',
+      'Loading B',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+
+    assertConsoleErrorDev([
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in SuspenseList (at **)\n' +
+        '    in Foo (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in SuspenseList (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await act(() => A.resolve());
+    assertLog(['A', 'Suspend! [B]', 'Suspend! [B]']);
+
+    assertConsoleErrorDev([
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in SuspenseList (at **)\n' +
+        '    in Foo (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in SuspenseList (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await act(() => B.resolve());
+    assertLog(['B']);
+
+    assertConsoleErrorDev([
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in SuspenseList (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseList && enableAsyncIterableChildren
+  it('warns if a nested async iterable is passed to a "forwards" list', async () => {
+    function Foo({items}) {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          {items}
+          <div>Tail</div>
+        </SuspenseList>
+      );
+    }
+
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        yield (
+          <Suspense key={'A'} fallback="Loading">
+            A
+          </Suspense>
+        );
+        yield (
+          <Suspense key={'B'} fallback="Loading">
+            B
+          </Suspense>
+        );
+      },
+    };
+
+    await act(() => {
+      React.startTransition(() => {
+        ReactNoop.render(<Foo items={iterable} />);
+      });
+    });
+    assertConsoleErrorDev([
+      'A nested async iterable was passed to row #0 in <SuspenseList />. ' +
+        'Wrap it in an additional SuspenseList to configure its revealOrder: ' +
+        '<SuspenseList revealOrder=...> ... ' +
+        '<SuspenseList revealOrder=...>{async iterable}</SuspenseList> ... ' +
+        '</SuspenseList>' +
+        '\n    in SuspenseList (at **)' +
+        '\n    in Foo (at **)',
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
new file mode 100644
index 00000000000..196022d8a38
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
@@ -0,0 +1,623 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Profiler;
+let React;
+let ReactNoop;
+let Scheduler;
+let ReactFeatureFlags;
+let ReactCache;
+let Suspense;
+let TextResource;
+let textResourceShouldFail;
+let waitForAll;
+let assertLog;
+let act;
+
+describe('ReactSuspensePlaceholder', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+    ReactFeatureFlags.enableProfilerTimer = true;
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    ReactCache = require('react-cache');
+
+    Profiler = React.Profiler;
+    Suspense = React.Suspense;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    act = InternalTestUtils.act;
+
+    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.log(`Promise rejected [${text}]`);
+                      status = 'rejected';
+                      value = new Error('Failed to load: ' + text);
+                      listeners.forEach(listener => listener.reject(value));
+                    } else {
+                      Scheduler.log(`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;
+              }
+            }
+          },
+        };
+      },
+      ([text, ms]) => text,
+    );
+    textResourceShouldFail = false;
+  });
+
+  function Text({fakeRenderDuration = 0, text = 'Text'}) {
+    Scheduler.unstable_advanceTime(fakeRenderDuration);
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({fakeRenderDuration = 0, ms, text}) {
+    Scheduler.unstable_advanceTime(fakeRenderDuration);
+    try {
+      TextResource.read([text, ms]);
+      Scheduler.log(text);
+      return text;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.log(`Suspend! [${text}]`);
+      } else {
+        Scheduler.log(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  it('times out children that are already hidden', async () => {
+    class HiddenText extends React.PureComponent {
+      render() {
+        const text = this.props.text;
+        Scheduler.log(text);
+        return <span hidden={true}>{text}</span>;
+      }
+    }
+
+    function App(props) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <HiddenText text="A" />
+          <span>
+            <AsyncText ms={1000} text={props.middleText} />
+          </span>
+          <span>
+            <Text text="C" />
+          </span>
+        </Suspense>
+      );
+    }
+
+    // Initial mount
+    ReactNoop.render(<App middleText="B" />);
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading...',
+      // pre-warming
+      'A',
+      'Suspend! [B]',
+      'C',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [B]', 'A', 'B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+
+    // Update
+    ReactNoop.render(<App middleText="B2" />);
+    await waitForAll([
+      'Suspend! [B2]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [B2]',
+      'C',
+    ]);
+
+    // Time out the update
+    jest.advanceTimersByTime(750);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span hidden={true}>B</span>
+        <span hidden={true}>C</span>
+        Loading...
+      </>,
+    );
+
+    // Resolve the promise
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [B2]', 'B2', 'C']);
+
+    // Render the final update. A should still be hidden, because it was
+    // given a `hidden` prop.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>A</span>
+        <span>B2</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('times out text nodes', async () => {
+    function App(props) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="A" />
+          <AsyncText ms={1000} text={props.middleText} />
+          <Text text="C" />
+        </Suspense>
+      );
+    }
+
+    // Initial mount
+    ReactNoop.render(<App middleText="B" />);
+
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading...',
+      // pre-warming
+      'A',
+      'Suspend! [B]',
+      'C',
+    ]);
+
+    expect(ReactNoop).not.toMatchRenderedOutput('ABC');
+
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [B]', 'A', 'B', 'C']);
+    expect(ReactNoop).toMatchRenderedOutput('ABC');
+
+    // Update
+    ReactNoop.render(<App middleText="B2" />);
+    await waitForAll([
+      'A',
+      'Suspend! [B2]',
+      'Loading...',
+      // pre-warming
+      'A',
+      'Suspend! [B2]',
+      'C',
+    ]);
+    // Time out the update
+    jest.advanceTimersByTime(750);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    // Resolve the promise
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [B2]', 'A', 'B2', 'C']);
+
+    // Render the final update. A should still be hidden, because it was
+    // given a `hidden` prop.
+    expect(ReactNoop).toMatchRenderedOutput('AB2C');
+  });
+
+  it('preserves host context for text nodes', async () => {
+    function App(props) {
+      return (
+        // uppercase is a special type that causes React Noop to render child
+        // text nodes as uppercase.
+        <uppercase>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Text text="a" />
+            <AsyncText ms={1000} text={props.middleText} />
+            <Text text="c" />
+          </Suspense>
+        </uppercase>
+      );
+    }
+
+    // Initial mount
+    ReactNoop.render(<App middleText="b" />);
+
+    await waitForAll([
+      'a',
+      'Suspend! [b]',
+      'Loading...',
+      // pre-warming
+      'a',
+      'Suspend! [b]',
+      'c',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(<uppercase>LOADING...</uppercase>);
+
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [b]', 'a', 'b', 'c']);
+    expect(ReactNoop).toMatchRenderedOutput(<uppercase>ABC</uppercase>);
+
+    // Update
+    ReactNoop.render(<App middleText="b2" />);
+    await waitForAll([
+      'a',
+      'Suspend! [b2]',
+      'Loading...',
+      'a',
+      'Suspend! [b2]',
+      'c',
+    ]);
+    // Time out the update
+    jest.advanceTimersByTime(750);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<uppercase>LOADING...</uppercase>);
+
+    // Resolve the promise
+    await act(() => jest.advanceTimersByTime(1000));
+    assertLog(['Promise resolved [b2]', 'a', 'b2', 'c']);
+
+    // Render the final update. A should still be hidden, because it was
+    // given a `hidden` prop.
+    expect(ReactNoop).toMatchRenderedOutput(<uppercase>AB2C</uppercase>);
+  });
+
+  describe('profiler durations', () => {
+    let App;
+    let onRender;
+
+    beforeEach(() => {
+      // Order of parameters: id, phase, actualDuration, treeBaseDuration
+      onRender = jest.fn();
+
+      const Fallback = () => {
+        Scheduler.log('Fallback');
+        Scheduler.unstable_advanceTime(10);
+        return 'Loading...';
+      };
+
+      const Suspending = () => {
+        Scheduler.log('Suspending');
+        Scheduler.unstable_advanceTime(2);
+        return <AsyncText ms={1000} text="Loaded" fakeRenderDuration={1} />;
+      };
+
+      App = ({shouldSuspend, text = 'Text', textRenderDuration = 5}) => {
+        Scheduler.log('App');
+        return (
+          <Profiler id="root" onRender={onRender}>
+            <Suspense fallback={<Fallback />}>
+              {shouldSuspend && <Suspending />}
+              <Text fakeRenderDuration={textRenderDuration} text={text} />
+            </Suspense>
+          </Profiler>
+        );
+      };
+    });
+
+    describe('when suspending during mount', () => {
+      // @gate !disableLegacyMode && !disableLegacyMode
+      it('properly accounts for base durations when a suspended times out in a legacy tree', async () => {
+        ReactNoop.renderLegacySyncRoot(<App shouldSuspend={true} />);
+        assertLog([
+          'App',
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Text',
+          'Fallback',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
+        expect(onRender).toHaveBeenCalledTimes(1);
+
+        // Initial mount only shows the "Loading..." Fallback.
+        // The treeBaseDuration then should be 10ms spent rendering Fallback,
+        // but the actualDuration should also include the 8ms spent rendering the hidden tree.
+        expect(onRender.mock.calls[0][2]).toBe(18);
+        expect(onRender.mock.calls[0][3]).toBe(10);
+
+        jest.advanceTimersByTime(1000);
+
+        assertLog(['Promise resolved [Loaded]']);
+
+        ReactNoop.flushSync();
+
+        assertLog(['Loaded']);
+        expect(ReactNoop).toMatchRenderedOutput('LoadedText');
+        expect(onRender).toHaveBeenCalledTimes(2);
+
+        // When the suspending data is resolved and our final UI is rendered,
+        // the baseDuration should only include the 1ms re-rendering AsyncText,
+        // but the treeBaseDuration should include the full 8ms spent in the tree.
+        expect(onRender.mock.calls[1][2]).toBe(1);
+        expect(onRender.mock.calls[1][3]).toBe(8);
+      });
+
+      it('properly accounts for base durations when a suspended times out in a concurrent tree', async () => {
+        ReactNoop.render(<App shouldSuspend={true} />);
+
+        await waitForAll([
+          'App',
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Fallback',
+          // pre-warming
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Text',
+        ]);
+        // 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(
+          gate('alwaysThrottleRetries') ? 1 : 2,
+        );
+
+        // Initial mount only shows the "Loading..." Fallback.
+        // The treeBaseDuration then should be 10ms spent rendering Fallback,
+        // but the actualDuration should also include the 3ms spent rendering the hidden tree.
+        expect(onRender.mock.calls[0][2]).toBe(13);
+        expect(onRender.mock.calls[0][3]).toBe(10);
+
+        // Resolve the pending promise.
+        await act(() => jest.advanceTimersByTime(1000));
+        assertLog([
+          'Promise resolved [Loaded]',
+          'Suspending',
+          'Loaded',
+          'Text',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('LoadedText');
+
+        expect(onRender).toHaveBeenCalledTimes(3);
+
+        // When the suspending data is resolved and our final UI is rendered,
+        // both times should include the 8ms re-rendering Suspending and AsyncText.
+        expect(onRender.mock.calls[2][2]).toBe(8);
+        expect(onRender.mock.calls[2][3]).toBe(8);
+      });
+    });
+
+    describe('when suspending during update', () => {
+      // @gate !disableLegacyMode && !disableLegacyMode
+      it('properly accounts for base durations when a suspended times out in a legacy tree', async () => {
+        ReactNoop.renderLegacySyncRoot(
+          <App shouldSuspend={false} textRenderDuration={5} />,
+        );
+        assertLog(['App', 'Text']);
+        expect(ReactNoop).toMatchRenderedOutput('Text');
+        expect(onRender).toHaveBeenCalledTimes(1);
+
+        // Initial mount only shows the "Text" text.
+        // It should take 5ms to render.
+        expect(onRender.mock.calls[0][2]).toBe(5);
+        expect(onRender.mock.calls[0][3]).toBe(5);
+
+        ReactNoop.render(<App shouldSuspend={true} textRenderDuration={5} />);
+        assertLog([
+          'App',
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Text',
+          'Fallback',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
+        expect(onRender).toHaveBeenCalledTimes(2);
+
+        // The suspense update should only show the "Loading..." Fallback.
+        // The actual duration should include 10ms spent rendering Fallback,
+        // plus the 8ms render all of the hidden, suspended subtree.
+        // But the tree base duration should only include 10ms spent rendering Fallback,
+        expect(onRender.mock.calls[1][2]).toBe(18);
+        expect(onRender.mock.calls[1][3]).toBe(10);
+
+        ReactNoop.renderLegacySyncRoot(
+          <App shouldSuspend={true} text="New" textRenderDuration={6} />,
+        );
+        assertLog([
+          'App',
+          'Suspending',
+          'Suspend! [Loaded]',
+          'New',
+          'Fallback',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
+        expect(onRender).toHaveBeenCalledTimes(3);
+
+        expect(onRender.mock.calls[1][2]).toBe(18);
+        expect(onRender.mock.calls[1][3]).toBe(10);
+        jest.advanceTimersByTime(1000);
+
+        assertLog(['Promise resolved [Loaded]']);
+
+        ReactNoop.flushSync();
+
+        assertLog(['Loaded']);
+        expect(ReactNoop).toMatchRenderedOutput('LoadedNew');
+        expect(onRender).toHaveBeenCalledTimes(4);
+
+        // When the suspending data is resolved and our final UI is rendered,
+        // the baseDuration should only include the 1ms re-rendering AsyncText,
+        // but the treeBaseDuration should include the full 9ms spent in the tree.
+        expect(onRender.mock.calls[3][2]).toBe(1);
+        expect(onRender.mock.calls[3][3]).toBe(9);
+      });
+
+      it('properly accounts for base durations when a suspended times out in a concurrent tree', async () => {
+        const Fallback = () => {
+          Scheduler.log('Fallback');
+          Scheduler.unstable_advanceTime(10);
+          return 'Loading...';
+        };
+
+        const Suspending = () => {
+          Scheduler.log('Suspending');
+          Scheduler.unstable_advanceTime(2);
+          return <AsyncText ms={1000} text="Loaded" fakeRenderDuration={1} />;
+        };
+
+        App = ({shouldSuspend, text = 'Text', textRenderDuration = 5}) => {
+          Scheduler.log('App');
+          return (
+            <Profiler id="root" onRender={onRender}>
+              <Suspense fallback={<Fallback />}>
+                {shouldSuspend && <Suspending />}
+                <Text fakeRenderDuration={textRenderDuration} text={text} />
+              </Suspense>
+            </Profiler>
+          );
+        };
+
+        ReactNoop.render(
+          <>
+            <App shouldSuspend={false} textRenderDuration={5} />
+            <Suspense fallback={null} />
+          </>,
+        );
+
+        await waitForAll(['App', 'Text']);
+        expect(ReactNoop).toMatchRenderedOutput('Text');
+        expect(onRender).toHaveBeenCalledTimes(1);
+
+        // Initial mount only shows the "Text" text.
+        // It should take 5ms to render.
+        expect(onRender.mock.calls[0][2]).toBe(5);
+        expect(onRender.mock.calls[0][3]).toBe(5);
+
+        ReactNoop.render(
+          <>
+            <App shouldSuspend={true} textRenderDuration={5} />
+            <Suspense fallback={null} />
+          </>,
+        );
+        await waitForAll([
+          'App',
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Fallback',
+          // pre-warming
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Text',
+        ]);
+        // Show the fallback UI.
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
+        expect(onRender).toHaveBeenCalledTimes(
+          gate('alwaysThrottleRetries') ? 2 : 3,
+        );
+
+        jest.advanceTimersByTime(900);
+
+        // The suspense update should only show the "Loading..." Fallback.
+        // The actual duration should include 10ms spent rendering Fallback,
+        // plus the 3ms render all of the partially rendered suspended subtree.
+        // But the tree base duration should only include 10ms spent rendering Fallback.
+        expect(onRender.mock.calls[1][2]).toBe(13);
+        expect(onRender.mock.calls[1][3]).toBe(10);
+
+        // Update again while timed out.
+        // Since this test was originally written we added an optimization to avoid
+        // 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(
+          <>
+            <App shouldSuspend={true} text="New" textRenderDuration={6} />
+            <Suspense fallback={null}>
+              <AsyncText ms={100} text="Sibling" fakeRenderDuration={1} />
+            </Suspense>
+          </>,
+        );
+
+        // TODO: This is here only to shift us into the next JND bucket. A
+        // consequence of AsyncText relying on the same timer queue as React's
+        // internal Suspense timer. We should decouple our AsyncText helpers
+        // from timers.
+        Scheduler.unstable_advanceTime(200);
+
+        await waitForAll([
+          'App',
+          'Suspending',
+          'Suspend! [Loaded]',
+          'Fallback',
+          'Suspend! [Sibling]',
+          // pre-warming
+          'Suspending',
+          'Suspend! [Loaded]',
+          'New',
+          'Suspend! [Sibling]',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+        expect(onRender).toHaveBeenCalledTimes(
+          gate('alwaysThrottleRetries') ? 4 : 5,
+        );
+
+        // Resolve the pending promise.
+        await act(async () => {
+          jest.advanceTimersByTime(100);
+          assertLog([
+            'Promise resolved [Loaded]',
+            'Promise resolved [Sibling]',
+          ]);
+          await waitForAll(['Suspending', 'Loaded', 'New', 'Sibling']);
+        });
+
+        expect(onRender).toHaveBeenCalledTimes(
+          gate('alwaysThrottleRetries') ? 5 : 6,
+        );
+
+        // When the suspending data is resolved and our final UI is rendered,
+        // both times should include the 6ms rendering Text,
+        // the 2ms rendering Suspending, and the 1ms rendering AsyncText.
+        expect(onRender.mock.calls[4][2]).toBe(9);
+        expect(onRender.mock.calls[4][3]).toBe(
+          gate('alwaysThrottleRetries') ? 9 : 10,
+        );
+      });
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
new file mode 100644
index 00000000000..a5c4282e9e7
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -0,0 +1,4168 @@
+let React;
+let Fragment;
+let ReactNoop;
+let Scheduler;
+let act;
+let waitFor;
+let waitForAll;
+let waitForMicrotasks;
+let assertLog;
+let waitForPaint;
+let Suspense;
+let startTransition;
+let getCacheForType;
+
+let caches;
+let seededCache;
+
+describe('ReactSuspenseWithNoopRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    Fragment = React.Fragment;
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    waitForMicrotasks = InternalTestUtils.waitForMicrotasks;
+    assertLog = InternalTestUtils.assertLog;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return <span prop={text} />;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.log(fullText);
+    return <span prop={fullText} />;
+  }
+
+  function seedNextTextCache(text) {
+    if (seededCache === null) {
+      seededCache = createTextCache();
+    }
+    seededCache.resolve(text);
+  }
+
+  function resolveMostRecentTextCache(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  const resolveText = resolveMostRecentTextCache;
+
+  function rejectMostRecentTextCache(text, error) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].reject(text, error)`.
+      caches[caches.length - 1].reject(text, error);
+    }
+  }
+
+  const rejectText = rejectMostRecentTextCache;
+
+  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(() => {});
+  }
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  // @gate enableLegacyCache
+  it("does not restart if there's a ping during initial render", async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return props.children;
+    }
+
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Bar>
+              <AsyncText text="A" />
+              <Text text="B" />
+            </Bar>
+          </Suspense>
+          <Text text="C" />
+          <Text text="D" />
+        </>
+      );
+    }
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo />);
+    });
+    await waitFor([
+      'Foo',
+      'Bar',
+      // A suspends
+      'Suspend! [A]',
+      // We immediately unwind and switch to a fallback without
+      // rendering siblings.
+      'Loading...',
+      'C',
+      // Yield before rendering D
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Flush the promise completely
+    await act(async () => {
+      await resolveText('A');
+      // Even though the promise has resolved, we should now flush
+      // and commit the in progress render instead of restarting.
+      await waitForPaint(['D']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Loading..." />
+          <span prop="C" />
+          <span prop="D" />
+        </>,
+      );
+      // Next, we'll flush the complete content.
+      await waitForAll(['Bar', 'A', 'B']);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+        <span prop="C" />
+        <span prop="D" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('suspends rendering and continues later', async () => {
+    function Bar(props) {
+      Scheduler.log('Bar');
+      return props.children;
+    }
+
+    function Foo({renderBar}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {renderBar ? (
+            <Bar>
+              <AsyncText text="A" />
+              <Text text="B" />
+            </Bar>
+          ) : null}
+        </Suspense>
+      );
+    }
+
+    // Render empty shell.
+    ReactNoop.render(<Foo />);
+    await waitForAll(['Foo']);
+
+    // The update will suspend.
+    React.startTransition(() => {
+      ReactNoop.render(<Foo renderBar={true} />);
+    });
+    await waitForAll([
+      'Foo',
+      'Bar',
+      // A suspends
+      'Suspend! [A]',
+
+      // pre-warming
+      'B',
+      // end pre-warming
+
+      // We immediately unwind and switch to a fallback without
+      // rendering siblings.
+      'Loading...',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Resolve the data
+    await resolveText('A');
+    // Renders successfully
+    await waitForAll(['Foo', 'Bar', 'A', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('suspends siblings and later recovers each independently', async () => {
+    // Render two sibling Suspense components
+    ReactNoop.render(
+      <Fragment>
+        <Suspense fallback={<Text text="Loading A..." />}>
+          <AsyncText text="A" />
+        </Suspense>
+        <Suspense fallback={<Text text="Loading B..." />}>
+          <AsyncText text="B" />
+        </Suspense>
+      </Fragment>,
+    );
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading A...',
+      'Suspend! [B]',
+      'Loading B...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading A..." />
+        <span prop="Loading B..." />
+      </>,
+    );
+
+    // Resolve first Suspense's promise so that it switches switches back to the
+    // normal view. The second Suspense should still show the placeholder.
+    await act(() => resolveText('A'));
+    assertLog([
+      'A',
+      ...(gate('alwaysThrottleRetries')
+        ? ['Suspend! [B]', 'Suspend! [B]']
+        : []),
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading B..." />
+      </>,
+    );
+
+    // Resolve the second Suspense's promise so that it switches back to the
+    // normal view.
+    await act(() => resolveText('B'));
+    assertLog(['B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('when something suspends, unwinds immediately without rendering siblings', async () => {
+    // A shell is needed. The update cause it to suspend.
+    ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
+    await waitForAll([]);
+    React.startTransition(() => {
+      ReactNoop.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="A" />
+          <AsyncText text="B" />
+          <Text text="C" />
+          <Text text="D" />
+        </Suspense>,
+      );
+    });
+
+    // B suspends. Render a fallback
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      // pre-warming
+      'C',
+      'D',
+      // end pre-warming
+      'Loading...',
+    ]);
+    // Did not commit yet.
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Wait for data to resolve
+    await resolveText('B');
+    await waitForAll(['A', 'B', 'C', 'D']);
+    // Renders successfully
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+        <span prop="C" />
+        <span prop="D" />
+      </>,
+    );
+  });
+
+  // Second condition is redundant but guarantees that the test runs in prod.
+  // @gate enableLegacyCache
+  it('retries on error', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      reset() {
+        this.setState({error: null});
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={'Caught error: ' + this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const errorBoundary = React.createRef();
+    function App({renderContent}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {renderContent ? (
+            <ErrorBoundary ref={errorBoundary}>
+              <AsyncText text="Result" />
+            </ErrorBoundary>
+          ) : null}
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    React.startTransition(() => {
+      ReactNoop.render(<App renderContent={true} />);
+    });
+    await waitForAll(['Suspend! [Result]', 'Loading...']);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await rejectText('Result', new Error('Failed to load: Result'));
+
+    await waitForAll([
+      'Error! [Result]',
+
+      // React retries one more time
+      'Error! [Result]',
+
+      // Errored again on retry. Now handle it.
+      'Caught error: Failed to load: Result',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught error: Failed to load: Result" />,
+    );
+  });
+
+  // Second condition is redundant but guarantees that the test runs in prod.
+  // @gate enableLegacyCache
+  it('retries on error after falling back to a placeholder', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      reset() {
+        this.setState({error: null});
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={'Caught error: ' + this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const errorBoundary = React.createRef();
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <ErrorBoundary ref={errorBoundary}>
+            <AsyncText text="Result" />
+          </ErrorBoundary>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll([
+      'Suspend! [Result]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Result]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+    await act(() => rejectText('Result', new Error('Failed to load: Result')));
+    assertLog([
+      'Error! [Result]',
+
+      // React retries one more time
+      'Error! [Result]',
+
+      // Errored again on retry. Now handle it.
+      'Caught error: Failed to load: Result',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Caught error: Failed to load: Result" />,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('can update at a higher priority while in a suspended state', async () => {
+    let setHighPri;
+    function HighPri() {
+      const [text, setText] = React.useState('A');
+      setHighPri = setText;
+      return <Text text={text} />;
+    }
+
+    let setLowPri;
+    function LowPri() {
+      const [text, setText] = React.useState('1');
+      setLowPri = setText;
+      return <AsyncText text={text} />;
+    }
+
+    function App() {
+      return (
+        <>
+          <HighPri />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <LowPri />
+          </Suspense>
+        </>
+      );
+    }
+
+    // Initial mount
+    await act(() => ReactNoop.render(<App />));
+    assertLog([
+      'A',
+      'Suspend! [1]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [1]',
+    ]);
+
+    await act(() => resolveText('1'));
+    assertLog(['1']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="1" />
+      </>,
+    );
+
+    // Update the low-pri text
+    await act(() => startTransition(() => setLowPri('2')));
+    // Suspends
+    assertLog(['Suspend! [2]', 'Loading...']);
+
+    // While we're still waiting for the low-pri update to complete, update the
+    // high-pri text at high priority.
+    ReactNoop.flushSync(() => {
+      setHighPri('B');
+    });
+    assertLog(['B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="1" />
+      </>,
+    );
+
+    // Unblock the low-pri text and finish. Nothing in the UI changes because
+    // the update was overriden
+    await act(() => resolveText('2'));
+    assertLog(['2']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="2" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('keeps working on lower priority work after being pinged', async () => {
+    function App(props) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {props.showA && <AsyncText text="A" />}
+          {props.showB && <Text text="B" />}
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<App showA={false} showB={false} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    React.startTransition(() => {
+      ReactNoop.render(<App showA={true} showB={false} />);
+    });
+    await waitForAll(['Suspend! [A]', 'Loading...']);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    React.startTransition(() => {
+      ReactNoop.render(<App showA={true} showB={true} />);
+    });
+    await waitForAll([
+      'Suspend! [A]',
+      // pre-warming
+      'B',
+      // end pre-warming
+      'Loading...',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await resolveText('A');
+    await waitForAll(['A', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => {
+    function App(props) {
+      if (props.hide) {
+        return <Text text="(empty)" />;
+      }
+      return (
+        <Suspense fallback="Loading...">
+          <AsyncText text="Async" />
+        </Suspense>
+      );
+    }
+
+    // Schedule a default pri update and a low pri update, without rendering in between.
+    // Default pri
+    ReactNoop.render(<App />);
+    // Low pri
+    React.startTransition(() => {
+      ReactNoop.render(<App hide={true} />);
+    });
+
+    await waitForAll([
+      // The first update suspends
+      'Suspend! [Async]',
+      // but we have another pending update that we can work on
+      '(empty)',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="(empty)" />);
+  });
+
+  // Note: This test was written to test a heuristic used in the expiration
+  // times model. Might not make sense in the new model.
+  // TODO: This test doesn't over what it was originally designed to test.
+  // Either rewrite or delete.
+  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 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 act(() => {
+      root.render(<App step={0} shouldSuspend={false} />);
+    });
+    await advanceTimers(1000);
+    assertLog(['Sibling', 'Step 0']);
+
+    // Schedule an update at several distinct expiration times
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<App step={1} shouldSuspend={true} />);
+      });
+      Scheduler.unstable_advanceTime(1000);
+      await waitFor(['Sibling']);
+      interrupt();
+
+      React.startTransition(() => {
+        root.render(<App step={2} shouldSuspend={true} />);
+      });
+      Scheduler.unstable_advanceTime(1000);
+      await waitFor(['Sibling']);
+      interrupt();
+
+      React.startTransition(() => {
+        root.render(<App step={3} shouldSuspend={true} />);
+      });
+      Scheduler.unstable_advanceTime(1000);
+      await waitFor(['Sibling']);
+      interrupt();
+
+      root.render(<App step={4} shouldSuspend={false} />);
+    });
+
+    assertLog(['Sibling', 'Step 4']);
+  });
+
+  // @gate enableLegacyCache
+  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);
+
+    ReactNoop.render(
+      <Fragment>
+        <Text text="Sync" />
+        <Suspense fallback={<Text text="Loading outer..." />}>
+          <AsyncText text="Outer content" />
+          <Suspense fallback={<Text text="Loading inner..." />}>
+            <AsyncText text="Inner content" />
+          </Suspense>
+        </Suspense>
+      </Fragment>,
+    );
+
+    await waitForAll([
+      'Sync',
+      // The async content suspends
+      'Suspend! [Outer content]',
+      'Loading outer...',
+      // pre-warming
+      'Suspend! [Outer content]',
+      'Suspend! [Inner content]',
+      'Loading inner...',
+    ]);
+    // The outer loading state finishes immediately.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Loading outer..." />
+      </>,
+    );
+
+    // Resolve the outer promise.
+    await resolveText('Outer content');
+    await waitForAll([
+      'Outer content',
+      'Suspend! [Inner content]',
+      'Loading inner...',
+    ]);
+    // Don't commit the inner placeholder yet.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Loading outer..." />
+      </>,
+    );
+
+    // Expire the inner timeout.
+    ReactNoop.expire(500);
+    await advanceTimers(500);
+    // Now that 750ms have elapsed since the outer placeholder timed out,
+    // we can timeout the inner placeholder.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Outer content" />
+        <span prop="Loading inner..." />
+      </>,
+    );
+
+    // Finally, flush the inner promise. We should see the complete screen.
+    await act(() => resolveText('Inner content'));
+    assertLog(['Inner content']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Sync" />
+        <span prop="Outer content" />
+        <span prop="Inner content" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('renders an Suspense boundary synchronously', async () => {
+    spyOnDev(console, 'error');
+    // Synchronously render a tree that suspends
+    ReactNoop.flushSync(() =>
+      ReactNoop.render(
+        <Fragment>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+          </Suspense>
+          <Text text="Sync" />
+        </Fragment>,
+      ),
+    );
+    assertLog([
+      // The async child suspends
+      'Suspend! [Async]',
+      // We immediately render the fallback UI
+      'Loading...',
+      // Continue on the sibling
+      'Sync',
+    ]);
+    // The tree commits synchronously
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading..." />
+        <span prop="Sync" />
+      </>,
+    );
+
+    // Once the promise resolves, we render the suspended view
+    await act(() => resolveText('Async'));
+    assertLog(['Async']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sync" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('suspending inside an expired expiration boundary will bubble to the next one', async () => {
+    ReactNoop.flushSync(() =>
+      ReactNoop.render(
+        <Fragment>
+          <Suspense fallback={<Text text="Loading (outer)..." />}>
+            <Suspense fallback={<AsyncText text="Loading (inner)..." />}>
+              <AsyncText text="Async" />
+            </Suspense>
+            <Text text="Sync" />
+          </Suspense>
+        </Fragment>,
+      ),
+    );
+    assertLog([
+      'Suspend! [Async]',
+      'Suspend! [Loading (inner)...]',
+      'Loading (outer)...',
+    ]);
+    // The tree commits synchronously
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading (outer)..." />);
+  });
+
+  // @gate enableLegacyCache
+  it('resolves successfully even if fallback render is pending', async () => {
+    const root = ReactNoop.createRoot();
+    root.render(
+      <>
+        <Suspense fallback={<Text text="Loading..." />} />
+      </>,
+    );
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput(null);
+    React.startTransition(() => {
+      root.render(
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+            <Text text="Sibling" />
+          </Suspense>
+        </>,
+      );
+    });
+    await waitFor(['Suspend! [Async]']);
+
+    await resolveText('Async');
+
+    // Because we're already showing a fallback, interrupt the current render
+    // and restart immediately.
+    await waitForAll(['Async', 'Sibling']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sibling" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('in concurrent mode, does not error when an update suspends without a Suspense boundary during a sync update', () => {
+    // NOTE: We may change this to be a warning in the future.
+    expect(() => {
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(<AsyncText text="Async" />);
+      });
+    }).not.toThrow();
+  });
+
+  // @gate enableLegacyCache && !disableLegacyMode
+  it('in legacy mode, errors when an update suspends without a Suspense boundary during a sync update', async () => {
+    const root = ReactNoop.createLegacyRoot();
+    await expect(async () => {
+      await act(() => root.render(<AsyncText text="Async" />));
+    }).rejects.toThrow(
+      'A component suspended while responding to synchronous input.',
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('a Suspense component correctly handles more than one suspended child', async () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <AsyncText text="A" />
+        <AsyncText text="B" />
+      </Suspense>,
+    );
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+    await act(() => {
+      resolveText('A');
+      resolveText('B');
+    });
+    assertLog(['A', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('can resume rendering earlier than a timeout', async () => {
+    ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
+    await waitForAll([]);
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Async" />
+        </Suspense>,
+      );
+    });
+    await waitForAll(['Suspend! [Async]', 'Loading...']);
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    // Resolve the promise
+    await resolveText('Async');
+    // We can now resume rendering
+    await waitForAll(['Async']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Async" />);
+  });
+
+  // @gate enableLegacyCache
+  it('starts working on an update even if its priority falls between two suspended levels', async () => {
+    function App(props) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {props.text === 'C' || props.text === 'S' ? (
+            <Text text={props.text} />
+          ) : (
+            <AsyncText text={props.text} />
+          )}
+        </Suspense>
+      );
+    }
+
+    // First mount without suspending. This ensures we already have content
+    // showing so that subsequent updates will suspend.
+    ReactNoop.render(<App text="S" />);
+    await waitForAll(['S']);
+
+    // Schedule an update, and suspend for up to 5 seconds.
+    React.startTransition(() => ReactNoop.render(<App text="A" />));
+    // The update should suspend.
+    await waitForAll(['Suspend! [A]', 'Loading...']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
+
+    // Advance time until right before it expires.
+    await advanceTimers(4999);
+    ReactNoop.expire(4999);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
+
+    // Schedule another low priority update.
+    React.startTransition(() => ReactNoop.render(<App text="B" />));
+    // This update should also suspend.
+    await waitForAll(['Suspend! [B]', 'Loading...']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
+
+    // Schedule a regular update. Its expiration time will fall between
+    // the expiration times of the previous two updates.
+    ReactNoop.render(<App text="C" />);
+    await waitForAll(['C']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="C" />);
+
+    // Flush the remaining work.
+    await resolveText('A');
+    await resolveText('B');
+    // Nothing else to render.
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="C" />);
+  });
+
+  // @gate enableLegacyCache
+  it('a suspended update that expires', async () => {
+    // Regression test. This test used to fall into an infinite loop.
+    function ExpensiveText({text}) {
+      // This causes the update to expire.
+      Scheduler.unstable_advanceTime(10000);
+      // Then something suspends.
+      return <AsyncText text={text} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <ExpensiveText text="A" />
+          <ExpensiveText text="B" />
+          <ExpensiveText text="C" />
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll([
+      'Suspend! [A]',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Suspend! [C]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    await resolveText('A');
+    await resolveText('B');
+    await resolveText('C');
+
+    await waitForAll(['A', 'B', 'C']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+        <span prop="C" />
+      </>,
+    );
+  });
+
+  describe('legacy mode mode', () => {
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('times out immediately', async () => {
+      function App() {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Result" />
+          </Suspense>
+        );
+      }
+
+      // Times out immediately, ignoring the specified threshold.
+      ReactNoop.renderLegacySyncRoot(<App />);
+      assertLog(['Suspend! [Result]', 'Loading...']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+      await act(() => {
+        resolveText('Result');
+      });
+
+      assertLog(['Result']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Result" />);
+    });
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('times out immediately when Suspense is in legacy mode', async () => {
+      class UpdatingText extends React.Component {
+        state = {step: 1};
+        render() {
+          return <AsyncText text={`Step: ${this.state.step}`} />;
+        }
+      }
+
+      function Spinner() {
+        return (
+          <Fragment>
+            <Text text="Loading (1)" />
+            <Text text="Loading (2)" />
+            <Text text="Loading (3)" />
+          </Fragment>
+        );
+      }
+
+      const text = React.createRef(null);
+      function App() {
+        return (
+          <Suspense fallback={<Spinner />}>
+            <UpdatingText ref={text} />
+            <Text text="Sibling" />
+          </Suspense>
+        );
+      }
+
+      // Initial mount.
+      await seedNextTextCache('Step: 1');
+      ReactNoop.renderLegacySyncRoot(<App />);
+      assertLog(['Step: 1', 'Sibling']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Step: 1" />
+          <span prop="Sibling" />
+        </>,
+      );
+
+      // Update.
+      text.current.setState({step: 2}, () =>
+        Scheduler.log('Update did commit'),
+      );
+
+      expect(ReactNoop.flushNextYield()).toEqual([
+        'Suspend! [Step: 2]',
+        'Loading (1)',
+        'Loading (2)',
+        'Loading (3)',
+        'Update did commit',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="Step: 1" />
+          <span hidden={true} prop="Sibling" />
+          <span prop="Loading (1)" />
+          <span prop="Loading (2)" />
+          <span prop="Loading (3)" />
+        </>,
+      );
+
+      await act(() => {
+        resolveText('Step: 2');
+      });
+      assertLog(['Step: 2']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="Step: 2" />
+          <span prop="Sibling" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('does not re-render siblings in loose mode', async () => {
+      class TextWithLifecycle extends React.Component {
+        componentDidMount() {
+          Scheduler.log(`Mount [${this.props.text}]`);
+        }
+        componentDidUpdate() {
+          Scheduler.log(`Update [${this.props.text}]`);
+        }
+        render() {
+          return <Text {...this.props} />;
+        }
+      }
+
+      class AsyncTextWithLifecycle extends React.Component {
+        componentDidMount() {
+          Scheduler.log(`Mount [${this.props.text}]`);
+        }
+        componentDidUpdate() {
+          Scheduler.log(`Update [${this.props.text}]`);
+        }
+        render() {
+          return <AsyncText {...this.props} />;
+        }
+      }
+
+      function App() {
+        return (
+          <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+            <TextWithLifecycle text="A" />
+            <AsyncTextWithLifecycle text="B" />
+            <TextWithLifecycle text="C" />
+          </Suspense>
+        );
+      }
+
+      ReactNoop.renderLegacySyncRoot(<App />, () =>
+        Scheduler.log('Commit root'),
+      );
+      assertLog([
+        'A',
+        'Suspend! [B]',
+        'C',
+
+        'Loading...',
+        'Mount [A]',
+        'Mount [B]',
+        'Mount [C]',
+        // This should be a mount, not an update.
+        'Mount [Loading...]',
+        'Commit root',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span hidden={true} prop="C" />
+
+          <span prop="Loading..." />
+        </>,
+      );
+
+      await act(() => {
+        resolveText('B');
+      });
+
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="B" />
+          <span prop="C" />
+        </>,
+      );
+    });
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('suspends inside constructor', async () => {
+      class AsyncTextInConstructor extends React.Component {
+        constructor(props) {
+          super(props);
+          const text = props.text;
+          Scheduler.log('constructor');
+          readText(text);
+          this.state = {text};
+        }
+        componentDidMount() {
+          Scheduler.log('componentDidMount');
+        }
+        render() {
+          Scheduler.log(this.state.text);
+          return <span prop={this.state.text} />;
+        }
+      }
+
+      ReactNoop.renderLegacySyncRoot(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncTextInConstructor text="Hi" />
+        </Suspense>,
+      );
+
+      assertLog(['constructor', 'Suspend! [Hi]', 'Loading...']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+      await act(() => {
+        resolveText('Hi');
+      });
+
+      assertLog(['constructor', 'Hi', 'componentDidMount']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Hi" />);
+    });
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    it('does not infinite loop if fallback contains lifecycle method', async () => {
+      class Fallback extends React.Component {
+        state = {
+          name: 'foo',
+        };
+        componentDidMount() {
+          this.setState({
+            name: 'bar',
+          });
+        }
+        render() {
+          return <Text text="Loading..." />;
+        }
+      }
+
+      class Demo extends React.Component {
+        render() {
+          return (
+            <Suspense fallback={<Fallback />}>
+              <AsyncText text="Hi" />
+            </Suspense>
+          );
+        }
+      }
+
+      ReactNoop.renderLegacySyncRoot(<Demo />);
+
+      assertLog([
+        'Suspend! [Hi]',
+        'Loading...',
+        // Re-render due to lifecycle update
+        'Loading...',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+      await act(() => {
+        resolveText('Hi');
+      });
+      assertLog(['Hi']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Hi" />);
+    });
+
+    if (global.__PERSISTENT__) {
+      // @gate enableLegacyCache && !disableLegacyMode
+      it('hides/unhides suspended children before layout effects fire (persistent)', async () => {
+        const {useRef, useLayoutEffect} = React;
+
+        function Parent() {
+          const child = useRef(null);
+
+          useLayoutEffect(() => {
+            Scheduler.log(ReactNoop.getPendingChildrenAsJSX());
+          });
+
+          return (
+            <span ref={child} hidden={false}>
+              <AsyncText text="Hi" />
+            </span>
+          );
+        }
+
+        function App(props) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Parent />
+            </Suspense>
+          );
+        }
+
+        ReactNoop.renderLegacySyncRoot(<App middleText="B" />);
+
+        assertLog([
+          'Suspend! [Hi]',
+          'Loading...',
+          // The child should have already been hidden
+          <>
+            <span hidden={true} />
+            <span prop="Loading..." />
+          </>,
+        ]);
+
+        await act(() => {
+          resolveText('Hi');
+        });
+        assertLog(['Hi']);
+      });
+    } else {
+      // @gate enableLegacyCache && !disableLegacyMode
+      it('hides/unhides suspended children before layout effects fire (mutation)', async () => {
+        const {useRef, useLayoutEffect} = React;
+
+        function Parent() {
+          const child = useRef(null);
+
+          useLayoutEffect(() => {
+            Scheduler.log('Child is hidden: ' + child.current.hidden);
+          });
+
+          return (
+            <span ref={child} hidden={false}>
+              <AsyncText text="Hi" />
+            </span>
+          );
+        }
+
+        function App(props) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Parent />
+            </Suspense>
+          );
+        }
+
+        ReactNoop.renderLegacySyncRoot(<App middleText="B" />);
+
+        assertLog([
+          'Suspend! [Hi]',
+          'Loading...',
+          // The child should have already been hidden
+          'Child is hidden: true',
+        ]);
+
+        await act(() => {
+          resolveText('Hi');
+        });
+
+        assertLog(['Hi']);
+      });
+    }
+
+    // @gate enableLegacyCache && !disableLegacyMode
+    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 text="Async" />
+            </errorInCompletePhase>
+          </Suspense>
+        </ErrorBoundary>,
+      );
+
+      assertLog(['Suspend! [Async]']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        'Caught an error: Error in host config.',
+      );
+    });
+
+    // @gate !disableLegacyMode
+    it('does not drop mounted effects', async () => {
+      const never = {then() {}};
+
+      let setShouldSuspend;
+      function App() {
+        const [shouldSuspend, _setShouldSuspend] = React.useState(0);
+        setShouldSuspend = _setShouldSuspend;
+        return (
+          <Suspense fallback="Loading...">
+            <Child shouldSuspend={shouldSuspend} />
+          </Suspense>
+        );
+      }
+
+      function Child({shouldSuspend}) {
+        if (shouldSuspend) {
+          throw never;
+        }
+
+        React.useEffect(() => {
+          Scheduler.log('Mount');
+          return () => {
+            Scheduler.log('Unmount');
+          };
+        }, []);
+
+        return 'Child';
+      }
+
+      const root = ReactNoop.createLegacyRoot(null);
+      await act(() => {
+        root.render(<App />);
+      });
+      assertLog(['Mount']);
+      expect(root).toMatchRenderedOutput('Child');
+
+      // Suspend the child. This puts it into an inconsistent state.
+      await act(() => {
+        setShouldSuspend(true);
+      });
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      // Unmount everything
+      await act(() => {
+        root.render(null);
+      });
+      assertLog(['Unmount']);
+    });
+  });
+
+  // @gate enableLegacyCache && !disableLegacyMode
+  it('does not call lifecycles of a suspended component', async () => {
+    class TextWithLifecycle extends React.Component {
+      componentDidMount() {
+        Scheduler.log(`Mount [${this.props.text}]`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`Update [${this.props.text}]`);
+      }
+      componentWillUnmount() {
+        Scheduler.log(`Unmount [${this.props.text}]`);
+      }
+      render() {
+        return <Text {...this.props} />;
+      }
+    }
+
+    class AsyncTextWithLifecycle extends React.Component {
+      componentDidMount() {
+        Scheduler.log(`Mount [${this.props.text}]`);
+      }
+      componentDidUpdate() {
+        Scheduler.log(`Update [${this.props.text}]`);
+      }
+      componentWillUnmount() {
+        Scheduler.log(`Unmount [${this.props.text}]`);
+      }
+      render() {
+        const text = this.props.text;
+        readText(text);
+        Scheduler.log(text);
+        return <span prop={text} />;
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+          <TextWithLifecycle text="A" />
+          <AsyncTextWithLifecycle text="B" />
+          <TextWithLifecycle text="C" />
+        </Suspense>
+      );
+    }
+
+    ReactNoop.renderLegacySyncRoot(<App />, () => Scheduler.log('Commit root'));
+    assertLog([
+      'A',
+      'Suspend! [B]',
+      'C',
+      'Loading...',
+
+      'Mount [A]',
+      // B's lifecycle should not fire because it suspended
+      // 'Mount [B]',
+      'Mount [C]',
+      'Mount [Loading...]',
+      'Commit root',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span hidden={true} prop="A" />
+        <span hidden={true} prop="C" />
+        <span prop="Loading..." />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache && !disableLegacyMode
+  it('does not call lifecycles of a suspended component (hooks)', async () => {
+    function TextWithLifecycle(props) {
+      React.useLayoutEffect(() => {
+        Scheduler.log(`Layout Effect [${props.text}]`);
+        return () => {
+          Scheduler.log(`Destroy Layout Effect [${props.text}]`);
+        };
+      }, [props.text]);
+      React.useEffect(() => {
+        Scheduler.log(`Effect [${props.text}]`);
+        return () => {
+          Scheduler.log(`Destroy Effect [${props.text}]`);
+        };
+      }, [props.text]);
+      return <Text {...props} />;
+    }
+
+    function AsyncTextWithLifecycle(props) {
+      React.useLayoutEffect(() => {
+        Scheduler.log(`Layout Effect [${props.text}]`);
+        return () => {
+          Scheduler.log(`Destroy Layout Effect [${props.text}]`);
+        };
+      }, [props.text]);
+      React.useEffect(() => {
+        Scheduler.log(`Effect [${props.text}]`);
+        return () => {
+          Scheduler.log(`Destroy Effect [${props.text}]`);
+        };
+      }, [props.text]);
+      const text = props.text;
+      readText(text);
+      Scheduler.log(text);
+      return <span prop={text} />;
+    }
+
+    function App({text}) {
+      return (
+        <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+          <TextWithLifecycle text="A" />
+          <AsyncTextWithLifecycle text={text} />
+          <TextWithLifecycle text="C" />
+        </Suspense>
+      );
+    }
+
+    ReactNoop.renderLegacySyncRoot(<App text="B" />, () =>
+      Scheduler.log('Commit root'),
+    );
+    assertLog([
+      '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.
+    await waitForAll([
+      '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..." />
+      </>,
+    );
+
+    await act(() => {
+      resolveText('B');
+    });
+
+    assertLog([
+      'B',
+      'Destroy Layout Effect [Loading...]',
+      'Layout Effect [B]',
+      'Destroy Effect [Loading...]',
+      'Effect [B]',
+    ]);
+
+    // Update
+    ReactNoop.renderLegacySyncRoot(<App text="B2" />, () =>
+      Scheduler.log('Commit root'),
+    );
+
+    assertLog([
+      '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.
+    await waitForAll([
+      // B2's effect should not fire because it suspended
+      // 'Effect [B2]',
+      'Effect [Loading...]',
+    ]);
+
+    await act(() => {
+      resolveText('B2');
+    });
+
+    assertLog([
+      'B2',
+      'Destroy Layout Effect [Loading...]',
+      'Destroy Layout Effect [B]',
+      'Layout Effect [B2]',
+      'Destroy Effect [Loading...]',
+      'Destroy Effect [B]',
+      'Effect [B2]',
+    ]);
+  });
+
+  // @gate enableLegacyCache
+  it('does not suspends if a fallback has been shown for a long time', async () => {
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    // Start rendering
+    await waitForAll([
+      'Foo',
+      // A suspends
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+    // Wait a long time.
+    Scheduler.unstable_advanceTime(5000);
+    await advanceTimers(5000);
+
+    // Retry with the new content.
+    await resolveText('A');
+    await waitForAll([
+      'A',
+      // B suspends
+      'Suspend! [B]',
+      'Loading more...',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+
+    // Because we've already been waiting for so long we've exceeded
+    // our threshold and we show the next level immediately.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading more..." />
+      </>,
+    );
+
+    // Flush the last promise completely
+    await act(() => resolveText('B'));
+    // Renders successfully
+    assertLog(['B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('throttles content from appearing if a fallback was shown recently', async () => {
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    // Start rendering
+    await waitForAll([
+      'Foo',
+      // A suspends
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+    await act(async () => {
+      await resolveText('A');
+
+      // Retry with the new content.
+      await waitForAll([
+        'A',
+        // B suspends
+        'Suspend! [B]',
+        'Loading more...',
+      ]);
+      // Because we've already been waiting for so long we can
+      // wait a bit longer. Still nothing...
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+      // Before we commit another Promise resolves.
+      // We're still showing the first loading state.
+      await resolveText('B');
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+      // Restart and render the complete content.
+      await waitForAll(['A', 'B']);
+
+      if (gate(flags => flags.alwaysThrottleRetries)) {
+        // Correct behavior:
+        //
+        // The tree will finish but we won't commit the result yet because the fallback appeared recently.
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+      } else {
+        // Old behavior, gated until this rolls out at Meta:
+        //
+        // TODO: Because this render was the result of a retry, and a fallback
+        // was shown recently, we should suspend and remain on the fallback for
+        // little bit longer. We currently only do this if there's still
+        // remaining fallbacks in the tree, but we should do it for all retries.
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A" />
+            <span prop="B" />
+          </>,
+        );
+      }
+    });
+    assertLog([]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('throttles content from appearing if a fallback was filled in recently', async () => {
+    function Foo() {
+      Scheduler.log('Foo');
+      return (
+        <>
+          <Suspense fallback={<Text text="Loading A..." />}>
+            <AsyncText text="A" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B..." />}>
+            <AsyncText text="B" />
+          </Suspense>
+        </>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    // Start rendering
+    await waitForAll([
+      'Foo',
+      'Suspend! [A]',
+      'Loading A...',
+      'Suspend! [B]',
+      'Loading B...',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Loading A..." />
+        <span prop="Loading B..." />
+      </>,
+    );
+
+    // Resolve only A. B will still be loading.
+    await act(async () => {
+      await resolveText('A');
+
+      // If we didn't advance the time here, A would not commit; it would
+      // be throttled because the fallback would have appeared too recently.
+      Scheduler.unstable_advanceTime(10000);
+      jest.advanceTimersByTime(10000);
+      if (gate(flags => flags.enableYieldingBeforePassive)) {
+        // Passive effects.
+        await waitForPaint([]);
+      }
+      await waitForPaint(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span prop="A" />
+          <span prop="Loading B..." />
+        </>,
+      );
+    });
+
+    // Advance by a small amount of time. For testing purposes, this is meant
+    // to be just under the throttling interval. It's a heurstic, though, so
+    // if we adjust the heuristic we might have to update this test, too.
+    Scheduler.unstable_advanceTime(200);
+    jest.advanceTimersByTime(200);
+
+    // Now resolve B.
+    await act(async () => {
+      await resolveText('B');
+      await waitForPaint(['B']);
+
+      if (gate(flags => flags.alwaysThrottleRetries)) {
+        // B should not commit yet. Even though it's been a long time since its
+        // fallback was shown, it hasn't been long since A appeared. So B's
+        // appearance is throttled to reduce jank.
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A" />
+            <span prop="Loading B..." />
+          </>,
+        );
+
+        // Advance time a little bit more. Now it commits because enough time
+        // has passed.
+        Scheduler.unstable_advanceTime(100);
+        jest.advanceTimersByTime(100);
+        await waitForAll([]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A" />
+            <span prop="B" />
+          </>,
+        );
+      } else {
+        // Old behavior, gated until this rolls out at Meta:
+        //
+        // B appears immediately, without being throttled.
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A" />
+            <span prop="B" />
+          </>,
+        );
+      }
+    });
+  });
+
+  // TODO: flip to "warns" when this is implemented again.
+  // @gate enableLegacyCache
+  it('does not warn when a low priority update suspends inside a high priority update for functional components', async () => {
+    let _setShow;
+    function App() {
+      const [show, setShow] = React.useState(false);
+      _setShow = setShow;
+      return (
+        <Suspense fallback="Loading...">
+          {show && <AsyncText text="A" />}
+        </Suspense>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    // TODO: assertConsoleErrorDev() when the warning is implemented again.
+    await act(() => {
+      ReactNoop.flushSync(() => _setShow(true));
+    });
+  });
+
+  // TODO: flip to "warns" when this is implemented again.
+  // @gate enableLegacyCache
+  it('does not warn 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>
+        );
+      }
+    }
+
+    await act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    // TODO: assertConsoleErrorDev() when the warning is implemented again.
+    await act(() => {
+      ReactNoop.flushSync(() => show());
+    });
+  });
+
+  // @gate enableLegacyCache
+  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>
+        );
+      }
+    }
+
+    await act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+    await act(() => {
+      ReactNoop.flushSync(() => showB());
+    });
+
+    assertLog([
+      'Suspend! [A]',
+      // pre-warming
+      'Suspend! [A]',
+      'Suspend! [B]',
+    ]);
+  });
+
+  // TODO: flip to "warns" when this is implemented again.
+  // @gate enableLegacyCache
+  it(
+    'does not warn 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 act(() => {
+        ReactNoop.render(<App />);
+      });
+
+      // TODO: assertConsoleErrorDev() when the warning is implemented again.
+      await act(() => {
+        ReactNoop.flushSync(() => _setShow(true));
+      });
+    },
+  );
+
+  // @gate enableLegacyCache
+  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 act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    // also make sure lowpriority is okay
+    await act(() => show(true));
+
+    assertLog([
+      'Suspend! [A]',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    await resolveText('A');
+
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+  });
+
+  // @gate enableLegacyCache
+  it('normal priority updates suspending do not warn for functional components', async () => {
+    let _setShow;
+    function App() {
+      const [show, setShow] = React.useState(false);
+      _setShow = setShow;
+      return (
+        <Suspense fallback="Loading...">
+          {show && <AsyncText text="A" />}
+        </Suspense>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    // also make sure lowpriority is okay
+    await act(() => _setShow(true));
+
+    assertLog([
+      'Suspend! [A]',
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    await resolveText('A');
+
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+  });
+
+  // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
+  it('shows the parent fallback if the inner fallback should be avoided', async () => {
+    function Foo({showC}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Initial load..." />}>
+          <Suspense
+            unstable_avoidThisFallback={true}
+            fallback={<Text text="Updating..." />}>
+            <AsyncText text="A" />
+            {showC ? <AsyncText text="C" /> : null}
+          </Suspense>
+          <Text text="B" />
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([
+      'Foo',
+      'Suspend! [A]',
+      'Initial load...',
+      // pre-warming
+      'Suspend! [A]',
+      'B',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="Initial load..." />);
+
+    // Eventually we resolve and show the data.
+    await act(() => resolveText('A'));
+    assertLog(['A', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+
+    // Update to show C
+    ReactNoop.render(<Foo showC={true} />);
+    await waitForAll([
+      'Foo',
+      'A',
+      'Suspend! [C]',
+      'Updating...',
+      'B',
+      // pre-warming
+      'A',
+      'Suspend! [C]',
+    ]);
+    // Flush to skip suspended time.
+    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.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" hidden={true} />
+        <span prop="Updating..." />
+        <span prop="B" />
+      </>,
+    );
+
+    // Later we load the data.
+    await act(() => resolveText('C'));
+    assertLog(['A', 'C']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="C" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('does not show the parent fallback if the inner fallback is not defined', async () => {
+    function Foo({showC}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Initial load..." />}>
+          <Suspense>
+            <AsyncText text="A" />
+            {showC ? <AsyncText text="C" /> : null}
+          </Suspense>
+          <Text text="B" />
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([
+      'Foo',
+      'Suspend! [A]',
+      'B',
+      // null
+      // pre-warming
+      'Suspend! [A]',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+    // Eventually we resolve and show the data.
+    await act(() => resolveText('A'));
+    assertLog(['A']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+
+    // Update to show C
+    ReactNoop.render(<Foo showC={true} />);
+    await waitForAll([
+      'Foo',
+      'A',
+      'Suspend! [C]',
+      // null
+      'B',
+      // pre-warming
+      'A',
+      'Suspend! [C]',
+    ]);
+    // Flush to skip suspended time.
+    Scheduler.unstable_advanceTime(600);
+    await advanceTimers(600);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" hidden={true} />
+        <span prop="B" />
+      </>,
+    );
+
+    // Later we load the data.
+    await act(() => resolveText('C'));
+    assertLog(['A', 'C']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="C" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('favors showing the inner fallback for nested top level avoided fallback', async () => {
+    function Foo({showB}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense
+          unstable_avoidThisFallback={true}
+          fallback={<Text text="Loading A..." />}>
+          <Text text="A" />
+          <Suspense
+            unstable_avoidThisFallback={true}
+            fallback={<Text text="Loading B..." />}>
+            <AsyncText text="B" />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll([
+      'Foo',
+      'A',
+      'Suspend! [B]',
+      'Loading B...',
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+    // Flush to skip suspended time.
+    Scheduler.unstable_advanceTime(600);
+    await advanceTimers(600);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading B..." />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
+  it('keeps showing an avoided parent fallback if it is already showing', async () => {
+    function Foo({showB}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Initial load..." />}>
+          <Suspense
+            unstable_avoidThisFallback={true}
+            fallback={<Text text="Loading A..." />}>
+            <Text text="A" />
+            {showB ? (
+              <Suspense
+                unstable_avoidThisFallback={true}
+                fallback={<Text text="Loading B..." />}>
+                <AsyncText text="B" />
+              </Suspense>
+            ) : null}
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['Foo', 'A']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo showB={true} />);
+    });
+
+    await waitForAll(['Foo', 'A', 'Suspend! [B]', 'Loading B...']);
+
+    // Transitions never fall back.
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+  });
+
+  // @gate enableLegacyCache
+  it('keeps showing an undefined fallback if it is already showing', async () => {
+    function Foo({showB}) {
+      Scheduler.log('Foo');
+      return (
+        <Suspense fallback={<Text text="Initial load..." />}>
+          <Suspense fallback={undefined}>
+            <Text text="A" />
+            {showB ? (
+              <Suspense fallback={undefined}>
+                <AsyncText text="B" />
+              </Suspense>
+            ) : null}
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    await waitForAll(['Foo', 'A']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+    React.startTransition(() => {
+      ReactNoop.render(<Foo showB={true} />);
+    });
+
+    await waitForAll([
+      'Foo',
+      'A',
+      'Suspend! [B]',
+      // Null
+      // pre-warming
+      'Suspend! [B]',
+    ]);
+    // Still suspended.
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+    // Flush to skip suspended time.
+    Scheduler.unstable_advanceTime(600);
+    await advanceTimers(600);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+  });
+
+  describe('startTransition', () => {
+    // @gate enableLegacyCache
+    it('top level render', async () => {
+      function App({page}) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={page} />
+          </Suspense>
+        );
+      }
+
+      // Initial render.
+      React.startTransition(() => ReactNoop.render(<App page="A" />));
+
+      await waitForAll([
+        'Suspend! [A]',
+        'Loading...',
+        // pre-warming
+        'Suspend! [A]',
+      ]);
+      // Only a short time is needed to unsuspend the initial loading state.
+      Scheduler.unstable_advanceTime(400);
+      await advanceTimers(400);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+      // Later we load the data.
+      await act(() => resolveText('A'));
+      assertLog(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Start transition.
+      React.startTransition(() => ReactNoop.render(<App page="B" />));
+
+      await waitForAll(['Suspend! [B]', 'Loading...']);
+      Scheduler.unstable_advanceTime(100000);
+      await advanceTimers(100000);
+      // Even after lots of time has passed, we have still not yet flushed the
+      // loading state.
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+      // Later we load the data.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+    });
+
+    // @gate enableLegacyCache
+    it('hooks', async () => {
+      let transitionToPage;
+      function App() {
+        const [page, setPage] = React.useState('none');
+        transitionToPage = setPage;
+        if (page === 'none') {
+          return null;
+        }
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={page} />
+          </Suspense>
+        );
+      }
+
+      ReactNoop.render(<App />);
+      await waitForAll([]);
+
+      // Initial render.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('A'));
+
+        await waitForAll([
+          'Suspend! [A]',
+          'Loading...',
+          // pre-warming
+          'Suspend! [A]',
+        ]);
+        // Only a short time is needed to unsuspend the initial loading state.
+        Scheduler.unstable_advanceTime(400);
+        await advanceTimers(400);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+      });
+
+      // Later we load the data.
+      await act(() => resolveText('A'));
+      assertLog(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Start transition.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('B'));
+
+        await waitForAll(['Suspend! [B]', 'Loading...']);
+        Scheduler.unstable_advanceTime(100000);
+        await advanceTimers(100000);
+        // Even after lots of time has passed, we have still not yet flushed the
+        // loading state.
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+      });
+      // Later we load the data.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+    });
+
+    // @gate enableLegacyCache
+    it('classes', async () => {
+      let transitionToPage;
+      class App extends React.Component {
+        state = {page: 'none'};
+        render() {
+          transitionToPage = page => this.setState({page});
+          const page = this.state.page;
+          if (page === 'none') {
+            return null;
+          }
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text={page} />
+            </Suspense>
+          );
+        }
+      }
+
+      ReactNoop.render(<App />);
+      await waitForAll([]);
+
+      // Initial render.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('A'));
+
+        await waitForAll([
+          'Suspend! [A]',
+          'Loading...',
+          // pre-warming
+          'Suspend! [A]',
+        ]);
+        // Only a short time is needed to unsuspend the initial loading state.
+        Scheduler.unstable_advanceTime(400);
+        await advanceTimers(400);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+      });
+
+      // Later we load the data.
+      await act(() => resolveText('A'));
+      assertLog(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Start transition.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('B'));
+
+        await waitForAll(['Suspend! [B]', 'Loading...']);
+        Scheduler.unstable_advanceTime(100000);
+        await advanceTimers(100000);
+        // Even after lots of time has passed, we have still not yet flushed the
+        // loading state.
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+      });
+      // Later we load the data.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+    });
+  });
+
+  describe('delays transitions when using React.startTransition', () => {
+    // @gate enableLegacyCache
+    it('top level render', async () => {
+      function App({page}) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={page} />
+          </Suspense>
+        );
+      }
+
+      // Initial render.
+      React.startTransition(() => ReactNoop.render(<App page="A" />));
+
+      await waitForAll([
+        'Suspend! [A]',
+        'Loading...',
+        // pre-warming
+        'Suspend! [A]',
+      ]);
+      // Only a short time is needed to unsuspend the initial loading state.
+      Scheduler.unstable_advanceTime(400);
+      await advanceTimers(400);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+
+      // Later we load the data.
+      await act(() => resolveText('A'));
+      assertLog(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Start transition.
+      React.startTransition(() => ReactNoop.render(<App page="B" />));
+
+      await waitForAll(['Suspend! [B]', 'Loading...']);
+      Scheduler.unstable_advanceTime(2999);
+      await advanceTimers(2999);
+      // Since the timeout is infinite (or effectively infinite),
+      // we have still not yet flushed the loading state.
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Later we load the data.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+      // Start a long (infinite) transition.
+      React.startTransition(() => ReactNoop.render(<App page="C" />));
+      await waitForAll(['Suspend! [C]', 'Loading...']);
+
+      // Even after lots of time has passed, we have still not yet flushed the
+      // loading state.
+      Scheduler.unstable_advanceTime(100000);
+      await advanceTimers(100000);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+    });
+
+    // @gate enableLegacyCache
+    it('hooks', async () => {
+      let transitionToPage;
+      function App() {
+        const [page, setPage] = React.useState('none');
+        transitionToPage = setPage;
+        if (page === 'none') {
+          return null;
+        }
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={page} />
+          </Suspense>
+        );
+      }
+
+      ReactNoop.render(<App />);
+      await waitForAll([]);
+
+      // Initial render.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('A'));
+
+        await waitForAll([
+          'Suspend! [A]',
+          'Loading...',
+          // pre-warming
+          'Suspend! [A]',
+        ]);
+        // Only a short time is needed to unsuspend the initial loading state.
+        Scheduler.unstable_advanceTime(400);
+        await advanceTimers(400);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+      });
+
+      // Later we load the data.
+      await act(() => resolveText('A'));
+      assertLog(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Start transition.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('B'));
+
+        await waitForAll(['Suspend! [B]', 'Loading...']);
+
+        Scheduler.unstable_advanceTime(2999);
+        await advanceTimers(2999);
+        // Since the timeout is infinite (or effectively infinite),
+        // we have still not yet flushed the loading state.
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+      });
+
+      // Later we load the data.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+      // Start a long (infinite) transition.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('C'));
+
+        await waitForAll(['Suspend! [C]', 'Loading...']);
+
+        // Even after lots of time has passed, we have still not yet flushed the
+        // loading state.
+        Scheduler.unstable_advanceTime(100000);
+        await advanceTimers(100000);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+      });
+    });
+
+    // @gate enableLegacyCache
+    it('classes', async () => {
+      let transitionToPage;
+      class App extends React.Component {
+        state = {page: 'none'};
+        render() {
+          transitionToPage = page => this.setState({page});
+          const page = this.state.page;
+          if (page === 'none') {
+            return null;
+          }
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text={page} />
+            </Suspense>
+          );
+        }
+      }
+
+      ReactNoop.render(<App />);
+      await waitForAll([]);
+
+      // Initial render.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('A'));
+
+        await waitForAll([
+          'Suspend! [A]',
+          'Loading...',
+          // pre-warming
+          'Suspend! [A]',
+        ]);
+        // Only a short time is needed to unsuspend the initial loading state.
+        Scheduler.unstable_advanceTime(400);
+        await advanceTimers(400);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
+      });
+
+      // Later we load the data.
+      await act(() => resolveText('A'));
+      assertLog(['A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+
+      // Start transition.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('B'));
+
+        await waitForAll(['Suspend! [B]', 'Loading...']);
+        Scheduler.unstable_advanceTime(2999);
+        await advanceTimers(2999);
+        // Since the timeout is infinite (or effectively infinite),
+        // we have still not yet flushed the loading state.
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
+      });
+
+      // Later we load the data.
+      await act(() => resolveText('B'));
+      assertLog(['B']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+
+      // Start a long (infinite) transition.
+      await act(async () => {
+        React.startTransition(() => transitionToPage('C'));
+
+        await waitForAll(['Suspend! [C]', 'Loading...']);
+
+        // Even after lots of time has passed, we have still not yet flushed the
+        // loading state.
+        Scheduler.unstable_advanceTime(100000);
+        await advanceTimers(100000);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop="B" />);
+      });
+    });
+  });
+
+  // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
+  it('do not show placeholder when updating an avoided boundary with startTransition', async () => {
+    function App({page}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="Hi!" />
+          <Suspense
+            fallback={<Text text={'Loading ' + page + '...'} />}
+            unstable_avoidThisFallback={true}>
+            <AsyncText text={page} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    // Initial render.
+    ReactNoop.render(<App page="A" />);
+    await waitForAll([
+      'Hi!',
+      'Suspend! [A]',
+      'Loading...',
+      // pre-warming
+      'Hi!',
+      'Suspend! [A]',
+    ]);
+    await act(() => resolveText('A'));
+    assertLog(['Hi!', 'A']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
+
+    // Start transition.
+    React.startTransition(() => ReactNoop.render(<App page="B" />));
+
+    await waitForAll(['Hi!', 'Suspend! [B]', 'Loading B...']);
+
+    // Suspended
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
+    Scheduler.unstable_advanceTime(1800);
+    await advanceTimers(1800);
+    await waitForAll([]);
+    // We should still be suspended here because this loading state should be avoided.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
+    await resolveText('B');
+    await waitForAll(['Hi!', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
+  it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {
+    function App({page}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="Hi!" />
+          {page === 'A' ? (
+            <Text text="A" />
+          ) : (
+            <Suspense
+              fallback={<Text text={'Loading ' + page + '...'} />}
+              unstable_avoidThisFallback={true}>
+              <AsyncText text={page} />
+            </Suspense>
+          )}
+        </Suspense>
+      );
+    }
+
+    // Initial render.
+    ReactNoop.render(<App page="A" />);
+    await waitForAll(['Hi!', 'A']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
+
+    // Start transition.
+    React.startTransition(() => ReactNoop.render(<App page="B" />));
+
+    await waitForAll(['Hi!', 'Suspend! [B]', 'Loading B...']);
+
+    // Suspended
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
+    Scheduler.unstable_advanceTime(1800);
+    await advanceTimers(1800);
+    await waitForAll([]);
+    // We should still be suspended here because this loading state should be avoided.
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="A" />
+      </>,
+    );
+    await resolveText('B');
+    await waitForAll(['Hi!', 'B']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Hi!" />
+        <span prop="B" />
+      </>,
+    );
+  });
+
+  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.log('Suspend!');
+          throw thenable;
+        }
+
+        return <Text text="Foo" />;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog(['Foo']);
+
+    await 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.
+      await waitFor(['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});
+    });
+
+    assertLog([
+      // First setState
+      'Foo',
+    ]);
+    expect(root).toMatchRenderedOutput(<span prop="Foo" />);
+  });
+
+  // @gate enableLegacyCache && enableLegacyHidden
+  it('should not render hidden content while suspended on higher pri', async () => {
+    function Offscreen() {
+      Scheduler.log('Offscreen');
+      return 'Offscreen';
+    }
+    function App({showContent}) {
+      React.useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <>
+          <LegacyHiddenDiv mode="hidden">
+            <Offscreen />
+          </LegacyHiddenDiv>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {showContent ? <AsyncText text="A" /> : null}
+          </Suspense>
+        </>
+      );
+    }
+
+    // Initial render.
+    ReactNoop.render(<App showContent={false} />);
+    await waitFor(['Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
+
+    // Start transition.
+    React.startTransition(() => {
+      ReactNoop.render(<App showContent={true} />);
+    });
+
+    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await resolveText('A');
+    await waitFor(['A', 'Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true} />
+        <span prop="A" />
+      </>,
+    );
+    await waitForAll(['Offscreen']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true}>Offscreen</div>
+        <span prop="A" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache && enableLegacyHidden
+  it('should be able to unblock higher pri content before suspended hidden', async () => {
+    function Offscreen() {
+      Scheduler.log('Offscreen');
+      return 'Offscreen';
+    }
+    function App({showContent}) {
+      React.useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LegacyHiddenDiv mode="hidden">
+            <AsyncText text="A" />
+            <Offscreen />
+          </LegacyHiddenDiv>
+          {showContent ? <AsyncText text="A" /> : null}
+        </Suspense>
+      );
+    }
+
+    // Initial render.
+    ReactNoop.render(<App showContent={false} />);
+    await waitFor(['Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
+
+    // Partially render through the hidden content.
+    await waitFor(['Suspend! [A]']);
+
+    // Start transition.
+    React.startTransition(() => {
+      ReactNoop.render(<App showContent={true} />);
+    });
+
+    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await resolveText('A');
+    await waitFor(['A', 'Commit']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true} />
+        <span prop="A" />
+      </>,
+    );
+    await waitForAll(['A', 'Offscreen']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <div hidden={true}>
+          <span prop="A" />
+          Offscreen
+        </div>
+        <span prop="A" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it(
+    'multiple updates originating inside a Suspense boundary at different ' +
+      'priority levels are not dropped',
+    async () => {
+      const {useState} = React;
+      const root = ReactNoop.createRoot();
+
+      function Parent() {
+        return (
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Child />
+            </Suspense>
+          </>
+        );
+      }
+
+      let setText;
+      function Child() {
+        const [text, _setText] = useState('A');
+        setText = _setText;
+        return <AsyncText text={text} />;
+      }
+
+      await seedNextTextCache('A');
+      await act(() => {
+        root.render(<Parent />);
+      });
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<span prop="A" />);
+
+      await act(async () => {
+        // Schedule two updates that originate inside the Suspense boundary.
+        // The first one causes the boundary to suspend. The second one is at
+        // lower priority and unsuspends the tree.
+        ReactNoop.discreteUpdates(() => {
+          setText('B');
+        });
+        startTransition(() => {
+          setText('C');
+        });
+        // Assert that neither update has happened yet. Both the high pri and
+        // low pri updates are in the queue.
+        assertLog([]);
+
+        // Resolve this before starting to render so that C doesn't suspend.
+        await resolveText('C');
+      });
+      assertLog([
+        // First we attempt the high pri update. It suspends.
+        'Suspend! [B]',
+        'Loading...',
+        // Then we attempt the low pri update, which finishes successfully.
+        'C',
+      ]);
+      expect(root).toMatchRenderedOutput(<span prop="C" />);
+    },
+  );
+
+  // @gate enableLegacyCache
+  it(
+    'fallback component can update itself even after a high pri update to ' +
+      'the primary tree suspends',
+    async () => {
+      const {useState} = React;
+      const root = ReactNoop.createRoot();
+
+      let setAppText;
+      function App() {
+        const [text, _setText] = useState('A');
+        setAppText = _setText;
+        return (
+          <>
+            <Suspense fallback={<Fallback />}>
+              <AsyncText text={text} />
+            </Suspense>
+          </>
+        );
+      }
+
+      let setFallbackText;
+      function Fallback() {
+        const [text, _setText] = useState('Loading...');
+        setFallbackText = _setText;
+        return <Text text={text} />;
+      }
+
+      // Resolve the initial tree
+      await seedNextTextCache('A');
+      await act(() => {
+        root.render(<App />);
+      });
+      assertLog(['A']);
+      expect(root).toMatchRenderedOutput(<span prop="A" />);
+
+      await act(async () => {
+        // Schedule an update inside the Suspense boundary that suspends.
+        setAppText('B');
+        await waitForAll([
+          'Suspend! [B]',
+          'Loading...',
+          // pre-warming
+          'Suspend! [B]',
+        ]);
+      });
+
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Loading..." />
+        </>,
+      );
+
+      // Schedule a default pri update on the boundary, and a lower pri update
+      // on the fallback. We're testing to make sure the fallback can still
+      // update even though the primary tree is suspended.
+      await act(() => {
+        setAppText('C');
+        React.startTransition(() => {
+          setFallbackText('Still loading...');
+        });
+      });
+
+      assertLog([
+        // First try to render the high pri update. Still suspended.
+        'Suspend! [C]',
+        'Loading...',
+
+        // In the expiration times model, once the high pri update suspends,
+        // we can't be sure if there's additional work at a lower priority
+        // that might unblock the tree. We do know that there's a lower
+        // priority update *somewhere* in the entire root, though (the update
+        // to the fallback). So we try rendering one more time, just in case.
+        // TODO: We shouldn't need to do this with lanes, because we always
+        // know exactly which lanes have pending work in each tree.
+        'Suspend! [C]',
+
+        // Then complete the update to the fallback.
+        'Still loading...',
+        'Suspend! [C]',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Still loading..." />
+        </>,
+      );
+    },
+  );
+
+  // @gate enableLegacyCache
+  it(
+    'regression: primary fragment fiber is not always part of setState ' +
+      'return path',
+    async () => {
+      // Reproduces a bug where updates inside a suspended tree are dropped
+      // because the fragment fiber we insert to wrap the hidden children is not
+      // part of the return path, so it doesn't get marked during setState.
+      const {useState} = React;
+      const root = ReactNoop.createRoot();
+
+      function Parent() {
+        return (
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Child />
+            </Suspense>
+          </>
+        );
+      }
+
+      let setText;
+      function Child() {
+        const [text, _setText] = useState('A');
+        setText = _setText;
+        return <AsyncText text={text} />;
+      }
+
+      // Mount an initial tree. Resolve A so that it doesn't suspend.
+      await seedNextTextCache('A');
+      await act(() => {
+        root.render(<Parent />);
+      });
+      assertLog(['A']);
+      // At this point, the setState return path follows current fiber.
+      expect(root).toMatchRenderedOutput(<span prop="A" />);
+
+      // Schedule another update. This will "flip" the alternate pairs.
+      await resolveText('B');
+      await act(() => {
+        setText('B');
+      });
+      assertLog(['B']);
+      // Now the setState return path follows the *alternate* fiber.
+      expect(root).toMatchRenderedOutput(<span prop="B" />);
+
+      // Schedule another update. This time, we'll suspend.
+      await act(() => {
+        setText('C');
+      });
+      assertLog(['Suspend! [C]', 'Loading...', 'Suspend! [C]']);
+
+      // Commit. This will insert a fragment fiber to wrap around the component
+      // that triggered the update.
+      await act(async () => {
+        await advanceTimers(250);
+      });
+      // The fragment fiber is part of the current tree, but the setState return
+      // path still follows the alternate path. That means the fragment fiber is
+      // not part of the return path.
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="B" />
+          <span prop="Loading..." />
+        </>,
+      );
+
+      // Update again. This should unsuspend the tree.
+      await resolveText('D');
+      await act(() => {
+        setText('D');
+      });
+      // Even though the fragment fiber is not part of the return path, we should
+      // be able to finish rendering.
+      assertLog(['D']);
+      expect(root).toMatchRenderedOutput(<span prop="D" />);
+    },
+  );
+
+  // @gate enableLegacyCache
+  it(
+    'regression: primary fragment fiber is not always part of setState ' +
+      'return path (another case)',
+    async () => {
+      // Reproduces a bug where updates inside a suspended tree are dropped
+      // because the fragment fiber we insert to wrap the hidden children is not
+      // part of the return path, so it doesn't get marked during setState.
+      const {useState} = React;
+      const root = ReactNoop.createRoot();
+
+      function Parent() {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Child />
+          </Suspense>
+        );
+      }
+
+      let setText;
+      function Child() {
+        const [text, _setText] = useState('A');
+        setText = _setText;
+        return <AsyncText text={text} />;
+      }
+
+      // Mount an initial tree. Resolve A so that it doesn't suspend.
+      await seedNextTextCache('A');
+      await act(() => {
+        root.render(<Parent />);
+      });
+      assertLog(['A']);
+      // At this point, the setState return path follows current fiber.
+      expect(root).toMatchRenderedOutput(<span prop="A" />);
+
+      // Schedule another update. This will "flip" the alternate pairs.
+      await resolveText('B');
+      await act(() => {
+        setText('B');
+      });
+      assertLog(['B']);
+      // Now the setState return path follows the *alternate* fiber.
+      expect(root).toMatchRenderedOutput(<span prop="B" />);
+
+      // Schedule another update. This time, we'll suspend.
+      await act(() => {
+        setText('C');
+      });
+      assertLog([
+        'Suspend! [C]',
+        'Loading...',
+        // pre-warming
+        'Suspend! [C]',
+      ]);
+
+      // Commit. This will insert a fragment fiber to wrap around the component
+      // that triggered the update.
+      await act(async () => {
+        await advanceTimers(250);
+      });
+      // The fragment fiber is part of the current tree, but the setState return
+      // path still follows the alternate path. That means the fragment fiber is
+      // not part of the return path.
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="B" />
+          <span prop="Loading..." />
+        </>,
+      );
+
+      await act(async () => {
+        // Schedule a normal pri update. This will suspend again.
+        setText('D');
+
+        // And another update at lower priority. This will unblock.
+        await resolveText('E');
+        ReactNoop.idleUpdates(() => {
+          setText('E');
+        });
+      });
+      // Even though the fragment fiber is not part of the return path, we should
+      // be able to finish rendering.
+      assertLog([
+        'Suspend! [D]',
+        // pre-warming
+        'Suspend! [D]',
+        // end pre-warming
+        'E',
+      ]);
+      expect(root).toMatchRenderedOutput(<span prop="E" />);
+    },
+  );
+
+  // @gate enableLegacyCache
+  it(
+    'after showing fallback, should not flip back to primary content until ' +
+      'the update that suspended finishes',
+    async () => {
+      const {useState, useEffect} = React;
+      const root = ReactNoop.createRoot();
+
+      let setOuterText;
+      function Parent({step}) {
+        const [text, _setText] = useState('A');
+        setOuterText = _setText;
+        return (
+          <>
+            <Text text={'Outer text: ' + text} />
+            <Text text={'Outer step: ' + step} />
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Child step={step} outerText={text} />
+            </Suspense>
+          </>
+        );
+      }
+
+      let setInnerText;
+      function Child({step, outerText}) {
+        const [text, _setText] = useState('A');
+        setInnerText = _setText;
+
+        // This will log if the component commits in an inconsistent state
+        useEffect(() => {
+          if (text === outerText) {
+            Scheduler.log('Commit Child');
+          } else {
+            Scheduler.log('FIXME: Texts are inconsistent (tearing)');
+          }
+        }, [text, outerText]);
+
+        return (
+          <>
+            <AsyncText text={'Inner text: ' + text} />
+            <Text text={'Inner step: ' + step} />
+          </>
+        );
+      }
+
+      // These always update simultaneously. They must be consistent.
+      function setText(text) {
+        setOuterText(text);
+        setInnerText(text);
+      }
+
+      // Mount an initial tree. Resolve A so that it doesn't suspend.
+      await seedNextTextCache('Inner text: A');
+      await act(() => {
+        root.render(<Parent step={0} />);
+      });
+      assertLog([
+        'Outer text: A',
+        'Outer step: 0',
+        'Inner text: A',
+        'Inner step: 0',
+        'Commit Child',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer text: A" />
+          <span prop="Outer step: 0" />
+          <span prop="Inner text: A" />
+          <span prop="Inner step: 0" />
+        </>,
+      );
+
+      // Update. This causes the inner component to suspend.
+      await act(() => {
+        setText('B');
+      });
+      assertLog([
+        'Outer text: B',
+        'Outer step: 0',
+        'Suspend! [Inner text: B]',
+        'Loading...',
+        // pre-warming
+        'Suspend! [Inner text: B]',
+        'Inner step: 0',
+      ]);
+      // Commit the placeholder
+      await advanceTimers(250);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer text: B" />
+          <span prop="Outer step: 0" />
+          <span hidden={true} prop="Inner text: A" />
+          <span hidden={true} prop="Inner step: 0" />
+          <span prop="Loading..." />
+        </>,
+      );
+
+      // Schedule a high pri update on the parent.
+      await act(() => {
+        ReactNoop.discreteUpdates(() => {
+          root.render(<Parent step={1} />);
+        });
+      });
+
+      // Only the outer part can update. The inner part should still show a
+      // fallback because we haven't finished loading B yet. Otherwise, the
+      // inner text would be inconsistent with the outer text.
+      assertLog([
+        'Outer text: B',
+        'Outer step: 1',
+        'Suspend! [Inner text: B]',
+        'Loading...',
+        // pre-warming
+        'Suspend! [Inner text: B]',
+        'Inner step: 1',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer text: B" />
+          <span prop="Outer step: 1" />
+          <span hidden={true} prop="Inner text: A" />
+          <span hidden={true} prop="Inner step: 0" />
+          <span prop="Loading..." />
+        </>,
+      );
+
+      // Now finish resolving the inner text
+      await act(async () => {
+        await resolveText('Inner text: B');
+      });
+      assertLog(['Inner text: B', 'Inner step: 1', 'Commit Child']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer text: B" />
+          <span prop="Outer step: 1" />
+          <span prop="Inner text: B" />
+          <span prop="Inner step: 1" />
+        </>,
+      );
+    },
+  );
+
+  // @gate enableLegacyCache
+  it('a high pri update can unhide a boundary that suspended at a different level', async () => {
+    const {useState, useEffect} = React;
+    const root = ReactNoop.createRoot();
+
+    let setOuterText;
+    function Parent({step}) {
+      const [text, _setText] = useState('A');
+      setOuterText = _setText;
+      return (
+        <>
+          <Text text={'Outer: ' + text + step} />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Child step={step} outerText={text} />
+          </Suspense>
+        </>
+      );
+    }
+
+    let setInnerText;
+    function Child({step, outerText}) {
+      const [text, _setText] = useState('A');
+      setInnerText = _setText;
+
+      // This will log if the component commits in an inconsistent state
+      useEffect(() => {
+        if (text === outerText) {
+          Scheduler.log('Commit Child');
+        } else {
+          Scheduler.log('FIXME: Texts are inconsistent (tearing)');
+        }
+      }, [text, outerText]);
+
+      return (
+        <>
+          <AsyncText text={'Inner: ' + text + step} />
+        </>
+      );
+    }
+
+    // These always update simultaneously. They must be consistent.
+    function setText(text) {
+      setOuterText(text);
+      setInnerText(text);
+    }
+
+    // Mount an initial tree. Resolve A so that it doesn't suspend.
+    await seedNextTextCache('Inner: A0');
+    await act(() => {
+      root.render(<Parent step={0} />);
+    });
+    assertLog(['Outer: A0', 'Inner: A0', 'Commit Child']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: A0" />
+        <span prop="Inner: A0" />
+      </>,
+    );
+
+    // Update. This causes the inner component to suspend.
+    await act(() => {
+      setText('B');
+    });
+    assertLog([
+      'Outer: B0',
+      'Suspend! [Inner: B0]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Inner: B0]',
+    ]);
+    // Commit the placeholder
+    await advanceTimers(250);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: B0" />
+        <span hidden={true} prop="Inner: A0" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    // Schedule a high pri update on the parent. This will unblock the content.
+    await resolveText('Inner: B1');
+    await act(() => {
+      ReactNoop.discreteUpdates(() => {
+        root.render(<Parent step={1} />);
+      });
+    });
+
+    assertLog(['Outer: B1', 'Inner: B1', 'Commit Child']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: B1" />
+        <span prop="Inner: B1" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('regression: ping at high priority causes update to be dropped', async () => {
+    const {useState, useTransition} = React;
+
+    let setTextA;
+    function A() {
+      const [textA, _setTextA] = useState('A');
+      setTextA = _setTextA;
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text={textA} />
+        </Suspense>
+      );
+    }
+
+    let setTextB;
+    let startTransitionFromB;
+    function B() {
+      const [textB, _setTextB] = useState('B');
+      // eslint-disable-next-line no-unused-vars
+      const [_, _startTransition] = useTransition();
+      startTransitionFromB = _startTransition;
+      setTextB = _setTextB;
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text={textB} />
+        </Suspense>
+      );
+    }
+
+    function App() {
+      return (
+        <>
+          <A />
+          <B />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      await seedNextTextCache('A');
+      await seedNextTextCache('B');
+      root.render(<App />);
+    });
+    assertLog(['A', 'B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="B" />
+      </>,
+    );
+
+    await act(async () => {
+      // Triggers suspense at normal pri
+      setTextA('A1');
+      // Triggers in an unrelated tree at a different pri
+      startTransitionFromB(() => {
+        // Update A again so that it doesn't suspend on A1. That way we can ping
+        // the A1 update without also pinging this one. This is a workaround
+        // because there's currently no way to render at a lower priority (B2)
+        // without including all updates at higher priority (A1).
+        setTextA('A2');
+        setTextB('B2');
+      });
+
+      await waitFor([
+        'Suspend! [A1]',
+        'Loading...',
+        'B',
+        'Suspend! [A2]',
+        'Loading...',
+        'Suspend! [B2]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Loading..." />
+          <span prop="B" />
+        </>,
+      );
+
+      await resolveText('A1');
+      await waitFor(['A1']);
+    });
+    assertLog(['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A1" />
+        <span prop="B" />
+      </>,
+    );
+
+    await act(async () => {
+      await resolveText('A2');
+      await resolveText('B2');
+    });
+    assertLog(['A2', 'B2']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A2" />
+        <span prop="B2" />
+      </>,
+    );
+  });
+
+  // Regression: https://github.com/facebook/react/issues/18486
+  // @gate enableLegacyCache
+  it('does not get stuck in pending state with render phase updates', async () => {
+    let setTextWithShortTransition;
+    let setTextWithLongTransition;
+
+    function App() {
+      const [isPending1, startShortTransition] = React.useTransition();
+      const [isPending2, startLongTransition] = React.useTransition();
+      const isPending = isPending1 || isPending2;
+      const [text, setText] = React.useState('');
+      const [mirror, setMirror] = React.useState('');
+
+      if (text !== mirror) {
+        // Render phase update was needed to repro the bug.
+        setMirror(text);
+      }
+
+      setTextWithShortTransition = value => {
+        startShortTransition(() => {
+          setText(value);
+        });
+      };
+      setTextWithLongTransition = value => {
+        startLongTransition(() => {
+          setText(value);
+        });
+      };
+
+      return (
+        <>
+          {isPending ? <Text text="Pending..." /> : null}
+          {text !== '' ? <AsyncText text={text} /> : <Text text={text} />}
+        </>
+      );
+    }
+
+    function Root() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <App />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Root />);
+    });
+    assertLog(['']);
+    expect(root).toMatchRenderedOutput(<span prop="" />);
+
+    // Update to "a". That will suspend.
+    await act(async () => {
+      setTextWithShortTransition('a');
+      await waitForAll(['Pending...', '', 'Suspend! [a]', 'Loading...']);
+    });
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Pending..." />
+        <span prop="" />
+      </>,
+    );
+
+    // Update to "b". That will suspend, too.
+    await act(async () => {
+      setTextWithLongTransition('b');
+      await waitForAll([
+        // Neither is resolved yet.
+        'Pending...',
+        '',
+        'Suspend! [b]',
+        'Loading...',
+      ]);
+    });
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Pending..." />
+        <span prop="" />
+      </>,
+    );
+
+    // Resolve "a". But "b" is still pending.
+    await act(async () => {
+      await resolveText('a');
+
+      await waitForAll(['Suspend! [b]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Pending..." />
+          <span prop="" />
+        </>,
+      );
+
+      // Resolve "b". This should remove the pending state.
+      await act(async () => {
+        await resolveText('b');
+      });
+      assertLog(['b']);
+      // The bug was that the pending state got stuck forever.
+      expect(root).toMatchRenderedOutput(<span prop="b" />);
+    });
+  });
+
+  // @gate enableLegacyCache
+  it('retries have lower priority than normal updates', async () => {
+    const {useState} = React;
+
+    let setText;
+    function UpdatingText() {
+      const [text, _setText] = useState('A');
+      setText = _setText;
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <>
+          <UpdatingText />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+          </Suspense>
+        </>,
+      );
+    });
+    assertLog([
+      'A',
+      'Suspend! [Async]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Async]',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    await act(async () => {
+      // Resolve the promise. This will trigger a retry.
+      await resolveText('Async');
+      // Before the retry happens, schedule a new update.
+      setText('B');
+
+      // The update should be allowed to finish before the retry is attempted.
+      await waitForPaint(['B']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="B" />
+          <span prop="Loading..." />
+        </>,
+      );
+    });
+    // Then do the retry.
+    assertLog(['Async']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="Async" />
+      </>,
+    );
+  });
+
+  // @gate enableLegacyCache
+  it('should fire effect clean-up when deleting suspended tree', async () => {
+    const {useEffect} = React;
+
+    function App({show}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Child />
+          {show && <AsyncText text="Async" />}
+        </Suspense>
+      );
+    }
+
+    function Child() {
+      useEffect(() => {
+        Scheduler.log('Mount Child');
+        return () => {
+          Scheduler.log('Unmount Child');
+        };
+      }, []);
+      return <span prop="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['Mount Child']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    await act(() => {
+      root.render(<App show={true} />);
+    });
+    assertLog([
+      'Suspend! [Async]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Async]',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span hidden={true} prop="Child" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount Child']);
+  });
+
+  // @gate enableLegacyCache && !disableLegacyMode
+  it('should fire effect clean-up when deleting suspended tree (legacy)', async () => {
+    const {useEffect} = React;
+
+    function App({show}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Child />
+          {show && <AsyncText text="Async" />}
+        </Suspense>
+      );
+    }
+
+    function Child() {
+      useEffect(() => {
+        Scheduler.log('Mount Child');
+        return () => {
+          Scheduler.log('Unmount Child');
+        };
+      }, []);
+      return <span prop="Child" />;
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+    assertLog(['Mount Child']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    await act(() => {
+      root.render(<App show={true} />);
+    });
+    assertLog(['Suspend! [Async]', 'Loading...']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span hidden={true} prop="Child" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    await act(() => {
+      root.render(null);
+    });
+    assertLog(['Unmount Child']);
+  });
+
+  // @gate enableLegacyCache
+  it(
+    'regression test: pinging synchronously within the render phase ' +
+      'does not unwind the stack',
+    async () => {
+      // This is a regression test that reproduces a very specific scenario that
+      // used to cause a crash.
+      const thenable = {
+        then(resolve) {
+          resolve('B');
+        },
+        status: 'pending',
+      };
+
+      function ImmediatelyPings() {
+        if (thenable.status === 'pending') {
+          thenable.status = 'fulfilled';
+          throw thenable;
+        }
+        return <Text text="B" />;
+      }
+
+      function App({showMore}) {
+        return (
+          <div>
+            <Suspense fallback={<Text text="Loading A..." />}>
+              {showMore ? (
+                <>
+                  <AsyncText text="A" />
+                </>
+              ) : null}
+            </Suspense>
+            {showMore ? (
+              <Suspense fallback={<Text text="Loading B..." />}>
+                <ImmediatelyPings />
+              </Suspense>
+            ) : null}
+          </div>
+        );
+      }
+
+      // Initial render. This mounts a Suspense boundary, so that in the next
+      // update we can trigger a "suspend with delay" scenario.
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App showMore={false} />);
+      });
+      assertLog([]);
+      expect(root).toMatchRenderedOutput(<div />);
+
+      // Update. This will cause two separate trees to suspend. The first tree
+      // will be inside an already mounted Suspense boundary, so it will trigger
+      // a "suspend with delay". The second tree will be a new Suspense
+      // boundary, but the thenable that is thrown will immediately call its
+      // ping listener.
+      //
+      // Before the bug was fixed, this would lead to a `prepareFreshStack` call
+      // that unwinds the work-in-progress stack. When that code was written, it
+      // was expected that pings always happen from an asynchronous task (or
+      // microtask). But this test shows an example where that's not the case.
+      //
+      // The fix was to check if we're in the render phase before calling
+      // `prepareFreshStack`.
+      await act(() => {
+        startTransition(() => root.render(<App showMore={true} />));
+      });
+      assertLog(['Suspend! [A]', 'Loading A...', 'Loading B...']);
+      expect(root).toMatchRenderedOutput(<div />);
+    },
+  );
+
+  // @gate enableLegacyCache && enableRetryLaneExpiration
+  it('recurring updates in siblings should not block expensive content in suspense boundary from committing', async () => {
+    const {useState} = React;
+
+    let setText;
+    function UpdatingText() {
+      const [text, _setText] = useState('1');
+      setText = _setText;
+      return <Text text={text} />;
+    }
+
+    function ExpensiveText({text, ms}) {
+      Scheduler.log(text);
+      Scheduler.unstable_advanceTime(ms);
+      return <span prop={text} />;
+    }
+
+    function App() {
+      return (
+        <>
+          <UpdatingText />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+            <ExpensiveText text="A" ms={1000} />
+            <ExpensiveText text="B" ms={3999} />
+            <ExpensiveText text="C" ms={100000} />
+          </Suspense>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    await waitForAll([
+      '1',
+      'Suspend! [Async]',
+      'Loading...',
+      // pre-warming
+      'Suspend! [Async]',
+      'A',
+      'B',
+      'C',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="1" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    await resolveText('Async');
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="1" />
+        <span prop="Loading..." />
+      </>,
+    );
+
+    await waitFor(['Async', 'A', 'B']);
+    ReactNoop.expire(100000);
+    await advanceTimers(100000);
+    setText('2');
+    await waitForPaint(['2']);
+
+    await waitForMicrotasks();
+    Scheduler.unstable_flushNumberOfYields(1);
+    assertLog(['Async', 'A', 'B', 'C']);
+
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="2" />
+        <span prop="Async" />
+        <span prop="A" />
+        <span prop="B" />
+        <span prop="C" />
+      </>,
+    );
+  });
+
+  it('can rerender after resolving a promise', async () => {
+    const promise = Promise.resolve(null);
+    const root = ReactNoop.createRoot();
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<Suspense>{promise}</Suspense>);
+      });
+    });
+
+    assertLog([]);
+    expect(root).toMatchRenderedOutput(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense>
+            <div />
+          </Suspense>,
+        );
+      });
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseyCommitPhase-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseyCommitPhase-test.js
new file mode 100644
index 00000000000..4c100310855
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseyCommitPhase-test.js
@@ -0,0 +1,549 @@
+let React;
+let startTransition;
+let ReactNoop;
+let resolveSuspenseyThing;
+let getSuspenseyThingStatus;
+let Suspense;
+let Activity;
+let SuspenseList;
+let useMemo;
+let Scheduler;
+let act;
+let assertLog;
+let waitForPaint;
+
+describe('ReactSuspenseyCommitPhase', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+    Activity = React.Activity;
+    useMemo = React.useMemo;
+    startTransition = React.startTransition;
+    resolveSuspenseyThing = ReactNoop.resolveSuspenseyThing;
+    getSuspenseyThingStatus = ReactNoop.getSuspenseyThingStatus;
+
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function SuspenseyImage({src}) {
+    return (
+      <suspensey-thing
+        src={src}
+        timeout={100}
+        onLoadStart={() => Scheduler.log(`Image requested [${src}]`)}
+      />
+    );
+  }
+
+  // @gate enableSuspenseyImages
+  it('suspend commit during initial mount', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <SuspenseyImage src="A" />
+          </Suspense>,
+        );
+      });
+    });
+    assertLog(['Image requested [A]', 'Loading...']);
+    expect(getSuspenseyThingStatus('A')).toBe('pending');
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // This should synchronously commit
+    resolveSuspenseyThing('A');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspend commit during update', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => resolveSuspenseyThing('A'));
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <SuspenseyImage src="A" />
+          </Suspense>,
+        );
+      });
+    });
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    // Update to a new image src. The transition should suspend because
+    // the src hasn't loaded yet, and the image is in an already-visible tree.
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <SuspenseyImage src="B" />
+          </Suspense>,
+        );
+      });
+    });
+    assertLog(['Image requested [B]']);
+    expect(getSuspenseyThingStatus('B')).toBe('pending');
+    // Should remain on previous screen
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    // This should synchronously commit
+    resolveSuspenseyThing('B');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="B" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspend commit during initial mount at the root', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(<SuspenseyImage src="A" />);
+      });
+    });
+    assertLog(['Image requested [A]']);
+    expect(getSuspenseyThingStatus('A')).toBe('pending');
+    expect(root).toMatchRenderedOutput(null);
+
+    resolveSuspenseyThing('A');
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspend commit during update at the root', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => resolveSuspenseyThing('A'));
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(null);
+    await act(async () => {
+      startTransition(() => {
+        root.render(<SuspenseyImage src="A" />);
+      });
+    });
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    await act(async () => {
+      startTransition(() => {
+        root.render(<SuspenseyImage src="B" />);
+      });
+    });
+    assertLog(['Image requested [B]']);
+    expect(getSuspenseyThingStatus('B')).toBe('pending');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    resolveSuspenseyThing('B');
+    expect(getSuspenseyThingStatus('B')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="B" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspend commit during urgent initial mount', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <SuspenseyImage src="A" />
+        </Suspense>,
+      );
+    });
+    assertLog(['Image requested [A]', 'Loading...']);
+    expect(getSuspenseyThingStatus('A')).toBe('pending');
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    resolveSuspenseyThing('A');
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspend commit during urgent update', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => resolveSuspenseyThing('A'));
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <SuspenseyImage src="A" />
+        </Suspense>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    resolveSuspenseyThing('A');
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <SuspenseyImage src="B" />
+        </Suspense>,
+      );
+    });
+    assertLog(['Image requested [B]', 'Loading...']);
+    expect(getSuspenseyThingStatus('B')).toBe('pending');
+    expect(root).toMatchRenderedOutput(
+      <>
+        <suspensey-thing src="A" hidden={true} />
+        {'Loading...'}
+      </>,
+    );
+
+    resolveSuspenseyThing('B');
+    expect(getSuspenseyThingStatus('B')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="B" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspends commit during urgent initial mount at the root', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<SuspenseyImage src="A" />);
+    });
+    assertLog(['Image requested [A]']);
+    expect(getSuspenseyThingStatus('A')).toBe('pending');
+    expect(root).toMatchRenderedOutput(null);
+
+    resolveSuspenseyThing('A');
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('suspends commit during urgent update at the root', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => resolveSuspenseyThing('A'));
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(null);
+    await act(async () => {
+      root.render(<SuspenseyImage src="A" />);
+    });
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    await act(async () => {
+      root.render(<SuspenseyImage src="B" />);
+    });
+    assertLog(['Image requested [B]']);
+    expect(getSuspenseyThingStatus('B')).toBe('pending');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    resolveSuspenseyThing('B');
+    expect(getSuspenseyThingStatus('B')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="B" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('does suspend commit during urgent initial mount at the root when sync rendering', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<SuspenseyImage src="A" />);
+      });
+    });
+    assertLog(['Image requested [A]']);
+    expect(getSuspenseyThingStatus('A')).toBe('pending');
+    // Suspend the initial mount
+    expect(root).toMatchRenderedOutput(null);
+
+    resolveSuspenseyThing('A');
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('does suspend commit during urgent update at the root when sync rendering', async () => {
+    const root = ReactNoop.createRoot();
+    await act(() => resolveSuspenseyThing('A'));
+    expect(getSuspenseyThingStatus('A')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(null);
+    await act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<SuspenseyImage src="A" />);
+      });
+    });
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    await act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<SuspenseyImage src="B" />);
+      });
+    });
+    assertLog(['Image requested [B]']);
+    expect(getSuspenseyThingStatus('B')).toBe('pending');
+    // Suspend and remain on previous screen
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="A" />);
+
+    resolveSuspenseyThing('B');
+    expect(getSuspenseyThingStatus('B')).toBe('fulfilled');
+    expect(root).toMatchRenderedOutput(<suspensey-thing src="B" />);
+  });
+
+  // @gate enableSuspenseyImages
+  it('an urgent update interrupts a suspended commit', async () => {
+    const root = ReactNoop.createRoot();
+
+    // Mount an image. This transition will suspend because it's not inside a
+    // Suspense boundary.
+    await act(() => {
+      startTransition(() => {
+        root.render(<SuspenseyImage src="A" />);
+      });
+    });
+    assertLog(['Image requested [A]']);
+    // Nothing showing yet.
+    expect(root).toMatchRenderedOutput(null);
+
+    // If there's an update, it should interrupt the suspended commit.
+    await act(() => {
+      root.render(<Text text="Something else" />);
+    });
+    assertLog(['Something else']);
+    expect(root).toMatchRenderedOutput('Something else');
+  });
+
+  // @gate enableSuspenseyImages
+  it('a transition update interrupts a suspended commit', async () => {
+    const root = ReactNoop.createRoot();
+
+    // Mount an image. This transition will suspend because it's not inside a
+    // Suspense boundary.
+    await act(() => {
+      startTransition(() => {
+        root.render(<SuspenseyImage src="A" />);
+      });
+    });
+    assertLog(['Image requested [A]']);
+    // Nothing showing yet.
+    expect(root).toMatchRenderedOutput(null);
+
+    // If there's an update, it should interrupt the suspended commit.
+    await act(() => {
+      startTransition(() => {
+        root.render(<Text text="Something else" />);
+      });
+    });
+    assertLog(['Something else']);
+    expect(root).toMatchRenderedOutput('Something else');
+  });
+
+  // @gate enableSuspenseList && enableSuspenseyImages
+  it('demonstrate current behavior when used with SuspenseList (not ideal)', async () => {
+    function App() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="visible">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <SuspenseyImage src="A" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <SuspenseyImage src="B" />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <SuspenseyImage src="C" />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog([
+      'Image requested [A]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+      'Image requested [B]',
+      'Image requested [C]',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading ALoading BLoading C');
+
+    // TODO: Notice that none of these items appear until they've all loaded.
+    // That's not ideal; we should commit each row as it becomes ready to
+    // commit. That means we need to prepare both the fallback and the primary
+    // tree during the render phase. Related to Activity, too.
+    resolveSuspenseyThing('A');
+    expect(root).toMatchRenderedOutput('Loading ALoading BLoading C');
+    resolveSuspenseyThing('B');
+    expect(root).toMatchRenderedOutput('Loading ALoading BLoading C');
+    resolveSuspenseyThing('C');
+    expect(root).toMatchRenderedOutput(
+      <>
+        <suspensey-thing src="A" />
+        <suspensey-thing src="B" />
+        <suspensey-thing src="C" />
+      </>,
+    );
+  });
+
+  // @gate enableSuspenseyImages
+  it('avoid triggering a fallback if resource loads immediately', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        // Intentionally rendering <suspensey-thing>s in a variety of tree
+        // positions to test that the work loop resumes correctly in each case.
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <suspensey-thing
+              src="A"
+              onLoadStart={() => Scheduler.log('Request [A]')}>
+              <suspensey-thing
+                src="B"
+                onLoadStart={() => Scheduler.log('Request [B]')}
+              />
+            </suspensey-thing>
+            <suspensey-thing
+              src="C"
+              onLoadStart={() => Scheduler.log('Request [C]')}
+            />
+          </Suspense>,
+        );
+      });
+      // React will yield right after the resource suspends.
+      // TODO: The child is preloaded first because we preload in the complete
+      // phase. Ideally it should be in the begin phase, but we currently don't
+      // create the instance until complete. However, it's unclear if we even
+      // need the instance for preloading. So we should probably move this to
+      // the begin phase.
+      await waitForPaint(['Request [B]']);
+      // Resolve in an immediate task. This could happen if the resource is
+      // already loaded into the cache.
+      resolveSuspenseyThing('B');
+      await waitForPaint(['Request [A]']);
+      resolveSuspenseyThing('A');
+      await waitForPaint(['Request [C]']);
+      resolveSuspenseyThing('C');
+    });
+    expect(root).toMatchRenderedOutput(
+      <>
+        <suspensey-thing src="A">
+          <suspensey-thing src="B" />
+        </suspensey-thing>
+        <suspensey-thing src="C" />
+      </>,
+    );
+  });
+
+  // @gate enableActivity && enableSuspenseyImages
+  it("host instances don't suspend during prerendering, but do suspend when they are revealed", async () => {
+    function More() {
+      Scheduler.log('More');
+      return <SuspenseyImage src="More" />;
+    }
+
+    function Details({showMore}) {
+      Scheduler.log('Details');
+      const more = useMemo(() => <More />, []);
+      return (
+        <>
+          <div>Main Content</div>
+          <Activity mode={showMore ? 'visible' : 'hidden'}>{more}</Activity>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<Details showMore={false} />);
+      // First render the outer component, without the hidden content
+      await waitForPaint(['Details']);
+      expect(root).toMatchRenderedOutput(<div>Main Content</div>);
+    });
+    // Then prerender the hidden content.
+    assertLog(['More', 'Image requested [More]']);
+    // The prerender should commit even though the image is still loading,
+    // because it's hidden.
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Main Content</div>
+        <suspensey-thing hidden={true} src="More" />
+      </>,
+    );
+
+    // Reveal the prerendered content. This update should suspend, because the
+    // image that is being revealed still hasn't loaded.
+    await act(() => {
+      startTransition(() => {
+        root.render(<Details showMore={true} />);
+      });
+    });
+    // The More component should not render again, because it was memoized,
+    // and it already prerendered.
+    assertLog(['Details']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Main Content</div>
+        <suspensey-thing hidden={true} src="More" />
+      </>,
+    );
+
+    // Now resolve the image. The transition should complete.
+    resolveSuspenseyThing('More');
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Main Content</div>
+        <suspensey-thing src="More" />
+      </>,
+    );
+  });
+
+  // FIXME: Should pass with `enableYieldingBeforePassive`
+  // @gate !enableYieldingBeforePassive && enableSuspenseyImages
+  it('runs passive effects after suspended commit resolves', async () => {
+    function Effect() {
+      React.useEffect(() => {
+        Scheduler.log('flush effect');
+      });
+      return <Text text="render effect" />;
+    }
+
+    const root = ReactNoop.createRoot();
+
+    await act(() => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Effect />
+          <SuspenseyImage src="A" />
+        </Suspense>,
+      );
+    });
+
+    assertLog([
+      'render effect',
+      'Image requested [A]',
+      'Loading...',
+      'render effect',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(() => {
+      resolveSuspenseyThing('A');
+    });
+
+    assertLog(['flush effect']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        {'render effect'}
+        <suspensey-thing src="A" />
+      </>,
+    );
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactTopLevelFragment-test.js b/packages/react-reconciler/src/__tests__/ReactTopLevelFragment-test.js
new file mode 100644
index 00000000000..38b0d0a5263
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactTopLevelFragment-test.js
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let waitForAll;
+
+// 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('ReactTopLevelFragment', function () {
+  beforeEach(function () {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  it('should render a simple fragment at the top of a component', async function () {
+    function Fragment() {
+      return [<div key="a">Hello</div>, <div key="b">World</div>];
+    }
+    ReactNoop.render(<Fragment />);
+    await waitForAll([]);
+  });
+
+  it('should preserve state when switching from a single child', async function () {
+    let instance = null;
+
+    class Stateful extends React.Component {
+      render() {
+        instance = this;
+        return <div>Hello</div>;
+      }
+    }
+
+    function Fragment({condition}) {
+      return condition ? (
+        <Stateful key="a" />
+      ) : (
+        [<Stateful key="a" />, <div key="b">World</div>]
+      );
+    }
+    ReactNoop.render(<Fragment />);
+    await waitForAll([]);
+
+    const instanceA = instance;
+
+    expect(instanceA).not.toBe(null);
+
+    ReactNoop.render(<Fragment condition={true} />);
+    await waitForAll([]);
+
+    const instanceB = instance;
+
+    expect(instanceB).toBe(instanceA);
+  });
+
+  it('should not preserve state when switching to a nested array', async function () {
+    let instance = null;
+
+    class Stateful extends React.Component {
+      render() {
+        instance = this;
+        return <div>Hello</div>;
+      }
+    }
+
+    function Fragment({condition}) {
+      return condition ? (
+        <Stateful key="a" />
+      ) : (
+        [[<Stateful key="a" />, <div key="b">World</div>], <div key="c" />]
+      );
+    }
+    ReactNoop.render(<Fragment />);
+    await waitForAll([]);
+
+    const instanceA = instance;
+
+    expect(instanceA).not.toBe(null);
+
+    ReactNoop.render(<Fragment condition={true} />);
+    await waitForAll([]);
+
+    const instanceB = instance;
+
+    expect(instanceB).not.toBe(instanceA);
+  });
+
+  it('preserves state if an implicit key slot switches from/to null', async function () {
+    let instance = null;
+
+    class Stateful extends React.Component {
+      render() {
+        instance = this;
+        return <div>World</div>;
+      }
+    }
+
+    function Fragment({condition}) {
+      return condition
+        ? [null, <Stateful key="a" />]
+        : [<div key="b">Hello</div>, <Stateful key="a" />];
+    }
+    ReactNoop.render(<Fragment />);
+    await waitForAll([]);
+
+    const instanceA = instance;
+
+    expect(instanceA).not.toBe(null);
+
+    ReactNoop.render(<Fragment condition={true} />);
+    await waitForAll([]);
+
+    const instanceB = instance;
+
+    expect(instanceB).toBe(instanceA);
+
+    ReactNoop.render(<Fragment condition={false} />);
+    await waitForAll([]);
+
+    const instanceC = instance;
+
+    expect(instanceC === instanceA).toBe(true);
+  });
+
+  it('should preserve state in a reorder', async function () {
+    let instance = null;
+
+    class Stateful extends React.Component {
+      render() {
+        instance = this;
+        return <div>Hello</div>;
+      }
+    }
+
+    function Fragment({condition}) {
+      return condition
+        ? [[<div key="b">World</div>, <Stateful key="a" />]]
+        : [[<Stateful key="a" />, <div key="b">World</div>], <div key="c" />];
+    }
+    ReactNoop.render(<Fragment />);
+    await waitForAll([]);
+
+    const instanceA = instance;
+
+    expect(instanceA).not.toBe(null);
+
+    ReactNoop.render(<Fragment condition={true} />);
+    await waitForAll([]);
+
+    const instanceB = instance;
+
+    expect(instanceB).toBe(instanceA);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js b/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
new file mode 100644
index 00000000000..b1d8dd5e010
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactTopLevelText-test.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let waitForAll;
+
+// 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('ReactTopLevelText', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  it('should render a component returning strings directly from render', async () => {
+    const Text = ({value}) => value;
+    ReactNoop.render(<Text value="foo" />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('foo');
+  });
+
+  it('should render a component returning numbers directly from render', async () => {
+    const Text = ({value}) => value;
+    ReactNoop.render(<Text value={10} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('10');
+  });
+
+  it('should render a component returning bigints directly from render', async () => {
+    const Text = ({value}) => value;
+    ReactNoop.render(<Text value={10n} />);
+    await waitForAll([]);
+    expect(ReactNoop).toMatchRenderedOutput('10');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
new file mode 100644
index 00000000000..d3ad2e61385
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -0,0 +1,982 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let Suspense;
+let useState;
+let useLayoutEffect;
+let useTransition;
+let startTransition;
+let act;
+let getCacheForType;
+let waitForAll;
+let waitFor;
+let waitForPaint;
+let assertLog;
+
+let caches;
+let seededCache;
+
+describe('ReactTransition', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useLayoutEffect = React.useLayoutEffect;
+    useTransition = React.useTransition;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    getCacheForType = React.unstable_getCacheForType;
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+
+    caches = [];
+    seededCache = null;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      // Trick to seed a cache before it exists.
+      // TODO: Need a built-in API to seed data before the initial render (i.e.
+      // not a refresh because nothing has mounted yet).
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  function seedNextTextCache(text) {
+    if (seededCache === null) {
+      seededCache = createTextCache();
+    }
+    seededCache.resolve(text);
+  }
+
+  function resolveText(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  // @gate enableLegacyCache
+  it('isPending works even if called from outside an input event', async () => {
+    let start;
+    function App() {
+      const [show, setShow] = useState(false);
+      const [isPending, _start] = useTransition();
+      start = () => _start(() => setShow(true));
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {isPending ? <Text text="Pending..." /> : null}
+          {show ? <AsyncText text="Async" /> : <Text text="(empty)" />}
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['(empty)']);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(async () => {
+      start();
+
+      await waitForAll([
+        'Pending...',
+        '(empty)',
+        'Suspend! [Async]',
+        'Loading...',
+      ]);
+
+      expect(root).toMatchRenderedOutput('Pending...(empty)');
+
+      await resolveText('Async');
+    });
+    assertLog(['Async']);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate enableLegacyCache
+  it(
+    'when multiple transitions update the same queue, only the most recent ' +
+      'one is allowed to finish (no intermediate states)',
+    async () => {
+      let update;
+      function App() {
+        const [isContentPending, startContentChange] = useTransition();
+        const [label, setLabel] = useState('A');
+        const [contents, setContents] = useState('A');
+        update = value => {
+          ReactNoop.discreteUpdates(() => {
+            setLabel(value);
+            startContentChange(() => {
+              setContents(value);
+            });
+          });
+        };
+        return (
+          <>
+            <Text
+              text={
+                label + ' label' + (isContentPending ? ' (loading...)' : '')
+              }
+            />
+            <div>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText text={contents + ' content'} />
+              </Suspense>
+            </div>
+          </>
+        );
+      }
+
+      // Initial render
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        seedNextTextCache('A content');
+        root.render(<App />);
+      });
+      assertLog(['A label', 'A content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          A label<div>A content</div>
+        </>,
+      );
+
+      // Switch to B
+      await act(() => {
+        update('B');
+      });
+      assertLog([
+        // Commit pending state
+        'B label (loading...)',
+        'A content',
+
+        // Attempt to render B, but it suspends
+        'B label',
+        'Suspend! [B content]',
+        'Loading...',
+      ]);
+      // This is a refresh transition so it shouldn't show a fallback
+      expect(root).toMatchRenderedOutput(
+        <>
+          B label (loading...)<div>A content</div>
+        </>,
+      );
+
+      // Before B finishes loading, switch to C
+      await act(() => {
+        update('C');
+      });
+      assertLog([
+        // Commit pending state
+        'C label (loading...)',
+        'A content',
+
+        // Attempt to render C, but it suspends
+        'C label',
+        'Suspend! [C content]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label (loading...)<div>A content</div>
+        </>,
+      );
+
+      // Finish loading B. But we're not allowed to render B because it's
+      // entangled with C. So we're still pending.
+      await act(() => {
+        resolveText('B content');
+      });
+      assertLog([
+        // Attempt to render C, but it suspends
+        'C label',
+        'Suspend! [C content]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label (loading...)<div>A content</div>
+        </>,
+      );
+
+      // Now finish loading C. This is the terminal update, so it can finish.
+      await act(() => {
+        resolveText('C content');
+      });
+      assertLog(['C label', 'C content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label<div>C content</div>
+        </>,
+      );
+    },
+  );
+
+  // Same as previous test, but for class update queue.
+  // @gate enableLegacyCache
+  it(
+    'when multiple transitions update the same queue, only the most recent ' +
+      'one is allowed to finish (no intermediate states) (classes)',
+    async () => {
+      let update;
+      class App extends React.Component {
+        state = {
+          label: 'A',
+          contents: 'A',
+        };
+        render() {
+          update = value => {
+            ReactNoop.discreteUpdates(() => {
+              this.setState({label: value});
+              startTransition(() => {
+                this.setState({contents: value});
+              });
+            });
+          };
+          const label = this.state.label;
+          const contents = this.state.contents;
+          const isContentPending = label !== contents;
+          return (
+            <>
+              <Text
+                text={
+                  label + ' label' + (isContentPending ? ' (loading...)' : '')
+                }
+              />
+              <div>
+                <Suspense fallback={<Text text="Loading..." />}>
+                  <AsyncText text={contents + ' content'} />
+                </Suspense>
+              </div>
+            </>
+          );
+        }
+      }
+
+      // Initial render
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        seedNextTextCache('A content');
+        root.render(<App />);
+      });
+      assertLog(['A label', 'A content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          A label<div>A content</div>
+        </>,
+      );
+
+      // Switch to B
+      await act(() => {
+        update('B');
+      });
+      assertLog([
+        // Commit pending state
+        'B label (loading...)',
+        'A content',
+
+        // Attempt to render B, but it suspends
+        'B label',
+        'Suspend! [B content]',
+        'Loading...',
+      ]);
+      // This is a refresh transition so it shouldn't show a fallback
+      expect(root).toMatchRenderedOutput(
+        <>
+          B label (loading...)<div>A content</div>
+        </>,
+      );
+
+      // Before B finishes loading, switch to C
+      await act(() => {
+        update('C');
+      });
+      assertLog([
+        // Commit pending state
+        'C label (loading...)',
+        'A content',
+
+        // Attempt to render C, but it suspends
+        'C label',
+        'Suspend! [C content]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label (loading...)<div>A content</div>
+        </>,
+      );
+
+      // Finish loading B. But we're not allowed to render B because it's
+      // entangled with C. So we're still pending.
+      await act(() => {
+        resolveText('B content');
+      });
+      assertLog([
+        // Attempt to render C, but it suspends
+        'C label',
+        'Suspend! [C content]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label (loading...)<div>A content</div>
+        </>,
+      );
+
+      // Now finish loading C. This is the terminal update, so it can finish.
+      await act(() => {
+        resolveText('C content');
+      });
+      assertLog(['C label', 'C content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label<div>C content</div>
+        </>,
+      );
+    },
+  );
+
+  // @gate enableLegacyCache
+  it(
+    'when multiple transitions update overlapping queues, all the transitions ' +
+      'across all the queues are entangled',
+    async () => {
+      let setShowA;
+      let setShowB;
+      let setShowC;
+      function App() {
+        const [showA, _setShowA] = useState(false);
+        const [showB, _setShowB] = useState(false);
+        const [showC, _setShowC] = useState(false);
+        setShowA = _setShowA;
+        setShowB = _setShowB;
+        setShowC = _setShowC;
+
+        // Only one of these children should be visible at a time. Except
+        // instead of being modeled as a single state, it's three separate
+        // states that are updated simultaneously. This may seem a bit
+        // contrived, but it's more common than you might think. Usually via
+        // a framework or indirection. For example, consider a tooltip manager
+        // that only shows a single tooltip at a time. Or a router that
+        // highlights links to the active route.
+        return (
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              {showA ? <AsyncText text="A" /> : null}
+              {showB ? <AsyncText text="B" /> : null}
+              {showC ? <AsyncText text="C" /> : null}
+            </Suspense>
+          </>
+        );
+      }
+
+      // Initial render. Start with all children hidden.
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      assertLog([]);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Switch to A.
+      await act(() => {
+        startTransition(() => {
+          setShowA(true);
+        });
+      });
+      assertLog(['Suspend! [A]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Before A loads, switch to B. This should entangle A with B.
+      await act(() => {
+        startTransition(() => {
+          setShowA(false);
+          setShowB(true);
+        });
+      });
+      assertLog(['Suspend! [B]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Before A or B loads, switch to C. This should entangle C with B, and
+      // transitively entangle C with A.
+      await act(() => {
+        startTransition(() => {
+          setShowB(false);
+          setShowC(true);
+        });
+      });
+      assertLog(['Suspend! [C]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Now the data starts resolving out of order.
+
+      // First resolve B. This will attempt to render C, since everything is
+      // entangled.
+      await act(() => {
+        startTransition(() => {
+          resolveText('B');
+        });
+      });
+      assertLog(['Suspend! [C]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Now resolve A. Again, this will attempt to render C, since everything
+      // is entangled.
+      await act(() => {
+        startTransition(() => {
+          resolveText('A');
+        });
+      });
+      assertLog(['Suspend! [C]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Finally, resolve C. This time we can finish.
+      await act(() => {
+        startTransition(() => {
+          resolveText('C');
+        });
+      });
+      assertLog(['C']);
+      expect(root).toMatchRenderedOutput('C');
+    },
+  );
+
+  // @gate enableLegacyCache
+  it('interrupt a refresh transition if a new transition is scheduled', async () => {
+    const root = ReactNoop.createRoot();
+
+    await act(() => {
+      root.render(
+        <>
+          <Suspense fallback={<Text text="Loading..." />} />
+          <Text text="Initial" />
+        </>,
+      );
+    });
+    assertLog(['Initial']);
+    expect(root).toMatchRenderedOutput('Initial');
+
+    await act(async () => {
+      // Start a refresh transition
+      startTransition(() => {
+        root.render(
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="Async" />
+            </Suspense>
+            <Text text="After Suspense" />
+            <Text text="Sibling" />
+          </>,
+        );
+      });
+
+      // Partially render it.
+      await waitFor([
+        // Once we the update suspends, we know it's a refresh transition,
+        // because the Suspense boundary has already mounted.
+        'Suspend! [Async]',
+        'Loading...',
+        'After Suspense',
+      ]);
+
+      // Schedule a new transition
+      startTransition(async () => {
+        root.render(
+          <>
+            <Suspense fallback={<Text text="Loading..." />} />
+            <Text text="Updated" />
+          </>,
+        );
+      });
+    });
+
+    // Because the first one is going to suspend regardless, we should
+    // immediately switch to rendering the new transition.
+    assertLog(['Updated']);
+    expect(root).toMatchRenderedOutput('Updated');
+  });
+
+  // @gate enableLegacyCache
+  it(
+    "interrupt a refresh transition when something suspends and we've " +
+      'already bailed out on another transition in a parent',
+    async () => {
+      let setShouldSuspend;
+
+      function Parent({children}) {
+        const [shouldHideInParent, _setShouldHideInParent] = useState(false);
+        setShouldHideInParent = _setShouldHideInParent;
+        Scheduler.log('shouldHideInParent: ' + shouldHideInParent);
+        if (shouldHideInParent) {
+          return <Text text="(empty)" />;
+        }
+        return children;
+      }
+
+      let setShouldHideInParent;
+      function App() {
+        const [shouldSuspend, _setShouldSuspend] = useState(false);
+        setShouldSuspend = _setShouldSuspend;
+        return (
+          <>
+            <Text text="A" />
+            <Parent>
+              <Suspense fallback={<Text text="Loading..." />}>
+                {shouldSuspend ? <AsyncText text="Async" /> : null}
+              </Suspense>
+            </Parent>
+            <Text text="B" />
+            <Text text="C" />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await act(async () => {
+        root.render(<App />);
+        await waitForAll(['A', 'shouldHideInParent: false', 'B', 'C']);
+        expect(root).toMatchRenderedOutput('ABC');
+
+        // Schedule an update
+        startTransition(() => {
+          setShouldSuspend(true);
+        });
+
+        // Now we need to trigger schedule another transition in a different
+        // lane from the first one. At the time this was written, all transitions are worked on
+        // simultaneously, unless a transition was already in progress when a
+        // new one was scheduled. So, partially render the first transition.
+        await waitFor(['A']);
+
+        // Now schedule a second transition. We won't interrupt the first one.
+        React.startTransition(() => {
+          setShouldHideInParent(true);
+        });
+        // Continue rendering the first transition.
+        await waitFor([
+          'shouldHideInParent: false',
+          'Suspend! [Async]',
+          'Loading...',
+          'B',
+        ]);
+        // Should not have committed loading state
+        expect(root).toMatchRenderedOutput('ABC');
+
+        // At this point, we've processed the parent update queue, so we know
+        // that it has a pending update from the second transition, even though
+        // we skipped it during this render. And we know this is a refresh
+        // transition, because we had to render a loading state. So the next
+        // time we re-enter the work loop (we don't interrupt immediately, we
+        // just wait for the next time slice), we should throw out the
+        // suspended first transition and try the second one.
+        await waitForPaint(['shouldHideInParent: true', '(empty)']);
+        expect(root).toMatchRenderedOutput('A(empty)BC');
+
+        // Since the two transitions are not entangled, we then later go back
+        // and finish retry the first transition. Not really relevant to this
+        // test but I'll assert the result anyway.
+        await waitForAll([
+          'A',
+          'shouldHideInParent: true',
+          '(empty)',
+          'B',
+          'C',
+        ]);
+        expect(root).toMatchRenderedOutput('A(empty)BC');
+      });
+    },
+  );
+
+  // @gate enableLegacyCache
+  it(
+    'interrupt a refresh transition when something suspends and a parent ' +
+      'component received an interleaved update after its queue was processed',
+    async () => {
+      // Title is confusing so I'll try to explain further: This is similar to
+      // the previous test, except instead of skipped over a transition update
+      // in a parent, the parent receives an interleaved update *after* its
+      // begin phase has already finished.
+
+      function App({shouldSuspend, step}) {
+        return (
+          <>
+            <Text text={`A${step}`} />
+            <Suspense fallback={<Text text="Loading..." />}>
+              {shouldSuspend ? <AsyncText text="Async" /> : null}
+            </Suspense>
+            <Text text={`B${step}`} />
+            <Text text={`C${step}`} />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await act(() => {
+        root.render(<App shouldSuspend={false} step={0} />);
+      });
+      assertLog(['A0', 'B0', 'C0']);
+      expect(root).toMatchRenderedOutput('A0B0C0');
+
+      await act(async () => {
+        // This update will suspend.
+        startTransition(() => {
+          root.render(<App shouldSuspend={true} step={1} />);
+        });
+        // Flush past the root, but stop before the async component.
+        await waitFor(['A1']);
+
+        // Schedule another transition on the root, which already completed.
+        startTransition(() => {
+          root.render(<App shouldSuspend={false} step={2} />);
+        });
+        // We'll keep working on the first update.
+        await waitFor([
+          // 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.
+        await waitForAll(['A2', 'B2', 'C2']);
+
+        expect(root).toMatchRenderedOutput('A2B2C2');
+      });
+    },
+  );
+
+  it('should render normal pri updates scheduled after transitions before transitions', async () => {
+    let updateTransitionPri;
+    let updateNormalPri;
+    function App() {
+      const [normalPri, setNormalPri] = useState(0);
+      const [transitionPri, setTransitionPri] = useState(0);
+      updateTransitionPri = () =>
+        startTransition(() => setTransitionPri(n => n + 1));
+      updateNormalPri = () => setNormalPri(n => n + 1);
+
+      useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text={'Transition pri: ' + transitionPri} />
+          {', '}
+          <Text text={'Normal pri: ' + normalPri} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+
+    // Initial render.
+    assertLog(['Transition pri: 0', 'Normal pri: 0', 'Commit']);
+    expect(root).toMatchRenderedOutput('Transition pri: 0, Normal pri: 0');
+
+    await act(() => {
+      updateTransitionPri();
+      updateNormalPri();
+    });
+
+    assertLog([
+      // Normal update first.
+      'Transition pri: 0',
+      'Normal pri: 1',
+      'Commit',
+
+      // Then transition update.
+      'Transition pri: 1',
+      'Normal pri: 1',
+      'Commit',
+    ]);
+    expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
+  });
+
+  // @gate enableLegacyCache
+  it('should render normal pri updates before transition suspense retries', async () => {
+    let updateTransitionPri;
+    let updateNormalPri;
+    function App() {
+      const [transitionPri, setTransitionPri] = useState(false);
+      const [normalPri, setNormalPri] = useState(0);
+
+      updateTransitionPri = () => startTransition(() => setTransitionPri(true));
+      updateNormalPri = () => setNormalPri(n => n + 1);
+
+      useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {transitionPri ? <AsyncText text="Async" /> : <Text text="(empty)" />}
+          {', '}
+          <Text text={'Normal pri: ' + normalPri} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+
+    // Initial render.
+    assertLog(['(empty)', 'Normal pri: 0', 'Commit']);
+    expect(root).toMatchRenderedOutput('(empty), Normal pri: 0');
+
+    await act(() => {
+      updateTransitionPri();
+    });
+
+    assertLog([
+      // Suspend.
+      'Suspend! [Async]',
+      // pre-warming
+      'Normal pri: 0',
+      // end pre-warming
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('(empty), Normal pri: 0');
+
+    await act(async () => {
+      await resolveText('Async');
+      updateNormalPri();
+    });
+
+    assertLog([
+      // Normal pri update.
+      '(empty)',
+      'Normal pri: 1',
+      'Commit',
+
+      // Promise resolved, retry flushed.
+      'Async',
+      'Normal pri: 1',
+      'Commit',
+    ]);
+    expect(root).toMatchRenderedOutput('Async, Normal pri: 1');
+  });
+
+  it('should not interrupt transitions with normal pri updates', async () => {
+    let updateNormalPri;
+    let updateTransitionPri;
+    function App() {
+      const [transitionPri, setTransitionPri] = useState(0);
+      const [normalPri, setNormalPri] = useState(0);
+      updateTransitionPri = () =>
+        startTransition(() => setTransitionPri(n => n + 1));
+      updateNormalPri = () => setNormalPri(n => n + 1);
+
+      useLayoutEffect(() => {
+        Scheduler.log('Commit');
+      });
+      return (
+        <>
+          <Text text={'Transition pri: ' + transitionPri} />
+          {', '}
+          <Text text={'Normal pri: ' + normalPri} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['Transition pri: 0', 'Normal pri: 0', 'Commit']);
+    expect(root).toMatchRenderedOutput('Transition pri: 0, Normal pri: 0');
+
+    await act(async () => {
+      updateTransitionPri();
+
+      await waitFor([
+        // Start transition update.
+        'Transition pri: 1',
+      ]);
+
+      // Schedule normal pri update during transition update.
+      // This should not interrupt.
+      updateNormalPri();
+    });
+
+    assertLog([
+      'Normal pri: 0',
+      'Commit',
+
+      // Normal pri update.
+      'Transition pri: 1',
+      'Normal pri: 1',
+      'Commit',
+    ]);
+
+    expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
+  });
+
+  it('tracks two pending flags for nested startTransition (#26226)', async () => {
+    let update;
+    function App() {
+      const [isPendingA, startTransitionA] = useTransition();
+      const [isPendingB, startTransitionB] = useTransition();
+      const [state, setState] = useState(0);
+
+      update = function () {
+        startTransitionA(() => {
+          startTransitionB(() => {
+            setState(1);
+          });
+        });
+      };
+
+      return (
+        <>
+          <Text text={state} />
+          {', '}
+          <Text text={'A ' + isPendingA} />
+          {', '}
+          <Text text={'B ' + isPendingB} />
+        </>
+      );
+    }
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog([0, 'A false', 'B false']);
+    expect(root).toMatchRenderedOutput('0, A false, B false');
+
+    await act(async () => {
+      update();
+    });
+    assertLog([0, 'A true', 'B true', 1, 'A false', 'B false']);
+    expect(root).toMatchRenderedOutput('1, A false, B false');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
new file mode 100644
index 00000000000..42d3ee57a61
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -0,0 +1,2571 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let act;
+let waitForAll;
+let assertLog;
+let assertConsoleErrorDev;
+
+let getCacheForType;
+let useState;
+let Suspense;
+let Activity;
+let startTransition;
+
+let caches;
+let seededCache;
+
+describe('ReactInteractionTracing', () => {
+  function stringifyDeletions(deletions) {
+    return deletions
+      .map(
+        d =>
+          `{${Object.keys(d)
+            .map(key => `${key}: ${d[key]}`)
+            .sort()
+            .join(', ')}}`,
+      )
+      .join(', ');
+  }
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    useState = React.useState;
+    startTransition = React.startTransition;
+    Suspense = React.Suspense;
+    Activity = React.Activity;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
+  });
+
+  function createTextCache() {
+    if (seededCache !== null) {
+      const cache = seededCache;
+      seededCache = null;
+      return cache;
+    }
+
+    const data = new Map();
+    const cache = {
+      data,
+      resolve(text) {
+        const record = data.get(text);
+
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.log(`Error [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function AsyncText({text}) {
+    const fullText = readText(text);
+    Scheduler.log(fullText);
+    return fullText;
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function resolveMostRecentTextCache(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
+  }
+
+  const resolveText = resolveMostRecentTextCache;
+
+  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(() => {});
+  }
+
+  // @gate enableTransitionTracing
+  it('should not call callbacks when transition is not defined', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="marker">
+              <Text text="Page Two" />
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+
+      await act(async () => {
+        startTransition(() => root.render(<App navigate={true} />));
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        // Doesn't call transition or marker code
+        await waitForAll(['Page Two']);
+
+        startTransition(() => root.render(<App navigate={false} />), {
+          name: 'transition',
+        });
+        await waitForAll([
+          'Page One',
+          'onTransitionStart(transition, 2000)',
+          'onTransitionComplete(transition, 2000, 2000)',
+        ]);
+      });
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace basic interaction', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? <Text text="Page Two" /> : <Text text="Page One" />}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+
+      await act(async () => {
+        startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        await waitForAll([
+          'Page Two',
+          'onTransitionStart(page transition, 1000)',
+          'onTransitionComplete(page transition, 1000, 2000)',
+        ]);
+      });
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('multiple updates in transition callback should only result in one transitionStart/transitionComplete call', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    let setText;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      const [text, _setText] = useState('hide');
+      navigateToPageTwo = () => setNavigate(true);
+      setText = () => _setText('show');
+
+      return (
+        <div>
+          {navigate ? (
+            <Text text={`Page Two: ${text}`} />
+          ) : (
+            <Text text={`Page One: ${text}`} />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One: hide']);
+
+      await act(async () => {
+        startTransition(
+          () => {
+            navigateToPageTwo();
+            setText();
+          },
+          {name: 'page transition'},
+        );
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        await waitForAll([
+          'Page Two: show',
+          'onTransitionStart(page transition, 1000)',
+          'onTransitionComplete(page transition, 1000, 2000)',
+        ]);
+      });
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace interactions for async roots', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <Suspense
+              fallback={<Text text="Loading..." />}
+              name="suspense page">
+              <AsyncText text="Page Two" />
+            </Suspense>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 2000, [suspense page])',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Page Two');
+
+      await waitForAll([
+        'Page Two',
+        'onTransitionProgress(page transition, 1000, 3000, [])',
+        'onTransitionComplete(page transition, 1000, 3000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace multiple separate root interactions', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    let showTextFn;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      const [showText, setShowText] = useState(false);
+
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      showTextFn = () => {
+        setShowText(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <>
+              {showText ? (
+                <Suspense
+                  name="show text"
+                  fallback={<Text text="Show Text Loading..." />}>
+                  <AsyncText text="Show Text" />
+                </Suspense>
+              ) : null}
+              <Suspense
+                fallback={<Text text="Loading..." />}
+                name="suspense page">
+                <AsyncText text="Page Two" />
+              </Suspense>
+            </>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 1000, [suspense page])',
+      ]);
+
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Page Two',
+        'onTransitionProgress(page transition, 1000, 2000, [])',
+        'onTransitionComplete(page transition, 1000, 2000)',
+      ]);
+
+      startTransition(() => showTextFn(), {name: 'text transition'});
+      await waitForAll([
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Page Two',
+        // pre-warming
+        'Suspend [Show Text]',
+        // end pre-warming
+        'onTransitionStart(text transition, 2000)',
+        'onTransitionProgress(text transition, 2000, 2000, [show text])',
+      ]);
+
+      await resolveText('Show Text');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Show Text',
+        'onTransitionProgress(text transition, 2000, 3000, [])',
+        'onTransitionComplete(text transition, 2000, 3000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace multiple intertwined root interactions', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+    let navigateToPageTwo;
+    let showTextFn;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      const [showText, setShowText] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      showTextFn = () => {
+        setShowText(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <>
+              {showText ? (
+                <Suspense
+                  name="show text"
+                  fallback={<Text text="Show Text Loading..." />}>
+                  <AsyncText text="Show Text" />
+                </Suspense>
+              ) : null}
+              <Suspense
+                fallback={<Text text="Loading..." />}
+                name="suspense page">
+                <AsyncText text="Page Two" />
+              </Suspense>
+            </>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 2000, [suspense page])',
+      ]);
+    });
+
+    await act(async () => {
+      startTransition(() => showTextFn(), {name: 'show text'});
+
+      await waitForAll([
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Show Text]',
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onTransitionStart(show text, 2000)',
+        'onTransitionProgress(show text, 2000, 2000, [show text])',
+      ]);
+    });
+
+    await act(async () => {
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Page Two',
+        'onTransitionProgress(page transition, 1000, 3000, [])',
+        'onTransitionComplete(page transition, 1000, 3000)',
+      ]);
+
+      await resolveText('Show Text');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Show Text',
+        'onTransitionProgress(show text, 2000, 4000, [])',
+        'onTransitionComplete(show text, 2000, 4000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('trace interaction with nested and sibling suspense boundaries', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <>
+              <Suspense
+                fallback={<Text text="Loading..." />}
+                name="suspense page">
+                <AsyncText text="Page Two" />
+                <Suspense
+                  name="show text one"
+                  fallback={<Text text="Show Text One Loading..." />}>
+                  <AsyncText text="Show Text One" />
+                </Suspense>
+                <div>
+                  <Suspense
+                    name="show text two"
+                    fallback={<Text text="Show Text Two Loading..." />}>
+                    <AsyncText text="Show Text Two" />
+                  </Suspense>
+                </div>
+              </Suspense>
+            </>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text Two]',
+        'Show Text Two Loading...',
+        // end pre-warming
+        'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 2000, [suspense page])',
+      ]);
+
+      resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Page Two',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text Two]',
+        'Show Text Two Loading...',
+        // pre-warming
+        'Suspend [Show Text One]',
+        'Suspend [Show Text Two]',
+        // end pre-warming
+        'onTransitionProgress(page transition, 1000, 3000, [show text one, show text two])',
+      ]);
+
+      resolveText('Show Text One');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Show Text One',
+        'onTransitionProgress(page transition, 1000, 4000, [show text two])',
+      ]);
+
+      resolveText('Show Text Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Show Text Two',
+        'onTransitionProgress(page transition, 1000, 5000, [])',
+        'onTransitionComplete(page transition, 1000, 5000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('trace interactions with the same child suspense boundaries', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let setNavigate;
+    let setShowTextOne;
+    let setShowTextTwo;
+    function App() {
+      const [navigate, _setNavigate] = useState(false);
+      const [showTextOne, _setShowTextOne] = useState(false);
+      const [showTextTwo, _setShowTextTwo] = useState(false);
+
+      setNavigate = () => _setNavigate(true);
+      setShowTextOne = () => _setShowTextOne(true);
+      setShowTextTwo = () => _setShowTextTwo(true);
+
+      return (
+        <div>
+          {navigate ? (
+            <>
+              <Suspense
+                fallback={<Text text="Loading..." />}
+                name="suspense page">
+                <AsyncText text="Page Two" />
+                {/* showTextOne is entangled with navigate */}
+                {showTextOne ? (
+                  <Suspense
+                    name="show text one"
+                    fallback={<Text text="Show Text One Loading..." />}>
+                    <AsyncText text="Show Text One" />
+                  </Suspense>
+                ) : null}
+                <Suspense fallback={<Text text="Show Text Loading..." />}>
+                  <AsyncText text="Show Text" />
+                </Suspense>
+                {/* showTextTwo's suspense boundaries shouldn't stop navigate's suspense boundaries
+                 from completing */}
+                {showTextTwo ? (
+                  <Suspense
+                    name="show text two"
+                    fallback={<Text text="Show Text Two Loading..." />}>
+                    <AsyncText text="Show Text Two" />
+                  </Suspense>
+                ) : null}
+              </Suspense>
+            </>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => setNavigate(), {name: 'navigate'});
+      startTransition(() => setShowTextOne(), {name: 'show text one'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        // end pre-warming
+        'onTransitionStart(navigate, 1000)',
+        'onTransitionStart(show text one, 1000)',
+        'onTransitionProgress(navigate, 1000, 2000, [suspense page])',
+        'onTransitionProgress(show text one, 1000, 2000, [suspense page])',
+      ]);
+
+      resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Page Two',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        // pre-warming
+        'Suspend [Show Text One]',
+        'Suspend [Show Text]',
+        // end pre-warming
+        'onTransitionProgress(navigate, 1000, 3000, [show text one, <null>])',
+        'onTransitionProgress(show text one, 1000, 3000, [show text one, <null>])',
+      ]);
+
+      startTransition(() => setShowTextTwo(), {name: 'show text two'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Page Two',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Suspend [Show Text Two]',
+        'Show Text Two Loading...',
+        // pre-warming
+        'Suspend [Show Text One]',
+        'Suspend [Show Text]',
+        'Suspend [Show Text Two]',
+        // end pre-warming
+        'onTransitionStart(show text two, 3000)',
+        'onTransitionProgress(show text two, 3000, 4000, [show text two])',
+      ]);
+
+      // This should not cause navigate to finish because it's entangled with
+      // show text one
+      resolveText('Show Text');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Show Text',
+        'onTransitionProgress(navigate, 1000, 5000, [show text one])',
+        'onTransitionProgress(show text one, 1000, 5000, [show text one])',
+      ]);
+
+      // This should not cause show text two to finish but nothing else
+      resolveText('Show Text Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Show Text Two',
+        'onTransitionProgress(show text two, 3000, 6000, [])',
+        'onTransitionComplete(show text two, 3000, 6000)',
+      ]);
+
+      // This should cause everything to finish
+      resolveText('Show Text One');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Show Text One',
+        'onTransitionProgress(navigate, 1000, 7000, [])',
+        'onTransitionProgress(show text one, 1000, 7000, [])',
+        'onTransitionComplete(navigate, 1000, 7000)',
+        'onTransitionComplete(show text one, 1000, 7000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace basic interaction with tracing markers', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="marker two" key="marker two">
+              <Text text="Page Two" />
+            </React.unstable_TracingMarker>
+          ) : (
+            <React.unstable_TracingMarker name="marker one">
+              <Text text="Page One" />
+            </React.unstable_TracingMarker>
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+
+      await act(async () => {
+        startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        await waitForAll([
+          'Page Two',
+          'onTransitionStart(page transition, 1000)',
+          'onMarkerComplete(page transition, marker two, 1000, 2000)',
+          'onTransitionComplete(page transition, 1000, 2000)',
+        ]);
+      });
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace interactions for tracing markers', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <Suspense
+              fallback={<Text text="Loading..." />}
+              name="suspense page">
+              <AsyncText text="Page Two" />
+              <React.unstable_TracingMarker name="sync marker" />
+              <React.unstable_TracingMarker name="async marker">
+                <Suspense
+                  fallback={<Text text="Loading..." />}
+                  name="marker suspense">
+                  <AsyncText text="Marker Text" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </Suspense>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        'Suspend [Marker Text]',
+        'Loading...',
+        // end pre-warming
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Page Two');
+
+      await waitForAll([
+        'Page Two',
+        'Suspend [Marker Text]',
+        'Loading...',
+        // pre-warming
+        'Suspend [Marker Text]',
+        // end pre-warming
+        'onMarkerProgress(page transition, async marker, 1000, 3000, [marker suspense])',
+        'onMarkerComplete(page transition, sync marker, 1000, 3000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Marker Text');
+
+      await waitForAll([
+        'Marker Text',
+        'onMarkerProgress(page transition, async marker, 1000, 4000, [])',
+        'onMarkerComplete(page transition, async marker, 1000, 4000)',
+        'onTransitionComplete(page transition, 1000, 4000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('trace interaction with multiple tracing markers', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="outer marker">
+              <Suspense fallback={<Text text="Outer..." />} name="outer">
+                <AsyncText text="Outer Text" />
+                <Suspense
+                  fallback={<Text text="Inner One..." />}
+                  name="inner one">
+                  <React.unstable_TracingMarker name="marker one">
+                    <AsyncText text="Inner Text One" />
+                  </React.unstable_TracingMarker>
+                </Suspense>
+                <Suspense
+                  fallback={<Text text="Inner Two..." />}
+                  name="inner two">
+                  <React.unstable_TracingMarker name="marker two">
+                    <AsyncText text="Inner Text Two" />
+                  </React.unstable_TracingMarker>
+                </Suspense>
+              </Suspense>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Outer Text]',
+        'Outer...',
+        // pre-warming
+        'Suspend [Outer Text]',
+        'Suspend [Inner Text One]',
+        'Inner One...',
+        'Suspend [Inner Text Two]',
+        'Inner Two...',
+        // end pre-warming
+        'onTransitionStart(page transition, 1000)',
+        'onMarkerProgress(page transition, outer marker, 1000, 2000, [outer])',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Inner Text Two');
+      await waitForAll([]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Outer Text');
+      await waitForAll([
+        'Outer Text',
+        'Suspend [Inner Text One]',
+        'Inner One...',
+        'Inner Text Two',
+        // pre-warming
+        'Suspend [Inner Text One]',
+        // end pre-warming
+        'onMarkerProgress(page transition, outer marker, 1000, 4000, [inner one])',
+        'onMarkerComplete(page transition, marker two, 1000, 4000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Inner Text One');
+      await waitForAll([
+        'Inner Text One',
+        'onMarkerProgress(page transition, outer marker, 1000, 5000, [])',
+        'onMarkerComplete(page transition, marker one, 1000, 5000)',
+        'onMarkerComplete(page transition, outer marker, 1000, 5000)',
+        'onTransitionComplete(page transition, 1000, 5000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('warn and calls marker incomplete if name changes before transition completes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, markerName}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name={markerName}>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText text="Page Two" />
+              </Suspense>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} markerName="marker one" />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} markerName="marker one" />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(transition one, 1000)',
+        'onMarkerProgress(transition one, marker one, 1000, 2000, [<null>])',
+        'onTransitionProgress(transition one, 1000, 2000, [<null>])',
+      ]);
+
+      root.render(<App navigate={true} markerName="marker two" />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, newName: marker two, type: marker}])',
+      ]);
+
+      resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Page Two',
+        'onMarkerProgress(transition one, marker one, 1000, 4000, [])',
+        'onTransitionProgress(transition one, 1000, 4000, [])',
+        'onTransitionComplete(transition one, 1000, 4000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('marker incomplete for tree with parent and sibling tracing markers', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, showMarker}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              {showMarker ? (
+                <React.unstable_TracingMarker name="marker one">
+                  <Suspense
+                    name="suspense page"
+                    fallback={<Text text="Loading..." />}>
+                    <AsyncText text="Page Two" />
+                  </Suspense>
+                </React.unstable_TracingMarker>
+              ) : (
+                <Suspense
+                  name="suspense page"
+                  fallback={<Text text="Loading..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              )}
+              <React.unstable_TracingMarker name="sibling">
+                <Suspense
+                  name="suspense sibling"
+                  fallback={<Text text="Sibling Loading..." />}>
+                  <AsyncText text="Sibling Text" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} showMarker={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} showMarker={true} />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        'Suspend [Sibling Text]',
+        // end pre-warming
+        'onTransitionStart(transition one, 1000)',
+        'onMarkerProgress(transition one, parent, 1000, 2000, [suspense page, suspense sibling])',
+        'onMarkerProgress(transition one, marker one, 1000, 2000, [suspense page])',
+        'onMarkerProgress(transition one, sibling, 1000, 2000, [suspense sibling])',
+        'onTransitionProgress(transition one, 1000, 2000, [suspense page, suspense sibling])',
+      ]);
+      root.render(<App navigate={true} showMarker={false} />);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        'Suspend [Sibling Text]',
+        // end pre-warming
+        'onMarkerProgress(transition one, parent, 1000, 3000, [suspense sibling])',
+        'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, type: marker}, {endTime: 3000, name: suspense page, type: suspense}])',
+        'onMarkerIncomplete(transition one, parent, 1000, [{endTime: 3000, name: marker one, type: marker}, {endTime: 3000, name: suspense page, type: suspense}])',
+      ]);
+
+      root.render(<App navigate={true} showMarker={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        // pre-warming
+        'Suspend [Page Two]',
+        'Suspend [Sibling Text]',
+      ]);
+    });
+
+    resolveText('Page Two');
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+    await waitForAll(['Page Two']);
+
+    resolveText('Sibling Text');
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+    await waitForAll([
+      'Sibling Text',
+      'onMarkerProgress(transition one, parent, 1000, 6000, [])',
+      'onMarkerProgress(transition one, sibling, 1000, 6000, [])',
+      // Calls markerComplete and transitionComplete for all parents
+      'onMarkerComplete(transition one, sibling, 1000, 6000)',
+      'onTransitionProgress(transition one, 1000, 6000, [])',
+    ]);
+  });
+
+  // @gate enableTransitionTracing
+  it('marker gets deleted', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, deleteOne}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              {!deleteOne ? (
+                <div>
+                  <React.unstable_TracingMarker name="one">
+                    <Suspense
+                      name="suspense one"
+                      fallback={<Text text="Loading One..." />}>
+                      <AsyncText text="Page One" />
+                    </Suspense>
+                  </React.unstable_TracingMarker>
+                </div>
+              ) : null}
+              <React.unstable_TracingMarker name="two">
+                <Suspense
+                  name="suspense two"
+                  fallback={<Text text="Loading Two..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} deleteOne={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} deleteOne={false} />),
+        {
+          name: 'transition',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page One]',
+        'Loading One...',
+        'Suspend [Page Two]',
+        'Loading Two...',
+        // pre-warming
+        'Suspend [Page One]',
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onTransitionStart(transition, 1000)',
+        'onMarkerProgress(transition, parent, 1000, 2000, [suspense one, suspense two])',
+        'onMarkerProgress(transition, one, 1000, 2000, [suspense one])',
+        'onMarkerProgress(transition, two, 1000, 2000, [suspense two])',
+        'onTransitionProgress(transition, 1000, 2000, [suspense one, suspense two])',
+      ]);
+
+      root.render(<App navigate={true} deleteOne={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading Two...',
+        // pre-warming
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onMarkerProgress(transition, parent, 1000, 3000, [suspense two])',
+        'onMarkerIncomplete(transition, one, 1000, [{endTime: 3000, name: one, type: marker}, {endTime: 3000, name: suspense one, type: suspense}])',
+        'onMarkerIncomplete(transition, parent, 1000, [{endTime: 3000, name: one, type: marker}, {endTime: 3000, name: suspense one, type: suspense}])',
+      ]);
+
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Page Two',
+        // Marker progress will still get called after incomplete but not marker complete
+        'onMarkerProgress(transition, parent, 1000, 4000, [])',
+        'onMarkerProgress(transition, two, 1000, 4000, [])',
+        'onMarkerComplete(transition, two, 1000, 4000)',
+        // Transition progress will still get called after incomplete but not transition complete
+        'onTransitionProgress(transition, 1000, 4000, [])',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('Suspense boundary added by the transition is deleted', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, deleteOne}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              <React.unstable_TracingMarker name="one">
+                {!deleteOne ? (
+                  <Suspense
+                    name="suspense one"
+                    fallback={<Text text="Loading One..." />}>
+                    <AsyncText text="Page One" />
+                    <React.unstable_TracingMarker name="page one" />
+                    <Suspense
+                      name="suspense child"
+                      fallback={<Text text="Loading Child..." />}>
+                      <React.unstable_TracingMarker name="child" />
+                      <AsyncText text="Child" />
+                    </Suspense>
+                  </Suspense>
+                ) : null}
+              </React.unstable_TracingMarker>
+              <React.unstable_TracingMarker name="two">
+                <Suspense
+                  name="suspense two"
+                  fallback={<Text text="Loading Two..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              </React.unstable_TracingMarker>
+            </React.unstable_TracingMarker>
+          ) : (
+            <Text text="Page One" />
+          )}
+        </div>
+      );
+    }
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      root.render(<App navigate={false} deleteOne={false} />);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} deleteOne={false} />),
+        {
+          name: 'transition',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page One]',
+        'Loading One...',
+        'Suspend [Page Two]',
+        'Loading Two...',
+        // pre-warming
+        'Suspend [Page One]',
+        'Suspend [Child]',
+        'Loading Child...',
+        'Suspend [Page Two]',
+        // end pre-warming
+        'onTransitionStart(transition, 1000)',
+        'onMarkerProgress(transition, parent, 1000, 2000, [suspense one, suspense two])',
+        'onMarkerProgress(transition, one, 1000, 2000, [suspense one])',
+        'onMarkerProgress(transition, two, 1000, 2000, [suspense two])',
+        'onTransitionProgress(transition, 1000, 2000, [suspense one, suspense two])',
+      ]);
+
+      await resolveText('Page One');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Page One',
+        'Suspend [Child]',
+        'Loading Child...',
+        // pre-warming
+        'Suspend [Child]',
+        // end pre-warming
+        'onMarkerProgress(transition, parent, 1000, 3000, [suspense two, suspense child])',
+        'onMarkerProgress(transition, one, 1000, 3000, [suspense child])',
+        'onMarkerComplete(transition, page one, 1000, 3000)',
+        'onTransitionProgress(transition, 1000, 3000, [suspense two, suspense child])',
+      ]);
+
+      root.render(<App navigate={true} deleteOne={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Page Two]',
+        'Loading Two...',
+        // pre-warming
+        'Suspend [Page Two]',
+        // end pre-warming
+
+        // "suspense one" has unsuspended so shouldn't be included
+        // tracing marker "page one" has completed so shouldn't be included
+        // all children of "suspense child" haven't yet been rendered so shouldn't be included
+        'onMarkerProgress(transition, one, 1000, 4000, [])',
+        'onMarkerProgress(transition, parent, 1000, 4000, [suspense two])',
+        'onMarkerIncomplete(transition, one, 1000, [{endTime: 4000, name: suspense child, type: suspense}])',
+        'onMarkerIncomplete(transition, parent, 1000, [{endTime: 4000, name: suspense child, type: suspense}])',
+      ]);
+
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Page Two',
+        'onMarkerProgress(transition, parent, 1000, 5000, [])',
+        'onMarkerProgress(transition, two, 1000, 5000, [])',
+        'onMarkerComplete(transition, two, 1000, 5000)',
+        'onTransitionProgress(transition, 1000, 5000, [])',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('Suspense boundary not added by the transition is deleted', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({show}) {
+      return (
+        <React.unstable_TracingMarker name="parent">
+          {show ? (
+            <Suspense name="appended child">
+              <AsyncText text="Appended child" />
+            </Suspense>
+          ) : null}
+          <Suspense name="child">
+            <AsyncText text="Child" />
+          </Suspense>
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      startTransition(() => root.render(<App show={false} />), {
+        name: 'transition',
+      });
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Suspend [Child]',
+        // pre-warming
+        'Suspend [Child]',
+        // end pre-warming
+        'onTransitionStart(transition, 0)',
+        'onMarkerProgress(transition, parent, 0, 1000, [child])',
+        'onTransitionProgress(transition, 0, 1000, [child])',
+      ]);
+
+      root.render(<App show={true} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      // This appended child isn't part of the transition so we
+      // don't call any callback
+      await waitForAll([
+        'Suspend [Appended child]',
+        'Suspend [Child]',
+        // pre-warming
+        'Suspend [Appended child]',
+        'Suspend [Child]',
+      ]);
+
+      // This deleted child isn't part of the transition so we
+      // don't call any callbacks
+      root.render(<App show={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'Suspend [Child]',
+        // pre-warming
+        'Suspend [Child]',
+      ]);
+
+      await resolveText('Child');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      await waitForAll([
+        'Child',
+        'onMarkerProgress(transition, parent, 0, 4000, [])',
+        'onMarkerComplete(transition, parent, 0, 4000)',
+        'onTransitionProgress(transition, 0, 4000, [])',
+        'onTransitionComplete(transition, 0, 4000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('marker incomplete gets called properly if child suspense marker is not part of it', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({show, showSuspense}) {
+      return (
+        <React.unstable_TracingMarker name="parent">
+          {show ? (
+            <React.unstable_TracingMarker name="appended child">
+              {showSuspense ? (
+                <Suspense name="appended child">
+                  <AsyncText text="Appended child" />
+                </Suspense>
+              ) : null}
+            </React.unstable_TracingMarker>
+          ) : null}
+          <Suspense name="child">
+            <AsyncText text="Child" />
+          </Suspense>
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+
+    await act(async () => {
+      startTransition(
+        () => root.render(<App show={false} showSuspense={false} />),
+        {
+          name: 'transition one',
+        },
+      );
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    assertLog([
+      'Suspend [Child]',
+      // pre-warming
+      'Suspend [Child]',
+      // end pre-warming
+      'onTransitionStart(transition one, 0)',
+      'onMarkerProgress(transition one, parent, 0, 1000, [child])',
+      'onTransitionProgress(transition one, 0, 1000, [child])',
+    ]);
+
+    await act(async () => {
+      startTransition(
+        () => root.render(<App show={true} showSuspense={true} />),
+        {
+          name: 'transition two',
+        },
+      );
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    assertLog([
+      'Suspend [Appended child]',
+      'Suspend [Child]',
+      // pre-warming
+      'Suspend [Appended child]',
+      'Suspend [Child]',
+      // end pre-warming
+      'onTransitionStart(transition two, 1000)',
+      'onMarkerProgress(transition two, appended child, 1000, 2000, [appended child])',
+      'onTransitionProgress(transition two, 1000, 2000, [appended child])',
+    ]);
+
+    await act(async () => {
+      root.render(<App show={true} showSuspense={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    assertLog([
+      'Suspend [Child]',
+      // pre-warming
+      'Suspend [Child]',
+      // end pre-warming
+      'onMarkerProgress(transition two, appended child, 1000, 3000, [])',
+      'onMarkerIncomplete(transition two, appended child, 1000, [{endTime: 3000, name: appended child, type: suspense}])',
+    ]);
+
+    await act(async () => {
+      resolveText('Child');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    assertLog([
+      'Child',
+      'onMarkerProgress(transition one, parent, 0, 4000, [])',
+      'onMarkerComplete(transition one, parent, 0, 4000)',
+      'onTransitionProgress(transition one, 0, 4000, [])',
+      'onTransitionComplete(transition one, 0, 4000)',
+    ]);
+  });
+
+  // @gate enableTransitionTracing
+  it('warns when marker name changes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.log(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+    function App({markerName, markerKey}) {
+      return (
+        <React.unstable_TracingMarker name={markerName} key={markerKey}>
+          <Text text={markerName} />
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(async () => {
+      startTransition(
+        () => root.render(<App markerName="one" markerKey="key" />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await waitForAll([
+        'one',
+        'onTransitionStart(transition one, 0)',
+        'onMarkerComplete(transition one, one, 0, 1000)',
+        'onTransitionComplete(transition one, 0, 1000)',
+      ]);
+      startTransition(
+        () => root.render(<App markerName="two" markerKey="key" />),
+        {
+          name: 'transition two',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      // onMarkerComplete shouldn't be called for transitions with
+      // new keys
+      await waitForAll([
+        'two',
+        'onTransitionStart(transition two, 1000)',
+        'onTransitionComplete(transition two, 1000, 2000)',
+      ]);
+      assertConsoleErrorDev([
+        'Changing the name of a tracing marker after mount is not supported. ' +
+          'To remount the tracing marker, pass it a new key.\n' +
+          '    in App (at **)',
+      ]);
+      startTransition(
+        () => root.render(<App markerName="three" markerKey="new key" />),
+        {
+          name: 'transition three',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      // This should not warn and onMarkerComplete should be called
+      await waitForAll([
+        'three',
+        'onTransitionStart(transition three, 2000)',
+        'onMarkerComplete(transition three, three, 2000, 3000)',
+        'onTransitionComplete(transition three, 2000, 3000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('offscreen trees should not stop transition from completing', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.log(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      return (
+        <React.unstable_TracingMarker name="marker">
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Text" />
+          </Suspense>
+          <Activity mode="hidden">
+            <Suspense fallback={<Text text="Hidden Loading..." />}>
+              <AsyncText text="Hidden Text" />
+            </Suspense>
+          </Activity>
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(() => {
+      startTransition(() => root.render(<App />), {name: 'transition'});
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    assertLog([
+      'Suspend [Text]',
+      'Loading...',
+      // pre-warming
+      'Suspend [Text]',
+      'onTransitionStart(transition, 0)',
+      'Suspend [Hidden Text]',
+      'Hidden Loading...',
+    ]);
+
+    await act(() => {
+      resolveText('Text');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    assertLog([
+      'Text',
+      'onMarkerComplete(transition, marker, 0, 2000)',
+      'onTransitionComplete(transition, 0, 2000)',
+    ]);
+
+    await act(() => {
+      resolveText('Hidden Text');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    assertLog(['Hidden Text']);
+  });
+
+  // @gate enableTransitionTracing
+  it('discrete events', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />} name="suspense page">
+          <AsyncText text="Page Two" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+
+    await act(async () => {
+      ReactNoop.discreteUpdates(() =>
+        startTransition(() => root.render(<App />), {name: 'page transition'}),
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    assertLog([
+      'Suspend [Page Two]',
+      'Loading...',
+      // pre-warming
+      'Suspend [Page Two]',
+      // end pre-warming
+      'onTransitionStart(page transition, 0)',
+      'onTransitionProgress(page transition, 0, 1000, [suspense page])',
+    ]);
+    await act(async () => {
+      ReactNoop.discreteUpdates(() => resolveText('Page Two'));
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    assertLog([
+      'Page Two',
+      'onTransitionProgress(page transition, 0, 2000, [])',
+      'onTransitionComplete(page transition, 0, 2000)',
+    ]);
+  });
+
+  // @gate enableTransitionTracing
+  it('multiple commits happen before a paint', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.log(`onTransitionStart(${name}, ${startTime})`);
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.log(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.log(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      const [, setRerender] = useState(false);
+      React.useLayoutEffect(() => {
+        resolveText('Text');
+        setRerender(true);
+      });
+      return (
+        <>
+          <Suspense name="one" fallback={<Text text="Loading..." />}>
+            <AsyncText text="Text" />
+          </Suspense>
+          <Suspense name="two" fallback={<Text text="Loading Two..." />}>
+            <AsyncText text="Text Two" />
+          </Suspense>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+
+    await act(() => {
+      startTransition(() => root.render(<App />), {name: 'transition'});
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+
+    assertLog([
+      'Suspend [Text]',
+      'Loading...',
+      'Suspend [Text Two]',
+      'Loading Two...',
+      'Text',
+      'Suspend [Text Two]',
+      'Loading Two...',
+      // pre-warming
+      'Suspend [Text Two]',
+      // end pre-warming
+      'onTransitionStart(transition, 0)',
+      'onTransitionProgress(transition, 0, 1000, [two])',
+      // pre-warming
+      'Suspend [Text Two]',
+    ]);
+
+    await act(() => {
+      resolveText('Text Two');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    assertLog([
+      'Text Two',
+      'onTransitionProgress(transition, 0, 2000, [])',
+      'onTransitionComplete(transition, 0, 2000)',
+    ]);
+  });
+
+  // @gate enableTransitionTracing
+  it('transition callbacks work for multiple roots', async () => {
+    const getTransitionCallbacks = transitionName => {
+      return {
+        onTransitionStart: (name, startTime) => {
+          Scheduler.log(
+            `onTransitionStart(${name}, ${startTime}) /${transitionName}/`,
+          );
+        },
+        onTransitionProgress: (name, startTime, endTime, pending) => {
+          const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+          Scheduler.log(
+            `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}]) /${transitionName}/`,
+          );
+        },
+        onTransitionComplete: (name, startTime, endTime) => {
+          Scheduler.log(
+            `onTransitionComplete(${name}, ${startTime}, ${endTime}) /${transitionName}/`,
+          );
+        },
+      };
+    };
+
+    function App({name}) {
+      return (
+        <>
+          <Suspense name={name} fallback={<Text text={`Loading ${name}...`} />}>
+            <AsyncText text={`Text ${name}`} />
+          </Suspense>
+        </>
+      );
+    }
+
+    const rootOne = ReactNoop.createRoot({
+      unstable_transitionCallbacks: getTransitionCallbacks('root one'),
+    });
+
+    const rootTwo = ReactNoop.createRoot({
+      unstable_transitionCallbacks: getTransitionCallbacks('root two'),
+    });
+
+    await act(() => {
+      startTransition(() => rootOne.render(<App name="one" />), {
+        name: 'transition one',
+      });
+      startTransition(() => rootTwo.render(<App name="two" />), {
+        name: 'transition two',
+      });
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+
+    assertLog([
+      'Suspend [Text one]',
+      'Loading one...',
+      'Suspend [Text two]',
+      'Loading two...',
+      // pre-warming
+      'Suspend [Text one]',
+      'Suspend [Text two]',
+      // end pre-warming
+      'onTransitionStart(transition one, 0) /root one/',
+      'onTransitionProgress(transition one, 0, 1000, [one]) /root one/',
+      'onTransitionStart(transition two, 0) /root two/',
+      'onTransitionProgress(transition two, 0, 1000, [two]) /root two/',
+    ]);
+
+    await act(() => {
+      caches[0].resolve('Text one');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+
+    assertLog([
+      'Text one',
+      'onTransitionProgress(transition one, 0, 2000, []) /root one/',
+      'onTransitionComplete(transition one, 0, 2000) /root one/',
+    ]);
+
+    await act(() => {
+      resolveText('Text two');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+
+    assertLog([
+      'Text two',
+      'onTransitionProgress(transition two, 0, 3000, []) /root two/',
+      'onTransitionComplete(transition two, 0, 3000) /root two/',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
new file mode 100644
index 00000000000..b2eebfa5161
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -0,0 +1,156 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let ContinuousEventPriority;
+let startTransition;
+let useState;
+let useEffect;
+let act;
+let waitFor;
+let waitForPaint;
+let assertLog;
+
+describe('ReactUpdatePriority', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    ContinuousEventPriority =
+      require('react-reconciler/constants').ContinuousEventPriority;
+    startTransition = React.startTransition;
+    useState = React.useState;
+    useEffect = React.useEffect;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  it('setState inside passive effect triggered by sync update should have default priority', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App() {
+      const [state, setState] = useState(1);
+      useEffect(() => {
+        setState(2);
+      }, []);
+      return <Text text={state} />;
+    }
+
+    await act(() => {
+      ReactNoop.flushSync(() => {
+        root.render(<App />);
+      });
+      // Should not have flushed the effect update yet
+      assertLog([1]);
+    });
+    assertLog([2]);
+  });
+
+  it('setState inside passive effect triggered by idle update should have idle priority', async () => {
+    const root = ReactNoop.createRoot();
+
+    let setDefaultState;
+    function App() {
+      const [idleState, setIdleState] = useState(1);
+      const [defaultState, _setDefaultState] = useState(1);
+      setDefaultState = _setDefaultState;
+      useEffect(() => {
+        Scheduler.log('Idle update');
+        setIdleState(2);
+      }, []);
+      return <Text text={`Idle: ${idleState}, Default: ${defaultState}`} />;
+    }
+
+    await act(async () => {
+      ReactNoop.idleUpdates(() => {
+        root.render(<App />);
+      });
+      // Should not have flushed the effect update yet
+      await waitForPaint(['Idle: 1, Default: 1']);
+
+      // Schedule another update at default priority
+      setDefaultState(2);
+
+      if (gate(flags => flags.enableYieldingBeforePassive)) {
+        // The default update flushes first, because
+        await waitForPaint([
+          // Idle update is scheduled
+          'Idle update',
+        ]);
+        await waitForPaint([
+          // The default update flushes first, without including the idle update
+          'Idle: 1, Default: 2',
+        ]);
+      } else {
+        // The default update flushes first, because
+        await waitForPaint([
+          // Idle update is scheduled
+          'Idle update',
+
+          // The default update flushes first, without including the idle update
+          'Idle: 1, Default: 2',
+        ]);
+      }
+    });
+    // Now the idle update has flushed
+    assertLog(['Idle: 2, Default: 2']);
+  });
+
+  it('continuous updates should interrupt transitions', async () => {
+    const root = ReactNoop.createRoot();
+
+    let setCounter;
+    let setIsHidden;
+    function App() {
+      const [counter, _setCounter] = useState(1);
+      const [isHidden, _setIsHidden] = useState(false);
+      setCounter = _setCounter;
+      setIsHidden = _setIsHidden;
+      if (isHidden) {
+        return <Text text={'(hidden)'} />;
+      }
+      return (
+        <>
+          <Text text={'A' + counter} />
+          <Text text={'B' + counter} />
+          <Text text={'C' + counter} />
+        </>
+      );
+    }
+
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['A1', 'B1', 'C1']);
+    expect(root).toMatchRenderedOutput('A1B1C1');
+
+    await act(async () => {
+      startTransition(() => {
+        setCounter(2);
+      });
+      await waitFor(['A2']);
+      ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
+        setIsHidden(true);
+      });
+    });
+    assertLog([
+      // Because the hide update has continuous priority, it should interrupt the
+      // in-progress transition
+      '(hidden)',
+      // When the transition resumes, it's a no-op because the children are
+      // now hidden.
+      '(hidden)',
+    ]);
+    expect(root).toMatchRenderedOutput('(hidden)');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
new file mode 100644
index 00000000000..3aa76b0c2dd
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -0,0 +1,473 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let mockDevToolsHook;
+let allSchedulerTags;
+let allSchedulerTypes;
+let onCommitRootShouldYield;
+let act;
+let waitFor;
+let waitForAll;
+let assertLog;
+
+describe('updaters', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    allSchedulerTags = [];
+    allSchedulerTypes = [];
+
+    onCommitRootShouldYield = true;
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableUpdaterTracking = true;
+
+    mockDevToolsHook = {
+      injectInternals: jest.fn(() => {}),
+      isDevToolsPresent: true,
+      onCommitRoot: jest.fn(fiberRoot => {
+        if (onCommitRootShouldYield) {
+          Scheduler.log('onCommitRoot');
+        }
+        const schedulerTags = [];
+        const schedulerTypes = [];
+        fiberRoot.memoizedUpdaters.forEach(fiber => {
+          schedulerTags.push(fiber.tag);
+          schedulerTypes.push(fiber.elementType);
+        });
+        allSchedulerTags.push(schedulerTags);
+        allSchedulerTypes.push(schedulerTypes);
+      }),
+      onCommitUnmount: jest.fn(() => {}),
+      onPostCommitRoot: jest.fn(() => {}),
+      onScheduleRoot: jest.fn(() => {}),
+
+      // Profiling APIs
+      markCommitStarted: jest.fn(() => {}),
+      markCommitStopped: jest.fn(() => {}),
+      markComponentRenderStarted: jest.fn(() => {}),
+      markComponentRenderStopped: jest.fn(() => {}),
+      markComponentPassiveEffectMountStarted: jest.fn(() => {}),
+      markComponentPassiveEffectMountStopped: jest.fn(() => {}),
+      markComponentPassiveEffectUnmountStarted: jest.fn(() => {}),
+      markComponentPassiveEffectUnmountStopped: jest.fn(() => {}),
+      markComponentLayoutEffectMountStarted: jest.fn(() => {}),
+      markComponentLayoutEffectMountStopped: jest.fn(() => {}),
+      markComponentLayoutEffectUnmountStarted: jest.fn(() => {}),
+      markComponentLayoutEffectUnmountStopped: jest.fn(() => {}),
+      markComponentErrored: jest.fn(() => {}),
+      markComponentSuspended: jest.fn(() => {}),
+      markLayoutEffectsStarted: jest.fn(() => {}),
+      markLayoutEffectsStopped: jest.fn(() => {}),
+      markPassiveEffectsStarted: jest.fn(() => {}),
+      markPassiveEffectsStopped: jest.fn(() => {}),
+      markRenderStarted: jest.fn(() => {}),
+      markRenderYielded: jest.fn(() => {}),
+      markRenderStopped: jest.fn(() => {}),
+      markRenderScheduled: jest.fn(() => {}),
+      markForceUpdateScheduled: jest.fn(() => {}),
+      markStateUpdateScheduled: jest.fn(() => {}),
+    };
+
+    jest.mock(
+      'react-reconciler/src/ReactFiberDevToolsHook',
+      () => mockDevToolsHook,
+    );
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  it('should report the (host) root as the scheduler for root-level render', async () => {
+    const {HostRoot} = require('react-reconciler/src/ReactWorkTags');
+
+    const Parent = () => <Child />;
+    const Child = () => null;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(allSchedulerTags).toEqual([[HostRoot]]);
+    assertLog(['onCommitRoot']);
+
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(allSchedulerTags).toEqual([[HostRoot], [HostRoot]]);
+    assertLog(['onCommitRoot']);
+  });
+
+  it('should report a function component as the scheduler for a hooks update', async () => {
+    let scheduleForA = null;
+    let scheduleForB = null;
+
+    const Parent = () => (
+      <React.Fragment>
+        <SchedulingComponentA />
+        <SchedulingComponentB />
+      </React.Fragment>
+    );
+    const SchedulingComponentA = () => {
+      const [count, setCount] = React.useState(0);
+      scheduleForA = () => setCount(prevCount => prevCount + 1);
+      return <Child count={count} />;
+    };
+    const SchedulingComponentB = () => {
+      const [count, setCount] = React.useState(0);
+      scheduleForB = () => setCount(prevCount => prevCount + 1);
+      return <Child count={count} />;
+    };
+    const Child = () => null;
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(scheduleForA).not.toBeNull();
+    expect(scheduleForB).not.toBeNull();
+    expect(allSchedulerTypes).toEqual([[null]]);
+    assertLog(['onCommitRoot']);
+
+    await act(() => {
+      scheduleForA();
+    });
+    expect(allSchedulerTypes).toEqual([[null], [SchedulingComponentA]]);
+    assertLog(['onCommitRoot']);
+    await act(() => {
+      scheduleForB();
+    });
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SchedulingComponentA],
+      [SchedulingComponentB],
+    ]);
+    assertLog(['onCommitRoot']);
+  });
+
+  it('should report a class component as the scheduler for a setState update', async () => {
+    const Parent = () => <SchedulingComponent />;
+    class SchedulingComponent extends React.Component {
+      state = {};
+      render() {
+        instance = this;
+        return <Child />;
+      }
+    }
+    const Child = () => null;
+    let instance;
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Parent />);
+    });
+    expect(allSchedulerTypes).toEqual([[null]]);
+    assertLog(['onCommitRoot']);
+    expect(instance).not.toBeNull();
+    await act(() => {
+      instance.setState({});
+    });
+    expect(allSchedulerTypes).toEqual([[null], [SchedulingComponent]]);
+  });
+
+  it('should cover cascading updates', async () => {
+    let triggerActiveCascade = null;
+    let triggerPassiveCascade = null;
+
+    const Parent = () => <SchedulingComponent />;
+    const SchedulingComponent = () => {
+      const [cascade, setCascade] = React.useState(null);
+      triggerActiveCascade = () => setCascade('active');
+      triggerPassiveCascade = () => setCascade('passive');
+      return <CascadingChild cascade={cascade} />;
+    };
+    const CascadingChild = ({cascade}) => {
+      const [count, setCount] = React.useState(0);
+      Scheduler.log(`CascadingChild ${count}`);
+      React.useLayoutEffect(() => {
+        if (cascade === 'active') {
+          setCount(prevCount => prevCount + 1);
+        }
+        return () => {};
+      }, [cascade]);
+      React.useEffect(() => {
+        if (cascade === 'passive') {
+          setCount(prevCount => prevCount + 1);
+        }
+        return () => {};
+      }, [cascade]);
+      return count;
+    };
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(async () => {
+      root.render(<Parent />);
+      await waitFor(['CascadingChild 0', 'onCommitRoot']);
+    });
+    expect(triggerActiveCascade).not.toBeNull();
+    expect(triggerPassiveCascade).not.toBeNull();
+    expect(allSchedulerTypes).toEqual([[null]]);
+
+    await act(async () => {
+      triggerActiveCascade();
+      await waitFor([
+        'CascadingChild 0',
+        'onCommitRoot',
+        'CascadingChild 1',
+        'onCommitRoot',
+      ]);
+    });
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SchedulingComponent],
+      [CascadingChild],
+    ]);
+
+    await act(async () => {
+      triggerPassiveCascade();
+      await waitFor([
+        'CascadingChild 1',
+        'onCommitRoot',
+        'CascadingChild 2',
+        'onCommitRoot',
+      ]);
+    });
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SchedulingComponent],
+      [CascadingChild],
+      [SchedulingComponent],
+      [CascadingChild],
+    ]);
+
+    // Verify no outstanding flushes
+    await waitForAll([]);
+  });
+
+  // This test should be convertable to createRoot but the allScheduledTypes assertions are no longer the same
+  // So I'm leaving it in legacy mode for now and just disabling if legacy mode is turned off
+  // @gate !disableLegacyMode
+  it('should cover suspense pings', async () => {
+    let data = null;
+    let resolver = null;
+    let promise = null;
+    const fakeCacheRead = () => {
+      if (data === null) {
+        promise = new Promise(resolve => {
+          resolver = resolvedData => {
+            data = resolvedData;
+            resolve(resolvedData);
+          };
+        });
+        throw promise;
+      } else {
+        return data;
+      }
+    };
+    const Parent = () => (
+      <React.Suspense fallback={<Fallback />}>
+        <Suspender />
+      </React.Suspense>
+    );
+    const Fallback = () => null;
+    let setShouldSuspend = null;
+    const Suspender = ({suspend}) => {
+      const tuple = React.useState(false);
+      setShouldSuspend = tuple[1];
+      if (tuple[0] === true) {
+        return fakeCacheRead();
+      } else {
+        return null;
+      }
+    };
+
+    await act(() => {
+      ReactDOM.render(<Parent />, document.createElement('div'));
+      assertLog(['onCommitRoot']);
+    });
+    expect(setShouldSuspend).not.toBeNull();
+    expect(allSchedulerTypes).toEqual([[null]]);
+
+    await act(() => {
+      setShouldSuspend(true);
+    });
+    assertLog(['onCommitRoot']);
+    expect(allSchedulerTypes).toEqual([[null], [Suspender]]);
+
+    expect(resolver).not.toBeNull();
+    await act(() => {
+      resolver('abc');
+      return promise;
+    });
+    assertLog(['onCommitRoot']);
+    expect(allSchedulerTypes).toEqual([[null], [Suspender], [Suspender]]);
+
+    // Verify no outstanding flushes
+    await waitForAll([]);
+  });
+
+  it('should cover error handling', async () => {
+    let triggerError = null;
+
+    const Parent = () => {
+      const [shouldError, setShouldError] = React.useState(false);
+      triggerError = () => setShouldError(true);
+      return shouldError ? (
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>
+      ) : (
+        <ErrorBoundary>
+          <Yield value="initial" />
+        </ErrorBoundary>
+      );
+    };
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          return <Yield value="error" />;
+        }
+        return this.props.children;
+      }
+    }
+    const Yield = ({value}) => {
+      Scheduler.log(value);
+      return null;
+    };
+    const BrokenRender = () => {
+      throw new Error('Hello');
+    };
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Parent shouldError={false} />);
+    });
+    assertLog(['initial', 'onCommitRoot']);
+    expect(triggerError).not.toBeNull();
+
+    allSchedulerTypes.splice(0);
+    onCommitRootShouldYield = true;
+
+    await act(() => {
+      triggerError();
+    });
+    assertLog(['onCommitRoot', 'error', 'onCommitRoot']);
+    expect(allSchedulerTypes).toEqual([[Parent], [ErrorBoundary]]);
+
+    // Verify no outstanding flushes
+    await waitForAll([]);
+  });
+
+  it('should distinguish between updaters in the case of interleaved work', async () => {
+    const {
+      FunctionComponent,
+      HostRoot,
+    } = require('react-reconciler/src/ReactWorkTags');
+
+    let triggerLowPriorityUpdate = null;
+    let triggerSyncPriorityUpdate = null;
+
+    const SyncPriorityUpdater = () => {
+      const [count, setCount] = React.useState(0);
+      triggerSyncPriorityUpdate = () => setCount(prevCount => prevCount + 1);
+      Scheduler.log(`SyncPriorityUpdater ${count}`);
+      return <Yield value={`HighPriority ${count}`} />;
+    };
+    const LowPriorityUpdater = () => {
+      const [count, setCount] = React.useState(0);
+      triggerLowPriorityUpdate = () => {
+        React.startTransition(() => {
+          setCount(prevCount => prevCount + 1);
+        });
+      };
+      Scheduler.log(`LowPriorityUpdater ${count}`);
+      return <Yield value={`LowPriority ${count}`} />;
+    };
+    const Yield = ({value}) => {
+      Scheduler.log(`Yield ${value}`);
+      return null;
+    };
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    root.render(
+      <React.Fragment>
+        <SyncPriorityUpdater />
+        <LowPriorityUpdater />
+      </React.Fragment>,
+    );
+
+    // Render everything initially.
+    await waitForAll([
+      'SyncPriorityUpdater 0',
+      'Yield HighPriority 0',
+      'LowPriorityUpdater 0',
+      'Yield LowPriority 0',
+      'onCommitRoot',
+    ]);
+    expect(triggerLowPriorityUpdate).not.toBeNull();
+    expect(triggerSyncPriorityUpdate).not.toBeNull();
+    expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+    // Render a partial update, but don't finish.
+    await act(async () => {
+      triggerLowPriorityUpdate();
+      await waitFor(['LowPriorityUpdater 1']);
+      expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+      // Interrupt with higher priority work.
+      ReactDOM.flushSync(triggerSyncPriorityUpdate);
+      assertLog([
+        'SyncPriorityUpdater 1',
+        'Yield HighPriority 1',
+        'onCommitRoot',
+      ]);
+      expect(allSchedulerTypes).toEqual([[null], [SyncPriorityUpdater]]);
+
+      // Finish the initial partial update
+      triggerLowPriorityUpdate();
+      await waitForAll([
+        'LowPriorityUpdater 2',
+        'Yield LowPriority 2',
+        'onCommitRoot',
+      ]);
+    });
+    expect(allSchedulerTags).toEqual([
+      [HostRoot],
+      [FunctionComponent],
+      [FunctionComponent],
+    ]);
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SyncPriorityUpdater],
+      [LowPriorityUpdater],
+    ]);
+
+    // Verify no outstanding flushes
+    await waitForAll([]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactUse-test.js b/packages/react-reconciler/src/__tests__/ReactUse-test.js
new file mode 100644
index 00000000000..9714cb4a3e2
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactUse-test.js
@@ -0,0 +1,2192 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let use;
+let useDebugValue;
+let useState;
+let useTransition;
+let useMemo;
+let useEffect;
+let Suspense;
+let startTransition;
+let pendingTextRequests;
+let waitFor;
+let waitForPaint;
+let assertLog;
+let waitForAll;
+let waitForMicrotasks;
+let assertConsoleErrorDev;
+
+describe('ReactUse', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    use = React.use;
+    useDebugValue = React.useDebugValue;
+    useState = React.useState;
+    useTransition = React.useTransition;
+    useMemo = React.useMemo;
+    useEffect = React.useEffect;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    waitFor = InternalTestUtils.waitFor;
+    waitForMicrotasks = InternalTestUtils.waitForMicrotasks;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+
+    pendingTextRequests = new Map();
+  });
+
+  function resolveTextRequests(text) {
+    const requests = pendingTextRequests.get(text);
+    if (requests !== undefined) {
+      pendingTextRequests.delete(text);
+      requests.forEach(resolve => resolve(text));
+    }
+  }
+
+  function getAsyncText(text) {
+    // getAsyncText is completely uncached — it performs a new async operation
+    // every time it's called. During a transition, React should be able to
+    // unwrap it anyway.
+    Scheduler.log(`Async text requested [${text}]`);
+    return new Promise(resolve => {
+      const requests = pendingTextRequests.get(text);
+      if (requests !== undefined) {
+        requests.push(resolve);
+        pendingTextRequests.set(text, requests);
+      } else {
+        pendingTextRequests.set(text, [resolve]);
+      }
+    });
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  // This behavior was intentionally disabled to derisk the rollout of `use`.
+  // It changes the behavior of old, pre-`use` Suspense implementations. We may
+  // add this back; however, the plan is to migrate all existing Suspense code
+  // to `use`, so the extra code probably isn't worth it.
+  // @gate TODO
+  it('if suspended fiber is pinged in a microtask, retry immediately without unwinding the stack', async () => {
+    let fulfilled = false;
+    function Async() {
+      if (fulfilled) {
+        return <Text text="Async" />;
+      }
+      Scheduler.log('Suspend!');
+      throw Promise.resolve().then(() => {
+        Scheduler.log('Resolve in microtask');
+        fulfilled = true;
+      });
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    assertLog([
+      // React will yield when the async component suspends.
+      'Suspend!',
+      'Resolve in microtask',
+
+      // Finished rendering without unwinding the stack or preparing a fallback.
+      'Async',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  it('if suspended fiber is pinged in a microtask, it does not block a transition from completing', async () => {
+    let fulfilled = false;
+    function Async() {
+      if (fulfilled) {
+        return <Text text="Async" />;
+      }
+      Scheduler.log('Suspend!');
+      throw Promise.resolve().then(() => {
+        Scheduler.log('Resolve in microtask');
+        fulfilled = true;
+      });
+    }
+
+    function App() {
+      return <Async />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Suspend!', 'Resolve in microtask', 'Async']);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  it('does not infinite loop if already fulfilled thenable is thrown', async () => {
+    // An already fulfilled promise should never be thrown. Since it already
+    // fulfilled, we shouldn't bother trying to render again — doing so would
+    // likely lead to an infinite loop. This scenario should only happen if a
+    // userspace Suspense library makes an implementation mistake.
+
+    // Create an already fulfilled thenable
+    const thenable = {
+      then(ping) {},
+      status: 'fulfilled',
+      value: null,
+    };
+
+    let i = 0;
+    function Async() {
+      if (i++ > 50) {
+        throw new Error('Infinite loop detected');
+      }
+      Scheduler.log('Suspend!');
+      // This thenable should never be thrown because it already fulfilled.
+      // But if it is thrown, React should handle it gracefully.
+      throw thenable;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog([
+      'Suspend!',
+      'Loading...',
+      // pre-warming
+      'Suspend!',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...');
+  });
+
+  it('basic use(promise)', async () => {
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.resolve('B');
+    const promiseC = Promise.resolve('C');
+
+    function Async() {
+      const text = use(promiseA) + use(promiseB) + use(promiseC);
+      return <Text text={text} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['ABC']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  it("using a promise that's not cached between attempts", async () => {
+    function Async() {
+      const text =
+        use(Promise.resolve('A')) +
+        use(Promise.resolve('B')) +
+        use(Promise.resolve('C'));
+      return <Text text={text} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. Creating ' +
+        'promises inside a Client Component or hook is not yet ' +
+        'supported, except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    assertLog(['ABC']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  it('using a rejected promise will throw', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.reject(new Error('Oops!'));
+    const promiseC = Promise.resolve('C');
+
+    // Jest/Node will raise an unhandled rejected error unless we await this. It
+    // works fine in the browser, though.
+    await expect(promiseB).rejects.toThrow('Oops!');
+
+    function Async() {
+      const text = use(promiseA) + use(promiseB) + use(promiseC);
+      return <Text text={text} />;
+    }
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <Async />
+        </ErrorBoundary>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Oops!', 'Oops!']);
+  });
+
+  it('use(promise) in multiple components', async () => {
+    // This tests that the state for tracking promises is reset per component.
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.resolve('B');
+    const promiseC = Promise.resolve('C');
+    const promiseD = Promise.resolve('D');
+
+    function Child({prefix}) {
+      return <Text text={prefix + use(promiseC) + use(promiseD)} />;
+    }
+
+    function Parent() {
+      return <Child prefix={use(promiseA) + use(promiseB)} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Parent />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['ABCD']);
+    expect(root).toMatchRenderedOutput('ABCD');
+  });
+
+  it('use(promise) in multiple sibling components', async () => {
+    // This tests that the state for tracking promises is reset per component.
+
+    const promiseA = {then: () => {}, status: 'pending', value: null};
+    const promiseB = {then: () => {}, status: 'pending', value: null};
+    const promiseC = {then: () => {}, status: 'fulfilled', value: 'C'};
+    const promiseD = {then: () => {}, status: 'fulfilled', value: 'D'};
+
+    function Sibling1({prefix}) {
+      return <Text text={use(promiseA) + use(promiseB)} />;
+    }
+
+    function Sibling2() {
+      return <Text text={use(promiseC) + use(promiseD)} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Sibling1 />
+          <Sibling2 />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+  });
+
+  it('erroring in the same component as an uncached promise does not result in an infinite loop', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={'Caught an error: ' + this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    let i = 0;
+    function Async({
+      // Intentionally destrucutring a prop here so that our production error
+      // stack trick is triggered at the beginning of the function
+      prop,
+    }) {
+      if (i++ > 50) {
+        throw new Error('Infinite loop detected');
+      }
+      try {
+        use(Promise.resolve('Async'));
+      } catch (e) {
+        Scheduler.log('Suspend! [Async]');
+        throw e;
+      }
+      throw new Error('Oops!');
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <ErrorBoundary>
+            <Async />
+          </ErrorBoundary>
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. Creating ' +
+        'promises inside a Client Component or hook is not yet ' +
+        'supported, except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+      'A component was suspended by an uncached promise. Creating ' +
+        'promises inside a Client Component or hook is not yet ' +
+        'supported, except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    assertLog([
+      // First attempt. The uncached promise suspends.
+      'Suspend! [Async]',
+      // Because the promise already fulfilled, we're able to unwrap the value
+      // immediately in a microtask.
+      //
+      // Then we proceed to the rest of the component, which throws an error.
+      'Caught an error: Oops!',
+
+      // During the sync error recovery pass, the component suspends, because
+      // we were unable to unwrap the value of the promise.
+      'Suspend! [Async]',
+      'Loading...',
+
+      // Because the error recovery attempt suspended, React can't tell if the
+      // error was actually fixed, or it was masked by the suspended data.
+      // In this case, it wasn't actually fixed, so if we were to commit the
+      // suspended fallback, it would enter an endless error recovery loop.
+      //
+      // Instead, we disable error recovery for these lanes and start
+      // over again.
+
+      // This time, the error is thrown and we commit the result.
+      'Suspend! [Async]',
+      'Caught an error: Oops!',
+    ]);
+    expect(root).toMatchRenderedOutput('Caught an error: Oops!');
+  });
+
+  it('basic use(context)', async () => {
+    const ContextA = React.createContext('');
+    const ContextB = React.createContext('B');
+
+    function Sync() {
+      const text = use(ContextA) + use(ContextB);
+      return text;
+    }
+
+    function App() {
+      return (
+        <ContextA.Provider value="A">
+          <Sync />
+        </ContextA.Provider>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    await waitForAll([]);
+    expect(root).toMatchRenderedOutput('AB');
+  });
+
+  it('interrupting while yielded should reset contexts', async () => {
+    let resolve;
+    const promise = new Promise(r => {
+      resolve = r;
+    });
+
+    const Context = React.createContext();
+
+    const lazy = React.lazy(() => {
+      return promise;
+    });
+
+    function ContextText() {
+      return <Text text={use(Context)} />;
+    }
+
+    function App({text}) {
+      return (
+        <div>
+          <Context.Provider value={text}>
+            {lazy}
+            <ContextText />
+          </Context.Provider>
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    startTransition(() => {
+      root.render(<App text="world" />);
+    });
+    await waitForPaint([]);
+    expect(root).toMatchRenderedOutput(null);
+
+    await resolve({default: <Text key="hi" text="Hello " />});
+
+    // Higher priority update that interrupts the first render
+    ReactNoop.flushSync(() => {
+      root.render(<App text="world!" />);
+    });
+
+    assertLog(['Hello ', 'world!']);
+
+    expect(root).toMatchRenderedOutput(<div>Hello world!</div>);
+  });
+
+  it('warns if use(promise) is wrapped with try/catch block', async () => {
+    function Async() {
+      try {
+        return <Text text={use(Promise.resolve('Async'))} />;
+      } catch (e) {
+        return <Text text="Fallback" />;
+      }
+    }
+
+    spyOnDev(console, 'error').mockImplementation(() => {});
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.mock.calls[0][0]).toContain(
+        '`use` was called from inside a try/catch block. This is not ' +
+          'allowed and can lead to unexpected behavior. To handle errors ' +
+          'triggered by `use`, wrap your component in a error boundary.',
+      );
+      console.error.mockRestore();
+    }
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('during a transition, can unwrap async operations even if nothing is cached', async () => {
+    function App() {
+      return <Text text={use(getAsyncText('Async'))} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="(empty)" />
+        </Suspense>,
+      );
+    });
+    assertLog(['(empty)']);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    assertLog(['Async text requested [Async]']);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(() => {
+      resolveTextRequests('Async');
+    });
+    assertLog(['Async text requested [Async]', 'Async']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '     in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it("does not prevent a Suspense fallback from showing if it's a new boundary, even during a transition", async () => {
+    function App() {
+      return <Text text={use(getAsyncText('Async'))} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    // Even though the initial render was a transition, it shows a fallback.
+    assertLog(['Async text requested [Async]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // Resolve the original data
+    await act(() => {
+      resolveTextRequests('Async');
+    });
+    // During the retry, a fresh request is initiated. Now we must wait for this
+    // one to finish.
+    // TODO: This is awkward. Intuitively, you might expect for `act` to wait
+    // until the new request has finished loading. But if it's mock IO, as in
+    // this test, how would the developer be able to imperatively flush it if it
+    // wasn't initiated until the current `act` call? Can't think of a better
+    // strategy at the moment.
+    assertLog(['Async text requested [Async]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // Flush the second request.
+    await act(() => {
+      resolveTextRequests('Async');
+    });
+    // This time it finishes because it was during a retry.
+    assertLog(['Async text requested [Async]', 'Async']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '     in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('when waiting for data to resolve, a fresh update will trigger a restart', async () => {
+    function App() {
+      return <Text text={use(getAsyncText('Will never resolve'))} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Suspense fallback={<Text text="Loading..." />} />);
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    assertLog(['Async text requested [Will never resolve]']);
+
+    await act(() => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="Something different" />
+        </Suspense>,
+      );
+    });
+    assertLog(['Something different']);
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('when waiting for data to resolve, an update on a different root does not cause work to be dropped', async () => {
+    const promise = getAsyncText('Hi');
+
+    function App() {
+      return <Text text={use(promise)} />;
+    }
+
+    const root1 = ReactNoop.createRoot();
+    assertLog(['Async text requested [Hi]']);
+
+    await act(() => {
+      root1.render(<Suspense fallback={<Text text="Loading..." />} />);
+    });
+
+    // Start a transition on one root. It will suspend.
+    await act(() => {
+      startTransition(() => {
+        root1.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    assertLog([]);
+
+    // While we're waiting for the first root's data to resolve, a second
+    // root renders.
+    const root2 = ReactNoop.createRoot();
+    await act(() => {
+      root2.render('Do re mi');
+    });
+    expect(root2).toMatchRenderedOutput('Do re mi');
+
+    // Once the first root's data is ready, we should finish its transition.
+    await act(async () => {
+      await resolveTextRequests('Hi');
+    });
+    assertLog(['Hi']);
+    expect(root1).toMatchRenderedOutput('Hi');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('while suspended, hooks cannot be called (i.e. current dispatcher is unset correctly)', async () => {
+    function App() {
+      return <Text text={use(getAsyncText('Will never resolve'))} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Suspense fallback={<Text text="Loading..." />} />);
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>,
+        );
+      });
+    });
+    assertLog(['Async text requested [Will never resolve]']);
+
+    // Calling a hook should error because we're oustide of a component.
+    expect(useState).toThrow(
+      'Invalid hook call. Hooks can only be called inside of the body of a ' +
+        'function component.',
+    );
+  });
+
+  it('unwraps thenable that fulfills synchronously without suspending', async () => {
+    function App() {
+      const thenable = {
+        then(resolve) {
+          // This thenable immediately resolves, synchronously, without waiting
+          // a microtask.
+          resolve('Hi');
+        },
+      };
+      try {
+        return <Text text={use(thenable)} />;
+      } catch {
+        throw new Error(
+          '`use` should not suspend because the thenable resolved synchronously.',
+        );
+      }
+    }
+    // Because the thenable resolves synchronously, we should be able to finish
+    // rendering synchronously, with no fallback.
+    const root = ReactNoop.createRoot();
+    ReactNoop.flushSync(() => {
+      root.render(<App />);
+    });
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('does not suspend indefinitely if an interleaved update was skipped', async () => {
+    function Child({childShouldSuspend}) {
+      return (
+        <Text
+          text={
+            childShouldSuspend
+              ? use(getAsyncText('Will never resolve'))
+              : 'Child'
+          }
+        />
+      );
+    }
+
+    let setChildShouldSuspend;
+    let setShowChild;
+    function Parent() {
+      const [showChild, _setShowChild] = useState(true);
+      setShowChild = _setShowChild;
+
+      const [childShouldSuspend, _setChildShouldSuspend] = useState(false);
+      setChildShouldSuspend = _setChildShouldSuspend;
+
+      Scheduler.log(
+        `childShouldSuspend: ${childShouldSuspend}, showChild: ${showChild}`,
+      );
+      return showChild ? (
+        <Child childShouldSuspend={childShouldSuspend} />
+      ) : (
+        <Text text="(empty)" />
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Parent />);
+    });
+    assertLog(['childShouldSuspend: false, showChild: true', 'Child']);
+    expect(root).toMatchRenderedOutput('Child');
+
+    await act(async () => {
+      // Perform an update that causes the app to suspend
+      startTransition(() => {
+        setChildShouldSuspend(true);
+      });
+      await waitFor(['childShouldSuspend: true, showChild: true']);
+      // While the update is in progress, schedule another update.
+      startTransition(() => {
+        setShowChild(false);
+      });
+    });
+    assertLog([
+      // Because the interleaved update is not higher priority than what we were
+      // already working on, it won't interrupt. The first update will continue,
+      // and will suspend.
+      'Async text requested [Will never resolve]',
+
+      // Instead of waiting for the promise to resolve, React notices there's
+      // another pending update that it hasn't tried yet. It will switch to
+      // rendering that instead.
+      //
+      // This time, the update hides the component that previous was suspending,
+      // so it finishes successfully.
+      'childShouldSuspend: false, showChild: false',
+      '(empty)',
+
+      // Finally, React attempts to render the first update again. It also
+      // finishes successfully, because it was rebased on top of the update that
+      // hid the suspended component.
+      // NOTE: These this render happened to not be entangled with the previous
+      // one. If they had been, this update would have been included in the
+      // previous render, and there wouldn't be an extra one here. This could
+      // change if we change our entanglement heurstics. Semantically, it
+      // shouldn't matter, though in general we try to work on transitions in
+      // parallel whenever possible. So even though in this particular case, the
+      // extra render is unnecessary, it's a nice property that it wasn't
+      // entangled with the other transition.
+      'childShouldSuspend: true, showChild: false',
+      '(empty)',
+    ]);
+    expect(root).toMatchRenderedOutput('(empty)');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('when replaying a suspended component, reuses the hooks computed during the previous attempt (Memo)', async () => {
+    function ExcitingText({text}) {
+      // This computes the uppercased version of some text. Pretend it's an
+      // expensive operation that we want to reuse.
+      const uppercaseText = useMemo(() => {
+        Scheduler.log('Compute uppercase: ' + text);
+        return text.toUpperCase();
+      }, [text]);
+
+      // This adds an exclamation point to the text. Pretend it's an async
+      // operation that is sent to a service for processing.
+      const exclamatoryText = use(getAsyncText(uppercaseText + '!'));
+
+      // This surrounds the text with sparkle emojis. The purpose in this test
+      // is to show that you can suspend in the middle of a sequence of hooks
+      // without breaking anything.
+      const sparklingText = useMemo(() => {
+        Scheduler.log('Add sparkles: ' + exclamatoryText);
+        return `✨ ${exclamatoryText} ✨`;
+      }, [exclamatoryText]);
+
+      return <Text text={sparklingText} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<ExcitingText text="Hello" />);
+      });
+    });
+
+    // Suspends while we wait for the async service to respond.
+    assertLog(['Compute uppercase: Hello', 'Async text requested [HELLO!]']);
+    expect(root).toMatchRenderedOutput(null);
+
+    // The data is received.
+    await act(() => {
+      resolveTextRequests('HELLO!');
+    });
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in ExcitingText (at **)',
+    ]);
+
+    assertLog([
+      // We shouldn't run the uppercase computation again, because we can reuse
+      // the computation from the previous attempt.
+      // 'Compute uppercase: Hello',
+
+      'Async text requested [HELLO!]',
+      'Add sparkles: HELLO!',
+      '✨ HELLO! ✨',
+    ]);
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('when replaying a suspended component, reuses the hooks computed during the previous attempt (State)', async () => {
+    let _setFruit;
+    let _setVegetable;
+    function Kitchen() {
+      const [fruit, setFruit] = useState('apple');
+      _setFruit = setFruit;
+      const usedFruit = use(getAsyncText(fruit));
+      const [vegetable, setVegetable] = useState('carrot');
+      _setVegetable = setVegetable;
+      return <Text text={usedFruit + ' ' + vegetable} />;
+    }
+
+    // Initial render.
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<Kitchen />);
+      });
+    });
+    assertLog(['Async text requested [apple]']);
+    expect(root).toMatchRenderedOutput(null);
+    await act(() => {
+      resolveTextRequests('apple');
+    });
+    assertLog(['Async text requested [apple]', 'apple carrot']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Kitchen (at **)',
+    ]);
+
+    expect(root).toMatchRenderedOutput('apple carrot');
+
+    // Update the state variable after the use().
+    await act(() => {
+      startTransition(() => {
+        _setVegetable('dill');
+      });
+    });
+    assertLog(['Async text requested [apple]']);
+    expect(root).toMatchRenderedOutput('apple carrot');
+    await act(() => {
+      resolveTextRequests('apple');
+    });
+    assertLog(['Async text requested [apple]', 'apple dill']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Kitchen (at **)',
+    ]);
+
+    expect(root).toMatchRenderedOutput('apple dill');
+
+    // Update the state variable before the use(). The second state is maintained.
+    await act(() => {
+      startTransition(() => {
+        _setFruit('banana');
+      });
+    });
+    assertLog(['Async text requested [banana]']);
+    expect(root).toMatchRenderedOutput('apple dill');
+    await act(() => {
+      resolveTextRequests('banana');
+    });
+    assertLog(['Async text requested [banana]', 'banana dill']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Kitchen (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('banana dill');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('when replaying a suspended component, reuses the hooks computed during the previous attempt (DebugValue+State)', async () => {
+    // Make sure we don't get a Hook mismatch warning on updates if there were non-stateful Hooks before the use().
+    let _setLawyer;
+    function Lexicon() {
+      useDebugValue(123);
+      const avocado = use(getAsyncText('aguacate'));
+      const [lawyer, setLawyer] = useState('abogado');
+      _setLawyer = setLawyer;
+      return <Text text={avocado + ' ' + lawyer} />;
+    }
+
+    // Initial render.
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<Lexicon />);
+      });
+    });
+    assertLog(['Async text requested [aguacate]']);
+    expect(root).toMatchRenderedOutput(null);
+    await act(() => {
+      resolveTextRequests('aguacate');
+    });
+    assertLog(['Async text requested [aguacate]', 'aguacate abogado']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Lexicon (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('aguacate abogado');
+
+    // Now update the state.
+    await act(() => {
+      startTransition(() => {
+        _setLawyer('avocat');
+      });
+    });
+    assertLog(['Async text requested [aguacate]']);
+    expect(root).toMatchRenderedOutput('aguacate abogado');
+    await act(() => {
+      resolveTextRequests('aguacate');
+    });
+    assertLog(['Async text requested [aguacate]', 'aguacate avocat']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in Lexicon (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('aguacate avocat');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it(
+    'wrap an async function with useMemo to skip running the function ' +
+      'twice when loading new data',
+    async () => {
+      function App({text}) {
+        const promiseForText = useMemo(async () => getAsyncText(text), [text]);
+        const asyncText = use(promiseForText);
+        return <Text text={asyncText} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        startTransition(() => {
+          root.render(<App text="Hello" />);
+        });
+      });
+      assertLog(['Async text requested [Hello]']);
+      expect(root).toMatchRenderedOutput(null);
+
+      await act(() => {
+        resolveTextRequests('Hello');
+      });
+      assertLog([
+        // We shouldn't request async text again, because the async function
+        // was memoized
+        // 'Async text requested [Hello]'
+
+        'Hello',
+      ]);
+    },
+  );
+
+  it('load multiple nested Suspense boundaries', async () => {
+    const promiseA = getAsyncText('A');
+    const promiseB = getAsyncText('B');
+    const promiseC = getAsyncText('C');
+    assertLog([
+      'Async text requested [A]',
+      'Async text requested [B]',
+      'Async text requested [C]',
+    ]);
+
+    function AsyncText({promise}) {
+      return <Text text={use(promise)} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Suspense fallback={<Text text="(Loading A...)" />}>
+          <AsyncText promise={promiseA} />
+          <Suspense fallback={<Text text="(Loading B...)" />}>
+            <AsyncText promise={promiseB} />
+            <Suspense fallback={<Text text="(Loading C...)" />}>
+              <AsyncText promise={promiseC} />
+            </Suspense>
+          </Suspense>
+        </Suspense>,
+      );
+    });
+    assertLog([
+      '(Loading A...)',
+      // pre-warming
+      '(Loading C...)',
+      '(Loading B...)',
+    ]);
+    expect(root).toMatchRenderedOutput('(Loading A...)');
+
+    await act(() => {
+      resolveTextRequests('A');
+    });
+    assertLog(['A', '(Loading B...)']);
+    expect(root).toMatchRenderedOutput('A(Loading B...)');
+
+    await act(() => {
+      resolveTextRequests('B');
+    });
+    assertLog(['B', '(Loading C...)']);
+    expect(root).toMatchRenderedOutput('AB(Loading C...)');
+
+    await act(() => {
+      resolveTextRequests('C');
+    });
+    assertLog(['C']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('load multiple nested Suspense boundaries (uncached requests)', async () => {
+    // This the same as the previous test, except the requests are not cached.
+    // The tree should still eventually resolve, despite the
+    // duplicate requests.
+    function AsyncText({text}) {
+      // This initiates a new request on each render.
+      return <Text text={use(getAsyncText(text))} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Suspense fallback={<Text text="(Loading A...)" />}>
+          <AsyncText text="A" />
+          <Suspense fallback={<Text text="(Loading B...)" />}>
+            <AsyncText text="B" />
+            <Suspense fallback={<Text text="(Loading C...)" />}>
+              <AsyncText text="C" />
+            </Suspense>
+          </Suspense>
+        </Suspense>,
+      );
+    });
+    assertLog(['Async text requested [A]', '(Loading A...)']);
+    expect(root).toMatchRenderedOutput('(Loading A...)');
+
+    await act(() => {
+      resolveTextRequests('A');
+    });
+    assertLog(['Async text requested [A]']);
+    expect(root).toMatchRenderedOutput('(Loading A...)');
+
+    await act(() => {
+      resolveTextRequests('A');
+    });
+    assertLog([
+      // React suspends until A finishes loading.
+      'Async text requested [A]',
+      'A',
+
+      // Now React can continue rendering the rest of the tree.
+
+      // React does not suspend on the inner requests, because that would
+      // block A from appearing. Instead it shows a fallback.
+      'Async text requested [B]',
+      '(Loading B...)',
+    ]);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in AsyncText (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('A(Loading B...)');
+
+    await act(() => {
+      resolveTextRequests('B');
+    });
+    assertLog(['Async text requested [B]']);
+    expect(root).toMatchRenderedOutput('A(Loading B...)');
+
+    await act(() => {
+      resolveTextRequests('B');
+    });
+    assertLog([
+      // React suspends until B finishes loading.
+      'Async text requested [B]',
+      'B',
+
+      // React does not suspend on C, because that would block B from appearing.
+      'Async text requested [C]',
+      '(Loading C...)',
+    ]);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in AsyncText (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('AB(Loading C...)');
+
+    await act(() => {
+      resolveTextRequests('C');
+    });
+    assertLog(['Async text requested [C]']);
+    expect(root).toMatchRenderedOutput('AB(Loading C...)');
+
+    await act(() => {
+      resolveTextRequests('C');
+    });
+    assertLog(['Async text requested [C]', 'C']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in AsyncText (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  it('use() combined with render phase updates', async () => {
+    function Async() {
+      const a = use(Promise.resolve('A'));
+      const [count, setCount] = useState(0);
+      if (count === 0) {
+        setCount(1);
+      }
+      const usedCount = use(Promise.resolve(count));
+      return <Text text={a + usedCount} />;
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['A1']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('A1');
+  });
+
+  it('basic promise as child', async () => {
+    const promise = Promise.resolve(<Text text="Hi" />);
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(promise);
+      });
+    });
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('basic async component', async () => {
+    async function App() {
+      await getAsyncText('Hi');
+      return <Text text="Hi" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Async text requested [Hi]']);
+    assertConsoleErrorDev([
+      '<App> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in App (at **)',
+    ]);
+    await act(() => resolveTextRequests('Hi'));
+    assertLog([
+      // TODO: We shouldn't have to replay the function body again. Skip
+      // straight to reconciliation.
+      'Async text requested [Hi]',
+      'Hi',
+    ]);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  // @gate enableSuspendingDuringWorkLoop
+  it('async child of a non-function component (e.g. a class)', async () => {
+    class App extends React.Component {
+      async render() {
+        const text = await getAsyncText('Hi');
+        return <Text text={text} />;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Async text requested [Hi]']);
+
+    await act(async () => resolveTextRequests('Hi'));
+    assertLog([
+      // TODO: We shouldn't have to replay the render function again. We could
+      // skip straight to reconciliation. However, it's not as urgent to fix
+      // this for fiber types that aren't function components, so we can special
+      // case those in the meantime.
+      'Async text requested [Hi]',
+      'Hi',
+    ]);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('async children are recursively unwrapped', async () => {
+    // This is a Usable of a Usable. `use` would only unwrap a single level, but
+    // when passed as a child, the reconciler recurisvely unwraps until it
+    // resolves to a non-Usable value.
+    const thenable = {
+      then() {},
+      status: 'fulfilled',
+      value: {
+        then() {},
+        status: 'fulfilled',
+        value: <Text text="Hi" />,
+      },
+    };
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(thenable);
+    });
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('async children are transparently unwrapped before being reconciled (top level)', async () => {
+    function Child({text}) {
+      useEffect(() => {
+        Scheduler.log(`Mount: ${text}`);
+      }, [text]);
+      return <Text text={text} />;
+    }
+
+    async function App({text}) {
+      // The child returned by this component is always a promise (async
+      // functions always return promises). React should unwrap it and reconcile
+      // the result, not the promise itself.
+      return <Child text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="A" />);
+      });
+    });
+    assertLog(['A', 'Mount: A']);
+    assertConsoleErrorDev([
+      '<App> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in App (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('A');
+
+    // Update the child's props. It should not remount.
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="B" />);
+      });
+    });
+    assertLog(['B', 'Mount: B']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('B');
+  });
+
+  it('async children are transparently unwrapped before being reconciled (siblings)', async () => {
+    function Child({text}) {
+      useEffect(() => {
+        Scheduler.log(`Mount: ${text}`);
+      }, [text]);
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <>
+            {Promise.resolve(<Child text="A" />)}
+            {Promise.resolve(<Child text="B" />)}
+            {Promise.resolve(<Child text="C" />)}
+          </>,
+        );
+      });
+    });
+    assertLog(['A', 'B', 'C', 'Mount: A', 'Mount: B', 'Mount: C']);
+    expect(root).toMatchRenderedOutput('ABC');
+
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <>
+            {Promise.resolve(<Child text="A" />)}
+            {Promise.resolve(<Child text="B" />)}
+            {Promise.resolve(<Child text="C" />)}
+          </>,
+        );
+      });
+    });
+    // Nothing should have remounted
+    assertLog(['A', 'B', 'C']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  it('async children are transparently unwrapped before being reconciled (siblings, reordered)', async () => {
+    function Child({text}) {
+      useEffect(() => {
+        Scheduler.log(`Mount: ${text}`);
+      }, [text]);
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <>
+            {Promise.resolve(<Child key="A" text="A" />)}
+            {Promise.resolve(<Child key="B" text="B" />)}
+            {Promise.resolve(<Child key="C" text="C" />)}
+          </>,
+        );
+      });
+    });
+    assertLog(['A', 'B', 'C', 'Mount: A', 'Mount: B', 'Mount: C']);
+    expect(root).toMatchRenderedOutput('ABC');
+
+    await act(() => {
+      startTransition(() => {
+        root.render(
+          <>
+            {Promise.resolve(<Child key="B" text="B" />)}
+            {Promise.resolve(<Child key="A" text="A" />)}
+            {Promise.resolve(<Child key="C" text="C" />)}
+          </>,
+        );
+      });
+    });
+    // Nothing should have remounted
+    assertLog(['B', 'A', 'C']);
+    expect(root).toMatchRenderedOutput('BAC');
+  });
+
+  it('basic Context as node', async () => {
+    const Context = React.createContext(null);
+
+    function Indirection({children}) {
+      Scheduler.log('Indirection');
+      return children;
+    }
+
+    function ParentOfContextNode() {
+      Scheduler.log('ParentOfContextNode');
+      return Context;
+    }
+
+    function Child({text}) {
+      useEffect(() => {
+        Scheduler.log('Mount');
+        return () => {
+          Scheduler.log('Unmount');
+        };
+      }, []);
+      return <Text text={text} />;
+    }
+
+    function App({contextValue, children}) {
+      const memoizedChildren = useMemo(
+        () => (
+          <Indirection>
+            <ParentOfContextNode />
+          </Indirection>
+        ),
+        [children],
+      );
+      return (
+        <Context.Provider value={contextValue}>
+          {memoizedChildren}
+        </Context.Provider>
+      );
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App contextValue={<Child text="A" />} />);
+    });
+    assertLog(['Indirection', 'ParentOfContextNode', 'A', 'Mount']);
+    expect(root).toMatchRenderedOutput('A');
+
+    // Update the child to a new value
+    await act(async () => {
+      root.render(<App contextValue={<Child text="B" />} />);
+    });
+    assertLog([
+      // Notice that the <Indirection /> did not rerender, because the
+      // update was sent via Context.
+
+      // TODO: We shouldn't have to re-render the parent of the context node.
+      // This happens because we need to reconcile the parent's children again.
+      // However, we should be able to skip directly to reconcilation without
+      // evaluating the component. One way to do this might be to mark the
+      // context dependency with a flag that says it was added
+      // during reconcilation.
+      'ParentOfContextNode',
+
+      // Notice that this was an update, not a remount.
+      'B',
+    ]);
+    expect(root).toMatchRenderedOutput('B');
+
+    // Delete the old child and replace it with a new one, by changing the key
+    await act(async () => {
+      root.render(<App contextValue={<Child key="C" text="C" />} />);
+    });
+    assertLog([
+      'ParentOfContextNode',
+
+      // A new instance is mounted
+      'C',
+      'Unmount',
+      'Mount',
+    ]);
+  });
+
+  it('context as node, at the root', async () => {
+    const Context = React.createContext(<Text text="Hi" />);
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(Context);
+      });
+    });
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('promises that resolves to a context, rendered as a node', async () => {
+    const Context = React.createContext(<Text text="Hi" />);
+    const promise = Promise.resolve(Context);
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(promise);
+      });
+    });
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('unwrap uncached promises inside forwardRef', async () => {
+    const asyncInstance = {};
+    const Async = React.forwardRef((props, ref) => {
+      React.useImperativeHandle(ref, () => asyncInstance);
+      const text = use(Promise.resolve('Async'));
+      return <Text text={text} />;
+    });
+
+    const ref = React.createRef();
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async ref={ref} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Async']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+    expect(ref.current).toBe(asyncInstance);
+  });
+
+  it('unwrap uncached promises inside memo', async () => {
+    const Async = React.memo(
+      props => {
+        const text = use(Promise.resolve(props.text));
+        return <Text text={text} />;
+      },
+      (a, b) => a.text === b.text,
+    );
+
+    function App({text}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async text={text} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Async" />);
+      });
+    });
+    assertLog(['Async']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+
+    // Update to the same value
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Async" />);
+      });
+    });
+    // Should not have re-rendered, because it's memoized
+    assertLog([]);
+    expect(root).toMatchRenderedOutput('Async');
+
+    // Update to a different value
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Async!" />);
+      });
+    });
+    assertLog(['Async!']);
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput('Async!');
+  });
+
+  // @gate !disableLegacyContext && !disableLegacyContextForFunctionComponents
+  it('unwrap uncached promises in component that accesses legacy context', async () => {
+    class ContextProvider extends React.Component {
+      static childContextTypes = {
+        legacyContext() {},
+      };
+      getChildContext() {
+        return {legacyContext: 'Async'};
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function Async({label}, context) {
+      const text = use(Promise.resolve(context.legacyContext + ` (${label})`));
+      return <Text text={text} />;
+    }
+    Async.contextTypes = {
+      legacyContext: () => {},
+    };
+
+    const AsyncMemo = React.memo(Async, (a, b) => a.label === b.label);
+
+    function App() {
+      return (
+        <ContextProvider>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <div>
+              <Async label="function component" />
+            </div>
+            <div>
+              <AsyncMemo label="memo component" />
+            </div>
+          </Suspense>
+        </ContextProvider>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['Async (function component)', 'Async (memo component)']);
+    assertConsoleErrorDev([
+      'ContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in App (at **)',
+      'Async uses the legacy contextTypes API which will be removed soon. ' +
+        'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in App (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Async (function component)</div>
+        <div>Async (memo component)</div>
+      </>,
+    );
+  });
+
+  it('regression test: updates while component is suspended should not be mistaken for render phase updates', async () => {
+    const promiseA = getAsyncText('A');
+    const promiseB = getAsyncText('B');
+    const promiseC = getAsyncText('C');
+    assertLog([
+      'Async text requested [A]',
+      'Async text requested [B]',
+      'Async text requested [C]',
+    ]);
+
+    let setState;
+    function App() {
+      const [state, _setState] = useState(promiseA);
+      setState = _setState;
+      return <Text text={use(state)} />;
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    expect(root).toMatchRenderedOutput(null);
+    await act(() => resolveTextRequests('A'));
+    assertLog(['A']);
+    expect(root).toMatchRenderedOutput('A');
+
+    // Update to B. This will suspend.
+    await act(() => startTransition(() => setState(promiseB)));
+    expect(root).toMatchRenderedOutput('A');
+
+    // While B is suspended, update to C. This should immediately interrupt
+    // the render for B. In the regression, this update was mistakenly treated
+    // as a render phase update.
+    ReactNoop.flushSync(() => setState(promiseC));
+
+    // Finish rendering.
+    await act(() => resolveTextRequests('C'));
+    assertLog(['C']);
+    expect(root).toMatchRenderedOutput('C');
+  });
+
+  it('an async component outside of a Suspense boundary crashes with an error (resolves in microtask)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    async function AsyncClientComponent() {
+      return <Text text="Hi" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <AsyncClientComponent />
+        </ErrorBoundary>,
+      );
+    });
+    assertConsoleErrorDev([
+      '<AsyncClientComponent> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in AsyncClientComponent (at **)',
+    ]);
+    assertLog([
+      'An unknown Component is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        'This error is often caused by accidentally adding ' +
+        "`'use client'` to a module that was originally written for " +
+        'the server.',
+      'An unknown Component is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        'This error is often caused by accidentally adding ' +
+        "`'use client'` to a module that was originally written for " +
+        'the server.',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      'An unknown Component is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        'This error is often caused by accidentally adding ' +
+        "`'use client'` to a module that was originally written for " +
+        'the server.',
+    );
+  });
+
+  it('an async component outside of a Suspense boundary crashes with an error (resolves in macrotask)', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    async function AsyncClientComponent() {
+      await waitForMicrotasks();
+      return <Text text="Hi" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <AsyncClientComponent />
+        </ErrorBoundary>,
+      );
+    });
+    assertConsoleErrorDev([
+      '<AsyncClientComponent> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in AsyncClientComponent (at **)',
+    ]);
+    assertLog([
+      'An unknown Component is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        'This error is often caused by accidentally adding ' +
+        "`'use client'` to a module that was originally written for " +
+        'the server.',
+      'An unknown Component is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        'This error is often caused by accidentally adding ' +
+        "`'use client'` to a module that was originally written for " +
+        'the server.',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      'An unknown Component is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        'This error is often caused by accidentally adding ' +
+        "`'use client'` to a module that was originally written for " +
+        'the server.',
+    );
+  });
+
+  it(
+    'warn if async client component calls a hook (e.g. useState) ' +
+      'during a non-sync update',
+    async () => {
+      async function AsyncClientComponent() {
+        useState();
+        return <Text text="Hi" />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        startTransition(() => {
+          root.render(<AsyncClientComponent />);
+        });
+      });
+      assertConsoleErrorDev([
+        // Note: This used to log a different warning about not using hooks
+        // inside async components, like we do on the server. Since then, we
+        // decided to warn for _any_ async client component regardless of
+        // whether the update is sync. But if we ever add back support for async
+        // client components, we should add back the hook warning.
+        '<AsyncClientComponent> is an async Client Component. ' +
+          'Only Server Components can be async at the moment. ' +
+          "This error is often caused by accidentally adding `'use client'` " +
+          'to a module that was originally written for the server.\n' +
+          '    in AsyncClientComponent (at **)',
+        'A component was suspended by an uncached promise. ' +
+          'Creating promises inside a Client Component or hook is not yet supported, ' +
+          'except via a Suspense-compatible library or framework.\n' +
+          '    in AsyncClientComponent (at **)',
+      ]);
+    },
+  );
+
+  it('warn if async client component calls a hook (e.g. use)', async () => {
+    const promise = Promise.resolve();
+
+    async function AsyncClientComponent() {
+      use(promise);
+      return <Text text="Hi" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<AsyncClientComponent />);
+      });
+    });
+    assertConsoleErrorDev([
+      // Note: This used to log a different warning about not using hooks
+      // inside async components, like we do on the server. Since then, we
+      // decided to warn for _any_ async client component regardless of
+      // whether the update is sync. But if we ever add back support for async
+      // client components, we should add back the hook warning.
+      '<AsyncClientComponent> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in AsyncClientComponent (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in AsyncClientComponent (at **)',
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in AsyncClientComponent (at **)',
+    ]);
+  });
+
+  // @gate enableAsyncIterableChildren
+  it('async generator component', async () => {
+    let hi, world;
+    async function* App() {
+      // Only cached promises can be awaited in async generators because
+      // when we rerender, it'll issue another request which blocks the next.
+      await (hi || (hi = getAsyncText('Hi')));
+      yield <Text key="1" text="Hi" />;
+      yield ' ';
+      await (world || (world = getAsyncText('World')));
+      yield <Text key="2" text="World" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertConsoleErrorDev([
+      '<App> is an async Client Component. ' +
+        'Only Server Components can be async at the moment. ' +
+        "This error is often caused by accidentally adding `'use client'` " +
+        'to a module that was originally written for the server.\n' +
+        '    in App (at **)',
+    ]);
+    assertLog(['Async text requested [Hi]']);
+
+    await act(() => resolveTextRequests('Hi'));
+    assertConsoleErrorDev([
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+
+    assertLog(['Async text requested [World]']);
+
+    await act(() => resolveTextRequests('World'));
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in App (at **)',
+    ]);
+
+    assertLog(['Hi', 'World']);
+    expect(root).toMatchRenderedOutput('Hi World');
+  });
+
+  // @gate enableAsyncIterableChildren
+  it('async iterable children', async () => {
+    let hi, world;
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        // Only cached promises can be awaited in async iterables because
+        // when we retry, it'll ask for another iterator which issues another
+        // request which blocks the next.
+        await (hi || (hi = getAsyncText('Hi')));
+        yield <Text key="1" text="Hi" />;
+        yield ' ';
+        await (world || (world = getAsyncText('World')));
+        yield <Text key="2" text="World" />;
+      },
+    };
+
+    function App({children}) {
+      return <div>{children}</div>;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App>{iterable}</App>);
+      });
+    });
+    assertLog(['Async text requested [Hi]']);
+
+    await act(() => resolveTextRequests('Hi'));
+    assertConsoleErrorDev([
+      // We get this warning because the generator's promise themselves are not cached.
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in div (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    assertLog(['Async text requested [World]']);
+
+    await act(() => resolveTextRequests('World'));
+    assertConsoleErrorDev([
+      'A component was suspended by an uncached promise. ' +
+        'Creating promises inside a Client Component or hook is not yet supported, ' +
+        'except via a Suspense-compatible library or framework.\n' +
+        '    in div (at **)\n' +
+        '    in App (at **)',
+    ]);
+
+    assertLog(['Hi', 'World']);
+    expect(root).toMatchRenderedOutput(<div>Hi World</div>);
+  });
+
+  it(
+    'regression: does not get stuck in pending state after `use` suspends ' +
+      '(when `use` comes before all hooks)',
+    async () => {
+      // This is a regression test. The root cause was an issue where we failed to
+      // switch from the "re-render" dispatcher back to the "update" dispatcher
+      // after a `use` suspends and triggers a replay.
+      let update;
+      function App({promise}) {
+        const value = use(promise);
+
+        const [isPending, startLocalTransition] = useTransition();
+        update = () => {
+          startLocalTransition(() => {
+            root.render(<App promise={getAsyncText('Updated')} />);
+          });
+        };
+
+        return <Text text={value + (isPending ? ' (pending...)' : '')} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App promise={Promise.resolve('Initial')} />);
+      });
+      assertLog(['Initial']);
+      expect(root).toMatchRenderedOutput('Initial');
+
+      await act(() => update());
+      assertLog(['Async text requested [Updated]', 'Initial (pending...)']);
+
+      await act(() => resolveTextRequests('Updated'));
+      assertLog(['Updated']);
+      expect(root).toMatchRenderedOutput('Updated');
+    },
+  );
+
+  it(
+    'regression: does not get stuck in pending state after `use` suspends ' +
+      '(when `use` in in the middle of hook list)',
+    async () => {
+      // Same as previous test but `use` comes in between two hooks.
+      let update;
+      function App({promise}) {
+        // This hook is only here to test that `use` resumes correctly after
+        // suspended even if it comes in between other hooks.
+        useState(false);
+
+        const value = use(promise);
+
+        const [isPending, startLocalTransition] = useTransition();
+        update = () => {
+          startLocalTransition(() => {
+            root.render(<App promise={getAsyncText('Updated')} />);
+          });
+        };
+
+        return <Text text={value + (isPending ? ' (pending...)' : '')} />;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App promise={Promise.resolve('Initial')} />);
+      });
+      assertLog(['Initial']);
+      expect(root).toMatchRenderedOutput('Initial');
+
+      await act(() => update());
+      assertLog(['Async text requested [Updated]', 'Initial (pending...)']);
+
+      await act(() => resolveTextRequests('Updated'));
+      assertLog(['Updated']);
+      expect(root).toMatchRenderedOutput('Updated');
+    },
+  );
+});
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js b/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
new file mode 100644
index 00000000000..0d0287bca61
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
@@ -0,0 +1,967 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+
+describe('StrictEffectsMode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    act = require('internal-test-utils').act;
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+  });
+
+  // @gate !disableLegacyMode
+  it('should not double invoke effects in legacy mode', async () => {
+    const log = [];
+    function App({text}) {
+      React.useEffect(() => {
+        log.push('useEffect mount');
+        return () => log.push('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+        return () => log.push('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+  });
+
+  it('double invoking for effects works properly', async () => {
+    const log = [];
+    function App({text}) {
+      React.useEffect(() => {
+        log.push('useEffect mount');
+        return () => log.push('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+        return () => log.push('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'update'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual([
+      'useLayoutEffect unmount',
+      'useLayoutEffect mount',
+      'useEffect unmount',
+      'useEffect mount',
+    ]);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual(['useLayoutEffect unmount', 'useEffect unmount']);
+  });
+
+  it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', async () => {
+    const log = [];
+    function App({text}) {
+      React.useEffect(() => {
+        log.push('useEffect One mount');
+        return () => log.push('useEffect One unmount');
+      });
+
+      React.useEffect(() => {
+        log.push('useEffect Two mount');
+        return () => log.push('useEffect Two unmount');
+      });
+
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'useEffect One mount',
+        'useEffect Two mount',
+        'useEffect One unmount',
+        'useEffect Two unmount',
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+    } else {
+      expect(log).toEqual(['useEffect One mount', 'useEffect Two mount']);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'update'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual([
+      'useEffect One unmount',
+      'useEffect Two unmount',
+      'useEffect One mount',
+      'useEffect Two mount',
+    ]);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual(['useEffect One unmount', 'useEffect Two unmount']);
+  });
+
+  it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', async () => {
+    const log = [];
+    function App({text}) {
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect One mount');
+        return () => log.push('useLayoutEffect One unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect Two mount');
+        return () => log.push('useLayoutEffect Two unmount');
+      });
+
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'update'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual([
+      'useLayoutEffect One unmount',
+      'useLayoutEffect Two unmount',
+      'useLayoutEffect One mount',
+      'useLayoutEffect Two mount',
+    ]);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual([
+      'useLayoutEffect One unmount',
+      'useLayoutEffect Two unmount',
+    ]);
+  });
+
+  it('useEffect and useLayoutEffect is called twice when there is no unmount', async () => {
+    const log = [];
+    function App({text}) {
+      React.useEffect(() => {
+        log.push('useEffect mount');
+      });
+
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+      });
+
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'update'} />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual([]);
+  });
+
+  it('passes the right context to class component lifecycles', async () => {
+    const log = [];
+    class App extends React.PureComponent {
+      test() {}
+
+      componentDidMount() {
+        this.test();
+        log.push('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        this.test();
+        log.push('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        this.test();
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return null;
+      }
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+    } else {
+      expect(log).toEqual(['componentDidMount']);
+    }
+  });
+
+  it('double invoking works for class components', async () => {
+    const log = [];
+    class App extends React.PureComponent {
+      componentDidMount() {
+        log.push('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        log.push('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+    } else {
+      expect(log).toEqual(['componentDidMount']);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'update'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual(['componentDidUpdate']);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual(['componentWillUnmount']);
+  });
+
+  it('invokes componentWillUnmount for class components without componentDidMount', async () => {
+    const log = [];
+    class App extends React.PureComponent {
+      componentDidUpdate() {
+        log.push('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual(['componentWillUnmount']);
+    } else {
+      expect(log).toEqual([]);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'update'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual(['componentDidUpdate']);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual(['componentWillUnmount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not double invoke class lifecycles in legacy mode', async () => {
+    const log = [];
+    class App extends React.PureComponent {
+      componentDidMount() {
+        log.push('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        log.push('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['componentDidMount']);
+  });
+
+  it('double flushing passive effects only results in one double invoke', async () => {
+    const log = [];
+    function App({text}) {
+      const [state, setState] = React.useState(0);
+      React.useEffect(() => {
+        if (state !== 1) {
+          setState(1);
+        }
+        log.push('useEffect mount');
+        return () => log.push('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+        return () => log.push('useLayoutEffect unmount');
+      });
+
+      log.push(text);
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'mount',
+        'mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'mount',
+        'mount',
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'mount',
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+    }
+  });
+
+  it('newly mounted components after initial mount get double invoked', async () => {
+    const log = [];
+    let _setShowChild;
+    function Child() {
+      React.useEffect(() => {
+        log.push('Child useEffect mount');
+        return () => log.push('Child useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        log.push('Child useLayoutEffect mount');
+        return () => log.push('Child useLayoutEffect unmount');
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [showChild, setShowChild] = React.useState(false);
+      _setShowChild = setShowChild;
+      React.useEffect(() => {
+        log.push('App useEffect mount');
+        return () => log.push('App useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        log.push('App useLayoutEffect mount');
+        return () => log.push('App useLayoutEffect unmount');
+      });
+
+      return showChild && <Child />;
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+        'App useLayoutEffect unmount',
+        'App useEffect unmount',
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual(['App useLayoutEffect mount', 'App useEffect mount']);
+    }
+
+    log.length = 0;
+    await act(() => {
+      _setShowChild(true);
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'App useLayoutEffect unmount',
+        'Child useLayoutEffect mount',
+        'App useLayoutEffect mount',
+        'App useEffect unmount',
+        'Child useEffect mount',
+        'App useEffect mount',
+        'Child useLayoutEffect unmount',
+        'Child useEffect unmount',
+        'Child useLayoutEffect mount',
+        'Child useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'App useLayoutEffect unmount',
+        'Child useLayoutEffect mount',
+        'App useLayoutEffect mount',
+        'App useEffect unmount',
+        'Child useEffect mount',
+        'App useEffect mount',
+      ]);
+    }
+  });
+
+  it('classes and functions are double invoked together correctly', async () => {
+    const log = [];
+    class ClassChild extends React.PureComponent {
+      componentDidMount() {
+        log.push('componentDidMount');
+      }
+
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    function FunctionChild({text}) {
+      React.useEffect(() => {
+        log.push('useEffect mount');
+        return () => log.push('useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+        return () => log.push('useLayoutEffect unmount');
+      });
+      return text;
+    }
+
+    function App({text}) {
+      return (
+        <>
+          <ClassChild text={text} />
+          <FunctionChild text={text} />
+        </>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual([
+      'useLayoutEffect unmount',
+      'useLayoutEffect mount',
+      'useEffect unmount',
+      'useEffect mount',
+    ]);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual([
+      'componentWillUnmount',
+      'useLayoutEffect unmount',
+      'useEffect unmount',
+    ]);
+  });
+
+  it('classes without componentDidMount and functions are double invoked together correctly', async () => {
+    const log = [];
+    class ClassChild extends React.PureComponent {
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    function FunctionChild({text}) {
+      React.useEffect(() => {
+        log.push('useEffect mount');
+        return () => log.push('useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+        return () => log.push('useLayoutEffect unmount');
+      });
+      return text;
+    }
+
+    function App({text}) {
+      return (
+        <>
+          <ClassChild text={text} />
+          <FunctionChild text={text} />
+        </>
+      );
+    }
+
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    if (__DEV__) {
+      expect(log).toEqual([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+    }
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+        'root',
+      );
+    });
+
+    expect(log).toEqual([
+      'useLayoutEffect unmount',
+      'useLayoutEffect mount',
+      'useEffect unmount',
+      'useEffect mount',
+    ]);
+
+    log.length = 0;
+    await act(() => {
+      ReactNoop.unmountRootWithID('root');
+    });
+
+    expect(log).toEqual([
+      'componentWillUnmount',
+      'useLayoutEffect unmount',
+      'useEffect unmount',
+    ]);
+  });
+
+  // @gate __DEV__
+  it('should double invoke effects after a re-suspend', async () => {
+    // Not using log.push because it silences double render logs.
+    let log = [];
+    let shouldSuspend = true;
+    let resolve;
+    const suspensePromise = new Promise(_resolve => {
+      resolve = _resolve;
+    });
+    function Fallback() {
+      log.push('Fallback');
+      return 'Loading';
+    }
+
+    function Parent({prop}) {
+      log.push('Parent rendered');
+
+      React.useEffect(() => {
+        log.push('Parent create');
+        return () => {
+          log.push('Parent destroy');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        log.push('Parent dep create');
+        return () => {
+          log.push('Parent dep destroy');
+        };
+      }, [prop]);
+
+      return (
+        <React.Suspense fallback={<Fallback />}>
+          <Child prop={prop} />
+        </React.Suspense>
+      );
+    }
+
+    function Child({prop}) {
+      const [count, forceUpdate] = React.useState(0);
+      const ref = React.useRef(null);
+      log.push('Child rendered');
+      React.useEffect(() => {
+        log.push('Child create');
+        return () => {
+          log.push('Child destroy');
+          ref.current = true;
+        };
+      }, []);
+      const key = `${prop}-${count}`;
+      React.useEffect(() => {
+        log.push('Child dep create');
+        if (ref.current === true) {
+          ref.current = false;
+          forceUpdate(c => c + 1);
+          log.push('-----------------------after setState');
+          return;
+        }
+
+        return () => {
+          log.push('Child dep destroy');
+        };
+      }, [key]);
+
+      if (shouldSuspend) {
+        log.push('Child suspended');
+        throw suspensePromise;
+      }
+      return null;
+    }
+
+    // Initial mount
+    shouldSuspend = false;
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Parent />
+        </React.StrictMode>,
+      );
+    });
+
+    // Now re-suspend
+    shouldSuspend = true;
+    log = [];
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Parent />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'Parent rendered',
+      'Parent rendered',
+      'Child rendered',
+      'Child suspended',
+      'Fallback',
+      'Fallback',
+      // pre-warming
+      'Child rendered',
+      'Child suspended',
+    ]);
+
+    log = [];
+    // while suspended, update
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Parent prop={'bar'} />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'Parent rendered',
+      'Parent rendered',
+      'Child rendered',
+      'Child suspended',
+      'Fallback',
+      'Fallback',
+      'Parent dep destroy',
+      'Parent dep create',
+      // pre-warming
+      'Child rendered',
+      'Child suspended',
+    ]);
+
+    log = [];
+    // Now resolve and commit
+    await act(() => {
+      resolve();
+      shouldSuspend = false;
+    });
+
+    expect(log).toEqual([
+      'Child rendered',
+      'Child rendered',
+      // !!! Committed, destroy and create effect.
+      // !!! The other effect is not destroyed and created
+      // !!! because the dep didn't change
+      'Child dep destroy',
+      'Child dep create',
+
+      // Double invoke both effects
+      'Child destroy',
+      'Child dep destroy',
+      'Child create',
+      'Child dep create',
+      // Fires setState
+      '-----------------------after setState',
+      'Child rendered',
+      'Child rendered',
+      'Child dep create',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
new file mode 100644
index 00000000000..5829cd09042
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
@@ -0,0 +1,784 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let waitFor;
+let waitForAll;
+let waitForPaint;
+
+describe('StrictEffectsMode defaults', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  // @gate !disableLegacyMode
+  it('should not double invoke effects in legacy mode', async () => {
+    const log = [];
+    function App({text}) {
+      React.useEffect(() => {
+        log.push('useEffect mount');
+        return () => log.push('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        log.push('useLayoutEffect mount');
+        return () => log.push('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+
+    await act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+  });
+
+  // @gate !disableLegacyMode
+  it('should not double invoke class lifecycles in legacy mode', async () => {
+    const log = [];
+    class App extends React.PureComponent {
+      componentDidMount() {
+        log.push('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        log.push('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        log.push('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    await act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <React.StrictMode>
+          <App text={'mount'} />
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['componentDidMount']);
+  });
+
+  if (__DEV__) {
+    it('should flush double-invoked effects within the same frame as layout effects if there are no passive effects', async () => {
+      const log = [];
+      function ComponentWithEffects({label}) {
+        React.useLayoutEffect(() => {
+          Scheduler.log(`useLayoutEffect mount "${label}"`);
+          log.push(`useLayoutEffect mount "${label}"`);
+          return () => {
+            Scheduler.log(`useLayoutEffect unmount "${label}"`);
+            log.push(`useLayoutEffect unmount "${label}"`);
+          };
+        });
+
+        return label;
+      }
+
+      await act(async () => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <ComponentWithEffects label={'one'} />
+          </React.StrictMode>,
+        );
+
+        await waitForPaint(['useLayoutEffect mount "one"']);
+        expect(log).toEqual([
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+        ]);
+      });
+
+      log.length = 0;
+      await act(async () => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <ComponentWithEffects label={'one'} />
+            <ComponentWithEffects label={'two'} />
+          </React.StrictMode>,
+        );
+
+        expect(log).toEqual([]);
+        await waitForPaint([
+          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+        ]);
+        expect(log).toEqual([
+          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+
+          // Since "two" is new, it should be double-invoked.
+          'useLayoutEffect unmount "two"',
+          'useLayoutEffect mount "two"',
+        ]);
+      });
+    });
+
+    // This test also verifies that double-invoked effects flush synchronously
+    // within the same frame as passive effects.
+    it('should double invoke effects only for newly mounted components', async () => {
+      const log = [];
+      function ComponentWithEffects({label}) {
+        React.useEffect(() => {
+          log.push(`useEffect mount "${label}"`);
+          Scheduler.log(`useEffect mount "${label}"`);
+          return () => {
+            log.push(`useEffect unmount "${label}"`);
+            Scheduler.log(`useEffect unmount "${label}"`);
+          };
+        });
+
+        React.useLayoutEffect(() => {
+          log.push(`useLayoutEffect mount "${label}"`);
+          Scheduler.log(`useLayoutEffect mount "${label}"`);
+          return () => {
+            log.push(`useLayoutEffect unmount "${label}"`);
+            Scheduler.log(`useLayoutEffect unmount "${label}"`);
+          };
+        });
+
+        return label;
+      }
+
+      await act(async () => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <ComponentWithEffects label={'one'} />
+          </React.StrictMode>,
+        );
+
+        await waitForAll([
+          'useLayoutEffect mount "one"',
+          'useEffect mount "one"',
+        ]);
+        expect(log).toEqual([
+          'useLayoutEffect mount "one"',
+          'useEffect mount "one"',
+          'useLayoutEffect unmount "one"',
+          'useEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useEffect mount "one"',
+        ]);
+      });
+
+      log.length = 0;
+      await act(async () => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <ComponentWithEffects label={'one'} />
+            <ComponentWithEffects label={'two'} />
+          </React.StrictMode>,
+        );
+
+        await waitFor([
+          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+        ]);
+        expect(log).toEqual([
+          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+        ]);
+        log.length = 0;
+        await waitForAll([
+          'useEffect unmount "one"',
+          'useEffect mount "one"',
+          'useEffect mount "two"',
+        ]);
+        expect(log).toEqual([
+          'useEffect unmount "one"',
+          'useEffect mount "one"',
+          'useEffect mount "two"',
+
+          // Since "two" is new, it should be double-invoked.
+          'useLayoutEffect unmount "two"',
+          'useEffect unmount "two"',
+          'useLayoutEffect mount "two"',
+          'useEffect mount "two"',
+        ]);
+      });
+    });
+
+    it('double invoking for effects for modern roots', async () => {
+      const log = [];
+      function App({text}) {
+        React.useEffect(() => {
+          log.push('useEffect mount');
+          return () => log.push('useEffect unmount');
+        });
+
+        React.useLayoutEffect(() => {
+          log.push('useLayoutEffect mount');
+          return () => log.push('useLayoutEffect unmount');
+        });
+
+        return text;
+      }
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'update'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(log).toEqual(['useLayoutEffect unmount', 'useEffect unmount']);
+    });
+
+    it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', async () => {
+      const log = [];
+      function App({text}) {
+        React.useEffect(() => {
+          log.push('useEffect One mount');
+          return () => log.push('useEffect One unmount');
+        });
+
+        React.useEffect(() => {
+          log.push('useEffect Two mount');
+          return () => log.push('useEffect Two unmount');
+        });
+
+        return text;
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useEffect One mount',
+        'useEffect Two mount',
+        'useEffect One unmount',
+        'useEffect Two unmount',
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'update'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useEffect One unmount',
+        'useEffect Two unmount',
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(log).toEqual(['useEffect One unmount', 'useEffect Two unmount']);
+    });
+
+    it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', async () => {
+      const log = [];
+      function App({text}) {
+        React.useLayoutEffect(() => {
+          log.push('useLayoutEffect One mount');
+          return () => log.push('useLayoutEffect One unmount');
+        });
+
+        React.useLayoutEffect(() => {
+          log.push('useLayoutEffect Two mount');
+          return () => log.push('useLayoutEffect Two unmount');
+        });
+
+        return text;
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'update'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+      ]);
+    });
+
+    it('useEffect and useLayoutEffect is called twice when there is no unmount', async () => {
+      const log = [];
+      function App({text}) {
+        React.useEffect(() => {
+          log.push('useEffect mount');
+        });
+
+        React.useLayoutEffect(() => {
+          log.push('useLayoutEffect mount');
+        });
+
+        return text;
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'update'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual(['useLayoutEffect mount', 'useEffect mount']);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(log).toEqual([]);
+    });
+
+    it('disconnects refs during double invoking', async () => {
+      const onRefMock = jest.fn();
+      function App({text}) {
+        return (
+          <span
+            ref={ref => {
+              onRefMock(ref);
+            }}>
+            text
+          </span>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(onRefMock.mock.calls.length).toBe(3);
+      expect(onRefMock.mock.calls[0][0]).not.toBeNull();
+      expect(onRefMock.mock.calls[1][0]).toBe(null);
+      expect(onRefMock.mock.calls[2][0]).not.toBeNull();
+    });
+
+    it('passes the right context to class component lifecycles', async () => {
+      const log = [];
+      class App extends React.PureComponent {
+        test() {}
+
+        componentDidMount() {
+          this.test();
+          log.push('componentDidMount');
+        }
+
+        componentDidUpdate() {
+          this.test();
+          log.push('componentDidUpdate');
+        }
+
+        componentWillUnmount() {
+          this.test();
+          log.push('componentWillUnmount');
+        }
+
+        render() {
+          return null;
+        }
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+    });
+
+    it('double invoking works for class components', async () => {
+      const log = [];
+      class App extends React.PureComponent {
+        componentDidMount() {
+          log.push('componentDidMount');
+        }
+
+        componentDidUpdate() {
+          log.push('componentDidUpdate');
+        }
+
+        componentWillUnmount() {
+          log.push('componentWillUnmount');
+        }
+
+        render() {
+          return this.props.text;
+        }
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'update'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual(['componentDidUpdate']);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(log).toEqual(['componentWillUnmount']);
+    });
+
+    it('double flushing passive effects only results in one double invoke', async () => {
+      const log = [];
+      function App({text}) {
+        const [state, setState] = React.useState(0);
+        React.useEffect(() => {
+          if (state !== 1) {
+            setState(1);
+          }
+          log.push('useEffect mount');
+          return () => log.push('useEffect unmount');
+        });
+
+        React.useLayoutEffect(() => {
+          log.push('useLayoutEffect mount');
+          return () => log.push('useLayoutEffect unmount');
+        });
+
+        log.push(text);
+        return text;
+      }
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'mount',
+        'mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'mount',
+        'mount',
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+    });
+
+    it('newly mounted components after initial mount get double invoked', async () => {
+      let _setShowChild;
+      const log = [];
+      function Child() {
+        React.useEffect(() => {
+          log.push('Child useEffect mount');
+          return () => log.push('Child useEffect unmount');
+        });
+        React.useLayoutEffect(() => {
+          log.push('Child useLayoutEffect mount');
+          return () => log.push('Child useLayoutEffect unmount');
+        });
+
+        return null;
+      }
+
+      function App() {
+        const [showChild, setShowChild] = React.useState(false);
+        _setShowChild = setShowChild;
+        React.useEffect(() => {
+          log.push('App useEffect mount');
+          return () => log.push('App useEffect unmount');
+        });
+        React.useLayoutEffect(() => {
+          log.push('App useLayoutEffect mount');
+          return () => log.push('App useLayoutEffect unmount');
+        });
+
+        return showChild && <Child />;
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+        'App useLayoutEffect unmount',
+        'App useEffect unmount',
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        _setShowChild(true);
+      });
+
+      expect(log).toEqual([
+        'App useLayoutEffect unmount',
+        'Child useLayoutEffect mount',
+        'App useLayoutEffect mount',
+        'App useEffect unmount',
+        'Child useEffect mount',
+        'App useEffect mount',
+        'Child useLayoutEffect unmount',
+        'Child useEffect unmount',
+        'Child useLayoutEffect mount',
+        'Child useEffect mount',
+      ]);
+    });
+
+    it('classes and functions are double invoked together correctly', async () => {
+      const log = [];
+      class ClassChild extends React.PureComponent {
+        componentDidMount() {
+          log.push('componentDidMount');
+        }
+
+        componentWillUnmount() {
+          log.push('componentWillUnmount');
+        }
+
+        render() {
+          return this.props.text;
+        }
+      }
+
+      function FunctionChild({text}) {
+        React.useEffect(() => {
+          log.push('useEffect mount');
+          return () => log.push('useEffect unmount');
+        });
+        React.useLayoutEffect(() => {
+          log.push('useLayoutEffect mount');
+          return () => log.push('useLayoutEffect unmount');
+        });
+        return text;
+      }
+
+      function App({text}) {
+        return (
+          <React.StrictMode>
+            <ClassChild text={text} />
+            <FunctionChild text={text} />
+          </React.StrictMode>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(
+          <React.StrictMode>
+            <App text={'mount'} />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+
+      log.length = 0;
+      await act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(log).toEqual([
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+      ]);
+    });
+  }
+});
diff --git a/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js
new file mode 100644
index 00000000000..f6fa939e844
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 act;
+let ViewTransition;
+let React;
+let ReactServer;
+let ReactNoop;
+let ReactNoopFlightClient;
+let ReactNoopFlightServer;
+
+describe('ViewTransitionReactServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    ViewTransition = ReactServer.ViewTransition;
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+
+    jest.resetModules();
+    __unmockReact();
+    React = require('react');
+    ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    ReactNoop = require('react-noop-renderer');
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // @gate enableViewTransition || fb
+  it('can be rendered in React Server', async () => {
+    function App() {
+      return ReactServer.createElement(
+        ViewTransition,
+        {},
+        ReactServer.createElement('div', null, 'Hello, Dave!'),
+      );
+    }
+
+    const transport = ReactNoopFlightServer.render(
+      ReactServer.createElement(App, null),
+    );
+
+    await act(async () => {
+      const app = await ReactNoopFlightClient.read(transport);
+
+      ReactNoop.render(app);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<div>Hello, Dave!</div>);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap b/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap
new file mode 100644
index 00000000000..6d0f97a7b99
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactHooks works with ReactDOMServer calls inside a component 1`] = `"<p>hello</p>0<p>bye</p>"`;
diff --git a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
new file mode 100644
index 00000000000..2b5af2206b9
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
@@ -0,0 +1,919 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import {useInsertionEffect} from 'react';
+
+describe('useEffectEvent', () => {
+  let React;
+  let ReactNoop;
+  let Scheduler;
+  let act;
+  let createContext;
+  let useContext;
+  let useState;
+  let useEffectEvent;
+  let useEffect;
+  let useLayoutEffect;
+  let useMemo;
+  let waitForAll;
+  let assertLog;
+  let waitForThrow;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    act = require('internal-test-utils').act;
+    createContext = React.createContext;
+    useContext = React.useContext;
+    useState = React.useState;
+    useEffectEvent = React.useEffectEvent;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    useMemo = React.useMemo;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitForThrow = InternalTestUtils.waitForThrow;
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text} />;
+  }
+
+  it('memoizes basic case correctly', async () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const onClick = useEffectEvent(() => updateCount(c => c + incrementBy));
+
+      return (
+        <>
+          <IncrementButton onClick={() => onClick()} ref={button} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Counter incrementBy={1} />);
+    await waitForAll(['Increment', 'Count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 0" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog(['Increment', 'Count: 1']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 1" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 2',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    await waitForAll(['Increment', 'Count: 2']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
+
+    // Event uses the new prop
+    await act(() => button.current.increment());
+    assertLog(['Increment', 'Count: 12']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 12" />
+      </>,
+    );
+  });
+
+  it('can be defined more than once', async () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      multiply = () => {
+        this.props.onMouseEnter();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const onClick = useEffectEvent(() => updateCount(c => c + incrementBy));
+      const onMouseEnter = useEffectEvent(() => {
+        updateCount(c => c * incrementBy);
+      });
+
+      return (
+        <>
+          <IncrementButton
+            onClick={() => onClick()}
+            onMouseEnter={() => onMouseEnter()}
+            ref={button}
+          />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Counter incrementBy={5} />);
+    await waitForAll(['Increment', 'Count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 0" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog(['Increment', 'Count: 5']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 5" />
+      </>,
+    );
+
+    await act(() => button.current.multiply());
+    assertLog(['Increment', 'Count: 25']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 25" />
+      </>,
+    );
+  });
+
+  it('does not preserve `this` in event functions', async () => {
+    class GreetButton extends React.PureComponent {
+      greet = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text={'Say ' + this.props.hello} />;
+      }
+    }
+    function Greeter({hello}) {
+      const person = {
+        toString() {
+          return 'Jane';
+        },
+        greet() {
+          return updateGreeting(this + ' says ' + hello);
+        },
+      };
+      const [greeting, updateGreeting] = useState('Seb says ' + hello);
+      const onClick = useEffectEvent(person.greet);
+
+      return (
+        <>
+          <GreetButton hello={hello} onClick={() => onClick()} ref={button} />
+          <Text text={'Greeting: ' + greeting} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Greeter hello={'hej'} />);
+    await waitForAll(['Say hej', 'Greeting: Seb says hej']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Say hej" />
+        <span prop="Greeting: Seb says hej" />
+      </>,
+    );
+
+    await act(() => button.current.greet());
+    assertLog(['Say hej', 'Greeting: undefined says hej']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Say hej" />
+        <span prop="Greeting: undefined says hej" />
+      </>,
+    );
+  });
+
+  it('throws when called in render', async () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+
+      render() {
+        // Will throw.
+        this.props.onClick();
+
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const onClick = useEffectEvent(() => updateCount(c => c + incrementBy));
+
+      return (
+        <>
+          <IncrementButton onClick={() => onClick()} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Counter incrementBy={1} />);
+    await waitForThrow(
+      "A function wrapped in useEffectEvent can't be called during rendering.",
+    );
+    assertLog([]);
+  });
+
+  it("useLayoutEffect shouldn't re-fire when event handlers change", async () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const increment = useEffectEvent(amount =>
+        updateCount(c => c + (amount || incrementBy)),
+      );
+
+      useLayoutEffect(() => {
+        Scheduler.log('Effect: by ' + incrementBy * 2);
+        increment(incrementBy * 2);
+      }, [incrementBy]);
+
+      return (
+        <>
+          <IncrementButton onClick={() => increment()} ref={button} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Counter incrementBy={1} />);
+    assertLog([]);
+    await waitForAll([
+      'Increment',
+      'Count: 0',
+      'Effect: by 2',
+      'Increment',
+      'Count: 2',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Effect should not re-run because the dependency hasn't changed.
+      'Count: 3',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 3" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 4',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 4" />
+      </>,
+    );
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    await waitForAll([
+      'Increment',
+      'Count: 4',
+      'Effect: by 20',
+      'Increment',
+      'Count: 24',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 24" />
+      </>,
+    );
+
+    // Event uses the new prop
+    await act(() => button.current.increment());
+    assertLog(['Increment', 'Count: 34']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 34" />
+      </>,
+    );
+  });
+
+  it("useEffect shouldn't re-fire when event handlers change", async () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const increment = useEffectEvent(amount =>
+        updateCount(c => c + (amount || incrementBy)),
+      );
+
+      useEffect(() => {
+        Scheduler.log('Effect: by ' + incrementBy * 2);
+        increment(incrementBy * 2);
+      }, [incrementBy]);
+
+      return (
+        <>
+          <IncrementButton onClick={() => increment()} ref={button} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Counter incrementBy={1} />);
+    await waitForAll([
+      'Increment',
+      'Count: 0',
+      'Effect: by 2',
+      'Increment',
+      'Count: 2',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Effect should not re-run because the dependency hasn't changed.
+      'Count: 3',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 3" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 4',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 4" />
+      </>,
+    );
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    await waitForAll([
+      'Increment',
+      'Count: 4',
+      'Effect: by 20',
+      'Increment',
+      'Count: 24',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 24" />
+      </>,
+    );
+
+    // Event uses the new prop
+    await act(() => button.current.increment());
+    assertLog(['Increment', 'Count: 34']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 34" />
+      </>,
+    );
+  });
+
+  it('is stable in a custom hook', async () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function useCount(incrementBy) {
+      const [count, updateCount] = useState(0);
+      const increment = useEffectEvent(amount =>
+        updateCount(c => c + (amount || incrementBy)),
+      );
+
+      return [count, increment];
+    }
+
+    function Counter({incrementBy}) {
+      const [count, increment] = useCount(incrementBy);
+
+      useEffect(() => {
+        Scheduler.log('Effect: by ' + incrementBy * 2);
+        increment(incrementBy * 2);
+      }, [incrementBy]);
+
+      return (
+        <>
+          <IncrementButton onClick={() => increment()} ref={button} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Counter incrementBy={1} />);
+    await waitForAll([
+      'Increment',
+      'Count: 0',
+      'Effect: by 2',
+      'Increment',
+      'Count: 2',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 2" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Effect should not re-run because the dependency hasn't changed.
+      'Count: 3',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 3" />
+      </>,
+    );
+
+    await act(() => button.current.increment());
+    assertLog([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 4',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 4" />
+      </>,
+    );
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    await waitForAll([
+      'Increment',
+      'Count: 4',
+      'Effect: by 20',
+      'Increment',
+      'Count: 24',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 24" />
+      </>,
+    );
+
+    // Event uses the new prop
+    await act(() => button.current.increment());
+    assertLog(['Increment', 'Count: 34']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span prop="Increment" />
+        <span prop="Count: 34" />
+      </>,
+    );
+  });
+
+  it('is mutated before all other effects', async () => {
+    function Counter({value}) {
+      useInsertionEffect(() => {
+        Scheduler.log('Effect value: ' + value);
+        increment();
+      }, [value]);
+
+      // This is defined after the insertion effect, but it should
+      // update the event fn _before_ the insertion effect fires.
+      const increment = useEffectEvent(() => {
+        Scheduler.log('Event value: ' + value);
+      });
+
+      return <></>;
+    }
+
+    ReactNoop.render(<Counter value={1} />);
+    await waitForAll(['Effect value: 1', 'Event value: 1']);
+
+    await act(() => ReactNoop.render(<Counter value={2} />));
+    assertLog(['Effect value: 2', 'Event value: 2']);
+  });
+
+  it("doesn't provide a stable identity", async () => {
+    function Counter({shouldRender, value}) {
+      const onClick = useEffectEvent(() => {
+        Scheduler.log(
+          'onClick, shouldRender=' + shouldRender + ', value=' + value,
+        );
+      });
+
+      // onClick doesn't have a stable function identity so this effect will fire on every render.
+      // In a real app useEffectEvent functions should *not* be passed as a dependency, this is for
+      // testing purposes only.
+      useEffect(() => {
+        onClick();
+      }, [onClick]);
+
+      useEffect(() => {
+        onClick();
+      }, [shouldRender]);
+
+      return <></>;
+    }
+
+    ReactNoop.render(<Counter shouldRender={true} value={0} />);
+    await waitForAll([
+      'onClick, shouldRender=true, value=0',
+      'onClick, shouldRender=true, value=0',
+    ]);
+
+    ReactNoop.render(<Counter shouldRender={true} value={1} />);
+    await waitForAll(['onClick, shouldRender=true, value=1']);
+
+    ReactNoop.render(<Counter shouldRender={false} value={2} />);
+    await waitForAll([
+      'onClick, shouldRender=false, value=2',
+      'onClick, shouldRender=false, value=2',
+    ]);
+  });
+
+  it('event handlers always see the latest committed value', async () => {
+    let committedEventHandler = null;
+
+    function App({value}) {
+      const event = useEffectEvent(() => {
+        return 'Value seen by useEffectEvent: ' + value;
+      });
+
+      // Set up an effect that registers the event handler with an external
+      // event system (e.g. addEventListener).
+      useEffect(
+        () => {
+          // Log when the effect fires. In the test below, we'll assert that this
+          // only happens during initial render, not during updates.
+          Scheduler.log('Commit new event handler');
+          committedEventHandler = event;
+          return () => {
+            committedEventHandler = null;
+          };
+        },
+        // Note that we've intentionally omitted the event from the dependency
+        // array. But it will still be able to see the latest `value`. This is the
+        // key feature of useEffectEvent that makes it different from a regular closure.
+        [],
+      );
+      return 'Latest rendered value ' + value;
+    }
+
+    // Initial render
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App value={1} />);
+    });
+    assertLog(['Commit new event handler']);
+    expect(root).toMatchRenderedOutput('Latest rendered value 1');
+    expect(committedEventHandler()).toBe('Value seen by useEffectEvent: 1');
+
+    // Update
+    await act(() => {
+      root.render(<App value={2} />);
+    });
+    // No new event handler should be committed, because it was omitted from
+    // the dependency array.
+    assertLog([]);
+    // But the event handler should still be able to see the latest value.
+    expect(root).toMatchRenderedOutput('Latest rendered value 2');
+    expect(committedEventHandler()).toBe('Value seen by useEffectEvent: 2');
+  });
+
+  it('integration: implements docs chat room example', async () => {
+    function createConnection() {
+      let connectedCallback;
+      let timeout;
+      return {
+        connect() {
+          timeout = setTimeout(() => {
+            if (connectedCallback) {
+              connectedCallback();
+            }
+          }, 100);
+        },
+        on(event, callback) {
+          if (connectedCallback) {
+            throw Error('Cannot add the handler twice.');
+          }
+          if (event !== 'connected') {
+            throw Error('Only "connected" event is supported.');
+          }
+          connectedCallback = callback;
+        },
+        disconnect() {
+          clearTimeout(timeout);
+        },
+      };
+    }
+
+    function ChatRoom({roomId, theme}) {
+      const onConnected = useEffectEvent(() => {
+        Scheduler.log('Connected! theme: ' + theme);
+      });
+
+      useEffect(() => {
+        const connection = createConnection(roomId);
+        connection.on('connected', () => {
+          onConnected();
+        });
+        connection.connect();
+        return () => connection.disconnect();
+      }, [roomId]);
+
+      return <Text text={`Welcome to the ${roomId} room!`} />;
+    }
+
+    await act(() =>
+      ReactNoop.render(<ChatRoom roomId="general" theme="light" />),
+    );
+
+    assertLog(['Welcome to the general room!', 'Connected! theme: light']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the general room!" />,
+    );
+
+    // change roomId only
+    await act(() =>
+      ReactNoop.render(<ChatRoom roomId="music" theme="light" />),
+    );
+    assertLog([
+      'Welcome to the music room!',
+      // should trigger a reconnect
+      'Connected! theme: light',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the music room!" />,
+    );
+
+    // change theme only
+    await act(() => ReactNoop.render(<ChatRoom roomId="music" theme="dark" />));
+    // should not trigger a reconnect
+    assertLog(['Welcome to the music room!']);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the music room!" />,
+    );
+
+    // change roomId only
+    await act(() =>
+      ReactNoop.render(<ChatRoom roomId="travel" theme="dark" />),
+    );
+    assertLog([
+      'Welcome to the travel room!',
+      // should trigger a reconnect
+      'Connected! theme: dark',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(
+      <span prop="Welcome to the travel room!" />,
+    );
+  });
+
+  it('integration: implements the docs logVisit example', async () => {
+    class AddToCartButton extends React.PureComponent {
+      addToCart = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Add to cart" />;
+      }
+    }
+    const ShoppingCartContext = createContext(null);
+
+    function AppShell({children}) {
+      const [items, updateItems] = useState([]);
+      const value = useMemo(() => ({items, updateItems}), [items, updateItems]);
+
+      return (
+        <ShoppingCartContext.Provider value={value}>
+          {children}
+        </ShoppingCartContext.Provider>
+      );
+    }
+
+    function Page({url}) {
+      const {items, updateItems} = useContext(ShoppingCartContext);
+      const onClick = useEffectEvent(() => updateItems([...items, 1]));
+      const numberOfItems = items.length;
+
+      const onVisit = useEffectEvent(visitedUrl => {
+        Scheduler.log(
+          'url: ' + visitedUrl + ', numberOfItems: ' + numberOfItems,
+        );
+      });
+
+      useEffect(() => {
+        onVisit(url);
+      }, [url]);
+
+      return (
+        <AddToCartButton
+          onClick={() => {
+            onClick();
+          }}
+          ref={button}
+        />
+      );
+    }
+
+    const button = React.createRef(null);
+    await act(() =>
+      ReactNoop.render(
+        <AppShell>
+          <Page url="/shop/1" />
+        </AppShell>,
+      ),
+    );
+    assertLog(['Add to cart', 'url: /shop/1, numberOfItems: 0']);
+    await act(() => button.current.addToCart());
+    assertLog(['Add to cart']);
+
+    await act(() =>
+      ReactNoop.render(
+        <AppShell>
+          <Page url="/shop/2" />
+        </AppShell>,
+      ),
+    );
+    assertLog(['Add to cart', 'url: /shop/2, numberOfItems: 1']);
+  });
+
+  it('reads the latest context value in memo Components', async () => {
+    const MyContext = createContext('default');
+
+    let logContextValue;
+    const ContextReader = React.memo(function ContextReader() {
+      const value = useContext(MyContext);
+      Scheduler.log('ContextReader: ' + value);
+      const fireLogContextValue = useEffectEvent(() => {
+        Scheduler.log('ContextReader (Effect event): ' + value);
+      });
+      useEffect(() => {
+        logContextValue = fireLogContextValue;
+      }, []);
+      return null;
+    });
+
+    function App({value}) {
+      return (
+        <MyContext.Provider value={value}>
+          <ContextReader />
+        </MyContext.Provider>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App value="first" />));
+    assertLog(['ContextReader: first']);
+
+    logContextValue();
+
+    assertLog(['ContextReader (Effect event): first']);
+
+    await act(() => root.render(<App value="second" />));
+    assertLog(['ContextReader: second']);
+
+    logContextValue();
+    assertLog(['ContextReader (Effect event): second']);
+  });
+
+  it('reads the latest context value in forwardRef Components', async () => {
+    const MyContext = createContext('default');
+
+    let logContextValue;
+    const ContextReader = React.forwardRef(function ContextReader(props, ref) {
+      const value = useContext(MyContext);
+      Scheduler.log('ContextReader: ' + value);
+      const fireLogContextValue = useEffectEvent(() => {
+        Scheduler.log('ContextReader (Effect event): ' + value);
+      });
+      useEffect(() => {
+        logContextValue = fireLogContextValue;
+      }, []);
+      return null;
+    });
+
+    function App({value}) {
+      return (
+        <MyContext.Provider value={value}>
+          <ContextReader />
+        </MyContext.Provider>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App value="first" />));
+    assertLog(['ContextReader: first']);
+
+    logContextValue();
+
+    assertLog(['ContextReader (Effect event): first']);
+
+    await act(() => root.render(<App value="second" />));
+    assertLog(['ContextReader: second']);
+
+    logContextValue();
+    assertLog(['ContextReader (Effect event): second']);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/useMemoCache-test.js b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
new file mode 100644
index 00000000000..c07d3a6d996
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
@@ -0,0 +1,672 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let act;
+let assertLog;
+let useMemo;
+let useState;
+let useMemoCache;
+let MemoCacheSentinel;
+let ErrorBoundary;
+
+describe('useMemoCache()', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    useMemo = React.useMemo;
+    useMemoCache = require('react/compiler-runtime').c;
+    useState = React.useState;
+    MemoCacheSentinel = Symbol.for('react.memo_cache_sentinel');
+
+    class _ErrorBoundary extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {hasError: false};
+      }
+
+      static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return {hasError: true};
+      }
+
+      componentDidCatch(error, errorInfo) {}
+
+      render() {
+        if (this.state.hasError) {
+          // You can render any custom fallback UI
+          return <h1>Something went wrong.</h1>;
+        }
+
+        return this.props.children;
+      }
+    }
+    ErrorBoundary = _ErrorBoundary;
+  });
+
+  it('render component using cache', async () => {
+    function Component(props) {
+      const cache = useMemoCache(1);
+      expect(Array.isArray(cache)).toBe(true);
+      expect(cache.length).toBe(1);
+      expect(cache[0]).toBe(MemoCacheSentinel);
+
+      return 'Ok';
+    }
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('Ok');
+  });
+
+  it('update component using cache', async () => {
+    let setX;
+    let forceUpdate;
+    function Component(props) {
+      const cache = useMemoCache(5);
+
+      // x is used to produce a `data` object passed to the child
+      const [x, _setX] = useState(0);
+      setX = _setX;
+
+      // n is passed as-is to the child as a cache breaker
+      const [n, setN] = useState(0);
+      forceUpdate = () => setN(a => a + 1);
+
+      const c_0 = x !== cache[0];
+      let data;
+      if (c_0) {
+        data = {text: `Count ${x}`};
+        cache[0] = x;
+        cache[1] = data;
+      } else {
+        data = cache[1];
+      }
+      const c_2 = x !== cache[2];
+      const c_3 = n !== cache[3];
+      let t0;
+      if (c_2 || c_3) {
+        t0 = <Text data={data} n={n} />;
+        cache[2] = x;
+        cache[3] = n;
+        cache[4] = t0;
+      } else {
+        t0 = cache[4];
+      }
+      return t0;
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return data.text;
+    });
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('Count 0');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Changing x should reset the data object
+    await act(() => {
+      setX(1);
+    });
+    expect(root).toMatchRenderedOutput('Count 1');
+    expect(Text).toBeCalledTimes(2);
+    expect(data).not.toBe(data0);
+    const data1 = data;
+
+    // Forcing an unrelated update shouldn't recreate the
+    // data object.
+    await act(() => {
+      forceUpdate();
+    });
+    expect(root).toMatchRenderedOutput('Count 1');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+
+  it('update component using cache with setstate during render', async () => {
+    let setN;
+    function Component(props) {
+      const cache = useMemoCache(5);
+
+      // x is used to produce a `data` object passed to the child
+      const [x] = useState(0);
+
+      const c_0 = x !== cache[0];
+      let data;
+      if (c_0) {
+        data = {text: `Count ${x}`};
+        cache[0] = x;
+        cache[1] = data;
+      } else {
+        data = cache[1];
+      }
+
+      // n is passed as-is to the child as a cache breaker
+      const [n, _setN] = useState(0);
+      setN = _setN;
+
+      if (n === 1) {
+        setN(2);
+        return;
+      }
+
+      const c_2 = x !== cache[2];
+      const c_3 = n !== cache[3];
+      let t0;
+      if (c_2 || c_3) {
+        t0 = <Text data={data} n={n} />;
+        cache[2] = x;
+        cache[3] = n;
+        cache[4] = t0;
+      } else {
+        t0 = cache[4];
+      }
+      return t0;
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return `${data.text} (n=${props.n})`;
+    });
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('Count 0 (n=0)');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Trigger an update that will cause a setState during render. The `data` prop
+    // does not depend on `n`, and should remain cached.
+    await act(() => {
+      setN(1);
+    });
+    expect(root).toMatchRenderedOutput('Count 0 (n=2)');
+    expect(Text).toBeCalledTimes(2);
+    expect(data).toBe(data0);
+  });
+
+  it('update component using cache with throw during render', async () => {
+    let setN;
+    let shouldFail = true;
+    function Component(props) {
+      const cache = useMemoCache(5);
+
+      // x is used to produce a `data` object passed to the child
+      const [x] = useState(0);
+
+      const c_0 = x !== cache[0];
+      let data;
+      if (c_0) {
+        data = {text: `Count ${x}`};
+        cache[0] = x;
+        cache[1] = data;
+      } else {
+        data = cache[1];
+      }
+
+      // n is passed as-is to the child as a cache breaker
+      const [n, _setN] = useState(0);
+      setN = _setN;
+
+      if (n === 1) {
+        if (shouldFail) {
+          shouldFail = false;
+          throw new Error('failed');
+        }
+      }
+
+      const c_2 = x !== cache[2];
+      const c_3 = n !== cache[3];
+      let t0;
+      if (c_2 || c_3) {
+        t0 = <Text data={data} n={n} />;
+        cache[2] = x;
+        cache[3] = n;
+        cache[4] = t0;
+      } else {
+        t0 = cache[4];
+      }
+      return t0;
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return `${data.text} (n=${props.n})`;
+    });
+
+    spyOnDev(console, 'error');
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <ErrorBoundary>
+          <Component />
+        </ErrorBoundary>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('Count 0 (n=0)');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    await act(() => {
+      // this triggers a throw.
+      setN(1);
+    });
+    expect(root).toMatchRenderedOutput('Count 0 (n=1)');
+    expect(Text).toBeCalledTimes(2);
+    expect(data).toBe(data0);
+    const data1 = data;
+
+    // Forcing an unrelated update shouldn't recreate the
+    // data object.
+    await act(() => {
+      setN(2);
+    });
+    expect(root).toMatchRenderedOutput('Count 0 (n=2)');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+
+  it('update component and custom hook with caches', async () => {
+    let setX;
+    let forceUpdate;
+    function Component(props) {
+      const cache = useMemoCache(4);
+
+      // x is used to produce a `data` object passed to the child
+      const [x, _setX] = useState(0);
+      setX = _setX;
+      const c_x = x !== cache[0];
+      cache[0] = x;
+
+      // n is passed as-is to the child as a cache breaker
+      const [n, setN] = useState(0);
+      forceUpdate = () => setN(a => a + 1);
+      const c_n = n !== cache[1];
+      cache[1] = n;
+
+      let _data;
+      if (c_x) {
+        _data = cache[2] = {text: `Count ${x}`};
+      } else {
+        _data = cache[2];
+      }
+      const data = useData(_data);
+      if (c_x || c_n) {
+        return (cache[3] = <Text data={data} n={n} />);
+      } else {
+        return cache[3];
+      }
+    }
+    function useData(data) {
+      const cache = useMemoCache(2);
+      const c_data = data !== cache[0];
+      cache[0] = data;
+      let nextData;
+      if (c_data) {
+        nextData = cache[1] = {text: data.text.toLowerCase()};
+      } else {
+        nextData = cache[1];
+      }
+      return nextData;
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return data.text;
+    });
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('count 0');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Changing x should reset the data object
+    await act(() => {
+      setX(1);
+    });
+    expect(root).toMatchRenderedOutput('count 1');
+    expect(Text).toBeCalledTimes(2);
+    expect(data).not.toBe(data0);
+    const data1 = data;
+
+    // Forcing an unrelated update shouldn't recreate the
+    // data object.
+    await act(() => {
+      forceUpdate();
+    });
+    expect(root).toMatchRenderedOutput('count 1');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+
+  it('reuses computations from suspended/interrupted render attempts during an update', async () => {
+    // This test demonstrates the benefit of a shared memo cache. By "shared" I
+    // mean multiple concurrent render attempts of the same component/hook use
+    // the same cache. (When the feature flag is off, we don't do this — the
+    // cache is copy-on-write.)
+    //
+    // If an update is interrupted, either because it suspended or because of
+    // another update, we can reuse the memoized computations from the previous
+    // attempt. We can do this because the React Compiler performs atomic writes
+    // to the memo cache, i.e. it will not record the inputs to a memoization
+    // without also recording its output.
+    //
+    // This gives us a form of "resuming" within components and hooks.
+    //
+    // This only works when updating a component that already mounted. It has no
+    // impact during initial render, because the memo cache is stored on the
+    // fiber, and since we have not implemented resuming for fibers, it's always
+    // a fresh memo cache, anyway.
+    //
+    // However, this alone is pretty useful — it happens whenever you update the
+    // UI with fresh data after a mutation/action, which is extremely common in
+    // a Suspense-driven (e.g. RSC or Relay) app. That's the scenario that this
+    // test simulates.
+    //
+    // So the impact of this feature is faster data mutations/actions.
+
+    function someExpensiveProcessing(t) {
+      Scheduler.log(`Some expensive processing... [${t}]`);
+      return t;
+    }
+
+    function useWithLog(t, msg) {
+      try {
+        return React.use(t);
+      } catch (x) {
+        Scheduler.log(`Suspend! [${msg}]`);
+        throw x;
+      }
+    }
+
+    // Original code:
+    //
+    //   function Data({chunkA, chunkB}) {
+    //     const a = someExpensiveProcessing(useWithLog(chunkA, 'chunkA'));
+    //     const b = useWithLog(chunkB, 'chunkB');
+    //     return (
+    //       <>
+    //         {a}
+    //         {b}
+    //       </>
+    //     );
+    //   }
+    //
+    //   function Input() {
+    //     const [input, _setText] = useState('');
+    //     return input;
+    //   }
+    //
+    //   function App({chunkA, chunkB}) {
+    //     return (
+    //       <>
+    //         <div>
+    //           Input: <Input />
+    //         </div>
+    //         <div>
+    //           Data: <Data chunkA={chunkA} chunkB={chunkB} />
+    //         </div>
+    //       </>
+    //     );
+    //   }
+    function Data(t0) {
+      const $ = useMemoCache(5);
+      const {chunkA, chunkB} = t0;
+      const t1 = useWithLog(chunkA, 'chunkA');
+      let t2;
+
+      if ($[0] !== t1) {
+        t2 = someExpensiveProcessing(t1);
+        $[0] = t1;
+        $[1] = t2;
+      } else {
+        t2 = $[1];
+      }
+
+      const a = t2;
+      const b = useWithLog(chunkB, 'chunkB');
+      let t3;
+
+      if ($[2] !== a || $[3] !== b) {
+        t3 = (
+          <>
+            {a}
+            {b}
+          </>
+        );
+        $[2] = a;
+        $[3] = b;
+        $[4] = t3;
+      } else {
+        t3 = $[4];
+      }
+
+      return t3;
+    }
+
+    let setInput;
+    function Input() {
+      const [input, _set] = useState('');
+      setInput = _set;
+      return input;
+    }
+
+    function App(t0) {
+      const $ = useMemoCache(4);
+      const {chunkA, chunkB} = t0;
+      let t1;
+
+      if ($[0] === Symbol.for('react.memo_cache_sentinel')) {
+        t1 = (
+          <div>
+            Input: <Input />
+          </div>
+        );
+        $[0] = t1;
+      } else {
+        t1 = $[0];
+      }
+
+      let t2;
+
+      if ($[1] !== chunkA || $[2] !== chunkB) {
+        t2 = (
+          <>
+            {t1}
+            <div>
+              Data: <Data chunkA={chunkA} chunkB={chunkB} />
+            </div>
+          </>
+        );
+        $[1] = chunkA;
+        $[2] = chunkB;
+        $[3] = t2;
+      } else {
+        t2 = $[3];
+      }
+
+      return t2;
+    }
+
+    function createInstrumentedResolvedPromise(value) {
+      return {
+        then() {},
+        status: 'fulfilled',
+        value,
+      };
+    }
+
+    function createDeferred() {
+      let resolve;
+      const p = new Promise(res => {
+        resolve = res;
+      });
+      p.resolve = resolve;
+      return p;
+    }
+
+    // Initial render. We pass the data in as two separate "chunks" to simulate
+    // a stream (e.g. RSC).
+    const root = ReactNoop.createRoot();
+    const initialChunkA = createInstrumentedResolvedPromise('A1');
+    const initialChunkB = createInstrumentedResolvedPromise('B1');
+    await act(() =>
+      root.render(<App chunkA={initialChunkA} chunkB={initialChunkB} />),
+    );
+    assertLog(['Some expensive processing... [A1]']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Input: </div>
+        <div>Data: A1B1</div>
+      </>,
+    );
+
+    // Update the UI in a transition. This would happen after a data mutation.
+    const updatedChunkA = createDeferred();
+    const updatedChunkB = createDeferred();
+    await act(() => {
+      React.startTransition(() => {
+        root.render(<App chunkA={updatedChunkA} chunkB={updatedChunkB} />);
+      });
+    });
+    assertLog(['Suspend! [chunkA]']);
+
+    // The data starts to stream in. Loading the data in the first chunk
+    // triggers an expensive computation in the UI. Later, we'll test whether
+    // this computation is reused.
+    await act(() => updatedChunkA.resolve('A2'));
+    assertLog(['Some expensive processing... [A2]', 'Suspend! [chunkB]']);
+
+    // The second chunk hasn't loaded yet, so we're still showing the
+    // initial UI.
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Input: </div>
+        <div>Data: A1B1</div>
+      </>,
+    );
+
+    // While waiting for the data to finish loading, update a different part of
+    // the screen. This interrupts the refresh transition.
+    //
+    // In a real app, this might be an input or hover event.
+    await act(() => setInput('hi!'));
+
+    // Once the input has updated, we go back to rendering the transition.
+    if (gate(flags => flags.enableNoCloningMemoCache)) {
+      // We did not have process the first chunk again. We reused the
+      // computation from the earlier attempt.
+      assertLog(['Suspend! [chunkB]']);
+    } else {
+      // Because we clone/reset the memo cache after every aborted attempt, we
+      // must process the first chunk again.
+      assertLog(['Some expensive processing... [A2]', 'Suspend! [chunkB]']);
+    }
+
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Input: hi!</div>
+        <div>Data: A1B1</div>
+      </>,
+    );
+
+    // Finish loading the data.
+    await act(() => updatedChunkB.resolve('B2'));
+    if (gate(flags => flags.enableNoCloningMemoCache)) {
+      // We did not have process the first chunk again. We reused the
+      // computation from the earlier attempt.
+      assertLog([]);
+    } else {
+      // Because we clone/reset the memo cache after every aborted attempt, we
+      // must process the first chunk again.
+      //
+      // That's three total times we've processed the first chunk, compared to
+      // just once when enableNoCloningMemoCache is on.
+      assertLog(['Some expensive processing... [A2]']);
+    }
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Input: hi!</div>
+        <div>Data: A2B2</div>
+      </>,
+    );
+  });
+
+  it('(repro) infinite renders when used with setState during render', async () => {
+    // Output of react compiler on `useUserMemo`
+    function useCompilerMemo(value) {
+      let arr;
+      const $ = useMemoCache(2);
+      if ($[0] !== value) {
+        arr = [value];
+        $[0] = value;
+        $[1] = arr;
+      } else {
+        arr = $[1];
+      }
+      return arr;
+    }
+
+    // Baseline / source code
+    function useManualMemo(value) {
+      return useMemo(() => [value], [value]);
+    }
+
+    function makeComponent(hook) {
+      return function Component({value}) {
+        const state = hook(value);
+        const [prevState, setPrevState] = useState(null);
+        if (state !== prevState) {
+          setPrevState(state);
+        }
+        return <div>{state.join(',')}</div>;
+      };
+    }
+
+    /**
+     * Test with useMemoCache
+     */
+    let root = ReactNoop.createRoot();
+    const CompilerMemoComponent = makeComponent(useCompilerMemo);
+    await act(() => {
+      root.render(<CompilerMemoComponent value={2} />);
+    });
+    expect(root).toMatchRenderedOutput(<div>2</div>);
+
+    /**
+     * Test with useMemo
+     */
+    root = ReactNoop.createRoot();
+    const HookMemoComponent = makeComponent(useManualMemo);
+    await act(() => {
+      root.render(<HookMemoComponent value={2} />);
+    });
+    expect(root).toMatchRenderedOutput(<div>2</div>);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/useRef-test.internal.js b/packages/react-reconciler/src/__tests__/useRef-test.internal.js
new file mode 100644
index 00000000000..2a6ab6ab58c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useRef-test.internal.js
@@ -0,0 +1,240 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('useRef', () => {
+  let React;
+  let ReactNoop;
+  let Scheduler;
+  let act;
+  let useCallback;
+  let useEffect;
+  let useLayoutEffect;
+  let useRef;
+  let useState;
+  let waitForAll;
+  let assertLog;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    act = require('internal-test-utils').act;
+    useCallback = React.useCallback;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    useRef = React.useRef;
+    useState = React.useState;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+  });
+
+  function Text(props) {
+    Scheduler.log(props.text);
+    return <span prop={props.text} />;
+  }
+
+  it('creates a ref object initialized with the provided value', async () => {
+    jest.useFakeTimers();
+
+    function useDebouncedCallback(callback, ms, inputs) {
+      const timeoutID = useRef(-1);
+      useEffect(() => {
+        return function unmount() {
+          clearTimeout(timeoutID.current);
+        };
+      }, []);
+      const debouncedCallback = useCallback(
+        (...args) => {
+          clearTimeout(timeoutID.current);
+          timeoutID.current = setTimeout(callback, ms, ...args);
+        },
+        [callback, ms],
+      );
+      return useCallback(debouncedCallback, inputs);
+    }
+
+    let ping;
+    function App() {
+      ping = useDebouncedCallback(
+        value => {
+          Scheduler.log('ping: ' + value);
+        },
+        100,
+        [],
+      );
+      return null;
+    }
+
+    await act(() => {
+      ReactNoop.render(<App />);
+    });
+    assertLog([]);
+
+    ping(1);
+    ping(2);
+    ping(3);
+
+    assertLog([]);
+
+    jest.advanceTimersByTime(100);
+
+    assertLog(['ping: 3']);
+
+    ping(4);
+    jest.advanceTimersByTime(20);
+    ping(5);
+    ping(6);
+    jest.advanceTimersByTime(80);
+
+    assertLog([]);
+
+    jest.advanceTimersByTime(20);
+    assertLog(['ping: 6']);
+  });
+
+  it('should return the same ref during re-renders', async () => {
+    function Counter() {
+      const ref = useRef('val');
+      const [count, setCount] = useState(0);
+      const [firstRef] = useState(ref);
+
+      if (firstRef !== ref) {
+        throw new Error('should never change');
+      }
+
+      if (count < 3) {
+        setCount(count + 1);
+      }
+
+      return <Text text={count} />;
+    }
+
+    ReactNoop.render(<Counter />);
+    await waitForAll([3]);
+
+    ReactNoop.render(<Counter />);
+    await waitForAll([3]);
+  });
+
+  if (__DEV__) {
+    it('should never warn when attaching to children', async () => {
+      class Component extends React.Component {
+        render() {
+          return null;
+        }
+      }
+
+      function Example({phase}) {
+        const hostRef = useRef();
+        const classRef = useRef();
+        return (
+          <>
+            <div key={`host-${phase}`} ref={hostRef} />
+            <Component key={`class-${phase}`} ref={classRef} />
+          </>
+        );
+      }
+
+      await act(() => {
+        ReactNoop.render(<Example phase="mount" />);
+      });
+      await act(() => {
+        ReactNoop.render(<Example phase="update" />);
+      });
+    });
+
+    it('should not warn about lazy init during render', async () => {
+      function Example() {
+        const ref1 = useRef(null);
+        const ref2 = useRef(undefined);
+        // Read: safe because lazy init:
+        if (ref1.current === null) {
+          ref1.current = 123;
+        }
+        if (ref2.current === undefined) {
+          ref2.current = 123;
+        }
+        return null;
+      }
+
+      await act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      // Should not warn after an update either.
+      await act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    it('should not warn about lazy init outside of render', async () => {
+      function Example() {
+        // eslint-disable-next-line no-unused-vars
+        const [didMount, setDidMount] = useState(false);
+        const ref1 = useRef(null);
+        const ref2 = useRef(undefined);
+        useLayoutEffect(() => {
+          ref1.current = 123;
+          ref2.current = 123;
+          setDidMount(true);
+        }, []);
+        return null;
+      }
+
+      await act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    it('should not warn about reads or writes within effect', async () => {
+      function Example() {
+        const ref = useRef(123);
+        useLayoutEffect(() => {
+          expect(ref.current).toBe(123);
+          ref.current = 456;
+          expect(ref.current).toBe(456);
+        }, []);
+        useEffect(() => {
+          expect(ref.current).toBe(456);
+          ref.current = 789;
+          expect(ref.current).toBe(789);
+        }, []);
+        return null;
+      }
+
+      await act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      ReactNoop.flushPassiveEffects();
+    });
+
+    it('should not warn about reads or writes outside of render phase (e.g. event handler)', async () => {
+      let ref;
+      function Example() {
+        ref = useRef(123);
+        return null;
+      }
+
+      await act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      expect(ref.current).toBe(123);
+      ref.current = 456;
+      expect(ref.current).toBe(456);
+    });
+  }
+});
diff --git a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
new file mode 100644
index 00000000000..eb5bc6ed98c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
@@ -0,0 +1,444 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 useSyncExternalStore;
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let useLayoutEffect;
+let forwardRef;
+let useImperativeHandle;
+let useRef;
+let useState;
+let use;
+let startTransition;
+let waitFor;
+let waitForAll;
+let assertLog;
+let Suspense;
+let useMemo;
+let textCache;
+
+// This tests the native useSyncExternalStore implementation, not the shim.
+// Tests that apply to both the native implementation and the shim should go
+// into useSyncExternalStoreShared-test.js. The reason they are separate is
+// because at some point we may start running the shared tests against vendored
+// React DOM versions (16, 17, etc) instead of React Noop.
+describe('useSyncExternalStore', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useLayoutEffect = React.useLayoutEffect;
+    useImperativeHandle = React.useImperativeHandle;
+    forwardRef = React.forwardRef;
+    useRef = React.useRef;
+    useState = React.useState;
+    use = React.use;
+    useSyncExternalStore = React.useSyncExternalStore;
+    startTransition = React.startTransition;
+    Suspense = React.Suspense;
+    useMemo = React.useMemo;
+    textCache = new Map();
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+
+    act = require('internal-test-utils').act;
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function AsyncText({text}) {
+    const result = readText(text);
+    Scheduler.log(text);
+    return result;
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function createExternalStore(initialState) {
+    const listeners = new Set();
+    let currentState = initialState;
+    return {
+      set(text) {
+        currentState = text;
+        ReactNoop.batchedUpdates(() => {
+          listeners.forEach(listener => listener());
+        });
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      getState() {
+        return currentState;
+      },
+      getSubscriberCount() {
+        return listeners.size;
+      },
+    };
+  }
+
+  it(
+    'detects interleaved mutations during a concurrent read before ' +
+      'layout effects fire',
+    async () => {
+      const store1 = createExternalStore(0);
+      const store2 = createExternalStore(0);
+
+      const Child = forwardRef(({store, label}, ref) => {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+        useImperativeHandle(ref, () => {
+          return value;
+        }, []);
+        return <Text text={label + value} />;
+      });
+
+      function App({store}) {
+        const refA = useRef(null);
+        const refB = useRef(null);
+        const refC = useRef(null);
+        useLayoutEffect(() => {
+          // This layout effect reads children that depend on an external store.
+          // This demostrates whether the children are consistent when the
+          // layout phase runs.
+          const aText = refA.current;
+          const bText = refB.current;
+          const cText = refC.current;
+          Scheduler.log(
+            `Children observed during layout: A${aText}B${bText}C${cText}`,
+          );
+        });
+        return (
+          <>
+            <Child store={store} ref={refA} label="A" />
+            <Child store={store} ref={refB} label="B" />
+            <Child store={store} ref={refC} label="C" />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        // Start a concurrent render that reads from the store, then yield.
+        startTransition(() => {
+          root.render(<App store={store1} />);
+        });
+
+        await waitFor(['A0', 'B0']);
+
+        // During an interleaved event, the store is mutated.
+        store1.set(1);
+
+        // Then we continue rendering.
+        await waitForAll([
+          // C reads a newer value from the store than A or B, which means they
+          // are inconsistent.
+          'C1',
+
+          // Before committing the layout effects, React detects that the store
+          // has been mutated. So it throws out the entire completed tree and
+          // re-renders the new values.
+          'A1',
+          'B1',
+          'C1',
+          // The layout effects reads consistent children.
+          'Children observed during layout: A1B1C1',
+        ]);
+      });
+
+      // Now we're going test the same thing during an update that
+      // switches stores.
+      await act(async () => {
+        startTransition(() => {
+          root.render(<App store={store2} />);
+        });
+
+        // Start a concurrent render that reads from the store, then yield.
+        await waitFor(['A0', 'B0']);
+
+        // During an interleaved event, the store is mutated.
+        store2.set(1);
+
+        // Then we continue rendering.
+        await waitForAll([
+          // C reads a newer value from the store than A or B, which means they
+          // are inconsistent.
+          'C1',
+
+          // Before committing the layout effects, React detects that the store
+          // has been mutated. So it throws out the entire completed tree and
+          // re-renders the new values.
+          'A1',
+          'B1',
+          'C1',
+          // The layout effects reads consistent children.
+          'Children observed during layout: A1B1C1',
+        ]);
+      });
+    },
+  );
+
+  it('next value is correctly cached when state is dispatched in render phase', async () => {
+    const store = createExternalStore('value:initial');
+
+    function App() {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      const [sameValue, setSameValue] = useState(value);
+      if (value !== sameValue) setSameValue(value);
+      return <Text text={value} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      // Start a render that reads from the store and yields value
+      root.render(<App />);
+    });
+    assertLog(['value:initial']);
+
+    await act(() => {
+      store.set('value:changed');
+    });
+    assertLog(['value:changed']);
+
+    // If cached value was updated, we expect a re-render
+    await act(() => {
+      store.set('value:initial');
+    });
+    assertLog(['value:initial']);
+  });
+
+  it(
+    'regression: suspending in shell after synchronously patching ' +
+      'up store mutation',
+    async () => {
+      // Tests a case where a store is mutated during a concurrent event, then
+      // during the sync re-render, a synchronous render is triggered.
+
+      const store = createExternalStore('Initial');
+
+      let resolve;
+      const promise = new Promise(r => {
+        resolve = r;
+      });
+
+      function A() {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+
+        if (value === 'Updated') {
+          try {
+            use(promise);
+          } catch (x) {
+            Scheduler.log('Suspend A');
+            throw x;
+          }
+        }
+
+        return <Text text={'A: ' + value} />;
+      }
+
+      function B() {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+        return <Text text={'B: ' + value} />;
+      }
+
+      function App() {
+        return (
+          <>
+            <span>
+              <A />
+            </span>
+            <span>
+              <B />
+            </span>
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        // A and B both read from the same store. Partially render A.
+        startTransition(() => root.render(<App />));
+        // A reads the initial value of the store.
+        await waitFor(['A: Initial']);
+
+        // Before B renders, mutate the store.
+        store.set('Updated');
+      });
+      assertLog([
+        // B reads the updated value of the store.
+        'B: Updated',
+        // This should a synchronous re-render of A using the updated value. In
+        // this test, this causes A to suspend.
+        'Suspend A',
+        // pre-warming
+        'B: Updated',
+      ]);
+      // Nothing has committed, because A suspended and no fallback
+      // was provided.
+      expect(root).toMatchRenderedOutput(null);
+
+      // Resolve the data and finish rendering.
+      await act(() => resolve());
+      assertLog(['A: Updated', 'B: Updated']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>A: Updated</span>
+          <span>B: Updated</span>
+        </>,
+      );
+    },
+  );
+
+  it('regression: does not infinite loop for only changing store reference in render', async () => {
+    let store = {value: {}};
+    let listeners = [];
+
+    const ExternalStore = {
+      set(value) {
+        // Change the store ref, but not the value.
+        // This will cause a new snapshot to be returned if set is called in render,
+        // but the value is the same. Stores should not do this, but if they do
+        // we shouldn't infinitely render.
+        store = {...store};
+        setTimeout(() => {
+          store = {value};
+          emitChange();
+        }, 100);
+        emitChange();
+      },
+      subscribe(listener) {
+        listeners = [...listeners, listener];
+        return () => {
+          listeners = listeners.filter(l => l !== listener);
+        };
+      },
+      getSnapshot() {
+        return store;
+      },
+    };
+
+    function emitChange() {
+      listeners.forEach(l => l());
+    }
+
+    function StoreText() {
+      const {value} = useSyncExternalStore(
+        ExternalStore.subscribe,
+        ExternalStore.getSnapshot,
+      );
+
+      useMemo(() => {
+        // Set the store value on mount.
+        // This breaks the rules of React, but should be handled gracefully.
+        const newValue = {text: 'B'};
+        if (value == null || newValue !== value) {
+          ExternalStore.set(newValue);
+        }
+      }, []);
+
+      return <Text text={value.text || '(not set)'} />;
+    }
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback={'Loading...'}>
+            <AsyncText text={'A'} />
+            <StoreText />
+          </Suspense>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // The initial render suspends.
+    await act(async () => {
+      root.render(<App />);
+    });
+
+    // pre-warming
+    assertLog(['(not set)']);
+
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // Resolve the data and finish rendering.
+    // When resolving, the store should not get stuck in an infinite loop.
+    await act(() => {
+      resolveText('A');
+    });
+    assertLog([
+      'A',
+      'B',
+      'A',
+      'B',
+      'B',
+      ...(gate('alwaysThrottleRetries') ? [] : ['B']),
+    ]);
+
+    expect(root).toMatchRenderedOutput('AB');
+  });
+});
diff --git a/packages/react-reconciler/src/clz32.js b/packages/react-reconciler/src/clz32.js
new file mode 100644
index 00000000000..3fabf1aedba
--- /dev/null
+++ b/packages/react-reconciler/src/clz32.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// TODO: This is pretty well supported by browsers. Maybe we can drop it.
+
+export const clz32: (x: number) => number = Math.clz32
+  ? Math.clz32
+  : clz32Fallback;
+
+// Count leading zeros.
+// Based on:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
+const log = Math.log;
+const LN2 = Math.LN2;
+function clz32Fallback(x: number): number {
+  const asUint = x >>> 0;
+  if (asUint === 0) {
+    return 32;
+  }
+  return (31 - ((log(asUint) / LN2) | 0)) | 0;
+}
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.art.js b/packages/react-reconciler/src/forks/ReactFiberConfig.art.js
new file mode 100644
index 00000000000..1fb43b5ade8
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.art.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-art/src/ReactFiberConfigART';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
new file mode 100644
index 00000000000..1785fa9aaec
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
@@ -0,0 +1,286 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-reconciler` 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-reconciler` we treat host config as a module.
+// This file is a shim between two worlds.
+//
+// It works because the `react-reconciler` bundle is wrapped in something like:
+//
+// module.exports = function ($$$config) {
+//   /* reconciler code */
+// }
+//
+// So `$$$config` looks like a global variable, but it's
+// really an argument to a top-level wrapping function.
+
+declare const $$$config: any;
+export opaque type Type = mixed;
+export opaque type Props = mixed;
+export opaque type Container = mixed;
+export opaque type Instance = mixed;
+export opaque type TextInstance = mixed;
+export opaque type ActivityInstance = mixed;
+export opaque type SuspenseInstance = mixed;
+export opaque type HydratableInstance = mixed;
+export opaque type PublicInstance = mixed;
+export opaque type HostContext = mixed;
+export opaque type UpdatePayload = mixed;
+export opaque type ChildSet = mixed;
+export opaque type TimeoutHandle = mixed;
+export opaque type NoTimeout = mixed;
+export opaque type RendererInspectionConfig = mixed;
+export opaque type TransitionStatus = mixed;
+export opaque type FormInstance = mixed;
+export opaque type SuspendedState = mixed;
+export type RunningViewTransition = mixed;
+export type ViewTransitionInstance = null | {name: string, ...};
+export opaque type InstanceMeasurement = mixed;
+export type EventResponder = any;
+export type GestureTimeline = any;
+export type FragmentInstanceType = null;
+
+export const rendererVersion = $$$config.rendererVersion;
+export const rendererPackageName = $$$config.rendererPackageName;
+export const extraDevToolsConfig = $$$config.extraDevToolsConfig;
+
+export const getPublicInstance = $$$config.getPublicInstance;
+export const getRootHostContext = $$$config.getRootHostContext;
+export const getChildHostContext = $$$config.getChildHostContext;
+export const prepareForCommit = $$$config.prepareForCommit;
+export const resetAfterCommit = $$$config.resetAfterCommit;
+export const createInstance = $$$config.createInstance;
+export const cloneMutableInstance = $$$config.cloneMutableInstance;
+export const appendInitialChild = $$$config.appendInitialChild;
+export const finalizeInitialChildren = $$$config.finalizeInitialChildren;
+export const shouldSetTextContent = $$$config.shouldSetTextContent;
+export const createTextInstance = $$$config.createTextInstance;
+export const cloneMutableTextInstance = $$$config.cloneMutableTextInstance;
+export const scheduleTimeout = $$$config.scheduleTimeout;
+export const cancelTimeout = $$$config.cancelTimeout;
+export const noTimeout = $$$config.noTimeout;
+export const isPrimaryRenderer = $$$config.isPrimaryRenderer;
+export const warnsIfNotActing = $$$config.warnsIfNotActing;
+export const supportsMutation = $$$config.supportsMutation;
+export const supportsPersistence = $$$config.supportsPersistence;
+export const supportsHydration = $$$config.supportsHydration;
+export const getInstanceFromNode = $$$config.getInstanceFromNode;
+export const beforeActiveInstanceBlur = $$$config.beforeActiveInstanceBlur;
+export const afterActiveInstanceBlur = $$$config.afterActiveInstanceBlur;
+export const preparePortalMount = $$$config.preparePortalMount;
+export const prepareScopeUpdate = $$$config.prepareScopeUpdate;
+export const getInstanceFromScope = $$$config.getInstanceFromScope;
+export const setCurrentUpdatePriority = $$$config.setCurrentUpdatePriority;
+export const getCurrentUpdatePriority = $$$config.getCurrentUpdatePriority;
+export const resolveUpdatePriority = $$$config.resolveUpdatePriority;
+export const trackSchedulerEvent = $$$config.trackSchedulerEvent;
+export const resolveEventType = $$$config.resolveEventType;
+export const resolveEventTimeStamp = $$$config.resolveEventTimeStamp;
+export const shouldAttemptEagerTransition =
+  $$$config.shouldAttemptEagerTransition;
+export const detachDeletedInstance = $$$config.detachDeletedInstance;
+export const requestPostPaintCallback = $$$config.requestPostPaintCallback;
+export const maySuspendCommit = $$$config.maySuspendCommit;
+export const maySuspendCommitOnUpdate = $$$config.maySuspendCommitOnUpdate;
+export const maySuspendCommitInSyncRender =
+  $$$config.maySuspendCommitInSyncRender;
+export const preloadInstance = $$$config.preloadInstance;
+export const startSuspendingCommit = $$$config.startSuspendingCommit;
+export const suspendInstance = $$$config.suspendInstance;
+export const suspendOnActiveViewTransition =
+  $$$config.suspendOnActiveViewTransition;
+export const waitForCommitToBeReady = $$$config.waitForCommitToBeReady;
+export const getSuspendedCommitReason = $$$config.getSuspendedCommitReason;
+export const NotPendingTransition = $$$config.NotPendingTransition;
+export const HostTransitionContext = $$$config.HostTransitionContext;
+export const resetFormInstance = $$$config.resetFormInstance;
+export const bindToConsole = $$$config.bindToConsole;
+
+// -------------------
+//      Microtasks
+//     (optional)
+// -------------------
+export const supportsMicrotasks = $$$config.supportsMicrotasks;
+export const scheduleMicrotask = $$$config.scheduleMicrotask;
+
+// -------------------
+//      Test selectors
+//     (optional)
+// -------------------
+export const supportsTestSelectors = $$$config.supportsTestSelectors;
+export const findFiberRoot = $$$config.findFiberRoot;
+export const getBoundingRect = $$$config.getBoundingRect;
+export const getTextContent = $$$config.getTextContent;
+export const isHiddenSubtree = $$$config.isHiddenSubtree;
+export const matchAccessibilityRole = $$$config.matchAccessibilityRole;
+export const setFocusIfFocusable = $$$config.setFocusIfFocusable;
+export const setupIntersectionObserver = $$$config.setupIntersectionObserver;
+
+// -------------------
+//      Mutation
+//     (optional)
+// -------------------
+export const appendChild = $$$config.appendChild;
+export const appendChildToContainer = $$$config.appendChildToContainer;
+export const commitTextUpdate = $$$config.commitTextUpdate;
+export const commitMount = $$$config.commitMount;
+export const commitUpdate = $$$config.commitUpdate;
+export const insertBefore = $$$config.insertBefore;
+export const insertInContainerBefore = $$$config.insertInContainerBefore;
+export const removeChild = $$$config.removeChild;
+export const removeChildFromContainer = $$$config.removeChildFromContainer;
+export const resetTextContent = $$$config.resetTextContent;
+export const hideInstance = $$$config.hideInstance;
+export const hideTextInstance = $$$config.hideTextInstance;
+export const unhideInstance = $$$config.unhideInstance;
+export const unhideTextInstance = $$$config.unhideTextInstance;
+export const applyViewTransitionName = $$$config.applyViewTransitionName;
+export const restoreViewTransitionName = $$$config.restoreViewTransitionName;
+export const cancelViewTransitionName = $$$config.cancelViewTransitionName;
+export const cancelRootViewTransitionName =
+  $$$config.cancelRootViewTransitionName;
+export const restoreRootViewTransitionName =
+  $$$config.restoreRootViewTransitionName;
+export const cloneRootViewTransitionContainer =
+  $$$config.cloneRootViewTransitionContainer;
+export const removeRootViewTransitionClone =
+  $$$config.removeRootViewTransitionClone;
+export const measureInstance = $$$config.measureInstance;
+export const measureClonedInstance = $$$config.measureClonedInstance;
+export const wasInstanceInViewport = $$$config.wasInstanceInViewport;
+export const hasInstanceChanged = $$$config.hasInstanceChanged;
+export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
+export const startViewTransition = $$$config.startViewTransition;
+export const startGestureTransition = $$$config.startGestureTransition;
+export const stopViewTransition = $$$config.stopViewTransition;
+export const addViewTransitionFinishedListener =
+  $$$config.addViewTransitionFinishedListener;
+export const getCurrentGestureOffset = $$$config.getCurrentGestureOffset;
+export const createViewTransitionInstance =
+  $$$config.createViewTransitionInstance;
+export const clearContainer = $$$config.clearContainer;
+export const createFragmentInstance = $$$config.createFragmentInstance;
+export const updateFragmentInstanceFiber =
+  $$$config.updateFragmentInstanceFiber;
+export const commitNewChildToFragmentInstance =
+  $$$config.commitNewChildToFragmentInstance;
+export const deleteChildFromFragmentInstance =
+  $$$config.deleteChildFromFragmentInstance;
+
+// -------------------
+//     Persistence
+//     (optional)
+// -------------------
+export const cloneInstance = $$$config.cloneInstance;
+export const createContainerChildSet = $$$config.createContainerChildSet;
+export const appendChildToContainerChildSet =
+  $$$config.appendChildToContainerChildSet;
+export const finalizeContainerChildren = $$$config.finalizeContainerChildren;
+export const replaceContainerChildren = $$$config.replaceContainerChildren;
+export const cloneHiddenInstance = $$$config.cloneHiddenInstance;
+export const cloneHiddenTextInstance = $$$config.cloneHiddenTextInstance;
+
+// -------------------
+//     Hydration
+//     (optional)
+// -------------------
+export const isSuspenseInstancePending = $$$config.isSuspenseInstancePending;
+export const isSuspenseInstanceFallback = $$$config.isSuspenseInstanceFallback;
+export const getSuspenseInstanceFallbackErrorDetails =
+  $$$config.getSuspenseInstanceFallbackErrorDetails;
+export const registerSuspenseInstanceRetry =
+  $$$config.registerSuspenseInstanceRetry;
+export const canHydrateFormStateMarker = $$$config.canHydrateFormStateMarker;
+export const isFormStateMarkerMatching = $$$config.isFormStateMarkerMatching;
+export const getNextHydratableSibling = $$$config.getNextHydratableSibling;
+export const getNextHydratableSiblingAfterSingleton =
+  $$$config.getNextHydratableSiblingAfterSingleton;
+export const getFirstHydratableChild = $$$config.getFirstHydratableChild;
+export const getFirstHydratableChildWithinContainer =
+  $$$config.getFirstHydratableChildWithinContainer;
+export const getFirstHydratableChildWithinActivityInstance =
+  $$$config.getFirstHydratableChildWithinActivityInstance;
+export const getFirstHydratableChildWithinSuspenseInstance =
+  $$$config.getFirstHydratableChildWithinSuspenseInstance;
+export const getFirstHydratableChildWithinSingleton =
+  $$$config.getFirstHydratableChildWithinSingleton;
+export const canHydrateInstance = $$$config.canHydrateInstance;
+export const canHydrateTextInstance = $$$config.canHydrateTextInstance;
+export const canHydrateActivityInstance = $$$config.canHydrateActivityInstance;
+export const canHydrateSuspenseInstance = $$$config.canHydrateSuspenseInstance;
+export const hydrateInstance = $$$config.hydrateInstance;
+export const hydrateTextInstance = $$$config.hydrateTextInstance;
+export const hydrateActivityInstance = $$$config.hydrateActivityInstance;
+export const hydrateSuspenseInstance = $$$config.hydrateSuspenseInstance;
+export const getNextHydratableInstanceAfterActivityInstance =
+  $$$config.getNextHydratableInstanceAfterActivityInstance;
+export const getNextHydratableInstanceAfterSuspenseInstance =
+  $$$config.getNextHydratableInstanceAfterSuspenseInstance;
+export const commitHydratedInstance = $$$config.commitHydratedInstance;
+export const commitHydratedContainer = $$$config.commitHydratedContainer;
+export const commitHydratedActivityInstance =
+  $$$config.commitHydratedActivityInstance;
+export const commitHydratedSuspenseInstance =
+  $$$config.commitHydratedSuspenseInstance;
+export const finalizeHydratedChildren = $$$config.finalizeHydratedChildren;
+export const flushHydrationEvents = $$$config.flushHydrationEvents;
+export const clearActivityBoundary = $$$config.clearActivityBoundary;
+export const clearSuspenseBoundary = $$$config.clearSuspenseBoundary;
+export const clearActivityBoundaryFromContainer =
+  $$$config.clearActivityBoundaryFromContainer;
+export const clearSuspenseBoundaryFromContainer =
+  $$$config.clearSuspenseBoundaryFromContainer;
+export const hideDehydratedBoundary = $$$config.hideDehydratedBoundary;
+export const unhideDehydratedBoundary = $$$config.unhideDehydratedBoundary;
+export const shouldDeleteUnhydratedTailInstances =
+  $$$config.shouldDeleteUnhydratedTailInstances;
+export const diffHydratedPropsForDevWarnings =
+  $$$config.diffHydratedPropsForDevWarnings;
+export const diffHydratedTextForDevWarnings =
+  $$$config.diffHydratedTextForDevWarnings;
+export const describeHydratableInstanceForDevWarnings =
+  $$$config.describeHydratableInstanceForDevWarnings;
+export const validateHydratableInstance = $$$config.validateHydratableInstance;
+export const validateHydratableTextInstance =
+  $$$config.validateHydratableTextInstance;
+
+// -------------------
+//     Resources
+//     (optional)
+// -------------------
+export type HoistableRoot = mixed;
+export type Resource = mixed;
+export const supportsResources = $$$config.supportsResources;
+export const isHostHoistableType = $$$config.isHostHoistableType;
+export const getHoistableRoot = $$$config.getHoistableRoot;
+export const getResource = $$$config.getResource;
+export const acquireResource = $$$config.acquireResource;
+export const releaseResource = $$$config.releaseResource;
+export const hydrateHoistable = $$$config.hydrateHoistable;
+export const mountHoistable = $$$config.mountHoistable;
+export const unmountHoistable = $$$config.unmountHoistable;
+export const createHoistableInstance = $$$config.createHoistableInstance;
+export const prepareToCommitHoistables = $$$config.prepareToCommitHoistables;
+export const mayResourceSuspendCommit = $$$config.mayResourceSuspendCommit;
+export const preloadResource = $$$config.preloadResource;
+export const suspendResource = $$$config.suspendResource;
+
+// -------------------
+//     Singletons
+//     (optional)
+// -------------------
+export const supportsSingletons = $$$config.supportsSingletons;
+export const resolveSingletonInstance = $$$config.resolveSingletonInstance;
+export const acquireSingletonInstance = $$$config.acquireSingletonInstance;
+export const releaseSingletonInstance = $$$config.releaseSingletonInstance;
+export const isHostSingletonType = $$$config.isHostSingletonType;
+export const isSingletonScope = $$$config.isSingletonScope;
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
new file mode 100644
index 00000000000..fa7dbe31232
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-bindings/src/client/ReactFiberConfigDOM';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js b/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js
new file mode 100644
index 00000000000..2fb8768972d
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-native-renderer/src/ReactFiberConfigFabric';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js b/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js
new file mode 100644
index 00000000000..88d0c020bbe
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Re-exported just because we always type check react-reconciler even in
+// dimensions where it's not used.
+export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+
+// eslint-disable-next-line react-internal/prod-error-codes
+throw new Error('Fiber is not used in react-markup');
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.native.js b/packages/react-reconciler/src/forks/ReactFiberConfig.native.js
new file mode 100644
index 00000000000..3e06abc660e
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.native.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-native-renderer/src/ReactFiberConfigNative';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.test.js b/packages/react-reconciler/src/forks/ReactFiberConfig.test.js
new file mode 100644
index 00000000000..238434a50df
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.test.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-test-renderer/src/ReactFiberConfigTestHost';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
new file mode 100644
index 00000000000..97124bbf5ba
--- /dev/null
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, ReactConsumerType} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
+
+import {
+  disableLegacyMode,
+  enableLegacyHidden,
+  enableViewTransition,
+} from 'shared/ReactFeatureFlags';
+
+import {
+  FunctionComponent,
+  ClassComponent,
+  HostRoot,
+  HostPortal,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostText,
+  Fragment,
+  Mode,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Profiler,
+  SuspenseComponent,
+  MemoComponent,
+  SimpleMemoComponent,
+  LazyComponent,
+  IncompleteClassComponent,
+  IncompleteFunctionComponent,
+  DehydratedFragment,
+  SuspenseListComponent,
+  ScopeComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  CacheComponent,
+  TracingMarkerComponent,
+  Throw,
+  ViewTransitionComponent,
+  ActivityComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
+import type {ReactComponentInfo} from '../../shared/ReactTypes';
+
+// Keep in sync with shared/getComponentNameFromType
+function getWrappedName(
+  outerType: mixed,
+  innerType: any,
+  wrapperName: string,
+): string {
+  const functionName = innerType.displayName || innerType.name || '';
+  return (
+    (outerType: any).displayName ||
+    (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName)
+  );
+}
+
+// Keep in sync with shared/getComponentNameFromType
+function getContextName(type: ReactContext<any>) {
+  return type.displayName || 'Context';
+}
+
+export function getComponentNameFromOwner(
+  owner: Fiber | ReactComponentInfo,
+): string | null {
+  if (typeof owner.tag === 'number') {
+    return getComponentNameFromFiber((owner: any));
+  }
+  if (typeof owner.name === 'string') {
+    return owner.name;
+  }
+  return null;
+}
+
+export default function getComponentNameFromFiber(fiber: Fiber): string | null {
+  const {tag, type} = fiber;
+  switch (tag) {
+    case ActivityComponent:
+      return 'Activity';
+    case CacheComponent:
+      return 'Cache';
+    case ContextConsumer:
+      const consumer: ReactConsumerType<any> = (type: any);
+      return getContextName(consumer._context) + '.Consumer';
+    case ContextProvider:
+      const context: ReactContext<any> = (type: any);
+      return getContextName(context);
+    case DehydratedFragment:
+      return 'DehydratedFragment';
+    case ForwardRef:
+      return getWrappedName(type, type.render, 'ForwardRef');
+    case Fragment:
+      return 'Fragment';
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent:
+      // Host component type is the display name (e.g. "div", "View")
+      return type;
+    case HostPortal:
+      return 'Portal';
+    case HostRoot:
+      return 'Root';
+    case HostText:
+      return 'Text';
+    case LazyComponent:
+      // Name comes from the type in this case; we don't have a tag.
+      return getComponentNameFromType(type);
+    case Mode:
+      if (type === REACT_STRICT_MODE_TYPE) {
+        // Don't be less specific than shared/getComponentNameFromType
+        return 'StrictMode';
+      }
+      return 'Mode';
+    case OffscreenComponent:
+      return 'Offscreen';
+    case Profiler:
+      return 'Profiler';
+    case ScopeComponent:
+      return 'Scope';
+    case SuspenseComponent:
+      return 'Suspense';
+    case SuspenseListComponent:
+      return 'SuspenseList';
+    case TracingMarkerComponent:
+      return 'TracingMarker';
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        return 'ViewTransition';
+      }
+    // The display name for these tags come from the user-provided type:
+    // Fallthrough
+    case IncompleteClassComponent:
+    case IncompleteFunctionComponent:
+      if (disableLegacyMode) {
+        break;
+      }
+    // Fallthrough
+    case ClassComponent:
+    case FunctionComponent:
+    case MemoComponent:
+    case SimpleMemoComponent:
+      if (typeof type === 'function') {
+        return (type: any).displayName || type.name || null;
+      }
+      if (typeof type === 'string') {
+        return type;
+      }
+      break;
+    case LegacyHiddenComponent:
+      if (enableLegacyHidden) {
+        return 'LegacyHidden';
+      }
+      break;
+    case Throw: {
+      if (__DEV__) {
+        // For an error in child position we use the name of the inner most parent component.
+        // Whether a Server Component or the parent Fiber.
+        const debugInfo = fiber._debugInfo;
+        if (debugInfo != null) {
+          for (let i = debugInfo.length - 1; i >= 0; i--) {
+            if (typeof debugInfo[i].name === 'string') {
+              return debugInfo[i].name;
+            }
+          }
+        }
+        if (fiber.return === null) {
+          return null;
+        }
+        return getComponentNameFromFiber(fiber.return);
+      }
+      return null;
+    }
+  }
+
+  return null;
+}
diff --git a/packages/react-refresh/README.md b/packages/react-refresh/README.md
new file mode 100644
index 00000000000..f6983ef52ae
--- /dev/null
+++ b/packages/react-refresh/README.md
@@ -0,0 +1,5 @@
+# react-refresh
+
+This package implements the wiring necessary to integrate Fast Refresh into bundlers. Fast Refresh is a feature that lets you edit React components in a running application without losing their state. It is similar to an old feature known as "hot reloading", but Fast Refresh is more reliable and officially supported by React.
+
+This package is primarily aimed at developers of bundler plugins. If you’re working on one, here is a [rough guide](https://github.com/facebook/react/issues/16604#issuecomment-528663101) for Fast Refresh integration using this package.
diff --git a/packages/react-refresh/babel.js b/packages/react-refresh/babel.js
new file mode 100644
index 00000000000..1b4f79768aa
--- /dev/null
+++ b/packages/react-refresh/babel.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from './src/ReactFreshBabelPlugin';
diff --git a/packages/react-refresh/npm/babel.js b/packages/react-refresh/npm/babel.js
new file mode 100644
index 00000000000..d9900d21a28
--- /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.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 00000000000..c23bf725e9b
--- /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.js');
+} else {
+  module.exports = require('./cjs/react-refresh-runtime.development.js');
+}
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
new file mode 100644
index 00000000000..105af71485a
--- /dev/null
+++ b/packages/react-refresh/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-refresh",
+  "description": "React is a JavaScript library for building user interfaces.",
+  "keywords": [
+    "react"
+  ],
+  "version": "0.19.0",
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "babel.js",
+    "runtime.js",
+    "cjs/"
+  ],
+  "main": "runtime.js",
+  "exports": {
+    ".": "./runtime.js",
+    "./runtime": "./runtime.js",
+    "./babel": "./babel.js",
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "devDependencies": {
+    "react-16-8": "npm:react@16.8.0",
+    "react-dom-16-8": "npm:react-dom@16.8.0",
+    "scheduler-0-13": "npm:scheduler@0.13.0"
+  }
+}
diff --git a/packages/react-refresh/runtime.js b/packages/react-refresh/runtime.js
new file mode 100644
index 00000000000..4eae3997b6c
--- /dev/null
+++ b/packages/react-refresh/runtime.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './src/ReactFreshRuntime';
diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
new file mode 100644
index 00000000000..9592a994399
--- /dev/null
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -0,0 +1,861 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export default function (babel, opts = {}) {
+  if (typeof babel.env === 'function') {
+    // Only available in Babel 7.
+    const env = babel.env();
+    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) {
+    const handle = programPath.scope.generateUidIdentifier('c');
+    if (!registrationsByProgramPath.has(programPath)) {
+      registrationsByProgramPath.set(programPath, []);
+    }
+    const registrations = registrationsByProgramPath.get(programPath);
+    registrations.push({
+      handle,
+      persistentID,
+    });
+    return handle;
+  }
+
+  function isComponentishName(name) {
+    return typeof name === 'string' && name[0] >= 'A' && name[0] <= 'Z';
+  }
+
+  function findInnerComponents(inferredName, path, callback) {
+    const node = path.node;
+    switch (node.type) {
+      case 'Identifier': {
+        if (!isComponentishName(node.name)) {
+          return false;
+        }
+        // export default hoc(Foo)
+        // const X = hoc(Foo)
+        callback(inferredName, node, null);
+        return true;
+      }
+      case 'FunctionDeclaration': {
+        // function Foo() {}
+        // export function Foo() {}
+        // export default function Foo() {}
+        callback(inferredName, node.id, null);
+        return true;
+      }
+      case 'ArrowFunctionExpression': {
+        if (node.body.type === 'ArrowFunctionExpression') {
+          return false;
+        }
+        // let Foo = () => {}
+        // export default hoc1(hoc2(() => {}))
+        callback(inferredName, node, path);
+        return true;
+      }
+      case 'FunctionExpression': {
+        // let Foo = function() {}
+        // const Foo = hoc1(forwardRef(function renderFoo() {}))
+        // export default memo(function() {})
+        callback(inferredName, node, path);
+        return true;
+      }
+      case 'CallExpression': {
+        const argsPath = path.get('arguments');
+        if (argsPath === undefined || argsPath.length === 0) {
+          return false;
+        }
+        const calleePath = path.get('callee');
+        switch (calleePath.node.type) {
+          case 'MemberExpression':
+          case 'Identifier': {
+            const calleeSource = calleePath.getSource();
+            const firstArgPath = argsPath[0];
+            const innerName = inferredName + '$' + calleeSource;
+            const foundInside = findInnerComponents(
+              innerName,
+              firstArgPath,
+              callback,
+            );
+            if (!foundInside) {
+              return false;
+            }
+            // const Foo = hoc1(hoc2(() => {}))
+            // export default memo(React.forwardRef(function() {}))
+            callback(inferredName, node, path);
+            return true;
+          }
+          default: {
+            return false;
+          }
+        }
+      }
+      case 'VariableDeclarator': {
+        const init = node.init;
+        if (init === null) {
+          return false;
+        }
+        const name = node.id.name;
+        if (!isComponentishName(name)) {
+          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.
+            }
+            break;
+          }
+          case 'TaggedTemplateExpression':
+            // Maybe something like styled.div`...`
+            break;
+          default:
+            return false;
+        }
+        const initPath = path.get('init');
+        const foundInside = findInnerComponents(
+          inferredName,
+          initPath,
+          callback,
+        );
+        if (foundInside) {
+          return true;
+        }
+        // See if this identifier is used in JSX. Then it's a component.
+        const binding = path.scope.getBinding(name);
+        if (binding === undefined) {
+          return;
+        }
+        let isLikelyUsedAsType = false;
+        const referencePaths = binding.referencePaths;
+        for (let i = 0; i < referencePaths.length; i++) {
+          const ref = referencePaths[i];
+          if (
+            ref.node &&
+            ref.node.type !== 'JSXIdentifier' &&
+            ref.node.type !== 'Identifier'
+          ) {
+            continue;
+          }
+          const refParent = ref.parent;
+          if (refParent.type === 'JSXOpeningElement') {
+            isLikelyUsedAsType = true;
+          } else if (refParent.type === 'CallExpression') {
+            const callee = refParent.callee;
+            let fnName;
+            switch (callee.type) {
+              case 'Identifier':
+                fnName = callee.name;
+                break;
+              case 'MemberExpression':
+                fnName = callee.property.name;
+                break;
+            }
+            switch (fnName) {
+              case 'createElement':
+              case 'jsx':
+              case 'jsxDEV':
+              case 'jsxs':
+                isLikelyUsedAsType = true;
+                break;
+            }
+          }
+          if (isLikelyUsedAsType) {
+            // const X = ... + later <X />
+            callback(inferredName, init, initPath);
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+
+  function isBuiltinHook(hookName) {
+    switch (hookName) {
+      case 'useState':
+      case 'React.useState':
+      case 'useReducer':
+      case 'React.useReducer':
+      case 'useEffect':
+      case 'React.useEffect':
+      case 'useLayoutEffect':
+      case 'React.useLayoutEffect':
+      case 'useMemo':
+      case 'React.useMemo':
+      case 'useCallback':
+      case 'React.useCallback':
+      case 'useRef':
+      case 'React.useRef':
+      case 'useContext':
+      case 'React.useContext':
+      case 'useImperativeHandle':
+      case 'React.useImperativeHandle':
+      case 'useDebugValue':
+      case 'React.useDebugValue':
+      case 'useId':
+      case 'React.useId':
+      case 'useDeferredValue':
+      case 'React.useDeferredValue':
+      case 'useTransition':
+      case 'React.useTransition':
+      case 'useInsertionEffect':
+      case 'React.useInsertionEffect':
+      case 'useSyncExternalStore':
+      case 'React.useSyncExternalStore':
+      case 'useFormStatus':
+      case 'React.useFormStatus':
+      case 'useFormState':
+      case 'React.useFormState':
+      case 'useActionState':
+      case 'React.useActionState':
+      case 'useOptimistic':
+      case 'React.useOptimistic':
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  function getHookCallsSignature(functionNode) {
+    const fnHookCalls = hookCalls.get(functionNode);
+    if (fnHookCalls === undefined) {
+      return null;
+    }
+    return {
+      key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'),
+      customHooks: fnHookCalls
+        .filter(call => !isBuiltinHook(call.name))
+        .map(call => t.cloneDeep(call.callee)),
+    };
+  }
+
+  const 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;
+
+    let forceReset = hasForceResetComment(scope.path);
+    const 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 initializer 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;
+  }
+
+  function findHOCCallPathsAbove(path) {
+    const calls = [];
+    while (true) {
+      if (!path) {
+        return calls;
+      }
+      const parentPath = path.parentPath;
+      if (!parentPath) {
+        return calls;
+      }
+      if (
+        // hoc(_c = function() { })
+        parentPath.node.type === 'AssignmentExpression' &&
+        path.node === parentPath.node.right
+      ) {
+        // Ignore registrations.
+        path = parentPath;
+        continue;
+      }
+      if (
+        // hoc1(hoc2(...))
+        parentPath.node.type === 'CallExpression' &&
+        path.node !== parentPath.node.callee
+      ) {
+        calls.push(parentPath);
+        path = parentPath;
+        continue;
+      }
+      return calls; // Stop at other types.
+    }
+  }
+
+  const seenForRegistration = new WeakSet();
+  const seenForSignature = new WeakSet();
+  const seenForOutro = new WeakSet();
+
+  const 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, []);
+      }
+      const 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) {
+        const node = path.node;
+        const decl = node.declaration;
+        const declPath = path.get('declaration');
+        if (decl.type !== 'CallExpression') {
+          // For now, we only support possible HOC calls here.
+          // Named function declarations are handled in FunctionDeclaration.
+          // Anonymous direct exports like export default function() {}
+          // are currently ignored.
+          return;
+        }
+
+        // Make sure we're not mutating the same tree twice.
+        // This can happen if another Babel plugin replaces parents.
+        if (seenForRegistration.has(node)) {
+          return;
+        }
+        seenForRegistration.add(node);
+        // Don't mutate the tree above this point.
+
+        // This code path handles nested cases like:
+        // export default memo(() => {})
+        // In those cases it is more plausible people will omit names
+        // so they're worth handling despite possible false positives.
+        // More importantly, it handles the named case:
+        // export default memo(function Named() {})
+        const inferredName = '%default%';
+        const programPath = path.parentPath;
+        findInnerComponents(
+          inferredName,
+          declPath,
+          (persistentID, targetExpr, targetPath) => {
+            if (targetPath === null) {
+              // For case like:
+              // export default hoc(Foo)
+              // we don't want to wrap Foo inside the call.
+              // Instead we assume it's registered at definition.
+              return;
+            }
+            const handle = createRegistration(programPath, persistentID);
+            targetPath.replaceWith(
+              t.assignmentExpression('=', handle, targetExpr),
+            );
+          },
+        );
+      },
+      FunctionDeclaration: {
+        enter(path) {
+          const node = path.node;
+          let programPath;
+          let insertAfterPath;
+          let modulePrefix = '';
+          switch (path.parent.type) {
+            case 'Program':
+              insertAfterPath = path;
+              programPath = path.parentPath;
+              break;
+            case 'TSModuleBlock':
+              insertAfterPath = path;
+              programPath = insertAfterPath.parentPath.parentPath;
+              break;
+            case 'ExportNamedDeclaration':
+              insertAfterPath = path.parentPath;
+              programPath = insertAfterPath.parentPath;
+              break;
+            case 'ExportDefaultDeclaration':
+              insertAfterPath = path.parentPath;
+              programPath = insertAfterPath.parentPath;
+              break;
+            default:
+              return;
+          }
+
+          // These types can be nested in typescript namespace
+          // We need to find the export chain
+          // Or return if it stays local
+          if (
+            path.parent.type === 'TSModuleBlock' ||
+            path.parent.type === 'ExportNamedDeclaration'
+          ) {
+            while (programPath.type !== 'Program') {
+              if (programPath.type === 'TSModuleDeclaration') {
+                if (
+                  programPath.parentPath.type !== 'Program' &&
+                  programPath.parentPath.type !== 'ExportNamedDeclaration'
+                ) {
+                  return;
+                }
+                modulePrefix = programPath.node.id.name + '$' + modulePrefix;
+              }
+              programPath = programPath.parentPath;
+            }
+          }
+
+          const id = node.id;
+          if (id === null) {
+            // We don't currently handle anonymous default exports.
+            return;
+          }
+          const inferredName = id.name;
+          if (!isComponentishName(inferredName)) {
+            return;
+          }
+
+          // Make sure we're not mutating the same tree twice.
+          // This can happen if another Babel plugin replaces parents.
+          if (seenForRegistration.has(node)) {
+            return;
+          }
+          seenForRegistration.add(node);
+          // Don't mutate the tree above this point.
+
+          const innerName = modulePrefix + inferredName;
+          // export function Named() {}
+          // function Named() {}
+          findInnerComponents(innerName, path, (persistentID, targetExpr) => {
+            const handle = createRegistration(programPath, persistentID);
+            insertAfterPath.insertAfter(
+              t.expressionStatement(
+                t.assignmentExpression('=', handle, targetExpr),
+              ),
+            );
+          });
+        },
+        exit(path) {
+          const node = path.node;
+          const id = node.id;
+          if (id === null) {
+            return;
+          }
+          const signature = getHookCallsSignature(node);
+          if (signature === null) {
+            return;
+          }
+
+          // Make sure we're not mutating the same tree twice.
+          // This can happen if another Babel plugin replaces parents.
+          if (seenForSignature.has(node)) {
+            return;
+          }
+          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.
+          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 hard coding it.
+          let insertAfterPath = null;
+          path.find(p => {
+            if (p.parentPath.isBlock()) {
+              insertAfterPath = p;
+              return true;
+            }
+          });
+          if (insertAfterPath === null) {
+            return;
+          }
+
+          insertAfterPath.insertAfter(
+            t.expressionStatement(
+              t.callExpression(
+                sigCallID,
+                createArgumentsForSignature(
+                  id,
+                  signature,
+                  insertAfterPath.scope,
+                ),
+              ),
+            ),
+          );
+        },
+      },
+      'ArrowFunctionExpression|FunctionExpression': {
+        exit(path) {
+          const node = path.node;
+          const signature = getHookCallsSignature(node);
+          if (signature === null) {
+            return;
+          }
+
+          // Make sure we're not mutating the same tree twice.
+          // This can happen if another Babel plugin replaces parents.
+          if (seenForSignature.has(node)) {
+            return;
+          }
+          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 => {
+              if (p.parentPath.isBlock()) {
+                insertAfterPath = p;
+                return true;
+              }
+            });
+            if (insertAfterPath === null) {
+              return;
+            }
+            // Special case when a function would get an inferred name:
+            // let Foo = () => {}
+            // let Foo = function() {}
+            // We'll add signature it on next line so that
+            // we don't mess up the inferred 'Foo' function name.
+            insertAfterPath.insertAfter(
+              t.expressionStatement(
+                t.callExpression(
+                  sigCallID,
+                  createArgumentsForSignature(
+                    path.parent.id,
+                    signature,
+                    insertAfterPath.scope,
+                  ),
+                ),
+              ),
+            );
+            // Result: let Foo = () => {}; __signature(Foo, ...);
+          } else {
+            // let Foo = hoc(() => {})
+            const paths = [path, ...findHOCCallPathsAbove(path)];
+            paths.forEach(p => {
+              p.replaceWith(
+                t.callExpression(
+                  sigCallID,
+                  createArgumentsForSignature(p.node, signature, p.scope),
+                ),
+              );
+            });
+            // Result: let Foo = __signature(hoc(__signature(() => {}, ...)), ...)
+          }
+        },
+      },
+      VariableDeclaration(path) {
+        const node = path.node;
+        let programPath;
+        let insertAfterPath;
+        let modulePrefix = '';
+        switch (path.parent.type) {
+          case 'Program':
+            insertAfterPath = path;
+            programPath = path.parentPath;
+            break;
+          case 'TSModuleBlock':
+            insertAfterPath = path;
+            programPath = insertAfterPath.parentPath.parentPath;
+            break;
+          case 'ExportNamedDeclaration':
+            insertAfterPath = path.parentPath;
+            programPath = insertAfterPath.parentPath;
+            break;
+          case 'ExportDefaultDeclaration':
+            insertAfterPath = path.parentPath;
+            programPath = insertAfterPath.parentPath;
+            break;
+          default:
+            return;
+        }
+
+        // These types can be nested in typescript namespace
+        // We need to find the export chain
+        // Or return if it stays local
+        if (
+          path.parent.type === 'TSModuleBlock' ||
+          path.parent.type === 'ExportNamedDeclaration'
+        ) {
+          while (programPath.type !== 'Program') {
+            if (programPath.type === 'TSModuleDeclaration') {
+              if (
+                programPath.parentPath.type !== 'Program' &&
+                programPath.parentPath.type !== 'ExportNamedDeclaration'
+              ) {
+                return;
+              }
+              modulePrefix = programPath.node.id.name + '$' + modulePrefix;
+            }
+            programPath = programPath.parentPath;
+          }
+        }
+
+        // Make sure we're not mutating the same tree twice.
+        // This can happen if another Babel plugin replaces parents.
+        if (seenForRegistration.has(node)) {
+          return;
+        }
+        seenForRegistration.add(node);
+        // Don't mutate the tree above this point.
+
+        const declPaths = path.get('declarations');
+        if (declPaths.length !== 1) {
+          return;
+        }
+        const declPath = declPaths[0];
+        const inferredName = declPath.node.id.name;
+        const innerName = modulePrefix + inferredName;
+        findInnerComponents(
+          innerName,
+          declPath,
+          (persistentID, targetExpr, targetPath) => {
+            if (targetPath === null) {
+              // For case like:
+              // export const Something = hoc(Foo)
+              // we don't want to wrap Foo inside the call.
+              // Instead we assume it's registered at definition.
+              return;
+            }
+            const handle = createRegistration(programPath, persistentID);
+            if (targetPath.parent.type === 'VariableDeclarator') {
+              // Special case when a variable would get an inferred name:
+              // let Foo = () => {}
+              // let Foo = function() {}
+              // let Foo = styled.div``;
+              // We'll register it on next line so that
+              // we don't mess up the inferred 'Foo' function name.
+              // (eg: with @babel/plugin-transform-react-display-name or
+              // babel-plugin-styled-components)
+              insertAfterPath.insertAfter(
+                t.expressionStatement(
+                  t.assignmentExpression('=', handle, declPath.node.id),
+                ),
+              );
+              // Result: let Foo = () => {}; _c1 = Foo;
+            } else {
+              // let Foo = hoc(() => {})
+              targetPath.replaceWith(
+                t.assignmentExpression('=', handle, targetExpr),
+              );
+              // Result: let Foo = hoc(_c1 = () => {})
+            }
+          },
+        );
+      },
+      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) {
+            return;
+          }
+
+          // Make sure we're not mutating the same tree twice.
+          // This can happen if another Babel plugin replaces parents.
+          const node = path.node;
+          if (seenForOutro.has(node)) {
+            return;
+          }
+          seenForOutro.add(node);
+          // Don't mutate the tree above this point.
+
+          registrationsByProgramPath.delete(path);
+          const declarators = [];
+          path.pushContainer('body', t.variableDeclaration('var', declarators));
+          registrations.forEach(({handle, persistentID}) => {
+            path.pushContainer(
+              'body',
+              t.expressionStatement(
+                t.callExpression(refreshReg, [
+                  handle,
+                  t.stringLiteral(persistentID),
+                ]),
+              ),
+            );
+            declarators.push(t.variableDeclarator(handle));
+          });
+        },
+      },
+    },
+  };
+}
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
new file mode 100644
index 00000000000..079db6594ad
--- /dev/null
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -0,0 +1,710 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  Family,
+  RefreshUpdate,
+  ScheduleRefresh,
+  ScheduleRoot,
+  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 = {
+  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: WeakMap<any, Family> | Map<any, Family> =
+  new PossiblyWeakMap();
+const allSignaturesByType: 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.
+const updatedFamiliesByType: 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.
+const helpersByRendererID: Map<number, RendererHelpers> = new Map();
+
+const helpersByRoot: Map<FiberRoot, RendererHelpers> = new Map();
+
+// We keep track of mounted roots so we can schedule updates.
+const mountedRoots: Set<FiberRoot> = new Set();
+// If a root captures an error, we remember it so we can retry on edit.
+const 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.
+const rootElements: WeakMap<any, ReactNodeList> | null =
+  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: any, nextType: any) {
+  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: any) {
+  return type.prototype && type.prototype.isReactComponent;
+}
+
+function canPreserveStateBetween(prevType: any, nextType: any) {
+  if (isReactClass(prevType) || isReactClass(nextType)) {
+    return false;
+  }
+  if (haveEqualSignatures(prevType, nextType)) {
+    return true;
+  }
+  return false;
+}
+
+function resolveFamily(type: any) {
+  // 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> {
+  const clone = new Map<K, V>();
+  map.forEach((value, key) => {
+    clone.set(key, value);
+  });
+  return clone;
+}
+function cloneSet<T>(set: Set<T>): Set<T> {
+  const clone = new Set<T>();
+  set.forEach(value => {
+    clone.add(value);
+  });
+  return clone;
+}
+
+// This is a safety mechanism to protect against rogue getters and Proxies.
+function getProperty(object: any, property: string) {
+  try {
+    return object[property];
+  } catch (err) {
+    // Intentionally ignore.
+    return undefined;
+  }
+}
+
+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<Family>();
+    const updatedFamilies = new Set<Family>();
+
+    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.
+    const failedRootsSnapshot = cloneSet(failedRoots);
+    const mountedRootsSnapshot = cloneSet(mountedRoots);
+    const 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 (getProperty(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__) {
+    if (!allSignaturesByType.has(type)) {
+      allSignaturesByType.set(type, {
+        forceReset,
+        ownKey: key,
+        fullKey: null,
+        getCustomHooks: getCustomHooks || (() => []),
+      });
+    }
+    // Visit inner types because we might not have signed them.
+    if (typeof type === 'object' && type !== null) {
+      switch (getProperty(type, '$$typeof')) {
+        case REACT_FORWARD_REF_TYPE:
+          setSignature(type.render, key, forceReset, getCustomHooks);
+          break;
+        case REACT_MEMO_TYPE:
+          setSignature(type.type, key, forceReset, getCustomHooks);
+          break;
+      }
+    }
+  } 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 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 => nextID++,
+        onScheduleFiberRoot: (
+          id: number,
+          root: FiberRoot,
+          children: ReactNodeList,
+        ) => {},
+        onCommitFiberRoot: (
+          id: number,
+          root: FiberRoot,
+          maybePriorityLevel: mixed,
+          didError: boolean,
+        ) => {},
+        onCommitFiberUnmount() {},
+      };
+    }
+
+    if (hook.isDisabled) {
+      // This isn't a real property on the hook, but it can be set to opt out
+      // of DevTools integration and associated warnings and logs.
+      // Using console['warn'] to evade Babel and ESLint
+      console['warn'](
+        'Something has shimmed the React DevTools global hook (__REACT_DEVTOOLS_GLOBAL_HOOK__). ' +
+          'Fast Refresh is not compatible with this shim and will be disabled.',
+      );
+      return;
+    }
+
+    // Here, we just want to get a reference to scheduleRefresh.
+    const oldInject = hook.inject;
+    hook.inject = function (this: mixed, 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 (
+      this: mixed,
+      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 (
+      this: mixed,
+      id: number,
+      root: FiberRoot,
+      maybePriorityLevel: mixed,
+      didError: boolean,
+    ) {
+      const helpers = helpersByRendererID.get(id);
+      if (helpers !== undefined) {
+        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 &&
+            mountedRoots.has(root);
+
+          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);
+        }
+      }
+
+      // Always call the decorated DevTools hook.
+      return oldOnCommitFiberRoot.apply(this, arguments);
+    };
+  } else {
+    throw new Error(
+      'Unexpected call to React Refresh in a production environment.',
+    );
+  }
+}
+
+export function hasUnrecoverableErrors(): boolean {
+  // TODO: delete this after removing dependency in RN.
+  return false;
+}
+
+// Exposed for testing.
+export function _getMountedRootCount(): number {
+  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(); /* Call without arguments 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>;
+// }
+//
+// /* Call with arguments attaches the signature to the type: */
+// _s(
+//   Hello,
+//   'useState{[foo, setFoo]}(0)',
+//   () => [useCustomHook], /* Lazy to avoid triggering inline requires */
+// );
+export function createSignatureFunctionForTransform(): <T>(
+  type: T,
+  key: string,
+  forceReset?: boolean,
+  getCustomHooks?: () => Array<Function>,
+) => T | void {
+  if (__DEV__) {
+    let savedType: mixed;
+    let hasCustomHooks: boolean;
+    let didCollectHooks = false;
+    return function <T>(
+      type: T,
+      key: string,
+      forceReset?: boolean,
+      getCustomHooks?: () => Array<Function>,
+    ): T | void {
+      if (typeof key === 'string') {
+        // We're in the initial phase that associates signatures
+        // with the functions. Note this may be called multiple times
+        // in HOC chains like _s(hoc1(_s(hoc2(_s(actualFunction))))).
+        if (!savedType) {
+          // We're in the innermost call, so this is the actual type.
+          savedType = type;
+          hasCustomHooks = typeof getCustomHooks === 'function';
+        }
+        // Set the signature for all types (even wrappers!) in case
+        // they have no signatures of their own. This is to prevent
+        // problems like https://github.com/facebook/react/issues/20417.
+        if (
+          type != null &&
+          (typeof type === 'function' || typeof type === 'object')
+        ) {
+          setSignature(type, key, forceReset, getCustomHooks);
+        }
+        return type;
+      } else {
+        // We're in the _s() call without arguments, which means
+        // this is the time to collect custom Hook signatures.
+        // Only do this once. This path is hot and runs *inside* every render!
+        if (!didCollectHooks && hasCustomHooks) {
+          didCollectHooks = true;
+          collectCustomHooksForSignature(savedType);
+        }
+      }
+    };
+  } 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;
+          }
+          if (
+            // $FlowFixMe[prop-missing]
+            type.prototype.__proto__ !== Object.prototype // eslint-disable-line no-proto
+          ) {
+            // 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 (getProperty(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-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
new file mode 100644
index 00000000000..6fb00a66a24
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -0,0 +1,3835 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactFreshRuntime;
+let Scheduler;
+let act;
+let createReactClass;
+let waitFor;
+let assertLog;
+
+describe('ReactFresh', () => {
+  let container;
+  let root;
+
+  beforeEach(() => {
+    if (__DEV__) {
+      jest.resetModules();
+      React = require('react');
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+      ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler');
+      act = require('internal-test-utils').act;
+
+      const InternalTestUtils = require('internal-test-utils');
+      waitFor = InternalTestUtils.waitFor;
+      assertLog = InternalTestUtils.assertLog;
+
+      createReactClass = require('create-react-class/factory')(
+        React.Component,
+        React.isValidElement,
+        new React.Component().updater,
+      );
+      container = document.createElement('div');
+      root = ReactDOMClient.createRoot(container);
+      document.body.appendChild(container);
+    }
+  });
+
+  afterEach(() => {
+    if (__DEV__) {
+      delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      document.body.removeChild(container);
+    }
+  });
+
+  function prepare(version) {
+    const Component = version();
+    return Component;
+  }
+
+  async function render(version, props) {
+    const Component = version();
+    await act(() => {
+      root.render(<Component {...props} />);
+    });
+    return Component;
+  }
+
+  async function patch(version) {
+    const Component = version();
+    await act(() => {
+      ReactFreshRuntime.performReactRefresh();
+    });
+    return Component;
+  }
+
+  function patchSync(version) {
+    const Component = version();
+    ReactFreshRuntime.performReactRefresh();
+    return Component;
+  }
+
+  function $RefreshReg$(type, id) {
+    ReactFreshRuntime.register(type, id);
+  }
+
+  function $RefreshSig$(type, key, forceReset, getCustomHooks) {
+    ReactFreshRuntime.setSignature(type, key, forceReset, getCustomHooks);
+    return type;
+  }
+
+  // Note: This is based on a similar component we use in www. We can delete
+  // once the extra div wrapper is no longer necessary.
+  function LegacyHiddenDiv({children, mode}) {
+    return (
+      <div hidden={mode === 'hidden'}>
+        <React.unstable_LegacyHidden
+          mode={mode === 'hidden' ? 'unstable-defer-without-hiding' : mode}>
+          {children}
+        </React.unstable_LegacyHidden>
+      </div>
+    );
+  }
+
+  it('can preserve state for compatible types', async () => {
+    if (__DEV__) {
+      const HelloV1 = await 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');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const HelloV2 = await 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');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => HelloV1);
+      await render(() => HelloV2);
+      await render(() => HelloV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('3');
+      expect(el.style.color).toBe('red');
+
+      // Finally, a render with incompatible type should reset it.
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        // No register call.
+        // This is considered a new type.
+        return Hello;
+      });
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('blue');
+    }
+  });
+
+  it('can preserve state for forwardRef', async () => {
+    if (__DEV__) {
+      const OuterV1 = await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.forwardRef(() => <Hello />);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const OuterV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.forwardRef(() => <Hello />);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => OuterV1);
+      await render(() => OuterV2);
+      await render(() => OuterV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Finally, a render with incompatible type should reset it.
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        // Note: no forwardRef wrapper this time.
+        return Hello;
+      });
+
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('blue');
+    }
+  });
+
+  it('should not consider two forwardRefs around the same type to be equivalent', async () => {
+    if (__DEV__) {
+      const ParentV1 = await render(
+        () => {
+          function Hello() {
+            const [val, setVal] = React.useState(0);
+            return (
+              <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+                {val}
+              </p>
+            );
+          }
+          $RefreshReg$(Hello, 'Hello');
+
+          function renderInner() {
+            return <Hello />;
+          }
+          // Both of these are wrappers around the same inner function.
+          // They should be treated as distinct types across reloads.
+          const ForwardRefA = React.forwardRef(renderInner);
+          $RefreshReg$(ForwardRefA, 'ForwardRefA');
+          const ForwardRefB = React.forwardRef(renderInner);
+          $RefreshReg$(ForwardRefB, 'ForwardRefB');
+
+          function Parent({cond}) {
+            return cond ? <ForwardRefA /> : <ForwardRefB />;
+          }
+          $RefreshReg$(Parent, 'Parent');
+
+          return Parent;
+        },
+        {cond: true},
+      );
+
+      // Bump the state before switching up types.
+      let el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Switching up the inner types should reset the state.
+      await render(() => ParentV1, {cond: false});
+      expect(el).not.toBe(container.firstChild);
+      el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Switch them up back again.
+      await render(() => ParentV1, {cond: true});
+      expect(el).not.toBe(container.firstChild);
+      el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+
+      // Now bump up the state to prepare for patching.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Patch to change the color.
+      const ParentV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        function renderInner() {
+          return <Hello />;
+        }
+        // Both of these are wrappers around the same inner function.
+        // They should be treated as distinct types across reloads.
+        const ForwardRefA = React.forwardRef(renderInner);
+        $RefreshReg$(ForwardRefA, 'ForwardRefA');
+        const ForwardRefB = React.forwardRef(renderInner);
+        $RefreshReg$(ForwardRefB, 'ForwardRefB');
+
+        function Parent({cond}) {
+          return cond ? <ForwardRefA /> : <ForwardRefB />;
+        }
+        $RefreshReg$(Parent, 'Parent');
+
+        return Parent;
+      });
+
+      // The state should be intact; the color should change.
+      expect(el).toBe(container.firstChild);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Switching up the condition should still reset the state.
+      await render(() => ParentV2, {cond: false});
+      expect(el).not.toBe(container.firstChild);
+      el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('red');
+
+      // Now bump up the state to prepare for top-level renders.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el).toBe(container.firstChild);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Finally, verify using top-level render with stale type keeps state.
+      await render(() => ParentV1);
+      await render(() => ParentV2);
+      await render(() => ParentV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+    }
+  });
+
+  it('can update forwardRef render function with its wrapper', async () => {
+    if (__DEV__) {
+      await render(() => {
+        function Hello({color}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.forwardRef(() => <Hello color="blue" />);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      await patch(() => {
+        function Hello({color}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.forwardRef(() => <Hello color="red" />);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+    }
+  });
+
+  it('can update forwardRef render function in isolation', async () => {
+    if (__DEV__) {
+      await render(() => {
+        function Hello({color}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        function renderHello() {
+          return <Hello color="blue" />;
+        }
+        $RefreshReg$(renderHello, 'renderHello');
+
+        return React.forwardRef(renderHello);
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update of just the rendering function.
+      await patch(() => {
+        function Hello({color}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        function renderHello() {
+          return <Hello color="red" />;
+        }
+        $RefreshReg$(renderHello, 'renderHello');
+
+        // Not updating the wrapper.
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+    }
+  });
+
+  it('can preserve state for simple memo', async () => {
+    if (__DEV__) {
+      const OuterV1 = await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.memo(Hello);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const OuterV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.memo(Hello);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => OuterV1);
+      await render(() => OuterV2);
+      await render(() => OuterV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Finally, a render with incompatible type should reset it.
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        // Note: no wrapper this time.
+        return Hello;
+      });
+
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('blue');
+    }
+  });
+
+  it('can preserve state for memo with custom comparison', async () => {
+    if (__DEV__) {
+      const OuterV1 = await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+
+        const Outer = React.memo(Hello, () => true);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const OuterV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+
+        const Outer = React.memo(Hello, () => true);
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => OuterV1);
+      await render(() => OuterV2);
+      await render(() => OuterV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Finally, a render with incompatible type should reset it.
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        // Note: no wrapper this time.
+        return Hello;
+      });
+
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('blue');
+    }
+  });
+
+  it('can update simple memo function in isolation', async () => {
+    if (__DEV__) {
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        return React.memo(Hello);
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update of just the rendering function.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        // Not updating the wrapper.
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+    }
+  });
+
+  it('can preserve state for memo(forwardRef)', async () => {
+    if (__DEV__) {
+      const OuterV1 = await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.memo(React.forwardRef(() => <Hello />));
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const OuterV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.memo(React.forwardRef(() => <Hello />));
+        $RefreshReg$(Outer, 'Outer');
+        return Outer;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => OuterV1);
+      await render(() => OuterV2);
+      await render(() => OuterV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Finally, a render with incompatible type should reset it.
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        // Note: no wrapper this time.
+        return Hello;
+      });
+
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('blue');
+    }
+  });
+
+  it('can preserve state for lazy after resolution', async () => {
+    if (__DEV__) {
+      let resolve;
+      const AppV1 = await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.lazy(
+          () =>
+            new Promise(_resolve => {
+              resolve = () => _resolve({default: Hello});
+            }),
+        );
+        $RefreshReg$(Outer, 'Outer');
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Outer />
+            </React.Suspense>
+          );
+        }
+        $RefreshReg$(App, 'App');
+
+        return App;
+      });
+
+      expect(container.textContent).toBe('Loading');
+      await act(() => {
+        resolve();
+      });
+      expect(container.textContent).toBe('0');
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const AppV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.lazy(
+          () =>
+            new Promise(_resolve => {
+              resolve = () => _resolve({default: Hello});
+            }),
+        );
+        $RefreshReg$(Outer, 'Outer');
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Outer />
+            </React.Suspense>
+          );
+        }
+        $RefreshReg$(App, 'App');
+
+        return App;
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Bump the state again.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => AppV1);
+      await render(() => AppV2);
+      await render(() => AppV1);
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('2');
+      expect(el.style.color).toBe('red');
+
+      // Finally, a render with incompatible type should reset it.
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        // Note: no lazy wrapper this time.
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Hello />
+            </React.Suspense>
+          );
+        }
+        $RefreshReg$(App, 'App');
+
+        return App;
+      });
+
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('blue');
+    }
+  });
+
+  it('can patch lazy before resolution', async () => {
+    if (__DEV__) {
+      let resolve;
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.lazy(
+          () =>
+            new Promise(_resolve => {
+              resolve = () => _resolve({default: Hello});
+            }),
+        );
+        $RefreshReg$(Outer, 'Outer');
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Outer />
+            </React.Suspense>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.textContent).toBe('Loading');
+
+      // Perform a hot update.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      await act(() => {
+        resolve();
+      });
+
+      // Expect different color on initial mount.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('red');
+
+      // Bump state.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Test another reload.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('orange');
+    }
+  });
+
+  it('can patch lazy(forwardRef) before resolution', async () => {
+    if (__DEV__) {
+      let resolve;
+      await render(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.forwardRef(renderHello);
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.lazy(
+          () =>
+            new Promise(_resolve => {
+              resolve = () => _resolve({default: Hello});
+            }),
+        );
+        $RefreshReg$(Outer, 'Outer');
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Outer />
+            </React.Suspense>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.textContent).toBe('Loading');
+
+      // Perform a hot update.
+      await patch(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.forwardRef(renderHello);
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      await act(() => {
+        resolve();
+      });
+
+      // Expect different color on initial mount.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('red');
+
+      // Bump state.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Test another reload.
+      await patch(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.forwardRef(renderHello);
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('orange');
+    }
+  });
+
+  it('can patch lazy(memo) before resolution', async () => {
+    if (__DEV__) {
+      let resolve;
+      await render(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.memo(renderHello);
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.lazy(
+          () =>
+            new Promise(_resolve => {
+              resolve = () => _resolve({default: Hello});
+            }),
+        );
+        $RefreshReg$(Outer, 'Outer');
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Outer />
+            </React.Suspense>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.textContent).toBe('Loading');
+
+      // Perform a hot update.
+      await patch(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.memo(renderHello);
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      await act(() => {
+        resolve();
+      });
+
+      // Expect different color on initial mount.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('red');
+
+      // Bump state.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Test another reload.
+      await patch(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.memo(renderHello);
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('orange');
+    }
+  });
+
+  it('can patch lazy(memo(forwardRef)) before resolution', async () => {
+    if (__DEV__) {
+      let resolve;
+      await render(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.memo(React.forwardRef(renderHello));
+        $RefreshReg$(Hello, 'Hello');
+
+        const Outer = React.lazy(
+          () =>
+            new Promise(_resolve => {
+              resolve = () => _resolve({default: Hello});
+            }),
+        );
+        $RefreshReg$(Outer, 'Outer');
+
+        function App() {
+          return (
+            <React.Suspense fallback={<p>Loading</p>}>
+              <Outer />
+            </React.Suspense>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.textContent).toBe('Loading');
+
+      // Perform a hot update.
+      await patch(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.memo(React.forwardRef(renderHello));
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      await act(() => {
+        resolve();
+      });
+
+      // Expect different color on initial mount.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('red');
+
+      // Bump state.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('red');
+
+      // Test another reload.
+      await patch(() => {
+        function renderHello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        const Hello = React.memo(React.forwardRef(renderHello));
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('1');
+      expect(el.style.color).toBe('orange');
+    }
+  });
+
+  it('only patches the fallback tree while suspended', async () => {
+    if (__DEV__) {
+      const AppV1 = await render(
+        () => {
+          function Hello({children}) {
+            const [val, setVal] = React.useState(0);
+            return (
+              <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+                {children} {val}
+              </p>
+            );
+          }
+          $RefreshReg$(Hello, 'Hello');
+
+          function Never() {
+            throw new Promise(resolve => {});
+          }
+
+          function App({shouldSuspend}) {
+            return (
+              <React.Suspense fallback={<Hello>Fallback</Hello>}>
+                <Hello>Content</Hello>
+                {shouldSuspend && <Never />}
+              </React.Suspense>
+            );
+          }
+
+          return App;
+        },
+        {shouldSuspend: false},
+      );
+
+      // We start with just the primary tree.
+      expect(container.childNodes.length).toBe(1);
+      const primaryChild = container.firstChild;
+      expect(primaryChild.textContent).toBe('Content 0');
+      expect(primaryChild.style.color).toBe('blue');
+      expect(primaryChild.style.display).toBe('');
+
+      // Bump primary content state.
+      await act(() => {
+        primaryChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.childNodes.length).toBe(1);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('blue');
+      expect(primaryChild.style.display).toBe('');
+
+      // Perform a hot update.
+      await patch(() => {
+        function Hello({children}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'green'}} onClick={() => setVal(val + 1)}>
+              {children} {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.childNodes.length).toBe(1);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('green');
+      expect(primaryChild.style.display).toBe('');
+
+      // Now force the tree to suspend.
+      await render(() => AppV1, {shouldSuspend: true});
+
+      // Expect to see two trees, one of them is hidden.
+      expect(container.childNodes.length).toBe(2);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      const fallbackChild = container.childNodes[1];
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('green');
+      expect(primaryChild.style.display).toBe('none');
+      expect(fallbackChild.textContent).toBe('Fallback 0');
+      expect(fallbackChild.style.color).toBe('green');
+      expect(fallbackChild.style.display).toBe('');
+
+      // Bump fallback state.
+      await act(() => {
+        fallbackChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(container.childNodes.length).toBe(2);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      expect(container.childNodes[1]).toBe(fallbackChild);
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('green');
+      expect(primaryChild.style.display).toBe('none');
+      expect(fallbackChild.textContent).toBe('Fallback 1');
+      expect(fallbackChild.style.color).toBe('green');
+      expect(fallbackChild.style.display).toBe('');
+
+      // Perform a hot update.
+      await patch(() => {
+        function Hello({children}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {children} {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      // Only update color in the visible child
+      expect(container.childNodes.length).toBe(2);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      expect(container.childNodes[1]).toBe(fallbackChild);
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('green');
+      expect(primaryChild.style.display).toBe('none');
+      expect(fallbackChild.textContent).toBe('Fallback 1');
+      expect(fallbackChild.style.color).toBe('red');
+      expect(fallbackChild.style.display).toBe('');
+
+      // Only primary tree should exist now:
+      await render(() => AppV1, {shouldSuspend: false});
+      expect(container.childNodes.length).toBe(1);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('red');
+      expect(primaryChild.style.display).toBe('');
+
+      // Perform a hot update.
+      await patch(() => {
+        function Hello({children}) {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {children} {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.childNodes.length).toBe(1);
+      expect(container.childNodes[0]).toBe(primaryChild);
+      expect(primaryChild.textContent).toBe('Content 1');
+      expect(primaryChild.style.color).toBe('orange');
+      expect(primaryChild.style.display).toBe('');
+    }
+  });
+
+  it('does not re-render ancestor components unnecessarily during a hot update', async () => {
+    if (__DEV__) {
+      let appRenders = 0;
+
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        function App() {
+          appRenders++;
+          return <Hello />;
+        }
+        $RefreshReg$(App, 'App');
+        return App;
+      });
+
+      expect(appRenders).toBe(1);
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // No re-renders from the top.
+      expect(appRenders).toBe(1);
+
+      // Perform a hot update for Hello only.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, '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');
+
+      // Still no re-renders from the top.
+      expect(appRenders).toBe(1);
+
+      // Bump the state.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('2');
+
+      // Still no re-renders from the top.
+      expect(appRenders).toBe(1);
+    }
+  });
+
+  it('batches re-renders during a hot update', async () => {
+    if (__DEV__) {
+      let helloRenders = 0;
+
+      await render(() => {
+        function Hello({children}) {
+          helloRenders++;
+          return <div>X{children}X</div>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        function App() {
+          return (
+            <Hello>
+              <Hello>
+                <Hello />
+              </Hello>
+              <Hello>
+                <Hello />
+              </Hello>
+            </Hello>
+          );
+        }
+        return App;
+      });
+      expect(helloRenders).toBe(5);
+      expect(container.textContent).toBe('XXXXXXXXXX');
+      helloRenders = 0;
+
+      await patch(() => {
+        function Hello({children}) {
+          helloRenders++;
+          return <div>O{children}O</div>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(helloRenders).toBe(5);
+      expect(container.textContent).toBe('OOOOOOOOOO');
+    }
+  });
+
+  it('does not leak state between components', async () => {
+    if (__DEV__) {
+      const AppV1 = await render(
+        () => {
+          function Hello1() {
+            const [val, setVal] = React.useState(0);
+            return (
+              <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+                {val}
+              </p>
+            );
+          }
+          $RefreshReg$(Hello1, 'Hello1');
+          function Hello2() {
+            const [val, setVal] = React.useState(0);
+            return (
+              <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+                {val}
+              </p>
+            );
+          }
+          $RefreshReg$(Hello2, 'Hello2');
+          function App({cond}) {
+            return cond ? <Hello1 /> : <Hello2 />;
+          }
+          $RefreshReg$(App, 'App');
+          return App;
+        },
+        {cond: false},
+      );
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Switch the condition, flipping inner content.
+      // This should reset the state.
+      await render(() => AppV1, {cond: true});
+      const el2 = container.firstChild;
+      expect(el2).not.toBe(el);
+      expect(el2.textContent).toBe('0');
+      expect(el2.style.color).toBe('blue');
+
+      // Bump it again.
+      await act(() => {
+        el2.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el2.textContent).toBe('1');
+
+      // Perform a hot update for both inner components.
+      await patch(() => {
+        function Hello1() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello1, 'Hello1');
+        function Hello2() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello2, 'Hello2');
+      });
+
+      // Assert the state was preserved but color changed.
+      expect(container.firstChild).toBe(el2);
+      expect(el2.textContent).toBe('1');
+      expect(el2.style.color).toBe('red');
+
+      // Flip the condition again.
+      await render(() => AppV1, {cond: false});
+      const el3 = container.firstChild;
+      expect(el3).not.toBe(el2);
+      expect(el3.textContent).toBe('0');
+      expect(el3.style.color).toBe('red');
+    }
+  });
+
+  it('can force remount by changing signature', async () => {
+    if (__DEV__) {
+      const HelloV1 = await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        // When this changes, we'll expect a remount:
+        $RefreshSig$(Hello, '1');
+        return Hello;
+      });
+
+      // Bump the state before patching.
+      const el = container.firstChild;
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('blue');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const HelloV2 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        // The signature hasn't changed since the last time:
+        $RefreshSig$(Hello, '1');
+        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');
+
+      // Perform a hot update.
+      const HelloV3 = await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'yellow'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        // We're changing the signature now so it will remount:
+        $RefreshReg$(Hello, 'Hello');
+        $RefreshSig$(Hello, '2');
+        return Hello;
+      });
+
+      // Expect a remount.
+      expect(container.firstChild).not.toBe(el);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('0');
+      expect(newEl.style.color).toBe('yellow');
+
+      // Bump state again.
+      await act(() => {
+        newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(newEl.textContent).toBe('1');
+      expect(newEl.style.color).toBe('yellow');
+
+      // Perform top-down renders with both fresh and stale types.
+      // Neither should change the state or color.
+      // They should always resolve to the latest version.
+      await render(() => HelloV1);
+      await render(() => HelloV2);
+      await render(() => HelloV3);
+      await render(() => HelloV2);
+      await render(() => HelloV1);
+      expect(container.firstChild).toBe(newEl);
+      expect(newEl.textContent).toBe('1');
+      expect(newEl.style.color).toBe('yellow');
+
+      // Verify we can patch again while preserving the signature.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'purple'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        // Same signature as last time.
+        $RefreshReg$(Hello, 'Hello');
+        $RefreshSig$(Hello, '2');
+        return Hello;
+      });
+
+      expect(container.firstChild).toBe(newEl);
+      expect(newEl.textContent).toBe('1');
+      expect(newEl.style.color).toBe('purple');
+
+      // Check removing the signature also causes a remount.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          return (
+            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+              {val}
+            </p>
+          );
+        }
+        // No signature this time.
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // Expect a remount.
+      expect(container.firstChild).not.toBe(newEl);
+      const finalEl = container.firstChild;
+      expect(finalEl.textContent).toBe('0');
+      expect(finalEl.style.color).toBe('orange');
+    }
+  });
+
+  it('keeps a valid tree when forcing remount', async () => {
+    if (__DEV__) {
+      const HelloV1 = prepare(() => {
+        function Hello() {
+          return null;
+        }
+        $RefreshReg$(Hello, 'Hello');
+        $RefreshSig$(Hello, '1');
+        return Hello;
+      });
+
+      const Bailout = React.memo(({children}) => {
+        return children;
+      });
+
+      // Each of those renders three instances of HelloV1,
+      // but in different ways.
+      const trees = [
+        <div>
+          <HelloV1 />
+          <div>
+            <HelloV1 />
+            <Bailout>
+              <HelloV1 />
+            </Bailout>
+          </div>
+        </div>,
+        <div>
+          <div>
+            <HelloV1>
+              <HelloV1 />
+            </HelloV1>
+            <HelloV1 />
+          </div>
+        </div>,
+        <div>
+          <span />
+          <HelloV1 />
+          <HelloV1 />
+          <HelloV1 />
+        </div>,
+        <div>
+          <HelloV1 />
+          <span />
+          <HelloV1 />
+          <HelloV1 />
+        </div>,
+        <div>
+          <div>foo</div>
+          <HelloV1 />
+          <div>
+            <HelloV1 />
+          </div>
+          <HelloV1 />
+          <span />
+        </div>,
+        <div>
+          <HelloV1>
+            <span />
+            Hello
+            <span />
+          </HelloV1>
+          ,
+          <HelloV1>
+            <>
+              <HelloV1 />
+            </>
+          </HelloV1>
+          ,
+        </div>,
+        <HelloV1>
+          <HelloV1>
+            <Bailout>
+              <span />
+              <HelloV1>
+                <span />
+              </HelloV1>
+              <span />
+            </Bailout>
+          </HelloV1>
+        </HelloV1>,
+        <div>
+          <span />
+          <HelloV1 key="0" />
+          <HelloV1 key="1" />
+          <HelloV1 key="2" />
+          <span />
+        </div>,
+        <div>
+          <span />
+          {null}
+          <HelloV1 key="1" />
+          {null}
+          <HelloV1 />
+          <HelloV1 />
+          <span />
+        </div>,
+        <div>
+          <HelloV1 key="2" />
+          <span />
+          <HelloV1 key="0" />
+          <span />
+          <HelloV1 key="1" />
+        </div>,
+        <div>
+          {[[<HelloV1 key="2" />]]}
+          <span>
+            <HelloV1 key="0" />
+            {[null]}
+            <HelloV1 key="1" />
+          </span>
+        </div>,
+        <div>
+          {['foo', <HelloV1 key="hi" />, null, <HelloV1 key="2" />]}
+          <span>
+            {[null]}
+            <HelloV1 key="x" />
+          </span>
+        </div>,
+        <HelloV1>
+          <HelloV1>
+            <span />
+            <Bailout>
+              <HelloV1>hi</HelloV1>
+              <span />
+            </Bailout>
+          </HelloV1>
+        </HelloV1>,
+      ];
+
+      await act(() => {
+        root.render(null);
+      });
+
+      for (let i = 0; i < trees.length; i++) {
+        await runRemountingStressTest(trees[i]);
+      }
+
+      // Then check that each tree is resilient to updates from another tree.
+      for (let i = 0; i < trees.length; i++) {
+        for (let j = 0; j < trees.length; j++) {
+          await act(() => {
+            root.render(null);
+          });
+
+          // Intentionally don't clean up between the tests:
+          await runRemountingStressTest(trees[i]);
+          await runRemountingStressTest(trees[j]);
+          await runRemountingStressTest(trees[i]);
+        }
+      }
+    }
+  }, 10000);
+
+  async function runRemountingStressTest(tree) {
+    await patch(() => {
+      function Hello({children}) {
+        return <section data-color="blue">{children}</section>;
+      }
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '1');
+      return Hello;
+    });
+
+    await act(() => {
+      root.render(tree);
+    });
+
+    const elements = container.querySelectorAll('section');
+    // Each tree above produces exactly three <section> elements:
+    expect(elements.length).toBe(3);
+    elements.forEach(el => {
+      expect(el.dataset.color).toBe('blue');
+    });
+
+    // Patch color without changing the signature.
+    await patch(() => {
+      function Hello({children}) {
+        return <section data-color="red">{children}</section>;
+      }
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '1');
+      return Hello;
+    });
+
+    const elementsAfterPatch = container.querySelectorAll('section');
+    expect(elementsAfterPatch.length).toBe(3);
+    elementsAfterPatch.forEach((el, index) => {
+      // The signature hasn't changed so we expect DOM nodes to stay the same.
+      expect(el).toBe(elements[index]);
+      // However, the color should have changed:
+      expect(el.dataset.color).toBe('red');
+    });
+
+    // Patch color *and* change the signature.
+    await patch(() => {
+      function Hello({children}) {
+        return <section data-color="orange">{children}</section>;
+      }
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2'); // Remount
+      return Hello;
+    });
+
+    const elementsAfterRemount = container.querySelectorAll('section');
+    expect(elementsAfterRemount.length).toBe(3);
+    elementsAfterRemount.forEach((el, index) => {
+      // The signature changed so we expect DOM nodes to be different.
+      expect(el).not.toBe(elements[index]);
+      // They should all be using the new color:
+      expect(el.dataset.color).toBe('orange');
+    });
+
+    // Now patch color but *don't* change the signature.
+    await patch(() => {
+      function Hello({children}) {
+        return <section data-color="black">{children}</section>;
+      }
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2'); // Same signature as before
+      return Hello;
+    });
+
+    expect(container.querySelectorAll('section').length).toBe(3);
+    container.querySelectorAll('section').forEach((el, index) => {
+      // The signature didn't change so DOM nodes should stay the same.
+      expect(el).toBe(elementsAfterRemount[index]);
+      // They should all be using the new color:
+      expect(el.dataset.color).toBe('black');
+    });
+
+    await act(() => {
+      root.render(tree);
+    });
+
+    expect(container.querySelectorAll('section').length).toBe(3);
+    container.querySelectorAll('section').forEach((el, index) => {
+      expect(el).toBe(elementsAfterRemount[index]);
+      expect(el.dataset.color).toBe('black');
+    });
+  }
+
+  it('can remount on signature change within a <root> wrapper', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => Hello);
+    }
+  });
+
+  it('can remount on signature change within a simple memo wrapper', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => React.memo(Hello));
+    }
+  });
+
+  it('can remount on signature change within a lazy simple memo wrapper', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello =>
+        React.lazy(() => ({
+          then(cb) {
+            cb({default: React.memo(Hello)});
+          },
+        })),
+      );
+    }
+  });
+
+  it('can remount on signature change within forwardRef', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => React.forwardRef(Hello));
+    }
+  });
+
+  it('can remount on signature change within forwardRef render function', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello =>
+        React.forwardRef(() => <Hello />),
+      );
+    }
+  });
+
+  it('can remount on signature change within nested memo', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello =>
+        React.memo(React.memo(React.memo(Hello))),
+      );
+    }
+  });
+
+  it('can remount on signature change within a memo wrapper and custom comparison', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => React.memo(Hello, () => true));
+    }
+  });
+
+  it('can remount on signature change within a class', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const child = <Hello />;
+        return class Wrapper extends React.PureComponent {
+          render() {
+            return child;
+          }
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within a context provider', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const Context = React.createContext();
+        const child = (
+          <Context.Provider value="constant">
+            <Hello />
+          </Context.Provider>
+        );
+        return function Wrapper() {
+          return child;
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within a context consumer', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const Context = React.createContext();
+        const child = <Context.Consumer>{() => <Hello />}</Context.Consumer>;
+        return function Wrapper() {
+          return child;
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within a suspense node', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        // TODO: we'll probably want to test fallback trees too.
+        const child = (
+          <React.Suspense>
+            <Hello />
+          </React.Suspense>
+        );
+        return function Wrapper() {
+          return child;
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within a mode node', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const child = (
+          <React.StrictMode>
+            <Hello />
+          </React.StrictMode>
+        );
+        return function Wrapper() {
+          return child;
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within a fragment node', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const child = (
+          <>
+            <Hello />
+          </>
+        );
+        return function Wrapper() {
+          return child;
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within multiple siblings', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const child = (
+          <>
+            <>
+              <React.Fragment />
+            </>
+            <Hello />
+            <React.Fragment />
+          </>
+        );
+        return function Wrapper() {
+          return child;
+        };
+      });
+    }
+  });
+
+  it('can remount on signature change within a profiler node', async () => {
+    if (__DEV__) {
+      await testRemountingWithWrapper(Hello => {
+        const child = <Hello />;
+        return function Wrapper() {
+          return (
+            <React.Profiler onRender={() => {}} id="foo">
+              {child}
+            </React.Profiler>
+          );
+        };
+      });
+    }
+  });
+
+  async function testRemountingWithWrapper(wrap) {
+    await render(() => {
+      function Hello() {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
+      // When this changes, we'll expect a remount:
+      $RefreshSig$(Hello, '1');
+
+      // Use the passed wrapper.
+      // This will be different in every test.
+      return wrap(Hello);
+    });
+
+    // Bump the state before patching.
+    const el = container.firstChild;
+    expect(el.textContent).toBe('0');
+    expect(el.style.color).toBe('blue');
+    await act(() => {
+      el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    });
+    expect(el.textContent).toBe('1');
+
+    // Perform a hot update that doesn't remount.
+    await patch(() => {
+      function Hello() {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
+      // The signature hasn't changed since the last time:
+      $RefreshSig$(Hello, '1');
+      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');
+
+    // Perform a hot update that remounts.
+    await patch(() => {
+      function Hello() {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'yellow'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      // We're changing the signature now so it will remount:
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2');
+      return Hello;
+    });
+
+    // Expect a remount.
+    expect(container.firstChild).not.toBe(el);
+    const newEl = container.firstChild;
+    expect(newEl.textContent).toBe('0');
+    expect(newEl.style.color).toBe('yellow');
+
+    // Bump state again.
+    await act(() => {
+      newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    });
+    expect(newEl.textContent).toBe('1');
+    expect(newEl.style.color).toBe('yellow');
+
+    // Verify we can patch again while preserving the signature.
+    await patch(() => {
+      function Hello() {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'purple'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      // Same signature as last time.
+      $RefreshReg$(Hello, 'Hello');
+      $RefreshSig$(Hello, '2');
+      return Hello;
+    });
+
+    expect(container.firstChild).toBe(newEl);
+    expect(newEl.textContent).toBe('1');
+    expect(newEl.style.color).toBe('purple');
+
+    // Check removing the signature also causes a remount.
+    await patch(() => {
+      function Hello() {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      // No signature this time.
+      $RefreshReg$(Hello, 'Hello');
+      return Hello;
+    });
+
+    // Expect a remount.
+    expect(container.firstChild).not.toBe(newEl);
+    const finalEl = container.firstChild;
+    expect(finalEl.textContent).toBe('0');
+    expect(finalEl.style.color).toBe('orange');
+  }
+
+  it('resets hooks with dependencies on hot reload', async () => {
+    if (__DEV__) {
+      let useEffectWithEmptyArrayCalls = 0;
+
+      await render(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          const tranformed = React.useMemo(() => val * 2, [val]);
+          const handleClick = React.useCallback(() => setVal(v => v + 1), []);
+
+          React.useEffect(() => {
+            useEffectWithEmptyArrayCalls++;
+          }, []);
+
+          return (
+            <p style={{color: 'blue'}} onClick={handleClick}>
+              {tranformed}
+            </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');
+      expect(useEffectWithEmptyArrayCalls).toBe(1); // useEffect ran
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('2'); // val * 2
+      expect(useEffectWithEmptyArrayCalls).toBe(1); // useEffect didn't re-run
+
+      // Perform a hot update.
+      await patch(() => {
+        function Hello() {
+          const [val, setVal] = React.useState(0);
+          const tranformed = React.useMemo(() => val * 10, [val]);
+          const handleClick = React.useCallback(() => setVal(v => v - 1), []);
+
+          React.useEffect(() => {
+            useEffectWithEmptyArrayCalls++;
+          }, []);
+
+          return (
+            <p style={{color: 'red'}} onClick={handleClick}>
+              {tranformed}
+            </p>
+          );
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      // Assert the state was preserved but memo was evicted.
+      expect(container.firstChild).toBe(el);
+      expect(el.textContent).toBe('10'); // val * 10
+      expect(el.style.color).toBe('red');
+      expect(useEffectWithEmptyArrayCalls).toBe(2); // useEffect re-ran
+
+      // This should fire the new callback which decreases the counter.
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('0');
+      expect(el.style.color).toBe('red');
+      expect(useEffectWithEmptyArrayCalls).toBe(2); // useEffect didn't re-run
+    }
+  });
+
+  // This pattern is inspired by useSubscription and similar mechanisms.
+  it('does not get into infinite loops during render phase updates', async () => {
+    if (__DEV__) {
+      await 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.
+      await 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');
+    }
+  });
+
+  // @gate enableLegacyHidden && __DEV__
+  it('can hot reload offscreen components', async () => {
+    const AppV1 = prepare(() => {
+      function Hello() {
+        React.useLayoutEffect(() => {
+          Scheduler.log('Hello#layout');
+        });
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
+
+      return function App({offscreen}) {
+        React.useLayoutEffect(() => {
+          Scheduler.log('App#layout');
+        });
+        return (
+          <LegacyHiddenDiv mode={offscreen ? 'hidden' : 'visible'}>
+            <Hello />
+          </LegacyHiddenDiv>
+        );
+      };
+    });
+
+    root.render(<AppV1 offscreen={true} />);
+    await waitFor(['App#layout']);
+    const el = container.firstChild;
+    expect(el.hidden).toBe(true);
+    expect(el.firstChild).toBe(null); // Offscreen content not flushed yet.
+
+    // Perform a hot update.
+    patchSync(() => {
+      function Hello() {
+        React.useLayoutEffect(() => {
+          Scheduler.log('Hello#layout');
+        });
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
+    });
+
+    // It's still offscreen so we don't see anything.
+    expect(container.firstChild).toBe(el);
+    expect(el.hidden).toBe(true);
+    expect(el.firstChild).toBe(null);
+
+    // Process the offscreen updates.
+    await waitFor(['Hello#layout']);
+    expect(container.firstChild).toBe(el);
+    expect(el.firstChild.textContent).toBe('0');
+    expect(el.firstChild.style.color).toBe('red');
+
+    await act(() => {
+      el.firstChild.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+    });
+
+    assertLog(['Hello#layout']);
+    expect(el.firstChild.textContent).toBe('1');
+    expect(el.firstChild.style.color).toBe('red');
+
+    // Hot reload while we're offscreen.
+    patchSync(() => {
+      function Hello() {
+        React.useLayoutEffect(() => {
+          Scheduler.log('Hello#layout');
+        });
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
+    });
+
+    // It's still offscreen so we don't see the updates.
+    expect(container.firstChild).toBe(el);
+    expect(el.firstChild.textContent).toBe('1');
+    expect(el.firstChild.style.color).toBe('red');
+
+    // Process the offscreen updates.
+    await waitFor(['Hello#layout']);
+    expect(container.firstChild).toBe(el);
+    expect(el.firstChild.textContent).toBe('1');
+    expect(el.firstChild.style.color).toBe('orange');
+  });
+
+  it('remounts failed error boundaries (componentDidCatch)', async () => {
+    if (__DEV__) {
+      await render(() => {
+        function Hello() {
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        class Boundary extends React.Component {
+          state = {error: null};
+          componentDidCatch(error) {
+            this.setState({error});
+          }
+          render() {
+            if (this.state.error) {
+              return <h1>Oops: {this.state.error.message}</h1>;
+            }
+            return this.props.children;
+          }
+        }
+
+        function App() {
+          return (
+            <>
+              <p>A</p>
+              <Boundary>
+                <Hello />
+              </Boundary>
+              <p>B</p>
+            </>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.innerHTML).toBe('<p>A</p><h1>Hi</h1><p>B</p>');
+      const firstP = container.firstChild;
+      const secondP = firstP.nextSibling.nextSibling;
+
+      // Perform a hot update that fails.
+      await patch(() => {
+        function Hello() {
+          throw new Error('No');
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      expect(container.innerHTML).toBe('<p>A</p><h1>Oops: No</h1><p>B</p>');
+      expect(container.firstChild).toBe(firstP);
+      expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
+
+      // Perform a hot update that fixes the error.
+      await patch(() => {
+        function Hello() {
+          return <h1>Fixed!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      // This should remount the error boundary (but not anything above it).
+      expect(container.innerHTML).toBe('<p>A</p><h1>Fixed!</h1><p>B</p>');
+      expect(container.firstChild).toBe(firstP);
+      expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
+
+      // Verify next hot reload doesn't remount anything.
+      const helloNode = container.firstChild.nextSibling;
+      await patch(() => {
+        function Hello() {
+          return <h1>Nice.</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild.nextSibling).toBe(helloNode);
+      expect(helloNode.textContent).toBe('Nice.');
+    }
+  });
+
+  it('remounts failed error boundaries (getDerivedStateFromError)', async () => {
+    if (__DEV__) {
+      await render(() => {
+        function Hello() {
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        class Boundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return <h1>Oops: {this.state.error.message}</h1>;
+            }
+            return this.props.children;
+          }
+        }
+
+        function App() {
+          return (
+            <>
+              <p>A</p>
+              <Boundary>
+                <Hello />
+              </Boundary>
+              <p>B</p>
+            </>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.innerHTML).toBe('<p>A</p><h1>Hi</h1><p>B</p>');
+      const firstP = container.firstChild;
+      const secondP = firstP.nextSibling.nextSibling;
+
+      // Perform a hot update that fails.
+      await patch(() => {
+        function Hello() {
+          throw new Error('No');
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      expect(container.innerHTML).toBe('<p>A</p><h1>Oops: No</h1><p>B</p>');
+      expect(container.firstChild).toBe(firstP);
+      expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
+
+      // Perform a hot update that fixes the error.
+      await patch(() => {
+        function Hello() {
+          return <h1>Fixed!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      // This should remount the error boundary (but not anything above it).
+      expect(container.innerHTML).toBe('<p>A</p><h1>Fixed!</h1><p>B</p>');
+      expect(container.firstChild).toBe(firstP);
+      expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
+
+      // Verify next hot reload doesn't remount anything.
+      const helloNode = container.firstChild.nextSibling;
+      await patch(() => {
+        function Hello() {
+          return <h1>Nice.</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild.nextSibling).toBe(helloNode);
+      expect(helloNode.textContent).toBe('Nice.');
+    }
+  });
+
+  it('remounts error boundaries that failed asynchronously after hot update', async () => {
+    if (__DEV__) {
+      await render(() => {
+        function Hello() {
+          const [x] = React.useState('');
+          React.useEffect(() => {}, []);
+          x.slice(); // Doesn't throw initially.
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        class Boundary extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            return {error};
+          }
+          render() {
+            if (this.state.error) {
+              return <h1>Oops: {this.state.error.message}</h1>;
+            }
+            return this.props.children;
+          }
+        }
+
+        function App() {
+          return (
+            <>
+              <p>A</p>
+              <Boundary>
+                <Hello />
+              </Boundary>
+              <p>B</p>
+            </>
+          );
+        }
+
+        return App;
+      });
+
+      expect(container.innerHTML).toBe('<p>A</p><h1>Hi</h1><p>B</p>');
+      const firstP = container.firstChild;
+      const secondP = firstP.nextSibling.nextSibling;
+
+      // Perform a hot update that fails.
+      let crash;
+      await patch(() => {
+        function Hello() {
+          const [x, setX] = React.useState('');
+          React.useEffect(() => {
+            crash = () => {
+              setX(42); // This will crash next render.
+            };
+          }, []);
+          x.slice();
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+
+      expect(container.innerHTML).toBe('<p>A</p><h1>Hi</h1><p>B</p>');
+      // Run timeout inside effect:
+      await act(() => {
+        crash();
+      });
+      expect(container.innerHTML).toBe(
+        '<p>A</p><h1>Oops: x.slice is not a function</h1><p>B</p>',
+      );
+      expect(container.firstChild).toBe(firstP);
+      expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
+
+      // Perform a hot update that fixes the error.
+      await 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).
+      expect(container.innerHTML).toBe('<p>A</p><h1>Fixed!</h1><p>B</p>');
+      expect(container.firstChild).toBe(firstP);
+      expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);
+
+      // Verify next hot reload doesn't remount anything.
+      const helloNode = container.firstChild.nextSibling;
+      await 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', async () => {
+    if (__DEV__) {
+      await expect(
+        render(() => {
+          function Hello() {
+            throw new Error('No');
+          }
+          $RefreshReg$(Hello, 'Hello');
+
+          return Hello;
+        }),
+      ).rejects.toThrow('No');
+      expect(container.innerHTML).toBe('');
+
+      // A bad retry
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('Not yet');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('Not yet');
+      expect(container.innerHTML).toBe('');
+
+      // Perform a hot update that fixes the error.
+      await 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.
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('No 2');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('No 2');
+      expect(container.innerHTML).toBe('');
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('Not yet 2');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('Not yet 2');
+      expect(container.innerHTML).toBe('');
+      await 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.
+      await act(() => {
+        root.unmount();
+      });
+      await patch(() => {
+        function Hello() {
+          throw new Error('Ignored');
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+      await patch(() => {
+        function Hello() {
+          return <h1>Ignored</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+    }
+  });
+
+  it('does not retry an intentionally unmounted failed root', async () => {
+    if (__DEV__) {
+      await expect(
+        render(() => {
+          function Hello() {
+            throw new Error('No');
+          }
+          $RefreshReg$(Hello, 'Hello');
+
+          return Hello;
+        }),
+      ).rejects.toThrow('No');
+      expect(container.innerHTML).toBe('');
+
+      // Intentional unmount.
+      await act(() => {
+        root.unmount();
+      });
+
+      // Perform a hot update that fixes the error.
+      await 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', async () => {
+    if (__DEV__) {
+      await 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.
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('No');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('No');
+      expect(container.innerHTML).toBe('');
+
+      // A bad retry
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('Not yet');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('Not yet');
+      expect(container.innerHTML).toBe('');
+
+      // Perform a hot update that fixes the error.
+      await 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.
+      const helloNode = container.firstChild;
+      await patch(() => {
+        function Hello() {
+          return <h1>Nice.</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.firstChild).toBe(helloNode);
+      expect(helloNode.textContent).toBe('Nice.');
+
+      // Break again.
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('Oops');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('Oops');
+      expect(container.innerHTML).toBe('');
+
+      // Perform a hot update that fixes the error.
+      await 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.
+      await act(() => {
+        root.unmount();
+      });
+      expect(container.innerHTML).toBe('');
+      await patch(() => {
+        function Hello() {
+          return <h1>Never mind me!</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(container.innerHTML).toBe('');
+
+      // Mount a new container.
+      root = ReactDOMClient.createRoot(container);
+      await render(() => {
+        function Hello() {
+          return <h1>Hi</h1>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+
+        return Hello;
+      });
+      expect(container.innerHTML).toBe('<h1>Hi</h1>');
+
+      // Break again.
+      await expect(async () => {
+        await patch(() => {
+          function Hello() {
+            throw new Error('Oops');
+          }
+          $RefreshReg$(Hello, 'Hello');
+        });
+      }).rejects.toThrow('Oops');
+      expect(container.innerHTML).toBe('');
+
+      // Check we don't attempt to reverse an intentional unmount, even after an error.
+      await act(() => {
+        root.unmount();
+      });
+      expect(container.innerHTML).toBe('');
+      await 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', async () => {
+    if (__DEV__) {
+      const containerA = document.createElement('div');
+      const containerB = document.createElement('div');
+      const rootA = ReactDOMClient.createRoot(containerA);
+      const rootB = ReactDOMClient.createRoot(containerB);
+
+      // Initially, nothing interesting.
+      const RootAV1 = () => {
+        return 'A1';
+      };
+      $RefreshReg$(RootAV1, 'RootA');
+      const RootBV1 = () => {
+        return 'B1';
+      };
+      $RefreshReg$(RootBV1, 'RootB');
+
+      await act(() => {
+        rootA.render(<RootAV1 />);
+        rootB.render(<RootBV1 />);
+      });
+      expect(containerA.innerHTML).toBe('A1');
+      expect(containerB.innerHTML).toBe('B1');
+
+      // Then make the first root fail.
+      const RootAV2 = () => {
+        throw new Error('A2!');
+      };
+      $RefreshReg$(RootAV2, 'RootA');
+      await expect(
+        act(() => {
+          ReactFreshRuntime.performReactRefresh();
+        }),
+      ).rejects.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.
+      const RootAV3 = () => {
+        React.useLayoutEffect(() => {
+          throw new Error('A3!');
+        }, []);
+        return 'A3';
+      };
+      $RefreshReg$(RootAV3, 'RootA');
+      await expect(
+        act(() => {
+          ReactFreshRuntime.performReactRefresh();
+        }),
+      ).rejects.toThrow('A3!');
+      expect(containerA.innerHTML).toBe('');
+      expect(containerB.innerHTML).toBe('B1');
+
+      const RootAV4 = () => {
+        return 'A4';
+      };
+      $RefreshReg$(RootAV4, 'RootA');
+      await act(() => {
+        ReactFreshRuntime.performReactRefresh();
+      });
+      expect(containerA.innerHTML).toBe('A4');
+      expect(containerB.innerHTML).toBe('B1');
+    }
+  });
+
+  it('remounts classes on every edit', async () => {
+    if (__DEV__) {
+      const HelloV1 = await 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');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      const HelloV2 = await 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');
+      await act(() => {
+        newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(newEl.textContent).toBe('1');
+
+      // Now top-level renders of both types resolve to latest.
+      await render(() => HelloV1);
+      await render(() => HelloV2);
+      expect(container.firstChild).toBe(newEl);
+      expect(newEl.style.color).toBe('red');
+      expect(newEl.textContent).toBe('1');
+
+      const HelloV3 = await 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');
+      await act(() => {
+        finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(finalEl.textContent).toBe('1');
+
+      await render(() => HelloV3);
+      await render(() => HelloV2);
+      await render(() => HelloV1);
+      expect(container.firstChild).toBe(finalEl);
+      expect(finalEl.style.color).toBe('orange');
+      expect(finalEl.textContent).toBe('1');
+    }
+  });
+
+  it('updates refs when remounting', async () => {
+    if (__DEV__) {
+      const testRef = React.createRef();
+      await 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');
+
+      await patch(() => {
+        class Hello extends React.Component {
+          getColor() {
+            return 'orange';
+          }
+          render() {
+            return <p />;
+          }
+        }
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('orange');
+
+      await patch(() => {
+        const Hello = React.forwardRef((props, ref) => {
+          React.useImperativeHandle(ref, () => ({
+            getColor() {
+              return 'pink';
+            },
+          }));
+          return <p />;
+        });
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('pink');
+
+      await patch(() => {
+        const Hello = React.forwardRef((props, ref) => {
+          React.useImperativeHandle(ref, () => ({
+            getColor() {
+              return 'yellow';
+            },
+          }));
+          return <p />;
+        });
+        $RefreshReg$(Hello, 'Hello');
+      });
+      expect(testRef.current.getColor()).toBe('yellow');
+
+      await 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', async () => {
+    if (__DEV__) {
+      const HelloV1 = await 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');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update that turns it into a class.
+      const HelloV2 = await 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');
+      await act(() => {
+        newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(newEl.textContent).toBe('1');
+
+      // Now top-level renders of both types resolve to latest.
+      await render(() => HelloV1);
+      await 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.
+      const HelloV3 = await 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');
+      await act(() => {
+        finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(finalEl.textContent).toBe('1');
+
+      await render(() => HelloV3);
+      await render(() => HelloV2);
+      await 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.
+      await 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 update multiple roots independently', async () => {
+    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');
+      await act(() => {
+        ReactFreshRuntime.performReactRefresh();
+      });
+
+      // Mount three roots.
+      const cont1 = document.createElement('div');
+      const cont2 = document.createElement('div');
+      const cont3 = document.createElement('div');
+      document.body.appendChild(cont1);
+      document.body.appendChild(cont2);
+      document.body.appendChild(cont3);
+      const root1 = ReactDOMClient.createRoot(cont1);
+      const root2 = ReactDOMClient.createRoot(cont2);
+      const root3 = ReactDOMClient.createRoot(cont3);
+      try {
+        await act(() => {
+          root1.render(<HelloV1 id={1} />);
+        });
+        await act(() => {
+          root2.render(<HelloV2 id={2} />);
+        });
+        await act(() => {
+          root3.render(<HelloV1 id={3} />);
+        });
+
+        // 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.
+        await 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');
+        await act(() => {
+          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.
+        await act(() => {
+          root2.unmount();
+        });
+        // 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');
+        await expect(
+          act(() => {
+            ReactFreshRuntime.performReactRefresh();
+          }),
+        ).rejects.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);
+      const rogueProxy = new Proxy(
+        {},
+        {
+          get(target, property) {
+            throw new Error();
+          },
+        },
+      );
+      expect(ReactFreshRuntime.isLikelyComponentType(rogueProxy)).toBe(false);
+
+      // These seem like function components.
+      const Button = () => {};
+      expect(ReactFreshRuntime.isLikelyComponentType(Button)).toBe(true);
+      expect(ReactFreshRuntime.isLikelyComponentType(Widget)).toBe(true);
+      const ProxyButton = new Proxy(Button, {
+        get(target, property) {
+          return target[property];
+        },
+      });
+      expect(ReactFreshRuntime.isLikelyComponentType(ProxyButton)).toBe(true);
+      const 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 {}
+      const ProxyBtn = new Proxy(Btn, {
+        get(target, property) {
+          return target[property];
+        },
+      });
+      expect(ReactFreshRuntime.isLikelyComponentType(Btn)).toBe(true);
+      expect(ReactFreshRuntime.isLikelyComponentType(PureBtn)).toBe(true);
+      expect(ReactFreshRuntime.isLikelyComponentType(ProxyBtn)).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.
+    }
+  });
+
+  function initFauxDevToolsHook() {
+    const onCommitFiberRoot = jest.fn();
+    const onCommitFiberUnmount = jest.fn();
+
+    let idCounter = 0;
+    const renderers = new Map();
+
+    // This is a minimal shim for the global hook installed by DevTools.
+    // The real one is in packages/react-devtools-shared/src/hook.js.
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      renderers,
+      supportsFiber: true,
+      inject(renderer) {
+        const id = ++idCounter;
+        renderers.set(id, renderer);
+        return id;
+      },
+      onCommitFiberRoot,
+      onCommitFiberUnmount,
+    };
+  }
+
+  // This simulates the scenario in https://github.com/facebook/react/issues/17626
+  it('can inject the runtime after the renderer executes', async () => {
+    if (__DEV__) {
+      initFauxDevToolsHook();
+
+      // Load these first, as if they're coming from a CDN.
+      jest.resetModules();
+      React = require('react');
+      ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler');
+      act = require('internal-test-utils').act;
+
+      // Important! Inject into the global hook *after* ReactDOM runs:
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+
+      root = ReactDOMClient.createRoot(container);
+
+      // 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.
+
+      await 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');
+      await act(() => {
+        el.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      });
+      expect(el.textContent).toBe('1');
+
+      // Perform a hot update.
+      await 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');
+    }
+  });
+
+  // This simulates the scenario in https://github.com/facebook/react/issues/20100
+  it('does not block DevTools when an unsupported legacy renderer is injected', () => {
+    if (__DEV__) {
+      initFauxDevToolsHook();
+
+      const onCommitFiberRoot =
+        global.__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot;
+
+      // Redirect all React/ReactDOM requires to v16.8.0
+      // This version predates Fast Refresh support.
+      jest.mock('scheduler', () => jest.requireActual('scheduler-0-13'));
+      jest.mock('scheduler/tracing', () =>
+        jest.requireActual('scheduler-0-13/tracing'),
+      );
+      jest.mock('react', () => jest.requireActual('react-16-8'));
+      jest.mock('react-dom', () => jest.requireActual('react-dom-16-8'));
+
+      // Load React and company.
+      jest.resetModules();
+      React = require('react');
+      ReactDOM = require('react-dom');
+      Scheduler = require('scheduler');
+
+      // Important! Inject into the global hook *after* ReactDOM runs:
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+
+      // NOTE: Intentionally using createElement in this test instead of JSX
+      // because old versions of React are incompatible with the JSX transform
+      // used by our test suite.
+      const Hello = () => {
+        const [state] = React.useState('Hi!');
+        // Intentionally
+        return React.createElement('div', null, state);
+      };
+      $RefreshReg$(Hello, 'Hello');
+      const Component = Hello;
+      ReactDOM.render(React.createElement(Component), container);
+
+      expect(onCommitFiberRoot).toHaveBeenCalled();
+    }
+  });
+});
diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
new file mode 100644
index 00000000000..1f397de0a24
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -0,0 +1,564 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 babel = require('@babel/core');
+const {wrap} = require('jest-snapshot-serializer-raw');
+const freshPlugin = require('react-refresh/babel');
+
+function transform(input, options = {}) {
+  return wrap(
+    babel.transform(input, {
+      babelrc: false,
+      configFile: false,
+      envName: options.envName,
+      plugins: [
+        '@babel/syntax-jsx',
+        '@babel/syntax-dynamic-import',
+        [
+          freshPlugin,
+          {
+            skipEnvCheck:
+              options.skipEnvCheck === undefined ? true : options.skipEnvCheck,
+            // To simplify debugging tests:
+            emitFullSignatures: true,
+            ...options.freshOptions,
+          },
+        ],
+        ...(options.plugins || []),
+      ],
+    }).code,
+  );
+}
+
+describe('ReactFreshBabelPlugin', () => {
+  it('registers top-level function declarations', () => {
+    // Hello and Bar should be registered, handleClick shouldn't.
+    expect(
+      transform(`
+        function Hello() {
+          function handleClick() {}
+          return <h1 onClick={handleClick}>Hi</h1>;
+        }
+
+        function Bar() {
+          return <Hello />;
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers top-level exported function declarations', () => {
+    expect(
+      transform(`
+        export function Hello() {
+          function handleClick() {}
+          return <h1 onClick={handleClick}>Hi</h1>;
+        }
+
+        export default function Bar() {
+          return <Hello />;
+        }
+
+        function Baz() {
+          return <h1>OK</h1>;
+        }
+
+        const NotAComp = 'hi';
+        export { Baz, NotAComp };
+
+        export function sum() {}
+        export const Bad = 42;
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers top-level exported named arrow functions', () => {
+    expect(
+      transform(`
+        export const Hello = () => {
+          function handleClick() {}
+          return <h1 onClick={handleClick}>Hi</h1>;
+        };
+
+        export let Bar = (props) => <Hello />;
+
+        export default () => {
+          // This one should be ignored.
+          // You should name your components.
+          return <Hello />;
+        };
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('uses original function declaration if it get reassigned', () => {
+    // This should register the original version.
+    // TODO: in the future, we may *also* register the wrapped one.
+    expect(
+      transform(`
+        function Hello() {
+          return <h1>Hi</h1>;
+        }
+        Hello = connect(Hello);
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('only registers pascal case functions', () => {
+    // Should not get registered.
+    expect(
+      transform(`
+        function hello() {
+          return 2 * 2;
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers top-level variable declarations with function expressions', () => {
+    // Hello and Bar should be registered; handleClick, sum, Baz, and Qux shouldn't.
+    expect(
+      transform(`
+        let Hello = function() {
+          function handleClick() {}
+          return <h1 onClick={handleClick}>Hi</h1>;
+        };
+        const Bar = function Baz() {
+          return <Hello />;
+        };
+        function sum() {}
+        let Baz = 10;
+        var Qux;
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers top-level variable declarations with arrow functions', () => {
+    // Hello, Bar, and Baz should be registered; handleClick and sum shouldn't.
+    expect(
+      transform(`
+        let Hello = () => {
+          const handleClick = () => {};
+          return <h1 onClick={handleClick}>Hi</h1>;
+        }
+        const Bar = () => {
+          return <Hello />;
+        };
+        var Baz = () => <div />;
+        var sum = () => {};
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('ignores HOC definitions', () => {
+    // TODO: we might want to handle HOCs at usage site, however.
+    // TODO: it would be nice if we could always avoid registering
+    // a function that is known to return a function or other non-node.
+    expect(
+      transform(`
+        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>;
+          }
+        };
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('ignores complex definitions', () => {
+    expect(
+      transform(`
+        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>;
+        });
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('ignores unnamed function declarations', () => {
+    expect(
+      transform(`
+        export default function() {}
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers likely HOCs with inline functions', () => {
+    expect(
+      transform(`
+        const A = forwardRef(function() {
+          return <h1>Foo</h1>;
+        });
+        const B = memo(React.forwardRef(() => {
+          return <h1>Foo</h1>;
+        }));
+        export default React.memo(forwardRef((props, ref) => {
+          return <h1>Foo</h1>;
+        }));
+    `),
+    ).toMatchSnapshot();
+    expect(
+      transform(`
+        export default React.memo(forwardRef(function (props, ref) {
+          return <h1>Foo</h1>;
+        }));
+    `),
+    ).toMatchSnapshot();
+    expect(
+      transform(`
+        export default React.memo(forwardRef(function Named(props, ref) {
+          return <h1>Foo</h1>;
+        }));
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('ignores higher-order functions that are not HOCs', () => {
+    expect(
+      transform(`
+        const throttledAlert = throttle(function() {
+          alert('Hi');
+        });
+        const TooComplex = (function() { return hello })(() => {});
+        if (cond) {
+          const Foo = thing(() => {});
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers identifiers used in JSX at definition site', () => {
+    // When in doubt, register variables that were used in JSX.
+    // Foo, Header, and B get registered.
+    // A doesn't get registered because it's not declared locally.
+    // Alias doesn't get registered because its definition is just an identifier.
+    expect(
+      transform(`
+        import A from './A';
+        import Store from './Store';
+
+        Store.subscribe();
+
+        const Header = styled.div\`color: red\`
+        const StyledFactory1 = styled('div')\`color: hotpink\`
+        const StyledFactory2 = styled('div')({ color: 'hotpink' })
+        const StyledFactory3 = styled(A)({ color: 'hotpink' })
+        const FunnyFactory = funny.factory\`\`;
+
+        let Alias1 = A;
+        let Alias2 = A.Foo;
+        const Dict = {};
+
+        function Foo() {
+          return (
+            <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>
+          );
+        }
+
+        const B = hoc(A);
+        // This is currently registered as a false positive:
+        const NotAComponent = wow(A);
+        // We could avoid it but it also doesn't hurt.
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers identifiers used in React.createElement at definition site', () => {
+    // When in doubt, register variables that were used in JSX.
+    // Foo, Header, and B get registered.
+    // A doesn't get registered because it's not declared locally.
+    // Alias doesn't get registered because its definition is just an identifier.
+    expect(
+      transform(`
+        import A from './A';
+        import Store from './Store';
+
+        Store.subscribe();
+
+        const Header = styled.div\`color: red\`
+        const StyledFactory1 = styled('div')\`color: hotpink\`
+        const StyledFactory2 = styled('div')({ color: 'hotpink' })
+        const StyledFactory3 = styled(A)({ color: 'hotpink' })
+        const FunnyFactory = funny.factory\`\`;
+
+        let Alias1 = A;
+        let Alias2 = A.Foo;
+        const Dict = {};
+
+        function Foo() {
+          return [
+            React.createElement(A),
+            React.createElement(B),
+            React.createElement(StyledFactory1),
+            React.createElement(StyledFactory2),
+            React.createElement(StyledFactory3),
+            React.createElement(Alias1),
+            React.createElement(Alias2),
+            jsx(Header),
+            React.createElement(Dict.X),
+          ];
+        }
+
+        React.createContext(Store);
+
+        const B = hoc(A);
+        // This is currently registered as a false positive:
+        const NotAComponent = wow(A);
+        // We could avoid it but it also doesn't hurt.
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('registers capitalized identifiers in HOC calls', () => {
+    expect(
+      transform(`
+        function Foo() {
+          return <h1>Hi</h1>;
+        }
+
+        export default hoc(Foo);
+        export const A = hoc(Foo);
+        const B = hoc(Foo);
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('generates signatures for function declarations calling hooks', () => {
+    expect(
+      transform(`
+        export default function App() {
+          const [foo, setFoo] = useState(0);
+          React.useEffect(() => {});
+          return <h1>{foo}</h1>;
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('generates signatures for function expressions calling hooks', () => {
+    // Unlike __register__, we want to sign all functions -- not just top level.
+    // This lets us support editing HOCs better.
+    // For function declarations, __signature__ is called on next line.
+    // For function expressions, it wraps the expression.
+    // In order for this to work, __signature__ returns its first argument.
+    expect(
+      transform(`
+        export const A = React.memo(React.forwardRef((props, ref) => {
+          const [foo, setFoo] = useState(0);
+          React.useEffect(() => {});
+          return <h1 ref={ref}>{foo}</h1>;
+        }));
+
+        export const B = React.memo(React.forwardRef(function(props, ref) {
+          const [foo, setFoo] = useState(0);
+          React.useEffect(() => {});
+          return <h1 ref={ref}>{foo}</h1>;
+        }));
+
+        function hoc() {
+          return function Inner() {
+            const [foo, setFoo] = useState(0);
+            React.useEffect(() => {});
+            return <h1 ref={ref}>{foo}</h1>;
+          };
+        }
+
+        export let C = hoc();
+    `),
+    ).toMatchSnapshot();
+  });
+
+  it('includes custom hooks into the signatures', () => {
+    expect(
+      transform(`
+        function useFancyState() {
+          const [foo, setFoo] = React.useState(0);
+          useFancyEffect();
+          return foo;
+        }
+
+        const useFancyEffect = () => {
+          React.useEffect(() => {});
+        };
+
+        export default function App() {
+          const bar = useFancyState();
+          return <h1>{bar}</h1>;
+        }
+    `),
+    ).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: ['@babel/transform-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();
+  });
+
+  it("respects Babel's envName option", () => {
+    const envName = 'random';
+    expect(() =>
+      transform(`export default function BabelEnv () { return null };`, {
+        envName,
+        skipEnvCheck: false,
+      }),
+    ).toThrowError(
+      'React Refresh Babel transform should only be enabled in development environment. ' +
+        'Instead, the environment is: "' +
+        envName +
+        '". If you want to override this check, pass {skipEnvCheck: true} as plugin options.',
+    );
+  });
+
+  it('does not get tripped by IIFEs', () => {
+    expect(
+      transform(`
+        while (item) {
+          (item => {
+            useFoo();
+          })(item);
+        }
+      `),
+    ).toMatchSnapshot();
+  });
+
+  it('supports typescript namespace syntax', () => {
+    expect(
+      transform(
+        `
+        namespace Foo {
+          export namespace Bar {
+            export const A = () => {};
+
+            function B() {};
+            export const B1 = B;
+          }
+
+          export const C = () => {};
+          export function D() {};
+
+          namespace NotExported {
+            export const E = () => {};
+          }
+        }
+      `,
+        {plugins: [['@babel/plugin-syntax-typescript', {isTSX: true}]]},
+      ),
+    ).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 00000000000..d6e1bef955c
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -0,0 +1,2280 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactFreshRuntime;
+let Scheduler;
+let act;
+let assertLog;
+
+const babel = require('@babel/core');
+const freshPlugin = require('react-refresh/babel');
+const ts = require('typescript');
+
+describe('ReactFreshIntegration', () => {
+  let container;
+  let root;
+  let exportsObj;
+
+  beforeEach(() => {
+    if (__DEV__) {
+      jest.resetModules();
+      React = require('react');
+      ReactFreshRuntime = require('react-refresh/runtime');
+      ReactFreshRuntime.injectIntoGlobalHook(global);
+      ReactDOMClient = require('react-dom/client');
+      Scheduler = require('scheduler/unstable_mock');
+      ({act, assertLog} = require('internal-test-utils'));
+      container = document.createElement('div');
+      document.body.appendChild(container);
+      root = ReactDOMClient.createRoot(container);
+      exportsObj = undefined;
+    }
+  });
+
+  afterEach(() => {
+    if (__DEV__) {
+      root.unmount();
+      // Ensure we don't leak memory by holding onto dead roots.
+      expect(ReactFreshRuntime._getMountedRootCount()).toBe(0);
+      document.body.removeChild(container);
+    }
+  });
+
+  function executeJavaScript(source, compileDestructuring) {
+    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;
+    return executeCompiled(compiled);
+  }
+
+  function executeTypescript(source) {
+    const typescriptSource = babel.transform(source, {
+      babelrc: false,
+      configFile: false,
+      presets: ['@babel/react'],
+      plugins: [
+        [freshPlugin, {skipEnvCheck: true}],
+        ['@babel/plugin-syntax-typescript', {isTSX: true}],
+      ],
+    }).code;
+    const compiled = ts.transpileModule(typescriptSource, {
+      module: ts.ModuleKind.CommonJS,
+    }).outputText;
+    return executeCompiled(compiled);
+  }
+
+  function executeCompiled(compiled) {
+    exportsObj = {};
+    // eslint-disable-next-line no-new-func
+    new Function(
+      'global',
+      'require',
+      'React',
+      'Scheduler',
+      'exports',
+      '$RefreshReg$',
+      '$RefreshSig$',
+      compiled,
+    )(
+      global,
+      require,
+      React,
+      Scheduler,
+      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 $RefreshReg$(type, id) {
+    ReactFreshRuntime.register(type, id);
+  }
+
+  function $RefreshSig$() {
+    return ReactFreshRuntime.createSignatureFunctionForTransform();
+  }
+
+  describe.each([
+    [
+      'JavaScript syntax with destructuring enabled',
+      source => executeJavaScript(source, true),
+      testJavaScript,
+    ],
+    [
+      'JavaScript syntax with destructuring disabled',
+      source => executeJavaScript(source, false),
+      testJavaScript,
+    ],
+    ['TypeScript syntax', executeTypescript, testTypeScript],
+  ])('%s', (language, execute, runTest) => {
+    async function render(source) {
+      const Component = execute(source);
+      await act(() => {
+        root.render(<Component />);
+      });
+      // Module initialization shouldn't be counted as a hot update.
+      expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
+    }
+
+    async 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.
+      const 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;
+        await act(() => {
+          root.render(<NextComponent />);
+        });
+      }
+      await 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);
+    }
+
+    runTest(render, patch);
+  });
+
+  function testJavaScript(render, patch) {
+    it('reloads function declarations', async () => {
+      if (__DEV__) {
+        await 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');
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+        await 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');
+      }
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for class component in hidden subtree', async () => {
+      const code = `
+        import {Activity} from 'react';
+
+        // Avoid creating a new class on Fast Refresh.
+        global.A = global.A ?? class A extends React.Component {
+          render() {
+            return <div />;
+          }
+        }
+        const A = global.A;
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <A ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for hoistable resource in hidden subtree', async () => {
+      const code = `
+        import {Activity} from 'react';
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <link rel="preload" href="foo" ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for host component in hidden subtree', async () => {
+      const code = `
+        import {Activity} from 'react';
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <div ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for Activity in hidden subtree', async () => {
+      const code = `
+        import {Activity} from 'react';
+
+        function hiddenRef(value) {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <Activity mode="visible" ref={hiddenRef}>
+                <div />
+              </Activity>
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for Scope in hidden subtree', async () => {
+      const code = `
+        import {
+          Activity,
+          unstable_Scope as Scope,
+        } from 'react';
+
+        function hiddenRef(value) {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <Scope ref={hiddenRef}>
+                <div />
+              </Scope>
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for functional component in hidden subtree', async () => {
+      const code = `
+        import {Activity} from 'react';
+
+        // Avoid creating a new component on Fast Refresh.
+        global.A = global.A ?? function A() {
+          return <div />;
+        }
+        const A = global.A;
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <A ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for ref forwarding component in hidden subtree', async () => {
+      const code = `
+        import {
+          forwardRef,
+          Activity,
+        } from 'react';
+
+        // Avoid creating a new component on Fast Refresh.
+        global.A = global.A ?? forwardRef(function A(props, ref) {
+          return <div ref={ref} />;
+        });
+        const A = global.A;
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <A ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for simple memo component in hidden subtree', async () => {
+      const code = `
+        import {
+          memo,
+          Activity,
+        } from 'react';
+
+        // Avoid creating a new component on Fast Refresh.
+        global.A = global.A ?? memo(function A() {
+          return <div />;
+        });
+        const A = global.A;
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <A ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    // @gate __DEV__ && enableActivity
+    it('ignores ref for memo component in hidden subtree', async () => {
+      // A custom compare function means this won't use SimpleMemoComponent.
+      const code = `
+        import {
+          memo,
+          Activity,
+        } from 'react';
+
+        // Avoid creating a new component on Fast Refresh.
+        global.A = global.A ?? memo(
+          function A() {
+            return <div />;
+          },
+          () => false,
+        );
+        const A = global.A;
+
+        function hiddenRef() {
+          throw new Error('Unexpected hiddenRef() invocation.');
+        }
+
+        export default function App() {
+          return (
+            <Activity mode="hidden">
+              <A ref={hiddenRef} />
+            </Activity>
+          );
+        };
+      `;
+
+      await render(code);
+      await patch(code);
+    });
+
+    it('reloads HOCs if they return functions', async () => {
+      if (__DEV__) {
+        await 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');
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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 state when renaming a state variable inside a HOC with direct call', async () => {
+      if (__DEV__) {
+        await render(`
+          const {useState} = React;
+          const S = 1;
+
+          function hocWithDirectCall(Wrapped) {
+            return function Generated() {
+              return Wrapped();
+            };
+          }
+
+          export default hocWithDirectCall(() => {
+            const [foo, setFoo] = useState(S);
+            return <h1>A{foo}</h1>;
+          });
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+
+        await patch(`
+          const {useState} = React;
+          const S = 2;
+
+          function hocWithDirectCall(Wrapped) {
+            return function Generated() {
+              return Wrapped();
+            };
+          }
+
+          export default hocWithDirectCall(() => {
+            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');
+
+        await patch(`
+          const {useState} = React;
+          const S = 3;
+
+          function hocWithDirectCall(Wrapped) {
+            return function Generated() {
+              return Wrapped();
+            };
+          }
+
+          export default hocWithDirectCall(() => {
+            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('does not crash when changing Hook order inside a HOC with direct call', async () => {
+      if (__DEV__) {
+        await render(`
+          const {useEffect} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return function Generated() {
+              return Wrapped();
+            };
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            return <h1>A</h1>;
+          });
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A');
+
+        await patch(`
+          const {useEffect} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return function Generated() {
+              return Wrapped();
+            };
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            useEffect(() => {}, []);
+            return <h1>B</h1>;
+          });
+        `);
+        // Hook order changed, so we remount.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('B');
+      }
+    });
+
+    it('does not crash when changing Hook order inside a memo-ed HOC with direct call', async () => {
+      if (__DEV__) {
+        await render(`
+          const {useEffect, memo} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return memo(function Generated() {
+              return Wrapped();
+            });
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            return <h1>A</h1>;
+          });
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A');
+
+        await patch(`
+          const {useEffect, memo} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return memo(function Generated() {
+              return Wrapped();
+            });
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            useEffect(() => {}, []);
+            return <h1>B</h1>;
+          });
+        `);
+        // Hook order changed, so we remount.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('B');
+      }
+    });
+
+    it('does not crash when changing Hook order inside a memo+forwardRef-ed HOC with direct call', async () => {
+      if (__DEV__) {
+        await render(`
+          const {useEffect, memo, forwardRef} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return memo(forwardRef(function Generated() {
+              return Wrapped();
+            }));
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            return <h1>A</h1>;
+          });
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A');
+
+        await patch(`
+          const {useEffect, memo, forwardRef} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return memo(forwardRef(function Generated() {
+              return Wrapped();
+            }));
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            useEffect(() => {}, []);
+            return <h1>B</h1>;
+          });
+        `);
+        // Hook order changed, so we remount.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('B');
+      }
+    });
+
+    it('does not crash when changing Hook order inside a HOC returning an object', async () => {
+      if (__DEV__) {
+        await render(`
+          const {useEffect} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return {Wrapped: Wrapped};
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            return <h1>A</h1>;
+          }).Wrapped;
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A');
+
+        await patch(`
+          const {useEffect} = React;
+
+          function hocWithDirectCall(Wrapped) {
+            return {Wrapped: Wrapped};
+          }
+
+          export default hocWithDirectCall(() => {
+            useEffect(() => {}, []);
+            useEffect(() => {}, []);
+            return <h1>B</h1>;
+          }).Wrapped;
+        `);
+        // Hook order changed, so we remount.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('B');
+      }
+    });
+
+    it('resets effects while preserving state', async () => {
+      if (__DEV__) {
+        await 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.
+        await patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [value, setValue] = useState(0);
+            React.useEffect(() => {
+              Scheduler.log('B mount');
+              setValue(1)
+              return () => {
+                Scheduler.log('B unmount');
+              };
+            }, []);
+            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('B1');
+        assertLog(['B mount']);
+
+        await patch(`
+          const {useState} = React;
+
+          export default function App() {
+            const [value, setValue] = useState(0);
+            React.useEffect(() => {
+              Scheduler.log('C mount');
+              return () => {
+                Scheduler.log('C unmount');
+              };
+            }, []);
+            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 effect B was unmounted and C was mounted.
+        assertLog(['B unmount', 'C mount']);
+
+        await 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');
+        assertLog(['C unmount']);
+      }
+    });
+
+    it('does not get confused when custom hooks are reordered', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      // This is not a recommended pattern but at least it shouldn't break.
+      if (__DEV__) {
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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', async () => {
+      if (__DEV__) {
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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');
+
+        await 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');
+
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await 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');
+
+        await 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');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        await patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        await 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');
+        await 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');
+
+        await 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');
+        await patch(`
+          export default function App() {
+            return <h1>C2</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C2');
+
+        await patch(`
+          export default function App() {
+            return <h1>D1</h1>;
+          }
+        `);
+        el = container.firstChild;
+        expect(el.textContent).toBe('D1');
+        await 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', async () => {
+      if (__DEV__) {
+        await render(`
+          export default class App extends React.Component {
+            render() {
+              return <h1>A1</h1>
+            }
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        await 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');
+
+        await 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');
+        await patch(`
+          export default function App() {
+            return <h1>B2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        await 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', async () => {
+      if (__DEV__) {
+        await render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        await patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        await 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');
+        await 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');
+
+        await 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');
+        await 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()', async () => {
+      if (__DEV__) {
+        await render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        await patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        await 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');
+        await patch(`
+          function App() {
+            return <h1>B2</h1>;
+          }
+
+          export default React.memo(App);
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        await 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');
+        await 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()', async () => {
+      if (__DEV__) {
+        await render(`
+          export default function App() {
+            return <h1>A1</h1>;
+          }
+        `);
+        let el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        await patch(`
+          export default function App() {
+            return <h1>A2</h1>;
+          }
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('A2');
+
+        await 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');
+        await patch(`
+          function App() {
+            return <h1>B2</h1>;
+          }
+
+          export default React.forwardRef(App);
+        `);
+        // Keep state.
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+
+        await 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');
+        await patch(`
+          export default function App() {
+            return <h1>C2</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('C2');
+      }
+    });
+
+    it('resets useMemoCache cache slots', async () => {
+      if (__DEV__) {
+        await render(`
+          const useMemoCache = require('react/compiler-runtime').c;
+          let cacheMisses = 0;
+          const cacheMiss = (id) => {
+            cacheMisses++;
+            return id;
+          };
+          export default function App(t0) {
+            const $ = useMemoCache(1);
+            const {reset1} = t0;
+            let t1;
+            if ($[0] !== reset1) {
+              $[0] = t1 = cacheMiss({reset1});
+            } else {
+              t1 = $[1];
+            }
+            return <h1>{cacheMisses}</h1>;
+          }
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('1');
+        await patch(`
+          const useMemoCache = require('react/compiler-runtime').c;
+          let cacheMisses = 0;
+          const cacheMiss = (id) => {
+            cacheMisses++;
+            return id;
+          };
+          export default function App(t0) {
+            const $ = useMemoCache(2);
+            const {reset1, reset2} = t0;
+            let t1;
+            if ($[0] !== reset1) {
+              $[0] = t1 = cacheMiss({reset1});
+            } else {
+              t1 = $[1];
+            }
+            let t2;
+            if ($[1] !== reset2) {
+              $[1] = t2 = cacheMiss({reset2});
+            } else {
+              t2 = $[1];
+            }
+            return <h1>{cacheMisses}</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        // cache size changed between refreshes
+        expect(el.textContent).toBe('2');
+      }
+    });
+
+    describe('with inline requires', () => {
+      beforeEach(() => {
+        global.FakeModuleSystem = {};
+      });
+
+      afterEach(() => {
+        delete global.FakeModuleSystem;
+      });
+
+      it('remounts component if custom hook it uses changes order on first edit', async () => {
+        // 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__) {
+          await 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');
+
+          await 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');
+
+          await 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', async () => {
+        if (__DEV__) {
+          await 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');
+
+          await 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');
+
+          await 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');
+
+          await 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', async () => {
+        if (__DEV__) {
+          await 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');
+
+          await 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', async () => {
+        if (__DEV__) {
+          await 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');
+
+          await 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');
+
+          await 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');
+        }
+      });
+    });
+  }
+
+  function testTypeScript(render, patch) {
+    it('reloads component exported in typescript namespace', async () => {
+      if (__DEV__) {
+        await render(`
+          namespace Foo {
+            export namespace Bar {
+              export const Child = ({prop}) => {
+                return <h1>{prop}1</h1>
+              };
+            }
+          }
+
+          export default function Parent() {
+            return <Foo.Bar.Child prop={'A'} />;
+          }
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        await patch(`
+          namespace Foo {
+            export namespace Bar {
+              export const Child = ({prop}) => {
+                return <h1>{prop}2</h1>
+              };
+            }
+          }
+
+          export default function Parent() {
+            return <Foo.Bar.Child prop={'B'} />;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+  }
+});
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 00000000000..630074adbf0
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/ReactFreshMultipleRenderer-test.internal.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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();
+const React = require('react');
+let ReactFreshRuntime;
+if (__DEV__) {
+  ReactFreshRuntime = require('react-refresh/runtime');
+  ReactFreshRuntime.injectIntoGlobalHook(global);
+}
+const ReactDOMClient = require('react-dom/client');
+const act = require('internal-test-utils').act;
+
+jest.resetModules();
+const ReactART = require('react-art');
+const ARTSVGMode = require('art/modes/svg');
+const 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 managed by different renderers independently', async () => {
+    if (__DEV__) {
+      const InnerV1 = function () {
+        return <ReactART.Shape fill="blue" />;
+      };
+      ReactFreshRuntime.register(InnerV1, 'Inner');
+
+      const OuterV1 = function () {
+        return (
+          <div style={{color: 'blue'}}>
+            <ReactART.Surface>
+              <InnerV1 />
+            </ReactART.Surface>
+          </div>
+        );
+      };
+      ReactFreshRuntime.register(OuterV1, 'Outer');
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<OuterV1 />);
+      });
+      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.
+      const 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.
+      const 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-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
new file mode 100644
index 00000000000..4f097910033
--- /dev/null
+++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -0,0 +1,542 @@
+// 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 = _s5(memo(_c3 = _s5(() => {
+  _s5();
+  return useContext(X);
+}, "useContext{}")), "useContext{}");
+_c4 = Baz;
+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 does not get tripped by IIFEs 1`] = `
+while (item) {
+  var _s = $RefreshSig$();
+  _s(item => {
+    _s();
+    useFoo();
+  }, "useFoo{}", true)(item);
+}
+`;
+
+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>;
+}
+_s(App, "useState{[foo, setFoo](0)}\\nuseEffect{}");
+_c = App;
+var _c;
+$RefreshReg$(_c, "App");
+`;
+
+exports[`ReactFreshBabelPlugin generates signatures for function expressions calling hooks 1`] = `
+var _s = $RefreshSig$(),
+  _s2 = $RefreshSig$();
+export const A = _s(React.memo(_c2 = _s(React.forwardRef(_c = _s((props, ref) => {
+  _s();
+  const [foo, setFoo] = useState(0);
+  React.useEffect(() => {});
+  return <h1 ref={ref}>{foo}</h1>;
+}, "useState{[foo, setFoo](0)}\\nuseEffect{}")), "useState{[foo, setFoo](0)}\\nuseEffect{}")), "useState{[foo, setFoo](0)}\\nuseEffect{}");
+_c3 = A;
+export const B = _s2(React.memo(_c5 = _s2(React.forwardRef(_c4 = _s2(function (props, ref) {
+  _s2();
+  const [foo, setFoo] = useState(0);
+  React.useEffect(() => {});
+  return <h1 ref={ref}>{foo}</h1>;
+}, "useState{[foo, setFoo](0)}\\nuseEffect{}")), "useState{[foo, setFoo](0)}\\nuseEffect{}")), "useState{[foo, setFoo](0)}\\nuseEffect{}");
+_c6 = B;
+function hoc() {
+  var _s3 = $RefreshSig$();
+  return _s3(function Inner() {
+    _s3();
+    const [foo, setFoo] = useState(0);
+    React.useEffect(() => {});
+    return <h1 ref={ref}>{foo}</h1>;
+  }, "useState{[foo, setFoo](0)}\\nuseEffect{}");
+}
+export let C = hoc();
+var _c, _c2, _c3, _c4, _c5, _c6;
+$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$();
+import FancyHook from 'fancy';
+export default function App() {
+  _s2();
+  var _s = $RefreshSig$();
+  function useFancyState() {
+    _s();
+    const [foo, setFoo] = React.useState(0);
+    useFancyEffect();
+    return foo;
+  }
+  _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];
+});
+_c = App;
+var _c;
+$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 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;
+}
+_s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", false, function () {
+  return [useFancyEffect];
+});
+const useFancyEffect = () => {
+  _s2();
+  React.useEffect(() => {});
+};
+_s2(useFancyEffect, "useEffect{}");
+export default function App() {
+  _s3();
+  const bar = useFancyState();
+  return <h1>{bar}</h1>;
+}
+_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
+});
+exports.default = App;
+var _hooks = require("./hooks");
+var _s = $RefreshSig$();
+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;
+$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>;
+}
+_c = Foo;
+export default _c2 = hoc(Foo);
+export const A = hoc(Foo);
+_c3 = A;
+const B = hoc(Foo);
+_c4 = B;
+var _c, _c2, _c3, _c4;
+$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 = styled.div\`color: red\`;
+_c = Header;
+const StyledFactory1 = styled('div')\`color: hotpink\`;
+_c2 = StyledFactory1;
+const StyledFactory2 = styled('div')({
+  color: 'hotpink'
+});
+_c3 = StyledFactory2;
+const StyledFactory3 = styled(A)({
+  color: 'hotpink'
+});
+_c4 = StyledFactory3;
+const FunnyFactory = funny.factory\`\`;
+let Alias1 = A;
+let Alias2 = A.Foo;
+const Dict = {};
+function Foo() {
+  return <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>;
+}
+_c5 = Foo;
+const B = hoc(A);
+// This is currently registered as a false positive:
+_c6 = B;
+const NotAComponent = wow(A);
+// We could avoid it but it also doesn't hurt.
+_c7 = NotAComponent;
+var _c, _c2, _c3, _c4, _c5, _c6, _c7;
+$RefreshReg$(_c, "Header");
+$RefreshReg$(_c2, "StyledFactory1");
+$RefreshReg$(_c3, "StyledFactory2");
+$RefreshReg$(_c4, "StyledFactory3");
+$RefreshReg$(_c5, "Foo");
+$RefreshReg$(_c6, "B");
+$RefreshReg$(_c7, "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 = styled.div\`color: red\`;
+_c = Header;
+const StyledFactory1 = styled('div')\`color: hotpink\`;
+_c2 = StyledFactory1;
+const StyledFactory2 = styled('div')({
+  color: 'hotpink'
+});
+_c3 = StyledFactory2;
+const StyledFactory3 = styled(A)({
+  color: 'hotpink'
+});
+_c4 = StyledFactory3;
+const FunnyFactory = funny.factory\`\`;
+let Alias1 = A;
+let Alias2 = A.Foo;
+const Dict = {};
+function Foo() {
+  return [React.createElement(A), React.createElement(B), React.createElement(StyledFactory1), React.createElement(StyledFactory2), React.createElement(StyledFactory3), React.createElement(Alias1), React.createElement(Alias2), jsx(Header), React.createElement(Dict.X)];
+}
+_c5 = Foo;
+React.createContext(Store);
+const B = hoc(A);
+// This is currently registered as a false positive:
+_c6 = B;
+const NotAComponent = wow(A);
+// We could avoid it but it also doesn't hurt.
+_c7 = NotAComponent;
+var _c, _c2, _c3, _c4, _c5, _c6, _c7;
+$RefreshReg$(_c, "Header");
+$RefreshReg$(_c2, "StyledFactory1");
+$RefreshReg$(_c3, "StyledFactory2");
+$RefreshReg$(_c4, "StyledFactory3");
+$RefreshReg$(_c5, "Foo");
+$RefreshReg$(_c6, "B");
+$RefreshReg$(_c7, "NotAComponent");
+`;
+
+exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `
+const A = forwardRef(_c = function () {
+  return <h1>Foo</h1>;
+});
+_c2 = A;
+const B = memo(_c4 = React.forwardRef(_c3 = () => {
+  return <h1>Foo</h1>;
+}));
+_c5 = B;
+export default _c8 = React.memo(_c7 = forwardRef(_c6 = (props, ref) => {
+  return <h1>Foo</h1>;
+}));
+var _c, _c2, _c3, _c4, _c5, _c6, _c7, _c8;
+$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;
+$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;
+$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>;
+}
+_c3 = Baz;
+const NotAComp = 'hi';
+export { Baz, NotAComp };
+export function sum() {}
+export const Bad = 42;
+var _c, _c2, _c3;
+$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.
+  // You should name your components.
+  return <Hello />;
+});
+var _c, _c2;
+$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;
+$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;
+$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;
+$RefreshReg$(_c, "Hello");
+$RefreshReg$(_c2, "Bar");
+`;
+
+exports[`ReactFreshBabelPlugin supports typescript namespace syntax 1`] = `
+namespace Foo {
+  export namespace Bar {
+    export const A = () => {};
+    _c = A;
+    function B() {}
+    _c2 = B;
+    ;
+    export const B1 = B;
+  }
+  export const C = () => {};
+  _c3 = C;
+  export function D() {}
+  _c4 = D;
+  ;
+  namespace NotExported {
+    export const E = () => {};
+  }
+}
+var _c, _c2, _c3, _c4;
+$RefreshReg$(_c, "Foo$Bar$A");
+$RefreshReg$(_c2, "Foo$Bar$B");
+$RefreshReg$(_c3, "Foo$C");
+$RefreshReg$(_c4, "Foo$D");
+`;
+
+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;
+;
+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;
+$RefreshReg$(_c, "Hello");
+`;
diff --git a/packages/react-server-dom-esm/README.md b/packages/react-server-dom-esm/README.md
new file mode 100644
index 00000000000..71c61b345e3
--- /dev/null
+++ b/packages/react-server-dom-esm/README.md
@@ -0,0 +1,5 @@
+# react-server-dom-esm
+
+Experimental React Flight bindings for DOM using ESM.
+
+**Use it at your own risk.**
diff --git a/packages/react-server-dom-esm/client.browser.js b/packages/react-server-dom-esm/client.browser.js
new file mode 100644
index 00000000000..945ceed7f39
--- /dev/null
+++ b/packages/react-server-dom-esm/client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-esm/client.js b/packages/react-server-dom-esm/client.js
new file mode 100644
index 00000000000..2dad5bb5138
--- /dev/null
+++ b/packages/react-server-dom-esm/client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './client.browser';
diff --git a/packages/react-server-dom-esm/client.node.js b/packages/react-server-dom-esm/client.node.js
new file mode 100644
index 00000000000..c2e364f42f1
--- /dev/null
+++ b/packages/react-server-dom-esm/client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-esm/esm/package.json b/packages/react-server-dom-esm/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-esm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-esm/esm/react-server-dom-esm-node-loader.production.js b/packages/react-server-dom-esm/esm/react-server-dom-esm-node-loader.production.js
new file mode 100644
index 00000000000..b4b7cec77e9
--- /dev/null
+++ b/packages/react-server-dom-esm/esm/react-server-dom-esm-node-loader.production.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../src/ReactFlightESMNodeLoader.js';
diff --git a/packages/react-server-dom-esm/index.js b/packages/react-server-dom-esm/index.js
new file mode 100644
index 00000000000..05085b0ed02
--- /dev/null
+++ b/packages/react-server-dom-esm/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error('Use react-server-dom-esm/client instead.');
diff --git a/packages/react-server-dom-esm/npm/client.browser.js b/packages/react-server-dom-esm/npm/client.browser.js
new file mode 100644
index 00000000000..b189a8c4cb5
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/client.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-esm-client.browser.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-esm-client.browser.development.js');
+}
diff --git a/packages/react-server-dom-esm/npm/client.js b/packages/react-server-dom-esm/npm/client.js
new file mode 100644
index 00000000000..89d93a7a792
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/client.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./client.browser');
diff --git a/packages/react-server-dom-esm/npm/client.node.js b/packages/react-server-dom-esm/npm/client.node.js
new file mode 100644
index 00000000000..afd623e509c
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/client.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-esm-client.node.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-esm-client.node.development.js');
+}
diff --git a/packages/react-server-dom-esm/npm/esm/package.json b/packages/react-server-dom-esm/npm/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-esm/npm/index.js b/packages/react-server-dom-esm/npm/index.js
new file mode 100644
index 00000000000..60818c2dbd6
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+throw new Error('Use react-server-dom-esm/client instead.');
diff --git a/packages/react-server-dom-esm/npm/server.js b/packages/react-server-dom-esm/npm/server.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/server.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-esm/npm/server.node.js b/packages/react-server-dom-esm/npm/server.node.js
new file mode 100644
index 00000000000..579ab59b34b
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/server.node.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-esm-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-esm-server.node.development.js');
+}
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-esm/npm/static.js b/packages/react-server-dom-esm/npm/static.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-esm/npm/static.node.js b/packages/react-server-dom-esm/npm/static.node.js
new file mode 100644
index 00000000000..eea9fb7e18e
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/static.node.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-esm-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-esm-server.node.development.js');
+}
+
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-server-dom-esm/package.json b/packages/react-server-dom-esm/package.json
new file mode 100644
index 00000000000..79f73eb9844
--- /dev/null
+++ b/packages/react-server-dom-esm/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "react-server-dom-esm",
+  "description": "React Server Components bindings for DOM using ESM. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "19.3.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "client.js",
+    "client.browser.js",
+    "client.node.js",
+    "server.js",
+    "server.node.js",
+    "static.js",
+    "static.node.js",
+    "cjs/",
+    "esm/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./client": {
+      "node": "./client.node.js",
+      "default": "./client.browser.js"
+    },
+    "./client.browser": "./client.browser.js",
+    "./client.node": "./client.node.js",
+    "./server": {
+      "react-server": "./server.node.js",
+      "default": "./server.js"
+    },
+    "./server.node": "./server.node.js",
+    "./static": {
+      "react-server": "./static.node.js",
+      "default": "./static.js"
+    },
+    "./static.node": "./static.node.js",
+    "./node-loader": "./esm/react-server-dom-esm-node-loader.production.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-esm"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "acorn-loose": "^8.3.0",
+    "webpack-sources": "^3.2.0"
+  }
+}
diff --git a/packages/react-server-dom-esm/server.js b/packages/react-server-dom-esm/server.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-esm/server.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-esm/server.node.js b/packages/react-server-dom-esm/server.node.js
new file mode 100644
index 00000000000..6e644db0c7c
--- /dev/null
+++ b/packages/react-server-dom-esm/server.node.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js b/packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js
new file mode 100644
index 00000000000..450f1b25d02
--- /dev/null
+++ b/packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js
@@ -0,0 +1,804 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as acorn from 'acorn-loose';
+
+import readMappings from 'webpack-sources/lib/helpers/readMappings.js';
+import createMappingsSerializer from 'webpack-sources/lib/helpers/createMappingsSerializer.js';
+
+type ResolveContext = {
+  conditions: Array<string>,
+  parentURL: string | void,
+};
+
+type ResolveFunction = (
+  string,
+  ResolveContext,
+  ResolveFunction,
+) => {url: string} | Promise<{url: string}>;
+
+type GetSourceContext = {
+  format: string,
+};
+
+type GetSourceFunction = (
+  string,
+  GetSourceContext,
+  GetSourceFunction,
+) => Promise<{source: Source}>;
+
+type TransformSourceContext = {
+  format: string,
+  url: string,
+};
+
+type TransformSourceFunction = (
+  Source,
+  TransformSourceContext,
+  TransformSourceFunction,
+) => Promise<{source: Source}>;
+
+type LoadContext = {
+  conditions: Array<string>,
+  format: string | null | void,
+  importAssertions: Object,
+};
+
+type LoadFunction = (
+  string,
+  LoadContext,
+  LoadFunction,
+) => Promise<{format: string, shortCircuit?: boolean, source: Source}>;
+
+type Source = string | ArrayBuffer | Uint8Array;
+
+let warnedAboutConditionsFlag = false;
+
+let stashedGetSource: null | GetSourceFunction = null;
+let stashedResolve: null | ResolveFunction = null;
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  defaultResolve: ResolveFunction,
+): Promise<{url: string}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedResolve = defaultResolve;
+
+  if (!context.conditions.includes('react-server')) {
+    context = {
+      ...context,
+      conditions: [...context.conditions, 'react-server'],
+    };
+    if (!warnedAboutConditionsFlag) {
+      warnedAboutConditionsFlag = true;
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.warn(
+        'You did not run Node.js with the `--conditions react-server` flag. ' +
+          'Any "react-server" override will only work with ESM imports.',
+      );
+    }
+  }
+  return await defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function getSource(
+  url: string,
+  context: GetSourceContext,
+  defaultGetSource: GetSourceFunction,
+): Promise<{source: Source}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedGetSource = defaultGetSource;
+  return defaultGetSource(url, context, defaultGetSource);
+}
+
+type ExportedEntry = {
+  localName: string,
+  exportedName: string,
+  type: null | string,
+  loc: {
+    start: {line: number, column: number},
+    end: {line: number, column: number},
+  },
+  originalLine: number,
+  originalColumn: number,
+  originalSource: number,
+  nameIndex: number,
+};
+
+function addExportedEntry(
+  exportedEntries: Array<ExportedEntry>,
+  localNames: Set<string>,
+  localName: string,
+  exportedName: string,
+  type: null | 'function',
+  loc: {
+    start: {line: number, column: number},
+    end: {line: number, column: number},
+  },
+) {
+  if (localNames.has(localName)) {
+    // If the same local name is exported more than once, we only need one of the names.
+    return;
+  }
+  exportedEntries.push({
+    localName,
+    exportedName,
+    type,
+    loc,
+    originalLine: -1,
+    originalColumn: -1,
+    originalSource: -1,
+    nameIndex: -1,
+  });
+}
+
+function addLocalExportedNames(
+  exportedEntries: Array<ExportedEntry>,
+  localNames: Set<string>,
+  node: any,
+) {
+  switch (node.type) {
+    case 'Identifier':
+      addExportedEntry(
+        exportedEntries,
+        localNames,
+        node.name,
+        node.name,
+        null,
+        node.loc,
+      );
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addLocalExportedNames(exportedEntries, localNames, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element)
+          addLocalExportedNames(exportedEntries, localNames, element);
+      }
+      return;
+    case 'Property':
+      addLocalExportedNames(exportedEntries, localNames, node.value);
+      return;
+    case 'AssignmentPattern':
+      addLocalExportedNames(exportedEntries, localNames, node.left);
+      return;
+    case 'RestElement':
+      addLocalExportedNames(exportedEntries, localNames, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addLocalExportedNames(exportedEntries, localNames, node.expression);
+      return;
+  }
+}
+
+function transformServerModule(
+  source: string,
+  program: any,
+  url: string,
+  sourceMap: any,
+  loader: LoadFunction,
+): string {
+  const body = program.body;
+
+  // This entry list needs to be in source location order.
+  const exportedEntries: Array<ExportedEntry> = [];
+  // Dedupe set.
+  const localNames: Set<string> = new Set();
+
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        // If export * is used, the other file needs to explicitly opt into "use server" too.
+        break;
+      case 'ExportDefaultDeclaration':
+        if (node.declaration.type === 'Identifier') {
+          addExportedEntry(
+            exportedEntries,
+            localNames,
+            node.declaration.name,
+            'default',
+            null,
+            node.declaration.loc,
+          );
+        } else if (node.declaration.type === 'FunctionDeclaration') {
+          if (node.declaration.id) {
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              node.declaration.id.name,
+              'default',
+              'function',
+              node.declaration.id.loc,
+            );
+          } else {
+            // TODO: This needs to be rewritten inline because it doesn't have a local name.
+          }
+        }
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addLocalExportedNames(
+                exportedEntries,
+                localNames,
+                declarations[j].id,
+              );
+            }
+          } else {
+            const name = node.declaration.id.name;
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              name,
+              name,
+
+              node.declaration.type === 'FunctionDeclaration'
+                ? 'function'
+                : null,
+              node.declaration.id.loc,
+            );
+          }
+        }
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            const specifier = specifiers[j];
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              specifier.local.name,
+              specifier.exported.name,
+              null,
+              specifier.local.loc,
+            );
+          }
+        }
+        continue;
+    }
+  }
+
+  let mappings =
+    sourceMap && typeof sourceMap.mappings === 'string'
+      ? sourceMap.mappings
+      : '';
+  let newSrc = source;
+
+  if (exportedEntries.length > 0) {
+    let lastSourceIndex = 0;
+    let lastOriginalLine = 0;
+    let lastOriginalColumn = 0;
+    let lastNameIndex = 0;
+    let sourceLineCount = 0;
+    let lastMappedLine = 0;
+
+    if (sourceMap) {
+      // We iterate source mapping entries and our matched exports in parallel to source map
+      // them to their original location.
+      let nextEntryIdx = 0;
+      let nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+      let nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+      readMappings(
+        mappings,
+        (
+          generatedLine: number,
+          generatedColumn: number,
+          sourceIndex: number,
+          originalLine: number,
+          originalColumn: number,
+          nameIndex: number,
+        ) => {
+          if (
+            generatedLine > nextEntryLine ||
+            (generatedLine === nextEntryLine &&
+              generatedColumn > nextEntryColumn)
+          ) {
+            // We're past the entry which means that the best match we have is the previous entry.
+            if (lastMappedLine === nextEntryLine) {
+              // Match
+              exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+              exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+              exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+              exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+            } else {
+              // Skip if we didn't have any mappings on the exported line.
+            }
+            nextEntryIdx++;
+            if (nextEntryIdx < exportedEntries.length) {
+              nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+              nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+            } else {
+              nextEntryLine = -1;
+              nextEntryColumn = -1;
+            }
+          }
+          lastMappedLine = generatedLine;
+          if (sourceIndex > -1) {
+            lastSourceIndex = sourceIndex;
+          }
+          if (originalLine > -1) {
+            lastOriginalLine = originalLine;
+          }
+          if (originalColumn > -1) {
+            lastOriginalColumn = originalColumn;
+          }
+          if (nameIndex > -1) {
+            lastNameIndex = nameIndex;
+          }
+        },
+      );
+      if (nextEntryIdx < exportedEntries.length) {
+        if (lastMappedLine === nextEntryLine) {
+          // Match
+          exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+          exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+          exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+          exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+        }
+      }
+
+      for (
+        let lastIdx = mappings.length - 1;
+        lastIdx >= 0 && mappings[lastIdx] === ';';
+        lastIdx--
+      ) {
+        // If the last mapped lines don't contain any segments, we don't get a callback from readMappings
+        // so we need to pad the number of mapped lines, with one for each empty line.
+        lastMappedLine++;
+      }
+
+      sourceLineCount = program.loc.end.line;
+      if (sourceLineCount < lastMappedLine) {
+        throw new Error(
+          'The source map has more mappings than there are lines.',
+        );
+      }
+      // If the original source string had more lines than there are mappings in the source map.
+      // Add some extra padding of unmapped lines so that any lines that we add line up.
+      for (
+        let extraLines = sourceLineCount - lastMappedLine;
+        extraLines > 0;
+        extraLines--
+      ) {
+        mappings += ';';
+      }
+    } else {
+      // If a file doesn't have a source map then we generate a blank source map that just
+      // contains the original content and segments pointing to the original lines.
+      sourceLineCount = 1;
+      let idx = -1;
+      while ((idx = source.indexOf('\n', idx + 1)) !== -1) {
+        sourceLineCount++;
+      }
+      mappings = 'AAAA' + ';AACA'.repeat(sourceLineCount - 1);
+      sourceMap = {
+        version: 3,
+        sources: [url],
+        sourcesContent: [source],
+        mappings: mappings,
+        sourceRoot: '',
+      };
+      lastSourceIndex = 0;
+      lastOriginalLine = sourceLineCount;
+      lastOriginalColumn = 0;
+      lastNameIndex = -1;
+      lastMappedLine = sourceLineCount;
+
+      for (let i = 0; i < exportedEntries.length; i++) {
+        // Point each entry to original location.
+        const entry = exportedEntries[i];
+        entry.originalSource = 0;
+        entry.originalLine = entry.loc.start.line;
+        // We use column zero since we do the short-hand line-only source maps above.
+        entry.originalColumn = 0; // entry.loc.start.column;
+      }
+    }
+
+    newSrc += '\n\n;';
+    newSrc +=
+      'import {registerServerReference} from "react-server-dom-esm/server";\n';
+    if (mappings) {
+      mappings += ';;';
+    }
+
+    const createMapping = createMappingsSerializer();
+
+    // Create an empty mapping pointing to where we last left off to reset the counters.
+    let generatedLine = 1;
+    createMapping(
+      generatedLine,
+      0,
+      lastSourceIndex,
+      lastOriginalLine,
+      lastOriginalColumn,
+      lastNameIndex,
+    );
+    for (let i = 0; i < exportedEntries.length; i++) {
+      const entry = exportedEntries[i];
+      generatedLine++;
+      if (entry.type !== 'function') {
+        // We first check if the export is a function and if so annotate it.
+        newSrc += 'if (typeof ' + entry.localName + ' === "function") ';
+      }
+      newSrc += 'registerServerReference(' + entry.localName + ',';
+      newSrc += JSON.stringify(url) + ',';
+      newSrc += JSON.stringify(entry.exportedName) + ');\n';
+
+      mappings += createMapping(
+        generatedLine,
+        0,
+        entry.originalSource,
+        entry.originalLine,
+        entry.originalColumn,
+        entry.nameIndex,
+      );
+    }
+  }
+
+  if (sourceMap) {
+    // Override with an new mappings and serialize an inline source map.
+    sourceMap.mappings = mappings;
+    newSrc +=
+      '//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      Buffer.from(JSON.stringify(sourceMap)).toString('base64');
+  }
+
+  return newSrc;
+}
+
+function addExportNames(names: Array<string>, node: any) {
+  switch (node.type) {
+    case 'Identifier':
+      names.push(node.name);
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addExportNames(names, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element) addExportNames(names, element);
+      }
+      return;
+    case 'Property':
+      addExportNames(names, node.value);
+      return;
+    case 'AssignmentPattern':
+      addExportNames(names, node.left);
+      return;
+    case 'RestElement':
+      addExportNames(names, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addExportNames(names, node.expression);
+      return;
+  }
+}
+
+function resolveClientImport(
+  specifier: string,
+  parentURL: string,
+): {url: string} | Promise<{url: string}> {
+  // Resolve an import specifier as if it was loaded by the client. This doesn't use
+  // the overrides that this loader does but instead reverts to the default.
+  // This resolution algorithm will not necessarily have the same configuration
+  // as the actual client loader. It should mostly work and if it doesn't you can
+  // always convert to explicit exported names instead.
+  const conditions = ['node', 'import'];
+  if (stashedResolve === null) {
+    throw new Error(
+      'Expected resolve to have been called before transformSource',
+    );
+  }
+  return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
+}
+
+async function parseExportNamesInto(
+  body: any,
+  names: Array<string>,
+  parentURL: string,
+  loader: LoadFunction,
+): Promise<void> {
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        if (node.exported) {
+          addExportNames(names, node.exported);
+          continue;
+        } else {
+          const {url} = await resolveClientImport(node.source.value, parentURL);
+          const {source} = await loader(
+            url,
+            {format: 'module', conditions: [], importAssertions: {}},
+            loader,
+          );
+          if (typeof source !== 'string') {
+            throw new Error('Expected the transformed source to be a string.');
+          }
+          let childBody;
+          try {
+            childBody = acorn.parse(source, {
+              ecmaVersion: '2024',
+              sourceType: 'module',
+            }).body;
+          } catch (x) {
+            // eslint-disable-next-line react-internal/no-production-logging
+            console.error('Error parsing %s %s', url, x.message);
+            continue;
+          }
+          await parseExportNamesInto(childBody, names, url, loader);
+          continue;
+        }
+      case 'ExportDefaultDeclaration':
+        names.push('default');
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addExportNames(names, declarations[j].id);
+            }
+          } else {
+            addExportNames(names, node.declaration.id);
+          }
+        }
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            addExportNames(names, specifiers[j].exported);
+          }
+        }
+        continue;
+    }
+  }
+}
+
+async function transformClientModule(
+  program: any,
+  url: string,
+  sourceMap: any,
+  loader: LoadFunction,
+): Promise<string> {
+  const body = program.body;
+
+  const names: Array<string> = [];
+
+  await parseExportNamesInto(body, names, url, loader);
+
+  if (names.length === 0) {
+    return '';
+  }
+
+  let newSrc =
+    'import {registerClientReference} from "react-server-dom-esm/server";\n';
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i];
+    if (name === 'default') {
+      newSrc += 'export default ';
+      newSrc += 'registerClientReference(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call the default export of ${url} from the server ` +
+            `but it's on the client. It's not possible to invoke a client function from ` +
+            `the server, it can only be rendered as a Component or passed to props of a ` +
+            `Client Component.`,
+        ) +
+        ');';
+    } else {
+      newSrc += 'export const ' + name + ' = ';
+      newSrc += 'registerClientReference(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call ${name}() from the server but ${name} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        ) +
+        ');';
+    }
+    newSrc += '},';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(name) + ');\n';
+  }
+
+  // TODO: Generate source maps for Client Reference functions so they can point to their
+  // original locations.
+  return newSrc;
+}
+
+async function loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
+  }
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  const result = await defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+  return {format: 'module', source: result.source};
+}
+
+async function transformModuleIfNeeded(
+  source: string,
+  url: string,
+  loader: LoadFunction,
+): Promise<string> {
+  // Do a quick check for the exact string. If it doesn't exist, don't
+  // bother parsing.
+  if (
+    source.indexOf('use client') === -1 &&
+    source.indexOf('use server') === -1
+  ) {
+    return source;
+  }
+
+  let sourceMappingURL = null;
+  let sourceMappingStart = 0;
+  let sourceMappingEnd = 0;
+  let sourceMappingLines = 0;
+
+  let program;
+  try {
+    program = acorn.parse(source, {
+      ecmaVersion: '2024',
+      sourceType: 'module',
+      locations: true,
+      onComment(
+        block: boolean,
+        text: string,
+        start: number,
+        end: number,
+        startLoc: {line: number, column: number},
+        endLoc: {line: number, column: number},
+      ) {
+        if (
+          text.startsWith('# sourceMappingURL=') ||
+          text.startsWith('@ sourceMappingURL=')
+        ) {
+          sourceMappingURL = text.slice(19);
+          sourceMappingStart = start;
+          sourceMappingEnd = end;
+          sourceMappingLines = endLoc.line - startLoc.line;
+        }
+      },
+    });
+  } catch (x) {
+    // eslint-disable-next-line react-internal/no-production-logging
+    console.error('Error parsing %s %s', url, x.message);
+    return source;
+  }
+
+  let useClient = false;
+  let useServer = false;
+
+  const body = program.body;
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    if (node.type !== 'ExpressionStatement' || !node.directive) {
+      break;
+    }
+    if (node.directive === 'use client') {
+      useClient = true;
+    }
+    if (node.directive === 'use server') {
+      useServer = true;
+    }
+  }
+
+  if (!useClient && !useServer) {
+    return source;
+  }
+
+  if (useClient && useServer) {
+    throw new Error(
+      'Cannot have both "use client" and "use server" directives in the same file.',
+    );
+  }
+
+  let sourceMap = null;
+  if (sourceMappingURL) {
+    const sourceMapResult = await loader(
+      sourceMappingURL,
+      // $FlowFixMe
+      {
+        format: 'json',
+        conditions: [],
+        importAssertions: {type: 'json'},
+        importAttributes: {type: 'json'},
+      },
+      loader,
+    );
+    const sourceMapString =
+      typeof sourceMapResult.source === 'string'
+        ? sourceMapResult.source
+        : // $FlowFixMe
+          sourceMapResult.source.toString('utf8');
+    sourceMap = JSON.parse(sourceMapString);
+
+    // Strip the source mapping comment. We'll re-add it below if needed.
+    source =
+      source.slice(0, sourceMappingStart) +
+      '\n'.repeat(sourceMappingLines) +
+      source.slice(sourceMappingEnd);
+  }
+
+  if (useClient) {
+    return transformClientModule(program, url, sourceMap, loader);
+  }
+
+  return transformServerModule(source, program, url, sourceMap, loader);
+}
+
+export async function transformSource(
+  source: Source,
+  context: TransformSourceContext,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}> {
+  const transformed = await defaultTransformSource(
+    source,
+    context,
+    defaultTransformSource,
+  );
+  if (context.format === 'module') {
+    const transformedSource = transformed.source;
+    if (typeof transformedSource !== 'string') {
+      throw new Error('Expected source to have been transformed to a string.');
+    }
+    const newSrc = await transformModuleIfNeeded(
+      transformedSource,
+      context.url,
+      (url: string, ctx: LoadContext, defaultLoad: LoadFunction) => {
+        return loadClientImport(url, defaultTransformSource);
+      },
+    );
+    return {source: newSrc};
+  }
+  return transformed;
+}
+
+export async function load(
+  url: string,
+  context: LoadContext,
+  defaultLoad: LoadFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    if (typeof result.source !== 'string') {
+      throw new Error('Expected source to have been loaded into a string.');
+    }
+    const newSrc = await transformModuleIfNeeded(
+      result.source,
+      url,
+      defaultLoad,
+    );
+    return {format: 'module', source: newSrc};
+  }
+  return result;
+}
diff --git a/packages/react-server-dom-esm/src/ReactFlightESMReferences.js b/packages/react-server-dom-esm/src/ReactFlightESMReferences.js
new file mode 100644
index 00000000000..8ad9f222faf
--- /dev/null
+++ b/packages/react-server-dom-esm/src/ReactFlightESMReferences.js
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  exportName: string,
+): ClientReference<T> {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {value: CLIENT_REFERENCE_TAG},
+    $$id: {value: id + '#' + exportName},
+  });
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>): any {
+  // $FlowFixMe[incompatible-call]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
+    const args = ArraySlice.call(arguments, 1);
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      (__DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          }) as PropertyDescriptorMap,
+    );
+  }
+  return newFn;
+}
+
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
+export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+  exportName: string,
+): ServerReference<T> {
+  const $$typeof = {value: SERVER_REFERENCE_TAG};
+  const $$id = {
+    value: id + '#' + exportName,
+    configurable: true,
+  };
+  const $$bound = {value: null, configurable: true};
+  return Object.defineProperties(
+    (reference: any),
+    (__DEV__
+      ? {
+          $$typeof,
+          $$id,
+          $$bound,
+          $$location: {
+            value: Error('react-stack-top-frame'),
+            configurable: true,
+          },
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }
+      : {
+          $$typeof,
+          $$id,
+          $$bound,
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }) as PropertyDescriptorMap,
+  );
+}
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM.js b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM.js
new file mode 100644
index 00000000000..ebd28129833
--- /dev/null
+++ b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM.js
@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactDebugInfo,
+  ReactIOInfo,
+  ReactAsyncInfo,
+} from 'shared/ReactTypes';
+
+import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
+
+export type ServerConsumerModuleMap = string; // Module root path
+
+export type ServerManifest = string; // Module root path
+
+export type ServerReferenceId = string;
+
+import {prepareDestinationForModuleImpl} from 'react-client/src/ReactFlightClientConfig';
+
+export opaque type ClientReferenceMetadata = [
+  string, // module path
+  string, // export name
+];
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = {
+  specifier: string,
+  name: string,
+};
+
+// The reason this function needs to defined here in this file instead of just
+// being exported directly from the WebpackDestination... file is because the
+// ClientReferenceMetadata is opaque and we can't unwrap it there.
+// This should get inlined and we could also just implement an unwrapping function
+// though that risks it getting used in places it shouldn't be. This is unfortunate
+// but currently it seems to be the best option we have.
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  prepareDestinationForModuleImpl(moduleLoading, metadata[0], nonce);
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: ServerConsumerModuleMap,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  const baseURL = bundlerConfig;
+  return {
+    specifier: baseURL + metadata[0],
+    name: metadata[1],
+  };
+}
+
+export function resolveServerReference<T>(
+  config: ServerManifest,
+  id: ServerReferenceId,
+): ClientReference<T> {
+  const baseURL: string = config;
+  const idx = id.lastIndexOf('#');
+  const exportName = id.slice(idx + 1);
+  const fullURL = id.slice(0, idx);
+  if (!fullURL.startsWith(baseURL)) {
+    throw new Error(
+      'Attempted to load a Server Reference outside the hosted root.',
+    );
+  }
+  return {specifier: fullURL, name: exportName};
+}
+
+const asyncModuleCache: Map<string, Thenable<any>> = new Map();
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  const existingPromise = asyncModuleCache.get(metadata.specifier);
+  if (existingPromise) {
+    if (existingPromise.status === 'fulfilled') {
+      return null;
+    }
+    return existingPromise;
+  } else {
+    // $FlowFixMe[unsupported-syntax]
+    const modulePromise: Thenable<T> = import(metadata.specifier);
+    modulePromise.then(
+      value => {
+        const fulfilledThenable: FulfilledThenable<mixed> =
+          (modulePromise: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      },
+      reason => {
+        const rejectedThenable: RejectedThenable<mixed> = (modulePromise: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = reason;
+      },
+    );
+    asyncModuleCache.set(metadata.specifier, modulePromise);
+    return modulePromise;
+  }
+}
+
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  let moduleExports;
+  // We assume that preloadModule has been called before, which
+  // should have added something to the module cache.
+  const promise: any = asyncModuleCache.get(metadata.specifier);
+  if (promise.status === 'fulfilled') {
+    moduleExports = promise.value;
+  } else {
+    throw promise.reason;
+  }
+  return moduleExports[metadata.name];
+}
+
+// We cache ReactIOInfo across requests so that inner refreshes can dedupe with outer.
+const moduleIOInfoCache: Map<string, ReactIOInfo> = __DEV__
+  ? new Map()
+  : (null: any);
+
+export function getModuleDebugInfo<T>(
+  metadata: ClientReference<T>,
+): null | ReactDebugInfo {
+  if (!__DEV__) {
+    return null;
+  }
+  const filename = metadata.specifier;
+  let ioInfo = moduleIOInfoCache.get(filename);
+  if (ioInfo === undefined) {
+    let href;
+    try {
+      // $FlowFixMe
+      href = new URL(filename, document.baseURI).href;
+    } catch (_) {
+      href = filename;
+    }
+    let start = -1;
+    let end = -1;
+    let byteSize = 0;
+    // $FlowFixMe[method-unbinding]
+    if (typeof performance.getEntriesByType === 'function') {
+      // We may be able to collect the start and end time of this resource from Performance Observer.
+      const resourceEntries = performance.getEntriesByType('resource');
+      for (let i = 0; i < resourceEntries.length; i++) {
+        const resourceEntry = resourceEntries[i];
+        if (resourceEntry.name === href) {
+          start = resourceEntry.startTime;
+          end = start + resourceEntry.duration;
+          // $FlowFixMe[prop-missing]
+          byteSize = (resourceEntry.transferSize: any) || 0;
+        }
+      }
+    }
+    const value = Promise.resolve(href);
+    // $FlowFixMe
+    value.status = 'fulfilled';
+    // Is there some more useful representation for the chunk?
+    // $FlowFixMe
+    value.value = href;
+    // Create a fake stack frame that points to the beginning of the chunk. This is
+    // probably not source mapped so will link to the compiled source rather than
+    // any individual file that goes into the chunks.
+    const fakeStack = new Error('react-stack-top-frame');
+    if (fakeStack.stack.startsWith('Error: react-stack-top-frame')) {
+      // Looks like V8
+      fakeStack.stack =
+        'Error: react-stack-top-frame\n' +
+        // Add two frames since we always trim one off the top.
+        '    at Client Component Bundle (' +
+        href +
+        ':1:1)\n' +
+        '    at Client Component Bundle (' +
+        href +
+        ':1:1)';
+    } else {
+      // Looks like Firefox or Safari.
+      // Add two frames since we always trim one off the top.
+      fakeStack.stack =
+        'Client Component Bundle@' +
+        href +
+        ':1:1\n' +
+        'Client Component Bundle@' +
+        href +
+        ':1:1';
+    }
+    ioInfo = ({
+      name: 'script',
+      start: start,
+      end: end,
+      value: value,
+      debugStack: fakeStack,
+    }: ReactIOInfo);
+    if (byteSize > 0) {
+      // $FlowFixMe[cannot-write]
+      ioInfo.byteSize = byteSize;
+    }
+    moduleIOInfoCache.set(filename, ioInfo);
+  }
+  // We could dedupe the async info too but conceptually each request is its own await.
+  const asyncInfo: ReactAsyncInfo = {
+    awaited: ioInfo,
+  };
+  return [asyncInfo];
+}
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser.js
new file mode 100644
index 00000000000..0ba181c4cdf
--- /dev/null
+++ b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ModuleLoading = null;
+
+export function prepareDestinationForModuleImpl(
+  moduleLoading: ModuleLoading,
+  chunks: mixed,
+  nonce: ?string,
+) {
+  // In the browser we don't need to prepare our destination since the browser is the Destination
+}
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer.js b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer.js
new file mode 100644
index 00000000000..c435e40b0b0
--- /dev/null
+++ b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {preinitModuleForSSR} from 'react-client/src/ReactFlightClientConfig';
+
+export type ModuleLoading =
+  | null
+  | string
+  | {
+      prefix: string,
+      crossOrigin?: string,
+    };
+
+export function prepareDestinationForModuleImpl(
+  moduleLoading: ModuleLoading,
+  // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+  mod: string,
+  nonce: ?string,
+) {
+  if (typeof moduleLoading === 'string') {
+    preinitModuleForSSR(moduleLoading + mod, nonce, undefined);
+  } else if (moduleLoading !== null) {
+    preinitModuleForSSR(
+      moduleLoading.prefix + mod,
+      nonce,
+      moduleLoading.crossOrigin,
+    );
+  }
+}
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
new file mode 100644
index 00000000000..ee2475287d0
--- /dev/null
+++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  DebugChannelCallback,
+  FindSourceMapURLCallback,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  processStringChunk,
+  close,
+  injectIntoDevTools,
+} from 'react-client/src/ReactFlightClient';
+
+import {processReply} from 'react-client/src/ReactFlightReplyClient';
+
+export {
+  createServerReference,
+  registerServerReference,
+} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type CallServerCallback = <A, T>(string, args: A) => Promise<T>;
+
+export type Options = {
+  moduleBaseURL?: string,
+  callServer?: CallServerCallback,
+  debugChannel?: {writable?: WritableStream, readable?: ReadableStream, ...},
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+};
+
+function createDebugCallbackFromWritableStream(
+  debugWritable: WritableStream,
+): DebugChannelCallback {
+  const textEncoder = new TextEncoder();
+  const writer = debugWritable.getWriter();
+  return message => {
+    if (message === '') {
+      writer.close();
+    } else {
+      // Note: It's important that this function doesn't close over the Response object or it can't be GC:ed.
+      // Therefore, we can't report errors from this write back to the Response object.
+      if (__DEV__) {
+        writer.write(textEncoder.encode(message + '\n')).catch(console.error);
+      }
+    }
+  };
+}
+
+function createResponseFromOptions(options: void | Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback:
+            options.debugChannel.writable !== undefined
+              ? createDebugCallbackFromWritableStream(
+                  options.debugChannel.writable,
+                )
+              : null,
+        }
+      : undefined;
+
+  return createResponse(
+    options && options.moduleBaseURL ? options.moduleBaseURL : '',
+    null,
+    null,
+    options && options.callServer ? options.callServer : undefined,
+    undefined, // encodeFormAction
+    undefined, // nonce
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromUniversalStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+): void {
+  // This is the same as startReadingFromStream except this allows WebSocketStreams which
+  // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
+  // always allow streams with variable chunk types.
+  const streamState = createStreamState(response, stream);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    if (value instanceof ArrayBuffer) {
+      // WebSockets can produce ArrayBuffer values in ReadableStreams.
+      processBinaryChunk(response, streamState, new Uint8Array(value));
+    } else if (typeof value === 'string') {
+      // WebSockets can produce string values in ReadableStreams.
+      processStringChunk(response, streamState, value);
+    } else {
+      processBinaryChunk(response, streamState, value);
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromUniversalStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+export {createFromFetch, createFromReadableStream, encodeReply};
+
+if (__DEV__) {
+  injectIntoDevTools();
+}
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
new file mode 100644
index 00000000000..ae11dc29bff
--- /dev/null
+++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  FindSourceMapURLCallback,
+  Response,
+} from 'react-client/src/ReactFlightClient';
+
+import type {Readable} from 'stream';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient';
+
+export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: any,
+  callServer: any,
+): (...A) => Promise<T> {
+  return createServerReferenceImpl(id, noServerCall);
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
+};
+
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  onEnd: () => void,
+): void {
+  const streamState = createStreamState(response, stream);
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', onEnd);
+}
+
+function createFromNodeStream<T>(
+  stream: Readable,
+  moduleRootPath: string,
+  moduleBaseURL: string,
+  options?: Options,
+): Thenable<T> {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {hasReadable: true, callback: null}
+      : undefined;
+
+  const response: Response = createResponse(
+    moduleRootPath,
+    null,
+    moduleBaseURL,
+    noServerCall,
+    options ? options.encodeFormAction : undefined,
+    options && typeof options.nonce === 'string' ? options.nonce : undefined,
+    undefined, // TODO: If encodeReply is supported, this should support temporaryReferences
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+
+  if (__DEV__ && options && options.debugChannel) {
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
+  } else {
+    startReadingFromStream(response, stream, close.bind(null, response));
+  }
+
+  return getRoot(response);
+}
+
+export {createFromNodeStream};
diff --git a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
new file mode 100644
index 00000000000..b81e177d642
--- /dev/null
+++ b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
@@ -0,0 +1,427 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {ClientManifest} from './ReactFlightServerConfigESMBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+import type {Busboy} from 'busboy';
+import type {Writable} from 'stream';
+import type {Thenable} from 'shared/ReactTypes';
+
+import type {Duplex} from 'stream';
+
+import {Readable} from 'stream';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  reportGlobalError,
+  close,
+  resolveField,
+  resolveFileInfo,
+  resolveFileChunk,
+  resolveFileComplete,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+} from '../ReactFlightESMReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigNode';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function createDrainHandler(destination: Destination, request: Request) {
+  return () => startFlowing(request, destination);
+}
+
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    abort(request, new Error(reason));
+  };
+}
+
+function startReadingFromDebugChannelReadable(
+  request: Request,
+  stream: Readable | WebSocket,
+): void {
+  const stringDecoder = createStringDecoder();
+  let lastWasPartial = false;
+  let stringBuffer = '';
+  function onData(chunk: string | Uint8Array) {
+    if (typeof chunk === 'string') {
+      if (lastWasPartial) {
+        stringBuffer += readFinalStringChunk(stringDecoder, new Uint8Array(0));
+        lastWasPartial = false;
+      }
+      stringBuffer += chunk;
+    } else {
+      const buffer: Uint8Array = (chunk: any);
+      stringBuffer += readPartialStringChunk(stringDecoder, buffer);
+      lastWasPartial = true;
+    }
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+  }
+  function onError(error: mixed) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: error,
+      }),
+    );
+  }
+  function onClose() {
+    closeDebugChannel(request);
+  }
+  if (
+    // $FlowFixMe[method-unbinding]
+    typeof stream.addEventListener === 'function' &&
+    // $FlowFixMe[method-unbinding]
+    typeof stream.binaryType === 'string'
+  ) {
+    const ws: WebSocket = (stream: any);
+    ws.binaryType = 'arraybuffer';
+    ws.addEventListener('message', event => {
+      // $FlowFixMe
+      onData(event.data);
+    });
+    ws.addEventListener('error', event => {
+      // $FlowFixMe
+      onError(event.error);
+    });
+    ws.addEventListener('close', onClose);
+  } else {
+    const readable: Readable = (stream: any);
+    readable.on('data', onData);
+    readable.on('error', onError);
+    readable.on('end', onClose);
+  }
+}
+
+type Options = {
+  debugChannel?: Readable | Writable | Duplex | WebSocket,
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+};
+
+type PipeableStream = {
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+function renderToPipeableStream(
+  model: ReactClientValue,
+  moduleBasePath: ClientManifest,
+  options?: Options,
+): PipeableStream {
+  const debugChannel = __DEV__ && options ? options.debugChannel : undefined;
+  const debugChannelReadable: void | Readable | WebSocket =
+    __DEV__ &&
+    debugChannel !== undefined &&
+    // $FlowFixMe[method-unbinding]
+    (typeof debugChannel.read === 'function' ||
+      typeof debugChannel.readyState === 'number')
+      ? (debugChannel: any)
+      : undefined;
+  const debugChannelWritable: void | Writable =
+    __DEV__ && debugChannel !== undefined
+      ? // $FlowFixMe[method-unbinding]
+        typeof debugChannel.write === 'function'
+        ? (debugChannel: any)
+        : // $FlowFixMe[method-unbinding]
+          typeof debugChannel.send === 'function'
+          ? createFakeWritableFromWebSocket((debugChannel: any))
+          : undefined
+      : undefined;
+  const request = createRequest(
+    model,
+    moduleBasePath,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannel !== undefined,
+  );
+  let hasStartedFlowing = false;
+  startWork(request);
+  if (debugChannelWritable !== undefined) {
+    startFlowingDebug(request, debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadable(request, debugChannelReadable);
+  }
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      // We don't close until the debug channel closes.
+      if (!__DEV__ || debugChannelReadable === undefined) {
+        destination.on(
+          'close',
+          createCancelHandler(request, 'The destination stream closed early.'),
+        );
+      }
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+function createFakeWritableFromWebSocket(webSocket: WebSocket): Writable {
+  return ({
+    write(chunk: string | Uint8Array) {
+      webSocket.send((chunk: any));
+      return true;
+    },
+    end() {
+      webSocket.close();
+    },
+    destroy(reason) {
+      if (typeof reason === 'object' && reason !== null) {
+        reason = reason.message;
+      }
+      if (typeof reason === 'string') {
+        webSocket.close(1011, reason);
+      } else {
+        webSocket.close(1011);
+      }
+    },
+  }: any);
+}
+
+function createFakeWritable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  moduleBasePath: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createPrerenderRequest(
+      model,
+      moduleBasePath,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReplyFromBusboy<T>(
+  busboyStream: Busboy,
+  moduleBasePath: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const response = createResponse(
+    moduleBasePath,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+  let pendingFiles = 0;
+  const queuedFields: Array<string> = [];
+  busboyStream.on('field', (name, value) => {
+    if (pendingFiles > 0) {
+      // Because the 'end' event fires two microtasks after the next 'field'
+      // we would resolve files and fields out of order. To handle this properly
+      // we queue any fields we receive until the previous file is done.
+      queuedFields.push(name, value);
+    } else {
+      try {
+        resolveField(response, name, value);
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    }
+  });
+  busboyStream.on('file', (name, value, {filename, encoding, mimeType}) => {
+    if (encoding.toLowerCase() === 'base64') {
+      busboyStream.destroy(
+        new Error(
+          "React doesn't accept base64 encoded file uploads because we don't expect " +
+            "form data passed from a browser to ever encode data that way. If that's " +
+            'the wrong assumption, we can easily fix it.',
+        ),
+      );
+      return;
+    }
+    pendingFiles++;
+    const file = resolveFileInfo(response, name, filename, mimeType);
+    value.on('data', chunk => {
+      resolveFileChunk(response, file, chunk);
+    });
+    value.on('end', () => {
+      try {
+        resolveFileComplete(response, name, file);
+        pendingFiles--;
+        if (pendingFiles === 0) {
+          // Release any queued fields
+          for (let i = 0; i < queuedFields.length; i += 2) {
+            resolveField(response, queuedFields[i], queuedFields[i + 1]);
+          }
+          queuedFields.length = 0;
+        }
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    });
+  });
+  busboyStream.on('finish', () => {
+    close(response);
+  });
+  busboyStream.on('error', err => {
+    reportGlobalError(
+      response,
+      // $FlowFixMe[incompatible-call] types Error and mixed are incompatible
+      err,
+    );
+  });
+  return getRoot(response);
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  moduleBasePath: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    moduleBasePath,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+export {
+  renderToPipeableStream,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler.js b/packages/react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler.js
new file mode 100644
index 00000000000..5e789518b40
--- /dev/null
+++ b/packages/react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+import type {
+  ClientReference,
+  ServerReference,
+} from '../ReactFlightESMReferences';
+
+export type {ClientReference, ServerReference};
+
+export type ClientManifest = string; // base URL on the file system
+
+export type ServerReferenceId = string;
+
+export type ClientReferenceMetadata = [
+  string, // module path
+  string, // export name
+];
+
+export type ClientReferenceKey = string;
+
+export {
+  isClientReference,
+  isServerReference,
+} from '../ReactFlightESMReferences';
+
+export function getClientReferenceKey(
+  reference: ClientReference<any>,
+): ClientReferenceKey {
+  return reference.$$id;
+}
+
+export function resolveClientReferenceMetadata<T>(
+  config: ClientManifest,
+  clientReference: ClientReference<T>,
+): ClientReferenceMetadata {
+  const baseURL: string = config;
+  const id = clientReference.$$id;
+  const idx = id.lastIndexOf('#');
+  const exportName = id.slice(idx + 1);
+  const fullURL = id.slice(0, idx);
+  if (!fullURL.startsWith(baseURL)) {
+    throw new Error(
+      'Attempted to load a Client Module outside the hosted root.',
+    );
+  }
+  // Relative URL
+  const modulePath = fullURL.slice(baseURL.length);
+  return [modulePath, exportName];
+}
+
+export function getServerReferenceId<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): ServerReferenceId {
+  return serverReference.$$id;
+}
+
+export function getServerReferenceBoundArguments<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): null | Array<ReactClientValue> {
+  return serverReference.$$bound;
+}
+
+export function getServerReferenceLocation<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): void | Error {
+  return serverReference.$$location;
+}
diff --git a/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000..f24946fcae8
--- /dev/null
+++ b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  prerenderToNodeStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-esm/static.js b/packages/react-server-dom-esm/static.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-esm/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-esm/static.node.js b/packages/react-server-dom-esm/static.node.js
new file mode 100644
index 00000000000..d15eddc6f9b
--- /dev/null
+++ b/packages/react-server-dom-esm/static.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerenderToNodeStream} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-fb/package.json b/packages/react-server-dom-fb/package.json
new file mode 100644
index 00000000000..4041e0ab46b
--- /dev/null
+++ b/packages/react-server-dom-fb/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "react-server-dom-fb",
+  "version": "0.1.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-fb"
+  },
+  "dependencies": {
+    "scheduler": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}
diff --git a/packages/react-server-dom-fb/src/ReactDOMServerFB.js b/packages/react-server-dom-fb/src/ReactDOMServerFB.js
new file mode 100644
index 00000000000..b610a00566c
--- /dev/null
+++ b/packages/react-server-dom-fb/src/ReactDOMServerFB.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactNodeList} from 'shared/ReactTypes';
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+
+import type {Destination} from 'react-server/src/ReactServerStreamConfig';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+import {
+  createRequest,
+  startWork,
+  performWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResumableState,
+  createRenderState,
+  createRootFormatContext,
+} from 'react-server/src/ReactFizzConfig';
+
+type Options = {
+  identifierPrefix?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts: Array<string>,
+  bootstrapModules: Array<string>,
+  progressiveChunkSize?: number,
+  onError: (error: mixed) => void,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
+};
+
+opaque type Stream = {
+  destination: Destination,
+  request: Request,
+};
+
+function renderToStream(children: ReactNodeList, options: Options): Stream {
+  const destination = {
+    buffer: '',
+    done: false,
+    fatal: false,
+    error: null,
+  };
+  const resumableState = createResumableState(
+    options ? options.identifierPrefix : undefined,
+    options ? options.unstable_externalRuntimeSrc : undefined,
+    options ? options.bootstrapScriptContent : undefined,
+    options ? options.bootstrapScripts : undefined,
+    options ? options.bootstrapModules : undefined,
+  );
+  const request = createRequest(
+    children,
+    resumableState,
+    createRenderState(
+      resumableState,
+      undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    ),
+    createRootFormatContext(undefined),
+    options ? options.progressiveChunkSize : undefined,
+    options.onError,
+    undefined,
+    undefined,
+  );
+  startWork(request);
+  if (destination.fatal) {
+    throw destination.error;
+  }
+  return {
+    destination,
+    request,
+  };
+}
+
+function abortStream(stream: Stream, reason: mixed): void {
+  abort(stream.request, reason);
+}
+
+function renderNextChunk(stream: Stream): string {
+  const {request, destination} = stream;
+  performWork(request);
+  startFlowing(request, destination);
+  if (destination.fatal) {
+    throw destination.error;
+  }
+  const chunk = destination.buffer;
+  destination.buffer = '';
+  return chunk;
+}
+
+function hasFinished(stream: Stream): boolean {
+  return stream.destination.done;
+}
+
+function debug(stream: Stream): any {
+  // convert to any to silence flow errors from opaque type
+  const request = (stream.request: any);
+  return {
+    pendingRootTasks: request.pendingRootTasks,
+    clientRenderedBoundaries: request.clientRenderedBoundaries.length,
+    completedBoundaries: request.completedBoundaries.length,
+    partialBoundaries: request.partialBoundaries.length,
+    allPendingTasks: request.allPendingTasks,
+    pingedTasks: request.pingedTasks.length,
+  };
+}
+
+export {renderToStream, renderNextChunk, hasFinished, abortStream, debug};
diff --git a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
new file mode 100644
index 00000000000..32284b0f68d
--- /dev/null
+++ b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMServer;
+let Suspense;
+
+describe('ReactDOMServerFB', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMServer = require('../ReactDOMServerFB');
+    Suspense = React.Suspense;
+  });
+
+  const theError = new Error('This is an error');
+  function Throw() {
+    throw theError;
+  }
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  function readResult(stream) {
+    let result = '';
+    while (!ReactDOMServer.hasFinished(stream)) {
+      result += ReactDOMServer.renderNextChunk(stream);
+    }
+    return result;
+  }
+
+  it('should be able to render basic HTML', async () => {
+    const stream = ReactDOMServer.renderToStream(<div>hello world</div>, {
+      onError(x) {
+        console.error(x);
+      },
+    });
+    const result = readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  it('should emit bootstrap script src at the end', () => {
+    const stream = ReactDOMServer.renderToStream(<div>hello world</div>, {
+      bootstrapScriptContent: 'INIT();',
+      bootstrapScripts: ['init.js'],
+      bootstrapModules: ['init.mjs'],
+      onError(x) {
+        console.error(x);
+      },
+    });
+    const result = readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
+    );
+  });
+
+  it('emits all HTML as one unit if we wait until the end to start', async () => {
+    let hasLoaded = false;
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      return 'Done';
+    }
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback="Loading">
+          <Wait />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          console.error(x);
+        },
+      },
+    );
+    await jest.runAllTimers();
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    await jest.runAllTimers();
+
+    const result = readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div><!--$-->Done<!--/$--></div>"`);
+  });
+
+  it('should throw an error when an error is thrown at the root', () => {
+    const reportedErrors = [];
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Throw />
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+
+    let caughtError = null;
+    let result = '';
+    try {
+      result = readResult(stream);
+    } catch (x) {
+      caughtError = x;
+    }
+    expect(caughtError).toBe(theError);
+    expect(result).toBe('');
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should throw an error when an error is thrown inside a fallback', () => {
+    const reportedErrors = [];
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback={<Throw />}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+
+    let caughtError = null;
+    let result = '';
+    try {
+      result = readResult(stream);
+    } catch (x) {
+      caughtError = x;
+    }
+    expect(caughtError).toBe(theError);
+    expect(result).toBe('');
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should not throw an error when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Throw />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+
+    const result = readResult(stream);
+    expect(result).toContain('Loading');
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should be able to complete by aborting even if the promise never resolves', () => {
+    const errors = [];
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    const partial = ReactDOMServer.renderNextChunk(stream);
+    expect(partial).toContain('Loading');
+
+    ReactDOMServer.abortStream(stream);
+
+    const remaining = readResult(stream);
+    expect(remaining).toEqual('');
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  it('should allow setting an abort reason', () => {
+    const errors = [];
+    const stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        onError(error) {
+          errors.push(error);
+        },
+      },
+    );
+    ReactDOMServer.abortStream(stream, theError);
+    expect(errors).toEqual([theError]);
+  });
+});
diff --git a/packages/react-server-dom-parcel/README.md b/packages/react-server-dom-parcel/README.md
new file mode 100644
index 00000000000..8cbf767d39f
--- /dev/null
+++ b/packages/react-server-dom-parcel/README.md
@@ -0,0 +1,5 @@
+# react-server-dom-parcel
+
+Experimental React Flight bindings for DOM using Parcel.
+
+**Use it at your own risk.**
diff --git a/packages/react-server-dom-parcel/client.browser.js b/packages/react-server-dom-parcel/client.browser.js
new file mode 100644
index 00000000000..1be0bc04a7e
--- /dev/null
+++ b/packages/react-server-dom-parcel/client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.browser';
diff --git a/packages/react-server-dom-parcel/client.edge.js b/packages/react-server-dom-parcel/client.edge.js
new file mode 100644
index 00000000000..ab6a110c112
--- /dev/null
+++ b/packages/react-server-dom-parcel/client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.edge';
diff --git a/packages/react-server-dom-parcel/client.js b/packages/react-server-dom-parcel/client.js
new file mode 100644
index 00000000000..2dad5bb5138
--- /dev/null
+++ b/packages/react-server-dom-parcel/client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './client.browser';
diff --git a/packages/react-server-dom-parcel/client.node.js b/packages/react-server-dom-parcel/client.node.js
new file mode 100644
index 00000000000..c3ec7662d6e
--- /dev/null
+++ b/packages/react-server-dom-parcel/client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.node';
diff --git a/packages/react-server-dom-parcel/index.js b/packages/react-server-dom-parcel/index.js
new file mode 100644
index 00000000000..3ce9059540c
--- /dev/null
+++ b/packages/react-server-dom-parcel/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error('Use react-server-dom-parcel/client instead.');
diff --git a/packages/react-server-dom-parcel/npm/client.browser.js b/packages/react-server-dom-parcel/npm/client.browser.js
new file mode 100644
index 00000000000..05c298c14af
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/client.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-client.browser.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-client.browser.development.js');
+}
diff --git a/packages/react-server-dom-parcel/npm/client.edge.js b/packages/react-server-dom-parcel/npm/client.edge.js
new file mode 100644
index 00000000000..647f799d45d
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/client.edge.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-client.edge.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-client.edge.development.js');
+}
diff --git a/packages/react-server-dom-parcel/npm/client.js b/packages/react-server-dom-parcel/npm/client.js
new file mode 100644
index 00000000000..89d93a7a792
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/client.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./client.browser');
diff --git a/packages/react-server-dom-parcel/npm/client.node.js b/packages/react-server-dom-parcel/npm/client.node.js
new file mode 100644
index 00000000000..75583db96f7
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/client.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-client.node.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-client.node.development.js');
+}
diff --git a/packages/react-server-dom-parcel/npm/index.js b/packages/react-server-dom-parcel/npm/index.js
new file mode 100644
index 00000000000..ef54db443ff
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+throw new Error('Use react-server-dom-parcel/client instead.');
diff --git a/packages/react-server-dom-parcel/npm/server.browser.js b/packages/react-server-dom-parcel/npm/server.browser.js
new file mode 100644
index 00000000000..86b3a8a5ee9
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/server.browser.js
@@ -0,0 +1,18 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-parcel-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-parcel-server.browser.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.createClientReference = s.createClientReference;
+exports.registerServerReference = s.registerServerReference;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
+exports.registerServerActions = s.registerServerActions;
+exports.loadServerAction = s.loadServerAction;
diff --git a/packages/react-server-dom-parcel/npm/server.edge.js b/packages/react-server-dom-parcel/npm/server.edge.js
new file mode 100644
index 00000000000..356cce93a70
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/server.edge.js
@@ -0,0 +1,19 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-parcel-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-parcel-server.edge.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.createClientReference = s.createClientReference;
+exports.registerServerReference = s.registerServerReference;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
+exports.registerServerActions = s.registerServerActions;
+exports.loadServerAction = s.loadServerAction;
diff --git a/packages/react-server-dom-parcel/npm/server.js b/packages/react-server-dom-parcel/npm/server.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/server.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-parcel/npm/server.node.js b/packages/react-server-dom-parcel/npm/server.node.js
new file mode 100644
index 00000000000..6d2e9516d40
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/server.node.js
@@ -0,0 +1,21 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-parcel-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-parcel-server.node.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.createClientReference = s.createClientReference;
+exports.registerServerReference = s.registerServerReference;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
+exports.registerServerActions = s.registerServerActions;
+exports.loadServerAction = s.loadServerAction;
diff --git a/packages/react-server-dom-parcel/npm/static.browser.js b/packages/react-server-dom-parcel/npm/static.browser.js
new file mode 100644
index 00000000000..0f5f9ac5570
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/static.browser.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-parcel-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-parcel-server.browser.development.js');
+}
+
+exports.prerender = s.prerender;
diff --git a/packages/react-server-dom-parcel/npm/static.edge.js b/packages/react-server-dom-parcel/npm/static.edge.js
new file mode 100644
index 00000000000..540332ad8d7
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/static.edge.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-parcel-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-parcel-server.edge.development.js');
+}
+
+exports.prerender = s.prerender;
diff --git a/packages/react-server-dom-parcel/npm/static.js b/packages/react-server-dom-parcel/npm/static.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-parcel/npm/static.node.js b/packages/react-server-dom-parcel/npm/static.node.js
new file mode 100644
index 00000000000..ca66f6e3f0e
--- /dev/null
+++ b/packages/react-server-dom-parcel/npm/static.node.js
@@ -0,0 +1,11 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-parcel-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-parcel-server.node.development.js');
+}
+
+exports.prerender = s.prerender;
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-server-dom-parcel/package.json b/packages/react-server-dom-parcel/package.json
new file mode 100644
index 00000000000..6732c962cb1
--- /dev/null
+++ b/packages/react-server-dom-parcel/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "react-server-dom-parcel",
+  "description": "React Server Components bindings for DOM using Parcel. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "19.3.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "client.js",
+    "client.browser.js",
+    "client.edge.js",
+    "client.node.js",
+    "server.js",
+    "server.browser.js",
+    "server.edge.js",
+    "server.node.js",
+    "static.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.node.js",
+    "cjs/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./client": {
+      "workerd": "./client.edge.js",
+      "deno": "./client.edge.js",
+      "worker": "./client.edge.js",
+      "node": "./client.node.js",
+      "edge-light": "./client.edge.js",
+      "browser": "./client.browser.js",
+      "default": "./client.browser.js"
+    },
+    "./client.browser": "./client.browser.js",
+    "./client.edge": "./client.edge.js",
+    "./client.node": "./client.node.js",
+    "./server": {
+      "react-server": {
+        "workerd": "./server.edge.js",
+        "deno": "./server.browser.js",
+        "node": "./server.node.js",
+        "edge-light": "./server.edge.js",
+        "browser": "./server.browser.js"
+      },
+      "default": "./server.js"
+    },
+    "./server.browser": "./server.browser.js",
+    "./server.edge": "./server.edge.js",
+    "./server.node": "./server.node.js",
+    "./static": {
+      "react-server": {
+        "workerd": "./static.edge.js",
+        "deno": "./static.browser.js",
+        "node": "./static.node.js",
+        "edge-light": "./static.edge.js",
+        "browser": "./static.browser.js"
+      },
+      "default": "./static.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
+    "./static.node": "./static.node.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-parcel"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  }
+}
diff --git a/packages/react-server-dom-parcel/server.browser.js b/packages/react-server-dom-parcel/server.browser.js
new file mode 100644
index 00000000000..cb43b5e5782
--- /dev/null
+++ b/packages/react-server-dom-parcel/server.browser.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  createClientReference,
+  registerServerReference,
+  createTemporaryReferenceSet,
+  registerServerActions,
+  loadServerAction,
+} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-parcel/server.edge.js b/packages/react-server-dom-parcel/server.edge.js
new file mode 100644
index 00000000000..42f5c3d6539
--- /dev/null
+++ b/packages/react-server-dom-parcel/server.edge.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  createClientReference,
+  registerServerReference,
+  createTemporaryReferenceSet,
+  registerServerActions,
+  loadServerAction,
+} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-parcel/server.js b/packages/react-server-dom-parcel/server.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-parcel/server.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-parcel/server.node.js b/packages/react-server-dom-parcel/server.node.js
new file mode 100644
index 00000000000..3550d44ac18
--- /dev/null
+++ b/packages/react-server-dom-parcel/server.node.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  createClientReference,
+  registerServerReference,
+  createTemporaryReferenceSet,
+  registerServerActions,
+  loadServerAction,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js b/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js
new file mode 100644
index 00000000000..3dd67e733ce
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+  $$name: string,
+  $$bundles: Array<string>,
+  $$importMap?: ?{[string]: string},
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function createClientReference<T>(
+  id: string,
+  exportName: string,
+  bundles: Array<string>,
+  importMap?: ?{[string]: string},
+): ClientReference<T> {
+  return {
+    $$typeof: CLIENT_REFERENCE_TAG,
+    $$id: id,
+    $$name: exportName,
+    $$bundles: bundles,
+    $$importMap: importMap,
+  };
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>): any {
+  // $FlowFixMe[incompatible-call]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
+    const args = ArraySlice.call(arguments, 1);
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      (__DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          }) as PropertyDescriptorMap,
+    );
+  }
+  return newFn;
+}
+
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
+export function registerServerReference<T>(
+  reference: ServerReference<T>,
+  id: string,
+  exportName: string,
+): ServerReference<T> {
+  const $$typeof = {value: SERVER_REFERENCE_TAG};
+  const $$id = {
+    value: id + '#' + exportName,
+    configurable: true,
+  };
+  const $$bound = {value: null, configurable: true};
+  return Object.defineProperties(
+    (reference: any),
+    (__DEV__
+      ? {
+          $$typeof,
+          $$id,
+          $$bound,
+          $$location: {
+            value: Error('react-stack-top-frame'),
+            configurable: true,
+          },
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }
+      : {
+          $$typeof,
+          $$id,
+          $$bound,
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }) as PropertyDescriptorMap,
+  );
+}
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js
new file mode 100644
index 00000000000..67b0abc9cc9
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactDebugInfo} from 'shared/ReactTypes';
+
+import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
+
+import {
+  ID,
+  NAME,
+  BUNDLES,
+  IMPORT_MAP,
+} from '../shared/ReactFlightImportMetadata';
+import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+export type ServerManifest = {
+  [string]: Array<string>,
+};
+export type SSRModuleMap = null;
+export type ModuleLoading = null;
+export type ServerConsumerModuleMap = null;
+export type ServerReferenceId = string;
+
+export opaque type ClientReferenceMetadata = ImportMetadata;
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = ImportMetadata;
+
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  prepareDestinationWithChunks(moduleLoading, metadata[BUNDLES], nonce);
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: null,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  // Reference is already resolved during the build.
+  return metadata;
+}
+
+export function resolveServerReference<T>(
+  bundlerConfig: ServerManifest,
+  ref: ServerReferenceId,
+): ClientReference<T> {
+  const idx = ref.lastIndexOf('#');
+  const id = ref.slice(0, idx);
+  const name = ref.slice(idx + 1);
+  const bundles = bundlerConfig[id];
+  if (!bundles) {
+    throw new Error('Invalid server action: ' + ref);
+  }
+  return [id, name, bundles];
+}
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  if (metadata[IMPORT_MAP]) {
+    parcelRequire.extendImportMap(metadata[IMPORT_MAP]);
+  }
+
+  if (metadata[BUNDLES].length === 0) {
+    return null;
+  }
+
+  return Promise.all(metadata[BUNDLES].map(url => parcelRequire.load(url)));
+}
+
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  const moduleExports = parcelRequire(metadata[ID]);
+  if (hasOwnProperty.call(moduleExports, metadata[NAME])) {
+    return moduleExports[metadata[NAME]];
+  }
+  return (undefined: any);
+}
+
+export function getModuleDebugInfo<T>(
+  metadata: ClientReference<T>,
+): null | ReactDebugInfo {
+  // TODO
+  return null;
+}
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelBrowser.js
new file mode 100644
index 00000000000..31346b22554
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelBrowser.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ModuleLoading} from './ReactFlightClientConfigBundlerParcel';
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  bundles: Array<string>,
+  nonce: ?string,
+) {
+  // In the browser we don't need to prepare our destination since the browser is the Destination
+}
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelServer.js b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelServer.js
new file mode 100644
index 00000000000..c4ebcde9412
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelServer.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ModuleLoading} from './ReactFlightClientConfigBundlerParcel';
+import {preinitModuleForSSR} from 'react-client/src/ReactFlightClientConfig';
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  bundles: Array<string>,
+  nonce: ?string,
+) {
+  for (let i = 0; i < bundles.length; i++) {
+    preinitModuleForSSR(parcelRequire.meta.publicUrl + bundles[i], nonce);
+  }
+}
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
new file mode 100644
index 00000000000..b304d442046
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
@@ -0,0 +1,324 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes.js';
+import type {
+  DebugChannel,
+  DebugChannelCallback,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+import type {ServerReferenceId} from '../client/ReactFlightClientConfigBundlerParcel';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  processStringChunk,
+  close,
+  injectIntoDevTools,
+} from 'react-client/src/ReactFlightClient';
+
+import {
+  processReply,
+  createServerReference as createServerReferenceImpl,
+} from 'react-client/src/ReactFlightReplyClient';
+
+export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+export type {TemporaryReferenceSet};
+
+function findSourceMapURL(filename: string, environmentName: string) {
+  const devServer = parcelRequire.meta.devServer;
+  if (devServer != null) {
+    const qs = new URLSearchParams();
+    qs.set('filename', filename);
+    qs.set('env', environmentName);
+    return devServer + '/__parcel_source_map?' + qs.toString();
+  }
+  return null;
+}
+
+type CallServerCallback = <A, T>(id: string, args: A) => Promise<T>;
+
+let callServer: CallServerCallback | null = null;
+export function setServerCallback(fn: CallServerCallback) {
+  callServer = fn;
+}
+
+function callCurrentServerCallback<A, T>(
+  id: ServerReferenceId,
+  args: A,
+): Promise<T> {
+  if (!callServer) {
+    throw new Error(
+      'No server callback has been registered. Call setServerCallback to register one.',
+    );
+  }
+  return callServer(id, args);
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: string,
+  exportName: string,
+): (...A) => Promise<T> {
+  return createServerReferenceImpl(
+    id + '#' + exportName,
+    callCurrentServerCallback,
+    undefined,
+    findSourceMapURL,
+    exportName,
+  );
+}
+
+function createDebugCallbackFromWritableStream(
+  debugWritable: WritableStream,
+): DebugChannelCallback {
+  const textEncoder = new TextEncoder();
+  const writer = debugWritable.getWriter();
+  return message => {
+    if (message === '') {
+      writer.close();
+    } else {
+      // Note: It's important that this function doesn't close over the Response object or it can't be GC:ed.
+      // Therefore, we can't report errors from this write back to the Response object.
+      if (__DEV__) {
+        writer.write(textEncoder.encode(message + '\n')).catch(console.error);
+      }
+    }
+  };
+}
+
+function createResponseFromOptions(options: void | Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback:
+            options.debugChannel.writable !== undefined
+              ? createDebugCallbackFromWritableStream(
+                  options.debugChannel.writable,
+                )
+              : null,
+        }
+      : undefined;
+
+  return createResponse(
+    null, // bundlerConfig
+    null, // serverReferenceConfig
+    null, // moduleLoading
+    callCurrentServerCallback,
+    undefined, // encodeFormAction
+    undefined, // nonce
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ ? findSourceMapURL : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromUniversalStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+): void {
+  // This is the same as startReadingFromStream except this allows WebSocketStreams which
+  // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
+  // always allow streams with variable chunk types.
+  const streamState = createStreamState(response, stream);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    if (value instanceof ArrayBuffer) {
+      // WebSockets can produce ArrayBuffer values in ReadableStreams.
+      processBinaryChunk(response, streamState, new Uint8Array(value));
+    } else if (typeof value === 'string') {
+      // WebSockets can produce string values in ReadableStreams.
+      processStringChunk(response, streamState, value);
+    } else {
+      processBinaryChunk(response, streamState, value);
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+export type Options = {
+  debugChannel?: {writable?: WritableStream, readable?: ReadableStream, ...},
+  temporaryReferences?: TemporaryReferenceSet,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+};
+
+export function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+  return getRoot(response);
+}
+
+export function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromUniversalStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+export function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '', // formFieldPrefix
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+if (__DEV__) {
+  injectIntoDevTools();
+}
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
new file mode 100644
index 00000000000..f58f8534348
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+import {
+  processReply,
+  createServerReference as createServerReferenceImpl,
+} from 'react-client/src/ReactFlightReplyClient';
+
+export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+export type {TemporaryReferenceSet};
+
+function findSourceMapURL(filename: string, environmentName: string) {
+  const devServer = parcelRequire.meta.devServer;
+  if (devServer != null) {
+    const qs = new URLSearchParams();
+    qs.set('filename', filename);
+    qs.set('env', environmentName);
+    return devServer + '/__parcel_source_map?' + qs.toString();
+  }
+  return null;
+}
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: string,
+  exportName: string,
+): (...A) => Promise<T> {
+  return createServerReferenceImpl(
+    id + '#' + exportName,
+    noServerCall,
+    undefined,
+    findSourceMapURL,
+    exportName,
+  );
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  temporaryReferences?: TemporaryReferenceSet,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Edge client we only support a single-direction debug channel.
+  debugChannel?: {readable?: ReadableStream, ...},
+};
+
+function createResponseFromOptions(options?: Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback: null,
+        }
+      : undefined;
+
+  return createResponse(
+    null, // bundlerConfig
+    null, // serverReferenceConfig
+    null, // moduleLoading
+    noServerCall,
+    options ? options.encodeFormAction : undefined,
+    options && typeof options.nonce === 'string' ? options.nonce : undefined,
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ ? findSourceMapURL : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+export function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+
+  return getRoot(response);
+}
+
+export function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+export function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
new file mode 100644
index 00000000000..e8716bdc6bb
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+import type {DebugChannel, Response} from 'react-client/src/ReactFlightClient';
+import type {Readable} from 'stream';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+export * from './ReactFlightDOMClientEdge';
+
+function findSourceMapURL(filename: string, environmentName: string) {
+  const devServer = parcelRequire.meta.devServer;
+  if (devServer != null) {
+    const qs = new URLSearchParams();
+    qs.set('filename', filename);
+    qs.set('env', environmentName);
+    return devServer + '/__parcel_source_map?' + qs.toString();
+  }
+  return null;
+}
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
+};
+
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  onEnd: () => void,
+): void {
+  const streamState = createStreamState(response, stream);
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', onEnd);
+}
+
+export function createFromNodeStream<T>(
+  stream: Readable,
+  options?: Options,
+): Thenable<T> {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {hasReadable: true, callback: null}
+      : undefined;
+
+  const response: Response = createResponse(
+    null, // bundlerConfig
+    null, // serverReferenceConfig
+    null, // moduleLoading
+    noServerCall,
+    options ? options.encodeFormAction : undefined,
+    options && typeof options.nonce === 'string' ? options.nonce : undefined,
+    undefined, // TODO: If encodeReply is supported, this should support temporaryReferences
+    __DEV__ ? findSourceMapURL : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+
+  if (__DEV__ && options && options.debugChannel) {
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
+  } else {
+    startReadingFromStream(response, stream, close.bind(null, response));
+  }
+
+  return getRoot(response);
+}
diff --git a/packages/react-server-dom-parcel/src/client/react-flight-dom-client.browser.js b/packages/react-server-dom-parcel/src/client/react-flight-dom-client.browser.js
new file mode 100644
index 00000000000..a3f15d0116c
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/react-flight-dom-client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-parcel/src/client/react-flight-dom-client.edge.js b/packages/react-server-dom-parcel/src/client/react-flight-dom-client.edge.js
new file mode 100644
index 00000000000..14a8876953b
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/react-flight-dom-client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientEdge';
diff --git a/packages/react-server-dom-parcel/src/client/react-flight-dom-client.node.js b/packages/react-server-dom-parcel/src/client/react-flight-dom-client.node.js
new file mode 100644
index 00000000000..8eb9daa35b6
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/client/react-flight-dom-client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js
new file mode 100644
index 00000000000..31c3e5cd8b6
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {ReactFormState, Thenable} from 'shared/ReactTypes';
+import {
+  preloadModule,
+  requireModule,
+  resolveServerReference,
+  type ServerManifest,
+  type ServerReferenceId,
+} from '../client/ReactFlightClientConfigBundlerParcel';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  close,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction as decodeActionImpl,
+  decodeFormState as decodeFormStateImpl,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  createClientReference,
+  registerServerReference,
+} from '../ReactFlightParcelReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigWeb';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+export type {TemporaryReferenceSet};
+
+type Options = {
+  debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: TemporaryReferenceSet,
+  onError?: (error: mixed) => void,
+};
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+export function renderToReadableStream(
+  model: ReactClientValue,
+  options?: Options,
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    null,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, controller);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+export function prerender(
+  model: ReactClientValue,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      null,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+let serverManifest: ServerManifest = {};
+export function registerServerActions(manifest: ServerManifest) {
+  // This function is called by the bundler to register the manifest.
+  serverManifest = manifest;
+}
+
+export function decodeReply<T>(
+  body: string | FormData,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    serverManifest,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+export function decodeAction<T>(body: FormData): Promise<() => T> | null {
+  return decodeActionImpl(body, serverManifest);
+}
+
+export function decodeFormState<S>(
+  actionResult: S,
+  body: FormData,
+): Promise<ReactFormState<S, ServerReferenceId> | null> {
+  return decodeFormStateImpl(actionResult, body, serverManifest);
+}
+
+export function loadServerAction<F: (...any[]) => any>(id: string): Promise<F> {
+  const reference = resolveServerReference<any>(serverManifest, id);
+  return Promise.resolve(reference)
+    .then(() => preloadModule(reference))
+    .then(() => {
+      const fn = requireModule(reference);
+      if (typeof fn !== 'function') {
+        throw new Error('Server actions must be functions');
+      }
+      return fn;
+    });
+}
diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js
new file mode 100644
index 00000000000..63218160d8d
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {ReactFormState, Thenable} from 'shared/ReactTypes';
+import {
+  preloadModule,
+  requireModule,
+  resolveServerReference,
+  type ServerManifest,
+  type ServerReferenceId,
+} from '../client/ReactFlightClientConfigBundlerParcel';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  close,
+  getRoot,
+  reportGlobalError,
+  resolveField,
+  resolveFile,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction as decodeActionImpl,
+  decodeFormState as decodeFormStateImpl,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  createClientReference,
+  registerServerReference,
+} from '../ReactFlightParcelReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigWeb';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+export type {TemporaryReferenceSet};
+
+type Options = {
+  debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: TemporaryReferenceSet,
+  onError?: (error: mixed) => void,
+};
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+export function renderToReadableStream(
+  model: ReactClientValue,
+  options?: Options,
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    null,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, controller);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+export function prerender(
+  model: ReactClientValue,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      null,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+let serverManifest: ServerManifest = {};
+export function registerServerActions(manifest: ServerManifest) {
+  // This function is called by the bundler to register the manifest.
+  serverManifest = manifest;
+}
+
+export function decodeReply<T>(
+  body: string | FormData,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    serverManifest,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+export function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    serverManifest,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export function decodeAction<T>(body: FormData): Promise<() => T> | null {
+  return decodeActionImpl(body, serverManifest);
+}
+
+export function decodeFormState<S>(
+  actionResult: S,
+  body: FormData,
+): Promise<ReactFormState<S, ServerReferenceId> | null> {
+  return decodeFormStateImpl(actionResult, body, serverManifest);
+}
+
+export function loadServerAction<F: (...any[]) => any>(id: string): Promise<F> {
+  const reference = resolveServerReference<any>(serverManifest, id);
+  return Promise.resolve(reference)
+    .then(() => preloadModule(reference))
+    .then(() => {
+      const fn = requireModule(reference);
+      if (typeof fn !== 'function') {
+        throw new Error('Server actions must be functions');
+      }
+      return fn;
+    });
+}
diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js
new file mode 100644
index 00000000000..294e99e502a
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js
@@ -0,0 +1,713 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {Busboy} from 'busboy';
+import type {Writable} from 'stream';
+import type {ReactFormState, Thenable} from 'shared/ReactTypes';
+import type {
+  ServerManifest,
+  ServerReferenceId,
+} from '../client/ReactFlightClientConfigBundlerParcel';
+
+import type {Duplex} from 'stream';
+
+import {Readable} from 'stream';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  reportGlobalError,
+  close,
+  resolveField,
+  resolveFile,
+  resolveFileInfo,
+  resolveFileChunk,
+  resolveFileComplete,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction as decodeActionImpl,
+  decodeFormState as decodeFormStateImpl,
+} from 'react-server/src/ReactFlightActionServer';
+
+import {
+  preloadModule,
+  requireModule,
+  resolveServerReference,
+} from '../client/ReactFlightClientConfigBundlerParcel';
+
+export {
+  createClientReference,
+  registerServerReference,
+} from '../ReactFlightParcelReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigNode';
+
+import {textEncoder} from 'react-server/src/ReactServerStreamConfigNode';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function createDrainHandler(destination: Destination, request: Request) {
+  return () => startFlowing(request, destination);
+}
+
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    abort(request, new Error(reason));
+  };
+}
+
+function startReadingFromDebugChannelReadable(
+  request: Request,
+  stream: Readable | WebSocket,
+): void {
+  const stringDecoder = createStringDecoder();
+  let lastWasPartial = false;
+  let stringBuffer = '';
+  function onData(chunk: string | Uint8Array) {
+    if (typeof chunk === 'string') {
+      if (lastWasPartial) {
+        stringBuffer += readFinalStringChunk(stringDecoder, new Uint8Array(0));
+        lastWasPartial = false;
+      }
+      stringBuffer += chunk;
+    } else {
+      const buffer: Uint8Array = (chunk: any);
+      stringBuffer += readPartialStringChunk(stringDecoder, buffer);
+      lastWasPartial = true;
+    }
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+  }
+  function onError(error: mixed) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: error,
+      }),
+    );
+  }
+  function onClose() {
+    closeDebugChannel(request);
+  }
+  if (
+    // $FlowFixMe[method-unbinding]
+    typeof stream.addEventListener === 'function' &&
+    // $FlowFixMe[method-unbinding]
+    typeof stream.binaryType === 'string'
+  ) {
+    const ws: WebSocket = (stream: any);
+    ws.binaryType = 'arraybuffer';
+    ws.addEventListener('message', event => {
+      // $FlowFixMe
+      onData(event.data);
+    });
+    ws.addEventListener('error', event => {
+      // $FlowFixMe
+      onError(event.error);
+    });
+    ws.addEventListener('close', onClose);
+  } else {
+    const readable: Readable = (stream: any);
+    readable.on('data', onData);
+    readable.on('error', onError);
+    readable.on('end', onClose);
+  }
+}
+
+type Options = {
+  debugChannel?: Readable | Writable | Duplex | WebSocket,
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+};
+
+type PipeableStream = {
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+export function renderToPipeableStream(
+  model: ReactClientValue,
+  options?: Options,
+): PipeableStream {
+  const debugChannel = __DEV__ && options ? options.debugChannel : undefined;
+  const debugChannelReadable: void | Readable | WebSocket =
+    __DEV__ &&
+    debugChannel !== undefined &&
+    // $FlowFixMe[method-unbinding]
+    (typeof debugChannel.read === 'function' ||
+      typeof debugChannel.readyState === 'number')
+      ? (debugChannel: any)
+      : undefined;
+  const debugChannelWritable: void | Writable =
+    __DEV__ && debugChannel !== undefined
+      ? // $FlowFixMe[method-unbinding]
+        typeof debugChannel.write === 'function'
+        ? (debugChannel: any)
+        : // $FlowFixMe[method-unbinding]
+          typeof debugChannel.send === 'function'
+          ? createFakeWritableFromWebSocket((debugChannel: any))
+          : undefined
+      : undefined;
+  const request = createRequest(
+    model,
+    null,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannel !== undefined,
+  );
+  let hasStartedFlowing = false;
+  startWork(request);
+  if (debugChannelWritable !== undefined) {
+    startFlowingDebug(request, debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadable(request, debugChannelReadable);
+  }
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      // We don't close until the debug channel closes.
+      if (!__DEV__ || debugChannelReadable === undefined) {
+        destination.on(
+          'close',
+          createCancelHandler(request, 'The destination stream closed early.'),
+        );
+      }
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+function createFakeWritableFromWebSocket(webSocket: WebSocket): Writable {
+  return ({
+    write(chunk: string | Uint8Array) {
+      webSocket.send((chunk: any));
+      return true;
+    },
+    end() {
+      webSocket.close();
+    },
+    destroy(reason) {
+      if (typeof reason === 'object' && reason !== null) {
+        reason = reason.message;
+      }
+      if (typeof reason === 'string') {
+        webSocket.close(1011, reason);
+      } else {
+        webSocket.close(1011);
+      }
+    },
+  }: any);
+}
+
+function createFakeWritableFromReadableStreamController(
+  controller: ReadableStreamController,
+): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      if (typeof chunk === 'string') {
+        chunk = textEncoder.encode(chunk);
+      }
+      controller.enqueue(chunk);
+      // in web streams there is no backpressure so we can always write more
+      return true;
+    },
+    end() {
+      controller.close();
+    },
+    destroy(error) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof controller.error === 'function') {
+        // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+        controller.error(error);
+      } else {
+        controller.close();
+      }
+    },
+  }: any);
+}
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+export function renderToReadableStream(
+  model: ReactClientValue,
+  options?: Omit<Options, 'debugChannel'> & {
+    debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+    signal?: AbortSignal,
+  },
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    null,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    let debugWritable: Writable;
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        start: (controller): ?Promise<void> => {
+          debugWritable =
+            createFakeWritableFromReadableStreamController(controller);
+        },
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, debugWritable);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  let writable: Writable;
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        writable = createFakeWritableFromReadableStreamController(controller);
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, writable);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+function createFakeWritableFromNodeReadable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+export function prerenderToNodeStream(
+  model: ReactClientValue,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritableFromNodeReadable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createPrerenderRequest(
+      model,
+      null,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+export function prerender(
+  model: ReactClientValue,
+  options?: Options & {
+    signal?: AbortSignal,
+  },
+): Promise<{
+  prelude: ReadableStream,
+}> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      let writable: Writable;
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      null,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+let serverManifest: ServerManifest = {};
+export function registerServerActions(manifest: ServerManifest) {
+  // This function is called by the bundler to register the manifest.
+  serverManifest = manifest;
+}
+
+export function decodeReplyFromBusboy<T>(
+  busboyStream: Busboy,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const response = createResponse(
+    serverManifest,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+  let pendingFiles = 0;
+  const queuedFields: Array<string> = [];
+  busboyStream.on('field', (name, value) => {
+    if (pendingFiles > 0) {
+      // Because the 'end' event fires two microtasks after the next 'field'
+      // we would resolve files and fields out of order. To handle this properly
+      // we queue any fields we receive until the previous file is done.
+      queuedFields.push(name, value);
+    } else {
+      try {
+        resolveField(response, name, value);
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    }
+  });
+  busboyStream.on('file', (name, value, {filename, encoding, mimeType}) => {
+    if (encoding.toLowerCase() === 'base64') {
+      busboyStream.destroy(
+        new Error(
+          "React doesn't accept base64 encoded file uploads because we don't expect " +
+            "form data passed from a browser to ever encode data that way. If that's " +
+            'the wrong assumption, we can easily fix it.',
+        ),
+      );
+      return;
+    }
+    pendingFiles++;
+    const file = resolveFileInfo(response, name, filename, mimeType);
+    value.on('data', chunk => {
+      resolveFileChunk(response, file, chunk);
+    });
+    value.on('end', () => {
+      try {
+        resolveFileComplete(response, name, file);
+        pendingFiles--;
+        if (pendingFiles === 0) {
+          // Release any queued fields
+          for (let i = 0; i < queuedFields.length; i += 2) {
+            resolveField(response, queuedFields[i], queuedFields[i + 1]);
+          }
+          queuedFields.length = 0;
+        }
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    });
+  });
+  busboyStream.on('finish', () => {
+    close(response);
+  });
+  busboyStream.on('error', err => {
+    reportGlobalError(
+      response,
+      // $FlowFixMe[incompatible-call] types Error and mixed are incompatible
+      err,
+    );
+  });
+  return getRoot(response);
+}
+
+export function decodeReply<T>(
+  body: string | FormData,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    serverManifest,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+export function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    serverManifest,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export function decodeAction<T>(body: FormData): Promise<() => T> | null {
+  return decodeActionImpl(body, serverManifest);
+}
+
+export function decodeFormState<S>(
+  actionResult: S,
+  body: FormData,
+): Promise<ReactFormState<S, ServerReferenceId> | null> {
+  return decodeFormStateImpl(actionResult, body, serverManifest);
+}
+
+export function loadServerAction<F: (...any[]) => any>(id: string): Promise<F> {
+  const reference = resolveServerReference<any>(serverManifest, id);
+  return Promise.resolve(reference)
+    .then(() => preloadModule(reference))
+    .then(() => {
+      const fn = requireModule(reference);
+      if (typeof fn !== 'function') {
+        throw new Error('Server actions must be functions');
+      }
+      return fn;
+    });
+}
diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js b/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js
new file mode 100644
index 00000000000..ebcfec1badc
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
+
+import type {
+  ClientReference,
+  ServerReference,
+} from '../ReactFlightParcelReferences';
+
+export type {ClientReference, ServerReference};
+
+export type ClientManifest = null;
+export type ServerReferenceId = string;
+export type ClientReferenceMetadata = ImportMetadata;
+export type ClientReferenceKey = string;
+
+export {
+  isClientReference,
+  isServerReference,
+} from '../ReactFlightParcelReferences';
+
+export function getClientReferenceKey(
+  reference: ClientReference<any>,
+): ClientReferenceKey {
+  return reference.$$id + '#' + reference.$$name;
+}
+
+export function resolveClientReferenceMetadata<T>(
+  config: ClientManifest,
+  clientReference: ClientReference<T>,
+): ClientReferenceMetadata {
+  if (clientReference.$$importMap) {
+    return [
+      clientReference.$$id,
+      clientReference.$$name,
+      clientReference.$$bundles,
+      clientReference.$$importMap,
+    ];
+  }
+
+  return [
+    clientReference.$$id,
+    clientReference.$$name,
+    clientReference.$$bundles,
+  ];
+}
+
+export function getServerReferenceId<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): ServerReferenceId {
+  return serverReference.$$id;
+}
+
+export function getServerReferenceBoundArguments<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): null | Array<ReactClientValue> {
+  return serverReference.$$bound;
+}
+
+export function getServerReferenceLocation<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): void | Error {
+  return serverReference.$$location;
+}
diff --git a/packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.js
new file mode 100644
index 00000000000..9b2a047c324
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  createClientReference,
+  registerServerReference,
+  createTemporaryReferenceSet,
+  registerServerActions,
+  loadServerAction,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.js
new file mode 100644
index 00000000000..7f99c56f7cc
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  createClientReference,
+  registerServerReference,
+  createTemporaryReferenceSet,
+  registerServerActions,
+  loadServerAction,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000..f18bec13536
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  createClientReference,
+  registerServerReference,
+  createTemporaryReferenceSet,
+  registerServerActions,
+  loadServerAction,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js b/packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js
new file mode 100644
index 00000000000..d91f5d825c2
--- /dev/null
+++ b/packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 the parsed shape of the wire format which is why it is
+// condensed to only the essentialy information
+export type ImportMetadata = [
+  // eslint does not understand Flow tuple syntax.
+  /* eslint-disable */
+  id: string,
+  name: string,
+  bundles: Array<string>,
+  importMap?: {[string]: string},
+  /* eslint-enable */
+];
+
+export const ID = 0;
+export const NAME = 1;
+export const BUNDLES = 2;
+export const IMPORT_MAP = 3;
diff --git a/packages/react-server-dom-parcel/static.browser.js b/packages/react-server-dom-parcel/static.browser.js
new file mode 100644
index 00000000000..25897891632
--- /dev/null
+++ b/packages/react-server-dom-parcel/static.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerender} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-parcel/static.edge.js b/packages/react-server-dom-parcel/static.edge.js
new file mode 100644
index 00000000000..a39d54c73f5
--- /dev/null
+++ b/packages/react-server-dom-parcel/static.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerender} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-parcel/static.js b/packages/react-server-dom-parcel/static.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-parcel/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-parcel/static.node.js b/packages/react-server-dom-parcel/static.node.js
new file mode 100644
index 00000000000..78e70a1cf4c
--- /dev/null
+++ b/packages/react-server-dom-parcel/static.node.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  prerender,
+  prerenderToNodeStream,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-turbopack/README.md b/packages/react-server-dom-turbopack/README.md
new file mode 100644
index 00000000000..3d183a8a4a2
--- /dev/null
+++ b/packages/react-server-dom-turbopack/README.md
@@ -0,0 +1,5 @@
+# react-server-dom-turbopack
+
+Experimental React Flight bindings for DOM using Turbopack.
+
+**Use it at your own risk.**
diff --git a/packages/react-server-dom-turbopack/client.browser.js b/packages/react-server-dom-turbopack/client.browser.js
new file mode 100644
index 00000000000..1be0bc04a7e
--- /dev/null
+++ b/packages/react-server-dom-turbopack/client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.browser';
diff --git a/packages/react-server-dom-turbopack/client.edge.js b/packages/react-server-dom-turbopack/client.edge.js
new file mode 100644
index 00000000000..ab6a110c112
--- /dev/null
+++ b/packages/react-server-dom-turbopack/client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.edge';
diff --git a/packages/react-server-dom-turbopack/client.js b/packages/react-server-dom-turbopack/client.js
new file mode 100644
index 00000000000..2dad5bb5138
--- /dev/null
+++ b/packages/react-server-dom-turbopack/client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './client.browser';
diff --git a/packages/react-server-dom-turbopack/client.node.js b/packages/react-server-dom-turbopack/client.node.js
new file mode 100644
index 00000000000..c3ec7662d6e
--- /dev/null
+++ b/packages/react-server-dom-turbopack/client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.node';
diff --git a/packages/react-server-dom-turbopack/index.js b/packages/react-server-dom-turbopack/index.js
new file mode 100644
index 00000000000..348324f0de8
--- /dev/null
+++ b/packages/react-server-dom-turbopack/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error('Use react-server-dom-turbopack/client instead.');
diff --git a/packages/react-server-dom-turbopack/npm/client.browser.js b/packages/react-server-dom-turbopack/npm/client.browser.js
new file mode 100644
index 00000000000..84f8cf245dc
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/client.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-turbopack-client.browser.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-turbopack-client.browser.development.js');
+}
diff --git a/packages/react-server-dom-turbopack/npm/client.edge.js b/packages/react-server-dom-turbopack/npm/client.edge.js
new file mode 100644
index 00000000000..4cfab85b0e5
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/client.edge.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-turbopack-client.edge.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-turbopack-client.edge.development.js');
+}
diff --git a/packages/react-server-dom-turbopack/npm/client.js b/packages/react-server-dom-turbopack/npm/client.js
new file mode 100644
index 00000000000..89d93a7a792
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/client.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./client.browser');
diff --git a/packages/react-server-dom-turbopack/npm/client.node.js b/packages/react-server-dom-turbopack/npm/client.node.js
new file mode 100644
index 00000000000..d9c2ddf9985
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/client.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-turbopack-client.node.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-turbopack-client.node.development.js');
+}
diff --git a/packages/react-server-dom-turbopack/npm/index.js b/packages/react-server-dom-turbopack/npm/index.js
new file mode 100644
index 00000000000..53e8a98128c
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+throw new Error('Use react-server-dom-turbopack/client instead.');
diff --git a/packages/react-server-dom-turbopack/npm/server.browser.js b/packages/react-server-dom-turbopack/npm/server.browser.js
new file mode 100644
index 00000000000..ec8d6b013e0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/server.browser.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.browser.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/npm/server.edge.js b/packages/react-server-dom-turbopack/npm/server.edge.js
new file mode 100644
index 00000000000..c832080079d
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/server.edge.js
@@ -0,0 +1,18 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.edge.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/npm/server.js b/packages/react-server-dom-turbopack/npm/server.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/server.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-turbopack/npm/server.node.js b/packages/react-server-dom-turbopack/npm/server.node.js
new file mode 100644
index 00000000000..95076395404
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/server.node.js
@@ -0,0 +1,20 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.node.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/npm/static.browser.js b/packages/react-server-dom-turbopack/npm/static.browser.js
new file mode 100644
index 00000000000..d6acca4d6ec
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.browser.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.browser.development.js');
+}
+
+exports.prerender = s.prerender;
diff --git a/packages/react-server-dom-turbopack/npm/static.edge.js b/packages/react-server-dom-turbopack/npm/static.edge.js
new file mode 100644
index 00000000000..acd8ad68d74
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.edge.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.edge.development.js');
+}
+
+exports.prerender = s.prerender;
diff --git a/packages/react-server-dom-turbopack/npm/static.js b/packages/react-server-dom-turbopack/npm/static.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-turbopack/npm/static.node.js b/packages/react-server-dom-turbopack/npm/static.node.js
new file mode 100644
index 00000000000..f082e275e01
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.node.js
@@ -0,0 +1,11 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.node.development.js');
+}
+
+exports.prerender = s.prerender;
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-server-dom-turbopack/package.json b/packages/react-server-dom-turbopack/package.json
new file mode 100644
index 00000000000..e3adedd68db
--- /dev/null
+++ b/packages/react-server-dom-turbopack/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "react-server-dom-turbopack",
+  "description": "React Server Components bindings for DOM using Turbopack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "19.3.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "client.js",
+    "client.browser.js",
+    "client.edge.js",
+    "client.node.js",
+    "server.js",
+    "server.browser.js",
+    "server.edge.js",
+    "server.node.js",
+    "static.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.node.js",
+    "cjs/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./client": {
+      "workerd": "./client.edge.js",
+      "deno": "./client.edge.js",
+      "worker": "./client.edge.js",
+      "node": "./client.node.js",
+      "edge-light": "./client.edge.js",
+      "browser": "./client.browser.js",
+      "default": "./client.browser.js"
+    },
+    "./client.browser": "./client.browser.js",
+    "./client.edge": "./client.edge.js",
+    "./client.node": "./client.node.js",
+    "./server": {
+      "react-server": {
+        "workerd": "./server.edge.js",
+        "deno": "./server.browser.js",
+        "node": "./server.node.js",
+        "edge-light": "./server.edge.js",
+        "browser": "./server.browser.js"
+      },
+      "default": "./server.js"
+    },
+    "./server.browser": "./server.browser.js",
+    "./server.edge": "./server.edge.js",
+    "./server.node": "./server.node.js",
+    "./static": {
+      "react-server": {
+        "workerd": "./static.edge.js",
+        "deno": "./static.browser.js",
+        "node": "./static.node.js",
+        "edge-light": "./static.edge.js",
+        "browser": "./static.browser.js"
+      },
+      "default": "./static.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
+    "./static.node": "./static.node.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-turbopack"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "dependencies": {
+    "acorn-loose": "^8.3.0",
+    "neo-async": "^2.6.1"
+  }
+}
diff --git a/packages/react-server-dom-turbopack/server.browser.js b/packages/react-server-dom-turbopack/server.browser.js
new file mode 100644
index 00000000000..46f5b906104
--- /dev/null
+++ b/packages/react-server-dom-turbopack/server.browser.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-turbopack/server.edge.js b/packages/react-server-dom-turbopack/server.edge.js
new file mode 100644
index 00000000000..8f0347cd7b5
--- /dev/null
+++ b/packages/react-server-dom-turbopack/server.edge.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-turbopack/server.js b/packages/react-server-dom-turbopack/server.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-turbopack/server.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-turbopack/server.node.js b/packages/react-server-dom-turbopack/server.node.js
new file mode 100644
index 00000000000..bd00ba7275c
--- /dev/null
+++ b/packages/react-server-dom-turbopack/server.node.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js b/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js
new file mode 100644
index 00000000000..082a9c0ce58
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js
@@ -0,0 +1,360 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+  $$async: boolean,
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  exportName: string,
+): ClientReference<T> {
+  return registerClientReferenceImpl(
+    proxyImplementation,
+    id + '#' + exportName,
+    false,
+  );
+}
+
+function registerClientReferenceImpl<T>(
+  proxyImplementation: any,
+  id: string,
+  async: boolean,
+): ClientReference<T> {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {value: CLIENT_REFERENCE_TAG},
+    $$id: {value: id},
+    $$async: {value: async},
+  });
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>): any {
+  // $FlowFixMe[incompatible-call]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
+    const args = ArraySlice.call(arguments, 1);
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      (__DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          }) as PropertyDescriptorMap,
+    );
+  }
+  return newFn;
+}
+
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
+export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+  exportName: null | string,
+): ServerReference<T> {
+  const $$typeof = {value: SERVER_REFERENCE_TAG};
+  const $$id = {
+    value: exportName === null ? id : id + '#' + exportName,
+    configurable: true,
+  };
+  const $$bound = {value: null, configurable: true};
+  return Object.defineProperties(
+    (reference: any),
+    (__DEV__
+      ? {
+          $$typeof,
+          $$id,
+          $$bound,
+          $$location: {
+            value: Error('react-stack-top-frame'),
+            configurable: true,
+          },
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }
+      : {
+          $$typeof,
+          $$id,
+          $$bound,
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }) as PropertyDescriptorMap,
+  );
+}
+
+const PROMISE_PROTOTYPE = Promise.prototype;
+
+const deepProxyHandlers: Proxy$traps<mixed> = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        // These names are a little too common. We should probably have a way to
+        // have the Flight runtime extract the inner target instead.
+        return target.$$typeof;
+      case '$$id':
+        return target.$$id;
+      case '$$async':
+        return target.$$async;
+      case 'name':
+        return target.name;
+      case 'displayName':
+        return undefined;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+      case 'defaultProps':
+        return undefined;
+      // React looks for debugInfo on thenables.
+      case '_debugInfo':
+        return undefined;
+      // Avoid this attempting to be serialized.
+      case 'toJSON':
+        return undefined;
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+      case 'Provider':
+        throw new Error(
+          `Cannot render a Client Context Provider on the Server. ` +
+            `Instead, you can export a Client Component wrapper ` +
+            `that itself renders a Client Context Provider.`,
+        );
+      case 'then':
+        throw new Error(
+          `Cannot await or return from a thenable. ` +
+            `You cannot await a client module from a server component.`,
+        );
+    }
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const expression = String(target.name) + '.' + String(name);
+    throw new Error(
+      `Cannot access ${expression} on the server. ` +
+        'You cannot dot into a client module from a server component. ' +
+        'You can only pass the imported name through.',
+    );
+  },
+  set: function () {
+    throw new Error('Cannot assign to a client module from a server module.');
+  },
+};
+
+function getReference(target: Function, name: string | symbol): $FlowFixMe {
+  switch (name) {
+    // These names are read by the Flight runtime if you end up using the exports object.
+    case '$$typeof':
+      return target.$$typeof;
+    case '$$id':
+      return target.$$id;
+    case '$$async':
+      return target.$$async;
+    case 'name':
+      return target.name;
+    // We need to special case this because createElement reads it if we pass this
+    // reference.
+    case 'defaultProps':
+      return undefined;
+    // React looks for debugInfo on thenables.
+    case '_debugInfo':
+      return undefined;
+    // Avoid this attempting to be serialized.
+    case 'toJSON':
+      return undefined;
+    case Symbol.toPrimitive:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toPrimitive];
+    case Symbol.toStringTag:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toStringTag];
+    case '__esModule':
+      // Something is conditionally checking which export to use. We'll pretend to be
+      // an ESM compat module but then we'll check again on the client.
+      const moduleId = target.$$id;
+      target.default = registerClientReferenceImpl(
+        (function () {
+          throw new Error(
+            `Attempted to call the default export of ${moduleId} from the server ` +
+              `but it's on the client. It's not possible to invoke a client function from ` +
+              `the server, it can only be rendered as a Component or passed to props of a ` +
+              `Client Component.`,
+          );
+        }: any),
+        target.$$id + '#',
+        target.$$async,
+      );
+      return true;
+    case 'then':
+      if (target.then) {
+        // Use a cached value
+        return target.then;
+      }
+      if (!target.$$async) {
+        // If this module is expected to return a Promise (such as an AsyncModule) then
+        // we should resolve that with a client reference that unwraps the Promise on
+        // the client.
+
+        const clientReference: ClientReference<any> =
+          registerClientReferenceImpl(({}: any), target.$$id, true);
+        const proxy = new Proxy(clientReference, proxyHandlers);
+
+        // Treat this as a resolved Promise for React's use()
+        target.status = 'fulfilled';
+        target.value = proxy;
+
+        const then = (target.then = registerClientReferenceImpl(
+          (function then(resolve, reject: any) {
+            // Expose to React.
+            return Promise.resolve(resolve(proxy));
+          }: any),
+          // If this is not used as a Promise but is treated as a reference to a `.then`
+          // export then we should treat it as a reference to that name.
+          target.$$id + '#then',
+          false,
+        ));
+        return then;
+      } else {
+        // Since typeof .then === 'function' is a feature test we'd continue recursing
+        // indefinitely if we return a function. Instead, we return an object reference
+        // if we check further.
+        return undefined;
+      }
+  }
+  if (typeof name === 'symbol') {
+    throw new Error(
+      'Cannot read Symbol exports. Only named exports are supported on a client module ' +
+        'imported on the server.',
+    );
+  }
+  let cachedReference = target[name];
+  if (!cachedReference) {
+    const reference: ClientReference<any> = registerClientReferenceImpl(
+      (function () {
+        throw new Error(
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          `Attempted to call ${String(name)}() from the server but ${String(
+            name,
+          )} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        );
+      }: any),
+      target.$$id + '#' + name,
+      target.$$async,
+    );
+    Object.defineProperty((reference: any), 'name', {value: name});
+    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+  }
+  return cachedReference;
+}
+
+const proxyHandlers = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ): $FlowFixMe {
+    return getReference(target, name);
+  },
+  getOwnPropertyDescriptor: function (
+    target: Function,
+    name: string | symbol,
+  ): $FlowFixMe {
+    let descriptor = Object.getOwnPropertyDescriptor(target, name);
+    if (!descriptor) {
+      descriptor = {
+        value: getReference(target, name),
+        writable: false,
+        configurable: false,
+        enumerable: false,
+      };
+      Object.defineProperty(target, name, descriptor);
+    }
+    return descriptor;
+  },
+  getPrototypeOf(target: Function): Object {
+    // Pretend to be a Promise in case anyone asks.
+    return PROMISE_PROTOTYPE;
+  },
+  set: function (): empty {
+    throw new Error('Cannot assign to a client module from a server module.');
+  },
+};
+
+export function createClientModuleProxy<T>(
+  moduleId: string,
+): ClientReference<T> {
+  const clientReference: ClientReference<T> = registerClientReferenceImpl(
+    ({}: any),
+    // Represents the whole Module object instead of a particular import.
+    moduleId,
+    false,
+  );
+  return new Proxy(clientReference, proxyHandlers);
+}
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOM-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOM-test.js
new file mode 100644
index 00000000000..bd16976bb64
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOM-test.js
@@ -0,0 +1,330 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let act;
+let serverAct;
+let use;
+let clientExports;
+let clientExportsESM;
+let turbopackMap;
+let Stream;
+let React;
+let ReactDOMClient;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let Suspense;
+let ErrorBoundary;
+
+describe('ReactFlightTurbopackDOM', () => {
+  beforeEach(() => {
+    // For this first reset we are going to load the dom-node version of react-server-dom-turbopack/server
+    // This can be thought of as essentially being the React Server Components scope with react-server
+    // condition
+    jest.resetModules();
+
+    patchSetImmediate();
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react-server-dom-turbopack/server', () =>
+      require('react-server-dom-turbopack/server.node'),
+    );
+    jest.mock('react', () => require('react/react.react-server'));
+
+    const TurbopackMock = require('./utils/TurbopackMock');
+    clientExports = TurbopackMock.clientExports;
+    clientExportsESM = TurbopackMock.clientExportsESM;
+    turbopackMap = TurbopackMock.turbopackMap;
+
+    ReactServerDOMServer = require('react-server-dom-turbopack/server');
+
+    // This reset is to load modules for the SSR/Browser scope.
+    jest.resetModules();
+    __unmockReact();
+    act = require('internal-test-utils').act;
+    Stream = require('stream');
+    React = require('react');
+    use = React.use;
+    Suspense = React.Suspense;
+    ReactDOMClient = require('react-dom/client');
+    ReactServerDOMClient = require('react-server-dom-turbopack/client');
+
+    ErrorBoundary = class 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;
+      }
+    };
+  });
+
+  function getTestStream() {
+    const writable = new Stream.PassThrough();
+    const readable = new ReadableStream({
+      start(controller) {
+        writable.on('data', chunk => {
+          controller.enqueue(chunk);
+        });
+        writable.on('end', () => {
+          controller.close();
+        });
+      },
+    });
+    return {
+      readable,
+      writable,
+    };
+  }
+
+  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() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<App />, turbopackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
+    });
+  });
+
+  it('should resolve the root', async () => {
+    // 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({response}) {
+      return <section>{use(response).html}</section>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<RootModel />, turbopackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe(
+      '<section><div><span>hello</span><span>world</span></div></section>',
+    );
+  });
+
+  it('should unwrap async module references', async () => {
+    const AsyncModule = Promise.resolve(function AsyncModule({text}) {
+      return 'Async: ' + text;
+    });
+
+    const AsyncModule2 = Promise.resolve({
+      exportName: 'Module',
+    });
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const AsyncModuleRef = await clientExports(AsyncModule);
+    const AsyncModuleRef2 = await clientExports(AsyncModule2);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <AsyncModuleRef text={AsyncModuleRef2.exportName} />,
+        turbopackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Async: Module</p>');
+  });
+
+  it('should unwrap async ESM module references', async () => {
+    const AsyncModule = Promise.resolve(function AsyncModule({text}) {
+      return 'Async: ' + text;
+    });
+
+    const AsyncModule2 = Promise.resolve({
+      exportName: 'Module',
+    });
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const AsyncModuleRef = await clientExportsESM(AsyncModule);
+    const AsyncModuleRef2 = await clientExportsESM(AsyncModule2);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <AsyncModuleRef text={AsyncModuleRef2.exportName} />,
+        turbopackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Async: Module</p>');
+  });
+
+  it('should error when a bundler uses async ESM modules with createClientModuleProxy', async () => {
+    const AsyncModule = Promise.resolve(function AsyncModule() {
+      return 'This should not be rendered';
+    });
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <ErrorBoundary
+          fallback={error => (
+            <p>
+              {__DEV__ ? error.message + ' + ' : null}
+              {error.digest}
+            </p>
+          )}>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <Print response={response} />
+          </Suspense>
+        </ErrorBoundary>
+      );
+    }
+
+    const AsyncModuleRef = await clientExportsESM(AsyncModule, {
+      forceClientModuleProxy: true,
+    });
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <AsyncModuleRef />,
+        turbopackMap,
+        {
+          onError(error) {
+            return __DEV__ ? 'a dev digest' : `digest(${error.message})`;
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+
+    const errorMessage = `The module "${Object.keys(turbopackMap).at(0)}" is marked as an async ESM module but was loaded as a CJS proxy. This is probably a bug in the React Server Components bundler.`;
+
+    expect(container.innerHTML).toBe(
+      __DEV__
+        ? `<p>${errorMessage} + a dev digest</p>`
+        : `<p>digest(${errorMessage})</p>`,
+    );
+  });
+});
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js
new file mode 100644
index 00000000000..d9061d8e442
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.WritableStream =
+  require('web-streams-polyfill/ponyfill/es6').WritableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let clientExports;
+let React;
+let ReactDOMClient;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let ReactServer;
+let ReactServerScheduler;
+let act;
+let serverAct;
+let turbopackMap;
+let use;
+
+describe('ReactFlightTurbopackDOMBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactServerScheduler = require('scheduler');
+    patchMessageChannel(ReactServerScheduler);
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+
+    jest.mock('react-server-dom-turbopack/server', () =>
+      require('react-server-dom-turbopack/server.browser'),
+    );
+    const TurbopackMock = require('./utils/TurbopackMock');
+    clientExports = TurbopackMock.clientExports;
+    turbopackMap = TurbopackMock.turbopackMap;
+
+    ReactServerDOMServer = require('react-server-dom-turbopack/server.browser');
+
+    __unmockReact();
+    jest.resetModules();
+
+    ({act} = require('internal-test-utils'));
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactServerDOMClient = require('react-server-dom-turbopack/client');
+    use = React.use;
+  });
+
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+        return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+      })
+    );
+  }
+
+  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() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<App />),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
+    });
+  });
+
+  it('does not close the response early when using a fast debug channel', async () => {
+    function Component() {
+      return <div>Hi</div>;
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Component />, turbopackMap, {
+        debugChannel: {
+          writable: new WritableStream({
+            write(chunk) {
+              debugReadableStreamController.enqueue(chunk);
+            },
+            close() {
+              debugReadableStreamController.close();
+            },
+          }),
+        },
+      }),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div>Hi</div>');
+  });
+
+  it('can transport debug info through a dedicated debug channel', async () => {
+    let ownerStack;
+
+    const ClientComponent = clientExports(() => {
+      ownerStack = React.captureOwnerStack ? React.captureOwnerStack() : null;
+      return <p>Hi</p>;
+    });
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponent, null),
+      );
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        ReactServer.createElement(App, null),
+        turbopackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      replayConsoleLogs: true,
+      debugChannel: {
+        readable: debugReadableStream,
+        // Explicitly not defining a writable side here. Its presence was
+        // previously used as a condition to wait for referenced debug chunks.
+      },
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+    }
+
+    expect(container.innerHTML).toBe('<p>Hi</p>');
+  });
+});
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
new file mode 100644
index 00000000000..0bd60cb5e4c
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
@@ -0,0 +1,334 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let clientExports;
+let turbopackMap;
+let turbopackModules;
+let React;
+let ReactServer;
+let ReactDOMServer;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let use;
+let serverAct;
+
+describe('ReactFlightTurbopackDOMEdge', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-turbopack/server', () =>
+      require('react-server-dom-turbopack/server.edge'),
+    );
+
+    const TurbopackMock = require('./utils/TurbopackMock');
+    clientExports = TurbopackMock.clientExports;
+    turbopackMap = TurbopackMock.turbopackMap;
+    turbopackModules = TurbopackMock.turbopackModules;
+
+    ReactServer = require('react');
+    ReactServerDOMServer = require('react-server-dom-turbopack/server.edge');
+
+    jest.resetModules();
+    __unmockReact();
+
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.edge');
+    ReactServerDOMClient = require('react-server-dom-turbopack/client.edge');
+    use = React.use;
+  });
+
+  async function readResult(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+        return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+      })
+    );
+  }
+
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
+  it('should allow an alternative module mapping to be used for SSR', async () => {
+    function ClientComponent() {
+      return <span>Client Component</span>;
+    }
+    // The Client build may not have the same IDs as the Server bundles for the same
+    // component.
+    const ClientComponentOnTheClient = clientExports(ClientComponent);
+    const ClientComponentOnTheServer = clientExports(ClientComponent);
+
+    // In the SSR bundle this module won't exist. We simulate this by deleting it.
+    const clientId = turbopackMap[ClientComponentOnTheClient.$$id].id;
+    delete turbopackModules[clientId];
+
+    // Instead, we have to provide a translation from the client meta data to the SSR
+    // meta data.
+    const ssrMetadata = turbopackMap[ClientComponentOnTheServer.$$id];
+    const translationMap = {
+      [clientId]: {
+        '*': ssrMetadata,
+      },
+    };
+
+    function App() {
+      return <ClientComponentOnTheClient />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<App />, turbopackMap),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: translationMap,
+        moduleLoading: null,
+      },
+    });
+
+    function ClientRoot() {
+      return use(response);
+    }
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<ClientRoot />),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual('<span>Client Component</span>');
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a separate debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        ReactServer.createElement(App, null),
+        turbopackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [turbopackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': turbopackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: null,
+    };
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        serverConsumerManifest,
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a slow debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        ReactServer.createElement(App, null),
+        turbopackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [turbopackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': turbopackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: null,
+    };
+
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest,
+      debugChannel: {
+        readable:
+          // Create a delayed stream to simulate that the debug stream might
+          // be transported slower than the RSC stream, which must not lead to
+          // missing debug info.
+          createDelayedStream(debugReadableStream),
+      },
+    });
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+});
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js
new file mode 100644
index 00000000000..59e8ea39470
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js
@@ -0,0 +1,352 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
+
+let clientExports;
+let turbopackMap;
+let turbopackModules;
+let turbopackModuleLoading;
+let React;
+let ReactDOMServer;
+let ReactServer;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let Stream;
+let use;
+let serverAct;
+
+const streamOptions = {
+  objectMode: true,
+};
+
+describe('ReactFlightTurbopackDOMNode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    patchSetImmediate();
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-turbopack/server', () =>
+      require('react-server-dom-turbopack/server.node'),
+    );
+    ReactServer = require('react');
+    ReactServerDOMServer = require('react-server-dom-turbopack/server');
+
+    const TurbopackMock = require('./utils/TurbopackMock');
+    clientExports = TurbopackMock.clientExports;
+    turbopackMap = TurbopackMock.turbopackMap;
+    turbopackModules = TurbopackMock.turbopackModules;
+    turbopackModuleLoading = TurbopackMock.moduleLoading;
+
+    jest.resetModules();
+    __unmockReact();
+    jest.unmock('react-server-dom-turbopack/server');
+    jest.mock('react-server-dom-turbopack/client', () =>
+      require('react-server-dom-turbopack/client.node'),
+    );
+
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.node');
+    ReactServerDOMClient = require('react-server-dom-turbopack/client');
+    Stream = require('stream');
+    use = React.use;
+  });
+
+  function readResult(stream) {
+    return new Promise((resolve, reject) => {
+      let buffer = '';
+      const writable = new Stream.PassThrough();
+      writable.setEncoding('utf8');
+      writable.on('data', chunk => {
+        buffer += chunk;
+      });
+      writable.on('error', error => {
+        reject(error);
+      });
+      writable.on('end', () => {
+        resolve(buffer);
+      });
+      stream.pipe(writable);
+    });
+  }
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+        return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+      })
+    );
+  }
+
+  function createDelayedStream() {
+    let resolveDelayedStream;
+    const promise = new Promise(resolve => (resolveDelayedStream = resolve));
+    const delayedStream = new Stream.Transform({
+      ...streamOptions,
+      transform(chunk, encoding, callback) {
+        // Artificially delay pushing the chunk.
+        promise.then(() => {
+          this.push(chunk);
+          callback();
+        });
+      },
+    });
+    return {delayedStream, resolveDelayedStream};
+  }
+
+  it('should allow an alternative module mapping to be used for SSR', async () => {
+    function ClientComponent() {
+      return <span>Client Component</span>;
+    }
+    // The Client build may not have the same IDs as the Server bundles for the same
+    // component.
+    const ClientComponentOnTheClient = clientExports(
+      ClientComponent,
+      'path/to/chunk.js',
+    );
+    const ClientComponentOnTheServer = clientExports(ClientComponent);
+
+    // In the SSR bundle this module won't exist. We simulate this by deleting it.
+    const clientId = turbopackMap[ClientComponentOnTheClient.$$id].id;
+    delete turbopackModules[clientId];
+
+    // Instead, we have to provide a translation from the client meta data to the SSR
+    // meta data.
+    const ssrMetadata = turbopackMap[ClientComponentOnTheServer.$$id];
+    const translationMap = {
+      [clientId]: {
+        '*': ssrMetadata,
+      },
+    };
+
+    function App() {
+      return <ClientComponentOnTheClient />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<App />, turbopackMap),
+    );
+    const readable = new Stream.PassThrough();
+
+    stream.pipe(readable);
+
+    let response;
+    function ClientRoot() {
+      if (!response) {
+        response = ReactServerDOMClient.createFromNodeStream(readable, {
+          moduleMap: translationMap,
+          moduleLoading: turbopackModuleLoading,
+        });
+      }
+      return use(response);
+    }
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(<ClientRoot />),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual(
+      '<script src="/prefix/path/to/chunk.js" async=""></script><span>Client Component</span>',
+    );
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a separate debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    const debugReadable = new Stream.PassThrough(streamOptions);
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        ReactServer.createElement(App, null),
+        turbopackMap,
+        {
+          debugChannel: new Stream.Writable({
+            write(chunk, encoding, callback) {
+              debugReadable.write(chunk, encoding);
+              callback();
+            },
+            final() {
+              debugReadable.end();
+            },
+          }),
+        },
+      ),
+    );
+
+    // Create a delayed stream to simulate that the RSC stream might be
+    // transported slower than the debug channel, which must not lead to a
+    // `Connection closed` error in the Flight client.
+    const {delayedStream, resolveDelayedStream} = createDelayedStream();
+
+    rscStream.pipe(delayedStream);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [turbopackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': turbopackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: null,
+    };
+
+    const response = ReactServerDOMClient.createFromNodeStream(
+      delayedStream,
+      serverConsumerManifest,
+      {debugChannel: debugReadable},
+    );
+
+    setTimeout(resolveDelayedStream);
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a slow debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    // Create a delayed stream to simulate that the debug stream might be
+    // transported slower than the RSC stream, which must not lead to missing
+    // debug info.
+    const {delayedStream, resolveDelayedStream} = createDelayedStream();
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        ReactServer.createElement(App, null),
+        turbopackMap,
+        {
+          debugChannel: new Stream.Writable({
+            write(chunk, encoding, callback) {
+              delayedStream.write(chunk, encoding);
+              callback();
+            },
+            final() {
+              delayedStream.end();
+            },
+          }),
+        },
+      ),
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    rscStream.pipe(readable);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [turbopackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': turbopackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: null,
+    };
+
+    const response = ReactServerDOMClient.createFromNodeStream(
+      readable,
+      serverConsumerManifest,
+      {debugChannel: delayedStream},
+    );
+
+    setTimeout(resolveDelayedStream);
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+});
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReply-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReply-test.js
new file mode 100644
index 00000000000..04abb546df3
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReply-test.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+// let serverExports;
+let turbopackServerMap;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let ReactServerScheduler;
+
+describe('ReactFlightTurbopackDOMReply', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactServerScheduler = require('scheduler');
+    patchMessageChannel(ReactServerScheduler);
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-turbopack/server', () =>
+      require('react-server-dom-turbopack/server.browser'),
+    );
+    const TurbopackMock = require('./utils/TurbopackMock');
+    // serverExports = TurbopackMock.serverExports;
+    turbopackServerMap = TurbopackMock.turbopackServerMap;
+    ReactServerDOMServer = require('react-server-dom-turbopack/server.browser');
+    jest.resetModules();
+    ReactServerDOMClient = require('react-server-dom-turbopack/client');
+  });
+
+  it('can encode a reply', async () => {
+    const body = await ReactServerDOMClient.encodeReply({some: 'object'});
+    const decoded = await ReactServerDOMServer.decodeReply(
+      body,
+      turbopackServerMap,
+    );
+
+    expect(decoded).toEqual({some: 'object'});
+  });
+});
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReplyEdge-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReplyEdge-test.js
new file mode 100644
index 00000000000..09803ab017c
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMReplyEdge-test.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let turbopackServerMap;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+
+describe('ReactFlightDOMTurbopackReply', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-turbopack/server', () =>
+      require('react-server-dom-turbopack/server.edge'),
+    );
+    const TurbopackMock = require('./utils/TurbopackMock');
+    turbopackServerMap = TurbopackMock.turbopackServerMap;
+    ReactServerDOMServer = require('react-server-dom-turbopack/server.edge');
+    jest.resetModules();
+    ReactServerDOMClient = require('react-server-dom-turbopack/client.edge');
+  });
+
+  it('can encode a reply', async () => {
+    const body = await ReactServerDOMClient.encodeReply({some: 'object'});
+    const decoded = await ReactServerDOMServer.decodeReply(
+      body,
+      turbopackServerMap,
+    );
+
+    expect(decoded).toEqual({some: 'object'});
+  });
+});
diff --git a/packages/react-server-dom-turbopack/src/__tests__/utils/TurbopackMock.js b/packages/react-server-dom-turbopack/src/__tests__/utils/TurbopackMock.js
new file mode 100644
index 00000000000..2e81d55fa69
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/__tests__/utils/TurbopackMock.js
@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 url = require('url');
+
+let turbopackModuleIdx = 0;
+const turbopackServerModules = {};
+const turbopackClientModules = {};
+const turbopackErroredModules = {};
+const turbopackServerMap = {};
+const turbopackClientMap = {};
+global.__turbopack_require__ = function (id) {
+  if (turbopackErroredModules[id]) {
+    throw turbopackErroredModules[id];
+  }
+  return turbopackClientModules[id] || turbopackServerModules[id];
+};
+
+const Server = require('react-server-dom-turbopack/server');
+const registerClientReference = Server.registerClientReference;
+const registerServerReference = Server.registerServerReference;
+const createClientModuleProxy = Server.createClientModuleProxy;
+
+exports.turbopackMap = turbopackClientMap;
+exports.turbopackModules = turbopackClientModules;
+exports.turbopackServerMap = turbopackServerMap;
+exports.moduleLoading = {
+  prefix: '/prefix/',
+};
+
+exports.clientExports = function clientExports(moduleExports, chunkUrl) {
+  const chunks = [];
+  if (chunkUrl !== undefined) {
+    chunks.push(chunkUrl);
+  }
+  const idx = '' + turbopackModuleIdx++;
+  turbopackClientModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+  turbopackClientMap[path] = {
+    id: idx,
+    chunks,
+    name: '*',
+  };
+  // We only add this if this test is testing ESM compat.
+  if ('__esModule' in moduleExports) {
+    turbopackClientMap[path + '#'] = {
+      id: idx,
+      chunks,
+      name: '',
+    };
+  }
+  if (typeof moduleExports.then === 'function') {
+    moduleExports.then(
+      asyncModuleExports => {
+        for (const name in asyncModuleExports) {
+          turbopackClientMap[path + '#' + name] = {
+            id: idx,
+            chunks,
+            name: name,
+          };
+        }
+      },
+      () => {},
+    );
+  }
+  if ('split' in moduleExports) {
+    // If we're testing module splitting, we encode this name in a separate module id.
+    const splitIdx = '' + turbopackModuleIdx++;
+    turbopackClientModules[splitIdx] = {
+      s: moduleExports.split,
+    };
+    turbopackClientMap[path + '#split'] = {
+      id: splitIdx,
+      chunks,
+      name: 's',
+    };
+  }
+  return createClientModuleProxy(path);
+};
+
+exports.clientExportsESM = function clientExportsESM(
+  moduleExports,
+  options?: {forceClientModuleProxy?: boolean} = {},
+) {
+  const chunks = [];
+  const idx = '' + turbopackModuleIdx++;
+  turbopackClientModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+
+  const createClientReferencesForExports = ({exports, async}) => {
+    turbopackClientMap[path] = {
+      id: idx,
+      chunks,
+      name: '*',
+      async: true,
+    };
+
+    if (options.forceClientModuleProxy) {
+      return createClientModuleProxy(path);
+    }
+
+    if (typeof exports === 'object') {
+      const references = {};
+
+      for (const name in exports) {
+        const id = path + '#' + name;
+        turbopackClientMap[path + '#' + name] = {
+          id: idx,
+          chunks,
+          name: name,
+          async,
+        };
+        references[name] = registerClientReference(() => {}, id, name);
+      }
+
+      return references;
+    }
+
+    return registerClientReference(() => {}, path, '*');
+  };
+
+  if (
+    moduleExports &&
+    typeof moduleExports === 'object' &&
+    typeof moduleExports.then === 'function'
+  ) {
+    return moduleExports.then(
+      asyncModuleExports =>
+        createClientReferencesForExports({
+          exports: asyncModuleExports,
+          async: true,
+        }),
+      () => {},
+    );
+  }
+
+  return createClientReferencesForExports({exports: moduleExports});
+};
+
+// This tests server to server references. There's another case of client to server references.
+exports.serverExports = function serverExports(moduleExports) {
+  const idx = '' + turbopackModuleIdx++;
+  turbopackServerModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+  turbopackServerMap[path] = {
+    id: idx,
+    chunks: [],
+    name: '*',
+  };
+  // We only add this if this test is testing ESM compat.
+  if ('__esModule' in moduleExports) {
+    turbopackServerMap[path + '#'] = {
+      id: idx,
+      chunks: [],
+      name: '',
+    };
+  }
+  if ('split' in moduleExports) {
+    // If we're testing module splitting, we encode this name in a separate module id.
+    const splitIdx = '' + turbopackModuleIdx++;
+    turbopackServerModules[splitIdx] = {
+      s: moduleExports.split,
+    };
+    turbopackServerMap[path + '#split'] = {
+      id: splitIdx,
+      chunks: [],
+      name: 's',
+    };
+  }
+
+  if (typeof exports === 'function') {
+    // The module exports a function directly,
+    registerServerReference(
+      (exports: any),
+      idx,
+      // Represents the whole Module object instead of a particular import.
+      null,
+    );
+  } else {
+    const keys = Object.keys(exports);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const value = exports[keys[i]];
+      if (typeof value === 'function') {
+        registerServerReference((value: any), idx, key);
+      }
+    }
+  }
+
+  return moduleExports;
+};
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js
new file mode 100644
index 00000000000..2c26859280a
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js
@@ -0,0 +1,270 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactDebugInfo,
+} from 'shared/ReactTypes';
+
+import type {
+  ImportMetadata,
+  ImportManifestEntry,
+} from '../shared/ReactFlightImportMetadata';
+import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  ID,
+  CHUNKS,
+  NAME,
+  isAsyncImport,
+} from '../shared/ReactFlightImportMetadata';
+
+import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  loadChunk,
+  addChunkDebugInfo,
+} from 'react-client/src/ReactFlightClientConfig';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+export type ServerConsumerModuleMap = null | {
+  [clientId: string]: {
+    [clientExportName: string]: ClientReferenceManifestEntry,
+  },
+};
+
+export type ServerManifest = {
+  [id: string]: ImportManifestEntry,
+};
+
+export type ServerReferenceId = string;
+
+export opaque type ClientReferenceManifestEntry = ImportManifestEntry;
+export opaque type ClientReferenceMetadata = ImportMetadata;
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = ClientReferenceMetadata;
+
+// The reason this function needs to defined here in this file instead of just
+// being exported directly from the TurbopackDestination... file is because the
+// ClientReferenceMetadata is opaque and we can't unwrap it there.
+// This should get inlined and we could also just implement an unwrapping function
+// though that risks it getting used in places it shouldn't be. This is unfortunate
+// but currently it seems to be the best option we have.
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  prepareDestinationWithChunks(moduleLoading, metadata[CHUNKS], nonce);
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: ServerConsumerModuleMap,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  if (bundlerConfig) {
+    const moduleExports = bundlerConfig[metadata[ID]];
+    let resolvedModuleData = moduleExports && moduleExports[metadata[NAME]];
+    let name;
+    if (resolvedModuleData) {
+      // The potentially aliased name.
+      name = resolvedModuleData.name;
+    } else {
+      // If we don't have this specific name, we might have the full module.
+      resolvedModuleData = moduleExports && moduleExports['*'];
+      if (!resolvedModuleData) {
+        throw new Error(
+          'Could not find the module "' +
+            metadata[ID] +
+            '" in the React Server Consumer Manifest. ' +
+            'This is probably a bug in the React Server Components bundler.',
+        );
+      }
+      name = metadata[NAME];
+    }
+    if (isAsyncImport(metadata)) {
+      return [
+        resolvedModuleData.id,
+        resolvedModuleData.chunks,
+        name,
+        1 /* async */,
+      ];
+    } else {
+      return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+    }
+  }
+  return metadata;
+}
+
+export function resolveServerReference<T>(
+  bundlerConfig: ServerManifest,
+  id: ServerReferenceId,
+): ClientReference<T> {
+  let name = '';
+  let resolvedModuleData = bundlerConfig[id];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = id.lastIndexOf('#');
+    if (idx !== -1) {
+      name = id.slice(idx + 1);
+      resolvedModuleData = bundlerConfig[id.slice(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          id +
+          '" in the React Server Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+  }
+  if (resolvedModuleData.async) {
+    // If the module is marked as async in a Client Reference, we don't actually care.
+    // What matters is whether the consumer wants to unwrap it or not.
+    // For Server References, it is different because the consumer is completely internal
+    // to the bundler. So instead of passing it to each reference we can mark it in the
+    // manifest.
+    return [
+      resolvedModuleData.id,
+      resolvedModuleData.chunks,
+      name,
+      1 /* async */,
+    ];
+  }
+  return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+}
+
+function requireAsyncModule(id: string): null | Thenable<any> {
+  // We've already loaded all the chunks. We can require the module.
+  const promise = __turbopack_require__(id);
+  if (typeof promise.then !== 'function') {
+    // This wasn't a promise after all.
+    return null;
+  } else if (promise.status === 'fulfilled') {
+    // This module was already resolved earlier.
+    return null;
+  } else {
+    // Instrument the Promise to stash the result.
+    promise.then(
+      value => {
+        const fulfilledThenable: FulfilledThenable<mixed> = (promise: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      },
+      reason => {
+        const rejectedThenable: RejectedThenable<mixed> = (promise: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = reason;
+      },
+    );
+    return promise;
+  }
+}
+
+// Turbopack will return cached promises for the same chunk.
+// We still want to keep track of which chunks we have already instrumented
+// and which chunks have already been loaded until Turbopack returns instrumented
+// thenables directly.
+const instrumentedChunks: WeakSet<Thenable<any>> = new WeakSet();
+const loadedChunks: WeakSet<Thenable<any>> = new WeakSet();
+
+function ignoreReject() {
+  // We rely on rejected promises to be handled by another listener.
+}
+// Start preloading the modules since we might need them soon.
+// This function doesn't suspend.
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  const chunks = metadata[CHUNKS];
+  const promises: Promise<any>[] = [];
+  for (let i = 0; i < chunks.length; i++) {
+    const chunkFilename = chunks[i];
+    const thenable = loadChunk(chunkFilename);
+    if (!loadedChunks.has(thenable)) {
+      promises.push(thenable);
+    }
+
+    if (!instrumentedChunks.has(thenable)) {
+      // $FlowFixMe[method-unbinding]
+      const resolve = loadedChunks.add.bind(loadedChunks, thenable);
+      thenable.then(resolve, ignoreReject);
+      instrumentedChunks.add(thenable);
+    }
+  }
+  if (isAsyncImport(metadata)) {
+    if (promises.length === 0) {
+      return requireAsyncModule(metadata[ID]);
+    } else {
+      return Promise.all(promises).then(() => {
+        return requireAsyncModule(metadata[ID]);
+      });
+    }
+  } else if (promises.length > 0) {
+    return Promise.all(promises);
+  } else {
+    return null;
+  }
+}
+
+// Actually require the module or suspend if it's not yet ready.
+// Increase priority if necessary.
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  let moduleExports = __turbopack_require__(metadata[ID]);
+  if (isAsyncImport(metadata)) {
+    if (typeof moduleExports.then !== 'function') {
+      // This wasn't a promise after all.
+    } else if (moduleExports.status === 'fulfilled') {
+      // This Promise should've been instrumented by preloadModule.
+      moduleExports = moduleExports.value;
+    } else {
+      throw moduleExports.reason;
+    }
+  }
+  if (metadata[NAME] === '*') {
+    // This is a placeholder value that represents that the caller imported this
+    // as a CommonJS module as is.
+    return moduleExports;
+  }
+  if (metadata[NAME] === '') {
+    // This is a placeholder value that represents that the caller accessed the
+    // default property of this if it was an ESM interop module.
+    return moduleExports.__esModule ? moduleExports.default : moduleExports;
+  }
+  if (hasOwnProperty.call(moduleExports, metadata[NAME])) {
+    return moduleExports[metadata[NAME]];
+  }
+  return (undefined: any);
+}
+
+export function getModuleDebugInfo<T>(
+  metadata: ClientReference<T>,
+): null | ReactDebugInfo {
+  if (!__DEV__) {
+    return null;
+  }
+  const chunks = metadata[CHUNKS];
+  const debugInfo: ReactDebugInfo = [];
+  let i = 0;
+  while (i < chunks.length) {
+    const chunkFilename = chunks[i++];
+    addChunkDebugInfo(debugInfo, chunkFilename);
+  }
+  return debugInfo;
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js
new file mode 100644
index 00000000000..b00fe3cb06f
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactDebugInfo,
+  ReactIOInfo,
+  ReactAsyncInfo,
+} from 'shared/ReactTypes';
+
+export function loadChunk(filename: string): Promise<mixed> {
+  return __turbopack_load_by_url__(filename);
+}
+
+// We cache ReactIOInfo across requests so that inner refreshes can dedupe with outer.
+const chunkIOInfoCache: Map<string, ReactIOInfo> = __DEV__
+  ? new Map()
+  : (null: any);
+
+export function addChunkDebugInfo(
+  target: ReactDebugInfo,
+  filename: string,
+): void {
+  if (!__DEV__) {
+    return;
+  }
+  let ioInfo = chunkIOInfoCache.get(filename);
+  if (ioInfo === undefined) {
+    let href;
+    try {
+      // $FlowFixMe
+      href = new URL(filename, document.baseURI).href;
+    } catch (_) {
+      href = filename;
+    }
+    let start = -1;
+    let end = -1;
+    let byteSize = 0;
+    // $FlowFixMe[method-unbinding]
+    if (typeof performance.getEntriesByType === 'function') {
+      // We may be able to collect the start and end time of this resource from Performance Observer.
+      const resourceEntries = performance.getEntriesByType('resource');
+      for (let i = 0; i < resourceEntries.length; i++) {
+        const resourceEntry = resourceEntries[i];
+        if (resourceEntry.name === href) {
+          start = resourceEntry.startTime;
+          end = start + resourceEntry.duration;
+          // $FlowFixMe[prop-missing]
+          byteSize = (resourceEntry.transferSize: any) || 0;
+        }
+      }
+    }
+    const value = Promise.resolve(href);
+    // $FlowFixMe
+    value.status = 'fulfilled';
+    // Is there some more useful representation for the chunk?
+    // $FlowFixMe
+    value.value = href;
+    // Create a fake stack frame that points to the beginning of the chunk. This is
+    // probably not source mapped so will link to the compiled source rather than
+    // any individual file that goes into the chunks.
+    const fakeStack = new Error('react-stack-top-frame');
+    if (fakeStack.stack.startsWith('Error: react-stack-top-frame')) {
+      // Looks like V8
+      fakeStack.stack =
+        'Error: react-stack-top-frame\n' +
+        // Add two frames since we always trim one off the top.
+        '    at Client Component Bundle (' +
+        href +
+        ':1:1)\n' +
+        '    at Client Component Bundle (' +
+        href +
+        ':1:1)';
+    } else {
+      // Looks like Firefox or Safari.
+      // Add two frames since we always trim one off the top.
+      fakeStack.stack =
+        'Client Component Bundle@' +
+        href +
+        ':1:1\n' +
+        'Client Component Bundle@' +
+        href +
+        ':1:1';
+    }
+    ioInfo = ({
+      name: 'script',
+      start: start,
+      end: end,
+      value: value,
+      debugStack: fakeStack,
+    }: ReactIOInfo);
+    if (byteSize > 0) {
+      // $FlowFixMe[cannot-write]
+      ioInfo.byteSize = byteSize;
+    }
+    chunkIOInfoCache.set(filename, ioInfo);
+  }
+  // We could dedupe the async info too but conceptually each request is its own await.
+  const asyncInfo: ReactAsyncInfo = {
+    awaited: ioInfo,
+  };
+  target.push(asyncInfo);
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js
new file mode 100644
index 00000000000..600f80c6fc7
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactDebugInfo} from 'shared/ReactTypes';
+
+export function loadChunk(filename: string): Promise<mixed> {
+  return __turbopack_load_by_url__(filename);
+}
+
+export function addChunkDebugInfo(
+  target: ReactDebugInfo,
+  filename: string,
+): void {
+  // We don't emit any debug info on the server since we assume the loading
+  // of the bundle is insignificant on the server.
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser.js
new file mode 100644
index 00000000000..60b9e87dbea
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ModuleLoading = null;
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  chunks: mixed,
+  nonce: ?string,
+) {
+  // In the browser we don't need to prepare our destination since the browser is the Destination
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js
new file mode 100644
index 00000000000..d68f0802aa5
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {preinitScriptForSSR} from 'react-client/src/ReactFlightClientConfig';
+
+export type ModuleLoading = null | {
+  prefix: string,
+  crossOrigin?: 'use-credentials' | '',
+};
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  // Chunks are single-indexed filenames
+  chunks: Array<string>,
+  nonce: ?string,
+) {
+  if (moduleLoading !== null) {
+    for (let i = 0; i < chunks.length; i++) {
+      preinitScriptForSSR(
+        moduleLoading.prefix + chunks[i],
+        nonce,
+        moduleLoading.crossOrigin,
+      );
+    }
+  }
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
new file mode 100644
index 00000000000..0bf61500198
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  DebugChannelCallback,
+  FindSourceMapURLCallback,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  processStringChunk,
+  close,
+  injectIntoDevTools,
+} from 'react-client/src/ReactFlightClient';
+
+import {processReply} from 'react-client/src/ReactFlightReplyClient';
+
+export {
+  createServerReference,
+  registerServerReference,
+} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type CallServerCallback = <A, T>(string, args: A) => Promise<T>;
+
+export type Options = {
+  callServer?: CallServerCallback,
+  debugChannel?: {writable?: WritableStream, readable?: ReadableStream, ...},
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+};
+
+function createDebugCallbackFromWritableStream(
+  debugWritable: WritableStream,
+): DebugChannelCallback {
+  const textEncoder = new TextEncoder();
+  const writer = debugWritable.getWriter();
+  return message => {
+    if (message === '') {
+      writer.close();
+    } else {
+      // Note: It's important that this function doesn't close over the Response object or it can't be GC:ed.
+      // Therefore, we can't report errors from this write back to the Response object.
+      if (__DEV__) {
+        writer.write(textEncoder.encode(message + '\n')).catch(console.error);
+      }
+    }
+  };
+}
+
+function createResponseFromOptions(options: void | Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback:
+            options.debugChannel.writable !== undefined
+              ? createDebugCallbackFromWritableStream(
+                  options.debugChannel.writable,
+                )
+              : null,
+        }
+      : undefined;
+
+  return createResponse(
+    null,
+    null,
+    null,
+    options && options.callServer ? options.callServer : undefined,
+    undefined, // encodeFormAction
+    undefined, // nonce
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromUniversalStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+): void {
+  // This is the same as startReadingFromStream except this allows WebSocketStreams which
+  // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
+  // always allow streams with variable chunk types.
+  const streamState = createStreamState(response, stream);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    if (value instanceof ArrayBuffer) {
+      // WebSockets can produce ArrayBuffer values in ReadableStreams.
+      processBinaryChunk(response, streamState, new Uint8Array(value));
+    } else if (typeof value === 'string') {
+      // WebSockets can produce string values in ReadableStreams.
+      processStringChunk(response, streamState, value);
+    } else {
+      processBinaryChunk(response, streamState, value);
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromUniversalStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+export {createFromFetch, createFromReadableStream, encodeReply};
+
+if (__DEV__) {
+  injectIntoDevTools();
+}
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
new file mode 100644
index 00000000000..c6dd4ee94ad
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
@@ -0,0 +1,255 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  Response as FlightResponse,
+  FindSourceMapURLCallback,
+} from 'react-client/src/ReactFlightClient';
+
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import type {
+  ServerConsumerModuleMap,
+  ModuleLoading,
+  ServerManifest,
+} from 'react-client/src/ReactFlightClientConfig';
+
+type ServerConsumerManifest = {
+  moduleMap: ServerConsumerModuleMap,
+  moduleLoading: ModuleLoading,
+  serverModuleMap: null | ServerManifest,
+};
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+import {
+  processReply,
+  createServerReference as createServerReferenceImpl,
+} from 'react-client/src/ReactFlightReplyClient';
+
+export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: any,
+  callServer: any,
+): (...A) => Promise<T> {
+  return createServerReferenceImpl(id, noServerCall);
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  serverConsumerManifest: ServerConsumerManifest,
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Edge client we only support a single-direction debug channel.
+  debugChannel?: {readable?: ReadableStream, ...},
+};
+
+function createResponseFromOptions(options: Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback: null,
+        }
+      : undefined;
+
+  return createResponse(
+    options.serverConsumerManifest.moduleMap,
+    options.serverConsumerManifest.serverModuleMap,
+    options.serverConsumerManifest.moduleLoading,
+    noServerCall,
+    options.encodeFormAction,
+    typeof options.nonce === 'string' ? options.nonce : undefined,
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+export {createFromFetch, createFromReadableStream, encodeReply};
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
new file mode 100644
index 00000000000..8863b1bf1c6
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  FindSourceMapURLCallback,
+  Response,
+} from 'react-client/src/ReactFlightClient';
+
+import type {
+  ServerConsumerModuleMap,
+  ModuleLoading,
+  ServerManifest,
+} from 'react-client/src/ReactFlightClientConfig';
+
+type ServerConsumerManifest = {
+  moduleMap: ServerConsumerModuleMap,
+  moduleLoading: ModuleLoading,
+  serverModuleMap: null | ServerManifest,
+};
+
+import type {Readable} from 'stream';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+export * from './ReactFlightDOMClientEdge';
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
+};
+
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  onEnd: () => void,
+): void {
+  const streamState = createStreamState(response, stream);
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', onEnd);
+}
+
+function createFromNodeStream<T>(
+  stream: Readable,
+  serverConsumerManifest: ServerConsumerManifest,
+  options?: Options,
+): Thenable<T> {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {hasReadable: true, callback: null}
+      : undefined;
+
+  const response: Response = createResponse(
+    serverConsumerManifest.moduleMap,
+    serverConsumerManifest.serverModuleMap,
+    serverConsumerManifest.moduleLoading,
+    noServerCall,
+    options ? options.encodeFormAction : undefined,
+    options && typeof options.nonce === 'string' ? options.nonce : undefined,
+    undefined, // TODO: If encodeReply is supported, this should support temporaryReferences
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+
+  if (__DEV__ && options && options.debugChannel) {
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
+  } else {
+    startReadingFromStream(response, stream, close.bind(null, response));
+  }
+
+  return getRoot(response);
+}
+
+export {createFromNodeStream};
diff --git a/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.browser.js b/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.browser.js
new file mode 100644
index 00000000000..a3f15d0116c
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.edge.js b/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.edge.js
new file mode 100644
index 00000000000..14a8876953b
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientEdge';
diff --git a/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.node.js b/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.node.js
new file mode 100644
index 00000000000..8eb9daa35b6
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/client/react-flight-dom-client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
new file mode 100644
index 00000000000..7ad138e62f5
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Thenable} from 'shared/ReactTypes';
+import type {ClientManifest} from './ReactFlightServerConfigTurbopackBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  close,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightTurbopackReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigWeb';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type Options = {
+  debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: TemporaryReferenceSet,
+  onError?: (error: mixed) => void,
+};
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    turbopackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, controller);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      turbopackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  turbopackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    turbopackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
new file mode 100644
index 00000000000..52b4468dcd3
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Thenable} from 'shared/ReactTypes';
+import type {ClientManifest} from './ReactFlightServerConfigTurbopackBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  close,
+  getRoot,
+  reportGlobalError,
+  resolveField,
+  resolveFile,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightTurbopackReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigWeb';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type Options = {
+  debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: TemporaryReferenceSet,
+  onError?: (error: mixed) => void,
+};
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    turbopackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, controller);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      turbopackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  turbopackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    turbopackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  turbopackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    turbopackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
new file mode 100644
index 00000000000..2f4301d1120
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
@@ -0,0 +1,695 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {ClientManifest} from './ReactFlightServerConfigTurbopackBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+import type {Busboy} from 'busboy';
+import type {Writable} from 'stream';
+import type {Thenable} from 'shared/ReactTypes';
+
+import type {Duplex} from 'stream';
+
+import {Readable} from 'stream';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  reportGlobalError,
+  close,
+  resolveField,
+  resolveFile,
+  resolveFileInfo,
+  resolveFileChunk,
+  resolveFileComplete,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightTurbopackReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigNode';
+
+import {textEncoder} from 'react-server/src/ReactServerStreamConfigNode';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function createDrainHandler(destination: Destination, request: Request) {
+  return () => startFlowing(request, destination);
+}
+
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    abort(request, new Error(reason));
+  };
+}
+
+function startReadingFromDebugChannelReadable(
+  request: Request,
+  stream: Readable | WebSocket,
+): void {
+  const stringDecoder = createStringDecoder();
+  let lastWasPartial = false;
+  let stringBuffer = '';
+  function onData(chunk: string | Uint8Array) {
+    if (typeof chunk === 'string') {
+      if (lastWasPartial) {
+        stringBuffer += readFinalStringChunk(stringDecoder, new Uint8Array(0));
+        lastWasPartial = false;
+      }
+      stringBuffer += chunk;
+    } else {
+      const buffer: Uint8Array = (chunk: any);
+      stringBuffer += readPartialStringChunk(stringDecoder, buffer);
+      lastWasPartial = true;
+    }
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+  }
+  function onError(error: mixed) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: error,
+      }),
+    );
+  }
+  function onClose() {
+    closeDebugChannel(request);
+  }
+  if (
+    // $FlowFixMe[method-unbinding]
+    typeof stream.addEventListener === 'function' &&
+    // $FlowFixMe[method-unbinding]
+    typeof stream.binaryType === 'string'
+  ) {
+    const ws: WebSocket = (stream: any);
+    ws.binaryType = 'arraybuffer';
+    ws.addEventListener('message', event => {
+      // $FlowFixMe
+      onData(event.data);
+    });
+    ws.addEventListener('error', event => {
+      // $FlowFixMe
+      onError(event.error);
+    });
+    ws.addEventListener('close', onClose);
+  } else {
+    const readable: Readable = (stream: any);
+    readable.on('data', onData);
+    readable.on('error', onError);
+    readable.on('end', onClose);
+  }
+}
+
+type Options = {
+  debugChannel?: Readable | Writable | Duplex | WebSocket,
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+};
+
+type PipeableStream = {
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+function renderToPipeableStream(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): PipeableStream {
+  const debugChannel = __DEV__ && options ? options.debugChannel : undefined;
+  const debugChannelReadable: void | Readable | WebSocket =
+    __DEV__ &&
+    debugChannel !== undefined &&
+    // $FlowFixMe[method-unbinding]
+    (typeof debugChannel.read === 'function' ||
+      typeof debugChannel.readyState === 'number')
+      ? (debugChannel: any)
+      : undefined;
+  const debugChannelWritable: void | Writable =
+    __DEV__ && debugChannel !== undefined
+      ? // $FlowFixMe[method-unbinding]
+        typeof debugChannel.write === 'function'
+        ? (debugChannel: any)
+        : // $FlowFixMe[method-unbinding]
+          typeof debugChannel.send === 'function'
+          ? createFakeWritableFromWebSocket((debugChannel: any))
+          : undefined
+      : undefined;
+  const request = createRequest(
+    model,
+    turbopackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannel !== undefined,
+  );
+  let hasStartedFlowing = false;
+  startWork(request);
+  if (debugChannelWritable !== undefined) {
+    startFlowingDebug(request, debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadable(request, debugChannelReadable);
+  }
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      // We don't close until the debug channel closes.
+      if (!__DEV__ || debugChannelReadable === undefined) {
+        destination.on(
+          'close',
+          createCancelHandler(request, 'The destination stream closed early.'),
+        );
+      }
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+function createFakeWritableFromWebSocket(webSocket: WebSocket): Writable {
+  return ({
+    write(chunk: string | Uint8Array) {
+      webSocket.send((chunk: any));
+      return true;
+    },
+    end() {
+      webSocket.close();
+    },
+    destroy(reason) {
+      if (typeof reason === 'object' && reason !== null) {
+        reason = reason.message;
+      }
+      if (typeof reason === 'string') {
+        webSocket.close(1011, reason);
+      } else {
+        webSocket.close(1011);
+      }
+    },
+  }: any);
+}
+
+function createFakeWritableFromReadableStreamController(
+  controller: ReadableStreamController,
+): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      if (typeof chunk === 'string') {
+        chunk = textEncoder.encode(chunk);
+      }
+      controller.enqueue(chunk);
+      // in web streams there is no backpressure so we can always write more
+      return true;
+    },
+    end() {
+      controller.close();
+    },
+    destroy(error) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof controller.error === 'function') {
+        // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+        controller.error(error);
+      } else {
+        controller.close();
+      }
+    },
+  }: any);
+}
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Omit<Options, 'debugChannel'> & {
+    debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+    signal?: AbortSignal,
+  },
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    turbopackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    let debugWritable: Writable;
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        start: (controller): ?Promise<void> => {
+          debugWritable =
+            createFakeWritableFromReadableStreamController(controller);
+        },
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, debugWritable);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  let writable: Writable;
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        writable = createFakeWritableFromReadableStreamController(controller);
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, writable);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+function createFakeWritableFromNodeReadable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritableFromNodeReadable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createPrerenderRequest(
+      model,
+      turbopackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function prerender(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options & {
+    signal?: AbortSignal,
+  },
+): Promise<{
+  prelude: ReadableStream,
+}> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      let writable: Writable;
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      turbopackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReplyFromBusboy<T>(
+  busboyStream: Busboy,
+  turbopackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const response = createResponse(
+    turbopackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+  let pendingFiles = 0;
+  const queuedFields: Array<string> = [];
+  busboyStream.on('field', (name, value) => {
+    if (pendingFiles > 0) {
+      // Because the 'end' event fires two microtasks after the next 'field'
+      // we would resolve files and fields out of order. To handle this properly
+      // we queue any fields we receive until the previous file is done.
+      queuedFields.push(name, value);
+    } else {
+      try {
+        resolveField(response, name, value);
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    }
+  });
+  busboyStream.on('file', (name, value, {filename, encoding, mimeType}) => {
+    if (encoding.toLowerCase() === 'base64') {
+      busboyStream.destroy(
+        new Error(
+          "React doesn't accept base64 encoded file uploads because we don't expect " +
+            "form data passed from a browser to ever encode data that way. If that's " +
+            'the wrong assumption, we can easily fix it.',
+        ),
+      );
+      return;
+    }
+    pendingFiles++;
+    const file = resolveFileInfo(response, name, filename, mimeType);
+    value.on('data', chunk => {
+      resolveFileChunk(response, file, chunk);
+    });
+    value.on('end', () => {
+      try {
+        resolveFileComplete(response, name, file);
+        pendingFiles--;
+        if (pendingFiles === 0) {
+          // Release any queued fields
+          for (let i = 0; i < queuedFields.length; i += 2) {
+            resolveField(response, queuedFields[i], queuedFields[i + 1]);
+          }
+          queuedFields.length = 0;
+        }
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    });
+  });
+  busboyStream.on('finish', () => {
+    close(response);
+  });
+  busboyStream.on('error', err => {
+    reportGlobalError(
+      response,
+      // $FlowFixMe[incompatible-call] types Error and mixed are incompatible
+      err,
+    );
+  });
+  return getRoot(response);
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  turbopackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    turbopackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  turbopackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    turbopackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js b/packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js
new file mode 100644
index 00000000000..219391f8f81
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+import type {
+  ImportMetadata,
+  ImportManifestEntry,
+} from '../shared/ReactFlightImportMetadata';
+
+import type {
+  ClientReference,
+  ServerReference,
+} from '../ReactFlightTurbopackReferences';
+
+export type {ClientReference, ServerReference};
+
+export type ClientManifest = {
+  [id: string]: ClientReferenceManifestEntry,
+};
+
+export type ServerReferenceId = string;
+
+export type ClientReferenceMetadata = ImportMetadata;
+export opaque type ClientReferenceManifestEntry = ImportManifestEntry;
+
+export type ClientReferenceKey = string;
+
+export {
+  isClientReference,
+  isServerReference,
+} from '../ReactFlightTurbopackReferences';
+
+export function getClientReferenceKey(
+  reference: ClientReference<any>,
+): ClientReferenceKey {
+  return reference.$$async ? reference.$$id + '#async' : reference.$$id;
+}
+
+export function resolveClientReferenceMetadata<T>(
+  config: ClientManifest,
+  clientReference: ClientReference<T>,
+): ClientReferenceMetadata {
+  const modulePath = clientReference.$$id;
+  let name = '';
+  let resolvedModuleData = config[modulePath];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = modulePath.lastIndexOf('#');
+    if (idx !== -1) {
+      name = modulePath.slice(idx + 1);
+      resolvedModuleData = config[modulePath.slice(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          modulePath +
+          '" in the React Client Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+  }
+  if (resolvedModuleData.async === true && clientReference.$$async === true) {
+    throw new Error(
+      'The module "' +
+        modulePath +
+        '" is marked as an async ESM module but was loaded as a CJS proxy. ' +
+        'This is probably a bug in the React Server Components bundler.',
+    );
+  }
+  if (resolvedModuleData.async === true || clientReference.$$async === true) {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];
+  } else {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+  }
+}
+
+export function getServerReferenceId<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): ServerReferenceId {
+  return serverReference.$$id;
+}
+
+export function getServerReferenceBoundArguments<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): null | Array<ReactClientValue> {
+  return serverReference.$$bound;
+}
+
+export function getServerReferenceLocation<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): void | Error {
+  return serverReference.$$location;
+}
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
new file mode 100644
index 00000000000..d8373ec551b
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
new file mode 100644
index 00000000000..e103ff76191
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000..3c2b9e512c7
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js b/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js
new file mode 100644
index 00000000000..7cfce93deb2
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ImportManifestEntry = {
+  id: string,
+  // chunks is an array of filenames
+  chunks: Array<string>,
+  name: string,
+  async?: boolean,
+};
+
+// This is the parsed shape of the wire format which is why it is
+// condensed to only the essentialy information
+export type ImportMetadata =
+  | [
+      /* id */ string,
+      /* chunk filenames */ Array<string>,
+      /* name */ string,
+      /* async */ 1,
+    ]
+  | [/* id */ string, /* chunk filenames */ Array<string>, /* name */ string];
+
+export const ID = 0;
+export const CHUNKS = 1;
+export const NAME = 2;
+// export const ASYNC = 3;
+
+// This logic is correct because currently only include the 4th tuple member
+// when the module is async. If that changes we will need to actually assert
+// the value is true. We don't index into the 4th slot because flow does not
+// like the potential out of bounds access
+export function isAsyncImport(metadata: ImportMetadata): boolean {
+  return metadata.length === 4;
+}
diff --git a/packages/react-server-dom-turbopack/static.browser.js b/packages/react-server-dom-turbopack/static.browser.js
new file mode 100644
index 00000000000..25897891632
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerender} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-turbopack/static.edge.js b/packages/react-server-dom-turbopack/static.edge.js
new file mode 100644
index 00000000000..a39d54c73f5
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerender} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-turbopack/static.js b/packages/react-server-dom-turbopack/static.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-turbopack/static.node.js b/packages/react-server-dom-turbopack/static.node.js
new file mode 100644
index 00000000000..78e70a1cf4c
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.node.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  prerender,
+  prerenderToNodeStream,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-unbundled/README.md b/packages/react-server-dom-unbundled/README.md
new file mode 100644
index 00000000000..1df84033b48
--- /dev/null
+++ b/packages/react-server-dom-unbundled/README.md
@@ -0,0 +1,5 @@
+# react-server-dom-unbundled
+
+Test-only React Flight bindings for DOM using Node.js.
+
+This only exists for internal testing.
diff --git a/packages/react-server-dom-unbundled/client.js b/packages/react-server-dom-unbundled/client.js
new file mode 100644
index 00000000000..c3ec7662d6e
--- /dev/null
+++ b/packages/react-server-dom-unbundled/client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.node';
diff --git a/packages/react-server-dom-unbundled/esm/package.json b/packages/react-server-dom-unbundled/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-unbundled/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-unbundled/esm/react-server-dom-unbundled-node-loader.production.js b/packages/react-server-dom-unbundled/esm/react-server-dom-unbundled-node-loader.production.js
new file mode 100644
index 00000000000..da3948d4c0a
--- /dev/null
+++ b/packages/react-server-dom-unbundled/esm/react-server-dom-unbundled-node-loader.production.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../src/ReactFlightUnbundledNodeLoader.js';
diff --git a/packages/react-server-dom-unbundled/index.js b/packages/react-server-dom-unbundled/index.js
new file mode 100644
index 00000000000..233bab2d978
--- /dev/null
+++ b/packages/react-server-dom-unbundled/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error('Use react-server-dom-webpack/client instead.');
diff --git a/packages/react-server-dom-unbundled/node-register.js b/packages/react-server-dom-unbundled/node-register.js
new file mode 100644
index 00000000000..9727bc8d79b
--- /dev/null
+++ b/packages/react-server-dom-unbundled/node-register.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+module.exports = require('./src/ReactFlightUnbundledNodeRegister');
diff --git a/packages/react-server-dom-unbundled/npm/client.js b/packages/react-server-dom-unbundled/npm/client.js
new file mode 100644
index 00000000000..5fd8000b1cf
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/client.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-unbundled-client.node.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-unbundled-client.node.development.js');
+}
diff --git a/packages/react-server-dom-unbundled/npm/esm/package.json b/packages/react-server-dom-unbundled/npm/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-unbundled/npm/index.js b/packages/react-server-dom-unbundled/npm/index.js
new file mode 100644
index 00000000000..42ff0d74366
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+throw new Error('Use react-server-dom-unbundled/client instead.');
diff --git a/packages/react-server-dom-unbundled/npm/node-register.js b/packages/react-server-dom-unbundled/npm/node-register.js
new file mode 100644
index 00000000000..a354e8b2ff1
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/node-register.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-server-dom-unbundled-node-register.js');
diff --git a/packages/react-server-dom-unbundled/npm/server.js b/packages/react-server-dom-unbundled/npm/server.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/server.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-unbundled/npm/server.node.js b/packages/react-server-dom-unbundled/npm/server.node.js
new file mode 100644
index 00000000000..20164d88d25
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/server.node.js
@@ -0,0 +1,20 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-unbundled-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-unbundled-server.node.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-unbundled/npm/static.js b/packages/react-server-dom-unbundled/npm/static.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-unbundled/npm/static.node.js b/packages/react-server-dom-unbundled/npm/static.node.js
new file mode 100644
index 00000000000..dd62382b198
--- /dev/null
+++ b/packages/react-server-dom-unbundled/npm/static.node.js
@@ -0,0 +1,11 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-unbundled-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-unbundled-server.node.development.js');
+}
+
+exports.prerender = s.prerender;
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-server-dom-unbundled/package.json b/packages/react-server-dom-unbundled/package.json
new file mode 100644
index 00000000000..b3836d895f6
--- /dev/null
+++ b/packages/react-server-dom-unbundled/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "react-server-dom-unbundled",
+  "description": "React Server Components bindings for DOM using Node.js. This only exists for internal testing.",
+  "version": "0.0.0",
+  "private": true,
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "client.js",
+    "server.js",
+    "server.node.js",
+    "static.js",
+    "static.node.js",
+    "node-register.js",
+    "cjs/",
+    "esm/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": {
+      "react-server": "./server.node.js",
+      "default": "./server.js"
+    },
+    "./server.node": "./server.node.js",
+    "./static": {
+      "react-server": "./static.node.js",
+      "default": "./static.js"
+    },
+    "./static.node": "./static.node.js",
+    "./node-loader": "./esm/react-server-dom-unbundled-node-loader.production.js",
+    "./node-register": "./node-register.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "acorn-loose": "^8.3.0",
+    "webpack-sources": "^3.2.0"
+  }
+}
diff --git a/packages/react-server-dom-unbundled/server.js b/packages/react-server-dom-unbundled/server.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-unbundled/server.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-unbundled/server.node.js b/packages/react-server-dom-unbundled/server.node.js
new file mode 100644
index 00000000000..bd00ba7275c
--- /dev/null
+++ b/packages/react-server-dom-unbundled/server.node.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js b/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js
new file mode 100644
index 00000000000..9799acc3a07
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js
@@ -0,0 +1,804 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as acorn from 'acorn-loose';
+
+import readMappings from 'webpack-sources/lib/helpers/readMappings.js';
+import createMappingsSerializer from 'webpack-sources/lib/helpers/createMappingsSerializer.js';
+
+type ResolveContext = {
+  conditions: Array<string>,
+  parentURL: string | void,
+};
+
+type ResolveFunction = (
+  string,
+  ResolveContext,
+  ResolveFunction,
+) => {url: string} | Promise<{url: string}>;
+
+type GetSourceContext = {
+  format: string,
+};
+
+type GetSourceFunction = (
+  string,
+  GetSourceContext,
+  GetSourceFunction,
+) => Promise<{source: Source}>;
+
+type TransformSourceContext = {
+  format: string,
+  url: string,
+};
+
+type TransformSourceFunction = (
+  Source,
+  TransformSourceContext,
+  TransformSourceFunction,
+) => Promise<{source: Source}>;
+
+type LoadContext = {
+  conditions: Array<string>,
+  format: string | null | void,
+  importAssertions: Object,
+};
+
+type LoadFunction = (
+  string,
+  LoadContext,
+  LoadFunction,
+) => Promise<{format: string, shortCircuit?: boolean, source: Source}>;
+
+type Source = string | ArrayBuffer | Uint8Array;
+
+let warnedAboutConditionsFlag = false;
+
+let stashedGetSource: null | GetSourceFunction = null;
+let stashedResolve: null | ResolveFunction = null;
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  defaultResolve: ResolveFunction,
+): Promise<{url: string}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedResolve = defaultResolve;
+
+  if (!context.conditions.includes('react-server')) {
+    context = {
+      ...context,
+      conditions: [...context.conditions, 'react-server'],
+    };
+    if (!warnedAboutConditionsFlag) {
+      warnedAboutConditionsFlag = true;
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.warn(
+        'You did not run Node.js with the `--conditions react-server` flag. ' +
+          'Any "react-server" override will only work with ESM imports.',
+      );
+    }
+  }
+  return await defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function getSource(
+  url: string,
+  context: GetSourceContext,
+  defaultGetSource: GetSourceFunction,
+): Promise<{source: Source}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedGetSource = defaultGetSource;
+  return defaultGetSource(url, context, defaultGetSource);
+}
+
+type ExportedEntry = {
+  localName: string,
+  exportedName: string,
+  type: null | string,
+  loc: {
+    start: {line: number, column: number},
+    end: {line: number, column: number},
+  },
+  originalLine: number,
+  originalColumn: number,
+  originalSource: number,
+  nameIndex: number,
+};
+
+function addExportedEntry(
+  exportedEntries: Array<ExportedEntry>,
+  localNames: Set<string>,
+  localName: string,
+  exportedName: string,
+  type: null | 'function',
+  loc: {
+    start: {line: number, column: number},
+    end: {line: number, column: number},
+  },
+) {
+  if (localNames.has(localName)) {
+    // If the same local name is exported more than once, we only need one of the names.
+    return;
+  }
+  exportedEntries.push({
+    localName,
+    exportedName,
+    type,
+    loc,
+    originalLine: -1,
+    originalColumn: -1,
+    originalSource: -1,
+    nameIndex: -1,
+  });
+}
+
+function addLocalExportedNames(
+  exportedEntries: Array<ExportedEntry>,
+  localNames: Set<string>,
+  node: any,
+) {
+  switch (node.type) {
+    case 'Identifier':
+      addExportedEntry(
+        exportedEntries,
+        localNames,
+        node.name,
+        node.name,
+        null,
+        node.loc,
+      );
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addLocalExportedNames(exportedEntries, localNames, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element)
+          addLocalExportedNames(exportedEntries, localNames, element);
+      }
+      return;
+    case 'Property':
+      addLocalExportedNames(exportedEntries, localNames, node.value);
+      return;
+    case 'AssignmentPattern':
+      addLocalExportedNames(exportedEntries, localNames, node.left);
+      return;
+    case 'RestElement':
+      addLocalExportedNames(exportedEntries, localNames, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addLocalExportedNames(exportedEntries, localNames, node.expression);
+      return;
+  }
+}
+
+function transformServerModule(
+  source: string,
+  program: any,
+  url: string,
+  sourceMap: any,
+  loader: LoadFunction,
+): string {
+  const body = program.body;
+
+  // This entry list needs to be in source location order.
+  const exportedEntries: Array<ExportedEntry> = [];
+  // Dedupe set.
+  const localNames: Set<string> = new Set();
+
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        // If export * is used, the other file needs to explicitly opt into "use server" too.
+        break;
+      case 'ExportDefaultDeclaration':
+        if (node.declaration.type === 'Identifier') {
+          addExportedEntry(
+            exportedEntries,
+            localNames,
+            node.declaration.name,
+            'default',
+            null,
+            node.declaration.loc,
+          );
+        } else if (node.declaration.type === 'FunctionDeclaration') {
+          if (node.declaration.id) {
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              node.declaration.id.name,
+              'default',
+              'function',
+              node.declaration.id.loc,
+            );
+          } else {
+            // TODO: This needs to be rewritten inline because it doesn't have a local name.
+          }
+        }
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addLocalExportedNames(
+                exportedEntries,
+                localNames,
+                declarations[j].id,
+              );
+            }
+          } else {
+            const name = node.declaration.id.name;
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              name,
+              name,
+
+              node.declaration.type === 'FunctionDeclaration'
+                ? 'function'
+                : null,
+              node.declaration.id.loc,
+            );
+          }
+        }
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            const specifier = specifiers[j];
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              specifier.local.name,
+              specifier.exported.name,
+              null,
+              specifier.local.loc,
+            );
+          }
+        }
+        continue;
+    }
+  }
+
+  let mappings =
+    sourceMap && typeof sourceMap.mappings === 'string'
+      ? sourceMap.mappings
+      : '';
+  let newSrc = source;
+
+  if (exportedEntries.length > 0) {
+    let lastSourceIndex = 0;
+    let lastOriginalLine = 0;
+    let lastOriginalColumn = 0;
+    let lastNameIndex = 0;
+    let sourceLineCount = 0;
+    let lastMappedLine = 0;
+
+    if (sourceMap) {
+      // We iterate source mapping entries and our matched exports in parallel to source map
+      // them to their original location.
+      let nextEntryIdx = 0;
+      let nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+      let nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+      readMappings(
+        mappings,
+        (
+          generatedLine: number,
+          generatedColumn: number,
+          sourceIndex: number,
+          originalLine: number,
+          originalColumn: number,
+          nameIndex: number,
+        ) => {
+          if (
+            generatedLine > nextEntryLine ||
+            (generatedLine === nextEntryLine &&
+              generatedColumn > nextEntryColumn)
+          ) {
+            // We're past the entry which means that the best match we have is the previous entry.
+            if (lastMappedLine === nextEntryLine) {
+              // Match
+              exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+              exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+              exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+              exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+            } else {
+              // Skip if we didn't have any mappings on the exported line.
+            }
+            nextEntryIdx++;
+            if (nextEntryIdx < exportedEntries.length) {
+              nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+              nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+            } else {
+              nextEntryLine = -1;
+              nextEntryColumn = -1;
+            }
+          }
+          lastMappedLine = generatedLine;
+          if (sourceIndex > -1) {
+            lastSourceIndex = sourceIndex;
+          }
+          if (originalLine > -1) {
+            lastOriginalLine = originalLine;
+          }
+          if (originalColumn > -1) {
+            lastOriginalColumn = originalColumn;
+          }
+          if (nameIndex > -1) {
+            lastNameIndex = nameIndex;
+          }
+        },
+      );
+      if (nextEntryIdx < exportedEntries.length) {
+        if (lastMappedLine === nextEntryLine) {
+          // Match
+          exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+          exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+          exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+          exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+        }
+      }
+
+      for (
+        let lastIdx = mappings.length - 1;
+        lastIdx >= 0 && mappings[lastIdx] === ';';
+        lastIdx--
+      ) {
+        // If the last mapped lines don't contain any segments, we don't get a callback from readMappings
+        // so we need to pad the number of mapped lines, with one for each empty line.
+        lastMappedLine++;
+      }
+
+      sourceLineCount = program.loc.end.line;
+      if (sourceLineCount < lastMappedLine) {
+        throw new Error(
+          'The source map has more mappings than there are lines.',
+        );
+      }
+      // If the original source string had more lines than there are mappings in the source map.
+      // Add some extra padding of unmapped lines so that any lines that we add line up.
+      for (
+        let extraLines = sourceLineCount - lastMappedLine;
+        extraLines > 0;
+        extraLines--
+      ) {
+        mappings += ';';
+      }
+    } else {
+      // If a file doesn't have a source map then we generate a blank source map that just
+      // contains the original content and segments pointing to the original lines.
+      sourceLineCount = 1;
+      let idx = -1;
+      while ((idx = source.indexOf('\n', idx + 1)) !== -1) {
+        sourceLineCount++;
+      }
+      mappings = 'AAAA' + ';AACA'.repeat(sourceLineCount - 1);
+      sourceMap = {
+        version: 3,
+        sources: [url],
+        sourcesContent: [source],
+        mappings: mappings,
+        sourceRoot: '',
+      };
+      lastSourceIndex = 0;
+      lastOriginalLine = sourceLineCount;
+      lastOriginalColumn = 0;
+      lastNameIndex = -1;
+      lastMappedLine = sourceLineCount;
+
+      for (let i = 0; i < exportedEntries.length; i++) {
+        // Point each entry to original location.
+        const entry = exportedEntries[i];
+        entry.originalSource = 0;
+        entry.originalLine = entry.loc.start.line;
+        // We use column zero since we do the short-hand line-only source maps above.
+        entry.originalColumn = 0; // entry.loc.start.column;
+      }
+    }
+
+    newSrc += '\n\n;';
+    newSrc +=
+      'import {registerServerReference} from "react-server-dom-webpack/server";\n';
+    if (mappings) {
+      mappings += ';;';
+    }
+
+    const createMapping = createMappingsSerializer();
+
+    // Create an empty mapping pointing to where we last left off to reset the counters.
+    let generatedLine = 1;
+    createMapping(
+      generatedLine,
+      0,
+      lastSourceIndex,
+      lastOriginalLine,
+      lastOriginalColumn,
+      lastNameIndex,
+    );
+    for (let i = 0; i < exportedEntries.length; i++) {
+      const entry = exportedEntries[i];
+      generatedLine++;
+      if (entry.type !== 'function') {
+        // We first check if the export is a function and if so annotate it.
+        newSrc += 'if (typeof ' + entry.localName + ' === "function") ';
+      }
+      newSrc += 'registerServerReference(' + entry.localName + ',';
+      newSrc += JSON.stringify(url) + ',';
+      newSrc += JSON.stringify(entry.exportedName) + ');\n';
+
+      mappings += createMapping(
+        generatedLine,
+        0,
+        entry.originalSource,
+        entry.originalLine,
+        entry.originalColumn,
+        entry.nameIndex,
+      );
+    }
+  }
+
+  if (sourceMap) {
+    // Override with an new mappings and serialize an inline source map.
+    sourceMap.mappings = mappings;
+    newSrc +=
+      '//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      Buffer.from(JSON.stringify(sourceMap)).toString('base64');
+  }
+
+  return newSrc;
+}
+
+function addExportNames(names: Array<string>, node: any) {
+  switch (node.type) {
+    case 'Identifier':
+      names.push(node.name);
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addExportNames(names, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element) addExportNames(names, element);
+      }
+      return;
+    case 'Property':
+      addExportNames(names, node.value);
+      return;
+    case 'AssignmentPattern':
+      addExportNames(names, node.left);
+      return;
+    case 'RestElement':
+      addExportNames(names, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addExportNames(names, node.expression);
+      return;
+  }
+}
+
+function resolveClientImport(
+  specifier: string,
+  parentURL: string,
+): {url: string} | Promise<{url: string}> {
+  // Resolve an import specifier as if it was loaded by the client. This doesn't use
+  // the overrides that this loader does but instead reverts to the default.
+  // This resolution algorithm will not necessarily have the same configuration
+  // as the actual client loader. It should mostly work and if it doesn't you can
+  // always convert to explicit exported names instead.
+  const conditions = ['node', 'import'];
+  if (stashedResolve === null) {
+    throw new Error(
+      'Expected resolve to have been called before transformSource',
+    );
+  }
+  return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
+}
+
+async function parseExportNamesInto(
+  body: any,
+  names: Array<string>,
+  parentURL: string,
+  loader: LoadFunction,
+): Promise<void> {
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        if (node.exported) {
+          addExportNames(names, node.exported);
+          continue;
+        } else {
+          const {url} = await resolveClientImport(node.source.value, parentURL);
+          const {source} = await loader(
+            url,
+            {format: 'module', conditions: [], importAssertions: {}},
+            loader,
+          );
+          if (typeof source !== 'string') {
+            throw new Error('Expected the transformed source to be a string.');
+          }
+          let childBody;
+          try {
+            childBody = acorn.parse(source, {
+              ecmaVersion: '2024',
+              sourceType: 'module',
+            }).body;
+          } catch (x) {
+            // eslint-disable-next-line react-internal/no-production-logging
+            console.error('Error parsing %s %s', url, x.message);
+            continue;
+          }
+          await parseExportNamesInto(childBody, names, url, loader);
+          continue;
+        }
+      case 'ExportDefaultDeclaration':
+        names.push('default');
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addExportNames(names, declarations[j].id);
+            }
+          } else {
+            addExportNames(names, node.declaration.id);
+          }
+        }
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            addExportNames(names, specifiers[j].exported);
+          }
+        }
+        continue;
+    }
+  }
+}
+
+async function transformClientModule(
+  program: any,
+  url: string,
+  sourceMap: any,
+  loader: LoadFunction,
+): Promise<string> {
+  const body = program.body;
+
+  const names: Array<string> = [];
+
+  await parseExportNamesInto(body, names, url, loader);
+
+  if (names.length === 0) {
+    return '';
+  }
+
+  let newSrc =
+    'import {registerClientReference} from "react-server-dom-webpack/server";\n';
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i];
+    if (name === 'default') {
+      newSrc += 'export default ';
+      newSrc += 'registerClientReference(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call the default export of ${url} from the server ` +
+            `but it's on the client. It's not possible to invoke a client function from ` +
+            `the server, it can only be rendered as a Component or passed to props of a ` +
+            `Client Component.`,
+        ) +
+        ');';
+    } else {
+      newSrc += 'export const ' + name + ' = ';
+      newSrc += 'registerClientReference(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call ${name}() from the server but ${name} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        ) +
+        ');';
+    }
+    newSrc += '},';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(name) + ');\n';
+  }
+
+  // TODO: Generate source maps for Client Reference functions so they can point to their
+  // original locations.
+  return newSrc;
+}
+
+async function loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
+  }
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  const result = await defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+  return {format: 'module', source: result.source};
+}
+
+async function transformModuleIfNeeded(
+  source: string,
+  url: string,
+  loader: LoadFunction,
+): Promise<string> {
+  // Do a quick check for the exact string. If it doesn't exist, don't
+  // bother parsing.
+  if (
+    source.indexOf('use client') === -1 &&
+    source.indexOf('use server') === -1
+  ) {
+    return source;
+  }
+
+  let sourceMappingURL = null;
+  let sourceMappingStart = 0;
+  let sourceMappingEnd = 0;
+  let sourceMappingLines = 0;
+
+  let program;
+  try {
+    program = acorn.parse(source, {
+      ecmaVersion: '2024',
+      sourceType: 'module',
+      locations: true,
+      onComment(
+        block: boolean,
+        text: string,
+        start: number,
+        end: number,
+        startLoc: {line: number, column: number},
+        endLoc: {line: number, column: number},
+      ) {
+        if (
+          text.startsWith('# sourceMappingURL=') ||
+          text.startsWith('@ sourceMappingURL=')
+        ) {
+          sourceMappingURL = text.slice(19);
+          sourceMappingStart = start;
+          sourceMappingEnd = end;
+          sourceMappingLines = endLoc.line - startLoc.line;
+        }
+      },
+    });
+  } catch (x) {
+    // eslint-disable-next-line react-internal/no-production-logging
+    console.error('Error parsing %s %s', url, x.message);
+    return source;
+  }
+
+  let useClient = false;
+  let useServer = false;
+
+  const body = program.body;
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    if (node.type !== 'ExpressionStatement' || !node.directive) {
+      break;
+    }
+    if (node.directive === 'use client') {
+      useClient = true;
+    }
+    if (node.directive === 'use server') {
+      useServer = true;
+    }
+  }
+
+  if (!useClient && !useServer) {
+    return source;
+  }
+
+  if (useClient && useServer) {
+    throw new Error(
+      'Cannot have both "use client" and "use server" directives in the same file.',
+    );
+  }
+
+  let sourceMap = null;
+  if (sourceMappingURL) {
+    const sourceMapResult = await loader(
+      sourceMappingURL,
+      // $FlowFixMe
+      {
+        format: 'json',
+        conditions: [],
+        importAssertions: {type: 'json'},
+        importAttributes: {type: 'json'},
+      },
+      loader,
+    );
+    const sourceMapString =
+      typeof sourceMapResult.source === 'string'
+        ? sourceMapResult.source
+        : // $FlowFixMe
+          sourceMapResult.source.toString('utf8');
+    sourceMap = JSON.parse(sourceMapString);
+
+    // Strip the source mapping comment. We'll re-add it below if needed.
+    source =
+      source.slice(0, sourceMappingStart) +
+      '\n'.repeat(sourceMappingLines) +
+      source.slice(sourceMappingEnd);
+  }
+
+  if (useClient) {
+    return transformClientModule(program, url, sourceMap, loader);
+  }
+
+  return transformServerModule(source, program, url, sourceMap, loader);
+}
+
+export async function transformSource(
+  source: Source,
+  context: TransformSourceContext,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}> {
+  const transformed = await defaultTransformSource(
+    source,
+    context,
+    defaultTransformSource,
+  );
+  if (context.format === 'module') {
+    const transformedSource = transformed.source;
+    if (typeof transformedSource !== 'string') {
+      throw new Error('Expected source to have been transformed to a string.');
+    }
+    const newSrc = await transformModuleIfNeeded(
+      transformedSource,
+      context.url,
+      (url: string, ctx: LoadContext, defaultLoad: LoadFunction) => {
+        return loadClientImport(url, defaultTransformSource);
+      },
+    );
+    return {source: newSrc};
+  }
+  return transformed;
+}
+
+export async function load(
+  url: string,
+  context: LoadContext,
+  defaultLoad: LoadFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    if (typeof result.source !== 'string') {
+      throw new Error('Expected source to have been loaded into a string.');
+    }
+    const newSrc = await transformModuleIfNeeded(
+      result.source,
+      url,
+      defaultLoad,
+    );
+    return {format: 'module', source: newSrc};
+  }
+  return result;
+}
diff --git a/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeRegister.js b/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeRegister.js
new file mode 100644
index 00000000000..5b4cd9de252
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeRegister.js
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 acorn = require('acorn-loose');
+
+const url = require('url');
+
+const Module = require('module');
+
+module.exports = function register() {
+  const Server: any = require('react-server-dom-unbundled/server');
+  const registerServerReference = Server.registerServerReference;
+  const createClientModuleProxy = Server.createClientModuleProxy;
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  const originalCompile = Module.prototype._compile;
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  Module.prototype._compile = function (
+    this: any,
+    content: string,
+    filename: string,
+  ): void {
+    // Do a quick check for the exact string. If it doesn't exist, don't
+    // bother parsing.
+    if (
+      content.indexOf('use client') === -1 &&
+      content.indexOf('use server') === -1
+    ) {
+      return originalCompile.apply(this, arguments);
+    }
+
+    let body;
+    try {
+      body = acorn.parse(content, {
+        ecmaVersion: '2024',
+        sourceType: 'source',
+      }).body;
+    } catch (x) {
+      console['error']('Error parsing %s %s', url, x.message);
+      return originalCompile.apply(this, arguments);
+    }
+
+    let useClient = false;
+    let useServer = false;
+    for (let i = 0; i < body.length; i++) {
+      const node = body[i];
+      if (node.type !== 'ExpressionStatement' || !node.directive) {
+        break;
+      }
+      if (node.directive === 'use client') {
+        useClient = true;
+      }
+      if (node.directive === 'use server') {
+        useServer = true;
+      }
+    }
+
+    if (!useClient && !useServer) {
+      return originalCompile.apply(this, arguments);
+    }
+
+    if (useClient && useServer) {
+      throw new Error(
+        'Cannot have both "use client" and "use server" directives in the same file.',
+      );
+    }
+
+    if (useClient) {
+      const moduleId: string = (url.pathToFileURL(filename).href: any);
+      this.exports = createClientModuleProxy(moduleId);
+    }
+
+    if (useServer) {
+      originalCompile.apply(this, arguments);
+
+      const moduleId: string = (url.pathToFileURL(filename).href: any);
+
+      const exports = this.exports;
+
+      // This module is imported server to server, but opts in to exposing functions by
+      // reference. If there are any functions in the export.
+      if (typeof exports === 'function') {
+        // The module exports a function directly,
+        registerServerReference(
+          (exports: any),
+          moduleId,
+          // Represents the whole Module object instead of a particular import.
+          null,
+        );
+      } else {
+        const keys = Object.keys(exports);
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i];
+          const value = exports[keys[i]];
+          if (typeof value === 'function') {
+            registerServerReference((value: any), moduleId, key);
+          }
+        }
+      }
+    }
+  };
+};
diff --git a/packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js b/packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js
new file mode 100644
index 00000000000..07646e18ec4
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js
@@ -0,0 +1,360 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+  $$async: boolean,
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  exportName: string,
+): ClientReference<T> {
+  return registerClientReferenceImpl(
+    proxyImplementation,
+    id + '#' + exportName,
+    false,
+  );
+}
+
+function registerClientReferenceImpl<T>(
+  proxyImplementation: any,
+  id: string,
+  async: boolean,
+): ClientReference<T> {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {value: CLIENT_REFERENCE_TAG},
+    $$id: {value: id},
+    $$async: {value: async},
+  });
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>): any {
+  // $FlowFixMe[incompatible-call]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
+    const args = ArraySlice.call(arguments, 1);
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      (__DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          }) as PropertyDescriptorMap,
+    );
+  }
+  return newFn;
+}
+
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
+export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+  exportName: null | string,
+): ServerReference<T> {
+  const $$typeof = {value: SERVER_REFERENCE_TAG};
+  const $$id = {
+    value: exportName === null ? id : id + '#' + exportName,
+    configurable: true,
+  };
+  const $$bound = {value: null, configurable: true};
+  return Object.defineProperties(
+    (reference: any),
+    __DEV__
+      ? ({
+          $$typeof,
+          $$id,
+          $$bound,
+          $$location: {
+            value: Error('react-stack-top-frame'),
+            configurable: true,
+          },
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        } as PropertyDescriptorMap)
+      : ({
+          $$typeof,
+          $$id,
+          $$bound,
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        } as PropertyDescriptorMap),
+  );
+}
+
+const PROMISE_PROTOTYPE = Promise.prototype;
+
+const deepProxyHandlers: Proxy$traps<mixed> = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        // These names are a little too common. We should probably have a way to
+        // have the Flight runtime extract the inner target instead.
+        return target.$$typeof;
+      case '$$id':
+        return target.$$id;
+      case '$$async':
+        return target.$$async;
+      case 'name':
+        return target.name;
+      case 'displayName':
+        return undefined;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+      case 'defaultProps':
+        return undefined;
+      // React looks for debugInfo on thenables.
+      case '_debugInfo':
+        return undefined;
+      // Avoid this attempting to be serialized.
+      case 'toJSON':
+        return undefined;
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+      case 'Provider':
+        throw new Error(
+          `Cannot render a Client Context Provider on the Server. ` +
+            `Instead, you can export a Client Component wrapper ` +
+            `that itself renders a Client Context Provider.`,
+        );
+      case 'then':
+        throw new Error(
+          `Cannot await or return from a thenable. ` +
+            `You cannot await a client module from a server component.`,
+        );
+    }
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const expression = String(target.name) + '.' + String(name);
+    throw new Error(
+      `Cannot access ${expression} on the server. ` +
+        'You cannot dot into a client module from a server component. ' +
+        'You can only pass the imported name through.',
+    );
+  },
+  set: function () {
+    throw new Error('Cannot assign to a client module from a server module.');
+  },
+};
+
+function getReference(target: Function, name: string | symbol): $FlowFixMe {
+  switch (name) {
+    // These names are read by the Flight runtime if you end up using the exports object.
+    case '$$typeof':
+      return target.$$typeof;
+    case '$$id':
+      return target.$$id;
+    case '$$async':
+      return target.$$async;
+    case 'name':
+      return target.name;
+    // We need to special case this because createElement reads it if we pass this
+    // reference.
+    case 'defaultProps':
+      return undefined;
+    // React looks for debugInfo on thenables.
+    case '_debugInfo':
+      return undefined;
+    // Avoid this attempting to be serialized.
+    case 'toJSON':
+      return undefined;
+    case Symbol.toPrimitive:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toPrimitive];
+    case Symbol.toStringTag:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toStringTag];
+    case '__esModule':
+      // Something is conditionally checking which export to use. We'll pretend to be
+      // an ESM compat module but then we'll check again on the client.
+      const moduleId = target.$$id;
+      target.default = registerClientReferenceImpl(
+        (function () {
+          throw new Error(
+            `Attempted to call the default export of ${moduleId} from the server ` +
+              `but it's on the client. It's not possible to invoke a client function from ` +
+              `the server, it can only be rendered as a Component or passed to props of a ` +
+              `Client Component.`,
+          );
+        }: any),
+        target.$$id + '#',
+        target.$$async,
+      );
+      return true;
+    case 'then':
+      if (target.then) {
+        // Use a cached value
+        return target.then;
+      }
+      if (!target.$$async) {
+        // If this module is expected to return a Promise (such as an AsyncModule) then
+        // we should resolve that with a client reference that unwraps the Promise on
+        // the client.
+
+        const clientReference: ClientReference<any> =
+          registerClientReferenceImpl(({}: any), target.$$id, true);
+        const proxy = new Proxy(clientReference, proxyHandlers);
+
+        // Treat this as a resolved Promise for React's use()
+        target.status = 'fulfilled';
+        target.value = proxy;
+
+        const then = (target.then = registerClientReferenceImpl(
+          (function then(resolve, reject: any) {
+            // Expose to React.
+            return Promise.resolve(resolve(proxy));
+          }: any),
+          // If this is not used as a Promise but is treated as a reference to a `.then`
+          // export then we should treat it as a reference to that name.
+          target.$$id + '#then',
+          false,
+        ));
+        return then;
+      } else {
+        // Since typeof .then === 'function' is a feature test we'd continue recursing
+        // indefinitely if we return a function. Instead, we return an object reference
+        // if we check further.
+        return undefined;
+      }
+  }
+  if (typeof name === 'symbol') {
+    throw new Error(
+      'Cannot read Symbol exports. Only named exports are supported on a client module ' +
+        'imported on the server.',
+    );
+  }
+  let cachedReference = target[name];
+  if (!cachedReference) {
+    const reference: ClientReference<any> = registerClientReferenceImpl(
+      (function () {
+        throw new Error(
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          `Attempted to call ${String(name)}() from the server but ${String(
+            name,
+          )} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        );
+      }: any),
+      target.$$id + '#' + name,
+      target.$$async,
+    );
+    Object.defineProperty((reference: any), 'name', {value: name});
+    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+  }
+  return cachedReference;
+}
+
+const proxyHandlers = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ): $FlowFixMe {
+    return getReference(target, name);
+  },
+  getOwnPropertyDescriptor: function (
+    target: Function,
+    name: string | symbol,
+  ): $FlowFixMe {
+    let descriptor = Object.getOwnPropertyDescriptor(target, name);
+    if (!descriptor) {
+      descriptor = {
+        value: getReference(target, name),
+        writable: false,
+        configurable: false,
+        enumerable: false,
+      };
+      Object.defineProperty(target, name, descriptor);
+    }
+    return descriptor;
+  },
+  getPrototypeOf(target: Function): Object {
+    // Pretend to be a Promise in case anyone asks.
+    return PROMISE_PROTOTYPE;
+  },
+  set: function (): empty {
+    throw new Error('Cannot assign to a client module from a server module.');
+  },
+};
+
+export function createClientModuleProxy<T>(
+  moduleId: string,
+): ClientReference<T> {
+  const clientReference: ClientReference<T> = registerClientReferenceImpl(
+    ({}: any),
+    // Represents the whole Module object instead of a particular import.
+    moduleId,
+    false,
+  );
+  return new Proxy(clientReference, proxyHandlers);
+}
diff --git a/packages/react-server-dom-unbundled/src/client/ReactFlightClientConfigBundlerNode.js b/packages/react-server-dom-unbundled/src/client/ReactFlightClientConfigBundlerNode.js
new file mode 100644
index 00000000000..63049b2ca40
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/client/ReactFlightClientConfigBundlerNode.js
@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
+import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  ID,
+  CHUNKS,
+  NAME,
+  isAsyncImport,
+} from '../shared/ReactFlightImportMetadata';
+import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+export type ServerConsumerModuleMap = {
+  [clientId: string]: {
+    [clientExportName: string]: ClientReference<any>,
+  },
+};
+
+export type ServerManifest = void;
+
+export type ServerReferenceId = string;
+
+export opaque type ClientReferenceMetadata = ImportMetadata;
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = {
+  specifier: string,
+  name: string,
+  async?: boolean,
+};
+
+// The reason this function needs to defined here in this file instead of just
+// being exported directly from the WebpackDestination... file is because the
+// ClientReferenceMetadata is opaque and we can't unwrap it there.
+// This should get inlined and we could also just implement an unwrapping function
+// though that risks it getting used in places it shouldn't be. This is unfortunate
+// but currently it seems to be the best option we have.
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  prepareDestinationWithChunks(moduleLoading, metadata[CHUNKS], nonce);
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: ServerConsumerModuleMap,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  const moduleExports = bundlerConfig[metadata[ID]];
+  let resolvedModuleData = moduleExports && moduleExports[metadata[NAME]];
+  let name;
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // If we don't have this specific name, we might have the full module.
+    resolvedModuleData = moduleExports && moduleExports['*'];
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          metadata[ID] +
+          '" in the React Server Consumer Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+    name = metadata[NAME];
+  }
+  return {
+    specifier: resolvedModuleData.specifier,
+    name: name,
+    async: isAsyncImport(metadata),
+  };
+}
+
+export function resolveServerReference<T>(
+  bundlerConfig: ServerManifest,
+  id: ServerReferenceId,
+): ClientReference<T> {
+  const idx = id.lastIndexOf('#');
+  const specifier = id.slice(0, idx);
+  const name = id.slice(idx + 1);
+  return {specifier, name};
+}
+
+const asyncModuleCache: Map<string, Thenable<any>> = new Map();
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  const existingPromise = asyncModuleCache.get(metadata.specifier);
+  if (existingPromise) {
+    if (existingPromise.status === 'fulfilled') {
+      return null;
+    }
+    return existingPromise;
+  } else {
+    // $FlowFixMe[unsupported-syntax]
+    let modulePromise: Promise<T> = import(metadata.specifier);
+    if (metadata.async) {
+      // If the module is async, it must have been a CJS module.
+      // CJS modules are accessed through the default export in
+      // Node.js so we have to get the default export to get the
+      // full module exports.
+      modulePromise = modulePromise.then(function (value) {
+        return (value: any).default;
+      });
+    }
+    modulePromise.then(
+      value => {
+        const fulfilledThenable: FulfilledThenable<mixed> =
+          (modulePromise: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      },
+      reason => {
+        const rejectedThenable: RejectedThenable<mixed> = (modulePromise: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = reason;
+      },
+    );
+    asyncModuleCache.set(metadata.specifier, modulePromise);
+    return modulePromise;
+  }
+}
+
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  let moduleExports;
+  // We assume that preloadModule has been called before, which
+  // should have added something to the module cache.
+  const promise: any = asyncModuleCache.get(metadata.specifier);
+  if (promise.status === 'fulfilled') {
+    moduleExports = promise.value;
+  } else {
+    throw promise.reason;
+  }
+  if (metadata.name === '*') {
+    // This is a placeholder value that represents that the caller imported this
+    // as a CommonJS module as is.
+    return moduleExports;
+  }
+  if (metadata.name === '') {
+    // This is a placeholder value that represents that the caller accessed the
+    // default property of this if it was an ESM interop module.
+    return moduleExports.default;
+  }
+  if (hasOwnProperty.call(moduleExports, metadata.name)) {
+    return moduleExports[metadata.name];
+  }
+  return (undefined: any);
+}
+
+export function getModuleDebugInfo<T>(metadata: ClientReference<T>): null {
+  // We don't emit any debug info on the server since we assume the loading
+  // of the bundle is insignificant on the server.
+  return null;
+}
diff --git a/packages/react-server-dom-unbundled/src/client/ReactFlightClientConfigTargetNodeServer.js b/packages/react-server-dom-unbundled/src/client/ReactFlightClientConfigTargetNodeServer.js
new file mode 100644
index 00000000000..f5793fdab43
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/client/ReactFlightClientConfigTargetNodeServer.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {preinitScriptForSSR} from 'react-client/src/ReactFlightClientConfig';
+
+export type ModuleLoading = null | {
+  prefix: string,
+  crossOrigin?: 'use-credentials' | '',
+};
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+  chunks: Array<string>,
+  nonce: ?string,
+) {
+  if (moduleLoading !== null) {
+    for (let i = 1; i < chunks.length; i += 2) {
+      preinitScriptForSSR(
+        moduleLoading.prefix + chunks[i],
+        nonce,
+        moduleLoading.crossOrigin,
+      );
+    }
+  }
+}
diff --git a/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientEdge.js
new file mode 100644
index 00000000000..2cf668f679d
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientEdge.js
@@ -0,0 +1,255 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  FindSourceMapURLCallback,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import type {
+  ServerConsumerModuleMap,
+  ModuleLoading,
+  ServerManifest,
+} from 'react-client/src/ReactFlightClientConfig';
+
+type ServerConsumerManifest = {
+  moduleMap: ServerConsumerModuleMap,
+  moduleLoading: ModuleLoading,
+  serverModuleMap: null | ServerManifest,
+};
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+import {
+  processReply,
+  createServerReference as createServerReferenceImpl,
+} from 'react-client/src/ReactFlightReplyClient';
+
+export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: any,
+  callServer: any,
+): (...A) => Promise<T> {
+  return createServerReferenceImpl(id, noServerCall);
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  serverConsumerManifest: ServerConsumerManifest,
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Edge client we only support a single-direction debug channel.
+  debugChannel?: {readable?: ReadableStream, ...},
+};
+
+function createResponseFromOptions(options: Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback: null,
+        }
+      : undefined;
+
+  return createResponse(
+    options.serverConsumerManifest.moduleMap,
+    options.serverConsumerManifest.serverModuleMap,
+    options.serverConsumerManifest.moduleLoading,
+    noServerCall,
+    options.encodeFormAction,
+    typeof options.nonce === 'string' ? options.nonce : undefined,
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+export {createFromFetch, createFromReadableStream, encodeReply};
diff --git a/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientNode.js
new file mode 100644
index 00000000000..8863b1bf1c6
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/client/ReactFlightDOMClientNode.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  FindSourceMapURLCallback,
+  Response,
+} from 'react-client/src/ReactFlightClient';
+
+import type {
+  ServerConsumerModuleMap,
+  ModuleLoading,
+  ServerManifest,
+} from 'react-client/src/ReactFlightClientConfig';
+
+type ServerConsumerManifest = {
+  moduleMap: ServerConsumerModuleMap,
+  moduleLoading: ModuleLoading,
+  serverModuleMap: null | ServerManifest,
+};
+
+import type {Readable} from 'stream';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+export * from './ReactFlightDOMClientEdge';
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
+};
+
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  onEnd: () => void,
+): void {
+  const streamState = createStreamState(response, stream);
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', onEnd);
+}
+
+function createFromNodeStream<T>(
+  stream: Readable,
+  serverConsumerManifest: ServerConsumerManifest,
+  options?: Options,
+): Thenable<T> {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {hasReadable: true, callback: null}
+      : undefined;
+
+  const response: Response = createResponse(
+    serverConsumerManifest.moduleMap,
+    serverConsumerManifest.serverModuleMap,
+    serverConsumerManifest.moduleLoading,
+    noServerCall,
+    options ? options.encodeFormAction : undefined,
+    options && typeof options.nonce === 'string' ? options.nonce : undefined,
+    undefined, // TODO: If encodeReply is supported, this should support temporaryReferences
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+
+  if (__DEV__ && options && options.debugChannel) {
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
+  } else {
+    startReadingFromStream(response, stream, close.bind(null, response));
+  }
+
+  return getRoot(response);
+}
+
+export {createFromNodeStream};
diff --git a/packages/react-server-dom-unbundled/src/client/react-flight-dom-client.node.js b/packages/react-server-dom-unbundled/src/client/react-flight-dom-client.node.js
new file mode 100644
index 00000000000..8eb9daa35b6
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/client/react-flight-dom-client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-unbundled/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-unbundled/src/server/ReactFlightDOMServerNode.js
new file mode 100644
index 00000000000..647498a65d8
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/server/ReactFlightDOMServerNode.js
@@ -0,0 +1,695 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {ClientManifest} from './ReactFlightServerConfigUnbundledBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+import type {Busboy} from 'busboy';
+import type {Writable} from 'stream';
+import type {Thenable} from 'shared/ReactTypes';
+
+import type {Duplex} from 'stream';
+
+import {Readable} from 'stream';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  reportGlobalError,
+  close,
+  resolveField,
+  resolveFile,
+  resolveFileInfo,
+  resolveFileChunk,
+  resolveFileComplete,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightUnbundledReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigNode';
+
+import {textEncoder} from 'react-server/src/ReactServerStreamConfigNode';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function createDrainHandler(destination: Destination, request: Request) {
+  return () => startFlowing(request, destination);
+}
+
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    abort(request, new Error(reason));
+  };
+}
+
+function startReadingFromDebugChannelReadable(
+  request: Request,
+  stream: Readable | WebSocket,
+): void {
+  const stringDecoder = createStringDecoder();
+  let lastWasPartial = false;
+  let stringBuffer = '';
+  function onData(chunk: string | Uint8Array) {
+    if (typeof chunk === 'string') {
+      if (lastWasPartial) {
+        stringBuffer += readFinalStringChunk(stringDecoder, new Uint8Array(0));
+        lastWasPartial = false;
+      }
+      stringBuffer += chunk;
+    } else {
+      const buffer: Uint8Array = (chunk: any);
+      stringBuffer += readPartialStringChunk(stringDecoder, buffer);
+      lastWasPartial = true;
+    }
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+  }
+  function onError(error: mixed) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: error,
+      }),
+    );
+  }
+  function onClose() {
+    closeDebugChannel(request);
+  }
+  if (
+    // $FlowFixMe[method-unbinding]
+    typeof stream.addEventListener === 'function' &&
+    // $FlowFixMe[method-unbinding]
+    typeof stream.binaryType === 'string'
+  ) {
+    const ws: WebSocket = (stream: any);
+    ws.binaryType = 'arraybuffer';
+    ws.addEventListener('message', event => {
+      // $FlowFixMe
+      onData(event.data);
+    });
+    ws.addEventListener('error', event => {
+      // $FlowFixMe
+      onError(event.error);
+    });
+    ws.addEventListener('close', onClose);
+  } else {
+    const readable: Readable = (stream: any);
+    readable.on('data', onData);
+    readable.on('error', onError);
+    readable.on('end', onClose);
+  }
+}
+
+type Options = {
+  debugChannel?: Readable | Writable | Duplex | WebSocket,
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+};
+
+type PipeableStream = {
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+function renderToPipeableStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): PipeableStream {
+  const debugChannel = __DEV__ && options ? options.debugChannel : undefined;
+  const debugChannelReadable: void | Readable | WebSocket =
+    __DEV__ &&
+    debugChannel !== undefined &&
+    // $FlowFixMe[method-unbinding]
+    (typeof debugChannel.read === 'function' ||
+      typeof debugChannel.readyState === 'number')
+      ? (debugChannel: any)
+      : undefined;
+  const debugChannelWritable: void | Writable =
+    __DEV__ && debugChannel !== undefined
+      ? // $FlowFixMe[method-unbinding]
+        typeof debugChannel.write === 'function'
+        ? (debugChannel: any)
+        : // $FlowFixMe[method-unbinding]
+          typeof debugChannel.send === 'function'
+          ? createFakeWritableFromWebSocket((debugChannel: any))
+          : undefined
+      : undefined;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  let hasStartedFlowing = false;
+  startWork(request);
+  if (debugChannelWritable !== undefined) {
+    startFlowingDebug(request, debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadable(request, debugChannelReadable);
+  }
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      // We don't close until the debug channel closes.
+      if (!__DEV__ || debugChannelReadable === undefined) {
+        destination.on(
+          'close',
+          createCancelHandler(request, 'The destination stream closed early.'),
+        );
+      }
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+function createFakeWritableFromWebSocket(webSocket: WebSocket): Writable {
+  return ({
+    write(chunk: string | Uint8Array) {
+      webSocket.send((chunk: any));
+      return true;
+    },
+    end() {
+      webSocket.close();
+    },
+    destroy(reason) {
+      if (typeof reason === 'object' && reason !== null) {
+        reason = reason.message;
+      }
+      if (typeof reason === 'string') {
+        webSocket.close(1011, reason);
+      } else {
+        webSocket.close(1011);
+      }
+    },
+  }: any);
+}
+
+function createFakeWritableFromReadableStreamController(
+  controller: ReadableStreamController,
+): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      if (typeof chunk === 'string') {
+        chunk = textEncoder.encode(chunk);
+      }
+      controller.enqueue(chunk);
+      // in web streams there is no backpressure so we can always write more
+      return true;
+    },
+    end() {
+      controller.close();
+    },
+    destroy(error) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof controller.error === 'function') {
+        // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+        controller.error(error);
+      } else {
+        controller.close();
+      }
+    },
+  }: any);
+}
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Omit<Options, 'debugChannel'> & {
+    debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+    signal?: AbortSignal,
+  },
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    let debugWritable: Writable;
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        start: (controller): ?Promise<void> => {
+          debugWritable =
+            createFakeWritableFromReadableStreamController(controller);
+        },
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, debugWritable);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  let writable: Writable;
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        writable = createFakeWritableFromReadableStreamController(controller);
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, writable);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+function createFakeWritableFromNodeReadable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritableFromNodeReadable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createPrerenderRequest(
+      model,
+      webpackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function prerender(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options & {
+    signal?: AbortSignal,
+  },
+): Promise<{
+  prelude: ReadableStream,
+}> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      let writable: Writable;
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      webpackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReplyFromBusboy<T>(
+  busboyStream: Busboy,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+  let pendingFiles = 0;
+  const queuedFields: Array<string> = [];
+  busboyStream.on('field', (name, value) => {
+    if (pendingFiles > 0) {
+      // Because the 'end' event fires two microtasks after the next 'field'
+      // we would resolve files and fields out of order. To handle this properly
+      // we queue any fields we receive until the previous file is done.
+      queuedFields.push(name, value);
+    } else {
+      try {
+        resolveField(response, name, value);
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    }
+  });
+  busboyStream.on('file', (name, value, {filename, encoding, mimeType}) => {
+    if (encoding.toLowerCase() === 'base64') {
+      busboyStream.destroy(
+        new Error(
+          "React doesn't accept base64 encoded file uploads because we don't expect " +
+            "form data passed from a browser to ever encode data that way. If that's " +
+            'the wrong assumption, we can easily fix it.',
+        ),
+      );
+      return;
+    }
+    pendingFiles++;
+    const file = resolveFileInfo(response, name, filename, mimeType);
+    value.on('data', chunk => {
+      resolveFileChunk(response, file, chunk);
+    });
+    value.on('end', () => {
+      try {
+        resolveFileComplete(response, name, file);
+        pendingFiles--;
+        if (pendingFiles === 0) {
+          // Release any queued fields
+          for (let i = 0; i < queuedFields.length; i += 2) {
+            resolveField(response, queuedFields[i], queuedFields[i + 1]);
+          }
+          queuedFields.length = 0;
+        }
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    });
+  });
+  busboyStream.on('finish', () => {
+    close(response);
+  });
+  busboyStream.on('error', err => {
+    reportGlobalError(
+      response,
+      // $FlowFixMe[incompatible-call] types Error and mixed are incompatible
+      err,
+    );
+  });
+  return getRoot(response);
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-unbundled/src/server/ReactFlightServerConfigUnbundledBundler.js b/packages/react-server-dom-unbundled/src/server/ReactFlightServerConfigUnbundledBundler.js
new file mode 100644
index 00000000000..d2c8b038c06
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/server/ReactFlightServerConfigUnbundledBundler.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+import type {
+  ImportMetadata,
+  ImportManifestEntry,
+} from '../shared/ReactFlightImportMetadata';
+
+import type {
+  ClientReference,
+  ServerReference,
+} from '../ReactFlightUnbundledReferences';
+
+export type {ClientReference, ServerReference};
+
+export type ClientManifest = {
+  [id: string]: ClientReferenceManifestEntry,
+};
+
+export type ServerReferenceId = string;
+
+export type ClientReferenceMetadata = ImportMetadata;
+export opaque type ClientReferenceManifestEntry = ImportManifestEntry;
+
+export type ClientReferenceKey = string;
+
+export {
+  isClientReference,
+  isServerReference,
+} from '../ReactFlightUnbundledReferences';
+
+export function getClientReferenceKey(
+  reference: ClientReference<any>,
+): ClientReferenceKey {
+  return reference.$$async ? reference.$$id + '#async' : reference.$$id;
+}
+
+export function resolveClientReferenceMetadata<T>(
+  config: ClientManifest,
+  clientReference: ClientReference<T>,
+): ClientReferenceMetadata {
+  const modulePath = clientReference.$$id;
+  let name = '';
+  let resolvedModuleData = config[modulePath];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = modulePath.lastIndexOf('#');
+    if (idx !== -1) {
+      name = modulePath.slice(idx + 1);
+      resolvedModuleData = config[modulePath.slice(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          modulePath +
+          '" in the React Client Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+  }
+  if (resolvedModuleData.async === true && clientReference.$$async === true) {
+    throw new Error(
+      'The module "' +
+        modulePath +
+        '" is marked as an async ESM module but was loaded as a CJS proxy. ' +
+        'This is probably a bug in the React Server Components bundler.',
+    );
+  }
+  if (resolvedModuleData.async === true || clientReference.$$async === true) {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];
+  } else {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+  }
+}
+
+export function getServerReferenceId<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): ServerReferenceId {
+  return serverReference.$$id;
+}
+
+export function getServerReferenceBoundArguments<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): null | Array<ReactClientValue> {
+  return serverReference.$$bound;
+}
+
+export function getServerReferenceLocation<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): void | Error {
+  return serverReference.$$location;
+}
diff --git a/packages/react-server-dom-unbundled/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-unbundled/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000..3c2b9e512c7
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-unbundled/src/shared/ReactFlightImportMetadata.js b/packages/react-server-dom-unbundled/src/shared/ReactFlightImportMetadata.js
new file mode 100644
index 00000000000..29b012f6052
--- /dev/null
+++ b/packages/react-server-dom-unbundled/src/shared/ReactFlightImportMetadata.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ImportManifestEntry = {
+  id: string,
+  // chunks is a double indexed array of chunkId / chunkFilename pairs
+  chunks: Array<string>,
+  name: string,
+  async?: boolean,
+};
+
+// This is the parsed shape of the wire format which is why it is
+// condensed to only the essentialy information
+export type ImportMetadata =
+  | [
+      /* id */ string,
+      /* chunks id/filename pairs, double indexed */ Array<string>,
+      /* name */ string,
+      /* async */ 1,
+    ]
+  | [
+      /* id */ string,
+      /* chunks id/filename pairs, double indexed */ Array<string>,
+      /* name */ string,
+    ];
+
+export const ID = 0;
+export const CHUNKS = 1;
+export const NAME = 2;
+// export const ASYNC = 3;
+
+// This logic is correct because currently only include the 4th tuple member
+// when the module is async. If that changes we will need to actually assert
+// the value is true. We don't index into the 4th slot because flow does not
+// like the potential out of bounds access
+export function isAsyncImport(metadata: ImportMetadata): boolean {
+  return metadata.length === 4;
+}
diff --git a/packages/react-server-dom-unbundled/static.js b/packages/react-server-dom-unbundled/static.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-unbundled/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-unbundled/static.node.js b/packages/react-server-dom-unbundled/static.node.js
new file mode 100644
index 00000000000..78e70a1cf4c
--- /dev/null
+++ b/packages/react-server-dom-unbundled/static.node.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  prerender,
+  prerenderToNodeStream,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-webpack/README.md b/packages/react-server-dom-webpack/README.md
new file mode 100644
index 00000000000..f3568e050b1
--- /dev/null
+++ b/packages/react-server-dom-webpack/README.md
@@ -0,0 +1,5 @@
+# react-server-dom-webpack
+
+Experimental React Flight bindings for DOM using Webpack.
+
+**Use it at your own risk.**
diff --git a/packages/react-server-dom-webpack/client.browser.js b/packages/react-server-dom-webpack/client.browser.js
new file mode 100644
index 00000000000..1be0bc04a7e
--- /dev/null
+++ b/packages/react-server-dom-webpack/client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.browser';
diff --git a/packages/react-server-dom-webpack/client.edge.js b/packages/react-server-dom-webpack/client.edge.js
new file mode 100644
index 00000000000..ab6a110c112
--- /dev/null
+++ b/packages/react-server-dom-webpack/client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.edge';
diff --git a/packages/react-server-dom-webpack/client.js b/packages/react-server-dom-webpack/client.js
new file mode 100644
index 00000000000..2dad5bb5138
--- /dev/null
+++ b/packages/react-server-dom-webpack/client.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './client.browser';
diff --git a/packages/react-server-dom-webpack/client.node.js b/packages/react-server-dom-webpack/client.node.js
new file mode 100644
index 00000000000..c3ec7662d6e
--- /dev/null
+++ b/packages/react-server-dom-webpack/client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/client/react-flight-dom-client.node';
diff --git a/packages/react-server-dom-webpack/esm/package.json b/packages/react-server-dom-webpack/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-webpack/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.production.js b/packages/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.production.js
new file mode 100644
index 00000000000..611cfddd330
--- /dev/null
+++ b/packages/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.production.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../src/ReactFlightWebpackNodeLoader.js';
diff --git a/packages/react-server-dom-webpack/index.js b/packages/react-server-dom-webpack/index.js
new file mode 100644
index 00000000000..233bab2d978
--- /dev/null
+++ b/packages/react-server-dom-webpack/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error('Use react-server-dom-webpack/client instead.');
diff --git a/packages/react-server-dom-webpack/node-register.js b/packages/react-server-dom-webpack/node-register.js
new file mode 100644
index 00000000000..a3c2ea98cee
--- /dev/null
+++ b/packages/react-server-dom-webpack/node-register.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+module.exports = require('./src/ReactFlightWebpackNodeRegister');
diff --git a/packages/react-server-dom-webpack/npm/client.browser.js b/packages/react-server-dom-webpack/npm/client.browser.js
new file mode 100644
index 00000000000..6c2dfafceb2
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/client.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.browser.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.browser.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/client.edge.js b/packages/react-server-dom-webpack/npm/client.edge.js
new file mode 100644
index 00000000000..ffdcc94ee2e
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/client.edge.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.edge.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.edge.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/client.js b/packages/react-server-dom-webpack/npm/client.js
new file mode 100644
index 00000000000..89d93a7a792
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/client.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./client.browser');
diff --git a/packages/react-server-dom-webpack/npm/client.node.js b/packages/react-server-dom-webpack/npm/client.node.js
new file mode 100644
index 00000000000..32b45503d14
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/client.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/client.node.unbundled.js b/packages/react-server-dom-webpack/npm/client.node.unbundled.js
new file mode 100644
index 00000000000..5ec0f2cb362
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/client.node.unbundled.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.unbundled.production.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.unbundled.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/esm/package.json b/packages/react-server-dom-webpack/npm/esm/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-server-dom-webpack/npm/index.js b/packages/react-server-dom-webpack/npm/index.js
new file mode 100644
index 00000000000..96b212f73fe
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+throw new Error('Use react-server-dom-webpack/client instead.');
diff --git a/packages/react-server-dom-webpack/npm/node-register.js b/packages/react-server-dom-webpack/npm/node-register.js
new file mode 100644
index 00000000000..9c7c6a9fcfd
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/node-register.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-server-dom-webpack-node-register.js');
diff --git a/packages/react-server-dom-webpack/npm/plugin.js b/packages/react-server-dom-webpack/npm/plugin.js
new file mode 100644
index 00000000000..64e01aad024
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/plugin.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-server-dom-webpack-plugin.js');
diff --git a/packages/react-server-dom-webpack/npm/server.browser.js b/packages/react-server-dom-webpack/npm/server.browser.js
new file mode 100644
index 00000000000..326cc56b658
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/server.browser.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/server.edge.js b/packages/react-server-dom-webpack/npm/server.edge.js
new file mode 100644
index 00000000000..51a58ea7a9e
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/server.edge.js
@@ -0,0 +1,18 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/server.js b/packages/react-server-dom-webpack/npm/server.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/server.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-webpack/npm/server.node.js b/packages/react-server-dom-webpack/npm/server.node.js
new file mode 100644
index 00000000000..e507f643634
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/server.node.js
@@ -0,0 +1,20 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/server.node.unbundled.js b/packages/react-server-dom-webpack/npm/server.node.unbundled.js
new file mode 100644
index 00000000000..5ecd0992497
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/server.node.unbundled.js
@@ -0,0 +1,20 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+}
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReplyFromAsyncIterable = s.decodeReplyFromAsyncIterable;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/static.browser.js b/packages/react-server-dom-webpack/npm/static.browser.js
new file mode 100644
index 00000000000..06218aec3d4
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.browser.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
+}
+
+exports.prerender = s.prerender;
diff --git a/packages/react-server-dom-webpack/npm/static.edge.js b/packages/react-server-dom-webpack/npm/static.edge.js
new file mode 100644
index 00000000000..df9085690aa
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.edge.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+}
+
+exports.prerender = s.prerender;
diff --git a/packages/react-server-dom-webpack/npm/static.js b/packages/react-server-dom-webpack/npm/static.js
new file mode 100644
index 00000000000..13a632e6411
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-webpack/npm/static.node.js b/packages/react-server-dom-webpack/npm/static.node.js
new file mode 100644
index 00000000000..2f649d1fc51
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.node.js
@@ -0,0 +1,11 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.development.js');
+}
+
+exports.prerender = s.prerender;
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-server-dom-webpack/npm/static.node.unbundled.js b/packages/react-server-dom-webpack/npm/static.node.unbundled.js
new file mode 100644
index 00000000000..850886dcd9e
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.node.unbundled.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+}
+
+exports.prerenderToNodeStream = s.prerenderToNodeStream;
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
new file mode 100644
index 00000000000..67221202721
--- /dev/null
+++ b/packages/react-server-dom-webpack/package.json
@@ -0,0 +1,97 @@
+{
+  "name": "react-server-dom-webpack",
+  "description": "React Server Components bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "19.3.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "plugin.js",
+    "client.js",
+    "client.browser.js",
+    "client.edge.js",
+    "client.node.js",
+    "server.js",
+    "server.browser.js",
+    "server.edge.js",
+    "server.node.js",
+    "static.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.node.js",
+    "node-register.js",
+    "cjs/",
+    "esm/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./plugin": "./plugin.js",
+    "./client": {
+      "workerd": "./client.edge.js",
+      "deno": "./client.edge.js",
+      "worker": "./client.edge.js",
+      "node": "./client.node.js",
+      "edge-light": "./client.edge.js",
+      "browser": "./client.browser.js",
+      "default": "./client.browser.js"
+    },
+    "./client.browser": "./client.browser.js",
+    "./client.edge": "./client.edge.js",
+    "./client.node": "./client.node.js",
+    "./server": {
+      "react-server": {
+        "workerd": "./server.edge.js",
+        "deno": "./server.browser.js",
+        "node": "./server.node.js",
+        "edge-light": "./server.edge.js",
+        "browser": "./server.browser.js"
+      },
+      "default": "./server.js"
+    },
+    "./server.browser": "./server.browser.js",
+    "./server.edge": "./server.edge.js",
+    "./server.node": "./server.node.js",
+    "./static": {
+      "react-server": {
+        "workerd": "./static.edge.js",
+        "deno": "./static.browser.js",
+        "node": "./static.node.js",
+        "edge-light": "./static.edge.js",
+        "browser": "./static.browser.js"
+      },
+      "default": "./static.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
+    "./static.node": "./static.node.js",
+    "./node-loader": "./esm/react-server-dom-webpack-node-loader.production.js",
+    "./node-register": "./node-register.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-webpack"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "webpack": "^5.59.0"
+  },
+  "dependencies": {
+    "acorn-loose": "^8.3.0",
+    "neo-async": "^2.6.1",
+    "webpack-sources": "^3.2.0"
+  }
+}
diff --git a/packages/react-server-dom-webpack/plugin.js b/packages/react-server-dom-webpack/plugin.js
new file mode 100644
index 00000000000..5012d230d8b
--- /dev/null
+++ b/packages/react-server-dom-webpack/plugin.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from './src/ReactFlightWebpackPlugin';
diff --git a/packages/react-server-dom-webpack/server.browser.js b/packages/react-server-dom-webpack/server.browser.js
new file mode 100644
index 00000000000..46f5b906104
--- /dev/null
+++ b/packages/react-server-dom-webpack/server.browser.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-webpack/server.edge.js b/packages/react-server-dom-webpack/server.edge.js
new file mode 100644
index 00000000000..8f0347cd7b5
--- /dev/null
+++ b/packages/react-server-dom-webpack/server.edge.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-webpack/server.js b/packages/react-server-dom-webpack/server.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-webpack/server.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-webpack/server.node.js b/packages/react-server-dom-webpack/server.node.js
new file mode 100644
index 00000000000..bd00ba7275c
--- /dev/null
+++ b/packages/react-server-dom-webpack/server.node.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToPipeableStream,
+  renderToReadableStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
new file mode 100644
index 00000000000..9799acc3a07
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -0,0 +1,804 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as acorn from 'acorn-loose';
+
+import readMappings from 'webpack-sources/lib/helpers/readMappings.js';
+import createMappingsSerializer from 'webpack-sources/lib/helpers/createMappingsSerializer.js';
+
+type ResolveContext = {
+  conditions: Array<string>,
+  parentURL: string | void,
+};
+
+type ResolveFunction = (
+  string,
+  ResolveContext,
+  ResolveFunction,
+) => {url: string} | Promise<{url: string}>;
+
+type GetSourceContext = {
+  format: string,
+};
+
+type GetSourceFunction = (
+  string,
+  GetSourceContext,
+  GetSourceFunction,
+) => Promise<{source: Source}>;
+
+type TransformSourceContext = {
+  format: string,
+  url: string,
+};
+
+type TransformSourceFunction = (
+  Source,
+  TransformSourceContext,
+  TransformSourceFunction,
+) => Promise<{source: Source}>;
+
+type LoadContext = {
+  conditions: Array<string>,
+  format: string | null | void,
+  importAssertions: Object,
+};
+
+type LoadFunction = (
+  string,
+  LoadContext,
+  LoadFunction,
+) => Promise<{format: string, shortCircuit?: boolean, source: Source}>;
+
+type Source = string | ArrayBuffer | Uint8Array;
+
+let warnedAboutConditionsFlag = false;
+
+let stashedGetSource: null | GetSourceFunction = null;
+let stashedResolve: null | ResolveFunction = null;
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  defaultResolve: ResolveFunction,
+): Promise<{url: string}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedResolve = defaultResolve;
+
+  if (!context.conditions.includes('react-server')) {
+    context = {
+      ...context,
+      conditions: [...context.conditions, 'react-server'],
+    };
+    if (!warnedAboutConditionsFlag) {
+      warnedAboutConditionsFlag = true;
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.warn(
+        'You did not run Node.js with the `--conditions react-server` flag. ' +
+          'Any "react-server" override will only work with ESM imports.',
+      );
+    }
+  }
+  return await defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function getSource(
+  url: string,
+  context: GetSourceContext,
+  defaultGetSource: GetSourceFunction,
+): Promise<{source: Source}> {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedGetSource = defaultGetSource;
+  return defaultGetSource(url, context, defaultGetSource);
+}
+
+type ExportedEntry = {
+  localName: string,
+  exportedName: string,
+  type: null | string,
+  loc: {
+    start: {line: number, column: number},
+    end: {line: number, column: number},
+  },
+  originalLine: number,
+  originalColumn: number,
+  originalSource: number,
+  nameIndex: number,
+};
+
+function addExportedEntry(
+  exportedEntries: Array<ExportedEntry>,
+  localNames: Set<string>,
+  localName: string,
+  exportedName: string,
+  type: null | 'function',
+  loc: {
+    start: {line: number, column: number},
+    end: {line: number, column: number},
+  },
+) {
+  if (localNames.has(localName)) {
+    // If the same local name is exported more than once, we only need one of the names.
+    return;
+  }
+  exportedEntries.push({
+    localName,
+    exportedName,
+    type,
+    loc,
+    originalLine: -1,
+    originalColumn: -1,
+    originalSource: -1,
+    nameIndex: -1,
+  });
+}
+
+function addLocalExportedNames(
+  exportedEntries: Array<ExportedEntry>,
+  localNames: Set<string>,
+  node: any,
+) {
+  switch (node.type) {
+    case 'Identifier':
+      addExportedEntry(
+        exportedEntries,
+        localNames,
+        node.name,
+        node.name,
+        null,
+        node.loc,
+      );
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addLocalExportedNames(exportedEntries, localNames, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element)
+          addLocalExportedNames(exportedEntries, localNames, element);
+      }
+      return;
+    case 'Property':
+      addLocalExportedNames(exportedEntries, localNames, node.value);
+      return;
+    case 'AssignmentPattern':
+      addLocalExportedNames(exportedEntries, localNames, node.left);
+      return;
+    case 'RestElement':
+      addLocalExportedNames(exportedEntries, localNames, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addLocalExportedNames(exportedEntries, localNames, node.expression);
+      return;
+  }
+}
+
+function transformServerModule(
+  source: string,
+  program: any,
+  url: string,
+  sourceMap: any,
+  loader: LoadFunction,
+): string {
+  const body = program.body;
+
+  // This entry list needs to be in source location order.
+  const exportedEntries: Array<ExportedEntry> = [];
+  // Dedupe set.
+  const localNames: Set<string> = new Set();
+
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        // If export * is used, the other file needs to explicitly opt into "use server" too.
+        break;
+      case 'ExportDefaultDeclaration':
+        if (node.declaration.type === 'Identifier') {
+          addExportedEntry(
+            exportedEntries,
+            localNames,
+            node.declaration.name,
+            'default',
+            null,
+            node.declaration.loc,
+          );
+        } else if (node.declaration.type === 'FunctionDeclaration') {
+          if (node.declaration.id) {
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              node.declaration.id.name,
+              'default',
+              'function',
+              node.declaration.id.loc,
+            );
+          } else {
+            // TODO: This needs to be rewritten inline because it doesn't have a local name.
+          }
+        }
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addLocalExportedNames(
+                exportedEntries,
+                localNames,
+                declarations[j].id,
+              );
+            }
+          } else {
+            const name = node.declaration.id.name;
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              name,
+              name,
+
+              node.declaration.type === 'FunctionDeclaration'
+                ? 'function'
+                : null,
+              node.declaration.id.loc,
+            );
+          }
+        }
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            const specifier = specifiers[j];
+            addExportedEntry(
+              exportedEntries,
+              localNames,
+              specifier.local.name,
+              specifier.exported.name,
+              null,
+              specifier.local.loc,
+            );
+          }
+        }
+        continue;
+    }
+  }
+
+  let mappings =
+    sourceMap && typeof sourceMap.mappings === 'string'
+      ? sourceMap.mappings
+      : '';
+  let newSrc = source;
+
+  if (exportedEntries.length > 0) {
+    let lastSourceIndex = 0;
+    let lastOriginalLine = 0;
+    let lastOriginalColumn = 0;
+    let lastNameIndex = 0;
+    let sourceLineCount = 0;
+    let lastMappedLine = 0;
+
+    if (sourceMap) {
+      // We iterate source mapping entries and our matched exports in parallel to source map
+      // them to their original location.
+      let nextEntryIdx = 0;
+      let nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+      let nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+      readMappings(
+        mappings,
+        (
+          generatedLine: number,
+          generatedColumn: number,
+          sourceIndex: number,
+          originalLine: number,
+          originalColumn: number,
+          nameIndex: number,
+        ) => {
+          if (
+            generatedLine > nextEntryLine ||
+            (generatedLine === nextEntryLine &&
+              generatedColumn > nextEntryColumn)
+          ) {
+            // We're past the entry which means that the best match we have is the previous entry.
+            if (lastMappedLine === nextEntryLine) {
+              // Match
+              exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+              exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+              exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+              exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+            } else {
+              // Skip if we didn't have any mappings on the exported line.
+            }
+            nextEntryIdx++;
+            if (nextEntryIdx < exportedEntries.length) {
+              nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+              nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+            } else {
+              nextEntryLine = -1;
+              nextEntryColumn = -1;
+            }
+          }
+          lastMappedLine = generatedLine;
+          if (sourceIndex > -1) {
+            lastSourceIndex = sourceIndex;
+          }
+          if (originalLine > -1) {
+            lastOriginalLine = originalLine;
+          }
+          if (originalColumn > -1) {
+            lastOriginalColumn = originalColumn;
+          }
+          if (nameIndex > -1) {
+            lastNameIndex = nameIndex;
+          }
+        },
+      );
+      if (nextEntryIdx < exportedEntries.length) {
+        if (lastMappedLine === nextEntryLine) {
+          // Match
+          exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+          exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+          exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+          exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+        }
+      }
+
+      for (
+        let lastIdx = mappings.length - 1;
+        lastIdx >= 0 && mappings[lastIdx] === ';';
+        lastIdx--
+      ) {
+        // If the last mapped lines don't contain any segments, we don't get a callback from readMappings
+        // so we need to pad the number of mapped lines, with one for each empty line.
+        lastMappedLine++;
+      }
+
+      sourceLineCount = program.loc.end.line;
+      if (sourceLineCount < lastMappedLine) {
+        throw new Error(
+          'The source map has more mappings than there are lines.',
+        );
+      }
+      // If the original source string had more lines than there are mappings in the source map.
+      // Add some extra padding of unmapped lines so that any lines that we add line up.
+      for (
+        let extraLines = sourceLineCount - lastMappedLine;
+        extraLines > 0;
+        extraLines--
+      ) {
+        mappings += ';';
+      }
+    } else {
+      // If a file doesn't have a source map then we generate a blank source map that just
+      // contains the original content and segments pointing to the original lines.
+      sourceLineCount = 1;
+      let idx = -1;
+      while ((idx = source.indexOf('\n', idx + 1)) !== -1) {
+        sourceLineCount++;
+      }
+      mappings = 'AAAA' + ';AACA'.repeat(sourceLineCount - 1);
+      sourceMap = {
+        version: 3,
+        sources: [url],
+        sourcesContent: [source],
+        mappings: mappings,
+        sourceRoot: '',
+      };
+      lastSourceIndex = 0;
+      lastOriginalLine = sourceLineCount;
+      lastOriginalColumn = 0;
+      lastNameIndex = -1;
+      lastMappedLine = sourceLineCount;
+
+      for (let i = 0; i < exportedEntries.length; i++) {
+        // Point each entry to original location.
+        const entry = exportedEntries[i];
+        entry.originalSource = 0;
+        entry.originalLine = entry.loc.start.line;
+        // We use column zero since we do the short-hand line-only source maps above.
+        entry.originalColumn = 0; // entry.loc.start.column;
+      }
+    }
+
+    newSrc += '\n\n;';
+    newSrc +=
+      'import {registerServerReference} from "react-server-dom-webpack/server";\n';
+    if (mappings) {
+      mappings += ';;';
+    }
+
+    const createMapping = createMappingsSerializer();
+
+    // Create an empty mapping pointing to where we last left off to reset the counters.
+    let generatedLine = 1;
+    createMapping(
+      generatedLine,
+      0,
+      lastSourceIndex,
+      lastOriginalLine,
+      lastOriginalColumn,
+      lastNameIndex,
+    );
+    for (let i = 0; i < exportedEntries.length; i++) {
+      const entry = exportedEntries[i];
+      generatedLine++;
+      if (entry.type !== 'function') {
+        // We first check if the export is a function and if so annotate it.
+        newSrc += 'if (typeof ' + entry.localName + ' === "function") ';
+      }
+      newSrc += 'registerServerReference(' + entry.localName + ',';
+      newSrc += JSON.stringify(url) + ',';
+      newSrc += JSON.stringify(entry.exportedName) + ');\n';
+
+      mappings += createMapping(
+        generatedLine,
+        0,
+        entry.originalSource,
+        entry.originalLine,
+        entry.originalColumn,
+        entry.nameIndex,
+      );
+    }
+  }
+
+  if (sourceMap) {
+    // Override with an new mappings and serialize an inline source map.
+    sourceMap.mappings = mappings;
+    newSrc +=
+      '//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      Buffer.from(JSON.stringify(sourceMap)).toString('base64');
+  }
+
+  return newSrc;
+}
+
+function addExportNames(names: Array<string>, node: any) {
+  switch (node.type) {
+    case 'Identifier':
+      names.push(node.name);
+      return;
+    case 'ObjectPattern':
+      for (let i = 0; i < node.properties.length; i++)
+        addExportNames(names, node.properties[i]);
+      return;
+    case 'ArrayPattern':
+      for (let i = 0; i < node.elements.length; i++) {
+        const element = node.elements[i];
+        if (element) addExportNames(names, element);
+      }
+      return;
+    case 'Property':
+      addExportNames(names, node.value);
+      return;
+    case 'AssignmentPattern':
+      addExportNames(names, node.left);
+      return;
+    case 'RestElement':
+      addExportNames(names, node.argument);
+      return;
+    case 'ParenthesizedExpression':
+      addExportNames(names, node.expression);
+      return;
+  }
+}
+
+function resolveClientImport(
+  specifier: string,
+  parentURL: string,
+): {url: string} | Promise<{url: string}> {
+  // Resolve an import specifier as if it was loaded by the client. This doesn't use
+  // the overrides that this loader does but instead reverts to the default.
+  // This resolution algorithm will not necessarily have the same configuration
+  // as the actual client loader. It should mostly work and if it doesn't you can
+  // always convert to explicit exported names instead.
+  const conditions = ['node', 'import'];
+  if (stashedResolve === null) {
+    throw new Error(
+      'Expected resolve to have been called before transformSource',
+    );
+  }
+  return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
+}
+
+async function parseExportNamesInto(
+  body: any,
+  names: Array<string>,
+  parentURL: string,
+  loader: LoadFunction,
+): Promise<void> {
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    switch (node.type) {
+      case 'ExportAllDeclaration':
+        if (node.exported) {
+          addExportNames(names, node.exported);
+          continue;
+        } else {
+          const {url} = await resolveClientImport(node.source.value, parentURL);
+          const {source} = await loader(
+            url,
+            {format: 'module', conditions: [], importAssertions: {}},
+            loader,
+          );
+          if (typeof source !== 'string') {
+            throw new Error('Expected the transformed source to be a string.');
+          }
+          let childBody;
+          try {
+            childBody = acorn.parse(source, {
+              ecmaVersion: '2024',
+              sourceType: 'module',
+            }).body;
+          } catch (x) {
+            // eslint-disable-next-line react-internal/no-production-logging
+            console.error('Error parsing %s %s', url, x.message);
+            continue;
+          }
+          await parseExportNamesInto(childBody, names, url, loader);
+          continue;
+        }
+      case 'ExportDefaultDeclaration':
+        names.push('default');
+        continue;
+      case 'ExportNamedDeclaration':
+        if (node.declaration) {
+          if (node.declaration.type === 'VariableDeclaration') {
+            const declarations = node.declaration.declarations;
+            for (let j = 0; j < declarations.length; j++) {
+              addExportNames(names, declarations[j].id);
+            }
+          } else {
+            addExportNames(names, node.declaration.id);
+          }
+        }
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            addExportNames(names, specifiers[j].exported);
+          }
+        }
+        continue;
+    }
+  }
+}
+
+async function transformClientModule(
+  program: any,
+  url: string,
+  sourceMap: any,
+  loader: LoadFunction,
+): Promise<string> {
+  const body = program.body;
+
+  const names: Array<string> = [];
+
+  await parseExportNamesInto(body, names, url, loader);
+
+  if (names.length === 0) {
+    return '';
+  }
+
+  let newSrc =
+    'import {registerClientReference} from "react-server-dom-webpack/server";\n';
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i];
+    if (name === 'default') {
+      newSrc += 'export default ';
+      newSrc += 'registerClientReference(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call the default export of ${url} from the server ` +
+            `but it's on the client. It's not possible to invoke a client function from ` +
+            `the server, it can only be rendered as a Component or passed to props of a ` +
+            `Client Component.`,
+        ) +
+        ');';
+    } else {
+      newSrc += 'export const ' + name + ' = ';
+      newSrc += 'registerClientReference(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call ${name}() from the server but ${name} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        ) +
+        ');';
+    }
+    newSrc += '},';
+    newSrc += JSON.stringify(url) + ',';
+    newSrc += JSON.stringify(name) + ');\n';
+  }
+
+  // TODO: Generate source maps for Client Reference functions so they can point to their
+  // original locations.
+  return newSrc;
+}
+
+async function loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
+  }
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  const result = await defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+  return {format: 'module', source: result.source};
+}
+
+async function transformModuleIfNeeded(
+  source: string,
+  url: string,
+  loader: LoadFunction,
+): Promise<string> {
+  // Do a quick check for the exact string. If it doesn't exist, don't
+  // bother parsing.
+  if (
+    source.indexOf('use client') === -1 &&
+    source.indexOf('use server') === -1
+  ) {
+    return source;
+  }
+
+  let sourceMappingURL = null;
+  let sourceMappingStart = 0;
+  let sourceMappingEnd = 0;
+  let sourceMappingLines = 0;
+
+  let program;
+  try {
+    program = acorn.parse(source, {
+      ecmaVersion: '2024',
+      sourceType: 'module',
+      locations: true,
+      onComment(
+        block: boolean,
+        text: string,
+        start: number,
+        end: number,
+        startLoc: {line: number, column: number},
+        endLoc: {line: number, column: number},
+      ) {
+        if (
+          text.startsWith('# sourceMappingURL=') ||
+          text.startsWith('@ sourceMappingURL=')
+        ) {
+          sourceMappingURL = text.slice(19);
+          sourceMappingStart = start;
+          sourceMappingEnd = end;
+          sourceMappingLines = endLoc.line - startLoc.line;
+        }
+      },
+    });
+  } catch (x) {
+    // eslint-disable-next-line react-internal/no-production-logging
+    console.error('Error parsing %s %s', url, x.message);
+    return source;
+  }
+
+  let useClient = false;
+  let useServer = false;
+
+  const body = program.body;
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    if (node.type !== 'ExpressionStatement' || !node.directive) {
+      break;
+    }
+    if (node.directive === 'use client') {
+      useClient = true;
+    }
+    if (node.directive === 'use server') {
+      useServer = true;
+    }
+  }
+
+  if (!useClient && !useServer) {
+    return source;
+  }
+
+  if (useClient && useServer) {
+    throw new Error(
+      'Cannot have both "use client" and "use server" directives in the same file.',
+    );
+  }
+
+  let sourceMap = null;
+  if (sourceMappingURL) {
+    const sourceMapResult = await loader(
+      sourceMappingURL,
+      // $FlowFixMe
+      {
+        format: 'json',
+        conditions: [],
+        importAssertions: {type: 'json'},
+        importAttributes: {type: 'json'},
+      },
+      loader,
+    );
+    const sourceMapString =
+      typeof sourceMapResult.source === 'string'
+        ? sourceMapResult.source
+        : // $FlowFixMe
+          sourceMapResult.source.toString('utf8');
+    sourceMap = JSON.parse(sourceMapString);
+
+    // Strip the source mapping comment. We'll re-add it below if needed.
+    source =
+      source.slice(0, sourceMappingStart) +
+      '\n'.repeat(sourceMappingLines) +
+      source.slice(sourceMappingEnd);
+  }
+
+  if (useClient) {
+    return transformClientModule(program, url, sourceMap, loader);
+  }
+
+  return transformServerModule(source, program, url, sourceMap, loader);
+}
+
+export async function transformSource(
+  source: Source,
+  context: TransformSourceContext,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}> {
+  const transformed = await defaultTransformSource(
+    source,
+    context,
+    defaultTransformSource,
+  );
+  if (context.format === 'module') {
+    const transformedSource = transformed.source;
+    if (typeof transformedSource !== 'string') {
+      throw new Error('Expected source to have been transformed to a string.');
+    }
+    const newSrc = await transformModuleIfNeeded(
+      transformedSource,
+      context.url,
+      (url: string, ctx: LoadContext, defaultLoad: LoadFunction) => {
+        return loadClientImport(url, defaultTransformSource);
+      },
+    );
+    return {source: newSrc};
+  }
+  return transformed;
+}
+
+export async function load(
+  url: string,
+  context: LoadContext,
+  defaultLoad: LoadFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    if (typeof result.source !== 'string') {
+      throw new Error('Expected source to have been loaded into a string.');
+    }
+    const newSrc = await transformModuleIfNeeded(
+      result.source,
+      url,
+      defaultLoad,
+    );
+    return {format: 'module', source: newSrc};
+  }
+  return result;
+}
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
new file mode 100644
index 00000000000..6dbc772444f
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 acorn = require('acorn-loose');
+
+const url = require('url');
+
+const Module = require('module');
+
+module.exports = function register() {
+  const Server: any = require('react-server-dom-webpack/server');
+  const registerServerReference = Server.registerServerReference;
+  const createClientModuleProxy = Server.createClientModuleProxy;
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  const originalCompile = Module.prototype._compile;
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  Module.prototype._compile = function (
+    this: any,
+    content: string,
+    filename: string,
+  ): void {
+    // Do a quick check for the exact string. If it doesn't exist, don't
+    // bother parsing.
+    if (
+      content.indexOf('use client') === -1 &&
+      content.indexOf('use server') === -1
+    ) {
+      return originalCompile.apply(this, arguments);
+    }
+
+    let body;
+    try {
+      body = acorn.parse(content, {
+        ecmaVersion: '2024',
+        sourceType: 'source',
+      }).body;
+    } catch (x) {
+      console['error']('Error parsing %s %s', url, x.message);
+      return originalCompile.apply(this, arguments);
+    }
+
+    let useClient = false;
+    let useServer = false;
+    for (let i = 0; i < body.length; i++) {
+      const node = body[i];
+      if (node.type !== 'ExpressionStatement' || !node.directive) {
+        break;
+      }
+      if (node.directive === 'use client') {
+        useClient = true;
+      }
+      if (node.directive === 'use server') {
+        useServer = true;
+      }
+    }
+
+    if (!useClient && !useServer) {
+      return originalCompile.apply(this, arguments);
+    }
+
+    if (useClient && useServer) {
+      throw new Error(
+        'Cannot have both "use client" and "use server" directives in the same file.',
+      );
+    }
+
+    if (useClient) {
+      const moduleId: string = (url.pathToFileURL(filename).href: any);
+      this.exports = createClientModuleProxy(moduleId);
+    }
+
+    if (useServer) {
+      originalCompile.apply(this, arguments);
+
+      const moduleId: string = (url.pathToFileURL(filename).href: any);
+
+      const exports = this.exports;
+
+      // This module is imported server to server, but opts in to exposing functions by
+      // reference. If there are any functions in the export.
+      if (typeof exports === 'function') {
+        // The module exports a function directly,
+        registerServerReference(
+          (exports: any),
+          moduleId,
+          // Represents the whole Module object instead of a particular import.
+          null,
+        );
+      } else {
+        const keys = Object.keys(exports);
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i];
+          const value = exports[keys[i]];
+          if (typeof value === 'function') {
+            registerServerReference((value: any), moduleId, key);
+          }
+        }
+      }
+    }
+  };
+};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
new file mode 100644
index 00000000000..59723c903f6
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -0,0 +1,526 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ImportManifestEntry} from './shared/ReactFlightImportMetadata';
+
+import {join} from 'path';
+import {pathToFileURL} from 'url';
+import asyncLib from 'neo-async';
+import * as acorn from 'acorn-loose';
+
+import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
+import NullDependency from 'webpack/lib/dependencies/NullDependency';
+import Template from 'webpack/lib/Template';
+import {
+  sources,
+  WebpackError,
+  Compilation,
+  AsyncDependenciesBlock,
+} from 'webpack';
+
+import isArray from 'shared/isArray';
+
+class ClientReferenceDependency extends ModuleDependency {
+  constructor(request: mixed) {
+    super(request);
+  }
+
+  get type(): string {
+    return 'client-reference';
+  }
+}
+
+// This is the module that will be used to anchor all client references to.
+// I.e. it will have all the client files as async deps from this point on.
+// We use the Flight client implementation because you can't get to these
+// without the client runtime so it's the first time in the loading sequence
+// you might want them.
+const clientImportName = 'react-server-dom-webpack/client';
+const clientFileName = require.resolve('../client.browser.js');
+
+type ClientReferenceSearchPath = {
+  directory: string,
+  recursive?: boolean,
+  include: RegExp,
+  exclude?: RegExp,
+};
+
+type ClientReferencePath = string | ClientReferenceSearchPath;
+
+type Options = {
+  isServer: boolean,
+  clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
+  chunkName?: string,
+  clientManifestFilename?: string,
+  serverConsumerManifestFilename?: string,
+};
+
+const PLUGIN_NAME = 'React Server Plugin';
+
+export default class ReactFlightWebpackPlugin {
+  clientReferences: $ReadOnlyArray<ClientReferencePath>;
+  chunkName: string;
+  clientManifestFilename: string;
+  serverConsumerManifestFilename: string;
+
+  constructor(options: Options) {
+    if (!options || typeof options.isServer !== 'boolean') {
+      throw new Error(
+        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',
+      );
+    }
+    if (options.isServer) {
+      throw new Error('TODO: Implement the server compiler.');
+    }
+    if (!options.clientReferences) {
+      this.clientReferences = [
+        {
+          directory: '.',
+          recursive: true,
+          include: /\.(js|ts|jsx|tsx)$/,
+        },
+      ];
+    } else if (
+      typeof options.clientReferences === 'string' ||
+      !isArray(options.clientReferences)
+    ) {
+      this.clientReferences = [(options.clientReferences: $FlowFixMe)];
+    } else {
+      // $FlowFixMe[incompatible-type] found when upgrading Flow
+      this.clientReferences = options.clientReferences;
+    }
+    if (typeof options.chunkName === 'string') {
+      this.chunkName = options.chunkName;
+      if (!/\[(index|request)\]/.test(this.chunkName)) {
+        this.chunkName += '[index]';
+      }
+    } else {
+      this.chunkName = 'client[index]';
+    }
+    this.clientManifestFilename =
+      options.clientManifestFilename || 'react-client-manifest.json';
+    this.serverConsumerManifestFilename =
+      options.serverConsumerManifestFilename || 'react-ssr-manifest.json';
+  }
+
+  apply(compiler: any) {
+    const _this = this;
+    let resolvedClientReferences;
+    let clientFileNameFound = false;
+
+    // Find all client files on the file system
+    compiler.hooks.beforeCompile.tapAsync(
+      PLUGIN_NAME,
+      ({contextModuleFactory}, callback) => {
+        const contextResolver = compiler.resolverFactory.get('context', {});
+        const normalResolver = compiler.resolverFactory.get('normal');
+
+        _this.resolveAllClientFiles(
+          compiler.context,
+          contextResolver,
+          normalResolver,
+          compiler.inputFileSystem,
+          contextModuleFactory,
+          function (err, resolvedClientRefs) {
+            if (err) {
+              callback(err);
+              return;
+            }
+
+            resolvedClientReferences = resolvedClientRefs;
+            callback();
+          },
+        );
+      },
+    );
+
+    compiler.hooks.thisCompilation.tap(
+      PLUGIN_NAME,
+      (compilation, {normalModuleFactory}) => {
+        compilation.dependencyFactories.set(
+          ClientReferenceDependency,
+          normalModuleFactory,
+        );
+        compilation.dependencyTemplates.set(
+          ClientReferenceDependency,
+          new NullDependency.Template(),
+        );
+
+        // $FlowFixMe[missing-local-annot]
+        const handler = parser => {
+          // We need to add all client references as dependency of something in the graph so
+          // Webpack knows which entries need to know about the relevant chunks and include the
+          // map in their runtime. The things that actually resolves the dependency is the Flight
+          // client runtime. So we add them as a dependency of the Flight client runtime.
+          // Anything that imports the runtime will be made aware of these chunks.
+          parser.hooks.program.tap(PLUGIN_NAME, () => {
+            const module = parser.state.module;
+
+            if (module.resource !== clientFileName) {
+              return;
+            }
+
+            clientFileNameFound = true;
+
+            if (resolvedClientReferences) {
+              // $FlowFixMe[incompatible-use] found when upgrading Flow
+              for (let i = 0; i < resolvedClientReferences.length; i++) {
+                // $FlowFixMe[incompatible-use] found when upgrading Flow
+                const dep = resolvedClientReferences[i];
+
+                const chunkName = _this.chunkName
+                  .replace(/\[index\]/g, '' + i)
+                  .replace(/\[request\]/g, Template.toPath(dep.userRequest));
+
+                const block = new AsyncDependenciesBlock(
+                  {
+                    name: chunkName,
+                  },
+                  null,
+                  dep.request,
+                );
+
+                block.addDependency(dep);
+                module.addBlock(block);
+              }
+            }
+          });
+        };
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/auto')
+          .tap('HarmonyModulesPlugin', handler);
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/esm')
+          .tap('HarmonyModulesPlugin', handler);
+
+        normalModuleFactory.hooks.parser
+          .for('javascript/dynamic')
+          .tap('HarmonyModulesPlugin', handler);
+      },
+    );
+
+    compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
+        },
+        function () {
+          if (clientFileNameFound === false) {
+            compilation.warnings.push(
+              new WebpackError(
+                `Client runtime at ${clientImportName} was not found. React Server Components module map file ${_this.clientManifestFilename} was not created.`,
+              ),
+            );
+            return;
+          }
+
+          const configuredCrossOriginLoading =
+            compilation.outputOptions.crossOriginLoading;
+          const crossOriginMode =
+            typeof configuredCrossOriginLoading === 'string'
+              ? configuredCrossOriginLoading === 'use-credentials'
+                ? configuredCrossOriginLoading
+                : 'anonymous'
+              : null;
+
+          const resolvedClientFiles = new Set(
+            (resolvedClientReferences || []).map(ref => ref.request),
+          );
+
+          const clientManifest: {
+            [string]: ImportManifestEntry,
+          } = {};
+          type ServerConsumerModuleMap = {
+            [string]: {
+              [string]: {specifier: string, name: string},
+            },
+          };
+          const moduleMap: ServerConsumerModuleMap = {};
+          const ssrBundleConfig: {
+            moduleLoading: {
+              prefix: string,
+              crossOrigin: string | null,
+            },
+            moduleMap: ServerConsumerModuleMap,
+          } = {
+            moduleLoading: {
+              prefix: compilation.outputOptions.publicPath || '',
+              crossOrigin: crossOriginMode,
+            },
+            moduleMap,
+          };
+
+          // We figure out which files are always loaded by any initial chunk (entrypoint).
+          // We use this to filter out chunks that Flight will never need to load
+          const emptySet: Set<string> = new Set();
+          const runtimeChunkFiles: Set<string> = emptySet;
+          compilation.entrypoints.forEach(entrypoint => {
+            const runtimeChunk = entrypoint.getRuntimeChunk();
+            if (runtimeChunk) {
+              runtimeChunk.files.forEach(runtimeFile => {
+                runtimeChunkFiles.add(runtimeFile);
+              });
+            }
+          });
+
+          compilation.chunkGroups.forEach(function (chunkGroup) {
+            const chunks: Array<string> = [];
+            chunkGroup.chunks.forEach(function (c) {
+              // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+              for (const file of c.files) {
+                if (!(file.endsWith('.js') || file.endsWith('.mjs'))) {
+                  return;
+                }
+                if (
+                  file.endsWith('.hot-update.js') ||
+                  file.endsWith('.hot-update.mjs')
+                )
+                  return;
+                chunks.push(c.id, file);
+                break;
+              }
+            });
+
+            // $FlowFixMe[missing-local-annot]
+            function recordModule(id: $FlowFixMe, module) {
+              // TODO: Hook into deps instead of the target module.
+              // That way we know by the type of dep whether to include.
+              // It also resolves conflicts when the same module is in multiple chunks.
+              if (!resolvedClientFiles.has(module.resource)) {
+                return;
+              }
+
+              const href = pathToFileURL(module.resource).href;
+
+              if (href !== undefined) {
+                const ssrExports: {
+                  [string]: {specifier: string, name: string},
+                } = {};
+
+                clientManifest[href] = {
+                  id,
+                  chunks,
+                  name: '*',
+                };
+                ssrExports['*'] = {
+                  specifier: href,
+                  name: '*',
+                };
+
+                // TODO: If this module ends up split into multiple modules, then
+                // we should encode each the chunks needed for the specific export.
+                // When the module isn't split, it doesn't matter and we can just
+                // encode the id of the whole module. This code doesn't currently
+                // deal with module splitting so is likely broken from ESM anyway.
+                /*
+                clientManifest[href + '#'] = {
+                  id,
+                  chunks,
+                  name: '',
+                };
+                ssrExports[''] = {
+                  specifier: href,
+                  name: '',
+                };
+
+                const moduleProvidedExports = compilation.moduleGraph
+                  .getExportsInfo(module)
+                  .getProvidedExports();
+
+                if (Array.isArray(moduleProvidedExports)) {
+                  moduleProvidedExports.forEach(function (name) {
+                    clientManifest[href + '#' + name] = {
+                      id,
+                      chunks,
+                      name: name,
+                    };
+                    ssrExports[name] = {
+                      specifier: href,
+                      name: name,
+                    };
+                  });
+                }
+                */
+
+                moduleMap[id] = ssrExports;
+              }
+            }
+
+            chunkGroup.chunks.forEach(function (chunk) {
+              const chunkModules =
+                compilation.chunkGraph.getChunkModulesIterable(chunk);
+
+              Array.from(chunkModules).forEach(function (module) {
+                const moduleId = compilation.chunkGraph.getModuleId(module);
+
+                recordModule(moduleId, module);
+                // If this is a concatenation, register each child to the parent ID.
+                if (module.modules) {
+                  module.modules.forEach(concatenatedMod => {
+                    recordModule(moduleId, concatenatedMod);
+                  });
+                }
+              });
+            });
+          });
+
+          const clientOutput = JSON.stringify(clientManifest, null, 2);
+          compilation.emitAsset(
+            _this.clientManifestFilename,
+            new sources.RawSource(clientOutput, false),
+          );
+          const ssrOutput = JSON.stringify(ssrBundleConfig, null, 2);
+          compilation.emitAsset(
+            _this.serverConsumerManifestFilename,
+            new sources.RawSource(ssrOutput, false),
+          );
+        },
+      );
+    });
+  }
+
+  // This attempts to replicate the dynamic file path resolution used for other wildcard
+  // resolution in Webpack is using.
+  resolveAllClientFiles(
+    context: string,
+    contextResolver: any,
+    normalResolver: any,
+    fs: any,
+    contextModuleFactory: any,
+    callback: (
+      err: null | Error,
+      result?: $ReadOnlyArray<ClientReferenceDependency>,
+    ) => void,
+  ) {
+    function hasUseClientDirective(source: string): boolean {
+      if (source.indexOf('use client') === -1) {
+        return false;
+      }
+      let body;
+      try {
+        body = acorn.parse(source, {
+          ecmaVersion: '2024',
+          sourceType: 'module',
+        }).body;
+      } catch (x) {
+        return false;
+      }
+      for (let i = 0; i < body.length; i++) {
+        const node = body[i];
+        if (node.type !== 'ExpressionStatement' || !node.directive) {
+          break;
+        }
+        if (node.directive === 'use client') {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    asyncLib.map(
+      this.clientReferences,
+      (
+        clientReferencePath: string | ClientReferenceSearchPath,
+        cb: (
+          err: null | Error,
+          result?: $ReadOnlyArray<ClientReferenceDependency>,
+        ) => void,
+      ): void => {
+        if (typeof clientReferencePath === 'string') {
+          cb(null, [new ClientReferenceDependency(clientReferencePath)]);
+          return;
+        }
+        const clientReferenceSearch: ClientReferenceSearchPath =
+          clientReferencePath;
+        contextResolver.resolve(
+          {},
+          context,
+          clientReferencePath.directory,
+          {},
+          (err, resolvedDirectory) => {
+            if (err) return cb(err);
+            const options = {
+              resource: resolvedDirectory,
+              resourceQuery: '',
+              recursive:
+                clientReferenceSearch.recursive === undefined
+                  ? true
+                  : clientReferenceSearch.recursive,
+              regExp: clientReferenceSearch.include,
+              include: undefined,
+              exclude: clientReferenceSearch.exclude,
+            };
+            contextModuleFactory.resolveDependencies(
+              fs,
+              options,
+              (err2: null | Error, deps: Array<any /*ModuleDependency*/>) => {
+                if (err2) return cb(err2);
+
+                const clientRefDeps = deps.map(dep => {
+                  // use userRequest instead of request. request always end with undefined which is wrong
+                  const request = join(resolvedDirectory, dep.userRequest);
+                  const clientRefDep = new ClientReferenceDependency(request);
+                  clientRefDep.userRequest = dep.userRequest;
+                  return clientRefDep;
+                });
+
+                asyncLib.filter(
+                  clientRefDeps,
+                  (
+                    clientRefDep: ClientReferenceDependency,
+                    filterCb: (err: null | Error, truthValue: boolean) => void,
+                  ) => {
+                    normalResolver.resolve(
+                      {},
+                      context,
+                      clientRefDep.request,
+                      {},
+                      (err3: null | Error, resolvedPath: mixed) => {
+                        if (err3 || typeof resolvedPath !== 'string') {
+                          return filterCb(null, false);
+                        }
+                        fs.readFile(
+                          resolvedPath,
+                          'utf-8',
+                          (err4: null | Error, content: string) => {
+                            if (err4 || typeof content !== 'string') {
+                              return filterCb(null, false);
+                            }
+                            const useClient = hasUseClientDirective(content);
+                            filterCb(null, useClient);
+                          },
+                        );
+                      },
+                    );
+                  },
+                  cb,
+                );
+              },
+            );
+          },
+        );
+      },
+      (
+        err: null | Error,
+        result: $ReadOnlyArray<$ReadOnlyArray<ClientReferenceDependency>>,
+      ): void => {
+        if (err) return callback(err);
+        const flat: Array<any> = [];
+        for (let i = 0; i < result.length; i++) {
+          // $FlowFixMe[method-unbinding]
+          flat.push.apply(flat, result[i]);
+        }
+        callback(null, flat);
+      },
+    );
+  }
+}
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
new file mode 100644
index 00000000000..07646e18ec4
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
@@ -0,0 +1,360 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+  $$async: boolean,
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  exportName: string,
+): ClientReference<T> {
+  return registerClientReferenceImpl(
+    proxyImplementation,
+    id + '#' + exportName,
+    false,
+  );
+}
+
+function registerClientReferenceImpl<T>(
+  proxyImplementation: any,
+  id: string,
+  async: boolean,
+): ClientReference<T> {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {value: CLIENT_REFERENCE_TAG},
+    $$id: {value: id},
+    $$async: {value: async},
+  });
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>): any {
+  // $FlowFixMe[incompatible-call]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
+    const args = ArraySlice.call(arguments, 1);
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      (__DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          }) as PropertyDescriptorMap,
+    );
+  }
+  return newFn;
+}
+
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
+export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+  exportName: null | string,
+): ServerReference<T> {
+  const $$typeof = {value: SERVER_REFERENCE_TAG};
+  const $$id = {
+    value: exportName === null ? id : id + '#' + exportName,
+    configurable: true,
+  };
+  const $$bound = {value: null, configurable: true};
+  return Object.defineProperties(
+    (reference: any),
+    __DEV__
+      ? ({
+          $$typeof,
+          $$id,
+          $$bound,
+          $$location: {
+            value: Error('react-stack-top-frame'),
+            configurable: true,
+          },
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        } as PropertyDescriptorMap)
+      : ({
+          $$typeof,
+          $$id,
+          $$bound,
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        } as PropertyDescriptorMap),
+  );
+}
+
+const PROMISE_PROTOTYPE = Promise.prototype;
+
+const deepProxyHandlers: Proxy$traps<mixed> = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        // These names are a little too common. We should probably have a way to
+        // have the Flight runtime extract the inner target instead.
+        return target.$$typeof;
+      case '$$id':
+        return target.$$id;
+      case '$$async':
+        return target.$$async;
+      case 'name':
+        return target.name;
+      case 'displayName':
+        return undefined;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+      case 'defaultProps':
+        return undefined;
+      // React looks for debugInfo on thenables.
+      case '_debugInfo':
+        return undefined;
+      // Avoid this attempting to be serialized.
+      case 'toJSON':
+        return undefined;
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+      case 'Provider':
+        throw new Error(
+          `Cannot render a Client Context Provider on the Server. ` +
+            `Instead, you can export a Client Component wrapper ` +
+            `that itself renders a Client Context Provider.`,
+        );
+      case 'then':
+        throw new Error(
+          `Cannot await or return from a thenable. ` +
+            `You cannot await a client module from a server component.`,
+        );
+    }
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const expression = String(target.name) + '.' + String(name);
+    throw new Error(
+      `Cannot access ${expression} on the server. ` +
+        'You cannot dot into a client module from a server component. ' +
+        'You can only pass the imported name through.',
+    );
+  },
+  set: function () {
+    throw new Error('Cannot assign to a client module from a server module.');
+  },
+};
+
+function getReference(target: Function, name: string | symbol): $FlowFixMe {
+  switch (name) {
+    // These names are read by the Flight runtime if you end up using the exports object.
+    case '$$typeof':
+      return target.$$typeof;
+    case '$$id':
+      return target.$$id;
+    case '$$async':
+      return target.$$async;
+    case 'name':
+      return target.name;
+    // We need to special case this because createElement reads it if we pass this
+    // reference.
+    case 'defaultProps':
+      return undefined;
+    // React looks for debugInfo on thenables.
+    case '_debugInfo':
+      return undefined;
+    // Avoid this attempting to be serialized.
+    case 'toJSON':
+      return undefined;
+    case Symbol.toPrimitive:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toPrimitive];
+    case Symbol.toStringTag:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toStringTag];
+    case '__esModule':
+      // Something is conditionally checking which export to use. We'll pretend to be
+      // an ESM compat module but then we'll check again on the client.
+      const moduleId = target.$$id;
+      target.default = registerClientReferenceImpl(
+        (function () {
+          throw new Error(
+            `Attempted to call the default export of ${moduleId} from the server ` +
+              `but it's on the client. It's not possible to invoke a client function from ` +
+              `the server, it can only be rendered as a Component or passed to props of a ` +
+              `Client Component.`,
+          );
+        }: any),
+        target.$$id + '#',
+        target.$$async,
+      );
+      return true;
+    case 'then':
+      if (target.then) {
+        // Use a cached value
+        return target.then;
+      }
+      if (!target.$$async) {
+        // If this module is expected to return a Promise (such as an AsyncModule) then
+        // we should resolve that with a client reference that unwraps the Promise on
+        // the client.
+
+        const clientReference: ClientReference<any> =
+          registerClientReferenceImpl(({}: any), target.$$id, true);
+        const proxy = new Proxy(clientReference, proxyHandlers);
+
+        // Treat this as a resolved Promise for React's use()
+        target.status = 'fulfilled';
+        target.value = proxy;
+
+        const then = (target.then = registerClientReferenceImpl(
+          (function then(resolve, reject: any) {
+            // Expose to React.
+            return Promise.resolve(resolve(proxy));
+          }: any),
+          // If this is not used as a Promise but is treated as a reference to a `.then`
+          // export then we should treat it as a reference to that name.
+          target.$$id + '#then',
+          false,
+        ));
+        return then;
+      } else {
+        // Since typeof .then === 'function' is a feature test we'd continue recursing
+        // indefinitely if we return a function. Instead, we return an object reference
+        // if we check further.
+        return undefined;
+      }
+  }
+  if (typeof name === 'symbol') {
+    throw new Error(
+      'Cannot read Symbol exports. Only named exports are supported on a client module ' +
+        'imported on the server.',
+    );
+  }
+  let cachedReference = target[name];
+  if (!cachedReference) {
+    const reference: ClientReference<any> = registerClientReferenceImpl(
+      (function () {
+        throw new Error(
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          `Attempted to call ${String(name)}() from the server but ${String(
+            name,
+          )} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        );
+      }: any),
+      target.$$id + '#' + name,
+      target.$$async,
+    );
+    Object.defineProperty((reference: any), 'name', {value: name});
+    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+  }
+  return cachedReference;
+}
+
+const proxyHandlers = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ): $FlowFixMe {
+    return getReference(target, name);
+  },
+  getOwnPropertyDescriptor: function (
+    target: Function,
+    name: string | symbol,
+  ): $FlowFixMe {
+    let descriptor = Object.getOwnPropertyDescriptor(target, name);
+    if (!descriptor) {
+      descriptor = {
+        value: getReference(target, name),
+        writable: false,
+        configurable: false,
+        enumerable: false,
+      };
+      Object.defineProperty(target, name, descriptor);
+    }
+    return descriptor;
+  },
+  getPrototypeOf(target: Function): Object {
+    // Pretend to be a Promise in case anyone asks.
+    return PROMISE_PROTOTYPE;
+  },
+  set: function (): empty {
+    throw new Error('Cannot assign to a client module from a server module.');
+  },
+};
+
+export function createClientModuleProxy<T>(
+  moduleId: string,
+): ClientReference<T> {
+  const clientReference: ClientReference<T> = registerClientReferenceImpl(
+    ({}: any),
+    // Represents the whole Module object instead of a particular import.
+    moduleId,
+    false,
+  );
+  return new Proxy(clientReference, proxyHandlers);
+}
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
new file mode 100644
index 00000000000..728b8ac197d
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -0,0 +1,3187 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
+import {Readable} from 'stream';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+let act;
+let serverAct;
+let use;
+let clientExports;
+let clientExportsESM;
+let clientModuleError;
+let webpackMap;
+let Stream;
+let FlightReact;
+let React;
+let FlightReactDOM;
+let ReactDOMClient;
+let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
+let ReactServerDOMClient;
+let ReactDOMFizzServer;
+let Suspense;
+let ErrorBoundary;
+let JSDOM;
+let assertConsoleErrorDev;
+
+describe('ReactFlightDOM', () => {
+  beforeEach(() => {
+    // For this first reset we are going to load the dom-node version of react-server-dom-webpack/server
+    // This can be thought of as essentially being the React Server Components scope with react-server
+    // condition
+    jest.resetModules();
+
+    // Some of the tests pollute the head.
+    document.head.innerHTML = '';
+
+    JSDOM = require('jsdom').JSDOM;
+
+    patchSetImmediate();
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    FlightReact = require('react');
+    FlightReactDOM = require('react-dom');
+
+    jest.mock('react-server-dom-webpack/server', () =>
+      require('react-server-dom-unbundled/server.node'),
+    );
+    jest.mock('react-server-dom-webpack/static', () =>
+      require('react-server-dom-unbundled/static.node'),
+    );
+    const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
+    clientExportsESM = WebpackMock.clientExportsESM;
+    clientModuleError = WebpackMock.clientModuleError;
+    webpackMap = WebpackMock.webpackMap;
+
+    ReactServerDOMServer = require('react-server-dom-webpack/server');
+    ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+
+    // This reset is to load modules for the SSR/Browser scope.
+    jest.unmock('react-server-dom-webpack/server');
+    __unmockReact();
+    jest.resetModules();
+    act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+    Stream = require('stream');
+    React = require('react');
+    use = React.use;
+    Suspense = React.Suspense;
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server.node');
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+
+    ErrorBoundary = class 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;
+      }
+    };
+  });
+
+  async function readInto(
+    container: Document | HTMLElement,
+    stream: ReadableStream,
+  ) {
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        content += decoder.decode();
+        break;
+      }
+      content += decoder.decode(value, {stream: true});
+    }
+    if (container.nodeType === 9 /* DOCUMENT */) {
+      const doc = new JSDOM(content).window.document;
+      container.documentElement.innerHTML = doc.documentElement.innerHTML;
+      while (container.documentElement.attributes.length > 0) {
+        container.documentElement.removeAttribute(
+          container.documentElement.attributes[0].name,
+        );
+      }
+      const attrs = doc.documentElement.attributes;
+      for (let i = 0; i < attrs.length; i++) {
+        container.documentElement.setAttribute(attrs[i].name, attrs[i].value);
+      }
+    } else {
+      container.innerHTML = content;
+    }
+  }
+
+  function getTestStream() {
+    const writable = new Stream.PassThrough();
+    const readable = new ReadableStream({
+      start(controller) {
+        writable.on('data', chunk => {
+          controller.enqueue(chunk);
+        });
+        writable.on('end', () => {
+          controller.close();
+        });
+      },
+    });
+    return {
+      readable,
+      writable,
+    };
+  }
+
+  function createUnclosingStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    const reader = stream.getReader();
+
+    const s = new ReadableStream({
+      async pull(controller) {
+        const {done, value} = await reader.read();
+        if (!done) {
+          controller.enqueue(value);
+        }
+      },
+    });
+
+    return s;
+  }
+
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  function getMeaningfulChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          // some tags are ambiguous and might be hidden because they look like non-meaningful children
+          // so we have a global override where if this data attribute is included we also include the node
+          node.hasAttribute('data-meaningful') ||
+          (node.tagName === 'SCRIPT' &&
+            node.hasAttribute('src') &&
+            node.hasAttribute('async')) ||
+          (node.tagName !== 'SCRIPT' &&
+            node.tagName !== 'TEMPLATE' &&
+            node.tagName !== 'template' &&
+            !node.hasAttribute('hidden') &&
+            !node.hasAttribute('aria-hidden') &&
+            // Ignore the render blocking expect
+            (node.getAttribute('rel') !== 'expect' ||
+              node.getAttribute('blocking') !== 'render'))
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getMeaningfulChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+        ? children[0]
+        : children;
+  }
+
+  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() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<App />, webpackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
+    });
+  });
+
+  it('should resolve the root', async () => {
+    // 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({response}) {
+      return <section>{use(response).html}</section>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<RootModel />, webpackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe(
+      '<section><div><span>hello</span><span>world</span></div></section>',
+    );
+  });
+
+  it('should not get confused by $', async () => {
+    // Model
+    function RootModel() {
+      return {text: '$1'};
+    }
+
+    // View
+    function Message({response}) {
+      return <p>{use(response).text}</p>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<RootModel />, webpackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>$1</p>');
+  });
+
+  it('should not get confused by @', async () => {
+    // Model
+    function RootModel() {
+      return {text: '@div'};
+    }
+
+    // View
+    function Message({response}) {
+      return <p>{use(response).text}</p>;
+    }
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Message response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<RootModel />, webpackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>@div</p>');
+  });
+
+  it('should be able to esm compat test module references', async () => {
+    const ESMCompatModule = {
+      __esModule: true,
+      default: function ({greeting}) {
+        return greeting + ' World';
+      },
+      hi: 'Hello',
+    };
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    function interopWebpack(obj) {
+      // Basically what Webpack's ESM interop feature testing does.
+      if (typeof obj === 'object' && obj.__esModule) {
+        return obj;
+      }
+      return Object.assign({default: obj}, obj);
+    }
+
+    const {default: Component, hi} = interopWebpack(
+      clientExports(ESMCompatModule),
+    );
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <Component greeting={hi} />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Hello World</p>');
+  });
+
+  it('should be able to render a named component export', async () => {
+    const Module = {
+      Component: function ({greeting}) {
+        return greeting + ' World';
+      },
+    };
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const {Component} = clientExports(Module);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <Component greeting={'Hello'} />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Hello World</p>');
+  });
+
+  it('should be able to render a module split named component export', async () => {
+    const Module = {
+      // This gets split into a separate module from the original one.
+      split: function ({greeting}) {
+        return greeting + ' World';
+      },
+    };
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const {split: Component} = clientExports(Module);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <Component greeting={'Hello'} />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Hello World</p>');
+  });
+
+  it('should unwrap async module references', async () => {
+    const AsyncModule = Promise.resolve(function AsyncModule({text}) {
+      return 'Async: ' + text;
+    });
+
+    const AsyncModule2 = Promise.resolve({
+      exportName: 'Module',
+    });
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const AsyncModuleRef = await clientExports(AsyncModule);
+    const AsyncModuleRef2 = await clientExports(AsyncModule2);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <AsyncModuleRef text={AsyncModuleRef2.exportName} />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Async: Module</p>');
+  });
+
+  it('should unwrap async module references using use', async () => {
+    const AsyncModule = Promise.resolve('Async Text');
+
+    function Print({response}) {
+      return use(response);
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const AsyncModuleRef = clientExports(AsyncModule);
+
+    function ServerComponent() {
+      const text = FlightReact.use(AsyncModuleRef);
+      return <p>{text}</p>;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Async Text</p>');
+  });
+
+  it('should unwrap async ESM module references', async () => {
+    const AsyncModule = Promise.resolve(function AsyncModule({text}) {
+      return 'Async: ' + text;
+    });
+
+    const AsyncModule2 = Promise.resolve({
+      exportName: 'Module',
+    });
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const AsyncModuleRef = await clientExportsESM(AsyncModule);
+    const AsyncModuleRef2 = await clientExportsESM(AsyncModule2);
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <AsyncModuleRef text={AsyncModuleRef2.exportName} />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Async: Module</p>');
+  });
+
+  it('should error when a bundler uses async ESM modules with createClientModuleProxy', async () => {
+    const AsyncModule = Promise.resolve(function AsyncModule() {
+      return 'This should not be rendered';
+    });
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <ErrorBoundary
+          fallback={error => (
+            <p>
+              {__DEV__ ? error.message + ' + ' : null}
+              {error.digest}
+            </p>
+          )}>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <Print response={response} />
+          </Suspense>
+        </ErrorBoundary>
+      );
+    }
+
+    const AsyncModuleRef = await clientExportsESM(AsyncModule, {
+      forceClientModuleProxy: true,
+    });
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <AsyncModuleRef />,
+        webpackMap,
+        {
+          onError(error) {
+            return __DEV__ ? 'a dev digest' : `digest(${error.message})`;
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+
+    const errorMessage = `The module "${Object.keys(webpackMap).at(0)}" is marked as an async ESM module but was loaded as a CJS proxy. This is probably a bug in the React Server Components bundler.`;
+
+    expect(container.innerHTML).toBe(
+      __DEV__
+        ? `<p>${errorMessage} + a dev digest</p>`
+        : `<p>digest(${errorMessage})</p>`,
+    );
+  });
+
+  it('should be able to import a name called "then"', async () => {
+    const thenExports = {
+      then: function then() {
+        return 'and then';
+      },
+    };
+
+    function Print({response}) {
+      return <p>{use(response)}</p>;
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const ThenRef = clientExports(thenExports).then;
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<ThenRef />, webpackMap),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>and then</p>');
+  });
+
+  it('throws when accessing a member below the client exports', () => {
+    const ClientModule = clientExports({
+      Component: {deep: 'thing'},
+    });
+    function dotting() {
+      return ClientModule.Component.deep;
+    }
+    expect(dotting).toThrowError(
+      'Cannot access Component.deep on the server. ' +
+        'You cannot dot into a client module from a server component. ' +
+        'You can only pass the imported name through.',
+    );
+  });
+
+  it('throws when await a client module prop of client exports', async () => {
+    const ClientModule = clientExports({
+      Component: {deep: 'thing'},
+    });
+    async function awaitExport() {
+      const mod = await ClientModule;
+      return await Promise.resolve(mod.Component);
+    }
+    await expect(awaitExport()).rejects.toThrowError(
+      `Cannot await or return from a thenable. ` +
+        `You cannot await a client module from a server component.`,
+    );
+  });
+
+  it('throws when accessing a symbol prop from client exports', () => {
+    const symbol = Symbol('test');
+    const ClientModule = clientExports({
+      Component: {deep: 'thing'},
+    });
+    function read() {
+      return ClientModule[symbol];
+    }
+    expect(read).toThrowError(
+      'Cannot read Symbol exports. ' +
+        'Only named exports are supported on a client module imported on the server.',
+    );
+  });
+
+  it('does not throw when toString:ing client exports', () => {
+    const ClientModule = clientExports({
+      Component: {deep: 'thing'},
+    });
+    expect(Object.prototype.toString.call(ClientModule)).toBe(
+      '[object Object]',
+    );
+    expect(Object.prototype.toString.call(ClientModule.Component)).toBe(
+      '[object Function]',
+    );
+  });
+
+  it('does not throw when React inspects any deep props', () => {
+    const ClientModule = clientExports({
+      Component: function () {},
+    });
+    <ClientModule.Component key="this adds instrumentation" />;
+  });
+
+  it('throws when accessing a Context.Provider below the client exports', () => {
+    const Context = React.createContext();
+    const ClientModule = clientExports({
+      Context,
+    });
+    function dotting() {
+      return ClientModule.Context.Provider;
+    }
+    expect(dotting).toThrowError(
+      `Cannot render a Client Context Provider on the Server. ` +
+        `Instead, you can export a Client Component wrapper ` +
+        `that itself renders a Client Context Provider.`,
+    );
+  });
+
+  it('should progressively reveal server components', async () => {
+    let reportedErrors = [];
+
+    // Client Components
+
+    function MyErrorBoundary({children}) {
+      return (
+        <ErrorBoundary
+          fallback={e => (
+            <p>
+              {__DEV__ ? e.message + ' + ' : null}
+              {e.digest}
+            </p>
+          )}>
+          {children}
+        </ErrorBoundary>
+      );
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    function makeDelayedText() {
+      let _resolve, _reject;
+      let promise = new Promise((resolve, reject) => {
+        _resolve = () => {
+          promise = null;
+          resolve();
+        };
+        _reject = e => {
+          promise = null;
+          reject(e);
+        };
+      });
+      async function DelayedText({children}) {
+        await promise;
+        return <Text>{children}</Text>;
+      }
+      return [DelayedText, _resolve, _reject];
+    }
+
+    const [Friends, resolveFriends] = makeDelayedText();
+    const [Name, resolveName] = makeDelayedText();
+    const [Posts, resolvePosts] = makeDelayedText();
+    const [Photos, resolvePhotos] = makeDelayedText();
+    const [Games, , rejectGames] = makeDelayedText();
+
+    // View
+    function ProfileDetails({avatar}) {
+      return (
+        <div>
+          <Name>:name:</Name>
+          {avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({friends}) {
+      return (
+        <div>
+          <Photos>:photos:</Photos>
+          {friends}
+        </div>
+      );
+    }
+    function ProfilePosts({posts}) {
+      return <div>{posts}</div>;
+    }
+    function ProfileGames({games}) {
+      return <div>{games}</div>;
+    }
+
+    const MyErrorBoundaryClient = clientExports(MyErrorBoundary);
+
+    function ProfileContent() {
+      return (
+        <>
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <Suspense fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </Suspense>
+          <MyErrorBoundaryClient>
+            <Suspense fallback={<p>(loading games)</p>}>
+              <ProfileGames games={<Games>:games:</Games>} />
+            </Suspense>
+          </MyErrorBoundaryClient>
+        </>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    function ProfilePage({response}) {
+      return use(response).rootContent;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(model, webpackMap, {
+        onError(x) {
+          reportedErrors.push(x);
+          return __DEV__ ? 'a dev digest' : `digest("${x.message}")`;
+        },
+      }),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <ProfilePage response={response} />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // This isn't enough to show anything.
+    await serverAct(async () => {
+      await act(() => {
+        resolveFriends();
+      });
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await serverAct(async () => {
+      await act(() => {
+        resolveName();
+      });
+    });
+    // Advance time enough to trigger a nested fallback.
+    await act(() => {
+      jest.advanceTimersByTime(500);
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>(loading games)</p>',
+    );
+
+    expect(reportedErrors).toEqual([]);
+
+    const theError = new Error('Game over');
+    // Let's *fail* loading games.
+    await serverAct(async () => {
+      await act(async () => {
+        await rejectGames(theError);
+        await 'the inner async function';
+      });
+    });
+    const expectedGamesValue = __DEV__
+      ? '<p>Game over + a dev digest</p>'
+      : '<p>digest("Game over")</p>';
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        expectedGamesValue,
+    );
+
+    expect(reportedErrors).toEqual([theError]);
+    reportedErrors = [];
+
+    // We can now show the sidebar.
+    await serverAct(async () => {
+      await act(async () => {
+        await resolvePhotos();
+        await 'the inner async function';
+      });
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        expectedGamesValue,
+    );
+
+    // Show everything.
+    await serverAct(async () => {
+      await act(async () => {
+        await resolvePosts();
+        await 'the inner async function';
+      });
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        expectedGamesValue,
+    );
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should handle streaming async server components', async () => {
+    const reportedErrors = [];
+
+    const Row = async ({current, next}) => {
+      const chunk = await next;
+
+      if (chunk.done) {
+        return chunk.value;
+      }
+
+      return (
+        <Suspense fallback={chunk.value}>
+          <Row current={chunk.value} next={chunk.next} />
+        </Suspense>
+      );
+    };
+
+    function createResolvablePromise() {
+      let _resolve, _reject;
+
+      const promise = new Promise((resolve, reject) => {
+        _resolve = resolve;
+        _reject = reject;
+      });
+
+      return {promise, resolve: _resolve, reject: _reject};
+    }
+
+    function createSuspendedChunk(initialValue) {
+      const {promise, resolve, reject} = createResolvablePromise();
+
+      return {
+        row: (
+          <Suspense fallback={initialValue}>
+            <Row current={initialValue} next={promise} />
+          </Suspense>
+        ),
+        resolve,
+        reject,
+      };
+    }
+
+    function makeDelayedText() {
+      const {promise, resolve, reject} = createResolvablePromise();
+      async function DelayedText() {
+        const data = await promise;
+        return <div>{data}</div>;
+      }
+      return [DelayedText, resolve, reject];
+    }
+
+    const [Posts, resolvePostsData] = makeDelayedText();
+    const [Photos, resolvePhotosData] = makeDelayedText();
+    const suspendedChunk = createSuspendedChunk(<p>loading</p>);
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        suspendedChunk.row,
+        webpackMap,
+        {
+          onError(error) {
+            reportedErrors.push(error);
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function ClientRoot() {
+      return use(response);
+    }
+
+    await act(() => {
+      root.render(<ClientRoot />);
+    });
+
+    expect(container.innerHTML).toBe('<p>loading</p>');
+
+    const donePromise = createResolvablePromise();
+
+    const value = (
+      <Suspense fallback={<p>loading posts and photos</p>}>
+        <Posts />
+        <Photos />
+      </Suspense>
+    );
+
+    await serverAct(async () => {
+      await act(async () => {
+        suspendedChunk.resolve({value, done: false, next: donePromise.promise});
+        donePromise.resolve({value, done: true});
+      });
+    });
+
+    expect(container.innerHTML).toBe('<p>loading posts and photos</p>');
+
+    await serverAct(async () => {
+      await act(async () => {
+        await resolvePostsData('posts');
+        await resolvePhotosData('photos');
+      });
+    });
+
+    expect(container.innerHTML).toBe('<div>posts</div><div>photos</div>');
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should preserve state of client components on refetch', async () => {
+    // Client
+
+    function Page({response}) {
+      return use(response);
+    }
+
+    function Input() {
+      return <input />;
+    }
+
+    const InputClient = clientExports(Input);
+
+    // Server
+
+    function App({color}) {
+      // Verify both DOM and Client children.
+      return (
+        <div style={{color}}>
+          <input />
+          <InputClient />
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const stream1 = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <App color="red" />,
+        webpackMap,
+      ),
+    );
+    pipe(stream1.writable);
+    const response1 = ReactServerDOMClient.createFromReadableStream(
+      stream1.readable,
+    );
+    await act(() => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <Page response={response1} />
+        </Suspense>,
+      );
+    });
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].tagName).toBe('DIV');
+    expect(container.children[0].style.color).toBe('red');
+
+    // Change the DOM state for both inputs.
+    const inputA = container.children[0].children[0];
+    expect(inputA.tagName).toBe('INPUT');
+    inputA.value = 'hello';
+    const inputB = container.children[0].children[1];
+    expect(inputB.tagName).toBe('INPUT');
+    inputB.value = 'goodbye';
+
+    const stream2 = getTestStream();
+    const {pipe: pipe2} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <App color="blue" />,
+        webpackMap,
+      ),
+    );
+    pipe2(stream2.writable);
+    const response2 = ReactServerDOMClient.createFromReadableStream(
+      stream2.readable,
+    );
+    await act(() => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <Page response={response2} />
+        </Suspense>,
+      );
+    });
+    expect(container.children.length).toBe(1);
+    expect(container.children[0].tagName).toBe('DIV');
+    expect(container.children[0].style.color).toBe('blue');
+
+    // Verify we didn't destroy the DOM for either input.
+    expect(inputA === container.children[0].children[0]).toBe(true);
+    expect(inputA.tagName).toBe('INPUT');
+    expect(inputA.value).toBe('hello');
+    expect(inputB === container.children[0].children[1]).toBe(true);
+    expect(inputB.tagName).toBe('INPUT');
+    expect(inputB.value).toBe('goodbye');
+  });
+
+  it('should be able to complete after aborting and throw the reason client-side', async () => {
+    const reportedErrors = [];
+
+    const {writable, readable} = getTestStream();
+    const {pipe, abort} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <div>
+          <InfiniteSuspend />
+        </div>,
+        webpackMap,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+            const message = typeof x === 'string' ? x : x.message;
+            return __DEV__ ? 'a dev digest' : `digest("${message}")`;
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return use(res);
+    }
+
+    await act(() => {
+      root.render(
+        <ErrorBoundary
+          fallback={e => (
+            <p>
+              {__DEV__ ? e.message + ' + ' : null}
+              {e.digest}
+            </p>
+          )}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    await act(() => {
+      abort('for reasons');
+    });
+    if (__DEV__) {
+      expect(container.innerHTML).toBe('<p>for reasons + a dev digest</p>');
+    } else {
+      expect(container.innerHTML).toBe('<p>digest("for reasons")</p>');
+    }
+
+    expect(reportedErrors).toEqual(['for reasons']);
+  });
+
+  it('should be able to recover from a direct reference erroring client-side', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function ({prop}) {
+      return 'This should never render';
+    });
+
+    const ClientReference = clientModuleError(new Error('module init error'));
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <div>
+          <ClientComponent prop={ClientReference} />
+        </div>,
+        webpackMap,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return use(res);
+    }
+
+    await act(() => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>module init error</p>');
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should be able to recover from a direct reference erroring client-side async', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function ({prop}) {
+      return 'This should never render';
+    });
+
+    let rejectPromise;
+    const ClientReference = await clientExports(
+      new Promise((resolve, reject) => {
+        rejectPromise = reject;
+      }),
+    );
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <div>
+          <ClientComponent prop={ClientReference} />
+        </div>,
+        webpackMap,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return use(res);
+    }
+
+    await act(() => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    await act(() => {
+      rejectPromise(new Error('async module init error'));
+    });
+
+    expect(container.innerHTML).toBe('<p>async module init error</p>');
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should be able to recover from a direct reference erroring server-side', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function ({prop}) {
+      return 'This should never render';
+    });
+
+    // We simulate a bug in the Webpack bundler which causes an error on the server.
+    for (const id in webpackMap) {
+      Object.defineProperty(webpackMap, id, {
+        get: () => {
+          throw new Error('bug in the bundler');
+        },
+      });
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <div>
+          <ClientComponent />
+        </div>,
+        webpackMap,
+        {
+          onError(x) {
+            reportedErrors.push(x.message);
+            return __DEV__ ? 'a dev digest' : `digest("${x.message}")`;
+          },
+        },
+      ),
+    );
+    pipe(writable);
+
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return use(res);
+    }
+
+    await act(() => {
+      root.render(
+        <ErrorBoundary
+          fallback={e => (
+            <p>
+              {__DEV__ ? e.message + ' + ' : null}
+              {e.digest}
+            </p>
+          )}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    if (__DEV__) {
+      expect(container.innerHTML).toBe(
+        '<p>bug in the bundler + a dev digest</p>',
+      );
+    } else {
+      expect(container.innerHTML).toBe('<p>digest("bug in the bundler")</p>');
+    }
+
+    expect(reportedErrors).toEqual(['bug in the bundler']);
+  });
+
+  it('should pass a Promise through props and be able use() it on the client', async () => {
+    async function getData() {
+      return 'async hello';
+    }
+
+    function Component({data}) {
+      const text = use(data);
+      return <p>{text}</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    function ServerComponent() {
+      const data = getData(); // no await here
+      return <ClientComponent data={data} />;
+    }
+
+    function Print({response}) {
+      return use(response);
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <Print response={response} />
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>async hello</p>');
+  });
+
+  it('should throw on the client if a passed promise eventually rejects', async () => {
+    const reportedErrors = [];
+    const theError = new Error('Server throw');
+
+    async function getData() {
+      throw theError;
+    }
+
+    function Component({data}) {
+      const text = use(data);
+      return <p>{text}</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    function ServerComponent() {
+      const data = getData(); // no await here
+      return <ClientComponent data={data} />;
+    }
+
+    function Await({response}) {
+      return use(response);
+    }
+
+    function App({response}) {
+      return (
+        <Suspense fallback={<h1>Loading...</h1>}>
+          <ErrorBoundary
+            fallback={e => (
+              <p>
+                {__DEV__ ? e.message + ' + ' : null}
+                {e.digest}
+              </p>
+            )}>
+            <Await response={response} />
+          </ErrorBoundary>
+        </Suspense>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+            return __DEV__ ? 'a dev digest' : `digest("${x.message}")`;
+          },
+        },
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe(
+      __DEV__
+        ? '<p>Server throw + a dev digest</p>'
+        : '<p>digest("Server throw")</p>',
+    );
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  it('should support float methods when rendering in Fiber', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      FlightReactDOM.prefetchDNS('d before');
+      FlightReactDOM.preconnect('c before');
+      FlightReactDOM.preconnect('c2 before', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preload('l before', {as: 'style'});
+      FlightReactDOM.preloadModule('lm before');
+      FlightReactDOM.preloadModule('lm2 before', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preinit('i before', {as: 'script'});
+      FlightReactDOM.preinitModule('m before');
+      FlightReactDOM.preinitModule('m2 before', {crossOrigin: 'anonymous'});
+      await 1;
+      FlightReactDOM.prefetchDNS('d after');
+      FlightReactDOM.preconnect('c after');
+      FlightReactDOM.preconnect('c2 after', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preload('l after', {as: 'style'});
+      FlightReactDOM.preloadModule('lm after');
+      FlightReactDOM.preloadModule('lm2 after', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preinit('i after', {as: 'script'});
+      FlightReactDOM.preinitModule('m after');
+      FlightReactDOM.preinitModule('m2 after', {crossOrigin: 'anonymous'});
+      return <ClientComponent />;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(readable);
+      }
+      return response;
+    }
+
+    function App() {
+      return getResponse();
+    }
+
+    // We pause to allow the float call after the await point to process before the
+    // HostDispatcher gets set for Fiber by createRoot. This is only needed in testing
+    // because the module graphs are not different and the HostDispatcher is shared.
+    // In a real environment the Fiber and Flight code would each have their own independent
+    // dispatcher.
+    // @TODO consider what happens when Server-Components-On-The-Client exist. we probably
+    // want to use the Fiber HostDispatcher there too since it is more about the host than the runtime
+    // but we need to make sure that actually makes sense
+    await 1;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="dns-prefetch" href="d before" />
+          <link rel="preconnect" href="c before" />
+          <link rel="preconnect" href="c2 before" crossorigin="" />
+          <link rel="preload" as="style" href="l before" />
+          <link rel="modulepreload" href="lm before" />
+          <link rel="modulepreload" href="lm2 before" crossorigin="" />
+          <script async="" src="i before" />
+          <script type="module" async="" src="m before" />
+          <script type="module" async="" src="m2 before" crossorigin="" />
+          <link rel="dns-prefetch" href="d after" />
+          <link rel="preconnect" href="c after" />
+          <link rel="preconnect" href="c2 after" crossorigin="" />
+          <link rel="preload" as="style" href="l after" />
+          <link rel="modulepreload" href="lm after" />
+          <link rel="modulepreload" href="lm2 after" crossorigin="" />
+          <script async="" src="i after" />
+          <script type="module" async="" src="m after" />
+          <script type="module" async="" src="m2 after" crossorigin="" />
+        </head>
+        <body />
+      </html>,
+    );
+    expect(getMeaningfulChildren(container)).toEqual(<p>hello world</p>);
+  });
+
+  it('should support float methods when rendering in Fizz', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      FlightReactDOM.prefetchDNS('d before');
+      FlightReactDOM.preconnect('c before');
+      FlightReactDOM.preconnect('c2 before', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preload('l before', {as: 'style'});
+      FlightReactDOM.preloadModule('lm before');
+      FlightReactDOM.preloadModule('lm2 before', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preinit('i before', {as: 'script'});
+      FlightReactDOM.preinitModule('m before');
+      FlightReactDOM.preinitModule('m2 before', {crossOrigin: 'anonymous'});
+      await 1;
+      FlightReactDOM.prefetchDNS('d after');
+      FlightReactDOM.preconnect('c after');
+      FlightReactDOM.preconnect('c2 after', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preload('l after', {as: 'style'});
+      FlightReactDOM.preloadModule('lm after');
+      FlightReactDOM.preloadModule('lm2 after', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preinit('i after', {as: 'script'});
+      FlightReactDOM.preinitModule('m after');
+      FlightReactDOM.preinitModule('m2 after', {crossOrigin: 'anonymous'});
+      return <ClientComponent />;
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    // In a real environment you would want to call the render during the Fizz render.
+    // The reason we cannot do this in our test is because we don't actually have two separate
+    // module graphs and we are contriving the sequencing to work in a way where
+    // the right HostDispatcher is in scope during the Flight Server Float calls and the
+    // Flight Client hint dispatches
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+    pipe(flightWritable);
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response =
+          ReactServerDOMClient.createFromReadableStream(flightReadable);
+      }
+      return response;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>{getResponse()}</body>
+        </html>
+      );
+    }
+
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(<App />).pipe(fizzWritable);
+    });
+
+    await readInto(document, fizzReadable);
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="dns-prefetch" href="d before" />
+          <link rel="preconnect" href="c before" />
+          <link rel="preconnect" href="c2 before" crossorigin="" />
+          <link rel="dns-prefetch" href="d after" />
+          <link rel="preconnect" href="c after" />
+          <link rel="preconnect" href="c2 after" crossorigin="" />
+          <script async="" src="i before" />
+          <script type="module" async="" src="m before" />
+          <script type="module" async="" src="m2 before" crossorigin="" />
+          <script async="" src="i after" />
+          <script type="module" async="" src="m after" />
+          <script type="module" async="" src="m2 after" crossorigin="" />
+          <link rel="preload" as="style" href="l before" />
+          <link rel="modulepreload" href="lm before" />
+          <link rel="modulepreload" href="lm2 before" crossorigin="" />
+          <link rel="preload" as="style" href="l after" />
+          <link rel="modulepreload" href="lm after" />
+          <link rel="modulepreload" href="lm2 after" crossorigin="" />
+        </head>
+        <body>
+          <p>hello world</p>
+        </body>
+      </html>,
+    );
+  });
+
+  it('supports Float hints from concurrent Flight -> Fizz renders', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent1() {
+      FlightReactDOM.preload('before1', {as: 'style'});
+      await 1;
+      FlightReactDOM.preload('after1', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    async function ServerComponent2() {
+      FlightReactDOM.preload('before2', {as: 'style'});
+      await 1;
+      FlightReactDOM.preload('after2', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const {writable: flightWritable1, readable: flightReadable1} =
+      getTestStream();
+    const {writable: flightWritable2, readable: flightReadable2} =
+      getTestStream();
+
+    ReactServerDOMServer.renderToPipeableStream(
+      <ServerComponent1 />,
+      webpackMap,
+    ).pipe(flightWritable1);
+
+    ReactServerDOMServer.renderToPipeableStream(
+      <ServerComponent2 />,
+      webpackMap,
+    ).pipe(flightWritable2);
+
+    const responses = new Map();
+    function getResponse(stream) {
+      let response = responses.get(stream);
+      if (!response) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+        responses.set(stream, response);
+      }
+      return response;
+    }
+
+    function App({stream}) {
+      return (
+        <html>
+          <body>{getResponse(stream)}</body>
+        </html>
+      );
+    }
+
+    // pausing to let Flight runtime tick. This is a test only artifact of the fact that
+    // we aren't operating separate module graphs for flight and fiber. In a real app
+    // each would have their own dispatcher and there would be no cross dispatching.
+    await serverAct(() => {});
+
+    const {writable: fizzWritable1, readable: fizzReadable1} = getTestStream();
+    const {writable: fizzWritable2, readable: fizzReadable2} = getTestStream();
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        <App stream={flightReadable1} />,
+      ).pipe(fizzWritable1);
+      ReactDOMFizzServer.renderToPipeableStream(
+        <App stream={flightReadable2} />,
+      ).pipe(fizzWritable2);
+    });
+
+    async function read(stream) {
+      const decoder = new TextDecoder();
+      const reader = stream.getReader();
+      let buffer = '';
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          buffer += decoder.decode();
+          break;
+        }
+        buffer += decoder.decode(value, {stream: true});
+      }
+      return buffer;
+    }
+
+    const [content1, content2] = await Promise.all([
+      read(fizzReadable1),
+      read(fizzReadable2),
+    ]);
+
+    expect(content1).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" href="before1" as="style"/>' +
+        '<link rel="preload" href="after1" as="style"/>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render"/>'
+          : '') +
+        '</head>' +
+        '<body><p>hello world</p>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body></html>',
+    );
+    expect(content2).toEqual(
+      '<!DOCTYPE html><html><head><link rel="preload" href="before2" as="style"/>' +
+        '<link rel="preload" href="after2" as="style"/>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render"/>'
+          : '') +
+        '</head>' +
+        '<body><p>hello world</p>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body></html>',
+    );
+  });
+
+  it('supports deduping hints by Float key', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      FlightReactDOM.prefetchDNS('dns');
+      FlightReactDOM.preconnect('preconnect');
+      FlightReactDOM.preload('load', {as: 'style'});
+      FlightReactDOM.preinit('init', {as: 'script'});
+      // again but vary preconnect to demonstrate crossOrigin participates in the key
+      FlightReactDOM.prefetchDNS('dns');
+      FlightReactDOM.preconnect('preconnect', {crossOrigin: 'anonymous'});
+      FlightReactDOM.preload('load', {as: 'style'});
+      FlightReactDOM.preinit('init', {as: 'script'});
+      await 1;
+      // after an async point
+      FlightReactDOM.prefetchDNS('dns');
+      FlightReactDOM.preconnect('preconnect', {crossOrigin: 'use-credentials'});
+      FlightReactDOM.preload('load', {as: 'style'});
+      FlightReactDOM.preinit('init', {as: 'script'});
+      return <ClientComponent />;
+    }
+
+    const {writable, readable} = getTestStream();
+
+    await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ).pipe(writable),
+    );
+
+    const hintRows = [];
+    async function collectHints(stream) {
+      const decoder = new TextDecoder();
+      const reader = stream.getReader();
+      let buffer = '';
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          buffer += decoder.decode();
+          if (buffer.includes(':H')) {
+            hintRows.push(buffer);
+          }
+          break;
+        }
+        buffer += decoder.decode(value, {stream: true});
+        let line;
+        while ((line = buffer.indexOf('\n')) > -1) {
+          const row = buffer.slice(0, line);
+          buffer = buffer.slice(line + 1);
+          if (row.includes(':H')) {
+            hintRows.push(row);
+          }
+        }
+      }
+    }
+
+    await collectHints(readable);
+    expect(hintRows.length).toEqual(6);
+  });
+
+  it('preloads resources without needing to render them', async () => {
+    function NoScriptComponent() {
+      return (
+        <p>
+          <img src="image-do-not-load" />
+          <link rel="stylesheet" href="css-do-not-load" />
+        </p>
+      );
+    }
+
+    function Component() {
+      return (
+        <div>
+          <img src="image-resource" />
+          <img
+            src="image-do-not-load"
+            srcSet="image-preload-src-set"
+            sizes="image-sizes"
+          />
+          <img src="image-do-not-load" loading="lazy" />
+          <link
+            rel="preload"
+            href="video-resource"
+            as="video"
+            media="(orientation: landscape)"
+          />
+          <link rel="modulepreload" href="module-resource" />
+          <picture>
+            <source
+              srcSet="image-not-yet-preloaded"
+              media="(orientation: portrait)"
+            />
+            <img src="image-do-not-load" />
+          </picture>
+          <noscript>
+            <NoScriptComponent />
+          </noscript>
+          <link rel="stylesheet" href="css-resource" />
+        </div>
+      );
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<Component />, webpackMap),
+    );
+    pipe(writable);
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(readable);
+      }
+      return response;
+    }
+
+    function App() {
+      // Not rendered but use for its side-effects.
+      getResponse();
+      return (
+        <html>
+          <body>
+            <p>hello world</p>
+          </body>
+        </html>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="image" href="image-resource" />
+          <link
+            rel="preload"
+            as="image"
+            imagesrcset="image-preload-src-set"
+            imagesizes="image-sizes"
+          />
+          <link
+            rel="preload"
+            as="video"
+            href="video-resource"
+            media="(orientation: landscape)"
+          />
+          <link rel="modulepreload" href="module-resource" />
+          <link rel="preload" as="style" href="css-resource" />
+        </head>
+        <body>
+          <p>hello world</p>
+        </body>
+      </html>,
+    );
+  });
+
+  it('should be able to include a client reference in printed errors', async () => {
+    const reportedErrors = [];
+
+    const ClientComponent = clientExports(function ({prop}) {
+      return 'This should never render';
+    });
+
+    const ClientReference = clientExports({});
+
+    class InvalidValue {}
+
+    const {writable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <div>
+          <ClientComponent prop={ClientReference} invalid={InvalidValue} />
+        </div>,
+        webpackMap,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      ),
+    );
+    pipe(writable);
+
+    expect(reportedErrors.length).toBe(1);
+    if (__DEV__) {
+      expect(reportedErrors[0].message).toEqual(
+        'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  <... prop={client} invalid={function InvalidValue}>\n' +
+          '                             ^^^^^^^^^^^^^^^^^^^^^^^',
+      );
+    } else {
+      expect(reportedErrors[0].message).toEqual(
+        'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". ' +
+          'Or maybe you meant to call this function rather than return it.\n' +
+          '  {prop: client, invalid: function InvalidValue}\n' +
+          '                          ^^^^^^^^^^^^^^^^^^^^^',
+      );
+    }
+  });
+
+  it('should be able to render a client reference as return value', async () => {
+    const ClientModule = clientExports({
+      text: 'Hello World',
+    });
+
+    function ServerComponent() {
+      return ClientModule.text;
+    }
+
+    const {writable, readable} = getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+    pipe(writable);
+    const response = ReactServerDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(response);
+    });
+    expect(container.innerHTML).toBe('Hello World');
+  });
+
+  it('can abort synchronously during render', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            <ComponentThatAborts />
+            <Sibling />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    function ComponentThatAborts() {
+      abortRef.current();
+      return <p>hello world</p>;
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during render in an async tick', async () => {
+    async function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            <ComponentThatAborts />
+            <Sibling />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    async function ComponentThatAborts() {
+      await 1;
+      abortRef.current();
+      return <p>hello world</p>;
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during render in a lazy initializer for a component', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            <LazyAbort />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const LazyAbort = React.lazy(() => {
+      abortRef.current();
+      return {
+        then(cb) {
+          cb({default: 'div'});
+        },
+      };
+    });
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during render in a lazy initializer for an element', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>{lazyAbort}</Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const lazyAbort = React.lazy(() => {
+      abortRef.current();
+      return {
+        then(cb) {
+          cb({default: 'hello world'});
+        },
+      };
+    });
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('can abort during a synchronous thenable resolution', async () => {
+    function Sibling() {
+      return <p>sibling</p>;
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>{thenable}</Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>
+            <Sibling />
+          </Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>
+              <div>
+                <Sibling />
+              </div>
+            </Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const thenable = {
+      then(cb) {
+        abortRef.current();
+        cb(thenable.value);
+      },
+    };
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>
+          <p>loading 3...</p>
+        </div>
+      </div>,
+    );
+  });
+
+  it('wont serialize thenables that were not already settled by the time an abort happens', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading 1...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+          <Suspense fallback={<p>loading 2...</p>}>{thenable1}</Suspense>
+          <div>
+            <Suspense fallback={<p>loading 3...</p>}>{thenable2}</Suspense>
+          </div>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+    const thenable1 = {
+      then(cb) {
+        cb('hello world');
+      },
+    };
+
+    const thenable2 = {
+      then(cb) {
+        cb('hello world');
+      },
+      status: 'fulfilled',
+      value: 'hello world',
+    };
+
+    function ComponentThatAborts() {
+      abortRef.current();
+      return thenable1;
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading 1...</p>
+        <p>loading 2...</p>
+        <div>hello world</div>
+      </div>,
+    );
+  });
+
+  it('can error synchronously after aborting without an unhandled rejection error', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+
+    async function ComponentThatAborts() {
+      abortRef.current();
+      throw new Error('boom');
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading...</p>
+      </div>,
+    );
+  });
+
+  it('can error synchronously after aborting in a synchronous Component', async () => {
+    const rejectError = new Error('bam!');
+    const rejectedPromise = Promise.reject(rejectError);
+    rejectedPromise.catch(() => {});
+    rejectedPromise.status = 'rejected';
+    rejectedPromise.reason = rejectError;
+
+    const resolvedValue = <p>hello world</p>;
+    const resolvedPromise = Promise.resolve(resolvedValue);
+    resolvedPromise.status = 'fulfilled';
+    resolvedPromise.value = resolvedValue;
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+          <Suspense fallback={<p>loading too...</p>}>
+            {rejectedPromise}
+          </Suspense>
+          <Suspense fallback={<p>loading three...</p>}>
+            {resolvedPromise}
+          </Suspense>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+
+    // This test is specifically asserting that this works with Sync Server Component
+    function ComponentThatAborts() {
+      abortRef.current();
+      throw new Error('boom');
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+        {
+          onError(e) {
+            console.error(e);
+          },
+        },
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      'Error: bam!\n    in <stack>',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      '[Server] Error: The render was aborted by the server without a reason.' +
+        '\n    in <stack>',
+      '[Server] Error: bam!\n    in <stack>',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading...</p>
+        <p>loading too...</p>
+        <p>hello world</p>
+      </div>,
+    );
+  });
+
+  // @gate enableHalt
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      Readable.toWeb(prelude),
+    );
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(<div>hello world</div>);
+  });
+
+  // @gate enableHalt
+  it('does not propagate abort reasons errors when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <Greeting />
+          </Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const errors = [];
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+            onError(err) {
+              errors.push(err);
+            },
+          },
+        ),
+      };
+    });
+
+    await serverAct(() => {
+      controller.abort('boom');
+    });
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    expect(errors).toEqual([]);
+
+    const preludeWeb = Readable.toWeb(prelude);
+    const response = ReactServerDOMClient.createFromReadableStream(preludeWeb);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    errors.length = 0;
+    let abortFizz;
+    await serverAct(async () => {
+      const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onError(error) {
+            errors.push(error);
+          },
+        },
+      );
+      pipe(fizzWritable);
+      abortFizz = abort;
+    });
+
+    await serverAct(() => {
+      abortFizz('bam');
+    });
+
+    expect(errors).toEqual([new Error('Connection closed.')]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(<div>loading...</div>);
+  });
+
+  // This could be a bug. Discovered while making enableAsyncDebugInfo dynamic for www.
+  // @gate enableHalt || (enableAsyncDebugInfo && __DEV__)
+  it('will leave async iterables in an incomplete state when halting', async () => {
+    let resolve;
+    const wait = new Promise(r => (resolve = r));
+    const errors = [];
+
+    const multiShotIterable = {
+      async *[Symbol.asyncIterator]() {
+        yield {hello: 'A'};
+        await wait;
+        yield {hi: 'B'};
+        return 'C';
+      },
+    };
+
+    const controller = new AbortController();
+    const {pendingResult} = await serverAct(() => {
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          {
+            multiShotIterable,
+          },
+          {},
+          {
+            onError(x) {
+              errors.push(x);
+            },
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    await serverAct(() => resolve());
+
+    const {prelude} = await pendingResult;
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      createUnclosingStream(Readable.toWeb(prelude)),
+    );
+
+    const iterator = result.multiShotIterable[Symbol.asyncIterator]();
+
+    expect(await iterator.next()).toEqual({
+      value: {hello: 'A'},
+      done: false,
+    });
+
+    const race = Promise.race([
+      iterator.next(),
+      new Promise(r => setTimeout(() => r('timeout'), 10)),
+    ]);
+
+    await 1;
+    jest.advanceTimersByTime('100');
+    expect(await race).toBe('timeout');
+  });
+
+  // @gate enableHalt
+  it('will halt unfinished chunks inside Suspense when aborting a prerender', async () => {
+    const controller = new AbortController();
+    function ComponentThatAborts() {
+      controller.abort('boom');
+      return null;
+    }
+
+    async function Greeting() {
+      await 1;
+      return 'hello world';
+    }
+
+    async function Farewell() {
+      return 'goodbye world';
+    }
+
+    async function Wrapper() {
+      return (
+        <Suspense fallback="loading too...">
+          <ComponentThatAborts />
+        </Suspense>
+      );
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <Greeting />
+          </Suspense>
+          <Wrapper />
+          <Suspense fallback="loading three...">
+            <Farewell />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const {pendingResult} = await serverAct(() => {
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          {},
+          {
+            onError(x) {
+              errors.push(x);
+            },
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    const {prelude} = await pendingResult;
+
+    expect(errors).toEqual([]);
+
+    const preludeWeb = Readable.toWeb(prelude);
+    const response = ReactServerDOMClient.createFromReadableStream(preludeWeb);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+    errors.length = 0;
+    let abortFizz;
+    await serverAct(async () => {
+      const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onError(error, errorInfo) {
+            errors.push(error);
+          },
+        },
+      );
+      pipe(fizzWritable);
+      abortFizz = abort;
+    });
+
+    await serverAct(() => {
+      abortFizz('boom');
+    });
+
+    // one error per boundary
+    const err = new Error('Connection closed.');
+    expect(errors).toEqual([err, err, err]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        {'loading...'}
+        {'loading too...'}
+        {'loading three...'}
+      </div>,
+    );
+  });
+
+  it('rejecting a thenable after an abort before flush should not lead to a frozen readable', async () => {
+    const ClientComponent = clientExports(function (props: {
+      promise: Promise<void>,
+    }) {
+      return 'hello world';
+    });
+
+    let reject;
+    const promise = new Promise((_, re) => {
+      reject = re;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <ClientComponent promise={promise} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const errors = [];
+    const {writable, readable} = getTestStream();
+    const {pipe, abort} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<App />, webpackMap, {
+        onError(x) {
+          errors.push(x);
+        },
+      }),
+    );
+    await serverAct(() => {
+      abort('STOP');
+      reject('STOP');
+    });
+    pipe(writable);
+
+    const reader = readable.getReader();
+    while (true) {
+      const {done} = await reader.read();
+      if (done) {
+        break;
+      }
+    }
+
+    expect(errors).toEqual(['STOP']);
+
+    // We expect it to get to the end here rather than hang on the reader.
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
new file mode 100644
index 00000000000..412ec0c9ca7
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -0,0 +1,2977 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.WritableStream =
+  require('web-streams-polyfill/ponyfill/es6').WritableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+const {
+  patchMessageChannel,
+} = require('../../../../scripts/jest/patchMessageChannel');
+
+let clientExports;
+let serverExports;
+let webpackMap;
+let webpackServerMap;
+let act;
+let serverAct;
+let getDebugInfo;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let ReactDOMFizzServer;
+let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
+let ReactServerDOMClient;
+let Suspense;
+let use;
+let ReactServer;
+let ReactServerDOM;
+let ReactServerScheduler;
+let assertConsoleErrorDev;
+
+describe('ReactFlightDOMBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactServerScheduler = require('scheduler');
+    patchMessageChannel(ReactServerScheduler);
+    serverAct = require('internal-test-utils').serverAct;
+    getDebugInfo = require('internal-test-utils').getDebugInfo.bind(null, {
+      ignoreProps: true,
+      useFixedTime: true,
+    });
+
+    // Simulate the condition resolution
+
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    ReactServerDOM = require('react-dom');
+
+    jest.mock('react-server-dom-webpack/server', () =>
+      require('react-server-dom-webpack/server.browser'),
+    );
+    const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
+    serverExports = WebpackMock.serverExports;
+    webpackMap = WebpackMock.webpackMap;
+    webpackServerMap = WebpackMock.webpackServerMap;
+    ReactServerDOMServer = require('react-server-dom-webpack/server');
+    jest.mock('react-server-dom-webpack/static', () =>
+      require('react-server-dom-webpack/static.browser'),
+    );
+    ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+
+    __unmockReact();
+    jest.resetModules();
+
+    patchMessageChannel();
+
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMFizzServer = require('react-dom/server.browser');
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+    Suspense = React.Suspense;
+    use = React.use;
+  });
+
+  function makeDelayedText(Model) {
+    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}, data) {
+      if (promise) {
+        throw promise;
+      }
+      if (error) {
+        throw error;
+      }
+      return <Model>{children}</Model>;
+    }
+    return [DelayedText, _resolve, _reject];
+  }
+
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
+  function requireServerRef(ref) {
+    let name = '';
+    let resolvedModuleData = webpackServerMap[ref];
+    if (resolvedModuleData) {
+      // The potentially aliased name.
+      name = resolvedModuleData.name;
+    } else {
+      // We didn't find this specific export name but we might have the * export
+      // which contains this name as well.
+      // TODO: It's unfortunate that we now have to parse this string. We should
+      // probably go back to encoding path and name separately on the client reference.
+      const idx = ref.lastIndexOf('#');
+      if (idx !== -1) {
+        name = ref.slice(idx + 1);
+        resolvedModuleData = webpackServerMap[ref.slice(0, idx)];
+      }
+      if (!resolvedModuleData) {
+        throw new Error(
+          'Could not find the module "' +
+            ref +
+            '" in the React Client Manifest. ' +
+            'This is probably a bug in the React Server Components bundler.',
+        );
+      }
+    }
+    const mod = __webpack_require__(resolvedModuleData.id);
+    if (name === '*') {
+      return mod;
+    }
+    return mod[name];
+  }
+
+  async function callServer(actionId, body) {
+    const fn = requireServerRef(actionId);
+    const args = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+    return fn.apply(null, args);
+  }
+
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+        return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+      })
+    );
+  }
+
+  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() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<App />),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
+    });
+  });
+
+  it('should resolve client components (with async chunks) when referenced in props', async () => {
+    let resolveClientComponentChunk;
+
+    const ClientOuter = clientExports(function ClientOuter({
+      Component,
+      children,
+    }) {
+      return <Component>{children}</Component>;
+    });
+
+    const ClientInner = clientExports(
+      function ClientInner({children}) {
+        return <span>{children}</span>;
+      },
+      '42',
+      '/test.js',
+      new Promise(resolve => (resolveClientComponentChunk = resolve)),
+    );
+
+    function Server() {
+      return <ClientOuter Component={ClientInner}>Hello, World!</ClientOuter>;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('<span>Hello, World!</span>');
+  });
+
+  it('should resolve deduped objects within the same model root when it is blocked', async () => {
+    let resolveClientComponentChunk;
+
+    const ClientOuter = clientExports(function ClientOuter({Component, value}) {
+      return <Component value={value} />;
+    });
+
+    const ClientInner = clientExports(
+      function ClientInner({value}) {
+        return <pre>{JSON.stringify(value)}</pre>;
+      },
+      '42',
+      '/test.js',
+      new Promise(resolve => (resolveClientComponentChunk = resolve)),
+    );
+
+    function Server({value}) {
+      return <ClientOuter Component={ClientInner} value={value} />;
+    }
+
+    const shared = [1, 2, 3];
+    const value = [shared, shared];
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <Server value={value} />,
+        webpackMap,
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('<pre>[[1,2,3],[1,2,3]]</pre>');
+  });
+
+  it('should resolve deduped objects within the same model root when it is blocked and there is a listener attached to the root', async () => {
+    let resolveClientComponentChunk;
+
+    const ClientOuter = clientExports(function ClientOuter({Component, value}) {
+      return <Component value={value} />;
+    });
+
+    const ClientInner = clientExports(
+      function ClientInner({value}) {
+        return <pre>{JSON.stringify(value)}</pre>;
+      },
+      '42',
+      '/test.js',
+      new Promise(resolve => (resolveClientComponentChunk = resolve)),
+    );
+
+    function Server({value}) {
+      return <ClientOuter Component={ClientInner} value={value} />;
+    }
+
+    const shared = [1, 2, 3];
+    const value = [shared, shared];
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <Server value={value} />,
+        webpackMap,
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    // make sure we have a listener so that `resolveModelChunk` initializes the chunk eagerly
+    response.then(() => {});
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('<pre>[[1,2,3],[1,2,3]]</pre>');
+  });
+
+  it('should resolve deduped objects that are themselves blocked', async () => {
+    let resolveClientComponentChunk;
+
+    const Client = clientExports(
+      [4, 5],
+      '42',
+      '/test.js',
+      new Promise(resolve => (resolveClientComponentChunk = resolve)),
+    );
+
+    const shared = [1, 2, 3, Client];
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <div>
+          <Suspense fallback="Loading">
+            <span>
+              {shared /* this will serialize first and block nearest element */}
+            </span>
+          </Suspense>
+          {shared /* this will be referenced inside the blocked element */}
+        </div>,
+        webpackMap,
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('<div><span>12345</span>12345</div>');
+  });
+
+  it('should resolve deduped objects in nested children of blocked models', async () => {
+    let resolveOuterClientComponentChunk;
+    let resolveInnerClientComponentChunk;
+
+    const ClientOuter = clientExports(
+      function ClientOuter({children, value}) {
+        return children;
+      },
+      '1',
+      '/outer.js',
+      new Promise(resolve => (resolveOuterClientComponentChunk = resolve)),
+    );
+
+    function PassthroughServerComponent({children}) {
+      return children;
+    }
+
+    const ClientInner = clientExports(
+      function ClientInner({children}) {
+        return JSON.stringify(children);
+      },
+      '2',
+      '/inner.js',
+      new Promise(resolve => (resolveInnerClientComponentChunk = resolve)),
+    );
+
+    const value = {};
+
+    function Server() {
+      return (
+        <ClientOuter value={value}>
+          <PassthroughServerComponent>
+            <ClientInner>{value}</ClientInner>
+          </PassthroughServerComponent>
+        </ClientOuter>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveInnerClientComponentChunk();
+      resolveOuterClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('{}');
+  });
+
+  it('should resolve deduped objects in blocked models referencing other blocked models with blocked references', async () => {
+    let resolveFooClientComponentChunk;
+    let resolveBarClientComponentChunk;
+
+    function PassthroughServerComponent({children}) {
+      return children;
+    }
+
+    const FooClient = clientExports(
+      function FooClient({children}) {
+        return JSON.stringify(children);
+      },
+      '1',
+      '/foo.js',
+      new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
+    );
+
+    const BarClient = clientExports(
+      function BarClient() {
+        return 'not used';
+      },
+      '2',
+      '/bar.js',
+      new Promise(resolve => (resolveBarClientComponentChunk = resolve)),
+    );
+
+    const shared = {foo: 1};
+
+    function Server() {
+      return (
+        <>
+          <PassthroughServerComponent>
+            <FooClient key="first" bar={BarClient}>
+              {shared}
+            </FooClient>
+          </PassthroughServerComponent>
+          <FooClient key="second" bar={BarClient}>
+            {shared}
+          </FooClient>
+        </>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveFooClientComponentChunk();
+      resolveBarClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('{"foo":1}{"foo":1}');
+  });
+
+  it('should handle deduped props of re-used elements in fragments (same-chunk reference)', async () => {
+    let resolveFooClientComponentChunk;
+
+    const FooClient = clientExports(
+      function Foo({children, item}) {
+        return children;
+      },
+      '1',
+      '/foo.js',
+      new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
+    );
+
+    const shared = <div />;
+
+    function Server() {
+      return (
+        <FooClient track={shared}>
+          <>{shared}</>
+        </FooClient>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveFooClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  it('should handle deduped props of re-used elements in server components (cross-chunk reference)', async () => {
+    let resolveFooClientComponentChunk;
+
+    function PassthroughServerComponent({children}) {
+      return children;
+    }
+
+    const FooClient = clientExports(
+      function Foo({children, item}) {
+        return children;
+      },
+      '1',
+      '/foo.js',
+      new Promise(resolve => (resolveFooClientComponentChunk = resolve)),
+    );
+
+    const shared = <div />;
+
+    function Server() {
+      return (
+        <FooClient track={shared}>
+          <PassthroughServerComponent>{shared}</PassthroughServerComponent>
+        </FooClient>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('');
+
+    await act(() => {
+      resolveFooClientComponentChunk();
+    });
+
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  it('should handle references to deduped owner objects', async () => {
+    // This is replicating React components as generated by @svgr/webpack:
+    let path1a: React.ReactNode;
+    let path1b: React.ReactNode;
+    let path2: React.ReactNode;
+
+    function Svg1() {
+      return ReactServer.createElement(
+        'svg',
+        {id: '1'},
+        path1a || (path1a = ReactServer.createElement('path', {})),
+        path1b || (path1b = ReactServer.createElement('path', {})),
+      );
+    }
+
+    function Svg2() {
+      return ReactServer.createElement(
+        'svg',
+        {id: '2'},
+        path2 || (path2 = ReactServer.createElement('path', {})),
+      );
+    }
+
+    function Server() {
+      return ReactServer.createElement(
+        ReactServer.Fragment,
+        {},
+        ReactServer.createElement(Svg1),
+        ReactServer.createElement(Svg2),
+      );
+    }
+
+    let stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    let response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    const expectedHtml =
+      '<svg id="1"><path></path><path></path></svg><svg id="2"><path></path></svg>';
+
+    expect(container.innerHTML).toBe(expectedHtml);
+
+    // Render a second time:
+
+    // Assigning the path elements to variables in module scope (here simulated
+    // with the test's function scope), and rendering a second time, prevents
+    // the owner of the path elements (i.e. Svg1/Svg2) to be deduped. The owner
+    // of the path in Svg1 is fully inlined. The owner of the owner of the path
+    // in Svg2 is Server, which is deduped and replaced with a reference to the
+    // owner of the owner of the path in Svg1. This nested owner is actually
+    // Server from the previous render pass, which is kinda broken and libraries
+    // probably shouldn't generate code like this. This reference can only be
+    // resolved properly if owners are specifically handled when resolving
+    // outlined models.
+
+    stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe(expectedHtml);
+
+    if (__DEV__) {
+      const resolvedPath1b = response.value[0].props.children[1];
+
+      expect(resolvedPath1b._owner).toEqual(
+        expect.objectContaining({
+          name: 'Svg1',
+          env: 'Server',
+          key: null,
+          owner: expect.objectContaining({
+            name: 'Server',
+            env: 'Server',
+            key: null,
+          }),
+        }),
+      );
+
+      const resolvedPath2 = response.value[1].props.children;
+
+      expect(resolvedPath2._owner).toEqual(
+        expect.objectContaining({
+          name: 'Svg2',
+          env: 'Server',
+          key: null,
+          owner: expect.objectContaining({
+            name: 'Server',
+            env: 'Server',
+            key: null,
+          }),
+        }),
+      );
+    }
+  });
+
+  it('should progressively reveal server components', async () => {
+    let reportedErrors = [];
+
+    // Client Components
+
+    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;
+      }
+    }
+
+    let errorBoundaryFn;
+    if (__DEV__) {
+      errorBoundaryFn = e => (
+        <p>
+          {e.message} + {e.digest}
+        </p>
+      );
+    } else {
+      errorBoundaryFn = e => {
+        expect(e.message).toBe(
+          'An error occurred in the Server Components render. The specific message is omitted in production' +
+            ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
+            ' may provide additional details about the nature of the error.',
+        );
+        return <p>{e.digest}</p>;
+      };
+    }
+
+    function MyErrorBoundary({children}) {
+      return (
+        <ErrorBoundary fallback={errorBoundaryFn}>{children}</ErrorBoundary>
+      );
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    const [Friends, resolveFriends] = makeDelayedText(Text);
+    const [Name, resolveName] = makeDelayedText(Text);
+    const [Posts, resolvePosts] = makeDelayedText(Text);
+    const [Photos, resolvePhotos] = makeDelayedText(Text);
+    const [Games, , rejectGames] = makeDelayedText(Text);
+
+    // View
+    function ProfileDetails({avatar}) {
+      return (
+        <div>
+          <Name>:name:</Name>
+          {avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({friends}) {
+      return (
+        <div>
+          <Photos>:photos:</Photos>
+          {friends}
+        </div>
+      );
+    }
+    function ProfilePosts({posts}) {
+      return <div>{posts}</div>;
+    }
+    function ProfileGames({games}) {
+      return <div>{games}</div>;
+    }
+
+    const MyErrorBoundaryClient = clientExports(MyErrorBoundary);
+
+    function ProfileContent() {
+      return (
+        <>
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <Suspense fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </Suspense>
+          <MyErrorBoundaryClient>
+            <Suspense fallback={<p>(loading games)</p>}>
+              <ProfileGames games={<Games>:games:</Games>} />
+            </Suspense>
+          </MyErrorBoundaryClient>
+        </>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    function ProfilePage({response}) {
+      return use(response).rootContent;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model, webpackMap, {
+        onError(x) {
+          reportedErrors.push(x);
+          return __DEV__ ? `a dev digest` : `digest("${x.message}")`;
+        },
+      }),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Suspense fallback={<p>(loading)</p>}>
+          <ProfilePage response={response} />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // This isn't enough to show anything.
+    await serverAct(async () => {
+      await act(() => {
+        resolveFriends();
+      });
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await serverAct(async () => {
+      await act(() => {
+        resolveName();
+      });
+    });
+    // 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>',
+    );
+
+    expect(reportedErrors).toEqual([]);
+
+    const theError = new Error('Game over');
+    // Let's *fail* loading games.
+    await serverAct(async () => {
+      await act(() => {
+        rejectGames(theError);
+      });
+    });
+
+    const gamesExpectedValue = __DEV__
+      ? '<p>Game over + a dev digest</p>'
+      : '<p>digest("Game over")</p>';
+
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        gamesExpectedValue,
+    );
+
+    expect(reportedErrors).toEqual([theError]);
+    reportedErrors = [];
+
+    // We can now show the sidebar.
+    await serverAct(async () => {
+      await act(() => {
+        resolvePhotos();
+      });
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        gamesExpectedValue,
+    );
+
+    // Show everything.
+    await serverAct(async () => {
+      await act(() => {
+        resolvePosts();
+      });
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        gamesExpectedValue,
+    );
+
+    expect(reportedErrors).toEqual([]);
+  });
+
+  it('should close the stream upon completion when rendering to W3C streams', async () => {
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    const [Friends, resolveFriends] = makeDelayedText(Text);
+    const [Name, resolveName] = makeDelayedText(Text);
+    const [Posts, resolvePosts] = makeDelayedText(Text);
+    const [Photos, resolvePhotos] = makeDelayedText(Text);
+
+    // View
+    function ProfileDetails({avatar}) {
+      return (
+        <div>
+          <Name>:name:</Name>
+          {avatar}
+        </div>
+      );
+    }
+    function ProfileSidebar({friends}) {
+      return (
+        <div>
+          <Photos>:photos:</Photos>
+          {friends}
+        </div>
+      );
+    }
+    function ProfilePosts({posts}) {
+      return <div>{posts}</div>;
+    }
+
+    function ProfileContent() {
+      return (
+        <Suspense fallback="(loading everything)">
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <Suspense fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model, webpackMap),
+    );
+
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+
+    let flightResponse = '';
+    let isDone = false;
+
+    reader.read().then(function progress({done, value}) {
+      if (done) {
+        isDone = true;
+        return;
+      }
+
+      flightResponse += decoder.decode(value);
+
+      return reader.read().then(progress);
+    });
+
+    // Advance time enough to trigger a nested fallback.
+    jest.advanceTimersByTime(500);
+
+    await serverAct(() => {});
+
+    expect(flightResponse).toContain('(loading everything)');
+    expect(flightResponse).toContain('(loading sidebar)');
+    expect(flightResponse).toContain('(loading posts)');
+    if (!__DEV__) {
+      expect(flightResponse).not.toContain(':friends:');
+      expect(flightResponse).not.toContain(':name:');
+    }
+
+    await serverAct(() => {
+      resolveFriends();
+    });
+
+    expect(flightResponse).toContain(':friends:');
+
+    await serverAct(() => {
+      resolveName();
+    });
+
+    expect(flightResponse).toContain(':name:');
+
+    await serverAct(() => {
+      resolvePhotos();
+    });
+
+    expect(flightResponse).toContain(':photos:');
+
+    await serverAct(() => {
+      resolvePosts();
+    });
+
+    expect(flightResponse).toContain(':posts:');
+
+    // Final pending chunk is written; stream should be closed.
+    expect(isDone).toBeTruthy();
+  });
+
+  it('should be able to complete after aborting and throw the reason client-side', async () => {
+    const reportedErrors = [];
+
+    let errorBoundaryFn;
+    if (__DEV__) {
+      errorBoundaryFn = e => (
+        <p>
+          {e.message} + {e.digest}
+        </p>
+      );
+    } else {
+      errorBoundaryFn = e => {
+        expect(e.message).toBe(
+          'An error occurred in the Server Components render. The specific message is omitted in production' +
+            ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
+            ' may provide additional details about the nature of the error.',
+        );
+        return <p>{e.digest}</p>;
+      };
+    }
+
+    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;
+      }
+    }
+
+    const controller = new AbortController();
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <div>
+          <InfiniteSuspend />
+        </div>,
+        webpackMap,
+        {
+          signal: controller.signal,
+          onError(x) {
+            const message = typeof x === 'string' ? x : x.message;
+            reportedErrors.push(x);
+            return __DEV__ ? 'a dev digest' : `digest("${message}")`;
+          },
+        },
+      ),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return use(res);
+    }
+
+    await act(() => {
+      root.render(
+        <ErrorBoundary fallback={errorBoundaryFn}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    await act(() => {
+      controller.abort('for reasons');
+    });
+    const expectedValue = __DEV__
+      ? '<p>for reasons + a dev digest</p>'
+      : '<p>digest("for reasons")</p>';
+    expect(container.innerHTML).toBe(expectedValue);
+
+    expect(reportedErrors).toEqual(['for reasons']);
+  });
+
+  it('should warn in DEV a child is missing keys', async () => {
+    function ParentClient({children}) {
+      return children;
+    }
+    const Parent = clientExports(ParentClient);
+    const ParentModule = clientExports({Parent: ParentClient});
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <>
+          <Parent>{Array(6).fill(<div>no key</div>)}</Parent>
+          <ParentModule.Parent>
+            {Array(6).fill(<div>no key</div>)}
+          </ParentModule.Parent>
+        </>,
+        webpackMap,
+      ),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(stream);
+
+    await act(() => {
+      root.render(result);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the top-level render call using <ParentClient>. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('basic use(promise)', async () => {
+    function Server() {
+      return (
+        ReactServer.use(Promise.resolve('A')) +
+        ReactServer.use(Promise.resolve('B')) +
+        ReactServer.use(Promise.resolve('C'))
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    function Client() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Client />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('ABC');
+  });
+
+  it('use(promise) in multiple components', async () => {
+    function Child({prefix}) {
+      return (
+        prefix +
+        ReactServer.use(Promise.resolve('C')) +
+        ReactServer.use(Promise.resolve('D'))
+      );
+    }
+
+    function Parent() {
+      return (
+        <Child
+          prefix={
+            ReactServer.use(Promise.resolve('A')) +
+            ReactServer.use(Promise.resolve('B'))
+          }
+        />
+      );
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Parent />),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    function Client() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Client />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('ABCD');
+  });
+
+  it('using a rejected promise will throw', async () => {
+    const promiseA = Promise.resolve('A');
+    const promiseB = Promise.reject(new Error('Oops!'));
+    const promiseC = Promise.resolve('C');
+
+    // Jest/Node will raise an unhandled rejected error unless we await this. It
+    // works fine in the browser, though.
+    await expect(promiseB).rejects.toThrow('Oops!');
+
+    function Server() {
+      return (
+        ReactServer.use(promiseA) +
+        ReactServer.use(promiseB) +
+        ReactServer.use(promiseC)
+      );
+    }
+
+    const reportedErrors = [];
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap, {
+        onError(x) {
+          reportedErrors.push(x);
+          return __DEV__ ? 'a dev digest' : `digest("${x.message}")`;
+        },
+      }),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error) {
+          return __DEV__
+            ? this.state.error.message + ' + ' + this.state.error.digest
+            : this.state.error.digest;
+        }
+        return this.props.children;
+      }
+    }
+
+    function Client() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ErrorBoundary>
+          <Client />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe(
+      __DEV__ ? 'Oops! + a dev digest' : 'digest("Oops!")',
+    );
+    expect(reportedErrors.length).toBe(1);
+    expect(reportedErrors[0].message).toBe('Oops!');
+  });
+
+  it("use a promise that's already been instrumented and resolved", async () => {
+    const thenable = {
+      status: 'fulfilled',
+      value: 'Hi',
+      then() {},
+    };
+
+    // This will never suspend because the thenable already resolved
+    function Server() {
+      return ReactServer.use(thenable);
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    function Client() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Client />);
+    });
+    expect(container.innerHTML).toBe('Hi');
+  });
+
+  it('unwraps thenable that fulfills synchronously without suspending', async () => {
+    function Server() {
+      const thenable = {
+        then(resolve) {
+          // This thenable immediately resolves, synchronously, without waiting
+          // a microtask.
+          resolve('Hi');
+        },
+      };
+      try {
+        return ReactServer.use(thenable);
+      } catch {
+        throw new Error(
+          '`use` should not suspend because the thenable resolved synchronously.',
+        );
+      }
+    }
+
+    // Because the thenable resolves synchronously, we should be able to finish
+    // rendering synchronously, with no fallback.
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+
+    function Client() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Client />);
+    });
+    expect(container.innerHTML).toBe('Hi');
+  });
+
+  it('can pass a higher order function by reference from server to client', async () => {
+    let actionProxy;
+
+    function Client({action}) {
+      actionProxy = action;
+      return 'Click Me';
+    }
+
+    function greet(transform, text) {
+      return 'Hello ' + transform(text);
+    }
+
+    function upper(text) {
+      return text.toUpperCase();
+    }
+
+    const ServerModuleA = serverExports({
+      greet,
+    });
+    const ServerModuleB = serverExports({
+      upper,
+    });
+    const ClientRef = clientExports(Client);
+
+    const boundFn = ServerModuleA.greet.bind(null, ServerModuleB.upper);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientRef action={boundFn} />,
+        webpackMap,
+      ),
+    );
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(ref, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        return callServer(ref, body);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+    expect(typeof actionProxy).toBe('function');
+    expect(actionProxy).not.toBe(boundFn);
+
+    const result = await actionProxy('hi');
+    expect(result).toBe('Hello HI');
+  });
+
+  it('can call a module split server function', async () => {
+    let actionProxy;
+
+    function Client({action}) {
+      actionProxy = action;
+      return 'Click Me';
+    }
+
+    function greet(text) {
+      return 'Hello ' + text;
+    }
+
+    const ServerModule = serverExports({
+      // This gets split into another module
+      split: greet,
+    });
+    const ClientRef = clientExports(Client);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientRef action={ServerModule.split} />,
+        webpackMap,
+      ),
+    );
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(ref, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        return callServer(ref, body);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+    expect(typeof actionProxy).toBe('function');
+
+    const result = await actionProxy('Split');
+    expect(result).toBe('Hello Split');
+  });
+
+  it('can pass a server function by importing from client back to server', async () => {
+    function greet(transform, text) {
+      return 'Hello ' + transform(text);
+    }
+
+    function upper(text) {
+      return text.toUpperCase();
+    }
+
+    const ServerModuleA = serverExports({
+      greet,
+    });
+    const ServerModuleB = serverExports({
+      upper,
+    });
+
+    let actionProxy;
+
+    // This is a Proxy representing ServerModuleB in the Client bundle.
+    const ServerModuleBImportedOnClient = {
+      upper: ReactServerDOMClient.createServerReference(
+        ServerModuleB.upper.$$id,
+        async function (ref, args) {
+          const body = await ReactServerDOMClient.encodeReply(args);
+          return callServer(ref, body);
+        },
+        undefined,
+        undefined,
+        'upper',
+      ),
+    };
+
+    expect(ServerModuleBImportedOnClient.upper.name).toBe(
+      __DEV__ ? 'upper' : 'action',
+    );
+    if (__DEV__) {
+      expect(ServerModuleBImportedOnClient.upper.toString()).toBe(
+        '(...args) => server(...args)',
+      );
+    }
+
+    function Client({action}) {
+      // Client side pass a Server Reference into an action.
+      actionProxy = text => action(ServerModuleBImportedOnClient.upper, text);
+      return 'Click Me';
+    }
+
+    const ClientRef = clientExports(Client);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientRef action={ServerModuleA.greet} />,
+        webpackMap,
+      ),
+    );
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(ref, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        return callServer(ref, body);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+
+    const result = await actionProxy('hi');
+    expect(result).toBe('Hello HI');
+  });
+
+  it('can bind arguments to a server reference', async () => {
+    let actionProxy;
+
+    function Client({action}) {
+      actionProxy = action;
+      return 'Click Me';
+    }
+
+    const greet = serverExports(function greet(a, b, c) {
+      return a + ' ' + b + c;
+    });
+    const ClientRef = clientExports(Client);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientRef action={greet.bind(null, 'Hello').bind(null, 'World')} />,
+        webpackMap,
+      ),
+    );
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(actionId, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        return callServer(actionId, body);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+    expect(typeof actionProxy).toBe('function');
+    expect(actionProxy).not.toBe(greet);
+
+    const result = await actionProxy('!');
+    expect(result).toBe('Hello World!');
+  });
+
+  it('propagates server reference errors to the client', async () => {
+    let actionProxy;
+
+    function Client({action}) {
+      actionProxy = action;
+      return 'Click Me';
+    }
+
+    async function send(text) {
+      throw new Error(`Error for ${text}`);
+    }
+
+    const ServerModule = serverExports({send});
+    const ClientRef = clientExports(Client);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientRef action={ServerModule.send} />,
+        webpackMap,
+      ),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(actionId, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        const result = callServer(actionId, body);
+        // Flight doesn't attach error handlers early enough. we suppress the warning
+        // by putting a dummy catch on the result here
+        result.catch(() => {});
+        return ReactServerDOMClient.createFromReadableStream(
+          ReactServerDOMServer.renderToReadableStream(result, null, {
+            onError: error => 'test-error-digest',
+          }),
+        );
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    let thrownError;
+
+    try {
+      await serverAct(() => actionProxy('test'));
+    } catch (error) {
+      thrownError = error;
+    }
+
+    if (__DEV__) {
+      expect(thrownError).toEqual(new Error('Error for test'));
+    } else {
+      expect(thrownError).toEqual(
+        new Error(
+          'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.',
+        ),
+      );
+
+      expect(thrownError.digest).toBe('test-error-digest');
+    }
+  });
+
+  it('can use the same function twice as a server action', async () => {
+    let actionProxy1;
+    let actionProxy2;
+
+    function Client({action1, action2}) {
+      actionProxy1 = action1;
+      actionProxy2 = action2;
+      return 'Click Me';
+    }
+
+    function greet(text) {
+      return 'Hello ' + text;
+    }
+
+    const ServerModule = serverExports({
+      greet,
+      greet2: greet,
+    });
+    const ClientRef = clientExports(Client);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientRef
+          action1={ServerModule.greet}
+          action2={ServerModule.greet2}
+        />,
+        webpackMap,
+      ),
+    );
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      async callServer(ref, args) {
+        const body = await ReactServerDOMClient.encodeReply(args);
+        return callServer(ref, body);
+      },
+    });
+
+    function App() {
+      return use(response);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(container.innerHTML).toBe('Click Me');
+    expect(typeof actionProxy1).toBe('function');
+    expect(actionProxy1).not.toBe(greet);
+
+    // TODO: Ideally flight would be encoding this the same.
+    expect(actionProxy1).not.toBe(actionProxy2);
+
+    const result = await actionProxy1('world');
+    expect(result).toBe('Hello world');
+  });
+
+  it('can pass an async server exports that resolves later to an outline object like a Map', async () => {
+    let resolve;
+    const chunkPromise = new Promise(r => (resolve = r));
+
+    function action() {}
+    const serverModule = serverExports(
+      {
+        action: action,
+      },
+      chunkPromise,
+    );
+
+    // Send the action to the client
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {action: serverModule.action},
+        webpackMap,
+      ),
+    );
+
+    // Snapshot updates change this formatting, so we let prettier ignore it.
+    // prettier-ignore
+    const response =
+      await ReactServerDOMClient.createFromReadableStream(stream);
+
+    // Pass the action back to the server inside a Map
+
+    const map = new Map();
+    map.set('action', response.action);
+
+    const body = await ReactServerDOMClient.encodeReply(map);
+    const resultPromise = ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    // We couldn't yet resolve the server reference because we haven't loaded
+    // its chunk yet in the new server instance. We now resolve it which loads
+    // it asynchronously.
+    await resolve();
+
+    const result = await resultPromise;
+    expect(result instanceof Map).toBe(true);
+    expect(result.get('action')).toBe(action);
+  });
+
+  it('supports Float hints before the first await in server components in Fiber', async () => {
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      ReactServerDOM.preload('before', {as: 'style'});
+      await 1;
+      ReactServerDOM.preload('after', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+      }
+      return response;
+    }
+
+    function App() {
+      return getResponse();
+    }
+
+    // pausing to let Flight runtime tick. This is a test only artifact of the fact that
+    // we aren't operating separate module graphs for flight and fiber. In a real app
+    // each would have their own dispatcher and there would be no cross dispatching.
+    await 1;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(document.head.innerHTML).toBe(
+      gate(f => f.www)
+        ? // The www entrypoints for ReactDOM and ReactDOMClient are unified so even
+          // when you pull in just the top level the dispatcher for the Document is
+          // loaded alongside it. In a normal environment there would be nothing to dispatch to
+          // in a server environment so the preload calls would still only be dispatched to fizz
+          // or the browser but not both. However in this contrived test environment the preloads
+          // are being dispatched simultaneously causing an extraneous preload to show up. This test currently
+          // asserts this be demonstrating that the preload call after the await point
+          // is written to the document before the call before it. We still demonstrate that
+          // flight handled the sync call because if the fiber implementation did it would appear
+          // before the after call. In the future we will change this assertion once the fiber
+          // implementation no long automatically gets pulled in
+          '<link rel="preload" href="after" as="style"><link rel="preload" href="before" as="style">'
+        : // For other release channels the client and isomorphic entrypoints are separate and thus we only
+          // observe the expected preload from before the first await
+          '<link rel="preload" href="before" as="style">',
+    );
+    expect(container.innerHTML).toBe('<p>hello world</p>');
+  });
+
+  it('Does not support Float hints in server components anywhere in Fizz', async () => {
+    // In environments that do not support AsyncLocalStorage the Flight client has no ability
+    // to scope hint dispatching to a specific Request. In Fiber this isn't a problem because
+    // the Browser scope acts like a singleton and we can dispatch away. But in Fizz we need to have
+    // a reference to Resources and this is only possible during render unless you support AsyncLocalStorage.
+    function Component() {
+      return <p>hello world</p>;
+    }
+
+    const ClientComponent = clientExports(Component);
+
+    async function ServerComponent() {
+      ReactDOM.preload('before', {as: 'style'});
+      await 1;
+      ReactDOM.preload('after', {as: 'style'});
+      return <ClientComponent />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response = ReactServerDOMClient.createFromReadableStream(stream);
+      }
+      return response;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>{getResponse()}</body>
+        </html>
+      );
+    }
+
+    let fizzPromise;
+    await act(async () => {
+      fizzPromise = ReactDOMFizzServer.renderToReadableStream(<App />);
+    });
+    const fizzStream = await fizzPromise;
+
+    const decoder = new TextDecoder();
+    const reader = fizzStream.getReader();
+    let content = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        content += decoder.decode();
+        break;
+      }
+      content += decoder.decode(value, {stream: true});
+    }
+
+    expect(content).toEqual(
+      '<!DOCTYPE html><html><head>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render"/>'
+          : '') +
+        '</head>' +
+        '<body><p>hello world</p>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body></html>',
+    );
+  });
+
+  it('should not continue rendering after the reader cancels', async () => {
+    let hasLoaded = false;
+    let resolve;
+    let rendered = false;
+    const promise = new Promise(r => (resolve = r));
+    function Wait() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      rendered = true;
+      return 'Done';
+    }
+    const errors = [];
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <Wait />
+          </Suspense>
+        </div>,
+        null,
+        {
+          onError(x) {
+            errors.push(x.message);
+          },
+        },
+      ),
+    );
+
+    expect(rendered).toBe(false);
+
+    const reader = stream.getReader();
+    await reader.read();
+    await reader.cancel();
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+
+    hasLoaded = true;
+    resolve();
+
+    await jest.runAllTimers();
+
+    expect(rendered).toBe(false);
+
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  function passThrough(stream) {
+    // Simulate more realistic network by splitting up and rejoining some chunks.
+    // This lets us test that we don't accidentally rely on particular bounds of the chunks.
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        function push() {
+          reader.read().then(({done, value}) => {
+            if (done) {
+              controller.close();
+              return;
+            }
+            controller.enqueue(value);
+            push();
+            return;
+          });
+        }
+        push();
+      },
+    });
+  }
+
+  it('should supports streaming ReadableStream with objects', async () => {
+    const errors = [];
+    let controller1;
+    let controller2;
+    const s1 = new ReadableStream({
+      start(c) {
+        controller1 = c;
+      },
+    });
+    const s2 = new ReadableStream({
+      start(c) {
+        controller2 = c;
+      },
+    });
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          s1,
+          s2,
+        },
+        {},
+        {
+          onError(x) {
+            errors.push(x);
+            return x;
+          },
+        },
+      ),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      passThrough(rscStream),
+    );
+
+    const reader1 = result.s1.getReader();
+    const reader2 = result.s2.getReader();
+
+    await serverAct(() => {
+      controller1.enqueue({hello: 'world'});
+      controller2.enqueue({hi: 'there'});
+    });
+
+    expect(await reader1.read()).toEqual({
+      value: {hello: 'world'},
+      done: false,
+    });
+    expect(await reader2.read()).toEqual({
+      value: {hi: 'there'},
+      done: false,
+    });
+
+    await serverAct(async () => {
+      controller1.enqueue('text1');
+      controller2.enqueue('text2');
+      controller1.close();
+    });
+
+    expect(await reader1.read()).toEqual({
+      value: 'text1',
+      done: false,
+    });
+    expect(await reader1.read()).toEqual({
+      value: undefined,
+      done: true,
+    });
+    expect(await reader2.read()).toEqual({
+      value: 'text2',
+      done: false,
+    });
+    await serverAct(async () => {
+      controller2.error('rejected');
+    });
+    let error = null;
+    try {
+      await reader2.read();
+    } catch (x) {
+      error = x;
+    }
+    expect(error.digest).toBe('rejected');
+    expect(errors).toEqual(['rejected']);
+  });
+
+  it('should cancels the underlying ReadableStream when we are cancelled', async () => {
+    let controller;
+    let cancelReason;
+    const s = new ReadableStream({
+      start(c) {
+        controller = c;
+      },
+      cancel(r) {
+        cancelReason = r;
+      },
+    });
+    let loggedReason;
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        s,
+        {},
+        {
+          onError(reason) {
+            loggedReason = reason;
+          },
+        },
+      ),
+    );
+    const reader = rscStream.getReader();
+    controller.enqueue('hi');
+    const reason = new Error('aborted');
+    reader.cancel(reason);
+    await reader.read();
+    expect(cancelReason).toBe(reason);
+    expect(loggedReason).toBe(reason);
+  });
+
+  it('should cancels the underlying ReadableStream when we abort', async () => {
+    const errors = [];
+    let controller;
+    let cancelReason;
+    const abortController = new AbortController();
+    const s = new ReadableStream({
+      start(c) {
+        controller = c;
+      },
+      cancel(r) {
+        cancelReason = r;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        s,
+        {},
+        {
+          signal: abortController.signal,
+          onError(x) {
+            errors.push(x);
+            return x.message;
+          },
+        },
+      ),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      passThrough(rscStream),
+    );
+    const reader = result.getReader();
+
+    controller.enqueue('hi');
+
+    await 0;
+
+    const reason = new Error('aborted');
+    abortController.abort(reason);
+
+    // We should be able to read the part we already emitted before the abort
+    expect(await reader.read()).toEqual({
+      value: 'hi',
+      done: false,
+    });
+
+    expect(cancelReason).toBe(reason);
+
+    let error = null;
+    try {
+      await reader.read();
+    } catch (x) {
+      error = x;
+    }
+    expect(error.digest).toBe('aborted');
+    expect(errors).toEqual([reason]);
+  });
+
+  it('should supports streaming AsyncIterables with objects', async () => {
+    let resolve;
+    const wait = new Promise(r => (resolve = r));
+    const errors = [];
+    const multiShotIterable = {
+      async *[Symbol.asyncIterator]() {
+        const next = yield {hello: 'A'};
+        expect(next).toBe(undefined);
+        await wait;
+        yield {hi: 'B'};
+        return 'C';
+      },
+    };
+    const singleShotIterator = (async function* () {
+      const next = yield {hello: 'D'};
+      expect(next).toBe(undefined);
+      await wait;
+      yield {hi: 'E'};
+      // eslint-disable-next-line no-throw-literal
+      throw 'F';
+    })();
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          multiShotIterable,
+          singleShotIterator,
+        },
+        {},
+        {
+          onError(x) {
+            errors.push(x);
+            return x;
+          },
+        },
+      ),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      passThrough(rscStream),
+    );
+
+    const iterator1 = result.multiShotIterable[Symbol.asyncIterator]();
+    const iterator2 = result.singleShotIterator[Symbol.asyncIterator]();
+
+    expect(iterator1).not.toBe(result.multiShotIterable);
+    expect(iterator2).toBe(result.singleShotIterator);
+
+    expect(await iterator1.next()).toEqual({
+      value: {hello: 'A'},
+      done: false,
+    });
+    expect(await iterator2.next()).toEqual({
+      value: {hello: 'D'},
+      done: false,
+    });
+
+    await serverAct(() => {
+      resolve();
+    });
+
+    expect(await iterator1.next()).toEqual({
+      value: {hi: 'B'},
+      done: false,
+    });
+    expect(await iterator2.next()).toEqual({
+      value: {hi: 'E'},
+      done: false,
+    });
+    expect(await iterator1.next()).toEqual({
+      value: 'C', // Return value
+      done: true,
+    });
+    expect(await iterator1.next()).toEqual({
+      value: undefined,
+      done: true,
+    });
+
+    let error = null;
+    try {
+      await iterator2.next();
+    } catch (x) {
+      error = x;
+    }
+    expect(error.digest).toBe('F');
+    expect(errors).toEqual(['F']);
+
+    // Multi-shot iterables should be able to do the same thing again
+    const iterator3 = result.multiShotIterable[Symbol.asyncIterator]();
+
+    expect(iterator3).not.toBe(iterator1);
+
+    // We should be able to iterate over the iterable again and it should be
+    // synchronously available using instrumented promises so that React can
+    // rerender it synchronously.
+    expect(iterator3.next().value).toEqual({
+      value: {hello: 'A'},
+      done: false,
+    });
+    expect(iterator3.next().value).toEqual({
+      value: {hi: 'B'},
+      done: false,
+    });
+    expect(iterator3.next().value).toEqual({
+      value: 'C', // Return value
+      done: true,
+    });
+    expect(iterator3.next().value).toEqual({
+      value: undefined,
+      done: true,
+    });
+
+    expect(() => iterator3.next('this is not allowed')).toThrow(
+      'Values cannot be passed to next() of AsyncIterables passed to Client Components.',
+    );
+  });
+
+  it('should cancels the underlying AsyncIterable when we are cancelled', async () => {
+    let resolve;
+    const wait = new Promise(r => (resolve = r));
+    let thrownReason;
+    const iterator = (async function* () {
+      try {
+        await wait;
+        yield 'a';
+        yield 'b';
+      } catch (x) {
+        thrownReason = x;
+      }
+      yield 'c';
+    })();
+    let loggedReason;
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        iterator,
+        {},
+        {
+          onError(reason) {
+            loggedReason = reason;
+          },
+        },
+      ),
+    );
+
+    const reader = rscStream.getReader();
+
+    const reason = new Error('aborted');
+    reader.cancel(reason);
+    await resolve();
+    await reader.read();
+    expect(thrownReason).toBe(reason);
+    expect(loggedReason).toBe(reason);
+  });
+
+  it('should cancels the underlying AsyncIterable when we abort', async () => {
+    const errors = [];
+    const abortController = new AbortController();
+    let resolve;
+    const wait = new Promise(r => (resolve = r));
+    let thrownReason;
+    const iterator = (async function* () {
+      try {
+        yield 'a';
+        await wait;
+        yield 'b';
+      } catch (x) {
+        thrownReason = x;
+      }
+      yield 'c';
+    })();
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        iterator,
+        {},
+        {
+          signal: abortController.signal,
+          onError(x) {
+            errors.push(x);
+            return x.message;
+          },
+        },
+      ),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      passThrough(rscStream),
+    );
+
+    const reason = new Error('aborted');
+    abortController.abort(reason);
+
+    await serverAct(() => {
+      resolve();
+    });
+
+    // We should be able to read the part we already emitted before the abort
+    expect(await result.next()).toEqual({
+      value: 'a',
+      done: false,
+    });
+
+    expect(thrownReason).toBe(reason);
+
+    let error = null;
+    try {
+      await result.next();
+    } catch (x) {
+      error = x;
+    }
+    expect(error.digest).toBe('aborted');
+    expect(errors).toEqual([reason]);
+  });
+
+  // @gate enableHalt
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      passThrough(prelude),
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+    expect(container.innerHTML).toBe('<div>hello world</div>');
+  });
+
+  // @gate enableHalt
+  it('does not propagate abort reasons errors when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <Greeting />
+          </Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const errors = [];
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+            onError(err) {
+              errors.push(err);
+            },
+          },
+        ),
+      };
+    });
+
+    controller.abort('boom');
+    resolveGreeting();
+    const {prelude} = await serverAct(() => pendingResult);
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      passThrough(prelude),
+    );
+    const container = document.createElement('div');
+    errors.length = 0;
+    const root = ReactDOMClient.createRoot(container, {
+      onUncaughtError(err) {
+        errors.push(err);
+      },
+    });
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(errors).toEqual([new Error('Connection closed.')]);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('can dedupe references inside promises', async () => {
+    const foo = {};
+    const bar = {
+      foo: foo,
+    };
+    foo.bar = bar;
+
+    const object = {
+      foo: Promise.resolve(foo),
+      bar: Promise.resolve(bar),
+    };
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(object, webpackMap),
+    );
+
+    const response = await ReactServerDOMClient.createFromReadableStream(
+      passThrough(stream),
+    );
+
+    const responseFoo = await response.foo;
+    const responseBar = await response.bar;
+    expect(responseFoo.bar).toBe(responseBar);
+    expect(responseBar.foo).toBe(responseFoo);
+  });
+
+  it('can deduped outlined references inside promises', async () => {
+    const foo = {};
+    const bar = new Set([foo]); // This will be outlined which can create a future reference
+    foo.bar = bar;
+
+    const object = {
+      foo: Promise.resolve(foo),
+      bar: Promise.resolve(bar),
+    };
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(object, webpackMap),
+    );
+
+    const response = await ReactServerDOMClient.createFromReadableStream(
+      passThrough(stream),
+    );
+
+    const responseFoo = await response.foo;
+    const responseBar = await response.bar;
+    expect(responseFoo.bar).toBe(responseBar);
+    expect(Array.from(responseBar)[0]).toBe(responseFoo);
+  });
+
+  it('should resolve deduped references in maps used in client component props', async () => {
+    const ClientComponent = clientExports(function ClientComponent({
+      shared,
+      map,
+    }) {
+      expect(map.get(42)).toBe(shared);
+      return JSON.stringify({shared, map: Array.from(map)});
+    });
+
+    function Server() {
+      const shared = {id: 42};
+      const map = new Map([[42, shared]]);
+
+      return <ClientComponent shared={shared} map={map} />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe(
+      '{"shared":{"id":42},"map":[[42,{"id":42}]]}',
+    );
+  });
+
+  it('should resolve a cycle between debug info and the value it produces', async () => {
+    function Inner({style}) {
+      return <div style={style} />;
+    }
+
+    function Component({style}) {
+      return <Inner style={style} />;
+    }
+
+    const style = {};
+    const element = <Component style={style} />;
+    style.element = element;
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(element, webpackMap),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream);
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+
+  it('does not close the response early when using a fast debug channel', async () => {
+    function Component() {
+      return <div>Hi</div>;
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Component />, webpackMap, {
+        debugChannel: {
+          writable: new WritableStream({
+            write(chunk) {
+              debugReadableStreamController.enqueue(chunk);
+            },
+            close() {
+              debugReadableStreamController.close();
+            },
+          }),
+        },
+      }),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div>Hi</div>');
+  });
+
+  it('can transport debug info through a dedicated debug channel', async () => {
+    let ownerStack;
+
+    const ClientComponent = clientExports(() => {
+      ownerStack = React.captureOwnerStack ? React.captureOwnerStack() : null;
+      return <p>Hi</p>;
+    });
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponent, null),
+      );
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        ReactServer.createElement(App, null),
+        webpackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      replayConsoleLogs: true,
+      debugChannel: {
+        readable: debugReadableStream,
+        // Explicitly not defining a writable side here. Its presence was
+        // previously used as a condition to wait for referenced debug chunks.
+      },
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+    }
+
+    expect(container.innerHTML).toBe('<p>Hi</p>');
+  });
+
+  it('should not have missing key warnings when a static child is blocked on debug info', async () => {
+    const ClientComponent = clientExports(function ClientComponent({element}) {
+      return (
+        <div>
+          <span>Hi</span>
+          {element}
+        </div>
+      );
+    });
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientComponent element={<span>Sebbie</span>} />,
+        webpackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      debugChannel: {readable: createDelayedStream(debugReadableStream)},
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    // Wait for the debug info to be processed.
+    await act(() => {});
+
+    expect(container.innerHTML).toBe(
+      '<div><span>Hi</span><span>Sebbie</span></div>',
+    );
+  });
+
+  it('should fully resolve debug info when transported through a (slow) debug channel', async () => {
+    function Paragraph({children}) {
+      return ReactServer.createElement('p', null, children);
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const app = ReactServer.createElement(
+      ReactServer.Fragment,
+      null,
+      ReactServer.createElement(Paragraph, null, 'foo'),
+      ReactServer.createElement(Paragraph, null, 'bar'),
+    );
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          root: app,
+        },
+        webpackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      const {root} = use(response);
+      return root;
+    }
+
+    const [slowDebugStream1, slowDebugStream2] =
+      createDelayedStream(debugReadableStream).tee();
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      debugChannel: {readable: slowDebugStream1},
+    });
+
+    const container = document.createElement('div');
+    const clientRoot = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      clientRoot.render(<ClientRoot response={response} />);
+    });
+
+    if (__DEV__) {
+      const debugStreamReader = slowDebugStream2.getReader();
+      while (true) {
+        const {done} = await debugStreamReader.read();
+        if (done) {
+          break;
+        }
+        // Allow the client to process each debug chunk as it arrives.
+        await act(() => {});
+      }
+    }
+
+    expect(container.innerHTML).toBe('<p>foo</p><p>bar</p>');
+
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      const result = await response;
+      const firstParagraph = result.root[0];
+
+      expect(getDebugInfo(firstParagraph)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Paragraph",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js",
+                2826,
+                19,
+                2810,
+                89,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+        ]
+      `);
+    }
+  });
+
+  it('should resolve a cycle between debug info and the value it produces when using a debug channel', async () => {
+    // Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
+
+    function Inner({style}) {
+      return <div style={style} />;
+    }
+
+    function Component({style}) {
+      return <Inner style={style} />;
+    }
+
+    const style = {};
+    const element = <Component style={style} />;
+    style.element = element;
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(element, webpackMap, {
+        debugChannel: {
+          writable: new WritableStream({
+            write(chunk) {
+              debugReadableStreamController.enqueue(chunk);
+            },
+            close() {
+              debugReadableStreamController.close();
+            },
+          }),
+        },
+      }),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      debugChannel: {readable: debugReadableStream},
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div></div>');
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
new file mode 100644
index 00000000000..940e6c3374f
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
@@ -0,0 +1,2422 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+// Patch for Edge environments for global scope
+global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
+
+let serverExports;
+let clientExports;
+let webpackMap;
+let webpackServerMap;
+let webpackModules;
+let webpackModuleLoading;
+let React;
+let ReactServer;
+let ReactDOMServer;
+let ReactDOMFizzStatic;
+let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
+let ReactServerDOMClient;
+let use;
+let serverAct;
+let assertConsoleErrorDev;
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+      return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+    })
+  );
+}
+
+function normalizeSerializedContent(str) {
+  return str.replaceAll(__REACT_ROOT_PATH_TEST__, '**');
+}
+
+describe('ReactFlightDOMEdge', () => {
+  beforeEach(() => {
+    // Mock performance.now for timing tests
+    let time = 10;
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
+    jest.resetModules();
+
+    serverAct = require('internal-test-utils').serverAct;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-webpack/server', () =>
+      require('react-server-dom-webpack/server.edge'),
+    );
+
+    const WebpackMock = require('./utils/WebpackMock');
+
+    serverExports = WebpackMock.serverExports;
+    clientExports = WebpackMock.clientExports;
+    webpackMap = WebpackMock.webpackMap;
+    webpackServerMap = WebpackMock.webpackServerMap;
+    webpackModules = WebpackMock.webpackModules;
+    webpackModuleLoading = WebpackMock.moduleLoading;
+
+    ReactServer = require('react');
+    ReactServerDOMServer = require('react-server-dom-webpack/server');
+    jest.mock('react-server-dom-webpack/static', () =>
+      require('react-server-dom-webpack/static.edge'),
+    );
+    ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+
+    jest.resetModules();
+    __unmockReact();
+    jest.unmock('react-server-dom-webpack/server');
+    jest.mock('react-server-dom-webpack/client', () =>
+      require('react-server-dom-webpack/client.edge'),
+    );
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.edge');
+    ReactDOMFizzStatic = require('react-dom/static.edge');
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+    use = React.use;
+  });
+
+  function passThrough(stream) {
+    // Simulate more realistic network by splitting up and rejoining some chunks.
+    // This lets us test that we don't accidentally rely on particular bounds of the chunks.
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        let prevChunk = new Uint8Array(0);
+        function push() {
+          reader.read().then(({done, value}) => {
+            if (done) {
+              controller.enqueue(prevChunk);
+              prevChunk = new Uint8Array(0);
+              controller.close();
+              return;
+            }
+            const chunk = new Uint8Array(prevChunk.length + value.length);
+            chunk.set(prevChunk, 0);
+            chunk.set(value, prevChunk.length);
+            if (chunk.length > 50) {
+              // Copy the part we're keeping (prevChunk) to avoid buffer
+              // transfer. When we enqueue the partial chunk below, downstream
+              // consumers (like byte streams in the Flight Client) may detach
+              // the underlying buffer. Since prevChunk would share the same
+              // buffer, we copy it first so it has its own independent buffer.
+              // TODO: Should we just use {type: 'bytes'} for this stream to
+              // always transfer ownership, and not only "accidentally" when we
+              // enqueue in the Flight Client?
+              prevChunk = chunk.slice(chunk.length - 50);
+              controller.enqueue(chunk.subarray(0, chunk.length - 50));
+            } else {
+              // Wait to see if we get some more bytes to join in.
+              prevChunk = chunk;
+              // Flush if we don't get any more.
+              (async function flushAfterAFewTasks() {
+                for (let i = 0; i < 10; i++) {
+                  await i;
+                }
+                if (prevChunk.byteLength > 0) {
+                  controller.enqueue(prevChunk);
+                }
+                prevChunk = new Uint8Array(0);
+              })();
+            }
+            push();
+          });
+        }
+        push();
+      },
+    });
+  }
+
+  function dripStream(input) {
+    const reader = input.getReader();
+    let nextDrop = 0;
+    let controller = null;
+    let streamDone = false;
+    const buffer = [];
+    function flush() {
+      if (controller === null || nextDrop === 0) {
+        return;
+      }
+      while (buffer.length > 0 && nextDrop > 0) {
+        const nextChunk = buffer[0];
+        if (nextChunk.byteLength <= nextDrop) {
+          nextDrop -= nextChunk.byteLength;
+          controller.enqueue(nextChunk);
+          buffer.shift();
+          if (streamDone && buffer.length === 0) {
+            controller.done();
+          }
+        } else {
+          controller.enqueue(nextChunk.subarray(0, nextDrop));
+          buffer[0] = nextChunk.subarray(nextDrop);
+          nextDrop = 0;
+        }
+      }
+    }
+    const output = new ReadableStream({
+      start(c) {
+        controller = c;
+        async function pump() {
+          for (;;) {
+            const {value, done} = await reader.read();
+            if (done) {
+              streamDone = true;
+              break;
+            }
+            buffer.push(value);
+            flush();
+          }
+        }
+        pump();
+      },
+      pull() {},
+      cancel(reason) {
+        reader.cancel(reason);
+      },
+    });
+    function drip(n) {
+      nextDrop += n;
+      flush();
+    }
+
+    return [output, drip];
+  }
+
+  async function readResult(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  async function readByteLength(stream) {
+    const reader = stream.getReader();
+    let length = 0;
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return length;
+      }
+      length += value.byteLength;
+    }
+  }
+
+  async function createBufferedUnclosingStream(
+    stream: ReadableStream<Uint8Array>,
+  ): Promise<ReadableStream<Uint8Array>> {
+    const chunks: Array<Uint8Array> = [];
+    const reader = stream.getReader();
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      } else {
+        chunks.push(value);
+      }
+    }
+
+    let i = 0;
+    return new ReadableStream({
+      async pull(controller) {
+        if (i < chunks.length) {
+          controller.enqueue(chunks[i++]);
+        }
+      },
+    });
+  }
+
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
+  it('should allow an alternative module mapping to be used for SSR', async () => {
+    function ClientComponent() {
+      return <span>Client Component</span>;
+    }
+    // The Client build may not have the same IDs as the Server bundles for the same
+    // component.
+    const ClientComponentOnTheClient = clientExports(ClientComponent);
+    const ClientComponentOnTheServer = clientExports(ClientComponent);
+
+    // In the SSR bundle this module won't exist. We simulate this by deleting it.
+    const clientId = webpackMap[ClientComponentOnTheClient.$$id].id;
+    delete webpackModules[clientId];
+
+    // Instead, we have to provide a translation from the client meta data to the SSR
+    // meta data.
+    const ssrMetadata = webpackMap[ClientComponentOnTheServer.$$id];
+    const translationMap = {
+      [clientId]: {
+        '*': ssrMetadata,
+      },
+    };
+
+    function App() {
+      return <ClientComponentOnTheClient />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<App />, webpackMap),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: translationMap,
+        moduleLoading: webpackModuleLoading,
+      },
+    });
+
+    function ClientRoot() {
+      return use(response);
+    }
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<ClientRoot />),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual('<span>Client Component</span>');
+  });
+
+  it('should resolve cyclic references in client component props after two rounds of serialization and deserialization', async () => {
+    const ClientComponent = clientExports(function ClientComponent({data}) {
+      return (
+        <div>{data.self === data ? 'Cycle resolved' : 'Cycle broken'}</div>
+      );
+    });
+    const clientModuleMetadata = webpackMap[ClientComponent.$$id];
+    const consumerModuleId = 'consumer-' + clientModuleMetadata.id;
+    const clientReference = Object.defineProperties(ClientComponent, {
+      $$typeof: {value: Symbol.for('react.client.reference')},
+      $$id: {value: ClientComponent.$$id},
+    });
+    webpackModules[consumerModuleId] = clientReference;
+
+    const cyclic = {self: null};
+    cyclic.self = cyclic;
+
+    const stream1 = ReactServerDOMServer.renderToReadableStream(
+      <React.Fragment key="this-key-is-important-to-repro-a-prior-cycle-serialization-bug">
+        <ClientComponent data={cyclic} />
+      </React.Fragment>,
+      webpackMap,
+    );
+
+    const promise = ReactServerDOMClient.createFromReadableStream(stream1, {
+      serverConsumerManifest: {
+        moduleMap: {
+          [clientModuleMetadata.id]: {
+            '*': {
+              id: consumerModuleId,
+              chunks: [],
+              name: '*',
+            },
+          },
+        },
+        moduleLoading: webpackModuleLoading,
+        serverModuleMap: null,
+      },
+    });
+
+    const errors = [];
+    const stream2 = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(promise, webpackMap, {
+        onError(error) {
+          errors.push(error);
+        },
+      }),
+    );
+
+    expect(errors).toEqual([]);
+
+    const element = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream2, {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(element),
+    );
+    const result = await readResult(ssrStream);
+
+    expect(result).toBe('<div>Cycle resolved</div>');
+  });
+
+  it('should be able to load a server reference on a consuming server if a mapping exists', async () => {
+    function greet(name) {
+      return 'hi, ' + name;
+    }
+    const ServerModule = serverExports({
+      greet,
+    });
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          method: ServerModule.greet,
+          boundMethod: ServerModule.greet.bind(null, 'there'),
+        },
+        webpackMap,
+      ),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: webpackMap,
+        serverModuleMap: webpackServerMap,
+        moduleLoading: webpackModuleLoading,
+      },
+    });
+
+    const result = await response;
+
+    expect(result.method).toBe(greet);
+    expect(result.boundMethod()).toBe('hi, there');
+  });
+
+  it('should be able to load a server reference on a consuming server if a mapping exists (async)', async () => {
+    let resolve;
+    const chunkPromise = new Promise(r => (resolve = r));
+
+    function greet(name) {
+      return 'hi, ' + name;
+    }
+    const ServerModule = serverExports(
+      {
+        greet,
+      },
+      chunkPromise,
+    );
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          method: ServerModule.greet,
+          boundMethod: ServerModule.greet.bind(null, 'there'),
+        },
+        webpackMap,
+      ),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: webpackMap,
+        serverModuleMap: webpackServerMap,
+        moduleLoading: webpackModuleLoading,
+      },
+    });
+
+    await resolve();
+
+    const result = await response;
+
+    expect(result.method).toBe(greet);
+    expect(result.boundMethod()).toBe('hi, there');
+  });
+
+  it('should load a server reference on a consuming server and pass it back', async () => {
+    function greet(name) {
+      return 'hi, ' + name;
+    }
+    const ServerModule = serverExports({
+      greet,
+    });
+
+    // Registering the server reference also with the client must not break
+    // subsequent `.bind` calls.
+    ReactServerDOMClient.registerServerReference(
+      ServerModule.greet,
+      ServerModule.greet.$$id,
+    );
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          method: ServerModule.greet,
+          boundMethod: ServerModule.greet.bind(null, 'there'),
+        },
+        webpackMap,
+      ),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: webpackMap,
+        serverModuleMap: webpackServerMap,
+        moduleLoading: webpackModuleLoading,
+      },
+    });
+
+    const result = await response;
+
+    expect(result.method).toBe(greet);
+    expect(result.boundMethod()).toBe('hi, there');
+
+    const body = await ReactServerDOMClient.encodeReply({
+      method: result.method,
+      boundMethod: result.boundMethod,
+    });
+    const replyResult = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+    expect(replyResult.method).toBe(greet);
+    expect(replyResult.boundMethod()).toBe('hi, there');
+  });
+
+  it('should encode long string in a compact format', async () => {
+    const testString = '"\n\t'.repeat(500) + '🙃';
+    const testString2 = 'hello'.repeat(400);
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream({
+        text: testString,
+        text2: testString2,
+      }),
+    );
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const serializedContent = await readResult(stream1);
+    // The content should be compact an unescaped
+    expect(serializedContent.length).toBeLessThan(4000);
+    expect(serializedContent).not.toContain('\\n');
+    expect(serializedContent).not.toContain('\\t');
+    expect(serializedContent).not.toContain('\\"');
+    expect(serializedContent).toContain('\t');
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      stream2,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+    // Should still match the result when parsed
+    expect(result.text).toBe(testString);
+    expect(result.text2).toBe(testString2);
+  });
+
+  it('should encode repeated objects in a compact format by deduping', async () => {
+    const obj = {
+      this: {is: 'a large objected'},
+      with: {many: 'properties in it'},
+    };
+    const props = {root: <div>{new Array(30).fill(obj)}</div>};
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(props),
+    );
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const serializedContent = normalizeSerializedContent(
+      await readResult(stream1),
+    );
+    expect(serializedContent.length).toBeLessThan(1075);
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      stream2,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+    // TODO: Cyclic references currently cause a Lazy wrapper which is not ideal.
+    const resultElement = result.root._init(result.root._payload);
+    // Should still match the result when parsed
+    expect(resultElement).toEqual(props.root);
+    expect(resultElement.props.children[5]).toBe(
+      resultElement.props.children[10],
+    ); // two random items are the same instance
+  });
+
+  it('should execute repeated server components only once', async () => {
+    const str = 'this is a long return value';
+    let timesRendered = 0;
+    function ServerComponent() {
+      timesRendered++;
+      return str;
+    }
+    const element = <ServerComponent />;
+    // Hardcoded list to avoid the key warning
+    const children = (
+      <>
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+      </>
+    );
+    const resolvedChildren = new Array(30).fill(str);
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(children),
+    );
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const serializedContent = normalizeSerializedContent(
+      await readResult(stream1),
+    );
+
+    expect(serializedContent.length).toBeLessThan(465);
+    expect(timesRendered).toBeLessThan(5);
+
+    const model = await ReactServerDOMClient.createFromReadableStream(stream2, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(model),
+    );
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toEqual(resolvedChildren.join('<!-- -->'));
+  });
+
+  it('should execute repeated host components only once', async () => {
+    const div = <div>this is a long return value</div>;
+    let timesRendered = 0;
+    function ServerComponent() {
+      timesRendered++;
+      return div;
+    }
+    const element = <ServerComponent />;
+    // Hardcoded list to avoid the key warning
+    const children = (
+      <>
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+        {element}
+      </>
+    );
+    const resolvedChildren = new Array(30).fill(
+      '<div>this is a long return value</div>',
+    );
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(children),
+    );
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const serializedContent = normalizeSerializedContent(
+      await readResult(stream1),
+    );
+    expect(serializedContent.length).toBeLessThan(__DEV__ ? 630 : 400);
+    expect(timesRendered).toBeLessThan(5);
+
+    const model = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream2, {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
+
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(model),
+    );
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toEqual(resolvedChildren.join(''));
+  });
+
+  it('should execute repeated server components in a compact form', async () => {
+    async function ServerComponent({recurse}) {
+      if (recurse > 0) {
+        return <ServerComponent recurse={recurse - 1} />;
+      }
+      return <div>Fin</div>;
+    }
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ServerComponent recurse={20} />,
+      ),
+    );
+    const serializedContent = normalizeSerializedContent(
+      await readResult(stream),
+    );
+    const expectedDebugInfoSize = __DEV__ ? 295 * 20 : 0;
+    expect(serializedContent.length).toBeLessThan(150 + expectedDebugInfoSize);
+  });
+
+  it('should break up large sync components by outlining into streamable elements', async () => {
+    const paragraphs = [];
+    for (let i = 0; i < 20; i++) {
+      const text =
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris' +
+        'porttitor tortor ac lectus faucibus, eget eleifend elit hendrerit.' +
+        'Integer porttitor nisi in leo congue rutrum. Morbi sed ante posuere,' +
+        'aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra. Cras' +
+        'facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse aliquet' +
+        'tempus tortor et ultricies. Aliquam libero velit, posuere tempus ante' +
+        'sed, pellentesque tincidunt lorem. Nullam iaculis, eros a varius' +
+        'aliquet, tortor felis tempor metus, nec cursus felis eros aliquam nulla.' +
+        'Vivamus ut orci sed mauris congue lacinia. Cras eget blandit neque.' +
+        'Pellentesque a massa in turpis ullamcorper volutpat vel at massa. Sed' +
+        'ante est, auctor non diam non, vulputate ultrices metus. Maecenas dictum' +
+        'fermentum quam id aliquam. Donec porta risus vitae pretium posuere.' +
+        'Fusce facilisis eros in lacus tincidunt congue.' +
+        i; /* trick dedupe */
+      paragraphs.push(<p key={i}>{text}</p>);
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(paragraphs),
+    );
+
+    const [stream2, drip] = dripStream(stream);
+
+    // Allow some of the content through.
+    drip(__DEV__ ? 7500 : 5000);
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      stream2,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    // We should have resolved enough to be able to get the array even though some
+    // of the items inside are still lazy.
+    expect(result.length).toBe(20);
+
+    // Unblock the rest
+    drip(Infinity);
+
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(result),
+    );
+    const html = await readResult(ssrStream);
+
+    const ssrStream2 = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(paragraphs),
+    );
+    const html2 = await readResult(ssrStream2);
+
+    expect(html).toBe(html2);
+  });
+
+  it('regression: should not leak serialized size', async () => {
+    const MAX_ROW_SIZE = 3200;
+    // This test case is a bit convoluted and may no longer trigger the original bug.
+    // Originally, the size of `promisedText` was not cleaned up so the sync portion
+    // ended up being deferred immediately when we called `renderToReadableStream` again
+    // i.e. `result2.syncText` became a Lazy element on the second request.
+    const longText = 'd'.repeat(MAX_ROW_SIZE);
+    const promisedText = Promise.resolve(longText);
+    const model = {syncText: <p>{longText}</p>, promisedText};
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model),
+    );
+
+    const result = await ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+
+    const stream2 = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model),
+    );
+
+    const result2 = await ReactServerDOMClient.createFromReadableStream(
+      stream2,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    expect(result2.syncText).toEqual(result.syncText);
+  });
+
+  it('should be able to serialize any kind of typed array', async () => {
+    const buffer = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]).buffer;
+    const buffers = [
+      buffer,
+      new Int8Array(buffer, 1),
+      new Uint8Array(buffer, 2),
+      new Uint8ClampedArray(buffer, 2),
+      new Int16Array(buffer, 2),
+      new Uint16Array(buffer, 2),
+      new Int32Array(buffer, 4),
+      new Uint32Array(buffer, 4),
+      new Float32Array(buffer, 4),
+      new Float64Array(buffer, 0),
+      new BigInt64Array(buffer, 0),
+      new BigUint64Array(buffer, 0),
+      new DataView(buffer, 3),
+    ];
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(buffers)),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    expect(result).toEqual(buffers);
+  });
+
+  it('should be able to serialize a blob', async () => {
+    const bytes = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]);
+    const blob = new Blob([bytes, bytes], {
+      type: 'application/x-test',
+    });
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(blob)),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    expect(result instanceof Blob).toBe(true);
+    expect(result.size).toBe(bytes.length * 2);
+    expect(await result.arrayBuffer()).toEqual(await blob.arrayBuffer());
+  });
+
+  it('can transport FormData (blobs)', async () => {
+    const bytes = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]);
+    const blob = new Blob([bytes, bytes], {
+      type: 'application/x-test',
+    });
+
+    const formData = new FormData();
+    formData.append('hi', 'world');
+    formData.append('file', blob, 'filename.test');
+
+    expect(formData.get('file') instanceof File).toBe(true);
+    expect(formData.get('file').name).toBe('filename.test');
+
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(formData)),
+    );
+    const result = await ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+
+    expect(result instanceof FormData).toBe(true);
+    expect(result.get('hi')).toBe('world');
+    const resultBlob = result.get('file');
+    expect(resultBlob instanceof Blob).toBe(true);
+    expect(resultBlob.name).toBe('blob'); // We should not pass through the file name for security.
+    expect(resultBlob.size).toBe(bytes.length * 2);
+    expect(await resultBlob.arrayBuffer()).toEqual(await blob.arrayBuffer());
+  });
+
+  it('can pass an async import that resolves later to an outline object like a Map', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    const asyncClient = clientExports(promise);
+
+    // We await the value on the servers so it's an async value that the client should wait for
+    const awaitedValue = await asyncClient;
+
+    const map = new Map();
+    map.set('value', awaitedValue);
+
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(map, webpackMap)),
+    );
+
+    // Parsing the root blocks because the module hasn't loaded yet
+    const resultPromise = ReactServerDOMClient.createFromReadableStream(
+      stream,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    // Afterwards we finally resolve the module value so it's available on the client
+    resolve('hello');
+
+    const result = await resultPromise;
+    expect(result instanceof Map).toBe(true);
+    expect(result.get('value')).toBe('hello');
+  });
+
+  it('can pass an async import to a ReadableStream while enqueuing in order', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    const asyncClient = clientExports(promise);
+
+    // We await the value on the servers so it's an async value that the client should wait for
+    const awaitedValue = await asyncClient;
+
+    const s = new ReadableStream({
+      start(c) {
+        c.enqueue('hello');
+        c.enqueue(awaitedValue);
+        c.enqueue('!');
+        c.close();
+      },
+    });
+
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(s, webpackMap)),
+    );
+
+    const result = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
+
+    const reader = result.getReader();
+
+    expect(await reader.read()).toEqual({value: 'hello', done: false});
+
+    const readPromise = reader.read();
+    // We resolve this after we've already received the '!' row.
+    await resolve('world');
+
+    expect(await readPromise).toEqual({value: 'world', done: false});
+    expect(await reader.read()).toEqual({value: '!', done: false});
+    expect(await reader.read()).toEqual({value: undefined, done: true});
+  });
+
+  it('can pass an async import a AsyncIterable while allowing peaking at future values', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    const asyncClient = clientExports(promise);
+
+    const multiShotIterable = {
+      async *[Symbol.asyncIterator]() {
+        yield 'hello';
+        // We await the value on the servers so it's an async value that the client should wait for
+        yield await asyncClient;
+        yield '!';
+      },
+    };
+
+    const stream = await serverAct(() =>
+      passThrough(
+        ReactServerDOMServer.renderToReadableStream(
+          multiShotIterable,
+          webpackMap,
+        ),
+      ),
+    );
+
+    // Parsing the root blocks because the module hasn't loaded yet
+    const result = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
+
+    const iterator = result[Symbol.asyncIterator]();
+
+    expect(await iterator.next()).toEqual({value: 'hello', done: false});
+
+    const readPromise = iterator.next();
+
+    // While the previous promise didn't resolve yet, we should be able to peak at the next value
+    // by iterating past it.
+    expect(await iterator.next()).toEqual({value: '!', done: false});
+
+    // We resolve the previous row after we've already received the '!' row.
+    await resolve('world');
+    expect(await readPromise).toEqual({value: 'world', done: false});
+
+    expect(await iterator.next()).toEqual({value: undefined, done: true});
+  });
+
+  it('should ideally dedupe objects inside async iterables but does not yet', async () => {
+    const obj = {
+      this: {is: 'a large objected'},
+      with: {many: 'properties in it'},
+    };
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        for (let i = 0; i < 30; i++) {
+          yield obj;
+        }
+      },
+    };
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream({
+        iterable,
+      }),
+    );
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const serializedContent = await readResult(stream1);
+    // TODO: Ideally streams should dedupe objects but because we never outline the objects
+    // they end up not having a row to reference them nor any of its nested objects.
+    // expect(serializedContent.length).toBeLessThan(400);
+    expect(serializedContent.length).toBeGreaterThan(400);
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      stream2,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    const items = [];
+    const iterator = result.iterable[Symbol.asyncIterator]();
+    let entry;
+    while (!(entry = await iterator.next()).done) {
+      items.push(entry.value);
+    }
+
+    // Should still match the result when parsed
+    expect(items.length).toBe(30);
+    // TODO: These should be the same
+    // expect(items[5]).toBe(items[10]); // two random items are the same instance
+    expect(items[5]).toEqual(items[10]);
+  });
+
+  it('warns if passing a this argument to bind() of a server reference', async () => {
+    const ServerModule = serverExports({
+      greet: function () {},
+    });
+
+    const ServerModuleImportedOnClient = {
+      greet: ReactServerDOMClient.createServerReference(
+        ServerModule.greet.$$id,
+        async function (ref, args) {},
+      ),
+    };
+
+    ServerModule.greet.bind({}, 'hi');
+    assertConsoleErrorDev(
+      [
+        'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+      ],
+      {withoutStack: true},
+    );
+
+    ServerModuleImportedOnClient.greet.bind({}, 'hi');
+    assertConsoleErrorDev(
+      [
+        'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should supports ReadableStreams with typed arrays', async () => {
+    const buffer = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]).buffer;
+    const buffers = [
+      buffer,
+      new Int8Array(buffer, 1),
+      new Uint8Array(buffer, 2),
+      new Uint8ClampedArray(buffer, 2),
+      new Int16Array(buffer, 2),
+      new Uint16Array(buffer, 2),
+      new Int32Array(buffer, 4),
+      new Uint32Array(buffer, 4),
+      new Float32Array(buffer, 4),
+      new Float64Array(buffer, 0),
+      new BigInt64Array(buffer, 0),
+      new BigUint64Array(buffer, 0),
+      new DataView(buffer, 3),
+    ];
+
+    // This is not a binary stream, it's a stream that contain binary chunks.
+    const s = new ReadableStream({
+      start(c) {
+        for (let i = 0; i < buffers.length; i++) {
+          c.enqueue(buffers[i]);
+        }
+        c.close();
+      },
+    });
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(s, {}),
+    );
+
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      stream1,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    expect(await readByteLength(stream2)).toBeLessThan(300);
+
+    const streamedBuffers = [];
+    const reader = result.getReader();
+    let entry;
+    while (!(entry = await reader.read()).done) {
+      streamedBuffers.push(entry.value);
+    }
+
+    expect(streamedBuffers).toEqual(buffers);
+  });
+
+  it('should support binary ReadableStreams', async () => {
+    const encoder = new TextEncoder();
+    const words = ['Hello', 'streaming', 'world'];
+
+    const stream = new ReadableStream({
+      type: 'bytes',
+      async start(controller) {
+        for (let i = 0; i < words.length; i++) {
+          const chunk = encoder.encode(words[i] + ' ');
+          controller.enqueue(chunk);
+        }
+        controller.close();
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(stream, {}),
+    );
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      rscStream,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    const reader = result.getReader();
+    const decoder = new TextDecoder();
+
+    let text = '';
+    let entry;
+    while (!(entry = await reader.read()).done) {
+      text += decoder.decode(entry.value);
+    }
+
+    expect(text).toBe('Hello streaming world ');
+  });
+
+  it('should support large binary ReadableStreams', async () => {
+    const chunkCount = 100;
+    const chunkSize = 1024;
+    const expectedBytes = [];
+
+    const stream = new ReadableStream({
+      type: 'bytes',
+      start(controller) {
+        for (let i = 0; i < chunkCount; i++) {
+          const chunk = new Uint8Array(chunkSize);
+          for (let j = 0; j < chunkSize; j++) {
+            chunk[j] = (i + j) % 256;
+          }
+          expectedBytes.push(...Array.from(chunk));
+          controller.enqueue(chunk);
+        }
+        controller.close();
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(stream, {}),
+    );
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      // Use passThrough to split and rejoin chunks at arbitrary boundaries.
+      passThrough(rscStream),
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    const reader = result.getReader();
+    const receivedBytes = [];
+    let entry;
+    while (!(entry = await reader.read()).done) {
+      expect(entry.value instanceof Uint8Array).toBe(true);
+      receivedBytes.push(...Array.from(entry.value));
+    }
+
+    expect(receivedBytes).toEqual(expectedBytes);
+  });
+
+  it('should support BYOB binary ReadableStreams', async () => {
+    const sourceBytes = [
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ];
+
+    // Create separate buffers for each typed array to avoid ArrayBuffer
+    // transfer issues. Each view needs its own buffer because enqueue()
+    // transfers ownership.
+    const buffers = [
+      new Int8Array(sourceBytes.slice(1)),
+      new Uint8Array(sourceBytes.slice(2)),
+      new Uint8ClampedArray(sourceBytes.slice(2)),
+      new Int16Array(new Uint8Array(sourceBytes.slice(2)).buffer),
+      new Uint16Array(new Uint8Array(sourceBytes.slice(2)).buffer),
+      new Int32Array(new Uint8Array(sourceBytes.slice(4)).buffer),
+      new Uint32Array(new Uint8Array(sourceBytes.slice(4)).buffer),
+      new Float32Array(new Uint8Array(sourceBytes.slice(4)).buffer),
+      new Float64Array(new Uint8Array(sourceBytes.slice(0)).buffer),
+      new BigInt64Array(new Uint8Array(sourceBytes.slice(0)).buffer),
+      new BigUint64Array(new Uint8Array(sourceBytes.slice(0)).buffer),
+      new DataView(new Uint8Array(sourceBytes.slice(3)).buffer),
+    ];
+
+    // Save expected bytes before enqueueing (which will detach the buffers).
+    const expectedBytes = buffers.flatMap(c =>
+      Array.from(new Uint8Array(c.buffer, c.byteOffset, c.byteLength)),
+    );
+
+    // This a binary stream where each chunk ends up as Uint8Array.
+    const s = new ReadableStream({
+      type: 'bytes',
+      start(c) {
+        for (let i = 0; i < buffers.length; i++) {
+          c.enqueue(buffers[i]);
+        }
+        c.close();
+      },
+    });
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(s, {}),
+    );
+
+    const [stream1, stream2] = passThrough(stream).tee();
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      stream1,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    expect(await readByteLength(stream2)).toBeLessThan(300);
+
+    const streamedBuffers = [];
+    const reader = result.getReader({mode: 'byob'});
+    let entry;
+    while (!(entry = await reader.read(new Uint8Array(10))).done) {
+      expect(entry.value instanceof Uint8Array).toBe(true);
+      streamedBuffers.push(entry.value);
+    }
+
+    // The streamed buffers might be in different chunks and in Uint8Array form but
+    // the concatenated bytes should be the same.
+    expect(streamedBuffers.flatMap(t => Array.from(t))).toEqual(expectedBytes);
+  });
+
+  // @gate !__DEV__ || enableComponentPerformanceTrack
+  it('supports async server component debug info as the element owner in DEV', async () => {
+    function Container({children}) {
+      return children;
+    }
+
+    const promise = Promise.resolve(true);
+    async function Greeting({firstName}) {
+      // We can't use JSX here because it'll use the Client React.
+      const child = ReactServer.createElement(
+        'span',
+        null,
+        'Hello, ' + firstName,
+      );
+      // Yield the synchronous pass
+      await promise;
+      // We should still be able to track owner using AsyncLocalStorage.
+      return ReactServer.createElement(Container, null, child);
+    }
+
+    const model = {
+      greeting: ReactServer.createElement(Greeting, {firstName: 'Seb'}),
+    };
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model, webpackMap),
+    );
+
+    const rootModel = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(rootModel.greeting),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual('<span>Hello, Seb</span>');
+
+    // Resolve the React Lazy wrapper which must have resolved by now.
+    const lazyWrapper = rootModel.greeting;
+    const greeting = lazyWrapper._init(lazyWrapper._payload);
+
+    // We've rendered down to the span.
+    expect(greeting.type).toBe('span');
+    if (__DEV__) {
+      const greetInfo = expect.objectContaining({
+        name: 'Greeting',
+        env: 'Server',
+      });
+      if (gate(flags => flags.enableAsyncDebugInfo)) {
+        expect(greeting._debugInfo).toEqual([
+          {time: 12},
+          greetInfo,
+          {time: 13},
+          expect.objectContaining({
+            name: 'Container',
+            env: 'Server',
+            owner: greetInfo,
+          }),
+          {time: 14},
+        ]);
+      }
+      // The owner that created the span was the outer server component.
+      // We expect the debug info to be referentially equal to the owner.
+      expect(greeting._owner).toBe(greeting._debugInfo[1]);
+    } else {
+      expect(lazyWrapper._debugInfo).toBe(undefined);
+      expect(greeting._owner).toBe(undefined);
+    }
+  });
+
+  // @gate __DEV__
+  it('can get the component owner stacks asynchronously', async () => {
+    let stack;
+
+    function Foo() {
+      return ReactServer.createElement(Bar, null);
+    }
+    function Bar() {
+      return ReactServer.createElement(
+        'div',
+        null,
+        ReactServer.createElement(Baz, null),
+      );
+    }
+
+    const promise = Promise.resolve(0);
+
+    async function Baz() {
+      await promise;
+      stack = ReactServer.captureOwnerStack();
+      return ReactServer.createElement('span', null, 'hi');
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        ReactServer.createElement(
+          'div',
+          null,
+          ReactServer.createElement(Foo, null),
+        ),
+        webpackMap,
+      ),
+    );
+    await readResult(stream);
+
+    expect(normalizeCodeLocInfo(stack)).toBe(
+      '\n    in Bar (at **)' + '\n    in Foo (at **)',
+    );
+  });
+
+  it('supports server components in ssr component stacks', async () => {
+    let reject;
+    const promise = new Promise((_, r) => (reject = r));
+    async function Erroring() {
+      await promise;
+      return 'should not render';
+    }
+
+    const model = {
+      root: ReactServer.createElement(Erroring),
+    };
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model, webpackMap, {
+        onError() {},
+      }),
+    );
+
+    const rootModel = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
+
+    const errors = [];
+    const result = serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<div>{rootModel.root}</div>, {
+        onError(error, {componentStack}) {
+          errors.push({
+            error,
+            componentStack: normalizeCodeLocInfo(componentStack),
+          });
+        },
+      }),
+    );
+
+    const theError = new Error('my error');
+    reject(theError);
+
+    const expectedMessage = __DEV__
+      ? 'my error'
+      : 'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.';
+
+    try {
+      await result;
+    } catch (x) {
+      expect(x).toEqual(
+        expect.objectContaining({
+          message: expectedMessage,
+        }),
+      );
+    }
+
+    expect(errors).toEqual([
+      {
+        error: expect.objectContaining({
+          message: expectedMessage,
+        }),
+        componentStack: (__DEV__ ? '\n    in Erroring' : '') + '\n    in div',
+      },
+    ]);
+  });
+
+  // @gate enableHalt
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        React.createElement(ClientRoot, {response}),
+      ),
+    );
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toBe('<div>hello world</div>');
+  });
+
+  // @gate enableHalt
+  it('does not propagate abort reasons errors when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <ReactServer.Suspense fallback="loading...">
+            <Greeting />
+          </ReactServer.Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const errors = [];
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+            onError(err) {
+              errors.push(err);
+            },
+          },
+        ),
+      };
+    });
+
+    await serverAct(() => {
+      controller.abort('boom');
+    });
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const fizzController = new AbortController();
+    errors.length = 0;
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        React.createElement(ClientRoot, {response}),
+        {
+          signal: fizzController.signal,
+          onError(error) {
+            errors.push(error);
+          },
+        },
+      ),
+    );
+    fizzController.abort('bam');
+    expect(errors).toEqual([new Error('Connection closed.')]);
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    const div = document.createElement('div');
+    div.innerHTML = result;
+    expect(div.textContent).toBe('loading...');
+  });
+
+  // @gate enableHalt
+  it('should abort parsing an incomplete prerender payload', async () => {
+    const infinitePromise = new Promise(() => {});
+    const controller = new AbortController();
+    const errors = [];
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          {promise: infinitePromise},
+          webpackMap,
+          {
+            signal: controller.signal,
+            onError(err) {
+              errors.push(err);
+            },
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    const {prelude} = await serverAct(() => pendingResult);
+
+    expect(errors).toEqual([]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    // Wait for the stream to finish and therefore abort before we try to .then the response.
+    await 0;
+
+    const result = await response;
+
+    let error = null;
+    try {
+      await result.promise;
+    } catch (x) {
+      error = x;
+    }
+    expect(error).not.toBe(null);
+    expect(error.message).toBe('Connection closed.');
+  });
+
+  // @gate enableHalt
+  it('should be able to handle a rejected promise in prerender', async () => {
+    const expectedError = new Error('Bam!');
+    const errors = [];
+
+    const {prelude} = await ReactServerDOMStaticServer.prerender(
+      Promise.reject(expectedError),
+      webpackMap,
+      {
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    expect(errors).toEqual([expectedError]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    let error = null;
+    try {
+      await response;
+    } catch (x) {
+      error = x;
+    }
+
+    const expectedMessage = __DEV__
+      ? expectedError.message
+      : 'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.';
+
+    expect(error).not.toBe(null);
+    expect(error.message).toBe(expectedMessage);
+  });
+
+  // @gate enableHalt
+  it('should be able to handle an erroring async iterable in prerender', async () => {
+    const expectedError = new Error('Bam!');
+    const errors = [];
+
+    const {prelude} = await ReactServerDOMStaticServer.prerender(
+      {
+        async *[Symbol.asyncIterator]() {
+          await serverAct(() => {
+            throw expectedError;
+          });
+        },
+      },
+      webpackMap,
+      {
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    expect(errors).toEqual([expectedError]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    let error = null;
+    try {
+      const result = await response;
+      const iterator = result[Symbol.asyncIterator]();
+      await iterator.next();
+    } catch (x) {
+      error = x;
+    }
+
+    const expectedMessage = __DEV__
+      ? expectedError.message
+      : 'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.';
+
+    expect(error).not.toBe(null);
+    expect(error.message).toBe(expectedMessage);
+  });
+
+  // @gate enableHalt
+  it('should be able to handle an erroring readable stream in prerender', async () => {
+    const expectedError = new Error('Bam!');
+    const errors = [];
+
+    const {prelude} = await ReactServerDOMStaticServer.prerender(
+      new ReadableStream({
+        async start(controller) {
+          await serverAct(() => {
+            setTimeout(() => {
+              controller.error(expectedError);
+            });
+          });
+        },
+      }),
+      webpackMap,
+      {
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    expect(errors).toEqual([expectedError]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    let error = null;
+    try {
+      const stream = await response;
+      await stream.getReader().read();
+    } catch (x) {
+      error = x;
+    }
+
+    const expectedMessage = __DEV__
+      ? expectedError.message
+      : 'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.';
+
+    expect(error).not.toBe(null);
+    expect(error.message).toBe(expectedMessage);
+  });
+
+  // @gate enableHalt
+  it('can prerender an async iterable', async () => {
+    const errors = [];
+
+    const {prelude} = await ReactServerDOMStaticServer.prerender(
+      {
+        async *[Symbol.asyncIterator]() {
+          yield 'hello';
+          yield ' ';
+          yield 'world';
+        },
+      },
+      webpackMap,
+      {
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    expect(errors).toEqual([]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    let text = '';
+    const result = await response;
+    const iterator = result[Symbol.asyncIterator]();
+
+    while (true) {
+      const {done, value} = await iterator.next();
+      if (done) {
+        break;
+      }
+      text += value;
+    }
+
+    expect(text).toBe('hello world');
+  });
+
+  // @gate enableHalt
+  it('can prerender a readable stream', async () => {
+    const errors = [];
+
+    const {prelude} = await ReactServerDOMStaticServer.prerender(
+      new ReadableStream({
+        start(controller) {
+          controller.enqueue('hello world');
+          controller.close();
+        },
+      }),
+      webpackMap,
+      {
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    expect(errors).toEqual([]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    const stream = await response;
+    const result = await readResult(stream);
+
+    expect(result).toBe('hello world');
+  });
+
+  // @gate enableHalt
+  it('does not return a prerender prelude early when an error is emitted and there are still pending tasks', async () => {
+    let rejectPromise;
+    const rejectingPromise = new Promise(
+      (resolve, reject) => (rejectPromise = reject),
+    );
+    const expectedError = new Error('Boom!');
+    const errors = [];
+
+    const {prelude} = await ReactServerDOMStaticServer.prerender(
+      [
+        rejectingPromise,
+        {
+          async *[Symbol.asyncIterator]() {
+            yield 'hello';
+            yield ' ';
+            await serverAct(() => {
+              rejectPromise(expectedError);
+            });
+            yield 'world';
+          },
+        },
+      ],
+      webpackMap,
+      {
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    expect(errors).toEqual([expectedError]);
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+    });
+
+    let text = '';
+    const [promise, iterable] = await response;
+    const iterator = iterable[Symbol.asyncIterator]();
+
+    while (true) {
+      const {done, value} = await iterator.next();
+      if (done) {
+        break;
+      }
+      text += value;
+    }
+
+    expect(text).toBe('hello world');
+
+    let error = null;
+    try {
+      await promise;
+    } catch (x) {
+      error = x;
+    }
+
+    const expectedMessage = __DEV__
+      ? expectedError.message
+      : 'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.';
+
+    expect(error).not.toBe(null);
+    expect(error.message).toBe(expectedMessage);
+  });
+
+  // @gate enableHalt
+  it('does not include source locations in component stacks for halted components', async () => {
+    // We only support adding source locations for halted components in the Node.js builds.
+
+    async function Component() {
+      await new Promise(() => {});
+      return null;
+    }
+
+    function App() {
+      return ReactServer.createElement(
+        'html',
+        null,
+        ReactServer.createElement(
+          'body',
+          null,
+          ReactServer.createElement(
+            ReactServer.Suspense,
+            {fallback: 'Loading...'},
+            ReactServer.createElement(Component, null),
+          ),
+        ),
+      );
+    }
+
+    const serverAbortController = new AbortController();
+    const errors = [];
+    const prerenderResult = ReactServerDOMStaticServer.prerender(
+      ReactServer.createElement(App, null),
+      webpackMap,
+      {
+        signal: serverAbortController.signal,
+        onError(err) {
+          errors.push(err);
+        },
+      },
+    );
+
+    await new Promise(resolve => {
+      setImmediate(() => {
+        serverAbortController.abort();
+        resolve();
+      });
+    });
+
+    const {prelude} = await prerenderResult;
+
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const prerenderResponse = ReactServerDOMClient.createFromReadableStream(
+      await createBufferedUnclosingStream(prelude),
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    let componentStack;
+    let ownerStack;
+
+    const clientAbortController = new AbortController();
+
+    const fizzPrerenderStreamResult = ReactDOMFizzStatic.prerender(
+      React.createElement(ClientRoot, {response: prerenderResponse}),
+      {
+        signal: clientAbortController.signal,
+        onError(error, errorInfo) {
+          componentStack = errorInfo.componentStack;
+          ownerStack = React.captureOwnerStack
+            ? React.captureOwnerStack()
+            : null;
+        },
+      },
+    );
+
+    await new Promise(resolve => {
+      setImmediate(() => {
+        clientAbortController.abort();
+        resolve();
+      });
+    });
+
+    const fizzPrerenderStream = await fizzPrerenderStreamResult;
+    const prerenderHTML = await readResult(fizzPrerenderStream.prelude);
+
+    expect(prerenderHTML).toContain('Loading...');
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n    in Component\n' +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in App (at **)\n' +
+          '    in ClientRoot (at **)',
+      );
+    } else {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in ClientRoot (at **)',
+      );
+    }
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+    } else {
+      expect(ownerStack).toBeNull();
+    }
+  });
+
+  it('can pass an async import that resolves later as a prop to a null component', async () => {
+    let resolveClientComponentChunk;
+    const client = clientExports(
+      {
+        foo: 'bar',
+      },
+      '42',
+      '/test.js',
+      new Promise(resolve => (resolveClientComponentChunk = resolve)),
+    );
+
+    function ServerComponent(props) {
+      return null;
+    }
+
+    function App() {
+      return (
+        <div>
+          <ServerComponent client={client} />
+        </div>
+      );
+    }
+
+    const stream = await serverAct(() =>
+      passThrough(
+        ReactServerDOMServer.renderToReadableStream(<App />, webpackMap),
+      ),
+    );
+
+    // Parsing the root blocks because the module hasn't loaded yet
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+
+    function ClientRoot() {
+      return use(response);
+    }
+
+    // Initialize to be blocked.
+    response.then(() => {});
+    // Unblock.
+    resolveClientComponentChunk();
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<ClientRoot />),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual('<div></div>');
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a separate debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      passThrough(
+        ReactServerDOMServer.renderToReadableStream(
+          ReactServer.createElement(App, null),
+          webpackMap,
+          {
+            debugChannel: {
+              writable: new WritableStream({
+                write(chunk) {
+                  debugReadableStreamController.enqueue(chunk);
+                },
+                close() {
+                  debugReadableStreamController.close();
+                },
+              }),
+            },
+          },
+        ),
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [webpackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': webpackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: webpackModuleLoading,
+    };
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        serverConsumerManifest,
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a slow debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      passThrough(
+        ReactServerDOMServer.renderToReadableStream(
+          ReactServer.createElement(App, null),
+          webpackMap,
+          {
+            debugChannel: {
+              writable: new WritableStream({
+                write(chunk) {
+                  debugReadableStreamController.enqueue(chunk);
+                },
+                close() {
+                  debugReadableStreamController.close();
+                },
+              }),
+            },
+          },
+        ),
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [webpackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': webpackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: webpackModuleLoading,
+    };
+
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest,
+      debugChannel: {
+        readable:
+          // Create a delayed stream to simulate that the debug stream might be
+          // transported slower than the RSC stream, which must not lead to
+          // missing debug info.
+          createDelayedStream(debugReadableStream),
+      },
+    });
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+
+  it('should properly resolve with deduped objects', async () => {
+    const obj = {foo: 'hi'};
+
+    function Test(props) {
+      return props.obj.foo;
+    }
+
+    const root = {
+      obj: obj,
+      node: <Test obj={obj} />,
+    };
+
+    const stream = ReactServerDOMServer.renderToReadableStream(root);
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+
+    const result = await response;
+    expect(result).toEqual({obj: obj, node: 'hi'});
+  });
+
+  it('does not leak the server reference code', async () => {
+    function foo() {
+      return 'foo';
+    }
+
+    const bar = () => {
+      return 'bar';
+    };
+
+    const anonymous = (
+      () => () =>
+        'anonymous'
+    )();
+
+    expect(
+      ReactServerDOMServer.registerServerReference(foo, 'foo-id').toString(),
+    ).toBe('function () { [omitted code] }');
+
+    expect(
+      ReactServerDOMServer.registerServerReference(bar, 'bar-id').toString(),
+    ).toBe('function () { [omitted code] }');
+
+    expect(
+      ReactServerDOMServer.registerServerReference(
+        anonymous,
+        'anonymous-id',
+      ).toString(),
+    ).toBe('function () { [omitted code] }');
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
new file mode 100644
index 00000000000..9c8f7d24236
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
@@ -0,0 +1,1046 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {insertNodesAndExecuteScripts} from 'react-dom/src/test-utils/FizzTestUtils';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+// Polyfill stream methods on JSDOM.
+global.Blob.prototype.stream = function () {
+  const impl = Object.getOwnPropertySymbols(this)[0];
+  const buffer = this[impl]._buffer;
+  return new ReadableStream({
+    start(c) {
+      c.enqueue(new Uint8Array(buffer));
+      c.close();
+    },
+  });
+};
+
+global.Blob.prototype.text = async function () {
+  const impl = Object.getOwnPropertySymbols(this)[0];
+  return this[impl]._buffer.toString('utf8');
+};
+
+// Don't wait before processing work on the server.
+// TODO: we can replace this with FlightServer.act().
+global.setTimeout = cb => cb();
+
+let container;
+let clientExports;
+let serverExports;
+let webpackMap;
+let webpackServerMap;
+let React;
+let ReactDOMServer;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let ReactDOMClient;
+let useActionState;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactFlightDOMForm', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-webpack/server', () =>
+      require('react-server-dom-webpack/server.edge'),
+    );
+    ReactServerDOMServer = require('react-server-dom-webpack/server.edge');
+    const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
+    serverExports = WebpackMock.serverExports;
+    webpackMap = WebpackMock.webpackMap;
+    webpackServerMap = WebpackMock.webpackServerMap;
+    __unmockReact();
+    jest.resetModules();
+    React = require('react');
+    ReactServerDOMClient = require('react-server-dom-webpack/client.edge');
+    ReactDOMServer = require('react-dom/server.edge');
+    ReactDOMClient = require('react-dom/client');
+    act = React.act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
+
+    // TODO: Test the old api but it warns so needs warnings to be asserted.
+    // if (__VARIANT__) {
+    // Remove after API is deleted.
+    // useActionState = require('react-dom').useFormState;
+    // }
+    useActionState = require('react').useActionState;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  async function POST(formData) {
+    const boundAction = await ReactServerDOMServer.decodeAction(
+      formData,
+      webpackServerMap,
+    );
+    const returnValue = boundAction();
+    const formState = await ReactServerDOMServer.decodeFormState(
+      await returnValue,
+      formData,
+      webpackServerMap,
+    );
+    return {returnValue, formState};
+  }
+
+  function submit(submitter) {
+    const form = submitter.form || submitter;
+    if (!submitter.form) {
+      submitter = undefined;
+    }
+    const submitEvent = new Event('submit', {bubbles: true, cancelable: true});
+    submitEvent.submitter = submitter;
+    const returnValue = form.dispatchEvent(submitEvent);
+    if (!returnValue) {
+      return;
+    }
+    const action =
+      (submitter && submitter.getAttribute('formaction')) || form.action;
+    if (!/\s*javascript:/i.test(action)) {
+      const method = (submitter && submitter.formMethod) || form.method;
+      const encType = (submitter && submitter.formEnctype) || form.enctype;
+      if (method === 'post' && encType === 'multipart/form-data') {
+        const formData = new FormData(form, submitter);
+        return POST(formData);
+      }
+      throw new Error('Navigate to: ' + action);
+    }
+  }
+
+  async function readIntoContainer(stream) {
+    const reader = stream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+    const temp = document.createElement('div');
+    temp.innerHTML = result;
+    insertNodesAndExecuteScripts(temp, container, null);
+  }
+
+  it('can submit a passed server action without hydrating it', async () => {
+    let foo = null;
+
+    const serverAction = serverExports(function action(formData) {
+      foo = formData.get('foo');
+      return 'hello';
+    });
+    function App() {
+      return (
+        <form action={serverAction}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+    const rscStream = ReactServerDOMServer.renderToReadableStream(<App />);
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hello');
+    expect(foo).toBe('bar');
+  });
+
+  it('can submit an imported server action without hydrating it', async () => {
+    let foo = null;
+
+    const ServerModule = serverExports(function action(formData) {
+      foo = formData.get('foo');
+      return 'hi';
+    });
+    const serverAction = ReactServerDOMClient.createServerReference(
+      ServerModule.$$id,
+    );
+    function App() {
+      return (
+        <form action={serverAction}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const ssrStream = await ReactDOMServer.renderToReadableStream(<App />);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hi');
+
+    expect(foo).toBe('bar');
+  });
+
+  it('can submit a complex closure server action without hydrating it', async () => {
+    let foo = null;
+
+    const serverAction = serverExports(function action(bound, formData) {
+      foo = formData.get('foo') + bound.complex;
+      return 'hello';
+    });
+    function App() {
+      return (
+        <form action={serverAction.bind(null, {complex: 'object'})}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+    const rscStream = ReactServerDOMServer.renderToReadableStream(<App />);
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hello');
+    expect(foo).toBe('barobject');
+  });
+
+  it('can submit a multiple complex closure server action without hydrating it', async () => {
+    let foo = null;
+
+    const serverAction = serverExports(function action(bound, formData) {
+      foo = formData.get('foo') + bound.complex;
+      return 'hello' + bound.complex;
+    });
+    function App() {
+      return (
+        <form action={serverAction.bind(null, {complex: 'a'})}>
+          <input type="text" name="foo" defaultValue="bar" />
+          <button formAction={serverAction.bind(null, {complex: 'b'})} />
+          <button formAction={serverAction.bind(null, {complex: 'c'})} />
+          <input
+            type="submit"
+            formAction={serverAction.bind(null, {complex: 'd'})}
+          />
+        </form>
+      );
+    }
+    const rscStream = ReactServerDOMServer.renderToReadableStream(<App />);
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form.getElementsByTagName('button')[1]);
+
+    expect(returnValue).toBe('helloc');
+    expect(foo).toBe('barc');
+  });
+
+  it('can bind an imported server action on the client without hydrating it', async () => {
+    let foo = null;
+
+    const ServerModule = serverExports(function action(bound, formData) {
+      foo = formData.get('foo') + bound.complex;
+      return 'hello';
+    });
+    const serverAction = ReactServerDOMClient.createServerReference(
+      ServerModule.$$id,
+    );
+    function Client() {
+      return (
+        <form action={serverAction.bind(null, {complex: 'object'})}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+
+    const ssrStream = await ReactDOMServer.renderToReadableStream(<Client />);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hello');
+    expect(foo).toBe('barobject');
+  });
+
+  it('can bind a server action on the client without hydrating it', async () => {
+    let foo = null;
+
+    const serverAction = serverExports(function action(bound, formData) {
+      foo = formData.get('foo') + bound.complex;
+      return 'hello';
+    });
+
+    function Client({action}) {
+      return (
+        <form action={action.bind(null, {complex: 'object'})}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>
+      );
+    }
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.firstChild;
+
+    expect(foo).toBe(null);
+
+    const {returnValue} = await submit(form);
+
+    expect(returnValue).toBe('hello');
+    expect(foo).toBe('barobject');
+  });
+
+  it("useActionState's dispatch binds the initial state to the provided action", async () => {
+    const serverAction = serverExports(
+      async function action(prevState, formData) {
+        return {
+          count:
+            prevState.count + parseInt(formData.get('incrementAmount'), 10),
+        };
+      },
+    );
+
+    const initialState = {count: 1};
+    function Client({action}) {
+      const [state, dispatch, isPending] = useActionState(action, initialState);
+      return (
+        <form action={dispatch}>
+          <span>{isPending ? 'Pending...' : ''}</span>
+          <span>Count: {state.count}</span>
+          <input type="text" name="incrementAmount" defaultValue="5" />
+        </form>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.getElementsByTagName('form')[0];
+    const pendingSpan = container.getElementsByTagName('span')[0];
+    const stateSpan = container.getElementsByTagName('span')[1];
+    expect(pendingSpan.textContent).toBe('');
+    expect(stateSpan.textContent).toBe('Count: 1');
+
+    const {returnValue} = await submit(form);
+    expect(await returnValue).toEqual({count: 6});
+  });
+
+  it('useActionState can reuse state during MPA form submission', async () => {
+    const serverAction = serverExports(
+      async function action(prevState, formData) {
+        return prevState + 1;
+      },
+    );
+
+    function Form({action}) {
+      const [count, dispatch, isPending] = useActionState(action, 1);
+      return (
+        <form action={dispatch}>
+          {isPending ? 'Pending...' : ''}
+          {count}
+        </form>
+      );
+    }
+
+    function Client({action}) {
+      return (
+        <div>
+          <Form action={action} />
+          <Form action={action} />
+          <Form action={action} />
+        </div>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    expect(container.textContent).toBe('111');
+
+    // There are three identical forms. We're going to submit the second one.
+    const form = container.getElementsByTagName('form')[1];
+    const {formState} = await submit(form);
+
+    // Simulate an MPA form submission by resetting the container and
+    // rendering again.
+    container.innerHTML = '';
+
+    const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const postbackResponse = ReactServerDOMClient.createFromReadableStream(
+      postbackRscStream,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+    const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+      postbackResponse,
+      {formState: formState},
+    );
+    await readIntoContainer(postbackSsrStream);
+
+    // Only the second form's state should have been updated.
+    expect(container.textContent).toBe('121');
+
+    // Test that it hydrates correctly
+    if (__DEV__) {
+      // TODO: Can't use our internal act() util that works in production
+      // because it works by overriding the timer APIs, which this test module
+      // also does. Remove dev condition once FlightServer.act() is available.
+      await act(() => {
+        ReactDOMClient.hydrateRoot(container, postbackResponse, {
+          formState: formState,
+        });
+      });
+      expect(container.textContent).toBe('121');
+    }
+  });
+
+  it(
+    'useActionState preserves state if arity is the same, but different ' +
+      'arguments are bound (i.e. inline closure)',
+    async () => {
+      const serverAction = serverExports(
+        async function action(stepSize, prevState, formData) {
+          return prevState + stepSize;
+        },
+      );
+
+      function Form({action}) {
+        const [count, dispatch, isPending] = useActionState(action, 1);
+        return (
+          <form action={dispatch}>
+            {isPending ? 'Pending...' : ''}
+            {count}
+          </form>
+        );
+      }
+
+      function Client({action}) {
+        return (
+          <div>
+            <Form action={action} />
+            <Form action={action} />
+            <Form action={action} />
+          </div>
+        );
+      }
+
+      const ClientRef = await clientExports(Client);
+
+      const rscStream = ReactServerDOMServer.renderToReadableStream(
+        // Note: `.bind` is the same as an inline closure with 'use server'
+        <ClientRef action={serverAction.bind(null, 1)} />,
+        webpackMap,
+      );
+      const response = ReactServerDOMClient.createFromReadableStream(
+        rscStream,
+        {
+          serverConsumerManifest: {
+            moduleMap: null,
+            moduleLoading: null,
+          },
+        },
+      );
+      const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+      await readIntoContainer(ssrStream);
+
+      expect(container.textContent).toBe('111');
+
+      // There are three identical forms. We're going to submit the second one.
+      const form = container.getElementsByTagName('form')[1];
+      const {formState} = await submit(form);
+
+      // Simulate an MPA form submission by resetting the container and
+      // rendering again.
+      container.innerHTML = '';
+
+      // On the next page, the same server action is rendered again, but with
+      // a different bound stepSize argument. We should treat this as the same
+      // action signature.
+      const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+        // Note: `.bind` is the same as an inline closure with 'use server'
+        <ClientRef action={serverAction.bind(null, 5)} />,
+        webpackMap,
+      );
+      const postbackResponse = ReactServerDOMClient.createFromReadableStream(
+        postbackRscStream,
+        {
+          serverConsumerManifest: {
+            moduleMap: null,
+            moduleLoading: null,
+          },
+        },
+      );
+      const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+        postbackResponse,
+        {formState: formState},
+      );
+      await readIntoContainer(postbackSsrStream);
+
+      // The state should have been preserved because the action signatures are
+      // the same. (Note that the amount increased by 1, because that was the
+      // value of stepSize at the time the form was submitted)
+      expect(container.textContent).toBe('121');
+
+      // Now submit the form again. This time, the state should increase by 5
+      // because the stepSize argument has changed.
+      const form2 = container.getElementsByTagName('form')[1];
+      const {formState: formState2} = await submit(form2);
+
+      container.innerHTML = '';
+
+      const postbackRscStream2 = ReactServerDOMServer.renderToReadableStream(
+        // Note: `.bind` is the same as an inline closure with 'use server'
+        <ClientRef action={serverAction.bind(null, 5)} />,
+        webpackMap,
+      );
+      const postbackResponse2 = ReactServerDOMClient.createFromReadableStream(
+        postbackRscStream2,
+        {
+          serverConsumerManifest: {
+            moduleMap: null,
+            moduleLoading: null,
+          },
+        },
+      );
+      const postbackSsrStream2 = await ReactDOMServer.renderToReadableStream(
+        postbackResponse2,
+        {formState: formState2},
+      );
+      await readIntoContainer(postbackSsrStream2);
+
+      expect(container.textContent).toBe('171');
+    },
+  );
+
+  it('useActionState does not reuse state if action signatures are different', async () => {
+    // This is the same as the previous test, except instead of using bind to
+    // configure the server action (i.e. a closure), it swaps the action.
+    const increaseBy1 = serverExports(
+      async function action(prevState, formData) {
+        return prevState + 1;
+      },
+    );
+
+    const increaseBy5 = serverExports(
+      async function action(prevState, formData) {
+        return prevState + 5;
+      },
+    );
+
+    function Form({action}) {
+      const [count, dispatch, isPending] = useActionState(action, 1);
+      return (
+        <form action={dispatch}>
+          {isPending ? 'Pending...' : ''}
+          {count}
+        </form>
+      );
+    }
+
+    function Client({action}) {
+      return (
+        <div>
+          <Form action={action} />
+          <Form action={action} />
+          <Form action={action} />
+        </div>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={increaseBy1} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    expect(container.textContent).toBe('111');
+
+    // There are three identical forms. We're going to submit the second one.
+    const form = container.getElementsByTagName('form')[1];
+    const {formState} = await submit(form);
+
+    // Simulate an MPA form submission by resetting the container and
+    // rendering again.
+    container.innerHTML = '';
+
+    // On the next page, a different server action is rendered. It should not
+    // reuse the state from the previous page.
+    const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={increaseBy5} />,
+      webpackMap,
+    );
+    const postbackResponse = ReactServerDOMClient.createFromReadableStream(
+      postbackRscStream,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+    const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+      postbackResponse,
+      {formState: formState},
+    );
+    await readIntoContainer(postbackSsrStream);
+
+    // The state should not have been preserved because the action signatures
+    // are not the same.
+    expect(container.textContent).toBe('111');
+  });
+
+  it('when permalink is provided, useActionState compares that instead of the keypath', async () => {
+    const serverAction = serverExports(
+      async function action(prevState, formData) {
+        return prevState + 1;
+      },
+    );
+
+    function Form({action, permalink}) {
+      const [count, dispatch, isPending] = useActionState(action, 1, permalink);
+      return (
+        <form action={dispatch}>
+          {isPending ? 'Pending...' : ''}
+          {count}
+        </form>
+      );
+    }
+
+    function Page1({action, permalink}) {
+      return <Form action={action} permalink={permalink} />;
+    }
+
+    function Page2({action, permalink}) {
+      return <Form action={action} permalink={permalink} />;
+    }
+
+    const Page1Ref = await clientExports(Page1);
+    const Page2Ref = await clientExports(Page2);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <Page1Ref action={serverAction} permalink="/permalink" />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    expect(container.textContent).toBe('1');
+
+    // Submit the form
+    const form = container.getElementsByTagName('form')[0];
+    const {formState} = await submit(form);
+
+    // Simulate an MPA form submission by resetting the container and
+    // rendering again.
+    container.innerHTML = '';
+
+    // On the next page, the same server action is rendered again, but in
+    // a different component tree. However, because a permalink option was
+    // passed, the state should be preserved.
+    const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+      <Page2Ref action={serverAction} permalink="/permalink" />,
+      webpackMap,
+    );
+    const postbackResponse = ReactServerDOMClient.createFromReadableStream(
+      postbackRscStream,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+    const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+      postbackResponse,
+      {formState: formState},
+    );
+    await readIntoContainer(postbackSsrStream);
+
+    expect(container.textContent).toBe('2');
+
+    // Now submit the form again. This time, the permalink will be different, so
+    // the state is not preserved.
+    const form2 = container.getElementsByTagName('form')[0];
+    const {formState: formState2} = await submit(form2);
+
+    container.innerHTML = '';
+
+    const postbackRscStream2 = ReactServerDOMServer.renderToReadableStream(
+      <Page1Ref action={serverAction} permalink="/some-other-permalink" />,
+      webpackMap,
+    );
+    const postbackResponse2 = ReactServerDOMClient.createFromReadableStream(
+      postbackRscStream2,
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+    const postbackSsrStream2 = await ReactDOMServer.renderToReadableStream(
+      postbackResponse2,
+      {formState: formState2},
+    );
+    await readIntoContainer(postbackSsrStream2);
+
+    // The state was reset because the permalink didn't match
+    expect(container.textContent).toBe('1');
+  });
+
+  it('useActionState can change the action URL with the `permalink` argument', async () => {
+    const serverAction = serverExports(function action(prevState) {
+      return {state: prevState.count + 1};
+    });
+
+    const initialState = {count: 1};
+    function Client({action}) {
+      const [state, dispatch, isPending] = useActionState(
+        action,
+        initialState,
+        '/permalink',
+      );
+      return (
+        <form action={dispatch}>
+          <span>{isPending ? 'Pending...' : ''}</span>
+          <span>Count: {state.count}</span>
+        </form>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.getElementsByTagName('form')[0];
+    const pendingSpan = container.getElementsByTagName('span')[0];
+    const stateSpan = container.getElementsByTagName('span')[1];
+    expect(pendingSpan.textContent).toBe('');
+    expect(stateSpan.textContent).toBe('Count: 1');
+
+    expect(form.action).toBe('http://localhost/permalink');
+  });
+
+  it('useActionState `permalink` is coerced to string', async () => {
+    const serverAction = serverExports(function action(prevState) {
+      return {state: prevState.count + 1};
+    });
+
+    class Permalink {
+      toString() {
+        return '/permalink';
+      }
+    }
+
+    const permalink = new Permalink();
+
+    const initialState = {count: 1};
+    function Client({action}) {
+      const [state, dispatch, isPending] = useActionState(
+        action,
+        initialState,
+        permalink,
+      );
+      return (
+        <form action={dispatch}>
+          <span>{isPending ? 'Pending...' : ''}</span>
+          <span>Count: {state.count}</span>
+        </form>
+      );
+    }
+
+    const ClientRef = await clientExports(Client);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <ClientRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form = container.getElementsByTagName('form')[0];
+    const pendingSpan = container.getElementsByTagName('span')[0];
+    const stateSpan = container.getElementsByTagName('span')[1];
+    expect(pendingSpan.textContent).toBe('');
+    expect(stateSpan.textContent).toBe('Count: 1');
+
+    expect(form.action).toBe('http://localhost/permalink');
+  });
+
+  it('useActionState can return JSX state during MPA form submission', async () => {
+    const serverAction = serverExports(
+      async function action(prevState, formData) {
+        return <div>error message</div>;
+      },
+    );
+
+    function Form({action}) {
+      const [errorMsg, dispatch] = useActionState(action, null);
+      return <form action={dispatch}>{errorMsg}</form>;
+    }
+
+    const FormRef = await clientExports(Form);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <FormRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form1 = container.getElementsByTagName('form')[0];
+    expect(form1.textContent).toBe('');
+
+    async function submitTheForm() {
+      const form = container.getElementsByTagName('form')[0];
+      const {formState} = await submit(form);
+
+      // Simulate an MPA form submission by resetting the container and
+      // rendering again.
+      container.innerHTML = '';
+
+      const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+        <FormRef action={serverAction} />,
+        webpackMap,
+      );
+      const postbackResponse = ReactServerDOMClient.createFromReadableStream(
+        postbackRscStream,
+        {
+          serverConsumerManifest: {
+            moduleMap: null,
+            moduleLoading: null,
+          },
+        },
+      );
+      const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+        postbackResponse,
+        {formState: formState},
+      );
+      await readIntoContainer(postbackSsrStream);
+    }
+
+    await submitTheForm();
+    assertConsoleErrorDev([
+      'Failed to serialize an action for progressive enhancement:\n' +
+        'Error: React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options.\n' +
+        '  [<div/>]\n' +
+        '   ^^^^^^' +
+        '\n    in <stack>',
+    ]);
+
+    // The error message was returned as JSX.
+    const form2 = container.getElementsByTagName('form')[0];
+    expect(form2.textContent).toBe('error message');
+    expect(form2.firstChild.tagName).toBe('DIV');
+  });
+
+  it('useActionState can return binary state during MPA form submission', async () => {
+    const serverAction = serverExports(
+      async function action(prevState, formData) {
+        return new Blob([new Uint8Array([104, 105])]);
+      },
+    );
+
+    let blob;
+
+    function Form({action}) {
+      const [errorMsg, dispatch] = useActionState(action, null);
+      let text;
+      if (errorMsg) {
+        blob = errorMsg;
+        text = React.use(blob.text());
+      }
+      return <form action={dispatch}>{text}</form>;
+    }
+
+    const FormRef = await clientExports(Form);
+
+    const rscStream = ReactServerDOMServer.renderToReadableStream(
+      <FormRef action={serverAction} />,
+      webpackMap,
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const ssrStream = await ReactDOMServer.renderToReadableStream(response);
+    await readIntoContainer(ssrStream);
+
+    const form1 = container.getElementsByTagName('form')[0];
+    expect(form1.textContent).toBe('');
+
+    async function submitTheForm() {
+      const form = container.getElementsByTagName('form')[0];
+      const {formState} = await submit(form);
+
+      // Simulate an MPA form submission by resetting the container and
+      // rendering again.
+      container.innerHTML = '';
+
+      const postbackRscStream = ReactServerDOMServer.renderToReadableStream(
+        {formState, root: <FormRef action={serverAction} />},
+        webpackMap,
+      );
+      const postbackResponse =
+        await ReactServerDOMClient.createFromReadableStream(postbackRscStream, {
+          serverConsumerManifest: {
+            moduleMap: null,
+            moduleLoading: null,
+          },
+        });
+      const postbackSsrStream = await ReactDOMServer.renderToReadableStream(
+        postbackResponse.root,
+        {formState: postbackResponse.formState},
+      );
+      await readIntoContainer(postbackSsrStream);
+    }
+
+    await submitTheForm();
+    assertConsoleErrorDev([
+      'Failed to serialize an action for progressive enhancement:\n' +
+        'Error: File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration.' +
+        '\n    in <stack>',
+    ]);
+
+    expect(blob instanceof Blob).toBe(true);
+    expect(blob.size).toBe(2);
+
+    const form2 = container.getElementsByTagName('form')[0];
+    expect(form2.textContent).toBe('hi');
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
new file mode 100644
index 00000000000..3fb34e0ba41
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
@@ -0,0 +1,1589 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
+
+let clientExports;
+let webpackMap;
+let webpackModules;
+let webpackModuleLoading;
+let React;
+let ReactDOMServer;
+let ReactDOMFizzStatic;
+let ReactServer;
+let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
+let ReactServerDOMClient;
+let Stream;
+let use;
+let serverAct;
+
+// We test pass-through without encoding strings but it should work without it too.
+const streamOptions = {
+  objectMode: true,
+};
+
+describe('ReactFlightDOMNode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    patchSetImmediate();
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-webpack/server', () =>
+      jest.requireActual('react-server-dom-webpack/server.node'),
+    );
+    ReactServer = require('react');
+    ReactServerDOMServer = require('react-server-dom-webpack/server');
+    jest.mock('react-server-dom-webpack/static', () =>
+      jest.requireActual('react-server-dom-webpack/static.node'),
+    );
+    ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+
+    const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
+    webpackMap = WebpackMock.webpackMap;
+    webpackModules = WebpackMock.webpackModules;
+    webpackModuleLoading = WebpackMock.moduleLoading;
+
+    jest.resetModules();
+    __unmockReact();
+    jest.unmock('react-server-dom-webpack/server');
+    jest.mock('react-server-dom-webpack/client', () =>
+      jest.requireActual('react-server-dom-webpack/client.node'),
+    );
+
+    React = require('react');
+    ReactDOMServer = require('react-dom/server.node');
+    ReactDOMFizzStatic = require('react-dom/static');
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+    Stream = require('stream');
+    use = React.use;
+  });
+
+  function filterStackFrame(filename, functionName) {
+    return (
+      filename !== '' &&
+      !filename.startsWith('node:') &&
+      !filename.includes('node_modules') &&
+      // Filter out our own internal source code since it'll typically be in node_modules
+      (!filename.includes('/packages/') || filename.includes('/__tests__/')) &&
+      !filename.includes('/build/')
+    );
+  }
+
+  const relativeFilename = path.relative(__dirname, __filename);
+
+  function normalizeCodeLocInfo(str, {preserveLocation = false} = {}) {
+    return (
+      str &&
+      str.replace(
+        /^ +(?:at|in) ([\S]+) ([^\n]*)/gm,
+        function (m, name, location) {
+          return (
+            '    in ' +
+            name +
+            (/\d/.test(m)
+              ? preserveLocation
+                ? ' ' + location.replace(__filename, relativeFilename)
+                : ' (at **)'
+              : '')
+          );
+        },
+      )
+    );
+  }
+
+  /**
+   * Removes all stackframes not pointing into this file
+   */
+  function ignoreListStack(str) {
+    if (!str) {
+      return str;
+    }
+
+    let ignoreListedStack = '';
+    const lines = str.split('\n');
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const line of lines) {
+      if (line.indexOf(__filename) === -1) {
+      } else {
+        ignoreListedStack += '\n' + line.replace(__dirname, '.');
+      }
+    }
+
+    return ignoreListedStack;
+  }
+
+  function readResult(stream) {
+    return new Promise((resolve, reject) => {
+      let buffer = '';
+      const writable = new Stream.PassThrough(streamOptions);
+      writable.setEncoding('utf8');
+      writable.on('data', chunk => {
+        buffer += chunk;
+      });
+      writable.on('error', error => {
+        reject(error);
+      });
+      writable.on('end', () => {
+        resolve(buffer);
+      });
+      stream.pipe(writable);
+    });
+  }
+
+  async function readWebResult(webStream: ReadableStream<Uint8Array>) {
+    const reader = webStream.getReader();
+    let result = '';
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        return result;
+      }
+      result += Buffer.from(value).toString('utf8');
+    }
+  }
+
+  async function createBufferedUnclosingStream(
+    stream: ReadableStream<Uint8Array>,
+  ): Promise<ReadableStream<Uint8Array>> {
+    const chunks: Array<Uint8Array> = [];
+    const reader = stream.getReader();
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) {
+        break;
+      } else {
+        chunks.push(value);
+      }
+    }
+
+    let i = 0;
+    return new ReadableStream({
+      async pull(controller) {
+        if (i < chunks.length) {
+          controller.enqueue(chunks[i++]);
+        }
+      },
+    });
+  }
+
+  function createDelayedStream() {
+    let resolveDelayedStream;
+    const promise = new Promise(resolve => (resolveDelayedStream = resolve));
+    const delayedStream = new Stream.Transform({
+      ...streamOptions,
+      transform(chunk, encoding, callback) {
+        // Artificially delay pushing the chunk.
+        promise.then(() => {
+          this.push(chunk);
+          callback();
+        });
+      },
+    });
+    return {delayedStream, resolveDelayedStream};
+  }
+
+  it('should support web streams in node', async () => {
+    function Text({children}) {
+      return <span>{children}</span>;
+    }
+    // Large strings can get encoded differently so we need to test that.
+    const largeString = 'world'.repeat(1000);
+    function HTML() {
+      return (
+        <div>
+          <Text>hello</Text>
+          <Text>{largeString}</Text>
+        </div>
+      );
+    }
+
+    function App() {
+      const model = {
+        html: <HTML />,
+      };
+      return model;
+    }
+
+    const readable = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<App />, webpackMap),
+    );
+    const response = ReactServerDOMClient.createFromReadableStream(readable, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>{largeString}</span>
+        </div>
+      ),
+    });
+  });
+
+  it('should allow an alternative module mapping to be used for SSR', async () => {
+    function ClientComponent() {
+      return <span>Client Component</span>;
+    }
+    // The Client build may not have the same IDs as the Server bundles for the same
+    // component.
+    const ClientComponentOnTheClient = clientExports(
+      ClientComponent,
+      123,
+      'path/to/chunk.js',
+    );
+    const ClientComponentOnTheServer = clientExports(ClientComponent);
+
+    // In the SSR bundle this module won't exist. We simulate this by deleting it.
+    const clientId = webpackMap[ClientComponentOnTheClient.$$id].id;
+    delete webpackModules[clientId];
+
+    // Instead, we have to provide a translation from the client meta data to the SSR
+    // meta data.
+    const ssrMetadata = webpackMap[ClientComponentOnTheServer.$$id];
+    const translationMap = {
+      [clientId]: {
+        '*': ssrMetadata,
+      },
+    };
+    const serverConsumerManifest = {
+      moduleMap: translationMap,
+      moduleLoading: webpackModuleLoading,
+    };
+
+    function App() {
+      return <ClientComponentOnTheClient />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<App />, webpackMap),
+    );
+    const readable = new Stream.PassThrough(streamOptions);
+    let response;
+
+    stream.pipe(readable);
+
+    function ClientRoot() {
+      if (response) return use(response);
+      response = ReactServerDOMClient.createFromNodeStream(
+        readable,
+        serverConsumerManifest,
+      );
+      return use(response);
+    }
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(<ClientRoot />),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual(
+      '<script src="/path/to/chunk.js" async=""></script><span>Client Component</span>',
+    );
+  });
+
+  it('should encode long string in a compact format', async () => {
+    const testString = '"\n\t'.repeat(500) + '🙃';
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream({
+        text: testString,
+      }),
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const stringResult = readResult(readable);
+    const parsedResult = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: webpackModuleLoading,
+    });
+
+    stream.pipe(readable);
+
+    const serializedContent = await stringResult;
+    // The content should be compact an unescaped
+    expect(serializedContent.length).toBeLessThan(2000);
+    expect(serializedContent).not.toContain('\\n');
+    expect(serializedContent).not.toContain('\\t');
+    expect(serializedContent).not.toContain('\\"');
+    expect(serializedContent).toContain('\t');
+
+    const result = await parsedResult;
+    // Should still match the result when parsed
+    expect(result.text).toBe(testString);
+  });
+
+  it('should be able to serialize any kind of typed array', async () => {
+    const buffer = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]).buffer;
+    const buffers = [
+      buffer,
+      new Int8Array(buffer, 1),
+      new Uint8Array(buffer, 2),
+      new Uint8ClampedArray(buffer, 2),
+      new Int16Array(buffer, 2),
+      new Uint16Array(buffer, 2),
+      new Int32Array(buffer, 4),
+      new Uint32Array(buffer, 4),
+      new Float32Array(buffer, 4),
+      new Float64Array(buffer, 0),
+      new BigInt64Array(buffer, 0),
+      new BigUint64Array(buffer, 0),
+      new DataView(buffer, 3),
+    ];
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(buffers),
+    );
+    const readable = new Stream.PassThrough(streamOptions);
+    const promise = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: webpackModuleLoading,
+    });
+    stream.pipe(readable);
+    const result = await promise;
+    expect(result).toEqual(buffers);
+  });
+
+  it('should allow accept a nonce option for Flight preinitialized scripts', async () => {
+    function ClientComponent() {
+      return <span>Client Component</span>;
+    }
+    // The Client build may not have the same IDs as the Server bundles for the same
+    // component.
+    const ClientComponentOnTheClient = clientExports(
+      ClientComponent,
+      123,
+      'path/to/chunk.js',
+    );
+    const ClientComponentOnTheServer = clientExports(ClientComponent);
+
+    // In the SSR bundle this module won't exist. We simulate this by deleting it.
+    const clientId = webpackMap[ClientComponentOnTheClient.$$id].id;
+    delete webpackModules[clientId];
+
+    // Instead, we have to provide a translation from the client meta data to the SSR
+    // meta data.
+    const ssrMetadata = webpackMap[ClientComponentOnTheServer.$$id];
+    const translationMap = {
+      [clientId]: {
+        '*': ssrMetadata,
+      },
+    };
+    const serverConsumerManifest = {
+      moduleMap: translationMap,
+      moduleLoading: webpackModuleLoading,
+    };
+
+    function App() {
+      return <ClientComponentOnTheClient />;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(<App />, webpackMap),
+    );
+    const readable = new Stream.PassThrough(streamOptions);
+    let response;
+
+    stream.pipe(readable);
+
+    function ClientRoot() {
+      if (response) return use(response);
+      response = ReactServerDOMClient.createFromNodeStream(
+        readable,
+        serverConsumerManifest,
+        {
+          nonce: 'r4nd0m',
+        },
+      );
+      return use(response);
+    }
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(<ClientRoot />),
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual(
+      '<script src="/path/to/chunk.js" async="" nonce="r4nd0m"></script><span>Client Component</span>',
+    );
+  });
+
+  it('should cancel the underlying and transported ReadableStreams when we are cancelled', async () => {
+    let controller;
+    let cancelReason;
+    const s = new ReadableStream({
+      start(c) {
+        controller = c;
+      },
+      cancel(r) {
+        cancelReason = r;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        s,
+        {},
+        {
+          onError(error) {
+            return error.message;
+          },
+        },
+      ),
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+    rscStream.pipe(readable);
+
+    const result = await ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: webpackModuleLoading,
+    });
+    const reader = result.getReader();
+
+    controller.enqueue('hi');
+
+    await serverAct(async () => {
+      // We should be able to read the part we already emitted before the abort
+      expect(await reader.read()).toEqual({
+        value: 'hi',
+        done: false,
+      });
+    });
+
+    const reason = new Error('aborted');
+    readable.destroy(reason);
+
+    await new Promise(resolve => {
+      readable.on('error', () => {
+        resolve();
+      });
+    });
+
+    expect(cancelReason.message).toBe(
+      'The destination stream errored while writing data.',
+    );
+
+    let error = null;
+    try {
+      await reader.read();
+    } catch (x) {
+      error = x;
+    }
+    expect(error).toBe(reason);
+  });
+
+  it('should cancel the underlying and transported ReadableStreams when we abort', async () => {
+    const errors = [];
+    let controller;
+    let cancelReason;
+    const s = new ReadableStream({
+      start(c) {
+        controller = c;
+      },
+      cancel(r) {
+        cancelReason = r;
+      },
+    });
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        s,
+        {},
+        {
+          onError(x) {
+            errors.push(x);
+            return x.message;
+          },
+        },
+      ),
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+    rscStream.pipe(readable);
+
+    const result = await ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: webpackModuleLoading,
+    });
+    const reader = result.getReader();
+    controller.enqueue('hi');
+
+    const reason = new Error('aborted');
+    rscStream.abort(reason);
+
+    expect(cancelReason).toBe(reason);
+
+    let error = null;
+    try {
+      await reader.read();
+    } catch (x) {
+      error = x;
+    }
+    expect(error.digest).toBe('aborted');
+    expect(errors).toEqual([reason]);
+  });
+
+  // @gate enableHalt
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromNodeStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        React.createElement(ClientRoot, {response}),
+      ),
+    );
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toBe('<div>hello world</div>');
+  });
+
+  // @gate enableHalt
+  it('does not propagate abort reasons errors when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <ReactServer.Suspense fallback="loading...">
+            <Greeting />
+          </ReactServer.Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const errors = [];
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+            onError(err) {
+              errors.push(err);
+            },
+          },
+        ),
+      };
+    });
+
+    controller.abort('boom');
+    resolveGreeting();
+    const {prelude} = await serverAct(() => pendingResult);
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromNodeStream(prelude, {
+      serverConsumerManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    errors.length = 0;
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        React.createElement(ClientRoot, {response}),
+        {
+          onError(error) {
+            errors.push(error);
+          },
+        },
+      ),
+    );
+    ssrStream.abort('bam');
+    expect(errors).toEqual([new Error('Connection closed.')]);
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toContain('loading...');
+  });
+
+  // @gate enableHalt
+  it('includes source locations in component and owner stacks for halted components', async () => {
+    async function Component() {
+      await new Promise(() => {});
+      return null;
+    }
+
+    function App() {
+      return ReactServer.createElement(
+        'html',
+        null,
+        ReactServer.createElement(
+          'body',
+          null,
+          ReactServer.createElement(
+            ReactServer.Suspense,
+            {fallback: 'Loading...'},
+            ReactServer.createElement(Component, null),
+          ),
+        ),
+      );
+    }
+
+    const errors = [];
+    const serverAbortController = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          ReactServer.createElement(App, null),
+          webpackMap,
+          {
+            signal: serverAbortController.signal,
+            onError(error) {
+              errors.push(error);
+            },
+          },
+        ),
+      };
+    });
+
+    await await serverAct(
+      async () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            serverAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const {prelude} = await pendingResult;
+
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const prerenderResponse = ReactServerDOMClient.createFromReadableStream(
+      await createBufferedUnclosingStream(prelude),
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    let componentStack;
+    let ownerStack;
+
+    const clientAbortController = new AbortController();
+
+    const fizzPrerenderStreamResult = ReactDOMFizzStatic.prerender(
+      React.createElement(ClientRoot, {response: prerenderResponse}),
+      {
+        signal: clientAbortController.signal,
+        onError(error, errorInfo) {
+          componentStack = errorInfo.componentStack;
+          ownerStack = React.captureOwnerStack
+            ? React.captureOwnerStack()
+            : null;
+        },
+      },
+    );
+
+    await await serverAct(
+      async () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            clientAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const fizzPrerenderStream = await fizzPrerenderStreamResult;
+    const prerenderHTML = await readWebResult(fizzPrerenderStream.prelude);
+
+    expect(prerenderHTML).toContain('Loading...');
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n' +
+          '    in Component' +
+          (gate(flags => flags.enableAsyncDebugInfo) ? ' (at **)\n' : '\n') +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in App (at **)\n' +
+          '    in ClientRoot (at **)',
+      );
+    } else {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in ClientRoot (at **)',
+      );
+    }
+
+    if (__DEV__) {
+      if (gate(flags => flags.enableAsyncDebugInfo)) {
+        expect(normalizeCodeLocInfo(ownerStack)).toBe(
+          '\n    in Component (at **)\n    in App (at **)',
+        );
+      } else {
+        expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+      }
+    } else {
+      expect(ownerStack).toBeNull();
+    }
+  });
+
+  // @gate enableHalt
+  it('includes source locations in component and owner stacks for halted Client components', async () => {
+    function SharedComponent({p1, p2, p3}) {
+      use(p1);
+      use(p2);
+      use(p3);
+      return <div>Hello, Dave!</div>;
+    }
+    const ClientComponentOnTheServer = clientExports(SharedComponent);
+    const ClientComponentOnTheClient = clientExports(
+      SharedComponent,
+      123,
+      'path/to/chunk.js',
+    );
+
+    let resolvePendingPromise;
+    function ServerComponent() {
+      const p1 = Promise.resolve();
+      const p2 = new Promise(resolve => {
+        resolvePendingPromise = value => {
+          p2.status = 'fulfilled';
+          p2.value = value;
+          resolve(value);
+        };
+      });
+      const p3 = new Promise(() => {});
+      return ReactServer.createElement(ClientComponentOnTheClient, {
+        p1: p1,
+        p2: p2,
+        p3: p3,
+      });
+    }
+
+    function App() {
+      return ReactServer.createElement(
+        'html',
+        null,
+        ReactServer.createElement(
+          'body',
+          null,
+          ReactServer.createElement(
+            ReactServer.Suspense,
+            {fallback: 'Loading...'},
+            ReactServer.createElement(ServerComponent, null),
+          ),
+        ),
+      );
+    }
+
+    const errors = [];
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        ReactServer.createElement(App, null),
+        webpackMap,
+      ),
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+    rscStream.pipe(readable);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [webpackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': webpackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: webpackModuleLoading,
+    };
+
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromNodeStream(
+      readable,
+      serverConsumerManifest,
+    );
+
+    let componentStack;
+    let ownerStack;
+
+    const clientAbortController = new AbortController();
+
+    const fizzPrerenderStreamResult = ReactDOMFizzStatic.prerender(
+      React.createElement(ClientRoot, {response}),
+      {
+        signal: clientAbortController.signal,
+        onError(error, errorInfo) {
+          componentStack = errorInfo.componentStack;
+          ownerStack = React.captureOwnerStack
+            ? React.captureOwnerStack()
+            : null;
+        },
+      },
+    );
+
+    resolvePendingPromise('custom-instrum-resolve');
+    await serverAct(
+      async () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            clientAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const fizzPrerenderStream = await fizzPrerenderStreamResult;
+    const prerenderHTML = await readWebResult(fizzPrerenderStream.prelude);
+
+    expect(prerenderHTML).toContain('Loading...');
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n' +
+          '    in SharedComponent (at **)\n' +
+          '    in ServerComponent' +
+          (gate(flags => flags.enableAsyncDebugInfo) ? ' (at **)' : '') +
+          '\n' +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in App (at **)\n' +
+          '    in ClientRoot (at **)',
+      );
+    } else {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n' +
+          '    in SharedComponent (at **)\n' +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in ClientRoot (at **)',
+      );
+    }
+
+    if (__DEV__) {
+      expect(ignoreListStack(ownerStack)).toBe(
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        '' +
+          // The concrete location may change as this test is updated.
+          // Just make sure they still point at React.use(p2)
+          (gate(flags => flags.enableAsyncDebugInfo)
+            ? '\n    at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+            : '') +
+          '\n    at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)' +
+          '\n    at App (file://./ReactFlightDOMNode-test.js:852:25)',
+      );
+    } else {
+      expect(ownerStack).toBeNull();
+    }
+  });
+
+  // @gate enableHalt
+  it('includes deeper location for aborted stacks', async () => {
+    async function getData() {
+      const signal = ReactServer.cacheSignal();
+      await new Promise((resolve, reject) => {
+        signal.addEventListener('abort', () => reject(signal.reason));
+      });
+    }
+
+    async function thisShouldNotBeInTheStack() {
+      await new Promise((resolve, reject) => {
+        resolve();
+      });
+    }
+
+    async function Component() {
+      try {
+        await getData();
+      } catch (x) {
+        await thisShouldNotBeInTheStack(); // This is issued after the rejection so should not be included.
+      }
+      return null;
+    }
+
+    function App() {
+      return ReactServer.createElement(
+        'html',
+        null,
+        ReactServer.createElement(
+          'body',
+          null,
+          ReactServer.createElement(
+            ReactServer.Suspense,
+            {fallback: 'Loading...'},
+            ReactServer.createElement(Component, null),
+          ),
+        ),
+      );
+    }
+
+    const errors = [];
+    const serverAbortController = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          ReactServer.createElement(App, null),
+          webpackMap,
+          {
+            signal: serverAbortController.signal,
+            onError(error) {
+              errors.push(error);
+            },
+            filterStackFrame,
+          },
+        ),
+      };
+    });
+
+    await serverAct(
+      () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            serverAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const {prelude} = await pendingResult;
+
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const prerenderResponse = ReactServerDOMClient.createFromReadableStream(
+      await createBufferedUnclosingStream(prelude),
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    let componentStack;
+    let ownerStack;
+
+    const clientAbortController = new AbortController();
+
+    const fizzPrerenderStreamResult = ReactDOMFizzStatic.prerender(
+      React.createElement(ClientRoot, {response: prerenderResponse}),
+      {
+        signal: clientAbortController.signal,
+        onError(error, errorInfo) {
+          componentStack = errorInfo.componentStack;
+          ownerStack = React.captureOwnerStack
+            ? React.captureOwnerStack()
+            : null;
+        },
+      },
+    );
+
+    await await serverAct(
+      async () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            clientAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const fizzPrerenderStream = await fizzPrerenderStreamResult;
+    const prerenderHTML = await readWebResult(fizzPrerenderStream.prelude);
+
+    expect(prerenderHTML).toContain('Loading...');
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n' +
+          '    in Component' +
+          (gate(flags => flags.enableAsyncDebugInfo) ? ' (at **)\n' : '\n') +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in App (at **)\n' +
+          '    in ClientRoot (at **)',
+      );
+    } else {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in ClientRoot (at **)',
+      );
+    }
+
+    if (__DEV__) {
+      if (gate(flags => flags.enableAsyncDebugInfo)) {
+        expect(normalizeCodeLocInfo(ownerStack)).toBe(
+          '' +
+            '\n    in getData (at **)' +
+            '\n    in Component (at **)' +
+            '\n    in App (at **)',
+        );
+      } else {
+        expect(normalizeCodeLocInfo(ownerStack)).toBe(
+          '' + '\n    in App (at **)',
+        );
+      }
+    } else {
+      expect(ownerStack).toBeNull();
+    }
+  });
+
+  // @gate enableHalt
+  // @gate enableHalt
+  it('can handle an empty prelude when prerendering', async () => {
+    function App() {
+      return null;
+    }
+
+    const serverAbortController = new AbortController();
+    serverAbortController.abort();
+    const errors = [];
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          ReactServer.createElement(App, null),
+          webpackMap,
+          {
+            signal: serverAbortController.signal,
+            onError(error) {
+              errors.push(error);
+            },
+          },
+        ),
+      };
+    });
+
+    expect(errors).toEqual([]);
+
+    const {prelude} = await pendingResult;
+
+    const reader = prelude.getReader();
+    while (true) {
+      const {done} = await reader.read();
+      if (done) {
+        break;
+      }
+    }
+
+    // We don't really have an assertion other than to make sure
+    // the stream doesn't hang.
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a separate debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    const debugReadable = new Stream.PassThrough(streamOptions);
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        ReactServer.createElement(App, null),
+        webpackMap,
+        {
+          debugChannel: new Stream.Writable({
+            write(chunk, encoding, callback) {
+              debugReadable.write(chunk, encoding);
+              callback();
+            },
+            final() {
+              debugReadable.end();
+            },
+          }),
+        },
+      ),
+    );
+
+    // Create a delayed stream to simulate that the RSC stream might be
+    // transported slower than the debug channel, which must not lead to a
+    // `Connection closed` error in the Flight client.
+    const {delayedStream, resolveDelayedStream} = createDelayedStream();
+
+    rscStream.pipe(delayedStream);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [webpackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': webpackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: webpackModuleLoading,
+    };
+
+    const response = ReactServerDOMClient.createFromNodeStream(
+      delayedStream,
+      serverConsumerManifest,
+      {debugChannel: debugReadable},
+    );
+
+    setTimeout(resolveDelayedStream);
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+
+  // @gate __DEV__
+  it('can transport debug info through a slow debug channel', async () => {
+    function Thrower() {
+      throw new Error('ssr-throw');
+    }
+
+    const ClientComponentOnTheClient = clientExports(
+      Thrower,
+      123,
+      'path/to/chunk.js',
+    );
+
+    const ClientComponentOnTheServer = clientExports(Thrower);
+
+    function App() {
+      return ReactServer.createElement(
+        ReactServer.Suspense,
+        null,
+        ReactServer.createElement(ClientComponentOnTheClient, null),
+      );
+    }
+
+    // Create a delayed stream to simulate that the debug stream might be
+    // transported slower than the RSC stream, which must not lead to missing
+    // debug info.
+    const {delayedStream, resolveDelayedStream} = createDelayedStream();
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        ReactServer.createElement(App, null),
+        webpackMap,
+        {
+          debugChannel: new Stream.Writable({
+            write(chunk, encoding, callback) {
+              delayedStream.write(chunk, encoding);
+              callback();
+            },
+            final() {
+              delayedStream.end();
+            },
+          }),
+        },
+      ),
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    rscStream.pipe(readable);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const serverConsumerManifest = {
+      moduleMap: {
+        [webpackMap[ClientComponentOnTheClient.$$id].id]: {
+          '*': webpackMap[ClientComponentOnTheServer.$$id],
+        },
+      },
+      moduleLoading: webpackModuleLoading,
+    };
+
+    const response = ReactServerDOMClient.createFromNodeStream(
+      readable,
+      serverConsumerManifest,
+      {debugChannel: delayedStream},
+    );
+
+    setTimeout(resolveDelayedStream);
+
+    let ownerStack;
+
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        <ClientRoot response={response} />,
+        {
+          onError(err, errorInfo) {
+            ownerStack = React.captureOwnerStack
+              ? React.captureOwnerStack()
+              : null;
+          },
+        },
+      ),
+    );
+
+    const result = await readResult(ssrStream);
+
+    expect(normalizeCodeLocInfo(ownerStack)).toBe('\n    in App (at **)');
+
+    expect(result).toContain(
+      'Switched to client rendering because the server rendering errored:\n\nssr-throw',
+    );
+  });
+
+  // This is a regression test for a specific issue where byte Web Streams are
+  // detaching ArrayBuffers, which caused downstream issues (e.g. "Cannot
+  // perform Construct on a detached ArrayBuffer") for chunks that are using
+  // Node's internal Buffer pool.
+  it('should not corrupt the Node.js Buffer pool by detaching ArrayBuffers when using Web Streams', async () => {
+    // Create a temp file smaller than 4KB to ensure it uses the Buffer pool.
+    const file = path.join(os.tmpdir(), 'test.bin');
+    fs.writeFileSync(file, Buffer.alloc(4095));
+    const fileChunk = fs.readFileSync(file);
+    fs.unlinkSync(file);
+
+    // Verify this chunk uses the Buffer pool (8192 bytes for files < 4KB).
+    expect(fileChunk.buffer.byteLength).toBe(8192);
+
+    const readable = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(fileChunk, webpackMap),
+    );
+
+    // Create a Web Streams WritableStream that tries to use Buffer operations.
+    const writable = new WritableStream({
+      write(chunk) {
+        // Only write one byte to ensure Node.js is not creating a new Buffer
+        // pool. Typically, library code (e.g. a compression middleware) would
+        // call Buffer.from(chunk) or similar, instead of allocating a new
+        // Buffer directly. With that, the test file could only be ~2600 bytes.
+        Buffer.allocUnsafe(1);
+      },
+    });
+
+    // Must not throw an error.
+    await readable.pipeTo(writable);
+  });
+
+  describe('with real timers', () => {
+    // These tests schedule their rendering in a way that requires real timers
+    // to be used to accurately represent how this interacts with React's
+    // internal scheduling.
+
+    beforeEach(() => {
+      jest.useRealTimers();
+    });
+
+    afterEach(() => {
+      jest.useFakeTimers();
+    });
+
+    it('should use late-arriving I/O debug info to enhance component and owner stacks when aborting a prerender', async () => {
+      let resolveDynamicData1;
+      let resolveDynamicData2;
+
+      async function getDynamicData1() {
+        return new Promise(resolve => {
+          resolveDynamicData1 = resolve;
+        });
+      }
+
+      async function getDynamicData2() {
+        return new Promise(resolve => {
+          resolveDynamicData2 = resolve;
+        });
+      }
+
+      async function Dynamic() {
+        const data1 = await getDynamicData1();
+        const data2 = await getDynamicData2();
+
+        return ReactServer.createElement('p', null, data1, ' ', data2);
+      }
+
+      function App() {
+        return ReactServer.createElement(
+          'html',
+          null,
+          ReactServer.createElement(
+            'body',
+            null,
+            ReactServer.createElement(Dynamic),
+          ),
+        );
+      }
+
+      let staticEndTime = -1;
+      const initialChunks = [];
+      const dynamicChunks = [];
+
+      await new Promise(resolve => {
+        setTimeout(async () => {
+          const stream = ReactServerDOMServer.renderToPipeableStream(
+            ReactServer.createElement(App),
+            webpackMap,
+            {filterStackFrame},
+          );
+
+          const passThrough = new Stream.PassThrough(streamOptions);
+          stream.pipe(passThrough);
+
+          passThrough.on('data', chunk => {
+            if (staticEndTime < 0) {
+              initialChunks.push(chunk);
+            } else {
+              dynamicChunks.push(chunk);
+            }
+          });
+
+          passThrough.on('end', resolve);
+        });
+        setTimeout(() => {
+          staticEndTime = performance.now() + performance.timeOrigin;
+          resolveDynamicData1('Hi');
+          setTimeout(() => {
+            resolveDynamicData2('Josh');
+          });
+        });
+      });
+
+      // Create a new Readable and push all initial chunks immediately.
+      const readable = new Stream.Readable({...streamOptions, read() {}});
+      for (let i = 0; i < initialChunks.length; i++) {
+        readable.push(initialChunks[i]);
+      }
+
+      const abortController = new AbortController();
+
+      // When prerendering is aborted, push all dynamic chunks. They won't be
+      // considered for rendering, but they include debug info we want to use.
+      abortController.signal.addEventListener(
+        'abort',
+        () => {
+          for (let i = 0; i < dynamicChunks.length; i++) {
+            readable.push(dynamicChunks[i]);
+          }
+        },
+        {once: true},
+      );
+
+      const response = ReactServerDOMClient.createFromNodeStream(
+        readable,
+        {
+          serverConsumerManifest: {
+            moduleMap: null,
+            moduleLoading: null,
+          },
+        },
+        {
+          // Debug info arriving after this end time will be ignored, e.g. the
+          // I/O info for the second dynamic data.
+          endTime: staticEndTime,
+        },
+      );
+
+      function ClientRoot() {
+        return use(response);
+      }
+
+      let componentStack;
+      let ownerStack;
+
+      const {prelude} = await new Promise(resolve => {
+        let result;
+
+        setTimeout(() => {
+          result = ReactDOMFizzStatic.prerenderToNodeStream(
+            React.createElement(ClientRoot),
+            {
+              signal: abortController.signal,
+              onError(error, errorInfo) {
+                componentStack = errorInfo.componentStack;
+                ownerStack = React.captureOwnerStack
+                  ? React.captureOwnerStack()
+                  : null;
+              },
+            },
+          );
+        });
+
+        setTimeout(() => {
+          abortController.abort();
+          resolve(result);
+        });
+      });
+
+      const prerenderHTML = await readResult(prelude);
+
+      expect(prerenderHTML).toBe('');
+
+      if (__DEV__) {
+        expect(
+          normalizeCodeLocInfo(componentStack, {preserveLocation: true}),
+        ).toBe(
+          '\n' +
+            '    in Dynamic' +
+            (gate(flags => flags.enableAsyncDebugInfo)
+              ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
+              : '\n') +
+            '    in body\n' +
+            '    in html\n' +
+            '    in App (file://ReactFlightDOMNode-test.js:1432:25)\n' +
+            '    in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
+        );
+      } else {
+        expect(
+          normalizeCodeLocInfo(componentStack, {preserveLocation: true}),
+        ).toBe(
+          '\n' +
+            '    in body\n' +
+            '    in html\n' +
+            '    in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
+        );
+      }
+
+      if (__DEV__) {
+        if (gate(flags => flags.enableAsyncDebugInfo)) {
+          expect(
+            normalizeCodeLocInfo(ownerStack, {preserveLocation: true}),
+          ).toBe(
+            '\n' +
+              '    in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n' +
+              '    in App (file://ReactFlightDOMNode-test.js:1432:25)',
+          );
+        } else {
+          expect(
+            normalizeCodeLocInfo(ownerStack, {preserveLocation: true}),
+          ).toBe(
+            '' +
+              '\n' +
+              '    in App (file://ReactFlightDOMNode-test.js:1432:25)',
+          );
+        }
+      } else {
+        expect(ownerStack).toBeNull();
+      }
+    });
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js
new file mode 100644
index 00000000000..409718973be
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js
@@ -0,0 +1,679 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+// Polyfills for test environment
+global.ReadableStream =
+  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+global.TextDecoder = require('util').TextDecoder;
+
+// let serverExports;
+let webpackServerMap;
+let React;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let ReactServerScheduler;
+let serverAct;
+
+describe('ReactFlightDOMReply', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactServerScheduler = require('scheduler');
+    patchMessageChannel(ReactServerScheduler);
+    serverAct = require('internal-test-utils').serverAct;
+
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-webpack/server', () =>
+      require('react-server-dom-webpack/server.browser'),
+    );
+    const WebpackMock = require('./utils/WebpackMock');
+    // serverExports = WebpackMock.serverExports;
+    webpackServerMap = WebpackMock.webpackServerMap;
+    React = require('react');
+    ReactServerDOMServer = require('react-server-dom-webpack/server.browser');
+    jest.resetModules();
+    __unmockReact();
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+  });
+
+  // This method should exist on File but is not implemented in JSDOM
+  async function arrayBuffer(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = function () {
+        return resolve(reader.result);
+      };
+      reader.onerror = function () {
+        return reject(reader.error);
+      };
+      reader.readAsArrayBuffer(file);
+    });
+  }
+
+  it('can pass undefined as a reply', async () => {
+    const body = await ReactServerDOMClient.encodeReply(undefined);
+    const missing = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+    expect(missing).toBe(undefined);
+
+    const body2 = await ReactServerDOMClient.encodeReply({
+      array: [undefined, null, undefined],
+      prop: undefined,
+    });
+    const object = await ReactServerDOMServer.decodeReply(
+      body2,
+      webpackServerMap,
+    );
+    expect(object.array.length).toBe(3);
+    expect(object.array[0]).toBe(undefined);
+    expect(object.array[1]).toBe(null);
+    expect(object.array[3]).toBe(undefined);
+    expect(object.prop).toBe(undefined);
+    // These should really be true but our deserialization doesn't currently deal with it.
+    expect('3' in object.array).toBe(false);
+    expect('prop' in object).toBe(false);
+  });
+
+  it('can pass an iterable as a reply', async () => {
+    const body = await ReactServerDOMClient.encodeReply({
+      [Symbol.iterator]: function* () {
+        yield 'A';
+        yield 'B';
+        yield 'C';
+      },
+    });
+    const iterable = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+    const items = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const item of iterable) {
+      items.push(item);
+    }
+    expect(items).toEqual(['A', 'B', 'C']);
+
+    // Multipass
+    const items2 = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const item of iterable) {
+      items2.push(item);
+    }
+    expect(items2).toEqual(['A', 'B', 'C']);
+  });
+
+  it('can pass an iterator as a reply', async () => {
+    const iterator = (function* () {
+      yield 'A';
+      yield 'B';
+      yield 'C';
+    })();
+
+    const body = await ReactServerDOMClient.encodeReply(iterator);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    // The iterator should be the same as itself.
+    expect(result[Symbol.iterator]()).toBe(result);
+
+    expect(Array.from(result)).toEqual(['A', 'B', 'C']);
+    // We've already consumed this iterator.
+    expect(Array.from(result)).toEqual([]);
+  });
+
+  it('can pass weird numbers as a reply', async () => {
+    const nums = [0, -0, Infinity, -Infinity, NaN];
+    const body = await ReactServerDOMClient.encodeReply(nums);
+    const nums2 = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    expect(nums).toEqual(nums2);
+    expect(nums.every((n, i) => Object.is(n, nums2[i]))).toBe(true);
+  });
+
+  it('can pass a BigInt as a reply', async () => {
+    const body = await ReactServerDOMClient.encodeReply(90071992547409910000n);
+    const n = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+
+    expect(n).toEqual(90071992547409910000n);
+  });
+
+  it('can pass FormData as a reply', async () => {
+    const formData = new FormData();
+    formData.set('hello', 'world');
+    formData.append('list', '1');
+    formData.append('list', '2');
+    formData.append('list', '3');
+    const typedArray = new Uint8Array([0, 1, 2, 3]);
+    const blob = new Blob([typedArray]);
+    formData.append('blob', blob, 'filename.blob');
+
+    const body = await ReactServerDOMClient.encodeReply(formData);
+    const formData2 = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    expect(formData2).not.toBe(formData);
+    expect(Array.from(formData2).length).toBe(5);
+    expect(formData2.get('hello')).toBe('world');
+    expect(formData2.getAll('list')).toEqual(['1', '2', '3']);
+    const blob2 = formData.get('blob');
+    expect(blob2.size).toBe(4);
+    expect(blob2.name).toBe('filename.blob');
+    expect(blob2.type).toBe('');
+    const typedArray2 = new Uint8Array(await arrayBuffer(blob2));
+    expect(typedArray2).toEqual(typedArray);
+  });
+
+  it('can pass multiple Files in FormData', async () => {
+    const typedArrayA = new Uint8Array([0, 1, 2, 3]);
+    const typedArrayB = new Uint8Array([4, 5]);
+    const blobA = new Blob([typedArrayA]);
+    const blobB = new Blob([typedArrayB]);
+    const formData = new FormData();
+    formData.append('filelist', 'string');
+    formData.append('filelist', blobA);
+    formData.append('filelist', blobB);
+
+    const body = await ReactServerDOMClient.encodeReply(formData);
+    const formData2 = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    const filelist2 = formData2.getAll('filelist');
+    expect(filelist2.length).toBe(3);
+    expect(filelist2[0]).toBe('string');
+    const blobA2 = filelist2[1];
+    expect(blobA2.size).toBe(4);
+    expect(blobA2.name).toBe('blob');
+    expect(blobA2.type).toBe('');
+    const typedArrayA2 = new Uint8Array(await arrayBuffer(blobA2));
+    expect(typedArrayA2).toEqual(typedArrayA);
+    const blobB2 = filelist2[2];
+    expect(blobB2.size).toBe(2);
+    expect(blobB2.name).toBe('blob');
+    expect(blobB2.type).toBe('');
+    const typedArrayB2 = new Uint8Array(await arrayBuffer(blobB2));
+    expect(typedArrayB2).toEqual(typedArrayB);
+  });
+
+  it('can pass two independent FormData with same keys', async () => {
+    const formDataA = new FormData();
+    formDataA.set('greeting', 'hello');
+    const formDataB = new FormData();
+    formDataB.set('greeting', 'hi');
+
+    const body = await ReactServerDOMClient.encodeReply({
+      a: formDataA,
+      b: formDataB,
+    });
+    const {a: formDataA2, b: formDataB2} =
+      await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+
+    expect(Array.from(formDataA2).length).toBe(1);
+    expect(Array.from(formDataB2).length).toBe(1);
+    expect(formDataA2.get('greeting')).toBe('hello');
+    expect(formDataB2.get('greeting')).toBe('hi');
+  });
+
+  it('can pass a Date as a reply', async () => {
+    const d = new Date(1234567890123);
+    const body = await ReactServerDOMClient.encodeReply(d);
+    const d2 = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+
+    expect(d).toEqual(d2);
+    expect(d % 1000).toEqual(123); // double-check the milliseconds made it through
+  });
+
+  it('can pass a Map as a reply', async () => {
+    const objKey = {obj: 'key'};
+    const m = new Map([
+      ['hi', {greet: 'world'}],
+      [objKey, 123],
+    ]);
+    const body = await ReactServerDOMClient.encodeReply(m);
+    const m2 = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+
+    expect(m2 instanceof Map).toBe(true);
+    expect(m2.size).toBe(2);
+    expect(m2.get('hi').greet).toBe('world');
+    expect(m2).toEqual(m);
+  });
+
+  it('can pass a Set as a reply', async () => {
+    const objKey = {obj: 'key'};
+    const s = new Set(['hi', objKey]);
+
+    const body = await ReactServerDOMClient.encodeReply(s);
+    const s2 = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+
+    expect(s2 instanceof Set).toBe(true);
+    expect(s2.size).toBe(2);
+    expect(s2.has('hi')).toBe(true);
+    expect(s2).toEqual(s);
+  });
+
+  it('does not hang indefinitely when calling decodeReply with FormData', async () => {
+    let error;
+    try {
+      await ReactServerDOMServer.decodeReply(new FormData(), webpackServerMap);
+    } catch (e) {
+      error = e;
+    }
+    expect(error.message).toBe('Connection closed.');
+  });
+
+  it('resolves a promise and includes its value', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+    const bodyPromise = ReactServerDOMClient.encodeReply({promise: promise});
+    resolve('Hi');
+    const result = await ReactServerDOMServer.decodeReply(await bodyPromise);
+    expect(await result.promise).toBe('Hi');
+  });
+
+  it('resolves a React.lazy and includes its value', async () => {
+    let resolve;
+    const lazy = React.lazy(() => new Promise(r => (resolve = r)));
+    const bodyPromise = ReactServerDOMClient.encodeReply({lazy: lazy});
+    resolve({default: 'Hi'});
+    const result = await ReactServerDOMServer.decodeReply(await bodyPromise);
+    expect(result.lazy).toBe('Hi');
+  });
+
+  it('resolves a proxy throwing a promise inside React.lazy', async () => {
+    let resolve1;
+    let resolve2;
+    const lazy = React.lazy(() => new Promise(r => (resolve1 = r)));
+    const promise = new Promise(r => (resolve2 = r));
+    const bodyPromise1 = ReactServerDOMClient.encodeReply({lazy: lazy});
+    const target = {value: ''};
+    let loaded = false;
+    const proxy = new Proxy(target, {
+      get(targetObj, prop, receiver) {
+        if (prop === 'value') {
+          if (!loaded) {
+            throw promise;
+          }
+          return 'Hello';
+        }
+        return targetObj[prop];
+      },
+    });
+    await resolve1({default: proxy});
+
+    // Encode it again so that we have an already initialized lazy
+    // This is now already resolved but the proxy inside isn't. This ensures
+    // we trigger the retry code path.
+    const bodyPromise2 = ReactServerDOMClient.encodeReply({lazy: lazy});
+
+    // Then resolve the inner thrown promise.
+    loaded = true;
+    await resolve2('Hello');
+
+    const result1 = await ReactServerDOMServer.decodeReply(await bodyPromise1);
+    expect(await result1.lazy.value).toBe('Hello');
+    const result2 = await ReactServerDOMServer.decodeReply(await bodyPromise2);
+    expect(await result2.lazy.value).toBe('Hello');
+  });
+
+  it('errors when called with JSX by default', async () => {
+    let error;
+    try {
+      await ReactServerDOMClient.encodeReply(<div />);
+    } catch (x) {
+      error = x;
+    }
+    expect(error).toEqual(
+      expect.objectContaining({
+        message: __DEV__
+          ? expect.stringContaining(
+              'React Element cannot be passed to Server Functions from the Client without a temporary reference set.',
+            )
+          : expect.stringContaining(''),
+      }),
+    );
+  });
+
+  it('can pass JSX through a round trip using temporary references', async () => {
+    function Component() {
+      return <div />;
+    }
+
+    const children = <Component />;
+
+    const temporaryReferences =
+      ReactServerDOMClient.createTemporaryReferenceSet();
+    const body = await ReactServerDOMClient.encodeReply(
+      {children},
+      {
+        temporaryReferences,
+      },
+    );
+
+    const temporaryReferencesServer =
+      ReactServerDOMServer.createTemporaryReferenceSet();
+    const serverPayload = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+      {temporaryReferences: temporaryReferencesServer},
+    );
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(serverPayload, null, {
+        temporaryReferences: temporaryReferencesServer,
+      }),
+    );
+    const response = await ReactServerDOMClient.createFromReadableStream(
+      stream,
+      {
+        temporaryReferences,
+      },
+    );
+
+    // This should've been the same reference that we already saw.
+    expect(response.children).toBe(children);
+  });
+
+  it('can return the same object using temporary references', async () => {
+    const obj = {
+      this: {is: 'a large object'},
+      with: {many: 'properties in it'},
+    };
+
+    const root = {obj};
+
+    const temporaryReferences =
+      ReactServerDOMClient.createTemporaryReferenceSet();
+    const body = await ReactServerDOMClient.encodeReply(root, {
+      temporaryReferences,
+    });
+
+    const temporaryReferencesServer =
+      ReactServerDOMServer.createTemporaryReferenceSet();
+    const serverPayload = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+      {temporaryReferences: temporaryReferencesServer},
+    );
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          root: serverPayload,
+          obj: serverPayload.obj,
+        },
+        null,
+        {temporaryReferences: temporaryReferencesServer},
+      ),
+    );
+    const response = await ReactServerDOMClient.createFromReadableStream(
+      stream,
+      {
+        temporaryReferences,
+      },
+    );
+
+    // This should've been the same reference that we already saw because
+    // we returned it by reference.
+    expect(response.root).toBe(root);
+    expect(response.obj).toBe(obj);
+  });
+
+  it('can return an opaque object through an async function', async () => {
+    function fn() {
+      return 'this is a client function';
+    }
+
+    const args = [fn];
+
+    const temporaryReferences =
+      ReactServerDOMClient.createTemporaryReferenceSet();
+    const body = await ReactServerDOMClient.encodeReply(args, {
+      temporaryReferences,
+    });
+
+    const temporaryReferencesServer =
+      ReactServerDOMServer.createTemporaryReferenceSet();
+    const serverPayload = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+      {temporaryReferences: temporaryReferencesServer},
+    );
+
+    async function action(arg) {
+      return arg;
+    }
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        {
+          result: action.apply(null, serverPayload),
+        },
+        null,
+        {temporaryReferences: temporaryReferencesServer},
+      ),
+    );
+    const response = await ReactServerDOMClient.createFromReadableStream(
+      stream,
+      {
+        temporaryReferences,
+      },
+    );
+
+    expect(await response.result).toBe(fn);
+  });
+
+  it('should supports streaming ReadableStream with objects', async () => {
+    let controller1;
+    let controller2;
+    const s1 = new ReadableStream({
+      start(c) {
+        controller1 = c;
+      },
+    });
+    const s2 = new ReadableStream({
+      start(c) {
+        controller2 = c;
+      },
+    });
+
+    const promise = ReactServerDOMClient.encodeReply({s1, s2});
+
+    controller1.enqueue({hello: 'world'});
+    controller2.enqueue({hi: 'there'});
+
+    controller1.enqueue('text1');
+    controller2.enqueue('text2');
+
+    controller1.close();
+    controller2.close();
+
+    const body = await promise;
+
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+    const reader1 = result.s1.getReader();
+    const reader2 = result.s2.getReader();
+
+    expect(await reader1.read()).toEqual({
+      value: {hello: 'world'},
+      done: false,
+    });
+    expect(await reader2.read()).toEqual({
+      value: {hi: 'there'},
+      done: false,
+    });
+
+    expect(await reader1.read()).toEqual({
+      value: 'text1',
+      done: false,
+    });
+    expect(await reader1.read()).toEqual({
+      value: undefined,
+      done: true,
+    });
+    expect(await reader2.read()).toEqual({
+      value: 'text2',
+      done: false,
+    });
+    expect(await reader2.read()).toEqual({
+      value: undefined,
+      done: true,
+    });
+  });
+
+  it('should supports streaming AsyncIterables with objects', async () => {
+    let resolve;
+    const wait = new Promise(r => (resolve = r));
+    const multiShotIterable = {
+      async *[Symbol.asyncIterator]() {
+        const next = yield {hello: 'A'};
+        expect(next).toBe(undefined);
+        await wait;
+        yield {hi: 'B'};
+        return 'C';
+      },
+    };
+    const singleShotIterator = (async function* () {
+      const next = yield {hello: 'D'};
+      expect(next).toBe(undefined);
+      await wait;
+      yield {hi: 'E'};
+      return 'F';
+    })();
+
+    await resolve();
+
+    const body = await ReactServerDOMClient.encodeReply({
+      multiShotIterable,
+      singleShotIterator,
+    });
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    const iterator1 = result.multiShotIterable[Symbol.asyncIterator]();
+    const iterator2 = result.singleShotIterator[Symbol.asyncIterator]();
+
+    expect(iterator1).not.toBe(result.multiShotIterable);
+    expect(iterator2).toBe(result.singleShotIterator);
+
+    expect(await iterator1.next()).toEqual({
+      value: {hello: 'A'},
+      done: false,
+    });
+    expect(await iterator2.next()).toEqual({
+      value: {hello: 'D'},
+      done: false,
+    });
+
+    expect(await iterator1.next()).toEqual({
+      value: {hi: 'B'},
+      done: false,
+    });
+    expect(await iterator2.next()).toEqual({
+      value: {hi: 'E'},
+      done: false,
+    });
+    expect(await iterator1.next()).toEqual({
+      value: 'C', // Return value
+      done: true,
+    });
+    expect(await iterator1.next()).toEqual({
+      value: undefined,
+      done: true,
+    });
+
+    expect(await iterator2.next()).toEqual({
+      value: 'F', // Return value
+      done: true,
+    });
+
+    // Multi-shot iterables should be able to do the same thing again
+    const iterator3 = result.multiShotIterable[Symbol.asyncIterator]();
+
+    expect(iterator3).not.toBe(iterator1);
+
+    // We should be able to iterate over the iterable again and it should be
+    // synchronously available using instrumented promises so that React can
+    // rerender it synchronously.
+    expect(iterator3.next().value).toEqual({
+      value: {hello: 'A'},
+      done: false,
+    });
+    expect(iterator3.next().value).toEqual({
+      value: {hi: 'B'},
+      done: false,
+    });
+    expect(iterator3.next().value).toEqual({
+      value: 'C', // Return value
+      done: true,
+    });
+    expect(iterator3.next().value).toEqual({
+      value: undefined,
+      done: true,
+    });
+
+    expect(() => iterator3.next('this is not allowed')).toThrow(
+      'Values cannot be passed to next() of AsyncIterables passed to Client Components.',
+    );
+  });
+
+  it('can transport cyclic objects', async () => {
+    const cyclic = {obj: null};
+    cyclic.obj = cyclic;
+
+    const body = await ReactServerDOMClient.encodeReply({prop: cyclic});
+    const root = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+    expect(root.prop.obj).toBe(root.prop);
+  });
+
+  it('can transport cyclic arrays', async () => {
+    const obj = {};
+    const cyclic = [obj];
+    cyclic[1] = cyclic;
+
+    const body = await ReactServerDOMClient.encodeReply({prop: cyclic, obj});
+    const root = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+    expect(root.prop[1]).toBe(root.prop);
+    expect(root.prop[0]).toBe(root.obj);
+  });
+
+  it('can abort an unresolved model and get the partial result', async () => {
+    const promise = new Promise(r => {});
+    const controller = new AbortController();
+    const bodyPromise = ReactServerDOMClient.encodeReply(
+      {promise: promise, hello: 'world'},
+      {signal: controller.signal},
+    );
+    controller.abort();
+
+    const result = await ReactServerDOMServer.decodeReply(await bodyPromise);
+    expect(result.hello).toBe('world');
+    // TODO: await result.promise should reject at this point because the stream
+    // has closed but that's a bug in both ReactFlightReplyServer and ReactFlightClient.
+    // It just halts in this case.
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReplyEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReplyEdge-test.js
new file mode 100644
index 00000000000..ac5aff0d874
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReplyEdge-test.js
@@ -0,0 +1,376 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ./scripts/jest/ReactDOMServerIntegrationEnvironment
+ */
+
+'use strict';
+
+let serverExports;
+let webpackServerMap;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+
+describe('ReactFlightDOMReplyEdge', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    // Simulate the condition resolution
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-webpack/server', () =>
+      require('react-server-dom-webpack/server.edge'),
+    );
+    const WebpackMock = require('./utils/WebpackMock');
+    serverExports = WebpackMock.serverExports;
+    webpackServerMap = WebpackMock.webpackServerMap;
+    ReactServerDOMServer = require('react-server-dom-webpack/server.edge');
+    jest.resetModules();
+    ReactServerDOMClient = require('react-server-dom-webpack/client.edge');
+  });
+
+  it('can encode a reply', async () => {
+    const body = await ReactServerDOMClient.encodeReply({some: 'object'});
+    const decoded = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    expect(decoded).toEqual({some: 'object'});
+  });
+
+  it('should be able to serialize any kind of typed array', async () => {
+    const buffer = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]).buffer;
+    const buffers = [
+      buffer,
+      new Int8Array(buffer, 1),
+      new Uint8Array(buffer, 2),
+      new Uint8ClampedArray(buffer, 2),
+      new Int16Array(buffer, 2),
+      new Uint16Array(buffer, 2),
+      new Int32Array(buffer, 4),
+      new Uint32Array(buffer, 4),
+      new Float32Array(buffer, 4),
+      new Float64Array(buffer, 0),
+      new BigInt64Array(buffer, 0),
+      new BigUint64Array(buffer, 0),
+      new DataView(buffer, 3),
+    ];
+
+    const body = await ReactServerDOMClient.encodeReply(buffers);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    expect(result).toEqual(buffers);
+    // Array buffers can't use the toEqual helper.
+    expect(new Uint8Array(result[0])).toEqual(new Uint8Array(buffers[0]));
+  });
+
+  it('should be able to serialize a typed array inside a Map', async () => {
+    const array = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]);
+    const map = new Map();
+    map.set('array', array);
+
+    const body = await ReactServerDOMClient.encodeReply(map);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    expect(result.get('array')).toEqual(array);
+  });
+
+  it('should be able to serialize a blob', async () => {
+    const bytes = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]);
+    const blob = new Blob([bytes, bytes], {
+      type: 'application/x-test',
+    });
+    const body = await ReactServerDOMClient.encodeReply(blob);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+    expect(result instanceof Blob).toBe(true);
+    expect(result.size).toBe(bytes.length * 2);
+    expect(await result.arrayBuffer()).toEqual(await blob.arrayBuffer());
+  });
+
+  it('can transport FormData (blobs)', async () => {
+    const bytes = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]);
+    const blob = new Blob([bytes, bytes], {
+      type: 'application/x-test',
+    });
+
+    const formData = new FormData();
+    formData.append('hi', 'world');
+    formData.append('file', blob, 'filename.test');
+
+    expect(formData.get('file') instanceof File).toBe(true);
+    expect(formData.get('file').name).toBe('filename.test');
+
+    const body = await ReactServerDOMClient.encodeReply(formData);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    expect(result instanceof FormData).toBe(true);
+    expect(result.get('hi')).toBe('world');
+    const resultBlob = result.get('file');
+    expect(resultBlob instanceof Blob).toBe(true);
+    expect(resultBlob.name).toBe('filename.test'); // In this direction we allow file name to pass through but not other direction.
+    expect(resultBlob.size).toBe(bytes.length * 2);
+    expect(await resultBlob.arrayBuffer()).toEqual(await blob.arrayBuffer());
+  });
+
+  it('should support ReadableStreams with typed arrays', async () => {
+    const buffer = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]).buffer;
+    const buffers = [
+      buffer,
+      new Int8Array(buffer, 1),
+      new Uint8Array(buffer, 2),
+      new Uint8ClampedArray(buffer, 2),
+      new Int16Array(buffer, 2),
+      new Uint16Array(buffer, 2),
+      new Int32Array(buffer, 4),
+      new Uint32Array(buffer, 4),
+      new Float32Array(buffer, 4),
+      new Float64Array(buffer, 0),
+      new BigInt64Array(buffer, 0),
+      new BigUint64Array(buffer, 0),
+      new DataView(buffer, 3),
+    ];
+
+    // This is not a binary stream, it's a stream that contain binary chunks.
+    const s = new ReadableStream({
+      start(c) {
+        for (let i = 0; i < buffers.length; i++) {
+          c.enqueue(buffers[i]);
+        }
+        c.close();
+      },
+    });
+
+    const body = await ReactServerDOMClient.encodeReply(s);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    const streamedBuffers = [];
+    const reader = result.getReader();
+    let entry;
+    while (!(entry = await reader.read()).done) {
+      streamedBuffers.push(entry.value);
+    }
+
+    expect(streamedBuffers).toEqual(buffers);
+  });
+
+  it('should support BYOB binary ReadableStreams', async () => {
+    const sourceBytes = [
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ];
+
+    // Create separate buffers for each typed array to avoid ArrayBuffer
+    // transfer issues. Each view needs its own buffer because enqueue()
+    // transfers ownership.
+    const buffers = [
+      new Int8Array(sourceBytes.slice(1)),
+      new Uint8Array(sourceBytes.slice(2)),
+      new Uint8ClampedArray(sourceBytes.slice(2)),
+      new Int16Array(new Uint8Array(sourceBytes.slice(2)).buffer),
+      new Uint16Array(new Uint8Array(sourceBytes.slice(2)).buffer),
+      new Int32Array(new Uint8Array(sourceBytes.slice(4)).buffer),
+      new Uint32Array(new Uint8Array(sourceBytes.slice(4)).buffer),
+      new Float32Array(new Uint8Array(sourceBytes.slice(4)).buffer),
+      new Float64Array(new Uint8Array(sourceBytes.slice(0)).buffer),
+      new BigInt64Array(new Uint8Array(sourceBytes.slice(0)).buffer),
+      new BigUint64Array(new Uint8Array(sourceBytes.slice(0)).buffer),
+      new DataView(new Uint8Array(sourceBytes.slice(3)).buffer),
+    ];
+
+    // Save expected bytes before enqueueing (which will detach the buffers).
+    const expectedBytes = buffers.flatMap(c =>
+      Array.from(new Uint8Array(c.buffer, c.byteOffset, c.byteLength)),
+    );
+
+    // This a binary stream where each chunk ends up as Uint8Array.
+    const s = new ReadableStream({
+      type: 'bytes',
+      start(c) {
+        for (let i = 0; i < buffers.length; i++) {
+          c.enqueue(buffers[i]);
+        }
+        c.close();
+      },
+    });
+
+    const body = await ReactServerDOMClient.encodeReply(s);
+    const result = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    const streamedBuffers = [];
+    const reader = result.getReader({mode: 'byob'});
+    let entry;
+    while (!(entry = await reader.read(new Uint8Array(10))).done) {
+      expect(entry.value instanceof Uint8Array).toBe(true);
+      streamedBuffers.push(entry.value);
+    }
+
+    // The streamed buffers might be in different chunks and in Uint8Array form but
+    // the concatenated bytes should be the same.
+    expect(streamedBuffers.flatMap(t => Array.from(t))).toEqual(expectedBytes);
+  });
+
+  it('should cancel the transported ReadableStream when we are cancelled', async () => {
+    const s = new ReadableStream({
+      start(controller) {
+        controller.enqueue('hi');
+        controller.close();
+      },
+    });
+
+    const body = await ReactServerDOMClient.encodeReply(s);
+
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const entry of body) {
+          if (entry[1] === 'C') {
+            // Return before finishing the stream.
+            return;
+          }
+          yield entry;
+        }
+      },
+    };
+
+    const result = await ReactServerDOMServer.decodeReplyFromAsyncIterable(
+      iterable,
+      webpackServerMap,
+    );
+
+    const reader = result.getReader();
+
+    // We should be able to read the part we already emitted before the abort
+    expect(await reader.read()).toEqual({
+      value: 'hi',
+      done: false,
+    });
+
+    let error = null;
+    try {
+      await reader.read();
+    } catch (x) {
+      error = x;
+    }
+
+    expect(error).not.toBe(null);
+    expect(error.message).toBe('Connection closed.');
+  });
+
+  it('should abort when parsing an incomplete payload', async () => {
+    const infinitePromise = new Promise(() => {});
+    const controller = new AbortController();
+    const promiseForResult = ReactServerDOMClient.encodeReply(
+      {promise: infinitePromise},
+      {
+        signal: controller.signal,
+      },
+    );
+    controller.abort();
+    const body = await promiseForResult;
+
+    const decoded = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+
+    let error = null;
+    try {
+      await decoded.promise;
+    } catch (x) {
+      error = x;
+    }
+    expect(error).not.toBe(null);
+    expect(error.message).toBe('Connection closed.');
+  });
+
+  it('can stream the decoding using an async iterable', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    const buffer = new Uint8Array([
+      123, 4, 10, 5, 100, 255, 244, 45, 56, 67, 43, 124, 67, 89, 100, 20,
+    ]);
+
+    const formData = await ReactServerDOMClient.encodeReply({
+      a: Promise.resolve('hello'),
+      b: Promise.resolve(buffer),
+    });
+
+    const iterable = {
+      async *[Symbol.asyncIterator]() {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const entry of formData) {
+          yield entry;
+          await promise;
+        }
+      },
+    };
+
+    const decoded = await ReactServerDOMServer.decodeReplyFromAsyncIterable(
+      iterable,
+      webpackServerMap,
+    );
+
+    expect(Object.keys(decoded)).toEqual(['a', 'b']);
+
+    await resolve();
+
+    expect(await decoded.a).toBe('hello');
+    expect(Array.from(await decoded.b)).toEqual(Array.from(buffer));
+  });
+
+  it('can pass a registered server reference', async () => {
+    function greet(name) {
+      return 'hi, ' + name;
+    }
+    const ServerModule = serverExports({
+      greet,
+    });
+
+    ReactServerDOMClient.registerServerReference(
+      ServerModule.greet,
+      ServerModule.greet.$$id,
+    );
+
+    const body = await ReactServerDOMClient.encodeReply({
+      method: ServerModule.greet,
+      boundMethod: ServerModule.greet.bind(null, 'there'),
+    });
+    const replyResult = await ReactServerDOMServer.decodeReply(
+      body,
+      webpackServerMap,
+    );
+    expect(replyResult.method).toBe(greet);
+    expect(replyResult.boundMethod()).toBe('hi, there');
+  });
+});
diff --git a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
new file mode 100644
index 00000000000..5574b069a49
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -0,0 +1,236 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 url = require('url');
+const Module = require('module');
+
+let webpackModuleIdx = 0;
+let webpackChunkIdx = 0;
+const webpackServerModules = {};
+const webpackClientModules = {};
+const webpackErroredModules = {};
+const webpackServerMap = {};
+const webpackClientMap = {};
+const webpackChunkMap = {};
+global.__webpack_chunk_load__ = function (id) {
+  return webpackChunkMap[id];
+};
+global.__webpack_require__ = function (id) {
+  if (webpackErroredModules[id]) {
+    throw webpackErroredModules[id];
+  }
+  return webpackClientModules[id] || webpackServerModules[id];
+};
+global.__webpack_get_script_filename__ = function (id) {
+  return id;
+};
+
+const previousCompile = Module.prototype._compile;
+
+const register = require('react-server-dom-webpack/node-register');
+// Register node compile
+register();
+
+const nodeCompile = Module.prototype._compile;
+
+if (previousCompile === nodeCompile) {
+  throw new Error(
+    'Expected the Node loader to register the _compile extension',
+  );
+}
+
+Module.prototype._compile = previousCompile;
+
+const Server = require('react-server-dom-webpack/server');
+const registerClientReference = Server.registerClientReference;
+const createClientModuleProxy = Server.createClientModuleProxy;
+
+exports.webpackMap = webpackClientMap;
+exports.webpackModules = webpackClientModules;
+exports.webpackServerMap = webpackServerMap;
+exports.moduleLoading = {
+  prefix: '/',
+};
+
+exports.clientModuleError = function clientModuleError(moduleError) {
+  const idx = '' + webpackModuleIdx++;
+  webpackErroredModules[idx] = moduleError;
+  const path = url.pathToFileURL(idx).href;
+  webpackClientMap[path] = {
+    id: idx,
+    chunks: [],
+    name: '*',
+  };
+  const mod = new Module();
+  nodeCompile.call(mod, '"use client"', idx);
+  return mod.exports;
+};
+
+exports.clientExports = function clientExports(
+  moduleExports,
+  chunkId,
+  chunkFilename,
+  blockOnChunk,
+) {
+  const chunks = [];
+  if (chunkId) {
+    chunks.push(chunkId, chunkFilename);
+
+    if (blockOnChunk) {
+      webpackChunkMap[chunkId] = blockOnChunk;
+    }
+  }
+  const idx = '' + webpackModuleIdx++;
+  webpackClientModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+  webpackClientMap[path] = {
+    id: idx,
+    chunks,
+    name: '*',
+  };
+  // We only add this if this test is testing ESM compat.
+  if ('__esModule' in moduleExports) {
+    webpackClientMap[path + '#'] = {
+      id: idx,
+      chunks,
+      name: '',
+    };
+  }
+  if (typeof moduleExports.then === 'function') {
+    moduleExports.then(
+      asyncModuleExports => {
+        for (const name in asyncModuleExports) {
+          webpackClientMap[path + '#' + name] = {
+            id: idx,
+            chunks,
+            name: name,
+          };
+        }
+      },
+      () => {},
+    );
+  }
+  if ('split' in moduleExports) {
+    // If we're testing module splitting, we encode this name in a separate module id.
+    const splitIdx = '' + webpackModuleIdx++;
+    webpackClientModules[splitIdx] = {
+      s: moduleExports.split,
+    };
+    webpackClientMap[path + '#split'] = {
+      id: splitIdx,
+      chunks,
+      name: 's',
+    };
+  }
+  const mod = new Module();
+  nodeCompile.call(mod, '"use client"', idx);
+  return mod.exports;
+};
+
+exports.clientExportsESM = function clientExportsESM(
+  moduleExports,
+  options?: {forceClientModuleProxy?: boolean} = {},
+) {
+  const chunks = [];
+  const idx = '' + webpackModuleIdx++;
+  webpackClientModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+
+  const createClientReferencesForExports = ({exports, async}) => {
+    webpackClientMap[path] = {
+      id: idx,
+      chunks,
+      name: '*',
+      async: true,
+    };
+
+    if (options.forceClientModuleProxy) {
+      return createClientModuleProxy(path);
+    }
+
+    if (typeof exports === 'object') {
+      const references = {};
+
+      for (const name in exports) {
+        const id = path + '#' + name;
+        webpackClientMap[path + '#' + name] = {
+          id: idx,
+          chunks,
+          name: name,
+          async,
+        };
+        references[name] = registerClientReference(() => {}, id, name);
+      }
+
+      return references;
+    }
+
+    return registerClientReference(() => {}, path, '*');
+  };
+
+  if (
+    moduleExports &&
+    typeof moduleExports === 'object' &&
+    typeof moduleExports.then === 'function'
+  ) {
+    return moduleExports.then(
+      asyncModuleExports =>
+        createClientReferencesForExports({
+          exports: asyncModuleExports,
+          async: true,
+        }),
+      () => {},
+    );
+  }
+
+  return createClientReferencesForExports({exports: moduleExports});
+};
+
+// This tests server to server references. There's another case of client to server references.
+exports.serverExports = function serverExports(moduleExports, blockOnChunk) {
+  const idx = '' + webpackModuleIdx++;
+  webpackServerModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+
+  const chunks = [];
+  if (blockOnChunk) {
+    const chunkId = webpackChunkIdx++;
+    webpackChunkMap[chunkId] = blockOnChunk;
+    chunks.push(chunkId);
+  }
+  webpackServerMap[path] = {
+    id: idx,
+    chunks: chunks,
+    name: '*',
+  };
+  // We only add this if this test is testing ESM compat.
+  if ('__esModule' in moduleExports) {
+    webpackServerMap[path + '#'] = {
+      id: idx,
+      chunks: [],
+      name: '',
+    };
+  }
+  if ('split' in moduleExports) {
+    // If we're testing module splitting, we encode this name in a separate module id.
+    const splitIdx = '' + webpackModuleIdx++;
+    webpackServerModules[splitIdx] = {
+      s: moduleExports.split,
+    };
+    webpackServerMap[path + '#split'] = {
+      id: splitIdx,
+      chunks: [],
+      name: 's',
+    };
+  }
+  const mod = new Module();
+  mod.exports = moduleExports;
+  nodeCompile.call(mod, '"use server"', idx);
+  return mod.exports;
+};
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js
new file mode 100644
index 00000000000..23825c4dcf7
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js
@@ -0,0 +1,279 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactDebugInfo,
+} from 'shared/ReactTypes';
+
+import type {
+  ImportMetadata,
+  ImportManifestEntry,
+} from '../shared/ReactFlightImportMetadata';
+import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  ID,
+  CHUNKS,
+  NAME,
+  isAsyncImport,
+} from '../shared/ReactFlightImportMetadata';
+
+import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  loadChunk,
+  addChunkDebugInfo,
+} from 'react-client/src/ReactFlightClientConfig';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+
+export type ServerConsumerModuleMap = null | {
+  [clientId: string]: {
+    [clientExportName: string]: ClientReferenceManifestEntry,
+  },
+};
+
+export type ServerManifest = {
+  [id: string]: ImportManifestEntry,
+};
+
+export type ServerReferenceId = string;
+
+export opaque type ClientReferenceManifestEntry = ImportManifestEntry;
+export opaque type ClientReferenceMetadata = ImportMetadata;
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = ClientReferenceMetadata;
+
+// The reason this function needs to defined here in this file instead of just
+// being exported directly from the WebpackDestination... file is because the
+// ClientReferenceMetadata is opaque and we can't unwrap it there.
+// This should get inlined and we could also just implement an unwrapping function
+// though that risks it getting used in places it shouldn't be. This is unfortunate
+// but currently it seems to be the best option we have.
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  prepareDestinationWithChunks(moduleLoading, metadata[CHUNKS], nonce);
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: ServerConsumerModuleMap,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  if (bundlerConfig) {
+    const moduleExports = bundlerConfig[metadata[ID]];
+    let resolvedModuleData = moduleExports && moduleExports[metadata[NAME]];
+    let name;
+    if (resolvedModuleData) {
+      // The potentially aliased name.
+      name = resolvedModuleData.name;
+    } else {
+      // If we don't have this specific name, we might have the full module.
+      resolvedModuleData = moduleExports && moduleExports['*'];
+      if (!resolvedModuleData) {
+        throw new Error(
+          'Could not find the module "' +
+            metadata[ID] +
+            '" in the React Server Consumer Manifest. ' +
+            'This is probably a bug in the React Server Components bundler.',
+        );
+      }
+      name = metadata[NAME];
+    }
+    // Note that resolvedModuleData.async may be set if this is an Async Module.
+    // For Client References we don't actually care because what matters is whether
+    // the consumer expects an unwrapped async module or just a raw Promise so it
+    // has to already know which one it wants.
+    // We could error if this is an Async Import but it's not an Async Module.
+    // However, we also support plain CJS exporting a top level Promise which is not
+    // an Async Module according to the bundle graph but is effectively the same.
+    if (isAsyncImport(metadata)) {
+      return [
+        resolvedModuleData.id,
+        resolvedModuleData.chunks,
+        name,
+        1 /* async */,
+      ];
+    } else {
+      return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+    }
+  }
+  return metadata;
+}
+
+export function resolveServerReference<T>(
+  bundlerConfig: ServerManifest,
+  id: ServerReferenceId,
+): ClientReference<T> {
+  let name = '';
+  let resolvedModuleData = bundlerConfig[id];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = id.lastIndexOf('#');
+    if (idx !== -1) {
+      name = id.slice(idx + 1);
+      resolvedModuleData = bundlerConfig[id.slice(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          id +
+          '" in the React Server Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+  }
+  if (resolvedModuleData.async) {
+    // If the module is marked as async in a Client Reference, we don't actually care.
+    // What matters is whether the consumer wants to unwrap it or not.
+    // For Server References, it is different because the consumer is completely internal
+    // to the bundler. So instead of passing it to each reference we can mark it in the
+    // manifest.
+    return [
+      resolvedModuleData.id,
+      resolvedModuleData.chunks,
+      name,
+      1 /* async */,
+    ];
+  }
+  return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+}
+
+// The chunk cache contains all the chunks we've preloaded so far.
+// If they're still pending they're a thenable. This map also exists
+// in Webpack but unfortunately it's not exposed so we have to
+// replicate it in user space. null means that it has already loaded.
+const chunkCache: Map<string, null | Promise<any>> = new Map();
+
+function requireAsyncModule(id: string): null | Thenable<any> {
+  // We've already loaded all the chunks. We can require the module.
+  const promise = __webpack_require__(id);
+  if (typeof promise.then !== 'function') {
+    // This wasn't a promise after all.
+    return null;
+  } else if (promise.status === 'fulfilled') {
+    // This module was already resolved earlier.
+    return null;
+  } else {
+    // Instrument the Promise to stash the result.
+    promise.then(
+      value => {
+        const fulfilledThenable: FulfilledThenable<mixed> = (promise: any);
+        fulfilledThenable.status = 'fulfilled';
+        fulfilledThenable.value = value;
+      },
+      reason => {
+        const rejectedThenable: RejectedThenable<mixed> = (promise: any);
+        rejectedThenable.status = 'rejected';
+        rejectedThenable.reason = reason;
+      },
+    );
+    return promise;
+  }
+}
+
+function ignoreReject() {
+  // We rely on rejected promises to be handled by another listener.
+}
+// Start preloading the modules since we might need them soon.
+// This function doesn't suspend.
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  const chunks = metadata[CHUNKS];
+  const promises = [];
+  let i = 0;
+  while (i < chunks.length) {
+    const chunkId = chunks[i++];
+    const chunkFilename = chunks[i++];
+    const entry = chunkCache.get(chunkId);
+    if (entry === undefined) {
+      const thenable = loadChunk(chunkId, chunkFilename);
+      promises.push(thenable);
+      // $FlowFixMe[method-unbinding]
+      const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
+      thenable.then(resolve, ignoreReject);
+      chunkCache.set(chunkId, thenable);
+    } else if (entry !== null) {
+      promises.push(entry);
+    }
+  }
+  if (isAsyncImport(metadata)) {
+    if (promises.length === 0) {
+      return requireAsyncModule(metadata[ID]);
+    } else {
+      return Promise.all(promises).then(() => {
+        return requireAsyncModule(metadata[ID]);
+      });
+    }
+  } else if (promises.length > 0) {
+    return Promise.all(promises);
+  } else {
+    return null;
+  }
+}
+
+// Actually require the module or suspend if it's not yet ready.
+// Increase priority if necessary.
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  let moduleExports = __webpack_require__(metadata[ID]);
+  if (isAsyncImport(metadata)) {
+    if (typeof moduleExports.then !== 'function') {
+      // This wasn't a promise after all.
+    } else if (moduleExports.status === 'fulfilled') {
+      // This Promise should've been instrumented by preloadModule.
+      moduleExports = moduleExports.value;
+    } else {
+      throw moduleExports.reason;
+    }
+  }
+  if (metadata[NAME] === '*') {
+    // This is a placeholder value that represents that the caller imported this
+    // as a CommonJS module as is.
+    return moduleExports;
+  }
+  if (metadata[NAME] === '') {
+    // This is a placeholder value that represents that the caller accessed the
+    // default property of this if it was an ESM interop module.
+    return moduleExports.__esModule ? moduleExports.default : moduleExports;
+  }
+  if (hasOwnProperty.call(moduleExports, metadata[NAME])) {
+    return moduleExports[metadata[NAME]];
+  }
+  return (undefined: any);
+}
+
+export function getModuleDebugInfo<T>(
+  metadata: ClientReference<T>,
+): null | ReactDebugInfo {
+  if (!__DEV__) {
+    return null;
+  }
+  const chunks = metadata[CHUNKS];
+  const debugInfo: ReactDebugInfo = [];
+  let i = 0;
+  while (i < chunks.length) {
+    const chunkId = chunks[i++];
+    const chunkFilename = chunks[i++];
+    addChunkDebugInfo(debugInfo, chunkId, chunkFilename);
+  }
+  return debugInfo;
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js
new file mode 100644
index 00000000000..7f49e9fd15a
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactDebugInfo,
+  ReactIOInfo,
+  ReactAsyncInfo,
+} from 'shared/ReactTypes';
+
+const chunkMap: Map<string, string> = new Map();
+
+/**
+ * We patch the chunk filename function in webpack to insert our own resolution
+ * of chunks that come from Flight and may not be known to the webpack runtime
+ */
+const webpackGetChunkFilename = __webpack_require__.u;
+__webpack_require__.u = function (chunkId: string) {
+  const flightChunk = chunkMap.get(chunkId);
+  if (flightChunk !== undefined) {
+    return flightChunk;
+  }
+  return webpackGetChunkFilename(chunkId);
+};
+
+export function loadChunk(chunkId: string, filename: string): Promise<mixed> {
+  chunkMap.set(chunkId, filename);
+  return __webpack_chunk_load__(chunkId);
+}
+
+// We cache ReactIOInfo across requests so that inner refreshes can dedupe with outer.
+const chunkIOInfoCache: Map<string, ReactIOInfo> = __DEV__
+  ? new Map()
+  : (null: any);
+
+export function addChunkDebugInfo(
+  target: ReactDebugInfo,
+  chunkId: string,
+  filename: string,
+): void {
+  if (!__DEV__) {
+    return;
+  }
+  let ioInfo = chunkIOInfoCache.get(chunkId);
+  if (ioInfo === undefined) {
+    const scriptFilename = __webpack_get_script_filename__(chunkId);
+    let href;
+    try {
+      // $FlowFixMe
+      href = new URL(scriptFilename, document.baseURI).href;
+    } catch (_) {
+      href = scriptFilename;
+    }
+    let start = -1;
+    let end = -1;
+    let byteSize = 0;
+    // $FlowFixMe[method-unbinding]
+    if (typeof performance.getEntriesByType === 'function') {
+      // We may be able to collect the start and end time of this resource from Performance Observer.
+      const resourceEntries = performance.getEntriesByType('resource');
+      for (let i = 0; i < resourceEntries.length; i++) {
+        const resourceEntry = resourceEntries[i];
+        if (resourceEntry.name === href) {
+          start = resourceEntry.startTime;
+          end = start + resourceEntry.duration;
+          // $FlowFixMe[prop-missing]
+          byteSize = (resourceEntry.transferSize: any) || 0;
+        }
+      }
+    }
+    const value = Promise.resolve(href);
+    // $FlowFixMe
+    value.status = 'fulfilled';
+    // $FlowFixMe
+    value.value = {
+      chunkId: chunkId,
+      href: href,
+      // Is there some more useful representation for the chunk?
+    };
+    // Create a fake stack frame that points to the beginning of the chunk. This is
+    // probably not source mapped so will link to the compiled source rather than
+    // any individual file that goes into the chunks.
+    const fakeStack = new Error('react-stack-top-frame');
+    if (fakeStack.stack.startsWith('Error: react-stack-top-frame')) {
+      // Looks like V8
+      fakeStack.stack =
+        'Error: react-stack-top-frame\n' +
+        // Add two frames since we always trim one off the top.
+        '    at Client Component Bundle (' +
+        href +
+        ':1:1)\n' +
+        '    at Client Component Bundle (' +
+        href +
+        ':1:1)';
+    } else {
+      // Looks like Firefox or Safari.
+      // Add two frames since we always trim one off the top.
+      fakeStack.stack =
+        'Client Component Bundle@' +
+        href +
+        ':1:1\n' +
+        'Client Component Bundle@' +
+        href +
+        ':1:1';
+    }
+    ioInfo = ({
+      name: 'script',
+      start: start,
+      end: end,
+      value: value,
+      debugStack: fakeStack,
+    }: ReactIOInfo);
+    if (byteSize > 0) {
+      // $FlowFixMe[cannot-write]
+      ioInfo.byteSize = byteSize;
+    }
+    chunkIOInfoCache.set(chunkId, ioInfo);
+  }
+  // We could dedupe the async info too but conceptually each request is its own await.
+  const asyncInfo: ReactAsyncInfo = {
+    awaited: ioInfo,
+  };
+  target.push(asyncInfo);
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js
new file mode 100644
index 00000000000..7dcbdf3fb2b
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactDebugInfo} from 'shared/ReactTypes';
+
+export function loadChunk(chunkId: string, filename: string): Promise<mixed> {
+  return __webpack_chunk_load__(chunkId);
+}
+
+export function addChunkDebugInfo(
+  target: ReactDebugInfo,
+  chunkId: string,
+  filename: string,
+): void {
+  // We don't emit any debug info on the server since we assume the loading
+  // of the bundle is insignificant on the server.
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser.js
new file mode 100644
index 00000000000..60b9e87dbea
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ModuleLoading = null;
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  chunks: mixed,
+  nonce: ?string,
+) {
+  // In the browser we don't need to prepare our destination since the browser is the Destination
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer.js
new file mode 100644
index 00000000000..f5793fdab43
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {preinitScriptForSSR} from 'react-client/src/ReactFlightClientConfig';
+
+export type ModuleLoading = null | {
+  prefix: string,
+  crossOrigin?: 'use-credentials' | '',
+};
+
+export function prepareDestinationWithChunks(
+  moduleLoading: ModuleLoading,
+  // Chunks are double-indexed [..., idx, filenamex, idy, filenamey, ...]
+  chunks: Array<string>,
+  nonce: ?string,
+) {
+  if (moduleLoading !== null) {
+    for (let i = 1; i < chunks.length; i += 2) {
+      preinitScriptForSSR(
+        moduleLoading.prefix + chunks[i],
+        nonce,
+        moduleLoading.crossOrigin,
+      );
+    }
+  }
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
new file mode 100644
index 00000000000..0bf61500198
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  DebugChannelCallback,
+  FindSourceMapURLCallback,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  processStringChunk,
+  close,
+  injectIntoDevTools,
+} from 'react-client/src/ReactFlightClient';
+
+import {processReply} from 'react-client/src/ReactFlightReplyClient';
+
+export {
+  createServerReference,
+  registerServerReference,
+} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type CallServerCallback = <A, T>(string, args: A) => Promise<T>;
+
+export type Options = {
+  callServer?: CallServerCallback,
+  debugChannel?: {writable?: WritableStream, readable?: ReadableStream, ...},
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+};
+
+function createDebugCallbackFromWritableStream(
+  debugWritable: WritableStream,
+): DebugChannelCallback {
+  const textEncoder = new TextEncoder();
+  const writer = debugWritable.getWriter();
+  return message => {
+    if (message === '') {
+      writer.close();
+    } else {
+      // Note: It's important that this function doesn't close over the Response object or it can't be GC:ed.
+      // Therefore, we can't report errors from this write back to the Response object.
+      if (__DEV__) {
+        writer.write(textEncoder.encode(message + '\n')).catch(console.error);
+      }
+    }
+  };
+}
+
+function createResponseFromOptions(options: void | Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback:
+            options.debugChannel.writable !== undefined
+              ? createDebugCallbackFromWritableStream(
+                  options.debugChannel.writable,
+                )
+              : null,
+        }
+      : undefined;
+
+  return createResponse(
+    null,
+    null,
+    null,
+    options && options.callServer ? options.callServer : undefined,
+    undefined, // encodeFormAction
+    undefined, // nonce
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromUniversalStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+): void {
+  // This is the same as startReadingFromStream except this allows WebSocketStreams which
+  // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
+  // always allow streams with variable chunk types.
+  const streamState = createStreamState(response, stream);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    if (value instanceof ArrayBuffer) {
+      // WebSockets can produce ArrayBuffer values in ReadableStreams.
+      processBinaryChunk(response, streamState, new Uint8Array(value));
+    } else if (typeof value === 'string') {
+      // WebSockets can produce string values in ReadableStreams.
+      processStringChunk(response, streamState, value);
+    } else {
+      processBinaryChunk(response, streamState, value);
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromUniversalStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+export {createFromFetch, createFromReadableStream, encodeReply};
+
+if (__DEV__) {
+  injectIntoDevTools();
+}
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
new file mode 100644
index 00000000000..2cf668f679d
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
@@ -0,0 +1,255 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  FindSourceMapURLCallback,
+  Response as FlightResponse,
+} from 'react-client/src/ReactFlightClient';
+
+import type {ReactServerValue} from 'react-client/src/ReactFlightReplyClient';
+
+import type {
+  ServerConsumerModuleMap,
+  ModuleLoading,
+  ServerManifest,
+} from 'react-client/src/ReactFlightClientConfig';
+
+type ServerConsumerManifest = {
+  moduleMap: ServerConsumerModuleMap,
+  moduleLoading: ModuleLoading,
+  serverModuleMap: null | ServerManifest,
+};
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+import {
+  processReply,
+  createServerReference as createServerReferenceImpl,
+} from 'react-client/src/ReactFlightReplyClient';
+
+export {registerServerReference} from 'react-client/src/ReactFlightReplyClient';
+
+import type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+export function createServerReference<A: Iterable<any>, T>(
+  id: any,
+  callServer: any,
+): (...A) => Promise<T> {
+  return createServerReferenceImpl(id, noServerCall);
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  serverConsumerManifest: ServerConsumerManifest,
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Edge client we only support a single-direction debug channel.
+  debugChannel?: {readable?: ReadableStream, ...},
+};
+
+function createResponseFromOptions(options: Options) {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {
+          hasReadable: options.debugChannel.readable !== undefined,
+          callback: null,
+        }
+      : undefined;
+
+  return createResponse(
+    options.serverConsumerManifest.moduleMap,
+    options.serverConsumerManifest.serverModuleMap,
+    options.serverConsumerManifest.moduleLoading,
+    noServerCall,
+    options.encodeFormAction,
+    typeof options.nonce === 'string' ? options.nonce : undefined,
+    options && options.temporaryReferences
+      ? options.temporaryReferences
+      : undefined,
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+}
+
+function startReadingFromStream(
+  response: FlightResponse,
+  stream: ReadableStream,
+  onDone: () => void,
+  debugValue: mixed,
+): void {
+  const streamState = createStreamState(response, debugValue);
+  const reader = stream.getReader();
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    if (done) {
+      return onDone();
+    }
+    const buffer: Uint8Array = (value: any);
+    processBinaryChunk(response, streamState, buffer);
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    reportGlobalError(response, e);
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone, stream);
+  } else {
+    startReadingFromStream(
+      response,
+      stream,
+      close.bind(null, response),
+      stream,
+    );
+  }
+
+  return getRoot(response);
+}
+
+function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options: Options,
+): Thenable<T> {
+  const response: FlightResponse = createResponseFromOptions(options);
+  promiseForResponse.then(
+    function (r) {
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone, r);
+      } else {
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+          r,
+        );
+      }
+    },
+    function (e) {
+      reportGlobalError(response, e);
+    },
+  );
+  return getRoot(response);
+}
+
+function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<
+  string | URLSearchParams | FormData,
+> /* We don't use URLSearchParams yet but maybe */ {
+  return new Promise((resolve, reject) => {
+    const abort = processReply(
+      value,
+      '',
+      options && options.temporaryReferences
+        ? options.temporaryReferences
+        : undefined,
+      resolve,
+      reject,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort((signal: any).reason);
+      } else {
+        const listener = () => {
+          abort((signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+  });
+}
+
+export {createFromFetch, createFromReadableStream, encodeReply};
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
new file mode 100644
index 00000000000..8863b1bf1c6
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactCustomFormAction} from 'shared/ReactTypes.js';
+
+import type {
+  DebugChannel,
+  FindSourceMapURLCallback,
+  Response,
+} from 'react-client/src/ReactFlightClient';
+
+import type {
+  ServerConsumerModuleMap,
+  ModuleLoading,
+  ServerManifest,
+} from 'react-client/src/ReactFlightClientConfig';
+
+type ServerConsumerManifest = {
+  moduleMap: ServerConsumerModuleMap,
+  moduleLoading: ModuleLoading,
+  serverModuleMap: null | ServerManifest,
+};
+
+import type {Readable} from 'stream';
+
+import {
+  createResponse,
+  createStreamState,
+  getRoot,
+  reportGlobalError,
+  processStringChunk,
+  processBinaryChunk,
+  close,
+} from 'react-client/src/ReactFlightClient';
+
+export * from './ReactFlightDOMClientEdge';
+
+function noServerCall() {
+  throw new Error(
+    'Server Functions cannot be called during initial render. ' +
+      'This would create a fetch waterfall. Try to use a Server Component ' +
+      'to pass data to Client Components instead.',
+  );
+}
+
+type EncodeFormActionCallback = <A>(
+  id: any,
+  args: Promise<A>,
+) => ReactCustomFormAction;
+
+export type Options = {
+  nonce?: string,
+  encodeFormAction?: EncodeFormActionCallback,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
+};
+
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  onEnd: () => void,
+): void {
+  const streamState = createStreamState(response, stream);
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', onEnd);
+}
+
+function createFromNodeStream<T>(
+  stream: Readable,
+  serverConsumerManifest: ServerConsumerManifest,
+  options?: Options,
+): Thenable<T> {
+  const debugChannel: void | DebugChannel =
+    __DEV__ && options && options.debugChannel !== undefined
+      ? {hasReadable: true, callback: null}
+      : undefined;
+
+  const response: Response = createResponse(
+    serverConsumerManifest.moduleMap,
+    serverConsumerManifest.serverModuleMap,
+    serverConsumerManifest.moduleLoading,
+    noServerCall,
+    options ? options.encodeFormAction : undefined,
+    options && typeof options.nonce === 'string' ? options.nonce : undefined,
+    undefined, // TODO: If encodeReply is supported, this should support temporaryReferences
+    __DEV__ && options && options.findSourceMapURL
+      ? options.findSourceMapURL
+      : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
+    __DEV__ && options && options.environmentName
+      ? options.environmentName
+      : undefined,
+    __DEV__ && options && options.startTime != null
+      ? options.startTime
+      : undefined,
+    __DEV__ && options && options.endTime != null ? options.endTime : undefined,
+    debugChannel,
+  );
+
+  if (__DEV__ && options && options.debugChannel) {
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
+  } else {
+    startReadingFromStream(response, stream, close.bind(null, response));
+  }
+
+  return getRoot(response);
+}
+
+export {createFromNodeStream};
diff --git a/packages/react-server-dom-webpack/src/client/react-flight-dom-client.browser.js b/packages/react-server-dom-webpack/src/client/react-flight-dom-client.browser.js
new file mode 100644
index 00000000000..a3f15d0116c
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/react-flight-dom-client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-webpack/src/client/react-flight-dom-client.edge.js b/packages/react-server-dom-webpack/src/client/react-flight-dom-client.edge.js
new file mode 100644
index 00000000000..14a8876953b
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/react-flight-dom-client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientEdge';
diff --git a/packages/react-server-dom-webpack/src/client/react-flight-dom-client.node.js b/packages/react-server-dom-webpack/src/client/react-flight-dom-client.node.js
new file mode 100644
index 00000000000..8eb9daa35b6
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/client/react-flight-dom-client.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
new file mode 100644
index 00000000000..08192fd1e52
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Thenable} from 'shared/ReactTypes';
+import type {ClientManifest} from './ReactFlightServerConfigWebpackBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  close,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightWebpackReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigWeb';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type Options = {
+  debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: TemporaryReferenceSet,
+  onError?: (error: mixed) => void,
+};
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, controller);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      webpackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
new file mode 100644
index 00000000000..73fc74d4fa4
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Thenable} from 'shared/ReactTypes';
+import type {ClientManifest} from './ReactFlightServerConfigWebpackBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  close,
+  getRoot,
+  reportGlobalError,
+  resolveField,
+  resolveFile,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightWebpackReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigWeb';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+type Options = {
+  debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: TemporaryReferenceSet,
+  onError?: (error: mixed) => void,
+};
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, controller);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      webpackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
new file mode 100644
index 00000000000..5e73d8eb3a5
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
@@ -0,0 +1,695 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Request,
+  ReactClientValue,
+} from 'react-server/src/ReactFlightServer';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
+import type {ClientManifest} from './ReactFlightServerConfigWebpackBundler';
+import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
+import type {Busboy} from 'busboy';
+import type {Writable} from 'stream';
+import type {Thenable} from 'shared/ReactTypes';
+
+import type {Duplex} from 'stream';
+
+import {Readable} from 'stream';
+
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import {
+  createRequest,
+  createPrerenderRequest,
+  startWork,
+  startFlowing,
+  startFlowingDebug,
+  stopFlowing,
+  abort,
+  resolveDebugMessage,
+  closeDebugChannel,
+} from 'react-server/src/ReactFlightServer';
+
+import {
+  createResponse,
+  reportGlobalError,
+  close,
+  resolveField,
+  resolveFile,
+  resolveFileInfo,
+  resolveFileChunk,
+  resolveFileComplete,
+  getRoot,
+} from 'react-server/src/ReactFlightReplyServer';
+
+import {
+  decodeAction,
+  decodeFormState,
+} from 'react-server/src/ReactFlightActionServer';
+
+export {
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+} from '../ReactFlightWebpackReferences';
+
+import {
+  createStringDecoder,
+  readPartialStringChunk,
+  readFinalStringChunk,
+} from 'react-client/src/ReactFlightClientStreamConfigNode';
+
+import {textEncoder} from 'react-server/src/ReactServerStreamConfigNode';
+
+import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export {createTemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
+
+export type {TemporaryReferenceSet};
+
+function createDrainHandler(destination: Destination, request: Request) {
+  return () => startFlowing(request, destination);
+}
+
+function createCancelHandler(request: Request, reason: string) {
+  return () => {
+    stopFlowing(request);
+    abort(request, new Error(reason));
+  };
+}
+
+function startReadingFromDebugChannelReadable(
+  request: Request,
+  stream: Readable | WebSocket,
+): void {
+  const stringDecoder = createStringDecoder();
+  let lastWasPartial = false;
+  let stringBuffer = '';
+  function onData(chunk: string | Uint8Array) {
+    if (typeof chunk === 'string') {
+      if (lastWasPartial) {
+        stringBuffer += readFinalStringChunk(stringDecoder, new Uint8Array(0));
+        lastWasPartial = false;
+      }
+      stringBuffer += chunk;
+    } else {
+      const buffer: Uint8Array = (chunk: any);
+      stringBuffer += readPartialStringChunk(stringDecoder, buffer);
+      lastWasPartial = true;
+    }
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+  }
+  function onError(error: mixed) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: error,
+      }),
+    );
+  }
+  function onClose() {
+    closeDebugChannel(request);
+  }
+  if (
+    // $FlowFixMe[method-unbinding]
+    typeof stream.addEventListener === 'function' &&
+    // $FlowFixMe[method-unbinding]
+    typeof stream.binaryType === 'string'
+  ) {
+    const ws: WebSocket = (stream: any);
+    ws.binaryType = 'arraybuffer';
+    ws.addEventListener('message', event => {
+      // $FlowFixMe
+      onData(event.data);
+    });
+    ws.addEventListener('error', event => {
+      // $FlowFixMe
+      onError(event.error);
+    });
+    ws.addEventListener('close', onClose);
+  } else {
+    const readable: Readable = (stream: any);
+    readable.on('data', onData);
+    readable.on('error', onError);
+    readable.on('end', onClose);
+  }
+}
+
+type Options = {
+  debugChannel?: Readable | Writable | Duplex | WebSocket,
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+};
+
+type PipeableStream = {
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+function renderToPipeableStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): PipeableStream {
+  const debugChannel = __DEV__ && options ? options.debugChannel : undefined;
+  const debugChannelReadable: void | Readable | WebSocket =
+    __DEV__ &&
+    debugChannel !== undefined &&
+    // $FlowFixMe[method-unbinding]
+    (typeof debugChannel.read === 'function' ||
+      typeof debugChannel.readyState === 'number')
+      ? (debugChannel: any)
+      : undefined;
+  const debugChannelWritable: void | Writable =
+    __DEV__ && debugChannel !== undefined
+      ? // $FlowFixMe[method-unbinding]
+        typeof debugChannel.write === 'function'
+        ? (debugChannel: any)
+        : // $FlowFixMe[method-unbinding]
+          typeof debugChannel.send === 'function'
+          ? createFakeWritableFromWebSocket((debugChannel: any))
+          : undefined
+      : undefined;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  let hasStartedFlowing = false;
+  startWork(request);
+  if (debugChannelWritable !== undefined) {
+    startFlowingDebug(request, debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadable(request, debugChannelReadable);
+  }
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      destination.on(
+        'error',
+        createCancelHandler(
+          request,
+          'The destination stream errored while writing data.',
+        ),
+      );
+      // We don't close until the debug channel closes.
+      if (!__DEV__ || debugChannelReadable === undefined) {
+        destination.on(
+          'close',
+          createCancelHandler(request, 'The destination stream closed early.'),
+        );
+      }
+      return destination;
+    },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
+  };
+}
+
+function createFakeWritableFromWebSocket(webSocket: WebSocket): Writable {
+  return ({
+    write(chunk: string | Uint8Array) {
+      webSocket.send((chunk: any));
+      return true;
+    },
+    end() {
+      webSocket.close();
+    },
+    destroy(reason) {
+      if (typeof reason === 'object' && reason !== null) {
+        reason = reason.message;
+      }
+      if (typeof reason === 'string') {
+        webSocket.close(1011, reason);
+      } else {
+        webSocket.close(1011);
+      }
+    },
+  }: any);
+}
+
+function createFakeWritableFromReadableStreamController(
+  controller: ReadableStreamController,
+): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      if (typeof chunk === 'string') {
+        chunk = textEncoder.encode(chunk);
+      }
+      controller.enqueue(chunk);
+      // in web streams there is no backpressure so we can always write more
+      return true;
+    },
+    end() {
+      controller.close();
+    },
+    destroy(error) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof controller.error === 'function') {
+        // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+        controller.error(error);
+      } else {
+        controller.close();
+      }
+    },
+  }: any);
+}
+
+function startReadingFromDebugChannelReadableStream(
+  request: Request,
+  stream: ReadableStream,
+): void {
+  const reader = stream.getReader();
+  const stringDecoder = createStringDecoder();
+  let stringBuffer = '';
+  function progress({
+    done,
+    value,
+  }: {
+    done: boolean,
+    value: ?any,
+    ...
+  }): void | Promise<void> {
+    const buffer: Uint8Array = (value: any);
+    stringBuffer += done
+      ? readFinalStringChunk(stringDecoder, new Uint8Array(0))
+      : readPartialStringChunk(stringDecoder, buffer);
+    const messages = stringBuffer.split('\n');
+    for (let i = 0; i < messages.length - 1; i++) {
+      resolveDebugMessage(request, messages[i]);
+    }
+    stringBuffer = messages[messages.length - 1];
+    if (done) {
+      closeDebugChannel(request);
+      return;
+    }
+    return reader.read().then(progress).catch(error);
+  }
+  function error(e: any) {
+    abort(
+      request,
+      new Error('Lost connection to the Debug Channel.', {
+        cause: e,
+      }),
+    );
+  }
+  reader.read().then(progress).catch(error);
+}
+
+function renderToReadableStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Omit<Options, 'debugChannel'> & {
+    debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...},
+    signal?: AbortSignal,
+  },
+): ReadableStream {
+  const debugChannelReadable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.readable
+      : undefined;
+  const debugChannelWritable =
+    __DEV__ && options && options.debugChannel
+      ? options.debugChannel.writable
+      : undefined;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+    debugChannelReadable !== undefined,
+  );
+  if (options && options.signal) {
+    const signal = options.signal;
+    if (signal.aborted) {
+      abort(request, (signal: any).reason);
+    } else {
+      const listener = () => {
+        abort(request, (signal: any).reason);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+  }
+  if (debugChannelWritable !== undefined) {
+    let debugWritable: Writable;
+    const debugStream = new ReadableStream(
+      {
+        type: 'bytes',
+        start: (controller): ?Promise<void> => {
+          debugWritable =
+            createFakeWritableFromReadableStreamController(controller);
+        },
+        pull: (controller): ?Promise<void> => {
+          startFlowingDebug(request, debugWritable);
+        },
+      },
+      // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+      {highWaterMark: 0},
+    );
+    debugStream.pipeTo(debugChannelWritable);
+  }
+  if (debugChannelReadable !== undefined) {
+    startReadingFromDebugChannelReadableStream(request, debugChannelReadable);
+  }
+  let writable: Writable;
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        writable = createFakeWritableFromReadableStreamController(controller);
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, writable);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+function createFakeWritableFromNodeReadable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk: string | Uint8Array) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritableFromNodeReadable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createPrerenderRequest(
+      model,
+      webpackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function prerender(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options & {
+    signal?: AbortSignal,
+  },
+): Promise<{
+  prelude: ReadableStream,
+}> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      let writable: Writable;
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            writable =
+              createFakeWritableFromReadableStreamController(controller);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, writable);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      webpackMap,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      false,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        const reason = (signal: any).reason;
+        abort(request, reason);
+      } else {
+        const listener = () => {
+          const reason = (signal: any).reason;
+          abort(request, reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
+function decodeReplyFromBusboy<T>(
+  busboyStream: Busboy,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+  let pendingFiles = 0;
+  const queuedFields: Array<string> = [];
+  busboyStream.on('field', (name, value) => {
+    if (pendingFiles > 0) {
+      // Because the 'end' event fires two microtasks after the next 'field'
+      // we would resolve files and fields out of order. To handle this properly
+      // we queue any fields we receive until the previous file is done.
+      queuedFields.push(name, value);
+    } else {
+      try {
+        resolveField(response, name, value);
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    }
+  });
+  busboyStream.on('file', (name, value, {filename, encoding, mimeType}) => {
+    if (encoding.toLowerCase() === 'base64') {
+      busboyStream.destroy(
+        new Error(
+          "React doesn't accept base64 encoded file uploads because we don't expect " +
+            "form data passed from a browser to ever encode data that way. If that's " +
+            'the wrong assumption, we can easily fix it.',
+        ),
+      );
+      return;
+    }
+    pendingFiles++;
+    const file = resolveFileInfo(response, name, filename, mimeType);
+    value.on('data', chunk => {
+      resolveFileChunk(response, file, chunk);
+    });
+    value.on('end', () => {
+      try {
+        resolveFileComplete(response, name, file);
+        pendingFiles--;
+        if (pendingFiles === 0) {
+          // Release any queued fields
+          for (let i = 0; i < queuedFields.length; i += 2) {
+            resolveField(response, queuedFields[i], queuedFields[i + 1]);
+          }
+          queuedFields.length = 0;
+        }
+      } catch (error) {
+        busboyStream.destroy(error);
+      }
+    });
+  });
+  busboyStream.on('finish', () => {
+    close(response);
+  });
+  busboyStream.on('error', err => {
+    reportGlobalError(
+      response,
+      // $FlowFixMe[incompatible-call] types Error and mixed are incompatible
+      err,
+    );
+  });
+  return getRoot(response);
+}
+
+function decodeReply<T>(
+  body: string | FormData,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  if (typeof body === 'string') {
+    const form = new FormData();
+    form.append('0', body);
+    body = form;
+  }
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+    body,
+  );
+  const root = getRoot<T>(response);
+  close(response);
+  return root;
+}
+
+function decodeReplyFromAsyncIterable<T>(
+  iterable: AsyncIterable<[string, string | File]>,
+  webpackMap: ServerManifest,
+  options?: {temporaryReferences?: TemporaryReferenceSet},
+): Thenable<T> {
+  const iterator: AsyncIterator<[string, string | File]> =
+    iterable[ASYNC_ITERATOR]();
+
+  const response = createResponse(
+    webpackMap,
+    '',
+    options ? options.temporaryReferences : undefined,
+  );
+
+  function progress(
+    entry:
+      | {done: false, +value: [string, string | File], ...}
+      | {done: true, +value: void, ...},
+  ) {
+    if (entry.done) {
+      close(response);
+    } else {
+      const [name, value] = entry.value;
+      if (typeof value === 'string') {
+        resolveField(response, name, value);
+      } else {
+        resolveFile(response, name, value);
+      }
+      iterator.next().then(progress, error);
+    }
+  }
+  function error(reason: Error) {
+    reportGlobalError(response, reason);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  iterator.next().then(progress, error);
+
+  return getRoot(response);
+}
+
+export {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.js b/packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.js
new file mode 100644
index 00000000000..f9d9bf4ea91
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactClientValue} from 'react-server/src/ReactFlightServer';
+import type {
+  ImportMetadata,
+  ImportManifestEntry,
+} from '../shared/ReactFlightImportMetadata';
+
+import type {
+  ClientReference,
+  ServerReference,
+} from '../ReactFlightWebpackReferences';
+
+export type {ClientReference, ServerReference};
+
+export type ClientManifest = {
+  [id: string]: ClientReferenceManifestEntry,
+};
+
+export type ServerReferenceId = string;
+
+export type ClientReferenceMetadata = ImportMetadata;
+export opaque type ClientReferenceManifestEntry = ImportManifestEntry;
+
+export type ClientReferenceKey = string;
+
+export {
+  isClientReference,
+  isServerReference,
+} from '../ReactFlightWebpackReferences';
+
+export function getClientReferenceKey(
+  reference: ClientReference<any>,
+): ClientReferenceKey {
+  return reference.$$async ? reference.$$id + '#async' : reference.$$id;
+}
+
+export function resolveClientReferenceMetadata<T>(
+  config: ClientManifest,
+  clientReference: ClientReference<T>,
+): ClientReferenceMetadata {
+  const modulePath = clientReference.$$id;
+  let name = '';
+  let resolvedModuleData = config[modulePath];
+  if (resolvedModuleData) {
+    // The potentially aliased name.
+    name = resolvedModuleData.name;
+  } else {
+    // We didn't find this specific export name but we might have the * export
+    // which contains this name as well.
+    // TODO: It's unfortunate that we now have to parse this string. We should
+    // probably go back to encoding path and name separately on the client reference.
+    const idx = modulePath.lastIndexOf('#');
+    if (idx !== -1) {
+      name = modulePath.slice(idx + 1);
+      resolvedModuleData = config[modulePath.slice(0, idx)];
+    }
+    if (!resolvedModuleData) {
+      throw new Error(
+        'Could not find the module "' +
+          modulePath +
+          '" in the React Client Manifest. ' +
+          'This is probably a bug in the React Server Components bundler.',
+      );
+    }
+  }
+  if (resolvedModuleData.async === true && clientReference.$$async === true) {
+    throw new Error(
+      'The module "' +
+        modulePath +
+        '" is marked as an async ESM module but was loaded as a CJS proxy. ' +
+        'This is probably a bug in the React Server Components bundler.',
+    );
+  }
+  if (resolvedModuleData.async === true || clientReference.$$async === true) {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];
+  } else {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+  }
+}
+
+export function getServerReferenceId<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): ServerReferenceId {
+  return serverReference.$$id;
+}
+
+export function getServerReferenceBoundArguments<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): null | Array<ReactClientValue> {
+  return serverReference.$$bound;
+}
+
+export function getServerReferenceLocation<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): void | Error {
+  return serverReference.$$location;
+}
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
new file mode 100644
index 00000000000..d8373ec551b
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
new file mode 100644
index 00000000000..e103ff76191
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000..3c2b9e512c7
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  renderToReadableStream,
+  renderToPipeableStream,
+  prerender,
+  prerenderToNodeStream,
+  decodeReply,
+  decodeReplyFromBusboy,
+  decodeReplyFromAsyncIterable,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-webpack/src/shared/ReactFlightImportMetadata.js b/packages/react-server-dom-webpack/src/shared/ReactFlightImportMetadata.js
new file mode 100644
index 00000000000..29b012f6052
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/shared/ReactFlightImportMetadata.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ImportManifestEntry = {
+  id: string,
+  // chunks is a double indexed array of chunkId / chunkFilename pairs
+  chunks: Array<string>,
+  name: string,
+  async?: boolean,
+};
+
+// This is the parsed shape of the wire format which is why it is
+// condensed to only the essentialy information
+export type ImportMetadata =
+  | [
+      /* id */ string,
+      /* chunks id/filename pairs, double indexed */ Array<string>,
+      /* name */ string,
+      /* async */ 1,
+    ]
+  | [
+      /* id */ string,
+      /* chunks id/filename pairs, double indexed */ Array<string>,
+      /* name */ string,
+    ];
+
+export const ID = 0;
+export const CHUNKS = 1;
+export const NAME = 2;
+// export const ASYNC = 3;
+
+// This logic is correct because currently only include the 4th tuple member
+// when the module is async. If that changes we will need to actually assert
+// the value is true. We don't index into the 4th slot because flow does not
+// like the potential out of bounds access
+export function isAsyncImport(metadata: ImportMetadata): boolean {
+  return metadata.length === 4;
+}
diff --git a/packages/react-server-dom-webpack/static.browser.js b/packages/react-server-dom-webpack/static.browser.js
new file mode 100644
index 00000000000..25897891632
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerender} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-webpack/static.edge.js b/packages/react-server-dom-webpack/static.edge.js
new file mode 100644
index 00000000000..a39d54c73f5
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {prerender} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-webpack/static.js b/packages/react-server-dom-webpack/static.js
new file mode 100644
index 00000000000..83d8b8a017f
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-webpack/static.node.js b/packages/react-server-dom-webpack/static.node.js
new file mode 100644
index 00000000000..78e70a1cf4c
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.node.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  prerender,
+  prerenderToNodeStream,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server/README.md b/packages/react-server/README.md
new file mode 100644
index 00000000000..e88807a267f
--- /dev/null
+++ b/packages/react-server/README.md
@@ -0,0 +1,253 @@
+# 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.**
+
+## Usage
+
+`react-server` is a package implementing various Server Rendering capabilities. The two implementation are codenamed `Fizz` and `Flight`.
+
+`Fizz` is a renderer for Server Side Rendering React. The same code that runs in the client (browser or native) is run on the server to produce an initial view to send to the client before it has to download and run React and all the user code to produce that view on the client.
+
+`Flight` is a renderer for React Server Components. These are components that never run on a client. The output of a React Server Component render can be a React tree that can run on the client or be SSR'd using `Fizz`.
+
+## `Fizz` Usage
+
+This part of the Readme is not fully developed yet
+
+## `Flight` Usage
+
+To use `react-server` for React Server Components you must set up an implementation package alongside `react-client`. Use an existing implementation such as `react-server-dom-webpack` as a guide.
+
+You might implement a render function like
+
+```js
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  stopFlowing,
+  abort,
+} from 'react-server/src/ReactFlightServer'
+
+function render(
+  model: ReactClientValue,
+  clientManifest: ClientManifest,
+  options?: Options,
+): ReadableStream {
+  const request = createRequest(
+    model,
+    clientManifest,
+    options ? options.onError : undefined,
+    options ? options.identifierPrefix : undefined,
+    options ? options.temporaryReferences : undefined,
+    __DEV__ && options ? options.environmentName : undefined,
+    __DEV__ && options ? options.filterStackFrame : undefined,
+  );
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start: (controller): ?Promise<void> => {
+        startWork(request);
+      },
+      pull: (controller): ?Promise<void> => {
+        startFlowing(request, controller);
+      },
+      cancel: (reason): ?Promise<void> => {
+        stopFlowing(request);
+        abort(request, reason);
+      },
+    },
+    {highWaterMark: 0},
+  );
+  return stream;
+}
+
+```
+
+### `Flight` Rendering
+
+`react-server` implements the React Server Components rendering implementation. React Server Components is in essence a general purpose serialization and deserialization capability with support for some built-in React primitives such as Suspense and Lazy.
+
+The renderable type is a superset of `structuredClone()`. In addition to all the cloneable types `react-server` can render Symbols, Promises, Iterators and Iterables, async Iterators and Iterables.
+
+Here are some examples of what can be rendered
+```js
+// primitives
+createResponse(123, ...)
+
+// objects and Arrays
+createResponse({ messages: ['hello', 'react'] }, ...)
+
+// Maps, Sets, and more
+createResponse({ m: Map(['k', 'v'])}, ...)
+```
+
+Additionally React built ins can be rendered including Function Components
+
+Function Component are called and the return value can be any renderable type. Since `react-server` supports Promises, Function Components can be async functions.
+
+Here are some examples of what can be rendered
+```js
+
+async function App({ children }) {
+  return children
+}
+
+createResponse(<App ><Children /></App>, ...)
+```
+
+Finally, There are two types of references in `react-server` that can be rendered
+
+#### Client References
+When a React Server Component framework bundles an application and encounters a `"use client"` directive it must resister exported members with `"registerClientReference"` which will encode the necessary information for `Flight` to interpret the export as a reference to be loaded on the client rather than a direct dependency on the Server module graph.
+
+When rendering a client reference `Flight` will encode necessary information in the serialized output to describe how to load the code which represents the client module.
+
+While it is common for client references to be components they can be any value.
+
+
+```js
+'use client'
+
+export function alert(message) {
+  alert(message)
+}
+```
+
+```js
+'use client'
+
+export function ClientComp({ onClick, message }) {
+  return <button onClick={onClick}>Alert</button>
+}
+```
+
+```js
+
+// client references don't have to just be components, anything can be 
+// a reference, in this case we're importing a function that will be
+// passed to the ClientComp component
+import { alert } from '...'
+import { ClientComp } from '...'
+
+async function App({ children }) {
+  return children
+}
+
+createResponse(
+  <App >
+    <ClientComp onClick={alert} message={"hello world"} />
+  </App>,
+...)
+```
+
+#### Server References
+Similarly When a React Server Component framework bundles an application and encounters a `"use server"` directive in a file or in a function body, including closures, it must implement that function as as a server entrypoint that can be called from the client. To make `Flight` aware that a function is a Server Reference the function should be registered with `registerServerReference()`.
+
+```js
+
+async function logOnServer(message) {
+  "use server"
+  console.log(message)
+}
+
+async function App({ children }) {
+  // logOnServer can be used in a Server Component
+  logOnServer('used from server')
+  return children
+}
+
+createResponse(
+  <App >
+    <ClientComp onClick={logOnServer} message={"used from client"} />
+  </App>,
+...)
+```
+
+### `Flight` Prerendering
+
+When rendering with `react-server` there are two broad contexts when this might happen. Realtime when responding to a user request and ahead of time when prerendering a page that can later be used more than once.
+
+While the core rendering implementation is the same in both cases there are subtle differences we can adopt that take advantage of the context. For instance while rendering in response to a real user request we want to stream eagerly if the consumer is requesting information. This allows us to stream content to the consumer as it becomes available but might have implications for the stability of the serialized format. When prerendering we assume there is not urgency to producing a partial result as quickly as possible so we can alter the internal implementation take advantage of this. To implement a prerender API use `createPrerenderRequest` in place of `createRequest`.
+
+One key semantic change prerendering has with rendering is how errors are handled. When rendering an error is embedded into the output and must be handled by the consumer such as an SSR render or on the client. However with prerendering there is an expectation that if the prerender errors then the entire prerender will be discarded or it will be used but the consumer will attempt to recover that error by asking for a dynamic render. This is analogous to how errors during SSR aren't immediately handled they are actually encoded as requests for client recovery. The error only is observed if the retry on the client actually fails. To account for this prerenders simply omit parts of the model that errored. you can use the `onError` argument in `createPrerenderRequest` to observe if an error occurred and users of your `prerender` implementation can choose whether to abandon the prerender or implement dynamic recovery when an error occurs.
+
+Existing implementations only return the stream containing the output of the prerender once it has completed. In the future we may introduce a `resume` API similar to the one that exists for `Fizz`. In anticipation of such an API it is expected that implementations of `prerender` return the type `Promise<{ prelude: <Host Appropriate Stream Type> }>`
+
+```js
+function prerender(
+  model: ReactClientValue,
+  clientManifest: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            startWork(request);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createPrerenderRequest(
+      model,
+      clientManifest,
+      onAllReady,
+      onFatalError,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+    );
+    startWork(request);
+  });
+}
+```
+
+## `Flight` Reference (Incomplete)
+
+### `createRequest(model, bundlerConfig, ...options): Request`
+
+The signature of this method changes as we evolve the project so this Readme will omit the specific signature but generally this function will produce a Request that represents the rendering of some React application (the model) along with implementation specific bundler configuration. Typically this configuration will tell the `Flight` implementation how to encode Client References in the serialized output
+
+The `RequestInstance` represents the render.
+
+Rendering does not actually begin until you call `startWork`
+
+### `createPrerenderRequest(model, bundlerConfig, ...options): Request`
+
+This is similar to `createRequest` but it alters some internal semantics for how errors and aborts are treated. It returns the same type as `createRequest`.
+
+### `startWork(request: Request): void`
+
+When passed a request this will initiate the actual render. It will continue until it completes
+
+### `startFlowing(request: Request, destination: Destination): void`
+
+a destination is whatever the implementation wants to use for storing the output of the render. In existing implementations it is either a Node stream or a Web stream. When you call `startFlowing` the request will write to the destination continuously whenever more chunks are unblocked, say after an async function has resolved and there is something new to serialize. You can implement streaming backpressure using `stopFlowing()`
+
+### `stopFlowing(request: Request): void`
+
+If you need to pause or permanently end the writing of any additional serialized output for this request you can call `stopFlowing(request)`. You may start flowing again after you've stopped. This is how you would implement backpressure support for streams for instance. It's important to note that stopping flowing is not going to stop rendering. If you want rendering to stop you must `abort` the request.
+
+### `abort(request: Request): void`
+
+If you want to stop rendering you can abort the request with `abort(request)`. This will cause all incomplete work to be abandoned. If the request was created with `createRequest` the abort will encode errors into any unfinished slots in the serialization. If the request was created with `createPrerenderRequest` the abort will omit anything in the places that are unfinished leaving the serialized model in an incomplete state.
diff --git a/packages/react-server/flight.js b/packages/react-server/flight.js
new file mode 100644
index 00000000000..4c5bb964cb7
--- /dev/null
+++ b/packages/react-server/flight.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactFlightServer';
diff --git a/packages/react-server/index.js b/packages/react-server/index.js
new file mode 100644
index 00000000000..ca299b41432
--- /dev/null
+++ b/packages/react-server/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactFizzServer';
diff --git a/packages/react-server/npm/flight.js b/packages/react-server/npm/flight.js
new file mode 100644
index 00000000000..a8c2e2bce95
--- /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.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 00000000000..06d58af609c
--- /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.js');
+} else {
+  module.exports = require('./cjs/react-server.development.js');
+}
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
new file mode 100644
index 00000000000..405d68dbc3a
--- /dev/null
+++ b/packages/react-server/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "react-server",
+  "description": "React package for creating custom streaming server renderers.",
+  "version": "0.1.0",
+  "private": true,
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "flight.js",
+    "cjs/"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-server"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0"
+  }
+}
diff --git a/packages/react-server/src/ReactFizzAsyncDispatcher.js b/packages/react-server/src/ReactFizzAsyncDispatcher.js
new file mode 100644
index 00000000000..d20acdd5e9a
--- /dev/null
+++ b/packages/react-server/src/ReactFizzAsyncDispatcher.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {ComponentStackNode} from './ReactFizzComponentStack';
+
+import {currentTaskInDEV} from './ReactFizzCurrentTask';
+
+function getCacheForType<T>(resourceType: () => T): T {
+  throw new Error('Not implemented.');
+}
+
+function cacheSignal(): null | AbortSignal {
+  throw new Error('Not implemented.');
+}
+
+export const DefaultAsyncDispatcher: AsyncDispatcher = ({
+  getCacheForType,
+  cacheSignal,
+}: any);
+
+if (__DEV__) {
+  DefaultAsyncDispatcher.getOwner = (): ComponentStackNode | null => {
+    if (currentTaskInDEV === null) {
+      return null;
+    }
+    return currentTaskInDEV.componentStack;
+  };
+}
diff --git a/packages/react-server/src/ReactFizzCallUserSpace.js b/packages/react-server/src/ReactFizzCallUserSpace.js
new file mode 100644
index 00000000000..d90a80ec0e8
--- /dev/null
+++ b/packages/react-server/src/ReactFizzCallUserSpace.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {LazyComponent} from 'react/src/ReactLazy';
+
+// These indirections exists so we can exclude its stack frame in DEV (and anything below it).
+// TODO: Consider marking the whole bundle instead of these boundaries.
+
+const callComponent = {
+  react_stack_bottom_frame: function <Props, Arg, R>(
+    Component: (p: Props, arg: Arg) => R,
+    props: Props,
+    secondArg: Arg,
+  ): R {
+    return Component(props, secondArg);
+  },
+};
+
+export const callComponentInDEV: <Props, Arg, R>(
+  Component: (p: Props, arg: Arg) => R,
+  props: Props,
+  secondArg: Arg,
+) => R = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponent.react_stack_bottom_frame.bind(callComponent): any)
+  : (null: any);
+
+interface ClassInstance<R> {
+  render(): R;
+}
+
+const callRender = {
+  react_stack_bottom_frame: function <R>(instance: ClassInstance<R>): R {
+    return instance.render();
+  },
+};
+
+export const callRenderInDEV: <R>(instance: ClassInstance<R>) => R => R =
+  __DEV__
+    ? // We use this technique to trick minifiers to preserve the function name.
+      (callRender.react_stack_bottom_frame.bind(callRender): any)
+    : (null: any);
+
+const callLazyInit = {
+  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
+    const payload = lazy._payload;
+    const init = lazy._init;
+    return init(payload);
+  },
+};
+
+export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit): any)
+  : (null: any);
diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
new file mode 100644
index 00000000000..28c8ac6edcb
--- /dev/null
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -0,0 +1,703 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {emptyContextObject} from './ReactFizzLegacyContext';
+import {readContext} from './ReactFizzNewContext';
+
+import {disableLegacyContext} from 'shared/ReactFeatureFlags';
+import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import {REACT_CONTEXT_TYPE, REACT_CONSUMER_TYPE} from 'shared/ReactSymbols';
+import assign from 'shared/assign';
+import isArray from 'shared/isArray';
+
+const didWarnAboutNoopUpdateForComponent: {[string]: boolean} = {};
+const didWarnAboutDeprecatedWillMount: {[string]: boolean} = {};
+
+let didWarnAboutUninitializedState;
+let didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
+let didWarnAboutLegacyLifecyclesAndDerivedState;
+let didWarnAboutUndefinedDerivedState;
+let didWarnAboutDirectlyAssigningPropsToState;
+let didWarnAboutContextTypeAndContextTypes;
+let didWarnAboutContextTypes;
+let didWarnAboutChildContextTypes;
+let didWarnAboutInvalidateContextType;
+let didWarnOnInvalidCallback;
+
+if (__DEV__) {
+  didWarnAboutUninitializedState = new Set<string>();
+  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set<mixed>();
+  didWarnAboutLegacyLifecyclesAndDerivedState = new Set<string>();
+  didWarnAboutDirectlyAssigningPropsToState = new Set<string>();
+  didWarnAboutUndefinedDerivedState = new Set<string>();
+  didWarnAboutContextTypeAndContextTypes = new Set<mixed>();
+  didWarnAboutContextTypes = new Set<mixed>();
+  didWarnAboutChildContextTypes = new Set<mixed>();
+  didWarnAboutInvalidateContextType = new Set<mixed>();
+  didWarnOnInvalidCallback = new Set<string>();
+}
+
+function warnOnInvalidCallback(callback: mixed) {
+  if (__DEV__) {
+    if (callback === null || typeof callback === 'function') {
+      return;
+    }
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const key = String(callback);
+    if (!didWarnOnInvalidCallback.has(key)) {
+      didWarnOnInvalidCallback.add(key);
+      console.error(
+        'Expected the last optional `callback` argument to be a ' +
+          'function. Instead received: %s.',
+        callback,
+      );
+    }
+  }
+}
+
+function warnOnUndefinedDerivedState(type: any, partialState: any) {
+  if (__DEV__) {
+    if (partialState === undefined) {
+      const componentName = getComponentNameFromType(type) || 'Component';
+      if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
+        didWarnAboutUndefinedDerivedState.add(componentName);
+        console.error(
+          '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
+            'You have returned undefined.',
+          componentName,
+        );
+      }
+    }
+  }
+}
+
+function warnNoop(
+  publicInstance: component(...props: any),
+  callerName: string,
+) {
+  if (__DEV__) {
+    const constructor = publicInstance.constructor;
+    const componentName =
+      (constructor && getComponentNameFromType(constructor)) || 'ReactClass';
+    const warningKey = componentName + '.' + callerName;
+    if (didWarnAboutNoopUpdateForComponent[warningKey]) {
+      return;
+    }
+
+    console.error(
+      '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.',
+      callerName,
+      componentName,
+    );
+    didWarnAboutNoopUpdateForComponent[warningKey] = true;
+  }
+}
+
+type InternalInstance = {
+  queue: null | Array<Object>,
+  replace: boolean,
+};
+
+const classComponentUpdater = {
+  // $FlowFixMe[missing-local-annot]
+  enqueueSetState(inst: any, payload: any, callback) {
+    const internals: InternalInstance = getInstance(inst);
+    if (internals.queue === null) {
+      warnNoop(inst, 'setState');
+    } else {
+      internals.queue.push(payload);
+      if (__DEV__) {
+        if (callback !== undefined && callback !== null) {
+          warnOnInvalidCallback(callback);
+        }
+      }
+    }
+  },
+  enqueueReplaceState(inst: any, payload: any, callback: null) {
+    const internals: InternalInstance = getInstance(inst);
+    internals.replace = true;
+    internals.queue = [payload];
+    if (__DEV__) {
+      if (callback !== undefined && callback !== null) {
+        warnOnInvalidCallback(callback);
+      }
+    }
+  },
+  // $FlowFixMe[missing-local-annot]
+  enqueueForceUpdate(inst: any, callback) {
+    const internals: InternalInstance = getInstance(inst);
+    if (internals.queue === null) {
+      warnNoop(inst, 'forceUpdate');
+    } else {
+      if (__DEV__) {
+        if (callback !== undefined && callback !== null) {
+          warnOnInvalidCallback(callback);
+        }
+      }
+    }
+  },
+};
+
+function applyDerivedStateFromProps(
+  instance: any,
+  ctor: any,
+  getDerivedStateFromProps: (props: any, state: any) => any,
+  prevState: any,
+  nextProps: any,
+) {
+  const partialState = getDerivedStateFromProps(nextProps, prevState);
+
+  if (__DEV__) {
+    warnOnUndefinedDerivedState(ctor, partialState);
+  }
+  // Merge the partial state and the previous state.
+  const newState =
+    partialState === null || partialState === undefined
+      ? prevState
+      : assign({}, prevState, partialState);
+  return newState;
+}
+
+export function constructClassInstance(
+  ctor: any,
+  props: any,
+  maskedLegacyContext: any,
+): any {
+  let context = emptyContextObject;
+  const contextType = ctor.contextType;
+
+  if (__DEV__) {
+    if ('contextType' in ctor) {
+      const isValid =
+        // Allow null for conditional declaration
+        contextType === null ||
+        (contextType !== undefined &&
+          contextType.$$typeof === REACT_CONTEXT_TYPE);
+
+      if (!isValid && !didWarnAboutInvalidateContextType.has(ctor)) {
+        didWarnAboutInvalidateContextType.add(ctor);
+
+        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_CONSUMER_TYPE) {
+          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',
+          getComponentNameFromType(ctor) || 'Component',
+          addendum,
+        );
+      }
+    }
+  }
+
+  if (typeof contextType === 'object' && contextType !== null) {
+    context = readContext((contextType: any));
+  } else if (!disableLegacyContext) {
+    context = maskedLegacyContext;
+  }
+
+  const instance = new ctor(props, context);
+
+  if (__DEV__) {
+    if (
+      typeof ctor.getDerivedStateFromProps === 'function' &&
+      (instance.state === null || instance.state === undefined)
+    ) {
+      const componentName = getComponentNameFromType(ctor) || 'Component';
+      if (!didWarnAboutUninitializedState.has(componentName)) {
+        didWarnAboutUninitializedState.add(componentName);
+        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`. ' +
+            'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
+          componentName,
+          instance.state === null ? 'null' : 'undefined',
+          componentName,
+        );
+      }
+    }
+
+    // If new component APIs are defined, "unsafe" lifecycles won't be called.
+    // Warn about these lifecycles if they are present.
+    // Don't warn about react-lifecycles-compat polyfilled methods though.
+    if (
+      typeof ctor.getDerivedStateFromProps === 'function' ||
+      typeof instance.getSnapshotBeforeUpdate === 'function'
+    ) {
+      let foundWillMountName = null;
+      let foundWillReceivePropsName = null;
+      let foundWillUpdateName = null;
+      if (
+        typeof instance.componentWillMount === 'function' &&
+        instance.componentWillMount.__suppressDeprecationWarning !== true
+      ) {
+        foundWillMountName = 'componentWillMount';
+      } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
+        foundWillMountName = 'UNSAFE_componentWillMount';
+      }
+      if (
+        typeof instance.componentWillReceiveProps === 'function' &&
+        instance.componentWillReceiveProps.__suppressDeprecationWarning !== true
+      ) {
+        foundWillReceivePropsName = 'componentWillReceiveProps';
+      } else if (
+        typeof instance.UNSAFE_componentWillReceiveProps === 'function'
+      ) {
+        foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
+      }
+      if (
+        typeof instance.componentWillUpdate === 'function' &&
+        instance.componentWillUpdate.__suppressDeprecationWarning !== true
+      ) {
+        foundWillUpdateName = 'componentWillUpdate';
+      } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
+        foundWillUpdateName = 'UNSAFE_componentWillUpdate';
+      }
+      if (
+        foundWillMountName !== null ||
+        foundWillReceivePropsName !== null ||
+        foundWillUpdateName !== null
+      ) {
+        const componentName = getComponentNameFromType(ctor) || 'Component';
+        const newApiName =
+          typeof ctor.getDerivedStateFromProps === 'function'
+            ? 'getDerivedStateFromProps()'
+            : 'getSnapshotBeforeUpdate()';
+        if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(componentName)) {
+          didWarnAboutLegacyLifecyclesAndDerivedState.add(componentName);
+          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://react.dev/link/unsafe-component-lifecycles',
+            componentName,
+            newApiName,
+            foundWillMountName !== null ? `\n  ${foundWillMountName}` : '',
+            foundWillReceivePropsName !== null
+              ? `\n  ${foundWillReceivePropsName}`
+              : '',
+            foundWillUpdateName !== null ? `\n  ${foundWillUpdateName}` : '',
+          );
+        }
+      }
+    }
+  }
+
+  return instance;
+}
+
+function checkClassInstance(instance: any, ctor: any, newProps: any) {
+  if (__DEV__) {
+    const name = getComponentNameFromType(ctor) || 'Component';
+    const renderPresent = instance.render;
+
+    if (!renderPresent) {
+      if (ctor.prototype && typeof ctor.prototype.render === 'function') {
+        console.error(
+          'No `render` method found on the %s ' +
+            'instance: did you accidentally return an object from the constructor?',
+          name,
+        );
+      } else {
+        console.error(
+          'No `render` method found on the %s ' +
+            'instance: you may have forgotten to define `render`.',
+          name,
+        );
+      }
+    }
+
+    if (
+      instance.getInitialState &&
+      !instance.getInitialState.isReactClassApproved &&
+      !instance.state
+    ) {
+      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.contextType) {
+      console.error(
+        'contextType was defined as an instance property on %s. Use a static ' +
+          'property to define contextType instead.',
+        name,
+      );
+    }
+
+    if (disableLegacyContext) {
+      if (ctor.childContextTypes && !didWarnAboutChildContextTypes.has(ctor)) {
+        didWarnAboutChildContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy childContextTypes API which was removed in React 19. ' +
+            'Use React.createContext() instead. (https://react.dev/link/legacy-context)',
+          name,
+        );
+      }
+      if (ctor.contextTypes && !didWarnAboutContextTypes.has(ctor)) {
+        didWarnAboutContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy contextTypes API which was removed in React 19. ' +
+            'Use React.createContext() with static contextType instead. ' +
+            '(https://react.dev/link/legacy-context)',
+          name,
+        );
+      }
+    } else {
+      if (instance.contextTypes) {
+        console.error(
+          'contextTypes was defined as an instance property on %s. Use a static ' +
+            'property to define contextTypes instead. (https://react.dev/link/legacy-context)',
+          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 (ctor.childContextTypes && !didWarnAboutChildContextTypes.has(ctor)) {
+        didWarnAboutChildContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy childContextTypes API which will soon be removed. ' +
+            'Use React.createContext() instead. (https://react.dev/link/legacy-context)',
+          name,
+        );
+      }
+      if (ctor.contextTypes && !didWarnAboutContextTypes.has(ctor)) {
+        didWarnAboutContextTypes.add(ctor);
+        console.error(
+          '%s uses the legacy contextTypes API which will soon be removed. ' +
+            'Use React.createContext() with static contextType instead. ' +
+            '(https://react.dev/link/legacy-context)',
+          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'
+    ) {
+      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.',
+        getComponentNameFromType(ctor) || 'A pure component',
+      );
+    }
+    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;
+    if (instance.props !== undefined && hasMutatedProps) {
+      console.error(
+        'When calling super() in `%s`, make sure to pass ' +
+          "up the same props that your component's constructor was passed.",
+        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' &&
+      typeof instance.componentDidUpdate !== 'function' &&
+      !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)
+    ) {
+      didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
+      console.error(
+        '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
+          'This component defines getSnapshotBeforeUpdate() only.',
+        getComponentNameFromType(ctor),
+      );
+    }
+
+    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.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,
+      );
+    }
+  }
+}
+
+function callComponentWillMount(type: any, instance: any) {
+  const oldState = instance.state;
+
+  if (typeof instance.componentWillMount === 'function') {
+    if (__DEV__) {
+      if (instance.componentWillMount.__suppressDeprecationWarning !== true) {
+        const componentName = getComponentNameFromType(type) || 'Unknown';
+
+        if (!didWarnAboutDeprecatedWillMount[componentName]) {
+          console.warn(
+            // keep this warning in sync with ReactStrictModeWarning.js
+            'componentWillMount has been renamed, and is not recommended for use. ' +
+              'See https://react.dev/link/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;
+        }
+      }
+    }
+
+    instance.componentWillMount();
+  }
+  if (typeof instance.UNSAFE_componentWillMount === 'function') {
+    instance.UNSAFE_componentWillMount();
+  }
+
+  if (oldState !== instance.state) {
+    if (__DEV__) {
+      console.error(
+        '%s.componentWillMount(): Assigning directly to this.state is ' +
+          "deprecated (except inside a component's " +
+          'constructor). Use setState instead.',
+        getComponentNameFromType(type) || 'Component',
+      );
+    }
+    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
+  }
+}
+
+function processUpdateQueue(
+  internalInstance: InternalInstance,
+  inst: any,
+  props: any,
+  maskedLegacyContext: any,
+): void {
+  if (internalInstance.queue !== null && internalInstance.queue.length > 0) {
+    const oldQueue = internalInstance.queue;
+    const oldReplace = internalInstance.replace;
+    internalInstance.queue = null;
+    internalInstance.replace = false;
+
+    if (oldReplace && oldQueue.length === 1) {
+      inst.state = oldQueue[0];
+    } else {
+      let nextState = oldReplace ? oldQueue[0] : inst.state;
+      let dontMutate = true;
+      for (let i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {
+        const partial = oldQueue[i];
+        const partialState =
+          typeof partial === 'function'
+            ? partial.call(inst, nextState, props, maskedLegacyContext)
+            : partial;
+        if (partialState != null) {
+          if (dontMutate) {
+            dontMutate = false;
+            nextState = assign({}, nextState, partialState);
+          } else {
+            assign(nextState, partialState);
+          }
+        }
+      }
+      inst.state = nextState;
+    }
+  } else {
+    internalInstance.queue = null;
+  }
+}
+
+// Invokes the mount life-cycles on a previously never rendered instance.
+export function mountClassInstance(
+  instance: any,
+  ctor: any,
+  newProps: any,
+  maskedLegacyContext: any,
+): void {
+  if (__DEV__) {
+    checkClassInstance(instance, ctor, newProps);
+  }
+
+  const initialState = instance.state !== undefined ? instance.state : null;
+
+  instance.updater = classComponentUpdater;
+  instance.props = newProps;
+  instance.state = initialState;
+  // We don't bother initializing the refs object on the server, since we're not going to resolve them anyway.
+
+  // The internal instance will be used to manage updates that happen during this mount.
+  const internalInstance: InternalInstance = {
+    queue: [],
+    replace: false,
+  };
+  setInstance(instance, internalInstance);
+
+  const contextType = ctor.contextType;
+  if (typeof contextType === 'object' && contextType !== null) {
+    instance.context = readContext(contextType);
+  } else if (disableLegacyContext) {
+    instance.context = emptyContextObject;
+  } else {
+    instance.context = maskedLegacyContext;
+  }
+
+  if (__DEV__) {
+    if (instance.state === newProps) {
+      const componentName = getComponentNameFromType(ctor) || 'Component';
+      if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
+        didWarnAboutDirectlyAssigningPropsToState.add(componentName);
+        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.',
+          componentName,
+        );
+      }
+    }
+  }
+
+  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
+  if (typeof getDerivedStateFromProps === 'function') {
+    instance.state = applyDerivedStateFromProps(
+      instance,
+      ctor,
+      getDerivedStateFromProps,
+      initialState,
+      newProps,
+    );
+  }
+
+  // In order to support react-lifecycles-compat polyfilled components,
+  // Unsafe lifecycles should not be invoked for components using the new APIs.
+  if (
+    typeof ctor.getDerivedStateFromProps !== 'function' &&
+    typeof instance.getSnapshotBeforeUpdate !== 'function' &&
+    (typeof instance.UNSAFE_componentWillMount === 'function' ||
+      typeof instance.componentWillMount === 'function')
+  ) {
+    callComponentWillMount(ctor, instance);
+    // If we had additional state updates during this life-cycle, let's
+    // process them now.
+    processUpdateQueue(
+      internalInstance,
+      instance,
+      newProps,
+      maskedLegacyContext,
+    );
+  }
+}
diff --git a/packages/react-server/src/ReactFizzComponentStack.js b/packages/react-server/src/ReactFizzComponentStack.js
new file mode 100644
index 00000000000..467cf48646c
--- /dev/null
+++ b/packages/react-server/src/ReactFizzComponentStack.js
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactComponentInfo, ReactAsyncInfo} from 'shared/ReactTypes';
+import type {LazyComponent} from 'react/src/ReactLazy';
+
+import {
+  describeBuiltInComponentFrame,
+  describeFunctionComponentFrame,
+  describeClassComponentFrame,
+  describeDebugInfoFrame,
+} from 'shared/ReactComponentStackFrame';
+
+import {
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+} from 'shared/ReactSymbols';
+
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
+
+import {formatOwnerStack} from 'shared/ReactOwnerStackFrames';
+
+export type ComponentStackNode = {
+  parent: null | ComponentStackNode,
+  type:
+    | symbol
+    | string
+    | Function
+    | LazyComponent<any, any>
+    | ReactComponentInfo
+    | ReactAsyncInfo,
+  owner?: null | ReactComponentInfo | ComponentStackNode, // DEV only
+  stack?: null | string | Error, // DEV only
+};
+
+function shouldConstruct(Component: any) {
+  return Component.prototype && Component.prototype.isReactComponent;
+}
+
+function describeComponentStackByType(
+  type:
+    | symbol
+    | string
+    | Function
+    | LazyComponent<any, any>
+    | ReactComponentInfo,
+): string {
+  if (typeof type === 'string') {
+    return describeBuiltInComponentFrame(type);
+  }
+  if (typeof type === 'function') {
+    if (shouldConstruct(type)) {
+      return describeClassComponentFrame(type);
+    } else {
+      return describeFunctionComponentFrame(type);
+    }
+  }
+  if (typeof type === 'object' && type !== null) {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE: {
+        return describeFunctionComponentFrame((type: any).render);
+      }
+      case REACT_MEMO_TYPE: {
+        return describeFunctionComponentFrame((type: any).type);
+      }
+      case REACT_LAZY_TYPE: {
+        const lazyComponent: LazyComponent<any, any> = (type: any);
+        const payload = lazyComponent._payload;
+        const init = lazyComponent._init;
+        try {
+          type = init(payload);
+        } catch (x) {
+          // TODO: When we support Thenables as component types we should rename this.
+          return describeBuiltInComponentFrame('Lazy');
+        }
+        return describeComponentStackByType(type);
+      }
+    }
+    if (typeof type.name === 'string') {
+      return describeDebugInfoFrame(type.name, type.env, type.debugLocation);
+    }
+  }
+  switch (type) {
+    case REACT_SUSPENSE_LIST_TYPE: {
+      return describeBuiltInComponentFrame('SuspenseList');
+    }
+    case REACT_SUSPENSE_TYPE: {
+      return describeBuiltInComponentFrame('Suspense');
+    }
+    case REACT_VIEW_TRANSITION_TYPE:
+      if (enableViewTransition) {
+        return describeBuiltInComponentFrame('ViewTransition');
+      }
+  }
+  return '';
+}
+
+export function getStackByComponentStackNode(
+  componentStack: ComponentStackNode,
+): string {
+  try {
+    let info = '';
+    let node: ComponentStackNode = componentStack;
+    do {
+      info += describeComponentStackByType(node.type);
+      // $FlowFixMe[incompatible-type] we bail out when we get a null
+      node = node.parent;
+    } while (node);
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
+
+function describeFunctionComponentFrameWithoutLineNumber(fn: Function): string {
+  // We use this because we don't actually want to describe the line of the component
+  // but just the component name.
+  const name = fn ? fn.displayName || fn.name : '';
+  return name ? describeBuiltInComponentFrame(name) : '';
+}
+
+export function getOwnerStackByComponentStackNodeInDev(
+  componentStack: ComponentStackNode,
+): string {
+  if (!__DEV__) {
+    return '';
+  }
+  try {
+    let info = '';
+
+    // The owner stack of the current component will be where it was created, i.e. inside its owner.
+    // There's no actual name of the currently executing component. Instead, that is available
+    // on the regular stack that's currently executing. However, for built-ins there is no such
+    // named stack frame and it would be ignored as being internal anyway. Therefore we add
+    // add one extra frame just to describe the "current" built-in component by name.
+    // Similarly, if there is no owner at all, then there's no stack frame so we add the name
+    // of the root component to the stack to know which component is currently executing.
+    if (typeof componentStack.type === 'string') {
+      info += describeBuiltInComponentFrame(componentStack.type);
+    } else if (typeof componentStack.type === 'function') {
+      if (!componentStack.owner) {
+        // Only if we have no other data about the callsite do we add
+        // the component name as the single stack frame.
+        info += describeFunctionComponentFrameWithoutLineNumber(
+          componentStack.type,
+        );
+      }
+    } else {
+      if (!componentStack.owner) {
+        info += describeComponentStackByType(componentStack.type);
+      }
+    }
+
+    let owner: void | null | ComponentStackNode | ReactComponentInfo =
+      componentStack;
+
+    while (owner) {
+      let ownerStack: ?string = null;
+      if (owner.debugStack != null) {
+        // Server Component
+        // TODO: Should we stash this somewhere for caching purposes?
+        ownerStack = formatOwnerStack(owner.debugStack);
+        owner = owner.owner;
+      } else {
+        // Client Component
+        const node: ComponentStackNode = (owner: any);
+        if (node.stack != null) {
+          if (typeof node.stack !== 'string') {
+            ownerStack = node.stack = formatOwnerStack(node.stack);
+          } else {
+            ownerStack = node.stack;
+          }
+        }
+        owner = owner.owner;
+      }
+      // If we don't actually print the stack if there is no owner of this JSX element.
+      // In a real app it's typically not useful since the root app is always controlled
+      // by the framework. These also tend to have noisy stacks because they're not rooted
+      // in a React render but in some imperative bootstrapping code. It could be useful
+      // if the element was created in module scope. E.g. hoisted. We could add a a single
+      // stack frame for context for example but it doesn't say much if that's a wrapper.
+      if (owner && ownerStack) {
+        info += '\n' + ownerStack;
+      }
+    }
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
diff --git a/packages/react-server/src/ReactFizzConfig.js b/packages/react-server/src/ReactFizzConfig.js
new file mode 100644
index 00000000000..4d6251b12a5
--- /dev/null
+++ b/packages/react-server/src/ReactFizzConfig.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/prod-error-codes */
+
+// 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.
+
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactFizzCurrentTask.js b/packages/react-server/src/ReactFizzCurrentTask.js
new file mode 100644
index 00000000000..3bd62f0a5cd
--- /dev/null
+++ b/packages/react-server/src/ReactFizzCurrentTask.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Task} from './ReactFizzServer';
+
+// DEV-only global reference to the currently executing task
+export let currentTaskInDEV: null | Task = null;
+
+export function setCurrentTaskInDEV(task: null | Task): void {
+  if (__DEV__) {
+    currentTaskInDEV = task;
+  }
+}
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
new file mode 100644
index 00000000000..24e676fc710
--- /dev/null
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -0,0 +1,869 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+
+import type {
+  ReactContext,
+  StartTransitionOptions,
+  Thenable,
+  Usable,
+  ReactCustomFormAction,
+  Awaited,
+} from 'shared/ReactTypes';
+
+import type {ResumableState} from './ReactFizzConfig';
+import type {Request, Task, KeyNode} from './ReactFizzServer';
+import type {ThenableState} from './ReactFizzThenable';
+import type {TransitionStatus} from './ReactFizzConfig';
+
+import {readContext as readContextImpl} from './ReactFizzNewContext';
+import {getTreeId} from './ReactFizzTreeContext';
+import {
+  createThenableState,
+  trackUsedThenable,
+  readPreviousThenable,
+} from './ReactFizzThenable';
+
+import {
+  makeId,
+  NotPendingTransition,
+  supportsClientAPIs,
+} from './ReactFizzConfig';
+import {createFastHash} from './ReactServerStreamConfig';
+
+import is from 'shared/objectIs';
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_MEMO_CACHE_SENTINEL,
+} from 'shared/ReactSymbols';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {getFormState} from './ReactFizzServer';
+
+import noop from 'shared/noop';
+
+type BasicStateAction<S> = (S => S) | S;
+type Dispatch<A> = A => void;
+
+type Update<A> = {
+  action: A,
+  next: Update<A> | null,
+};
+
+type UpdateQueue<A> = {
+  last: Update<A> | null,
+  dispatch: any,
+};
+
+type Hook = {
+  memoizedState: any,
+  queue: UpdateQueue<any> | null,
+  next: Hook | null,
+};
+
+let currentlyRenderingComponent: Object | null = null;
+let currentlyRenderingTask: Task | null = null;
+let currentlyRenderingRequest: Request | null = null;
+let currentlyRenderingKeyPath: KeyNode | null = null;
+let firstWorkInProgressHook: Hook | null = null;
+let workInProgressHook: Hook | null = null;
+// Whether the work-in-progress hook is a re-rendered hook
+let isReRender: boolean = false;
+// Whether an update was scheduled during the currently executing render pass.
+let didScheduleRenderPhaseUpdate: boolean = false;
+// Counts the number of useId hooks in this component
+let localIdCounter: number = 0;
+// Chunks that should be pushed to the stream once the component
+// finishes rendering.
+// Counts the number of useActionState calls in this component
+let actionStateCounter: number = 0;
+// The index of the useActionState hook that matches the one passed in at the
+// root during an MPA navigation, if any.
+let actionStateMatchingIndex: number = -1;
+// Counts the number of use(thenable) calls in this component
+let thenableIndexCounter: number = 0;
+let thenableState: ThenableState | null = null;
+// Lazily created map of render-phase updates
+let renderPhaseUpdates: Map<UpdateQueue<any>, Update<any>> | null = null;
+// Counter to prevent infinite loops.
+let numberOfReRenders: number = 0;
+const RE_RENDER_LIMIT = 25;
+
+let isInHookUserCodeInDev = false;
+
+// In DEV, this is the name of the currently executing primitive hook
+let currentHookNameInDev: ?string;
+
+function resolveCurrentlyRenderingComponent(): Object {
+  if (currentlyRenderingComponent === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
+  if (__DEV__) {
+    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://react.dev/link/rules-of-hooks',
+      );
+    }
+  }
+  return currentlyRenderingComponent;
+}
+
+function areHookInputsEqual(
+  nextDeps: Array<mixed>,
+  prevDeps: Array<mixed> | null,
+) {
+  if (prevDeps === null) {
+    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;
+  }
+
+  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(', ')}]`,
+      );
+    }
+  }
+  // $FlowFixMe[incompatible-use] found when upgrading Flow
+  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    if (is(nextDeps[i], prevDeps[i])) {
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+
+function createHook(): Hook {
+  if (numberOfReRenders > 0) {
+    throw new Error('Rendered more hooks than during the previous render');
+  }
+  return {
+    memoizedState: null,
+    queue: null,
+    next: null,
+  };
+}
+
+function createWorkInProgressHook(): Hook {
+  if (workInProgressHook === null) {
+    // This is the first hook in the list
+    if (firstWorkInProgressHook === null) {
+      isReRender = false;
+      firstWorkInProgressHook = workInProgressHook = createHook();
+    } else {
+      // There's already a work-in-progress. Reuse it.
+      isReRender = true;
+      workInProgressHook = firstWorkInProgressHook;
+    }
+  } else {
+    if (workInProgressHook.next === null) {
+      isReRender = false;
+      // Append to the end of the list
+      workInProgressHook = workInProgressHook.next = createHook();
+    } else {
+      // There's already a work-in-progress. Reuse it.
+      isReRender = true;
+      workInProgressHook = workInProgressHook.next;
+    }
+  }
+  return workInProgressHook;
+}
+
+export function prepareToUseHooks(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode | null,
+  componentIdentity: Object,
+  prevThenableState: ThenableState | null,
+): void {
+  currentlyRenderingComponent = componentIdentity;
+  currentlyRenderingTask = task;
+  currentlyRenderingRequest = request;
+  currentlyRenderingKeyPath = keyPath;
+  if (__DEV__) {
+    isInHookUserCodeInDev = false;
+  }
+
+  // The following should have already been reset
+  // didScheduleRenderPhaseUpdate = false;
+  // firstWorkInProgressHook = null;
+  // numberOfReRenders = 0;
+  // renderPhaseUpdates = null;
+  // workInProgressHook = null;
+
+  localIdCounter = 0;
+  actionStateCounter = 0;
+  actionStateMatchingIndex = -1;
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
+}
+
+export function prepareToUseThenableState(
+  prevThenableState: ThenableState | null,
+): void {
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
+}
+
+export function finishHooks(
+  Component: any,
+  props: any,
+  children: any,
+  refOrContext: any,
+): any {
+  // This must be called after every function component to prevent hooks from
+  // being used in classes.
+
+  while (didScheduleRenderPhaseUpdate) {
+    // Updates were scheduled during the render phase. They are stored in
+    // the `renderPhaseUpdates` map. Call the component again, reusing the
+    // work-in-progress hooks and applying the additional updates on top. Keep
+    // restarting until no more updates are scheduled.
+    didScheduleRenderPhaseUpdate = false;
+    localIdCounter = 0;
+    actionStateCounter = 0;
+    actionStateMatchingIndex = -1;
+    thenableIndexCounter = 0;
+    numberOfReRenders += 1;
+
+    // Start over from the beginning of the list
+    workInProgressHook = null;
+
+    children = Component(props, refOrContext);
+  }
+
+  resetHooksState();
+  return children;
+}
+
+export function getThenableStateAfterSuspending(): null | ThenableState {
+  const state = thenableState;
+  thenableState = null;
+  return state;
+}
+
+export function checkDidRenderIdHook(): boolean {
+  // This should be called immediately after every finishHooks call.
+  // Conceptually, it's part of the return value of finishHooks; it's only a
+  // separate function to avoid using an array tuple.
+  const didRenderIdHook = localIdCounter !== 0;
+  return didRenderIdHook;
+}
+
+export function getActionStateCount(): number {
+  // This should be called immediately after every finishHooks call.
+  // Conceptually, it's part of the return value of finishHooks; it's only a
+  // separate function to avoid using an array tuple.
+  return actionStateCounter;
+}
+export function getActionStateMatchingIndex(): number {
+  // This should be called immediately after every finishHooks call.
+  // Conceptually, it's part of the return value of finishHooks; it's only a
+  // separate function to avoid using an array tuple.
+  return actionStateMatchingIndex;
+}
+
+// Reset the internal hooks state if an error occurs while rendering a component
+export function resetHooksState(): void {
+  if (__DEV__) {
+    isInHookUserCodeInDev = false;
+  }
+
+  currentlyRenderingComponent = null;
+  currentlyRenderingTask = null;
+  currentlyRenderingRequest = null;
+  currentlyRenderingKeyPath = null;
+  didScheduleRenderPhaseUpdate = false;
+  firstWorkInProgressHook = null;
+  numberOfReRenders = 0;
+  renderPhaseUpdates = null;
+  workInProgressHook = null;
+}
+
+function readContext<T>(context: ReactContext<T>): T {
+  if (__DEV__) {
+    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 readContextImpl(context);
+}
+
+function useContext<T>(context: ReactContext<T>): T {
+  if (__DEV__) {
+    currentHookNameInDev = 'useContext';
+  }
+  resolveCurrentlyRenderingComponent();
+  return readContextImpl(context);
+}
+
+function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
+  // $FlowFixMe[incompatible-use]: Flow doesn't like mixed types
+  return typeof action === 'function' ? action(state) : action;
+}
+
+export function useState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  if (__DEV__) {
+    currentHookNameInDev = 'useState';
+  }
+  return useReducer(
+    basicStateReducer,
+    // useReducer has a special case to support lazy useState initializers
+    (initialState: any),
+  );
+}
+
+export function useReducer<S, I, A>(
+  reducer: (S, A) => S,
+  initialArg: I,
+  init?: I => S,
+): [S, Dispatch<A>] {
+  if (__DEV__) {
+    if (reducer !== basicStateReducer) {
+      currentHookNameInDev = 'useReducer';
+    }
+  }
+  currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
+  workInProgressHook = createWorkInProgressHook();
+  if (isReRender) {
+    // This is a re-render. Apply the new render phase updates to the previous
+    // current hook.
+    const queue: UpdateQueue<A> = (workInProgressHook.queue: any);
+    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) {
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        renderPhaseUpdates.delete(queue);
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        let newState = workInProgressHook.memoizedState;
+        let update: Update<any> = 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;
+          if (__DEV__) {
+            isInHookUserCodeInDev = true;
+          }
+          newState = reducer(newState, action);
+          if (__DEV__) {
+            isInHookUserCodeInDev = false;
+          }
+          // $FlowFixMe[incompatible-type] we bail out when we get a null
+          update = update.next;
+        } while (update !== null);
+
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        workInProgressHook.memoizedState = newState;
+
+        return [newState, dispatch];
+      }
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    return [workInProgressHook.memoizedState, dispatch];
+  } else {
+    if (__DEV__) {
+      isInHookUserCodeInDev = true;
+    }
+    let initialState;
+    if (reducer === basicStateReducer) {
+      // Special case for `useState`.
+      initialState =
+        typeof initialArg === 'function'
+          ? ((initialArg: any): () => S)()
+          : ((initialArg: any): S);
+    } else {
+      initialState =
+        init !== undefined ? init(initialArg) : ((initialArg: any): S);
+    }
+    if (__DEV__) {
+      isInHookUserCodeInDev = false;
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    workInProgressHook.memoizedState = initialState;
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    const queue: UpdateQueue<A> = (workInProgressHook.queue = {
+      last: null,
+      dispatch: null,
+    });
+    const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
+      null,
+      currentlyRenderingComponent,
+      queue,
+    ): any));
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    return [workInProgressHook.memoizedState, dispatch];
+  }
+}
+
+function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
+  currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
+  workInProgressHook = createWorkInProgressHook();
+
+  const nextDeps = deps === undefined ? null : deps;
+
+  if (workInProgressHook !== null) {
+    const prevState = workInProgressHook.memoizedState;
+    if (prevState !== null) {
+      if (nextDeps !== null) {
+        const prevDeps = prevState[1];
+        if (areHookInputsEqual(nextDeps, prevDeps)) {
+          return prevState[0];
+        }
+      }
+    }
+  }
+
+  if (__DEV__) {
+    isInHookUserCodeInDev = true;
+  }
+  const nextValue = nextCreate();
+  if (__DEV__) {
+    isInHookUserCodeInDev = false;
+  }
+  // $FlowFixMe[incompatible-use] found when upgrading Flow
+  workInProgressHook.memoizedState = [nextValue, nextDeps];
+  return nextValue;
+}
+
+function useRef<T>(initialValue: T): {current: T} {
+  currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
+  workInProgressHook = createWorkInProgressHook();
+  const previousRef = workInProgressHook.memoizedState;
+  if (previousRef === null) {
+    const ref = {current: initialValue};
+    if (__DEV__) {
+      Object.seal(ref);
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    workInProgressHook.memoizedState = ref;
+    return ref;
+  } else {
+    return previousRef;
+  }
+}
+
+function dispatchAction<A>(
+  componentIdentity: Object,
+  queue: UpdateQueue<A>,
+  action: A,
+): void {
+  if (numberOfReRenders >= RE_RENDER_LIMIT) {
+    throw new Error(
+      'Too many re-renders. React limits the number of renders to prevent ' +
+        'an infinite loop.',
+    );
+  }
+
+  if (componentIdentity === currentlyRenderingComponent) {
+    // This is a render phase update. Stash it in a lazily-created map of
+    // 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<A> = {
+      action,
+      next: null,
+    };
+    if (renderPhaseUpdates === null) {
+      renderPhaseUpdates = new Map();
+    }
+    const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
+    if (firstRenderPhaseUpdate === undefined) {
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      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;
+    }
+  } else {
+    // This means an update has happened after the function component has
+    // returned. On the server this is a no-op. In React Fiber, the update
+    // would be scheduled for a future render.
+  }
+}
+
+export function useCallback<T>(
+  callback: T,
+  deps: Array<mixed> | void | null,
+): T {
+  return useMemo(() => callback, deps);
+}
+
+function throwOnUseEffectEventCall() {
+  throw new Error(
+    "A function wrapped in useEffectEvent can't be called during rendering.",
+  );
+}
+
+export function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
+  callback: F,
+): F {
+  // $FlowIgnore[incompatible-return]
+  return throwOnUseEffectEventCall;
+}
+
+function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  if (getServerSnapshot === undefined) {
+    throw new Error(
+      'Missing getServerSnapshot, which is required for ' +
+        'server-rendered content. Will revert to client rendering.',
+    );
+  }
+  return getServerSnapshot();
+}
+
+function useDeferredValue<T>(value: T, initialValue?: T): T {
+  resolveCurrentlyRenderingComponent();
+  return initialValue !== undefined ? initialValue : value;
+}
+
+function unsupportedStartTransition() {
+  throw new Error('startTransition cannot be called during server rendering.');
+}
+
+function useTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
+  resolveCurrentlyRenderingComponent();
+  return [false, unsupportedStartTransition];
+}
+
+function useHostTransitionStatus(): TransitionStatus {
+  resolveCurrentlyRenderingComponent();
+  return NotPendingTransition;
+}
+
+function unsupportedSetOptimisticState() {
+  throw new Error('Cannot update optimistic state while rendering.');
+}
+
+function useOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  resolveCurrentlyRenderingComponent();
+  return [passthrough, unsupportedSetOptimisticState];
+}
+
+function createPostbackActionStateKey(
+  permalink: string | void,
+  componentKeyPath: KeyNode | null,
+  hookIndex: number,
+): string {
+  if (permalink !== undefined) {
+    // Don't bother to hash a permalink-based key since it's already short.
+    return 'p' + permalink;
+  } else {
+    // Append a node to the key path that represents the form state hook.
+    const keyPath: KeyNode = [componentKeyPath, null, hookIndex];
+    // Key paths are hashed to reduce the size. It does not need to be secure,
+    // and it's more important that it's fast than that it's completely
+    // collision-free.
+    const keyPathHash = createFastHash(JSON.stringify(keyPath));
+    return 'k' + keyPathHash;
+  }
+}
+
+function useActionState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  resolveCurrentlyRenderingComponent();
+
+  // Count the number of useActionState hooks per component. We also use this to
+  // track the position of this useActionState hook relative to the other ones in
+  // this component, so we can generate a unique key for each one.
+  const actionStateHookIndex = actionStateCounter++;
+  const request: Request = (currentlyRenderingRequest: any);
+
+  // $FlowIgnore[prop-missing]
+  const formAction = action.$$FORM_ACTION;
+  if (typeof formAction === 'function') {
+    // This is a server action. These have additional features to enable
+    // MPA-style form submissions with progressive enhancement.
+
+    // TODO: If the same permalink is passed to multiple useActionStates, and
+    // they all have the same action signature, Fizz will pass the postback
+    // state to all of them. We should probably only pass it to the first one,
+    // and/or warn.
+
+    // The key is lazily generated and deduped so the that the keypath doesn't
+    // get JSON.stringify-ed unnecessarily, and at most once.
+    let nextPostbackStateKey = null;
+
+    // Determine the current form state. If we received state during an MPA form
+    // submission, then we will reuse that, if the action identity matches.
+    // Otherwise, we'll use the initial state argument. We will emit a comment
+    // marker into the stream that indicates whether the state was reused.
+    let state = initialState;
+    const componentKeyPath = (currentlyRenderingKeyPath: any);
+    const postbackActionState = getFormState(request);
+    // $FlowIgnore[prop-missing]
+    const isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
+    if (
+      postbackActionState !== null &&
+      typeof isSignatureEqual === 'function'
+    ) {
+      const postbackKey = postbackActionState[1];
+      const postbackReferenceId = postbackActionState[2];
+      const postbackBoundArity = postbackActionState[3];
+      if (
+        isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
+      ) {
+        nextPostbackStateKey = createPostbackActionStateKey(
+          permalink,
+          componentKeyPath,
+          actionStateHookIndex,
+        );
+        if (postbackKey === nextPostbackStateKey) {
+          // This was a match
+          actionStateMatchingIndex = actionStateHookIndex;
+          // Reuse the state that was submitted by the form.
+          state = postbackActionState[0];
+        }
+      }
+    }
+
+    // Bind the state to the first argument of the action.
+    const boundAction = action.bind(null, state);
+
+    // Wrap the action so the return value is void.
+    const dispatch = (payload: P): void => {
+      boundAction(payload);
+    };
+
+    // $FlowIgnore[prop-missing]
+    if (typeof boundAction.$$FORM_ACTION === 'function') {
+      // $FlowIgnore[prop-missing]
+      dispatch.$$FORM_ACTION = (prefix: string) => {
+        const metadata: ReactCustomFormAction =
+          boundAction.$$FORM_ACTION(prefix);
+
+        // Override the action URL
+        if (permalink !== undefined) {
+          if (__DEV__) {
+            checkAttributeStringCoercion(permalink, 'target');
+          }
+          permalink += '';
+          metadata.action = permalink;
+        }
+
+        const formData = metadata.data;
+        if (formData) {
+          if (nextPostbackStateKey === null) {
+            nextPostbackStateKey = createPostbackActionStateKey(
+              permalink,
+              componentKeyPath,
+              actionStateHookIndex,
+            );
+          }
+          formData.append('$ACTION_KEY', nextPostbackStateKey);
+        }
+        return metadata;
+      };
+    }
+
+    return [state, dispatch, false];
+  } else {
+    // This is not a server action, so the implementation is much simpler.
+
+    // Bind the state to the first argument of the action.
+    const boundAction = action.bind(null, initialState);
+    // Wrap the action so the return value is void.
+    const dispatch = (payload: P): void => {
+      boundAction(payload);
+    };
+    return [initialState, dispatch, false];
+  }
+}
+
+function useId(): string {
+  const task: Task = (currentlyRenderingTask: any);
+  const treeId = getTreeId(task.treeContext);
+
+  const resumableState = currentResumableState;
+  if (resumableState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
+  const localId = localIdCounter++;
+  return makeId(resumableState, treeId, localId);
+}
+
+function use<T>(usable: Usable<T>): T {
+  if (usable !== null && typeof usable === 'object') {
+    // $FlowFixMe[method-unbinding]
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+      return unwrapThenable(thenable);
+    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
+
+export function unwrapThenable<T>(thenable: Thenable<T>): T {
+  const index = thenableIndexCounter;
+  thenableIndexCounter += 1;
+  if (thenableState === null) {
+    thenableState = createThenableState();
+  }
+  return trackUsedThenable(thenableState, thenable, index);
+}
+
+export function readPreviousThenableFromState<T>(): T | void {
+  const index = thenableIndexCounter;
+  thenableIndexCounter += 1;
+  if (thenableState === null) {
+    return undefined;
+  }
+  return readPreviousThenable(thenableState, index);
+}
+
+function unsupportedRefresh() {
+  throw new Error('Cache cannot be refreshed during server rendering.');
+}
+
+function useCacheRefresh(): <T>(?() => T, ?T) => void {
+  return unsupportedRefresh;
+}
+
+function useMemoCache(size: number): Array<mixed> {
+  const data = new Array<any>(size);
+  for (let i = 0; i < size; i++) {
+    data[i] = REACT_MEMO_CACHE_SENTINEL;
+  }
+  return data;
+}
+
+function clientHookNotSupported() {
+  throw new Error(
+    'Cannot use state or effect Hooks in renderToHTML because ' +
+      'this component will never be hydrated.',
+  );
+}
+
+export const HooksDispatcher: Dispatcher = supportsClientAPIs
+  ? {
+      readContext,
+      use,
+      useContext,
+      useMemo,
+      useReducer,
+      useRef,
+      useState,
+      useInsertionEffect: noop,
+      useLayoutEffect: noop,
+      useCallback,
+      // useImperativeHandle is not run in the server environment
+      useImperativeHandle: noop,
+      // Effects are not run in the server environment.
+      useEffect: noop,
+      // Debugging effect
+      useDebugValue: noop,
+      useDeferredValue,
+      useTransition,
+      useId,
+      // Subscriptions are not setup in a server environment.
+      useSyncExternalStore,
+      useOptimistic,
+      useActionState,
+      useFormState: useActionState,
+      useHostTransitionStatus,
+      useMemoCache,
+      useCacheRefresh,
+      useEffectEvent,
+    }
+  : {
+      readContext,
+      use,
+      useCallback,
+      useContext,
+      useEffect: clientHookNotSupported,
+      useImperativeHandle: clientHookNotSupported,
+      useInsertionEffect: clientHookNotSupported,
+      useLayoutEffect: clientHookNotSupported,
+      useMemo,
+      useReducer: clientHookNotSupported,
+      useRef: clientHookNotSupported,
+      useState: clientHookNotSupported,
+      useDebugValue: noop,
+      useDeferredValue: clientHookNotSupported,
+      useTransition: clientHookNotSupported,
+      useSyncExternalStore: clientHookNotSupported,
+      useId,
+      useHostTransitionStatus,
+      useFormState: useActionState,
+      useActionState,
+      useOptimistic,
+      useMemoCache,
+      useCacheRefresh,
+      useEffectEvent,
+    };
+
+export let currentResumableState: null | ResumableState = (null: any);
+export function setCurrentResumableState(
+  resumableState: null | ResumableState,
+): void {
+  currentResumableState = resumableState;
+}
diff --git a/packages/react-server/src/ReactFizzLegacyContext.js b/packages/react-server/src/ReactFizzLegacyContext.js
new file mode 100644
index 00000000000..b17827cef68
--- /dev/null
+++ b/packages/react-server/src/ReactFizzLegacyContext.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {disableLegacyContext} from 'shared/ReactFeatureFlags';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+
+let warnedAboutMissingGetChildContext;
+
+if (__DEV__) {
+  warnedAboutMissingGetChildContext = ({}: {[string]: boolean});
+}
+
+export const emptyContextObject: {} = {};
+if (__DEV__) {
+  Object.freeze(emptyContextObject);
+}
+
+export function getMaskedContext(type: any, unmaskedContext: Object): Object {
+  if (disableLegacyContext) {
+    return emptyContextObject;
+  } else {
+    const contextTypes = type.contextTypes;
+    if (!contextTypes) {
+      return emptyContextObject;
+    }
+
+    const context: {[string]: $FlowFixMe} = {};
+    for (const key in contextTypes) {
+      context[key] = unmaskedContext[key];
+    }
+
+    return context;
+  }
+}
+
+export function processChildContext(
+  instance: any,
+  type: any,
+  parentContext: Object,
+  childContextTypes: Object,
+): Object {
+  if (disableLegacyContext) {
+    return parentContext;
+  } else {
+    // 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 = getComponentNameFromType(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;
+    }
+
+    const childContext = instance.getChildContext();
+    for (const contextKey in childContext) {
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${
+            getComponentNameFromType(type) || 'Unknown'
+          }.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
+    }
+    return {...parentContext, ...childContext};
+  }
+}
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
new file mode 100644
index 00000000000..0a9fe3df4c3
--- /dev/null
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {isPrimaryRenderer} from './ReactFizzConfig';
+
+let rendererSigil;
+if (__DEV__) {
+  // Use this to detect multiple renderers using the same context
+  rendererSigil = {};
+}
+
+// Used to store the parent path of all context overrides in a shared linked list.
+// Forming a reverse tree.
+type ContextNode<T> = {
+  parent: null | ContextNode<any>,
+  depth: number, // Short hand to compute the depth of the tree at this node.
+  context: ReactContext<T>,
+  parentValue: T,
+  value: T,
+};
+
+// The structure of a context snapshot is an implementation of this file.
+// Currently, it's implemented as tracking the current active node.
+export opaque type ContextSnapshot = null | ContextNode<any>;
+
+export const rootContextSnapshot: ContextSnapshot = null;
+
+// We assume that this runtime owns the "current" field on all ReactContext instances.
+// This global (actually thread local) state represents what state all those "current",
+// fields are currently in.
+let currentActiveSnapshot: ContextSnapshot = null;
+
+function popNode(prev: ContextNode<any>): void {
+  if (isPrimaryRenderer) {
+    prev.context._currentValue = prev.parentValue;
+  } else {
+    prev.context._currentValue2 = prev.parentValue;
+  }
+}
+
+function pushNode(next: ContextNode<any>): void {
+  if (isPrimaryRenderer) {
+    next.context._currentValue = next.value;
+  } else {
+    next.context._currentValue2 = next.value;
+  }
+}
+
+function popToNearestCommonAncestor(
+  prev: ContextNode<any>,
+  next: ContextNode<any>,
+): void {
+  if (prev === next) {
+    // We've found a shared ancestor. We don't need to pop nor reapply this one or anything above.
+  } else {
+    popNode(prev);
+    const parentPrev = prev.parent;
+    const parentNext = next.parent;
+    if (parentPrev === null) {
+      if (parentNext !== null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
+    } else {
+      if (parentNext === null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
+
+      popToNearestCommonAncestor(parentPrev, parentNext);
+    }
+
+    // On the way back, we push the new ones that weren't common.
+    pushNode(next);
+  }
+}
+
+function popAllPrevious(prev: ContextNode<any>): void {
+  popNode(prev);
+  const parentPrev = prev.parent;
+  if (parentPrev !== null) {
+    popAllPrevious(parentPrev);
+  }
+}
+
+function pushAllNext(next: ContextNode<any>): void {
+  const parentNext = next.parent;
+  if (parentNext !== null) {
+    pushAllNext(parentNext);
+  }
+  pushNode(next);
+}
+
+function popPreviousToCommonLevel(
+  prev: ContextNode<any>,
+  next: ContextNode<any>,
+): void {
+  popNode(prev);
+  const parentPrev = prev.parent;
+
+  if (parentPrev === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.',
+    );
+  }
+
+  if (parentPrev.depth === next.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(parentPrev, next);
+  } else {
+    // We must still be deeper.
+    popPreviousToCommonLevel(parentPrev, next);
+  }
+}
+
+function popNextToCommonLevel(
+  prev: ContextNode<any>,
+  next: ContextNode<any>,
+): void {
+  const parentNext = next.parent;
+
+  if (parentNext === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.',
+    );
+  }
+
+  if (prev.depth === parentNext.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(prev, parentNext);
+  } else {
+    // We must still be deeper.
+    popNextToCommonLevel(prev, parentNext);
+  }
+  pushNode(next);
+}
+
+// Perform context switching to the new snapshot.
+// To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
+// updating all the context's current values. That way reads, always just read the current value.
+// At the cost of updating contexts even if they're never read by this subtree.
+export function switchContext(newSnapshot: ContextSnapshot): void {
+  // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
+  // We also need to update any new contexts that are now on the stack with the deepest value.
+  // The easiest way to update new contexts is to just reapply them in reverse order from the
+  // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
+  // for that. Therefore this algorithm is recursive.
+  // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
+  // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
+  // 3) Then we reapply new contexts on the way back up the stack.
+  const prev = currentActiveSnapshot;
+  const next = newSnapshot;
+  if (prev !== next) {
+    if (prev === null) {
+      // $FlowFixMe[incompatible-call]: This has to be non-null since it's not equal to prev.
+      pushAllNext(next);
+    } else if (next === null) {
+      popAllPrevious(prev);
+    } else if (prev.depth === next.depth) {
+      popToNearestCommonAncestor(prev, next);
+    } else if (prev.depth > next.depth) {
+      popPreviousToCommonLevel(prev, next);
+    } else {
+      popNextToCommonLevel(prev, next);
+    }
+    currentActiveSnapshot = next;
+  }
+}
+
+export function pushProvider<T>(
+  context: ReactContext<T>,
+  nextValue: T,
+): ContextSnapshot {
+  let prevValue;
+  if (isPrimaryRenderer) {
+    prevValue = context._currentValue;
+    context._currentValue = nextValue;
+    if (__DEV__) {
+      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 {
+    prevValue = context._currentValue2;
+    context._currentValue2 = nextValue;
+    if (__DEV__) {
+      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;
+    }
+  }
+  const prevNode = currentActiveSnapshot;
+  const newNode: ContextNode<T> = {
+    parent: prevNode,
+    depth: prevNode === null ? 0 : prevNode.depth + 1,
+    context: context,
+    parentValue: prevValue,
+    value: nextValue,
+  };
+  currentActiveSnapshot = newNode;
+  return newNode;
+}
+
+export function popProvider<T>(context: ReactContext<T>): ContextSnapshot {
+  const prevSnapshot = currentActiveSnapshot;
+
+  if (prevSnapshot === null) {
+    throw new Error(
+      'Tried to pop a Context at the root of the app. This is a bug in React.',
+    );
+  }
+
+  if (__DEV__) {
+    if (prevSnapshot.context !== context) {
+      console.error(
+        'The parent context is not the expected context. This is probably a bug in React.',
+      );
+    }
+  }
+  if (isPrimaryRenderer) {
+    const value = prevSnapshot.parentValue;
+    prevSnapshot.context._currentValue = value;
+    if (__DEV__) {
+      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 {
+    const value = prevSnapshot.parentValue;
+    prevSnapshot.context._currentValue2 = value;
+    if (__DEV__) {
+      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;
+    }
+  }
+  return (currentActiveSnapshot = prevSnapshot.parent);
+}
+
+export function getActiveContext(): ContextSnapshot {
+  return currentActiveSnapshot;
+}
+
+export function readContext<T>(context: ReactContext<T>): T {
+  const value = isPrimaryRenderer
+    ? context._currentValue
+    : context._currentValue2;
+  return value;
+}
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
new file mode 100644
index 00000000000..920e368674d
--- /dev/null
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -0,0 +1,6263 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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,
+  Chunk,
+  PrecomputedChunk,
+} from './ReactServerStreamConfig';
+import type {
+  ReactNodeList,
+  ReactContext,
+  ReactConsumerType,
+  Wakeable,
+  Thenable,
+  ReactFormState,
+  ReactComponentInfo,
+  ReactDebugInfo,
+  ReactAsyncInfo,
+  ViewTransitionProps,
+  ActivityProps,
+  SuspenseProps,
+  SuspenseListProps,
+  SuspenseListRevealOrder,
+  ReactKey,
+} from 'shared/ReactTypes';
+import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
+import type {
+  RenderState,
+  ResumableState,
+  PreambleState,
+  FormatContext,
+  HoistableState,
+} from './ReactFizzConfig';
+import type {ContextSnapshot} from './ReactFizzNewContext';
+import type {ComponentStackNode} from './ReactFizzComponentStack';
+import type {TreeContext} from './ReactFizzTreeContext';
+import type {ThenableState} from './ReactFizzThenable';
+
+import {describeObjectForErrorMessage} from 'shared/ReactSerializationErrors';
+
+import {
+  scheduleWork,
+  scheduleMicrotask,
+  beginWriting,
+  writeChunk,
+  writeChunkAndReturn,
+  completeWriting,
+  flushBuffered,
+  close,
+  closeWithError,
+  byteLengthOfChunk,
+} from './ReactServerStreamConfig';
+import {
+  writeCompletedRoot,
+  writePlaceholder,
+  pushStartActivityBoundary,
+  pushEndActivityBoundary,
+  writeStartCompletedSuspenseBoundary,
+  writeStartPendingSuspenseBoundary,
+  writeStartClientRenderedSuspenseBoundary,
+  writeEndCompletedSuspenseBoundary,
+  writeEndPendingSuspenseBoundary,
+  writeEndClientRenderedSuspenseBoundary,
+  writeStartSegment,
+  writeEndSegment,
+  writeClientRenderBoundaryInstruction,
+  writeCompletedBoundaryInstruction,
+  writeCompletedSegmentInstruction,
+  writeHoistablesForBoundary,
+  pushTextInstance,
+  pushStartInstance,
+  pushEndInstance,
+  pushSegmentFinale,
+  getChildFormatContext,
+  getSuspenseFallbackFormatContext,
+  getSuspenseContentFormatContext,
+  getViewTransitionFormatContext,
+  writeHoistables,
+  writePreambleStart,
+  writePreambleEnd,
+  writePostamble,
+  hoistHoistables,
+  createHoistableState,
+  createPreambleState,
+  supportsRequestStorage,
+  requestStorage,
+  pushFormStateMarkerIsMatching,
+  pushFormStateMarkerIsNotMatching,
+  resetResumableState,
+  completeResumableState,
+  emitEarlyPreloads,
+  bindToConsole,
+  canHavePreamble,
+  hoistPreambleState,
+  isPreambleReady,
+  isPreambleContext,
+  hasSuspenseyContent,
+} from './ReactFizzConfig';
+import {
+  constructClassInstance,
+  mountClassInstance,
+} from './ReactFizzClassComponent';
+import {
+  getMaskedContext,
+  processChildContext,
+  emptyContextObject,
+} from './ReactFizzLegacyContext';
+import {
+  readContext,
+  rootContextSnapshot,
+  switchContext,
+  getActiveContext,
+  pushProvider,
+  popProvider,
+} from './ReactFizzNewContext';
+import {
+  prepareToUseHooks,
+  prepareToUseThenableState,
+  finishHooks,
+  checkDidRenderIdHook,
+  resetHooksState,
+  HooksDispatcher,
+  currentResumableState,
+  setCurrentResumableState,
+  getThenableStateAfterSuspending,
+  unwrapThenable,
+  readPreviousThenableFromState,
+  getActionStateCount,
+  getActionStateMatchingIndex,
+} from './ReactFizzHooks';
+import {DefaultAsyncDispatcher} from './ReactFizzAsyncDispatcher';
+import {
+  getStackByComponentStackNode,
+  getOwnerStackByComponentStackNodeInDev,
+} from './ReactFizzComponentStack';
+import {emptyTreeContext, pushTreeContext} from './ReactFizzTreeContext';
+import {currentTaskInDEV, setCurrentTaskInDEV} from './ReactFizzCurrentTask';
+import {
+  callLazyInitInDEV,
+  callComponentInDEV,
+  callRenderInDEV,
+} from './ReactFizzCallUserSpace';
+import {
+  getViewTransitionClassName,
+  getViewTransitionName,
+} from './ReactFizzViewTransitionComponent';
+
+import {resetOwnerStackLimit} from 'shared/ReactOwnerStackReset';
+import {
+  getIteratorFn,
+  ASYNC_ITERATOR,
+  REACT_ELEMENT_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_CONTEXT_TYPE,
+  REACT_CONSUMER_TYPE,
+  REACT_SCOPE_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  disableLegacyContext,
+  disableLegacyContextForFunctionComponents,
+  enableScopeAPI,
+  enableHalt,
+  enableAsyncIterableChildren,
+  enableViewTransition,
+  enableFizzBlockingRender,
+  enableAsyncDebugInfo,
+  enableCPUSuspense,
+} from 'shared/ReactFeatureFlags';
+
+import assign from 'shared/assign';
+import noop from 'shared/noop';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import isArray from 'shared/isArray';
+import {
+  SuspenseException,
+  getSuspendedThenable,
+  ensureSuspendableThenableStateDEV,
+  getSuspendedCallSiteStackDEV,
+  getSuspendedCallSiteDebugTaskDEV,
+  setCaptureSuspendedCallSiteDEV,
+} from './ReactFizzThenable';
+
+// Linked list representing the identity of a component given the component/tag name and key.
+// The name might be minified but we assume that it's going to be the same generated name. Typically
+// because it's just the same compiled output in practice.
+export type KeyNode = [
+  Root | KeyNode /* parent */,
+  string | null /* name */,
+  string | number /* key */,
+];
+
+type ResumeSlots =
+  | null // nothing to resume
+  | number // resume with segment ID at the root position
+  | {[index: number]: number}; // resume with segmentID at the index
+
+type ReplaySuspenseBoundary = [
+  string | null /* name */,
+  string | number /* key */,
+  Array<ReplayNode> /* content keyed children */,
+  ResumeSlots /* content resumable slots */,
+  null | ReplayNode /* fallback content */,
+  number /* rootSegmentID */,
+];
+
+type ReplayNode =
+  | [
+      string | null /* name */,
+      string | number /* key */,
+      Array<ReplayNode> /* keyed children */,
+      ResumeSlots /* resumable slots */,
+    ]
+  | ReplaySuspenseBoundary;
+
+type PostponedHoles = {
+  workingMap: Map<KeyNode, ReplayNode>,
+  rootNodes: Array<ReplayNode>,
+  rootSlots: ResumeSlots,
+};
+
+type LegacyContext = {
+  [key: string]: any,
+};
+
+type SuspenseListRow = {
+  pendingTasks: number, // The number of tasks, previous rows and inner suspense boundaries blocking this row.
+  boundaries: null | Array<SuspenseBoundary>, // The boundaries in this row waiting to be unblocked by the previous row. (null means this row is not blocked)
+  hoistables: HoistableState, // Any dependencies that this row depends on. Future rows need to also depend on it.
+  inheritedHoistables: null | HoistableState, // Any dependencies that previous row depend on, that new boundaries of this row needs.
+  together: boolean, // All the boundaries within this row must be revealed together.
+  next: null | SuspenseListRow, // The next row blocked by this one.
+};
+
+const CLIENT_RENDERED = 4; // if it errors or infinitely suspends
+
+type SuspenseBoundary = {
+  status: 0 | 1 | 4 | 5,
+  rootSegmentID: number,
+  parentFlushed: boolean,
+  pendingTasks: number, // when it reaches zero we can show this boundary's content
+  row: null | SuspenseListRow, // the row that this boundary blocks from completing.
+  completedSegments: Array<Segment>, // completed but not yet flushed segments.
+  byteSize: number, // used to determine whether to inline children boundaries.
+  defer: boolean, // never inline deferred boundaries
+  fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
+  contentState: HoistableState,
+  fallbackState: HoistableState,
+  preamble: null | Preamble,
+  tracked: null | {
+    contentKeyPath: null | KeyNode, // used to track the path for replay nodes
+    fallbackNode: null | ReplayNode, // used to track the fallback for replay nodes
+  },
+  errorDigest: ?string, // the error hash if it errors
+  // DEV-only fields
+  errorMessage?: null | string, // the error string if it errors
+  errorStack?: null | string, // the error stack if it errors
+  errorComponentStack?: null | string, // the error component stack if it errors
+};
+
+type RenderTask = {
+  replay: null,
+  node: ReactNodeList,
+  childIndex: number,
+  ping: () => void,
+  blockedBoundary: Root | SuspenseBoundary,
+  blockedSegment: Segment, // the segment we'll write to
+  blockedPreamble: null | PreambleState,
+  hoistableState: null | HoistableState, // Boundary state we'll mutate while rendering. This may not equal the state of the blockedBoundary
+  abortSet: Set<Task>, // the abortable set that this task belongs to
+  keyPath: Root | KeyNode, // the path of all parent keys currently rendering
+  formatContext: FormatContext, // the format's specific context (e.g. HTML/SVG/MathML)
+  context: ContextSnapshot, // the current new context that this task is executing in
+  treeContext: TreeContext, // the current tree context that this task is executing in
+  row: null | SuspenseListRow, // the current SuspenseList row that this is rendering inside
+  componentStack: null | ComponentStackNode, // stack frame description of the currently rendering component
+  thenableState: null | ThenableState,
+  legacyContext: LegacyContext, // the current legacy context that this task is executing in
+  debugTask: null | ConsoleTask, // DEV only
+  // DON'T ANY MORE FIELDS. We at 16 in prod already which otherwise requires converting to a constructor.
+  // Consider splitting into multiple objects or consolidating some fields.
+};
+
+type ReplaySet = {
+  nodes: Array<ReplayNode>, // the possible paths to follow down the replaying
+  slots: ResumeSlots, // slots to resume
+  pendingTasks: number, // tracks the number of tasks currently tracking this set of nodes
+  // if pending tasks reach zero but there are still nodes left, it means we couldn't find
+  // them all in the tree, so we need to abort and client render the boundary.
+};
+
+type ReplayTask = {
+  replay: ReplaySet,
+  node: ReactNodeList,
+  childIndex: number,
+  ping: () => void,
+  blockedBoundary: Root | SuspenseBoundary,
+  blockedSegment: null, // we don't write to anything when we replay
+  blockedPreamble: null,
+  hoistableState: null | HoistableState, // Boundary state we'll mutate while rendering. This may not equal the state of the blockedBoundary
+  abortSet: Set<Task>, // the abortable set that this task belongs to
+  keyPath: Root | KeyNode, // the path of all parent keys currently rendering
+  formatContext: FormatContext, // the format's specific context (e.g. HTML/SVG/MathML)
+  context: ContextSnapshot, // the current new context that this task is executing in
+  treeContext: TreeContext, // the current tree context that this task is executing in
+  row: null | SuspenseListRow, // the current SuspenseList row that this is rendering inside
+  componentStack: null | ComponentStackNode, // stack frame description of the currently rendering component
+  thenableState: null | ThenableState,
+  legacyContext: LegacyContext, // the current legacy context that this task is executing in
+  debugTask: null | ConsoleTask, // DEV only
+};
+
+export type Task = RenderTask | ReplayTask;
+
+const PENDING = 0;
+const COMPLETED = 1;
+const FLUSHED = 2;
+const ABORTED = 3;
+const ERRORED = 4;
+const POSTPONED = 5;
+const RENDERING = 6;
+
+type Root = null;
+
+type Segment = {
+  status: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+  parentFlushed: boolean, // typically a segment will be flushed by its parent, except if its parent was already flushed
+  id: number, // starts as 0 and is lazily assigned if the parent flushes early
+  +index: number, // the index within the parent's chunks or 0 at the root
+  +chunks: Array<Chunk | PrecomputedChunk>,
+  +children: Array<Segment>,
+  +preambleChildren: Array<Segment>,
+  // The context that this segment was created in.
+  parentFormatContext: FormatContext,
+  // If this segment represents a fallback, this is the content that will replace that fallback.
+  boundary: null | SuspenseBoundary,
+  // used to discern when text separator boundaries are needed
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+};
+
+const OPENING = 10;
+const OPEN = 11;
+const ABORTING = 12;
+const CLOSING = 13;
+const CLOSED = 14;
+const STALLED_DEV = 15;
+
+export opaque type Request = {
+  destination: null | Destination,
+  flushScheduled: boolean,
+  +resumableState: ResumableState,
+  +renderState: RenderState,
+  +rootFormatContext: FormatContext,
+  +progressiveChunkSize: number,
+  status: 10 | 11 | 12 | 13 | 14 | 15,
+  fatalError: mixed,
+  nextSegmentId: number,
+  allPendingTasks: number, // when it reaches zero, we can close the connection.
+  pendingRootTasks: number, // when this reaches zero, we've finished at least the root boundary.
+  completedRootSegment: null | Segment, // Completed but not yet flushed root segments.
+  completedPreambleSegments: null | Array<Array<Segment>>, // contains the ready-to-flush segments that make up the preamble
+  byteSize: number, // counts the number of bytes accumulated in the shell
+  abortableTasks: Set<Task>,
+  pingedTasks: Array<Task>, // High priority tasks that should be worked on first.
+  // Queues to flush in order of priority
+  clientRenderedBoundaries: Array<SuspenseBoundary>, // Errored or client rendered but not yet flushed.
+  completedBoundaries: Array<SuspenseBoundary>, // Completed but not yet fully flushed boundaries to show.
+  partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
+  trackedPostpones: null | PostponedHoles, // Gets set to non-null while we want to track postponed holes. I.e. during a prerender.
+  // onError is called when an error happens anywhere in the tree. It might recover.
+  // The return string is used in production  primarily to avoid leaking internals, secondarily to save bytes.
+  // Returning null/undefined will cause a defualt error message in production
+  onError: (error: mixed, errorInfo: ThrownInfo) => ?string,
+  // onAllReady is called when all pending task is done but it may not have flushed yet.
+  // This is a good time to start writing if you want only HTML and no intermediate steps.
+  onAllReady: () => void,
+  // onShellReady is called when there is at least a root fallback ready to show.
+  // Typically you don't need this callback because it's best practice to always have a
+  // root fallback ready so there's no need to wait.
+  onShellReady: () => void,
+  // onShellError is called when the shell didn't complete. That means you probably want to
+  // emit a different response to the stream instead.
+  onShellError: (error: mixed) => void,
+  onFatalError: (error: mixed) => void,
+  // Form state that was the result of an MPA submission, if it was provided.
+  formState: null | ReactFormState<any, any>,
+  // DEV-only, warning dedupe
+  didWarnForKey?: null | WeakSet<ComponentStackNode>,
+};
+
+type Preamble = {
+  content: PreambleState,
+  fallback: PreambleState,
+};
+
+function createPreamble(): Preamble {
+  return {
+    content: createPreambleState(),
+    fallback: createPreambleState(),
+  };
+}
+
+// This is a default heuristic for how to split up the HTML content into progressive
+// loading. Our goal is to be able to display additional new content about every 500ms.
+// Faster than that is unnecessary and should be throttled on the client. It also
+// adds unnecessary overhead to do more splits. We don't know if it's a higher or lower
+// end device but higher end suffer less from the overhead than lower end does from
+// not getting small enough pieces. We error on the side of low end.
+// We base this on low end 3G speeds which is about 500kbits per second. We assume
+// that there can be a reasonable drop off from max bandwidth which leaves you with
+// as little as 80%. We can receive half of that each 500ms - at best. In practice,
+// a little bandwidth is lost to processing and contention - e.g. CSS and images that
+// are downloaded along with the main content. So we estimate about half of that to be
+// the lower end throughput. In other words, we expect that you can at least show
+// about 12.5kb of content per 500ms. Not counting starting latency for the first
+// paint.
+// 500 * 1024 / 8 * .8 * 0.5 / 2
+const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
+
+function getBlockingRenderMaxSize(request: Request): number {
+  // We want to make sure that we can block the reveal of a well designed complete
+  // shell but if you have constructed a too large shell (e.g. by not adding any
+  // Suspense boundaries) then that might take too long to render. We shouldn't
+  // punish users (or overzealous metrics tracking) in that scenario.
+  // There's a trade off here. If this limit is too low then you can't fit a
+  // reasonably well built UI within it without getting errors. If it's too high
+  // then things that accidentally fall below it might take too long to load.
+  // Web Vitals target 1.8 seconds for first paint and our goal to have the limit
+  // be fast enough to hit that. For this argument we assume that most external
+  // resources are already cached because it's a return visit, or inline styles.
+  // If it's not, then it's highly unlikely that any render blocking instructions
+  // we add has any impact what so ever on the paint.
+  // Assuming a first byte of about 600ms which is kind of bad but common with a
+  // decent static host. If it's longer e.g. due to dynamic rendering, then you
+  // are going to bound by dynamic production of the content and you're better off
+  // with Suspense boundaries anyway. This number doesn't matter much. Then you
+  // have about 1.2 seconds left for bandwidth. On 3G that gives you about 112.5kb
+  // worth of data. That's worth about 10x in terms of uncompressed bytes. Then we
+  // half that just to account for longer latency, slower bandwidth and CPU processing.
+  // Now we're down to about 500kb. In fact, looking at metrics we've collected with
+  // rel="expect" examples and other documents, the impact on documents smaller than
+  // that is within the noise. That's because there's enough happening within that
+  // start up to not make HTML streaming not significantly better.
+  // Content above the fold tends to be about 100-200kb tops. Therefore 500kb should
+  // be enough head room for a good loading state. After that you should use
+  // Suspense or SuspenseList to improve it.
+  // Since this is highly related to the reason you would adjust the
+  // progressiveChunkSize option, and always has to be higher, we define this limit
+  // in terms of it. So if you want to increase the limit because you have high
+  // bandwidth users, then you can adjust it up. If you are concerned about even
+  // slower bandwidth then you can adjust it down.
+  return request.progressiveChunkSize * 40; // 512kb by default.
+}
+
+function isEligibleForOutlining(
+  request: Request,
+  boundary: SuspenseBoundary,
+): boolean {
+  // For very small boundaries, don't bother producing a fallback for outlining.
+  // The larger this limit is, the more we can save on preparing fallbacks in case we end up
+  // outlining.
+  return (
+    (boundary.byteSize > 500 ||
+      hasSuspenseyContent(boundary.contentState) ||
+      boundary.defer) &&
+    // For boundaries that can possibly contribute to the preamble we don't want to outline
+    // them regardless of their size since the fallbacks should only be emitted if we've
+    // errored the boundary.
+    boundary.preamble === null
+  );
+}
+
+function defaultErrorHandler(error: mixed) {
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    typeof error.environmentName === 'string'
+  ) {
+    // This was a Server error. We print the environment name in a badge just like we do with
+    // replays of console logs to indicate that the source of this throw as actually the Server.
+    bindToConsole('error', [error], error.environmentName)();
+  } else {
+    console['error'](error); // Don't transform to our wrapper
+  }
+  return null;
+}
+
+function RequestInstance(
+  this: $FlowFixMe,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  rootFormatContext: FormatContext,
+  progressiveChunkSize: void | number,
+  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+  formState: void | null | ReactFormState<any, any>,
+) {
+  const pingedTasks: Array<Task> = [];
+  const abortSet: Set<Task> = new Set();
+  this.destination = null;
+  this.flushScheduled = false;
+  this.resumableState = resumableState;
+  this.renderState = renderState;
+  this.rootFormatContext = rootFormatContext;
+  this.progressiveChunkSize =
+    progressiveChunkSize === undefined
+      ? DEFAULT_PROGRESSIVE_CHUNK_SIZE
+      : progressiveChunkSize;
+  this.status = OPENING;
+  this.fatalError = null;
+  this.nextSegmentId = 0;
+  this.allPendingTasks = 0;
+  this.pendingRootTasks = 0;
+  this.completedRootSegment = null;
+  this.completedPreambleSegments = null;
+  this.byteSize = 0;
+  this.abortableTasks = abortSet;
+  this.pingedTasks = pingedTasks;
+  this.clientRenderedBoundaries = ([]: Array<SuspenseBoundary>);
+  this.completedBoundaries = ([]: Array<SuspenseBoundary>);
+  this.partialBoundaries = ([]: Array<SuspenseBoundary>);
+  this.trackedPostpones = null;
+  this.onError = onError === undefined ? defaultErrorHandler : onError;
+  this.onAllReady = onAllReady === undefined ? noop : onAllReady;
+  this.onShellReady = onShellReady === undefined ? noop : onShellReady;
+  this.onShellError = onShellError === undefined ? noop : onShellError;
+  this.onFatalError = onFatalError === undefined ? noop : onFatalError;
+  this.formState = formState === undefined ? null : formState;
+  if (__DEV__) {
+    this.didWarnForKey = null;
+  }
+}
+
+export function createRequest(
+  children: ReactNodeList,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  rootFormatContext: FormatContext,
+  progressiveChunkSize: void | number,
+  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+  formState: void | null | ReactFormState<any, any>,
+): Request {
+  if (__DEV__) {
+    resetOwnerStackLimit();
+  }
+
+  // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
+  const request: Request = new RequestInstance(
+    resumableState,
+    renderState,
+    rootFormatContext,
+    progressiveChunkSize,
+    onError,
+    onAllReady,
+    onShellReady,
+    onShellError,
+    onFatalError,
+    formState,
+  );
+
+  // This segment represents the root fallback.
+  const rootSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    rootFormatContext,
+    // Root segments are never embedded in Text on either edge
+    false,
+    false,
+  );
+  // There is no parent so conceptually, we're unblocked to flush this segment.
+  rootSegment.parentFlushed = true;
+  const rootTask = createRenderTask(
+    request,
+    null,
+    children,
+    -1,
+    null,
+    rootSegment,
+    null,
+    null,
+    request.abortableTasks,
+    null,
+    rootFormatContext,
+    rootContextSnapshot,
+    emptyTreeContext,
+    null,
+    null,
+    emptyContextObject,
+    null,
+  );
+  pushComponentStack(rootTask);
+  request.pingedTasks.push(rootTask);
+  return request;
+}
+
+export function createPrerenderRequest(
+  children: ReactNodeList,
+  resumableState: ResumableState,
+  renderState: RenderState,
+  rootFormatContext: FormatContext,
+  progressiveChunkSize: void | number,
+  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+): Request {
+  const request = createRequest(
+    children,
+    resumableState,
+    renderState,
+    rootFormatContext,
+    progressiveChunkSize,
+    onError,
+    onAllReady,
+    onShellReady,
+    onShellError,
+    onFatalError,
+    undefined,
+  );
+  // Start tracking postponed holes during this render.
+  request.trackedPostpones = {
+    workingMap: new Map(),
+    rootNodes: [],
+    rootSlots: null,
+  };
+  return request;
+}
+
+export function resumeRequest(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  renderState: RenderState,
+  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+): Request {
+  if (__DEV__) {
+    resetOwnerStackLimit();
+  }
+
+  // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
+  const request: Request = new RequestInstance(
+    postponedState.resumableState,
+    renderState,
+    postponedState.rootFormatContext,
+    postponedState.progressiveChunkSize,
+    onError,
+    onAllReady,
+    onShellReady,
+    onShellError,
+    onFatalError,
+    null,
+  );
+  request.nextSegmentId = postponedState.nextSegmentId;
+
+  if (typeof postponedState.replaySlots === 'number') {
+    // We have a resume slot at the very root. This is effectively just a full rerender.
+    const rootSegment = createPendingSegment(
+      request,
+      0,
+      null,
+      postponedState.rootFormatContext,
+      // Root segments are never embedded in Text on either edge
+      false,
+      false,
+    );
+    // There is no parent so conceptually, we're unblocked to flush this segment.
+    rootSegment.parentFlushed = true;
+    const rootTask = createRenderTask(
+      request,
+      null,
+      children,
+      -1,
+      null,
+      rootSegment,
+      null,
+      null,
+      request.abortableTasks,
+      null,
+      postponedState.rootFormatContext,
+      rootContextSnapshot,
+      emptyTreeContext,
+      null,
+      null,
+      emptyContextObject,
+      null,
+    );
+    pushComponentStack(rootTask);
+    request.pingedTasks.push(rootTask);
+    return request;
+  }
+
+  const replay: ReplaySet = {
+    nodes: postponedState.replayNodes,
+    slots: postponedState.replaySlots,
+    pendingTasks: 0,
+  };
+  const rootTask = createReplayTask(
+    request,
+    null,
+    replay,
+    children,
+    -1,
+    null,
+    null,
+    request.abortableTasks,
+    null,
+    postponedState.rootFormatContext,
+    rootContextSnapshot,
+    emptyTreeContext,
+    null,
+    null,
+    emptyContextObject,
+    null,
+  );
+  pushComponentStack(rootTask);
+  request.pingedTasks.push(rootTask);
+  return request;
+}
+
+export function resumeAndPrerenderRequest(
+  children: ReactNodeList,
+  postponedState: PostponedState,
+  renderState: RenderState,
+  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
+): Request {
+  const request = resumeRequest(
+    children,
+    postponedState,
+    renderState,
+    onError,
+    onAllReady,
+    onShellReady,
+    onShellError,
+    onFatalError,
+  );
+  // Start tracking postponed holes during this render.
+  request.trackedPostpones = {
+    workingMap: new Map(),
+    rootNodes: [],
+    rootSlots: null,
+  };
+  return request;
+}
+
+let currentRequest: null | Request = null;
+
+export function resolveRequest(): null | Request {
+  if (currentRequest) return currentRequest;
+  if (supportsRequestStorage) {
+    const store = requestStorage.getStore();
+    if (store) return store;
+  }
+  return null;
+}
+
+function pingTask(request: Request, task: Task): void {
+  const pingedTasks = request.pingedTasks;
+  pingedTasks.push(task);
+  if (request.pingedTasks.length === 1) {
+    request.flushScheduled = request.destination !== null;
+    if (request.trackedPostpones !== null || request.status === OPENING) {
+      scheduleMicrotask(() => performWork(request));
+    } else {
+      scheduleWork(() => performWork(request));
+    }
+  }
+}
+
+function createSuspenseBoundary(
+  request: Request,
+  row: null | SuspenseListRow,
+  fallbackAbortableTasks: Set<Task>,
+  preamble: null | Preamble,
+  defer: boolean,
+): SuspenseBoundary {
+  const boundary: SuspenseBoundary = {
+    status: PENDING,
+    rootSegmentID: -1,
+    parentFlushed: false,
+    pendingTasks: 0,
+    row: row,
+    completedSegments: [],
+    byteSize: 0,
+    defer: defer,
+    fallbackAbortableTasks,
+    errorDigest: null,
+    contentState: createHoistableState(),
+    fallbackState: createHoistableState(),
+    preamble,
+    tracked: null,
+  };
+  if (__DEV__) {
+    // DEV-only fields for hidden class
+    boundary.errorMessage = null;
+    boundary.errorStack = null;
+    boundary.errorComponentStack = null;
+  }
+  if (row !== null) {
+    // This boundary will block this row from completing.
+    row.pendingTasks++;
+    const blockedBoundaries = row.boundaries;
+    if (blockedBoundaries !== null) {
+      // Previous rows will block this boundary itself from completing.
+      request.allPendingTasks++;
+      boundary.pendingTasks++;
+      blockedBoundaries.push(boundary);
+    }
+    const inheritedHoistables = row.inheritedHoistables;
+    if (inheritedHoistables !== null) {
+      hoistHoistables(boundary.contentState, inheritedHoistables);
+    }
+  }
+  return boundary;
+}
+
+function createRenderTask(
+  request: Request,
+  thenableState: ThenableState | null,
+  node: ReactNodeList,
+  childIndex: number,
+  blockedBoundary: Root | SuspenseBoundary,
+  blockedSegment: Segment,
+  blockedPreamble: null | PreambleState,
+  hoistableState: null | HoistableState,
+  abortSet: Set<Task>,
+  keyPath: Root | KeyNode,
+  formatContext: FormatContext,
+  context: ContextSnapshot,
+  treeContext: TreeContext,
+  row: null | SuspenseListRow,
+  componentStack: null | ComponentStackNode,
+  legacyContext: LegacyContext,
+  debugTask: null | ConsoleTask,
+): RenderTask {
+  request.allPendingTasks++;
+  if (blockedBoundary === null) {
+    request.pendingRootTasks++;
+  } else {
+    blockedBoundary.pendingTasks++;
+  }
+  if (row !== null) {
+    row.pendingTasks++;
+  }
+  const task: RenderTask = ({
+    replay: null,
+    node,
+    childIndex,
+    ping: () => pingTask(request, task),
+    blockedBoundary,
+    blockedSegment,
+    blockedPreamble,
+    hoistableState,
+    abortSet,
+    keyPath,
+    formatContext,
+    context,
+    treeContext,
+    row,
+    componentStack,
+    thenableState,
+  }: any);
+  if (!disableLegacyContext) {
+    task.legacyContext = legacyContext;
+  }
+  if (__DEV__) {
+    task.debugTask = debugTask;
+  }
+  abortSet.add(task);
+  return task;
+}
+
+function createReplayTask(
+  request: Request,
+  thenableState: ThenableState | null,
+  replay: ReplaySet,
+  node: ReactNodeList,
+  childIndex: number,
+  blockedBoundary: Root | SuspenseBoundary,
+  hoistableState: null | HoistableState,
+  abortSet: Set<Task>,
+  keyPath: Root | KeyNode,
+  formatContext: FormatContext,
+  context: ContextSnapshot,
+  treeContext: TreeContext,
+  row: null | SuspenseListRow,
+  componentStack: null | ComponentStackNode,
+  legacyContext: LegacyContext,
+  debugTask: null | ConsoleTask,
+): ReplayTask {
+  request.allPendingTasks++;
+  if (blockedBoundary === null) {
+    request.pendingRootTasks++;
+  } else {
+    blockedBoundary.pendingTasks++;
+  }
+  if (row !== null) {
+    row.pendingTasks++;
+  }
+  replay.pendingTasks++;
+  const task: ReplayTask = ({
+    replay,
+    node,
+    childIndex,
+    ping: () => pingTask(request, task),
+    blockedBoundary,
+    blockedSegment: null,
+    blockedPreamble: null,
+    hoistableState,
+    abortSet,
+    keyPath,
+    formatContext,
+    context,
+    treeContext,
+    row,
+    componentStack,
+    thenableState,
+  }: any);
+  if (!disableLegacyContext) {
+    task.legacyContext = legacyContext;
+  }
+  if (__DEV__) {
+    task.debugTask = debugTask;
+  }
+  abortSet.add(task);
+  return task;
+}
+
+function createPendingSegment(
+  request: Request,
+  index: number,
+  boundary: null | SuspenseBoundary,
+  parentFormatContext: FormatContext,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): Segment {
+  return {
+    status: PENDING,
+    parentFlushed: false,
+    id: -1, // lazily assigned later
+    index,
+    chunks: [],
+    children: [],
+    preambleChildren: [],
+    parentFormatContext,
+    boundary,
+    lastPushedText,
+    textEmbedded,
+  };
+}
+
+function getCurrentStackInDEV(): string {
+  if (__DEV__) {
+    if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
+      return '';
+    }
+    return getOwnerStackByComponentStackNodeInDev(
+      currentTaskInDEV.componentStack,
+    );
+  }
+  return '';
+}
+
+function getStackFromNode(stackNode: ComponentStackNode): string {
+  return getStackByComponentStackNode(stackNode);
+}
+
+function pushHaltedAwaitOnComponentStack(
+  task: Task,
+  debugInfo: void | null | ReactDebugInfo,
+): void {
+  if (!__DEV__) {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'pushHaltedAwaitOnComponentStack should never be called in production. This is a bug in React.',
+    );
+  }
+  if (debugInfo != null) {
+    for (let i = debugInfo.length - 1; i >= 0; i--) {
+      const info = debugInfo[i];
+      if (info.awaited != null) {
+        const asyncInfo: ReactAsyncInfo = (info: any);
+        const bestStack =
+          asyncInfo.debugStack == null ? asyncInfo.awaited : asyncInfo;
+        if (bestStack.debugStack !== undefined) {
+          task.componentStack = {
+            parent: task.componentStack,
+            type: asyncInfo,
+            owner: bestStack.owner,
+            stack: bestStack.debugStack,
+          };
+          task.debugTask = (bestStack.debugTask: any);
+          break;
+        }
+      }
+    }
+  }
+}
+
+// performWork + retryTask without mutation
+function rerenderStalledTask(request: Request, task: Task): void {
+  const prevStatus = request.status;
+  request.status = STALLED_DEV;
+
+  const prevContext = getActiveContext();
+  const prevDispatcher = ReactSharedInternals.H;
+  ReactSharedInternals.H = HooksDispatcher;
+  const prevAsyncDispatcher = ReactSharedInternals.A;
+  ReactSharedInternals.A = DefaultAsyncDispatcher;
+
+  const prevRequest = currentRequest;
+  currentRequest = request;
+
+  const prevGetCurrentStackImpl = ReactSharedInternals.getCurrentStack;
+  ReactSharedInternals.getCurrentStack = getCurrentStackInDEV;
+
+  const prevResumableState = currentResumableState;
+  setCurrentResumableState(request.resumableState);
+  switchContext(task.context);
+  const prevTaskInDEV = currentTaskInDEV;
+  setCurrentTaskInDEV(task);
+  try {
+    retryNode(request, task);
+  } catch (x) {
+    // Suspended again.
+    resetHooksState();
+  } finally {
+    setCurrentTaskInDEV(prevTaskInDEV);
+    setCurrentResumableState(prevResumableState);
+
+    ReactSharedInternals.H = prevDispatcher;
+    ReactSharedInternals.A = prevAsyncDispatcher;
+
+    ReactSharedInternals.getCurrentStack = prevGetCurrentStackImpl;
+    if (prevDispatcher === HooksDispatcher) {
+      // This means that we were in a reentrant work loop. This could happen
+      // in a renderer that supports synchronous work like renderToString,
+      // when it's called from within another renderer.
+      // Normally we don't bother switching the contexts to their root/default
+      // values when leaving because we'll likely need the same or similar
+      // context again. However, when we're inside a synchronous loop like this
+      // we'll to restore the context to what it was before returning.
+      switchContext(prevContext);
+    }
+    currentRequest = prevRequest;
+    request.status = prevStatus;
+  }
+}
+
+function pushSuspendedCallSiteOnComponentStack(
+  request: Request,
+  task: Task,
+): void {
+  setCaptureSuspendedCallSiteDEV(true);
+  const restoreThenableState = ensureSuspendableThenableStateDEV(
+    // refined at the callsite
+    ((task.thenableState: any): ThenableState),
+  );
+  try {
+    rerenderStalledTask(request, task);
+  } finally {
+    restoreThenableState();
+    setCaptureSuspendedCallSiteDEV(false);
+  }
+
+  const suspendCallSiteStack = getSuspendedCallSiteStackDEV();
+  const suspendCallSiteDebugTask = getSuspendedCallSiteDebugTaskDEV();
+
+  if (suspendCallSiteStack !== null) {
+    const ownerStack = task.componentStack;
+    task.componentStack = {
+      // The owner of the suspended call site would be the owner of this task.
+      // We need the task itself otherwise we'd miss a frame.
+      owner: ownerStack,
+      parent: suspendCallSiteStack.parent,
+      stack: suspendCallSiteStack.stack,
+      type: suspendCallSiteStack.type,
+    };
+  }
+  task.debugTask = suspendCallSiteDebugTask;
+}
+
+function pushServerComponentStack(
+  task: Task,
+  debugInfo: void | null | ReactDebugInfo,
+): void {
+  if (!__DEV__) {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'pushServerComponentStack should never be called in production. This is a bug in React.',
+    );
+  }
+  // Build a Server Component parent stack from the debugInfo.
+  if (debugInfo != null) {
+    const stack: ReactDebugInfo = debugInfo;
+    for (let i = 0; i < stack.length; i++) {
+      const componentInfo: ReactComponentInfo = (stack[i]: any);
+      if (typeof componentInfo.name !== 'string') {
+        continue;
+      }
+      if (componentInfo.debugStack === undefined) {
+        continue;
+      }
+      task.componentStack = {
+        parent: task.componentStack,
+        type: componentInfo,
+        owner: componentInfo.owner,
+        stack: componentInfo.debugStack,
+      };
+      task.debugTask = (componentInfo.debugTask: any);
+    }
+  }
+}
+
+function pushComponentStack(task: Task): void {
+  const node = task.node;
+  // Create the Component Stack frame for the element we're about to try.
+  // It's unfortunate that we need to do this refinement twice. Once for
+  // the stack frame and then once again while actually
+  if (typeof node === 'object' && node !== null) {
+    switch ((node: any).$$typeof) {
+      case REACT_ELEMENT_TYPE: {
+        const element: any = node;
+        const type = element.type;
+        const owner = __DEV__ ? element._owner : null;
+        const stack = __DEV__ ? element._debugStack : null;
+        if (__DEV__) {
+          pushServerComponentStack(task, element._debugInfo);
+          task.debugTask = element._debugTask;
+        }
+        task.componentStack = createComponentStackFromType(
+          task.componentStack,
+          type,
+          owner,
+          stack,
+        );
+        break;
+      }
+      case REACT_LAZY_TYPE: {
+        if (__DEV__) {
+          const lazyNode: LazyComponentType<any, any> = (node: any);
+          pushServerComponentStack(task, lazyNode._debugInfo);
+        }
+        break;
+      }
+      default: {
+        if (__DEV__) {
+          const maybeUsable: Object = node;
+          if (typeof maybeUsable.then === 'function') {
+            const thenable: Thenable<ReactNodeList> = (maybeUsable: any);
+            pushServerComponentStack(task, thenable._debugInfo);
+          }
+        }
+      }
+    }
+  }
+}
+
+function createComponentStackFromType(
+  parent: null | ComponentStackNode,
+  type: Function | string | symbol,
+  owner: void | null | ReactComponentInfo | ComponentStackNode, // DEV only
+  stack: void | null | string | Error, // DEV only
+): ComponentStackNode {
+  if (__DEV__) {
+    return {
+      parent,
+      type,
+      owner,
+      stack,
+    };
+  }
+  return {
+    parent,
+    type,
+  };
+}
+
+function replaceSuspenseComponentStackWithSuspenseFallbackStack(
+  componentStack: null | ComponentStackNode,
+): null | ComponentStackNode {
+  if (componentStack === null) {
+    return null;
+  }
+  return createComponentStackFromType(
+    componentStack.parent,
+    'Suspense Fallback',
+    __DEV__ ? componentStack.owner : null,
+    __DEV__ ? componentStack.stack : null,
+  );
+}
+
+type ThrownInfo = {
+  componentStack?: string,
+};
+export type ErrorInfo = ThrownInfo;
+
+function getThrownInfo(node: null | ComponentStackNode): ThrownInfo {
+  const errorInfo: ThrownInfo = {};
+  if (node) {
+    Object.defineProperty(errorInfo, 'componentStack', {
+      configurable: true,
+      enumerable: true,
+      get() {
+        // Lazyily generate the stack since it's expensive.
+        const stack = getStackFromNode(node);
+        Object.defineProperty(errorInfo, 'componentStack', {
+          value: stack,
+        });
+        return stack;
+      },
+    });
+  }
+  return errorInfo;
+}
+
+function encodeErrorForBoundary(
+  boundary: SuspenseBoundary,
+  digest: ?string,
+  error: mixed,
+  thrownInfo: ThrownInfo,
+  wasAborted: boolean,
+) {
+  boundary.errorDigest = digest;
+  if (__DEV__) {
+    let message, stack;
+    // In dev we additionally encode the error message and component stack on the boundary
+    if (error instanceof Error) {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      message = String(error.message);
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      stack = String(error.stack);
+    } else if (typeof error === 'object' && error !== null) {
+      message = describeObjectForErrorMessage(error);
+      stack = null;
+    } else {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      message = String(error);
+      stack = null;
+    }
+    const prefix = wasAborted
+      ? 'Switched to client rendering because the server rendering aborted due to:\n\n'
+      : 'Switched to client rendering because the server rendering errored:\n\n';
+    boundary.errorMessage = prefix + message;
+    boundary.errorStack = stack !== null ? prefix + stack : null;
+    boundary.errorComponentStack = thrownInfo.componentStack;
+  }
+}
+
+function logRecoverableError(
+  request: Request,
+  error: any,
+  errorInfo: ThrownInfo,
+  debugTask: null | ConsoleTask,
+): ?string {
+  // If this callback errors, we intentionally let that error bubble up to become a fatal error
+  // so that someone fixes the error reporting instead of hiding it.
+  const onError = request.onError;
+  const errorDigest =
+    __DEV__ && debugTask
+      ? debugTask.run(onError.bind(null, error, errorInfo))
+      : onError(error, errorInfo);
+  if (errorDigest != null && typeof errorDigest !== 'string') {
+    // We used to throw here but since this gets called from a variety of unprotected places it
+    // seems better to just warn and discard the returned value.
+    if (__DEV__) {
+      console.error(
+        'onError returned something with a type other than "string". onError should return a string and may return null or undefined but must not return anything else. It received something of type "%s" instead',
+        typeof errorDigest,
+      );
+    }
+    return;
+  }
+  return errorDigest;
+}
+
+function fatalError(
+  request: Request,
+  error: mixed,
+  errorInfo: ThrownInfo,
+  debugTask: null | ConsoleTask,
+): void {
+  // This is called outside error handling code such as if the root errors outside
+  // a suspense boundary or if the root suspense boundary's fallback errors.
+  // It's also called if React itself or its host configs errors.
+  const onShellError = request.onShellError;
+  const onFatalError = request.onFatalError;
+  if (__DEV__ && debugTask) {
+    debugTask.run(onShellError.bind(null, error));
+    debugTask.run(onFatalError.bind(null, error));
+  } else {
+    onShellError(error);
+    onFatalError(error);
+  }
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
+}
+
+function renderSuspenseBoundary(
+  request: Request,
+  someTask: Task,
+  keyPath: KeyNode,
+  props: SuspenseProps,
+): void {
+  if (someTask.replay !== null) {
+    // If we're replaying through this pass, it means we're replaying through
+    // an already completed Suspense boundary. It's too late to do anything about it
+    // so we can just render through it.
+    const prevKeyPath = someTask.keyPath;
+    const prevContext = someTask.formatContext;
+    const prevRow = someTask.row;
+    someTask.keyPath = keyPath;
+    someTask.formatContext = getSuspenseContentFormatContext(
+      request.resumableState,
+      prevContext,
+    );
+    someTask.row = null;
+    const content: ReactNodeList = props.children;
+    try {
+      renderNode(request, someTask, content, -1);
+    } finally {
+      someTask.keyPath = prevKeyPath;
+      someTask.formatContext = prevContext;
+      someTask.row = prevRow;
+    }
+    return;
+  }
+  // $FlowFixMe: Refined.
+  const task: RenderTask = someTask;
+
+  const prevKeyPath = task.keyPath;
+  const prevContext = task.formatContext;
+  const prevRow = task.row;
+  const parentBoundary = task.blockedBoundary;
+  const parentPreamble = task.blockedPreamble;
+  const parentHoistableState = task.hoistableState;
+  const parentSegment = task.blockedSegment;
+
+  // Each time we enter a suspense boundary, we split out into a new segment for
+  // the fallback so that we can later replace that segment with the content.
+  // This also lets us split out the main content even if it doesn't suspend,
+  // in case it ends up generating a large subtree of content.
+  const fallback: ReactNodeList = props.fallback;
+  const content: ReactNodeList = props.children;
+  const defer: boolean = enableCPUSuspense && props.defer === true;
+
+  const fallbackAbortSet: Set<Task> = new Set();
+  const newBoundary = createSuspenseBoundary(
+    request,
+    task.row,
+    fallbackAbortSet,
+    canHavePreamble(task.formatContext) ? createPreamble() : null,
+    defer,
+  );
+
+  const insertionIndex = parentSegment.chunks.length;
+  // The children of the boundary segment is actually the fallback.
+  const boundarySegment = createPendingSegment(
+    request,
+    insertionIndex,
+    newBoundary,
+    task.formatContext,
+    // boundaries never require text embedding at their edges because comment nodes bound them
+    false,
+    false,
+  );
+  parentSegment.children.push(boundarySegment);
+  // The parentSegment has a child Segment at this index so we reset the lastPushedText marker on the parent
+  parentSegment.lastPushedText = false;
+
+  // This segment is the actual child content. We can start rendering that immediately.
+  const contentRootSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    task.formatContext,
+    // boundaries never require text embedding at their edges because comment nodes bound them
+    false,
+    false,
+  );
+  // We mark the root segment as having its parent flushed. It's not really flushed but there is
+  // no parent segment so there's nothing to wait on.
+  contentRootSegment.parentFlushed = true;
+
+  const trackedPostpones = request.trackedPostpones;
+  if (trackedPostpones !== null || defer) {
+    // This is a prerender or deferred boundary. In this mode we want to render the fallback synchronously
+    // and schedule the content to render later. This is the opposite of what we do during a normal render
+    // where we try to skip rendering the fallback if the content itself can render synchronously
+
+    // Stash the original stack frame.
+    const suspenseComponentStack = task.componentStack;
+
+    const fallbackKeyPath: KeyNode = [
+      keyPath[0],
+      'Suspense Fallback',
+      keyPath[2],
+    ];
+    if (trackedPostpones !== null) {
+      const fallbackReplayNode: ReplayNode = [
+        fallbackKeyPath[1],
+        fallbackKeyPath[2],
+        ([]: Array<ReplayNode>),
+        null,
+      ];
+      trackedPostpones.workingMap.set(fallbackKeyPath, fallbackReplayNode);
+      newBoundary.tracked = {
+        contentKeyPath: keyPath,
+        // We are rendering the fallback before the boundary content so we keep track of
+        // the fallback replay node until we determine if the primary content suspends
+        fallbackNode: fallbackReplayNode,
+      };
+    }
+
+    task.blockedSegment = boundarySegment;
+    task.blockedPreamble =
+      newBoundary.preamble === null ? null : newBoundary.preamble.fallback;
+    task.keyPath = fallbackKeyPath;
+    task.formatContext = getSuspenseFallbackFormatContext(
+      request.resumableState,
+      prevContext,
+    );
+    task.componentStack =
+      replaceSuspenseComponentStackWithSuspenseFallbackStack(
+        suspenseComponentStack,
+      );
+    boundarySegment.status = RENDERING;
+    try {
+      renderNode(request, task, fallback, -1);
+      pushSegmentFinale(
+        boundarySegment.chunks,
+        request.renderState,
+        boundarySegment.lastPushedText,
+        boundarySegment.textEmbedded,
+      );
+      boundarySegment.status = COMPLETED;
+      finishedSegment(request, parentBoundary, boundarySegment);
+    } catch (thrownValue: mixed) {
+      if (request.status === ABORTING) {
+        boundarySegment.status = ABORTED;
+      } else {
+        boundarySegment.status = ERRORED;
+      }
+      throw thrownValue;
+    } finally {
+      task.blockedSegment = parentSegment;
+      task.blockedPreamble = parentPreamble;
+      task.keyPath = prevKeyPath;
+      task.formatContext = prevContext;
+    }
+
+    // We create a suspended task for the primary content because we want to allow
+    // sibling fallbacks to be rendered first.
+    const suspendedPrimaryTask = createRenderTask(
+      request,
+      null,
+      content,
+      -1,
+      newBoundary,
+      contentRootSegment,
+      newBoundary.preamble === null ? null : newBoundary.preamble.content,
+      newBoundary.contentState,
+      task.abortSet,
+      keyPath,
+      getSuspenseContentFormatContext(
+        request.resumableState,
+        task.formatContext,
+      ),
+      task.context,
+      task.treeContext,
+      null, // The row gets reset inside the Suspense boundary.
+      suspenseComponentStack,
+      !disableLegacyContext ? task.legacyContext : emptyContextObject,
+      __DEV__ ? task.debugTask : null,
+    );
+    pushComponentStack(suspendedPrimaryTask);
+    request.pingedTasks.push(suspendedPrimaryTask);
+  } else {
+    // This is a normal render. We will attempt to synchronously render the boundary content
+    // If it is successful we will elide the fallback task but if it suspends or errors we schedule
+    // the fallback to render. Unlike with prerenders we attempt to deprioritize the fallback render
+
+    // Currently this is running synchronously. We could instead schedule this to pingedTasks.
+    // I suspect that there might be some efficiency benefits from not creating the suspended task
+    // and instead just using the stack if possible.
+    // TODO: Call this directly instead of messing with saving and restoring contexts.
+
+    // We can reuse the current context and task to render the content immediately without
+    // context switching. We just need to temporarily switch which boundary and which segment
+    // we're writing to. If something suspends, it'll spawn new suspended task with that context.
+    task.blockedBoundary = newBoundary;
+    task.blockedPreamble =
+      newBoundary.preamble === null ? null : newBoundary.preamble.content;
+    task.hoistableState = newBoundary.contentState;
+    task.blockedSegment = contentRootSegment;
+    task.keyPath = keyPath;
+    task.formatContext = getSuspenseContentFormatContext(
+      request.resumableState,
+      prevContext,
+    );
+    task.row = null;
+    contentRootSegment.status = RENDERING;
+
+    try {
+      // We use the safe form because we don't handle suspending here. Only error handling.
+      renderNode(request, task, content, -1);
+      pushSegmentFinale(
+        contentRootSegment.chunks,
+        request.renderState,
+        contentRootSegment.lastPushedText,
+        contentRootSegment.textEmbedded,
+      );
+      contentRootSegment.status = COMPLETED;
+      finishedSegment(request, newBoundary, contentRootSegment);
+      queueCompletedSegment(newBoundary, contentRootSegment);
+      if (newBoundary.pendingTasks === 0 && newBoundary.status === PENDING) {
+        // This must have been the last segment we were waiting on. This boundary is now complete.
+        newBoundary.status = COMPLETED;
+        // Therefore we won't need the fallback. We early return so that we don't have to create
+        // the fallback. However, if this boundary ended up big enough to be eligible for outlining
+        // we can't do that because we might still need the fallback if we outline it.
+        if (!isEligibleForOutlining(request, newBoundary)) {
+          if (prevRow !== null) {
+            // If we have synchronously completed the boundary and it's not eligible for outlining
+            // then we don't have to wait for it to be flushed before we unblock future rows.
+            // This lets us inline small rows in order.
+            if (--prevRow.pendingTasks === 0) {
+              finishSuspenseListRow(request, prevRow);
+            }
+          }
+          if (request.pendingRootTasks === 0 && task.blockedPreamble) {
+            // The root is complete and this boundary may contribute part of the preamble.
+            // We eagerly attempt to prepare the preamble here because we expect most requests
+            // to have few boundaries which contribute preambles and it allow us to do this
+            // preparation work during the work phase rather than the when flushing.
+            preparePreamble(request);
+          }
+          return;
+        }
+      } else {
+        const boundaryRow = prevRow;
+        if (boundaryRow !== null && boundaryRow.together) {
+          tryToResolveTogetherRow(request, boundaryRow);
+        }
+      }
+    } catch (thrownValue: mixed) {
+      newBoundary.status = CLIENT_RENDERED;
+      let error: mixed;
+      if (request.status === ABORTING) {
+        contentRootSegment.status = ABORTED;
+        error = request.fatalError;
+      } else {
+        contentRootSegment.status = ERRORED;
+        error = thrownValue;
+      }
+
+      const thrownInfo = getThrownInfo(task.componentStack);
+      const errorDigest = logRecoverableError(
+        request,
+        error,
+        thrownInfo,
+        __DEV__ ? task.debugTask : null,
+      );
+      encodeErrorForBoundary(
+        newBoundary,
+        errorDigest,
+        error,
+        thrownInfo,
+        false,
+      );
+
+      untrackBoundary(request, newBoundary);
+
+      // We don't need to decrement any task numbers because we didn't spawn any new task.
+      // We don't need to schedule any task because we know the parent has written yet.
+      // We do need to fallthrough to create the fallback though.
+    } finally {
+      task.blockedBoundary = parentBoundary;
+      task.blockedPreamble = parentPreamble;
+      task.hoistableState = parentHoistableState;
+      task.blockedSegment = parentSegment;
+      task.keyPath = prevKeyPath;
+      task.formatContext = prevContext;
+      task.row = prevRow;
+    }
+
+    const fallbackKeyPath: KeyNode = [
+      keyPath[0],
+      'Suspense Fallback',
+      keyPath[2],
+    ];
+    // We create suspended task for the fallback because we don't want to actually work
+    // on it yet in case we finish the main content, so we queue for later.
+    const suspendedFallbackTask = createRenderTask(
+      request,
+      null,
+      fallback,
+      -1,
+      parentBoundary,
+      boundarySegment,
+      newBoundary.preamble === null ? null : newBoundary.preamble.fallback,
+      newBoundary.fallbackState,
+      fallbackAbortSet,
+      fallbackKeyPath,
+      getSuspenseFallbackFormatContext(
+        request.resumableState,
+        task.formatContext,
+      ),
+      task.context,
+      task.treeContext,
+      task.row,
+      replaceSuspenseComponentStackWithSuspenseFallbackStack(
+        task.componentStack,
+      ),
+      !disableLegacyContext ? task.legacyContext : emptyContextObject,
+      __DEV__ ? task.debugTask : null,
+    );
+    pushComponentStack(suspendedFallbackTask);
+    // TODO: This should be queued at a separate lower priority queue so that we only work
+    // on preparing fallbacks if we don't have any more main content to task on.
+    request.pingedTasks.push(suspendedFallbackTask);
+  }
+}
+
+function replaySuspenseBoundary(
+  request: Request,
+  task: ReplayTask,
+  keyPath: KeyNode,
+  props: Object,
+  id: number,
+  childNodes: Array<ReplayNode>,
+  childSlots: ResumeSlots,
+  fallbackNodes: Array<ReplayNode>,
+  fallbackSlots: ResumeSlots,
+): void {
+  const prevKeyPath = task.keyPath;
+  const prevContext = task.formatContext;
+  const prevRow = task.row;
+  const previousReplaySet: ReplaySet = task.replay;
+
+  const parentBoundary = task.blockedBoundary;
+  const parentHoistableState = task.hoistableState;
+
+  const content: ReactNodeList = props.children;
+  const fallback: ReactNodeList = props.fallback;
+  const defer: boolean = enableCPUSuspense && props.defer === true;
+
+  const fallbackAbortSet: Set<Task> = new Set();
+  const resumedBoundary = createSuspenseBoundary(
+    request,
+    task.row,
+    fallbackAbortSet,
+    canHavePreamble(task.formatContext) ? createPreamble() : null,
+    defer,
+  );
+  resumedBoundary.parentFlushed = true;
+  // We restore the same id of this boundary as was used during prerender.
+  resumedBoundary.rootSegmentID = id;
+
+  // We can reuse the current context and task to render the content immediately without
+  // context switching. We just need to temporarily switch which boundary and replay node
+  // we're writing to. If something suspends, it'll spawn new suspended task with that context.
+  task.blockedBoundary = resumedBoundary;
+  task.hoistableState = resumedBoundary.contentState;
+  task.keyPath = keyPath;
+  task.formatContext = getSuspenseContentFormatContext(
+    request.resumableState,
+    prevContext,
+  );
+  task.row = null;
+  task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
+
+  try {
+    // We use the safe form because we don't handle suspending here. Only error handling.
+    renderNode(request, task, content, -1);
+
+    if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
+      throw new Error(
+        "Couldn't find all resumable slots by key/index during replaying. " +
+          "The tree doesn't match so React will fallback to client rendering.",
+      );
+    }
+    task.replay.pendingTasks--;
+    if (
+      resumedBoundary.pendingTasks === 0 &&
+      resumedBoundary.status === PENDING
+    ) {
+      // This must have been the last segment we were waiting on. This boundary is now complete.
+      // Therefore we won't need the fallback. We early return so that we don't have to create
+      // the fallback.
+      resumedBoundary.status = COMPLETED;
+      request.completedBoundaries.push(resumedBoundary);
+      // We restore the parent componentStack. Semantically this is the same as
+      // popComponentStack(task) but we do this instead because it should be slightly
+      // faster
+      return;
+    }
+  } catch (error: mixed) {
+    resumedBoundary.status = CLIENT_RENDERED;
+    const thrownInfo = getThrownInfo(task.componentStack);
+    const errorDigest = logRecoverableError(
+      request,
+      error,
+      thrownInfo,
+      __DEV__ ? task.debugTask : null,
+    );
+    encodeErrorForBoundary(
+      resumedBoundary,
+      errorDigest,
+      error,
+      thrownInfo,
+      false,
+    );
+
+    task.replay.pendingTasks--;
+
+    // The parent already flushed in the prerender so we need to schedule this to be emitted.
+    request.clientRenderedBoundaries.push(resumedBoundary);
+
+    // We don't need to decrement any task numbers because we didn't spawn any new task.
+    // We don't need to schedule any task because we know the parent has written yet.
+    // We do need to fallthrough to create the fallback though.
+  } finally {
+    task.blockedBoundary = parentBoundary;
+    task.hoistableState = parentHoistableState;
+    task.replay = previousReplaySet;
+    task.keyPath = prevKeyPath;
+    task.formatContext = prevContext;
+    task.row = prevRow;
+  }
+
+  const fallbackKeyPath: KeyNode = [
+    keyPath[0],
+    'Suspense Fallback',
+    keyPath[2],
+  ];
+
+  // We create suspended task for the fallback because we don't want to actually work
+  // on it yet in case we finish the main content, so we queue for later.
+  const fallbackReplay = {
+    nodes: fallbackNodes,
+    slots: fallbackSlots,
+    pendingTasks: 0,
+  };
+  const suspendedFallbackTask = createReplayTask(
+    request,
+    null,
+    fallbackReplay,
+    fallback,
+    -1,
+    parentBoundary,
+    resumedBoundary.fallbackState,
+    fallbackAbortSet,
+    fallbackKeyPath,
+    getSuspenseFallbackFormatContext(
+      request.resumableState,
+      task.formatContext,
+    ),
+    task.context,
+    task.treeContext,
+    task.row,
+    replaceSuspenseComponentStackWithSuspenseFallbackStack(task.componentStack),
+    !disableLegacyContext ? task.legacyContext : emptyContextObject,
+    __DEV__ ? task.debugTask : null,
+  );
+
+  pushComponentStack(suspendedFallbackTask);
+  // TODO: This should be queued at a separate lower priority queue so that we only work
+  // on preparing fallbacks if we don't have any more main content to task on.
+  request.pingedTasks.push(suspendedFallbackTask);
+}
+
+function finishSuspenseListRow(request: Request, row: SuspenseListRow): void {
+  // This row finished. Now we have to unblock all the next rows that were blocked on this.
+  unblockSuspenseListRow(request, row.next, row.hoistables);
+}
+
+function unblockSuspenseListRow(
+  request: Request,
+  unblockedRow: null | SuspenseListRow,
+  inheritedHoistables: null | HoistableState,
+): void {
+  // We do this in a loop to avoid stack overflow for very long lists that get unblocked.
+  while (unblockedRow !== null) {
+    if (inheritedHoistables !== null) {
+      // Hoist any hoistables from the previous row into the next row so that it can be
+      // later transferred to all the rows.
+      hoistHoistables(unblockedRow.hoistables, inheritedHoistables);
+      // Mark the row itself for any newly discovered Suspense boundaries to inherit.
+      // This is different from hoistables because that also includes hoistables from
+      // all the boundaries below this row and not just previous rows.
+      unblockedRow.inheritedHoistables = inheritedHoistables;
+    }
+    // Unblocking the boundaries will decrement the count of this row but we keep it above
+    // zero so they never finish this row recursively.
+    const unblockedBoundaries = unblockedRow.boundaries;
+    if (unblockedBoundaries !== null) {
+      unblockedRow.boundaries = null;
+      for (let i = 0; i < unblockedBoundaries.length; i++) {
+        const unblockedBoundary = unblockedBoundaries[i];
+        if (inheritedHoistables !== null) {
+          hoistHoistables(unblockedBoundary.contentState, inheritedHoistables);
+        }
+        finishedTask(request, unblockedBoundary, null, null);
+      }
+    }
+    // Instead we decrement at the end to keep it all in this loop.
+    unblockedRow.pendingTasks--;
+    if (unblockedRow.pendingTasks > 0) {
+      // Still blocked.
+      break;
+    }
+    inheritedHoistables = unblockedRow.hoistables;
+    unblockedRow = unblockedRow.next;
+  }
+}
+
+function trackPostponedSuspenseListRow(
+  request: Request,
+  trackedPostpones: PostponedHoles,
+  postponedRow: null | SuspenseListRow,
+): void {
+  // TODO: Because we unconditionally call this, it will be called by finishedTask
+  // and so ends up recursive which can lead to stack overflow for very long lists.
+  if (postponedRow !== null) {
+    const postponedBoundaries = postponedRow.boundaries;
+    if (postponedBoundaries !== null) {
+      postponedRow.boundaries = null;
+      for (let i = 0; i < postponedBoundaries.length; i++) {
+        const postponedBoundary = postponedBoundaries[i];
+        trackPostponedBoundary(request, trackedPostpones, postponedBoundary);
+        finishedTask(request, postponedBoundary, null, null);
+      }
+    }
+  }
+}
+
+function tryToResolveTogetherRow(
+  request: Request,
+  togetherRow: SuspenseListRow,
+): void {
+  // If we have a "together" row and all the pendingTasks are really the boundaries themselves,
+  // and we won't outline any of them then we can unblock this row early so that we can inline
+  // all the boundaries at once.
+  const boundaries = togetherRow.boundaries;
+  if (boundaries === null || togetherRow.pendingTasks !== boundaries.length) {
+    return;
+  }
+  let allCompleteAndInlinable = true;
+  for (let i = 0; i < boundaries.length; i++) {
+    const rowBoundary = boundaries[i];
+    if (
+      rowBoundary.pendingTasks !== 1 ||
+      rowBoundary.parentFlushed ||
+      isEligibleForOutlining(request, rowBoundary)
+    ) {
+      allCompleteAndInlinable = false;
+      break;
+    }
+  }
+  if (allCompleteAndInlinable) {
+    unblockSuspenseListRow(request, togetherRow, togetherRow.hoistables);
+  }
+}
+
+function createSuspenseListRow(
+  previousRow: null | SuspenseListRow,
+): SuspenseListRow {
+  const newRow: SuspenseListRow = {
+    pendingTasks: 1, // At first the row is blocked on attempting rendering itself.
+    boundaries: null,
+    hoistables: createHoistableState(),
+    inheritedHoistables: null,
+    together: false,
+    next: null,
+  };
+  if (previousRow !== null && previousRow.pendingTasks > 0) {
+    // If the previous row is not done yet, we add ourselves to be blocked on it.
+    // When it finishes, we'll decrement our pending tasks.
+    newRow.pendingTasks++;
+    newRow.boundaries = [];
+    previousRow.next = newRow;
+  }
+  return newRow;
+}
+
+function renderSuspenseListRows(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  rows: Array<ReactNodeList>,
+  revealOrder: void | 'forwards' | 'backwards' | 'unstable_legacy-backwards',
+): void {
+  // This is a fork of renderChildrenArray that's aware of tracking rows.
+  const prevKeyPath = task.keyPath;
+  const prevTreeContext = task.treeContext;
+  const prevRow = task.row;
+  const previousComponentStack = task.componentStack;
+  let previousDebugTask = null;
+  if (__DEV__) {
+    previousDebugTask = task.debugTask;
+    // We read debugInfo from task.node.props.children instead of rows because it
+    // might have been an unwrapped iterable so we read from the original node.
+    pushServerComponentStack(task, (task.node: any).props.children._debugInfo);
+  }
+
+  task.keyPath = keyPath;
+
+  const totalChildren = rows.length;
+  let previousSuspenseListRow: null | SuspenseListRow = null;
+  if (task.replay !== null) {
+    // Replay
+    // First we need to check if we have any resume slots at this level.
+    const resumeSlots = task.replay.slots;
+    if (resumeSlots !== null && typeof resumeSlots === 'object') {
+      for (let n = 0; n < totalChildren; n++) {
+        // Since we are going to resume into a slot whose order was already
+        // determined by the prerender, we can safely resume it even in reverse
+        // render order.
+        const i =
+          revealOrder !== 'backwards' &&
+          revealOrder !== 'unstable_legacy-backwards'
+            ? n
+            : totalChildren - 1 - n;
+        const node = rows[i];
+        task.row = previousSuspenseListRow = createSuspenseListRow(
+          previousSuspenseListRow,
+        );
+        task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+        const resumeSegmentID = resumeSlots[i];
+        // TODO: If this errors we should still continue with the next sibling.
+        if (typeof resumeSegmentID === 'number') {
+          resumeNode(request, task, resumeSegmentID, node, i);
+          // We finished rendering this node, so now we can consume this
+          // slot. This must happen after in case we rerender this task.
+          delete resumeSlots[i];
+        } else {
+          renderNode(request, task, node, i);
+        }
+        if (--previousSuspenseListRow.pendingTasks === 0) {
+          finishSuspenseListRow(request, previousSuspenseListRow);
+        }
+      }
+    } else {
+      for (let n = 0; n < totalChildren; n++) {
+        // Since we are going to resume into a slot whose order was already
+        // determined by the prerender, we can safely resume it even in reverse
+        // render order.
+        const i =
+          revealOrder !== 'backwards' &&
+          revealOrder !== 'unstable_legacy-backwards'
+            ? n
+            : totalChildren - 1 - n;
+        const node = rows[i];
+        if (__DEV__) {
+          warnForMissingKey(request, task, node);
+        }
+        task.row = previousSuspenseListRow = createSuspenseListRow(
+          previousSuspenseListRow,
+        );
+        task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+        renderNode(request, task, node, i);
+        if (--previousSuspenseListRow.pendingTasks === 0) {
+          finishSuspenseListRow(request, previousSuspenseListRow);
+        }
+      }
+    }
+  } else {
+    task = ((task: any): RenderTask); // Refined
+    if (
+      revealOrder !== 'backwards' &&
+      revealOrder !== 'unstable_legacy-backwards'
+    ) {
+      // Forwards direction
+      for (let i = 0; i < totalChildren; i++) {
+        const node = rows[i];
+        if (__DEV__) {
+          warnForMissingKey(request, task, node);
+        }
+        task.row = previousSuspenseListRow = createSuspenseListRow(
+          previousSuspenseListRow,
+        );
+        task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+        renderNode(request, task, node, i);
+        if (--previousSuspenseListRow.pendingTasks === 0) {
+          finishSuspenseListRow(request, previousSuspenseListRow);
+        }
+      }
+    } else {
+      // For backwards direction we need to do things a bit differently.
+      // We give each row its own segment so that we can render the content in
+      // reverse order but still emit it in the right order when we flush.
+      const parentSegment = task.blockedSegment;
+      const childIndex = parentSegment.children.length;
+      const insertionIndex = parentSegment.chunks.length;
+      for (let n = 0; n < totalChildren; n++) {
+        const i =
+          revealOrder === 'unstable_legacy-backwards'
+            ? totalChildren - 1 - n
+            : n;
+        const node = rows[i];
+        task.row = previousSuspenseListRow = createSuspenseListRow(
+          previousSuspenseListRow,
+        );
+        task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+        const newSegment = createPendingSegment(
+          request,
+          insertionIndex,
+          null,
+          task.formatContext,
+          // Assume we are text embedded at the trailing edges
+          i === 0 ? parentSegment.lastPushedText : true,
+          true,
+        );
+        // Insert in the beginning of the sequence, which will insert before any previous rows.
+        parentSegment.children.splice(childIndex, 0, newSegment);
+        task.blockedSegment = newSegment;
+        if (__DEV__) {
+          warnForMissingKey(request, task, node);
+        }
+        try {
+          renderNode(request, task, node, i);
+          pushSegmentFinale(
+            newSegment.chunks,
+            request.renderState,
+            newSegment.lastPushedText,
+            newSegment.textEmbedded,
+          );
+          newSegment.status = COMPLETED;
+          finishedSegment(request, task.blockedBoundary, newSegment);
+          if (--previousSuspenseListRow.pendingTasks === 0) {
+            finishSuspenseListRow(request, previousSuspenseListRow);
+          }
+        } catch (thrownValue: mixed) {
+          if (request.status === ABORTING) {
+            newSegment.status = ABORTED;
+          } else {
+            newSegment.status = ERRORED;
+          }
+          throw thrownValue;
+        }
+      }
+      task.blockedSegment = parentSegment;
+      // Reset lastPushedText for current Segment since the new Segments "consumed" it
+      parentSegment.lastPushedText = false;
+    }
+  }
+
+  if (
+    prevRow !== null &&
+    previousSuspenseListRow !== null &&
+    previousSuspenseListRow.pendingTasks > 0
+  ) {
+    // If we are part of an outer SuspenseList and our last row is still pending, then that blocks
+    // the parent row from completing. We can continue the chain.
+    prevRow.pendingTasks++;
+    previousSuspenseListRow.next = prevRow;
+  }
+
+  // Because this context is always set right before rendering every child, we
+  // only need to reset it to the previous value at the very end.
+  task.treeContext = prevTreeContext;
+  task.row = prevRow;
+  task.keyPath = prevKeyPath;
+  if (__DEV__) {
+    task.componentStack = previousComponentStack;
+    task.debugTask = previousDebugTask;
+  }
+}
+
+function renderSuspenseList(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  props: SuspenseListProps,
+): void {
+  const children: any = props.children;
+  const revealOrder: SuspenseListRevealOrder = props.revealOrder;
+  // TODO: Support tail hidden/collapsed modes.
+  // const tailMode: SuspenseListTailMode = props.tail;
+  if (revealOrder !== 'independent' && revealOrder !== 'together') {
+    // For ordered reveal, we need to produce rows from the children.
+    if (isArray(children)) {
+      renderSuspenseListRows(request, task, keyPath, children, revealOrder);
+      return;
+    }
+    const iteratorFn = getIteratorFn(children);
+    if (iteratorFn) {
+      const iterator = iteratorFn.call(children);
+      if (iterator) {
+        if (__DEV__) {
+          validateIterable(task, children, -1, iterator, iteratorFn);
+        }
+        // TODO: We currently use the same id algorithm as regular nodes
+        // but we need a new algorithm for SuspenseList that doesn't require
+        // a full set to be loaded up front to support Async Iterable.
+        // When we have that, we shouldn't buffer anymore.
+        let step = iterator.next();
+        if (!step.done) {
+          const rows = [];
+          do {
+            rows.push(step.value);
+            step = iterator.next();
+          } while (!step.done);
+          renderSuspenseListRows(request, task, keyPath, children, revealOrder);
+        }
+        return;
+      }
+    }
+    if (
+      enableAsyncIterableChildren &&
+      typeof (children: any)[ASYNC_ITERATOR] === 'function'
+    ) {
+      const iterator: AsyncIterator<ReactNodeList> = (children: any)[
+        ASYNC_ITERATOR
+      ]();
+      if (iterator) {
+        if (__DEV__) {
+          validateAsyncIterable(task, (children: any), -1, iterator);
+        }
+        // TODO: Update the task.children to be the iterator to avoid asking
+        // for new iterators, but we currently warn for rendering these
+        // so needs some refactoring to deal with the warning.
+
+        // Restore the thenable state before resuming.
+        const prevThenableState = task.thenableState;
+        task.thenableState = null;
+        prepareToUseThenableState(prevThenableState);
+
+        // We need to know how many total rows are in this set, so that we
+        // can allocate enough id slots to acommodate them. So we must exhaust
+        // the iterator before we start recursively rendering the rows.
+        // TODO: This is not great but I think it's inherent to the id
+        // generation algorithm.
+
+        const rows = [];
+
+        let done = false;
+
+        if (iterator === children) {
+          // If it's an iterator we need to continue reading where we left
+          // off. We can do that by reading the first few rows from the previous
+          // thenable state.
+          // $FlowFixMe
+          let step = readPreviousThenableFromState();
+          while (step !== undefined) {
+            if (step.done) {
+              done = true;
+              break;
+            }
+            rows.push(step.value);
+            step = readPreviousThenableFromState();
+          }
+        }
+
+        if (!done) {
+          let step = unwrapThenable(iterator.next());
+          while (!step.done) {
+            rows.push(step.value);
+            step = unwrapThenable(iterator.next());
+          }
+        }
+        renderSuspenseListRows(request, task, keyPath, rows, revealOrder);
+        return;
+      }
+    }
+    // This case will warn on the client. It's the same as independent revealOrder.
+  }
+
+  if (revealOrder === 'together') {
+    const prevKeyPath = task.keyPath;
+    const prevRow = task.row;
+    const newRow = (task.row = createSuspenseListRow(null));
+    // This will cause boundaries to block on this row, but there's nothing to
+    // unblock them. We'll use the partial flushing pass to unblock them.
+    newRow.boundaries = [];
+    newRow.together = true;
+    task.keyPath = keyPath;
+    renderNodeDestructive(request, task, children, -1);
+    if (--newRow.pendingTasks === 0) {
+      finishSuspenseListRow(request, newRow);
+    }
+    task.keyPath = prevKeyPath;
+    task.row = prevRow;
+    if (prevRow !== null && newRow.pendingTasks > 0) {
+      // If we are part of an outer SuspenseList and our row is still pending, then that blocks
+      // the parent row from completing. We can continue the chain.
+      prevRow.pendingTasks++;
+      newRow.next = prevRow;
+    }
+    return;
+  }
+  // For other reveal order modes, we just render it as a fragment.
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, children, -1);
+  task.keyPath = prevKeyPath;
+}
+
+function renderPreamble(
+  request: Request,
+  task: RenderTask,
+  blockedSegment: Segment,
+  node: ReactNodeList,
+): void {
+  const preambleSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    task.formatContext,
+    false,
+    false,
+  );
+  blockedSegment.preambleChildren.push(preambleSegment);
+  task.blockedSegment = preambleSegment;
+  try {
+    preambleSegment.status = RENDERING;
+    renderNode(request, task, node, -1);
+    pushSegmentFinale(
+      preambleSegment.chunks,
+      request.renderState,
+      preambleSegment.lastPushedText,
+      preambleSegment.textEmbedded,
+    );
+    preambleSegment.status = COMPLETED;
+    finishedSegment(request, task.blockedBoundary, preambleSegment);
+  } finally {
+    task.blockedSegment = blockedSegment;
+  }
+}
+
+function renderHostElement(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  type: string,
+  props: Object,
+): void {
+  const segment = task.blockedSegment;
+  if (segment === null) {
+    // Replay
+    const children = props.children; // TODO: Make this a Config for replaying.
+    const prevContext = task.formatContext;
+    const prevKeyPath = task.keyPath;
+    task.formatContext = getChildFormatContext(prevContext, type, props);
+    task.keyPath = keyPath;
+
+    // We use the non-destructive form because if something suspends, we still
+    // need to pop back up and finish this subtree of HTML.
+    renderNode(request, task, children, -1);
+
+    // We expect that errors will fatal the whole task and that we don't need
+    // the correct context. Therefore this is not in a finally.
+    task.formatContext = prevContext;
+    task.keyPath = prevKeyPath;
+  } else {
+    // Render
+    // RenderTask always has a preambleState
+    const children = pushStartInstance(
+      segment.chunks,
+      type,
+      props,
+      request.resumableState,
+      request.renderState,
+      task.blockedPreamble,
+      task.hoistableState,
+      task.formatContext,
+      segment.lastPushedText,
+    );
+    segment.lastPushedText = false;
+    const prevContext = task.formatContext;
+    const prevKeyPath = task.keyPath;
+    task.keyPath = keyPath;
+
+    const newContext = (task.formatContext = getChildFormatContext(
+      prevContext,
+      type,
+      props,
+    ));
+    if (isPreambleContext(newContext)) {
+      // $FlowFixMe: Refined
+      renderPreamble(request, (task: RenderTask), segment, children);
+    } else {
+      // We use the non-destructive form because if something suspends, we still
+      // need to pop back up and finish this subtree of HTML.
+      renderNode(request, task, children, -1);
+    }
+
+    // We expect that errors will fatal the whole task and that we don't need
+    // the correct context. Therefore this is not in a finally.
+    task.formatContext = prevContext;
+    task.keyPath = prevKeyPath;
+    pushEndInstance(
+      segment.chunks,
+      type,
+      props,
+      request.resumableState,
+      prevContext,
+    );
+    segment.lastPushedText = false;
+  }
+}
+
+function shouldConstruct(Component: any) {
+  return Component.prototype && Component.prototype.isReactComponent;
+}
+
+function renderWithHooks<Props, SecondArg>(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  Component: (p: Props, arg: SecondArg) => any,
+  props: Props,
+  secondArg: SecondArg,
+): any {
+  // Reset the task's thenable state before continuing, so that if a later
+  // component suspends we can reuse the same task object. If the same
+  // component suspends again, the thenable state will be restored.
+  const prevThenableState = task.thenableState;
+  task.thenableState = null;
+  const componentIdentity = {};
+  prepareToUseHooks(
+    request,
+    task,
+    keyPath,
+    componentIdentity,
+    prevThenableState,
+  );
+  let result;
+  if (__DEV__) {
+    result = callComponentInDEV(Component, props, secondArg);
+  } else {
+    result = Component(props, secondArg);
+  }
+  return finishHooks(Component, props, result, secondArg);
+}
+
+function finishClassComponent(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  instance: any,
+  Component: any,
+  props: any,
+): ReactNodeList {
+  let nextChildren;
+  if (__DEV__) {
+    nextChildren = (callRenderInDEV(instance): any);
+  } else {
+    nextChildren = instance.render();
+  }
+  if (request.status === ABORTING) {
+    // eslint-disable-next-line no-throw-literal
+    throw null;
+  }
+
+  if (__DEV__) {
+    if (instance.props !== props) {
+      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.',
+          getComponentNameFromType(Component) || 'a component',
+        );
+      }
+      didWarnAboutReassigningProps = true;
+    }
+  }
+
+  if (!disableLegacyContext) {
+    const childContextTypes = Component.childContextTypes;
+    if (childContextTypes !== null && childContextTypes !== undefined) {
+      const previousContext = task.legacyContext;
+      const mergedContext = processChildContext(
+        instance,
+        Component,
+        previousContext,
+        childContextTypes,
+      );
+      task.legacyContext = mergedContext;
+      renderNodeDestructive(request, task, nextChildren, -1);
+      task.legacyContext = previousContext;
+      return;
+    }
+  }
+
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, nextChildren, -1);
+  task.keyPath = prevKeyPath;
+}
+
+export function resolveClassComponentProps(
+  Component: any,
+  baseProps: Object,
+): Object {
+  let newProps = baseProps;
+
+  // Remove ref from the props object, if it exists.
+  if ('ref' in baseProps) {
+    newProps = ({}: any);
+    for (const propName in baseProps) {
+      if (propName !== 'ref') {
+        newProps[propName] = baseProps[propName];
+      }
+    }
+  }
+
+  // Resolve default props.
+  const defaultProps = Component.defaultProps;
+  if (defaultProps) {
+    // We may have already copied the props object above to remove ref. If so,
+    // we can modify that. Otherwise, copy the props object with Object.assign.
+    if (newProps === baseProps) {
+      newProps = assign({}, newProps, baseProps);
+    }
+    // Taken from old JSX runtime, where this used to live.
+    for (const propName in defaultProps) {
+      if (newProps[propName] === undefined) {
+        newProps[propName] = defaultProps[propName];
+      }
+    }
+  }
+
+  return newProps;
+}
+
+function renderClassComponent(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  Component: any,
+  props: any,
+): void {
+  const resolvedProps = resolveClassComponentProps(Component, props);
+  const maskedContext = !disableLegacyContext
+    ? getMaskedContext(Component, task.legacyContext)
+    : undefined;
+  const instance = constructClassInstance(
+    Component,
+    resolvedProps,
+    maskedContext,
+  );
+  mountClassInstance(instance, Component, resolvedProps, maskedContext);
+  finishClassComponent(
+    request,
+    task,
+    keyPath,
+    instance,
+    Component,
+    resolvedProps,
+  );
+}
+
+const didWarnAboutBadClass: {[string]: boolean} = {};
+const didWarnAboutContextTypes: {[string]: boolean} = {};
+const didWarnAboutContextTypeOnFunctionComponent: {[string]: boolean} = {};
+const didWarnAboutGetDerivedStateOnFunctionComponent: {[string]: boolean} = {};
+let didWarnAboutReassigningProps = false;
+let didWarnAboutGenerators = false;
+let didWarnAboutMaps = false;
+
+function renderFunctionComponent(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  Component: any,
+  props: any,
+): void {
+  let legacyContext;
+  if (!disableLegacyContext && !disableLegacyContextForFunctionComponents) {
+    legacyContext = getMaskedContext(Component, task.legacyContext);
+  }
+  if (__DEV__) {
+    if (
+      Component.prototype &&
+      typeof Component.prototype.render === 'function'
+    ) {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+
+      if (!didWarnAboutBadClass[componentName]) {
+        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,
+          componentName,
+        );
+        didWarnAboutBadClass[componentName] = true;
+      }
+    }
+  }
+
+  const value = renderWithHooks(
+    request,
+    task,
+    keyPath,
+    Component,
+    props,
+    legacyContext,
+  );
+  if (request.status === ABORTING) {
+    // eslint-disable-next-line no-throw-literal
+    throw null;
+  }
+
+  const hasId = checkDidRenderIdHook();
+  const actionStateCount = getActionStateCount();
+  const actionStateMatchingIndex = getActionStateMatchingIndex();
+
+  if (__DEV__) {
+    if (Component.contextTypes) {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+      if (!didWarnAboutContextTypes[componentName]) {
+        didWarnAboutContextTypes[componentName] = true;
+        if (disableLegacyContext) {
+          console.error(
+            '%s uses the legacy contextTypes API which was removed in React 19. ' +
+              'Use React.createContext() with React.useContext() instead. ' +
+              '(https://react.dev/link/legacy-context)',
+            componentName,
+          );
+        } else {
+          console.error(
+            '%s uses the legacy contextTypes API which will be removed soon. ' +
+              'Use React.createContext() with React.useContext() instead. ' +
+              '(https://react.dev/link/legacy-context)',
+            componentName,
+          );
+        }
+      }
+    }
+  }
+  if (__DEV__) {
+    validateFunctionComponentInDev(Component);
+  }
+  finishFunctionComponent(
+    request,
+    task,
+    keyPath,
+    value,
+    hasId,
+    actionStateCount,
+    actionStateMatchingIndex,
+  );
+}
+
+function finishFunctionComponent(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  children: ReactNodeList,
+  hasId: boolean,
+  actionStateCount: number,
+  actionStateMatchingIndex: number,
+) {
+  let didEmitActionStateMarkers = false;
+  if (actionStateCount !== 0 && request.formState !== null) {
+    // For each useActionState hook, emit a marker that indicates whether we
+    // rendered using the form state passed at the root. We only emit these
+    // markers if form state is passed at the root.
+    const segment = task.blockedSegment;
+    if (segment === null) {
+      // Implies we're in reumable mode.
+    } else {
+      didEmitActionStateMarkers = true;
+      const target = segment.chunks;
+      for (let i = 0; i < actionStateCount; i++) {
+        if (i === actionStateMatchingIndex) {
+          pushFormStateMarkerIsMatching(target);
+        } else {
+          pushFormStateMarkerIsNotMatching(target);
+        }
+      }
+    }
+  }
+
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  if (hasId) {
+    // This component materialized an id. We treat this as its own level, with
+    // a single "child" slot.
+    const prevTreeContext = task.treeContext;
+    const totalChildren = 1;
+    const index = 0;
+    // Modify the id context. Because we'll need to reset this if something
+    // suspends or errors, we'll use the non-destructive render path.
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+    renderNode(request, task, children, -1);
+    // Like the other contexts, this does not need to be in a finally block
+    // because renderNode takes care of unwinding the stack.
+    task.treeContext = prevTreeContext;
+  } else if (didEmitActionStateMarkers) {
+    // If there were useActionState hooks, we must use the non-destructive path
+    // because this component is not a pure indirection; we emitted markers
+    // to the stream.
+    renderNode(request, task, children, -1);
+  } else {
+    // We're now successfully past this task, and we haven't modified the
+    // context stack. We don't have to pop back to the previous task every
+    // again, so we can use the destructive recursive form.
+    renderNodeDestructive(request, task, children, -1);
+  }
+  task.keyPath = prevKeyPath;
+}
+
+function validateFunctionComponentInDev(Component: any): void {
+  if (__DEV__) {
+    if (Component && Component.childContextTypes) {
+      console.error(
+        'childContextTypes cannot be defined on a function component.\n' +
+          '  %s.childContextTypes = ...',
+        Component.displayName || Component.name || 'Component',
+      );
+    }
+
+    if (typeof Component.getDerivedStateFromProps === 'function') {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+
+      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 = getComponentNameFromType(Component) || 'Unknown';
+
+      if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
+        console.error(
+          '%s: Function components do not support contextType.',
+          componentName,
+        );
+        didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
+      }
+    }
+  }
+}
+
+function renderForwardRef(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  type: any,
+  props: Object,
+  ref: any,
+): void {
+  let propsWithoutRef;
+  if ('ref' in props) {
+    // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+    // the props object. This used to happen in the JSX runtime, but now we do
+    // it here.
+    propsWithoutRef = ({}: {[string]: any});
+    for (const key in props) {
+      // Since `ref` should only appear in props via the JSX transform, we can
+      // assume that this is a plain object. So we don't need a
+      // hasOwnProperty check.
+      if (key !== 'ref') {
+        propsWithoutRef[key] = props[key];
+      }
+    }
+  } else {
+    propsWithoutRef = props;
+  }
+
+  const children = renderWithHooks(
+    request,
+    task,
+    keyPath,
+    type.render,
+    propsWithoutRef,
+    ref,
+  );
+  const hasId = checkDidRenderIdHook();
+  const actionStateCount = getActionStateCount();
+  const actionStateMatchingIndex = getActionStateMatchingIndex();
+  finishFunctionComponent(
+    request,
+    task,
+    keyPath,
+    children,
+    hasId,
+    actionStateCount,
+    actionStateMatchingIndex,
+  );
+}
+
+function renderMemo(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  type: any,
+  props: Object,
+  ref: any,
+): void {
+  const innerType = type.type;
+  renderElement(request, task, keyPath, innerType, props, ref);
+}
+
+function renderContextConsumer(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  context: ReactContext<any>,
+  props: Object,
+): void {
+  const render = props.children;
+
+  if (__DEV__) {
+    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.',
+      );
+    }
+  }
+
+  const newValue = readContext(context);
+  const newChildren = render(newValue);
+
+  const prevKeyPath = task.keyPath;
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, newChildren, -1);
+  task.keyPath = prevKeyPath;
+}
+
+function renderContextProvider(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  context: ReactContext<any>,
+  props: Object,
+): void {
+  const value = props.value;
+  const children = props.children;
+  let prevSnapshot;
+  if (__DEV__) {
+    prevSnapshot = task.context;
+  }
+  const prevKeyPath = task.keyPath;
+  task.context = pushProvider(context, value);
+  task.keyPath = keyPath;
+  renderNodeDestructive(request, task, children, -1);
+  task.context = popProvider(context);
+  task.keyPath = prevKeyPath;
+  if (__DEV__) {
+    if (prevSnapshot !== task.context) {
+      console.error(
+        'Popping the context provider did not return back to the original snapshot. This is a bug in React.',
+      );
+    }
+  }
+}
+
+function renderLazyComponent(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  lazyComponent: LazyComponentType<any, any>,
+  props: Object,
+  ref: any,
+): void {
+  let Component;
+  if (__DEV__) {
+    Component = callLazyInitInDEV(lazyComponent);
+  } else {
+    const payload = lazyComponent._payload;
+    const init = lazyComponent._init;
+    Component = init(payload);
+  }
+  if (
+    request.status === ABORTING &&
+    // We're going to discard this render anyway.
+    // We just need to reach the point where we suspended in dev.
+    (!__DEV__ || request.status !== STALLED_DEV)
+  ) {
+    // eslint-disable-next-line no-throw-literal
+    throw null;
+  }
+  renderElement(request, task, keyPath, Component, props, ref);
+}
+
+function renderActivity(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  props: ActivityProps,
+): void {
+  const segment = task.blockedSegment;
+  if (segment === null) {
+    // Replay
+    const mode = props.mode;
+    if (mode === 'hidden') {
+      // A hidden Activity boundary is not server rendered. Prerendering happens
+      // on the client.
+    } else {
+      // A visible Activity boundary has its children rendered inside the boundary.
+      const prevKeyPath = task.keyPath;
+      task.keyPath = keyPath;
+      renderNode(request, task, props.children, -1);
+      task.keyPath = prevKeyPath;
+    }
+  } else {
+    // Render
+    const mode = props.mode;
+    if (mode === 'hidden') {
+      // A hidden Activity boundary is not server rendered. Prerendering happens
+      // on the client.
+    } else {
+      // An Activity boundary is delimited so that we can hydrate it separately.
+      pushStartActivityBoundary(segment.chunks, request.renderState);
+      segment.lastPushedText = false;
+      // A visible Activity boundary has its children rendered inside the boundary.
+      const prevKeyPath = task.keyPath;
+      task.keyPath = keyPath;
+      // We use the non-destructive form because if something suspends, we still
+      // need to pop back up and finish the end comment.
+      renderNode(request, task, props.children, -1);
+      task.keyPath = prevKeyPath;
+      pushEndActivityBoundary(segment.chunks, request.renderState);
+      segment.lastPushedText = false;
+    }
+  }
+}
+
+function renderViewTransition(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  props: ViewTransitionProps,
+) {
+  const prevContext = task.formatContext;
+  const prevKeyPath = task.keyPath;
+  // Get the name off props or generate an auto-generated one in case we need it.
+  const autoName = getViewTransitionName(
+    props,
+    task.treeContext,
+    request.resumableState,
+  );
+  task.formatContext = getViewTransitionFormatContext(
+    request.resumableState,
+    prevContext,
+    getViewTransitionClassName(props.default, props.update),
+    getViewTransitionClassName(props.default, props.enter),
+    getViewTransitionClassName(props.default, props.exit),
+    getViewTransitionClassName(props.default, props.share),
+    props.name,
+    autoName,
+  );
+  task.keyPath = keyPath;
+  if (props.name != null && props.name !== 'auto') {
+    renderNodeDestructive(request, task, props.children, -1);
+  } else {
+    // This will be auto-assigned a name which claims a "useId" slot.
+    // This component materialized an id. We treat this as its own level, with
+    // a single "child" slot.
+    const prevTreeContext = task.treeContext;
+    const totalChildren = 1;
+    const index = 0;
+    // Modify the id context. Because we'll need to reset this if something
+    // suspends or errors, we'll use the non-destructive render path.
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+    renderNode(request, task, props.children, -1);
+    // Like the other contexts, this does not need to be in a finally block
+    // because renderNode takes care of unwinding the stack.
+    task.treeContext = prevTreeContext;
+  }
+  task.formatContext = prevContext;
+  task.keyPath = prevKeyPath;
+}
+
+function renderElement(
+  request: Request,
+  task: Task,
+  keyPath: KeyNode,
+  type: any,
+  props: Object,
+  ref: any,
+): void {
+  if (typeof type === 'function') {
+    if (shouldConstruct(type)) {
+      renderClassComponent(request, task, keyPath, type, props);
+      return;
+    } else {
+      renderFunctionComponent(request, task, keyPath, type, props);
+      return;
+    }
+  }
+  if (typeof type === 'string') {
+    renderHostElement(request, task, keyPath, type, props);
+    return;
+  }
+
+  switch (type) {
+    // LegacyHidden acts the same as a fragment. This only works because we
+    // currently assume that every instance of LegacyHidden is accompanied by a
+    // host component wrapper. In the hidden mode, the host component is given a
+    // `hidden` attribute, which ensures that the initial HTML is not visible.
+    // To support the use of LegacyHidden as a true fragment, without an extra
+    // DOM node, we would have to hide the initial HTML in some other way.
+    // TODO: Delete in LegacyHidden. It's an unstable API only used in the
+    // www build. As a migration step, we could add a special prop to Offscreen
+    // that simulates the old behavior (no hiding, no change to effects).
+    case REACT_LEGACY_HIDDEN_TYPE:
+    case REACT_STRICT_MODE_TYPE:
+    case REACT_PROFILER_TYPE:
+    case REACT_FRAGMENT_TYPE: {
+      const prevKeyPath = task.keyPath;
+      task.keyPath = keyPath;
+      renderNodeDestructive(request, task, props.children, -1);
+      task.keyPath = prevKeyPath;
+      return;
+    }
+    case REACT_ACTIVITY_TYPE: {
+      renderActivity(request, task, keyPath, props);
+      return;
+    }
+    case REACT_SUSPENSE_LIST_TYPE: {
+      renderSuspenseList(request, task, keyPath, props);
+      return;
+    }
+    case REACT_VIEW_TRANSITION_TYPE: {
+      if (enableViewTransition) {
+        renderViewTransition(request, task, keyPath, props);
+        return;
+      }
+      // Fallthrough
+    }
+    case REACT_SCOPE_TYPE: {
+      if (enableScopeAPI) {
+        const prevKeyPath = task.keyPath;
+        task.keyPath = keyPath;
+        renderNodeDestructive(request, task, props.children, -1);
+        task.keyPath = prevKeyPath;
+        return;
+      }
+      throw new Error('ReactDOMServer does not yet support scope components.');
+    }
+    case REACT_SUSPENSE_TYPE: {
+      renderSuspenseBoundary(request, task, keyPath, props);
+      return;
+    }
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE: {
+        renderForwardRef(request, task, keyPath, type, props, ref);
+        return;
+      }
+      case REACT_MEMO_TYPE: {
+        renderMemo(request, task, keyPath, type, props, ref);
+        return;
+      }
+      case REACT_CONTEXT_TYPE: {
+        const context = type;
+        renderContextProvider(request, task, keyPath, context, props);
+        return;
+      }
+      case REACT_CONSUMER_TYPE: {
+        const context: ReactContext<any> = (type: ReactConsumerType<any>)
+          ._context;
+        renderContextConsumer(request, task, keyPath, context, props);
+        return;
+      }
+      case REACT_LAZY_TYPE: {
+        renderLazyComponent(request, task, keyPath, type, props, ref);
+        return;
+      }
+    }
+  }
+
+  let info = '';
+  if (__DEV__) {
+    if (
+      type === undefined ||
+      (typeof type === 'object' &&
+        type !== null &&
+        Object.keys(type).length === 0)
+    ) {
+      info +=
+        ' You likely forgot to export your component from the file ' +
+        "it's defined in, or you might have mixed up default and " +
+        'named imports.';
+    }
+  }
+
+  throw new Error(
+    'Element type is invalid: expected a string (for built-in ' +
+      'components) or a class/function (for composite components) ' +
+      `but got: ${type == null ? type : typeof type}.${info}`,
+  );
+}
+
+function resumeNode(
+  request: Request,
+  task: ReplayTask,
+  segmentId: number,
+  node: ReactNodeList,
+  childIndex: number,
+): void {
+  const prevReplay = task.replay;
+  const blockedBoundary = task.blockedBoundary;
+  const resumedSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    task.formatContext,
+    false,
+    false,
+  );
+  resumedSegment.id = segmentId;
+  resumedSegment.parentFlushed = true;
+  try {
+    // Convert the current ReplayTask to a RenderTask.
+    const renderTask: RenderTask = (task: any);
+    renderTask.replay = null;
+    renderTask.blockedSegment = resumedSegment;
+    renderNode(request, task, node, childIndex);
+    resumedSegment.status = COMPLETED;
+    finishedSegment(request, blockedBoundary, resumedSegment);
+    if (blockedBoundary === null) {
+      request.completedRootSegment = resumedSegment;
+    } else {
+      queueCompletedSegment(blockedBoundary, resumedSegment);
+      if (blockedBoundary.parentFlushed) {
+        request.partialBoundaries.push(blockedBoundary);
+      }
+    }
+  } finally {
+    // Restore to a ReplayTask.
+    task.replay = prevReplay;
+    task.blockedSegment = null;
+  }
+}
+
+function replayElement(
+  request: Request,
+  task: ReplayTask,
+  keyPath: KeyNode,
+  name: null | string,
+  keyOrIndex: number | string,
+  childIndex: number,
+  type: any,
+  props: Object,
+  ref: any,
+  replay: ReplaySet,
+): void {
+  // We're replaying. Find the path to follow.
+  const replayNodes = replay.nodes;
+  for (let i = 0; i < replayNodes.length; i++) {
+    // Flow doesn't support refinement on tuples so we do it manually here.
+    const node = replayNodes[i];
+    if (keyOrIndex !== node[1]) {
+      continue;
+    }
+    if (node.length === 4) {
+      // Matched a replayable path.
+      // Let's double check that the component name matches as a precaution.
+      if (name !== null && name !== node[0]) {
+        throw new Error(
+          'Expected the resume to render <' +
+            (node[0]: any) +
+            '> in this slot but instead it rendered <' +
+            name +
+            '>. ' +
+            "The tree doesn't match so React will fallback to client rendering.",
+        );
+      }
+      const childNodes = node[2];
+      const childSlots = node[3];
+      const currentNode = task.node;
+      task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
+      try {
+        renderElement(request, task, keyPath, type, props, ref);
+        if (
+          task.replay.pendingTasks === 1 &&
+          task.replay.nodes.length > 0
+          // TODO check remaining slots
+        ) {
+          throw new Error(
+            "Couldn't find all resumable slots by key/index during replaying. " +
+              "The tree doesn't match so React will fallback to client rendering.",
+          );
+        }
+        task.replay.pendingTasks--;
+      } catch (x) {
+        if (
+          typeof x === 'object' &&
+          x !== null &&
+          (x === SuspenseException || typeof x.then === 'function')
+        ) {
+          // Suspend
+          if (task.node === currentNode) {
+            // This same element suspended so we need to pop the replay we just added.
+            task.replay = replay;
+          } else {
+            // We finished rendering this node, so now we can consume this slot.
+            replayNodes.splice(i, 1);
+          }
+          throw x;
+        }
+        task.replay.pendingTasks--;
+        // Unlike regular render, we don't terminate the siblings if we error
+        // during a replay. That's because this component didn't actually error
+        // in the original prerender. What's unable to complete is the child
+        // replay nodes which might be Suspense boundaries which are able to
+        // absorb the error and we can still continue with siblings.
+        const thrownInfo = getThrownInfo(task.componentStack);
+        erroredReplay(
+          request,
+          task.blockedBoundary,
+          x,
+          thrownInfo,
+          childNodes,
+          childSlots,
+          __DEV__ ? task.debugTask : null,
+        );
+      }
+      task.replay = replay;
+    } else {
+      // Let's double check that the component type matches.
+      if (type !== REACT_SUSPENSE_TYPE) {
+        const expectedType = 'Suspense';
+        throw new Error(
+          'Expected the resume to render <' +
+            expectedType +
+            '> in this slot but instead it rendered <' +
+            (getComponentNameFromType(type) || 'Unknown') +
+            '>. ' +
+            "The tree doesn't match so React will fallback to client rendering.",
+        );
+      }
+      // Matched a replayable path.
+      replaySuspenseBoundary(
+        request,
+        task,
+        keyPath,
+        props,
+        node[5],
+        node[2],
+        node[3],
+        node[4] === null ? [] : node[4][2],
+        node[4] === null ? null : node[4][3],
+      );
+    }
+    // We finished rendering this node, so now we can consume this
+    // slot. This must happen after in case we rerender this task.
+    replayNodes.splice(i, 1);
+    return;
+  }
+  // We didn't find any matching nodes. We assume that this element was already
+  // rendered in the prelude and skip it.
+}
+
+function validateIterable(
+  task: Task,
+  iterable: Iterable<any>,
+  childIndex: number,
+  iterator: Iterator<any>,
+  iteratorFn: () => ?Iterator<any>,
+): void {
+  if (__DEV__) {
+    if (iterator === iterable) {
+      // We don't support rendering Generators as props because it's a mutation.
+      // See https://github.com/facebook/react/issues/12995
+      // We do support generators if they were created by a GeneratorFunction component
+      // as its direct child since we can recreate those by rerendering the component
+      // as needed.
+      const isGeneratorComponent =
+        childIndex === -1 && // Only the root child is valid
+        task.componentStack !== null &&
+        typeof task.componentStack.type === 'function' && // FunctionComponent
+        // $FlowFixMe[method-unbinding]
+        Object.prototype.toString.call(task.componentStack.type) ===
+          '[object GeneratorFunction]' &&
+        // $FlowFixMe[method-unbinding]
+        Object.prototype.toString.call(iterator) === '[object Generator]';
+      if (!isGeneratorComponent) {
+        if (!didWarnAboutGenerators) {
+          console.error(
+            'Using Iterators 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. You can also use an ' +
+              'Iterable that can iterate multiple times over the same items.',
+          );
+        }
+        didWarnAboutGenerators = true;
+      }
+    } else if ((iterable: any).entries === iteratorFn) {
+      // Warn about using Maps as children
+      if (!didWarnAboutMaps) {
+        console.error(
+          'Using Maps as children is not supported. ' +
+            'Use an array of keyed ReactElements instead.',
+        );
+        didWarnAboutMaps = true;
+      }
+    }
+  }
+}
+
+function validateAsyncIterable(
+  task: Task,
+  iterable: AsyncIterable<any>,
+  childIndex: number,
+  iterator: AsyncIterator<any>,
+): void {
+  if (__DEV__) {
+    if (iterator === iterable) {
+      // We don't support rendering Generators as props because it's a mutation.
+      // See https://github.com/facebook/react/issues/12995
+      // We do support generators if they were created by a GeneratorFunction component
+      // as its direct child since we can recreate those by rerendering the component
+      // as needed.
+      const isGeneratorComponent =
+        childIndex === -1 && // Only the root child is valid
+        task.componentStack !== null &&
+        typeof task.componentStack.type === 'function' && // FunctionComponent
+        // $FlowFixMe[method-unbinding]
+        Object.prototype.toString.call(task.componentStack.type) ===
+          '[object AsyncGeneratorFunction]' &&
+        // $FlowFixMe[method-unbinding]
+        Object.prototype.toString.call(iterator) === '[object AsyncGenerator]';
+      if (!isGeneratorComponent) {
+        if (!didWarnAboutGenerators) {
+          console.error(
+            'Using AsyncIterators as children is unsupported and will likely yield ' +
+              'unexpected results because enumerating a generator mutates it. ' +
+              'You can use an AsyncIterable that can iterate multiple times over ' +
+              'the same items.',
+          );
+        }
+        didWarnAboutGenerators = true;
+      }
+    }
+  }
+}
+
+function warnOnFunctionType(invalidChild: Function) {
+  if (__DEV__) {
+    const name = invalidChild.displayName || invalidChild.name || 'Component';
+    console.error(
+      'Functions are not valid as a React child. This may happen if ' +
+        'you return %s instead of <%s /> from render. ' +
+        'Or maybe you meant to call this function rather than return it.',
+      name,
+      name,
+    );
+  }
+}
+
+function warnOnSymbolType(invalidChild: symbol) {
+  if (__DEV__) {
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const name = String(invalidChild);
+    console.error('Symbols are not valid as a React child.\n' + '  %s', name);
+  }
+}
+
+// This function by it self renders a node and consumes the task by mutating it
+// to update the current execution state.
+function renderNodeDestructive(
+  request: Request,
+  task: Task,
+  node: ReactNodeList,
+  childIndex: number,
+): void {
+  if (task.replay !== null && typeof task.replay.slots === 'number') {
+    // TODO: Figure out a cheaper place than this hot path to do this check.
+    const resumeSegmentID = task.replay.slots;
+    resumeNode(request, task, resumeSegmentID, node, childIndex);
+    return;
+  }
+  // Stash the node we're working on. We'll pick up from this task in case
+  // something suspends.
+  task.node = node;
+  task.childIndex = childIndex;
+
+  const previousComponentStack = task.componentStack;
+  const previousDebugTask = __DEV__ ? task.debugTask : null;
+
+  pushComponentStack(task);
+
+  retryNode(request, task);
+
+  task.componentStack = previousComponentStack;
+  if (__DEV__) {
+    task.debugTask = previousDebugTask;
+  }
+}
+
+function retryNode(request: Request, task: Task): void {
+  const node = task.node;
+  const childIndex = task.childIndex;
+
+  if (node === null) {
+    return;
+  }
+
+  // Handle object types
+  if (typeof node === 'object') {
+    switch ((node: any).$$typeof) {
+      case REACT_ELEMENT_TYPE: {
+        const element: any = node;
+        const type = element.type;
+        const key: ReactKey = element.key;
+        const props = element.props;
+
+        // TODO: We should get the ref off the props object right before using
+        // it.
+        const refProp = props.ref;
+        const ref = refProp !== undefined ? refProp : null;
+
+        const debugTask: null | ConsoleTask = __DEV__ ? task.debugTask : null;
+
+        const name = getComponentNameFromType(type);
+        const keyOrIndex =
+          key == null || key === REACT_OPTIMISTIC_KEY
+            ? childIndex === -1
+              ? 0
+              : childIndex
+            : key;
+        const keyPath = [task.keyPath, name, keyOrIndex];
+        if (task.replay !== null) {
+          if (debugTask) {
+            debugTask.run(
+              replayElement.bind(
+                null,
+                request,
+                task,
+                keyPath,
+                name,
+                keyOrIndex,
+                childIndex,
+                type,
+                props,
+                ref,
+                task.replay,
+              ),
+            );
+          } else {
+            replayElement(
+              request,
+              task,
+              keyPath,
+              name,
+              keyOrIndex,
+              childIndex,
+              type,
+              props,
+              ref,
+              task.replay,
+            );
+          }
+          // No matches found for this node. We assume it's already emitted in the
+          // prelude and skip it during the replay.
+        } else {
+          // We're doing a plain render.
+          if (debugTask) {
+            debugTask.run(
+              renderElement.bind(
+                null,
+                request,
+                task,
+                keyPath,
+                type,
+                props,
+                ref,
+              ),
+            );
+          } else {
+            renderElement(request, task, keyPath, type, props, ref);
+          }
+        }
+        return;
+      }
+      case REACT_PORTAL_TYPE:
+        throw new Error(
+          'Portals are not currently supported by the server renderer. ' +
+            'Render them conditionally so that they only appear on the client render.',
+        );
+      case REACT_LAZY_TYPE: {
+        const lazyNode: LazyComponentType<any, any> = (node: any);
+        let resolvedNode;
+        if (__DEV__) {
+          resolvedNode = callLazyInitInDEV(lazyNode);
+        } else {
+          const payload = lazyNode._payload;
+          const init = lazyNode._init;
+          resolvedNode = init(payload);
+        }
+        if (request.status === ABORTING) {
+          // eslint-disable-next-line no-throw-literal
+          throw null;
+        }
+        // Now we render the resolved node
+        renderNodeDestructive(request, task, resolvedNode, childIndex);
+        return;
+      }
+    }
+
+    if (isArray(node)) {
+      renderChildrenArray(request, task, node, childIndex);
+      return;
+    }
+
+    const iteratorFn = getIteratorFn(node);
+    if (iteratorFn) {
+      const iterator = iteratorFn.call(node);
+      if (iterator) {
+        if (__DEV__) {
+          validateIterable(task, node, childIndex, iterator, iteratorFn);
+        }
+        // We need to know how many total children are in this set, so that we
+        // can allocate enough id slots to acommodate them. So we must exhaust
+        // the iterator before we start recursively rendering the children.
+        // TODO: This is not great but I think it's inherent to the id
+        // generation algorithm.
+        let step = iterator.next();
+        if (!step.done) {
+          const children = [];
+          do {
+            children.push(step.value);
+            step = iterator.next();
+          } while (!step.done);
+          renderChildrenArray(request, task, children, childIndex);
+        }
+        return;
+      }
+    }
+
+    if (
+      enableAsyncIterableChildren &&
+      typeof (node: any)[ASYNC_ITERATOR] === 'function'
+    ) {
+      const iterator: AsyncIterator<ReactNodeList> = (node: any)[
+        ASYNC_ITERATOR
+      ]();
+      if (iterator) {
+        if (__DEV__) {
+          validateAsyncIterable(task, (node: any), childIndex, iterator);
+        }
+        // TODO: Update the task.node to be the iterator to avoid asking
+        // for new iterators, but we currently warn for rendering these
+        // so needs some refactoring to deal with the warning.
+
+        // Restore the thenable state before resuming.
+        const prevThenableState = task.thenableState;
+        task.thenableState = null;
+        prepareToUseThenableState(prevThenableState);
+
+        // We need to know how many total children are in this set, so that we
+        // can allocate enough id slots to acommodate them. So we must exhaust
+        // the iterator before we start recursively rendering the children.
+        // TODO: This is not great but I think it's inherent to the id
+        // generation algorithm.
+        const children = [];
+
+        let done = false;
+
+        if (iterator === node) {
+          // If it's an iterator we need to continue reading where we left
+          // off. We can do that by reading the first few rows from the previous
+          // thenable state.
+          // $FlowFixMe
+          let step = readPreviousThenableFromState();
+          while (step !== undefined) {
+            if (step.done) {
+              done = true;
+              break;
+            }
+            children.push(step.value);
+            step = readPreviousThenableFromState();
+          }
+        }
+
+        if (!done) {
+          let step = unwrapThenable(iterator.next());
+          while (!step.done) {
+            children.push(step.value);
+            step = unwrapThenable(iterator.next());
+          }
+        }
+        renderChildrenArray(request, task, children, childIndex);
+        return;
+      }
+    }
+
+    // Usables are a valid React node type. When React encounters a Usable in
+    // a child position, it unwraps it using the same algorithm as `use`. For
+    // example, for promises, React will throw an exception to unwind the
+    // stack, then replay the component once the promise resolves.
+    //
+    // A difference from `use` is that React will keep unwrapping the value
+    // until it reaches a non-Usable type.
+    //
+    // e.g. Usable<Usable<Usable<T>>> should resolve to T
+    const maybeUsable: Object = node;
+    if (typeof maybeUsable.then === 'function') {
+      // Clear any previous thenable state that was created by the unwrapping.
+      task.thenableState = null;
+      const thenable: Thenable<ReactNodeList> = (maybeUsable: any);
+      const result = renderNodeDestructive(
+        request,
+        task,
+        unwrapThenable(thenable),
+        childIndex,
+      );
+      return result;
+    }
+
+    if (maybeUsable.$$typeof === REACT_CONTEXT_TYPE) {
+      const context: ReactContext<ReactNodeList> = (maybeUsable: any);
+      return renderNodeDestructive(
+        request,
+        task,
+        readContext(context),
+        childIndex,
+      );
+    }
+
+    // $FlowFixMe[method-unbinding]
+    const childString = Object.prototype.toString.call(node);
+
+    throw new Error(
+      `Objects are not valid as a React child (found: ${
+        childString === '[object Object]'
+          ? 'object with keys {' + Object.keys(node).join(', ') + '}'
+          : childString
+      }). ` +
+        'If you meant to render a collection of children, use an array ' +
+        'instead.',
+    );
+  }
+
+  if (typeof node === 'string') {
+    const segment = task.blockedSegment;
+    if (segment === null) {
+      // We assume a text node doesn't have a representation in the replay set,
+      // since it can't postpone. If it does, it'll be left unmatched and error.
+    } else {
+      segment.lastPushedText = pushTextInstance(
+        segment.chunks,
+        node,
+        request.renderState,
+        segment.lastPushedText,
+      );
+    }
+    return;
+  }
+
+  if (typeof node === 'number' || typeof node === 'bigint') {
+    const segment = task.blockedSegment;
+    if (segment === null) {
+      // We assume a text node doesn't have a representation in the replay set,
+      // since it can't postpone. If it does, it'll be left unmatched and error.
+    } else {
+      segment.lastPushedText = pushTextInstance(
+        segment.chunks,
+        '' + node,
+        request.renderState,
+        segment.lastPushedText,
+      );
+    }
+    return;
+  }
+
+  if (__DEV__) {
+    if (typeof node === 'function') {
+      warnOnFunctionType(node);
+    }
+    if (typeof node === 'symbol') {
+      warnOnSymbolType(node);
+    }
+  }
+}
+
+function replayFragment(
+  request: Request,
+  task: ReplayTask,
+  children: Array<any>,
+  childIndex: number,
+): void {
+  // If we're supposed follow this array, we'd expect to see a ReplayNode matching
+  // this fragment.
+  const replay = task.replay;
+  const replayNodes = replay.nodes;
+  for (let j = 0; j < replayNodes.length; j++) {
+    const node = replayNodes[j];
+    if (node[1] !== childIndex) {
+      continue;
+    }
+    // Matched a replayable path.
+    const childNodes = node[2];
+    const childSlots = node[3];
+    task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
+    try {
+      renderChildrenArray(request, task, children, -1);
+      if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
+        throw new Error(
+          "Couldn't find all resumable slots by key/index during replaying. " +
+            "The tree doesn't match so React will fallback to client rendering.",
+        );
+      }
+      task.replay.pendingTasks--;
+    } catch (x) {
+      if (
+        typeof x === 'object' &&
+        x !== null &&
+        (x === SuspenseException || typeof x.then === 'function')
+      ) {
+        // Suspend
+        throw x;
+      }
+      task.replay.pendingTasks--;
+      // Unlike regular render, we don't terminate the siblings if we error
+      // during a replay. That's because this component didn't actually error
+      // in the original prerender. What's unable to complete is the child
+      // replay nodes which might be Suspense boundaries which are able to
+      // absorb the error and we can still continue with siblings.
+      // This is an error, stash the component stack if it is null.
+      const thrownInfo = getThrownInfo(task.componentStack);
+      erroredReplay(
+        request,
+        task.blockedBoundary,
+        x,
+        thrownInfo,
+        childNodes,
+        childSlots,
+        __DEV__ ? task.debugTask : null,
+      );
+    }
+    task.replay = replay;
+    // We finished rendering this node, so now we can consume this
+    // slot. This must happen after in case we rerender this task.
+    replayNodes.splice(j, 1);
+    break;
+  }
+}
+
+function warnForMissingKey(request: Request, task: Task, child: mixed): void {
+  if (__DEV__) {
+    if (
+      child === null ||
+      typeof child !== 'object' ||
+      (child.$$typeof !== REACT_ELEMENT_TYPE &&
+        child.$$typeof !== REACT_PORTAL_TYPE)
+    ) {
+      return;
+    }
+
+    if (
+      !child._store ||
+      ((child._store.validated || child.key != null) &&
+        child._store.validated !== 2)
+    ) {
+      return;
+    }
+
+    if (typeof child._store !== 'object') {
+      throw new Error(
+        'React Component in warnForMissingKey should have a _store. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+
+    // $FlowFixMe[cannot-write] unable to narrow type from mixed to writable object
+    child._store.validated = 1;
+
+    let didWarnForKey = request.didWarnForKey;
+    if (didWarnForKey == null) {
+      didWarnForKey = request.didWarnForKey = new WeakSet();
+    }
+    const parentStackFrame = task.componentStack;
+    if (parentStackFrame === null || didWarnForKey.has(parentStackFrame)) {
+      // We already warned for other children in this parent.
+      return;
+    }
+    didWarnForKey.add(parentStackFrame);
+
+    const componentName = getComponentNameFromType(child.type);
+    const childOwner = child._owner;
+    const parentOwner = parentStackFrame.owner;
+
+    let currentComponentErrorInfo = '';
+    if (parentOwner && typeof parentOwner.type !== 'undefined') {
+      const name = getComponentNameFromType(parentOwner.type);
+      if (name) {
+        currentComponentErrorInfo =
+          '\n\nCheck the render method of `' + name + '`.';
+      }
+    }
+    if (!currentComponentErrorInfo) {
+      if (componentName) {
+        currentComponentErrorInfo = `\n\nCheck the top-level render call using <${componentName}>.`;
+      }
+    }
+
+    // Usually the current owner is the offender, but if it accepts children as a
+    // property, it may be the creator of the child that's responsible for
+    // assigning it a key.
+    let childOwnerAppendix = '';
+    if (childOwner != null && parentOwner !== childOwner) {
+      let ownerName = null;
+      if (typeof childOwner.type !== 'undefined') {
+        ownerName = getComponentNameFromType(childOwner.type);
+      } else if (typeof childOwner.name === 'string') {
+        ownerName = childOwner.name;
+      }
+      if (ownerName) {
+        // Give the component that originally created this child.
+        childOwnerAppendix = ` It was passed a child from ${ownerName}.`;
+      }
+    }
+
+    // We create a fake component stack for the child to log the stack trace from.
+    const previousComponentStack = task.componentStack;
+    const stackFrame = createComponentStackFromType(
+      task.componentStack,
+      (child: any).type,
+      (child: any)._owner,
+      (child: any)._debugStack,
+    );
+    task.componentStack = stackFrame;
+    console.error(
+      'Each child in a list should have a unique "key" prop.' +
+        '%s%s See https://react.dev/link/warning-keys for more information.',
+      currentComponentErrorInfo,
+      childOwnerAppendix,
+    );
+    task.componentStack = previousComponentStack;
+  }
+}
+
+function renderChildrenArray(
+  request: Request,
+  task: Task,
+  children: Array<any>,
+  childIndex: number,
+): void {
+  const prevKeyPath = task.keyPath;
+  const previousComponentStack = task.componentStack;
+  let previousDebugTask = null;
+  if (__DEV__) {
+    previousDebugTask = task.debugTask;
+    // We read debugInfo from task.node instead of children because it might have been an
+    // unwrapped iterable so we read from the original node.
+    pushServerComponentStack(task, (task.node: any)._debugInfo);
+  }
+  if (childIndex !== -1) {
+    task.keyPath = [task.keyPath, 'Fragment', childIndex];
+    if (task.replay !== null) {
+      replayFragment(
+        request,
+        // $FlowFixMe: Refined.
+        task,
+        children,
+        childIndex,
+      );
+      task.keyPath = prevKeyPath;
+      if (__DEV__) {
+        task.componentStack = previousComponentStack;
+        task.debugTask = previousDebugTask;
+      }
+      return;
+    }
+  }
+
+  const prevTreeContext = task.treeContext;
+  const totalChildren = children.length;
+
+  if (task.replay !== null) {
+    // Replay
+    // First we need to check if we have any resume slots at this level.
+    const resumeSlots = task.replay.slots;
+    if (resumeSlots !== null && typeof resumeSlots === 'object') {
+      for (let i = 0; i < totalChildren; i++) {
+        const node = children[i];
+        task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+        // We need to use the non-destructive form so that we can safely pop back
+        // up and render the sibling if something suspends.
+        const resumeSegmentID = resumeSlots[i];
+        // TODO: If this errors we should still continue with the next sibling.
+        if (typeof resumeSegmentID === 'number') {
+          resumeNode(request, task, resumeSegmentID, node, i);
+          // We finished rendering this node, so now we can consume this
+          // slot. This must happen after in case we rerender this task.
+          delete resumeSlots[i];
+        } else {
+          renderNode(request, task, node, i);
+        }
+      }
+      task.treeContext = prevTreeContext;
+      task.keyPath = prevKeyPath;
+      if (__DEV__) {
+        task.componentStack = previousComponentStack;
+        task.debugTask = previousDebugTask;
+      }
+      return;
+    }
+  }
+
+  for (let i = 0; i < totalChildren; i++) {
+    const node = children[i];
+    if (__DEV__) {
+      warnForMissingKey(request, task, node);
+    }
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+    // We need to use the non-destructive form so that we can safely pop back
+    // up and render the sibling if something suspends.
+    renderNode(request, task, node, i);
+  }
+
+  // Because this context is always set right before rendering every child, we
+  // only need to reset it to the previous value at the very end.
+  task.treeContext = prevTreeContext;
+  task.keyPath = prevKeyPath;
+  if (__DEV__) {
+    task.componentStack = previousComponentStack;
+    task.debugTask = previousDebugTask;
+  }
+}
+
+function trackPostponedBoundary(
+  request: Request,
+  trackedPostpones: PostponedHoles,
+  boundary: SuspenseBoundary,
+): ReplaySuspenseBoundary {
+  boundary.status = POSTPONED;
+  // We need to eagerly assign it an ID because we'll need to refer to
+  // it before flushing and we know that we can't inline it.
+  boundary.rootSegmentID = request.nextSegmentId++;
+
+  const tracked = boundary.tracked;
+  if (tracked === null) {
+    throw new Error(
+      'It should not be possible to postpone at the root. This is a bug in React.',
+    );
+  }
+
+  const boundaryKeyPath = tracked.contentKeyPath;
+  if (boundaryKeyPath === null) {
+    throw new Error(
+      'It should not be possible to postpone at the root. This is a bug in React.',
+    );
+  }
+
+  const fallbackReplayNode = tracked.fallbackNode;
+
+  const children: Array<ReplayNode> = [];
+  const boundaryNode: void | ReplayNode =
+    trackedPostpones.workingMap.get(boundaryKeyPath);
+  if (boundaryNode === undefined) {
+    const suspenseBoundary: ReplaySuspenseBoundary = [
+      boundaryKeyPath[1],
+      boundaryKeyPath[2],
+      children,
+      null,
+      fallbackReplayNode,
+      boundary.rootSegmentID,
+    ];
+    trackedPostpones.workingMap.set(boundaryKeyPath, suspenseBoundary);
+    addToReplayParent(suspenseBoundary, boundaryKeyPath[0], trackedPostpones);
+    return suspenseBoundary;
+  } else {
+    // Upgrade to ReplaySuspenseBoundary.
+    const suspenseBoundary: ReplaySuspenseBoundary = (boundaryNode: any);
+    suspenseBoundary[4] = fallbackReplayNode;
+    suspenseBoundary[5] = boundary.rootSegmentID;
+    return suspenseBoundary;
+  }
+}
+
+function trackPostpone(
+  request: Request,
+  trackedPostpones: PostponedHoles,
+  task: Task,
+  segment: Segment,
+): void {
+  segment.status = POSTPONED;
+
+  const keyPath = task.keyPath;
+  const boundary = task.blockedBoundary;
+
+  if (boundary === null) {
+    segment.id = request.nextSegmentId++;
+    trackedPostpones.rootSlots = segment.id;
+    if (request.completedRootSegment !== null) {
+      // Postpone the root if this was a deeper segment.
+      request.completedRootSegment.status = POSTPONED;
+    }
+    return;
+  }
+
+  if (boundary !== null && boundary.status === PENDING) {
+    const boundaryNode = trackPostponedBoundary(
+      request,
+      trackedPostpones,
+      boundary,
+    );
+    if (
+      boundary.tracked !== null &&
+      boundary.tracked.contentKeyPath === keyPath &&
+      task.childIndex === -1
+    ) {
+      // Assign ID
+      if (segment.id === -1) {
+        if (segment.parentFlushed) {
+          // If this segment's parent was already flushed, it means we really just
+          // skipped the parent and this segment is now the root.
+          segment.id = boundary.rootSegmentID;
+        } else {
+          segment.id = request.nextSegmentId++;
+        }
+      }
+      // We postponed directly inside the Suspense boundary so we mark this for resuming.
+      boundaryNode[3] = segment.id;
+      return;
+    }
+    // Otherwise, fall through to add the child node.
+  }
+
+  // We know that this will leave a hole so we might as well assign an ID now.
+  // We might have one already if we had a parent that gave us its ID.
+  if (segment.id === -1) {
+    if (segment.parentFlushed && boundary !== null) {
+      // If this segment's parent was already flushed, it means we really just
+      // skipped the parent and this segment is now the root.
+      segment.id = boundary.rootSegmentID;
+    } else {
+      segment.id = request.nextSegmentId++;
+    }
+  }
+
+  if (task.childIndex === -1) {
+    // Resume starting from directly inside the previous parent element.
+    if (keyPath === null) {
+      trackedPostpones.rootSlots = segment.id;
+    } else {
+      const workingMap = trackedPostpones.workingMap;
+      let resumableNode = workingMap.get(keyPath);
+      if (resumableNode === undefined) {
+        resumableNode = [
+          keyPath[1],
+          keyPath[2],
+          ([]: Array<ReplayNode>),
+          segment.id,
+        ];
+        addToReplayParent(resumableNode, keyPath[0], trackedPostpones);
+      } else {
+        resumableNode[3] = segment.id;
+      }
+    }
+  } else {
+    let slots;
+    if (keyPath === null) {
+      slots = trackedPostpones.rootSlots;
+      if (slots === null) {
+        slots = trackedPostpones.rootSlots = ({}: {[index: number]: number});
+      } else if (typeof slots === 'number') {
+        throw new Error(
+          'It should not be possible to postpone both at the root of an element ' +
+            'as well as a slot below. This is a bug in React.',
+        );
+      }
+    } else {
+      const workingMap = trackedPostpones.workingMap;
+      let resumableNode = workingMap.get(keyPath);
+      if (resumableNode === undefined) {
+        slots = ({}: {[index: number]: number});
+        resumableNode = ([
+          keyPath[1],
+          keyPath[2],
+          ([]: Array<ReplayNode>),
+          slots,
+        ]: ReplayNode);
+        workingMap.set(keyPath, resumableNode);
+        addToReplayParent(resumableNode, keyPath[0], trackedPostpones);
+      } else {
+        slots = resumableNode[3];
+        if (slots === null) {
+          slots = resumableNode[3] = ({}: {[index: number]: number});
+        } else if (typeof slots === 'number') {
+          throw new Error(
+            'It should not be possible to postpone both at the root of an element ' +
+              'as well as a slot below. This is a bug in React.',
+          );
+        }
+      }
+    }
+    slots[task.childIndex] = segment.id;
+  }
+}
+
+// In case a boundary errors, we need to stop tracking it because we won't
+// resume it.
+function untrackBoundary(request: Request, boundary: SuspenseBoundary) {
+  const trackedPostpones = request.trackedPostpones;
+  if (trackedPostpones === null) {
+    return;
+  }
+  const tracked = boundary.tracked;
+  if (tracked === null) {
+    return;
+  }
+  const boundaryKeyPath = tracked.contentKeyPath;
+  if (boundaryKeyPath === null) {
+    return;
+  }
+  const boundaryNode: void | ReplayNode =
+    trackedPostpones.workingMap.get(boundaryKeyPath);
+  if (boundaryNode === undefined) {
+    return;
+  }
+
+  // Downgrade to plain ReplayNode since we won't replay through it.
+  // $FlowFixMe[cannot-write]: We intentionally downgrade this to the other tuple.
+  boundaryNode.length = 4;
+  // Remove any resumable slots.
+  boundaryNode[2] = [];
+  boundaryNode[3] = null;
+
+  // TODO: We should really just remove the boundary from all parent paths too so
+  // we don't replay the path to it.
+}
+
+function spawnNewSuspendedReplayTask(
+  request: Request,
+  task: ReplayTask,
+  thenableState: ThenableState | null,
+): ReplayTask {
+  return createReplayTask(
+    request,
+    thenableState,
+    task.replay,
+    task.node,
+    task.childIndex,
+    task.blockedBoundary,
+    task.hoistableState,
+    task.abortSet,
+    task.keyPath,
+    task.formatContext,
+    task.context,
+    task.treeContext,
+    task.row,
+    task.componentStack,
+    !disableLegacyContext ? task.legacyContext : emptyContextObject,
+    __DEV__ ? task.debugTask : null,
+  );
+}
+
+function spawnNewSuspendedRenderTask(
+  request: Request,
+  task: RenderTask,
+  thenableState: ThenableState | null,
+): RenderTask {
+  // Something suspended, we'll need to create a new segment and resolve it later.
+  const segment = task.blockedSegment;
+  const insertionIndex = segment.chunks.length;
+  const newSegment = createPendingSegment(
+    request,
+    insertionIndex,
+    null,
+    task.formatContext,
+    // Adopt the parent segment's leading text embed
+    segment.lastPushedText,
+    // Assume we are text embedded at the trailing edge
+    true,
+  );
+  segment.children.push(newSegment);
+  // Reset lastPushedText for current Segment since the new Segment "consumed" it
+  segment.lastPushedText = false;
+  return createRenderTask(
+    request,
+    thenableState,
+    task.node,
+    task.childIndex,
+    task.blockedBoundary,
+    newSegment,
+    task.blockedPreamble,
+    task.hoistableState,
+    task.abortSet,
+    task.keyPath,
+    task.formatContext,
+    task.context,
+    task.treeContext,
+    task.row,
+    task.componentStack,
+    !disableLegacyContext ? task.legacyContext : emptyContextObject,
+    __DEV__ ? task.debugTask : null,
+  );
+}
+
+// This is a non-destructive form of rendering a node. If it suspends it spawns
+// a new task and restores the context of this task to what it was before.
+function renderNode(
+  request: Request,
+  task: Task,
+  node: ReactNodeList,
+  childIndex: number,
+): void {
+  // Snapshot the current context in case something throws to interrupt the
+  // process.
+  const previousFormatContext = task.formatContext;
+  const previousLegacyContext = !disableLegacyContext
+    ? task.legacyContext
+    : emptyContextObject;
+  const previousContext = task.context;
+  const previousKeyPath = task.keyPath;
+  const previousTreeContext = task.treeContext;
+  const previousComponentStack = task.componentStack;
+  const previousDebugTask = __DEV__ ? task.debugTask : null;
+  let x;
+  // Store how much we've pushed at this point so we can reset it in case something
+  // suspended partially through writing something.
+  const segment = task.blockedSegment;
+  if (segment === null) {
+    // Replay
+    task = ((task: any): ReplayTask); // Refined
+    const previousReplaySet: ReplaySet = task.replay;
+    try {
+      return renderNodeDestructive(request, task, node, childIndex);
+    } catch (thrownValue) {
+      resetHooksState();
+
+      x =
+        thrownValue === SuspenseException
+          ? // This is a special type of exception used for Suspense. For historical
+            // reasons, the rest of the Suspense implementation expects the thrown
+            // value to be a thenable, because before `use` existed that was the
+            // (unstable) API for suspending. This implementation detail can change
+            // later, once we deprecate the old API in favor of `use`.
+            getSuspendedThenable()
+          : thrownValue;
+
+      if (request.status === ABORTING) {
+        // We are aborting so we can just bubble up to the task by falling through
+      } else if (typeof x === 'object' && x !== null) {
+        // $FlowFixMe[method-unbinding]
+        if (typeof x.then === 'function') {
+          const wakeable: Wakeable = (x: any);
+          const thenableState =
+            thrownValue === SuspenseException
+              ? getThenableStateAfterSuspending()
+              : null;
+          const newTask = spawnNewSuspendedReplayTask(
+            request,
+            // $FlowFixMe: Refined.
+            task,
+            thenableState,
+          );
+          const ping = newTask.ping;
+          wakeable.then(ping, ping);
+
+          // Restore the context. We assume that this will be restored by the inner
+          // functions in case nothing throws so we don't use "finally" here.
+          task.formatContext = previousFormatContext;
+          if (!disableLegacyContext) {
+            task.legacyContext = previousLegacyContext;
+          }
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          task.componentStack = previousComponentStack;
+          task.replay = previousReplaySet;
+          if (__DEV__) {
+            task.debugTask = previousDebugTask;
+          }
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          return;
+        }
+        if (x.message === 'Maximum call stack size exceeded') {
+          // This was a stack overflow. We do a lot of recursion in React by default for
+          // performance but it can lead to stack overflows in extremely deep trees.
+          // We do have the ability to create a trampoile if this happens which makes
+          // this kind of zero-cost.
+          const thenableState =
+            thrownValue === SuspenseException
+              ? getThenableStateAfterSuspending()
+              : null;
+          const newTask = spawnNewSuspendedReplayTask(
+            request,
+            // $FlowFixMe: Refined.
+            task,
+            thenableState,
+          );
+
+          // Immediately schedule the task for retrying.
+          request.pingedTasks.push(newTask);
+
+          // Restore the context. We assume that this will be restored by the inner
+          // functions in case nothing throws so we don't use "finally" here.
+          task.formatContext = previousFormatContext;
+          if (!disableLegacyContext) {
+            task.legacyContext = previousLegacyContext;
+          }
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          task.componentStack = previousComponentStack;
+          task.replay = previousReplaySet;
+          if (__DEV__) {
+            task.debugTask = previousDebugTask;
+          }
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          return;
+        }
+      }
+
+      // TODO: Abort any undiscovered Suspense boundaries in the ReplayNode.
+    }
+  } else {
+    // Render
+    const childrenLength = segment.children.length;
+    const chunkLength = segment.chunks.length;
+    try {
+      return renderNodeDestructive(request, task, node, childIndex);
+    } catch (thrownValue) {
+      resetHooksState();
+
+      // Reset the write pointers to where we started.
+      segment.children.length = childrenLength;
+      segment.chunks.length = chunkLength;
+
+      x =
+        thrownValue === SuspenseException
+          ? // This is a special type of exception used for Suspense. For historical
+            // reasons, the rest of the Suspense implementation expects the thrown
+            // value to be a thenable, because before `use` existed that was the
+            // (unstable) API for suspending. This implementation detail can change
+            // later, once we deprecate the old API in favor of `use`.
+            getSuspendedThenable()
+          : thrownValue;
+
+      if (request.status === ABORTING) {
+        // We are aborting so we can just bubble up to the task by falling through
+      } else if (typeof x === 'object' && x !== null) {
+        // $FlowFixMe[method-unbinding]
+        if (typeof x.then === 'function') {
+          const wakeable: Wakeable = (x: any);
+          const thenableState =
+            thrownValue === SuspenseException
+              ? getThenableStateAfterSuspending()
+              : null;
+          const newTask = spawnNewSuspendedRenderTask(
+            request,
+            // $FlowFixMe: Refined.
+            task,
+            thenableState,
+          );
+          const ping = newTask.ping;
+          wakeable.then(ping, ping);
+
+          // Restore the context. We assume that this will be restored by the inner
+          // functions in case nothing throws so we don't use "finally" here.
+          task.formatContext = previousFormatContext;
+          if (!disableLegacyContext) {
+            task.legacyContext = previousLegacyContext;
+          }
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          task.componentStack = previousComponentStack;
+          if (__DEV__) {
+            task.debugTask = previousDebugTask;
+          }
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          return;
+        }
+        if (x.message === 'Maximum call stack size exceeded') {
+          // This was a stack overflow. We do a lot of recursion in React by default for
+          // performance but it can lead to stack overflows in extremely deep trees.
+          // We do have the ability to create a trampoile if this happens which makes
+          // this kind of zero-cost.
+          const thenableState =
+            thrownValue === SuspenseException
+              ? getThenableStateAfterSuspending()
+              : null;
+          const newTask = spawnNewSuspendedRenderTask(
+            request,
+            // $FlowFixMe: Refined.
+            task,
+            thenableState,
+          );
+
+          // Immediately schedule the task for retrying.
+          request.pingedTasks.push(newTask);
+
+          // Restore the context. We assume that this will be restored by the inner
+          // functions in case nothing throws so we don't use "finally" here.
+          task.formatContext = previousFormatContext;
+          if (!disableLegacyContext) {
+            task.legacyContext = previousLegacyContext;
+          }
+          task.context = previousContext;
+          task.keyPath = previousKeyPath;
+          task.treeContext = previousTreeContext;
+          task.componentStack = previousComponentStack;
+          if (__DEV__) {
+            task.debugTask = previousDebugTask;
+          }
+          // Restore all active ReactContexts to what they were before.
+          switchContext(previousContext);
+          return;
+        }
+      }
+    }
+  }
+
+  // Restore the context. We assume that this will be restored by the inner
+  // functions in case nothing throws so we don't use "finally" here.
+  task.formatContext = previousFormatContext;
+  if (!disableLegacyContext) {
+    task.legacyContext = previousLegacyContext;
+  }
+  task.context = previousContext;
+  task.keyPath = previousKeyPath;
+  task.treeContext = previousTreeContext;
+  // We intentionally do not restore the component stack on the error pathway
+  // Whatever handles the error needs to use this stack which is the location of the
+  // error. We must restore the stack wherever we handle this
+
+  // Restore all active ReactContexts to what they were before.
+  switchContext(previousContext);
+
+  throw x;
+}
+
+function erroredReplay(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  error: mixed,
+  errorInfo: ThrownInfo,
+  replayNodes: ReplayNode[],
+  resumeSlots: ResumeSlots,
+  debugTask: null | ConsoleTask,
+): void {
+  // Erroring during a replay doesn't actually cause an error by itself because
+  // that component has already rendered. What causes the error is the resumable
+  // points that we did not yet finish which will be below the point of the reset.
+  // For example, if we're replaying a path to a Suspense boundary that is not done
+  // that doesn't error the parent Suspense boundary.
+  // This might be a bit strange that the error in a parent gets thrown at a child.
+  // We log it only once and reuse the digest.
+  const errorDigest = logRecoverableError(request, error, errorInfo, debugTask);
+  abortRemainingReplayNodes(
+    request,
+    boundary,
+    replayNodes,
+    resumeSlots,
+    error,
+    errorDigest,
+    errorInfo,
+    false,
+  );
+}
+
+function erroredTask(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  row: null | SuspenseListRow,
+  error: mixed,
+  errorInfo: ThrownInfo,
+  debugTask: null | ConsoleTask,
+) {
+  if (row !== null) {
+    if (--row.pendingTasks === 0) {
+      finishSuspenseListRow(request, row);
+    }
+  }
+
+  request.allPendingTasks--;
+
+  // Report the error to a global handler.
+  // We don't handle halts here because we only halt when prerendering and
+  // when prerendering we should be finishing tasks not erroring them when
+  // they halt or postpone
+  const errorDigest = logRecoverableError(request, error, errorInfo, debugTask);
+  if (boundary === null) {
+    fatalError(request, error, errorInfo, debugTask);
+  } else {
+    boundary.pendingTasks--;
+    if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
+      encodeErrorForBoundary(boundary, errorDigest, error, errorInfo, false);
+      untrackBoundary(request, boundary);
+
+      const boundaryRow = boundary.row;
+      if (boundaryRow !== null) {
+        // Unblock the SuspenseListRow that was blocked by this boundary.
+        if (--boundaryRow.pendingTasks === 0) {
+          finishSuspenseListRow(request, boundaryRow);
+        }
+      }
+
+      // Regardless of what happens next, this boundary won't be displayed,
+      // so we can flush it, if the parent already flushed.
+      if (boundary.parentFlushed) {
+        // We don't have a preference where in the queue this goes since it's likely
+        // to error on the client anyway. However, intentionally client-rendered
+        // boundaries should be flushed earlier so that they can start on the client.
+        // We reuse the same queue for errors.
+        request.clientRenderedBoundaries.push(boundary);
+      }
+
+      if (
+        request.pendingRootTasks === 0 &&
+        request.trackedPostpones === null &&
+        boundary.preamble !== null
+      ) {
+        // The root is complete and this boundary may contribute part of the preamble.
+        // We eagerly attempt to prepare the preamble here because we expect most requests
+        // to have few boundaries which contribute preambles and it allow us to do this
+        // preparation work during the work phase rather than the when flushing.
+        preparePreamble(request);
+      }
+    }
+  }
+
+  if (request.allPendingTasks === 0) {
+    completeAll(request);
+  }
+}
+
+function abortTaskSoft(this: Request, task: Task): void {
+  // This aborts task without aborting the parent boundary that it blocks.
+  // It's used for when we didn't need this task to complete the tree.
+  // If task was needed, then it should use abortTask instead.
+  const request: Request = this;
+  const boundary = task.blockedBoundary;
+  const segment = task.blockedSegment;
+  if (segment !== null) {
+    segment.status = ABORTED;
+    finishedTask(request, boundary, task.row, segment);
+  }
+}
+
+function abortRemainingSuspenseBoundary(
+  request: Request,
+  rootSegmentID: number,
+  error: mixed,
+  errorDigest: ?string,
+  errorInfo: ThrownInfo,
+  wasAborted: boolean,
+): void {
+  const resumedBoundary = createSuspenseBoundary(
+    request,
+    null,
+    new Set(),
+    null,
+    false,
+  );
+  resumedBoundary.parentFlushed = true;
+  // We restore the same id of this boundary as was used during prerender.
+  resumedBoundary.rootSegmentID = rootSegmentID;
+
+  resumedBoundary.status = CLIENT_RENDERED;
+  encodeErrorForBoundary(
+    resumedBoundary,
+    errorDigest,
+    error,
+    errorInfo,
+    wasAborted,
+  );
+
+  if (resumedBoundary.parentFlushed) {
+    request.clientRenderedBoundaries.push(resumedBoundary);
+  }
+}
+
+function abortRemainingReplayNodes(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  nodes: Array<ReplayNode>,
+  slots: ResumeSlots,
+  error: mixed,
+  errorDigest: ?string,
+  errorInfo: ThrownInfo,
+  aborted: boolean,
+): void {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.length === 4) {
+      abortRemainingReplayNodes(
+        request,
+        boundary,
+        node[2],
+        node[3],
+        error,
+        errorDigest,
+        errorInfo,
+        aborted,
+      );
+    } else {
+      const boundaryNode: ReplaySuspenseBoundary = node;
+      const rootSegmentID = boundaryNode[5];
+      abortRemainingSuspenseBoundary(
+        request,
+        rootSegmentID,
+        error,
+        errorDigest,
+        errorInfo,
+        aborted,
+      );
+    }
+  }
+  // Empty the set, since we've cleared it now.
+  nodes.length = 0;
+
+  if (slots !== null) {
+    // We had something still to resume in the parent boundary. We must trigger
+    // the error on the parent boundary since it's not able to complete.
+    if (boundary === null) {
+      throw new Error(
+        'We should not have any resumable nodes in the shell. ' +
+          'This is a bug in React.',
+      );
+    } else if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
+      encodeErrorForBoundary(boundary, errorDigest, error, errorInfo, aborted);
+      if (boundary.parentFlushed) {
+        request.clientRenderedBoundaries.push(boundary);
+      }
+    }
+    // Empty the set
+    if (typeof slots === 'object') {
+      for (const index in slots) {
+        delete slots[(index: any)];
+      }
+    }
+  }
+}
+
+function abortTask(task: Task, request: Request, error: mixed): void {
+  // This aborts the task and aborts the parent that it blocks, putting it into
+  // client rendered mode.
+  const boundary = task.blockedBoundary;
+  const segment = task.blockedSegment;
+  if (segment !== null) {
+    if (segment.status === RENDERING) {
+      // This is the a currently rendering Segment. The render itself will
+      // abort the task.
+      return;
+    }
+    segment.status = ABORTED;
+  }
+
+  const errorInfo = getThrownInfo(task.componentStack);
+  if (__DEV__ && enableAsyncDebugInfo) {
+    // If the task is not rendering, then this is an async abort. Conceptually it's as if
+    // the abort happened inside the async gap. The abort reason's stack frame won't have that
+    // on the stack so instead we use the owner stack and debug task of any halted async debug info.
+    let node: any = task.node;
+    if (node !== null && typeof node === 'object') {
+      // Push a fake component stack frame that represents the await.
+      let debugInfo = node._debugInfo;
+      // First resolve lazy nodes to find debug info that has been transferred
+      // to the inner value.
+      while (
+        typeof node === 'object' &&
+        node !== null &&
+        node.$$typeof === REACT_LAZY_TYPE
+      ) {
+        const payload = node._payload;
+        if (payload.status === 'fulfilled') {
+          node = payload.value;
+          continue;
+        }
+        break;
+      }
+      if (
+        typeof node === 'object' &&
+        node !== null &&
+        (isArray(node) ||
+          typeof node[ASYNC_ITERATOR] === 'function' ||
+          node.$$typeof === REACT_ELEMENT_TYPE ||
+          node.$$typeof === REACT_LAZY_TYPE) &&
+        isArray(node._debugInfo)
+      ) {
+        debugInfo = node._debugInfo;
+      }
+      pushHaltedAwaitOnComponentStack(task, debugInfo);
+      if (task.thenableState !== null) {
+        pushSuspendedCallSiteOnComponentStack(request, task);
+      }
+    }
+  }
+
+  if (boundary === null) {
+    if (request.status !== CLOSING && request.status !== CLOSED) {
+      const replay: null | ReplaySet = task.replay;
+      if (replay === null) {
+        // We didn't complete the root so we have nothing to show. We can close
+        // the request;
+        if (
+          enableHalt &&
+          request.trackedPostpones !== null &&
+          segment !== null
+        ) {
+          const trackedPostpones = request.trackedPostpones;
+          // We are aborting a prerender and must treat the shell as halted
+          // We log the error but we still resolve the prerender
+          logRecoverableError(request, error, errorInfo, task.debugTask);
+          trackPostpone(request, trackedPostpones, task, segment);
+          finishedTask(request, null, task.row, segment);
+        } else {
+          logRecoverableError(request, error, errorInfo, task.debugTask);
+          fatalError(request, error, errorInfo, task.debugTask);
+        }
+        return;
+      } else {
+        // If the shell aborts during a replay, that's not a fatal error. Instead
+        // we should be able to recover by client rendering all the root boundaries in
+        // the ReplaySet.
+        replay.pendingTasks--;
+        if (replay.pendingTasks === 0 && replay.nodes.length > 0) {
+          const errorDigest = logRecoverableError(
+            request,
+            error,
+            errorInfo,
+            null,
+          );
+          abortRemainingReplayNodes(
+            request,
+            null,
+            replay.nodes,
+            replay.slots,
+            error,
+            errorDigest,
+            errorInfo,
+            true,
+          );
+        }
+        request.pendingRootTasks--;
+        if (request.pendingRootTasks === 0) {
+          completeShell(request);
+        }
+      }
+    }
+  } else {
+    // We construct an errorInfo from the boundary's componentStack so the error in dev will indicate which
+    // boundary the message is referring to
+    const trackedPostpones = request.trackedPostpones;
+    if (boundary.status !== CLIENT_RENDERED) {
+      if (enableHalt) {
+        if (trackedPostpones !== null && segment !== null) {
+          // We are aborting a prerender and must halt this boundary.
+          // We treat this like other postpones during prerendering
+          logRecoverableError(request, error, errorInfo, task.debugTask);
+          trackPostpone(request, trackedPostpones, task, segment);
+          // If this boundary was still pending then we haven't already cancelled its fallbacks.
+          // We'll need to abort the fallbacks, which will also error that parent boundary.
+          boundary.fallbackAbortableTasks.forEach(fallbackTask =>
+            abortTask(fallbackTask, request, error),
+          );
+          boundary.fallbackAbortableTasks.clear();
+          return finishedTask(request, boundary, task.row, segment);
+        }
+      }
+      boundary.status = CLIENT_RENDERED;
+      // We are aborting a render or resume which should put boundaries
+      // into an explicitly client rendered state
+      const errorDigest = logRecoverableError(
+        request,
+        error,
+        errorInfo,
+        task.debugTask,
+      );
+      boundary.status = CLIENT_RENDERED;
+      encodeErrorForBoundary(boundary, errorDigest, error, errorInfo, true);
+
+      untrackBoundary(request, boundary);
+
+      if (boundary.parentFlushed) {
+        request.clientRenderedBoundaries.push(boundary);
+      }
+    }
+
+    boundary.pendingTasks--;
+
+    const boundaryRow = boundary.row;
+    if (boundaryRow !== null) {
+      // Unblock the SuspenseListRow that was blocked by this boundary.
+      if (--boundaryRow.pendingTasks === 0) {
+        finishSuspenseListRow(request, boundaryRow);
+      }
+    }
+
+    // If this boundary was still pending then we haven't already cancelled its fallbacks.
+    // We'll need to abort the fallbacks, which will also error that parent boundary.
+    boundary.fallbackAbortableTasks.forEach(fallbackTask =>
+      abortTask(fallbackTask, request, error),
+    );
+    boundary.fallbackAbortableTasks.clear();
+  }
+
+  const row = task.row;
+  if (row !== null) {
+    if (--row.pendingTasks === 0) {
+      finishSuspenseListRow(request, row);
+    }
+  }
+
+  request.allPendingTasks--;
+  if (request.allPendingTasks === 0) {
+    completeAll(request);
+  }
+}
+
+function abortTaskDEV(task: Task, request: Request, error: mixed): void {
+  if (__DEV__) {
+    const prevTaskInDEV = currentTaskInDEV;
+    const prevGetCurrentStackImpl = ReactSharedInternals.getCurrentStack;
+    setCurrentTaskInDEV(task);
+    ReactSharedInternals.getCurrentStack = getCurrentStackInDEV;
+    try {
+      abortTask(task, request, error);
+    } finally {
+      setCurrentTaskInDEV(prevTaskInDEV);
+      ReactSharedInternals.getCurrentStack = prevGetCurrentStackImpl;
+    }
+  } else {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'abortTaskDEV should never be called in production mode. This is a bug in React.',
+    );
+  }
+}
+
+function safelyEmitEarlyPreloads(
+  request: Request,
+  shellComplete: boolean,
+): void {
+  try {
+    emitEarlyPreloads(
+      request.renderState,
+      request.resumableState,
+      shellComplete,
+    );
+  } catch (error) {
+    // We assume preloads are optimistic and thus non-fatal if errored.
+    const errorInfo: ThrownInfo = {};
+    logRecoverableError(request, error, errorInfo, null);
+  }
+}
+
+// I extracted this function out because we want to ensure we consistently emit preloads before
+// transitioning to the next request stage and this transition can happen in multiple places in this
+// implementation.
+function completeShell(request: Request) {
+  if (request.trackedPostpones === null) {
+    // We only emit early preloads on shell completion for renders. For prerenders
+    // we wait for the entire Request to finish because we are not responding to a
+    // live request and can wait for as much data as possible.
+
+    // we should only be calling completeShell when the shell is complete so we
+    // just use a literal here
+    const shellComplete = true;
+    safelyEmitEarlyPreloads(request, shellComplete);
+  }
+  if (request.trackedPostpones === null) {
+    // When the shell is complete it will be possible to flush. We attempt to prepre
+    // the Preamble here in case it is ready for flushing.
+    // We exclude prerenders because these cannot flush until after completeAll has been called
+    preparePreamble(request);
+  }
+
+  // We have completed the shell so the shell can't error anymore.
+  request.onShellError = noop;
+  const onShellReady = request.onShellReady;
+  onShellReady();
+}
+
+// I extracted this function out because we want to ensure we consistently emit preloads before
+// transitioning to the next request stage and this transition can happen in multiple places in this
+// implementation.
+function completeAll(request: Request) {
+  // During a render the shell must be complete if the entire request is finished
+  // however during a Prerender it is possible that the shell is incomplete because
+  // it postponed. We cannot use rootPendingTasks in the prerender case because
+  // those hit zero even when the shell postpones. Instead we look at the completedRootSegment
+  const shellComplete =
+    request.trackedPostpones === null
+      ? // Render, we assume it is completed
+        true
+      : // Prerender Request, we use the state of the root segment
+        request.completedRootSegment === null ||
+        request.completedRootSegment.status !== POSTPONED;
+  safelyEmitEarlyPreloads(request, shellComplete);
+
+  // When the shell is complete it will be possible to flush. We attempt to prepre
+  // the Preamble here in case it is ready for flushing
+  preparePreamble(request);
+
+  const onAllReady = request.onAllReady;
+  onAllReady();
+}
+
+function queueCompletedSegment(
+  boundary: SuspenseBoundary,
+  segment: Segment,
+): void {
+  if (
+    segment.chunks.length === 0 &&
+    segment.children.length === 1 &&
+    segment.children[0].boundary === null &&
+    segment.children[0].id === -1
+  ) {
+    // This is an empty segment. There's nothing to write, so we can instead transfer the ID
+    // to the child. That way any existing references point to the child.
+    const childSegment = segment.children[0];
+    childSegment.id = segment.id;
+    childSegment.parentFlushed = true;
+    if (
+      childSegment.status === COMPLETED ||
+      childSegment.status === ABORTED ||
+      childSegment.status === ERRORED
+    ) {
+      queueCompletedSegment(boundary, childSegment);
+    }
+  } else {
+    const completedSegments = boundary.completedSegments;
+    completedSegments.push(segment);
+  }
+}
+
+function finishedSegment(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  segment: Segment,
+) {
+  if (byteLengthOfChunk !== null) {
+    // Count the bytes of all the chunks of this segment.
+    const chunks = segment.chunks;
+    let segmentByteSize = 0;
+    for (let i = 0; i < chunks.length; i++) {
+      segmentByteSize += byteLengthOfChunk(chunks[i]);
+    }
+    // Accumulate on the parent boundary to power heuristics.
+    if (boundary === null) {
+      request.byteSize += segmentByteSize;
+    } else {
+      boundary.byteSize += segmentByteSize;
+    }
+  }
+}
+
+function finishedTask(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  row: null | SuspenseListRow,
+  segment: null | Segment,
+) {
+  if (row !== null) {
+    if (--row.pendingTasks === 0) {
+      finishSuspenseListRow(request, row);
+    } else if (row.together) {
+      tryToResolveTogetherRow(request, row);
+    }
+  }
+  request.allPendingTasks--;
+  if (boundary === null) {
+    if (segment !== null && segment.parentFlushed) {
+      if (request.completedRootSegment !== null) {
+        throw new Error(
+          'There can only be one root segment. This is a bug in React.',
+        );
+      }
+
+      request.completedRootSegment = segment;
+    }
+    request.pendingRootTasks--;
+    if (request.pendingRootTasks === 0) {
+      completeShell(request);
+    }
+  } else {
+    boundary.pendingTasks--;
+    if (boundary.status === CLIENT_RENDERED) {
+      // This already errored.
+    } else if (boundary.pendingTasks === 0) {
+      if (boundary.status === PENDING) {
+        boundary.status = COMPLETED;
+      }
+      // This must have been the last segment we were waiting on. This boundary is now complete.
+      if (segment !== null && segment.parentFlushed) {
+        // Our parent segment already flushed, so we need to schedule this segment to be emitted.
+        // If it is a segment that was aborted, we'll write other content instead so we don't need
+        // to emit it.
+        if (segment.status === COMPLETED || segment.status === ABORTED) {
+          queueCompletedSegment(boundary, segment);
+        }
+      }
+      if (boundary.parentFlushed) {
+        // The segment might be part of a segment that didn't flush yet, but if the boundary's
+        // parent flushed, we need to schedule the boundary to be emitted.
+        request.completedBoundaries.push(boundary);
+      }
+
+      // We can now cancel any pending task on the fallback since we won't need to show it anymore.
+      // This needs to happen after we read the parentFlushed flags because aborting can finish
+      // work which can trigger user code, which can start flushing, which can change those flags.
+      // If the boundary was POSTPONED, we still need to finish the fallback first.
+      // If the boundary is eligible to be outlined during flushing we can't cancel the fallback
+      // since we might need it when it's being outlined.
+      if (boundary.status === COMPLETED) {
+        const boundaryRow = boundary.row;
+        if (boundaryRow !== null) {
+          // Hoist the HoistableState from the boundary to the row so that the next rows
+          // can depend on the same dependencies.
+          hoistHoistables(boundaryRow.hoistables, boundary.contentState);
+        }
+        if (!isEligibleForOutlining(request, boundary)) {
+          boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
+          boundary.fallbackAbortableTasks.clear();
+          if (boundaryRow !== null) {
+            // If we aren't eligible for outlining, we don't have to wait until we flush it.
+            if (--boundaryRow.pendingTasks === 0) {
+              finishSuspenseListRow(request, boundaryRow);
+            }
+          }
+        }
+
+        if (
+          request.pendingRootTasks === 0 &&
+          request.trackedPostpones === null &&
+          boundary.preamble !== null
+        ) {
+          // The root is complete and this boundary may contribute part of the preamble.
+          // We eagerly attempt to prepare the preamble here because we expect most requests
+          // to have few boundaries which contribute preambles and it allow us to do this
+          // preparation work during the work phase rather than the when flushing.
+          preparePreamble(request);
+        }
+      } else if (boundary.status === POSTPONED) {
+        const boundaryRow = boundary.row;
+        if (boundaryRow !== null) {
+          if (request.trackedPostpones !== null) {
+            // If this boundary is postponed, then we need to also postpone any blocked boundaries
+            // in the next row.
+            trackPostponedSuspenseListRow(
+              request,
+              request.trackedPostpones,
+              boundaryRow.next,
+            );
+          }
+          if (--boundaryRow.pendingTasks === 0) {
+            // This is really unnecessary since we've already postponed the boundaries but
+            // for pairity with other track+finish paths. We might end up using the hoisting.
+            finishSuspenseListRow(request, boundaryRow);
+          }
+        }
+      }
+    } else {
+      if (segment !== null && segment.parentFlushed) {
+        // Our parent already flushed, so we need to schedule this segment to be emitted.
+        // If it is a segment that was aborted, we'll write other content instead so we don't need
+        // to emit it.
+        if (segment.status === COMPLETED || segment.status === ABORTED) {
+          queueCompletedSegment(boundary, segment);
+          const completedSegments = boundary.completedSegments;
+          if (completedSegments.length === 1) {
+            // This is the first time since we last flushed that we completed anything.
+            // We can schedule this boundary to emit its partially completed segments early
+            // in case the parent has already been flushed.
+            if (boundary.parentFlushed) {
+              request.partialBoundaries.push(boundary);
+            }
+          }
+        }
+      }
+      const boundaryRow = boundary.row;
+      if (boundaryRow !== null && boundaryRow.together) {
+        tryToResolveTogetherRow(request, boundaryRow);
+      }
+    }
+  }
+
+  if (request.allPendingTasks === 0) {
+    completeAll(request);
+  }
+}
+
+function retryTask(request: Request, task: Task): void {
+  const segment = task.blockedSegment;
+  if (segment === null) {
+    retryReplayTask(
+      request,
+      // $FlowFixMe: Refined.
+      task,
+    );
+  } else {
+    retryRenderTask(
+      request,
+      // $FlowFixMe: Refined.
+      task,
+      segment,
+    );
+  }
+}
+
+function retryRenderTask(
+  request: Request,
+  task: RenderTask,
+  segment: Segment,
+): void {
+  if (segment.status !== PENDING) {
+    // We completed this by other means before we had a chance to retry it.
+    return;
+  }
+
+  // We track when a Segment is rendering so we can handle aborts while rendering
+  segment.status = RENDERING;
+
+  // We restore the context to what it was when we suspended.
+  // We don't restore it after we leave because it's likely that we'll end up
+  // needing a very similar context soon again.
+  switchContext(task.context);
+  let prevTaskInDEV = null;
+  if (__DEV__) {
+    prevTaskInDEV = currentTaskInDEV;
+    setCurrentTaskInDEV(task);
+  }
+
+  const childrenLength = segment.children.length;
+  const chunkLength = segment.chunks.length;
+  try {
+    // We call the destructive form that mutates this task. That way if something
+    // suspends again, we can reuse the same task instead of spawning a new one.
+
+    retryNode(request, task);
+    pushSegmentFinale(
+      segment.chunks,
+      request.renderState,
+      segment.lastPushedText,
+      segment.textEmbedded,
+    );
+
+    task.abortSet.delete(task);
+    segment.status = COMPLETED;
+    finishedSegment(request, task.blockedBoundary, segment);
+    finishedTask(request, task.blockedBoundary, task.row, segment);
+  } catch (thrownValue: mixed) {
+    resetHooksState();
+
+    // Reset the write pointers to where we started.
+    segment.children.length = childrenLength;
+    segment.chunks.length = chunkLength;
+
+    const x =
+      thrownValue === SuspenseException
+        ? // This is a special type of exception used for Suspense. For historical
+          // reasons, the rest of the Suspense implementation expects the thrown
+          // value to be a thenable, because before `use` existed that was the
+          // (unstable) API for suspending. This implementation detail can change
+          // later, once we deprecate the old API in favor of `use`.
+          getSuspendedThenable()
+        : request.status === ABORTING
+          ? request.fatalError
+          : thrownValue;
+
+    if (
+      enableHalt &&
+      request.status === ABORTING &&
+      request.trackedPostpones !== null
+    ) {
+      // We are aborting a prerender and need to halt this task.
+      const trackedPostpones = request.trackedPostpones;
+      const thrownInfo = getThrownInfo(task.componentStack);
+      task.abortSet.delete(task);
+
+      logRecoverableError(
+        request,
+        x,
+        thrownInfo,
+        __DEV__ ? task.debugTask : null,
+      );
+
+      trackPostpone(request, trackedPostpones, task, segment);
+      finishedTask(request, task.blockedBoundary, task.row, segment);
+      return;
+    }
+
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        segment.status = PENDING;
+        task.thenableState =
+          thrownValue === SuspenseException
+            ? getThenableStateAfterSuspending()
+            : null;
+        const ping = task.ping;
+        // We've asserted that x is a thenable above
+        (x: any).then(ping, ping);
+        return;
+      }
+    }
+
+    const errorInfo = getThrownInfo(task.componentStack);
+    task.abortSet.delete(task);
+
+    segment.status = ERRORED;
+    erroredTask(
+      request,
+      task.blockedBoundary,
+      task.row,
+      x,
+      errorInfo,
+      __DEV__ ? task.debugTask : null,
+    );
+    return;
+  } finally {
+    if (__DEV__) {
+      setCurrentTaskInDEV(prevTaskInDEV);
+    }
+  }
+}
+
+function retryReplayTask(request: Request, task: ReplayTask): void {
+  if (task.replay.pendingTasks === 0) {
+    // There are no pending tasks working on this set, so we must have aborted.
+    return;
+  }
+
+  // We restore the context to what it was when we suspended.
+  // We don't restore it after we leave because it's likely that we'll end up
+  // needing a very similar context soon again.
+  switchContext(task.context);
+  let prevTaskInDEV = null;
+  if (__DEV__) {
+    prevTaskInDEV = currentTaskInDEV;
+    setCurrentTaskInDEV(task);
+  }
+
+  try {
+    // We call the destructive form that mutates this task. That way if something
+    // suspends again, we can reuse the same task instead of spawning a new one.
+    if (typeof task.replay.slots === 'number') {
+      const resumeSegmentID = task.replay.slots;
+      resumeNode(request, task, resumeSegmentID, task.node, task.childIndex);
+    } else {
+      retryNode(request, task);
+    }
+
+    if (task.replay.pendingTasks === 1 && task.replay.nodes.length > 0) {
+      throw new Error(
+        "Couldn't find all resumable slots by key/index during replaying. " +
+          "The tree doesn't match so React will fallback to client rendering.",
+      );
+    }
+    task.replay.pendingTasks--;
+
+    task.abortSet.delete(task);
+    finishedTask(request, task.blockedBoundary, task.row, null);
+  } catch (thrownValue) {
+    resetHooksState();
+
+    const x =
+      thrownValue === SuspenseException
+        ? // This is a special type of exception used for Suspense. For historical
+          // reasons, the rest of the Suspense implementation expects the thrown
+          // value to be a thenable, because before `use` existed that was the
+          // (unstable) API for suspending. This implementation detail can change
+          // later, once we deprecate the old API in favor of `use`.
+          getSuspendedThenable()
+        : thrownValue;
+
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        const ping = task.ping;
+        x.then(ping, ping);
+        task.thenableState =
+          thrownValue === SuspenseException
+            ? getThenableStateAfterSuspending()
+            : null;
+        return;
+      }
+    }
+    task.replay.pendingTasks--;
+    task.abortSet.delete(task);
+    const errorInfo = getThrownInfo(task.componentStack);
+    erroredReplay(
+      request,
+      task.blockedBoundary,
+      request.status === ABORTING ? request.fatalError : x,
+      errorInfo,
+      task.replay.nodes,
+      task.replay.slots,
+      __DEV__ ? task.debugTask : null,
+    );
+    request.pendingRootTasks--;
+    if (request.pendingRootTasks === 0) {
+      completeShell(request);
+    }
+    request.allPendingTasks--;
+    if (request.allPendingTasks === 0) {
+      completeAll(request);
+    }
+    return;
+  } finally {
+    if (__DEV__) {
+      setCurrentTaskInDEV(prevTaskInDEV);
+    }
+  }
+}
+
+export function performWork(request: Request): void {
+  if (request.status === CLOSED || request.status === CLOSING) {
+    return;
+  }
+  const prevContext = getActiveContext();
+  const prevDispatcher = ReactSharedInternals.H;
+  ReactSharedInternals.H = HooksDispatcher;
+  const prevAsyncDispatcher = ReactSharedInternals.A;
+  ReactSharedInternals.A = DefaultAsyncDispatcher;
+
+  const prevRequest = currentRequest;
+  currentRequest = request;
+
+  let prevGetCurrentStackImpl = null;
+  if (__DEV__) {
+    prevGetCurrentStackImpl = ReactSharedInternals.getCurrentStack;
+    ReactSharedInternals.getCurrentStack = getCurrentStackInDEV;
+  }
+  const prevResumableState = currentResumableState;
+  setCurrentResumableState(request.resumableState);
+  try {
+    const pingedTasks = request.pingedTasks;
+    let i;
+    for (i = 0; i < pingedTasks.length; i++) {
+      const task = pingedTasks[i];
+      retryTask(request, task);
+    }
+    pingedTasks.splice(0, i);
+    if (request.destination !== null) {
+      flushCompletedQueues(request, request.destination);
+    }
+  } catch (error) {
+    const errorInfo: ThrownInfo = {};
+    logRecoverableError(request, error, errorInfo, null);
+    fatalError(request, error, errorInfo, null);
+  } finally {
+    setCurrentResumableState(prevResumableState);
+
+    ReactSharedInternals.H = prevDispatcher;
+    ReactSharedInternals.A = prevAsyncDispatcher;
+
+    if (__DEV__) {
+      ReactSharedInternals.getCurrentStack = prevGetCurrentStackImpl;
+    }
+    if (prevDispatcher === HooksDispatcher) {
+      // This means that we were in a reentrant work loop. This could happen
+      // in a renderer that supports synchronous work like renderToString,
+      // when it's called from within another renderer.
+      // Normally we don't bother switching the contexts to their root/default
+      // values when leaving because we'll likely need the same or similar
+      // context again. However, when we're inside a synchronous loop like this
+      // we'll to restore the context to what it was before returning.
+      switchContext(prevContext);
+    }
+    currentRequest = prevRequest;
+  }
+}
+
+function preparePreambleFromSubtree(
+  request: Request,
+  segment: Segment,
+  collectedPreambleSegments: Array<Array<Segment>>,
+): boolean {
+  if (segment.preambleChildren.length) {
+    collectedPreambleSegments.push(segment.preambleChildren);
+  }
+  let pendingPreambles = false;
+  for (let i = 0; i < segment.children.length; i++) {
+    const nextSegment = segment.children[i];
+    pendingPreambles =
+      preparePreambleFromSegment(
+        request,
+        nextSegment,
+        collectedPreambleSegments,
+      ) || pendingPreambles;
+  }
+  return pendingPreambles;
+}
+
+function preparePreambleFromSegment(
+  request: Request,
+  segment: Segment,
+  collectedPreambleSegments: Array<Array<Segment>>,
+): boolean {
+  const boundary = segment.boundary;
+  if (boundary === null) {
+    // This segment is not a boundary, let's check it's children
+    return preparePreambleFromSubtree(
+      request,
+      segment,
+      collectedPreambleSegments,
+    );
+  }
+
+  const preamble = boundary.preamble;
+  if (preamble === null) {
+    // This boundary cannot have a preamble so it can't block the flushing of
+    // the preamble.
+    return false;
+  }
+
+  const status = boundary.status;
+
+  switch (status) {
+    case COMPLETED: {
+      // This boundary is complete. It might have inner boundaries which are pending
+      // and able to provide a preamble so we have to check it's children
+      hoistPreambleState(request.renderState, preamble.content);
+      // We track this boundary's byteSize on the request since it will always flush with
+      // the request since it may contribute to the preamble
+      request.byteSize += boundary.byteSize;
+      const boundaryRootSegment = boundary.completedSegments[0];
+      if (!boundaryRootSegment) {
+        // Using the same error from flushSegment to avoid making a new one since conceptually the problem is still the same
+        throw new Error(
+          'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
+        );
+      }
+      return preparePreambleFromSubtree(
+        request,
+        boundaryRootSegment,
+        collectedPreambleSegments,
+      );
+    }
+    case POSTPONED: {
+      // This segment is postponed. When prerendering we consider this pending still because
+      // it can resume. If we're rendering then this is equivalent to errored.
+      if (request.trackedPostpones !== null) {
+        // This boundary won't contribute a preamble to the current prerender
+        return true;
+      }
+      // Expected fallthrough
+    }
+    case CLIENT_RENDERED: {
+      if (segment.status === COMPLETED) {
+        // This boundary is errored so if it contains a preamble we should include it
+        hoistPreambleState(request.renderState, preamble.fallback);
+        return preparePreambleFromSubtree(
+          request,
+          segment,
+          collectedPreambleSegments,
+        );
+      }
+      // Expected fallthrough
+    }
+    default:
+      // This boundary is still pending and might contain a preamble
+      return true;
+  }
+}
+
+function preparePreamble(request: Request) {
+  if (
+    request.completedRootSegment &&
+    request.completedPreambleSegments === null
+  ) {
+    const collectedPreambleSegments: Array<Array<Segment>> = [];
+    const originalRequestByteSize = request.byteSize;
+    const hasPendingPreambles = preparePreambleFromSegment(
+      request,
+      request.completedRootSegment,
+      collectedPreambleSegments,
+    );
+    if (isPreambleReady(request.renderState, hasPendingPreambles)) {
+      request.completedPreambleSegments = collectedPreambleSegments;
+    } else {
+      // We restore the original size since the preamble is not ready
+      // and we will prepare it again.
+      request.byteSize = originalRequestByteSize;
+    }
+  }
+}
+
+function flushPreamble(
+  request: Request,
+  destination: Destination,
+  rootSegment: Segment,
+  preambleSegments: Array<Array<Segment>>,
+  skipBlockingShell: boolean,
+) {
+  // The preamble is ready.
+  writePreambleStart(
+    destination,
+    request.resumableState,
+    request.renderState,
+    skipBlockingShell,
+  );
+  for (let i = 0; i < preambleSegments.length; i++) {
+    const segments = preambleSegments[i];
+    for (let j = 0; j < segments.length; j++) {
+      flushSegment(request, destination, segments[j], null);
+    }
+  }
+  writePreambleEnd(destination, request.renderState);
+}
+
+function flushSubtree(
+  request: Request,
+  destination: Destination,
+  segment: Segment,
+  hoistableState: null | HoistableState,
+): boolean {
+  segment.parentFlushed = true;
+  switch (segment.status) {
+    case PENDING: {
+      // We're emitting a placeholder for this segment to be filled in later.
+      // Therefore we'll need to assign it an ID - to refer to it by.
+      segment.id = request.nextSegmentId++;
+      // Fallthrough
+    }
+    case POSTPONED: {
+      const segmentID = segment.id;
+      // When this segment finally completes it won't be embedded in text since it will flush separately
+      segment.lastPushedText = false;
+      segment.textEmbedded = false;
+      return writePlaceholder(destination, request.renderState, segmentID);
+    }
+    case COMPLETED: {
+      segment.status = FLUSHED;
+      let r = true;
+      const chunks = segment.chunks;
+      let chunkIdx = 0;
+      const children = segment.children;
+
+      for (let childIdx = 0; childIdx < children.length; childIdx++) {
+        const nextChild = children[childIdx];
+        // Write all the chunks up until the next child.
+        for (; chunkIdx < nextChild.index; chunkIdx++) {
+          writeChunk(destination, chunks[chunkIdx]);
+        }
+        r = flushSegment(request, destination, nextChild, hoistableState);
+      }
+      // Finally just write all the remaining chunks
+      for (; chunkIdx < chunks.length - 1; chunkIdx++) {
+        writeChunk(destination, chunks[chunkIdx]);
+      }
+      if (chunkIdx < chunks.length) {
+        r = writeChunkAndReturn(destination, chunks[chunkIdx]);
+      }
+      return r;
+    }
+    case ABORTED: {
+      return true;
+    }
+    default: {
+      throw new Error(
+        'Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.',
+      );
+    }
+  }
+}
+
+// Running count for how much bytes of boundaries have flushed inlined into the currently
+// flushing root or completed boundary.
+let flushedByteSize = 0;
+
+function flushSegment(
+  request: Request,
+  destination: Destination,
+  segment: Segment,
+  hoistableState: null | HoistableState,
+): boolean {
+  const boundary = segment.boundary;
+  if (boundary === null) {
+    // Not a suspense boundary.
+    return flushSubtree(request, destination, segment, hoistableState);
+  }
+
+  // We're going to write the boundary. We don't need to maintain this reference since
+  // we might reflush this segment at a later time (if it aborts and we inlined) but
+  // we don't want to reflush the boundary
+  segment.boundary = null;
+  boundary.parentFlushed = true;
+  // This segment is a Suspense boundary. We need to decide whether to
+  // emit the content or the fallback now.
+  if (boundary.status === CLIENT_RENDERED) {
+    // Emit a client rendered suspense boundary wrapper.
+    // We never queue the inner boundary so we'll never emit its content or partial segments.
+
+    const row = boundary.row;
+    if (row !== null) {
+      // Since this boundary end up client rendered, we can unblock future suspense list rows.
+      // This means that they may appear out of order if the future rows succeed but this is
+      // a client rendered row.
+      if (--row.pendingTasks === 0) {
+        finishSuspenseListRow(request, row);
+      }
+    }
+
+    if (__DEV__) {
+      writeStartClientRenderedSuspenseBoundary(
+        destination,
+        request.renderState,
+        boundary.errorDigest,
+        boundary.errorMessage,
+        boundary.errorStack,
+        boundary.errorComponentStack,
+      );
+    } else {
+      writeStartClientRenderedSuspenseBoundary(
+        destination,
+        request.renderState,
+        boundary.errorDigest,
+        null,
+        null,
+        null,
+      );
+    }
+    // Flush the fallback.
+    flushSubtree(request, destination, segment, hoistableState);
+
+    return writeEndClientRenderedSuspenseBoundary(
+      destination,
+      request.renderState,
+    );
+  } else if (boundary.status !== COMPLETED) {
+    if (boundary.status === PENDING) {
+      // For pending boundaries we lazily assign an ID to the boundary
+      // and root segment.
+      boundary.rootSegmentID = request.nextSegmentId++;
+    }
+
+    if (boundary.completedSegments.length > 0) {
+      // If this is at least partially complete, we can queue it to be partially emitted early.
+      request.partialBoundaries.push(boundary);
+    }
+
+    // This boundary is still loading. Emit a pending suspense boundary wrapper.
+
+    const id = boundary.rootSegmentID;
+    writeStartPendingSuspenseBoundary(destination, request.renderState, id);
+
+    if (hoistableState) {
+      hoistHoistables(hoistableState, boundary.fallbackState);
+    }
+    // Flush the fallback.
+    flushSubtree(request, destination, segment, hoistableState);
+
+    return writeEndPendingSuspenseBoundary(destination, request.renderState);
+  } else if (
+    // We don't outline when we're emitting partially completed boundaries optimistically
+    // because it doesn't make sense to outline something if its parent is going to be
+    // blocked on something later in the stream anyway.
+    !flushingPartialBoundaries &&
+    isEligibleForOutlining(request, boundary) &&
+    (flushedByteSize + boundary.byteSize > request.progressiveChunkSize ||
+      hasSuspenseyContent(boundary.contentState) ||
+      boundary.defer)
+  ) {
+    // Inlining this boundary would make the current sequence being written too large
+    // and block the parent for too long. Instead, it will be emitted separately so that we
+    // can progressively show other content.
+    // We add it to the queue during the flush because we have to ensure that
+    // the parent flushes first so that there's something to inject it into.
+    // We also have to make sure that it's emitted into the queue in a deterministic slot.
+    // I.e. we can't insert it here when it completes.
+
+    // Assign an ID to refer to the future content by.
+    boundary.rootSegmentID = request.nextSegmentId++;
+
+    request.completedBoundaries.push(boundary);
+    // Emit a pending rendered suspense boundary wrapper.
+    writeStartPendingSuspenseBoundary(
+      destination,
+      request.renderState,
+      boundary.rootSegmentID,
+    );
+
+    // While we are going to flush the fallback we are going to follow it up with
+    // the completed boundary immediately so we make the choice to omit fallback
+    // boundary state from the parent since it will be replaced when the boundary
+    // flushes later in this pass or in a future flush
+
+    // Flush the fallback.
+    flushSubtree(request, destination, segment, hoistableState);
+
+    return writeEndPendingSuspenseBoundary(destination, request.renderState);
+  } else {
+    // We're inlining this boundary so its bytes get counted to the current running count.
+    flushedByteSize += boundary.byteSize;
+    if (hoistableState) {
+      hoistHoistables(hoistableState, boundary.contentState);
+    }
+
+    const row = boundary.row;
+    if (row !== null && isEligibleForOutlining(request, boundary)) {
+      // Once we have written the boundary, we can unblock the row and let future
+      // rows be written. This may schedule new completed boundaries.
+      if (--row.pendingTasks === 0) {
+        finishSuspenseListRow(request, row);
+      }
+    }
+
+    // We can inline this boundary's content as a complete boundary.
+    writeStartCompletedSuspenseBoundary(destination, request.renderState);
+
+    const completedSegments = boundary.completedSegments;
+
+    if (completedSegments.length !== 1) {
+      throw new Error(
+        'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
+      );
+    }
+
+    const contentSegment = completedSegments[0];
+    flushSegment(request, destination, contentSegment, hoistableState);
+
+    return writeEndCompletedSuspenseBoundary(destination, request.renderState);
+  }
+}
+
+function flushClientRenderedBoundary(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+): boolean {
+  if (__DEV__) {
+    return writeClientRenderBoundaryInstruction(
+      destination,
+      request.resumableState,
+      request.renderState,
+      boundary.rootSegmentID,
+      boundary.errorDigest,
+      boundary.errorMessage,
+      boundary.errorStack,
+      boundary.errorComponentStack,
+    );
+  } else {
+    return writeClientRenderBoundaryInstruction(
+      destination,
+      request.resumableState,
+      request.renderState,
+      boundary.rootSegmentID,
+      boundary.errorDigest,
+      null,
+      null,
+      null,
+    );
+  }
+}
+
+function flushSegmentContainer(
+  request: Request,
+  destination: Destination,
+  segment: Segment,
+  hoistableState: HoistableState,
+): boolean {
+  writeStartSegment(
+    destination,
+    request.renderState,
+    segment.parentFormatContext,
+    segment.id,
+  );
+  flushSegment(request, destination, segment, hoistableState);
+  return writeEndSegment(destination, segment.parentFormatContext);
+}
+
+function flushCompletedBoundary(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+): boolean {
+  flushedByteSize = boundary.byteSize; // Start counting bytes
+  const completedSegments = boundary.completedSegments;
+  let i = 0;
+  for (; i < completedSegments.length; i++) {
+    const segment = completedSegments[i];
+    flushPartiallyCompletedSegment(request, destination, boundary, segment);
+  }
+  completedSegments.length = 0;
+
+  const row = boundary.row;
+  if (row !== null && isEligibleForOutlining(request, boundary)) {
+    // Once we have written the boundary, we can unblock the row and let future
+    // rows be written. This may schedule new completed boundaries.
+    if (--row.pendingTasks === 0) {
+      finishSuspenseListRow(request, row);
+    }
+  }
+
+  writeHoistablesForBoundary(
+    destination,
+    boundary.contentState,
+    request.renderState,
+  );
+  return writeCompletedBoundaryInstruction(
+    destination,
+    request.resumableState,
+    request.renderState,
+    boundary.rootSegmentID,
+    boundary.contentState,
+  );
+}
+
+function flushPartialBoundary(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+): boolean {
+  flushedByteSize = boundary.byteSize; // Start counting bytes
+  const completedSegments = boundary.completedSegments;
+  let i = 0;
+  for (; i < completedSegments.length; i++) {
+    const segment = completedSegments[i];
+    if (
+      !flushPartiallyCompletedSegment(request, destination, boundary, segment)
+    ) {
+      i++;
+      completedSegments.splice(0, i);
+      // Only write as much as the buffer wants. Something higher priority
+      // might want to write later.
+      return false;
+    }
+  }
+  completedSegments.splice(0, i);
+
+  const row = boundary.row;
+  if (row !== null && row.together && boundary.pendingTasks === 1) {
+    // "together" rows are blocked on their own boundaries.
+    // We have now flushed all the boundary's segments as partials.
+    // We can now unblock it from blocking the row that will eventually
+    // unblock the boundary itself which can issue its complete instruction.
+    // TODO: Ideally the complete instruction would be in a single <script> tag.
+    if (row.pendingTasks === 1) {
+      unblockSuspenseListRow(request, row, row.hoistables);
+    } else {
+      row.pendingTasks--;
+    }
+  }
+
+  return writeHoistablesForBoundary(
+    destination,
+    boundary.contentState,
+    request.renderState,
+  );
+}
+
+function flushPartiallyCompletedSegment(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+  segment: Segment,
+): boolean {
+  if (segment.status === FLUSHED) {
+    // We've already flushed this inline
+    return true;
+  }
+
+  const hoistableState = boundary.contentState;
+
+  const segmentID = segment.id;
+  if (segmentID === -1) {
+    // This segment wasn't previously referred to. This happens at the root of
+    // a boundary. We make kind of a leap here and assume this is the root.
+    const rootSegmentID = (segment.id = boundary.rootSegmentID);
+
+    if (rootSegmentID === -1) {
+      throw new Error(
+        'A root segment ID must have been assigned by now. This is a bug in React.',
+      );
+    }
+
+    return flushSegmentContainer(request, destination, segment, hoistableState);
+  } else if (segmentID === boundary.rootSegmentID) {
+    // When we emit postponed boundaries, we might have assigned the ID already
+    // but it's still the root segment so we can't inject it into the parent yet.
+    return flushSegmentContainer(request, destination, segment, hoistableState);
+  } else {
+    flushSegmentContainer(request, destination, segment, hoistableState);
+    return writeCompletedSegmentInstruction(
+      destination,
+      request.resumableState,
+      request.renderState,
+      segmentID,
+    );
+  }
+}
+
+let flushingPartialBoundaries = false;
+
+function flushCompletedQueues(
+  request: Request,
+  destination: Destination,
+): void {
+  beginWriting(destination);
+  try {
+    // The structure of this is to go through each queue one by one and write
+    // until the sink tells us to stop. When we should stop, we still finish writing
+    // that item fully and then yield. At that point we remove the already completed
+    // items up until the point we completed them.
+
+    if (request.pendingRootTasks > 0) {
+      // When there are pending root tasks we don't want to flush anything
+      return;
+    }
+
+    let i;
+    const completedRootSegment = request.completedRootSegment;
+    if (completedRootSegment !== null) {
+      if (completedRootSegment.status === POSTPONED) {
+        return;
+      }
+
+      const completedPreambleSegments = request.completedPreambleSegments;
+      if (completedPreambleSegments === null) {
+        // The preamble isn't ready yet even though the root is so we omit flushing
+        return;
+      }
+
+      flushedByteSize = request.byteSize; // Start counting bytes
+      // TODO: Count the size of the preamble chunks too.
+      let skipBlockingShell = false;
+      if (enableFizzBlockingRender) {
+        const blockingRenderMaxSize = getBlockingRenderMaxSize(request);
+        if (flushedByteSize > blockingRenderMaxSize) {
+          skipBlockingShell = true;
+          const maxSizeKb = Math.round(blockingRenderMaxSize / 1000);
+          const error = new Error(
+            'This rendered a large document (>' +
+              maxSizeKb +
+              ' kB) without any Suspense ' +
+              'boundaries around most of it. That can delay initial paint longer than ' +
+              'necessary. To improve load performance, add a <Suspense> or <SuspenseList> ' +
+              'around the content you expect to be below the header or below the fold. ' +
+              'In the meantime, the content will deopt to paint arbitrary incomplete ' +
+              'pieces of HTML.',
+          );
+          const errorInfo: ThrownInfo = {};
+          logRecoverableError(request, error, errorInfo, null);
+        }
+      }
+      flushPreamble(
+        request,
+        destination,
+        completedRootSegment,
+        completedPreambleSegments,
+        skipBlockingShell,
+      );
+      flushSegment(request, destination, completedRootSegment, null);
+      request.completedRootSegment = null;
+      const isComplete =
+        request.allPendingTasks === 0 &&
+        request.clientRenderedBoundaries.length === 0 &&
+        request.completedBoundaries.length === 0 &&
+        (request.trackedPostpones === null ||
+          (request.trackedPostpones.rootNodes.length === 0 &&
+            request.trackedPostpones.rootSlots === null));
+      writeCompletedRoot(
+        destination,
+        request.resumableState,
+        request.renderState,
+        isComplete,
+      );
+    }
+
+    writeHoistables(destination, request.resumableState, request.renderState);
+    // We emit client rendering instructions for already emitted boundaries first.
+    // This is so that we can signal to the client to start client rendering them as
+    // soon as possible.
+    const clientRenderedBoundaries = request.clientRenderedBoundaries;
+    for (i = 0; i < clientRenderedBoundaries.length; i++) {
+      const boundary = clientRenderedBoundaries[i];
+      if (!flushClientRenderedBoundary(request, destination, boundary)) {
+        request.destination = null;
+        i++;
+        clientRenderedBoundaries.splice(0, i);
+        return;
+      }
+    }
+    clientRenderedBoundaries.splice(0, i);
+
+    // Next we emit any complete boundaries. It's better to favor boundaries
+    // that are completely done since we can actually show them, than it is to emit
+    // any individual segments from a partially complete boundary.
+    const completedBoundaries = request.completedBoundaries;
+    for (i = 0; i < completedBoundaries.length; i++) {
+      const boundary = completedBoundaries[i];
+      if (!flushCompletedBoundary(request, destination, boundary)) {
+        request.destination = null;
+        i++;
+        completedBoundaries.splice(0, i);
+        return;
+      }
+    }
+    completedBoundaries.splice(0, i);
+
+    // Allow anything written so far to flush to the underlying sink before
+    // we continue with lower priorities.
+    completeWriting(destination);
+    beginWriting(destination);
+
+    // TODO: Here we'll emit data used by hydration.
+
+    // Next we emit any segments of any boundaries that are partially complete
+    // but not deeply complete.
+    flushingPartialBoundaries = true;
+    const partialBoundaries = request.partialBoundaries;
+    for (i = 0; i < partialBoundaries.length; i++) {
+      const boundary = partialBoundaries[i];
+      if (!flushPartialBoundary(request, destination, boundary)) {
+        request.destination = null;
+        i++;
+        partialBoundaries.splice(0, i);
+        return;
+      }
+    }
+    partialBoundaries.splice(0, i);
+    flushingPartialBoundaries = false;
+
+    // Next we check the completed boundaries again. This may have had
+    // boundaries added to it in case they were too larged to be inlined.
+    // SuspenseListRows might have been unblocked as well.
+    // New ones might be added in this loop.
+    const largeBoundaries = request.completedBoundaries;
+    for (i = 0; i < largeBoundaries.length; i++) {
+      const boundary = largeBoundaries[i];
+      if (!flushCompletedBoundary(request, destination, boundary)) {
+        request.destination = null;
+        i++;
+        largeBoundaries.splice(0, i);
+        return;
+      }
+    }
+    largeBoundaries.splice(0, i);
+  } finally {
+    flushingPartialBoundaries = false;
+    if (
+      request.allPendingTasks === 0 &&
+      request.clientRenderedBoundaries.length === 0 &&
+      request.completedBoundaries.length === 0
+      // We don't need to check any partially completed segments because
+      // either they have pending task or they're complete.
+    ) {
+      request.flushScheduled = false;
+      // We write the trailing tags but only if don't have any data to resume.
+      // If we need to resume we'll write the postamble in the resume instead.
+      writePostamble(destination, request.resumableState);
+      completeWriting(destination);
+      flushBuffered(destination);
+      if (__DEV__) {
+        if (request.abortableTasks.size !== 0) {
+          console.error(
+            'There was still abortable task at the root when we closed. This is a bug in React.',
+          );
+        }
+      }
+      // We're done.
+      request.status = CLOSED;
+      close(destination);
+      // We need to stop flowing now because we do not want any async contexts which might call
+      // float methods to initiate any flushes after this point
+      stopFlowing(request);
+    } else {
+      completeWriting(destination);
+      flushBuffered(destination);
+    }
+  }
+}
+
+export function startWork(request: Request): void {
+  request.flushScheduled = request.destination !== null;
+  // When prerendering we use microtasks for pinging work
+  if (supportsRequestStorage) {
+    scheduleMicrotask(() => requestStorage.run(request, performWork, request));
+  } else {
+    scheduleMicrotask(() => performWork(request));
+  }
+  scheduleWork(() => {
+    if (request.status === OPENING) {
+      request.status = OPEN;
+    }
+
+    if (request.trackedPostpones === null) {
+      // this is either a regular render or a resume. For regular render we want
+      // to call emitEarlyPreloads after the first performWork because we want
+      // are responding to a live request and need to balance sending something early
+      // (i.e. don't want for the shell to finish) but we need something to send.
+      // The only implementation of this is for DOM at the moment and during resumes nothing
+      // actually emits but the code paths here are the same.
+      // During a prerender we don't want to be too aggressive in emitting early preloads
+      // because we aren't responding to a live request and we can wait for the prerender to
+      // postpone before we emit anything.
+      if (supportsRequestStorage) {
+        requestStorage.run(
+          request,
+          enqueueEarlyPreloadsAfterInitialWork,
+          request,
+        );
+      } else {
+        enqueueEarlyPreloadsAfterInitialWork(request);
+      }
+    }
+  });
+}
+
+function enqueueEarlyPreloadsAfterInitialWork(request: Request) {
+  const shellComplete = request.pendingRootTasks === 0;
+  safelyEmitEarlyPreloads(request, shellComplete);
+}
+
+function enqueueFlush(request: Request): void {
+  if (
+    request.flushScheduled === false &&
+    // If there are pinged tasks we are going to flush anyway after work completes
+    request.pingedTasks.length === 0 &&
+    // If there is no destination there is nothing we can flush to. A flush will
+    // happen when we start flowing again
+    request.destination !== null
+  ) {
+    request.flushScheduled = true;
+    scheduleWork(() => {
+      // We need to existence check destination again here because it might go away
+      // in between the enqueueFlush call and the work execution
+      const destination = request.destination;
+      if (destination) {
+        flushCompletedQueues(request, destination);
+      } else {
+        request.flushScheduled = false;
+      }
+    });
+  }
+}
+
+// This function is intented to only be called during the pipe function for the Node builds.
+// The reason we need this is because `renderToPipeableStream` is the only API which allows
+// you to start flowing before the shell is complete and we've had a chance to emit early
+// preloads already. This is really just defensive programming to ensure that we give hosts an
+// opportunity to flush early preloads before streaming begins in case they are in an environment
+// that only supports a single call to emitEarlyPreloads like the DOM renderers. It's unfortunate
+// to put this Node only function directly in ReactFizzServer but it'd be more ackward to factor it
+// by moving the implementation into ReactServerStreamConfigNode and even then we may not be able to
+// eliminate all the wasted branching.
+export function prepareForStartFlowingIfBeforeAllReady(request: Request) {
+  const shellComplete =
+    request.trackedPostpones === null
+      ? // Render Request, we define shell complete by the pending root tasks
+        request.pendingRootTasks === 0
+      : // Prerender Request, we define shell complete by completedRootSegemtn
+        request.completedRootSegment === null
+        ? request.pendingRootTasks === 0
+        : request.completedRootSegment.status !== POSTPONED;
+  safelyEmitEarlyPreloads(request, shellComplete);
+}
+
+export function startFlowing(request: Request, destination: Destination): void {
+  if (request.status === CLOSING) {
+    request.status = CLOSED;
+    closeWithError(destination, request.fatalError);
+    return;
+  }
+  if (request.status === CLOSED) {
+    return;
+  }
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
+  request.destination = destination;
+
+  try {
+    flushCompletedQueues(request, destination);
+  } catch (error) {
+    const errorInfo: ThrownInfo = {};
+    logRecoverableError(request, error, errorInfo, null);
+    fatalError(request, error, errorInfo, null);
+  }
+}
+
+export function stopFlowing(request: Request): void {
+  request.destination = null;
+}
+
+// This is called to early terminate a request. It puts all pending boundaries in client rendered state.
+export function abort(request: Request, reason: mixed): void {
+  if (request.status === OPEN || request.status === OPENING) {
+    request.status = ABORTING;
+  }
+
+  try {
+    const abortableTasks = request.abortableTasks;
+    if (abortableTasks.size > 0) {
+      const error =
+        reason === undefined
+          ? new Error('The render was aborted by the server without a reason.')
+          : typeof reason === 'object' &&
+              reason !== null &&
+              typeof reason.then === 'function'
+            ? new Error('The render was aborted by the server with a promise.')
+            : reason;
+      // This error isn't necessarily fatal in this case but we need to stash it
+      // so we can use it to abort any pending work
+      request.fatalError = error;
+      if (__DEV__) {
+        abortableTasks.forEach(task => abortTaskDEV(task, request, error));
+      } else {
+        abortableTasks.forEach(task => abortTask(task, request, error));
+      }
+      abortableTasks.clear();
+    }
+    if (request.destination !== null) {
+      flushCompletedQueues(request, request.destination);
+    }
+  } catch (error) {
+    const errorInfo: ThrownInfo = {};
+    logRecoverableError(request, error, errorInfo, null);
+    fatalError(request, error, errorInfo, null);
+  }
+}
+
+export function flushResources(request: Request): void {
+  enqueueFlush(request);
+}
+
+export function getFormState(
+  request: Request,
+): ReactFormState<any, any> | null {
+  return request.formState;
+}
+
+export function getResumableState(request: Request): ResumableState {
+  return request.resumableState;
+}
+
+export function getRenderState(request: Request): RenderState {
+  return request.renderState;
+}
+
+function addToReplayParent(
+  node: ReplayNode,
+  parentKeyPath: Root | KeyNode,
+  trackedPostpones: PostponedHoles,
+): void {
+  if (parentKeyPath === null) {
+    trackedPostpones.rootNodes.push(node);
+  } else {
+    const workingMap = trackedPostpones.workingMap;
+    let parentNode = workingMap.get(parentKeyPath);
+    if (parentNode === undefined) {
+      parentNode = ([
+        parentKeyPath[1],
+        parentKeyPath[2],
+        ([]: Array<ReplayNode>),
+        null,
+      ]: ReplayNode);
+      workingMap.set(parentKeyPath, parentNode);
+      addToReplayParent(parentNode, parentKeyPath[0], trackedPostpones);
+    }
+    parentNode[2].push(node);
+  }
+}
+
+export type PostponedState = {
+  nextSegmentId: number,
+  rootFormatContext: FormatContext,
+  progressiveChunkSize: number,
+  resumableState: ResumableState,
+  replayNodes: Array<ReplayNode>,
+  replaySlots: ResumeSlots,
+};
+
+// Returns the state of a postponed request or null if nothing was postponed.
+export function getPostponedState(request: Request): null | PostponedState {
+  const trackedPostpones = request.trackedPostpones;
+  if (
+    trackedPostpones === null ||
+    (trackedPostpones.rootNodes.length === 0 &&
+      trackedPostpones.rootSlots === null)
+  ) {
+    // Reset. Let the flushing behave as if we completed the whole document.
+    request.trackedPostpones = null;
+    return null;
+  }
+  let replaySlots: ResumeSlots;
+  let nextSegmentId: number;
+  if (
+    request.completedRootSegment !== null &&
+    // The Root postponed
+    (request.completedRootSegment.status === POSTPONED ||
+      // Or the Preamble was not available
+      request.completedPreambleSegments === null)
+  ) {
+    nextSegmentId = 0;
+    // We need to ensure that on resume we retry the root. We use a number
+    // type for the replaySlots to signify this (see resumeRequest).
+    // The value -1 represents an unassigned ID but is not functionally meaningful
+    // for resuming at the root.
+    replaySlots = -1;
+    // We either postponed the root or we did not have a preamble to flush
+    resetResumableState(request.resumableState, request.renderState);
+  } else {
+    nextSegmentId = request.nextSegmentId;
+    replaySlots = trackedPostpones.rootSlots;
+    completeResumableState(request.resumableState);
+  }
+  return {
+    nextSegmentId,
+    rootFormatContext: request.rootFormatContext,
+    progressiveChunkSize: request.progressiveChunkSize,
+    resumableState: request.resumableState,
+    replayNodes: trackedPostpones.rootNodes,
+    replaySlots,
+  };
+}
diff --git a/packages/react-server/src/ReactFizzThenable.js b/packages/react-server/src/ReactFizzThenable.js
new file mode 100644
index 00000000000..6849f16e397
--- /dev/null
+++ b/packages/react-server/src/ReactFizzThenable.js
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Corresponds to ReactFiberThenable and ReactFlightThenable modules. Generally,
+// changes to one module should be reflected in the others.
+
+import type {
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+import type {ComponentStackNode} from './ReactFizzComponentStack';
+
+import noop from 'shared/noop';
+import {currentTaskInDEV} from './ReactFizzCurrentTask';
+
+export opaque type ThenableState = Array<Thenable<any>>;
+
+// An error that is thrown (e.g. by `use`) to trigger Suspense. If we
+// detect this is caught by userspace, we'll log a warning in development.
+export const SuspenseException: mixed = new Error(
+  "Suspense Exception: This is not a real error! It's an implementation " +
+    'detail of `use` to interrupt the current render. You must either ' +
+    'rethrow it immediately, or move the `use` call outside of the ' +
+    '`try/catch` block. Capturing without rethrowing will lead to ' +
+    'unexpected behavior.\n\n' +
+    'To handle async errors, wrap your component in an error boundary, or ' +
+    "call the promise's `.catch` method and pass the result to `use`.",
+);
+
+export function createThenableState(): ThenableState {
+  // The ThenableState is created the first time a component suspends. If it
+  // suspends again, we'll reuse the same state.
+  return [];
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+): T {
+  const previous = thenableState[index];
+  if (previous === undefined) {
+    thenableState.push(thenable);
+  } else {
+    if (previous !== thenable) {
+      // Reuse the previous thenable, and drop the new one. We can assume
+      // they represent the same value, because components are idempotent.
+
+      // Avoid an unhandled rejection errors for the Promises that we'll
+      // intentionally ignore.
+      thenable.then(noop, noop);
+      thenable = previous;
+    }
+  }
+
+  // We use an expando to track the status and result of a thenable so that we
+  // can synchronously unwrap the value. Think of this as an extension of the
+  // Promise API, or a custom interface that is a superset of Thenable.
+  //
+  // If the thenable doesn't have a status, set it to "pending" and attach
+  // a listener that will update its status and result when it resolves.
+  switch (thenable.status) {
+    case 'fulfilled': {
+      const fulfilledValue: T = thenable.value;
+      return fulfilledValue;
+    }
+    case 'rejected': {
+      const rejectedError = thenable.reason;
+      throw rejectedError;
+    }
+    default: {
+      if (typeof thenable.status === 'string') {
+        // Only instrument the thenable if the status if not defined. If
+        // it's defined, but an unknown value, assume it's been instrumented by
+        // some custom userspace implementation. We treat it as "pending".
+        // Attach a dummy listener, to ensure that any lazy initialization can
+        // happen. Flight lazily parses JSON when the value is actually awaited.
+        thenable.then(noop, noop);
+      } else {
+        const pendingThenable: PendingThenable<T> = (thenable: any);
+        pendingThenable.status = 'pending';
+        pendingThenable.then(
+          fulfilledValue => {
+            if (thenable.status === 'pending') {
+              const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = fulfilledValue;
+            }
+          },
+          (error: mixed) => {
+            if (thenable.status === 'pending') {
+              const rejectedThenable: RejectedThenable<T> = (thenable: any);
+              rejectedThenable.status = 'rejected';
+              rejectedThenable.reason = error;
+            }
+          },
+        );
+      }
+
+      // Check one more time in case the thenable resolved synchronously
+      switch ((thenable: Thenable<T>).status) {
+        case 'fulfilled': {
+          const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+          return fulfilledThenable.value;
+        }
+        case 'rejected': {
+          const rejectedThenable: RejectedThenable<T> = (thenable: any);
+          throw rejectedThenable.reason;
+        }
+      }
+
+      // Suspend.
+      //
+      // Throwing here is an implementation detail that allows us to unwind the
+      // call stack. But we shouldn't allow it to leak into userspace. Throw an
+      // opaque placeholder value instead of the actual thenable. If it doesn't
+      // get captured by the work loop, log a warning, because that means
+      // something in userspace must have caught it.
+      suspendedThenable = thenable;
+      if (__DEV__ && shouldCaptureSuspendedCallSite) {
+        captureSuspendedCallSite();
+      }
+      throw SuspenseException;
+    }
+  }
+}
+
+export function readPreviousThenable<T>(
+  thenableState: ThenableState,
+  index: number,
+): void | T {
+  const previous = thenableState[index];
+  if (previous === undefined) {
+    return undefined;
+  } else {
+    // We assume this has been resolved already.
+    return (previous: any).value;
+  }
+}
+
+// This is used to track the actual thenable that suspended so it can be
+// passed to the rest of the Suspense implementation — which, for historical
+// reasons, expects to receive a thenable.
+let suspendedThenable: Thenable<any> | null = null;
+export function getSuspendedThenable(): Thenable<mixed> {
+  // This is called right after `use` suspends by throwing an exception. `use`
+  // throws an opaque value instead of the thenable itself so that it can't be
+  // caught in userspace. Then the work loop accesses the actual thenable using
+  // this function.
+  if (suspendedThenable === null) {
+    throw new Error(
+      'Expected a suspended thenable. This is a bug in React. Please file ' +
+        'an issue.',
+    );
+  }
+  const thenable = suspendedThenable;
+  suspendedThenable = null;
+  return thenable;
+}
+
+let shouldCaptureSuspendedCallSite: boolean = false;
+export function setCaptureSuspendedCallSiteDEV(capture: boolean): void {
+  if (!__DEV__) {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'setCaptureSuspendedCallSiteDEV was called in a production environment. ' +
+        'This is a bug in React.',
+    );
+  }
+  shouldCaptureSuspendedCallSite = capture;
+}
+
+// DEV-only
+let suspendedCallSiteStack: ComponentStackNode | null = null;
+let suspendedCallSiteDebugTask: ConsoleTask | null = null;
+function captureSuspendedCallSite(): void {
+  // This is currently only used when aborting in Fizz.
+  // You can only abort the render in Fizz and Flight.
+  // In Fiber we only track suspended use via DevTools.
+  // In Flight, we track suspended use via async debug info.
+  const currentTask = currentTaskInDEV;
+  if (currentTask === null) {
+    // eslint-disable-next-line react-internal/prod-error-codes -- not a prod error
+    throw new Error(
+      'Expected to have a current task when tracking a suspend call site. ' +
+        'This is a bug in React.',
+    );
+  }
+  const currentComponentStack = currentTask.componentStack;
+  if (currentComponentStack === null) {
+    // eslint-disable-next-line react-internal/prod-error-codes -- not a prod error
+    throw new Error(
+      'Expected to have a component stack on the current task when ' +
+        'tracking a suspended call site. This is a bug in React.',
+    );
+  }
+  suspendedCallSiteStack = {
+    parent: currentComponentStack.parent,
+    type: currentComponentStack.type,
+    owner: currentComponentStack.owner,
+    stack: Error('react-stack-top-frame'),
+  };
+  // TODO: If this is used in error handlers, the ConsoleTask stack
+  // will just be this debugTask + the stack of the abort() call which usually means
+  // it's just this debugTask.
+  // Ideally we'd be able to reconstruct the owner ConsoleTask as well.
+  // The stack of the debugTask would not point to the suspend location anyway.
+  // The focus is really on callsite which should be used in captureOwnerStack().
+  suspendedCallSiteDebugTask = currentTask.debugTask;
+}
+export function getSuspendedCallSiteStackDEV(): ComponentStackNode | null {
+  if (__DEV__) {
+    if (suspendedCallSiteStack === null) {
+      return null;
+    }
+    const callSite = suspendedCallSiteStack;
+    suspendedCallSiteStack = null;
+    return callSite;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'getSuspendedCallSiteDEV was called in a production environment. ' +
+        'This is a bug in React.',
+    );
+  }
+}
+
+export function getSuspendedCallSiteDebugTaskDEV(): ConsoleTask | null {
+  if (__DEV__) {
+    if (suspendedCallSiteDebugTask === null) {
+      return null;
+    }
+    const debugTask = suspendedCallSiteDebugTask;
+    suspendedCallSiteDebugTask = null;
+    return debugTask;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'getSuspendedCallSiteDebugTaskDEV was called in a production environment. ' +
+        'This is a bug in React.',
+    );
+  }
+}
+
+export function ensureSuspendableThenableStateDEV(
+  thenableState: ThenableState,
+): () => void {
+  if (__DEV__) {
+    const lastThenable = thenableState[thenableState.length - 1];
+    // Reset the last thenable back to pending.
+    switch (lastThenable.status) {
+      case 'fulfilled':
+        const previousThenableValue = lastThenable.value;
+        // $FlowIgnore[method-unbinding] We rebind .then immediately.
+        const previousThenableThen = lastThenable.then.bind(lastThenable);
+        delete lastThenable.value;
+        delete (lastThenable: any).status;
+        // We'll call .then again if we resuspend. Since we potentially corrupted
+        // the internal state of unknown classes, we need to diffuse the potential
+        // crash by replacing the .then method with a noop.
+        // $FlowFixMe[cannot-write] Custom userspace Thenables may not be but native Promises are.
+        lastThenable.then = noop;
+        return () => {
+          // $FlowFixMe[cannot-write] Custom userspace Thenables may not be but native Promises are.
+          lastThenable.then = previousThenableThen;
+          lastThenable.value = previousThenableValue;
+          lastThenable.status = 'fulfilled';
+        };
+      case 'rejected':
+        const previousThenableReason = lastThenable.reason;
+        delete lastThenable.reason;
+        delete (lastThenable: any).status;
+        return () => {
+          lastThenable.reason = previousThenableReason;
+          lastThenable.status = 'rejected';
+        };
+    }
+    return noop;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'ensureSuspendableThenableStateDEV was called in a production environment. ' +
+        'This is a bug in React.',
+    );
+  }
+}
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
new file mode 100644
index 00000000000..d78434cde88
--- /dev/null
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Ids are base 32 strings whose binary representation corresponds to the
+// position of a node in a tree.
+
+// Every time the tree forks into multiple children, we add additional bits to
+// the left of the sequence that represent the position of the child within the
+// current level of children.
+//
+//      00101       00010001011010101
+//      ╰─┬─╯       ╰───────┬───────╯
+//   Fork 5 of 20       Parent id
+//
+// The leading 0s are important. In the above example, you only need 3 bits to
+// represent slot 5. However, you need 5 bits to represent all the forks at
+// the current level, so we must account for the empty bits at the end.
+//
+// For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
+// the zeroth id at a level would be indistinguishable from its parent.
+//
+// If a node has only one child, and does not materialize an id (i.e. does not
+// contain a useId hook), then we don't need to allocate any space in the
+// sequence. It's treated as a transparent indirection. For example, these two
+// trees produce the same ids:
+//
+// <>                          <>
+//   <Indirection>               <A />
+//     <A />                     <B />
+//   </Indirection>            </>
+//   <B />
+// </>
+//
+// However, we cannot skip any node that materializes an id. Otherwise, a parent
+// id that does not fork would be indistinguishable from its child id. For
+// example, this tree does not fork, but the parent and child must have
+// different ids.
+//
+// <Parent>
+//   <Child />
+// </Parent>
+//
+// To handle this scenario, every time we materialize an id, we allocate a
+// new level with a single slot. You can think of this as a fork with only one
+// prong, or an array of children with length 1.
+//
+// It's possible for the size of the sequence to exceed 32 bits, the max
+// size for bitwise operations. When this happens, we make more room by
+// converting the right part of the id to a string and storing it in an overflow
+// variable. We use a base 32 string representation, because 32 is the largest
+// power of 2 that is supported by toString(). We want the base to be large so
+// that the resulting ids are compact, and we want the base to be a power of 2
+// because every log2(base) bits corresponds to a single character, i.e. every
+// log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
+// affecting the final result.
+
+export type TreeContext = {
+  +id: number,
+  +overflow: string,
+};
+
+export const emptyTreeContext = {
+  id: 1,
+  overflow: '',
+};
+
+export function getTreeId(context: TreeContext): string {
+  const overflow = context.overflow;
+  const idWithLeadingBit = context.id;
+  const id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
+  return id.toString(32) + overflow;
+}
+
+export function pushTreeContext(
+  baseContext: TreeContext,
+  totalChildren: number,
+  index: number,
+): TreeContext {
+  const baseIdWithLeadingBit = baseContext.id;
+  const baseOverflow = baseContext.overflow;
+
+  // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
+  // of the id; we use it to account for leading 0s.
+  const baseLength = getBitLength(baseIdWithLeadingBit) - 1;
+  const baseId = baseIdWithLeadingBit & ~(1 << baseLength);
+
+  const slot = index + 1;
+  const length = getBitLength(totalChildren) + baseLength;
+
+  // 30 is the max length we can store without overflowing, taking into
+  // consideration the leading 1 we use to mark the end of the sequence.
+  if (length > 30) {
+    // We overflowed the bitwise-safe range. Fall back to slower algorithm.
+    // This branch assumes the length of the base id is greater than 5; it won't
+    // work for smaller ids, because you need 5 bits per character.
+    //
+    // We encode the id in multiple steps: first the base id, then the
+    // remaining digits.
+    //
+    // Each 5 bit sequence corresponds to a single base 32 character. So for
+    // example, if the current id is 23 bits long, we can convert 20 of those
+    // bits into a string of 4 characters, with 3 bits left over.
+    //
+    // First calculate how many bits in the base id represent a complete
+    // sequence of characters.
+    const numberOfOverflowBits = baseLength - (baseLength % 5);
+
+    // Then create a bitmask that selects only those bits.
+    const newOverflowBits = (1 << numberOfOverflowBits) - 1;
+
+    // Select the bits, and convert them to a base 32 string.
+    const newOverflow = (baseId & newOverflowBits).toString(32);
+
+    // Now we can remove those bits from the base id.
+    const restOfBaseId = baseId >> numberOfOverflowBits;
+    const restOfBaseLength = baseLength - numberOfOverflowBits;
+
+    // Finally, encode the rest of the bits using the normal algorithm. Because
+    // we made more room, this time it won't overflow.
+    const restOfLength = getBitLength(totalChildren) + restOfBaseLength;
+    const restOfNewBits = slot << restOfBaseLength;
+    const id = restOfNewBits | restOfBaseId;
+    const overflow = newOverflow + baseOverflow;
+    return {
+      id: (1 << restOfLength) | id,
+      overflow,
+    };
+  } else {
+    // Normal path
+    const newBits = slot << baseLength;
+    const id = newBits | baseId;
+    const overflow = baseOverflow;
+    return {
+      id: (1 << length) | id,
+      overflow,
+    };
+  }
+}
+
+function getBitLength(number: number): number {
+  return 32 - clz32(number);
+}
+
+function getLeadingBit(id: number) {
+  return 1 << (getBitLength(id) - 1);
+}
+
+// TODO: Math.clz32 is supported in Node 12+. Maybe we can drop the fallback.
+const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
+
+// Count leading zeros.
+// Based on:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
+const log = Math.log;
+const LN2 = Math.LN2;
+function clz32Fallback(x: number): number {
+  const asUint = x >>> 0;
+  if (asUint === 0) {
+    return 32;
+  }
+  return (31 - ((log(asUint) / LN2) | 0)) | 0;
+}
diff --git a/packages/react-server/src/ReactFizzViewTransitionComponent.js b/packages/react-server/src/ReactFizzViewTransitionComponent.js
new file mode 100644
index 00000000000..d2e6c0e120f
--- /dev/null
+++ b/packages/react-server/src/ReactFizzViewTransitionComponent.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ViewTransitionProps, ViewTransitionClass} from 'shared/ReactTypes';
+import type {TreeContext} from './ReactFizzTreeContext';
+import type {ResumableState} from './ReactFizzConfig';
+
+import {getTreeId} from './ReactFizzTreeContext';
+import {makeId} from './ReactFizzConfig';
+
+export function getViewTransitionName(
+  props: ViewTransitionProps,
+  treeContext: TreeContext,
+  resumableState: ResumableState,
+): string {
+  if (props.name != null && props.name !== 'auto') {
+    return props.name;
+  }
+  const treeId = getTreeId(treeContext);
+  return makeId(resumableState, treeId, 0);
+}
+
+function getClassNameByType(classByType: ?ViewTransitionClass): ?string {
+  if (classByType == null || typeof classByType === 'string') {
+    return classByType;
+  }
+  let className: ?string = null;
+  const activeTypes = null; // TODO: Support passing active types.
+  if (activeTypes !== null) {
+    for (let i = 0; i < activeTypes.length; i++) {
+      const match = classByType[activeTypes[i]];
+      if (match != null) {
+        if (match === 'none') {
+          // If anything matches "none" that takes precedence over any other
+          // type that also matches.
+          return 'none';
+        }
+        if (className == null) {
+          className = match;
+        } else {
+          className += ' ' + match;
+        }
+      }
+    }
+  }
+  if (className == null) {
+    // We had no other matches. Match the default for this configuration.
+    return classByType.default;
+  }
+  return className;
+}
+
+export function getViewTransitionClassName(
+  defaultClass: ?ViewTransitionClass,
+  eventClass: ?ViewTransitionClass,
+): ?string {
+  const className: ?string = getClassNameByType(defaultClass);
+  const eventClassName: ?string = getClassNameByType(eventClass);
+  if (eventClassName == null) {
+    return className === 'auto' ? null : className;
+  }
+  if (eventClassName === 'auto') {
+    return null;
+  }
+  return eventClassName;
+}
diff --git a/packages/react-server/src/ReactFlightActionServer.js b/packages/react-server/src/ReactFlightActionServer.js
new file mode 100644
index 00000000000..9062a6c03da
--- /dev/null
+++ b/packages/react-server/src/ReactFlightActionServer.js
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable, ReactFormState} from 'shared/ReactTypes';
+
+import type {
+  ServerManifest,
+  ClientReference as ServerReference,
+} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  resolveServerReference,
+  preloadModule,
+  requireModule,
+} from 'react-client/src/ReactFlightClientConfig';
+
+import {createResponse, close, getRoot} from './ReactFlightReplyServer';
+
+type ServerReferenceId = any;
+
+function bindArgs(fn: any, args: any) {
+  return fn.bind.apply(fn, [null].concat(args));
+}
+
+function loadServerReference<T>(
+  bundlerConfig: ServerManifest,
+  id: ServerReferenceId,
+  bound: null | Thenable<Array<any>>,
+): Promise<T> {
+  const serverReference: ServerReference<T> =
+    resolveServerReference<$FlowFixMe>(bundlerConfig, id);
+  // We expect most servers to not really need this because you'd just have all
+  // the relevant modules already loaded but it allows for lazy loading of code
+  // if needed.
+  const preloadPromise = preloadModule(serverReference);
+  if (bound) {
+    return Promise.all([(bound: any), preloadPromise]).then(
+      ([args]: Array<any>) => bindArgs(requireModule(serverReference), args),
+    );
+  } else if (preloadPromise) {
+    return Promise.resolve(preloadPromise).then(() =>
+      requireModule(serverReference),
+    );
+  } else {
+    // Synchronously available
+    return Promise.resolve(requireModule(serverReference));
+  }
+}
+
+function decodeBoundActionMetaData(
+  body: FormData,
+  serverManifest: ServerManifest,
+  formFieldPrefix: string,
+): {id: ServerReferenceId, bound: null | Promise<Array<any>>} {
+  // The data for this reference is encoded in multiple fields under this prefix.
+  const actionResponse = createResponse(
+    serverManifest,
+    formFieldPrefix,
+    undefined,
+    body,
+  );
+  close(actionResponse);
+  const refPromise = getRoot<{
+    id: ServerReferenceId,
+    bound: null | Promise<Array<any>>,
+  }>(actionResponse);
+  // Force it to initialize
+  // $FlowFixMe
+  refPromise.then(() => {});
+  if (refPromise.status !== 'fulfilled') {
+    // $FlowFixMe
+    throw refPromise.reason;
+  }
+  return refPromise.value;
+}
+
+export function decodeAction<T>(
+  body: FormData,
+  serverManifest: ServerManifest,
+): Promise<() => T> | null {
+  // We're going to create a new formData object that holds all the fields except
+  // the implementation details of the action data.
+  const formData = new FormData();
+
+  let action: Promise<(formData: FormData) => T> | null = null;
+
+  // $FlowFixMe[prop-missing]
+  body.forEach((value: string | File, key: string) => {
+    if (!key.startsWith('$ACTION_')) {
+      // $FlowFixMe[incompatible-call]
+      formData.append(key, value);
+      return;
+    }
+    // Later actions may override earlier actions if a button is used to override the default
+    // form action.
+    if (key.startsWith('$ACTION_REF_')) {
+      const formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+      const metaData = decodeBoundActionMetaData(
+        body,
+        serverManifest,
+        formFieldPrefix,
+      );
+      action = loadServerReference(serverManifest, metaData.id, metaData.bound);
+      return;
+    }
+    if (key.startsWith('$ACTION_ID_')) {
+      const id = key.slice(11);
+      action = loadServerReference(serverManifest, id, null);
+      return;
+    }
+  });
+
+  if (action === null) {
+    return null;
+  }
+  // Return the action with the remaining FormData bound to the first argument.
+  return action.then(fn => fn.bind(null, formData));
+}
+
+export function decodeFormState<S>(
+  actionResult: S,
+  body: FormData,
+  serverManifest: ServerManifest,
+): Promise<ReactFormState<S, ServerReferenceId> | null> {
+  const keyPath = body.get('$ACTION_KEY');
+  if (typeof keyPath !== 'string') {
+    // This form submission did not include any form state.
+    return Promise.resolve(null);
+  }
+  // Search through the form data object to get the reference id and the number
+  // of bound arguments. This repeats some of the work done in decodeAction.
+  let metaData = null;
+  // $FlowFixMe[prop-missing]
+  body.forEach((value: string | File, key: string) => {
+    if (key.startsWith('$ACTION_REF_')) {
+      const formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+      metaData = decodeBoundActionMetaData(
+        body,
+        serverManifest,
+        formFieldPrefix,
+      );
+    }
+    // We don't check for the simple $ACTION_ID_ case because form state actions
+    // are always bound to the state argument.
+  });
+  if (metaData === null) {
+    // Should be unreachable.
+    return Promise.resolve(null);
+  }
+  const referenceId = metaData.id;
+  return Promise.resolve(metaData.bound).then(bound => {
+    if (bound === null) {
+      // Should be unreachable because form state actions are always bound to the
+      // state argument.
+      return null;
+    }
+    // The form action dispatch method is always bound to the initial state.
+    // But when comparing signatures, we compare to the original unbound action.
+    // Subtract one from the arity to account for this.
+    const boundArity = bound.length - 1;
+    return [actionResult, keyPath, referenceId, boundArity];
+  });
+}
diff --git a/packages/react-server/src/ReactFlightAsyncSequence.js b/packages/react-server/src/ReactFlightAsyncSequence.js
new file mode 100644
index 00000000000..380e6d9dbaf
--- /dev/null
+++ b/packages/react-server/src/ReactFlightAsyncSequence.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactDebugInfo,
+  ReactComponentInfo,
+  ReactStackTrace,
+} from 'shared/ReactTypes';
+
+export const IO_NODE = 0;
+export const PROMISE_NODE = 1;
+export const AWAIT_NODE = 2;
+export const UNRESOLVED_PROMISE_NODE = 3;
+export const UNRESOLVED_AWAIT_NODE = 4;
+
+type PromiseWithDebugInfo = interface extends Promise<any> {
+  _debugInfo?: ReactDebugInfo,
+};
+
+export type IONode = {
+  tag: 0,
+  owner: null | ReactComponentInfo,
+  stack: null | ReactStackTrace, // callsite that spawned the I/O
+  start: number, // start time when the first part of the I/O sequence started
+  end: number, // we typically don't use this. only when there's no promise intermediate.
+  promise: null, // not used on I/O
+  awaited: null, // I/O is only blocked on external.
+  previous: null | AwaitNode | UnresolvedAwaitNode, // the preceeding await that spawned this new work
+};
+
+export type PromiseNode = {
+  tag: 1,
+  owner: null | ReactComponentInfo,
+  stack: null | ReactStackTrace, // callsite that created the Promise
+  start: number, // start time when the Promise was created
+  end: number, // end time when the Promise was resolved.
+  promise: WeakRef<PromiseWithDebugInfo>, // a reference to this Promise if still referenced
+  awaited: null | AsyncSequence, // the thing that ended up resolving this promise
+  previous: null | AsyncSequence, // represents what the last return of an async function depended on before returning
+};
+
+export type AwaitNode = {
+  tag: 2,
+  owner: null | ReactComponentInfo,
+  stack: null | ReactStackTrace, // callsite that awaited (using await, .then(), Promise.all(), ...)
+  start: number, // when we started blocking. This might be later than the I/O started.
+  end: number, // when we unblocked. This might be later than the I/O resolved if there's CPU time.
+  promise: WeakRef<PromiseWithDebugInfo>, // a reference to this Promise if still referenced
+  awaited: null | AsyncSequence, // the promise we were waiting on
+  previous: null | AsyncSequence, // the sequence that was blocking us from awaiting in the first place
+};
+
+export type UnresolvedPromiseNode = {
+  tag: 3,
+  owner: null | ReactComponentInfo,
+  stack: null | ReactStackTrace, // callsite that created the Promise
+  start: number, // start time when the Promise was created
+  end: -1.1, // set when we resolve.
+  promise: WeakRef<PromiseWithDebugInfo>, // a reference to this Promise if still referenced
+  awaited: null | AsyncSequence, // the thing that ended up resolving this promise
+  previous: null, // where we created the promise is not interesting since creating it doesn't mean waiting.
+};
+
+export type UnresolvedAwaitNode = {
+  tag: 4,
+  owner: null | ReactComponentInfo,
+  stack: null | ReactStackTrace, // callsite that awaited (using await, .then(), Promise.all(), ...)
+  start: number, // when we started blocking. This might be later than the I/O started.
+  end: -1.1, // set when we resolve.
+  promise: WeakRef<PromiseWithDebugInfo>, // a reference to this Promise if still referenced
+  awaited: null | AsyncSequence, // the promise we were waiting on
+  previous: null | AsyncSequence, // the sequence that was blocking us from awaiting in the first place
+};
+
+export type AsyncSequence =
+  | IONode
+  | PromiseNode
+  | AwaitNode
+  | UnresolvedPromiseNode
+  | UnresolvedAwaitNode;
diff --git a/packages/react-server/src/ReactFlightCallUserSpace.js b/packages/react-server/src/ReactFlightCallUserSpace.js
new file mode 100644
index 00000000000..becd0e1d71a
--- /dev/null
+++ b/packages/react-server/src/ReactFlightCallUserSpace.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {LazyComponent} from 'react/src/ReactLazy';
+
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+import type {ReactClientValue} from './ReactFlightServer';
+
+import {setCurrentOwner} from './flight/ReactFlightCurrentOwner';
+
+// These indirections exists so we can exclude its stack frame in DEV (and anything below it).
+// TODO: Consider marking the whole bundle instead of these boundaries.
+
+const callComponent = {
+  react_stack_bottom_frame: function <Props, R>(
+    Component: (p: Props, arg: void) => R,
+    props: Props,
+    componentDebugInfo: ReactComponentInfo,
+  ): R {
+    // The secondArg is always undefined in Server Components since refs error early.
+    const secondArg = undefined;
+    setCurrentOwner(componentDebugInfo);
+    try {
+      return Component(props, secondArg);
+    } finally {
+      setCurrentOwner(null);
+    }
+  },
+};
+
+export const callComponentInDEV: <Props, R>(
+  Component: (p: Props, arg: void) => R,
+  props: Props,
+  componentDebugInfo: ReactComponentInfo,
+) => R = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callComponent.react_stack_bottom_frame.bind(callComponent): any)
+  : (null: any);
+
+const callLazyInit = {
+  react_stack_bottom_frame: function (lazy: LazyComponent<any, any>): any {
+    const payload = lazy._payload;
+    const init = lazy._init;
+    return init(payload);
+  },
+};
+
+export const callLazyInitInDEV: (lazy: LazyComponent<any, any>) => any = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callLazyInit.react_stack_bottom_frame.bind(callLazyInit): any)
+  : (null: any);
+
+const callIterator = {
+  react_stack_bottom_frame: function (
+    iterator: $AsyncIterator<ReactClientValue, ReactClientValue, void>,
+    progress: (
+      entry:
+        | {done: false, +value: ReactClientValue, ...}
+        | {done: true, +value: ReactClientValue, ...},
+    ) => void,
+    error: (reason: mixed) => void,
+  ): void {
+    iterator.next().then(progress, error);
+  },
+};
+
+export const callIteratorInDEV: (
+  iterator: $AsyncIterator<ReactClientValue, ReactClientValue, void>,
+  progress: (
+    entry:
+      | {done: false, +value: ReactClientValue, ...}
+      | {done: true, +value: ReactClientValue, ...},
+  ) => void,
+  error: (reason: mixed) => void,
+) => void = __DEV__
+  ? // We use this technique to trick minifiers to preserve the function name.
+    (callIterator.react_stack_bottom_frame.bind(callIterator): any)
+  : (null: any);
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
new file mode 100644
index 00000000000..d814de46298
--- /dev/null
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {Request} from './ReactFlightServer';
+import type {Thenable, Usable, ReactComponentInfo} from 'shared/ReactTypes';
+import type {ThenableState} from './ReactFlightThenable';
+import {
+  REACT_MEMO_CACHE_SENTINEL,
+  REACT_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
+import {createThenableState, trackUsedThenable} from './ReactFlightThenable';
+import {isClientReference} from './ReactFlightServerConfig';
+
+let currentRequest = null;
+let thenableIndexCounter = 0;
+let thenableState = null;
+let currentComponentDebugInfo = null;
+
+export function prepareToUseHooksForRequest(request: Request) {
+  currentRequest = request;
+}
+
+export function resetHooksForRequest() {
+  currentRequest = null;
+}
+
+export function prepareToUseHooksForComponent(
+  prevThenableState: ThenableState | null,
+  componentDebugInfo: null | ReactComponentInfo,
+) {
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
+  if (__DEV__) {
+    currentComponentDebugInfo = componentDebugInfo;
+  }
+}
+
+export function getThenableStateAfterSuspending(): ThenableState {
+  // If you use() to Suspend this should always exist but if you throw a Promise instead,
+  // which is not really supported anymore, it will be empty. We use the empty set as a
+  // marker to know if this was a replay of the same component or first attempt.
+  const state = thenableState || createThenableState();
+  if (__DEV__) {
+    // This is a hack but we stash the debug info here so that we don't need a completely
+    // different data structure just for this in DEV. Not too happy about it.
+    (state: any)._componentDebugInfo = currentComponentDebugInfo;
+    currentComponentDebugInfo = null;
+  }
+  thenableState = null;
+  return state;
+}
+
+export function getTrackedThenablesAfterRendering(): null | Array<
+  Thenable<any>,
+> {
+  return thenableState;
+}
+
+export const HooksDispatcher: Dispatcher = {
+  readContext: (unsupportedContext: any),
+
+  use,
+  useCallback<T>(callback: T): T {
+    return callback;
+  },
+  useContext: (unsupportedContext: any),
+  useEffect: (unsupportedHook: any),
+  useImperativeHandle: (unsupportedHook: any),
+  useLayoutEffect: (unsupportedHook: any),
+  useInsertionEffect: (unsupportedHook: any),
+  useMemo<T>(nextCreate: () => T): T {
+    return nextCreate();
+  },
+  useReducer: (unsupportedHook: any),
+  useRef: (unsupportedHook: any),
+  useState: (unsupportedHook: any),
+  useDebugValue(): void {},
+  useDeferredValue: (unsupportedHook: any),
+  useTransition: (unsupportedHook: any),
+  useSyncExternalStore: (unsupportedHook: any),
+  useId,
+  useHostTransitionStatus: (unsupportedHook: any),
+  useFormState: (unsupportedHook: any),
+  useActionState: (unsupportedHook: any),
+  useOptimistic: (unsupportedHook: any),
+  useMemoCache(size: number): Array<any> {
+    const data = new Array<any>(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_MEMO_CACHE_SENTINEL;
+    }
+    return data;
+  },
+  useCacheRefresh(): <T>(?() => T, ?T) => void {
+    return unsupportedRefresh;
+  },
+  useEffectEvent: (unsupportedHook: any),
+};
+
+function unsupportedHook(): void {
+  throw new Error('This Hook is not supported in Server Components.');
+}
+
+function unsupportedRefresh(): void {
+  throw new Error(
+    'Refreshing the cache is not supported in Server Components.',
+  );
+}
+
+function unsupportedContext(): void {
+  throw new Error('Cannot read a Client Context from a Server Component.');
+}
+
+function useId(): string {
+  if (currentRequest === null) {
+    throw new Error('useId can only be used while React is rendering');
+  }
+  const id = currentRequest.identifierCount++;
+  // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client
+  return '_' + currentRequest.identifierPrefix + 'S_' + id.toString(32) + '_';
+}
+
+function use<T>(usable: Usable<T>): T {
+  if (
+    (usable !== null && typeof usable === 'object') ||
+    typeof usable === 'function'
+  ) {
+    // $FlowFixMe[method-unbinding]
+    if (typeof usable.then === 'function') {
+      // This is a thenable.
+      const thenable: Thenable<T> = (usable: any);
+
+      // Track the position of the thenable within this fiber.
+      const index = thenableIndexCounter;
+      thenableIndexCounter += 1;
+
+      if (thenableState === null) {
+        thenableState = createThenableState();
+      }
+      return trackUsedThenable(thenableState, thenable, index);
+    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
+      unsupportedContext();
+    }
+  }
+
+  if (isClientReference(usable)) {
+    if (usable.value != null && usable.value.$$typeof === REACT_CONTEXT_TYPE) {
+      // Show a more specific message since it's a common mistake.
+      throw new Error('Cannot read a Client Context from a Server Component.');
+    } else {
+      throw new Error('Cannot use() an already resolved Client Reference.');
+    }
+  } else {
+    throw new Error(
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      'An unsupported type was passed to use(): ' + String(usable),
+    );
+  }
+}
diff --git a/packages/react-server/src/ReactFlightReplyServer.js b/packages/react-server/src/ReactFlightReplyServer.js
new file mode 100644
index 00000000000..88781cc6eb8
--- /dev/null
+++ b/packages/react-server/src/ReactFlightReplyServer.js
@@ -0,0 +1,1569 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes';
+
+// The server acts as a Client of itself when resolving Server References.
+// That's why we import the Client configuration from the Server.
+// Everything is aliased as their Server equivalence for clarity.
+import type {
+  ServerReferenceId,
+  ServerManifest,
+  ClientReference as ServerReference,
+} from 'react-client/src/ReactFlightClientConfig';
+
+import type {TemporaryReferenceSet} from './ReactFlightServerTemporaryReferences';
+
+import {
+  resolveServerReference,
+  preloadModule,
+  requireModule,
+} from 'react-client/src/ReactFlightClientConfig';
+
+import {
+  createTemporaryReference,
+  registerTemporaryReference,
+} from './ReactFlightServerTemporaryReferences';
+import {ASYNC_ITERATOR} from 'shared/ReactSymbols';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+import getPrototypeOf from 'shared/getPrototypeOf';
+
+interface FlightStreamController {
+  enqueueModel(json: string): void;
+  close(json: string): void;
+  error(error: Error): void;
+}
+
+export type JSONValue =
+  | number
+  | null
+  | boolean
+  | string
+  | {+[key: string]: JSONValue}
+  | $ReadOnlyArray<JSONValue>;
+
+const PENDING = 'pending';
+const BLOCKED = 'blocked';
+const RESOLVED_MODEL = 'resolved_model';
+const INITIALIZED = 'fulfilled';
+const ERRORED = 'rejected';
+
+type RESPONSE_SYMBOL_TYPE = 'RESPONSE_SYMBOL'; // Fake symbol type.
+const RESPONSE_SYMBOL: RESPONSE_SYMBOL_TYPE = (Symbol(): any);
+
+type PendingChunk<T> = {
+  status: 'pending',
+  value: null | Array<InitializationReference | (T => mixed)>,
+  reason: null | Array<InitializationReference | (mixed => mixed)>,
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type BlockedChunk<T> = {
+  status: 'blocked',
+  value: null | Array<InitializationReference | (T => mixed)>,
+  reason: null | Array<InitializationReference | (mixed => mixed)>,
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type ResolvedModelChunk<T> = {
+  status: 'resolved_model',
+  value: string,
+  reason: {id: number, [RESPONSE_SYMBOL_TYPE]: Response},
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type InitializedChunk<T> = {
+  status: 'fulfilled',
+  value: T,
+  reason: null,
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type InitializedStreamChunk<
+  T: ReadableStream | $AsyncIterable<any, any, void>,
+> = {
+  status: 'fulfilled',
+  value: T,
+  reason: FlightStreamController,
+  then(resolve: (ReadableStream) => mixed, reject?: (mixed) => mixed): void,
+};
+type ErroredChunk<T> = {
+  status: 'rejected',
+  value: null,
+  reason: mixed,
+  then(resolve: (T) => mixed, reject?: (mixed) => mixed): void,
+};
+type SomeChunk<T> =
+  | PendingChunk<T>
+  | BlockedChunk<T>
+  | ResolvedModelChunk<T>
+  | InitializedChunk<T>
+  | ErroredChunk<T>;
+
+// $FlowFixMe[missing-this-annot]
+function ReactPromise(status: any, value: any, reason: any) {
+  this.status = status;
+  this.value = value;
+  this.reason = reason;
+}
+// We subclass Promise.prototype so that we get other methods like .catch
+ReactPromise.prototype = (Object.create(Promise.prototype): any);
+// TODO: This doesn't return a new Promise chain unlike the real .then
+ReactPromise.prototype.then = function <T>(
+  this: SomeChunk<T>,
+  resolve: (value: T) => mixed,
+  reject: ?(reason: mixed) => mixed,
+) {
+  const chunk: SomeChunk<T> = this;
+  // If we have resolved content, we try to initialize it first which
+  // might put us back into one of the other states.
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  }
+  // The status might have changed after initialization.
+  switch (chunk.status) {
+    case INITIALIZED:
+      if (typeof resolve === 'function') {
+        let inspectedValue = chunk.value;
+        // Recursively check if the value is itself a ReactPromise and if so if it points
+        // back to itself. This helps catch recursive thenables early error.
+        let cycleProtection = 0;
+        const visited = new Set<typeof ReactPromise>();
+        while (inspectedValue instanceof ReactPromise) {
+          cycleProtection++;
+          if (
+            inspectedValue === chunk ||
+            visited.has(inspectedValue) ||
+            cycleProtection > 1000
+          ) {
+            if (typeof reject === 'function') {
+              reject(new Error('Cannot have cyclic thenables.'));
+            }
+            return;
+          }
+          visited.add(inspectedValue);
+          if (inspectedValue.status === INITIALIZED) {
+            inspectedValue = inspectedValue.value;
+          } else {
+            // If this is lazily resolved, pending or blocked, it'll eventually become
+            // initialized and break the loop. Rejected also breaks it.
+            break;
+          }
+        }
+        resolve(chunk.value);
+      }
+      break;
+    case PENDING:
+    case BLOCKED:
+      if (typeof resolve === 'function') {
+        if (chunk.value === null) {
+          chunk.value = ([]: Array<InitializationReference | (T => mixed)>);
+        }
+        chunk.value.push(resolve);
+      }
+      if (typeof reject === 'function') {
+        if (chunk.reason === null) {
+          chunk.reason = ([]: Array<
+            InitializationReference | (mixed => mixed),
+          >);
+        }
+        chunk.reason.push(reject);
+      }
+      break;
+    default:
+      if (typeof reject === 'function') {
+        reject(chunk.reason);
+      }
+      break;
+  }
+};
+
+const ObjectPrototype = Object.prototype;
+const ArrayPrototype = Array.prototype;
+
+export type Response = {
+  _bundlerConfig: ServerManifest,
+  _prefix: string,
+  _formData: FormData,
+  _chunks: Map<number, SomeChunk<any>>,
+  _closed: boolean,
+  _closedReason: mixed,
+  _temporaryReferences: void | TemporaryReferenceSet,
+};
+
+export function getRoot<T>(response: Response): Thenable<T> {
+  const chunk = getChunk(response, 0);
+  return (chunk: any);
+}
+
+function createPendingChunk<T>(response: Response): PendingChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(PENDING, null, null);
+}
+
+function wakeChunk<T>(
+  response: Response,
+  listeners: Array<InitializationReference | (T => mixed)>,
+  value: T,
+): void {
+  for (let i = 0; i < listeners.length; i++) {
+    const listener = listeners[i];
+    if (typeof listener === 'function') {
+      listener(value);
+    } else {
+      fulfillReference(response, listener, value);
+    }
+  }
+}
+
+function rejectChunk(
+  response: Response,
+  listeners: Array<InitializationReference | (mixed => mixed)>,
+  error: mixed,
+): void {
+  for (let i = 0; i < listeners.length; i++) {
+    const listener = listeners[i];
+    if (typeof listener === 'function') {
+      listener(error);
+    } else {
+      rejectReference(response, listener.handler, error);
+    }
+  }
+}
+
+function resolveBlockedCycle<T>(
+  resolvedChunk: SomeChunk<T>,
+  reference: InitializationReference,
+): null | InitializationHandler {
+  const referencedChunk = reference.handler.chunk;
+  if (referencedChunk === null) {
+    return null;
+  }
+  if (referencedChunk === resolvedChunk) {
+    // We found the cycle. We can resolve the blocked cycle now.
+    return reference.handler;
+  }
+  const resolveListeners = referencedChunk.value;
+  if (resolveListeners !== null) {
+    for (let i = 0; i < resolveListeners.length; i++) {
+      const listener = resolveListeners[i];
+      if (typeof listener !== 'function') {
+        const foundHandler = resolveBlockedCycle(resolvedChunk, listener);
+        if (foundHandler !== null) {
+          return foundHandler;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+function wakeChunkIfInitialized<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  resolveListeners: Array<InitializationReference | (T => mixed)>,
+  rejectListeners: null | Array<InitializationReference | (mixed => mixed)>,
+): void {
+  switch (chunk.status) {
+    case INITIALIZED:
+      wakeChunk(response, resolveListeners, chunk.value);
+      break;
+    case BLOCKED:
+      // It is possible that we're blocked on our own chunk if it's a cycle.
+      // Before adding back the listeners to the chunk, let's check if it would
+      // result in a cycle.
+      for (let i = 0; i < resolveListeners.length; i++) {
+        const listener = resolveListeners[i];
+        if (typeof listener !== 'function') {
+          const reference: InitializationReference = listener;
+          const cyclicHandler = resolveBlockedCycle(chunk, reference);
+          if (cyclicHandler !== null) {
+            // This reference points back to this chunk. We can resolve the cycle by
+            // using the value from that handler.
+            fulfillReference(response, reference, cyclicHandler.value);
+            resolveListeners.splice(i, 1);
+            i--;
+            if (rejectListeners !== null) {
+              const rejectionIdx = rejectListeners.indexOf(reference);
+              if (rejectionIdx !== -1) {
+                rejectListeners.splice(rejectionIdx, 1);
+              }
+            }
+            // The status might have changed after fulfilling the reference.
+            switch ((chunk: SomeChunk<T>).status) {
+              case INITIALIZED:
+                const initializedChunk: InitializedChunk<T> = (chunk: any);
+                wakeChunk(response, resolveListeners, initializedChunk.value);
+                return;
+              case ERRORED:
+                if (rejectListeners !== null) {
+                  rejectChunk(response, rejectListeners, chunk.reason);
+                }
+                return;
+            }
+          }
+        }
+      }
+    // Fallthrough
+    case PENDING:
+      if (chunk.value) {
+        for (let i = 0; i < resolveListeners.length; i++) {
+          chunk.value.push(resolveListeners[i]);
+        }
+      } else {
+        chunk.value = resolveListeners;
+      }
+
+      if (chunk.reason) {
+        if (rejectListeners) {
+          for (let i = 0; i < rejectListeners.length; i++) {
+            chunk.reason.push(rejectListeners[i]);
+          }
+        }
+      } else {
+        chunk.reason = rejectListeners;
+      }
+      break;
+    case ERRORED:
+      if (rejectListeners) {
+        wakeChunk(response, rejectListeners, chunk.reason);
+      }
+      break;
+  }
+}
+
+function triggerErrorOnChunk<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  error: mixed,
+): void {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
+    // If we get more data to an already resolved ID, we assume that it's
+    // a stream chunk since any other row shouldn't have more than one entry.
+    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const controller = streamChunk.reason;
+    // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+    controller.error(error);
+    return;
+  }
+  const listeners = chunk.reason;
+  const erroredChunk: ErroredChunk<T> = (chunk: any);
+  erroredChunk.status = ERRORED;
+  erroredChunk.reason = error;
+  if (listeners !== null) {
+    rejectChunk(response, listeners, error);
+  }
+}
+
+function createResolvedModelChunk<T>(
+  response: Response,
+  value: string,
+  id: number,
+): ResolvedModelChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(RESOLVED_MODEL, value, {
+    id,
+    [RESPONSE_SYMBOL]: response,
+  });
+}
+
+function createErroredChunk<T>(
+  response: Response,
+  reason: mixed,
+): ErroredChunk<T> {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(ERRORED, null, reason);
+}
+
+function resolveModelChunk<T>(
+  response: Response,
+  chunk: SomeChunk<T>,
+  value: string,
+  id: number,
+): void {
+  if (chunk.status !== PENDING) {
+    // If we get more data to an already resolved ID, we assume that it's
+    // a stream chunk since any other row shouldn't have more than one entry.
+    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const controller = streamChunk.reason;
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
+    return;
+  }
+  const resolveListeners = chunk.value;
+  const rejectListeners = chunk.reason;
+  const resolvedChunk: ResolvedModelChunk<T> = (chunk: any);
+  resolvedChunk.status = RESOLVED_MODEL;
+  resolvedChunk.value = value;
+  resolvedChunk.reason = {id, [RESPONSE_SYMBOL]: response};
+  if (resolveListeners !== null) {
+    // This is unfortunate that we're reading this eagerly if
+    // we already have listeners attached since they might no
+    // longer be rendered or might not be the highest pri.
+    initializeModelChunk(resolvedChunk);
+    // The status might have changed after initialization.
+    wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners);
+  }
+}
+
+function createInitializedStreamChunk<
+  T: ReadableStream | $AsyncIterable<any, any, void>,
+>(
+  response: Response,
+  value: T,
+  controller: FlightStreamController,
+): InitializedChunk<T> {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(INITIALIZED, value, controller);
+}
+
+function createResolvedIteratorResultChunk<T>(
+  response: Response,
+  value: string,
+  done: boolean,
+): ResolvedModelChunk<IteratorResult<T, T>> {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  const iteratorResultJSON =
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new ReactPromise(RESOLVED_MODEL, iteratorResultJSON, {
+    id: -1,
+    [RESPONSE_SYMBOL]: response,
+  });
+}
+
+function resolveIteratorResultChunk<T>(
+  response: Response,
+  chunk: SomeChunk<IteratorResult<T, T>>,
+  value: string,
+  done: boolean,
+): void {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  const iteratorResultJSON =
+    (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(response, chunk, iteratorResultJSON, -1);
+}
+
+function loadServerReference<A: Iterable<any>, T>(
+  response: Response,
+  metaData: {
+    id: any,
+    bound: null | Thenable<Array<any>>,
+  },
+  parentObject: Object,
+  key: string,
+): (...A) => Promise<T> {
+  const id: ServerReferenceId = metaData.id;
+  if (typeof id !== 'string') {
+    return (null: any);
+  }
+  if (key === 'then') {
+    // This should never happen because we always serialize objects with then-functions
+    // as "thenable" which reduces to ReactPromise with no other fields.
+    return (null: any);
+  }
+  const serverReference: ServerReference<T> =
+    resolveServerReference<$FlowFixMe>(response._bundlerConfig, id);
+  // We expect most servers to not really need this because you'd just have all
+  // the relevant modules already loaded but it allows for lazy loading of code
+  // if needed.
+  const bound = metaData.bound;
+  let promise: null | Thenable<any> = preloadModule(serverReference);
+  if (!promise) {
+    if (bound instanceof ReactPromise) {
+      promise = Promise.resolve(bound);
+    } else {
+      const resolvedValue = (requireModule(serverReference): any);
+      return resolvedValue;
+    }
+  } else if (bound instanceof ReactPromise) {
+    promise = Promise.all([promise, bound]);
+  }
+
+  let handler: InitializationHandler;
+  if (initializingHandler) {
+    handler = initializingHandler;
+    handler.deps++;
+  } else {
+    handler = initializingHandler = {
+      chunk: null,
+      value: null,
+      reason: null,
+      deps: 1,
+      errored: false,
+    };
+  }
+
+  function fulfill(): void {
+    let resolvedValue = (requireModule(serverReference): any);
+
+    if (metaData.bound) {
+      // This promise is coming from us and should have initilialized by now.
+      const promiseValue = (metaData.bound: any).value;
+      const boundArgs: Array<any> = Array.isArray(promiseValue)
+        ? promiseValue.slice(0)
+        : [];
+      boundArgs.unshift(null); // this
+      resolvedValue = resolvedValue.bind.apply(resolvedValue, boundArgs);
+    }
+
+    parentObject[key] = resolvedValue;
+
+    // If this is the root object for a model reference, where `handler.value`
+    // is a stale `null`, the resolved value can be used directly.
+    if (key === '' && handler.value === null) {
+      handler.value = resolvedValue;
+    }
+
+    handler.deps--;
+
+    if (handler.deps === 0) {
+      const chunk = handler.chunk;
+      if (chunk === null || chunk.status !== BLOCKED) {
+        return;
+      }
+      const resolveListeners = chunk.value;
+      const initializedChunk: InitializedChunk<T> = (chunk: any);
+      initializedChunk.status = INITIALIZED;
+      initializedChunk.value = handler.value;
+      initializedChunk.reason = null;
+      if (resolveListeners !== null) {
+        wakeChunk(response, resolveListeners, handler.value);
+      }
+    }
+  }
+
+  function reject(error: mixed): void {
+    if (handler.errored) {
+      // We've already errored. We could instead build up an AggregateError
+      // but if there are multiple errors we just take the first one like
+      // Promise.all.
+      return;
+    }
+    handler.errored = true;
+    handler.value = null;
+    handler.reason = error;
+    const chunk = handler.chunk;
+    if (chunk === null || chunk.status !== BLOCKED) {
+      return;
+    }
+    triggerErrorOnChunk(response, chunk, error);
+  }
+
+  promise.then(fulfill, reject);
+
+  // Return a place holder value for now.
+  return (null: any);
+}
+
+function reviveModel(
+  response: Response,
+  parentObj: any,
+  parentKey: string,
+  value: JSONValue,
+  reference: void | string,
+): any {
+  if (typeof value === 'string') {
+    // We can't use .bind here because we need the "this" value.
+    return parseModelString(response, parentObj, parentKey, value, reference);
+  }
+  if (typeof value === 'object' && value !== null) {
+    if (
+      reference !== undefined &&
+      response._temporaryReferences !== undefined
+    ) {
+      // Store this object's reference in case it's returned later.
+      registerTemporaryReference(
+        response._temporaryReferences,
+        value,
+        reference,
+      );
+    }
+    if (Array.isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        const childRef =
+          reference !== undefined ? reference + ':' + i : undefined;
+        // $FlowFixMe[cannot-write]
+        value[i] = reviveModel(response, value, '' + i, value[i], childRef);
+      }
+    } else {
+      for (const key in value) {
+        if (hasOwnProperty.call(value, key)) {
+          const childRef =
+            reference !== undefined && key.indexOf(':') === -1
+              ? reference + ':' + key
+              : undefined;
+          const newValue = reviveModel(
+            response,
+            value,
+            key,
+            value[key],
+            childRef,
+          );
+          if (newValue !== undefined || key === '__proto__') {
+            // $FlowFixMe[cannot-write]
+            value[key] = newValue;
+          } else {
+            // $FlowFixMe[cannot-write]
+            delete value[key];
+          }
+        }
+      }
+    }
+  }
+  return value;
+}
+
+type InitializationReference = {
+  handler: InitializationHandler,
+  parentObject: Object,
+  key: string,
+  map: (
+    response: Response,
+    model: any,
+    parentObject: Object,
+    key: string,
+  ) => any,
+  path: Array<string>,
+};
+type InitializationHandler = {
+  chunk: null | BlockedChunk<any>,
+  value: any,
+  reason: any,
+  deps: number,
+  errored: boolean,
+};
+let initializingHandler: null | InitializationHandler = null;
+
+function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
+  const prevHandler = initializingHandler;
+  initializingHandler = null;
+
+  const {[RESPONSE_SYMBOL]: response, id} = chunk.reason;
+
+  const rootReference = id === -1 ? undefined : id.toString(16);
+
+  const resolvedModel = chunk.value;
+
+  // We go to the BLOCKED state until we've fully resolved this.
+  // We do this before parsing in case we try to initialize the same chunk
+  // while parsing the model. Such as in a cyclic reference.
+  const cyclicChunk: BlockedChunk<T> = (chunk: any);
+  cyclicChunk.status = BLOCKED;
+  cyclicChunk.value = null;
+  cyclicChunk.reason = null;
+
+  try {
+    const rawModel = JSON.parse(resolvedModel);
+
+    const value: T = reviveModel(
+      response,
+      {'': rawModel},
+      '',
+      rawModel,
+      rootReference,
+    );
+
+    // Invoke any listeners added while resolving this model. I.e. cyclic
+    // references. This may or may not fully resolve the model depending on
+    // if they were blocked.
+    const resolveListeners = cyclicChunk.value;
+    if (resolveListeners !== null) {
+      cyclicChunk.value = null;
+      cyclicChunk.reason = null;
+      for (let i = 0; i < resolveListeners.length; i++) {
+        const listener = resolveListeners[i];
+        if (typeof listener === 'function') {
+          listener(value);
+        } else {
+          fulfillReference(response, listener, value);
+        }
+      }
+    }
+    if (initializingHandler !== null) {
+      if (initializingHandler.errored) {
+        throw initializingHandler.reason;
+      }
+      if (initializingHandler.deps > 0) {
+        // We discovered new dependencies on modules that are not yet resolved.
+        // We have to keep the BLOCKED state until they're resolved.
+        initializingHandler.value = value;
+        initializingHandler.chunk = cyclicChunk;
+        return;
+      }
+    }
+    const initializedChunk: InitializedChunk<T> = (chunk: any);
+    initializedChunk.status = INITIALIZED;
+    initializedChunk.value = value;
+    initializedChunk.reason = null;
+  } catch (error) {
+    const erroredChunk: ErroredChunk<T> = (chunk: any);
+    erroredChunk.status = ERRORED;
+    erroredChunk.reason = error;
+  } finally {
+    initializingHandler = prevHandler;
+  }
+}
+
+// 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: Response, error: Error): void {
+  response._closed = true;
+  response._closedReason = error;
+  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.
+    if (chunk.status === PENDING) {
+      triggerErrorOnChunk(response, chunk, error);
+    } else if (chunk.status === INITIALIZED && chunk.reason !== null) {
+      chunk.reason.error(error);
+    }
+  });
+}
+
+function getChunk(response: Response, id: number): SomeChunk<any> {
+  const chunks = response._chunks;
+  let chunk = chunks.get(id);
+  if (!chunk) {
+    const prefix = response._prefix;
+    const key = prefix + id;
+    // Check if we have this field in the backing store already.
+    const backingEntry = response._formData.get(key);
+    if (typeof backingEntry === 'string') {
+      chunk = createResolvedModelChunk(response, backingEntry, id);
+    } else if (response._closed) {
+      // We have already errored the response and we're not going to get
+      // anything more streaming in so this will immediately error.
+      chunk = createErroredChunk(response, response._closedReason);
+    } else {
+      // We're still waiting on this entry to stream in.
+      chunk = createPendingChunk(response);
+    }
+    chunks.set(id, chunk);
+  }
+  return chunk;
+}
+
+function fulfillReference(
+  response: Response,
+  reference: InitializationReference,
+  value: any,
+): void {
+  const {handler, parentObject, key, map, path} = reference;
+
+  try {
+    for (let i = 1; i < path.length; i++) {
+      // The server doesn't have any lazy references so we don't expect to go through a Promise.
+      const name = path[i];
+      if (
+        typeof value === 'object' &&
+        value !== null &&
+        (getPrototypeOf(value) === ObjectPrototype ||
+          getPrototypeOf(value) === ArrayPrototype) &&
+        hasOwnProperty.call(value, name)
+      ) {
+        value = value[name];
+      } else {
+        throw new Error('Invalid reference.');
+      }
+    }
+
+    const mappedValue = map(response, value, parentObject, key);
+    parentObject[key] = mappedValue;
+
+    // If this is the root object for a model reference, where `handler.value`
+    // is a stale `null`, the resolved value can be used directly.
+    if (key === '' && handler.value === null) {
+      handler.value = mappedValue;
+    }
+  } catch (error) {
+    rejectReference(response, reference.handler, error);
+    return;
+  }
+
+  // There are no Elements or Debug Info to transfer here.
+
+  handler.deps--;
+
+  if (handler.deps === 0) {
+    const chunk = handler.chunk;
+    if (chunk === null || chunk.status !== BLOCKED) {
+      return;
+    }
+    const resolveListeners = chunk.value;
+    const initializedChunk: InitializedChunk<any> = (chunk: any);
+    initializedChunk.status = INITIALIZED;
+    initializedChunk.value = handler.value;
+    initializedChunk.reason = handler.reason; // Used by streaming chunks
+    if (resolveListeners !== null) {
+      wakeChunk(response, resolveListeners, handler.value);
+    }
+  }
+}
+
+function rejectReference(
+  response: Response,
+  handler: InitializationHandler,
+  error: mixed,
+): void {
+  if (handler.errored) {
+    // We've already errored. We could instead build up an AggregateError
+    // but if there are multiple errors we just take the first one like
+    // Promise.all.
+    return;
+  }
+  handler.errored = true;
+  handler.value = null;
+  handler.reason = error;
+  const chunk = handler.chunk;
+  if (chunk === null || chunk.status !== BLOCKED) {
+    return;
+  }
+  // There's no debug info to forward in this direction.
+  triggerErrorOnChunk(response, chunk, error);
+}
+
+function waitForReference<T>(
+  referencedChunk: PendingChunk<T> | BlockedChunk<T>,
+  parentObject: Object,
+  key: string,
+  response: Response,
+  map: (response: Response, model: any, parentObject: Object, key: string) => T,
+  path: Array<string>,
+): T {
+  let handler: InitializationHandler;
+  if (initializingHandler) {
+    handler = initializingHandler;
+    handler.deps++;
+  } else {
+    handler = initializingHandler = {
+      chunk: null,
+      value: null,
+      reason: null,
+      deps: 1,
+      errored: false,
+    };
+  }
+
+  const reference: InitializationReference = {
+    handler,
+    parentObject,
+    key,
+    map,
+    path,
+  };
+
+  // Add "listener".
+  if (referencedChunk.value === null) {
+    referencedChunk.value = [reference];
+  } else {
+    referencedChunk.value.push(reference);
+  }
+  if (referencedChunk.reason === null) {
+    referencedChunk.reason = [reference];
+  } else {
+    referencedChunk.reason.push(reference);
+  }
+
+  // Return a place holder value for now.
+  return (null: any);
+}
+
+function getOutlinedModel<T>(
+  response: Response,
+  reference: string,
+  parentObject: Object,
+  key: string,
+  map: (response: Response, model: any, parentObject: Object, key: string) => T,
+): T {
+  const path = reference.split(':');
+  const id = parseInt(path[0], 16);
+  const chunk = getChunk(response, id);
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  }
+  // The status might have changed after initialization.
+  switch (chunk.status) {
+    case INITIALIZED:
+      let value = chunk.value;
+      for (let i = 1; i < path.length; i++) {
+        const name = path[i];
+        if (
+          typeof value === 'object' &&
+          value !== null &&
+          (getPrototypeOf(value) === ObjectPrototype ||
+            getPrototypeOf(value) === ArrayPrototype) &&
+          hasOwnProperty.call(value, name)
+        ) {
+          value = value[name];
+        } else {
+          throw new Error('Invalid reference.');
+        }
+      }
+      const chunkValue = map(response, value, parentObject, key);
+      // There's no Element nor Debug Info in the ReplyServer so we don't have to check those here.
+      return chunkValue;
+    case PENDING:
+    case BLOCKED:
+      return waitForReference(chunk, parentObject, key, response, map, path);
+    default:
+      // This is an error. Instead of erroring directly, we're going to encode this on
+      // an initialization handler.
+      if (initializingHandler) {
+        initializingHandler.errored = true;
+        initializingHandler.value = null;
+        initializingHandler.reason = chunk.reason;
+      } else {
+        initializingHandler = {
+          chunk: null,
+          value: null,
+          reason: chunk.reason,
+          deps: 0,
+          errored: true,
+        };
+      }
+      // Placeholder
+      return (null: any);
+  }
+}
+
+function createMap(
+  response: Response,
+  model: Array<[any, any]>,
+): Map<any, any> {
+  return new Map(model);
+}
+
+function createSet(response: Response, model: Array<any>): Set<any> {
+  return new Set(model);
+}
+
+function extractIterator(response: Response, model: Array<any>): Iterator<any> {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(
+  response: Response,
+  model: any,
+  parentObject: Object,
+  key: string,
+): any {
+  if (key === 'then' && typeof model === 'function') {
+    // This should never happen because we always serialize objects with then-functions
+    // as "thenable" which reduces to ReactPromise with no other fields.
+    return null;
+  }
+  return model;
+}
+
+function parseTypedArray<T: $ArrayBufferView | ArrayBuffer>(
+  response: Response,
+  reference: string,
+  constructor: any,
+  bytesPerElement: number,
+  parentObject: Object,
+  parentKey: string,
+): null {
+  const id = parseInt(reference.slice(2), 16);
+  const prefix = response._prefix;
+  const key = prefix + id;
+  const chunks = response._chunks;
+  if (chunks.has(id)) {
+    throw new Error('Already initialized typed array.');
+  }
+
+  // We should have this backingEntry in the store already because we emitted
+  // it before referencing it. It should be a Blob.
+  // TODO: Use getOutlinedModel to allow us to emit the Blob later. We should be able to do that now.
+  const backingEntry: Blob = (response._formData.get(key): any);
+
+  const promise: Promise<ArrayBuffer> = backingEntry.arrayBuffer();
+
+  // Since loading the buffer is an async operation we'll be blocking the parent
+  // chunk.
+
+  let handler: InitializationHandler;
+  if (initializingHandler) {
+    handler = initializingHandler;
+    handler.deps++;
+  } else {
+    handler = initializingHandler = {
+      chunk: null,
+      value: null,
+      reason: null,
+      deps: 1,
+      errored: false,
+    };
+  }
+
+  function fulfill(buffer: ArrayBuffer): void {
+    const resolvedValue: T =
+      constructor === ArrayBuffer
+        ? (buffer: any)
+        : (new constructor(buffer): any);
+
+    parentObject[parentKey] = resolvedValue;
+
+    // If this is the root object for a model reference, where `handler.value`
+    // is a stale `null`, the resolved value can be used directly.
+    if (parentKey === '' && handler.value === null) {
+      handler.value = resolvedValue;
+    }
+
+    handler.deps--;
+
+    if (handler.deps === 0) {
+      const chunk = handler.chunk;
+      if (chunk === null || chunk.status !== BLOCKED) {
+        return;
+      }
+      const resolveListeners = chunk.value;
+      const initializedChunk: InitializedChunk<T> = (chunk: any);
+      initializedChunk.status = INITIALIZED;
+      initializedChunk.value = handler.value;
+      initializedChunk.reason = null;
+      if (resolveListeners !== null) {
+        wakeChunk(response, resolveListeners, handler.value);
+      }
+    }
+  }
+
+  function reject(error: mixed): void {
+    if (handler.errored) {
+      // We've already errored. We could instead build up an AggregateError
+      // but if there are multiple errors we just take the first one like
+      // Promise.all.
+      return;
+    }
+    handler.errored = true;
+    handler.value = null;
+    handler.reason = error;
+    const chunk = handler.chunk;
+    if (chunk === null || chunk.status !== BLOCKED) {
+      return;
+    }
+    triggerErrorOnChunk(response, chunk, error);
+  }
+
+  promise.then(fulfill, reject);
+
+  return null;
+}
+
+function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
+  response: Response,
+  id: number,
+  stream: T,
+  controller: FlightStreamController,
+): void {
+  const chunks = response._chunks;
+  const chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+
+  const prefix = response._prefix;
+  const key = prefix + id;
+  const existingEntries = response._formData.getAll(key);
+  for (let i = 0; i < existingEntries.length; i++) {
+    const value = existingEntries[i];
+    if (typeof value === 'string') {
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+  }
+}
+
+function parseReadableStream<T>(
+  response: Response,
+  reference: string,
+  type: void | 'bytes',
+  parentObject: Object,
+  parentKey: string,
+): ReadableStream {
+  const id = parseInt(reference.slice(2), 16);
+  const chunks = response._chunks;
+  if (chunks.has(id)) {
+    throw new Error('Already initialized stream.');
+  }
+
+  let controller: ReadableStreamController = (null: any);
+  let closed = false;
+  const stream = new ReadableStream({
+    type: type,
+    start(c) {
+      controller = c;
+    },
+  });
+  let previousBlockedChunk: SomeChunk<T> | null = null;
+  const flightController = {
+    enqueueModel(json: string): void {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        const chunk: ResolvedModelChunk<T> = createResolvedModelChunk(
+          response,
+          json,
+          -1,
+        );
+        initializeModelChunk(chunk);
+        const initializedChunk: SomeChunk<T> = chunk;
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(
+            v => controller.enqueue(v),
+            e => controller.error((e: any)),
+          );
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        const blockedChunk = previousBlockedChunk;
+        const chunk: SomeChunk<T> = createPendingChunk(response);
+        chunk.then(
+          v => controller.enqueue(v),
+          e => controller.error((e: any)),
+        );
+        previousBlockedChunk = chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+          resolveModelChunk(response, chunk, json, -1);
+        });
+      }
+    },
+    close(json: string): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        const blockedChunk = previousBlockedChunk;
+        // We shouldn't get any more enqueues after this so we can set it back to null.
+        previousBlockedChunk = null;
+        blockedChunk.then(() => controller.close());
+      }
+    },
+    error(error: mixed): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        const blockedChunk = previousBlockedChunk;
+        // We shouldn't get any more enqueues after this so we can set it back to null.
+        previousBlockedChunk = null;
+        blockedChunk.then(() => controller.error((error: any)));
+      }
+    },
+  };
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function asyncIterator(this: $AsyncIterator<any, any, void>) {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator<T>(
+  next: (arg: void) => SomeChunk<IteratorResult<T, T>>,
+): $AsyncIterator<T, T, void> {
+  const iterator: any = {
+    next: next,
+    // TODO: Add return/throw as options for aborting.
+  };
+  // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+  (iterator: any)[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function parseAsyncIterable<T>(
+  response: Response,
+  reference: string,
+  iterator: boolean,
+  parentObject: Object,
+  parentKey: string,
+): $AsyncIterable<T, T, void> | $AsyncIterator<T, T, void> {
+  const id = parseInt(reference.slice(2), 16);
+  const chunks = response._chunks;
+  if (chunks.has(id)) {
+    throw new Error('Already initialized stream.');
+  }
+
+  const buffer: Array<SomeChunk<IteratorResult<T, T>>> = [];
+  let closed = false;
+  let nextWriteIndex = 0;
+  const flightController = {
+    enqueueModel(value: string): void {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+          response,
+          value,
+          false,
+        );
+      } else {
+        resolveIteratorResultChunk(
+          response,
+          buffer[nextWriteIndex],
+          value,
+          false,
+        );
+      }
+      nextWriteIndex++;
+    },
+    close(value: string): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(
+          response,
+          value,
+          true,
+        );
+      } else {
+        resolveIteratorResultChunk(
+          response,
+          buffer[nextWriteIndex],
+          value,
+          true,
+        );
+      }
+      nextWriteIndex++;
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(
+          response,
+          buffer[nextWriteIndex++],
+          '"$undefined"',
+          true,
+        );
+      }
+    },
+    error(error: Error): void {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] =
+          createPendingChunk<IteratorResult<T, T>>(response);
+      }
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(response, buffer[nextWriteIndex++], error);
+      }
+    },
+  };
+  const iterable: $AsyncIterable<T, T, void> = {
+    [ASYNC_ITERATOR](): $AsyncIterator<T, T, void> {
+      let nextReadIndex = 0;
+      return createIterator(arg => {
+        if (arg !== undefined) {
+          throw new Error(
+            'Values cannot be passed to next() of AsyncIterables passed to Client Components.',
+          );
+        }
+        if (nextReadIndex === buffer.length) {
+          if (closed) {
+            // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+            return new ReactPromise(
+              INITIALIZED,
+              {done: true, value: undefined},
+              null,
+            );
+          }
+          buffer[nextReadIndex] =
+            createPendingChunk<IteratorResult<T, T>>(response);
+        }
+        return buffer[nextReadIndex++];
+      });
+    },
+  };
+  // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+  const stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function parseModelString(
+  response: Response,
+  obj: Object,
+  key: string,
+  value: string,
+  reference: void | string,
+): any {
+  if (value[0] === '$') {
+    switch (value[1]) {
+      case '$': {
+        // This was an escaped string value.
+        return value.slice(1);
+      }
+      case '@': {
+        // Promise
+        const id = parseInt(value.slice(2), 16);
+        const chunk = getChunk(response, id);
+        return chunk;
+      }
+      case 'h': {
+        // Server Reference
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, obj, key, loadServerReference);
+      }
+      case 'T': {
+        // Temporary Reference
+        if (
+          reference === undefined ||
+          response._temporaryReferences === undefined
+        ) {
+          throw new Error(
+            'Could not reference an opaque temporary reference. ' +
+              'This is likely due to misconfiguring the temporaryReferences options ' +
+              'on the server.',
+          );
+        }
+        return createTemporaryReference(
+          response._temporaryReferences,
+          reference,
+        );
+      }
+      case 'Q': {
+        // Map
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, obj, key, createMap);
+      }
+      case 'W': {
+        // Set
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, obj, key, createSet);
+      }
+      case 'K': {
+        // FormData
+        const stringId = value.slice(2);
+        const formPrefix = response._prefix + stringId + '_';
+        const data = new FormData();
+        const backingFormData = response._formData;
+        // We assume that the reference to FormData always comes after each
+        // entry that it references so we can assume they all exist in the
+        // backing store already.
+        // $FlowFixMe[prop-missing] FormData has forEach on it.
+        backingFormData.forEach((entry: File | string, entryKey: string) => {
+          if (entryKey.startsWith(formPrefix)) {
+            // $FlowFixMe[incompatible-call]
+            data.append(entryKey.slice(formPrefix.length), entry);
+          }
+        });
+        return data;
+      }
+      case 'i': {
+        // Iterator
+        const ref = value.slice(2);
+        return getOutlinedModel(response, ref, obj, key, extractIterator);
+      }
+      case 'I': {
+        // $Infinity
+        return Infinity;
+      }
+      case '-': {
+        // $-0 or $-Infinity
+        if (value === '$-0') {
+          return -0;
+        } else {
+          return -Infinity;
+        }
+      }
+      case 'N': {
+        // $NaN
+        return NaN;
+      }
+      case 'u': {
+        // matches "$undefined"
+        // Special encoding for `undefined` which can't be serialized as JSON otherwise.
+        return undefined;
+      }
+      case 'D': {
+        // Date
+        return new Date(Date.parse(value.slice(2)));
+      }
+      case 'n': {
+        // BigInt
+        return BigInt(value.slice(2));
+      }
+    }
+    switch (value[1]) {
+      case 'A':
+        return parseTypedArray(response, value, ArrayBuffer, 1, obj, key);
+      case 'O':
+        return parseTypedArray(response, value, Int8Array, 1, obj, key);
+      case 'o':
+        return parseTypedArray(response, value, Uint8Array, 1, obj, key);
+      case 'U':
+        return parseTypedArray(response, value, Uint8ClampedArray, 1, obj, key);
+      case 'S':
+        return parseTypedArray(response, value, Int16Array, 2, obj, key);
+      case 's':
+        return parseTypedArray(response, value, Uint16Array, 2, obj, key);
+      case 'L':
+        return parseTypedArray(response, value, Int32Array, 4, obj, key);
+      case 'l':
+        return parseTypedArray(response, value, Uint32Array, 4, obj, key);
+      case 'G':
+        return parseTypedArray(response, value, Float32Array, 4, obj, key);
+      case 'g':
+        return parseTypedArray(response, value, Float64Array, 8, obj, key);
+      case 'M':
+        return parseTypedArray(response, value, BigInt64Array, 8, obj, key);
+      case 'm':
+        return parseTypedArray(response, value, BigUint64Array, 8, obj, key);
+      case 'V':
+        return parseTypedArray(response, value, DataView, 1, obj, key);
+      case 'B': {
+        // Blob
+        const id = parseInt(value.slice(2), 16);
+        const prefix = response._prefix;
+        const blobKey = prefix + id;
+        // We should have this backingEntry in the store already because we emitted
+        // it before referencing it. It should be a Blob.
+        const backingEntry: Blob = (response._formData.get(blobKey): any);
+        return backingEntry;
+      }
+    }
+    switch (value[1]) {
+      case 'R': {
+        return parseReadableStream(response, value, undefined, obj, key);
+      }
+      case 'r': {
+        return parseReadableStream(response, value, 'bytes', obj, key);
+      }
+      case 'X': {
+        return parseAsyncIterable(response, value, false, obj, key);
+      }
+      case 'x': {
+        return parseAsyncIterable(response, value, true, obj, key);
+      }
+    }
+    // We assume that anything else is a reference ID.
+    const ref = value.slice(1);
+    return getOutlinedModel(response, ref, obj, key, createModel);
+  }
+  return value;
+}
+
+export function createResponse(
+  bundlerConfig: ServerManifest,
+  formFieldPrefix: string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  backingFormData?: FormData = new FormData(),
+): Response {
+  const chunks: Map<number, SomeChunk<any>> = new Map();
+  const response: Response = {
+    _bundlerConfig: bundlerConfig,
+    _prefix: formFieldPrefix,
+    _formData: backingFormData,
+    _chunks: chunks,
+    _closed: false,
+    _closedReason: null,
+    _temporaryReferences: temporaryReferences,
+  };
+  return response;
+}
+
+export function resolveField(
+  response: Response,
+  key: string,
+  value: string,
+): void {
+  // Add this field to the backing store.
+  response._formData.append(key, value);
+  const prefix = response._prefix;
+  if (key.startsWith(prefix)) {
+    const chunks = response._chunks;
+    const id = +key.slice(prefix.length);
+    const chunk = chunks.get(id);
+    if (chunk) {
+      // We were waiting on this key so now we can resolve it.
+      resolveModelChunk(response, chunk, value, id);
+    }
+  }
+}
+
+export function resolveFile(response: Response, key: string, file: File): void {
+  // Add this field to the backing store.
+  response._formData.append(key, file);
+}
+
+export opaque type FileHandle = {
+  chunks: Array<Uint8Array>,
+  filename: string,
+  mime: string,
+};
+
+export function resolveFileInfo(
+  response: Response,
+  key: string,
+  filename: string,
+  mime: string,
+): FileHandle {
+  return {
+    chunks: [],
+    filename,
+    mime,
+  };
+}
+
+export function resolveFileChunk(
+  response: Response,
+  handle: FileHandle,
+  chunk: Uint8Array,
+): void {
+  handle.chunks.push(chunk);
+}
+
+export function resolveFileComplete(
+  response: Response,
+  key: string,
+  handle: FileHandle,
+): void {
+  // Add this file to the backing store.
+  // Node.js doesn't expose a global File constructor so we need to use
+  // the append() form that takes the file name as the third argument,
+  // to create a File object.
+  const blob = new Blob(handle.chunks, {type: handle.mime});
+  response._formData.append(key, blob, handle.filename);
+}
+
+export function close(response: Response): 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.'));
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
new file mode 100644
index 00000000000..1f9bb0a77fa
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -0,0 +1,6351 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Chunk, BinaryChunk, Destination} from './ReactServerStreamConfig';
+
+import type {TemporaryReferenceSet} from './ReactFlightServerTemporaryReferences';
+
+import {
+  enableHalt,
+  enableTaint,
+  enableProfilerTimer,
+  enableComponentPerformanceTrack,
+  enableAsyncDebugInfo,
+} from 'shared/ReactFeatureFlags';
+
+import {
+  scheduleWork,
+  scheduleMicrotask,
+  flushBuffered,
+  beginWriting,
+  writeChunkAndReturn,
+  stringToChunk,
+  typedArrayToBinaryChunk,
+  byteLengthOfChunk,
+  byteLengthOfBinaryChunk,
+  completeWriting,
+  close,
+  closeWithError,
+} from './ReactServerStreamConfig';
+
+export type {Destination, Chunk} from './ReactServerStreamConfig';
+
+import type {
+  ClientManifest,
+  ClientReferenceMetadata,
+  ClientReference,
+  ClientReferenceKey,
+  ServerReference,
+  ServerReferenceId,
+  Hints,
+  HintCode,
+  HintModel,
+  FormatContext,
+} from './ReactFlightServerConfig';
+import type {ThenableState} from './ReactFlightThenable';
+import type {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactDebugInfo,
+  ReactDebugInfoEntry,
+  ReactComponentInfo,
+  ReactIOInfo,
+  ReactAsyncInfo,
+  ReactStackTrace,
+  ReactCallSite,
+  ReactFunctionLocation,
+  ReactErrorInfo,
+  ReactErrorInfoDev,
+  ReactKey,
+} from 'shared/ReactTypes';
+import type {ReactElement} from 'shared/ReactElementType';
+import type {LazyComponent} from 'react/src/ReactLazy';
+import type {
+  AsyncSequence,
+  IONode,
+  PromiseNode,
+  UnresolvedPromiseNode,
+} from './ReactFlightAsyncSequence';
+
+import {
+  resolveClientReferenceMetadata,
+  getServerReferenceId,
+  getServerReferenceBoundArguments,
+  getServerReferenceLocation,
+  getClientReferenceKey,
+  isClientReference,
+  isServerReference,
+  supportsRequestStorage,
+  requestStorage,
+  createHints,
+  createRootFormatContext,
+  getChildFormatContext,
+  initAsyncDebugInfo,
+  markAsyncSequenceRootTask,
+  getCurrentAsyncSequence,
+  getAsyncSequenceFromPromise,
+  parseStackTrace,
+  parseStackTracePrivate,
+  supportsComponentStorage,
+  componentStorage,
+  unbadgeConsole,
+} from './ReactFlightServerConfig';
+
+import {
+  resolveTemporaryReference,
+  isOpaqueTemporaryReference,
+} from './ReactFlightServerTemporaryReferences';
+
+import {
+  HooksDispatcher,
+  prepareToUseHooksForRequest,
+  prepareToUseHooksForComponent,
+  getThenableStateAfterSuspending,
+  getTrackedThenablesAfterRendering,
+  resetHooksForRequest,
+} from './ReactFlightHooks';
+import {DefaultAsyncDispatcher} from './flight/ReactFlightAsyncDispatcher';
+
+import {resolveOwner, setCurrentOwner} from './flight/ReactFlightCurrentOwner';
+
+import {getOwnerStackByComponentInfoInDev} from 'shared/ReactComponentInfoStack';
+import {resetOwnerStackLimit} from 'shared/ReactOwnerStackReset';
+
+import noop from 'shared/noop';
+
+import {
+  callComponentInDEV,
+  callLazyInitInDEV,
+  callIteratorInDEV,
+} from './ReactFlightCallUserSpace';
+
+import {
+  getIteratorFn,
+  REACT_ELEMENT_TYPE,
+  REACT_LEGACY_ELEMENT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_MEMO_TYPE,
+  ASYNC_ITERATOR,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+
+import {
+  describeObjectForErrorMessage,
+  isGetter,
+  isSimpleObject,
+  jsxPropsParents,
+  jsxChildrenParents,
+  objectName,
+} from 'shared/ReactSerializationErrors';
+
+import ReactSharedInternals from './ReactSharedInternalsServer';
+import isArray from 'shared/isArray';
+import getPrototypeOf from 'shared/getPrototypeOf';
+import hasOwnProperty from 'shared/hasOwnProperty';
+import binaryToComparableString from 'shared/binaryToComparableString';
+
+import {SuspenseException, getSuspendedThenable} from './ReactFlightThenable';
+
+import {
+  IO_NODE,
+  PROMISE_NODE,
+  AWAIT_NODE,
+  UNRESOLVED_AWAIT_NODE,
+  UNRESOLVED_PROMISE_NODE,
+} from './ReactFlightAsyncSequence';
+
+// DEV-only set containing internal objects that should not be limited and turned into getters.
+const doNotLimit: WeakSet<Reference> = __DEV__ ? new WeakSet() : (null: any);
+
+function defaultFilterStackFrame(
+  filename: string,
+  functionName: string,
+): boolean {
+  return (
+    filename !== '' &&
+    !filename.startsWith('node:') &&
+    !filename.includes('node_modules')
+  );
+}
+
+function devirtualizeURL(url: string): string {
+  if (url.startsWith('about://React/')) {
+    // This callsite is a virtual fake callsite that came from another Flight client.
+    // We need to reverse it back into the original location by stripping its prefix
+    // and suffix. We don't need the environment name because it's available on the
+    // parent object that will contain the stack.
+    const envIdx = url.indexOf('/', 'about://React/'.length);
+    const suffixIdx = url.lastIndexOf('?');
+    if (envIdx > -1 && suffixIdx > -1) {
+      return decodeURI(url.slice(envIdx + 1, suffixIdx));
+    }
+  }
+  return url;
+}
+
+function isPromiseCreationInternal(url: string, functionName: string): boolean {
+  // Various internals of the JS VM can create Promises but the call frame of the
+  // internals are not very interesting for our purposes so we need to skip those.
+  if (url === 'node:internal/async_hooks') {
+    // Ignore the stack frames from the async hooks themselves.
+    return true;
+  }
+  if (url !== '') {
+    return false;
+  }
+  switch (functionName) {
+    case 'new Promise':
+    case 'Function.withResolvers':
+    case 'Function.reject':
+    case 'Function.resolve':
+    case 'Function.all':
+    case 'Function.allSettled':
+    case 'Function.race':
+    case 'Function.try':
+      return true;
+    default:
+      return false;
+  }
+}
+
+function stripLeadingPromiseCreationFrames(
+  stack: ReactStackTrace,
+): ReactStackTrace {
+  for (let i = 0; i < stack.length; i++) {
+    const callsite = stack[i];
+    const functionName = callsite[0];
+    const url = callsite[1];
+    if (!isPromiseCreationInternal(url, functionName)) {
+      if (i > 0) {
+        return stack.slice(i);
+      } else {
+        return stack;
+      }
+    }
+  }
+  return [];
+}
+
+function findCalledFunctionNameFromStackTrace(
+  request: Request,
+  stack: ReactStackTrace,
+): string {
+  // Gets the name of the first function called from first party code.
+  let bestMatch = '';
+  const filterStackFrame = request.filterStackFrame;
+  for (let i = 0; i < stack.length; i++) {
+    const callsite = stack[i];
+    const functionName = callsite[0];
+    const url = devirtualizeURL(callsite[1]);
+    const lineNumber = callsite[2];
+    const columnNumber = callsite[3];
+    if (
+      filterStackFrame(url, functionName, lineNumber, columnNumber) &&
+      // Don't consider anonymous code first party even if the filter wants to include them in the stack.
+      url !== ''
+    ) {
+      if (bestMatch === '') {
+        // If we had no good stack frames for internal calls, just use the last
+        // first party function name.
+        return functionName;
+      }
+      return bestMatch;
+    } else {
+      bestMatch = functionName;
+    }
+  }
+  return '';
+}
+
+function filterStackTrace(
+  request: Request,
+  stack: ReactStackTrace,
+): ReactStackTrace {
+  // Since stacks can be quite large and we pass a lot of them, we filter them out eagerly
+  // to save bandwidth even in DEV. We'll also replay these stacks on the client so by
+  // stripping them early we avoid that overhead. Otherwise we'd normally just rely on
+  // the DevTools or framework's ignore lists to filter them out.
+  const filterStackFrame = request.filterStackFrame;
+  const filteredStack: ReactStackTrace = [];
+  for (let i = 0; i < stack.length; i++) {
+    const callsite = stack[i];
+    const functionName = callsite[0];
+    const url = devirtualizeURL(callsite[1]);
+    const lineNumber = callsite[2];
+    const columnNumber = callsite[3];
+    if (filterStackFrame(url, functionName, lineNumber, columnNumber)) {
+      // Use a clone because the Flight protocol isn't yet resilient to deduping
+      // objects in the debug info. TODO: Support deduping stacks.
+      const clone: ReactCallSite = (callsite.slice(0): any);
+      clone[1] = url;
+      filteredStack.push(clone);
+    }
+  }
+  return filteredStack;
+}
+
+function hasUnfilteredFrame(request: Request, stack: ReactStackTrace): boolean {
+  const filterStackFrame = request.filterStackFrame;
+  for (let i = 0; i < stack.length; i++) {
+    const callsite = stack[i];
+    const functionName = callsite[0];
+    const url = devirtualizeURL(callsite[1]);
+    const lineNumber = callsite[2];
+    const columnNumber = callsite[3];
+    // Ignore async stack frames because they're not "real". We'd expect to have at least
+    // one non-async frame if we're actually executing inside a first party function.
+    // Otherwise we might just be in the resume of a third party function that resumed
+    // inside a first party stack.
+    const isAsync = callsite[6];
+    if (
+      !isAsync &&
+      filterStackFrame(url, functionName, lineNumber, columnNumber) &&
+      // Ignore anonymous stack frames like internals. They are also not in first party
+      // code even though it might be useful to include them in the final stack.
+      url !== ''
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function isPromiseAwaitInternal(url: string, functionName: string): boolean {
+  // Various internals of the JS VM can await internally on a Promise. If those are at
+  // the top of the stack then we don't want to consider them as internal frames. The
+  // true "await" conceptually is the thing that called the helper.
+  // Ideally we'd also include common third party helpers for this.
+  if (url === 'node:internal/async_hooks') {
+    // Ignore the stack frames from the async hooks themselves.
+    return true;
+  }
+  if (url !== '') {
+    return false;
+  }
+  switch (functionName) {
+    case 'Promise.then':
+    case 'Promise.catch':
+    case 'Promise.finally':
+    case 'Function.reject':
+    case 'Function.resolve':
+    case 'Function.all':
+    case 'Function.allSettled':
+    case 'Function.any':
+    case 'Function.race':
+    case 'Function.try':
+    case 'Function.withResolvers':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function isAwaitInUserspace(
+  request: Request,
+  stack: ReactStackTrace,
+): boolean {
+  let firstFrame = 0;
+  while (
+    stack.length > firstFrame &&
+    isPromiseAwaitInternal(stack[firstFrame][1], stack[firstFrame][0])
+  ) {
+    // Skip the internal frame that awaits itself.
+    firstFrame++;
+  }
+  if (stack.length > firstFrame) {
+    // Check if the very first stack frame that awaited this Promise was in user space.
+    // TODO: This doesn't take into account wrapper functions such as our fake .then()
+    // in FlightClient which will always be considered third party awaits if you call
+    // .then directly.
+    const filterStackFrame = request.filterStackFrame;
+    const callsite = stack[firstFrame];
+    const functionName = callsite[0];
+    const url = devirtualizeURL(callsite[1]);
+    const lineNumber = callsite[2];
+    const columnNumber = callsite[3];
+    return (
+      filterStackFrame(url, functionName, lineNumber, columnNumber) &&
+      url !== ''
+    );
+  }
+  return false;
+}
+
+initAsyncDebugInfo();
+
+function patchConsole(consoleInst: typeof console, methodName: string) {
+  const descriptor = Object.getOwnPropertyDescriptor(consoleInst, methodName);
+  if (
+    descriptor &&
+    (descriptor.configurable || descriptor.writable) &&
+    typeof descriptor.value === 'function'
+  ) {
+    const originalMethod = descriptor.value;
+    const originalName = Object.getOwnPropertyDescriptor(
+      // $FlowFixMe[incompatible-call]: We should be able to get descriptors from any function.
+      originalMethod,
+      'name',
+    );
+    const wrapperMethod = function (this: typeof console) {
+      const request = resolveRequest();
+      if (methodName === 'assert' && arguments[0]) {
+        // assert doesn't emit anything unless first argument is falsy so we can skip it.
+      } else if (request !== null) {
+        // Extract the stack. Not all console logs print the full stack but they have at
+        // least the line it was called from. We could optimize transfer by keeping just
+        // one stack frame but keeping it simple for now and include all frames.
+        const stack = filterStackTrace(
+          request,
+          parseStackTracePrivate(new Error('react-stack-top-frame'), 1) || [],
+        );
+        request.pendingDebugChunks++;
+        const owner: null | ReactComponentInfo = resolveOwner();
+        const args = Array.from(arguments);
+        // Extract the env if this is a console log that was replayed from another env.
+        let env = unbadgeConsole(methodName, args);
+        if (env === null) {
+          // Otherwise add the current environment.
+          env = (0, request.environmentName)();
+        }
+
+        emitConsoleChunk(request, methodName, owner, env, stack, args);
+      }
+      // $FlowFixMe[incompatible-call]
+      return originalMethod.apply(this, arguments);
+    };
+    if (originalName) {
+      Object.defineProperty(
+        wrapperMethod,
+        // $FlowFixMe[cannot-write] yes it is
+        'name',
+        originalName,
+      );
+    }
+    Object.defineProperty(consoleInst, methodName, {
+      value: wrapperMethod,
+    });
+  }
+}
+
+if (__DEV__ && typeof console === 'object' && console !== null) {
+  // Instrument console to capture logs for replaying on the client.
+  patchConsole(console, 'assert');
+  patchConsole(console, 'debug');
+  patchConsole(console, 'dir');
+  patchConsole(console, 'dirxml');
+  patchConsole(console, 'error');
+  patchConsole(console, 'group');
+  patchConsole(console, 'groupCollapsed');
+  patchConsole(console, 'groupEnd');
+  patchConsole(console, 'info');
+  patchConsole(console, 'log');
+  patchConsole(console, 'table');
+  patchConsole(console, 'trace');
+  patchConsole(console, 'warn');
+}
+
+function getCurrentStackInDEV(): string {
+  if (__DEV__) {
+    const owner: null | ReactComponentInfo = resolveOwner();
+    if (owner === null) {
+      return '';
+    }
+    return getOwnerStackByComponentInfoInDev(owner);
+  }
+  return '';
+}
+
+const ObjectPrototype = Object.prototype;
+
+type JSONValue =
+  | string
+  | boolean
+  | number
+  | null
+  | {+[key: string]: JSONValue}
+  | $ReadOnlyArray<JSONValue>;
+
+const stringify = JSON.stringify;
+
+type ReactJSONValue =
+  | string
+  | boolean
+  | number
+  | null
+  | $ReadOnlyArray<ReactClientValue>
+  | ReactClientObject;
+
+// Serializable values
+export type ReactClientValue =
+  // Server Elements and Lazy Components are unwrapped on the Server
+  | React$Element<component(...props: any)>
+  | LazyComponent<ReactClientValue, any>
+  // References are passed by their value
+  | ClientReference<any>
+  | ServerReference<any>
+  // The rest are passed as is. Sub-types can be passed in but lose their
+  // subtype, so the receiver can only accept once of these.
+  | React$Element<string>
+  | React$Element<ClientReference<any> & any>
+  | ReactComponentInfo
+  | string
+  | boolean
+  | number
+  | symbol
+  | null
+  | void
+  | bigint
+  | ReadableStream
+  | $AsyncIterable<ReactClientValue, ReactClientValue, void>
+  | $AsyncIterator<ReactClientValue, ReactClientValue, void>
+  | Iterable<ReactClientValue>
+  | Iterator<ReactClientValue>
+  | Array<ReactClientValue>
+  | Map<ReactClientValue, ReactClientValue>
+  | Set<ReactClientValue>
+  | FormData
+  | $ArrayBufferView
+  | ArrayBuffer
+  | Date
+  | ReactClientObject
+  | Promise<ReactClientValue>; // Thenable<ReactClientValue>
+
+type ReactClientObject = {+[key: string]: ReactClientValue};
+
+// task status
+const PENDING = 0;
+const COMPLETED = 1;
+const ABORTED = 3;
+const ERRORED = 4;
+const RENDERING = 5;
+
+type Task = {
+  id: number,
+  status: 0 | 1 | 3 | 4 | 5,
+  model: ReactClientValue,
+  ping: () => void,
+  toJSON: (key: string, value: ReactClientValue) => ReactJSONValue,
+  keyPath: ReactKey, // parent server component keys
+  implicitSlot: boolean, // true if the root server component of this sequence had a null key
+  formatContext: FormatContext, // an approximate parent context from host components
+  thenableState: ThenableState | null,
+  timed: boolean, // Profiling-only. Whether we need to track the completion time of this task.
+  time: number, // Profiling-only. The last time stamp emitted for this task.
+  environmentName: string, // DEV-only. Used to track if the environment for this task changed.
+  debugOwner: null | ReactComponentInfo, // DEV-only
+  debugStack: null | Error, // DEV-only
+  debugTask: null | ConsoleTask, // DEV-only
+};
+
+interface Reference {}
+
+type ReactClientReference = Reference & ReactClientValue;
+
+type DeferredDebugStore = {
+  retained: Map<number, ReactClientReference | string>,
+  existing: Map<ReactClientReference | string, number>,
+};
+
+const OPENING = 10;
+const OPEN = 11;
+const ABORTING = 12;
+const CLOSING = 13;
+const CLOSED = 14;
+
+const RENDER = 20;
+const PRERENDER = 21;
+
+export type Request = {
+  status: 10 | 11 | 12 | 13 | 14,
+  type: 20 | 21,
+  flushScheduled: boolean,
+  fatalError: mixed,
+  destination: null | Destination,
+  bundlerConfig: ClientManifest,
+  cache: Map<Function, mixed>,
+  cacheController: AbortController,
+  nextChunkId: number,
+  pendingChunks: number,
+  hints: Hints,
+  abortableTasks: Set<Task>,
+  pingedTasks: Array<Task>,
+  completedImportChunks: Array<Chunk>,
+  completedHintChunks: Array<Chunk>,
+  completedRegularChunks: Array<Chunk | BinaryChunk>,
+  completedErrorChunks: Array<Chunk>,
+  writtenSymbols: Map<symbol, number>,
+  writtenClientReferences: Map<ClientReferenceKey, number>,
+  writtenServerReferences: Map<ServerReference<any>, number>,
+  writtenObjects: WeakMap<Reference, string>,
+  temporaryReferences: void | TemporaryReferenceSet,
+  identifierPrefix: string,
+  identifierCount: number,
+  taintCleanupQueue: Array<string | bigint>,
+  onError: (error: mixed) => ?string,
+  onAllReady: () => void,
+  onFatalError: mixed => void,
+  // Profiling-only
+  timeOrigin: number,
+  abortTime: number,
+  // DEV-only
+  pendingDebugChunks: number,
+  completedDebugChunks: Array<Chunk | BinaryChunk>,
+  debugDestination: null | Destination,
+  environmentName: () => string,
+  filterStackFrame: (
+    url: string,
+    functionName: string,
+    lineNumber: number,
+    columnNumber: number,
+  ) => boolean,
+  didWarnForKey: null | WeakSet<ReactComponentInfo>,
+  writtenDebugObjects: WeakMap<Reference, string>,
+  deferredDebugObjects: null | DeferredDebugStore,
+};
+
+const {
+  TaintRegistryObjects,
+  TaintRegistryValues,
+  TaintRegistryByteLengths,
+  TaintRegistryPendingRequests,
+} = ReactSharedInternals;
+
+function throwTaintViolation(message: string) {
+  // eslint-disable-next-line react-internal/prod-error-codes
+  throw new Error(message);
+}
+
+function cleanupTaintQueue(request: Request): void {
+  const cleanupQueue = request.taintCleanupQueue;
+  TaintRegistryPendingRequests.delete(cleanupQueue);
+  for (let i = 0; i < cleanupQueue.length; i++) {
+    const entryValue = cleanupQueue[i];
+    const entry = TaintRegistryValues.get(entryValue);
+    if (entry !== undefined) {
+      if (entry.count === 1) {
+        TaintRegistryValues.delete(entryValue);
+      } else {
+        entry.count--;
+      }
+    }
+  }
+  cleanupQueue.length = 0;
+}
+
+function defaultErrorHandler(error: mixed) {
+  console['error'](error);
+  // Don't transform to our wrapper
+}
+
+function RequestInstance(
+  this: $FlowFixMe,
+  type: 20 | 21,
+  model: ReactClientValue,
+  bundlerConfig: ClientManifest,
+  onError: void | ((error: mixed) => ?string),
+  onAllReady: () => void,
+  onFatalError: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  environmentName: void | string | (() => string), // DEV-only
+  filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only
+  keepDebugAlive: boolean, // DEV-only
+) {
+  if (
+    ReactSharedInternals.A !== null &&
+    ReactSharedInternals.A !== DefaultAsyncDispatcher
+  ) {
+    throw new Error(
+      'Currently React only supports one RSC renderer at a time.',
+    );
+  }
+  ReactSharedInternals.A = DefaultAsyncDispatcher;
+  if (__DEV__) {
+    // Unlike Fizz or Fiber, we don't reset this and just keep it on permanently.
+    // This lets it act more like the AsyncDispatcher so that we can get the
+    // stack asynchronously too.
+    ReactSharedInternals.getCurrentStack = getCurrentStackInDEV;
+  }
+
+  const abortSet: Set<Task> = new Set();
+  const pingedTasks: Array<Task> = [];
+  const cleanupQueue: Array<string | bigint> = [];
+  if (enableTaint) {
+    TaintRegistryPendingRequests.add(cleanupQueue);
+  }
+  const hints = createHints();
+  this.type = type;
+  this.status = OPENING;
+  this.flushScheduled = false;
+  this.fatalError = null;
+  this.destination = null;
+  this.bundlerConfig = bundlerConfig;
+  this.cache = new Map();
+  this.cacheController = new AbortController();
+  this.nextChunkId = 0;
+  this.pendingChunks = 0;
+  this.hints = hints;
+  this.abortableTasks = abortSet;
+  this.pingedTasks = pingedTasks;
+  this.completedImportChunks = ([]: Array<Chunk>);
+  this.completedHintChunks = ([]: Array<Chunk>);
+  this.completedRegularChunks = ([]: Array<Chunk | BinaryChunk>);
+  this.completedErrorChunks = ([]: Array<Chunk>);
+  this.writtenSymbols = new Map();
+  this.writtenClientReferences = new Map();
+  this.writtenServerReferences = new Map();
+  this.writtenObjects = new WeakMap();
+  this.temporaryReferences = temporaryReferences;
+  this.identifierPrefix = identifierPrefix || '';
+  this.identifierCount = 1;
+  this.taintCleanupQueue = cleanupQueue;
+  this.onError = onError === undefined ? defaultErrorHandler : onError;
+  this.onAllReady = onAllReady;
+  this.onFatalError = onFatalError;
+
+  if (__DEV__) {
+    this.pendingDebugChunks = 0;
+    this.completedDebugChunks = ([]: Array<Chunk>);
+    this.debugDestination = null;
+    this.environmentName =
+      environmentName === undefined
+        ? () => 'Server'
+        : typeof environmentName !== 'function'
+          ? () => environmentName
+          : environmentName;
+    this.filterStackFrame =
+      filterStackFrame === undefined
+        ? defaultFilterStackFrame
+        : filterStackFrame;
+    this.didWarnForKey = null;
+    this.writtenDebugObjects = new WeakMap();
+    this.deferredDebugObjects = keepDebugAlive
+      ? {
+          retained: new Map(),
+          existing: new Map(),
+        }
+      : null;
+  }
+
+  let timeOrigin: number;
+  if (
+    enableProfilerTimer &&
+    (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+  ) {
+    // We start by serializing the time origin. Any future timestamps will be
+    // emitted relatively to this origin. Instead of using performance.timeOrigin
+    // as this origin, we use the timestamp at the start of the request.
+    // This avoids leaking unnecessary information like how long the server has
+    // been running and allows for more compact representation of each timestamp.
+    // The time origin is stored as an offset in the time space of this environment.
+    timeOrigin = this.timeOrigin = performance.now();
+    emitTimeOriginChunk(
+      this,
+      timeOrigin +
+        // $FlowFixMe[prop-missing]
+        performance.timeOrigin,
+    );
+    this.abortTime = -0.0;
+  } else {
+    timeOrigin = 0;
+  }
+
+  const rootTask = createTask(
+    this,
+    model,
+    null,
+    false,
+    createRootFormatContext(),
+    abortSet,
+    timeOrigin,
+    null,
+    null,
+    null,
+  );
+  pingedTasks.push(rootTask);
+}
+
+export function createRequest(
+  model: ReactClientValue,
+  bundlerConfig: ClientManifest,
+  onError: void | ((error: mixed) => ?string),
+  identifierPrefix: void | string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  environmentName: void | string | (() => string), // DEV-only
+  filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only
+  keepDebugAlive: boolean, // DEV-only
+): Request {
+  if (__DEV__) {
+    resetOwnerStackLimit();
+  }
+
+  // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
+  return new RequestInstance(
+    RENDER,
+    model,
+    bundlerConfig,
+    onError,
+    noop,
+    noop,
+    identifierPrefix,
+    temporaryReferences,
+    environmentName,
+    filterStackFrame,
+    keepDebugAlive,
+  );
+}
+
+export function createPrerenderRequest(
+  model: ReactClientValue,
+  bundlerConfig: ClientManifest,
+  onAllReady: () => void,
+  onFatalError: () => void,
+  onError: void | ((error: mixed) => ?string),
+  identifierPrefix: void | string,
+  temporaryReferences: void | TemporaryReferenceSet,
+  environmentName: void | string | (() => string), // DEV-only
+  filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only
+  keepDebugAlive: boolean, // DEV-only
+): Request {
+  if (__DEV__) {
+    resetOwnerStackLimit();
+  }
+
+  // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
+  return new RequestInstance(
+    PRERENDER,
+    model,
+    bundlerConfig,
+    onError,
+    onAllReady,
+    onFatalError,
+    identifierPrefix,
+    temporaryReferences,
+    environmentName,
+    filterStackFrame,
+    keepDebugAlive,
+  );
+}
+
+let currentRequest: null | Request = null;
+
+export function resolveRequest(): null | Request {
+  if (currentRequest) return currentRequest;
+  if (supportsRequestStorage) {
+    const store = requestStorage.getStore();
+    if (store) return store;
+  }
+  return null;
+}
+
+function isTypedArray(value: any): boolean {
+  if (value instanceof ArrayBuffer) {
+    return true;
+  }
+  if (value instanceof Int8Array) {
+    return true;
+  }
+  if (value instanceof Uint8Array) {
+    return true;
+  }
+  if (value instanceof Uint8ClampedArray) {
+    return true;
+  }
+  if (value instanceof Int16Array) {
+    return true;
+  }
+  if (value instanceof Uint16Array) {
+    return true;
+  }
+  if (value instanceof Int32Array) {
+    return true;
+  }
+  if (value instanceof Uint32Array) {
+    return true;
+  }
+  if (value instanceof Float32Array) {
+    return true;
+  }
+  if (value instanceof Float64Array) {
+    return true;
+  }
+  if (value instanceof BigInt64Array) {
+    return true;
+  }
+  if (value instanceof BigUint64Array) {
+    return true;
+  }
+  if (value instanceof DataView) {
+    return true;
+  }
+  return false;
+}
+
+function serializeDebugThenable(
+  request: Request,
+  counter: {objectLimit: number},
+  thenable: Thenable<any>,
+): string {
+  // Like serializeThenable but for renderDebugModel
+  request.pendingDebugChunks++;
+  const id = request.nextChunkId++;
+  const ref = serializePromiseID(id);
+  request.writtenDebugObjects.set(thenable, ref);
+
+  switch (thenable.status) {
+    case 'fulfilled': {
+      emitOutlinedDebugModelChunk(request, id, counter, thenable.value);
+      return ref;
+    }
+    case 'rejected': {
+      const x = thenable.reason;
+      // We don't log these errors since they didn't actually throw into Flight.
+      const digest = '';
+      emitErrorChunk(request, id, digest, x, true, null);
+      return ref;
+    }
+  }
+
+  if (request.status === ABORTING) {
+    // Ensure that we have time to emit the halt chunk if we're sync aborting.
+    emitDebugHaltChunk(request, id);
+    return ref;
+  }
+
+  const deferredDebugObjects = request.deferredDebugObjects;
+  if (deferredDebugObjects !== null) {
+    // For Promises that are not yet resolved, we always defer them. They are async anyway so it's
+    // safe to defer them. This also ensures that we don't eagerly call .then() on a Promise that
+    // otherwise wouldn't have initialized. It also ensures that we don't "handle" a rejection
+    // that otherwise would have triggered unhandled rejection.
+    deferredDebugObjects.retained.set(id, (thenable: any));
+    const deferredRef = '$Y@' + id.toString(16);
+    // We can now refer to the deferred object in the future.
+    request.writtenDebugObjects.set(thenable, deferredRef);
+    return deferredRef;
+  }
+
+  let cancelled = false;
+
+  thenable.then(
+    value => {
+      if (cancelled) {
+        return;
+      }
+      cancelled = true;
+      if (request.status === ABORTING) {
+        emitDebugHaltChunk(request, id);
+        enqueueFlush(request);
+        return;
+      }
+      if (
+        (isArray(value) && value.length > 200) ||
+        (isTypedArray(value) && value.byteLength > 1000)
+      ) {
+        // If this should be deferred, but we don't have a debug channel installed
+        // it would get omitted. We can't omit outlined models but we can avoid
+        // resolving the Promise at all by halting it.
+        emitDebugHaltChunk(request, id);
+        enqueueFlush(request);
+        return;
+      }
+      emitOutlinedDebugModelChunk(request, id, counter, value);
+      enqueueFlush(request);
+    },
+    reason => {
+      if (cancelled) {
+        return;
+      }
+      cancelled = true;
+      if (request.status === ABORTING) {
+        emitDebugHaltChunk(request, id);
+        enqueueFlush(request);
+        return;
+      }
+      // We don't log these errors since they didn't actually throw into Flight.
+      const digest = '';
+      emitErrorChunk(request, id, digest, reason, true, null);
+      enqueueFlush(request);
+    },
+  );
+
+  // We don't use scheduleMicrotask here because it doesn't actually schedule a microtask
+  // in all our configs which is annoying.
+  Promise.resolve().then(() => {
+    // If we don't resolve the Promise within a microtask. Leave it as hanging since we
+    // don't want to block the render forever on a Promise that might never resolve.
+    if (cancelled) {
+      return;
+    }
+    cancelled = true;
+    emitDebugHaltChunk(request, id);
+    enqueueFlush(request);
+    // Clean up the request so we don't leak this forever.
+    request = (null: any);
+    counter = (null: any);
+  });
+
+  return ref;
+}
+
+function emitRequestedDebugThenable(
+  request: Request,
+  id: number,
+  counter: {objectLimit: number},
+  thenable: Thenable<any>,
+): void {
+  thenable.then(
+    value => {
+      if (request.status === ABORTING) {
+        emitDebugHaltChunk(request, id);
+        enqueueFlush(request);
+        return;
+      }
+      emitOutlinedDebugModelChunk(request, id, counter, value);
+      enqueueFlush(request);
+    },
+    reason => {
+      if (request.status === ABORTING) {
+        emitDebugHaltChunk(request, id);
+        enqueueFlush(request);
+        return;
+      }
+      // We don't log these errors since they didn't actually throw into Flight.
+      const digest = '';
+      emitErrorChunk(request, id, digest, reason, true, null);
+      enqueueFlush(request);
+    },
+  );
+}
+
+function serializeThenable(
+  request: Request,
+  task: Task,
+  thenable: Thenable<any>,
+): number {
+  const newTask = createTask(
+    request,
+    (thenable: any), // will be replaced by the value before we retry. used for debug info.
+    task.keyPath, // the server component sequence continues through Promise-as-a-child.
+    task.implicitSlot,
+    task.formatContext,
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? task.time
+      : 0,
+    __DEV__ ? task.debugOwner : null,
+    __DEV__ ? task.debugStack : null,
+    __DEV__ ? task.debugTask : null,
+  );
+
+  switch (thenable.status) {
+    case 'fulfilled': {
+      forwardDebugInfoFromThenable(request, newTask, thenable, null, null);
+      // We have the resolved value, we can go ahead and schedule it for serialization.
+      newTask.model = thenable.value;
+      pingTask(request, newTask);
+      return newTask.id;
+    }
+    case 'rejected': {
+      forwardDebugInfoFromThenable(request, newTask, thenable, null, null);
+      const x = thenable.reason;
+      erroredTask(request, newTask, x);
+      return newTask.id;
+    }
+    default: {
+      if (request.status === ABORTING) {
+        // We can no longer accept any resolved values
+        request.abortableTasks.delete(newTask);
+        if (enableHalt && request.type === PRERENDER) {
+          haltTask(newTask, request);
+          finishHaltedTask(newTask, request);
+        } else {
+          const errorId: number = (request.fatalError: any);
+          abortTask(newTask, request, errorId);
+          finishAbortedTask(newTask, request, errorId);
+        }
+        return newTask.id;
+      }
+      if (typeof thenable.status === 'string') {
+        // Only instrument the thenable if the status if not defined. If
+        // it's defined, but an unknown value, assume it's been instrumented by
+        // some custom userspace implementation. We treat it as "pending".
+        break;
+      }
+      const pendingThenable: PendingThenable<mixed> = (thenable: any);
+      pendingThenable.status = 'pending';
+      pendingThenable.then(
+        fulfilledValue => {
+          if (thenable.status === 'pending') {
+            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = fulfilledValue;
+          }
+        },
+        (error: mixed) => {
+          if (thenable.status === 'pending') {
+            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          }
+        },
+      );
+      break;
+    }
+  }
+
+  thenable.then(
+    value => {
+      forwardDebugInfoFromCurrentContext(request, newTask, thenable);
+      newTask.model = value;
+      pingTask(request, newTask);
+    },
+    reason => {
+      if (newTask.status === PENDING) {
+        if (
+          enableProfilerTimer &&
+          (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+        ) {
+          // If this is async we need to time when this task finishes.
+          newTask.timed = true;
+        }
+        // We expect that the only status it might be otherwise is ABORTED.
+        // When we abort we emit chunks in each pending task slot and don't need
+        // to do so again here.
+        erroredTask(request, newTask, reason);
+        enqueueFlush(request);
+      }
+    },
+  );
+
+  return newTask.id;
+}
+
+function serializeReadableStream(
+  request: Request,
+  task: Task,
+  stream: ReadableStream,
+): string {
+  // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+  // receiving side. It also implies that different chunks can be split up or merged as opposed
+  // to a readable stream that happens to have Uint8Array as the type which might expect it to be
+  // received in the same slices.
+  // $FlowFixMe: This is a Node.js extension.
+  let supportsBYOB: void | boolean = stream.supportsBYOB;
+  if (supportsBYOB === undefined) {
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      stream.getReader({mode: 'byob'}).releaseLock();
+      supportsBYOB = true;
+    } catch (x) {
+      supportsBYOB = false;
+    }
+  }
+  // At this point supportsBYOB is guaranteed to be a boolean.
+  const isByteStream: boolean = supportsBYOB;
+
+  const reader = stream.getReader();
+
+  // This task won't actually be retried. We just use it to attempt synchronous renders.
+  const streamTask = createTask(
+    request,
+    task.model,
+    task.keyPath,
+    task.implicitSlot,
+    task.formatContext,
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? task.time
+      : 0,
+    __DEV__ ? task.debugOwner : null,
+    __DEV__ ? task.debugStack : null,
+    __DEV__ ? task.debugTask : null,
+  );
+
+  // The task represents the Stop row. This adds a Start row.
+  request.pendingChunks++;
+  const startStreamRow =
+    streamTask.id.toString(16) + ':' + (isByteStream ? 'r' : 'R') + '\n';
+  request.completedRegularChunks.push(stringToChunk(startStreamRow));
+
+  function progress(entry: {done: boolean, value: ReactClientValue, ...}) {
+    if (streamTask.status !== PENDING) {
+      return;
+    }
+
+    if (entry.done) {
+      streamTask.status = COMPLETED;
+      const endStreamRow = streamTask.id.toString(16) + ':C\n';
+      request.completedRegularChunks.push(stringToChunk(endStreamRow));
+      request.abortableTasks.delete(streamTask);
+      request.cacheController.signal.removeEventListener('abort', abortStream);
+      enqueueFlush(request);
+      callOnAllReadyIfReady(request);
+    } else {
+      try {
+        request.pendingChunks++;
+        streamTask.model = entry.value;
+        if (isByteStream) {
+          // Chunks of byte streams are always Uint8Array instances.
+          const chunk: Uint8Array = (streamTask.model: any);
+          emitTypedArrayChunk(request, streamTask.id, 'b', chunk, false);
+        } else {
+          tryStreamTask(request, streamTask);
+        }
+        enqueueFlush(request);
+        reader.read().then(progress, error);
+      } catch (x) {
+        error(x);
+      }
+    }
+  }
+  function error(reason: mixed) {
+    if (streamTask.status !== PENDING) {
+      return;
+    }
+    request.cacheController.signal.removeEventListener('abort', abortStream);
+    erroredTask(request, streamTask, reason);
+    enqueueFlush(request);
+
+    // $FlowFixMe should be able to pass mixed
+    reader.cancel(reason).then(error, error);
+  }
+  function abortStream() {
+    if (streamTask.status !== PENDING) {
+      return;
+    }
+    const signal = request.cacheController.signal;
+    signal.removeEventListener('abort', abortStream);
+    const reason = signal.reason;
+    if (enableHalt && request.type === PRERENDER) {
+      request.abortableTasks.delete(streamTask);
+      haltTask(streamTask, request);
+      finishHaltedTask(streamTask, request);
+    } else {
+      // TODO: Make this use abortTask() instead.
+      erroredTask(request, streamTask, reason);
+      enqueueFlush(request);
+    }
+    // $FlowFixMe should be able to pass mixed
+    reader.cancel(reason).then(error, error);
+  }
+
+  request.cacheController.signal.addEventListener('abort', abortStream);
+  reader.read().then(progress, error);
+  return serializeByValueID(streamTask.id);
+}
+
+function serializeAsyncIterable(
+  request: Request,
+  task: Task,
+  iterable: $AsyncIterable<ReactClientValue, ReactClientValue, void>,
+  iterator: $AsyncIterator<ReactClientValue, ReactClientValue, void>,
+): string {
+  // Generators/Iterators are Iterables but they're also their own iterator
+  // functions. If that's the case, we treat them as single-shot. Otherwise,
+  // we assume that this iterable might be a multi-shot and allow it to be
+  // iterated more than once on the client.
+  const isIterator = iterable === iterator;
+
+  // This task won't actually be retried. We just use it to attempt synchronous renders.
+  const streamTask = createTask(
+    request,
+    task.model,
+    task.keyPath,
+    task.implicitSlot,
+    task.formatContext,
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? task.time
+      : 0,
+    __DEV__ ? task.debugOwner : null,
+    __DEV__ ? task.debugStack : null,
+    __DEV__ ? task.debugTask : null,
+  );
+
+  if (__DEV__) {
+    const debugInfo: ?ReactDebugInfo = (iterable: any)._debugInfo;
+    if (debugInfo) {
+      forwardDebugInfo(request, streamTask, debugInfo);
+    }
+  }
+
+  // The task represents the Stop row. This adds a Start row.
+  request.pendingChunks++;
+  const startStreamRow =
+    streamTask.id.toString(16) + ':' + (isIterator ? 'x' : 'X') + '\n';
+  request.completedRegularChunks.push(stringToChunk(startStreamRow));
+
+  function progress(
+    entry:
+      | {done: false, +value: ReactClientValue, ...}
+      | {done: true, +value: ReactClientValue, ...},
+  ) {
+    if (streamTask.status !== PENDING) {
+      return;
+    }
+
+    if (entry.done) {
+      streamTask.status = COMPLETED;
+      let endStreamRow;
+      if (entry.value === undefined) {
+        endStreamRow = streamTask.id.toString(16) + ':C\n';
+      } else {
+        // Unlike streams, the last value may not be undefined. If it's not
+        // we outline it and encode a reference to it in the closing instruction.
+        try {
+          const chunkId = outlineModel(request, entry.value);
+          endStreamRow =
+            streamTask.id.toString(16) +
+            ':C' +
+            stringify(serializeByValueID(chunkId)) +
+            '\n';
+        } catch (x) {
+          error(x);
+          return;
+        }
+      }
+      request.completedRegularChunks.push(stringToChunk(endStreamRow));
+      request.abortableTasks.delete(streamTask);
+      request.cacheController.signal.removeEventListener(
+        'abort',
+        abortIterable,
+      );
+      enqueueFlush(request);
+      callOnAllReadyIfReady(request);
+    } else {
+      try {
+        streamTask.model = entry.value;
+        request.pendingChunks++;
+        tryStreamTask(request, streamTask);
+        enqueueFlush(request);
+        if (__DEV__) {
+          callIteratorInDEV(iterator, progress, error);
+        } else {
+          iterator.next().then(progress, error);
+        }
+      } catch (x) {
+        error(x);
+        return;
+      }
+    }
+  }
+  function error(reason: mixed) {
+    if (streamTask.status !== PENDING) {
+      return;
+    }
+    request.cacheController.signal.removeEventListener('abort', abortIterable);
+    erroredTask(request, streamTask, reason);
+    enqueueFlush(request);
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+  function abortIterable() {
+    if (streamTask.status !== PENDING) {
+      return;
+    }
+    const signal = request.cacheController.signal;
+    signal.removeEventListener('abort', abortIterable);
+    const reason = signal.reason;
+    if (enableHalt && request.type === PRERENDER) {
+      request.abortableTasks.delete(streamTask);
+      haltTask(streamTask, request);
+      finishHaltedTask(streamTask, request);
+    } else {
+      // TODO: Make this use abortTask() instead.
+      erroredTask(request, streamTask, signal.reason);
+      enqueueFlush(request);
+    }
+    if (typeof (iterator: any).throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+  request.cacheController.signal.addEventListener('abort', abortIterable);
+  if (__DEV__) {
+    callIteratorInDEV(iterator, progress, error);
+  } else {
+    iterator.next().then(progress, error);
+  }
+  return serializeByValueID(streamTask.id);
+}
+
+export function emitHint<Code: HintCode>(
+  request: Request,
+  code: Code,
+  model: HintModel<Code>,
+): void {
+  emitHintChunk(request, code, model);
+  enqueueFlush(request);
+}
+
+export function getHints(request: Request): Hints {
+  return request.hints;
+}
+
+export function getCache(request: Request): Map<Function, mixed> {
+  return request.cache;
+}
+
+function readThenable<T>(thenable: Thenable<T>): T {
+  if (thenable.status === 'fulfilled') {
+    return thenable.value;
+  } else if (thenable.status === 'rejected') {
+    throw thenable.reason;
+  }
+  throw thenable;
+}
+
+function createLazyWrapperAroundWakeable(
+  request: Request,
+  task: Task,
+  wakeable: Wakeable,
+) {
+  // This is a temporary fork of the `use` implementation until we accept
+  // promises everywhere.
+  const thenable: Thenable<mixed> = (wakeable: any);
+  switch (thenable.status) {
+    case 'fulfilled': {
+      forwardDebugInfoFromThenable(request, task, thenable, null, null);
+      return thenable.value;
+    }
+    case 'rejected':
+      forwardDebugInfoFromThenable(request, task, thenable, null, null);
+      break;
+    default: {
+      if (typeof thenable.status === 'string') {
+        // Only instrument the thenable if the status if not defined. If
+        // it's defined, but an unknown value, assume it's been instrumented by
+        // some custom userspace implementation. We treat it as "pending".
+        break;
+      }
+      const pendingThenable: PendingThenable<mixed> = (thenable: any);
+      pendingThenable.status = 'pending';
+      pendingThenable.then(
+        fulfilledValue => {
+          forwardDebugInfoFromCurrentContext(request, task, thenable);
+          if (thenable.status === 'pending') {
+            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = fulfilledValue;
+          }
+        },
+        (error: mixed) => {
+          forwardDebugInfoFromCurrentContext(request, task, thenable);
+          if (thenable.status === 'pending') {
+            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          }
+        },
+      );
+      break;
+    }
+  }
+  const lazyType: LazyComponent<any, Thenable<any>> = {
+    $$typeof: REACT_LAZY_TYPE,
+    _payload: thenable,
+    _init: readThenable,
+  };
+  return lazyType;
+}
+
+function callWithDebugContextInDEV<A, T>(
+  request: Request,
+  task: Task,
+  callback: A => T,
+  arg: A,
+): T {
+  // We don't have a Server Component instance associated with this callback and
+  // the nearest context is likely a Client Component being serialized. We create
+  // a fake owner during this callback so we can get the stack trace from it.
+  // This also gets sent to the client as the owner for the replaying log.
+  const componentDebugInfo: ReactComponentInfo = {
+    name: '',
+    env: task.environmentName,
+    key: null,
+    owner: task.debugOwner,
+  };
+  // $FlowFixMe[cannot-write]
+  componentDebugInfo.stack =
+    task.debugStack === null
+      ? null
+      : filterStackTrace(request, parseStackTrace(task.debugStack, 1));
+  // $FlowFixMe[cannot-write]
+  componentDebugInfo.debugStack = task.debugStack;
+  // $FlowFixMe[cannot-write]
+  componentDebugInfo.debugTask = task.debugTask;
+  const debugTask = task.debugTask;
+  // We don't need the async component storage context here so we only set the
+  // synchronous tracking of owner.
+  setCurrentOwner(componentDebugInfo);
+  try {
+    if (debugTask) {
+      return debugTask.run(callback.bind(null, arg));
+    }
+    return callback(arg);
+  } finally {
+    setCurrentOwner(null);
+  }
+}
+
+const voidHandler = () => {};
+
+function processServerComponentReturnValue(
+  request: Request,
+  task: Task,
+  Component: any,
+  result: any,
+): any {
+  // A Server Component's return value has a few special properties due to being
+  // in the return position of a Component. We convert them here.
+  if (
+    typeof result !== 'object' ||
+    result === null ||
+    isClientReference(result)
+  ) {
+    return result;
+  }
+
+  if (typeof result.then === 'function') {
+    // When the return value is in children position we can resolve it immediately,
+    // to its value without a wrapper if it's synchronously available.
+    const thenable: Thenable<any> = result;
+    if (__DEV__) {
+      // If the thenable resolves to an element, then it was in a static position,
+      // the return value of a Server Component. That doesn't need further validation
+      // of keys. The Server Component itself would have had a key.
+      thenable.then(resolvedValue => {
+        if (
+          typeof resolvedValue === 'object' &&
+          resolvedValue !== null &&
+          resolvedValue.$$typeof === REACT_ELEMENT_TYPE
+        ) {
+          resolvedValue._store.validated = 1;
+        }
+      }, voidHandler);
+    }
+    // TODO: Once we accept Promises as children on the client, we can just return
+    // the thenable here.
+    return createLazyWrapperAroundWakeable(request, task, result);
+  }
+
+  if (__DEV__) {
+    if ((result: any).$$typeof === REACT_ELEMENT_TYPE) {
+      // If the server component renders to an element, then it was in a static position.
+      // That doesn't need further validation of keys. The Server Component itself would
+      // have had a key.
+      (result: any)._store.validated = 1;
+    }
+  }
+
+  // Normally we'd serialize an Iterator/AsyncIterator as a single-shot which is not compatible
+  // to be rendered as a React Child. However, because we have the function to recreate
+  // an iterable from rendering the element again, we can effectively treat it as multi-
+  // shot. Therefore we treat this as an Iterable/AsyncIterable, whether it was one or not, by
+  // adding a wrapper so that this component effectively renders down to an AsyncIterable.
+  const iteratorFn = getIteratorFn(result);
+  if (iteratorFn) {
+    const iterableChild = result;
+    const multiShot = {
+      [Symbol.iterator]: function () {
+        const iterator = iteratorFn.call(iterableChild);
+        if (__DEV__) {
+          // If this was an Iterator but not a GeneratorFunction we warn because
+          // it might have been a mistake. Technically you can make this mistake with
+          // GeneratorFunctions and even single-shot Iterables too but it's extra
+          // tempting to try to return the value from a generator.
+          if (iterator === iterableChild) {
+            const isGeneratorComponent =
+              // $FlowIgnore[method-unbinding]
+              Object.prototype.toString.call(Component) ===
+                '[object GeneratorFunction]' &&
+              // $FlowIgnore[method-unbinding]
+              Object.prototype.toString.call(iterableChild) ===
+                '[object Generator]';
+            if (!isGeneratorComponent) {
+              callWithDebugContextInDEV(request, task, () => {
+                console.error(
+                  'Returning an Iterator from a Server Component is not supported ' +
+                    'since it cannot be looped over more than once. ',
+                );
+              });
+            }
+          }
+        }
+        return (iterator: any);
+      },
+    };
+    if (__DEV__) {
+      (multiShot: any)._debugInfo = iterableChild._debugInfo;
+    }
+    return multiShot;
+  }
+  if (
+    typeof (result: any)[ASYNC_ITERATOR] === 'function' &&
+    (typeof ReadableStream !== 'function' ||
+      !(result instanceof ReadableStream))
+  ) {
+    const iterableChild = result;
+    const multishot = {
+      [ASYNC_ITERATOR]: function () {
+        const iterator = (iterableChild: any)[ASYNC_ITERATOR]();
+        if (__DEV__) {
+          // If this was an AsyncIterator but not an AsyncGeneratorFunction we warn because
+          // it might have been a mistake. Technically you can make this mistake with
+          // AsyncGeneratorFunctions and even single-shot AsyncIterables too but it's extra
+          // tempting to try to return the value from a generator.
+          if (iterator === iterableChild) {
+            const isGeneratorComponent =
+              // $FlowIgnore[method-unbinding]
+              Object.prototype.toString.call(Component) ===
+                '[object AsyncGeneratorFunction]' &&
+              // $FlowIgnore[method-unbinding]
+              Object.prototype.toString.call(iterableChild) ===
+                '[object AsyncGenerator]';
+            if (!isGeneratorComponent) {
+              callWithDebugContextInDEV(request, task, () => {
+                console.error(
+                  'Returning an AsyncIterator from a Server Component is not supported ' +
+                    'since it cannot be looped over more than once. ',
+                );
+              });
+            }
+          }
+        }
+        return iterator;
+      },
+    };
+    if (__DEV__) {
+      (multishot: any)._debugInfo = iterableChild._debugInfo;
+    }
+    return multishot;
+  }
+  return result;
+}
+
+function renderFunctionComponent<Props>(
+  request: Request,
+  task: Task,
+  key: ReactKey,
+  Component: (p: Props, arg: void) => any,
+  props: Props,
+  validated: number, // DEV-only
+): ReactJSONValue {
+  // Reset the task's thenable state before continuing, so that if a later
+  // component suspends we can reuse the same task object. If the same
+  // component suspends again, the thenable state will be restored.
+  const prevThenableState = task.thenableState;
+  task.thenableState = null;
+
+  let result;
+
+  let componentDebugInfo: ReactComponentInfo;
+  if (__DEV__) {
+    if (!canEmitDebugInfo) {
+      // We don't have a chunk to assign debug info. We need to outline this
+      // component to assign it an ID.
+      return outlineTask(request, task);
+    } else if (prevThenableState !== null) {
+      // This is a replay and we've already emitted the debug info of this component
+      // in the first pass. We skip emitting a duplicate line.
+      // As a hack we stashed the previous component debug info on this object in DEV.
+      componentDebugInfo = (prevThenableState: any)._componentDebugInfo;
+    } else {
+      // This is a new component in the same task so we can emit more debug info.
+      const componentDebugID = task.id;
+      const componentName =
+        (Component: any).displayName || Component.name || '';
+      const componentEnv = (0, request.environmentName)();
+      request.pendingChunks++;
+      componentDebugInfo = ({
+        name: componentName,
+        env: componentEnv,
+        key: key,
+        owner: task.debugOwner,
+      }: ReactComponentInfo);
+      // $FlowFixMe[cannot-write]
+      componentDebugInfo.stack =
+        task.debugStack === null
+          ? null
+          : filterStackTrace(request, parseStackTrace(task.debugStack, 1));
+      // $FlowFixMe[cannot-write]
+      componentDebugInfo.props = props;
+      // $FlowFixMe[cannot-write]
+      componentDebugInfo.debugStack = task.debugStack;
+      // $FlowFixMe[cannot-write]
+      componentDebugInfo.debugTask = task.debugTask;
+
+      // We outline this model eagerly so that we can refer to by reference as an owner.
+      // If we had a smarter way to dedupe we might not have to do this if there ends up
+      // being no references to this as an owner.
+
+      outlineComponentInfo(request, componentDebugInfo);
+
+      // Track when we started rendering this component.
+      if (
+        enableProfilerTimer &&
+        (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ) {
+        advanceTaskTime(request, task, performance.now());
+      }
+
+      emitDebugChunk(request, componentDebugID, componentDebugInfo);
+
+      // We've emitted the latest environment for this task so we track that.
+      task.environmentName = componentEnv;
+
+      if (validated === 2) {
+        warnForMissingKey(request, key, componentDebugInfo, task.debugTask);
+      }
+    }
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
+    if (supportsComponentStorage) {
+      // Run the component in an Async Context that tracks the current owner.
+      if (task.debugTask) {
+        result = task.debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          componentStorage.run.bind(
+            componentStorage,
+            componentDebugInfo,
+            callComponentInDEV,
+            Component,
+            props,
+            componentDebugInfo,
+          ),
+        );
+      } else {
+        result = componentStorage.run(
+          componentDebugInfo,
+          callComponentInDEV,
+          Component,
+          props,
+          componentDebugInfo,
+        );
+      }
+    } else {
+      if (task.debugTask) {
+        result = task.debugTask.run(
+          callComponentInDEV.bind(null, Component, props, componentDebugInfo),
+        );
+      } else {
+        result = callComponentInDEV(Component, props, componentDebugInfo);
+      }
+    }
+  } else {
+    componentDebugInfo = (null: any);
+    prepareToUseHooksForComponent(prevThenableState, null);
+    // The secondArg is always undefined in Server Components since refs error early.
+    const secondArg = undefined;
+    result = Component(props, secondArg);
+  }
+
+  if (request.status === ABORTING) {
+    if (
+      typeof result === 'object' &&
+      result !== null &&
+      typeof result.then === 'function' &&
+      !isClientReference(result)
+    ) {
+      result.then(voidHandler, voidHandler);
+    }
+    // If we aborted during rendering we should interrupt the render but
+    // we don't need to provide an error because the renderer will encode
+    // the abort error as the reason.
+    // eslint-disable-next-line no-throw-literal
+    throw null;
+  }
+
+  if (__DEV__ || (enableProfilerTimer && enableAsyncDebugInfo)) {
+    // Forward any debug information for any Promises that we use():ed during the render.
+    // We do this at the end so that we don't keep doing this for each retry.
+    const trackedThenables = getTrackedThenablesAfterRendering();
+    if (trackedThenables !== null) {
+      const stacks: Array<Error> =
+        __DEV__ && enableAsyncDebugInfo
+          ? (trackedThenables: any)._stacks ||
+            ((trackedThenables: any)._stacks = [])
+          : (null: any);
+      for (let i = 0; i < trackedThenables.length; i++) {
+        const stack = __DEV__ && enableAsyncDebugInfo ? stacks[i] : null;
+        forwardDebugInfoFromThenable(
+          request,
+          task,
+          trackedThenables[i],
+          __DEV__ ? componentDebugInfo : null,
+          stack,
+        );
+      }
+    }
+  }
+
+  // Apply special cases.
+  result = processServerComponentReturnValue(request, task, Component, result);
+
+  if (__DEV__) {
+    // From this point on, the parent is the component we just rendered until we
+    // hit another JSX element.
+    task.debugOwner = componentDebugInfo;
+    // Unfortunately, we don't have a stack frame for this position. Conceptually
+    // it would be the location of the `return` inside component that just rendered.
+    task.debugStack = null;
+    task.debugTask = null;
+  }
+
+  // Track this element's key on the Server Component on the keyPath context..
+  const prevKeyPath = task.keyPath;
+  const prevImplicitSlot = task.implicitSlot;
+  if (key !== null) {
+    // Append the key to the path. Technically a null key should really add the child
+    // index. We don't do that to hold the payload small and implementation simple.
+    if (key === REACT_OPTIMISTIC_KEY || prevKeyPath === REACT_OPTIMISTIC_KEY) {
+      // The optimistic key is viral. It turns the whole key into optimistic if any part is.
+      task.keyPath = REACT_OPTIMISTIC_KEY;
+    } else {
+      task.keyPath = prevKeyPath === null ? key : prevKeyPath + ',' + key;
+    }
+  } else if (prevKeyPath === null) {
+    // This sequence of Server Components has no keys. This means that it was rendered
+    // in a slot that needs to assign an implicit key. Even if children below have
+    // explicit keys, they should not be used for the outer most key since it might
+    // collide with other slots in that set.
+    task.implicitSlot = true;
+  }
+  const json = renderModelDestructive(request, task, emptyRoot, '', result);
+  task.keyPath = prevKeyPath;
+  task.implicitSlot = prevImplicitSlot;
+  return json;
+}
+
+function warnForMissingKey(
+  request: Request,
+  key: ReactKey,
+  componentDebugInfo: ReactComponentInfo,
+  debugTask: null | ConsoleTask,
+): void {
+  if (__DEV__) {
+    let didWarnForKey = request.didWarnForKey;
+    if (didWarnForKey == null) {
+      didWarnForKey = request.didWarnForKey = new WeakSet();
+    }
+    const parentOwner = componentDebugInfo.owner;
+    if (parentOwner != null) {
+      if (didWarnForKey.has(parentOwner)) {
+        // We already warned for other children in this parent.
+        return;
+      }
+      didWarnForKey.add(parentOwner);
+    }
+
+    // Call with the server component as the currently rendering component
+    // for context.
+    const logKeyError = () => {
+      console.error(
+        'Each child in a list should have a unique "key" prop.' +
+          '%s%s See https://react.dev/link/warning-keys for more information.',
+        '',
+        '',
+      );
+    };
+
+    if (supportsComponentStorage) {
+      // Run the component in an Async Context that tracks the current owner.
+      if (debugTask) {
+        debugTask.run(
+          // $FlowFixMe[method-unbinding]
+          componentStorage.run.bind(
+            componentStorage,
+            componentDebugInfo,
+            callComponentInDEV,
+            logKeyError,
+            null,
+            componentDebugInfo,
+          ),
+        );
+      } else {
+        componentStorage.run(
+          componentDebugInfo,
+          callComponentInDEV,
+          logKeyError,
+          null,
+          componentDebugInfo,
+        );
+      }
+    } else {
+      if (debugTask) {
+        debugTask.run(
+          callComponentInDEV.bind(null, logKeyError, null, componentDebugInfo),
+        );
+      } else {
+        callComponentInDEV(logKeyError, null, componentDebugInfo);
+      }
+    }
+  }
+}
+
+function renderFragment(
+  request: Request,
+  task: Task,
+  children: $ReadOnlyArray<ReactClientValue>,
+): ReactJSONValue {
+  if (__DEV__) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (
+        child !== null &&
+        typeof child === 'object' &&
+        child.$$typeof === REACT_ELEMENT_TYPE
+      ) {
+        const element: ReactElement = (child: any);
+        if (element.key === null && !element._store.validated) {
+          element._store.validated = 2;
+        }
+      }
+    }
+  }
+
+  if (task.keyPath !== null) {
+    // We have a Server Component that specifies a key but we're now splitting
+    // the tree using a fragment.
+    const fragment = __DEV__
+      ? [
+          REACT_ELEMENT_TYPE,
+          REACT_FRAGMENT_TYPE,
+          task.keyPath,
+          {children},
+          null,
+          null,
+          0,
+        ]
+      : [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {children}];
+    if (!task.implicitSlot) {
+      // If this was keyed inside a set. I.e. the outer Server Component was keyed
+      // then we need to handle reorders of the whole set. To do this we need to wrap
+      // this array in a keyed Fragment.
+      return fragment;
+    }
+    // If the outer Server Component was implicit but then an inner one had a key
+    // we don't actually need to be able to move the whole set around. It'll always be
+    // in an implicit slot. The key only exists to be able to reset the state of the
+    // children. We could achieve the same effect by passing on the keyPath to the next
+    // set of components inside the fragment. This would also allow a keyless fragment
+    // reconcile against a single child.
+    // Unfortunately because of JSON.stringify, we can't call the recursive loop for
+    // each child within this context because we can't return a set with already resolved
+    // values. E.g. a string would get double encoded. Returning would pop the context.
+    // So instead, we wrap it with an unkeyed fragment and inner keyed fragment.
+    return [fragment];
+  }
+  // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here.
+  if (__DEV__) {
+    const debugInfo: ?ReactDebugInfo = (children: any)._debugInfo;
+    if (debugInfo) {
+      // If this came from Flight, forward any debug info into this new row.
+      if (!canEmitDebugInfo) {
+        // We don't have a chunk to assign debug info. We need to outline this
+        // component to assign it an ID.
+        return outlineTask(request, task);
+      } else {
+        // Forward any debug info we have the first time we see it.
+        // We do this after init so that we have received all the debug info
+        // from the server by the time we emit it.
+        forwardDebugInfo(request, task, debugInfo);
+      }
+      // Since we're rendering this array again, create a copy that doesn't
+      // have the debug info so we avoid outlining or emitting debug info again.
+      children = Array.from(children);
+    }
+  }
+  return children;
+}
+
+function renderAsyncFragment(
+  request: Request,
+  task: Task,
+  children: $AsyncIterable<ReactClientValue, ReactClientValue, void>,
+  getAsyncIterator: () => $AsyncIterator<any, any, any>,
+): ReactJSONValue {
+  if (task.keyPath !== null) {
+    // We have a Server Component that specifies a key but we're now splitting
+    // the tree using a fragment.
+    const fragment = __DEV__
+      ? [
+          REACT_ELEMENT_TYPE,
+          REACT_FRAGMENT_TYPE,
+          task.keyPath,
+          {children},
+          null,
+          null,
+          0,
+        ]
+      : [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {children}];
+    if (!task.implicitSlot) {
+      // If this was keyed inside a set. I.e. the outer Server Component was keyed
+      // then we need to handle reorders of the whole set. To do this we need to wrap
+      // this array in a keyed Fragment.
+      return fragment;
+    }
+    // If the outer Server Component was implicit but then an inner one had a key
+    // we don't actually need to be able to move the whole set around. It'll always be
+    // in an implicit slot. The key only exists to be able to reset the state of the
+    // children. We could achieve the same effect by passing on the keyPath to the next
+    // set of components inside the fragment. This would also allow a keyless fragment
+    // reconcile against a single child.
+    // Unfortunately because of JSON.stringify, we can't call the recursive loop for
+    // each child within this context because we can't return a set with already resolved
+    // values. E.g. a string would get double encoded. Returning would pop the context.
+    // So instead, we wrap it with an unkeyed fragment and inner keyed fragment.
+    return [fragment];
+  }
+
+  // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here.
+  const asyncIterator = getAsyncIterator.call(children);
+  return serializeAsyncIterable(request, task, children, asyncIterator);
+}
+
+function renderClientElement(
+  request: Request,
+  task: Task,
+  type: any,
+  key: ReactKey,
+  props: any,
+  validated: number, // DEV-only
+): ReactJSONValue {
+  // We prepend the terminal client element that actually gets serialized with
+  // the keys of any Server Components which are not serialized.
+  const keyPath = task.keyPath;
+  if (key === null) {
+    key = keyPath;
+  } else if (keyPath !== null) {
+    if (keyPath === REACT_OPTIMISTIC_KEY || key === REACT_OPTIMISTIC_KEY) {
+      // Optimistic key is viral and turns the whole key optimistic.
+      key = REACT_OPTIMISTIC_KEY;
+    } else {
+      key = keyPath + ',' + key;
+    }
+  }
+  let debugOwner = null;
+  let debugStack = null;
+  if (__DEV__) {
+    debugOwner = task.debugOwner;
+    if (debugOwner !== null) {
+      // Ensure we outline this owner if it is the first time we see it.
+      // So that we can refer to it directly.
+      outlineComponentInfo(request, debugOwner);
+    }
+    if (task.debugStack !== null) {
+      // Outline the debug stack so that we write to the completedDebugChunks instead.
+      debugStack = filterStackTrace(
+        request,
+        parseStackTrace(task.debugStack, 1),
+      );
+      const id = outlineDebugModel(
+        request,
+        {objectLimit: debugStack.length * 2 + 1},
+        debugStack,
+      );
+      // We also store this in the main dedupe set so that it can be referenced by inline React Elements.
+      request.writtenObjects.set(debugStack, serializeByValueID(id));
+    }
+  }
+  const element = __DEV__
+    ? [REACT_ELEMENT_TYPE, type, key, props, debugOwner, debugStack, validated]
+    : [REACT_ELEMENT_TYPE, type, key, props];
+  if (task.implicitSlot && key !== null) {
+    // The root Server Component had no key so it was in an implicit slot.
+    // If we had a key lower, it would end up in that slot with an explicit key.
+    // We wrap the element in a fragment to give it an implicit key slot with
+    // an inner explicit key.
+    return [element];
+  }
+  // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here. We also need to reset it once we render into an array
+  // or anything else too which we also get implicitly.
+  return element;
+}
+
+// Determines if we're currently rendering at the top level of a task and therefore
+// is safe to emit debug info associated with that task. Otherwise, if we're in
+// a nested context, we need to first outline.
+let canEmitDebugInfo: boolean = false;
+
+// Approximate string length of the currently serializing row.
+// Used to power outlining heuristics.
+let serializedSize = 0;
+const MAX_ROW_SIZE = 3200;
+
+function deferTask(request: Request, task: Task): ReactJSONValue {
+  // Like outlineTask but instead the item is scheduled to be serialized
+  // after its parent in the stream.
+  const newTask = createTask(
+    request,
+    task.model, // the currently rendering element
+    task.keyPath, // unlike outlineModel this one carries along context
+    task.implicitSlot,
+    task.formatContext,
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? task.time
+      : 0,
+    __DEV__ ? task.debugOwner : null,
+    __DEV__ ? task.debugStack : null,
+    __DEV__ ? task.debugTask : null,
+  );
+
+  pingTask(request, newTask);
+  return serializeLazyID(newTask.id);
+}
+
+function outlineTask(request: Request, task: Task): ReactJSONValue {
+  const newTask = createTask(
+    request,
+    task.model, // the currently rendering element
+    task.keyPath, // unlike outlineModel this one carries along context
+    task.implicitSlot,
+    task.formatContext,
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? task.time
+      : 0,
+    __DEV__ ? task.debugOwner : null,
+    __DEV__ ? task.debugStack : null,
+    __DEV__ ? task.debugTask : null,
+  );
+
+  retryTask(request, newTask);
+  if (newTask.status === COMPLETED) {
+    // We completed synchronously so we can refer to this by reference. This
+    // makes it behaves the same as prod during deserialization.
+    return serializeByValueID(newTask.id);
+  }
+  // This didn't complete synchronously so it wouldn't have even if we didn't
+  // outline it, so this would reduce to a lazy reference even in prod.
+  return serializeLazyID(newTask.id);
+}
+
+function outlineHaltedTask(
+  request: Request,
+  task: Task,
+  allowLazy: boolean,
+): ReactJSONValue {
+  // In the future if we track task state for resuming we'll maybe need to
+  // construnct an actual task here but since we're never going to retry it
+  // we just claim the id and serialize it according to the proper convention
+  const taskId = request.nextChunkId++;
+  if (allowLazy) {
+    // We're halting in a position that can handle a lazy reference
+    return serializeLazyID(taskId);
+  } else {
+    // We're halting in a position that needs a value reference
+    return serializeByValueID(taskId);
+  }
+}
+
+function renderElement(
+  request: Request,
+  task: Task,
+  type: any,
+  key: ReactKey,
+  ref: mixed,
+  props: any,
+  validated: number, // DEV only
+): ReactJSONValue {
+  if (ref !== null && ref !== undefined) {
+    // When the ref moves to the regular props object this will implicitly
+    // throw for functions. We could probably relax it to a DEV warning for other
+    // cases.
+    // TODO: `ref` is now just a prop when `enableRefAsProp` is on. Should we
+    // do what the above comment says?
+    throw new Error(
+      'Refs cannot be used in Server Components, nor passed to Client Components.',
+    );
+  }
+  if (__DEV__) {
+    jsxPropsParents.set(props, type);
+    if (typeof props.children === 'object' && props.children !== null) {
+      jsxChildrenParents.set(props.children, type);
+    }
+  }
+  if (
+    typeof type === 'function' &&
+    !isClientReference(type) &&
+    !isOpaqueTemporaryReference(type)
+  ) {
+    // This is a Server Component.
+    return renderFunctionComponent(request, task, key, type, props, validated);
+  } else if (type === REACT_FRAGMENT_TYPE && key === null) {
+    // For key-less fragments, we add a small optimization to avoid serializing
+    // it as a wrapper.
+    if (__DEV__ && validated === 2) {
+      // Create a fake owner node for the error stack.
+      const componentDebugInfo: ReactComponentInfo = {
+        name: 'Fragment',
+        env: (0, request.environmentName)(),
+        key: key,
+        owner: task.debugOwner,
+        stack:
+          task.debugStack === null
+            ? null
+            : filterStackTrace(request, parseStackTrace(task.debugStack, 1)),
+        props: props,
+        debugStack: task.debugStack,
+        debugTask: task.debugTask,
+      };
+      warnForMissingKey(request, key, componentDebugInfo, task.debugTask);
+    }
+    const prevImplicitSlot = task.implicitSlot;
+    if (task.keyPath === null) {
+      task.implicitSlot = true;
+    }
+    const json = renderModelDestructive(
+      request,
+      task,
+      emptyRoot,
+      '',
+      props.children,
+    );
+    task.implicitSlot = prevImplicitSlot;
+    return json;
+  } else if (
+    type != null &&
+    typeof type === 'object' &&
+    !isClientReference(type)
+  ) {
+    switch (type.$$typeof) {
+      case REACT_LAZY_TYPE: {
+        let wrappedType;
+        if (__DEV__) {
+          wrappedType = callLazyInitInDEV(type);
+        } else {
+          const payload = type._payload;
+          const init = type._init;
+          wrappedType = init(payload);
+        }
+        if (request.status === ABORTING) {
+          // lazy initializers are user code and could abort during render
+          // we don't wan to return any value resolved from the lazy initializer
+          // if it aborts so we interrupt rendering here
+          // eslint-disable-next-line no-throw-literal
+          throw null;
+        }
+        return renderElement(
+          request,
+          task,
+          wrappedType,
+          key,
+          ref,
+          props,
+          validated,
+        );
+      }
+      case REACT_FORWARD_REF_TYPE: {
+        return renderFunctionComponent(
+          request,
+          task,
+          key,
+          type.render,
+          props,
+          validated,
+        );
+      }
+      case REACT_MEMO_TYPE: {
+        return renderElement(
+          request,
+          task,
+          type.type,
+          key,
+          ref,
+          props,
+          validated,
+        );
+      }
+      case REACT_ELEMENT_TYPE: {
+        // This is invalid but we'll let the client determine that it is.
+        if (__DEV__) {
+          // Disable the key warning that would happen otherwise because this
+          // element gets serialized inside an array. We'll error later anyway.
+          type._store.validated = 1;
+        }
+      }
+    }
+  } else if (typeof type === 'string') {
+    const parentFormatContext = task.formatContext;
+    const newFormatContext = getChildFormatContext(
+      parentFormatContext,
+      type,
+      props,
+    );
+    if (parentFormatContext !== newFormatContext && props.children != null) {
+      // We've entered a new context. We need to create another Task which has
+      // the new context set up since it's not safe to push/pop in the middle of
+      // a tree. Additionally this means that any deduping within this tree now
+      // assumes the new context even if it's reused outside in a different context.
+      // We'll rely on this to dedupe the value later as we discover it again
+      // inside the returned element's tree.
+      outlineModelWithFormatContext(request, props.children, newFormatContext);
+    }
+  }
+  // For anything else, try it on the client instead.
+  // We don't know if the client will support it or not. This might error on the
+  // client or error during serialization but the stack will point back to the
+  // server.
+  return renderClientElement(request, task, type, key, props, validated);
+}
+
+function visitAsyncNode(
+  request: Request,
+  task: Task,
+  node: AsyncSequence,
+  visited: Map<
+    AsyncSequence | ReactDebugInfo,
+    void | null | PromiseNode | IONode,
+  >,
+  cutOff: number,
+): void | null | PromiseNode | IONode {
+  if (visited.has(node)) {
+    // It's possible to visit them same node twice when it's part of both an "awaited" path
+    // and a "previous" path. This also gracefully handles cycles which would be a bug.
+    return visited.get(node);
+  }
+  // Set it as visited early in case we see ourselves before returning.
+  visited.set(node, null);
+  const result = visitAsyncNodeImpl(request, task, node, visited, cutOff);
+  if (result !== null) {
+    // If we ended up with a value, let's use that value for future visits.
+    visited.set(node, result);
+  }
+  return result;
+}
+
+function visitAsyncNodeImpl(
+  request: Request,
+  task: Task,
+  node: AsyncSequence,
+  visited: Map<
+    AsyncSequence | ReactDebugInfo,
+    void | null | PromiseNode | IONode,
+  >,
+  cutOff: number,
+): void | null | PromiseNode | IONode {
+  if (node.end >= 0 && node.end <= request.timeOrigin) {
+    // This was already resolved when we started this render. It must have been either something
+    // that's part of a start up sequence or externally cached data. We exclude that information.
+    // The technique for debugging the effects of uncached data on the render is to simply uncache it.
+    return null;
+  }
+
+  let previousIONode: void | null | PromiseNode | IONode = null;
+  // First visit anything that blocked this sequence to start in the first place.
+  if (node.previous !== null) {
+    previousIONode = visitAsyncNode(
+      request,
+      task,
+      node.previous,
+      visited,
+      cutOff,
+    );
+    if (previousIONode === undefined) {
+      // Undefined is used as a signal that we found a suitable aborted node and we don't have to find
+      // further aborted nodes.
+      return undefined;
+    }
+  }
+
+  // `found` represents the return value of the following switch statement.
+  // We can't use multiple `return` statements in the switch statement
+  // since that prevents Closure compiler from inlining `visitAsyncImpl`
+  // thus doubling the call stack size.
+  let found: void | null | PromiseNode | IONode;
+  switch (node.tag) {
+    case IO_NODE: {
+      found = node;
+      break;
+    }
+    case UNRESOLVED_PROMISE_NODE: {
+      found = previousIONode;
+      break;
+    }
+    case PROMISE_NODE: {
+      const awaited = node.awaited;
+      let match: void | null | PromiseNode | IONode = previousIONode;
+      const promise = node.promise.deref();
+      if (awaited !== null) {
+        const ioNode = visitAsyncNode(request, task, awaited, visited, cutOff);
+        if (ioNode === undefined) {
+          // Undefined is used as a signal that we found a suitable aborted node and we don't have to find
+          // further aborted nodes.
+          found = undefined;
+          break;
+        } else if (ioNode !== null) {
+          // This Promise was blocked on I/O. That's a signal that this Promise is interesting to log.
+          // We don't log it yet though. We return it to be logged by the point where it's awaited.
+          // The ioNode might be another PromiseNode in the case where none of the AwaitNode had
+          // unfiltered stacks.
+          if (ioNode.tag === PROMISE_NODE) {
+            // If the ioNode was a Promise, then that means we found one in user space since otherwise
+            // we would've returned an IO node. We assume this has the best stack.
+            // Note: This might also be a Promise with a displayName but potentially a worse stack.
+            // We could potentially favor the outer Promise if it has a stack but not the inner.
+            match = ioNode;
+          } else if (
+            (node.stack !== null && hasUnfilteredFrame(request, node.stack)) ||
+            (promise !== undefined &&
+              // $FlowFixMe[prop-missing]
+              typeof promise.displayName === 'string' &&
+              (ioNode.stack === null ||
+                !hasUnfilteredFrame(request, ioNode.stack)))
+          ) {
+            // If this Promise has a stack trace then we favor that over the I/O node since we're
+            // mainly dealing with Promises as the abstraction.
+            // If it has no stack but at least has a displayName and the io doesn't have a better
+            // stack anyway, then also use this Promise instead since at least it has a name.
+            match = node;
+          } else {
+            // If this Promise was created inside only third party code, then try to use
+            // the inner I/O node instead. This could happen if third party calls into first
+            // party to perform some I/O.
+            match = ioNode;
+          }
+        } else if (request.status === ABORTING) {
+          if (node.start < request.abortTime && node.end > request.abortTime) {
+            // We aborted this render. If this Promise spanned the abort time it was probably the
+            // Promise that was aborted. This won't necessarily have I/O associated with it but
+            // it's a point of interest.
+            if (
+              (node.stack !== null &&
+                hasUnfilteredFrame(request, node.stack)) ||
+              (promise !== undefined &&
+                // $FlowFixMe[prop-missing]
+                typeof promise.displayName === 'string')
+            ) {
+              match = node;
+            }
+          }
+        }
+      }
+      // We need to forward after we visit awaited nodes because what ever I/O we requested that's
+      // the thing that generated this node and its virtual children.
+      if (promise !== undefined) {
+        const debugInfo = promise._debugInfo;
+        if (debugInfo != null && !visited.has(debugInfo)) {
+          visited.set(debugInfo, null);
+          forwardDebugInfo(request, task, debugInfo);
+        }
+      }
+      found = match;
+      break;
+    }
+    case UNRESOLVED_AWAIT_NODE: {
+      found = previousIONode;
+      break;
+    }
+    case AWAIT_NODE: {
+      const awaited = node.awaited;
+      let match: void | null | PromiseNode | IONode = previousIONode;
+      if (awaited !== null) {
+        const ioNode = visitAsyncNode(request, task, awaited, visited, cutOff);
+        if (ioNode === undefined) {
+          // Undefined is used as a signal that we found a suitable aborted node and we don't have to find
+          // further aborted nodes.
+          found = undefined;
+          break;
+        } else if (ioNode !== null) {
+          const startTime: number = node.start;
+          const endTime: number = node.end;
+          if (startTime < cutOff) {
+            // We started awaiting this node before we started rendering this sequence.
+            // This means that this particular await was never part of the current sequence.
+            // If we have another await higher up in the chain it might have a more actionable stack
+            // from the perspective of this component. If we end up here from the "previous" path,
+            // then this gets I/O ignored, which is what we want because it means it was likely
+            // just part of a previous component's rendering.
+            match = ioNode;
+            if (
+              node.stack !== null &&
+              isAwaitInUserspace(request, node.stack)
+            ) {
+              // This await happened earlier but it was done in user space. This is the first time
+              // that user space saw the value of the I/O. We know we'll emit the I/O eventually
+              // but if we do it now we can override the promise value of the I/O entry to the
+              // one observed by this await which will be a better value than the internals of
+              // the I/O entry. If it's still alive that is.
+              const promise =
+                awaited.promise === null ? undefined : awaited.promise.deref();
+              if (promise !== undefined) {
+                serializeIONode(request, ioNode, awaited.promise);
+              }
+            }
+          } else {
+            if (
+              node.stack === null ||
+              !isAwaitInUserspace(request, node.stack)
+            ) {
+              // If this await was fully filtered out, then it was inside third party code
+              // such as in an external library. We return the I/O node and try another await.
+              match = ioNode;
+            } else if (
+              request.status === ABORTING &&
+              startTime > request.abortTime
+            ) {
+              // This was awaited after aborting so we skip it.
+            } else {
+              // We found a user space await.
+
+              // Outline the IO node.
+              // The ioNode is where the I/O was initiated, but after that it could have been
+              // processed through various awaits in the internals of the third party code.
+              // Therefore we don't use the inner most Promise as the conceptual value but the
+              // Promise that was ultimately awaited by the user space await.
+              serializeIONode(request, ioNode, awaited.promise);
+
+              // If we ever visit this I/O node again, skip it because we already emitted this
+              // exact entry and we don't need two awaits on the same thing.
+              visited.set(ioNode, null);
+
+              // Ensure the owner is already outlined.
+              if (node.owner != null) {
+                outlineComponentInfo(request, node.owner);
+              }
+
+              // We log the environment at the time when the last promise pigned ping which may
+              // be later than what the environment was when we actually started awaiting.
+              const env = (0, request.environmentName)();
+              advanceTaskTime(request, task, startTime);
+              // Then emit a reference to us awaiting it in the current task.
+              request.pendingChunks++;
+              emitDebugChunk(request, task.id, {
+                awaited: ((ioNode: any): ReactIOInfo), // This is deduped by this reference.
+                env: env,
+                owner: node.owner,
+                stack:
+                  node.stack === null
+                    ? null
+                    : filterStackTrace(request, node.stack),
+              });
+              // Mark the end time of the await. If we're aborting then we don't emit this
+              // to signal that this never resolved inside this render.
+              markOperationEndTime(request, task, endTime);
+              if (request.status === ABORTING) {
+                // Undefined is used as a signal that we found a suitable aborted node and we don't have to find
+                // further aborted nodes.
+                match = undefined;
+              }
+            }
+          }
+        }
+      }
+      // We need to forward after we visit awaited nodes because what ever I/O we requested that's
+      // the thing that generated this node and its virtual children.
+      const promise = node.promise.deref();
+      if (promise !== undefined) {
+        const debugInfo = promise._debugInfo;
+        if (debugInfo != null && !visited.has(debugInfo)) {
+          visited.set(debugInfo, null);
+          forwardDebugInfo(request, task, debugInfo);
+        }
+      }
+      found = match;
+      break;
+    }
+    default: {
+      // eslint-disable-next-line react-internal/prod-error-codes
+      throw new Error('Unknown AsyncSequence tag. This is a bug in React.');
+    }
+  }
+  return found;
+}
+
+function emitAsyncSequence(
+  request: Request,
+  task: Task,
+  node: AsyncSequence,
+  alreadyForwardedDebugInfo: ?ReactDebugInfo,
+  owner: null | ReactComponentInfo,
+  stack: null | Error,
+): void {
+  const visited: Map<
+    AsyncSequence | ReactDebugInfo,
+    void | null | PromiseNode | IONode,
+  > = new Map();
+  if (__DEV__ && alreadyForwardedDebugInfo) {
+    visited.set(alreadyForwardedDebugInfo, null);
+  }
+  const awaitedNode = visitAsyncNode(request, task, node, visited, task.time);
+  if (awaitedNode === undefined) {
+    // Undefined is used as a signal that we found an aborted await and that's good enough
+    // anything derived from that aborted node might be irrelevant.
+  } else if (awaitedNode !== null) {
+    // Nothing in user space (unfiltered stack) awaited this.
+    serializeIONode(request, awaitedNode, awaitedNode.promise);
+    request.pendingChunks++;
+    // We log the environment at the time when we ping which may be later than what the
+    // environment was when we actually started awaiting.
+    const env = (0, request.environmentName)();
+    // If we don't have any thing awaited, the time we started awaiting was internal
+    // when we yielded after rendering. The current task time is basically that.
+    const debugInfo: ReactAsyncInfo = {
+      awaited: ((awaitedNode: any): ReactIOInfo), // This is deduped by this reference.
+      env: env,
+    };
+    if (__DEV__) {
+      if (owner === null && stack === null) {
+        // We have no location for the await. We can use the JSX callsite of the parent
+        // as the await if this was just passed as a prop.
+        if (task.debugOwner !== null) {
+          // $FlowFixMe[cannot-write]
+          debugInfo.owner = task.debugOwner;
+        }
+        if (task.debugStack !== null) {
+          // $FlowFixMe[cannot-write]
+          debugInfo.stack = filterStackTrace(
+            request,
+            parseStackTrace(task.debugStack, 1),
+          );
+        }
+      } else {
+        if (owner != null) {
+          // $FlowFixMe[cannot-write]
+          debugInfo.owner = owner;
+        }
+        if (stack != null) {
+          // $FlowFixMe[cannot-write]
+          debugInfo.stack = filterStackTrace(
+            request,
+            parseStackTrace(stack, 1),
+          );
+        }
+      }
+    }
+    // We don't have a start time for this await but in case there was no start time emitted
+    // we need to include something. TODO: We should maybe ideally track the time when we
+    // called .then() but without updating the task.time field since that's used for the cutoff.
+    advanceTaskTime(request, task, task.time);
+    emitDebugChunk(request, task.id, debugInfo);
+    // Mark the end time of the await. If we're aborting then we don't emit this
+    // to signal that this never resolved inside this render.
+    // If we're currently aborting, then this never resolved into user space.
+    markOperationEndTime(request, task, awaitedNode.end);
+  }
+}
+
+function pingTask(request: Request, task: Task): void {
+  if (
+    enableProfilerTimer &&
+    (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+  ) {
+    // If this was async we need to emit the time when it completes.
+    task.timed = true;
+  }
+  const pingedTasks = request.pingedTasks;
+  pingedTasks.push(task);
+  if (pingedTasks.length === 1) {
+    request.flushScheduled = request.destination !== null;
+    if (request.type === PRERENDER || request.status === OPENING) {
+      scheduleMicrotask(() => performWork(request));
+    } else {
+      scheduleWork(() => performWork(request));
+    }
+  }
+}
+
+function createTask(
+  request: Request,
+  model: ReactClientValue,
+  keyPath: ReactKey,
+  implicitSlot: boolean,
+  formatContext: FormatContext,
+  abortSet: Set<Task>,
+  lastTimestamp: number, // Profiling-only
+  debugOwner: null | ReactComponentInfo, // DEV-only
+  debugStack: null | Error, // DEV-only
+  debugTask: null | ConsoleTask, // DEV-only
+): Task {
+  request.pendingChunks++;
+  const id = request.nextChunkId++;
+  if (typeof model === 'object' && model !== null) {
+    // If we're about to write this into a new task we can assign it an ID early so that
+    // any other references can refer to the value we're about to write.
+    if (keyPath !== null || implicitSlot) {
+      // If we're in some kind of context we can't necessarily reuse this object depending
+      // what parent components are used.
+    } else {
+      request.writtenObjects.set(model, serializeByValueID(id));
+    }
+  }
+  const task: Task = (({
+    id,
+    status: PENDING,
+    model,
+    keyPath,
+    implicitSlot,
+    formatContext: formatContext,
+    ping: () => pingTask(request, task),
+    toJSON: function (
+      this:
+        | {+[key: string | number]: ReactClientValue}
+        | $ReadOnlyArray<ReactClientValue>,
+      parentPropertyName: string,
+      value: ReactClientValue,
+    ): ReactJSONValue {
+      const parent = this;
+      // Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
+      if (__DEV__) {
+        // $FlowFixMe[incompatible-use]
+        const originalValue = parent[parentPropertyName];
+        if (
+          typeof originalValue === 'object' &&
+          originalValue !== value &&
+          !(originalValue instanceof Date)
+        ) {
+          // Call with the server component as the currently rendering component
+          // for context.
+          callWithDebugContextInDEV(request, task, () => {
+            if (objectName(originalValue) !== 'Object') {
+              const jsxParentType = jsxChildrenParents.get(parent);
+              if (typeof jsxParentType === 'string') {
+                console.error(
+                  '%s objects cannot be rendered as text children. Try formatting it using toString().%s',
+                  objectName(originalValue),
+                  describeObjectForErrorMessage(parent, parentPropertyName),
+                );
+              } else {
+                console.error(
+                  'Only plain objects can be passed to Client Components from Server Components. ' +
+                    '%s objects are not supported.%s',
+                  objectName(originalValue),
+                  describeObjectForErrorMessage(parent, parentPropertyName),
+                );
+              }
+            } else {
+              console.error(
+                'Only plain objects can be passed to Client Components from Server Components. ' +
+                  'Objects with toJSON methods are not supported. Convert it manually ' +
+                  'to a simple value before passing it to props.%s',
+                describeObjectForErrorMessage(parent, parentPropertyName),
+              );
+            }
+          });
+        }
+      }
+      return renderModel(request, task, parent, parentPropertyName, value);
+    },
+    thenableState: null,
+  }: Omit<
+    Task,
+    | 'timed'
+    | 'time'
+    | 'environmentName'
+    | 'debugOwner'
+    | 'debugStack'
+    | 'debugTask',
+  >): any);
+  if (
+    enableProfilerTimer &&
+    (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+  ) {
+    task.timed = false;
+    task.time = lastTimestamp;
+  }
+  if (__DEV__) {
+    task.environmentName = request.environmentName();
+    task.debugOwner = debugOwner;
+    task.debugStack = debugStack;
+    task.debugTask = debugTask;
+  }
+  abortSet.add(task);
+  return task;
+}
+
+function serializeByValueID(id: number): string {
+  return '$' + id.toString(16);
+}
+
+function serializeLazyID(id: number): string {
+  return '$L' + id.toString(16);
+}
+
+function serializePromiseID(id: number): string {
+  return '$@' + id.toString(16);
+}
+
+function serializeServerReferenceID(id: number): string {
+  return '$h' + id.toString(16);
+}
+
+function serializeSymbolReference(name: string): string {
+  return '$S' + name;
+}
+
+function serializeDeferredObject(
+  request: Request,
+  value: ReactClientReference | string,
+): string {
+  const deferredDebugObjects = request.deferredDebugObjects;
+  if (deferredDebugObjects !== null) {
+    // This client supports a long lived connection. We can assign this object
+    // an ID to be lazy loaded later.
+    // This keeps the connection alive until we ask for it or release it.
+    request.pendingDebugChunks++;
+    const id = request.nextChunkId++;
+    deferredDebugObjects.existing.set(value, id);
+    deferredDebugObjects.retained.set(id, value);
+    return '$Y' + id.toString(16);
+  }
+  return '$Y';
+}
+
+function serializeNumber(number: number): string | number {
+  if (Number.isFinite(number)) {
+    if (number === 0 && 1 / number === -Infinity) {
+      return '$-0';
+    } else {
+      return number;
+    }
+  } else {
+    if (number === Infinity) {
+      return '$Infinity';
+    } else if (number === -Infinity) {
+      return '$-Infinity';
+    } else {
+      return '$NaN';
+    }
+  }
+}
+
+function serializeUndefined(): string {
+  return '$undefined';
+}
+
+function serializeDate(date: Date): string {
+  // JSON.stringify automatically calls Date.prototype.toJSON which calls toISOString.
+  // We need only tack on a $D prefix.
+  return '$D' + date.toJSON();
+}
+
+function serializeDateFromDateJSON(dateJSON: string): string {
+  // JSON.stringify automatically calls Date.prototype.toJSON which calls toISOString.
+  // We need only tack on a $D prefix.
+  return '$D' + dateJSON;
+}
+
+function serializeBigInt(n: bigint): string {
+  return '$n' + n.toString(10);
+}
+
+function serializeRowHeader(tag: string, id: number) {
+  return id.toString(16) + ':' + tag;
+}
+
+function encodeReferenceChunk(
+  request: Request,
+  id: number,
+  reference: string,
+): Chunk {
+  const json = stringify(reference);
+  const row = id.toString(16) + ':' + json + '\n';
+  return stringToChunk(row);
+}
+
+function serializeClientReference(
+  request: Request,
+  parent:
+    | {+[propertyName: string | number]: ReactClientValue}
+    | $ReadOnlyArray<ReactClientValue>,
+  parentPropertyName: string,
+  clientReference: ClientReference<any>,
+): string {
+  const clientReferenceKey: ClientReferenceKey =
+    getClientReferenceKey(clientReference);
+  const writtenClientReferences = request.writtenClientReferences;
+  const existingId = writtenClientReferences.get(clientReferenceKey);
+  if (existingId !== undefined) {
+    if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
+      // If we're encoding the "type" of an element, we can refer
+      // to that by a lazy reference instead of directly since React
+      // knows how to deal with lazy values. This lets us suspend
+      // on this component rather than its parent until the code has
+      // loaded.
+      return serializeLazyID(existingId);
+    }
+    return serializeByValueID(existingId);
+  }
+  try {
+    const clientReferenceMetadata: ClientReferenceMetadata =
+      resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
+    request.pendingChunks++;
+    const importId = request.nextChunkId++;
+    emitImportChunk(request, importId, clientReferenceMetadata, false);
+    writtenClientReferences.set(clientReferenceKey, importId);
+    if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
+      // If we're encoding the "type" of an element, we can refer
+      // to that by a lazy reference instead of directly since React
+      // knows how to deal with lazy values. This lets us suspend
+      // on this component rather than its parent until the code has
+      // loaded.
+      return serializeLazyID(importId);
+    }
+    return serializeByValueID(importId);
+  } catch (x) {
+    request.pendingChunks++;
+    const errorId = request.nextChunkId++;
+    const digest = logRecoverableError(request, x, null);
+    emitErrorChunk(request, errorId, digest, x, false, null);
+    return serializeByValueID(errorId);
+  }
+}
+
+function serializeDebugClientReference(
+  request: Request,
+  parent:
+    | {+[propertyName: string | number]: ReactClientValue}
+    | $ReadOnlyArray<ReactClientValue>,
+  parentPropertyName: string,
+  clientReference: ClientReference<any>,
+): string {
+  // Like serializeDebugClientReference but it doesn't dedupe in the regular set
+  // and it writes to completedDebugChunk instead of imports.
+  const clientReferenceKey: ClientReferenceKey =
+    getClientReferenceKey(clientReference);
+  const writtenClientReferences = request.writtenClientReferences;
+  const existingId = writtenClientReferences.get(clientReferenceKey);
+  if (existingId !== undefined) {
+    if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
+      // If we're encoding the "type" of an element, we can refer
+      // to that by a lazy reference instead of directly since React
+      // knows how to deal with lazy values. This lets us suspend
+      // on this component rather than its parent until the code has
+      // loaded.
+      return serializeLazyID(existingId);
+    }
+    return serializeByValueID(existingId);
+  }
+  try {
+    const clientReferenceMetadata: ClientReferenceMetadata =
+      resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
+    request.pendingDebugChunks++;
+    const importId = request.nextChunkId++;
+    emitImportChunk(request, importId, clientReferenceMetadata, true);
+    if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
+      // If we're encoding the "type" of an element, we can refer
+      // to that by a lazy reference instead of directly since React
+      // knows how to deal with lazy values. This lets us suspend
+      // on this component rather than its parent until the code has
+      // loaded.
+      return serializeLazyID(importId);
+    }
+    return serializeByValueID(importId);
+  } catch (x) {
+    request.pendingDebugChunks++;
+    const errorId = request.nextChunkId++;
+    const digest = logRecoverableError(request, x, null);
+    emitErrorChunk(request, errorId, digest, x, true, null);
+    return serializeByValueID(errorId);
+  }
+}
+
+function outlineModel(request: Request, value: ReactClientValue): number {
+  return outlineModelWithFormatContext(
+    request,
+    value,
+    // For deduped values we don't know which context it will be reused in
+    // so we have to assume that it's the root context.
+    createRootFormatContext(),
+  );
+}
+
+function outlineModelWithFormatContext(
+  request: Request,
+  value: ReactClientValue,
+  formatContext: FormatContext,
+): number {
+  const newTask = createTask(
+    request,
+    value,
+    null, // The way we use outlining is for reusing an object.
+    false, // It makes no sense for that use case to be contextual.
+    formatContext, // Except for FormatContext we optimistically use it.
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? performance.now() // TODO: This should really inherit the time from the task.
+      : 0,
+    null, // TODO: Currently we don't associate any debug information with
+    null, // this object on the server. If it ends up erroring, it won't
+    null, // have any context on the server but can on the client.
+  );
+  retryTask(request, newTask);
+  return newTask.id;
+}
+
+function serializeServerReference(
+  request: Request,
+  serverReference: ServerReference<any>,
+): string {
+  const writtenServerReferences = request.writtenServerReferences;
+  const existingId = writtenServerReferences.get(serverReference);
+  if (existingId !== undefined) {
+    return serializeServerReferenceID(existingId);
+  }
+
+  const boundArgs: null | Array<any> = getServerReferenceBoundArguments(
+    request.bundlerConfig,
+    serverReference,
+  );
+  const bound = boundArgs === null ? null : Promise.resolve(boundArgs);
+  const id = getServerReferenceId(request.bundlerConfig, serverReference);
+
+  let location: null | ReactFunctionLocation = null;
+  if (__DEV__) {
+    const error = getServerReferenceLocation(
+      request.bundlerConfig,
+      serverReference,
+    );
+    if (error) {
+      const frames = parseStackTrace(error, 1);
+      if (frames.length > 0) {
+        const firstFrame = frames[0];
+        location = [
+          firstFrame[0],
+          firstFrame[1],
+          firstFrame[2], // The line and col of the callsite represents the
+          firstFrame[3], // enclosing line and col of the function.
+        ];
+      }
+    }
+  }
+
+  const serverReferenceMetadata: {
+    id: ServerReferenceId,
+    bound: null | Promise<Array<any>>,
+    name?: string, // DEV-only
+    env?: string, // DEV-only
+    location?: ReactFunctionLocation, // DEV-only
+  } =
+    __DEV__ && location !== null
+      ? {
+          id,
+          bound,
+          name:
+            typeof serverReference === 'function' ? serverReference.name : '',
+          env: (0, request.environmentName)(),
+          location,
+        }
+      : {
+          id,
+          bound,
+        };
+  const metadataId = outlineModel(request, serverReferenceMetadata);
+  writtenServerReferences.set(serverReference, metadataId);
+  return serializeServerReferenceID(metadataId);
+}
+
+function serializeTemporaryReference(
+  request: Request,
+  reference: string,
+): string {
+  return '$T' + reference;
+}
+
+function serializeLargeTextString(request: Request, text: string): string {
+  request.pendingChunks++;
+  const textId = request.nextChunkId++;
+  emitTextChunk(request, textId, text, false);
+  return serializeByValueID(textId);
+}
+
+function serializeDebugLargeTextString(request: Request, text: string): string {
+  request.pendingDebugChunks++;
+  const textId = request.nextChunkId++;
+  emitTextChunk(request, textId, text, true);
+  return serializeByValueID(textId);
+}
+
+function serializeMap(
+  request: Request,
+  map: Map<ReactClientValue, ReactClientValue>,
+): string {
+  const entries = Array.from(map);
+  const id = outlineModel(request, entries);
+  return '$Q' + id.toString(16);
+}
+
+function serializeFormData(request: Request, formData: FormData): string {
+  const entries = Array.from(formData.entries());
+  const id = outlineModel(request, (entries: any));
+  return '$K' + id.toString(16);
+}
+
+function serializeDebugFormData(request: Request, formData: FormData): string {
+  const entries = Array.from(formData.entries());
+  const id = outlineDebugModel(
+    request,
+    {objectLimit: entries.length * 2 + 1},
+    (entries: any),
+  );
+  return '$K' + id.toString(16);
+}
+
+function serializeSet(request: Request, set: Set<ReactClientValue>): string {
+  const entries = Array.from(set);
+  const id = outlineModel(request, entries);
+  return '$W' + id.toString(16);
+}
+
+function serializeDebugMap(
+  request: Request,
+  counter: {objectLimit: number},
+  map: Map<ReactClientValue, ReactClientValue>,
+): string {
+  // Like serializeMap but for renderDebugModel.
+  const entries = Array.from(map);
+  // The Map itself doesn't take up any space but the outlined object does.
+  counter.objectLimit++;
+  for (let i = 0; i < entries.length; i++) {
+    // Outline every object entry in case we run out of space to serialize them.
+    // Because we can't mark these values as limited.
+    const entry = entries[i];
+    doNotLimit.add(entry);
+    const key = entry[0];
+    const value = entry[1];
+    if (typeof key === 'object' && key !== null) {
+      doNotLimit.add(key);
+    }
+    if (typeof value === 'object' && value !== null) {
+      doNotLimit.add(value);
+    }
+  }
+  const id = outlineDebugModel(request, counter, entries);
+  return '$Q' + id.toString(16);
+}
+
+function serializeDebugSet(
+  request: Request,
+  counter: {objectLimit: number},
+  set: Set<ReactClientValue>,
+): string {
+  // Like serializeMap but for renderDebugModel.
+  const entries = Array.from(set);
+  // The Set itself doesn't take up any space but the outlined object does.
+  counter.objectLimit++;
+  for (let i = 0; i < entries.length; i++) {
+    // Outline every object entry in case we run out of space to serialize them.
+    // Because we can't mark these values as limited.
+    const entry = entries[i];
+    if (typeof entry === 'object' && entry !== null) {
+      doNotLimit.add(entry);
+    }
+  }
+  const id = outlineDebugModel(request, counter, entries);
+  return '$W' + id.toString(16);
+}
+
+function serializeIterator(
+  request: Request,
+  iterator: Iterator<ReactClientValue>,
+): string {
+  const id = outlineModel(request, Array.from(iterator));
+  return '$i' + id.toString(16);
+}
+
+function serializeTypedArray(
+  request: Request,
+  tag: string,
+  typedArray: $ArrayBufferView,
+): string {
+  request.pendingChunks++;
+  const bufferId = request.nextChunkId++;
+  emitTypedArrayChunk(request, bufferId, tag, typedArray, false);
+  return serializeByValueID(bufferId);
+}
+
+function serializeDebugTypedArray(
+  request: Request,
+  tag: string,
+  typedArray: $ArrayBufferView,
+): string {
+  if (typedArray.byteLength > 1000 && !doNotLimit.has(typedArray)) {
+    // Defer large typed arrays.
+    return serializeDeferredObject(request, typedArray);
+  }
+  request.pendingDebugChunks++;
+  const bufferId = request.nextChunkId++;
+  emitTypedArrayChunk(request, bufferId, tag, typedArray, true);
+  return serializeByValueID(bufferId);
+}
+
+function serializeDebugBlob(request: Request, blob: Blob): string {
+  const model: Array<string | Uint8Array> = [blob.type];
+  const reader = blob.stream().getReader();
+  request.pendingDebugChunks++;
+  const id = request.nextChunkId++;
+  function progress(
+    entry: {done: false, value: Uint8Array} | {done: true, value: void},
+  ): Promise<void> | void {
+    if (entry.done) {
+      emitOutlinedDebugModelChunk(
+        request,
+        id,
+        {objectLimit: model.length + 2},
+        model,
+      );
+      enqueueFlush(request);
+      return;
+    }
+    // TODO: Emit the chunk early and refer to it later by dedupe.
+    model.push(entry.value);
+    // $FlowFixMe[incompatible-call]
+    return reader.read().then(progress).catch(error);
+  }
+  function error(reason: mixed) {
+    const digest = '';
+    emitErrorChunk(request, id, digest, reason, true, null);
+    enqueueFlush(request);
+    // $FlowFixMe should be able to pass mixed
+    reader.cancel(reason).then(noop, noop);
+  }
+  // $FlowFixMe[incompatible-call]
+  reader.read().then(progress).catch(error);
+  return '$B' + id.toString(16);
+}
+
+function serializeBlob(request: Request, blob: Blob): string {
+  const model: Array<string | Uint8Array> = [blob.type];
+  const newTask = createTask(
+    request,
+    model,
+    null,
+    false,
+    createRootFormatContext(),
+    request.abortableTasks,
+    enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+      ? performance.now() // TODO: This should really inherit the time from the task.
+      : 0,
+    null, // TODO: Currently we don't associate any debug information with
+    null, // this object on the server. If it ends up erroring, it won't
+    null, // have any context on the server but can on the client.
+  );
+
+  const reader = blob.stream().getReader();
+
+  function progress(
+    entry: {done: false, value: Uint8Array} | {done: true, value: void},
+  ): Promise<void> | void {
+    if (newTask.status !== PENDING) {
+      return;
+    }
+    if (entry.done) {
+      request.cacheController.signal.removeEventListener('abort', abortBlob);
+      pingTask(request, newTask);
+      return;
+    }
+    // TODO: Emit the chunk early and refer to it later by dedupe.
+    model.push(entry.value);
+    // $FlowFixMe[incompatible-call]
+    return reader.read().then(progress).catch(error);
+  }
+  function error(reason: mixed) {
+    if (newTask.status !== PENDING) {
+      return;
+    }
+    request.cacheController.signal.removeEventListener('abort', abortBlob);
+    erroredTask(request, newTask, reason);
+    enqueueFlush(request);
+    // $FlowFixMe should be able to pass mixed
+    reader.cancel(reason).then(error, error);
+  }
+  function abortBlob() {
+    if (newTask.status !== PENDING) {
+      return;
+    }
+    const signal = request.cacheController.signal;
+    signal.removeEventListener('abort', abortBlob);
+    const reason = signal.reason;
+    if (enableHalt && request.type === PRERENDER) {
+      request.abortableTasks.delete(newTask);
+      haltTask(newTask, request);
+      finishHaltedTask(newTask, request);
+    } else {
+      // TODO: Make this use abortTask() instead.
+      erroredTask(request, newTask, reason);
+      enqueueFlush(request);
+    }
+    // $FlowFixMe should be able to pass mixed
+    reader.cancel(reason).then(error, error);
+  }
+
+  request.cacheController.signal.addEventListener('abort', abortBlob);
+
+  // $FlowFixMe[incompatible-call]
+  reader.read().then(progress).catch(error);
+
+  return '$B' + newTask.id.toString(16);
+}
+
+function escapeStringValue(value: string): string {
+  if (value[0] === '$') {
+    // We need to escape $ prefixed strings since we use those to encode
+    // references to IDs and as special symbol values.
+    return '$' + value;
+  } else {
+    return value;
+  }
+}
+
+let modelRoot: null | ReactClientValue = false;
+
+function renderModel(
+  request: Request,
+  task: Task,
+  parent:
+    | {+[key: string | number]: ReactClientValue}
+    | $ReadOnlyArray<ReactClientValue>,
+  key: string,
+  value: ReactClientValue,
+): ReactJSONValue {
+  // First time we're serializing the key, we should add it to the size.
+  serializedSize += key.length;
+
+  const prevKeyPath = task.keyPath;
+  const prevImplicitSlot = task.implicitSlot;
+  try {
+    return renderModelDestructive(request, task, parent, key, value);
+  } catch (thrownValue) {
+    // If the suspended/errored value was an element or lazy it can be reduced
+    // to a lazy reference, so that it doesn't error the parent.
+    const model = task.model;
+    const wasReactNode =
+      typeof model === 'object' &&
+      model !== null &&
+      ((model: any).$$typeof === REACT_ELEMENT_TYPE ||
+        (model: any).$$typeof === REACT_LAZY_TYPE);
+
+    if (request.status === ABORTING) {
+      task.status = ABORTED;
+      if (enableHalt && request.type === PRERENDER) {
+        // This will create a new task and refer to it in this slot
+        // the new task won't be retried because we are aborting
+        return outlineHaltedTask(request, task, wasReactNode);
+      }
+      const errorId = (request.fatalError: any);
+      if (wasReactNode) {
+        return serializeLazyID(errorId);
+      }
+      return serializeByValueID(errorId);
+    }
+
+    const x =
+      thrownValue === SuspenseException
+        ? // This is a special type of exception used for Suspense. For historical
+          // reasons, the rest of the Suspense implementation expects the thrown
+          // value to be a thenable, because before `use` existed that was the
+          // (unstable) API for suspending. This implementation detail can change
+          // later, once we deprecate the old API in favor of `use`.
+          getSuspendedThenable()
+        : thrownValue;
+
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended, we'll need to create a new task and resolve it later.
+        const newTask = createTask(
+          request,
+          task.model,
+          task.keyPath,
+          task.implicitSlot,
+          task.formatContext,
+          request.abortableTasks,
+          enableProfilerTimer &&
+            (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+            ? task.time
+            : 0,
+          __DEV__ ? task.debugOwner : null,
+          __DEV__ ? task.debugStack : null,
+          __DEV__ ? task.debugTask : null,
+        );
+        const ping = newTask.ping;
+        (x: any).then(ping, ping);
+        newTask.thenableState = getThenableStateAfterSuspending();
+
+        // Restore the context. We assume that this will be restored by the inner
+        // functions in case nothing throws so we don't use "finally" here.
+        task.keyPath = prevKeyPath;
+        task.implicitSlot = prevImplicitSlot;
+
+        if (wasReactNode) {
+          return serializeLazyID(newTask.id);
+        }
+        return serializeByValueID(newTask.id);
+      }
+    }
+
+    // Restore the context. We assume that this will be restored by the inner
+    // functions in case nothing throws so we don't use "finally" here.
+    task.keyPath = prevKeyPath;
+    task.implicitSlot = prevImplicitSlot;
+
+    // Something errored. We'll still send everything we have up until this point.
+    request.pendingChunks++;
+    const errorId = request.nextChunkId++;
+    const digest = logRecoverableError(request, x, task);
+    emitErrorChunk(
+      request,
+      errorId,
+      digest,
+      x,
+      false,
+      __DEV__ ? task.debugOwner : null,
+    );
+    if (wasReactNode) {
+      // We'll replace this element with a lazy reference that throws on the client
+      // once it gets rendered.
+      return serializeLazyID(errorId);
+    }
+    // If we don't know if it was a React Node we render a direct reference and let
+    // the client deal with it.
+    return serializeByValueID(errorId);
+  }
+}
+
+function renderModelDestructive(
+  request: Request,
+  task: Task,
+  parent:
+    | {+[propertyName: string | number]: ReactClientValue}
+    | $ReadOnlyArray<ReactClientValue>,
+  parentPropertyName: string,
+  value: ReactClientValue,
+): ReactJSONValue {
+  // Set the currently rendering model
+  task.model = value;
+
+  // Special Symbol, that's very common.
+  if (value === REACT_ELEMENT_TYPE) {
+    return '$';
+  }
+
+  if (value === null) {
+    return null;
+  }
+
+  if (typeof value === 'object') {
+    switch ((value: any).$$typeof) {
+      case REACT_ELEMENT_TYPE: {
+        let elementReference = null;
+        const writtenObjects = request.writtenObjects;
+        if (task.keyPath !== null || task.implicitSlot) {
+          // If we're in some kind of context we can't reuse the result of this render or
+          // previous renders of this element. We only reuse elements if they're not wrapped
+          // by another Server Component.
+        } else {
+          const existingReference = writtenObjects.get(value);
+          if (existingReference !== undefined) {
+            if (modelRoot === value) {
+              // This is the ID we're currently emitting so we need to write it
+              // once but if we discover it again, we refer to it by id.
+              modelRoot = null;
+            } else {
+              // We've already emitted this as an outlined object, so we can refer to that by its
+              // existing ID. TODO: We should use a lazy reference since, unlike plain objects,
+              // elements might suspend so it might not have emitted yet even if we have the ID for
+              // it. However, this creates an extra wrapper when it's not needed. We should really
+              // detect whether this already was emitted and synchronously available. In that
+              // case we can refer to it synchronously and only make it lazy otherwise.
+              // We currently don't have a data structure that lets us see that though.
+              return existingReference;
+            }
+          } else if (parentPropertyName.indexOf(':') === -1) {
+            // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+            const parentReference = writtenObjects.get(parent);
+            if (parentReference !== undefined) {
+              // If the parent has a reference, we can refer to this object indirectly
+              // through the property name inside that parent.
+              elementReference = parentReference + ':' + parentPropertyName;
+              writtenObjects.set(value, elementReference);
+            }
+          }
+        }
+
+        const element: ReactElement = (value: any);
+
+        if (serializedSize > MAX_ROW_SIZE) {
+          return deferTask(request, task);
+        }
+
+        if (__DEV__) {
+          const debugInfo: ?ReactDebugInfo = (value: any)._debugInfo;
+          if (debugInfo) {
+            // If this came from Flight, forward any debug info into this new row.
+            if (!canEmitDebugInfo) {
+              // We don't have a chunk to assign debug info. We need to outline this
+              // component to assign it an ID.
+              return outlineTask(request, task);
+            } else {
+              // Forward any debug info we have the first time we see it.
+              forwardDebugInfo(request, task, debugInfo);
+            }
+          }
+        }
+
+        const props = element.props;
+        // TODO: We should get the ref off the props object right before using
+        // it.
+        const refProp = props.ref;
+        const ref = refProp !== undefined ? refProp : null;
+
+        // Attempt to render the Server Component.
+
+        if (__DEV__) {
+          task.debugOwner = element._owner;
+          task.debugStack = element._debugStack;
+          task.debugTask = element._debugTask;
+          if (
+            element._owner === undefined ||
+            element._debugStack === undefined ||
+            element._debugTask === undefined
+          ) {
+            let key = '';
+            if (element.key !== null && element.key !== REACT_OPTIMISTIC_KEY) {
+              key = ' key="' + element.key + '"';
+            }
+
+            console.error(
+              'Attempted to render <%s%s> without development properties. ' +
+                'This is not supported. It can happen if:' +
+                '\n- The element is created with a production version of React but rendered in development.' +
+                '\n- The element was cloned with a custom function instead of `React.cloneElement`.\n' +
+                'The props of this element may help locate this element: %o',
+              element.type,
+              key,
+              element.props,
+            );
+          }
+          // TODO: Pop this. Since we currently don't have a point where we can pop the stack
+          // this debug information will be used for errors inside sibling properties that
+          // are not elements. Leading to the wrong attribution on the server. We could fix
+          // that if we switch to a proper stack instead of JSON.stringify's trampoline.
+          // Attribution on the client is still correct since it has a pop.
+        }
+
+        const newChild = renderElement(
+          request,
+          task,
+          element.type,
+          // $FlowFixMe[incompatible-call] the key of an element is null | string | ReactOptimisticKey
+          element.key,
+          ref,
+          props,
+          __DEV__ ? element._store.validated : 0,
+        );
+        if (
+          typeof newChild === 'object' &&
+          newChild !== null &&
+          elementReference !== null
+        ) {
+          // If this element renders another object, we can now refer to that object through
+          // the same location as this element.
+          if (!writtenObjects.has(newChild)) {
+            writtenObjects.set(newChild, elementReference);
+          }
+        }
+        return newChild;
+      }
+      case REACT_LAZY_TYPE: {
+        if (serializedSize > MAX_ROW_SIZE) {
+          return deferTask(request, task);
+        }
+
+        // Reset the task's thenable state before continuing. If there was one, it was
+        // from suspending the lazy before.
+        task.thenableState = null;
+
+        const lazy: LazyComponent<any, any> = (value: any);
+        let resolvedModel;
+        if (__DEV__) {
+          resolvedModel = callLazyInitInDEV(lazy);
+        } else {
+          const payload = lazy._payload;
+          const init = lazy._init;
+          resolvedModel = init(payload);
+        }
+        if (request.status === ABORTING) {
+          // lazy initializers are user code and could abort during render
+          // we don't wan to return any value resolved from the lazy initializer
+          // if it aborts so we interrupt rendering here
+          // eslint-disable-next-line no-throw-literal
+          throw null;
+        }
+        if (__DEV__) {
+          const debugInfo: ?ReactDebugInfo = lazy._debugInfo;
+          if (debugInfo) {
+            // If this came from Flight, forward any debug info into this new row.
+            if (!canEmitDebugInfo) {
+              // We don't have a chunk to assign debug info. We need to outline this
+              // component to assign it an ID.
+              return outlineTask(request, task);
+            } else {
+              // Forward any debug info we have the first time we see it.
+              // We do this after init so that we have received all the debug info
+              // from the server by the time we emit it.
+              forwardDebugInfo(request, task, debugInfo);
+            }
+          }
+        }
+        return renderModelDestructive(
+          request,
+          task,
+          parent,
+          parentPropertyName,
+          resolvedModel,
+        );
+      }
+      case REACT_LEGACY_ELEMENT_TYPE: {
+        throw new Error(
+          'A React Element from an older version of React was rendered. ' +
+            'This is not supported. It can happen if:\n' +
+            '- Multiple copies of the "react" package is used.\n' +
+            '- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' +
+            '- A compiler tries to "inline" JSX instead of using the runtime.',
+        );
+      }
+    }
+
+    if (isClientReference(value)) {
+      return serializeClientReference(
+        request,
+        parent,
+        parentPropertyName,
+        (value: any),
+      );
+    }
+
+    if (request.temporaryReferences !== undefined) {
+      const tempRef = resolveTemporaryReference(
+        request.temporaryReferences,
+        value,
+      );
+      if (tempRef !== undefined) {
+        return serializeTemporaryReference(request, tempRef);
+      }
+    }
+
+    if (enableTaint) {
+      const tainted = TaintRegistryObjects.get(value);
+      if (tainted !== undefined) {
+        throwTaintViolation(tainted);
+      }
+    }
+
+    const writtenObjects = request.writtenObjects;
+    const existingReference = writtenObjects.get(value);
+    // $FlowFixMe[method-unbinding]
+    if (typeof value.then === 'function') {
+      if (existingReference !== undefined) {
+        if (task.keyPath !== null || task.implicitSlot) {
+          // If we're in some kind of context we can't reuse the result of this render or
+          // previous renders of this element. We only reuse Promises if they're not wrapped
+          // by another Server Component.
+          const promiseId = serializeThenable(request, task, (value: any));
+          return serializePromiseID(promiseId);
+        } else if (modelRoot === value) {
+          // This is the ID we're currently emitting so we need to write it
+          // once but if we discover it again, we refer to it by id.
+          modelRoot = null;
+        } else {
+          // We've seen this promise before, so we can just refer to the same result.
+          return existingReference;
+        }
+      }
+      // We assume that any object with a .then property is a "Thenable" type,
+      // or a Promise type. Either of which can be represented by a Promise.
+      const promiseId = serializeThenable(request, task, (value: any));
+      const promiseReference = serializePromiseID(promiseId);
+      writtenObjects.set(value, promiseReference);
+      return promiseReference;
+    }
+
+    if (existingReference !== undefined) {
+      if (modelRoot === value) {
+        if (existingReference !== serializeByValueID(task.id)) {
+          // Turns out that we already have this root at a different reference.
+          // Use that after all.
+          return existingReference;
+        }
+        // This is the ID we're currently emitting so we need to write it
+        // once but if we discover it again, we refer to it by id.
+        modelRoot = null;
+      } else {
+        // We've already emitted this as an outlined object, so we can
+        // just refer to that by its existing ID.
+        return existingReference;
+      }
+    } else if (parentPropertyName.indexOf(':') === -1) {
+      // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+      const parentReference = writtenObjects.get(parent);
+      if (parentReference !== undefined) {
+        // If the parent has a reference, we can refer to this object indirectly
+        // through the property name inside that parent.
+        let propertyName = parentPropertyName;
+        if (isArray(parent) && parent[0] === REACT_ELEMENT_TYPE) {
+          // For elements, we've converted it to an array but we'll have converted
+          // it back to an element before we read the references so the property
+          // needs to be aliased.
+          switch (parentPropertyName) {
+            case '1':
+              propertyName = 'type';
+              break;
+            case '2':
+              propertyName = 'key';
+              break;
+            case '3':
+              propertyName = 'props';
+              break;
+            case '4':
+              propertyName = '_owner';
+              break;
+          }
+        }
+        writtenObjects.set(value, parentReference + ':' + propertyName);
+      }
+    }
+
+    if (isArray(value)) {
+      return renderFragment(request, task, value);
+    }
+
+    if (value instanceof Map) {
+      return serializeMap(request, value);
+    }
+    if (value instanceof Set) {
+      return serializeSet(request, value);
+    }
+    // TODO: FormData is not available in old Node. Remove the typeof later.
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
+    }
+    if (value instanceof Error) {
+      return serializeErrorValue(request, value);
+    }
+    if (value instanceof ArrayBuffer) {
+      return serializeTypedArray(request, 'A', new Uint8Array(value));
+    }
+    if (value instanceof Int8Array) {
+      // char
+      return serializeTypedArray(request, 'O', value);
+    }
+    if (value instanceof Uint8Array) {
+      // unsigned char
+      return serializeTypedArray(request, 'o', value);
+    }
+    if (value instanceof Uint8ClampedArray) {
+      // unsigned clamped char
+      return serializeTypedArray(request, 'U', value);
+    }
+    if (value instanceof Int16Array) {
+      // sort
+      return serializeTypedArray(request, 'S', value);
+    }
+    if (value instanceof Uint16Array) {
+      // unsigned short
+      return serializeTypedArray(request, 's', value);
+    }
+    if (value instanceof Int32Array) {
+      // long
+      return serializeTypedArray(request, 'L', value);
+    }
+    if (value instanceof Uint32Array) {
+      // unsigned long
+      return serializeTypedArray(request, 'l', value);
+    }
+    if (value instanceof Float32Array) {
+      // float
+      return serializeTypedArray(request, 'G', value);
+    }
+    if (value instanceof Float64Array) {
+      // double
+      return serializeTypedArray(request, 'g', value);
+    }
+    if (value instanceof BigInt64Array) {
+      // number
+      return serializeTypedArray(request, 'M', value);
+    }
+    if (value instanceof BigUint64Array) {
+      // unsigned number
+      // We use "m" instead of "n" since JSON can start with "null"
+      return serializeTypedArray(request, 'm', value);
+    }
+    if (value instanceof DataView) {
+      return serializeTypedArray(request, 'V', value);
+    }
+    // TODO: Blob is not available in old Node. Remove the typeof check later.
+    if (typeof Blob === 'function' && value instanceof Blob) {
+      return serializeBlob(request, value);
+    }
+
+    const iteratorFn = getIteratorFn(value);
+    if (iteratorFn) {
+      // TODO: Should we serialize the return value as well like we do for AsyncIterables?
+      const iterator = iteratorFn.call(value);
+      if (iterator === value) {
+        // Iterator, not Iterable
+        return serializeIterator(request, (iterator: any));
+      }
+      return renderFragment(request, task, Array.from((iterator: any)));
+    }
+
+    // TODO: Blob is not available in old Node. Remove the typeof check later.
+    if (
+      typeof ReadableStream === 'function' &&
+      value instanceof ReadableStream
+    ) {
+      return serializeReadableStream(request, task, value);
+    }
+    const getAsyncIterator: void | (() => $AsyncIterator<any, any, any>) =
+      (value: any)[ASYNC_ITERATOR];
+    if (typeof getAsyncIterator === 'function') {
+      // We treat AsyncIterables as a Fragment and as such we might need to key them.
+      return renderAsyncFragment(request, task, (value: any), getAsyncIterator);
+    }
+
+    // We put the Date check low b/c most of the time Date's will already have been serialized
+    // before we process it in this function but when rendering a Date() as a top level it can
+    // end up being a Date instance here. This is rare so we deprioritize it by putting it deep
+    // in this function
+    if (value instanceof Date) {
+      return serializeDate(value);
+    }
+
+    // Verify that this is a simple plain object.
+    const proto = getPrototypeOf(value);
+    if (
+      proto !== ObjectPrototype &&
+      (proto === null || getPrototypeOf(proto) !== null)
+    ) {
+      throw new Error(
+        'Only plain objects, and a few built-ins, can be passed to Client Components ' +
+          'from Server Components. Classes or null prototypes are not supported.' +
+          describeObjectForErrorMessage(parent, parentPropertyName),
+      );
+    }
+    if (__DEV__) {
+      if (objectName(value) !== 'Object') {
+        callWithDebugContextInDEV(request, task, () => {
+          console.error(
+            'Only plain objects can be passed to Client Components from Server Components. ' +
+              '%s objects are not supported.%s',
+            objectName(value),
+            describeObjectForErrorMessage(parent, parentPropertyName),
+          );
+        });
+      } else if (!isSimpleObject(value)) {
+        callWithDebugContextInDEV(request, task, () => {
+          console.error(
+            'Only plain objects can be passed to Client Components from Server Components. ' +
+              'Classes or other objects with methods are not supported.%s',
+            describeObjectForErrorMessage(parent, parentPropertyName),
+          );
+        });
+      } else if (Object.getOwnPropertySymbols) {
+        const symbols = Object.getOwnPropertySymbols(value);
+        if (symbols.length > 0) {
+          callWithDebugContextInDEV(request, task, () => {
+            console.error(
+              'Only plain objects can be passed to Client Components from Server Components. ' +
+                'Objects with symbol properties like %s are not supported.%s',
+              symbols[0].description,
+              describeObjectForErrorMessage(parent, parentPropertyName),
+            );
+          });
+        }
+      }
+    }
+
+    // $FlowFixMe[incompatible-return]
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    if (enableTaint) {
+      const tainted = TaintRegistryValues.get(value);
+      if (tainted !== undefined) {
+        throwTaintViolation(tainted.message);
+      }
+    }
+    serializedSize += value.length;
+    // TODO: Maybe too clever. If we support URL there's no similar trick.
+    if (value[value.length - 1] === 'Z') {
+      // Possibly a Date, whose toJSON automatically calls toISOString
+      // $FlowFixMe[incompatible-use]
+      const originalValue = parent[parentPropertyName];
+      if (originalValue instanceof Date) {
+        return serializeDateFromDateJSON(value);
+      }
+    }
+    if (value.length >= 1024 && byteLengthOfChunk !== null) {
+      // For large strings, we encode them outside the JSON payload so that we
+      // don't have to double encode and double parse the strings. This can also
+      // be more compact in case the string has a lot of escaped characters.
+      return serializeLargeTextString(request, value);
+    }
+    return escapeStringValue(value);
+  }
+
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'number') {
+    return serializeNumber(value);
+  }
+
+  if (typeof value === 'undefined') {
+    return serializeUndefined();
+  }
+
+  if (typeof value === 'function') {
+    if (isClientReference(value)) {
+      return serializeClientReference(
+        request,
+        parent,
+        parentPropertyName,
+        (value: any),
+      );
+    }
+    if (isServerReference(value)) {
+      return serializeServerReference(request, (value: any));
+    }
+    if (request.temporaryReferences !== undefined) {
+      const tempRef = resolveTemporaryReference(
+        request.temporaryReferences,
+        value,
+      );
+      if (tempRef !== undefined) {
+        return serializeTemporaryReference(request, tempRef);
+      }
+    }
+
+    if (enableTaint) {
+      const tainted = TaintRegistryObjects.get(value);
+      if (tainted !== undefined) {
+        throwTaintViolation(tainted);
+      }
+    }
+
+    if (isOpaqueTemporaryReference(value)) {
+      throw new Error(
+        'Could not reference an opaque temporary reference. ' +
+          'This is likely due to misconfiguring the temporaryReferences options ' +
+          'on the server.',
+      );
+    } else if (/^on[A-Z]/.test(parentPropertyName)) {
+      throw new Error(
+        'Event handlers cannot be passed to Client Component props.' +
+          describeObjectForErrorMessage(parent, parentPropertyName) +
+          '\nIf you need interactivity, consider converting part of this to a Client Component.',
+      );
+    } else if (
+      __DEV__ &&
+      (jsxChildrenParents.has(parent) ||
+        (jsxPropsParents.has(parent) && parentPropertyName === 'children'))
+    ) {
+      const componentName = value.displayName || value.name || 'Component';
+      throw new Error(
+        'Functions are not valid as a child of Client Components. This may happen if ' +
+          'you return ' +
+          componentName +
+          ' instead of <' +
+          componentName +
+          ' /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.' +
+          describeObjectForErrorMessage(parent, parentPropertyName),
+      );
+    } else {
+      throw new Error(
+        'Functions cannot be passed directly to Client Components ' +
+          'unless you explicitly expose it by marking it with "use server". ' +
+          'Or maybe you meant to call this function rather than return it.' +
+          describeObjectForErrorMessage(parent, parentPropertyName),
+      );
+    }
+  }
+
+  if (typeof value === 'symbol') {
+    const writtenSymbols = request.writtenSymbols;
+    const existingId = writtenSymbols.get(value);
+    if (existingId !== undefined) {
+      return serializeByValueID(existingId);
+    }
+    // $FlowFixMe[incompatible-type] `description` might be undefined
+    const name: string = value.description;
+
+    if (Symbol.for(name) !== value) {
+      throw new Error(
+        'Only global symbols received from Symbol.for(...) can be passed to Client Components. ' +
+          `The symbol Symbol.for(${
+            // $FlowFixMe[incompatible-type] `description` might be undefined
+            value.description
+          }) cannot be found among global symbols.` +
+          describeObjectForErrorMessage(parent, parentPropertyName),
+      );
+    }
+
+    request.pendingChunks++;
+    const symbolId = request.nextChunkId++;
+    emitSymbolChunk(request, symbolId, name);
+    writtenSymbols.set(value, symbolId);
+    return serializeByValueID(symbolId);
+  }
+
+  if (typeof value === 'bigint') {
+    if (enableTaint) {
+      const tainted = TaintRegistryValues.get(value);
+      if (tainted !== undefined) {
+        throwTaintViolation(tainted.message);
+      }
+    }
+    return serializeBigInt(value);
+  }
+
+  throw new Error(
+    `Type ${typeof value} is not supported in Client Component props.` +
+      describeObjectForErrorMessage(parent, parentPropertyName),
+  );
+}
+
+function logRecoverableError(
+  request: Request,
+  error: mixed,
+  task: Task | null, // DEV-only
+): string {
+  const prevRequest = currentRequest;
+  // We clear the request context so that console.logs inside the callback doesn't
+  // get forwarded to the client.
+  currentRequest = null;
+  let errorDigest;
+  try {
+    const onError = request.onError;
+    if (__DEV__ && task !== null) {
+      if (supportsRequestStorage) {
+        errorDigest = requestStorage.run(
+          undefined,
+          callWithDebugContextInDEV,
+          request,
+          task,
+          onError,
+          error,
+        );
+      } else {
+        errorDigest = callWithDebugContextInDEV(request, task, onError, error);
+      }
+    } else if (supportsRequestStorage) {
+      // Exit the request context while running callbacks.
+      errorDigest = requestStorage.run(undefined, onError, error);
+    } else {
+      errorDigest = onError(error);
+    }
+  } finally {
+    currentRequest = prevRequest;
+  }
+  if (errorDigest != null && typeof errorDigest !== 'string') {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      `onError returned something with a type other than "string". onError should return a string and may return null or undefined but must not return anything else. It received something of type "${typeof errorDigest}" instead`,
+    );
+  }
+  return errorDigest || '';
+}
+
+function fatalError(request: Request, error: mixed): void {
+  const onFatalError = request.onFatalError;
+  onFatalError(error);
+  if (enableTaint) {
+    cleanupTaintQueue(request);
+  }
+  // This is called outside error handling code such as if an error happens in React internals.
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
+  const abortReason = new Error(
+    'The render was aborted due to a fatal error.',
+    {
+      cause: error,
+    },
+  );
+  request.cacheController.abort(abortReason);
+}
+
+function serializeErrorValue(request: Request, error: Error): string {
+  if (__DEV__) {
+    let name: string = 'Error';
+    let message: string;
+    let stack: ReactStackTrace;
+    let env = (0, request.environmentName)();
+    try {
+      name = error.name;
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      message = String(error.message);
+      stack = filterStackTrace(request, parseStackTrace(error, 0));
+      const errorEnv = (error: any).environmentName;
+      if (typeof errorEnv === 'string') {
+        // This probably came from another FlightClient as a pass through.
+        // Keep the environment name.
+        env = errorEnv;
+      }
+    } catch (x) {
+      message = 'An error occurred but serializing the error message failed.';
+      stack = [];
+    }
+    const errorInfo: ReactErrorInfoDev = {name, message, stack, env};
+    const id = outlineModel(request, errorInfo);
+    return '$Z' + id.toString(16);
+  } else {
+    // In prod we don't emit any information about this Error object to avoid
+    // unintentional leaks. Since this doesn't actually throw on the server
+    // we don't go through onError and so don't register any digest neither.
+    return '$Z';
+  }
+}
+
+function serializeDebugErrorValue(request: Request, error: Error): string {
+  if (__DEV__) {
+    let name: string = 'Error';
+    let message: string;
+    let stack: ReactStackTrace;
+    let env = (0, request.environmentName)();
+    try {
+      name = error.name;
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      message = String(error.message);
+      stack = filterStackTrace(request, parseStackTrace(error, 0));
+      const errorEnv = (error: any).environmentName;
+      if (typeof errorEnv === 'string') {
+        // This probably came from another FlightClient as a pass through.
+        // Keep the environment name.
+        env = errorEnv;
+      }
+    } catch (x) {
+      message = 'An error occurred but serializing the error message failed.';
+      stack = [];
+    }
+    const errorInfo: ReactErrorInfoDev = {name, message, stack, env};
+    const id = outlineDebugModel(
+      request,
+      {objectLimit: stack.length * 2 + 1},
+      errorInfo,
+    );
+    return '$Z' + id.toString(16);
+  } else {
+    // In prod we don't emit any information about this Error object to avoid
+    // unintentional leaks. Since this doesn't actually throw on the server
+    // we don't go through onError and so don't register any digest neither.
+    return '$Z';
+  }
+}
+
+function emitErrorChunk(
+  request: Request,
+  id: number,
+  digest: string,
+  error: mixed,
+  debug: boolean, // DEV-only
+  owner: ?ReactComponentInfo, // DEV-only
+): void {
+  let errorInfo: ReactErrorInfo;
+  if (__DEV__) {
+    let name: string = 'Error';
+    let message: string;
+    let stack: ReactStackTrace;
+    let env = (0, request.environmentName)();
+    try {
+      if (error instanceof Error) {
+        name = error.name;
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        message = String(error.message);
+        stack = filterStackTrace(request, parseStackTrace(error, 0));
+        const errorEnv = (error: any).environmentName;
+        if (typeof errorEnv === 'string') {
+          // This probably came from another FlightClient as a pass through.
+          // Keep the environment name.
+          env = errorEnv;
+        }
+      } else if (typeof error === 'object' && error !== null) {
+        message = describeObjectForErrorMessage(error);
+        stack = [];
+      } else {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        message = String(error);
+        stack = [];
+      }
+    } catch (x) {
+      message = 'An error occurred but serializing the error message failed.';
+      stack = [];
+    }
+    const ownerRef =
+      owner == null ? null : outlineComponentInfo(request, owner);
+    errorInfo = {digest, name, message, stack, env, owner: ownerRef};
+  } else {
+    errorInfo = {digest};
+  }
+  const row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
+  const processedChunk = stringToChunk(row);
+  if (__DEV__ && debug) {
+    request.completedDebugChunks.push(processedChunk);
+  } else {
+    request.completedErrorChunks.push(processedChunk);
+  }
+}
+
+function emitImportChunk(
+  request: Request,
+  id: number,
+  clientReferenceMetadata: ClientReferenceMetadata,
+  debug: boolean,
+): void {
+  // $FlowFixMe[incompatible-type] stringify can return null
+  const json: string = stringify(clientReferenceMetadata);
+  const row = serializeRowHeader('I', id) + json + '\n';
+  const processedChunk = stringToChunk(row);
+  if (__DEV__ && debug) {
+    request.completedDebugChunks.push(processedChunk);
+  } else {
+    request.completedImportChunks.push(processedChunk);
+  }
+}
+
+function emitHintChunk<Code: HintCode>(
+  request: Request,
+  code: Code,
+  model: HintModel<Code>,
+): void {
+  const json: string = stringify(model);
+  const row = ':H' + code + json + '\n';
+  const processedChunk = stringToChunk(row);
+  request.completedHintChunks.push(processedChunk);
+}
+
+function emitSymbolChunk(request: Request, id: number, name: string): void {
+  const symbolReference = serializeSymbolReference(name);
+  const processedChunk = encodeReferenceChunk(request, id, symbolReference);
+  request.completedImportChunks.push(processedChunk);
+}
+
+function emitModelChunk(request: Request, id: number, json: string): void {
+  const row = id.toString(16) + ':' + json + '\n';
+  const processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
+}
+
+function emitDebugHaltChunk(request: Request, id: number): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'emitDebugHaltChunk should never be called in production mode. This is a bug in React.',
+    );
+  }
+  // This emits a marker that this row will never complete and should intentionally never resolve
+  // even when the client stream is closed. We use just the lack of data to indicate this.
+  const row = id.toString(16) + ':\n';
+  const processedChunk = stringToChunk(row);
+  request.completedDebugChunks.push(processedChunk);
+}
+
+function emitDebugChunk(
+  request: Request,
+  id: number,
+  debugInfo: ReactDebugInfoEntry,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'emitDebugChunk should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  const json: string = serializeDebugModel(request, 500, debugInfo);
+  if (request.debugDestination !== null) {
+    if (json[0] === '"' && json[1] === '$') {
+      // This is already an outlined reference so we can just emit it directly,
+      // without an unnecessary indirection.
+      const row = serializeRowHeader('D', id) + json + '\n';
+      request.completedRegularChunks.push(stringToChunk(row));
+    } else {
+      // Outline the debug information to the debug channel.
+      const outlinedId = request.nextChunkId++;
+      const debugRow = outlinedId.toString(16) + ':' + json + '\n';
+      request.pendingDebugChunks++;
+      request.completedDebugChunks.push(stringToChunk(debugRow));
+      const row =
+        serializeRowHeader('D', id) + '"$' + outlinedId.toString(16) + '"\n';
+      request.completedRegularChunks.push(stringToChunk(row));
+    }
+  } else {
+    const row = serializeRowHeader('D', id) + json + '\n';
+    request.completedRegularChunks.push(stringToChunk(row));
+  }
+}
+
+function outlineComponentInfo(
+  request: Request,
+  componentInfo: ReactComponentInfo,
+): string {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'outlineComponentInfo should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  const existingRef = request.writtenDebugObjects.get(componentInfo);
+  if (existingRef !== undefined) {
+    // Already written
+    return existingRef;
+  }
+
+  if (componentInfo.owner != null) {
+    // Ensure the owner is already outlined.
+    outlineComponentInfo(request, componentInfo.owner);
+  }
+
+  // Limit the number of objects we write to prevent emitting giant props objects.
+  let objectLimit = 10;
+  if (componentInfo.stack != null) {
+    // Ensure we have enough object limit to encode the stack trace.
+    objectLimit += componentInfo.stack.length;
+  }
+
+  // We use the console encoding so that we can dedupe objects but don't necessarily
+  // use the full serialization that requires a task.
+  const counter = {objectLimit};
+
+  // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
+  const componentDebugInfo: Omit<
+    ReactComponentInfo,
+    'debugTask' | 'debugStack',
+  > = {
+    name: componentInfo.name,
+    key: componentInfo.key,
+  };
+  if (componentInfo.env != null) {
+    // $FlowFixMe[cannot-write]
+    componentDebugInfo.env = componentInfo.env;
+  }
+  if (componentInfo.owner != null) {
+    // $FlowFixMe[cannot-write]
+    componentDebugInfo.owner = componentInfo.owner;
+  }
+  if (componentInfo.stack == null && componentInfo.debugStack != null) {
+    // If we have a debugStack but no parsed stack we should parse it.
+    // $FlowFixMe[cannot-write]
+    componentDebugInfo.stack = filterStackTrace(
+      request,
+      parseStackTrace(componentInfo.debugStack, 1),
+    );
+  } else if (componentInfo.stack != null) {
+    // $FlowFixMe[cannot-write]
+    componentDebugInfo.stack = componentInfo.stack;
+  }
+  // Ensure we serialize props after the stack to favor the stack being complete.
+  // $FlowFixMe[cannot-write]
+  componentDebugInfo.props = componentInfo.props;
+
+  const id = outlineDebugModel(request, counter, componentDebugInfo);
+  const ref = serializeByValueID(id);
+  request.writtenDebugObjects.set(componentInfo, ref);
+  // We also store this in the main dedupe set so that it can be referenced by inline React Elements.
+  request.writtenObjects.set(componentInfo, ref);
+  return ref;
+}
+
+function emitIOInfoChunk(
+  request: Request,
+  id: number,
+  name: string,
+  start: number,
+  end: number,
+  value: ?Promise<mixed>,
+  env: ?string,
+  owner: ?ReactComponentInfo,
+  stack: ?ReactStackTrace,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'emitIOInfoChunk should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  let objectLimit = 10;
+  if (stack) {
+    objectLimit += stack.length;
+  }
+
+  const relativeStartTimestamp = start - request.timeOrigin;
+  const relativeEndTimestamp = end - request.timeOrigin;
+  const debugIOInfo: Omit<ReactIOInfo, 'debugTask' | 'debugStack'> = {
+    name: name,
+    start: relativeStartTimestamp,
+    end: relativeEndTimestamp,
+  };
+  if (env != null) {
+    // $FlowFixMe[cannot-write]
+    debugIOInfo.env = env;
+  }
+  if (stack != null) {
+    // $FlowFixMe[cannot-write]
+    debugIOInfo.stack = stack;
+  }
+  if (owner != null) {
+    // $FlowFixMe[cannot-write]
+    debugIOInfo.owner = owner;
+  }
+  if (value !== undefined) {
+    // $FlowFixMe[cannot-write]
+    debugIOInfo.value = value;
+  }
+  const json: string = serializeDebugModel(request, objectLimit, debugIOInfo);
+  const row = id.toString(16) + ':J' + json + '\n';
+  const processedChunk = stringToChunk(row);
+  request.completedDebugChunks.push(processedChunk);
+}
+
+function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void {
+  if (request.writtenObjects.has(ioInfo)) {
+    // Already written
+    return;
+  }
+  // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
+  request.pendingDebugChunks++;
+  const id = request.nextChunkId++;
+  const owner = ioInfo.owner;
+  // Ensure the owner is already outlined.
+  if (owner != null) {
+    outlineComponentInfo(request, owner);
+  }
+  let debugStack;
+  if (ioInfo.stack == null && ioInfo.debugStack != null) {
+    // If we have a debugStack but no parsed stack we should parse it.
+    debugStack = filterStackTrace(
+      request,
+      parseStackTrace(ioInfo.debugStack, 1),
+    );
+  } else {
+    debugStack = ioInfo.stack;
+  }
+  let env = ioInfo.env;
+  if (env == null) {
+    // If we're forwarding IO info from this environment, an empty env is effectively the "client" side.
+    // The "client" from the perspective of our client will be this current environment.
+    env = (0, request.environmentName)();
+  }
+  emitIOInfoChunk(
+    request,
+    id,
+    ioInfo.name,
+    ioInfo.start,
+    ioInfo.end,
+    ioInfo.value,
+    env,
+    owner,
+    debugStack,
+  );
+  request.writtenDebugObjects.set(ioInfo, serializeByValueID(id));
+}
+
+function serializeIONode(
+  request: Request,
+  ioNode: IONode | PromiseNode | UnresolvedPromiseNode,
+  promiseRef: null | WeakRef<Promise<mixed>>,
+): string {
+  const existingRef = request.writtenDebugObjects.get(ioNode);
+  if (existingRef !== undefined) {
+    // Already written
+    return existingRef;
+  }
+
+  let stack = null;
+  let name = '';
+  if (ioNode.promise !== null) {
+    // Pick an explicit name from the Promise itself if it exists.
+    // Note that we don't use the promiseRef passed in since that's sometimes the awaiting Promise
+    // which is the value observed but it's likely not the one with the name on it.
+    const promise = ioNode.promise.deref();
+    if (
+      promise !== undefined &&
+      // $FlowFixMe[prop-missing]
+      typeof promise.displayName === 'string'
+    ) {
+      name = promise.displayName;
+    }
+  }
+  if (ioNode.stack !== null) {
+    // The stack can contain some leading internal frames for the construction of the promise that we skip.
+    const fullStack = stripLeadingPromiseCreationFrames(ioNode.stack);
+    stack = filterStackTrace(request, fullStack);
+    if (name === '') {
+      // If we didn't have an explicit name, try finding one from the stack.
+      name = findCalledFunctionNameFromStackTrace(request, fullStack);
+      // The name can include the object that this was called on but sometimes that's
+      // just unnecessary context.
+      if (name.startsWith('Window.')) {
+        name = name.slice(7);
+      } else if (name.startsWith('<anonymous>.')) {
+        name = name.slice(7);
+      }
+    }
+  }
+  const owner = ioNode.owner;
+  // Ensure the owner is already outlined.
+  if (owner != null) {
+    outlineComponentInfo(request, owner);
+  }
+
+  let value: void | Promise<mixed> = undefined;
+  if (promiseRef !== null) {
+    value = promiseRef.deref();
+  }
+
+  // We log the environment at the time when we serialize the I/O node.
+  // The environment name may have changed from when the I/O was actually started.
+  const env = (0, request.environmentName)();
+
+  const endTime =
+    ioNode.tag === UNRESOLVED_PROMISE_NODE
+      ? // Mark the end time as now. It's arbitrary since it's not resolved but this
+        // marks when we called abort and therefore stopped trying.
+        request.abortTime
+      : ioNode.end;
+
+  request.pendingDebugChunks++;
+  const id = request.nextChunkId++;
+  emitIOInfoChunk(
+    request,
+    id,
+    name,
+    ioNode.start,
+    endTime,
+    value,
+    env,
+    owner,
+    stack,
+  );
+  const ref = serializeByValueID(id);
+  request.writtenDebugObjects.set(ioNode, ref);
+  return ref;
+}
+
+function emitTypedArrayChunk(
+  request: Request,
+  id: number,
+  tag: string,
+  typedArray: $ArrayBufferView,
+  debug: boolean,
+): void {
+  if (enableTaint) {
+    if (TaintRegistryByteLengths.has(typedArray.byteLength)) {
+      // If we have had any tainted values of this length, we check
+      // to see if these bytes matches any entries in the registry.
+      const tainted = TaintRegistryValues.get(
+        binaryToComparableString(typedArray),
+      );
+      if (tainted !== undefined) {
+        throwTaintViolation(tainted.message);
+      }
+    }
+  }
+  if (debug) {
+    request.pendingDebugChunks++;
+  } else {
+    request.pendingChunks++; // Extra chunk for the header.
+  }
+  // TODO: Convert to little endian if that's not the server default.
+  const binaryChunk = typedArrayToBinaryChunk(typedArray);
+  const binaryLength = byteLengthOfBinaryChunk(binaryChunk);
+  const row = id.toString(16) + ':' + tag + binaryLength.toString(16) + ',';
+  const headerChunk = stringToChunk(row);
+  if (__DEV__ && debug) {
+    request.completedDebugChunks.push(headerChunk, binaryChunk);
+  } else {
+    request.completedRegularChunks.push(headerChunk, binaryChunk);
+  }
+}
+
+function emitTextChunk(
+  request: Request,
+  id: number,
+  text: string,
+  debug: boolean,
+): void {
+  if (byteLengthOfChunk === null) {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'Existence of byteLengthOfChunk should have already been checked. This is a bug in React.',
+    );
+  }
+  if (debug) {
+    request.pendingDebugChunks++;
+  } else {
+    request.pendingChunks++; // Extra chunk for the header.
+  }
+  const textChunk = stringToChunk(text);
+  const binaryLength = byteLengthOfChunk(textChunk);
+  const row = id.toString(16) + ':T' + binaryLength.toString(16) + ',';
+  const headerChunk = stringToChunk(row);
+  if (__DEV__ && debug) {
+    request.completedDebugChunks.push(headerChunk, textChunk);
+  } else {
+    request.completedRegularChunks.push(headerChunk, textChunk);
+  }
+}
+
+function serializeEval(source: string): string {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'serializeEval should never be called in production mode. This is a bug in React.',
+    );
+  }
+  return '$E' + source;
+}
+
+const CONSTRUCTOR_MARKER: symbol = __DEV__ ? Symbol() : (null: any);
+
+let debugModelRoot: mixed = null;
+let debugNoOutline: mixed = null;
+// This is a forked version of renderModel which should never error, never suspend and is limited
+// in the depth it can encode.
+function renderDebugModel(
+  request: Request,
+  counter: {objectLimit: number},
+  parent:
+    | {+[propertyName: string | number]: ReactClientValue}
+    | $ReadOnlyArray<ReactClientValue>,
+  parentPropertyName: string,
+  value: ReactClientValue,
+): ReactJSONValue {
+  if (value === null) {
+    return null;
+  }
+
+  // Special Symbol, that's very common.
+  if (value === REACT_ELEMENT_TYPE) {
+    return '$';
+  }
+
+  if (typeof value === 'object') {
+    if (isClientReference(value)) {
+      // We actually have this value on the client so we could import it.
+      // This might be confusing though because on the Server it won't actually
+      // be this value, so if you're debugging client references maybe you'd be
+      // better with a place holder.
+      return serializeDebugClientReference(
+        request,
+        parent,
+        parentPropertyName,
+        (value: any),
+      );
+    }
+    if (value.$$typeof === CONSTRUCTOR_MARKER) {
+      const constructor: Function = (value: any).constructor;
+      let ref = request.writtenDebugObjects.get(constructor);
+      if (ref === undefined) {
+        const id = outlineDebugModel(request, counter, constructor);
+        ref = serializeByValueID(id);
+      }
+      return '$P' + ref.slice(1);
+    }
+
+    if (request.temporaryReferences !== undefined) {
+      const tempRef = resolveTemporaryReference(
+        request.temporaryReferences,
+        value,
+      );
+      if (tempRef !== undefined) {
+        return serializeTemporaryReference(request, tempRef);
+      }
+    }
+
+    const writtenDebugObjects = request.writtenDebugObjects;
+    const existingDebugReference = writtenDebugObjects.get(value);
+    if (existingDebugReference !== undefined) {
+      if (debugModelRoot === value) {
+        // This is the ID we're currently emitting so we need to write it
+        // once but if we discover it again, we refer to it by id.
+        debugModelRoot = null;
+      } else {
+        // We've already emitted this as a debug object. We favor that version if available.
+        return existingDebugReference;
+      }
+    } else if (parentPropertyName.indexOf(':') === -1) {
+      // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+      const parentReference = writtenDebugObjects.get(parent);
+      if (parentReference !== undefined) {
+        // If the parent has a reference, we can refer to this object indirectly
+        // through the property name inside that parent.
+        if (counter.objectLimit <= 0 && !doNotLimit.has(value)) {
+          // If we are going to defer this, don't dedupe it since then we'd dedupe it to be
+          // deferred in future reference.
+          return serializeDeferredObject(request, value);
+        }
+
+        let propertyName = parentPropertyName;
+        if (isArray(parent) && parent[0] === REACT_ELEMENT_TYPE) {
+          // For elements, we've converted it to an array but we'll have converted
+          // it back to an element before we read the references so the property
+          // needs to be aliased.
+          switch (parentPropertyName) {
+            case '1':
+              propertyName = 'type';
+              break;
+            case '2':
+              propertyName = 'key';
+              break;
+            case '3':
+              propertyName = 'props';
+              break;
+            case '4':
+              propertyName = '_owner';
+              break;
+          }
+        }
+        writtenDebugObjects.set(value, parentReference + ':' + propertyName);
+      } else if (debugNoOutline !== value) {
+        // If this isn't the root object (like meta data) and we don't have an id for it, outline
+        // it so that we can dedupe it by reference later.
+        // $FlowFixMe[method-unbinding]
+        if (typeof value.then === 'function') {
+          // If this is a Promise we're going to assign it an external ID anyway which can be deduped.
+          const thenable: Thenable<any> = (value: any);
+          return serializeDebugThenable(request, counter, thenable);
+        } else {
+          const outlinedId = outlineDebugModel(request, counter, value);
+          return serializeByValueID(outlinedId);
+        }
+      }
+    }
+
+    const writtenObjects = request.writtenObjects;
+    const existingReference = writtenObjects.get(value);
+    if (existingReference !== undefined) {
+      // We've already emitted this as a real object, so we can refer to that by its existing reference.
+      // This might be slightly different serialization than what renderDebugModel would've produced.
+      return existingReference;
+    }
+
+    if (counter.objectLimit <= 0 && !doNotLimit.has(value)) {
+      // We've reached our max number of objects to serialize across the wire so we serialize this
+      // as a marker so that the client can error or lazy load this when accessed by the console.
+      return serializeDeferredObject(request, value);
+    }
+
+    counter.objectLimit--;
+
+    const deferredDebugObjects = request.deferredDebugObjects;
+    if (deferredDebugObjects !== null) {
+      const deferredId = deferredDebugObjects.existing.get(value);
+      // We earlier deferred this same object. We're now going to eagerly emit it so let's emit it
+      // at the same ID that we already used to refer to it.
+      if (deferredId !== undefined) {
+        deferredDebugObjects.existing.delete(value);
+        deferredDebugObjects.retained.delete(deferredId);
+        emitOutlinedDebugModelChunk(request, deferredId, counter, value);
+        return serializeByValueID(deferredId);
+      }
+    }
+
+    switch ((value: any).$$typeof) {
+      case REACT_ELEMENT_TYPE: {
+        const element: ReactElement = (value: any);
+
+        if (element._owner != null) {
+          outlineComponentInfo(request, element._owner);
+        }
+        if (typeof element.type === 'object' && element.type !== null) {
+          // If the type is an object it can get cut off which shouldn't happen here.
+          doNotLimit.add(element.type);
+        }
+        if (typeof element.key === 'object' && element.key !== null) {
+          // This should never happen but just in case.
+          doNotLimit.add(element.key);
+        }
+        doNotLimit.add(element.props);
+        if (element._owner !== null) {
+          doNotLimit.add(element._owner);
+        }
+
+        let debugStack: null | ReactStackTrace = null;
+        if (element._debugStack != null) {
+          // Outline the debug stack so that it doesn't get cut off.
+          debugStack = filterStackTrace(
+            request,
+            parseStackTrace(element._debugStack, 1),
+          );
+          doNotLimit.add(debugStack);
+          for (let i = 0; i < debugStack.length; i++) {
+            doNotLimit.add(debugStack[i]);
+          }
+        }
+        return [
+          REACT_ELEMENT_TYPE,
+          element.type,
+          element.key,
+          element.props,
+          element._owner,
+          debugStack,
+          element._store.validated,
+        ];
+      }
+      case REACT_LAZY_TYPE: {
+        // To avoid actually initializing a lazy causing a side-effect, we make
+        // some assumptions about the structure of the payload even though
+        // that's not really part of the contract. In practice, this is really
+        // just coming from React.lazy helper or Flight.
+        const lazy: LazyComponent<any, any> = (value: any);
+        const payload = lazy._payload;
+
+        if (payload !== null && typeof payload === 'object') {
+          // React.lazy constructor
+          switch (payload._status) {
+            case -1 /* Uninitialized */:
+            case 0 /* Pending */:
+              break;
+            case 1 /* Resolved */: {
+              const id = outlineDebugModel(request, counter, payload._result);
+              return serializeLazyID(id);
+            }
+            case 2 /* Rejected */: {
+              // We don't log these errors since they didn't actually throw into
+              // Flight.
+              const digest = '';
+              const id = request.nextChunkId++;
+              emitErrorChunk(request, id, digest, payload._result, true, null);
+              return serializeLazyID(id);
+            }
+          }
+
+          // React Flight
+          switch (payload.status) {
+            case 'pending':
+            case 'blocked':
+            case 'resolved_model':
+              // The value is an uninitialized model from the Flight client.
+              // It's not very useful to emit that.
+              break;
+            case 'resolved_module':
+              // The value is client reference metadata from the Flight client.
+              // It's likely for SSR, so we choose not to emit it.
+              break;
+            case 'fulfilled': {
+              const id = outlineDebugModel(request, counter, payload.value);
+              return serializeLazyID(id);
+            }
+            case 'rejected': {
+              // We don't log these errors since they didn't actually throw into
+              // Flight.
+              const digest = '';
+              const id = request.nextChunkId++;
+              emitErrorChunk(request, id, digest, payload.reason, true, null);
+              return serializeLazyID(id);
+            }
+          }
+        }
+
+        // We couldn't emit a resolved or rejected value synchronously. For now,
+        // we emit this as a halted chunk. TODO: We could maybe also handle
+        // pending lazy debug models like we do in serializeDebugThenable,
+        // if/when we determine that it's worth the added complexity.
+        request.pendingDebugChunks++;
+        const id = request.nextChunkId++;
+        emitDebugHaltChunk(request, id);
+        return serializeLazyID(id);
+      }
+    }
+
+    // $FlowFixMe[method-unbinding]
+    if (typeof value.then === 'function') {
+      const thenable: Thenable<any> = (value: any);
+      return serializeDebugThenable(request, counter, thenable);
+    }
+
+    if (isArray(value)) {
+      if (value.length > 200 && !doNotLimit.has(value)) {
+        // Defer large arrays. They're heavy to serialize.
+        // TODO: Consider doing the same for objects with many properties too.
+        return serializeDeferredObject(request, value);
+      }
+      return value;
+    }
+
+    if (value instanceof Date) {
+      return serializeDate(value);
+    }
+    if (value instanceof Map) {
+      return serializeDebugMap(request, counter, value);
+    }
+    if (value instanceof Set) {
+      return serializeDebugSet(request, counter, value);
+    }
+    // TODO: FormData is not available in old Node. Remove the typeof later.
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeDebugFormData(request, value);
+    }
+    if (value instanceof Error) {
+      return serializeDebugErrorValue(request, value);
+    }
+    if (value instanceof ArrayBuffer) {
+      return serializeDebugTypedArray(request, 'A', new Uint8Array(value));
+    }
+    if (value instanceof Int8Array) {
+      // char
+      return serializeDebugTypedArray(request, 'O', value);
+    }
+    if (value instanceof Uint8Array) {
+      // unsigned char
+      return serializeDebugTypedArray(request, 'o', value);
+    }
+    if (value instanceof Uint8ClampedArray) {
+      // unsigned clamped char
+      return serializeDebugTypedArray(request, 'U', value);
+    }
+    if (value instanceof Int16Array) {
+      // sort
+      return serializeDebugTypedArray(request, 'S', value);
+    }
+    if (value instanceof Uint16Array) {
+      // unsigned short
+      return serializeDebugTypedArray(request, 's', value);
+    }
+    if (value instanceof Int32Array) {
+      // long
+      return serializeDebugTypedArray(request, 'L', value);
+    }
+    if (value instanceof Uint32Array) {
+      // unsigned long
+      return serializeDebugTypedArray(request, 'l', value);
+    }
+    if (value instanceof Float32Array) {
+      // float
+      return serializeDebugTypedArray(request, 'G', value);
+    }
+    if (value instanceof Float64Array) {
+      // double
+      return serializeDebugTypedArray(request, 'g', value);
+    }
+    if (value instanceof BigInt64Array) {
+      // number
+      return serializeDebugTypedArray(request, 'M', value);
+    }
+    if (value instanceof BigUint64Array) {
+      // unsigned number
+      // We use "m" instead of "n" since JSON can start with "null"
+      return serializeDebugTypedArray(request, 'm', value);
+    }
+    if (value instanceof DataView) {
+      return serializeDebugTypedArray(request, 'V', value);
+    }
+    // TODO: Blob is not available in old Node. Remove the typeof check later.
+    if (typeof Blob === 'function' && value instanceof Blob) {
+      return serializeDebugBlob(request, value);
+    }
+
+    const iteratorFn = getIteratorFn(value);
+    if (iteratorFn) {
+      return Array.from((value: any));
+    }
+
+    const proto = getPrototypeOf(value);
+    if (proto !== ObjectPrototype && proto !== null) {
+      const object: Object = value;
+      const instanceDescription: Object = Object.create(null);
+      for (const propName in object) {
+        if (hasOwnProperty.call(value, propName) || isGetter(proto, propName)) {
+          // We intentionally invoke getters on the prototype to read any enumerable getters.
+          instanceDescription[propName] = object[propName];
+        }
+      }
+      const constructor = proto.constructor;
+      if (
+        typeof constructor === 'function' &&
+        constructor.prototype === proto
+      ) {
+        // This is a simple class shape.
+        if (hasOwnProperty.call(object, '') || isGetter(proto, '')) {
+          // This object already has an empty property name. Skip encoding its prototype.
+        } else {
+          instanceDescription[''] = {
+            $$typeof: CONSTRUCTOR_MARKER,
+            constructor: constructor,
+          };
+        }
+      }
+      return instanceDescription;
+    }
+
+    // $FlowFixMe[incompatible-return]
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    if (value.length >= 1024) {
+      // Large strings are counted towards the object limit.
+      if (counter.objectLimit <= 0) {
+        // We've reached our max number of objects to serialize across the wire so we serialize this
+        // as a marker so that the client can error or lazy load this when accessed by the console.
+        return serializeDeferredObject(request, value);
+      }
+      counter.objectLimit--;
+      // For large strings, we encode them outside the JSON payload so that we
+      // don't have to double encode and double parse the strings. This can also
+      // be more compact in case the string has a lot of escaped characters.
+      return serializeDebugLargeTextString(request, value);
+    }
+    return escapeStringValue(value);
+  }
+
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'number') {
+    return serializeNumber(value);
+  }
+
+  if (typeof value === 'undefined') {
+    return serializeUndefined();
+  }
+
+  if (typeof value === 'function') {
+    if (isClientReference(value)) {
+      return serializeDebugClientReference(
+        request,
+        parent,
+        parentPropertyName,
+        (value: any),
+      );
+    }
+    if (request.temporaryReferences !== undefined) {
+      const tempRef = resolveTemporaryReference(
+        request.temporaryReferences,
+        value,
+      );
+      if (tempRef !== undefined) {
+        return serializeTemporaryReference(request, tempRef);
+      }
+    }
+
+    // Serialize the body of the function as an eval so it can be printed.
+    const writtenDebugObjects = request.writtenDebugObjects;
+    const existingReference = writtenDebugObjects.get(value);
+    if (existingReference !== undefined) {
+      // We've already emitted this function, so we can
+      // just refer to that by its existing reference.
+      return existingReference;
+    }
+
+    // $FlowFixMe[method-unbinding]
+    const functionBody: string = Function.prototype.toString.call(value);
+
+    const name = value.name;
+    const serializedValue = serializeEval(
+      typeof name === 'string'
+        ? 'Object.defineProperty(' +
+            functionBody +
+            ',"name",{value:' +
+            JSON.stringify(name) +
+            '})'
+        : '(' + functionBody + ')',
+    );
+    request.pendingDebugChunks++;
+    const id = request.nextChunkId++;
+    const processedChunk = encodeReferenceChunk(request, id, serializedValue);
+    request.completedDebugChunks.push(processedChunk);
+    const reference = serializeByValueID(id);
+    writtenDebugObjects.set(value, reference);
+    return reference;
+  }
+
+  if (typeof value === 'symbol') {
+    const writtenSymbols = request.writtenSymbols;
+    const existingId = writtenSymbols.get(value);
+    if (existingId !== undefined) {
+      return serializeByValueID(existingId);
+    }
+    // $FlowFixMe[incompatible-type] `description` might be undefined
+    const name: string = value.description;
+    // We use the Symbol.for version if it's not a global symbol. Close enough.
+    request.pendingChunks++;
+    const symbolId = request.nextChunkId++;
+    emitSymbolChunk(request, symbolId, name);
+    return serializeByValueID(symbolId);
+  }
+
+  if (typeof value === 'bigint') {
+    return serializeBigInt(value);
+  }
+
+  return 'unknown type ' + typeof value;
+}
+
+function serializeDebugModel(
+  request: Request,
+  objectLimit: number,
+  model: mixed,
+): string {
+  const counter = {objectLimit: objectLimit};
+
+  function replacer(
+    this:
+      | {+[key: string | number]: ReactClientValue}
+      | $ReadOnlyArray<ReactClientValue>,
+    parentPropertyName: string,
+    value: ReactClientValue,
+  ): ReactJSONValue {
+    try {
+      // By-pass toJSON and use the original value.
+      // $FlowFixMe[incompatible-use]
+      const originalValue = this[parentPropertyName];
+      return renderDebugModel(
+        request,
+        counter,
+        this,
+        parentPropertyName,
+        originalValue,
+      );
+    } catch (x) {
+      return (
+        'Unknown Value: React could not send it from the server.\n' + x.message
+      );
+    }
+  }
+
+  const prevNoOutline = debugNoOutline;
+  debugNoOutline = model;
+  try {
+    // $FlowFixMe[incompatible-cast] stringify can return null
+    return (stringify(model, replacer): string);
+  } catch (x) {
+    // $FlowFixMe[incompatible-cast] stringify can return null
+    return (stringify(
+      'Unknown Value: React could not send it from the server.\n' + x.message,
+    ): string);
+  } finally {
+    debugNoOutline = prevNoOutline;
+  }
+}
+
+function emitOutlinedDebugModelChunk(
+  request: Request,
+  id: number,
+  counter: {objectLimit: number},
+  model: ReactClientValue,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'emitOutlinedDebugModel should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  if (typeof model === 'object' && model !== null) {
+    // We can't limit outlined values.
+    doNotLimit.add(model);
+  }
+
+  function replacer(
+    this:
+      | {+[key: string | number]: ReactClientValue}
+      | $ReadOnlyArray<ReactClientValue>,
+    parentPropertyName: string,
+    value: ReactClientValue,
+  ): ReactJSONValue {
+    try {
+      // By-pass toJSON and use the original value.
+      // $FlowFixMe[incompatible-use]
+      const originalValue = this[parentPropertyName];
+      return renderDebugModel(
+        request,
+        counter,
+        this,
+        parentPropertyName,
+        originalValue,
+      );
+    } catch (x) {
+      return (
+        'Unknown Value: React could not send it from the server.\n' + x.message
+      );
+    }
+  }
+
+  const prevModelRoot = debugModelRoot;
+  debugModelRoot = model;
+  if (typeof model === 'object' && model !== null) {
+    // Future references can refer to this object by id.
+    request.writtenDebugObjects.set(model, serializeByValueID(id));
+  }
+  let json: string;
+  try {
+    // $FlowFixMe[incompatible-cast] stringify can return null
+    json = (stringify(model, replacer): string);
+  } catch (x) {
+    // $FlowFixMe[incompatible-cast] stringify can return null
+    json = (stringify(
+      'Unknown Value: React could not send it from the server.\n' + x.message,
+    ): string);
+  } finally {
+    debugModelRoot = prevModelRoot;
+  }
+
+  const row = id.toString(16) + ':' + json + '\n';
+  const processedChunk = stringToChunk(row);
+  request.completedDebugChunks.push(processedChunk);
+}
+
+function outlineDebugModel(
+  request: Request,
+  counter: {objectLimit: number},
+  model: ReactClientValue,
+): number {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'outlineDebugModel should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  const id = request.nextChunkId++;
+  request.pendingDebugChunks++;
+  emitOutlinedDebugModelChunk(request, id, counter, model);
+  return id;
+}
+
+function emitConsoleChunk(
+  request: Request,
+  methodName: string,
+  owner: null | ReactComponentInfo,
+  env: string,
+  stackTrace: ReactStackTrace,
+  args: Array<any>,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'emitConsoleChunk should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  // Ensure the owner is already outlined.
+  if (owner != null) {
+    outlineComponentInfo(request, owner);
+  }
+
+  const payload = [methodName, stackTrace, owner, env];
+  // $FlowFixMe[method-unbinding]
+  payload.push.apply(payload, args);
+  const objectLimit = request.deferredDebugObjects === null ? 500 : 10;
+  let json = serializeDebugModel(
+    request,
+    objectLimit + stackTrace.length,
+    payload,
+  );
+  if (json[0] !== '[') {
+    // This looks like an error. Try a simpler object.
+    json = serializeDebugModel(request, 10 + stackTrace.length, [
+      methodName,
+      stackTrace,
+      owner,
+      env,
+      'Unknown Value: React could not send it from the server.',
+    ]);
+  }
+  const row = ':W' + json + '\n';
+  const processedChunk = stringToChunk(row);
+  request.completedDebugChunks.push(processedChunk);
+}
+
+function emitTimeOriginChunk(request: Request, timeOrigin: number): void {
+  // We emit the time origin once. All ReactTimeInfo timestamps later in the stream
+  // are relative to this time origin. This allows for more compact number encoding
+  // and lower precision loss.
+  request.pendingDebugChunks++;
+  const row = ':N' + timeOrigin + '\n';
+  const processedChunk = stringToChunk(row);
+  // TODO: Move to its own priority queue.
+  request.completedDebugChunks.push(processedChunk);
+}
+
+function forwardDebugInfo(
+  request: Request,
+  task: Task,
+  debugInfo: ReactDebugInfo,
+) {
+  const id = task.id;
+  for (let i = 0; i < debugInfo.length; i++) {
+    const info = debugInfo[i];
+    if (typeof info.time === 'number') {
+      // When forwarding time we need to ensure to convert it to the time space of the payload.
+      // We clamp the time to the starting render of the current component. It's as if it took
+      // no time to render and await if we reuse cached content.
+      markOperationEndTime(request, task, info.time);
+    } else {
+      if (typeof info.name === 'string') {
+        // We outline this model eagerly so that we can refer to by reference as an owner.
+        // If we had a smarter way to dedupe we might not have to do this if there ends up
+        // being no references to this as an owner.
+        outlineComponentInfo(request, (info: any));
+        // Emit a reference to the outlined one.
+        request.pendingChunks++;
+        emitDebugChunk(request, id, info);
+      } else if (info.awaited) {
+        const ioInfo = info.awaited;
+        if (ioInfo.end <= request.timeOrigin) {
+          // This was already resolved when we started this render. It must have been some
+          // externally cached data. We exclude that information but we keep components and
+          // awaits that happened inside this render but might have been deduped within the
+          // render.
+        } else {
+          // Outline the IO info in case the same I/O is awaited in more than one place.
+          outlineIOInfo(request, ioInfo);
+          // Ensure the owner is already outlined.
+          if (info.owner != null) {
+            outlineComponentInfo(request, info.owner);
+          }
+          // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
+          let debugStack;
+          if (info.stack == null && info.debugStack != null) {
+            // If we have a debugStack but no parsed stack we should parse it.
+            debugStack = filterStackTrace(
+              request,
+              parseStackTrace(info.debugStack, 1),
+            );
+          } else {
+            debugStack = info.stack;
+          }
+          const debugAsyncInfo: Omit<
+            ReactAsyncInfo,
+            'debugTask' | 'debugStack',
+          > = {
+            awaited: ioInfo,
+          };
+          if (info.env != null) {
+            // $FlowFixMe[cannot-write]
+            debugAsyncInfo.env = info.env;
+          } else {
+            // If we're forwarding IO info from this environment, an empty env is effectively the "client" side.
+            // The "client" from the perspective of our client will be this current environment.
+            // $FlowFixMe[cannot-write]
+            debugAsyncInfo.env = (0, request.environmentName)();
+          }
+          if (info.owner != null) {
+            // $FlowFixMe[cannot-write]
+            debugAsyncInfo.owner = info.owner;
+          }
+          if (debugStack != null) {
+            // $FlowFixMe[cannot-write]
+            debugAsyncInfo.stack = debugStack;
+          }
+          request.pendingChunks++;
+          emitDebugChunk(request, id, debugAsyncInfo);
+        }
+      } else {
+        request.pendingChunks++;
+        emitDebugChunk(request, id, info);
+      }
+    }
+  }
+}
+
+function forwardDebugInfoFromThenable(
+  request: Request,
+  task: Task,
+  thenable: Thenable<any>,
+  owner: null | ReactComponentInfo, // DEV-only
+  stack: null | Error, // DEV-only
+): void {
+  let debugInfo: ?ReactDebugInfo;
+  if (__DEV__) {
+    // If this came from Flight, forward any debug info into this new row.
+    debugInfo = thenable._debugInfo;
+    if (debugInfo) {
+      forwardDebugInfo(request, task, debugInfo);
+    }
+  }
+  if (enableProfilerTimer && enableAsyncDebugInfo) {
+    const sequence = getAsyncSequenceFromPromise(thenable);
+    if (sequence !== null) {
+      emitAsyncSequence(request, task, sequence, debugInfo, owner, stack);
+    }
+  }
+}
+
+function forwardDebugInfoFromCurrentContext(
+  request: Request,
+  task: Task,
+  thenable: Thenable<any>,
+): void {
+  let debugInfo: ?ReactDebugInfo;
+  if (__DEV__) {
+    // If this came from Flight, forward any debug info into this new row.
+    debugInfo = thenable._debugInfo;
+    if (debugInfo) {
+      forwardDebugInfo(request, task, debugInfo);
+    }
+  }
+  if (enableProfilerTimer && enableAsyncDebugInfo) {
+    const sequence = getCurrentAsyncSequence();
+    if (sequence !== null) {
+      emitAsyncSequence(request, task, sequence, debugInfo, null, null);
+    }
+  }
+}
+
+function forwardDebugInfoFromAbortedTask(request: Request, task: Task): void {
+  // If a task is aborted, we can still include as much debug info as we can from the
+  // value that we have so far.
+  const model: any = task.model;
+  if (typeof model !== 'object' || model === null) {
+    return;
+  }
+  let debugInfo: ?ReactDebugInfo;
+  if (__DEV__) {
+    // If this came from Flight, forward any debug info into this new row.
+    debugInfo = model._debugInfo;
+    if (debugInfo) {
+      forwardDebugInfo(request, task, debugInfo);
+    }
+  }
+  if (enableProfilerTimer && enableAsyncDebugInfo) {
+    let thenable: null | Thenable<any> = null;
+    if (typeof model.then === 'function') {
+      thenable = (model: any);
+    } else if (model.$$typeof === REACT_LAZY_TYPE) {
+      const payload = model._payload;
+      if (typeof payload.then === 'function') {
+        thenable = payload;
+      }
+    }
+    if (thenable !== null) {
+      const sequence = getAsyncSequenceFromPromise(thenable);
+      if (sequence !== null) {
+        let node = sequence;
+        while (node.tag === UNRESOLVED_AWAIT_NODE && node.awaited !== null) {
+          // See if any of the dependencies are resolved yet.
+          node = node.awaited;
+        }
+        if (node.tag === UNRESOLVED_PROMISE_NODE) {
+          // We don't know what Promise will eventually end up resolving this Promise and if it
+          // was I/O at all. However, we assume that it was some kind of I/O since it didn't
+          // complete in time before aborting.
+          // The best we can do is try to emit the stack of where this Promise was created.
+          serializeIONode(request, node, null);
+          request.pendingChunks++;
+          const env = (0, request.environmentName)();
+          const asyncInfo: ReactAsyncInfo = {
+            awaited: ((node: any): ReactIOInfo), // This is deduped by this reference.
+            env: env,
+          };
+          // We don't have a start time for this await but in case there was no start time emitted
+          // we need to include something. TODO: We should maybe ideally track the time when we
+          // called .then() but without updating the task.time field since that's used for the cutoff.
+          advanceTaskTime(request, task, task.time);
+          emitDebugChunk(request, task.id, asyncInfo);
+        } else {
+          // We have a resolved Promise. Its debug info can include both awaited data and rejected
+          // promises after the abort.
+          emitAsyncSequence(request, task, sequence, debugInfo, null, null);
+        }
+      }
+    }
+  }
+}
+
+function emitTimingChunk(
+  request: Request,
+  id: number,
+  timestamp: number,
+): void {
+  if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
+    return;
+  }
+  request.pendingChunks++;
+  const relativeTimestamp = timestamp - request.timeOrigin;
+  const json = '{"time":' + relativeTimestamp + '}';
+  if (request.debugDestination !== null) {
+    // Outline the actual timing information to the debug channel.
+    const outlinedId = request.nextChunkId++;
+    const debugRow = outlinedId.toString(16) + ':' + json + '\n';
+    request.pendingDebugChunks++;
+    request.completedDebugChunks.push(stringToChunk(debugRow));
+    const row =
+      serializeRowHeader('D', id) + '"$' + outlinedId.toString(16) + '"\n';
+    request.completedRegularChunks.push(stringToChunk(row));
+  } else {
+    const row = serializeRowHeader('D', id) + json + '\n';
+    request.completedRegularChunks.push(stringToChunk(row));
+  }
+}
+
+function advanceTaskTime(
+  request: Request,
+  task: Task,
+  timestamp: number,
+): void {
+  if (
+    !enableProfilerTimer ||
+    (!enableComponentPerformanceTrack && !enableAsyncDebugInfo)
+  ) {
+    return;
+  }
+  // Emits a timing chunk, if the new timestamp is higher than the previous timestamp of this task.
+  if (timestamp > task.time) {
+    emitTimingChunk(request, task.id, timestamp);
+    task.time = timestamp;
+  } else if (!task.timed) {
+    // If it wasn't timed before, e.g. an outlined object, we need to emit the first timestamp and
+    // it is now timed.
+    emitTimingChunk(request, task.id, task.time);
+  }
+  task.timed = true;
+}
+
+function markOperationEndTime(request: Request, task: Task, timestamp: number) {
+  if (
+    !enableProfilerTimer ||
+    (!enableComponentPerformanceTrack && !enableAsyncDebugInfo)
+  ) {
+    return;
+  }
+  // This is like advanceTaskTime() but always emits a timing chunk even if it doesn't advance.
+  // This ensures that the end time of the previous entry isn't implied to be the start of the next one.
+  if (request.status === ABORTING && timestamp > request.abortTime) {
+    // If we're aborting then we don't emit any end times that happened after.
+    return;
+  }
+  if (timestamp > task.time) {
+    emitTimingChunk(request, task.id, timestamp);
+    task.time = timestamp;
+  } else {
+    emitTimingChunk(request, task.id, task.time);
+  }
+}
+
+function emitChunk(
+  request: Request,
+  task: Task,
+  value: ReactClientValue,
+): void {
+  const id = task.id;
+  // For certain types we have special types, we typically outlined them but
+  // we can emit them directly for this row instead of through an indirection.
+  if (typeof value === 'string' && byteLengthOfChunk !== null) {
+    if (enableTaint) {
+      const tainted = TaintRegistryValues.get(value);
+      if (tainted !== undefined) {
+        throwTaintViolation(tainted.message);
+      }
+    }
+    emitTextChunk(request, id, value, false);
+    return;
+  }
+  if (value instanceof ArrayBuffer) {
+    emitTypedArrayChunk(request, id, 'A', new Uint8Array(value), false);
+    return;
+  }
+  if (value instanceof Int8Array) {
+    // char
+    emitTypedArrayChunk(request, id, 'O', value, false);
+    return;
+  }
+  if (value instanceof Uint8Array) {
+    // unsigned char
+    emitTypedArrayChunk(request, id, 'o', value, false);
+    return;
+  }
+  if (value instanceof Uint8ClampedArray) {
+    // unsigned clamped char
+    emitTypedArrayChunk(request, id, 'U', value, false);
+    return;
+  }
+  if (value instanceof Int16Array) {
+    // sort
+    emitTypedArrayChunk(request, id, 'S', value, false);
+    return;
+  }
+  if (value instanceof Uint16Array) {
+    // unsigned short
+    emitTypedArrayChunk(request, id, 's', value, false);
+    return;
+  }
+  if (value instanceof Int32Array) {
+    // long
+    emitTypedArrayChunk(request, id, 'L', value, false);
+    return;
+  }
+  if (value instanceof Uint32Array) {
+    // unsigned long
+    emitTypedArrayChunk(request, id, 'l', value, false);
+    return;
+  }
+  if (value instanceof Float32Array) {
+    // float
+    emitTypedArrayChunk(request, id, 'G', value, false);
+    return;
+  }
+  if (value instanceof Float64Array) {
+    // double
+    emitTypedArrayChunk(request, id, 'g', value, false);
+    return;
+  }
+  if (value instanceof BigInt64Array) {
+    // number
+    emitTypedArrayChunk(request, id, 'M', value, false);
+    return;
+  }
+  if (value instanceof BigUint64Array) {
+    // unsigned number
+    // We use "m" instead of "n" since JSON can start with "null"
+    emitTypedArrayChunk(request, id, 'm', value, false);
+    return;
+  }
+  if (value instanceof DataView) {
+    emitTypedArrayChunk(request, id, 'V', value, false);
+    return;
+  }
+  // For anything else we need to try to serialize it using JSON.
+  // $FlowFixMe[incompatible-type] stringify can return null for undefined but we never do
+  const json: string = stringify(value, task.toJSON);
+  emitModelChunk(request, task.id, json);
+}
+
+function erroredTask(request: Request, task: Task, error: mixed): void {
+  if (
+    enableProfilerTimer &&
+    (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+  ) {
+    if (task.timed) {
+      markOperationEndTime(request, task, performance.now());
+    }
+  }
+  task.status = ERRORED;
+  const digest = logRecoverableError(request, error, task);
+  emitErrorChunk(
+    request,
+    task.id,
+    digest,
+    error,
+    false,
+    __DEV__ ? task.debugOwner : null,
+  );
+  request.abortableTasks.delete(task);
+  callOnAllReadyIfReady(request);
+}
+
+const emptyRoot = {};
+
+function retryTask(request: Request, task: Task): void {
+  if (task.status !== PENDING) {
+    // We completed this by other means before we had a chance to retry it.
+    return;
+  }
+
+  const prevCanEmitDebugInfo = canEmitDebugInfo;
+  task.status = RENDERING;
+
+  // We stash the outer parent size so we can restore it when we exit.
+  const parentSerializedSize = serializedSize;
+  // We don't reset the serialized size counter from reentry because that indicates that we
+  // are outlining a model and we actually want to include that size into the parent since
+  // it will still block the parent row. It only restores to zero at the top of the stack.
+  try {
+    // Track the root so we know that we have to emit this object even though it
+    // already has an ID. This is needed because we might see this object twice
+    // in the same toJSON if it is cyclic.
+    modelRoot = task.model;
+
+    if (__DEV__) {
+      // Track that we can emit debug info for the current task.
+      canEmitDebugInfo = true;
+    }
+
+    // We call the destructive form that mutates this task. That way if something
+    // suspends again, we can reuse the same task instead of spawning a new one.
+    const resolvedModel = renderModelDestructive(
+      request,
+      task,
+      emptyRoot,
+      '',
+      task.model,
+    );
+
+    if (__DEV__) {
+      // We're now past rendering this task and future renders will spawn new tasks for their
+      // debug info.
+      canEmitDebugInfo = false;
+    }
+
+    // Track the root again for the resolved object.
+    modelRoot = resolvedModel;
+
+    // The keyPath resets at any terminal child node.
+    task.keyPath = null;
+    task.implicitSlot = false;
+
+    if (__DEV__) {
+      const currentEnv = (0, request.environmentName)();
+      if (currentEnv !== task.environmentName) {
+        request.pendingChunks++;
+        // The environment changed since we last emitted any debug information for this
+        // task. We emit an entry that just includes the environment name change.
+        emitDebugChunk(request, task.id, {env: currentEnv});
+      }
+    }
+    // We've finished rendering. Log the end time.
+    if (
+      enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+    ) {
+      if (task.timed) {
+        markOperationEndTime(request, task, performance.now());
+      }
+    }
+
+    if (typeof resolvedModel === 'object' && resolvedModel !== null) {
+      // We're not in a contextual place here so we can refer to this object by this ID for
+      // any future references.
+      request.writtenObjects.set(resolvedModel, serializeByValueID(task.id));
+
+      // Object might contain unresolved values like additional elements.
+      // This is simulating what the JSON loop would do if this was part of it.
+      emitChunk(request, task, resolvedModel);
+    } else {
+      // If the value is a string, it means it's a terminal value and we already escaped it
+      // We don't need to escape it again so it's not passed the toJSON replacer.
+      // $FlowFixMe[incompatible-type] stringify can return null for undefined but we never do
+      const json: string = stringify(resolvedModel);
+      emitModelChunk(request, task.id, json);
+    }
+
+    task.status = COMPLETED;
+    request.abortableTasks.delete(task);
+    callOnAllReadyIfReady(request);
+  } catch (thrownValue) {
+    if (request.status === ABORTING) {
+      request.abortableTasks.delete(task);
+      task.status = PENDING;
+      if (enableHalt && request.type === PRERENDER) {
+        // When aborting a prerener with halt semantics we don't emit
+        // anything into the slot for a task that aborts, it remains unresolved
+        haltTask(task, request);
+        finishHaltedTask(task, request);
+      } else {
+        // Otherwise we emit an error chunk into the task slot.
+        const errorId: number = (request.fatalError: any);
+        abortTask(task, request, errorId);
+        finishAbortedTask(task, request, errorId);
+      }
+      return;
+    }
+
+    const x =
+      thrownValue === SuspenseException
+        ? // This is a special type of exception used for Suspense. For historical
+          // reasons, the rest of the Suspense implementation expects the thrown
+          // value to be a thenable, because before `use` existed that was the
+          // (unstable) API for suspending. This implementation detail can change
+          // later, once we deprecate the old API in favor of `use`.
+          getSuspendedThenable()
+        : thrownValue;
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        task.status = PENDING;
+        task.thenableState = getThenableStateAfterSuspending();
+        const ping = task.ping;
+        x.then(ping, ping);
+        return;
+      }
+    }
+    erroredTask(request, task, x);
+  } finally {
+    if (__DEV__) {
+      canEmitDebugInfo = prevCanEmitDebugInfo;
+    }
+    serializedSize = parentSerializedSize;
+  }
+}
+
+function tryStreamTask(request: Request, task: Task): void {
+  // This is used to try to emit something synchronously but if it suspends,
+  // we emit a reference to a new outlined task immediately instead.
+  const prevCanEmitDebugInfo = canEmitDebugInfo;
+  if (__DEV__) {
+    // We can't emit debug into to a specific row of a stream task. Instead we leave
+    // it false so that we instead outline the row to get a new canEmitDebugInfo if needed.
+    canEmitDebugInfo = false;
+  }
+  const parentSerializedSize = serializedSize;
+  try {
+    emitChunk(request, task, task.model);
+  } finally {
+    serializedSize = parentSerializedSize;
+    if (__DEV__) {
+      canEmitDebugInfo = prevCanEmitDebugInfo;
+    }
+  }
+}
+
+function performWork(request: Request): void {
+  markAsyncSequenceRootTask();
+
+  const prevDispatcher = ReactSharedInternals.H;
+  ReactSharedInternals.H = HooksDispatcher;
+  const prevRequest = currentRequest;
+  currentRequest = request;
+  prepareToUseHooksForRequest(request);
+
+  try {
+    const pingedTasks = request.pingedTasks;
+    request.pingedTasks = [];
+    for (let i = 0; i < pingedTasks.length; i++) {
+      const task = pingedTasks[i];
+      retryTask(request, task);
+    }
+    flushCompletedChunks(request);
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  } finally {
+    ReactSharedInternals.H = prevDispatcher;
+    resetHooksForRequest();
+    currentRequest = prevRequest;
+  }
+}
+
+function abortTask(task: Task, request: Request, errorId: number): void {
+  if (task.status !== PENDING) {
+    // If this is already completed/errored we don't abort it.
+    // If currently rendering it will be aborted by the render
+    return;
+  }
+  task.status = ABORTED;
+}
+
+function finishAbortedTask(
+  task: Task,
+  request: Request,
+  errorId: number,
+): void {
+  if (task.status !== ABORTED) {
+    return;
+  }
+  forwardDebugInfoFromAbortedTask(request, task);
+  // Track when we aborted this task as its end time.
+  if (
+    enableProfilerTimer &&
+    (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+  ) {
+    if (task.timed) {
+      markOperationEndTime(request, task, request.abortTime);
+    }
+  }
+  // Instead of emitting an error per task.id, we emit a model that only
+  // has a single value referencing the error.
+  const ref = serializeByValueID(errorId);
+  const processedChunk = encodeReferenceChunk(request, task.id, ref);
+  request.completedErrorChunks.push(processedChunk);
+}
+
+function haltTask(task: Task, request: Request): void {
+  if (task.status !== PENDING) {
+    // If this is already completed/errored we don't abort it.
+    // If currently rendering it will be aborted by the render
+    return;
+  }
+  task.status = ABORTED;
+}
+
+function finishHaltedTask(task: Task, request: Request): void {
+  if (task.status !== ABORTED) {
+    return;
+  }
+  forwardDebugInfoFromAbortedTask(request, task);
+  // We don't actually emit anything for this task id because we are intentionally
+  // leaving the reference unfulfilled.
+  request.pendingChunks--;
+}
+
+function flushCompletedChunks(request: Request): void {
+  if (__DEV__ && request.debugDestination !== null) {
+    const debugDestination = request.debugDestination;
+    beginWriting(debugDestination);
+    try {
+      const debugChunks = request.completedDebugChunks;
+      let i = 0;
+      for (; i < debugChunks.length; i++) {
+        request.pendingDebugChunks--;
+        const chunk = debugChunks[i];
+        writeChunkAndReturn(debugDestination, chunk);
+      }
+      debugChunks.splice(0, i);
+    } finally {
+      completeWriting(debugDestination);
+    }
+    flushBuffered(debugDestination);
+  }
+  const destination = request.destination;
+  if (destination !== null) {
+    beginWriting(destination);
+    try {
+      // We emit module chunks first in the stream so that
+      // they can be preloaded as early as possible.
+      const importsChunks = request.completedImportChunks;
+      let i = 0;
+      for (; i < importsChunks.length; i++) {
+        request.pendingChunks--;
+        const chunk = importsChunks[i];
+        const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+        if (!keepWriting) {
+          request.destination = null;
+          i++;
+          break;
+        }
+      }
+      importsChunks.splice(0, i);
+
+      // Next comes hints.
+      const hintChunks = request.completedHintChunks;
+      i = 0;
+      for (; i < hintChunks.length; i++) {
+        const chunk = hintChunks[i];
+        const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+        if (!keepWriting) {
+          request.destination = null;
+          i++;
+          break;
+        }
+      }
+      hintChunks.splice(0, i);
+
+      // Debug meta data comes before the model data because it will often end up blocking the model from
+      // completing since the JSX will reference the debug data.
+      if (__DEV__ && request.debugDestination === null) {
+        const debugChunks = request.completedDebugChunks;
+        i = 0;
+        for (; i < debugChunks.length; i++) {
+          request.pendingDebugChunks--;
+          const chunk = debugChunks[i];
+          const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+          if (!keepWriting) {
+            request.destination = null;
+            i++;
+            break;
+          }
+        }
+        debugChunks.splice(0, i);
+      }
+
+      // Next comes model data.
+      const regularChunks = request.completedRegularChunks;
+      i = 0;
+      for (; i < regularChunks.length; i++) {
+        request.pendingChunks--;
+        const chunk = regularChunks[i];
+        const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+        if (!keepWriting) {
+          request.destination = null;
+          i++;
+          break;
+        }
+      }
+      regularChunks.splice(0, i);
+
+      // Finally, errors are sent. The idea is that it's ok to delay
+      // any error messages and prioritize display of other parts of
+      // the page.
+      const errorChunks = request.completedErrorChunks;
+      i = 0;
+      for (; i < errorChunks.length; i++) {
+        request.pendingChunks--;
+        const chunk = errorChunks[i];
+        const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+        if (!keepWriting) {
+          request.destination = null;
+          i++;
+          break;
+        }
+      }
+      errorChunks.splice(0, i);
+    } finally {
+      request.flushScheduled = false;
+      completeWriting(destination);
+    }
+    flushBuffered(destination);
+  }
+  if (request.pendingChunks === 0) {
+    if (__DEV__) {
+      const debugDestination = request.debugDestination;
+      if (request.pendingDebugChunks === 0) {
+        // Continue fully closing both streams.
+        if (debugDestination !== null) {
+          close(debugDestination);
+          request.debugDestination = null;
+        }
+      } else {
+        // We still have debug information to write.
+        if (debugDestination === null) {
+          // We'll continue writing on this stream so nothing closes.
+          return;
+        } else {
+          // We'll close the main stream but keep the debug stream open.
+          // TODO: If this destination is not currently flowing we'll not close it when it resumes flowing.
+          // We should keep a separate status for this.
+          if (request.destination !== null) {
+            request.status = CLOSED;
+            close(request.destination);
+            request.destination = null;
+          }
+          return;
+        }
+      }
+    }
+    // We're done.
+    if (enableTaint) {
+      cleanupTaintQueue(request);
+    }
+    if (request.status < ABORTING) {
+      const abortReason = new Error(
+        'This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.',
+      );
+      request.cacheController.abort(abortReason);
+    }
+    if (request.destination !== null) {
+      request.status = CLOSED;
+      close(request.destination);
+      request.destination = null;
+    }
+    if (__DEV__ && request.debugDestination !== null) {
+      close(request.debugDestination);
+      request.debugDestination = null;
+    }
+  }
+}
+
+export function startWork(request: Request): void {
+  request.flushScheduled = request.destination !== null;
+  if (supportsRequestStorage) {
+    scheduleMicrotask(() => {
+      requestStorage.run(request, performWork, request);
+    });
+  } else {
+    scheduleMicrotask(() => performWork(request));
+  }
+  scheduleWork(() => {
+    if (request.status === OPENING) {
+      request.status = OPEN;
+    }
+  });
+}
+
+function enqueueFlush(request: Request): void {
+  if (
+    request.flushScheduled === false &&
+    // If there are pinged tasks we are going to flush anyway after work completes
+    request.pingedTasks.length === 0 &&
+    // If there is no destination there is nothing we can flush to. A flush will
+    // happen when we start flowing again
+    (request.destination !== null ||
+      (__DEV__ && request.debugDestination !== null))
+  ) {
+    request.flushScheduled = true;
+    // Unlike startWork and pingTask we intetionally use scheduleWork
+    // here even during prerenders to allow as much batching as possible
+    scheduleWork(() => {
+      request.flushScheduled = false;
+      flushCompletedChunks(request);
+    });
+  }
+}
+
+function callOnAllReadyIfReady(request: Request): void {
+  if (request.abortableTasks.size === 0) {
+    const onAllReady = request.onAllReady;
+    onAllReady();
+  }
+}
+
+export function startFlowing(request: Request, destination: Destination): void {
+  if (request.status === CLOSING) {
+    request.status = CLOSED;
+    closeWithError(destination, request.fatalError);
+    return;
+  }
+  if (request.status === CLOSED) {
+    return;
+  }
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
+  request.destination = destination;
+  try {
+    flushCompletedChunks(request);
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  }
+}
+
+export function startFlowingDebug(
+  request: Request,
+  debugDestination: Destination,
+): void {
+  if (request.status === CLOSING) {
+    request.status = CLOSED;
+    closeWithError(debugDestination, request.fatalError);
+    return;
+  }
+  if (request.status === CLOSED) {
+    return;
+  }
+  if (request.debugDestination !== null) {
+    // We're already flowing.
+    return;
+  }
+  request.debugDestination = debugDestination;
+  try {
+    flushCompletedChunks(request);
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  }
+}
+
+export function stopFlowing(request: Request): void {
+  request.destination = null;
+}
+
+function finishHalt(request: Request, abortedTasks: Set<Task>): void {
+  try {
+    abortedTasks.forEach(task => finishHaltedTask(task, request));
+    const onAllReady = request.onAllReady;
+    onAllReady();
+    flushCompletedChunks(request);
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  }
+}
+
+function finishAbort(
+  request: Request,
+  abortedTasks: Set<Task>,
+  errorId: number,
+): void {
+  try {
+    abortedTasks.forEach(task => finishAbortedTask(task, request, errorId));
+    const onAllReady = request.onAllReady;
+    onAllReady();
+    flushCompletedChunks(request);
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  }
+}
+
+export function abort(request: Request, reason: mixed): void {
+  // We define any status below OPEN as OPEN equivalent
+  if (request.status > OPEN) {
+    return;
+  }
+  try {
+    request.status = ABORTING;
+    if (
+      enableProfilerTimer &&
+      (enableComponentPerformanceTrack || enableAsyncDebugInfo)
+    ) {
+      request.abortTime = performance.now();
+    }
+    request.cacheController.abort(reason);
+    const abortableTasks = request.abortableTasks;
+    if (abortableTasks.size > 0) {
+      if (enableHalt && request.type === PRERENDER) {
+        // When prerendering with halt semantics we simply halt the task
+        // and leave the reference unfulfilled.
+        abortableTasks.forEach(task => haltTask(task, request));
+        scheduleWork(() => finishHalt(request, abortableTasks));
+      } else {
+        const error =
+          reason === undefined
+            ? new Error(
+                'The render was aborted by the server without a reason.',
+              )
+            : typeof reason === 'object' &&
+                reason !== null &&
+                typeof reason.then === 'function'
+              ? new Error(
+                  'The render was aborted by the server with a promise.',
+                )
+              : reason;
+        const digest = logRecoverableError(request, error, null);
+        // When rendering we produce a shared error chunk and then
+        // fulfill each task with a reference to that chunk.
+        const errorId = request.nextChunkId++;
+        request.fatalError = errorId;
+        request.pendingChunks++;
+        emitErrorChunk(request, errorId, digest, error, false, null);
+        abortableTasks.forEach(task => abortTask(task, request, errorId));
+        scheduleWork(() => finishAbort(request, abortableTasks, errorId));
+      }
+    } else {
+      const onAllReady = request.onAllReady;
+      onAllReady();
+      flushCompletedChunks(request);
+    }
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  }
+}
+
+function fromHex(str: string): number {
+  return parseInt(str, 16);
+}
+
+export function resolveDebugMessage(request: Request, message: string): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveDebugMessage should never be called in production mode. This is a bug in React.',
+    );
+  }
+  const deferredDebugObjects = request.deferredDebugObjects;
+  if (deferredDebugObjects === null) {
+    throw new Error(
+      "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
+    );
+  }
+  if (message === '') {
+    closeDebugChannel(request);
+    return;
+  }
+  // This function lets the client ask for more data lazily through the debug channel.
+  const command = message.charCodeAt(0);
+  const ids = message.slice(2).split(',').map(fromHex);
+  switch (command) {
+    case 82 /* "R" */:
+      // Release IDs
+      for (let i = 0; i < ids.length; i++) {
+        const id = ids[i];
+        const retainedValue = deferredDebugObjects.retained.get(id);
+        if (retainedValue !== undefined) {
+          // We're no longer blocked on this. We won't emit it.
+          request.pendingDebugChunks--;
+          deferredDebugObjects.retained.delete(id);
+          deferredDebugObjects.existing.delete(retainedValue);
+          enqueueFlush(request);
+        }
+      }
+      break;
+    case 81 /* "Q" */:
+      // Query IDs
+      for (let i = 0; i < ids.length; i++) {
+        const id = ids[i];
+        const retainedValue = deferredDebugObjects.retained.get(id);
+        if (retainedValue !== undefined) {
+          // If we still have this object, and haven't emitted it before, emit it on the stream.
+          const counter = {objectLimit: 10};
+          deferredDebugObjects.retained.delete(id);
+          deferredDebugObjects.existing.delete(retainedValue);
+          emitOutlinedDebugModelChunk(request, id, counter, retainedValue);
+          enqueueFlush(request);
+        }
+      }
+      break;
+    case 80 /* "P" */:
+      // Query Promise IDs
+      for (let i = 0; i < ids.length; i++) {
+        const id = ids[i];
+        const retainedValue = deferredDebugObjects.retained.get(id);
+        if (retainedValue !== undefined) {
+          // If we still have this Promise, and haven't emitted it before, wait for it
+          // and then emit it on the stream.
+          const counter = {objectLimit: 10};
+          deferredDebugObjects.retained.delete(id);
+          emitRequestedDebugThenable(
+            request,
+            id,
+            counter,
+            (retainedValue: any),
+          );
+        }
+      }
+      break;
+    default:
+      throw new Error(
+        'Unknown command. The debugChannel was not wired up properly.',
+      );
+  }
+}
+
+export function closeDebugChannel(request: Request): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'closeDebugChannel should never be called in production mode. This is a bug in React.',
+    );
+  }
+  // This clears all remaining deferred objects, potentially resulting in the completion of the Request.
+  const deferredDebugObjects = request.deferredDebugObjects;
+  if (deferredDebugObjects === null) {
+    throw new Error(
+      "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
+    );
+  }
+  deferredDebugObjects.retained.forEach((value, id) => {
+    request.pendingDebugChunks--;
+    deferredDebugObjects.retained.delete(id);
+    deferredDebugObjects.existing.delete(value);
+  });
+  enqueueFlush(request);
+}
diff --git a/packages/react-server/src/ReactFlightServerConfig.js b/packages/react-server/src/ReactFlightServerConfig.js
new file mode 100644
index 00000000000..4d6251b12a5
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServerConfig.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/prod-error-codes */
+
+// 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.
+
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactFlightServerConfigBundlerCustom.js b/packages/react-server/src/ReactFlightServerConfigBundlerCustom.js
new file mode 100644
index 00000000000..ac3e17c6301
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServerConfigBundlerCustom.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 const $$$config: any;
+
+export opaque type ClientManifest = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export opaque type ServerReference<T> = mixed; // eslint-disable-line no-unused-vars
+export opaque type ClientReferenceMetadata: any = mixed;
+export opaque type ServerReferenceId: any = mixed;
+export opaque type ClientReferenceKey: any = mixed;
+export const isClientReference = $$$config.isClientReference;
+export const isServerReference = $$$config.isServerReference;
+export const getClientReferenceKey = $$$config.getClientReferenceKey;
+export const resolveClientReferenceMetadata =
+  $$$config.resolveClientReferenceMetadata;
+export const getServerReferenceId = $$$config.getServerReferenceId;
+export const getServerReferenceBoundArguments =
+  $$$config.getServerReferenceBoundArguments;
+export const getServerReferenceLocation = $$$config.getServerReferenceLocation;
diff --git a/packages/react-server/src/ReactFlightServerConfigDebugNode.js b/packages/react-server/src/ReactFlightServerConfigDebugNode.js
new file mode 100644
index 00000000000..9bb521be406
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServerConfigDebugNode.js
@@ -0,0 +1,388 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactStackTrace} from 'shared/ReactTypes';
+
+import type {
+  AsyncSequence,
+  IONode,
+  PromiseNode,
+  UnresolvedPromiseNode,
+  AwaitNode,
+  UnresolvedAwaitNode,
+} from './ReactFlightAsyncSequence';
+
+import {
+  IO_NODE,
+  PROMISE_NODE,
+  UNRESOLVED_PROMISE_NODE,
+  AWAIT_NODE,
+  UNRESOLVED_AWAIT_NODE,
+} from './ReactFlightAsyncSequence';
+import {resolveOwner} from './flight/ReactFlightCurrentOwner';
+import {resolveRequest, isAwaitInUserspace} from './ReactFlightServer';
+import {createHook, executionAsyncId, AsyncResource} from 'async_hooks';
+import {enableAsyncDebugInfo} from 'shared/ReactFeatureFlags';
+import {parseStackTracePrivate} from './ReactFlightServerConfig';
+
+// $FlowFixMe[method-unbinding]
+const getAsyncId = AsyncResource.prototype.asyncId;
+
+const pendingOperations: Map<number, AsyncSequence> =
+  __DEV__ && enableAsyncDebugInfo ? new Map() : (null: any);
+
+// Keep the last resolved await as a workaround for async functions missing data.
+let lastRanAwait: null | AwaitNode = null;
+
+function resolvePromiseOrAwaitNode(
+  unresolvedNode: UnresolvedAwaitNode | UnresolvedPromiseNode,
+  endTime: number,
+): AwaitNode | PromiseNode {
+  const resolvedNode: AwaitNode | PromiseNode = (unresolvedNode: any);
+  resolvedNode.tag = ((unresolvedNode.tag === UNRESOLVED_PROMISE_NODE
+    ? PROMISE_NODE
+    : AWAIT_NODE): any);
+  resolvedNode.end = endTime;
+  return resolvedNode;
+}
+
+const emptyStack: ReactStackTrace = [];
+
+// Initialize the tracing of async operations.
+// We do this globally since the async work can potentially eagerly
+// start before the first request and once requests start they can interleave.
+// In theory we could enable and disable using a ref count of active requests
+// but given that typically this is just a live server, it doesn't really matter.
+export function initAsyncDebugInfo(): void {
+  if (__DEV__ && enableAsyncDebugInfo) {
+    createHook({
+      init(
+        asyncId: number,
+        type: string,
+        triggerAsyncId: number,
+        resource: any,
+      ): void {
+        const trigger = pendingOperations.get(triggerAsyncId);
+        let node: AsyncSequence;
+        if (type === 'PROMISE') {
+          const currentAsyncId = executionAsyncId();
+          if (currentAsyncId !== triggerAsyncId) {
+            // When you call .then() on a native Promise, or await/Promise.all() a thenable,
+            // then this intermediate Promise is created. We use this as our await point
+            if (trigger === undefined) {
+              // We don't track awaits on things that started outside our tracked scope.
+              return;
+            }
+            // If the thing we're waiting on is another Await we still track that sequence
+            // so that we can later pick the best stack trace in user space.
+            let stack = null;
+            let promiseRef: WeakRef<Promise<any>>;
+            if (
+              trigger.stack !== null &&
+              (trigger.tag === AWAIT_NODE ||
+                trigger.tag === UNRESOLVED_AWAIT_NODE)
+            ) {
+              // We already had a stack for an await. In a chain of awaits we'll only need one good stack.
+              // We mark it with an empty stack to signal to any await on this await that we have a stack.
+              stack = emptyStack;
+              if (resource._debugInfo !== undefined) {
+                // We may need to forward this debug info at the end so we need to retain this promise.
+                promiseRef = new WeakRef((resource: Promise<any>));
+              } else {
+                // Otherwise, we can just refer to the inner one since that's the one we'll log anyway.
+                promiseRef = trigger.promise;
+              }
+            } else {
+              promiseRef = new WeakRef((resource: Promise<any>));
+              const request = resolveRequest();
+              if (request === null) {
+                // We don't collect stacks for awaits that weren't in the scope of a specific render.
+              } else {
+                stack = parseStackTracePrivate(new Error(), 5);
+                if (stack !== null && !isAwaitInUserspace(request, stack)) {
+                  // If this await was not done directly in user space, then clear the stack. We won't use it
+                  // anyway. This lets future awaits on this await know that we still need to get their stacks
+                  // until we find one in user space.
+                  stack = null;
+                }
+              }
+            }
+            const current = pendingOperations.get(currentAsyncId);
+            node = ({
+              tag: UNRESOLVED_AWAIT_NODE,
+              owner: resolveOwner(),
+              stack: stack,
+              start: performance.now(),
+              end: -1.1, // set when resolved.
+              promise: promiseRef,
+              awaited: trigger, // The thing we're awaiting on. Might get overrriden when we resolve.
+              previous: current === undefined ? null : current, // The path that led us here.
+            }: UnresolvedAwaitNode);
+          } else {
+            const owner = resolveOwner();
+            node = ({
+              tag: UNRESOLVED_PROMISE_NODE,
+              owner: owner,
+              stack:
+                owner === null ? null : parseStackTracePrivate(new Error(), 5),
+              start: performance.now(),
+              end: -1.1, // Set when we resolve.
+              promise: new WeakRef((resource: Promise<any>)),
+              awaited:
+                trigger === undefined
+                  ? null // It might get overridden when we resolve.
+                  : trigger,
+              previous: null,
+            }: UnresolvedPromiseNode);
+          }
+        } else if (
+          // bound-anonymous-fn is the default name for snapshots and .bind() without a name.
+          // This isn't I/O by itself but likely just a continuation. If the bound function
+          // has a name, we might treat it as I/O but we can't tell the difference.
+          type === 'bound-anonymous-fn' ||
+          // queueMicroTask, process.nextTick and setImmediate aren't considered new I/O
+          // for our purposes but just continuation of existing I/O.
+          type === 'Microtask' ||
+          type === 'TickObject' ||
+          type === 'Immediate'
+        ) {
+          // Treat the trigger as the node to carry along the sequence.
+          // For "bound-anonymous-fn" this will be the callsite of the .bind() which may not
+          // be the best if the callsite of the .run() call is within I/O which should be
+          // tracked. It might be better to track the execution context of "before()" as the
+          // execution context for anything spawned from within the run(). Basically as if
+          // it wasn't an AsyncResource at all.
+          if (trigger === undefined) {
+            return;
+          }
+          node = trigger;
+        } else {
+          // New I/O
+          if (trigger === undefined) {
+            // We have begun a new I/O sequence.
+            const owner = resolveOwner();
+            node = ({
+              tag: IO_NODE,
+              owner: owner,
+              stack:
+                owner === null ? parseStackTracePrivate(new Error(), 3) : null,
+              start: performance.now(),
+              end: -1.1, // Only set when pinged.
+              promise: null,
+              awaited: null,
+              previous: null,
+            }: IONode);
+          } else if (
+            trigger.tag === AWAIT_NODE ||
+            trigger.tag === UNRESOLVED_AWAIT_NODE
+          ) {
+            // We have begun a new I/O sequence after the await.
+            const owner = resolveOwner();
+            node = ({
+              tag: IO_NODE,
+              owner: owner,
+              stack:
+                owner === null ? parseStackTracePrivate(new Error(), 3) : null,
+              start: performance.now(),
+              end: -1.1, // Only set when pinged.
+              promise: null,
+              awaited: null,
+              previous: trigger,
+            }: IONode);
+          } else {
+            // Otherwise, this is just a continuation of the same I/O sequence.
+            node = trigger;
+          }
+        }
+        pendingOperations.set(asyncId, node);
+      },
+      before(asyncId: number): void {
+        const node = pendingOperations.get(asyncId);
+        if (node !== undefined) {
+          switch (node.tag) {
+            case IO_NODE: {
+              lastRanAwait = null;
+              // Log the end time when we resolved the I/O.
+              const ioNode: IONode = (node: any);
+              if (ioNode.end < 0) {
+                ioNode.end = performance.now();
+              } else {
+                // This can happen more than once if it's a recurring resource like a connection.
+                // Even for single events like setTimeout, this can happen three times due to ticks
+                // and microtasks each running its own scope.
+                // To preserve each operation's separate end time, we create a clone of the IO node.
+                // Any pre-existing reference will refer to the first resolution and any new resolutions
+                // will refer to the new node.
+                const clonedNode: IONode = {
+                  tag: IO_NODE,
+                  owner: ioNode.owner,
+                  stack: ioNode.stack,
+                  start: ioNode.start,
+                  end: performance.now(),
+                  promise: ioNode.promise,
+                  awaited: ioNode.awaited,
+                  previous: ioNode.previous,
+                };
+                pendingOperations.set(asyncId, clonedNode);
+              }
+              break;
+            }
+            case UNRESOLVED_AWAIT_NODE: {
+              // If we begin before we resolve, that means that this is actually already resolved but
+              // the promiseResolve hook is called at the end of the execution. So we track the time
+              // in the before call instead.
+              // $FlowFixMe
+              lastRanAwait = resolvePromiseOrAwaitNode(node, performance.now());
+              break;
+            }
+            case AWAIT_NODE: {
+              lastRanAwait = node;
+              break;
+            }
+            case UNRESOLVED_PROMISE_NODE: {
+              // We typically don't expected Promises to have an execution scope since only the awaits
+              // have a then() callback. However, this can happen for native async functions. The last
+              // piece of code that executes the return after the last await has the execution context
+              // of the Promise.
+              const resolvedNode = resolvePromiseOrAwaitNode(
+                node,
+                performance.now(),
+              );
+              // We are missing information about what this was unblocked by but we can guess that it
+              // was whatever await we ran last since this will continue in a microtask after that.
+              // This is not perfect because there could potentially be other microtasks getting in
+              // between.
+              resolvedNode.previous = lastRanAwait;
+              lastRanAwait = null;
+              break;
+            }
+            default: {
+              lastRanAwait = null;
+            }
+          }
+        }
+      },
+
+      promiseResolve(asyncId: number): void {
+        const node = pendingOperations.get(asyncId);
+        if (node !== undefined) {
+          let resolvedNode: AwaitNode | PromiseNode;
+          switch (node.tag) {
+            case UNRESOLVED_AWAIT_NODE:
+            case UNRESOLVED_PROMISE_NODE: {
+              resolvedNode = resolvePromiseOrAwaitNode(node, performance.now());
+              break;
+            }
+            case AWAIT_NODE:
+            case PROMISE_NODE: {
+              // We already resolved this in the before hook.
+              resolvedNode = node;
+              break;
+            }
+            default:
+              // eslint-disable-next-line react-internal/prod-error-codes
+              throw new Error(
+                'A Promise should never be an IO_NODE. This is a bug in React.',
+              );
+          }
+          const currentAsyncId = executionAsyncId();
+          if (asyncId !== currentAsyncId) {
+            // If the promise was not resolved by itself, then that means that
+            // the trigger that we originally stored wasn't actually the dependency.
+            // Instead, the current execution context is what ultimately unblocked it.
+            const awaited = pendingOperations.get(currentAsyncId);
+            if (resolvedNode.tag === PROMISE_NODE) {
+              // For a Promise we just override the await. We're not interested in
+              // what created the Promise itself.
+              resolvedNode.awaited = awaited === undefined ? null : awaited;
+            } else {
+              // For an await, there's really two things awaited here. It's the trigger
+              // that .then() was called on but there seems to also be something else
+              // in the .then() callback that blocked the returned Promise from resolving
+              // immediately. We create a fork node which essentially represents an await
+              // of the Promise returned from the .then() callback. That Promise was blocked
+              // on the original awaited thing which we stored as "previous".
+              if (awaited !== undefined) {
+                const clonedNode: AwaitNode = {
+                  tag: AWAIT_NODE,
+                  owner: resolvedNode.owner,
+                  stack: resolvedNode.stack,
+                  start: resolvedNode.start,
+                  end: resolvedNode.end,
+                  promise: resolvedNode.promise,
+                  awaited: resolvedNode.awaited,
+                  previous: resolvedNode.previous,
+                };
+                // We started awaiting on the callback when the original .then() resolved.
+                resolvedNode.start = resolvedNode.end;
+                // It resolved now. We could use the end time of "awaited" maybe.
+                resolvedNode.end = performance.now();
+                resolvedNode.previous = clonedNode;
+                resolvedNode.awaited = awaited;
+              }
+            }
+          }
+        }
+      },
+
+      destroy(asyncId: number): void {
+        // If we needed the meta data from this operation we should have already
+        // extracted it or it should be part of a chain of triggers.
+        pendingOperations.delete(asyncId);
+      },
+    }).enable();
+  }
+}
+
+export function markAsyncSequenceRootTask(): void {
+  if (__DEV__ && enableAsyncDebugInfo) {
+    // Whatever Task we're running now is spawned by React itself to perform render work.
+    // Don't track any cause beyond this task. We may still track I/O that was started outside
+    // React but just not the cause of entering the render.
+    pendingOperations.delete(executionAsyncId());
+  }
+}
+
+export function getCurrentAsyncSequence(): null | AsyncSequence {
+  if (!__DEV__ || !enableAsyncDebugInfo) {
+    return null;
+  }
+  const currentNode = pendingOperations.get(executionAsyncId());
+  if (currentNode === undefined) {
+    // Nothing that we tracked led to the resolution of this execution context.
+    return null;
+  }
+  return currentNode;
+}
+
+export function getAsyncSequenceFromPromise(
+  promise: any,
+): null | AsyncSequence {
+  if (!__DEV__ || !enableAsyncDebugInfo) {
+    return null;
+  }
+  // A Promise is conceptually an AsyncResource but doesn't have its own methods.
+  // We use this hack to extract the internal asyncId off the Promise.
+  let asyncId: void | number;
+  try {
+    asyncId = getAsyncId.call(promise);
+  } catch (x) {
+    // Ignore errors extracting the ID. We treat it as missing.
+    // This could happen if our hack stops working or in the case where this is
+    // a Proxy that throws such as our own ClientReference proxies.
+  }
+  if (asyncId === undefined) {
+    return null;
+  }
+  const node = pendingOperations.get(asyncId);
+  if (node === undefined) {
+    return null;
+  }
+  return node;
+}
diff --git a/packages/react-server/src/ReactFlightServerConfigDebugNoop.js b/packages/react-server/src/ReactFlightServerConfigDebugNoop.js
new file mode 100644
index 00000000000..e435929114b
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServerConfigDebugNoop.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncSequence} from './ReactFlightAsyncSequence';
+
+// Exported for runtimes that don't support Promise instrumentation for async debugging.
+export function initAsyncDebugInfo(): void {}
+export function markAsyncSequenceRootTask(): void {}
+export function getCurrentAsyncSequence(): null | AsyncSequence {
+  return null;
+}
+export function getAsyncSequenceFromPromise(
+  promise: any,
+): null | AsyncSequence {
+  return null;
+}
diff --git a/packages/react-server/src/ReactFlightServerTemporaryReferences.js b/packages/react-server/src/ReactFlightServerTemporaryReferences.js
new file mode 100644
index 00000000000..581fdc70feb
--- /dev/null
+++ b/packages/react-server/src/ReactFlightServerTemporaryReferences.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference');
+
+export opaque type TemporaryReferenceSet = WeakMap<
+  TemporaryReference<any>,
+  string,
+>;
+
+// eslint-disable-next-line no-unused-vars
+export interface TemporaryReference<T> {}
+
+export function createTemporaryReferenceSet(): TemporaryReferenceSet {
+  return new WeakMap();
+}
+
+export function isOpaqueTemporaryReference(reference: Object): boolean {
+  return reference.$$typeof === TEMPORARY_REFERENCE_TAG;
+}
+
+export function resolveTemporaryReference<T>(
+  temporaryReferences: TemporaryReferenceSet,
+  temporaryReference: TemporaryReference<T>,
+): void | string {
+  return temporaryReferences.get(temporaryReference);
+}
+
+const proxyHandlers: Proxy$traps<mixed> = {
+  get: function (
+    target: Function,
+    name: string | symbol,
+    receiver: Proxy<Function>,
+  ) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        // These names are a little too common. We should probably have a way to
+        // have the Flight runtime extract the inner target instead.
+        return target.$$typeof;
+      case 'name':
+        return undefined;
+      case 'displayName':
+        return undefined;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+      case 'defaultProps':
+        return undefined;
+      // React looks for debugInfo on thenables.
+      case '_debugInfo':
+        return undefined;
+      // Avoid this attempting to be serialized.
+      case 'toJSON':
+        return undefined;
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+      case 'Provider':
+        throw new Error(
+          `Cannot render a Client Context Provider on the Server. ` +
+            `Instead, you can export a Client Component wrapper ` +
+            `that itself renders a Client Context Provider.`,
+        );
+      case 'then':
+        // Allow returning a temporary reference from an async function
+        // Unlike regular Client References, a Promise would never have been serialized as
+        // an opaque Temporary Reference, but instead would have been serialized as a
+        // Promise on the server and so doesn't hit this path. So we can assume this wasn't
+        // a Promise on the client.
+        return undefined;
+    }
+    throw new Error(
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      `Cannot access ${String(name)} on the server. ` +
+        'You cannot dot into a temporary client reference from a server component. ' +
+        'You can only pass the value through to the client.',
+    );
+  },
+  set: function () {
+    throw new Error(
+      'Cannot assign to a temporary client reference from a server module.',
+    );
+  },
+};
+
+export function createTemporaryReference<T>(
+  temporaryReferences: TemporaryReferenceSet,
+  id: string,
+): TemporaryReference<T> {
+  const reference: TemporaryReference<any> = Object.defineProperties(
+    (function () {
+      throw new Error(
+        `Attempted to call a temporary Client Reference from the server but it is on the client. ` +
+          `It's not possible to invoke a client function from the server, it can ` +
+          `only be rendered as a Component or passed to props of a Client Component.`,
+      );
+    }: any),
+    {
+      $$typeof: {value: TEMPORARY_REFERENCE_TAG},
+    },
+  );
+  const wrapper = new Proxy(reference, proxyHandlers);
+  registerTemporaryReference(temporaryReferences, wrapper, id);
+  return wrapper;
+}
+
+export function registerTemporaryReference(
+  temporaryReferences: TemporaryReferenceSet,
+  object: TemporaryReference<any>,
+  id: string,
+): void {
+  temporaryReferences.set(object, id);
+}
diff --git a/packages/react-server/src/ReactFlightStackConfigV8.js b/packages/react-server/src/ReactFlightStackConfigV8.js
new file mode 100644
index 00000000000..1aa97cb8e6b
--- /dev/null
+++ b/packages/react-server/src/ReactFlightStackConfigV8.js
@@ -0,0 +1,253 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactStackTrace} from 'shared/ReactTypes';
+
+let framesToSkip: number = 0;
+let collectedStackTrace: null | ReactStackTrace = null;
+
+const identifierRegExp = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+
+function getMethodCallName(callSite: CallSite): string {
+  const typeName = callSite.getTypeName();
+  const methodName = callSite.getMethodName();
+  const functionName = callSite.getFunctionName();
+  let result = '';
+  if (functionName) {
+    if (
+      typeName &&
+      identifierRegExp.test(functionName) &&
+      functionName !== typeName
+    ) {
+      result += typeName + '.';
+    }
+    result += functionName;
+    if (
+      methodName &&
+      functionName !== methodName &&
+      !functionName.endsWith('.' + methodName) &&
+      !functionName.endsWith(' ' + methodName)
+    ) {
+      result += ' [as ' + methodName + ']';
+    }
+  } else {
+    if (typeName) {
+      result += typeName + '.';
+    }
+    if (methodName) {
+      result += methodName;
+    } else {
+      result += '<anonymous>';
+    }
+  }
+  return result;
+}
+
+function collectStackTracePrivate(
+  error: Error,
+  structuredStackTrace: CallSite[],
+): string {
+  const result: ReactStackTrace = [];
+  // Collect structured stack traces from the callsites.
+  // We mirror how V8 serializes stack frames and how we later parse them.
+  for (let i = framesToSkip; i < structuredStackTrace.length; i++) {
+    const callSite = structuredStackTrace[i];
+    let name = callSite.getFunctionName() || '<anonymous>';
+    if (name.includes('react_stack_bottom_frame')) {
+      // Skip everything after the bottom frame since it'll be internals.
+      break;
+    } else if (callSite.isNative()) {
+      // $FlowFixMe[prop-missing]
+      const isAsync = callSite.isAsync();
+      result.push([name, '', 0, 0, 0, 0, isAsync]);
+    } else {
+      // We encode complex function calls as if they're part of the function
+      // name since we cannot simulate the complex ones and they look the same
+      // as function names in UIs on the client as well as stacks.
+      if (callSite.isConstructor()) {
+        name = 'new ' + name;
+      } else if (!callSite.isToplevel()) {
+        name = getMethodCallName(callSite);
+      }
+      if (name === '<anonymous>') {
+        name = '';
+      }
+      let filename = callSite.getScriptNameOrSourceURL() || '<anonymous>';
+      if (filename === '<anonymous>') {
+        filename = '';
+        if (callSite.isEval()) {
+          const origin = callSite.getEvalOrigin();
+          if (origin) {
+            filename = origin.toString() + ', <anonymous>';
+          }
+        }
+      }
+      const line = callSite.getLineNumber() || 0;
+      const col = callSite.getColumnNumber() || 0;
+      const enclosingLine: number =
+        // $FlowFixMe[prop-missing]
+        typeof callSite.getEnclosingLineNumber === 'function'
+          ? (callSite: any).getEnclosingLineNumber() || 0
+          : 0;
+      const enclosingCol: number =
+        // $FlowFixMe[prop-missing]
+        typeof callSite.getEnclosingColumnNumber === 'function'
+          ? (callSite: any).getEnclosingColumnNumber() || 0
+          : 0;
+      // $FlowFixMe[prop-missing]
+      const isAsync = callSite.isAsync();
+      result.push([
+        name,
+        filename,
+        line,
+        col,
+        enclosingLine,
+        enclosingCol,
+        isAsync,
+      ]);
+    }
+  }
+  collectedStackTrace = result;
+  return '';
+}
+
+function collectStackTrace(
+  error: Error,
+  structuredStackTrace: CallSite[],
+): string {
+  collectStackTracePrivate(error, structuredStackTrace);
+  // At the same time we generate a string stack trace just in case someone
+  // else reads it. Ideally, we'd call the previous prepareStackTrace to
+  // ensure it's in the expected format but it's common for that to be
+  // source mapped and since we do a lot of eager parsing of errors, it
+  // would be slow in those environments. We could maybe just rely on those
+  // environments having to disable source mapping globally to speed things up.
+  // For now, we just generate a default V8 formatted stack trace without
+  // source mapping as a fallback.
+  const name = error.name || 'Error';
+  const message = error.message || '';
+  let stack = name + ': ' + message;
+  for (let i = 0; i < structuredStackTrace.length; i++) {
+    stack += '\n    at ' + structuredStackTrace[i].toString();
+  }
+  return stack;
+}
+
+// This matches either of these V8 formats.
+//     at name (filename:0:0)
+//     at filename:0:0
+//     at async filename:0:0
+const frameRegExp =
+  /^ {3} at (?:(.+) \((?:(.+):(\d+):(\d+)|\<anonymous\>)\)|(?:async )?(.+):(\d+):(\d+)|\<anonymous\>)$/;
+
+// DEV-only cache of parsed and filtered stack frames.
+const stackTraceCache: WeakMap<Error, ReactStackTrace> = __DEV__
+  ? new WeakMap()
+  : (null: any);
+
+// This version is only used when React fully owns the Error object and there's no risk of it having
+// been already initialized and no risky that anyone else will initialize it later.
+export function parseStackTracePrivate(
+  error: Error,
+  skipFrames: number,
+): null | ReactStackTrace {
+  collectedStackTrace = null;
+  framesToSkip = skipFrames;
+  const previousPrepare = Error.prepareStackTrace;
+  Error.prepareStackTrace = collectStackTracePrivate;
+  try {
+    if (error.stack !== '') {
+      return null;
+    }
+  } finally {
+    Error.prepareStackTrace = previousPrepare;
+  }
+  return collectedStackTrace;
+}
+
+export function parseStackTrace(
+  error: Error,
+  skipFrames: number,
+): ReactStackTrace {
+  // We can only get structured data out of error objects once. So we cache the information
+  // so we can get it again each time. It also helps performance when the same error is
+  // referenced more than once.
+  const existing = stackTraceCache.get(error);
+  if (existing !== undefined) {
+    return existing;
+  }
+  // We override Error.prepareStackTrace with our own version that collects
+  // the structured data. We need more information than the raw stack gives us
+  // and we need to ensure that we don't get the source mapped version.
+  collectedStackTrace = null;
+  framesToSkip = skipFrames;
+  const previousPrepare = Error.prepareStackTrace;
+  Error.prepareStackTrace = collectStackTrace;
+  let stack;
+  try {
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    stack = String(error.stack);
+  } finally {
+    Error.prepareStackTrace = previousPrepare;
+  }
+
+  if (collectedStackTrace !== null) {
+    const result = collectedStackTrace;
+    collectedStackTrace = null;
+    stackTraceCache.set(error, result);
+    return result;
+  }
+
+  // If the stack has already been read, or this is not actually a V8 compatible
+  // engine then we might not get a normalized stack and it might still have been
+  // source mapped. Regardless we try our best to parse it. This works best if the
+  // environment just uses default V8 formatting and no source mapping.
+
+  if (stack.startsWith('Error: react-stack-top-frame\n')) {
+    // V8's default formatting prefixes with the error message which we
+    // don't want/need.
+    stack = stack.slice(29);
+  }
+  let idx = stack.indexOf('react_stack_bottom_frame');
+  if (idx !== -1) {
+    idx = stack.lastIndexOf('\n', idx);
+  }
+  if (idx !== -1) {
+    // Cut off everything after the bottom frame since it'll be internals.
+    stack = stack.slice(0, idx);
+  }
+  const frames = stack.split('\n');
+  const parsedFrames: ReactStackTrace = [];
+  // We skip top frames here since they may or may not be parseable but we
+  // want to skip the same number of frames regardless. I.e. we can't do it
+  // in the caller.
+  for (let i = skipFrames; i < frames.length; i++) {
+    const parsed = frameRegExp.exec(frames[i]);
+    if (!parsed) {
+      continue;
+    }
+    let name = parsed[1] || '';
+    let isAsync = parsed[8] === 'async ';
+    if (name === '<anonymous>') {
+      name = '';
+    } else if (name.startsWith('async ')) {
+      name = name.slice(5);
+      isAsync = true;
+    }
+    let filename = parsed[2] || parsed[5] || '';
+    if (filename === '<anonymous>') {
+      filename = '';
+    }
+    const line = +(parsed[3] || parsed[6]);
+    const col = +(parsed[4] || parsed[7]);
+    parsedFrames.push([name, filename, line, col, 0, 0, isAsync]);
+  }
+  stackTraceCache.set(error, parsedFrames);
+  return parsedFrames;
+}
diff --git a/packages/react-server/src/ReactFlightThenable.js b/packages/react-server/src/ReactFlightThenable.js
new file mode 100644
index 00000000000..99ddb36fa59
--- /dev/null
+++ b/packages/react-server/src/ReactFlightThenable.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally,
+// changes to one module should be reflected in the others.
+
+// TODO: Rename this module and the corresponding Fiber one to "Thenable"
+// instead of "Wakeable". Or some other more appropriate name.
+
+import type {
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+import {enableAsyncDebugInfo} from 'shared/ReactFeatureFlags';
+
+import noop from 'shared/noop';
+
+export type ThenableState = Array<Thenable<any>>;
+
+// An error that is thrown (e.g. by `use`) to trigger Suspense. If we
+// detect this is caught by userspace, we'll log a warning in development.
+export const SuspenseException: mixed = new Error(
+  "Suspense Exception: This is not a real error! It's an implementation " +
+    'detail of `use` to interrupt the current render. You must either ' +
+    'rethrow it immediately, or move the `use` call outside of the ' +
+    '`try/catch` block. Capturing without rethrowing will lead to ' +
+    'unexpected behavior.\n\n' +
+    'To handle async errors, wrap your component in an error boundary, or ' +
+    "call the promise's `.catch` method and pass the result to `use`.",
+);
+
+export function createThenableState(): ThenableState {
+  // The ThenableState is created the first time a component suspends. If it
+  // suspends again, we'll reuse the same state.
+  return [];
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+): T {
+  const previous = thenableState[index];
+  if (previous === undefined) {
+    thenableState.push(thenable);
+    if (__DEV__ && enableAsyncDebugInfo) {
+      const stacks: Array<Error> =
+        (thenableState: any)._stacks || ((thenableState: any)._stacks = []);
+      stacks.push(new Error());
+    }
+  } else {
+    if (previous !== thenable) {
+      // Reuse the previous thenable, and drop the new one. We can assume
+      // they represent the same value, because components are idempotent.
+
+      // Avoid an unhandled rejection errors for the Promises that we'll
+      // intentionally ignore.
+      thenable.then(noop, noop);
+      thenable = previous;
+    }
+  }
+
+  // We use an expando to track the status and result of a thenable so that we
+  // can synchronously unwrap the value. Think of this as an extension of the
+  // Promise API, or a custom interface that is a superset of Thenable.
+  //
+  // If the thenable doesn't have a status, set it to "pending" and attach
+  // a listener that will update its status and result when it resolves.
+  switch (thenable.status) {
+    case 'fulfilled': {
+      const fulfilledValue: T = thenable.value;
+      return fulfilledValue;
+    }
+    case 'rejected': {
+      const rejectedError = thenable.reason;
+      throw rejectedError;
+    }
+    default: {
+      if (typeof thenable.status === 'string') {
+        // Only instrument the thenable if the status if not defined. If
+        // it's defined, but an unknown value, assume it's been instrumented by
+        // some custom userspace implementation. We treat it as "pending".
+        // Attach a dummy listener, to ensure that any lazy initialization can
+        // happen. Flight lazily parses JSON when the value is actually awaited.
+        thenable.then(noop, noop);
+      } else {
+        const pendingThenable: PendingThenable<T> = (thenable: any);
+        pendingThenable.status = 'pending';
+        pendingThenable.then(
+          fulfilledValue => {
+            if (thenable.status === 'pending') {
+              const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = fulfilledValue;
+            }
+          },
+          (error: mixed) => {
+            if (thenable.status === 'pending') {
+              const rejectedThenable: RejectedThenable<T> = (thenable: any);
+              rejectedThenable.status = 'rejected';
+              rejectedThenable.reason = error;
+            }
+          },
+        );
+      }
+
+      // Check one more time in case the thenable resolved synchronously
+      switch ((thenable: Thenable<T>).status) {
+        case 'fulfilled': {
+          const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+          return fulfilledThenable.value;
+        }
+        case 'rejected': {
+          const rejectedThenable: RejectedThenable<T> = (thenable: any);
+          throw rejectedThenable.reason;
+        }
+      }
+
+      // Suspend.
+      //
+      // Throwing here is an implementation detail that allows us to unwind the
+      // call stack. But we shouldn't allow it to leak into userspace. Throw an
+      // opaque placeholder value instead of the actual thenable. If it doesn't
+      // get captured by the work loop, log a warning, because that means
+      // something in userspace must have caught it.
+      suspendedThenable = thenable;
+      throw SuspenseException;
+    }
+  }
+}
+
+// This is used to track the actual thenable that suspended so it can be
+// passed to the rest of the Suspense implementation — which, for historical
+// reasons, expects to receive a thenable.
+let suspendedThenable: Thenable<any> | null = null;
+export function getSuspendedThenable(): Thenable<mixed> {
+  // This is called right after `use` suspends by throwing an exception. `use`
+  // throws an opaque value instead of the thenable itself so that it can't be
+  // caught in userspace. Then the work loop accesses the actual thenable using
+  // this function.
+  if (suspendedThenable === null) {
+    throw new Error(
+      'Expected a suspended thenable. This is a bug in React. Please file ' +
+        'an issue.',
+    );
+  }
+  const thenable = suspendedThenable;
+  suspendedThenable = null;
+  return thenable;
+}
diff --git a/packages/react-server/src/ReactServerConsoleConfigBrowser.js b/packages/react-server/src/ReactServerConsoleConfigBrowser.js
new file mode 100644
index 00000000000..be8bf953467
--- /dev/null
+++ b/packages/react-server/src/ReactServerConsoleConfigBrowser.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with ReactClientConsoleConfig
+const badgeFormat = '%c%s%c';
+// Same badge styling as DevTools.
+const badgeStyle =
+  // We use a fixed background if light-dark is not supported, otherwise
+  // we use a transparent background.
+  'background: #e6e6e6;' +
+  'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
+  'color: #000000;' +
+  'color: light-dark(#000000, #ffffff);' +
+  'border-radius: 2px';
+
+const padLength = 1;
+
+// This mutates the args to remove any badges that was added by a FlightClient and
+// returns the name in the badge. This is used when a FlightClient replays inside
+// a FlightServer and we capture those replays.
+export function unbadgeConsole(
+  methodName: string,
+  args: Array<any>,
+): null | string {
+  let offset = 0;
+  switch (methodName) {
+    case 'dir':
+    case 'dirxml':
+    case 'groupEnd':
+    case 'table': {
+      // These methods cannot be colorized because they don't take a formatting string.
+      // So we wouldn't have added any badge in the first place.
+      // $FlowFixMe
+      return null;
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+  const format = args[offset];
+  const style = args[offset + 1];
+  const badge = args[offset + 2];
+  if (
+    typeof format === 'string' &&
+    format.startsWith(badgeFormat) &&
+    style === badgeStyle &&
+    typeof badge === 'string'
+  ) {
+    // Remove our badging from the arguments.
+    let unbadgedFormat = format.slice(badgeFormat.length);
+    if (unbadgedFormat[0] === ' ') {
+      // Spacing added on the Client if the original argument was a string.
+      unbadgedFormat = unbadgedFormat.slice(1);
+    }
+    args.splice(offset, 4, unbadgedFormat);
+    return badge.slice(padLength, badge.length - padLength);
+  }
+  return null;
+}
diff --git a/packages/react-server/src/ReactServerConsoleConfigPlain.js b/packages/react-server/src/ReactServerConsoleConfigPlain.js
new file mode 100644
index 00000000000..d93e5f1a0dd
--- /dev/null
+++ b/packages/react-server/src/ReactServerConsoleConfigPlain.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with ReactClientConsoleConfig
+const badgeFormat = '[%s]';
+const padLength = 1;
+const pad = ' ';
+
+// This mutates the args to remove any badges that was added by a FlightClient and
+// returns the name in the badge. This is used when a FlightClient replays inside
+// a FlightServer and we capture those replays.
+export function unbadgeConsole(
+  methodName: string,
+  args: Array<any>,
+): null | string {
+  let offset = 0;
+  switch (methodName) {
+    case 'dir':
+    case 'dirxml':
+    case 'groupEnd':
+    case 'table': {
+      // These methods cannot be colorized because they don't take a formatting string.
+      // So we wouldn't have added any badge in the first place.
+      // $FlowFixMe
+      return null;
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+  const format = args[offset];
+  const badge = args[offset + 1];
+  if (
+    typeof format === 'string' &&
+    format.startsWith(badgeFormat) &&
+    typeof badge === 'string' &&
+    badge.startsWith(pad) &&
+    badge.endsWith(pad)
+  ) {
+    // Remove our badging from the arguments.
+    let unbadgedFormat = format.slice(badgeFormat.length);
+    if (unbadgedFormat[0] === ' ') {
+      // Spacing added on the Client if the original argument was a string.
+      unbadgedFormat = unbadgedFormat.slice(1);
+    }
+    args.splice(offset, 4, unbadgedFormat);
+    return badge.slice(padLength, badge.length - padLength);
+  }
+  return null;
+}
diff --git a/packages/react-server/src/ReactServerConsoleConfigServer.js b/packages/react-server/src/ReactServerConsoleConfigServer.js
new file mode 100644
index 00000000000..7987b9b262f
--- /dev/null
+++ b/packages/react-server/src/ReactServerConsoleConfigServer.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with ReactClientConsoleConfig
+const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c';
+// Same badge styling as DevTools.
+const badgeStyle =
+  // We use a fixed background if light-dark is not supported, otherwise
+  // we use a transparent background.
+  'background: #e6e6e6;' +
+  'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
+  'color: #000000;' +
+  'color: light-dark(#000000, #ffffff);' +
+  'border-radius: 2px';
+const padLength = 1;
+
+// This mutates the args to remove any badges that was added by a FlightClient and
+// returns the name in the badge. This is used when a FlightClient replays inside
+// a FlightServer and we capture those replays.
+export function unbadgeConsole(
+  methodName: string,
+  args: Array<any>,
+): null | string {
+  let offset = 0;
+  switch (methodName) {
+    case 'dir':
+    case 'dirxml':
+    case 'groupEnd':
+    case 'table': {
+      // These methods cannot be colorized because they don't take a formatting string.
+      // So we wouldn't have added any badge in the first place.
+      // $FlowFixMe
+      return null;
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+  const format = args[offset];
+  const style = args[offset + 1];
+  const badge = args[offset + 2];
+  if (
+    typeof format === 'string' &&
+    format.startsWith(badgeFormat) &&
+    style === badgeStyle &&
+    typeof badge === 'string'
+  ) {
+    // Remove our badging from the arguments.
+    let unbadgedFormat = format.slice(badgeFormat.length);
+    if (unbadgedFormat[0] === ' ') {
+      // Spacing added on the Client if the original argument was a string.
+      unbadgedFormat = unbadgedFormat.slice(1);
+    }
+    args.splice(offset, 4, unbadgedFormat);
+    return badge.slice(padLength, badge.length - padLength);
+  }
+  return null;
+}
diff --git a/packages/react-server/src/ReactServerStreamConfig.js b/packages/react-server/src/ReactServerStreamConfig.js
new file mode 100644
index 00000000000..4d6251b12a5
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfig.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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/prod-error-codes */
+
+// 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.
+
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
new file mode 100644
index 00000000000..41d9aedd005
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Destination = ReadableStreamController;
+
+export type PrecomputedChunk = Uint8Array;
+export opaque type Chunk = Uint8Array;
+export type BinaryChunk = Uint8Array;
+
+const channel = new MessageChannel();
+const taskQueue = [];
+channel.port1.onmessage = () => {
+  const task = taskQueue.shift();
+  if (task) {
+    task();
+  }
+};
+
+export function scheduleWork(callback: () => void) {
+  taskQueue.push(callback);
+  channel.port2.postMessage(null);
+}
+
+function handleErrorInNextTick(error: any) {
+  setTimeout(() => {
+    throw error;
+  });
+}
+
+const LocalPromise = Promise;
+
+export const scheduleMicrotask: (callback: () => void) => void =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : callback => {
+        LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick);
+      };
+
+export function flushBuffered(destination: Destination) {
+  // WHATWG Streams do not yet have a way to flush the underlying
+  // transform streams. https://github.com/whatwg/streams/issues/960
+}
+
+const VIEW_SIZE = 2048;
+let currentView = null;
+let writtenBytes = 0;
+
+export function beginWriting(destination: Destination) {
+  currentView = new Uint8Array(VIEW_SIZE);
+  writtenBytes = 0;
+}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): void {
+  if (chunk.byteLength === 0) {
+    return;
+  }
+
+  if (chunk.byteLength > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
+    // one that is cached by the streaming renderer. We will enqueu
+    // it directly and expect it is not re-used
+    if (writtenBytes > 0) {
+      destination.enqueue(
+        new Uint8Array(
+          ((currentView: any): Uint8Array).buffer,
+          0,
+          writtenBytes,
+        ),
+      );
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+    destination.enqueue(chunk);
+    return;
+  }
+
+  let bytesToWrite = chunk;
+  const allowableBytes = ((currentView: any): Uint8Array).length - writtenBytes;
+  if (allowableBytes < bytesToWrite.byteLength) {
+    // this chunk would overflow the current view. We enqueue a full view
+    // and start a new view with the remaining chunk
+    if (allowableBytes === 0) {
+      // the current view is already full, send it
+      destination.enqueue(currentView);
+    } else {
+      // fill up the current view and apply the remaining chunk bytes
+      // to a new view.
+      ((currentView: any): Uint8Array).set(
+        bytesToWrite.subarray(0, allowableBytes),
+        writtenBytes,
+      );
+      // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
+      destination.enqueue(currentView);
+      bytesToWrite = bytesToWrite.subarray(allowableBytes);
+    }
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+  ((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
+  writtenBytes += bytesToWrite.byteLength;
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): boolean {
+  writeChunk(destination, chunk);
+  // in web streams there is no backpressure so we can alwas write more
+  return true;
+}
+
+export function completeWriting(destination: Destination) {
+  if (currentView && writtenBytes > 0) {
+    destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+    currentView = null;
+    writtenBytes = 0;
+  }
+}
+
+export function close(destination: Destination) {
+  destination.close();
+}
+
+const textEncoder = new TextEncoder();
+
+export function stringToChunk(content: string): Chunk {
+  return textEncoder.encode(content);
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  const precomputedChunk = textEncoder.encode(content);
+
+  if (__DEV__) {
+    if (precomputedChunk.byteLength > VIEW_SIZE) {
+      console.error(
+        'precomputed chunks must be smaller than the view size configured for this host. This is a bug in React.',
+      );
+    }
+  }
+
+  return precomputedChunk;
+}
+
+export function typedArrayToBinaryChunk(
+  content: $ArrayBufferView,
+): BinaryChunk {
+  // Convert any non-Uint8Array array to Uint8Array. We could avoid this for Uint8Arrays.
+  // If we passed through this straight to enqueue we wouldn't have to convert it but since
+  // we need to copy the buffer in that case, we need to convert it to copy it.
+  // When we copy it into another array using set() it needs to be a Uint8Array.
+  const buffer = new Uint8Array(
+    content.buffer,
+    content.byteOffset,
+    content.byteLength,
+  );
+  // We clone large chunks so that we can transfer them when we write them.
+  // Others get copied into the target buffer.
+  return content.byteLength > VIEW_SIZE ? buffer.slice() : buffer;
+}
+
+export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
+  return chunk.byteLength;
+}
+
+export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
+  return chunk.byteLength;
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe[method-unbinding]
+  if (typeof destination.error === 'function') {
+    // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+    destination.error(error);
+  } else {
+    // Earlier implementations doesn't support this method. In that environment you're
+    // supposed to throw from a promise returned but we don't return a promise in our
+    // approach. We could fork this implementation but this is environment is an edge
+    // case to begin with. It's even less common to run this in an older environment.
+    // Even then, this is not where errors are supposed to happen and they get reported
+    // to a global callback in addition to this anyway. So it's fine just to close this.
+    destination.close();
+  }
+}
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
+
+export function readAsDataURL(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    // $FlowFixMe[incompatible-call]: We always expect a string result with readAsDataURL.
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
diff --git a/packages/react-server/src/ReactServerStreamConfigBun.js b/packages/react-server/src/ReactServerStreamConfigBun.js
new file mode 100644
index 00000000000..a9079bee43a
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfigBun.js
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/* global Bun */
+
+import type {Writable} from 'stream';
+
+type BunReadableStreamController = ReadableStreamController & {
+  end(): mixed,
+  write(data: Chunk | BinaryChunk): void,
+  error(error: Error): void,
+  flush?: () => void,
+};
+
+interface MightBeFlushable {
+  flush?: () => void;
+}
+
+export type Destination =
+  | BunReadableStreamController
+  | (Writable & MightBeFlushable);
+
+export type PrecomputedChunk = string;
+export opaque type Chunk = string;
+export type BinaryChunk = $ArrayBufferView;
+
+export function scheduleWork(callback: () => void) {
+  setTimeout(callback, 0);
+}
+
+export const scheduleMicrotask = queueMicrotask;
+
+export function flushBuffered(destination: Destination) {
+  // Bun direct streams provide a flush function.
+  // 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') {
+    destination.flush();
+  }
+}
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): void {
+  if (chunk.length === 0) {
+    return;
+  }
+
+  // $FlowFixMe[incompatible-call]: write() is compatible with both types in Bun
+  destination.write(chunk);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): boolean {
+  // $FlowFixMe[incompatible-call]: write() is compatible with both types in Bun
+  return !!destination.write(chunk);
+}
+
+export function completeWriting(destination: Destination) {}
+
+export function close(destination: Destination) {
+  destination.end();
+}
+
+export function stringToChunk(content: string): Chunk {
+  return content;
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  return content;
+}
+
+export function typedArrayToBinaryChunk(
+  content: $ArrayBufferView,
+): BinaryChunk {
+  // TODO: Does this needs to be cloned if it's transferred in enqueue()?
+  return content;
+}
+
+export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
+  return Buffer.byteLength(chunk, 'utf8');
+}
+
+export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
+  return chunk.byteLength;
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe[incompatible-use]
+  // $FlowFixMe[method-unbinding]
+  if (typeof destination.error === 'function') {
+    // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+    destination.error(error);
+
+    // $FlowFixMe[incompatible-use]
+    // $FlowFixMe[method-unbinding]
+  } else if (typeof destination.destroy === 'function') {
+    // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+    destination.destroy(error);
+
+    // $FlowFixMe[incompatible-use]
+    // $FlowFixMe[method-unbinding]
+  } else if (typeof destination.close === 'function') {
+    // Earlier implementations doesn't support this method. In that environment you're
+    // supposed to throw from a promise returned but we don't return a promise in our
+    // approach. We could fork this implementation but this is environment is an edge
+    // case to begin with. It's even less common to run this in an older environment.
+    // Even then, this is not where errors are supposed to happen and they get reported
+    // to a global callback in addition to this anyway. So it's fine just to close this.
+    destination.close();
+  }
+}
+
+export function createFastHash(input: string): number {
+  return Bun.hash(input);
+}
+
+export function readAsDataURL(blob: Blob): Promise<string> {
+  return blob.arrayBuffer().then(arrayBuffer => {
+    const encoded = Buffer.from(arrayBuffer).toString('base64');
+    const mimeType = blob.type || 'application/octet-stream';
+    return 'data:' + mimeType + ';base64,' + encoded;
+  });
+}
diff --git a/packages/react-server/src/ReactServerStreamConfigEdge.js b/packages/react-server/src/ReactServerStreamConfigEdge.js
new file mode 100644
index 00000000000..90affdc6b8a
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfigEdge.js
@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Destination = ReadableStreamController;
+
+export type PrecomputedChunk = Uint8Array;
+export opaque type Chunk = Uint8Array;
+export type BinaryChunk = Uint8Array;
+
+function handleErrorInNextTick(error: any) {
+  setTimeout(() => {
+    throw error;
+  });
+}
+
+const LocalPromise = Promise;
+
+export const scheduleMicrotask: (callback: () => void) => void =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : callback => {
+        LocalPromise.resolve(null).then(callback).catch(handleErrorInNextTick);
+      };
+
+export function scheduleWork(callback: () => void) {
+  setTimeout(callback, 0);
+}
+
+export function flushBuffered(destination: Destination) {
+  // WHATWG Streams do not yet have a way to flush the underlying
+  // transform streams. https://github.com/whatwg/streams/issues/960
+}
+
+// Chunks larger than VIEW_SIZE are written directly, without copying into the
+// internal view buffer. This must be at least half of Node's internal Buffer
+// pool size (8192) to avoid corrupting the pool when using
+// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers.
+const VIEW_SIZE = 4096;
+let currentView = null;
+let writtenBytes = 0;
+
+export function beginWriting(destination: Destination) {
+  currentView = new Uint8Array(VIEW_SIZE);
+  writtenBytes = 0;
+}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): void {
+  if (chunk.byteLength === 0) {
+    return;
+  }
+
+  if (chunk.byteLength > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
+    // one that is cached by the streaming renderer. We will enqueu
+    // it directly and expect it is not re-used
+    if (writtenBytes > 0) {
+      destination.enqueue(
+        new Uint8Array(
+          ((currentView: any): Uint8Array).buffer,
+          0,
+          writtenBytes,
+        ),
+      );
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+    destination.enqueue(chunk);
+    return;
+  }
+
+  let bytesToWrite = chunk;
+  const allowableBytes = ((currentView: any): Uint8Array).length - writtenBytes;
+  if (allowableBytes < bytesToWrite.byteLength) {
+    // this chunk would overflow the current view. We enqueue a full view
+    // and start a new view with the remaining chunk
+    if (allowableBytes === 0) {
+      // the current view is already full, send it
+      destination.enqueue(currentView);
+    } else {
+      // fill up the current view and apply the remaining chunk bytes
+      // to a new view.
+      ((currentView: any): Uint8Array).set(
+        bytesToWrite.subarray(0, allowableBytes),
+        writtenBytes,
+      );
+      // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
+      destination.enqueue(currentView);
+      bytesToWrite = bytesToWrite.subarray(allowableBytes);
+    }
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+  ((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
+  writtenBytes += bytesToWrite.byteLength;
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): boolean {
+  writeChunk(destination, chunk);
+  // in web streams there is no backpressure so we can alwas write more
+  return true;
+}
+
+export function completeWriting(destination: Destination) {
+  if (currentView && writtenBytes > 0) {
+    destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+    currentView = null;
+    writtenBytes = 0;
+  }
+}
+
+export function close(destination: Destination) {
+  destination.close();
+}
+
+const textEncoder = new TextEncoder();
+
+export function stringToChunk(content: string): Chunk {
+  return textEncoder.encode(content);
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  const precomputedChunk = textEncoder.encode(content);
+
+  if (__DEV__) {
+    if (precomputedChunk.byteLength > VIEW_SIZE) {
+      console.error(
+        'precomputed chunks must be smaller than the view size configured for this host. This is a bug in React.',
+      );
+    }
+  }
+
+  return precomputedChunk;
+}
+
+export function typedArrayToBinaryChunk(
+  content: $ArrayBufferView,
+): BinaryChunk {
+  // Convert any non-Uint8Array array to Uint8Array. We could avoid this for Uint8Arrays.
+  // If we passed through this straight to enqueue we wouldn't have to convert it but since
+  // we need to copy the buffer in that case, we need to convert it to copy it.
+  // When we copy it into another array using set() it needs to be a Uint8Array.
+  return new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
+}
+
+export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
+  return chunk.byteLength;
+}
+
+export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
+  return chunk.byteLength;
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe[method-unbinding]
+  if (typeof destination.error === 'function') {
+    // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+    destination.error(error);
+  } else {
+    // Earlier implementations doesn't support this method. In that environment you're
+    // supposed to throw from a promise returned but we don't return a promise in our
+    // approach. We could fork this implementation but this is environment is an edge
+    // case to begin with. It's even less common to run this in an older environment.
+    // Even then, this is not where errors are supposed to happen and they get reported
+    // to a global callback in addition to this anyway. So it's fine just to close this.
+    destination.close();
+  }
+}
+
+export {createFastHashJS as createFastHash} from 'react-server/src/createFastHashJS';
+
+export function readAsDataURL(blob: Blob): Promise<string> {
+  return blob.arrayBuffer().then(arrayBuffer => {
+    const encoded =
+      typeof Buffer === 'function' && typeof Buffer.from === 'function'
+        ? Buffer.from(arrayBuffer).toString('base64')
+        : btoa(String.fromCharCode.apply(String, new Uint8Array(arrayBuffer)));
+    const mimeType = blob.type || 'application/octet-stream';
+    return 'data:' + mimeType + ';base64,' + encoded;
+  });
+}
diff --git a/packages/react-server/src/ReactServerStreamConfigFB.js b/packages/react-server/src/ReactServerStreamConfigFB.js
new file mode 100644
index 00000000000..61d678ed695
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfigFB.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Destination = {
+  buffer: string,
+  done: boolean,
+  fatal: boolean,
+  error: mixed,
+};
+
+export opaque type PrecomputedChunk = string;
+export opaque type Chunk = string;
+export opaque type BinaryChunk = string;
+
+export function flushBuffered(destination: Destination) {}
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk | BinaryChunk,
+): void {
+  destination.buffer += chunk;
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk | BinaryChunk,
+): boolean {
+  destination.buffer += chunk;
+  return true;
+}
+
+export function completeWriting(destination: Destination) {}
+
+export function close(destination: Destination) {
+  destination.done = true;
+}
+
+export function stringToChunk(content: string): Chunk {
+  return content;
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  return content;
+}
+
+export function typedArrayToBinaryChunk(
+  content: $ArrayBufferView,
+): BinaryChunk {
+  throw new Error('Not implemented.');
+}
+
+export const byteLengthOfChunk:
+  | null
+  | ((chunk: Chunk | PrecomputedChunk) => number) = null;
+
+export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
+  throw new Error('Not implemented.');
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  destination.done = true;
+  destination.fatal = true;
+  destination.error = error;
+}
+
+export {createFastHashJS as createFastHash} from './createFastHashJS';
+
+export function readAsDataURL(blob: Blob): Promise<string> {
+  throw new Error('Not implemented.');
+}
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
new file mode 100644
index 00000000000..90609da2c45
--- /dev/null
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Writable} from 'stream';
+
+import {TextEncoder} from 'util';
+import {createHash} from 'crypto';
+
+interface MightBeFlushable {
+  flush?: () => void;
+}
+
+export type Destination = Writable & MightBeFlushable;
+
+export type PrecomputedChunk = Uint8Array;
+export opaque type Chunk = string;
+export type BinaryChunk = Uint8Array;
+
+export function scheduleWork(callback: () => void) {
+  setImmediate(callback);
+}
+
+export const scheduleMicrotask = queueMicrotask;
+
+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.
+    // For Express, compression middleware adds this method.
+    destination.flush();
+  }
+}
+
+// Chunks larger than VIEW_SIZE are written directly, without copying into the
+// internal view buffer. This must be at least half of Node's internal Buffer
+// pool size (8192) to avoid corrupting the pool when using
+// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers.
+const VIEW_SIZE = 4096;
+let currentView = null;
+let writtenBytes = 0;
+let destinationHasCapacity = true;
+
+export function beginWriting(destination: Destination) {
+  currentView = new Uint8Array(VIEW_SIZE);
+  writtenBytes = 0;
+  destinationHasCapacity = true;
+}
+
+function writeStringChunk(destination: Destination, stringChunk: string) {
+  if (stringChunk.length === 0) {
+    return;
+  }
+  // maximum possible view needed to encode entire string
+  if (stringChunk.length * 3 > VIEW_SIZE) {
+    if (writtenBytes > 0) {
+      writeToDestination(
+        destination,
+        ((currentView: any): Uint8Array).subarray(0, writtenBytes),
+      );
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+    // Write the raw string chunk and let the consumer handle the encoding.
+    writeToDestination(destination, stringChunk);
+    return;
+  }
+
+  let target: Uint8Array = (currentView: any);
+  if (writtenBytes > 0) {
+    target = ((currentView: any): Uint8Array).subarray(writtenBytes);
+  }
+  const {read, written} = textEncoder.encodeInto(stringChunk, target);
+  writtenBytes += written;
+
+  if (read < stringChunk.length) {
+    writeToDestination(
+      destination,
+      (currentView: any).subarray(0, writtenBytes),
+    );
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = textEncoder.encodeInto(
+      stringChunk.slice(read),
+      (currentView: any),
+    ).written;
+  }
+
+  if (writtenBytes === VIEW_SIZE) {
+    writeToDestination(destination, (currentView: any));
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+}
+
+function writeViewChunk(
+  destination: Destination,
+  chunk: PrecomputedChunk | BinaryChunk,
+) {
+  if (chunk.byteLength === 0) {
+    return;
+  }
+  if (chunk.byteLength > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
+    // one that is cached by the streaming renderer. We will enqueu
+    // it directly and expect it is not re-used
+    if (writtenBytes > 0) {
+      writeToDestination(
+        destination,
+        ((currentView: any): Uint8Array).subarray(0, writtenBytes),
+      );
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+    writeToDestination(destination, chunk);
+    return;
+  }
+
+  let bytesToWrite = chunk;
+  const allowableBytes = ((currentView: any): Uint8Array).length - writtenBytes;
+  if (allowableBytes < bytesToWrite.byteLength) {
+    // this chunk would overflow the current view. We enqueue a full view
+    // and start a new view with the remaining chunk
+    if (allowableBytes === 0) {
+      // the current view is already full, send it
+      writeToDestination(destination, (currentView: any));
+    } else {
+      // fill up the current view and apply the remaining chunk bytes
+      // to a new view.
+      ((currentView: any): Uint8Array).set(
+        bytesToWrite.subarray(0, allowableBytes),
+        writtenBytes,
+      );
+      writtenBytes += allowableBytes;
+      writeToDestination(destination, (currentView: any));
+      bytesToWrite = bytesToWrite.subarray(allowableBytes);
+    }
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+  ((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
+  writtenBytes += bytesToWrite.byteLength;
+
+  if (writtenBytes === VIEW_SIZE) {
+    writeToDestination(destination, (currentView: any));
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk | BinaryChunk,
+): void {
+  if (typeof chunk === 'string') {
+    writeStringChunk(destination, chunk);
+  } else {
+    writeViewChunk(destination, ((chunk: any): PrecomputedChunk | BinaryChunk));
+  }
+}
+
+function writeToDestination(
+  destination: Destination,
+  view: string | Uint8Array,
+) {
+  const currentHasCapacity = destination.write(view);
+  destinationHasCapacity = destinationHasCapacity && currentHasCapacity;
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk,
+): boolean {
+  writeChunk(destination, chunk);
+  return destinationHasCapacity;
+}
+
+export function completeWriting(destination: Destination) {
+  if (currentView && writtenBytes > 0) {
+    destination.write(currentView.subarray(0, writtenBytes));
+  }
+  currentView = null;
+  writtenBytes = 0;
+  destinationHasCapacity = true;
+}
+
+export function close(destination: Destination) {
+  destination.end();
+}
+
+export const textEncoder: TextEncoder = new TextEncoder();
+
+export function stringToChunk(content: string): Chunk {
+  return content;
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
+  const precomputedChunk = textEncoder.encode(content);
+
+  if (__DEV__) {
+    if (precomputedChunk.byteLength > VIEW_SIZE) {
+      console.error(
+        'precomputed chunks must be smaller than the view size configured for this host. This is a bug in React.',
+      );
+    }
+  }
+
+  return precomputedChunk;
+}
+
+export function typedArrayToBinaryChunk(
+  content: $ArrayBufferView,
+): BinaryChunk {
+  // Convert any non-Uint8Array array to Uint8Array. We could avoid this for Uint8Arrays.
+  return new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
+}
+
+export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
+  return typeof chunk === 'string'
+    ? Buffer.byteLength(chunk, 'utf8')
+    : chunk.byteLength;
+}
+
+export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
+  return chunk.byteLength;
+}
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
+  destination.destroy(error);
+}
+
+export function createFastHash(input: string): string | number {
+  const hash = createHash('md5');
+  hash.update(input);
+  return hash.digest('hex');
+}
+
+export function readAsDataURL(blob: Blob): Promise<string> {
+  return blob.arrayBuffer().then(arrayBuffer => {
+    const encoded = Buffer.from(arrayBuffer).toString('base64');
+    const mimeType = blob.type || 'application/octet-stream';
+    return 'data:' + mimeType + ';base64,' + encoded;
+  });
+}
diff --git a/packages/react-server/src/ReactSharedInternalsServer.js b/packages/react-server/src/ReactSharedInternalsServer.js
new file mode 100644
index 00000000000..efc3588a645
--- /dev/null
+++ b/packages/react-server/src/ReactSharedInternalsServer.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {SharedStateServer} from 'react/src/ReactSharedInternalsServer';
+
+import * as React from 'react';
+
+const ReactSharedInternalsServer: SharedStateServer =
+  // $FlowFixMe: It's defined in the one we resolve to.
+  React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+if (!ReactSharedInternalsServer) {
+  throw new Error(
+    'The "react" package in this environment is not configured correctly. ' +
+      'The "react-server" condition must be enabled in any environment that ' +
+      'runs React Server Components.',
+  );
+}
+
+export default ReactSharedInternalsServer;
diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js
new file mode 100644
index 00000000000..2570c0d12e2
--- /dev/null
+++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js
@@ -0,0 +1,3405 @@
+/**
+ * @jest-environment node
+ */
+'use strict';
+
+import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
+
+import fs from 'fs/promises';
+import path from 'path';
+
+let React;
+let ReactServer;
+let cache;
+let ReactServerDOMServer;
+let ReactServerDOMClient;
+let Stream;
+let observer;
+let getDebugInfo;
+
+const streamOptions = {
+  objectMode: true,
+};
+
+function filterStackFrame(filename, functionName) {
+  return (
+    !filename.startsWith('node:') &&
+    !filename.includes('node_modules') &&
+    // Filter out our own internal source code since it'll typically be in node_modules
+    (!filename.includes('/packages/') || filename.includes('/__tests__/')) &&
+    !filename.includes('/build/') &&
+    !functionName.includes('internal_')
+  );
+}
+
+describe('ReactFlightAsyncDebugInfo', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useRealTimers();
+    patchSetImmediate();
+    global.console = require('console');
+
+    jest.mock('react', () => require('react/react.react-server'));
+    jest.mock('react-server-dom-webpack/server', () =>
+      jest.requireActual('react-server-dom-webpack/server.node'),
+    );
+    ReactServer = require('react');
+    ReactServerDOMServer = require('react-server-dom-webpack/server');
+    cache = ReactServer.cache;
+
+    jest.resetModules();
+    jest.useRealTimers();
+    patchSetImmediate();
+
+    __unmockReact();
+    jest.unmock('react-server-dom-webpack/server');
+    jest.mock('react-server-dom-webpack/client', () =>
+      jest.requireActual('react-server-dom-webpack/client.node'),
+    );
+
+    React = require('react');
+    ReactServerDOMClient = require('react-server-dom-webpack/client');
+    Stream = require('stream');
+
+    getDebugInfo = require('internal-test-utils').getDebugInfo.bind(null, {
+      ignoreProps: true,
+      useFixedTime: true,
+    });
+  });
+
+  afterEach(() => {
+    observer?.disconnect();
+    observer = undefined;
+  });
+
+  function finishLoadingStream(readable) {
+    return new Promise(resolve => {
+      if (readable.readableEnded) {
+        resolve();
+      } else {
+        readable.on('end', () => resolve());
+      }
+    });
+  }
+
+  function delay(timeout) {
+    return new Promise(resolve => {
+      setTimeout(resolve, timeout);
+    });
+  }
+
+  function fetchThirdParty(Component) {
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component />,
+      {},
+      {
+        environmentName: 'third-party',
+      },
+    );
+    const readable = new Stream.PassThrough(streamOptions);
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+    return result;
+  }
+
+  it('can track async information when awaited', async () => {
+    async function getData(text) {
+      await delay(1);
+      const promise = delay(2);
+      promise.displayName = 'hello';
+      await Promise.all([promise]);
+      return text.toUpperCase();
+    }
+
+    async function Component() {
+      const result = await getData('hi');
+      const moreData = getData('seb');
+      return <InnerComponent text={result} promise={moreData} />;
+    }
+
+    async function InnerComponent({text, promise}) {
+      // This async function depends on the I/O in parent components but it should not
+      // include that I/O as part of its own meta data.
+      return text + ', ' + (await promise);
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI, SEB');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                129,
+                109,
+                108,
+                50,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    129,
+                    109,
+                    108,
+                    50,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  110,
+                  13,
+                  109,
+                  5,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  118,
+                  26,
+                  117,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  129,
+                  109,
+                  108,
+                  50,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                110,
+                13,
+                109,
+                5,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                118,
+                26,
+                117,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "hello",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    129,
+                    109,
+                    108,
+                    50,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  111,
+                  21,
+                  109,
+                  5,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  118,
+                  20,
+                  117,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  129,
+                  109,
+                  108,
+                  50,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                113,
+                21,
+                109,
+                5,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                118,
+                20,
+                117,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "InnerComponent",
+            "props": {},
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                120,
+                60,
+                117,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "hello",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    129,
+                    109,
+                    108,
+                    50,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  111,
+                  21,
+                  109,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "InnerComponent",
+              "props": {},
+              "stack": [
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  120,
+                  60,
+                  117,
+                  5,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "InnerComponent",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                126,
+                35,
+                123,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('adds a description to I/O', async () => {
+    async function getData(url) {
+      // just wait a macrotask for this call to get picked up
+      await new Promise(resolve => {
+        setTimeout(() => {
+          const fakeResponse = {url};
+          resolve(fakeResponse);
+        }, 1);
+      });
+    }
+
+    async function Component() {
+      await getData('http://github.com/facebook/react/pulls');
+      await getData('http://github.com/facebook/react/pulls/');
+      await getData(
+        'https://this-is-a-very-long-domain-name-what-happens.app/test',
+      );
+      await getData(
+        'https://github.com/facebook/react/commit/75897c2dcd1dd3a6ca46284dd37e13d22b4b16b4',
+      );
+      await getData('/this-is-a-very-long-directory-name-what-happens/');
+      await getData('/this-is-not');
+      return 'Hi, Sebbie';
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(
+      readable,
+      {
+        moduleMap: {},
+        moduleLoading: {},
+      },
+      {replayConsoleLogs: true},
+    );
+    stream.pipe(readable);
+
+    expect(await result).toBe('Hi, Sebbie');
+
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      let gotEntries;
+      const hasEntries = new Promise(resolve => {
+        gotEntries = resolve;
+      });
+      const entries = [];
+      observer = new PerformanceObserver(list => {
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const entry of list.getEntries()) {
+          const {name} = entry;
+          entries.push({name});
+        }
+        gotEntries();
+      }).observe({type: 'measure'});
+
+      await hasEntries;
+      await finishLoadingStream(readable);
+
+      expect(entries).toMatchInlineSnapshot(`
+        [
+          {
+            "name": "\u200bComponent",
+          },
+          {
+            "name": "await getData (…/pulls)",
+          },
+          {
+            "name": "await getData (…/pulls)",
+          },
+          {
+            "name": "await getData (…/test)",
+          },
+          {
+            "name": "await getData (…/75897c2dcd…13d22b4b16b4)",
+          },
+          {
+            "name": "await getData (/this-is-a-…what-happens)",
+          },
+          {
+            "name": "await getData (/this-is-not)",
+          },
+        ]
+      `);
+    } else {
+      await finishLoadingStream(readable);
+    }
+  });
+
+  it('can track async information when use()d', async () => {
+    async function getData(text) {
+      await delay(1);
+      return text.toUpperCase();
+    }
+
+    function Component() {
+      const result = ReactServer.use(getData('hi'));
+      const moreData = getData('seb');
+      return <InnerComponent text={result} promise={moreData} />;
+    }
+
+    function InnerComponent({text, promise}) {
+      // This async function depends on the I/O in parent components but it should not
+      // include that I/O as part of its own meta data.
+      return text + ', ' + ReactServer.use(promise);
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component />,
+      {},
+      {
+        filterStackFrame,
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI, SEB');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                589,
+                40,
+                570,
+                49,
+              ],
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    589,
+                    40,
+                    570,
+                    49,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  572,
+                  13,
+                  571,
+                  5,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  577,
+                  36,
+                  576,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  589,
+                  40,
+                  570,
+                  49,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                572,
+                13,
+                571,
+                5,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                577,
+                36,
+                576,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "InnerComponent",
+            "props": {},
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                579,
+                60,
+                576,
+                5,
+              ],
+            ],
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    589,
+                    40,
+                    570,
+                    49,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  572,
+                  13,
+                  571,
+                  5,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  578,
+                  22,
+                  576,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "InnerComponent",
+              "props": {},
+              "stack": [
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  579,
+                  60,
+                  576,
+                  5,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "InnerComponent",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                585,
+                40,
+                582,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('cannot currently track the start of I/O when no native promise is used', async () => {
+    function Component() {
+      const callbacks = [];
+      setTimeout(function timer() {
+        callbacks.forEach(callback => callback('hi'));
+      }, 5);
+      return {
+        then(callback) {
+          callbacks.push(callback);
+        },
+      };
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('hi');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                896,
+                109,
+                883,
+                80,
+              ],
+            ],
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    896,
+                    109,
+                    883,
+                    80,
+                  ],
+                ],
+              },
+              "start": 0,
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  896,
+                  109,
+                  883,
+                  80,
+                ],
+              ],
+            },
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can ingores the start of I/O when immediately resolved non-native promise is awaited', async () => {
+    async function Component() {
+      return await {
+        then(callback) {
+          callback('hi');
+        },
+      };
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('hi');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1010,
+                109,
+                1001,
+                94,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+        ]
+      `);
+    }
+  });
+
+  it('forwards debugInfo from awaited Promises', async () => {
+    async function Component() {
+      let resolve;
+      const promise = new Promise(r => (resolve = r));
+      promise._debugInfo = [
+        {time: performance.now()},
+        {
+          name: 'Virtual Component',
+        },
+        {time: performance.now()},
+      ];
+      const promise2 = promise.then(value => value);
+      promise2._debugInfo = [
+        {time: performance.now()},
+        {
+          name: 'Virtual Component2',
+        },
+        {time: performance.now()},
+      ];
+      resolve('hi');
+      const result = await promise2;
+      return result.toUpperCase();
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1083,
+                109,
+                1059,
+                50,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "name": "Virtual Component",
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "name": "Virtual Component2",
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+        ]
+      `);
+    }
+  });
+
+  it('forwards async debug info one environment to the next', async () => {
+    async function getData() {
+      await delay(1);
+      await delay(2);
+      return 'hi';
+    }
+
+    async function ThirdPartyComponent() {
+      const data = await getData();
+      return data;
+    }
+
+    async function Component() {
+      const data = await fetchThirdParty(ThirdPartyComponent);
+      return data.toUpperCase();
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1167,
+                109,
+                1150,
+                63,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "env": "third-party",
+            "key": null,
+            "name": "ThirdPartyComponent",
+            "props": {},
+            "stack": [
+              [
+                "fetchThirdParty",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                93,
+                40,
+                91,
+                3,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1163,
+                24,
+                1162,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "third-party",
+              "name": "delay",
+              "owner": {
+                "env": "third-party",
+                "key": null,
+                "name": "ThirdPartyComponent",
+                "props": {},
+                "stack": [
+                  [
+                    "fetchThirdParty",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    93,
+                    40,
+                    91,
+                    3,
+                  ],
+                  [
+                    "Component",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    1163,
+                    24,
+                    1162,
+                    5,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1152,
+                  13,
+                  1151,
+                  5,
+                ],
+                [
+                  "ThirdPartyComponent",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1158,
+                  24,
+                  1157,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "third-party",
+            "owner": {
+              "env": "third-party",
+              "key": null,
+              "name": "ThirdPartyComponent",
+              "props": {},
+              "stack": [
+                [
+                  "fetchThirdParty",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  93,
+                  40,
+                  91,
+                  3,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1163,
+                  24,
+                  1162,
+                  5,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1152,
+                13,
+                1151,
+                5,
+              ],
+              [
+                "ThirdPartyComponent",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1158,
+                24,
+                1157,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "third-party",
+              "name": "delay",
+              "owner": {
+                "env": "third-party",
+                "key": null,
+                "name": "ThirdPartyComponent",
+                "props": {},
+                "stack": [
+                  [
+                    "fetchThirdParty",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    93,
+                    40,
+                    91,
+                    3,
+                  ],
+                  [
+                    "Component",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    1163,
+                    24,
+                    1162,
+                    5,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1153,
+                  13,
+                  1151,
+                  5,
+                ],
+                [
+                  "ThirdPartyComponent",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1158,
+                  18,
+                  1157,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "third-party",
+            "owner": {
+              "env": "third-party",
+              "key": null,
+              "name": "ThirdPartyComponent",
+              "props": {},
+              "stack": [
+                [
+                  "fetchThirdParty",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  93,
+                  40,
+                  91,
+                  3,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1163,
+                  24,
+                  1162,
+                  5,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1153,
+                13,
+                1151,
+                5,
+              ],
+              [
+                "ThirdPartyComponent",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1158,
+                18,
+                1157,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "env": "Server",
+              "name": "rsc stream",
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+            "env": "Server",
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track cached entries awaited in later components', async () => {
+    const getData = cache(async function getData(text) {
+      await delay(1);
+      return text.toUpperCase();
+    });
+
+    async function Child() {
+      const greeting = await getData('hi');
+      return greeting + ', Seb';
+    }
+
+    async function Component() {
+      await getData('hi');
+      return <Child />;
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component />,
+      {},
+      {
+        filterStackFrame,
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI, Seb');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1508,
+                40,
+                1491,
+                62,
+              ],
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    1508,
+                    40,
+                    1491,
+                    62,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1493,
+                  13,
+                  1492,
+                  25,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1503,
+                  13,
+                  1502,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1508,
+                  40,
+                  1491,
+                  62,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1493,
+                13,
+                1492,
+                25,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1503,
+                13,
+                1502,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Child",
+            "props": {},
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1504,
+                60,
+                1502,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    1508,
+                    40,
+                    1491,
+                    62,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1493,
+                  13,
+                  1492,
+                  25,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1503,
+                  13,
+                  1502,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Child",
+              "props": {},
+              "stack": [
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1504,
+                  60,
+                  1502,
+                  5,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "Child",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1498,
+                28,
+                1497,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track cached entries used in child position', async () => {
+    const getData = cache(async function getData(text) {
+      await delay(1);
+      return text.toUpperCase();
+    });
+
+    function Child() {
+      return getData('hi');
+    }
+
+    function Component() {
+      ReactServer.use(getData('hi'));
+      return <Child />;
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component />,
+      {},
+      {
+        filterStackFrame,
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1821,
+                40,
+                1805,
+                57,
+              ],
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    1821,
+                    40,
+                    1805,
+                    57,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1807,
+                  13,
+                  1806,
+                  25,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1816,
+                  23,
+                  1815,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1821,
+                  40,
+                  1805,
+                  57,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1807,
+                13,
+                1806,
+                25,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1816,
+                23,
+                1815,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Child",
+            "props": {},
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1817,
+                60,
+                1815,
+                5,
+              ],
+            ],
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    1821,
+                    40,
+                    1805,
+                    57,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1807,
+                  13,
+                  1806,
+                  25,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  1816,
+                  23,
+                  1815,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                1817,
+                60,
+                1815,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track implicit returned promises that are blocked by previous data', async () => {
+    async function delayTwice() {
+      await delay('', 20);
+      await delay('', 10);
+    }
+
+    async function delayTrice() {
+      const p = delayTwice();
+      await delay('', 40);
+      return p;
+    }
+
+    async function Bar({children}) {
+      await delayTrice();
+      return 'hi';
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Bar />,
+      {},
+      {
+        filterStackFrame,
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('hi');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Bar",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2117,
+                40,
+                2099,
+                80,
+              ],
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Bar",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2117,
+                    40,
+                    2099,
+                    80,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "delayTrice",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2107,
+                  13,
+                  2105,
+                  5,
+                ],
+                [
+                  "Bar",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2112,
+                  13,
+                  2111,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Bar",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2117,
+                  40,
+                  2099,
+                  80,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "delayTrice",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2107,
+                13,
+                2105,
+                5,
+              ],
+              [
+                "Bar",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2112,
+                13,
+                2111,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Bar",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2117,
+                    40,
+                    2099,
+                    80,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "delayTwice",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2101,
+                  13,
+                  2100,
+                  5,
+                ],
+                [
+                  "delayTrice",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2106,
+                  15,
+                  2105,
+                  5,
+                ],
+                [
+                  "Bar",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2112,
+                  13,
+                  2111,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Bar",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2117,
+                  40,
+                  2099,
+                  80,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "delayTwice",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2101,
+                13,
+                2100,
+                5,
+              ],
+              [
+                "delayTrice",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2106,
+                15,
+                2105,
+                5,
+              ],
+              [
+                "Bar",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2112,
+                13,
+                2111,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Bar",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2117,
+                    40,
+                    2099,
+                    80,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "delayTwice",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2102,
+                  13,
+                  2100,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Bar",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2117,
+                  40,
+                  2099,
+                  80,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "delayTwice",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2102,
+                13,
+                2100,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track IO that is chained via then(async ...)', async () => {
+    function getData(text) {
+      return delay(1).then(async () => {
+        return text.toUpperCase();
+      });
+    }
+
+    async function Component({text, promise}) {
+      return await getData('hi, sebbie');
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(<Component />);
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI, SEBBIE');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2526,
+                109,
+                2515,
+                58,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2526,
+                    109,
+                    2515,
+                    58,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "getData",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2517,
+                  14,
+                  2516,
+                  5,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2523,
+                  20,
+                  2522,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2526,
+                  109,
+                  2515,
+                  58,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "getData",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2517,
+                23,
+                2516,
+                5,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2523,
+                20,
+                2522,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track IO that is not awaited in user space', async () => {
+    function internal_API(text) {
+      return delay(1).then(async () => {
+        return text.toUpperCase();
+      });
+    }
+
+    async function Component({text, promise}) {
+      return await internal_API('hi, seb');
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component />,
+      {},
+      {
+        filterStackFrame,
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('HI, SEB');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2693,
+                40,
+                2681,
+                56,
+              ],
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "delay",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2693,
+                    40,
+                    2681,
+                    56,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "delay",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  86,
+                  12,
+                  85,
+                  3,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2689,
+                  20,
+                  2688,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": "HI, SEB",
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2693,
+                  40,
+                  2681,
+                  56,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2689,
+                20,
+                2688,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track IO in third-party code', async () => {
+    async function thirdParty(endpoint) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve('third-party ' + endpoint);
+        }, 10);
+      }).then(async value => {
+        await new Promise(resolve => {
+          setTimeout(resolve, 10);
+        });
+
+        return value;
+      });
+    }
+
+    async function Component() {
+      const value = await thirdParty('hi');
+      return value;
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component />,
+      {},
+      {
+        filterStackFrame(filename, functionName) {
+          if (functionName === 'thirdParty') {
+            return false;
+          }
+          return filterStackFrame(filename, functionName);
+        },
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('third-party hi');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2882,
+                40,
+                2861,
+                42,
+              ],
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2882,
+                    40,
+                    2861,
+                    42,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2868,
+                  15,
+                  2867,
+                  15,
+                ],
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2877,
+                  19,
+                  2876,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": undefined,
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2882,
+                  40,
+                  2861,
+                  42,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2868,
+                15,
+                2867,
+                15,
+              ],
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2877,
+                19,
+                2876,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "thirdParty",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    2882,
+                    40,
+                    2861,
+                    42,
+                  ],
+                  [
+                    "new Promise",
+                    "",
+                    0,
+                    0,
+                    0,
+                    0,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2877,
+                  25,
+                  2876,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "value": "third-party hi",
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  2882,
+                  40,
+                  2861,
+                  42,
+                ],
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                2877,
+                25,
+                2876,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track async file reads', async () => {
+    const filename = path.join(__dirname, 'test-file.txt');
+    async function Component() {
+      const buffer = await fs
+        .readFile(filename) // This loads a Buffer.
+        // TODO: For some reason, without this we're extracting the wrong promise.
+        .then(v => v);
+      const text = buffer.toString('utf8');
+      return text.slice(0, 26);
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      ReactServer.createElement(Component),
+      {},
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('Lorem ipsum dolor sit amet');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "Object.<anonymous>",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                3158,
+                19,
+                3146,
+                36,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "Object.readFile",
+              "owner": {
+                "env": "Server",
+                "key": null,
+                "name": "Component",
+                "props": {},
+                "stack": [
+                  [
+                    "Object.<anonymous>",
+                    "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                    3158,
+                    19,
+                    3146,
+                    36,
+                  ],
+                ],
+              },
+              "stack": [
+                [
+                  "Component",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  3150,
+                  7,
+                  3148,
+                  5,
+                ],
+              ],
+              "start": 0,
+              "value": {
+                "status": "halted",
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "Object.<anonymous>",
+                  "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                  3158,
+                  19,
+                  3146,
+                  36,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                3152,
+                7,
+                3148,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "byteSize": 0,
+              "end": 0,
+              "name": "rsc stream",
+              "owner": null,
+              "start": 0,
+              "value": {
+                "value": "stream",
+              },
+            },
+          },
+        ]
+      `);
+    }
+  });
+
+  it('can track a promise created fully outside first party code', async function internal_test() {
+    async function internal_API(text, timeout) {
+      let resolve;
+      const promise = new Promise(r => {
+        resolve = r;
+      });
+      promise.displayName = 'greeting';
+      setTimeout(() => resolve(text), timeout);
+      return promise;
+    }
+
+    async function Component({promise}) {
+      const result = await promise;
+      return result;
+    }
+
+    const stream = ReactServerDOMServer.renderToPipeableStream(
+      <Component promise={internal_API('hello', 1)} />,
+      {},
+      {
+        filterStackFrame,
+      },
+    );
+
+    const readable = new Stream.PassThrough(streamOptions);
+
+    const result = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: {},
+    });
+    stream.pipe(readable);
+
+    expect(await result).toBe('hello');
+
+    await finishLoadingStream(readable);
+    if (
+      __DEV__ &&
+      gate(
+        flags =>
+          flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo,
+      )
+    ) {
+      expect(getDebugInfo(result)).toMatchInlineSnapshot(`
+        [
+          {
+            "time": 0,
+          },
+          {
+            "env": "Server",
+            "key": null,
+            "name": "Component",
+            "props": {},
+            "stack": [
+              [
+                "new Promise",
+                "",
+                0,
+                0,
+                0,
+                0,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "awaited": {
+              "end": 0,
+              "env": "Server",
+              "name": "greeting",
+              "start": 0,
+              "value": {
+                "status": "halted",
+              },
+            },
+            "env": "Server",
+            "owner": {
+              "env": "Server",
+              "key": null,
+              "name": "Component",
+              "props": {},
+              "stack": [
+                [
+                  "new Promise",
+                  "",
+                  0,
+                  0,
+                  0,
+                  0,
+                ],
+              ],
+            },
+            "stack": [
+              [
+                "Component",
+                "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
+                3303,
+                20,
+                3302,
+                5,
+              ],
+            ],
+          },
+          {
+            "time": 0,
+          },
+          {
+            "time": 0,
+          },
+        ]
+      `);
+    }
+  });
+});
diff --git a/packages/react-server/src/__tests__/ReactFlightServer-test.js b/packages/react-server/src/__tests__/ReactFlightServer-test.js
new file mode 100644
index 00000000000..b1d019f0f2a
--- /dev/null
+++ b/packages/react-server/src/__tests__/ReactFlightServer-test.js
@@ -0,0 +1,203 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (typeof Blob === 'undefined') {
+  global.Blob = require('buffer').Blob;
+}
+if (typeof File === 'undefined' || typeof FormData === 'undefined') {
+  global.File = require('undici').File;
+  global.FormData = require('undici').FormData;
+}
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+      const dot = name.lastIndexOf('.');
+      if (dot !== -1) {
+        name = name.slice(dot + 1);
+      }
+      return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+    })
+  );
+}
+
+let ReactServer;
+let ReactNoopFlightServer;
+let Scheduler;
+let advanceTimersByTime;
+let assertLog;
+let assertConsoleErrorDev;
+
+describe('ReactFlight', () => {
+  beforeEach(() => {
+    // Mock performance.now for timing tests
+    let time = 0;
+    advanceTimersByTime = timeMS => {
+      time += timeMS;
+      jest.advanceTimersByTime(timeMS);
+    };
+    const now = jest.fn().mockImplementation(() => {
+      return time++;
+    });
+    Object.defineProperty(performance, 'timeOrigin', {
+      value: time,
+      configurable: true,
+    });
+    Object.defineProperty(performance, 'now', {
+      value: now,
+      configurable: true,
+    });
+
+    jest.resetModules();
+    jest.mock('react', () => require('react/react.react-server'));
+    ReactServer = require('react');
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    Scheduler = require('scheduler');
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // @gate __DEV__
+  it('resets the owner stack limit periodically', async () => {
+    function App({siblingsBeforeStackOne, timeout}) {
+      const children = [];
+      for (
+        let i = 0;
+        i <
+        siblingsBeforeStackOne -
+          // <App /> callsite
+          1 -
+          // Stop so that OwnerStackOne will be right before cutoff
+          1;
+        i++
+      ) {
+        children.push(ReactServer.createElement(Component, {key: i}));
+      }
+      children.push(
+        ReactServer.createElement(OwnerStackOne, {key: 'stackOne'}),
+      );
+      children.push(
+        ReactServer.createElement(OwnerStackDelayed, {
+          key: 'stackTwo',
+          timeout,
+        }),
+      );
+
+      return children;
+    }
+
+    function Component() {
+      return null;
+    }
+
+    let stackOne;
+    function OwnerStackOne() {
+      Scheduler.log('render OwnerStackOne');
+      stackOne = ReactServer.captureOwnerStack();
+    }
+
+    let stackTwo;
+    function OwnerStackTwo() {
+      Scheduler.log('render OwnerStackTwo');
+      stackTwo = ReactServer.captureOwnerStack();
+    }
+    function OwnerStackDelayed({timeout}) {
+      Scheduler.log('render OwnerStackDelayed');
+
+      // Owner Stacks start fresh after `await`.
+      // We need to sync delay to observe the reset limit behavior.
+      // TODO: Is that the right behavior? If you do stack + Ownst Stack you'd get `OwnerStackTwo` twice.
+      jest.advanceTimersByTime(timeout);
+
+      return ReactServer.createElement(OwnerStackTwo, {});
+    }
+
+    ReactNoopFlightServer.render(
+      ReactServer.createElement(App, {
+        key: 'one',
+        // Should be the value with of `ownerStackLimit` with `__VARIANT__` so that we see the cutoff
+        siblingsBeforeStackOne: 500,
+        // Must be greater or equal then the reset interval
+        timeout: 1000,
+      }),
+    );
+
+    assertLog([
+      'render OwnerStackOne',
+      'render OwnerStackDelayed',
+      'render OwnerStackTwo',
+    ]);
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: '\n    in App (at **)',
+      stackTwo: __VARIANT__
+        ? // Didn't advance timers yet to reset
+          '\n    in UnknownOwner (at **)' + '\n    in UnknownOwner (at **)'
+        : // We never hit the limit outside __VARIANT__
+          '\n    in OwnerStackDelayed (at **)' + '\n    in App (at **)',
+    });
+
+    // Ensure we reset the limit after the timeout
+    advanceTimersByTime(1000);
+    ReactNoopFlightServer.render(
+      ReactServer.createElement(App, {
+        key: 'two',
+        siblingsBeforeStackOne: 0,
+        timeout: 0,
+      }),
+    );
+
+    expect({
+      pendingTimers: jest.getTimerCount(),
+      stackOne: normalizeCodeLocInfo(stackOne),
+      stackTwo: normalizeCodeLocInfo(stackTwo),
+    }).toEqual({
+      pendingTimers: 0,
+      stackOne: '\n    in App (at **)',
+      stackTwo: '\n    in OwnerStackDelayed (at **)' + '\n    in App (at **)',
+    });
+  });
+
+  it('logs an error when prod elements are rendered', async () => {
+    const element = ReactServer.createElement('span', {
+      key: 'one',
+      children: 'Free!',
+    });
+    ReactNoopFlightServer.render(
+      // bad clone
+      {...element},
+    );
+
+    assertConsoleErrorDev([
+      [
+        'Attempted to render <span key="one"> without development properties. This is not supported. It can happen if:' +
+          '\n- The element is created with a production version of React but rendered in development.' +
+          '\n- The element was cloned with a custom function instead of `React.cloneElement`.\n' +
+          "The props of this element may help locate this element: { children: 'Free!', [key]: [Getter] }",
+        {withoutStack: true},
+      ],
+      "TypeError: Cannot read properties of undefined (reading 'stack')" +
+        '\n    in <stack>',
+    ]);
+  });
+});
diff --git a/packages/react-server/src/__tests__/ReactServer-test.js b/packages/react-server/src/__tests__/ReactServer-test.js
new file mode 100644
index 00000000000..4d8678b4dce
--- /dev/null
+++ b/packages/react-server/src/__tests__/ReactServer-test.js
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+import {AsyncLocalStorage} from 'node:async_hooks';
+
+let act;
+let React;
+let ReactNoopServer;
+
+function normalizeCodeLocInfo(str) {
+  return (
+    str &&
+    str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
+      const dot = name.lastIndexOf('.');
+      if (dot !== -1) {
+        name = name.slice(dot + 1);
+      }
+      return '    in ' + name + (/\d/.test(m) ? ' (at **)' : '');
+    })
+  );
+}
+
+/**
+ * Removes all stackframes not pointing into this file
+ */
+function ignoreListStack(str) {
+  if (!str) {
+    return str;
+  }
+
+  let ignoreListedStack = '';
+  const lines = str.split('\n');
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const line of lines) {
+    if (line.indexOf(__filename) === -1) {
+    } else {
+      ignoreListedStack += '\n' + line.replace(__dirname, '.');
+    }
+  }
+
+  return ignoreListedStack;
+}
+
+const currentTask = new AsyncLocalStorage({defaultValue: null});
+
+describe('ReactServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    console.createTask = jest.fn(taskName => {
+      return {
+        run: taskFn => {
+          const parentTask = currentTask.getStore() || '';
+          return currentTask.run(parentTask + '\n' + taskName, taskFn);
+        },
+      };
+    });
+
+    act = require('internal-test-utils').act;
+    React = require('react');
+    ReactNoopServer = require('react-noop-renderer/server');
+  });
+
+  function div(...children) {
+    children = children.map(c =>
+      typeof c === 'string' ? {text: c, hidden: false} : c,
+    );
+    return {type: 'div', children, prop: undefined, hidden: false};
+  }
+
+  it('can call render', () => {
+    const result = ReactNoopServer.render(<div>hello world</div>);
+    expect(result.root).toEqual(div('hello world'));
+  });
+
+  it('has Owner Stacks in DEV when aborted', async () => {
+    const Context = React.createContext(null);
+
+    function Component({p1, p2, p3}) {
+      const context = React.use(Context);
+      if (context === null) {
+        throw new Error('Missing context');
+      }
+      React.use(p1);
+      React.use(p2);
+      React.use(p3);
+      return <div>Hello, Dave!</div>;
+    }
+    function Indirection({p1, p2, p3}) {
+      return (
+        <div>
+          <Component p1={p1} p2={p2} p3={p3} />
+        </div>
+      );
+    }
+    function App({p1, p2, p3}) {
+      return (
+        <section>
+          <div>
+            <Indirection p1={p1} p2={p2} p3={p3} />
+          </div>
+        </section>
+      );
+    }
+
+    let caughtError;
+    let componentStack;
+    let ownerStack;
+    let task;
+    const resolvedPromise = Promise.resolve('one');
+    resolvedPromise.status = 'fulfilled';
+    resolvedPromise.value = 'one';
+    let resolvePendingPromise;
+    const pendingPromise = new Promise(resolve => {
+      resolvePendingPromise = value => {
+        pendingPromise.status = 'fulfilled';
+        pendingPromise.value = value;
+        resolve(value);
+      };
+    });
+    const hangingPromise = new Promise(() => {});
+    const result = ReactNoopServer.render(
+      <Context value="provided">
+        <App p1={resolvedPromise} p2={pendingPromise} p3={hangingPromise} />
+      </Context>,
+      {
+        onError: (error, errorInfo) => {
+          caughtError = error;
+          componentStack = errorInfo.componentStack;
+          ownerStack = __DEV__ ? React.captureOwnerStack() : null;
+          task = currentTask.getStore();
+        },
+      },
+    );
+
+    await act(async () => {
+      resolvePendingPromise('two');
+      result.abort();
+    });
+    expect(caughtError).toEqual(
+      expect.objectContaining({
+        message: 'The render was aborted by the server without a reason.',
+      }),
+    );
+    expect(normalizeCodeLocInfo(componentStack)).toEqual(
+      '\n    in Component (at **)' +
+        '\n    in div' +
+        '\n    in Indirection (at **)' +
+        '\n    in div' +
+        '\n    in section' +
+        '\n    in App (at **)',
+    );
+    if (__DEV__) {
+      // The concrete location may change as this test is updated.
+      // Just make sure they still point at the same code
+      if (gate(flags => flags.enableAsyncDebugInfo)) {
+        expect(ignoreListStack(ownerStack)).toEqual(
+          '' +
+            // Pointing at React.use(p2)
+            '\n    at Component (./ReactServer-test.js:94:13)' +
+            '\n    at Indirection (./ReactServer-test.js:101:44)' +
+            '\n    at App (./ReactServer-test.js:109:46)',
+        );
+      } else {
+        expect(ignoreListStack(ownerStack)).toEqual(
+          '' +
+            '\n    at Indirection (./ReactServer-test.js:101:44)' +
+            '\n    at App (./ReactServer-test.js:109:46)',
+        );
+      }
+      expect(task).toEqual('\n<Component>');
+    } else {
+      expect(ownerStack).toBeNull();
+      expect(task).toEqual(undefined);
+    }
+  });
+});
diff --git a/packages/react-server/src/__tests__/test-file.txt b/packages/react-server/src/__tests__/test-file.txt
new file mode 100644
index 00000000000..fb4f66d7e87
--- /dev/null
+++ b/packages/react-server/src/__tests__/test-file.txt
@@ -0,0 +1,31 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius diam ut lectus suscipit, ac faucibus tellus fermentum. Phasellus rutrum bibendum tellus, eu malesuada metus dignissim sed. Pellentesque et quam libero. Donec ultricies massa vitae justo maximus, ultricies ultrices diam dictum. Ut in lectus non diam porttitor accumsan ac hendrerit tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a massa augue. Sed vitae purus id sapien luctus mattis. Maecenas imperdiet vehicula rhoncus.
+
+Etiam non tincidunt sapien, rhoncus fermentum ipsum. Cras id gravida felis. Phasellus finibus, mauris eu viverra auctor, augue tellus elementum sem, a vestibulum ligula purus vel erat. Nulla facilisi. Curabitur nulla ligula, viverra et elementum quis, sollicitudin sit amet nisl. Aenean vitae tortor mauris. Fusce iaculis risus eget lacus faucibus, quis congue dolor egestas. Integer viverra tellus tortor, vitae malesuada lorem ultricies vitae. Ut lacinia diam non ante pellentesque posuere. Suspendisse at posuere nunc, eget viverra elit. Vestibulum sit amet maximus lorem.
+
+Proin fermentum lacus non convallis gravida. Morbi a blandit nisi. Nam posuere lacus vitae molestie aliquam. Cras enim orci, elementum et urna vel, vehicula gravida neque. Etiam quis odio at odio aliquet lobortis ac et sapien. Nulla commodo, ante eget sodales facilisis, magna elit pretium odio, a consectetur dui tortor at erat. Morbi quis laoreet metus. Sed iaculis sodales nisi, ut pharetra magna laoreet eu.
+
+In iaculis, dolor quis consectetur fringilla, justo quam viverra turpis, eget dictum lectus nisl nec mi. Phasellus suscipit, leo ut tincidunt molestie, odio purus ornare ex, sagittis ornare erat nunc vel magna. Morbi malesuada risus nec turpis ultricies molestie dapibus nec justo. Vestibulum tempus bibendum purus, nec sodales libero convallis at. Fusce ipsum nibh, fringilla at sapien sit amet, malesuada suscipit lorem. Fusce et libero a dui gravida ultrices. Vestibulum quis lobortis velit. Morbi ut nisl lobortis, tempus sapien et, convallis mi. Integer varius, felis eu egestas dignissim, risus augue tristique elit, ultricies interdum arcu nibh et lectus. Integer enim mi, viverra eget scelerisque at, gravida eget justo. Nullam eget dolor id orci fringilla ultricies. In id luctus erat. Donec quis magna quis neque congue venenatis sit amet vel turpis. Donec congue tortor eu massa ullamcorper, ut imperdiet lectus posuere. Maecenas quis lorem quis nulla vehicula varius.
+
+Suspendisse tristique elit et luctus suscipit. Nunc quis justo luctus, malesuada velit vitae, accumsan tellus. Nunc ex sem, efficitur vitae semper et, consectetur quis turpis. Donec et tincidunt est, vitae varius sem. Aliquam at luctus dolor. Etiam pretium justo lectus, quis tempus quam feugiat ac. Suspendisse vitae sollicitudin erat, ut interdum felis. Cras lacinia tincidunt tempus. Vivamus congue et lectus quis suscipit. Fusce ultricies justo eget mi elementum, vitae consectetur lacus varius. Praesent fermentum in risus sit amet malesuada. Mauris semper sapien ornare pulvinar venenatis. Suspendisse potenti.
+
+Donec vestibulum purus et est cursus hendrerit. Vivamus pharetra ligula dolor, ut commodo felis accumsan sed. Integer pulvinar mollis metus, at cursus turpis laoreet ac. Maecenas lectus felis, dapibus eu ligula at, lacinia pharetra ex. Duis id tortor a metus pulvinar tincidunt. Suspendisse at lacus a nulla feugiat malesuada. Ut tincidunt interdum placerat. Fusce tincidunt elit in convallis elementum. Etiam commodo felis ut neque dapibus, ac finibus ante auctor. Sed tincidunt massa vitae sapien semper suscipit.
+
+Donec euismod sagittis lacus, eu lacinia tortor rutrum eu. Donec et sapien lacus. Aliquam non commodo magna, vitae commodo tortor. Vivamus vel urna eget ante varius condimentum. Etiam non purus pharetra, pharetra sem eu, maximus felis. Integer nec urna justo. Etiam a dolor tempor, posuere odio non, maximus metus. Vivamus malesuada mi libero, a viverra velit tempus vitae. Quisque accumsan sed nisi a venenatis. Donec malesuada erat at lacus tincidunt, sed euismod est ultricies. Fusce id posuere nisl. Aliquam erat volutpat. Morbi non erat iaculis turpis interdum facilisis. Nunc risus elit, laoreet quis ante sed, aliquam pharetra massa. Fusce cursus urna nec pharetra interdum.
+
+Etiam pharetra, metus nec malesuada efficitur, dui ipsum blandit felis, id cursus elit orci at eros. Phasellus suscipit lobortis est. Praesent egestas, est et scelerisque consectetur, neque velit dapibus elit, quis hendrerit nisi felis a nulla. Quisque facilisis rutrum varius. Integer quis libero sit amet erat tincidunt semper a vel quam. Curabitur rutrum fringilla consequat. Fusce in metus ut odio luctus viverra viverra et nulla. Vestibulum a lacinia augue, feugiat egestas diam. Proin elit arcu, venenatis quis elementum in, rutrum quis tortor. Integer vel lacus urna. Suspendisse pharetra sapien at ullamcorper hendrerit. Etiam nibh ipsum, vulputate eu pulvinar nec, pulvinar id odio.
+
+Proin tincidunt, augue id tristique dictum, nisi sem congue orci, non faucibus erat nibh ac metus. Curabitur leo massa, hendrerit a venenatis sed, aliquam ac ligula. Fusce facilisis vulputate dui ut sollicitudin. Phasellus tellus lacus, viverra at dui sit amet, facilisis accumsan nisi. Phasellus dui lectus, lobortis consequat convallis sed, luctus non dui. Duis tempus urna sed libero ullamcorper, placerat luctus enim dignissim. Mauris vitae odio mauris. Donec eget tortor vitae nibh laoreet viverra at eget urna. Integer in ex arcu. Vestibulum tellus erat, tempus sit amet neque nec, tristique maximus neque. Vivamus efficitur nisi massa, ut tempus lacus interdum quis. Cras posuere erat nec convallis viverra. Aenean efficitur nibh et augue maximus pretium. Aliquam hendrerit nulla dui. Donec elit enim, hendrerit ultricies orci sed, blandit elementum quam.
+
+Donec fringilla pretium ligula, sed imperdiet orci mattis quis. Mauris ullamcorper fermentum libero fringilla molestie. Sed laoreet, nisl in viverra convallis, enim tortor tincidunt elit, in consequat diam metus non libero. Quisque eleifend lobortis lobortis. Donec porta eget justo faucibus sagittis. Phasellus lacus diam, convallis tristique metus at, placerat luctus justo. Fusce vestibulum urna eget dictum vulputate. Nam non nisl bibendum risus vehicula rutrum nec vel purus. Morbi nec diam laoreet quam sodales malesuada. Suspendisse efficitur, magna vel sodales semper, neque nulla aliquam nisi, hendrerit mollis justo libero vel mi.
+
+Etiam tellus neque, vulputate quis justo sit amet, dapibus suscipit est. Morbi pulvinar ipsum risus, eu lacinia felis viverra eget. Quisque massa justo, aliquam non ornare sit amet, maximus maximus dui. Pellentesque aliquam fermentum libero sed aliquet. Nulla consequat ultrices commodo. Donec condimentum consectetur nulla, id euismod metus facilisis eget. Fusce at mauris blandit, mollis ex nec, dignissim ex. Proin nec facilisis arcu. In vestibulum at erat vel ultrices. Mauris lacinia elementum nibh rhoncus egestas. Duis lobortis magna eget sem consequat, ac malesuada orci gravida. Duis cursus quam augue, a condimentum velit scelerisque eget. Donec dapibus pellentesque tellus. Nulla malesuada, purus id efficitur volutpat, felis odio faucibus metus, scelerisque hendrerit enim velit in urna.
+
+Nulla massa felis, semper eget consectetur ac, scelerisque vitae mi. Praesent sit amet sagittis metus. Curabitur mollis ex quis erat faucibus mattis. Nullam risus lacus, suscipit sed luctus vel, dictum id odio. In et dictum elit. Aliquam quis consectetur metus. In feugiat, urna ac porttitor auctor, est arcu porta est, vel lobortis erat elit quis nunc. Nulla quis nibh vel sem fringilla semper sed quis ipsum. Morbi vehicula, urna non rhoncus hendrerit, velit purus accumsan purus, vel elementum arcu dui sit amet leo. Aenean ultricies orci ac ante placerat, id auctor magna sodales. Nam sit amet laoreet lectus. Etiam ligula velit, dignissim vel tincidunt at, dictum nec lacus. Nam non eleifend enim, sit amet dictum lectus. Suspendisse potenti. Suspendisse eget ante a mauris placerat lobortis sed eu dui.
+
+Nam et porta elit, vel interdum mauris. Vivamus eu elit nec nisl bibendum hendrerit. Morbi ornare mollis lacus non finibus. Praesent id orci ex. Donec commodo viverra dictum. Phasellus in lacus tellus. Curabitur at lorem efficitur leo dignissim varius at eu est. Vivamus justo erat, hendrerit id volutpat nec, euismod eget odio. Mauris et vulputate tellus, in maximus nunc. Vestibulum ante ligula, suscipit nec nibh in, placerat pellentesque neque.
+
+Nunc in accumsan ligula, quis accumsan diam. Fusce tincidunt neque a turpis ornare, id convallis quam convallis. Donec at luctus ipsum. Nam id enim ante. Fusce condimentum consectetur justo, in hendrerit lacus vehicula ut. Vestibulum ut hendrerit risus. Donec blandit ut magna eget aliquet. Donec sit amet faucibus ante. Suspendisse condimentum, mauris id aliquam ultricies, erat mi tincidunt eros, sit amet blandit urna purus vitae orci. Maecenas in faucibus ipsum, quis gravida ex. Sed tincidunt in ipsum id dignissim. Duis dui nisl, interdum at est non, rutrum porttitor felis. Sed at nibh dolor. Etiam cursus scelerisque leo.
+
+Morbi vel arcu ullamcorper, tristique eros sed, condimentum sapien. Duis suscipit consequat tincidunt. Proin commodo erat in velit cursus lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id metus luctus, commodo sapien iaculis, pharetra massa. Phasellus fringilla sagittis lacus, ac laoreet massa sollicitudin ac. Aliquam luctus ex non semper dictum. Morbi vel arcu vel purus aliquet tempus. Curabitur ultrices rutrum facilisis. Morbi enim lectus, ornare quis sem bibendum, aliquet imperdiet ex. Vestibulum commodo sed neque et fermentum. Vestibulum enim elit, lobortis vitae convallis ut, auctor in velit.
+
+Vestibulum semper vulputate elit, at volutpat quam. Nullam id scelerisque libero, nec facilisis lacus. Nulla quis rhoncus arcu. Aliquam erat volutpat. In viverra, diam id rutrum volutpat, ligula dui tristique ex, et pulvinar elit ex a est. Cras magna augue, porta vel tempus vitae, placerat et felis. In ex elit, mattis vitae molestie pretium, tempus vitae tortor. Integer vehicula orci magna, in ultrices nulla volutpat sit amet. Pellentesque odio erat, hendrerit at lacinia sit amet, tempus sit amet risus. Curabitur ut laoreet justo, nec fermentum nibh. Integer tincidunt mattis sem eu cursus.
diff --git a/packages/react-server/src/createFastHashJS.js b/packages/react-server/src/createFastHashJS.js
new file mode 100644
index 00000000000..063f15a7ccd
--- /dev/null
+++ b/packages/react-server/src/createFastHashJS.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// A pure JS implementation of a string hashing function. We do not use it for
+// security or obfuscation purposes, only to create compact hashes. So we
+// prioritize speed over collision avoidance. For example, we use this to hash
+// the component key path used by useActionState for MPA-style submissions.
+//
+// In environments where built-in hashing functions are available, we prefer
+// those instead. Like Node's crypto module, or Bun.hash. Unfortunately this
+// does not include the web standard crypto API because those methods are all
+// async. For our purposes, we need it to be sync because the cost of context
+// switching is too high to be worth it.
+//
+// The most popular hashing algorithm that meets these requirements in the JS
+// ecosystem is MurmurHash3, and almost all implementations I could find used
+// some version of the implementation by Gary Court inlined below.
+
+export function createFastHashJS(key: string): number {
+  return murmurhash3_32_gc(key, 0);
+}
+
+/* eslint-disable prefer-const, no-fallthrough */
+
+/**
+ * @license
+ *
+ * JS Implementation of MurmurHash3 (r136) (as of May 20, 2011)
+ *
+ * Copyright (c) 2011 Gary Court
+ * 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.
+ */
+
+function murmurhash3_32_gc(key: string, seed: number): number {
+  let remainder, bytes, h1, h1b, c1, c2, k1, i;
+
+  remainder = key.length & 3; // key.length % 4
+  bytes = key.length - remainder;
+  h1 = seed;
+  c1 = 0xcc9e2d51;
+  c2 = 0x1b873593;
+  i = 0;
+
+  while (i < bytes) {
+    k1 =
+      (key.charCodeAt(i) & 0xff) |
+      ((key.charCodeAt(++i) & 0xff) << 8) |
+      ((key.charCodeAt(++i) & 0xff) << 16) |
+      ((key.charCodeAt(++i) & 0xff) << 24);
+    ++i;
+
+    k1 =
+      ((k1 & 0xffff) * c1 + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
+    k1 = (k1 << 15) | (k1 >>> 17);
+    k1 =
+      ((k1 & 0xffff) * c2 + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
+
+    h1 ^= k1;
+    h1 = (h1 << 13) | (h1 >>> 19);
+    h1b =
+      ((h1 & 0xffff) * 5 + ((((h1 >>> 16) * 5) & 0xffff) << 16)) & 0xffffffff;
+    h1 = (h1b & 0xffff) + 0x6b64 + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16);
+  }
+
+  k1 = 0;
+
+  switch (remainder) {
+    case 3:
+      k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
+      k1 ^= key.charCodeAt(i) & 0xff;
+
+      k1 =
+        ((k1 & 0xffff) * c1 + ((((k1 >>> 16) * c1) & 0xffff) << 16)) &
+        0xffffffff;
+      k1 = (k1 << 15) | (k1 >>> 17);
+      k1 =
+        ((k1 & 0xffff) * c2 + ((((k1 >>> 16) * c2) & 0xffff) << 16)) &
+        0xffffffff;
+      h1 ^= k1;
+  }
+
+  h1 ^= key.length;
+
+  h1 ^= h1 >>> 16;
+  h1 =
+    ((h1 & 0xffff) * 0x85ebca6b +
+      ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) &
+    0xffffffff;
+  h1 ^= h1 >>> 13;
+  h1 =
+    ((h1 & 0xffff) * 0xc2b2ae35 +
+      ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16)) &
+    0xffffffff;
+  h1 ^= h1 >>> 16;
+
+  return h1 >>> 0;
+}
diff --git a/packages/react-server/src/flight/ReactFlightAsyncDispatcher.js b/packages/react-server/src/flight/ReactFlightAsyncDispatcher.js
new file mode 100644
index 00000000000..958b92c9cc6
--- /dev/null
+++ b/packages/react-server/src/flight/ReactFlightAsyncDispatcher.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes';
+
+import {resolveRequest, getCache} from '../ReactFlightServer';
+import {resolveOwner} from './ReactFlightCurrentOwner';
+
+function resolveCache(): Map<Function, mixed> {
+  const request = resolveRequest();
+  if (request) {
+    return getCache(request);
+  }
+  return new Map();
+}
+
+export const DefaultAsyncDispatcher: AsyncDispatcher = ({
+  getCacheForType<T>(resourceType: () => T): T {
+    const cache = resolveCache();
+    let entry: T | void = (cache.get(resourceType): any);
+    if (entry === undefined) {
+      entry = resourceType();
+      // TODO: Warn if undefined?
+      cache.set(resourceType, entry);
+    }
+    return entry;
+  },
+  cacheSignal(): null | AbortSignal {
+    const request = resolveRequest();
+    if (request) {
+      return request.cacheController.signal;
+    }
+    return null;
+  },
+}: any);
+
+if (__DEV__) {
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
+}
diff --git a/packages/react-server/src/flight/ReactFlightCurrentOwner.js b/packages/react-server/src/flight/ReactFlightCurrentOwner.js
new file mode 100644
index 00000000000..fec9e86829b
--- /dev/null
+++ b/packages/react-server/src/flight/ReactFlightCurrentOwner.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactComponentInfo} from 'shared/ReactTypes';
+
+import {
+  supportsComponentStorage,
+  componentStorage,
+} from '../ReactFlightServerConfig';
+
+let currentOwner: ReactComponentInfo | null = null;
+
+export function setCurrentOwner(componentInfo: null | ReactComponentInfo) {
+  currentOwner = componentInfo;
+}
+
+export function resolveOwner(): null | ReactComponentInfo {
+  if (currentOwner) return currentOwner;
+  if (supportsComponentStorage) {
+    const owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+  return null;
+}
diff --git a/packages/react-server/src/forks/ReactFizzConfig.custom.js b/packages/react-server/src/forks/ReactFizzConfig.custom.js
new file mode 100644
index 00000000000..aa8ea94b579
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFizzConfig.custom.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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.
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+import type {TransitionStatus} from 'react-reconciler/src/ReactFiberConfig';
+
+declare const $$$config: any;
+export opaque type Destination = mixed;
+export opaque type RenderState = mixed;
+export opaque type HoistableState = mixed;
+export opaque type ResumableState = mixed;
+export opaque type PreambleState = mixed;
+export opaque type FormatContext = mixed;
+export opaque type HeadersDescriptor = mixed;
+export type {TransitionStatus};
+
+export const isPrimaryRenderer = false;
+
+export const supportsClientAPIs = true;
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const bindToConsole = $$$config.bindToConsole;
+
+export const resetResumableState = $$$config.resetResumableState;
+export const completeResumableState = $$$config.completeResumableState;
+export const getChildFormatContext = $$$config.getChildFormatContext;
+export const getSuspenseFallbackFormatContext =
+  $$$config.getSuspenseFallbackFormatContext;
+export const getSuspenseContentFormatContext =
+  $$$config.getSuspenseContentFormatContext;
+export const getViewTransitionFormatContext =
+  $$$config.getViewTransitionFormatContext;
+export const makeId = $$$config.makeId;
+export const pushTextInstance = $$$config.pushTextInstance;
+export const pushStartInstance = $$$config.pushStartInstance;
+export const pushEndInstance = $$$config.pushEndInstance;
+export const pushSegmentFinale = $$$config.pushSegmentFinale;
+export const pushFormStateMarkerIsMatching =
+  $$$config.pushFormStateMarkerIsMatching;
+export const pushFormStateMarkerIsNotMatching =
+  $$$config.pushFormStateMarkerIsNotMatching;
+export const writeCompletedRoot = $$$config.writeCompletedRoot;
+export const writePlaceholder = $$$config.writePlaceholder;
+export const pushStartActivityBoundary = $$$config.pushStartActivityBoundary;
+export const pushEndActivityBoundary = $$$config.pushEndActivityBoundary;
+export const writeStartCompletedSuspenseBoundary =
+  $$$config.writeStartCompletedSuspenseBoundary;
+export const writeStartPendingSuspenseBoundary =
+  $$$config.writeStartPendingSuspenseBoundary;
+export const writeStartClientRenderedSuspenseBoundary =
+  $$$config.writeStartClientRenderedSuspenseBoundary;
+export const writeEndCompletedSuspenseBoundary =
+  $$$config.writeEndCompletedSuspenseBoundary;
+export const writeEndPendingSuspenseBoundary =
+  $$$config.writeEndPendingSuspenseBoundary;
+export const writeEndClientRenderedSuspenseBoundary =
+  $$$config.writeEndClientRenderedSuspenseBoundary;
+export const writeStartSegment = $$$config.writeStartSegment;
+export const writeEndSegment = $$$config.writeEndSegment;
+export const writeCompletedSegmentInstruction =
+  $$$config.writeCompletedSegmentInstruction;
+export const writeCompletedBoundaryInstruction =
+  $$$config.writeCompletedBoundaryInstruction;
+export const writeClientRenderBoundaryInstruction =
+  $$$config.writeClientRenderBoundaryInstruction;
+export const NotPendingTransition = $$$config.NotPendingTransition;
+export const createPreambleState = $$$config.createPreambleState;
+export const canHavePreamble = $$$config.canHavePreamble;
+export const isPreambleContext = $$$config.isPreambleContext;
+export const isPreambleReady = $$$config.isPreambleReady;
+export const hoistPreambleState = $$$config.hoistPreambleState;
+
+// -------------------------
+//     Resources
+// -------------------------
+export const writePreambleStart = $$$config.writePreambleStart;
+export const writePreambleEnd = $$$config.writePreambleEnd;
+export const writeHoistables = $$$config.writeHoistables;
+export const writeHoistablesForBoundary = $$$config.writeHoistablesForBoundary;
+export const writePostamble = $$$config.writePostamble;
+export const hoistHoistables = $$$config.hoistHoistables;
+export const createHoistableState = $$$config.createHoistableState;
+export const hasSuspenseyContent = $$$config.hasSuspenseyContent;
+export const emitEarlyPreloads = $$$config.emitEarlyPreloads;
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js b/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
new file mode 100644
index 00000000000..244202002ed
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFizzServer';
+
+export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+
+// For now, we get this from the global scope, but this will likely move to a module.
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js b/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js
new file mode 100644
index 00000000000..5695669839f
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFizzServer';
+
+export * from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
+
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-node.js b/packages/react-server/src/forks/ReactFizzConfig.dom-node.js
new file mode 100644
index 00000000000..5ee4566ad09
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom-node.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncLocalStorage} from 'async_hooks';
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+
+export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  new AsyncLocalStorage();
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom.js b/packages/react-server/src/forks/ReactFizzConfig.dom.js
new file mode 100644
index 00000000000..17ddc166a79
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFizzServer';
+
+export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
+
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
diff --git a/packages/react-server/src/forks/ReactFizzConfig.markup.js b/packages/react-server/src/forks/ReactFizzConfig.markup.js
new file mode 100644
index 00000000000..ed3fa90ff15
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFizzConfig.markup.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFizzServer';
+
+export * from 'react-markup/src/ReactFizzConfigMarkup.js';
+
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.custom.js b/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
new file mode 100644
index 00000000000..a7f0ee3d991
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.custom.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from '../ReactFlightServerConfigBundlerCustom';
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigPlain';
+
+export type Hints = any;
+export type HintCode = any;
+// eslint-disable-next-line no-unused-vars
+export type HintModel<T: any> = any;
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export function createHints(): any {
+  return null;
+}
+
+export type FormatContext = null;
+
+export function createRootFormatContext(): FormatContext {
+  return null;
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  return parentContext;
+}
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
new file mode 100644
index 00000000000..f7abb24acfc
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigBrowser';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-parcel.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-parcel.js
new file mode 100644
index 00000000000..d4ab5fe86cf
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-parcel.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigBrowser';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js
new file mode 100644
index 00000000000..a28bae93cac
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigBrowser';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
new file mode 100644
index 00000000000..a34bbf28c53
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigBrowser';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
new file mode 100644
index 00000000000..04fa6348123
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from '../ReactFlightServerConfigBundlerCustom';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigPlain';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-parcel.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-parcel.js
new file mode 100644
index 00000000000..0cd224a5405
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-parcel.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+// For now, we get this from the global scope, but this will likely move to a module.
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+
+export const supportsComponentStorage: boolean =
+  __DEV__ && supportsRequestStorage;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js
new file mode 100644
index 00000000000..67f82f59a6a
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+// For now, we get this from the global scope, but this will likely move to a module.
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+
+export const supportsComponentStorage: boolean =
+  __DEV__ && supportsRequestStorage;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
new file mode 100644
index 00000000000..c7605c0fcbc
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+// For now, we get this from the global scope, but this will likely move to a module.
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
+
+export const supportsComponentStorage: boolean =
+  __DEV__ && supportsRequestStorage;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
new file mode 100644
index 00000000000..2b4d2e1e809
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from '../ReactFlightServerConfigBundlerCustom';
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
+
+export type Hints = any;
+export type HintCode = any;
+// eslint-disable-next-line no-unused-vars
+export type HintModel<T: any> = any;
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export function createHints(): any {
+  return null;
+}
+
+export type FormatContext = null;
+
+export function createRootFormatContext(): FormatContext {
+  return null;
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  return parentContext;
+}
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js
new file mode 100644
index 00000000000..04ece77cc4a
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncLocalStorage} from 'async_hooks';
+
+import type {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  new AsyncLocalStorage();
+
+export const supportsComponentStorage = __DEV__;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNode';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-parcel.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-parcel.js
new file mode 100644
index 00000000000..b4f0f98a2db
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-parcel.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncLocalStorage} from 'async_hooks';
+
+import type {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  new AsyncLocalStorage();
+
+export const supportsComponentStorage = __DEV__;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNode';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js
new file mode 100644
index 00000000000..03975f6bf5f
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncLocalStorage} from 'async_hooks';
+
+import type {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  new AsyncLocalStorage();
+
+export const supportsComponentStorage = __DEV__;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNode';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-unbundled.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-unbundled.js
new file mode 100644
index 00000000000..661b756fc82
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-unbundled.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncLocalStorage} from 'async_hooks';
+
+import type {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-unbundled/src/server/ReactFlightServerConfigUnbundledBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  new AsyncLocalStorage();
+
+export const supportsComponentStorage = __DEV__;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNode';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
new file mode 100644
index 00000000000..f60f0f0242a
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncLocalStorage} from 'async_hooks';
+
+import type {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+
+export * from 'react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler';
+export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
+
+export const supportsRequestStorage = true;
+export const requestStorage: AsyncLocalStorage<Request | void> =
+  new AsyncLocalStorage();
+
+export const supportsComponentStorage = __DEV__;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  supportsComponentStorage ? new AsyncLocalStorage() : (null: any);
+
+export * from '../ReactFlightServerConfigDebugNode';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigServer';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.markup.js b/packages/react-server/src/forks/ReactFlightServerConfig.markup.js
new file mode 100644
index 00000000000..ca8c4670834
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.markup.js
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Request} from 'react-server/src/ReactFlightServer';
+import type {ReactComponentInfo} from 'shared/ReactTypes';
+import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type HintCode = string;
+export type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars
+export type Hints = null;
+
+export function createHints(): Hints {
+  return null;
+}
+
+export type FormatContext = null;
+
+export function createRootFormatContext(): FormatContext {
+  return null;
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  return parentContext;
+}
+
+export const supportsRequestStorage = false;
+export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
+
+export const supportsComponentStorage = false;
+export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
+  (null: any);
+
+export * from '../ReactFlightServerConfigDebugNoop';
+
+export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigPlain';
+
+export type ClientManifest = null;
+export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars
+export opaque type ServerReference<T> = null; // eslint-disable-line no-unused-vars
+export opaque type ClientReferenceMetadata: any = null;
+export opaque type ServerReferenceId: string = string;
+export opaque type ClientReferenceKey: any = string;
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function getClientReferenceKey(
+  reference: ClientReference<any>,
+): ClientReferenceKey {
+  throw new Error(
+    'Attempted to render a Client Component from renderToHTML. ' +
+      'This is not supported since it will never hydrate. ' +
+      'Only render Server Components with renderToHTML.',
+  );
+}
+
+export function resolveClientReferenceMetadata<T>(
+  config: ClientManifest,
+  clientReference: ClientReference<T>,
+): ClientReferenceMetadata {
+  throw new Error(
+    'Attempted to render a Client Component from renderToHTML. ' +
+      'This is not supported since it will never hydrate. ' +
+      'Only render Server Components with renderToHTML.',
+  );
+}
+
+export function getServerReferenceId<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): ServerReferenceId {
+  throw new Error(
+    'Attempted to render a Server Action from renderToHTML. ' +
+      'This is not supported since it varies by version of the app. ' +
+      'Use a fixed URL for any forms instead.',
+  );
+}
+
+export function getServerReferenceBoundArguments<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): null | Array<ReactClientValue> {
+  throw new Error(
+    'Attempted to render a Server Action from renderToHTML. ' +
+      'This is not supported since it varies by version of the app. ' +
+      'Use a fixed URL for any forms instead.',
+  );
+}
+
+export function getServerReferenceLocation<T>(
+  config: ClientManifest,
+  serverReference: ServerReference<T>,
+): void {
+  return undefined;
+}
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
new file mode 100644
index 00000000000..662bded021d
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 const $$$config: any;
+export opaque type Destination = mixed;
+
+export opaque type PrecomputedChunk = mixed;
+export opaque type Chunk = mixed;
+export opaque type BinaryChunk = mixed;
+
+export const scheduleWork = $$$config.scheduleWork;
+export const scheduleMicrotask = $$$config.scheduleMicrotask;
+export const beginWriting = $$$config.beginWriting;
+export const writeChunk = $$$config.writeChunk;
+export const writeChunkAndReturn = $$$config.writeChunkAndReturn;
+export const completeWriting = $$$config.completeWriting;
+export const flushBuffered = $$$config.flushBuffered;
+export const close = $$$config.close;
+export const closeWithError = $$$config.closeWithError;
+export const stringToChunk = $$$config.stringToChunk;
+export const stringToPrecomputedChunk = $$$config.stringToPrecomputedChunk;
+export const typedArrayToBinaryChunk = $$$config.typedArrayToBinaryChunk;
+export const byteLengthOfChunk = $$$config.byteLengthOfChunk;
+export const byteLengthOfBinaryChunk = $$$config.byteLengthOfBinaryChunk;
+export const createFastHash = $$$config.createFastHash;
+export const readAsDataURL = $$$config.readAsDataURL;
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-browser.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-browser.js
new file mode 100644
index 00000000000..845c2dc8a50
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../ReactServerStreamConfigBrowser';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-bun.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-bun.js
new file mode 100644
index 00000000000..0814a2e5c49
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-bun.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../ReactServerStreamConfigBun';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
new file mode 100644
index 00000000000..a594d19afc7
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../ReactServerStreamConfigEdge';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-fb.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-fb.js
new file mode 100644
index 00000000000..12ed6ba5985
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-fb.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../ReactServerStreamConfigFB';
+
+export function scheduleMicrotask(callback: () => void) {
+  // We don't schedule work in this model, and instead expect performWork to always be called repeatedly.
+}
+
+export function scheduleWork(callback: () => void) {
+  // We don't schedule work in this model, and instead expect performWork to always be called repeatedly.
+}
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-legacy.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-legacy.js
new file mode 100644
index 00000000000..80d5dcab2a5
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-legacy.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-bindings/src/server/ReactDOMLegacyServerStreamConfig';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-node.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-node.js
new file mode 100644
index 00000000000..1a3871aef2e
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 '../ReactServerStreamConfigNode';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.markup.js b/packages/react-server/src/forks/ReactServerStreamConfig.markup.js
new file mode 100644
index 00000000000..80d5dcab2a5
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.markup.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-bindings/src/server/ReactDOMLegacyServerStreamConfig';
diff --git a/packages/react-suspense-test-utils/README.md b/packages/react-suspense-test-utils/README.md
new file mode 100644
index 00000000000..77630cd7507
--- /dev/null
+++ b/packages/react-suspense-test-utils/README.md
@@ -0,0 +1,12 @@
+# react-suspense-test-utils
+
+This package is meant to be used alongside yet-to-be-released, experimental React features. It's unlikely to be useful in any other context.
+
+**Do not use in a real application.** We're publishing this early for
+demonstration purposes.
+
+**Use it at your own risk.**
+
+# No, Really, It Is Unstable
+
+The API ~~may~~ will change wildly between versions.
diff --git a/packages/react-suspense-test-utils/index.js b/packages/react-suspense-test-utils/index.js
new file mode 100644
index 00000000000..e5d16aa187e
--- /dev/null
+++ b/packages/react-suspense-test-utils/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactSuspenseTestUtils';
diff --git a/packages/react-suspense-test-utils/npm/index.js b/packages/react-suspense-test-utils/npm/index.js
new file mode 100644
index 00000000000..dc9c621a5b7
--- /dev/null
+++ b/packages/react-suspense-test-utils/npm/index.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-suspense-test-utils.js');
diff --git a/packages/react-suspense-test-utils/package.json b/packages/react-suspense-test-utils/package.json
new file mode 100644
index 00000000000..b23c3fc2e31
--- /dev/null
+++ b/packages/react-suspense-test-utils/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-suspense-test-utils",
+  "version": "0.1.0",
+  "private": true,
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-suspense-test-utils"
+  },
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0"
+  }
+}
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
new file mode 100644
index 00000000000..0e8e5c5b687
--- /dev/null
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+export function waitForSuspense<T>(fn: () => T): Promise<T> {
+  const cache: Map<Function, mixed> = new Map();
+  const testDispatcher: AsyncDispatcher = {
+    getCacheForType<R>(resourceType: () => R): R {
+      let entry: R | void = (cache.get(resourceType): any);
+      if (entry === undefined) {
+        entry = resourceType();
+        // TODO: Warn if undefined?
+        cache.set(resourceType, entry);
+      }
+      return entry;
+    },
+    cacheSignal(): null {
+      return null;
+    },
+    getOwner(): null {
+      return null;
+    },
+  };
+  // Not using async/await because we don't compile it.
+  return new Promise((resolve, reject) => {
+    function retry() {
+      const prevDispatcher = ReactSharedInternals.A;
+      ReactSharedInternals.A = testDispatcher;
+      try {
+        const result = fn();
+        resolve(result);
+      } catch (thrownValue) {
+        if (typeof thrownValue.then === 'function') {
+          thrownValue.then(retry, retry);
+        } else {
+          reject(thrownValue);
+        }
+      } finally {
+        ReactSharedInternals.A = prevDispatcher;
+      }
+    }
+    retry();
+  });
+}
diff --git a/packages/react-test-renderer/README.md b/packages/react-test-renderer/README.md
new file mode 100644
index 00000000000..c39e7a98ce5
--- /dev/null
+++ b/packages/react-test-renderer/README.md
@@ -0,0 +1,40 @@
+# `react-test-renderer` (DEPRECATED)
+
+## Deprecation notice
+
+`react-test-renderer` is deprecated and no longer maintained. It will be removed in a future version. As of React 19, you will see a console warning when invoking `ReactTestRenderer.create()`.
+
+### React Testing
+
+This library creates a contrived environment and its APIs encourage introspection on React's internals, which may change without notice causing broken tests. It is instead recommended to use browser-based environments such as jsdom and standard DOM APIs for your assertions.
+
+The React team recommends [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro) as a modern alternative that uses standard APIs, avoids internals, and [promotes best practices](https://testing-library.com/docs/guiding-principles).
+
+### React Native Testing
+
+The React team recommends @testing-library/react-native as a replacement for `react-test-renderer` for native integration tests. This React Native testing-library variant follows the same API design as described above and promotes better testing patterns.
+
+## Documentation
+
+This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
+
+Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.
+
+Documentation: [https://reactjs.org/docs/test-renderer.html](https://reactjs.org/docs/test-renderer.html)
+
+Usage:
+
+```jsx
+const ReactTestRenderer = require('react-test-renderer');
+
+const renderer = ReactTestRenderer.create(
+  <Link page="https://www.facebook.com/">Facebook</Link>
+);
+
+console.log(renderer.toJSON());
+// { type: 'a',
+//   props: { href: 'https://www.facebook.com/' },
+//   children: [ 'Facebook' ] }
+```
+
+You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: https://jestjs.io/blog/2016/07/27/jest-14.html.
diff --git a/packages/react-test-renderer/__tests__/shallow-test.js b/packages/react-test-renderer/__tests__/shallow-test.js
new file mode 100644
index 00000000000..9ee3e428bcb
--- /dev/null
+++ b/packages/react-test-renderer/__tests__/shallow-test.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('shallow', () => {
+  it('throws an error on init', () => {
+    const ReactShallowRenderer = require('../shallow.js').default;
+    expect(() => {
+      // eslint-disable-next-line no-new
+      new ReactShallowRenderer();
+    }).toThrow(
+      'react-test-renderer/shallow has been removed. See https://react.dev/warnings/react-test-renderer.'
+    );
+  });
+});
diff --git a/packages/react-test-renderer/index.js b/packages/react-test-renderer/index.js
new file mode 100644
index 00000000000..9d38f87fab1
--- /dev/null
+++ b/packages/react-test-renderer/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactTestRenderer';
diff --git a/packages/react-test-renderer/npm/index.js b/packages/react-test-renderer/npm/index.js
new file mode 100644
index 00000000000..c3a24f4e6a4
--- /dev/null
+++ b/packages/react-test-renderer/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-test-renderer.production.js');
+} else {
+  module.exports = require('./cjs/react-test-renderer.development.js');
+}
diff --git a/packages/react-test-renderer/npm/shallow.js b/packages/react-test-renderer/npm/shallow.js
new file mode 100644
index 00000000000..d964174eabd
--- /dev/null
+++ b/packages/react-test-renderer/npm/shallow.js
@@ -0,0 +1,9 @@
+'use strict';
+
+function ReactShallowRenderer() {
+  throw new Error(
+    'react-test-renderer/shallow has been removed. See https://react.dev/warnings/react-test-renderer.'
+  );
+}
+
+module.exports = ReactShallowRenderer;
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
new file mode 100644
index 00000000000..b09c371c010
--- /dev/null
+++ b/packages/react-test-renderer/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-test-renderer",
+  "version": "19.3.0",
+  "description": "React package for snapshot testing.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react-test-renderer"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "react-testing"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "dependencies": {
+    "react-is": "^19.3.0",
+    "scheduler": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "shallow.js",
+    "cjs/"
+  ]
+}
diff --git a/packages/react-test-renderer/shallow.js b/packages/react-test-renderer/shallow.js
new file mode 100644
index 00000000000..3e4ba25d83d
--- /dev/null
+++ b/packages/react-test-renderer/shallow.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactShallowRenderer from './npm/shallow.js';
+export default ReactShallowRenderer;
diff --git a/packages/react-test-renderer/src/ReactFiberConfigTestHost.js b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
new file mode 100644
index 00000000000..6b04a36d297
--- /dev/null
+++ b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
@@ -0,0 +1,623 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {TransitionTypes} from 'react/src/ReactTransitionType';
+
+import isArray from 'shared/isArray';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import {
+  DefaultEventPriority,
+  NoEventPriority,
+  type EventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
+import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+
+export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
+export const rendererPackageName = 'react-test-renderer';
+export const extraDevToolsConfig = null;
+
+export type Type = string;
+export type Props = Object;
+export type Container = {
+  children: Array<Instance | TextInstance>,
+  createNodeMock: Function,
+  tag: 'CONTAINER',
+};
+export type Instance = {
+  type: string,
+  props: Object,
+  isHidden: boolean,
+  children: Array<Instance | TextInstance>,
+  internalInstanceHandle: Object,
+  rootContainerInstance: Container,
+  tag: 'INSTANCE',
+};
+export type TextInstance = {
+  text: string,
+  isHidden: boolean,
+  tag: 'TEXT',
+};
+export type HydratableInstance = Instance | TextInstance;
+export type PublicInstance = Instance | TextInstance;
+export type HostContext = Object;
+export type UpdatePayload = Object;
+export type ChildSet = void; // Unused
+export type TimeoutHandle = TimeoutID;
+export type NoTimeout = -1;
+export type EventResponder = any;
+
+export type RendererInspectionConfig = $ReadOnly<{}>;
+export type TransitionStatus = mixed;
+
+export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoMicrotasks';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
+export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
+
+const NO_CONTEXT = {};
+const nodeToInstanceMap = new WeakMap<any, Instance>();
+
+if (__DEV__) {
+  Object.freeze(NO_CONTEXT);
+}
+
+export function getPublicInstance(inst: Instance | TextInstance): $FlowFixMe {
+  switch (inst.tag) {
+    case 'INSTANCE':
+      const createNodeMock = inst.rootContainerInstance.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;
+  }
+}
+
+export function appendChild(
+  parentInstance: Instance | Container,
+  child: Instance | TextInstance,
+): void {
+  if (__DEV__) {
+    if (!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) {
+    parentInstance.children.splice(index, 1);
+  }
+  parentInstance.children.push(child);
+}
+
+export function insertBefore(
+  parentInstance: Instance | Container,
+  child: Instance | TextInstance,
+  beforeChild: Instance | TextInstance,
+): void {
+  const index = parentInstance.children.indexOf(child);
+  if (index !== -1) {
+    parentInstance.children.splice(index, 1);
+  }
+  const beforeIndex = parentInstance.children.indexOf(beforeChild);
+  parentInstance.children.splice(beforeIndex, 0, child);
+}
+
+export function removeChild(
+  parentInstance: Instance | Container,
+  child: Instance | TextInstance,
+): void {
+  const index = parentInstance.children.indexOf(child);
+  parentInstance.children.splice(index, 1);
+}
+
+export function clearContainer(container: Container): void {
+  container.children.splice(0);
+}
+
+export function getRootHostContext(
+  rootContainerInstance: Container,
+): HostContext {
+  return NO_CONTEXT;
+}
+
+export function getChildHostContext(
+  parentHostContext: HostContext,
+  type: string,
+): HostContext {
+  return NO_CONTEXT;
+}
+
+export function prepareForCommit(containerInfo: Container): null | Object {
+  // noop
+  return null;
+}
+
+export function resetAfterCommit(containerInfo: Container): void {
+  // noop
+}
+
+export function createInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  hostContext: Object,
+  internalInstanceHandle: Object,
+): Instance {
+  return {
+    type,
+    props,
+    isHidden: false,
+    children: [],
+    internalInstanceHandle,
+    rootContainerInstance,
+    tag: 'INSTANCE',
+  };
+}
+
+export function cloneMutableInstance(
+  instance: Instance,
+  keepChildren: boolean,
+): Instance {
+  return {
+    type: instance.type,
+    props: instance.props,
+    isHidden: instance.isHidden,
+    children: keepChildren ? instance.children : [],
+    internalInstanceHandle: null,
+    rootContainerInstance: instance.rootContainerInstance,
+    tag: 'INSTANCE',
+  };
+}
+
+export function appendInitialChild(
+  parentInstance: Instance,
+  child: Instance | TextInstance,
+): void {
+  const index = parentInstance.children.indexOf(child);
+  if (index !== -1) {
+    parentInstance.children.splice(index, 1);
+  }
+  parentInstance.children.push(child);
+}
+
+export function finalizeInitialChildren(
+  testElement: Instance,
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  hostContext: Object,
+): boolean {
+  return false;
+}
+
+export function shouldSetTextContent(type: string, props: Props): boolean {
+  return false;
+}
+
+export function createTextInstance(
+  text: string,
+  rootContainerInstance: Container,
+  hostContext: Object,
+  internalInstanceHandle: Object,
+): TextInstance {
+  return {
+    text,
+    isHidden: false,
+    tag: 'TEXT',
+  };
+}
+
+export function cloneMutableTextInstance(
+  textInstance: TextInstance,
+): TextInstance {
+  return {
+    text: textInstance.text,
+    isHidden: textInstance.isHidden,
+    tag: 'TEXT',
+  };
+}
+
+let currentUpdatePriority: EventPriority = NoEventPriority;
+export function setCurrentUpdatePriority(newPriority: EventPriority): void {
+  currentUpdatePriority = newPriority;
+}
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return currentUpdatePriority;
+}
+
+export function resolveUpdatePriority(): EventPriority {
+  if (currentUpdatePriority !== NoEventPriority) {
+    return currentUpdatePriority;
+  }
+  return DefaultEventPriority;
+}
+
+export function trackSchedulerEvent(): void {}
+export function resolveEventType(): null | string {
+  return null;
+}
+export function resolveEventTimeStamp(): number {
+  return -1.1;
+}
+export function shouldAttemptEagerTransition(): boolean {
+  return false;
+}
+
+export const isPrimaryRenderer = false;
+export const warnsIfNotActing = true;
+
+export const scheduleTimeout = setTimeout;
+export const cancelTimeout = clearTimeout;
+
+export const noTimeout: -1 = -1;
+
+// -------------------
+//     Mutation
+// -------------------
+
+export const supportsMutation = true;
+
+export function commitUpdate(
+  instance: Instance,
+  type: string,
+  oldProps: Props,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {
+  instance.type = type;
+  instance.props = newProps;
+}
+
+export function commitMount(
+  instance: Instance,
+  type: string,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {
+  // noop
+}
+
+export function commitTextUpdate(
+  textInstance: TextInstance,
+  oldText: string,
+  newText: string,
+): void {
+  textInstance.text = newText;
+}
+
+export function resetTextContent(testElement: Instance): void {
+  // noop
+}
+
+export const appendChildToContainer = appendChild;
+export const insertInContainerBefore = insertBefore;
+export const removeChildFromContainer = removeChild;
+
+export function hideInstance(instance: Instance): void {
+  instance.isHidden = true;
+}
+
+export function hideTextInstance(textInstance: TextInstance): void {
+  textInstance.isHidden = true;
+}
+
+export function unhideInstance(instance: Instance, props: Props): void {
+  instance.isHidden = false;
+}
+
+export function unhideTextInstance(
+  textInstance: TextInstance,
+  text: string,
+): void {
+  textInstance.isHidden = false;
+}
+
+export function applyViewTransitionName(
+  instance: Instance,
+  name: string,
+  className: ?string,
+): void {
+  // Noop
+}
+
+export function restoreViewTransitionName(
+  instance: Instance,
+  props: Props,
+): void {
+  // Noop
+}
+
+export function cancelViewTransitionName(
+  instance: Instance,
+  name: string,
+  props: Props,
+): void {
+  // Noop
+}
+
+export function cancelRootViewTransitionName(rootContainer: Container): void {
+  // Noop
+}
+
+export function restoreRootViewTransitionName(rootContainer: Container): void {
+  // Noop
+}
+
+export function cloneRootViewTransitionContainer(
+  rootContainer: Container,
+): Instance {
+  return {
+    type: 'ROOT',
+    props: {},
+    isHidden: false,
+    children: [],
+    internalInstanceHandle: null,
+    rootContainerInstance: rootContainer,
+    tag: 'INSTANCE',
+  };
+}
+
+export function removeRootViewTransitionClone(
+  rootContainer: Container,
+  clone: Instance,
+): void {
+  // Noop since it was never inserted anywhere.
+}
+
+export type InstanceMeasurement = null;
+
+export function measureInstance(instance: Instance): InstanceMeasurement {
+  return null;
+}
+
+export function measureClonedInstance(instance: Instance): InstanceMeasurement {
+  return null;
+}
+
+export function wasInstanceInViewport(
+  measurement: InstanceMeasurement,
+): boolean {
+  return true;
+}
+
+export function hasInstanceChanged(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  return false;
+}
+
+export function hasInstanceAffectedParent(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  return false;
+}
+
+export function startViewTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  layoutCallback: () => void,
+  afterMutationCallback: () => void,
+  spawnedWorkCallback: () => void,
+  passiveCallback: () => mixed,
+  errorCallback: mixed => void,
+  blockedCallback: string => void, // Profiling-only
+  finishedAnimation: () => void, // Profiling-only
+): null | RunningViewTransition {
+  mutationCallback();
+  layoutCallback();
+  // Skip afterMutationCallback(). We don't need it since we're not animating.
+  spawnedWorkCallback();
+  // Skip passiveCallback(). Spawned work will schedule a task.
+  return null;
+}
+
+export type RunningViewTransition = null;
+
+export function startGestureTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  timeline: GestureTimeline,
+  rangeStart: number,
+  rangeEnd: number,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  animateCallback: () => void,
+  errorCallback: mixed => void,
+  finishedAnimation: () => void, // Profiling-only
+): null | RunningViewTransition {
+  mutationCallback();
+  animateCallback();
+  if (enableProfilerTimer) {
+    finishedAnimation();
+  }
+  return null;
+}
+
+export function stopViewTransition(transition: RunningViewTransition) {}
+
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  callback();
+}
+
+export type ViewTransitionInstance = null | {name: string, ...};
+
+export function createViewTransitionInstance(
+  name: string,
+): ViewTransitionInstance {
+  return null;
+}
+
+export type FragmentInstanceType = null;
+
+export function createFragmentInstance(
+  fragmentFiber: Object,
+): FragmentInstanceType {
+  return null;
+}
+
+export function updateFragmentInstanceFiber(
+  fragmentFiber: Object,
+  instance: FragmentInstanceType,
+): void {
+  // Noop
+}
+
+export function commitNewChildToFragmentInstance(
+  child: Instance,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  // noop
+}
+
+export function deleteChildFromFragmentInstance(
+  child: Instance,
+  fragmentInstance: FragmentInstanceType,
+): void {
+  // Noop
+}
+
+export function getInstanceFromNode(mockNode: Object): Object | null {
+  const instance = nodeToInstanceMap.get(mockNode);
+  if (instance !== undefined) {
+    return instance.internalInstanceHandle;
+  }
+  return null;
+}
+
+export type GestureTimeline = null;
+
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
+  return 0;
+}
+
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
+  // noop
+}
+
+export function afterActiveInstanceBlur() {
+  // noop
+}
+
+export function preparePortalMount(portalInstance: Instance): void {
+  // noop
+}
+
+export function prepareScopeUpdate(scopeInstance: Object, inst: Object): void {
+  nodeToInstanceMap.set(scopeInstance, inst);
+}
+
+export function getInstanceFromScope(scopeInstance: Object): null | Object {
+  return nodeToInstanceMap.get(scopeInstance) || null;
+}
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
+
+export function logRecoverableError(error: mixed): void {
+  // noop
+}
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
+
+export function maySuspendCommit(type: Type, props: Props): boolean {
+  return false;
+}
+
+export function maySuspendCommitOnUpdate(
+  type: Type,
+  oldProps: Props,
+  newProps: Props,
+): boolean {
+  return false;
+}
+
+export function maySuspendCommitInSyncRender(
+  type: Type,
+  props: Props,
+): boolean {
+  return false;
+}
+
+export function preloadInstance(
+  instance: Instance,
+  type: Type,
+  props: Props,
+): boolean {
+  // Return true to indicate it's already loaded
+  return true;
+}
+
+export opaque type SuspendedState = null;
+
+export function startSuspendingCommit(): SuspendedState {
+  return null;
+}
+
+export function suspendInstance(
+  state: SuspendedState,
+  instance: Instance,
+  type: Type,
+  props: Props,
+): void {}
+
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  container: Container,
+): void {}
+
+export function waitForCommitToBeReady(
+  state: SuspendedState,
+  timeoutOffset: number,
+): null {
+  return null;
+}
+
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  return null;
+}
+
+export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
+
+export type FormInstance = Instance;
+export function resetFormInstance(form: Instance): void {}
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
new file mode 100644
index 00000000000..08676503fa4
--- /dev/null
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -0,0 +1,655 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  Container,
+  PublicInstance,
+  Instance,
+  TextInstance,
+} from './ReactFiberConfigTestHost';
+
+import * as React from 'react';
+import * as Scheduler from 'scheduler/unstable_mock';
+import {
+  getPublicRootInstance,
+  createContainer,
+  updateContainer,
+  flushSyncFromReconciler,
+  injectIntoDevTools,
+  batchedUpdates,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
+} from 'react-reconciler/src/ReactFiberReconciler';
+import {findCurrentFiberUsingSlowPath} from 'react-reconciler/src/ReactFiberTreeReflection';
+import {
+  Fragment,
+  FunctionComponent,
+  ClassComponent,
+  HostComponent,
+  HostHoistable,
+  HostSingleton,
+  HostPortal,
+  HostText,
+  HostRoot,
+  ContextConsumer,
+  ContextProvider,
+  Mode,
+  ForwardRef,
+  Profiler,
+  MemoComponent,
+  SimpleMemoComponent,
+  IncompleteClassComponent,
+  ScopeComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+import isArray from 'shared/isArray';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import ReactVersion from 'shared/ReactVersion';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
+
+import {getPublicInstance} from './ReactFiberConfigTestHost';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  enableReactTestRendererWarning,
+  disableLegacyMode,
+} from 'shared/ReactFeatureFlags';
+
+import noop from 'shared/noop';
+import type {WorkTag} from 'react-reconciler/src/ReactWorkTags';
+
+const defaultOnDefaultTransitionIndicator: () => void | (() => void) = noop;
+
+// $FlowFixMe[prop-missing]: This is only in the development export.
+const act = React.act;
+
+// TODO: Remove from public bundle
+
+type TestRendererOptions = {
+  createNodeMock: (element: React$Element<any>) => any,
+  unstable_isConcurrent: boolean,
+  unstable_strictMode: boolean,
+  ...
+};
+
+type ReactTestRendererJSON = {
+  type: string,
+  props: {[propName: string]: any, ...},
+  children: null | Array<ReactTestRendererNode>,
+  $$typeof?: symbol, // Optional because we add it with defineProperty().
+};
+type ReactTestRendererNode = ReactTestRendererJSON | string;
+
+type FindOptions = {
+  // 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;
+
+const defaultTestOptions = {
+  createNodeMock: function () {
+    return null;
+  },
+};
+
+function toJSON(inst: Instance | TextInstance): ReactTestRendererNode | null {
+  if (inst.isHidden) {
+    // Omit timed out children from output entirely. This seems like the least
+    // surprising behavior. We could perhaps add a separate API that includes
+    // them, if it turns out people need it.
+    return null;
+  }
+  switch (inst.tag) {
+    case 'TEXT':
+      return inst.text;
+    case 'INSTANCE': {
+      // We don't include the `children` prop in JSON.
+      // Instead, we will include the actual rendered children.
+      const {children, ...props} = inst.props;
+      let renderedChildren = null;
+      if (inst.children && inst.children.length) {
+        for (let i = 0; i < inst.children.length; i++) {
+          const renderedChild = toJSON(inst.children[i]);
+          if (renderedChild !== null) {
+            if (renderedChildren === null) {
+              renderedChildren = [renderedChild];
+            } else {
+              renderedChildren.push(renderedChild);
+            }
+          }
+        }
+      }
+      const json: ReactTestRendererJSON = {
+        type: inst.type,
+        props: props,
+        children: renderedChildren,
+      };
+      Object.defineProperty(json, '$$typeof', {
+        value: Symbol.for('react.test.json'),
+      });
+      return json;
+    }
+    default:
+      throw new Error(`Unexpected node type in toJSON: ${inst.tag}`);
+  }
+}
+
+function childrenToTree(node: null | Fiber) {
+  if (!node) {
+    return null;
+  }
+  const children = nodeAndSiblingsArray(node);
+  if (children.length === 0) {
+    return null;
+  } else if (children.length === 1) {
+    return toTree(children[0]);
+  }
+  return flatten(children.map(toTree));
+}
+
+// $FlowFixMe[missing-local-annot]
+function nodeAndSiblingsArray(nodeWithSibling) {
+  const array = [];
+  let node = nodeWithSibling;
+  while (node != null) {
+    array.push(node);
+    node = node.sibling;
+  }
+  return array;
+}
+
+// $FlowFixMe[missing-local-annot]
+function flatten(arr) {
+  const result = [];
+  const stack = [{i: 0, array: arr}];
+  while (stack.length) {
+    const n = stack.pop();
+    // $FlowFixMe[incompatible-use]
+    while (n.i < n.array.length) {
+      // $FlowFixMe[incompatible-use]
+      const el = n.array[n.i];
+      // $FlowFixMe[incompatible-use]
+      n.i += 1;
+      if (isArray(el)) {
+        // $FlowFixMe[incompatible-call]
+        stack.push(n);
+        stack.push({i: 0, array: el});
+        break;
+      }
+      result.push(el);
+    }
+  }
+  return result;
+}
+
+function toTree(node: null | Fiber): $FlowFixMe {
+  if (node == null) {
+    return null;
+  }
+  switch (node.tag) {
+    case HostRoot:
+      return childrenToTree(node.child);
+    case HostPortal:
+      return childrenToTree(node.child);
+    case ClassComponent:
+      return {
+        nodeType: 'component',
+        type: node.type,
+        props: {...node.memoizedProps},
+        instance: node.stateNode,
+        rendered: childrenToTree(node.child),
+      };
+    case FunctionComponent:
+    case SimpleMemoComponent:
+      return {
+        nodeType: 'component',
+        type: node.type,
+        props: {...node.memoizedProps},
+        instance: null,
+        rendered: childrenToTree(node.child),
+      };
+    case HostHoistable:
+    case HostSingleton:
+    case HostComponent: {
+      return {
+        nodeType: 'host',
+        type: node.type,
+        props: {...node.memoizedProps},
+        instance: null, // TODO: use createNodeMock here somehow?
+        rendered: flatten(nodeAndSiblingsArray(node.child).map(toTree)),
+      };
+    }
+    case HostText:
+      return node.stateNode.text;
+    case Fragment:
+    case ContextProvider:
+    case ContextConsumer:
+    case Mode:
+    case Profiler:
+    case ForwardRef:
+    case MemoComponent:
+    case IncompleteClassComponent:
+    case ScopeComponent:
+      return childrenToTree(node.child);
+    default:
+      throw new Error(
+        `toTree() does not yet know how to handle nodes with tag=${node.tag}`,
+      );
+  }
+}
+
+const validWrapperTypes: Set<WorkTag> = new Set([
+  FunctionComponent,
+  ClassComponent,
+  HostComponent,
+  ForwardRef,
+  MemoComponent,
+  SimpleMemoComponent,
+  // Normally skipped, but used when there's more than one root child.
+  HostRoot,
+]);
+
+function getChildren(parent: Fiber) {
+  const children = [];
+  const startingNode = parent;
+  let node: Fiber = startingNode;
+  if (node.child === null) {
+    return children;
+  }
+  node.child.return = node;
+  node = node.child;
+  outer: while (true) {
+    let descend = false;
+    if (validWrapperTypes.has(node.tag)) {
+      children.push(wrapFiber(node));
+    } else if (node.tag === HostText) {
+      if (__DEV__) {
+        checkPropStringCoercion(node.memoizedProps, 'memoizedProps');
+      }
+      children.push('' + node.memoizedProps);
+    } else {
+      descend = true;
+    }
+    if (descend && node.child !== null) {
+      node.child.return = node;
+      node = node.child;
+      continue;
+    }
+    while (node.sibling === null) {
+      if (node.return === startingNode) {
+        break outer;
+      }
+      node = (node.return: any);
+    }
+    (node.sibling: any).return = node.return;
+    node = (node.sibling: any);
+  }
+  return children;
+}
+
+class ReactTestInstance {
+  _fiber: Fiber;
+
+  _currentFiber(): Fiber {
+    // Throws if this component has been unmounted.
+    const fiber = findCurrentFiberUsingSlowPath(this._fiber);
+
+    if (fiber === null) {
+      throw new Error(
+        "Can't read from currently-mounting component. This error is likely " +
+          'caused by a bug in React. Please file an issue.',
+      );
+    }
+
+    return fiber;
+  }
+
+  constructor(fiber: Fiber) {
+    if (!validWrapperTypes.has(fiber.tag)) {
+      throw new Error(
+        `Unexpected object passed to ReactTestInstance constructor (tag: ${fiber.tag}). ` +
+          'This is probably a bug in React.',
+      );
+    }
+
+    this._fiber = fiber;
+  }
+
+  get instance(): $FlowFixMe {
+    const tag = this._fiber.tag;
+    if (
+      tag === HostComponent ||
+      tag === HostHoistable ||
+      tag === HostSingleton
+    ) {
+      return getPublicInstance(this._fiber.stateNode);
+    } else {
+      return this._fiber.stateNode;
+    }
+  }
+
+  get type(): any {
+    return this._fiber.type;
+  }
+
+  get props(): Object {
+    return this._currentFiber().memoizedProps;
+  }
+
+  get parent(): ?ReactTestInstance {
+    let parent = this._fiber.return;
+    while (parent !== null) {
+      if (validWrapperTypes.has(parent.tag)) {
+        if (parent.tag === HostRoot) {
+          // Special case: we only "materialize" instances for roots
+          // if they have more than a single child. So we'll check that now.
+          if (getChildren(parent).length < 2) {
+            return null;
+          }
+        }
+        return wrapFiber(parent);
+      }
+      parent = parent.return;
+    }
+    return null;
+  }
+
+  get children(): Array<ReactTestInstance | string> {
+    return getChildren(this._currentFiber());
+  }
+
+  // Custom search functions
+  find(predicate: Predicate): ReactTestInstance {
+    return expectOne(
+      this.findAll(predicate, {deep: false}),
+      `matching custom predicate: ${predicate.toString()}`,
+    );
+  }
+
+  findByType(type: any): ReactTestInstance {
+    return expectOne(
+      this.findAllByType(type, {deep: false}),
+      `with node type: "${getComponentNameFromType(type) || 'Unknown'}"`,
+    );
+  }
+
+  findByProps(props: Object): ReactTestInstance {
+    return expectOne(
+      this.findAllByProps(props, {deep: false}),
+      `with props: ${JSON.stringify(props)}`,
+    );
+  }
+
+  findAll(
+    predicate: Predicate,
+    options: ?FindOptions = null,
+  ): Array<ReactTestInstance> {
+    return findAll(this, predicate, options);
+  }
+
+  findAllByType(
+    type: any,
+    options: ?FindOptions = null,
+  ): Array<ReactTestInstance> {
+    return findAll(this, node => node.type === type, options);
+  }
+
+  findAllByProps(
+    props: Object,
+    options: ?FindOptions = null,
+  ): Array<ReactTestInstance> {
+    return findAll(
+      this,
+      node => node.props && propsMatch(node.props, props),
+      options,
+    );
+  }
+}
+
+function findAll(
+  root: ReactTestInstance,
+  predicate: Predicate,
+  options: ?FindOptions,
+): Array<ReactTestInstance> {
+  const deep = options ? options.deep : true;
+  const results = [];
+
+  if (predicate(root)) {
+    results.push(root);
+    if (!deep) {
+      return results;
+    }
+  }
+
+  root.children.forEach(child => {
+    if (typeof child === 'string') {
+      return;
+    }
+    results.push(...findAll(child, predicate, options));
+  });
+
+  return results;
+}
+
+function expectOne(
+  all: Array<ReactTestInstance>,
+  message: string,
+): ReactTestInstance {
+  if (all.length === 1) {
+    return all[0];
+  }
+
+  const prefix =
+    all.length === 0
+      ? 'No instances found '
+      : `Expected 1 but found ${all.length} instances `;
+
+  throw new Error(prefix + message);
+}
+
+function propsMatch(props: Object, filter: Object): boolean {
+  for (const key in filter) {
+    if (props[key] !== filter[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function create(
+  element: React$Element<any>,
+  options: TestRendererOptions,
+): {
+  _Scheduler: typeof Scheduler,
+  root: void,
+  toJSON(): Array<ReactTestRendererNode> | ReactTestRendererNode | null,
+  toTree(): mixed,
+  update(newElement: React$Element<any>): any,
+  unmount(): void,
+  getInstance(): component(...props: any) | PublicInstance | null,
+  unstable_flushSync: typeof flushSyncFromReconciler,
+} {
+  if (__DEV__) {
+    if (
+      enableReactTestRendererWarning === true &&
+      global.IS_REACT_NATIVE_TEST_ENVIRONMENT !== true
+    ) {
+      console.error(
+        'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer',
+      );
+    }
+  }
+
+  let createNodeMock = defaultTestOptions.createNodeMock;
+  const isConcurrentOnly =
+    disableLegacyMode === true &&
+    global.IS_REACT_NATIVE_TEST_ENVIRONMENT !== true;
+  let isConcurrent = isConcurrentOnly;
+  let isStrictMode = false;
+  if (typeof options === 'object' && options !== null) {
+    if (typeof options.createNodeMock === 'function') {
+      // $FlowFixMe[incompatible-type] found when upgrading Flow
+      createNodeMock = options.createNodeMock;
+    }
+    if (isConcurrentOnly === false) {
+      isConcurrent = options.unstable_isConcurrent;
+    }
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+  }
+  let container: Container = {
+    children: ([]: Array<Instance | TextInstance>),
+    createNodeMock,
+    tag: 'CONTAINER',
+  };
+  let root: FiberRoot | null = createContainer(
+    container,
+    isConcurrent ? ConcurrentRoot : LegacyRoot,
+    null,
+    isStrictMode,
+    false,
+    '',
+    defaultOnUncaughtError,
+    defaultOnCaughtError,
+    defaultOnRecoverableError,
+    defaultOnDefaultTransitionIndicator,
+    null,
+  );
+
+  if (root == null) {
+    throw new Error('something went wrong');
+  }
+
+  updateContainer(element, root, null, null);
+
+  const entry = {
+    _Scheduler: Scheduler,
+
+    root: undefined, // makes flow happy
+    // we define a 'getter' for 'root' below using 'Object.defineProperty'
+    toJSON(): Array<ReactTestRendererNode> | ReactTestRendererNode | null {
+      if (root == null || root.current == null || container == null) {
+        return null;
+      }
+      if (container.children.length === 0) {
+        return null;
+      }
+      if (container.children.length === 1) {
+        return toJSON(container.children[0]);
+      }
+      if (
+        container.children.length === 2 &&
+        container.children[0].isHidden === true &&
+        container.children[1].isHidden === false
+      ) {
+        // Omit timed out children from output entirely, including the fact that we
+        // temporarily wrap fallback and timed out children in an array.
+        return toJSON(container.children[1]);
+      }
+      let renderedChildren = null;
+      if (container.children && container.children.length) {
+        for (let i = 0; i < container.children.length; i++) {
+          const renderedChild = toJSON(container.children[i]);
+          if (renderedChild !== null) {
+            if (renderedChildren === null) {
+              renderedChildren = [renderedChild];
+            } else {
+              renderedChildren.push(renderedChild);
+            }
+          }
+        }
+      }
+      return renderedChildren;
+    },
+    toTree() {
+      if (root == null || root.current == null) {
+        return null;
+      }
+      return toTree(root.current);
+    },
+    update(newElement: React$Element<any>): number | void {
+      if (root == null || root.current == null) {
+        return;
+      }
+      updateContainer(newElement, root, null, null);
+    },
+    unmount() {
+      if (root == null || root.current == null) {
+        return;
+      }
+      updateContainer(null, root, null, null);
+      // $FlowFixMe[incompatible-type] found when upgrading Flow
+      container = null;
+      root = null;
+    },
+    getInstance() {
+      if (root == null || root.current == null) {
+        return null;
+      }
+      return getPublicRootInstance(root);
+    },
+
+    unstable_flushSync: flushSyncFromReconciler,
+  };
+
+  Object.defineProperty(
+    entry,
+    'root',
+    ({
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        if (root === null) {
+          throw new Error("Can't access .root on unmounted test renderer");
+        }
+        const children = getChildren(root.current);
+        if (children.length === 0) {
+          throw new Error("Can't access .root on unmounted test renderer");
+        } else if (children.length === 1) {
+          // Normally, we skip the root and just give you the child.
+          return children[0];
+        } else {
+          // However, we give you the root if there's more than one root child.
+          // We could make this the behavior for all cases but it would be a breaking change.
+          // $FlowFixMe[incompatible-use] found when upgrading Flow
+          return wrapFiber(root.current);
+        }
+      },
+    }: Object),
+  );
+
+  return entry;
+}
+
+const fiberToWrapper = new WeakMap<Fiber, ReactTestInstance>();
+function wrapFiber(fiber: Fiber): ReactTestInstance {
+  let wrapper = fiberToWrapper.get(fiber);
+  if (wrapper === undefined && fiber.alternate !== null) {
+    wrapper = fiberToWrapper.get(fiber.alternate);
+  }
+  if (wrapper === undefined) {
+    wrapper = new ReactTestInstance(fiber);
+    fiberToWrapper.set(fiber, wrapper);
+  }
+  return wrapper;
+}
+
+// Enable ReactTestRenderer to be used to test DevTools integration.
+injectIntoDevTools();
+
+export {
+  Scheduler as _Scheduler,
+  create,
+  batchedUpdates as unstable_batchedUpdates,
+  act,
+  ReactVersion as version,
+};
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
new file mode 100644
index 00000000000..62bef5353ea
--- /dev/null
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
@@ -0,0 +1,1240 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+const React = require('react');
+const ReactTestRenderer = require('react-test-renderer');
+const {format: prettyFormat} = require('pretty-format');
+const InternalTestUtils = require('internal-test-utils');
+const waitForAll = InternalTestUtils.waitForAll;
+const act = InternalTestUtils.act;
+const Reconciler = require('react-reconciler/src/ReactFiberReconciler');
+const {
+  ConcurrentRoot,
+  LegacyRoot,
+} = require('react-reconciler/src/ReactRootTags');
+
+// Isolate noop renderer
+jest.resetModules();
+const ReactNoop = require('react-noop-renderer');
+
+// Kind of hacky, but we nullify all the instances to test the tree structure
+// with jasmine's deep equality function, and test the instances separate. We
+// also delete children props because testing them is more annoying and not
+// really important to verify.
+function cleanNodeOrArray(node) {
+  if (!node) {
+    return;
+  }
+  if (Array.isArray(node)) {
+    node.forEach(cleanNodeOrArray);
+    return;
+  }
+  if (node && node.instance) {
+    node.instance = null;
+  }
+  if (node && node.props && node.props.children) {
+    const {children, ...props} = node.props;
+    node.props = props;
+  }
+  if (Array.isArray(node.rendered)) {
+    node.rendered.forEach(cleanNodeOrArray);
+  } else if (typeof node.rendered === 'object') {
+    cleanNodeOrArray(node.rendered);
+  }
+}
+
+describe('ReactTestRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags.enableReactTestRendererWarning = false;
+  });
+
+  // @gate __DEV__
+  it('should warn if enableReactTestRendererWarning is enabled', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    ReactFeatureFlags.enableReactTestRendererWarning = true;
+    ReactTestRenderer.create(<div />);
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.mock.calls[0][0]).toContain(
+      'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer',
+    );
+    console.error.mockRestore();
+  });
+
+  it('should not warn if enableReactTestRendererWarning is enabled but the RN global is set', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    global.IS_REACT_NATIVE_TEST_ENVIRONMENT = true;
+    ReactFeatureFlags.enableReactTestRendererWarning = true;
+    ReactTestRenderer.create(<div />);
+    expect(console.error).toHaveBeenCalledTimes(0);
+    console.error.mockRestore();
+  });
+
+  describe('root tags', () => {
+    let createContainerSpy;
+    beforeEach(() => {
+      global.IS_REACT_NATIVE_TEST_ENVIRONMENT = false;
+      createContainerSpy = jest.spyOn(Reconciler, 'createContainer');
+    });
+
+    function expectTag(tag) {
+      expect(createContainerSpy).toHaveBeenCalledWith(
+        expect.anything(),
+        tag,
+        null,
+        expect.anything(),
+        false,
+        expect.anything(),
+        expect.anything(),
+        expect.anything(),
+        expect.anything(),
+        expect.anything(),
+        null,
+      );
+    }
+
+    // @gate disableLegacyMode
+    it('should render using concurrent root if disableLegacyMode', () => {
+      ReactTestRenderer.create(<div />);
+      expectTag(ConcurrentRoot);
+    });
+
+    // @gate !disableLegacyMode
+    it('should default to legacy root if not disableLegacyMode', () => {
+      ReactTestRenderer.create(<div />);
+      expectTag(LegacyRoot);
+    });
+
+    it('should allow unstable_isConcurrent if not disableLegacyMode', async () => {
+      ReactTestRenderer.create(<div />, {
+        unstable_isConcurrent: true,
+      });
+      ReactTestRenderer.create(<div />);
+      expectTag(ConcurrentRoot);
+    });
+
+    it('should render legacy root when RN test environment', async () => {
+      global.IS_REACT_NATIVE_TEST_ENVIRONMENT = true;
+      ReactTestRenderer.create(<div />);
+      expectTag(LegacyRoot);
+    });
+  });
+
+  it('renders a simple component', async () => {
+    function Link() {
+      return <a role="link" />;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Link />);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'a',
+      props: {role: 'link'},
+      children: null,
+    });
+  });
+
+  it('renders a top-level empty component', async () => {
+    function Empty() {
+      return null;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Empty />);
+    });
+    expect(renderer.toJSON()).toEqual(null);
+  });
+
+  it('exposes a type flag', async () => {
+    function Link() {
+      return <a role="link" />;
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Link />);
+    });
+    const object = renderer.toJSON();
+    expect(object.$$typeof).toBe(Symbol.for('react.test.json'));
+
+    // $$typeof should not be enumerable.
+    for (const key in object) {
+      if (object.hasOwnProperty(key)) {
+        expect(key).not.toBe('$$typeof');
+      }
+    }
+  });
+
+  it('can render a composite component', async () => {
+    class Component extends React.Component {
+      render() {
+        return (
+          <div className="purple">
+            <Child />
+          </div>
+        );
+      }
+    }
+
+    const Child = () => {
+      return <moo />;
+    };
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Component />);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {className: 'purple'},
+      children: [{type: 'moo', props: {}, children: null}],
+    });
+  });
+
+  it('renders some basics with an update', async () => {
+    let renders = 0;
+
+    class Component extends React.Component {
+      state = {x: 3};
+
+      render() {
+        renders++;
+        return (
+          <div className="purple">
+            {this.state.x}
+            <Child />
+            <Null />
+          </div>
+        );
+      }
+
+      componentDidMount() {
+        this.setState({x: 7});
+      }
+    }
+
+    const Child = () => {
+      renders++;
+      return <moo />;
+    };
+
+    const Null = () => {
+      renders++;
+      return null;
+    };
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Component />);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {className: 'purple'},
+      children: ['7', {type: 'moo', props: {}, children: null}],
+    });
+    expect(renders).toBe(6);
+  });
+
+  it('exposes the instance', async () => {
+    class Mouse extends React.Component {
+      constructor() {
+        super();
+        this.state = {mouse: 'mouse'};
+      }
+      handleMoose() {
+        this.setState({mouse: 'moose'});
+      }
+      render() {
+        return <div>{this.state.mouse}</div>;
+      }
+    }
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Mouse />);
+    });
+
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['mouse'],
+    });
+
+    const mouse = renderer.getInstance();
+    await act(() => {
+      mouse.handleMoose();
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: ['moose'],
+      props: {},
+    });
+  });
+
+  it('updates types', async () => {
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<div>mouse</div>);
+    });
+
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['mouse'],
+    });
+    await act(() => {
+      renderer.update(<span>mice</span>);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'span',
+      props: {},
+      children: ['mice'],
+    });
+  });
+
+  it('updates children', async () => {
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <div>
+          <span key="a">A</span>
+          <span key="b">B</span>
+          <span key="c">C</span>
+        </div>,
+      );
+    });
+
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: [
+        {type: 'span', props: {}, children: ['A']},
+        {type: 'span', props: {}, children: ['B']},
+        {type: 'span', props: {}, children: ['C']},
+      ],
+    });
+
+    await act(() => {
+      renderer.update(
+        <div>
+          <span key="d">D</span>
+          <span key="c">C</span>
+          <span key="b">B</span>
+        </div>,
+      );
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: [
+        {type: 'span', props: {}, children: ['D']},
+        {type: 'span', props: {}, children: ['C']},
+        {type: 'span', props: {}, children: ['B']},
+      ],
+    });
+  });
+
+  it('does the full lifecycle', async () => {
+    const log = [];
+    class Log extends React.Component {
+      render() {
+        log.push('render ' + this.props.name);
+        return <div />;
+      }
+      componentDidMount() {
+        log.push('mount ' + this.props.name);
+      }
+      componentWillUnmount() {
+        log.push('unmount ' + this.props.name);
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Log key="foo" name="Foo" />);
+    });
+    await act(() => {
+      renderer.update(<Log key="bar" name="Bar" />);
+    });
+    await act(() => {
+      renderer.unmount();
+    });
+
+    expect(log).toEqual([
+      'render Foo',
+      'mount Foo',
+      'render Bar',
+      'unmount Foo',
+      'mount Bar',
+      'unmount Bar',
+    ]);
+  });
+
+  it('gives a ref to native components', async () => {
+    const log = [];
+    await act(() => {
+      ReactTestRenderer.create(<div ref={r => log.push(r)} />);
+    });
+    expect(log).toEqual([null]);
+  });
+
+  it('allows an optional createNodeMock function', async () => {
+    const mockDivInstance = {appendChild: () => {}};
+    const mockInputInstance = {focus: () => {}};
+    const mockListItemInstance = {click: () => {}};
+    const mockAnchorInstance = {hover: () => {}};
+    const log = [];
+    class Foo extends React.Component {
+      barRef = React.createRef();
+      componentDidMount() {
+        log.push(this.barRef.current);
+      }
+      render() {
+        return <a ref={this.barRef}>Hello, world</a>;
+      }
+    }
+    function createNodeMock(element) {
+      switch (element.type) {
+        case 'div':
+          return mockDivInstance;
+        case 'input':
+          return mockInputInstance;
+        case 'li':
+          return mockListItemInstance;
+        case 'a':
+          return mockAnchorInstance;
+        default:
+          return {};
+      }
+    }
+    await act(() => {
+      ReactTestRenderer.create(<div ref={r => log.push(r)} />, {
+        createNodeMock,
+      });
+    });
+    await act(() => {
+      ReactTestRenderer.create(<input ref={r => log.push(r)} />, {
+        createNodeMock,
+      });
+    });
+    await act(() => {
+      ReactTestRenderer.create(
+        <div>
+          <span>
+            <ul>
+              <li ref={r => log.push(r)} />
+            </ul>
+            <ul>
+              <li ref={r => log.push(r)} />
+              <li ref={r => log.push(r)} />
+            </ul>
+          </span>
+        </div>,
+        {createNodeMock, foobar: true},
+      );
+    });
+    await act(() => {
+      ReactTestRenderer.create(<Foo />, {createNodeMock});
+    });
+    await act(() => {
+      ReactTestRenderer.create(<div ref={r => log.push(r)} />);
+    });
+    await act(() => {
+      ReactTestRenderer.create(<div ref={r => log.push(r)} />, {});
+    });
+    expect(log).toEqual([
+      mockDivInstance,
+      mockInputInstance,
+      mockListItemInstance,
+      mockListItemInstance,
+      mockListItemInstance,
+      mockAnchorInstance,
+      null,
+      null,
+    ]);
+  });
+
+  it('supports unmounting when using refs', () => {
+    class Foo extends React.Component {
+      render() {
+        return <div ref={React.createRef()} />;
+      }
+    }
+    const inst = ReactTestRenderer.create(<Foo />, {
+      createNodeMock: () => 'foo',
+    });
+    expect(() => inst.unmount()).not.toThrow();
+  });
+
+  it('supports unmounting inner instances', async () => {
+    let count = 0;
+    class Foo extends React.Component {
+      componentWillUnmount() {
+        count++;
+      }
+      render() {
+        return <div />;
+      }
+    }
+    let inst;
+    await act(() => {
+      inst = ReactTestRenderer.create(
+        <div>
+          <Foo />
+        </div>,
+        {
+          createNodeMock: () => 'foo',
+        },
+      );
+    });
+    await act(() => {
+      inst.unmount();
+    });
+    expect(count).toEqual(1);
+  });
+
+  it('supports updates when using refs', async () => {
+    const log = [];
+    const createNodeMock = element => {
+      log.push(element.type);
+      return element.type;
+    };
+    class Foo extends React.Component {
+      render() {
+        return this.props.useDiv ? (
+          <div ref={React.createRef()} />
+        ) : (
+          <span ref={React.createRef()} />
+        );
+      }
+    }
+    let inst;
+    await act(() => {
+      inst = ReactTestRenderer.create(<Foo useDiv={true} />, {
+        createNodeMock,
+      });
+    });
+    await act(() => {
+      inst.update(<Foo useDiv={false} />);
+    });
+    expect(log).toEqual(['div', 'span']);
+  });
+
+  it('supports error boundaries', async () => {
+    const log = [];
+    class Angry extends React.Component {
+      render() {
+        log.push('Angry render');
+        throw new Error('Please, do not render me.');
+      }
+
+      componentDidMount() {
+        log.push('Angry componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('Angry componentWillUnmount');
+      }
+    }
+
+    class Boundary extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: false};
+      }
+      render() {
+        log.push('Boundary render');
+        if (!this.state.error) {
+          return (
+            <div>
+              <button onClick={this.onClick}>ClickMe</button>
+              <Angry />
+            </div>
+          );
+        } else {
+          return <div>Happy Birthday!</div>;
+        }
+      }
+      componentDidMount() {
+        log.push('Boundary componentDidMount');
+      }
+      componentWillUnmount() {
+        log.push('Boundary componentWillUnmount');
+      }
+      onClick() {
+        /* do nothing */
+      }
+      componentDidCatch() {
+        log.push('Boundary componentDidCatch');
+        this.setState({error: true});
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Boundary />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      props: {},
+      children: ['Happy Birthday!'],
+    });
+    expect(log).toEqual([
+      'Boundary render',
+      'Angry render',
+      'Boundary render',
+      'Angry render',
+      'Boundary componentDidMount',
+      'Boundary componentDidCatch',
+      'Boundary render',
+    ]);
+  });
+
+  it('can update text nodes', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Component>Hi</Component>);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: ['Hi'],
+      props: {},
+    });
+    await act(() => {
+      renderer.update(<Component>{['Hi', 'Bye']}</Component>);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: ['Hi', 'Bye'],
+      props: {},
+    });
+    await act(() => {
+      renderer.update(<Component>Bye</Component>);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: ['Bye'],
+      props: {},
+    });
+    await act(() => {
+      renderer.update(<Component>{42}</Component>);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: ['42'],
+      props: {},
+    });
+    await act(() => {
+      renderer.update(
+        <Component>
+          <div />
+        </Component>,
+      );
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: [
+        {
+          type: 'div',
+          children: null,
+          props: {},
+        },
+      ],
+      props: {},
+    });
+  });
+
+  it('toTree() renders simple components returning host components', async () => {
+    const Qoo = () => <span className="Qoo">Hello World!</span>;
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Qoo />);
+    });
+    const tree = renderer.toTree();
+
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        nodeType: 'component',
+        type: Qoo,
+        props: {},
+        instance: null,
+        rendered: {
+          nodeType: 'host',
+          type: 'span',
+          props: {className: 'Qoo'},
+          instance: null,
+          rendered: ['Hello World!'],
+        },
+      }),
+    );
+  });
+
+  it('toTree() handles nested Fragments', async () => {
+    const Foo = () => (
+      <>
+        <>foo</>
+      </>
+    );
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />);
+    });
+    const tree = renderer.toTree();
+
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        nodeType: 'component',
+        type: Foo,
+        instance: null,
+        props: {},
+        rendered: 'foo',
+      }),
+    );
+  });
+
+  it('toTree() handles null rendering components', async () => {
+    class Foo extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />);
+    });
+    const tree = renderer.toTree();
+
+    expect(tree.instance).toBeInstanceOf(Foo);
+
+    cleanNodeOrArray(tree);
+
+    expect(tree).toEqual({
+      type: Foo,
+      nodeType: 'component',
+      props: {},
+      instance: null,
+      rendered: null,
+    });
+  });
+
+  it('toTree() handles simple components that return arrays', async () => {
+    const Foo = ({children}) => children;
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <Foo>
+          <div>One</div>
+          <div>Two</div>
+        </Foo>,
+      );
+    });
+
+    const tree = renderer.toTree();
+
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        type: Foo,
+        nodeType: 'component',
+        props: {},
+        instance: null,
+        rendered: [
+          {
+            instance: null,
+            nodeType: 'host',
+            props: {},
+            rendered: ['One'],
+            type: 'div',
+          },
+          {
+            instance: null,
+            nodeType: 'host',
+            props: {},
+            rendered: ['Two'],
+            type: 'div',
+          },
+        ],
+      }),
+    );
+  });
+
+  it('toTree() handles complicated tree of arrays', async () => {
+    class Foo extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <div>
+          <Foo>
+            <div>One</div>
+            <div>Two</div>
+            <Foo>
+              <div>Three</div>
+            </Foo>
+          </Foo>
+          <div>Four</div>
+        </div>,
+      );
+    });
+
+    const tree = renderer.toTree();
+
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        type: 'div',
+        instance: null,
+        nodeType: 'host',
+        props: {},
+        rendered: [
+          {
+            type: Foo,
+            nodeType: 'component',
+            props: {},
+            instance: null,
+            rendered: [
+              {
+                type: 'div',
+                nodeType: 'host',
+                props: {},
+                instance: null,
+                rendered: ['One'],
+              },
+              {
+                type: 'div',
+                nodeType: 'host',
+                props: {},
+                instance: null,
+                rendered: ['Two'],
+              },
+              {
+                type: Foo,
+                nodeType: 'component',
+                props: {},
+                instance: null,
+                rendered: {
+                  type: 'div',
+                  nodeType: 'host',
+                  props: {},
+                  instance: null,
+                  rendered: ['Three'],
+                },
+              },
+            ],
+          },
+          {
+            type: 'div',
+            nodeType: 'host',
+            props: {},
+            instance: null,
+            rendered: ['Four'],
+          },
+        ],
+      }),
+    );
+  });
+
+  it('toTree() handles complicated tree of fragments', async () => {
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <>
+          <>
+            <div>One</div>
+            <div>Two</div>
+            <>
+              <div>Three</div>
+            </>
+          </>
+          <div>Four</div>
+        </>,
+      );
+    });
+
+    const tree = renderer.toTree();
+
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat([
+        {
+          type: 'div',
+          nodeType: 'host',
+          props: {},
+          instance: null,
+          rendered: ['One'],
+        },
+        {
+          type: 'div',
+          nodeType: 'host',
+          props: {},
+          instance: null,
+          rendered: ['Two'],
+        },
+        {
+          type: 'div',
+          nodeType: 'host',
+          props: {},
+          instance: null,
+          rendered: ['Three'],
+        },
+        {
+          type: 'div',
+          nodeType: 'host',
+          props: {},
+          instance: null,
+          rendered: ['Four'],
+        },
+      ]),
+    );
+  });
+
+  it('root instance and createNodeMock ref return the same value', async () => {
+    const createNodeMock = ref => ({node: ref});
+    let refInst = null;
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(
+        <div ref={ref => (refInst = ref)} />,
+        {createNodeMock},
+      );
+    });
+
+    const root = renderer.getInstance();
+    expect(root).toEqual(refInst);
+  });
+
+  it('toTree() renders complicated trees of composites and hosts', async () => {
+    // SFC returning host. no children props.
+    const Qoo = () => <span className="Qoo">Hello World!</span>;
+
+    // SFC returning host. passes through children.
+    const Foo = ({className, children}) => (
+      <div className={'Foo ' + className}>
+        <span className="Foo2">Literal</span>
+        {children}
+      </div>
+    );
+
+    // class composite returning composite. passes through children.
+    class Bar extends React.Component {
+      render() {
+        const {special, children} = this.props;
+        return <Foo className={special ? 'special' : 'normal'}>{children}</Foo>;
+      }
+    }
+
+    // class composite return composite. no children props.
+    class Bam extends React.Component {
+      render() {
+        return (
+          <Bar special={true}>
+            <Qoo />
+          </Bar>
+        );
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Bam />);
+    });
+
+    const tree = renderer.toTree();
+
+    // we test for the presence of instances before nulling them out
+    expect(tree.instance).toBeInstanceOf(Bam);
+    expect(tree.rendered.instance).toBeInstanceOf(Bar);
+
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        type: Bam,
+        nodeType: 'component',
+        props: {},
+        instance: null,
+        rendered: {
+          type: Bar,
+          nodeType: 'component',
+          props: {special: true},
+          instance: null,
+          rendered: {
+            type: Foo,
+            nodeType: 'component',
+            props: {className: 'special'},
+            instance: null,
+            rendered: {
+              type: 'div',
+              nodeType: 'host',
+              props: {className: 'Foo special'},
+              instance: null,
+              rendered: [
+                {
+                  type: 'span',
+                  nodeType: 'host',
+                  props: {className: 'Foo2'},
+                  instance: null,
+                  rendered: ['Literal'],
+                },
+                {
+                  type: Qoo,
+                  nodeType: 'component',
+                  props: {},
+                  instance: null,
+                  rendered: {
+                    type: 'span',
+                    nodeType: 'host',
+                    props: {className: 'Qoo'},
+                    instance: null,
+                    rendered: ['Hello World!'],
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }),
+    );
+  });
+
+  it('can update text nodes when rendered as root', async () => {
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(['Hello', 'world']);
+    });
+    expect(renderer.toJSON()).toEqual(['Hello', 'world']);
+    await act(() => {
+      renderer.update(42);
+    });
+    expect(renderer.toJSON()).toEqual('42');
+    await act(() => {
+      renderer.update([42, 'world']);
+    });
+    expect(renderer.toJSON()).toEqual(['42', 'world']);
+  });
+
+  it('can render and update root fragments', async () => {
+    const Component = props => props.children;
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create([
+        <Component key="a">Hi</Component>,
+        <Component key="b">Bye</Component>,
+      ]);
+    });
+
+    expect(renderer.toJSON()).toEqual(['Hi', 'Bye']);
+    await act(() => {
+      renderer.update(<div />);
+    });
+    expect(renderer.toJSON()).toEqual({
+      type: 'div',
+      children: null,
+      props: {},
+    });
+    await act(() => {
+      renderer.update([<div key="a">goodbye</div>, 'world']);
+    });
+    expect(renderer.toJSON()).toEqual([
+      {
+        type: 'div',
+        children: ['goodbye'],
+        props: {},
+      },
+      'world',
+    ]);
+  });
+
+  it('supports context providers and consumers', async () => {
+    const {Consumer, Provider} = React.createContext('a');
+
+    function Child(props) {
+      return props.value;
+    }
+
+    function App() {
+      return (
+        <Provider value="b">
+          <Consumer>{value => <Child value={value} />}</Consumer>
+        </Provider>
+      );
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<App />);
+    });
+    const child = renderer.root.findByType(Child);
+    expect(child.children).toEqual(['b']);
+    expect(prettyFormat(renderer.toTree())).toEqual(
+      prettyFormat({
+        instance: null,
+        nodeType: 'component',
+        props: {},
+        rendered: {
+          instance: null,
+          nodeType: 'component',
+          props: {
+            value: 'b',
+          },
+          rendered: 'b',
+          type: Child,
+        },
+        type: App,
+      }),
+    );
+  });
+
+  it('supports modes', async () => {
+    function Child(props) {
+      return props.value;
+    }
+
+    function App(props) {
+      return (
+        <React.StrictMode>
+          <Child value={props.value} />
+        </React.StrictMode>
+      );
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<App value="a" />);
+    });
+    const child = renderer.root.findByType(Child);
+    expect(child.children).toEqual(['a']);
+    expect(prettyFormat(renderer.toTree())).toEqual(
+      prettyFormat({
+        instance: null,
+        nodeType: 'component',
+        props: {
+          value: 'a',
+        },
+        rendered: {
+          instance: null,
+          nodeType: 'component',
+          props: {
+            value: 'a',
+          },
+          rendered: 'a',
+          type: Child,
+        },
+        type: App,
+      }),
+    );
+  });
+
+  it('supports forwardRef', async () => {
+    const InnerRefed = React.forwardRef((props, ref) => (
+      <div>
+        <span ref={ref} />
+      </div>
+    ));
+
+    let refFn;
+
+    class App extends React.Component {
+      render() {
+        refFn = inst => {
+          this.ref = inst;
+        };
+        return <InnerRefed ref={refFn} />;
+      }
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<App />);
+    });
+    const tree = renderer.toTree();
+    cleanNodeOrArray(tree);
+
+    expect(prettyFormat(tree)).toEqual(
+      prettyFormat({
+        instance: null,
+        nodeType: 'component',
+        props: {},
+        rendered: {
+          instance: null,
+          nodeType: 'host',
+          props: {},
+          rendered: [
+            {
+              instance: null,
+              nodeType: 'host',
+              props: {
+                ref: refFn,
+              },
+              rendered: [],
+              type: 'span',
+            },
+          ],
+          type: 'div',
+        },
+        type: App,
+      }),
+    );
+  });
+
+  it('can concurrently render context with a "primary" renderer', async () => {
+    const Context = React.createContext(null);
+    const Indirection = React.Fragment;
+    const App = () => (
+      <Context.Provider value={null}>
+        <Indirection>
+          <Context.Consumer>{() => null}</Context.Consumer>
+        </Indirection>
+      </Context.Provider>
+    );
+    ReactNoop.render(<App />);
+    await waitForAll([]);
+    await act(() => {
+      ReactTestRenderer.create(<App />);
+    });
+  });
+
+  it('calling findByType() with an invalid component will fall back to "Unknown" for component name', async () => {
+    const App = () => null;
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<App />);
+    });
+    const NonComponent = {};
+
+    expect(() => {
+      renderer.root.findByType(NonComponent);
+    }).toThrowError(`No instances found with node type: "Unknown"`);
+  });
+});
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
new file mode 100644
index 00000000000..0b08cde378c
--- /dev/null
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOM;
+let React;
+let ReactCache;
+let ReactTestRenderer;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactTestRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactDOM = require('react-dom');
+
+    // Isolate test renderer.
+    jest.resetModules();
+    React = require('react');
+    ReactCache = require('react-cache');
+    ReactTestRenderer = require('react-test-renderer');
+    const InternalTestUtils = require('internal-test-utils');
+    act = InternalTestUtils.act;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  it('should warn if used to render a ReactDOM portal', async () => {
+    const container = document.createElement('div');
+    let error;
+
+    await act(() => {
+      ReactTestRenderer.create(ReactDOM.createPortal('foo', container));
+    }).catch(e => (error = e));
+    assertConsoleErrorDev(
+      [
+        '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.',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+
+    // After the update throws, a subsequent render is scheduled to
+    // unmount the whole tree. This update also causes an error, so React
+    // throws an AggregateError.
+    const errors = error.errors;
+    expect(errors.length).toBe(2);
+    expect(errors[0].message.includes('indexOf is not a function')).toBe(true);
+    expect(errors[1].message.includes('indexOf is not a function')).toBe(true);
+  });
+
+  it('find element by prop with suspended content', async () => {
+    const neverResolve = new Promise(() => {});
+
+    function TestComp({foo}) {
+      if (foo === 'one') {
+        throw neverResolve;
+      } else {
+        return null;
+      }
+    }
+
+    const tree = await act(() =>
+      ReactTestRenderer.create(
+        <div>
+          <React.Suspense fallback={null}>
+            <TestComp foo="one" />
+          </React.Suspense>
+          <TestComp foo="two" />
+        </div>,
+      ),
+    );
+
+    expect(
+      tree.root.find(item => {
+        return item.props.foo === 'two';
+      }),
+    ).toBeDefined();
+  });
+
+  describe('timed out Suspense hidden subtrees should not be observable via toJSON', () => {
+    let AsyncText;
+    let PendingResources;
+    let TextResource;
+
+    beforeEach(() => {
+      PendingResources = {};
+      TextResource = ReactCache.unstable_createResource(
+        text =>
+          new Promise(resolve => {
+            PendingResources[text] = resolve;
+          }),
+        text => text,
+      );
+
+      AsyncText = ({text}) => {
+        const value = TextResource.read(text);
+        return value;
+      };
+    });
+
+    it('for root Suspense components', async () => {
+      const App = ({text}) => {
+        return (
+          <React.Suspense fallback="fallback">
+            <AsyncText text={text} />
+          </React.Suspense>
+        );
+      };
+
+      let root;
+      await act(() => {
+        root = ReactTestRenderer.create(<App text="initial" />);
+      });
+      await act(() => {
+        PendingResources.initial('initial');
+      });
+      expect(root.toJSON()).toEqual('initial');
+
+      await act(() => {
+        root.update(<App text="dynamic" />);
+      });
+      expect(root.toJSON()).toEqual('fallback');
+
+      await act(() => {
+        PendingResources.dynamic('dynamic');
+      });
+      expect(root.toJSON()).toEqual('dynamic');
+    });
+
+    it('for nested Suspense components', async () => {
+      const App = ({text}) => {
+        return (
+          <div>
+            <React.Suspense fallback="fallback">
+              <AsyncText text={text} />
+            </React.Suspense>
+          </div>
+        );
+      };
+
+      let root;
+      await act(() => {
+        root = ReactTestRenderer.create(<App text="initial" />);
+      });
+      await act(() => {
+        PendingResources.initial('initial');
+      });
+      expect(root.toJSON().children).toEqual(['initial']);
+
+      await act(() => {
+        root.update(<App text="dynamic" />);
+      });
+      expect(root.toJSON().children).toEqual(['fallback']);
+
+      await act(() => {
+        PendingResources.dynamic('dynamic');
+      });
+      expect(root.toJSON().children).toEqual(['dynamic']);
+    });
+  });
+});
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
new file mode 100644
index 00000000000..ef27de6d0fe
--- /dev/null
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
@@ -0,0 +1,117 @@
+jest.useRealTimers();
+
+let React;
+let ReactTestRenderer;
+let Scheduler;
+let act;
+let assertLog;
+
+describe('ReactTestRenderer.act()', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    Scheduler = require('scheduler');
+    act = ReactTestRenderer.act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+  });
+
+  // @gate __DEV__
+  it('can use .act() to flush effects', () => {
+    function App(props) {
+      const [ctr, setCtr] = React.useState(0);
+      React.useEffect(() => {
+        props.callback();
+        setCtr(1);
+      }, []);
+      return ctr;
+    }
+    const calledLog = [];
+    let root;
+    act(() => {
+      root = ReactTestRenderer.create(
+        <App
+          callback={() => {
+            calledLog.push(calledLog.length);
+          }}
+        />,
+      );
+    });
+
+    expect(calledLog).toEqual([0]);
+    expect(root.toJSON()).toEqual('1');
+  });
+
+  describe('async', () => {
+    // @gate __DEV__
+    it('should work with async/await', async () => {
+      function fetch(url) {
+        return Promise.resolve({
+          details: [1, 2, 3],
+        });
+      }
+      function App() {
+        const [details, setDetails] = React.useState(0);
+
+        React.useEffect(() => {
+          async function fetchDetails() {
+            const response = await fetch();
+            setDetails(response.details);
+          }
+          fetchDetails();
+        }, []);
+        return details;
+      }
+      let root;
+
+      await ReactTestRenderer.act(async () => {
+        root = ReactTestRenderer.create(<App />);
+      });
+
+      expect(root.toJSON()).toEqual(['1', '2', '3']);
+    });
+
+    // @gate __DEV__
+    it('should not flush effects without also flushing microtasks', async () => {
+      const {useEffect, useReducer} = React;
+
+      const alreadyResolvedPromise = Promise.resolve();
+
+      function App() {
+        // This component will keep updating itself until step === 3
+        const [step, proceed] = useReducer(s => (s === 3 ? 3 : s + 1), 1);
+        useEffect(() => {
+          Scheduler.log('Effect');
+          alreadyResolvedPromise.then(() => {
+            Scheduler.log('Microtask');
+            proceed();
+          });
+        });
+        return step;
+      }
+      let root;
+      await act(() => {
+        root = ReactTestRenderer.create(null);
+      });
+      await act(async () => {
+        root.update(<App />);
+      });
+      assertLog([
+        // Should not flush effects without also flushing microtasks
+        // First render:
+        'Effect',
+        'Microtask',
+        // Second render:
+        'Effect',
+        'Microtask',
+        // Final render:
+        'Effect',
+        'Microtask',
+      ]);
+      expect(root).toMatchRenderedOutput('3');
+    });
+  });
+});
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
new file mode 100644
index 00000000000..468f62d39a7
--- /dev/null
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactTestRenderer;
+let Scheduler;
+let waitForAll;
+let waitFor;
+
+describe('ReactTestRendererAsync', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+  });
+
+  it('flushAll flushes all work', async () => {
+    function Foo(props) {
+      return props.children;
+    }
+    const renderer = ReactTestRenderer.create(<Foo>Hi</Foo>, {
+      unstable_isConcurrent: true,
+    });
+
+    // Before flushing, nothing has mounted.
+    expect(renderer.toJSON()).toEqual(null);
+
+    // Flush initial mount.
+    await waitForAll([]);
+    expect(renderer.toJSON()).toEqual('Hi');
+
+    // Update
+    renderer.update(<Foo>Bye</Foo>);
+    // Not yet updated.
+    expect(renderer.toJSON()).toEqual('Hi');
+    // Flush update.
+    await waitForAll([]);
+    expect(renderer.toJSON()).toEqual('Bye');
+  });
+
+  it('flushAll returns array of yielded values', async () => {
+    function Child(props) {
+      Scheduler.log(props.children);
+      return props.children;
+    }
+    function Parent(props) {
+      return (
+        <>
+          <Child>{'A:' + props.step}</Child>
+          <Child>{'B:' + props.step}</Child>
+          <Child>{'C:' + props.step}</Child>
+        </>
+      );
+    }
+    const renderer = ReactTestRenderer.create(<Parent step={1} />, {
+      unstable_isConcurrent: true,
+    });
+
+    await waitForAll(['A:1', 'B:1', 'C:1']);
+    expect(renderer.toJSON()).toEqual(['A:1', 'B:1', 'C:1']);
+
+    renderer.update(<Parent step={2} />);
+    await waitForAll(['A:2', 'B:2', 'C:2']);
+    expect(renderer.toJSON()).toEqual(['A:2', 'B:2', 'C:2']);
+  });
+
+  it('flushThrough flushes until the expected values is yielded', async () => {
+    function Child(props) {
+      Scheduler.log(props.children);
+      return props.children;
+    }
+    function Parent(props) {
+      return (
+        <>
+          <Child>{'A:' + props.step}</Child>
+          <Child>{'B:' + props.step}</Child>
+          <Child>{'C:' + props.step}</Child>
+        </>
+      );
+    }
+
+    let renderer;
+    React.startTransition(() => {
+      renderer = ReactTestRenderer.create(<Parent step={1} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    // Flush the first two siblings
+    await waitFor(['A:1', 'B:1']);
+    // Did not commit yet.
+    expect(renderer.toJSON()).toEqual(null);
+
+    // Flush the remaining work
+    await waitForAll(['C:1']);
+    expect(renderer.toJSON()).toEqual(['A:1', 'B:1', 'C:1']);
+  });
+
+  it('supports high priority interruptions', async () => {
+    function Child(props) {
+      Scheduler.log(props.children);
+      return props.children;
+    }
+
+    class Example extends React.Component {
+      componentDidMount() {
+        expect(this.props.step).toEqual(2);
+      }
+      componentDidUpdate() {
+        throw Error('Unexpected update');
+      }
+      render() {
+        return (
+          <>
+            <Child>{'A:' + this.props.step}</Child>
+            <Child>{'B:' + this.props.step}</Child>
+          </>
+        );
+      }
+    }
+
+    let renderer;
+    React.startTransition(() => {
+      renderer = ReactTestRenderer.create(<Example step={1} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    // Flush the some of the changes, but don't commit
+    await waitFor(['A:1']);
+    expect(renderer.toJSON()).toEqual(null);
+
+    // Interrupt with higher priority properties
+    renderer.unstable_flushSync(() => {
+      renderer.update(<Example step={2} />);
+    });
+
+    // Only the higher priority properties have been committed
+    expect(renderer.toJSON()).toEqual(['A:2', 'B:2']);
+  });
+});
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
new file mode 100644
index 00000000000..b4f79d2c55f
--- /dev/null
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
@@ -0,0 +1,279 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+const React = require('react');
+let ReactTestRenderer;
+let Context;
+let act;
+
+const RCTView = 'RCTView';
+const View = props => <RCTView {...props} />;
+
+describe('ReactTestRendererTraversal', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactTestRenderer = require('react-test-renderer');
+    act = require('internal-test-utils').act;
+    Context = React.createContext(null);
+  });
+
+  class Example extends React.Component {
+    render() {
+      return (
+        <View>
+          <View foo="foo">
+            <View bar="bar" />
+            <View bar="bar" baz="baz" itself="itself" />
+            <View />
+            <ExampleSpread bar="bar" />
+            <ExampleFn bar="bar" bing="bing" />
+            <ExampleNull bar="bar" />
+            <ExampleNull null="null">
+              <View void="void" />
+              <View void="void" />
+            </ExampleNull>
+            <React.Profiler id="test" onRender={() => {}}>
+              <ExampleForwardRef qux="qux" />
+            </React.Profiler>
+            <>
+              <>
+                <Context.Provider value={null}>
+                  <Context.Consumer>
+                    {() => <View nested={true} />}
+                  </Context.Consumer>
+                </Context.Provider>
+              </>
+              <View nested={true} />
+              <View nested={true} />
+            </>
+          </View>
+        </View>
+      );
+    }
+  }
+  class ExampleSpread extends React.Component {
+    render = () => <View {...this.props} />;
+  }
+  const ExampleFn = props => <View baz="baz" />;
+  const ExampleNull = props => null;
+
+  const ExampleForwardRef = React.forwardRef((props, ref) => (
+    <View {...props} ref={ref} />
+  ));
+
+  it('initializes', async () => {
+    let render;
+    await act(() => {
+      render = ReactTestRenderer.create(<Example />);
+    });
+    const hasFooProp = node => node.props.hasOwnProperty('foo');
+
+    // assert .props, .type and .parent attributes
+    const foo = render.root.find(hasFooProp);
+    expect(foo.props.children).toHaveLength(9);
+    expect(foo.type).toBe(View);
+    expect(render.root.parent).toBe(null);
+    expect(foo.children[0].parent).toBe(foo);
+  });
+
+  it('searches via .find() / .findAll()', async () => {
+    let render;
+    await act(() => {
+      render = ReactTestRenderer.create(<Example />);
+    });
+
+    const hasFooProp = node => node.props.hasOwnProperty('foo');
+    const hasBarProp = node => node.props.hasOwnProperty('bar');
+    const hasBazProp = node => node.props.hasOwnProperty('baz');
+    const hasBingProp = node => node.props.hasOwnProperty('bing');
+    const hasNullProp = node => node.props.hasOwnProperty('null');
+    const hasVoidProp = node => node.props.hasOwnProperty('void');
+    const hasItselfProp = node => node.props.hasOwnProperty('itself');
+    const hasNestedProp = node => node.props.hasOwnProperty('nested');
+
+    expect(() => render.root.find(hasFooProp)).not.toThrow(); // 1 match
+    expect(() => render.root.find(hasBarProp)).toThrow(); // >1 matches
+    expect(() => render.root.find(hasBazProp)).toThrow(); // >1 matches
+    expect(() => render.root.find(hasBingProp)).not.toThrow(); // 1 match
+    expect(() => render.root.find(hasNullProp)).not.toThrow(); // 1 match
+    expect(() => render.root.find(hasVoidProp)).toThrow(); // 0 matches
+    expect(() => render.root.find(hasNestedProp)).toThrow(); // >1 matches
+
+    // same assertion as .find(), but confirm length
+    expect(render.root.findAll(hasFooProp, {deep: false})).toHaveLength(1);
+    expect(render.root.findAll(hasBarProp, {deep: false})).toHaveLength(5);
+    expect(render.root.findAll(hasBazProp, {deep: false})).toHaveLength(2);
+    expect(render.root.findAll(hasBingProp, {deep: false})).toHaveLength(1);
+    expect(render.root.findAll(hasNullProp, {deep: false})).toHaveLength(1);
+    expect(render.root.findAll(hasVoidProp, {deep: false})).toHaveLength(0);
+    expect(render.root.findAll(hasNestedProp, {deep: false})).toHaveLength(3);
+
+    // note: with {deep: true}, .findAll() will continue to
+    //       search children, even after finding a match
+    expect(render.root.findAll(hasFooProp)).toHaveLength(2);
+    expect(render.root.findAll(hasBarProp)).toHaveLength(9);
+    expect(render.root.findAll(hasBazProp)).toHaveLength(4);
+    expect(render.root.findAll(hasBingProp)).toHaveLength(1); // no spread
+    expect(render.root.findAll(hasNullProp)).toHaveLength(1); // no spread
+    expect(render.root.findAll(hasVoidProp)).toHaveLength(0);
+    expect(render.root.findAll(hasNestedProp, {deep: false})).toHaveLength(3);
+
+    const bing = render.root.find(hasBingProp);
+    expect(bing.find(hasBarProp)).toBe(bing);
+    expect(bing.find(hasBingProp)).toBe(bing);
+    expect(bing.findAll(hasBazProp, {deep: false})).toHaveLength(1);
+    expect(bing.findAll(hasBazProp)).toHaveLength(2);
+
+    const foo = render.root.find(hasFooProp);
+    expect(foo.findAll(hasFooProp, {deep: false})).toHaveLength(1);
+    expect(foo.findAll(hasFooProp)).toHaveLength(2);
+
+    const itself = foo.find(hasItselfProp);
+    expect(itself.find(hasBarProp)).toBe(itself);
+    expect(itself.find(hasBazProp)).toBe(itself);
+    expect(itself.findAll(hasBazProp, {deep: false})).toHaveLength(1);
+    expect(itself.findAll(hasBazProp)).toHaveLength(2);
+  });
+
+  it('searches via .findByType() / .findAllByType()', async () => {
+    let render;
+    await act(() => {
+      render = ReactTestRenderer.create(<Example />);
+    });
+
+    expect(() => render.root.findByType(ExampleFn)).not.toThrow(); // 1 match
+    expect(() => render.root.findByType(View)).not.toThrow(); // 1 match
+    expect(() => render.root.findByType(ExampleForwardRef)).not.toThrow(); // 1 match
+    // note: there are clearly multiple <View /> in general, but there
+    //       is only one being rendered at root node level
+    expect(() => render.root.findByType(ExampleNull)).toThrow(); // 2 matches
+
+    expect(render.root.findAllByType(ExampleFn)).toHaveLength(1);
+    expect(render.root.findAllByType(View, {deep: false})).toHaveLength(1);
+    expect(render.root.findAllByType(View)).toHaveLength(11);
+    expect(render.root.findAllByType(ExampleNull)).toHaveLength(2);
+    expect(render.root.findAllByType(ExampleForwardRef)).toHaveLength(1);
+
+    const nulls = render.root.findAllByType(ExampleNull);
+    expect(nulls[0].findAllByType(View)).toHaveLength(0);
+    expect(nulls[1].findAllByType(View)).toHaveLength(0);
+
+    const fn = render.root.findAllByType(ExampleFn);
+    expect(fn[0].findAllByType(View)).toHaveLength(1);
+  });
+
+  it('searches via .findByProps() / .findAllByProps()', async () => {
+    let render;
+    await act(() => {
+      render = ReactTestRenderer.create(<Example />);
+    });
+    const foo = 'foo';
+    const bar = 'bar';
+    const baz = 'baz';
+    const qux = 'qux';
+
+    expect(() => render.root.findByProps({foo})).not.toThrow(); // 1 match
+    expect(() => render.root.findByProps({bar})).toThrow(); // >1 matches
+    expect(() => render.root.findByProps({baz})).toThrow(); // >1 matches
+    expect(() => render.root.findByProps({qux})).not.toThrow(); // 1 match
+
+    expect(render.root.findAllByProps({foo}, {deep: false})).toHaveLength(1);
+    expect(render.root.findAllByProps({bar}, {deep: false})).toHaveLength(5);
+    expect(render.root.findAllByProps({baz}, {deep: false})).toHaveLength(2);
+    expect(render.root.findAllByProps({qux}, {deep: false})).toHaveLength(1);
+
+    expect(render.root.findAllByProps({foo})).toHaveLength(2);
+    expect(render.root.findAllByProps({bar})).toHaveLength(9);
+    expect(render.root.findAllByProps({baz})).toHaveLength(4);
+    expect(render.root.findAllByProps({qux})).toHaveLength(3);
+  });
+
+  it('skips special nodes', async () => {
+    let render;
+    await act(() => {
+      render = ReactTestRenderer.create(<Example />);
+    });
+    expect(render.root.findAllByType(React.Fragment)).toHaveLength(0);
+    expect(render.root.findAllByType(Context.Consumer)).toHaveLength(0);
+    expect(render.root.findAllByType(Context.Provider)).toHaveLength(0);
+
+    const expectedParent = render.root.findByProps({foo: 'foo'}, {deep: false})
+      .children[0];
+    const nestedViews = render.root.findAllByProps(
+      {nested: true},
+      {deep: false},
+    );
+    expect(nestedViews.length).toBe(3);
+    expect(nestedViews[0].parent).toBe(expectedParent);
+    expect(nestedViews[1].parent).toBe(expectedParent);
+    expect(nestedViews[2].parent).toBe(expectedParent);
+  });
+
+  it('can have special nodes as roots', async () => {
+    const FR = React.forwardRef((props, ref) => <section {...props} />);
+
+    let render1;
+    await act(() => {
+      render1 = ReactTestRenderer.create(
+        <FR>
+          <div />
+          <div />
+        </FR>,
+      );
+    });
+    expect(render1.root.findAllByType('div').length).toBe(2);
+
+    let render2;
+    await act(() => {
+      render2 = ReactTestRenderer.create(
+        <>
+          <div />
+          <div />
+        </>,
+      );
+    });
+    expect(render2.root.findAllByType('div').length).toBe(2);
+
+    let render3;
+    await act(() => {
+      render3 = ReactTestRenderer.create(
+        <React.Fragment key="foo">
+          <div />
+          <div />
+        </React.Fragment>,
+      );
+    });
+    expect(render3.root.findAllByType('div').length).toBe(2);
+
+    let render4;
+    await act(() => {
+      render4 = ReactTestRenderer.create(
+        <React.StrictMode>
+          <div />
+          <div />
+        </React.StrictMode>,
+      );
+    });
+    expect(render4.root.findAllByType('div').length).toBe(2);
+
+    let render5;
+    await act(() => {
+      render5 = ReactTestRenderer.create(
+        <Context.Provider value={null}>
+          <div />
+          <div />
+        </Context.Provider>,
+      );
+    });
+    expect(render5.root.findAllByType('div').length).toBe(2);
+  });
+});
diff --git a/packages/react/README.md b/packages/react/README.md
new file mode 100644
index 00000000000..20a855efd3c
--- /dev/null
+++ b/packages/react/README.md
@@ -0,0 +1,37 @@
+# `react`
+
+React is a JavaScript library for creating user interfaces.
+
+The `react` package contains only the functionality necessary to define React components. It is typically used together with a React renderer like `react-dom` for the web, or `react-native` for the native environments.
+
+**Note:** by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. Don't forget to use the [production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build) when deploying your application.
+
+## Usage
+
+```js
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <h1>{count}</h1>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </>
+  );
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<Counter />);
+```
+
+## Documentation
+
+See https://react.dev/
+
+## API
+
+See https://react.dev/reference/react
diff --git a/packages/react/compiler-runtime.js b/packages/react/compiler-runtime.js
new file mode 100644
index 00000000000..6d82bd38538
--- /dev/null
+++ b/packages/react/compiler-runtime.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactCompilerRuntime';
diff --git a/packages/react/index.development.js b/packages/react/index.development.js
new file mode 100644
index 00000000000..ed4a5a325d9
--- /dev/null
+++ b/packages/react/index.development.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
+export type ElementType = React$ElementType;
+export type Element<+C> = React$Element<C>;
+export type Key = React$Key;
+export type Node = React$Node;
+export type Context<T> = React$Context<T>;
+export type Portal = React$Portal;
+export type ElementProps<C> = React$ElementProps<C>;
+export type ElementConfig<C> = React$ElementConfig<C>;
+export type ElementRef<C> = React$ElementRef<C>;
+export type ChildrenArray<+T> = $ReadOnlyArray<ChildrenArray<T>> | T;
+
+// Export all exports so that they're available in tests.
+// We can't use export * from in Flow for some reason.
+export {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  startTransition,
+  unstable_LegacyHidden,
+  Activity,
+  ViewTransition,
+  addTransitionType,
+  unstable_Scope,
+  unstable_SuspenseList,
+  unstable_TracingMarker,
+  unstable_getCacheForType,
+  unstable_useCacheRefresh,
+  useId,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useSyncExternalStore,
+  useReducer,
+  useRef,
+  useState,
+  useTransition,
+  useActionState,
+  version,
+  act, // DEV-only
+  captureOwnerStack, // DEV-only
+} from './src/ReactClient';
diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js
new file mode 100644
index 00000000000..8ff2e1d257f
--- /dev/null
+++ b/packages/react/index.experimental.development.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  startTransition,
+  optimisticKey,
+  Activity,
+  unstable_getCacheForType,
+  unstable_SuspenseList,
+  ViewTransition,
+  unstable_startGestureTransition,
+  addTransitionType,
+  unstable_useCacheRefresh,
+  useId,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  useActionState,
+  version,
+  act, // DEV-only
+  captureOwnerStack, // DEV-only
+} from './src/ReactClient';
+
+import {useOptimistic} from './src/ReactClient';
+
+export function experimental_useOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  if (__DEV__) {
+    console.error(
+      'useOptimistic is now in canary. Remove the experimental_ prefix. ' +
+        'The prefixed alias will be removed in an upcoming release.',
+    );
+  }
+  return useOptimistic(passthrough, reducer);
+}
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
new file mode 100644
index 00000000000..881a71b2501
--- /dev/null
+++ b/packages/react/index.experimental.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  startTransition,
+  optimisticKey,
+  Activity,
+  Activity as unstable_Activity,
+  unstable_getCacheForType,
+  unstable_SuspenseList,
+  ViewTransition,
+  unstable_startGestureTransition,
+  addTransitionType,
+  unstable_useCacheRefresh,
+  useId,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  useActionState,
+  version,
+} from './src/ReactClient';
+
+import {useOptimistic} from './src/ReactClient';
+
+export function experimental_useOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  if (__DEV__) {
+    console.error(
+      'useOptimistic is now in canary. Remove the experimental_ prefix. ' +
+        'The prefixed alias will be removed in an upcoming release.',
+    );
+  }
+  return useOptimistic(passthrough, reducer);
+}
diff --git a/packages/react/index.fb.js b/packages/react/index.fb.js
new file mode 100644
index 00000000000..d61af001a53
--- /dev/null
+++ b/packages/react/index.fb.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {captureOwnerStack as captureOwnerStackImpl} from './src/ReactClient';
+
+export {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  act,
+  cache,
+  cacheSignal,
+  Children,
+  cloneElement,
+  Component,
+  createContext,
+  createElement,
+  createRef,
+  useEffectEvent as experimental_useEffectEvent,
+  useEffectEvent,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  lazy,
+  memo,
+  Profiler,
+  PureComponent,
+  startTransition,
+  StrictMode,
+  Suspense,
+  Activity,
+  Activity as unstable_Activity,
+  unstable_getCacheForType,
+  unstable_LegacyHidden,
+  unstable_Scope,
+  unstable_SuspenseList,
+  ViewTransition,
+  ViewTransition as unstable_ViewTransition,
+  unstable_TracingMarker,
+  addTransitionType,
+  addTransitionType as unstable_addTransitionType,
+  unstable_useCacheRefresh,
+  use,
+  useActionState,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  version,
+} from './src/ReactClient';
+
+export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
+
+// export for backwards compatibility during upgrade
+export {useMemoCache as unstable_useMemoCache} from './src/ReactHooks';
+
+// export to match the name of the OSS function typically exported from
+// react/compiler-runtime
+export {useMemoCache as c} from './src/ReactHooks';
+
+// Only export captureOwnerStack in development.
+let captureOwnerStack: ?() => null | string;
+if (__DEV__) {
+  captureOwnerStack = captureOwnerStackImpl;
+}
+
+export {captureOwnerStack};
diff --git a/packages/react/index.js b/packages/react/index.js
new file mode 100644
index 00000000000..78b11b809e7
--- /dev/null
+++ b/packages/react/index.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
+export type ElementType = React$ElementType;
+export type Element<+C> = React$Element<C>;
+export type MixedElement = React$Element<ElementType>;
+export type Key = React$Key;
+export type Node = React$Node;
+export type Context<T> = React$Context<T>;
+export type Portal = React$Portal;
+export type RefSetter<-I> = React$RefSetter<I>;
+export type ElementProps<C> = React$ElementProps<C>;
+export type ElementConfig<C> = React$ElementConfig<C>;
+export type ElementRef<C> = React$ElementRef<C>;
+export type ChildrenArray<+T> = $ReadOnlyArray<ChildrenArray<T>> | T;
+
+export {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  startTransition,
+  unstable_LegacyHidden,
+  Activity,
+  unstable_Scope,
+  unstable_SuspenseList,
+  unstable_TracingMarker,
+  ViewTransition,
+  addTransitionType,
+  unstable_getCacheForType,
+  unstable_useCacheRefresh,
+  useId,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useSyncExternalStore,
+  useReducer,
+  useRef,
+  useState,
+  useTransition,
+  useActionState,
+  version,
+} from './src/ReactClient';
diff --git a/packages/react/index.stable.development.js b/packages/react/index.stable.development.js
new file mode 100644
index 00000000000..5fd89390bca
--- /dev/null
+++ b/packages/react/index.stable.development.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  Activity,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  ViewTransition,
+  addTransitionType,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  unstable_useCacheRefresh,
+  startTransition,
+  useId,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useOptimistic,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  useActionState,
+  version,
+  act, // DEV-only
+  captureOwnerStack, // DEV-only
+} from './src/ReactClient';
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
new file mode 100644
index 00000000000..830a4e9bb5d
--- /dev/null
+++ b/packages/react/index.stable.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  __COMPILER_RUNTIME,
+  Activity,
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  ViewTransition,
+  addTransitionType,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  unstable_useCacheRefresh,
+  startTransition,
+  useId,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useOptimistic,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  useActionState,
+  version,
+} from './src/ReactClient';
diff --git a/packages/react/jsx-dev-runtime.js b/packages/react/jsx-dev-runtime.js
new file mode 100644
index 00000000000..b3d0a5c90f8
--- /dev/null
+++ b/packages/react/jsx-dev-runtime.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Fragment, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/jsx-dev-runtime.react-server.js b/packages/react/jsx-dev-runtime.react-server.js
new file mode 100644
index 00000000000..0ba4fcb82a6
--- /dev/null
+++ b/packages/react/jsx-dev-runtime.react-server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Fragment, jsxDEV} from './src/jsx/ReactJSXServer';
diff --git a/packages/react/jsx-runtime.js b/packages/react/jsx-runtime.js
new file mode 100644
index 00000000000..b9189d351e9
--- /dev/null
+++ b/packages/react/jsx-runtime.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Fragment, jsx, jsxs} from './src/jsx/ReactJSX';
diff --git a/packages/react/jsx-runtime.react-server.js b/packages/react/jsx-runtime.react-server.js
new file mode 100644
index 00000000000..fa48a68d3e0
--- /dev/null
+++ b/packages/react/jsx-runtime.react-server.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Fragment, jsx, jsxs} from './src/jsx/ReactJSXServer';
diff --git a/packages/react/npm/compiler-runtime.js b/packages/react/npm/compiler-runtime.js
new file mode 100644
index 00000000000..ab6aabb0a98
--- /dev/null
+++ b/packages/react/npm/compiler-runtime.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-compiler-runtime.production.js');
+} else {
+  module.exports = require('./cjs/react-compiler-runtime.development.js');
+}
diff --git a/packages/react/npm/index.js b/packages/react/npm/index.js
new file mode 100644
index 00000000000..d830d7a2f9f
--- /dev/null
+++ b/packages/react/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.production.js');
+} else {
+  module.exports = require('./cjs/react.development.js');
+}
diff --git a/packages/react/npm/jsx-dev-runtime.js b/packages/react/npm/jsx-dev-runtime.js
new file mode 100644
index 00000000000..0a80857d2d6
--- /dev/null
+++ b/packages/react/npm/jsx-dev-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}
diff --git a/packages/react/npm/jsx-dev-runtime.react-server.js b/packages/react/npm/jsx-dev-runtime.react-server.js
new file mode 100644
index 00000000000..d11e6e82d06
--- /dev/null
+++ b/packages/react/npm/jsx-dev-runtime.react-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.react-server.production.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.react-server.development.js');
+}
diff --git a/packages/react/npm/jsx-runtime.js b/packages/react/npm/jsx-runtime.js
new file mode 100644
index 00000000000..8679b72159b
--- /dev/null
+++ b/packages/react/npm/jsx-runtime.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}
diff --git a/packages/react/npm/jsx-runtime.react-server.js b/packages/react/npm/jsx-runtime.react-server.js
new file mode 100644
index 00000000000..2d23c8c3442
--- /dev/null
+++ b/packages/react/npm/jsx-runtime.react-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.react-server.production.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.react-server.development.js');
+}
diff --git a/packages/react/npm/react.react-server.js b/packages/react/npm/react.react-server.js
new file mode 100644
index 00000000000..c66e3b76365
--- /dev/null
+++ b/packages/react/npm/react.react-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.react-server.production.js');
+} else {
+  module.exports = require('./cjs/react.react-server.development.js');
+}
diff --git a/packages/react/npm/unstable-cache.js b/packages/react/npm/unstable-cache.js
new file mode 100644
index 00000000000..9e0d773ebad
--- /dev/null
+++ b/packages/react/npm/unstable-cache.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-unstable-cache.production.js');
+} else {
+  module.exports = require('./cjs/react-unstable-cache.development.js');
+}
diff --git a/packages/react/package.json b/packages/react/package.json
new file mode 100644
index 00000000000..0705be8aa06
--- /dev/null
+++ b/packages/react/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "react",
+  "description": "React is a JavaScript library for building user interfaces.",
+  "keywords": [
+    "react"
+  ],
+  "version": "19.3.0",
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/",
+    "compiler-runtime.js",
+    "jsx-runtime.js",
+    "jsx-runtime.react-server.js",
+    "jsx-dev-runtime.js",
+    "jsx-dev-runtime.react-server.js",
+    "react.react-server.js"
+  ],
+  "main": "index.js",
+  "exports": {
+    ".": {
+      "react-server": "./react.react-server.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json",
+    "./jsx-runtime": {
+      "react-server": "./jsx-runtime.react-server.js",
+      "default": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "react-server": "./jsx-dev-runtime.react-server.js",
+      "default": "./jsx-dev-runtime.js"
+    },
+    "./compiler-runtime": {
+      "react-server": "./compiler-runtime.js",
+      "default": "./compiler-runtime.js"
+    },
+    "./src/*": "./src/*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  }
+}
diff --git a/packages/react/react.react-server.js b/packages/react/react.react-server.js
new file mode 100644
index 00000000000..54ab1834fd9
--- /dev/null
+++ b/packages/react/react.react-server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 './src/ReactServer';
diff --git a/packages/react/src/BadMapPolyfill.js b/packages/react/src/BadMapPolyfill.js
new file mode 100644
index 00000000000..89553e3b215
--- /dev/null
+++ b/packages/react/src/BadMapPolyfill.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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: boolean;
+
+if (__DEV__) {
+  hasBadMapPolyfill = false;
+  try {
+    const frozenObject = Object.freeze({});
+    /* eslint-disable no-new */
+    new Map([[frozenObject, null]]);
+    new Set([frozenObject]);
+    /* eslint-enable no-new */
+  } catch (e) {
+    // TODO: Consider warning about bad polyfills
+    hasBadMapPolyfill = true;
+  }
+}
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
new file mode 100644
index 00000000000..c4c8a98d531
--- /dev/null
+++ b/packages/react/src/ReactAct.js
@@ -0,0 +1,366 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Thenable} from 'shared/ReactTypes';
+import type {RendererTask} from './ReactSharedInternalsClient';
+import ReactSharedInternals from './ReactSharedInternalsClient';
+import queueMacrotask from 'shared/enqueueTask';
+
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
+
+// `act` calls can be nested, so we track the depth. This represents the
+// number of `act` scopes on the stack.
+let actScopeDepth = 0;
+
+// We only warn the first time you neglect to await an async `act` scope.
+let didWarnNoAwaitAct = false;
+
+function aggregateErrors(errors: Array<mixed>): mixed {
+  if (errors.length > 1 && typeof AggregateError === 'function') {
+    // eslint-disable-next-line no-undef
+    return new AggregateError(errors);
+  }
+  return errors[0];
+}
+
+export function act<T>(callback: () => T | Thenable<T>): Thenable<T> {
+  if (__DEV__) {
+    // When ReactSharedInternals.actQueue is not null, it signals to React that
+    // we're currently inside an `act` scope. React will push all its tasks to
+    // this queue instead of scheduling them with platform APIs.
+    //
+    // We set this to an empty array when we first enter an `act` scope, and
+    // only unset it once we've left the outermost `act` scope — remember that
+    // `act` calls can be nested.
+    //
+    // If we're already inside an `act` scope, reuse the existing queue.
+    const prevIsBatchingLegacy = !disableLegacyMode
+      ? ReactSharedInternals.isBatchingLegacy
+      : false;
+    const prevActQueue = ReactSharedInternals.actQueue;
+    const prevActScopeDepth = actScopeDepth;
+    actScopeDepth++;
+    const queue = (ReactSharedInternals.actQueue =
+      prevActQueue !== null ? prevActQueue : []);
+    // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only
+    // set to `true` while the given callback is executed, not for updates
+    // triggered during an async event, because this is how the legacy
+    // implementation of `act` behaved.
+    if (!disableLegacyMode) {
+      ReactSharedInternals.isBatchingLegacy = true;
+    }
+
+    let result;
+    // This tracks whether the `act` call is awaited. In certain cases, not
+    // awaiting it is a mistake, so we will detect that and warn.
+    let didAwaitActCall = false;
+    try {
+      // Reset this to `false` right before entering the React work loop. The
+      // only place we ever read this fields is just below, right after running
+      // the callback. So we don't need to reset after the callback runs.
+      if (!disableLegacyMode) {
+        ReactSharedInternals.didScheduleLegacyUpdate = false;
+      }
+      result = callback();
+      const didScheduleLegacyUpdate = !disableLegacyMode
+        ? ReactSharedInternals.didScheduleLegacyUpdate
+        : false;
+
+      // Replicate behavior of original `act` implementation in legacy mode,
+      // which flushed updates immediately after the scope function exits, even
+      // if it's an async function.
+      if (!prevIsBatchingLegacy && didScheduleLegacyUpdate) {
+        flushActQueue(queue);
+      }
+      // `isBatchingLegacy` gets reset using the regular stack, not the async
+      // one used to track `act` scopes. Why, you may be wondering? Because
+      // that's how it worked before version 18. Yes, it's confusing! We should
+      // delete legacy mode!!
+      if (!disableLegacyMode) {
+        ReactSharedInternals.isBatchingLegacy = prevIsBatchingLegacy;
+      }
+    } catch (error) {
+      // `isBatchingLegacy` gets reset using the regular stack, not the async
+      // one used to track `act` scopes. Why, you may be wondering? Because
+      // that's how it worked before version 18. Yes, it's confusing! We should
+      // delete legacy mode!!
+      ReactSharedInternals.thrownErrors.push(error);
+    }
+    if (ReactSharedInternals.thrownErrors.length > 0) {
+      if (!disableLegacyMode) {
+        ReactSharedInternals.isBatchingLegacy = prevIsBatchingLegacy;
+      }
+      popActScope(prevActQueue, prevActScopeDepth);
+      const thrownError = aggregateErrors(ReactSharedInternals.thrownErrors);
+      ReactSharedInternals.thrownErrors.length = 0;
+      throw thrownError;
+    }
+
+    if (
+      result !== null &&
+      typeof result === 'object' &&
+      // $FlowFixMe[method-unbinding]
+      typeof result.then === 'function'
+    ) {
+      // A promise/thenable was returned from the callback. Wait for it to
+      // resolve before flushing the queue.
+      //
+      // If `act` were implemented as an async function, this whole block could
+      // be a single `await` call. That's really the only difference between
+      // this branch and the next one.
+      const thenable = ((result: any): Thenable<T>);
+
+      // Warn if the an `act` call with an async scope is not awaited. In a
+      // future release, consider making this an error.
+      queueSeveralMicrotasks(() => {
+        if (!didAwaitActCall && !didWarnNoAwaitAct) {
+          didWarnNoAwaitAct = true;
+          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 () => ...);',
+          );
+        }
+      });
+
+      return {
+        then(resolve: T => mixed, reject: mixed => mixed) {
+          didAwaitActCall = true;
+          thenable.then(
+            returnValue => {
+              popActScope(prevActQueue, prevActScopeDepth);
+              if (prevActScopeDepth === 0) {
+                // We're exiting the outermost `act` scope. Flush the queue.
+                try {
+                  flushActQueue(queue);
+                  queueMacrotask(() =>
+                    // Recursively flush tasks scheduled by a microtask.
+                    recursivelyFlushAsyncActWork(returnValue, resolve, reject),
+                  );
+                } catch (error) {
+                  // `thenable` might not be a real promise, and `flushActQueue`
+                  // might throw, so we need to wrap `flushActQueue` in a
+                  // try/catch.
+                  ReactSharedInternals.thrownErrors.push(error);
+                }
+                if (ReactSharedInternals.thrownErrors.length > 0) {
+                  const thrownError = aggregateErrors(
+                    ReactSharedInternals.thrownErrors,
+                  );
+                  ReactSharedInternals.thrownErrors.length = 0;
+                  reject(thrownError);
+                }
+              } else {
+                resolve(returnValue);
+              }
+            },
+            error => {
+              popActScope(prevActQueue, prevActScopeDepth);
+              if (ReactSharedInternals.thrownErrors.length > 0) {
+                const thrownError = aggregateErrors(
+                  ReactSharedInternals.thrownErrors,
+                );
+                ReactSharedInternals.thrownErrors.length = 0;
+                reject(thrownError);
+              } else {
+                reject(error);
+              }
+            },
+          );
+        },
+      };
+    } else {
+      const returnValue: T = (result: any);
+      // The callback is not an async function. Exit the current
+      // scope immediately.
+      popActScope(prevActQueue, prevActScopeDepth);
+      if (prevActScopeDepth === 0) {
+        // We're exiting the outermost `act` scope. Flush the queue.
+        flushActQueue(queue);
+
+        // If the queue is not empty, it implies that we intentionally yielded
+        // to the main thread, because something suspended. We will continue
+        // in an asynchronous task.
+        //
+        // Warn if something suspends but the `act` call is not awaited.
+        // In a future release, consider making this an error.
+        if (queue.length !== 0) {
+          queueSeveralMicrotasks(() => {
+            if (!didAwaitActCall && !didWarnNoAwaitAct) {
+              didWarnNoAwaitAct = true;
+              console.error(
+                'A component suspended inside an `act` scope, but the ' +
+                  '`act` call was not awaited. When testing React ' +
+                  'components that depend on asynchronous data, you must ' +
+                  'await the result:\n\n' +
+                  'await act(() => ...)',
+              );
+            }
+          });
+        }
+
+        // Like many things in this module, this is next part is confusing.
+        //
+        // We do not currently require every `act` call that is passed a
+        // callback to be awaited, through arguably we should. Since this
+        // callback was synchronous, we need to exit the current scope before
+        // returning.
+        //
+        // However, if thenable we're about to return *is* awaited, we'll
+        // immediately restore the current scope. So it shouldn't observable.
+        //
+        // This doesn't affect the case where the scope callback is async,
+        // because we always require those calls to be awaited.
+        //
+        // TODO: In a future version, consider always requiring all `act` calls
+        // to be awaited, regardless of whether the callback is sync or async.
+        ReactSharedInternals.actQueue = null;
+      }
+
+      if (ReactSharedInternals.thrownErrors.length > 0) {
+        const thrownError = aggregateErrors(ReactSharedInternals.thrownErrors);
+        ReactSharedInternals.thrownErrors.length = 0;
+        throw thrownError;
+      }
+
+      return {
+        then(resolve: T => mixed, reject: mixed => mixed) {
+          didAwaitActCall = true;
+          if (prevActScopeDepth === 0) {
+            // If the `act` call is awaited, restore the queue we were
+            // using before (see long comment above) so we can flush it.
+            ReactSharedInternals.actQueue = queue;
+            queueMacrotask(() =>
+              // Recursively flush tasks scheduled by a microtask.
+              recursivelyFlushAsyncActWork(returnValue, resolve, reject),
+            );
+          } else {
+            resolve(returnValue);
+          }
+        },
+      };
+    }
+  } else {
+    throw new Error('act(...) is not supported in production builds of React.');
+  }
+}
+
+function popActScope(
+  prevActQueue: null | Array<RendererTask>,
+  prevActScopeDepth: number,
+) {
+  if (__DEV__) {
+    if (prevActScopeDepth !== actScopeDepth - 1) {
+      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. ',
+      );
+    }
+    actScopeDepth = prevActScopeDepth;
+  }
+}
+
+function recursivelyFlushAsyncActWork<T>(
+  returnValue: T,
+  resolve: T => mixed,
+  reject: mixed => mixed,
+) {
+  if (__DEV__) {
+    // Check if any tasks were scheduled asynchronously.
+    const queue = ReactSharedInternals.actQueue;
+    if (queue !== null) {
+      if (queue.length !== 0) {
+        // Async tasks were scheduled, mostly likely in a microtask.
+        // Keep flushing until there are no more.
+        try {
+          flushActQueue(queue);
+          // The work we just performed may have schedule additional async
+          // tasks. Wait a macrotask and check again.
+          queueMacrotask(() =>
+            recursivelyFlushAsyncActWork(returnValue, resolve, reject),
+          );
+          return;
+        } catch (error) {
+          // Leave remaining tasks on the queue if something throws.
+          ReactSharedInternals.thrownErrors.push(error);
+        }
+      } else {
+        // The queue is empty. We can finish.
+        ReactSharedInternals.actQueue = null;
+      }
+    }
+    if (ReactSharedInternals.thrownErrors.length > 0) {
+      const thrownError = aggregateErrors(ReactSharedInternals.thrownErrors);
+      ReactSharedInternals.thrownErrors.length = 0;
+      reject(thrownError);
+    } else {
+      resolve(returnValue);
+    }
+  }
+}
+
+let isFlushing = false;
+function flushActQueue(queue: Array<RendererTask>) {
+  if (__DEV__) {
+    if (!isFlushing) {
+      // Prevent re-entrance.
+      isFlushing = true;
+      let i = 0;
+      try {
+        for (; i < queue.length; i++) {
+          let callback: RendererTask = queue[i];
+          do {
+            ReactSharedInternals.didUsePromise = false;
+            const continuation = callback(false);
+            if (continuation !== null) {
+              if (ReactSharedInternals.didUsePromise) {
+                // The component just suspended. Yield to the main thread in
+                // case the promise is already resolved. If so, it will ping in
+                // a microtask and we can resume without unwinding the stack.
+                queue[i] = callback;
+                queue.splice(0, i);
+                return;
+              }
+              callback = continuation;
+            } else {
+              break;
+            }
+          } while (true);
+        }
+        // We flushed the entire queue.
+        queue.length = 0;
+      } catch (error) {
+        // If something throws, leave the remaining callbacks on the queue.
+        queue.splice(0, i + 1);
+        ReactSharedInternals.thrownErrors.push(error);
+      } finally {
+        isFlushing = false;
+      }
+    }
+  }
+}
+
+// Some of our warnings attempt to detect if the `act` call is awaited by
+// checking in an asynchronous task. Wait a few microtasks before checking. The
+// only reason one isn't sufficient is we want to accommodate the case where an
+// `act` call is returned from an async function without first being awaited,
+// since that's a somewhat common pattern. If you do this too many times in a
+// nested sequence, you might get a warning, but you can always fix by awaiting
+// the call.
+//
+// A macrotask would also work (and is the fallback) but depending on the test
+// environment it may cause the warning to fire too late.
+const queueSeveralMicrotasks =
+  typeof queueMicrotask === 'function'
+    ? (callback: () => void) => {
+        queueMicrotask(() => queueMicrotask(callback));
+      }
+    : queueMacrotask;
diff --git a/packages/react/src/ReactBaseClasses.js b/packages/react/src/ReactBaseClasses.js
new file mode 100644
index 00000000000..7895a97e3a1
--- /dev/null
+++ b/packages/react/src/ReactBaseClasses.js
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
+import assign from 'shared/assign';
+
+const emptyObject = {};
+if (__DEV__) {
+  Object.freeze(emptyObject);
+}
+
+/**
+ * Base class helpers for the updating state of a component.
+ */
+function Component(props, context, updater) {
+  this.props = props;
+  this.context = context;
+  // If a component has string refs, we will assign a different object later.
+  this.refs = emptyObject;
+  // We initialize the default updater but the real one gets injected by the
+  // renderer.
+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+Component.prototype.isReactComponent = {};
+
+/**
+ * Sets a subset of the state. Always use this to mutate
+ * state. You should treat `this.state` as immutable.
+ *
+ * There is no guarantee that `this.state` will be immediately updated, so
+ * accessing `this.state` after calling this method may return the old value.
+ *
+ * There is no guarantee that calls to `setState` will run synchronously,
+ * as they may eventually be batched together.  You can provide an optional
+ * callback that will be executed when the call to setState is actually
+ * completed.
+ *
+ * When a function is provided to setState, it will be called at some point in
+ * the future (not synchronously). It will be called with the up to date
+ * component arguments (state, props, context). These values can be different
+ * from this.* because your function may be called after receiveProps but before
+ * shouldComponentUpdate, and this new state, props, and context will not yet be
+ * assigned to this.
+ *
+ * @param {object|function} partialState Next partial state or function to
+ *        produce next partial state to be merged with current state.
+ * @param {?function} callback Called after state is updated.
+ * @final
+ * @protected
+ */
+Component.prototype.setState = function (partialState, callback) {
+  if (
+    typeof partialState !== 'object' &&
+    typeof partialState !== 'function' &&
+    partialState != null
+  ) {
+    throw new Error(
+      'takes an object of state variables to update or a ' +
+        'function which returns an object of state variables.',
+    );
+  }
+
+  this.updater.enqueueSetState(this, partialState, callback, 'setState');
+};
+
+/**
+ * Forces an update. This should only be invoked when it is known with
+ * certainty that we are **not** in a DOM transaction.
+ *
+ * You may want to call this when you know that some deeper aspect of the
+ * component's state has changed but `setState` was not called.
+ *
+ * This will not invoke `shouldComponentUpdate`, but it will invoke
+ * `componentWillUpdate` and `componentDidUpdate`.
+ *
+ * @param {?function} callback Called after update is complete.
+ * @final
+ * @protected
+ */
+Component.prototype.forceUpdate = function (callback) {
+  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
+};
+
+/**
+ * Deprecated APIs. These APIs used to exist on classic React classes but since
+ * we would like to deprecate them, we're not going to move them over to this
+ * modern base class. Instead, we define a getter that warns if it's accessed.
+ */
+if (__DEV__) {
+  const deprecatedAPIs = {
+    isMounted: [
+      'isMounted',
+      'Instead, make sure to clean up subscriptions and pending requests in ' +
+        'componentWillUnmount to prevent memory leaks.',
+    ],
+    replaceState: [
+      'replaceState',
+      'Refactor your code to use setState instead (see ' +
+        'https://github.com/facebook/react/issues/3236).',
+    ],
+  };
+  const defineDeprecationWarning = function (methodName, info) {
+    Object.defineProperty(Component.prototype, methodName, {
+      get: function () {
+        console.warn(
+          '%s(...) is deprecated in plain JavaScript React classes. %s',
+          info[0],
+          info[1],
+        );
+        return undefined;
+      },
+    });
+  };
+  for (const fnName in deprecatedAPIs) {
+    if (deprecatedAPIs.hasOwnProperty(fnName)) {
+      defineDeprecationWarning(fnName, deprecatedAPIs[fnName]);
+    }
+  }
+}
+
+function ComponentDummy() {}
+ComponentDummy.prototype = Component.prototype;
+
+/**
+ * Convenience component with default shallow equality check for sCU.
+ */
+function PureComponent(props, context, updater) {
+  this.props = props;
+  this.context = context;
+  // If a component has string refs, we will assign a different object later.
+  this.refs = emptyObject;
+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
+pureComponentPrototype.constructor = PureComponent;
+// Avoid an extra prototype jump for these methods.
+assign(pureComponentPrototype, Component.prototype);
+pureComponentPrototype.isPureReactComponent = true;
+
+export {Component, PureComponent};
diff --git a/packages/react/src/ReactCacheClient.js b/packages/react/src/ReactCacheClient.js
new file mode 100644
index 00000000000..ef1e8d6d1da
--- /dev/null
+++ b/packages/react/src/ReactCacheClient.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {disableClientCache} from 'shared/ReactFeatureFlags';
+import {
+  cache as cacheImpl,
+  cacheSignal as cacheSignalImpl,
+} from './ReactCacheImpl';
+
+function noopCache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
+  // On the client (i.e. not a Server Components environment) `cache` has
+  // no caching behavior. We just return the function as-is.
+  //
+  // We intend to implement client caching in a future major release. In the
+  // meantime, it's only exposed as an API so that Shared Components can use
+  // per-request caching on the server without breaking on the client. But it
+  // does mean they need to be aware of the behavioral difference.
+  //
+  // The rest of the behavior is the same as the server implementation — it
+  // returns a new reference, extra properties like `displayName` are not
+  // preserved, the length of the new function is 0, etc. That way apps can't
+  // accidentally depend on those details.
+  return function () {
+    // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
+    return fn.apply(null, arguments);
+  };
+}
+
+export const cache: typeof noopCache = disableClientCache
+  ? noopCache
+  : cacheImpl;
+
+function noopCacheSignal(): null | AbortSignal {
+  return null;
+}
+
+export const cacheSignal: () => null | AbortSignal = disableClientCache
+  ? noopCacheSignal
+  : cacheSignalImpl;
diff --git a/packages/react/src/ReactCacheImpl.js b/packages/react/src/ReactCacheImpl.js
new file mode 100644
index 00000000000..2ff7431fc51
--- /dev/null
+++ b/packages/react/src/ReactCacheImpl.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactSharedInternals from 'shared/ReactSharedInternals';
+
+const UNTERMINATED = 0;
+const TERMINATED = 1;
+const ERRORED = 2;
+
+type UnterminatedCacheNode<T> = {
+  s: 0,
+  v: void,
+  o: null | WeakMap<Function | Object, CacheNode<T>>,
+  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
+};
+
+type TerminatedCacheNode<T> = {
+  s: 1,
+  v: T,
+  o: null | WeakMap<Function | Object, CacheNode<T>>,
+  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
+};
+
+type ErroredCacheNode<T> = {
+  s: 2,
+  v: mixed,
+  o: null | WeakMap<Function | Object, CacheNode<T>>,
+  p: null | Map<string | number | null | void | symbol | boolean, CacheNode<T>>,
+};
+
+type CacheNode<T> =
+  | TerminatedCacheNode<T>
+  | UnterminatedCacheNode<T>
+  | ErroredCacheNode<T>;
+
+function createCacheRoot<T>(): WeakMap<Function | Object, CacheNode<T>> {
+  return new WeakMap();
+}
+
+function createCacheNode<T>(): CacheNode<T> {
+  return {
+    s: UNTERMINATED, // status, represents whether the cached computation returned a value or threw an error
+    v: undefined, // value, either the cached result or an error, depending on s
+    o: null, // object cache, a WeakMap where non-primitive arguments are stored
+    p: null, // primitive cache, a regular Map where primitive arguments are stored.
+  };
+}
+
+export function cache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
+  return function () {
+    const dispatcher = ReactSharedInternals.A;
+    if (!dispatcher) {
+      // If there is no dispatcher, then we treat this as not being cached.
+      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
+      return fn.apply(null, arguments);
+    }
+    const fnMap: WeakMap<any, CacheNode<T>> = dispatcher.getCacheForType(
+      createCacheRoot,
+    );
+    const fnNode = fnMap.get(fn);
+    let cacheNode: CacheNode<T>;
+    if (fnNode === undefined) {
+      cacheNode = createCacheNode();
+      fnMap.set(fn, cacheNode);
+    } else {
+      cacheNode = fnNode;
+    }
+    for (let i = 0, l = arguments.length; i < l; i++) {
+      const arg = arguments[i];
+      if (
+        typeof arg === 'function' ||
+        (typeof arg === 'object' && arg !== null)
+      ) {
+        // Objects go into a WeakMap
+        let objectCache = cacheNode.o;
+        if (objectCache === null) {
+          cacheNode.o = objectCache = new WeakMap();
+        }
+        const objectNode = objectCache.get(arg);
+        if (objectNode === undefined) {
+          cacheNode = createCacheNode();
+          objectCache.set(arg, cacheNode);
+        } else {
+          cacheNode = objectNode;
+        }
+      } else {
+        // Primitives go into a regular Map
+        let primitiveCache = cacheNode.p;
+        if (primitiveCache === null) {
+          cacheNode.p = primitiveCache = new Map();
+        }
+        const primitiveNode = primitiveCache.get(arg);
+        if (primitiveNode === undefined) {
+          cacheNode = createCacheNode();
+          primitiveCache.set(arg, cacheNode);
+        } else {
+          cacheNode = primitiveNode;
+        }
+      }
+    }
+    if (cacheNode.s === TERMINATED) {
+      return cacheNode.v;
+    }
+    if (cacheNode.s === ERRORED) {
+      throw cacheNode.v;
+    }
+    try {
+      // $FlowFixMe[incompatible-call]: We don't want to use rest arguments since we transpile the code.
+      const result = fn.apply(null, arguments);
+      const terminatedNode: TerminatedCacheNode<T> = (cacheNode: any);
+      terminatedNode.s = TERMINATED;
+      terminatedNode.v = result;
+      return result;
+    } catch (error) {
+      // We store the first error that's thrown and rethrow it.
+      const erroredNode: ErroredCacheNode<T> = (cacheNode: any);
+      erroredNode.s = ERRORED;
+      erroredNode.v = error;
+      throw error;
+    }
+  };
+}
+
+export function cacheSignal(): null | AbortSignal {
+  const dispatcher = ReactSharedInternals.A;
+  if (!dispatcher) {
+    // If there is no dispatcher, then we treat this as not having an AbortSignal
+    // since in the same context, a cached function will be allowed to be called
+    // but it won't be cached. So it's neither an infinite AbortSignal nor an
+    // already resolved one.
+    return null;
+  }
+  return dispatcher.cacheSignal();
+}
diff --git a/packages/react/src/ReactCacheServer.js b/packages/react/src/ReactCacheServer.js
new file mode 100644
index 00000000000..ec68dc7c272
--- /dev/null
+++ b/packages/react/src/ReactCacheServer.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {cache, cacheSignal} from './ReactCacheImpl';
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
new file mode 100644
index 00000000000..d4c41d6669a
--- /dev/null
+++ b/packages/react/src/ReactChildren.js
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  ReactNodeList,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+import isArray from 'shared/isArray';
+import noop from 'shared/noop';
+import {
+  getIteratorFn,
+  REACT_ELEMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+import {enableOptimisticKey} from 'shared/ReactFeatureFlags';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
+
+import {isValidElement, cloneAndReplaceKey} from './jsx/ReactJSXElement';
+
+const SEPARATOR = '.';
+const SUBSEPARATOR = ':';
+
+/**
+ * Escape and wrap key so it is safe to use as a reactid
+ *
+ * @param {string} key to be escaped.
+ * @return {string} the escaped key.
+ */
+function escape(key: string): string {
+  const escapeRegex = /[=:]/g;
+  const escaperLookup = {
+    '=': '=0',
+    ':': '=2',
+  };
+  const escapedString = key.replace(escapeRegex, function (match) {
+    // $FlowFixMe[invalid-computed-prop]
+    return escaperLookup[match];
+  });
+
+  return '$' + escapedString;
+}
+
+/**
+ * TODO: Test that a single child and an array with one item have the same key
+ * pattern.
+ */
+
+let didWarnAboutMaps = false;
+
+const userProvidedKeyEscapeRegex = /\/+/g;
+function escapeUserProvidedKey(text: string): string {
+  return text.replace(userProvidedKeyEscapeRegex, '$&/');
+}
+
+/**
+ * Generate a key string that identifies a element within a set.
+ *
+ * @param {*} element A element that could contain a manual key.
+ * @param {number} index Index that is used if a manual key is not provided.
+ * @return {string}
+ */
+function getElementKey(element: any, index: number): string {
+  // Do some typechecking here since we call this blindly. We want to ensure
+  // that we don't block potential future ES APIs.
+  if (typeof element === 'object' && element !== null && element.key != null) {
+    if (enableOptimisticKey && element.key === REACT_OPTIMISTIC_KEY) {
+      // For React.Children purposes this is treated as just null.
+      if (__DEV__) {
+        console.error("React.Children helpers don't support optimisticKey.");
+      }
+      return index.toString(36);
+    }
+    // Explicit key
+    if (__DEV__) {
+      checkKeyStringCoercion(element.key);
+    }
+    return escape('' + element.key);
+  }
+  // Implicit key determined by the index in the set
+  return index.toString(36);
+}
+
+function resolveThenable<T>(thenable: Thenable<T>): T {
+  switch (thenable.status) {
+    case 'fulfilled': {
+      const fulfilledValue: T = thenable.value;
+      return fulfilledValue;
+    }
+    case 'rejected': {
+      const rejectedError = thenable.reason;
+      throw rejectedError;
+    }
+    default: {
+      if (typeof thenable.status === 'string') {
+        // Only instrument the thenable if the status if not defined. If
+        // it's defined, but an unknown value, assume it's been instrumented by
+        // some custom userspace implementation. We treat it as "pending".
+        // Attach a dummy listener, to ensure that any lazy initialization can
+        // happen. Flight lazily parses JSON when the value is actually awaited.
+        thenable.then(noop, noop);
+      } else {
+        // This is an uncached thenable that we haven't seen before.
+
+        // TODO: Detect infinite ping loops caused by uncached promises.
+
+        const pendingThenable: PendingThenable<T> = (thenable: any);
+        pendingThenable.status = 'pending';
+        pendingThenable.then(
+          fulfilledValue => {
+            if (thenable.status === 'pending') {
+              const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = fulfilledValue;
+            }
+          },
+          (error: mixed) => {
+            if (thenable.status === 'pending') {
+              const rejectedThenable: RejectedThenable<T> = (thenable: any);
+              rejectedThenable.status = 'rejected';
+              rejectedThenable.reason = error;
+            }
+          },
+        );
+      }
+
+      // Check one more time in case the thenable resolved synchronously.
+      switch ((thenable: Thenable<T>).status) {
+        case 'fulfilled': {
+          const fulfilledThenable: FulfilledThenable<T> = (thenable: any);
+          return fulfilledThenable.value;
+        }
+        case 'rejected': {
+          const rejectedThenable: RejectedThenable<T> = (thenable: any);
+          const rejectedError = rejectedThenable.reason;
+          throw rejectedError;
+        }
+      }
+    }
+  }
+  throw thenable;
+}
+
+function mapIntoArray(
+  children: ?ReactNodeList,
+  array: Array<React$Node>,
+  escapedPrefix: string,
+  nameSoFar: string,
+  callback: (?React$Node) => ?ReactNodeList,
+): number {
+  const type = typeof children;
+
+  if (type === 'undefined' || type === 'boolean') {
+    // All of the above are perceived as null.
+    children = null;
+  }
+
+  let invokeCallback = false;
+
+  if (children === null) {
+    invokeCallback = true;
+  } else {
+    switch (type) {
+      case 'bigint':
+      case 'string':
+      case 'number':
+        invokeCallback = true;
+        break;
+      case 'object':
+        switch ((children: any).$$typeof) {
+          case REACT_ELEMENT_TYPE:
+          case REACT_PORTAL_TYPE:
+            invokeCallback = true;
+            break;
+          case REACT_LAZY_TYPE:
+            const payload = (children: any)._payload;
+            const init = (children: any)._init;
+            return mapIntoArray(
+              init(payload),
+              array,
+              escapedPrefix,
+              nameSoFar,
+              callback,
+            );
+        }
+    }
+  }
+
+  if (invokeCallback) {
+    const child = children;
+    let mappedChild = callback(child);
+    // If it's the only child, treat the name as if it was wrapped in an array
+    // so that it's consistent if the number of children grows:
+    const childKey =
+      nameSoFar === '' ? SEPARATOR + getElementKey(child, 0) : nameSoFar;
+    if (isArray(mappedChild)) {
+      let escapedChildKey = '';
+      if (childKey != null) {
+        escapedChildKey = escapeUserProvidedKey(childKey) + '/';
+      }
+      mapIntoArray(mappedChild, array, escapedChildKey, '', c => c);
+    } else if (mappedChild != null) {
+      if (isValidElement(mappedChild)) {
+        if (__DEV__) {
+          // The `if` statement here prevents auto-disabling of the safe
+          // coercion ESLint rule, so we must manually disable it below.
+          // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key
+          if (mappedChild.key != null) {
+            if (!child || child.key !== mappedChild.key) {
+              checkKeyStringCoercion(mappedChild.key);
+            }
+          }
+        }
+        const newChild = cloneAndReplaceKey(
+          mappedChild,
+          // Keep both the (mapped) and old keys if they differ, just as
+          // traverseAllChildren used to do for objects as children
+          escapedPrefix +
+            // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key
+            (mappedChild.key != null &&
+            (!child || child.key !== mappedChild.key)
+              ? escapeUserProvidedKey(
+                  // $FlowFixMe[unsafe-addition]
+                  '' + mappedChild.key, // eslint-disable-line react-internal/safe-string-coercion
+                ) + '/'
+              : '') +
+            childKey,
+        );
+        if (__DEV__) {
+          // If `child` was an element without a `key`, we need to validate if
+          // it should have had a `key`, before assigning one to `mappedChild`.
+          // $FlowFixMe[incompatible-type] Flow incorrectly thinks React.Portal doesn't have a key
+          if (
+            nameSoFar !== '' &&
+            child != null &&
+            isValidElement(child) &&
+            child.key == null
+          ) {
+            // We check truthiness of `child._store.validated` instead of being
+            // inequal to `1` to provide a bit of backward compatibility for any
+            // libraries (like `fbt`) which may be hacking this property.
+            if (child._store && !child._store.validated) {
+              // Mark this child as having failed validation, but let the actual
+              // renderer print the warning later.
+              newChild._store.validated = 2;
+            }
+          }
+        }
+        mappedChild = newChild;
+      }
+      array.push(mappedChild);
+    }
+    return 1;
+  }
+
+  let child;
+  let nextName;
+  let subtreeCount = 0; // Count of children found in the current subtree.
+  const nextNamePrefix =
+    nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
+
+  if (isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      child = children[i];
+      nextName = nextNamePrefix + getElementKey(child, i);
+      subtreeCount += mapIntoArray(
+        child,
+        array,
+        escapedPrefix,
+        nextName,
+        callback,
+      );
+    }
+  } else {
+    const iteratorFn = getIteratorFn(children);
+    if (typeof iteratorFn === 'function') {
+      const iterableChildren: Iterable<React$Node> & {
+        entries: any,
+      } = (children: any);
+
+      if (__DEV__) {
+        // Warn about using Maps as children
+        if (iteratorFn === iterableChildren.entries) {
+          if (!didWarnAboutMaps) {
+            console.warn(
+              'Using Maps as children is not supported. ' +
+                'Use an array of keyed ReactElements instead.',
+            );
+          }
+          didWarnAboutMaps = true;
+        }
+      }
+
+      const iterator = iteratorFn.call(iterableChildren);
+      let step;
+      let ii = 0;
+      // $FlowFixMe[incompatible-use] `iteratorFn` might return null according to typing.
+      while (!(step = iterator.next()).done) {
+        child = step.value;
+        nextName = nextNamePrefix + getElementKey(child, ii++);
+        subtreeCount += mapIntoArray(
+          child,
+          array,
+          escapedPrefix,
+          nextName,
+          callback,
+        );
+      }
+    } else if (type === 'object') {
+      if (typeof (children: any).then === 'function') {
+        return mapIntoArray(
+          resolveThenable((children: any)),
+          array,
+          escapedPrefix,
+          nameSoFar,
+          callback,
+        );
+      }
+
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      const childrenString = String((children: any));
+
+      throw new Error(
+        `Objects are not valid as a React child (found: ${
+          childrenString === '[object Object]'
+            ? 'object with keys {' +
+              Object.keys((children: any)).join(', ') +
+              '}'
+            : childrenString
+        }). ` +
+          'If you meant to render a collection of children, use an array ' +
+          'instead.',
+      );
+    }
+  }
+
+  return subtreeCount;
+}
+
+type MapFunc = (child: ?React$Node, index: number) => ?ReactNodeList;
+
+/**
+ * Maps children that are typically specified as `props.children`.
+ *
+ * See https://reactjs.org/docs/react-api.html#reactchildrenmap
+ *
+ * The provided mapFunction(child, index) will be called for each
+ * leaf child.
+ *
+ * @param {?*} children Children tree container.
+ * @param {function(*, int)} func The map function.
+ * @param {*} context Context for mapFunction.
+ * @return {object} Object containing the ordered map of results.
+ */
+function mapChildren(
+  children: ?ReactNodeList,
+  func: MapFunc,
+  context: mixed,
+): ?Array<React$Node> {
+  if (children == null) {
+    // $FlowFixMe limitation refining abstract types in Flow
+    return children;
+  }
+  const result: Array<React$Node> = [];
+  let count = 0;
+  mapIntoArray(children, result, '', '', function (child) {
+    return func.call(context, child, count++);
+  });
+  return result;
+}
+
+/**
+ * Count the number of children that are typically specified as
+ * `props.children`.
+ *
+ * See https://reactjs.org/docs/react-api.html#reactchildrencount
+ *
+ * @param {?*} children Children tree container.
+ * @return {number} The number of children.
+ */
+function countChildren(children: ?ReactNodeList): number {
+  let n = 0;
+  mapChildren(children, () => {
+    n++;
+    // Don't return anything
+  });
+  return n;
+}
+
+type ForEachFunc = (child: ?React$Node) => void;
+
+/**
+ * Iterates through children that are typically specified as `props.children`.
+ *
+ * See https://reactjs.org/docs/react-api.html#reactchildrenforeach
+ *
+ * The provided forEachFunc(child, index) will be called for each
+ * leaf child.
+ *
+ * @param {?*} children Children tree container.
+ * @param {function(*, int)} forEachFunc
+ * @param {*} forEachContext Context for forEachContext.
+ */
+function forEachChildren(
+  children: ?ReactNodeList,
+  forEachFunc: ForEachFunc,
+  forEachContext: mixed,
+): void {
+  mapChildren(
+    children,
+    // $FlowFixMe[missing-this-annot]
+    function () {
+      forEachFunc.apply(this, arguments);
+      // Don't return anything.
+    },
+    forEachContext,
+  );
+}
+
+/**
+ * Flatten a children object (typically specified as `props.children`) and
+ * return an array with appropriately re-keyed children.
+ *
+ * See https://reactjs.org/docs/react-api.html#reactchildrentoarray
+ */
+function toArray(children: ?ReactNodeList): Array<React$Node> {
+  return mapChildren(children, child => child) || [];
+}
+
+/**
+ * Returns the first child in a collection of children and verifies that there
+ * is only one child in the collection.
+ *
+ * See https://reactjs.org/docs/react-api.html#reactchildrenonly
+ *
+ * The current implementation of this function assumes that a single child gets
+ * passed without a wrapper, but the purpose of this helper function is to
+ * abstract away the particular structure of children.
+ *
+ * @param {?object} children Child collection structure.
+ * @return {ReactElement} The first and only `ReactElement` contained in the
+ * structure.
+ */
+function onlyChild<T>(children: T): T {
+  if (!isValidElement(children)) {
+    throw new Error(
+      'React.Children.only expected to receive a single React element child.',
+    );
+  }
+
+  return children;
+}
+
+export {
+  forEachChildren as forEach,
+  mapChildren as map,
+  countChildren as count,
+  onlyChild as only,
+  toArray,
+};
diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js
new file mode 100644
index 00000000000..5d1c7f3ac05
--- /dev/null
+++ b/packages/react/src/ReactClient.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactVersion from 'shared/ReactVersion';
+import {
+  REACT_FRAGMENT_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
+  REACT_ACTIVITY_TYPE,
+  REACT_SCOPE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+
+import {Component, PureComponent} from './ReactBaseClasses';
+import {createRef} from './ReactCreateRef';
+import {forEach, map, count, toArray, only} from './ReactChildren';
+import {
+  createElement,
+  cloneElement,
+  isValidElement,
+} from './jsx/ReactJSXElement';
+import {createContext} from './ReactContext';
+import {lazy} from './ReactLazy';
+import {forwardRef} from './ReactForwardRef';
+import {memo} from './ReactMemo';
+import {cache, cacheSignal} from './ReactCacheClient';
+import {
+  getCacheForType,
+  useCallback,
+  useContext,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useDebugValue,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useSyncExternalStore,
+  useReducer,
+  useRef,
+  useState,
+  useTransition,
+  useDeferredValue,
+  useId,
+  useCacheRefresh,
+  use,
+  useOptimistic,
+  useActionState,
+} from './ReactHooks';
+import ReactSharedInternals from './ReactSharedInternalsClient';
+import {startTransition, startGestureTransition} from './ReactStartTransition';
+import {addTransitionType} from './ReactTransitionType';
+import {act} from './ReactAct';
+import {captureOwnerStack} from './ReactOwnerStack';
+import * as ReactCompilerRuntime from './ReactCompilerRuntime';
+
+const Children = {
+  map,
+  forEach,
+  count,
+  toArray,
+  only,
+};
+
+export {
+  Children,
+  createRef,
+  Component,
+  PureComponent,
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  useCallback,
+  useContext,
+  useEffect,
+  useEffectEvent,
+  useImperativeHandle,
+  useDebugValue,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useActionState,
+  useSyncExternalStore,
+  useReducer,
+  useRef,
+  useState,
+  REACT_FRAGMENT_TYPE as Fragment,
+  REACT_PROFILER_TYPE as Profiler,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+  REACT_SUSPENSE_TYPE as Suspense,
+  createElement,
+  cloneElement,
+  isValidElement,
+  ReactVersion as version,
+  ReactSharedInternals as __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  ReactCompilerRuntime as __COMPILER_RUNTIME,
+  // Concurrent Mode
+  useTransition,
+  startTransition,
+  useDeferredValue,
+  REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,
+  REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
+  REACT_ACTIVITY_TYPE as Activity,
+  getCacheForType as unstable_getCacheForType,
+  useCacheRefresh as unstable_useCacheRefresh,
+  use,
+  // enableScopeAPI
+  REACT_SCOPE_TYPE as unstable_Scope,
+  // enableTransitionTracing
+  REACT_TRACING_MARKER_TYPE as unstable_TracingMarker,
+  // enableViewTransition
+  REACT_VIEW_TRANSITION_TYPE as ViewTransition,
+  addTransitionType as addTransitionType,
+  // enableGestureTransition
+  startGestureTransition as unstable_startGestureTransition,
+  // enableOptimisticKey
+  REACT_OPTIMISTIC_KEY as optimisticKey,
+  // DEV-only
+  useId,
+  act,
+  captureOwnerStack,
+};
diff --git a/packages/react/src/ReactCompilerRuntime.js b/packages/react/src/ReactCompilerRuntime.js
new file mode 100644
index 00000000000..250f2324cae
--- /dev/null
+++ b/packages/react/src/ReactCompilerRuntime.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useMemoCache as c} from './ReactHooks';
diff --git a/packages/react/src/ReactContext.js b/packages/react/src/ReactContext.js
new file mode 100644
index 00000000000..d5dbb433dfe
--- /dev/null
+++ b/packages/react/src/ReactContext.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_CONSUMER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
+import type {ReactContext} from 'shared/ReactTypes';
+
+export function createContext<T>(defaultValue: T): ReactContext<T> {
+  // TODO: Second argument used to be an optional `calculateChangedBits`
+  // function. Warn to reserve for future use?
+
+  const context: ReactContext<T> = {
+    $$typeof: REACT_CONTEXT_TYPE,
+    // As a workaround to support multiple concurrent renderers, we categorize
+    // some renderers as primary and others as secondary. We only expect
+    // there to be two concurrent renderers at most: React Native (primary) and
+    // Fabric (secondary); React DOM (primary) and React ART (secondary).
+    // Secondary renderers store their context values on separate fields.
+    _currentValue: defaultValue,
+    _currentValue2: defaultValue,
+    // Used to track how many concurrent renderers this context currently
+    // supports within in a single renderer. Such as parallel server rendering.
+    _threadCount: 0,
+    // These are circular
+    Provider: (null: any),
+    Consumer: (null: any),
+  };
+
+  context.Provider = context;
+  context.Consumer = {
+    $$typeof: REACT_CONSUMER_TYPE,
+    _context: context,
+  };
+  if (__DEV__) {
+    context._currentRenderer = null;
+    context._currentRenderer2 = null;
+  }
+
+  return context;
+}
diff --git a/packages/react/src/ReactCreateRef.js b/packages/react/src/ReactCreateRef.js
new file mode 100644
index 00000000000..adcda363e65
--- /dev/null
+++ b/packages/react/src/ReactCreateRef.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {RefObject} from 'shared/ReactTypes';
+
+// an immutable object with a single mutable value
+export function createRef(): RefObject {
+  const refObject = {
+    current: null,
+  };
+  if (__DEV__) {
+    Object.seal(refObject);
+  }
+  return refObject;
+}
diff --git a/packages/react/src/ReactForwardRef.js b/packages/react/src/ReactForwardRef.js
new file mode 100644
index 00000000000..4f891d609ff
--- /dev/null
+++ b/packages/react/src/ReactForwardRef.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
+
+export function forwardRef<Props, ElementType: React$ElementType>(
+  render: (
+    props: Props,
+    ref: React$RefSetter<React$ElementRef<ElementType>>,
+  ) => React$Node,
+) {
+  if (__DEV__) {
+    if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
+      console.error(
+        'forwardRef requires a render function but received a `memo` ' +
+          'component. Instead of forwardRef(memo(...)), use ' +
+          'memo(forwardRef(...)).',
+      );
+    } else if (typeof render !== 'function') {
+      console.error(
+        'forwardRef requires a render function but was given %s.',
+        render === null ? 'null' : typeof render,
+      );
+    } else {
+      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) {
+      if (render.defaultProps != null) {
+        console.error(
+          'forwardRef render functions do not support defaultProps. ' +
+            'Did you accidentally pass a React component?',
+        );
+      }
+    }
+  }
+
+  const elementType = {
+    $$typeof: REACT_FORWARD_REF_TYPE,
+    render,
+  };
+  if (__DEV__) {
+    let ownName;
+    Object.defineProperty(elementType, 'displayName', {
+      enumerable: false,
+      configurable: true,
+      get: function () {
+        return ownName;
+      },
+      set: function (name) {
+        ownName = name;
+
+        // The inner component shouldn't inherit this display name in most cases,
+        // because the component may be used elsewhere.
+        // But it's nice for anonymous functions to inherit the name,
+        // so that our component-stack generation logic will display their frames.
+        // An anonymous function generally suggests a pattern like:
+        //   React.forwardRef((props, ref) => {...});
+        // This kind of inner function is not used elsewhere so the side effect is okay.
+        if (!render.name && !render.displayName) {
+          Object.defineProperty(render, 'name', {
+            value: name,
+          });
+          render.displayName = name;
+        }
+      },
+    });
+  }
+  return elementType;
+}
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
new file mode 100644
index 00000000000..ff86130baa0
--- /dev/null
+++ b/packages/react/src/ReactHooks.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  ReactContext,
+  StartTransitionOptions,
+  Usable,
+  Awaited,
+} from 'shared/ReactTypes';
+import {REACT_CONSUMER_TYPE} from 'shared/ReactSymbols';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+type BasicStateAction<S> = (S => S) | S;
+type Dispatch<A> = A => void;
+
+function resolveDispatcher() {
+  const dispatcher = ReactSharedInternals.H;
+  if (__DEV__) {
+    if (dispatcher === null) {
+      console.error(
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+          ' one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      );
+    }
+  }
+  // Will result in a null access error if accessed outside render phase. We
+  // intentionally don't throw our own error because this is in a hot path.
+  // Also helps ensure this is inlined.
+  return ((dispatcher: any): Dispatcher);
+}
+
+export function getCacheForType<T>(resourceType: () => T): T {
+  const dispatcher = ReactSharedInternals.A;
+  if (!dispatcher) {
+    // If there is no dispatcher, then we treat this as not being cached.
+    return resourceType();
+  }
+  return dispatcher.getCacheForType(resourceType);
+}
+
+export function useContext<T>(Context: ReactContext<T>): T {
+  const dispatcher = resolveDispatcher();
+  if (__DEV__) {
+    if (Context.$$typeof === REACT_CONSUMER_TYPE) {
+      console.error(
+        'Calling useContext(Context.Consumer) is not supported and will cause bugs. ' +
+          'Did you mean to call useContext(Context) instead?',
+      );
+    }
+  }
+  return dispatcher.useContext(Context);
+}
+
+export function useState<S>(
+  initialState: (() => S) | S,
+): [S, Dispatch<BasicStateAction<S>>] {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useState(initialState);
+}
+
+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} {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useRef(initialValue);
+}
+
+export function useEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  if (__DEV__) {
+    if (create == null) {
+      console.warn(
+        'React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?',
+      );
+    }
+  }
+
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useEffect(create, deps);
+}
+
+export function useInsertionEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  if (__DEV__) {
+    if (create == null) {
+      console.warn(
+        'React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?',
+      );
+    }
+  }
+
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useInsertionEffect(create, deps);
+}
+
+export function useLayoutEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  if (__DEV__) {
+    if (create == null) {
+      console.warn(
+        'React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?',
+      );
+    }
+  }
+
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useLayoutEffect(create, deps);
+}
+
+export function useCallback<T>(
+  callback: T,
+  deps: Array<mixed> | void | null,
+): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useCallback(callback, deps);
+}
+
+export function useMemo<T>(
+  create: () => T,
+  deps: Array<mixed> | void | null,
+): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useMemo(create, deps);
+}
+
+export function useImperativeHandle<T>(
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
+  create: () => T,
+  deps: Array<mixed> | void | null,
+): void {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useImperativeHandle(ref, create, deps);
+}
+
+export function useDebugValue<T>(
+  value: T,
+  formatterFn: ?(value: T) => mixed,
+): void {
+  if (__DEV__) {
+    const dispatcher = resolveDispatcher();
+    return dispatcher.useDebugValue(value, formatterFn);
+  }
+}
+
+export function useTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useTransition();
+}
+
+export function useDeferredValue<T>(value: T, initialValue?: T): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useDeferredValue(value, initialValue);
+}
+
+export function useId(): string {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useId();
+}
+
+export function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot,
+  );
+}
+
+export function useCacheRefresh(): <T>(?() => T, ?T) => void {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe[not-a-function] This is unstable, thus optional
+  return dispatcher.useCacheRefresh();
+}
+
+export function use<T>(usable: Usable<T>): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.use(usable);
+}
+
+export function useMemoCache(size: number): Array<mixed> {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe[not-a-function] This is unstable, thus optional
+  return dispatcher.useMemoCache(size);
+}
+
+export function useEffectEvent<Args, F: (...Array<Args>) => mixed>(
+  callback: F,
+): F {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe[not-a-function] This is unstable, thus optional
+  return dispatcher.useEffectEvent(callback);
+}
+
+export function useOptimistic<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useOptimistic(passthrough, reducer);
+}
+
+export function useActionState<S, P>(
+  action: (Awaited<S>, P) => S,
+  initialState: Awaited<S>,
+  permalink?: string,
+): [Awaited<S>, (P) => void, boolean] {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useActionState(action, initialState, permalink);
+}
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
new file mode 100644
index 00000000000..b380750ca10
--- /dev/null
+++ b/packages/react/src/ReactLazy.js
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  Wakeable,
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+  ReactDebugInfo,
+  ReactIOInfo,
+} from 'shared/ReactTypes';
+
+import {enableAsyncDebugInfo} from 'shared/ReactFeatureFlags';
+
+import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
+
+import noop from 'shared/noop';
+
+const Uninitialized = -1;
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type UninitializedPayload<T> = {
+  _status: -1,
+  _result: () => Thenable<{default: T, ...}>,
+  _ioInfo?: ReactIOInfo, // DEV-only
+};
+
+type PendingPayload = {
+  _status: 0,
+  _result: Wakeable,
+  _ioInfo?: ReactIOInfo, // DEV-only
+};
+
+type ResolvedPayload<T> = {
+  _status: 1,
+  _result: {default: T, ...},
+  _ioInfo?: ReactIOInfo, // DEV-only
+};
+
+type RejectedPayload = {
+  _status: 2,
+  _result: mixed,
+  _ioInfo?: ReactIOInfo, // DEV-only
+};
+
+type Payload<T> =
+  | UninitializedPayload<T>
+  | PendingPayload
+  | ResolvedPayload<T>
+  | RejectedPayload;
+
+export type LazyComponent<T, P> = {
+  $$typeof: symbol | number,
+  _payload: P,
+  _init: (payload: P) => T,
+
+  // __DEV__
+  _debugInfo?: null | ReactDebugInfo,
+  _store?: {validated: 0 | 1 | 2, ...}, // 0: not validated, 1: validated, 2: force fail
+};
+
+function lazyInitializer<T>(payload: Payload<T>): T {
+  if (payload._status === Uninitialized) {
+    let resolveDebugValue: (void | T) => void = (null: any);
+    let rejectDebugValue: mixed => void = (null: any);
+    if (__DEV__ && enableAsyncDebugInfo) {
+      const ioInfo = payload._ioInfo;
+      if (ioInfo != null) {
+        // Mark when we first kicked off the lazy request.
+        // $FlowFixMe[cannot-write]
+        ioInfo.start = ioInfo.end = performance.now();
+        // Stash a Promise for introspection of the value later.
+        // $FlowFixMe[cannot-write]
+        ioInfo.value = new Promise((resolve, reject) => {
+          resolveDebugValue = resolve;
+          rejectDebugValue = reject;
+        });
+      }
+    }
+    const ctor = payload._result;
+    const thenable = ctor();
+    // Transition to the next state.
+    // This might throw either because it's missing or throws. If so, we treat it
+    // as still uninitialized and try again next time. Which is the same as what
+    // happens if the ctor or any wrappers processing the ctor throws. This might
+    // end up fixing it if the resolution was a concurrency bug.
+    thenable.then(
+      moduleObject => {
+        if (
+          (payload: Payload<T>)._status === Pending ||
+          payload._status === Uninitialized
+        ) {
+          // Transition to the next state.
+          const resolved: ResolvedPayload<T> = (payload: any);
+          resolved._status = Resolved;
+          resolved._result = moduleObject;
+          if (__DEV__ && enableAsyncDebugInfo) {
+            const ioInfo = payload._ioInfo;
+            if (ioInfo != null) {
+              // Mark the end time of when we resolved.
+              // $FlowFixMe[cannot-write]
+              ioInfo.end = performance.now();
+              // Surface the default export as the resolved "value" for debug purposes.
+              const debugValue =
+                moduleObject == null ? undefined : moduleObject.default;
+              resolveDebugValue(debugValue);
+              // $FlowFixMe
+              ioInfo.value.status = 'fulfilled';
+              // $FlowFixMe
+              ioInfo.value.value = debugValue;
+            }
+          }
+          // Make the thenable introspectable
+          // TODO we should move the lazy introspection into the resolveLazy
+          // impl or make suspendedThenable be able to be a lazy itself
+          if (thenable.status === undefined) {
+            const fulfilledThenable: FulfilledThenable<{default: T, ...}> =
+              (thenable: any);
+            fulfilledThenable.status = 'fulfilled';
+            fulfilledThenable.value = moduleObject;
+          }
+        }
+      },
+      error => {
+        if (
+          (payload: Payload<T>)._status === Pending ||
+          payload._status === Uninitialized
+        ) {
+          // Transition to the next state.
+          const rejected: RejectedPayload = (payload: any);
+          rejected._status = Rejected;
+          rejected._result = error;
+          if (__DEV__ && enableAsyncDebugInfo) {
+            const ioInfo = payload._ioInfo;
+            if (ioInfo != null) {
+              // Mark the end time of when we rejected.
+              // $FlowFixMe[cannot-write]
+              ioInfo.end = performance.now();
+              // Hide unhandled rejections.
+              // $FlowFixMe
+              ioInfo.value.then(noop, noop);
+              rejectDebugValue(error);
+              // $FlowFixMe
+              ioInfo.value.status = 'rejected';
+              // $FlowFixMe
+              ioInfo.value.reason = error;
+            }
+          }
+          // Make the thenable introspectable
+          // TODO we should move the lazy introspection into the resolveLazy
+          // impl or make suspendedThenable be able to be a lazy itself
+          if (thenable.status === undefined) {
+            const rejectedThenable: RejectedThenable<{default: T, ...}> =
+              (thenable: any);
+            rejectedThenable.status = 'rejected';
+            rejectedThenable.reason = error;
+          }
+        }
+      },
+    );
+    if (__DEV__ && enableAsyncDebugInfo) {
+      const ioInfo = payload._ioInfo;
+      if (ioInfo != null) {
+        const displayName = thenable.displayName;
+        if (typeof displayName === 'string') {
+          // $FlowFixMe[cannot-write]
+          ioInfo.name = displayName;
+        }
+      }
+    }
+    if (payload._status === Uninitialized) {
+      // In case, we're still uninitialized, then we're waiting for the thenable
+      // to resolve. Set it as pending in the meantime.
+      const pending: PendingPayload = (payload: any);
+      pending._status = Pending;
+      pending._result = thenable;
+    }
+  }
+  if (payload._status === Resolved) {
+    const moduleObject = payload._result;
+    if (__DEV__) {
+      if (moduleObject === undefined) {
+        console.error(
+          'lazy: Expected the result of a dynamic imp' +
+            'ort() call. ' +
+            'Instead received: %s\n\nYour code should look like: \n  ' +
+            // Break up imports to avoid accidentally parsing them as dependencies.
+            'const MyComponent = lazy(() => imp' +
+            "ort('./MyComponent'))\n\n" +
+            'Did you accidentally put curly braces around the import?',
+          moduleObject,
+        );
+      }
+    }
+    if (__DEV__) {
+      if (!('default' in moduleObject)) {
+        console.error(
+          'lazy: Expected the result of a dynamic imp' +
+            'ort() call. ' +
+            'Instead received: %s\n\nYour code should look like: \n  ' +
+            // Break up imports to avoid accidentally parsing them as dependencies.
+            'const MyComponent = lazy(() => imp' +
+            "ort('./MyComponent'))",
+          moduleObject,
+        );
+      }
+    }
+    return moduleObject.default;
+  } else {
+    throw payload._result;
+  }
+}
+
+export function lazy<T>(
+  ctor: () => Thenable<{default: T, ...}>,
+): LazyComponent<T, Payload<T>> {
+  const payload: Payload<T> = {
+    // We use these fields to store the result.
+    _status: Uninitialized,
+    _result: ctor,
+  };
+
+  const lazyType: LazyComponent<T, Payload<T>> = {
+    $$typeof: REACT_LAZY_TYPE,
+    _payload: payload,
+    _init: lazyInitializer,
+  };
+
+  if (__DEV__ && enableAsyncDebugInfo) {
+    // TODO: We should really track the owner here but currently ReactIOInfo
+    // can only contain ReactComponentInfo and not a Fiber. It's unusual to
+    // create a lazy inside an owner though since they should be in module scope.
+    const owner = null;
+    const ioInfo: ReactIOInfo = {
+      name: 'lazy',
+      start: -1,
+      end: -1,
+      value: null,
+      owner: owner,
+      debugStack: new Error('react-stack-top-frame'),
+      // eslint-disable-next-line react-internal/no-production-logging
+      debugTask: console.createTask ? console.createTask('lazy()') : null,
+    };
+    payload._ioInfo = ioInfo;
+    // Add debug info to the lazy, but this doesn't have an await stack yet.
+    // That will be inferred by later usage.
+    lazyType._debugInfo = [{awaited: ioInfo}];
+  }
+
+  return lazyType;
+}
diff --git a/packages/react/src/ReactMemo.js b/packages/react/src/ReactMemo.js
new file mode 100644
index 00000000000..8f2c0f53827
--- /dev/null
+++ b/packages/react/src/ReactMemo.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import {REACT_MEMO_TYPE} from 'shared/ReactSymbols';
+
+export function memo<Props>(
+  type: React$ElementType,
+  compare?: (oldProps: Props, newProps: Props) => boolean,
+) {
+  if (__DEV__) {
+    if (type == null) {
+      console.error(
+        'memo: The first argument must be a component. Instead ' +
+          'received: %s',
+        type === null ? 'null' : typeof type,
+      );
+    }
+  }
+  const elementType = {
+    $$typeof: REACT_MEMO_TYPE,
+    type,
+    compare: compare === undefined ? null : compare,
+  };
+  if (__DEV__) {
+    let ownName;
+    Object.defineProperty(elementType, 'displayName', {
+      enumerable: false,
+      configurable: true,
+      get: function () {
+        return ownName;
+      },
+      set: function (name) {
+        ownName = name;
+
+        // The inner component shouldn't inherit this display name in most cases,
+        // because the component may be used elsewhere.
+        // But it's nice for anonymous functions to inherit the name,
+        // so that our component-stack generation logic will display their frames.
+        // An anonymous function generally suggests a pattern like:
+        //   React.memo((props) => {...});
+        // This kind of inner function is not used elsewhere so the side effect is okay.
+        if (!type.name && !type.displayName) {
+          Object.defineProperty(type, 'name', {
+            value: name,
+          });
+          type.displayName = name;
+        }
+      },
+    });
+  }
+  return elementType;
+}
diff --git a/packages/react/src/ReactNoopUpdateQueue.js b/packages/react/src/ReactNoopUpdateQueue.js
new file mode 100644
index 00000000000..3e4e8bbeec9
--- /dev/null
+++ b/packages/react/src/ReactNoopUpdateQueue.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const didWarnStateUpdateForUnmountedComponent = {};
+
+function warnNoop(publicInstance, callerName) {
+  if (__DEV__) {
+    const constructor = publicInstance.constructor;
+    const componentName =
+      (constructor && (constructor.displayName || constructor.name)) ||
+      'ReactClass';
+    const warningKey = `${componentName}.${callerName}`;
+    if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
+      return;
+    }
+    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 = {};` ' +
+        'class property with the desired state in the %s component.',
+      callerName,
+      componentName,
+    );
+    didWarnStateUpdateForUnmountedComponent[warningKey] = true;
+  }
+}
+
+/**
+ * This is the abstract API for an update queue.
+ */
+const ReactNoopUpdateQueue = {
+  /**
+   * Checks whether or not this composite component is mounted.
+   * @param {ReactClass} publicInstance The instance we want to test.
+   * @return {boolean} True if mounted, false otherwise.
+   * @protected
+   * @final
+   */
+  isMounted: function (publicInstance) {
+    return false;
+  },
+
+  /**
+   * Forces an update. This should only be invoked when it is known with
+   * certainty that we are **not** in a DOM transaction.
+   *
+   * You may want to call this when you know that some deeper aspect of the
+   * component's state has changed but `setState` was not called.
+   *
+   * This will not invoke `shouldComponentUpdate`, but it will invoke
+   * `componentWillUpdate` and `componentDidUpdate`.
+   *
+   * @param {ReactClass} publicInstance The instance that should rerender.
+   * @param {?function} callback Called after component is updated.
+   * @param {?string} callerName name of the calling function in the public API.
+   * @internal
+   */
+  enqueueForceUpdate: function (publicInstance, callback, callerName) {
+    warnNoop(publicInstance, 'forceUpdate');
+  },
+
+  /**
+   * Replaces all of the state. Always use this or `setState` to mutate state.
+   * You should treat `this.state` as immutable.
+   *
+   * There is no guarantee that `this.state` will be immediately updated, so
+   * accessing `this.state` after calling this method may return the old value.
+   *
+   * @param {ReactClass} publicInstance The instance that should rerender.
+   * @param {object} completeState Next state.
+   * @param {?function} callback Called after component is updated.
+   * @param {?string} callerName name of the calling function in the public API.
+   * @internal
+   */
+  enqueueReplaceState: function (
+    publicInstance,
+    completeState,
+    callback,
+    callerName,
+  ) {
+    warnNoop(publicInstance, 'replaceState');
+  },
+
+  /**
+   * Sets a subset of the state. This only exists because _pendingState is
+   * internal. This provides a merging strategy that is not available to deep
+   * properties which is confusing. TODO: Expose pendingState or don't use it
+   * during the merge.
+   *
+   * @param {ReactClass} publicInstance The instance that should rerender.
+   * @param {object} partialState Next partial state to be merged with state.
+   * @param {?function} callback Called after component is updated.
+   * @param {?string} Name of the calling function in the public API.
+   * @internal
+   */
+  enqueueSetState: function (
+    publicInstance,
+    partialState,
+    callback,
+    callerName,
+  ) {
+    warnNoop(publicInstance, 'setState');
+  },
+};
+
+export default ReactNoopUpdateQueue;
diff --git a/packages/react/src/ReactOwnerStack.js b/packages/react/src/ReactOwnerStack.js
new file mode 100644
index 00000000000..7c0776be406
--- /dev/null
+++ b/packages/react/src/ReactOwnerStack.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactSharedInternals from 'shared/ReactSharedInternals';
+
+export function captureOwnerStack(): null | string {
+  if (__DEV__) {
+    const getCurrentStack = ReactSharedInternals.getCurrentStack;
+    if (getCurrentStack === null) {
+      return null;
+    }
+    // The current stack will be the owner stack which it is always here.
+    return getCurrentStack();
+  }
+
+  return null;
+}
diff --git a/packages/react/src/ReactServer.experimental.development.js b/packages/react/src/ReactServer.experimental.development.js
new file mode 100644
index 00000000000..dd92bf9104f
--- /dev/null
+++ b/packages/react/src/ReactServer.experimental.development.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactSharedInternalsServer';
+
+import {forEach, map, count, toArray, only} from './ReactChildren';
+import {
+  REACT_FRAGMENT_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+} from './jsx/ReactJSXElement';
+import {createRef} from './ReactCreateRef';
+import {
+  use,
+  useId,
+  useCallback,
+  useDebugValue,
+  useMemo,
+  getCacheForType,
+} from './ReactHooks';
+import {forwardRef} from './ReactForwardRef';
+import {lazy} from './ReactLazy';
+import {memo} from './ReactMemo';
+import {cache, cacheSignal} from './ReactCacheServer';
+import {startTransition} from './ReactStartTransition';
+import {captureOwnerStack} from './ReactOwnerStack';
+import version from 'shared/ReactVersion';
+
+const Children = {
+  map,
+  forEach,
+  count,
+  toArray,
+  only,
+};
+
+// These are server-only
+export {
+  taintUniqueValue as experimental_taintUniqueValue,
+  taintObjectReference as experimental_taintObjectReference,
+} from './ReactTaint';
+
+export {
+  Children,
+  REACT_ACTIVITY_TYPE as Activity,
+  REACT_FRAGMENT_TYPE as Fragment,
+  REACT_PROFILER_TYPE as Profiler,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+  REACT_SUSPENSE_TYPE as Suspense,
+  REACT_VIEW_TRANSITION_TYPE as ViewTransition,
+  cloneElement,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  startTransition,
+  getCacheForType as unstable_getCacheForType,
+  useId,
+  useCallback,
+  useDebugValue,
+  useMemo,
+  version,
+  // Experimental
+  REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,
+  // enableOptimisticKey
+  REACT_OPTIMISTIC_KEY as optimisticKey,
+  captureOwnerStack, // DEV-only
+};
diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js
new file mode 100644
index 00000000000..0eb8eafccd4
--- /dev/null
+++ b/packages/react/src/ReactServer.experimental.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactSharedInternalsServer';
+
+import {forEach, map, count, toArray, only} from './ReactChildren';
+import {
+  REACT_FRAGMENT_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+} from './jsx/ReactJSXElement';
+import {createRef} from './ReactCreateRef';
+import {
+  use,
+  useId,
+  useCallback,
+  useDebugValue,
+  useMemo,
+  getCacheForType,
+} from './ReactHooks';
+import {forwardRef} from './ReactForwardRef';
+import {lazy} from './ReactLazy';
+import {memo} from './ReactMemo';
+import {cache, cacheSignal} from './ReactCacheServer';
+import {startTransition} from './ReactStartTransition';
+import version from 'shared/ReactVersion';
+
+const Children = {
+  map,
+  forEach,
+  count,
+  toArray,
+  only,
+};
+
+// These are server-only
+export {
+  taintUniqueValue as experimental_taintUniqueValue,
+  taintObjectReference as experimental_taintObjectReference,
+} from './ReactTaint';
+
+export {
+  Children,
+  REACT_ACTIVITY_TYPE as Activity,
+  REACT_FRAGMENT_TYPE as Fragment,
+  REACT_PROFILER_TYPE as Profiler,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+  REACT_SUSPENSE_TYPE as Suspense,
+  REACT_VIEW_TRANSITION_TYPE as ViewTransition,
+  cloneElement,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  startTransition,
+  getCacheForType as unstable_getCacheForType,
+  useId,
+  useCallback,
+  useDebugValue,
+  useMemo,
+  version,
+  // Experimental
+  REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,
+  // enableOptimisticKey
+  REACT_OPTIMISTIC_KEY as optimisticKey,
+};
diff --git a/packages/react/src/ReactServer.fb.js b/packages/react/src/ReactServer.fb.js
new file mode 100644
index 00000000000..5a4ea8145d9
--- /dev/null
+++ b/packages/react/src/ReactServer.fb.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactSharedInternalsServer';
+
+import {forEach, map, count, toArray, only} from './ReactChildren';
+import {captureOwnerStack as captureOwnerStackImpl} from './ReactOwnerStack';
+import {
+  REACT_ACTIVITY_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+} from 'shared/ReactSymbols';
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+} from './jsx/ReactJSXElement';
+import {createRef} from './ReactCreateRef';
+import {use, useId, useCallback, useDebugValue, useMemo} from './ReactHooks';
+import {forwardRef} from './ReactForwardRef';
+import {lazy} from './ReactLazy';
+import {memo} from './ReactMemo';
+import {cache, cacheSignal} from './ReactCacheServer';
+import version from 'shared/ReactVersion';
+
+const Children = {
+  map,
+  forEach,
+  count,
+  toArray,
+  only,
+};
+
+let captureOwnerStack: ?() => null | string;
+if (__DEV__) {
+  captureOwnerStack = captureOwnerStackImpl;
+}
+
+export {
+  Children,
+  REACT_ACTIVITY_TYPE as Activity,
+  REACT_FRAGMENT_TYPE as Fragment,
+  REACT_PROFILER_TYPE as Profiler,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+  REACT_SUSPENSE_TYPE as Suspense,
+  REACT_VIEW_TRANSITION_TYPE as ViewTransition,
+  REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition,
+  cloneElement,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  useId,
+  useCallback,
+  useDebugValue,
+  useMemo,
+  version,
+  captureOwnerStack, // DEV-only
+  // Experimental
+  REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,
+};
diff --git a/packages/react/src/ReactServer.js b/packages/react/src/ReactServer.js
new file mode 100644
index 00000000000..81d83cbf453
--- /dev/null
+++ b/packages/react/src/ReactServer.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactSharedInternalsServer';
+
+import {forEach, map, count, toArray, only} from './ReactChildren';
+import {
+  REACT_ACTIVITY_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+} from 'shared/ReactSymbols';
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+} from './jsx/ReactJSXElement';
+import {createRef} from './ReactCreateRef';
+import {use, useId, useCallback, useDebugValue, useMemo} from './ReactHooks';
+import {forwardRef} from './ReactForwardRef';
+import {lazy} from './ReactLazy';
+import {memo} from './ReactMemo';
+import {cache, cacheSignal} from './ReactCacheServer';
+import version from 'shared/ReactVersion';
+import {captureOwnerStack} from './ReactOwnerStack';
+
+const Children = {
+  map,
+  forEach,
+  count,
+  toArray,
+  only,
+};
+
+export {
+  Children,
+  REACT_ACTIVITY_TYPE as Activity,
+  REACT_FRAGMENT_TYPE as Fragment,
+  REACT_PROFILER_TYPE as Profiler,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+  REACT_SUSPENSE_TYPE as Suspense,
+  REACT_VIEW_TRANSITION_TYPE as ViewTransition,
+  cloneElement,
+  createElement,
+  createRef,
+  use,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  cache,
+  cacheSignal,
+  useId,
+  useCallback,
+  useDebugValue,
+  useMemo,
+  version,
+  captureOwnerStack, // DEV-only
+};
diff --git a/packages/react/src/ReactSharedInternalsClient.js b/packages/react/src/ReactSharedInternalsClient.js
new file mode 100644
index 00000000000..cb957a5dfd3
--- /dev/null
+++ b/packages/react/src/ReactSharedInternalsClient.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {Transition} from './ReactStartTransition';
+import type {GestureProvider, GestureOptions} from 'shared/ReactTypes';
+
+import {enableGestureTransition} from 'shared/ReactFeatureFlags';
+
+type onStartTransitionFinish = (Transition, mixed) => void;
+type onStartGestureTransitionFinish = (
+  Transition,
+  GestureProvider,
+  ?GestureOptions,
+) => () => void;
+
+export type SharedStateClient = {
+  H: null | Dispatcher, // ReactCurrentDispatcher for Hooks
+  A: null | AsyncDispatcher, // ReactCurrentCache for Cache
+  T: null | Transition, // ReactCurrentBatchConfig for Transitions
+  S: null | onStartTransitionFinish,
+  G: null | onStartGestureTransitionFinish,
+
+  // DEV-only
+
+  // ReactCurrentActQueue
+  actQueue: null | Array<RendererTask>,
+
+  // When zero this means we're outside an async startTransition.
+  asyncTransitions: number,
+
+  // Used to reproduce behavior of `batchedUpdates` in legacy mode.
+  isBatchingLegacy: boolean,
+  didScheduleLegacyUpdate: boolean,
+
+  // Tracks whether something called `use` during the current batch of work.
+  // Determines whether we should yield to microtasks to unwrap already resolved
+  // promises without suspending.
+  didUsePromise: boolean,
+
+  // Track first uncaught error within this act
+  thrownErrors: Array<mixed>,
+
+  // ReactDebugCurrentFrame
+  getCurrentStack: null | (() => string),
+
+  // ReactOwnerStackReset
+  recentlyCreatedOwnerStacks: 0,
+};
+
+export type RendererTask = boolean => RendererTask | null;
+
+const ReactSharedInternals: SharedStateClient = ({
+  H: null,
+  A: null,
+  T: null,
+  S: null,
+}: any);
+if (enableGestureTransition) {
+  ReactSharedInternals.G = null;
+}
+
+if (__DEV__) {
+  ReactSharedInternals.actQueue = null;
+  ReactSharedInternals.asyncTransitions = 0;
+  ReactSharedInternals.isBatchingLegacy = false;
+  ReactSharedInternals.didScheduleLegacyUpdate = false;
+  ReactSharedInternals.didUsePromise = false;
+  ReactSharedInternals.thrownErrors = [];
+  // Stack implementation injected by the current renderer.
+  ReactSharedInternals.getCurrentStack = (null: null | (() => string));
+  ReactSharedInternals.recentlyCreatedOwnerStacks = 0;
+}
+
+export default ReactSharedInternals;
diff --git a/packages/react/src/ReactSharedInternalsServer.js b/packages/react/src/ReactSharedInternalsServer.js
new file mode 100644
index 00000000000..c411b77b59d
--- /dev/null
+++ b/packages/react/src/ReactSharedInternalsServer.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import type {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes';
+
+import type {
+  Reference,
+  TaintEntry,
+  RequestCleanupQueue,
+} from './ReactTaintRegistry';
+
+import {
+  TaintRegistryObjects,
+  TaintRegistryValues,
+  TaintRegistryByteLengths,
+  TaintRegistryPendingRequests,
+} from './ReactTaintRegistry';
+
+import {enableTaint} from 'shared/ReactFeatureFlags';
+
+export type SharedStateServer = {
+  H: null | Dispatcher, // ReactCurrentDispatcher for Hooks
+  A: null | AsyncDispatcher, // ReactCurrentCache for Cache
+
+  // enableTaint
+  TaintRegistryObjects: WeakMap<Reference, string>,
+  TaintRegistryValues: Map<string | bigint, TaintEntry>,
+  TaintRegistryByteLengths: Set<number>,
+  TaintRegistryPendingRequests: Set<RequestCleanupQueue>,
+
+  // DEV-only
+
+  // ReactDebugCurrentFrame
+  getCurrentStack: null | (() => string),
+
+  // ReactOwnerStackReset
+  recentlyCreatedOwnerStacks: 0,
+};
+
+export type RendererTask = boolean => RendererTask | null;
+
+const ReactSharedInternals: SharedStateServer = ({
+  H: null,
+  A: null,
+}: any);
+
+if (enableTaint) {
+  ReactSharedInternals.TaintRegistryObjects = TaintRegistryObjects;
+  ReactSharedInternals.TaintRegistryValues = TaintRegistryValues;
+  ReactSharedInternals.TaintRegistryByteLengths = TaintRegistryByteLengths;
+  ReactSharedInternals.TaintRegistryPendingRequests =
+    TaintRegistryPendingRequests;
+}
+
+if (__DEV__) {
+  // Stack implementation injected by the current renderer.
+  ReactSharedInternals.getCurrentStack = (null: null | (() => string));
+  ReactSharedInternals.recentlyCreatedOwnerStacks = 0;
+}
+
+export default ReactSharedInternals;
diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js
new file mode 100644
index 00000000000..3e353a3b615
--- /dev/null
+++ b/packages/react/src/ReactStartTransition.js
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'react-reconciler/src/ReactInternalTypes';
+import type {
+  StartTransitionOptions,
+  GestureProvider,
+  GestureOptions,
+} from 'shared/ReactTypes';
+import type {TransitionTypes} from './ReactTransitionType';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+import {
+  enableTransitionTracing,
+  enableViewTransition,
+  enableGestureTransition,
+} from 'shared/ReactFeatureFlags';
+
+import reportGlobalError from 'shared/reportGlobalError';
+
+import noop from 'shared/noop';
+
+export type Transition = {
+  types: null | TransitionTypes, // enableViewTransition
+  gesture: null | GestureProvider, // enableGestureTransition
+  name: null | string, // enableTransitionTracing only
+  startTime: number, // enableTransitionTracing only
+  _updatedFibers: Set<Fiber>, // DEV-only
+  ...
+};
+
+function releaseAsyncTransition() {
+  if (__DEV__) {
+    ReactSharedInternals.asyncTransitions--;
+  }
+}
+
+export function startTransition(
+  scope: () => void,
+  options?: StartTransitionOptions,
+): void {
+  const prevTransition = ReactSharedInternals.T;
+  const currentTransition: Transition = ({}: any);
+  if (enableViewTransition) {
+    currentTransition.types =
+      prevTransition !== null
+        ? // If we're a nested transition, we should use the same set as the parent
+          // since we're conceptually always joined into the same entangled transition.
+          // In practice, this only matters if we add transition types in the inner
+          // without setting state. In that case, the inner transition can finish
+          // without waiting for the outer.
+          prevTransition.types
+        : null;
+  }
+  if (enableGestureTransition) {
+    currentTransition.gesture = null;
+  }
+  if (enableTransitionTracing) {
+    currentTransition.name =
+      options !== undefined && options.name !== undefined ? options.name : null;
+    currentTransition.startTime = -1; // TODO: This should read the timestamp.
+  }
+  if (__DEV__) {
+    currentTransition._updatedFibers = new Set();
+  }
+  ReactSharedInternals.T = currentTransition;
+
+  try {
+    const returnValue = scope();
+    const onStartTransitionFinish = ReactSharedInternals.S;
+    if (onStartTransitionFinish !== null) {
+      onStartTransitionFinish(currentTransition, returnValue);
+    }
+    if (
+      typeof returnValue === 'object' &&
+      returnValue !== null &&
+      typeof returnValue.then === 'function'
+    ) {
+      if (__DEV__) {
+        // Keep track of the number of async transitions still running so we can warn.
+        ReactSharedInternals.asyncTransitions++;
+        returnValue.then(releaseAsyncTransition, releaseAsyncTransition);
+      }
+      returnValue.then(noop, reportGlobalError);
+    }
+  } catch (error) {
+    reportGlobalError(error);
+  } finally {
+    warnAboutTransitionSubscriptions(prevTransition, currentTransition);
+    if (prevTransition !== null && currentTransition.types !== null) {
+      // If we created a new types set in the inner transition, we transfer it to the parent
+      // since they should share the same set. They're conceptually entangled.
+      if (__DEV__) {
+        if (
+          prevTransition.types !== null &&
+          prevTransition.types !== currentTransition.types
+        ) {
+          // Just assert that assumption holds that we're not overriding anything.
+          console.error(
+            'We expected inner Transitions to have transferred the outer types set and ' +
+              'that you cannot add to the outer Transition while inside the inner.' +
+              'This is a bug in React.',
+          );
+        }
+      }
+      prevTransition.types = currentTransition.types;
+    }
+    ReactSharedInternals.T = prevTransition;
+  }
+}
+
+export function startGestureTransition(
+  provider: GestureProvider,
+  scope: () => void,
+  options?: GestureOptions & StartTransitionOptions,
+): () => void {
+  if (!enableGestureTransition) {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'startGestureTransition should not be exported when the enableGestureTransition flag is off.',
+    );
+  }
+  if (provider == null) {
+    // We enforce this at runtime even though the type also enforces it since we
+    // use null as a signal internally so it would lead it to be treated as a
+    // regular transition otherwise.
+    throw new Error(
+      'A Timeline is required as the first argument to startGestureTransition.',
+    );
+  }
+  const prevTransition = ReactSharedInternals.T;
+  const currentTransition: Transition = ({}: any);
+  if (enableViewTransition) {
+    currentTransition.types = null;
+  }
+  if (enableGestureTransition) {
+    currentTransition.gesture = provider;
+  }
+  if (enableTransitionTracing) {
+    currentTransition.name =
+      options !== undefined && options.name !== undefined ? options.name : null;
+    currentTransition.startTime = -1; // TODO: This should read the timestamp.
+  }
+  if (__DEV__) {
+    currentTransition._updatedFibers = new Set();
+  }
+  ReactSharedInternals.T = currentTransition;
+
+  try {
+    const returnValue = scope();
+    if (__DEV__) {
+      if (
+        typeof returnValue === 'object' &&
+        returnValue !== null &&
+        typeof returnValue.then === 'function'
+      ) {
+        console.error(
+          'Cannot use an async function in startGestureTransition. It must be able to start immediately.',
+        );
+      }
+    }
+    const onStartGestureTransitionFinish = ReactSharedInternals.G;
+    if (onStartGestureTransitionFinish !== null) {
+      return onStartGestureTransitionFinish(
+        currentTransition,
+        provider,
+        options,
+      );
+    }
+  } catch (error) {
+    reportGlobalError(error);
+  } finally {
+    ReactSharedInternals.T = prevTransition;
+  }
+  return noop;
+}
+
+function warnAboutTransitionSubscriptions(
+  prevTransition: Transition | null,
+  currentTransition: Transition,
+) {
+  if (__DEV__) {
+    if (prevTransition === null && currentTransition._updatedFibers) {
+      const updatedFibersCount = currentTransition._updatedFibers.size;
+      currentTransition._updatedFibers.clear();
+      if (updatedFibersCount > 10) {
+        console.warn(
+          'Detected a large number of updates inside startTransition. ' +
+            'If this is due to a subscription please re-write it to use React provided hooks. ' +
+            'Otherwise concurrent mode guarantees are off the table.',
+        );
+      }
+    }
+  }
+}
diff --git a/packages/react/src/ReactTaint.js b/packages/react/src/ReactTaint.js
new file mode 100644
index 00000000000..99bf73ac254
--- /dev/null
+++ b/packages/react/src/ReactTaint.js
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {enableTaint} from 'shared/ReactFeatureFlags';
+
+import getPrototypeOf from 'shared/getPrototypeOf';
+
+import binaryToComparableString from 'shared/binaryToComparableString';
+
+import ReactSharedInternals from './ReactSharedInternalsServer';
+const {
+  TaintRegistryObjects,
+  TaintRegistryValues,
+  TaintRegistryByteLengths,
+  TaintRegistryPendingRequests,
+} = ReactSharedInternals;
+
+interface Reference {}
+
+// This is the shared constructor of all typed arrays.
+const TypedArrayConstructor = getPrototypeOf(Uint32Array.prototype).constructor;
+
+const defaultMessage =
+  'A tainted value was attempted to be serialized to a Client Component or Action closure. ' +
+  'This would leak it to the client.';
+
+function cleanup(entryValue: string | bigint): void {
+  const entry = TaintRegistryValues.get(entryValue);
+  if (entry !== undefined) {
+    TaintRegistryPendingRequests.forEach(function (requestQueue) {
+      requestQueue.push(entryValue);
+      entry.count++;
+    });
+    if (entry.count === 1) {
+      TaintRegistryValues.delete(entryValue);
+    } else {
+      entry.count--;
+    }
+  }
+}
+
+// If FinalizationRegistry doesn't exist, we assume that objects life forever.
+// E.g. the whole VM is just the lifetime of a request.
+const finalizationRegistry =
+  typeof FinalizationRegistry === 'function'
+    ? new FinalizationRegistry(cleanup)
+    : null;
+
+export function taintUniqueValue(
+  message: ?string,
+  lifetime: Reference,
+  value: string | bigint | $ArrayBufferView,
+): void {
+  if (!enableTaint) {
+    throw new Error('Not implemented.');
+  }
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  message = '' + (message || defaultMessage);
+  if (
+    lifetime === null ||
+    (typeof lifetime !== 'object' && typeof lifetime !== 'function')
+  ) {
+    throw new Error(
+      'To taint a value, a lifetime must be defined by passing an object that holds ' +
+        'the value.',
+    );
+  }
+  let entryValue: string | bigint;
+  if (typeof value === 'string' || typeof value === 'bigint') {
+    // Use as is.
+    entryValue = value;
+  } else if (
+    value instanceof TypedArrayConstructor ||
+    value instanceof DataView
+  ) {
+    // For now, we just convert binary data to a string so that we can just use the native
+    // hashing in the Map implementation. It doesn't really matter what form the string
+    // take as long as it's the same when we look it up.
+    // We're not too worried about collisions since this should be a high entropy value.
+    TaintRegistryByteLengths.add(value.byteLength);
+    entryValue = binaryToComparableString(value);
+  } else {
+    const kind = value === null ? 'null' : typeof value;
+    if (kind === 'object' || kind === 'function') {
+      throw new Error(
+        'taintUniqueValue cannot taint objects or functions. Try taintObjectReference instead.',
+      );
+    }
+    throw new Error(
+      'Cannot taint a ' +
+        kind +
+        ' because the value is too general and not unique enough to block globally.',
+    );
+  }
+  const existingEntry = TaintRegistryValues.get(entryValue);
+  if (existingEntry === undefined) {
+    TaintRegistryValues.set(entryValue, {
+      message,
+      count: 1,
+    });
+  } else {
+    existingEntry.count++;
+  }
+  if (finalizationRegistry !== null) {
+    finalizationRegistry.register(lifetime, entryValue);
+  }
+}
+
+export function taintObjectReference(
+  message: ?string,
+  object: Reference,
+): void {
+  if (!enableTaint) {
+    throw new Error('Not implemented.');
+  }
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  message = '' + (message || defaultMessage);
+  if (typeof object === 'string' || typeof object === 'bigint') {
+    throw new Error(
+      'Only objects or functions can be passed to taintObjectReference. Try taintUniqueValue instead.',
+    );
+  }
+  if (
+    object === null ||
+    (typeof object !== 'object' && typeof object !== 'function')
+  ) {
+    throw new Error(
+      'Only objects or functions can be passed to taintObjectReference.',
+    );
+  }
+  TaintRegistryObjects.set(object, message);
+}
diff --git a/packages/react/src/ReactTaintRegistry.js b/packages/react/src/ReactTaintRegistry.js
new file mode 100644
index 00000000000..1ea8172be1f
--- /dev/null
+++ b/packages/react/src/ReactTaintRegistry.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 interface Reference {}
+
+export type TaintEntry = {
+  message: string,
+  count: number,
+};
+
+export const TaintRegistryObjects: WeakMap<Reference, string> = new WeakMap();
+export const TaintRegistryValues: Map<string | bigint, TaintEntry> = new Map();
+// Byte lengths of all binary values we've ever seen. We don't both refcounting this.
+// We expect to see only a few lengths here such as the length of token.
+export const TaintRegistryByteLengths: Set<number> = new Set();
+
+// When a value is finalized, it means that it has been removed from any global caches.
+// No future requests can get a handle on it but any ongoing requests can still have
+// a handle on it. It's still tainted until that happens.
+export type RequestCleanupQueue = Array<string | bigint>;
+export const TaintRegistryPendingRequests: Set<RequestCleanupQueue> = new Set();
diff --git a/packages/react/src/ReactTransitionType.js b/packages/react/src/ReactTransitionType.js
new file mode 100644
index 00000000000..80a785c2b1b
--- /dev/null
+++ b/packages/react/src/ReactTransitionType.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  enableViewTransition,
+  enableGestureTransition,
+} from 'shared/ReactFeatureFlags';
+import {startTransition} from './ReactStartTransition';
+
+export type TransitionTypes = Array<string>;
+
+export function addTransitionType(type: string): void {
+  if (enableViewTransition) {
+    const transition = ReactSharedInternals.T;
+    if (transition !== null) {
+      const transitionTypes = transition.types;
+      if (transitionTypes === null) {
+        transition.types = [type];
+      } else if (transitionTypes.indexOf(type) === -1) {
+        transitionTypes.push(type);
+      }
+    } else {
+      // We're in the async gap. Simulate an implicit startTransition around it.
+      if (__DEV__) {
+        if (ReactSharedInternals.asyncTransitions === 0) {
+          if (enableGestureTransition) {
+            console.error(
+              'addTransitionType can only be called inside a `startTransition()` ' +
+                'or `startGestureTransition()` callback. ' +
+                'It must be associated with a specific Transition.',
+            );
+          } else {
+            console.error(
+              'addTransitionType can only be called inside a `startTransition()` ' +
+                'callback. It must be associated with a specific Transition.',
+            );
+          }
+        }
+      }
+      startTransition(addTransitionType.bind(null, type));
+    }
+  }
+}
diff --git a/packages/react/src/__tests__/React-hooks-arity.js b/packages/react/src/__tests__/React-hooks-arity.js
new file mode 100644
index 00000000000..0ba63428d39
--- /dev/null
+++ b/packages/react/src/__tests__/React-hooks-arity.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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;
+
+describe('arity', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+  });
+
+  it("ensure useState setter's arity is correct", () => {
+    function Component() {
+      const [, setState] = React.useState(() => 'Halo!');
+
+      expect(setState.length).toBe(1);
+      return null;
+    }
+
+    ReactNoop.render(<Component />);
+  });
+
+  it("ensure useReducer setter's arity is correct", () => {
+    function Component() {
+      const [, dispatch] = React.useReducer(() => 'Halo!');
+
+      expect(dispatch.length).toBe(1);
+      return null;
+    }
+
+    ReactNoop.render(<Component />);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
new file mode 100644
index 00000000000..8690b31dbe2
--- /dev/null
+++ b/packages/react/src/__tests__/ReactChildren-test.js
@@ -0,0 +1,1227 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactChildren', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  it('should support identity for simple', () => {
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid, index) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const simpleKid = <span key="simple" />;
+
+    // First pass children into a component to fully simulate what happens when
+    // using structures that arrive from transforms.
+
+    const instance = <div>{simpleKid}</div>;
+    React.Children.forEach(instance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
+    callback.mockClear();
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
+    expect(mappedChildren[0]).toEqual(<span key=".$simple" />);
+  });
+
+  it('should support Portal components', () => {
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid, index) {
+      expect(this).toBe(context);
+      return kid;
+    });
+    const ReactDOM = require('react-dom');
+    const portalContainer = document.createElement('div');
+
+    const simpleChild = <span key="simple" />;
+    const reactPortal = ReactDOM.createPortal(simpleChild, portalContainer);
+
+    const parentInstance = <div>{reactPortal}</div>;
+    React.Children.forEach(parentInstance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(reactPortal, 0);
+    callback.mockClear();
+    const mappedChildren = React.Children.map(
+      parentInstance.props.children,
+      callback,
+      context,
+    );
+    expect(callback).toHaveBeenCalledWith(reactPortal, 0);
+    expect(mappedChildren[0]).toEqual(reactPortal);
+  });
+
+  it('should treat single arrayless child as being in array', () => {
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid, index) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const simpleKid = <span />;
+    const instance = <div>{simpleKid}</div>;
+    React.Children.forEach(instance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
+    callback.mockClear();
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
+    expect(mappedChildren[0]).toEqual(<span key=".0" />);
+  });
+
+  it('should treat single child in array as expected', () => {
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid, index) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const simpleKid = <span key="simple" />;
+    const instance = <div>{[simpleKid]}</div>;
+    React.Children.forEach(instance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
+    callback.mockClear();
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
+    expect(mappedChildren[0]).toEqual(<span key=".$simple" />);
+  });
+
+  it('should be called for each child', () => {
+    const zero = <div key="keyZero" />;
+    const one = null;
+    const two = <div key="keyTwo" />;
+    const three = null;
+    const four = <div key="keyFour" />;
+    const context = {};
+
+    const callback = jest.fn().mockImplementation(function (kid) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const instance = (
+      <div>
+        {zero}
+        {one}
+        {two}
+        {three}
+        {four}
+      </div>
+    );
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledWith(zero, 0);
+      expect(callback).toHaveBeenCalledWith(one, 1);
+      expect(callback).toHaveBeenCalledWith(two, 2);
+      expect(callback).toHaveBeenCalledWith(three, 3);
+      expect(callback).toHaveBeenCalledWith(four, 4);
+      callback.mockClear();
+    }
+
+    React.Children.forEach(instance.props.children, callback, context);
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual([
+      <div key=".$keyZero" />,
+      <div key=".$keyTwo" />,
+      <div key=".$keyFour" />,
+    ]);
+  });
+
+  it('should traverse children of different kinds', () => {
+    const div = <div key="divNode" />;
+    const span = <span key="spanNode" />;
+    const a = <a key="aNode" />;
+
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const instance = (
+      <div>
+        {div}
+        {[[span]]}
+        {[a]}
+        {'string'}
+        {1234}
+        {true}
+        {false}
+        {null}
+        {undefined}
+        {9n}
+      </div>
+    );
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledTimes(10);
+      expect(callback).toHaveBeenCalledWith(div, 0);
+      expect(callback).toHaveBeenCalledWith(span, 1);
+      expect(callback).toHaveBeenCalledWith(a, 2);
+      expect(callback).toHaveBeenCalledWith('string', 3);
+      expect(callback).toHaveBeenCalledWith(1234, 4);
+      expect(callback).toHaveBeenCalledWith(null, 5);
+      expect(callback).toHaveBeenCalledWith(null, 6);
+      expect(callback).toHaveBeenCalledWith(null, 7);
+      expect(callback).toHaveBeenCalledWith(null, 8);
+      expect(callback).toHaveBeenCalledWith(9n, 9);
+      callback.mockClear();
+    }
+
+    React.Children.forEach(instance.props.children, callback, context);
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual([
+      <div key=".$divNode" />,
+      <span key=".1:0:$spanNode" />,
+      <a key=".2:$aNode" />,
+      'string',
+      1234,
+      9n,
+    ]);
+  });
+
+  it('should be called for each child in nested structure', () => {
+    const zero = <div key="keyZero" />;
+    const one = null;
+    const two = <div key="keyTwo" />;
+    const three = null;
+    const four = <div key="keyFour" />;
+    const five = <div key="keyFive" />;
+
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid) {
+      return kid;
+    });
+
+    const instance = <div>{[[zero, one, two], [three, four], five]}</div>;
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledTimes(6);
+      expect(callback).toHaveBeenCalledWith(zero, 0);
+      expect(callback).toHaveBeenCalledWith(one, 1);
+      expect(callback).toHaveBeenCalledWith(two, 2);
+      expect(callback).toHaveBeenCalledWith(three, 3);
+      expect(callback).toHaveBeenCalledWith(four, 4);
+      expect(callback).toHaveBeenCalledWith(five, 5);
+      callback.mockClear();
+    }
+
+    React.Children.forEach(instance.props.children, callback, context);
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual([
+      <div key=".0:$keyZero" />,
+      <div key=".0:$keyTwo" />,
+      <div key=".1:$keyFour" />,
+      <div key=".$keyFive" />,
+    ]);
+  });
+
+  it('should retain key across two mappings', () => {
+    const zeroForceKey = <div key="keyZero" />;
+    const oneForceKey = <div key="keyOne" />;
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const forcedKeys = (
+      <div>
+        {zeroForceKey}
+        {oneForceKey}
+      </div>
+    );
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledWith(zeroForceKey, 0);
+      expect(callback).toHaveBeenCalledWith(oneForceKey, 1);
+      callback.mockClear();
+    }
+
+    React.Children.forEach(forcedKeys.props.children, callback, context);
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      forcedKeys.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual([
+      <div key=".$keyZero" />,
+      <div key=".$keyOne" />,
+    ]);
+  });
+
+  it('should be called for each child in an iterable without keys', async () => {
+    const threeDivIterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            if (i++ < 3) {
+              return {value: <div />, done: false};
+            } else {
+              return {value: undefined, done: true};
+            }
+          },
+        };
+      },
+    };
+
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledTimes(3);
+      expect(callback).toHaveBeenCalledWith(<div />, 0);
+      expect(callback).toHaveBeenCalledWith(<div />, 1);
+      expect(callback).toHaveBeenCalledWith(<div />, 2);
+      callback.mockClear();
+    }
+
+    const instance = <div>{threeDivIterable}</div>;
+
+    React.Children.forEach(instance.props.children, callback, context);
+
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual([
+      <div key=".0" />,
+      <div key=".1" />,
+      <div key=".2" />,
+    ]);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(instance);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the top-level render call using <div>. It was passed a child from div.' +
+        ' See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('should be called for each child in an iterable with keys', () => {
+    const threeDivIterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            if (i++ < 3) {
+              return {value: <div key={'#' + i} />, done: false};
+            } else {
+              return {value: undefined, done: true};
+            }
+          },
+        };
+      },
+    };
+
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    const instance = <div>{threeDivIterable}</div>;
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledTimes(3);
+      expect(callback).toHaveBeenCalledWith(<div key="#1" />, 0);
+      expect(callback).toHaveBeenCalledWith(<div key="#2" />, 1);
+      expect(callback).toHaveBeenCalledWith(<div key="#3" />, 2);
+      callback.mockClear();
+    }
+
+    React.Children.forEach(instance.props.children, callback, context);
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual([
+      <div key=".$#1" />,
+      <div key=".$#2" />,
+      <div key=".$#3" />,
+    ]);
+  });
+
+  it('should not enumerate enumerable numbers (#4776)', () => {
+    /*eslint-disable no-extend-native */
+    Number.prototype['@@iterator'] = function () {
+      throw new Error('number iterator called');
+    };
+    /*eslint-enable no-extend-native */
+
+    try {
+      const instance = (
+        <div>
+          {5}
+          {12}
+          {13}
+        </div>
+      );
+
+      const context = {};
+      const callback = jest.fn().mockImplementation(function (kid) {
+        expect(this).toBe(context);
+        return kid;
+      });
+
+      const assertCalls = function () {
+        expect(callback).toHaveBeenCalledTimes(3);
+        expect(callback).toHaveBeenCalledWith(5, 0);
+        expect(callback).toHaveBeenCalledWith(12, 1);
+        expect(callback).toHaveBeenCalledWith(13, 2);
+        callback.mockClear();
+      };
+
+      React.Children.forEach(instance.props.children, callback, context);
+      assertCalls();
+
+      const mappedChildren = React.Children.map(
+        instance.props.children,
+        callback,
+        context,
+      );
+      assertCalls();
+      expect(mappedChildren).toEqual([5, 12, 13]);
+    } finally {
+      delete Number.prototype['@@iterator'];
+    }
+  });
+
+  it('should allow extension of native prototypes', () => {
+    /*eslint-disable no-extend-native */
+    String.prototype.key = 'react';
+    Number.prototype.key = 'rocks';
+    /*eslint-enable no-extend-native */
+
+    const instance = (
+      <div>
+        {'a'}
+        {13}
+      </div>
+    );
+
+    const context = {};
+    const callback = jest.fn().mockImplementation(function (kid) {
+      expect(this).toBe(context);
+      return kid;
+    });
+
+    function assertCalls() {
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(callback).toHaveBeenCalledWith('a', 0);
+      expect(callback).toHaveBeenCalledWith(13, 1);
+      callback.mockClear();
+    }
+
+    React.Children.forEach(instance.props.children, callback, context);
+    assertCalls();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      context,
+    );
+    assertCalls();
+    expect(mappedChildren).toEqual(['a', 13]);
+
+    delete String.prototype.key;
+    delete Number.prototype.key;
+  });
+
+  it('should pass key to returned component', () => {
+    const mapFn = function (kid, index) {
+      return <div>{kid}</div>;
+    };
+
+    const simpleKid = <span key="simple" />;
+
+    const instance = <div>{simpleKid}</div>;
+    const mappedChildren = React.Children.map(instance.props.children, mapFn);
+
+    expect(React.Children.count(mappedChildren)).toBe(1);
+    expect(mappedChildren[0]).not.toBe(simpleKid);
+    expect(mappedChildren[0].props.children).toBe(simpleKid);
+    expect(mappedChildren[0].key).toBe('.$simple');
+  });
+
+  it('should invoke callback with the right context', () => {
+    let lastContext;
+    const callback = function (kid, index) {
+      lastContext = this;
+      return this;
+    };
+
+    // TODO: Use an object to test, after non-object fragments has fully landed.
+    const scopeTester = 'scope tester';
+
+    const simpleKid = <span key="simple" />;
+    const instance = <div>{simpleKid}</div>;
+    React.Children.forEach(instance.props.children, callback, scopeTester);
+    expect(lastContext).toBe(scopeTester);
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+      scopeTester,
+    );
+
+    expect(React.Children.count(mappedChildren)).toBe(1);
+    expect(mappedChildren[0]).toBe(scopeTester);
+  });
+
+  it('should be called for each child in array', () => {
+    const zero = <div key="keyZero" />;
+    const one = null;
+    const two = <div key="keyTwo" />;
+    const three = null;
+    const four = <div key="keyFour" />;
+
+    const mapped = [
+      <div key="giraffe" />, // Key should be joined to obj key
+      null, // Key should be added even if we don't supply it!
+      <div />, // Key should be added even if not supplied!
+      <span />, // Map from null to something.
+      <div key="keyFour" />,
+    ];
+    const callback = jest.fn().mockImplementation(function (kid, index) {
+      return mapped[index];
+    });
+
+    const instance = (
+      <div>
+        {zero}
+        {one}
+        {two}
+        {three}
+        {four}
+      </div>
+    );
+
+    React.Children.forEach(instance.props.children, callback);
+    expect(callback).toHaveBeenCalledWith(zero, 0);
+    expect(callback).toHaveBeenCalledWith(one, 1);
+    expect(callback).toHaveBeenCalledWith(two, 2);
+    expect(callback).toHaveBeenCalledWith(three, 3);
+    expect(callback).toHaveBeenCalledWith(four, 4);
+    callback.mockClear();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+    );
+    expect(callback).toHaveBeenCalledTimes(5);
+    expect(React.Children.count(mappedChildren)).toBe(4);
+    // Keys default to indices.
+    expect([
+      mappedChildren[0].key,
+      mappedChildren[1].key,
+      mappedChildren[2].key,
+      mappedChildren[3].key,
+    ]).toEqual(['giraffe/.$keyZero', '.$keyTwo', '.3', '.$keyFour']);
+
+    expect(callback).toHaveBeenCalledWith(zero, 0);
+    expect(callback).toHaveBeenCalledWith(one, 1);
+    expect(callback).toHaveBeenCalledWith(two, 2);
+    expect(callback).toHaveBeenCalledWith(three, 3);
+    expect(callback).toHaveBeenCalledWith(four, 4);
+
+    expect(mappedChildren[0]).toEqual(<div key="giraffe/.$keyZero" />);
+    expect(mappedChildren[1]).toEqual(<div key=".$keyTwo" />);
+    expect(mappedChildren[2]).toEqual(<span key=".3" />);
+    expect(mappedChildren[3]).toEqual(<div key=".$keyFour" />);
+  });
+
+  it('should be called for each child in nested structure with mapping', () => {
+    const zero = <div key="keyZero" />;
+    const one = null;
+    const two = <div key="keyTwo" />;
+    const three = null;
+    const four = <div key="keyFour" />;
+    const five = <div key="keyFive" />;
+
+    const zeroMapped = <div key="giraffe" />; // Key should be overridden
+    const twoMapped = <div />; // Key should be added even if not supplied!
+    const fourMapped = <div key="keyFour" />;
+    const fiveMapped = <div />;
+
+    const callback = jest.fn().mockImplementation(function (kid) {
+      switch (kid) {
+        case zero:
+          return zeroMapped;
+        case two:
+          return twoMapped;
+        case four:
+          return fourMapped;
+        case five:
+          return fiveMapped;
+        default:
+          return kid;
+      }
+    });
+
+    const frag = [[zero, one, two], [three, four], five];
+    const instance = <div>{[frag]}</div>;
+
+    React.Children.forEach(instance.props.children, callback);
+    expect(callback).toHaveBeenCalledTimes(6);
+    expect(callback).toHaveBeenCalledWith(zero, 0);
+    expect(callback).toHaveBeenCalledWith(one, 1);
+    expect(callback).toHaveBeenCalledWith(two, 2);
+    expect(callback).toHaveBeenCalledWith(three, 3);
+    expect(callback).toHaveBeenCalledWith(four, 4);
+    expect(callback).toHaveBeenCalledWith(five, 5);
+    callback.mockClear();
+
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      callback,
+    );
+    expect(callback).toHaveBeenCalledTimes(6);
+    expect(callback).toHaveBeenCalledWith(zero, 0);
+    expect(callback).toHaveBeenCalledWith(one, 1);
+    expect(callback).toHaveBeenCalledWith(two, 2);
+    expect(callback).toHaveBeenCalledWith(three, 3);
+    expect(callback).toHaveBeenCalledWith(four, 4);
+    expect(callback).toHaveBeenCalledWith(five, 5);
+
+    expect(React.Children.count(mappedChildren)).toBe(4);
+    // Keys default to indices.
+    expect([
+      mappedChildren[0].key,
+      mappedChildren[1].key,
+      mappedChildren[2].key,
+      mappedChildren[3].key,
+    ]).toEqual([
+      'giraffe/.0:0:$keyZero',
+      '.0:0:$keyTwo',
+      '.0:1:$keyFour',
+      '.0:$keyFive',
+    ]);
+
+    expect(mappedChildren[0]).toEqual(<div key="giraffe/.0:0:$keyZero" />);
+    expect(mappedChildren[1]).toEqual(<div key=".0:0:$keyTwo" />);
+    expect(mappedChildren[2]).toEqual(<div key=".0:1:$keyFour" />);
+    expect(mappedChildren[3]).toEqual(<div key=".0:$keyFive" />);
+  });
+
+  it('should retain key across two mappings with conditions', () => {
+    const zeroForceKey = <div key="keyZero" />;
+    const oneForceKey = <div key="keyOne" />;
+
+    // Key should be joined to object key
+    const zeroForceKeyMapped = <div key="giraffe" />;
+    // Key should be added even if we don't supply it!
+    const oneForceKeyMapped = <div />;
+
+    const mapFn = function (kid, index) {
+      return index === 0 ? zeroForceKeyMapped : oneForceKeyMapped;
+    };
+
+    const forcedKeys = (
+      <div>
+        {zeroForceKey}
+        {oneForceKey}
+      </div>
+    );
+
+    const expectedForcedKeys = ['giraffe/.$keyZero', '.$keyOne'];
+    const mappedChildrenForcedKeys = React.Children.map(
+      forcedKeys.props.children,
+      mapFn,
+    );
+    const mappedForcedKeys = mappedChildrenForcedKeys.map(c => c.key);
+    expect(mappedForcedKeys).toEqual(expectedForcedKeys);
+
+    const expectedRemappedForcedKeys = [
+      'giraffe/.$giraffe/.$keyZero',
+      '.$.$keyOne',
+    ];
+    const remappedChildrenForcedKeys = React.Children.map(
+      mappedChildrenForcedKeys,
+      mapFn,
+    );
+    expect(remappedChildrenForcedKeys.map(c => c.key)).toEqual(
+      expectedRemappedForcedKeys,
+    );
+  });
+
+  it('should not throw if key provided is a dupe with array key', () => {
+    const zero = <div />;
+    const one = <div key="0" />;
+
+    const mapFn = function () {
+      return null;
+    };
+
+    const instance = (
+      <div>
+        {zero}
+        {one}
+      </div>
+    );
+
+    expect(function () {
+      React.Children.map(instance.props.children, mapFn);
+    }).not.toThrow();
+  });
+
+  it('should use the same key for a cloned element', () => {
+    const instance = (
+      <div>
+        <div />
+      </div>
+    );
+
+    const mapped = React.Children.map(
+      instance.props.children,
+      element => element,
+    );
+
+    const mappedWithClone = React.Children.map(
+      instance.props.children,
+      element => React.cloneElement(element),
+    );
+
+    expect(mapped[0].key).toBe(mappedWithClone[0].key);
+  });
+
+  it('should use the same key for a cloned element with key', () => {
+    const instance = (
+      <div>
+        <div key="unique" />
+      </div>
+    );
+
+    const mapped = React.Children.map(
+      instance.props.children,
+      element => element,
+    );
+
+    const mappedWithClone = React.Children.map(
+      instance.props.children,
+      element => React.cloneElement(element, {key: 'unique'}),
+    );
+
+    expect(mapped[0].key).toBe(mappedWithClone[0].key);
+  });
+
+  it('should return 0 for null children', () => {
+    const numberOfChildren = React.Children.count(null);
+    expect(numberOfChildren).toBe(0);
+  });
+
+  it('should return 0 for undefined children', () => {
+    const numberOfChildren = React.Children.count(undefined);
+    expect(numberOfChildren).toBe(0);
+  });
+
+  it('should return 1 for single child', () => {
+    const simpleKid = <span key="simple" />;
+    const instance = <div>{simpleKid}</div>;
+    const numberOfChildren = React.Children.count(instance.props.children);
+    expect(numberOfChildren).toBe(1);
+  });
+
+  it('should count the number of children in flat structure', () => {
+    const zero = <div key="keyZero" />;
+    const one = null;
+    const two = <div key="keyTwo" />;
+    const three = null;
+    const four = <div key="keyFour" />;
+
+    const instance = (
+      <div>
+        {zero}
+        {one}
+        {two}
+        {three}
+        {four}
+      </div>
+    );
+    const numberOfChildren = React.Children.count(instance.props.children);
+    expect(numberOfChildren).toBe(5);
+  });
+
+  it('should count the number of children in nested structure', () => {
+    const zero = <div key="keyZero" />;
+    const one = null;
+    const two = <div key="keyTwo" />;
+    const three = null;
+    const four = <div key="keyFour" />;
+    const five = <div key="keyFive" />;
+
+    const instance = (
+      <div>{[[[zero, one, two], [three, four], five], null]}</div>
+    );
+    const numberOfChildren = React.Children.count(instance.props.children);
+    expect(numberOfChildren).toBe(7);
+  });
+
+  it('should flatten children to an array', () => {
+    expect(React.Children.toArray(undefined)).toEqual([]);
+    expect(React.Children.toArray(null)).toEqual([]);
+
+    expect(React.Children.toArray(<div />).length).toBe(1);
+    expect(React.Children.toArray([<div />]).length).toBe(1);
+    expect(React.Children.toArray(<div />)[0].key).toBe(
+      React.Children.toArray([<div />])[0].key,
+    );
+
+    const flattened = React.Children.toArray([
+      [<div key="apple" />, <div key="banana" />, <div key="camel" />],
+      [<div key="banana" />, <div key="camel" />, <div key="deli" />],
+    ]);
+    expect(flattened.length).toBe(6);
+    expect(flattened[1].key).toContain('banana');
+    expect(flattened[3].key).toContain('banana');
+    expect(flattened[1].key).not.toBe(flattened[3].key);
+
+    const reversed = React.Children.toArray([
+      [<div key="camel" />, <div key="banana" />, <div key="apple" />],
+      [<div key="deli" />, <div key="camel" />, <div key="banana" />],
+    ]);
+    expect(flattened[0].key).toBe(reversed[2].key);
+    expect(flattened[1].key).toBe(reversed[1].key);
+    expect(flattened[2].key).toBe(reversed[0].key);
+    expect(flattened[3].key).toBe(reversed[5].key);
+    expect(flattened[4].key).toBe(reversed[4].key);
+    expect(flattened[5].key).toBe(reversed[3].key);
+
+    // null/undefined/bool are all omitted
+    expect(React.Children.toArray([1, 'two', null, undefined, true])).toEqual([
+      1,
+      'two',
+    ]);
+  });
+
+  it('warns for mapped list children without keys', async () => {
+    spyOnDev(console, 'error').mockImplementation(() => {});
+    function ComponentRenderingMappedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => (
+            <div />
+          ))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingMappedChildren>
+          {[<div />]}
+        </ComponentRenderingMappedChildren>,
+      );
+    });
+    if (__DEV__) {
+      const calls = console.error.mock.calls;
+      console.error.mockRestore();
+      expect(calls.length).toBe(1);
+      expect(calls[0][0]).toEqual(
+        'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
+      );
+    }
+  });
+
+  it('does not warn for mapped static children without keys', async () => {
+    function ComponentRenderingMappedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => (
+            <div />
+          ))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingMappedChildren>
+          <div />
+          <div />
+        </ComponentRenderingMappedChildren>,
+      );
+    });
+  });
+
+  it('warns for cloned list children without keys', async () => {
+    function ComponentRenderingClonedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => React.cloneElement(child))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingClonedChildren>
+          {[<div />]}
+        </ComponentRenderingClonedChildren>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `ComponentRenderingClonedChildren`.' +
+        ' See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('does not warn for cloned static children without keys', async () => {
+    function ComponentRenderingClonedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => React.cloneElement(child))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingClonedChildren>
+          <div />
+          <div />
+        </ComponentRenderingClonedChildren>,
+      );
+    });
+  });
+
+  it('warns for flattened list children without keys', async () => {
+    function ComponentRenderingFlattenedChildren({children}) {
+      return <div>{React.Children.toArray(children)}</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingFlattenedChildren>
+          {[<div />]}
+        </ComponentRenderingFlattenedChildren>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `ComponentRenderingFlattenedChildren`.' +
+        ' See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('does not warn for flattened static children without keys', async () => {
+    function ComponentRenderingFlattenedChildren({children}) {
+      return <div>{React.Children.toArray(children)}</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingFlattenedChildren>
+          <div />
+          <div />
+        </ComponentRenderingFlattenedChildren>,
+      );
+    });
+  });
+
+  it('does not throw on children without `_store`', async () => {
+    function ComponentRenderingFlattenedChildren({children}) {
+      return <div>{React.Children.toArray(children)}</div>;
+    }
+
+    const source = <div />;
+    const productionElement = {};
+    Object.entries(source).forEach(([key, value]) => {
+      if (key !== '_owner' && key !== '_store') {
+        productionElement[key] = value;
+      }
+    });
+    Object.freeze(productionElement);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentRenderingFlattenedChildren>
+          {productionElement}
+        </ComponentRenderingFlattenedChildren>,
+      );
+    });
+  });
+
+  it('should escape keys', () => {
+    const zero = <div key="1" />;
+    const one = <div key="1=::=2" />;
+    const instance = (
+      <div>
+        {zero}
+        {one}
+      </div>
+    );
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      kid => kid,
+    );
+    expect(mappedChildren).toEqual([
+      <div key=".$1" />,
+      <div key=".$1=0=2=2=02" />,
+    ]);
+  });
+
+  it('should combine keys when map returns an array', () => {
+    const instance = (
+      <div>
+        <div key="a" />
+        {false}
+        <div key="b" />
+        <p />
+      </div>
+    );
+    const mappedChildren = React.Children.map(
+      instance.props.children,
+      // Try a few things: keyed, unkeyed, hole, and a cloned element.
+      kid => [
+        <span key="x" />,
+        null,
+        <span key="y" />,
+        kid,
+        kid && React.cloneElement(kid, {key: 'z'}),
+        <hr />,
+      ],
+    );
+    expect(mappedChildren.length).toBe(18);
+
+    // <div key="a">
+    expect(mappedChildren[0].type).toBe('span');
+    expect(mappedChildren[0].key).toBe('.$a/.$x');
+    expect(mappedChildren[1].type).toBe('span');
+    expect(mappedChildren[1].key).toBe('.$a/.$y');
+    expect(mappedChildren[2].type).toBe('div');
+    expect(mappedChildren[2].key).toBe('.$a/.$a');
+    expect(mappedChildren[3].type).toBe('div');
+    expect(mappedChildren[3].key).toBe('.$a/.$z');
+    expect(mappedChildren[4].type).toBe('hr');
+    expect(mappedChildren[4].key).toBe('.$a/.5');
+
+    // false
+    expect(mappedChildren[5].type).toBe('span');
+    expect(mappedChildren[5].key).toBe('.1/.$x');
+    expect(mappedChildren[6].type).toBe('span');
+    expect(mappedChildren[6].key).toBe('.1/.$y');
+    expect(mappedChildren[7].type).toBe('hr');
+    expect(mappedChildren[7].key).toBe('.1/.5');
+
+    // <div key="b">
+    expect(mappedChildren[8].type).toBe('span');
+    expect(mappedChildren[8].key).toBe('.$b/.$x');
+    expect(mappedChildren[9].type).toBe('span');
+    expect(mappedChildren[9].key).toBe('.$b/.$y');
+    expect(mappedChildren[10].type).toBe('div');
+    expect(mappedChildren[10].key).toBe('.$b/.$b');
+    expect(mappedChildren[11].type).toBe('div');
+    expect(mappedChildren[11].key).toBe('.$b/.$z');
+    expect(mappedChildren[12].type).toBe('hr');
+    expect(mappedChildren[12].key).toBe('.$b/.5');
+
+    // <p>
+    expect(mappedChildren[13].type).toBe('span');
+    expect(mappedChildren[13].key).toBe('.3/.$x');
+    expect(mappedChildren[14].type).toBe('span');
+    expect(mappedChildren[14].key).toBe('.3/.$y');
+    expect(mappedChildren[15].type).toBe('p');
+    expect(mappedChildren[15].key).toBe('.3/.3');
+    expect(mappedChildren[16].type).toBe('p');
+    expect(mappedChildren[16].key).toBe('.3/.$z');
+    expect(mappedChildren[17].type).toBe('hr');
+    expect(mappedChildren[17].key).toBe('.3/.5');
+  });
+
+  it('should throw on object', () => {
+    expect(function () {
+      React.Children.forEach({a: 1, b: 2}, function () {}, null);
+    }).toThrowError(
+      'Objects are not valid as a React child (found: object with keys ' +
+        '{a, b}).' +
+        (__DEV__
+          ? ' If you meant to render a collection of children, use an ' +
+            'array instead.'
+          : ''),
+    );
+  });
+
+  it('should render React.lazy after suspending', async () => {
+    const lazyElement = React.lazy(async () => ({default: <div key="hi" />}));
+    function Component() {
+      return React.Children.map([lazyElement], c =>
+        React.cloneElement(c, {children: 'hi'}),
+      );
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(container.innerHTML).toBe('<div>hi</div>');
+  });
+
+  it('should render cached Promises after suspending', async () => {
+    const promise = Promise.resolve(<div key="hi" />);
+    function Component() {
+      return React.Children.map([promise], c =>
+        React.cloneElement(c, {children: 'hi'}),
+      );
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    expect(container.innerHTML).toBe('<div>hi</div>');
+  });
+
+  it('should throw on regex', () => {
+    // Really, we care about dates (#4840) but those have nondeterministic
+    // serialization (timezones) so let's test a regex instead:
+    expect(function () {
+      React.Children.forEach(/abc/, function () {}, null);
+    }).toThrowError(
+      'Objects are not valid as a React child (found: /abc/).' +
+        (__DEV__
+          ? ' If you meant to render a collection of children, use an ' +
+            'array instead.'
+          : ''),
+    );
+  });
+
+  describe('with fragments enabled', () => {
+    it('warns for keys for arrays of elements in a fragment', async () => {
+      class ComponentReturningArray extends React.Component {
+        render() {
+          return [<div />, <div />];
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<ComponentReturningArray />);
+      });
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop.' +
+          '\n\nCheck the top-level render call using <ComponentReturningArray>. It was passed a child from ComponentReturningArray. ' +
+          'See https://react.dev/link/warning-keys for more information.' +
+          '\n    in div (at **)' +
+          '\n    in ComponentReturningArray (at **)',
+      ]);
+    });
+
+    it('does not warn when there are keys on elements in a fragment', async () => {
+      class ComponentReturningArray extends React.Component {
+        render() {
+          return [<div key="foo" />, <div key="bar" />];
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<ComponentReturningArray />);
+      });
+    });
+
+    it('warns for keys for arrays at the top level', async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render([<div />, <div />]);
+      });
+      assertConsoleErrorDev([
+        'Each child in a list should have a unique "key" prop.' +
+          '\n\nCheck the top-level render call using <Root>. ' +
+          'See https://react.dev/link/warning-keys for more information.' +
+          '\n    in div (at **)',
+      ]);
+    });
+  });
+});
diff --git a/packages/react/src/__tests__/ReactClassEquivalence-test.js b/packages/react/src/__tests__/ReactClassEquivalence-test.js
new file mode 100644
index 00000000000..26272a7a5d9
--- /dev/null
+++ b/packages/react/src/__tests__/ReactClassEquivalence-test.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 spawnSync = require('child_process').spawnSync;
+
+describe('ReactClassEquivalence', () => {
+  it('tests the same thing for es6 classes and CoffeeScript', () => {
+    const result1 = runJest('ReactCoffeeScriptClass-test.coffee');
+    const result2 = runJest('ReactES6Class-test.js');
+    compareResults(result1, result2);
+  });
+
+  it('tests the same thing for es6 classes and TypeScript', () => {
+    const result1 = runJest('ReactTypeScriptClass-test.ts');
+    const result2 = runJest('ReactES6Class-test.js');
+    compareResults(result1, result2);
+  });
+});
+
+function runJest(testFile) {
+  const cwd = process.cwd();
+  const extension = process.platform === 'win32' ? '.cmd' : '';
+  const command = process.env.npm_lifecycle_event;
+  const defaultReporter = '--reporters=default';
+  const equivalenceReporter =
+    '--reporters=<rootDir>/scripts/jest/spec-equivalence-reporter/equivalenceReporter.js';
+  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, defaultReporter, equivalenceReporter],
+    {
+      cwd,
+      env: Object.assign({}, process.env, {
+        REACT_CLASS_EQUIVALENCE_TEST: 'true',
+      }),
+    },
+  );
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  if (result.status !== 0) {
+    throw new Error(
+      'jest process exited with: ' +
+        result.status +
+        '\n' +
+        'stdout: ' +
+        result.stdout.toString() +
+        'stderr: ' +
+        result.stderr.toString(),
+    );
+  }
+
+  return result.stdout.toString() + result.stderr.toString();
+}
+
+function compareResults(a, b) {
+  const regexp = /EQUIVALENCE.*$/gm;
+  const aSpecs = (a.match(regexp) || []).sort().join('\n');
+  const bSpecs = (b.match(regexp) || []).sort().join('\n');
+
+  if (aSpecs.length === 0 && bSpecs.length === 0) {
+    throw new Error('No spec results found in the output');
+  }
+
+  expect(aSpecs).toEqual(bSpecs);
+}
diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
new file mode 100644
index 00000000000..41887b259f5
--- /dev/null
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -0,0 +1,578 @@
+###
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+###
+
+PropTypes = null
+React = null
+ReactDOM = null
+ReactDOMClient = null
+assertConsoleErrorDev = null
+assertConsoleWarnDev = null
+
+featureFlags = require 'shared/ReactFeatureFlags'
+
+describe 'ReactCoffeeScriptClass', ->
+  container = null
+  root = null
+  InnerComponent = null
+  attachedListener = null;
+  renderedName = null;
+
+  beforeEach ->
+    React = require 'react'
+    ReactDOM = require 'react-dom'
+    ReactDOMClient = require 'react-dom/client'
+    PropTypes = require 'prop-types'
+    container = document.createElement 'div'
+    root = ReactDOMClient.createRoot container
+    attachedListener = null
+    renderedName = null
+    TestUtils = require 'internal-test-utils'
+    assertConsoleErrorDev = TestUtils.assertConsoleErrorDev
+    assertConsoleWarnDev = TestUtils.assertConsoleWarnDev
+    InnerComponent = class extends React.Component
+      getName: -> this.props.name
+      render: ->
+        attachedListener = this.props.onClick
+        renderedName = this.props.name
+        return React.createElement('div', className: this.props.name)
+
+  test = (element, expectedTag, expectedClassName) ->
+    ReactDOM.flushSync ->
+      root.render(element)
+    expect(container.firstChild).not.toBeNull()
+    expect(container.firstChild.tagName).toBe(expectedTag)
+    expect(container.firstChild.className).toBe(expectedClassName)
+
+  it 'preserves the name of the class for use in error messages', ->
+    class Foo extends React.Component
+    expect(Foo.name).toBe 'Foo'
+
+  it 'throws if no render function is defined', ->
+    class Foo extends React.Component
+    caughtErrors = []
+    errorHandler = (event) ->
+      event.preventDefault()
+      caughtErrors.push(event.error)
+    window.addEventListener 'error', errorHandler;
+    ReactDOM.flushSync ->
+      root.render React.createElement(Foo)
+    assertConsoleErrorDev [
+# A failed component renders twice in DEV in concurrent mode
+      'No `render` method found on the Foo instance: you may have forgotten to define `render`.\n' +
+        '     in Foo (at **)',
+      'No `render` method found on the Foo instance: you may have forgotten to define `render`.\n' +
+        '     in Foo (at **)',
+    ]
+    window.removeEventListener 'error', errorHandler;
+    expect(caughtErrors).toEqual([
+      expect.objectContaining(
+        message: expect.stringContaining('is not a function')
+      )
+    ])
+
+  it 'renders a simple stateless component with prop', ->
+    class Foo extends React.Component
+      render: ->
+        React.createElement(InnerComponent,
+          name: @props.bar
+        )
+
+    test React.createElement(Foo, bar: 'foo'), 'DIV', 'foo'
+    test React.createElement(Foo, bar: 'bar'), 'DIV', 'bar'
+
+  it 'renders based on state using initial values in this.props', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        super props
+        @state = bar: @props.initialValue
+
+      render: ->
+        React.createElement('span',
+          className: @state.bar
+        )
+
+    test React.createElement(Foo, initialValue: 'foo'), 'SPAN', 'foo'
+
+  it 'renders based on state using props in the constructor', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        @state = bar: props.initialValue
+
+      changeState: ->
+        @setState bar: 'bar'
+
+      render: ->
+        if @state.bar is 'foo'
+          return React.createElement('div',
+            className: 'foo'
+          )
+        React.createElement('span',
+          className: @state.bar
+        )
+
+    ref = React.createRef()
+    test React.createElement(Foo, initialValue: 'foo', ref: ref), 'DIV', 'foo'
+    ReactDOM.flushSync ->
+      ref.current.changeState()
+    test React.createElement(Foo), 'SPAN', 'bar'
+
+  it 'sets initial state with value returned by static getDerivedStateFromProps', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        super props
+        @state = foo: null
+      render: ->
+        React.createElement('div',
+          className: "#{@state.foo} #{@state.bar}"
+        )
+    Foo.getDerivedStateFromProps = (nextProps, prevState) ->
+      {
+        foo: nextProps.foo
+        bar: 'bar'
+      }
+    test React.createElement(Foo, foo: 'foo'), 'DIV', 'foo bar'
+
+  it 'warns if getDerivedStateFromProps is not static', ->
+    class Foo extends React.Component
+      render: ->
+        React.createElement('div')
+      getDerivedStateFromProps: ->
+        {}
+    ReactDOM.flushSync ->
+     root.render React.createElement(Foo, foo: 'foo')
+    assertConsoleErrorDev [
+      'Foo: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)']
+
+  it 'warns if getDerivedStateFromError is not static', ->
+    class Foo extends React.Component
+      render: ->
+        React.createElement('div')
+      getDerivedStateFromError: ->
+        {}
+    ReactDOM.flushSync ->
+      root.render React.createElement(Foo, foo: 'foo')
+
+    assertConsoleErrorDev [
+      'Foo: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)'
+    ]
+
+  it 'warns if getSnapshotBeforeUpdate is static', ->
+    class Foo extends React.Component
+      render: ->
+        React.createElement('div')
+    Foo.getSnapshotBeforeUpdate = () ->
+      {}
+    ReactDOM.flushSync ->
+      root.render React.createElement(Foo, foo: 'foo')
+
+    assertConsoleErrorDev [
+      'Foo: getSnapshotBeforeUpdate() is defined as a static method and will be ignored. Instead, declare it as an instance method.\n' +
+        '    in Foo (at **)'
+    ]
+
+  it 'warns if state not initialized before static getDerivedStateFromProps', ->
+    class Foo extends React.Component
+      render: ->
+        React.createElement('div',
+          className: "#{@state.foo} #{@state.bar}"
+        )
+    Foo.getDerivedStateFromProps = (nextProps, prevState) ->
+      {
+        foo: nextProps.foo
+        bar: 'bar'
+      }
+    ReactDOM.flushSync ->
+      root.render React.createElement(Foo, foo: 'foo')
+
+    assertConsoleErrorDev [
+      '`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.\n' +
+        '     in Foo (at **)'
+    ]
+
+  it 'updates initial state with values returned by static getDerivedStateFromProps', ->
+    class Foo extends React.Component
+      constructor: (props, context) ->
+        super props, context
+        @state =
+          foo: 'foo'
+          bar: 'bar'
+      render: ->
+        React.createElement('div',
+          className: "#{@state.foo} #{@state.bar}"
+        )
+    Foo.getDerivedStateFromProps = (nextProps, prevState) ->
+      {
+        foo: "not-#{prevState.foo}"
+      }
+    test React.createElement(Foo), 'DIV', 'not-foo bar'
+
+  it 'renders updated state with values returned by static getDerivedStateFromProps', ->
+    class Foo extends React.Component
+      constructor: (props, context) ->
+        super props, context
+        @state =
+          value: 'initial'
+      render: ->
+        React.createElement('div',
+          className: @state.value
+        )
+    Foo.getDerivedStateFromProps = (nextProps, prevState) ->
+      if nextProps.update
+        return {
+          value: 'updated'
+        }
+      return null
+    test React.createElement(Foo, update: false), 'DIV', 'initial'
+    test React.createElement(Foo, update: true), 'DIV', 'updated'
+
+  if !featureFlags.disableLegacyContext
+    it 'renders based on context in the constructor', ->
+      class Foo extends React.Component
+        @contextTypes:
+          tag: PropTypes.string
+          className: PropTypes.string
+
+        constructor: (props, context) ->
+          super props, context
+          @state =
+            tag: context.tag
+            className: @context.className
+
+        render: ->
+          Tag = @state.tag
+          React.createElement Tag,
+            className: @state.className
+
+      class Outer extends React.Component
+        @childContextTypes:
+          tag: PropTypes.string
+          className: PropTypes.string
+
+        getChildContext: ->
+          tag: 'span'
+          className: 'foo'
+
+        render: ->
+          React.createElement Foo
+
+      test React.createElement(Outer), 'SPAN', 'foo'
+      
+      assertConsoleErrorDev([
+        'Outer uses the legacy childContextTypes API which will soon be removed.
+         Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Outer (at **)',
+        'Foo uses the legacy contextTypes API which will soon be removed.
+         Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Outer (at **)',
+      ]);
+
+  it 'renders only once when setting state in componentWillMount', ->
+    renderCount = 0
+    class Foo extends React.Component
+      constructor: (props) ->
+        @state = bar: props.initialValue
+
+      UNSAFE_componentWillMount: ->
+        @setState bar: 'bar'
+
+      render: ->
+        renderCount++
+        React.createElement('span', className: @state.bar)
+
+    test React.createElement(Foo, initialValue: 'foo'), 'SPAN', 'bar'
+    expect(renderCount).toBe(1)
+
+  it 'should warn with non-object in the initial state property', ->
+    [['an array'], 'a string', 1234].forEach (state) ->
+      class Foo extends React.Component
+        constructor: ->
+          @state = state
+
+        render: ->
+          React.createElement('span')
+
+      test React.createElement(Foo), 'SPAN', ''
+      assertConsoleErrorDev [
+        'Foo.state: must be set to an object or null\n' +
+          '    in Foo (at **)'
+      ]
+
+  it 'should render with null in the initial state property', ->
+    class Foo extends React.Component
+      constructor: ->
+        @state = null
+
+      render: ->
+        React.createElement('span')
+
+    test React.createElement(Foo), 'SPAN', ''
+
+  it 'setState through an event handler', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        @state = bar: props.initialValue
+
+      handleClick: =>
+        @setState bar: 'bar'
+
+      render: ->
+        React.createElement(InnerComponent,
+          name: @state.bar
+          onClick: @handleClick
+        )
+
+    test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
+    ReactDOM.flushSync ->
+      attachedListener()
+    expect(renderedName).toBe 'bar'
+
+  it 'should not implicitly bind event handlers', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        @state = bar: props.initialValue
+
+      handleClick: -> # needs double arrow
+        @setState bar: 'bar'
+
+      render: ->
+        React.createElement(InnerComponent,
+          name: @state.bar
+          onClick: @handleClick
+        )
+
+    test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
+    expect(attachedListener).toThrow()
+
+  it 'renders using forceUpdate even when there is no state', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        @mutativeValue = props.initialValue
+
+      handleClick: =>
+        @mutativeValue = 'bar'
+        @forceUpdate()
+
+      render: ->
+        React.createElement(InnerComponent,
+          name: @mutativeValue
+          onClick: @handleClick
+        )
+
+    test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
+    ReactDOM.flushSync ->
+      attachedListener()
+    expect(renderedName).toBe 'bar'
+
+  it 'will call all the normal life cycle methods', ->
+    lifeCycles = []
+    class Foo extends React.Component
+      constructor: ->
+        @state = {}
+
+      UNSAFE_componentWillMount: ->
+        lifeCycles.push 'will-mount'
+
+      componentDidMount: ->
+        lifeCycles.push 'did-mount'
+
+      UNSAFE_componentWillReceiveProps: (nextProps) ->
+        lifeCycles.push 'receive-props', nextProps
+
+      shouldComponentUpdate: (nextProps, nextState) ->
+        lifeCycles.push 'should-update', nextProps, nextState
+        true
+
+      UNSAFE_componentWillUpdate: (nextProps, nextState) ->
+        lifeCycles.push 'will-update', nextProps, nextState
+
+      componentDidUpdate: (prevProps, prevState) ->
+        lifeCycles.push 'did-update', prevProps, prevState
+
+      componentWillUnmount: ->
+        lifeCycles.push 'will-unmount'
+
+      render: ->
+        React.createElement('span',
+          className: @props.value
+        )
+
+    test React.createElement(Foo, value: 'foo'), 'SPAN', 'foo'
+    expect(lifeCycles).toEqual [
+      'will-mount'
+      'did-mount'
+    ]
+    lifeCycles = [] # reset
+    test React.createElement(Foo, value: 'bar'), 'SPAN', 'bar'
+    expect(lifeCycles).toEqual [
+      'receive-props', { value: 'bar' }
+      'should-update', { value: 'bar' }, {}
+      'will-update',   { value: 'bar' }, {}
+      'did-update',    { value: 'foo' }, {}
+    ]
+    lifeCycles = [] # reset
+    ReactDOM.flushSync ->
+      root.unmount()
+    expect(lifeCycles).toEqual ['will-unmount']
+
+  if !featureFlags.disableLegacyContext
+    it 'warns when classic properties are defined on the instance,
+        but does not invoke them.', ->
+      getInitialStateWasCalled = false
+      getDefaultPropsWasCalled = false
+      class Foo extends React.Component
+        constructor: ->
+          @contextTypes = {}
+          @contextType = {}
+
+        getInitialState: ->
+          getInitialStateWasCalled = true
+          {}
+
+        getDefaultProps: ->
+          getDefaultPropsWasCalled = true
+          {}
+
+        render: ->
+          React.createElement('span',
+            className: 'foo'
+          )
+
+      test React.createElement(Foo), 'SPAN', 'foo'
+      assertConsoleErrorDev [
+        'getInitialState was defined on Foo, a plain JavaScript class.
+         This is only supported for classes created using React.createClass.
+         Did you mean to define a state property instead?\n' +
+          '     in Foo (at **)',
+        'getDefaultProps was defined on Foo, a plain JavaScript class.
+         This is only supported for classes created using React.createClass.
+         Use a static property to define defaultProps instead.\n' +
+          '    in Foo (at **)',
+        'contextType was defined as an instance property on Foo. Use a static property to define contextType instead.\n' +
+          '    in Foo (at **)',
+        'contextTypes was defined as an instance property on Foo. Use a static property to define contextTypes instead.\n' +
+          '    in Foo (at **)',
+      ]
+      expect(getInitialStateWasCalled).toBe false
+      expect(getDefaultPropsWasCalled).toBe false
+
+  it 'does not warn about getInitialState() on class components
+      if state is also defined.', ->
+    class Foo extends React.Component
+      constructor: (props) ->
+        super props
+        @state = bar: @props.initialValue
+
+      getInitialState: ->
+        {}
+
+      render: ->
+        React.createElement('span',
+          className: 'foo'
+        )
+
+    test React.createElement(Foo), 'SPAN', 'foo'
+
+  it 'should warn when misspelling shouldComponentUpdate', ->
+    class NamedComponent extends React.Component
+      componentShouldUpdate: ->
+        false
+
+      render: ->
+        React.createElement('span',
+          className: 'foo'
+        )
+
+    test React.createElement(NamedComponent), 'SPAN', 'foo'
+    assertConsoleErrorDev [
+      '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.\n' +
+        '    in NamedComponent (at **)'
+    ]
+
+  it 'should warn when misspelling componentWillReceiveProps', ->
+    class NamedComponent extends React.Component
+      componentWillRecieveProps: ->
+        false
+
+      render: ->
+        React.createElement('span',
+          className: 'foo'
+        )
+
+    test React.createElement(NamedComponent), 'SPAN', 'foo'
+    assertConsoleErrorDev [
+      'NamedComponent has a method called componentWillRecieveProps().
+       Did you mean componentWillReceiveProps()?\n' +
+        '    in NamedComponent (at **)'
+    ]
+
+  it 'should warn when misspelling UNSAFE_componentWillReceiveProps', ->
+    class NamedComponent extends React.Component
+      UNSAFE_componentWillRecieveProps: ->
+        false
+
+      render: ->
+        React.createElement('span',
+          className: 'foo'
+        )
+
+    test React.createElement(NamedComponent), 'SPAN', 'foo'
+    assertConsoleErrorDev [
+      'NamedComponent has a method called UNSAFE_componentWillRecieveProps().
+       Did you mean UNSAFE_componentWillReceiveProps()?\n' +
+        '    in NamedComponent (at **)'
+    ]
+
+  it 'should throw AND warn when trying to access classic APIs', ->
+    ref = React.createRef()
+    test React.createElement(InnerComponent, name: 'foo', ref: ref), 'DIV', 'foo'
+
+    expect(-> ref.current.replaceState {}).toThrow()
+    assertConsoleWarnDev([
+      'replaceState(...) is deprecated in plain JavaScript React classes.
+       Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236).'
+    ], {withoutStack: true})
+
+    expect(-> ref.current.isMounted()).toThrow()
+    assertConsoleWarnDev([
+      'isMounted(...) is deprecated in plain JavaScript React classes.
+       Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.',
+    ], {withoutStack: true})
+
+  if !featureFlags.disableLegacyContext
+    it 'supports this.context passed via getChildContext', ->
+      class Bar extends React.Component
+        @contextTypes:
+          bar: PropTypes.string
+        render: ->
+          React.createElement('div', className: @context.bar)
+
+      class Foo extends React.Component
+        @childContextTypes:
+          bar: PropTypes.string
+        getChildContext: ->
+          bar: 'bar-through-context'
+        render: ->
+          React.createElement Bar
+
+      test React.createElement(Foo), 'DIV', 'bar-through-context'
+      assertConsoleErrorDev [
+        'Foo uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.
+         (https://react.dev/link/legacy-context)\n' +
+          '    in Foo (at **)',
+        'Bar uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.
+         (https://react.dev/link/legacy-context)\n' +
+          '    in Foo (at **)'
+      ]
+
+  undefined
diff --git a/packages/react/src/__tests__/ReactContextValidator-test.js b/packages/react/src/__tests__/ReactContextValidator-test.js
new file mode 100644
index 00000000000..ff8f2b42158
--- /dev/null
+++ b/packages/react/src/__tests__/ReactContextValidator-test.js
@@ -0,0 +1,660 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// This test doesn't really have a good home yet. I'm leaving it here since this
+// behavior belongs to the old propTypes system yet is currently implemented
+// in the core ReactCompositeComponent. It should technically live in core's
+// test suite but I'll leave it here to indicate that this is an issue that
+// needs to be fixed.
+
+'use strict';
+
+let PropTypes;
+let React;
+let ReactDOMClient;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactContextValidator', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  // TODO: This behavior creates a runtime dependency on propTypes. We should
+  // ensure that this is not required for ES6 classes with Flow.
+
+  // @gate !disableLegacyContext
+  it('should filter out context not in contextTypes', async () => {
+    class Component extends React.Component {
+      render() {
+        return <div />;
+      }
+    }
+    Component.contextTypes = {
+      foo: PropTypes.string,
+    };
+
+    class ComponentInFooBarContext extends React.Component {
+      childRef = React.createRef();
+
+      getChildContext() {
+        return {
+          foo: 'abc',
+          bar: 123,
+        };
+      }
+
+      render() {
+        return <Component ref={this.childRef} />;
+      }
+    }
+    ComponentInFooBarContext.childContextTypes = {
+      foo: PropTypes.string,
+      bar: PropTypes.number,
+    };
+
+    let instance;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <ComponentInFooBarContext ref={current => (instance = current)} />,
+      );
+    });
+    assertConsoleErrorDev([
+      'ComponentInFooBarContext uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ComponentInFooBarContext (at **)',
+      'Component uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ComponentInFooBarContext (at **)',
+    ]);
+    expect(instance.childRef.current.context).toEqual({foo: 'abc'});
+  });
+
+  // @gate !disableLegacyContext
+  it('should pass next context to lifecycles', async () => {
+    let componentDidMountContext;
+    let componentDidUpdateContext;
+    let componentWillReceivePropsContext;
+    let componentWillReceivePropsNextContext;
+    let componentWillUpdateContext;
+    let componentWillUpdateNextContext;
+    let constructorContext;
+    let renderContext;
+    let shouldComponentUpdateContext;
+    let shouldComponentUpdateNextContext;
+
+    class Parent extends React.Component {
+      getChildContext() {
+        return {
+          foo: this.props.foo,
+          bar: 'bar',
+        };
+      }
+      render() {
+        return <Component />;
+      }
+    }
+    Parent.childContextTypes = {
+      foo: PropTypes.string.isRequired,
+      bar: PropTypes.string.isRequired,
+    };
+
+    class Component extends React.Component {
+      constructor(props, context) {
+        super(props, context);
+        constructorContext = context;
+      }
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        componentWillReceivePropsContext = this.context;
+        componentWillReceivePropsNextContext = nextContext;
+        return true;
+      }
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        shouldComponentUpdateContext = this.context;
+        shouldComponentUpdateNextContext = nextContext;
+        return true;
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
+        componentWillUpdateContext = this.context;
+        componentWillUpdateNextContext = nextContext;
+      }
+      render() {
+        renderContext = this.context;
+        return <div />;
+      }
+      componentDidMount() {
+        componentDidMountContext = this.context;
+      }
+      componentDidUpdate() {
+        componentDidUpdateContext = this.context;
+      }
+    }
+    Component.contextTypes = {
+      foo: PropTypes.string,
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Parent foo="abc" />);
+    });
+    assertConsoleErrorDev([
+      'Parent uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+      'Component uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in Parent (at **)',
+    ]);
+
+    expect(constructorContext).toEqual({foo: 'abc'});
+    expect(renderContext).toEqual({foo: 'abc'});
+    expect(componentDidMountContext).toEqual({foo: 'abc'});
+    await act(() => {
+      root.render(<Parent foo="def" />);
+    });
+
+    expect(componentWillReceivePropsContext).toEqual({foo: 'abc'});
+    expect(componentWillReceivePropsNextContext).toEqual({foo: 'def'});
+    expect(shouldComponentUpdateContext).toEqual({foo: 'abc'});
+    expect(shouldComponentUpdateNextContext).toEqual({foo: 'def'});
+    expect(componentWillUpdateContext).toEqual({foo: 'abc'});
+    expect(componentWillUpdateNextContext).toEqual({foo: 'def'});
+    expect(renderContext).toEqual({foo: 'def'});
+    expect(componentDidUpdateContext).toEqual({foo: 'def'});
+  });
+
+  // TODO (bvaughn) Remove this test and the associated behavior in the future.
+  // It has only been added in Fiber to match the (unintentional) behavior in Stack.
+  // @gate !disableLegacyContext || !__DEV__
+  it('should warn (but not error) if getChildContext method is missing', async () => {
+    class ComponentA extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+      render() {
+        return <div />;
+      }
+    }
+    class ComponentB extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<ComponentA />);
+    });
+    assertConsoleErrorDev([
+      'ComponentA uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ComponentA (at **)',
+      '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.\n' +
+        '    in ComponentA (at **)',
+    ]);
+
+    // Warnings should be deduped by component type
+    await act(() => {
+      root.render(<ComponentA />);
+    });
+    await act(() => {
+      root.render(<ComponentB />);
+    });
+    assertConsoleErrorDev([
+      'ComponentB uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ComponentB (at **)',
+      '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.\n' +
+        '    in ComponentB (at **)',
+    ]);
+  });
+
+  // TODO (bvaughn) Remove this test and the associated behavior in the future.
+  // It has only been added in Fiber to match the (unintentional) behavior in Stack.
+  // @gate !disableLegacyContext
+  it('should pass parent context if getChildContext method is missing', async () => {
+    class ParentContextProvider extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+      };
+      getChildContext() {
+        return {
+          foo: 'FOO',
+        };
+      }
+      render() {
+        return <MiddleMissingContext />;
+      }
+    }
+
+    class MiddleMissingContext extends React.Component {
+      static childContextTypes = {
+        bar: PropTypes.string.isRequired,
+      };
+      render() {
+        return <ChildContextConsumer />;
+      }
+    }
+
+    let childContext;
+    class ChildContextConsumer extends React.Component {
+      render() {
+        childContext = this.context;
+        return <div />;
+      }
+    }
+    ChildContextConsumer.contextTypes = {
+      bar: PropTypes.string.isRequired,
+      foo: PropTypes.string.isRequired,
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<ParentContextProvider />);
+    });
+    assertConsoleErrorDev([
+      'ParentContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ParentContextProvider (at **)',
+      'MiddleMissingContext uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ParentContextProvider (at **)',
+      '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.\n' +
+        '    in ParentContextProvider (at **)',
+      'ChildContextConsumer uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in MiddleMissingContext (at **)\n' +
+        '    in ParentContextProvider (at **)',
+    ]);
+    expect(childContext.bar).toBeUndefined();
+    expect(childContext.foo).toBe('FOO');
+  });
+
+  it('should pass next context to lifecycles on update', async () => {
+    let componentDidMountContext;
+    let componentDidUpdateContext;
+    let componentWillReceivePropsContext;
+    let componentWillReceivePropsNextContext;
+    let componentWillUpdateContext;
+    let componentWillUpdateNextContext;
+    let constructorContext;
+    let renderContext;
+    let shouldComponentUpdateWasCalled = false;
+
+    const Context = React.createContext();
+
+    class Component extends React.Component {
+      static contextType = Context;
+      constructor(props, context) {
+        super(props, context);
+        constructorContext = context;
+      }
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+        componentWillReceivePropsContext = this.context;
+        componentWillReceivePropsNextContext = nextContext;
+        return true;
+      }
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        shouldComponentUpdateWasCalled = true;
+        return true;
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
+        componentWillUpdateContext = this.context;
+        componentWillUpdateNextContext = nextContext;
+      }
+      render() {
+        renderContext = this.context;
+        return <div />;
+      }
+      componentDidMount() {
+        componentDidMountContext = this.context;
+      }
+      componentDidUpdate() {
+        componentDidUpdateContext = this.context;
+      }
+    }
+
+    const firstContext = {foo: 123};
+    const secondContext = {bar: 456};
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Context.Provider value={firstContext}>
+          <Component />
+        </Context.Provider>,
+      );
+    });
+
+    expect(constructorContext).toBe(firstContext);
+    expect(renderContext).toBe(firstContext);
+    expect(componentDidMountContext).toBe(firstContext);
+    await act(() => {
+      root.render(
+        <Context.Provider value={secondContext}>
+          <Component />
+        </Context.Provider>,
+      );
+    });
+
+    expect(componentWillReceivePropsContext).toBe(firstContext);
+    expect(componentWillReceivePropsNextContext).toBe(secondContext);
+    expect(componentWillUpdateContext).toBe(firstContext);
+    expect(componentWillUpdateNextContext).toBe(secondContext);
+    expect(renderContext).toBe(secondContext);
+    expect(componentDidUpdateContext).toBe(secondContext);
+    expect(shouldComponentUpdateWasCalled).toBe(true);
+  });
+
+  it('should re-render PureComponents when context Provider updates', async () => {
+    let renderedContext;
+
+    const Context = React.createContext();
+
+    class Component extends React.PureComponent {
+      static contextType = Context;
+      render() {
+        renderedContext = this.context;
+        return <div />;
+      }
+    }
+
+    const firstContext = {foo: 123};
+    const secondContext = {bar: 456};
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Context.Provider value={firstContext}>
+          <Component />
+        </Context.Provider>,
+      );
+    });
+
+    expect(renderedContext).toBe(firstContext);
+    await act(() => {
+      root.render(
+        <Context.Provider value={secondContext}>
+          <Component />
+        </Context.Provider>,
+      );
+    });
+
+    expect(renderedContext).toBe(secondContext);
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  it('should warn if both contextType and contextTypes are defined', async () => {
+    const Context = React.createContext();
+
+    class ParentContextProvider extends React.Component {
+      static childContextTypes = {
+        foo: PropTypes.string,
+      };
+      getChildContext() {
+        return {
+          foo: 'FOO',
+        };
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    class ComponentA extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+      static contextType = Context;
+      render() {
+        return <div />;
+      }
+    }
+    class ComponentB extends React.Component {
+      static contextTypes = {
+        foo: PropTypes.string.isRequired,
+      };
+      static contextType = Context;
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(
+        <ParentContextProvider>
+          <ComponentA />
+        </ParentContextProvider>,
+      );
+    });
+
+    assertConsoleErrorDev([
+      'ParentContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
+        'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ParentContextProvider (at **)',
+      'ComponentA declares both contextTypes and contextType static properties. ' +
+        'The legacy contextTypes property will be ignored.\n' +
+        '    in ComponentA (at **)',
+      'ComponentA uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ComponentA (at **)',
+    ]);
+
+    // Warnings should be deduped by component type
+    await act(() => {
+      root.render(
+        <ParentContextProvider>
+          <ComponentA />
+        </ParentContextProvider>,
+      );
+    });
+
+    await act(() => {
+      root.render(
+        <ParentContextProvider>
+          <ComponentB />
+        </ParentContextProvider>,
+      );
+    });
+    assertConsoleErrorDev([
+      'ComponentB declares both contextTypes and contextType static properties. ' +
+        'The legacy contextTypes property will be ignored.\n' +
+        '    in ComponentB (at **)',
+      'ComponentB uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+        '    in ComponentB (at **)',
+    ]);
+  });
+
+  it('should warn if an invalid contextType is defined', async () => {
+    const Context = React.createContext();
+    class ComponentA extends React.Component {
+      static contextType = Context.Consumer;
+      render() {
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<ComponentA />);
+    });
+    assertConsoleErrorDev([
+      'ComponentA defines an invalid contextType. ' +
+        'contextType should point to the Context object returned by React.createContext(). ' +
+        'Did you accidentally pass the Context.Consumer instead?\n' +
+        '    in ComponentA (at **)',
+    ]);
+
+    await act(() => {
+      root.render(<ComponentA />);
+    });
+
+    class ComponentB extends React.Component {
+      static contextType = Context.Provider;
+      render() {
+        return <div />;
+      }
+    }
+    await act(() => {
+      root.render(<ComponentB />);
+    });
+  });
+
+  it('should not warn when class contextType is null', async () => {
+    class Foo extends React.Component {
+      static contextType = null; // Handy for conditional declaration
+      render() {
+        return this.context.hello.world;
+      }
+    }
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+    }).rejects.toThrow("Cannot read properties of undefined (reading 'world')");
+  });
+
+  it('should warn when class contextType is undefined', async () => {
+    class Foo extends React.Component {
+      // This commonly happens with circular deps
+      // https://github.com/facebook/react/issues/13969
+      static contextType = undefined;
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+    }).rejects.toThrow("Cannot read properties of undefined (reading 'world')");
+
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should warn when class contextType is an object', async () => {
+    class Foo extends React.Component {
+      // Can happen due to a typo
+      static contextType = {
+        x: 42,
+        y: 'hello',
+      };
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+    }).rejects.toThrow("Cannot read properties of undefined (reading 'hello')");
+
+    assertConsoleErrorDev([
+      '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}.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should warn when class contextType is a primitive', async () => {
+    class Foo extends React.Component {
+      static contextType = 'foo';
+      render() {
+        return this.context.hello.world;
+      }
+    }
+
+    await expect(async () => {
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(<Foo />);
+      });
+    }).rejects.toThrow("Cannot read properties of undefined (reading 'world')");
+
+    assertConsoleErrorDev([
+      'Foo defines an invalid contextType. ' +
+        'contextType should point to the Context object returned by React.createContext(). ' +
+        'However, it is set to a string.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should warn if you define contextType on a function component', async () => {
+    const Context = React.createContext();
+
+    function ComponentA() {
+      return <div />;
+    }
+    ComponentA.contextType = Context;
+
+    function ComponentB() {
+      return <div />;
+    }
+    ComponentB.contextType = Context;
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<ComponentA />);
+    });
+    assertConsoleErrorDev([
+      'ComponentA: Function components do not support contextType.\n' +
+        '    in ComponentA (at **)',
+    ]);
+
+    // Warnings should be deduped by component type
+    await act(() => {
+      root.render(<ComponentA />);
+    });
+
+    await act(() => {
+      root.render(<ComponentB />);
+    });
+    assertConsoleErrorDev([
+      'ComponentB: Function components do not support contextType.\n' +
+        '    in ComponentB (at **)',
+    ]);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactCreateElement-test.js b/packages/react/src/__tests__/ReactCreateElement-test.js
new file mode 100644
index 00000000000..4aa76348e56
--- /dev/null
+++ b/packages/react/src/__tests__/ReactCreateElement-test.js
@@ -0,0 +1,457 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React;
+let ReactDOMClient;
+let assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+// NOTE: This module tests the old, "classic" JSX runtime, React.createElement.
+// Do not use JSX syntax in this module; call React.createElement directly.
+describe('ReactCreateElement', () => {
+  let ComponentClass;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    ({
+      act,
+      assertConsoleErrorDev,
+      assertConsoleWarnDev,
+    } = require('internal-test-utils'));
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ComponentClass = class extends React.Component {
+      render() {
+        return React.createElement('div');
+      }
+    };
+  });
+
+  it('returns a complete element according to spec', () => {
+    const element = React.createElement(ComponentClass);
+    expect(element.type).toBe(ComponentClass);
+    expect(element.key).toBe(null);
+    expect(element.ref).toBe(null);
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+    expect(element.props).toEqual({});
+  });
+
+  it('should warn when `key` is being accessed on composite element', async () => {
+    class Child extends React.Component {
+      render() {
+        return React.createElement('div', null, this.props.key);
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(Child, {key: '0'}),
+          React.createElement(Child, {key: '1'}),
+          React.createElement(Child, {key: '2'}),
+        );
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.createElement(Parent));
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/special-props)\n' +
+        '    in Parent (at **)',
+    ]);
+  });
+
+  it('should warn when `key` is being accessed on a host element', () => {
+    const element = React.createElement('div', {key: '3'});
+    void element.props.key;
+    assertConsoleErrorDev(
+      [
+        '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 ' +
+          'prop. (https://react.dev/link/special-props)',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('allows a string to be passed as the type', () => {
+    const element = React.createElement('div');
+    expect(element.type).toBe('div');
+    expect(element.key).toBe(null);
+    expect(element.ref).toBe(null);
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+    expect(element.props).toEqual({});
+  });
+
+  it('returns an immutable element', () => {
+    const element = React.createElement(ComponentClass);
+    if (__DEV__) {
+      expect(() => (element.type = 'div')).toThrow();
+    } else {
+      expect(() => (element.type = 'div')).not.toThrow();
+    }
+  });
+
+  it('does not reuse the original config object', () => {
+    const config = {foo: 1};
+    const element = React.createElement(ComponentClass, config);
+    expect(element.props.foo).toBe(1);
+    config.foo = 2;
+    expect(element.props.foo).toBe(1);
+  });
+
+  it('does not fail if config has no prototype', () => {
+    const config = Object.create(null, {foo: {value: 1, enumerable: true}});
+    const element = React.createElement(ComponentClass, config);
+    expect(element.props.foo).toBe(1);
+  });
+
+  it('extracts key from the rest of the props', () => {
+    const element = React.createElement(ComponentClass, {
+      key: '12',
+      foo: '56',
+    });
+    expect(element.type).toBe(ComponentClass);
+    expect(element.key).toBe('12');
+    const expectation = {foo: '56'};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('does not extract ref from the rest of the props', () => {
+    const ref = React.createRef();
+    const element = React.createElement(ComponentClass, {
+      key: '12',
+      ref: ref,
+      foo: '56',
+    });
+    expect(element.type).toBe(ComponentClass);
+    expect(element.ref).toBe(ref);
+    assertConsoleErrorDev(
+      [
+        'Accessing element.ref was removed in React 19. ref is now a ' +
+          'regular prop. It will be removed from the JSX Element ' +
+          'type in a future release.',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+    const expectation = {foo: '56', ref};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('extracts null key', () => {
+    const element = React.createElement(ComponentClass, {
+      key: null,
+      foo: '12',
+    });
+    expect(element.type).toBe(ComponentClass);
+    expect(element.key).toBe('null');
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+    expect(element.props).toEqual({foo: '12'});
+  });
+
+  it('ignores undefined key and ref', () => {
+    const props = {
+      foo: '56',
+      key: undefined,
+      ref: undefined,
+    };
+    const element = React.createElement(ComponentClass, props);
+    expect(element.type).toBe(ComponentClass);
+    expect(element.key).toBe(null);
+    expect(element.ref).toBe(null);
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+    expect(element.props).toEqual({foo: '56'});
+  });
+
+  it('ignores key and ref warning getters', () => {
+    const elementA = React.createElement('div');
+    const elementB = React.createElement('div', elementA.props);
+    expect(elementB.key).toBe(null);
+    expect(elementB.ref).toBe(null);
+  });
+
+  it('coerces the key to a string', () => {
+    const element = React.createElement(ComponentClass, {
+      key: 12,
+      foo: '56',
+    });
+    expect(element.type).toBe(ComponentClass);
+    expect(element.key).toBe('12');
+    expect(element.ref).toBe(null);
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+    expect(element.props).toEqual({foo: '56'});
+  });
+
+  it('preserves the owner on the element', async () => {
+    let element;
+    let instance;
+
+    class Wrapper extends React.Component {
+      componentDidMount() {
+        instance = this;
+      }
+      render() {
+        element = React.createElement(ComponentClass);
+        return element;
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(React.createElement(Wrapper)));
+    if (__DEV__) {
+      expect(element._owner.stateNode).toBe(instance);
+    } else {
+      expect('_owner' in element).toBe(false);
+    }
+  });
+
+  it('merges an additional argument onto the children prop', () => {
+    const a = 1;
+    const element = React.createElement(
+      ComponentClass,
+      {
+        children: 'text',
+      },
+      a,
+    );
+    expect(element.props.children).toBe(a);
+  });
+
+  it('does not override children if no rest args are provided', () => {
+    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.createElement(
+      ComponentClass,
+      {
+        children: 'text',
+      },
+      null,
+    );
+    expect(element.props.children).toBe(null);
+  });
+
+  it('merges rest arguments onto the children prop in an array', () => {
+    const a = 1;
+    const b = 2;
+    const c = 3;
+    const element = React.createElement(ComponentClass, null, a, b, c);
+    expect(element.props.children).toEqual([1, 2, 3]);
+  });
+
+  it('allows static methods to be called using the type property', () => {
+    class StaticMethodComponentClass extends React.Component {
+      render() {
+        return React.createElement('div');
+      }
+    }
+    StaticMethodComponentClass.someStaticMethod = () => 'someReturnValue';
+
+    const element = React.createElement(StaticMethodComponentClass);
+    expect(element.type.someStaticMethod()).toBe('someReturnValue');
+  });
+
+  it('is indistinguishable from a plain object', () => {
+    const element = React.createElement('div', {className: 'foo'});
+    const object = {};
+    expect(element.constructor).toBe(object.constructor);
+  });
+
+  it('should use default prop value when removing a prop', async () => {
+    class Component extends React.Component {
+      render() {
+        return React.createElement('span');
+      }
+    }
+    Component.defaultProps = {fruit: 'persimmon'};
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    const ref = React.createRef();
+    await act(() => {
+      root.render(React.createElement(Component, {ref, fruit: 'mango'}));
+    });
+    const instance = ref.current;
+    expect(instance.props.fruit).toBe('mango');
+
+    await act(() => {
+      root.render(React.createElement(Component));
+    });
+    expect(instance.props.fruit).toBe('persimmon');
+  });
+
+  it('should normalize props with default values', async () => {
+    let instance;
+    class Component extends React.Component {
+      componentDidMount() {
+        instance = this;
+      }
+      render() {
+        return React.createElement('span', null, this.props.prop);
+      }
+    }
+    Component.defaultProps = {prop: 'testKey'};
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.createElement(Component));
+    });
+    expect(instance.props.prop).toBe('testKey');
+
+    await act(() => {
+      root.render(React.createElement(Component, {prop: null}));
+    });
+    expect(instance.props.prop).toBe(null);
+  });
+
+  it('throws when changing a prop (in dev) after element creation', async () => {
+    class Outer extends React.Component {
+      render() {
+        const el = React.createElement('div', {className: 'moo'});
+
+        if (__DEV__) {
+          expect(function () {
+            el.props.className = 'quack';
+          }).toThrow();
+          expect(el.props.className).toBe('moo');
+        } else {
+          el.props.className = 'quack';
+          expect(el.props.className).toBe('quack');
+        }
+
+        return el;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(React.createElement(Outer, {color: 'orange'}));
+    });
+    if (__DEV__) {
+      expect(container.firstChild.className).toBe('moo');
+    } else {
+      expect(container.firstChild.className).toBe('quack');
+    }
+  });
+
+  it('throws when adding a prop (in dev) after element creation', async () => {
+    const container = document.createElement('div');
+    class Outer extends React.Component {
+      render() {
+        const el = React.createElement('div', null, this.props.sound);
+
+        if (__DEV__) {
+          expect(function () {
+            el.props.className = 'quack';
+          }).toThrow();
+          expect(el.props.className).toBe(undefined);
+        } else {
+          el.props.className = 'quack';
+          expect(el.props.className).toBe('quack');
+        }
+
+        return el;
+      }
+    }
+    Outer.defaultProps = {sound: 'meow'};
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(React.createElement(Outer));
+    });
+    expect(container.firstChild.textContent).toBe('meow');
+    if (__DEV__) {
+      expect(container.firstChild.className).toBe('');
+    } else {
+      expect(container.firstChild.className).toBe('quack');
+    }
+  });
+
+  it('does not warn for NaN props', async () => {
+    let test;
+    class Test extends React.Component {
+      componentDidMount() {
+        test = this;
+      }
+      render() {
+        return React.createElement('div');
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.createElement(Test, {value: +undefined}));
+    });
+    expect(test.props.value).toBeNaN();
+  });
+
+  it('warns if outdated JSX transform is detected', async () => {
+    // Warns if __self is detected, because that's only passed by a compiler
+    React.createElement('div', {className: 'foo', __self: this});
+    assertConsoleWarnDev(
+      [
+        'Your app (or one of its dependencies) is using an outdated JSX ' +
+          'transform. Update to the modern JSX transform for ' +
+          'faster performance: https://react.dev/link/new-jsx-transform',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+
+    // Only warns the first time. Subsequent elements don't warn.
+    React.createElement('div', {className: 'foo', __self: this});
+  });
+
+  it('do not warn about outdated JSX transform if `key` is present', () => {
+    // When a static "key" prop is defined _after_ a spread, the modern JSX
+    // transform outputs `createElement` instead of `jsx`. (This is because with
+    // `jsx`, a spread key always takes precedence over a static key, regardless
+    // of the order, whereas `createElement` respects the order.)
+    //
+    // To avoid a false positive warning, we skip the warning whenever a `key`
+    // prop is present.
+    React.createElement('div', {key: 'foo', __self: this});
+  });
+});
diff --git a/packages/react/src/__tests__/ReactCreateRef-test.js b/packages/react/src/__tests__/ReactCreateRef-test.js
new file mode 100644
index 00000000000..3dedb3ccdce
--- /dev/null
+++ b/packages/react/src/__tests__/ReactCreateRef-test.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let assertConsoleErrorDev;
+
+describe('ReactCreateRef', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ({assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  it('should warn in dev if an invalid ref object is provided', () => {
+    function Wrapper({children}) {
+      return children;
+    }
+
+    class ExampleComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    ReactDOM.flushSync(() => {
+      root.render(
+        <Wrapper>
+          <div ref={{}} />
+        </Wrapper>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Unexpected ref object provided for div. ' +
+        'Use either a ref-setter function or React.createRef().\n' +
+        '    in div (at **)',
+    ]);
+
+    ReactDOM.flushSync(() => {
+      root.render(
+        <Wrapper>
+          <ExampleComponent ref={{}} />
+        </Wrapper>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Unexpected ref object provided for ExampleComponent. ' +
+        'Use either a ref-setter function or React.createRef().\n' +
+        '    in ExampleComponent (at **)',
+    ]);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
new file mode 100644
index 00000000000..a33a7b06682
--- /dev/null
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -0,0 +1,642 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 PropTypes;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+describe('ReactES6Class', () => {
+  let container;
+  let root;
+  const freeze = function (expectation) {
+    Object.freeze(expectation);
+    return expectation;
+  };
+  let Inner;
+  let attachedListener = null;
+  let renderedName = null;
+
+  beforeEach(() => {
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ({
+      assertConsoleErrorDev,
+      assertConsoleWarnDev,
+    } = require('internal-test-utils'));
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    attachedListener = null;
+    renderedName = null;
+    Inner = class extends React.Component {
+      getName() {
+        return this.props.name;
+      }
+      render() {
+        attachedListener = this.props.onClick;
+        renderedName = this.props.name;
+        return <div className={this.props.name} />;
+      }
+    };
+  });
+
+  function runTest(element, expectedTag, expectedClassName) {
+    ReactDOM.flushSync(() => root.render(element));
+    expect(container.firstChild).not.toBeNull();
+    expect(container.firstChild.tagName).toBe(expectedTag);
+    expect(container.firstChild.className).toBe(expectedClassName);
+  }
+
+  it('preserves the name of the class for use in error messages', () => {
+    class Foo extends React.Component {}
+    expect(Foo.name).toBe('Foo');
+  });
+
+  it('throws if no render function is defined', () => {
+    class Foo extends React.Component {}
+    const caughtErrors = [];
+    function errorHandler(event) {
+      event.preventDefault();
+      caughtErrors.push(event.error);
+    }
+    window.addEventListener('error', errorHandler);
+    try {
+      ReactDOM.flushSync(() => root.render(<Foo />));
+      assertConsoleErrorDev([
+        // A failed component renders twice in DEV in concurrent mode
+        'No `render` method found on the Foo instance: ' +
+          'you may have forgotten to define `render`.\n' +
+          '    in Foo (at **)',
+        'No `render` method found on the Foo instance: ' +
+          'you may have forgotten to define `render`.\n' +
+          '    in Foo (at **)',
+      ]);
+    } finally {
+      window.removeEventListener('error', errorHandler);
+    }
+    expect(caughtErrors).toEqual([
+      expect.objectContaining({
+        message: expect.stringContaining('is not a function'),
+      }),
+    ]);
+  });
+
+  it('renders a simple stateless component with prop', () => {
+    class Foo extends React.Component {
+      render() {
+        return <Inner name={this.props.bar} />;
+      }
+    }
+    runTest(<Foo bar="foo" />, 'DIV', 'foo');
+    runTest(<Foo bar="bar" />, 'DIV', 'bar');
+  });
+
+  it('renders based on state using initial values in this.props', () => {
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {bar: this.props.initialValue};
+      }
+      render() {
+        return <span className={this.state.bar} />;
+      }
+    }
+    runTest(<Foo initialValue="foo" />, 'SPAN', 'foo');
+  });
+
+  it('renders based on state using props in the constructor', () => {
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {bar: props.initialValue};
+      }
+      changeState() {
+        this.setState({bar: 'bar'});
+      }
+      render() {
+        if (this.state.bar === 'foo') {
+          return <div className="foo" />;
+        }
+        return <span className={this.state.bar} />;
+      }
+    }
+    const ref = React.createRef();
+    runTest(<Foo initialValue="foo" ref={ref} />, 'DIV', 'foo');
+    ReactDOM.flushSync(() => ref.current.changeState());
+    runTest(<Foo />, 'SPAN', 'bar');
+  });
+
+  it('sets initial state with value returned by static getDerivedStateFromProps', () => {
+    class Foo extends React.Component {
+      state = {};
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          foo: nextProps.foo,
+          bar: 'bar',
+        };
+      }
+      render() {
+        return <div className={`${this.state.foo} ${this.state.bar}`} />;
+      }
+    }
+    runTest(<Foo foo="foo" />, 'DIV', 'foo bar');
+  });
+
+  it('warns if getDerivedStateFromProps is not static', () => {
+    class Foo extends React.Component {
+      getDerivedStateFromProps() {
+        return {};
+      }
+      render() {
+        return <div />;
+      }
+    }
+    ReactDOM.flushSync(() => root.render(<Foo foo="foo" />));
+    assertConsoleErrorDev([
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if getDerivedStateFromError is not static', () => {
+    class Foo extends React.Component {
+      getDerivedStateFromError() {
+        return {};
+      }
+      render() {
+        return <div />;
+      }
+    }
+    ReactDOM.flushSync(() => root.render(<Foo foo="foo" />));
+    assertConsoleErrorDev([
+      'Foo: getDerivedStateFromError() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if getSnapshotBeforeUpdate is static', () => {
+    class Foo extends React.Component {
+      static getSnapshotBeforeUpdate() {}
+      render() {
+        return <div />;
+      }
+    }
+    ReactDOM.flushSync(() => root.render(<Foo foo="foo" />));
+    assertConsoleErrorDev([
+      'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
+        'and will be ignored. Instead, declare it as an instance method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if state not initialized before static getDerivedStateFromProps', () => {
+    class Foo extends React.Component {
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          foo: nextProps.foo,
+          bar: 'bar',
+        };
+      }
+      render() {
+        return <div className={`${this.state.foo} ${this.state.bar}`} />;
+      }
+    }
+    ReactDOM.flushSync(() => root.render(<Foo foo="foo" />));
+    assertConsoleErrorDev([
+      '`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.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('updates initial state with values returned by static getDerivedStateFromProps', () => {
+    class Foo extends React.Component {
+      state = {
+        foo: 'foo',
+        bar: 'bar',
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          foo: `not-${prevState.foo}`,
+        };
+      }
+      render() {
+        return <div className={`${this.state.foo} ${this.state.bar}`} />;
+      }
+    }
+    runTest(<Foo />, 'DIV', 'not-foo bar');
+  });
+
+  it('renders updated state with values returned by static getDerivedStateFromProps', () => {
+    class Foo extends React.Component {
+      state = {
+        value: 'initial',
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.update) {
+          return {
+            value: 'updated',
+          };
+        }
+        return null;
+      }
+      render() {
+        return <div className={this.state.value} />;
+      }
+    }
+    runTest(<Foo update={false} />, 'DIV', 'initial');
+    runTest(<Foo update={true} />, 'DIV', 'updated');
+  });
+
+  if (!require('shared/ReactFeatureFlags').disableLegacyContext) {
+    it('renders based on context in the constructor', () => {
+      class Foo extends React.Component {
+        constructor(props, context) {
+          super(props, context);
+          this.state = {tag: context.tag, className: this.context.className};
+        }
+
+        render() {
+          const Tag = this.state.tag;
+          return <Tag className={this.state.className} />;
+        }
+      }
+
+      Foo.contextTypes = {
+        tag: PropTypes.string,
+        className: PropTypes.string,
+      };
+
+      class Outer extends React.Component {
+        getChildContext() {
+          return {tag: 'span', className: 'foo'};
+        }
+
+        render() {
+          return <Foo />;
+        }
+      }
+
+      Outer.childContextTypes = {
+        tag: PropTypes.string,
+        className: PropTypes.string,
+      };
+      runTest(<Outer />, 'SPAN', 'foo');
+
+      assertConsoleErrorDev([
+        'Outer uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Outer (at **)',
+        'Foo uses the legacy contextTypes API which will soon be removed. ' +
+          'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Outer (at **)',
+      ]);
+    });
+  }
+
+  it('renders only once when setting state in componentWillMount', () => {
+    let renderCount = 0;
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {bar: props.initialValue};
+      }
+      UNSAFE_componentWillMount() {
+        this.setState({bar: 'bar'});
+      }
+      render() {
+        renderCount++;
+        return <span className={this.state.bar} />;
+      }
+    }
+    runTest(<Foo initialValue="foo" />, 'SPAN', 'bar');
+    expect(renderCount).toBe(1);
+  });
+
+  it('should warn with non-object in the initial state property', () => {
+    [['an array'], 'a string', 1234].forEach(function (state) {
+      class Foo extends React.Component {
+        constructor() {
+          super();
+          this.state = state;
+        }
+        render() {
+          return <span />;
+        }
+      }
+      runTest(<Foo />, 'SPAN', '');
+      assertConsoleErrorDev([
+        'Foo.state: must be set to an object or null\n    in Foo (at **)',
+      ]);
+    });
+  });
+
+  it('should render with null in the initial state property', () => {
+    class Foo extends React.Component {
+      constructor() {
+        super();
+        this.state = null;
+      }
+      render() {
+        return <span />;
+      }
+    }
+    runTest(<Foo />, 'SPAN', '');
+  });
+
+  it('setState through an event handler', () => {
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {bar: props.initialValue};
+      }
+      handleClick() {
+        this.setState({bar: 'bar'});
+      }
+      render() {
+        return (
+          <Inner name={this.state.bar} onClick={this.handleClick.bind(this)} />
+        );
+      }
+    }
+    runTest(<Foo initialValue="foo" />, 'DIV', 'foo');
+
+    ReactDOM.flushSync(() => attachedListener());
+    expect(renderedName).toBe('bar');
+  });
+
+  it('should not implicitly bind event handlers', () => {
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {bar: props.initialValue};
+      }
+      handleClick() {
+        this.setState({bar: 'bar'});
+      }
+      render() {
+        return <Inner name={this.state.bar} onClick={this.handleClick} />;
+      }
+    }
+    runTest(<Foo initialValue="foo" />, 'DIV', 'foo');
+    expect(attachedListener).toThrow();
+  });
+
+  it('renders using forceUpdate even when there is no state', () => {
+    class Foo extends React.Component {
+      constructor(props) {
+        super(props);
+        this.mutativeValue = props.initialValue;
+      }
+      handleClick() {
+        this.mutativeValue = 'bar';
+        this.forceUpdate();
+      }
+      render() {
+        return (
+          <Inner
+            name={this.mutativeValue}
+            onClick={this.handleClick.bind(this)}
+          />
+        );
+      }
+    }
+    runTest(<Foo initialValue="foo" />, 'DIV', 'foo');
+    ReactDOM.flushSync(() => attachedListener());
+    expect(renderedName).toBe('bar');
+  });
+
+  it('will call all the normal life cycle methods', () => {
+    let lifeCycles = [];
+    class Foo extends React.Component {
+      constructor() {
+        super();
+        this.state = {};
+      }
+      UNSAFE_componentWillMount() {
+        lifeCycles.push('will-mount');
+      }
+      componentDidMount() {
+        lifeCycles.push('did-mount');
+      }
+      UNSAFE_componentWillReceiveProps(nextProps) {
+        lifeCycles.push('receive-props', nextProps);
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        lifeCycles.push('should-update', nextProps, nextState);
+        return true;
+      }
+      UNSAFE_componentWillUpdate(nextProps, nextState) {
+        lifeCycles.push('will-update', nextProps, nextState);
+      }
+      componentDidUpdate(prevProps, prevState) {
+        lifeCycles.push('did-update', prevProps, prevState);
+      }
+      componentWillUnmount() {
+        lifeCycles.push('will-unmount');
+      }
+      render() {
+        return <span className={this.props.value} />;
+      }
+    }
+    runTest(<Foo value="foo" />, 'SPAN', 'foo');
+    expect(lifeCycles).toEqual(['will-mount', 'did-mount']);
+    lifeCycles = []; // reset
+    runTest(<Foo value="bar" />, 'SPAN', 'bar');
+    // prettier-ignore
+    expect(lifeCycles).toEqual([
+      'receive-props', freeze({value: 'bar'}),
+      'should-update', freeze({value: 'bar'}), {},
+      'will-update', freeze({value: 'bar'}), {},
+      'did-update', freeze({value: 'foo'}), {},
+    ]);
+    lifeCycles = []; // reset
+    ReactDOM.flushSync(() => root.unmount());
+    expect(lifeCycles).toEqual(['will-unmount']);
+  });
+
+  if (!require('shared/ReactFeatureFlags').disableLegacyContext) {
+    it('warns when classic properties are defined on the instance, but does not invoke them.', () => {
+      let getDefaultPropsWasCalled = false;
+      let getInitialStateWasCalled = false;
+      class Foo extends React.Component {
+        constructor() {
+          super();
+          this.contextTypes = {};
+          this.contextType = {};
+        }
+        getInitialState() {
+          getInitialStateWasCalled = true;
+          return {};
+        }
+        getDefaultProps() {
+          getDefaultPropsWasCalled = true;
+          return {};
+        }
+        render() {
+          return <span className="foo" />;
+        }
+      }
+
+      runTest(<Foo />, 'SPAN', 'foo');
+      assertConsoleErrorDev([
+        'getInitialState was defined on Foo, a plain JavaScript class. ' +
+          'This is only supported for classes created using React.createClass. ' +
+          'Did you mean to define a state property instead?\n' +
+          '    in Foo (at **)',
+        'getDefaultProps was defined on Foo, a plain JavaScript class. ' +
+          'This is only supported for classes created using React.createClass. ' +
+          'Use a static property to define defaultProps instead.\n' +
+          '    in Foo (at **)',
+        'contextType was defined as an instance property on Foo. ' +
+          'Use a static property to define contextType instead.\n' +
+          '    in Foo (at **)',
+        'contextTypes was defined as an instance property on Foo. ' +
+          'Use a static property to define contextTypes instead.\n' +
+          '    in Foo (at **)',
+      ]);
+      expect(getInitialStateWasCalled).toBe(false);
+      expect(getDefaultPropsWasCalled).toBe(false);
+    });
+  }
+
+  it('does not warn about getInitialState() on class components if state is also defined.', () => {
+    class Foo extends React.Component {
+      state = this.getInitialState();
+      getInitialState() {
+        return {};
+      }
+      render() {
+        return <span className="foo" />;
+      }
+    }
+    runTest(<Foo />, 'SPAN', 'foo');
+  });
+
+  it('should warn when misspelling shouldComponentUpdate', () => {
+    class NamedComponent extends React.Component {
+      componentShouldUpdate() {
+        return false;
+      }
+      render() {
+        return <span className="foo" />;
+      }
+    }
+
+    runTest(<NamedComponent />, 'SPAN', 'foo');
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in NamedComponent (at **)',
+    ]);
+  });
+
+  it('should warn when misspelling componentWillReceiveProps', () => {
+    class NamedComponent extends React.Component {
+      componentWillRecieveProps() {
+        return false;
+      }
+      render() {
+        return <span className="foo" />;
+      }
+    }
+
+    runTest(<NamedComponent />, 'SPAN', 'foo');
+    assertConsoleErrorDev([
+      'NamedComponent has a method called componentWillRecieveProps(). Did ' +
+        'you mean componentWillReceiveProps()?\n' +
+        '     in NamedComponent (at **)',
+    ]);
+  });
+
+  it('should warn when misspelling UNSAFE_componentWillReceiveProps', () => {
+    class NamedComponent extends React.Component {
+      UNSAFE_componentWillRecieveProps() {
+        return false;
+      }
+      render() {
+        return <span className="foo" />;
+      }
+    }
+
+    runTest(<NamedComponent />, 'SPAN', 'foo');
+    assertConsoleErrorDev([
+      'NamedComponent has a method called UNSAFE_componentWillRecieveProps(). ' +
+        'Did you mean UNSAFE_componentWillReceiveProps()?\n' +
+        '    in NamedComponent (at **)',
+    ]);
+  });
+
+  it('should throw AND warn when trying to access classic APIs', () => {
+    const ref = React.createRef();
+    runTest(<Inner name="foo" ref={ref} />, 'DIV', 'foo');
+
+    expect(() => ref.current.replaceState({})).toThrow();
+    assertConsoleWarnDev(
+      [
+        'replaceState(...) is deprecated in plain JavaScript React classes. ' +
+          'Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236).',
+      ],
+      {withoutStack: true},
+    );
+    expect(() => ref.current.isMounted()).toThrow();
+    assertConsoleWarnDev(
+      [
+        'isMounted(...) is deprecated in plain JavaScript React classes. ' +
+          'Instead, make sure to clean up subscriptions and pending requests in ' +
+          'componentWillUnmount to prevent memory leaks.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  if (!require('shared/ReactFeatureFlags').disableLegacyContext) {
+    it('supports this.context passed via getChildContext', () => {
+      class Bar extends React.Component {
+        render() {
+          return <div className={this.context.bar} />;
+        }
+      }
+
+      Bar.contextTypes = {bar: PropTypes.string};
+
+      class Foo extends React.Component {
+        getChildContext() {
+          return {bar: 'bar-through-context'};
+        }
+
+        render() {
+          return <Bar />;
+        }
+      }
+
+      Foo.childContextTypes = {bar: PropTypes.string};
+      runTest(<Foo />, 'DIV', 'bar-through-context');
+      assertConsoleErrorDev([
+        'Foo uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Foo (at **)',
+        'Bar uses the legacy contextTypes API which will soon be removed. ' +
+          'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in Foo (at **)',
+      ]);
+    });
+  }
+});
diff --git a/packages/react/src/__tests__/ReactElementClone-test.js b/packages/react/src/__tests__/ReactElementClone-test.js
new file mode 100644
index 00000000000..81da2a6f394
--- /dev/null
+++ b/packages/react/src/__tests__/ReactElementClone-test.js
@@ -0,0 +1,401 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 React;
+let ReactDOMClient;
+let assertConsoleErrorDev;
+
+describe('ReactElementClone', () => {
+  let ComponentClass;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+
+    // NOTE: We're explicitly not using JSX here. This is intended to test
+    // classic JS without JSX.
+    ComponentClass = class extends React.Component {
+      render() {
+        return React.createElement('div');
+      }
+    };
+  });
+
+  it('should clone a DOM component with new props', async () => {
+    let div;
+    class Grandparent extends React.Component {
+      render() {
+        return (
+          <Parent
+            child={<div ref={node => (div = node)} className="child" />}
+          />
+        );
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return (
+          <div className="parent">
+            {React.cloneElement(this.props.child, {className: 'xyz'})}
+          </div>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Grandparent />);
+    });
+    expect(div.className).toBe('xyz');
+  });
+
+  it('should clone a composite component with new props', async () => {
+    let div;
+    class Child extends React.Component {
+      render() {
+        return (
+          <div ref={node => (div = node)} className={this.props.className} />
+        );
+      }
+    }
+    class Grandparent extends React.Component {
+      render() {
+        return <Parent child={<Child className="child" />} />;
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return (
+          <div className="parent">
+            {React.cloneElement(this.props.child, {className: 'xyz'})}
+          </div>
+        );
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Grandparent />);
+    });
+    expect(div.className).toBe('xyz');
+  });
+
+  it('does not fail if config has no prototype', () => {
+    const config = Object.create(null, {foo: {value: 1, enumerable: true}});
+    React.cloneElement(<div />, config);
+  });
+
+  it('should keep the original ref if it is not overridden', async () => {
+    let component;
+    class Grandparent extends React.Component {
+      yoloRef = React.createRef();
+
+      componentDidMount() {
+        component = this;
+      }
+
+      render() {
+        return <Parent child={<div ref={this.yoloRef} />} />;
+      }
+    }
+
+    class Parent extends React.Component {
+      render() {
+        return (
+          <div>{React.cloneElement(this.props.child, {className: 'xyz'})}</div>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Grandparent />);
+    });
+
+    expect(component.yoloRef.current.tagName).toBe('DIV');
+  });
+
+  it('should transfer the key property', () => {
+    class Component extends React.Component {
+      render() {
+        return null;
+      }
+    }
+    const clone = React.cloneElement(<Component />, {key: 'xyz'});
+    expect(clone.key).toBe('xyz');
+  });
+
+  it('should transfer children', async () => {
+    class Component extends React.Component {
+      render() {
+        expect(this.props.children).toBe('xyz');
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.cloneElement(<Component />, {children: 'xyz'}));
+    });
+  });
+
+  it('should shallow clone children', async () => {
+    class Component extends React.Component {
+      render() {
+        expect(this.props.children).toBe('xyz');
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.cloneElement(<Component>xyz</Component>, {}));
+    });
+  });
+
+  it('should accept children as rest arguments', () => {
+    class Component extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    const clone = React.cloneElement(
+      <Component>xyz</Component>,
+      {children: <Component />},
+      <div />,
+      <span />,
+    );
+
+    expect(clone.props.children).toEqual([<div />, <span />]);
+  });
+
+  it('should override children if undefined is provided as an argument', () => {
+    const element = React.createElement(
+      ComponentClass,
+      {
+        children: 'text',
+      },
+      undefined,
+    );
+    expect(element.props.children).toBe(undefined);
+
+    const element2 = React.cloneElement(
+      React.createElement(ComponentClass, {
+        children: 'text',
+      }),
+      {},
+      undefined,
+    );
+    expect(element2.props.children).toBe(undefined);
+  });
+
+  it('should support keys and refs', async () => {
+    let component;
+    class Parent extends React.Component {
+      xyzRef = React.createRef();
+
+      render() {
+        const clone = React.cloneElement(this.props.children, {
+          key: 'xyz',
+          ref: this.xyzRef,
+        });
+        expect(clone.key).toBe('xyz');
+        expect(clone.props.ref).toBe(this.xyzRef);
+        return <div>{clone}</div>;
+      }
+    }
+
+    class Grandparent extends React.Component {
+      parentRef = React.createRef();
+
+      componentDidMount() {
+        component = this;
+      }
+
+      render() {
+        return (
+          <Parent ref={this.parentRef}>
+            <span key="abc" />
+          </Parent>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(<Grandparent />));
+    expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
+  });
+
+  it('should steal the ref if a new ref is specified', async () => {
+    let component;
+    class Parent extends React.Component {
+      xyzRef = React.createRef();
+
+      render() {
+        const clone = React.cloneElement(this.props.children, {
+          ref: this.xyzRef,
+        });
+        return <div>{clone}</div>;
+      }
+    }
+
+    class Grandparent extends React.Component {
+      parentRef = React.createRef();
+      childRef = React.createRef();
+
+      componentDidMount() {
+        component = this;
+      }
+
+      render() {
+        return (
+          <Parent ref={this.parentRef}>
+            <span ref={this.childRef} />
+          </Parent>
+        );
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(<Grandparent />));
+    expect(component.childRef).toEqual({current: null});
+    expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
+  });
+
+  it('should overwrite props', async () => {
+    class Component extends React.Component {
+      render() {
+        expect(this.props.myprop).toBe('xyz');
+        return <div />;
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() =>
+      root.render(
+        React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
+      ),
+    );
+  });
+
+  it('warns for keys for arrays of elements in rest args', async () => {
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.cloneElement(<div />, null, [<div />, <div />]));
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the top-level render call using <div>. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('does not warns for arrays of elements with keys', async () => {
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(
+        React.cloneElement(<div />, null, [<div key="#1" />, <div key="#2" />]),
+      );
+    });
+  });
+
+  it('does not warn when the element is directly in rest args', async () => {
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(React.cloneElement(<div />, null, <div />, <div />));
+    });
+  });
+
+  it('does not warn when the array contains a non-element', () => {
+    React.cloneElement(<div />, null, [{}, {}]);
+  });
+
+  it('should ignore key and ref warning getters', () => {
+    const elementA = React.createElement('div');
+    const elementB = React.cloneElement(elementA, elementA.props);
+    expect(elementB.key).toBe(null);
+    expect(elementB.ref).toBe(null);
+  });
+
+  it('should ignore undefined key and ref', () => {
+    const element = React.createElement(ComponentClass, {
+      key: '12',
+      ref: '34',
+      foo: '56',
+    });
+    const props = {
+      key: undefined,
+      ref: undefined,
+      foo: 'ef',
+    };
+    const clone = React.cloneElement(element, props);
+    expect(clone.type).toBe(ComponentClass);
+    expect(clone.key).toBe('12');
+    expect(clone.props.ref).toBe('34');
+    expect(clone.ref).toBe('34');
+    assertConsoleErrorDev(
+      [
+        'Accessing element.ref was removed in React 19. ref is now a ' +
+          'regular prop. It will be removed from the JSX Element ' +
+          'type in a future release.',
+      ],
+      {
+        withoutStack: true,
+      },
+    );
+    expect(clone.props).toEqual({foo: 'ef', ref: '34'});
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+  });
+
+  it('should extract null key and ref', () => {
+    const element = React.createElement(ComponentClass, {
+      key: '12',
+      ref: '34',
+      foo: '56',
+    });
+    const props = {
+      key: null,
+      ref: null,
+      foo: 'ef',
+    };
+    const clone = React.cloneElement(element, props);
+    expect(clone.type).toBe(ComponentClass);
+    expect(clone.key).toBe('null');
+    expect(clone.ref).toBe(null);
+    expect(clone.props).toEqual({foo: 'ef', ref: null});
+    if (__DEV__) {
+      expect(Object.isFrozen(element)).toBe(true);
+      expect(Object.isFrozen(element.props)).toBe(true);
+    }
+  });
+
+  it('throws an error if passed null', () => {
+    const element = null;
+    expect(() => React.cloneElement(element)).toThrow(
+      'The argument must be a React element, but you passed null.',
+    );
+  });
+
+  it('throws an error if passed undefined', () => {
+    let element;
+    expect(() => React.cloneElement(element)).toThrow(
+      'The argument must be a React element, but you passed undefined.',
+    );
+  });
+});
diff --git a/packages/react/src/__tests__/ReactElementValidator-test.internal.js b/packages/react/src/__tests__/ReactElementValidator-test.internal.js
new file mode 100644
index 00000000000..f1ee7026346
--- /dev/null
+++ b/packages/react/src/__tests__/ReactElementValidator-test.internal.js
@@ -0,0 +1,531 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// NOTE: We're explicitly not using JSX in this file. This is intended to test
+// classic React.createElement without JSX.
+// TODO: ^ the above note is a bit stale because there are tests in this file
+// that do use JSX syntax. We should port them to React.createElement, and also
+// confirm there's a corresponding test that uses JSX syntax.
+
+let React;
+let ReactDOMClient;
+let act;
+let assertConsoleErrorDev;
+
+describe('ReactElementValidator', () => {
+  let ComponentClass;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+    ComponentClass = class extends React.Component {
+      render() {
+        return React.createElement('div', null, this.props.children);
+      }
+    };
+  });
+
+  it('warns for keys for arrays of elements in rest args', async () => {
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() =>
+      root.render(
+        React.createElement(ComponentClass, null, [
+          React.createElement(ComponentClass),
+          React.createElement(ComponentClass),
+        ]),
+      ),
+    );
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `ComponentClass`. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in ComponentClass (at **)',
+    ]);
+  });
+
+  it('warns for keys for arrays of elements with owner info', async () => {
+    class InnerClass extends React.Component {
+      render() {
+        return React.createElement(ComponentClass, null, this.props.childSet);
+      }
+    }
+
+    class ComponentWrapper extends React.Component {
+      render() {
+        return React.createElement(InnerClass, {
+          childSet: [
+            React.createElement(ComponentClass),
+            React.createElement(ComponentClass),
+          ],
+        });
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(React.createElement(ComponentWrapper)));
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the render method of `ComponentClass`. ' +
+        'It was passed a child from ComponentWrapper. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in ComponentWrapper (at **)',
+    ]);
+  });
+
+  it('warns for keys for arrays with no owner or parent info', async () => {
+    function Anonymous({children}) {
+      return <div>{children}</div>;
+    }
+    Object.defineProperty(Anonymous, 'name', {value: undefined});
+
+    const divs = [<div />, <div />];
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(<Anonymous>{divs}</Anonymous>));
+    assertConsoleErrorDev([
+      // For owner stacks the parent being validated is the div.
+      'Each child in a list should have a unique ' +
+        '"key" prop.' +
+        '\n\nCheck the top-level render call using <div>. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('warns for keys for arrays of elements with no owner info', async () => {
+    const divs = [<div />, <div />];
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    await act(() => root.render(<div>{divs}</div>));
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique ' +
+        '"key" prop.' +
+        '\n\nCheck the top-level render call using <div>. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)',
+    ]);
+  });
+
+  it('warns for keys with component stack info', async () => {
+    function Component() {
+      return <div>{[<div />, <div />]}</div>;
+    }
+
+    function Parent(props) {
+      return React.cloneElement(props.child);
+    }
+
+    function GrandParent() {
+      return <Parent child={<Component />} />;
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(<GrandParent />));
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique ' +
+        '"key" prop.\n\nCheck the render method of `Component`. See ' +
+        'https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)\n' +
+        '    in Component (at **)\n' +
+        '    in GrandParent (at **)',
+    ]);
+  });
+
+  it('does not warn for keys when passing children down', async () => {
+    function Wrapper(props) {
+      return (
+        <div>
+          {props.children}
+          <footer />
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() =>
+      root.render(
+        <Wrapper>
+          <span />
+          <span />
+        </Wrapper>,
+      ),
+    );
+  });
+
+  it('warns for keys for iterables of elements in rest args', async () => {
+    const iterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            const done = ++i > 2;
+            return {
+              value: done ? undefined : React.createElement(ComponentClass),
+              done: done,
+            };
+          },
+        };
+      },
+    };
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() =>
+      root.render(React.createElement(ComponentClass, null, iterable)),
+    );
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `ComponentClass`. It was passed a child from div. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in ComponentClass (at **)',
+    ]);
+  });
+
+  it('does not warns for arrays of elements with keys', () => {
+    React.createElement(ComponentClass, null, [
+      React.createElement(ComponentClass, {key: '#1'}),
+      React.createElement(ComponentClass, {key: '#2'}),
+    ]);
+  });
+
+  it('does not warns for iterable elements with keys', () => {
+    const iterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            const done = ++i > 2;
+            return {
+              value: done
+                ? undefined
+                : React.createElement(ComponentClass, {key: '#' + i}),
+              done: done,
+            };
+          },
+        };
+      },
+    };
+
+    React.createElement(ComponentClass, null, iterable);
+  });
+
+  it('does not warn when the element is directly in rest args', () => {
+    React.createElement(
+      ComponentClass,
+      null,
+      React.createElement(ComponentClass),
+      React.createElement(ComponentClass),
+    );
+  });
+
+  it('does not warn when the array contains a non-element', () => {
+    React.createElement(ComponentClass, null, [{}, {}]);
+  });
+
+  it('should give context for errors in nested components.', async () => {
+    function MyComp() {
+      return [React.createElement('div')];
+    }
+    function ParentComp() {
+      return React.createElement(MyComp);
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(React.createElement(ParentComp)));
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the render method of `ParentComp`. It was passed a child from MyComp. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)\n' +
+        '    in MyComp (at **)\n' +
+        '    in ParentComp (at **)',
+    ]);
+  });
+
+  it('gives a helpful error when passing invalid types', async () => {
+    function Foo() {}
+    const errors = [];
+    const root = ReactDOMClient.createRoot(document.createElement('div'), {
+      onUncaughtError(error) {
+        errors.push(error.message);
+      },
+    });
+    const cases = [
+      [
+        () => React.createElement(undefined),
+        '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 ' +
+          "component from the file it's defined in, or you might have mixed up " +
+          'default and named imports.',
+      ],
+      [
+        () => React.createElement(null),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: null.',
+      ],
+      [
+        () => React.createElement(true),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: boolean.',
+      ],
+      [
+        () => React.createElement({x: 17}),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: object.',
+      ],
+      [
+        () => React.createElement({}),
+        '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 ' +
+          "component from the file it's defined in, or you might have mixed up " +
+          'default and named imports.',
+      ],
+      [
+        () => React.createElement(React.createElement('div')),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: <div />. Did you accidentally export a JSX literal ' +
+          'instead of a component?',
+      ],
+      [
+        () => React.createElement(React.createElement(Foo)),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: <Foo />. Did you accidentally export a JSX literal ' +
+          'instead of a component?',
+      ],
+      [
+        () =>
+          React.createElement(
+            React.createElement(React.createContext().Consumer),
+          ),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: <Context.Consumer />. Did you accidentally ' +
+          'export a JSX literal instead of a component?',
+      ],
+      [
+        () => React.createElement({$$typeof: 'non-react-thing'}),
+        'React.createElement: type is invalid -- expected a string ' +
+          '(for built-in components) or a class/function (for composite ' +
+          'components) but got: object.',
+      ],
+    ];
+    for (let i = 0; i < cases.length; i++) {
+      await act(async () => root.render(cases[i][0]()));
+    }
+
+    expect(errors).toEqual(
+      __DEV__
+        ? [
+            'Element 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 ' +
+              "component from the file it's defined in, or you might have mixed up " +
+              'default and named imports.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: null.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: boolean.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+            'Element 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 ' +
+              "component from the file it's defined in, or you might have mixed up " +
+              'default and named imports.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: <div />. Did you accidentally export a JSX literal ' +
+              'instead of a component?',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: <Foo />. Did you accidentally export a JSX literal ' +
+              'instead of a component?',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: <Context.Consumer />. Did you accidentally ' +
+              'export a JSX literal instead of a component?',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+          ]
+        : [
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: undefined.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: null.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: boolean.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+            'Element type is invalid: expected a string ' +
+              '(for built-in components) or a class/function (for composite ' +
+              'components) but got: object.',
+          ],
+    );
+
+    // Should not log any additional warnings
+    React.createElement('div');
+  });
+
+  it('includes the owner name when passing null, undefined, boolean, or number', async () => {
+    function ParentComp() {
+      return React.createElement(null);
+    }
+
+    await expect(async () => {
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await act(() => root.render(React.createElement(ParentComp)));
+    }).rejects.toThrowError(
+      'Element type is invalid: expected a string (for built-in components) ' +
+        'or a class/function (for composite components) but got: null.' +
+        (__DEV__ ? '\n\nCheck the render method of `ParentComp`.' : ''),
+    );
+  });
+
+  it('warns for fragments with illegal attributes', async () => {
+    class Foo extends React.Component {
+      render() {
+        return React.createElement(React.Fragment, {a: 1}, '123');
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => root.render(React.createElement(Foo)));
+    assertConsoleErrorDev([
+      gate('enableFragmentRefs')
+        ? 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+          'can only have `key`, `ref`, and `children` props.\n' +
+          '    in Foo (at **)'
+        : 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+          'can only have `key` and `children` props.\n' +
+          '    in Foo (at **)',
+    ]);
+  });
+
+  it('does not warn when using DOM node as children', async () => {
+    class DOMContainer extends React.Component {
+      ref;
+      render() {
+        return <div ref={n => (this.ref = n)} />;
+      }
+      componentDidMount() {
+        this.ref.appendChild(this.props.children);
+      }
+    }
+
+    const node = document.createElement('div');
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      // This shouldn't cause a stack overflow or any other problems (#3883)
+      root.render(<DOMContainer>{node}</DOMContainer>);
+    });
+  });
+
+  it('should not enumerate enumerable numbers (#4776)', () => {
+    /*eslint-disable no-extend-native */
+    Number.prototype['@@iterator'] = function () {
+      throw new Error('number iterator called');
+    };
+    /*eslint-enable no-extend-native */
+
+    try {
+      void (
+        <div>
+          {5}
+          {12}
+          {13}
+        </div>
+      );
+    } finally {
+      delete Number.prototype['@@iterator'];
+    }
+  });
+
+  it('does not blow up with inlined children', () => {
+    // We don't suggest this since it silences all sorts of warnings, but we
+    // shouldn't blow up either.
+
+    const child = {
+      $$typeof: (<div />).$$typeof,
+      type: 'span',
+      key: null,
+      ref: null,
+      props: {},
+      _owner: null,
+    };
+
+    void (<div>{[child]}</div>);
+  });
+
+  it('does not blow up on key warning with undefined type', () => {
+    const Foo = undefined;
+    void (<Foo>{[<div />]}</Foo>);
+  });
+
+  it('does not call lazy initializers eagerly', () => {
+    let didCall = false;
+    const Lazy = React.lazy(() => {
+      didCall = true;
+      return {then() {}};
+    });
+    React.createElement(Lazy);
+    expect(didCall).toBe(false);
+  });
+
+  it('__self and __source are treated as normal props', async () => {
+    // These used to be reserved props because the classic React.createElement
+    // runtime passed this data as props, whereas the jsxDEV() runtime passes
+    // them as separate arguments.
+    function Child({__self, __source}) {
+      return __self + __source;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    // NOTE: The Babel transform treats the presence of these props as a syntax
+    // error but theoretically it doesn't have to. Using spread here to
+    // circumvent the syntax error and demonstrate that the runtime
+    // doesn't care.
+    const props = {
+      __self: 'Hello ',
+      __source: 'world!',
+    };
+    await act(() => root.render(<Child {...props} />));
+    expect(container.textContent).toBe('Hello world!');
+  });
+});
diff --git a/packages/react/src/__tests__/ReactJSXElementValidator-test.js b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
new file mode 100644
index 00000000000..41ee720478a
--- /dev/null
+++ b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// TODO: All these warnings should become static errors using Flow instead
+// of dynamic errors when using JSX with Flow.
+let act;
+let React;
+let ReactDOMClient;
+let assertConsoleErrorDev;
+
+describe('ReactJSXElementValidator', () => {
+  let Component;
+  let RequiredPropComponent;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+
+    Component = class extends React.Component {
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    };
+
+    RequiredPropComponent = class extends React.Component {
+      render() {
+        return <span>{this.props.prop}</span>;
+      }
+    };
+    RequiredPropComponent.displayName = 'RequiredPropComponent';
+  });
+
+  it('warns for keys for arrays of elements in children position', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component>{[<Component />, <Component />]}</Component>);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `Component`. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('warns for keys for arrays of elements with owner info', async () => {
+    class InnerComponent extends React.Component {
+      render() {
+        return <Component>{this.props.childSet}</Component>;
+      }
+    }
+
+    class ComponentWrapper extends React.Component {
+      render() {
+        return <InnerComponent childSet={[<Component />, <Component />]} />;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<ComponentWrapper />);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the render method of `Component`. ' +
+        'It was passed a child from ComponentWrapper. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in ComponentWrapper (at **)',
+    ]);
+  });
+
+  it('warns for keys for iterables of elements in rest args', async () => {
+    const iterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            const done = ++i > 2;
+            return {value: done ? undefined : <Component />, done: done};
+          },
+        };
+      },
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component>{iterable}</Component>);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `Component`. It was passed a child from div. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('does not warn for arrays of elements with keys', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <Component>
+          {[<Component key="#1" />, <Component key="#2" />]}
+        </Component>,
+      );
+    });
+  });
+
+  it('does not warn for iterable elements with keys', async () => {
+    const iterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            const done = ++i > 2;
+            return {
+              value: done ? undefined : <Component key={'#' + i} />,
+              done: done,
+            };
+          },
+        };
+      },
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<Component>{iterable}</Component>);
+    });
+  });
+
+  it('does not warn for numeric keys in entry iterable as a child', async () => {
+    const iterable = {
+      '@@iterator': function () {
+        let i = 0;
+        return {
+          next: function () {
+            const done = ++i > 2;
+            return {value: done ? undefined : [i, <Component />], done: done};
+          },
+        };
+      },
+    };
+    iterable.entries = iterable['@@iterator'];
+
+    // This only applies to the warning during construction.
+    // We do warn if it's actually rendered.
+    <Component>{iterable}</Component>;
+  });
+
+  it('does not warn when the element is directly as children', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <Component>
+          <Component />
+          <Component />
+        </Component>,
+      );
+    });
+  });
+
+  it('does not warn when the child array contains non-elements', () => {
+    void (<Component>{[{}, {}]}</Component>);
+  });
+
+  it('should give context for errors in nested components.', async () => {
+    class MyComp extends React.Component {
+      render() {
+        return [<div />];
+      }
+    }
+    class ParentComp extends React.Component {
+      render() {
+        return <MyComp />;
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ParentComp />);
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the render method of `ParentComp`. It was passed a child from MyComp. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in div (at **)\n' +
+        '    in MyComp (at **)\n' +
+        '    in ParentComp (at **)',
+    ]);
+  });
+
+  it('warns for fragments with illegal attributes', async () => {
+    class Foo extends React.Component {
+      render() {
+        return <React.Fragment a={1}>hello</React.Fragment>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+    assertConsoleErrorDev([
+      gate('enableFragmentRefs')
+        ? 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+          'can only have `key`, `ref`, and `children` props.\n' +
+          '    in Foo (at **)'
+        : 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +
+          'can only have `key` and `children` props.\n' +
+          '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns for fragments with refs', async () => {
+    class Foo extends React.Component {
+      render() {
+        return (
+          <React.Fragment
+            ref={bar => {
+              this.foo = bar;
+            }}>
+            hello
+          </React.Fragment>
+        );
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Foo />);
+    });
+    assertConsoleErrorDev(
+      gate('enableFragmentRefs')
+        ? []
+        : [
+            'Invalid prop `ref` supplied to `React.Fragment`.' +
+              ' React.Fragment can only have `key` and `children` props.\n' +
+              '    in Foo (at **)',
+          ],
+    );
+  });
+
+  it('does not warn for fragments of multiple elements without keys', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <>
+          <span>1</span>
+          <span>2</span>
+        </>,
+      );
+    });
+  });
+
+  it('warns for fragments of multiple elements with same key', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <>
+          <span key="a">1</span>
+          <span key="a">2</span>
+          <span key="b">3</span>
+        </>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Encountered two children with the same key, `a`. ' +
+        '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 could change in a future version.\n' +
+        '    in span (at **)',
+    ]);
+  });
+
+  it('does not call lazy initializers eagerly', () => {
+    let didCall = false;
+    const Lazy = React.lazy(() => {
+      didCall = true;
+      return {then() {}};
+    });
+    <Lazy />;
+    expect(didCall).toBe(false);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactJSXRuntime-test.js b/packages/react/src/__tests__/ReactJSXRuntime-test.js
new file mode 100644
index 00000000000..3553561086b
--- /dev/null
+++ b/packages/react/src/__tests__/ReactJSXRuntime-test.js
@@ -0,0 +1,388 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let JSXRuntime;
+let JSXDEVRuntime;
+let act;
+let assertConsoleErrorDev;
+
+// NOTE: Prefer to call the JSXRuntime directly in these tests so we can be
+// certain that we are testing the runtime behavior, as opposed to the Babel
+// transform that we use in our tests configuration.
+describe('ReactJSXRuntime', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    JSXRuntime = require('react/jsx-runtime');
+    JSXDEVRuntime = require('react/jsx-dev-runtime');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+  });
+
+  it('allows static methods to be called using the type property', () => {
+    class StaticMethodComponentClass extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {});
+      }
+    }
+    StaticMethodComponentClass.someStaticMethod = () => 'someReturnValue';
+
+    const element = JSXRuntime.jsx(StaticMethodComponentClass, {});
+    expect(element.type.someStaticMethod()).toBe('someReturnValue');
+  });
+
+  it('is indistinguishable from a plain object', () => {
+    const element = JSXRuntime.jsx('div', {className: 'foo'});
+    const object = {};
+    expect(element.constructor).toBe(object.constructor);
+  });
+
+  it('should use default prop value when removing a prop', async () => {
+    class Component extends React.Component {
+      render() {
+        return JSXRuntime.jsx('span', {children: [this.props.fruit]});
+      }
+    }
+    Component.defaultProps = {fruit: 'persimmon'};
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Component, {fruit: 'mango'}));
+    });
+    expect(container.firstChild.textContent).toBe('mango');
+
+    await act(() => {
+      root.render(JSXRuntime.jsx(Component, {}));
+    });
+    expect(container.firstChild.textContent).toBe('persimmon');
+  });
+
+  it('should normalize props with default values', async () => {
+    class Component extends React.Component {
+      render() {
+        return JSXRuntime.jsx('span', {children: this.props.prop});
+      }
+    }
+    Component.defaultProps = {prop: 'testKey'};
+
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(
+        JSXRuntime.jsx(Component, {ref: current => (instance = current)}),
+      );
+    });
+
+    expect(instance.props.prop).toBe('testKey');
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    let inst2;
+    await act(() => {
+      root.render(
+        JSXRuntime.jsx(Component, {
+          prop: null,
+          ref: current => (inst2 = current),
+        }),
+      );
+    });
+
+    expect(inst2.props.prop).toBe(null);
+  });
+
+  it('throws when changing a prop (in dev) after element creation', async () => {
+    class Outer extends React.Component {
+      render() {
+        const el = JSXRuntime.jsx('div', {className: 'moo'});
+
+        if (__DEV__) {
+          expect(function () {
+            el.props.className = 'quack';
+          }).toThrow();
+          expect(el.props.className).toBe('moo');
+        } else {
+          el.props.className = 'quack';
+          expect(el.props.className).toBe('quack');
+        }
+
+        return el;
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Outer, {color: 'orange'}));
+    });
+
+    const outer = container.firstChild;
+    if (__DEV__) {
+      expect(outer.className).toBe('moo');
+    } else {
+      expect(outer.className).toBe('quack');
+    }
+  });
+
+  it('throws when adding a prop (in dev) after element creation', async () => {
+    const container = document.createElement('div');
+    class Outer extends React.Component {
+      render() {
+        const el = JSXRuntime.jsx('div', {children: this.props.sound});
+
+        if (__DEV__) {
+          expect(function () {
+            el.props.className = 'quack';
+          }).toThrow();
+          expect(el.props.className).toBe(undefined);
+        } else {
+          el.props.className = 'quack';
+          expect(el.props.className).toBe('quack');
+        }
+
+        return el;
+      }
+    }
+    Outer.defaultProps = {sound: 'meow'};
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Outer, {}));
+    });
+    expect(container.firstChild.textContent).toBe('meow');
+    if (__DEV__) {
+      expect(container.firstChild.className).toBe('');
+    } else {
+      expect(container.firstChild.className).toBe('quack');
+    }
+  });
+
+  it('does not warn for NaN props', async () => {
+    class Test extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {});
+      }
+    }
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let test;
+    await act(() => {
+      root.render(
+        JSXRuntime.jsx(Test, {
+          value: +undefined,
+          ref: current => (test = current),
+        }),
+      );
+    });
+
+    expect(test.props.value).toBeNaN();
+  });
+
+  it('should warn when `key` is being accessed on composite element', async () => {
+    const container = document.createElement('div');
+    class Child extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {children: this.props.key});
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return JSXRuntime.jsxs('div', {
+          children: [
+            JSXRuntime.jsx(Child, {}, '0'),
+            JSXRuntime.jsx(Child, {}, '1'),
+            JSXRuntime.jsx(Child, {}, '2'),
+          ],
+        });
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Parent, {}));
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/special-props)\n' +
+        '    in Parent (at **)',
+    ]);
+  });
+
+  it('warns when a jsxs is passed something that is not an array', async () => {
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsxs('div', {children: 'foo'}, null));
+    });
+    assertConsoleErrorDev(
+      [
+        '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 = JSXRuntime.jsxs('div', {}, '3');
+    void element.props.key;
+    assertConsoleErrorDev(
+      [
+        '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 ' +
+          'prop. (https://react.dev/link/special-props)',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn when unkeyed children are passed to jsx', async () => {
+    const container = document.createElement('div');
+
+    class Child extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {});
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {
+          children: [
+            JSXRuntime.jsx(Child, {}),
+            JSXRuntime.jsx(Child, {}),
+            JSXRuntime.jsx(Child, {}),
+          ],
+        });
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Parent, {}));
+    });
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.\n\n' +
+        'Check the render method of `Parent`. See https://react.dev/link/warning-keys for more information.\n' +
+        '    in Parent (at **)',
+    ]);
+  });
+
+  it('should warn when keys are passed as part of props', async () => {
+    const container = document.createElement('div');
+    class Child extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {});
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {
+          children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})],
+        });
+      }
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Parent, {}));
+    });
+    assertConsoleErrorDev([
+      'A props object containing a "key" prop is being spread into JSX:\n' +
+        '  let props = {key: someKey, prop: ...};\n' +
+        '  <Child {...props} />\n' +
+        'React keys must be passed directly to JSX without using spread:\n' +
+        '  let props = {prop: ...};\n' +
+        '  <Child key={someKey} {...props} />\n' +
+        '    in Parent (at **)',
+    ]);
+  });
+
+  it('should not warn when unkeyed children are passed to jsxs', async () => {
+    const container = document.createElement('div');
+    class Child extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {});
+      }
+    }
+    class Parent extends React.Component {
+      render() {
+        return JSXRuntime.jsxs('div', {
+          children: [
+            JSXRuntime.jsx(Child, {}),
+            JSXRuntime.jsx(Child, {}),
+            JSXRuntime.jsx(Child, {}),
+          ],
+        });
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(JSXRuntime.jsx(Parent, {}));
+    });
+
+    // Test shouldn't throw any errors.
+    expect(true).toBe(true);
+  });
+
+  it('does not call lazy initializers eagerly', () => {
+    let didCall = false;
+    const Lazy = React.lazy(() => {
+      didCall = true;
+      return {then() {}};
+    });
+    if (__DEV__) {
+      JSXDEVRuntime.jsxDEV(Lazy, {});
+    } else {
+      JSXRuntime.jsx(Lazy, {});
+    }
+    expect(didCall).toBe(false);
+  });
+
+  it('does not clone props object if key and ref is not spread', async () => {
+    const config = {
+      foo: 'foo',
+      bar: 'bar',
+    };
+
+    const element = __DEV__
+      ? JSXDEVRuntime.jsxDEV('div', config)
+      : JSXRuntime.jsx('div', config);
+    expect(Object.is(element.props, config)).toBe(true);
+
+    const configWithKey = {
+      foo: 'foo',
+      bar: 'bar',
+      // This only happens when the key is spread onto the element. A statically
+      // defined key is passed as a separate argument to the jsx() runtime.
+      key: 'key',
+    };
+
+    const elementWithSpreadKey = __DEV__
+      ? JSXDEVRuntime.jsxDEV('div', configWithKey)
+      : JSXRuntime.jsx('div', configWithKey);
+    assertConsoleErrorDev(
+      [
+        'A props object containing a "key" prop is being spread into JSX:\n' +
+          '  let props = {key: someKey, foo: ..., bar: ...};\n' +
+          '  <div {...props} />\n' +
+          'React keys must be passed directly to JSX without using spread:\n' +
+          '  let props = {foo: ..., bar: ...};\n' +
+          '  <div key={someKey} {...props} />',
+      ],
+      {withoutStack: true},
+    );
+    expect(elementWithSpreadKey.props).not.toBe(configWithKey);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactJSXTransformIntegration-test.js b/packages/react/src/__tests__/ReactJSXTransformIntegration-test.js
new file mode 100644
index 00000000000..5075c4a9a0b
--- /dev/null
+++ b/packages/react/src/__tests__/ReactJSXTransformIntegration-test.js
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+let assertConsoleErrorDev;
+
+// TODO: Historically this module was used to confirm that the JSX transform
+// produces the correct output. However, most users (and indeed our own test
+// suite) use a tool like Babel or TypeScript to transform JSX; unlike the
+// runtime, the transform is not part of React itself. So this is really just an
+// integration suite for the Babel transform. We might consider deleting it. We
+// should prefer to test the JSX runtime directly, in ReactCreateElement-test
+// and ReactJsxRuntime-test. In the meantime, there's lots of overlap between
+// those modules and this one.
+describe('ReactJSXTransformIntegration', () => {
+  let Component;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+
+    Component = class extends React.Component {
+      render() {
+        return <div />;
+      }
+    };
+  });
+
+  it('sanity check: test environment is configured to compile JSX to the jsx() runtime', async () => {
+    function App() {
+      return <div />;
+    }
+    const source = App.toString();
+    if (__DEV__) {
+      expect(source).toContain('jsxDEV(');
+    } else {
+      expect(source).toContain('jsx(');
+    }
+    expect(source).not.toContain('React.createElement');
+  });
+
+  it('returns a complete element according to spec', () => {
+    const element = <Component />;
+    expect(element.type).toBe(Component);
+    expect(element.key).toBe(null);
+    expect(element.ref).toBe(null);
+    const expectation = {};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('allows a lower-case to be passed as the string type', () => {
+    const element = <div />;
+    expect(element.type).toBe('div');
+    expect(element.key).toBe(null);
+    expect(element.ref).toBe(null);
+    const expectation = {};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('allows a string to be passed as the type', () => {
+    const TagName = 'div';
+    const element = <TagName />;
+    expect(element.type).toBe('div');
+    expect(element.key).toBe(null);
+    expect(element.ref).toBe(null);
+    const expectation = {};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('returns an immutable element', () => {
+    const element = <Component />;
+    if (__DEV__) {
+      expect(() => (element.type = 'div')).toThrow();
+    } else {
+      expect(() => (element.type = 'div')).not.toThrow();
+    }
+  });
+
+  it('does not reuse the object that is spread into props', () => {
+    const config = {foo: 1};
+    const element = <Component {...config} />;
+    expect(element.props.foo).toBe(1);
+    config.foo = 2;
+    expect(element.props.foo).toBe(1);
+  });
+
+  it('extracts key from the rest of the props', () => {
+    const element = <Component key="12" foo="56" />;
+    expect(element.type).toBe(Component);
+    expect(element.key).toBe('12');
+    const expectation = {foo: '56'};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('does not extract ref from the rest of the props', () => {
+    const ref = React.createRef();
+    const element = <Component ref={ref} foo="56" />;
+    expect(element.type).toBe(Component);
+    expect(element.ref).toBe(ref);
+    assertConsoleErrorDev(
+      [
+        'Accessing element.ref was removed in React 19. ref is now a ' +
+          'regular prop. It will be removed from the JSX Element ' +
+          'type in a future release.',
+      ],
+      {withoutStack: true},
+    );
+    const expectation = {foo: '56', ref};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('coerces the key to a string', () => {
+    const element = <Component key={12} foo="56" />;
+    expect(element.type).toBe(Component);
+    expect(element.key).toBe('12');
+    expect(element.ref).toBe(null);
+    const expectation = {foo: '56'};
+    Object.freeze(expectation);
+    expect(element.props).toEqual(expectation);
+  });
+
+  it('merges JSX children onto the children prop', () => {
+    const a = 1;
+    const element = <Component children="text">{a}</Component>;
+    expect(element.props.children).toBe(a);
+  });
+
+  it('does not override children if no JSX children are provided', () => {
+    const element = <Component children="text" />;
+    expect(element.props.children).toBe('text');
+  });
+
+  it('overrides children if null is provided as a JSX child', () => {
+    const element = <Component children="text">{null}</Component>;
+    expect(element.props.children).toBe(null);
+  });
+
+  it('overrides children if undefined is provided as an argument', () => {
+    const element = <Component children="text">{undefined}</Component>;
+    expect(element.props.children).toBe(undefined);
+
+    const element2 = React.cloneElement(
+      <Component children="text" />,
+      {},
+      undefined,
+    );
+    expect(element2.props.children).toBe(undefined);
+  });
+
+  it('merges JSX children onto the children prop in an array', () => {
+    const a = 1;
+    const b = 2;
+    const c = 3;
+    const element = (
+      <Component>
+        {a}
+        {b}
+        {c}
+      </Component>
+    );
+    expect(element.props.children).toEqual([1, 2, 3]);
+  });
+
+  it('allows static methods to be called using the type property', () => {
+    class StaticMethodComponent {
+      static someStaticMethod() {
+        return 'someReturnValue';
+      }
+      render() {
+        return <div />;
+      }
+    }
+
+    const element = <StaticMethodComponent />;
+    expect(element.type.someStaticMethod()).toBe('someReturnValue');
+  });
+
+  it('identifies valid elements', () => {
+    expect(React.isValidElement(<div />)).toEqual(true);
+    expect(React.isValidElement(<Component />)).toEqual(true);
+
+    expect(React.isValidElement(null)).toEqual(false);
+    expect(React.isValidElement(true)).toEqual(false);
+    expect(React.isValidElement({})).toEqual(false);
+    expect(React.isValidElement('string')).toEqual(false);
+    expect(React.isValidElement(Component)).toEqual(false);
+    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+  });
+
+  it('is indistinguishable from a plain object', () => {
+    const element = <div className="foo" />;
+    const object = {};
+    expect(element.constructor).toBe(object.constructor);
+  });
+
+  it('should use default prop value when removing a prop', async () => {
+    Component.defaultProps = {fruit: 'persimmon'};
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component fruit="mango" ref={ref => (instance = ref)} />);
+    });
+    expect(instance.props.fruit).toBe('mango');
+
+    await act(() => {
+      root.render(<Component ref={ref => (instance = ref)} />);
+    });
+    expect(instance.props.fruit).toBe('persimmon');
+  });
+
+  it('should normalize props with default values', async () => {
+    class NormalizingComponent extends React.Component {
+      render() {
+        return <span>{this.props.prop}</span>;
+      }
+    }
+    NormalizingComponent.defaultProps = {prop: 'testKey'};
+
+    let container = document.createElement('div');
+    let root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(
+        <NormalizingComponent ref={current => (instance = current)} />,
+      );
+    });
+
+    expect(instance.props.prop).toBe('testKey');
+
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    let inst2;
+    await act(() => {
+      root.render(
+        <NormalizingComponent prop={null} ref={current => (inst2 = current)} />,
+      );
+    });
+
+    expect(inst2.props.prop).toBe(null);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactMismatchedVersions-test.js b/packages/react/src/__tests__/ReactMismatchedVersions-test.js
new file mode 100644
index 00000000000..d815f298641
--- /dev/null
+++ b/packages/react/src/__tests__/ReactMismatchedVersions-test.js
@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel';
+
+describe('ReactMismatchedVersions-test', () => {
+  // Polyfills for test environment
+  global.ReadableStream =
+    require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+  global.TextEncoder = require('util').TextEncoder;
+
+  let React;
+  let actualReactVersion;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    patchMessageChannel();
+
+    jest.mock('react', () => {
+      const actualReact = jest.requireActual('react');
+      return {
+        ...actualReact,
+        version: '18.0.0-whoa-this-aint-the-right-react',
+        __actualVersion: actualReact.version,
+      };
+    });
+    React = require('react');
+    actualReactVersion = React.__actualVersion;
+  });
+
+  it('importing "react-dom/client" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/client')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // When running in source mode, we lazily require the implementation to
+  // simulate the static config dependency injection we do at build time. So it
+  // only errors once you call something and trigger the require. Running the
+  // test in build mode is sufficient.
+  // @gate !source
+  it('importing "react-dom/server" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/server')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // @gate !source
+  it('importing "react-dom/server.node" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/server.node')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // @gate !source
+  it('importing "react-dom/server.browser" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/server.browser')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // @gate !source
+  it('importing "react-dom/server.bun" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/server.bun')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // @gate !source
+  it('importing "react-dom/server.edge" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/server.edge')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  it('importing "react-dom/static" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/static')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // @gate !source
+  it('importing "react-dom/static.node" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/static.node')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  it('importing "react-dom/static.browser" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/static.browser')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  it('importing "react-dom/static.edge" throws if version does not match React version', async () => {
+    expect(() => require('react-dom/static.edge')).toThrow(
+      'Incompatible React versions: The "react" and "react-dom" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:      18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-dom:  ${actualReactVersion}`,
+    );
+  });
+
+  // @gate source
+  it('importing "react-native-renderer" throws if version does not match React version', async () => {
+    expect(() => require('react-native-renderer')).toThrow(
+      'Incompatible React versions: The "react" and "react-native-renderer" packages ' +
+        'must have the exact same version. Instead got:\n' +
+        '  - react:                  18.0.0-whoa-this-aint-the-right-react\n' +
+        `  - react-native-renderer:  ${actualReactVersion}`,
+    );
+  });
+});
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
new file mode 100644
index 00000000000..ee1ec514e4d
--- /dev/null
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -0,0 +1,2267 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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;
+let act;
+let AdvanceTime;
+let assertLog;
+let waitFor;
+let waitForAll;
+let waitForThrow;
+
+function loadModules({
+  enableProfilerTimer = true,
+  enableProfilerCommitHooks = true,
+  enableProfilerNestedUpdatePhase = true,
+} = {}) {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+  ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
+  ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
+  ReactFeatureFlags.enableProfilerNestedUpdatePhase =
+    enableProfilerNestedUpdatePhase;
+
+  React = require('react');
+  Scheduler = require('scheduler');
+  ReactNoop = require('react-noop-renderer');
+  const InternalTestUtils = require('internal-test-utils');
+  act = InternalTestUtils.act;
+  assertLog = InternalTestUtils.assertLog;
+  waitFor = InternalTestUtils.waitFor;
+  waitForAll = InternalTestUtils.waitForAll;
+  waitForThrow = InternalTestUtils.waitForThrow;
+
+  AdvanceTime = class extends React.Component {
+    static defaultProps = {
+      byAmount: 10,
+      shouldComponentUpdate: true,
+    };
+    shouldComponentUpdate(nextProps) {
+      return nextProps.shouldComponentUpdate;
+    }
+    render() {
+      // Simulate time passing when this component is rendered
+      Scheduler.unstable_advanceTime(this.props.byAmount);
+      return this.props.children || null;
+    }
+  };
+}
+
+describe(`onRender`, () => {
+  beforeEach(() => {
+    jest.resetModules();
+    loadModules();
+  });
+
+  it('should handle errors thrown', async () => {
+    const callback = jest.fn(id => {
+      if (id === 'throw') {
+        throw Error('expected');
+      }
+    });
+
+    let didMount = false;
+    class ClassComponent extends React.Component {
+      componentDidMount() {
+        didMount = true;
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    // Errors thrown from onRender should not break the commit phase,
+    // Or prevent other lifecycles from being called.
+    await expect(
+      act(() => {
+        ReactNoop.render(
+          <ClassComponent>
+            <React.Profiler id="do-not-throw" onRender={callback}>
+              <React.Profiler id="throw" onRender={callback}>
+                <div />
+              </React.Profiler>
+            </React.Profiler>
+          </ClassComponent>,
+        );
+      }),
+    ).rejects.toThrow('expected');
+    expect(didMount).toBe(true);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('is not invoked until the commit phase', async () => {
+    const callback = jest.fn();
+
+    const Yield = ({value}) => {
+      Scheduler.log(value);
+      return null;
+    };
+
+    React.startTransition(() => {
+      ReactNoop.render(
+        <React.Profiler id="test" onRender={callback}>
+          <Yield value="first" />
+          <Yield value="last" />
+        </React.Profiler>,
+      );
+    });
+
+    // Times are logged until a render is committed.
+    await waitFor(['first']);
+    expect(callback).toHaveBeenCalledTimes(0);
+    await waitForAll(['last']);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  // @gate !__DEV__
+  it('does not record times for components outside of Profiler tree', async () => {
+    // Mock the Scheduler module so we can track how many times the current
+    // time is read
+    jest.mock('scheduler', obj => {
+      const ActualScheduler = jest.requireActual('scheduler/unstable_mock');
+      return {
+        ...ActualScheduler,
+        unstable_now: function mockUnstableNow() {
+          ActualScheduler.log('read current time');
+          return ActualScheduler.unstable_now();
+        },
+      };
+    });
+
+    jest.resetModules();
+
+    loadModules();
+
+    // Clear yields in case the current time is read during initialization.
+    Scheduler.unstable_clearLog();
+
+    await act(() => {
+      ReactNoop.render(
+        <div>
+          <AdvanceTime />
+          <AdvanceTime />
+          <AdvanceTime />
+          <AdvanceTime />
+          <AdvanceTime />
+        </div>,
+      );
+    });
+
+    // Restore original mock
+    jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
+
+    if (gate(flags => flags.enableComponentPerformanceTrack)) {
+      assertLog([
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+      ]);
+    } else {
+      assertLog([
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+        'read current time',
+      ]);
+    }
+  });
+
+  it('does not report work done on a sibling', async () => {
+    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 root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(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
+
+    callback.mockReset();
+
+    Scheduler.unstable_advanceTime(20); // 10 -> 30
+
+    await act(() => {
+      root.render(<App />);
+    });
+
+    if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
+      // None of the Profiler's subtree was rendered because App bailed out before the Profiler.
+      // So we expect onRender not to be called.
+      expect(callback).not.toHaveBeenCalled();
+    } else {
+      // Updating a parent reports a re-render,
+      // since React technically did a little bit of work between the Profiler and the bailed out subtree.
+      // This is not optimal but it's how the old reconciler fork works.
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      call = callback.mock.calls[0];
+
+      expect(call).toHaveLength(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
+
+      callback.mockReset();
+    }
+
+    Scheduler.unstable_advanceTime(20); // 30 -> 50
+
+    // Updating a sibling should not report a re-render.
+    await act(() => updateProfilerSibling());
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('logs render times for both mount and update', async () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <AdvanceTime />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let [call] = callback.mock.calls;
+
+    expect(call).toHaveLength(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(5); // start time
+    expect(call[5]).toBe(15); // commit time
+
+    callback.mockReset();
+
+    Scheduler.unstable_advanceTime(20); // 15 -> 35
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <AdvanceTime />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    [call] = callback.mock.calls;
+
+    expect(call).toHaveLength(6);
+    expect(call[0]).toBe('test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(10); // actual time
+    expect(call[3]).toBe(10); // base time
+    expect(call[4]).toBe(35); // start time
+    expect(call[5]).toBe(45); // commit time
+
+    callback.mockReset();
+
+    Scheduler.unstable_advanceTime(20); // 45 -> 65
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <AdvanceTime byAmount={4} />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    [call] = callback.mock.calls;
+
+    expect(call).toHaveLength(6);
+    expect(call[0]).toBe('test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(4); // actual time
+    expect(call[3]).toBe(4); // base time
+    expect(call[4]).toBe(65); // start time
+    expect(call[5]).toBe(69); // commit time
+  });
+
+  it('includes render times of nested Profilers in their parent times', async () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Fragment>
+          <React.Profiler id="parent" onRender={callback}>
+            <AdvanceTime byAmount={10}>
+              <React.Profiler id="child" onRender={callback}>
+                <AdvanceTime byAmount={20} />
+              </React.Profiler>
+            </AdvanceTime>
+          </React.Profiler>
+        </React.Fragment>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    // Callbacks bubble (reverse order).
+    const [childCall, parentCall] = callback.mock.calls;
+    expect(childCall[0]).toBe('child');
+    expect(parentCall[0]).toBe('parent');
+
+    // Parent times should include child times
+    expect(childCall[2]).toBe(20); // actual time
+    expect(childCall[3]).toBe(20); // base time
+    expect(childCall[4]).toBe(15); // start time
+    expect(childCall[5]).toBe(35); // commit time
+    expect(parentCall[2]).toBe(30); // actual time
+    expect(parentCall[3]).toBe(30); // base time
+    expect(parentCall[4]).toBe(5); // start time
+    expect(parentCall[5]).toBe(35); // commit time
+  });
+
+  it('traces sibling Profilers separately', async () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Fragment>
+          <React.Profiler id="first" onRender={callback}>
+            <AdvanceTime byAmount={20} />
+          </React.Profiler>
+          <React.Profiler id="second" onRender={callback}>
+            <AdvanceTime byAmount={5} />
+          </React.Profiler>
+        </React.Fragment>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    const [firstCall, secondCall] = callback.mock.calls;
+    expect(firstCall[0]).toBe('first');
+    expect(secondCall[0]).toBe('second');
+
+    // Parent times should include child times
+    expect(firstCall[2]).toBe(20); // actual time
+    expect(firstCall[3]).toBe(20); // base time
+    expect(firstCall[4]).toBe(5); // start time
+    expect(firstCall[5]).toBe(30); // commit time
+    expect(secondCall[2]).toBe(5); // actual time
+    expect(secondCall[3]).toBe(5); // base time
+    expect(secondCall[4]).toBe(25); // start time
+    expect(secondCall[5]).toBe(30); // commit time
+  });
+
+  it('does not include time spent outside of profile root', async () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Fragment>
+          <AdvanceTime byAmount={20} />
+          <React.Profiler id="test" onRender={callback}>
+            <AdvanceTime byAmount={5} />
+          </React.Profiler>
+          <AdvanceTime byAmount={20} />
+        </React.Fragment>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    const [call] = callback.mock.calls;
+    expect(call[0]).toBe('test');
+    expect(call[2]).toBe(5); // actual time
+    expect(call[3]).toBe(5); // base time
+    expect(call[4]).toBe(25); // start time
+    expect(call[5]).toBe(50); // commit time
+  });
+
+  it('is not called when blocked by sCU false', async () => {
+    const callback = jest.fn();
+
+    let instance;
+    class Updater extends React.Component {
+      state = {};
+      render() {
+        instance = this;
+        return this.props.children;
+      }
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="outer" onRender={callback}>
+          <Updater>
+            <React.Profiler id="inner" onRender={callback}>
+              <div />
+            </React.Profiler>
+          </Updater>
+        </React.Profiler>,
+      );
+    });
+    // All profile callbacks are called for initial render
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    callback.mockReset();
+
+    ReactNoop.flushSync(() => {
+      instance.setState({
+        count: 1,
+      });
+    });
+
+    // 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', async () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <AdvanceTime byAmount={10}>
+            <AdvanceTime byAmount={13} shouldComponentUpdate={false} />
+          </AdvanceTime>
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    Scheduler.unstable_advanceTime(30); // 28 -> 58
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <AdvanceTime byAmount={4}>
+            <AdvanceTime byAmount={7} shouldComponentUpdate={false} />
+          </AdvanceTime>
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    const [mountCall, updateCall] = callback.mock.calls;
+
+    expect(mountCall[1]).toBe('mount');
+    expect(mountCall[2]).toBe(23); // actual time
+    expect(mountCall[3]).toBe(23); // base time
+    expect(mountCall[4]).toBe(5); // start time
+    expect(mountCall[5]).toBe(28); // commit time
+
+    expect(updateCall[1]).toBe('update');
+    expect(updateCall[2]).toBe(4); // actual time
+    expect(updateCall[3]).toBe(17); // base time
+    expect(updateCall[4]).toBe(58); // start time
+    expect(updateCall[5]).toBe(62); // commit time
+  });
+
+  it('includes time spent in render phase lifecycles', async () => {
+    class WithLifecycles extends React.Component {
+      state = {};
+      static getDerivedStateFromProps() {
+        Scheduler.unstable_advanceTime(3);
+        return null;
+      }
+      shouldComponentUpdate() {
+        Scheduler.unstable_advanceTime(7);
+        return true;
+      }
+      render() {
+        Scheduler.unstable_advanceTime(5);
+        return null;
+      }
+    }
+
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <WithLifecycles />
+        </React.Profiler>,
+      );
+    });
+
+    Scheduler.unstable_advanceTime(15); // 13 -> 28
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <WithLifecycles />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    const [mountCall, updateCall] = callback.mock.calls;
+
+    expect(mountCall[1]).toBe('mount');
+    expect(mountCall[2]).toBe(8); // actual time
+    expect(mountCall[3]).toBe(8); // base time
+    expect(mountCall[4]).toBe(5); // start time
+    expect(mountCall[5]).toBe(13); // commit time
+
+    expect(updateCall[1]).toBe('update');
+    expect(updateCall[2]).toBe(15); // actual time
+    expect(updateCall[3]).toBe(15); // base time
+    expect(updateCall[4]).toBe(28); // start time
+    expect(updateCall[5]).toBe(43); // commit time
+  });
+
+  it('should clear nested-update flag when multiple cascading renders are scheduled', async () => {
+    jest.resetModules();
+    loadModules();
+
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+      const [didMountAndUpdate, setDidMountAndUpdate] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
+
+      React.useEffect(() => {
+        if (didMount && !didMountAndUpdate) {
+          setDidMountAndUpdate(true);
+        }
+      }, [didMount, didMountAndUpdate]);
+
+      Scheduler.log(`${didMount}:${didMountAndUpdate}`);
+
+      return null;
+    }
+
+    const onRender = jest.fn();
+
+    await act(() => {
+      ReactNoop.render(
+        <React.Profiler id="root" onRender={onRender}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
+    assertLog(['false:false', 'true:false', 'true:true']);
+
+    expect(onRender).toHaveBeenCalledTimes(3);
+    expect(onRender.mock.calls[0][1]).toBe('mount');
+    expect(onRender.mock.calls[1][1]).toBe('nested-update');
+    expect(onRender.mock.calls[2][1]).toBe('update');
+  });
+
+  it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
+    jest.resetModules();
+    loadModules();
+
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
+      Scheduler.log(didMount);
+      return didMount;
+    }
+
+    const onRender = jest.fn();
+
+    // Schedule low-priority work.
+    React.startTransition(() =>
+      ReactNoop.render(
+        <React.Profiler id="root" onRender={onRender}>
+          <Component />
+        </React.Profiler>,
+      ),
+    );
+
+    // Flush sync work with a nested update
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(
+        <React.Profiler id="root" onRender={onRender}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
+    assertLog([false, true]);
+
+    // Verify that the nested update inside of the sync work is appropriately tagged.
+    expect(onRender).toHaveBeenCalledTimes(2);
+    expect(onRender.mock.calls[0][1]).toBe('mount');
+    expect(onRender.mock.calls[1][1]).toBe('nested-update');
+  });
+
+  describe('with regard to interruptions', () => {
+    it('should accumulate actual time after a scheduling interruptions', async () => {
+      const callback = jest.fn();
+
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.log('Yield:' + renderTime);
+        return null;
+      };
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const root = ReactNoop.createRoot();
+      // Render partially, but run out of time before completing.
+      React.startTransition(() => {
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={2} />
+            <Yield renderTime={3} />
+          </React.Profiler>,
+        );
+      });
+
+      await waitFor(['Yield:2']);
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      // Resume render for remaining children.
+      await waitForAll(['Yield:3']);
+
+      // Verify that logged times include both durations above.
+      expect(callback).toHaveBeenCalledTimes(1);
+      const [call] = callback.mock.calls;
+      expect(call[2]).toBe(5); // actual time
+      expect(call[3]).toBe(5); // base time
+      expect(call[4]).toBe(5); // start time
+      expect(call[5]).toBe(10); // commit time
+    });
+
+    it('should not include time between frames', async () => {
+      const callback = jest.fn();
+
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.log('Yield:' + renderTime);
+        return null;
+      };
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const root = ReactNoop.createRoot();
+      // Render partially, but don't finish.
+      // This partial render should take 5ms of simulated time.
+      React.startTransition(() => {
+        root.render(
+          <React.Profiler id="outer" onRender={callback}>
+            <Yield renderTime={5} />
+            <Yield renderTime={10} />
+            <React.Profiler id="inner" onRender={callback}>
+              <Yield renderTime={17} />
+            </React.Profiler>
+          </React.Profiler>,
+        );
+      });
+
+      await waitFor(['Yield:5']);
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(50); // 10 -> 60
+
+      // Flush the remaining work,
+      // Which should take an additional 10ms of simulated time.
+      await waitForAll(['Yield:10', 'Yield:17']);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      const [innerCall, outerCall] = callback.mock.calls;
+
+      // Verify that the actual time includes all work times,
+      // But not the time that elapsed between frames.
+      expect(innerCall[0]).toBe('inner');
+      expect(innerCall[2]).toBe(17); // actual time
+      expect(innerCall[3]).toBe(17); // base time
+      expect(innerCall[4]).toBe(70); // start time
+      expect(innerCall[5]).toBe(87); // commit time
+      expect(outerCall[0]).toBe('outer');
+      expect(outerCall[2]).toBe(32); // actual time
+      expect(outerCall[3]).toBe(32); // base time
+      expect(outerCall[4]).toBe(5); // start time
+      expect(outerCall[5]).toBe(87); // commit time
+    });
+
+    it('should report the expected times when a high-pri update replaces a mount in-progress', async () => {
+      const callback = jest.fn();
+
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.log('Yield:' + renderTime);
+        return null;
+      };
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const root = ReactNoop.createRoot();
+      // Render a partially update, but don't finish.
+      // This partial render should take 10ms of simulated time.
+      React.startTransition(() => {
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={10} />
+            <Yield renderTime={20} />
+          </React.Profiler>,
+        );
+      });
+
+      await waitFor(['Yield:10']);
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 15 -> 115
+
+      // Interrupt with higher priority work.
+      // The interrupted work simulates an additional 5ms of time.
+      ReactNoop.flushSync(() => {
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={5} />
+          </React.Profiler>,
+        );
+      });
+      assertLog(['Yield:5']);
+
+      // The initial work was thrown away in this case,
+      // So the actual and base times should only include the final rendered tree times.
+      expect(callback).toHaveBeenCalledTimes(1);
+      const call = callback.mock.calls[0];
+      expect(call[2]).toBe(5); // actual time
+      expect(call[3]).toBe(5); // base time
+      expect(call[4]).toBe(115); // start time
+      expect(call[5]).toBe(120); // commit time
+
+      callback.mockReset();
+
+      // Verify no more unexpected callbacks from low priority work
+      await waitForAll([]);
+      expect(callback).toHaveBeenCalledTimes(0);
+    });
+
+    it('should report the expected times when a high-priority update replaces a low-priority update', async () => {
+      const callback = jest.fn();
+
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.log('Yield:' + renderTime);
+        return null;
+      };
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+      const root = ReactNoop.createRoot();
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <Yield renderTime={6} />
+          <Yield renderTime={15} />
+        </React.Profiler>,
+      );
+
+      // Render everything initially.
+      // This should take 21 seconds of actual and base time.
+      await waitForAll(['Yield:6', 'Yield:15']);
+      expect(callback).toHaveBeenCalledTimes(1);
+      let call = callback.mock.calls[0];
+      expect(call[2]).toBe(21); // actual time
+      expect(call[3]).toBe(21); // base time
+      expect(call[4]).toBe(5); // start time
+      expect(call[5]).toBe(26); // commit time
+
+      callback.mockReset();
+
+      Scheduler.unstable_advanceTime(30); // 26 -> 56
+
+      // Render a partially update, but don't finish.
+      // This partial render should take 3ms of simulated time.
+      React.startTransition(() => {
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={3} />
+            <Yield renderTime={5} />
+            <Yield renderTime={9} />
+          </React.Profiler>,
+        );
+      });
+
+      await waitFor(['Yield:3']);
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 59 -> 159
+
+      // Render another 5ms of simulated time.
+      await waitFor(['Yield:5']);
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 164 -> 264
+
+      // Interrupt with higher priority work.
+      // The interrupted work simulates an additional 11ms of time.
+      ReactNoop.flushSync(() => {
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={11} />
+          </React.Profiler>,
+        );
+      });
+      assertLog(['Yield:11']);
+
+      // The actual time should include only the most recent render,
+      // Because this lets us avoid a lot of commit phase reset complexity.
+      // The base time includes only the final rendered tree times.
+      expect(callback).toHaveBeenCalledTimes(1);
+      call = callback.mock.calls[0];
+      expect(call[2]).toBe(11); // actual time
+      expect(call[3]).toBe(11); // base time
+      expect(call[4]).toBe(264); // start time
+      expect(call[5]).toBe(275); // commit time
+
+      // Verify no more unexpected callbacks from low priority work
+      await waitForAll([]);
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should report the expected times when a high-priority update interrupts a low-priority update', async () => {
+      const callback = jest.fn();
+
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.log('Yield:' + renderTime);
+        return null;
+      };
+
+      let first;
+      class FirstComponent extends React.Component {
+        state = {renderTime: 1};
+        render() {
+          first = this;
+          Scheduler.unstable_advanceTime(this.state.renderTime);
+          Scheduler.log('FirstComponent:' + this.state.renderTime);
+          return <Yield renderTime={4} />;
+        }
+      }
+      let second;
+      class SecondComponent extends React.Component {
+        state = {renderTime: 2};
+        render() {
+          second = this;
+          Scheduler.unstable_advanceTime(this.state.renderTime);
+          Scheduler.log('SecondComponent:' + this.state.renderTime);
+          return <Yield renderTime={7} />;
+        }
+      }
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const root = ReactNoop.createRoot();
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <FirstComponent />
+          <SecondComponent />
+        </React.Profiler>,
+      );
+
+      // Render everything initially.
+      // This simulates a total of 14ms of actual render time.
+      // The base render time is also 14ms for the initial render.
+      await waitForAll([
+        'FirstComponent:1',
+        'Yield:4',
+        'SecondComponent:2',
+        'Yield:7',
+      ]);
+      expect(callback).toHaveBeenCalledTimes(1);
+      let call = callback.mock.calls[0];
+      expect(call[2]).toBe(14); // actual time
+      expect(call[3]).toBe(14); // base time
+      expect(call[4]).toBe(5); // start time
+      expect(call[5]).toBe(19); // commit time
+
+      callback.mockClear();
+
+      Scheduler.unstable_advanceTime(100); // 19 -> 119
+
+      // Render a partially update, but don't finish.
+      // This partial render will take 10ms of actual render time.
+      React.startTransition(() => {
+        first.setState({renderTime: 10});
+      });
+
+      await waitFor(['FirstComponent:10']);
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 129 -> 229
+
+      // Interrupt with higher priority work.
+      // This simulates a total of 37ms of actual render time.
+      ReactNoop.flushSync(() => second.setState({renderTime: 30}));
+      assertLog(['SecondComponent:30', 'Yield:7']);
+
+      // The actual time should include only the most recent render (37ms),
+      // Because this greatly simplifies the commit phase logic.
+      // The base time should include the more recent times for the SecondComponent subtree,
+      // As well as the original times for the FirstComponent subtree.
+      expect(callback).toHaveBeenCalledTimes(1);
+      call = callback.mock.calls[0];
+      expect(call[2]).toBe(37); // actual time
+      expect(call[3]).toBe(42); // base time
+      expect(call[4]).toBe(229); // start time
+      expect(call[5]).toBe(266); // commit time
+
+      callback.mockClear();
+
+      // Simulate time moving forward while frame is paused.
+      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,
+      // And does not include the original (interrupted) 10ms.
+      // The tree contains 42ms of base render time at this point,
+      // Reflecting the most recent (longer) render durations.
+      // TODO: This actual time should decrease by 10ms once the scheduler supports resuming.
+      await waitForAll(['FirstComponent:10', 'Yield:4']);
+      expect(callback).toHaveBeenCalledTimes(1);
+      call = callback.mock.calls[0];
+      expect(call[2]).toBe(14); // actual time
+      expect(call[3]).toBe(51); // base time
+      expect(call[4]).toBe(366); // start time
+      expect(call[5]).toBe(380); // commit time
+    });
+
+    it('should accumulate actual time after an error handled by componentDidCatch()', async () => {
+      const callback = jest.fn();
+
+      const ThrowsError = ({unused}) => {
+        Scheduler.unstable_advanceTime(3);
+        throw Error('expected error');
+      };
+
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        componentDidCatch(error) {
+          this.setState({error});
+        }
+        render() {
+          Scheduler.unstable_advanceTime(2);
+          return this.state.error === null ? (
+            this.props.children
+          ) : (
+            <AdvanceTime byAmount={20} />
+          );
+        }
+      }
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <ErrorBoundary>
+              <AdvanceTime byAmount={9} />
+              <ThrowsError />
+            </ErrorBoundary>
+          </React.Profiler>,
+        );
+      });
+
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Callbacks bubble (reverse order).
+      const [mountCall, updateCall] = callback.mock.calls;
+
+      // The initial mount only includes the ErrorBoundary (which takes 2)
+      // But it spends time rendering all of the failed subtree also.
+      expect(mountCall[1]).toBe('mount');
+      // actual time includes: 2 (ErrorBoundary) + 9 (AdvanceTime) + 3 (ThrowsError)
+      // We don't count the time spent in replaying the failed unit of work (ThrowsError)
+      expect(mountCall[2]).toBe(14);
+      // base time includes: 2 (ErrorBoundary)
+      // Since the tree is empty for the initial commit
+      expect(mountCall[3]).toBe(2);
+
+      // start time: 5 initially + 14 of work
+      // Add an additional 3 (ThrowsError) if we replayed the failed work
+      expect(mountCall[4]).toBe(19);
+      // commit time: 19 initially + 14 of work
+      // Add an additional 6 (ThrowsError *2) if we replayed the failed work
+      expect(mountCall[5]).toBe(33);
+
+      // The update includes the ErrorBoundary and its fallback child
+      expect(updateCall[1]).toBe('nested-update');
+      // actual time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
+      expect(updateCall[2]).toBe(22);
+      // base time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
+      expect(updateCall[3]).toBe(22);
+      // start time
+      expect(updateCall[4]).toBe(33);
+      // commit time: 19 (startTime) + 2 (ErrorBoundary) + 20 (AdvanceTime)
+      // Add an additional 3 (ThrowsError) if we replayed the failed work
+      expect(updateCall[5]).toBe(55);
+    });
+
+    it('should accumulate actual time after an error handled by getDerivedStateFromError()', async () => {
+      const callback = jest.fn();
+
+      const ThrowsError = ({unused}) => {
+        Scheduler.unstable_advanceTime(10);
+        throw Error('expected error');
+      };
+
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          return {error};
+        }
+        render() {
+          Scheduler.unstable_advanceTime(2);
+          return this.state.error === null ? (
+            this.props.children
+          ) : (
+            <AdvanceTime byAmount={20} />
+          );
+        }
+      }
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      await act(() => {
+        const root = ReactNoop.createRoot();
+        root.render(
+          <React.Profiler id="test" onRender={callback}>
+            <ErrorBoundary>
+              <AdvanceTime byAmount={5} />
+              <ThrowsError />
+            </ErrorBoundary>
+          </React.Profiler>,
+        );
+      });
+
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Callbacks bubble (reverse order).
+      const [mountCall] = callback.mock.calls;
+
+      // The initial mount includes the ErrorBoundary's error state,
+      // But it also spends actual time rendering UI that fails and isn't included.
+      expect(mountCall[1]).toBe('mount');
+      // actual time includes: 2 (ErrorBoundary) + 5 (AdvanceTime) + 10 (ThrowsError)
+      // Then the re-render: 2 (ErrorBoundary) + 20 (AdvanceTime)
+      // We don't count the time spent in replaying the failed unit of work (ThrowsError)
+      expect(mountCall[2]).toBe(39);
+      // base time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
+      expect(mountCall[3]).toBe(22);
+      // start time
+      expect(mountCall[4]).toBe(44);
+      // commit time
+      expect(mountCall[5]).toBe(83);
+    });
+
+    it('should reset the fiber stack correct after a "complete" phase error', async () => {
+      jest.resetModules();
+
+      loadModules({
+        useNoopRenderer: true,
+      });
+
+      // Simulate a renderer error during the "complete" phase.
+      // This mimics behavior like React Native's View/Text nesting validation.
+      ReactNoop.render(
+        <React.Profiler id="profiler" onRender={jest.fn()}>
+          <errorInCompletePhase>hi</errorInCompletePhase>
+        </React.Profiler>,
+      );
+      await waitForThrow('Error in host config.');
+
+      // A similar case we've seen caused by an invariant in ReactDOM.
+      // It didn't reproduce without a host component inside.
+      ReactNoop.render(
+        <React.Profiler id="profiler" onRender={jest.fn()}>
+          <errorInCompletePhase>
+            <span>hi</span>
+          </errorInCompletePhase>
+        </React.Profiler>,
+      );
+      await waitForThrow('Error in host config.');
+
+      // So long as the profiler timer's fiber stack is reset correctly,
+      // Subsequent renders should not error.
+      ReactNoop.render(
+        <React.Profiler id="profiler" onRender={jest.fn()}>
+          <span>hi</span>
+        </React.Profiler>,
+      );
+      await waitForAll([]);
+    });
+  });
+
+  it('reflects the most recently rendered id value', async () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="one" onRender={callback}>
+          <AdvanceTime byAmount={2} />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    Scheduler.unstable_advanceTime(20); // 7 -> 27
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="two" onRender={callback}>
+          <AdvanceTime byAmount={1} />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    const [mountCall, updateCall] = callback.mock.calls;
+
+    expect(mountCall[0]).toBe('one');
+    expect(mountCall[1]).toBe('mount');
+    expect(mountCall[2]).toBe(2); // actual time
+    expect(mountCall[3]).toBe(2); // base time
+    expect(mountCall[4]).toBe(5); // start time
+
+    expect(updateCall[0]).toBe('two');
+    expect(updateCall[1]).toBe('update');
+    expect(updateCall[2]).toBe(1); // actual time
+    expect(updateCall[3]).toBe(1); // base time
+    expect(updateCall[4]).toBe(27); // start time
+  });
+
+  it('should not be called until after mutations', async () => {
+    let classComponentMounted = false;
+    const callback = jest.fn(
+      (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+        // Don't call this hook until after mutations
+        expect(classComponentMounted).toBe(true);
+        // But the commit time should reflect pre-mutation
+        expect(commitTime).toBe(2);
+      },
+    );
+
+    class ClassComponent extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_advanceTime(5);
+        classComponentMounted = true;
+      }
+      render() {
+        Scheduler.unstable_advanceTime(2);
+        return null;
+      }
+    }
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="test" onRender={callback}>
+          <ClassComponent />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe(`onCommit`, () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    loadModules();
+  });
+
+  it('should report time spent in layout effects and commit lifecycles', async () => {
+    const callback = jest.fn();
+
+    const ComponentWithEffects = () => {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(10);
+        return () => {
+          Scheduler.unstable_advanceTime(100);
+        };
+      }, []);
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(1000);
+        return () => {
+          Scheduler.unstable_advanceTime(10000);
+        };
+      });
+      React.useEffect(() => {
+        // This passive effect is here to verify that its time isn't reported.
+        Scheduler.unstable_advanceTime(5);
+        return () => {
+          Scheduler.unstable_advanceTime(7);
+        };
+      });
+      return null;
+    };
+
+    class ComponentWithCommitHooks extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_advanceTime(100000);
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_advanceTime(1000000);
+      }
+      render() {
+        return null;
+      }
+    }
+
+    Scheduler.unstable_advanceTime(1);
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="mount-test" onCommit={callback}>
+          <ComponentWithEffects />
+          <ComponentWithCommitHooks />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('mount-test');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(101010); // durations
+    expect(call[3]).toBe(1); // commit start time (before mutations or effects)
+
+    Scheduler.unstable_advanceTime(1);
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="update-test" onCommit={callback}>
+          <ComponentWithEffects />
+          <ComponentWithCommitHooks />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    call = callback.mock.calls[1];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('update-test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(1011000); // durations
+    expect(call[3]).toBe(101017); // commit start time (before mutations or effects)
+
+    Scheduler.unstable_advanceTime(1);
+
+    await act(() => {
+      root.render(<React.Profiler id="unmount-test" onCommit={callback} />);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    call = callback.mock.calls[2];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('unmount-test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(10100); // durations
+    expect(call[3]).toBe(1112030); // commit start time (before mutations or effects)
+  });
+
+  it('should report time spent in layout effects and commit lifecycles with cascading renders', async () => {
+    const callback = jest.fn();
+
+    const ComponentWithEffects = ({shouldCascade}) => {
+      const [didCascade, setDidCascade] = React.useState(false);
+      Scheduler.unstable_advanceTime(100000000);
+      React.useLayoutEffect(() => {
+        if (shouldCascade && !didCascade) {
+          setDidCascade(true);
+        }
+        Scheduler.unstable_advanceTime(didCascade ? 30 : 10);
+        return () => {
+          Scheduler.unstable_advanceTime(100);
+        };
+      }, [didCascade, shouldCascade]);
+      return null;
+    };
+
+    class ComponentWithCommitHooks extends React.Component {
+      state = {
+        didCascade: false,
+      };
+      componentDidMount() {
+        Scheduler.unstable_advanceTime(1000);
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_advanceTime(10000);
+        if (this.props.shouldCascade && !this.state.didCascade) {
+          this.setState({didCascade: true});
+        }
+      }
+      render() {
+        Scheduler.unstable_advanceTime(1000000000);
+        return null;
+      }
+    }
+
+    Scheduler.unstable_advanceTime(1);
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="mount-test" onCommit={callback}>
+          <ComponentWithEffects shouldCascade={true} />
+          <ComponentWithCommitHooks />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('mount-test');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(1010); // durations
+    expect(call[3]).toBe(1100000001); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[1];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('mount-test');
+    expect(call[1]).toBe('nested-update');
+    expect(call[2]).toBe(130); // durations
+    expect(call[3]).toBe(1200001011); // commit start time (before mutations or effects)
+
+    Scheduler.unstable_advanceTime(1);
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="update-test" onCommit={callback}>
+          <ComponentWithEffects />
+          <ComponentWithCommitHooks shouldCascade={true} />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(4);
+
+    call = callback.mock.calls[2];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('update-test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(10130); // durations
+    expect(call[3]).toBe(2300001142); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[3];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('update-test');
+    expect(call[1]).toBe('nested-update');
+    expect(call[2]).toBe(10000); // durations
+    expect(call[3]).toBe(3300011272); // commit start time (before mutations or effects)
+  });
+
+  it('should include time spent in ref callbacks', async () => {
+    const callback = jest.fn();
+
+    const refSetter = ref => {
+      if (ref !== null) {
+        Scheduler.unstable_advanceTime(10);
+      } else {
+        Scheduler.unstable_advanceTime(100);
+      }
+    };
+
+    class ClassComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    const Component = () => {
+      Scheduler.unstable_advanceTime(1000);
+      return <ClassComponent ref={refSetter} />;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onCommit={callback}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(10); // durations
+    expect(call[3]).toBe(1001); // commit start time (before mutations or effects)
+
+    callback.mockClear();
+
+    await act(() => {
+      root.render(<React.Profiler id="root" onCommit={callback} />);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(100); // durations
+    expect(call[3]).toBe(1011); // commit start time (before mutations or effects)
+  });
+
+  it('should bubble time spent in layout effects to higher profilers', async () => {
+    const callback = jest.fn();
+
+    const ComponentWithEffects = ({cleanupDuration, duration, setCountRef}) => {
+      const setCount = React.useState(0)[1];
+      if (setCountRef != null) {
+        setCountRef.current = setCount;
+      }
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(duration);
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
+        };
+      });
+      Scheduler.unstable_advanceTime(1);
+      return null;
+    };
+
+    const setCountRef = React.createRef(null);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root-mount" onCommit={callback}>
+          <React.Profiler id="a">
+            <ComponentWithEffects
+              duration={10}
+              cleanupDuration={100}
+              setCountRef={setCountRef}
+            />
+          </React.Profiler>
+          <React.Profiler id="b">
+            <ComponentWithEffects duration={1000} cleanupDuration={10000} />
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-mount');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(1010); // durations
+    expect(call[3]).toBe(2); // commit start time (before mutations or effects)
+
+    await act(() => setCountRef.current(count => count + 1));
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    call = callback.mock.calls[1];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-mount');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(110); // durations
+    expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="root-update" onCommit={callback}>
+          <React.Profiler id="b">
+            <ComponentWithEffects duration={1000} cleanupDuration={10000} />
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    call = callback.mock.calls[2];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-update');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(11100); // durations
+    expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
+  });
+
+  it('should properly report time in layout effects even when there are errors', async () => {
+    const callback = jest.fn();
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        return this.state.error === null
+          ? this.props.children
+          : this.props.fallback;
+      }
+    }
+
+    const ComponentWithEffects = ({
+      cleanupDuration,
+      duration,
+      effectDuration,
+      shouldThrow,
+    }) => {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(effectDuration);
+        if (shouldThrow) {
+          throw Error('expected');
+        }
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
+        };
+      });
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    // Test an error that happens during an effect
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onCommit={callback}>
+          <ErrorBoundary
+            fallback={
+              <ComponentWithEffects
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
+              />
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    let call = callback.mock.calls[0];
+
+    // Initial render (with error)
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(100100); // durations
+    expect(call[3]).toBe(10011); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[1];
+
+    // Cleanup render from error boundary
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('nested-update');
+    expect(call[2]).toBe(100000000); // durations
+    expect(call[3]).toBe(10110111); // commit start time (before mutations or effects)
+  });
+
+  it('should properly report time in layout effect cleanup functions even when there are errors', async () => {
+    const callback = jest.fn();
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        return this.state.error === null
+          ? this.props.children
+          : this.props.fallback;
+      }
+    }
+
+    const ComponentWithEffects = ({
+      cleanupDuration,
+      duration,
+      effectDuration,
+      shouldThrow = false,
+    }) => {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_advanceTime(effectDuration);
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
+          if (shouldThrow) {
+            throw Error('expected');
+          }
+        };
+      });
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onCommit={callback}>
+          <ErrorBoundary
+            fallback={
+              <ComponentWithEffects
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
+              />
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    // Initial render
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(100100); // durations
+    expect(call[3]).toBe(10011); // commit start time (before mutations or effects)
+
+    callback.mockClear();
+
+    // Test an error that happens during an cleanup function
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onCommit={callback}>
+          <ErrorBoundary
+            fallback={
+              <ComponentWithEffects
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
+              />
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={false}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    call = callback.mock.calls[0];
+
+    // Update (that throws)
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(1101100); // durations
+    expect(call[3]).toBe(120121); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[1];
+
+    // Cleanup render from error boundary
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('nested-update');
+    expect(call[2]).toBe(100001000); // durations
+    expect(call[3]).toBe(11221221); // commit start time (before mutations or effects)
+  });
+});
+
+describe(`onPostCommit`, () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    loadModules();
+  });
+
+  it('should report time spent in passive effects', async () => {
+    const callback = jest.fn();
+
+    const ComponentWithEffects = () => {
+      React.useLayoutEffect(() => {
+        // This layout effect is here to verify that its time isn't reported.
+        Scheduler.unstable_advanceTime(5);
+        return () => {
+          Scheduler.unstable_advanceTime(7);
+        };
+      });
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(10);
+        return () => {
+          Scheduler.unstable_advanceTime(100);
+        };
+      }, []);
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(1000);
+        return () => {
+          Scheduler.unstable_advanceTime(10000);
+        };
+      });
+      return null;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="mount-test" onPostCommit={callback}>
+          <ComponentWithEffects />
+        </React.Profiler>,
+      );
+    });
+    await waitForAll([]);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('mount-test');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(1010); // durations
+    expect(call[3]).toBe(1); // commit start time (before mutations or effects)
+
+    Scheduler.unstable_advanceTime(1);
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="update-test" onPostCommit={callback}>
+          <ComponentWithEffects />
+        </React.Profiler>,
+      );
+    });
+    await waitForAll([]);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    call = callback.mock.calls[1];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('update-test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(11000); // durations
+    expect(call[3]).toBe(1017); // commit start time (before mutations or effects)
+
+    Scheduler.unstable_advanceTime(1);
+
+    await act(() => {
+      root.render(<React.Profiler id="unmount-test" onPostCommit={callback} />);
+    });
+    await waitForAll([]);
+
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    call = callback.mock.calls[2];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('unmount-test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(10100); // durations
+    expect(call[3]).toBe(12030); // commit start time (before mutations or effects)
+  });
+
+  it('should report time spent in passive effects with cascading renders', async () => {
+    const callback = jest.fn();
+
+    const ComponentWithEffects = () => {
+      const [didMount, setDidMount] = React.useState(false);
+      Scheduler.unstable_advanceTime(1000);
+      React.useEffect(() => {
+        if (!didMount) {
+          setDidMount(true);
+        }
+        Scheduler.unstable_advanceTime(didMount ? 30 : 10);
+        return () => {
+          Scheduler.unstable_advanceTime(100);
+        };
+      }, [didMount]);
+      return null;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="mount-test" onPostCommit={callback}>
+          <ComponentWithEffects />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('mount-test');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(10); // durations
+    expect(call[3]).toBe(1001); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[1];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('mount-test');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(130); // durations
+    expect(call[3]).toBe(2011); // commit start time (before mutations or effects)
+  });
+
+  it('should bubble time spent in effects to higher profilers', async () => {
+    const callback = jest.fn();
+
+    const ComponentWithEffects = ({cleanupDuration, duration, setCountRef}) => {
+      const setCount = React.useState(0)[1];
+      if (setCountRef != null) {
+        setCountRef.current = setCount;
+      }
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(duration);
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
+        };
+      });
+      Scheduler.unstable_advanceTime(1);
+      return null;
+    };
+
+    const setCountRef = React.createRef(null);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root-mount" onPostCommit={callback}>
+          <React.Profiler id="a">
+            <ComponentWithEffects
+              duration={10}
+              cleanupDuration={100}
+              setCountRef={setCountRef}
+            />
+          </React.Profiler>
+          <React.Profiler id="b">
+            <ComponentWithEffects duration={1000} cleanupDuration={10000} />
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-mount');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(1010); // durations
+    expect(call[3]).toBe(2); // commit start time (before mutations or effects)
+
+    await act(() => setCountRef.current(count => count + 1));
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    call = callback.mock.calls[1];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-mount');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(110); // durations
+    expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="root-update" onPostCommit={callback}>
+          <React.Profiler id="b">
+            <ComponentWithEffects duration={1000} cleanupDuration={10000} />
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(3);
+
+    call = callback.mock.calls[2];
+
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-update');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(11100); // durations
+    expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
+  });
+
+  it('should properly report time in passive effects even when there are errors', async () => {
+    const callback = jest.fn();
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        return this.state.error === null
+          ? this.props.children
+          : this.props.fallback;
+      }
+    }
+
+    const ComponentWithEffects = ({
+      cleanupDuration,
+      duration,
+      effectDuration,
+      shouldThrow,
+    }) => {
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(effectDuration);
+        if (shouldThrow) {
+          throw Error('expected');
+        }
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
+        };
+      });
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    // Test an error that happens during an effect
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onPostCommit={callback}>
+          <ErrorBoundary
+            fallback={
+              <ComponentWithEffects
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
+              />
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    let call = callback.mock.calls[0];
+
+    // Initial render (with error)
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(100100); // durations
+    expect(call[3]).toBe(10011); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[1];
+
+    // Cleanup render from error boundary
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(100000000); // durations
+    expect(call[3]).toBe(10110111); // commit start time (before mutations or effects)
+  });
+
+  it('should properly report time in passive effect cleanup functions even when there are errors', async () => {
+    const callback = jest.fn();
+
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        return this.state.error === null
+          ? this.props.children
+          : this.props.fallback;
+      }
+    }
+
+    const ComponentWithEffects = ({
+      cleanupDuration,
+      duration,
+      effectDuration,
+      shouldThrow = false,
+      id,
+    }) => {
+      React.useEffect(() => {
+        Scheduler.unstable_advanceTime(effectDuration);
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
+          if (shouldThrow) {
+            throw Error('expected');
+          }
+        };
+      });
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+
+    Scheduler.unstable_advanceTime(1);
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onPostCommit={callback}>
+          <ErrorBoundary
+            fallback={
+              <ComponentWithEffects
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
+              />
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    let call = callback.mock.calls[0];
+
+    // Initial render
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('mount');
+    expect(call[2]).toBe(100100); // durations
+    expect(call[3]).toBe(10011); // commit start time (before mutations or effects)
+
+    callback.mockClear();
+
+    // Test an error that happens during an cleanup function
+
+    await act(() => {
+      root.render(
+        <React.Profiler id="root" onPostCommit={callback}>
+          <ErrorBoundary
+            fallback={
+              <ComponentWithEffects
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
+              />
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={false}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    call = callback.mock.calls[0];
+
+    // Update (that throws)
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('update');
+    // We continue flushing pending effects even if one throws.
+    expect(call[2]).toBe(1101100); // durations
+    expect(call[3]).toBe(120121); // commit start time (before mutations or effects)
+
+    call = callback.mock.calls[1];
+
+    // Cleanup render from error boundary
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(100001000); // durations
+    // The commit time varies because the above duration time varies
+    expect(call[3]).toBe(11221221); // commit start time (before mutations or effects)
+  });
+});
diff --git a/packages/react/src/__tests__/ReactProfilerComponent-test.internal.js b/packages/react/src/__tests__/ReactProfilerComponent-test.internal.js
new file mode 100644
index 00000000000..20395118c5c
--- /dev/null
+++ b/packages/react/src/__tests__/ReactProfilerComponent-test.internal.js
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactFeatureFlags;
+let act;
+let container;
+let assertConsoleErrorDev;
+
+function loadModules({
+  enableProfilerTimer = true,
+  enableProfilerCommitHooks = true,
+  enableProfilerNestedUpdatePhase = true,
+} = {}) {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+  ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
+  ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
+  ReactFeatureFlags.enableProfilerNestedUpdatePhase =
+    enableProfilerNestedUpdatePhase;
+
+  React = require('react');
+  ReactDOMClient = require('react-dom/client');
+  const InternalTestUtils = require('internal-test-utils');
+  act = InternalTestUtils.act;
+  assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+}
+
+describe('Profiler', () => {
+  beforeEach(() => {
+    container = document.createElement('div');
+  });
+
+  describe('works in profiling and non-profiling bundles', () => {
+    [true, false].forEach(enableProfilerTimer => {
+      describe(`enableProfilerTimer:${
+        enableProfilerTimer ? 'enabled' : 'disabled'
+      }`, () => {
+        beforeEach(() => {
+          jest.resetModules();
+
+          loadModules({enableProfilerTimer});
+        });
+
+        // This will throw in production too,
+        // But the test is only interested in verifying the DEV error message.
+        if (__DEV__ && enableProfilerTimer) {
+          it('should warn if required params are missing', async () => {
+            const root = ReactDOMClient.createRoot(container);
+            await act(() => {
+              root.render(<React.Profiler />);
+            });
+            assertConsoleErrorDev(
+              [
+                'Profiler must specify an "id" of type `string` as a prop. Received the type `undefined` instead.',
+              ],
+              {
+                withoutStack: true,
+              },
+            );
+          });
+        }
+
+        it('should support an empty Profiler (with no children)', async () => {
+          const root = ReactDOMClient.createRoot(container);
+          // As root
+          await act(() => {
+            root.render(<React.Profiler id="label" onRender={jest.fn()} />);
+          });
+          expect(container.innerHTML).toMatchSnapshot();
+
+          // As non-root
+          await act(() => {
+            root.render(
+              <div>
+                <React.Profiler id="label" onRender={jest.fn()} />
+              </div>,
+            );
+          });
+          expect(container.innerHTML).toMatchSnapshot();
+        });
+
+        it('should render children', async () => {
+          const FunctionComponent = ({label}) => <span>{label}</span>;
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(
+              <div>
+                <span>outside span</span>
+                <React.Profiler id="label" onRender={jest.fn()}>
+                  <span>inside span</span>
+                  <FunctionComponent label="function component" />
+                </React.Profiler>
+              </div>,
+            );
+          });
+          expect(container.innerHTML).toMatchSnapshot();
+        });
+
+        it('should support nested Profilers', async () => {
+          const FunctionComponent = ({label}) => <div>{label}</div>;
+          class ClassComponent extends React.Component {
+            render() {
+              return <span>{this.props.label}</span>;
+            }
+          }
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(
+              <React.Profiler id="outer" onRender={jest.fn()}>
+                <FunctionComponent label="outer function component" />
+                <React.Profiler id="inner" onRender={jest.fn()}>
+                  <ClassComponent label="inner class component" />
+                  <span>inner span</span>
+                </React.Profiler>
+              </React.Profiler>,
+            );
+          });
+
+          expect(container.innerHTML).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
new file mode 100644
index 00000000000..ba29cbbe461
--- /dev/null
+++ b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('ReactProfiler DevTools integration', () => {
+  let React;
+  let ReactFeatureFlags;
+  let ReactTestRenderer;
+  let Scheduler;
+  let AdvanceTime;
+  let hook;
+  let waitForAll;
+  let waitFor;
+  let act;
+
+  beforeEach(() => {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook = {
+      inject: () => {},
+      onCommitFiberRoot: jest.fn((rendererId, root) => {}),
+      onCommitFiberUnmount: () => {},
+      supportsFiber: true,
+    };
+
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableProfilerTimer = true;
+    Scheduler = require('scheduler');
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    act = InternalTestUtils.act;
+
+    AdvanceTime = class extends React.Component {
+      static defaultProps = {
+        byAmount: 10,
+        shouldComponentUpdate: true,
+      };
+      shouldComponentUpdate(nextProps) {
+        return nextProps.shouldComponentUpdate;
+      }
+      render() {
+        // Simulate time passing when this component is rendered
+        Scheduler.unstable_advanceTime(this.props.byAmount);
+        return this.props.children || null;
+      }
+    };
+  });
+
+  it('should auto-Profile all fibers if the DevTools hook is detected', async () => {
+    const App = ({multiplier}) => {
+      Scheduler.unstable_advanceTime(2);
+      return (
+        <React.Profiler id="Profiler" onRender={onRender}>
+          <AdvanceTime byAmount={3 * multiplier} shouldComponentUpdate={true} />
+          <AdvanceTime
+            byAmount={7 * multiplier}
+            shouldComponentUpdate={false}
+          />
+        </React.Profiler>
+      );
+    };
+
+    const onRender = jest.fn(() => {});
+    let rendered;
+    await act(() => {
+      rendered = ReactTestRenderer.create(<App multiplier={1} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    expect(hook.onCommitFiberRoot).toHaveBeenCalledTimes(1);
+
+    // Measure observable timing using the Profiler component.
+    // The time spent in App (above the Profiler) won't be included in the durations,
+    // But needs to be accounted for in the offset times.
+    expect(onRender).toHaveBeenCalledTimes(1);
+    expect(onRender).toHaveBeenCalledWith('Profiler', 'mount', 10, 10, 2, 12);
+    onRender.mockClear();
+
+    // Measure unobservable timing required by the DevTools profiler.
+    // At this point, the base time should include both:
+    // The time 2ms in the App component itself, and
+    // The 10ms spend in the Profiler sub-tree beneath.
+    expect(rendered.root.findByType(App)._currentFiber().treeBaseDuration).toBe(
+      12,
+    );
+
+    await act(() => {
+      rendered.update(<App multiplier={2} />);
+    });
+
+    // Measure observable timing using the Profiler component.
+    // The time spent in App (above the Profiler) won't be included in the durations,
+    // But needs to be accounted for in the offset times.
+    expect(onRender).toHaveBeenCalledTimes(1);
+    expect(onRender).toHaveBeenCalledWith('Profiler', 'update', 6, 13, 14, 20);
+
+    // Measure unobservable timing required by the DevTools profiler.
+    // At this point, the base time should include both:
+    // The initial 9ms for the components that do not re-render, and
+    // The updated 6ms for the component that does.
+    expect(rendered.root.findByType(App)._currentFiber().treeBaseDuration).toBe(
+      15,
+    );
+  });
+
+  it('should reset the fiber stack correctly after an error when profiling host roots', async () => {
+    Scheduler.unstable_advanceTime(20);
+
+    let rendered;
+    await act(() => {
+      rendered = ReactTestRenderer.create(
+        <div>
+          <AdvanceTime byAmount={2} />
+        </div>,
+        {unstable_isConcurrent: true},
+      );
+    });
+
+    Scheduler.unstable_advanceTime(20);
+
+    function Throws() {
+      throw new Error('Oops!');
+    }
+
+    await expect(async () => {
+      await act(() => {
+        rendered.update(
+          <Throws>
+            <AdvanceTime byAmount={3} />
+          </Throws>,
+        );
+      });
+    }).rejects.toThrow('Oops!');
+
+    Scheduler.unstable_advanceTime(20);
+
+    await act(() => {
+      // But this should render correctly, if the profiler's fiber stack has been reset.
+      rendered.update(
+        <div>
+          <AdvanceTime byAmount={7} />
+        </div>,
+      );
+    });
+
+    // Measure unobservable timing required by the DevTools profiler.
+    // At this point, the base time should include only the most recent (not failed) render.
+    // It should not include time spent on the initial render,
+    // Or time that elapsed between any of the above renders.
+    expect(
+      rendered.root.findByType('div')._currentFiber().treeBaseDuration,
+    ).toBe(7);
+  });
+
+  it('regression test: #17159', async () => {
+    function Text({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
+    let root;
+    await act(() => {
+      root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});
+    });
+
+    // Commit something
+    root.update(<Text text="A" />);
+    await waitForAll(['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.
+    React.startTransition(() => {
+      root.update(<Text text="B" />);
+    });
+
+    // Update B should not instantly expire.
+    await waitFor([]);
+
+    await waitForAll(['B']);
+    expect(root).toMatchRenderedOutput('B');
+  });
+});
diff --git a/packages/react/src/__tests__/ReactPureComponent-test.js b/packages/react/src/__tests__/ReactPureComponent-test.js
new file mode 100644
index 00000000000..c54945ff250
--- /dev/null
+++ b/packages/react/src/__tests__/ReactPureComponent-test.js
@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 assertConsoleErrorDev;
+let React;
+let ReactDOMClient;
+
+describe('ReactPureComponent', () => {
+  beforeEach(() => {
+    ({act, assertConsoleErrorDev} = require('internal-test-utils'));
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+  });
+
+  it('should render', async () => {
+    let renders = 0;
+    class Component extends React.PureComponent {
+      constructor() {
+        super();
+        this.state = {type: 'mushrooms'};
+      }
+      render() {
+        renders++;
+        return <div>{this.props.text[0]}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let text;
+    const componentRef = React.createRef();
+
+    text = ['porcini'];
+    await act(() => {
+      root.render(<Component ref={componentRef} text={text} />);
+    });
+    expect(container.textContent).toBe('porcini');
+    expect(renders).toBe(1);
+
+    text = ['morel'];
+    await act(() => {
+      root.render(<Component ref={componentRef} text={text} />);
+    });
+    expect(container.textContent).toBe('morel');
+    expect(renders).toBe(2);
+
+    text[0] = 'portobello';
+    await act(() => {
+      root.render(<Component ref={componentRef} text={text} />);
+    });
+    expect(container.textContent).toBe('morel');
+    expect(renders).toBe(2);
+
+    // Setting state without changing it doesn't cause a rerender.
+    await act(() => {
+      componentRef.current.setState({type: 'mushrooms'});
+    });
+    expect(container.textContent).toBe('morel');
+    expect(renders).toBe(2);
+
+    // But changing state does.
+    await act(() => {
+      componentRef.current.setState({type: 'portobello mushrooms'});
+    });
+    expect(container.textContent).toBe('portobello');
+    expect(renders).toBe(3);
+  });
+
+  it('can override shouldComponentUpdate', async () => {
+    let renders = 0;
+    class Component extends React.PureComponent {
+      render() {
+        renders++;
+        return <div />;
+      }
+      shouldComponentUpdate() {
+        return true;
+      }
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      'Component has a method called shouldComponentUpdate(). ' +
+        'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
+        'Please extend React.Component if shouldComponentUpdate is used.\n' +
+        '    in Component (at **)',
+    ]);
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(renders).toBe(2);
+  });
+
+  it('extends React.Component', async () => {
+    let renders = 0;
+    class Component extends React.PureComponent {
+      render() {
+        expect(this instanceof React.Component).toBe(true);
+        expect(this instanceof React.PureComponent).toBe(true);
+        renders++;
+        return <div />;
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(renders).toBe(1);
+  });
+
+  it('should warn when shouldComponentUpdate is defined on React.PureComponent', async () => {
+    class PureComponent extends React.PureComponent {
+      shouldComponentUpdate() {
+        return true;
+      }
+      render() {
+        return <div />;
+      }
+    }
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<PureComponent />);
+    });
+    assertConsoleErrorDev([
+      'PureComponent has a method called shouldComponentUpdate(). ' +
+        'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
+        'Please extend React.Component if shouldComponentUpdate is used.\n' +
+        '    in PureComponent (at **)',
+    ]);
+  });
+});
diff --git a/packages/react/src/__tests__/ReactStartTransition-test.js b/packages/react/src/__tests__/ReactStartTransition-test.js
new file mode 100644
index 00000000000..00387dbb267
--- /dev/null
+++ b/packages/react/src/__tests__/ReactStartTransition-test.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactTestRenderer;
+let act;
+let assertConsoleWarnDev;
+let useState;
+let useTransition;
+
+const SUSPICIOUS_NUMBER_OF_FIBERS_UPDATED = 10;
+
+describe('ReactStartTransition', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+    ({act, assertConsoleWarnDev} = require('internal-test-utils'));
+    useState = React.useState;
+    useTransition = React.useTransition;
+  });
+
+  it('Warns if a suspicious number of fibers are updated inside startTransition', async () => {
+    const subs = new Set();
+    const useUserSpaceSubscription = () => {
+      const setState = useState(0)[1];
+      subs.add(setState);
+    };
+
+    let triggerHookTransition;
+
+    const Component = ({level}) => {
+      useUserSpaceSubscription();
+      if (level === 0) {
+        triggerHookTransition = useTransition()[1];
+      }
+      if (level < SUSPICIOUS_NUMBER_OF_FIBERS_UPDATED) {
+        return <Component level={level + 1} />;
+      }
+      return null;
+    };
+
+    await act(() => {
+      ReactTestRenderer.create(<Component level={0} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    await act(() => {
+      React.startTransition(() => {
+        subs.forEach(setState => {
+          setState(state => state + 1);
+        });
+      });
+    });
+    assertConsoleWarnDev(
+      [
+        'Detected a large number of updates inside startTransition. ' +
+          'If this is due to a subscription please re-write it to use React provided hooks. ' +
+          'Otherwise concurrent mode guarantees are off the table.',
+      ],
+      {withoutStack: true},
+    );
+
+    await act(() => {
+      triggerHookTransition(() => {
+        subs.forEach(setState => {
+          setState(state => state + 1);
+        });
+      });
+    });
+    assertConsoleWarnDev(
+      [
+        'Detected a large number of updates inside startTransition. ' +
+          'If this is due to a subscription please re-write it to use React provided hooks. ' +
+          'Otherwise concurrent mode guarantees are off the table.',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
new file mode 100644
index 00000000000..28ac8a99744
--- /dev/null
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactStrictMode', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+
+    act = require('internal-test-utils').act;
+  });
+
+  describe('levels', () => {
+    let log;
+
+    beforeEach(() => {
+      log = [];
+    });
+
+    function Component({label}) {
+      React.useEffect(() => {
+        log.push(`${label}: useEffect mount`);
+        return () => log.push(`${label}: useEffect unmount`);
+      });
+
+      React.useLayoutEffect(() => {
+        log.push(`${label}: useLayoutEffect mount`);
+        return () => log.push(`${label}: useLayoutEffect unmount`);
+      });
+
+      log.push(`${label}: render`);
+
+      return null;
+    }
+
+    it('should default to not strict', async () => {
+      await act(() => {
+        const container = document.createElement('div');
+        const root = ReactDOMClient.createRoot(container);
+        root.render(<Component label="A" />);
+      });
+
+      expect(log).toEqual([
+        'A: render',
+        'A: useLayoutEffect mount',
+        'A: useEffect mount',
+      ]);
+    });
+
+    if (__DEV__) {
+      it('should support enabling strict mode via createRoot option', async () => {
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container, {
+            unstable_strictMode: true,
+          });
+          root.render(<Component label="A" />);
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+          'A: useLayoutEffect unmount',
+          'A: useEffect unmount',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+        ]);
+      });
+
+      it('should include legacy + strict effects mode', async () => {
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          root.render(
+            <React.StrictMode>
+              <Component label="A" />
+            </React.StrictMode>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+          'A: useLayoutEffect unmount',
+          'A: useEffect unmount',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+        ]);
+      });
+
+      it('should allow level to be increased with nesting', async () => {
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          root.render(
+            <>
+              <Component label="A" />
+              <React.StrictMode>
+                <Component label="B" />,
+              </React.StrictMode>
+              ,
+            </>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'B: render',
+          'B: render',
+          'A: useLayoutEffect mount',
+          'B: useLayoutEffect mount',
+          'A: useEffect mount',
+          'B: useEffect mount',
+          'B: useLayoutEffect unmount',
+          'B: useEffect unmount',
+          'B: useLayoutEffect mount',
+          'B: useEffect mount',
+        ]);
+      });
+
+      it('should support nested strict mode on initial mount', async () => {
+        function Wrapper({children}) {
+          return children;
+        }
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          root.render(
+            <Wrapper>
+              <Component label="A" />
+              <React.StrictMode>
+                <Component label="B" />,
+              </React.StrictMode>
+              ,
+            </Wrapper>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'B: render',
+          'B: render',
+          'A: useLayoutEffect mount',
+          'B: useLayoutEffect mount',
+          'A: useEffect mount',
+          'B: useEffect mount',
+          // TODO: this is currently broken
+          // 'B: useLayoutEffect unmount',
+          // 'B: useEffect unmount',
+          // 'B: useLayoutEffect mount',
+          // 'B: useEffect mount',
+        ]);
+      });
+    }
+  });
+});
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
new file mode 100644
index 00000000000..04046d88978
--- /dev/null
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -0,0 +1,1315 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let ReactDOMServer;
+let PropTypes;
+let act;
+let useMemo;
+let useState;
+let useReducer;
+let assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+describe('ReactStrictMode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    ({
+      act,
+      assertConsoleErrorDev,
+      assertConsoleWarnDev,
+    } = require('internal-test-utils'));
+    useMemo = React.useMemo;
+    useState = React.useState;
+    useReducer = React.useReducer;
+  });
+
+  it('should appear in the client component stack', async () => {
+    function Foo() {
+      return <div ariaTypo="" />;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+      );
+    });
+    assertConsoleErrorDev([
+      'Invalid ARIA attribute `ariaTypo`. ' +
+        'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in div (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should appear in the SSR component stack', () => {
+    function Foo() {
+      return <div ariaTypo="" />;
+    }
+
+    ReactDOMServer.renderToString(
+      <React.StrictMode>
+        <Foo />
+      </React.StrictMode>,
+    );
+    assertConsoleErrorDev([
+      'Invalid ARIA attribute `ariaTypo`. ' +
+        'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
+        '    in div (at **)\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  // @gate __DEV__
+  // @gate !disableLegacyMode
+  it('should invoke only precommit lifecycle methods twice in legacy roots', async () => {
+    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,
+    );
+
+    expect(log).toEqual([
+      'constructor',
+      'constructor',
+      'getDerivedStateFromProps',
+      'getDerivedStateFromProps',
+      'render',
+      'render',
+      'componentDidMount',
+    ]);
+
+    log = [];
+    shouldComponentUpdate = true;
+
+    ReactDOM.render(
+      <React.StrictMode>
+        <ClassComponent />
+      </React.StrictMode>,
+      container,
+    );
+    expect(log).toEqual([
+      'getDerivedStateFromProps',
+      'getDerivedStateFromProps',
+      'shouldComponentUpdate',
+      'shouldComponentUpdate',
+      'render',
+      'render',
+      'componentDidUpdate',
+    ]);
+
+    log = [];
+    shouldComponentUpdate = false;
+
+    ReactDOM.render(
+      <React.StrictMode>
+        <ClassComponent />
+      </React.StrictMode>,
+      container,
+    );
+
+    expect(log).toEqual([
+      'getDerivedStateFromProps',
+      'getDerivedStateFromProps',
+      'shouldComponentUpdate',
+      'shouldComponentUpdate',
+    ]);
+  });
+
+  it('should invoke setState callbacks twice', async () => {
+    let instance;
+    class ClassComponent extends React.Component {
+      state = {
+        count: 1,
+      };
+      render() {
+        instance = this;
+        return null;
+      }
+    }
+
+    let setStateCount = 0;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <ClassComponent />
+        </React.StrictMode>,
+      );
+    });
+    await act(() => {
+      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);
+  });
+
+  // @gate __DEV__
+  it('double invokes useState and useReducer initializers functions', async () => {
+    const log = [];
+
+    function App() {
+      React.useState(() => {
+        log.push('Compute initial state count: 1');
+        return 1;
+      });
+      React.useReducer(
+        s => s,
+        2,
+        s => {
+          log.push('Compute initial reducer count: 2');
+          return s;
+        },
+      );
+
+      return 3;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('3');
+
+    expect(log).toEqual([
+      'Compute initial state count: 1',
+      'Compute initial state count: 1',
+      'Compute initial reducer count: 2',
+      'Compute initial reducer count: 2',
+    ]);
+  });
+
+  // @gate !disableLegacyMode
+  it('should invoke only precommit lifecycle methods twice in DEV legacy roots', async () => {
+    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',
+        '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',
+        'shouldComponentUpdate',
+      ]);
+    } else {
+      expect(log).toEqual([
+        'getDerivedStateFromProps',
+        'shouldComponentUpdate',
+      ]);
+    }
+  });
+
+  it('should invoke setState callbacks twice in DEV', async () => {
+    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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <StrictMode>
+          <ClassComponent />
+        </StrictMode>,
+      );
+    });
+    await act(() => {
+      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);
+  });
+
+  // @gate __DEV__
+  it('double invokes useMemo functions', async () => {
+    let log = [];
+
+    function Uppercased({text}) {
+      return useMemo(() => {
+        const uppercased = text.toUpperCase();
+        log.push('Compute toUpperCase: ' + uppercased);
+        return uppercased;
+      }, [text]);
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    // Mount
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <Uppercased text="hello" />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('HELLO');
+    expect(log).toEqual([
+      'Compute toUpperCase: HELLO',
+      'Compute toUpperCase: HELLO',
+    ]);
+
+    log = [];
+
+    // Update
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <Uppercased text="goodbye" />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('GOODBYE');
+    expect(log).toEqual([
+      'Compute toUpperCase: GOODBYE',
+      'Compute toUpperCase: GOODBYE',
+    ]);
+  });
+
+  // @gate __DEV__
+  it('double invokes useMemo functions with first result', async () => {
+    let log = [];
+    function Uppercased({text}) {
+      const memoizedResult = useMemo(() => {
+        const uppercased = text.toUpperCase();
+        log.push('Compute toUpperCase: ' + uppercased);
+        return {uppercased};
+      }, [text]);
+
+      // Push this to the log so we can check whether the same memoized result
+      // it returned during both invocations.
+      log.push(memoizedResult);
+
+      return memoizedResult.uppercased;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    // Mount
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <Uppercased text="hello" />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('HELLO');
+    expect(log).toEqual([
+      'Compute toUpperCase: HELLO',
+      'Compute toUpperCase: HELLO',
+      {uppercased: 'HELLO'},
+      {uppercased: 'HELLO'},
+    ]);
+
+    // Even though the memoized function is invoked twice, the same object
+    // is returned both times.
+    expect(log[2]).toBe(log[3]);
+
+    log = [];
+
+    // Update
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <Uppercased text="goodbye" />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('GOODBYE');
+    expect(log).toEqual([
+      'Compute toUpperCase: GOODBYE',
+      'Compute toUpperCase: GOODBYE',
+      {uppercased: 'GOODBYE'},
+      {uppercased: 'GOODBYE'},
+    ]);
+
+    // Even though the memoized function is invoked twice, the same object
+    // is returned both times.
+    expect(log[2]).toBe(log[3]);
+  });
+
+  // @gate __DEV__
+  it('double invokes setState updater functions', async () => {
+    const log = [];
+
+    let setCount;
+    function App() {
+      const [count, _setCount] = useState(0);
+      setCount = _setCount;
+      return count;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('0');
+
+    await act(() => {
+      setCount(() => {
+        log.push('Compute count: 1');
+        return 1;
+      });
+    });
+    expect(container.textContent).toBe('1');
+    expect(log).toEqual(['Compute count: 1', 'Compute count: 1']);
+  });
+
+  // @gate __DEV__
+  it('double invokes reducer functions', async () => {
+    const log = [];
+
+    function reducer(prevState, action) {
+      log.push('Compute new state: ' + action);
+      return action;
+    }
+
+    let dispatch;
+    function App() {
+      const [count, _dispatch] = useReducer(reducer, 0);
+      dispatch = _dispatch;
+      return count;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      );
+    });
+    expect(container.textContent).toBe('0');
+
+    await act(() => {
+      dispatch(1);
+    });
+    expect(container.textContent).toBe('1');
+    expect(log).toEqual(['Compute new state: 1', 'Compute new state: 1']);
+  });
+});
+
+describe('Concurrent Mode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  it('should warn about unsafe legacy lifecycle methods anywhere in a StrictMode tree', async () => {
+    function StrictRoot() {
+      return (
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      );
+    }
+    class App 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 = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<StrictRoot />));
+    assertConsoleErrorDev(
+      [
+        `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.
+
+* Move code with side effects to componentDidMount, and set initial state in the constructor.
+
+Please update the following components: App`,
+        `Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/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://react.dev/link/derived-state
+
+Please update the following components: Bar, Foo`,
+        `Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+
+Please update the following components: App`,
+      ],
+      {withoutStack: true},
+    );
+
+    // Dedupe
+    await act(() => root.render(<App />));
+  });
+
+  it('should coalesce warnings by lifecycle name', async () => {
+    function StrictRoot() {
+      return (
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      );
+    }
+    class App 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 = ReactDOMClient.createRoot(container);
+
+    await act(() => root.render(<StrictRoot />));
+    assertConsoleErrorDev(
+      [
+        `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.
+
+* Move code with side effects to componentDidMount, and set initial state in the constructor.
+
+Please update the following components: App`,
+        `Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/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://react.dev/link/derived-state
+
+Please update the following components: Child`,
+        `Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.
+
+* Move data fetching code or side effects to componentDidUpdate.
+
+Please update the following components: App`,
+      ],
+      {withoutStack: true},
+    );
+    assertConsoleWarnDev(
+      [
+        `componentWillMount has been renamed, and is not recommended for use. See https://react.dev/link/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 18.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`,
+        `componentWillReceiveProps has been renamed, and is not recommended for use. See https://react.dev/link/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://react.dev/link/derived-state
+* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.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`,
+        `componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/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 18.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`,
+      ],
+      {withoutStack: true},
+    );
+    // Dedupe
+    await act(() => root.render(<StrictRoot />));
+  });
+
+  it('should warn about components not present during the initial render', async () => {
+    function StrictRoot({foo}) {
+      return <React.StrictMode>{foo ? <Foo /> : <Bar />}</React.StrictMode>;
+    }
+    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 = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<StrictRoot foo={true} />));
+    assertConsoleErrorDev(
+      [
+        'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +
+          'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
+          '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n\n' +
+          'Please update the following components: Foo',
+      ],
+      {withoutStack: true},
+    );
+
+    await act(() => root.render(<StrictRoot foo={false} />));
+    assertConsoleErrorDev(
+      [
+        'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +
+          'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
+          '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n\n' +
+          'Please update the following components: Bar',
+      ],
+      {withoutStack: true},
+    );
+
+    // Dedupe
+    await act(() => root.render(<StrictRoot foo={true} />));
+    await act(() => root.render(<StrictRoot foo={false} />));
+  });
+
+  it('should also warn inside of "strict" mode trees', async () => {
+    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');
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<SyncRoot />);
+    });
+    assertConsoleErrorDev(
+      [
+        'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' +
+          'and may indicate bugs in your code. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n\n' +
+          'Please update the following components: Bar, Foo',
+      ],
+      {withoutStack: true},
+    );
+
+    // Dedupe
+    await act(() => {
+      root.render(<SyncRoot />);
+    });
+  });
+});
+
+describe('symbol checks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  it('should switch from StrictMode to a Fragment and reset state', async () => {
+    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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<ParentComponent useFragment={false} />);
+    });
+    expect(container.textContent).toBe('count:1');
+    await act(() => {
+      root.render(<ParentComponent useFragment={true} />);
+    });
+    expect(container.textContent).toBe('count:1');
+  });
+
+  it('should switch from a Fragment to StrictMode and reset state', async () => {
+    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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<ParentComponent useFragment={true} />);
+    });
+    expect(container.textContent).toBe('count:1');
+    await act(() => {
+      root.render(<ParentComponent useFragment={false} />);
+    });
+    expect(container.textContent).toBe('count:1');
+  });
+
+  it('should update with StrictMode without losing state', async () => {
+    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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<ParentComponent />);
+    });
+    expect(container.textContent).toBe('count:1');
+    await act(() => {
+      root.render(<ParentComponent />);
+    });
+    expect(container.textContent).toBe('count:2');
+  });
+});
+
+describe('context legacy', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    PropTypes = require('prop-types');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // @gate !disableLegacyContext || !__DEV__
+  it('should warn if the legacy context API have been used in strict mode', async () => {
+    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');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Root />);
+    });
+
+    assertConsoleErrorDev([
+      'LegacyContextProvider uses the legacy childContextTypes API ' +
+        'which will soon be removed. Use React.createContext() instead. ' +
+        '(https://react.dev/link/legacy-context)' +
+        '\n    in Root (at **)',
+      'LegacyContextConsumer uses the legacy contextTypes API which ' +
+        'will soon be removed. Use React.createContext() with static ' +
+        'contextType instead. (https://react.dev/link/legacy-context)' +
+        '\n    in LegacyContextProvider (at **)' +
+        '\n    in Root (at **)',
+      'FunctionalLegacyContextConsumer uses the legacy contextTypes ' +
+        'API which will be removed soon. Use React.createContext() ' +
+        'with React.useContext() instead. (https://react.dev/link/legacy-context)' +
+        '\n    in LegacyContextProvider (at **)' +
+        '\n    in Root (at **)',
+      '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://react.dev/link/legacy-context' +
+        '\n    in Root (at **)',
+    ]);
+
+    // Dedupe
+    await act(() => {
+      root.render(<Root />);
+    });
+  });
+
+  describe('console logs logging', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      React = require('react');
+      ReactDOMClient = require('react-dom/client');
+      act = require('internal-test-utils').act;
+
+      // These tests are specifically testing console.log.
+      spyOnDevAndProd(console, 'log').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      console.log.mockRestore();
+    });
+
+    it('does not disable logs for class double render', async () => {
+      let count = 0;
+      class Foo extends React.Component {
+        render() {
+          count++;
+          console.log('foo ' + count);
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo 1');
+    });
+
+    it('does not disable logs for class double ctor', async () => {
+      let count = 0;
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props);
+          count++;
+          console.log('foo ' + count);
+        }
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo 1');
+    });
+
+    it('does not disable logs for class double getDerivedStateFromProps', async () => {
+      let count = 0;
+      class Foo extends React.Component {
+        state = {};
+        static getDerivedStateFromProps() {
+          count++;
+          console.log('foo ' + count);
+          return {};
+        }
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo 1');
+    });
+
+    it('does not disable logs for class double shouldComponentUpdate', async () => {
+      let count = 0;
+      class Foo extends React.Component {
+        state = {};
+        shouldComponentUpdate() {
+          count++;
+          console.log('foo ' + count);
+          return {};
+        }
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo 1');
+    });
+
+    it('does not disable logs for class state updaters', async () => {
+      let inst;
+      let count = 0;
+      class Foo extends React.Component {
+        state = {};
+        render() {
+          inst = this;
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      await act(() => {
+        inst.setState(() => {
+          count++;
+          console.log('foo ' + count);
+          return {};
+        });
+      });
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo 1');
+    });
+
+    it('does not disable logs for function double render', async () => {
+      let count = 0;
+      function Foo() {
+        count++;
+        console.log('foo ' + count);
+        return null;
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo 1');
+    });
+
+    it('does not disable logs for effect double invoke', async () => {
+      let create = 0;
+      let cleanup = 0;
+      function Foo() {
+        React.useEffect(() => {
+          create++;
+          console.log('foo create ' + create);
+          return () => {
+            cleanup++;
+            console.log('foo cleanup ' + cleanup);
+          };
+        });
+        return null;
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+        );
+      });
+      expect(create).toBe(__DEV__ ? 2 : 1);
+      expect(cleanup).toBe(__DEV__ ? 1 : 0);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 3 : 1);
+      // Note: we should display the first log because otherwise
+      // there is a risk of suppressing warnings when they happen,
+      // and on the next render they'd get deduplicated and ignored.
+      expect(console.log).toBeCalledWith('foo create 1');
+      if (__DEV__) {
+        expect(console.log).toBeCalledWith('foo cleanup 1');
+      }
+    });
+  });
+});
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
new file mode 100644
index 00000000000..254f686184a
--- /dev/null
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -0,0 +1,728 @@
+/// <reference path="./testDefinitions/PropTypes.d.ts" />
+/// <reference path="./testDefinitions/React.d.ts" />
+/// <reference path="./testDefinitions/ReactDOM.d.ts" />
+/// <reference path="./testDefinitions/ReactDOMClient.d.ts" />
+/// <reference path="./testDefinitions/ReactInternalAct.d.ts" />
+
+/*!
+ * Copyright (c) Meta Platforms, Inc. and 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 = require('react');
+import ReactDOM = require('react-dom');
+import ReactDOMClient = require('react-dom/client');
+import PropTypes = require('prop-types');
+import ReactFeatureFlags = require('shared/ReactFeatureFlags');
+import TestUtils = require('internal-test-utils');
+
+// Before Each
+const assertConsoleErrorDev = TestUtils.assertConsoleErrorDev;
+const assertConsoleWarnDev = TestUtils.assertConsoleWarnDev;
+let container;
+let root;
+let attachedListener = null;
+let renderedName = null;
+
+class Inner extends React.Component {
+  getName() {
+    return this.props.name;
+  }
+  render() {
+    attachedListener = this.props.onClick;
+    renderedName = this.props.name;
+    return React.createElement('div', {className: this.props.name});
+  }
+}
+
+function test(element, expectedTag, expectedClassName) {
+  ReactDOM.flushSync(() => root.render(element));
+  expect(container.firstChild).not.toBeNull();
+  expect(container.firstChild.tagName).toBe(expectedTag);
+  expect(container.firstChild.className).toBe(expectedClassName);
+}
+
+// Classes need to be declared at the top level scope, so we declare all the
+// classes that will be used by the tests below, instead of inlining them.
+// TODO: Consider redesigning this using modules so that we can use non-unique
+// names of classes and bundle them with the test code.
+
+// it preserves the name of the class for use in error messages
+// it throws if no render function is defined
+class Empty extends React.Component {}
+
+// it renders a simple stateless component with prop
+class SimpleStateless extends React.Component {
+  props: any;
+  render() {
+    return React.createElement(Inner, {name: this.props.bar});
+  }
+}
+
+// it renders based on state using initial values in this.props
+class InitialState extends React.Component {
+  state = {
+    bar: this.props.initialValue,
+  };
+  render() {
+    return React.createElement('span', {className: this.state.bar});
+  }
+}
+
+// it renders based on state using props in the constructor
+class StateBasedOnProps extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {bar: props.initialValue};
+  }
+  changeState() {
+    this.setState({bar: 'bar'});
+  }
+  render() {
+    if (this.state.bar === 'foo') {
+      return React.createElement('div', {className: 'foo'});
+    }
+    return React.createElement('span', {className: this.state.bar});
+  }
+}
+
+// it renders based on context in the constructor
+class StateBasedOnContext extends React.Component {
+  static contextTypes = {
+    tag: PropTypes.string,
+    className: PropTypes.string,
+  };
+  state = {
+    tag: this.context.tag,
+    className: this.context.className,
+  };
+  render() {
+    const Tag = this.state.tag;
+    return React.createElement(Tag, {className: this.state.className});
+  }
+}
+
+class ProvideChildContextTypes extends React.Component {
+  static childContextTypes = {
+    tag: PropTypes.string,
+    className: PropTypes.string,
+  };
+  getChildContext() {
+    return {tag: 'span', className: 'foo'};
+  }
+  render() {
+    return React.createElement(StateBasedOnContext);
+  }
+}
+
+// it renders only once when setting state in componentWillMount
+let renderCount = 0;
+class RenderOnce extends React.Component {
+  state = {
+    bar: this.props.initialValue,
+  };
+  UNSAFE_componentWillMount() {
+    this.setState({bar: 'bar'});
+  }
+  render() {
+    renderCount++;
+    return React.createElement('span', {className: this.state.bar});
+  }
+}
+
+// it should throw with non-object in the initial state property
+class ArrayState extends React.Component {
+  state = ['an array'];
+  render() {
+    return React.createElement('span');
+  }
+}
+class StringState extends React.Component {
+  state = 'a string';
+  render() {
+    return React.createElement('span');
+  }
+}
+class NumberState extends React.Component {
+  state = 1234;
+  render() {
+    return React.createElement('span');
+  }
+}
+
+// it should render with null in the initial state property
+class NullState extends React.Component {
+  state = null;
+  render() {
+    return React.createElement('span');
+  }
+}
+
+// it setState through an event handler
+class BoundEventHandler extends React.Component {
+  state = {
+    bar: this.props.initialValue,
+  };
+  handleClick = () => {
+    this.setState({bar: 'bar'});
+  };
+  render() {
+    return React.createElement(Inner, {
+      name: this.state.bar,
+      onClick: this.handleClick,
+    });
+  }
+}
+
+// it should not implicitly bind event handlers
+class UnboundEventHandler extends React.Component {
+  state = {
+    bar: this.props.initialValue,
+  };
+  handleClick() {
+    this.setState({bar: 'bar'});
+  }
+  render() {
+    return React.createElement(Inner, {
+      name: this.state.bar,
+      onClick: this.handleClick,
+    });
+  }
+}
+
+// it renders using forceUpdate even when there is no state
+class ForceUpdateWithNoState extends React.Component {
+  mutativeValue: string = this.props.initialValue;
+  handleClick() {
+    this.mutativeValue = 'bar';
+    this.forceUpdate();
+  }
+  render() {
+    return React.createElement(Inner, {
+      name: this.mutativeValue,
+      onClick: this.handleClick.bind(this),
+    });
+  }
+}
+
+// it will call all the normal life cycle methods
+let lifeCycles = [];
+class NormalLifeCycles extends React.Component {
+  props: any;
+  state = {};
+  UNSAFE_componentWillMount() {
+    lifeCycles.push('will-mount');
+  }
+  componentDidMount() {
+    lifeCycles.push('did-mount');
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    lifeCycles.push('receive-props', nextProps);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    lifeCycles.push('should-update', nextProps, nextState);
+    return true;
+  }
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
+    lifeCycles.push('will-update', nextProps, nextState);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    lifeCycles.push('did-update', prevProps, prevState);
+  }
+  componentWillUnmount() {
+    lifeCycles.push('will-unmount');
+  }
+  render() {
+    return React.createElement('span', {className: this.props.value});
+  }
+}
+
+// warns when classic properties are defined on the instance,
+// but does not invoke them.
+let getInitialStateWasCalled = false;
+let getDefaultPropsWasCalled = false;
+class ClassicProperties extends React.Component {
+  contextTypes = {};
+  contextType = {};
+  getDefaultProps() {
+    getDefaultPropsWasCalled = true;
+    return {};
+  }
+  getInitialState() {
+    getInitialStateWasCalled = true;
+    return {};
+  }
+  render() {
+    return React.createElement('span', {className: 'foo'});
+  }
+}
+
+// it should warn when misspelling shouldComponentUpdate
+class MisspelledComponent1 extends React.Component {
+  componentShouldUpdate() {
+    return false;
+  }
+  render() {
+    return React.createElement('span', {className: 'foo'});
+  }
+}
+
+// it should warn when misspelling componentWillReceiveProps
+class MisspelledComponent2 extends React.Component {
+  componentWillRecieveProps() {
+    return false;
+  }
+  render() {
+    return React.createElement('span', {className: 'foo'});
+  }
+}
+
+// it should warn when misspelling UNSAFE_componentWillReceiveProps
+class MisspelledComponent3 extends React.Component {
+  UNSAFE_componentWillRecieveProps() {
+    return false;
+  }
+  render() {
+    return React.createElement('span', {className: 'foo'});
+  }
+}
+
+// it supports this.context passed via getChildContext
+class ReadContext extends React.Component {
+  static contextTypes = {bar: PropTypes.string};
+  render() {
+    return React.createElement('div', {className: this.context.bar});
+  }
+}
+class ProvideContext extends React.Component {
+  static childContextTypes = {bar: PropTypes.string};
+  getChildContext() {
+    return {bar: 'bar-through-context'};
+  }
+  render() {
+    return React.createElement(ReadContext);
+  }
+}
+
+// it supports classic refs
+class ClassicRefs extends React.Component {
+  render() {
+    return React.createElement(Inner, {name: 'foo', ref: 'inner'});
+  }
+}
+
+// Describe the actual test cases.
+
+describe('ReactTypeScriptClass', function () {
+  beforeEach(function () {
+    container = document.createElement('div');
+    root = ReactDOMClient.createRoot(container);
+    attachedListener = null;
+    renderedName = null;
+  });
+
+  it('preserves the name of the class for use in error messages', function () {
+    expect(Empty.name).toBe('Empty');
+  });
+
+  it('throws if no render function is defined', function () {
+    class Foo extends React.Component {}
+    const caughtErrors = [];
+    function errorHandler(event) {
+      event.preventDefault();
+      caughtErrors.push(event.error);
+    }
+    window.addEventListener('error', errorHandler);
+    try {
+      ReactDOM.flushSync(() => root.render(React.createElement(Empty)));
+      assertConsoleErrorDev([
+        // A failed component renders twice in DEV in concurrent mode
+        'No `render` method found on the Empty instance: ' +
+          'you may have forgotten to define `render`.\n' +
+          '    in Empty (at **)',
+        'No `render` method found on the Empty instance: ' +
+          'you may have forgotten to define `render`.\n' +
+          '    in Empty (at **)',
+      ]);
+    } finally {
+      window.removeEventListener('error', errorHandler);
+    }
+    expect(caughtErrors.length).toBe(1);
+  });
+
+  it('renders a simple stateless component with prop', function () {
+    test(React.createElement(SimpleStateless, {bar: 'foo'}), 'DIV', 'foo');
+    test(React.createElement(SimpleStateless, {bar: 'bar'}), 'DIV', 'bar');
+  });
+
+  it('renders based on state using initial values in this.props', function () {
+    test(
+      React.createElement(InitialState, {initialValue: 'foo'}),
+      'SPAN',
+      'foo',
+    );
+  });
+
+  it('renders based on state using props in the constructor', function () {
+    const ref = React.createRef();
+    test(
+      React.createElement(StateBasedOnProps, {initialValue: 'foo', ref: ref}),
+      'DIV',
+      'foo',
+    );
+    ReactDOM.flushSync(() => ref.current.changeState());
+    test(React.createElement(StateBasedOnProps), 'SPAN', 'bar');
+  });
+
+  it('sets initial state with value returned by static getDerivedStateFromProps', function () {
+    class Foo extends React.Component {
+      state = {
+        foo: null,
+        bar: null,
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          foo: nextProps.foo,
+          bar: 'bar',
+        };
+      }
+      render() {
+        return React.createElement('div', {
+          className: `${this.state.foo} ${this.state.bar}`,
+        });
+      }
+    }
+    test(React.createElement(Foo, {foo: 'foo'}), 'DIV', 'foo bar');
+  });
+
+  it('warns if getDerivedStateFromProps is not static', function () {
+    class Foo extends React.Component {
+      getDerivedStateFromProps() {
+        return {};
+      }
+      render() {
+        return React.createElement('div', {});
+      }
+    }
+    ReactDOM.flushSync(() =>
+      root.render(React.createElement(Foo, {foo: 'foo'})),
+    );
+    assertConsoleErrorDev([
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if getDerivedStateFromError is not static', function () {
+    class Foo extends React.Component {
+      getDerivedStateFromError() {
+        return {};
+      }
+      render() {
+        return React.createElement('div');
+      }
+    }
+    ReactDOM.flushSync(() =>
+      root.render(React.createElement(Foo, {foo: 'foo'})),
+    );
+    assertConsoleErrorDev([
+      'Foo: getDerivedStateFromError() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if getSnapshotBeforeUpdate is static', function () {
+    class Foo extends React.Component {
+      static getSnapshotBeforeUpdate() {}
+      render() {
+        return React.createElement('div', {});
+      }
+    }
+    ReactDOM.flushSync(() =>
+      root.render(React.createElement(Foo, {foo: 'foo'})),
+    );
+    assertConsoleErrorDev([
+      'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
+        'and will be ignored. Instead, declare it as an instance method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if state not initialized before static getDerivedStateFromProps', function () {
+    class Foo extends React.Component {
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          foo: nextProps.foo,
+          bar: 'bar',
+        };
+      }
+      render() {
+        return React.createElement('div', {
+          className: `${this.state.foo} ${this.state.bar}`,
+        });
+      }
+    }
+    ReactDOM.flushSync(() =>
+      root.render(React.createElement(Foo, {foo: 'foo'})),
+    );
+    assertConsoleErrorDev([
+      '`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.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('updates initial state with values returned by static getDerivedStateFromProps', function () {
+    class Foo extends React.Component {
+      state = {
+        foo: 'foo',
+        bar: 'bar',
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+          foo: `not-${prevState.foo}`,
+        };
+      }
+      render() {
+        return React.createElement('div', {
+          className: `${this.state.foo} ${this.state.bar}`,
+        });
+      }
+    }
+    test(React.createElement(Foo), 'DIV', 'not-foo bar');
+  });
+
+  it('renders updated state with values returned by static getDerivedStateFromProps', function () {
+    class Foo extends React.Component {
+      state = {
+        value: 'initial',
+      };
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.update) {
+          return {
+            value: 'updated',
+          };
+        }
+        return null;
+      }
+      render() {
+        return React.createElement('div', {className: this.state.value});
+      }
+    }
+    test(React.createElement(Foo, {update: false}), 'DIV', 'initial');
+    test(React.createElement(Foo, {update: true}), 'DIV', 'updated');
+  });
+
+  if (!ReactFeatureFlags.disableLegacyContext) {
+    it('renders based on context in the constructor', function () {
+      test(React.createElement(ProvideChildContextTypes), 'SPAN', 'foo');
+      assertConsoleErrorDev([
+        'ProvideChildContextTypes uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in ProvideChildContextTypes (at **)',
+        'StateBasedOnContext uses the legacy contextTypes API which will soon be removed. ' +
+          'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in ProvideChildContextTypes.createElement (at **)',
+      ]);
+    });
+  }
+
+  it('renders only once when setting state in componentWillMount', function () {
+    renderCount = 0;
+    test(React.createElement(RenderOnce, {initialValue: 'foo'}), 'SPAN', 'bar');
+    expect(renderCount).toBe(1);
+  });
+
+  it('should warn with non-object in the initial state property', function () {
+    test(React.createElement(ArrayState), 'SPAN', '');
+    assertConsoleErrorDev([
+      'ArrayState.state: must be set to an object or null\n' +
+        '    in ArrayState (at **)',
+    ]);
+    test(React.createElement(StringState), 'SPAN', '');
+    assertConsoleErrorDev([
+      'StringState.state: must be set to an object or null\n' +
+        '    in StringState (at **)',
+    ]);
+    test(React.createElement(NumberState), 'SPAN', '');
+    assertConsoleErrorDev([
+      'NumberState.state: must be set to an object or null\n' +
+        '    in NumberState (at **)',
+    ]);
+  });
+
+  it('should render with null in the initial state property', function () {
+    test(React.createElement(NullState), 'SPAN', '');
+  });
+
+  it('setState through an event handler', function () {
+    test(
+      React.createElement(BoundEventHandler, {initialValue: 'foo'}),
+      'DIV',
+      'foo',
+    );
+    ReactDOM.flushSync(() => attachedListener());
+    expect(renderedName).toBe('bar');
+  });
+
+  it('should not implicitly bind event handlers', function () {
+    test(
+      React.createElement(UnboundEventHandler, {initialValue: 'foo'}),
+      'DIV',
+      'foo',
+    );
+    expect(attachedListener).toThrow();
+  });
+
+  it('renders using forceUpdate even when there is no state', function () {
+    test(
+      React.createElement(ForceUpdateWithNoState, {initialValue: 'foo'}),
+      'DIV',
+      'foo',
+    );
+    ReactDOM.flushSync(() => attachedListener());
+    expect(renderedName).toBe('bar');
+  });
+
+  it('will call all the normal life cycle methods', function () {
+    lifeCycles = [];
+    test(React.createElement(NormalLifeCycles, {value: 'foo'}), 'SPAN', 'foo');
+    expect(lifeCycles).toEqual(['will-mount', 'did-mount']);
+    lifeCycles = []; // reset
+    test(React.createElement(NormalLifeCycles, {value: 'bar'}), 'SPAN', 'bar');
+    expect(lifeCycles).toEqual([
+      'receive-props',
+      {value: 'bar'},
+      'should-update',
+      {value: 'bar'},
+      {},
+      'will-update',
+      {value: 'bar'},
+      {},
+      'did-update',
+      {value: 'foo'},
+      {},
+    ]);
+    lifeCycles = []; // reset
+    ReactDOM.flushSync(() => root.unmount(container));
+    expect(lifeCycles).toEqual(['will-unmount']);
+  });
+
+  if (!ReactFeatureFlags.disableLegacyContext) {
+    it(
+      'warns when classic properties are defined on the instance, ' +
+        'but does not invoke them.',
+      function () {
+        getInitialStateWasCalled = false;
+        getDefaultPropsWasCalled = false;
+        test(React.createElement(ClassicProperties), 'SPAN', 'foo');
+        assertConsoleErrorDev([
+          'getInitialState was defined on ClassicProperties, a plain JavaScript class. ' +
+            'This is only supported for classes created using React.createClass. ' +
+            'Did you mean to define a state property instead?\n' +
+            '    in ClassicProperties (at **)',
+          'getDefaultProps was defined on ClassicProperties, a plain JavaScript class. ' +
+            'This is only supported for classes created using React.createClass. ' +
+            'Use a static property to define defaultProps instead.\n' +
+            '    in ClassicProperties (at **)',
+          'contextType was defined as an instance property on ClassicProperties. ' +
+            'Use a static property to define contextType instead.\n' +
+            '    in ClassicProperties (at **)',
+          'contextTypes was defined as an instance property on ClassicProperties. ' +
+            'Use a static property to define contextTypes instead.\n' +
+            '    in ClassicProperties (at **)',
+        ]);
+        expect(getInitialStateWasCalled).toBe(false);
+        expect(getDefaultPropsWasCalled).toBe(false);
+      },
+    );
+  }
+
+  it(
+    'does not warn about getInitialState() on class components ' +
+      'if state is also defined.',
+    () => {
+      class Example extends React.Component {
+        state = {};
+        getInitialState() {
+          return {};
+        }
+        render() {
+          return React.createElement('span', {className: 'foo'});
+        }
+      }
+
+      test(React.createElement(Example), 'SPAN', 'foo');
+    },
+  );
+
+  it('should warn when misspelling shouldComponentUpdate', function () {
+    test(React.createElement(MisspelledComponent1), 'SPAN', 'foo');
+    assertConsoleErrorDev([
+      '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.\n' +
+        '    in MisspelledComponent1 (at **)',
+    ]);
+  });
+
+  it('should warn when misspelling componentWillReceiveProps', function () {
+    test(React.createElement(MisspelledComponent2), 'SPAN', 'foo');
+    assertConsoleErrorDev([
+      'MisspelledComponent2 has a method called componentWillRecieveProps(). ' +
+        'Did you mean componentWillReceiveProps()?\n' +
+        '    in MisspelledComponent2 (at **)',
+    ]);
+  });
+
+  it('should warn when misspelling UNSAFE_componentWillReceiveProps', function () {
+    test(React.createElement(MisspelledComponent3), 'SPAN', 'foo');
+    assertConsoleErrorDev([
+      'MisspelledComponent3 has a method called UNSAFE_componentWillRecieveProps(). ' +
+        'Did you mean UNSAFE_componentWillReceiveProps()?\n' +
+        '    in MisspelledComponent3 (at **)',
+    ]);
+  });
+
+  it('should throw AND warn when trying to access classic APIs', function () {
+    const ref = React.createRef();
+    test(React.createElement(Inner, {name: 'foo', ref: ref}), 'DIV', 'foo');
+    expect(() => ref.current.replaceState({})).toThrow();
+    assertConsoleWarnDev(
+      [
+        'replaceState(...) is deprecated in plain JavaScript React classes. ' +
+          'Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236).',
+      ],
+      {withoutStack: true},
+    );
+    expect(() => ref.current.isMounted()).toThrow();
+    assertConsoleWarnDev(
+      [
+        'isMounted(...) is deprecated in plain JavaScript React classes. ' +
+          'Instead, make sure to clean up subscriptions and pending requests in ' +
+          'componentWillUnmount to prevent memory leaks.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  if (!ReactFeatureFlags.disableLegacyContext) {
+    it('supports this.context passed via getChildContext', () => {
+      test(React.createElement(ProvideContext), 'DIV', 'bar-through-context');
+      assertConsoleErrorDev([
+        'ProvideContext uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
+          '    in ProvideContext (at **)',
+        'ReadContext uses the legacy contextTypes API which will soon be removed. ' +
+          'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
+          '    in ProvideContext.createElement (at **)',
+      ]);
+    });
+  }
+});
diff --git a/packages/react/src/__tests__/ReactVersion-test.js b/packages/react/src/__tests__/ReactVersion-test.js
new file mode 100644
index 00000000000..41a8ffa4bbe
--- /dev/null
+++ b/packages/react/src/__tests__/ReactVersion-test.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// NOTE: Intentionally using the dynamic version of the `gate` pragma to opt out
+// the negative test behavior. If this test happens to pass when running
+// against files source, that's fine. But all we care about is the behavior of
+// the build artifacts.
+// TODO: The experimental builds have a different version at runtime than
+// the package.json because DevTools uses it for feature detection. Consider
+// some other way of handling that.
+test('ReactVersion matches package.json', () => {
+  if (gate(flags => flags.build && flags.stable && !flags.www)) {
+    const React = require('react');
+    const packageJSON = require('react/package.json');
+    expect(React.version).toBe(packageJSON.version);
+  }
+});
diff --git a/packages/react/src/__tests__/__snapshots__/ReactProfilerComponent-test.internal.js.snap b/packages/react/src/__tests__/__snapshots__/ReactProfilerComponent-test.internal.js.snap
new file mode 100644
index 00000000000..38b48308e17
--- /dev/null
+++ b/packages/react/src/__tests__/__snapshots__/ReactProfilerComponent-test.internal.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should render children 1`] = `"<div><span>outside span</span><span>inside span</span><span>function component</span></div>"`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 1`] = `""`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 2`] = `"<div></div>"`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support nested Profilers 1`] = `"<div>outer function component</div><span>inner class component</span><span>inner span</span>"`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should render children 1`] = `"<div><span>outside span</span><span>inside span</span><span>function component</span></div>"`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 1`] = `""`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 2`] = `"<div></div>"`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support nested Profilers 1`] = `"<div>outer function component</div><span>inner class component</span><span>inner span</span>"`;
diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.js b/packages/react/src/__tests__/createReactClassIntegration-test.js
new file mode 100644
index 00000000000..70817172018
--- /dev/null
+++ b/packages/react/src/__tests__/createReactClassIntegration-test.js
@@ -0,0 +1,926 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 assertConsoleErrorDev;
+let assertConsoleWarnDev;
+
+let PropTypes;
+let React;
+let ReactDOMClient;
+let createReactClass;
+
+describe('create-react-class-integration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ({
+      act,
+      assertConsoleErrorDev,
+      assertConsoleWarnDev,
+    } = require('internal-test-utils'));
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    createReactClass = require('create-react-class/factory')(
+      React.Component,
+      React.isValidElement,
+      new React.Component().updater,
+    );
+  });
+
+  it('should throw when `render` is not specified', () => {
+    expect(function () {
+      createReactClass({});
+    }).toThrowError('Class specification must implement a `render` method.');
+  });
+
+  it('should copy prop types onto the Constructor', () => {
+    const propValidator = jest.fn();
+    const TestComponent = createReactClass({
+      propTypes: {
+        value: propValidator,
+      },
+      render: function () {
+        return <div />;
+      },
+    });
+
+    expect(TestComponent.propTypes).toBeDefined();
+    expect(TestComponent.propTypes.value).toBe(propValidator);
+  });
+
+  it('should warn on invalid prop types', () => {
+    createReactClass({
+      displayName: 'Component',
+      propTypes: {
+        prop: null,
+      },
+      render: function () {
+        return <span>{this.props.prop}</span>;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        'Warning: Component: prop type `prop` is invalid; ' +
+          'it must be a function, usually from React.PropTypes.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn on invalid context types', () => {
+    createReactClass({
+      displayName: 'Component',
+      contextTypes: {
+        prop: null,
+      },
+      render: function () {
+        return <span>{this.props.prop}</span>;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        'Warning: Component: context type `prop` is invalid; ' +
+          'it must be a function, usually from React.PropTypes.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should throw on invalid child context types', () => {
+    createReactClass({
+      displayName: 'Component',
+      childContextTypes: {
+        prop: null,
+      },
+      render: function () {
+        return <span>{this.props.prop}</span>;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        'Warning: Component: child context type `prop` is invalid; it must be a function, usually from React.PropTypes.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn when misspelling shouldComponentUpdate', () => {
+    createReactClass({
+      componentShouldUpdate: function () {
+        return false;
+      },
+      render: function () {
+        return <div />;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        '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.',
+      ],
+      {withoutStack: true},
+    );
+
+    createReactClass({
+      displayName: 'NamedComponent',
+      componentShouldUpdate: function () {
+        return false;
+      },
+      render: function () {
+        return <div />;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        '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},
+    );
+  });
+
+  it('should warn when misspelling componentWillReceiveProps', () => {
+    createReactClass({
+      componentWillRecieveProps: function () {
+        return false;
+      },
+      render: function () {
+        return <div />;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        'Warning: A component has a method called componentWillRecieveProps(). Did you ' +
+          'mean componentWillReceiveProps()?',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn when misspelling UNSAFE_componentWillReceiveProps', () => {
+    createReactClass({
+      UNSAFE_componentWillRecieveProps: function () {
+        return false;
+      },
+      render: function () {
+        return <div />;
+      },
+    });
+    assertConsoleErrorDev(
+      [
+        'Warning: A component has a method called UNSAFE_componentWillRecieveProps(). ' +
+          'Did you mean UNSAFE_componentWillReceiveProps()?',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should throw if a reserved property is in statics', () => {
+    expect(function () {
+      createReactClass({
+        statics: {
+          getDefaultProps: function () {
+            return {
+              foo: 0,
+            };
+          },
+        },
+
+        render: function () {
+          return <span />;
+        },
+      });
+    }).toThrowError(
+      'ReactClass: You are attempting to define a reserved property, ' +
+        '`getDefaultProps`, that shouldn\'t be on the "statics" key. Define ' +
+        'it as an instance property instead; it will still be accessible on ' +
+        'the constructor.',
+    );
+  });
+
+  // TODO: Consider actually moving these to statics or drop this unit test.
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should warn when using deprecated non-static spec keys', () => {
+    createReactClass({
+      mixins: [{}],
+      propTypes: {
+        foo: PropTypes.string,
+      },
+      contextTypes: {
+        foo: PropTypes.string,
+      },
+      childContextTypes: {
+        foo: PropTypes.string,
+      },
+      render: function () {
+        return <div />;
+      },
+    });
+    assertConsoleErrorDev([
+      '`mixins` is now a static property and should ' +
+        'be defined inside "statics".',
+      '`propTypes` is now a static property and should ' +
+        'be defined inside "statics".',
+      '`contextTypes` is now a static property and ' +
+        'should be defined inside "statics".',
+      '`childContextTypes` is now a static property and ' +
+        'should be defined inside "statics".',
+    ]);
+  });
+
+  it('should support statics', async () => {
+    const Component = createReactClass({
+      statics: {
+        abc: 'def',
+        def: 0,
+        ghi: null,
+        jkl: 'mno',
+        pqr: function () {
+          return this;
+        },
+      },
+
+      render: function () {
+        return <span />;
+      },
+    });
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
+    expect(instance.constructor.abc).toBe('def');
+    expect(Component.abc).toBe('def');
+    expect(instance.constructor.def).toBe(0);
+    expect(Component.def).toBe(0);
+    expect(instance.constructor.ghi).toBe(null);
+    expect(Component.ghi).toBe(null);
+    expect(instance.constructor.jkl).toBe('mno');
+    expect(Component.jkl).toBe('mno');
+    expect(instance.constructor.pqr()).toBe(Component);
+    expect(Component.pqr()).toBe(Component);
+  });
+
+  it('should work with object getInitialState() return values', async () => {
+    const Component = createReactClass({
+      getInitialState: function () {
+        return {
+          occupation: 'clown',
+        };
+      },
+      render: function () {
+        return <span />;
+      },
+    });
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
+    expect(instance.state.occupation).toEqual('clown');
+  });
+
+  it('should work with getDerivedStateFromProps() return values', async () => {
+    const Component = createReactClass({
+      getInitialState() {
+        return {};
+      },
+      render: function () {
+        return <span />;
+      },
+    });
+    Component.getDerivedStateFromProps = () => {
+      return {occupation: 'clown'};
+    };
+    let instance;
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+    expect(instance.state.occupation).toEqual('clown');
+  });
+
+  // @gate !disableLegacyContext
+  it('renders based on context getInitialState', async () => {
+    const Foo = createReactClass({
+      contextTypes: {
+        className: PropTypes.string,
+      },
+      getInitialState() {
+        return {className: this.context.className};
+      },
+      render() {
+        return <span className={this.state.className} />;
+      },
+    });
+
+    const Outer = createReactClass({
+      childContextTypes: {
+        className: PropTypes.string,
+      },
+      getChildContext() {
+        return {className: 'foo'};
+      },
+      render() {
+        return <Foo />;
+      },
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<Outer />);
+    });
+    assertConsoleErrorDev([
+      [
+        'Component uses the legacy childContextTypes API which will soon be removed. ' +
+          'Use React.createContext() instead. (https://react.dev/link/legacy-context)',
+        {withoutStack: true},
+      ],
+      'Component uses the legacy contextTypes API which will soon be removed. ' +
+        'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)' +
+        '\n    in ReactClassComponent (at **)',
+    ]);
+    expect(container.firstChild.className).toBe('foo');
+  });
+
+  it('should throw with non-object getInitialState() return values', async () => {
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const state of [['an array'], 'a string', 1234]) {
+      const Component = createReactClass({
+        getInitialState: function () {
+          return state;
+        },
+        render: function () {
+          return <span />;
+        },
+      });
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await expect(
+        act(() => {
+          root.render(<Component />);
+        }),
+      ).rejects.toThrowError(
+        'Component.getInitialState(): must return an object or null',
+      );
+    }
+  });
+
+  it('should work with a null getInitialState() return value', async () => {
+    const Component = createReactClass({
+      getInitialState: function () {
+        return null;
+      },
+      render: function () {
+        return <span />;
+      },
+    });
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(
+      act(() => {
+        root.render(<Component />);
+      }),
+    ).resolves.not.toThrow();
+  });
+
+  it('should throw when using legacy factories', () => {
+    const Component = createReactClass({
+      render() {
+        return <div />;
+      },
+    });
+
+    expect(() => Component()).toThrow();
+    assertConsoleErrorDev(
+      [
+        'Warning: Something is calling a React component directly. Use a ' +
+          'factory or JSX instead. See: https://fb.me/react-legacyfactory',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('replaceState and callback works', async () => {
+    const ops = [];
+    const Component = createReactClass({
+      getInitialState() {
+        return {step: 0};
+      },
+      render() {
+        ops.push('Render: ' + this.state.step);
+        return <div />;
+      },
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    let instance;
+    await act(() => {
+      root.render(<Component ref={current => (instance = current)} />);
+    });
+
+    await act(() => {
+      instance.replaceState({step: 1}, () => {
+        ops.push('Callback: ' + instance.state.step);
+      });
+    });
+
+    expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']);
+  });
+
+  it('getDerivedStateFromProps updates state when props change', async () => {
+    const Component = createReactClass({
+      getInitialState() {
+        return {
+          count: 1,
+        };
+      },
+      render() {
+        return <div>count:{this.state.count}</div>;
+      },
+    });
+    Component.getDerivedStateFromProps = (nextProps, prevState) => ({
+      count: prevState.count + nextProps.incrementBy,
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <div>
+          <Component incrementBy={0} />
+        </div>,
+      );
+    });
+    expect(container.firstChild.textContent).toEqual('count:1');
+    await act(() => {
+      root.render(
+        <div>
+          <Component incrementBy={2} />
+        </div>,
+      );
+    });
+    expect(container.firstChild.textContent).toEqual('count:3');
+  });
+
+  it('should support the new static getDerivedStateFromProps method', async () => {
+    let instance;
+    const Component = createReactClass({
+      statics: {
+        getDerivedStateFromProps: function () {
+          return {foo: 'bar'};
+        },
+      },
+
+      getInitialState() {
+        return {};
+      },
+
+      render: function () {
+        instance = this;
+        return null;
+      },
+    });
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+    expect(instance.state.foo).toBe('bar');
+  });
+
+  it('warns if getDerivedStateFromProps is not static', async () => {
+    const Foo = createReactClass({
+      displayName: 'Foo',
+      getDerivedStateFromProps() {
+        return {};
+      },
+      render() {
+        return <div />;
+      },
+    });
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Foo foo="foo" />);
+    });
+    assertConsoleErrorDev([
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if getDerivedStateFromError is not static', async () => {
+    const Foo = createReactClass({
+      displayName: 'Foo',
+      getDerivedStateFromError() {
+        return {};
+      },
+      render() {
+        return <div />;
+      },
+    });
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Foo foo="foo" />);
+    });
+    assertConsoleErrorDev([
+      'Foo: getDerivedStateFromError() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('warns if getSnapshotBeforeUpdate is static', async () => {
+    const Foo = createReactClass({
+      displayName: 'Foo',
+      statics: {
+        getSnapshotBeforeUpdate: function () {
+          return null;
+        },
+      },
+      render() {
+        return <div />;
+      },
+    });
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Foo foo="foo" />);
+    });
+    assertConsoleErrorDev([
+      'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
+        'and will be ignored. Instead, declare it as an instance method.\n' +
+        '    in Foo (at **)',
+    ]);
+  });
+
+  it('should warn if state is not properly initialized before getDerivedStateFromProps', async () => {
+    const Component = createReactClass({
+      displayName: 'Component',
+      statics: {
+        getDerivedStateFromProps: function () {
+          return null;
+        },
+      },
+      render: function () {
+        return null;
+      },
+    });
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '`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.\n' +
+        '    in Component (at **)',
+    ]);
+  });
+
+  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new static gDSFP is present', async () => {
+    const Component = createReactClass({
+      statics: {
+        getDerivedStateFromProps: function () {
+          return null;
+        },
+      },
+      componentWillMount: function () {
+        throw Error('unexpected');
+      },
+      componentWillReceiveProps: function () {
+        throw Error('unexpected');
+      },
+      componentWillUpdate: function () {
+        throw Error('unexpected');
+      },
+      getInitialState: function () {
+        return {};
+      },
+      render: function () {
+        return null;
+      },
+    });
+    Component.displayName = 'Component';
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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: Component',
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +
+          'this warning in non-strict mode. In React 18.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: Component',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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: Component',
+      ],
+      {withoutStack: true},
+    );
+    await act(() => {
+      root.render(<Component foo={1} />);
+    });
+  });
+
+  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', async () => {
+    const Component = createReactClass({
+      getSnapshotBeforeUpdate: function () {
+        return null;
+      },
+      componentWillMount: function () {
+        throw Error('unexpected');
+      },
+      componentWillReceiveProps: function () {
+        throw Error('unexpected');
+      },
+      componentWillUpdate: function () {
+        throw Error('unexpected');
+      },
+      componentDidUpdate: function () {},
+      render: function () {
+        return null;
+      },
+    });
+    Component.displayName = 'Component';
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev([
+      '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://react.dev/link/unsafe-component-lifecycles\n' +
+        '    in Component (at **)',
+    ]);
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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: Component',
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +
+          'this warning in non-strict mode. In React 18.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: Component',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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: Component',
+      ],
+      {withoutStack: true},
+    );
+    await act(() => {
+      const root2 = ReactDOMClient.createRoot(document.createElement('div'));
+      root2.render(<Component foo={1} />);
+    });
+  });
+
+  it('should invoke both deprecated and new lifecycles if both are present', async () => {
+    const log = [];
+
+    const Component = createReactClass({
+      mixins: [
+        {
+          componentWillMount: function () {
+            log.push('componentWillMount');
+          },
+          componentWillReceiveProps: function () {
+            log.push('componentWillReceiveProps');
+          },
+          componentWillUpdate: function () {
+            log.push('componentWillUpdate');
+          },
+        },
+      ],
+      UNSAFE_componentWillMount: function () {
+        log.push('UNSAFE_componentWillMount');
+      },
+      UNSAFE_componentWillReceiveProps: function () {
+        log.push('UNSAFE_componentWillReceiveProps');
+      },
+      UNSAFE_componentWillUpdate: function () {
+        log.push('UNSAFE_componentWillUpdate');
+      },
+      render: function () {
+        return null;
+      },
+    });
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    await act(() => {
+      root.render(<Component foo="bar" />);
+    });
+    assertConsoleWarnDev(
+      [
+        'componentWillMount has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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: Component',
+        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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://react.dev/link/derived-state\n' +
+          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +
+          'this warning in non-strict mode. In React 18.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: Component',
+        'componentWillUpdate has been renamed, and is not recommended for use. ' +
+          'See https://react.dev/link/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 18.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: Component',
+      ],
+      {withoutStack: true},
+    );
+    expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);
+
+    log.length = 0;
+
+    await act(() => {
+      root.render(<Component foo="baz" />);
+    });
+    expect(log).toEqual([
+      'componentWillReceiveProps',
+      'UNSAFE_componentWillReceiveProps',
+      'componentWillUpdate',
+      'UNSAFE_componentWillUpdate',
+    ]);
+  });
+
+  it('isMounted works', async () => {
+    const ops = [];
+    let instance;
+    const Component = createReactClass({
+      displayName: 'MyComponent',
+      mixins: [
+        {
+          UNSAFE_componentWillMount() {
+            this.log('mixin.componentWillMount');
+          },
+          componentDidMount() {
+            this.log('mixin.componentDidMount');
+          },
+          UNSAFE_componentWillUpdate() {
+            this.log('mixin.componentWillUpdate');
+          },
+          componentDidUpdate() {
+            this.log('mixin.componentDidUpdate');
+          },
+          componentWillUnmount() {
+            this.log('mixin.componentWillUnmount');
+          },
+        },
+      ],
+      log(name) {
+        ops.push(`${name}: ${this.isMounted()}`);
+      },
+      getInitialState() {
+        this.log('getInitialState');
+        return {};
+      },
+      UNSAFE_componentWillMount() {
+        this.log('componentWillMount');
+      },
+      componentDidMount() {
+        this.log('componentDidMount');
+      },
+      UNSAFE_componentWillUpdate() {
+        this.log('componentWillUpdate');
+      },
+      componentDidUpdate() {
+        this.log('componentDidUpdate');
+      },
+      componentWillUnmount() {
+        this.log('componentWillUnmount');
+      },
+      render() {
+        instance = this;
+        this.log('render');
+        return <div />;
+      },
+    });
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+
+    await act(() => {
+      root.render(<Component />);
+    });
+    assertConsoleErrorDev(
+      [
+        'Warning: MyComponent: isMounted is deprecated. Instead, make sure to ' +
+          'clean up subscriptions and pending requests in componentWillUnmount ' +
+          'to prevent memory leaks.\n' +
+          '    in MyComponent (at **)',
+      ],
+      // This now has a component stack even though it's part of a third-party library.
+    );
+
+    // Dedupe
+
+    await act(() => {
+      root.render(<Component />);
+    });
+
+    await act(() => {
+      root.unmount();
+    });
+    instance.log('after unmount');
+    expect(ops).toEqual([
+      'getInitialState: false',
+      'mixin.componentWillMount: false',
+      'componentWillMount: false',
+      'render: false',
+      'mixin.componentDidMount: true',
+      'componentDidMount: true',
+      'mixin.componentWillUpdate: true',
+      'componentWillUpdate: true',
+      'render: true',
+      'mixin.componentDidUpdate: true',
+      'componentDidUpdate: true',
+      'mixin.componentWillUnmount: true',
+      'componentWillUnmount: true',
+      'after unmount: false',
+    ]);
+  });
+});
diff --git a/packages/react/src/__tests__/forwardRef-test.internal.js b/packages/react/src/__tests__/forwardRef-test.internal.js
new file mode 100644
index 00000000000..42bbfe44d32
--- /dev/null
+++ b/packages/react/src/__tests__/forwardRef-test.internal.js
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('forwardRef', () => {
+  let React;
+  let ReactNoop;
+  let Scheduler;
+  let waitForAll;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+  });
+
+  it('should work without a ref to be forwarded', async () => {
+    class Child extends React.Component {
+      render() {
+        Scheduler.log(this.props.value);
+        return null;
+      }
+    }
+
+    function Wrapper(props) {
+      return <Child {...props} ref={props.forwardedRef} />;
+    }
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Wrapper {...props} forwardedRef={ref} />
+    ));
+
+    ReactNoop.render(<RefForwardingComponent value={123} />);
+    await waitForAll([123]);
+  });
+
+  it('should forward a ref for a single child', async () => {
+    class Child extends React.Component {
+      render() {
+        Scheduler.log(this.props.value);
+        return null;
+      }
+    }
+
+    function Wrapper(props) {
+      return <Child {...props} ref={props.forwardedRef} />;
+    }
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Wrapper {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} value={123} />);
+    await waitForAll([123]);
+    expect(ref.current instanceof Child).toBe(true);
+  });
+
+  it('should forward a ref for multiple children', async () => {
+    class Child extends React.Component {
+      render() {
+        Scheduler.log(this.props.value);
+        return null;
+      }
+    }
+
+    function Wrapper(props) {
+      return <Child {...props} ref={props.forwardedRef} />;
+    }
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Wrapper {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+
+    ReactNoop.render(
+      <div>
+        <div />
+        <RefForwardingComponent ref={ref} value={123} />
+        <div />
+      </div>,
+    );
+    await waitForAll([123]);
+    expect(ref.current instanceof Child).toBe(true);
+  });
+
+  it('should maintain child instance and ref through updates', async () => {
+    class Child extends React.Component {
+      constructor(props) {
+        super(props);
+      }
+      render() {
+        Scheduler.log(this.props.value);
+        return null;
+      }
+    }
+
+    function Wrapper(props) {
+      return <Child {...props} ref={props.forwardedRef} />;
+    }
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Wrapper {...props} forwardedRef={ref} />
+    ));
+
+    let setRefCount = 0;
+    let ref;
+
+    const setRef = r => {
+      setRefCount++;
+      ref = r;
+    };
+
+    ReactNoop.render(<RefForwardingComponent ref={setRef} value={123} />);
+    await waitForAll([123]);
+    expect(ref instanceof Child).toBe(true);
+    expect(setRefCount).toBe(1);
+    ReactNoop.render(<RefForwardingComponent ref={setRef} value={456} />);
+    await waitForAll([456]);
+    expect(ref instanceof Child).toBe(true);
+    expect(setRefCount).toBe(1);
+  });
+
+  it('should not break lifecycle error handling', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        Scheduler.log('ErrorBoundary.componentDidCatch');
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.log('ErrorBoundary.render: catch');
+          return null;
+        }
+        Scheduler.log('ErrorBoundary.render: try');
+        return this.props.children;
+      }
+    }
+
+    class BadRender extends React.Component {
+      render() {
+        Scheduler.log('BadRender throw');
+        throw new Error('oops!');
+      }
+    }
+
+    function Wrapper(props) {
+      const forwardedRef = props.forwardedRef;
+      Scheduler.log('Wrapper');
+      return <BadRender {...props} ref={forwardedRef} />;
+    }
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Wrapper {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+
+    ReactNoop.render(
+      <ErrorBoundary>
+        <RefForwardingComponent ref={ref} />
+      </ErrorBoundary>,
+    );
+    await waitForAll([
+      'ErrorBoundary.render: try',
+      'Wrapper',
+      'BadRender throw',
+
+      // React retries one more time
+      'ErrorBoundary.render: try',
+      'Wrapper',
+      'BadRender throw',
+
+      // Errored again on retry. Now handle it.
+      'ErrorBoundary.componentDidCatch',
+      'ErrorBoundary.render: catch',
+    ]);
+    expect(ref.current).toBe(null);
+  });
+
+  it('should not re-run the render callback on a deep setState', async () => {
+    let inst;
+
+    class Inner extends React.Component {
+      render() {
+        Scheduler.log('Inner');
+        inst = this;
+        return <div ref={this.props.forwardedRef} />;
+      }
+    }
+
+    function Middle(props) {
+      Scheduler.log('Middle');
+      return <Inner {...props} />;
+    }
+
+    const Forward = React.forwardRef((props, ref) => {
+      Scheduler.log('Forward');
+      return <Middle {...props} forwardedRef={ref} />;
+    });
+
+    function App() {
+      Scheduler.log('App');
+      return <Forward />;
+    }
+
+    ReactNoop.render(<App />);
+    await waitForAll(['App', 'Forward', 'Middle', 'Inner']);
+
+    inst.setState({});
+    await waitForAll(['Inner']);
+  });
+});
diff --git a/packages/react/src/__tests__/forwardRef-test.js b/packages/react/src/__tests__/forwardRef-test.js
new file mode 100644
index 00000000000..b163ac0025e
--- /dev/null
+++ b/packages/react/src/__tests__/forwardRef-test.js
@@ -0,0 +1,406 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('forwardRef', () => {
+  let React;
+  let ReactNoop;
+  let waitForAll;
+  let assertConsoleErrorDev;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+  });
+
+  it('should update refs when switching between children', async () => {
+    function FunctionComponent({forwardedRef, setRefOnDiv}) {
+      return (
+        <section>
+          <div ref={setRefOnDiv ? forwardedRef : null}>First</div>
+          <span ref={setRefOnDiv ? null : forwardedRef}>Second</span>
+        </section>
+      );
+    }
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <FunctionComponent {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} setRefOnDiv={true} />);
+    await waitForAll([]);
+    expect(ref.current.type).toBe('div');
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} setRefOnDiv={false} />);
+    await waitForAll([]);
+    expect(ref.current.type).toBe('span');
+  });
+
+  it('should support rendering null', async () => {
+    const RefForwardingComponent = React.forwardRef((props, ref) => null);
+
+    const ref = React.createRef();
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} />);
+    await waitForAll([]);
+    expect(ref.current).toBe(null);
+  });
+
+  it('should support rendering null for multiple children', async () => {
+    const RefForwardingComponent = React.forwardRef((props, ref) => null);
+
+    const ref = React.createRef();
+
+    ReactNoop.render(
+      <div>
+        <div />
+        <RefForwardingComponent ref={ref} />
+        <div />
+      </div>,
+    );
+    await waitForAll([]);
+    expect(ref.current).toBe(null);
+  });
+
+  it('should warn if not provided a callback during creation', () => {
+    React.forwardRef(undefined);
+    assertConsoleErrorDev(
+      ['forwardRef requires a render function but was given undefined.'],
+      {withoutStack: true},
+    );
+
+    React.forwardRef(null);
+    assertConsoleErrorDev(
+      ['forwardRef requires a render function but was given null.'],
+      {
+        withoutStack: true,
+      },
+    );
+
+    React.forwardRef('foo');
+    assertConsoleErrorDev(
+      ['forwardRef requires a render function but was given string.'],
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn if no render function is provided', () => {
+    React.forwardRef();
+    assertConsoleErrorDev(
+      ['forwardRef requires a render function but was given undefined.'],
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn if the render function provided has defaultProps attributes', () => {
+    function renderWithDefaultProps(props, ref) {
+      return null;
+    }
+    renderWithDefaultProps.defaultProps = {};
+
+    React.forwardRef(renderWithDefaultProps);
+    assertConsoleErrorDev(
+      [
+        'forwardRef render functions do not support defaultProps. ' +
+          'Did you accidentally pass a React component?',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should not warn if the render function provided does not use any parameter', () => {
+    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} />;
+
+    React.forwardRef(arityOfOne);
+    assertConsoleErrorDev(
+      [
+        'forwardRef render functions accept exactly two parameters: props and ref. ' +
+          'Did you forget to use the ref parameter?',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should not warn if the render function provided use exactly two parameters', () => {
+    const arityOfTwo = (props, ref) => <div {...props} ref={ref} />;
+    React.forwardRef(arityOfTwo);
+  });
+
+  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} />;
+
+    React.forwardRef(arityOfThree);
+    assertConsoleErrorDev(
+      [
+        'forwardRef render functions accept exactly two parameters: props and ref. ' +
+          'Any additional parameter will be undefined.',
+      ],
+      {withoutStack: true},
+    );
+  });
+
+  it('should skip forwardRef in the stack if neither displayName nor name are present', async () => {
+    const RefForwardingComponent = React.forwardRef(function (props, ref) {
+      return [<span />];
+    });
+    ReactNoop.render(
+      <p>
+        <RefForwardingComponent />
+      </p>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the top-level render call using <ForwardRef>. It was passed a child from ForwardRef. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in **/forwardRef-test.js:**:** (at **)',
+    ]);
+  });
+
+  it('should use the inner function name for the stack', async () => {
+    const RefForwardingComponent = React.forwardRef(function Inner(props, ref) {
+      return [<span />];
+    });
+    ReactNoop.render(
+      <p>
+        <RefForwardingComponent />
+      </p>,
+    );
+
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Inner (at **)',
+    ]);
+  });
+
+  it('should use the inner name in the stack', async () => {
+    const fn = (props, ref) => {
+      return [<span />];
+    };
+    Object.defineProperty(fn, 'name', {value: 'Inner'});
+    const RefForwardingComponent = React.forwardRef(fn);
+    ReactNoop.render(
+      <p>
+        <RefForwardingComponent />
+      </p>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Inner (at **)',
+    ]);
+  });
+
+  it('can use the outer displayName in the stack', async () => {
+    const RefForwardingComponent = React.forwardRef((props, ref) => {
+      return [<span />];
+    });
+    RefForwardingComponent.displayName = 'Outer';
+    ReactNoop.render(
+      <p>
+        <RefForwardingComponent />
+      </p>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Outer (at **)',
+    ]);
+  });
+
+  it('should prefer the inner name to the outer displayName in the stack', async () => {
+    const fn = (props, ref) => {
+      return [<span />];
+    };
+    Object.defineProperty(fn, 'name', {value: 'Inner'});
+    const RefForwardingComponent = React.forwardRef(fn);
+    RefForwardingComponent.displayName = 'Outer';
+    ReactNoop.render(
+      <p>
+        <RefForwardingComponent />
+      </p>,
+    );
+    await waitForAll([]);
+    assertConsoleErrorDev([
+      'Each child in a list should have a unique "key" prop.' +
+        '\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
+        'See https://react.dev/link/warning-keys for more information.\n' +
+        '    in span (at **)\n' +
+        '    in Inner (at **)',
+    ]);
+  });
+
+  it('should not bailout if forwardRef is not wrapped in memo', async () => {
+    const Component = props => <div {...props} />;
+
+    let renderCount = 0;
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => {
+      renderCount++;
+      return <Component {...props} forwardedRef={ref} />;
+    });
+
+    const ref = React.createRef();
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(1);
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(2);
+  });
+
+  it('should bailout if forwardRef is wrapped in memo', async () => {
+    const Component = props => <div ref={props.forwardedRef} />;
+
+    let renderCount = 0;
+
+    const RefForwardingComponent = React.memo(
+      React.forwardRef((props, ref) => {
+        renderCount++;
+        return <Component {...props} forwardedRef={ref} />;
+      }),
+    );
+
+    const ref = React.createRef();
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(1);
+
+    expect(ref.current.type).toBe('div');
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(1);
+
+    const differentRef = React.createRef();
+
+    ReactNoop.render(
+      <RefForwardingComponent ref={differentRef} optional="foo" />,
+    );
+    await waitForAll([]);
+    expect(renderCount).toBe(2);
+
+    expect(ref.current).toBe(null);
+    expect(differentRef.current.type).toBe('div');
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} optional="bar" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(3);
+  });
+
+  it('should custom memo comparisons to compose', async () => {
+    const Component = props => <div ref={props.forwardedRef} />;
+
+    let renderCount = 0;
+
+    const RefForwardingComponent = React.memo(
+      React.forwardRef((props, ref) => {
+        renderCount++;
+        return <Component {...props} forwardedRef={ref} />;
+      }),
+      (o, p) => o.a === p.a && o.b === p.b,
+    );
+
+    const ref = React.createRef();
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="0" c="1" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(1);
+
+    expect(ref.current.type).toBe('div');
+
+    // Changing either a or b rerenders
+    ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="1" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(2);
+
+    // Changing c doesn't rerender
+    ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="2" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(2);
+
+    const ComposedMemo = React.memo(
+      RefForwardingComponent,
+      (o, p) => o.a === p.a && o.c === p.c,
+    );
+
+    ReactNoop.render(<ComposedMemo ref={ref} a="0" b="0" c="0" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(3);
+
+    // Changing just b no longer updates
+    ReactNoop.render(<ComposedMemo ref={ref} a="0" b="1" c="0" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(3);
+
+    // Changing just a and c updates
+    ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="2" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(4);
+
+    // Changing just c does not update
+    ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="3" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(4);
+
+    // Changing ref still rerenders
+    const differentRef = React.createRef();
+
+    ReactNoop.render(<ComposedMemo ref={differentRef} a="2" b="2" c="3" />);
+    await waitForAll([]);
+    expect(renderCount).toBe(5);
+
+    expect(ref.current).toBe(null);
+    expect(differentRef.current.type).toBe('div');
+  });
+
+  it('warns on forwardRef(memo(...))', () => {
+    React.forwardRef(
+      React.memo((props, ref) => {
+        return null;
+      }),
+    );
+    assertConsoleErrorDev(
+      [
+        'forwardRef requires a render function but received a `memo` ' +
+          'component. Instead of forwardRef(memo(...)), use ' +
+          'memo(forwardRef(...)).',
+      ],
+      {withoutStack: true},
+    );
+  });
+});
diff --git a/packages/react/src/__tests__/onlyChild-test.js b/packages/react/src/__tests__/onlyChild-test.js
new file mode 100644
index 00000000000..f6bec485fe2
--- /dev/null
+++ b/packages/react/src/__tests__/onlyChild-test.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('onlyChild', () => {
+  let React;
+  let WrapComponent;
+
+  beforeEach(() => {
+    React = require('react');
+    WrapComponent = class extends React.Component {
+      render() {
+        return (
+          <div>
+            {React.Children.only(this.props.children, this.props.mapFn, this)}
+          </div>
+        );
+      }
+    };
+  });
+
+  it('should fail when passed two children', () => {
+    expect(function () {
+      const instance = (
+        <WrapComponent>
+          <div />
+          <span />
+        </WrapComponent>
+      );
+      React.Children.only(instance.props.children);
+    }).toThrow();
+  });
+
+  it('should fail when passed nully values', () => {
+    expect(function () {
+      const instance = <WrapComponent>{null}</WrapComponent>;
+      React.Children.only(instance.props.children);
+    }).toThrow();
+
+    expect(function () {
+      const instance = <WrapComponent>{undefined}</WrapComponent>;
+      React.Children.only(instance.props.children);
+    }).toThrow();
+  });
+
+  it('should fail when key/value objects', () => {
+    expect(function () {
+      const instance = <WrapComponent>{[<span key="abc" />]}</WrapComponent>;
+      React.Children.only(instance.props.children);
+    }).toThrow();
+  });
+
+  it('should not fail when passed interpolated single child', () => {
+    expect(function () {
+      const instance = <WrapComponent>{<span />}</WrapComponent>;
+      React.Children.only(instance.props.children);
+    }).not.toThrow();
+  });
+
+  it('should return the only child', () => {
+    const instance = (
+      <WrapComponent>
+        <span />
+      </WrapComponent>
+    );
+    expect(React.Children.only(instance.props.children)).toEqual(<span />);
+  });
+});
diff --git a/packages/react/src/__tests__/testDefinitions/PropTypes.d.ts b/packages/react/src/__tests__/testDefinitions/PropTypes.d.ts
new file mode 100644
index 00000000000..ae86fedaa99
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/PropTypes.d.ts
@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare module 'prop-types' {
+  export let string : any;
+}
diff --git a/packages/react/src/__tests__/testDefinitions/React.d.ts b/packages/react/src/__tests__/testDefinitions/React.d.ts
new file mode 100644
index 00000000000..ff26ded0184
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/React.d.ts
@@ -0,0 +1,30 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare let global: any;
+
+declare module 'react' {
+  export class Component {
+    props: any;
+    state: any;
+    context: any;
+    static name: string;
+    constructor(props?, context?);
+    setState(partial : any, callback ?: any) : void;
+    forceUpdate(callback ?: any) : void;
+  }
+  export let PropTypes : any;
+  export function createElement(tag : any, props ?: any, ...children : any[]) : any
+  export function createRef(): any;
+}
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
new file mode 100644
index 00000000000..eb6ad709efb
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare module 'react-dom' {
+  export function render(element : any, container : any) : any
+  export function unmountComponentAtNode(container : any) : void
+  export function findDOMNode(instance : any) : any
+  export function flushSync(cb : any) : any
+}
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts
new file mode 100644
index 00000000000..c6ec79edff4
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts
@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare module 'react-dom/client' {
+  export function createRoot(container : any, options?: any) : any
+  export function hydrateRoot(container : any, children: any, options?: any) : any
+}
diff --git a/packages/react/src/__tests__/testDefinitions/ReactInternalAct.d.ts b/packages/react/src/__tests__/testDefinitions/ReactInternalAct.d.ts
new file mode 100644
index 00000000000..967a2d306a1
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/ReactInternalAct.d.ts
@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare module 'jest-react' {
+  export function act(cb : () => any) : any
+}
diff --git a/packages/react/src/jsx/ReactJSX.js b/packages/react/src/jsx/ReactJSX.js
new file mode 100644
index 00000000000..86255deb4ae
--- /dev/null
+++ b/packages/react/src/jsx/ReactJSX.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_TYPE} from 'shared/ReactSymbols';
+import {
+  jsxProd,
+  jsxProdSignatureRunningInDevWithDynamicChildren,
+  jsxProdSignatureRunningInDevWithStaticChildren,
+  jsxDEV as _jsxDEV,
+} from './ReactJSXElement';
+
+const jsx: any = __DEV__
+  ? jsxProdSignatureRunningInDevWithDynamicChildren
+  : jsxProd;
+// we may want to special case jsxs internally to take advantage of static children.
+// for now we can ship identical prod functions
+const jsxs: any = __DEV__
+  ? jsxProdSignatureRunningInDevWithStaticChildren
+  : jsxProd;
+
+const jsxDEV: any = __DEV__ ? _jsxDEV : undefined;
+
+export {REACT_FRAGMENT_TYPE as Fragment, jsx, jsxs, jsxDEV};
diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
new file mode 100644
index 00000000000..3a5a5d51a9b
--- /dev/null
+++ b/packages/react/src/jsx/ReactJSXElement.js
@@ -0,0 +1,906 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import hasOwnProperty from 'shared/hasOwnProperty';
+import assign from 'shared/assign';
+import {
+  REACT_ELEMENT_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_OPTIMISTIC_KEY,
+} from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
+import isArray from 'shared/isArray';
+import {ownerStackLimit, enableOptimisticKey} from 'shared/ReactFeatureFlags';
+
+const createTask =
+  // eslint-disable-next-line react-internal/no-production-logging
+  __DEV__ && console.createTask
+    ? // eslint-disable-next-line react-internal/no-production-logging
+      console.createTask
+    : () => null;
+
+function getTaskName(type) {
+  if (type === REACT_FRAGMENT_TYPE) {
+    return '<>';
+  }
+  if (
+    typeof type === 'object' &&
+    type !== null &&
+    type.$$typeof === REACT_LAZY_TYPE
+  ) {
+    // We don't want to eagerly initialize the initializer in DEV mode so we can't
+    // call it to extract the type so we don't know the type of this component.
+    return '<...>';
+  }
+  try {
+    const name = getComponentNameFromType(type);
+    return name ? '<' + name + '>' : '<...>';
+  } catch (x) {
+    return '<...>';
+  }
+}
+
+function getOwner() {
+  if (__DEV__) {
+    const dispatcher = ReactSharedInternals.A;
+    if (dispatcher === null) {
+      return null;
+    }
+    return dispatcher.getOwner();
+  }
+  return null;
+}
+
+// v8 (Chromium, Node.js) defaults to 10
+// SpiderMonkey (Firefox) does not support Error.stackTraceLimit
+// JSC (Safari) defaults to 100
+// The lower the limit, the more likely we'll not reach react_stack_bottom_frame
+// The higher the limit, the slower Error() is when not inspecting with a debugger.
+// When inspecting with a debugger, Error.stackTraceLimit has no impact on Error() performance (in v8).
+const ownerStackTraceLimit = 10;
+
+/** @noinline */
+function UnknownOwner() {
+  /** @noinline */
+  return (() => Error('react-stack-top-frame'))();
+}
+const createFakeCallStack = {
+  react_stack_bottom_frame: function (callStackForError) {
+    return callStackForError();
+  },
+};
+
+let specialPropKeyWarningShown;
+let didWarnAboutElementRef;
+let didWarnAboutOldJSXRuntime;
+let unknownOwnerDebugStack;
+let unknownOwnerDebugTask;
+
+if (__DEV__) {
+  didWarnAboutElementRef = {};
+
+  // We use this technique to trick minifiers to preserve the function name.
+  unknownOwnerDebugStack = createFakeCallStack.react_stack_bottom_frame.bind(
+    createFakeCallStack,
+    UnknownOwner,
+  )();
+  unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+}
+
+function hasValidRef(config) {
+  if (__DEV__) {
+    if (hasOwnProperty.call(config, 'ref')) {
+      const getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+  return config.ref !== undefined;
+}
+
+function hasValidKey(config) {
+  if (__DEV__) {
+    if (hasOwnProperty.call(config, 'key')) {
+      const getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+      if (getter && getter.isReactWarning) {
+        return false;
+      }
+    }
+  }
+  return config.key !== undefined;
+}
+
+function defineKeyPropWarningGetter(props, displayName) {
+  if (__DEV__) {
+    const warnAboutAccessingKey = function () {
+      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://react.dev/link/special-props)',
+          displayName,
+        );
+      }
+    };
+    warnAboutAccessingKey.isReactWarning = true;
+    Object.defineProperty(props, 'key', {
+      get: warnAboutAccessingKey,
+      configurable: true,
+    });
+  }
+}
+
+function elementRefGetterWithDeprecationWarning() {
+  if (__DEV__) {
+    const componentName = getComponentNameFromType(this.type);
+    if (!didWarnAboutElementRef[componentName]) {
+      didWarnAboutElementRef[componentName] = true;
+      console.error(
+        'Accessing element.ref was removed in React 19. ref is now a ' +
+          'regular prop. It will be removed from the JSX Element ' +
+          'type in a future release.',
+      );
+    }
+
+    // An undefined `element.ref` is coerced to `null` for
+    // backwards compatibility.
+    const refProp = this.props.ref;
+    return refProp !== undefined ? refProp : null;
+  }
+}
+
+/**
+ * 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, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.transitional.element') to check
+ * if something is a React Element.
+ *
+ * @internal
+ */
+function ReactElement(type, key, props, owner, debugStack, debugTask) {
+  // Ignore whatever was passed as the ref argument and treat `props.ref` as
+  // the source of truth. The only thing we use this for is `element.ref`,
+  // which will log a deprecation warning on access. In the next release, we
+  // can remove `element.ref` as well as the `ref` argument.
+  const refProp = props.ref;
+
+  // An undefined `element.ref` is coerced to `null` for
+  // backwards compatibility.
+  const ref = refProp !== undefined ? refProp : null;
+
+  let element;
+  if (__DEV__) {
+    // In dev, make `ref` a non-enumerable property with a warning. It's non-
+    // enumerable so that test matchers and serializers don't access it and
+    // trigger the warning.
+    //
+    // `ref` will be removed from the element completely in a future release.
+    element = {
+      // This tag allows us to uniquely identify this as a React Element
+      $$typeof: REACT_ELEMENT_TYPE,
+
+      // Built-in properties that belong on the element
+      type,
+      key,
+
+      props,
+
+      // Record the component responsible for creating this element.
+      _owner: owner,
+    };
+    if (ref !== null) {
+      Object.defineProperty(element, 'ref', {
+        enumerable: false,
+        get: elementRefGetterWithDeprecationWarning,
+      });
+    } else {
+      // Don't warn on access if a ref is not given. This reduces false
+      // positives in cases where a test serializer uses
+      // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+      // a problem because it bypasses non-enumerability.
+      //
+      // So unfortunately this will trigger a false positive warning in Jest
+      // when the diff is printed:
+      //
+      //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+      //
+      // A bit sketchy, but this is what we've done for the `props.key` and
+      // `props.ref` accessors for years, which implies it will be good enough
+      // for `element.ref`, too. Let's see if anyone complains.
+      Object.defineProperty(element, 'ref', {
+        enumerable: false,
+        value: null,
+      });
+    }
+  } else {
+    // In prod, `ref` is a regular property and _owner doesn't exist.
+    element = {
+      // This tag allows us to uniquely identify this as a React Element
+      $$typeof: REACT_ELEMENT_TYPE,
+
+      // Built-in properties that belong on the element
+      type,
+      key,
+      ref,
+
+      props,
+    };
+  }
+
+  if (__DEV__) {
+    // The validation flag is currently mutative. We put it on
+    // an external backing store so that we can freeze the whole object.
+    // This can be replaced with a WeakMap once they are implemented in
+    // commonly used development environments.
+    element._store = {};
+
+    // To make comparing ReactElements easier for testing purposes, we make
+    // the validation flag non-enumerable (where possible, which should
+    // include every environment we run tests in), so the test framework
+    // ignores it.
+    Object.defineProperty(element._store, 'validated', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: 0,
+    });
+    // debugInfo contains Server Component debug information.
+    Object.defineProperty(element, '_debugInfo', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: null,
+    });
+    Object.defineProperty(element, '_debugStack', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: debugStack,
+    });
+    Object.defineProperty(element, '_debugTask', {
+      configurable: false,
+      enumerable: false,
+      writable: true,
+      value: debugTask,
+    });
+    if (Object.freeze) {
+      Object.freeze(element.props);
+      Object.freeze(element);
+    }
+  }
+
+  return element;
+}
+
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+export function jsxProd(type, config, maybeKey) {
+  let key = null;
+
+  // 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) {
+    if (enableOptimisticKey && maybeKey === REACT_OPTIMISTIC_KEY) {
+      key = REACT_OPTIMISTIC_KEY;
+    } else {
+      if (__DEV__) {
+        checkKeyStringCoercion(maybeKey);
+      }
+      key = '' + maybeKey;
+    }
+  }
+
+  if (hasValidKey(config)) {
+    if (enableOptimisticKey && maybeKey === REACT_OPTIMISTIC_KEY) {
+      key = REACT_OPTIMISTIC_KEY;
+    } else {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
+      key = '' + config.key;
+    }
+  }
+
+  let props;
+  if (!('key' in config)) {
+    // If key was not spread in, we can reuse the original props object. This
+    // only works for `jsx`, not `createElement`, because `jsx` is a compiler
+    // target and the compiler always passes a new object. For `createElement`,
+    // we can't assume a new object is passed every time because it can be
+    // called manually.
+    //
+    // Spreading key is a warning in dev. In a future release, we will not
+    // remove a spread key from the props object. (But we'll still warn.) We'll
+    // always pass the object straight through.
+    props = config;
+  } else {
+    // We need to remove reserved props (key, prop, ref). Create a fresh props
+    // object and copy over all the non-reserved props. We don't use `delete`
+    // because in V8 it will deopt the object to dictionary mode.
+    props = {};
+    for (const propName in config) {
+      // Skip over reserved prop names
+      if (propName !== 'key') {
+        props[propName] = config[propName];
+      }
+    }
+  }
+
+  return ReactElement(type, key, props, getOwner(), undefined, undefined);
+}
+
+// While `jsxDEV` should never be called when running in production, we do
+// support `jsx` and `jsxs` when running in development. This supports the case
+// where a third-party dependency ships code that was compiled for production;
+// we want to still provide warnings in development.
+//
+// So these functions are the _dev_ implementations of the _production_
+// API signatures.
+//
+// Since these functions are dev-only, it's ok to add an indirection here. They
+// only exist to provide different versions of `isStaticChildren`. (We shouldn't
+// use this pattern for the prod versions, though, because it will add an call
+// frame.)
+export function jsxProdSignatureRunningInDevWithDynamicChildren(
+  type,
+  config,
+  maybeKey,
+) {
+  if (__DEV__) {
+    const isStaticChildren = false;
+    const trackActualOwner =
+      __DEV__ &&
+      ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit;
+    let debugStackDEV = false;
+    if (__DEV__) {
+      if (trackActualOwner) {
+        const previousStackTraceLimit = Error.stackTraceLimit;
+        Error.stackTraceLimit = ownerStackTraceLimit;
+        debugStackDEV = Error('react-stack-top-frame');
+        Error.stackTraceLimit = previousStackTraceLimit;
+      } else {
+        debugStackDEV = unknownOwnerDebugStack;
+      }
+    }
+
+    return jsxDEVImpl(
+      type,
+      config,
+      maybeKey,
+      isStaticChildren,
+      debugStackDEV,
+      __DEV__ &&
+        (trackActualOwner
+          ? createTask(getTaskName(type))
+          : unknownOwnerDebugTask),
+    );
+  }
+}
+
+export function jsxProdSignatureRunningInDevWithStaticChildren(
+  type,
+  config,
+  maybeKey,
+) {
+  if (__DEV__) {
+    const isStaticChildren = true;
+    const trackActualOwner =
+      __DEV__ &&
+      ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit;
+    let debugStackDEV = false;
+    if (__DEV__) {
+      if (trackActualOwner) {
+        const previousStackTraceLimit = Error.stackTraceLimit;
+        Error.stackTraceLimit = ownerStackTraceLimit;
+        debugStackDEV = Error('react-stack-top-frame');
+        Error.stackTraceLimit = previousStackTraceLimit;
+      } else {
+        debugStackDEV = unknownOwnerDebugStack;
+      }
+    }
+    return jsxDEVImpl(
+      type,
+      config,
+      maybeKey,
+      isStaticChildren,
+      debugStackDEV,
+      __DEV__ &&
+        (trackActualOwner
+          ? createTask(getTaskName(type))
+          : unknownOwnerDebugTask),
+    );
+  }
+}
+
+const didWarnAboutKeySpread = {};
+
+/**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+export function jsxDEV(type, config, maybeKey, isStaticChildren) {
+  const trackActualOwner =
+    __DEV__ &&
+    ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit;
+  let debugStackDEV = false;
+  if (__DEV__) {
+    if (trackActualOwner) {
+      const previousStackTraceLimit = Error.stackTraceLimit;
+      Error.stackTraceLimit = ownerStackTraceLimit;
+      debugStackDEV = Error('react-stack-top-frame');
+      Error.stackTraceLimit = previousStackTraceLimit;
+    } else {
+      debugStackDEV = unknownOwnerDebugStack;
+    }
+  }
+  return jsxDEVImpl(
+    type,
+    config,
+    maybeKey,
+    isStaticChildren,
+    debugStackDEV,
+    __DEV__ &&
+      (trackActualOwner
+        ? createTask(getTaskName(type))
+        : unknownOwnerDebugTask),
+  );
+}
+
+function jsxDEVImpl(
+  type,
+  config,
+  maybeKey,
+  isStaticChildren,
+  debugStack,
+  debugTask,
+) {
+  if (__DEV__) {
+    // We don't warn for invalid element type here because with owner stacks,
+    // we error in the renderer. The renderer is the only one that knows what
+    // types are valid for this particular renderer so we let it error there.
+
+    // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing
+    // errors. 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.)
+    // With owner stacks, we no longer need the type here so this comment is
+    // no longer true. Which is why we can run this even for invalid types.
+    const children = config.children;
+    if (children !== undefined) {
+      if (isStaticChildren) {
+        if (isArray(children)) {
+          for (let i = 0; i < children.length; i++) {
+            validateChildKeys(children[i]);
+          }
+
+          if (Object.freeze) {
+            Object.freeze(children);
+          }
+        } else {
+          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);
+      }
+    }
+
+    // Warn about key spread regardless of whether the type is valid.
+    if (hasOwnProperty.call(config, 'key')) {
+      const componentName = getComponentNameFromType(type);
+      const keys = Object.keys(config).filter(k => k !== 'key');
+      const beforeExample =
+        keys.length > 0
+          ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'
+          : '{key: someKey}';
+      if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+        const afterExample =
+          keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+        console.error(
+          'A props object containing a "key" prop is being spread into JSX:\n' +
+            '  let props = %s;\n' +
+            '  <%s {...props} />\n' +
+            'React keys must be passed directly to JSX without using spread:\n' +
+            '  let props = %s;\n' +
+            '  <%s key={someKey} {...props} />',
+          beforeExample,
+          componentName,
+          afterExample,
+          componentName,
+        );
+        didWarnAboutKeySpread[componentName + beforeExample] = true;
+      }
+    }
+
+    let key = null;
+
+    // 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) {
+      if (enableOptimisticKey && maybeKey === REACT_OPTIMISTIC_KEY) {
+        key = REACT_OPTIMISTIC_KEY;
+      } else {
+        if (__DEV__) {
+          checkKeyStringCoercion(maybeKey);
+        }
+        key = '' + maybeKey;
+      }
+    }
+
+    if (hasValidKey(config)) {
+      if (enableOptimisticKey && config.key === REACT_OPTIMISTIC_KEY) {
+        key = REACT_OPTIMISTIC_KEY;
+      } else {
+        if (__DEV__) {
+          checkKeyStringCoercion(config.key);
+        }
+        key = '' + config.key;
+      }
+    }
+
+    let props;
+    if (!('key' in config)) {
+      // If key was not spread in, we can reuse the original props object. This
+      // only works for `jsx`, not `createElement`, because `jsx` is a compiler
+      // target and the compiler always passes a new object. For `createElement`,
+      // we can't assume a new object is passed every time because it can be
+      // called manually.
+      //
+      // Spreading key is a warning in dev. In a future release, we will not
+      // remove a spread key from the props object. (But we'll still warn.) We'll
+      // always pass the object straight through.
+      props = config;
+    } else {
+      // We need to remove reserved props (key, prop, ref). Create a fresh props
+      // object and copy over all the non-reserved props. We don't use `delete`
+      // because in V8 it will deopt the object to dictionary mode.
+      props = {};
+      for (const propName in config) {
+        // Skip over reserved prop names
+        if (propName !== 'key') {
+          props[propName] = config[propName];
+        }
+      }
+    }
+
+    if (key) {
+      const displayName =
+        typeof type === 'function'
+          ? type.displayName || type.name || 'Unknown'
+          : type;
+      defineKeyPropWarningGetter(props, displayName);
+    }
+
+    return ReactElement(type, key, props, getOwner(), debugStack, debugTask);
+  }
+}
+
+/**
+ * Create and return a new ReactElement of the given type.
+ * See https://reactjs.org/docs/react-api.html#createelement
+ */
+export function createElement(type, config, children) {
+  if (__DEV__) {
+    // We don't warn for invalid element type here because with owner stacks,
+    // we error in the renderer. The renderer is the only one that knows what
+    // types are valid for this particular renderer so we let it error there.
+
+    // Skip key warning if the type isn't valid since our key validation logic
+    // doesn't expect a non-string/function type and can throw confusing
+    // errors. 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.)
+    for (let i = 2; i < arguments.length; i++) {
+      validateChildKeys(arguments[i]);
+    }
+
+    // Unlike the jsx() runtime, createElement() doesn't warn about key spread.
+  }
+
+  let propName;
+
+  // Reserved names are extracted
+  const props = {};
+
+  let key = null;
+
+  if (config != null) {
+    if (__DEV__) {
+      if (
+        !didWarnAboutOldJSXRuntime &&
+        '__self' in config &&
+        // Do not assume this is the result of an oudated JSX transform if key
+        // is present, because the modern JSX transform sometimes outputs
+        // createElement to preserve precedence between a static key and a
+        // spread key. To avoid false positive warnings, we never warn if
+        // there's a key.
+        !('key' in config)
+      ) {
+        didWarnAboutOldJSXRuntime = true;
+        console.warn(
+          'Your app (or one of its dependencies) is using an outdated JSX ' +
+            'transform. Update to the modern JSX transform for ' +
+            'faster performance: https://react.dev/link/new-jsx-transform',
+        );
+      }
+    }
+
+    if (hasValidKey(config)) {
+      if (enableOptimisticKey && config.key === REACT_OPTIMISTIC_KEY) {
+        key = REACT_OPTIMISTIC_KEY;
+      } else {
+        if (__DEV__) {
+          checkKeyStringCoercion(config.key);
+        }
+        key = '' + config.key;
+      }
+    }
+
+    // Remaining properties are added to a new props object
+    for (propName in config) {
+      if (
+        hasOwnProperty.call(config, propName) &&
+        // Skip over reserved prop names
+        propName !== 'key' &&
+        // Even though we don't use these anymore in the runtime, we don't want
+        // them to appear as props, so in createElement we filter them out.
+        // We don't have to do this in the jsx() runtime because the jsx()
+        // transform never passed these as props; it used separate arguments.
+        propName !== '__self' &&
+        propName !== '__source'
+      ) {
+        props[propName] = config[propName];
+      }
+    }
+  }
+
+  // Children can be more than one argument, and those are transferred onto
+  // the newly allocated props object.
+  const childrenLength = arguments.length - 2;
+  if (childrenLength === 1) {
+    props.children = children;
+  } else if (childrenLength > 1) {
+    const childArray = Array(childrenLength);
+    for (let i = 0; i < childrenLength; i++) {
+      childArray[i] = arguments[i + 2];
+    }
+    if (__DEV__) {
+      if (Object.freeze) {
+        Object.freeze(childArray);
+      }
+    }
+    props.children = childArray;
+  }
+
+  // Resolve default props
+  if (type && type.defaultProps) {
+    const defaultProps = type.defaultProps;
+    for (propName in defaultProps) {
+      if (props[propName] === undefined) {
+        props[propName] = defaultProps[propName];
+      }
+    }
+  }
+  if (__DEV__) {
+    if (key) {
+      const displayName =
+        typeof type === 'function'
+          ? type.displayName || type.name || 'Unknown'
+          : type;
+      defineKeyPropWarningGetter(props, displayName);
+    }
+  }
+  const trackActualOwner =
+    __DEV__ &&
+    ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit;
+  let debugStackDEV = false;
+  if (__DEV__) {
+    if (trackActualOwner) {
+      const previousStackTraceLimit = Error.stackTraceLimit;
+      Error.stackTraceLimit = ownerStackTraceLimit;
+      debugStackDEV = Error('react-stack-top-frame');
+      Error.stackTraceLimit = previousStackTraceLimit;
+    } else {
+      debugStackDEV = unknownOwnerDebugStack;
+    }
+  }
+  return ReactElement(
+    type,
+    key,
+    props,
+    getOwner(),
+    debugStackDEV,
+    __DEV__ &&
+      (trackActualOwner
+        ? createTask(getTaskName(type))
+        : unknownOwnerDebugTask),
+  );
+}
+
+export function cloneAndReplaceKey(oldElement, newKey) {
+  const clonedElement = ReactElement(
+    oldElement.type,
+    newKey,
+    oldElement.props,
+    !__DEV__ ? undefined : oldElement._owner,
+    __DEV__ && oldElement._debugStack,
+    __DEV__ && oldElement._debugTask,
+  );
+  if (__DEV__) {
+    // The cloned element should inherit the original element's key validation.
+    if (oldElement._store) {
+      clonedElement._store.validated = oldElement._store.validated;
+    }
+  }
+  return clonedElement;
+}
+
+/**
+ * Clone and return a new ReactElement using element as the starting point.
+ * See https://reactjs.org/docs/react-api.html#cloneelement
+ */
+export function cloneElement(element, config, children) {
+  if (element === null || element === undefined) {
+    throw new Error(
+      `The argument must be a React element, but you passed ${element}.`,
+    );
+  }
+
+  let propName;
+
+  // Original props are copied
+  const props = assign({}, element.props);
+
+  // Reserved names are extracted
+  let key = element.key;
+
+  // Owner will be preserved, unless ref is overridden
+  let owner = !__DEV__ ? undefined : element._owner;
+
+  if (config != null) {
+    if (hasValidRef(config)) {
+      owner = __DEV__ ? getOwner() : undefined;
+    }
+    if (hasValidKey(config)) {
+      if (enableOptimisticKey && config.key === REACT_OPTIMISTIC_KEY) {
+        key = REACT_OPTIMISTIC_KEY;
+      } else {
+        if (__DEV__) {
+          checkKeyStringCoercion(config.key);
+        }
+        key = '' + config.key;
+      }
+    }
+
+    // Remaining properties override existing props
+    for (propName in config) {
+      if (
+        hasOwnProperty.call(config, propName) &&
+        // Skip over reserved prop names
+        propName !== 'key' &&
+        // ...and maybe these, too, though we currently rely on them for
+        // warnings and debug information in dev. Need to decide if we're OK
+        // with dropping them. In the jsx() runtime it's not an issue because
+        // the data gets passed as separate arguments instead of props, but
+        // it would be nice to stop relying on them entirely so we can drop
+        // them from the internal Fiber field.
+        propName !== '__self' &&
+        propName !== '__source' &&
+        // Undefined `ref` is ignored by cloneElement. We treat it the same as
+        // if the property were missing. This is mostly for
+        // backwards compatibility.
+        !(propName === 'ref' && config.ref === undefined)
+      ) {
+        props[propName] = config[propName];
+      }
+    }
+  }
+
+  // Children can be more than one argument, and those are transferred onto
+  // the newly allocated props object.
+  const childrenLength = arguments.length - 2;
+  if (childrenLength === 1) {
+    props.children = children;
+  } else if (childrenLength > 1) {
+    const childArray = Array(childrenLength);
+    for (let i = 0; i < childrenLength; i++) {
+      childArray[i] = arguments[i + 2];
+    }
+    props.children = childArray;
+  }
+
+  const clonedElement = ReactElement(
+    element.type,
+    key,
+    props,
+    owner,
+    __DEV__ && element._debugStack,
+    __DEV__ && element._debugTask,
+  );
+
+  for (let i = 2; i < arguments.length; i++) {
+    validateChildKeys(arguments[i]);
+  }
+
+  return clonedElement;
+}
+
+/**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+function validateChildKeys(node) {
+  if (__DEV__) {
+    // Mark elements as being in a valid static child position so they
+    // don't need keys.
+    if (isValidElement(node)) {
+      if (node._store) {
+        node._store.validated = 1;
+      }
+    } else if (isLazyType(node)) {
+      if (node._payload.status === 'fulfilled') {
+        if (isValidElement(node._payload.value) && node._payload.value._store) {
+          node._payload.value._store.validated = 1;
+        }
+      } else if (node._store) {
+        node._store.validated = 1;
+      }
+    }
+  }
+}
+
+/**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+export function isValidElement(object) {
+  return (
+    typeof object === 'object' &&
+    object !== null &&
+    object.$$typeof === REACT_ELEMENT_TYPE
+  );
+}
+
+export function isLazyType(object) {
+  return (
+    typeof object === 'object' &&
+    object !== null &&
+    object.$$typeof === REACT_LAZY_TYPE
+  );
+}
diff --git a/packages/react/src/jsx/ReactJSXServer.js b/packages/react/src/jsx/ReactJSXServer.js
new file mode 100644
index 00000000000..86255deb4ae
--- /dev/null
+++ b/packages/react/src/jsx/ReactJSXServer.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_TYPE} from 'shared/ReactSymbols';
+import {
+  jsxProd,
+  jsxProdSignatureRunningInDevWithDynamicChildren,
+  jsxProdSignatureRunningInDevWithStaticChildren,
+  jsxDEV as _jsxDEV,
+} from './ReactJSXElement';
+
+const jsx: any = __DEV__
+  ? jsxProdSignatureRunningInDevWithDynamicChildren
+  : jsxProd;
+// we may want to special case jsxs internally to take advantage of static children.
+// for now we can ship identical prod functions
+const jsxs: any = __DEV__
+  ? jsxProdSignatureRunningInDevWithStaticChildren
+  : jsxProd;
+
+const jsxDEV: any = __DEV__ ? _jsxDEV : undefined;
+
+export {REACT_FRAGMENT_TYPE as Fragment, jsx, jsxs, jsxDEV};
diff --git a/packages/scheduler/README.md b/packages/scheduler/README.md
new file mode 100644
index 00000000000..10e4937a05b
--- /dev/null
+++ b/packages/scheduler/README.md
@@ -0,0 +1,9 @@
+# `scheduler`
+
+This is a package for cooperative scheduling in a browser environment. It is currently used internally by React, but we plan to make it more generic.
+
+The public API for this package is not yet finalized.
+
+### Thanks
+
+The React team thanks [Anton Podviaznikov](https://podviaznikov.com/) for donating the `scheduler` package name.
diff --git a/packages/scheduler/index.js b/packages/scheduler/index.js
new file mode 100644
index 00000000000..a01f4350a1b
--- /dev/null
+++ b/packages/scheduler/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/forks/Scheduler';
diff --git a/packages/scheduler/index.native.js b/packages/scheduler/index.native.js
new file mode 100644
index 00000000000..2113288011d
--- /dev/null
+++ b/packages/scheduler/index.native.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/forks/SchedulerNative';
diff --git a/packages/scheduler/npm/index.js b/packages/scheduler/npm/index.js
new file mode 100644
index 00000000000..d6b7b0a8797
--- /dev/null
+++ b/packages/scheduler/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/scheduler.production.js');
+} else {
+  module.exports = require('./cjs/scheduler.development.js');
+}
diff --git a/packages/scheduler/npm/index.native.js b/packages/scheduler/npm/index.native.js
new file mode 100644
index 00000000000..4186b711d25
--- /dev/null
+++ b/packages/scheduler/npm/index.native.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/scheduler.native.production.js');
+} else {
+  module.exports = require('./cjs/scheduler.native.development.js');
+}
diff --git a/packages/scheduler/npm/umd/scheduler.development.js b/packages/scheduler/npm/umd/scheduler.development.js
new file mode 100644
index 00000000000..c2d9bcc39e1
--- /dev/null
+++ b/packages/scheduler/npm/umd/scheduler.development.js
@@ -0,0 +1,156 @@
+/**
+ * @license React
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+(function (global, factory) {
+  // eslint-disable-next-line ft-flow/no-unused-expressions
+  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));
+})(this, function (global) {
+  function unstable_now() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_now.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_scheduleCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_scheduleCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_cancelCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_cancelCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_shouldYield() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_shouldYield.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_requestPaint() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_requestPaint.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_runWithPriority() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_runWithPriority.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_next() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_next.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_wrapCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_wrapCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_getCurrentPriorityLevel() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_getCurrentPriorityLevel.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_getFirstCallbackNode() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_getFirstCallbackNode.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_pauseExecution() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_pauseExecution.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_continueExecution() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_continueExecution.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_forceFrameRate() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_forceFrameRate.apply(
+      this,
+      arguments
+    );
+  }
+
+  return Object.freeze({
+    unstable_now: unstable_now,
+    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,
+    unstable_getCurrentPriorityLevel: unstable_getCurrentPriorityLevel,
+    unstable_continueExecution: unstable_continueExecution,
+    unstable_pauseExecution: unstable_pauseExecution,
+    unstable_getFirstCallbackNode: unstable_getFirstCallbackNode,
+    unstable_forceFrameRate: unstable_forceFrameRate,
+    get unstable_IdlePriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_IdlePriority;
+    },
+    get unstable_ImmediatePriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_ImmediatePriority;
+    },
+    get unstable_LowPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_LowPriority;
+    },
+    get unstable_NormalPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_NormalPriority;
+    },
+    get unstable_UserBlockingPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_UserBlockingPriority;
+    },
+    get unstable_Profiling() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_Profiling;
+    },
+  });
+});
diff --git a/packages/scheduler/npm/umd/scheduler.production.min.js b/packages/scheduler/npm/umd/scheduler.production.min.js
new file mode 100644
index 00000000000..4aa4caaea91
--- /dev/null
+++ b/packages/scheduler/npm/umd/scheduler.production.min.js
@@ -0,0 +1,150 @@
+/**
+ * @license React
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+(function (global, factory) {
+  // eslint-disable-next-line ft-flow/no-unused-expressions
+  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));
+})(this, function (global) {
+  function unstable_now() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_now.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_scheduleCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_scheduleCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_cancelCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_cancelCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_shouldYield() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_shouldYield.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_requestPaint() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_requestPaint.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_runWithPriority() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_runWithPriority.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_next() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_next.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_wrapCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_wrapCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_getCurrentPriorityLevel() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_getCurrentPriorityLevel.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_getFirstCallbackNode() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_getFirstCallbackNode.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_pauseExecution() {
+    return undefined;
+  }
+
+  function unstable_continueExecution() {
+    return undefined;
+  }
+
+  function unstable_forceFrameRate() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_forceFrameRate.apply(
+      this,
+      arguments
+    );
+  }
+
+  return Object.freeze({
+    unstable_now: unstable_now,
+    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,
+    unstable_getCurrentPriorityLevel: unstable_getCurrentPriorityLevel,
+    unstable_continueExecution: unstable_continueExecution,
+    unstable_pauseExecution: unstable_pauseExecution,
+    unstable_getFirstCallbackNode: unstable_getFirstCallbackNode,
+    unstable_forceFrameRate: unstable_forceFrameRate,
+    get unstable_IdlePriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_IdlePriority;
+    },
+    get unstable_ImmediatePriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_ImmediatePriority;
+    },
+    get unstable_LowPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_LowPriority;
+    },
+    get unstable_NormalPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_NormalPriority;
+    },
+    get unstable_UserBlockingPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_UserBlockingPriority;
+    },
+    get unstable_Profiling() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_Profiling;
+    },
+  });
+});
diff --git a/packages/scheduler/npm/umd/scheduler.profiling.min.js b/packages/scheduler/npm/umd/scheduler.profiling.min.js
new file mode 100644
index 00000000000..4aa4caaea91
--- /dev/null
+++ b/packages/scheduler/npm/umd/scheduler.profiling.min.js
@@ -0,0 +1,150 @@
+/**
+ * @license React
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+(function (global, factory) {
+  // eslint-disable-next-line ft-flow/no-unused-expressions
+  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));
+})(this, function (global) {
+  function unstable_now() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_now.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_scheduleCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_scheduleCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_cancelCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_cancelCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_shouldYield() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_shouldYield.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_requestPaint() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_requestPaint.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_runWithPriority() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_runWithPriority.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_next() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_next.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_wrapCallback() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_wrapCallback.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_getCurrentPriorityLevel() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_getCurrentPriorityLevel.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_getFirstCallbackNode() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_getFirstCallbackNode.apply(
+      this,
+      arguments
+    );
+  }
+
+  function unstable_pauseExecution() {
+    return undefined;
+  }
+
+  function unstable_continueExecution() {
+    return undefined;
+  }
+
+  function unstable_forceFrameRate() {
+    return global.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler.unstable_forceFrameRate.apply(
+      this,
+      arguments
+    );
+  }
+
+  return Object.freeze({
+    unstable_now: unstable_now,
+    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,
+    unstable_getCurrentPriorityLevel: unstable_getCurrentPriorityLevel,
+    unstable_continueExecution: unstable_continueExecution,
+    unstable_pauseExecution: unstable_pauseExecution,
+    unstable_getFirstCallbackNode: unstable_getFirstCallbackNode,
+    unstable_forceFrameRate: unstable_forceFrameRate,
+    get unstable_IdlePriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_IdlePriority;
+    },
+    get unstable_ImmediatePriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_ImmediatePriority;
+    },
+    get unstable_LowPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_LowPriority;
+    },
+    get unstable_NormalPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_NormalPriority;
+    },
+    get unstable_UserBlockingPriority() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_UserBlockingPriority;
+    },
+    get unstable_Profiling() {
+      return global.React
+        .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+        .Scheduler.unstable_Profiling;
+    },
+  });
+});
diff --git a/packages/scheduler/npm/unstable_mock.js b/packages/scheduler/npm/unstable_mock.js
new file mode 100644
index 00000000000..acc901ca45f
--- /dev/null
+++ b/packages/scheduler/npm/unstable_mock.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/scheduler-unstable_mock.production.js');
+} else {
+  module.exports = require('./cjs/scheduler-unstable_mock.development.js');
+}
diff --git a/packages/scheduler/npm/unstable_post_task.js b/packages/scheduler/npm/unstable_post_task.js
new file mode 100644
index 00000000000..e9681528a22
--- /dev/null
+++ b/packages/scheduler/npm/unstable_post_task.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/scheduler-unstable_post_task.production.js');
+} else {
+  module.exports = require('./cjs/scheduler-unstable_post_task.development.js');
+}
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
new file mode 100644
index 00000000000..9c94ef2b357
--- /dev/null
+++ b/packages/scheduler/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "scheduler",
+  "version": "0.28.0",
+  "description": "Cooperative scheduler for the browser environment.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/scheduler"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react"
+  ],
+  "bugs": {
+    "url": "https://github.com/facebook/react/issues"
+  },
+  "homepage": "https://react.dev/",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "index.native.js",
+    "unstable_mock.js",
+    "unstable_post_task.js",
+    "cjs/"
+  ]
+}
diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
new file mode 100644
index 00000000000..6828d0105eb
--- /dev/null
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+export const enableProfiling = false;
+export const frameYieldMs = 5;
+
+export const userBlockingPriorityTimeout = 250;
+export const normalPriorityTimeout = 5000;
+export const lowPriorityTimeout = 10000;
+export const enableRequestPaint = true;
+
+export const enableAlwaysYieldScheduler = __EXPERIMENTAL__;
diff --git a/packages/scheduler/src/SchedulerMinHeap.js b/packages/scheduler/src/SchedulerMinHeap.js
new file mode 100644
index 00000000000..da997bad357
--- /dev/null
+++ b/packages/scheduler/src/SchedulerMinHeap.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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<T: Node> = Array<T>;
+type Node = {
+  id: number,
+  sortIndex: number,
+  ...
+};
+
+export function push<T: Node>(heap: Heap<T>, node: T): void {
+  const index = heap.length;
+  heap.push(node);
+  siftUp(heap, node, index);
+}
+
+export function peek<T: Node>(heap: Heap<T>): T | null {
+  return heap.length === 0 ? null : heap[0];
+}
+
+export function pop<T: Node>(heap: Heap<T>): T | null {
+  if (heap.length === 0) {
+    return null;
+  }
+  const first = heap[0];
+  const last = heap.pop();
+  if (last !== first) {
+    // $FlowFixMe[incompatible-type]
+    heap[0] = last;
+    // $FlowFixMe[incompatible-call]
+    siftDown(heap, last, 0);
+  }
+  return first;
+}
+
+function siftUp<T: Node>(heap: Heap<T>, node: T, i: number): void {
+  let index = i;
+  while (index > 0) {
+    const parentIndex = (index - 1) >>> 1;
+    const parent = heap[parentIndex];
+    if (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<T: Node>(heap: Heap<T>, node: T, i: number): void {
+  let index = i;
+  const length = heap.length;
+  const halfLength = length >>> 1;
+  while (index < halfLength) {
+    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 (compare(left, node) < 0) {
+      if (rightIndex < length && compare(right, left) < 0) {
+        heap[index] = right;
+        heap[rightIndex] = node;
+        index = rightIndex;
+      } else {
+        heap[index] = left;
+        heap[leftIndex] = node;
+        index = leftIndex;
+      }
+    } else if (rightIndex < length && compare(right, node) < 0) {
+      heap[index] = right;
+      heap[rightIndex] = node;
+      index = rightIndex;
+    } else {
+      // Neither child is smaller. Exit.
+      return;
+    }
+  }
+}
+
+function compare(a: Node, b: Node) {
+  // 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 00000000000..90ef2a7f390
--- /dev/null
+++ b/packages/scheduler/src/SchedulerPriorities.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+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 00000000000..9fdd5906af6
--- /dev/null
+++ b/packages/scheduler/src/SchedulerProfiling.js
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+let runIdCounter: number = 0;
+let mainThreadIdCounter: number = 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: Array<number | PriorityLevel>) {
+  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);
+      // $FlowFixMe[incompatible-call] found when upgrading Flow
+      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) {
+    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) {
+    if (eventLog !== null) {
+      logEvent([TaskCompleteEvent, ms * 1000, task.id]);
+    }
+  }
+}
+
+export function markTaskCanceled(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    if (eventLog !== null) {
+      logEvent([TaskCancelEvent, ms * 1000, task.id]);
+    }
+  }
+}
+
+export function markTaskErrored(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    if (eventLog !== null) {
+      logEvent([TaskErrorEvent, ms * 1000, task.id]);
+    }
+  }
+}
+
+export function markTaskRun(
+  task: {
+    id: number,
+    priorityLevel: PriorityLevel,
+    ...
+  },
+  ms: number,
+) {
+  if (enableProfiling) {
+    runIdCounter++;
+
+    if (eventLog !== null) {
+      logEvent([TaskRunEvent, ms * 1000, task.id, runIdCounter]);
+    }
+  }
+}
+
+export function markTaskYield(task: {id: number, ...}, ms: number) {
+  if (enableProfiling) {
+    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/__tests__/Scheduler-test.js b/packages/scheduler/src/__tests__/Scheduler-test.js
new file mode 100644
index 00000000000..afc99817629
--- /dev/null
+++ b/packages/scheduler/src/__tests__/Scheduler-test.js
@@ -0,0 +1,351 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let runtime;
+let performance;
+let cancelCallback;
+let scheduleCallback;
+let requestPaint;
+let shouldYield;
+let NormalPriority;
+let SchedulerFeatureFlags;
+
+// 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();
+    runtime = installMockBrowserRuntime();
+    jest.unmock('scheduler');
+
+    performance = global.performance;
+    Scheduler = require('scheduler');
+    cancelCallback = Scheduler.unstable_cancelCallback;
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+    requestPaint = Scheduler.unstable_requestPaint;
+    shouldYield = Scheduler.unstable_shouldYield;
+    SchedulerFeatureFlags = require('../SchedulerFeatureFlags');
+  });
+
+  afterEach(() => {
+    delete global.performance;
+
+    if (!runtime.isLogEmpty()) {
+      throw Error('Test exited without clearing log.');
+    }
+  });
+
+  function installMockBrowserRuntime() {
+    let hasPendingMessageEvent = false;
+    let isFiringMessageEvent = false;
+    let hasPendingDiscreteEvent = false;
+    let hasPendingContinuousEvent = false;
+
+    let timerIDCounter = 0;
+    // let timerIDs = new Map();
+
+    let eventLog = [];
+
+    let currentTime = 0;
+
+    global.performance = {
+      now() {
+        return currentTime;
+      },
+    };
+
+    // Delete node provide setImmediate so we fall through to MessageChannel.
+    delete global.setImmediate;
+
+    global.setTimeout = (cb, delay) => {
+      const id = timerIDCounter++;
+      log(`Set Timer`);
+      // TODO
+      return id;
+    };
+    global.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 resetTime() {
+      currentTime = 0;
+    }
+    function fireMessageEvent() {
+      ensureLogIsEmpty();
+      if (!hasPendingMessageEvent) {
+        throw Error('No message event was scheduled');
+      }
+      hasPendingMessageEvent = false;
+      const onMessage = port1.onmessage;
+      log('Message Event');
+
+      isFiringMessageEvent = true;
+      try {
+        onMessage();
+      } finally {
+        isFiringMessageEvent = false;
+        if (hasPendingDiscreteEvent) {
+          log('Discrete Event');
+          hasPendingDiscreteEvent = false;
+        }
+        if (hasPendingContinuousEvent) {
+          log('Continuous Event');
+          hasPendingContinuousEvent = false;
+        }
+      }
+    }
+    function scheduleDiscreteEvent() {
+      if (isFiringMessageEvent) {
+        hasPendingDiscreteEvent = true;
+      } else {
+        log('Discrete Event');
+      }
+    }
+    function scheduleContinuousEvent() {
+      if (isFiringMessageEvent) {
+        hasPendingContinuousEvent = true;
+      } else {
+        log('Continuous Event');
+      }
+    }
+    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,
+      resetTime,
+      fireMessageEvent,
+      log,
+      isLogEmpty,
+      assertLog,
+      scheduleDiscreteEvent,
+      scheduleContinuousEvent,
+    };
+  }
+
+  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');
+      // Request paint so that we yield immediately
+      requestPaint();
+      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',
+      gate(flags => flags.enableAlwaysYieldScheduler) ||
+      !SchedulerFeatureFlags.enableRequestPaint
+        ? gate(flags => (flags.www ? 'Yield at 10ms' : 'Yield at 5ms'))
+        : 'Yield at 0ms',
+      '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();
+    if (gate(flags => flags.enableAlwaysYieldScheduler)) {
+      runtime.assertLog(['Message Event', 'A', 'Post Message']);
+      runtime.fireMessageEvent();
+      runtime.assertLog(['Message Event', 'B']);
+    } else {
+      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.fireMessageEvent();
+    runtime.assertLog(['Message Event']);
+  });
+
+  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();
+    if (gate(flags => flags.enableAlwaysYieldScheduler)) {
+      runtime.assertLog(['Message Event', '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', () => {
+    const 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']);
+  });
+
+  it('yielding continues in a new task regardless of how much time is remaining', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Original Task');
+      runtime.log('shouldYield: ' + shouldYield());
+      runtime.log('Return a continuation');
+      return () => {
+        runtime.log('Continuation Task');
+      };
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Original Task',
+      // Immediately before returning a continuation, `shouldYield` returns
+      // false, which means there must be time remaining in the frame.
+      'shouldYield: false',
+      'Return a continuation',
+
+      // The continuation should be scheduled in a separate macrotask even
+      // though there's time remaining.
+      'Post Message',
+    ]);
+
+    // No time has elapsed
+    expect(performance.now()).toBe(0);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog(['Message Event', 'Continuation Task']);
+  });
+});
diff --git a/packages/scheduler/src/__tests__/SchedulerMock-test.js b/packages/scheduler/src/__tests__/SchedulerMock-test.js
new file mode 100644
index 00000000000..a9bd0bdc5c1
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerMock-test.js
@@ -0,0 +1,718 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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;
+let runWithPriority;
+let ImmediatePriority;
+let UserBlockingPriority;
+let NormalPriority;
+let LowPriority;
+let IdlePriority;
+let scheduleCallback;
+let cancelCallback;
+let wrapCallback;
+let getCurrentPriorityLevel;
+let shouldYield;
+let waitForAll;
+let assertLog;
+let waitFor;
+let waitForPaint;
+
+describe('Scheduler', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () => require('scheduler/unstable_mock'));
+
+    Scheduler = require('scheduler');
+
+    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 InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+    waitForPaint = InternalTestUtils.waitForPaint;
+  });
+
+  it('flushes work incrementally', async () => {
+    scheduleCallback(NormalPriority, () => Scheduler.log('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('B'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('C'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('D'));
+
+    await waitFor(['A', 'B']);
+    await waitFor(['C']);
+    await waitForAll(['D']);
+  });
+
+  it('cancels work', async () => {
+    scheduleCallback(NormalPriority, () => Scheduler.log('A'));
+    const callbackHandleB = scheduleCallback(NormalPriority, () =>
+      Scheduler.log('B'),
+    );
+    scheduleCallback(NormalPriority, () => Scheduler.log('C'));
+
+    cancelCallback(callbackHandleB);
+
+    await waitForAll([
+      'A',
+      // B should have been cancelled
+      'C',
+    ]);
+  });
+
+  it('executes the highest priority callbacks first', async () => {
+    scheduleCallback(NormalPriority, () => Scheduler.log('A'));
+    scheduleCallback(NormalPriority, () => Scheduler.log('B'));
+
+    // Yield before B is flushed
+    await waitFor(['A']);
+
+    scheduleCallback(UserBlockingPriority, () => Scheduler.log('C'));
+    scheduleCallback(UserBlockingPriority, () => Scheduler.log('D'));
+
+    // C and D should come first, because they are higher priority
+    await waitForAll(['C', 'D', 'B']);
+  });
+
+  it('expires work', async () => {
+    scheduleCallback(NormalPriority, didTimeout => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log(`A (did timeout: ${didTimeout})`);
+    });
+    scheduleCallback(UserBlockingPriority, didTimeout => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log(`B (did timeout: ${didTimeout})`);
+    });
+    scheduleCallback(UserBlockingPriority, didTimeout => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log(`C (did timeout: ${didTimeout})`);
+    });
+
+    // Advance time, but not by enough to expire any work
+    Scheduler.unstable_advanceTime(249);
+    assertLog([]);
+
+    // Schedule a few more callbacks
+    scheduleCallback(NormalPriority, didTimeout => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log(`D (did timeout: ${didTimeout})`);
+    });
+    scheduleCallback(NormalPriority, didTimeout => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log(`E (did timeout: ${didTimeout})`);
+    });
+
+    // Advance by just a bit more to expire the user blocking callbacks
+    Scheduler.unstable_advanceTime(1);
+    await waitFor(['B (did timeout: true)', 'C (did timeout: true)']);
+
+    // Expire A
+    Scheduler.unstable_advanceTime(4600);
+    await waitFor(['A (did timeout: true)']);
+
+    // Flush the rest without expiring
+    await waitForAll(['D (did timeout: false)', 'E (did timeout: true)']);
+  });
+
+  it('has a default expiration of ~5 seconds', () => {
+    scheduleCallback(NormalPriority, () => Scheduler.log('A'));
+
+    Scheduler.unstable_advanceTime(4999);
+    assertLog([]);
+
+    Scheduler.unstable_advanceTime(1);
+    Scheduler.unstable_flushExpired();
+    assertLog(['A']);
+  });
+
+  it('continues working on same task after yielding', async () => {
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log('B');
+    });
+
+    let didYield = false;
+    const tasks = [
+      ['C1', 100],
+      ['C2', 100],
+      ['C3', 100],
+    ];
+    const C = () => {
+      while (tasks.length > 0) {
+        const [label, ms] = tasks.shift();
+        Scheduler.unstable_advanceTime(ms);
+        Scheduler.log(label);
+        if (shouldYield()) {
+          didYield = true;
+          return C;
+        }
+      }
+    };
+
+    scheduleCallback(NormalPriority, C);
+
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log('D');
+    });
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log('E');
+    });
+
+    // Flush, then yield while in the middle of C.
+    expect(didYield).toBe(false);
+    await waitFor(['A', 'B', 'C1']);
+    expect(didYield).toBe(true);
+
+    // When we resume, we should continue working on C.
+    await waitForAll(['C2', 'C3', 'D', 'E']);
+  });
+
+  it('continuation callbacks inherit the expiration of the previous callback', async () => {
+    const tasks = [
+      ['A', 125],
+      ['B', 124],
+      ['C', 100],
+      ['D', 100],
+    ];
+    const work = () => {
+      while (tasks.length > 0) {
+        const [label, ms] = tasks.shift();
+        Scheduler.unstable_advanceTime(ms);
+        Scheduler.log(label);
+        if (shouldYield()) {
+          return work;
+        }
+      }
+    };
+
+    // Schedule a high priority callback
+    scheduleCallback(UserBlockingPriority, work);
+
+    // Flush until just before the expiration time
+    await waitFor(['A', 'B']);
+
+    // Advance time by just a bit more. This should expire all the remaining work.
+    Scheduler.unstable_advanceTime(1);
+    Scheduler.unstable_flushExpired();
+    assertLog(['C', 'D']);
+  });
+
+  it('continuations are interrupted by higher priority work', async () => {
+    const tasks = [
+      ['A', 100],
+      ['B', 100],
+      ['C', 100],
+      ['D', 100],
+    ];
+    const work = () => {
+      while (tasks.length > 0) {
+        const [label, ms] = tasks.shift();
+        Scheduler.unstable_advanceTime(ms);
+        Scheduler.log(label);
+        if (tasks.length > 0 && shouldYield()) {
+          return work;
+        }
+      }
+    };
+    scheduleCallback(NormalPriority, work);
+    await waitFor(['A']);
+
+    scheduleCallback(UserBlockingPriority, () => {
+      Scheduler.unstable_advanceTime(100);
+      Scheduler.log('High pri');
+    });
+
+    await waitForAll(['High pri', 'B', 'C', 'D']);
+  });
+
+  it(
+    'continuations do not block higher priority work scheduled ' +
+      'inside an executing callback',
+    async () => {
+      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.log(label);
+          if (label === 'B') {
+            // Schedule high pri work from inside another callback
+            Scheduler.log('Schedule high pri');
+            scheduleCallback(UserBlockingPriority, () => {
+              Scheduler.unstable_advanceTime(100);
+              Scheduler.log('High pri');
+            });
+          }
+          if (tasks.length > 0) {
+            // Return a continuation
+            return work;
+          }
+        }
+      };
+      scheduleCallback(NormalPriority, work);
+      await waitForAll([
+        'A',
+        'B',
+        'Schedule high pri',
+        // The high pri callback should fire before the continuation of the
+        // lower pri work
+        'High pri',
+        // Continue low pri work
+        'C',
+        'D',
+      ]);
+    },
+  );
+
+  it('cancelling a continuation', async () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      Scheduler.log('Yield');
+      return () => {
+        Scheduler.log('Continuation');
+      };
+    });
+
+    await waitFor(['Yield']);
+    cancelCallback(task);
+    await waitForAll([]);
+  });
+
+  it('top-level immediate callbacks fire in a subsequent task', () => {
+    scheduleCallback(ImmediatePriority, () => Scheduler.log('A'));
+    scheduleCallback(ImmediatePriority, () => Scheduler.log('B'));
+    scheduleCallback(ImmediatePriority, () => Scheduler.log('C'));
+    scheduleCallback(ImmediatePriority, () => Scheduler.log('D'));
+    // Immediate callback hasn't fired, yet.
+    assertLog([]);
+    // They all flush immediately within the subsequent task.
+    Scheduler.unstable_flushExpired();
+    assertLog(['A', 'B', 'C', 'D']);
+  });
+
+  it('nested immediate callbacks are added to the queue of immediate callbacks', () => {
+    scheduleCallback(ImmediatePriority, () => Scheduler.log('A'));
+    scheduleCallback(ImmediatePriority, () => {
+      Scheduler.log('B');
+      // This callback should go to the end of the queue
+      scheduleCallback(ImmediatePriority, () => Scheduler.log('C'));
+    });
+    scheduleCallback(ImmediatePriority, () => Scheduler.log('D'));
+    assertLog([]);
+    // C should flush at the end
+    Scheduler.unstable_flushExpired();
+    assertLog(['A', 'B', 'D', 'C']);
+  });
+
+  it('wrapped callbacks have same signature as original callback', () => {
+    const wrappedCallback = wrapCallback((...args) => ({args}));
+    expect(wrappedCallback('a', 'b')).toEqual({args: ['a', 'b']});
+  });
+
+  it('wrapped callbacks inherit the current priority', () => {
+    const wrappedCallback = runWithPriority(NormalPriority, () =>
+      wrapCallback(() => {
+        Scheduler.log(getCurrentPriorityLevel());
+      }),
+    );
+
+    const wrappedUserBlockingCallback = runWithPriority(
+      UserBlockingPriority,
+      () =>
+        wrapCallback(() => {
+          Scheduler.log(getCurrentPriorityLevel());
+        }),
+    );
+
+    wrappedCallback();
+    assertLog([NormalPriority]);
+
+    wrappedUserBlockingCallback();
+    assertLog([UserBlockingPriority]);
+  });
+
+  it('wrapped callbacks inherit the current priority even when nested', () => {
+    let wrappedCallback;
+    let wrappedUserBlockingCallback;
+
+    runWithPriority(NormalPriority, () => {
+      wrappedCallback = wrapCallback(() => {
+        Scheduler.log(getCurrentPriorityLevel());
+      });
+      wrappedUserBlockingCallback = runWithPriority(UserBlockingPriority, () =>
+        wrapCallback(() => {
+          Scheduler.log(getCurrentPriorityLevel());
+        }),
+      );
+    });
+
+    wrappedCallback();
+    assertLog([NormalPriority]);
+
+    wrappedUserBlockingCallback();
+    assertLog([UserBlockingPriority]);
+  });
+
+  it("immediate callbacks fire even if there's an error", () => {
+    scheduleCallback(ImmediatePriority, () => {
+      Scheduler.log('A');
+      throw new Error('Oops A');
+    });
+    scheduleCallback(ImmediatePriority, () => {
+      Scheduler.log('B');
+    });
+    scheduleCallback(ImmediatePriority, () => {
+      Scheduler.log('C');
+      throw new Error('Oops C');
+    });
+
+    expect(() => Scheduler.unstable_flushExpired()).toThrow('Oops A');
+    assertLog(['A']);
+
+    // B and C flush in a subsequent event. That way, the second error is not
+    // swallowed.
+    expect(() => Scheduler.unstable_flushExpired()).toThrow('Oops C');
+    assertLog(['B', 'C']);
+  });
+
+  it('multiple immediate callbacks can throw and there will be an error for each one', () => {
+    scheduleCallback(ImmediatePriority, () => {
+      throw new Error('First error');
+    });
+    scheduleCallback(ImmediatePriority, () => {
+      throw new Error('Second error');
+    });
+    expect(() => Scheduler.unstable_flushAll()).toThrow('First error');
+    // The next error is thrown in the subsequent event
+    expect(() => Scheduler.unstable_flushAll()).toThrow('Second error');
+  });
+
+  it('exposes the current priority level', () => {
+    Scheduler.log(getCurrentPriorityLevel());
+    runWithPriority(ImmediatePriority, () => {
+      Scheduler.log(getCurrentPriorityLevel());
+      runWithPriority(NormalPriority, () => {
+        Scheduler.log(getCurrentPriorityLevel());
+        runWithPriority(UserBlockingPriority, () => {
+          Scheduler.log(getCurrentPriorityLevel());
+        });
+      });
+      Scheduler.log(getCurrentPriorityLevel());
+    });
+
+    assertLog([
+      NormalPriority,
+      ImmediatePriority,
+      NormalPriority,
+      UserBlockingPriority,
+      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.
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('adds extra function to the JS stack whose name includes the priority level', async () => {
+      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.log('Immediate: ' + inferPriorityFromCallstack()),
+      );
+      scheduleCallback(UserBlockingPriority, () =>
+        Scheduler.log('UserBlocking: ' + inferPriorityFromCallstack()),
+      );
+      scheduleCallback(NormalPriority, () =>
+        Scheduler.log('Normal: ' + inferPriorityFromCallstack()),
+      );
+      scheduleCallback(LowPriority, () =>
+        Scheduler.log('Low: ' + inferPriorityFromCallstack()),
+      );
+      scheduleCallback(IdlePriority, () =>
+        Scheduler.log('Idle: ' + inferPriorityFromCallstack()),
+      );
+
+      await waitForAll([
+        'Immediate: ' + ImmediatePriority,
+        'UserBlocking: ' + UserBlockingPriority,
+        'Normal: ' + NormalPriority,
+        'Low: ' + LowPriority,
+        'Idle: ' + IdlePriority,
+      ]);
+    });
+  }
+
+  describe('delayed tasks', () => {
+    it('schedules a delayed task', async () => {
+      scheduleCallback(NormalPriority, () => Scheduler.log('A'), {
+        delay: 1000,
+      });
+
+      // Should flush nothing, because delay hasn't elapsed
+      await waitForAll([]);
+
+      // Advance time until right before the threshold
+      Scheduler.unstable_advanceTime(999);
+      // Still nothing
+      await waitForAll([]);
+
+      // Advance time past the threshold
+      Scheduler.unstable_advanceTime(1);
+
+      // Now it should flush like normal
+      await waitForAll(['A']);
+    });
+
+    it('schedules multiple delayed tasks', async () => {
+      scheduleCallback(NormalPriority, () => Scheduler.log('C'), {
+        delay: 300,
+      });
+
+      scheduleCallback(NormalPriority, () => Scheduler.log('B'), {
+        delay: 200,
+      });
+
+      scheduleCallback(NormalPriority, () => Scheduler.log('D'), {
+        delay: 400,
+      });
+
+      scheduleCallback(NormalPriority, () => Scheduler.log('A'), {
+        delay: 100,
+      });
+
+      // Should flush nothing, because delay hasn't elapsed
+      await waitForAll([]);
+
+      // Advance some time.
+      Scheduler.unstable_advanceTime(200);
+      // Both A and B are no longer delayed. They can now flush incrementally.
+      await waitFor(['A']);
+      await waitForAll(['B']);
+
+      // Advance the rest
+      Scheduler.unstable_advanceTime(200);
+      await waitForAll(['C', 'D']);
+    });
+
+    it('interleaves normal tasks and delayed tasks', async () => {
+      // 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.log('Timer 2'), {
+        delay: 300,
+      });
+      scheduleCallback(UserBlockingPriority, () => Scheduler.log('Timer 1'), {
+        delay: 100,
+      });
+
+      // Schedule some tasks at default priority.
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.log('A');
+        Scheduler.unstable_advanceTime(100);
+      });
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.log('B');
+        Scheduler.unstable_advanceTime(100);
+      });
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.log('C');
+        Scheduler.unstable_advanceTime(100);
+      });
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.log('D');
+        Scheduler.unstable_advanceTime(100);
+      });
+
+      // Flush all the work. The timers should be interleaved with the
+      // other tasks.
+      await waitForAll(['A', 'Timer 1', 'B', 'C', 'Timer 2', 'D']);
+    });
+
+    it('interleaves delayed tasks with time-sliced tasks', async () => {
+      // 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.log('Timer 2'), {
+        delay: 300,
+      });
+      scheduleCallback(UserBlockingPriority, () => Scheduler.log('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.log(label);
+          if (tasks.length > 0) {
+            return work;
+          }
+        }
+      };
+      scheduleCallback(NormalPriority, work);
+
+      // Flush all the work. The timers should be interleaved with the
+      // other tasks.
+      await waitForAll(['A', 'Timer 1', 'B', 'C', 'Timer 2', 'D']);
+    });
+
+    it('cancels a delayed task', async () => {
+      // Schedule several tasks with the same delay
+      const options = {delay: 100};
+
+      scheduleCallback(NormalPriority, () => Scheduler.log('A'), options);
+      const taskB = scheduleCallback(
+        NormalPriority,
+        () => Scheduler.log('B'),
+        options,
+      );
+      const taskC = scheduleCallback(
+        NormalPriority,
+        () => Scheduler.log('C'),
+        options,
+      );
+
+      // Cancel B before its delay has elapsed
+      await waitForAll([]);
+      cancelCallback(taskB);
+
+      // Cancel C after its delay has elapsed
+      Scheduler.unstable_advanceTime(500);
+      cancelCallback(taskC);
+
+      // Only A should flush
+      await waitForAll(['A']);
+    });
+
+    it('gracefully handles scheduled tasks that are not a function', async () => {
+      scheduleCallback(ImmediatePriority, null);
+      await waitForAll([]);
+
+      scheduleCallback(ImmediatePriority, undefined);
+      await waitForAll([]);
+
+      scheduleCallback(ImmediatePriority, {});
+      await waitForAll([]);
+
+      scheduleCallback(ImmediatePriority, 42);
+      await waitForAll([]);
+    });
+
+    it('toFlushUntilNextPaint stops if a continuation is returned', async () => {
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.log('Original Task');
+        Scheduler.log('shouldYield: ' + shouldYield());
+        Scheduler.log('Return a continuation');
+        return () => {
+          Scheduler.log('Continuation Task');
+        };
+      });
+
+      await waitForPaint([
+        'Original Task',
+        // Immediately before returning a continuation, `shouldYield` returns
+        // false, which means there must be time remaining in the frame.
+        'shouldYield: false',
+        'Return a continuation',
+
+        // The continuation should not flush yet.
+      ]);
+
+      // No time has elapsed
+      expect(Scheduler.unstable_now()).toBe(0);
+
+      // Continue the task
+      await waitForAll(['Continuation Task']);
+    });
+
+    it("toFlushAndYield keeps flushing even if there's a continuation", async () => {
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.log('Original Task');
+        Scheduler.log('shouldYield: ' + shouldYield());
+        Scheduler.log('Return a continuation');
+        return () => {
+          Scheduler.log('Continuation Task');
+        };
+      });
+
+      await waitForAll([
+        'Original Task',
+        // Immediately before returning a continuation, `shouldYield` returns
+        // false, which means there must be time remaining in the frame.
+        'shouldYield: false',
+        'Return a continuation',
+
+        // The continuation should flush immediately, even though the task
+        // yielded a continuation.
+        'Continuation Task',
+      ]);
+    });
+  });
+});
diff --git a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
new file mode 100644
index 00000000000..c572ec595bb
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
@@ -0,0 +1,414 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ImmediatePriority;
+let NormalPriority;
+let UserBlockingPriority;
+let LowPriority;
+let IdlePriority;
+let shouldYield;
+
+// The Scheduler postTask implementation uses a new postTask browser API to
+// schedule work on the main thread. 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('SchedulerPostTask', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () =>
+      jest.requireActual('scheduler/unstable_post_task'),
+    );
+
+    runtime = installMockBrowserRuntime();
+    performance = window.performance;
+    Scheduler = require('scheduler');
+    cancelCallback = Scheduler.unstable_cancelCallback;
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    ImmediatePriority = Scheduler.unstable_ImmediatePriority;
+    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+    LowPriority = Scheduler.unstable_LowPriority;
+    IdlePriority = Scheduler.unstable_IdlePriority;
+    shouldYield = Scheduler.unstable_shouldYield;
+  });
+
+  afterEach(() => {
+    if (!runtime.isLogEmpty()) {
+      throw Error('Test exited without clearing log.');
+    }
+  });
+
+  function installMockBrowserRuntime() {
+    let taskQueue = new Map();
+    let eventLog = [];
+
+    // Mock window functions
+    const window = {};
+    global.window = window;
+
+    let idCounter = 0;
+    let currentTime = 0;
+    window.performance = {
+      now() {
+        return currentTime;
+      },
+    };
+
+    // Note: setTimeout is used to report errors and nothing else.
+    window.setTimeout = cb => {
+      try {
+        cb();
+      } catch (error) {
+        runtime.log(`Error: ${error.message}`);
+      }
+    };
+
+    // Mock browser scheduler.
+    const scheduler = {};
+    global.scheduler = scheduler;
+
+    scheduler.postTask = function (callback, {signal}) {
+      const {priority} = signal;
+      const id = idCounter++;
+      log(
+        `Post Task ${id} [${priority === undefined ? '<default>' : priority}]`,
+      );
+      const controller = signal._controller;
+      return new Promise((resolve, reject) => {
+        taskQueue.set(controller, {id, callback, resolve, reject});
+      });
+    };
+
+    scheduler.yield = function ({signal}) {
+      const {priority} = signal;
+      const id = idCounter++;
+      log(`Yield ${id} [${priority === undefined ? '<default>' : priority}]`);
+      const controller = signal._controller;
+      let callback;
+
+      return {
+        then(cb) {
+          callback = cb;
+          return new Promise((resolve, reject) => {
+            taskQueue.set(controller, {id, callback, resolve, reject});
+          });
+        },
+      };
+    };
+
+    global.TaskController = class TaskController {
+      constructor({priority}) {
+        this.signal = {_controller: this, priority};
+      }
+      abort() {
+        const task = taskQueue.get(this);
+        if (task !== undefined) {
+          taskQueue.delete(this);
+          const reject = task.reject;
+          reject(new Error('Aborted'));
+        }
+      }
+    };
+
+    function ensureLogIsEmpty() {
+      if (eventLog.length !== 0) {
+        throw Error('Log is not empty. Call assertLog before continuing.');
+      }
+    }
+    function advanceTime(ms) {
+      currentTime += ms;
+    }
+    function flushTasks() {
+      ensureLogIsEmpty();
+
+      // If there's a continuation, it will call postTask again
+      // which will set nextTask. That means we need to clear
+      // nextTask before the invocation, otherwise we would
+      // delete the continuation task.
+      const prevTaskQueue = taskQueue;
+      taskQueue = new Map();
+      for (const [, {id, callback, resolve}] of prevTaskQueue) {
+        log(`Task ${id} Fired`);
+        callback(false);
+        resolve();
+      }
+    }
+    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,
+      flushTasks,
+      log,
+      isLogEmpty,
+      assertLog,
+    };
+  }
+
+  it('task that finishes before deadline', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+    runtime.flushTasks();
+    runtime.assertLog(['Task 0 Fired', 'A']);
+  });
+
+  it('task with continuation', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+      while (!Scheduler.unstable_shouldYield()) {
+        runtime.advanceTime(1);
+      }
+      runtime.log(`Yield at ${performance.now()}ms`);
+      return () => {
+        runtime.log('Continuation');
+      };
+    });
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+
+    runtime.flushTasks();
+    runtime.assertLog([
+      'Task 0 Fired',
+      'A',
+      'Yield at 5ms',
+      'Yield 1 [user-visible]',
+    ]);
+
+    runtime.flushTasks();
+    runtime.assertLog(['Task 1 Fired', 'Continuation']);
+  });
+
+  it('multiple tasks', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog([
+      'Post Task 0 [user-visible]',
+      'Post Task 1 [user-visible]',
+    ]);
+    runtime.flushTasks();
+    runtime.assertLog(['Task 0 Fired', 'A', 'Task 1 Fired', 'B']);
+  });
+
+  it('cancels tasks', () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+    cancelCallback(task);
+    runtime.flushTasks();
+    runtime.assertLog([]);
+  });
+
+  it('an error in one task does not affect execution of other tasks', () => {
+    scheduleCallback(NormalPriority, () => {
+      throw Error('Oops!');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Yay');
+    });
+    runtime.assertLog([
+      'Post Task 0 [user-visible]',
+      'Post Task 1 [user-visible]',
+    ]);
+    runtime.flushTasks();
+    runtime.assertLog(['Task 0 Fired', 'Error: Oops!', 'Task 1 Fired', 'Yay']);
+  });
+
+  it('schedule new task after queue has emptied', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+    runtime.flushTasks();
+    runtime.assertLog(['Task 0 Fired', 'A']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Task 1 [user-visible]']);
+    runtime.flushTasks();
+    runtime.assertLog(['Task 1 Fired', 'B']);
+  });
+
+  it('schedule new task after a cancellation', () => {
+    const handle = scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+    cancelCallback(handle);
+
+    runtime.flushTasks();
+    runtime.assertLog([]);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Task 1 [user-visible]']);
+    runtime.flushTasks();
+    runtime.assertLog(['Task 1 Fired', 'B']);
+  });
+
+  it('schedules tasks at different priorities', () => {
+    scheduleCallback(ImmediatePriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(UserBlockingPriority, () => {
+      runtime.log('B');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('C');
+    });
+    scheduleCallback(LowPriority, () => {
+      runtime.log('D');
+    });
+    scheduleCallback(IdlePriority, () => {
+      runtime.log('E');
+    });
+    runtime.assertLog([
+      'Post Task 0 [user-blocking]',
+      'Post Task 1 [user-blocking]',
+      'Post Task 2 [user-visible]',
+      'Post Task 3 [user-visible]',
+      'Post Task 4 [background]',
+    ]);
+    runtime.flushTasks();
+    runtime.assertLog([
+      'Task 0 Fired',
+      'A',
+      'Task 1 Fired',
+      'B',
+      'Task 2 Fired',
+      'C',
+      'Task 3 Fired',
+      'D',
+      'Task 4 Fired',
+      'E',
+    ]);
+  });
+
+  it('yielding continues in a new task regardless of how much time is remaining', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Original Task');
+      runtime.log('shouldYield: ' + shouldYield());
+      runtime.log('Return a continuation');
+      return () => {
+        runtime.log('Continuation Task');
+      };
+    });
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+
+    runtime.flushTasks();
+    runtime.assertLog([
+      'Task 0 Fired',
+      'Original Task',
+      // Immediately before returning a continuation, `shouldYield` returns
+      // false, which means there must be time remaining in the frame.
+      'shouldYield: false',
+      'Return a continuation',
+
+      // The continuation should be scheduled in a separate macrotask even
+      // though there's time remaining.
+      'Yield 1 [user-visible]',
+    ]);
+
+    // No time has elapsed
+    expect(performance.now()).toBe(0);
+
+    runtime.flushTasks();
+    runtime.assertLog(['Task 1 Fired', 'Continuation Task']);
+  });
+
+  describe('falls back to postTask for scheduling continuations when scheduler.yield is not available', () => {
+    beforeEach(() => {
+      delete global.scheduler.yield;
+    });
+
+    it('task with continuation', () => {
+      scheduleCallback(NormalPriority, () => {
+        runtime.log('A');
+        while (!Scheduler.unstable_shouldYield()) {
+          runtime.advanceTime(1);
+        }
+        runtime.log(`Yield at ${performance.now()}ms`);
+        return () => {
+          runtime.log('Continuation');
+        };
+      });
+      runtime.assertLog(['Post Task 0 [user-visible]']);
+
+      runtime.flushTasks();
+      runtime.assertLog([
+        'Task 0 Fired',
+        'A',
+        'Yield at 5ms',
+        'Post Task 1 [user-visible]',
+      ]);
+
+      runtime.flushTasks();
+      runtime.assertLog(['Task 1 Fired', 'Continuation']);
+    });
+
+    it('yielding continues in a new task regardless of how much time is remaining', () => {
+      scheduleCallback(NormalPriority, () => {
+        runtime.log('Original Task');
+        runtime.log('shouldYield: ' + shouldYield());
+        runtime.log('Return a continuation');
+        return () => {
+          runtime.log('Continuation Task');
+        };
+      });
+      runtime.assertLog(['Post Task 0 [user-visible]']);
+
+      runtime.flushTasks();
+      runtime.assertLog([
+        'Task 0 Fired',
+        'Original Task',
+        // Immediately before returning a continuation, `shouldYield` returns
+        // false, which means there must be time remaining in the frame.
+        'shouldYield: false',
+        'Return a continuation',
+
+        // The continuation should be scheduled in a separate macrotask even
+        // though there's time remaining.
+        'Post Task 1 [user-visible]',
+      ]);
+
+      // No time has elapsed
+      expect(performance.now()).toBe(0);
+
+      runtime.flushTasks();
+      runtime.assertLog(['Task 1 Fired', 'Continuation Task']);
+    });
+  });
+});
diff --git a/packages/scheduler/src/__tests__/SchedulerProfiling-test.js b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
new file mode 100644
index 00000000000..eef602d90ac
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
@@ -0,0 +1,529 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 runWithPriority;
+let ImmediatePriority;
+let UserBlockingPriority;
+let NormalPriority;
+let LowPriority;
+let IdlePriority;
+let scheduleCallback;
+let cancelCallback;
+// let wrapCallback;
+// let getCurrentPriorityLevel;
+// let shouldYield;
+let waitForAll;
+let waitFor;
+let waitForThrow;
+
+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', () => {
+  const {enableProfiling} = require('scheduler/src/SchedulerFeatureFlags');
+  if (!enableProfiling) {
+    // 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');
+
+    // 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 InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
+    waitForThrow = InternalTestUtils.waitForThrow;
+  });
+
+  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;
+  }
+
+  it('creates a basic flamegraph', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    Scheduler.unstable_advanceTime(100);
+    scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.unstable_advanceTime(300);
+        Scheduler.log('Yield 1');
+        scheduleCallback(
+          UserBlockingPriority,
+          () => {
+            Scheduler.log('Yield 2');
+            Scheduler.unstable_advanceTime(300);
+          },
+          {label: 'Bar'},
+        );
+        Scheduler.unstable_advanceTime(100);
+        Scheduler.log('Yield 3');
+        return () => {
+          Scheduler.log('Yield 4');
+          Scheduler.unstable_advanceTime(300);
+        };
+      },
+      {label: 'Foo'},
+    );
+    await waitFor(['Yield 1', 'Yield 3']);
+    Scheduler.unstable_advanceTime(100);
+    await waitForAll(['Yield 2', 'Yield 4']);
+
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │██░░░░░░░░██░░░░░░░░░░░░
+Task 2 [User-blocking]       │        ░░░░██████
+Task 1 [Normal]              │  ████████░░░░░░░░██████
+`,
+    );
+  });
+
+  it('marks when a task is canceled', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    const task = scheduleCallback(NormalPriority, () => {
+      Scheduler.log('Yield 1');
+      Scheduler.unstable_advanceTime(300);
+      Scheduler.log('Yield 2');
+      return () => {
+        Scheduler.log('Continuation');
+        Scheduler.unstable_advanceTime(200);
+      };
+    });
+
+    await waitFor(['Yield 1', 'Yield 2']);
+    Scheduler.unstable_advanceTime(100);
+
+    cancelCallback(task);
+
+    Scheduler.unstable_advanceTime(1000);
+    await waitForAll([]);
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░██████████████████████
+Task 1 [Normal]              │██████░░🡐 canceled
+`,
+    );
+  });
+
+  it('marks when a task errors', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    scheduleCallback(NormalPriority, () => {
+      Scheduler.unstable_advanceTime(300);
+      throw Error('Oops');
+    });
+
+    await waitForThrow('Oops');
+    Scheduler.unstable_advanceTime(100);
+
+    Scheduler.unstable_advanceTime(1000);
+    await waitForAll([]);
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░██████████████████████
+Task 1 [Normal]              │██████🡐 errored
+`,
+    );
+  });
+
+  it('marks when multiple tasks are canceled', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    const task1 = scheduleCallback(NormalPriority, () => {
+      Scheduler.log('Yield 1');
+      Scheduler.unstable_advanceTime(300);
+      Scheduler.log('Yield 2');
+      return () => {
+        Scheduler.log('Continuation');
+        Scheduler.unstable_advanceTime(200);
+      };
+    });
+    const task2 = scheduleCallback(NormalPriority, () => {
+      Scheduler.log('Yield 3');
+      Scheduler.unstable_advanceTime(300);
+      Scheduler.log('Yield 4');
+      return () => {
+        Scheduler.log('Continuation');
+        Scheduler.unstable_advanceTime(200);
+      };
+    });
+
+    await waitFor(['Yield 1', 'Yield 2']);
+    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);
+    await waitForAll([]);
+
+    // 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', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    const task = scheduleCallback(NormalPriority, () => {
+      Scheduler.log('A');
+      Scheduler.unstable_advanceTime(1000);
+    });
+    await waitForAll(['A']);
+    cancelCallback(task);
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │░░░░░░░░░░░░░░░░░░░░
+Task 1 [Normal]              │████████████████████
+`,
+    );
+  });
+
+  it('handles cancelling a task multiple times', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+
+    scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.log('A');
+        Scheduler.unstable_advanceTime(1000);
+      },
+      {label: 'A'},
+    );
+    Scheduler.unstable_advanceTime(200);
+    const task = scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.log('B');
+        Scheduler.unstable_advanceTime(1000);
+      },
+      {label: 'B'},
+    );
+    Scheduler.unstable_advanceTime(400);
+    cancelCallback(task);
+    cancelCallback(task);
+    cancelCallback(task);
+    await waitForAll(['A']);
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │████████████░░░░░░░░░░░░░░░░░░░░
+Task 1 [Normal]              │░░░░░░░░░░░░████████████████████
+Task 2 [Normal]              │    ░░░░░░░░🡐 canceled
+`,
+    );
+  });
+
+  it('handles delayed tasks', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+    scheduleCallback(
+      NormalPriority,
+      () => {
+        Scheduler.unstable_advanceTime(1000);
+        Scheduler.log('A');
+      },
+      {
+        delay: 1000,
+      },
+    );
+    await waitForAll([]);
+
+    Scheduler.unstable_advanceTime(1000);
+
+    await waitForAll(['A']);
+
+    expect(stopProfilingAndPrintFlamegraph()).toEqual(
+      `
+!!! Main thread              │████████████████████░░░░░░░░░░░░░░░░░░░░
+Task 1 [Normal]              │                    ████████████████████
+`,
+    );
+  });
+
+  it('handles cancelling a delayed task', async () => {
+    Scheduler.unstable_Profiling.startLoggingProfilingEvents();
+    const task = scheduleCallback(NormalPriority, () => Scheduler.log('A'), {
+      delay: 1000,
+    });
+    cancelCallback(task);
+    await waitForAll([]);
+    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').mockImplementation(() => {});
+
+    // Increase infinite loop guard limit
+    const originalMaxIterations = global.__MAX_ITERATIONS__;
+    global.__MAX_ITERATIONS__ = 120000;
+
+    let taskId = 1;
+    while (console.error.mock.calls.length === 0) {
+      taskId++;
+      const task = scheduleCallback(NormalPriority, () => {});
+      cancelCallback(task);
+      Scheduler.unstable_flushAll();
+    }
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.mock.calls[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);
+    });
+    await waitForAll([]);
+
+    // 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/__tests__/SchedulerSetImmediate-test.js b/packages/scheduler/src/__tests__/SchedulerSetImmediate-test.js
new file mode 100644
index 00000000000..74bbb8d55fb
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerSetImmediate-test.js
@@ -0,0 +1,319 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let runtime;
+let performance;
+let cancelCallback;
+let scheduleCallback;
+let NormalPriority;
+let UserBlockingPriority;
+
+// 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('SchedulerDOMSetImmediate', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    runtime = installMockBrowserRuntime();
+    jest.unmock('scheduler');
+
+    performance = global.performance;
+    Scheduler = require('scheduler');
+    cancelCallback = Scheduler.unstable_cancelCallback;
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
+  });
+
+  afterEach(() => {
+    delete global.performance;
+
+    if (!runtime.isLogEmpty()) {
+      throw Error('Test exited without clearing log.');
+    }
+  });
+
+  function installMockBrowserRuntime() {
+    let timerIDCounter = 0;
+    // let timerIDs = new Map();
+
+    let eventLog = [];
+
+    let currentTime = 0;
+
+    global.performance = {
+      now() {
+        return currentTime;
+      },
+    };
+
+    global.setTimeout = (cb, delay) => {
+      const id = timerIDCounter++;
+      log(`Set Timer`);
+      return id;
+    };
+    global.clearTimeout = id => {
+      // TODO
+    };
+
+    // Unused: we expect setImmediate to be preferred.
+    global.MessageChannel = function () {
+      return {
+        port1: {},
+        port2: {
+          postMessage() {
+            throw Error('Should be unused');
+          },
+        },
+      };
+    };
+
+    let pendingSetImmediateCallback = null;
+    global.setImmediate = function (cb) {
+      if (pendingSetImmediateCallback) {
+        throw Error('Message event already scheduled');
+      }
+      log('Set Immediate');
+      pendingSetImmediateCallback = cb;
+    };
+
+    function ensureLogIsEmpty() {
+      if (eventLog.length !== 0) {
+        throw Error('Log is not empty. Call assertLog before continuing.');
+      }
+    }
+    function advanceTime(ms) {
+      currentTime += ms;
+    }
+    function fireSetImmediate() {
+      ensureLogIsEmpty();
+      if (!pendingSetImmediateCallback) {
+        throw Error('No setImmediate was scheduled');
+      }
+      const cb = pendingSetImmediateCallback;
+      pendingSetImmediateCallback = null;
+      log('setImmediate Callback');
+      cb();
+    }
+    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,
+      fireSetImmediate,
+      log,
+      isLogEmpty,
+      assertLog,
+    };
+  }
+
+  it('does not use setImmediate override', () => {
+    global.setImmediate = () => {
+      throw new Error('Should not throw');
+    };
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'Task']);
+  });
+
+  it('task that finishes before deadline', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', '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(['Set Immediate']);
+
+    runtime.fireSetImmediate();
+    runtime.assertLog([
+      'setImmediate Callback',
+      'Task',
+      gate(flags => (flags.www ? 'Yield at 10ms' : 'Yield at 5ms')),
+      'Set Immediate',
+    ]);
+
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'Continuation']);
+  });
+
+  it('multiple tasks', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    if (gate(flags => flags.enableAlwaysYieldScheduler)) {
+      runtime.assertLog(['setImmediate Callback', 'A', 'Set Immediate']);
+      runtime.fireSetImmediate();
+      runtime.assertLog(['setImmediate Callback', 'B']);
+    } else {
+      runtime.assertLog(['setImmediate Callback', 'A', 'B']);
+    }
+  });
+
+  it('multiple tasks at different priority', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(UserBlockingPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    if (gate(flags => flags.enableAlwaysYieldScheduler)) {
+      runtime.assertLog(['setImmediate Callback', 'B', 'Set Immediate']);
+      runtime.fireSetImmediate();
+      runtime.assertLog(['setImmediate Callback', 'A']);
+    } else {
+      runtime.assertLog(['setImmediate Callback', 'B', 'A']);
+    }
+  });
+
+  it('multiple tasks with a yield in between', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+      runtime.advanceTime(4999);
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog([
+      'setImmediate Callback',
+      'A',
+      // Ran out of time. Post a continuation event.
+      'Set Immediate',
+    ]);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'B']);
+  });
+
+  it('cancels tasks', () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Set Immediate']);
+    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(['Set Immediate']);
+
+    expect(() => runtime.fireSetImmediate()).toThrow('Oops!');
+    runtime.assertLog(['setImmediate Callback', 'Oops!', 'Set Immediate']);
+
+    runtime.fireSetImmediate();
+    if (gate(flags => flags.enableAlwaysYieldScheduler)) {
+      runtime.assertLog(['setImmediate Callback', 'Set Immediate']);
+      runtime.fireSetImmediate();
+      runtime.assertLog(['setImmediate Callback', 'Yay']);
+    } else {
+      runtime.assertLog(['setImmediate Callback', 'Yay']);
+    }
+  });
+
+  it('schedule new task after queue has emptied', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'A']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'B']);
+  });
+
+  it('schedule new task after a cancellation', () => {
+    const handle = scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Set Immediate']);
+    cancelCallback(handle);
+
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'B']);
+  });
+});
+
+test('does not crash if setImmediate is undefined', () => {
+  jest.resetModules();
+  const originalSetImmediate = global.setImmediate;
+  try {
+    delete global.setImmediate;
+    jest.unmock('scheduler');
+    expect(() => {
+      require('scheduler');
+    }).not.toThrow();
+  } finally {
+    global.setImmediate = originalSetImmediate;
+  }
+});
diff --git a/packages/scheduler/src/__tests__/SchedulerSetTimeout-test.js b/packages/scheduler/src/__tests__/SchedulerSetTimeout-test.js
new file mode 100644
index 00000000000..986d329632c
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerSetTimeout-test.js
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 Scheduler;
+let scheduleCallback;
+let ImmediatePriority;
+let UserBlockingPriority;
+let NormalPriority;
+
+describe('SchedulerNoDOM', () => {
+  // Scheduler falls back to a naive implementation using setTimeout.
+  // This is only meant to be used for testing purposes, like with jest's fake timer API.
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useFakeTimers();
+    delete global.setImmediate;
+    delete global.MessageChannel;
+    jest.unmock('scheduler');
+
+    Scheduler = require('scheduler');
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+  });
+
+  it('runAllTimers flushes all scheduled callbacks', () => {
+    const log = [];
+    scheduleCallback(NormalPriority, () => {
+      log.push('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      log.push('B');
+    });
+    scheduleCallback(NormalPriority, () => {
+      log.push('C');
+    });
+    expect(log).toEqual([]);
+    jest.runAllTimers();
+    expect(log).toEqual(['A', 'B', 'C']);
+  });
+
+  it('executes callbacks in order of priority', () => {
+    const log = [];
+
+    scheduleCallback(NormalPriority, () => {
+      log.push('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      log.push('B');
+    });
+    scheduleCallback(UserBlockingPriority, () => {
+      log.push('C');
+    });
+    scheduleCallback(UserBlockingPriority, () => {
+      log.push('D');
+    });
+
+    expect(log).toEqual([]);
+    jest.runAllTimers();
+    expect(log).toEqual(['C', 'D', 'A', 'B']);
+  });
+
+  it('handles errors', () => {
+    let log = [];
+
+    scheduleCallback(ImmediatePriority, () => {
+      log.push('A');
+      throw new Error('Oops A');
+    });
+    scheduleCallback(ImmediatePriority, () => {
+      log.push('B');
+    });
+    scheduleCallback(ImmediatePriority, () => {
+      log.push('C');
+      throw new Error('Oops C');
+    });
+
+    expect(() => jest.runAllTimers()).toThrow('Oops A');
+
+    expect(log).toEqual(['A']);
+
+    log = [];
+
+    // B and C flush in a subsequent event. That way, the second error is not
+    // swallowed.
+    expect(() => jest.runAllTimers()).toThrow('Oops C');
+    expect(log).toEqual(['B', 'C']);
+  });
+});
+
+// See: https://github.com/facebook/react/pull/13088
+describe('does not crash non-node SSR environments', () => {
+  it('if setTimeout is undefined', () => {
+    jest.resetModules();
+    const originalSetTimeout = global.setTimeout;
+    try {
+      delete global.setTimeout;
+      jest.unmock('scheduler');
+      expect(() => {
+        require('scheduler');
+      }).not.toThrow();
+    } finally {
+      global.setTimeout = originalSetTimeout;
+    }
+  });
+
+  it('if clearTimeout is undefined', () => {
+    jest.resetModules();
+    const originalClearTimeout = global.clearTimeout;
+    try {
+      delete global.clearTimeout;
+      jest.unmock('scheduler');
+      expect(() => {
+        require('scheduler');
+      }).not.toThrow();
+    } finally {
+      global.clearTimeout = originalClearTimeout;
+    }
+  });
+});
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
new file mode 100644
index 00000000000..88239b71067
--- /dev/null
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -0,0 +1,598 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-var */
+
+import type {PriorityLevel} from '../SchedulerPriorities';
+
+import {
+  enableProfiling,
+  frameYieldMs,
+  userBlockingPriorityTimeout,
+  lowPriorityTimeout,
+  normalPriorityTimeout,
+  enableRequestPaint,
+  enableAlwaysYieldScheduler,
+} from '../SchedulerFeatureFlags';
+
+import {push, pop, peek} from '../SchedulerMinHeap';
+
+// TODO: Use symbols?
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from '../SchedulerPriorities';
+import {
+  markTaskRun,
+  markTaskYield,
+  markTaskCompleted,
+  markTaskCanceled,
+  markTaskErrored,
+  markSchedulerSuspended,
+  markSchedulerUnsuspended,
+  markTaskStart,
+  stopLoggingProfilingEvents,
+  startLoggingProfilingEvents,
+} from '../SchedulerProfiling';
+
+export type Callback = boolean => ?Callback;
+
+export opaque type Task = {
+  id: number,
+  callback: Callback | null,
+  priorityLevel: PriorityLevel,
+  startTime: number,
+  expirationTime: number,
+  sortIndex: number,
+  isQueued?: boolean,
+};
+
+let getCurrentTime: () => number | DOMHighResTimeStamp;
+const hasPerformanceNow =
+  // $FlowFixMe[method-unbinding]
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+if (hasPerformanceNow) {
+  const localPerformance = performance;
+  getCurrentTime = () => localPerformance.now();
+} else {
+  const localDate = Date;
+  const initialTime = localDate.now();
+  getCurrentTime = () => localDate.now() - initialTime;
+}
+
+// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
+// Math.pow(2, 30) - 1
+// 0b111111111111111111111111111111
+var maxSigned31BitInt = 1073741823;
+
+// Tasks are stored on a min heap
+var taskQueue: Array<Task> = [];
+var timerQueue: Array<Task> = [];
+
+// Incrementing id counter. Used to maintain insertion order.
+var taskIdCounter = 1;
+
+var currentTask = null;
+var currentPriorityLevel: PriorityLevel = NormalPriority;
+
+// This is set while performing work, to prevent re-entrance.
+var isPerformingWork = false;
+
+var isHostCallbackScheduled = false;
+var isHostTimeoutScheduled = false;
+
+var needsPaint = false;
+
+// Capture local references to native APIs, in case a polyfill overrides them.
+const localSetTimeout = typeof setTimeout === 'function' ? setTimeout : null;
+const localClearTimeout =
+  typeof clearTimeout === 'function' ? clearTimeout : null;
+const localSetImmediate =
+  typeof setImmediate !== 'undefined' ? setImmediate : null; // IE and Node.js + jsdom
+
+function advanceTimers(currentTime: number) {
+  // 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 {
+      // Remaining timers are pending.
+      return;
+    }
+    timer = peek(timerQueue);
+  }
+}
+
+function handleTimeout(currentTime: number) {
+  isHostTimeoutScheduled = false;
+  advanceTimers(currentTime);
+
+  if (!isHostCallbackScheduled) {
+    if (peek(taskQueue) !== null) {
+      isHostCallbackScheduled = true;
+      requestHostCallback();
+    } else {
+      const firstTimer = peek(timerQueue);
+      if (firstTimer !== null) {
+        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+      }
+    }
+  }
+}
+
+function flushWork(initialTime: number) {
+  if (enableProfiling) {
+    markSchedulerUnsuspended(initialTime);
+  }
+
+  // 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 previousPriorityLevel = currentPriorityLevel;
+  try {
+    if (enableProfiling) {
+      try {
+        return workLoop(initialTime);
+      } catch (error) {
+        if (currentTask !== null) {
+          const currentTime = getCurrentTime();
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          markTaskErrored(currentTask, currentTime);
+          // $FlowFixMe[incompatible-use] found when upgrading Flow
+          currentTask.isQueued = false;
+        }
+        throw error;
+      }
+    } else {
+      // No catch in prod code path.
+      return workLoop(initialTime);
+    }
+  } finally {
+    currentTask = null;
+    currentPriorityLevel = previousPriorityLevel;
+    isPerformingWork = false;
+    if (enableProfiling) {
+      const currentTime = getCurrentTime();
+      markSchedulerSuspended(currentTime);
+    }
+  }
+}
+
+function workLoop(initialTime: number) {
+  let currentTime = initialTime;
+  advanceTimers(currentTime);
+  currentTask = peek(taskQueue);
+  while (currentTask !== null) {
+    if (!enableAlwaysYieldScheduler) {
+      if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
+        // This currentTask hasn't expired, and we've reached the deadline.
+        break;
+      }
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    const callback = currentTask.callback;
+    if (typeof callback === 'function') {
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentTask.callback = null;
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentPriorityLevel = currentTask.priorityLevel;
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
+      if (enableProfiling) {
+        // $FlowFixMe[incompatible-call] found when upgrading Flow
+        markTaskRun(currentTask, currentTime);
+      }
+      const continuationCallback = callback(didUserCallbackTimeout);
+      currentTime = getCurrentTime();
+      if (typeof continuationCallback === 'function') {
+        // If a continuation is returned, immediately yield to the main thread
+        // regardless of how much time is left in the current time slice.
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        currentTask.callback = continuationCallback;
+        if (enableProfiling) {
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          markTaskYield(currentTask, currentTime);
+        }
+        advanceTimers(currentTime);
+        return true;
+      } else {
+        if (enableProfiling) {
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          markTaskCompleted(currentTask, currentTime);
+          // $FlowFixMe[incompatible-use] found when upgrading Flow
+          currentTask.isQueued = false;
+        }
+        if (currentTask === peek(taskQueue)) {
+          pop(taskQueue);
+        }
+        advanceTimers(currentTime);
+      }
+    } else {
+      pop(taskQueue);
+    }
+    currentTask = peek(taskQueue);
+    if (enableAlwaysYieldScheduler) {
+      if (currentTask === null || currentTask.expirationTime > currentTime) {
+        // This currentTask hasn't expired we yield to the browser task.
+        break;
+      }
+    }
+  }
+  // Return whether there's additional work
+  if (currentTask !== null) {
+    return true;
+  } else {
+    const firstTimer = peek(timerQueue);
+    if (firstTimer !== null) {
+      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+    }
+    return false;
+  }
+}
+
+function unstable_runWithPriority<T>(
+  priorityLevel: PriorityLevel,
+  eventHandler: () => T,
+): T {
+  switch (priorityLevel) {
+    case ImmediatePriority:
+    case UserBlockingPriority:
+    case NormalPriority:
+    case LowPriority:
+    case IdlePriority:
+      break;
+    default:
+      priorityLevel = NormalPriority;
+  }
+
+  var previousPriorityLevel = currentPriorityLevel;
+  currentPriorityLevel = priorityLevel;
+
+  try {
+    return eventHandler();
+  } finally {
+    currentPriorityLevel = previousPriorityLevel;
+  }
+}
+
+function unstable_next<T>(eventHandler: () => T): T {
+  var priorityLevel: PriorityLevel;
+  switch (currentPriorityLevel) {
+    case ImmediatePriority:
+    case UserBlockingPriority:
+    case NormalPriority:
+      // Shift down to normal priority
+      priorityLevel = NormalPriority;
+      break;
+    default:
+      // Anything lower than normal priority should remain at the current level.
+      priorityLevel = currentPriorityLevel;
+      break;
+  }
+
+  var previousPriorityLevel = currentPriorityLevel;
+  currentPriorityLevel = priorityLevel;
+
+  try {
+    return eventHandler();
+  } finally {
+    currentPriorityLevel = previousPriorityLevel;
+  }
+}
+
+function unstable_wrapCallback<T: (...Array<mixed>) => mixed>(callback: T): T {
+  var parentPriorityLevel = currentPriorityLevel;
+  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[missing-this-annot]
+  return function () {
+    // This is a fork of runWithPriority, inlined for performance.
+    var previousPriorityLevel = currentPriorityLevel;
+    currentPriorityLevel = parentPriorityLevel;
+
+    try {
+      return callback.apply(this, arguments);
+    } finally {
+      currentPriorityLevel = previousPriorityLevel;
+    }
+  };
+}
+
+function unstable_scheduleCallback(
+  priorityLevel: PriorityLevel,
+  callback: Callback,
+  options?: {delay: number},
+): Task {
+  var currentTime = getCurrentTime();
+
+  var startTime;
+  if (typeof options === 'object' && options !== null) {
+    var delay = options.delay;
+    if (typeof delay === 'number' && delay > 0) {
+      startTime = currentTime + delay;
+    } else {
+      startTime = currentTime;
+    }
+  } else {
+    startTime = currentTime;
+  }
+
+  var timeout;
+  switch (priorityLevel) {
+    case ImmediatePriority:
+      // Times out immediately
+      timeout = -1;
+      break;
+    case UserBlockingPriority:
+      // Eventually times out
+      timeout = userBlockingPriorityTimeout;
+      break;
+    case IdlePriority:
+      // Never times out
+      timeout = maxSigned31BitInt;
+      break;
+    case LowPriority:
+      // Eventually times out
+      timeout = lowPriorityTimeout;
+      break;
+    case NormalPriority:
+    default:
+      // Eventually times out
+      timeout = normalPriorityTimeout;
+      break;
+  }
+
+  var expirationTime = startTime + timeout;
+
+  var newTask: Task = {
+    id: taskIdCounter++,
+    callback,
+    priorityLevel,
+    startTime,
+    expirationTime,
+    sortIndex: -1,
+  };
+  if (enableProfiling) {
+    newTask.isQueued = false;
+  }
+
+  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;
+      }
+      // 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();
+    }
+  }
+
+  return newTask;
+}
+
+function unstable_cancelCallback(task: Task) {
+  if (enableProfiling) {
+    if (task.isQueued) {
+      const currentTime = getCurrentTime();
+      markTaskCanceled(task, currentTime);
+      task.isQueued = false;
+    }
+  }
+
+  // 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(): PriorityLevel {
+  return currentPriorityLevel;
+}
+
+let isMessageLoopRunning = false;
+let taskTimeoutID: TimeoutID = (-1: any);
+
+// 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 frameInterval: number = frameYieldMs;
+let startTime = -1;
+
+function shouldYieldToHost(): boolean {
+  if (!enableAlwaysYieldScheduler && enableRequestPaint && needsPaint) {
+    // Yield now.
+    return true;
+  }
+  const timeElapsed = getCurrentTime() - startTime;
+  if (timeElapsed < frameInterval) {
+    // The main thread has only been blocked for a really short amount of time;
+    // smaller than a single frame. Don't yield yet.
+    return false;
+  }
+  // Yield now.
+  return true;
+}
+
+function requestPaint() {
+  if (enableRequestPaint) {
+    needsPaint = true;
+  }
+}
+
+function forceFrameRate(fps: number) {
+  if (fps < 0 || fps > 125) {
+    // Using console['error'] to evade Babel and ESLint
+    console['error'](
+      'forceFrameRate takes a positive int between 0 and 125, ' +
+        'forcing frame rates higher than 125 fps is not supported',
+    );
+    return;
+  }
+  if (fps > 0) {
+    frameInterval = Math.floor(1000 / fps);
+  } else {
+    // reset the framerate
+    frameInterval = frameYieldMs;
+  }
+}
+
+const performWorkUntilDeadline = () => {
+  if (enableRequestPaint) {
+    needsPaint = false;
+  }
+  if (isMessageLoopRunning) {
+    const currentTime = getCurrentTime();
+    // Keep track of the start time so we can measure how long the main thread
+    // has been blocked.
+    startTime = currentTime;
+
+    // If a scheduler task throws, exit the current browser task so the
+    // error can be observed.
+    //
+    // Intentionally not using a try-catch, since that makes some debugging
+    // techniques harder. Instead, if `flushWork` errors, then `hasMoreWork` will
+    // remain true, and we'll continue the work loop.
+    let hasMoreWork = true;
+    try {
+      hasMoreWork = flushWork(currentTime);
+    } finally {
+      if (hasMoreWork) {
+        // If there's more work, schedule the next message event at the end
+        // of the preceding one.
+        schedulePerformWorkUntilDeadline();
+      } else {
+        isMessageLoopRunning = false;
+      }
+    }
+  }
+};
+
+let schedulePerformWorkUntilDeadline;
+if (typeof localSetImmediate === 'function') {
+  // Node.js and old IE.
+  // There's a few reasons for why we prefer setImmediate.
+  //
+  // Unlike MessageChannel, it doesn't prevent a Node.js process from exiting.
+  // (Even though this is a DOM fork of the Scheduler, you could get here
+  // with a mix of Node.js 15+, which has a MessageChannel, and jsdom.)
+  // https://github.com/facebook/react/issues/20756
+  //
+  // But also, it runs earlier which is the semantic we want.
+  // If other browsers ever implement it, it's better to use it.
+  // Although both of these would be inferior to native scheduling.
+  schedulePerformWorkUntilDeadline = () => {
+    localSetImmediate(performWorkUntilDeadline);
+  };
+} else if (typeof MessageChannel !== 'undefined') {
+  // DOM and Worker environments.
+  // We prefer MessageChannel because of the 4ms setTimeout clamping.
+  const channel = new MessageChannel();
+  const port = channel.port2;
+  channel.port1.onmessage = performWorkUntilDeadline;
+  schedulePerformWorkUntilDeadline = () => {
+    port.postMessage(null);
+  };
+} else {
+  // We should only fallback here in non-browser environments.
+  schedulePerformWorkUntilDeadline = () => {
+    // $FlowFixMe[not-a-function] nullable value
+    localSetTimeout(performWorkUntilDeadline, 0);
+  };
+}
+
+function requestHostCallback() {
+  if (!isMessageLoopRunning) {
+    isMessageLoopRunning = true;
+    schedulePerformWorkUntilDeadline();
+  }
+}
+
+function requestHostTimeout(
+  callback: (currentTime: number) => void,
+  ms: number,
+) {
+  // $FlowFixMe[not-a-function] nullable value
+  taskTimeoutID = localSetTimeout(() => {
+    callback(getCurrentTime());
+  }, ms);
+}
+
+function cancelHostTimeout() {
+  // $FlowFixMe[not-a-function] nullable value
+  localClearTimeout(taskTimeoutID);
+  taskTimeoutID = ((-1: any): TimeoutID);
+}
+
+export {
+  ImmediatePriority as unstable_ImmediatePriority,
+  UserBlockingPriority as unstable_UserBlockingPriority,
+  NormalPriority as unstable_NormalPriority,
+  IdlePriority as unstable_IdlePriority,
+  LowPriority as unstable_LowPriority,
+  unstable_runWithPriority,
+  unstable_next,
+  unstable_scheduleCallback,
+  unstable_cancelCallback,
+  unstable_wrapCallback,
+  unstable_getCurrentPriorityLevel,
+  shouldYieldToHost as unstable_shouldYield,
+  requestPaint as unstable_requestPaint,
+  getCurrentTime as unstable_now,
+  forceFrameRate as unstable_forceFrameRate,
+};
+
+export const unstable_Profiling: {
+  startLoggingProfilingEvents(): void,
+  stopLoggingProfilingEvents(): ArrayBuffer | null,
+} | null = enableProfiling
+  ? {
+      startLoggingProfilingEvents,
+      stopLoggingProfilingEvents,
+    }
+  : null;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.native-fb.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.native-fb.js
new file mode 100644
index 00000000000..d9d3dc73386
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.native-fb.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 enableProfiling = __DEV__;
+export const frameYieldMs = 5;
+
+export const userBlockingPriorityTimeout = 250;
+export const normalPriorityTimeout = 5000;
+export const lowPriorityTimeout = 10000;
+export const enableRequestPaint = true;
+
+export const enableAlwaysYieldScheduler = false;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
new file mode 100644
index 00000000000..e20a8e7a3a5
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// In www, these flags are controlled by GKs. Because most GKs have some
+// population running in either mode, we should run our tests that way, too,
+//
+// Use __VARIANT__ to simulate a GK. The tests will be run twice: once
+// with the __VARIANT__ set to `true`, and once set to `false`.
+
+export const enableRequestPaint = __VARIANT__;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
new file mode 100644
index 00000000000..2873dee0997
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// $FlowFixMe[cannot-resolve-module]
+const dynamicFeatureFlags = require('SchedulerFeatureFlags');
+
+export const {enableRequestPaint} = dynamicFeatureFlags;
+
+export const enableProfiling = __DEV__;
+export const frameYieldMs = 10;
+
+export const userBlockingPriorityTimeout = 250;
+export const normalPriorityTimeout = 5000;
+export const lowPriorityTimeout = 10000;
+
+export const enableAlwaysYieldScheduler = false;
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
new file mode 100644
index 00000000000..cf76126410e
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -0,0 +1,680 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-var */
+/* eslint-disable react-internal/prod-error-codes */
+
+import type {PriorityLevel} from '../SchedulerPriorities';
+
+import {enableProfiling} from '../SchedulerFeatureFlags';
+import {push, pop, peek} from '../SchedulerMinHeap';
+
+// TODO: Use symbols?
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from '../SchedulerPriorities';
+import {
+  markTaskRun,
+  markTaskYield,
+  markTaskCompleted,
+  markTaskCanceled,
+  markTaskErrored,
+  markSchedulerSuspended,
+  markSchedulerUnsuspended,
+  markTaskStart,
+  stopLoggingProfilingEvents,
+  startLoggingProfilingEvents,
+} from '../SchedulerProfiling';
+
+type Callback = boolean => ?Callback;
+
+type Task = {
+  id: number,
+  callback: Callback | null,
+  priorityLevel: PriorityLevel,
+  startTime: number,
+  expirationTime: number,
+  sortIndex: number,
+  isQueued?: boolean,
+};
+
+// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
+// Math.pow(2, 30) - 1
+// 0b111111111111111111111111111111
+var maxSigned31BitInt = 1073741823;
+
+// Times out immediately
+var IMMEDIATE_PRIORITY_TIMEOUT = -1;
+// Eventually times out
+var USER_BLOCKING_PRIORITY_TIMEOUT = 250;
+var NORMAL_PRIORITY_TIMEOUT = 5000;
+var LOW_PRIORITY_TIMEOUT = 10000;
+// Never times out
+var IDLE_PRIORITY_TIMEOUT = maxSigned31BitInt;
+
+// Tasks are stored on a min heap
+var taskQueue: Array<Task> = [];
+var timerQueue: Array<Task> = [];
+
+// Incrementing id counter. Used to maintain insertion order.
+var taskIdCounter = 1;
+
+var currentTask = null;
+var currentPriorityLevel: PriorityLevel = NormalPriority;
+
+// This is set while performing work, to prevent re-entrance.
+var isPerformingWork = false;
+
+var isHostCallbackScheduled = false;
+var isHostTimeoutScheduled = false;
+
+let currentMockTime: number = 0;
+let scheduledCallback:
+  | null
+  | ((
+      hasTimeRemaining: boolean,
+      initialTime: DOMHighResTimeStamp | number,
+    ) => boolean) = 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;
+
+var disableYieldValue = false;
+
+function setDisableYieldValue(newValue: boolean) {
+  disableYieldValue = newValue;
+}
+
+function advanceTimers(currentTime: number) {
+  // 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 {
+      // Remaining timers are pending.
+      return;
+    }
+    timer = peek(timerQueue);
+  }
+}
+
+function handleTimeout(currentTime: number) {
+  isHostTimeoutScheduled = false;
+  advanceTimers(currentTime);
+
+  if (!isHostCallbackScheduled) {
+    if (peek(taskQueue) !== null) {
+      isHostCallbackScheduled = true;
+      requestHostCallback(flushWork);
+    } else {
+      const firstTimer = peek(timerQueue);
+      if (firstTimer !== null) {
+        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+      }
+    }
+  }
+}
+
+function flushWork(hasTimeRemaining: boolean, initialTime: number) {
+  if (enableProfiling) {
+    markSchedulerUnsuspended(initialTime);
+  }
+
+  // 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 previousPriorityLevel = currentPriorityLevel;
+  try {
+    if (enableProfiling) {
+      try {
+        return workLoop(hasTimeRemaining, initialTime);
+      } catch (error) {
+        if (currentTask !== null) {
+          const currentTime = getCurrentTime();
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          markTaskErrored(currentTask, currentTime);
+          // $FlowFixMe[incompatible-use] found when upgrading Flow
+          currentTask.isQueued = false;
+        }
+        throw error;
+      }
+    } else {
+      // No catch in prod code path.
+      return workLoop(hasTimeRemaining, initialTime);
+    }
+  } finally {
+    currentTask = null;
+    currentPriorityLevel = previousPriorityLevel;
+    isPerformingWork = false;
+    if (enableProfiling) {
+      const currentTime = getCurrentTime();
+      markSchedulerSuspended(currentTime);
+    }
+  }
+}
+
+function workLoop(hasTimeRemaining: boolean, initialTime: number): boolean {
+  let currentTime = initialTime;
+  advanceTimers(currentTime);
+  currentTask = peek(taskQueue);
+  while (currentTask !== null) {
+    if (
+      currentTask.expirationTime > currentTime &&
+      (!hasTimeRemaining || shouldYieldToHost())
+    ) {
+      // This currentTask hasn't expired, and we've reached the deadline.
+      break;
+    }
+    // $FlowFixMe[incompatible-use] found when upgrading Flow
+    const callback = currentTask.callback;
+    if (typeof callback === 'function') {
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentTask.callback = null;
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      currentPriorityLevel = currentTask.priorityLevel;
+      // $FlowFixMe[incompatible-use] found when upgrading Flow
+      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
+      if (enableProfiling) {
+        // $FlowFixMe[incompatible-call] found when upgrading Flow
+        markTaskRun(currentTask, currentTime);
+      }
+      const continuationCallback = callback(didUserCallbackTimeout);
+      currentTime = getCurrentTime();
+      if (typeof continuationCallback === 'function') {
+        // If a continuation is returned, immediately yield to the main thread
+        // regardless of how much time is left in the current time slice.
+        // $FlowFixMe[incompatible-use] found when upgrading Flow
+        currentTask.callback = continuationCallback;
+        if (enableProfiling) {
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          markTaskYield(currentTask, currentTime);
+        }
+        advanceTimers(currentTime);
+
+        if (shouldYieldForPaint) {
+          needsPaint = true;
+          return true;
+        } else {
+          // If `shouldYieldForPaint` is false, we keep flushing synchronously
+          // without yielding to the main thread. This is the behavior of the
+          // `toFlushAndYield` and `toFlushAndYieldThrough` testing helpers .
+        }
+      } else {
+        if (enableProfiling) {
+          // $FlowFixMe[incompatible-call] found when upgrading Flow
+          markTaskCompleted(currentTask, currentTime);
+          // $FlowFixMe[incompatible-use] found when upgrading Flow
+          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 {
+    const firstTimer = peek(timerQueue);
+    if (firstTimer !== null) {
+      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+    }
+    return false;
+  }
+}
+
+function unstable_runWithPriority<T>(
+  priorityLevel: PriorityLevel,
+  eventHandler: () => T,
+): T {
+  switch (priorityLevel) {
+    case ImmediatePriority:
+    case UserBlockingPriority:
+    case NormalPriority:
+    case LowPriority:
+    case IdlePriority:
+      break;
+    default:
+      priorityLevel = NormalPriority;
+  }
+
+  var previousPriorityLevel = currentPriorityLevel;
+  currentPriorityLevel = priorityLevel;
+
+  try {
+    return eventHandler();
+  } finally {
+    currentPriorityLevel = previousPriorityLevel;
+  }
+}
+
+function unstable_next<T>(eventHandler: () => T): T {
+  var priorityLevel: PriorityLevel;
+  switch (currentPriorityLevel) {
+    case ImmediatePriority:
+    case UserBlockingPriority:
+    case NormalPriority:
+      // Shift down to normal priority
+      priorityLevel = NormalPriority;
+      break;
+    default:
+      // Anything lower than normal priority should remain at the current level.
+      priorityLevel = currentPriorityLevel;
+      break;
+  }
+
+  var previousPriorityLevel = currentPriorityLevel;
+  currentPriorityLevel = priorityLevel;
+
+  try {
+    return eventHandler();
+  } finally {
+    currentPriorityLevel = previousPriorityLevel;
+  }
+}
+
+function unstable_wrapCallback<T: (...Array<mixed>) => mixed>(callback: T): T {
+  var parentPriorityLevel = currentPriorityLevel;
+  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[missing-this-annot]
+  return function () {
+    // This is a fork of runWithPriority, inlined for performance.
+    var previousPriorityLevel = currentPriorityLevel;
+    currentPriorityLevel = parentPriorityLevel;
+
+    try {
+      return callback.apply(this, arguments);
+    } finally {
+      currentPriorityLevel = previousPriorityLevel;
+    }
+  };
+}
+
+function unstable_scheduleCallback(
+  priorityLevel: PriorityLevel,
+  callback: Callback,
+  options?: {delay: number},
+): Task {
+  var currentTime = getCurrentTime();
+
+  var startTime;
+  if (typeof options === 'object' && options !== null) {
+    var delay = options.delay;
+    if (typeof delay === 'number' && delay > 0) {
+      startTime = currentTime + delay;
+    } else {
+      startTime = currentTime;
+    }
+  } else {
+    startTime = currentTime;
+  }
+
+  var timeout;
+  switch (priorityLevel) {
+    case ImmediatePriority:
+      timeout = IMMEDIATE_PRIORITY_TIMEOUT;
+      break;
+    case UserBlockingPriority:
+      timeout = USER_BLOCKING_PRIORITY_TIMEOUT;
+      break;
+    case IdlePriority:
+      timeout = IDLE_PRIORITY_TIMEOUT;
+      break;
+    case LowPriority:
+      timeout = LOW_PRIORITY_TIMEOUT;
+      break;
+    case NormalPriority:
+    default:
+      timeout = NORMAL_PRIORITY_TIMEOUT;
+      break;
+  }
+
+  var expirationTime = startTime + timeout;
+
+  var newTask: Task = {
+    id: taskIdCounter++,
+    callback,
+    priorityLevel,
+    startTime,
+    expirationTime,
+    sortIndex: -1,
+  };
+  if (enableProfiling) {
+    newTask.isQueued = false;
+  }
+
+  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;
+      }
+      // 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);
+    }
+  }
+
+  return newTask;
+}
+
+function unstable_cancelCallback(task: Task) {
+  if (enableProfiling) {
+    if (task.isQueued) {
+      const currentTime = getCurrentTime();
+      markTaskCanceled(task, currentTime);
+      task.isQueued = false;
+    }
+  }
+
+  // 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(): PriorityLevel {
+  return currentPriorityLevel;
+}
+
+function requestHostCallback(callback: (boolean, number) => boolean) {
+  scheduledCallback = callback;
+}
+
+function requestHostTimeout(callback: number => void, ms: number) {
+  scheduledTimeout = callback;
+  timeoutTime = currentMockTime + ms;
+}
+
+function cancelHostTimeout(): void {
+  scheduledTimeout = null;
+  timeoutTime = -1;
+}
+
+function shouldYieldToHost(): boolean {
+  if (
+    (expectedNumberOfYields === 0 && yieldedValues === null) ||
+    (expectedNumberOfYields !== -1 &&
+      yieldedValues !== null &&
+      yieldedValues.length >= expectedNumberOfYields) ||
+    (shouldYieldForPaint && needsPaint)
+  ) {
+    // We yielded at least as many values as expected. Stop flushing.
+    didStop = true;
+    return true;
+  }
+  return false;
+}
+
+function getCurrentTime(): number {
+  return currentMockTime;
+}
+
+function forceFrameRate() {
+  // No-op
+}
+
+function reset() {
+  if (isFlushing) {
+    throw new Error('Cannot reset while already flushing work.');
+  }
+  currentMockTime = 0;
+  scheduledCallback = null;
+  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.
+function unstable_flushNumberOfYields(count: number): void {
+  if (isFlushing) {
+    throw new Error('Already flushing work.');
+  }
+  if (scheduledCallback !== null) {
+    const cb = scheduledCallback;
+    expectedNumberOfYields = count;
+    isFlushing = true;
+    try {
+      let hasMoreWork = true;
+      do {
+        hasMoreWork = cb(true, currentMockTime);
+      } while (hasMoreWork && !didStop);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+    } finally {
+      expectedNumberOfYields = -1;
+      didStop = false;
+      isFlushing = false;
+    }
+  }
+}
+
+function unstable_flushUntilNextPaint(): false {
+  if (isFlushing) {
+    throw new Error('Already flushing work.');
+  }
+  if (scheduledCallback !== null) {
+    const cb = scheduledCallback;
+    shouldYieldForPaint = true;
+    needsPaint = false;
+    isFlushing = true;
+    try {
+      let hasMoreWork = true;
+      do {
+        hasMoreWork = cb(true, currentMockTime);
+      } while (hasMoreWork && !didStop);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+    } finally {
+      shouldYieldForPaint = false;
+      didStop = false;
+      isFlushing = false;
+    }
+  }
+  return false;
+}
+
+function unstable_hasPendingWork(): boolean {
+  return scheduledCallback !== null;
+}
+
+function unstable_flushExpired() {
+  if (isFlushing) {
+    throw new Error('Already flushing work.');
+  }
+  if (scheduledCallback !== null) {
+    isFlushing = true;
+    try {
+      const hasMoreWork = scheduledCallback(false, currentMockTime);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+    } finally {
+      isFlushing = false;
+    }
+  }
+}
+
+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, currentMockTime);
+      } while (hasMoreWork);
+      if (!hasMoreWork) {
+        scheduledCallback = null;
+      }
+      return true;
+    } finally {
+      isFlushing = false;
+    }
+  } else {
+    return false;
+  }
+}
+
+function unstable_clearLog(): Array<mixed> {
+  if (yieldedValues === null) {
+    return [];
+  }
+  const values = yieldedValues;
+  yieldedValues = null;
+  return values;
+}
+
+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_flushAllWithoutAsserting();
+  if (yieldedValues !== null) {
+    throw new Error(
+      'While flushing work, something yielded a value. Use an ' +
+        'assertion helper to assert on the log of yielded values, e.g. ' +
+        'expect(Scheduler).toFlushAndYield([...])',
+    );
+  }
+}
+
+function log(value: mixed): void {
+  // eslint-disable-next-line react-internal/no-production-logging
+  if (console.log.name === 'disabledLog' || disableYieldValue) {
+    // If console.log has been patched, we assume we're in render
+    // replaying and we ignore any values yielding in the second pass.
+    return;
+  }
+  if (yieldedValues === null) {
+    yieldedValues = [value];
+  } else {
+    yieldedValues.push(value);
+  }
+}
+
+function unstable_advanceTime(ms: number) {
+  // eslint-disable-next-line react-internal/no-production-logging
+  if (console.log.name === 'disabledLog' || disableYieldValue) {
+    // If console.log has been patched, we assume we're in render
+    // replaying and we ignore any time advancing in the second pass.
+    return;
+  }
+  currentMockTime += ms;
+  if (scheduledTimeout !== null && timeoutTime <= currentMockTime) {
+    scheduledTimeout(currentMockTime);
+    timeoutTime = -1;
+    scheduledTimeout = null;
+  }
+}
+
+function requestPaint() {
+  needsPaint = true;
+}
+
+export {
+  ImmediatePriority as unstable_ImmediatePriority,
+  UserBlockingPriority as unstable_UserBlockingPriority,
+  NormalPriority as unstable_NormalPriority,
+  IdlePriority as unstable_IdlePriority,
+  LowPriority as unstable_LowPriority,
+  unstable_runWithPriority,
+  unstable_next,
+  unstable_scheduleCallback,
+  unstable_cancelCallback,
+  unstable_wrapCallback,
+  unstable_getCurrentPriorityLevel,
+  shouldYieldToHost as unstable_shouldYield,
+  requestPaint as unstable_requestPaint,
+  getCurrentTime as unstable_now,
+  forceFrameRate as unstable_forceFrameRate,
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearLog,
+  unstable_flushUntilNextPaint,
+  unstable_hasPendingWork,
+  unstable_flushAll,
+  log,
+  unstable_advanceTime,
+  reset,
+  setDisableYieldValue as unstable_setDisableYieldValue,
+};
+
+export const unstable_Profiling: {
+  startLoggingProfilingEvents(): void,
+  stopLoggingProfilingEvents(): ArrayBuffer | null,
+} | null = enableProfiling
+  ? {
+      startLoggingProfilingEvents,
+      stopLoggingProfilingEvents,
+    }
+  : null;
diff --git a/packages/scheduler/src/forks/SchedulerNative.js b/packages/scheduler/src/forks/SchedulerNative.js
new file mode 100644
index 00000000000..1acee1f5f49
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerNative.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+import * as Scheduler from './Scheduler';
+import type {Callback, Task} from './Scheduler';
+import type {PriorityLevel} from '../SchedulerPriorities';
+import typeof * as PriorityLevels from '../SchedulerPriorities';
+import typeof * as SchedulerExportsType from './Scheduler';
+import typeof * as SchedulerNativeExportsType from './SchedulerNative';
+
+// This type is supposed to reflect the actual methods and arguments currently supported by the C++ implementation:
+// https://github.com/facebook/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/runtimescheduler/RuntimeSchedulerBinding.cpp
+type NativeSchedulerType = {
+  unstable_ImmediatePriority: PriorityLevels['ImmediatePriority'],
+  unstable_UserBlockingPriority: PriorityLevels['UserBlockingPriority'],
+  unstable_NormalPriority: PriorityLevels['NormalPriority'],
+  unstable_IdlePriority: PriorityLevels['IdlePriority'],
+  unstable_LowPriority: PriorityLevels['LowPriority'],
+  unstable_scheduleCallback: (
+    priorityLevel: PriorityLevel,
+    callback: Callback,
+  ) => Task,
+  unstable_cancelCallback: (task: Task) => void,
+  unstable_getCurrentPriorityLevel: () => PriorityLevel,
+  unstable_shouldYield: () => boolean,
+  unstable_requestPaint: () => void,
+  unstable_now: () => DOMHighResTimeStamp,
+};
+
+declare const nativeRuntimeScheduler: void | NativeSchedulerType;
+
+export const unstable_UserBlockingPriority: PriorityLevels['UserBlockingPriority'] =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_UserBlockingPriority
+    : Scheduler.unstable_UserBlockingPriority;
+
+export const unstable_NormalPriority: PriorityLevels['NormalPriority'] =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_NormalPriority
+    : Scheduler.unstable_NormalPriority;
+
+export const unstable_IdlePriority: PriorityLevels['IdlePriority'] =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_IdlePriority
+    : Scheduler.unstable_IdlePriority;
+
+export const unstable_LowPriority: PriorityLevels['LowPriority'] =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_LowPriority
+    : Scheduler.unstable_LowPriority;
+
+export const unstable_ImmediatePriority: PriorityLevels['ImmediatePriority'] =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_ImmediatePriority
+    : Scheduler.unstable_ImmediatePriority;
+
+export const unstable_scheduleCallback: (
+  priorityLevel: PriorityLevel,
+  callback: Callback,
+) => Task =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_scheduleCallback
+    : Scheduler.unstable_scheduleCallback;
+
+export const unstable_cancelCallback: (task: Task) => void =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_cancelCallback
+    : Scheduler.unstable_cancelCallback;
+
+export const unstable_getCurrentPriorityLevel: () => PriorityLevel =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_getCurrentPriorityLevel
+    : Scheduler.unstable_getCurrentPriorityLevel;
+
+export const unstable_shouldYield: () => boolean =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_shouldYield
+    : Scheduler.unstable_shouldYield;
+
+export const unstable_requestPaint: () => void =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_requestPaint
+    : Scheduler.unstable_requestPaint;
+
+export const unstable_now: () => number | DOMHighResTimeStamp =
+  typeof nativeRuntimeScheduler !== 'undefined'
+    ? nativeRuntimeScheduler.unstable_now
+    : Scheduler.unstable_now;
+
+// These were never implemented on the native scheduler because React never calls them.
+// For consistency, let's disable them altogether and make them throw.
+export const unstable_next: any = throwNotImplemented;
+export const unstable_runWithPriority: any = throwNotImplemented;
+export const unstable_wrapCallback: any = throwNotImplemented;
+export const unstable_forceFrameRate: any = throwNotImplemented;
+export const unstable_Profiling: any = null;
+
+function throwNotImplemented() {
+  throw Error('Not implemented.');
+}
+
+// Flow magic to verify the exports of this file match the original version.
+export type {Callback, Task};
+((((null: any): SchedulerExportsType): SchedulerNativeExportsType): SchedulerExportsType);
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
new file mode 100644
index 00000000000..700ff2e5d2c
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+declare class TaskController {
+  constructor(options?: {priority?: string}): TaskController;
+  signal: mixed;
+  abort(): void;
+}
+
+type PostTaskPriorityLevel = 'user-blocking' | 'user-visible' | 'background';
+
+type CallbackNode = {
+  _controller: TaskController,
+};
+
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from '../SchedulerPriorities';
+
+export {
+  ImmediatePriority as unstable_ImmediatePriority,
+  UserBlockingPriority as unstable_UserBlockingPriority,
+  NormalPriority as unstable_NormalPriority,
+  IdlePriority as unstable_IdlePriority,
+  LowPriority as unstable_LowPriority,
+};
+
+// Capture local references to native APIs, in case a polyfill overrides them.
+const perf = window.performance;
+const setTimeout = window.setTimeout;
+
+// Use experimental Chrome Scheduler postTask API.
+const scheduler = global.scheduler;
+
+const getCurrentTime: () => DOMHighResTimeStamp = perf.now.bind(perf);
+
+export const unstable_now = getCurrentTime;
+
+// 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.
+const yieldInterval = 5;
+let deadline = 0;
+
+let currentPriorityLevel_DEPRECATED: PriorityLevel = NormalPriority;
+
+// Always yield at the end of the frame.
+export function unstable_shouldYield(): boolean {
+  return getCurrentTime() >= deadline;
+}
+
+export function unstable_requestPaint() {
+  // Since we yield every frame regardless, `requestPaint` has no effect.
+}
+
+type SchedulerCallback<T> = (didTimeout_DEPRECATED: boolean) =>
+  | T
+  // May return a continuation
+  | SchedulerCallback<T>;
+
+export function unstable_scheduleCallback<T>(
+  priorityLevel: PriorityLevel,
+  callback: SchedulerCallback<T>,
+  options?: {delay?: number},
+): CallbackNode {
+  let postTaskPriority: PostTaskPriorityLevel;
+  switch (priorityLevel) {
+    case ImmediatePriority:
+    case UserBlockingPriority:
+      postTaskPriority = 'user-blocking';
+      break;
+    case LowPriority:
+    case NormalPriority:
+      postTaskPriority = 'user-visible';
+      break;
+    case IdlePriority:
+      postTaskPriority = 'background';
+      break;
+    default:
+      postTaskPriority = 'user-visible';
+      break;
+  }
+
+  const controller = new TaskController({priority: postTaskPriority});
+  const postTaskOptions = {
+    delay: typeof options === 'object' && options !== null ? options.delay : 0,
+    signal: controller.signal,
+  };
+
+  const node = {
+    _controller: controller,
+  };
+
+  scheduler
+    .postTask(
+      runTask.bind(null, priorityLevel, postTaskPriority, node, callback),
+      postTaskOptions,
+    )
+    .catch(handleAbortError);
+
+  return node;
+}
+
+function runTask<T>(
+  priorityLevel: PriorityLevel,
+  postTaskPriority: PostTaskPriorityLevel,
+  node: CallbackNode,
+  callback: SchedulerCallback<T>,
+) {
+  deadline = getCurrentTime() + yieldInterval;
+  try {
+    currentPriorityLevel_DEPRECATED = priorityLevel;
+    const didTimeout_DEPRECATED = false;
+    const result = callback(didTimeout_DEPRECATED);
+    if (typeof result === 'function') {
+      // Assume this is a continuation
+      const continuation: SchedulerCallback<T> = (result: any);
+      const continuationOptions = {
+        signal: node._controller.signal,
+      };
+
+      const nextTask = runTask.bind(
+        null,
+        priorityLevel,
+        postTaskPriority,
+        node,
+        continuation,
+      );
+
+      if (scheduler.yield !== undefined) {
+        scheduler
+          .yield(continuationOptions)
+          .then(nextTask)
+          .catch(handleAbortError);
+      } else {
+        scheduler
+          .postTask(nextTask, continuationOptions)
+          .catch(handleAbortError);
+      }
+    }
+  } catch (error) {
+    // We're inside a `postTask` promise. If we don't handle this error, then it
+    // will trigger an "Unhandled promise rejection" error. We don't want that,
+    // but we do want the default error reporting behavior that normal
+    // (non-Promise) tasks get for unhandled errors.
+    //
+    // So we'll re-throw the error inside a regular browser task.
+    setTimeout(() => {
+      throw error;
+    });
+  } finally {
+    currentPriorityLevel_DEPRECATED = NormalPriority;
+  }
+}
+
+function handleAbortError(error: any) {
+  // Abort errors are an implementation detail. We don't expose the
+  // TaskController to the user, nor do we expose the promise that is returned
+  // from `postTask`. So we should suppress them, since there's no way for the
+  // user to handle them.
+}
+
+export function unstable_cancelCallback(node: CallbackNode) {
+  const controller = node._controller;
+  controller.abort();
+}
+
+export function unstable_runWithPriority<T>(
+  priorityLevel: PriorityLevel,
+  callback: () => T,
+): T {
+  const previousPriorityLevel = currentPriorityLevel_DEPRECATED;
+  currentPriorityLevel_DEPRECATED = priorityLevel;
+  try {
+    return callback();
+  } finally {
+    currentPriorityLevel_DEPRECATED = previousPriorityLevel;
+  }
+}
+
+export function unstable_getCurrentPriorityLevel(): PriorityLevel {
+  return currentPriorityLevel_DEPRECATED;
+}
+
+export function unstable_next<T>(callback: () => T): T {
+  let priorityLevel: PriorityLevel;
+  switch (currentPriorityLevel_DEPRECATED) {
+    case ImmediatePriority:
+    case UserBlockingPriority:
+    case NormalPriority:
+      // Shift down to normal priority
+      priorityLevel = NormalPriority;
+      break;
+    default:
+      // Anything lower than normal priority should remain at the current level.
+      priorityLevel = currentPriorityLevel_DEPRECATED;
+      break;
+  }
+
+  const previousPriorityLevel = currentPriorityLevel_DEPRECATED;
+  currentPriorityLevel_DEPRECATED = priorityLevel;
+  try {
+    return callback();
+  } finally {
+    currentPriorityLevel_DEPRECATED = previousPriorityLevel;
+  }
+}
+
+export function unstable_wrapCallback<T>(callback: () => T): () => T {
+  const parentPriorityLevel = currentPriorityLevel_DEPRECATED;
+  return () => {
+    const previousPriorityLevel = currentPriorityLevel_DEPRECATED;
+    currentPriorityLevel_DEPRECATED = parentPriorityLevel;
+    try {
+      return callback();
+    } finally {
+      currentPriorityLevel_DEPRECATED = previousPriorityLevel;
+    }
+  };
+}
+
+export function unstable_forceFrameRate() {}
+
+// Currently no profiling build
+export const unstable_Profiling = null;
diff --git a/packages/scheduler/unstable_mock.js b/packages/scheduler/unstable_mock.js
new file mode 100644
index 00000000000..a01dc276ac0
--- /dev/null
+++ b/packages/scheduler/unstable_mock.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/forks/SchedulerMock';
diff --git a/packages/scheduler/unstable_post_task.js b/packages/scheduler/unstable_post_task.js
new file mode 100644
index 00000000000..5a94395b800
--- /dev/null
+++ b/packages/scheduler/unstable_post_task.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export * from './src/forks/SchedulerPostTask';
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
new file mode 100644
index 00000000000..a186d6755d9
--- /dev/null
+++ b/packages/shared/CheckStringCoercion.js
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/*
+ * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+
+// $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible.
+function typeName(value: mixed): string {
+  if (__DEV__) {
+    // toStringTag is needed for namespaced types like Temporal.Instant
+    const hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+    const type =
+      (hasToStringTag && (value: any)[Symbol.toStringTag]) ||
+      (value: any).constructor.name ||
+      'Object';
+    // $FlowFixMe[incompatible-return]
+    return type;
+  }
+}
+
+// $FlowFixMe[incompatible-return] only called in DEV, so void return is not possible.
+function willCoercionThrow(value: mixed): boolean {
+  if (__DEV__) {
+    try {
+      testStringCoercion(value);
+      return false;
+    } catch (e) {
+      return true;
+    }
+  }
+}
+
+/** @noinline */
+function testStringCoercion(value: mixed) {
+  // If you ended up here by following an exception call stack, here's what's
+  // happened: you supplied an object or symbol value to React (as a prop, key,
+  // DOM attribute, CSS property, string ref, etc.) and when React tried to
+  // coerce it to a string using `'' + value`, an exception was thrown.
+  //
+  // The most common types that will cause this exception are `Symbol` instances
+  // and Temporal objects like `Temporal.Instant`. But any object that has a
+  // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+  // exception. (Library authors do this to prevent users from using built-in
+  // numeric operators like `+` or comparison operators like `>=` because custom
+  // methods are needed to perform accurate arithmetic or comparison.)
+  //
+  // To fix the problem, coerce this object or symbol value to a string before
+  // passing it to React. The most reliable way is usually `String(value)`.
+  //
+  // To find which value is throwing, check the browser or debugger console.
+  // Before this exception was thrown, there should be `console.error` output
+  // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+  // problem and how that type was used: key, atrribute, input value prop, etc.
+  // In most cases, this console output also shows the component and its
+  // ancestor components where the exception happened.
+  //
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  return '' + (value: any);
+}
+
+export function checkAttributeStringCoercion(
+  value: mixed,
+  attributeName: string,
+): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` attribute is an unsupported type %s.' +
+          ' This value must be coerced to a string before using it here.',
+        attributeName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkKeyStringCoercion(value: mixed): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided key is an unsupported type %s.' +
+          ' This value must be coerced to a string before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkPropStringCoercion(
+  value: mixed,
+  propName: string,
+): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` prop is an unsupported type %s.' +
+          ' This value must be coerced to a string before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkOptionStringCoercion(
+  value: mixed,
+  propName: string,
+): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` option is an unsupported type %s.' +
+          ' This value must be coerced to a string before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkCSSPropertyStringCoercion(
+  value: mixed,
+  propName: string,
+): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided `%s` CSS property is an unsupported type %s.' +
+          ' This value must be coerced to a string before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkHtmlStringCoercion(value: mixed): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided HTML markup uses a value of unsupported type %s.' +
+          ' This value must be coerced to a string before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkFormFieldValueStringCoercion(value: mixed): void | string {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not %s.' +
+          ' This value must be coerced to a string before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
diff --git a/packages/shared/ConsolePatchingDev.js b/packages/shared/ConsolePatchingDev.js
new file mode 100644
index 00000000000..fe08bb7129f
--- /dev/null
+++ b/packages/shared/ConsolePatchingDev.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Helpers to patch console.logs to avoid logging during side-effect free
+// replaying on render function. This currently only patches the object
+// lazily which won't cover if the log function was extracted eagerly.
+// We could also eagerly patch the method.
+
+let disabledDepth = 0;
+let prevLog;
+let prevInfo;
+let prevWarn;
+let prevError;
+let prevGroup;
+let prevGroupCollapsed;
+let prevGroupEnd;
+
+function disabledLog() {}
+disabledLog.__reactDisabledLog = true;
+
+export function disableLogs(): void {
+  if (__DEV__) {
+    if (disabledDepth === 0) {
+      /* eslint-disable react-internal/no-production-logging */
+      prevLog = console.log;
+      prevInfo = console.info;
+      prevWarn = console.warn;
+      prevError = console.error;
+      prevGroup = console.group;
+      prevGroupCollapsed = console.groupCollapsed;
+      prevGroupEnd = console.groupEnd;
+      // https://github.com/facebook/react/issues/19099
+      const props = {
+        configurable: true,
+        enumerable: true,
+        value: disabledLog,
+        writable: true,
+      };
+      // $FlowFixMe[cannot-write] Flow thinks console is immutable.
+      Object.defineProperties(console, {
+        info: props,
+        log: props,
+        warn: props,
+        error: props,
+        group: props,
+        groupCollapsed: props,
+        groupEnd: props,
+      });
+    }
+    disabledDepth++;
+  }
+}
+
+export function reenableLogs(): void {
+  if (__DEV__) {
+    disabledDepth--;
+    if (disabledDepth === 0) {
+      const props = {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+      };
+      // $FlowFixMe[cannot-write] Flow thinks console is immutable.
+      Object.defineProperties(console, {
+        log: {...props, value: prevLog},
+        info: {...props, value: prevInfo},
+        warn: {...props, value: prevWarn},
+        error: {...props, value: prevError},
+        group: {...props, value: prevGroup},
+        groupCollapsed: {...props, value: prevGroupCollapsed},
+        groupEnd: {...props, value: prevGroupEnd},
+      });
+    }
+    if (disabledDepth < 0) {
+      console.error(
+        'disabledDepth fell below zero. ' +
+          'This is a bug in React. Please file an issue.',
+      );
+    }
+  }
+}
diff --git a/packages/shared/DefaultPrepareStackTrace.js b/packages/shared/DefaultPrepareStackTrace.js
new file mode 100644
index 00000000000..5e0e3dc0da9
--- /dev/null
+++ b/packages/shared/DefaultPrepareStackTrace.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 forked in server builds where the default stack frame may be source mapped.
+
+export default ((undefined: any): (Error, CallSite[]) => string);
diff --git a/packages/shared/DefaultPrepareStackTraceV8.js b/packages/shared/DefaultPrepareStackTraceV8.js
new file mode 100644
index 00000000000..200c64b69d6
--- /dev/null
+++ b/packages/shared/DefaultPrepareStackTraceV8.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 replaces DefaultPrepareStackTrace in Edge/Node Server builds.
+
+function prepareStackTrace(
+  error: Error,
+  structuredStackTrace: CallSite[],
+): string {
+  const name = error.name || 'Error';
+  const message = error.message || '';
+  let stack = name + ': ' + message;
+  for (let i = 0; i < structuredStackTrace.length; i++) {
+    stack += '\n    at ' + structuredStackTrace[i].toString();
+  }
+  return stack;
+}
+
+export default prepareStackTrace;
diff --git a/packages/shared/ExecutionEnvironment.js b/packages/shared/ExecutionEnvironment.js
new file mode 100644
index 00000000000..d3a8d38712c
--- /dev/null
+++ b/packages/shared/ExecutionEnvironment.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 canUseDOM: boolean = !!(
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+);
diff --git a/packages/shared/ReactComponentInfoStack.js b/packages/shared/ReactComponentInfoStack.js
new file mode 100644
index 00000000000..efc3f6b39de
--- /dev/null
+++ b/packages/shared/ReactComponentInfoStack.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactComponentInfo} from 'shared/ReactTypes';
+
+import {describeBuiltInComponentFrame} from 'shared/ReactComponentStackFrame';
+
+import {formatOwnerStack} from 'shared/ReactOwnerStackFrames';
+
+export function getOwnerStackByComponentInfoInDev(
+  componentInfo: ReactComponentInfo,
+): string {
+  if (!__DEV__) {
+    return '';
+  }
+  try {
+    let info = '';
+
+    // The owner stack of the current component will be where it was created, i.e. inside its owner.
+    // There's no actual name of the currently executing component. Instead, that is available
+    // on the regular stack that's currently executing. However, if there is no owner at all, then
+    // there's no stack frame so we add the name of the root component to the stack to know which
+    // component is currently executing.
+    if (!componentInfo.owner && typeof componentInfo.name === 'string') {
+      return describeBuiltInComponentFrame(componentInfo.name);
+    }
+
+    let owner: void | null | ReactComponentInfo = componentInfo;
+
+    while (owner) {
+      const ownerStack: ?Error = owner.debugStack;
+      if (ownerStack != null) {
+        // Server Component
+        owner = owner.owner;
+        if (owner) {
+          // TODO: Should we stash this somewhere for caching purposes?
+          info += '\n' + formatOwnerStack(ownerStack);
+        }
+      } else {
+        break;
+      }
+    }
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
new file mode 100644
index 00000000000..1951ab07c7d
--- /dev/null
+++ b/packages/shared/ReactComponentStackFrame.js
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+import DefaultPrepareStackTrace from 'shared/DefaultPrepareStackTrace';
+
+import {formatOwnerStack} from './ReactOwnerStackFrames';
+
+let prefix;
+let suffix;
+export function describeBuiltInComponentFrame(name: string): string {
+  if (prefix === undefined) {
+    // Extract the VM specific prefix used by each line.
+    try {
+      throw Error();
+    } catch (x) {
+      const match = x.stack.trim().match(/\n( *(at )?)/);
+      prefix = (match && match[1]) || '';
+      suffix =
+        x.stack.indexOf('\n    at') > -1
+          ? // V8
+            ' (<anonymous>)'
+          : // JSC/Spidermonkey
+            x.stack.indexOf('@') > -1
+            ? '@unknown:0:0'
+            : // Other
+              '';
+    }
+  }
+  // We use the prefix to ensure our stacks line up with native stack frames.
+  return '\n' + prefix + name + suffix;
+}
+
+export function describeDebugInfoFrame(
+  name: string,
+  env: ?string,
+  location: ?Error,
+): string {
+  if (location != null) {
+    // If we have a location, it's the child's owner stack. Treat the bottom most frame as
+    // the location of this function.
+    const childStack = formatOwnerStack(location);
+    const idx = childStack.lastIndexOf('\n');
+    const lastLine = idx === -1 ? childStack : childStack.slice(idx + 1);
+    if (lastLine.indexOf(name) !== -1) {
+      // For async stacks it's possible we don't have the owner on it. As a precaution only
+      // use this frame if it has the name of the function in it.
+      return '\n' + lastLine;
+    }
+  }
+
+  return describeBuiltInComponentFrame(name + (env ? ' [' + env + ']' : ''));
+}
+
+let reentry = false;
+let componentFrameCache;
+if (__DEV__) {
+  const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+  componentFrameCache = new PossiblyWeakMap<Function, string>();
+}
+
+/**
+ * Leverages native browser/VM stack frames to get proper details (e.g.
+ * filename, line + col number) for a single component in a component stack. We
+ * do this by:
+ *   (1) throwing and catching an error in the function - this will be our
+ *       control error.
+ *   (2) calling the component which will eventually throw an error that we'll
+ *       catch - this will be our sample error.
+ *   (3) diffing the control and sample error stacks to find the stack frame
+ *       which represents our component.
+ */
+export function describeNativeComponentFrame(
+  fn: Function,
+  construct: boolean,
+): string {
+  // If something asked for a stack inside a fake render, it should get ignored.
+  if (!fn || reentry) {
+    return '';
+  }
+
+  if (__DEV__) {
+    const frame = componentFrameCache.get(fn);
+    if (frame !== undefined) {
+      return frame;
+    }
+  }
+
+  reentry = true;
+  const previousPrepareStackTrace = Error.prepareStackTrace;
+  Error.prepareStackTrace = DefaultPrepareStackTrace;
+  let previousDispatcher = null;
+
+  if (__DEV__) {
+    previousDispatcher = ReactSharedInternals.H;
+    // Set the dispatcher in DEV because this might be call in the render function
+    // for warnings.
+    ReactSharedInternals.H = null;
+    disableLogs();
+  }
+  try {
+    /**
+     * Finding a common stack frame between sample and control errors can be
+     * tricky given the different types and levels of stack trace truncation from
+     * different JS VMs. So instead we'll attempt to control what that common
+     * frame should be through this object method:
+     * Having both the sample and control errors be in the function under the
+     * `DescribeNativeComponentFrameRoot` property, + setting the `name` and
+     * `displayName` properties of the function ensures that a stack
+     * frame exists that has the method name `DescribeNativeComponentFrameRoot` in
+     * it for both control and sample stacks.
+     */
+    const RunInRootFrame = {
+      DetermineComponentFrameRoot(): [?string, ?string] {
+        let control;
+        try {
+          // This should throw.
+          if (construct) {
+            // Something should be setting the props in the constructor.
+            const Fake = function () {
+              throw Error();
+            };
+            // $FlowFixMe[prop-missing]
+            Object.defineProperty(Fake.prototype, 'props', {
+              set: function () {
+                // We use a throwing setter instead of frozen or non-writable props
+                // because that won't throw in a non-strict mode function.
+                throw Error();
+              },
+            });
+            if (typeof Reflect === 'object' && Reflect.construct) {
+              // We construct a different control for this case to include any extra
+              // frames added by the construct call.
+              try {
+                Reflect.construct(Fake, []);
+              } catch (x) {
+                control = x;
+              }
+              Reflect.construct(fn, [], Fake);
+            } else {
+              try {
+                Fake.call();
+              } catch (x) {
+                control = x;
+              }
+              // $FlowFixMe[prop-missing] found when upgrading Flow
+              fn.call(Fake.prototype);
+            }
+          } else {
+            try {
+              throw Error();
+            } catch (x) {
+              control = x;
+            }
+            // TODO(luna): This will currently only throw if the function component
+            // tries to access React/ReactDOM/props. We should probably make this throw
+            // in simple components too
+            const maybePromise = fn();
+
+            // If the function component returns a promise, it's likely an async
+            // component, which we don't yet support. Attach a noop catch handler to
+            // silence the error.
+            // TODO: Implement component stacks for async client components?
+            if (maybePromise && typeof maybePromise.catch === 'function') {
+              maybePromise.catch(() => {});
+            }
+          }
+        } catch (sample) {
+          // This is inlined manually because closure doesn't do it for us.
+          if (sample && control && typeof sample.stack === 'string') {
+            return [sample.stack, control.stack];
+          }
+        }
+        return [null, null];
+      },
+    };
+    // $FlowFixMe[prop-missing]
+    RunInRootFrame.DetermineComponentFrameRoot.displayName =
+      'DetermineComponentFrameRoot';
+    const namePropDescriptor = Object.getOwnPropertyDescriptor(
+      RunInRootFrame.DetermineComponentFrameRoot,
+      'name',
+    );
+    // Before ES6, the `name` property was not configurable.
+    if (namePropDescriptor && namePropDescriptor.configurable) {
+      // V8 utilizes a function's `name` property when generating a stack trace.
+      Object.defineProperty(
+        RunInRootFrame.DetermineComponentFrameRoot,
+        // Configurable properties can be updated even if its writable descriptor
+        // is set to `false`.
+        // $FlowFixMe[cannot-write]
+        'name',
+        {value: 'DetermineComponentFrameRoot'},
+      );
+    }
+
+    const [sampleStack, controlStack] =
+      RunInRootFrame.DetermineComponentFrameRoot();
+    if (sampleStack && controlStack) {
+      // This extracts the first frame from the sample that isn't also in the control.
+      // Skipping one frame that we assume is the frame that calls the two.
+      const sampleLines = sampleStack.split('\n');
+      const controlLines = controlStack.split('\n');
+      let s = 0;
+      let c = 0;
+      while (
+        s < sampleLines.length &&
+        !sampleLines[s].includes('DetermineComponentFrameRoot')
+      ) {
+        s++;
+      }
+      while (
+        c < controlLines.length &&
+        !controlLines[c].includes('DetermineComponentFrameRoot')
+      ) {
+        c++;
+      }
+      // We couldn't find our intentionally injected common root frame, attempt
+      // to find another common root frame by search from the bottom of the
+      // control stack...
+      if (s === sampleLines.length || c === controlLines.length) {
+        s = sampleLines.length - 1;
+        c = controlLines.length - 1;
+        while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+          // We expect at least one stack frame to be shared.
+          // Typically this will be the root most one. However, stack frames may be
+          // cut off due to maximum stack limits. In this case, one maybe cut off
+          // earlier than the other. We assume that the sample is longer or the same
+          // and there for cut off earlier. So we should find the root most frame in
+          // the sample somewhere in the control.
+          c--;
+        }
+      }
+      for (; s >= 1 && c >= 0; s--, c--) {
+        // Next we find the first one that isn't the same which should be the
+        // frame that called our sample function and the control.
+        if (sampleLines[s] !== controlLines[c]) {
+          // In V8, the first line is describing the message but other VMs don't.
+          // If we're about to return the first line, and the control is also on the same
+          // line, that's a pretty good indicator that our sample threw at same line as
+          // the control. I.e. before we entered the sample frame. So we ignore this result.
+          // This can happen if you passed a class to function component, or non-function.
+          if (s !== 1 || c !== 1) {
+            do {
+              s--;
+              c--;
+              // We may still have similar intermediate frames from the construct call.
+              // The next one that isn't the same should be our match though.
+              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+                let frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+
+                // If our component frame is labeled "<anonymous>"
+                // but we have a user-provided "displayName"
+                // splice it in to make the stack more readable.
+                if (fn.displayName && frame.includes('<anonymous>')) {
+                  frame = frame.replace('<anonymous>', fn.displayName);
+                }
+
+                if (__DEV__) {
+                  if (typeof fn === 'function') {
+                    componentFrameCache.set(fn, frame);
+                  }
+                }
+                // Return the line we found.
+                return frame;
+              }
+            } while (s >= 1 && c >= 0);
+          }
+          break;
+        }
+      }
+    }
+  } finally {
+    reentry = false;
+    if (__DEV__) {
+      ReactSharedInternals.H = previousDispatcher;
+      reenableLogs();
+    }
+    Error.prepareStackTrace = previousPrepareStackTrace;
+  }
+  // Fallback to just using the name if we couldn't make it throw.
+  const name = fn ? fn.displayName || fn.name : '';
+  const syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+  if (__DEV__) {
+    if (typeof fn === 'function') {
+      componentFrameCache.set(fn, syntheticFrame);
+    }
+  }
+  return syntheticFrame;
+}
+
+export function describeClassComponentFrame(ctor: Function): string {
+  return describeNativeComponentFrame(ctor, true);
+}
+
+export function describeFunctionComponentFrame(fn: Function): string {
+  return describeNativeComponentFrame(fn, false);
+}
diff --git a/packages/shared/ReactDOMFragmentRefShared.js b/packages/shared/ReactDOMFragmentRefShared.js
new file mode 100644
index 00000000000..c46d67d4114
--- /dev/null
+++ b/packages/shared/ReactDOMFragmentRefShared.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Shared logic for Fragment Ref operations for DOM and Fabric configs
+ *
+ * @flow
+ */
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+import {getNextSiblingHostFiber} from 'react-reconciler/src/ReactFiberTreeReflection';
+
+export function compareDocumentPositionForEmptyFragment<TPublicInstance>(
+  fragmentFiber: Fiber,
+  parentHostInstance: TPublicInstance,
+  otherNode: TPublicInstance,
+  getPublicInstance: (fiber: Fiber) => TPublicInstance,
+): number {
+  let result;
+  // If the fragment has no children, we can use the parent and
+  // siblings to determine a position.
+  // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
+  // $FlowFixMe[prop-missing]
+  const parentResult = parentHostInstance.compareDocumentPosition(otherNode);
+  result = parentResult;
+  if (parentHostInstance === otherNode) {
+    result = Node.DOCUMENT_POSITION_CONTAINS;
+  } else {
+    if (parentResult & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+      // otherNode is one of the fragment's siblings. Use the next
+      // sibling to determine if its preceding or following.
+      const nextSiblingFiber = getNextSiblingHostFiber(fragmentFiber);
+      if (nextSiblingFiber === null) {
+        result = Node.DOCUMENT_POSITION_PRECEDING;
+      } else {
+        const nextSiblingInstance = getPublicInstance(nextSiblingFiber);
+        const nextSiblingResult =
+          // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
+          // $FlowFixMe[prop-missing]
+          nextSiblingInstance.compareDocumentPosition(otherNode);
+        if (
+          nextSiblingResult === 0 ||
+          nextSiblingResult & Node.DOCUMENT_POSITION_FOLLOWING
+        ) {
+          result = Node.DOCUMENT_POSITION_FOLLOWING;
+        } else {
+          result = Node.DOCUMENT_POSITION_PRECEDING;
+        }
+      }
+    }
+  }
+
+  result |= Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC;
+  return result;
+}
diff --git a/packages/shared/ReactDOMSharedInternals.js b/packages/shared/ReactDOMSharedInternals.js
new file mode 100644
index 00000000000..515628acafe
--- /dev/null
+++ b/packages/shared/ReactDOMSharedInternals.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as ReactDOM from 'react-dom';
+
+const ReactDOMSharedInternals =
+  ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+export default ReactDOMSharedInternals;
diff --git a/packages/shared/ReactElementType.js b/packages/shared/ReactElementType.js
new file mode 100644
index 00000000000..6860932176e
--- /dev/null
+++ b/packages/shared/ReactElementType.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactDebugInfo} from './ReactTypes';
+
+export type ReactElement = {
+  $$typeof: any,
+  type: any,
+  key: any,
+  ref: any,
+  props: any,
+  // __DEV__ or for string refs
+  _owner: any,
+
+  // __DEV__
+  _store: {validated: 0 | 1 | 2, ...}, // 0: not validated, 1: validated, 2: force fail
+  _debugInfo: null | ReactDebugInfo,
+  _debugStack: Error,
+  _debugTask: null | ConsoleTask,
+};
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
new file mode 100644
index 00000000000..6542fc9da6a
--- /dev/null
+++ b/packages/shared/ReactFeatureFlags.js
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// -----------------------------------------------------------------------------
+// Land or remove (zero effort)
+//
+// Flags that can likely be deleted or landed without consequences
+// -----------------------------------------------------------------------------
+
+// None
+
+// -----------------------------------------------------------------------------
+// Killswitch
+//
+// Flags that exist solely to turn off a change in case it causes a regression
+// when it rolls out to prod. We should remove these as soon as possible.
+// -----------------------------------------------------------------------------
+
+// -----------------------------------------------------------------------------
+// Land or remove (moderate effort)
+//
+// Flags that can be probably deleted or landed, but might require extra effort
+// like migrating internal callers or performance testing.
+// -----------------------------------------------------------------------------
+
+// Need to remove didTimeout argument from Scheduler before landing
+export const disableSchedulerTimeoutInWorkLoop: boolean = false;
+
+// -----------------------------------------------------------------------------
+// Slated for removal in the future (significant effort)
+//
+// These are experiments that didn't work out, and never shipped, but we can't
+// delete from the codebase until we migrate internal callers.
+// -----------------------------------------------------------------------------
+
+// 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.
+//
+// This will eventually be replaced by the Transition Tracing proposal.
+export const enableSuspenseCallback: boolean = false;
+
+// Experimental Scope support.
+export const enableScopeAPI: boolean = false;
+
+// Experimental Create Event Handle API.
+export const enableCreateEventHandleAPI: boolean = false;
+
+// Support legacy Primer support on internal FB www
+export const enableLegacyFBSupport: boolean = false;
+
+// -----------------------------------------------------------------------------
+// Ongoing experiments
+//
+// These are features that we're either actively exploring or are reasonably
+// likely to include in an upcoming release.
+// -----------------------------------------------------------------------------
+
+// Yield to the browser event loop and not just the scheduler event loop before passive effects.
+// Fix gated tests that fail with this flag enabled before turning it back on.
+export const enableYieldingBeforePassive: boolean = false;
+
+// Experiment to intentionally yield less to block high framerate animations.
+export const enableThrottledScheduling: boolean = false;
+
+export const enableLegacyCache = __EXPERIMENTAL__;
+
+export const enableAsyncIterableChildren = __EXPERIMENTAL__;
+
+export const enableTaint = __EXPERIMENTAL__;
+
+export const enableHalt: boolean = true;
+
+export const enableViewTransition: boolean = true;
+
+export const enableGestureTransition = __EXPERIMENTAL__;
+
+export const enableScrollEndPolyfill = __EXPERIMENTAL__;
+
+export const enableSuspenseyImages: boolean = false;
+
+export const enableFizzBlockingRender = __EXPERIMENTAL__; // rel="expect"
+
+export const enableSrcObject = __EXPERIMENTAL__;
+
+export const enableHydrationChangeEvent = __EXPERIMENTAL__;
+
+export const enableDefaultTransitionIndicator = __EXPERIMENTAL__;
+
+export const enableOptimisticKey = __EXPERIMENTAL__;
+
+/**
+ * Switches Fiber creation to a simple object instead of a constructor.
+ */
+export const enableObjectFiber: boolean = false;
+
+export const enableTransitionTracing: boolean = false;
+
+// FB-only usage. The new API has different semantics.
+export const enableLegacyHidden: boolean = false;
+
+// Enables unstable_avoidThisFallback feature in Fiber
+export const enableSuspenseAvoidThisFallback: boolean = false;
+
+export const enableCPUSuspense = __EXPERIMENTAL__;
+
+// Test this at Meta before enabling.
+export const enableNoCloningMemoCache: boolean = false;
+
+// Test in www before enabling in open source.
+// Enables DOM-server to stream its instruction set as data-attributes
+// (handled with an MutationObserver) instead of inline-scripts
+export const enableFizzExternalRuntime = __EXPERIMENTAL__;
+
+export const alwaysThrottleRetries: boolean = true;
+
+export const passChildrenWhenCloningPersistedNodes: boolean = false;
+
+export const enableEagerAlternateStateNodeCleanup: boolean = true;
+
+/**
+ * Enables an expiration time for retry lanes to avoid starvation.
+ */
+export const enableRetryLaneExpiration: boolean = false;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+
+/**
+ * Enables a new error detection for infinite render loops from updates caused
+ * by setState or similar outside of the component owning the state.
+ */
+export const enableInfiniteRenderLoopDetection: boolean = false;
+
+export const enableFragmentRefs: boolean = true;
+export const enableFragmentRefsScrollIntoView: boolean = true;
+export const enableFragmentRefsInstanceHandles: boolean = false;
+
+export const enableInternalInstanceMap: boolean = false;
+
+// -----------------------------------------------------------------------------
+// Ready for next major.
+//
+// Alias __NEXT_MAJOR__ to __EXPERIMENTAL__ for easier skimming.
+// -----------------------------------------------------------------------------
+
+// TODO: Anything that's set to `true` in this section should either be cleaned
+// up (if it's on everywhere, including Meta and RN builds) or moved to a
+// different section of this file.
+
+// const __NEXT_MAJOR__ = __EXPERIMENTAL__;
+
+/**
+ * Enables a fix to run insertion effect cleanup on hidden subtrees.
+ */
+export const enableHiddenSubtreeInsertionEffectCleanup: boolean = true;
+
+/**
+ * Removes legacy style context defined using static `contextTypes` and consumed with static `childContextTypes`.
+ */
+export const disableLegacyContext: boolean = true;
+/**
+ * Removes legacy style context just from function components.
+ */
+export const disableLegacyContextForFunctionComponents: boolean = true;
+
+// Enable the moveBefore() alternative to insertBefore(). This preserves states of moves.
+export const enableMoveBefore: boolean = false;
+
+// Disabled caching behavior of `react/cache` in client runtimes.
+export const disableClientCache: boolean = true;
+
+// Warn on any usage of ReactTestRenderer
+export const enableReactTestRendererWarning: boolean = true;
+
+// Disables legacy mode
+// This allows us to land breaking changes to remove legacy mode APIs in experimental builds
+// before removing them in stable in the next Major
+export const disableLegacyMode: boolean = true;
+
+// -----------------------------------------------------------------------------
+// Chopping Block
+//
+// Planned feature deprecations and breaking changes. Sorted roughly in order of
+// when we plan to enable them.
+// -----------------------------------------------------------------------------
+
+// -----------------------------------------------------------------------------
+// React DOM Chopping Block
+//
+// Similar to main Chopping Block but only flags related to React DOM. These are
+// grouped because we will likely batch all of them into a single major release.
+// -----------------------------------------------------------------------------
+
+// Disable support for comment nodes as React DOM containers. Already disabled
+// in open source, but www codebase still relies on it. Need to remove.
+export const disableCommentsAsDOMContainers: boolean = true;
+
+export const enableTrustedTypesIntegration: boolean = false;
+
+// Prevent the value and checked attributes from syncing with their related
+// DOM properties
+export const disableInputAttributeSyncing: boolean = false;
+
+// Disables children for <textarea> elements
+export const disableTextareaChildren: boolean = false;
+
+// -----------------------------------------------------------------------------
+// Debugging and DevTools
+// -----------------------------------------------------------------------------
+
+// Gather advanced timing metrics for Profiler subtrees.
+export const enableProfilerTimer = __PROFILE__;
+
+// Adds performance.measure() marks using Chrome extensions to allow formatted
+// Component rendering tracks to show up in the Performance tab.
+// This flag will be used for both Server Component and Client Component tracks.
+// All calls should also be gated on enableProfilerTimer.
+export const enableComponentPerformanceTrack: boolean = true;
+
+// Enables annotating of React performance track events with `performanceIssue`
+// metadata, to more prominently highlight performance issues to users
+// (initially, an experimental feature in React Native).
+export const enablePerformanceIssueReporting: boolean = false;
+
+// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
+// for an experimental timeline tool.
+export const enableSchedulingProfiler: boolean =
+  !enableComponentPerformanceTrack && __PROFILE__;
+
+// Record durations for commit and passive effects phases.
+export const enableProfilerCommitHooks = __PROFILE__;
+
+// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
+
+export const enableAsyncDebugInfo: boolean = true;
+
+// Track which Fiber(s) schedule render work.
+export const enableUpdaterTracking = __PROFILE__;
+
+export const ownerStackLimit = 1e4;
diff --git a/packages/shared/ReactFlightPropertyAccess.js b/packages/shared/ReactFlightPropertyAccess.js
new file mode 100644
index 00000000000..16f8e8cbfca
--- /dev/null
+++ b/packages/shared/ReactFlightPropertyAccess.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 OMITTED_PROP_ERROR =
+  'This object has been omitted by React in the console log ' +
+  'to avoid sending too much data from the server. Try logging smaller ' +
+  'or more specific objects.';
diff --git a/packages/shared/ReactIODescription.js b/packages/shared/ReactIODescription.js
new file mode 100644
index 00000000000..6d7bf648fc8
--- /dev/null
+++ b/packages/shared/ReactIODescription.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 getIODescription(value: mixed): string {
+  if (!__DEV__) {
+    return '';
+  }
+  try {
+    switch (typeof value) {
+      case 'function':
+        return value.name || '';
+      case 'object':
+        // Test the object for a bunch of common property names that are useful identifiers.
+        // While we only have the return value here, it should ideally be a name that
+        // describes the arguments requested.
+        if (value === null) {
+          return '';
+        } else if (value instanceof Error) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          return String(value.message);
+        } else if (typeof value.url === 'string') {
+          return value.url;
+        } else if (typeof value.href === 'string') {
+          return value.href;
+        } else if (typeof value.src === 'string') {
+          return value.src;
+        } else if (typeof value.currentSrc === 'string') {
+          return value.currentSrc;
+        } else if (typeof value.command === 'string') {
+          return value.command;
+        } else if (
+          typeof value.request === 'object' &&
+          value.request !== null &&
+          typeof value.request.url === 'string'
+        ) {
+          return value.request.url;
+        } else if (
+          typeof value.response === 'object' &&
+          value.response !== null &&
+          typeof value.response.url === 'string'
+        ) {
+          return value.response.url;
+        } else if (
+          typeof value.id === 'string' ||
+          typeof value.id === 'number' ||
+          typeof value.id === 'bigint'
+        ) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          return String(value.id);
+        } else if (typeof value.name === 'string') {
+          return value.name;
+        } else {
+          const str = value.toString();
+          if (
+            str.startsWith('[object ') ||
+            str.length < 5 ||
+            str.length > 500
+          ) {
+            // This is probably not a useful description.
+            return '';
+          }
+          return str;
+        }
+      case 'string':
+        if (value.length < 5 || value.length > 500) {
+          return '';
+        }
+        return value;
+      case 'number':
+      case 'bigint':
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        return String(value);
+      default:
+        // Not useful descriptors.
+        return '';
+    }
+  } catch (x) {
+    return '';
+  }
+}
diff --git a/packages/shared/ReactInstanceMap.js b/packages/shared/ReactInstanceMap.js
new file mode 100644
index 00000000000..2ad235c7a5f
--- /dev/null
+++ b/packages/shared/ReactInstanceMap.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * `ReactInstanceMap` maintains a mapping from a public facing stateful
+ * instance (key) and the internal representation (value). This allows public
+ * methods to accept the user facing instance as an argument and map them back
+ * to internal methods.
+ *
+ * Note that this module is currently shared and assumed to be stateless.
+ * If this becomes an actual Map, that will break.
+ */
+
+export function get(key) {
+  return key._reactInternals;
+}
+
+export function set(key, value) {
+  key._reactInternals = value;
+}
diff --git a/packages/shared/ReactOwnerStackFrames.js b/packages/shared/ReactOwnerStackFrames.js
new file mode 100644
index 00000000000..b7a883636f6
--- /dev/null
+++ b/packages/shared/ReactOwnerStackFrames.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 DefaultPrepareStackTrace from 'shared/DefaultPrepareStackTrace';
+
+export function formatOwnerStack(error: Error): string {
+  const prevPrepareStackTrace = Error.prepareStackTrace;
+  Error.prepareStackTrace = DefaultPrepareStackTrace;
+  let stack = error.stack;
+  Error.prepareStackTrace = prevPrepareStackTrace;
+  if (stack.startsWith('Error: react-stack-top-frame\n')) {
+    // V8's default formatting prefixes with the error message which we
+    // don't want/need.
+    stack = stack.slice(29);
+  }
+  let idx = stack.indexOf('\n');
+  if (idx !== -1) {
+    // Pop the JSX frame.
+    stack = stack.slice(idx + 1);
+  }
+  idx = stack.indexOf('react_stack_bottom_frame');
+  if (idx !== -1) {
+    idx = stack.lastIndexOf('\n', idx);
+  }
+  if (idx !== -1) {
+    // Cut off everything after the bottom frame since it'll be internals.
+    stack = stack.slice(0, idx);
+  } else {
+    // We didn't find any internal callsite out to user space.
+    // This means that this was called outside an owner or the owner is fully internal.
+    // To keep things light we exclude the entire trace in this case.
+    return '';
+  }
+  return stack;
+}
diff --git a/packages/shared/ReactOwnerStackReset.js b/packages/shared/ReactOwnerStackReset.js
new file mode 100644
index 00000000000..e7922adb3a4
--- /dev/null
+++ b/packages/shared/ReactOwnerStackReset.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactSharedInternals from 'shared/ReactSharedInternals';
+
+let lastResetTime = 0;
+
+let getCurrentTime: () => number | DOMHighResTimeStamp;
+const hasPerformanceNow =
+  // $FlowFixMe[method-unbinding]
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+if (hasPerformanceNow) {
+  const localPerformance = performance;
+  getCurrentTime = () => localPerformance.now();
+} else {
+  const localDate = Date;
+  getCurrentTime = () => localDate.now();
+}
+
+export function resetOwnerStackLimit() {
+  if (__DEV__) {
+    const now = getCurrentTime();
+    const timeSinceLastReset = now - lastResetTime;
+    if (timeSinceLastReset > 1000) {
+      ReactSharedInternals.recentlyCreatedOwnerStacks = 0;
+      lastResetTime = now;
+    }
+  } else {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resetOwnerStackLimit should never be called in production mode. This is a bug in React.',
+    );
+  }
+}
diff --git a/packages/shared/ReactPerformanceTrackProperties.js b/packages/shared/ReactPerformanceTrackProperties.js
new file mode 100644
index 00000000000..87231c20c49
--- /dev/null
+++ b/packages/shared/ReactPerformanceTrackProperties.js
@@ -0,0 +1,438 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {OMITTED_PROP_ERROR} from 'shared/ReactFlightPropertyAccess';
+
+import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
+import {REACT_ELEMENT_TYPE} from './ReactSymbols';
+import getComponentNameFromType from './getComponentNameFromType';
+
+const EMPTY_ARRAY = 0;
+const COMPLEX_ARRAY = 1;
+const PRIMITIVE_ARRAY = 2; // Primitive values only
+const ENTRIES_ARRAY = 3; // Tuple arrays of string and value (like Headers, Map, etc)
+
+// Showing wider objects in the devtools is not useful.
+const OBJECT_WIDTH_LIMIT = 100;
+
+function getArrayKind(array: Object): 0 | 1 | 2 | 3 {
+  let kind: 0 | 1 | 2 | 3 = EMPTY_ARRAY;
+  for (let i = 0; i < array.length && i < OBJECT_WIDTH_LIMIT; i++) {
+    const value = array[i];
+    if (typeof value === 'object' && value !== null) {
+      if (
+        isArray(value) &&
+        value.length === 2 &&
+        typeof value[0] === 'string'
+      ) {
+        // Key value tuple
+        if (kind !== EMPTY_ARRAY && kind !== ENTRIES_ARRAY) {
+          return COMPLEX_ARRAY;
+        }
+        kind = ENTRIES_ARRAY;
+      } else {
+        return COMPLEX_ARRAY;
+      }
+    } else if (typeof value === 'function') {
+      return COMPLEX_ARRAY;
+    } else if (typeof value === 'string' && value.length > 50) {
+      return COMPLEX_ARRAY;
+    } else if (kind !== EMPTY_ARRAY && kind !== PRIMITIVE_ARRAY) {
+      return COMPLEX_ARRAY;
+    } else {
+      kind = PRIMITIVE_ARRAY;
+    }
+  }
+  return kind;
+}
+
+export function addObjectToProperties(
+  object: Object,
+  properties: Array<[string, string]>,
+  indent: number,
+  prefix: string,
+): void {
+  let addedProperties = 0;
+  for (const key in object) {
+    if (hasOwnProperty.call(object, key) && key[0] !== '_') {
+      addedProperties++;
+      const value = object[key];
+      addValueToProperties(key, value, properties, indent, prefix);
+      if (addedProperties >= OBJECT_WIDTH_LIMIT) {
+        properties.push([
+          prefix +
+            '\xa0\xa0'.repeat(indent) +
+            'Only ' +
+            OBJECT_WIDTH_LIMIT +
+            ' properties are shown. React will not log more properties of this object.',
+          '',
+        ]);
+        break;
+      }
+    }
+  }
+}
+
+export function addValueToProperties(
+  propertyName: string,
+  value: mixed,
+  properties: Array<[string, string]>,
+  indent: number,
+  prefix: string,
+): void {
+  let desc;
+  switch (typeof value) {
+    case 'object':
+      if (value === null) {
+        desc = 'null';
+        break;
+      } else {
+        if (value.$$typeof === REACT_ELEMENT_TYPE) {
+          // JSX
+          const typeName = getComponentNameFromType(value.type) || '\u2026';
+          const key = value.key;
+          const props: any = value.props;
+          const propsKeys = Object.keys(props);
+          const propsLength = propsKeys.length;
+          if (key == null && propsLength === 0) {
+            desc = '<' + typeName + ' />';
+            break;
+          }
+          if (
+            indent < 3 ||
+            (propsLength === 1 && propsKeys[0] === 'children' && key == null)
+          ) {
+            desc = '<' + typeName + ' \u2026 />';
+            break;
+          }
+          properties.push([
+            prefix + '\xa0\xa0'.repeat(indent) + propertyName,
+            '<' + typeName,
+          ]);
+          if (key !== null) {
+            addValueToProperties('key', key, properties, indent + 1, prefix);
+          }
+          let hasChildren = false;
+          let addedProperties = 0;
+          for (const propKey in props) {
+            addedProperties++;
+            if (propKey === 'children') {
+              if (
+                props.children != null &&
+                (!isArray(props.children) || props.children.length > 0)
+              ) {
+                hasChildren = true;
+              }
+            } else if (
+              hasOwnProperty.call(props, propKey) &&
+              propKey[0] !== '_'
+            ) {
+              addValueToProperties(
+                propKey,
+                props[propKey],
+                properties,
+                indent + 1,
+                prefix,
+              );
+            }
+
+            if (addedProperties >= OBJECT_WIDTH_LIMIT) {
+              break;
+            }
+          }
+          properties.push([
+            '',
+            hasChildren ? '>\u2026</' + typeName + '>' : '/>',
+          ]);
+          return;
+        }
+        // $FlowFixMe[method-unbinding]
+        const objectToString = Object.prototype.toString.call(value);
+        let objectName = objectToString.slice(8, objectToString.length - 1);
+        if (objectName === 'Array') {
+          const array: Array<any> = (value: any);
+          const didTruncate = array.length > OBJECT_WIDTH_LIMIT;
+          const kind = getArrayKind(array);
+          if (kind === PRIMITIVE_ARRAY || kind === EMPTY_ARRAY) {
+            desc = JSON.stringify(
+              didTruncate
+                ? array.slice(0, OBJECT_WIDTH_LIMIT).concat('…')
+                : array,
+            );
+            break;
+          } else if (kind === ENTRIES_ARRAY) {
+            properties.push([
+              prefix + '\xa0\xa0'.repeat(indent) + propertyName,
+              '',
+            ]);
+            for (let i = 0; i < array.length && i < OBJECT_WIDTH_LIMIT; i++) {
+              const entry = array[i];
+              addValueToProperties(
+                entry[0],
+                entry[1],
+                properties,
+                indent + 1,
+                prefix,
+              );
+            }
+            if (didTruncate) {
+              addValueToProperties(
+                OBJECT_WIDTH_LIMIT.toString(),
+                '…',
+                properties,
+                indent + 1,
+                prefix,
+              );
+            }
+            return;
+          }
+        }
+        if (objectName === 'Promise') {
+          if (value.status === 'fulfilled') {
+            // Print the inner value
+            const idx = properties.length;
+            addValueToProperties(
+              propertyName,
+              value.value,
+              properties,
+              indent,
+              prefix,
+            );
+            if (properties.length > idx) {
+              // Wrap the value or type in Promise descriptor.
+              const insertedEntry = properties[idx];
+              insertedEntry[1] =
+                'Promise<' + (insertedEntry[1] || 'Object') + '>';
+              return;
+            }
+          } else if (value.status === 'rejected') {
+            // Print the inner error
+            const idx = properties.length;
+            addValueToProperties(
+              propertyName,
+              value.reason,
+              properties,
+              indent,
+              prefix,
+            );
+            if (properties.length > idx) {
+              // Wrap the value or type in Promise descriptor.
+              const insertedEntry = properties[idx];
+              insertedEntry[1] = 'Rejected Promise<' + insertedEntry[1] + '>';
+              return;
+            }
+          }
+          properties.push([
+            '\xa0\xa0'.repeat(indent) + propertyName,
+            'Promise',
+          ]);
+          return;
+        }
+        if (objectName === 'Object') {
+          const proto: any = Object.getPrototypeOf(value);
+          if (proto && typeof proto.constructor === 'function') {
+            objectName = proto.constructor.name;
+          }
+        }
+        properties.push([
+          prefix + '\xa0\xa0'.repeat(indent) + propertyName,
+          objectName === 'Object' ? (indent < 3 ? '' : '\u2026') : objectName,
+        ]);
+        if (indent < 3) {
+          addObjectToProperties(value, properties, indent + 1, prefix);
+        }
+        return;
+      }
+    case 'function':
+      if (value.name === '') {
+        desc = '() => {}';
+      } else {
+        desc = value.name + '() {}';
+      }
+      break;
+    case 'string':
+      if (value === OMITTED_PROP_ERROR) {
+        desc = '\u2026'; // ellipsis
+      } else {
+        desc = JSON.stringify(value);
+      }
+      break;
+    case 'undefined':
+      desc = 'undefined';
+      break;
+    case 'boolean':
+      desc = value ? 'true' : 'false';
+      break;
+    default:
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      desc = String(value);
+  }
+  properties.push([prefix + '\xa0\xa0'.repeat(indent) + propertyName, desc]);
+}
+
+const REMOVED = '\u2013\xa0';
+const ADDED = '+\xa0';
+const UNCHANGED = '\u2007\xa0';
+
+export function addObjectDiffToProperties(
+  prev: Object,
+  next: Object,
+  properties: Array<[string, string]>,
+  indent: number,
+): boolean {
+  // Note: We diff even non-owned properties here but things that are shared end up just the same.
+  // If a property is added or removed, we just emit the property name and omit the value it had.
+  // Mainly for performance. We need to minimize to only relevant information.
+  let isDeeplyEqual = true;
+  let prevPropertiesChecked = 0;
+  for (const key in prev) {
+    if (prevPropertiesChecked > OBJECT_WIDTH_LIMIT) {
+      properties.push([
+        'Previous object has more than ' +
+          OBJECT_WIDTH_LIMIT +
+          ' properties. React will not attempt to diff objects with too many properties.',
+        '',
+      ]);
+      isDeeplyEqual = false;
+      break;
+    }
+
+    if (!(key in next)) {
+      properties.push([REMOVED + '\xa0\xa0'.repeat(indent) + key, '\u2026']);
+      isDeeplyEqual = false;
+    }
+    prevPropertiesChecked++;
+  }
+
+  let nextPropertiesChecked = 0;
+  for (const key in next) {
+    if (nextPropertiesChecked > OBJECT_WIDTH_LIMIT) {
+      properties.push([
+        'Next object has more than ' +
+          OBJECT_WIDTH_LIMIT +
+          ' properties. React will not attempt to diff objects with too many properties.',
+        '',
+      ]);
+      isDeeplyEqual = false;
+      break;
+    }
+
+    if (key in prev) {
+      const prevValue = prev[key];
+      const nextValue = next[key];
+      if (prevValue !== nextValue) {
+        if (indent === 0 && key === 'children') {
+          // Omit any change inside the top level children prop since it's expected to change
+          // with any change to children of the component and their props will be logged
+          // elsewhere but still mark it as a cause of render.
+          const line = '\xa0\xa0'.repeat(indent) + key;
+          properties.push([REMOVED + line, '\u2026'], [ADDED + line, '\u2026']);
+          isDeeplyEqual = false;
+          continue;
+        }
+        if (indent >= 3) {
+          // Just fallthrough to print the two values if we're deep.
+          // This will skip nested properties of the objects.
+        } else if (
+          typeof prevValue === 'object' &&
+          typeof nextValue === 'object' &&
+          prevValue !== null &&
+          nextValue !== null &&
+          prevValue.$$typeof === nextValue.$$typeof
+        ) {
+          if (nextValue.$$typeof === REACT_ELEMENT_TYPE) {
+            if (
+              prevValue.type === nextValue.type &&
+              prevValue.key === nextValue.key
+            ) {
+              // If the only thing that has changed is the props of a nested element, then
+              // we omit the props because it is likely to be represented as a diff elsewhere.
+              const typeName =
+                getComponentNameFromType(nextValue.type) || '\u2026';
+              const line = '\xa0\xa0'.repeat(indent) + key;
+              const desc = '<' + typeName + ' \u2026 />';
+              properties.push([REMOVED + line, desc], [ADDED + line, desc]);
+              isDeeplyEqual = false;
+              continue;
+            }
+          } else {
+            // $FlowFixMe[method-unbinding]
+            const prevKind = Object.prototype.toString.call(prevValue);
+            // $FlowFixMe[method-unbinding]
+            const nextKind = Object.prototype.toString.call(nextValue);
+            if (
+              prevKind === nextKind &&
+              (nextKind === '[object Object]' || nextKind === '[object Array]')
+            ) {
+              // Diff nested object
+              const entry = [
+                UNCHANGED + '\xa0\xa0'.repeat(indent) + key,
+                nextKind === '[object Array]' ? 'Array' : '',
+              ];
+              properties.push(entry);
+              const prevLength = properties.length;
+              const nestedEqual = addObjectDiffToProperties(
+                prevValue,
+                nextValue,
+                properties,
+                indent + 1,
+              );
+              if (!nestedEqual) {
+                isDeeplyEqual = false;
+              } else if (prevLength === properties.length) {
+                // Nothing notably changed inside the nested object. So this is only a change in reference
+                // equality. Let's note it.
+                entry[1] =
+                  'Referentially unequal but deeply equal objects. Consider memoization.';
+              }
+              continue;
+            }
+          }
+        } else if (
+          typeof prevValue === 'function' &&
+          typeof nextValue === 'function' &&
+          prevValue.name === nextValue.name &&
+          prevValue.length === nextValue.length
+        ) {
+          // $FlowFixMe[method-unbinding]
+          const prevSrc = Function.prototype.toString.call(prevValue);
+          // $FlowFixMe[method-unbinding]
+          const nextSrc = Function.prototype.toString.call(nextValue);
+          if (prevSrc === nextSrc) {
+            // This looks like it might be the same function but different closures.
+            let desc;
+            if (nextValue.name === '') {
+              desc = '() => {}';
+            } else {
+              desc = nextValue.name + '() {}';
+            }
+            properties.push([
+              UNCHANGED + '\xa0\xa0'.repeat(indent) + key,
+              desc +
+                ' Referentially unequal function closure. Consider memoization.',
+            ]);
+            continue;
+          }
+        }
+
+        // Otherwise, emit the change in property and the values.
+        addValueToProperties(key, prevValue, properties, indent, REMOVED);
+        addValueToProperties(key, nextValue, properties, indent, ADDED);
+        isDeeplyEqual = false;
+      }
+    } else {
+      properties.push([ADDED + '\xa0\xa0'.repeat(indent) + key, '\u2026']);
+      isDeeplyEqual = false;
+    }
+
+    nextPropertiesChecked++;
+  }
+  return isDeeplyEqual;
+}
diff --git a/packages/shared/ReactSerializationErrors.js b/packages/shared/ReactSerializationErrors.js
new file mode 100644
index 00000000000..36342412885
--- /dev/null
+++ b/packages/shared/ReactSerializationErrors.js
@@ -0,0 +1,321 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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_ELEMENT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+} from 'shared/ReactSymbols';
+
+import type {LazyComponent} from 'react/src/ReactLazy';
+
+import isArray from 'shared/isArray';
+import getPrototypeOf from 'shared/getPrototypeOf';
+
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
+
+// Used for DEV messages to keep track of which parent rendered some props,
+// in case they error.
+export const jsxPropsParents: WeakMap<any, any> = new WeakMap();
+export const jsxChildrenParents: WeakMap<any, any> = new WeakMap();
+
+function isObjectPrototype(object: any): boolean {
+  if (!object) {
+    return false;
+  }
+  const ObjectPrototype = Object.prototype;
+  if (object === ObjectPrototype) {
+    return true;
+  }
+  // It might be an object from a different Realm which is
+  // still just a plain simple object.
+  if (getPrototypeOf(object)) {
+    return false;
+  }
+  const names = Object.getOwnPropertyNames(object);
+  for (let i = 0; i < names.length; i++) {
+    if (!(names[i] in ObjectPrototype)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function isGetter(object: any, name: string): boolean {
+  const ObjectPrototype = Object.prototype;
+  if (object === ObjectPrototype || object === null) {
+    return false;
+  }
+  const descriptor = Object.getOwnPropertyDescriptor(object, name);
+  if (descriptor === undefined) {
+    return isGetter(getPrototypeOf(object), name);
+  }
+  return typeof descriptor.get === 'function';
+}
+
+export function isSimpleObject(object: any): boolean {
+  if (!isObjectPrototype(getPrototypeOf(object))) {
+    return false;
+  }
+  const names = Object.getOwnPropertyNames(object);
+  for (let i = 0; i < names.length; i++) {
+    const descriptor = Object.getOwnPropertyDescriptor(object, names[i]);
+    if (!descriptor) {
+      return false;
+    }
+    if (!descriptor.enumerable) {
+      if (
+        (names[i] === 'key' || names[i] === 'ref') &&
+        typeof descriptor.get === 'function'
+      ) {
+        // React adds key and ref getters to props objects to issue warnings.
+        // Those getters will not be transferred to the client, but that's ok,
+        // so we'll special case them.
+        continue;
+      }
+      return false;
+    }
+  }
+  return true;
+}
+
+export function objectName(object: mixed): string {
+  // $FlowFixMe[method-unbinding]
+  const name = Object.prototype.toString.call(object);
+  // Extract 'Object' from '[object Object]':
+  return name.slice(8, name.length - 1);
+}
+
+function describeKeyForErrorMessage(key: string): string {
+  const encodedKey = JSON.stringify(key);
+  return '"' + key + '"' === encodedKey ? key : encodedKey;
+}
+
+export function describeValueForErrorMessage(value: mixed): string {
+  switch (typeof value) {
+    case 'string': {
+      return JSON.stringify(
+        value.length <= 10 ? value : value.slice(0, 10) + '...',
+      );
+    }
+    case 'object': {
+      if (isArray(value)) {
+        return '[...]';
+      }
+      if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
+        return describeClientReference(value);
+      }
+      const name = objectName(value);
+      if (name === 'Object') {
+        return '{...}';
+      }
+      return name;
+    }
+    case 'function': {
+      if ((value: any).$$typeof === CLIENT_REFERENCE_TAG) {
+        return describeClientReference(value);
+      }
+      const name = (value: any).displayName || value.name;
+      return name ? 'function ' + name : 'function';
+    }
+    default:
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      return String(value);
+  }
+}
+
+function describeElementType(type: any): string {
+  if (typeof type === 'string') {
+    return type;
+  }
+  switch (type) {
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+    case REACT_VIEW_TRANSITION_TYPE:
+      if (enableViewTransition) {
+        return 'ViewTransition';
+      }
+  }
+  if (typeof type === 'object') {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE:
+        return describeElementType(type.render);
+      case REACT_MEMO_TYPE:
+        return describeElementType(type.type);
+      case REACT_LAZY_TYPE: {
+        const lazyComponent: LazyComponent<any, any> = (type: any);
+        const payload = lazyComponent._payload;
+        const init = lazyComponent._init;
+        try {
+          // Lazy may contain any component type so we recursively resolve it.
+          return describeElementType(init(payload));
+        } catch (x) {}
+      }
+    }
+  }
+  return '';
+}
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+
+function describeClientReference(ref: any) {
+  return 'client';
+}
+
+export function describeObjectForErrorMessage(
+  objectOrArray: {+[key: string | number]: mixed, ...} | $ReadOnlyArray<mixed>,
+  expandedName?: string,
+): string {
+  const objKind = objectName(objectOrArray);
+  if (objKind !== 'Object' && objKind !== 'Array') {
+    return objKind;
+  }
+  let str = '';
+  let start = -1;
+  let length = 0;
+  if (isArray(objectOrArray)) {
+    if (__DEV__ && jsxChildrenParents.has(objectOrArray)) {
+      // Print JSX Children
+      const type = jsxChildrenParents.get(objectOrArray);
+      str = '<' + describeElementType(type) + '>';
+      const array: $ReadOnlyArray<mixed> = objectOrArray;
+      for (let i = 0; i < array.length; i++) {
+        const value = array[i];
+        let substr;
+        if (typeof value === 'string') {
+          substr = value;
+        } else if (typeof value === 'object' && value !== null) {
+          substr = '{' + describeObjectForErrorMessage(value) + '}';
+        } else {
+          substr = '{' + describeValueForErrorMessage(value) + '}';
+        }
+        if ('' + i === expandedName) {
+          start = str.length;
+          length = substr.length;
+          str += substr;
+        } else if (substr.length < 15 && str.length + substr.length < 40) {
+          str += substr;
+        } else {
+          str += '{...}';
+        }
+      }
+      str += '</' + describeElementType(type) + '>';
+    } else {
+      // Print Array
+      str = '[';
+      const array: $ReadOnlyArray<mixed> = objectOrArray;
+      for (let i = 0; i < array.length; i++) {
+        if (i > 0) {
+          str += ', ';
+        }
+        const value = array[i];
+        let substr;
+        if (typeof value === 'object' && value !== null) {
+          substr = describeObjectForErrorMessage(value);
+        } else {
+          substr = describeValueForErrorMessage(value);
+        }
+        if ('' + i === expandedName) {
+          start = str.length;
+          length = substr.length;
+          str += substr;
+        } else if (substr.length < 10 && str.length + substr.length < 40) {
+          str += substr;
+        } else {
+          str += '...';
+        }
+      }
+      str += ']';
+    }
+  } else {
+    if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) {
+      str = '<' + describeElementType(objectOrArray.type) + '/>';
+    } else if (objectOrArray.$$typeof === CLIENT_REFERENCE_TAG) {
+      return describeClientReference(objectOrArray);
+    } else if (__DEV__ && jsxPropsParents.has(objectOrArray)) {
+      // Print JSX
+      const type = jsxPropsParents.get(objectOrArray);
+      str = '<' + (describeElementType(type) || '...');
+      const object: {+[key: string | number]: mixed, ...} = objectOrArray;
+      const names = Object.keys(object);
+      for (let i = 0; i < names.length; i++) {
+        str += ' ';
+        const name = names[i];
+        str += describeKeyForErrorMessage(name) + '=';
+        const value = object[name];
+        let substr;
+        if (
+          name === expandedName &&
+          typeof value === 'object' &&
+          value !== null
+        ) {
+          substr = describeObjectForErrorMessage(value);
+        } else {
+          substr = describeValueForErrorMessage(value);
+        }
+        if (typeof value !== 'string') {
+          substr = '{' + substr + '}';
+        }
+        if (name === expandedName) {
+          start = str.length;
+          length = substr.length;
+          str += substr;
+        } else if (substr.length < 10 && str.length + substr.length < 40) {
+          str += substr;
+        } else {
+          str += '...';
+        }
+      }
+      str += '>';
+    } else {
+      // Print Object
+      str = '{';
+      const object: {+[key: string | number]: mixed, ...} = objectOrArray;
+      const names = Object.keys(object);
+      for (let i = 0; i < names.length; i++) {
+        if (i > 0) {
+          str += ', ';
+        }
+        const name = names[i];
+        str += describeKeyForErrorMessage(name) + ': ';
+        const value = object[name];
+        let substr;
+        if (typeof value === 'object' && value !== null) {
+          substr = describeObjectForErrorMessage(value);
+        } else {
+          substr = describeValueForErrorMessage(value);
+        }
+        if (name === expandedName) {
+          start = str.length;
+          length = substr.length;
+          str += substr;
+        } else if (substr.length < 10 && str.length + substr.length < 40) {
+          str += substr;
+        } else {
+          str += '...';
+        }
+      }
+      str += '}';
+    }
+  }
+  if (expandedName === undefined) {
+    return str;
+  }
+  if (start > -1 && length > 0) {
+    const highlight = ' '.repeat(start) + '^'.repeat(length);
+    return '\n  ' + str + '\n  ' + highlight;
+  }
+  return '\n  ' + str;
+}
diff --git a/packages/shared/ReactSharedInternals.js b/packages/shared/ReactSharedInternals.js
new file mode 100644
index 00000000000..02573f9e8c6
--- /dev/null
+++ b/packages/shared/ReactSharedInternals.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+
+const ReactSharedInternals =
+  React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+export default ReactSharedInternals;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
new file mode 100644
index 00000000000..bb67b538930
--- /dev/null
+++ b/packages/shared/ReactSymbols.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+
+// The Symbol used to tag the ReactElement-like types.
+export const REACT_LEGACY_ELEMENT_TYPE: symbol = Symbol.for('react.element');
+export const REACT_ELEMENT_TYPE: symbol = Symbol.for(
+  'react.transitional.element',
+);
+export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');
+export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');
+export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');
+export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler');
+export const REACT_CONSUMER_TYPE: symbol = Symbol.for('react.consumer');
+export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');
+export const REACT_FORWARD_REF_TYPE: symbol = Symbol.for('react.forward_ref');
+export const REACT_SUSPENSE_TYPE: symbol = Symbol.for('react.suspense');
+export const REACT_SUSPENSE_LIST_TYPE: symbol = Symbol.for(
+  'react.suspense_list',
+);
+export const REACT_MEMO_TYPE: symbol = Symbol.for('react.memo');
+export const REACT_LAZY_TYPE: symbol = Symbol.for('react.lazy');
+export const REACT_SCOPE_TYPE: symbol = Symbol.for('react.scope');
+export const REACT_ACTIVITY_TYPE: symbol = Symbol.for('react.activity');
+export const REACT_LEGACY_HIDDEN_TYPE: symbol = Symbol.for(
+  'react.legacy_hidden',
+);
+export const REACT_TRACING_MARKER_TYPE: symbol = Symbol.for(
+  'react.tracing_marker',
+);
+
+export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
+  'react.memo_cache_sentinel',
+);
+
+export const REACT_VIEW_TRANSITION_TYPE: symbol = Symbol.for(
+  'react.view_transition',
+);
+
+const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+const FAUX_ITERATOR_SYMBOL = '@@iterator';
+
+export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<any> {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+  const maybeIterator =
+    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
+    maybeIterable[FAUX_ITERATOR_SYMBOL];
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+  return null;
+}
+
+export const ASYNC_ITERATOR = Symbol.asyncIterator;
+
+export const REACT_OPTIMISTIC_KEY: ReactOptimisticKey = (Symbol.for(
+  'react.optimistic_key',
+): any);
+
+// This is actually a symbol but Flow doesn't support comparison of symbols to refine.
+// We use a boolean since in our code we often expect string (key) or number (index),
+// so by pretending to be a boolean we cover a lot of cases that don't consider this case.
+export type ReactOptimisticKey = true;
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
new file mode 100644
index 00000000000..e58c36f0a0c
--- /dev/null
+++ b/packages/shared/ReactTypes.js
@@ -0,0 +1,430 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {ReactOptimisticKey} from './ReactSymbols';
+
+export type {ReactOptimisticKey};
+
+export type ReactKey = null | string | ReactOptimisticKey;
+
+export type ReactNode =
+  | React$Element<any>
+  | ReactPortal
+  | ReactText
+  | ReactFragment
+  | ReactProvider<any>
+  | ReactConsumer<any>;
+
+export type ReactEmpty = null | void | boolean;
+
+export type ReactFragment = ReactEmpty | Iterable<React$Node>;
+
+export type ReactNodeList = ReactEmpty | React$Node;
+
+export type ReactText = string | number;
+
+export type ReactProvider<T> = {
+  $$typeof: symbol | number,
+  type: ReactContext<T>,
+  key: ReactKey,
+  ref: null,
+  props: {
+    value: T,
+    children?: ReactNodeList,
+  },
+};
+
+export type ReactConsumerType<T> = {
+  $$typeof: symbol | number,
+  _context: ReactContext<T>,
+};
+
+export type ReactConsumer<T> = {
+  $$typeof: symbol | number,
+  type: ReactConsumerType<T>,
+  key: ReactKey,
+  ref: null,
+  props: {
+    children: (value: T) => ReactNodeList,
+  },
+};
+
+export type ReactContext<T> = {
+  $$typeof: symbol | number,
+  Consumer: ReactConsumerType<T>,
+  Provider: ReactContext<T>,
+  _currentValue: T,
+  _currentValue2: T,
+  _threadCount: number,
+  // DEV only
+  _currentRenderer?: Object | null,
+  _currentRenderer2?: Object | null,
+  // This value may be added by application code
+  // to improve DEV tooling display names
+  displayName?: string,
+};
+
+export type ReactPortal = {
+  $$typeof: symbol | number,
+  key: ReactKey,
+  containerInfo: any,
+  children: ReactNodeList,
+  // TODO: figure out the API for cross-renderer implementation.
+  implementation: any,
+};
+
+export type RefObject = {
+  current: any,
+};
+
+export type ReactScope = {
+  $$typeof: symbol | number,
+};
+
+export type ReactScopeQuery = (
+  type: string,
+  props: {[string]: mixed},
+  instance: mixed,
+) => boolean;
+
+export type ReactScopeInstance = {
+  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>,
+};
+
+// The subset of a Thenable required by things thrown by Suspense.
+// This doesn't require a value to be passed to either handler.
+export interface Wakeable {
+  then(onFulfill: () => mixed, onReject: () => mixed): void | Wakeable;
+}
+
+// The subset of a Promise that React APIs rely on. This resolves a value.
+// This doesn't require a return value neither from the handler nor the
+// then function.
+interface ThenableImpl<T> {
+  then(
+    onFulfill: (value: T) => mixed,
+    onReject: (error: mixed) => mixed,
+  ): void | Wakeable;
+  displayName?: string;
+}
+interface UntrackedThenable<T> extends ThenableImpl<T> {
+  status?: void;
+  _debugInfo?: null | ReactDebugInfo;
+}
+
+export interface PendingThenable<T> extends ThenableImpl<T> {
+  status: 'pending';
+  _debugInfo?: null | ReactDebugInfo;
+}
+
+export interface FulfilledThenable<T> extends ThenableImpl<T> {
+  status: 'fulfilled';
+  value: T;
+  _debugInfo?: null | ReactDebugInfo;
+}
+
+export interface RejectedThenable<T> extends ThenableImpl<T> {
+  status: 'rejected';
+  reason: mixed;
+  _debugInfo?: null | ReactDebugInfo;
+}
+
+export type Thenable<T> =
+  | UntrackedThenable<T>
+  | PendingThenable<T>
+  | FulfilledThenable<T>
+  | RejectedThenable<T>;
+
+export type StartTransitionOptions = {
+  name?: string,
+};
+
+export type Usable<T> = Thenable<T> | ReactContext<T>;
+
+export type ReactCustomFormAction = {
+  name?: string,
+  action?: string,
+  encType?: string,
+  method?: string,
+  target?: string,
+  data?: null | FormData,
+};
+
+// This is an opaque type returned by decodeFormState on the server, but it's
+// defined in this shared file because the same type is used by React on
+// the client.
+export type ReactFormState<S, ReferenceId> = [
+  S /* actual state value */,
+  string /* key path */,
+  ReferenceId /* Server Reference ID */,
+  number /* number of bound arguments */,
+];
+
+// Intrinsic GestureProvider. This type varies by Environment whether a particular
+// renderer supports it.
+export type GestureProvider = any;
+
+export type GestureOptions = {
+  rangeStart?: number,
+  rangeEnd?: number,
+};
+
+export type Awaited<T> = T extends null | void
+  ? T // special case for `null | undefined` when not in `--strictNullChecks` mode
+  : T extends Object // `await` only unwraps object types with a callable then. Non-object types are not unwrapped.
+    ? T extends {then(onfulfilled: infer F): any} // thenable, extracts the first argument to `then()`
+      ? F extends (value: infer V) => any // if the argument to `then` is callable, extracts the argument
+        ? Awaited<V> // recursively unwrap the value
+        : empty // the argument to `then` was not callable.
+      : T // argument was not an object
+    : T; // non-thenable
+
+export type ReactCallSite = [
+  string, // function name
+  string, // file name TODO: model nested eval locations as nested arrays
+  number, // line number
+  number, // column number
+  number, // enclosing line number
+  number, // enclosing column number
+  boolean, // async resume
+];
+
+export type ReactStackTrace = Array<ReactCallSite>;
+
+export type ReactFunctionLocation = [
+  string, // function name
+  string, // file name TODO: model nested eval locations as nested arrays
+  number, // enclosing line number
+  number, // enclosing column number
+];
+
+export type ReactComponentInfo = {
+  +name: string,
+  +env?: string,
+  +key?: ReactKey,
+  +owner?: null | ReactComponentInfo,
+  +stack?: null | ReactStackTrace,
+  +props?: null | {[name: string]: mixed},
+  // Stashed Data for the Specific Execution Environment. Not part of the transport protocol
+  +debugStack?: null | Error,
+  +debugTask?: null | ConsoleTask,
+  debugLocation?: null | Error,
+};
+
+export type ReactEnvironmentInfo = {
+  +env: string,
+};
+
+export type ReactErrorInfoProd = {
+  +digest: string,
+};
+
+export type ReactErrorInfoDev = {
+  +digest?: string,
+  +name: string,
+  +message: string,
+  +stack: ReactStackTrace,
+  +env: string,
+  +owner?: null | string,
+};
+
+export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;
+
+// The point where the Async Info started which might not be the same place it was awaited.
+export type ReactIOInfo = {
+  +name: string, // the name of the async function being called (e.g. "fetch")
+  +start: number, // the start time
+  +end: number, // the end time (this might be different from the time the await was unblocked)
+  +byteSize?: number, // the byte size of this resource across the network. (should only be included if affecting the client.)
+  +value?: null | Promise<mixed>, // the Promise that was awaited if any, may be rejected
+  +env?: string, // the environment where this I/O was spawned.
+  +owner?: null | ReactComponentInfo,
+  +stack?: null | ReactStackTrace,
+  // Stashed Data for the Specific Execution Environment. Not part of the transport protocol
+  +debugStack?: null | Error,
+  +debugTask?: null | ConsoleTask,
+};
+
+export type ReactAsyncInfo = {
+  +awaited: ReactIOInfo,
+  +env?: string, // the environment where this was awaited. This might not be the same as where it was spawned.
+  +owner?: null | ReactComponentInfo,
+  +stack?: null | ReactStackTrace,
+  // Stashed Data for the Specific Execution Environment. Not part of the transport protocol
+  +debugStack?: null | Error,
+  +debugTask?: null | ConsoleTask,
+};
+
+export type ReactTimeInfo = {
+  +time: number, // performance.now
+};
+
+export type ReactDebugInfoEntry =
+  | ReactComponentInfo
+  | ReactEnvironmentInfo
+  | ReactAsyncInfo
+  | ReactTimeInfo;
+
+export type ReactDebugInfo = Array<ReactDebugInfoEntry>;
+
+// Intrinsic ViewTransitionInstance. This type varies by Environment whether a particular
+// renderer supports it.
+export type ViewTransitionInstance = any;
+
+export type ViewTransitionClassPerType = {
+  [transitionType: 'default' | string]: 'none' | 'auto' | string,
+};
+
+export type ViewTransitionClass =
+  | 'none'
+  | 'auto'
+  | string
+  | ViewTransitionClassPerType;
+
+export type GestureOptionsRequired = {
+  rangeStart: number,
+  rangeEnd: number,
+};
+
+export type ViewTransitionProps = {
+  name?: string,
+  children?: ReactNodeList,
+  default?: ViewTransitionClass,
+  enter?: ViewTransitionClass,
+  exit?: ViewTransitionClass,
+  share?: ViewTransitionClass,
+  update?: ViewTransitionClass,
+  onEnter?: (
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onExit?: (
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onShare?: (
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onUpdate?: (
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onGestureEnter?: (
+    timeline: GestureProvider,
+    options: GestureOptionsRequired,
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onGestureExit?: (
+    timeline: GestureProvider,
+    options: GestureOptionsRequired,
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onGestureShare?: (
+    timeline: GestureProvider,
+    options: GestureOptionsRequired,
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+  onGestureUpdate?: (
+    timeline: GestureProvider,
+    options: GestureOptionsRequired,
+    instance: ViewTransitionInstance,
+    types: Array<string>,
+  ) => void | (() => void),
+};
+
+export type ActivityProps = {
+  mode?: 'hidden' | 'visible' | null | void,
+  children?: ReactNodeList,
+  name?: string,
+};
+
+export type SuspenseProps = {
+  children?: ReactNodeList,
+  fallback?: ReactNodeList,
+
+  // TODO: Add "unstable_" prefix?
+  suspenseCallback?: (Set<Wakeable> | null) => mixed,
+
+  unstable_avoidThisFallback?: boolean,
+  defer?: boolean,
+  name?: string,
+};
+
+export type SuspenseListRevealOrder =
+  | 'forwards'
+  | 'backwards'
+  | 'unstable_legacy-backwards'
+  | 'together'
+  | 'independent'
+  | void;
+
+export type SuspenseListTailMode = 'visible' | 'collapsed' | 'hidden' | void;
+
+// A SuspenseList row cannot include a nested Array since it's an easy mistake to not realize it
+// is treated as a single row. A Fragment can be used to intentionally have multiple children as
+// a single row.
+type SuspenseListRow = Exclude<
+  ReactNodeList,
+  Iterable<React$Node> | AsyncIterable<React$Node>,
+>;
+
+type DirectionalSuspenseListProps = {
+  // Directional SuspenseList are defined by an array of children or multiple slots to JSX
+  // It does not allow a single element child.
+  children?: Iterable<SuspenseListRow> | AsyncIterable<SuspenseListRow>, // Note: AsyncIterable is experimental.
+  revealOrder: 'forwards' | 'backwards' | 'unstable_legacy-backwards',
+  tail?: SuspenseListTailMode,
+};
+
+type NonDirectionalSuspenseListProps = {
+  children?: ReactNodeList,
+  revealOrder?: 'independent' | 'together' | void,
+  tail?: void,
+};
+
+export type SuspenseListProps =
+  | DirectionalSuspenseListProps
+  | NonDirectionalSuspenseListProps;
+
+export type TracingMarkerProps = {
+  name: string,
+  children?: ReactNodeList,
+};
+
+export type CacheProps = {
+  children?: ReactNodeList,
+};
+
+export type ProfilerPhase = 'mount' | 'update' | 'nested-update';
+
+export type ProfilerProps = {
+  id?: string,
+  onRender?: (
+    id: void | string,
+    phase: ProfilerPhase,
+    actualDuration: number,
+    baseDuration: number,
+    startTime: number,
+    commitTime: number,
+  ) => void,
+  onCommit?: (
+    id: void | string,
+    phase: ProfilerPhase,
+    effectDuration: number,
+    commitTime: number,
+  ) => void,
+  children?: ReactNodeList,
+};
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
new file mode 100644
index 00000000000..bd5fa23ca26
--- /dev/null
+++ b/packages/shared/ReactVersion.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// TODO: this is special because it gets imported during build.
+//
+// It exists as a placeholder so that DevTools can support work tag changes between releases.
+// When we next publish a release, update the matching TODO in backend/renderer.js
+// TODO: This module is used both by the release scripts and to expose a version
+// at runtime. We should instead inject the version number as part of the build
+// process, and use the ReactVersions.js module as the single source of truth.
+export default '19.3.0';
diff --git a/packages/shared/__tests__/ReactDOMFrameScheduling-test.js b/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
new file mode 100644
index 00000000000..9295dc10108
--- /dev/null
+++ b/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactDOMFrameScheduling', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    jest.unmock('scheduler');
+  });
+
+  // We're just testing importing, not using it.
+  // It is important because even isomorphic components may import it.
+  it('can import findDOMNode in Node environment', () => {
+    const prevWindow = global.window;
+    try {
+      // Simulate the Node environment:
+      delete global.window;
+      jest.resetModules();
+      expect(() => {
+        require('react-dom');
+      }).not.toThrow();
+    } finally {
+      global.window = prevWindow;
+    }
+  });
+});
diff --git a/packages/shared/__tests__/ReactError-test.internal.js b/packages/shared/__tests__/ReactError-test.internal.js
new file mode 100644
index 00000000000..e881c71b4de
--- /dev/null
+++ b/packages/shared/__tests__/ReactError-test.internal.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let act;
+
+describe('ReactError', () => {
+  let globalErrorMock;
+
+  beforeEach(() => {
+    if (!__DEV__) {
+      // In production, our Jest environment overrides the global Error
+      // class in order to decode error messages automatically. However
+      // this is a single test where we actually *don't* want to decode
+      // them. So we assert that the OriginalError exists, and temporarily
+      // set the global Error object back to it.
+      globalErrorMock = global.Error;
+      global.Error = globalErrorMock.OriginalError;
+      expect(typeof global.Error).toBe('function');
+    }
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+  });
+
+  afterEach(() => {
+    if (!__DEV__) {
+      global.Error = globalErrorMock;
+    }
+  });
+
+  // @gate build === "production"
+  // @gate !source
+  it('should error with minified error code', () => {
+    expect(() => {
+      ReactDOMClient.createRoot(null);
+    }).toThrowError(
+      'Minified React error #200; visit ' +
+        'https://react.dev/errors/200' +
+        ' for the full message or use the non-minified dev environment' +
+        ' for full errors and additional helpful warnings.',
+    );
+  });
+
+  // @gate build === "production"
+  // @gate !source
+  it('should serialize arguments', async () => {
+    function Oops() {
+      return {};
+    }
+    Oops.displayName = '#wtf';
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(async () => {
+        root.render(<Oops />);
+      });
+    }).rejects.toThrow(
+      'Minified React error #152; visit ' +
+        'https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=%23wtf' +
+        ' for the full message or use the non-minified dev environment' +
+        ' for full errors and additional helpful warnings.',
+    );
+  });
+});
diff --git a/packages/shared/__tests__/ReactErrorProd-test.internal.js b/packages/shared/__tests__/ReactErrorProd-test.internal.js
new file mode 100644
index 00000000000..83eb16d9579
--- /dev/null
+++ b/packages/shared/__tests__/ReactErrorProd-test.internal.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 formatProdErrorMessage;
+
+describe('ReactErrorProd', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    formatProdErrorMessage = require('shared/formatProdErrorMessage').default;
+  });
+
+  it('should throw with the correct number of `%s`s in the URL', () => {
+    expect(formatProdErrorMessage(124, 'foo', 'bar')).toEqual(
+      'Minified React error #124; visit ' +
+        'https://react.dev/errors/124?args[]=foo&args[]=bar' +
+        ' for the full message or use the non-minified dev environment' +
+        ' for full errors and additional helpful warnings.',
+    );
+
+    expect(formatProdErrorMessage(20)).toEqual(
+      'Minified React error #20; visit ' +
+        'https://react.dev/errors/20' +
+        ' for the full message or use the non-minified dev environment' +
+        ' for full errors and additional helpful warnings.',
+    );
+
+    expect(formatProdErrorMessage(77, '<div>', '&?bar')).toEqual(
+      'Minified React error #77; visit ' +
+        'https://react.dev/errors/77?args[]=%3Cdiv%3E&args[]=%26%3Fbar' +
+        ' for the full message or use the non-minified dev environment' +
+        ' for full errors and additional helpful warnings.',
+    );
+  });
+});
diff --git a/packages/shared/__tests__/ReactSymbols-test.internal.js b/packages/shared/__tests__/ReactSymbols-test.internal.js
new file mode 100644
index 00000000000..c651f53075a
--- /dev/null
+++ b/packages/shared/__tests__/ReactSymbols-test.internal.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('ReactSymbols', () => {
+  beforeEach(() => jest.resetModules());
+
+  const expectToBeUnique = keyValuePairs => {
+    const map = new Map();
+    keyValuePairs.forEach(([key, value]) => {
+      if (map.has(value)) {
+        throw Error(
+          `${key} value ${value.toString()} is the same as ${map.get(value)}.`,
+        );
+      }
+      map.set(value, key);
+    });
+  };
+
+  it('Symbol values should be unique', () => {
+    expectToBeUnique(Object.entries(require('shared/ReactSymbols')));
+  });
+});
diff --git a/packages/shared/__tests__/normalizeConsoleFormat-test.internal.js b/packages/shared/__tests__/normalizeConsoleFormat-test.internal.js
new file mode 100644
index 00000000000..e2cb4c77847
--- /dev/null
+++ b/packages/shared/__tests__/normalizeConsoleFormat-test.internal.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 normalizeConsoleFormat;
+
+describe('normalizeConsoleFormat', () => {
+  beforeEach(() => {
+    normalizeConsoleFormat = require('shared/normalizeConsoleFormat').default;
+  });
+
+  it('normalize empty string', async () => {
+    expect(normalizeConsoleFormat('', [1, {}, 'foo'], 0)).toMatchInlineSnapshot(
+      `"%o %o %s"`,
+    );
+  });
+
+  it('normalize extra args', async () => {
+    expect(
+      normalizeConsoleFormat('%f', [1, {}, 'foo'], 0),
+    ).toMatchInlineSnapshot(`"%f %o %s"`);
+  });
+
+  it('normalize fewer than args', async () => {
+    expect(
+      normalizeConsoleFormat('%s %O %o %f', [1, {}, 'foo'], 0),
+    ).toMatchInlineSnapshot(`"%s %O %o %%f"`);
+  });
+
+  it('normalize escape sequences', async () => {
+    expect(
+      normalizeConsoleFormat('hel%lo %s %%s world', [1, 'foo'], 0),
+    ).toMatchInlineSnapshot(`"hel%lo %s %%s world %s"`);
+  });
+
+  it('normalize ending with escape', async () => {
+    expect(
+      normalizeConsoleFormat('hello %s world %', [1, {}, 'foo'], 0),
+    ).toMatchInlineSnapshot(`"hello %s world % %o %s"`);
+    expect(
+      normalizeConsoleFormat('hello %s world %', [], 0),
+    ).toMatchInlineSnapshot(`"hello %%s world %"`);
+  });
+});
diff --git a/packages/shared/assign.js b/packages/shared/assign.js
new file mode 100644
index 00000000000..232d2779c0b
--- /dev/null
+++ b/packages/shared/assign.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 assign = Object.assign;
+
+export default assign;
diff --git a/packages/shared/binaryToComparableString.js b/packages/shared/binaryToComparableString.js
new file mode 100644
index 00000000000..73114209546
--- /dev/null
+++ b/packages/shared/binaryToComparableString.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Turns a TypedArray or ArrayBuffer into a string that can be used for comparison
+// in a Map to see if the bytes are the same.
+export default function binaryToComparableString(
+  view: $ArrayBufferView,
+): string {
+  return String.fromCharCode.apply(
+    String,
+    new Uint8Array(view.buffer, view.byteOffset, view.byteLength),
+  );
+}
diff --git a/packages/shared/enqueueTask.js b/packages/shared/enqueueTask.js
new file mode 100644
index 00000000000..f7e1c746e1f
--- /dev/null
+++ b/packages/shared/enqueueTask.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+let didWarnAboutMessageChannel = false;
+let enqueueTaskImpl = null;
+
+export default function enqueueTask(task: () => void): void {
+  if (enqueueTaskImpl === null) {
+    try {
+      // read require off the module object to get around the bundlers.
+      // we don't want them to detect a require and bundle a Node polyfill.
+      const requireString = ('require' + Math.random()).slice(0, 7);
+      // $FlowFixMe[invalid-computed-prop]
+      const nodeRequire = module && module[requireString];
+      // assuming we're in node, let's try to get node's
+      // version of setImmediate, bypassing fake timers if any.
+      enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;
+    } catch (_err) {
+      // we're in a browser
+      // we can't use regular timers because they may still be faked
+      // so we try MessageChannel+postMessage instead
+      enqueueTaskImpl = function (callback: () => void) {
+        if (__DEV__) {
+          if (didWarnAboutMessageChannel === false) {
+            didWarnAboutMessageChannel = true;
+            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();
+        channel.port1.onmessage = callback;
+        channel.port2.postMessage(undefined);
+      };
+    }
+  }
+  return enqueueTaskImpl(task);
+}
diff --git a/packages/shared/forks/DefaultPrepareStackTrace.dom-edge.js b/packages/shared/forks/DefaultPrepareStackTrace.dom-edge.js
new file mode 100644
index 00000000000..b69f14e36a3
--- /dev/null
+++ b/packages/shared/forks/DefaultPrepareStackTrace.dom-edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from '../DefaultPrepareStackTraceV8';
diff --git a/packages/shared/forks/DefaultPrepareStackTrace.dom-node.js b/packages/shared/forks/DefaultPrepareStackTrace.dom-node.js
new file mode 100644
index 00000000000..b69f14e36a3
--- /dev/null
+++ b/packages/shared/forks/DefaultPrepareStackTrace.dom-node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from '../DefaultPrepareStackTraceV8';
diff --git a/packages/shared/forks/DefaultPrepareStackTrace.markup.js b/packages/shared/forks/DefaultPrepareStackTrace.markup.js
new file mode 100644
index 00000000000..b69f14e36a3
--- /dev/null
+++ b/packages/shared/forks/DefaultPrepareStackTrace.markup.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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} from '../DefaultPrepareStackTraceV8';
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
new file mode 100644
index 00000000000..c1d8ea3ceaa
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// In xplat, these flags are controlled by GKs. Because most GKs have some
+// population running in either mode, we should run our tests that way, too,
+//
+// Use __VARIANT__ to simulate a GK. The tests will be run twice: once
+// with the __VARIANT__ set to `true`, and once set to `false`.
+//
+// TODO: __VARIANT__ isn't supported for React Native flags yet. You can set the
+// flag here but it won't be set to `true` in any of our test runs. Need to
+// add a test configuration for React Native.
+
+export const alwaysThrottleRetries = __VARIANT__;
+export const enableObjectFiber = __VARIANT__;
+export const enableHiddenSubtreeInsertionEffectCleanup = __VARIANT__;
+export const enableEagerAlternateStateNodeCleanup = __VARIANT__;
+export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
+export const enableFragmentRefs = __VARIANT__;
+export const enableFragmentRefsScrollIntoView = __VARIANT__;
+export const enableFragmentRefsInstanceHandles = __VARIANT__;
+export const enableComponentPerformanceTrack = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
new file mode 100644
index 00000000000..dab30e7f115
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as ExportsType from './ReactFeatureFlags.native-fb';
+import typeof * as DynamicExportsType from './ReactFeatureFlags.native-fb-dynamic';
+
+// Re-export dynamic flags from the internal module.
+// Intentionally using * because this import is compiled to a `require` call.
+import * as dynamicFlagsUntyped from 'ReactNativeInternalFeatureFlags';
+const dynamicFlags: DynamicExportsType = (dynamicFlagsUntyped: any);
+
+// We destructure each value before re-exporting to avoid a dynamic look-up on
+// the exports object every time a flag is read.
+export const {
+  alwaysThrottleRetries,
+  enableHiddenSubtreeInsertionEffectCleanup,
+  enableObjectFiber,
+  enableEagerAlternateStateNodeCleanup,
+  passChildrenWhenCloningPersistedNodes,
+  enableFragmentRefs,
+  enableFragmentRefsScrollIntoView,
+  enableFragmentRefsInstanceHandles,
+} = dynamicFlags;
+
+// The rest of the flags are static for better dead code elimination.
+export const disableClientCache: boolean = true;
+export const disableCommentsAsDOMContainers: boolean = true;
+export const disableInputAttributeSyncing: boolean = false;
+export const disableLegacyContext: boolean = false;
+export const disableLegacyContextForFunctionComponents: boolean = false;
+export const disableLegacyMode: boolean = false;
+export const disableSchedulerTimeoutInWorkLoop: boolean = false;
+export const disableTextareaChildren: boolean = false;
+export const enableAsyncDebugInfo: boolean = false;
+export const enableAsyncIterableChildren: boolean = false;
+export const enableCPUSuspense: boolean = true;
+export const enableCreateEventHandleAPI: boolean = false;
+export const enableMoveBefore: boolean = true;
+export const enableFizzExternalRuntime: boolean = true;
+export const enableHalt: boolean = true;
+export const enableInfiniteRenderLoopDetection: boolean = false;
+export const enableLegacyCache: boolean = false;
+export const enableLegacyFBSupport: boolean = false;
+export const enableLegacyHidden: boolean = false;
+export const enableNoCloningMemoCache: boolean = false;
+export const enableProfilerCommitHooks: boolean = __PROFILE__;
+export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__;
+export const enableProfilerTimer: boolean = __PROFILE__;
+export const enableReactTestRendererWarning: boolean = false;
+export const enableRetryLaneExpiration: boolean = false;
+export const enableSchedulingProfiler: boolean = __PROFILE__;
+export const enableScopeAPI: boolean = false;
+export const enableSuspenseAvoidThisFallback: boolean = false;
+export const enableSuspenseCallback: boolean = true;
+export const enableTaint: boolean = true;
+export const enableTransitionTracing: boolean = false;
+export const enableTrustedTypesIntegration: boolean = false;
+export const enableUpdaterTracking: boolean = __PROFILE__;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+export const enableYieldingBeforePassive: boolean = false;
+export const enableThrottledScheduling: boolean = false;
+export const enableViewTransition: boolean = false;
+export const enableGestureTransition: boolean = false;
+export const enableScrollEndPolyfill: boolean = true;
+export const enableSuspenseyImages: boolean = false;
+export const enableFizzBlockingRender: boolean = true;
+export const enableSrcObject: boolean = false;
+export const enableHydrationChangeEvent: boolean = true;
+export const enableDefaultTransitionIndicator: boolean = true;
+export const ownerStackLimit = 1e4;
+export const enableComponentPerformanceTrack: boolean =
+  __PROFILE__ && dynamicFlags.enableComponentPerformanceTrack;
+export const enablePerformanceIssueReporting: boolean =
+  enableComponentPerformanceTrack;
+export const enableInternalInstanceMap: boolean = false;
+export const enableOptimisticKey: boolean = false;
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
new file mode 100644
index 00000000000..52c4204ef00
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as ExportsType from './ReactFeatureFlags.native-oss';
+
+// TODO: Align these flags with canary and delete this file once RN ships from Canary.
+
+// -----------------------------------------------------------------------------
+// All flags
+// -----------------------------------------------------------------------------
+export const alwaysThrottleRetries: boolean = false;
+export const disableClientCache: boolean = true;
+export const disableCommentsAsDOMContainers: boolean = true;
+export const disableInputAttributeSyncing: boolean = false;
+export const disableLegacyContext: boolean = true;
+export const disableLegacyContextForFunctionComponents: boolean = true;
+export const disableLegacyMode: boolean = false;
+export const disableSchedulerTimeoutInWorkLoop: boolean = false;
+export const disableTextareaChildren: boolean = false;
+export const enableAsyncDebugInfo: boolean = false;
+export const enableAsyncIterableChildren: boolean = false;
+export const enableCPUSuspense: boolean = false;
+export const enableCreateEventHandleAPI: boolean = false;
+export const enableMoveBefore: boolean = true;
+export const enableFizzExternalRuntime: boolean = true;
+export const enableHalt: boolean = true;
+export const enableHiddenSubtreeInsertionEffectCleanup: boolean = false;
+export const enableInfiniteRenderLoopDetection: boolean = false;
+export const enableLegacyCache: boolean = false;
+export const enableLegacyFBSupport: boolean = false;
+export const enableLegacyHidden: boolean = false;
+export const enableNoCloningMemoCache: boolean = false;
+export const enableObjectFiber: boolean = false;
+export const enableReactTestRendererWarning: boolean = false;
+export const enableRetryLaneExpiration: boolean = false;
+export const enableComponentPerformanceTrack: boolean = true;
+export const enablePerformanceIssueReporting: boolean = false;
+export const enableSchedulingProfiler: boolean =
+  !enableComponentPerformanceTrack && __PROFILE__;
+export const enableScopeAPI: boolean = false;
+export const enableEagerAlternateStateNodeCleanup: boolean = true;
+export const enableSuspenseAvoidThisFallback: boolean = false;
+export const enableSuspenseCallback: boolean = false;
+export const enableTaint: boolean = true;
+export const enableTransitionTracing: boolean = false;
+export const enableTrustedTypesIntegration: boolean = false;
+export const passChildrenWhenCloningPersistedNodes: boolean = false;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+
+export const enableYieldingBeforePassive: boolean = false;
+
+export const enableThrottledScheduling: boolean = false;
+export const enableViewTransition: boolean = true;
+export const enableGestureTransition: boolean = false;
+export const enableScrollEndPolyfill: boolean = true;
+export const enableSuspenseyImages: boolean = false;
+export const enableFizzBlockingRender: boolean = true;
+export const enableSrcObject: boolean = false;
+export const enableHydrationChangeEvent: boolean = false;
+export const enableDefaultTransitionIndicator: boolean = false;
+export const ownerStackLimit = 1e4;
+
+export const enableFragmentRefs: boolean = true;
+export const enableFragmentRefsScrollIntoView: boolean = false;
+export const enableFragmentRefsInstanceHandles: boolean = false;
+
+export const enableInternalInstanceMap: boolean = false;
+
+export const enableOptimisticKey: boolean = false;
+
+// Profiling Only
+export const enableProfilerTimer: boolean = __PROFILE__;
+export const enableProfilerCommitHooks: boolean = __PROFILE__;
+export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__;
+export const enableUpdaterTracking: boolean = __PROFILE__;
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.readonly.js b/packages/shared/forks/ReactFeatureFlags.readonly.js
new file mode 100644
index 00000000000..f6317e26074
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.readonly.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This is only used by bundle tests so they can *read* the default feature flags.
+// It lets us determine whether we're running in Fire mode without making tests internal.
+const ReactFeatureFlags = require('../ReactFeatureFlags');
+// Forbid writes because this wouldn't work with bundle tests.
+module.exports = Object.freeze({...ReactFeatureFlags});
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
new file mode 100644
index 00000000000..4a1ded43c7d
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as ExportsType from './ReactFeatureFlags.test-renderer';
+
+export const enableAsyncDebugInfo: boolean = false;
+export const enableSchedulingProfiler: boolean = false;
+export const enableProfilerTimer: boolean = __PROFILE__;
+export const enableProfilerCommitHooks: boolean = __PROFILE__;
+export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__;
+export const enableComponentPerformanceTrack: boolean = true;
+export const enablePerformanceIssueReporting: boolean = false;
+export const enableUpdaterTracking: boolean = false;
+export const enableLegacyCache: boolean = __EXPERIMENTAL__;
+export const enableAsyncIterableChildren: boolean = false;
+export const enableTaint: boolean = true;
+export const enableHalt: boolean = true;
+export const disableCommentsAsDOMContainers: boolean = true;
+export const disableInputAttributeSyncing: boolean = false;
+export const enableScopeAPI: boolean = false;
+export const enableCreateEventHandleAPI: boolean = false;
+export const enableSuspenseCallback: boolean = false;
+export const enableTrustedTypesIntegration: boolean = false;
+export const disableTextareaChildren: boolean = false;
+export const enableSuspenseAvoidThisFallback: boolean = false;
+export const enableCPUSuspense: boolean = false;
+export const enableNoCloningMemoCache: boolean = false;
+export const enableLegacyFBSupport: boolean = false;
+export const enableMoveBefore: boolean = false;
+export const enableHiddenSubtreeInsertionEffectCleanup: boolean = false;
+
+export const enableRetryLaneExpiration: boolean = false;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+
+export const disableSchedulerTimeoutInWorkLoop: boolean = false;
+export const enableLegacyHidden: boolean = false;
+
+export const enableTransitionTracing: boolean = false;
+
+export const enableFizzExternalRuntime: boolean = true;
+
+export const alwaysThrottleRetries: boolean = true;
+
+export const passChildrenWhenCloningPersistedNodes: boolean = false;
+export const disableClientCache: boolean = true;
+
+export const enableInfiniteRenderLoopDetection: boolean = false;
+
+export const enableEagerAlternateStateNodeCleanup: boolean = true;
+
+export const enableYieldingBeforePassive: boolean = true;
+
+export const enableThrottledScheduling: boolean = false;
+export const enableViewTransition: boolean = false;
+export const enableGestureTransition: boolean = false;
+export const enableScrollEndPolyfill: boolean = true;
+export const enableSuspenseyImages: boolean = false;
+export const enableFizzBlockingRender: boolean = true;
+export const enableSrcObject: boolean = false;
+export const enableHydrationChangeEvent: boolean = false;
+export const enableDefaultTransitionIndicator: boolean = false;
+export const ownerStackLimit = 1e4;
+
+export const enableFragmentRefs: boolean = true;
+export const enableFragmentRefsScrollIntoView: boolean = true;
+export const enableFragmentRefsInstanceHandles: boolean = false;
+
+export const enableInternalInstanceMap: boolean = false;
+
+// TODO: This must be in sync with the main ReactFeatureFlags file because
+// the Test Renderer's value must be the same as the one used by the
+// react package.
+//
+// We really need to get rid of this whole module. Any test renderer specific
+// flags should be handled by the Fiber config.
+// const __NEXT_MAJOR__ = __EXPERIMENTAL__;
+export const disableLegacyMode: boolean = true;
+export const disableLegacyContext: boolean = true;
+export const disableLegacyContextForFunctionComponents: boolean = true;
+export const enableReactTestRendererWarning: boolean = true;
+
+export const enableObjectFiber: boolean = false;
+
+export const enableOptimisticKey: boolean = false;
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
new file mode 100644
index 00000000000..67ae35f04b9
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as ExportsType from './ReactFeatureFlags.test-renderer';
+
+export const alwaysThrottleRetries = false;
+export const disableClientCache = true;
+export const disableCommentsAsDOMContainers = true;
+export const disableInputAttributeSyncing = false;
+export const disableLegacyContext = false;
+export const disableLegacyContextForFunctionComponents = false;
+export const disableLegacyMode = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
+export const disableTextareaChildren = false;
+export const enableAsyncDebugInfo = false;
+export const enableAsyncIterableChildren = false;
+export const enableCPUSuspense = true;
+export const enableCreateEventHandleAPI = false;
+export const enableMoveBefore = false;
+export const enableFizzExternalRuntime = true;
+export const enableHalt = true;
+export const enableInfiniteRenderLoopDetection = false;
+export const enableHiddenSubtreeInsertionEffectCleanup = true;
+export const enableLegacyCache = false;
+export const enableLegacyFBSupport = false;
+export const enableLegacyHidden = false;
+export const enableNoCloningMemoCache = false;
+export const enableObjectFiber = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
+export const enableProfilerTimer = __PROFILE__;
+export const enableReactTestRendererWarning = false;
+export const enableRetryLaneExpiration = false;
+export const enableSchedulingProfiler = __PROFILE__;
+export const enableComponentPerformanceTrack = false;
+export const enablePerformanceIssueReporting = false;
+export const enableScopeAPI = false;
+export const enableEagerAlternateStateNodeCleanup = true;
+export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseCallback = false;
+export const enableTaint = true;
+export const enableTransitionTracing = false;
+export const enableTrustedTypesIntegration = false;
+export const enableUpdaterTracking = false;
+export const passChildrenWhenCloningPersistedNodes = false;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+export const enableYieldingBeforePassive = false;
+export const enableThrottledScheduling = false;
+export const enableViewTransition = false;
+export const enableGestureTransition = false;
+export const enableScrollEndPolyfill = true;
+export const enableSuspenseyImages = false;
+export const enableFizzBlockingRender = true;
+export const enableSrcObject = false;
+export const enableHydrationChangeEvent = false;
+export const enableDefaultTransitionIndicator = true;
+export const enableFragmentRefs = false;
+export const enableFragmentRefsScrollIntoView = false;
+export const ownerStackLimit = 1e4;
+export const enableOptimisticKey = false;
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
new file mode 100644
index 00000000000..4434cfa6c64
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as ExportsType from './ReactFeatureFlags.test-renderer.www';
+
+export const enableAsyncDebugInfo: boolean = false;
+export const enableSchedulingProfiler: boolean = false;
+export const enableProfilerTimer: boolean = __PROFILE__;
+export const enableProfilerCommitHooks: boolean = __PROFILE__;
+export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__;
+export const enableComponentPerformanceTrack: boolean = false;
+export const enablePerformanceIssueReporting: boolean = false;
+export const enableUpdaterTracking: boolean = false;
+export const enableLegacyCache: boolean = true;
+export const enableAsyncIterableChildren: boolean = false;
+export const enableTaint: boolean = true;
+export const enableHalt: boolean = true;
+export const disableCommentsAsDOMContainers: boolean = true;
+export const disableInputAttributeSyncing: boolean = false;
+export const enableScopeAPI: boolean = true;
+export const enableCreateEventHandleAPI: boolean = false;
+export const enableSuspenseCallback: boolean = true;
+export const disableLegacyContext: boolean = false;
+export const disableLegacyContextForFunctionComponents: boolean = false;
+export const enableTrustedTypesIntegration: boolean = false;
+export const disableTextareaChildren: boolean = false;
+export const enableSuspenseAvoidThisFallback: boolean = true;
+export const enableCPUSuspense: boolean = false;
+export const enableNoCloningMemoCache: boolean = false;
+export const enableLegacyFBSupport: boolean = false;
+export const enableMoveBefore: boolean = false;
+export const enableHiddenSubtreeInsertionEffectCleanup: boolean = true;
+
+export const enableRetryLaneExpiration: boolean = false;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+
+export const disableSchedulerTimeoutInWorkLoop: boolean = false;
+export const enableLegacyHidden: boolean = false;
+
+export const enableTransitionTracing: boolean = false;
+
+export const enableFizzExternalRuntime: boolean = false;
+
+export const alwaysThrottleRetries: boolean = true;
+
+export const passChildrenWhenCloningPersistedNodes: boolean = false;
+export const disableClientCache: boolean = true;
+
+export const enableInfiniteRenderLoopDetection: boolean = false;
+
+export const enableReactTestRendererWarning: boolean = false;
+export const disableLegacyMode: boolean = true;
+
+export const enableObjectFiber: boolean = false;
+export const enableEagerAlternateStateNodeCleanup: boolean = true;
+
+export const enableYieldingBeforePassive: boolean = false;
+
+export const enableThrottledScheduling: boolean = false;
+export const enableViewTransition: boolean = false;
+export const enableGestureTransition: boolean = false;
+export const enableScrollEndPolyfill: boolean = true;
+export const enableSuspenseyImages: boolean = false;
+export const enableFizzBlockingRender: boolean = true;
+export const enableSrcObject: boolean = false;
+export const enableHydrationChangeEvent: boolean = false;
+export const enableDefaultTransitionIndicator: boolean = true;
+
+export const enableFragmentRefs: boolean = false;
+export const enableFragmentRefsScrollIntoView: boolean = false;
+export const enableFragmentRefsInstanceHandles: boolean = false;
+export const ownerStackLimit = 1e4;
+
+export const enableInternalInstanceMap: boolean = false;
+
+export const enableOptimisticKey: boolean = false;
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
new file mode 100644
index 00000000000..c5a0cf63fd6
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+
+// In www, these flags are controlled by GKs. Because most GKs have some
+// population running in either mode, we should run our tests that way, too,
+//
+// Use __VARIANT__ to simulate a GK. The tests will be run twice: once
+// with the __VARIANT__ set to `true`, and once set to `false`.
+
+export const alwaysThrottleRetries: boolean = __VARIANT__;
+export const disableLegacyContextForFunctionComponents: boolean = __VARIANT__;
+export const disableSchedulerTimeoutInWorkLoop: boolean = __VARIANT__;
+export const enableHiddenSubtreeInsertionEffectCleanup: boolean = __VARIANT__;
+export const enableNoCloningMemoCache: boolean = __VARIANT__;
+export const enableObjectFiber: boolean = __VARIANT__;
+export const enableRetryLaneExpiration: boolean = __VARIANT__;
+export const enableTransitionTracing: boolean = __VARIANT__;
+export const retryLaneExpirationMs = 5000;
+export const syncLaneExpirationMs = 250;
+export const transitionLaneExpirationMs = 5000;
+
+export const enableSchedulingProfiler: boolean = __VARIANT__;
+
+export const enableInfiniteRenderLoopDetection: boolean = __VARIANT__;
+
+export const enableFastAddPropertiesInDiffing: boolean = __VARIANT__;
+export const enableViewTransition: boolean = __VARIANT__;
+export const enableComponentPerformanceTrack: boolean = __VARIANT__;
+export const enableScrollEndPolyfill: boolean = __VARIANT__;
+export const enableFragmentRefs: boolean = __VARIANT__;
+export const enableFragmentRefsScrollIntoView: boolean = __VARIANT__;
+export const enableAsyncDebugInfo: boolean = __VARIANT__;
+
+export const enableInternalInstanceMap: boolean = __VARIANT__;
+
+// TODO: These flags are hard-coded to the default values used in open source.
+// Update the tests so that they pass in either mode, then set these
+// to __VARIANT__.
+export const enableTrustedTypesIntegration: boolean = false;
+// You probably *don't* want to add more hardcoded ones.
+// Instead, try to add them above with the __VARIANT__ value.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
new file mode 100644
index 00000000000..bc64b65053b
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as ExportsType from './ReactFeatureFlags.www';
+import typeof * as DynamicFeatureFlags from './ReactFeatureFlags.www-dynamic';
+
+// Re-export dynamic flags from the www version.
+const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');
+
+export const {
+  alwaysThrottleRetries,
+  disableLegacyContextForFunctionComponents,
+  disableSchedulerTimeoutInWorkLoop,
+  enableHiddenSubtreeInsertionEffectCleanup,
+  enableInfiniteRenderLoopDetection,
+  enableNoCloningMemoCache,
+  enableObjectFiber,
+  enableRetryLaneExpiration,
+  enableTransitionTracing,
+  enableTrustedTypesIntegration,
+  retryLaneExpirationMs,
+  syncLaneExpirationMs,
+  transitionLaneExpirationMs,
+  enableViewTransition,
+  enableComponentPerformanceTrack,
+  enableScrollEndPolyfill,
+  enableFragmentRefs,
+  enableFragmentRefsScrollIntoView,
+  enableAsyncDebugInfo,
+  enableInternalInstanceMap,
+} = dynamicFeatureFlags;
+
+// On WWW, __EXPERIMENTAL__ is used for a new modern build.
+// It's not used anywhere in production yet.
+
+export const enableProfilerTimer = __PROFILE__;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
+export const enableUpdaterTracking = __PROFILE__;
+
+export const enableSuspenseAvoidThisFallback: boolean = true;
+
+export const enableCPUSuspense: boolean = true;
+export const enableMoveBefore: boolean = false;
+export const disableInputAttributeSyncing: boolean = false;
+export const enableLegacyFBSupport: boolean = true;
+
+export const enableYieldingBeforePassive: boolean = false;
+
+export const enableThrottledScheduling: boolean = false;
+
+export const enablePerformanceIssueReporting: boolean = false;
+
+// Logs additional User Timing API marks for use with an experimental profiling tool.
+export const enableSchedulingProfiler: boolean =
+  __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler;
+
+export const disableLegacyContext = __EXPERIMENTAL__;
+
+export const enableLegacyCache: boolean = true;
+
+export const enableAsyncIterableChildren: boolean = false;
+
+export const enableTaint: boolean = false;
+
+export const enableHalt: boolean = true;
+
+// TODO: www currently relies on this feature. It's disabled in open source.
+// Need to remove it.
+export const disableCommentsAsDOMContainers: boolean = false;
+
+export const enableCreateEventHandleAPI: boolean = true;
+
+export const enableScopeAPI: boolean = true;
+
+export const enableSuspenseCallback: boolean = true;
+
+export const enableLegacyHidden: boolean = true;
+
+export const disableTextareaChildren = __EXPERIMENTAL__;
+
+export const enableFizzExternalRuntime: boolean = true;
+
+export const passChildrenWhenCloningPersistedNodes: boolean = false;
+
+export const disableClientCache: boolean = true;
+
+export const enableReactTestRendererWarning: boolean = false;
+
+export const disableLegacyMode: boolean = true;
+
+export const enableEagerAlternateStateNodeCleanup: boolean = true;
+
+export const enableGestureTransition: boolean = false;
+
+export const enableSuspenseyImages: boolean = false;
+export const enableFizzBlockingRender: boolean = true;
+export const enableSrcObject: boolean = false;
+export const enableHydrationChangeEvent: boolean = false;
+export const enableDefaultTransitionIndicator: boolean = true;
+
+export const ownerStackLimit = 1e4;
+
+export const enableFragmentRefsInstanceHandles: boolean = true;
+
+export const enableOptimisticKey: boolean = false;
+
+// Flow magic to verify the exports of this file match the original version.
+((((null: any): ExportsType): FeatureFlagsType): ExportsType);
diff --git a/packages/shared/formatProdErrorMessage.js b/packages/shared/formatProdErrorMessage.js
new file mode 100644
index 00000000000..a890d33ee26
--- /dev/null
+++ b/packages/shared/formatProdErrorMessage.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 normal `invariant` calls with
+// template literal strings. The messages will be replaced with error codes
+// during build.
+
+function formatProdErrorMessage(code) {
+  let url = 'https://react.dev/errors/' + code;
+  if (arguments.length > 1) {
+    url += '?args[]=' + encodeURIComponent(arguments[1]);
+    for (let i = 2; i < arguments.length; i++) {
+      url += '&args[]=' + encodeURIComponent(arguments[i]);
+    }
+  }
+
+  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.'
+  );
+}
+
+export default formatProdErrorMessage;
diff --git a/packages/shared/getComponentNameFromType.js b/packages/shared/getComponentNameFromType.js
new file mode 100644
index 00000000000..d9ed331660f
--- /dev/null
+++ b/packages/shared/getComponentNameFromType.js
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {LazyComponent} from 'react/src/ReactLazy';
+import type {ReactContext, ReactConsumerType} from 'shared/ReactTypes';
+
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_CONSUMER_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_TRACING_MARKER_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE,
+} from 'shared/ReactSymbols';
+
+import {
+  enableTransitionTracing,
+  enableViewTransition,
+} from './ReactFeatureFlags';
+
+// Keep in sync with react-reconciler/getComponentNameFromFiber
+function getWrappedName(
+  outerType: mixed,
+  innerType: any,
+  wrapperName: string,
+): string {
+  const displayName = (outerType: any).displayName;
+  if (displayName) {
+    return displayName;
+  }
+  const functionName = innerType.displayName || innerType.name || '';
+  return functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName;
+}
+
+// Keep in sync with react-reconciler/getComponentNameFromFiber
+function getContextName(type: ReactContext<any>) {
+  return type.displayName || 'Context';
+}
+
+const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference');
+
+// Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+export default function getComponentNameFromType(type: mixed): string | null {
+  if (type == null) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+  if (typeof type === 'function') {
+    if ((type: any).$$typeof === REACT_CLIENT_REFERENCE) {
+      // TODO: Create a convention for naming client references with debug info.
+      return null;
+    }
+    return (type: any).displayName || type.name || null;
+  }
+  if (typeof type === 'string') {
+    return type;
+  }
+  switch (type) {
+    case REACT_FRAGMENT_TYPE:
+      return 'Fragment';
+    case REACT_PROFILER_TYPE:
+      return 'Profiler';
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+    case REACT_ACTIVITY_TYPE:
+      return 'Activity';
+    case REACT_VIEW_TRANSITION_TYPE:
+      if (enableViewTransition) {
+        return 'ViewTransition';
+      }
+    // Fall through
+    case REACT_TRACING_MARKER_TYPE:
+      if (enableTransitionTracing) {
+        return 'TracingMarker';
+      }
+  }
+  if (typeof type === 'object') {
+    if (__DEV__) {
+      if (typeof (type: any).tag === 'number') {
+        console.error(
+          'Received an unexpected object in getComponentNameFromType(). ' +
+            'This is likely a bug in React. Please file an issue.',
+        );
+      }
+    }
+    switch (type.$$typeof) {
+      case REACT_PORTAL_TYPE:
+        return 'Portal';
+      case REACT_CONTEXT_TYPE:
+        const context: ReactContext<any> = (type: any);
+        return getContextName(context);
+      case REACT_CONSUMER_TYPE:
+        const consumer: ReactConsumerType<any> = (type: any);
+        return getContextName(consumer._context) + '.Consumer';
+      case REACT_FORWARD_REF_TYPE:
+        return getWrappedName(type, type.render, 'ForwardRef');
+      case REACT_MEMO_TYPE:
+        const outerName = (type: any).displayName || null;
+        if (outerName !== null) {
+          return outerName;
+        }
+        return getComponentNameFromType(type.type) || 'Memo';
+      case REACT_LAZY_TYPE: {
+        const lazyComponent: LazyComponent<any, any> = (type: any);
+        const payload = lazyComponent._payload;
+        const init = lazyComponent._init;
+        try {
+          return getComponentNameFromType(init(payload));
+        } catch (x) {
+          return null;
+        }
+      }
+    }
+  }
+  return null;
+}
diff --git a/packages/shared/getPrototypeOf.js b/packages/shared/getPrototypeOf.js
new file mode 100644
index 00000000000..2137bdc1c39
--- /dev/null
+++ b/packages/shared/getPrototypeOf.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 getPrototypeOf = Object.getPrototypeOf;
+
+export default getPrototypeOf;
diff --git a/packages/shared/hasOwnProperty.js b/packages/shared/hasOwnProperty.js
new file mode 100644
index 00000000000..2535814b85b
--- /dev/null
+++ b/packages/shared/hasOwnProperty.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// $FlowFixMe[method-unbinding]
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+export default hasOwnProperty;
diff --git a/packages/shared/isArray.js b/packages/shared/isArray.js
new file mode 100644
index 00000000000..da50301a720
--- /dev/null
+++ b/packages/shared/isArray.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 function isArray<T>(
+  v: T,
+  // eslint-disable-next-line
+): v is T extends $ReadOnlyArray<mixed> ? T : empty;
+
+const isArrayImpl = Array.isArray;
+
+function isArray(a: mixed): boolean {
+  return isArrayImpl(a);
+}
+
+export default isArray;
diff --git a/packages/shared/noop.js b/packages/shared/noop.js
new file mode 100644
index 00000000000..0188292909d
--- /dev/null
+++ b/packages/shared/noop.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 noop() {}
diff --git a/packages/shared/normalizeConsoleFormat.js b/packages/shared/normalizeConsoleFormat.js
new file mode 100644
index 00000000000..f224647425a
--- /dev/null
+++ b/packages/shared/normalizeConsoleFormat.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Takes a format string (first argument to console) and returns a normalized
+// string that has the exact number of arguments as the args. That way it's safe
+// to prepend or append to it.
+export default function normalizeConsoleFormat(
+  formatString: string,
+  args: $ReadOnlyArray<mixed>,
+  firstArg: number,
+): string {
+  let j = firstArg;
+  let normalizedString = '';
+  let last = 0;
+  for (let i = 0; i < formatString.length - 1; i++) {
+    if (formatString.charCodeAt(i) !== 37 /* "%" */) {
+      continue;
+    }
+    switch (formatString.charCodeAt(++i)) {
+      case 79 /* "O" */:
+      case 99 /* "c" */:
+      case 100 /* "d" */:
+      case 102 /* "f" */:
+      case 105 /* "i" */:
+      case 111 /* "o" */:
+      case 115 /* "s" */: {
+        if (j < args.length) {
+          // We have a matching argument.
+          j++;
+        } else {
+          // We have more format specifiers than arguments.
+          // So we need to escape this to print the literal.
+          normalizedString += formatString.slice(last, (last = i)) + '%';
+        }
+      }
+    }
+  }
+  normalizedString += formatString.slice(last, formatString.length);
+  // Pad with extra format specifiers for the rest.
+  while (j < args.length) {
+    if (normalizedString !== '') {
+      normalizedString += ' ';
+    }
+    // Not every environment has the same default.
+    // This seems to be what Chrome DevTools defaults to.
+    normalizedString += typeof args[j] === 'string' ? '%s' : '%o';
+    j++;
+  }
+  return normalizedString;
+}
diff --git a/packages/shared/objectIs.js b/packages/shared/objectIs.js
new file mode 100644
index 00000000000..608adfc3bcf
--- /dev/null
+++ b/packages/shared/objectIs.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x: any, y: any) {
+  return (
+    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
+  );
+}
+
+const objectIs: (x: any, y: any) => boolean =
+  // $FlowFixMe[method-unbinding]
+  typeof Object.is === 'function' ? Object.is : is;
+
+export default objectIs;
diff --git a/packages/shared/package.json b/packages/shared/package.json
new file mode 100644
index 00000000000..3398f229c58
--- /dev/null
+++ b/packages/shared/package.json
@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "shared",
+  "version": "0.0.0"
+}
diff --git a/packages/shared/reportGlobalError.js b/packages/shared/reportGlobalError.js
new file mode 100644
index 00000000000..fd3d0b34ab6
--- /dev/null
+++ b/packages/shared/reportGlobalError.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 reportGlobalError: (error: mixed) => void =
+  typeof reportError === 'function'
+    ? // In modern browsers, reportError will dispatch an error event,
+      // emulating an uncaught JavaScript error.
+      reportError
+    : error => {
+        if (
+          typeof window === 'object' &&
+          typeof window.ErrorEvent === 'function'
+        ) {
+          // Browser Polyfill
+          const message =
+            typeof error === 'object' &&
+            error !== null &&
+            typeof error.message === 'string'
+              ? // eslint-disable-next-line react-internal/safe-string-coercion
+                String(error.message)
+              : // eslint-disable-next-line react-internal/safe-string-coercion
+                String(error);
+          const event = new window.ErrorEvent('error', {
+            bubbles: true,
+            cancelable: true,
+            message: message,
+            error: error,
+          });
+          const shouldLog = window.dispatchEvent(event);
+          if (!shouldLog) {
+            return;
+          }
+        } else if (
+          typeof process === 'object' &&
+          // $FlowFixMe[method-unbinding]
+          typeof process.emit === 'function'
+        ) {
+          // Node Polyfill
+          process.emit('uncaughtException', error);
+          return;
+        }
+        console['error'](error);
+      };
+
+export default reportGlobalError;
diff --git a/packages/shared/shallowEqual.js b/packages/shared/shallowEqual.js
new file mode 100644
index 00000000000..7c73b88c05c
--- /dev/null
+++ b/packages/shared/shallowEqual.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 is from './objectIs';
+import hasOwnProperty from './hasOwnProperty';
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA: mixed, objB: mixed): boolean {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (let i = 0; i < keysA.length; i++) {
+    const currentKey = keysA[i];
+    if (
+      !hasOwnProperty.call(objB, currentKey) ||
+      // $FlowFixMe[incompatible-use] lost refinement of `objB`
+      !is(objA[currentKey], objB[currentKey])
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export default shallowEqual;
diff --git a/packages/use-subscription/README.md b/packages/use-subscription/README.md
new file mode 100644
index 00000000000..ee40f3602c0
--- /dev/null
+++ b/packages/use-subscription/README.md
@@ -0,0 +1,108 @@
+# use-subscription
+
+React Hook for subscribing to external data sources.
+
+**You may now migrate to [`use-sync-external-store`](https://www.npmjs.com/package/use-sync-external-store) directly instead, which has the same API as [`React.useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore). The `use-subscription` package is now a thin wrapper over `use-sync-external-store` and will not be updated further.**
+
+# 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/use-subscription/index.js b/packages/use-subscription/index.js
new file mode 100644
index 00000000000..d775e55695e
--- /dev/null
+++ b/packages/use-subscription/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+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 00000000000..84c3d1091ce
--- /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.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 00000000000..a784ea751e7
--- /dev/null
+++ b/packages/use-subscription/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "use-subscription",
+  "description": "Reusable hooks",
+  "version": "1.13.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/use-subscription"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "cjs/"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "rxjs": "^5.5.6"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.5.0"
+  }
+}
diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.js b/packages/use-subscription/src/__tests__/useSubscription-test.js
new file mode 100644
index 00000000000..6642ab35afb
--- /dev/null
+++ b/packages/use-subscription/src/__tests__/useSubscription-test.js
@@ -0,0 +1,610 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;
+let Scheduler;
+let ReplaySubject;
+let assertLog;
+let waitForAll;
+let waitFor;
+let waitForPaint;
+
+describe('useSubscription', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('scheduler', () => require('scheduler/unstable_mock'));
+
+    useSubscription = require('use-subscription').useSubscription;
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+
+    act = require('internal-test-utils').act;
+
+    BehaviorSubject = require('rxjs').BehaviorSubject;
+    ReplaySubject = require('rxjs').ReplaySubject;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    waitForPaint = InternalTestUtils.waitForPaint;
+    assertLog = InternalTestUtils.assertLog;
+    waitFor = InternalTestUtils.waitFor;
+  });
+
+  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', async () => {
+    function Child({value = 'default'}) {
+      Scheduler.log(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();
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Subscription source={observable} />);
+    });
+    assertLog(['default']);
+
+    // Updates while subscribed should re-render the child component
+    await act(() => observable.next(123));
+    assertLog([123]);
+    await act(() => observable.next('abc'));
+    assertLog(['abc']);
+
+    // Unmounting the subscriber should remove listeners
+    await act(() => root.render(<div />));
+    await act(() => observable.next(456));
+    await waitForAll([]);
+  });
+
+  it('should support observable types like RxJS ReplaySubject', async () => {
+    function Child({value = 'default'}) {
+      Scheduler.log(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');
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Subscription source={observable} />);
+    });
+    assertLog(['initial']);
+    await act(() => observable.next('updated'));
+    assertLog(['updated']);
+
+    await waitForAll([]);
+
+    // Unsetting the subscriber prop should reset subscribed values
+    observable = createReplaySubject(undefined);
+    await act(() => root.render(<Subscription source={observable} />));
+    assertLog(['default']);
+  });
+
+  it('should unsubscribe from old sources and subscribe to new sources when memoized props change', async () => {
+    function Child({value = 'default'}) {
+      Scheduler.log(value);
+      return null;
+    }
+
+    const 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);
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Subscription source={observableA} />);
+    });
+
+    // Updates while subscribed should re-render the child component
+    assertLog(['a-0']);
+    expect(subscriptions).toHaveLength(1);
+    expect(subscriptions[0]).toBe(observableA);
+
+    // Unsetting the subscriber prop should reset subscribed values
+    await act(() => root.render(<Subscription source={observableB} />));
+
+    assertLog(['b-0']);
+    expect(subscriptions).toHaveLength(2);
+    expect(subscriptions[1]).toBe(observableB);
+
+    // Updates to the old subscribable should not re-render the child component
+    await act(() => observableA.next('a-1'));
+    await waitForAll([]);
+
+    // Updates to the bew subscribable should re-render the child component
+    await act(() => observableB.next('b-1'));
+    assertLog(['b-1']);
+
+    expect(subscriptions).toHaveLength(2);
+  });
+
+  it('should unsubscribe from old sources and subscribe to new sources when useCallback functions change', async () => {
+    function Child({value = 'default'}) {
+      Scheduler.log(value);
+      return null;
+    }
+
+    const 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);
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Subscription source={observableA} />);
+    });
+
+    // Updates while subscribed should re-render the child component
+    assertLog(['a-0']);
+    expect(subscriptions).toHaveLength(1);
+    expect(subscriptions[0]).toBe(observableA);
+
+    // Unsetting the subscriber prop should reset subscribed values
+    await act(() => root.render(<Subscription source={observableB} />));
+    assertLog(['b-0']);
+    expect(subscriptions).toHaveLength(2);
+    expect(subscriptions[1]).toBe(observableB);
+
+    // Updates to the old subscribable should not re-render the child component
+    await act(() => observableA.next('a-1'));
+    await waitForAll([]);
+
+    // Updates to the bew subscribable should re-render the child component
+    await act(() => observableB.next('b-1'));
+    assertLog(['b-1']);
+
+    expect(subscriptions).toHaveLength(2);
+  });
+
+  it('should ignore values emitted by a new subscribable until the commit phase', async () => {
+    const log = [];
+
+    function Grandchild({value}) {
+      Scheduler.log('Grandchild: ' + value);
+      return null;
+    }
+
+    function Child({value = 'default'}) {
+      Scheduler.log('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');
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Parent observed={observableA} />);
+    });
+    assertLog(['Child: a-0', 'Grandchild: a-0']);
+    expect(log).toEqual(['Parent.componentDidMount']);
+
+    // Start React update, but don't finish
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<Parent observed={observableB} />);
+      });
+
+      await waitFor(['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');
+    });
+
+    assertLog(['Grandchild: b-0', 'Child: b-3', 'Grandchild: b-3']);
+
+    // Update again
+    await act(() => root.render(<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.
+    assertLog(['Child: a-0', 'Grandchild: a-0']);
+    expect(log).toEqual([
+      'Parent.componentDidMount',
+      'Parent.componentDidUpdate',
+      'Parent.componentDidUpdate',
+    ]);
+  });
+
+  it('should not drop values emitted between updates', async () => {
+    const log = [];
+
+    function Grandchild({value}) {
+      Scheduler.log('Grandchild: ' + value);
+      return null;
+    }
+
+    function Child({value = 'default'}) {
+      Scheduler.log('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');
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Parent observed={observableA} />);
+    });
+    assertLog(['Child: a-0', 'Grandchild: a-0']);
+    expect(log).toEqual(['Parent.componentDidMount:a-0']);
+    log.splice(0);
+
+    // Start React update, but don't finish
+    await act(async () => {
+      React.startTransition(() => {
+        root.render(<Parent observed={observableB} />);
+      });
+      await waitFor(['Child: b-0']);
+      expect(log).toEqual([]);
+
+      // Emit some updates from the old subscribable
+      observableA.next('a-1');
+      observableA.next('a-2');
+
+      // Update again
+      React.startTransition(() => {
+        root.render(<Parent observed={observableA} />);
+      });
+
+      // Flush everything and ensure that the correct subscribable is used
+      await waitForAll([
+        'Child: a-2',
+        'Grandchild: a-2',
+        'Child: a-2',
+        'Grandchild: a-2',
+      ]);
+      expect(log).toEqual(['Parent.componentDidUpdate:a-2']);
+    });
+
+    // Updates from the new subscribable should be ignored.
+    log.splice(0);
+    await act(() => observableB.next('b-1'));
+    await waitForAll([]);
+    expect(log).toEqual([]);
+  });
+
+  it('should guard against updates that happen after unmounting', async () => {
+    function Child({value = 'default'}) {
+      Scheduler.log(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(async value => {
+      if (value === false) {
+        root.unmount();
+      }
+    });
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Subscription source={eventHandler} />);
+    });
+    assertLog([true]);
+
+    // This event should unmount
+    eventHandler.change(false);
+  });
+
+  it('does not return a value from the previous subscription if the source is updated', async () => {
+    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;
+    }
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(() => {
+      root.render(<Subscription subscription={subscription1} />);
+    });
+    await waitForAll([]);
+
+    await act(() => root.render(<Subscription subscription={subscription2} />));
+    await waitForAll([]);
+  });
+
+  it('should not tear if a mutation occurs during a concurrent update', async () => {
+    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.log(`render:${id}:${value}`);
+      return value;
+    };
+
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
+    await act(async () => {
+      // Initial render of "A"
+      mutate('A');
+      root.render(
+        <React.Fragment>
+          <Subscriber id="first" />
+          <Subscriber id="second" />
+        </React.Fragment>,
+      );
+      await waitForAll(['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');
+      await waitForAll(['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.
+      React.startTransition(() => {
+        mutate('C');
+      });
+      await waitForPaint(['render:first:C', 'render:second:C']);
+      React.startTransition(() => {
+        mutate('D');
+      });
+      await waitForAll(['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 00000000000..c2e3906923d
--- /dev/null
+++ b/packages/use-subscription/src/useSubscription.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useSyncExternalStore} from 'use-sync-external-store/shim';
+
+// 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 {
+  return useSyncExternalStore(subscribe, getCurrentValue);
+}
diff --git a/packages/use-sync-external-store/README.md b/packages/use-sync-external-store/README.md
new file mode 100644
index 00000000000..e9987a399b6
--- /dev/null
+++ b/packages/use-sync-external-store/README.md
@@ -0,0 +1,5 @@
+# use-sync-external-store
+
+Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports Hooks.
+
+See also https://github.com/reactwg/react-18/discussions/86.
diff --git a/packages/use-sync-external-store/index.js b/packages/use-sync-external-store/index.js
new file mode 100644
index 00000000000..2c9ef5a9fae
--- /dev/null
+++ b/packages/use-sync-external-store/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {useSyncExternalStore} from './src/useSyncExternalStore';
diff --git a/packages/use-sync-external-store/npm/index.js b/packages/use-sync-external-store/npm/index.js
new file mode 100644
index 00000000000..303d4b916e8
--- /dev/null
+++ b/packages/use-sync-external-store/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/use-sync-external-store.production.js');
+} else {
+  module.exports = require('./cjs/use-sync-external-store.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/shim/index.js b/packages/use-sync-external-store/npm/shim/index.js
new file mode 100644
index 00000000000..974854c2cd8
--- /dev/null
+++ b/packages/use-sync-external-store/npm/shim/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../cjs/use-sync-external-store-shim.production.js');
+} else {
+  module.exports = require('../cjs/use-sync-external-store-shim.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/shim/index.native.js b/packages/use-sync-external-store/npm/shim/index.native.js
new file mode 100644
index 00000000000..69bc7586bab
--- /dev/null
+++ b/packages/use-sync-external-store/npm/shim/index.native.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../cjs/use-sync-external-store-shim.native.production.js');
+} else {
+  module.exports = require('../cjs/use-sync-external-store-shim.native.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/shim/with-selector.js b/packages/use-sync-external-store/npm/shim/with-selector.js
new file mode 100644
index 00000000000..91859dbd472
--- /dev/null
+++ b/packages/use-sync-external-store/npm/shim/with-selector.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.js');
+} else {
+  module.exports = require('../cjs/use-sync-external-store-shim/with-selector.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/with-selector.js b/packages/use-sync-external-store/npm/with-selector.js
new file mode 100644
index 00000000000..c0d0da3b43d
--- /dev/null
+++ b/packages/use-sync-external-store/npm/with-selector.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/use-sync-external-store-with-selector.production.js');
+} else {
+  module.exports = require('./cjs/use-sync-external-store-with-selector.development.js');
+}
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
new file mode 100644
index 00000000000..5ca1f42860f
--- /dev/null
+++ b/packages/use-sync-external-store/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "use-sync-external-store",
+  "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
+  "version": "1.7.0",
+  "exports": {
+    ".": "./index.js",
+    "./with-selector": "./with-selector.js",
+    "./with-selector.js": "./with-selector.js",
+    "./shim": {
+      "react-native": "./shim/index.native.js",
+      "default": "./shim/index.js"
+    },
+    "./shim/index.js": "./shim/index.js",
+    "./shim/index.native": "./shim/index.native.js",
+    "./shim/index.native.js": "./shim/index.native.js",
+    "./shim/with-selector": "./shim/with-selector.js",
+    "./shim/with-selector.js": "./shim/with-selector.js",
+    "./package.json": "./package.json",
+    "./src/*": "./src/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/use-sync-external-store"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "index.native.js",
+    "with-selector.js",
+    "with-selector.native.js",
+    "shim/",
+    "cjs/"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react-17": "npm:react@^17",
+    "react-dom-17": "npm:react-dom@^17"
+  }
+}
diff --git a/packages/use-sync-external-store/shim/index.js b/packages/use-sync-external-store/shim/index.js
new file mode 100644
index 00000000000..4fff77d8935
--- /dev/null
+++ b/packages/use-sync-external-store/shim/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStoreShim';
diff --git a/packages/use-sync-external-store/shim/index.native.js b/packages/use-sync-external-store/shim/index.native.js
new file mode 100644
index 00000000000..4fff77d8935
--- /dev/null
+++ b/packages/use-sync-external-store/shim/index.native.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStoreShim';
diff --git a/packages/use-sync-external-store/shim/with-selector.js b/packages/use-sync-external-store/shim/with-selector.js
new file mode 100644
index 00000000000..23b78acfd94
--- /dev/null
+++ b/packages/use-sync-external-store/shim/with-selector.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {useSyncExternalStoreWithSelector} from 'use-sync-external-store/src/useSyncExternalStoreWithSelector';
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
new file mode 100644
index 00000000000..98f0f017b35
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 ReactNoop;
+let Scheduler;
+let useSyncExternalStore;
+let useSyncExternalStoreWithSelector;
+let act;
+let assertLog;
+
+// This tests the userspace shim of `useSyncExternalStore` in a server-rendering
+// (Node) environment
+describe('useSyncExternalStore (userspace shim, server rendering)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    // Remove useSyncExternalStore from the React imports so that we use the
+    // shim instead. Also removing startTransition, since we use that to detect
+    // outdated 18 alphas that don't yet include useSyncExternalStore.
+    //
+    // Longer term, we'll probably test this branch using an actual build of
+    // React 17.
+    jest.mock('react', () => {
+      const {
+        startTransition: _,
+        useSyncExternalStore: __,
+        ...otherExports
+      } = jest.requireActual('react');
+      return otherExports;
+    });
+
+    jest.mock('use-sync-external-store/shim', () =>
+      jest.requireActual('use-sync-external-store/shim/index.native'),
+    );
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    if (gate(flags => flags.source)) {
+      // The `shim/with-selector` module composes the main
+      // `use-sync-external-store` entrypoint. In the compiled artifacts, this
+      // is resolved to the `shim` implementation by our build config, but when
+      // running the tests against the source files, we need to tell Jest how to
+      // resolve it. Because this is a source module, this mock has no affect on
+      // the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('use-sync-external-store/shim'),
+      );
+      jest.mock('use-sync-external-store/src/isServerEnvironment', () =>
+        jest.requireActual(
+          'use-sync-external-store/src/forks/isServerEnvironment.native',
+        ),
+      );
+    }
+    useSyncExternalStore =
+      require('use-sync-external-store/shim').useSyncExternalStore;
+    useSyncExternalStoreWithSelector =
+      require('use-sync-external-store/shim/with-selector').useSyncExternalStoreWithSelector;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function createExternalStore(initialState) {
+    const listeners = new Set();
+    let currentState = initialState;
+    return {
+      set(text) {
+        currentState = text;
+        ReactNoop.batchedUpdates(() => {
+          listeners.forEach(listener => listener());
+        });
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      getState() {
+        return currentState;
+      },
+      getSubscriberCount() {
+        return listeners.size;
+      },
+    };
+  }
+
+  it('native version', async () => {
+    const store = createExternalStore('client');
+
+    function App() {
+      const text = useSyncExternalStore(
+        store.subscribe,
+        store.getState,
+        () => 'server',
+      );
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    assertLog(['client']);
+    expect(root).toMatchRenderedOutput('client');
+  });
+
+  it('Using isEqual to bailout', async () => {
+    const store = createExternalStore({a: 0, b: 0});
+
+    function A() {
+      const {a} = useSyncExternalStoreWithSelector(
+        store.subscribe,
+        store.getState,
+        null,
+        state => ({a: state.a}),
+        (state1, state2) => state1.a === state2.a,
+      );
+      return <Text text={'A' + a} />;
+    }
+    function B() {
+      const {b} = useSyncExternalStoreWithSelector(
+        store.subscribe,
+        store.getState,
+        null,
+        state => {
+          return {b: state.b};
+        },
+        (state1, state2) => state1.b === state2.b,
+      );
+      return <Text text={'B' + b} />;
+    }
+
+    function App() {
+      return (
+        <>
+          <A />
+          <B />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+
+    assertLog(['A0', 'B0']);
+    expect(root).toMatchRenderedOutput('A0B0');
+
+    // Update b but not a
+    await act(() => {
+      store.set({a: 0, b: 1});
+    });
+    // Only b re-renders
+    assertLog(['B1']);
+    expect(root).toMatchRenderedOutput('A0B1');
+
+    // Update a but not b
+    await act(() => {
+      store.set({a: 1, b: 1});
+    });
+    // Only a re-renders
+    assertLog(['A1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+  });
+});
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
new file mode 100644
index 00000000000..8d0446a129e
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -0,0 +1,1094 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 useSyncExternalStore;
+let useSyncExternalStoreWithSelector;
+let React;
+let ReactDOM;
+let ReactDOMClient;
+let Scheduler;
+let act;
+let useState;
+let useEffect;
+let useLayoutEffect;
+let assertLog;
+let assertConsoleErrorDev;
+
+// This tests shared behavior between the built-in and shim implementations of
+// of useSyncExternalStore.
+describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    if (gate(flags => flags.enableUseSyncExternalStoreShim)) {
+      // Test the shim against React 17.
+      jest.mock('react', () => {
+        return jest.requireActual(
+          __DEV__
+            ? 'react-17/umd/react.development.js'
+            : 'react-17/umd/react.production.min.js',
+        );
+      });
+      jest.mock('react-dom', () =>
+        jest.requireActual(
+          __DEV__
+            ? 'react-dom-17/umd/react-dom.development.js'
+            : 'react-dom-17/umd/react-dom.production.min.js',
+        ),
+      );
+      jest.mock('react-dom/client', () =>
+        jest.requireActual(
+          __DEV__
+            ? 'react-dom-17/umd/react-dom.development.js'
+            : 'react-dom-17/umd/react-dom.production.min.js',
+        ),
+      );
+    }
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+    assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
+    const internalAct = require('internal-test-utils').act;
+
+    // The internal act implementation doesn't batch updates by default, since
+    // it's mostly used to test concurrent mode. But since these tests run
+    // in both concurrent and legacy mode, I'm adding batching here.
+    act = cb => internalAct(() => ReactDOM.unstable_batchedUpdates(cb));
+    if (gate(flags => flags.source)) {
+      // The `shim/with-selector` module composes the main
+      // `use-sync-external-store` entrypoint. In the compiled artifacts, this
+      // is resolved to the `shim` implementation by our build config, but when
+      // running the tests against the source files, we need to tell Jest how to
+      // resolve it. Because this is a source module, this mock has no affect on
+      // the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('use-sync-external-store/shim'),
+      );
+    }
+    useSyncExternalStore =
+      require('use-sync-external-store/shim').useSyncExternalStore;
+    useSyncExternalStoreWithSelector =
+      require('use-sync-external-store/shim/with-selector').useSyncExternalStoreWithSelector;
+  });
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+  function createRoot(container) {
+    // This wrapper function exists so we can test both legacy roots and
+    // concurrent roots.
+    if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
+      // The native implementation only exists in 18+, so we test using
+      // concurrent mode. To test the legacy root behavior in the native
+      // implementation (which is supported in the sense that it needs to have
+      // the correct behavior, despite the fact that the legacy root API
+      // triggers a warning in 18), write a test that uses
+      // createLegacyRoot directly.
+      return ReactDOMClient.createRoot(container);
+    } else {
+      // This ReactDOM.render is from the React 17 npm module.
+      ReactDOM.render(null, container);
+      return {
+        render(children) {
+          ReactDOM.render(children, container);
+        },
+      };
+    }
+  }
+  function createExternalStore(initialState) {
+    const listeners = new Set();
+    let currentState = initialState;
+    return {
+      set(text) {
+        currentState = text;
+        ReactDOM.unstable_batchedUpdates(() => {
+          listeners.forEach(listener => listener());
+        });
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      getState() {
+        return currentState;
+      },
+      getSubscriberCount() {
+        return listeners.size;
+      },
+    };
+  }
+  it('basic usage', async () => {
+    const store = createExternalStore('Initial');
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, store.getState);
+      return React.createElement(Text, {
+        text: text,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog(['Initial']);
+    expect(container.textContent).toEqual('Initial');
+    await act(() => {
+      store.set('Updated');
+    });
+    assertLog(['Updated']);
+    expect(container.textContent).toEqual('Updated');
+  });
+  it('skips re-rendering if nothing changes', async () => {
+    const store = createExternalStore('Initial');
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, store.getState);
+      return React.createElement(Text, {
+        text: text,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog(['Initial']);
+    expect(container.textContent).toEqual('Initial');
+
+    // Update to the same value
+    await act(() => {
+      store.set('Initial');
+    });
+    // Should not re-render
+    assertLog([]);
+    expect(container.textContent).toEqual('Initial');
+  });
+  it('switch to a different store', async () => {
+    const storeA = createExternalStore(0);
+    const storeB = createExternalStore(0);
+    let setStore;
+    function App() {
+      const [store, _setStore] = useState(storeA);
+      setStore = _setStore;
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      return React.createElement(Text, {
+        text: value,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog([0]);
+    expect(container.textContent).toEqual('0');
+    await act(() => {
+      storeA.set(1);
+    });
+    assertLog([1]);
+    expect(container.textContent).toEqual('1');
+
+    // Switch stores and update in the same batch
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        // This update will be disregarded
+        storeA.set(2);
+        setStore(storeB);
+      });
+    });
+    // Now reading from B instead of A
+    assertLog([0]);
+    expect(container.textContent).toEqual('0');
+
+    // Update A
+    await act(() => {
+      storeA.set(3);
+    });
+    // Nothing happened, because we're no longer subscribed to A
+    assertLog([]);
+    expect(container.textContent).toEqual('0');
+
+    // Update B
+    await act(() => {
+      storeB.set(1);
+    });
+    assertLog([1]);
+    expect(container.textContent).toEqual('1');
+  });
+  it('selecting a specific value inside getSnapshot', async () => {
+    const store = createExternalStore({
+      a: 0,
+      b: 0,
+    });
+    function A() {
+      const a = useSyncExternalStore(store.subscribe, () => store.getState().a);
+      return React.createElement(Text, {
+        text: 'A' + a,
+      });
+    }
+    function B() {
+      const b = useSyncExternalStore(store.subscribe, () => store.getState().b);
+      return React.createElement(Text, {
+        text: 'B' + b,
+      });
+    }
+    function App() {
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(A, null),
+        React.createElement(B, null),
+      );
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog(['A0', 'B0']);
+    expect(container.textContent).toEqual('A0B0');
+
+    // Update b but not a
+    await act(() => {
+      store.set({
+        a: 0,
+        b: 1,
+      });
+    });
+    // Only b re-renders
+    assertLog(['B1']);
+    expect(container.textContent).toEqual('A0B1');
+
+    // Update a but not b
+    await act(() => {
+      store.set({
+        a: 1,
+        b: 1,
+      });
+    });
+    // Only a re-renders
+    assertLog(['A1']);
+    expect(container.textContent).toEqual('A1B1');
+  });
+
+  // In React 18, you can't observe in between a sync render and its
+  // passive effects, so this is only relevant to legacy roots
+  // @gate enableUseSyncExternalStoreShim
+  it(
+    "compares to current state before bailing out, even when there's a " +
+      'mutation in between the sync and passive effects',
+    async () => {
+      const store = createExternalStore(0);
+      function App() {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+        useEffect(() => {
+          Scheduler.log('Passive effect: ' + value);
+        }, [value]);
+        return React.createElement(Text, {
+          text: value,
+        });
+      }
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() => root.render(React.createElement(App, null)));
+      assertLog([0, 'Passive effect: 0']);
+
+      // Schedule an update. We'll intentionally not use `act` so that we can
+      // insert a mutation before React subscribes to the store in a
+      // passive effect.
+      store.set(1);
+      assertLog([
+        1,
+        // Passive effect hasn't fired yet
+      ]);
+      expect(container.textContent).toEqual('1');
+
+      // Flip the store state back to the previous value.
+      store.set(0);
+      assertLog([
+        'Passive effect: 1',
+        // Re-render. If the current state were tracked by updating a ref in a
+        // passive effect, then this would break because the previous render's
+        // passive effect hasn't fired yet, so we'd incorrectly think that
+        // the state hasn't changed.
+        0,
+      ]);
+      // Should flip back to 0
+      expect(container.textContent).toEqual('0');
+    },
+  );
+  it('mutating the store in between render and commit when getSnapshot has changed', async () => {
+    const store = createExternalStore({
+      a: 1,
+      b: 1,
+    });
+    const getSnapshotA = () => store.getState().a;
+    const getSnapshotB = () => store.getState().b;
+    function Child1({step}) {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      useLayoutEffect(() => {
+        if (step === 1) {
+          // Update B in a layout effect. This happens in the same commit
+          // that changed the getSnapshot in Child2. Child2's effects haven't
+          // fired yet, so it doesn't have access to the latest getSnapshot. So
+          // it can't use the getSnapshot to bail out.
+          Scheduler.log('Update B in commit phase');
+          store.set({
+            a: value.a,
+            b: 2,
+          });
+        }
+      }, [step]);
+      return null;
+    }
+    function Child2({step}) {
+      const label = step === 0 ? 'A' : 'B';
+      const getSnapshot = step === 0 ? getSnapshotA : getSnapshotB;
+      const value = useSyncExternalStore(store.subscribe, getSnapshot);
+      return React.createElement(Text, {
+        text: label + value,
+      });
+    }
+    let setStep;
+    function App() {
+      const [step, _setStep] = useState(0);
+      setStep = _setStep;
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(Child1, {
+          step: step,
+        }),
+        React.createElement(Child2, {
+          step: step,
+        }),
+      );
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog(['A1']);
+    expect(container.textContent).toEqual('A1');
+    await act(() => {
+      // Change getSnapshot and update the store in the same batch
+      setStep(1);
+    });
+    assertLog([
+      'B1',
+      'Update B in commit phase',
+      // If Child2 had used the old getSnapshot to bail out, then it would have
+      // incorrectly bailed out here instead of re-rendering.
+      'B2',
+    ]);
+    expect(container.textContent).toEqual('B2');
+  });
+  it('mutating the store in between render and commit when getSnapshot has _not_ changed', async () => {
+    // Same as previous test, but `getSnapshot` does not change
+    const store = createExternalStore({
+      a: 1,
+      b: 1,
+    });
+    const getSnapshotA = () => store.getState().a;
+    function Child1({step}) {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      useLayoutEffect(() => {
+        if (step === 1) {
+          // Update B in a layout effect. This happens in the same commit
+          // that changed the getSnapshot in Child2. Child2's effects haven't
+          // fired yet, so it doesn't have access to the latest getSnapshot. So
+          // it can't use the getSnapshot to bail out.
+          Scheduler.log('Update B in commit phase');
+          store.set({
+            a: value.a,
+            b: 2,
+          });
+        }
+      }, [step]);
+      return null;
+    }
+    function Child2({step}) {
+      const value = useSyncExternalStore(store.subscribe, getSnapshotA);
+      return React.createElement(Text, {
+        text: 'A' + value,
+      });
+    }
+    let setStep;
+    function App() {
+      const [step, _setStep] = useState(0);
+      setStep = _setStep;
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(Child1, {
+          step: step,
+        }),
+        React.createElement(Child2, {
+          step: step,
+        }),
+      );
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog(['A1']);
+    expect(container.textContent).toEqual('A1');
+
+    // This will cause a layout effect, and in the layout effect we'll update
+    // the store
+    await act(() => {
+      setStep(1);
+    });
+    assertLog([
+      'A1',
+      // This updates B, but since Child2 doesn't subscribe to B, it doesn't
+      // need to re-render.
+      'Update B in commit phase',
+      // No re-render
+    ]);
+    expect(container.textContent).toEqual('A1');
+  });
+  it("does not bail out if the previous update hasn't finished yet", async () => {
+    const store = createExternalStore(0);
+    function Child1() {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      useLayoutEffect(() => {
+        if (value === 1) {
+          Scheduler.log('Reset back to 0');
+          store.set(0);
+        }
+      }, [value]);
+      return React.createElement(Text, {
+        text: value,
+      });
+    }
+    function Child2() {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      return React.createElement(Text, {
+        text: value,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() =>
+      root.render(
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(Child1, null),
+          React.createElement(Child2, null),
+        ),
+      ),
+    );
+    assertLog([0, 0]);
+    expect(container.textContent).toEqual('00');
+    await act(() => {
+      store.set(1);
+    });
+    assertLog([1, 1, 'Reset back to 0', 0, 0]);
+    expect(container.textContent).toEqual('00');
+  });
+  it('uses the latest getSnapshot, even if it changed in the same batch as a store update', async () => {
+    const store = createExternalStore({
+      a: 0,
+      b: 0,
+    });
+    const getSnapshotA = () => store.getState().a;
+    const getSnapshotB = () => store.getState().b;
+    let setGetSnapshot;
+    function App() {
+      const [getSnapshot, _setGetSnapshot] = useState(() => getSnapshotA);
+      setGetSnapshot = _setGetSnapshot;
+      const text = useSyncExternalStore(store.subscribe, getSnapshot);
+      return React.createElement(Text, {
+        text: text,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog([0]);
+
+    // Update the store and getSnapshot at the same time
+    await act(() => {
+      ReactDOM.flushSync(() => {
+        setGetSnapshot(() => getSnapshotB);
+        store.set({
+          a: 1,
+          b: 2,
+        });
+      });
+    });
+    // It should read from B instead of A
+    assertLog([2]);
+    expect(container.textContent).toEqual('2');
+  });
+  it('handles errors thrown by getSnapshot', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {
+        error: null,
+      };
+      static getDerivedStateFromError(error) {
+        return {
+          error,
+        };
+      }
+      render() {
+        if (this.state.error) {
+          return React.createElement(Text, {
+            text: this.state.error.message,
+          });
+        }
+        return this.props.children;
+      }
+    }
+    const store = createExternalStore({
+      value: 0,
+      throwInGetSnapshot: false,
+      throwInIsEqual: false,
+    });
+    function App() {
+      const {value} = useSyncExternalStore(store.subscribe, () => {
+        const state = store.getState();
+        if (state.throwInGetSnapshot) {
+          throw new Error('Error in getSnapshot');
+        }
+        return state;
+      });
+      return React.createElement(Text, {
+        text: value,
+      });
+    }
+    const errorBoundary = React.createRef(null);
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() =>
+      root.render(
+        React.createElement(
+          ErrorBoundary,
+          {
+            ref: errorBoundary,
+          },
+          React.createElement(App, null),
+        ),
+      ),
+    );
+    assertLog([0]);
+    expect(container.textContent).toEqual('0');
+
+    // Update that throws in a getSnapshot. We can catch it with an error boundary.
+    if (__DEV__ && gate(flags => flags.enableUseSyncExternalStoreShim)) {
+      // In 17, the error is re-thrown in DEV.
+      await expect(async () => {
+        await act(() => {
+          store.set({
+            value: 1,
+            throwInGetSnapshot: true,
+            throwInIsEqual: false,
+          });
+        });
+      }).rejects.toThrow('Error in getSnapshot');
+    } else {
+      await act(() => {
+        store.set({
+          value: 1,
+          throwInGetSnapshot: true,
+          throwInIsEqual: false,
+        });
+      });
+    }
+    assertLog(
+      gate(flags => flags.enableUseSyncExternalStoreShim)
+        ? ['Error in getSnapshot']
+        : [
+            'Error in getSnapshot',
+            // In a concurrent root, React renders a second time to attempt to
+            // recover from the error.
+            'Error in getSnapshot',
+          ],
+    );
+    expect(container.textContent).toEqual('Error in getSnapshot');
+  });
+  it('Infinite loop if getSnapshot keeps returning new reference', async () => {
+    const store = createExternalStore({});
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, () => ({}));
+      return React.createElement(Text, {
+        text: JSON.stringify(text),
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        ReactDOM.flushSync(async () =>
+          root.render(React.createElement(App, null)),
+        );
+      });
+    }).rejects.toThrow(
+      'Maximum update depth exceeded. This can happen when a component repeatedly ' +
+        'calls setState inside componentWillUpdate or componentDidUpdate. React limits ' +
+        'the number of nested updates to prevent infinite loops.',
+    );
+
+    assertConsoleErrorDev(
+      gate(flags => flags.enableUseSyncExternalStoreShim)
+        ? [
+            [
+              'The result of getSnapshot should be cached to avoid an infinite loop',
+              {withoutStack: true},
+            ],
+            [
+              'Error: Maximum update depth exceeded. ' +
+                'This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. ' +
+                'React limits the number of nested updates to prevent infinite loops.' +
+                '\n    in <stack>',
+              {withoutStack: true},
+            ],
+            'The above error occurred in the <App> component:\n\n' +
+              '    in App (at **)\n\n' +
+              'Consider adding an error boundary to your tree to customize error handling behavior.\n' +
+              'Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.',
+          ]
+        : [
+            'The result of getSnapshot should be cached to avoid an infinite loop' +
+              '\n    in App (at **)',
+          ],
+    );
+  });
+  it('getSnapshot can return NaN without infinite loop warning', async () => {
+    const store = createExternalStore('not a number');
+    function App() {
+      const value = useSyncExternalStore(store.subscribe, () =>
+        parseInt(store.getState(), 10),
+      );
+      return React.createElement(Text, {
+        text: value,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+
+    // Initial render that reads a snapshot of NaN. This is OK because we use
+    // Object.is algorithm to compare values.
+    await act(() => root.render(React.createElement(App, null)));
+    expect(container.textContent).toEqual('NaN');
+    assertLog([NaN]);
+
+    // Update to real number
+    await act(() => store.set(123));
+    expect(container.textContent).toEqual('123');
+    assertLog([123]);
+
+    // Update back to NaN
+    await act(() => store.set('not a number'));
+    expect(container.textContent).toEqual('NaN');
+    assertLog([NaN]);
+  });
+  describe('extra features implemented in user-space', () => {
+    it('memoized selectors are only called once per update', async () => {
+      const store = createExternalStore({
+        a: 0,
+        b: 0,
+      });
+      function selector(state) {
+        Scheduler.log('Selector');
+        return state.a;
+      }
+      function App() {
+        Scheduler.log('App');
+        const a = useSyncExternalStoreWithSelector(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+        );
+        return React.createElement(Text, {
+          text: 'A' + a,
+        });
+      }
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() => root.render(React.createElement(App, null)));
+      assertLog(['App', 'Selector', 'A0']);
+      expect(container.textContent).toEqual('A0');
+
+      // Update the store
+      await act(() => {
+        store.set({
+          a: 1,
+          b: 0,
+        });
+      });
+      assertLog([
+        // The selector runs before React starts rendering
+        'Selector',
+        'App',
+        // And because the selector didn't change during render, we can reuse
+        // the previous result without running the selector again
+        'A1',
+      ]);
+      expect(container.textContent).toEqual('A1');
+    });
+    it('Using isEqual to bailout', async () => {
+      const store = createExternalStore({
+        a: 0,
+        b: 0,
+      });
+      function A() {
+        const {a} = useSyncExternalStoreWithSelector(
+          store.subscribe,
+          store.getState,
+          null,
+          state => ({
+            a: state.a,
+          }),
+          (state1, state2) => state1.a === state2.a,
+        );
+        return React.createElement(Text, {
+          text: 'A' + a,
+        });
+      }
+      function B() {
+        const {b} = useSyncExternalStoreWithSelector(
+          store.subscribe,
+          store.getState,
+          null,
+          state => {
+            return {
+              b: state.b,
+            };
+          },
+          (state1, state2) => state1.b === state2.b,
+        );
+        return React.createElement(Text, {
+          text: 'B' + b,
+        });
+      }
+      function App() {
+        return React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(A, null),
+          React.createElement(B, null),
+        );
+      }
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() => root.render(React.createElement(App, null)));
+      assertLog(['A0', 'B0']);
+      expect(container.textContent).toEqual('A0B0');
+
+      // Update b but not a
+      await act(() => {
+        store.set({
+          a: 0,
+          b: 1,
+        });
+      });
+      // Only b re-renders
+      assertLog(['B1']);
+      expect(container.textContent).toEqual('A0B1');
+
+      // Update a but not b
+      await act(() => {
+        store.set({
+          a: 1,
+          b: 1,
+        });
+      });
+      // Only a re-renders
+      assertLog(['A1']);
+      expect(container.textContent).toEqual('A1B1');
+    });
+    it('basic server hydration', async () => {
+      const store = createExternalStore('client');
+      const ref = React.createRef();
+      function App() {
+        const text = useSyncExternalStore(
+          store.subscribe,
+          store.getState,
+          () => 'server',
+        );
+        useEffect(() => {
+          Scheduler.log('Passive effect: ' + text);
+        }, [text]);
+        return React.createElement(
+          'div',
+          {
+            ref: ref,
+          },
+          React.createElement(Text, {
+            text: text,
+          }),
+        );
+      }
+      const container = document.createElement('div');
+      container.innerHTML = '<div>server</div>';
+      const serverRenderedDiv = container.getElementsByTagName('div')[0];
+      if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
+        await act(() => {
+          ReactDOMClient.hydrateRoot(container, React.createElement(App, null));
+        });
+        assertLog([
+          // First it hydrates the server rendered HTML
+          'server',
+          'Passive effect: server',
+          // Then in a second paint, it re-renders with the client state
+          'client',
+          'Passive effect: client',
+        ]);
+      } else {
+        // In the userspace shim, there's no mechanism to detect whether we're
+        // currently hydrating, so `getServerSnapshot` is not called on the
+        // client. To avoid this server mismatch warning, user must account for
+        // this themselves and return the correct value inside `getSnapshot`.
+        await act(() => {
+          ReactDOM.hydrate(React.createElement(App, null), container);
+        });
+        assertConsoleErrorDev([
+          'Warning: Text content did not match. Server: "server" Client: "client"\n' +
+            '    in Text (at **)\n' +
+            '    in div (at **)\n' +
+            '    in App (at **)',
+        ]);
+        assertLog(['client', 'Passive effect: client']);
+      }
+      expect(container.textContent).toEqual('client');
+      expect(ref.current).toEqual(serverRenderedDiv);
+    });
+  });
+  it('regression test for #23150', async () => {
+    const store = createExternalStore('Initial');
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, store.getState);
+      const [derivedText, setDerivedText] = useState(text);
+      useEffect(() => {}, []);
+      if (derivedText !== text.toUpperCase()) {
+        setDerivedText(text.toUpperCase());
+      }
+      return React.createElement(Text, {
+        text: derivedText,
+      });
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(React.createElement(App, null)));
+    assertLog(['INITIAL']);
+    expect(container.textContent).toEqual('INITIAL');
+    await act(() => {
+      store.set('Updated');
+    });
+    assertLog(['UPDATED']);
+    expect(container.textContent).toEqual('UPDATED');
+  });
+  it('compares selection to rendered selection even if selector changes', async () => {
+    const store = createExternalStore({
+      items: ['A', 'B'],
+    });
+    const shallowEqualArray = (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;
+    };
+    const List = React.memo(({items}) => {
+      return React.createElement(
+        'ul',
+        null,
+        items.map(text =>
+          React.createElement(
+            'li',
+            {
+              key: text,
+            },
+            React.createElement(Text, {
+              key: text,
+              text: text,
+            }),
+          ),
+        ),
+      );
+    });
+    function App({step}) {
+      const inlineSelector = state => {
+        Scheduler.log('Inline selector');
+        return [...state.items, 'C'];
+      };
+      const items = useSyncExternalStoreWithSelector(
+        store.subscribe,
+        store.getState,
+        null,
+        inlineSelector,
+        shallowEqualArray,
+      );
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(List, {
+          items: items,
+        }),
+        React.createElement(Text, {
+          text: 'Sibling: ' + step,
+        }),
+      );
+    }
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => {
+      root.render(
+        React.createElement(App, {
+          step: 0,
+        }),
+      );
+    });
+    assertLog(['Inline selector', 'A', 'B', 'C', 'Sibling: 0']);
+    await act(() => {
+      root.render(
+        React.createElement(App, {
+          step: 1,
+        }),
+      );
+    });
+    assertLog([
+      // We had to call the selector again because it's not memoized
+      'Inline selector',
+      // But because the result was the same (according to isEqual) we can
+      // bail out of rendering the memoized list. These are skipped:
+      // 'A',
+      // 'B',
+      // 'C',
+
+      'Sibling: 1',
+    ]);
+  });
+  describe('selector and isEqual error handling in extra', () => {
+    let ErrorBoundary;
+    beforeEach(() => {
+      ErrorBoundary = class extends React.Component {
+        state = {
+          error: null,
+        };
+        static getDerivedStateFromError(error) {
+          return {
+            error,
+          };
+        }
+        render() {
+          if (this.state.error) {
+            return React.createElement(Text, {
+              text: this.state.error.message,
+            });
+          }
+          return this.props.children;
+        }
+      };
+    });
+    it('selector can throw on update', async () => {
+      const store = createExternalStore({
+        a: 'a',
+      });
+      const selector = state => {
+        if (typeof state.a !== 'string') {
+          throw new TypeError('Malformed state');
+        }
+        return state.a.toUpperCase();
+      };
+      function App() {
+        const a = useSyncExternalStoreWithSelector(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+        );
+        return React.createElement(Text, {
+          text: a,
+        });
+      }
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() =>
+        root.render(
+          React.createElement(
+            ErrorBoundary,
+            null,
+            React.createElement(App, null),
+          ),
+        ),
+      );
+      assertLog(['A']);
+      expect(container.textContent).toEqual('A');
+      if (__DEV__ && gate(flags => flags.enableUseSyncExternalStoreShim)) {
+        // In 17, the error is re-thrown in DEV.
+        await expect(async () => {
+          await act(() => {
+            store.set({});
+          });
+        }).rejects.toThrow('Malformed state');
+      } else {
+        await act(() => {
+          store.set({});
+        });
+      }
+      expect(container.textContent).toEqual('Malformed state');
+    });
+    it('isEqual can throw on update', async () => {
+      const store = createExternalStore({
+        a: 'A',
+      });
+      const selector = state => state.a;
+      const isEqual = (left, right) => {
+        if (typeof left.a !== 'string' || typeof right.a !== 'string') {
+          throw new TypeError('Malformed state');
+        }
+        return left.a.trim() === right.a.trim();
+      };
+      function App() {
+        const a = useSyncExternalStoreWithSelector(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+          isEqual,
+        );
+        return React.createElement(Text, {
+          text: a,
+        });
+      }
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() =>
+        root.render(
+          React.createElement(
+            ErrorBoundary,
+            null,
+            React.createElement(App, null),
+          ),
+        ),
+      );
+      assertLog(['A']);
+      expect(container.textContent).toEqual('A');
+      if (__DEV__ && gate(flags => flags.enableUseSyncExternalStoreShim)) {
+        // In 17, the error is re-thrown in DEV.
+        await expect(async () => {
+          await act(() => {
+            store.set({});
+          });
+        }).rejects.toThrow('Malformed state');
+      } else {
+        await act(() => {
+          store.set({});
+        });
+      }
+      expect(container.textContent).toEqual('Malformed state');
+    });
+  });
+});
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
new file mode 100644
index 00000000000..f11e7a6c53a
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 useSyncExternalStore;
+let React;
+let ReactDOM;
+let ReactDOMServer;
+let Scheduler;
+let assertLog;
+
+// This tests the userspace shim of `useSyncExternalStore` in a server-rendering
+// (Node) environment
+describe('useSyncExternalStore (userspace shim, server rendering)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    // Remove useSyncExternalStore from the React imports so that we use the
+    // shim instead. Also removing startTransition, since we use that to detect
+    // outdated 18 alphas that don't yet include useSyncExternalStore.
+    //
+    // Longer term, we'll probably test this branch using an actual build of
+    // React 17.
+    jest.mock('react', () => {
+      const {
+        startTransition: _,
+        useSyncExternalStore: __,
+        ...otherExports
+      } = jest.requireActual('react');
+      return otherExports;
+    });
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
+
+    useSyncExternalStore =
+      require('use-sync-external-store/shim').useSyncExternalStore;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function createExternalStore(initialState) {
+    const listeners = new Set();
+    let currentState = initialState;
+    return {
+      set(text) {
+        currentState = text;
+        ReactDOM.unstable_batchedUpdates(() => {
+          listeners.forEach(listener => listener());
+        });
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      getState() {
+        return currentState;
+      },
+      getSubscriberCount() {
+        return listeners.size;
+      },
+    };
+  }
+
+  it('basic server render', async () => {
+    const store = createExternalStore('client');
+
+    function App() {
+      const text = useSyncExternalStore(
+        store.subscribe,
+        store.getState,
+        () => 'server',
+      );
+      return <Text text={text} />;
+    }
+
+    const html = ReactDOMServer.renderToString(<App />);
+
+    // We don't call getServerSnapshot in the shim
+    assertLog(['client']);
+    expect(html).toEqual('client');
+  });
+});
diff --git a/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js b/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
new file mode 100644
index 00000000000..8fa8d5b5768
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isServerEnvironment = false;
diff --git a/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
new file mode 100644
index 00000000000..a9638224513
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+import * as React from 'react';
+
+export const useSyncExternalStore = React.useSyncExternalStore;
diff --git a/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
new file mode 100644
index 00000000000..aca88a8bb9c
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+import * as shim from 'use-sync-external-store/shim';
+
+export const useSyncExternalStore = shim.useSyncExternalStore;
diff --git a/packages/use-sync-external-store/src/isServerEnvironment.js b/packages/use-sync-external-store/src/isServerEnvironment.js
new file mode 100644
index 00000000000..6af961a3697
--- /dev/null
+++ b/packages/use-sync-external-store/src/isServerEnvironment.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {canUseDOM} from 'shared/ExecutionEnvironment';
+
+export const isServerEnvironment = !canUseDOM;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
new file mode 100644
index 00000000000..8d6c49105d1
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+import * as React from 'react';
+
+export const useSyncExternalStore = React.useSyncExternalStore;
+
+if (__DEV__) {
+  // Avoid transforming the `console.error` call as it would cause the built artifact
+  // to access React internals, which exist under different paths depending on the
+  // React version.
+  console['error'](
+    "The main 'use-sync-external-store' entry point is not supported; all it " +
+      "does is re-export useSyncExternalStore from the 'react' package, so " +
+      'it only works with React 18+.' +
+      '\n\n' +
+      'If you wish to support React 16 and 17, import from ' +
+      "'use-sync-external-store/shim' instead. It will fall back to a shimmed " +
+      'implementation when the native one is not available.' +
+      '\n\n' +
+      "If you only support React 18+, you can import directly from 'react'.",
+  );
+}
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShim.js b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js
new file mode 100644
index 00000000000..dce61ed1dc4
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {useSyncExternalStore as client} from './useSyncExternalStoreShimClient';
+import {useSyncExternalStore as server} from './useSyncExternalStoreShimServer';
+import {isServerEnvironment} from './isServerEnvironment';
+import {useSyncExternalStore as builtInAPI} from 'react';
+
+const shim = isServerEnvironment ? server : client;
+
+export const useSyncExternalStore: <T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+) => T = builtInAPI !== undefined ? builtInAPI : shim;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
new file mode 100644
index 00000000000..579933f3dde
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import is from 'shared/objectIs';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+const {useState, useEffect, useLayoutEffect, useDebugValue} = React;
+
+let didWarnOld18Alpha = false;
+let didWarnUncachedGetSnapshot = false;
+
+// Disclaimer: This shim breaks many of the rules of React, and only works
+// because of a very particular set of implementation details and assumptions
+// -- change any one of them and it will break. The most important assumption
+// is that updates are always synchronous, because concurrent rendering is
+// only available in versions of React that also have a built-in
+// useSyncExternalStore API. And we only use this shim when the built-in API
+// does not exist.
+//
+// Do not assume that the clever hacks used by this hook also work in general.
+// The point of this shim is to replace the need for hacks by other libraries.
+export function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
+  getServerSnapshot?: () => T,
+): T {
+  if (__DEV__) {
+    if (!didWarnOld18Alpha) {
+      if (React.startTransition !== undefined) {
+        didWarnOld18Alpha = true;
+        // Avoid transforming the `console.error` call as it would cause the built artifact
+        // to access React internals, which exist under different paths depending on the
+        // React version.
+        console['error'](
+          'You are using an outdated, pre-release alpha of React 18 that ' +
+            'does not support useSyncExternalStore. The ' +
+            'use-sync-external-store shim will not work correctly. Upgrade ' +
+            'to a newer pre-release.',
+        );
+      }
+    }
+  }
+
+  // Read the current snapshot from the store on every render. Again, this
+  // breaks the rules of React, and only works here because of specific
+  // implementation details, most importantly that updates are
+  // always synchronous.
+  const value = getSnapshot();
+  if (__DEV__) {
+    if (!didWarnUncachedGetSnapshot) {
+      const cachedValue = getSnapshot();
+      if (!is(value, cachedValue)) {
+        // Avoid transforming the `console.error` call as it would cause the built artifact
+        // to access React internals, which exist under different paths depending on the
+        // React version.
+        console['error'](
+          'The result of getSnapshot should be cached to avoid an infinite loop',
+        );
+        didWarnUncachedGetSnapshot = true;
+      }
+    }
+  }
+
+  // Because updates are synchronous, we don't queue them. Instead we force a
+  // re-render whenever the subscribed state changes by updating an some
+  // arbitrary useState hook. Then, during render, we call getSnapshot to read
+  // the current value.
+  //
+  // Because we don't actually use the state returned by the useState hook, we
+  // can save a bit of memory by storing other stuff in that slot.
+  //
+  // To implement the early bailout, we need to track some things on a mutable
+  // object. Usually, we would put that in a useRef hook, but we can stash it in
+  // our useState hook instead.
+  //
+  // To force a re-render, we call forceUpdate({inst}). That works because the
+  // new object always fails an equality check.
+  const [{inst}, forceUpdate] = useState({inst: {value, getSnapshot}});
+
+  // Track the latest getSnapshot function with a ref. This needs to be updated
+  // in the layout phase so we can access it during the tearing check that
+  // happens on subscribe.
+  useLayoutEffect(() => {
+    inst.value = value;
+    inst.getSnapshot = getSnapshot;
+
+    // Whenever getSnapshot or subscribe changes, we need to check in the
+    // commit phase if there was an interleaved mutation. In concurrent mode
+    // this can happen all the time, but even in synchronous mode, an earlier
+    // effect may have mutated the store.
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      forceUpdate({inst});
+    }
+  }, [subscribe, value, getSnapshot]);
+
+  useEffect(() => {
+    // Check for changes right before subscribing. Subsequent changes will be
+    // detected in the subscription handler.
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      forceUpdate({inst});
+    }
+    const handleStoreChange = () => {
+      // TODO: Because there is no cross-renderer API for batching updates, it's
+      // up to the consumer of this library to wrap their subscription event
+      // with unstable_batchedUpdates. Should we try to detect when this isn't
+      // the case and print a warning in development?
+
+      // The store changed. Check if the snapshot changed since the last time we
+      // read from the store.
+      if (checkIfSnapshotChanged(inst)) {
+        // Force a re-render.
+        forceUpdate({inst});
+      }
+    };
+    // Subscribe to the store and return a clean-up function.
+    return subscribe(handleStoreChange);
+  }, [subscribe]);
+
+  useDebugValue(value);
+  return value;
+}
+
+function checkIfSnapshotChanged<T>(inst: {
+  value: T,
+  getSnapshot: () => T,
+}): boolean {
+  const latestGetSnapshot = inst.getSnapshot;
+  const prevValue = inst.value;
+  try {
+    const nextValue = latestGetSnapshot();
+    return !is(prevValue, nextValue);
+  } catch (error) {
+    return true;
+  }
+}
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
new file mode 100644
index 00000000000..469af9d7f0b
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
+  return getSnapshot();
+}
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
new file mode 100644
index 00000000000..ddbd77c6982
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import is from 'shared/objectIs';
+import {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStore';
+
+// Intentionally not using named imports because Rollup uses dynamic dispatch
+// for CommonJS interop.
+const {useRef, useEffect, useMemo, useDebugValue} = React;
+
+// Same as useSyncExternalStore, but supports selector and isEqual arguments.
+export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => Snapshot,
+  getServerSnapshot: void | null | (() => Snapshot),
+  selector: (snapshot: Snapshot) => Selection,
+  isEqual?: (a: Selection, b: Selection) => boolean,
+): Selection {
+  type Inst =
+    | {
+        hasValue: true,
+        value: Selection,
+      }
+    | {
+        hasValue: false,
+        value: null,
+      };
+
+  // Use this to track the rendered snapshot.
+  const instRef = useRef<Inst | null>(null);
+  let inst: Inst;
+  if (instRef.current === null) {
+    inst = {
+      hasValue: false,
+      value: null,
+    };
+    instRef.current = inst;
+  } else {
+    inst = instRef.current;
+  }
+
+  const [getSelection, getServerSelection] = useMemo(() => {
+    // Track the memoized state using closure variables that are local to this
+    // memoized instance of a getSnapshot function. Intentionally not using a
+    // useRef hook, because that state would be shared across all concurrent
+    // copies of the hook/component.
+    let hasMemo = false;
+    let memoizedSnapshot;
+    let memoizedSelection: Selection;
+    const memoizedSelector = (nextSnapshot: Snapshot) => {
+      if (!hasMemo) {
+        // The first time the hook is called, there is no memoized result.
+        hasMemo = true;
+        memoizedSnapshot = nextSnapshot;
+        const nextSelection = selector(nextSnapshot);
+        if (isEqual !== undefined) {
+          // Even if the selector has changed, the currently rendered selection
+          // may be equal to the new selection. We should attempt to reuse the
+          // current value if possible, to preserve downstream memoizations.
+          if (inst.hasValue) {
+            const currentSelection = inst.value;
+            if (isEqual(currentSelection, nextSelection)) {
+              memoizedSelection = currentSelection;
+              return currentSelection;
+            }
+          }
+        }
+        memoizedSelection = nextSelection;
+        return nextSelection;
+      }
+
+      // We may be able to reuse the previous invocation's result.
+      const prevSnapshot: Snapshot = (memoizedSnapshot: any);
+      const prevSelection: Selection = (memoizedSelection: any);
+
+      if (is(prevSnapshot, nextSnapshot)) {
+        // The snapshot is the same as last time. Reuse the previous selection.
+        return prevSelection;
+      }
+
+      // The snapshot has changed, so we need to compute a new selection.
+      const nextSelection = selector(nextSnapshot);
+
+      // If a custom isEqual function is provided, use that to check if the data
+      // has changed. If it hasn't, return the previous selection. That signals
+      // to React that the selections are conceptually equal, and we can bail
+      // out of rendering.
+      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+        // The snapshot still has changed, so make sure to update to not keep
+        // old references alive
+        memoizedSnapshot = nextSnapshot;
+        return prevSelection;
+      }
+
+      memoizedSnapshot = nextSnapshot;
+      memoizedSelection = nextSelection;
+      return nextSelection;
+    };
+    // Assigning this to a constant so that Flow knows it can't change.
+    const maybeGetServerSnapshot =
+      getServerSnapshot === undefined ? null : getServerSnapshot;
+    const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
+    const getServerSnapshotWithSelector =
+      maybeGetServerSnapshot === null
+        ? undefined
+        : () => memoizedSelector(maybeGetServerSnapshot());
+    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+
+  const value = useSyncExternalStore(
+    subscribe,
+    getSelection,
+    getServerSelection,
+  );
+
+  useEffect(() => {
+    // $FlowFixMe[incompatible-type] changing the variant using mutation isn't supported
+    inst.hasValue = true;
+    // $FlowFixMe[incompatible-type]
+    inst.value = value;
+  }, [value]);
+
+  useDebugValue(value);
+  return value;
+}
diff --git a/packages/use-sync-external-store/with-selector.js b/packages/use-sync-external-store/with-selector.js
new file mode 100644
index 00000000000..23b78acfd94
--- /dev/null
+++ b/packages/use-sync-external-store/with-selector.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+export {useSyncExternalStoreWithSelector} from 'use-sync-external-store/src/useSyncExternalStoreWithSelector';
diff --git a/perf/index.html b/perf/index.html
deleted file mode 100644
index 71d99c0a8d6..00000000000
--- a/perf/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>Perf Tests</title>
-
-<script>
-window.onerror = function(error){
-  window._unhandledError = error;
-  window.isDone = true;
-}
-</script>
-
-<script src="./lib/perf-test-runner.browser.js"></script>
-<script> perfRunner.Polyfill(); </script>
-<script src="../build/react.js"></script>
-<script src="../build/JSXTransformer.js"></script>
-<script src="../test/lib/postDataToURL.browser.js"></script>
-<script src="./lib/BrowserPerfRunnerContext.react.js"></script>
-<script src="./lib/BrowserPerfRunnerApp.react.js"></script>
-
-<script>
-
-var tests = [
-  "sanity.js",
-  "todolist-mount.js",
-  "todolist-edit.js",
-  "todolist-add.js",
-  "todolist-do-stuff.js",
-  "setState-callback-5.js",
-  "setState-callback.js",
-  "basic-div.js",
-  "basic-unmount.js",
-  "propTypes.js",
-  "renderComponent-basic.js",
-  "shouldComponentUpdate.js",
-];
-
-var reactVersions = [
-  'edge',
-  'builds/master/latest'
-];
-
-window.onload = function(){
-  window.isDone = false;
-
-  React.renderComponent(
-    BrowserPerfRunnerApp({
-      headless: perfRunner.getQueryParamArrayOrDefault('headless', [false])[0],
-      react: perfRunner.getQueryParamArrayOrDefault('react', reactVersions),
-      tests: perfRunner.getQueryParamArrayOrDefault('test', tests),
-      maxTime: perfRunner.getQueryParamArrayOrDefault('maxTime', [5])[0],
-      onCompleteEach: function(results){
-        console.log('onCompleteEach', results);
-        postDataToURL({type:'perf', message:results}, '/reportTestResults');
-      },
-      onError: function(error){
-        window._unhandledError = error;
-      },
-      onComplete: function(results){
-        window.completedTestKeys = Object.keys(results);
-        window.isDone = true;
-      }
-    }),
-    document.body
-  );
-}
-
-</script>
diff --git a/perf/lib/BrowserPerfRunnerApp.react.js b/perf/lib/BrowserPerfRunnerApp.react.js
deleted file mode 100644
index 5b34f3bcaae..00000000000
--- a/perf/lib/BrowserPerfRunnerApp.react.js
+++ /dev/null
@@ -1,205 +0,0 @@
-var BrowserPerfRunnerApp = React.createClass({
-
-  propTypes: {
-    tests: React.PropTypes.array.isRequired,
-    react: React.PropTypes.array.isRequired,
-    maxTime: React.PropTypes.number,
-    onCompleteEach: React.PropTypes.func,
-    onComplete: React.PropTypes.func,
-    onError: React.PropTypes.func,
-    headless: React.PropTypes.bool
-  },
-
-  getInitialState: function(){
-    var queue = [];
-    this.props.tests.forEach(function(testName){
-      this.props.react.forEach(function(version){
-        queue.push({
-          test: testName,
-          react: version
-        });
-      },this);
-    },this);
-    return {
-      queue: queue,
-      results: {}
-    };
-  },
-
-  handleResults: function(results){
-    this.state.results[results.test + '@' + results.react] = results;
-    this.replaceState(this.state);
-  },
-
-  handleComplete: function(queueItem){
-    queueItem.completed = true;
-    
-    if (!this.props.onCompleteEach) {
-      return;
-    }
-    // Can't get the resultsForAllVersions if there are still some queued
-    var incompleteCount = 0;
-    for (var index = this.state.queue.length; --index >= 0;){
-      if (this.state.queue[index].completed) {
-        continue;
-      }
-      if (this.state.queue[index].test === queueItem.test) {
-        return;
-      }
-      incompleteCount ++;
-    }
-    var resultsForAllVersions = Object.keys(this.state.results)
-      .filter(function(key){return key.indexOf(queueItem.test) === 0;})
-      .map(function(key){return this.state.results[key];}, this)
-    ;
-    this.props.onCompleteEach(resultsForAllVersions);
-    
-    if (this.props.onComplete && incompleteCount === 0) {
-      this.props.onComplete(this.state.results);
-    }
-  },
-
-  render: function(){
-    var grid = null;
-
-    if (!this.props.headless) {
-      grid = GridViewTable({
-        rows: this.props.tests,
-        cols: this.props.react,
-        renderCell: BrowserPerfRunnerApp.renderBenchmarkCell,
-        value: this.state.results
-      });
-    }
-
-    return React.DOM.div(null,
-      BenchmarkQueue({
-        initialQueue: this.state.queue,
-        onChange: this.handleResults,
-        maxTime: this.props.maxTime,
-        onCompleteEach: this.handleComplete,
-        onError: this.props.onError
-      }),
-      grid
-    );
-  }
-});
-
-BrowserPerfRunnerApp.renderBenchmarkCell = function(props, row, col){
-  if (col == null && row == null) return React.DOM.th(null);
-  if (row == null) return React.DOM.th({style:{verticalAlign:'top', textAlign:'center'}}, col);
-
-  var benchmarks = Object.keys(props.value)
-    .filter(function(key){
-      return key.indexOf(row) === 0;
-    })
-    .map(function(key){
-      return props.value[key];
-    })
-    .filter(function(benchmark){
-      return benchmark && !benchmark.isRunning && benchmark.stats;
-    })
-  ;
-  
-  if (col == null) return React.DOM.th({style:{verticalAlign:'top', textAlign:'right'}},
-    React.DOM.a({href:'?test=' + row}, benchmarks[0] && benchmarks[0].name || row)
-  );
-
-  var key = row + '@' + col;
-  var benchmark = props.value[key];
-  if (!(benchmark && benchmark.stats)) return React.DOM.td({key:key});
- 
- 
-  var colors = [
-    '000000',
-    'AA0000',
-    '00AA00',
-    'AA5500',
-    '0000AA',
-    'AA00AA',
-    '00AAAA',
-    'AAAAAA',
-
-    '555555',
-    'FF5555',
-    '55FF55',
-    'FFFF55',
-    '5555FF',
-    'FF55FF',
-    '55FFFF',
-    'FFFFFF'
-  ];
-
-  function chartValue(value){
-    return Math.round(valueFromRangeToRange(value, chartValue.min, chartValue.max, 0, 100));
-  }
-  chartValue.min = Math.min.apply(Math, benchmarks.map(function(benchmark){return Math.min.apply(Math, benchmark.stats.sample);}));
-  chartValue.max = Math.max.apply(Math, benchmarks.map(function(benchmark){return Math.max.apply(Math, benchmark.stats.sample);}));
-
-  var means = benchmarks.map(function(benchmark){
-    return benchmark.stats.mean;
-  });
-  benchmarks.forEach(function(benchmark){
-    benchmark.isTheWinner = benchmark.stats.mean <= Math.min.apply(Math, means);
-  });
-
-  var chartValues = benchmarks.map(function(benchmark){
-    // benchmark.stats.sample.sort(function(a,b){return b - a;});
-    return benchmark.stats.sample.map(chartValue).join(',');
-  }).join('|');
-
-  return (
-    React.DOM.td({key:key, style:{textAlign:'center', width:234, verticalAlign:'top'}},
-      benchmark.error && benchmark.error.message || '',
-      React.DOM.div({style: benchmark.isTheWinner ? { backgroundColor:'#0A5', color:'#AFA' } : {backgroundColor:'transparent', color:'inherit'}},
-        Math.round(1 / benchmark.stats.mean * 100) / 100, " op/s ",
-        React.DOM.strong(null, Math.round(benchmark.stats.mean * 1000 * 100) / 100, " ms/op "),
-        React.DOM.small(null, "(±" + (Math.round(benchmark.stats.rme * 10) / 10) + "%)")
-      ),
-      benchmark.isRunning && 'Running' || React.DOM.img({
-        style: {
-          borderWidth: 2,
-          borderStyle: 'solid',
-          color: '#' + colors[benchmarks.indexOf(benchmark)]
-        },
-        width: 230,
-        height: 50,
-        src: 'https://chart.googleapis.com/chart?cht=ls&chs=460x100&chd=t:' + chartValues + '&chco=' + colors.join(',')
-      })
-    )
-  );
-}
-
-function valueFromRangeToRange(value, fromMin, fromMax, toMin, toMax){
-  var fromRange = fromMax - fromMin;
-  var toRange = toMax - toMin;
-  return (((value - fromMin) * toRange) / fromRange) + toMin;
-}
-
-var GridViewTable = React.createClass({
-
-  propTypes: {
-    rows: React.PropTypes.array.isRequired,
-    cols: React.PropTypes.array.isRequired,
-    renderCell: React.PropTypes.func.isRequired
-  },
-
-  _renderCell: function(col){
-    return this.props.renderCell({ value:this.props.value }, this._row, col);
-  },
-
-  _renderRow: function(row){
-    this._row = row;
-    return React.DOM.tr({key:row},
-      this._renderCell(null, 0),
-      this.props.cols.map(this._renderCell, this)
-    );
-  },
-
-  render: function(){
-    return React.DOM.table(null,
-      this._renderRow(null, 0),
-      this.props.rows.map(this._renderRow, this)
-    );
-  }
-
-});
diff --git a/perf/lib/BrowserPerfRunnerContext.react.js b/perf/lib/BrowserPerfRunnerContext.react.js
deleted file mode 100644
index 0fdbca83905..00000000000
--- a/perf/lib/BrowserPerfRunnerContext.react.js
+++ /dev/null
@@ -1,195 +0,0 @@
-var BenchmarkQueue = React.createClass({
-  propTypes: {
-    debug: React.PropTypes.bool,
-    onChange: React.PropTypes.func.isRequired,
-    initialQueue: React.PropTypes.array.isRequired,
-    maxTime: React.PropTypes.number,
-    onCompleteEach: React.PropTypes.func,
-    onError: React.PropTypes.func
-  },
-  
-  getDefaultProps: function(){
-    return {
-      maxTime: 5
-    };
-  },
-  
-  getInitialState: function(){
-    return {
-      queue: this.props.initialQueue.slice()
-    };
-  },
-  
-  setItemState: function(state){
-    state.test = this.state.queue[0].test;
-    state.react = this.state.queue[0].react;
-    this.props.onChange(state);
-  },
-  
-  handleContextReady: function(window){
-    var benchmark = window.Benchmark(window.exports);
-    benchmark.options.maxTime = this.props.maxTime; //DEBUG
-
-    var itemState = {
-      testRunnerURL: window.location.href,
-      
-      name: window.exports.name,
-      platform: window.Benchmark.platform.description,
-      reactVersion: window.React.version,
-      
-      isMinified: (function(){
-        var code = window.React.renderComponent.toString();
-        return code.indexOf(',') - code.indexOf('(') <= 2;
-      }())
-    };
-
-    this.setItemState(itemState);
-
-    var self = this;
-    benchmark.on('start error cycle complete', function(){
-      var stats = JSON.parse(JSON.stringify(benchmark.stats));
-      itemState.stats = stats;
-      itemState.isRunning = benchmark.running;
-      itemState.error = benchmark.error;
-      self.setItemState(itemState);
-    });
-    if (this.props.onError) {
-      benchmark.on('error', this.props.onError);
-    }
-    benchmark.on('complete', function(){
-      var queue = self.state.queue.slice();
-      var queueItem = queue.shift();
-      if (self.props.onCompleteEach) {
-        self.props.onCompleteEach(queueItem);
-      }
-      self.setState({ queue:queue });
-    });
-    benchmark.run({async:true});
-  },
-  
-  shouldComponentUpdate: function(nextProps, nextState){
-    return nextState.queue.length < this.state.queue.length;
-  },
-  
-  render: function(){
-    if (!(this.state.queue && this.state.queue.length > 0)){
-      return React.DOM.div({style:{display:'none'}});
-    }
-    return BrowserPerfRunnerContext({
-      debug: this.props.debug,
-      test: this.state.queue[0].test,
-      react: this.state.queue[0].react,
-      onReady: this.handleContextReady
-    });
-  }
-});
-
-var BrowserPerfRunnerContext = React.createClass({
-
-  propTypes: {
-    debug: React.PropTypes.bool,
-    test: function(object, key){
-      React.PropTypes.string.isRequired(object, key);
-      if (/\.jsx?$/i.test(object[key])) return;
-      throw Error('Expected `' + key + '` to be a test file name with extension `.js` or `.jsx`');
-    },
-    react: function(object, key){
-      React.PropTypes.string.isRequired(object, key);
-      if (/^(?:builds\/.+|edge|previous|(?:\d+\.){2}\d+)$/.test(object[key])) return;
-      throw Error('Expected `' + key + '` prop to be a valid react version string, build string or "edge" or "previous"');
-    },
-    onReady: React.PropTypes.func.isRequired
-  },
-
-  getInitialState: function(){
-    return {
-      testRunnerURL:'about:blank'
-    };
-  },
-
-  // _handleFrameError: function(error){
-  //   console.error('BrowserPerfRunnerContext', error);
-  // },
-  // 
-  // _handleFrameLoad: function(event){
-  //   console.log('BrowserPerfRunnerContext', event);
-  // },
-  // 
-  _handleMessage: function(event){
-    if (location.href.indexOf(event.origin) !== 0)
-      return console.debug('BrowserPerfRunnerContext#_handleMessage ignored message from ' + event.origin);
-    if (event.source.location.href.indexOf(this.state.testRunnerURL) === -1)
-      return console.debug('BrowserPerfRunnerContext#_handleMessage ignored message from ' + event.source.location.href);
-    if (event.data !== 'Ready!')
-      return console.debug('BrowserPerfRunnerContext#_handleMessage ignored message ' + JSON.stringify(event.data));
-
-    this.props.onReady(event.source);
-  },
-
-  _getTestRunnerURL: function(props){
-    return 'runner.html' +
-      '?' +
-      'debug=' + (props.debug ? 1 : 0) +
-      '&' +
-      'react=' + encodeURIComponent(props.react) +
-      '&' +
-      'test=' + encodeURIComponent(props.test)
-  },
-
-  _renderState: function(props){
-    return {
-      testRunnerURL: this._getTestRunnerURL(props)
-    };
-  },
-
-  componentDidMount: function(){
-    var node = this.refs.iframe.getDOMNode();
-    // node.onload = this._handleFrameLoad;
-    // node.onerror = this._handleFrameError;
-    if (window.addEventListener) {
-      window.addEventListener('message', this._handleMessage, false);
-    } else if (window.attachEvent) {
-      window.attachEvent('onmessage', this._handleMessage);
-    } else {
-      throw Error('cannot attach onmessage listener');
-    }
-    this.setState(this._renderState(this.props));
-  },
-
-  componentWillUnmount: function(){
-    if (window.removeEventListener) {
-      window.removeEventListener('message', this._handleMessage);
-    } else if (window.detachEvent) {
-      window.detachEvent('onmessage', this._handleMessage);
-    } else {
-      throw Error('cannot detach onmessage listener');
-    }
-    this.refs.iframe.getDOMNode().src = '';
-  },
-
-  componentWillReceiveProps: function(nextProps){
-    this.setState(this._renderState(nextProps));
-  },
-
-  shouldComponentUpdate: function(nextProps, nextState){
-    return nextState.testRunnerURL != this.state.testRunnerURL;
-  },
-
-  render: function(){
-    return (
-      React.DOM.iframe({
-        ref: 'iframe',
-        name: "BrowserPerfRunnerContextFrame",
-        style: this.style,
-        src: this.state.testRunnerURL
-      })
-    );
-  },
-
-  style: {
-    position: 'absolute',
-    right: '100%',
-    bottom: '100%'
-  }
-  
-});
diff --git a/perf/lib/perf-test-runner.browser.js b/perf/lib/perf-test-runner.browser.js
deleted file mode 100644
index 26e059f8c38..00000000000
--- a/perf/lib/perf-test-runner.browser.js
+++ /dev/null
@@ -1,204 +0,0 @@
-if (typeof console == 'undefined') console = {
-  log: function(){},
-  warn: function(){},
-  error: function(){},
-  debug: function(){}
-};
-
-var perfRunner;
-if (typeof exports == 'object') {
-  perfRunner = exports;
-} else {
-  perfRunner = {};
-}
-
-perfRunner.assert = function(test, message){
-  if (typeof test == 'function') test = test();
-  if (test) return;
-  throw Error(message);
-}
-
-perfRunner.WriteScript = function(props){
-  var type = '';
-  if (props.jsx) {
-    type = ' type="text/jsx"';
-  }
-  var src = props.src;
-  if (!props.cache) {
-    src += src.indexOf('?') === -1 ? '?_' : '&_';
-    src += perfRunner.WriteScript.cacheBust;
-  }
-  document.write('<script' + type + ' src="' + src + '"><\/script>');
-}
-perfRunner.WriteScript.cacheBust = (+new Date).toString(36);
-
-perfRunner.WriteReactLibScript = function(params){
-  var src;
-  var minSuffix;
-  if (params.debug) {
-    minSuffix = '';
-  } else {
-    minSuffix = '.min';
-  }
-  
-  if (params.version && typeof params.version != 'string') throw TypeError("Expected 'version' to be a string");
-  
-  if (params.version == 'edge' || !params.version) {
-    console.log('React edge (local)');
-    perfRunner.WriteScript({src:'../build/react' + minSuffix + '.js'});
-    perfRunner.WriteScript({src:'../build/JSXTransformer.js'});
-  } else if (params.version == 'previous') {
-    console.log('React previous (local)');
-    perfRunner.WriteScript({cache:true, src:'../build/react-previous' + minSuffix + '.js'});
-    perfRunner.WriteScript({cache:true, src:'../build/JSXTransformer-previous.js'});
-  } else if (params.version.indexOf('builds/') === 0) {
-    perfRunner.WriteScript({cache:true, src:'http://react.zpao.com/' + params.version + '/react' + minSuffix + '.js'});
-    perfRunner.WriteScript({cache:true, src:'http://react.zpao.com/' + params.version + '/JSXTransformer.js'});
-  } else {
-    console.log('React ' + params.version);
-    perfRunner.WriteScript({cache:true, src:'http://fb.me/react-' + params.version + minSuffix + '.js'});
-    perfRunner.WriteScript({cache:true, src:'http://fb.me/JSXTransformer-' + params.version + '.js'});
-  }
-  if (params.debug) {
-    console.warn('Loading the unminified build of React, performance may suffer.');
-    console.warn('Load "' + location.href.replace(/\bdebug=\w+&?|&\bdebug=\w+/ig, '') + '" for better perf.');
-  } else {
-    console.warn('Loading the minified build of React, debugging may be harder.');
-    console.warn('Load "' + location.href.replace(/\bdebug=\w+&?|&\bdebug=\w+/ig, '') + '&debug=1' + '" for easier debugging.');
-  }
-}
-
-perfRunner.WriteTestScript = function(params){
-  if (Array.isArray(params.test)) {
-    return params.test
-      .map(function(test){return {test:test};})
-      .map(perfRunner.WriteTestScript)
-    ;
-  }
-  perfRunner.assert(params.test.indexOf('..') === -1, 'no relative paths allowed');
-  return perfRunner.WriteScript({jsx:true, src: './tests/' + params.test});
-}
-
-perfRunner.getQueryParamArray = function(key){
-  var values;
-  var queryString = location.search.substr(1);
-  var _key = encodeURIComponent(key) + '=';
-  
-  if (queryString.indexOf(_key) > -1) {
-    values = queryString
-      .split(_key)
-      .slice(1)
-      .map(function(part){return part.split('&')[0];})
-      .map(decodeURIComponent)
-      .map(function(string){
-        try {
-          return JSON.parse(string);
-        } catch(e){}
-        return string;
-      })
-    ;
-  }
-  
-  perfRunner.assert(values && values.length && values[0], 'expected ' + key + ' query param');
-  return values;
-}
-
-perfRunner.getQueryParamArrayOrDefault = function(key, defaultValue){
-  try {
-    return perfRunner.getQueryParamArray(key);
-  } catch (e) {}
-  return defaultValue;
-}
-
-perfRunner.Polyfill = function(){
-  if (typeof Function.prototype.bind != 'undefined') return;
-  perfRunner.WriteScript({src:'/node_modules/es5-shim/es5-shim.js', cache:true});
-  perfRunner.WriteScript({src:'/node_modules/es5-shim/es5-sham.js', cache:true});
-}
-
-perfRunner.BenchmarkResults = function(props){
-  return perfRunner.roundNumberWithPrecision(props.stats.mean * 1000) + 'ms/op'
-}
-
-perfRunner.roundNumberWithPrecision = function(number, precision){
-  if (!precision) precision = 1000;
-  return Math.round(number * precision) / precision;
-}
-
-perfRunner.quickBench = function(benchmarkOptions, onComplete, onBeforeStart){
-  var bench = new Benchmark(benchmarkOptions);
-  if (onBeforeStart) onBeforeStart(null, bench);
-
-  bench.on('error', function(event){
-    console.error(event.message);
-    console.log(event.target.compiled.toString());
-    onComplete(Error(event.error));
-  });
-
-  bench.on('start', function(){
-    console.log('starting', bench.name);
-  });
-
-  bench.on('cycle', function(){
-    var bench = this,
-        size = bench.stats.size;
-  
-    if (!bench.aborted) {
-      console.warn(bench.name + ' × ' + bench.count +
-        ' (' + bench.stats.sample.length + ' samples)' +
-        ' (' + Math.round(1 / bench.stats.mean) + ' ops/sec' + ')' +
-        ' (' + (bench.stats.mean * 1000) + ' ms/op' + ')' +
-        ' (±' + bench.stats.rme.toFixed(2) + '%)' +
-          ' with ' + React.version
-      );
-    }
-  });
-
-  bench.on('complete', function(){
-    var results = {
-      platform: Benchmark.platform.description,
-      react: React.version,
-      name: bench.name,
-      // times: bench.times,
-      // stats: bench.stats
-    };
-    
-    results['s/op'] = bench.stats.mean
-    results['ms/op'] = results['s/op'] * 1000
-    results['op/s'] = 1 / results['s/op']
-    results["% frame 60"] = results['ms/op'] / (1000 / 60) * 100
-    
-    console.log(results);
-    onComplete(null, results);
-  });
-
-  bench.run();
-};
-
-perfRunner.singleTest = function(benchmarkOptions, onComplete){
-  var bench = Benchmark(exports);
-  bench.on('complete', function(){
-    var results = {
-      platform: Benchmark.platform.description,
-      react: React.version,
-      name: bench.name,
-      stats: bench.stats
-    };
-    onComplete(results);
-  });
-  bench.run();
-}
-
-perfRunner.ViewObject = function(props){
-  var value = props.value;
-  delete props.value;
-  
-  if (typeof value != 'object') return React.DOM.span(props, [JSON.stringify(value), " ", typeof value]);
-  
-  return React.DOM.table(props, Object.keys(value).map(function(key){
-    return React.DOM.tr(null,
-      React.DOM.th(null, key),
-      React.DOM.td(null, perfRunner.ViewObject({key:key, value:value[key]}))
-    );
-  }));
-}
diff --git a/perf/lib/todolist.browser.js b/perf/lib/todolist.browser.js
deleted file mode 100644
index 662f4fc116e..00000000000
--- a/perf/lib/todolist.browser.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/*global*/todolist = {};
-
-todolist.ID = Date.now();
-
-todolist.now = window.performance && window.performance.now && window.performance.now.bind(window.performance) || Date.now.bind(Date);
-
-todolist.App = React.createClass({
-  propTypes: {
-    fakeDataCount: React.PropTypes.number
-  },
-
-  getInitialState: function(){
-    var todos;
-    if (this.props.fakeDataCount) {
-      todos = Array(this.props.fakeDataCount + 1).join(',').split(',').map(function(ignore, index){
-        return {id:index, title:"Title " + index + " " + Math.random().toString(36).substring(2,16), completed:!!(index % 2)};
-      });
-    }
-    return {
-      timerStart: todolist.now(),
-      timerEnd: null,
-      timerEvent: 'getInitialState',
-      todos: todos || this.props.initialData || []
-    };
-  },
-  componentWillUpdate: function(props, state){
-    state.todos = state.todos.filter(function(todo){
-      return !todo.deleted;
-    });
-  },
-  addItem: function(title, callback){
-    if (title == null || title === '') {
-      var error = Error('invalid title');
-      if (!callback) throw error;
-      return callback(error);
-    }
-    var todos = this.state.todos.slice();
-    var todo = {
-      id: ++todolist.ID,
-      title: title,
-      completed: false
-    };
-    todos.push(todo);
-    if (callback) callback = callback.bind(this, todo);
-    this.setState({ timerEvent:'addItem', timerStart:todolist.now(), timerEnd:null, todos:todos }, callback);
-    return todo;
-  },
-  deleteItemById: function(id, callback){
-    var todo = this._getById(id);
-    if (!todo) return callback && callback(Error('todo with id ' + id + ' not found'));
-    todo.deleted = true;
-    this.setState({ timerEvent:'deleteItemById', timerStart:todolist.now(), timerEnd:null, todos:this.state.todos }, callback);
-  },
-  setItemCompleted: function(id, completed, callback){
-    var todo = this._getById(id);
-    if (!todo) return callback && callback(Error('todo with id ' + id + ' not found'));
-    todo.completed = completed;
-    this.setState({ timerEvent:'setItemCompleted', timerStart:todolist.now(), timerEnd:null, todos:this.state.todos }, callback);
-  },
-  _getById: function(id){
-    id = +id;
-    var todos = this.state.todos;
-    for (var index = todos.length; --index >= 0;){
-      if (todos[index].id === id) return todos[index];
-    }
-    return null;
-  },
-  _handleItemCompletedCheckboxChange: function(event){
-    var node = event.target;
-    this.setItemCompleted(node.value, node.checked);
-  },
-  _handleItemDeletedButton: function(event){
-    var node = event.target;
-    this.deleteItemById(node.value);
-  },
-  _renderTodoItem: function(todo, index){
-    return (
-      React.DOM.li({key:todo.id},
-        React.DOM.button({value:todo.id, onClick:this._handleItemDeletedButton}, 'x'),
-        React.DOM.input({type:"checkbox", value:todo.id, checked:todo.completed, onChange:this._handleItemCompletedCheckboxChange}),
-        " ",
-        React.DOM.span({style:{"text-decoration":todo.completed ? "line-through" : ""}}, todo.title)
-      )
-    );
-  },
-  render: function(){
-    if (!this.state.timerEnd) this.state.timerEnd = todolist.now();
-    if (this.props.onRender) this.props.onRender();
-    return (
-      React.DOM.div(null,
-        React.DOM.h1(null, "TODO"),
-        React.DOM.h3(null, this.state.timerEvent, " ", this.state.timerEnd - this.state.timerStart, 'ms'),
-        todolist.NewItemForm({onEnter:this.addItem, autoFocus:true}),
-        React.DOM.ol(null, this.state.todos.map(this._renderTodoItem))
-      )
-    );
-  },
-  componentDidMount: function(rootNode){
-    if (this.props.onDidMount) this.props.onDidMount(rootNode);
-  }
-});
-
-todolist.NewItemForm = React.createClass({
-  _handleNewItemKeyDown: function(event){
-    if (event.which !== 13/*enter key*/) return;
-    var node = this.refs.text.getDOMNode();
-    var value = node.value;
-    node.value = '';
-    this.props.onEnter(value);
-    return false;
-  },
-  render: function(){
-    return this.transferPropsTo(
-      React.DOM.input({ref:"text", onKeyDown:this.props.onEnter && this._handleNewItemKeyDown})
-    );
-  }
-});
diff --git a/perf/lib/todolist.html b/perf/lib/todolist.html
deleted file mode 100644
index 7c2de136e01..00000000000
--- a/perf/lib/todolist.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>todolist</title>
-
-<script src="perf-test-runner.browser.js"></script>
-<script> perfRunner.Polyfill(); </script>
-<script src="../../build/react.min.js"></script>
-<script src="todolist.browser.js"></script>
-
-<script>
-function main(){
-  var app = todolist.App({ fakeDataCount:333 });
-  React.renderComponent(app, document.body);
-}
-window.onload = main;
-</script>
diff --git a/perf/runner.html b/perf/runner.html
deleted file mode 100644
index 976841ff37b..00000000000
--- a/perf/runner.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>Perf Test Runner</title>
-
-<script src="../node_modules/platform/platform.js"></script>
-<script src="../node_modules/benchmark/benchmark.js"></script>
-<script src="lib/perf-test-runner.browser.js"></script>
-
-<script> perfRunner.Polyfill(); </script>
-
-<script>
-
-perfRunner.WriteReactLibScript({
-  version: perfRunner.getQueryParamArrayOrDefault('react', [null])[0],
-  debug: perfRunner.getQueryParamArrayOrDefault('debug', [false])[0]
-});
-
-perfRunner.WriteScript({src:"lib/todolist.browser.js"});
-
-perfRunner.WriteTestScript({ test:perfRunner.getQueryParamArray('test') });
-
-</script>
-
-<script>
-
-function checkIfReady(){
-  if (!window.exports) return setTimeout(checkIfReady, 50);
-
-  console.timeStamp && console.timeStamp(perfRunner.getQueryParamArray('test'));
-  if (typeof gc == 'function') gc();
-  window.parent.postMessage(perfRunner.getQueryParamArrayOrDefault('callback', ['Ready!'])[0], '*');
-}
-checkIfReady();
-
-function main(callback){
-  perfRunner.singleTest(exports, function(results){
-    document.getElementById('results').textContent = JSON.stringify(results, null, 2);
-    callback();
-  });
-}
-
-function runOnce(callback){
-  setTimeout(function(){
-    exports.fn({resolve: function(){
-      setTimeout(callback, 0);
-    }});
-  },0);
-}
-
-</script>
-<button autofocus onclick="if (disabled) return false; main(function(){ disabled=false; textContent='Run again!'; }); textContent='Running!'; disabled=true">Run!</button>
-<div>
-  <button onclick="exports.setup();">Setup!</button>
-  <button onclick="if (disabled) return false; runOnce(function(){ disabled=false; textContent='Run again!'; }); textContent='Running!'; disabled=true">Run once!</button>
-  <button onclick="exports.teardown();">Teardown!</button>
-</div>
-
-<pre id=results style="font-size:9px"></pre>
-
diff --git a/perf/tests/basic-div.js b/perf/tests/basic-div.js
deleted file mode 100644
index b72d6ded6d4..00000000000
--- a/perf/tests/basic-div.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* jshint undef: true, unused: true */
-
-/* global document */
-/* global window */
-/* global Benchmark */
-/* global React */
-
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'React.DOM.div, no props';
-
-exports.fn = function(){
-  React.DOM.div(null, 'lol, perf testing ', this.count);
-};
diff --git a/perf/tests/basic-unmount.js b/perf/tests/basic-unmount.js
deleted file mode 100644
index 25be4a1a9f2..00000000000
--- a/perf/tests/basic-unmount.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* jshint undef: true, unused: true */
-
-/* global document */
-/* global window */
-/* global Benchmark */
-/* global React */
-
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'unmountComponentAtNode';
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-  var _firstChild = React.DOM.div(null, 'lol, perf testing ', this.count);
-  React.renderComponent(_firstChild, _rootNode);
-};
-exports.fn = function(){
-  if (React.unmountAndReleaseReactRootNode) React.unmountAndReleaseReactRootNode(_rootNode);
-  else React.unmountComponentAtNode(_rootNode);
-};
diff --git a/perf/tests/propTypes.js b/perf/tests/propTypes.js
deleted file mode 100644
index 6c2a0f8346e..00000000000
--- a/perf/tests/propTypes.js
+++ /dev/null
@@ -1,85 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'propTypes';
-
-var Thing = function() {};
-var List;
-var ListItem;
-var MyReactComponent;
-var _rootNode;
-
-exports.setup = function(){
-  List = React.createClass({
-    propTypes: {
-      array: React.PropTypes.array,
-      bool: React.PropTypes.bool.isRequired,
-      number: React.PropTypes.number,
-      string: React.PropTypes.string.isRequired,
-      func: React.PropTypes.func.isRequired,
-      renderable: React.PropTypes.renderable.isRequired,
-      instanceOf: React.PropTypes.instanceOf(Thing).isRequired
-    },
-    render: function() {
-      return React.DOM.ul(null, this.props.children);
-    }
-  });
-
-  ListItem = React.createClass({
-    propTypes: {
-      array: React.PropTypes.array,
-      bool: React.PropTypes.bool.isRequired,
-      number: React.PropTypes.number,
-      string: React.PropTypes.string.isRequired,
-      func: React.PropTypes.func.isRequired,
-      renderable: React.PropTypes.renderable.isRequired,
-      renderable2: React.PropTypes.renderable.isRequired,
-      instanceOf: React.PropTypes.instanceOf(Thing).isRequired,
-      component: React.PropTypes.component.isRequired
-    },
-    render: function(){
-      return React.DOM.li(null,
-        this.props.number + this.props.string + this.props.renderable
-      );
-    }
-  });
-
-  MyReactComponent = React.createClass({
-    render: function() {
-      return React.DOM.span();
-    }
-  });
-
-  _rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-};
-exports.fn = function(){
-  var items = [];
-  for (var i = 0; i < 1000; i++) {
-    items.push(ListItem({
-      array: [11, 12, 13, 14, 15, 16, 17, 18, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-      bool: false,
-      number: Math.random(),
-      string: 'banana banana banana',
-      func: function() { return 'this is a function'; },
-      renderable: 'renderable string',
-      renderable2: [MyReactComponent(), 'a string'],
-      instanceOf: new Thing,
-      component: MyReactComponent()
-    }));
-  };
-
-  React.renderComponent(List({
-    array: [11, 12, 13, 14, 15, 16, 17, 18, 19, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-    bool: false,
-    number: Math.random(),
-    string: 'banana banana banana',
-    func: function() { return 'this is a function'; },
-    renderable: 'renderable string',
-    instanceOf: new Thing
-  }, items), _rootNode);
-};
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-};
diff --git a/perf/tests/renderComponent-basic.js b/perf/tests/renderComponent-basic.js
deleted file mode 100644
index 36ad3674190..00000000000
--- a/perf/tests/renderComponent-basic.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* jshint undef: true, unused: true */
-
-/* global document */
-/* global window */
-/* global Benchmark */
-/* global React */
-
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'React.renderComponent single div';
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-};
-exports.fn = function(){
-  React.renderComponent(React.DOM.div(null, 'lol, perf testing ', this.count), _rootNode);
-};
-exports.teardown = function(){
-  if (React.unmountAndReleaseReactRootNode) React.unmountAndReleaseReactRootNode(_rootNode);
-  else React.unmountComponentAtNode(_rootNode);
-};
diff --git a/perf/tests/sanity.js b/perf/tests/sanity.js
deleted file mode 100644
index 0150114f16d..00000000000
--- a/perf/tests/sanity.js
+++ /dev/null
@@ -1,15 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'Trivial benchmark to verify that everything works';
-
-exports.setup = function(){
-  var foo;
-};
-exports.fn = function(){
-  foo = Array(999).join('Howdy!\n');
-};
-exports.teardown = function(){
-  foo = null;
-};
diff --git a/perf/tests/setState-callback-5.js b/perf/tests/setState-callback-5.js
deleted file mode 100644
index 5868baaab5f..00000000000
--- a/perf/tests/setState-callback-5.js
+++ /dev/null
@@ -1,41 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'From setState to callback (x5)';
-
-exports.defer = true;
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-  /*global*/setState = null;
-
-  var AwesomeComponent = React.createClass({
-    getInitialState: function(){
-      return { random:null };
-    },
-    render: function(){
-      if (!setState) setState = this.setState.bind(this);
-      return React.DOM.div(null, this.state.random);
-    }
-  });
-
-  React.renderComponent(AwesomeComponent(null), _rootNode);
-};
-exports.fn = function(deferred){
-  setState({random: Date.now() + Math.random()}, function(){
-    setState({random: Date.now() + Math.random()}, function(){
-      setState({random: Date.now() + Math.random()}, function(){
-        setState({random: Date.now() + Math.random()}, function(){
-          setState({random: Date.now() + Math.random()}, function(){
-            deferred.resolve();
-          });
-        });
-      });
-    });
-  });
-};
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-};
diff --git a/perf/tests/setState-callback.js b/perf/tests/setState-callback.js
deleted file mode 100644
index c5a66ac174b..00000000000
--- a/perf/tests/setState-callback.js
+++ /dev/null
@@ -1,33 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'From setState to callback';
-
-exports.defer = true;
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-  /*global*/setState = null;
-
-  var AwesomeComponent = React.createClass({
-    getInitialState: function(){
-      return { random:null };
-    },
-    render: function(){
-      if (!setState) setState = this.setState.bind(this);
-      return React.DOM.div(null, this.state.random);
-    }
-  });
-
-  React.renderComponent(AwesomeComponent(null), _rootNode);
-};
-exports.fn = function(deferred){
-  setState({random: Date.now() + Math.random()}, function(){
-    deferred.resolve();
-  });
-};
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-};
diff --git a/perf/tests/shouldComponentUpdate.js b/perf/tests/shouldComponentUpdate.js
deleted file mode 100644
index 3bdb4e70b2c..00000000000
--- a/perf/tests/shouldComponentUpdate.js
+++ /dev/null
@@ -1,25 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'shouldComponentUpdate';
-
-exports.setup = function(){
-  var AwesomeComponent = React.createClass({
-    shouldComponentUpdate: function(){
-      return false;
-    },
-    render: function(){
-      return React.DOM.div({});
-    }
-  });
-
-  var _rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-};
-exports.fn = function(){
-  React.renderComponent(AwesomeComponent(null), _rootNode);
-};
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-};
diff --git a/perf/tests/todolist-add.js b/perf/tests/todolist-add.js
deleted file mode 100644
index 80346a48209..00000000000
--- a/perf/tests/todolist-add.js
+++ /dev/null
@@ -1,27 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'todolist from addItem to callback';
-
-exports.defer = true;
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-  var appDescriptor = todolist.App({ fakeDataCount: 333 });
-  /*global*/_app = React.renderComponent(appDescriptor, _rootNode);
-};
-exports.fn = function(deferred){
-  var liCount = document.getElementsByTagName('li').length;
-  _app.addItem(Math.random(), function(){
-    if (document.getElementsByTagName('li').length <= liCount) throw Error('expected a list item to be added to the dom');
-    deferred.resolve();
-  });
-};
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-  _rootNode.parentNode.removeChild(_rootNode);
-  _rootNode = null;
-  _app = null;
-};
diff --git a/perf/tests/todolist-do-stuff.js b/perf/tests/todolist-do-stuff.js
deleted file mode 100644
index 8b60844bd69..00000000000
--- a/perf/tests/todolist-do-stuff.js
+++ /dev/null
@@ -1,54 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-/*global*/_timesToRun = 2;
-
-exports.name = 'todolist add, complete, remove (x' + _timesToRun + ')';
-
-exports.defer = true;
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-  var appDescriptor = todolist.App({ fakeDataCount: 333 });
-  /*global*/_app = React.renderComponent(appDescriptor, _rootNode);
-};
-
-exports.fn = function(deferred){
-  var originalLiCount = document.getElementsByTagName('li').length;
-
-  var todos = [];
-  var times = _timesToRun;
-  while (times-- >= 0){
-    todos.push(_app.addItem(times+1));
-  }
-
-  todos.forEach(function(todo){
-    _app.setItemCompleted(todo.id);
-  });
-
-  todos.forEach(function(todo){
-    _app.deleteItemById(todo.id);
-  });
-
-  todos = null;
-
-  _app.addItem(Math.random(), function(todo){
-    if (document.getElementsByTagName('li').length <= originalLiCount)
-      throw Error('expected a list item to be added to the dom');
-
-    _app.deleteItemById(todo.id, function(){
-      if (document.getElementsByTagName('li').length != originalLiCount)
-        throw Error('expected everything to be done by now');
-      deferred.resolve();
-    });
-  });
-};
-
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-  _rootNode.parentNode.removeChild(_rootNode);
-  _rootNode = null;
-  _app = null;
-};
diff --git a/perf/tests/todolist-edit.js b/perf/tests/todolist-edit.js
deleted file mode 100644
index 06f46aa7263..00000000000
--- a/perf/tests/todolist-edit.js
+++ /dev/null
@@ -1,32 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'todolist setItemCompleted';
-
-exports.defer = true;
-
-exports.setup = function(){
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-  var appDescriptor = todolist.App({ fakeDataCount: 333 });
-  /*global*/_app = React.renderComponent(appDescriptor, _rootNode);
-  /*global*/_todo1 = _app.addItem("Howdy 1!");
-  /*global*/_todo2 = _app.addItem("Howdy 2!");
-  /*global*/_todo3 = _app.addItem("Howdy 3!");
-};
-
-exports.fn = function(deferred){
-  _app.setItemCompleted(_todo1.id, !_todo1.completed);
-  _app.setItemCompleted(_todo2.id, !_todo2.completed);
-  _app.setItemCompleted(_todo3.id, !_todo3.completed, function(){
-    deferred.resolve();
-  });
-};
-
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-  _rootNode.parentNode.removeChild(_rootNode);
-  _rootNode = null;
-  _app = null;
-};
diff --git a/perf/tests/todolist-mount.js b/perf/tests/todolist-mount.js
deleted file mode 100644
index 71bdc91dbeb..00000000000
--- a/perf/tests/todolist-mount.js
+++ /dev/null
@@ -1,23 +0,0 @@
-if (typeof exports == 'undefined') exports = {};
-
-/*http://benchmarkjs.com/docs#options*/
-
-exports.name = 'todolist from renderComponent to renderComponent callback (333 rows)';
-
-exports.defer = true;
-
-exports.setup = function(){
-  if (typeof _rootNode != 'undefined') throw Error("should teardown before running setup again");
-  /*global*/_rootNode = document.createElement('div');
-  document.body.appendChild(_rootNode);
-};
-
-exports.fn = function(deferred){
-  React.renderComponent(todolist.App({ fakeDataCount: 333 }), _rootNode, function(){ deferred.resolve(); });
-};
-
-exports.teardown = function(){
-  React.unmountComponentAtNode(_rootNode);
-  _rootNode.parentNode.removeChild(_rootNode);
-  _rootNode = undefined;
-};
diff --git a/react.code-workspace b/react.code-workspace
new file mode 100644
index 00000000000..16ff05dce9e
--- /dev/null
+++ b/react.code-workspace
@@ -0,0 +1,30 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "extensions": {
+    "recommendations": [
+      "dbaeumer.vscode-eslint",
+      "editorconfig.editorconfig",
+      "esbenp.prettier-vscode",
+      "flowtype.flow-for-vscode"
+    ]
+  },
+  "settings": {
+    "search.exclude": {
+      "**/dist/**": true,
+      "**/build/**": true,
+      "**/out/**": true,
+      "*.map": true,
+      "*.log": true
+    },
+    "javascript.validate.enable": false,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow",
+    "prettier.configPath": "",
+    "prettier.ignorePath": ""
+  }
+}
diff --git a/scripts/authors b/scripts/authors
deleted file mode 100755
index bbf52740a81..00000000000
--- a/scripts/authors
+++ /dev/null
@@ -1,10 +0,0 @@
-#!/usr/bin/env sh
-
-# Generate an AUTHORS file based on the output of git shortlog. It uses ABC
-# order, strips out leading spaces and numbers, then filters out specific
-# authors.
-
-git shortlog -se \
-  | perl -spe 's/^\s+\d+\s+//' \
-  | sed -e '/^CommitSyncScript.*$/d' \
-  > AUTHORS
diff --git a/scripts/babel/__tests__/transform-lazy-jsx-import-test.js b/scripts/babel/__tests__/transform-lazy-jsx-import-test.js
new file mode 100644
index 00000000000..9437d9e4ebd
--- /dev/null
+++ b/scripts/babel/__tests__/transform-lazy-jsx-import-test.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('transform-lazy-jsx-import', () => {
+  it('should use the mocked version of the "react" runtime in jsx', () => {
+    jest.resetModules();
+    const mock = jest.fn(type => 'fakejsx: ' + type);
+    if (__DEV__) {
+      jest.mock('react/jsx-dev-runtime', () => {
+        return {
+          jsxDEV: mock,
+        };
+      });
+    } else {
+      jest.mock('react/jsx-runtime', () => ({
+        jsx: mock,
+        jsxs: mock,
+      }));
+    }
+    // eslint-disable-next-line react/react-in-jsx-scope
+    const x = <div />;
+    expect(x).toBe('fakejsx: div');
+    expect(mock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/scripts/babel/__tests__/transform-prevent-infinite-loops-test.js b/scripts/babel/__tests__/transform-prevent-infinite-loops-test.js
new file mode 100644
index 00000000000..8c1df093381
--- /dev/null
+++ b/scripts/babel/__tests__/transform-prevent-infinite-loops-test.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('transform-prevent-infinite-loops', () => {
+  // Note: instead of testing the transform by applying it,
+  // we assume that it *is* already applied. Since we expect
+  // it to be applied to all our tests.
+
+  it('fails the test for `while` loops', () => {
+    expect(global.infiniteLoopError).toBe(null);
+    expect(() => {
+      while (true) {
+        // do nothing
+      }
+    }).toThrow(RangeError);
+    // Make sure this gets set so the test would fail regardless.
+    expect(global.infiniteLoopError).not.toBe(null);
+    // Clear the flag since otherwise *this* test would fail.
+    global.infiniteLoopError = null;
+  });
+
+  it('fails the test for `for` loops', () => {
+    expect(global.infiniteLoopError).toBe(null);
+    expect(() => {
+      for (;;) {
+        // do nothing
+      }
+    }).toThrow(RangeError);
+    // Make sure this gets set so the test would fail regardless.
+    expect(global.infiniteLoopError).not.toBe(null);
+    // Clear the flag since otherwise *this* test would fail.
+    global.infiniteLoopError = null;
+  });
+});
diff --git a/scripts/babel/__tests__/transform-test-gate-pragma-test.js b/scripts/babel/__tests__/transform-test-gate-pragma-test.js
new file mode 100644
index 00000000000..6250b5b4ded
--- /dev/null
+++ b/scripts/babel/__tests__/transform-test-gate-pragma-test.js
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+describe('transform-test-gate-pragma', () => {
+  // Fake runtime
+  // eslint-disable-next-line no-unused-vars
+  const _test_gate = (gateFn, testName, cb) => {
+    // eslint-disable-next-line jest/no-done-callback, jest/valid-title
+    it(testName, (...args) => {
+      shouldPass = gateFn(context);
+      return cb(...args);
+    });
+  };
+
+  // eslint-disable-next-line no-unused-vars
+  const _test_gate_focus = (gateFn, testName, cb) => {
+    // NOTE: Tests in this file are not actually focused because the calls to
+    // `test.only` and `fit` are compiled to `_test_gate_focus`. So if you want
+    // to focus something, swap the following `test` call for `test.only`.
+    // eslint-disable-next-line jest/no-done-callback, jest/valid-title
+    it(testName, (...args) => {
+      shouldPass = gateFn(context);
+      isFocused = true;
+      return cb(...args);
+    });
+  };
+
+  // Feature flags, environment variables, etc. We can configure this in
+  // our test set up.
+  const context = {
+    flagThatIsOff: false,
+    flagThatIsOn: true,
+    environment: 'fake-environment',
+  };
+
+  let shouldPass;
+  let isFocused;
+  beforeEach(() => {
+    shouldPass = null;
+    isFocused = false;
+  });
+
+  it('no pragma', () => {
+    expect(shouldPass).toBe(null);
+  });
+
+  // unrelated comment
+  it('no pragma, unrelated comment', () => {
+    expect(shouldPass).toBe(null);
+  });
+
+  // @gate flagThatIsOn
+  it('basic positive test', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOff
+  it('basic negative test', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @gate flagThatIsOn
+  it('method', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  /* eslint-disable jest/no-focused-tests */
+
+  // @gate flagThatIsOn
+  it.only('test.only', () => {
+    expect(isFocused).toBe(true);
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOff
+  it.only('it.only', () => {
+    expect(isFocused).toBe(true);
+    expect(shouldPass).toBe(false);
+  });
+
+  // @gate flagThatIsOn
+  it.only('fit', () => {
+    expect(isFocused).toBe(true);
+    expect(shouldPass).toBe(true);
+  });
+
+  /* eslint-enable jest/no-focused-tests */
+
+  // @gate !flagThatIsOff
+  it('flag negation', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOn
+  // @gate !flagThatIsOff
+  it('multiple gates', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOn
+  // @gate flagThatIsOff
+  it('multiple gates 2', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @gate !flagThatIsOff && flagThatIsOn
+  it('&&', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOff || flagThatIsOn
+  it('||', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate (flagThatIsOn || flagThatIsOff) && flagThatIsOn
+  it('groups', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOn == !flagThatIsOff
+  it('==', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOn === !flagThatIsOff
+  it('===', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOn != !flagThatIsOff
+  it('!=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @gate flagThatIsOn != !flagThatIsOff
+  it('!==', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @gate flagThatIsOn === true
+  it('true', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOff === false
+  it('false', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate environment === "fake-environment"
+  it('double quoted strings', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate environment === 'fake-environment'
+  it('single quoted strings', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @gate flagThatIsOn // This is a comment
+  it('line comment', () => {
+    expect(shouldPass).toBe(true);
+  });
+});
+
+describe('transform test-gate-pragma: actual runtime', () => {
+  // These tests use the actual gating runtime used by the rest of our
+  // test suite.
+
+  // @gate __DEV__
+  it('__DEV__', () => {
+    if (!__DEV__) {
+      throw Error("Doesn't work in production!");
+    }
+  });
+
+  // @gate build === "development"
+  it('strings', () => {
+    if (!__DEV__) {
+      throw Error("Doesn't work in production!");
+    }
+  });
+
+  // Always should fail because of the unguarded console.error
+  // @gate false
+  it('works with console.error tracking', () => {
+    console.error('Should cause test to fail');
+  });
+
+  // Always should fail because of the unguarded console.warn
+  // @gate false
+  it('works with console.warn tracking', () => {
+    console.warn('Should cause test to fail');
+  });
+
+  // @gate false
+  it('works with console tracking if error is thrown before end of test', () => {
+    console.warn('Please stop that!');
+    console.error('Stop that!');
+    throw Error('I told you to stop!');
+  });
+
+  // @gate false
+  it('a global error event is treated as a test failure', () => {
+    dispatchEvent(
+      new ErrorEvent('error', {
+        error: new Error('Oops!'),
+      })
+    );
+  });
+});
+
+describe('dynamic gate method', () => {
+  // @gate experimental && __DEV__
+  it('returns same conditions as pragma', () => {
+    expect(gate(ctx => ctx.experimental && ctx.__DEV__)).toBe(true);
+  });
+
+  it('converts string conditions to accessor function', () => {
+    expect(gate('experimental')).toBe(gate(flags => flags.experimental));
+  });
+});
diff --git a/scripts/babel/getComments.js b/scripts/babel/getComments.js
new file mode 100644
index 00000000000..886e7d4b361
--- /dev/null
+++ b/scripts/babel/getComments.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+function getComments(path) {
+  const allComments = path.hub.file.ast.comments;
+  if (path.node.leadingComments) {
+    // Babel AST includes comments.
+    return path.node.leadingComments;
+  }
+  // In Hermes AST we need to find the comments by range.
+  const comments = [];
+  let line = path.node.loc.start.line;
+  let i = allComments.length - 1;
+  while (i >= 0 && allComments[i].loc.end.line >= line) {
+    i--;
+  }
+  while (i >= 0 && allComments[i].loc.end.line === line - 1) {
+    line = allComments[i].loc.start.line;
+    comments.unshift(allComments[i]);
+    i--;
+  }
+  return comments;
+}
+
+module.exports = getComments;
diff --git a/scripts/babel/transform-lazy-jsx-import.js b/scripts/babel/transform-lazy-jsx-import.js
new file mode 100644
index 00000000000..ae7ee8c3632
--- /dev/null
+++ b/scripts/babel/transform-lazy-jsx-import.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Most of our tests call jest.resetModules in a beforeEach and the
+// re-require all the React modules. However, the JSX runtime is injected by
+// the compiler, so those bindings don't get updated. This causes warnings
+// logged by the JSX runtime to not have a component stack, because component
+// stack relies on the the secret internals object that lives on the React
+// module, which because of the resetModules call is longer the same one.
+//
+// To workaround this issue, use a transform that calls require() again before
+// every JSX invocation.
+//
+// Longer term we should migrate all our tests away from using require() and
+// resetModules, and use import syntax instead so this kind of thing doesn't
+// happen.
+
+module.exports = function replaceJSXImportWithLazy(babel) {
+  const {types: t} = babel;
+
+  function getInlineRequire(moduleName) {
+    return t.callExpression(t.identifier('require'), [
+      t.stringLiteral(moduleName),
+    ]);
+  }
+
+  return {
+    visitor: {
+      CallExpression: function (path, pass) {
+        let callee = path.node.callee;
+        if (callee.type === 'SequenceExpression') {
+          callee = callee.expressions[callee.expressions.length - 1];
+        }
+        if (callee.type === 'Identifier') {
+          // Sometimes we seem to hit this before the imports are transformed
+          // into requires and so we hit this case.
+          switch (callee.name) {
+            case '_jsxDEV':
+              path.node.callee = t.memberExpression(
+                getInlineRequire('react/jsx-dev-runtime'),
+                t.identifier('jsxDEV')
+              );
+              return;
+            case '_jsx':
+              path.node.callee = t.memberExpression(
+                getInlineRequire('react/jsx-runtime'),
+                t.identifier('jsx')
+              );
+              return;
+            case '_jsxs':
+              path.node.callee = t.memberExpression(
+                getInlineRequire('react/jsx-runtime'),
+                t.identifier('jsxs')
+              );
+              return;
+          }
+          return;
+        }
+        if (callee.type !== 'MemberExpression') {
+          return;
+        }
+        if (callee.property.type !== 'Identifier') {
+          // Needs to be jsx, jsxs, jsxDEV.
+          return;
+        }
+        if (callee.object.type !== 'Identifier') {
+          // Needs to be _reactJsxDevRuntime or _reactJsxRuntime.
+          return;
+        }
+        // Replace the cached identifier with a new require call.
+        // Relying on the identifier name is a little flaky. Should ideally pick
+        // this from the import. For some reason it sometimes has the react prefix
+        // and other times it doesn't.
+        switch (callee.object.name) {
+          case '_reactJsxDevRuntime':
+          case '_jsxDevRuntime':
+            callee.object = getInlineRequire('react/jsx-dev-runtime');
+            return;
+          case '_reactJsxRuntime':
+          case '_jsxRuntime':
+            callee.object = getInlineRequire('react/jsx-runtime');
+            return;
+        }
+      },
+    },
+  };
+};
diff --git a/scripts/babel/transform-object-assign.js b/scripts/babel/transform-object-assign.js
new file mode 100644
index 00000000000..5844d7d5abb
--- /dev/null
+++ b/scripts/babel/transform-object-assign.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 autoImporter(babel) {
+  function getAssignIdent(path, file, state) {
+    if (state.id) {
+      return state.id;
+    }
+    state.id = helperModuleImports.addDefault(path, 'shared/assign', {
+      nameHint: 'assign',
+    });
+    return state.id;
+  }
+
+  return {
+    pre: function () {
+      // map from module to generated identifier
+      this.id = null;
+    },
+
+    visitor: {
+      CallExpression: function (path, file) {
+        if (/shared(\/|\\)assign/.test(file.filename)) {
+          // Don't replace Object.assign if we're transforming shared/assign
+          return;
+        }
+        if (path.get('callee').matchesPattern('Object.assign')) {
+          // generate identifier and require if it hasn't been already
+          const id = getAssignIdent(path, file, this);
+          path.node.callee = id;
+        }
+      },
+
+      MemberExpression: function (path, file) {
+        if (/shared(\/|\\)assign/.test(file.filename)) {
+          // Don't replace Object.assign if we're transforming shared/assign
+          return;
+        }
+        if (path.matchesPattern('Object.assign')) {
+          const id = getAssignIdent(path, file, this);
+          path.replaceWith(id);
+        }
+      },
+    },
+  };
+};
diff --git a/scripts/babel/transform-prevent-infinite-loops.js b/scripts/babel/transform-prevent-infinite-loops.js
new file mode 100644
index 00000000000..635526c14e9
--- /dev/null
+++ b/scripts/babel/transform-prevent-infinite-loops.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) 2017, Amjad Masad
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+// Based on https://repl.it/site/blog/infinite-loops.
+
+// This should be reasonable for all loops in the source.
+// Note that if the numbers are too large, the tests will take too long to fail
+// for this to be useful (each individual test case might hit an infinite loop).
+const MAX_SOURCE_ITERATIONS = 6000;
+// Code in tests themselves is permitted to run longer.
+// For example, in the fuzz tester.
+const MAX_TEST_ITERATIONS = 5000;
+
+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%%++ > %%maxIterations%%) {
+      global.infiniteLoopError = new RangeError(
+        'Potential infinite loop: exceeded ' +
+        %%maxIterations%% +
+        ' iterations.'
+      );
+      throw global.infiniteLoopError;
+    }
+  `);
+
+  return {
+    visitor: {
+      'WhileStatement|ForStatement|DoWhileStatement': (path, file) => {
+        const filename = file.file.opts.filename;
+        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');
+        const iteratorInit = t.numericLiteral(0);
+        path.scope.parent.push({
+          id: iterator,
+          init: iteratorInit,
+        });
+        // If statement and throw error if it matches our criteria
+        const guard = buildGuard({
+          iterator,
+          maxIterations,
+        });
+        // No block statement e.g. `while (1) 1;`
+        if (!path.get('body').isBlockStatement()) {
+          const statement = path.get('body').node;
+          path.get('body').replaceWith(t.blockStatement([guard, statement]));
+        } else {
+          path.get('body').unshiftContainer('body', guard);
+        }
+      },
+    },
+  };
+};
diff --git a/scripts/babel/transform-react-version-pragma.js b/scripts/babel/transform-react-version-pragma.js
new file mode 100644
index 00000000000..76036f1075e
--- /dev/null
+++ b/scripts/babel/transform-react-version-pragma.js
@@ -0,0 +1,113 @@
+'use strict';
+
+const getComments = require('./getComments');
+
+const GATE_VERSION_STR = '@reactVersion ';
+const REACT_VERSION_ENV = process.env.REACT_VERSION;
+
+function transform(babel) {
+  const {types: t} = babel;
+
+  // Runs tests conditionally based on the version of react (semver range) we are running
+  // Input:
+  //   @reactVersion >= 17.0
+  //   test('some test', () => {/*...*/})
+  //
+  // Output:
+  //    @reactVersion >= 17.0
+  //   _test_react_version('>= 17.0', 'some test', () => {/*...*/});
+  //
+  // See info about semver ranges here:
+  // https://www.npmjs.com/package/semver
+  function buildGateVersionCondition(comments) {
+    if (!comments) {
+      return null;
+    }
+
+    const resultingCondition = comments.reduce(
+      (accumulatedCondition, commentLine) => {
+        const commentStr = commentLine.value.trim();
+
+        if (!commentStr.startsWith(GATE_VERSION_STR)) {
+          return accumulatedCondition;
+        }
+
+        const condition = commentStr.slice(GATE_VERSION_STR.length);
+        if (accumulatedCondition === null) {
+          return condition;
+        }
+
+        return accumulatedCondition.concat(' ', condition);
+      },
+      null
+    );
+
+    if (resultingCondition === null) {
+      return null;
+    }
+
+    return t.stringLiteral(resultingCondition);
+  }
+
+  return {
+    name: 'transform-react-version-pragma',
+    visitor: {
+      ExpressionStatement(path) {
+        const statement = path.node;
+        const expression = statement.expression;
+        if (expression.type === 'CallExpression') {
+          const callee = expression.callee;
+          switch (callee.type) {
+            case 'Identifier': {
+              if (
+                callee.name === 'test' ||
+                callee.name === 'it' ||
+                callee.name === 'fit'
+              ) {
+                const comments = getComments(path);
+                const condition = buildGateVersionCondition(comments);
+                if (condition !== null) {
+                  callee.name =
+                    callee.name === 'fit'
+                      ? '_test_react_version_focus'
+                      : '_test_react_version';
+                  expression.arguments = [condition, ...expression.arguments];
+                } else if (REACT_VERSION_ENV) {
+                  callee.name = '_test_ignore_for_react_version';
+                }
+              }
+              break;
+            }
+            case 'MemberExpression': {
+              if (
+                callee.object.type === 'Identifier' &&
+                (callee.object.name === 'test' ||
+                  callee.object.name === 'it') &&
+                callee.property.type === 'Identifier' &&
+                callee.property.name === 'only'
+              ) {
+                const comments = getComments(path);
+                const condition = buildGateVersionCondition(comments);
+                if (condition !== null) {
+                  statement.expression = t.callExpression(
+                    t.identifier('_test_react_version_focus'),
+                    [condition, ...expression.arguments]
+                  );
+                } else if (REACT_VERSION_ENV) {
+                  statement.expression = t.callExpression(
+                    t.identifier('_test_ignore_for_react_version'),
+                    expression.arguments
+                  );
+                }
+              }
+              break;
+            }
+          }
+        }
+        return;
+      },
+    },
+  };
+}
+
+module.exports = transform;
diff --git a/scripts/babel/transform-test-gate-pragma.js b/scripts/babel/transform-test-gate-pragma.js
new file mode 100644
index 00000000000..bc83487604c
--- /dev/null
+++ b/scripts/babel/transform-test-gate-pragma.js
@@ -0,0 +1,336 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const getComments = require('./getComments');
+
+function transform(babel) {
+  const {types: t} = babel;
+
+  // A very stupid subset of pseudo-JavaScript, used to run tests conditionally
+  // based on the environment.
+  //
+  // Input:
+  //   @gate a && (b || c)
+  //   test('some test', () => {/*...*/})
+  //
+  // Output:
+  //   @gate a && (b || c)
+  //   _test_gate(ctx => ctx.a && (ctx.b || ctx.c), 'some test', () => {/*...*/});
+  //
+  // expression     →  binary ( ( "||" | "&&" ) binary)* ;
+  // binary         →  unary ( ( "==" | "!=" | "===" | "!==" ) unary )* ;
+  // unary          →  "!" primary
+  //                |  primary ;
+  // primary        →  NAME | STRING | BOOLEAN
+  //                |  "(" expression ")" ;
+  function tokenize(code) {
+    const tokens = [];
+    let i = 0;
+    while (i < code.length) {
+      let char = code[i];
+      // Double quoted strings
+      if (char === '"') {
+        let string = '';
+        i++;
+        do {
+          if (i > code.length) {
+            throw Error('Missing a closing quote');
+          }
+          char = code[i++];
+          if (char === '"') {
+            break;
+          }
+          string += char;
+        } while (true);
+        tokens.push({type: 'string', value: string});
+        continue;
+      }
+
+      // Single quoted strings
+      if (char === "'") {
+        let string = '';
+        i++;
+        do {
+          if (i > code.length) {
+            throw Error('Missing a closing quote');
+          }
+          char = code[i++];
+          if (char === "'") {
+            break;
+          }
+          string += char;
+        } while (true);
+        tokens.push({type: 'string', value: string});
+        continue;
+      }
+
+      // Whitespace
+      if (/\s/.test(char)) {
+        if (char === '\n') {
+          return tokens;
+        }
+        i++;
+        continue;
+      }
+
+      const next3 = code.slice(i, i + 3);
+      if (next3 === '===') {
+        tokens.push({type: '=='});
+        i += 3;
+        continue;
+      }
+      if (next3 === '!==') {
+        tokens.push({type: '!='});
+        i += 3;
+        continue;
+      }
+
+      const next2 = code.slice(i, i + 2);
+      switch (next2) {
+        case '&&':
+        case '||':
+        case '==':
+        case '!=':
+          tokens.push({type: next2});
+          i += 2;
+          continue;
+        case '//':
+          // This is the beginning of a line comment. The rest of the line
+          // is ignored.
+          return tokens;
+      }
+
+      switch (char) {
+        case '(':
+        case ')':
+        case '!':
+          tokens.push({type: char});
+          i++;
+          continue;
+      }
+
+      // Names
+      const nameRegex = /[a-zA-Z_$][0-9a-zA-Z_$]*/y;
+      nameRegex.lastIndex = i;
+      const match = nameRegex.exec(code);
+      if (match !== null) {
+        const name = match[0];
+        switch (name) {
+          case 'true': {
+            tokens.push({type: 'boolean', value: true});
+            break;
+          }
+          case 'false': {
+            tokens.push({type: 'boolean', value: false});
+            break;
+          }
+          default: {
+            tokens.push({type: 'name', name});
+          }
+        }
+        i += name.length;
+        continue;
+      }
+
+      throw Error('Invalid character: ' + char);
+    }
+    return tokens;
+  }
+
+  function parse(code, ctxIdentifier) {
+    const tokens = tokenize(code);
+
+    let i = 0;
+    function parseExpression() {
+      let left = parseBinary();
+      while (true) {
+        const token = tokens[i];
+        if (token !== undefined) {
+          switch (token.type) {
+            case '||':
+            case '&&': {
+              i++;
+              const right = parseBinary();
+              if (right === null) {
+                throw Error('Missing expression after ' + token.type);
+              }
+              left = t.logicalExpression(token.type, left, right);
+              continue;
+            }
+          }
+        }
+        break;
+      }
+      return left;
+    }
+
+    function parseBinary() {
+      let left = parseUnary();
+      while (true) {
+        const token = tokens[i];
+        if (token !== undefined) {
+          switch (token.type) {
+            case '==':
+            case '!=': {
+              i++;
+              const right = parseUnary();
+              if (right === null) {
+                throw Error('Missing expression after ' + token.type);
+              }
+              left = t.binaryExpression(token.type, left, right);
+              continue;
+            }
+          }
+        }
+        break;
+      }
+      return left;
+    }
+
+    function parseUnary() {
+      const token = tokens[i];
+      if (token !== undefined) {
+        if (token.type === '!') {
+          i++;
+          const argument = parseUnary();
+          return t.unaryExpression('!', argument);
+        }
+      }
+      return parsePrimary();
+    }
+
+    function parsePrimary() {
+      const token = tokens[i];
+      switch (token.type) {
+        case 'boolean': {
+          i++;
+          return t.booleanLiteral(token.value);
+        }
+        case 'name': {
+          i++;
+          return t.memberExpression(ctxIdentifier, t.identifier(token.name));
+        }
+        case 'string': {
+          i++;
+          return t.stringLiteral(token.value);
+        }
+        case '(': {
+          i++;
+          const expression = parseExpression();
+          const closingParen = tokens[i];
+          if (closingParen === undefined || closingParen.type !== ')') {
+            throw Error('Expected closing )');
+          }
+          i++;
+          return expression;
+        }
+        default: {
+          throw Error('Unexpected token: ' + token.type);
+        }
+      }
+    }
+
+    const program = parseExpression();
+    if (tokens[i] !== undefined) {
+      throw Error('Unexpected token');
+    }
+    return program;
+  }
+
+  function buildGateCondition(comments) {
+    let conditions = null;
+    for (const line of comments) {
+      const commentStr = line.value.trim();
+      if (commentStr.startsWith('@gate ')) {
+        const code = commentStr.slice(6);
+        const ctxIdentifier = t.identifier('ctx');
+        const condition = parse(code, ctxIdentifier);
+        if (conditions === null) {
+          conditions = [condition];
+        } else {
+          conditions.push(condition);
+        }
+      }
+    }
+    if (conditions !== null) {
+      let condition = conditions[0];
+      for (let i = 1; i < conditions.length; i++) {
+        const right = conditions[i];
+        condition = t.logicalExpression('&&', condition, right);
+      }
+      return condition;
+    } else {
+      return null;
+    }
+  }
+
+  return {
+    name: 'test-gate-pragma',
+    visitor: {
+      ExpressionStatement(path) {
+        const statement = path.node;
+        const expression = statement.expression;
+        if (expression.type === 'CallExpression') {
+          const callee = expression.callee;
+          switch (callee.type) {
+            case 'Identifier': {
+              if (
+                callee.name === 'test' ||
+                callee.name === 'it' ||
+                callee.name === 'fit'
+              ) {
+                const comments = getComments(path);
+                if (comments !== undefined) {
+                  const condition = buildGateCondition(comments);
+                  if (condition !== null) {
+                    callee.name =
+                      callee.name === 'fit' ? '_test_gate_focus' : '_test_gate';
+                    expression.arguments = [
+                      t.arrowFunctionExpression(
+                        [t.identifier('ctx')],
+                        condition
+                      ),
+                      ...expression.arguments,
+                    ];
+                  }
+                }
+              }
+              break;
+            }
+            case 'MemberExpression': {
+              if (
+                callee.object.type === 'Identifier' &&
+                (callee.object.name === 'test' ||
+                  callee.object.name === 'it') &&
+                callee.property.type === 'Identifier' &&
+                callee.property.name === 'only'
+              ) {
+                const comments = getComments(path);
+                if (comments !== undefined) {
+                  const condition = buildGateCondition(comments);
+                  if (condition !== null) {
+                    statement.expression = t.callExpression(
+                      t.identifier('_test_gate_focus'),
+                      [
+                        t.arrowFunctionExpression(
+                          [t.identifier('ctx')],
+                          condition
+                        ),
+                        ...expression.arguments,
+                      ]
+                    );
+                  }
+                }
+              }
+              break;
+            }
+          }
+        }
+        return;
+      },
+    },
+  };
+}
+
+module.exports = transform;
diff --git a/scripts/bench/.gitignore b/scripts/bench/.gitignore
new file mode 100644
index 00000000000..09dbc372c71
--- /dev/null
+++ b/scripts/bench/.gitignore
@@ -0,0 +1,2 @@
+react-dom.production.min.js
+react.production.min.js
diff --git a/scripts/bench/README.md b/scripts/bench/README.md
new file mode 100644
index 00000000000..ae567fa5169
--- /dev/null
+++ b/scripts/bench/README.md
@@ -0,0 +1,41 @@
+# React Benchmarking
+
+## Commands
+
+In most cases, the only two commands you might want to use are:
+
+- `yarn start`
+- `yarn --cwd=../../ build react/index,react-dom/index --type=UMD_PROD && yarn start --skip-build`
+
+The first command will run benchmarks with all the default settings. A local and remote build will occur on React and ReactDOM UMD bundles, both local and remote repos will be run against all benchmarks.
+
+The second command will run all benchmarks but skip the build process. This is useful for when doing local performance tweaking and the remote repo has already had its bundles built. Both local and remote repos will be run against all benchmarks with this command too.
+
+The other commands are as follows:
+
+```bash
+# will compare local repo vs remote merge base repo
+yarn start
+
+# will compare local repo vs remote merge base repo
+# this can significantly improve bench times due to no build
+yarn start --skip-build
+
+# will only build and run local repo against benchmarks (no remote values will be shown)
+yarn start --local
+
+# will only build and run remote merge base repo against benchmarks (no local values will be shown)
+yarn start --remote
+
+# will only build and run remote main repo against benchmarks
+yarn start --remote=main
+
+# same as "yarn start"
+yarn start --remote --local
+
+# runs benchmarks with Chrome in headless mode
+yarn start --headless
+
+# runs only specific string matching benchmarks
+yarn start --benchmark=hacker
+```
diff --git a/scripts/bench/benchmark.js b/scripts/bench/benchmark.js
new file mode 100644
index 00000000000..996f3203c4d
--- /dev/null
+++ b/scripts/bench/benchmark.js
@@ -0,0 +1,130 @@
+'use strict';
+
+const Lighthouse = require('lighthouse');
+const chromeLauncher = require('chrome-launcher');
+
+const stats = require('stats-analysis');
+const config = require('lighthouse/lighthouse-core/config/perf-config');
+const spawn = require('child_process').spawn;
+const os = require('os');
+
+const timesToRun = 10;
+
+function wait(val) {
+  return new Promise(resolve => setTimeout(resolve, val));
+}
+
+async function runScenario(benchmark, chrome) {
+  const port = chrome.port;
+  const results = await Lighthouse(
+    `http://localhost:8080/${benchmark}/`,
+    {
+      output: 'json',
+      port,
+    },
+    config
+  );
+
+  const perfMarkings = results.lhr.audits['user-timings'].details.items;
+  const entries = perfMarkings
+    .filter(({timingType}) => timingType !== 'Mark')
+    .map(({duration, name}) => ({
+      entry: name,
+      time: duration,
+    }));
+  entries.push({
+    entry: 'First Meaningful Paint',
+    time: results.lhr.audits['first-meaningful-paint'].rawValue,
+  });
+
+  return entries;
+}
+
+function bootstrap(data) {
+  const len = data.length;
+  const arr = Array(len);
+  for (let j = 0; j < len; j++) {
+    arr[j] = data[(Math.random() * len) | 0];
+  }
+  return arr;
+}
+
+function calculateStandardErrorOfMean(data) {
+  const means = [];
+  for (let i = 0; i < 10000; i++) {
+    means.push(stats.mean(bootstrap(data)));
+  }
+  return stats.stdev(means);
+}
+
+function calculateAverages(runs) {
+  const data = [];
+  const averages = [];
+
+  runs.forEach((entries, x) => {
+    entries.forEach(({entry, time}, i) => {
+      if (i >= averages.length) {
+        data.push([time]);
+        averages.push({
+          entry,
+          mean: 0,
+          sem: 0,
+        });
+      } else {
+        data[i].push(time);
+        if (x === runs.length - 1) {
+          const dataWithoutOutliers = stats.filterMADoutliers(data[i]);
+          averages[i].mean = stats.mean(dataWithoutOutliers);
+          averages[i].sem = calculateStandardErrorOfMean(data[i]);
+        }
+      }
+    });
+  });
+
+  return averages;
+}
+
+async function initChrome() {
+  const platform = os.platform();
+
+  if (platform === 'linux') {
+    process.env.XVFBARGS = '-screen 0, 1024x768x16';
+    process.env.LIGHTHOUSE_CHROMIUM_PATH = 'chromium-browser';
+    const child = spawn('xvfb start', [{detached: true, stdio: ['ignore']}]);
+    child.unref();
+    // wait for chrome to load then continue
+    await wait(3000);
+    return child;
+  }
+}
+
+async function launchChrome(headless) {
+  return await chromeLauncher.launch({
+    chromeFlags: [headless ? '--headless' : ''],
+  });
+}
+
+async function runBenchmark(benchmark, headless) {
+  const results = {
+    runs: [],
+    averages: [],
+  };
+
+  await initChrome();
+
+  for (let i = 0; i < timesToRun; i++) {
+    let chrome = await launchChrome(headless);
+
+    results.runs.push(await runScenario(benchmark, chrome));
+    // add a delay or sometimes it confuses lighthouse and it hangs
+    await wait(500);
+    try {
+      await chrome.kill();
+    } catch (e) {}
+  }
+
+  results.averages = calculateAverages(results.runs);
+  return results;
+}
+
+module.exports = runBenchmark;
diff --git a/scripts/bench/benchmarks/hacker-news/benchmark.js b/scripts/bench/benchmarks/hacker-news/benchmark.js
new file mode 100644
index 00000000000..d164c1f8bf3
--- /dev/null
+++ b/scripts/bench/benchmarks/hacker-news/benchmark.js
@@ -0,0 +1,315 @@
+(function () {
+  'use strict';
+
+  const e = React.createElement;
+
+  function timeAge(time) {
+    const now = new Date().getTime() / 1000;
+    const minutes = (now - time) / 60;
+
+    if (minutes < 60) {
+      return Math.round(minutes) + ' minutes ago';
+    }
+    return Math.round(minutes / 60) + ' hours ago';
+  }
+
+  function getHostUrl(url) {
+    return (url + '')
+      .replace('https://', '')
+      .replace('http://', '')
+      .split('/')[0];
+  }
+
+  function HeaderBar() {
+    return e(
+      'tr',
+      {
+        style: {
+          backgroundColor: '#222',
+        },
+      },
+      e(
+        'table',
+        {
+          style: {
+            padding: 4,
+          },
+          width: '100%',
+          cellSpacing: 0,
+          cellPadding: 0,
+        },
+        e(
+          'tbody',
+          null,
+          e(
+            'tr',
+            null,
+            e(
+              'td',
+              {
+                style: {
+                  width: 18,
+                  paddingRight: 4,
+                },
+              },
+              e(
+                'a',
+                {
+                  href: '#',
+                },
+                e('img', {
+                  src: 'logo.png',
+                  width: 16,
+                  height: 16,
+                  style: {
+                    border: '1px solid #00d8ff',
+                  },
+                })
+              )
+            ),
+            e(
+              'td',
+              {
+                style: {
+                  lineHeight: '12pt',
+                },
+                height: 10,
+              },
+              e(
+                'span',
+                {
+                  className: 'pagetop',
+                },
+                e('b', {className: 'hnname'}, 'React HN Benchmark'),
+                e('a', {href: '#'}, 'new'),
+                ' | ',
+                e('a', {href: '#'}, 'comments'),
+                ' | ',
+                e('a', {href: '#'}, 'show'),
+                ' | ',
+                e('a', {href: '#'}, 'ask'),
+                ' | ',
+                e('a', {href: '#'}, 'jobs'),
+                ' | ',
+                e('a', {href: '#'}, 'submit')
+              )
+            )
+          )
+        )
+      )
+    );
+  }
+
+  function Story({story, rank}) {
+    return [
+      e(
+        'tr',
+        {
+          className: 'athing',
+        },
+        e(
+          'td',
+          {
+            style: {
+              verticalAlign: 'top',
+              textAlign: 'right',
+            },
+            className: 'title',
+          },
+          e(
+            'span',
+            {
+              className: 'rank',
+            },
+            `${rank}.`
+          )
+        ),
+        e(
+          'td',
+          {
+            className: 'votelinks',
+            style: {
+              verticalAlign: 'top',
+            },
+          },
+          e(
+            'center',
+            null,
+            e(
+              'a',
+              {
+                href: '#',
+              },
+              e('div', {
+                className: 'votearrow',
+                title: 'upvote',
+              })
+            )
+          )
+        ),
+        e(
+          'td',
+          {
+            className: 'title',
+          },
+          e(
+            'a',
+            {
+              href: '#',
+              className: 'storylink',
+            },
+            story.title
+          ),
+          story.url
+            ? e(
+                'span',
+                {
+                  className: 'sitebit comhead',
+                },
+                ' (',
+                e(
+                  'a',
+                  {
+                    href: '#',
+                  },
+                  getHostUrl(story.url)
+                ),
+                ')'
+              )
+            : null
+        )
+      ),
+      e(
+        'tr',
+        null,
+        e('td', {
+          colSpan: 2,
+        }),
+        e(
+          'td',
+          {
+            className: 'subtext',
+          },
+          e(
+            'span',
+            {
+              className: 'score',
+            },
+            `${story.score} points`
+          ),
+          ' by ',
+          e(
+            'a',
+            {
+              href: '#',
+              className: 'hnuser',
+            },
+            story.by
+          ),
+          ' ',
+          e(
+            'span',
+            {
+              className: 'age',
+            },
+            e(
+              'a',
+              {
+                href: '#',
+              },
+              timeAge(story.time)
+            )
+          ),
+          ' | ',
+          e(
+            'a',
+            {
+              href: '#',
+            },
+            'hide'
+          ),
+          ' | ',
+          e(
+            'a',
+            {
+              href: '#',
+            },
+            `${story.descendants || 0} comments`
+          )
+        )
+      ),
+      e('tr', {
+        style: {
+          height: 5,
+        },
+        className: 'spacer',
+      }),
+    ];
+  }
+
+  function StoryList({stories}) {
+    return e(
+      'tr',
+      null,
+      e(
+        'td',
+        null,
+        e(
+          'table',
+          {
+            cellPadding: 0,
+            cellSpacing: 0,
+            classList: 'itemlist',
+          },
+          e(
+            'tbody',
+            null,
+            stories.map((story, i) =>
+              e(Story, {story, rank: ++i, key: story.id})
+            )
+          )
+        )
+      )
+    );
+  }
+
+  function App({stories}) {
+    return e(
+      'center',
+      null,
+      e(
+        'table',
+        {
+          id: 'hnmain',
+          border: 0,
+          cellPadding: 0,
+          cellSpacing: 0,
+          width: '85%',
+          style: {
+            'background-color': '#f6f6ef',
+          },
+        },
+        e(
+          'tbody',
+          null,
+          e(HeaderBar, null),
+          e('tr', {height: 10}),
+          e(StoryList, {
+            stories,
+          })
+        )
+      )
+    );
+  }
+
+  const app = document.getElementById('app');
+
+  window.render = function render() {
+    ReactDOM.render(
+      React.createElement(App, {
+        stories: window.stories,
+      }),
+      app
+    );
+  };
+})();
diff --git a/scripts/bench/benchmarks/hacker-news/build.js b/scripts/bench/benchmarks/hacker-news/build.js
new file mode 100644
index 00000000000..ffbd82637d2
--- /dev/null
+++ b/scripts/bench/benchmarks/hacker-news/build.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const {join} = require('path');
+
+async function build(reactPath, asyncCopyTo) {
+  // copy the UMD bundles
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react.production.js'),
+    join(__dirname, 'react.production.js')
+  );
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react-dom.production.js'),
+    join(__dirname, 'react-dom.production.js')
+  );
+}
+
+module.exports = build;
diff --git a/scripts/bench/benchmarks/hacker-news/generate.js b/scripts/bench/benchmarks/hacker-news/generate.js
new file mode 100644
index 00000000000..eb0cdb03874
--- /dev/null
+++ b/scripts/bench/benchmarks/hacker-news/generate.js
@@ -0,0 +1,33 @@
+'use strict';
+
+const fetch = require('node-fetch');
+const {writeFileSync} = require('fs');
+const stories = 50;
+
+async function getStory(id) {
+  const storyRes = await fetch(
+    `https://hacker-news.firebaseio.com/v0/item/${id}.json`
+  );
+  return await storyRes.json();
+}
+
+async function getTopStories() {
+  const topStoriesRes = await fetch(
+    'https://hacker-news.firebaseio.com/v0/topstories.js'
+  );
+  const topStoriesIds = await topStoriesRes.json();
+
+  const topStories = [];
+  for (let i = 0; i < stories; i++) {
+    const topStoriesId = topStoriesIds[i];
+
+    topStories.push(await getStory(topStoriesId));
+  }
+
+  writeFileSync(
+    'top-stories.json',
+    `window.stories = ${JSON.stringify(topStories)}`
+  );
+}
+
+getTopStories();
diff --git a/scripts/bench/benchmarks/hacker-news/grayarrow.gif b/scripts/bench/benchmarks/hacker-news/grayarrow.gif
new file mode 100644
index 00000000000..888485fa5b0
Binary files /dev/null and b/scripts/bench/benchmarks/hacker-news/grayarrow.gif differ
diff --git a/scripts/bench/benchmarks/hacker-news/index.html b/scripts/bench/benchmarks/hacker-news/index.html
new file mode 100644
index 00000000000..a66e6c6561c
--- /dev/null
+++ b/scripts/bench/benchmarks/hacker-news/index.html
@@ -0,0 +1,37 @@
+<html>
+  <head>
+    <title>React Hacker News Benchmark</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      performance.mark('Load React');
+      performance.mark('Load React+ReactDOM');
+    </script>
+    <script src="react.production.min.js"></script>
+    <script>
+      performance.measure('Load React', 'Load React');
+    </script>
+    <script>
+      performance.mark('Load ReactDOM');
+    </script>
+    <script src="react-dom.production.min.js"></script>
+    <script>
+      performance.measure('Load ReactDOM', 'Load ReactDOM');
+      performance.measure('Load React+ReactDOM', 'Load React+ReactDOM');
+    </script>
+    <script src="top-stories.js"></script>
+    <script src="benchmark.js"></script>
+    <script>
+      performance.mark('Initial Render');
+      render();
+      performance.measure('Initial Render', 'Initial Render');
+      requestAnimationFrame(() => {
+        performance.mark('Update Render');
+        render();
+        performance.measure('Update Render', 'Update Render');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/scripts/bench/benchmarks/hacker-news/logo.png b/scripts/bench/benchmarks/hacker-news/logo.png
new file mode 100644
index 00000000000..ee4ac0b2dfa
Binary files /dev/null and b/scripts/bench/benchmarks/hacker-news/logo.png differ
diff --git a/scripts/bench/benchmarks/hacker-news/style.css b/scripts/bench/benchmarks/hacker-news/style.css
new file mode 100644
index 00000000000..588bd99ae99
--- /dev/null
+++ b/scripts/bench/benchmarks/hacker-news/style.css
@@ -0,0 +1,57 @@
+body {
+  font-family: Verdana, Geneva, sans-serif
+}
+
+.pagetop {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: 10pt;
+  color: #00d8ff;
+}
+
+.hnname {
+  margin-right: 10px;
+  color: #fff;
+}
+
+.pagetop a, .pagetop a:visited {
+  color: #00d8ff;
+  text-decoration: none;
+}
+
+.title {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: 10pt;
+  color: #828282;
+}
+
+.subtext {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: 7pt;
+  color: #828282;
+}
+
+.comhead a:link, .subtext a, .subtext a:visited {
+  color: #828282;
+  text-decoration: none;
+}
+
+.votearrow {
+  width: 10px;
+  height: 10px;
+  border: 0px;
+  margin: 3px 2px 6px;
+  background: url(grayarrow.gif) no-repeat;
+}
+
+.title, .title a {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: 10pt;
+  color: #000;
+  text-decoration: none;
+}
+
+.comhead, .comhead a {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: 8pt;
+  color: #828282;
+}
\ No newline at end of file
diff --git a/scripts/bench/benchmarks/hacker-news/top-stories.js b/scripts/bench/benchmarks/hacker-news/top-stories.js
new file mode 100644
index 00000000000..8e4a9cafd66
--- /dev/null
+++ b/scripts/bench/benchmarks/hacker-news/top-stories.js
@@ -0,0 +1,712 @@
+window.stories = [
+  {
+    by: 'rendx',
+    descendants: 49,
+    id: 14201562,
+    kids: [
+      14201704, 14202297, 14202233, 14201771, 14201765, 14201897, 14201750,
+      14201913, 14201854, 14201667, 14201759, 14202073,
+    ],
+    score: 186,
+    time: 1493197629,
+    title:
+      'Postal: Open source mail delivery platform, alternative to Mailgun or Sendgrid',
+    type: 'story',
+    url: 'https://github.com/atech/postal',
+  },
+  {
+    by: 'rabyss',
+    descendants: 4,
+    id: 14202124,
+    kids: [14202293, 14202249],
+    score: 16,
+    time: 1493205989,
+    title:
+      'Show HN: BreakLock – A hybrid of Mastermind and the Android pattern lock',
+    type: 'story',
+    url: 'https://maxwellito.github.io/breaklock/',
+  },
+  {
+    by: 'morid1n',
+    descendants: 137,
+    id: 14200563,
+    kids: [
+      14201274, 14200711, 14201147, 14201365, 14201499, 14200618, 14201169,
+      14200911, 14200734, 14201083, 14200706, 14200785, 14201032,
+    ],
+    score: 178,
+    time: 1493183234,
+    title: 'My Hackintosh Hardware Spec – clean, based on a 2013 iMac',
+    type: 'story',
+    url: 'https://infinitediaries.net/my-exact-hackintosh-spec/',
+  },
+  {
+    by: 'robertwiblin',
+    descendants: 203,
+    id: 14196731,
+    kids: [
+      14201298, 14201838, 14201381, 14197574, 14201398, 14199764, 14198491,
+      14197000, 14198224, 14200614, 14201983, 14200697, 14199252, 14201214,
+      14198923, 14200224, 14197509, 14200859, 14200064, 14200114, 14197256,
+      14197220, 14200653, 14197186, 14199258, 14197155, 14197344, 14198361,
+      14197969, 14199813, 14197259, 14197503,
+    ],
+    score: 562,
+    time: 1493145853,
+    title: "Evidence-based advice we've found on how to be successful in a job",
+    type: 'story',
+    url: 'https://80000hours.org/career-guide/how-to-be-successful/',
+  },
+  {
+    by: 'ryan_j_naughton',
+    descendants: 565,
+    id: 14196812,
+    kids: [
+      14198306, 14197339, 14200899, 14198165, 14198750, 14202199, 14201432,
+      14197619, 14197471, 14201113, 14202214, 14202043, 14197313, 14197751,
+      14197332, 14198050, 14201616, 14197404, 14199730, 14198007, 14197358,
+      14197283, 14200959, 14197891, 14198203, 14197312, 14200796, 14201528,
+      14197249, 14198271, 14197989, 14198842, 14197205, 14199148, 14197458,
+      14200457, 14197330, 14199993, 14197855, 14200102, 14197378, 14199315,
+      14198240, 14198397, 14199326, 14200159, 14198798, 14201296, 14198173,
+      14197323, 14197383, 14197459, 14197275, 14198305, 14198005, 14198015,
+      14199380, 14199079, 14198413, 14197334, 14197327, 14197234,
+    ],
+    score: 385,
+    time: 1493146342,
+    title: 'Is Every Speed Limit Too Low?',
+    type: 'story',
+    url: 'https://priceonomics.com/is-every-speed-limit-too-low/',
+  },
+  {
+    by: 'monort',
+    descendants: 63,
+    id: 14196322,
+    kids: [
+      14197628, 14200026, 14197457, 14197486, 14202126, 14201266, 14197227,
+      14199404, 14199338, 14196382, 14200598, 14197377, 14199689, 14198538,
+      14196905, 14200404, 14198781, 14197278, 14197888, 14197742, 14197764,
+    ],
+    score: 316,
+    time: 1493143464,
+    title: 'Experimental Nighttime Photography with Nexus and Pixel',
+    type: 'story',
+    url: 'https://research.googleblog.com/2017/04/experimental-nighttime-photography-with.html',
+  },
+  {
+    by: 'networked',
+    descendants: 9,
+    id: 14199028,
+    kids: [14201588, 14200361, 14200314, 14200338],
+    score: 121,
+    time: 1493161601,
+    title: 'JPEG Huffman Coding Tutorial',
+    type: 'story',
+    url: 'https://www.impulseadventure.com/photo/jpeg-huffman-coding.html',
+  },
+  {
+    by: 'jasontan',
+    id: 14202227,
+    score: 1,
+    time: 1493207865,
+    title:
+      'Are you adept at understanding concurrency problems? Sift Science is hiring',
+    type: 'job',
+    url: 'https://boards.greenhouse.io/siftscience/jobs/550699#.WPUZhlMrLfY',
+  },
+  {
+    by: 'pouwerkerk',
+    descendants: 80,
+    id: 14196077,
+    kids: [
+      14199434, 14196279, 14196604, 14197440, 14201734, 14200922, 14200452,
+      14197115, 14199837, 14199894, 14196596, 14198243, 14196565, 14197400,
+      14197049, 14197686, 14198545, 14198475,
+    ],
+    score: 717,
+    time: 1493142008,
+    title:
+      'Painting with Code: Introducing our new open source library React Sketch.app',
+    type: 'story',
+    url: 'https://airbnb.design/painting-with-code/',
+  },
+  {
+    by: 'mromnia',
+    descendants: 16,
+    id: 14201670,
+    kids: [
+      14201835, 14202115, 14202176, 14201890, 14202325, 14201859, 14202158,
+      14201763, 14201902,
+    ],
+    score: 62,
+    time: 1493198949,
+    title: 'How to mod a Porsche 911 to run Doom [video]',
+    type: 'story',
+    url: 'https://www.youtube.com/watch?v=NRMpNA86e8Q',
+  },
+  {
+    by: 'rbanffy',
+    descendants: 16,
+    id: 14192383,
+    kids: [14197494, 14201805, 14197484],
+    score: 194,
+    time: 1493118160,
+    title: 'Go programming language secure coding practices guide',
+    type: 'story',
+    url: 'https://github.com/Checkmarx/Go-SCP',
+  },
+  {
+    by: 'intous',
+    descendants: 0,
+    id: 14200446,
+    score: 39,
+    time: 1493181245,
+    title: 'Building Functional Chatbot for Messenger with Ruby on Rails',
+    type: 'story',
+    url: 'https://tutorials.botsfloor.com/chatbot-development-tutorial-how-to-build-a-fully-functional-weather-bot-on-facebook-messenger-c94ac7c59185',
+  },
+  {
+    by: 'nanospeck',
+    descendants: 23,
+    id: 14201207,
+    kids: [
+      14202252, 14201646, 14201620, 14202076, 14201511, 14201324, 14201940,
+      14201425, 14201505, 14201304, 14201435, 14201287, 14201739, 14202031,
+      14202018,
+    ],
+    score: 57,
+    text: 'This question was asked on both 2015 &amp; 2016 in HN. I would like to ask it again today to know what are the newest options for this.<p>Q: What would you recommend as a reasonably priced (sub 150$) quad-copter&#x2F;drone, that has a camera, the ability to be programmed (so that I can process video&#x2F;write my own stability algorithms for it), good range, and reasonable flying time?\nIn the event nothing fits that price point, any pointers on what the state of the art is?<p>Thanks!',
+    time: 1493192641,
+    title: 'Ask HN (again): What is the best affordable programmable drone?',
+    type: 'story',
+  },
+  {
+    by: 'geuis',
+    descendants: 57,
+    id: 14196708,
+    kids: [
+      14197480, 14198523, 14198705, 14200969, 14200079, 14197605, 14198979,
+      14202203, 14197679, 14198461, 14200389, 14198065, 14197883, 14197908,
+    ],
+    score: 123,
+    time: 1493145655,
+    title: 'Hackpad shutting down',
+    type: 'story',
+    url: 'https://hackpad.com/',
+  },
+  {
+    by: 'jfoutz',
+    descendants: 55,
+    id: 14195956,
+    kids: [
+      14199594, 14196972, 14202101, 14198197, 14196771, 14197326, 14196956,
+      14200842, 14201529, 14198581, 14196777, 14200177, 14200422, 14198571,
+    ],
+    score: 167,
+    time: 1493141367,
+    title: 'Linkerd 1.0',
+    type: 'story',
+    url: 'https://blog.buoyant.io/2017/04/25/announcing-linkerd-1.0/index.html',
+  },
+  {
+    by: 'DavidBuchanan',
+    descendants: 19,
+    id: 14199364,
+    kids: [
+      14199735, 14200889, 14202245, 14200205, 14200104, 14201697, 14200061,
+      14199996, 14199867,
+    ],
+    score: 66,
+    time: 1493164755,
+    title:
+      "Show HN: TARDIS – Warp a process's perspective of time by hooking syscalls",
+    type: 'story',
+    url: 'https://github.com/DavidBuchanan314/TARDIS',
+  },
+  {
+    by: 'rchen8',
+    descendants: 121,
+    id: 14195664,
+    kids: [
+      14196654, 14196206, 14196677, 14197035, 14196041, 14196399, 14196200,
+      14196140, 14196216, 14196421, 14196370, 14196146, 14197601, 14197107,
+      14196866, 14196691, 14197704, 14196772, 14200089, 14198588, 14196937,
+      14198530, 14197119, 14197247, 14198632, 14196137, 14200323, 14196346,
+    ],
+    score: 486,
+    time: 1493139957,
+    title: 'How to Become Well-Connected',
+    type: 'story',
+    url: 'https://firstround.com/review/how-to-become-insanely-well-connected/',
+  },
+  {
+    by: 'dbrgn',
+    descendants: 89,
+    id: 14191186,
+    kids: [
+      14200855, 14200035, 14200110, 14201408, 14202159, 14197876, 14200348,
+      14198720, 14198183, 14199824, 14198281, 14201643, 14201591, 14199541,
+      14198423, 14201738, 14200037, 14201349, 14200028, 14201206, 14197995,
+      14197830, 14199603,
+    ],
+    score: 135,
+    time: 1493100791,
+    title: 'How to Say (Almost) Everything in a Hundred-Word Language (2015)',
+    type: 'story',
+    url: 'https://www.theatlantic.com/technology/archive/2015/07/toki-pona-smallest-language/398363/?single_page=true',
+  },
+  {
+    by: 'runesoerensen',
+    descendants: 62,
+    id: 14198866,
+    kids: [14199494, 14199495, 14200288, 14201118, 14199599],
+    score: 155,
+    time: 1493160263,
+    title: 'Nginx 1.13 released with TLS 1.3 support',
+    type: 'story',
+    url: 'https://mailman.nginx.org/pipermail/nginx-announce/2017/000195.html',
+  },
+  {
+    by: 'bcherny',
+    descendants: 20,
+    id: 14199299,
+    kids: [
+      14200694, 14201832, 14200517, 14201760, 14200966, 14200558, 14201815,
+      14201231, 14201073, 14201124,
+    ],
+    score: 54,
+    time: 1493163960,
+    title: 'Show HN: JSONSchema to TypeScript compiler',
+    type: 'story',
+    url: 'https://github.com/bcherny/json-schema-to-typescript',
+  },
+  {
+    by: 'tormeh',
+    descendants: 37,
+    id: 14198557,
+    kids: [14201027, 14199082, 14201023, 14201160, 14200367, 14200647],
+    score: 70,
+    time: 1493158034,
+    title: 'A practitioner’s guide to hedonism (2007)',
+    type: 'story',
+    url: 'https://www.1843magazine.com/story/a-practitioners-guide-to-hedonism',
+  },
+  {
+    by: 'nickreiner',
+    descendants: 33,
+    id: 14199125,
+    kids: [
+      14202332, 14201634, 14201200, 14201215, 14201157, 14201898, 14201969,
+      14201125,
+    ],
+    score: 52,
+    time: 1493162517,
+    title: 'Best Linux Distros for Gaming in 2017',
+    type: 'story',
+    url: 'https://thishosting.rocks/best-linux-distros-for-gaming/',
+  },
+  {
+    by: 'BinaryIdiot',
+    descendants: 170,
+    id: 14200486,
+    kids: [
+      14200680, 14200677, 14201515, 14200793, 14200534, 14200908, 14200649,
+      14200633, 14200701, 14202295, 14200578, 14200709, 14200580, 14201107,
+      14201779, 14200773, 14200804, 14200720, 14202060, 14200948, 14200903,
+      14200748, 14200875, 14200750, 14200821, 14200756, 14201707, 14201689,
+      14200669, 14200997, 14200818, 14201586, 14200603, 14201054, 14201457,
+      14200616, 14201095, 14200915, 14200878, 14200629, 14201523, 14200620,
+      14202099,
+    ],
+    score: 316,
+    time: 1493181945,
+    title: 'Suicide of an Uber engineer: Widow blames job stress',
+    type: 'story',
+    url: 'https://www.sfchronicle.com/business/article/Suicide-of-an-Uber-engineer-widow-blames-job-11095807.php?t=7e40d1f554&cmpid=fb-premium&cmpid=twitter-premium',
+  },
+  {
+    by: 'catc',
+    descendants: 34,
+    id: 14195522,
+    kids: [
+      14202316, 14202278, 14197167, 14199152, 14202077, 14197239, 14197721,
+      14197632, 14197219, 14198296, 14197245, 14197201, 14197403, 14198051,
+      14196747,
+    ],
+    score: 87,
+    time: 1493139414,
+    title:
+      'Show HN: React Timekeeper – Time picker based on the style of Google Keep',
+    type: 'story',
+    url: 'https://catc.github.io/react-timekeeper/',
+  },
+  {
+    by: 'Integer',
+    descendants: 152,
+    id: 14192353,
+    kids: [
+      14197671, 14197754, 14199091, 14198533, 14201249, 14198626, 14198263,
+      14198009, 14195130, 14199551, 14197663, 14198285, 14199611, 14199835,
+      14197482, 14198924, 14198943,
+    ],
+    score: 273,
+    time: 1493117771,
+    title: 'Windows Is Bloated, Thanks to Adobe’s Extensible Metadata Platform',
+    type: 'story',
+    url: 'https://www.thurrott.com/windows/109962/windows-bloated-thanks-adobes-extensible-metadata-platform',
+  },
+  {
+    by: 'craigcannon',
+    descendants: 23,
+    id: 14197852,
+    kids: [
+      14200024, 14199986, 14202106, 14198011, 14199228, 14202138, 14198917,
+      14198607,
+    ],
+    score: 58,
+    time: 1493153342,
+    title: 'New England Lost Ski Areas Project',
+    type: 'story',
+    url: 'http://www.nelsap.org/',
+  },
+  {
+    by: 'golfer',
+    descendants: 105,
+    id: 14198229,
+    kids: [
+      14200202, 14198948, 14199770, 14198634, 14200263, 14198797, 14198919,
+      14200447, 14198645, 14199267, 14199124, 14198833, 14199059,
+    ],
+    score: 282,
+    time: 1493155745,
+    title:
+      'Uber must turn over information about its acquisition of Otto to Waymo',
+    type: 'story',
+    url: 'https://techcrunch.com/2017/04/25/uber-must-turn-over-information-about-its-acquisition-of-otto-to-waymo-court-rules/',
+  },
+  {
+    by: 'JoshTriplett',
+    descendants: 116,
+    id: 14198403,
+    kids: [
+      14199771, 14199980, 14198664, 14198764, 14201086, 14200307, 14199294,
+      14198860, 14198817,
+    ],
+    score: 139,
+    time: 1493156882,
+    title: 'Shutting down public FTP services',
+    type: 'story',
+    url: 'https://lists.debian.org/debian-announce/2017/msg00001.html',
+  },
+  {
+    by: 'mabynogy',
+    descendants: 50,
+    id: 14191577,
+    kids: [
+      14194021, 14195402, 14193886, 14193792, 14194355, 14197136, 14200386,
+      14194151, 14193989, 14193798, 14194042, 14197100, 14198984, 14193925,
+      14194170,
+    ],
+    score: 365,
+    time: 1493107104,
+    title: 'A Primer on Bézier Curves',
+    type: 'story',
+    url: 'https://pomax.github.io/bezierinfo#preface',
+  },
+  {
+    by: 'robertothais',
+    descendants: 29,
+    id: 14192946,
+    kids: [
+      14202311, 14202299, 14201900, 14200029, 14198260, 14198605, 14201850,
+      14199858, 14198223, 14198610,
+    ],
+    score: 61,
+    time: 1493124627,
+    title: 'Consciousness as a State of Matter (2014)',
+    type: 'story',
+    url: 'https://arxiv.org/abs/1401.1219',
+  },
+  {
+    by: 'leephillips',
+    descendants: 2,
+    id: 14202078,
+    kids: [14202122],
+    score: 5,
+    time: 1493205152,
+    title:
+      'The Republican Lawmaker Who Secretly Created Reddit’s Women-Hating ‘Red Pill’',
+    type: 'story',
+    url: 'http://www.thedailybeast.com/articles/2017/04/25/the-republican-lawmaker-who-secretly-created-reddit-s-women-hating-red-pill.html',
+  },
+  {
+    by: 'anguswithgusto',
+    descendants: 55,
+    id: 14196325,
+    kids: [
+      14197131, 14196789, 14197299, 14197466, 14196737, 14199929, 14197550,
+      14197511, 14196888, 14200109, 14197101,
+    ],
+    score: 80,
+    time: 1493143475,
+    title:
+      'Gett in advanced talks to buy Juno for $250M as Uber rivals consolidate',
+    type: 'story',
+    url: 'https://techcrunch.com/2017/04/25/gett-in-advanced-talks-to-buy-juno-for-250m-as-uber-rivals-consolidate/',
+  },
+  {
+    by: 'fabuzaid',
+    descendants: 2,
+    id: 14196339,
+    kids: [14201557, 14201170],
+    score: 46,
+    time: 1493143560,
+    title: 'Implementing a Fast Research Compiler in Rust',
+    type: 'story',
+    url: 'https://dawn.cs.stanford.edu/blog/weld.html',
+  },
+  {
+    by: 'bluesilver07',
+    descendants: 61,
+    id: 14196154,
+    kids: [
+      14197614, 14196853, 14197074, 14197050, 14200090, 14197731, 14196352,
+      14197442,
+    ],
+    score: 72,
+    time: 1493142448,
+    title: 'Xenko Game Engine 2.0 released',
+    type: 'story',
+    url: 'https://xenko.com/blog/release-xenko-2-0-0/',
+  },
+  {
+    by: 'molecule',
+    descendants: 254,
+    id: 14189392,
+    kids: [
+      14190198, 14190800, 14193591, 14190274, 14189796, 14190118, 14190405,
+      14190006, 14189430, 14190244, 14189877, 14190064, 14190211, 14189918,
+      14190071, 14191312, 14195969, 14190542, 14194775, 14189900, 14190032,
+      14189847, 14192128, 14191737, 14191047, 14190992, 14192759, 14191405,
+      14190815, 14194136, 14190737, 14190552, 14191385, 14189816, 14191316,
+      14193780, 14193979, 14190768, 14192973, 14191217, 14190879, 14190780,
+      14189914, 14190925, 14192906, 14190528, 14189893, 14190007, 14189929,
+      14190049, 14191859, 14191304, 14190177, 14193355, 14193352, 14190324,
+      14190846, 14189803,
+    ],
+    score: 630,
+    time: 1493076480,
+    title: 'Robert M. Pirsig has died',
+    type: 'story',
+    url: 'https://www.npr.org/sections/thetwo-way/2017/04/24/525443040/-zen-and-the-art-of-motorcycle-maintenance-author-robert-m-pirsig-dies-at-88',
+  },
+  {
+    by: 'artsandsci',
+    descendants: 67,
+    id: 14194422,
+    kids: [
+      14199418, 14196266, 14197226, 14196647, 14196324, 14201761, 14196265,
+      14195599, 14199054, 14196057,
+    ],
+    score: 127,
+    time: 1493134376,
+    title:
+      'An extra-uterine system to physiologically support the extreme premature lamb',
+    type: 'story',
+    url: 'https://www.nature.com/articles/ncomms15112',
+  },
+  {
+    by: 'miobrien',
+    descendants: 9,
+    id: 14198261,
+    kids: [14199610, 14199447, 14199862, 14201753, 14199068],
+    score: 30,
+    time: 1493155969,
+    title: 'Prior Indigenous Technological Species',
+    type: 'story',
+    url: 'https://arxiv.org/abs/1704.07263',
+  },
+  {
+    by: 'zdw',
+    descendants: 2,
+    id: 14199197,
+    kids: [14200610],
+    score: 12,
+    time: 1493163087,
+    title: 'Should Curve25519 keys be validated?',
+    type: 'story',
+    url: 'https://research.kudelskisecurity.com/2017/04/25/should-ecdh-keys-be-validated/',
+  },
+  {
+    by: 'spearo77',
+    descendants: 213,
+    id: 14189688,
+    kids: [
+      14191654, 14192373, 14190683, 14192095, 14191856, 14190771, 14190570,
+      14190599, 14190721, 14192049, 14189694, 14191430, 14193610, 14190543,
+      14190372, 14191818, 14192171, 14192177, 14192135, 14191483, 14190560,
+      14190341, 14190362, 14190452, 14192563, 14190458, 14195245, 14190809,
+      14192706, 14192959, 14190636, 14190634, 14190368, 14191163, 14191379,
+      14190668, 14191673, 14190884, 14192565, 14190480, 14190442,
+    ],
+    score: 447,
+    time: 1493079289,
+    title: 'WikiTribune – Evidence-based journalism',
+    type: 'story',
+    url: 'https://www.wikitribune.com',
+  },
+  {
+    by: 'adbrebs',
+    descendants: 294,
+    id: 14182262,
+    kids: [
+      14183335, 14183715, 14182725, 14183897, 14185812, 14184510, 14182468,
+      14183231, 14182580, 14183996, 14182449, 14185671, 14182428, 14182666,
+      14186599, 14182519, 14185571, 14185159, 14182636, 14185864, 14188340,
+      14183433, 14183146, 14184034, 14184363, 14183368, 14183098, 14182495,
+      14182753, 14184720, 14188085, 14187692, 14183633, 14188137, 14182606,
+      14186796, 14196166, 14185084, 14185899, 14188219, 14186885, 14183406,
+      14185561, 14183388, 14191457, 14183281, 14183399, 14183674, 14183236,
+      14183990, 14183760, 14183248, 14184114, 14183318, 14183457, 14186509,
+      14186900, 14186695, 14188405, 14184636, 14184630, 14188301, 14184144,
+      14183023, 14184555, 14185946, 14184611, 14184490, 14183653, 14183881,
+      14182715, 14184440, 14182573, 14183251, 14184962, 14187249, 14182545,
+      14192314,
+    ],
+    score: 1356,
+    time: 1493014335,
+    title: 'Lyrebird – An API to copy the voice of anyone',
+    type: 'story',
+    url: 'https://lyrebird.ai/demo',
+  },
+  {
+    by: 'mathgenius',
+    descendants: 6,
+    id: 14192442,
+    kids: [14197265, 14195645],
+    score: 43,
+    time: 1493118936,
+    title: 'Quantum – Open journal for quantum science',
+    type: 'story',
+    url: 'https://quantum-journal.org/papers/',
+  },
+  {
+    by: 'tjalfi',
+    descendants: 5,
+    id: 14190937,
+    kids: [14199744, 14197114, 14190946],
+    score: 107,
+    time: 1493097061,
+    title: 'A Seven Dimensional Analysis of Hashing Methods [pdf]',
+    type: 'story',
+    url: 'https://www.vldb.org/pvldb/vol9/p96-richter.pdf',
+  },
+  {
+    by: 'mxstbr',
+    descendants: 0,
+    id: 14196935,
+    score: 24,
+    time: 1493147015,
+    title: 'One GraphQL Client for JavaScript, iOS, and Android',
+    type: 'story',
+    url: 'https://dev-blog.apollodata.com/one-graphql-client-for-javascript-ios-and-android-64993c1b7991',
+  },
+  {
+    by: 'uptown',
+    descendants: 166,
+    id: 14192817,
+    kids: [
+      14197690, 14195597, 14196750, 14195237, 14196320, 14195150, 14198816,
+      14194916, 14197746, 14196332, 14194695, 14196726, 14194947, 14199715,
+      14195059, 14195778, 14196204, 14200435, 14194780, 14195030, 14198452,
+      14199023, 14194852, 14197577, 14197778, 14195361, 14196368, 14194948,
+      14199024, 14195060, 14199498,
+    ],
+    score: 226,
+    time: 1493123621,
+    title: 'How Yahoo Killed Flickr (2012)',
+    type: 'story',
+    url: 'https://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet',
+  },
+  {
+    by: 'mattklein123',
+    descendants: 42,
+    id: 14194026,
+    kids: [
+      14194573, 14195577, 14194430, 14195407, 14194569, 14195298, 14200054,
+      14194456, 14198329, 14199198,
+    ],
+    score: 167,
+    time: 1493131921,
+    title: 'Envoy: 7 months later',
+    type: 'story',
+    url: 'https://eng.lyft.com/envoy-7-months-later-41986c2fd443',
+  },
+  {
+    by: 'misnamed',
+    descendants: 2,
+    id: 14191333,
+    kids: [14197296],
+    score: 29,
+    time: 1493103250,
+    title:
+      'Modern Hieroglyphs: Binary Logic Behind the Universal “Power Symbol”',
+    type: 'story',
+    url: 'https://99percentinvisible.org/article/modern-hieroglyphics-binary-logic-behind-universal-power-symbol/',
+  },
+  {
+    by: 'LaFolle',
+    descendants: 92,
+    id: 14191681,
+    kids: [
+      14192477, 14194490, 14192316, 14193364, 14192065, 14193499, 14194324,
+      14192622, 14192020, 14195866, 14192496, 14196391, 14192138, 14192714,
+      14195151, 14195094, 14192110, 14192155,
+    ],
+    score: 138,
+    time: 1493108371,
+    title: 'Feynman Algorithm (2014)',
+    type: 'story',
+    url: 'https://wiki.c2.com/?FeynmanAlgorithm',
+  },
+  {
+    by: 'Thevet',
+    descendants: 18,
+    id: 14190736,
+    kids: [
+      14197744, 14195753, 14197880, 14197735, 14195874, 14197023, 14196660,
+    ],
+    score: 81,
+    time: 1493093860,
+    title: 'The legend of the Legion',
+    type: 'story',
+    url: 'https://aeon.co/essays/why-young-men-queue-up-to-die-in-the-french-foreign-legion',
+  },
+  {
+    by: 'bufordsharkley',
+    descendants: 92,
+    id: 14197013,
+    kids: [
+      14197983, 14197168, 14197701, 14198239, 14197514, 14198064, 14197476,
+      14198489, 14197761, 14197080, 14198905, 14198068, 14198579,
+    ],
+    score: 69,
+    time: 1493147532,
+    title: "Cracking the Mystery of Labor's Falling Share of GDP",
+    type: 'story',
+    url: 'https://www.bloomberg.com/view/articles/2017-04-24/cracking-the-mystery-of-labor-s-falling-share-of-gdp',
+  },
+  {
+    by: 'rbanffy',
+    descendants: 27,
+    id: 14198470,
+    kids: [
+      14199443, 14201987, 14199461, 14199729, 14201519, 14198762, 14199524,
+    ],
+    score: 52,
+    time: 1493157378,
+    title: 'How the Internet Gave Mail-Order Brides the Power',
+    type: 'story',
+    url: 'https://backchannel.com/how-the-internet-gave-mail-order-brides-the-power-1af8c8a40562',
+  },
+];
diff --git a/scripts/bench/benchmarks/pe-class-components/benchmark.js b/scripts/bench/benchmarks/pe-class-components/benchmark.js
new file mode 100644
index 00000000000..2276e28e2d8
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-class-components/benchmark.js
@@ -0,0 +1,5585 @@
+(function () {
+  'use strict';
+
+  class ReactImage0 extends React.Component {
+    render() {
+      if (this.props.x === 0) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-99 img sp_i534r85sjIn sx_538591',
+          src: null,
+        });
+      }
+      if (this.props.x === 15) {
+        return React.createElement('i', {
+          className: '_3ut_ img sp_i534r85sjIn sx_e8ac93',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 22) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-8_ img sp_i534r85sjIn sx_7b15bc',
+          src: null,
+        });
+      }
+      if (this.props.x === 29) {
+        return React.createElement('i', {
+          className: '_1m1s _4540 _p img sp_i534r85sjIn sx_f40b1c',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 42) {
+        return React.createElement(
+          'i',
+          {
+            alt: 'Warning',
+            className: '_585p img sp_i534r85sjIn sx_20273d',
+            src: null,
+          },
+          React.createElement('u', null, 'Warning')
+        );
+      }
+      if (this.props.x === 67) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-8_ img sp_i534r85sjIn sx_b5d079',
+          src: null,
+        });
+      }
+      if (this.props.x === 70) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_29f8c9',
+        });
+      }
+      if (this.props.x === 76) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-8_ img sp_i534r85sjIn sx_ef6a9c',
+          src: null,
+        });
+      }
+      if (this.props.x === 79) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_6f8c43',
+        });
+      }
+      if (this.props.x === 88) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_e94a2d',
+        });
+      }
+      if (this.props.x === 91) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_7ed7d4',
+        });
+      }
+      if (this.props.x === 94) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_930440',
+        });
+      }
+      if (this.props.x === 98) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_750c83',
+        });
+      }
+      if (this.props.x === 108) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_73c1bb',
+        });
+      }
+      if (this.props.x === 111) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_29f28d',
+        });
+      }
+      if (this.props.x === 126) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: '_3-8_ img sp_i534r85sjIn sx_91c59e',
+        });
+      }
+      if (this.props.x === 127) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-99 img sp_i534r85sjIn sx_538591',
+          src: null,
+        });
+      }
+      if (this.props.x === 134) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: '_3-8_ img sp_i534r85sjIn sx_c8eb75',
+        });
+      }
+      if (this.props.x === 135) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-99 img sp_i534r85sjIn sx_538591',
+          src: null,
+        });
+      }
+      if (this.props.x === 148) {
+        return React.createElement('i', {
+          className: '_3yz6 _5whs img sp_i534r85sjIn sx_896996',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 152) {
+        return React.createElement('i', {
+          className: '_5b5p _4gem img sp_i534r85sjIn sx_896996',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 153) {
+        return React.createElement('i', {
+          className: '_541d img sp_i534r85sjIn sx_2f396a',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 160) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_31d9b0',
+        });
+      }
+      if (this.props.x === 177) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-99 img sp_i534r85sjIn sx_2c18b7',
+          src: null,
+        });
+      }
+      if (this.props.x === 186) {
+        return React.createElement('i', {
+          src: null,
+          alt: '',
+          className: 'img sp_i534r85sjIn sx_0a681f',
+        });
+      }
+      if (this.props.x === 195) {
+        return React.createElement('i', {
+          className: '_1-lx img sp_OkER5ktbEyg sx_b369b4',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 198) {
+        return React.createElement('i', {
+          className: '_1-lx img sp_i534r85sjIn sx_96948e',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 237) {
+        return React.createElement('i', {
+          className: '_541d img sp_i534r85sjIn sx_2f396a',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 266) {
+        return React.createElement('i', {
+          alt: '',
+          className: '_3-99 img sp_i534r85sjIn sx_538591',
+          src: null,
+        });
+      }
+      if (this.props.x === 314) {
+        return React.createElement('i', {
+          className: '_1cie _1cif img sp_i534r85sjIn sx_6e6820',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 345) {
+        return React.createElement('i', {
+          className: '_1cie img sp_i534r85sjIn sx_e896cf',
+          src: null,
+          alt: '',
+        });
+      }
+      if (this.props.x === 351) {
+        return React.createElement('i', {
+          className: '_1cie img sp_i534r85sjIn sx_38fed8',
+          src: null,
+          alt: '',
+        });
+      }
+    }
+  }
+
+  class AbstractLink1 extends React.Component {
+    render() {
+      if (this.props.x === 1) {
+        return React.createElement(
+          'a',
+          {
+            className: '_387r _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+            style: {width: 250, maxWidth: '250px'},
+            disabled: null,
+            label: null,
+            href: '#',
+            rel: undefined,
+            onClick: function () {},
+          },
+          null,
+          React.createElement(
+            'span',
+            {className: '_55pe', style: {maxWidth: '236px'}},
+            null,
+            React.createElement(
+              'span',
+              null,
+              React.createElement('span', {className: '_48u-'}, 'Account:'),
+              ' ',
+              'Dick Madanson (10149999073643408)'
+            )
+          ),
+          React.createElement(ReactImage0, {x: 0})
+        );
+      }
+      if (this.props.x === 43) {
+        return React.createElement(
+          'a',
+          {
+            className: '_585q _50zy _50-0 _50z- _5upp _42ft',
+            size: 'medium',
+            type: null,
+            title: 'Remove',
+            'data-hover': undefined,
+            'data-tooltip-alignh': undefined,
+            'data-tooltip-content': undefined,
+            disabled: null,
+            label: null,
+            href: '#',
+            rel: undefined,
+            onClick: function () {},
+          },
+          undefined,
+          'Remove',
+          undefined
+        );
+      }
+      if (this.props.x === 49) {
+        return React.createElement(
+          'a',
+          {
+            target: '_blank',
+            href: '/ads/manage/billing.php?act=10149999073643408',
+            rel: undefined,
+            onClick: function () {},
+          },
+          React.createElement(XUIText29, {x: 48})
+        );
+      }
+      if (this.props.x === 128) {
+        return React.createElement(
+          'a',
+          {
+            className: ' _5bbf _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+            style: {maxWidth: '200px'},
+            disabled: null,
+            label: null,
+            href: '#',
+            rel: undefined,
+            onClick: function () {},
+          },
+          null,
+          React.createElement(
+            'span',
+            {className: '_55pe', style: {maxWidth: '186px'}},
+            React.createElement(ReactImage0, {x: 126}),
+            'Search'
+          ),
+          React.createElement(ReactImage0, {x: 127})
+        );
+      }
+      if (this.props.x === 136) {
+        return React.createElement(
+          'a',
+          {
+            className: ' _5bbf _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+            style: {maxWidth: '200px'},
+            disabled: null,
+            label: null,
+            href: '#',
+            rel: undefined,
+            onClick: function () {},
+          },
+          null,
+          React.createElement(
+            'span',
+            {className: '_55pe', style: {maxWidth: '186px'}},
+            React.createElement(ReactImage0, {x: 134}),
+            'Filters'
+          ),
+          React.createElement(ReactImage0, {x: 135})
+        );
+      }
+      if (this.props.x === 178) {
+        return React.createElement(
+          'a',
+          {
+            className: '_1_-t _1_-v _42ft',
+            disabled: null,
+            height: 'medium',
+            role: 'button',
+            label: null,
+            href: '#',
+            rel: undefined,
+            onClick: function () {},
+          },
+          undefined,
+          'Lifetime',
+          React.createElement(ReactImage0, {x: 177})
+        );
+      }
+      if (this.props.x === 207) {
+        return React.createElement(
+          'a',
+          {href: '#', rel: undefined, onClick: function () {}},
+          'Create Ad Set'
+        );
+      }
+      if (this.props.x === 209) {
+        return React.createElement(
+          'a',
+          {href: '#', rel: undefined, onClick: function () {}},
+          'View Ad Set'
+        );
+      }
+      if (this.props.x === 241) {
+        return React.createElement(
+          'a',
+          {href: '#', rel: undefined, onClick: function () {}},
+          'Set a Limit'
+        );
+      }
+      if (this.props.x === 267) {
+        return React.createElement(
+          'a',
+          {
+            className: '_p _55pi _2agf _4jy0 _4jy3 _517h _51sy _42ft',
+            style: {maxWidth: '200px'},
+            disabled: null,
+            label: null,
+            href: '#',
+            rel: undefined,
+            onClick: function () {},
+          },
+          null,
+          React.createElement(
+            'span',
+            {className: '_55pe', style: {maxWidth: '186px'}},
+            null,
+            'Links'
+          ),
+          React.createElement(ReactImage0, {x: 266})
+        );
+      }
+    }
+  }
+
+  class Link2 extends React.Component {
+    render() {
+      if (this.props.x === 2) {
+        return React.createElement(AbstractLink1, {x: 1});
+      }
+      if (this.props.x === 44) {
+        return React.createElement(AbstractLink1, {x: 43});
+      }
+      if (this.props.x === 50) {
+        return React.createElement(AbstractLink1, {x: 49});
+      }
+      if (this.props.x === 129) {
+        return React.createElement(AbstractLink1, {x: 128});
+      }
+      if (this.props.x === 137) {
+        return React.createElement(AbstractLink1, {x: 136});
+      }
+      if (this.props.x === 179) {
+        return React.createElement(AbstractLink1, {x: 178});
+      }
+      if (this.props.x === 208) {
+        return React.createElement(AbstractLink1, {x: 207});
+      }
+      if (this.props.x === 210) {
+        return React.createElement(AbstractLink1, {x: 209});
+      }
+      if (this.props.x === 242) {
+        return React.createElement(AbstractLink1, {x: 241});
+      }
+      if (this.props.x === 268) {
+        return React.createElement(AbstractLink1, {x: 267});
+      }
+    }
+  }
+
+  class AbstractButton3 extends React.Component {
+    render() {
+      if (this.props.x === 3) {
+        return React.createElement(Link2, {x: 2});
+      }
+      if (this.props.x === 20) {
+        return React.createElement(
+          'button',
+          {
+            className: '_5n7z _4jy0 _4jy4 _517h _51sy _42ft',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          undefined,
+          'Discard Changes',
+          undefined
+        );
+      }
+      if (this.props.x === 23) {
+        return React.createElement(
+          'button',
+          {
+            className: '_5n7z _2yak _4lj- _4jy0 _4jy4 _517h _51sy _42ft _42fr',
+            disabled: true,
+            onClick: function () {},
+            'data-tooltip-content': 'You have no changes to publish',
+            'data-hover': 'tooltip',
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 22}),
+          'Review Changes',
+          undefined
+        );
+      }
+      if (this.props.x === 45) {
+        return React.createElement(Link2, {x: 44});
+      }
+      if (this.props.x === 68) {
+        return React.createElement(
+          'button',
+          {
+            className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 67}),
+          'Create Campaign',
+          undefined
+        );
+      }
+      if (this.props.x === 71) {
+        return React.createElement(
+          'button',
+          {
+            className: '_u_k _3qx6 _p _4jy0 _4jy4 _517h _51sy _42ft',
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 70}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 77) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Edit',
+            'data-tooltip-content': 'Edit Campaigns (Ctrl+U)',
+            'data-hover': 'tooltip',
+            className: '_d2_ _u_k noMargin _4jy0 _4jy4 _517h _51sy _42ft',
+            disabled: false,
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 76}),
+          'Edit',
+          undefined
+        );
+      }
+      if (this.props.x === 80) {
+        return React.createElement(
+          'button',
+          {
+            className: '_u_k _3qx6 _p _4jy0 _4jy4 _517h _51sy _42ft',
+            disabled: false,
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 79}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 89) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Revert',
+            className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft _42fr',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'Revert',
+            disabled: true,
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 88}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 92) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Delete',
+            className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'Delete',
+            disabled: false,
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 91}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 95) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Duplicate',
+            className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'Duplicate',
+            disabled: false,
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 94}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 99) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Export & Import',
+            className: '_u_k noMargin _p _4jy0 _4jy4 _517h _51sy _42ft',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'Export & Import',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 98}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 109) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Create Report',
+            className: '_u_k _5n7z _4jy0 _4jy4 _517h _51sy _42ft',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'Create Report',
+            disabled: false,
+            style: {boxSizing: 'border-box', height: '28px', width: '48px'},
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 108}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 112) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'Campaign Tags',
+            className: ' _5uy7 _4jy0 _4jy4 _517h _51sy _42ft',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'Campaign Tags',
+            disabled: false,
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 111}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 130) {
+        return React.createElement(Link2, {x: 129});
+      }
+      if (this.props.x === 138) {
+        return React.createElement(Link2, {x: 137});
+      }
+      if (this.props.x === 149) {
+        return React.createElement(
+          'button',
+          {
+            className: '_3yz9 _1t-2 _50z- _50zy _50zz _50z- _5upp _42ft',
+            size: 'small',
+            onClick: function () {},
+            type: 'button',
+            title: 'Remove',
+            'data-hover': undefined,
+            'data-tooltip-alignh': undefined,
+            'data-tooltip-content': undefined,
+            label: null,
+          },
+          undefined,
+          'Remove',
+          undefined
+        );
+      }
+      if (this.props.x === 156) {
+        return React.createElement(
+          'button',
+          {
+            className: '_5b5u _5b5v _4jy0 _4jy3 _517h _51sy _42ft',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          undefined,
+          'Apply',
+          undefined
+        );
+      }
+      if (this.props.x === 161) {
+        return React.createElement(
+          'button',
+          {
+            className: '_1wdf _4jy0 _517i _517h _51sy _42ft',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 160}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 180) {
+        return React.createElement(Link2, {x: 179});
+      }
+      if (this.props.x === 187) {
+        return React.createElement(
+          'button',
+          {
+            'aria-label': 'List Settings',
+            className: '_u_k _3c5o _1-r0 _4jy0 _4jy4 _517h _51sy _42ft',
+            'data-hover': 'tooltip',
+            'data-tooltip-content': 'List Settings',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          React.createElement(ReactImage0, {x: 186}),
+          undefined,
+          undefined
+        );
+      }
+      if (this.props.x === 269) {
+        return React.createElement(Link2, {x: 268});
+      }
+      if (this.props.x === 303) {
+        return React.createElement(
+          'button',
+          {
+            className: '_tm3 _tm6 _tm7 _4jy0 _4jy6 _517h _51sy _42ft',
+            'data-tooltip-position': 'right',
+            'data-tooltip-content': 'Campaigns',
+            'data-hover': 'tooltip',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          undefined,
+          React.createElement(
+            'div',
+            null,
+            React.createElement('div', {className: '_tma'}),
+            React.createElement('div', {className: '_tm8'}),
+            React.createElement('div', {className: '_tm9'}, 1)
+          ),
+          undefined
+        );
+      }
+      if (this.props.x === 305) {
+        return React.createElement(
+          'button',
+          {
+            className: '_tm4 _tm6 _4jy0 _4jy6 _517h _51sy _42ft',
+            'data-tooltip-position': 'right',
+            'data-tooltip-content': 'Ad Sets',
+            'data-hover': 'tooltip',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          undefined,
+          React.createElement(
+            'div',
+            null,
+            React.createElement('div', {className: '_tma'}),
+            React.createElement('div', {className: '_tm8'}),
+            React.createElement('div', {className: '_tm9'}, 1)
+          ),
+          undefined
+        );
+      }
+      if (this.props.x === 307) {
+        return React.createElement(
+          'button',
+          {
+            className: '_tm5 _tm6 _4jy0 _4jy6 _517h _51sy _42ft',
+            'data-tooltip-position': 'right',
+            'data-tooltip-content': 'Ads',
+            'data-hover': 'tooltip',
+            onClick: function () {},
+            label: null,
+            type: 'submit',
+            value: '1',
+          },
+          undefined,
+          React.createElement(
+            'div',
+            null,
+            React.createElement('div', {className: '_tma'}),
+            React.createElement('div', {className: '_tm8'}),
+            React.createElement('div', {className: '_tm9'}, 1)
+          ),
+          undefined
+        );
+      }
+    }
+  }
+
+  class XUIButton4 extends React.Component {
+    render() {
+      if (this.props.x === 4) {
+        return React.createElement(AbstractButton3, {x: 3});
+      }
+      if (this.props.x === 21) {
+        return React.createElement(AbstractButton3, {x: 20});
+      }
+      if (this.props.x === 24) {
+        return React.createElement(AbstractButton3, {x: 23});
+      }
+      if (this.props.x === 69) {
+        return React.createElement(AbstractButton3, {x: 68});
+      }
+      if (this.props.x === 72) {
+        return React.createElement(AbstractButton3, {x: 71});
+      }
+      if (this.props.x === 78) {
+        return React.createElement(AbstractButton3, {x: 77});
+      }
+      if (this.props.x === 81) {
+        return React.createElement(AbstractButton3, {x: 80});
+      }
+      if (this.props.x === 90) {
+        return React.createElement(AbstractButton3, {x: 89});
+      }
+      if (this.props.x === 93) {
+        return React.createElement(AbstractButton3, {x: 92});
+      }
+      if (this.props.x === 96) {
+        return React.createElement(AbstractButton3, {x: 95});
+      }
+      if (this.props.x === 100) {
+        return React.createElement(AbstractButton3, {x: 99});
+      }
+      if (this.props.x === 110) {
+        return React.createElement(AbstractButton3, {x: 109});
+      }
+      if (this.props.x === 113) {
+        return React.createElement(AbstractButton3, {x: 112});
+      }
+      if (this.props.x === 131) {
+        return React.createElement(AbstractButton3, {x: 130});
+      }
+      if (this.props.x === 139) {
+        return React.createElement(AbstractButton3, {x: 138});
+      }
+      if (this.props.x === 157) {
+        return React.createElement(AbstractButton3, {x: 156});
+      }
+      if (this.props.x === 162) {
+        return React.createElement(AbstractButton3, {x: 161});
+      }
+      if (this.props.x === 188) {
+        return React.createElement(AbstractButton3, {x: 187});
+      }
+      if (this.props.x === 270) {
+        return React.createElement(AbstractButton3, {x: 269});
+      }
+      if (this.props.x === 304) {
+        return React.createElement(AbstractButton3, {x: 303});
+      }
+      if (this.props.x === 306) {
+        return React.createElement(AbstractButton3, {x: 305});
+      }
+      if (this.props.x === 308) {
+        return React.createElement(AbstractButton3, {x: 307});
+      }
+    }
+  }
+
+  class AbstractPopoverButton5 extends React.Component {
+    render() {
+      if (this.props.x === 5) {
+        return React.createElement(XUIButton4, {x: 4});
+      }
+      if (this.props.x === 132) {
+        return React.createElement(XUIButton4, {x: 131});
+      }
+      if (this.props.x === 140) {
+        return React.createElement(XUIButton4, {x: 139});
+      }
+      if (this.props.x === 271) {
+        return React.createElement(XUIButton4, {x: 270});
+      }
+    }
+  }
+
+  class ReactXUIPopoverButton6 extends React.Component {
+    render() {
+      if (this.props.x === 6) {
+        return React.createElement(AbstractPopoverButton5, {x: 5});
+      }
+      if (this.props.x === 133) {
+        return React.createElement(AbstractPopoverButton5, {x: 132});
+      }
+      if (this.props.x === 141) {
+        return React.createElement(AbstractPopoverButton5, {x: 140});
+      }
+      if (this.props.x === 272) {
+        return React.createElement(AbstractPopoverButton5, {x: 271});
+      }
+    }
+  }
+
+  class BIGAdAccountSelector7 extends React.Component {
+    render() {
+      if (this.props.x === 7) {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(ReactXUIPopoverButton6, {x: 6}),
+          null
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEBIGAdAccountSelectorContainer_8 extends React.Component {
+    render() {
+      if (this.props.x === 8) {
+        return React.createElement(BIGAdAccountSelector7, {x: 7});
+      }
+    }
+  }
+
+  class ErrorBoundary9 extends React.Component {
+    render() {
+      if (this.props.x === 9) {
+        return React.createElement(
+          FluxContainer_AdsPEBIGAdAccountSelectorContainer_8,
+          {x: 8}
+        );
+      }
+      if (this.props.x === 13) {
+        return React.createElement(
+          FluxContainer_AdsPENavigationBarContainer_12,
+          {x: 12}
+        );
+      }
+      if (this.props.x === 27) {
+        return React.createElement(
+          FluxContainer_AdsPEPublishButtonContainer_18,
+          {x: 26}
+        );
+      }
+      if (this.props.x === 32) {
+        return React.createElement(ReactPopoverMenu20, {x: 31});
+      }
+      if (this.props.x === 38) {
+        return React.createElement(AdsPEResetDialog24, {x: 37});
+      }
+      if (this.props.x === 57) {
+        return React.createElement(FluxContainer_AdsPETopErrorContainer_35, {
+          x: 56,
+        });
+      }
+      if (this.props.x === 60) {
+        return React.createElement(FluxContainer_AdsGuidanceChannel_36, {
+          x: 59,
+        });
+      }
+      if (this.props.x === 64) {
+        return React.createElement(
+          FluxContainer_AdsBulkEditDialogContainer_38,
+          {x: 63}
+        );
+      }
+      if (this.props.x === 124) {
+        return React.createElement(AdsPECampaignGroupToolbarContainer57, {
+          x: 123,
+        });
+      }
+      if (this.props.x === 170) {
+        return React.createElement(AdsPEFilterContainer72, {x: 169});
+      }
+      if (this.props.x === 175) {
+        return React.createElement(AdsPETablePagerContainer75, {x: 174});
+      }
+      if (this.props.x === 193) {
+        return React.createElement(AdsPEStatRangeContainer81, {x: 192});
+      }
+      if (this.props.x === 301) {
+        return React.createElement(
+          FluxContainer_AdsPEMultiTabDrawerContainer_137,
+          {x: 300}
+        );
+      }
+      if (this.props.x === 311) {
+        return React.createElement(AdsPEOrganizerContainer139, {x: 310});
+      }
+      if (this.props.x === 471) {
+        return React.createElement(AdsPECampaignGroupTableContainer159, {
+          x: 470,
+        });
+      }
+      if (this.props.x === 475) {
+        return React.createElement(AdsPEContentContainer161, {x: 474});
+      }
+    }
+  }
+
+  class AdsErrorBoundary10 extends React.Component {
+    render() {
+      if (this.props.x === 10) {
+        return React.createElement(ErrorBoundary9, {x: 9});
+      }
+      if (this.props.x === 14) {
+        return React.createElement(ErrorBoundary9, {x: 13});
+      }
+      if (this.props.x === 28) {
+        return React.createElement(ErrorBoundary9, {x: 27});
+      }
+      if (this.props.x === 33) {
+        return React.createElement(ErrorBoundary9, {x: 32});
+      }
+      if (this.props.x === 39) {
+        return React.createElement(ErrorBoundary9, {x: 38});
+      }
+      if (this.props.x === 58) {
+        return React.createElement(ErrorBoundary9, {x: 57});
+      }
+      if (this.props.x === 61) {
+        return React.createElement(ErrorBoundary9, {x: 60});
+      }
+      if (this.props.x === 65) {
+        return React.createElement(ErrorBoundary9, {x: 64});
+      }
+      if (this.props.x === 125) {
+        return React.createElement(ErrorBoundary9, {x: 124});
+      }
+      if (this.props.x === 171) {
+        return React.createElement(ErrorBoundary9, {x: 170});
+      }
+      if (this.props.x === 176) {
+        return React.createElement(ErrorBoundary9, {x: 175});
+      }
+      if (this.props.x === 194) {
+        return React.createElement(ErrorBoundary9, {x: 193});
+      }
+      if (this.props.x === 302) {
+        return React.createElement(ErrorBoundary9, {x: 301});
+      }
+      if (this.props.x === 312) {
+        return React.createElement(ErrorBoundary9, {x: 311});
+      }
+      if (this.props.x === 472) {
+        return React.createElement(ErrorBoundary9, {x: 471});
+      }
+      if (this.props.x === 476) {
+        return React.createElement(ErrorBoundary9, {x: 475});
+      }
+    }
+  }
+
+  class AdsPENavigationBar11 extends React.Component {
+    render() {
+      if (this.props.x === 11) {
+        return React.createElement('div', {className: '_4t_9'});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPENavigationBarContainer_12 extends React.Component {
+    render() {
+      if (this.props.x === 12) {
+        return React.createElement(AdsPENavigationBar11, {x: 11});
+      }
+    }
+  }
+
+  class AdsPEDraftSyncStatus13 extends React.Component {
+    render() {
+      if (this.props.x === 16) {
+        return React.createElement(
+          'div',
+          {className: '_3ut-', onClick: function () {}},
+          React.createElement(
+            'span',
+            {className: '_3uu0'},
+            React.createElement(ReactImage0, {x: 15})
+          )
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEDraftSyncStatusContainer_14 extends React.Component {
+    render() {
+      if (this.props.x === 17) {
+        return React.createElement(AdsPEDraftSyncStatus13, {x: 16});
+      }
+    }
+  }
+
+  class AdsPEDraftErrorsStatus15 extends React.Component {
+    render() {
+      if (this.props.x === 18) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_viewFn_16 extends React.Component {
+    render() {
+      if (this.props.x === 19) {
+        return React.createElement(AdsPEDraftErrorsStatus15, {x: 18});
+      }
+    }
+  }
+
+  class AdsPEPublishButton17 extends React.Component {
+    render() {
+      if (this.props.x === 25) {
+        return React.createElement(
+          'div',
+          {className: '_5533'},
+          React.createElement(FluxContainer_AdsPEDraftSyncStatusContainer_14, {
+            x: 17,
+          }),
+          React.createElement(FluxContainer_viewFn_16, {x: 19}),
+          null,
+          React.createElement(XUIButton4, {x: 21, key: 'discard'}),
+          React.createElement(XUIButton4, {x: 24})
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEPublishButtonContainer_18 extends React.Component {
+    render() {
+      if (this.props.x === 26) {
+        return React.createElement(AdsPEPublishButton17, {x: 25});
+      }
+    }
+  }
+
+  class InlineBlock19 extends React.Component {
+    render() {
+      if (this.props.x === 30) {
+        return React.createElement(
+          'div',
+          {className: 'uiPopover _6a _6b', disabled: null},
+          React.createElement(ReactImage0, {x: 29, key: '.0'})
+        );
+      }
+      if (this.props.x === 73) {
+        return React.createElement(
+          'div',
+          {className: 'uiPopover _6a _6b', disabled: null},
+          React.createElement(XUIButton4, {x: 72, key: '.0'})
+        );
+      }
+      if (this.props.x === 82) {
+        return React.createElement(
+          'div',
+          {className: '_1nwm uiPopover _6a _6b', disabled: null},
+          React.createElement(XUIButton4, {x: 81, key: '.0'})
+        );
+      }
+      if (this.props.x === 101) {
+        return React.createElement(
+          'div',
+          {size: 'large', className: 'uiPopover _6a _6b', disabled: null},
+          React.createElement(XUIButton4, {x: 100, key: '.0'})
+        );
+      }
+      if (this.props.x === 273) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3-90 uiPopover _6a _6b',
+            style: {marginTop: 2},
+            disabled: null,
+          },
+          React.createElement(ReactXUIPopoverButton6, {x: 272, key: '.0'})
+        );
+      }
+    }
+  }
+
+  class ReactPopoverMenu20 extends React.Component {
+    render() {
+      if (this.props.x === 31) {
+        return React.createElement(InlineBlock19, {x: 30});
+      }
+      if (this.props.x === 74) {
+        return React.createElement(InlineBlock19, {x: 73});
+      }
+      if (this.props.x === 83) {
+        return React.createElement(InlineBlock19, {x: 82});
+      }
+      if (this.props.x === 102) {
+        return React.createElement(InlineBlock19, {x: 101});
+      }
+      if (this.props.x === 274) {
+        return React.createElement(InlineBlock19, {x: 273});
+      }
+    }
+  }
+
+  class LeftRight21 extends React.Component {
+    render() {
+      if (this.props.x === 34) {
+        return React.createElement(
+          'div',
+          {className: 'clearfix'},
+          React.createElement(
+            'div',
+            {key: 'left', className: '_ohe lfloat'},
+            React.createElement(
+              'div',
+              {className: '_34_j'},
+              React.createElement(
+                'div',
+                {className: '_34_k'},
+                React.createElement(AdsErrorBoundary10, {x: 10})
+              ),
+              React.createElement(
+                'div',
+                {className: '_2u-6'},
+                React.createElement(AdsErrorBoundary10, {x: 14})
+              )
+            )
+          ),
+          React.createElement(
+            'div',
+            {key: 'right', className: '_ohf rfloat'},
+            React.createElement(
+              'div',
+              {className: '_34_m'},
+              React.createElement(
+                'div',
+                {key: '0', className: '_5ju2'},
+                React.createElement(AdsErrorBoundary10, {x: 28})
+              ),
+              React.createElement(
+                'div',
+                {key: '1', className: '_5ju2'},
+                React.createElement(AdsErrorBoundary10, {x: 33})
+              )
+            )
+          )
+        );
+      }
+      if (this.props.x === 232) {
+        return React.createElement(
+          'div',
+          {direction: 'left', className: 'clearfix'},
+          React.createElement(
+            'div',
+            {key: 'left', className: '_ohe lfloat'},
+            React.createElement(AdsLabeledField104, {x: 231})
+          ),
+          React.createElement(
+            'div',
+            {key: 'right', className: ''},
+            React.createElement(
+              'div',
+              {className: '_42ef'},
+              React.createElement(
+                'div',
+                {className: '_2oc7'},
+                'Clicks to Website'
+              )
+            )
+          )
+        );
+      }
+      if (this.props.x === 235) {
+        return React.createElement(
+          'div',
+          {className: '_3-8x clearfix', direction: 'left'},
+          React.createElement(
+            'div',
+            {key: 'left', className: '_ohe lfloat'},
+            React.createElement(AdsLabeledField104, {x: 234})
+          ),
+          React.createElement(
+            'div',
+            {key: 'right', className: ''},
+            React.createElement(
+              'div',
+              {className: '_42ef'},
+              React.createElement('div', {className: '_2oc7'}, 'Auction')
+            )
+          )
+        );
+      }
+      if (this.props.x === 245) {
+        return React.createElement(
+          'div',
+          {className: '_3-8y clearfix', direction: 'left'},
+          React.createElement(
+            'div',
+            {key: 'left', className: '_ohe lfloat'},
+            React.createElement(AdsLabeledField104, {x: 240})
+          ),
+          React.createElement(
+            'div',
+            {key: 'right', className: ''},
+            React.createElement(
+              'div',
+              {className: '_42ef'},
+              React.createElement(
+                FluxContainer_AdsCampaignGroupSpendCapContainer_107,
+                {x: 244}
+              )
+            )
+          )
+        );
+      }
+      if (this.props.x === 277) {
+        return React.createElement(
+          'div',
+          {className: '_5dw9 _5dwa clearfix'},
+          React.createElement(
+            'div',
+            {key: 'left', className: '_ohe lfloat'},
+            React.createElement(XUICardHeaderTitle100, {x: 265, key: '.0'})
+          ),
+          React.createElement(
+            'div',
+            {key: 'right', className: '_ohf rfloat'},
+            React.createElement(
+              FluxContainer_AdsPluginizedLinksMenuContainer_121,
+              {x: 276, key: '.1'}
+            )
+          )
+        );
+      }
+    }
+  }
+
+  class AdsUnifiedNavigationLocalNav22 extends React.Component {
+    render() {
+      if (this.props.x === 35) {
+        return React.createElement(
+          'div',
+          {className: '_34_i'},
+          React.createElement(LeftRight21, {x: 34})
+        );
+      }
+    }
+  }
+
+  class XUIDialog23 extends React.Component {
+    render() {
+      if (this.props.x === 36) {
+        return null;
+      }
+    }
+  }
+
+  class AdsPEResetDialog24 extends React.Component {
+    render() {
+      if (this.props.x === 37) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(XUIDialog23, {x: 36, key: 'dialog/.0'})
+        );
+      }
+    }
+  }
+
+  class AdsPETopNav25 extends React.Component {
+    render() {
+      if (this.props.x === 40) {
+        return React.createElement(
+          'div',
+          {style: {width: 1306}},
+          React.createElement(AdsUnifiedNavigationLocalNav22, {x: 35}),
+          React.createElement(AdsErrorBoundary10, {x: 39})
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsPETopNavContainer_26 extends React.Component {
+    render() {
+      if (this.props.x === 41) {
+        return React.createElement(AdsPETopNav25, {x: 40});
+      }
+    }
+  }
+
+  class XUIAbstractGlyphButton27 extends React.Component {
+    render() {
+      if (this.props.x === 46) {
+        return React.createElement(AbstractButton3, {x: 45});
+      }
+      if (this.props.x === 150) {
+        return React.createElement(AbstractButton3, {x: 149});
+      }
+    }
+  }
+
+  class XUICloseButton28 extends React.Component {
+    render() {
+      if (this.props.x === 47) {
+        return React.createElement(XUIAbstractGlyphButton27, {x: 46});
+      }
+      if (this.props.x === 151) {
+        return React.createElement(XUIAbstractGlyphButton27, {x: 150});
+      }
+    }
+  }
+
+  class XUIText29 extends React.Component {
+    render() {
+      if (this.props.x === 48) {
+        return React.createElement(
+          'span',
+          {display: 'inline', className: ' _50f7'},
+          'Ads Manager'
+        );
+      }
+      if (this.props.x === 205) {
+        return React.createElement(
+          'span',
+          {className: '_2x9f  _50f5 _50f7', display: 'inline'},
+          'Editing Campaign'
+        );
+      }
+      if (this.props.x === 206) {
+        return React.createElement(
+          'span',
+          {display: 'inline', className: ' _50f5 _50f7'},
+          'Test Campaign'
+        );
+      }
+    }
+  }
+
+  class XUINotice30 extends React.Component {
+    render() {
+      if (this.props.x === 51) {
+        return React.createElement(
+          'div',
+          {size: 'medium', className: '_585n _585o _2wdd'},
+          React.createElement(ReactImage0, {x: 42}),
+          React.createElement(XUICloseButton28, {x: 47}),
+          React.createElement(
+            'div',
+            {className: '_585r _2i-a _50f4'},
+            'Please go to ',
+            React.createElement(Link2, {x: 50}),
+            ' to set up a payment method for this ad account.'
+          )
+        );
+      }
+    }
+  }
+
+  class ReactCSSTransitionGroupChild31 extends React.Component {
+    render() {
+      if (this.props.x === 52) {
+        return React.createElement(XUINotice30, {x: 51});
+      }
+    }
+  }
+
+  class ReactTransitionGroup32 extends React.Component {
+    render() {
+      if (this.props.x === 53) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(ReactCSSTransitionGroupChild31, {
+            x: 52,
+            key: '.0',
+          })
+        );
+      }
+    }
+  }
+
+  class ReactCSSTransitionGroup33 extends React.Component {
+    render() {
+      if (this.props.x === 54) {
+        return React.createElement(ReactTransitionGroup32, {x: 53});
+      }
+    }
+  }
+
+  class AdsPETopError34 extends React.Component {
+    render() {
+      if (this.props.x === 55) {
+        return React.createElement(
+          'div',
+          {className: '_2wdc'},
+          React.createElement(ReactCSSTransitionGroup33, {x: 54})
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsPETopErrorContainer_35 extends React.Component {
+    render() {
+      if (this.props.x === 56) {
+        return React.createElement(AdsPETopError34, {x: 55});
+      }
+    }
+  }
+
+  class FluxContainer_AdsGuidanceChannel_36 extends React.Component {
+    render() {
+      if (this.props.x === 59) {
+        return null;
+      }
+    }
+  }
+
+  class ResponsiveBlock37 extends React.Component {
+    render() {
+      if (this.props.x === 62) {
+        return React.createElement(
+          'div',
+          {className: '_4u-c'},
+          [
+            React.createElement(AdsErrorBoundary10, {x: 58, key: 1}),
+            React.createElement(AdsErrorBoundary10, {x: 61, key: 2}),
+          ],
+          React.createElement(
+            'div',
+            {key: 'sensor', className: '_4u-f'},
+            React.createElement('iframe', {
+              'aria-hidden': 'true',
+              className: '_1_xb',
+              tabIndex: '-1',
+            })
+          )
+        );
+      }
+      if (this.props.x === 469) {
+        return React.createElement(
+          'div',
+          {className: '_4u-c'},
+          React.createElement(AdsPEDataTableContainer158, {x: 468}),
+          React.createElement(
+            'div',
+            {key: 'sensor', className: '_4u-f'},
+            React.createElement('iframe', {
+              'aria-hidden': 'true',
+              className: '_1_xb',
+              tabIndex: '-1',
+            })
+          )
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsBulkEditDialogContainer_38 extends React.Component {
+    render() {
+      if (this.props.x === 63) {
+        return null;
+      }
+    }
+  }
+
+  class Column39 extends React.Component {
+    render() {
+      if (this.props.x === 66) {
+        return React.createElement(
+          'div',
+          {className: '_4bl8 _4bl7'},
+          React.createElement(
+            'div',
+            {className: '_3c5f'},
+            null,
+            null,
+            React.createElement('div', {className: '_3c5i'}),
+            null
+          )
+        );
+      }
+    }
+  }
+
+  class XUIButtonGroup40 extends React.Component {
+    render() {
+      if (this.props.x === 75) {
+        return React.createElement(
+          'div',
+          {className: '_5n7z _51xa'},
+          React.createElement(XUIButton4, {x: 69}),
+          React.createElement(ReactPopoverMenu20, {x: 74})
+        );
+      }
+      if (this.props.x === 84) {
+        return React.createElement(
+          'div',
+          {className: '_5n7z _51xa'},
+          React.createElement(XUIButton4, {x: 78, key: 'edit'}),
+          React.createElement(ReactPopoverMenu20, {x: 83, key: 'editMenu'})
+        );
+      }
+      if (this.props.x === 97) {
+        return React.createElement(
+          'div',
+          {className: '_5n7z _51xa'},
+          React.createElement(XUIButton4, {x: 90, key: 'revert'}),
+          React.createElement(XUIButton4, {x: 93, key: 'delete'}),
+          React.createElement(XUIButton4, {x: 96, key: 'duplicate'})
+        );
+      }
+      if (this.props.x === 117) {
+        return React.createElement(
+          'div',
+          {className: '_5n7z _51xa'},
+          React.createElement(AdsPEExportImportMenuContainer48, {x: 107}),
+          React.createElement(XUIButton4, {x: 110, key: 'createReport'}),
+          React.createElement(AdsPECampaignGroupTagContainer51, {
+            x: 116,
+            key: 'tags',
+          })
+        );
+      }
+    }
+  }
+
+  class AdsPEEditToolbarButton41 extends React.Component {
+    render() {
+      if (this.props.x === 85) {
+        return React.createElement(XUIButtonGroup40, {x: 84});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEEditCampaignGroupToolbarButtonContainer_42 extends React.Component {
+    render() {
+      if (this.props.x === 86) {
+        return React.createElement(AdsPEEditToolbarButton41, {x: 85});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEEditToolbarButtonContainer_43 extends React.Component {
+    render() {
+      if (this.props.x === 87) {
+        return React.createElement(
+          FluxContainer_AdsPEEditCampaignGroupToolbarButtonContainer_42,
+          {x: 86}
+        );
+      }
+    }
+  }
+
+  class AdsPEExportImportMenu44 extends React.Component {
+    render() {
+      if (this.props.x === 103) {
+        return React.createElement(ReactPopoverMenu20, {x: 102, key: 'export'});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPECustomizeExportContainer_45 extends React.Component {
+    render() {
+      if (this.props.x === 104) {
+        return null;
+      }
+    }
+  }
+
+  class AdsPEExportAsTextDialog46 extends React.Component {
+    render() {
+      if (this.props.x === 105) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEExportAsTextDialogContainer_47 extends React.Component {
+    render() {
+      if (this.props.x === 106) {
+        return React.createElement(AdsPEExportAsTextDialog46, {x: 105});
+      }
+    }
+  }
+
+  class AdsPEExportImportMenuContainer48 extends React.Component {
+    render() {
+      if (this.props.x === 107) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(AdsPEExportImportMenu44, {x: 103}),
+          React.createElement(FluxContainer_AdsPECustomizeExportContainer_45, {
+            x: 104,
+          }),
+          React.createElement(
+            FluxContainer_AdsPEExportAsTextDialogContainer_47,
+            {x: 106}
+          ),
+          null,
+          null
+        );
+      }
+    }
+  }
+
+  class Constructor49 extends React.Component {
+    render() {
+      if (this.props.x === 114) {
+        return null;
+      }
+      if (this.props.x === 142) {
+        return null;
+      }
+      if (this.props.x === 143) {
+        return null;
+      }
+      if (this.props.x === 183) {
+        return null;
+      }
+    }
+  }
+
+  class TagSelectorPopover50 extends React.Component {
+    render() {
+      if (this.props.x === 115) {
+        return React.createElement(
+          'span',
+          {className: ' _3d6e'},
+          React.createElement(XUIButton4, {x: 113}),
+          React.createElement(Constructor49, {x: 114, key: 'layer'})
+        );
+      }
+    }
+  }
+
+  class AdsPECampaignGroupTagContainer51 extends React.Component {
+    render() {
+      if (this.props.x === 116) {
+        return React.createElement(TagSelectorPopover50, {
+          x: 115,
+          key: '98010048849317',
+        });
+      }
+    }
+  }
+
+  class AdsRuleToolbarMenu52 extends React.Component {
+    render() {
+      if (this.props.x === 118) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPERuleToolbarMenuContainer_53 extends React.Component {
+    render() {
+      if (this.props.x === 119) {
+        return React.createElement(AdsRuleToolbarMenu52, {x: 118});
+      }
+    }
+  }
+
+  class FillColumn54 extends React.Component {
+    render() {
+      if (this.props.x === 120) {
+        return React.createElement(
+          'div',
+          {className: '_4bl9'},
+          React.createElement(
+            'span',
+            {className: '_3c5e'},
+            React.createElement(
+              'span',
+              null,
+              React.createElement(XUIButtonGroup40, {x: 75}),
+              React.createElement(
+                FluxContainer_AdsPEEditToolbarButtonContainer_43,
+                {x: 87}
+              ),
+              null,
+              React.createElement(XUIButtonGroup40, {x: 97})
+            ),
+            React.createElement(XUIButtonGroup40, {x: 117}),
+            React.createElement(
+              FluxContainer_AdsPERuleToolbarMenuContainer_53,
+              {x: 119}
+            )
+          )
+        );
+      }
+    }
+  }
+
+  class Layout55 extends React.Component {
+    render() {
+      if (this.props.x === 121) {
+        return React.createElement(
+          'div',
+          {className: 'clearfix'},
+          React.createElement(Column39, {x: 66, key: '1'}),
+          React.createElement(FillColumn54, {x: 120, key: '0'})
+        );
+      }
+    }
+  }
+
+  class AdsPEMainPaneToolbar56 extends React.Component {
+    render() {
+      if (this.props.x === 122) {
+        return React.createElement(
+          'div',
+          {className: '_3c5b clearfix'},
+          React.createElement(Layout55, {x: 121})
+        );
+      }
+    }
+  }
+
+  class AdsPECampaignGroupToolbarContainer57 extends React.Component {
+    render() {
+      if (this.props.x === 123) {
+        return React.createElement(AdsPEMainPaneToolbar56, {x: 122});
+      }
+    }
+  }
+
+  class AdsPEFiltersPopover58 extends React.Component {
+    render() {
+      if (this.props.x === 144) {
+        return React.createElement(
+          'span',
+          {className: '_5b-l  _5bbe'},
+          React.createElement(ReactXUIPopoverButton6, {x: 133}),
+          React.createElement(ReactXUIPopoverButton6, {x: 141}),
+          [
+            React.createElement(Constructor49, {x: 142, key: 'filterMenu/.0'}),
+            React.createElement(Constructor49, {x: 143, key: 'searchMenu/.0'}),
+          ]
+        );
+      }
+    }
+  }
+
+  class AbstractCheckboxInput59 extends React.Component {
+    render() {
+      if (this.props.x === 145) {
+        return React.createElement(
+          'label',
+          {className: 'uiInputLabelInput _55sg _kv1'},
+          React.createElement('input', {
+            checked: true,
+            disabled: true,
+            name: 'filterUnpublished',
+            value: 'on',
+            onClick: function () {},
+            className: null,
+            id: 'js_input_label_21',
+            type: 'checkbox',
+          }),
+          React.createElement('span', {
+            'data-hover': null,
+            'data-tooltip-content': undefined,
+          })
+        );
+      }
+      if (this.props.x === 336) {
+        return React.createElement(
+          'label',
+          {className: '_4h2r _55sg _kv1'},
+          React.createElement('input', {
+            checked: undefined,
+            onChange: function () {},
+            className: null,
+            type: 'checkbox',
+          }),
+          React.createElement('span', {
+            'data-hover': null,
+            'data-tooltip-content': undefined,
+          })
+        );
+      }
+    }
+  }
+
+  class XUICheckboxInput60 extends React.Component {
+    render() {
+      if (this.props.x === 146) {
+        return React.createElement(AbstractCheckboxInput59, {x: 145});
+      }
+      if (this.props.x === 337) {
+        return React.createElement(AbstractCheckboxInput59, {x: 336});
+      }
+    }
+  }
+
+  class InputLabel61 extends React.Component {
+    render() {
+      if (this.props.x === 147) {
+        return React.createElement(
+          'div',
+          {display: 'block', className: 'uiInputLabel clearfix'},
+          React.createElement(XUICheckboxInput60, {x: 146}),
+          React.createElement(
+            'label',
+            {className: 'uiInputLabelLabel', htmlFor: 'js_input_label_21'},
+            'Always show new items'
+          )
+        );
+      }
+    }
+  }
+
+  class AdsPopoverLink62 extends React.Component {
+    render() {
+      if (this.props.x === 154) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(
+            'span',
+            {
+              onMouseEnter: function () {},
+              onMouseLeave: function () {},
+              onMouseUp: undefined,
+            },
+            React.createElement('span', {className: '_3o_j'}),
+            React.createElement(ReactImage0, {x: 153})
+          ),
+          null
+        );
+      }
+      if (this.props.x === 238) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(
+            'span',
+            {
+              onMouseEnter: function () {},
+              onMouseLeave: function () {},
+              onMouseUp: undefined,
+            },
+            React.createElement('span', {className: '_3o_j'}),
+            React.createElement(ReactImage0, {x: 237})
+          ),
+          null
+        );
+      }
+    }
+  }
+
+  class AdsHelpLink63 extends React.Component {
+    render() {
+      if (this.props.x === 155) {
+        return React.createElement(AdsPopoverLink62, {x: 154});
+      }
+      if (this.props.x === 239) {
+        return React.createElement(AdsPopoverLink62, {x: 238});
+      }
+    }
+  }
+
+  class BUIFilterTokenInput64 extends React.Component {
+    render() {
+      if (this.props.x === 158) {
+        return React.createElement(
+          'div',
+          {className: '_5b5o _3yz3 _4cld'},
+          React.createElement(
+            'div',
+            {className: '_5b5t _2d2k'},
+            React.createElement(ReactImage0, {x: 152}),
+            React.createElement(
+              'div',
+              {className: '_5b5r'},
+              'Campaigns: (1)',
+              React.createElement(AdsHelpLink63, {x: 155})
+            )
+          ),
+          React.createElement(XUIButton4, {x: 157})
+        );
+      }
+    }
+  }
+
+  class BUIFilterToken65 extends React.Component {
+    render() {
+      if (this.props.x === 159) {
+        return React.createElement(
+          'div',
+          {className: '_3yz1 _3yz2 _3dad'},
+          React.createElement(
+            'div',
+            {className: '_3yz4', 'aria-hidden': false},
+            React.createElement(
+              'div',
+              {onClick: function () {}, className: '_3yz5'},
+              React.createElement(ReactImage0, {x: 148}),
+              React.createElement('div', {className: '_3yz7'}, 'Campaigns:'),
+              React.createElement(
+                'div',
+                {
+                  className: 'ellipsis _3yz8',
+                  'data-hover': 'tooltip',
+                  'data-tooltip-display': 'overflow',
+                },
+                '(1)'
+              )
+            ),
+            null,
+            React.createElement(XUICloseButton28, {x: 151})
+          ),
+          React.createElement(BUIFilterTokenInput64, {x: 158})
+        );
+      }
+    }
+  }
+
+  class BUIFilterTokenCreateButton66 extends React.Component {
+    render() {
+      if (this.props.x === 163) {
+        return React.createElement(
+          'div',
+          {className: '_1tc'},
+          React.createElement(XUIButton4, {x: 162})
+        );
+      }
+    }
+  }
+
+  class BUIFilterTokenizer67 extends React.Component {
+    render() {
+      if (this.props.x === 164) {
+        return React.createElement(
+          'div',
+          {className: '_5b-m  clearfix'},
+          undefined,
+          [],
+          React.createElement(BUIFilterToken65, {x: 159, key: 'token0'}),
+          React.createElement(BUIFilterTokenCreateButton66, {x: 163}),
+          null,
+          React.createElement('div', {className: '_49u3'})
+        );
+      }
+    }
+  }
+
+  class XUIAmbientNUX68 extends React.Component {
+    render() {
+      if (this.props.x === 165) {
+        return null;
+      }
+      if (this.props.x === 189) {
+        return null;
+      }
+      if (this.props.x === 200) {
+        return null;
+      }
+    }
+  }
+
+  class XUIAmbientNUX69 extends React.Component {
+    render() {
+      if (this.props.x === 166) {
+        return React.createElement(XUIAmbientNUX68, {x: 165});
+      }
+      if (this.props.x === 190) {
+        return React.createElement(XUIAmbientNUX68, {x: 189});
+      }
+      if (this.props.x === 201) {
+        return React.createElement(XUIAmbientNUX68, {x: 200});
+      }
+    }
+  }
+
+  class AdsPEAmbientNUXMegaphone70 extends React.Component {
+    render() {
+      if (this.props.x === 167) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement('span', {}),
+          React.createElement(XUIAmbientNUX69, {x: 166, key: 'nux'})
+        );
+      }
+    }
+  }
+
+  class AdsPEFilters71 extends React.Component {
+    render() {
+      if (this.props.x === 168) {
+        return React.createElement(
+          'div',
+          {className: '_4rw_'},
+          React.createElement(AdsPEFiltersPopover58, {x: 144}),
+          React.createElement(
+            'div',
+            {className: '_1eo'},
+            React.createElement(InputLabel61, {x: 147})
+          ),
+          React.createElement(BUIFilterTokenizer67, {x: 164}),
+          '',
+          React.createElement(AdsPEAmbientNUXMegaphone70, {x: 167})
+        );
+      }
+    }
+  }
+
+  class AdsPEFilterContainer72 extends React.Component {
+    render() {
+      if (this.props.x === 169) {
+        return React.createElement(AdsPEFilters71, {x: 168});
+      }
+    }
+  }
+
+  class AdsPETablePager73 extends React.Component {
+    render() {
+      if (this.props.x === 172) {
+        return null;
+      }
+    }
+  }
+
+  class AdsPECampaignGroupTablePagerContainer74 extends React.Component {
+    render() {
+      if (this.props.x === 173) {
+        return React.createElement(AdsPETablePager73, {x: 172});
+      }
+    }
+  }
+
+  class AdsPETablePagerContainer75 extends React.Component {
+    render() {
+      if (this.props.x === 174) {
+        return React.createElement(AdsPECampaignGroupTablePagerContainer74, {
+          x: 173,
+        });
+      }
+    }
+  }
+
+  class ReactXUIError76 extends React.Component {
+    render() {
+      if (this.props.x === 181) {
+        return React.createElement(AbstractButton3, {x: 180});
+      }
+      if (this.props.x === 216) {
+        return React.createElement(
+          'div',
+          {className: '_40bf _2vl4 _1h18'},
+          null,
+          null,
+          React.createElement(
+            'div',
+            {className: '_2vl9 _1h1f', style: {backgroundColor: '#fff'}},
+            React.createElement(
+              'div',
+              {className: '_2vla _1h1g'},
+              React.createElement(
+                'div',
+                null,
+                null,
+                React.createElement('textarea', {
+                  className: '_2vli _2vlj _1h26 _1h27',
+                  dir: 'auto',
+                  disabled: undefined,
+                  id: undefined,
+                  maxLength: null,
+                  value: 'Test Campaign',
+                  onBlur: function () {},
+                  onChange: function () {},
+                  onFocus: function () {},
+                  onKeyDown: function () {},
+                }),
+                null
+              ),
+              React.createElement('div', {
+                'aria-hidden': 'true',
+                className: '_2vlk',
+              })
+            )
+          ),
+          null
+        );
+      }
+      if (this.props.x === 221) {
+        return React.createElement(XUICard94, {x: 220});
+      }
+      if (this.props.x === 250) {
+        return React.createElement(XUICard94, {x: 249});
+      }
+      if (this.props.x === 280) {
+        return React.createElement(XUICard94, {x: 279});
+      }
+    }
+  }
+
+  class BUIPopoverButton77 extends React.Component {
+    render() {
+      if (this.props.x === 182) {
+        return React.createElement(ReactXUIError76, {x: 181});
+      }
+    }
+  }
+
+  class BUIDateRangePicker78 extends React.Component {
+    render() {
+      if (this.props.x === 184) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(BUIPopoverButton77, {x: 182}),
+          [React.createElement(Constructor49, {x: 183, key: 'layer/.0'})]
+        );
+      }
+    }
+  }
+
+  class AdsPEStatsRangePicker79 extends React.Component {
+    render() {
+      if (this.props.x === 185) {
+        return React.createElement(BUIDateRangePicker78, {x: 184});
+      }
+    }
+  }
+
+  class AdsPEStatRange80 extends React.Component {
+    render() {
+      if (this.props.x === 191) {
+        return React.createElement(
+          'div',
+          {className: '_3c5k'},
+          React.createElement('span', {className: '_3c5j'}, 'Stats:'),
+          React.createElement(
+            'span',
+            {className: '_3c5l'},
+            React.createElement(AdsPEStatsRangePicker79, {x: 185}),
+            React.createElement(XUIButton4, {x: 188, key: 'settings'})
+          ),
+          [React.createElement(XUIAmbientNUX69, {x: 190, key: 'roasNUX/.0'})]
+        );
+      }
+    }
+  }
+
+  class AdsPEStatRangeContainer81 extends React.Component {
+    render() {
+      if (this.props.x === 192) {
+        return React.createElement(AdsPEStatRange80, {x: 191});
+      }
+    }
+  }
+
+  class AdsPESideTrayTabButton82 extends React.Component {
+    render() {
+      if (this.props.x === 196) {
+        return React.createElement(
+          'div',
+          {className: '_1-ly _59j9 _d9a', onClick: function () {}},
+          React.createElement(ReactImage0, {x: 195}),
+          React.createElement('div', {className: '_vf7'}),
+          React.createElement('div', {className: '_vf8'})
+        );
+      }
+      if (this.props.x === 199) {
+        return React.createElement(
+          'div',
+          {className: ' _1-lz _d9a', onClick: function () {}},
+          React.createElement(ReactImage0, {x: 198}),
+          React.createElement('div', {className: '_vf7'}),
+          React.createElement('div', {className: '_vf8'})
+        );
+      }
+      if (this.props.x === 203) {
+        return null;
+      }
+    }
+  }
+
+  class AdsPEEditorTrayTabButton83 extends React.Component {
+    render() {
+      if (this.props.x === 197) {
+        return React.createElement(AdsPESideTrayTabButton82, {x: 196});
+      }
+    }
+  }
+
+  class AdsPEInsightsTrayTabButton84 extends React.Component {
+    render() {
+      if (this.props.x === 202) {
+        return React.createElement(
+          'span',
+          null,
+          React.createElement(AdsPESideTrayTabButton82, {x: 199}),
+          React.createElement(XUIAmbientNUX69, {x: 201, key: 'roasNUX'})
+        );
+      }
+    }
+  }
+
+  class AdsPENekoDebuggerTrayTabButton85 extends React.Component {
+    render() {
+      if (this.props.x === 204) {
+        return React.createElement(AdsPESideTrayTabButton82, {x: 203});
+      }
+    }
+  }
+
+  class AdsPEEditorChildLink86 extends React.Component {
+    render() {
+      if (this.props.x === 211) {
+        return React.createElement(
+          'div',
+          {className: '_3ywr'},
+          React.createElement(Link2, {x: 208}),
+          React.createElement('span', {className: '_3ywq'}, '|'),
+          React.createElement(Link2, {x: 210})
+        );
+      }
+    }
+  }
+
+  class AdsPEEditorChildLinkContainer87 extends React.Component {
+    render() {
+      if (this.props.x === 212) {
+        return React.createElement(AdsPEEditorChildLink86, {x: 211});
+      }
+    }
+  }
+
+  class AdsPEHeaderSection88 extends React.Component {
+    render() {
+      if (this.props.x === 213) {
+        return React.createElement(
+          'div',
+          {className: '_yke'},
+          React.createElement('div', {className: '_2x9d _pr-'}),
+          React.createElement(XUIText29, {x: 205}),
+          React.createElement(
+            'div',
+            {className: '_3a-a'},
+            React.createElement(
+              'div',
+              {className: '_3a-b'},
+              React.createElement(XUIText29, {x: 206})
+            )
+          ),
+          React.createElement(AdsPEEditorChildLinkContainer87, {x: 212})
+        );
+      }
+    }
+  }
+
+  class AdsPECampaignGroupHeaderSectionContainer89 extends React.Component {
+    render() {
+      if (this.props.x === 214) {
+        return React.createElement(AdsPEHeaderSection88, {x: 213});
+      }
+    }
+  }
+
+  class AdsEditorLoadingErrors90 extends React.Component {
+    render() {
+      if (this.props.x === 215) {
+        return null;
+      }
+    }
+  }
+
+  class AdsTextInput91 extends React.Component {
+    render() {
+      if (this.props.x === 217) {
+        return React.createElement(ReactXUIError76, {x: 216});
+      }
+    }
+  }
+
+  class BUIFormElement92 extends React.Component {
+    render() {
+      if (this.props.x === 218) {
+        return React.createElement(
+          'div',
+          {className: '_5521 clearfix'},
+          React.createElement(
+            'div',
+            {className: '_5522 _3w5q'},
+            React.createElement(
+              'label',
+              {
+                onClick: undefined,
+                htmlFor: '1467872040612:1961945894',
+                className: '_5523 _3w5r',
+              },
+              'Campaign Name',
+              null
+            )
+          ),
+          React.createElement(
+            'div',
+            {className: '_5527'},
+            React.createElement(
+              'div',
+              {className: '_5528'},
+              React.createElement(
+                'span',
+                {key: '.0', className: '_40bg', id: '1467872040612:1961945894'},
+                React.createElement(AdsTextInput91, {
+                  x: 217,
+                  key: 'nameEditor98010048849317',
+                }),
+                null
+              )
+            ),
+            null
+          )
+        );
+      }
+    }
+  }
+
+  class BUIForm93 extends React.Component {
+    render() {
+      if (this.props.x === 219) {
+        return React.createElement(
+          'div',
+          {className: '_5ks1 _550r  _550t _550y _3w5n'},
+          React.createElement(BUIFormElement92, {x: 218, key: '.0'})
+        );
+      }
+    }
+  }
+
+  class XUICard94 extends React.Component {
+    render() {
+      if (this.props.x === 220) {
+        return React.createElement(
+          'div',
+          {className: '_40bc _12k2 _4-u2  _4-u8'},
+          React.createElement(BUIForm93, {x: 219})
+        );
+      }
+      if (this.props.x === 249) {
+        return React.createElement(
+          'div',
+          {className: '_12k2 _4-u2  _4-u8'},
+          React.createElement(AdsCardHeader103, {x: 230}),
+          React.createElement(AdsCardSection108, {x: 248})
+        );
+      }
+      if (this.props.x === 279) {
+        return React.createElement(
+          'div',
+          {className: '_12k2 _4-u2  _4-u8'},
+          React.createElement(AdsCardLeftRightHeader122, {x: 278})
+        );
+      }
+    }
+  }
+
+  class AdsCard95 extends React.Component {
+    render() {
+      if (this.props.x === 222) {
+        return React.createElement(ReactXUIError76, {x: 221});
+      }
+      if (this.props.x === 251) {
+        return React.createElement(ReactXUIError76, {x: 250});
+      }
+      if (this.props.x === 281) {
+        return React.createElement(ReactXUIError76, {x: 280});
+      }
+    }
+  }
+
+  class AdsEditorNameSection96 extends React.Component {
+    render() {
+      if (this.props.x === 223) {
+        return React.createElement(AdsCard95, {x: 222});
+      }
+    }
+  }
+
+  class AdsCampaignGroupNameSectionContainer97 extends React.Component {
+    render() {
+      if (this.props.x === 224) {
+        return React.createElement(AdsEditorNameSection96, {
+          x: 223,
+          key: 'nameSection98010048849317',
+        });
+      }
+    }
+  }
+
+  class _render98 extends React.Component {
+    render() {
+      if (this.props.x === 225) {
+        return React.createElement(AdsCampaignGroupNameSectionContainer97, {
+          x: 224,
+        });
+      }
+    }
+  }
+
+  class AdsPluginWrapper99 extends React.Component {
+    render() {
+      if (this.props.x === 226) {
+        return React.createElement(_render98, {x: 225});
+      }
+      if (this.props.x === 255) {
+        return React.createElement(_render111, {x: 254});
+      }
+      if (this.props.x === 258) {
+        return React.createElement(_render113, {x: 257});
+      }
+      if (this.props.x === 287) {
+        return React.createElement(_render127, {x: 286});
+      }
+      if (this.props.x === 291) {
+        return React.createElement(_render130, {x: 290});
+      }
+    }
+  }
+
+  class XUICardHeaderTitle100 extends React.Component {
+    render() {
+      if (this.props.x === 227) {
+        return React.createElement(
+          'span',
+          {className: '_38my'},
+          'Campaign Details',
+          null,
+          React.createElement('span', {className: '_c1c'})
+        );
+      }
+      if (this.props.x === 265) {
+        return React.createElement(
+          'span',
+          {className: '_38my'},
+          [
+            React.createElement(
+              'span',
+              {key: 1},
+              'Campaign ID',
+              ': ',
+              '98010048849317'
+            ),
+            React.createElement(
+              'div',
+              {className: '_5lh9', key: 2},
+              React.createElement(
+                FluxContainer_AdsCampaignGroupStatusSwitchContainer_119,
+                {x: 264}
+              )
+            ),
+          ],
+          null,
+          React.createElement('span', {className: '_c1c'})
+        );
+      }
+    }
+  }
+
+  class XUICardSection101 extends React.Component {
+    render() {
+      if (this.props.x === 228) {
+        return React.createElement(
+          'div',
+          {className: '_5dw9 _5dwa _4-u3'},
+          [React.createElement(XUICardHeaderTitle100, {x: 227, key: '.0'})],
+          undefined,
+          undefined,
+          React.createElement('div', {className: '_3s3-'})
+        );
+      }
+      if (this.props.x === 247) {
+        return React.createElement(
+          'div',
+          {className: '_12jy _4-u3'},
+          React.createElement(
+            'div',
+            {className: '_3-8j'},
+            React.createElement(FlexibleBlock105, {x: 233}),
+            React.createElement(FlexibleBlock105, {x: 236}),
+            React.createElement(FlexibleBlock105, {x: 246}),
+            null,
+            null
+          )
+        );
+      }
+    }
+  }
+
+  class XUICardHeader102 extends React.Component {
+    render() {
+      if (this.props.x === 229) {
+        return React.createElement(XUICardSection101, {x: 228});
+      }
+    }
+  }
+
+  class AdsCardHeader103 extends React.Component {
+    render() {
+      if (this.props.x === 230) {
+        return React.createElement(XUICardHeader102, {x: 229});
+      }
+    }
+  }
+
+  class AdsLabeledField104 extends React.Component {
+    render() {
+      if (this.props.x === 231) {
+        return React.createElement(
+          'div',
+          {className: '_2oc6 _3bvz', label: 'Objective'},
+          React.createElement(
+            'label',
+            {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+            'Objective '
+          ),
+          null,
+          React.createElement('div', {className: '_3bv-'})
+        );
+      }
+      if (this.props.x === 234) {
+        return React.createElement(
+          'div',
+          {className: '_2oc6 _3bvz', label: 'Buying Type'},
+          React.createElement(
+            'label',
+            {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+            'Buying Type '
+          ),
+          null,
+          React.createElement('div', {className: '_3bv-'})
+        );
+      }
+      if (this.props.x === 240) {
+        return React.createElement(
+          'div',
+          {className: '_2oc6 _3bvz'},
+          React.createElement(
+            'label',
+            {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+            'Campaign Spending Limit '
+          ),
+          React.createElement(AdsHelpLink63, {x: 239}),
+          React.createElement('div', {className: '_3bv-'})
+        );
+      }
+    }
+  }
+
+  class FlexibleBlock105 extends React.Component {
+    render() {
+      if (this.props.x === 233) {
+        return React.createElement(LeftRight21, {x: 232});
+      }
+      if (this.props.x === 236) {
+        return React.createElement(LeftRight21, {x: 235});
+      }
+      if (this.props.x === 246) {
+        return React.createElement(LeftRight21, {x: 245});
+      }
+    }
+  }
+
+  class AdsBulkCampaignSpendCapField106 extends React.Component {
+    render() {
+      if (this.props.x === 243) {
+        return React.createElement(
+          'div',
+          {className: '_33dv'},
+          '',
+          React.createElement(Link2, {x: 242}),
+          ' (optional)'
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsCampaignGroupSpendCapContainer_107 extends React.Component {
+    render() {
+      if (this.props.x === 244) {
+        return React.createElement(AdsBulkCampaignSpendCapField106, {x: 243});
+      }
+    }
+  }
+
+  class AdsCardSection108 extends React.Component {
+    render() {
+      if (this.props.x === 248) {
+        return React.createElement(XUICardSection101, {x: 247});
+      }
+    }
+  }
+
+  class AdsEditorCampaignGroupDetailsSection109 extends React.Component {
+    render() {
+      if (this.props.x === 252) {
+        return React.createElement(AdsCard95, {x: 251});
+      }
+    }
+  }
+
+  class AdsEditorCampaignGroupDetailsSectionContainer110 extends React.Component {
+    render() {
+      if (this.props.x === 253) {
+        return React.createElement(AdsEditorCampaignGroupDetailsSection109, {
+          x: 252,
+          key: 'campaignGroupDetailsSection98010048849317',
+        });
+      }
+    }
+  }
+
+  class _render111 extends React.Component {
+    render() {
+      if (this.props.x === 254) {
+        return React.createElement(
+          AdsEditorCampaignGroupDetailsSectionContainer110,
+          {x: 253}
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsEditorToplineDetailsSectionContainer_112 extends React.Component {
+    render() {
+      if (this.props.x === 256) {
+        return null;
+      }
+    }
+  }
+
+  class _render113 extends React.Component {
+    render() {
+      if (this.props.x === 257) {
+        return React.createElement(
+          FluxContainer_AdsEditorToplineDetailsSectionContainer_112,
+          {x: 256}
+        );
+      }
+    }
+  }
+
+  class AdsStickyArea114 extends React.Component {
+    render() {
+      if (this.props.x === 259) {
+        return React.createElement(
+          'div',
+          {},
+          React.createElement('div', {onWheel: function () {}})
+        );
+      }
+      if (this.props.x === 292) {
+        return React.createElement(
+          'div',
+          {},
+          React.createElement('div', {onWheel: function () {}}, [
+            React.createElement(
+              'div',
+              {key: 'campaign_group_errors_section98010048849317'},
+              React.createElement(AdsPluginWrapper99, {x: 291})
+            ),
+          ])
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsEditorColumnContainer_115 extends React.Component {
+    render() {
+      if (this.props.x === 260) {
+        return React.createElement(
+          'div',
+          null,
+          [
+            React.createElement(
+              'div',
+              {key: 'campaign_group_name_section98010048849317'},
+              React.createElement(AdsPluginWrapper99, {x: 226})
+            ),
+            React.createElement(
+              'div',
+              {key: 'campaign_group_basic_section98010048849317'},
+              React.createElement(AdsPluginWrapper99, {x: 255})
+            ),
+            React.createElement(
+              'div',
+              {key: 'campaign_group_topline_section98010048849317'},
+              React.createElement(AdsPluginWrapper99, {x: 258})
+            ),
+          ],
+          React.createElement(AdsStickyArea114, {x: 259})
+        );
+      }
+      if (this.props.x === 293) {
+        return React.createElement(
+          'div',
+          null,
+          [
+            React.createElement(
+              'div',
+              {key: 'campaign_group_navigation_section98010048849317'},
+              React.createElement(AdsPluginWrapper99, {x: 287})
+            ),
+          ],
+          React.createElement(AdsStickyArea114, {x: 292})
+        );
+      }
+    }
+  }
+
+  class BUISwitch116 extends React.Component {
+    render() {
+      if (this.props.x === 261) {
+        return React.createElement(
+          'div',
+          {
+            'data-hover': 'tooltip',
+            'data-tooltip-content':
+              'Currently active. Click this switch to deactivate it.',
+            'data-tooltip-position': 'below',
+            disabled: false,
+            value: true,
+            onToggle: function () {},
+            className: '_128j _128k _128n',
+            role: 'checkbox',
+            'aria-checked': 'true',
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_128o',
+              onClick: function () {},
+              onKeyDown: function () {},
+              onMouseDown: function () {},
+              tabIndex: '0',
+            },
+            React.createElement('div', {className: '_128p'})
+          ),
+          null
+        );
+      }
+    }
+  }
+
+  class AdsStatusSwitchInternal117 extends React.Component {
+    render() {
+      if (this.props.x === 262) {
+        return React.createElement(BUISwitch116, {x: 261});
+      }
+    }
+  }
+
+  class AdsStatusSwitch118 extends React.Component {
+    render() {
+      if (this.props.x === 263) {
+        return React.createElement(AdsStatusSwitchInternal117, {x: 262});
+      }
+    }
+  }
+
+  class FluxContainer_AdsCampaignGroupStatusSwitchContainer_119 extends React.Component {
+    render() {
+      if (this.props.x === 264) {
+        return React.createElement(AdsStatusSwitch118, {
+          x: 263,
+          key: 'status98010048849317',
+        });
+      }
+    }
+  }
+
+  class AdsLinksMenu120 extends React.Component {
+    render() {
+      if (this.props.x === 275) {
+        return React.createElement(ReactPopoverMenu20, {x: 274});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPluginizedLinksMenuContainer_121 extends React.Component {
+    render() {
+      if (this.props.x === 276) {
+        return React.createElement(
+          'div',
+          null,
+          null,
+          React.createElement(AdsLinksMenu120, {x: 275})
+        );
+      }
+    }
+  }
+
+  class AdsCardLeftRightHeader122 extends React.Component {
+    render() {
+      if (this.props.x === 278) {
+        return React.createElement(LeftRight21, {x: 277});
+      }
+    }
+  }
+
+  class AdsPEIDSection123 extends React.Component {
+    render() {
+      if (this.props.x === 282) {
+        return React.createElement(AdsCard95, {x: 281});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPECampaignGroupIDSectionContainer_124 extends React.Component {
+    render() {
+      if (this.props.x === 283) {
+        return React.createElement(AdsPEIDSection123, {x: 282});
+      }
+    }
+  }
+
+  class DeferredComponent125 extends React.Component {
+    render() {
+      if (this.props.x === 284) {
+        return React.createElement(
+          FluxContainer_AdsPECampaignGroupIDSectionContainer_124,
+          {x: 283}
+        );
+      }
+    }
+  }
+
+  class BootloadedComponent126 extends React.Component {
+    render() {
+      if (this.props.x === 285) {
+        return React.createElement(DeferredComponent125, {x: 284});
+      }
+    }
+  }
+
+  class _render127 extends React.Component {
+    render() {
+      if (this.props.x === 286) {
+        return React.createElement(BootloadedComponent126, {x: 285});
+      }
+    }
+  }
+
+  class AdsEditorErrorsCard128 extends React.Component {
+    render() {
+      if (this.props.x === 288) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_FunctionalContainer_129 extends React.Component {
+    render() {
+      if (this.props.x === 289) {
+        return React.createElement(AdsEditorErrorsCard128, {x: 288});
+      }
+    }
+  }
+
+  class _render130 extends React.Component {
+    render() {
+      if (this.props.x === 290) {
+        return React.createElement(FluxContainer_FunctionalContainer_129, {
+          x: 289,
+        });
+      }
+    }
+  }
+
+  class AdsEditorMultiColumnLayout131 extends React.Component {
+    render() {
+      if (this.props.x === 294) {
+        return React.createElement(
+          'div',
+          {className: '_psh'},
+          React.createElement(
+            'div',
+            {className: '_3cc0'},
+            React.createElement(
+              'div',
+              null,
+              React.createElement(AdsEditorLoadingErrors90, {
+                x: 215,
+                key: '.0',
+              }),
+              React.createElement(
+                'div',
+                {className: '_3ms3'},
+                React.createElement(
+                  'div',
+                  {className: '_3ms4'},
+                  React.createElement(
+                    FluxContainer_AdsEditorColumnContainer_115,
+                    {x: 260, key: '.1'}
+                  )
+                ),
+                React.createElement(
+                  'div',
+                  {className: '_3pvg'},
+                  React.createElement(
+                    FluxContainer_AdsEditorColumnContainer_115,
+                    {x: 293, key: '.2'}
+                  )
+                )
+              )
+            )
+          )
+        );
+      }
+    }
+  }
+
+  class AdsPECampaignGroupEditor132 extends React.Component {
+    render() {
+      if (this.props.x === 295) {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(AdsPECampaignGroupHeaderSectionContainer89, {
+            x: 214,
+          }),
+          React.createElement(AdsEditorMultiColumnLayout131, {x: 294})
+        );
+      }
+    }
+  }
+
+  class AdsPECampaignGroupEditorContainer133 extends React.Component {
+    render() {
+      if (this.props.x === 296) {
+        return React.createElement(AdsPECampaignGroupEditor132, {x: 295});
+      }
+    }
+  }
+
+  class AdsPESideTrayTabContent134 extends React.Component {
+    render() {
+      if (this.props.x === 297) {
+        return React.createElement(
+          'div',
+          {className: '_1o_8 _44ra _5cyn'},
+          React.createElement(AdsPECampaignGroupEditorContainer133, {x: 296})
+        );
+      }
+    }
+  }
+
+  class AdsPEEditorTrayTabContentContainer135 extends React.Component {
+    render() {
+      if (this.props.x === 298) {
+        return React.createElement(AdsPESideTrayTabContent134, {x: 297});
+      }
+    }
+  }
+
+  class AdsPEMultiTabDrawer136 extends React.Component {
+    render() {
+      if (this.props.x === 299) {
+        return React.createElement(
+          'div',
+          {className: '_2kev _2kex'},
+          React.createElement(
+            'div',
+            {className: '_5yno'},
+            React.createElement(AdsPEEditorTrayTabButton83, {
+              x: 197,
+              key: 'editor_tray_button',
+            }),
+            React.createElement(AdsPEInsightsTrayTabButton84, {
+              x: 202,
+              key: 'insights_tray_button',
+            }),
+            React.createElement(AdsPENekoDebuggerTrayTabButton85, {
+              x: 204,
+              key: 'neko_debugger_tray_button',
+            })
+          ),
+          React.createElement(
+            'div',
+            {className: '_5ynn'},
+            React.createElement(AdsPEEditorTrayTabContentContainer135, {
+              x: 298,
+              key: 'EDITOR_DRAWER',
+            }),
+            null
+          )
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEMultiTabDrawerContainer_137 extends React.Component {
+    render() {
+      if (this.props.x === 300) {
+        return React.createElement(AdsPEMultiTabDrawer136, {x: 299});
+      }
+    }
+  }
+
+  class AdsPESimpleOrganizer138 extends React.Component {
+    render() {
+      if (this.props.x === 309) {
+        return React.createElement(
+          'div',
+          {className: '_tm2'},
+          React.createElement(XUIButton4, {x: 304}),
+          React.createElement(XUIButton4, {x: 306}),
+          React.createElement(XUIButton4, {x: 308})
+        );
+      }
+    }
+  }
+
+  class AdsPEOrganizerContainer139 extends React.Component {
+    render() {
+      if (this.props.x === 310) {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(AdsPESimpleOrganizer138, {x: 309})
+        );
+      }
+    }
+  }
+
+  class FixedDataTableColumnResizeHandle140 extends React.Component {
+    render() {
+      if (this.props.x === 313) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3487 _3488 _3489',
+            style: {width: 0, height: 25, left: 0},
+          },
+          React.createElement('div', {className: '_348a', style: {height: 25}})
+        );
+      }
+    }
+  }
+
+  class AdsPETableHeader141 extends React.Component {
+    render() {
+      if (this.props.x === 315) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _1ksv _1vd7 _4h2r', id: undefined},
+          React.createElement(ReactImage0, {x: 314}),
+          React.createElement('span', {className: '_1cid'}, 'Campaigns')
+        );
+      }
+      if (this.props.x === 320) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _1vd7 _4h2r', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Performance')
+        );
+      }
+      if (this.props.x === 323) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _1vd7 _4h2r', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Overview')
+        );
+      }
+      if (this.props.x === 326) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _1vd7 _4h2r', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Toplines')
+        );
+      }
+      if (this.props.x === 329) {
+        return React.createElement('div', {
+          className: '_1cig _1vd7 _4h2r',
+          id: undefined,
+        });
+      }
+      if (this.props.x === 340) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Campaign Name')
+        );
+      }
+      if (this.props.x === 346) {
+        return React.createElement(
+          'div',
+          {
+            className: '_1cig _25fg',
+            id: undefined,
+            'data-tooltip-content': 'Changed',
+            'data-hover': 'tooltip',
+          },
+          React.createElement(ReactImage0, {x: 345}),
+          null
+        );
+      }
+      if (this.props.x === 352) {
+        return React.createElement(
+          'div',
+          {
+            className: '_1cig _25fg',
+            id: 'ads_pe_table_error_header',
+            'data-tooltip-content': 'Errors',
+            'data-hover': 'tooltip',
+          },
+          React.createElement(ReactImage0, {x: 351}),
+          null
+        );
+      }
+      if (this.props.x === 357) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Status')
+        );
+      }
+      if (this.props.x === 362) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Delivery')
+        );
+      }
+      if (this.props.x === 369) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Results')
+        );
+      }
+      if (this.props.x === 374) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Cost')
+        );
+      }
+      if (this.props.x === 379) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Reach')
+        );
+      }
+      if (this.props.x === 384) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Impressions')
+        );
+      }
+      if (this.props.x === 389) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Clicks')
+        );
+      }
+      if (this.props.x === 394) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Avg. CPM')
+        );
+      }
+      if (this.props.x === 399) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Avg. CPC')
+        );
+      }
+      if (this.props.x === 404) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'CTR %')
+        );
+      }
+      if (this.props.x === 409) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Spent')
+        );
+      }
+      if (this.props.x === 414) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Objective')
+        );
+      }
+      if (this.props.x === 419) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Buying Type')
+        );
+      }
+      if (this.props.x === 424) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Campaign ID')
+        );
+      }
+      if (this.props.x === 429) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Start')
+        );
+      }
+      if (this.props.x === 434) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'End')
+        );
+      }
+      if (this.props.x === 439) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Date created')
+        );
+      }
+      if (this.props.x === 444) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Date last edited')
+        );
+      }
+      if (this.props.x === 449) {
+        return React.createElement(
+          'div',
+          {className: '_1cig _25fg _4h2r', id: undefined},
+          null,
+          React.createElement('span', {className: '_1cid'}, 'Tags')
+        );
+      }
+      if (this.props.x === 452) {
+        return React.createElement('div', {
+          className: '_1cig _25fg _4h2r',
+          id: undefined,
+        });
+      }
+    }
+  }
+
+  class TransitionCell142 extends React.Component {
+    render() {
+      if (this.props.x === 316) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Campaigns',
+            height: 40,
+            width: 721,
+            className: '_4lgc _4h2u',
+            style: {height: 40, width: 721},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 315})
+            )
+          )
+        );
+      }
+      if (this.props.x === 321) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Performance',
+            height: 40,
+            width: 798,
+            className: '_4lgc _4h2u',
+            style: {height: 40, width: 798},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 320})
+            )
+          )
+        );
+      }
+      if (this.props.x === 324) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Overview',
+            height: 40,
+            width: 1022,
+            className: '_4lgc _4h2u',
+            style: {height: 40, width: 1022},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 323})
+            )
+          )
+        );
+      }
+      if (this.props.x === 327) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Toplines',
+            height: 40,
+            width: 0,
+            className: '_4lgc _4h2u',
+            style: {height: 40, width: 0},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 326})
+            )
+          )
+        );
+      }
+      if (this.props.x === 330) {
+        return React.createElement(
+          'div',
+          {
+            label: '',
+            height: 40,
+            width: 25,
+            className: '_4lgc _4h2u',
+            style: {height: 40, width: 25},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 329})
+            )
+          )
+        );
+      }
+      if (this.props.x === 338) {
+        return React.createElement(
+          'div',
+          {
+            label: undefined,
+            width: 42,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 42},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(XUICheckboxInput60, {x: 337})
+            )
+          )
+        );
+      }
+      if (this.props.x === 343) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Campaign Name',
+            width: 400,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 400},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 342})
+            )
+          )
+        );
+      }
+      if (this.props.x === 349) {
+        return React.createElement(
+          'div',
+          {
+            label: undefined,
+            width: 33,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 33},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 348})
+            )
+          )
+        );
+      }
+      if (this.props.x === 355) {
+        return React.createElement(
+          'div',
+          {
+            label: undefined,
+            width: 36,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 36},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 354})
+            )
+          )
+        );
+      }
+      if (this.props.x === 360) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Status',
+            width: 60,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 60},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 359})
+            )
+          )
+        );
+      }
+      if (this.props.x === 365) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Delivery',
+            width: 150,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 150},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 364})
+            )
+          )
+        );
+      }
+      if (this.props.x === 372) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Results',
+            width: 140,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 140},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 371})
+            )
+          )
+        );
+      }
+      if (this.props.x === 377) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Cost',
+            width: 140,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 140},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 376})
+            )
+          )
+        );
+      }
+      if (this.props.x === 382) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Reach',
+            width: 80,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 80},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 381})
+            )
+          )
+        );
+      }
+      if (this.props.x === 387) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Impressions',
+            width: 80,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 80},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 386})
+            )
+          )
+        );
+      }
+      if (this.props.x === 392) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Clicks',
+            width: 60,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 60},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 391})
+            )
+          )
+        );
+      }
+      if (this.props.x === 397) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Avg. CPM',
+            width: 80,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 80},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 396})
+            )
+          )
+        );
+      }
+      if (this.props.x === 402) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Avg. CPC',
+            width: 78,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 78},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 401})
+            )
+          )
+        );
+      }
+      if (this.props.x === 407) {
+        return React.createElement(
+          'div',
+          {
+            label: 'CTR %',
+            width: 70,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 70},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 406})
+            )
+          )
+        );
+      }
+      if (this.props.x === 412) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Spent',
+            width: 70,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 70},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 411})
+            )
+          )
+        );
+      }
+      if (this.props.x === 417) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Objective',
+            width: 200,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 200},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 416})
+            )
+          )
+        );
+      }
+      if (this.props.x === 422) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Buying Type',
+            width: 100,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 100},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 421})
+            )
+          )
+        );
+      }
+      if (this.props.x === 427) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Campaign ID',
+            width: 120,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 120},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 426})
+            )
+          )
+        );
+      }
+      if (this.props.x === 432) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Start',
+            width: 113,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 113},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 431})
+            )
+          )
+        );
+      }
+      if (this.props.x === 437) {
+        return React.createElement(
+          'div',
+          {
+            label: 'End',
+            width: 113,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 113},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 436})
+            )
+          )
+        );
+      }
+      if (this.props.x === 442) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Date created',
+            width: 113,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 113},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 441})
+            )
+          )
+        );
+      }
+      if (this.props.x === 447) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Date last edited',
+            width: 113,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 113},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(FixedDataTableSortableHeader149, {x: 446})
+            )
+          )
+        );
+      }
+      if (this.props.x === 450) {
+        return React.createElement(
+          'div',
+          {
+            label: 'Tags',
+            width: 150,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 150},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 449})
+            )
+          )
+        );
+      }
+      if (this.props.x === 453) {
+        return React.createElement(
+          'div',
+          {
+            label: '',
+            width: 25,
+            className: '_4lgc _4h2u',
+            height: 25,
+            style: {height: 25, width: 25},
+          },
+          React.createElement(
+            'div',
+            {className: '_4lgd _4h2w'},
+            React.createElement(
+              'div',
+              {className: '_4lge _4h2x'},
+              React.createElement(AdsPETableHeader141, {x: 452})
+            )
+          )
+        );
+      }
+    }
+  }
+
+  class FixedDataTableCell143 extends React.Component {
+    render() {
+      if (this.props.x === 317) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 40, width: 721, left: 0}},
+          undefined,
+          React.createElement(TransitionCell142, {x: 316})
+        );
+      }
+      if (this.props.x === 322) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 40, width: 798, left: 0}},
+          undefined,
+          React.createElement(TransitionCell142, {x: 321})
+        );
+      }
+      if (this.props.x === 325) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 40, width: 1022, left: 798},
+          },
+          undefined,
+          React.createElement(TransitionCell142, {x: 324})
+        );
+      }
+      if (this.props.x === 328) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 40, width: 0, left: 1820}},
+          undefined,
+          React.createElement(TransitionCell142, {x: 327})
+        );
+      }
+      if (this.props.x === 331) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 40, width: 25, left: 1820},
+          },
+          undefined,
+          React.createElement(TransitionCell142, {x: 330})
+        );
+      }
+      if (this.props.x === 339) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg6 _4h2m',
+            style: {height: 25, width: 42, left: 0},
+          },
+          undefined,
+          React.createElement(TransitionCell142, {x: 338})
+        );
+      }
+      if (this.props.x === 344) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 25, width: 400, left: 42}},
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 343})
+        );
+      }
+      if (this.props.x === 350) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 25, width: 33, left: 442}},
+          undefined,
+          React.createElement(TransitionCell142, {x: 349})
+        );
+      }
+      if (this.props.x === 356) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 25, width: 36, left: 475}},
+          undefined,
+          React.createElement(TransitionCell142, {x: 355})
+        );
+      }
+      if (this.props.x === 361) {
+        return React.createElement(
+          'div',
+          {className: '_4lg0 _4h2m', style: {height: 25, width: 60, left: 511}},
+          undefined,
+          React.createElement(TransitionCell142, {x: 360})
+        );
+      }
+      if (this.props.x === 366) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 150, left: 571},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 365})
+        );
+      }
+      if (this.props.x === 373) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 140, left: 0},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 372})
+        );
+      }
+      if (this.props.x === 378) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 140, left: 140},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 377})
+        );
+      }
+      if (this.props.x === 383) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 80, left: 280},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 382})
+        );
+      }
+      if (this.props.x === 388) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 80, left: 360},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 387})
+        );
+      }
+      if (this.props.x === 393) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 60, left: 440},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 392})
+        );
+      }
+      if (this.props.x === 398) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 80, left: 500},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 397})
+        );
+      }
+      if (this.props.x === 403) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 78, left: 580},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 402})
+        );
+      }
+      if (this.props.x === 408) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 70, left: 658},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 407})
+        );
+      }
+      if (this.props.x === 413) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4lg5 _4h2p _4h2m',
+            style: {height: 25, width: 70, left: 728},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 412})
+        );
+      }
+      if (this.props.x === 418) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 200, left: 798},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 417})
+        );
+      }
+      if (this.props.x === 423) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 100, left: 998},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 422})
+        );
+      }
+      if (this.props.x === 428) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 120, left: 1098},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 427})
+        );
+      }
+      if (this.props.x === 433) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 113, left: 1218},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 432})
+        );
+      }
+      if (this.props.x === 438) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 113, left: 1331},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 437})
+        );
+      }
+      if (this.props.x === 443) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 113, left: 1444},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 442})
+        );
+      }
+      if (this.props.x === 448) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 113, left: 1557},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 447})
+        );
+      }
+      if (this.props.x === 451) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 150, left: 1670},
+          },
+          React.createElement(
+            'div',
+            {
+              className: '_4lg9',
+              style: {height: 25},
+              onMouseDown: function () {},
+            },
+            React.createElement('div', {
+              className: '_4lga _4lgb',
+              style: {height: 25},
+            })
+          ),
+          React.createElement(TransitionCell142, {x: 450})
+        );
+      }
+      if (this.props.x === 454) {
+        return React.createElement(
+          'div',
+          {
+            className: '_4lg0 _4h2m',
+            style: {height: 25, width: 25, left: 1820},
+          },
+          undefined,
+          React.createElement(TransitionCell142, {x: 453})
+        );
+      }
+    }
+  }
+
+  class FixedDataTableCellGroupImpl144 extends React.Component {
+    render() {
+      if (this.props.x === 318) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3pzj',
+            style: {
+              height: 40,
+              position: 'absolute',
+              width: 721,
+              zIndex: 2,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          },
+          React.createElement(FixedDataTableCell143, {x: 317, key: 'cell_0'})
+        );
+      }
+      if (this.props.x === 332) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3pzj',
+            style: {
+              height: 40,
+              position: 'absolute',
+              width: 1845,
+              zIndex: 0,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          },
+          React.createElement(FixedDataTableCell143, {x: 322, key: 'cell_0'}),
+          React.createElement(FixedDataTableCell143, {x: 325, key: 'cell_1'}),
+          React.createElement(FixedDataTableCell143, {x: 328, key: 'cell_2'}),
+          React.createElement(FixedDataTableCell143, {x: 331, key: 'cell_3'})
+        );
+      }
+      if (this.props.x === 367) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3pzj',
+            style: {
+              height: 25,
+              position: 'absolute',
+              width: 721,
+              zIndex: 2,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          },
+          React.createElement(FixedDataTableCell143, {x: 339, key: 'cell_0'}),
+          React.createElement(FixedDataTableCell143, {x: 344, key: 'cell_1'}),
+          React.createElement(FixedDataTableCell143, {x: 350, key: 'cell_2'}),
+          React.createElement(FixedDataTableCell143, {x: 356, key: 'cell_3'}),
+          React.createElement(FixedDataTableCell143, {x: 361, key: 'cell_4'}),
+          React.createElement(FixedDataTableCell143, {x: 366, key: 'cell_5'})
+        );
+      }
+      if (this.props.x === 455) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3pzj',
+            style: {
+              height: 25,
+              position: 'absolute',
+              width: 1845,
+              zIndex: 0,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          },
+          React.createElement(FixedDataTableCell143, {x: 373, key: 'cell_0'}),
+          React.createElement(FixedDataTableCell143, {x: 378, key: 'cell_1'}),
+          React.createElement(FixedDataTableCell143, {x: 383, key: 'cell_2'}),
+          React.createElement(FixedDataTableCell143, {x: 388, key: 'cell_3'}),
+          React.createElement(FixedDataTableCell143, {x: 393, key: 'cell_4'}),
+          React.createElement(FixedDataTableCell143, {x: 398, key: 'cell_5'}),
+          React.createElement(FixedDataTableCell143, {x: 403, key: 'cell_6'}),
+          React.createElement(FixedDataTableCell143, {x: 408, key: 'cell_7'}),
+          React.createElement(FixedDataTableCell143, {x: 413, key: 'cell_8'}),
+          React.createElement(FixedDataTableCell143, {x: 418, key: 'cell_9'}),
+          React.createElement(FixedDataTableCell143, {x: 423, key: 'cell_10'}),
+          React.createElement(FixedDataTableCell143, {x: 428, key: 'cell_11'}),
+          React.createElement(FixedDataTableCell143, {x: 433, key: 'cell_12'}),
+          React.createElement(FixedDataTableCell143, {x: 438, key: 'cell_13'}),
+          React.createElement(FixedDataTableCell143, {x: 443, key: 'cell_14'}),
+          React.createElement(FixedDataTableCell143, {x: 448, key: 'cell_15'}),
+          React.createElement(FixedDataTableCell143, {x: 451, key: 'cell_16'}),
+          React.createElement(FixedDataTableCell143, {x: 454, key: 'cell_17'})
+        );
+      }
+    }
+  }
+
+  class FixedDataTableCellGroup145 extends React.Component {
+    render() {
+      if (this.props.x === 319) {
+        return React.createElement(
+          'div',
+          {style: {height: 40, left: 0}, className: '_3pzk'},
+          React.createElement(FixedDataTableCellGroupImpl144, {x: 318})
+        );
+      }
+      if (this.props.x === 333) {
+        return React.createElement(
+          'div',
+          {style: {height: 40, left: 721}, className: '_3pzk'},
+          React.createElement(FixedDataTableCellGroupImpl144, {x: 332})
+        );
+      }
+      if (this.props.x === 368) {
+        return React.createElement(
+          'div',
+          {style: {height: 25, left: 0}, className: '_3pzk'},
+          React.createElement(FixedDataTableCellGroupImpl144, {x: 367})
+        );
+      }
+      if (this.props.x === 456) {
+        return React.createElement(
+          'div',
+          {style: {height: 25, left: 721}, className: '_3pzk'},
+          React.createElement(FixedDataTableCellGroupImpl144, {x: 455})
+        );
+      }
+    }
+  }
+
+  class FixedDataTableRowImpl146 extends React.Component {
+    render() {
+      if (this.props.x === 334) {
+        return React.createElement(
+          'div',
+          {
+            className: '_1gd4 _4li _52no _3h1a _1mib',
+            onClick: null,
+            onDoubleClick: null,
+            onMouseDown: null,
+            onMouseEnter: null,
+            onMouseLeave: null,
+            style: {width: 1209, height: 40},
+          },
+          React.createElement(
+            'div',
+            {className: '_1gd5'},
+            React.createElement(FixedDataTableCellGroup145, {
+              x: 319,
+              key: 'fixed_cells',
+            }),
+            React.createElement(FixedDataTableCellGroup145, {
+              x: 333,
+              key: 'scrollable_cells',
+            }),
+            React.createElement('div', {
+              className: '_1gd6 _1gd8',
+              style: {left: 721, height: 40},
+            })
+          )
+        );
+      }
+      if (this.props.x === 457) {
+        return React.createElement(
+          'div',
+          {
+            className: '_1gd4 _4li _3h1a _1mib',
+            onClick: null,
+            onDoubleClick: null,
+            onMouseDown: null,
+            onMouseEnter: null,
+            onMouseLeave: null,
+            style: {width: 1209, height: 25},
+          },
+          React.createElement(
+            'div',
+            {className: '_1gd5'},
+            React.createElement(FixedDataTableCellGroup145, {
+              x: 368,
+              key: 'fixed_cells',
+            }),
+            React.createElement(FixedDataTableCellGroup145, {
+              x: 456,
+              key: 'scrollable_cells',
+            }),
+            React.createElement('div', {
+              className: '_1gd6 _1gd8',
+              style: {left: 721, height: 25},
+            })
+          )
+        );
+      }
+    }
+  }
+
+  class FixedDataTableRow147 extends React.Component {
+    render() {
+      if (this.props.x === 335) {
+        return React.createElement(
+          'div',
+          {
+            style: {
+              width: 1209,
+              height: 40,
+              zIndex: 1,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+            className: '_1gda',
+          },
+          React.createElement(FixedDataTableRowImpl146, {x: 334})
+        );
+      }
+      if (this.props.x === 458) {
+        return React.createElement(
+          'div',
+          {
+            style: {
+              width: 1209,
+              height: 25,
+              zIndex: 1,
+              transform: 'translate3d(0px,40px,0)',
+              backfaceVisibility: 'hidden',
+            },
+            className: '_1gda',
+          },
+          React.createElement(FixedDataTableRowImpl146, {x: 457})
+        );
+      }
+    }
+  }
+
+  class FixedDataTableAbstractSortableHeader148 extends React.Component {
+    render() {
+      if (this.props.x === 341) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 340})
+          )
+        );
+      }
+      if (this.props.x === 347) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _1kst _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 346})
+          )
+        );
+      }
+      if (this.props.x === 353) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _1kst _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 352})
+          )
+        );
+      }
+      if (this.props.x === 358) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 357})
+          )
+        );
+      }
+      if (this.props.x === 363) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _54_9 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 362})
+          )
+        );
+      }
+      if (this.props.x === 370) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 369})
+          )
+        );
+      }
+      if (this.props.x === 375) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 374})
+          )
+        );
+      }
+      if (this.props.x === 380) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 379})
+          )
+        );
+      }
+      if (this.props.x === 385) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 384})
+          )
+        );
+      }
+      if (this.props.x === 390) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 389})
+          )
+        );
+      }
+      if (this.props.x === 395) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 394})
+          )
+        );
+      }
+      if (this.props.x === 400) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 399})
+          )
+        );
+      }
+      if (this.props.x === 405) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 404})
+          )
+        );
+      }
+      if (this.props.x === 410) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 409})
+          )
+        );
+      }
+      if (this.props.x === 415) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 414})
+          )
+        );
+      }
+      if (this.props.x === 420) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 419})
+          )
+        );
+      }
+      if (this.props.x === 425) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 424})
+          )
+        );
+      }
+      if (this.props.x === 430) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 429})
+          )
+        );
+      }
+      if (this.props.x === 435) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 434})
+          )
+        );
+      }
+      if (this.props.x === 440) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 439})
+          )
+        );
+      }
+      if (this.props.x === 445) {
+        return React.createElement(
+          'div',
+          {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+          React.createElement(
+            'div',
+            {className: '_2eq6'},
+            null,
+            React.createElement(AdsPETableHeader141, {x: 444})
+          )
+        );
+      }
+    }
+  }
+
+  class FixedDataTableSortableHeader149 extends React.Component {
+    render() {
+      if (this.props.x === 342) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 341,
+        });
+      }
+      if (this.props.x === 348) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 347,
+        });
+      }
+      if (this.props.x === 354) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 353,
+        });
+      }
+      if (this.props.x === 359) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 358,
+        });
+      }
+      if (this.props.x === 364) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 363,
+        });
+      }
+      if (this.props.x === 371) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 370,
+        });
+      }
+      if (this.props.x === 376) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 375,
+        });
+      }
+      if (this.props.x === 381) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 380,
+        });
+      }
+      if (this.props.x === 386) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 385,
+        });
+      }
+      if (this.props.x === 391) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 390,
+        });
+      }
+      if (this.props.x === 396) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 395,
+        });
+      }
+      if (this.props.x === 401) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 400,
+        });
+      }
+      if (this.props.x === 406) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 405,
+        });
+      }
+      if (this.props.x === 411) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 410,
+        });
+      }
+      if (this.props.x === 416) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 415,
+        });
+      }
+      if (this.props.x === 421) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 420,
+        });
+      }
+      if (this.props.x === 426) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 425,
+        });
+      }
+      if (this.props.x === 431) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 430,
+        });
+      }
+      if (this.props.x === 436) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 435,
+        });
+      }
+      if (this.props.x === 441) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 440,
+        });
+      }
+      if (this.props.x === 446) {
+        return React.createElement(FixedDataTableAbstractSortableHeader148, {
+          x: 445,
+        });
+      }
+    }
+  }
+
+  class FixedDataTableBufferedRows150 extends React.Component {
+    render() {
+      if (this.props.x === 459) {
+        return React.createElement('div', {
+          style: {
+            position: 'absolute',
+            pointerEvents: 'auto',
+            transform: 'translate3d(0px,65px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        });
+      }
+    }
+  }
+
+  class Scrollbar151 extends React.Component {
+    render() {
+      if (this.props.x === 460) {
+        return null;
+      }
+      if (this.props.x === 461) {
+        return React.createElement(
+          'div',
+          {
+            onFocus: function () {},
+            onBlur: function () {},
+            onKeyDown: function () {},
+            onMouseDown: function () {},
+            onWheel: function () {},
+            className: '_1t0r _1t0t _4jdr _1t0u',
+            style: {width: 1209, zIndex: 99},
+            tabIndex: 0,
+          },
+          React.createElement('div', {
+            className: '_1t0w _1t0y _1t0_',
+            style: {
+              width: 561.6340607950117,
+              transform: 'translate3d(4px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          })
+        );
+      }
+    }
+  }
+
+  class HorizontalScrollbar152 extends React.Component {
+    render() {
+      if (this.props.x === 462) {
+        return React.createElement(
+          'div',
+          {className: '_3h1k _3h1m', style: {height: 15, width: 1209}},
+          React.createElement(
+            'div',
+            {
+              style: {
+                height: 15,
+                position: 'absolute',
+                overflow: 'hidden',
+                width: 1209,
+                transform: 'translate3d(0px,0px,0)',
+                backfaceVisibility: 'hidden',
+              },
+            },
+            React.createElement(Scrollbar151, {x: 461})
+          )
+        );
+      }
+    }
+  }
+
+  class FixedDataTable153 extends React.Component {
+    render() {
+      if (this.props.x === 463) {
+        return React.createElement(
+          'div',
+          {
+            className: '_3h1i _1mie',
+            onWheel: function () {},
+            style: {height: 25, width: 1209},
+          },
+          React.createElement(
+            'div',
+            {className: '_3h1j', style: {height: 8, width: 1209}},
+            React.createElement(FixedDataTableColumnResizeHandle140, {x: 313}),
+            React.createElement(FixedDataTableRow147, {
+              x: 335,
+              key: 'group_header',
+            }),
+            React.createElement(FixedDataTableRow147, {x: 458, key: 'header'}),
+            React.createElement(FixedDataTableBufferedRows150, {x: 459}),
+            null,
+            undefined,
+            React.createElement('div', {
+              className: '_3h1e _3h1h',
+              style: {top: 8},
+            })
+          ),
+          React.createElement(Scrollbar151, {x: 460}),
+          React.createElement(HorizontalScrollbar152, {x: 462})
+        );
+      }
+    }
+  }
+
+  class TransitionTable154 extends React.Component {
+    render() {
+      if (this.props.x === 464) {
+        return React.createElement(FixedDataTable153, {x: 463});
+      }
+    }
+  }
+
+  class AdsSelectableFixedDataTable155 extends React.Component {
+    render() {
+      if (this.props.x === 465) {
+        return React.createElement(
+          'div',
+          {className: '_5hht'},
+          React.createElement(TransitionTable154, {x: 464})
+        );
+      }
+    }
+  }
+
+  class AdsDataTableKeyboardSupportDecorator156 extends React.Component {
+    render() {
+      if (this.props.x === 466) {
+        return React.createElement(
+          'div',
+          {className: '_5d6f', tabIndex: '0', onKeyDown: function () {}},
+          React.createElement(AdsSelectableFixedDataTable155, {x: 465})
+        );
+      }
+    }
+  }
+
+  class AdsEditableDataTableDecorator157 extends React.Component {
+    render() {
+      if (this.props.x === 467) {
+        return React.createElement(
+          'div',
+          {onCopy: function () {}},
+          React.createElement(AdsDataTableKeyboardSupportDecorator156, {x: 466})
+        );
+      }
+    }
+  }
+
+  class AdsPEDataTableContainer158 extends React.Component {
+    render() {
+      if (this.props.x === 468) {
+        return React.createElement(
+          'div',
+          {className: '_35l_ _1hr clearfix'},
+          null,
+          null,
+          null,
+          React.createElement(AdsEditableDataTableDecorator157, {x: 467})
+        );
+      }
+    }
+  }
+
+  class AdsPECampaignGroupTableContainer159 extends React.Component {
+    render() {
+      if (this.props.x === 470) {
+        return React.createElement(ResponsiveBlock37, {x: 469});
+      }
+    }
+  }
+
+  class AdsPEManageAdsPaneContainer160 extends React.Component {
+    render() {
+      if (this.props.x === 473) {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(AdsErrorBoundary10, {x: 65}),
+          React.createElement(
+            'div',
+            {className: '_2uty'},
+            React.createElement(AdsErrorBoundary10, {x: 125})
+          ),
+          React.createElement(
+            'div',
+            {className: '_2utx _21oc'},
+            React.createElement(AdsErrorBoundary10, {x: 171}),
+            React.createElement(
+              'div',
+              {className: '_41tu'},
+              React.createElement(AdsErrorBoundary10, {x: 176}),
+              React.createElement(AdsErrorBoundary10, {x: 194})
+            )
+          ),
+          React.createElement(
+            'div',
+            {className: '_2utz', style: {height: 25}},
+            React.createElement(AdsErrorBoundary10, {x: 302}),
+            React.createElement(
+              'div',
+              {className: '_2ut-'},
+              React.createElement(AdsErrorBoundary10, {x: 312})
+            ),
+            React.createElement(
+              'div',
+              {className: '_2ut_'},
+              React.createElement(AdsErrorBoundary10, {x: 472})
+            )
+          )
+        );
+      }
+    }
+  }
+
+  class AdsPEContentContainer161 extends React.Component {
+    render() {
+      if (this.props.x === 474) {
+        return React.createElement(AdsPEManageAdsPaneContainer160, {x: 473});
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEWorkspaceContainer_162 extends React.Component {
+    render() {
+      if (this.props.x === 477) {
+        return React.createElement(
+          'div',
+          {className: '_49wu', style: {height: 177, top: 43, width: 1306}},
+          React.createElement(ResponsiveBlock37, {x: 62, key: '0'}),
+          React.createElement(AdsErrorBoundary10, {x: 476, key: '1'}),
+          null
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsSessionExpiredDialogContainer_163 extends React.Component {
+    render() {
+      if (this.props.x === 478) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEUploadDialogLazyContainer_164 extends React.Component {
+    render() {
+      if (this.props.x === 479) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_DialogContainer_165 extends React.Component {
+    render() {
+      if (this.props.x === 480) {
+        return null;
+      }
+    }
+  }
+
+  class AdsBugReportContainer166 extends React.Component {
+    render() {
+      if (this.props.x === 481) {
+        return React.createElement('span', null);
+      }
+    }
+  }
+
+  class AdsPEAudienceSplittingDialog167 extends React.Component {
+    render() {
+      if (this.props.x === 482) {
+        return null;
+      }
+    }
+  }
+
+  class AdsPEAudienceSplittingDialogContainer168 extends React.Component {
+    render() {
+      if (this.props.x === 483) {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(AdsPEAudienceSplittingDialog167, {x: 482})
+        );
+      }
+    }
+  }
+
+  class FluxContainer_AdsRuleDialogBootloadContainer_169 extends React.Component {
+    render() {
+      if (this.props.x === 484) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPECFTrayContainer_170 extends React.Component {
+    render() {
+      if (this.props.x === 485) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEDeleteDraftContainer_171 extends React.Component {
+    render() {
+      if (this.props.x === 486) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEInitialDraftPublishDialogContainer_172 extends React.Component {
+    render() {
+      if (this.props.x === 487) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEReachFrequencyStatusTransitionDialogBootloadContainer_173 extends React.Component {
+    render() {
+      if (this.props.x === 488) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEPurgeArchiveDialogContainer_174 extends React.Component {
+    render() {
+      if (this.props.x === 489) {
+        return null;
+      }
+    }
+  }
+
+  class AdsPECreateDialogContainer175 extends React.Component {
+    render() {
+      if (this.props.x === 490) {
+        return React.createElement('span', null);
+      }
+    }
+  }
+
+  class FluxContainer_AdsPEModalStatusContainer_176 extends React.Component {
+    render() {
+      if (this.props.x === 491) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsBrowserExtensionErrorDialogContainer_177 extends React.Component {
+    render() {
+      if (this.props.x === 492) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPESortByErrorTipContainer_178 extends React.Component {
+    render() {
+      if (this.props.x === 493) {
+        return null;
+      }
+    }
+  }
+
+  class LeadDownloadDialogSelector179 extends React.Component {
+    render() {
+      if (this.props.x === 494) {
+        return null;
+      }
+    }
+  }
+
+  class FluxContainer_AdsPELeadDownloadDialogContainerClass_180 extends React.Component {
+    render() {
+      if (this.props.x === 495) {
+        return React.createElement(LeadDownloadDialogSelector179, {x: 494});
+      }
+    }
+  }
+
+  class AdsPEContainer181 extends React.Component {
+    render() {
+      if (this.props.x === 496) {
+        return React.createElement(
+          'div',
+          {id: 'ads_pe_container'},
+          React.createElement(FluxContainer_AdsPETopNavContainer_26, {x: 41}),
+          null,
+          React.createElement(FluxContainer_AdsPEWorkspaceContainer_162, {
+            x: 477,
+          }),
+          React.createElement(
+            FluxContainer_AdsSessionExpiredDialogContainer_163,
+            {x: 478}
+          ),
+          React.createElement(
+            FluxContainer_AdsPEUploadDialogLazyContainer_164,
+            {x: 479}
+          ),
+          React.createElement(FluxContainer_DialogContainer_165, {x: 480}),
+          React.createElement(AdsBugReportContainer166, {x: 481}),
+          React.createElement(AdsPEAudienceSplittingDialogContainer168, {
+            x: 483,
+          }),
+          React.createElement(
+            FluxContainer_AdsRuleDialogBootloadContainer_169,
+            {x: 484}
+          ),
+          React.createElement(FluxContainer_AdsPECFTrayContainer_170, {x: 485}),
+          React.createElement(
+            'span',
+            null,
+            React.createElement(FluxContainer_AdsPEDeleteDraftContainer_171, {
+              x: 486,
+            }),
+            React.createElement(
+              FluxContainer_AdsPEInitialDraftPublishDialogContainer_172,
+              {x: 487}
+            ),
+            React.createElement(
+              FluxContainer_AdsPEReachFrequencyStatusTransitionDialogBootloadContainer_173,
+              {x: 488}
+            )
+          ),
+          React.createElement(
+            FluxContainer_AdsPEPurgeArchiveDialogContainer_174,
+            {x: 489}
+          ),
+          React.createElement(AdsPECreateDialogContainer175, {x: 490}),
+          React.createElement(FluxContainer_AdsPEModalStatusContainer_176, {
+            x: 491,
+          }),
+          React.createElement(
+            FluxContainer_AdsBrowserExtensionErrorDialogContainer_177,
+            {x: 492}
+          ),
+          React.createElement(FluxContainer_AdsPESortByErrorTipContainer_178, {
+            x: 493,
+          }),
+          React.createElement(
+            FluxContainer_AdsPELeadDownloadDialogContainerClass_180,
+            {x: 495}
+          ),
+          React.createElement('div', {id: 'web_ads_guidance_tips'})
+        );
+      }
+    }
+  }
+
+  class Benchmark extends React.Component {
+    render() {
+      if (this.props.x === undefined) {
+        return React.createElement(AdsPEContainer181, {x: 496});
+      }
+    }
+  }
+
+  var app = document.getElementById('app');
+
+  window.render = function render() {
+    ReactDOM.render(React.createElement(Benchmark, null), app);
+  };
+})();
diff --git a/scripts/bench/benchmarks/pe-class-components/build.js b/scripts/bench/benchmarks/pe-class-components/build.js
new file mode 100644
index 00000000000..ffbd82637d2
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-class-components/build.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const {join} = require('path');
+
+async function build(reactPath, asyncCopyTo) {
+  // copy the UMD bundles
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react.production.js'),
+    join(__dirname, 'react.production.js')
+  );
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react-dom.production.js'),
+    join(__dirname, 'react-dom.production.js')
+  );
+}
+
+module.exports = build;
diff --git a/scripts/bench/benchmarks/pe-class-components/index.html b/scripts/bench/benchmarks/pe-class-components/index.html
new file mode 100644
index 00000000000..c2d44dcd00b
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-class-components/index.html
@@ -0,0 +1,32 @@
+<html>
+<body>
+    <div id="app"></div>
+    <script>
+      performance.mark('Load React');
+      performance.mark('Load React+ReactDOM');
+    </script>
+    <script src="react.production.min.js"></script>
+    <script>
+      performance.measure('Load React', 'Load React');
+    </script>
+    <script>
+      performance.mark('Load ReactDOM');
+    </script>
+    <script src="react-dom.production.min.js"></script>
+    <script>
+      performance.measure('Load ReactDOM', 'Load ReactDOM');
+      performance.measure('Load React+ReactDOM', 'Load React+ReactDOM');
+    </script>
+    <script src="benchmark.js"></script>
+    <script>
+      performance.mark('Initial Render');
+      render();
+      performance.measure('Initial Render', 'Initial Render');
+      requestAnimationFrame(() => {
+        performance.mark('Update Render');
+        render();
+        performance.measure('Update Render', 'Update Render');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/scripts/bench/benchmarks/pe-functional-components/benchmark.js b/scripts/bench/benchmarks/pe-functional-components/benchmark.js
new file mode 100644
index 00000000000..7365caefe73
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-functional-components/benchmark.js
@@ -0,0 +1,5179 @@
+(function () {
+  'use strict';
+
+  var ReactImage0 = function (props) {
+    if (props.x === 0) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (props.x === 15) {
+      return React.createElement('i', {
+        className: '_3ut_ img sp_i534r85sjIn sx_e8ac93',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 22) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_7b15bc',
+        src: null,
+      });
+    }
+    if (props.x === 29) {
+      return React.createElement('i', {
+        className: '_1m1s _4540 _p img sp_i534r85sjIn sx_f40b1c',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 42) {
+      return React.createElement(
+        'i',
+        {
+          alt: 'Warning',
+          className: '_585p img sp_i534r85sjIn sx_20273d',
+          src: null,
+        },
+        React.createElement('u', null, 'Warning')
+      );
+    }
+    if (props.x === 67) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_b5d079',
+        src: null,
+      });
+    }
+    if (props.x === 70) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_29f8c9',
+      });
+    }
+    if (props.x === 76) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_ef6a9c',
+        src: null,
+      });
+    }
+    if (props.x === 79) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_6f8c43',
+      });
+    }
+    if (props.x === 88) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_e94a2d',
+      });
+    }
+    if (props.x === 91) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_7ed7d4',
+      });
+    }
+    if (props.x === 94) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_930440',
+      });
+    }
+    if (props.x === 98) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_750c83',
+      });
+    }
+    if (props.x === 108) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_73c1bb',
+      });
+    }
+    if (props.x === 111) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_29f28d',
+      });
+    }
+    if (props.x === 126) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_91c59e',
+      });
+    }
+    if (props.x === 127) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (props.x === 134) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_c8eb75',
+      });
+    }
+    if (props.x === 135) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (props.x === 148) {
+      return React.createElement('i', {
+        className: '_3yz6 _5whs img sp_i534r85sjIn sx_896996',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 152) {
+      return React.createElement('i', {
+        className: '_5b5p _4gem img sp_i534r85sjIn sx_896996',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 153) {
+      return React.createElement('i', {
+        className: '_541d img sp_i534r85sjIn sx_2f396a',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 160) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_31d9b0',
+      });
+    }
+    if (props.x === 177) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_2c18b7',
+        src: null,
+      });
+    }
+    if (props.x === 186) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_0a681f',
+      });
+    }
+    if (props.x === 195) {
+      return React.createElement('i', {
+        className: '_1-lx img sp_OkER5ktbEyg sx_b369b4',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 198) {
+      return React.createElement('i', {
+        className: '_1-lx img sp_i534r85sjIn sx_96948e',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 237) {
+      return React.createElement('i', {
+        className: '_541d img sp_i534r85sjIn sx_2f396a',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 266) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (props.x === 314) {
+      return React.createElement('i', {
+        className: '_1cie _1cif img sp_i534r85sjIn sx_6e6820',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 345) {
+      return React.createElement('i', {
+        className: '_1cie img sp_i534r85sjIn sx_e896cf',
+        src: null,
+        alt: '',
+      });
+    }
+    if (props.x === 351) {
+      return React.createElement('i', {
+        className: '_1cie img sp_i534r85sjIn sx_38fed8',
+        src: null,
+        alt: '',
+      });
+    }
+  };
+
+  var AbstractLink1 = function (props) {
+    if (props.x === 1) {
+      return React.createElement(
+        'a',
+        {
+          className: '_387r _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+          style: {width: 250, maxWidth: '250px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '236px'}},
+          null,
+          React.createElement(
+            'span',
+            null,
+            React.createElement('span', {className: '_48u-'}, 'Account:'),
+            ' ',
+            'Dick Madanson (10149999073643408)'
+          )
+        ),
+        React.createElement(ReactImage0, {x: 0})
+      );
+    }
+    if (props.x === 43) {
+      return React.createElement(
+        'a',
+        {
+          className: '_585q _50zy _50-0 _50z- _5upp _42ft',
+          size: 'medium',
+          type: null,
+          title: 'Remove',
+          'data-hover': undefined,
+          'data-tooltip-alignh': undefined,
+          'data-tooltip-content': undefined,
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        undefined,
+        'Remove',
+        undefined
+      );
+    }
+    if (props.x === 49) {
+      return React.createElement(
+        'a',
+        {
+          target: '_blank',
+          href: '/ads/manage/billing.php?act=10149999073643408',
+          rel: undefined,
+          onClick: function () {},
+        },
+        React.createElement(XUIText29, {x: 48})
+      );
+    }
+    if (props.x === 128) {
+      return React.createElement(
+        'a',
+        {
+          className: ' _5bbf _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+          style: {maxWidth: '200px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '186px'}},
+          React.createElement(ReactImage0, {x: 126}),
+          'Search'
+        ),
+        React.createElement(ReactImage0, {x: 127})
+      );
+    }
+    if (props.x === 136) {
+      return React.createElement(
+        'a',
+        {
+          className: ' _5bbf _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+          style: {maxWidth: '200px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '186px'}},
+          React.createElement(ReactImage0, {x: 134}),
+          'Filters'
+        ),
+        React.createElement(ReactImage0, {x: 135})
+      );
+    }
+    if (props.x === 178) {
+      return React.createElement(
+        'a',
+        {
+          className: '_1_-t _1_-v _42ft',
+          disabled: null,
+          height: 'medium',
+          role: 'button',
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        undefined,
+        'Lifetime',
+        React.createElement(ReactImage0, {x: 177})
+      );
+    }
+    if (props.x === 207) {
+      return React.createElement(
+        'a',
+        {href: '#', rel: undefined, onClick: function () {}},
+        'Create Ad Set'
+      );
+    }
+    if (props.x === 209) {
+      return React.createElement(
+        'a',
+        {href: '#', rel: undefined, onClick: function () {}},
+        'View Ad Set'
+      );
+    }
+    if (props.x === 241) {
+      return React.createElement(
+        'a',
+        {href: '#', rel: undefined, onClick: function () {}},
+        'Set a Limit'
+      );
+    }
+    if (props.x === 267) {
+      return React.createElement(
+        'a',
+        {
+          className: '_p _55pi _2agf _4jy0 _4jy3 _517h _51sy _42ft',
+          style: {maxWidth: '200px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '186px'}},
+          null,
+          'Links'
+        ),
+        React.createElement(ReactImage0, {x: 266})
+      );
+    }
+  };
+
+  var Link2 = function (props) {
+    if (props.x === 2) {
+      return React.createElement(AbstractLink1, {x: 1});
+    }
+    if (props.x === 44) {
+      return React.createElement(AbstractLink1, {x: 43});
+    }
+    if (props.x === 50) {
+      return React.createElement(AbstractLink1, {x: 49});
+    }
+    if (props.x === 129) {
+      return React.createElement(AbstractLink1, {x: 128});
+    }
+    if (props.x === 137) {
+      return React.createElement(AbstractLink1, {x: 136});
+    }
+    if (props.x === 179) {
+      return React.createElement(AbstractLink1, {x: 178});
+    }
+    if (props.x === 208) {
+      return React.createElement(AbstractLink1, {x: 207});
+    }
+    if (props.x === 210) {
+      return React.createElement(AbstractLink1, {x: 209});
+    }
+    if (props.x === 242) {
+      return React.createElement(AbstractLink1, {x: 241});
+    }
+    if (props.x === 268) {
+      return React.createElement(AbstractLink1, {x: 267});
+    }
+  };
+
+  var AbstractButton3 = function (props) {
+    if (props.x === 3) {
+      return React.createElement(Link2, {x: 2});
+    }
+    if (props.x === 20) {
+      return React.createElement(
+        'button',
+        {
+          className: '_5n7z _4jy0 _4jy4 _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        'Discard Changes',
+        undefined
+      );
+    }
+    if (props.x === 23) {
+      return React.createElement(
+        'button',
+        {
+          className: '_5n7z _2yak _4lj- _4jy0 _4jy4 _517h _51sy _42ft _42fr',
+          disabled: true,
+          onClick: function () {},
+          'data-tooltip-content': 'You have no changes to publish',
+          'data-hover': 'tooltip',
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 22}),
+        'Review Changes',
+        undefined
+      );
+    }
+    if (props.x === 45) {
+      return React.createElement(Link2, {x: 44});
+    }
+    if (props.x === 68) {
+      return React.createElement(
+        'button',
+        {
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 67}),
+        'Create Campaign',
+        undefined
+      );
+    }
+    if (props.x === 71) {
+      return React.createElement(
+        'button',
+        {
+          className: '_u_k _3qx6 _p _4jy0 _4jy4 _517h _51sy _42ft',
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 70}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 77) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Edit',
+          'data-tooltip-content': 'Edit Campaigns (Ctrl+U)',
+          'data-hover': 'tooltip',
+          className: '_d2_ _u_k noMargin _4jy0 _4jy4 _517h _51sy _42ft',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 76}),
+        'Edit',
+        undefined
+      );
+    }
+    if (props.x === 80) {
+      return React.createElement(
+        'button',
+        {
+          className: '_u_k _3qx6 _p _4jy0 _4jy4 _517h _51sy _42ft',
+          disabled: false,
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 79}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 89) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Revert',
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft _42fr',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Revert',
+          disabled: true,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 88}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 92) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Delete',
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Delete',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 91}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 95) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Duplicate',
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Duplicate',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 94}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 99) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Export & Import',
+          className: '_u_k noMargin _p _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Export & Import',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 98}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 109) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Create Report',
+          className: '_u_k _5n7z _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Create Report',
+          disabled: false,
+          style: {boxSizing: 'border-box', height: '28px', width: '48px'},
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 108}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 112) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Campaign Tags',
+          className: ' _5uy7 _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Campaign Tags',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 111}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 130) {
+      return React.createElement(Link2, {x: 129});
+    }
+    if (props.x === 138) {
+      return React.createElement(Link2, {x: 137});
+    }
+    if (props.x === 149) {
+      return React.createElement(
+        'button',
+        {
+          className: '_3yz9 _1t-2 _50z- _50zy _50zz _50z- _5upp _42ft',
+          size: 'small',
+          onClick: function () {},
+          type: 'button',
+          title: 'Remove',
+          'data-hover': undefined,
+          'data-tooltip-alignh': undefined,
+          'data-tooltip-content': undefined,
+          label: null,
+        },
+        undefined,
+        'Remove',
+        undefined
+      );
+    }
+    if (props.x === 156) {
+      return React.createElement(
+        'button',
+        {
+          className: '_5b5u _5b5v _4jy0 _4jy3 _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        'Apply',
+        undefined
+      );
+    }
+    if (props.x === 161) {
+      return React.createElement(
+        'button',
+        {
+          className: '_1wdf _4jy0 _517i _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 160}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 180) {
+      return React.createElement(Link2, {x: 179});
+    }
+    if (props.x === 187) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'List Settings',
+          className: '_u_k _3c5o _1-r0 _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'List Settings',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        React.createElement(ReactImage0, {x: 186}),
+        undefined,
+        undefined
+      );
+    }
+    if (props.x === 269) {
+      return React.createElement(Link2, {x: 268});
+    }
+    if (props.x === 303) {
+      return React.createElement(
+        'button',
+        {
+          className: '_tm3 _tm6 _tm7 _4jy0 _4jy6 _517h _51sy _42ft',
+          'data-tooltip-position': 'right',
+          'data-tooltip-content': 'Campaigns',
+          'data-hover': 'tooltip',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('div', {className: '_tma'}),
+          React.createElement('div', {className: '_tm8'}),
+          React.createElement('div', {className: '_tm9'}, 1)
+        ),
+        undefined
+      );
+    }
+    if (props.x === 305) {
+      return React.createElement(
+        'button',
+        {
+          className: '_tm4 _tm6 _4jy0 _4jy6 _517h _51sy _42ft',
+          'data-tooltip-position': 'right',
+          'data-tooltip-content': 'Ad Sets',
+          'data-hover': 'tooltip',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('div', {className: '_tma'}),
+          React.createElement('div', {className: '_tm8'}),
+          React.createElement('div', {className: '_tm9'}, 1)
+        ),
+        undefined
+      );
+    }
+    if (props.x === 307) {
+      return React.createElement(
+        'button',
+        {
+          className: '_tm5 _tm6 _4jy0 _4jy6 _517h _51sy _42ft',
+          'data-tooltip-position': 'right',
+          'data-tooltip-content': 'Ads',
+          'data-hover': 'tooltip',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('div', {className: '_tma'}),
+          React.createElement('div', {className: '_tm8'}),
+          React.createElement('div', {className: '_tm9'}, 1)
+        ),
+        undefined
+      );
+    }
+  };
+
+  var XUIButton4 = function (props) {
+    if (props.x === 4) {
+      return React.createElement(AbstractButton3, {x: 3});
+    }
+    if (props.x === 21) {
+      return React.createElement(AbstractButton3, {x: 20});
+    }
+    if (props.x === 24) {
+      return React.createElement(AbstractButton3, {x: 23});
+    }
+    if (props.x === 69) {
+      return React.createElement(AbstractButton3, {x: 68});
+    }
+    if (props.x === 72) {
+      return React.createElement(AbstractButton3, {x: 71});
+    }
+    if (props.x === 78) {
+      return React.createElement(AbstractButton3, {x: 77});
+    }
+    if (props.x === 81) {
+      return React.createElement(AbstractButton3, {x: 80});
+    }
+    if (props.x === 90) {
+      return React.createElement(AbstractButton3, {x: 89});
+    }
+    if (props.x === 93) {
+      return React.createElement(AbstractButton3, {x: 92});
+    }
+    if (props.x === 96) {
+      return React.createElement(AbstractButton3, {x: 95});
+    }
+    if (props.x === 100) {
+      return React.createElement(AbstractButton3, {x: 99});
+    }
+    if (props.x === 110) {
+      return React.createElement(AbstractButton3, {x: 109});
+    }
+    if (props.x === 113) {
+      return React.createElement(AbstractButton3, {x: 112});
+    }
+    if (props.x === 131) {
+      return React.createElement(AbstractButton3, {x: 130});
+    }
+    if (props.x === 139) {
+      return React.createElement(AbstractButton3, {x: 138});
+    }
+    if (props.x === 157) {
+      return React.createElement(AbstractButton3, {x: 156});
+    }
+    if (props.x === 162) {
+      return React.createElement(AbstractButton3, {x: 161});
+    }
+    if (props.x === 188) {
+      return React.createElement(AbstractButton3, {x: 187});
+    }
+    if (props.x === 270) {
+      return React.createElement(AbstractButton3, {x: 269});
+    }
+    if (props.x === 304) {
+      return React.createElement(AbstractButton3, {x: 303});
+    }
+    if (props.x === 306) {
+      return React.createElement(AbstractButton3, {x: 305});
+    }
+    if (props.x === 308) {
+      return React.createElement(AbstractButton3, {x: 307});
+    }
+  };
+
+  var AbstractPopoverButton5 = function (props) {
+    if (props.x === 5) {
+      return React.createElement(XUIButton4, {x: 4});
+    }
+    if (props.x === 132) {
+      return React.createElement(XUIButton4, {x: 131});
+    }
+    if (props.x === 140) {
+      return React.createElement(XUIButton4, {x: 139});
+    }
+    if (props.x === 271) {
+      return React.createElement(XUIButton4, {x: 270});
+    }
+  };
+
+  var ReactXUIPopoverButton6 = function (props) {
+    if (props.x === 6) {
+      return React.createElement(AbstractPopoverButton5, {x: 5});
+    }
+    if (props.x === 133) {
+      return React.createElement(AbstractPopoverButton5, {x: 132});
+    }
+    if (props.x === 141) {
+      return React.createElement(AbstractPopoverButton5, {x: 140});
+    }
+    if (props.x === 272) {
+      return React.createElement(AbstractPopoverButton5, {x: 271});
+    }
+  };
+
+  var BIGAdAccountSelector7 = function (props) {
+    if (props.x === 7) {
+      return React.createElement(
+        'div',
+        null,
+        React.createElement(ReactXUIPopoverButton6, {x: 6}),
+        null
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEBIGAdAccountSelectorContainer_8 = function (props) {
+    if (props.x === 8) {
+      return React.createElement(BIGAdAccountSelector7, {x: 7});
+    }
+  };
+
+  var ErrorBoundary9 = function (props) {
+    if (props.x === 9) {
+      return React.createElement(
+        FluxContainer_AdsPEBIGAdAccountSelectorContainer_8,
+        {x: 8}
+      );
+    }
+    if (props.x === 13) {
+      return React.createElement(FluxContainer_AdsPENavigationBarContainer_12, {
+        x: 12,
+      });
+    }
+    if (props.x === 27) {
+      return React.createElement(FluxContainer_AdsPEPublishButtonContainer_18, {
+        x: 26,
+      });
+    }
+    if (props.x === 32) {
+      return React.createElement(ReactPopoverMenu20, {x: 31});
+    }
+    if (props.x === 38) {
+      return React.createElement(AdsPEResetDialog24, {x: 37});
+    }
+    if (props.x === 57) {
+      return React.createElement(FluxContainer_AdsPETopErrorContainer_35, {
+        x: 56,
+      });
+    }
+    if (props.x === 60) {
+      return React.createElement(FluxContainer_AdsGuidanceChannel_36, {x: 59});
+    }
+    if (props.x === 64) {
+      return React.createElement(FluxContainer_AdsBulkEditDialogContainer_38, {
+        x: 63,
+      });
+    }
+    if (props.x === 124) {
+      return React.createElement(AdsPECampaignGroupToolbarContainer57, {
+        x: 123,
+      });
+    }
+    if (props.x === 170) {
+      return React.createElement(AdsPEFilterContainer72, {x: 169});
+    }
+    if (props.x === 175) {
+      return React.createElement(AdsPETablePagerContainer75, {x: 174});
+    }
+    if (props.x === 193) {
+      return React.createElement(AdsPEStatRangeContainer81, {x: 192});
+    }
+    if (props.x === 301) {
+      return React.createElement(
+        FluxContainer_AdsPEMultiTabDrawerContainer_137,
+        {x: 300}
+      );
+    }
+    if (props.x === 311) {
+      return React.createElement(AdsPEOrganizerContainer139, {x: 310});
+    }
+    if (props.x === 471) {
+      return React.createElement(AdsPECampaignGroupTableContainer159, {x: 470});
+    }
+    if (props.x === 475) {
+      return React.createElement(AdsPEContentContainer161, {x: 474});
+    }
+  };
+
+  var AdsErrorBoundary10 = function (props) {
+    if (props.x === 10) {
+      return React.createElement(ErrorBoundary9, {x: 9});
+    }
+    if (props.x === 14) {
+      return React.createElement(ErrorBoundary9, {x: 13});
+    }
+    if (props.x === 28) {
+      return React.createElement(ErrorBoundary9, {x: 27});
+    }
+    if (props.x === 33) {
+      return React.createElement(ErrorBoundary9, {x: 32});
+    }
+    if (props.x === 39) {
+      return React.createElement(ErrorBoundary9, {x: 38});
+    }
+    if (props.x === 58) {
+      return React.createElement(ErrorBoundary9, {x: 57});
+    }
+    if (props.x === 61) {
+      return React.createElement(ErrorBoundary9, {x: 60});
+    }
+    if (props.x === 65) {
+      return React.createElement(ErrorBoundary9, {x: 64});
+    }
+    if (props.x === 125) {
+      return React.createElement(ErrorBoundary9, {x: 124});
+    }
+    if (props.x === 171) {
+      return React.createElement(ErrorBoundary9, {x: 170});
+    }
+    if (props.x === 176) {
+      return React.createElement(ErrorBoundary9, {x: 175});
+    }
+    if (props.x === 194) {
+      return React.createElement(ErrorBoundary9, {x: 193});
+    }
+    if (props.x === 302) {
+      return React.createElement(ErrorBoundary9, {x: 301});
+    }
+    if (props.x === 312) {
+      return React.createElement(ErrorBoundary9, {x: 311});
+    }
+    if (props.x === 472) {
+      return React.createElement(ErrorBoundary9, {x: 471});
+    }
+    if (props.x === 476) {
+      return React.createElement(ErrorBoundary9, {x: 475});
+    }
+  };
+
+  var AdsPENavigationBar11 = function (props) {
+    if (props.x === 11) {
+      return React.createElement('div', {className: '_4t_9'});
+    }
+  };
+
+  var FluxContainer_AdsPENavigationBarContainer_12 = function (props) {
+    if (props.x === 12) {
+      return React.createElement(AdsPENavigationBar11, {x: 11});
+    }
+  };
+
+  var AdsPEDraftSyncStatus13 = function (props) {
+    if (props.x === 16) {
+      return React.createElement(
+        'div',
+        {className: '_3ut-', onClick: function () {}},
+        React.createElement(
+          'span',
+          {className: '_3uu0'},
+          React.createElement(ReactImage0, {x: 15})
+        )
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEDraftSyncStatusContainer_14 = function (props) {
+    if (props.x === 17) {
+      return React.createElement(AdsPEDraftSyncStatus13, {x: 16});
+    }
+  };
+
+  var AdsPEDraftErrorsStatus15 = function (props) {
+    if (props.x === 18) {
+      return null;
+    }
+  };
+
+  var FluxContainer_viewFn_16 = function (props) {
+    if (props.x === 19) {
+      return React.createElement(AdsPEDraftErrorsStatus15, {x: 18});
+    }
+  };
+
+  var AdsPEPublishButton17 = function (props) {
+    if (props.x === 25) {
+      return React.createElement(
+        'div',
+        {className: '_5533'},
+        React.createElement(FluxContainer_AdsPEDraftSyncStatusContainer_14, {
+          x: 17,
+        }),
+        React.createElement(FluxContainer_viewFn_16, {x: 19}),
+        null,
+        React.createElement(XUIButton4, {x: 21, key: 'discard'}),
+        React.createElement(XUIButton4, {x: 24})
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEPublishButtonContainer_18 = function (props) {
+    if (props.x === 26) {
+      return React.createElement(AdsPEPublishButton17, {x: 25});
+    }
+  };
+
+  var InlineBlock19 = function (props) {
+    if (props.x === 30) {
+      return React.createElement(
+        'div',
+        {className: 'uiPopover _6a _6b', disabled: null},
+        React.createElement(ReactImage0, {x: 29, key: '.0'})
+      );
+    }
+    if (props.x === 73) {
+      return React.createElement(
+        'div',
+        {className: 'uiPopover _6a _6b', disabled: null},
+        React.createElement(XUIButton4, {x: 72, key: '.0'})
+      );
+    }
+    if (props.x === 82) {
+      return React.createElement(
+        'div',
+        {className: '_1nwm uiPopover _6a _6b', disabled: null},
+        React.createElement(XUIButton4, {x: 81, key: '.0'})
+      );
+    }
+    if (props.x === 101) {
+      return React.createElement(
+        'div',
+        {size: 'large', className: 'uiPopover _6a _6b', disabled: null},
+        React.createElement(XUIButton4, {x: 100, key: '.0'})
+      );
+    }
+    if (props.x === 273) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3-90 uiPopover _6a _6b',
+          style: {marginTop: 2},
+          disabled: null,
+        },
+        React.createElement(ReactXUIPopoverButton6, {x: 272, key: '.0'})
+      );
+    }
+  };
+
+  var ReactPopoverMenu20 = function (props) {
+    if (props.x === 31) {
+      return React.createElement(InlineBlock19, {x: 30});
+    }
+    if (props.x === 74) {
+      return React.createElement(InlineBlock19, {x: 73});
+    }
+    if (props.x === 83) {
+      return React.createElement(InlineBlock19, {x: 82});
+    }
+    if (props.x === 102) {
+      return React.createElement(InlineBlock19, {x: 101});
+    }
+    if (props.x === 274) {
+      return React.createElement(InlineBlock19, {x: 273});
+    }
+  };
+
+  var LeftRight21 = function (props) {
+    if (props.x === 34) {
+      return React.createElement(
+        'div',
+        {className: 'clearfix'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          React.createElement(
+            'div',
+            {className: '_34_j'},
+            React.createElement(
+              'div',
+              {className: '_34_k'},
+              React.createElement(AdsErrorBoundary10, {x: 10})
+            ),
+            React.createElement(
+              'div',
+              {className: '_2u-6'},
+              React.createElement(AdsErrorBoundary10, {x: 14})
+            )
+          )
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: '_ohf rfloat'},
+          React.createElement(
+            'div',
+            {className: '_34_m'},
+            React.createElement(
+              'div',
+              {key: '0', className: '_5ju2'},
+              React.createElement(AdsErrorBoundary10, {x: 28})
+            ),
+            React.createElement(
+              'div',
+              {key: '1', className: '_5ju2'},
+              React.createElement(AdsErrorBoundary10, {x: 33})
+            )
+          )
+        )
+      );
+    }
+    if (props.x === 232) {
+      return React.createElement(
+        'div',
+        {direction: 'left', className: 'clearfix'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          React.createElement(AdsLabeledField104, {x: 231})
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: ''},
+          React.createElement(
+            'div',
+            {className: '_42ef'},
+            React.createElement(
+              'div',
+              {className: '_2oc7'},
+              'Clicks to Website'
+            )
+          )
+        )
+      );
+    }
+    if (props.x === 235) {
+      return React.createElement(
+        'div',
+        {className: '_3-8x clearfix', direction: 'left'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          React.createElement(AdsLabeledField104, {x: 234})
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: ''},
+          React.createElement(
+            'div',
+            {className: '_42ef'},
+            React.createElement('div', {className: '_2oc7'}, 'Auction')
+          )
+        )
+      );
+    }
+    if (props.x === 245) {
+      return React.createElement(
+        'div',
+        {className: '_3-8y clearfix', direction: 'left'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          React.createElement(AdsLabeledField104, {x: 240})
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: ''},
+          React.createElement(
+            'div',
+            {className: '_42ef'},
+            React.createElement(
+              FluxContainer_AdsCampaignGroupSpendCapContainer_107,
+              {x: 244}
+            )
+          )
+        )
+      );
+    }
+    if (props.x === 277) {
+      return React.createElement(
+        'div',
+        {className: '_5dw9 _5dwa clearfix'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          React.createElement(XUICardHeaderTitle100, {x: 265, key: '.0'})
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: '_ohf rfloat'},
+          React.createElement(
+            FluxContainer_AdsPluginizedLinksMenuContainer_121,
+            {x: 276, key: '.1'}
+          )
+        )
+      );
+    }
+  };
+
+  var AdsUnifiedNavigationLocalNav22 = function (props) {
+    if (props.x === 35) {
+      return React.createElement(
+        'div',
+        {className: '_34_i'},
+        React.createElement(LeftRight21, {x: 34})
+      );
+    }
+  };
+
+  var XUIDialog23 = function (props) {
+    if (props.x === 36) {
+      return null;
+    }
+  };
+
+  var AdsPEResetDialog24 = function (props) {
+    if (props.x === 37) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(XUIDialog23, {x: 36, key: 'dialog/.0'})
+      );
+    }
+  };
+
+  var AdsPETopNav25 = function (props) {
+    if (props.x === 40) {
+      return React.createElement(
+        'div',
+        {style: {width: 1306}},
+        React.createElement(AdsUnifiedNavigationLocalNav22, {x: 35}),
+        React.createElement(AdsErrorBoundary10, {x: 39})
+      );
+    }
+  };
+
+  var FluxContainer_AdsPETopNavContainer_26 = function (props) {
+    if (props.x === 41) {
+      return React.createElement(AdsPETopNav25, {x: 40});
+    }
+  };
+
+  var XUIAbstractGlyphButton27 = function (props) {
+    if (props.x === 46) {
+      return React.createElement(AbstractButton3, {x: 45});
+    }
+    if (props.x === 150) {
+      return React.createElement(AbstractButton3, {x: 149});
+    }
+  };
+
+  var XUICloseButton28 = function (props) {
+    if (props.x === 47) {
+      return React.createElement(XUIAbstractGlyphButton27, {x: 46});
+    }
+    if (props.x === 151) {
+      return React.createElement(XUIAbstractGlyphButton27, {x: 150});
+    }
+  };
+
+  var XUIText29 = function (props) {
+    if (props.x === 48) {
+      return React.createElement(
+        'span',
+        {display: 'inline', className: ' _50f7'},
+        'Ads Manager'
+      );
+    }
+    if (props.x === 205) {
+      return React.createElement(
+        'span',
+        {className: '_2x9f  _50f5 _50f7', display: 'inline'},
+        'Editing Campaign'
+      );
+    }
+    if (props.x === 206) {
+      return React.createElement(
+        'span',
+        {display: 'inline', className: ' _50f5 _50f7'},
+        'Test Campaign'
+      );
+    }
+  };
+
+  var XUINotice30 = function (props) {
+    if (props.x === 51) {
+      return React.createElement(
+        'div',
+        {size: 'medium', className: '_585n _585o _2wdd'},
+        React.createElement(ReactImage0, {x: 42}),
+        React.createElement(XUICloseButton28, {x: 47}),
+        React.createElement(
+          'div',
+          {className: '_585r _2i-a _50f4'},
+          'Please go to ',
+          React.createElement(Link2, {x: 50}),
+          ' to set up a payment method for this ad account.'
+        )
+      );
+    }
+  };
+
+  var ReactCSSTransitionGroupChild31 = function (props) {
+    if (props.x === 52) {
+      return React.createElement(XUINotice30, {x: 51});
+    }
+  };
+
+  var ReactTransitionGroup32 = function (props) {
+    if (props.x === 53) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(ReactCSSTransitionGroupChild31, {x: 52, key: '.0'})
+      );
+    }
+  };
+
+  var ReactCSSTransitionGroup33 = function (props) {
+    if (props.x === 54) {
+      return React.createElement(ReactTransitionGroup32, {x: 53});
+    }
+  };
+
+  var AdsPETopError34 = function (props) {
+    if (props.x === 55) {
+      return React.createElement(
+        'div',
+        {className: '_2wdc'},
+        React.createElement(ReactCSSTransitionGroup33, {x: 54})
+      );
+    }
+  };
+
+  var FluxContainer_AdsPETopErrorContainer_35 = function (props) {
+    if (props.x === 56) {
+      return React.createElement(AdsPETopError34, {x: 55});
+    }
+  };
+
+  var FluxContainer_AdsGuidanceChannel_36 = function (props) {
+    if (props.x === 59) {
+      return null;
+    }
+  };
+
+  var ResponsiveBlock37 = function (props) {
+    if (props.x === 62) {
+      return React.createElement(
+        'div',
+        {className: '_4u-c'},
+        [
+          React.createElement(AdsErrorBoundary10, {x: 58, key: 1}),
+          React.createElement(AdsErrorBoundary10, {x: 61, key: 2}),
+        ],
+        React.createElement(
+          'div',
+          {key: 'sensor', className: '_4u-f'},
+          React.createElement('iframe', {
+            'aria-hidden': 'true',
+            className: '_1_xb',
+            tabIndex: '-1',
+          })
+        )
+      );
+    }
+    if (props.x === 469) {
+      return React.createElement(
+        'div',
+        {className: '_4u-c'},
+        React.createElement(AdsPEDataTableContainer158, {x: 468}),
+        React.createElement(
+          'div',
+          {key: 'sensor', className: '_4u-f'},
+          React.createElement('iframe', {
+            'aria-hidden': 'true',
+            className: '_1_xb',
+            tabIndex: '-1',
+          })
+        )
+      );
+    }
+  };
+
+  var FluxContainer_AdsBulkEditDialogContainer_38 = function (props) {
+    if (props.x === 63) {
+      return null;
+    }
+  };
+
+  var Column39 = function (props) {
+    if (props.x === 66) {
+      return React.createElement(
+        'div',
+        {className: '_4bl8 _4bl7'},
+        React.createElement(
+          'div',
+          {className: '_3c5f'},
+          null,
+          null,
+          React.createElement('div', {className: '_3c5i'}),
+          null
+        )
+      );
+    }
+  };
+
+  var XUIButtonGroup40 = function (props) {
+    if (props.x === 75) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        React.createElement(XUIButton4, {x: 69}),
+        React.createElement(ReactPopoverMenu20, {x: 74})
+      );
+    }
+    if (props.x === 84) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        React.createElement(XUIButton4, {x: 78, key: 'edit'}),
+        React.createElement(ReactPopoverMenu20, {x: 83, key: 'editMenu'})
+      );
+    }
+    if (props.x === 97) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        React.createElement(XUIButton4, {x: 90, key: 'revert'}),
+        React.createElement(XUIButton4, {x: 93, key: 'delete'}),
+        React.createElement(XUIButton4, {x: 96, key: 'duplicate'})
+      );
+    }
+    if (props.x === 117) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        React.createElement(AdsPEExportImportMenuContainer48, {x: 107}),
+        React.createElement(XUIButton4, {x: 110, key: 'createReport'}),
+        React.createElement(AdsPECampaignGroupTagContainer51, {
+          x: 116,
+          key: 'tags',
+        })
+      );
+    }
+  };
+
+  var AdsPEEditToolbarButton41 = function (props) {
+    if (props.x === 85) {
+      return React.createElement(XUIButtonGroup40, {x: 84});
+    }
+  };
+
+  var FluxContainer_AdsPEEditCampaignGroupToolbarButtonContainer_42 = function (
+    props
+  ) {
+    if (props.x === 86) {
+      return React.createElement(AdsPEEditToolbarButton41, {x: 85});
+    }
+  };
+
+  var FluxContainer_AdsPEEditToolbarButtonContainer_43 = function (props) {
+    if (props.x === 87) {
+      return React.createElement(
+        FluxContainer_AdsPEEditCampaignGroupToolbarButtonContainer_42,
+        {x: 86}
+      );
+    }
+  };
+
+  var AdsPEExportImportMenu44 = function (props) {
+    if (props.x === 103) {
+      return React.createElement(ReactPopoverMenu20, {x: 102, key: 'export'});
+    }
+  };
+
+  var FluxContainer_AdsPECustomizeExportContainer_45 = function (props) {
+    if (props.x === 104) {
+      return null;
+    }
+  };
+
+  var AdsPEExportAsTextDialog46 = function (props) {
+    if (props.x === 105) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEExportAsTextDialogContainer_47 = function (props) {
+    if (props.x === 106) {
+      return React.createElement(AdsPEExportAsTextDialog46, {x: 105});
+    }
+  };
+
+  var AdsPEExportImportMenuContainer48 = function (props) {
+    if (props.x === 107) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(AdsPEExportImportMenu44, {x: 103}),
+        React.createElement(FluxContainer_AdsPECustomizeExportContainer_45, {
+          x: 104,
+        }),
+        React.createElement(FluxContainer_AdsPEExportAsTextDialogContainer_47, {
+          x: 106,
+        }),
+        null,
+        null
+      );
+    }
+  };
+
+  var Constructor49 = function (props) {
+    if (props.x === 114) {
+      return null;
+    }
+    if (props.x === 142) {
+      return null;
+    }
+    if (props.x === 143) {
+      return null;
+    }
+    if (props.x === 183) {
+      return null;
+    }
+  };
+
+  var TagSelectorPopover50 = function (props) {
+    if (props.x === 115) {
+      return React.createElement(
+        'span',
+        {className: ' _3d6e'},
+        React.createElement(XUIButton4, {x: 113}),
+        React.createElement(Constructor49, {x: 114, key: 'layer'})
+      );
+    }
+  };
+
+  var AdsPECampaignGroupTagContainer51 = function (props) {
+    if (props.x === 116) {
+      return React.createElement(TagSelectorPopover50, {
+        x: 115,
+        key: '98010048849317',
+      });
+    }
+  };
+
+  var AdsRuleToolbarMenu52 = function (props) {
+    if (props.x === 118) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPERuleToolbarMenuContainer_53 = function (props) {
+    if (props.x === 119) {
+      return React.createElement(AdsRuleToolbarMenu52, {x: 118});
+    }
+  };
+
+  var FillColumn54 = function (props) {
+    if (props.x === 120) {
+      return React.createElement(
+        'div',
+        {className: '_4bl9'},
+        React.createElement(
+          'span',
+          {className: '_3c5e'},
+          React.createElement(
+            'span',
+            null,
+            React.createElement(XUIButtonGroup40, {x: 75}),
+            React.createElement(
+              FluxContainer_AdsPEEditToolbarButtonContainer_43,
+              {x: 87}
+            ),
+            null,
+            React.createElement(XUIButtonGroup40, {x: 97})
+          ),
+          React.createElement(XUIButtonGroup40, {x: 117}),
+          React.createElement(FluxContainer_AdsPERuleToolbarMenuContainer_53, {
+            x: 119,
+          })
+        )
+      );
+    }
+  };
+
+  var Layout55 = function (props) {
+    if (props.x === 121) {
+      return React.createElement(
+        'div',
+        {className: 'clearfix'},
+        React.createElement(Column39, {x: 66, key: '1'}),
+        React.createElement(FillColumn54, {x: 120, key: '0'})
+      );
+    }
+  };
+
+  var AdsPEMainPaneToolbar56 = function (props) {
+    if (props.x === 122) {
+      return React.createElement(
+        'div',
+        {className: '_3c5b clearfix'},
+        React.createElement(Layout55, {x: 121})
+      );
+    }
+  };
+
+  var AdsPECampaignGroupToolbarContainer57 = function (props) {
+    if (props.x === 123) {
+      return React.createElement(AdsPEMainPaneToolbar56, {x: 122});
+    }
+  };
+
+  var AdsPEFiltersPopover58 = function (props) {
+    if (props.x === 144) {
+      return React.createElement(
+        'span',
+        {className: '_5b-l  _5bbe'},
+        React.createElement(ReactXUIPopoverButton6, {x: 133}),
+        React.createElement(ReactXUIPopoverButton6, {x: 141}),
+        [
+          React.createElement(Constructor49, {x: 142, key: 'filterMenu/.0'}),
+          React.createElement(Constructor49, {x: 143, key: 'searchMenu/.0'}),
+        ]
+      );
+    }
+  };
+
+  var AbstractCheckboxInput59 = function (props) {
+    if (props.x === 145) {
+      return React.createElement(
+        'label',
+        {className: 'uiInputLabelInput _55sg _kv1'},
+        React.createElement('input', {
+          checked: true,
+          disabled: true,
+          name: 'filterUnpublished',
+          value: 'on',
+          onClick: function () {},
+          className: null,
+          id: 'js_input_label_21',
+          type: 'checkbox',
+        }),
+        React.createElement('span', {
+          'data-hover': null,
+          'data-tooltip-content': undefined,
+        })
+      );
+    }
+    if (props.x === 336) {
+      return React.createElement(
+        'label',
+        {className: '_4h2r _55sg _kv1'},
+        React.createElement('input', {
+          checked: undefined,
+          onChange: function () {},
+          className: null,
+          type: 'checkbox',
+        }),
+        React.createElement('span', {
+          'data-hover': null,
+          'data-tooltip-content': undefined,
+        })
+      );
+    }
+  };
+
+  var XUICheckboxInput60 = function (props) {
+    if (props.x === 146) {
+      return React.createElement(AbstractCheckboxInput59, {x: 145});
+    }
+    if (props.x === 337) {
+      return React.createElement(AbstractCheckboxInput59, {x: 336});
+    }
+  };
+
+  var InputLabel61 = function (props) {
+    if (props.x === 147) {
+      return React.createElement(
+        'div',
+        {display: 'block', className: 'uiInputLabel clearfix'},
+        React.createElement(XUICheckboxInput60, {x: 146}),
+        React.createElement(
+          'label',
+          {className: 'uiInputLabelLabel', htmlFor: 'js_input_label_21'},
+          'Always show new items'
+        )
+      );
+    }
+  };
+
+  var AdsPopoverLink62 = function (props) {
+    if (props.x === 154) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(
+          'span',
+          {
+            onMouseEnter: function () {},
+            onMouseLeave: function () {},
+            onMouseUp: undefined,
+          },
+          React.createElement('span', {className: '_3o_j'}),
+          React.createElement(ReactImage0, {x: 153})
+        ),
+        null
+      );
+    }
+    if (props.x === 238) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(
+          'span',
+          {
+            onMouseEnter: function () {},
+            onMouseLeave: function () {},
+            onMouseUp: undefined,
+          },
+          React.createElement('span', {className: '_3o_j'}),
+          React.createElement(ReactImage0, {x: 237})
+        ),
+        null
+      );
+    }
+  };
+
+  var AdsHelpLink63 = function (props) {
+    if (props.x === 155) {
+      return React.createElement(AdsPopoverLink62, {x: 154});
+    }
+    if (props.x === 239) {
+      return React.createElement(AdsPopoverLink62, {x: 238});
+    }
+  };
+
+  var BUIFilterTokenInput64 = function (props) {
+    if (props.x === 158) {
+      return React.createElement(
+        'div',
+        {className: '_5b5o _3yz3 _4cld'},
+        React.createElement(
+          'div',
+          {className: '_5b5t _2d2k'},
+          React.createElement(ReactImage0, {x: 152}),
+          React.createElement(
+            'div',
+            {className: '_5b5r'},
+            'Campaigns: (1)',
+            React.createElement(AdsHelpLink63, {x: 155})
+          )
+        ),
+        React.createElement(XUIButton4, {x: 157})
+      );
+    }
+  };
+
+  var BUIFilterToken65 = function (props) {
+    if (props.x === 159) {
+      return React.createElement(
+        'div',
+        {className: '_3yz1 _3yz2 _3dad'},
+        React.createElement(
+          'div',
+          {className: '_3yz4', 'aria-hidden': false},
+          React.createElement(
+            'div',
+            {onClick: function () {}, className: '_3yz5'},
+            React.createElement(ReactImage0, {x: 148}),
+            React.createElement('div', {className: '_3yz7'}, 'Campaigns:'),
+            React.createElement(
+              'div',
+              {
+                className: 'ellipsis _3yz8',
+                'data-hover': 'tooltip',
+                'data-tooltip-display': 'overflow',
+              },
+              '(1)'
+            )
+          ),
+          null,
+          React.createElement(XUICloseButton28, {x: 151})
+        ),
+        React.createElement(BUIFilterTokenInput64, {x: 158})
+      );
+    }
+  };
+
+  var BUIFilterTokenCreateButton66 = function (props) {
+    if (props.x === 163) {
+      return React.createElement(
+        'div',
+        {className: '_1tc'},
+        React.createElement(XUIButton4, {x: 162})
+      );
+    }
+  };
+
+  var BUIFilterTokenizer67 = function (props) {
+    if (props.x === 164) {
+      return React.createElement(
+        'div',
+        {className: '_5b-m  clearfix'},
+        undefined,
+        [],
+        React.createElement(BUIFilterToken65, {x: 159, key: 'token0'}),
+        React.createElement(BUIFilterTokenCreateButton66, {x: 163}),
+        null,
+        React.createElement('div', {className: '_49u3'})
+      );
+    }
+  };
+
+  var XUIAmbientNUX68 = function (props) {
+    if (props.x === 165) {
+      return null;
+    }
+    if (props.x === 189) {
+      return null;
+    }
+    if (props.x === 200) {
+      return null;
+    }
+  };
+
+  var XUIAmbientNUX69 = function (props) {
+    if (props.x === 166) {
+      return React.createElement(XUIAmbientNUX68, {x: 165});
+    }
+    if (props.x === 190) {
+      return React.createElement(XUIAmbientNUX68, {x: 189});
+    }
+    if (props.x === 201) {
+      return React.createElement(XUIAmbientNUX68, {x: 200});
+    }
+  };
+
+  var AdsPEAmbientNUXMegaphone70 = function (props) {
+    if (props.x === 167) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement('span', {}),
+        React.createElement(XUIAmbientNUX69, {x: 166, key: 'nux'})
+      );
+    }
+  };
+
+  var AdsPEFilters71 = function (props) {
+    if (props.x === 168) {
+      return React.createElement(
+        'div',
+        {className: '_4rw_'},
+        React.createElement(AdsPEFiltersPopover58, {x: 144}),
+        React.createElement(
+          'div',
+          {className: '_1eo'},
+          React.createElement(InputLabel61, {x: 147})
+        ),
+        React.createElement(BUIFilterTokenizer67, {x: 164}),
+        '',
+        React.createElement(AdsPEAmbientNUXMegaphone70, {x: 167})
+      );
+    }
+  };
+
+  var AdsPEFilterContainer72 = function (props) {
+    if (props.x === 169) {
+      return React.createElement(AdsPEFilters71, {x: 168});
+    }
+  };
+
+  var AdsPETablePager73 = function (props) {
+    if (props.x === 172) {
+      return null;
+    }
+  };
+
+  var AdsPECampaignGroupTablePagerContainer74 = function (props) {
+    if (props.x === 173) {
+      return React.createElement(AdsPETablePager73, {x: 172});
+    }
+  };
+
+  var AdsPETablePagerContainer75 = function (props) {
+    if (props.x === 174) {
+      return React.createElement(AdsPECampaignGroupTablePagerContainer74, {
+        x: 173,
+      });
+    }
+  };
+
+  var ReactXUIError76 = function (props) {
+    if (props.x === 181) {
+      return React.createElement(AbstractButton3, {x: 180});
+    }
+    if (props.x === 216) {
+      return React.createElement(
+        'div',
+        {className: '_40bf _2vl4 _1h18'},
+        null,
+        null,
+        React.createElement(
+          'div',
+          {className: '_2vl9 _1h1f', style: {backgroundColor: '#fff'}},
+          React.createElement(
+            'div',
+            {className: '_2vla _1h1g'},
+            React.createElement(
+              'div',
+              null,
+              null,
+              React.createElement('textarea', {
+                className: '_2vli _2vlj _1h26 _1h27',
+                dir: 'auto',
+                disabled: undefined,
+                id: undefined,
+                maxLength: null,
+                value: 'Test Campaign',
+                onBlur: function () {},
+                onChange: function () {},
+                onFocus: function () {},
+                onKeyDown: function () {},
+              }),
+              null
+            ),
+            React.createElement('div', {
+              'aria-hidden': 'true',
+              className: '_2vlk',
+            })
+          )
+        ),
+        null
+      );
+    }
+    if (props.x === 221) {
+      return React.createElement(XUICard94, {x: 220});
+    }
+    if (props.x === 250) {
+      return React.createElement(XUICard94, {x: 249});
+    }
+    if (props.x === 280) {
+      return React.createElement(XUICard94, {x: 279});
+    }
+  };
+
+  var BUIPopoverButton77 = function (props) {
+    if (props.x === 182) {
+      return React.createElement(ReactXUIError76, {x: 181});
+    }
+  };
+
+  var BUIDateRangePicker78 = function (props) {
+    if (props.x === 184) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(BUIPopoverButton77, {x: 182}),
+        [React.createElement(Constructor49, {x: 183, key: 'layer/.0'})]
+      );
+    }
+  };
+
+  var AdsPEStatsRangePicker79 = function (props) {
+    if (props.x === 185) {
+      return React.createElement(BUIDateRangePicker78, {x: 184});
+    }
+  };
+
+  var AdsPEStatRange80 = function (props) {
+    if (props.x === 191) {
+      return React.createElement(
+        'div',
+        {className: '_3c5k'},
+        React.createElement('span', {className: '_3c5j'}, 'Stats:'),
+        React.createElement(
+          'span',
+          {className: '_3c5l'},
+          React.createElement(AdsPEStatsRangePicker79, {x: 185}),
+          React.createElement(XUIButton4, {x: 188, key: 'settings'})
+        ),
+        [React.createElement(XUIAmbientNUX69, {x: 190, key: 'roasNUX/.0'})]
+      );
+    }
+  };
+
+  var AdsPEStatRangeContainer81 = function (props) {
+    if (props.x === 192) {
+      return React.createElement(AdsPEStatRange80, {x: 191});
+    }
+  };
+
+  var AdsPESideTrayTabButton82 = function (props) {
+    if (props.x === 196) {
+      return React.createElement(
+        'div',
+        {className: '_1-ly _59j9 _d9a', onClick: function () {}},
+        React.createElement(ReactImage0, {x: 195}),
+        React.createElement('div', {className: '_vf7'}),
+        React.createElement('div', {className: '_vf8'})
+      );
+    }
+    if (props.x === 199) {
+      return React.createElement(
+        'div',
+        {className: ' _1-lz _d9a', onClick: function () {}},
+        React.createElement(ReactImage0, {x: 198}),
+        React.createElement('div', {className: '_vf7'}),
+        React.createElement('div', {className: '_vf8'})
+      );
+    }
+    if (props.x === 203) {
+      return null;
+    }
+  };
+
+  var AdsPEEditorTrayTabButton83 = function (props) {
+    if (props.x === 197) {
+      return React.createElement(AdsPESideTrayTabButton82, {x: 196});
+    }
+  };
+
+  var AdsPEInsightsTrayTabButton84 = function (props) {
+    if (props.x === 202) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(AdsPESideTrayTabButton82, {x: 199}),
+        React.createElement(XUIAmbientNUX69, {x: 201, key: 'roasNUX'})
+      );
+    }
+  };
+
+  var AdsPENekoDebuggerTrayTabButton85 = function (props) {
+    if (props.x === 204) {
+      return React.createElement(AdsPESideTrayTabButton82, {x: 203});
+    }
+  };
+
+  var AdsPEEditorChildLink86 = function (props) {
+    if (props.x === 211) {
+      return React.createElement(
+        'div',
+        {className: '_3ywr'},
+        React.createElement(Link2, {x: 208}),
+        React.createElement('span', {className: '_3ywq'}, '|'),
+        React.createElement(Link2, {x: 210})
+      );
+    }
+  };
+
+  var AdsPEEditorChildLinkContainer87 = function (props) {
+    if (props.x === 212) {
+      return React.createElement(AdsPEEditorChildLink86, {x: 211});
+    }
+  };
+
+  var AdsPEHeaderSection88 = function (props) {
+    if (props.x === 213) {
+      return React.createElement(
+        'div',
+        {className: '_yke'},
+        React.createElement('div', {className: '_2x9d _pr-'}),
+        React.createElement(XUIText29, {x: 205}),
+        React.createElement(
+          'div',
+          {className: '_3a-a'},
+          React.createElement(
+            'div',
+            {className: '_3a-b'},
+            React.createElement(XUIText29, {x: 206})
+          )
+        ),
+        React.createElement(AdsPEEditorChildLinkContainer87, {x: 212})
+      );
+    }
+  };
+
+  var AdsPECampaignGroupHeaderSectionContainer89 = function (props) {
+    if (props.x === 214) {
+      return React.createElement(AdsPEHeaderSection88, {x: 213});
+    }
+  };
+
+  var AdsEditorLoadingErrors90 = function (props) {
+    if (props.x === 215) {
+      return null;
+    }
+  };
+
+  var AdsTextInput91 = function (props) {
+    if (props.x === 217) {
+      return React.createElement(ReactXUIError76, {x: 216});
+    }
+  };
+
+  var BUIFormElement92 = function (props) {
+    if (props.x === 218) {
+      return React.createElement(
+        'div',
+        {className: '_5521 clearfix'},
+        React.createElement(
+          'div',
+          {className: '_5522 _3w5q'},
+          React.createElement(
+            'label',
+            {
+              onClick: undefined,
+              htmlFor: '1467872040612:1961945894',
+              className: '_5523 _3w5r',
+            },
+            'Campaign Name',
+            null
+          )
+        ),
+        React.createElement(
+          'div',
+          {className: '_5527'},
+          React.createElement(
+            'div',
+            {className: '_5528'},
+            React.createElement(
+              'span',
+              {key: '.0', className: '_40bg', id: '1467872040612:1961945894'},
+              React.createElement(AdsTextInput91, {
+                x: 217,
+                key: 'nameEditor98010048849317',
+              }),
+              null
+            )
+          ),
+          null
+        )
+      );
+    }
+  };
+
+  var BUIForm93 = function (props) {
+    if (props.x === 219) {
+      return React.createElement(
+        'div',
+        {className: '_5ks1 _550r  _550t _550y _3w5n'},
+        React.createElement(BUIFormElement92, {x: 218, key: '.0'})
+      );
+    }
+  };
+
+  var XUICard94 = function (props) {
+    if (props.x === 220) {
+      return React.createElement(
+        'div',
+        {className: '_40bc _12k2 _4-u2  _4-u8'},
+        React.createElement(BUIForm93, {x: 219})
+      );
+    }
+    if (props.x === 249) {
+      return React.createElement(
+        'div',
+        {className: '_12k2 _4-u2  _4-u8'},
+        React.createElement(AdsCardHeader103, {x: 230}),
+        React.createElement(AdsCardSection108, {x: 248})
+      );
+    }
+    if (props.x === 279) {
+      return React.createElement(
+        'div',
+        {className: '_12k2 _4-u2  _4-u8'},
+        React.createElement(AdsCardLeftRightHeader122, {x: 278})
+      );
+    }
+  };
+
+  var AdsCard95 = function (props) {
+    if (props.x === 222) {
+      return React.createElement(ReactXUIError76, {x: 221});
+    }
+    if (props.x === 251) {
+      return React.createElement(ReactXUIError76, {x: 250});
+    }
+    if (props.x === 281) {
+      return React.createElement(ReactXUIError76, {x: 280});
+    }
+  };
+
+  var AdsEditorNameSection96 = function (props) {
+    if (props.x === 223) {
+      return React.createElement(AdsCard95, {x: 222});
+    }
+  };
+
+  var AdsCampaignGroupNameSectionContainer97 = function (props) {
+    if (props.x === 224) {
+      return React.createElement(AdsEditorNameSection96, {
+        x: 223,
+        key: 'nameSection98010048849317',
+      });
+    }
+  };
+
+  var _render98 = function (props) {
+    if (props.x === 225) {
+      return React.createElement(AdsCampaignGroupNameSectionContainer97, {
+        x: 224,
+      });
+    }
+  };
+
+  var AdsPluginWrapper99 = function (props) {
+    if (props.x === 226) {
+      return React.createElement(_render98, {x: 225});
+    }
+    if (props.x === 255) {
+      return React.createElement(_render111, {x: 254});
+    }
+    if (props.x === 258) {
+      return React.createElement(_render113, {x: 257});
+    }
+    if (props.x === 287) {
+      return React.createElement(_render127, {x: 286});
+    }
+    if (props.x === 291) {
+      return React.createElement(_render130, {x: 290});
+    }
+  };
+
+  var XUICardHeaderTitle100 = function (props) {
+    if (props.x === 227) {
+      return React.createElement(
+        'span',
+        {className: '_38my'},
+        'Campaign Details',
+        null,
+        React.createElement('span', {className: '_c1c'})
+      );
+    }
+    if (props.x === 265) {
+      return React.createElement(
+        'span',
+        {className: '_38my'},
+        [
+          React.createElement(
+            'span',
+            {key: 1},
+            'Campaign ID',
+            ': ',
+            '98010048849317'
+          ),
+          React.createElement(
+            'div',
+            {className: '_5lh9', key: 2},
+            React.createElement(
+              FluxContainer_AdsCampaignGroupStatusSwitchContainer_119,
+              {x: 264}
+            )
+          ),
+        ],
+        null,
+        React.createElement('span', {className: '_c1c'})
+      );
+    }
+  };
+
+  var XUICardSection101 = function (props) {
+    if (props.x === 228) {
+      return React.createElement(
+        'div',
+        {className: '_5dw9 _5dwa _4-u3'},
+        [React.createElement(XUICardHeaderTitle100, {x: 227, key: '.0'})],
+        undefined,
+        undefined,
+        React.createElement('div', {className: '_3s3-'})
+      );
+    }
+    if (props.x === 247) {
+      return React.createElement(
+        'div',
+        {className: '_12jy _4-u3'},
+        React.createElement(
+          'div',
+          {className: '_3-8j'},
+          React.createElement(FlexibleBlock105, {x: 233}),
+          React.createElement(FlexibleBlock105, {x: 236}),
+          React.createElement(FlexibleBlock105, {x: 246}),
+          null,
+          null
+        )
+      );
+    }
+  };
+
+  var XUICardHeader102 = function (props) {
+    if (props.x === 229) {
+      return React.createElement(XUICardSection101, {x: 228});
+    }
+  };
+
+  var AdsCardHeader103 = function (props) {
+    if (props.x === 230) {
+      return React.createElement(XUICardHeader102, {x: 229});
+    }
+  };
+
+  var AdsLabeledField104 = function (props) {
+    if (props.x === 231) {
+      return React.createElement(
+        'div',
+        {className: '_2oc6 _3bvz', label: 'Objective'},
+        React.createElement(
+          'label',
+          {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+          'Objective '
+        ),
+        null,
+        React.createElement('div', {className: '_3bv-'})
+      );
+    }
+    if (props.x === 234) {
+      return React.createElement(
+        'div',
+        {className: '_2oc6 _3bvz', label: 'Buying Type'},
+        React.createElement(
+          'label',
+          {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+          'Buying Type '
+        ),
+        null,
+        React.createElement('div', {className: '_3bv-'})
+      );
+    }
+    if (props.x === 240) {
+      return React.createElement(
+        'div',
+        {className: '_2oc6 _3bvz'},
+        React.createElement(
+          'label',
+          {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+          'Campaign Spending Limit '
+        ),
+        React.createElement(AdsHelpLink63, {x: 239}),
+        React.createElement('div', {className: '_3bv-'})
+      );
+    }
+  };
+
+  var FlexibleBlock105 = function (props) {
+    if (props.x === 233) {
+      return React.createElement(LeftRight21, {x: 232});
+    }
+    if (props.x === 236) {
+      return React.createElement(LeftRight21, {x: 235});
+    }
+    if (props.x === 246) {
+      return React.createElement(LeftRight21, {x: 245});
+    }
+  };
+
+  var AdsBulkCampaignSpendCapField106 = function (props) {
+    if (props.x === 243) {
+      return React.createElement(
+        'div',
+        {className: '_33dv'},
+        '',
+        React.createElement(Link2, {x: 242}),
+        ' (optional)'
+      );
+    }
+  };
+
+  var FluxContainer_AdsCampaignGroupSpendCapContainer_107 = function (props) {
+    if (props.x === 244) {
+      return React.createElement(AdsBulkCampaignSpendCapField106, {x: 243});
+    }
+  };
+
+  var AdsCardSection108 = function (props) {
+    if (props.x === 248) {
+      return React.createElement(XUICardSection101, {x: 247});
+    }
+  };
+
+  var AdsEditorCampaignGroupDetailsSection109 = function (props) {
+    if (props.x === 252) {
+      return React.createElement(AdsCard95, {x: 251});
+    }
+  };
+
+  var AdsEditorCampaignGroupDetailsSectionContainer110 = function (props) {
+    if (props.x === 253) {
+      return React.createElement(AdsEditorCampaignGroupDetailsSection109, {
+        x: 252,
+        key: 'campaignGroupDetailsSection98010048849317',
+      });
+    }
+  };
+
+  var _render111 = function (props) {
+    if (props.x === 254) {
+      return React.createElement(
+        AdsEditorCampaignGroupDetailsSectionContainer110,
+        {x: 253}
+      );
+    }
+  };
+
+  var FluxContainer_AdsEditorToplineDetailsSectionContainer_112 = function (
+    props
+  ) {
+    if (props.x === 256) {
+      return null;
+    }
+  };
+
+  var _render113 = function (props) {
+    if (props.x === 257) {
+      return React.createElement(
+        FluxContainer_AdsEditorToplineDetailsSectionContainer_112,
+        {x: 256}
+      );
+    }
+  };
+
+  var AdsStickyArea114 = function (props) {
+    if (props.x === 259) {
+      return React.createElement(
+        'div',
+        {},
+        React.createElement('div', {onWheel: function () {}})
+      );
+    }
+    if (props.x === 292) {
+      return React.createElement(
+        'div',
+        {},
+        React.createElement('div', {onWheel: function () {}}, [
+          React.createElement(
+            'div',
+            {key: 'campaign_group_errors_section98010048849317'},
+            React.createElement(AdsPluginWrapper99, {x: 291})
+          ),
+        ])
+      );
+    }
+  };
+
+  var FluxContainer_AdsEditorColumnContainer_115 = function (props) {
+    if (props.x === 260) {
+      return React.createElement(
+        'div',
+        null,
+        [
+          React.createElement(
+            'div',
+            {key: 'campaign_group_name_section98010048849317'},
+            React.createElement(AdsPluginWrapper99, {x: 226})
+          ),
+          React.createElement(
+            'div',
+            {key: 'campaign_group_basic_section98010048849317'},
+            React.createElement(AdsPluginWrapper99, {x: 255})
+          ),
+          React.createElement(
+            'div',
+            {key: 'campaign_group_topline_section98010048849317'},
+            React.createElement(AdsPluginWrapper99, {x: 258})
+          ),
+        ],
+        React.createElement(AdsStickyArea114, {x: 259})
+      );
+    }
+    if (props.x === 293) {
+      return React.createElement(
+        'div',
+        null,
+        [
+          React.createElement(
+            'div',
+            {key: 'campaign_group_navigation_section98010048849317'},
+            React.createElement(AdsPluginWrapper99, {x: 287})
+          ),
+        ],
+        React.createElement(AdsStickyArea114, {x: 292})
+      );
+    }
+  };
+
+  var BUISwitch116 = function (props) {
+    if (props.x === 261) {
+      return React.createElement(
+        'div',
+        {
+          'data-hover': 'tooltip',
+          'data-tooltip-content':
+            'Currently active. Click this switch to deactivate it.',
+          'data-tooltip-position': 'below',
+          disabled: false,
+          value: true,
+          onToggle: function () {},
+          className: '_128j _128k _128n',
+          role: 'checkbox',
+          'aria-checked': 'true',
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_128o',
+            onClick: function () {},
+            onKeyDown: function () {},
+            onMouseDown: function () {},
+            tabIndex: '0',
+          },
+          React.createElement('div', {className: '_128p'})
+        ),
+        null
+      );
+    }
+  };
+
+  var AdsStatusSwitchInternal117 = function (props) {
+    if (props.x === 262) {
+      return React.createElement(BUISwitch116, {x: 261});
+    }
+  };
+
+  var AdsStatusSwitch118 = function (props) {
+    if (props.x === 263) {
+      return React.createElement(AdsStatusSwitchInternal117, {x: 262});
+    }
+  };
+
+  var FluxContainer_AdsCampaignGroupStatusSwitchContainer_119 = function (
+    props
+  ) {
+    if (props.x === 264) {
+      return React.createElement(AdsStatusSwitch118, {
+        x: 263,
+        key: 'status98010048849317',
+      });
+    }
+  };
+
+  var AdsLinksMenu120 = function (props) {
+    if (props.x === 275) {
+      return React.createElement(ReactPopoverMenu20, {x: 274});
+    }
+  };
+
+  var FluxContainer_AdsPluginizedLinksMenuContainer_121 = function (props) {
+    if (props.x === 276) {
+      return React.createElement(
+        'div',
+        null,
+        null,
+        React.createElement(AdsLinksMenu120, {x: 275})
+      );
+    }
+  };
+
+  var AdsCardLeftRightHeader122 = function (props) {
+    if (props.x === 278) {
+      return React.createElement(LeftRight21, {x: 277});
+    }
+  };
+
+  var AdsPEIDSection123 = function (props) {
+    if (props.x === 282) {
+      return React.createElement(AdsCard95, {x: 281});
+    }
+  };
+
+  var FluxContainer_AdsPECampaignGroupIDSectionContainer_124 = function (
+    props
+  ) {
+    if (props.x === 283) {
+      return React.createElement(AdsPEIDSection123, {x: 282});
+    }
+  };
+
+  var DeferredComponent125 = function (props) {
+    if (props.x === 284) {
+      return React.createElement(
+        FluxContainer_AdsPECampaignGroupIDSectionContainer_124,
+        {x: 283}
+      );
+    }
+  };
+
+  var BootloadedComponent126 = function (props) {
+    if (props.x === 285) {
+      return React.createElement(DeferredComponent125, {x: 284});
+    }
+  };
+
+  var _render127 = function (props) {
+    if (props.x === 286) {
+      return React.createElement(BootloadedComponent126, {x: 285});
+    }
+  };
+
+  var AdsEditorErrorsCard128 = function (props) {
+    if (props.x === 288) {
+      return null;
+    }
+  };
+
+  var FluxContainer_FunctionalContainer_129 = function (props) {
+    if (props.x === 289) {
+      return React.createElement(AdsEditorErrorsCard128, {x: 288});
+    }
+  };
+
+  var _render130 = function (props) {
+    if (props.x === 290) {
+      return React.createElement(FluxContainer_FunctionalContainer_129, {
+        x: 289,
+      });
+    }
+  };
+
+  var AdsEditorMultiColumnLayout131 = function (props) {
+    if (props.x === 294) {
+      return React.createElement(
+        'div',
+        {className: '_psh'},
+        React.createElement(
+          'div',
+          {className: '_3cc0'},
+          React.createElement(
+            'div',
+            null,
+            React.createElement(AdsEditorLoadingErrors90, {x: 215, key: '.0'}),
+            React.createElement(
+              'div',
+              {className: '_3ms3'},
+              React.createElement(
+                'div',
+                {className: '_3ms4'},
+                React.createElement(
+                  FluxContainer_AdsEditorColumnContainer_115,
+                  {x: 260, key: '.1'}
+                )
+              ),
+              React.createElement(
+                'div',
+                {className: '_3pvg'},
+                React.createElement(
+                  FluxContainer_AdsEditorColumnContainer_115,
+                  {x: 293, key: '.2'}
+                )
+              )
+            )
+          )
+        )
+      );
+    }
+  };
+
+  var AdsPECampaignGroupEditor132 = function (props) {
+    if (props.x === 295) {
+      return React.createElement(
+        'div',
+        null,
+        React.createElement(AdsPECampaignGroupHeaderSectionContainer89, {
+          x: 214,
+        }),
+        React.createElement(AdsEditorMultiColumnLayout131, {x: 294})
+      );
+    }
+  };
+
+  var AdsPECampaignGroupEditorContainer133 = function (props) {
+    if (props.x === 296) {
+      return React.createElement(AdsPECampaignGroupEditor132, {x: 295});
+    }
+  };
+
+  var AdsPESideTrayTabContent134 = function (props) {
+    if (props.x === 297) {
+      return React.createElement(
+        'div',
+        {className: '_1o_8 _44ra _5cyn'},
+        React.createElement(AdsPECampaignGroupEditorContainer133, {x: 296})
+      );
+    }
+  };
+
+  var AdsPEEditorTrayTabContentContainer135 = function (props) {
+    if (props.x === 298) {
+      return React.createElement(AdsPESideTrayTabContent134, {x: 297});
+    }
+  };
+
+  var AdsPEMultiTabDrawer136 = function (props) {
+    if (props.x === 299) {
+      return React.createElement(
+        'div',
+        {className: '_2kev _2kex'},
+        React.createElement(
+          'div',
+          {className: '_5yno'},
+          React.createElement(AdsPEEditorTrayTabButton83, {
+            x: 197,
+            key: 'editor_tray_button',
+          }),
+          React.createElement(AdsPEInsightsTrayTabButton84, {
+            x: 202,
+            key: 'insights_tray_button',
+          }),
+          React.createElement(AdsPENekoDebuggerTrayTabButton85, {
+            x: 204,
+            key: 'neko_debugger_tray_button',
+          })
+        ),
+        React.createElement(
+          'div',
+          {className: '_5ynn'},
+          React.createElement(AdsPEEditorTrayTabContentContainer135, {
+            x: 298,
+            key: 'EDITOR_DRAWER',
+          }),
+          null
+        )
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEMultiTabDrawerContainer_137 = function (props) {
+    if (props.x === 300) {
+      return React.createElement(AdsPEMultiTabDrawer136, {x: 299});
+    }
+  };
+
+  var AdsPESimpleOrganizer138 = function (props) {
+    if (props.x === 309) {
+      return React.createElement(
+        'div',
+        {className: '_tm2'},
+        React.createElement(XUIButton4, {x: 304}),
+        React.createElement(XUIButton4, {x: 306}),
+        React.createElement(XUIButton4, {x: 308})
+      );
+    }
+  };
+
+  var AdsPEOrganizerContainer139 = function (props) {
+    if (props.x === 310) {
+      return React.createElement(
+        'div',
+        null,
+        React.createElement(AdsPESimpleOrganizer138, {x: 309})
+      );
+    }
+  };
+
+  var FixedDataTableColumnResizeHandle140 = function (props) {
+    if (props.x === 313) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3487 _3488 _3489',
+          style: {width: 0, height: 25, left: 0},
+        },
+        React.createElement('div', {className: '_348a', style: {height: 25}})
+      );
+    }
+  };
+
+  var AdsPETableHeader141 = function (props) {
+    if (props.x === 315) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1ksv _1vd7 _4h2r', id: undefined},
+        React.createElement(ReactImage0, {x: 314}),
+        React.createElement('span', {className: '_1cid'}, 'Campaigns')
+      );
+    }
+    if (props.x === 320) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1vd7 _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Performance')
+      );
+    }
+    if (props.x === 323) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1vd7 _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Overview')
+      );
+    }
+    if (props.x === 326) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1vd7 _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Toplines')
+      );
+    }
+    if (props.x === 329) {
+      return React.createElement('div', {
+        className: '_1cig _1vd7 _4h2r',
+        id: undefined,
+      });
+    }
+    if (props.x === 340) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Campaign Name')
+      );
+    }
+    if (props.x === 346) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1cig _25fg',
+          id: undefined,
+          'data-tooltip-content': 'Changed',
+          'data-hover': 'tooltip',
+        },
+        React.createElement(ReactImage0, {x: 345}),
+        null
+      );
+    }
+    if (props.x === 352) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1cig _25fg',
+          id: 'ads_pe_table_error_header',
+          'data-tooltip-content': 'Errors',
+          'data-hover': 'tooltip',
+        },
+        React.createElement(ReactImage0, {x: 351}),
+        null
+      );
+    }
+    if (props.x === 357) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Status')
+      );
+    }
+    if (props.x === 362) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Delivery')
+      );
+    }
+    if (props.x === 369) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Results')
+      );
+    }
+    if (props.x === 374) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Cost')
+      );
+    }
+    if (props.x === 379) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Reach')
+      );
+    }
+    if (props.x === 384) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Impressions')
+      );
+    }
+    if (props.x === 389) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Clicks')
+      );
+    }
+    if (props.x === 394) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Avg. CPM')
+      );
+    }
+    if (props.x === 399) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Avg. CPC')
+      );
+    }
+    if (props.x === 404) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'CTR %')
+      );
+    }
+    if (props.x === 409) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Spent')
+      );
+    }
+    if (props.x === 414) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Objective')
+      );
+    }
+    if (props.x === 419) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Buying Type')
+      );
+    }
+    if (props.x === 424) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Campaign ID')
+      );
+    }
+    if (props.x === 429) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Start')
+      );
+    }
+    if (props.x === 434) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'End')
+      );
+    }
+    if (props.x === 439) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Date created')
+      );
+    }
+    if (props.x === 444) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Date last edited')
+      );
+    }
+    if (props.x === 449) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Tags')
+      );
+    }
+    if (props.x === 452) {
+      return React.createElement('div', {
+        className: '_1cig _25fg _4h2r',
+        id: undefined,
+      });
+    }
+  };
+
+  var TransitionCell142 = function (props) {
+    if (props.x === 316) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Campaigns',
+          height: 40,
+          width: 721,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 721},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 315})
+          )
+        )
+      );
+    }
+    if (props.x === 321) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Performance',
+          height: 40,
+          width: 798,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 798},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 320})
+          )
+        )
+      );
+    }
+    if (props.x === 324) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Overview',
+          height: 40,
+          width: 1022,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 1022},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 323})
+          )
+        )
+      );
+    }
+    if (props.x === 327) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Toplines',
+          height: 40,
+          width: 0,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 0},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 326})
+          )
+        )
+      );
+    }
+    if (props.x === 330) {
+      return React.createElement(
+        'div',
+        {
+          label: '',
+          height: 40,
+          width: 25,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 25},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 329})
+          )
+        )
+      );
+    }
+    if (props.x === 338) {
+      return React.createElement(
+        'div',
+        {
+          label: undefined,
+          width: 42,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 42},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(XUICheckboxInput60, {x: 337})
+          )
+        )
+      );
+    }
+    if (props.x === 343) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Campaign Name',
+          width: 400,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 400},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 342})
+          )
+        )
+      );
+    }
+    if (props.x === 349) {
+      return React.createElement(
+        'div',
+        {
+          label: undefined,
+          width: 33,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 33},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 348})
+          )
+        )
+      );
+    }
+    if (props.x === 355) {
+      return React.createElement(
+        'div',
+        {
+          label: undefined,
+          width: 36,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 36},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 354})
+          )
+        )
+      );
+    }
+    if (props.x === 360) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Status',
+          width: 60,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 60},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 359})
+          )
+        )
+      );
+    }
+    if (props.x === 365) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Delivery',
+          width: 150,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 150},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 364})
+          )
+        )
+      );
+    }
+    if (props.x === 372) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Results',
+          width: 140,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 140},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 371})
+          )
+        )
+      );
+    }
+    if (props.x === 377) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Cost',
+          width: 140,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 140},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 376})
+          )
+        )
+      );
+    }
+    if (props.x === 382) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Reach',
+          width: 80,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 80},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 381})
+          )
+        )
+      );
+    }
+    if (props.x === 387) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Impressions',
+          width: 80,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 80},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 386})
+          )
+        )
+      );
+    }
+    if (props.x === 392) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Clicks',
+          width: 60,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 60},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 391})
+          )
+        )
+      );
+    }
+    if (props.x === 397) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Avg. CPM',
+          width: 80,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 80},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 396})
+          )
+        )
+      );
+    }
+    if (props.x === 402) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Avg. CPC',
+          width: 78,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 78},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 401})
+          )
+        )
+      );
+    }
+    if (props.x === 407) {
+      return React.createElement(
+        'div',
+        {
+          label: 'CTR %',
+          width: 70,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 70},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 406})
+          )
+        )
+      );
+    }
+    if (props.x === 412) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Spent',
+          width: 70,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 70},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 411})
+          )
+        )
+      );
+    }
+    if (props.x === 417) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Objective',
+          width: 200,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 200},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 416})
+          )
+        )
+      );
+    }
+    if (props.x === 422) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Buying Type',
+          width: 100,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 100},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 421})
+          )
+        )
+      );
+    }
+    if (props.x === 427) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Campaign ID',
+          width: 120,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 120},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 426})
+          )
+        )
+      );
+    }
+    if (props.x === 432) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Start',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 431})
+          )
+        )
+      );
+    }
+    if (props.x === 437) {
+      return React.createElement(
+        'div',
+        {
+          label: 'End',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 436})
+          )
+        )
+      );
+    }
+    if (props.x === 442) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Date created',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 441})
+          )
+        )
+      );
+    }
+    if (props.x === 447) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Date last edited',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(FixedDataTableSortableHeader149, {x: 446})
+          )
+        )
+      );
+    }
+    if (props.x === 450) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Tags',
+          width: 150,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 150},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 449})
+          )
+        )
+      );
+    }
+    if (props.x === 453) {
+      return React.createElement(
+        'div',
+        {
+          label: '',
+          width: 25,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 25},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            React.createElement(AdsPETableHeader141, {x: 452})
+          )
+        )
+      );
+    }
+  };
+
+  var FixedDataTableCell143 = function (props) {
+    if (props.x === 317) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 721, left: 0}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 316})
+      );
+    }
+    if (props.x === 322) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 798, left: 0}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 321})
+      );
+    }
+    if (props.x === 325) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 1022, left: 798}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 324})
+      );
+    }
+    if (props.x === 328) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 0, left: 1820}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 327})
+      );
+    }
+    if (props.x === 331) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 25, left: 1820}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 330})
+      );
+    }
+    if (props.x === 339) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg6 _4h2m',
+          style: {height: 25, width: 42, left: 0},
+        },
+        undefined,
+        React.createElement(TransitionCell142, {x: 338})
+      );
+    }
+    if (props.x === 344) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 400, left: 42}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 343})
+      );
+    }
+    if (props.x === 350) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 33, left: 442}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 349})
+      );
+    }
+    if (props.x === 356) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 36, left: 475}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 355})
+      );
+    }
+    if (props.x === 361) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 60, left: 511}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 360})
+      );
+    }
+    if (props.x === 366) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 150, left: 571}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 365})
+      );
+    }
+    if (props.x === 373) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 140, left: 0},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 372})
+      );
+    }
+    if (props.x === 378) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 140, left: 140},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 377})
+      );
+    }
+    if (props.x === 383) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 80, left: 280},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 382})
+      );
+    }
+    if (props.x === 388) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 80, left: 360},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 387})
+      );
+    }
+    if (props.x === 393) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 60, left: 440},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 392})
+      );
+    }
+    if (props.x === 398) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 80, left: 500},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 397})
+      );
+    }
+    if (props.x === 403) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 78, left: 580},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 402})
+      );
+    }
+    if (props.x === 408) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 70, left: 658},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 407})
+      );
+    }
+    if (props.x === 413) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 70, left: 728},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 412})
+      );
+    }
+    if (props.x === 418) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 200, left: 798}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 417})
+      );
+    }
+    if (props.x === 423) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 100, left: 998}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 422})
+      );
+    }
+    if (props.x === 428) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 120, left: 1098}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 427})
+      );
+    }
+    if (props.x === 433) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1218}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 432})
+      );
+    }
+    if (props.x === 438) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1331}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 437})
+      );
+    }
+    if (props.x === 443) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1444}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 442})
+      );
+    }
+    if (props.x === 448) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1557}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 447})
+      );
+    }
+    if (props.x === 451) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 150, left: 1670}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        React.createElement(TransitionCell142, {x: 450})
+      );
+    }
+    if (props.x === 454) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 25, left: 1820}},
+        undefined,
+        React.createElement(TransitionCell142, {x: 453})
+      );
+    }
+  };
+
+  var FixedDataTableCellGroupImpl144 = function (props) {
+    if (props.x === 318) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 40,
+            position: 'absolute',
+            width: 721,
+            zIndex: 2,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        React.createElement(FixedDataTableCell143, {x: 317, key: 'cell_0'})
+      );
+    }
+    if (props.x === 332) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 40,
+            position: 'absolute',
+            width: 1845,
+            zIndex: 0,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        React.createElement(FixedDataTableCell143, {x: 322, key: 'cell_0'}),
+        React.createElement(FixedDataTableCell143, {x: 325, key: 'cell_1'}),
+        React.createElement(FixedDataTableCell143, {x: 328, key: 'cell_2'}),
+        React.createElement(FixedDataTableCell143, {x: 331, key: 'cell_3'})
+      );
+    }
+    if (props.x === 367) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 25,
+            position: 'absolute',
+            width: 721,
+            zIndex: 2,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        React.createElement(FixedDataTableCell143, {x: 339, key: 'cell_0'}),
+        React.createElement(FixedDataTableCell143, {x: 344, key: 'cell_1'}),
+        React.createElement(FixedDataTableCell143, {x: 350, key: 'cell_2'}),
+        React.createElement(FixedDataTableCell143, {x: 356, key: 'cell_3'}),
+        React.createElement(FixedDataTableCell143, {x: 361, key: 'cell_4'}),
+        React.createElement(FixedDataTableCell143, {x: 366, key: 'cell_5'})
+      );
+    }
+    if (props.x === 455) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 25,
+            position: 'absolute',
+            width: 1845,
+            zIndex: 0,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        React.createElement(FixedDataTableCell143, {x: 373, key: 'cell_0'}),
+        React.createElement(FixedDataTableCell143, {x: 378, key: 'cell_1'}),
+        React.createElement(FixedDataTableCell143, {x: 383, key: 'cell_2'}),
+        React.createElement(FixedDataTableCell143, {x: 388, key: 'cell_3'}),
+        React.createElement(FixedDataTableCell143, {x: 393, key: 'cell_4'}),
+        React.createElement(FixedDataTableCell143, {x: 398, key: 'cell_5'}),
+        React.createElement(FixedDataTableCell143, {x: 403, key: 'cell_6'}),
+        React.createElement(FixedDataTableCell143, {x: 408, key: 'cell_7'}),
+        React.createElement(FixedDataTableCell143, {x: 413, key: 'cell_8'}),
+        React.createElement(FixedDataTableCell143, {x: 418, key: 'cell_9'}),
+        React.createElement(FixedDataTableCell143, {x: 423, key: 'cell_10'}),
+        React.createElement(FixedDataTableCell143, {x: 428, key: 'cell_11'}),
+        React.createElement(FixedDataTableCell143, {x: 433, key: 'cell_12'}),
+        React.createElement(FixedDataTableCell143, {x: 438, key: 'cell_13'}),
+        React.createElement(FixedDataTableCell143, {x: 443, key: 'cell_14'}),
+        React.createElement(FixedDataTableCell143, {x: 448, key: 'cell_15'}),
+        React.createElement(FixedDataTableCell143, {x: 451, key: 'cell_16'}),
+        React.createElement(FixedDataTableCell143, {x: 454, key: 'cell_17'})
+      );
+    }
+  };
+
+  var FixedDataTableCellGroup145 = function (props) {
+    if (props.x === 319) {
+      return React.createElement(
+        'div',
+        {style: {height: 40, left: 0}, className: '_3pzk'},
+        React.createElement(FixedDataTableCellGroupImpl144, {x: 318})
+      );
+    }
+    if (props.x === 333) {
+      return React.createElement(
+        'div',
+        {style: {height: 40, left: 721}, className: '_3pzk'},
+        React.createElement(FixedDataTableCellGroupImpl144, {x: 332})
+      );
+    }
+    if (props.x === 368) {
+      return React.createElement(
+        'div',
+        {style: {height: 25, left: 0}, className: '_3pzk'},
+        React.createElement(FixedDataTableCellGroupImpl144, {x: 367})
+      );
+    }
+    if (props.x === 456) {
+      return React.createElement(
+        'div',
+        {style: {height: 25, left: 721}, className: '_3pzk'},
+        React.createElement(FixedDataTableCellGroupImpl144, {x: 455})
+      );
+    }
+  };
+
+  var FixedDataTableRowImpl146 = function (props) {
+    if (props.x === 334) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1gd4 _4li _52no _3h1a _1mib',
+          onClick: null,
+          onDoubleClick: null,
+          onMouseDown: null,
+          onMouseEnter: null,
+          onMouseLeave: null,
+          style: {width: 1209, height: 40},
+        },
+        React.createElement(
+          'div',
+          {className: '_1gd5'},
+          React.createElement(FixedDataTableCellGroup145, {
+            x: 319,
+            key: 'fixed_cells',
+          }),
+          React.createElement(FixedDataTableCellGroup145, {
+            x: 333,
+            key: 'scrollable_cells',
+          }),
+          React.createElement('div', {
+            className: '_1gd6 _1gd8',
+            style: {left: 721, height: 40},
+          })
+        )
+      );
+    }
+    if (props.x === 457) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1gd4 _4li _3h1a _1mib',
+          onClick: null,
+          onDoubleClick: null,
+          onMouseDown: null,
+          onMouseEnter: null,
+          onMouseLeave: null,
+          style: {width: 1209, height: 25},
+        },
+        React.createElement(
+          'div',
+          {className: '_1gd5'},
+          React.createElement(FixedDataTableCellGroup145, {
+            x: 368,
+            key: 'fixed_cells',
+          }),
+          React.createElement(FixedDataTableCellGroup145, {
+            x: 456,
+            key: 'scrollable_cells',
+          }),
+          React.createElement('div', {
+            className: '_1gd6 _1gd8',
+            style: {left: 721, height: 25},
+          })
+        )
+      );
+    }
+  };
+
+  var FixedDataTableRow147 = function (props) {
+    if (props.x === 335) {
+      return React.createElement(
+        'div',
+        {
+          style: {
+            width: 1209,
+            height: 40,
+            zIndex: 1,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+          className: '_1gda',
+        },
+        React.createElement(FixedDataTableRowImpl146, {x: 334})
+      );
+    }
+    if (props.x === 458) {
+      return React.createElement(
+        'div',
+        {
+          style: {
+            width: 1209,
+            height: 25,
+            zIndex: 1,
+            transform: 'translate3d(0px,40px,0)',
+            backfaceVisibility: 'hidden',
+          },
+          className: '_1gda',
+        },
+        React.createElement(FixedDataTableRowImpl146, {x: 457})
+      );
+    }
+  };
+
+  var FixedDataTableAbstractSortableHeader148 = function (props) {
+    if (props.x === 341) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 340})
+        )
+      );
+    }
+    if (props.x === 347) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _1kst _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 346})
+        )
+      );
+    }
+    if (props.x === 353) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _1kst _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 352})
+        )
+      );
+    }
+    if (props.x === 358) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 357})
+        )
+      );
+    }
+    if (props.x === 363) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _54_9 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 362})
+        )
+      );
+    }
+    if (props.x === 370) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 369})
+        )
+      );
+    }
+    if (props.x === 375) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 374})
+        )
+      );
+    }
+    if (props.x === 380) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 379})
+        )
+      );
+    }
+    if (props.x === 385) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 384})
+        )
+      );
+    }
+    if (props.x === 390) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 389})
+        )
+      );
+    }
+    if (props.x === 395) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 394})
+        )
+      );
+    }
+    if (props.x === 400) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 399})
+        )
+      );
+    }
+    if (props.x === 405) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 404})
+        )
+      );
+    }
+    if (props.x === 410) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 409})
+        )
+      );
+    }
+    if (props.x === 415) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 414})
+        )
+      );
+    }
+    if (props.x === 420) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 419})
+        )
+      );
+    }
+    if (props.x === 425) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 424})
+        )
+      );
+    }
+    if (props.x === 430) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 429})
+        )
+      );
+    }
+    if (props.x === 435) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 434})
+        )
+      );
+    }
+    if (props.x === 440) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 439})
+        )
+      );
+    }
+    if (props.x === 445) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          React.createElement(AdsPETableHeader141, {x: 444})
+        )
+      );
+    }
+  };
+
+  var FixedDataTableSortableHeader149 = function (props) {
+    if (props.x === 342) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 341,
+      });
+    }
+    if (props.x === 348) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 347,
+      });
+    }
+    if (props.x === 354) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 353,
+      });
+    }
+    if (props.x === 359) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 358,
+      });
+    }
+    if (props.x === 364) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 363,
+      });
+    }
+    if (props.x === 371) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 370,
+      });
+    }
+    if (props.x === 376) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 375,
+      });
+    }
+    if (props.x === 381) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 380,
+      });
+    }
+    if (props.x === 386) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 385,
+      });
+    }
+    if (props.x === 391) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 390,
+      });
+    }
+    if (props.x === 396) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 395,
+      });
+    }
+    if (props.x === 401) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 400,
+      });
+    }
+    if (props.x === 406) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 405,
+      });
+    }
+    if (props.x === 411) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 410,
+      });
+    }
+    if (props.x === 416) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 415,
+      });
+    }
+    if (props.x === 421) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 420,
+      });
+    }
+    if (props.x === 426) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 425,
+      });
+    }
+    if (props.x === 431) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 430,
+      });
+    }
+    if (props.x === 436) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 435,
+      });
+    }
+    if (props.x === 441) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 440,
+      });
+    }
+    if (props.x === 446) {
+      return React.createElement(FixedDataTableAbstractSortableHeader148, {
+        x: 445,
+      });
+    }
+  };
+
+  var FixedDataTableBufferedRows150 = function (props) {
+    if (props.x === 459) {
+      return React.createElement('div', {
+        style: {
+          position: 'absolute',
+          pointerEvents: 'auto',
+          transform: 'translate3d(0px,65px,0)',
+          backfaceVisibility: 'hidden',
+        },
+      });
+    }
+  };
+
+  var Scrollbar151 = function (props) {
+    if (props.x === 460) {
+      return null;
+    }
+    if (props.x === 461) {
+      return React.createElement(
+        'div',
+        {
+          onFocus: function () {},
+          onBlur: function () {},
+          onKeyDown: function () {},
+          onMouseDown: function () {},
+          onWheel: function () {},
+          className: '_1t0r _1t0t _4jdr _1t0u',
+          style: {width: 1209, zIndex: 99},
+          tabIndex: 0,
+        },
+        React.createElement('div', {
+          className: '_1t0w _1t0y _1t0_',
+          style: {
+            width: 561.6340607950117,
+            transform: 'translate3d(4px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        })
+      );
+    }
+  };
+
+  var HorizontalScrollbar152 = function (props) {
+    if (props.x === 462) {
+      return React.createElement(
+        'div',
+        {className: '_3h1k _3h1m', style: {height: 15, width: 1209}},
+        React.createElement(
+          'div',
+          {
+            style: {
+              height: 15,
+              position: 'absolute',
+              overflow: 'hidden',
+              width: 1209,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          },
+          React.createElement(Scrollbar151, {x: 461})
+        )
+      );
+    }
+  };
+
+  var FixedDataTable153 = function (props) {
+    if (props.x === 463) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3h1i _1mie',
+          onWheel: function () {},
+          style: {height: 25, width: 1209},
+        },
+        React.createElement(
+          'div',
+          {className: '_3h1j', style: {height: 8, width: 1209}},
+          React.createElement(FixedDataTableColumnResizeHandle140, {x: 313}),
+          React.createElement(FixedDataTableRow147, {
+            x: 335,
+            key: 'group_header',
+          }),
+          React.createElement(FixedDataTableRow147, {x: 458, key: 'header'}),
+          React.createElement(FixedDataTableBufferedRows150, {x: 459}),
+          null,
+          undefined,
+          React.createElement('div', {
+            className: '_3h1e _3h1h',
+            style: {top: 8},
+          })
+        ),
+        React.createElement(Scrollbar151, {x: 460}),
+        React.createElement(HorizontalScrollbar152, {x: 462})
+      );
+    }
+  };
+
+  var TransitionTable154 = function (props) {
+    if (props.x === 464) {
+      return React.createElement(FixedDataTable153, {x: 463});
+    }
+  };
+
+  var AdsSelectableFixedDataTable155 = function (props) {
+    if (props.x === 465) {
+      return React.createElement(
+        'div',
+        {className: '_5hht'},
+        React.createElement(TransitionTable154, {x: 464})
+      );
+    }
+  };
+
+  var AdsDataTableKeyboardSupportDecorator156 = function (props) {
+    if (props.x === 466) {
+      return React.createElement(
+        'div',
+        {className: '_5d6f', tabIndex: '0', onKeyDown: function () {}},
+        React.createElement(AdsSelectableFixedDataTable155, {x: 465})
+      );
+    }
+  };
+
+  var AdsEditableDataTableDecorator157 = function (props) {
+    if (props.x === 467) {
+      return React.createElement(
+        'div',
+        {onCopy: function () {}},
+        React.createElement(AdsDataTableKeyboardSupportDecorator156, {x: 466})
+      );
+    }
+  };
+
+  var AdsPEDataTableContainer158 = function (props) {
+    if (props.x === 468) {
+      return React.createElement(
+        'div',
+        {className: '_35l_ _1hr clearfix'},
+        null,
+        null,
+        null,
+        React.createElement(AdsEditableDataTableDecorator157, {x: 467})
+      );
+    }
+  };
+
+  var AdsPECampaignGroupTableContainer159 = function (props) {
+    if (props.x === 470) {
+      return React.createElement(ResponsiveBlock37, {x: 469});
+    }
+  };
+
+  var AdsPEManageAdsPaneContainer160 = function (props) {
+    if (props.x === 473) {
+      return React.createElement(
+        'div',
+        null,
+        React.createElement(AdsErrorBoundary10, {x: 65}),
+        React.createElement(
+          'div',
+          {className: '_2uty'},
+          React.createElement(AdsErrorBoundary10, {x: 125})
+        ),
+        React.createElement(
+          'div',
+          {className: '_2utx _21oc'},
+          React.createElement(AdsErrorBoundary10, {x: 171}),
+          React.createElement(
+            'div',
+            {className: '_41tu'},
+            React.createElement(AdsErrorBoundary10, {x: 176}),
+            React.createElement(AdsErrorBoundary10, {x: 194})
+          )
+        ),
+        React.createElement(
+          'div',
+          {className: '_2utz', style: {height: 25}},
+          React.createElement(AdsErrorBoundary10, {x: 302}),
+          React.createElement(
+            'div',
+            {className: '_2ut-'},
+            React.createElement(AdsErrorBoundary10, {x: 312})
+          ),
+          React.createElement(
+            'div',
+            {className: '_2ut_'},
+            React.createElement(AdsErrorBoundary10, {x: 472})
+          )
+        )
+      );
+    }
+  };
+
+  var AdsPEContentContainer161 = function (props) {
+    if (props.x === 474) {
+      return React.createElement(AdsPEManageAdsPaneContainer160, {x: 473});
+    }
+  };
+
+  var FluxContainer_AdsPEWorkspaceContainer_162 = function (props) {
+    if (props.x === 477) {
+      return React.createElement(
+        'div',
+        {className: '_49wu', style: {height: 177, top: 43, width: 1306}},
+        React.createElement(ResponsiveBlock37, {x: 62, key: '0'}),
+        React.createElement(AdsErrorBoundary10, {x: 476, key: '1'}),
+        null
+      );
+    }
+  };
+
+  var FluxContainer_AdsSessionExpiredDialogContainer_163 = function (props) {
+    if (props.x === 478) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEUploadDialogLazyContainer_164 = function (props) {
+    if (props.x === 479) {
+      return null;
+    }
+  };
+
+  var FluxContainer_DialogContainer_165 = function (props) {
+    if (props.x === 480) {
+      return null;
+    }
+  };
+
+  var AdsBugReportContainer166 = function (props) {
+    if (props.x === 481) {
+      return React.createElement('span', null);
+    }
+  };
+
+  var AdsPEAudienceSplittingDialog167 = function (props) {
+    if (props.x === 482) {
+      return null;
+    }
+  };
+
+  var AdsPEAudienceSplittingDialogContainer168 = function (props) {
+    if (props.x === 483) {
+      return React.createElement(
+        'div',
+        null,
+        React.createElement(AdsPEAudienceSplittingDialog167, {x: 482})
+      );
+    }
+  };
+
+  var FluxContainer_AdsRuleDialogBootloadContainer_169 = function (props) {
+    if (props.x === 484) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPECFTrayContainer_170 = function (props) {
+    if (props.x === 485) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEDeleteDraftContainer_171 = function (props) {
+    if (props.x === 486) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEInitialDraftPublishDialogContainer_172 = function (
+    props
+  ) {
+    if (props.x === 487) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEReachFrequencyStatusTransitionDialogBootloadContainer_173 =
+    function (props) {
+      if (props.x === 488) {
+        return null;
+      }
+    };
+
+  var FluxContainer_AdsPEPurgeArchiveDialogContainer_174 = function (props) {
+    if (props.x === 489) {
+      return null;
+    }
+  };
+
+  var AdsPECreateDialogContainer175 = function (props) {
+    if (props.x === 490) {
+      return React.createElement('span', null);
+    }
+  };
+
+  var FluxContainer_AdsPEModalStatusContainer_176 = function (props) {
+    if (props.x === 491) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsBrowserExtensionErrorDialogContainer_177 = function (
+    props
+  ) {
+    if (props.x === 492) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPESortByErrorTipContainer_178 = function (props) {
+    if (props.x === 493) {
+      return null;
+    }
+  };
+
+  var LeadDownloadDialogSelector179 = function (props) {
+    if (props.x === 494) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPELeadDownloadDialogContainerClass_180 = function (
+    props
+  ) {
+    if (props.x === 495) {
+      return React.createElement(LeadDownloadDialogSelector179, {x: 494});
+    }
+  };
+
+  var AdsPEContainer181 = function (props) {
+    if (props.x === 496) {
+      return React.createElement(
+        'div',
+        {id: 'ads_pe_container'},
+        React.createElement(FluxContainer_AdsPETopNavContainer_26, {x: 41}),
+        null,
+        React.createElement(FluxContainer_AdsPEWorkspaceContainer_162, {
+          x: 477,
+        }),
+        React.createElement(
+          FluxContainer_AdsSessionExpiredDialogContainer_163,
+          {x: 478}
+        ),
+        React.createElement(FluxContainer_AdsPEUploadDialogLazyContainer_164, {
+          x: 479,
+        }),
+        React.createElement(FluxContainer_DialogContainer_165, {x: 480}),
+        React.createElement(AdsBugReportContainer166, {x: 481}),
+        React.createElement(AdsPEAudienceSplittingDialogContainer168, {x: 483}),
+        React.createElement(FluxContainer_AdsRuleDialogBootloadContainer_169, {
+          x: 484,
+        }),
+        React.createElement(FluxContainer_AdsPECFTrayContainer_170, {x: 485}),
+        React.createElement(
+          'span',
+          null,
+          React.createElement(FluxContainer_AdsPEDeleteDraftContainer_171, {
+            x: 486,
+          }),
+          React.createElement(
+            FluxContainer_AdsPEInitialDraftPublishDialogContainer_172,
+            {x: 487}
+          ),
+          React.createElement(
+            FluxContainer_AdsPEReachFrequencyStatusTransitionDialogBootloadContainer_173,
+            {x: 488}
+          )
+        ),
+        React.createElement(
+          FluxContainer_AdsPEPurgeArchiveDialogContainer_174,
+          {x: 489}
+        ),
+        React.createElement(AdsPECreateDialogContainer175, {x: 490}),
+        React.createElement(FluxContainer_AdsPEModalStatusContainer_176, {
+          x: 491,
+        }),
+        React.createElement(
+          FluxContainer_AdsBrowserExtensionErrorDialogContainer_177,
+          {x: 492}
+        ),
+        React.createElement(FluxContainer_AdsPESortByErrorTipContainer_178, {
+          x: 493,
+        }),
+        React.createElement(
+          FluxContainer_AdsPELeadDownloadDialogContainerClass_180,
+          {x: 495}
+        ),
+        React.createElement('div', {id: 'web_ads_guidance_tips'})
+      );
+    }
+  };
+
+  var Benchmark = function (props) {
+    if (props.x === undefined) {
+      return React.createElement(AdsPEContainer181, {x: 496});
+    }
+  };
+
+  var app = document.getElementById('app');
+
+  window.render = function render() {
+    ReactDOM.render(React.createElement(Benchmark, null), app);
+  };
+})();
diff --git a/scripts/bench/benchmarks/pe-functional-components/build.js b/scripts/bench/benchmarks/pe-functional-components/build.js
new file mode 100644
index 00000000000..ffbd82637d2
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-functional-components/build.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const {join} = require('path');
+
+async function build(reactPath, asyncCopyTo) {
+  // copy the UMD bundles
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react.production.js'),
+    join(__dirname, 'react.production.js')
+  );
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react-dom.production.js'),
+    join(__dirname, 'react-dom.production.js')
+  );
+}
+
+module.exports = build;
diff --git a/scripts/bench/benchmarks/pe-functional-components/index.html b/scripts/bench/benchmarks/pe-functional-components/index.html
new file mode 100644
index 00000000000..c2d44dcd00b
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-functional-components/index.html
@@ -0,0 +1,32 @@
+<html>
+<body>
+    <div id="app"></div>
+    <script>
+      performance.mark('Load React');
+      performance.mark('Load React+ReactDOM');
+    </script>
+    <script src="react.production.min.js"></script>
+    <script>
+      performance.measure('Load React', 'Load React');
+    </script>
+    <script>
+      performance.mark('Load ReactDOM');
+    </script>
+    <script src="react-dom.production.min.js"></script>
+    <script>
+      performance.measure('Load ReactDOM', 'Load ReactDOM');
+      performance.measure('Load React+ReactDOM', 'Load React+ReactDOM');
+    </script>
+    <script src="benchmark.js"></script>
+    <script>
+      performance.mark('Initial Render');
+      render();
+      performance.measure('Initial Render', 'Initial Render');
+      requestAnimationFrame(() => {
+        performance.mark('Update Render');
+        render();
+        performance.measure('Update Render', 'Update Render');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/scripts/bench/benchmarks/pe-no-components/benchmark.js b/scripts/bench/benchmarks/pe-no-components/benchmark.js
new file mode 100644
index 00000000000..664f6db665a
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-no-components/benchmark.js
@@ -0,0 +1,4943 @@
+(function () {
+  'use strict';
+
+  var ReactImage0 = function (x) {
+    if (x === 0) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (x === 15) {
+      return React.createElement('i', {
+        className: '_3ut_ img sp_i534r85sjIn sx_e8ac93',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 22) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_7b15bc',
+        src: null,
+      });
+    }
+    if (x === 29) {
+      return React.createElement('i', {
+        className: '_1m1s _4540 _p img sp_i534r85sjIn sx_f40b1c',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 42) {
+      return React.createElement(
+        'i',
+        {
+          alt: 'Warning',
+          className: '_585p img sp_i534r85sjIn sx_20273d',
+          src: null,
+        },
+        React.createElement('u', null, 'Warning')
+      );
+    }
+    if (x === 67) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_b5d079',
+        src: null,
+      });
+    }
+    if (x === 70) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_29f8c9',
+      });
+    }
+    if (x === 76) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_ef6a9c',
+        src: null,
+      });
+    }
+    if (x === 79) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_6f8c43',
+      });
+    }
+    if (x === 88) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_e94a2d',
+      });
+    }
+    if (x === 91) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_7ed7d4',
+      });
+    }
+    if (x === 94) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_930440',
+      });
+    }
+    if (x === 98) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_750c83',
+      });
+    }
+    if (x === 108) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_73c1bb',
+      });
+    }
+    if (x === 111) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_29f28d',
+      });
+    }
+    if (x === 126) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_91c59e',
+      });
+    }
+    if (x === 127) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (x === 134) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: '_3-8_ img sp_i534r85sjIn sx_c8eb75',
+      });
+    }
+    if (x === 135) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (x === 148) {
+      return React.createElement('i', {
+        className: '_3yz6 _5whs img sp_i534r85sjIn sx_896996',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 152) {
+      return React.createElement('i', {
+        className: '_5b5p _4gem img sp_i534r85sjIn sx_896996',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 153) {
+      return React.createElement('i', {
+        className: '_541d img sp_i534r85sjIn sx_2f396a',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 160) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_31d9b0',
+      });
+    }
+    if (x === 177) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_2c18b7',
+        src: null,
+      });
+    }
+    if (x === 186) {
+      return React.createElement('i', {
+        src: null,
+        alt: '',
+        className: 'img sp_i534r85sjIn sx_0a681f',
+      });
+    }
+    if (x === 195) {
+      return React.createElement('i', {
+        className: '_1-lx img sp_OkER5ktbEyg sx_b369b4',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 198) {
+      return React.createElement('i', {
+        className: '_1-lx img sp_i534r85sjIn sx_96948e',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 237) {
+      return React.createElement('i', {
+        className: '_541d img sp_i534r85sjIn sx_2f396a',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 266) {
+      return React.createElement('i', {
+        alt: '',
+        className: '_3-99 img sp_i534r85sjIn sx_538591',
+        src: null,
+      });
+    }
+    if (x === 314) {
+      return React.createElement('i', {
+        className: '_1cie _1cif img sp_i534r85sjIn sx_6e6820',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 345) {
+      return React.createElement('i', {
+        className: '_1cie img sp_i534r85sjIn sx_e896cf',
+        src: null,
+        alt: '',
+      });
+    }
+    if (x === 351) {
+      return React.createElement('i', {
+        className: '_1cie img sp_i534r85sjIn sx_38fed8',
+        src: null,
+        alt: '',
+      });
+    }
+  };
+
+  var AbstractLink1 = function (x) {
+    if (x === 1) {
+      return React.createElement(
+        'a',
+        {
+          className: '_387r _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+          style: {width: 250, maxWidth: '250px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '236px'}},
+          null,
+          React.createElement(
+            'span',
+            null,
+            React.createElement('span', {className: '_48u-'}, 'Account:'),
+            ' ',
+            'Dick Madanson (10149999073643408)'
+          )
+        ),
+        ReactImage0(0)
+      );
+    }
+    if (x === 43) {
+      return React.createElement(
+        'a',
+        {
+          className: '_585q _50zy _50-0 _50z- _5upp _42ft',
+          size: 'medium',
+          type: null,
+          title: 'Remove',
+          'data-hover': undefined,
+          'data-tooltip-alignh': undefined,
+          'data-tooltip-content': undefined,
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        undefined,
+        'Remove',
+        undefined
+      );
+    }
+    if (x === 49) {
+      return React.createElement(
+        'a',
+        {
+          target: '_blank',
+          href: '/ads/manage/billing.php?act=10149999073643408',
+          rel: undefined,
+          onClick: function () {},
+        },
+        XUIText29(48)
+      );
+    }
+    if (x === 128) {
+      return React.createElement(
+        'a',
+        {
+          className: ' _5bbf _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+          style: {maxWidth: '200px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '186px'}},
+          ReactImage0(126),
+          'Search'
+        ),
+        ReactImage0(127)
+      );
+    }
+    if (x === 136) {
+      return React.createElement(
+        'a',
+        {
+          className: ' _5bbf _55pi _2agf _4jy0 _4jy4 _517h _51sy _42ft',
+          style: {maxWidth: '200px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '186px'}},
+          ReactImage0(134),
+          'Filters'
+        ),
+        ReactImage0(135)
+      );
+    }
+    if (x === 178) {
+      return React.createElement(
+        'a',
+        {
+          className: '_1_-t _1_-v _42ft',
+          disabled: null,
+          height: 'medium',
+          role: 'button',
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        undefined,
+        'Lifetime',
+        ReactImage0(177)
+      );
+    }
+    if (x === 207) {
+      return React.createElement(
+        'a',
+        {href: '#', rel: undefined, onClick: function () {}},
+        'Create Ad Set'
+      );
+    }
+    if (x === 209) {
+      return React.createElement(
+        'a',
+        {href: '#', rel: undefined, onClick: function () {}},
+        'View Ad Set'
+      );
+    }
+    if (x === 241) {
+      return React.createElement(
+        'a',
+        {href: '#', rel: undefined, onClick: function () {}},
+        'Set a Limit'
+      );
+    }
+    if (x === 267) {
+      return React.createElement(
+        'a',
+        {
+          className: '_p _55pi _2agf _4jy0 _4jy3 _517h _51sy _42ft',
+          style: {maxWidth: '200px'},
+          disabled: null,
+          label: null,
+          href: '#',
+          rel: undefined,
+          onClick: function () {},
+        },
+        null,
+        React.createElement(
+          'span',
+          {className: '_55pe', style: {maxWidth: '186px'}},
+          null,
+          'Links'
+        ),
+        ReactImage0(266)
+      );
+    }
+  };
+
+  var Link2 = function (x) {
+    if (x === 2) {
+      return AbstractLink1(1);
+    }
+    if (x === 44) {
+      return AbstractLink1(43);
+    }
+    if (x === 50) {
+      return AbstractLink1(49);
+    }
+    if (x === 129) {
+      return AbstractLink1(128);
+    }
+    if (x === 137) {
+      return AbstractLink1(136);
+    }
+    if (x === 179) {
+      return AbstractLink1(178);
+    }
+    if (x === 208) {
+      return AbstractLink1(107);
+    }
+    if (x === 210) {
+      return AbstractLink1(209);
+    }
+    if (x === 242) {
+      return AbstractLink1(241);
+    }
+    if (x === 268) {
+      return AbstractLink1(267);
+    }
+  };
+
+  var AbstractButton3 = function (x) {
+    if (x === 3) {
+      return Link2(2);
+    }
+    if (x === 20) {
+      return React.createElement(
+        'button',
+        {
+          className: '_5n7z _4jy0 _4jy4 _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        'Discard Changes',
+        undefined
+      );
+    }
+    if (x === 23) {
+      return React.createElement(
+        'button',
+        {
+          className: '_5n7z _2yak _4lj- _4jy0 _4jy4 _517h _51sy _42ft _42fr',
+          disabled: true,
+          onClick: function () {},
+          'data-tooltip-content': 'You have no changes to publish',
+          'data-hover': 'tooltip',
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(22),
+        'Review Changes',
+        undefined
+      );
+    }
+    if (x === 45) {
+      return Link2(44);
+    }
+    if (x === 68) {
+      return React.createElement(
+        'button',
+        {
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(67),
+        'Create Campaign',
+        undefined
+      );
+    }
+    if (x === 71) {
+      return React.createElement(
+        'button',
+        {
+          className: '_u_k _3qx6 _p _4jy0 _4jy4 _517h _51sy _42ft',
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(70),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 77) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Edit',
+          'data-tooltip-content': 'Edit Campaigns (Ctrl+U)',
+          'data-hover': 'tooltip',
+          className: '_d2_ _u_k noMargin _4jy0 _4jy4 _517h _51sy _42ft',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(76),
+        'Edit',
+        undefined
+      );
+    }
+    if (x === 80) {
+      return React.createElement(
+        'button',
+        {
+          className: '_u_k _3qx6 _p _4jy0 _4jy4 _517h _51sy _42ft',
+          disabled: false,
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(79),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 89) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Revert',
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft _42fr',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Revert',
+          disabled: true,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(88),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 92) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Delete',
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Delete',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(91),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 95) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Duplicate',
+          className: '_u_k _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Duplicate',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(94),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 99) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Export & Import',
+          className: '_u_k noMargin _p _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Export & Import',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(98),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 109) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Create Report',
+          className: '_u_k _5n7z _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Create Report',
+          disabled: false,
+          style: {boxSizing: 'border-box', height: '28px', width: '48px'},
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(108),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 112) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'Campaign Tags',
+          className: ' _5uy7 _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'Campaign Tags',
+          disabled: false,
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(111),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 130) {
+      return Link2(129);
+    }
+    if (x === 138) {
+      return Link2(137);
+    }
+    if (x === 149) {
+      return React.createElement(
+        'button',
+        {
+          className: '_3yz9 _1t-2 _50z- _50zy _50zz _50z- _5upp _42ft',
+          size: 'small',
+          onClick: function () {},
+          type: 'button',
+          title: 'Remove',
+          'data-hover': undefined,
+          'data-tooltip-alignh': undefined,
+          'data-tooltip-content': undefined,
+          label: null,
+        },
+        undefined,
+        'Remove',
+        undefined
+      );
+    }
+    if (x === 156) {
+      return React.createElement(
+        'button',
+        {
+          className: '_5b5u _5b5v _4jy0 _4jy3 _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        'Apply',
+        undefined
+      );
+    }
+    if (x === 161) {
+      return React.createElement(
+        'button',
+        {
+          className: '_1wdf _4jy0 _517i _517h _51sy _42ft',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(160),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 180) {
+      return Link2(179);
+    }
+    if (x === 187) {
+      return React.createElement(
+        'button',
+        {
+          'aria-label': 'List Settings',
+          className: '_u_k _3c5o _1-r0 _4jy0 _4jy4 _517h _51sy _42ft',
+          'data-hover': 'tooltip',
+          'data-tooltip-content': 'List Settings',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        ReactImage0(186),
+        undefined,
+        undefined
+      );
+    }
+    if (x === 269) {
+      return Link2(268);
+    }
+    if (x === 303) {
+      return React.createElement(
+        'button',
+        {
+          className: '_tm3 _tm6 _tm7 _4jy0 _4jy6 _517h _51sy _42ft',
+          'data-tooltip-position': 'right',
+          'data-tooltip-content': 'Campaigns',
+          'data-hover': 'tooltip',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('div', {className: '_tma'}),
+          React.createElement('div', {className: '_tm8'}),
+          React.createElement('div', {className: '_tm9'}, 1)
+        ),
+        undefined
+      );
+    }
+    if (x === 305) {
+      return React.createElement(
+        'button',
+        {
+          className: '_tm4 _tm6 _4jy0 _4jy6 _517h _51sy _42ft',
+          'data-tooltip-position': 'right',
+          'data-tooltip-content': 'Ad Sets',
+          'data-hover': 'tooltip',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('div', {className: '_tma'}),
+          React.createElement('div', {className: '_tm8'}),
+          React.createElement('div', {className: '_tm9'}, 1)
+        ),
+        undefined
+      );
+    }
+    if (x === 307) {
+      return React.createElement(
+        'button',
+        {
+          className: '_tm5 _tm6 _4jy0 _4jy6 _517h _51sy _42ft',
+          'data-tooltip-position': 'right',
+          'data-tooltip-content': 'Ads',
+          'data-hover': 'tooltip',
+          onClick: function () {},
+          label: null,
+          type: 'submit',
+          value: '1',
+        },
+        undefined,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('div', {className: '_tma'}),
+          React.createElement('div', {className: '_tm8'}),
+          React.createElement('div', {className: '_tm9'}, 1)
+        ),
+        undefined
+      );
+    }
+  };
+
+  var XUIButton4 = function (x) {
+    if (x === 4) {
+      return AbstractButton3(3);
+    }
+    if (x === 21) {
+      return AbstractButton3(20);
+    }
+    if (x === 24) {
+      return AbstractButton3(23);
+    }
+    if (x === 69) {
+      return AbstractButton3(68);
+    }
+    if (x === 72) {
+      return AbstractButton3(71);
+    }
+    if (x === 78) {
+      return AbstractButton3(77);
+    }
+    if (x === 81) {
+      return AbstractButton3(80);
+    }
+    if (x === 90) {
+      return AbstractButton3(89);
+    }
+    if (x === 93) {
+      return AbstractButton3(92);
+    }
+    if (x === 96) {
+      return AbstractButton3(95);
+    }
+    if (x === 100) {
+      return AbstractButton3(99);
+    }
+    if (x === 110) {
+      return AbstractButton3(109);
+    }
+    if (x === 113) {
+      return AbstractButton3(112);
+    }
+    if (x === 131) {
+      return AbstractButton3(130);
+    }
+    if (x === 139) {
+      return AbstractButton3(138);
+    }
+    if (x === 157) {
+      return AbstractButton3(156);
+    }
+    if (x === 162) {
+      return AbstractButton3(161);
+    }
+    if (x === 188) {
+      return AbstractButton3(187);
+    }
+    if (x === 270) {
+      return AbstractButton3(269);
+    }
+    if (x === 304) {
+      return AbstractButton3(303);
+    }
+    if (x === 306) {
+      return AbstractButton3(305);
+    }
+    if (x === 308) {
+      return AbstractButton3(307);
+    }
+  };
+
+  var AbstractPopoverButton5 = function (x) {
+    if (x === 5) {
+      return XUIButton4(4);
+    }
+    if (x === 132) {
+      return XUIButton4(131);
+    }
+    if (x === 140) {
+      return XUIButton4(139);
+    }
+    if (x === 271) {
+      return XUIButton4(270);
+    }
+  };
+
+  var ReactXUIPopoverButton6 = function (x) {
+    if (x === 6) {
+      return AbstractPopoverButton5(5);
+    }
+    if (x === 133) {
+      return AbstractPopoverButton5(132);
+    }
+    if (x === 141) {
+      return AbstractPopoverButton5(140);
+    }
+    if (x === 272) {
+      return AbstractPopoverButton5(271);
+    }
+  };
+
+  var BIGAdAccountSelector7 = function (x) {
+    if (x === 7) {
+      return React.createElement('div', null, ReactXUIPopoverButton6(6), null);
+    }
+  };
+
+  var FluxContainer_AdsPEBIGAdAccountSelectorContainer_8 = function (x) {
+    if (x === 8) {
+      return BIGAdAccountSelector7(7);
+    }
+  };
+
+  var ErrorBoundary9 = function (x) {
+    if (x === 9) {
+      return FluxContainer_AdsPEBIGAdAccountSelectorContainer_8(8);
+    }
+    if (x === 13) {
+      return FluxContainer_AdsPENavigationBarContainer_12(12);
+    }
+    if (x === 27) {
+      return FluxContainer_AdsPEPublishButtonContainer_18(26);
+    }
+    if (x === 32) {
+      return ReactPopoverMenu20(31);
+    }
+    if (x === 38) {
+      return AdsPEResetDialog24(37);
+    }
+    if (x === 57) {
+      return FluxContainer_AdsPETopErrorContainer_35(56);
+    }
+    if (x === 60) {
+      return FluxContainer_AdsGuidanceChannel_36(59);
+    }
+    if (x === 64) {
+      return FluxContainer_AdsBulkEditDialogContainer_38(63);
+    }
+    if (x === 124) {
+      return AdsPECampaignGroupToolbarContainer57(123);
+    }
+    if (x === 170) {
+      return AdsPEFilterContainer72(169);
+    }
+    if (x === 175) {
+      return AdsPETablePagerContainer75(174);
+    }
+    if (x === 193) {
+      return AdsPEStatRangeContainer81(192);
+    }
+    if (x === 301) {
+      return FluxContainer_AdsPEMultiTabDrawerContainer_137(300);
+    }
+    if (x === 311) {
+      return AdsPEOrganizerContainer139(310);
+    }
+    if (x === 471) {
+      return AdsPECampaignGroupTableContainer159(470);
+    }
+    if (x === 475) {
+      return AdsPEContentContainer161(474);
+    }
+  };
+
+  var AdsErrorBoundary10 = function (x) {
+    if (x === 10) {
+      return ErrorBoundary9(9);
+    }
+    if (x === 14) {
+      return ErrorBoundary9(13);
+    }
+    if (x === 28) {
+      return ErrorBoundary9(27);
+    }
+    if (x === 33) {
+      return ErrorBoundary9(32);
+    }
+    if (x === 39) {
+      return ErrorBoundary9(38);
+    }
+    if (x === 58) {
+      return ErrorBoundary9(57);
+    }
+    if (x === 61) {
+      return ErrorBoundary9(60);
+    }
+    if (x === 65) {
+      return ErrorBoundary9(64);
+    }
+    if (x === 125) {
+      return ErrorBoundary9(124);
+    }
+    if (x === 171) {
+      return ErrorBoundary9(170);
+    }
+    if (x === 176) {
+      return ErrorBoundary9(175);
+    }
+    if (x === 194) {
+      return ErrorBoundary9(193);
+    }
+    if (x === 302) {
+      return ErrorBoundary9(301);
+    }
+    if (x === 312) {
+      return ErrorBoundary9(311);
+    }
+    if (x === 472) {
+      return ErrorBoundary9(471);
+    }
+    if (x === 476) {
+      return ErrorBoundary9(475);
+    }
+  };
+
+  var AdsPENavigationBar11 = function (x) {
+    if (x === 11) {
+      return React.createElement('div', {className: '_4t_9'});
+    }
+  };
+
+  var FluxContainer_AdsPENavigationBarContainer_12 = function (x) {
+    if (x === 12) {
+      return AdsPENavigationBar11(11);
+    }
+  };
+
+  var AdsPEDraftSyncStatus13 = function (x) {
+    if (x === 16) {
+      return React.createElement(
+        'div',
+        {className: '_3ut-', onClick: function () {}},
+        React.createElement('span', {className: '_3uu0'}, ReactImage0(15))
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEDraftSyncStatusContainer_14 = function (x) {
+    if (x === 17) {
+      return AdsPEDraftSyncStatus13(16);
+    }
+  };
+
+  var AdsPEDraftErrorsStatus15 = function (x) {
+    if (x === 18) {
+      return null;
+    }
+  };
+
+  var FluxContainer_viewFn_16 = function (x) {
+    if (x === 19) {
+      return AdsPEDraftErrorsStatus15(18);
+    }
+  };
+
+  var AdsPEPublishButton17 = function (x) {
+    if (x === 25) {
+      return React.createElement(
+        'div',
+        {className: '_5533'},
+        FluxContainer_AdsPEDraftSyncStatusContainer_14(17),
+        FluxContainer_viewFn_16(19),
+        null,
+        XUIButton4(21, 'discard'),
+        XUIButton4(24)
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEPublishButtonContainer_18 = function (x) {
+    if (x === 26) {
+      return AdsPEPublishButton17(25);
+    }
+  };
+
+  var InlineBlock19 = function (x) {
+    if (x === 30) {
+      return React.createElement(
+        'div',
+        {className: 'uiPopover _6a _6b', disabled: null},
+        ReactImage0(29)
+      );
+    }
+    if (x === 73) {
+      return React.createElement(
+        'div',
+        {className: 'uiPopover _6a _6b', disabled: null},
+        XUIButton4(72)
+      );
+    }
+    if (x === 82) {
+      return React.createElement(
+        'div',
+        {className: '_1nwm uiPopover _6a _6b', disabled: null},
+        XUIButton4(81)
+      );
+    }
+    if (x === 101) {
+      return React.createElement(
+        'div',
+        {size: 'large', className: 'uiPopover _6a _6b', disabled: null},
+        XUIButton4(100)
+      );
+    }
+    if (x === 273) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3-90 uiPopover _6a _6b',
+          style: {marginTop: 2},
+          disabled: null,
+        },
+        ReactXUIPopoverButton6(272)
+      );
+    }
+  };
+
+  var ReactPopoverMenu20 = function (x) {
+    if (x === 31) {
+      return InlineBlock19(30);
+    }
+    if (x === 74) {
+      return InlineBlock19(73);
+    }
+    if (x === 83) {
+      return InlineBlock19(82);
+    }
+    if (x === 102) {
+      return InlineBlock19(101);
+    }
+    if (x === 274) {
+      return InlineBlock19(273);
+    }
+  };
+
+  var LeftRight21 = function (x) {
+    if (x === 34) {
+      return React.createElement(
+        'div',
+        {className: 'clearfix'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          React.createElement(
+            'div',
+            {className: '_34_j'},
+            React.createElement(
+              'div',
+              {className: '_34_k'},
+              AdsErrorBoundary10(10)
+            ),
+            React.createElement(
+              'div',
+              {className: '_2u-6'},
+              AdsErrorBoundary10(14)
+            )
+          )
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: '_ohf rfloat'},
+          React.createElement(
+            'div',
+            {className: '_34_m'},
+            React.createElement(
+              'div',
+              {key: '0', className: '_5ju2'},
+              AdsErrorBoundary10(28)
+            ),
+            React.createElement(
+              'div',
+              {key: '1', className: '_5ju2'},
+              AdsErrorBoundary10(33)
+            )
+          )
+        )
+      );
+    }
+    if (x === 232) {
+      return React.createElement(
+        'div',
+        {direction: 'left', className: 'clearfix'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          AdsLabeledField104(231)
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: ''},
+          React.createElement(
+            'div',
+            {className: '_42ef'},
+            React.createElement(
+              'div',
+              {className: '_2oc7'},
+              'Clicks to Website'
+            )
+          )
+        )
+      );
+    }
+    if (x === 235) {
+      return React.createElement(
+        'div',
+        {className: '_3-8x clearfix', direction: 'left'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          AdsLabeledField104(234)
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: ''},
+          React.createElement(
+            'div',
+            {className: '_42ef'},
+            React.createElement('div', {className: '_2oc7'}, 'Auction')
+          )
+        )
+      );
+    }
+    if (x === 245) {
+      return React.createElement(
+        'div',
+        {className: '_3-8y clearfix', direction: 'left'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          AdsLabeledField104(240)
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: ''},
+          React.createElement(
+            'div',
+            {className: '_42ef'},
+            FluxContainer_AdsCampaignGroupSpendCapContainer_107(244)
+          )
+        )
+      );
+    }
+    if (x === 277) {
+      return React.createElement(
+        'div',
+        {className: '_5dw9 _5dwa clearfix'},
+        React.createElement(
+          'div',
+          {key: 'left', className: '_ohe lfloat'},
+          XUICardHeaderTitle100(265)
+        ),
+        React.createElement(
+          'div',
+          {key: 'right', className: '_ohf rfloat'},
+          FluxContainer_AdsPluginizedLinksMenuContainer_121(276)
+        )
+      );
+    }
+  };
+
+  var AdsUnifiedNavigationLocalNav22 = function (x) {
+    if (x === 35) {
+      return React.createElement('div', {className: '_34_i'}, LeftRight21(34));
+    }
+  };
+
+  var XUIDialog23 = function (x) {
+    if (x === 36) {
+      return null;
+    }
+  };
+
+  var AdsPEResetDialog24 = function (x) {
+    if (x === 37) {
+      return React.createElement('span', null, XUIDialog23(36));
+    }
+  };
+
+  var AdsPETopNav25 = function (x) {
+    if (x === 40) {
+      return React.createElement(
+        'div',
+        {style: {width: 1306}},
+        AdsUnifiedNavigationLocalNav22(35),
+        AdsErrorBoundary10(39)
+      );
+    }
+  };
+
+  var FluxContainer_AdsPETopNavContainer_26 = function (x) {
+    if (x === 41) {
+      return AdsPETopNav25(40);
+    }
+  };
+
+  var XUIAbstractGlyphButton27 = function (x) {
+    if (x === 46) {
+      return AbstractButton3(45);
+    }
+    if (x === 150) {
+      return AbstractButton3(149);
+    }
+  };
+
+  var XUICloseButton28 = function (x) {
+    if (x === 47) {
+      return XUIAbstractGlyphButton27(46);
+    }
+    if (x === 151) {
+      return XUIAbstractGlyphButton27(150);
+    }
+  };
+
+  var XUIText29 = function (x) {
+    if (x === 48) {
+      return React.createElement(
+        'span',
+        {display: 'inline', className: ' _50f7'},
+        'Ads Manager'
+      );
+    }
+    if (x === 205) {
+      return React.createElement(
+        'span',
+        {className: '_2x9f  _50f5 _50f7', display: 'inline'},
+        'Editing Campaign'
+      );
+    }
+    if (x === 206) {
+      return React.createElement(
+        'span',
+        {display: 'inline', className: ' _50f5 _50f7'},
+        'Test Campaign'
+      );
+    }
+  };
+
+  var XUINotice30 = function (x) {
+    if (x === 51) {
+      return React.createElement(
+        'div',
+        {size: 'medium', className: '_585n _585o _2wdd'},
+        ReactImage0(42),
+        XUICloseButton28(47),
+        React.createElement(
+          'div',
+          {className: '_585r _2i-a _50f4'},
+          'Please go to ',
+          Link2(50),
+          ' to set up a payment method for this ad account.'
+        )
+      );
+    }
+  };
+
+  var ReactCSSTransitionGroupChild31 = function (x) {
+    if (x === 52) {
+      return XUINotice30(51);
+    }
+  };
+
+  var ReactTransitionGroup32 = function (x) {
+    if (x === 53) {
+      return React.createElement(
+        'span',
+        null,
+        ReactCSSTransitionGroupChild31(52)
+      );
+    }
+  };
+
+  var ReactCSSTransitionGroup33 = function (x) {
+    if (x === 54) {
+      return ReactTransitionGroup32(53);
+    }
+  };
+
+  var AdsPETopError34 = function (x) {
+    if (x === 55) {
+      return React.createElement(
+        'div',
+        {className: '_2wdc'},
+        ReactCSSTransitionGroup33(54)
+      );
+    }
+  };
+
+  var FluxContainer_AdsPETopErrorContainer_35 = function (x) {
+    if (x === 56) {
+      return AdsPETopError34(55);
+    }
+  };
+
+  var FluxContainer_AdsGuidanceChannel_36 = function (x) {
+    if (x === 59) {
+      return null;
+    }
+  };
+
+  var ResponsiveBlock37 = function (x) {
+    if (x === 62) {
+      return React.createElement(
+        'div',
+        {className: '_4u-c'},
+        [AdsErrorBoundary10(58), AdsErrorBoundary10(61)],
+        React.createElement(
+          'div',
+          {key: 'sensor', className: '_4u-f'},
+          React.createElement('iframe', {
+            'aria-hidden': 'true',
+            className: '_1_xb',
+            tabIndex: '-1',
+          })
+        )
+      );
+    }
+    if (x === 469) {
+      return React.createElement(
+        'div',
+        {className: '_4u-c'},
+        AdsPEDataTableContainer158(468),
+        React.createElement(
+          'div',
+          {key: 'sensor', className: '_4u-f'},
+          React.createElement('iframe', {
+            'aria-hidden': 'true',
+            className: '_1_xb',
+            tabIndex: '-1',
+          })
+        )
+      );
+    }
+  };
+
+  var FluxContainer_AdsBulkEditDialogContainer_38 = function (x) {
+    if (x === 63) {
+      return null;
+    }
+  };
+
+  var Column39 = function (x) {
+    if (x === 66) {
+      return React.createElement(
+        'div',
+        {className: '_4bl8 _4bl7'},
+        React.createElement(
+          'div',
+          {className: '_3c5f'},
+          null,
+          null,
+          React.createElement('div', {className: '_3c5i'}),
+          null
+        )
+      );
+    }
+  };
+
+  var XUIButtonGroup40 = function (x) {
+    if (x === 75) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        XUIButton4(69),
+        ReactPopoverMenu20(74)
+      );
+    }
+    if (x === 84) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        XUIButton4(78),
+        ReactPopoverMenu20(83)
+      );
+    }
+    if (x === 97) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        XUIButton4(90),
+        XUIButton4(93),
+        XUIButton4(96)
+      );
+    }
+    if (x === 117) {
+      return React.createElement(
+        'div',
+        {className: '_5n7z _51xa'},
+        AdsPEExportImportMenuContainer48(107),
+        XUIButton4(110),
+        AdsPECampaignGroupTagContainer51(116)
+      );
+    }
+  };
+
+  var AdsPEEditToolbarButton41 = function (x) {
+    if (x === 85) {
+      return XUIButtonGroup40(84);
+    }
+  };
+
+  var FluxContainer_AdsPEEditCampaignGroupToolbarButtonContainer_42 = function (
+    x
+  ) {
+    if (x === 86) {
+      return AdsPEEditToolbarButton41(85);
+    }
+  };
+
+  var FluxContainer_AdsPEEditToolbarButtonContainer_43 = function (x) {
+    if (x === 87) {
+      return FluxContainer_AdsPEEditCampaignGroupToolbarButtonContainer_42(86);
+    }
+  };
+
+  var AdsPEExportImportMenu44 = function (x) {
+    if (x === 103) {
+      return ReactPopoverMenu20(102);
+    }
+  };
+
+  var FluxContainer_AdsPECustomizeExportContainer_45 = function (x) {
+    if (x === 104) {
+      return null;
+    }
+  };
+
+  var AdsPEExportAsTextDialog46 = function (x) {
+    if (x === 105) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEExportAsTextDialogContainer_47 = function (x) {
+    if (x === 106) {
+      return AdsPEExportAsTextDialog46(105);
+    }
+  };
+
+  var AdsPEExportImportMenuContainer48 = function (x) {
+    if (x === 107) {
+      return React.createElement(
+        'span',
+        null,
+        AdsPEExportImportMenu44(103),
+        FluxContainer_AdsPECustomizeExportContainer_45(104),
+        FluxContainer_AdsPEExportAsTextDialogContainer_47(106),
+        null,
+        null
+      );
+    }
+  };
+
+  var Constructor49 = function (x) {
+    if (x === 114) {
+      return null;
+    }
+    if (x === 142) {
+      return null;
+    }
+    if (x === 143) {
+      return null;
+    }
+    if (x === 183) {
+      return null;
+    }
+  };
+
+  var TagSelectorPopover50 = function (x) {
+    if (x === 115) {
+      return React.createElement(
+        'span',
+        {className: ' _3d6e'},
+        XUIButton4(113),
+        Constructor49(114)
+      );
+    }
+  };
+
+  var AdsPECampaignGroupTagContainer51 = function (x) {
+    if (x === 116) {
+      return TagSelectorPopover50(115);
+    }
+  };
+
+  var AdsRuleToolbarMenu52 = function (x) {
+    if (x === 118) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPERuleToolbarMenuContainer_53 = function (x) {
+    if (x === 119) {
+      return AdsRuleToolbarMenu52(118);
+    }
+  };
+
+  var FillColumn54 = function (x) {
+    if (x === 120) {
+      return React.createElement(
+        'div',
+        {className: '_4bl9'},
+        React.createElement(
+          'span',
+          {className: '_3c5e'},
+          React.createElement(
+            'span',
+            null,
+            XUIButtonGroup40(75),
+            FluxContainer_AdsPEEditToolbarButtonContainer_43(87),
+            null,
+            XUIButtonGroup40(97)
+          ),
+          XUIButtonGroup40(117),
+          FluxContainer_AdsPERuleToolbarMenuContainer_53(119)
+        )
+      );
+    }
+  };
+
+  var Layout55 = function (x) {
+    if (x === 121) {
+      return React.createElement(
+        'div',
+        {className: 'clearfix'},
+        Column39(66),
+        FillColumn54(120)
+      );
+    }
+  };
+
+  var AdsPEMainPaneToolbar56 = function (x) {
+    if (x === 122) {
+      return React.createElement(
+        'div',
+        {className: '_3c5b clearfix'},
+        Layout55(121)
+      );
+    }
+  };
+
+  var AdsPECampaignGroupToolbarContainer57 = function (x) {
+    if (x === 123) {
+      return AdsPEMainPaneToolbar56(122);
+    }
+  };
+
+  var AdsPEFiltersPopover58 = function (x) {
+    if (x === 144) {
+      return React.createElement(
+        'span',
+        {className: '_5b-l  _5bbe'},
+        ReactXUIPopoverButton6(133),
+        ReactXUIPopoverButton6(141),
+        [Constructor49(142), Constructor49(143)]
+      );
+    }
+  };
+
+  var AbstractCheckboxInput59 = function (x) {
+    if (x === 145) {
+      return React.createElement(
+        'label',
+        {className: 'uiInputLabelInput _55sg _kv1'},
+        React.createElement('input', {
+          checked: true,
+          disabled: true,
+          name: 'filterUnpublished',
+          value: 'on',
+          onClick: function () {},
+          className: null,
+          id: 'js_input_label_21',
+          type: 'checkbox',
+        }),
+        React.createElement('span', {
+          'data-hover': null,
+          'data-tooltip-content': undefined,
+        })
+      );
+    }
+    if (x === 336) {
+      return React.createElement(
+        'label',
+        {className: '_4h2r _55sg _kv1'},
+        React.createElement('input', {
+          checked: undefined,
+          onChange: function () {},
+          className: null,
+          type: 'checkbox',
+        }),
+        React.createElement('span', {
+          'data-hover': null,
+          'data-tooltip-content': undefined,
+        })
+      );
+    }
+  };
+
+  var XUICheckboxInput60 = function (x) {
+    if (x === 146) {
+      return AbstractCheckboxInput59(145);
+    }
+    if (x === 337) {
+      return AbstractCheckboxInput59(336);
+    }
+  };
+
+  var InputLabel61 = function (x) {
+    if (x === 147) {
+      return React.createElement(
+        'div',
+        {display: 'block', className: 'uiInputLabel clearfix'},
+        XUICheckboxInput60(146),
+        React.createElement(
+          'label',
+          {className: 'uiInputLabelLabel', htmlFor: 'js_input_label_21'},
+          'Always show new items'
+        )
+      );
+    }
+  };
+
+  var AdsPopoverLink62 = function (x) {
+    if (x === 154) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(
+          'span',
+          {
+            onMouseEnter: function () {},
+            onMouseLeave: function () {},
+            onMouseUp: undefined,
+          },
+          React.createElement('span', {className: '_3o_j'}),
+          ReactImage0(153)
+        ),
+        null
+      );
+    }
+    if (x === 238) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement(
+          'span',
+          {
+            onMouseEnter: function () {},
+            onMouseLeave: function () {},
+            onMouseUp: undefined,
+          },
+          React.createElement('span', {className: '_3o_j'}),
+          ReactImage0(237)
+        ),
+        null
+      );
+    }
+  };
+
+  var AdsHelpLink63 = function (x) {
+    if (x === 155) {
+      return AdsPopoverLink62(154);
+    }
+    if (x === 239) {
+      return AdsPopoverLink62(238);
+    }
+  };
+
+  var BUIFilterTokenInput64 = function (x) {
+    if (x === 158) {
+      return React.createElement(
+        'div',
+        {className: '_5b5o _3yz3 _4cld'},
+        React.createElement(
+          'div',
+          {className: '_5b5t _2d2k'},
+          ReactImage0(152),
+          React.createElement(
+            'div',
+            {className: '_5b5r'},
+            'Campaigns: (1)',
+            AdsHelpLink63(155)
+          )
+        ),
+        XUIButton4(157)
+      );
+    }
+  };
+
+  var BUIFilterToken65 = function (x) {
+    if (x === 159) {
+      return React.createElement(
+        'div',
+        {className: '_3yz1 _3yz2 _3dad'},
+        React.createElement(
+          'div',
+          {className: '_3yz4', 'aria-hidden': false},
+          React.createElement(
+            'div',
+            {onClick: function () {}, className: '_3yz5'},
+            ReactImage0(148),
+            React.createElement('div', {className: '_3yz7'}, 'Campaigns:'),
+            React.createElement(
+              'div',
+              {
+                className: 'ellipsis _3yz8',
+                'data-hover': 'tooltip',
+                'data-tooltip-display': 'overflow',
+              },
+              '(1)'
+            )
+          ),
+          null,
+          XUICloseButton28(151)
+        ),
+        BUIFilterTokenInput64(158)
+      );
+    }
+  };
+
+  var BUIFilterTokenCreateButton66 = function (x) {
+    if (x === 163) {
+      return React.createElement('div', {className: '_1tc'}, XUIButton4(162));
+    }
+  };
+
+  var BUIFilterTokenizer67 = function (x) {
+    if (x === 164) {
+      return React.createElement(
+        'div',
+        {className: '_5b-m  clearfix'},
+        undefined,
+        [],
+        BUIFilterToken65(159),
+        BUIFilterTokenCreateButton66(163),
+        null,
+        React.createElement('div', {className: '_49u3'})
+      );
+    }
+  };
+
+  var XUIAmbientNUX68 = function (x) {
+    if (x === 165) {
+      return null;
+    }
+    if (x === 189) {
+      return null;
+    }
+    if (x === 200) {
+      return null;
+    }
+  };
+
+  var XUIAmbientNUX69 = function (x) {
+    if (x === 166) {
+      return XUIAmbientNUX68(165);
+    }
+    if (x === 190) {
+      return XUIAmbientNUX68(189);
+    }
+    if (x === 201) {
+      return XUIAmbientNUX68(200);
+    }
+  };
+
+  var AdsPEAmbientNUXMegaphone70 = function (x) {
+    if (x === 167) {
+      return React.createElement(
+        'span',
+        null,
+        React.createElement('span', {}),
+        XUIAmbientNUX69(166)
+      );
+    }
+  };
+
+  var AdsPEFilters71 = function (x) {
+    if (x === 168) {
+      return React.createElement(
+        'div',
+        {className: '_4rw_'},
+        AdsPEFiltersPopover58(144),
+        React.createElement('div', {className: '_1eo'}, InputLabel61(147)),
+        BUIFilterTokenizer67(164),
+        '',
+        AdsPEAmbientNUXMegaphone70(167)
+      );
+    }
+  };
+
+  var AdsPEFilterContainer72 = function (x) {
+    if (x === 169) {
+      return AdsPEFilters71(168);
+    }
+  };
+
+  var AdsPETablePager73 = function (x) {
+    if (x === 172) {
+      return null;
+    }
+  };
+
+  var AdsPECampaignGroupTablePagerContainer74 = function (x) {
+    if (x === 173) {
+      return AdsPETablePager73(172);
+    }
+  };
+
+  var AdsPETablePagerContainer75 = function (x) {
+    if (x === 174) {
+      return AdsPECampaignGroupTablePagerContainer74(173);
+    }
+  };
+
+  var ReactXUIError76 = function (x) {
+    if (x === 181) {
+      return AbstractButton3(180);
+    }
+    if (x === 216) {
+      return React.createElement(
+        'div',
+        {className: '_40bf _2vl4 _1h18'},
+        null,
+        null,
+        React.createElement(
+          'div',
+          {className: '_2vl9 _1h1f', style: {backgroundColor: '#fff'}},
+          React.createElement(
+            'div',
+            {className: '_2vla _1h1g'},
+            React.createElement(
+              'div',
+              null,
+              null,
+              React.createElement('textarea', {
+                className: '_2vli _2vlj _1h26 _1h27',
+                dir: 'auto',
+                disabled: undefined,
+                id: undefined,
+                maxLength: null,
+                value: 'Test Campaign',
+                onBlur: function () {},
+                onChange: function () {},
+                onFocus: function () {},
+                onKeyDown: function () {},
+              }),
+              null
+            ),
+            React.createElement('div', {
+              'aria-hidden': 'true',
+              className: '_2vlk',
+            })
+          )
+        ),
+        null
+      );
+    }
+    if (x === 221) {
+      return XUICard94(220);
+    }
+    if (x === 250) {
+      return XUICard94(249);
+    }
+    if (x === 280) {
+      return XUICard94(279);
+    }
+  };
+
+  var BUIPopoverButton77 = function (x) {
+    if (x === 182) {
+      return ReactXUIError76(181);
+    }
+  };
+
+  var BUIDateRangePicker78 = function (x) {
+    if (x === 184) {
+      return React.createElement('span', null, BUIPopoverButton77(182), [
+        Constructor49(183),
+      ]);
+    }
+  };
+
+  var AdsPEStatsRangePicker79 = function (x) {
+    if (x === 185) {
+      return BUIDateRangePicker78(184);
+    }
+  };
+
+  var AdsPEStatRange80 = function (x) {
+    if (x === 191) {
+      return React.createElement(
+        'div',
+        {className: '_3c5k'},
+        React.createElement('span', {className: '_3c5j'}, 'Stats:'),
+        React.createElement(
+          'span',
+          {className: '_3c5l'},
+          AdsPEStatsRangePicker79(185),
+          XUIButton4(188)
+        ),
+        [XUIAmbientNUX69(190)]
+      );
+    }
+  };
+
+  var AdsPEStatRangeContainer81 = function (x) {
+    if (x === 192) {
+      return AdsPEStatRange80(191);
+    }
+  };
+
+  var AdsPESideTrayTabButton82 = function (x) {
+    if (x === 196) {
+      return React.createElement(
+        'div',
+        {className: '_1-ly _59j9 _d9a', onClick: function () {}},
+        ReactImage0(195),
+        React.createElement('div', {className: '_vf7'}),
+        React.createElement('div', {className: '_vf8'})
+      );
+    }
+    if (x === 199) {
+      return React.createElement(
+        'div',
+        {className: ' _1-lz _d9a', onClick: function () {}},
+        ReactImage0(198),
+        React.createElement('div', {className: '_vf7'}),
+        React.createElement('div', {className: '_vf8'})
+      );
+    }
+    if (x === 203) {
+      return null;
+    }
+  };
+
+  var AdsPEEditorTrayTabButton83 = function (x) {
+    if (x === 197) {
+      return AdsPESideTrayTabButton82(196);
+    }
+  };
+
+  var AdsPEInsightsTrayTabButton84 = function (x) {
+    if (x === 202) {
+      return React.createElement(
+        'span',
+        null,
+        AdsPESideTrayTabButton82(199),
+        XUIAmbientNUX69(201)
+      );
+    }
+  };
+
+  var AdsPENekoDebuggerTrayTabButton85 = function (x) {
+    if (x === 204) {
+      return AdsPESideTrayTabButton82(203);
+    }
+  };
+
+  var AdsPEEditorChildLink86 = function (x) {
+    if (x === 211) {
+      return React.createElement(
+        'div',
+        {className: '_3ywr'},
+        Link2(208),
+        React.createElement('span', {className: '_3ywq'}, '|'),
+        Link2(210)
+      );
+    }
+  };
+
+  var AdsPEEditorChildLinkContainer87 = function (x) {
+    if (x === 212) {
+      return AdsPEEditorChildLink86(211);
+    }
+  };
+
+  var AdsPEHeaderSection88 = function (x) {
+    if (x === 213) {
+      return React.createElement(
+        'div',
+        {className: '_yke'},
+        React.createElement('div', {className: '_2x9d _pr-'}),
+        XUIText29(205),
+        React.createElement(
+          'div',
+          {className: '_3a-a'},
+          React.createElement('div', {className: '_3a-b'}, XUIText29(206))
+        ),
+        AdsPEEditorChildLinkContainer87(212)
+      );
+    }
+  };
+
+  var AdsPECampaignGroupHeaderSectionContainer89 = function (x) {
+    if (x === 214) {
+      return AdsPEHeaderSection88(213);
+    }
+  };
+
+  var AdsEditorLoadingErrors90 = function (x) {
+    if (x === 215) {
+      return null;
+    }
+  };
+
+  var AdsTextInput91 = function (x) {
+    if (x === 217) {
+      return ReactXUIError76(216);
+    }
+  };
+
+  var BUIFormElement92 = function (x) {
+    if (x === 218) {
+      return React.createElement(
+        'div',
+        {className: '_5521 clearfix'},
+        React.createElement(
+          'div',
+          {className: '_5522 _3w5q'},
+          React.createElement(
+            'label',
+            {
+              onClick: undefined,
+              htmlFor: '1467872040612:1961945894',
+              className: '_5523 _3w5r',
+            },
+            'Campaign Name',
+            null
+          )
+        ),
+        React.createElement(
+          'div',
+          {className: '_5527'},
+          React.createElement(
+            'div',
+            {className: '_5528'},
+            React.createElement(
+              'span',
+              {key: '.0', className: '_40bg', id: '1467872040612:1961945894'},
+              AdsTextInput91(217),
+              null
+            )
+          ),
+          null
+        )
+      );
+    }
+  };
+
+  var BUIForm93 = function (x) {
+    if (x === 219) {
+      return React.createElement(
+        'div',
+        {className: '_5ks1 _550r  _550t _550y _3w5n'},
+        BUIFormElement92(218)
+      );
+    }
+  };
+
+  var XUICard94 = function (x) {
+    if (x === 220) {
+      return React.createElement(
+        'div',
+        {className: '_40bc _12k2 _4-u2  _4-u8'},
+        BUIForm93(219)
+      );
+    }
+    if (x === 249) {
+      return React.createElement(
+        'div',
+        {className: '_12k2 _4-u2  _4-u8'},
+        AdsCardHeader103(230),
+        AdsCardSection108(248)
+      );
+    }
+    if (x === 279) {
+      return React.createElement(
+        'div',
+        {className: '_12k2 _4-u2  _4-u8'},
+        AdsCardLeftRightHeader122(278)
+      );
+    }
+  };
+
+  var AdsCard95 = function (x) {
+    if (x === 222) {
+      return ReactXUIError76(221);
+    }
+    if (x === 251) {
+      return ReactXUIError76(250);
+    }
+    if (x === 281) {
+      return ReactXUIError76(280);
+    }
+  };
+
+  var AdsEditorNameSection96 = function (x) {
+    if (x === 223) {
+      return AdsCard95(222);
+    }
+  };
+
+  var AdsCampaignGroupNameSectionContainer97 = function (x) {
+    if (x === 224) {
+      return AdsEditorNameSection96(223);
+    }
+  };
+
+  var _render98 = function (x) {
+    if (x === 225) {
+      return AdsCampaignGroupNameSectionContainer97(224);
+    }
+  };
+
+  var AdsPluginWrapper99 = function (x) {
+    if (x === 226) {
+      return _render98(225);
+    }
+    if (x === 255) {
+      return _render111(254);
+    }
+    if (x === 258) {
+      return _render113(257);
+    }
+    if (x === 287) {
+      return _render127(286);
+    }
+    if (x === 291) {
+      return _render130(290);
+    }
+  };
+
+  var XUICardHeaderTitle100 = function (x) {
+    if (x === 227) {
+      return React.createElement(
+        'span',
+        {className: '_38my'},
+        'Campaign Details',
+        null,
+        React.createElement('span', {className: '_c1c'})
+      );
+    }
+    if (x === 265) {
+      return React.createElement(
+        'span',
+        {className: '_38my'},
+        [
+          React.createElement(
+            'span',
+            {key: 1},
+            'Campaign ID',
+            ': ',
+            '98010048849317'
+          ),
+          React.createElement(
+            'div',
+            {className: '_5lh9', key: 2},
+            FluxContainer_AdsCampaignGroupStatusSwitchContainer_119(264)
+          ),
+        ],
+        null,
+        React.createElement('span', {className: '_c1c'})
+      );
+    }
+  };
+
+  var XUICardSection101 = function (x) {
+    if (x === 228) {
+      return React.createElement(
+        'div',
+        {className: '_5dw9 _5dwa _4-u3'},
+        [XUICardHeaderTitle100(227)],
+        undefined,
+        undefined,
+        React.createElement('div', {className: '_3s3-'})
+      );
+    }
+    if (x === 247) {
+      return React.createElement(
+        'div',
+        {className: '_12jy _4-u3'},
+        React.createElement(
+          'div',
+          {className: '_3-8j'},
+          FlexibleBlock105(233),
+          FlexibleBlock105(236),
+          FlexibleBlock105(246),
+          null,
+          null
+        )
+      );
+    }
+  };
+
+  var XUICardHeader102 = function (x) {
+    if (x === 229) {
+      return XUICardSection101(228);
+    }
+  };
+
+  var AdsCardHeader103 = function (x) {
+    if (x === 230) {
+      return XUICardHeader102(229);
+    }
+  };
+
+  var AdsLabeledField104 = function (x) {
+    if (x === 231) {
+      return React.createElement(
+        'div',
+        {className: '_2oc6 _3bvz', label: 'Objective'},
+        React.createElement(
+          'label',
+          {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+          'Objective '
+        ),
+        null,
+        React.createElement('div', {className: '_3bv-'})
+      );
+    }
+    if (x === 234) {
+      return React.createElement(
+        'div',
+        {className: '_2oc6 _3bvz', label: 'Buying Type'},
+        React.createElement(
+          'label',
+          {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+          'Buying Type '
+        ),
+        null,
+        React.createElement('div', {className: '_3bv-'})
+      );
+    }
+    if (x === 240) {
+      return React.createElement(
+        'div',
+        {className: '_2oc6 _3bvz'},
+        React.createElement(
+          'label',
+          {className: '_4el4 _3qwj _3hy-', htmlFor: undefined},
+          'Campaign Spending Limit '
+        ),
+        AdsHelpLink63(239),
+        React.createElement('div', {className: '_3bv-'})
+      );
+    }
+  };
+
+  var FlexibleBlock105 = function (x) {
+    if (x === 233) {
+      return LeftRight21(232);
+    }
+    if (x === 236) {
+      return LeftRight21(235);
+    }
+    if (x === 246) {
+      return LeftRight21(245);
+    }
+  };
+
+  var AdsBulkCampaignSpendCapField106 = function (x) {
+    if (x === 243) {
+      return React.createElement(
+        'div',
+        {className: '_33dv'},
+        '',
+        Link2(242),
+        ' (optional)'
+      );
+    }
+  };
+
+  var FluxContainer_AdsCampaignGroupSpendCapContainer_107 = function (x) {
+    if (x === 244) {
+      return AdsBulkCampaignSpendCapField106(243);
+    }
+  };
+
+  var AdsCardSection108 = function (x) {
+    if (x === 248) {
+      return XUICardSection101(247);
+    }
+  };
+
+  var AdsEditorCampaignGroupDetailsSection109 = function (x) {
+    if (x === 252) {
+      return AdsCard95(251);
+    }
+  };
+
+  var AdsEditorCampaignGroupDetailsSectionContainer110 = function (x) {
+    if (x === 253) {
+      return AdsEditorCampaignGroupDetailsSection109(252);
+    }
+  };
+
+  var _render111 = function (x) {
+    if (x === 254) {
+      return AdsEditorCampaignGroupDetailsSectionContainer110(253);
+    }
+  };
+
+  var FluxContainer_AdsEditorToplineDetailsSectionContainer_112 = function (x) {
+    if (x === 256) {
+      return null;
+    }
+  };
+
+  var _render113 = function (x) {
+    if (x === 257) {
+      return FluxContainer_AdsEditorToplineDetailsSectionContainer_112(256);
+    }
+  };
+
+  var AdsStickyArea114 = function (x) {
+    if (x === 259) {
+      return React.createElement(
+        'div',
+        {},
+        React.createElement('div', {onWheel: function () {}})
+      );
+    }
+    if (x === 292) {
+      return React.createElement(
+        'div',
+        {},
+        React.createElement('div', {onWheel: function () {}}, [
+          React.createElement(
+            'div',
+            {key: 'campaign_group_errors_section98010048849317'},
+            AdsPluginWrapper99(291)
+          ),
+        ])
+      );
+    }
+  };
+
+  var FluxContainer_AdsEditorColumnContainer_115 = function (x) {
+    if (x === 260) {
+      return React.createElement(
+        'div',
+        null,
+        [
+          React.createElement(
+            'div',
+            {key: 'campaign_group_name_section98010048849317'},
+            AdsPluginWrapper99(226)
+          ),
+          React.createElement(
+            'div',
+            {key: 'campaign_group_basic_section98010048849317'},
+            AdsPluginWrapper99(255)
+          ),
+          React.createElement(
+            'div',
+            {key: 'campaign_group_topline_section98010048849317'},
+            AdsPluginWrapper99(258)
+          ),
+        ],
+        AdsStickyArea114(259)
+      );
+    }
+    if (x === 293) {
+      return React.createElement(
+        'div',
+        null,
+        [
+          React.createElement(
+            'div',
+            {key: 'campaign_group_navigation_section98010048849317'},
+            AdsPluginWrapper99(287)
+          ),
+        ],
+        AdsStickyArea114(292)
+      );
+    }
+  };
+
+  var BUISwitch116 = function (x) {
+    if (x === 261) {
+      return React.createElement(
+        'div',
+        {
+          'data-hover': 'tooltip',
+          'data-tooltip-content':
+            'Currently active. Click this switch to deactivate it.',
+          'data-tooltip-position': 'below',
+          disabled: false,
+          value: true,
+          onToggle: function () {},
+          className: '_128j _128k _128n',
+          role: 'checkbox',
+          'aria-checked': 'true',
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_128o',
+            onClick: function () {},
+            onKeyDown: function () {},
+            onMouseDown: function () {},
+            tabIndex: '0',
+          },
+          React.createElement('div', {className: '_128p'})
+        ),
+        null
+      );
+    }
+  };
+
+  var AdsStatusSwitchInternal117 = function (x) {
+    if (x === 262) {
+      return BUISwitch116(261);
+    }
+  };
+
+  var AdsStatusSwitch118 = function (x) {
+    if (x === 263) {
+      return AdsStatusSwitchInternal117(262);
+    }
+  };
+
+  var FluxContainer_AdsCampaignGroupStatusSwitchContainer_119 = function (x) {
+    if (x === 264) {
+      return AdsStatusSwitch118(263);
+    }
+  };
+
+  var AdsLinksMenu120 = function (x) {
+    if (x === 275) {
+      return ReactPopoverMenu20(274);
+    }
+  };
+
+  var FluxContainer_AdsPluginizedLinksMenuContainer_121 = function (x) {
+    if (x === 276) {
+      return React.createElement('div', null, null, AdsLinksMenu120(275));
+    }
+  };
+
+  var AdsCardLeftRightHeader122 = function (x) {
+    if (x === 278) {
+      return LeftRight21(277);
+    }
+  };
+
+  var AdsPEIDSection123 = function (x) {
+    if (x === 282) {
+      return AdsCard95(281);
+    }
+  };
+
+  var FluxContainer_AdsPECampaignGroupIDSectionContainer_124 = function (x) {
+    if (x === 283) {
+      return AdsPEIDSection123(282);
+    }
+  };
+
+  var DeferredComponent125 = function (x) {
+    if (x === 284) {
+      return FluxContainer_AdsPECampaignGroupIDSectionContainer_124(283);
+    }
+  };
+
+  var BootloadedComponent126 = function (x) {
+    if (x === 285) {
+      return DeferredComponent125(284);
+    }
+  };
+
+  var _render127 = function (x) {
+    if (x === 286) {
+      return BootloadedComponent126(285);
+    }
+  };
+
+  var AdsEditorErrorsCard128 = function (x) {
+    if (x === 288) {
+      return null;
+    }
+  };
+
+  var FluxContainer_FunctionalContainer_129 = function (x) {
+    if (x === 289) {
+      return AdsEditorErrorsCard128(288);
+    }
+  };
+
+  var _render130 = function (x) {
+    if (x === 290) {
+      return FluxContainer_FunctionalContainer_129(289);
+    }
+  };
+
+  var AdsEditorMultiColumnLayout131 = function (x) {
+    if (x === 294) {
+      return React.createElement(
+        'div',
+        {className: '_psh'},
+        React.createElement(
+          'div',
+          {className: '_3cc0'},
+          React.createElement(
+            'div',
+            null,
+            AdsEditorLoadingErrors90(215),
+            React.createElement(
+              'div',
+              {className: '_3ms3'},
+              React.createElement(
+                'div',
+                {className: '_3ms4'},
+                FluxContainer_AdsEditorColumnContainer_115(260)
+              ),
+              React.createElement(
+                'div',
+                {className: '_3pvg'},
+                FluxContainer_AdsEditorColumnContainer_115(293)
+              )
+            )
+          )
+        )
+      );
+    }
+  };
+
+  var AdsPECampaignGroupEditor132 = function (x) {
+    if (x === 295) {
+      return React.createElement(
+        'div',
+        null,
+        AdsPECampaignGroupHeaderSectionContainer89(214),
+        AdsEditorMultiColumnLayout131(294)
+      );
+    }
+  };
+
+  var AdsPECampaignGroupEditorContainer133 = function (x) {
+    if (x === 296) {
+      return AdsPECampaignGroupEditor132(295);
+    }
+  };
+
+  var AdsPESideTrayTabContent134 = function (x) {
+    if (x === 297) {
+      return React.createElement(
+        'div',
+        {className: '_1o_8 _44ra _5cyn'},
+        AdsPECampaignGroupEditorContainer133(296)
+      );
+    }
+  };
+
+  var AdsPEEditorTrayTabContentContainer135 = function (x) {
+    if (x === 298) {
+      return AdsPESideTrayTabContent134(297);
+    }
+  };
+
+  var AdsPEMultiTabDrawer136 = function (x) {
+    if (x === 299) {
+      return React.createElement(
+        'div',
+        {className: '_2kev _2kex'},
+        React.createElement(
+          'div',
+          {className: '_5yno'},
+          AdsPEEditorTrayTabButton83(197),
+          AdsPEInsightsTrayTabButton84(202),
+          AdsPENekoDebuggerTrayTabButton85(204)
+        ),
+        React.createElement(
+          'div',
+          {className: '_5ynn'},
+          AdsPEEditorTrayTabContentContainer135(298),
+          null
+        )
+      );
+    }
+  };
+
+  var FluxContainer_AdsPEMultiTabDrawerContainer_137 = function (x) {
+    if (x === 300) {
+      return AdsPEMultiTabDrawer136(299);
+    }
+  };
+
+  var AdsPESimpleOrganizer138 = function (x) {
+    if (x === 309) {
+      return React.createElement(
+        'div',
+        {className: '_tm2'},
+        XUIButton4(304),
+        XUIButton4(306),
+        XUIButton4(308)
+      );
+    }
+  };
+
+  var AdsPEOrganizerContainer139 = function (x) {
+    if (x === 310) {
+      return React.createElement('div', null, AdsPESimpleOrganizer138(309));
+    }
+  };
+
+  var FixedDataTableColumnResizeHandle140 = function (x) {
+    if (x === 313) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3487 _3488 _3489',
+          style: {width: 0, height: 25, left: 0},
+        },
+        React.createElement('div', {className: '_348a', style: {height: 25}})
+      );
+    }
+  };
+
+  var AdsPETableHeader141 = function (x) {
+    if (x === 315) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1ksv _1vd7 _4h2r', id: undefined},
+        ReactImage0(314),
+        React.createElement('span', {className: '_1cid'}, 'Campaigns')
+      );
+    }
+    if (x === 320) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1vd7 _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Performance')
+      );
+    }
+    if (x === 323) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1vd7 _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Overview')
+      );
+    }
+    if (x === 326) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _1vd7 _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Toplines')
+      );
+    }
+    if (x === 329) {
+      return React.createElement('div', {
+        className: '_1cig _1vd7 _4h2r',
+        id: undefined,
+      });
+    }
+    if (x === 340) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Campaign Name')
+      );
+    }
+    if (x === 346) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1cig _25fg',
+          id: undefined,
+          'data-tooltip-content': 'Changed',
+          'data-hover': 'tooltip',
+        },
+        ReactImage0(345),
+        null
+      );
+    }
+    if (x === 352) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1cig _25fg',
+          id: 'ads_pe_table_error_header',
+          'data-tooltip-content': 'Errors',
+          'data-hover': 'tooltip',
+        },
+        ReactImage0(351),
+        null
+      );
+    }
+    if (x === 357) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Status')
+      );
+    }
+    if (x === 362) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Delivery')
+      );
+    }
+    if (x === 369) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Results')
+      );
+    }
+    if (x === 374) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Cost')
+      );
+    }
+    if (x === 379) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Reach')
+      );
+    }
+    if (x === 384) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Impressions')
+      );
+    }
+    if (x === 389) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Clicks')
+      );
+    }
+    if (x === 394) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Avg. CPM')
+      );
+    }
+    if (x === 399) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Avg. CPC')
+      );
+    }
+    if (x === 404) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'CTR %')
+      );
+    }
+    if (x === 409) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Spent')
+      );
+    }
+    if (x === 414) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Objective')
+      );
+    }
+    if (x === 419) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Buying Type')
+      );
+    }
+    if (x === 424) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Campaign ID')
+      );
+    }
+    if (x === 429) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Start')
+      );
+    }
+    if (x === 434) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'End')
+      );
+    }
+    if (x === 439) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Date created')
+      );
+    }
+    if (x === 444) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Date last edited')
+      );
+    }
+    if (x === 449) {
+      return React.createElement(
+        'div',
+        {className: '_1cig _25fg _4h2r', id: undefined},
+        null,
+        React.createElement('span', {className: '_1cid'}, 'Tags')
+      );
+    }
+    if (x === 452) {
+      return React.createElement('div', {
+        className: '_1cig _25fg _4h2r',
+        id: undefined,
+      });
+    }
+  };
+
+  var TransitionCell142 = function (x) {
+    if (x === 316) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Campaigns',
+          height: 40,
+          width: 721,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 721},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(315)
+          )
+        )
+      );
+    }
+    if (x === 321) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Performance',
+          height: 40,
+          width: 798,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 798},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(320)
+          )
+        )
+      );
+    }
+    if (x === 324) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Overview',
+          height: 40,
+          width: 1022,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 1022},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(323)
+          )
+        )
+      );
+    }
+    if (x === 327) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Toplines',
+          height: 40,
+          width: 0,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 0},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(326)
+          )
+        )
+      );
+    }
+    if (x === 330) {
+      return React.createElement(
+        'div',
+        {
+          label: '',
+          height: 40,
+          width: 25,
+          className: '_4lgc _4h2u',
+          style: {height: 40, width: 25},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(329)
+          )
+        )
+      );
+    }
+    if (x === 338) {
+      return React.createElement(
+        'div',
+        {
+          label: undefined,
+          width: 42,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 42},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            XUICheckboxInput60(337)
+          )
+        )
+      );
+    }
+    if (x === 343) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Campaign Name',
+          width: 400,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 400},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(342)
+          )
+        )
+      );
+    }
+    if (x === 349) {
+      return React.createElement(
+        'div',
+        {
+          label: undefined,
+          width: 33,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 33},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(348)
+          )
+        )
+      );
+    }
+    if (x === 355) {
+      return React.createElement(
+        'div',
+        {
+          label: undefined,
+          width: 36,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 36},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(354)
+          )
+        )
+      );
+    }
+    if (x === 360) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Status',
+          width: 60,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 60},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(359)
+          )
+        )
+      );
+    }
+    if (x === 365) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Delivery',
+          width: 150,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 150},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(364)
+          )
+        )
+      );
+    }
+    if (x === 372) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Results',
+          width: 140,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 140},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(371)
+          )
+        )
+      );
+    }
+    if (x === 377) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Cost',
+          width: 140,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 140},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(376)
+          )
+        )
+      );
+    }
+    if (x === 382) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Reach',
+          width: 80,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 80},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(381)
+          )
+        )
+      );
+    }
+    if (x === 387) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Impressions',
+          width: 80,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 80},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(386)
+          )
+        )
+      );
+    }
+    if (x === 392) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Clicks',
+          width: 60,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 60},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(391)
+          )
+        )
+      );
+    }
+    if (x === 397) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Avg. CPM',
+          width: 80,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 80},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(396)
+          )
+        )
+      );
+    }
+    if (x === 402) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Avg. CPC',
+          width: 78,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 78},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(401)
+          )
+        )
+      );
+    }
+    if (x === 407) {
+      return React.createElement(
+        'div',
+        {
+          label: 'CTR %',
+          width: 70,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 70},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(406)
+          )
+        )
+      );
+    }
+    if (x === 412) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Spent',
+          width: 70,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 70},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(411)
+          )
+        )
+      );
+    }
+    if (x === 417) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Objective',
+          width: 200,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 200},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(416)
+          )
+        )
+      );
+    }
+    if (x === 422) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Buying Type',
+          width: 100,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 100},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(421)
+          )
+        )
+      );
+    }
+    if (x === 427) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Campaign ID',
+          width: 120,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 120},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(426)
+          )
+        )
+      );
+    }
+    if (x === 432) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Start',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(431)
+          )
+        )
+      );
+    }
+    if (x === 437) {
+      return React.createElement(
+        'div',
+        {
+          label: 'End',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(436)
+          )
+        )
+      );
+    }
+    if (x === 442) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Date created',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(441)
+          )
+        )
+      );
+    }
+    if (x === 447) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Date last edited',
+          width: 113,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 113},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            FixedDataTableSortableHeader149(446)
+          )
+        )
+      );
+    }
+    if (x === 450) {
+      return React.createElement(
+        'div',
+        {
+          label: 'Tags',
+          width: 150,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 150},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(449)
+          )
+        )
+      );
+    }
+    if (x === 453) {
+      return React.createElement(
+        'div',
+        {
+          label: '',
+          width: 25,
+          className: '_4lgc _4h2u',
+          height: 25,
+          style: {height: 25, width: 25},
+        },
+        React.createElement(
+          'div',
+          {className: '_4lgd _4h2w'},
+          React.createElement(
+            'div',
+            {className: '_4lge _4h2x'},
+            AdsPETableHeader141(452)
+          )
+        )
+      );
+    }
+  };
+
+  var FixedDataTableCell143 = function (x) {
+    if (x === 317) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 721, left: 0}},
+        undefined,
+        TransitionCell142(316)
+      );
+    }
+    if (x === 322) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 798, left: 0}},
+        undefined,
+        TransitionCell142(321)
+      );
+    }
+    if (x === 325) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 1022, left: 798}},
+        undefined,
+        TransitionCell142(324)
+      );
+    }
+    if (x === 328) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 0, left: 1820}},
+        undefined,
+        TransitionCell142(327)
+      );
+    }
+    if (x === 331) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 40, width: 25, left: 1820}},
+        undefined,
+        TransitionCell142(330)
+      );
+    }
+    if (x === 339) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg6 _4h2m',
+          style: {height: 25, width: 42, left: 0},
+        },
+        undefined,
+        TransitionCell142(338)
+      );
+    }
+    if (x === 344) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 400, left: 42}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(343)
+      );
+    }
+    if (x === 350) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 33, left: 442}},
+        undefined,
+        TransitionCell142(349)
+      );
+    }
+    if (x === 356) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 36, left: 475}},
+        undefined,
+        TransitionCell142(355)
+      );
+    }
+    if (x === 361) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 60, left: 511}},
+        undefined,
+        TransitionCell142(360)
+      );
+    }
+    if (x === 366) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 150, left: 571}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(365)
+      );
+    }
+    if (x === 373) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 140, left: 0},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(372)
+      );
+    }
+    if (x === 378) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 140, left: 140},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(377)
+      );
+    }
+    if (x === 383) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 80, left: 280},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(382)
+      );
+    }
+    if (x === 388) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 80, left: 360},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(387)
+      );
+    }
+    if (x === 393) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 60, left: 440},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(392)
+      );
+    }
+    if (x === 398) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 80, left: 500},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(397)
+      );
+    }
+    if (x === 403) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 78, left: 580},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(402)
+      );
+    }
+    if (x === 408) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 70, left: 658},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(407)
+      );
+    }
+    if (x === 413) {
+      return React.createElement(
+        'div',
+        {
+          className: '_4lg0 _4lg5 _4h2p _4h2m',
+          style: {height: 25, width: 70, left: 728},
+        },
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(412)
+      );
+    }
+    if (x === 418) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 200, left: 798}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(417)
+      );
+    }
+    if (x === 423) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 100, left: 998}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(422)
+      );
+    }
+    if (x === 428) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 120, left: 1098}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(427)
+      );
+    }
+    if (x === 433) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1218}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(432)
+      );
+    }
+    if (x === 438) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1331}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(437)
+      );
+    }
+    if (x === 443) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1444}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(442)
+      );
+    }
+    if (x === 448) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 113, left: 1557}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(447)
+      );
+    }
+    if (x === 451) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 150, left: 1670}},
+        React.createElement(
+          'div',
+          {
+            className: '_4lg9',
+            style: {height: 25},
+            onMouseDown: function () {},
+          },
+          React.createElement('div', {
+            className: '_4lga _4lgb',
+            style: {height: 25},
+          })
+        ),
+        TransitionCell142(450)
+      );
+    }
+    if (x === 454) {
+      return React.createElement(
+        'div',
+        {className: '_4lg0 _4h2m', style: {height: 25, width: 25, left: 1820}},
+        undefined,
+        TransitionCell142(453)
+      );
+    }
+  };
+
+  var FixedDataTableCellGroupImpl144 = function (x) {
+    if (x === 318) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 40,
+            position: 'absolute',
+            width: 721,
+            zIndex: 2,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        FixedDataTableCell143(317)
+      );
+    }
+    if (x === 332) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 40,
+            position: 'absolute',
+            width: 1845,
+            zIndex: 0,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        FixedDataTableCell143(322),
+        FixedDataTableCell143(325),
+        FixedDataTableCell143(328),
+        FixedDataTableCell143(331)
+      );
+    }
+    if (x === 367) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 25,
+            position: 'absolute',
+            width: 721,
+            zIndex: 2,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        FixedDataTableCell143(339),
+        FixedDataTableCell143(344),
+        FixedDataTableCell143(350),
+        FixedDataTableCell143(356),
+        FixedDataTableCell143(361),
+        FixedDataTableCell143(366)
+      );
+    }
+    if (x === 455) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3pzj',
+          style: {
+            height: 25,
+            position: 'absolute',
+            width: 1845,
+            zIndex: 0,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        },
+        FixedDataTableCell143(373),
+        FixedDataTableCell143(378),
+        FixedDataTableCell143(383),
+        FixedDataTableCell143(388),
+        FixedDataTableCell143(393),
+        FixedDataTableCell143(398),
+        FixedDataTableCell143(403),
+        FixedDataTableCell143(408),
+        FixedDataTableCell143(413),
+        FixedDataTableCell143(418),
+        FixedDataTableCell143(423),
+        FixedDataTableCell143(428),
+        FixedDataTableCell143(433),
+        FixedDataTableCell143(438),
+        FixedDataTableCell143(443),
+        FixedDataTableCell143(448),
+        FixedDataTableCell143(451),
+        FixedDataTableCell143(454)
+      );
+    }
+  };
+
+  var FixedDataTableCellGroup145 = function (x) {
+    if (x === 319) {
+      return React.createElement(
+        'div',
+        {style: {height: 40, left: 0}, className: '_3pzk'},
+        FixedDataTableCellGroupImpl144(318)
+      );
+    }
+    if (x === 333) {
+      return React.createElement(
+        'div',
+        {style: {height: 40, left: 721}, className: '_3pzk'},
+        FixedDataTableCellGroupImpl144(332)
+      );
+    }
+    if (x === 368) {
+      return React.createElement(
+        'div',
+        {style: {height: 25, left: 0}, className: '_3pzk'},
+        FixedDataTableCellGroupImpl144(367)
+      );
+    }
+    if (x === 456) {
+      return React.createElement(
+        'div',
+        {style: {height: 25, left: 721}, className: '_3pzk'},
+        FixedDataTableCellGroupImpl144(455)
+      );
+    }
+  };
+
+  var FixedDataTableRowImpl146 = function (x) {
+    if (x === 334) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1gd4 _4li _52no _3h1a _1mib',
+          onClick: null,
+          onDoubleClick: null,
+          onMouseDown: null,
+          onMouseEnter: null,
+          onMouseLeave: null,
+          style: {width: 1209, height: 40},
+        },
+        React.createElement(
+          'div',
+          {className: '_1gd5'},
+          FixedDataTableCellGroup145(319),
+          FixedDataTableCellGroup145(333),
+          React.createElement('div', {
+            className: '_1gd6 _1gd8',
+            style: {left: 721, height: 40},
+          })
+        )
+      );
+    }
+    if (x === 457) {
+      return React.createElement(
+        'div',
+        {
+          className: '_1gd4 _4li _3h1a _1mib',
+          onClick: null,
+          onDoubleClick: null,
+          onMouseDown: null,
+          onMouseEnter: null,
+          onMouseLeave: null,
+          style: {width: 1209, height: 25},
+        },
+        React.createElement(
+          'div',
+          {className: '_1gd5'},
+          FixedDataTableCellGroup145(368),
+          FixedDataTableCellGroup145(456),
+          React.createElement('div', {
+            className: '_1gd6 _1gd8',
+            style: {left: 721, height: 25},
+          })
+        )
+      );
+    }
+  };
+
+  var FixedDataTableRow147 = function (x) {
+    if (x === 335) {
+      return React.createElement(
+        'div',
+        {
+          style: {
+            width: 1209,
+            height: 40,
+            zIndex: 1,
+            transform: 'translate3d(0px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+          className: '_1gda',
+        },
+        FixedDataTableRowImpl146(334)
+      );
+    }
+    if (x === 458) {
+      return React.createElement(
+        'div',
+        {
+          style: {
+            width: 1209,
+            height: 25,
+            zIndex: 1,
+            transform: 'translate3d(0px,40px,0)',
+            backfaceVisibility: 'hidden',
+          },
+          className: '_1gda',
+        },
+        FixedDataTableRowImpl146(457)
+      );
+    }
+  };
+
+  var FixedDataTableAbstractSortableHeader148 = function (x) {
+    if (x === 341) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(340)
+        )
+      );
+    }
+    if (x === 347) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _1kst _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(346)
+        )
+      );
+    }
+    if (x === 353) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _1kst _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(352)
+        )
+      );
+    }
+    if (x === 358) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(357)
+        )
+      );
+    }
+    if (x === 363) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _54_9 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(362)
+        )
+      );
+    }
+    if (x === 370) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(369)
+        )
+      );
+    }
+    if (x === 375) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(374)
+        )
+      );
+    }
+    if (x === 380) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(379)
+        )
+      );
+    }
+    if (x === 385) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(384)
+        )
+      );
+    }
+    if (x === 390) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(389)
+        )
+      );
+    }
+    if (x === 395) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(394)
+        )
+      );
+    }
+    if (x === 400) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(399)
+        )
+      );
+    }
+    if (x === 405) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(404)
+        )
+      );
+    }
+    if (x === 410) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(409)
+        )
+      );
+    }
+    if (x === 415) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(414)
+        )
+      );
+    }
+    if (x === 420) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(419)
+        )
+      );
+    }
+    if (x === 425) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(424)
+        )
+      );
+    }
+    if (x === 430) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(429)
+        )
+      );
+    }
+    if (x === 435) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(434)
+        )
+      );
+    }
+    if (x === 440) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(439)
+        )
+      );
+    }
+    if (x === 445) {
+      return React.createElement(
+        'div',
+        {onClick: function () {}, className: '_54_8 _4h2r _2wzx'},
+        React.createElement(
+          'div',
+          {className: '_2eq6'},
+          null,
+          AdsPETableHeader141(444)
+        )
+      );
+    }
+  };
+
+  var FixedDataTableSortableHeader149 = function (x) {
+    if (x === 342) {
+      return FixedDataTableAbstractSortableHeader148(341);
+    }
+    if (x === 348) {
+      return FixedDataTableAbstractSortableHeader148(347);
+    }
+    if (x === 354) {
+      return FixedDataTableAbstractSortableHeader148(353);
+    }
+    if (x === 359) {
+      return FixedDataTableAbstractSortableHeader148(358);
+    }
+    if (x === 364) {
+      return FixedDataTableAbstractSortableHeader148(363);
+    }
+    if (x === 371) {
+      return FixedDataTableAbstractSortableHeader148(370);
+    }
+    if (x === 376) {
+      return FixedDataTableAbstractSortableHeader148(375);
+    }
+    if (x === 381) {
+      return FixedDataTableAbstractSortableHeader148(380);
+    }
+    if (x === 386) {
+      return FixedDataTableAbstractSortableHeader148(385);
+    }
+    if (x === 391) {
+      return FixedDataTableAbstractSortableHeader148(390);
+    }
+    if (x === 396) {
+      return FixedDataTableAbstractSortableHeader148(395);
+    }
+    if (x === 401) {
+      return FixedDataTableAbstractSortableHeader148(400);
+    }
+    if (x === 406) {
+      return FixedDataTableAbstractSortableHeader148(405);
+    }
+    if (x === 411) {
+      return FixedDataTableAbstractSortableHeader148(410);
+    }
+    if (x === 416) {
+      return FixedDataTableAbstractSortableHeader148(415);
+    }
+    if (x === 421) {
+      return FixedDataTableAbstractSortableHeader148(420);
+    }
+    if (x === 426) {
+      return FixedDataTableAbstractSortableHeader148(425);
+    }
+    if (x === 431) {
+      return FixedDataTableAbstractSortableHeader148(430);
+    }
+    if (x === 436) {
+      return FixedDataTableAbstractSortableHeader148(435);
+    }
+    if (x === 441) {
+      return FixedDataTableAbstractSortableHeader148(440);
+    }
+    if (x === 446) {
+      return FixedDataTableAbstractSortableHeader148(445);
+    }
+  };
+
+  var FixedDataTableBufferedRows150 = function (x) {
+    if (x === 459) {
+      return React.createElement('div', {
+        style: {
+          position: 'absolute',
+          pointerEvents: 'auto',
+          transform: 'translate3d(0px,65px,0)',
+          backfaceVisibility: 'hidden',
+        },
+      });
+    }
+  };
+
+  var Scrollbar151 = function (x) {
+    if (x === 460) {
+      return null;
+    }
+    if (x === 461) {
+      return React.createElement(
+        'div',
+        {
+          onFocus: function () {},
+          onBlur: function () {},
+          onKeyDown: function () {},
+          onMouseDown: function () {},
+          onWheel: function () {},
+          className: '_1t0r _1t0t _4jdr _1t0u',
+          style: {width: 1209, zIndex: 99},
+          tabIndex: 0,
+        },
+        React.createElement('div', {
+          className: '_1t0w _1t0y _1t0_',
+          style: {
+            width: 561.6340607950117,
+            transform: 'translate3d(4px,0px,0)',
+            backfaceVisibility: 'hidden',
+          },
+        })
+      );
+    }
+  };
+
+  var HorizontalScrollbar152 = function (x) {
+    if (x === 462) {
+      return React.createElement(
+        'div',
+        {className: '_3h1k _3h1m', style: {height: 15, width: 1209}},
+        React.createElement(
+          'div',
+          {
+            style: {
+              height: 15,
+              position: 'absolute',
+              overflow: 'hidden',
+              width: 1209,
+              transform: 'translate3d(0px,0px,0)',
+              backfaceVisibility: 'hidden',
+            },
+          },
+          Scrollbar151(461)
+        )
+      );
+    }
+  };
+
+  var FixedDataTable153 = function (x) {
+    if (x === 463) {
+      return React.createElement(
+        'div',
+        {
+          className: '_3h1i _1mie',
+          onWheel: function () {},
+          style: {height: 25, width: 1209},
+        },
+        React.createElement(
+          'div',
+          {className: '_3h1j', style: {height: 8, width: 1209}},
+          FixedDataTableColumnResizeHandle140(313),
+          FixedDataTableRow147(335),
+          FixedDataTableRow147(458),
+          FixedDataTableBufferedRows150(459),
+          null,
+          undefined,
+          React.createElement('div', {
+            className: '_3h1e _3h1h',
+            style: {top: 8},
+          })
+        ),
+        Scrollbar151(460),
+        HorizontalScrollbar152(462)
+      );
+    }
+  };
+
+  var TransitionTable154 = function (x) {
+    if (x === 464) {
+      return FixedDataTable153(463);
+    }
+  };
+
+  var AdsSelectableFixedDataTable155 = function (x) {
+    if (x === 465) {
+      return React.createElement(
+        'div',
+        {className: '_5hht'},
+        TransitionTable154(464)
+      );
+    }
+  };
+
+  var AdsDataTableKeyboardSupportDecorator156 = function (x) {
+    if (x === 466) {
+      return React.createElement(
+        'div',
+        {className: '_5d6f', tabIndex: '0', onKeyDown: function () {}},
+        AdsSelectableFixedDataTable155(465)
+      );
+    }
+  };
+
+  var AdsEditableDataTableDecorator157 = function (x) {
+    if (x === 467) {
+      return React.createElement(
+        'div',
+        {onCopy: function () {}},
+        AdsDataTableKeyboardSupportDecorator156(466)
+      );
+    }
+  };
+
+  var AdsPEDataTableContainer158 = function (x) {
+    if (x === 468) {
+      return React.createElement(
+        'div',
+        {className: '_35l_ _1hr clearfix'},
+        null,
+        null,
+        null,
+        AdsEditableDataTableDecorator157(467)
+      );
+    }
+  };
+
+  var AdsPECampaignGroupTableContainer159 = function (x) {
+    if (x === 470) {
+      return ResponsiveBlock37(469);
+    }
+  };
+
+  var AdsPEManageAdsPaneContainer160 = function (x) {
+    if (x === 473) {
+      return React.createElement(
+        'div',
+        null,
+        AdsErrorBoundary10(65),
+        React.createElement(
+          'div',
+          {className: '_2uty'},
+          AdsErrorBoundary10(125)
+        ),
+        React.createElement(
+          'div',
+          {className: '_2utx _21oc'},
+          AdsErrorBoundary10(171),
+          React.createElement(
+            'div',
+            {className: '_41tu'},
+            AdsErrorBoundary10(176),
+            AdsErrorBoundary10(194)
+          )
+        ),
+        React.createElement(
+          'div',
+          {className: '_2utz', style: {height: 25}},
+          AdsErrorBoundary10(302),
+          React.createElement(
+            'div',
+            {className: '_2ut-'},
+            AdsErrorBoundary10(312)
+          ),
+          React.createElement(
+            'div',
+            {className: '_2ut_'},
+            AdsErrorBoundary10(472)
+          )
+        )
+      );
+    }
+  };
+
+  var AdsPEContentContainer161 = function (x) {
+    if (x === 474) {
+      return AdsPEManageAdsPaneContainer160(473);
+    }
+  };
+
+  var FluxContainer_AdsPEWorkspaceContainer_162 = function (x) {
+    if (x === 477) {
+      return React.createElement(
+        'div',
+        {className: '_49wu', style: {height: 177, top: 43, width: 1306}},
+        ResponsiveBlock37(62, '0'),
+        AdsErrorBoundary10(476, '1'),
+        null
+      );
+    }
+  };
+
+  var FluxContainer_AdsSessionExpiredDialogContainer_163 = function (x) {
+    if (x === 478) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEUploadDialogLazyContainer_164 = function (x) {
+    if (x === 479) {
+      return null;
+    }
+  };
+
+  var FluxContainer_DialogContainer_165 = function (x) {
+    if (x === 480) {
+      return null;
+    }
+  };
+
+  var AdsBugReportContainer166 = function (x) {
+    if (x === 481) {
+      return React.createElement('span', null);
+    }
+  };
+
+  var AdsPEAudienceSplittingDialog167 = function (x) {
+    if (x === 482) {
+      return null;
+    }
+  };
+
+  var AdsPEAudienceSplittingDialogContainer168 = function (x) {
+    if (x === 483) {
+      return React.createElement(
+        'div',
+        null,
+        AdsPEAudienceSplittingDialog167(482)
+      );
+    }
+  };
+
+  var FluxContainer_AdsRuleDialogBootloadContainer_169 = function (x) {
+    if (x === 484) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPECFTrayContainer_170 = function (x) {
+    if (x === 485) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEDeleteDraftContainer_171 = function (x) {
+    if (x === 486) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEInitialDraftPublishDialogContainer_172 = function (x) {
+    if (x === 487) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPEReachFrequencyStatusTransitionDialogBootloadContainer_173 =
+    function (x) {
+      if (x === 488) {
+        return null;
+      }
+    };
+
+  var FluxContainer_AdsPEPurgeArchiveDialogContainer_174 = function (x) {
+    if (x === 489) {
+      return null;
+    }
+  };
+
+  var AdsPECreateDialogContainer175 = function (x) {
+    if (x === 490) {
+      return React.createElement('span', null);
+    }
+  };
+
+  var FluxContainer_AdsPEModalStatusContainer_176 = function (x) {
+    if (x === 491) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsBrowserExtensionErrorDialogContainer_177 = function (x) {
+    if (x === 492) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPESortByErrorTipContainer_178 = function (x) {
+    if (x === 493) {
+      return null;
+    }
+  };
+
+  var LeadDownloadDialogSelector179 = function (x) {
+    if (x === 494) {
+      return null;
+    }
+  };
+
+  var FluxContainer_AdsPELeadDownloadDialogContainerClass_180 = function (x) {
+    if (x === 495) {
+      return LeadDownloadDialogSelector179(494);
+    }
+  };
+
+  var AdsPEContainer181 = function (x) {
+    if (x === 496) {
+      return React.createElement(
+        'div',
+        {id: 'ads_pe_container'},
+        FluxContainer_AdsPETopNavContainer_26(41),
+        null,
+        FluxContainer_AdsPEWorkspaceContainer_162(477),
+        FluxContainer_AdsSessionExpiredDialogContainer_163(478),
+        FluxContainer_AdsPEUploadDialogLazyContainer_164(479),
+        FluxContainer_DialogContainer_165(480),
+        AdsBugReportContainer166(481),
+        AdsPEAudienceSplittingDialogContainer168(483),
+        FluxContainer_AdsRuleDialogBootloadContainer_169(484),
+        FluxContainer_AdsPECFTrayContainer_170(485),
+        React.createElement(
+          'span',
+          null,
+          FluxContainer_AdsPEDeleteDraftContainer_171(486),
+          FluxContainer_AdsPEInitialDraftPublishDialogContainer_172(487),
+          FluxContainer_AdsPEReachFrequencyStatusTransitionDialogBootloadContainer_173(
+            488
+          )
+        ),
+        FluxContainer_AdsPEPurgeArchiveDialogContainer_174(489),
+        AdsPECreateDialogContainer175(490),
+        FluxContainer_AdsPEModalStatusContainer_176(491),
+        FluxContainer_AdsBrowserExtensionErrorDialogContainer_177(492),
+        FluxContainer_AdsPESortByErrorTipContainer_178(493),
+        FluxContainer_AdsPELeadDownloadDialogContainerClass_180(495),
+        React.createElement('div', {id: 'web_ads_guidance_tips'})
+      );
+    }
+  };
+
+  var Benchmark = function (x) {
+    if (x === undefined) {
+      return AdsPEContainer181(496);
+    }
+  };
+
+  var app = document.getElementById('app');
+
+  window.render = function render() {
+    ReactDOM.render(Benchmark(), app);
+  };
+})();
diff --git a/scripts/bench/benchmarks/pe-no-components/build.js b/scripts/bench/benchmarks/pe-no-components/build.js
new file mode 100644
index 00000000000..ffbd82637d2
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-no-components/build.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const {join} = require('path');
+
+async function build(reactPath, asyncCopyTo) {
+  // copy the UMD bundles
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react.production.js'),
+    join(__dirname, 'react.production.js')
+  );
+  await asyncCopyTo(
+    join(reactPath, 'build', 'dist', 'react-dom.production.js'),
+    join(__dirname, 'react-dom.production.js')
+  );
+}
+
+module.exports = build;
diff --git a/scripts/bench/benchmarks/pe-no-components/index.html b/scripts/bench/benchmarks/pe-no-components/index.html
new file mode 100644
index 00000000000..c2d44dcd00b
--- /dev/null
+++ b/scripts/bench/benchmarks/pe-no-components/index.html
@@ -0,0 +1,32 @@
+<html>
+<body>
+    <div id="app"></div>
+    <script>
+      performance.mark('Load React');
+      performance.mark('Load React+ReactDOM');
+    </script>
+    <script src="react.production.min.js"></script>
+    <script>
+      performance.measure('Load React', 'Load React');
+    </script>
+    <script>
+      performance.mark('Load ReactDOM');
+    </script>
+    <script src="react-dom.production.min.js"></script>
+    <script>
+      performance.measure('Load ReactDOM', 'Load ReactDOM');
+      performance.measure('Load React+ReactDOM', 'Load React+ReactDOM');
+    </script>
+    <script src="benchmark.js"></script>
+    <script>
+      performance.mark('Initial Render');
+      render();
+      performance.measure('Initial Render', 'Initial Render');
+      requestAnimationFrame(() => {
+        performance.mark('Update Render');
+        render();
+        performance.measure('Update Render', 'Update Render');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/scripts/bench/build.js b/scripts/bench/build.js
new file mode 100644
index 00000000000..9c10379a0eb
--- /dev/null
+++ b/scripts/bench/build.js
@@ -0,0 +1,122 @@
+'use strict';
+
+const Git = require('nodegit');
+const rimraf = require('rimraf');
+const ncp = require('ncp').ncp;
+const {existsSync} = require('fs');
+const exec = require('child_process').exec;
+const {join} = require('path');
+
+const reactUrl = 'https://github.com/facebook/react.git';
+
+function cleanDir() {
+  return new Promise(_resolve => rimraf('remote-repo', _resolve));
+}
+
+function executeCommand(command) {
+  return new Promise(_resolve =>
+    exec(command, error => {
+      if (!error) {
+        _resolve();
+      } else {
+        console.error(error);
+        process.exit(1);
+      }
+    })
+  );
+}
+
+function asyncCopyTo(from, to) {
+  return new Promise(_resolve => {
+    ncp(from, to, error => {
+      if (error) {
+        console.error(error);
+        process.exit(1);
+      }
+      _resolve();
+    });
+  });
+}
+
+function getDefaultReactPath() {
+  return join(__dirname, 'remote-repo');
+}
+
+async function buildBenchmark(reactPath = getDefaultReactPath(), benchmark) {
+  // get the build.js from the benchmark directory and execute it
+  await require(join(__dirname, 'benchmarks', benchmark, 'build.js'))(
+    reactPath,
+    asyncCopyTo
+  );
+}
+
+async function getMergeBaseFromLocalGitRepo(localRepo) {
+  const repo = await Git.Repository.open(localRepo);
+  return await Git.Merge.base(
+    repo,
+    await repo.getHeadCommit(),
+    await repo.getBranchCommit('main')
+  );
+}
+
+async function buildBenchmarkBundlesFromGitRepo(
+  commitId,
+  skipBuild,
+  url = reactUrl,
+  clean
+) {
+  let repo;
+  const remoteRepoDir = getDefaultReactPath();
+
+  if (!skipBuild) {
+    if (clean) {
+      //clear remote-repo folder
+      await cleanDir(remoteRepoDir);
+    }
+    // check if remote-repo directory already exists
+    if (existsSync(remoteRepoDir)) {
+      repo = await Git.Repository.open(remoteRepoDir);
+      // fetch all the latest remote changes
+      await repo.fetchAll();
+    } else {
+      // if not, clone the repo to remote-repo folder
+      repo = await Git.Clone(url, remoteRepoDir);
+    }
+    let commit = await repo.getBranchCommit('main');
+    // reset hard to this remote head
+    await Git.Reset.reset(repo, commit, Git.Reset.TYPE.HARD);
+    // then we checkout the latest main head
+    await repo.checkoutBranch('main');
+    // make sure we pull in the latest changes
+    await repo.mergeBranches('main', 'origin/main');
+    // then we check if we need to move the HEAD to the merge base
+    if (commitId && commitId !== 'main') {
+      // as the commitId probably came from our local repo
+      // we use it to lookup the right commit in our remote repo
+      commit = await Git.Commit.lookup(repo, commitId);
+      // then we checkout the merge base
+      await Git.Checkout.tree(repo, commit);
+    }
+    await buildReactBundles();
+  }
+}
+
+async function buildReactBundles(reactPath = getDefaultReactPath(), skipBuild) {
+  if (!skipBuild) {
+    await executeCommand(
+      `cd ${reactPath} && yarn && yarn build react/index,react-dom/index --type=UMD_PROD`
+    );
+  }
+}
+
+// if run directly via CLI
+if (require.main === module) {
+  buildBenchmarkBundlesFromGitRepo();
+}
+
+module.exports = {
+  buildReactBundles,
+  buildBenchmark,
+  buildBenchmarkBundlesFromGitRepo,
+  getMergeBaseFromLocalGitRepo,
+};
diff --git a/scripts/bench/package.json b/scripts/bench/package.json
new file mode 100644
index 00000000000..5372942c58b
--- /dev/null
+++ b/scripts/bench/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-benchmark",
+  "version": "0.0.1",
+  "main": "runner.js",
+  "scripts": {
+    "start": "node runner.js"
+  },
+  "dependencies": {
+    "chalk": "^2.1.0",
+    "chrome-launcher": "^0.10.5",
+    "cli-table": "^0.3.1",
+    "http-server": "^0.10.0",
+    "http2": "^3.3.6",
+    "lighthouse": "^3.2.1",
+    "mime": "^1.3.6",
+    "minimist": "^1.2.3",
+    "ncp": "^2.0.0",
+    "nodegit": "^0.18.3",
+    "rimraf": "^2.6.1",
+    "stats-analysis": "^2.0.0"
+  }
+}
diff --git a/scripts/bench/runner.js b/scripts/bench/runner.js
new file mode 100644
index 00000000000..922e914d4ea
--- /dev/null
+++ b/scripts/bench/runner.js
@@ -0,0 +1,135 @@
+'use strict';
+
+const {readdirSync, statSync} = require('fs');
+const {join} = require('path');
+const runBenchmark = require('./benchmark');
+const {
+  buildReactBundles,
+  buildBenchmark,
+  buildBenchmarkBundlesFromGitRepo,
+  getMergeBaseFromLocalGitRepo,
+} = require('./build');
+const argv = require('minimist')(process.argv.slice(2));
+const chalk = require('chalk');
+const printResults = require('./stats');
+const serveBenchmark = require('./server');
+
+function getBenchmarkNames() {
+  return readdirSync(join(__dirname, 'benchmarks')).filter(file =>
+    statSync(join(__dirname, 'benchmarks', file)).isDirectory()
+  );
+}
+
+function wait(val) {
+  return new Promise(resolve => setTimeout(resolve, val));
+}
+
+const runRemote = argv.remote;
+const runLocal = argv.local;
+const benchmarkFilter = argv.benchmark;
+const headless = argv.headless;
+const skipBuild = argv['skip-build'];
+
+async function runBenchmarks(reactPath) {
+  const benchmarkNames = getBenchmarkNames();
+  const results = {};
+  const server = serveBenchmark();
+  await wait(1000);
+
+  for (let i = 0; i < benchmarkNames.length; i++) {
+    const benchmarkName = benchmarkNames[i];
+
+    if (
+      !benchmarkFilter ||
+      (benchmarkFilter && benchmarkName.indexOf(benchmarkFilter) !== -1)
+    ) {
+      console.log(
+        chalk.gray(`- Building benchmark "${chalk.white(benchmarkName)}"...`)
+      );
+      await buildBenchmark(reactPath, benchmarkName);
+      console.log(
+        chalk.gray(`- Running benchmark "${chalk.white(benchmarkName)}"...`)
+      );
+      results[benchmarkName] = await runBenchmark(benchmarkName, headless);
+    }
+  }
+
+  server.close();
+  // http-server.close() is async but they don't provide a callback..
+  await wait(500);
+  return results;
+}
+
+// get the performance benchmark results
+// from remote main (default React repo)
+async function benchmarkRemoteMaster() {
+  console.log(chalk.gray(`- Building React bundles...`));
+  let commit = argv.remote;
+
+  if (!commit || typeof commit !== 'string') {
+    commit = await getMergeBaseFromLocalGitRepo(join(__dirname, '..', '..'));
+    console.log(
+      chalk.gray(`- Merge base commit ${chalk.white(commit.tostrS())}`)
+    );
+  }
+  await buildBenchmarkBundlesFromGitRepo(commit, skipBuild);
+  return {
+    benchmarks: await runBenchmarks(),
+  };
+}
+
+// get the performance benchmark results
+// of the local react repo
+async function benchmarkLocal(reactPath) {
+  console.log(chalk.gray(`- Building React bundles...`));
+  await buildReactBundles(reactPath, skipBuild);
+  return {
+    benchmarks: await runBenchmarks(reactPath),
+  };
+}
+
+async function runLocalBenchmarks(showResults) {
+  console.log(
+    chalk.white.bold('Running benchmarks for ') +
+      chalk.green.bold('Local (Current Branch)')
+  );
+  const localResults = await benchmarkLocal(join(__dirname, '..', '..'));
+
+  if (showResults) {
+    printResults(localResults, null);
+  }
+  return localResults;
+}
+
+async function runRemoteBenchmarks(showResults) {
+  console.log(
+    chalk.white.bold('Running benchmarks for ') +
+      chalk.yellow.bold('Remote (Merge Base)')
+  );
+  const remoteMasterResults = await benchmarkRemoteMaster();
+
+  if (showResults) {
+    printResults(null, remoteMasterResults);
+  }
+  return remoteMasterResults;
+}
+
+async function compareLocalToMaster() {
+  console.log(
+    chalk.white.bold('Comparing ') +
+      chalk.green.bold('Local (Current Branch)') +
+      chalk.white.bold(' to ') +
+      chalk.yellow.bold('Remote (Merge Base)')
+  );
+  const localResults = await runLocalBenchmarks(false);
+  const remoteMasterResults = await runRemoteBenchmarks(false);
+  printResults(localResults, remoteMasterResults);
+}
+
+if ((runLocal && runRemote) || (!runLocal && !runRemote)) {
+  compareLocalToMaster().then(() => process.exit(0));
+} else if (runLocal) {
+  runLocalBenchmarks(true).then(() => process.exit(0));
+} else if (runRemote) {
+  runRemoteBenchmarks(true).then(() => process.exit(0));
+}
diff --git a/scripts/bench/server.js b/scripts/bench/server.js
new file mode 100644
index 00000000000..6bc9dc14cbd
--- /dev/null
+++ b/scripts/bench/server.js
@@ -0,0 +1,78 @@
+'use strict';
+
+const http2Server = require('http2');
+const httpServer = require('http-server');
+const {existsSync, statSync, createReadStream} = require('fs');
+const {join} = require('path');
+const argv = require('minimist')(process.argv.slice(2));
+const mime = require('mime');
+
+function sendFile(filename, response) {
+  response.setHeader('Content-Type', mime.lookup(filename));
+  response.writeHead(200);
+  const fileStream = createReadStream(filename);
+  fileStream.pipe(response);
+  fileStream.on('finish', response.end);
+}
+
+function createHTTP2Server(benchmark) {
+  const server = http2Server.createServer({}, (request, response) => {
+    const filename = join(
+      __dirname,
+      'benchmarks',
+      benchmark,
+      request.url
+    ).replace(/\?.*/g, '');
+
+    if (existsSync(filename) && statSync(filename).isFile()) {
+      sendFile(filename, response);
+    } else {
+      const indexHtmlPath = join(filename, 'index.html');
+
+      if (existsSync(indexHtmlPath)) {
+        sendFile(indexHtmlPath, response);
+      } else {
+        response.writeHead(404);
+        response.end();
+      }
+    }
+  });
+  server.listen(8080);
+  return server;
+}
+
+function createHTTPServer() {
+  const server = httpServer.createServer({
+    root: join(__dirname, 'benchmarks'),
+    robots: true,
+    cache: 'no-store',
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Credentials': 'true',
+    },
+  });
+  server.listen(8080);
+  return server;
+}
+
+function serveBenchmark(benchmark, http2) {
+  if (http2) {
+    return createHTTP2Server(benchmark);
+  } else {
+    return createHTTPServer();
+  }
+}
+
+// if run directly via CLI
+if (require.main === module) {
+  const benchmarkInput = argv._[0];
+
+  if (benchmarkInput) {
+    serveBenchmark(benchmarkInput);
+  } else {
+    console.error('Please specify a benchmark directory to serve!');
+    process.exit(1);
+  }
+}
+
+module.exports = serveBenchmark;
diff --git a/scripts/bench/stats.js b/scripts/bench/stats.js
new file mode 100644
index 00000000000..9fb5883d832
--- /dev/null
+++ b/scripts/bench/stats.js
@@ -0,0 +1,112 @@
+'use strict';
+
+const chalk = require('chalk');
+const Table = require('cli-table');
+
+function percentChange(prev, current, prevSem, currentSem) {
+  const [mean, sd] = calculateMeanAndSdOfRatioFromDeltaMethod(
+    prev,
+    current,
+    prevSem,
+    currentSem
+  );
+  const pctChange = +(mean * 100).toFixed(1);
+  const ci95 = +(100 * 1.96 * sd).toFixed(1);
+
+  const ciInfo = ci95 > 0 ? ` +- ${ci95} %` : '';
+  const text = `${pctChange > 0 ? '+' : ''}${pctChange} %${ciInfo}`;
+  if (pctChange + ci95 < 0) {
+    return chalk.green(text);
+  } else if (pctChange - ci95 > 0) {
+    return chalk.red(text);
+  } else {
+    // Statistically insignificant.
+    return text;
+  }
+}
+
+function calculateMeanAndSdOfRatioFromDeltaMethod(
+  meanControl,
+  meanTest,
+  semControl,
+  semTest
+) {
+  const mean =
+    (meanTest - meanControl) / meanControl -
+    (Math.pow(semControl, 2) * meanTest) / Math.pow(meanControl, 3);
+  const variance =
+    Math.pow(semTest / meanControl, 2) +
+    Math.pow(semControl * meanTest, 2) / Math.pow(meanControl, 4);
+  return [mean, Math.sqrt(variance)];
+}
+
+function addBenchmarkResults(table, localResults, remoteMasterResults) {
+  const benchmarks = Object.keys(
+    (localResults && localResults.benchmarks) ||
+      (remoteMasterResults && remoteMasterResults.benchmarks)
+  );
+  benchmarks.forEach(benchmark => {
+    const rowHeader = [chalk.white.bold(benchmark)];
+    if (remoteMasterResults) {
+      rowHeader.push(chalk.white.bold('Time'));
+    }
+    if (localResults) {
+      rowHeader.push(chalk.white.bold('Time'));
+    }
+    if (localResults && remoteMasterResults) {
+      rowHeader.push(chalk.white.bold('Diff'));
+    }
+    table.push(rowHeader);
+
+    const measurements =
+      (localResults && localResults.benchmarks[benchmark].averages) ||
+      (remoteMasterResults &&
+        remoteMasterResults.benchmarks[benchmark].averages);
+    measurements.forEach((measurement, i) => {
+      const row = [chalk.gray(measurement.entry)];
+      let remoteMean;
+      let remoteSem;
+      if (remoteMasterResults) {
+        remoteMean = remoteMasterResults.benchmarks[benchmark].averages[i].mean;
+        remoteSem = remoteMasterResults.benchmarks[benchmark].averages[i].sem;
+        // https://en.wikipedia.org/wiki/1.96 gives a 99% confidence interval.
+        const ci95 = remoteSem * 1.96;
+        row.push(
+          chalk.white(+remoteMean.toFixed(2) + ' ms +- ' + ci95.toFixed(2))
+        );
+      }
+      let localMean;
+      let localSem;
+      if (localResults) {
+        localMean = localResults.benchmarks[benchmark].averages[i].mean;
+        localSem = localResults.benchmarks[benchmark].averages[i].sem;
+        const ci95 = localSem * 1.96;
+        row.push(
+          chalk.white(+localMean.toFixed(2) + ' ms +- ' + ci95.toFixed(2))
+        );
+      }
+      if (localResults && remoteMasterResults) {
+        row.push(percentChange(remoteMean, localMean, remoteSem, localSem));
+      }
+      table.push(row);
+    });
+  });
+}
+
+function printResults(localResults, remoteMasterResults) {
+  const head = [''];
+  if (remoteMasterResults) {
+    head.push(chalk.yellow.bold('Remote (Merge Base)'));
+  }
+  if (localResults) {
+    head.push(chalk.green.bold('Local (Current Branch)'));
+  }
+  if (localResults && remoteMasterResults) {
+    head.push('');
+  }
+  const table = new Table({head});
+  addBenchmarkResults(table, localResults, remoteMasterResults);
+  console.log(table.toString());
+}
+
+module.exports = printResults;
diff --git a/scripts/bench/yarn.lock b/scripts/bench/yarn.lock
new file mode 100644
index 00000000000..af003082404
--- /dev/null
+++ b/scripts/bench/yarn.lock
@@ -0,0 +1,1742 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/core-js@^0.9.41":
+  version "0.9.46"
+  resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.46.tgz#ea701ee34cbb6dfe6d100f1530319547c93c8d79"
+  integrity sha512-LooLR6XHes9V+kNYRz1Qm8w3atw9QMn7XeZUmIpUelllF9BdryeUKd/u0Wh5ErcjpWfG39NrToU9MF7ngsTFVw==
+
+"@types/mkdirp@^0.3.29":
+  version "0.3.29"
+  resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-0.3.29.tgz#7f2ad7ec55f914482fc9b1ec4bb1ae6028d46066"
+  integrity sha1-fyrX7FX5FEgvybHsS7GuYCjUYGY=
+
+"@types/node@*":
+  version "10.12.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.0.tgz#ea6dcbddbc5b584c83f06c60e82736d8fbb0c235"
+  integrity sha512-3TUHC3jsBAB7qVRGxT6lWyYo2v96BMmD2PTcl47H25Lu7UXtFH/2qqmKiVrnel6Ne//0TFYf6uvNX+HW2FRkLQ==
+
+"@types/node@^9.3.0":
+  version "9.6.35"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.35.tgz#197dd535c094362a7c95f0b78f07583d6681ed26"
+  integrity sha512-h5zvHS8wXHGa+Gcqs9K8vqCgOtqjr0+NqG/DDJmQIX1wpR9HivAfgV8bjcD3mGM4bPfQw5Aneb2Pn8355L83jA==
+
+"@types/rimraf@^0.0.28":
+  version "0.0.28"
+  resolved "https://registry.yarnpkg.com/@types/rimraf/-/rimraf-0.0.28.tgz#5562519bc7963caca8abf7f128cae3b594d41d06"
+  integrity sha1-VWJRm8eWPKyoq/fxKMrjtZTUHQY=
+
+abbrev@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+
+ajv@^4.9.1:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  dependencies:
+    string-width "^2.0.0"
+
+ansi-escapes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
+  integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==
+
+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-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.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.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"
+
+aproba@^1.0.3:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.2.tgz#45c6629094de4e96f693ef7eab74ae079c240fc1"
+
+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"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+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-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
+
+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"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+
+axe-core@3.0.0-beta.2:
+  version "3.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.0.0-beta.2.tgz#82a13d371268034352bba2bcb263c5625b3e4a09"
+  integrity sha512-JyMXnHDuzr6hei+mINWsR/iEyPBFSjpgF4/lUijO7QDGVKtTmdpDxc2+7X/xW+rPIwhcd72euJ2UunbRXF+1Eg==
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+boxen@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.1.tgz#0f11e7fe344edb9397977fc13ede7f64d956481d"
+  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 "^1.0.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+camelcase@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^4.0.0, camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
+capture-stack-trace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+
+chalk@^1.0.0:
+  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:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^2.0.1, chalk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
+
+charenc@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
+
+chrome-devtools-frontend@1.0.401423:
+  version "1.0.401423"
+  resolved "https://registry.yarnpkg.com/chrome-devtools-frontend/-/chrome-devtools-frontend-1.0.401423.tgz#32a89b8d04e378a494be3c8d63271703be1c04ea"
+
+chrome-devtools-frontend@1.0.593291:
+  version "1.0.593291"
+  resolved "https://registry.yarnpkg.com/chrome-devtools-frontend/-/chrome-devtools-frontend-1.0.593291.tgz#72ed2e488e4ab8c5df9f35a5ce6bb128eb3c5e74"
+  integrity sha512-rZYanFVohRHjYdFdbvmna/9yzA+PMYfjBqXaLfF6SxE9ZnmfuMhItHGqPXrUTvuv1IuqaD1FX51WmTFwa2zfUA==
+
+chrome-launcher@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.10.5.tgz#d0aa72c11f1653e6a60dfebea171522447470ef1"
+  integrity sha512-Gbzg8HlWhyuoVqflhiXwfFXhzNfNWvAkSWv2QR1Yl6mwsMo1oCLAVjp2tIySuS4lrZLEjzVx1fOy584yE76P4g==
+  dependencies:
+    "@types/core-js" "^0.9.41"
+    "@types/mkdirp" "^0.3.29"
+    "@types/node" "^9.3.0"
+    "@types/rimraf" "^0.0.28"
+    is-wsl "^1.1.0"
+    lighthouse-logger "^1.0.0"
+    mkdirp "0.5.1"
+    rimraf "^2.6.1"
+
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-table@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
+  dependencies:
+    colors "1.0.3"
+
+cli-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
+
+cliui@^3.0.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+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"
+
+color-convert@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  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"
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+configstore@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
+  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@^3.1.1:
+  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"
+
+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@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+  integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
+
+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"
+
+corser@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
+
+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"
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+crypt@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+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"
+
+cssom@0.3.x:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
+  integrity sha512-+7prCSORpXNeR4/fUP3rL+TzqtiFfhMvTd7uEqMdgPvLPt4+uzFUeufx5RHjGTACCargg/DiEt/moMQmvnfkog==
+
+cssstyle@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.1.1.tgz#18b038a9c44d65f7a8e428a653b9f6fe42faf5fb"
+  integrity sha512-364AI1l/M5TYcFH83JnOH/pSqgaNnKmYgKrm0didZMGKWjQB60dymwWy1rKUgL3J1ffdq9xVi2yGLHdSjjSNog==
+  dependencies:
+    cssom "0.3.x"
+
+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"
+
+debug@^2.2.0:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
+debug@^2.6.8:
+  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"
+
+decamelize@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+
+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"
+
+devtools-timeline-model@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/devtools-timeline-model/-/devtools-timeline-model-1.1.6.tgz#7be51a73b55d727b597bb30dd1ed2e8e210639a5"
+  dependencies:
+    chrome-devtools-frontend "1.0.401423"
+    resolve "1.1.7"
+
+dot-prop@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  dependencies:
+    is-obj "^1.0.0"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ecstatic@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-2.2.2.tgz#1c7969b7a8893a04852e9373edeeb1d62809d393"
+  integrity sha512-F1g29y3I+abOS+M0AiK2O9R96AJ49Bc3kH696HtqnN+CL3YhpUnSzHNoUBQL03qDsN9Lr1XeKIxTqEH3BtiBgg==
+  dependencies:
+    he "^1.1.1"
+    mime "^1.2.11"
+    minimist "^1.1.0"
+    url-join "^2.0.2"
+
+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"
+
+esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    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"
+
+extend@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+
+external-editor@^2.0.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
+extsprintf@1.3.0, extsprintf@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+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.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+fs-extra@~0.26.2:
+  version "0.26.7"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fstream-ignore@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+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-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
+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@^7.0.3, glob@^7.0.5:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  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"
+
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  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"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+
+har-schema@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+
+har-validator@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+  dependencies:
+    ajv "^4.9.1"
+    har-schema "^1.0.5"
+
+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"
+
+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"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+he@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+http-link-header@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/http-link-header/-/http-link-header-0.8.0.tgz#a22b41a0c9b1e2d8fac1bf1b697c6bd532d5f5e4"
+  integrity sha1-oitBoMmx4tj6wb8baXxr1TLV9eQ=
+
+http-proxy@^1.8.1:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-server@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.10.0.tgz#b2a446b16a9db87ed3c622ba9beb1b085b1234a7"
+  dependencies:
+    colors "1.0.3"
+    corser "~2.0.0"
+    ecstatic "^2.0.0"
+    http-proxy "^1.8.1"
+    opener "~1.4.0"
+    optimist "0.6.x"
+    portfinder "^1.0.13"
+    union "~0.4.3"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+http2@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/http2/-/http2-3.3.6.tgz#7df06227e02b5b5a5841deea08239b3198d04bec"
+
+iconv-lite@^0.4.17:
+  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.2 < 3"
+
+image-ssim@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/image-ssim/-/image-ssim-0.2.0.tgz#83b42c7a2e6e4b85505477fe6917f5dbc56420e5"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+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.0, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.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"
+    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"
+    through "^2.3.6"
+
+intl-messageformat-parser@1.4.0, intl-messageformat-parser@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
+  integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU=
+
+intl-messageformat@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
+  integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=
+  dependencies:
+    intl-messageformat-parser "1.4.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+is-buffer@~1.1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+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-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+
+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-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+
+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"
+
+is-stream@^1.0.0, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+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=
+
+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"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jpeg-js@0.1.2, jpeg-js@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.1.2.tgz#135b992c0575c985cfa0f494a3227ed238583ece"
+
+js-library-detector@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/js-library-detector/-/js-library-detector-5.1.0.tgz#1e2e88b119bb91e6581b28f4a90018ea1320de73"
+  integrity sha512-EIBFkV6/3PFoTp3V7BjuPTPuc8/2wjPMyI5A0t2eicZ/RhXHBYnWzb+E3Ai2H8kVW/N+a+pYMyWqVcV3CBCtzw==
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+
+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@^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"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  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"
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  dependencies:
+    package-json "^4.0.0"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+lighthouse-logger@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/lighthouse-logger/-/lighthouse-logger-1.2.0.tgz#b76d56935e9c137e86a04741f6bb9b2776e886ca"
+  integrity sha512-wzUvdIeJZhRsG6gpZfmSCfysaxNEr43i+QT+Hie94wvHDKFLi4n7C2GqZ4sTC+PH5b5iktmXJvU87rWvhP3lHw==
+  dependencies:
+    debug "^2.6.8"
+    marky "^1.2.0"
+
+lighthouse@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/lighthouse/-/lighthouse-3.2.1.tgz#90681c9eb8b5dea41a2569e3d4bafdbd4292c97f"
+  integrity sha512-zoL0wc9gj8TJhhY1oHwO62E4bAj3LL+5YPCEgCU+sepextiynt11mXDjQcBXpTeDI195zIuk3CjEnppbq/kW5Q==
+  dependencies:
+    axe-core "3.0.0-beta.2"
+    chrome-devtools-frontend "1.0.593291"
+    chrome-launcher "^0.10.5"
+    configstore "^3.1.1"
+    cssstyle "1.1.1"
+    devtools-timeline-model "1.1.6"
+    esprima "^4.0.1"
+    http-link-header "^0.8.0"
+    inquirer "^3.3.0"
+    intl-messageformat "^2.2.0"
+    intl-messageformat-parser "^1.4.0"
+    jpeg-js "0.1.2"
+    js-library-detector "^5.1.0"
+    lighthouse-logger "^1.0.0"
+    lodash.isequal "^4.5.0"
+    lookup-closest-locale "6.0.4"
+    metaviewport-parser "0.2.0"
+    mkdirp "0.5.1"
+    opn "4.0.2"
+    parse-cache-control "1.0.1"
+    raven "^2.2.1"
+    rimraf "^2.6.1"
+    robots-parser "^2.0.1"
+    semver "^5.3.0"
+    speedline-core "1.4.2"
+    update-notifier "^2.1.0"
+    ws "3.3.2"
+    yargs "3.32.0"
+    yargs-parser "7.0.0"
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
+lodash@^4.13.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+lodash@^4.3.0:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
+lookup-closest-locale@6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/lookup-closest-locale/-/lookup-closest-locale-6.0.4.tgz#1279fed7546a601647bbc980f64423ee990a8590"
+  integrity sha512-bWoFbSGe6f1GvMGzj17LrwMX4FhDXDwZyH04ySVCPbtOJADcSRguZNKewoJ3Ful/MOxD/wRHvFPadk/kYZUbuQ==
+
+lowercase-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+
+lru-cache@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+make-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"
+  dependencies:
+    pify "^2.3.0"
+
+marky@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.0.tgz#9617ed647bbbea8f45d19526da33dec70606df42"
+  integrity sha1-lhftZHu76o9F0ZUm2jPexwYG30I=
+
+md5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
+  integrity sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=
+  dependencies:
+    charenc "~0.0.1"
+    crypt "~0.0.1"
+    is-buffer "~1.1.1"
+
+metaviewport-parser@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/metaviewport-parser/-/metaviewport-parser-0.2.0.tgz#535c3ce1ccf6223a5025fddc6a1c36505f7e7db1"
+  integrity sha1-U1w84cz2IjpQJf3cahw2UF9+fbE=
+
+mime-db@~1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.29.0.tgz#48d26d235589651704ac5916ca06001914266878"
+
+mime-types@^2.1.12, mime-types@~2.1.7:
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.16.tgz#2b858a52e5ecd516db897ac2be87487830698e23"
+  dependencies:
+    mime-db "~1.29.0"
+
+mime@^1.2.11, mime@^1.3.6:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+minimatch@^3.0.0, minimatch@^3.0.2, 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.0, minimist@^1.2.0, minimist@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
+mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, 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"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
+
+nan@^2.2.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
+
+ncp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+
+node-gyp@^3.5.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
+node-pre-gyp@~0.6.32:
+  version "0.6.36"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz#db604112cb74e0d477554e9b505b17abddfab786"
+  dependencies:
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.0.2"
+    rc "^1.1.7"
+    request "^2.81.0"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^2.2.1"
+    tar-pack "^3.4.0"
+
+nodegit-promise@~4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/nodegit-promise/-/nodegit-promise-4.0.0.tgz#5722b184f2df7327161064a791d2e842c9167b34"
+  dependencies:
+    asap "~2.0.3"
+
+nodegit@^0.18.3:
+  version "0.18.3"
+  resolved "https://registry.yarnpkg.com/nodegit/-/nodegit-0.18.3.tgz#305b6a305ea485fe5f1679fe37e6224a669ae9fc"
+  dependencies:
+    fs-extra "~0.26.2"
+    lodash "^4.13.1"
+    nan "^2.2.0"
+    node-gyp "^3.5.0"
+    node-pre-gyp "~0.6.32"
+    promisify-node "~0.3.0"
+
+"nopt@2 || 3":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+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"
+
+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@0 || 1 || 2 || 3 || 4", 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"
+
+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"
+
+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.0.1, object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+once@^1.3.0, once@^1.3.3:
+  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"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
+  dependencies:
+    mimic-fn "^1.0.0"
+
+opener@~1.4.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+optimist@0.6.x:
+  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"
+
+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@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.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, osenv@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^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"
+
+package-json@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
+  dependencies:
+    got "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
+
+parse-cache-control@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-cache-control/-/parse-cache-control-1.0.1.tgz#8eeab3e54fa56920fe16ba38f77fa21aacc2d74e"
+  integrity sha1-juqz5U+laSD+Fro493+iGqzC104=
+
+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-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+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"
+
+portfinder@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
+prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+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"
+
+promisify-node@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/promisify-node/-/promisify-node-0.3.0.tgz#b4b55acf90faa7d2b8b90ca396899086c03060cf"
+  dependencies:
+    nodegit-promise "~4.0.0"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
+
+qs@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+
+raven@^2.2.1:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/raven/-/raven-2.6.4.tgz#458d4a380c8fbb59e0150c655625aaf60c167ea3"
+  integrity sha512-6PQdfC4+DQSFncowthLf+B6Hr0JpPsFBgTVYTAOq7tCmx/kR4SXbeawtPch20+3QfUcQDoJBLjWW1ybvZ4kXTw==
+  dependencies:
+    cookie "0.3.1"
+    md5 "^2.2.1"
+    stack-trace "0.0.10"
+    timed-out "4.0.1"
+    uuid "3.3.2"
+
+rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+readable-stream@^2.0.6, readable-stream@^2.1.4:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+registry-auth-token@^3.0.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  dependencies:
+    rc "^1.1.6"
+    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"
+  dependencies:
+    rc "^1.0.1"
+
+request@2, request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~4.2.1"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.0.0"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+  dependencies:
+    glob "^7.0.5"
+
+robots-parser@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/robots-parser/-/robots-parser-2.1.0.tgz#d16b78ce34e861ab6afbbf0aac65974dbe01566e"
+  integrity sha512-k07MeDS1Tl1zjoYs5bHfUbgQ0MfaeTOepDcjZFxdYXd84p6IeLDQyUwlMk2AZ9c2yExA30I3ayWhmqz9tg0DzQ==
+
+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"
+  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
+  dependencies:
+    rx-lite "*"
+
+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"
+  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
+
+safe-buffer@^5.0.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"
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  dependencies:
+    semver "^5.0.3"
+
+semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+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"
+
+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"
+
+slide@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+speedline-core@1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/speedline-core/-/speedline-core-1.4.2.tgz#bb061444a218d67b4cd52f63a262386197b90c8a"
+  integrity sha512-9/5CApkKKl6bS6jJ2D0DQllwz/1xq3cyJCR6DLgAQnkj5djCuq8NbflEdD2TI01p8qzS9qaKjzxM9cHT11ezmg==
+  dependencies:
+    "@types/node" "*"
+    image-ssim "^0.2.0"
+    jpeg-js "^0.1.2"
+
+sshpk@^1.7.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+stack-trace@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
+  integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
+
+stats-analysis@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stats-analysis/-/stats-analysis-2.0.0.tgz#f45c516ff5c5d26c26f2d8c7b3d57592802d6187"
+
+string-width@^1.0.1, string-width@^1.0.2:
+  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@^2.0.0, string-width@^2.1.0:
+  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_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  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"
+
+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-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@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
+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.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+  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"
+
+tar-pack@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  dependencies:
+    debug "^2.2.0"
+    fstream "^1.0.10"
+    fstream-ignore "^1.0.5"
+    once "^1.3.3"
+    readable-stream "^2.1.4"
+    rimraf "^2.5.1"
+    tar "^2.2.1"
+    uid-number "^0.0.6"
+
+tar@^2.0.0, tar@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+term-size@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  dependencies:
+    execa "^0.7.0"
+
+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=
+
+timed-out@4.0.1, timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+
+tmp@^0.0.33:
+  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"
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+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"
+
+uid-number@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
+
+union@~0.4.3:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/union/-/union-0.4.6.tgz#198fbdaeba254e788b0efcb630bc11f24a2959e0"
+  dependencies:
+    qs "~2.3.3"
+
+unique-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  dependencies:
+    crypto-random-string "^1.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"
+
+update-notifier@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.2.0.tgz#1b5837cf90c0736d88627732b661c138f86de72f"
+  dependencies:
+    boxen "^1.0.0"
+    chalk "^1.0.0"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
+
+url-join@^2.0.2:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+  integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=
+
+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"
+  dependencies:
+    prepend-http "^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"
+
+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==
+
+uuid@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
+
+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"
+
+which@1, which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  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"
+  dependencies:
+    string-width "^1.0.2"
+
+widest-line@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+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"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write-file-atomic@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.1.0.tgz#1769f4b551eedce419f0505deae2e26763542d37"
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    slide "^1.1.5"
+
+ws@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.2.tgz#96c1d08b3fefda1d5c1e33700d3bfaa9be2d5608"
+  integrity sha512-t+WGpsNxhMR4v6EClXS8r8km5ZljKJzyGhJf7goJz9k5Ye3+b5Bvno5rjqPuIBn5mnn5GBb7o8IrIWHxX1qOLQ==
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xdg-basedir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+
+y18n@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+yargs-parser@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  integrity sha1-jQrELxbqVd69MyyvTEA4s+P139k=
+  dependencies:
+    camelcase "^4.1.0"
+
+yargs@3.32.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+  dependencies:
+    camelcase "^2.0.1"
+    cliui "^3.0.3"
+    decamelize "^1.1.1"
+    os-locale "^1.4.0"
+    string-width "^1.0.1"
+    window-size "^0.1.4"
+    y18n "^3.2.0"
diff --git a/scripts/ci/check_license.sh b/scripts/ci/check_license.sh
new file mode 100755
index 00000000000..697f390b096
--- /dev/null
+++ b/scripts/ci/check_license.sh
@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -e
+
+# Make sure we don't introduce accidental references to PATENTS.
+EXPECTED='scripts/ci/check_license.sh'
+ACTUAL=$(git grep -l PATENTS)
+
+if [ "$EXPECTED" != "$ACTUAL" ]; then
+  echo "PATENTS crept into some new files?"
+  diff -u <(echo "$EXPECTED") <(echo "$ACTUAL") || true
+  exit 1
+fi
diff --git a/scripts/ci/download_devtools_regression_build.js b/scripts/ci/download_devtools_regression_build.js
new file mode 100755
index 00000000000..ed3c596a0ef
--- /dev/null
+++ b/scripts/ci/download_devtools_regression_build.js
@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const chalk = require('chalk');
+const {join} = require('path');
+const semver = require('semver');
+const yargs = require('yargs');
+const fs = require('fs');
+
+const REGRESSION_FOLDER = 'build-regression';
+
+const ROOT_PATH = join(__dirname, '..', '..');
+
+const buildPath = join(ROOT_PATH, `build`, 'oss-experimental');
+const regressionBuildPath = join(ROOT_PATH, REGRESSION_FOLDER);
+
+const argv = yargs(process.argv.slice(2)).argv;
+
+const version = process.argv[2];
+const shouldReplaceBuild = !!argv.replaceBuild;
+
+async function downloadRegressionBuild() {
+  const reactVersion = semver.coerce(version).version;
+  const installPackages = ['react-dom', 'react', 'react-test-renderer'];
+  if (semver.gte(reactVersion, '16.3.0')) {
+    installPackages.push('react-is');
+  }
+
+  console.log(chalk.bold.white(`Downloading React v${version}\n`));
+
+  // Make build directory for temporary modules we're going to download
+  // from NPM
+  console.log(
+    chalk.white(
+      `Make Build directory at ${chalk.underline.blue(regressionBuildPath)}\n`
+    )
+  );
+  await exec(`mkdir ${regressionBuildPath}`);
+
+  // Install all necessary React packages that have the same version
+  const downloadPackagesStr = installPackages.reduce(
+    (str, name) => `${str} ${name}@${version}`,
+    ''
+  );
+  await exec(
+    `npm install --prefix ${REGRESSION_FOLDER} ${downloadPackagesStr}`
+  );
+
+  // If we shouldn't replace the build folder, we can stop here now
+  // before we modify anything
+  if (!shouldReplaceBuild) {
+    return;
+  }
+
+  // Remove all the packages that we downloaded in the original build folder
+  // so we can move the modules from the regression build over
+  const removePackagesStr = installPackages.reduce(
+    (str, name) => `${str} ${join(buildPath, name)}`,
+    ''
+  );
+  console.log(
+    chalk.white(
+      `Removing ${removePackagesStr
+        .split(' ')
+        .map(str => chalk.underline.blue(str) + '\n')
+        .join(' ')}\n`
+    )
+  );
+  await exec(`rm -rf ${removePackagesStr}`);
+
+  // Move all packages that we downloaded to the original build folder
+  // We need to separately move the scheduler package because it might
+  // be called schedule
+  const movePackageString = installPackages.reduce(
+    (str, name) => `${str} ${join(regressionBuildPath, 'node_modules', name)}`,
+    ''
+  );
+  console.log(
+    chalk.white(
+      `Moving ${movePackageString
+        .split(' ')
+        .map(str => chalk.underline.blue(str) + '\n')
+        .join(' ')} to ${chalk.underline.blue(buildPath)}\n`
+    )
+  );
+  fs.mkdirSync(buildPath, {recursive: true});
+  await exec(`mv ${movePackageString} ${buildPath}`);
+
+  // For React versions earlier than 18.0.0, we explicitly scheduler v0.20.1, which
+  // is the first version that has unstable_mock, which DevTools tests need, but also
+  // has Scheduler.unstable_trace, which, although we don't use in DevTools tests
+  // is imported by older React versions and will break if it's not there
+  if (semver.lte(reactVersion, '18.0.0')) {
+    await exec(`npm install --prefix ${REGRESSION_FOLDER} scheduler@0.20.1`);
+  }
+
+  // In v16.5, scheduler is called schedule. We need to make sure we also move
+  // this over. Otherwise the code will break.
+  if (fs.existsSync(join(regressionBuildPath, 'node_modules', 'schedule'))) {
+    console.log(chalk.white(`Downloading schedule\n`));
+    await exec(
+      `mv ${join(regressionBuildPath, 'node_modules', 'schedule')} ${buildPath}`
+    );
+  } else {
+    console.log(chalk.white(`Downloading scheduler\n`));
+    await exec(`rm -rf ${join(buildPath, 'scheduler')}`);
+    await exec(
+      `mv ${join(
+        regressionBuildPath,
+        'node_modules',
+        'scheduler'
+      )} ${buildPath}`
+    );
+  }
+
+  if (semver.gte(reactVersion, '18.2.0') && semver.lt(reactVersion, '19.0.0')) {
+    console.log(chalk.white(`Downloading react-compiler-runtime\n`));
+    await exec(
+      `npm install --prefix ${REGRESSION_FOLDER} react-compiler-runtime`
+    );
+
+    console.log(
+      chalk.white(
+        `Moving react-compiler-runtime to react/compiler-runtime.js\n`
+      )
+    );
+    await exec(
+      `mv ${REGRESSION_FOLDER}/node_modules/react-compiler-runtime/dist/index.js ${buildPath}/react/compiler-runtime.js`
+    );
+  }
+}
+
+async function main() {
+  try {
+    if (!version) {
+      console.log(chalk.red('Must specify React version to download'));
+      return;
+    }
+    await downloadRegressionBuild();
+  } finally {
+    // We shouldn't remove the regression-build folder unless we're using
+    // it to replace the build folder
+    if (shouldReplaceBuild) {
+      console.log(chalk.bold.white(`Removing regression build`));
+      await exec(`rm -r ${regressionBuildPath}`);
+    }
+  }
+}
+
+main();
diff --git a/scripts/ci/pack_and_store_devtools_artifacts.sh b/scripts/ci/pack_and_store_devtools_artifacts.sh
new file mode 100755
index 00000000000..d427a303e5a
--- /dev/null
+++ b/scripts/ci/pack_and_store_devtools_artifacts.sh
@@ -0,0 +1,30 @@
+#!/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
+if [[ -n "$1" ]]; then
+  yarn build:$1
+  mv ./$1/build/ReactDevTools.zip ../../build/devtools/$1-extension.zip
+  mv ./$1/build/webpack-stats.*.json ../../build/devtools/
+else
+  yarn build
+  for browser in chrome firefox edge; do
+    mv ./$browser/build/ReactDevTools.zip ../../build/devtools/$browser-extension.zip
+    mv ./$browser/build/webpack-stats.*.json ../../build/devtools/
+  done
+fi
diff --git a/scripts/ci/run_devtools_e2e_tests.js b/scripts/ci/run_devtools_e2e_tests.js
new file mode 100755
index 00000000000..040af722ad9
--- /dev/null
+++ b/scripts/ci/run_devtools_e2e_tests.js
@@ -0,0 +1,200 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {spawn} = require('child_process');
+const {join} = require('path');
+
+const ROOT_PATH = join(__dirname, '..', '..');
+const reactVersion = process.argv[2];
+const inlinePackagePath = join(ROOT_PATH, 'packages', 'react-devtools-inline');
+const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
+const playwrightArtifactsPath = join(ROOT_PATH, 'tmp', 'playwright-artifacts');
+
+const {SUCCESSFUL_COMPILATION_MESSAGE} = require(
+  join(shellPackagePath, 'constants.js')
+);
+
+let buildProcess = null;
+let serverProcess = null;
+let testProcess = null;
+
+function format(loggable) {
+  return `${loggable}`
+    .split('\n')
+    .filter(line => {
+      return line.trim() !== '';
+    })
+    .map(line => `  ${line}`)
+    .join('\n');
+}
+
+function logBright(loggable) {
+  console.log(`\x1b[1m${loggable}\x1b[0m`);
+}
+
+function logDim(loggable) {
+  const formatted = format(loggable, 2);
+  if (formatted !== '') {
+    console.log(`\x1b[2m${formatted}\x1b[0m`);
+  }
+}
+
+function logError(loggable) {
+  const formatted = format(loggable, 2);
+  if (formatted !== '') {
+    console.error(`\x1b[31m${formatted}\x1b[0m`);
+  }
+}
+
+function buildInlinePackage() {
+  logBright('Building inline packages');
+
+  buildProcess = spawn('yarn', ['build'], {cwd: inlinePackagePath});
+  buildProcess.stdout.on('data', data => {
+    logDim(data);
+  });
+  buildProcess.stderr.on('data', data => {
+    if (
+      `${data}`.includes('Warning') ||
+      // E.g. [BABEL] Note: The code generator has deoptimised the styling of * as it exceeds the max of 500KB.
+      `${data}`.includes('[BABEL] Note')
+    ) {
+      logDim(data);
+    } else {
+      logError(`Error:\n${data}`);
+
+      exitWithCode(1);
+    }
+  });
+  buildProcess.on('close', code => {
+    logBright('Inline package built');
+
+    runTestShell();
+  });
+}
+
+function runTestShell() {
+  const timeoutID = setTimeout(() => {
+    // Assume the test shell server failed to start.
+    logError('Testing shell server failed to start');
+    exitWithCode(1);
+  }, 60 * 1000);
+
+  logBright('Starting testing shell server');
+
+  if (!reactVersion) {
+    serverProcess = spawn('yarn', ['start'], {cwd: shellPackagePath});
+  } else {
+    serverProcess = spawn('yarn', ['start'], {
+      cwd: shellPackagePath,
+      env: {...process.env, REACT_VERSION: reactVersion},
+    });
+  }
+
+  serverProcess.stdout.on('data', data => {
+    if (`${data}`.includes(SUCCESSFUL_COMPILATION_MESSAGE)) {
+      logBright('Testing shell server running');
+
+      clearTimeout(timeoutID);
+
+      runEndToEndTests();
+    }
+  });
+
+  serverProcess.stderr.on('data', data => {
+    if (`${data}`.includes('EADDRINUSE')) {
+      // Something is occupying this port;
+      // We could kill the process and restart but probably better to prompt the user to do this.
+
+      logError('Free up the port and re-run tests:');
+      logBright('  kill -9 $(lsof -ti:8080)');
+
+      exitWithCode(1);
+    } else if (`${data}`.includes('ERROR')) {
+      logError(`Error:\n${data}`);
+
+      exitWithCode(1);
+    } else {
+      // Non-fatal stuff like Babel optimization warnings etc.
+      logDim(data);
+    }
+  });
+}
+
+async function runEndToEndTests() {
+  logBright('Running e2e tests');
+  if (!reactVersion) {
+    testProcess = spawn(
+      'yarn',
+      ['test:e2e', `--output=${playwrightArtifactsPath}`],
+      {
+        cwd: inlinePackagePath,
+      }
+    );
+  } else {
+    testProcess = spawn(
+      'yarn',
+      ['test:e2e', `--output=${playwrightArtifactsPath}`],
+      {
+        cwd: inlinePackagePath,
+        env: {...process.env, REACT_VERSION: reactVersion},
+      }
+    );
+  }
+
+  testProcess.stdout.on('data', data => {
+    // Log without formatting because Playwright applies its own formatting.
+    const formatted = format(data);
+    if (formatted !== '') {
+      console.log(formatted);
+    }
+  });
+  testProcess.stderr.on('data', data => {
+    // Log without formatting because Playwright applies its own formatting.
+    const formatted = format(data);
+    if (formatted !== '') {
+      console.error(formatted);
+    }
+
+    exitWithCode(1);
+  });
+  testProcess.on('close', code => {
+    logBright(`Tests completed with code: ${code}`);
+
+    exitWithCode(code);
+  });
+}
+
+function exitWithCode(code) {
+  if (buildProcess !== null) {
+    try {
+      logBright('Shutting down build process');
+      buildProcess.kill();
+    } catch (error) {
+      logError(error);
+    }
+  }
+
+  if (serverProcess !== null) {
+    try {
+      logBright('Shutting down shell server process');
+      serverProcess.kill();
+    } catch (error) {
+      logError(error);
+    }
+  }
+
+  if (testProcess !== null) {
+    try {
+      logBright('Shutting down test process');
+      testProcess.kill();
+    } catch (error) {
+      logError(error);
+    }
+  }
+
+  process.exit(code);
+}
+
+buildInlinePackage();
diff --git a/scripts/ci/test_print_warnings.sh b/scripts/ci/test_print_warnings.sh
new file mode 100755
index 00000000000..27be0ace0a2
--- /dev/null
+++ b/scripts/ci/test_print_warnings.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set -e
+
+WARNINGS=$(node scripts/print-warnings/print-warnings.js)
+echo "$WARNINGS"
+test ! -z "$WARNINGS"
diff --git a/scripts/devtools/.gitignore b/scripts/devtools/.gitignore
new file mode 100644
index 00000000000..c0a5522d94d
--- /dev/null
+++ b/scripts/devtools/.gitignore
@@ -0,0 +1,2 @@
+.build-metadata
+.progress-estimator
diff --git a/scripts/devtools/README.md b/scripts/devtools/README.md
new file mode 100644
index 00000000000..7f2410c3664
--- /dev/null
+++ b/scripts/devtools/README.md
@@ -0,0 +1,30 @@
+# Releasing DevTools
+
+To release DevTools, do the following steps (in order):
+1. [Prepare a release](#prepare-a-release)
+2. [Build and test a release](#build-and-test-a-release)
+3. [Publish a release](#publish-a-release)
+
+Each of the scripts can be run with a `--dry` flag to test without committing or publishing any changes.
+
+### Prepare a release
+To increment version numbers and update the [CHANGELOG](https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md), run the `prepare-release` script:
+```sh
+./prepare-release.js
+```
+
+You'll need to follow the instructions at the end of the script to push the committed changes to the main fork on GitHub.
+
+### Build and test a release
+To build and test a release, run the `build-and-test` script:
+```sh
+./build-and-test.js
+```
+
+### Publish a release
+To publish a release to NPM, run the `publish-release` script:
+```sh
+./publish-release.js
+```
+
+You'll need to follow the instructions at the end of the script to upload the extension to Chrome, Edge, and Firefox stores.
\ No newline at end of file
diff --git a/scripts/devtools/build-and-test.js b/scripts/devtools/build-and-test.js
new file mode 100755
index 00000000000..78275691aca
--- /dev/null
+++ b/scripts/devtools/build-and-test.js
@@ -0,0 +1,239 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const {exec} = require('child-process-promise');
+const inquirer = require('inquirer');
+const {homedir} = require('os');
+const {join, relative} = require('path');
+const {DRY_RUN, ROOT_PATH} = require('./configuration');
+const {
+  clear,
+  confirm,
+  confirmContinue,
+  execRead,
+  logger,
+  saveBuildMetadata,
+} = require('./utils');
+
+// This is the primary control function for this script.
+async function main() {
+  clear();
+
+  await confirm('Have you stopped all NPM DEV scripts?', () => {
+    const packagesPath = relative(process.cwd(), join(__dirname, 'packages'));
+
+    console.log('Stop all NPM DEV scripts in the following directories:');
+    console.log(
+      chalk.bold('  ' + join(packagesPath, 'react-devtools-core')),
+      chalk.gray('(start:backend, start:standalone)')
+    );
+    console.log(
+      chalk.bold('  ' + join(packagesPath, 'react-devtools-inline')),
+      chalk.gray('(start)')
+    );
+
+    const buildAndTestScriptPath = join(__dirname, 'build-and-test.js');
+    const pathToPrint = relative(process.cwd(), buildAndTestScriptPath);
+
+    console.log('\nThen restart this release step:');
+    console.log(chalk.bold.green('  ' + pathToPrint));
+  });
+
+  await confirm('Have you run the prepare-release script?', () => {
+    const prepareReleaseScriptPath = join(__dirname, 'prepare-release.js');
+    const pathToPrint = relative(process.cwd(), prepareReleaseScriptPath);
+
+    console.log('Begin by running the prepare-release script:');
+    console.log(chalk.bold.green('  ' + pathToPrint));
+  });
+
+  const archivePath = await archiveGitRevision();
+  const currentCommitHash = await downloadLatestReactBuild();
+
+  await buildAndTestInlinePackage();
+  await buildAndTestStandalonePackage();
+  await buildAndTestExtensions();
+
+  saveBuildMetadata({archivePath, currentCommitHash});
+
+  printFinalInstructions();
+}
+
+async function archiveGitRevision() {
+  const desktopPath = join(homedir(), 'Desktop');
+  const archivePath = join(desktopPath, 'DevTools.tgz');
+
+  console.log(`Creating git archive at ${chalk.dim(archivePath)}`);
+  console.log('');
+
+  if (!DRY_RUN) {
+    await exec(`git archive main | gzip > ${archivePath}`, {cwd: ROOT_PATH});
+  }
+
+  return archivePath;
+}
+
+async function buildAndTestExtensions() {
+  const extensionsPackagePath = join(
+    ROOT_PATH,
+    'packages',
+    'react-devtools-extensions'
+  );
+  const buildExtensionsPromise = exec('yarn build', {
+    cwd: extensionsPackagePath,
+  });
+
+  await logger(
+    buildExtensionsPromise,
+    `Building browser extensions ${chalk.dim('(this may take a minute)')}`,
+    {
+      estimate: 60000,
+    }
+  );
+
+  console.log('');
+  console.log(`Extensions have been build for Chrome, Edge, and Firefox.`);
+  console.log('');
+  console.log('Smoke test each extension before continuing:');
+  console.log(`  ${chalk.bold.green('cd ' + extensionsPackagePath)}`);
+  console.log('');
+  console.log(`  ${chalk.dim('# Test Chrome extension')}`);
+  console.log(`  ${chalk.bold.green('yarn test:chrome')}`);
+  console.log('');
+  console.log(`  ${chalk.dim('# Test Edge extension')}`);
+  console.log(`  ${chalk.bold.green('yarn test:edge')}`);
+  console.log('');
+  console.log(`  ${chalk.dim('# Firefox Chrome extension')}`);
+  console.log(`  ${chalk.bold.green('yarn test:firefox')}`);
+
+  await confirmContinue();
+}
+
+async function buildAndTestStandalonePackage() {
+  const corePackagePath = join(ROOT_PATH, 'packages', 'react-devtools-core');
+  const corePackageDest = join(corePackagePath, 'dist');
+
+  await exec(`rm -rf ${corePackageDest}`);
+  const buildCorePromise = exec('yarn build', {cwd: corePackagePath});
+
+  await logger(
+    buildCorePromise,
+    `Building ${chalk.bold('react-devtools-core')} package.`,
+    {
+      estimate: 25000,
+    }
+  );
+
+  const standalonePackagePath = join(ROOT_PATH, 'packages', 'react-devtools');
+  const safariFixturePath = join(
+    ROOT_PATH,
+    'fixtures',
+    'devtools',
+    'standalone',
+    'index.html'
+  );
+
+  console.log('');
+  console.log(
+    `Test the ${chalk.bold('react-devtools-core')} target before continuing:`
+  );
+  console.log(`  ${chalk.bold.green('cd ' + standalonePackagePath)}`);
+  console.log(`  ${chalk.bold.green('yarn start')}`);
+  console.log('');
+  console.log(
+    'The following fixture can be useful for testing Safari integration:'
+  );
+  console.log(`  ${chalk.dim(safariFixturePath)}`);
+
+  await confirmContinue();
+}
+
+async function buildAndTestInlinePackage() {
+  const inlinePackagePath = join(
+    ROOT_PATH,
+    'packages',
+    'react-devtools-inline'
+  );
+  const inlinePackageDest = join(inlinePackagePath, 'dist');
+
+  await exec(`rm -rf ${inlinePackageDest}`);
+  const buildPromise = exec('yarn build', {cwd: inlinePackagePath});
+
+  await logger(
+    buildPromise,
+    `Building ${chalk.bold('react-devtools-inline')} package.`,
+    {
+      estimate: 10000,
+    }
+  );
+
+  const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
+
+  console.log('');
+  console.log(`Built ${chalk.bold('react-devtools-inline')} target.`);
+  console.log('');
+  console.log('Test this build before continuing:');
+  console.log(`  ${chalk.bold.green('cd ' + shellPackagePath)}`);
+  console.log(`  ${chalk.bold.green('yarn start')}`);
+
+  await confirmContinue();
+}
+
+async function downloadLatestReactBuild() {
+  const releaseScriptPath = join(ROOT_PATH, 'scripts', 'release');
+  const installPromise = exec('yarn install', {cwd: releaseScriptPath});
+
+  await logger(
+    installPromise,
+    `Installing release script dependencies. ${chalk.dim(
+      '(this may take a minute if CI is still running)'
+    )}`,
+    {
+      estimate: 5000,
+    }
+  );
+
+  console.log('');
+
+  const currentCommitHash = (await exec('git rev-parse HEAD')).stdout.trim();
+  if (!currentCommitHash) {
+    throw new Error('Failed to get current commit hash');
+  }
+
+  const {commit} = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'commit',
+      message: 'Which React version (commit) should be used?',
+      default: currentCommitHash,
+    },
+  ]);
+  console.log('');
+
+  const downloadScriptPath = join(
+    releaseScriptPath,
+    'download-experimental-build.js'
+  );
+  const downloadPromise = execRead(
+    `"${downloadScriptPath}" --commit=${commit}`
+  );
+
+  await logger(downloadPromise, 'Downloading React artifacts from CI.', {
+    estimate: 15000,
+  });
+
+  return currentCommitHash;
+}
+
+function printFinalInstructions() {
+  const publishReleaseScriptPath = join(__dirname, 'publish-release.js');
+  const pathToPrint = relative(process.cwd(), publishReleaseScriptPath);
+
+  console.log('');
+  console.log('Continue by running the publish-release script:');
+  console.log(chalk.bold.green('  ' + pathToPrint));
+}
+
+main();
diff --git a/scripts/devtools/configuration.js b/scripts/devtools/configuration.js
new file mode 100644
index 00000000000..98d65baf946
--- /dev/null
+++ b/scripts/devtools/configuration.js
@@ -0,0 +1,46 @@
+'use strict';
+
+const {join} = require('path');
+
+const PACKAGE_PATHS = [
+  'packages/react-devtools/package.json',
+  'packages/react-devtools-core/package.json',
+  'packages/react-devtools-inline/package.json',
+  'packages/react-devtools-timeline/package.json',
+];
+
+const MANIFEST_PATHS = [
+  'packages/react-devtools-extensions/chrome/manifest.json',
+  'packages/react-devtools-extensions/edge/manifest.json',
+  'packages/react-devtools-extensions/firefox/manifest.json',
+];
+
+const NPM_PACKAGES = [
+  'react-devtools',
+  'react-devtools-core',
+  'react-devtools-inline',
+];
+
+const CHANGELOG_PATH = 'packages/react-devtools/CHANGELOG.md';
+
+const PULL_REQUEST_BASE_URL = 'https://github.com/facebook/react/pull/';
+
+const RELEASE_SCRIPT_TOKEN = '<!-- RELEASE_SCRIPT_TOKEN -->';
+
+const ROOT_PATH = join(__dirname, '..', '..');
+
+const DRY_RUN = process.argv.includes('--dry');
+
+const BUILD_METADATA_TEMP_DIRECTORY = join(__dirname, '.build-metadata');
+
+module.exports = {
+  BUILD_METADATA_TEMP_DIRECTORY,
+  CHANGELOG_PATH,
+  DRY_RUN,
+  MANIFEST_PATHS,
+  NPM_PACKAGES,
+  PACKAGE_PATHS,
+  PULL_REQUEST_BASE_URL,
+  RELEASE_SCRIPT_TOKEN,
+  ROOT_PATH,
+};
diff --git a/scripts/devtools/package.json b/scripts/devtools/package.json
new file mode 100644
index 00000000000..2188210b239
--- /dev/null
+++ b/scripts/devtools/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "react-devtools-release-script",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {},
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^2.1.0",
+    "child-process-promise": "^2.2.1",
+    "fs-extra": "^4.0.2",
+    "inquirer": "^8.1.2",
+    "progress-estimator": "^0.2.1",
+    "prompt-promise": "^1.0.3",
+    "semver": "^5.4.1"
+  }
+}
diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
new file mode 100755
index 00000000000..6ea4e60741b
--- /dev/null
+++ b/scripts/devtools/prepare-release.js
@@ -0,0 +1,286 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const {exec} = require('child-process-promise');
+const {readFileSync, writeFileSync} = require('fs');
+const {readJsonSync, writeJsonSync} = require('fs-extra');
+const inquirer = require('inquirer');
+const {join, relative} = require('path');
+const semver = require('semver');
+const {
+  CHANGELOG_PATH,
+  DRY_RUN,
+  MANIFEST_PATHS,
+  PACKAGE_PATHS,
+  PULL_REQUEST_BASE_URL,
+  RELEASE_SCRIPT_TOKEN,
+  ROOT_PATH,
+} = require('./configuration');
+const {
+  checkNPMPermissions,
+  clear,
+  confirmContinue,
+  execRead,
+} = require('./utils');
+
+// This is the primary control function for this script.
+async function main() {
+  clear();
+
+  await checkNPMPermissions();
+
+  const sha = await getPreviousCommitSha();
+  const [shortCommitLog, formattedCommitLog] = await getCommitLog(sha);
+
+  console.log('');
+  console.log(
+    'This release includes the following commits:',
+    chalk.gray(shortCommitLog)
+  );
+  console.log('');
+
+  const releaseType = await getReleaseType();
+
+  const path = join(ROOT_PATH, PACKAGE_PATHS[0]);
+  const previousVersion = readJsonSync(path).version;
+  const {major, minor, patch} = semver(previousVersion);
+  const nextVersion =
+    releaseType === 'minor'
+      ? `${major}.${minor + 1}.0`
+      : `${major}.${minor}.${patch + 1}`;
+
+  updateChangelog(nextVersion, formattedCommitLog);
+
+  await reviewChangelogPrompt();
+
+  updatePackageVersions(previousVersion, nextVersion);
+  updateManifestVersions(previousVersion, nextVersion);
+
+  console.log('');
+  console.log(
+    `Packages and manifests have been updated from version ${chalk.bold(
+      previousVersion
+    )} to ${chalk.bold(nextVersion)}`
+  );
+  console.log('');
+
+  await commitPendingChanges(previousVersion, nextVersion);
+
+  printFinalInstructions();
+}
+
+async function commitPendingChanges(previousVersion, nextVersion) {
+  console.log('');
+  console.log('Committing revision and changelog.');
+  console.log(chalk.dim('  git add .'));
+  console.log(
+    chalk.dim(
+      `  git commit -m "React DevTools ${previousVersion} -> ${nextVersion}"`
+    )
+  );
+
+  if (!DRY_RUN) {
+    await exec(`
+      git add .
+      git commit -m "React DevTools ${previousVersion} -> ${nextVersion}"
+    `);
+  }
+
+  console.log('');
+  console.log(`Please push this commit before continuing:`);
+  console.log(`  ${chalk.bold.green('git push')}`);
+
+  await confirmContinue();
+}
+
+async function getCommitLog(sha) {
+  let shortLog = '';
+  let formattedLog = '';
+
+  const hasGh = await hasGithubCLI();
+  const rawLog = await execRead(`
+    git log --topo-order --pretty=format:'%s' ${sha}...HEAD -- packages/react-devtools*
+  `);
+  const lines = rawLog.split('\n');
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].replace(/^\[devtools\] */i, '');
+    const match = line.match(/(.+) \(#([0-9]+)\)/);
+    if (match !== null) {
+      const title = match[1];
+      const pr = match[2];
+      let username;
+      if (hasGh) {
+        const response = await execRead(
+          `gh api /repos/facebook/react/pulls/${pr}`
+        );
+        const {user} = JSON.parse(response);
+        username = `[${user.login}](${user.html_url})`;
+      } else {
+        username = '[USERNAME](https://github.com/USERNAME)';
+      }
+      formattedLog += `\n* ${title} (${username} in [#${pr}](${PULL_REQUEST_BASE_URL}${pr}))`;
+      shortLog += `\n* ${title}`;
+    } else {
+      formattedLog += `\n* ${line}`;
+      shortLog += `\n* ${line}`;
+    }
+  }
+
+  return [shortLog, formattedLog];
+}
+
+async function hasGithubCLI() {
+  try {
+    await exec('which gh');
+    return true;
+  } catch (_) {}
+  return false;
+}
+
+async function getPreviousCommitSha() {
+  const choices = [];
+
+  const lines = await execRead(`
+    git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- ${join(
+      ROOT_PATH,
+      PACKAGE_PATHS[0]
+    )}
+  `);
+
+  lines.split('\n').forEach((line, index) => {
+    const [hash, message, date] = line.split(':::');
+    choices.push({
+      name: `${chalk.bold(hash)} ${chalk.dim(date)} ${message}`,
+      value: hash,
+      short: date,
+    });
+  });
+
+  const {sha} = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'sha',
+      message: 'Which of the commits above marks the last DevTools release?',
+      choices,
+      default: choices[0].value,
+    },
+  ]);
+
+  return sha;
+}
+
+async function getReleaseType() {
+  const {releaseType} = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'releaseType',
+      message: 'Which type of release is this?',
+      choices: [
+        {
+          name: 'Minor (new user facing functionality)',
+          value: 'minor',
+          short: 'Minor',
+        },
+        {name: 'Patch (bug fixes only)', value: 'patch', short: 'Patch'},
+      ],
+      default: 'patch',
+    },
+  ]);
+
+  return releaseType;
+}
+
+function printFinalInstructions() {
+  const buildAndTestcriptPath = join(__dirname, 'build-and-test.js');
+  const pathToPrint = relative(process.cwd(), buildAndTestcriptPath);
+
+  console.log('');
+  console.log('Continue by running the build-and-test script:');
+  console.log(chalk.bold.green('  ' + pathToPrint));
+}
+
+async function reviewChangelogPrompt() {
+  console.log('');
+  console.log(
+    'The changelog has been updated with commits since the previous release:'
+  );
+  console.log(`  ${chalk.bold(CHANGELOG_PATH)}`);
+  console.log('');
+  console.log('Please review the new changelog text for the following:');
+  console.log('  1. Filter out any non-user-visible changes (e.g. typo fixes)');
+  console.log('  2. Organize the list into Features vs Bugfixes');
+  console.log('  3. Combine related PRs into a single bullet list');
+  console.log(
+    '  4. Replacing the "USERNAME" placeholder text with the GitHub username(s)'
+  );
+  console.log('');
+  console.log(`  ${chalk.bold.green(`open ${CHANGELOG_PATH}`)}`);
+
+  await confirmContinue();
+}
+
+function updateChangelog(nextVersion, commitLog) {
+  const path = join(ROOT_PATH, CHANGELOG_PATH);
+  const oldChangelog = readFileSync(path, 'utf8');
+
+  const [beginning, end] = oldChangelog.split(RELEASE_SCRIPT_TOKEN);
+
+  const dateString = new Date().toLocaleDateString('en-us', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  const header = `---\n\n### ${nextVersion}\n${dateString}`;
+
+  const newChangelog = `${beginning}${RELEASE_SCRIPT_TOKEN}\n\n${header}\n${commitLog}${end}`;
+
+  console.log(chalk.dim('  Updating changelog: ' + CHANGELOG_PATH));
+
+  if (!DRY_RUN) {
+    writeFileSync(path, newChangelog);
+  }
+}
+
+function updateManifestVersions(previousVersion, nextVersion) {
+  MANIFEST_PATHS.forEach(partialPath => {
+    const path = join(ROOT_PATH, partialPath);
+    const json = readJsonSync(path);
+    json.version = nextVersion;
+
+    if (json.hasOwnProperty('version_name')) {
+      json.version_name = nextVersion;
+    }
+
+    console.log(chalk.dim('  Updating manifest JSON: ' + partialPath));
+
+    if (!DRY_RUN) {
+      writeJsonSync(path, json, {spaces: 2});
+    }
+  });
+}
+
+function updatePackageVersions(previousVersion, nextVersion) {
+  PACKAGE_PATHS.forEach(partialPath => {
+    const path = join(ROOT_PATH, partialPath);
+    const json = readJsonSync(path);
+    json.version = nextVersion;
+
+    for (let key in json.dependencies) {
+      if (key.startsWith('react-devtools')) {
+        const version = json.dependencies[key];
+
+        json.dependencies[key] = version.replace(previousVersion, nextVersion);
+      }
+    }
+
+    console.log(chalk.dim('  Updating package JSON: ' + partialPath));
+
+    if (!DRY_RUN) {
+      writeJsonSync(path, json, {spaces: 2});
+    }
+  });
+}
+
+main();
diff --git a/scripts/devtools/publish-release.js b/scripts/devtools/publish-release.js
new file mode 100755
index 00000000000..6a2ab4f79d2
--- /dev/null
+++ b/scripts/devtools/publish-release.js
@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const {exec} = require('child-process-promise');
+const {readJsonSync} = require('fs-extra');
+const inquirer = require('inquirer');
+const {join, relative} = require('path');
+const {DRY_RUN, NPM_PACKAGES, ROOT_PATH} = require('./configuration');
+const {
+  checkNPMPermissions,
+  clear,
+  confirm,
+  execRead,
+  logger,
+  readSavedBuildMetadata,
+} = require('./utils');
+
+// This is the primary control function for this script.
+async function main() {
+  clear();
+
+  await confirm('Have you run the build-and-test script?', () => {
+    const buildAndTestScriptPath = join(__dirname, 'build-and-test.js');
+    const pathToPrint = relative(process.cwd(), buildAndTestScriptPath);
+
+    console.log('Begin by running the build-and-test script:');
+    console.log(chalk.bold.green('  ' + pathToPrint));
+  });
+
+  const {archivePath, currentCommitHash} = readSavedBuildMetadata();
+
+  await checkNPMPermissions();
+
+  await publishToNPM();
+
+  await printFinalInstructions(currentCommitHash, archivePath);
+}
+
+async function printFinalInstructions(currentCommitHash, archivePath) {
+  console.log('');
+  console.log(
+    'You are now ready to publish the extension to Chrome, Edge, and Firefox:'
+  );
+  console.log(
+    `  ${chalk.blue.underline(
+      'https://fburl.com/publish-react-devtools-extensions'
+    )}`
+  );
+  console.log('');
+  console.log('When publishing to Firefox, remember the following:');
+  console.log(`  Commit Hash: ${chalk.bold(currentCommitHash)}`);
+  console.log(`  Git archive: ${chalk.bold(archivePath)}`);
+  console.log('');
+  console.log('Also consider syncing this release to Facebook:');
+  console.log(`  ${chalk.bold.green('js1 upgrade react-devtools')}`);
+}
+
+async function publishToNPM() {
+  const {otp} = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'otp',
+      message: 'Please provide an NPM two-factor auth token:',
+    },
+  ]);
+
+  console.log('');
+
+  if (!otp) {
+    console.error(chalk.red(`Invalid OTP provided: "${chalk.bold(otp)}"`));
+    process.exit(0);
+  }
+
+  for (let index = 0; index < NPM_PACKAGES.length; index++) {
+    const npmPackage = NPM_PACKAGES[index];
+    const packagePath = join(ROOT_PATH, 'packages', npmPackage);
+    const {version} = readJsonSync(join(packagePath, 'package.json'));
+
+    // Check if this package version has already been published.
+    // If so we might be resuming from a previous run.
+    // We could infer this by comparing the build-info.json,
+    // But for now the easiest way is just to ask if this is expected.
+    const versionListJSON = await execRead(
+      `npm view ${npmPackage} versions --json`
+    );
+    const versionList = JSON.parse(versionListJSON);
+    const versionIsAlreadyPublished = versionList.includes(version);
+
+    if (versionIsAlreadyPublished) {
+      console.log('');
+      console.log(
+        `${npmPackage} version ${chalk.bold(
+          version
+        )} has already been published.`
+      );
+
+      await confirm(`Is this expected (will skip ${npmPackage}@${version})?`);
+      continue;
+    }
+
+    if (DRY_RUN) {
+      console.log(`Publishing package ${chalk.bold(npmPackage)}`);
+      console.log(chalk.dim(`  npm publish --otp=${otp}`));
+    } else {
+      const publishPromise = exec(`npm publish --otp=${otp}`, {
+        cwd: packagePath,
+      });
+
+      await logger(
+        publishPromise,
+        `Publishing package ${chalk.bold(npmPackage)}`,
+        {
+          estimate: 2500,
+        }
+      );
+    }
+  }
+}
+
+main();
diff --git a/scripts/devtools/utils.js b/scripts/devtools/utils.js
new file mode 100644
index 00000000000..06006500627
--- /dev/null
+++ b/scripts/devtools/utils.js
@@ -0,0 +1,128 @@
+'use strict';
+
+const chalk = require('chalk');
+const {exec} = require('child-process-promise');
+const {existsSync, mkdirSync} = require('fs');
+const {readJsonSync, writeJsonSync} = require('fs-extra');
+const inquirer = require('inquirer');
+const {join} = require('path');
+const createLogger = require('progress-estimator');
+const {
+  BUILD_METADATA_TEMP_DIRECTORY,
+  NPM_PACKAGES,
+} = require('./configuration');
+
+const logger = createLogger({
+  storagePath: join(__dirname, '.progress-estimator'),
+});
+
+async function checkNPMPermissions() {
+  const currentUser = await execRead('npm whoami');
+  const failedProjects = [];
+
+  const checkProject = async project => {
+    const owners = (await execRead(`npm owner ls ${project}`))
+      .split('\n')
+      .filter(owner => owner)
+      .map(owner => owner.split(' ')[0]);
+
+    if (!owners.includes(currentUser)) {
+      failedProjects.push(project);
+    }
+  };
+
+  await logger(
+    Promise.all(NPM_PACKAGES.map(checkProject)),
+    `Checking NPM permissions for ${chalk.bold(currentUser)}.`,
+    {estimate: 2500}
+  );
+
+  console.log('');
+
+  if (failedProjects.length) {
+    console.error(chalk.red.bold('Insufficient NPM permissions'));
+    console.error('');
+    console.error(
+      chalk.red(
+        `NPM user {underline ${currentUser}} is not an owner for: ${chalk.bold(
+          failedProjects.join(', ')
+        )}`
+      )
+    );
+    console.error(
+      chalk.red(
+        'Please contact a React team member to be added to the above project(s).'
+      )
+    );
+    process.exit(1);
+  }
+}
+
+function clear() {
+  console.clear();
+}
+
+async function confirm(message, exitFunction) {
+  console.log('');
+
+  const {confirmation} = await inquirer.prompt({
+    name: 'confirmation',
+    type: 'confirm',
+    message,
+  });
+
+  console.log('');
+
+  if (!confirmation) {
+    if (typeof exitFunction === 'function') {
+      exitFunction();
+    }
+
+    process.exit(0);
+  }
+}
+
+async function confirmContinue(exitFunction) {
+  await confirm('Continue the release?', exitFunction);
+}
+
+async function execRead(command, options) {
+  const {stdout} = await exec(command, options);
+
+  return stdout.trim();
+}
+
+function readSavedBuildMetadata() {
+  const path = join(BUILD_METADATA_TEMP_DIRECTORY, 'metadata');
+
+  if (!existsSync(path)) {
+    console.error(chalk.red('Expected to find build metadata at:'));
+    console.error(chalk.dim(`  ${path}`));
+    process.exit(1);
+  }
+
+  const {archivePath, currentCommitHash} = readJsonSync(path);
+
+  return {archivePath, currentCommitHash};
+}
+
+function saveBuildMetadata({archivePath, currentCommitHash}) {
+  const path = join(BUILD_METADATA_TEMP_DIRECTORY, 'metadata');
+
+  if (!existsSync(BUILD_METADATA_TEMP_DIRECTORY)) {
+    mkdirSync(BUILD_METADATA_TEMP_DIRECTORY);
+  }
+
+  writeJsonSync(path, {archivePath, currentCommitHash}, {spaces: 2});
+}
+
+module.exports = {
+  checkNPMPermissions,
+  clear,
+  confirm,
+  confirmContinue,
+  execRead,
+  logger,
+  readSavedBuildMetadata,
+  saveBuildMetadata,
+};
diff --git a/scripts/devtools/yarn.lock b/scripts/devtools/yarn.lock
new file mode 100644
index 00000000000..fd79a7138bd
--- /dev/null
+++ b/scripts/devtools/yarn.lock
@@ -0,0 +1,586 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+ansi-escapes@^3.0.0:
+  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.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+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@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
+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@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+bl@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
+buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
+chalk@^2.1.0, chalk@^2.4.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"
+
+chalk@^4.1.0, chalk@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+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==
+
+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:
+    cross-spawn "^4.0.2"
+    node-version "^1.0.0"
+    promise-polyfill "^6.0.1"
+
+cli-cursor@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
+  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"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-spinners@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
+  integrity sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==
+
+cli-spinners@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.0.tgz#36c7dc98fb6a9a76bd6238ec3f77e2425627e939"
+  integrity sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==
+
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+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"
+
+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:
+    clone "^1.0.2"
+
+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==
+
+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=
+
+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.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
+figures@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+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"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
+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-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+humanize-duration@^3.15.3:
+  version "3.27.0"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.27.0.tgz#3f781b7cf8022ad587f76b9839b60bc2b29636b2"
+  integrity sha512-qLo/08cNc3Tb0uD7jK0jAcU5cnqCM0n568918E7R2XhMr/+7F37p4EY062W/stg7tmzvknNn9b/1+UhVRzsYrQ==
+
+iconv-lite@^0.4.24:
+  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.2 < 3"
+
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+inherits@^2.0.3, 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==
+
+inquirer@^8.1.2:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.1.2.tgz#65b204d2cd7fb63400edd925dfe428bafd422e3d"
+  integrity sha512-DHLKJwLPNgkfwNmsuEUKSejJFbkv0FMO9SMiQbjI3n5NQuCrSIBqP66ggqyz2a6t2qEolKrMjhQ3+W/xXgUQ+Q==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.1"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.21"
+    mute-stream "0.0.8"
+    ora "^5.3.0"
+    run-async "^2.4.0"
+    rxjs "^7.2.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
+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-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-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
+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=
+
+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"
+
+keypress@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/keypress/-/keypress-0.2.1.tgz#1e80454250018dbad4c3fe94497d6e67b6269c77"
+  integrity sha1-HoBFQlABjbrUw/6USX1uZ7YmnHc=
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-symbols@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
+  dependencies:
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
+
+log-update@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
+  integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
+  dependencies:
+    ansi-escapes "^3.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^3.0.1"
+
+lru-cache@^4.0.1:
+  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"
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+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==
+
+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==
+
+native-or-another@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/native-or-another/-/native-or-another-2.0.0.tgz#17a567f92beea9cd71acff96a7681a735eca3bff"
+  integrity sha1-F6Vn+Svuqc1xrP+Wp2gac17KO/8=
+  dependencies:
+    native-or-bluebird "^1.1.2"
+
+native-or-bluebird@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz#39c47bfd7825d1fb9ffad32210ae25daadf101c9"
+  integrity sha1-OcR7/Xgl0fuf+tMiEK4l2q3xAck=
+
+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==
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
+  dependencies:
+    mimic-fn "^1.0.0"
+
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+ora@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
+  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
+  dependencies:
+    bl "^4.1.0"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.5.0"
+    is-interactive "^1.0.0"
+    is-unicode-supported "^0.1.0"
+    log-symbols "^4.1.0"
+    strip-ansi "^6.0.0"
+    wcwidth "^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=
+
+progress-estimator@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/progress-estimator/-/progress-estimator-0.2.2.tgz#1c3947a5782ea56e40c8fccc290ac7ceeb1b91cb"
+  integrity sha512-GF76Ac02MTJD6o2nMNtmtOFjwWCnHcvXyn5HOWPQnEMO8OTLw7LAvNmrwe8LmdsB+eZhwUu9fX/c9iQnBxWaFA==
+  dependencies:
+    chalk "^2.4.1"
+    cli-spinners "^1.3.1"
+    humanize-duration "^3.15.3"
+    log-update "^2.3.0"
+
+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=
+
+prompt-promise@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/prompt-promise/-/prompt-promise-1.0.3.tgz#78ce4fcb9a14a108c49174f2d808c440d1bde265"
+  integrity sha1-eM5Py5oUoQjEkXTy2AjEQNG94mU=
+  dependencies:
+    keypress "~0.2.1"
+    native-or-another "~2.0.0"
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
+
+readable-stream@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
+  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"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+rxjs@^7.2.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.3.0.tgz#39fe4f3461dc1e50be1475b2b85a0a88c1e938c6"
+  integrity sha512-p2yuGIg9S1epc3vrjKf6iVb3RCaAYjYskkO+jHIaV0IjOPlJop4UnodOoFb2xeNwlguqLYvGw1b1McillYb5Gw==
+  dependencies:
+    tslib "~2.1.0"
+
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+semver@^5.4.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+signal-exit@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+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@^4.1.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.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"
+
+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@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.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"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+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=
+
+tmp@^0.0.33:
+  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"
+
+tslib@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+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==
+
+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=
+
+wcwidth@^1.0.1:
+  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"
+
+which@^1.2.9:
+  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"
+
+wrap-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
+  integrity sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
diff --git a/scripts/error-codes/README.md b/scripts/error-codes/README.md
new file mode 100644
index 00000000000..38918bd42a5
--- /dev/null
+++ b/scripts/error-codes/README.md
@@ -0,0 +1,18 @@
+The error code system substitutes React's error messages with error IDs to
+provide a better debugging support in production. Check out the blog post
+[here](https://reactjs.org/blog/2016/07/11/introducing-reacts-error-code-system.html).
+
+- [`codes.json`](https://github.com/facebook/react/blob/main/scripts/error-codes/codes.json)
+  contains the mapping from IDs to error messages. This file is generated by the
+  Gulp plugin and is used by both the Babel plugin and the error decoder page in
+  our documentation. This file is append-only, which means an existing code in
+  the file will never be changed/removed.
+- [`extract-errors.js`](https://github.com/facebook/react/blob/main/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`. It works by crawling the build
+  artifacts directory, so you need to have either run the build script or
+  downloaded pre-built artifacts (e.g. with `yarn download build`). It works
+  with partial builds, too.
+- [`transform-error-messages`](https://github.com/facebook/react/blob/main/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
new file mode 100644
index 00000000000..b13d6306764
--- /dev/null
+++ b/scripts/error-codes/Types.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+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
new file mode 100644
index 00000000000..95987c0cd15
--- /dev/null
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`error transform handles deeply nested expressions 1`] = `
+"var val = (a, (b,
+// eslint-disable-next-line react-internal/prod-error-codes
+new Error('foo')));"
+`;
+
+exports[`error transform handles deeply nested expressions 2`] = `
+"var val = (a, (
+// eslint-disable-next-line react-internal/prod-error-codes
+b, new Error('foo')));"
+`;
+
+exports[`error transform handles escaped backticks in template string 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(231, listener, type));"
+`;
+
+exports[`error transform handles ignoring errors that are comment-excluded inside ternary expressions 1`] = `
+"/*! FIXME (minify-errors-in-prod): Unminified error message in production build!*/
+/*! <expected-error-format>"bar"</expected-error-format>*/
+var val = someBool ?
+//eslint-disable-next-line react-internal/prod-error-codes
+new Error('foo') : someOtherBool ? new Error('bar') :
+//eslint-disable-next-line react-internal/prod-error-codes
+new Error('baz');"
+`;
+
+exports[`error transform handles ignoring errors that are comment-excluded outside ternary expressions 1`] = `
+"//eslint-disable-next-line react-internal/prod-error-codes
+var val = someBool ? new Error('foo') : someOtherBool ? new Error('bar') : new Error('baz');"
+`;
+
+exports[`error transform should not touch other calls or new expressions 1`] = `
+"new NotAnError();
+NotAnError();"
+`;
+
+exports[`error transform should output FIXME for errors that don't have a matching error code 1`] = `
+"/*! FIXME (minify-errors-in-prod): Unminified error message in production build!*/
+/*! <expected-error-format>"This is not a real error message."</expected-error-format>*/
+Error('This is not a real error message.');"
+`;
+
+exports[`error transform should output FIXME for errors that don't have a matching error code, unless opted out with a comment 1`] = `
+"// eslint-disable-next-line react-internal/prod-error-codes
+Error('This is not a real error message.');"
+`;
+
+exports[`error transform should replace error constructors (no new) 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(16));"
+`;
+
+exports[`error transform should replace error constructors 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(16));"
+`;
+
+exports[`error transform should support error constructors with concatenated messages 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support extra arguments to error constructor 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(7, foo, bar), {
+  cause: error
+});"
+`;
+
+exports[`error transform should support interpolating arguments with concatenation 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with template strings 1`] = `
+"import _formatProdErrorMessage from "shared/formatProdErrorMessage";
+Error(_formatProdErrorMessage(7, foo, bar));"
+`;
diff --git a/scripts/error-codes/__tests__/invertObject-test.js b/scripts/error-codes/__tests__/invertObject-test.js
new file mode 100644
index 00000000000..af047dc4212
--- /dev/null
+++ b/scripts/error-codes/__tests__/invertObject-test.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 invertObject = require('../invertObject');
+
+const objectValues = target => Object.keys(target).map(key => target[key]);
+
+describe('invertObject', () => {
+  it('should return an empty object for an empty input', () => {
+    expect(invertObject({})).toEqual({});
+  });
+
+  it('should invert key-values', () => {
+    expect(
+      invertObject({
+        a: '3',
+        b: '4',
+      })
+    ).toEqual({
+      3: 'a',
+      4: 'b',
+    });
+  });
+
+  it('should take the last value when there are duplications in vals', () => {
+    expect(
+      invertObject({
+        a: '3',
+        b: '4',
+        c: '3',
+      })
+    ).toEqual({
+      4: 'b',
+      3: 'c',
+    });
+  });
+
+  it('should preserve the original order', () => {
+    expect(
+      Object.keys(
+        invertObject({
+          a: '3',
+          b: '4',
+          c: '3',
+        })
+      )
+    ).toEqual(['3', '4']);
+
+    expect(
+      objectValues(
+        invertObject({
+          a: '3',
+          b: '4',
+          c: '3',
+        })
+      )
+    ).toEqual(['c', 'b']);
+  });
+});
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
new file mode 100644
index 00000000000..c1058aede48
--- /dev/null
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+let babel = require('@babel/core');
+let devExpressionWithCodes = require('../transform-error-messages');
+
+function transform(input, options = {}) {
+  return babel.transform(input, {
+    plugins: [[devExpressionWithCodes, options]],
+  }).code;
+}
+
+let oldEnv;
+
+describe('error transform', () => {
+  beforeEach(() => {
+    oldEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = '';
+  });
+
+  afterEach(() => {
+    process.env.NODE_ENV = oldEnv;
+  });
+
+  it('should replace error constructors', () => {
+    expect(
+      transform(`
+new Error('Do not override existing functions.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should replace error constructors (no new)', () => {
+    expect(
+      transform(`
+Error('Do not override existing functions.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it("should output FIXME for errors that don't have a matching error code", () => {
+    expect(
+      transform(`
+Error('This is not a real error message.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it(
+    "should output FIXME for errors that don't have a matching error " +
+      'code, unless opted out with a comment',
+    () => {
+      // TODO: Since this only detects one of many ways to disable a lint
+      // rule, we should instead search for a custom directive (like
+      // no-minify-errors) instead of ESLint. Will need to update our lint
+      // rule to recognize the same directive.
+      expect(
+        transform(`
+// eslint-disable-next-line react-internal/prod-error-codes
+Error('This is not a real error message.');
+`)
+      ).toMatchSnapshot();
+    }
+  );
+
+  it('should not touch other calls or new expressions', () => {
+    expect(
+      transform(`
+new NotAnError();
+NotAnError();
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support interpolating arguments with template strings', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to be an array; got \${bar}\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support interpolating arguments with concatenation', () => {
+    expect(
+      transform(`
+new Error('Expected ' + foo + ' target to be an array; got ' + bar);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support error constructors with concatenated messages', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to \` + \`be an array; got \${bar}\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('handles escaped backticks in template string', () => {
+    expect(
+      transform(`
+new Error(\`Expected \\\`\$\{listener\}\\\` listener to be a function, instead got a value of \\\`\$\{type\}\\\` type.\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('handles ignoring errors that are comment-excluded inside ternary expressions', () => {
+    expect(
+      transform(`
+let val = someBool
+  ? //eslint-disable-next-line react-internal/prod-error-codes
+    new Error('foo')
+  : someOtherBool
+  ? new Error('bar')
+  : //eslint-disable-next-line react-internal/prod-error-codes
+    new Error('baz');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('handles ignoring errors that are comment-excluded outside ternary expressions', () => {
+    expect(
+      transform(`
+//eslint-disable-next-line react-internal/prod-error-codes
+let val = someBool
+  ? new Error('foo')
+  : someOtherBool
+  ? new Error('bar')
+  : new Error('baz');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('handles deeply nested expressions', () => {
+    expect(
+      transform(`
+let val =
+  (a,
+  (b,
+  // eslint-disable-next-line react-internal/prod-error-codes
+  new Error('foo')));
+`)
+    ).toMatchSnapshot();
+
+    expect(
+      transform(`
+let val =
+  (a,
+  // eslint-disable-next-line react-internal/prod-error-codes
+  (b, new Error('foo')));
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support extra arguments to error constructor', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to \` + \`be an array; got \${bar}\`, {cause: error});
+`)
+    ).toMatchSnapshot();
+  });
+});
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
new file mode 100644
index 00000000000..d8c8e0b7685
--- /dev/null
+++ b/scripts/error-codes/codes.json
@@ -0,0 +1,559 @@
+{
+  "0": "Encountered an invalid child; DOM elements are not valid children of React components.",
+  "1": "update(): expected target of %s to be an array; got %s.",
+  "2": "update(): expected spec of %s to be an array; got %s. Did you forget to wrap your parameter in an array?",
+  "3": "update(): You provided a key path to update() that did not contain one of %s. Did you forget to include {%s: ...}?",
+  "4": "Cannot have more than one key in an object with %s",
+  "5": "update(): %s expects a spec of type 'object'; got %s",
+  "6": "update(): %s expects a target of type 'object'; got %s",
+  "7": "Expected %s target to be an array; got %s",
+  "8": "update(): expected spec of %s to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?",
+  "9": "update(): expected spec of %s to be a function; got %s.",
+  "10": "instance must be a composite component",
+  "11": "TestUtils.scryRenderedDOMComponentsWithClass expects a className as a second argument.",
+  "12": "ReactShallowRenderer render(): Invalid component element.%s",
+  "13": "ReactShallowRenderer render(): Shallow rendering works only with custom components, not primitives (%s). Instead of calling `.render(el)` and inspecting the rendered output, look at `el.props` directly instead.",
+  "14": "TestUtils.Simulate expects a component instance and not a ReactElement.TestUtils.Simulate will not work if you are using shallow rendering.",
+  "15": "instance must be a composite component",
+  "16": "Do not override existing functions.",
+  "17": "All native instances should have a tag.",
+  "18": "Expected a component class, got %s.%s",
+  "19": "Expect a native root tag, instead got %s",
+  "20": "RawText \"%s\" must be wrapped in an explicit <Text> component.",
+  "21": "Argument is not a component (type: %s, keys: %s)",
+  "22": "Unable to find node handle for unmounted component.",
+  "23": "onlyChild must be passed a children with exactly one child.",
+  "24": "Mismatched list of contexts in callback queue",
+  "25": "Trying to release an instance into a pool of a different type.",
+  "26": "Unexpected node: %s",
+  "27": "Cannot initialize a transaction when there is already an outstanding transaction.",
+  "28": "Transaction.closeAll(): Cannot close transaction when none are open.",
+  "29": "Accumulated items must be not be null or undefined.",
+  "30": "Accumulated items must not be null or undefined.",
+  "31": "Objects are not valid as a React child (found: %s). If you meant to render a collection of children, use an array instead.",
+  "32": "Unable to find element with ID %s.",
+  "33": "getNodeFromInstance: Invalid argument.",
+  "34": "React DOM tree root should always have a node reference.",
+  "35": "isAncestor: Invalid argument.",
+  "36": "getParentInstance: Invalid argument.",
+  "37": "_Target container is not a DOM element.",
+  "38": "parentComponent must be a valid React Component",
+  "39": "ReactDOM.render(): Invalid component element.%s",
+  "40": "Target container is not a DOM element.",
+  "41": "Target container is not valid.",
+  "42": "You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s",
+  "43": "You're trying to render a component to the document but you didn't use server rendering. We can't do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering.",
+  "44": "findDOMNode was called on an unmounted component.",
+  "45": "Element appears to be neither ReactComponent nor DOMNode (keys: %s)",
+  "46": "renderToString(): You must pass a valid ReactElement.",
+  "47": "renderToStaticMarkup(): You must pass a valid ReactElement.",
+  "48": "You're trying to inject DOM property '%s' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.",
+  "49": "DOMProperty: Properties that have side effects must use property: %s",
+  "50": "DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s",
+  "51": "Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering.",
+  "52": "Missing markup.",
+  "53": "Danger: Assigning to an already-occupied result index.",
+  "54": "Danger: Did not assign to every index of resultList.",
+  "55": "Danger: Expected markup to render %s nodes, but rendered %s.",
+  "56": "Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.",
+  "57": "Missing markup.",
+  "58": "Cannot replace markup of the <html> node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString().",
+  "59": "%s is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`.",
+  "60": "Can only set one of `children` or `props.dangerouslySetInnerHTML`.",
+  "61": "`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://react.dev/link/dangerously-set-inner-html for more information.",
+  "62": "The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.",
+  "63": "Must be mounted to trap events",
+  "64": "Requires node to be rendered.",
+  "65": "Invalid tag: %s",
+  "66": "<%s> tried to unmount. Because of cross-browser quirks it is impossible to unmount some top-level components (eg <html>, <head>, and <body>) reliably and efficiently. To fix this, have a single top-level component that never unmounts render these elements.",
+  "67": "Missing closing comment for text component %s",
+  "68": "Expected devtool events to fire for the child before its parent includes it in onSetChildren().",
+  "69": "Expected onSetDisplayName() to fire for the child before its parent includes it in onSetChildren().",
+  "70": "Expected onSetChildren() or onSetText() to fire for the child before its parent includes it in onSetChildren().",
+  "71": "Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().",
+  "72": "Expected onSetParent() and onSetChildren() to be consistent (%s has parents %s and %s).",
+  "73": "ReactClassInterface: You are attempting to override `%s` from your class specification. Ensure that your method names do not overlap with React methods.",
+  "74": "ReactClassInterface: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",
+  "75": "ReactClass: You're attempting to use a component class or function as a mixin. Instead, just use a regular object.",
+  "76": "ReactClass: You're attempting to use a component as a mixin. Instead, just use a regular object.",
+  "77": "ReactClass: Unexpected spec policy %s for key %s when mixing in component specs.",
+  "78": "ReactClass: You are attempting to define a reserved property, `%s`, that shouldn't be on the \"statics\" key. Define it as an instance property instead; it will still be accessible on the constructor.",
+  "79": "ReactClass: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",
+  "80": "mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.",
+  "81": "mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.",
+  "82": "%s.getInitialState(): must return an object or null",
+  "83": "Class specification must implement a `render` method.",
+  "84": "%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",
+  "85": "takes an object of state variables to update or a function which returns an object of state variables.",
+  "86": "SimpleEventPlugin: Unhandled event type, `%s`.",
+  "87": "Cannot provide a checkedLink and a valueLink. If you want to use checkedLink, you probably don't want to use valueLink and vice versa.",
+  "88": "Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don't want to use valueLink.",
+  "89": "Cannot provide a checkedLink and a checked property or onChange event. If you want to use checked or onChange, you probably don't want to use checkedLink",
+  "90": "ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.",
+  "91": "`dangerouslySetInnerHTML` does not make sense on <textarea>.",
+  "92": "If you supply `defaultValue` on a <textarea>, do not pass children.",
+  "93": "<textarea> can only have at most one child.",
+  "94": "Expected %s listener to be a function, instead got type %s",
+  "95": "processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.",
+  "96": "EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.",
+  "97": "EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.",
+  "98": "EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.",
+  "99": "EventPluginRegistry: More than one plugin attempted to publish the same event name, `%s`.",
+  "100": "EventPluginRegistry: More than one plugin attempted to publish the same registration name, `%s`.",
+  "101": "EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.",
+  "102": "EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.",
+  "103": "Invalid `event`.",
+  "104": "ReactCompositeComponent: injectEnvironment() can only be called once.",
+  "105": "A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.",
+  "106": "%s.state: must be set to an object or null",
+  "107": "%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().",
+  "108": "%s.getChildContext(): key \"%s\" is not defined in childContextTypes.",
+  "109": "%s.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.",
+  "110": "Stateless function components cannot have refs.",
+  "111": "There is no registered component for the tag %s",
+  "112": "getNextDescendantID(%s, %s): Received an invalid React DOM ID.",
+  "113": "React has made an invalid assumption about the DOM hierarchy. Expected `%s` to be an ancestor of `%s`.",
+  "114": "getFirstCommonAncestorID(%s, %s): Expected a valid React DOM ID: %s",
+  "115": "Cannot traverse from and to the same ID, `%s`.",
+  "116": "traverseParentPath(%s, %s, ...): Cannot traverse from two IDs that do not have a parent path.",
+  "117": "traverseParentPath(%s, %s, ...): Detected an infinite loop while traversing the React DOM ID tree. This may be due to malformed IDs: %s",
+  "118": "updateTextContent called on non-empty component.",
+  "119": "Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://react.dev/link/refs-must-have-owner).",
+  "120": "Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://react.dev/link/refs-must-have-owner).",
+  "121": "performUpdateIfNecessary: Unexpected batch number (current %s, pending %s)",
+  "122": "%s(...): Expected the last optional `callback` argument to be a function. Instead received: %s.",
+  "123": "ReactUpdates: must inject a reconcile transaction class and batching strategy",
+  "124": "Expected flush transaction's stored dirty-components length (%s) to match dirty-components array length (%s).",
+  "125": "ReactUpdates.asap: Can't enqueue an asap callback in a context where updates are not being batched.",
+  "126": "ReactUpdates: must provide a reconcile transaction class",
+  "127": "ReactUpdates: must provide a batching strategy",
+  "128": "ReactUpdates: must provide a batchedUpdates() function",
+  "129": "ReactUpdates: must provide an isBatchingUpdates boolean attribute",
+  "130": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
+  "131": "Encountered invalid React node of type %s",
+  "132": "Ended a touch event which was not counted in trackedTouchCount.",
+  "133": "Touch object is missing identifier",
+  "134": "Touch data should have been recorded on start",
+  "135": "Cannot find single active touch",
+  "136": "Attempted to update component `%s` that has already been unmounted (or failed to mount).",
+  "137": "%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.",
+  "138": "Touch object is missing identifier.",
+  "139": "ReactTestRenderer: .update() can't be called after unmount.",
+  "140": "Expected hook events to fire for the child before its parent includes it in onSetChildren().",
+  "141": "Expected onSetChildren() to fire for a container child before its parent includes it in onSetChildren().",
+  "142": "Expected onBeforeMountComponent() parent and onSetChildren() to be consistent (%s has parents %s and %s).",
+  "143": "React.Children.only expected to receive a single React element child.",
+  "144": "Item must have been set",
+  "145": "hostContainerInfo should be populated before getPublicInstance is called.",
+  "146": "React Component in warnForMissingKey should have a _store. This error is likely caused by a bug in React. Please file an issue.",
+  "147": "Missing owner for string ref %s. This error is likely caused by a bug in React. Please file an issue.",
+  "148": "Expected ref to be a function or a string.",
+  "149": "Element ref was specified as a string (%s) but no owner was set. You may have multiple copies of React loaded. (details: https://react.dev/link/refs-must-have-owner).",
+  "150": "An object is not an iterable. This error is likely caused by a bug in React. Please file an issue.",
+  "151": "An iterable object provided no iterator.",
+  "152": "Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.",
+  "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 (%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.",
+  "160": "Expected to find a host parent. This error is likely caused by a bug in React. Please file an issue.",
+  "161": "Invalid host parent fiber. This error is likely caused by a bug in React. Please file an issue.",
+  "162": "This should have a text node initialized. This error is likely caused by a bug in React. Please file an issue.",
+  "163": "This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue.",
+  "164": "A coroutine cannot have host component children.",
+  "165": "Should be resolved by now. This error is likely caused by a bug in React. Please file an issue.",
+  "166": "We must have new props for new mounts. This error is likely caused by a bug in React. Please file an issue.",
+  "167": "An indeterminate component should have become determinate before completing. This error is likely caused by a bug in React. Please file an issue.",
+  "168": "Unexpected context found on stack. This error is likely caused by a bug in React. Please file an issue.",
+  "169": "Expected to have an instance by this point. This error is likely caused by a bug in React. Please file an issue.",
+  "170": "Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue.",
+  "171": "Found unexpected detached subtree parent. This error is likely caused by a bug in React. Please file an issue.",
+  "172": "The custom dialog was already injected.",
+  "173": "Injected showDialog() must be a function.",
+  "174": "Expected host context to exist. This error is likely caused by a bug in React. Please file an issue.",
+  "175": "Expected prepareToHydrateHostInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
+  "176": "Expected prepareToHydrateHostTextInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
+  "177": "Cannot commit the same tree as before. This error is likely caused by a bug in React. Please file an issue.",
+  "178": "Should have next effect. This error is likely caused by a bug in React. Please file an issue.",
+  "179": "Should have a pending commit. This error is likely caused by a bug in React. Please file an issue.",
+  "180": "Commit phase errors should be scheduled to recover with task priority. This error is likely caused by a bug in React. Please file an issue.",
+  "181": "Switch statement should be exhaustive. This error is likely caused by a bug in React. Please file an issue.",
+  "182": "performWork was called recursively. This error is likely caused by a bug in React. Please file an issue.",
+  "183": "Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue.",
+  "184": "No error for given unit of work. This error is likely caused by a bug in React. Please file an issue.",
+  "185": "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.",
+  "186": "Task updates can only be scheduled as a nested update or inside batchedUpdates.",
+  "187": "flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.",
+  "188": "Unable to find node on an unmounted component.",
+  "189": "Child was not found in either parent set. This indicates a bug in React related to the return pointer. Please file an issue.",
+  "190": "Return fibers should always be each others' alternates. This error is likely caused by a bug in React. Please file an issue.",
+  "191": "Invalid argument passed as callback. Expected a function. Instead received: %s",
+  "192": "React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.",
+  "193": "The server renderer does not implement support for array children yet.",
+  "194": "Fiber needs to be injected to handle a fiber target for controlled events. This error is likely caused by a bug in React. Please file an issue.",
+  "195": "The internal instance must be a React host component. This error is likely caused by a bug in React. Please file an issue.",
+  "196": "Missing injection for fiber getContextForSubtree",
+  "197": "Injected invokeGuardedCallback() must be a function.",
+  "198": "clearCaughtError was called but no error was captured. This error is likely caused by a bug in React. Please file an issue.",
+  "199": "Fiber owners should not show up in Stack stack traces.",
+  "200": "Target container is not a DOM element.",
+  "201": "ReactDOM.render(): Invalid component element. Instead of passing a string like 'div', pass React.createElement('div') or <div />.",
+  "202": "ReactDOM.render(): Invalid component element. Instead of passing a class like Foo, pass React.createElement(Foo) or <Foo />.",
+  "203": "ReactDOM.render(): Invalid component element. This may be caused by unintentionally loading two independent copies of React.",
+  "204": "ReactDOM.render(): Invalid component element.",
+  "205": "renderToNodeStream(): Invalid component element.",
+  "206": "renderToStaticNodeStream(): Invalid component element.",
+  "207": "ReactDOMServer.renderToNodeStream(): The streaming API is not available in the browser. Use ReactDOMServer.renderToString() instead.",
+  "208": "ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.",
+  "209": "renderToString(): Invalid component element.",
+  "210": "renderToStaticMarkup(): Invalid component element.",
+  "211": "Missing injection for fiber findDOMNode",
+  "212": "Missing injection for stack findDOMNode",
+  "213": "Element appears to be neither ReactComponent nor DOMNode. Keys: %s",
+  "214": "toTree() does not yet know how to handle nodes with tag=%s",
+  "215": "something went wrong",
+  "216": "Text children should already be flattened.",
+  "217": "ReactART does not support the type \"%s\"",
+  "218": "ReactART: Can not insert node before itself",
+  "219": "getInspectorDataForViewTag() is not available in production",
+  "220": "Container does not support insertBefore operation",
+  "221": "Tried to register two views with the same name %s",
+  "222": "View config not found for name %s",
+  "224": "Can't read from currently-mounting component. This error is likely caused by a bug in React. Please file an issue.",
+  "225": "Unexpected object passed to ReactTestInstance constructor (tag: %s). This is probably a bug in React.",
+  "226": "Unsupported component type %s in test renderer. This is probably a bug in React.",
+  "227": "ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM.",
+  "228": "TestUtils.Simulate expected a DOM node as the first argument but received a React element. Pass the DOM node you wish to simulate the event on instead. Note that TestUtils.Simulate will not work if you are using shallow rendering.",
+  "229": "TestUtils.Simulate expected a DOM node as the first argument but received a component instance. Pass the DOM node you wish to simulate the event on instead.",
+  "230": "_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.unstable_createPortal).",
+  "231": "Expected `%s` listener to be a function, instead got a value of `%s` type.",
+  "232": "_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).",
+  "233": "Unsupported top level event type \"%s\" dispatched",
+  "234": "Event cannot be both direct and bubbling: %s",
+  "235": "Persistent reconciler is disabled.",
+  "236": "Noop reconciler is disabled.",
+  "237": "Mutating reconciler is disabled.",
+  "238": "Task updates can only be scheduled as a nested update or inside batchedUpdates. This error is likely caused by a bug in React. Please file an issue.",
+  "239": "Measure not implemented yet",
+  "240": "Text components are not supported for now.",
+  "241": "Text components are not yet supported.",
+  "242": "%s: %s type `%s` is invalid; it must be a function, usually from the `prop-types` package, but received `%s`.",
+  "243": "renderRoot was called recursively. This error is likely caused by a bug in React. Please file an issue.",
+  "244": "Should have a previous and last root. This error is likely caused by a bug in React. Please file an issue.",
+  "245": "performWorkOnRoot was called recursively. This error is likely caused by a bug in React. Please file an issue.",
+  "246": "Should be working on a root. This error is likely caused by a bug in React. Please file an issue.",
+  "247": "A call cannot have host component children.",
+  "248": "Not implemented.",
+  "249": "ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `%s`.",
+  "250": "batch.render: Cannot render a batch that already committed.",
+  "251": "batch.commit: Cannot commit a batch multiple times.",
+  "252": "The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous.",
+  "253": "work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.",
+  "254": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a functional component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://react.dev/link/refs-must-have-owner for more information.",
+  "255": "Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.",
+  "257": "Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render.",
+  "258": "Unknown element-like object type: %s. This is likely a bug in React. Please file an issue.",
+  "259": "The experimental Call and Return types are not currently supported by the server renderer.",
+  "260": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: %s.",
+  "261": "Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue.",
+  "262": "Expired work should have completed. This error is likely caused by a bug in React. Please file an issue.",
+  "263": "dispatch: Cannot dispatch during the render phase.",
+  "264": "An error logging effect should not have been scheduled if no errors were captured. This error is likely caused by a bug in React. Please file an issue.",
+  "265": "This unit of work tag cannot capture errors. This error is likely caused by a bug in React. Please file an issue.",
+  "266": "A subscription must return an unsubscribe function.",
+  "267": "The argument must be a React element, but you passed %s.",
+  "268": "Argument appears to not be a ReactComponent. Keys: %s",
+  "269": "Profiler must specify an \"id\" string and \"onRender\" function as props",
+  "270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.",
+  "271": "Failed to replay rendering after an error. This is likely caused by a bug in React. Please file an issue with a reproducing case to help us find it.",
+  "273": "Nesting of <View> within <Text> is not currently supported.",
+  "274": "Text strings must be rendered within a <Text> component.",
+  "275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.",
+  "276": "React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://react.dev/link/react-polyfills",
+  "277": "Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.",
+  "278": "unstable_createRoot(...): Target container is not a DOM element.",
+  "279": "Trying to release an event instance into a pool of a different type.",
+  "280": "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.",
+  "281": "Finished root should have a work-in-progress. This error is likely caused by a bug in React. Please file an issue.",
+  "282": "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.",
+  "283": "Element type is invalid. Received a promise that resolves to: %s. Promise elements must resolve to a class or function.",
+  "284": "Expected ref to be a function, an object returned by React.createRef(), or undefined/null.",
+  "285": "The root failed to unmount after an error. This is likely a bug in React. Please file an issue.",
+  "286": "%s(...): the first argument must be a React class instance. Instead received: %s.",
+  "287": "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `schedule/tracking` module with `schedule/tracking-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://react.dev/link/profiling",
+  "288": "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `schedule/tracing` module with `schedule/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://react.dev/link/profiling",
+  "289": "Function components cannot have refs.",
+  "290": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://react.dev/link/refs-must-have-owner for more information.",
+  "292": "The matcher `toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(Scheduler).toHaveYielded(expectedYields)",
+  "293": "Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.",
+  "294": "ReactDOMServer does not yet support Suspense.",
+  "295": "ReactDOMServer does not yet support lazy-loaded components.",
+  "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": "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 https://react.dev/link/profiling",
+  "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",
+  "307": "Hooks can only be called inside the body of a function component. (https://react.dev/link/invalid-hook-call)",
+  "308": "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().",
+  "309": "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref",
+  "310": "Rendered more hooks than during the previous render.",
+  "311": "Should have a queue. You are likely calling Hooks conditionally, which is not allowed. (https://react.dev/link/invalid-hook-call)",
+  "312": "Rendered more hooks than during the previous render",
+  "313": "Unknown priority level. This error is likely caused by a bug in React. Please file an issue.",
+  "314": "Pinged unknown suspense boundary type. This is probably a bug in React.",
+  "315": "Suspense boundaries are never on the root. This is probably a bug in React.",
+  "316": "Expected skipPastDehydratedSuspenseInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
+  "317": "Expected to have a hydrated suspense instance. This error is likely caused by a bug in React. Please file an issue.",
+  "318": "A dehydrated suspense component was completed without a hydrated node. This is probably a bug in React.",
+  "319": "A dehydrated suspense boundary must commit before trying to render. This is probably a bug in React.",
+  "320": "Expected ReactFiberErrorDialog.showErrorDialog to be a function.",
+  "321": "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.",
+  "322": "forwardRef requires a render function but was given %s.",
+  "323": "React has blocked a javascript: URL as a security precaution.",
+  "326": "Expected a valid priority level",
+  "327": "Should not already be working.",
+  "328": "Should have a work-in-progress.",
+  "329": "Unknown root exit status.",
+  "330": "Should be working on an effect.",
+  "331": "Cannot flush passive effects while already rendering.",
+  "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": "Accumulated items must not be null or undefined.",
+  "335": "ReactDOMServer does not yet support the event API.",
+  "338": "ReactDOMServer does not yet support the fundamental API.",
+  "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.",
+  "348": "ensureListeningTo(): received a container that was not an element node. This is likely a bug in React.",
+  "349": "Expected a work-in-progress root. This is a bug in React. Please file an issue.",
+  "350": "Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.",
+  "351": "Unsupported Server Component type: %s",
+  "352": "React Lazy Components are not yet supported on the server.",
+  "353": "A server block should never encode any other slots. This is a bug in React.",
+  "354": "getInspectorDataForViewAtPoint() is not available in production.",
+  "355": "The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly. (TODO: This feature was never released so we should be able to remove this error from the map.)",
+  "356": "Could not read the cache.",
+  "357": "The current renderer does not support React Scopes. This error is likely caused by a bug in React. Please file an issue.",
+  "358": "Invalid update priority: %s. This is a bug in React.",
+  "360": "Invalid lane: %s. This is a bug in React.",
+  "361": "The current renderer does not support test selectors. This error is likely caused by a bug in React. Please file an issue.",
+  "362": "Could not find React container within specified host subtree.",
+  "363": "Test selector API is not supported by this renderer.",
+  "364": "Invalid host root specified. Should be either a React container or a node with a testname attribute.",
+  "365": "Invalid selector type specified.",
+  "366": "ReactDOM.createEventHandle: setListener called on an target that did not have a corresponding root. This is likely a bug in React.",
+  "367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.",
+  "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React.",
+  "369": "ReactDOM.createEventHandle: setter called on an invalid target. Provide a valid EventTarget or an element managed by React.",
+  "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function.",
+  "371": "Text string must be rendered within a <Text> component.\n\nText: %s",
+  "372": "Cannot call unstable_createEventHandle with \"%s\", as it is not an event known to React.",
+  "373": "This Hook is not supported in Server Components.",
+  "374": "Event handlers cannot be passed to Client Component props.%s\nIf you need interactivity, consider converting part of this to a Client Component.",
+  "375": "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with \"use server\". Or maybe you meant to call this function rather than return it.%s",
+  "376": "Only global symbols received from Symbol.for(...) can be passed to Client Components. The symbol Symbol.for(%s) cannot be found among global symbols.%s",
+  "377": "BigInt (%s) is not yet supported in Client Component props.%s",
+  "378": "Type %s is not supported in Client Component props.%s",
+  "379": "Refs cannot be used in Server Components, nor passed to Client Components.",
+  "380": "Reading the cache is only supported while rendering.",
+  "381": "This feature is not supported by ReactSuspenseTestUtils.",
+  "382": "This query has received more parameters than the last time the same query was used. Always pass the exact number of parameters that the query needs.",
+  "383": "This query has received fewer parameters than the last time the same query was used. Always pass the exact number of parameters that the query needs.",
+  "384": "Refreshing the cache is not supported in Server Components.",
+  "385": "A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects.",
+  "386": "The current renderer does not support microtasks. This error is likely caused by a bug in React. Please file an issue.",
+  "387": "Should have a current fiber. This is a bug in React.",
+  "388": "Expected to find a bailed out fiber. This is a bug in React.",
+  "389": "There can only be one root segment. This is a bug in React.",
+  "390": "Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.",
+  "391": "A previously unvisited boundary must have exactly one root segment. This is a bug in React.",
+  "392": "A root segment ID must have been assigned by now. This is a bug in React.",
+  "393": "Cache cannot be refreshed during server rendering.",
+  "394": "startTransition cannot be called during server rendering.",
+  "395": "An ID must have been assigned before we can complete the boundary.",
+  "396": "More boundaries or placeholders than we expected to ever emit.",
+  "397": "Unknown insertion mode. This is a bug in React.",
+  "398": "`dangerouslySetInnerHTML` does not work on <option>.",
+  "399": "%s is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`.",
+  "400": "menuitems cannot have `children` nor `dangerouslySetInnerHTML`.",
+  "401": "The stacks must reach the root at the same time. This is a bug in React.",
+  "402": "The depth must equal at least at zero before reaching the root. This is a bug in React.",
+  "403": "Tried to pop a Context at the root of the app. This is a bug in React.",
+  "404": "Invalid hook call. Hooks can only be called inside of the body of a function component.",
+  "405": "hydrateRoot(...): Target container is not a DOM element.",
+  "406": "act(...) is not supported in production builds of React.",
+  "407": "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.",
+  "408": "Missing getServerSnapshot, which is required for server-rendered content.",
+  "409": "Cannot update an unmounted root.",
+  "411": "%s 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.",
+  "412": "Connection closed.",
+  "413": "Expected finished root and lanes to be set. This is a bug in React.",
+  "414": "Did not expect this call in production. This is a bug in React. Please file an issue.",
+  "415": "Error parsing the data. It's probably an error code or network corruption.",
+  "416": "This environment don't support binary chunks.",
+  "417": "React currently only supports piping to one writable stream.",
+  "418": "Hydration failed because the server rendered %s didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n\n- A server/client branch `if (typeof window !== 'undefined')`.\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n- Date formatting in a user's locale which doesn't match the server.\n- External changing data without sending a snapshot of it along with the HTML.\n- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\nhttps://react.dev/link/hydration-mismatch%s",
+  "419": "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.",
+  "420": "ServerContext: %s already defined",
+  "421": "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.",
+  "422": "There was an error while hydrating but React was able to recover by instead client rendering from the nearest Suspense boundary.",
+  "423": "There was an error while hydrating but React was able to recover by instead client rendering the entire root.",
+  "424": "This root received an early update, before anything was able hydrate. Switched the entire root to client rendering.",
+  "425": "Text content does not match server-rendered HTML.",
+  "426": "A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.",
+  "427": "useServerContext expects a context created with React.createServerContext",
+  "428": "useServerContext is only supported while rendering.",
+  "429": "ServerContext: %s already defined",
+  "430": "ServerContext can only have a value prop and children. Found: %s",
+  "431": "React elements are not allowed in ServerContext",
+  "432": "The render was aborted by the server without a reason.",
+  "433": "useId can only be used while React is rendering",
+  "434": "`dangerouslySetInnerHTML` does not make sense on <title>.",
+  "435": "Unexpected Suspense handler tag (%s). This is a bug in React.",
+  "436": "Stylesheet resources need a unique representation in the DOM while hydrating and more than one matching DOM Node was found. To fix, ensure you are only rendering one stylesheet link with an href attribute of \"%s\".",
+  "437": "the \"precedence\" prop for links to stylesheets expects to receive a string but received something of type \"%s\" instead.",
+  "438": "An unsupported type was passed to use(): %s",
+  "439": "We didn't expect to see a forward reference. This is a bug in the React Server.",
+  "440": "A function wrapped in useEffectEvent can't be called during rendering.",
+  "441": "An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.",
+  "442": "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue.",
+  "443": "acquireResource encountered a resource type it did not expect: \"%s\". this is a bug in React.",
+  "444": "getResource encountered a type it did not expect: \"%s\". this is a bug in React.",
+  "445": "\"currentResources\" was expected to exist. This is a bug in React.",
+  "446": "\"resourceRoot\" was expected to exist. This is a bug in React.",
+  "447": "While attempting to insert a Resource, React expected the Document to contain a head element but it was not found.",
+  "448": "createPortal was called on the server. Portals are not currently supported on the server. Update your program to conditionally call createPortal on the client only.",
+  "449": "flushSync was called on the server. This is likely caused by a function being called during render or in module scope that was intended to be called from an effect or event handler. Update your to not call flushSync no the server.",
+  "450": "The current renderer does not support Singletons. This error is likely caused by a bug in React. Please file an issue.",
+  "451": "resolveSingletonInstance was called with an element type that is not supported. This is a bug in React.",
+  "452": "React expected an <html> element (document.documentElement) to exist in the Document but one was not found. React never removes the documentElement for any Document it renders into so the cause is likely in some other script running on this page.",
+  "453": "React expected a <head> element (document.head) to exist in the Document but one was not found. React never removes the head for any Document it renders into so the cause is likely in some other script running on this page.",
+  "454": "React expected a <body> element (document.body) to exist in the Document but one was not found. React never removes the body for any Document it renders into so the cause is likely in some other script running on this page.",
+  "455": "This CacheSignal was requested outside React which means that it is immediately aborted.",
+  "456": "Calling Offscreen.detach before instance handle has been set.",
+  "457": "acquireHeadResource encountered a resource type it did not expect: \"%s\". This is a bug in React.",
+  "458": "Currently React only supports one RSC renderer at a time.",
+  "459": "Expected a suspended thenable. This is a bug in React. Please file an issue.",
+  "460": "Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render. You must either rethrow it immediately, or move the `use` call outside of the `try/catch` block. Capturing without rethrowing will lead to unexpected behavior.\n\nTo handle async errors, wrap your component in an error boundary, or call the promise's `.catch` method and pass the result to `use`.",
+  "461": "This is not a real error. It's an implementation detail of React's selective hydration feature. If this leaks into userspace, it's a bug in React. Please file an issue.",
+  "462": "Unexpected SuspendedReason. This is a bug in React.",
+  "463": "ReactDOMServer.renderToNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
+  "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
+  "465": "enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle.",
+  "466": "Trying to call a function from \"use server\" but the callServer option was not implemented in your router runtime.",
+  "467": "Update hook called on initial render. This is likely a bug in React. Please file an issue.",
+  "468": "getNodesForType encountered a type it did not expect: \"%s\". This is a bug in React.",
+  "469": "Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again.",
+  "470": "Only global symbols received from Symbol.for(...) can be passed to Server Functions. The symbol Symbol.for(%s) cannot be found among global symbols.",
+  "471": "BigInt (%s) is not yet supported as an argument to a Server Function.",
+  "472": "Type %s is not supported as an argument to a Server Function.",
+  "473": "React doesn't accept base64 encoded file uploads because we don't except form data passed from a browser to ever encode data that way. If that's the wrong assumption, we can easily fix it.",
+  "474": "Suspense Exception: This is not a real error, and should not leak into userspace. If you're seeing this, it's likely a bug in React.",
+  "475": "Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.",
+  "476": "Expected the form instance to be a HostComponent. This is a bug in React.",
+  "477": "React Internal Error: processHintChunk is not implemented for Native-Relay. The fact that this method was called means there is a bug in React.",
+  "478": "Thenable should have already resolved. This is a bug in React.",
+  "479": "Cannot update optimistic state while rendering.",
+  "480": "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration.",
+  "481": "Tried to encode a Server Action from a different instance than the encoder is from. This is a bug in React.",
+  "482": "An unknown Component is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
+  "483": "Hooks are not supported inside an async component. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.",
+  "484": "A Server Component was postponed. The reason is omitted in production builds to avoid leaking sensitive details.",
+  "485": "Cannot update form state while rendering.",
+  "486": "It should not be possible to postpone at the root. This is a bug in React.",
+  "487": "We should not have any resumable nodes in the shell. This is a bug in React.",
+  "488": "Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering.",
+  "489": "Expected the resume to render <%s> in this slot but instead it rendered <%s>. The tree doesn't match so React will fallback to client rendering.",
+  "490": "Expected the resume to render <%s> in this slot but instead it rendered <%s>. The tree doesn't match so React will fallback to client rendering.",
+  "491": "It should not be possible to postpone both at the root of an element as well as a slot below. This is a bug in React.",
+  "492": "The \"react\" package in this environment is not configured correctly. The \"react-server\" condition must be enabled in any environment that runs React Server Components.",
+  "493": "To taint a value, a lifetime must be defined by passing an object that holds the value.",
+  "494": "taintUniqueValue cannot taint objects or functions. Try taintObjectReference instead.",
+  "495": "Cannot taint a %s because the value is too general and not unique enough to block globally.",
+  "496": "Only objects or functions can be passed to taintObjectReference. Try taintUniqueValue instead.",
+  "497": "Only objects or functions can be passed to taintObjectReference.",
+  "498": "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.%s",
+  "499": "Only plain objects, and a few built-ins, can be passed to Server Functions. Classes or null prototypes are not supported.%s",
+  "500": "React expected a headers state to exist when emitEarlyPreloads was called but did not find it. This suggests emitEarlyPreloads was called more than once per request. This is a bug in React.",
+  "501": "The render was aborted with postpone when the shell is incomplete. Reason: %s",
+  "502": "Cannot read a Client Context from a Server Component.",
+  "503": "Cannot use() an already resolved Client Reference.",
+  "504": "Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client.",
+  "505": "Cannot render an Async Component, Promise or React.Lazy inside React.Children. We recommend not iterating over children and just rendering them plain.",
+  "506": "Functions are not valid as a child of Client Components. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.%s",
+  "507": "Expected the last optional `callback` argument to be a function. Instead received: %s.",
+  "508": "The first argument must be a React class instance. Instead received: %s.",
+  "509": "ReactDOM: Unsupported Legacy Mode API.",
+  "510": "React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options.%s",
+  "511": "Missing a temporary reference set but the RSC response returned a temporary reference. Pass a temporaryReference option with the set that was used with the reply.",
+  "512": "The RSC response contained a reference that doesn't exist in the temporary reference set. Always pass the matching set that was used to create the reply when parsing its response.",
+  "513": "Cannot render a Client Context Provider on the Server. Instead, you can export a Client Component wrapper that itself renders a Client Context Provider.",
+  "514": "Cannot access %s on the server. You cannot dot into a temporary client reference from a server component. You can only pass the value through to the client.",
+  "515": "Cannot assign to a temporary client reference from a server module.",
+  "516": "Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
+  "517": "Symbols cannot be passed to a Server Function without a temporary reference set. Pass a TemporaryReferenceSet to the options.%s",
+  "518": "Saw multiple hydration diff roots in a pass. This is a bug in React.",
+  "519": "Hydration Mismatch Exception: This is not a real error, and should not leak into userspace. If you're seeing this, it's likely a bug in React.",
+  "520": "There was an error during concurrent rendering but React was able to recover by instead synchronously rendering the entire root.",
+  "521": "flushSyncWork should not be called from builds that support legacy mode. This is a bug in React.",
+  "522": "Invalid form element. requestFormReset must be passed a form that was rendered by React.",
+  "523": "The render was aborted due to being postponed.",
+  "524": "Values cannot be passed to next() of AsyncIterables passed to Client Components.",
+  "525": "A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the \"react\" package is used.\n- A library pre-bundled an old copy of \"react\" or \"react/jsx-runtime\".\n- A compiler tries to \"inline\" JSX instead of using the runtime.",
+  "526": "Could not reference an opaque temporary reference. This is likely due to misconfiguring the temporaryReferences options on the server.",
+  "527": "Incompatible React versions: The \"react\" and \"react-dom\" packages must have the exact same version. Instead got:\n  - react:      %s\n  - react-dom:  %s\nLearn more: https://react.dev/warnings/version-mismatch",
+  "528": "Expected <link> not to update to be updated to a stylesheet with precedence. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
+  "529": "Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
+  "530": "The render was aborted by the server with a promise.",
+  "531": "react-markup is not supported outside a React Server Components environment.",
+  "532": "Attempted to render a Client Component from renderToHTML. This is not supported since it will never hydrate. Only render Server Components with renderToHTML.",
+  "533": "Attempted to render a Server Action from renderToHTML. This is not supported since it varies by version of the app. Use a fixed URL for any forms instead.",
+  "534": "renderToHTML should not have emitted Client References. This is a bug in React.",
+  "535": "renderToHTML should not have emitted Server References. This is a bug in React.",
+  "536": "Cannot pass ref in renderToHTML because they will never be hydrated.",
+  "537": "Cannot pass event handlers (%s) in renderToHTML because the HTML will never be hydrated so they can never get called.",
+  "538": "Cannot use state or effect Hooks in renderToHTML because this component will never be hydrated.",
+  "539": "Binary RSC chunks cannot be encoded as strings. This is a bug in the wiring of the React streams.",
+  "540": "String chunks need to be passed in their original shape. Not split into smaller string chunks. This is a bug in the wiring of the React streams.",
+  "541": "Compared context values must be arrays",
+  "542": "Suspense Exception: This is not a real error! It's an implementation detail of `useActionState` to interrupt the current render. You must either rethrow it immediately, or move the `useActionState` call outside of the `try/catch` block. Capturing without rethrowing will lead to unexpected behavior.\n\nTo handle async errors, wrap your component in an error boundary.",
+  "543": "Expected a ResourceEffectUpdate to be pushed together with ResourceEffectIdentity. This is a bug in React.",
+  "544": "Found a pair with an auto name. This is a bug in React.",
+  "545": "The %s tag may only be rendered once.",
+  "546": "useEffect CRUD overload is not enabled in this build of React.",
+  "547": "startGesture cannot be called during server rendering.",
+  "548": "Finished rendering the gesture lane but there were no pending gestures. React should not have started a render in this case. This is a bug in React.",
+  "549": "Cannot start a gesture with a disconnected AnimationTimeline.",
+  "550": "startGestureTransition is not yet supported in react-art.",
+  "551": "startGestureTransition is not yet supported in React Native.",
+  "552": "Cannot use a startGestureTransition() on a detached root.",
+  "553": "A Timeline is required as the first argument to startGestureTransition.",
+  "554": "Cannot setState on regular state inside a startGestureTransition. Gestures can only update the useOptimistic() hook. There should be no side-effects associated with starting a Gesture until its Action is invoked. Move side-effects to the Action instead.",
+  "555": "Cannot requestFormReset() inside a startGestureTransition. There should be no side-effects associated with starting a Gesture until its Action is invoked. Move side-effects to the Action instead.",
+  "556": "Expected prepareToHydrateHostActivityInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.",
+  "557": "Expected to have a hydrated activity instance. This error is likely caused by a bug in React. Please file an issue.",
+  "558": "Client rendering an Activity suspended it again. This is a bug in React.",
+  "559": "Expected to find a host node. This is a bug in React.",
+  "560": "Cannot use a startGestureTransition() with a comment node root.",
+  "561": "This rendered a large document (>%s kB) without any Suspense boundaries around most of it. That can delay initial paint longer than necessary. To improve load performance, add a <Suspense> or <SuspenseList> around the content you expect to be below the header or below the fold. In the meantime, the content will deopt to paint arbitrary incomplete pieces of HTML.",
+  "562": "The render was aborted due to a fatal error.",
+  "563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
+  "564": "Unknown command. The debugChannel was not wired up properly.",
+  "565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
+  "566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead.",
+  "567": "Already initialized stream.",
+  "568": "Already initialized typed array.",
+  "569": "Cannot have cyclic thenables.",
+  "570": "Invalid reference."
+}
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
new file mode 100644
index 00000000000..addb095b4ca
--- /dev/null
+++ b/scripts/error-codes/extract-errors.js
@@ -0,0 +1,74 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const {execSync} = require('child_process');
+
+async function main() {
+  const originalJSON = JSON.parse(
+    fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
+  );
+  const existingMessages = new Set();
+  const codes = Object.keys(originalJSON);
+  let nextCode = 0;
+  for (let i = 0; i < codes.length; i++) {
+    const codeStr = codes[i];
+    const message = originalJSON[codeStr];
+    const code = parseInt(codeStr, 10);
+    existingMessages.add(message);
+    if (code >= nextCode) {
+      nextCode = code + 1;
+    }
+  }
+
+  console.log('Searching `build` directory for unminified errors...\n');
+
+  let out;
+  try {
+    out = execSync(
+      "git --no-pager grep -n --untracked --no-exclude-standard '/*! <expected-error-format>' -- build"
+    ).toString();
+  } catch (e) {
+    if (e.status === 1 && e.stdout.toString() === '') {
+      // No unminified errors found.
+      return;
+    }
+    throw e;
+  }
+
+  let newJSON = null;
+  const regex = /\<expected-error-format\>"(.+?)"\<\/expected-error-format\>/g;
+  do {
+    const match = regex.exec(out);
+    if (match === null) {
+      break;
+    } else {
+      const message = match[1].trim();
+      if (existingMessages.has(message)) {
+        // This probably means you ran the script twice.
+        continue;
+      }
+      existingMessages.add(message);
+
+      // Add to json map
+      if (newJSON === null) {
+        newJSON = Object.assign({}, originalJSON);
+      }
+      console.log(`"${nextCode}": "${message}"`);
+      newJSON[nextCode] = message;
+      nextCode += 1;
+    }
+  } while (true);
+
+  if (newJSON) {
+    fs.writeFileSync(
+      path.resolve(__dirname, '../error-codes/codes.json'),
+      JSON.stringify(newJSON, null, 2)
+    );
+  }
+}
+
+main().catch(error => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/error-codes/invertObject.js b/scripts/error-codes/invertObject.js
new file mode 100644
index 00000000000..025fa2d133f
--- /dev/null
+++ b/scripts/error-codes/invertObject.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+/**
+ * turns
+ *   { 'MUCH ERROR': '0', 'SUCH WRONG': '1' }
+ * into
+ *   { 0: 'MUCH ERROR', 1: 'SUCH WRONG' }
+ */
+function invertObject(targetObj) {
+  const result = {};
+  const mapKeys = Object.keys(targetObj);
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const originalKey of mapKeys) {
+    const originalVal = targetObj[originalKey];
+
+    result[originalVal] = originalKey;
+  }
+
+  return result;
+}
+
+module.exports = invertObject;
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
new file mode 100644
index 00000000000..56c831f9ae7
--- /dev/null
+++ b/scripts/error-codes/transform-error-messages.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 fs = require('fs');
+const {evalStringAndTemplateConcat} = require('../shared/evalToString');
+const invertObject = require('./invertObject');
+const helperModuleImports = require('@babel/helper-module-imports');
+
+const errorMap = invertObject(
+  JSON.parse(fs.readFileSync(__dirname + '/codes.json', 'utf-8'))
+);
+
+const SEEN_SYMBOL = Symbol('transform-error-messages.seen');
+
+module.exports = function (babel) {
+  const t = babel.types;
+
+  function ErrorCallExpression(path, file) {
+    // Turns this code:
+    //
+    // new Error(`A ${adj} message that contains ${noun}`);
+    //
+    // or this code (no constructor):
+    //
+    // Error(`A ${adj} message that contains ${noun}`);
+    //
+    // into this:
+    //
+    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
+    const node = path.node;
+    if (node[SEEN_SYMBOL]) {
+      return;
+    }
+    node[SEEN_SYMBOL] = true;
+
+    const errorMsgNode = node.arguments[0];
+    if (errorMsgNode === undefined) {
+      return;
+    }
+
+    const errorMsgExpressions = [];
+    const errorMsgLiteral = evalStringAndTemplateConcat(
+      errorMsgNode,
+      errorMsgExpressions
+    );
+
+    if (errorMsgLiteral === 'react-stack-top-frame') {
+      // This is a special case for generating stack traces.
+      return;
+    }
+
+    let prodErrorId = errorMap[errorMsgLiteral];
+    if (prodErrorId === undefined) {
+      // There is no error code for this message. Add an inline comment
+      // that flags this as an unminified error. This allows the build
+      // to proceed, while also allowing a post-build linter to detect it.
+      //
+      // Outputs:
+      //   /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
+      //   /* <expected-error-format>"A % message that contains %"</expected-error-format> */
+      //   if (!condition) {
+      //     throw Error(`A ${adj} message that contains ${noun}`);
+      //   }
+
+      let leadingComments = [];
+
+      const statementParent = path.getStatementParent();
+      let nextPath = path;
+      while (true) {
+        let nextNode = nextPath.node;
+        if (nextNode.leadingComments) {
+          leadingComments.push(...nextNode.leadingComments);
+        }
+        if (nextPath === statementParent) {
+          break;
+        }
+        nextPath = nextPath.parentPath;
+      }
+
+      if (leadingComments !== undefined) {
+        for (let i = 0; i < leadingComments.length; i++) {
+          // TODO: Since this only detects one of many ways to disable a lint
+          // rule, we should instead search for a custom directive (like
+          // no-minify-errors) instead of ESLint. Will need to update our lint
+          // rule to recognize the same directive.
+          const commentText = leadingComments[i].value;
+          if (
+            commentText.includes(
+              'eslint-disable-next-line react-internal/prod-error-codes'
+            )
+          ) {
+            return;
+          }
+        }
+      }
+
+      statementParent.addComment(
+        'leading',
+        `! <expected-error-format>"${errorMsgLiteral}"</expected-error-format>`
+      );
+      statementParent.addComment(
+        'leading',
+        '! FIXME (minify-errors-in-prod): Unminified error message in production build!'
+      );
+      return;
+    }
+    prodErrorId = parseInt(prodErrorId, 10);
+
+    // Import formatProdErrorMessage
+    const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
+      path,
+      'shared/formatProdErrorMessage',
+      {nameHint: 'formatProdErrorMessage'}
+    );
+
+    // Outputs:
+    //   formatProdErrorMessage(ERR_CODE, adj, noun);
+    const prodMessage = t.callExpression(formatProdErrorMessageIdentifier, [
+      t.numericLiteral(prodErrorId),
+      ...errorMsgExpressions,
+    ]);
+
+    // Outputs:
+    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
+    const newErrorCall = t.callExpression(t.identifier('Error'), [
+      prodMessage,
+      ...node.arguments.slice(1),
+    ]);
+    newErrorCall[SEEN_SYMBOL] = true;
+    path.replaceWith(newErrorCall);
+  }
+
+  return {
+    visitor: {
+      NewExpression(path, file) {
+        if (path.get('callee').isIdentifier({name: 'Error'})) {
+          ErrorCallExpression(path, file);
+        }
+      },
+
+      CallExpression(path, file) {
+        if (path.get('callee').isIdentifier({name: 'Error'})) {
+          ErrorCallExpression(path, file);
+          return;
+        }
+      },
+    },
+  };
+};
diff --git a/scripts/eslint-rules/README.md b/scripts/eslint-rules/README.md
new file mode 100644
index 00000000000..81916227a55
--- /dev/null
+++ b/scripts/eslint-rules/README.md
@@ -0,0 +1,5 @@
+# Custom ESLint Rules
+
+This is a dummy npm package that allows us to treat it as an `eslint-plugin`. It's not actually published, nor are the rules here useful for users of React. If you want to lint your React code, try <https://github.com/yannickcr/eslint-plugin-react>.
+
+**If you modify this rule, you must re-run `npm install ./eslint-rules` for it to take effect.**
diff --git a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
new file mode 100644
index 00000000000..2695749ca65
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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-primitive-constructors');
+const {RuleTester} = require('eslint');
+const ruleTester = new RuleTester();
+
+ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
+  valid: ['!!obj', '+string'],
+  invalid: [
+    {
+      code: 'Boolean(obj)',
+      errors: [
+        {
+          message:
+            'Do not use the Boolean constructor. To cast a value to a boolean, use double negation: !!value',
+        },
+      ],
+    },
+    {
+      code: 'new String(obj)',
+      errors: [
+        {
+          message:
+            "Do not use `new String()`. Use String() without new (or '' + value for perf-sensitive code).",
+        },
+      ],
+    },
+    {
+      code: 'Number(string)',
+      errors: [
+        {
+          message:
+            'Do not use the Number constructor. To cast a value to a number, use the plus operator: +value',
+        },
+      ],
+    },
+  ],
+});
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 00000000000..96d8aadca8d
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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');
+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');",
+      output: "if (__DEV__) {console.error('Oh no')};",
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: "console.warn('Oh no');",
+      output: "if (__DEV__) {console.warn('Oh no')};",
+      errors: [
+        {
+          message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: "console.warn('Oh no')",
+      output: "if (__DEV__) {console.warn('Oh no')}",
+      errors: [
+        {
+          message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (potato) {
+          console.warn('Oh no');
+        }
+      `,
+      output: `
+        if (potato) {
+          if (__DEV__) {console.warn('Oh no')};
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__ || potato && true) {
+          console.error('Oh no');
+        }
+      `,
+      output: `
+        if (__DEV__ || potato && true) {
+          if (__DEV__) {console.error('Oh no')};
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (banana && __DEV__ && potato && kitten) {
+          console.error('Oh no');
+        }
+      `,
+      output: `
+        if (banana && __DEV__ && potato && kitten) {
+          if (__DEV__) {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');
+        }
+      `,
+      output: `
+        if (!__DEV__) {
+          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');
+        }
+      `,
+      output: `
+        if (foo || x && __DEV__) {
+          if (__DEV__) {console.error('Oh no')};
+        }
+      `,
+      errors: [
+        {
+          message: `Wrap console.error() in an "if (__DEV__) {}" check`,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+        } else {
+          console.error('Oh no');
+        }
+      `,
+      output: `
+        if (__DEV__) {
+        } else {
+          if (__DEV__) {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');
+          }
+        }
+      `,
+      output: `
+        if (__DEV__) {
+        } else {
+          if (__DEV__) {
+          } else {
+            if (__DEV__) {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__/prod-error-codes-test.internal.js b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
new file mode 100644
index 00000000000..8c894e97b9f
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('../prod-error-codes');
+const {RuleTester} = require('eslint');
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2017,
+  },
+});
+
+ruleTester.run('eslint-rules/prod-error-codes', rule, {
+  valid: [
+    'arbitraryFunction(a, b)',
+    'Error(`Expected ${foo} target to be an array; got ${bar}`)',
+    "Error('Expected ' + foo + ' target to be an array; got ' + bar)",
+    'Error(`Expected ${foo} target to ` + `be an array; got ${bar}`)',
+  ],
+  invalid: [
+    {
+      code: "Error('Not in error map')",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: "Error('Not in ' + 'error map')",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: 'Error(`Not in ` + `error map`)',
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: "Error(`Not in ${'error'} map`)",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in %s map',
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
new file mode 100644
index 00000000000..61c102a1222
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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('../safe-string-coercion');
+const {RuleTester} = require('eslint');
+
+RuleTester.setDefaultConfig({
+  parser: require.resolve('babel-eslint'),
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+  },
+});
+
+const ruleTester = new RuleTester();
+
+const missingDevCheckMessage =
+  'Missing DEV check before this string coercion.' +
+  ' Check should be in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+const prevStatementNotDevCheckMessage =
+  'The statement before this coercion must be a DEV check in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+const message =
+  "Using `'' + value` or `value + ''` is fast to coerce strings, but may throw." +
+  ' For prod code, add a DEV check from shared/CheckStringCoercion immediately' +
+  ' before this coercion.' +
+  ' For non-prod code and prod error handling, use `String(value)` instead.';
+
+ruleTester.run('eslint-rules/safe-string-coercion', rule, {
+  valid: [
+    {
+      code: 'String(obj)',
+      options: [{isProductionUserAppCode: false}],
+    },
+    'String(obj)',
+    "'a' + obj",
+    `
+      function getValueForAttribute(
+        node,
+        name,
+        expected
+      ) {
+        if (__DEV__) {
+          var value = node.getAttribute(name);
+          if (__DEV__) {
+            checkAttributeStringCoercion(expected, name);
+          }
+          if (value === '' + expected) {
+            return expected;
+          }
+          return value;
+        }
+      }
+    `,
+    `
+      if (__DEV__) { checkFormFieldValueStringCoercion (obj) }
+      '' + obj;
+    `,
+    `
+      function f(a, index) {
+        if (typeof a === 'object' && a !== null && a.key != null) {
+          if (__DEV__) {
+            checkKeyStringCoercion(a.key);
+          }
+          return f('' + a.key);
+        }
+        return a;
+      }
+    `,
+    "'' + i++",
+    "'' + +i",
+    "'' + +i",
+    "+i + ''",
+    "if (typeof obj === 'string') { '' + obj }",
+    "if (typeof obj === 'string' || typeof obj === 'number') { '' + obj }",
+    "if (typeof obj === 'string' && somethingElse) { '' + obj }",
+    "if (typeof obj === 'number' && somethingElse) { '' + obj }",
+    "if (typeof obj === 'bigint' && somethingElse) { '' + obj }",
+    "if (typeof obj === 'undefined' && somethingElse) { '' + obj }",
+    "if (typeof nextProp === 'number') { setTextContent(domElement, '' + nextProp); }",
+    // These twe below are sneaky. The inner `if` is unsafe, but the outer `if`
+    // ensures that the unsafe code will never be run. It's bad code, but
+    // doesn't violate this rule.
+    "if (typeof obj === 'string') { if (typeof obj === 'string' && obj.length) {} else {'' + obj} }",
+    "if (typeof obj === 'string') if (typeof obj === 'string' && obj.length) {} else {'' + obj}",
+    "'' + ''",
+    "'' + '' + ''",
+    "`test${foo}` + ''",
+  ],
+  invalid: [
+    {
+      code: "'' + obj",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: "obj + ''",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: 'String(obj)',
+      options: [{isProductionUserAppCode: true}],
+      errors: [
+        {
+          message:
+            "For perf-sensitive coercion, avoid `String(value)`. Instead, use `'' + value`." +
+            ' Precede it with a DEV check from shared/CheckStringCoercion' +
+            ' unless Symbol and Temporal.* values are impossible.' +
+            ' For non-prod code and prod error handling, use `String(value)` and disable this rule.',
+        },
+      ],
+    },
+    {
+      code: "if (typeof obj === 'object') { '' + obj }",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: "if (typeof obj === 'string') { } else if (typeof obj === 'object') {'' + obj}",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: "if (typeof obj === 'string' && obj.length) {} else {'' + obj}",
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__D__) { checkFormFieldValueStringCoercion (obj) }
+          '' + obj;
+        `,
+      errors: [
+        {
+          message: prevStatementNotDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { checkFormFieldValueStringCoercion (obj) }
+          '' + notobjj;
+        `,
+      errors: [
+        {
+          message:
+            'Value passed to the check function before this coercion must match the value being coerced.' +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { checkFormFieldValueStringCoercion (obj) }
+          // must be right before the check call
+          someOtherCode();
+          '' + objj;
+        `,
+      errors: [
+        {
+          message: prevStatementNotDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { chexxxxBadNameCoercion (obj) }
+          '' + objj;
+        `,
+      errors: [
+        {
+          message:
+            'Missing or invalid check function call before this coercion.' +
+            ' Expected: call of a function like checkXXXStringCoercion. ' +
+            prevStatementNotDevCheckMessage +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) {  }
+          '' + objj;
+        `,
+      errors: [
+        {
+          message: prevStatementNotDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `
+          if (__DEV__) { if (x) {} }
+          '' + objj;
+        `,
+      errors: [
+        {
+          message:
+            'The DEV block before this coercion must only contain an expression. ' +
+            prevStatementNotDevCheckMessage +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+        if (a) {
+          if (__DEV__) {
+            // can't have additional code before the check call
+            if (b) {
+              checkKeyStringCoercion(obj);
+            }
+          }
+          g = f( c, d + (b ? '' + obj : '') + e);
+        }
+      `,
+      errors: [
+        {
+          message:
+            'The DEV block before this coercion must only contain an expression. ' +
+            prevStatementNotDevCheckMessage +
+            '\n' +
+            message,
+        },
+      ],
+    },
+    {
+      code: `
+        if (__DEV__) {
+          checkAttributeStringCoercion(expected, name);
+        }
+        // DEV check should be inside the if block
+        if (a && b) {
+          f('' + expected);
+        }
+      `,
+      errors: [
+        {
+          message: missingDevCheckMessage + '\n' + message,
+        },
+      ],
+    },
+    {
+      code: `'' + obj + ''`,
+      errors: [
+        {message: missingDevCheckMessage + '\n' + message},
+        {message: missingDevCheckMessage + '\n' + message},
+      ],
+    },
+    {
+      code: `foo\`text\` + ""`,
+      errors: [{message: missingDevCheckMessage + '\n' + message}],
+    },
+  ],
+});
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 00000000000..e1dae133b0b
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/warning-args-test.internal.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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');
+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
new file mode 100644
index 00000000000..23af2e471a0
--- /dev/null
+++ b/scripts/eslint-rules/index.js
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  rules: {
+    'no-primitive-constructors': require('./no-primitive-constructors'),
+    'warning-args': require('./warning-args'),
+    'prod-error-codes': require('./prod-error-codes'),
+    'no-production-logging': require('./no-production-logging'),
+    'safe-string-coercion': require('./safe-string-coercion'),
+  },
+};
diff --git a/scripts/eslint-rules/no-primitive-constructors.js b/scripts/eslint-rules/no-primitive-constructors.js
new file mode 100644
index 00000000000..12cef216c00
--- /dev/null
+++ b/scripts/eslint-rules/no-primitive-constructors.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = {
+  meta: {
+    schema: [],
+  },
+  create(context) {
+    function report(node, name, msg) {
+      context.report(node, `Do not use the ${name} constructor. ${msg}`);
+    }
+
+    function check(node) {
+      const name = node.callee.name;
+      switch (name) {
+        case 'Boolean':
+          report(
+            node,
+            name,
+            'To cast a value to a boolean, use double negation: !!value'
+          );
+          break;
+        case 'String':
+          if (node.type === 'NewExpression') {
+            context.report(
+              node,
+              "Do not use `new String()`. Use String() without new (or '' + value for perf-sensitive code)."
+            );
+          }
+          break;
+        case 'Number':
+          report(
+            node,
+            name,
+            'To cast a value to a number, use the plus operator: +value'
+          );
+          break;
+      }
+    }
+
+    return {
+      CallExpression: check,
+      NewExpression: check,
+    };
+  },
+};
diff --git a/scripts/eslint-rules/no-production-logging.js b/scripts/eslint-rules/no-production-logging.js
new file mode 100644
index 00000000000..00d26926008
--- /dev/null
+++ b/scripts/eslint-rules/no-production-logging.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = {
+  meta: {
+    fixable: 'code',
+    schema: [],
+  },
+  create: 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 {
+      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/package.json b/scripts/eslint-rules/package.json
new file mode 100644
index 00000000000..6424cce415e
--- /dev/null
+++ b/scripts/eslint-rules/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "eslint-plugin-react-internal",
+  "version": "0.0.0"
+}
diff --git a/scripts/eslint-rules/prod-error-codes.js b/scripts/eslint-rules/prod-error-codes.js
new file mode 100644
index 00000000000..9177cae67e4
--- /dev/null
+++ b/scripts/eslint-rules/prod-error-codes.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 errorMap = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
+);
+const errorMessages = new Set();
+Object.keys(errorMap).forEach(key => errorMessages.add(errorMap[key]));
+
+function nodeToErrorTemplate(node) {
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  } else if (node.type === 'BinaryExpression' && node.operator === '+') {
+    const l = nodeToErrorTemplate(node.left);
+    const r = nodeToErrorTemplate(node.right);
+    return l + r;
+  } else if (node.type === 'TemplateLiteral') {
+    let elements = [];
+    for (let i = 0; i < node.quasis.length; i++) {
+      const elementNode = node.quasis[i];
+      if (elementNode.type !== 'TemplateElement') {
+        throw new Error('Unsupported type ' + node.type);
+      }
+      elements.push(elementNode.value.cooked);
+    }
+    return elements.join('%s');
+  } else {
+    return '%s';
+  }
+}
+
+module.exports = {
+  meta: {
+    schema: [],
+  },
+  create(context) {
+    function ErrorCallExpression(node) {
+      const errorMessageNode = node.arguments[0];
+      if (errorMessageNode === undefined) {
+        return;
+      }
+      const errorMessage = nodeToErrorTemplate(errorMessageNode);
+      if (errorMessage === 'react-stack-top-frame') {
+        // This is a special case for generating stack traces.
+        return;
+      }
+      if (errorMessages.has(errorMessage)) {
+        return;
+      }
+      context.report({
+        node,
+        message:
+          'Error message does not have a corresponding production error code. Add ' +
+          'the following message to codes.json so it can be stripped ' +
+          'from the production builds:\n\n' +
+          errorMessage,
+      });
+    }
+
+    return {
+      NewExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'Error') {
+          ErrorCallExpression(node);
+        }
+      },
+      CallExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'Error') {
+          ErrorCallExpression(node);
+        }
+      },
+    };
+  },
+};
diff --git a/scripts/eslint-rules/safe-string-coercion.js b/scripts/eslint-rules/safe-string-coercion.js
new file mode 100644
index 00000000000..62a59d115fb
--- /dev/null
+++ b/scripts/eslint-rules/safe-string-coercion.js
@@ -0,0 +1,374 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 isEmptyLiteral(node) {
+  return (
+    node.type === 'Literal' &&
+    typeof node.value === 'string' &&
+    node.value === ''
+  );
+}
+
+function isStringLiteral(node) {
+  return (
+    // TaggedTemplateExpressions can return non-strings
+    (node.type === 'TemplateLiteral' &&
+      node.parent.type !== 'TaggedTemplateExpression') ||
+    (node.type === 'Literal' && typeof node.value === 'string')
+  );
+}
+
+// Symbols and Temporal.* objects will throw when using `'' + value`, but that
+// pattern can be faster than `String(value)` because JS engines can optimize
+// `+` better in some cases. Therefore, in perf-sensitive production codepaths
+// we require using `'' + value` for string coercion. The only exception is prod
+// error handling code, because it's bad to crash while assembling an error
+// message or call stack! Also, error-handling code isn't usually perf-critical.
+//
+// Non-production codepaths (tests, devtools extension, build tools, etc.)
+// should use `String(value)` because it will never crash and the (small) perf
+// difference doesn't matter enough for non-prod use cases.
+//
+// This rule assists enforcing these guidelines:
+// * `'' + value` is flagged with a message to remind developers to add a DEV
+//   check from shared/CheckStringCoercion.js to make sure that the user gets a
+//   clear error message in DEV is the coercion will throw. These checks are not
+//   needed if throwing is not possible, e.g. if the value is already known to
+//   be a string or number.
+// * `String(value)` is flagged only if the `isProductionUserAppCode` option
+//   is set. Set this option for prod code files, and don't set it for non-prod
+//   files.
+
+const ignoreKeys = [
+  'range',
+  'raw',
+  'parent',
+  'loc',
+  'start',
+  'end',
+  '_babelType',
+  'leadingComments',
+  'trailingComments',
+];
+function astReplacer(key, value) {
+  return ignoreKeys.includes(key) ? undefined : value;
+}
+
+/**
+ * Simplistic comparison between AST node. Only the following patterns are
+ * supported because that's almost all (all?) usage in React:
+ * - Identifiers, e.g. `foo`
+ * - Member access, e.g. `foo.bar`
+ * - Array access with numeric literal, e.g. `foo[0]`
+ */
+function isEquivalentCode(node1, node2) {
+  return (
+    JSON.stringify(node1, astReplacer) === JSON.stringify(node2, astReplacer)
+  );
+}
+
+function isDescendant(node, maybeParentNode) {
+  let parent = node.parent;
+  while (parent) {
+    if (!parent) {
+      return false;
+    }
+    if (parent === maybeParentNode) {
+      return true;
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+
+function isSafeTypeofExpression(originalValueNode, node) {
+  if (node.type === 'BinaryExpression') {
+    // Example: typeof foo === 'string'
+    if (node.operator !== '===') {
+      return false;
+    }
+    const {left, right} = node;
+
+    // left must be `typeof original`
+    if (left.type !== 'UnaryExpression' || left.operator !== 'typeof') {
+      return false;
+    }
+    if (!isEquivalentCode(left.argument, originalValueNode)) {
+      return false;
+    }
+    // right must be a literal value of a safe type
+    const safeTypes = ['string', 'number', 'boolean', 'undefined', 'bigint'];
+    if (right.type !== 'Literal' || !safeTypes.includes(right.value)) {
+      return false;
+    }
+    return true;
+  } else if (node.type === 'LogicalExpression') {
+    // Examples:
+    // * typeof foo === 'string' && typeof foo === 'number
+    // * typeof foo === 'string' && someOtherTest
+    if (node.operator === '&&') {
+      return (
+        isSafeTypeofExpression(originalValueNode, node.left) ||
+        isSafeTypeofExpression(originalValueNode, node.right)
+      );
+    } else if (node.operator === '||') {
+      return (
+        isSafeTypeofExpression(originalValueNode, node.left) &&
+        isSafeTypeofExpression(originalValueNode, node.right)
+      );
+    }
+  }
+  return false;
+}
+
+/**
+  Returns true if the code is inside an `if` block that validates the value
+  excludes symbols and objects. Examples:
+  * if (typeof value === 'string') { }
+  * if (typeof value === 'string' || typeof value === 'number') { }
+  * if (typeof value === 'string' || someOtherTest) { }
+
+  @param - originalValueNode Top-level expression to test. Kept unchanged during
+  recursion.
+  @param - node Expression to test at current recursion level. Will be undefined
+  on non-recursive call.
+*/
+function isInSafeTypeofBlock(originalValueNode, node) {
+  if (!node) {
+    node = originalValueNode;
+  }
+  let parent = node.parent;
+  while (parent) {
+    if (!parent) {
+      return false;
+    }
+    // Normally, if the parent block is inside a type-safe `if` statement,
+    // then all child code is also type-safe. But there's a quirky case we
+    // need to defend against:
+    //   if (typeof obj === 'string') { } else if (typeof obj === 'object') {'' + obj}
+    //   if (typeof obj === 'string') { } else {'' + obj}
+    // In that code above, the `if` block is safe, but the `else` block is
+    // unsafe and should report. But the AST parent of the `else` clause is the
+    // `if` statement. This is the one case where the parent doesn't confer
+    // safety onto the child. The code below identifies that case and keeps
+    // moving up the tree until we get out of the `else`'s parent `if` block.
+    // This ensures that we don't use any of these "parents" (really siblings)
+    // to confer safety onto the current node.
+    if (
+      parent.type === 'IfStatement' &&
+      !isDescendant(originalValueNode, parent.alternate)
+    ) {
+      const test = parent.test;
+      if (isSafeTypeofExpression(originalValueNode, test)) {
+        return true;
+      }
+    }
+    parent = parent.parent;
+  }
+}
+
+const missingDevCheckMessage =
+  'Missing DEV check before this string coercion.' +
+  ' Check should be in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+
+const prevStatementNotDevCheckMessage =
+  'The statement before this coercion must be a DEV check in this format:\n' +
+  '  if (__DEV__) {\n' +
+  '    checkXxxxxStringCoercion(value);\n' +
+  '  }';
+
+/**
+ * Does this node have an "is coercion safe?" DEV check
+ * in the same block?
+ */
+function hasCoercionCheck(node) {
+  // find the containing statement
+  let topOfExpression = node;
+  while (!topOfExpression.parent.body) {
+    topOfExpression = topOfExpression.parent;
+    if (!topOfExpression) {
+      return 'Cannot find top of expression.';
+    }
+  }
+  const containingBlock = topOfExpression.parent.body;
+  const index = containingBlock.indexOf(topOfExpression);
+  if (index <= 0) {
+    return missingDevCheckMessage;
+  }
+  const prev = containingBlock[index - 1];
+
+  // The previous statement is expected to be like this:
+  //   if (__DEV__) {
+  //     checkFormFieldValueStringCoercion(foo);
+  //   }
+  // where `foo` must be equivalent to `node` (which is the
+  // mixed value being coerced to a string).
+  if (
+    prev.type !== 'IfStatement' ||
+    prev.test.type !== 'Identifier' ||
+    prev.test.name !== '__DEV__'
+  ) {
+    return prevStatementNotDevCheckMessage;
+  }
+  let maybeCheckNode = prev.consequent;
+  if (maybeCheckNode.type === 'BlockStatement') {
+    const body = maybeCheckNode.body;
+    if (body.length === 0) {
+      return prevStatementNotDevCheckMessage;
+    }
+    if (body.length !== 1) {
+      return (
+        'Too many statements in DEV block before this coercion.' +
+        ' Expected only one (the check function call). ' +
+        prevStatementNotDevCheckMessage
+      );
+    }
+    maybeCheckNode = body[0];
+  }
+
+  if (maybeCheckNode.type !== 'ExpressionStatement') {
+    return (
+      'The DEV block before this coercion must only contain an expression. ' +
+      prevStatementNotDevCheckMessage
+    );
+  }
+
+  const call = maybeCheckNode.expression;
+  if (
+    call.type !== 'CallExpression' ||
+    call.callee.type !== 'Identifier' ||
+    !/^check(\w+?)StringCoercion$/.test(call.callee.name) ||
+    !call.arguments.length
+  ) {
+    // `maybeCheckNode` should be a call of a function named checkXXXStringCoercion
+    return (
+      'Missing or invalid check function call before this coercion.' +
+      ' Expected: call of a function like checkXXXStringCoercion. ' +
+      prevStatementNotDevCheckMessage
+    );
+  }
+
+  const same = isEquivalentCode(call.arguments[0], node);
+  if (!same) {
+    return (
+      'Value passed to the check function before this coercion' +
+      ' must match the value being coerced.'
+    );
+  }
+}
+
+function isOnlyAddingStrings(node) {
+  if (node.operator !== '+') {
+    return;
+  }
+  if (isStringLiteral(node.left) && isStringLiteral(node.right)) {
+    // It's always safe to add string literals
+    return true;
+  }
+  if (node.left.type === 'BinaryExpression' && isStringLiteral(node.right)) {
+    return isOnlyAddingStrings(node.left);
+  }
+}
+
+function checkBinaryExpression(context, node) {
+  if (isOnlyAddingStrings(node)) {
+    return;
+  }
+
+  if (
+    node.operator === '+' &&
+    (isEmptyLiteral(node.left) || isEmptyLiteral(node.right))
+  ) {
+    let valueToTest = isEmptyLiteral(node.left) ? node.right : node.left;
+    if (
+      (valueToTest.type === 'TypeCastExpression' ||
+        valueToTest.type === 'AsExpression') &&
+      valueToTest.expression
+    ) {
+      valueToTest = valueToTest.expression;
+    }
+
+    if (
+      valueToTest.type === 'Identifier' &&
+      ['i', 'idx', 'lineNumber'].includes(valueToTest.name)
+    ) {
+      // Common non-object variable names are assumed to be safe
+      return;
+    }
+    if (
+      valueToTest.type === 'UnaryExpression' ||
+      valueToTest.type === 'UpdateExpression'
+    ) {
+      // Any unary expression will return a non-object, non-symbol type.
+      return;
+    }
+    if (isInSafeTypeofBlock(valueToTest)) {
+      // The value is inside an if (typeof...) block that ensures it's safe
+      return;
+    }
+    const coercionCheckMessage = hasCoercionCheck(valueToTest);
+    if (!coercionCheckMessage) {
+      // The previous statement is a correct check function call, so no report.
+      return;
+    }
+
+    context.report({
+      node,
+      message:
+        coercionCheckMessage +
+        '\n' +
+        "Using `'' + value` or `value + ''` is fast to coerce strings, but may throw." +
+        ' For prod code, add a DEV check from shared/CheckStringCoercion immediately' +
+        ' before this coercion.' +
+        ' For non-prod code and prod error handling, use `String(value)` instead.',
+    });
+  }
+}
+
+function coerceWithStringConstructor(context, node) {
+  const isProductionUserAppCode =
+    context.options[0] && context.options[0].isProductionUserAppCode;
+  if (isProductionUserAppCode && node.callee.name === 'String') {
+    context.report(
+      node,
+      "For perf-sensitive coercion, avoid `String(value)`. Instead, use `'' + value`." +
+        ' Precede it with a DEV check from shared/CheckStringCoercion' +
+        ' unless Symbol and Temporal.* values are impossible.' +
+        ' For non-prod code and prod error handling, use `String(value)` and disable this rule.'
+    );
+  }
+}
+
+module.exports = {
+  meta: {
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          isProductionUserAppCode: {
+            type: 'boolean',
+            default: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    return {
+      BinaryExpression: node => checkBinaryExpression(context, node),
+      CallExpression: node => coerceWithStringConstructor(context, node),
+    };
+  },
+};
diff --git a/scripts/eslint-rules/warning-args.js b/scripts/eslint-rules/warning-args.js
new file mode 100644
index 00000000000..47df4e519a9
--- /dev/null
+++ b/scripts/eslint-rules/warning-args.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = {
+  meta: {
+    schema: [],
+  },
+  create(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)) &&
+          format !== '%s\n\n%s\n'
+        ) {
+          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(/%[so]/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,
+            }
+          );
+        }
+      },
+    };
+  },
+};
diff --git a/scripts/eslint/index.js b/scripts/eslint/index.js
new file mode 100644
index 00000000000..dd65429e071
--- /dev/null
+++ b/scripts/eslint/index.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 minimatch = require('minimatch');
+const {ESLint} = require('eslint');
+const listChangedFiles = require('../shared/listChangedFiles');
+
+const allPaths = ['**/*.js'];
+
+let changedFiles = null;
+
+async function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
+  const eslint = new ESLint(options);
+  const formatter = await eslint.loadFormatter();
+
+  if (onlyChanged && changedFiles === null) {
+    // Calculate lazily.
+    changedFiles = [...listChangedFiles()];
+  }
+  const finalFilePatterns = onlyChanged
+    ? intersect(changedFiles, filePatterns)
+    : filePatterns;
+  const results = await eslint.lintFiles(finalFilePatterns);
+
+  if (options != null && options.fix === true) {
+    await ESLint.outputFixes(results);
+  }
+
+  // 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 = results.filter(item => {
+    if (!onlyChanged) {
+      // Don't suppress the message on a full run.
+      // We only expect it to happen for "only changed" runs.
+      return true;
+    }
+    const ignoreMessage =
+      'File ignored because of a matching ignore pattern. Use "--no-ignore" to override.';
+    return !(item.messages[0] && item.messages[0].message === ignoreMessage);
+  });
+
+  const errorCount = results.reduce(
+    (count, result) => count + result.errorCount,
+    0
+  );
+  const warningCount = results.reduce(
+    (count, result) => count + result.warningCount,
+    0
+  );
+  const ignoredMessageCount = results.length - messages.length;
+  return {
+    output: formatter.format(messages),
+    errorCount: errorCount,
+    warningCount: warningCount - ignoredMessageCount,
+  };
+}
+
+function intersect(files, patterns) {
+  let intersection = [];
+  patterns.forEach(pattern => {
+    intersection = [
+      ...intersection,
+      ...minimatch.match(files, pattern, {matchBase: true}),
+    ];
+  });
+  return [...new Set(intersection)];
+}
+
+async function runESLint({onlyChanged, paths, ...options}) {
+  if (typeof onlyChanged !== 'boolean') {
+    throw new Error('Pass options.onlyChanged as a boolean.');
+  }
+  if (onlyChanged && paths !== undefined) {
+    throw new Error('Cannot specify paths when onlyChanged is true.');
+  }
+  if (paths === undefined || paths.length === 0) {
+    paths = allPaths;
+  }
+  const {errorCount, warningCount, output} = await runESLintOnFilesWithOptions(
+    paths,
+    onlyChanged,
+    options
+  );
+  console.log(output);
+  return errorCount === 0 && warningCount === 0;
+}
+
+module.exports = runESLint;
diff --git a/scripts/flags/flags.js b/scripts/flags/flags.js
new file mode 100644
index 00000000000..a02b4d84b34
--- /dev/null
+++ b/scripts/flags/flags.js
@@ -0,0 +1,591 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 babel = require('@babel/register');
+const {transformSync} = require('@babel/core');
+const Module = require('module');
+const path = require('path');
+const fs = require('fs');
+babel({
+  plugins: ['@babel/plugin-transform-modules-commonjs'],
+});
+
+const yargs = require('yargs');
+const argv = yargs
+  .parserConfiguration({
+    // Important: This option tells yargs to move all other options not
+    // specified here into the `_` key. We use this to send all of the
+    // Jest options that we don't use through to Jest (like --watch).
+    'unknown-options-as-args': true,
+  })
+  .wrap(yargs.terminalWidth())
+  .options({
+    csv: {
+      alias: 'c',
+      describe: 'output cvs.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    diff: {
+      alias: 'd',
+      describe: 'output diff of two or more flags.',
+      requiresArg: false,
+      type: 'array',
+      choices: [
+        'www',
+        'www-modern',
+        'rn',
+        'rn-fb',
+        'rn-next',
+        'canary',
+        'next',
+        'experimental',
+        null,
+      ],
+      default: null,
+    },
+    sort: {
+      alias: 's',
+      describe: 'sort diff by one or more flags.',
+      requiresArg: false,
+      type: 'string',
+      default: 'flag',
+      choices: [
+        'flag',
+        'www',
+        'www-modern',
+        'rn',
+        'rn-fb',
+        'rn-next',
+        'canary',
+        'next',
+        'experimental',
+      ],
+    },
+    cleanup: {
+      describe: 'output flags by cleanup category.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+  }).argv;
+
+// Load ReactFeatureFlags with __NEXT_MAJOR__ replaced with 'next'.
+// We need to do string replace, since the __NEXT_MAJOR__ is assigned to __EXPERIMENTAL__.
+function getReactFeatureFlagsMajor() {
+  const virtualName = 'ReactFeatureFlagsMajor.js';
+  const file = fs.readFileSync(
+    path.join(__dirname, '../../packages/shared/ReactFeatureFlags.js'),
+    'utf8'
+  );
+  const fileContent = transformSync(
+    file.replace(
+      'const __NEXT_MAJOR__ = __EXPERIMENTAL__;',
+      'const __NEXT_MAJOR__ = "next";'
+    ),
+    {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    }
+  ).code;
+
+  const parent = module.parent;
+  const m = new Module(virtualName, parent);
+  m.filename = virtualName;
+
+  m._compile(fileContent, virtualName);
+
+  return m.exports;
+}
+
+// Load RN ReactFeatureFlags with __NEXT_RN_MAJOR__ replaced with 'next'.
+// We need to do string replace, since the __NEXT_RN_MAJOR__ is assigned to false.
+function getReactNativeFeatureFlagsMajor() {
+  const virtualName = 'ReactNativeFeatureFlagsMajor.js';
+  const file = fs.readFileSync(
+    path.join(
+      __dirname,
+      '../../packages/shared/forks/ReactFeatureFlags.native-oss.js'
+    ),
+    'utf8'
+  );
+  const fileContent = transformSync(
+    file
+      .replace(
+        'const __NEXT_RN_MAJOR__ = true;',
+        'const __NEXT_RN_MAJOR__ = "next";'
+      )
+      .replace(
+        'const __TODO_NEXT_RN_MAJOR__ = false;',
+        'const __TODO_NEXT_RN_MAJOR__ = "next-todo";'
+      ),
+    {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    }
+  ).code;
+
+  const parent = module.parent;
+  const m = new Module(virtualName, parent);
+  m.filename = virtualName;
+
+  m._compile(fileContent, virtualName);
+
+  return m.exports;
+}
+
+// The RN and www Feature flag files import files that don't exist.
+// Mock the imports with the dynamic flag values.
+function mockDynamicallyFeatureFlags() {
+  // Mock the ReactNativeInternalFeatureFlags and ReactFeatureFlags modules
+  const DynamicFeatureFlagsWWW = require('../../packages/shared/forks/ReactFeatureFlags.www-dynamic.js');
+  const DynamicFeatureFlagsNative = require('../../packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js');
+
+  const originalLoad = Module._load;
+
+  Module._load = function (request, parent) {
+    if (request === 'ReactNativeInternalFeatureFlags') {
+      return DynamicFeatureFlagsNative;
+    } else if (request === 'ReactFeatureFlags') {
+      return DynamicFeatureFlagsWWW;
+    }
+
+    return originalLoad.apply(this, arguments);
+  };
+}
+// Set the globals to string values to output them to the table.
+global.__VARIANT__ = 'gk';
+global.__PROFILE__ = 'profile';
+global.__DEV__ = 'dev';
+global.__EXPERIMENTAL__ = 'experimental';
+
+// Load all the feature flag files.
+mockDynamicallyFeatureFlags();
+const ReactFeatureFlags = require('../../packages/shared/ReactFeatureFlags.js');
+const ReactFeatureFlagsWWW = require('../../packages/shared/forks/ReactFeatureFlags.www.js');
+const ReactFeatureFlagsNativeFB = require('../../packages/shared/forks/ReactFeatureFlags.native-fb.js');
+const ReactFeatureFlagsMajor = getReactFeatureFlagsMajor();
+const ReactNativeFeatureFlagsMajor = getReactNativeFeatureFlagsMajor();
+
+const allFlagsUniqueFlags = Array.from(
+  new Set([
+    ...Object.keys(ReactFeatureFlags),
+    ...Object.keys(ReactFeatureFlagsWWW),
+    ...Object.keys(ReactFeatureFlagsNativeFB),
+  ])
+).sort();
+
+// These functions are the rules for what each value means in each channel.
+function getNextMajorFlagValue(flag) {
+  const value = ReactFeatureFlagsMajor[flag];
+  if (value === true || value === 'next') {
+    return '✅';
+  } else if (value === false || value === null || value === 'experimental') {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected OSS Stable value ${value} for flag ${flag}`);
+  }
+}
+
+function getOSSCanaryFlagValue(flag) {
+  const value = ReactFeatureFlags[flag];
+  if (value === true) {
+    return '✅';
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next'
+  ) {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected OSS Canary value ${value} for flag ${flag}`);
+  }
+}
+
+function getOSSExperimentalFlagValue(flag) {
+  const value = ReactFeatureFlags[flag];
+  if (value === true || value === 'experimental') {
+    return '✅';
+  } else if (value === false || value === null || value === 'next') {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(
+      `Unexpected OSS Experimental value ${value} for flag ${flag}`
+    );
+  }
+}
+
+function getWWWModernFlagValue(flag) {
+  const value = ReactFeatureFlagsWWW[flag];
+  if (value === true || value === 'experimental') {
+    return '✅';
+  } else if (value === false || value === null || value === 'next') {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (value === 'gk') {
+    return '🧪';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected WWW Modern value ${value} for flag ${flag}`);
+  }
+}
+
+function getWWWClassicFlagValue(flag) {
+  const value = ReactFeatureFlagsWWW[flag];
+  if (value === true) {
+    return '✅';
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next'
+  ) {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (value === 'gk') {
+    return '🧪';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected WWW Classic value ${value} for flag ${flag}`);
+  }
+}
+
+function getRNNextMajorFlagValue(flag) {
+  const value = ReactNativeFeatureFlagsMajor[flag];
+  if (value === true || value === 'next') {
+    return '✅';
+  } else if (value === 'next-todo') {
+    return '📋';
+  } else if (value === false || value === null || value === 'experimental') {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (value === 'gk') {
+    return '🧪';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected RN OSS value ${value} for flag ${flag}`);
+  }
+}
+
+function getRNOSSFlagValue(flag) {
+  const value = ReactNativeFeatureFlagsMajor[flag];
+  if (value === true) {
+    return '✅';
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next' ||
+    value === 'next-todo'
+  ) {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (value === 'gk') {
+    return '🧪';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected RN OSS value ${value} for flag ${flag}`);
+  }
+}
+
+function getRNFBFlagValue(flag) {
+  const value = ReactFeatureFlagsNativeFB[flag];
+  if (value === true) {
+    return '✅';
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next'
+  ) {
+    return '❌';
+  } else if (value === 'profile') {
+    return '📊';
+  } else if (value === 'dev') {
+    return '💻';
+  } else if (value === 'gk') {
+    return '🧪';
+  } else if (typeof value === 'number') {
+    return value;
+  } else {
+    throw new Error(`Unexpected RN FB value ${value} for flag ${flag}`);
+  }
+}
+
+function argToHeader(arg) {
+  switch (arg) {
+    case 'www':
+      return 'WWW Classic';
+    case 'www-modern':
+      return 'WWW Modern';
+    case 'rn':
+      return 'RN OSS';
+    case 'rn-fb':
+      return 'RN FB';
+    case 'rn-next':
+      return 'RN Next Major';
+    case 'canary':
+      return 'OSS Canary';
+    case 'next':
+      return 'OSS Next Major';
+    case 'experimental':
+      return 'OSS Experimental';
+    default:
+      return arg;
+  }
+}
+
+const FLAG_CONFIG = {
+  'OSS Next Major': getNextMajorFlagValue,
+  'OSS Canary': getOSSCanaryFlagValue,
+  'OSS Experimental': getOSSExperimentalFlagValue,
+  'WWW Classic': getWWWClassicFlagValue,
+  'WWW Modern': getWWWModernFlagValue,
+  'RN FB': getRNFBFlagValue,
+  'RN OSS': getRNOSSFlagValue,
+  'RN Next Major': getRNNextMajorFlagValue,
+};
+
+const FLAG_COLUMNS = Object.keys(FLAG_CONFIG);
+
+const INTERNAL_VARIANTS = ['WWW Classic', 'WWW Modern', 'RN FB'];
+const OSS_VARIANTS = [
+  'OSS Next Major',
+  'OSS Canary',
+  'OSS Experimental',
+  'RN OSS',
+  'RN Next Major',
+];
+
+// Build the table with the value for each flag.
+function buildTable(filterFn) {
+  const isDiff = argv.diff != null && argv.diff.length > 1;
+  const table = {};
+  const filteredFlags = filterFn
+    ? allFlagsUniqueFlags.filter(filterFn)
+    : allFlagsUniqueFlags;
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const flag of filteredFlags) {
+    const values = FLAG_COLUMNS.reduce((acc, key) => {
+      acc[key] = FLAG_CONFIG[key](flag);
+      return acc;
+    }, {});
+
+    if (!isDiff) {
+      table[flag] = values;
+      continue;
+    }
+
+    const subset = argv.diff.map(argToHeader).reduce((acc, key) => {
+      if (key in values) {
+        acc[key] = values[key];
+      }
+      return acc;
+    }, {});
+
+    if (new Set(Object.values(subset)).size !== 1) {
+      table[flag] = subset;
+    }
+  }
+
+  // Sort the table
+  let sorted = table;
+  if (isDiff || argv.sort) {
+    const sortChannel = argToHeader(isDiff ? argv.diff[0] : argv.sort);
+    const sortBy =
+      sortChannel === 'flag'
+        ? ([flagA], [flagB]) => {
+            return flagA.localeCompare(flagB);
+          }
+        : ([, rowA], [, rowB]) => {
+            return rowB[sortChannel]
+              .toString()
+              .localeCompare(rowA[sortChannel]);
+          };
+    sorted = Object.fromEntries(Object.entries(table).sort(sortBy));
+  }
+
+  return sorted;
+}
+
+function formatTable(tableData) {
+  // left align the flag names.
+  const maxLength = Math.max(
+    ...Object.keys(tableData).map(item => item.length)
+  );
+  const padded = {};
+  Object.keys(tableData).forEach(key => {
+    const newKey = key.padEnd(maxLength, ' ');
+    padded[newKey] = tableData[key];
+  });
+
+  return padded;
+}
+
+if (argv.csv) {
+  const table = buildTable();
+  const csvRows = [
+    `Flag name, ${FLAG_COLUMNS.join(', ')}`,
+    ...Object.keys(table).map(flag => {
+      const row = table[flag];
+      return `${flag}, ${FLAG_COLUMNS.map(col => row[col]).join(', ')}`;
+    }),
+  ];
+  fs.writeFile('./flags.csv', csvRows.join('\n'), function (err) {
+    if (err) {
+      return console.log(err);
+    }
+    console.log('The file was saved to ./flags.csv');
+  });
+}
+
+if (argv.cleanup) {
+  const allPassingFlags = [];
+  const allFailingFlags = [];
+  const needsShippedExperimentFlags = [];
+  const earlyExperimentationFlags = [];
+  const internalOnlyFlags = [];
+
+  const diffedFlagColumns =
+    argv.diff[0] != null ? argv.diff.map(argToHeader) : FLAG_COLUMNS;
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const flag of allFlagsUniqueFlags) {
+    const values = diffedFlagColumns.reduce((acc, key) => {
+      acc[key] = FLAG_CONFIG[key](flag);
+      return acc;
+    }, {});
+
+    const uniqueValues = new Set(Object.values(values));
+
+    if (
+      uniqueValues.size === 1 &&
+      (uniqueValues.has('✅') ||
+        typeof uniqueValues.values().next().value === 'number')
+    ) {
+      allPassingFlags.push(flag);
+    }
+
+    if (uniqueValues.size === 1 && uniqueValues.has('❌')) {
+      allFailingFlags.push(flag);
+    }
+
+    const internalVariantValues = INTERNAL_VARIANTS.filter(value =>
+      diffedFlagColumns.includes(value)
+    ).map(v => values[v]);
+    const ossVariantValues = OSS_VARIANTS.filter(value =>
+      diffedFlagColumns.includes(value)
+    ).map(v => values[v]);
+
+    if (
+      internalVariantValues.some(v => v === '✅') &&
+      ossVariantValues.every(v => v === '❌')
+    ) {
+      internalOnlyFlags.push(flag);
+    }
+
+    if (
+      internalVariantValues.some(v => v === '🧪') &&
+      (ossVariantValues.every(v => v === '❌') ||
+        (ossVariantValues.some(v => v === '❌') &&
+          values['OSS Experimental'] === '✅'))
+    ) {
+      earlyExperimentationFlags.push(flag);
+    }
+
+    if (
+      internalVariantValues.some(v => v === '🧪' || v === '❌') &&
+      ossVariantValues.every(v => v === '✅')
+    ) {
+      needsShippedExperimentFlags.push(flag);
+    }
+  }
+
+  if (allPassingFlags.length > 0) {
+    console.log('ALL VARIANTS PASS (✅)');
+    console.table(
+      formatTable(buildTable(flag => allPassingFlags.includes(flag)))
+    );
+  }
+
+  if (allFailingFlags.length > 0) {
+    console.log('ALL VARIANTS FAIL (❌)');
+    console.table(
+      formatTable(buildTable(flag => allFailingFlags.includes(flag)))
+    );
+  }
+
+  if (internalOnlyFlags.length > 0) {
+    console.log('INTERNAL ONLY (✅)');
+    console.table(
+      formatTable(buildTable(flag => internalOnlyFlags.includes(flag)))
+    );
+  }
+
+  if (earlyExperimentationFlags.length > 0) {
+    console.log('WAITING ON RESULTS (🧪)');
+    console.table(
+      formatTable(buildTable(flag => earlyExperimentationFlags.includes(flag)))
+    );
+  }
+
+  if (needsShippedExperimentFlags.length > 0) {
+    console.log('WAITING ON ROLLOUT (🧪)');
+    console.table(
+      formatTable(
+        buildTable(flag => needsShippedExperimentFlags.includes(flag))
+      )
+    );
+  }
+} else {
+  console.table(formatTable(buildTable()));
+}
+
+console.log(`
+Legend:
+  ✅ On
+  ❌ Off
+  💻 DEV
+  📋 TODO
+  📊 Profiling
+  🧪 Experiment
+`);
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
new file mode 100644
index 00000000000..93b557d92d9
--- /dev/null
+++ b/scripts/flow/config/flowconfig
@@ -0,0 +1,44 @@
+[ignore]
+.*/scripts/bench/.*
+.*/build/.*
+.*/fixtures/.*
+# Any hidden directory
+.*/\..*
+
+# These shims are copied into external projects:
+.*/rollup/shims/facebook-www/.*
+.*/rollup/shims/react-native/.*
+
+.*/node_modules/fbjs/lib/keyMirrorRecursive.js.flow
+.*/node_modules/resolve/test/.*
+.*/__mocks__/.*
+.*/__tests__/.*
+
+
+# TODO: noop should get its own inlinedHostConfig entry
+.*/packages/react-noop-renderer/.*
+
+%REACT_RENDERER_FLOW_IGNORES%
+
+[libs]
+./node_modules/fbjs/flow/lib/dev.js
+./scripts/flow/environment.js
+./scripts/flow/react-devtools.js
+./scripts/flow/react-native-host-hooks.js
+./scripts/flow/xplat.js
+
+[lints]
+untyped-type-import=error
+internal-type=off
+deprecated-type=off
+unsafe-object-assign=off
+
+[options]
+munge_underscores=false
+react.custom_jsx_typing=true
+
+# Substituted by createFlowConfig.js:
+%REACT_RENDERER_FLOW_OPTIONS%
+
+[version]
+%FLOW_VERSION%
diff --git a/scripts/flow/createFlowConfigs.js b/scripts/flow/createFlowConfigs.js
new file mode 100644
index 00000000000..7ff68cce5b0
--- /dev/null
+++ b/scripts/flow/createFlowConfigs.js
@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 chalk = require('chalk');
+const fs = require('fs');
+const path = require('path');
+const mkdirp = require('mkdirp');
+const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
+const flowVersion = require('../../package.json').devDependencies['flow-bin'];
+
+const configTemplate = fs
+  .readFileSync(__dirname + '/config/flowconfig')
+  .toString();
+
+// stores all forks discovered during config generation
+const allForks = new Set();
+// maps forked file to the base path containing it and it's forks (it's parent)
+const forkedFiles = new Map();
+
+function findForks(file) {
+  const basePath = path.join(file, '..');
+  const forksPath = path.join(basePath, 'forks');
+  const forks = fs.readdirSync(path.join('packages', forksPath));
+  forks.forEach(f => allForks.add('forks/' + f));
+  forkedFiles.set(file, basePath);
+  return basePath;
+}
+
+function addFork(forks, renderer, file) {
+  let basePath = forkedFiles.get(file);
+  if (!basePath) {
+    basePath = findForks(file);
+  }
+
+  const baseFilename = file.slice(basePath.length + 1);
+
+  const parts = renderer.split('-');
+  while (parts.length) {
+    const candidate = `forks/${baseFilename}.${parts.join('-')}.js`;
+    if (allForks.has(candidate)) {
+      forks.set(candidate, `${baseFilename}$$`);
+      return;
+    }
+    parts.pop();
+  }
+  throw new Error(`Cannot find fork for ${file} for renderer ${renderer}`);
+}
+
+function writeConfig(
+  renderer,
+  rendererInfo,
+  isServerSupported,
+  isFlightSupported,
+) {
+  const folder = __dirname + '/' + renderer;
+  mkdirp.sync(folder);
+
+  isFlightSupported =
+    isFlightSupported === true ||
+    (isServerSupported && isFlightSupported !== false);
+
+  const serverRenderer = isServerSupported ? renderer : 'custom';
+  const flightRenderer = isFlightSupported ? renderer : 'custom';
+
+  const ignoredPaths = [];
+
+  inlinedHostConfigs.forEach(otherRenderer => {
+    if (otherRenderer === rendererInfo) {
+      return;
+    }
+    otherRenderer.paths.forEach(otherPath => {
+      if (rendererInfo.paths.indexOf(otherPath) !== -1) {
+        return;
+      }
+      ignoredPaths.push(`.*/packages/${otherPath}`);
+    });
+  });
+
+  const forks = new Map();
+  addFork(forks, renderer, 'react-reconciler/src/ReactFiberConfig');
+  addFork(forks, serverRenderer, 'react-server/src/ReactServerStreamConfig');
+  addFork(forks, serverRenderer, 'react-server/src/ReactFizzConfig');
+  addFork(forks, flightRenderer, 'react-server/src/ReactFlightServerConfig');
+  addFork(forks, flightRenderer, 'react-client/src/ReactFlightClientConfig');
+  forks.set(
+    'react-devtools-shared/src/config/DevToolsFeatureFlags.default',
+    'react-devtools-feature-flags',
+  );
+
+  allForks.forEach(fork => {
+    if (!forks.has(fork)) {
+      ignoredPaths.push(`.*/packages/.*/${fork}`);
+    }
+  });
+
+  let moduleMappings = '';
+  forks.forEach((source, target) => {
+    moduleMappings += `module.name_mapper='${source.slice(
+      source.lastIndexOf('/') + 1,
+    )}' -> '${target}'\n`;
+  });
+
+  const config = configTemplate
+    .replace('%REACT_RENDERER_FLOW_OPTIONS%', moduleMappings.trim())
+    .replace('%REACT_RENDERER_FLOW_IGNORES%', ignoredPaths.join('\n'))
+    .replace('%FLOW_VERSION%', flowVersion);
+
+  const disclaimer = `
+# ---------------------------------------------------------------#
+# NOTE: this file is generated.                                  #
+# If you want to edit it, open ./scripts/flow/config/flowconfig. #
+# Then run Yarn for changes to take effect.                      #
+# ---------------------------------------------------------------#
+  `.trim();
+
+  const configFile = folder + '/.flowconfig';
+  let oldConfig;
+  try {
+    oldConfig = fs.readFileSync(configFile).toString();
+  } catch (err) {
+    oldConfig = null;
+  }
+  const newConfig = `
+${disclaimer}
+${config}
+${disclaimer}
+`.trim();
+
+  if (newConfig !== oldConfig) {
+    fs.writeFileSync(configFile, newConfig);
+    console.log(chalk.dim('Wrote a Flow config to ' + configFile));
+  }
+}
+
+// Write multiple configs in different folders
+// so that we can run those checks in parallel if we want.
+inlinedHostConfigs.forEach(rendererInfo => {
+  if (rendererInfo.isFlowTyped) {
+    writeConfig(
+      rendererInfo.shortName,
+      rendererInfo,
+      rendererInfo.isServerSupported,
+      rendererInfo.isFlightSupported,
+    );
+  }
+});
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
new file mode 100644
index 00000000000..180ee3838de
--- /dev/null
+++ b/scripts/flow/environment.js
@@ -0,0 +1,650 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 */
+
+declare const __PROFILE__: boolean;
+declare const __EXPERIMENTAL__: boolean;
+declare const __VARIANT__: boolean;
+
+declare const __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
+  inject: ?((stuff: Object) => void)
+};*/
+
+declare const reportError: (error: mixed) => void;
+
+declare module 'create-react-class' {
+  declare const exports: $FlowFixMe;
+}
+
+declare interface ConsoleTask {
+  run<T>(f: () => T): T;
+}
+
+// $FlowFixMe[libdef-override]
+declare var console: {
+  assert(condition: mixed, ...data: Array<any>): void,
+  clear(): void,
+  count(label?: string): void,
+  countReset(label?: string): void,
+  debug(...data: Array<any>): void,
+  dir(...data: Array<any>): void,
+  dirxml(...data: Array<any>): void,
+  error(...data: Array<any>): void,
+  _exception(...data: Array<any>): void,
+  group(...data: Array<any>): void,
+  groupCollapsed(...data: Array<any>): void,
+  groupEnd(): void,
+  info(...data: Array<any>): void,
+  log(...data: Array<any>): void,
+  profile(name?: string): void,
+  profileEnd(name?: string): void,
+  table(
+    tabularData:
+      | {[key: string]: any, ...}
+      | Array<{[key: string]: any, ...}>
+      | Array<Array<any>>,
+  ): void,
+  time(label?: string): void,
+  timeEnd(label: string): void,
+  timeStamp(
+    label?: string,
+    start?: string | number,
+    end?: string | number,
+    trackName?: string,
+    trackGroup?: string,
+    color?: string,
+  ): void,
+  timeLog(label?: string, ...data?: Array<any>): void,
+  trace(...data: Array<any>): void,
+  warn(...data: Array<any>): void,
+  createTask(label: string): ConsoleTask,
+  ...
+};
+
+type ScrollTimelineOptions = {
+  source: Element,
+  axis?: 'block' | 'inline' | 'x' | 'y',
+  ...
+};
+
+declare class ScrollTimeline extends AnimationTimeline {
+  constructor(options?: ScrollTimelineOptions): void;
+  axis: 'block' | 'inline' | 'x' | 'y';
+  source: Element;
+}
+
+// Flow hides the props of React$Element, this overrides it to unhide
+// them for React internals.
+// $FlowFixMe[libdef-override]
+declare opaque type React$Element<
+  +ElementType: React$ElementType,
+  +P = React$ElementProps<ElementType>,
+>: {
+  +type: ElementType,
+  +props: P,
+  +key: React$Key | null,
+  +ref: any,
+};
+
+declare type React$CustomJSXFactory = any;
+
+declare const 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;
+}
+
+// ReactFiberErrorDialog www fork
+declare module 'ReactFiberErrorDialog' {
+  declare module.exports: {showErrorDialog: (error: mixed) => boolean, ...};
+}
+
+// EventListener www fork
+declare module 'EventListener' {
+  declare module.exports: {
+    listen: (
+      target: EventTarget,
+      type: string,
+      callback: Function,
+      priority?: number,
+      options?: {passive: boolean, ...},
+    ) => mixed,
+    capture: (target: EventTarget, type: string, callback: Function) => mixed,
+    captureWithPassiveFlag: (
+      target: EventTarget,
+      type: string,
+      callback: Function,
+      passive: boolean,
+    ) => mixed,
+    bubbleWithPassiveFlag: (
+      target: EventTarget,
+      type: string,
+      callback: Function,
+      passive: boolean,
+    ) => mixed,
+    ...
+  };
+}
+
+declare function __webpack_chunk_load__(id: string): Promise<mixed>;
+declare function __webpack_get_script_filename__(id: string): string;
+declare const __webpack_require__: ((id: string) => any) & {
+  u: string => string,
+};
+
+declare function __turbopack_load_by_url__(id: string): Promise<mixed>;
+declare const __turbopack_require__: ((id: string) => any) & {
+  u: string => string,
+};
+
+declare var parcelRequire: {
+  (id: string): any,
+  load: (url: string) => Promise<mixed>,
+  extendImportMap: (importMap: {[string]: string}) => void,
+  meta: {
+    publicUrl: string,
+    devServer: string | null,
+  },
+};
+
+declare module 'pg' {
+  declare const Pool: (options: mixed) => {
+    query: (query: string, values?: Array<mixed>) => void,
+  };
+}
+
+declare module 'busboy' {
+  import type {Writable, Readable} from 'stream';
+
+  declare interface Info {
+    encoding: string;
+    mimeType: string;
+  }
+
+  declare interface FileInfo extends Info {
+    filename: string;
+  }
+
+  declare interface FieldInfo extends Info {
+    nameTruncated: boolean;
+    valueTruncated: boolean;
+  }
+
+  declare interface BusboyEvents {
+    file: (name: string, stream: Readable, info: FileInfo) => void;
+    field: (name: string, value: string, info: FieldInfo) => void;
+    partsLimit: () => void;
+    filesLimit: () => void;
+    fieldsLimit: () => void;
+    error: (error: mixed) => void;
+    close: () => void;
+  }
+  declare interface Busboy extends Writable {
+    addListener<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    addListener(
+      event: string | symbol,
+      listener: (...args: any[]) => void,
+    ): Busboy;
+
+    on<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    on(event: string | symbol, listener: (...args: any[]) => void): Busboy;
+
+    once<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    once(event: string | symbol, listener: (...args: any[]) => void): Busboy;
+
+    removeListener<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    removeListener(
+      event: string | symbol,
+      listener: (...args: any[]) => void,
+    ): Busboy;
+
+    off<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    off(event: string | symbol, listener: (...args: any[]) => void): Busboy;
+
+    prependListener<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    prependListener(
+      event: string | symbol,
+      listener: (...args: any[]) => void,
+    ): Busboy;
+
+    prependOnceListener<Event: $Keys<BusboyEvents>>(
+      event: Event,
+      listener: BusboyEvents[Event],
+    ): Busboy;
+    prependOnceListener(
+      event: string | symbol,
+      listener: (...args: any[]) => void,
+    ): Busboy;
+  }
+}
+
+declare module 'pg/lib/utils' {
+  declare module.exports: {
+    prepareValue(val: any): mixed,
+  };
+}
+
+// Node
+declare module 'async_hooks' {
+  declare class AsyncLocalStorage<T> {
+    disable(): void;
+    getStore(): T | void;
+    run<R>(store: T, callback: (...args: any[]) => R, ...args: any[]): R;
+    enterWith(store: T): void;
+  }
+  declare class AsyncResource {
+    asyncId(): number;
+  }
+  declare function executionAsyncId(): number;
+  declare function executionAsyncResource(): AsyncResource;
+  declare function triggerAsyncId(): number;
+  declare type HookCallbacks = {
+    init?: (
+      asyncId: number,
+      type: string,
+      triggerAsyncId: number,
+      resource: AsyncResource,
+    ) => void,
+    before?: (asyncId: number) => void,
+    after?: (asyncId: number) => void,
+    promiseResolve?: (asyncId: number) => void,
+    destroy?: (asyncId: number) => void,
+  };
+  declare class AsyncHook {
+    enable(): this;
+    disable(): this;
+  }
+  declare function createHook(callbacks: HookCallbacks): AsyncHook;
+}
+
+// Edge
+declare class AsyncLocalStorage<T> {
+  disable(): void;
+  getStore(): T | void;
+  run<R>(store: T, callback: (...args: any[]) => R, ...args: any[]): R;
+  enterWith(store: T): void;
+}
+
+declare const async_hooks: {
+  createHook(callbacks: any): any,
+  executionAsyncId(): number,
+};
+
+declare module 'jest-diff' {
+  declare type CompareKeys = ((a: string, b: string) => number) | void;
+  declare type DiffOptions = {
+    aAnnotation?: string,
+    aColor?: (arg: string) => string,
+    aIndicator?: string,
+    bAnnotation?: string,
+    bColor?: (arg: string) => string,
+    bIndicator?: string,
+    changeColor?: (arg: string) => string,
+    changeLineTrailingSpaceColor?: (arg: string) => string,
+    commonColor?: (arg: string) => string,
+    commonIndicator?: string,
+    commonLineTrailingSpaceColor?: (arg: string) => string,
+    contextLines?: number,
+    emptyFirstOrLastLinePlaceholder?: string,
+    expand?: boolean,
+    includeChangeCounts?: boolean,
+    omitAnnotationLines?: boolean,
+    patchColor?: (arg: string) => string,
+    compareKeys?: CompareKeys,
+  };
+  declare function diff(a: any, b: any, options?: DiffOptions): string;
+}
+
+declare const Bun: {
+  hash(
+    input: string | $TypedArray | DataView | ArrayBuffer | SharedArrayBuffer,
+  ): number,
+};
+
+// Navigation API
+
+declare const navigation: Navigation;
+
+interface NavigationResult {
+  committed: Promise<NavigationHistoryEntry>;
+  finished: Promise<NavigationHistoryEntry>;
+}
+
+declare class Navigation extends EventTarget {
+  entries(): NavigationHistoryEntry[];
+  +currentEntry: NavigationHistoryEntry | null;
+  updateCurrentEntry(options: NavigationUpdateCurrentEntryOptions): void;
+  +transition: NavigationTransition | null;
+
+  +canGoBack: boolean;
+  +canGoForward: boolean;
+
+  navigate(url: string, options?: NavigationNavigateOptions): NavigationResult;
+  reload(options?: NavigationReloadOptions): NavigationResult;
+
+  traverseTo(key: string, options?: NavigationOptions): NavigationResult;
+  back(options?: NavigationOptions): NavigationResult;
+  forward(options?: NavigationOptions): NavigationResult;
+
+  onnavigate: ((this: Navigation, ev: NavigateEvent) => any) | null;
+  onnavigatesuccess: ((this: Navigation, ev: Event) => any) | null;
+  onnavigateerror: ((this: Navigation, ev: ErrorEvent) => any) | null;
+  oncurrententrychange:
+    | ((this: Navigation, ev: NavigationCurrentEntryChangeEvent) => any)
+    | null;
+
+  // TODO: Implement addEventListener overrides. Doesn't seem like Flow supports this.
+}
+
+declare class NavigationTransition {
+  +navigationType: NavigationTypeString;
+  +from: NavigationHistoryEntry;
+  +finished: Promise<void>;
+}
+
+interface NavigationHistoryEntryEventMap {
+  dispose: Event;
+}
+
+interface NavigationHistoryEntry extends EventTarget {
+  +key: string;
+  +id: string;
+  +url: string | null;
+  +index: number;
+  +sameDocument: boolean;
+
+  getState(): mixed;
+
+  ondispose: ((this: NavigationHistoryEntry, ev: Event) => any) | null;
+
+  // TODO: Implement addEventListener overrides. Doesn't seem like Flow supports this.
+}
+
+declare var NavigationHistoryEntry: {
+  prototype: NavigationHistoryEntry,
+  new(): NavigationHistoryEntry,
+};
+
+type NavigationTypeString = 'reload' | 'push' | 'replace' | 'traverse';
+
+interface NavigationUpdateCurrentEntryOptions {
+  state: mixed;
+}
+
+interface NavigationOptions {
+  info?: mixed;
+}
+
+interface NavigationNavigateOptions extends NavigationOptions {
+  state?: mixed;
+  history?: 'auto' | 'push' | 'replace';
+}
+
+interface NavigationReloadOptions extends NavigationOptions {
+  state?: mixed;
+}
+
+declare class NavigationCurrentEntryChangeEvent extends Event {
+  constructor(type: string, eventInit?: any): void;
+
+  +navigationType: NavigationTypeString | null;
+  +from: NavigationHistoryEntry;
+}
+
+declare class NavigateEvent extends Event {
+  constructor(type: string, eventInit?: any): void;
+
+  +navigationType: NavigationTypeString;
+  +canIntercept: boolean;
+  +userInitiated: boolean;
+  +hashChange: boolean;
+  +hasUAVisualTransition: boolean;
+  +destination: NavigationDestination;
+  +signal: AbortSignal;
+  +formData: FormData | null;
+  +downloadRequest: string | null;
+  +info?: mixed;
+
+  intercept(options?: NavigationInterceptOptions): void;
+  scroll(): void;
+}
+
+interface NavigationInterceptOptions {
+  handler?: () => Promise<void>;
+  focusReset?: 'after-transition' | 'manual';
+  scroll?: 'after-transition' | 'manual';
+}
+
+declare class NavigationDestination {
+  +url: string;
+  +key: string | null;
+  +id: string | null;
+  +index: number;
+  +sameDocument: boolean;
+
+  getState(): mixed;
+}
+
+// Ported from definitely-typed
+declare module 'rbush' {
+  declare interface BBox {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+  }
+
+  declare export default class RBush<T> {
+    /**
+     * Constructs an `RBush`, a high-performance 2D spatial index for points and
+     * rectangles. Based on an optimized __R-tree__ data structure with
+     * __bulk-insertion__ support.
+     *
+     * @param maxEntries An optional argument to RBush defines the maximum
+     *                   number of entries in a tree node. `9` (used by default)
+     *                   is a reasonable choice for most applications. Higher
+     *                   value means faster insertion and slower search, and
+     *                   vice versa.
+     */
+    constructor(maxEntries?: number): void;
+
+    /**
+     * Inserts an item. To insert many items at once, use `load()`.
+     *
+     * @param item The item to insert.
+     */
+    insert(item: T): RBush<T>;
+
+    /**
+     * Bulk-inserts the given items into the tree.
+     *
+     * Bulk insertion is usually ~2-3 times faster than inserting items one by
+     * one. After bulk loading (bulk insertion into an empty tree), subsequent
+     * query performance is also ~20-30% better.
+     *
+     * Note that when you do bulk insertion into an existing tree, it bulk-loads
+     * the given data into a separate tree and inserts the smaller tree into the
+     * larger tree. This means that bulk insertion works very well for clustered
+     * data (where items in one update are close to each other), but makes query
+     * performance worse if the data is scattered.
+     *
+     * @param items The items to load.
+     */
+    load(items: $ReadOnlyArray<T>): RBush<T>;
+
+    /**
+     * Removes a previously inserted item, comparing by reference.
+     *
+     * To remove all items, use `clear()`.
+     *
+     * @param item The item to remove.
+     * @param equals A custom function that allows comparing by value instead.
+     *               Useful when you have only a copy of the object you need
+     *               removed (e.g. loaded from server).
+     */
+    remove(item: T, equals?: (a: T, b: T) => boolean): RBush<T>;
+
+    /**
+     * Removes all items.
+     */
+    clear(): RBush<T>;
+
+    /**
+     * Returns an array of data items (points or rectangles) that the given
+     * bounding box intersects.
+     *
+     * Note that the search method accepts a bounding box in `{minX, minY, maxX,
+     * maxY}` format regardless of the data format.
+     *
+     * @param box The bounding box in which to search.
+     */
+    search(box: BBox): T[];
+
+    /**
+     * Returns all items contained in the tree.
+     */
+    all(): T[];
+
+    /**
+     * Returns `true` if there are any items intersecting the given bounding
+     * box, otherwise `false`.
+     *
+     * @param box The bounding box in which to search.
+     */
+    collides(box: BBox): boolean;
+
+    /**
+     * Returns the bounding box for the provided item.
+     *
+     * By default, `RBush` assumes the format of data points to be an object
+     * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a
+     * custom item format by overriding `toBBox()`, `compareMinX()`, and
+     * `compareMinY()`.
+     *
+     * @example
+     * class MyRBush<T> extends RBush<T> {
+     *   toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; }
+     *   compareMinX(a, b) { return a.x - b.x; }
+     *   compareMinY(a, b) { return a.y - b.y; }
+     * }
+     * const tree = new MyRBush<[number, number]>();
+     * tree.insert([20, 50]); // accepts [x, y] points
+     *
+     * @param item The item whose bounding box should be returned.
+     */
+    toBBox(item: T): BBox;
+
+    /**
+     * Compares the minimum x coordinate of two items. Returns -1 if `a`'s
+     * x-coordinate is smaller, 1 if `b`'s x coordinate is smaller, or 0 if
+     * they're equal.
+     *
+     * By default, `RBush` assumes the format of data points to be an object
+     * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a
+     * custom item format by overriding `toBBox()`, `compareMinX()`, and
+     * `compareMinY()`.
+     *
+     * @example
+     * class MyRBush<T> extends RBush<T> {
+     *   toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; }
+     *   compareMinX(a, b) { return a.x - b.x; }
+     *   compareMinY(a, b) { return a.y - b.y; }
+     * }
+     * const tree = new MyRBush<[number, number]>();
+     * tree.insert([20, 50]); // accepts [x, y] points
+     *
+     * @param a The first item to compare.
+     * @param b The second item to compare.
+     */
+    compareMinX(a: T, b: T): number;
+
+    /**
+     * Compares the minimum y coordinate of two items. Returns -1 if `a`'s
+     * x-coordinate is smaller, 1 if `b`'s x coordinate is smaller, or 0 if
+     * they're equal.
+     *
+     * By default, `RBush` assumes the format of data points to be an object
+     * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a
+     * custom item format by overriding `toBBox()`, `compareMinX()`, and
+     * `compareMinY()`.
+     *
+     * @example
+     * class MyRBush<T> extends RBush<T> {
+     *   toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; }
+     *   compareMinX(a, b) { return a.x - b.x; }
+     *   compareMinY(a, b) { return a.y - b.y; }
+     * }
+     * const tree = new MyRBush<[number, number]>();
+     * tree.insert([20, 50]); // accepts [x, y] points
+     *
+     * @param a The first item to compare.
+     * @param b The second item to compare.
+     */
+    compareMinY(a: T, b: T): number;
+
+    /**
+     * Exports the tree's contents as a JSON object.
+     *
+     * Importing and exporting as JSON allows you to use RBush on both the
+     * server (using Node.js) and the browser combined, e.g. first indexing the
+     * data on the server and and then importing the resulting tree data on the
+     * client for searching.
+     *
+     * Note that the `maxEntries` option from the constructor must be the same
+     * in both trees for export/import to work properly.
+     */
+    toJSON(): any;
+
+    /**
+     * Imports previously exported data into the tree (i.e., data that was
+     * emitted by `toJSON()`).
+     *
+     * Importing and exporting as JSON allows you to use RBush on both the
+     * server (using Node.js) and the browser combined, e.g. first indexing the
+     * data on the server and and then importing the resulting tree data on the
+     * client for searching.
+     *
+     * Note that the `maxEntries` option from the constructor must be the same
+     * in both trees for export/import to work properly.
+     *
+     * @param data The previously exported JSON data.
+     */
+    fromJSON(data: any): RBush<T>;
+  }
+}
+
+declare class CSS {
+  static escape(str: string): string;
+}
diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js
new file mode 100644
index 00000000000..09a251bbe2f
--- /dev/null
+++ b/scripts/flow/react-devtools.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 no-unused-vars */
+
+declare const __EXTENSION__: boolean;
+declare const __TEST__: boolean;
+
+declare const __IS_FIREFOX__: boolean;
+declare const __IS_CHROME__: boolean;
+declare const __IS_EDGE__: boolean;
+declare const __IS_NATIVE__: boolean;
+declare const __IS_INTERNAL_MCP_BUILD__: boolean;
+
+declare const chrome: any;
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
new file mode 100644
index 00000000000..227c78bca24
--- /dev/null
+++ b/scripts/flow/react-native-host-hooks.js
@@ -0,0 +1,305 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// libdefs cannot actually import. These are supposed to be the types imported
+// from 'react-native-renderer/src/ReactNativeTypes'
+type __MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number,
+) => void;
+type __MeasureInWindowOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) => void;
+type __MeasureLayoutOnSuccessCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+) => void;
+type __ReactNativeBaseComponentViewConfig = any;
+type __ViewConfigGetter = any;
+type __ViewConfig = any;
+type __AttributeConfiguration = any;
+
+// libdefs cannot actually import. This is supposed to be the type imported
+// from 'react-native-renderer/src/legacy-events/TopLevelEventTypes';
+type __RNTopLevelEventType = any;
+
+// libdefs cannot actually import. This is supposed to be the type imported
+// from 'react-reconciler/src/ReactCapturedValue'
+type __CapturedError = any;
+
+type DeepDifferOptions = {+unsafelyIgnoreFunctions?: boolean};
+type RawEventEmitterEvent = $ReadOnly<{
+  eventName: string,
+  // We expect, but do not/cannot require, that nativeEvent is an object
+  // with the properties: key, elementType (string), type (string), tag (numeric),
+  // and a stateNode of the native element/Fiber the event was emitted to.
+  nativeEvent: {[string]: mixed, ...},
+}>;
+
+declare opaque type __PublicInstance;
+declare opaque type __PublicTextInstance;
+declare opaque type __PublicRootInstance;
+
+declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' {
+  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 const RCTEventEmitter: {
+    register: (eventEmitter: mixed) => void,
+    ...
+  };
+  declare export const TextInputState: {
+    blurTextInput: (object: any) => void,
+    focusTextInput: (object: any) => void,
+    ...
+  };
+  declare export const ReactFiberErrorDialog: {
+    showErrorDialog: (error: __CapturedError) => boolean,
+    ...
+  };
+  declare export const Platform: {OS: string, ...};
+  declare export const UIManager: {
+    customBubblingEventTypes: Object,
+    customDirectEventTypes: Object,
+    createView: (
+      reactTag: number,
+      viewName: string,
+      rootTag: number,
+      props: ?Object,
+    ) => void,
+    dispatchViewManagerCommand: (
+      reactTag: number,
+      command: string,
+      args: Array<any>,
+    ) => void,
+    manageChildren: (
+      containerTag: number,
+      moveFromIndices: Array<number>,
+      moveToIndices: Array<number>,
+      addChildReactTags: Array<number>,
+      addAtIndices: Array<number>,
+      removeAtIndices: Array<number>,
+    ) => void,
+    measure: (hostComponent: mixed, callback: Function) => void,
+    measureInWindow: (nativeTag: ?number, callback: Function) => void,
+    measureLayout: (
+      nativeTag: mixed,
+      nativeNode: number,
+      onFail: Function,
+      onSuccess: Function,
+    ) => void,
+    removeRootView: (containerTag: number) => void,
+    removeSubviewsFromContainerWithID: (containerId: number) => void,
+    replaceExistingNonRootView: () => void,
+    setChildren: (containerTag: number, reactTags: Array<number>) => void,
+    updateView: (reactTag: number, viewName: string, props: ?Object) => void,
+    __takeSnapshot: (
+      view?: 'window' | Element | number,
+      options?: {
+        width?: number,
+        height?: number,
+        format?: 'png' | 'jpeg',
+        quality?: number,
+        ...
+      },
+    ) => Promise<any>,
+    setJSResponder: (reactTag: number, blockNativeResponder: boolean) => void,
+    clearJSResponder: () => void,
+    findSubviewIn: (
+      reactTag: ?number,
+      point: Array<number>,
+      callback: (
+        nativeViewTag: number,
+        left: number,
+        top: number,
+        width: number,
+        height: number,
+      ) => void,
+    ) => void,
+    ...
+  };
+  declare export const legacySendAccessibilityEvent: (
+    reactTag: number,
+    eventTypeName: string,
+  ) => void;
+  declare export const BatchedBridge: {
+    registerCallableModule: (name: string, module: Object) => void,
+    ...
+  };
+  declare export const ReactNativeViewConfigRegistry: {
+    customBubblingEventTypes: Object,
+    customDirectEventTypes: Object,
+
+    register: (name: string, callback: __ViewConfigGetter) => string,
+    get: (name: string) => __ReactNativeBaseComponentViewConfig,
+    ...
+  };
+  declare export const RawEventEmitter: {
+    emit: (channel: string, event: RawEventEmitterEvent) => string,
+    ...
+  };
+  declare export type PublicInstance = __PublicInstance;
+  declare export type PublicTextInstance = __PublicTextInstance;
+  declare export type PublicRootInstance = __PublicRootInstance;
+  declare export type MeasureOnSuccessCallback = __MeasureOnSuccessCallback;
+  declare export type MeasureInWindowOnSuccessCallback =
+    __MeasureInWindowOnSuccessCallback;
+  declare export type MeasureLayoutOnSuccessCallback =
+    __MeasureLayoutOnSuccessCallback;
+  declare export interface LegacyPublicInstance {
+    blur(): void;
+    focus(): void;
+    measure(callback: __MeasureOnSuccessCallback): void;
+    measureInWindow(callback: __MeasureInWindowOnSuccessCallback): void;
+    measureLayout(
+      relativeToNativeNode: number | LegacyPublicInstance,
+      onSuccess: __MeasureLayoutOnSuccessCallback,
+      onFail?: () => void,
+    ): void;
+    setNativeProps(nativeProps: {...}): void;
+  }
+  declare export function getNodeFromPublicInstance(
+    publicInstance: PublicInstance,
+  ): Object;
+  declare export function getNativeTagFromPublicInstance(
+    publicInstance: PublicInstance,
+  ): number;
+  declare export function createPublicInstance(
+    tag: number,
+    viewConfig: __ViewConfig,
+    internalInstanceHandle: mixed,
+    publicRootInstance: PublicRootInstance | null,
+  ): PublicInstance;
+  declare export function createPublicRootInstance(
+    rootTag: number,
+  ): PublicRootInstance;
+  declare export function createPublicTextInstance(
+    internalInstanceHandle: mixed,
+  ): PublicTextInstance;
+  declare export function getInternalInstanceHandleFromPublicInstance(
+    publicInstance: PublicInstance,
+  ): ?Object;
+  declare export function createAttributePayload(
+    props: Object,
+    validAttributes: __AttributeConfiguration,
+  ): null | Object;
+  declare export function diffAttributePayloads(
+    prevProps: Object,
+    nextProps: Object,
+    validAttributes: __AttributeConfiguration,
+  ): null | Object;
+}
+
+declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore' {
+}
+
+declare module 'react-native' {
+  declare export type HostInstance = __PublicInstance;
+  declare export type PublicTextInstance = __PublicTextInstance;
+  declare export type PublicRootInstance = __PublicRootInstance;
+  declare export type MeasureOnSuccessCallback = __MeasureOnSuccessCallback;
+}
+
+// eslint-disable-next-line no-unused-vars
+declare const RN$enableMicrotasksInReact: boolean;
+
+// This is needed for a short term solution.
+// See https://github.com/facebook/react/pull/15490 for more info
+// eslint-disable-next-line no-unused-vars
+declare const nativeFabricUIManager: {
+  createNode: (
+    reactTag: number,
+    viewName: string,
+    rootTag: number,
+    props: ?Object,
+    eventTarget: Object,
+  ) => Object,
+  cloneNode: (node: Object) => Object,
+  cloneNodeWithNewChildren: (
+    node: Object,
+    children?: $ReadOnlyArray<Object>,
+  ) => Object,
+  cloneNodeWithNewProps: (node: Object, newProps: ?Object) => Object,
+  cloneNodeWithNewChildrenAndProps: (
+    node: Object,
+    newPropsOrChildren: ?Object | $ReadOnlyArray<Object>,
+    newProps?: ?Object,
+  ) => Object,
+  appendChild: (node: Object, childNode: Object) => void,
+
+  createChildSet: () => Object,
+  appendChildToSet: (childSet: Object, childNode: Object) => void,
+  completeRoot: (rootTag: number, childSet: Object) => void,
+  registerEventHandler: (
+    callback: (
+      eventTarget: null | Object,
+      type: __RNTopLevelEventType,
+      payload: Object,
+    ) => void,
+  ) => void,
+  setNativeProps: (node: Object, nativeProps: Object) => Object,
+  dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
+  sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,
+
+  measure: (node: Object, callback: __MeasureOnSuccessCallback) => void,
+  measureInWindow: (
+    node: Object,
+    callback: __MeasureInWindowOnSuccessCallback,
+  ) => void,
+  measureLayout: (
+    node: Object,
+    relativeNode: Object,
+    onFail: () => void,
+    onSuccess: __MeasureLayoutOnSuccessCallback,
+  ) => void,
+  getBoundingClientRect: (
+    node: Object,
+  ) => [
+    /* x:*/ number,
+    /* y:*/ number,
+    /* width:*/ number,
+    /* height:*/ number,
+  ],
+  findNodeAtPoint: (
+    node: Object,
+    locationX: number,
+    locationY: number,
+    callback: (Object) => void,
+  ) => void,
+  setIsJSResponder: (
+    node: Object,
+    isJsResponder: boolean,
+    blockNativeResponder: boolean,
+  ) => void,
+  unstable_DefaultEventPriority: number,
+  unstable_DiscreteEventPriority: number,
+  unstable_ContinuousEventPriority: number,
+  unstable_IdleEventPriority: number,
+  unstable_getCurrentEventPriority: () => number,
+  ...
+};
diff --git a/scripts/flow/runFlow.js b/scripts/flow/runFlow.js
new file mode 100644
index 00000000000..1c0262379b0
--- /dev/null
+++ b/scripts/flow/runFlow.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 chalk = require('chalk');
+const {spawn} = require('child_process');
+const fs = require('fs');
+
+// TODO: This generates all the renderer configs at once. Originally this was
+// to allow the possibility of running multiple Flow processes in parallel, but
+// that never happened. If we did, we'd probably do this in CI, anyway, and run
+// on multiple machines. So instead we could remove this intermediate step and
+// generate only the config for the specified renderer.
+require('./createFlowConfigs');
+
+async function runFlow(renderer, args) {
+  return new Promise(resolve => {
+    let cmd = __dirname + '/../../node_modules/.bin/flow';
+    if (process.platform === 'win32') {
+      cmd = cmd.replace(/\//g, '\\') + '.cmd';
+    }
+
+    // Copy renderer flowconfig file to the root of the project so that it
+    // works with editor integrations. This means that the Flow config used by
+    // the editor will correspond to the last renderer you checked.
+    const srcPath =
+      process.cwd() + '/scripts/flow/' + renderer + '/.flowconfig';
+    const srcStat = fs.statSync(__dirname + '/config/flowconfig');
+    const destPath = './.flowconfig';
+    if (fs.existsSync(destPath)) {
+      const oldConfig = String(fs.readFileSync(destPath));
+      const newConfig = String(fs.readFileSync(srcPath));
+      if (oldConfig !== newConfig) {
+        // Use the mtime to detect if the file was manually edited. If so,
+        // log an error.
+        const destStat = fs.statSync(destPath);
+        if (destStat.mtimeMs - srcStat.mtimeMs > 1) {
+          console.error(
+            chalk.red(
+              'Detected manual changes to .flowconfig, which is a generated ' +
+                'file. These changes have been discarded.\n\n' +
+                'To change the Flow config, edit the template in ' +
+                'scripts/flow/config/flowconfig. Then run this command again.\n',
+            ),
+          );
+        }
+        fs.unlinkSync(destPath);
+        fs.copyFileSync(srcPath, destPath);
+        // Set the mtime of the copied file to be same as the original file,
+        // so that the above check works.
+        fs.utimesSync(destPath, srcStat.atime, srcStat.mtime);
+      }
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+      fs.utimesSync(destPath, srcStat.atime, srcStat.mtime);
+    }
+
+    console.log(
+      'Running Flow on the ' + chalk.yellow(renderer) + ' renderer...',
+    );
+
+    spawn(cmd, args, {
+      // Allow colors to pass through:
+      stdio: 'inherit',
+    }).on('close', function (code) {
+      if (code !== 0) {
+        console.error(
+          'Flow failed for the ' + chalk.red(renderer) + ' renderer',
+        );
+        console.log();
+        process.exit(code);
+      } else {
+        console.log(
+          'Flow passed for the ' + chalk.green(renderer) + ' renderer',
+        );
+        resolve();
+      }
+    });
+  });
+}
+
+module.exports = runFlow;
diff --git a/scripts/flow/xplat.js b/scripts/flow/xplat.js
new file mode 100644
index 00000000000..3b8afbd894f
--- /dev/null
+++ b/scripts/flow/xplat.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 'ReactNativeInternalFeatureFlags' {
+  declare module.exports: any;
+}
diff --git a/scripts/git/pre-commit b/scripts/git/pre-commit
new file mode 100755
index 00000000000..3c405899301
--- /dev/null
+++ b/scripts/git/pre-commit
@@ -0,0 +1,10 @@
+#!/bin/sh
+#
+# To enable this hook, symlink or copy this file to .git/hooks/pre-commit.
+
+# Redirect output to stderr.
+exec 1>&2
+
+git diff --cached --name-only --diff-filter=ACMRTUB | \
+  grep '\.js$' | \
+  xargs ./node_modules/.bin/eslint --
diff --git a/scripts/jest/ReactDOMServerIntegrationEnvironment.js b/scripts/jest/ReactDOMServerIntegrationEnvironment.js
new file mode 100644
index 00000000000..5a0ab2f6653
--- /dev/null
+++ b/scripts/jest/ReactDOMServerIntegrationEnvironment.js
@@ -0,0 +1,34 @@
+'use strict';
+
+const ReactJSDOMEnvironment = require('./ReactJSDOMEnvironment');
+const {TestEnvironment: NodeEnvironment} = require('jest-environment-node');
+
+/**
+ * Test environment for testing integration of react-dom (browser) with react-dom/server (node)
+ */
+class ReactDOMServerIntegrationEnvironment extends NodeEnvironment {
+  constructor(config, context) {
+    super(config, context);
+
+    this.domEnvironment = new ReactJSDOMEnvironment(config, context);
+
+    this.global.window = this.domEnvironment.dom.window;
+    this.global.document = this.global.window.document;
+    this.global.navigator = this.global.window.navigator;
+    this.global.Node = this.global.window.Node;
+    this.global.addEventListener = this.global.window.addEventListener;
+    this.global.MutationObserver = this.global.window.MutationObserver;
+  }
+
+  async setup() {
+    await super.setup();
+    await this.domEnvironment.setup();
+  }
+
+  async teardown() {
+    await this.domEnvironment.teardown();
+    await super.teardown();
+  }
+}
+
+module.exports = ReactDOMServerIntegrationEnvironment;
diff --git a/scripts/jest/ReactJSDOMEnvironment.js b/scripts/jest/ReactJSDOMEnvironment.js
new file mode 100644
index 00000000000..eb686d6f4be
--- /dev/null
+++ b/scripts/jest/ReactJSDOMEnvironment.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const {TestEnvironment: JSDOMEnvironment} = require('jest-environment-jsdom');
+const {
+  setupDocumentReadyState,
+} = require('internal-test-utils/ReactJSDOMUtils');
+
+/**
+ * Test environment for testing integration of react-dom (browser) with react-dom/server (node)
+ */
+class ReactJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(config, context) {
+    super(config, context);
+
+    setupDocumentReadyState(this.global.document, this.global.Event);
+  }
+}
+
+module.exports = ReactJSDOMEnvironment;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
new file mode 100644
index 00000000000..e2d34cc516d
--- /dev/null
+++ b/scripts/jest/TestFlags.js
@@ -0,0 +1,130 @@
+'use strict';
+
+// These flags can be in a @gate pragma to declare that a test depends on
+// certain conditions. They're like GKs.
+//
+// Examples:
+//   // @gate enableSomeAPI
+//   test('uses an unstable API', () => {/*...*/})
+//
+//   // @gate __DEV__
+//   test('only passes in development', () => {/*...*/})
+//
+// Most flags are defined in ReactFeatureFlags. If it's defined there, you don't
+// have to do anything extra here.
+//
+// There are also flags based on the environment, like __DEV__. Feel free to
+// add new flags and aliases below.
+//
+// You can also combine flags using multiple gates:
+//
+//   // @gate enableSomeAPI
+//   // @gate __DEV__
+//   test('both conditions must pass', () => {/*...*/})
+//
+// Or using logical operators
+//   // @gate enableSomeAPI && __DEV__
+//   test('both conditions must pass', () => {/*...*/})
+//
+// Negation also works:
+//   // @gate !deprecateLegacyContext
+//   test('uses a deprecated feature', () => {/*...*/})
+
+// These flags are based on the environment and don't change for the entire
+// test run.
+const environmentFlags = {
+  __DEV__,
+  build: __DEV__ ? 'development' : 'production',
+
+  // TODO: Should "experimental" also imply "modern"? Maybe we should
+  // always compare to the channel?
+  experimental: __EXPERIMENTAL__,
+  // Similarly, should stable imply "classic"?
+  stable: !__EXPERIMENTAL__,
+
+  variant: __VARIANT__,
+
+  persistent: global.__PERSISTENT__ === true,
+
+  // Use this for tests that are known to be broken.
+  FIXME: false,
+  TODO: false,
+
+  enableUseJSStackToTrackPassiveDurations: false,
+};
+
+function getTestFlags() {
+  // These are required on demand because some of our tests mutate them. We try
+  // not to but there are exceptions.
+  const featureFlags = require('shared/ReactFeatureFlags');
+  const schedulerFeatureFlags = require('scheduler/src/SchedulerFeatureFlags');
+
+  const www = global.__WWW__ === true;
+  const xplat = global.__XPLAT__ === true;
+  const releaseChannel = www
+    ? __EXPERIMENTAL__
+      ? 'modern'
+      : 'classic'
+    : __EXPERIMENTAL__
+      ? 'experimental'
+      : 'stable';
+
+  // Return a proxy so we can throw if you attempt to access a flag that
+  // doesn't exist.
+  return new Proxy(
+    {
+      channel: releaseChannel,
+      modern: releaseChannel === 'modern',
+      classic: releaseChannel === 'classic',
+      source: !process.env.IS_BUILD,
+      www,
+      fb: www || xplat,
+
+      // These aren't flags, just a useful aliases for tests.
+      // TODO: Clean this up.
+      enableActivity: true,
+      enableSuspenseList: releaseChannel === 'experimental' || www || xplat,
+      enableLegacyHidden: www,
+      // TODO: Suspending the work loop during the render phase is currently
+      // not compatible with sibling prerendering. We will add this optimization
+      // back in a later step.
+      enableSuspendingDuringWorkLoop: false,
+
+      // This flag is used to determine whether we should run Fizz tests using
+      // the external runtime or the inline script runtime.
+      // For Meta we use variant to gate the feature. For OSS we use experimental
+      shouldUseFizzExternalRuntime: !featureFlags.enableFizzExternalRuntime
+        ? false
+        : www
+          ? __VARIANT__
+          : __EXPERIMENTAL__,
+
+      // This is used by useSyncExternalStoresShared-test.js to decide whether
+      // to test the shim or the native implementation of useSES.
+
+      enableUseSyncExternalStoreShim: !__VARIANT__,
+
+      // If there's a naming conflict between scheduler and React feature flags, the
+      // React ones take precedence.
+      // TODO: Maybe we should error on conflicts? Or we could namespace
+      // the flags
+      ...schedulerFeatureFlags,
+      ...featureFlags,
+      ...environmentFlags,
+    },
+    {
+      get(flags, flagName) {
+        const flagValue = flags[flagName];
+        if (flagValue === undefined && typeof flagName === 'string') {
+          throw Error(
+            `Feature flag "${flagName}" does not exist. See TestFlags.js ` +
+              'for more details.'
+          );
+        }
+        return flagValue;
+      },
+    }
+  );
+}
+
+exports.getTestFlags = getTestFlags;
diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js
new file mode 100644
index 00000000000..12b5fc45cd4
--- /dev/null
+++ b/scripts/jest/config.base.js
@@ -0,0 +1,42 @@
+'use strict';
+
+module.exports = {
+  globalSetup: require.resolve('./setupGlobal.js'),
+  testSequencer: require.resolve('./sizeBalancedSequencer.js'),
+  modulePathIgnorePatterns: [
+    '<rootDir>/scripts/rollup/shims/',
+    '<rootDir>/scripts/bench/',
+    '<rootDir>/packages/eslint-plugin-react-hooks/',
+  ],
+  transform: {
+    '^.+babel-plugin-react-compiler/dist/index.js$': [
+      'babel-jest',
+      {
+        configFile: require.resolve('../../babel.config-react-compiler.js'),
+      },
+    ],
+    '^.+\\.ts$': [
+      'babel-jest',
+      {configFile: require.resolve('../../babel.config-ts.js')},
+    ],
+    '.(?!ts$)': require.resolve('./preprocessor.js'),
+  },
+  prettierPath: require.resolve('prettier-2'),
+  setupFiles: [require.resolve('./setupEnvironment.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'],
+  rootDir: process.cwd(),
+  roots: ['<rootDir>/packages', '<rootDir>/scripts'],
+  collectCoverageFrom: ['packages/**/*.js'],
+  fakeTimers: {
+    enableGlobally: true,
+    legacyFakeTimers: true,
+  },
+  snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
+
+  testEnvironment: '<rootDir>/scripts/jest/ReactJSDOMEnvironment',
+
+  testRunner: 'jest-circus/runner',
+};
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
new file mode 100644
index 00000000000..3f03b50c3a8
--- /dev/null
+++ b/scripts/jest/config.build-devtools.js
@@ -0,0 +1,109 @@
+'use strict';
+
+const {readdirSync, statSync} = require('fs');
+const {join} = require('path');
+const baseConfig = require('./config.base');
+const devtoolsRegressionConfig = require('./devtools/config.build-devtools-regression');
+
+const NODE_MODULES_DIR =
+  process.env.RELEASE_CHANNEL === 'stable' ? 'oss-stable' : 'oss-experimental';
+
+// 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;
+  }
+  if (dir === 'internal-test-utils') {
+    // This is an internal package used only for testing. It's OK to read
+    // from source.
+    // TODO: Maybe let's have some convention for this?
+    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 = {};
+
+moduleNameMapper['react-devtools-feature-flags'] =
+  '<rootDir>/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default';
+
+// Map packages to bundles
+packages.forEach(name => {
+  // Root entry point
+  moduleNameMapper[`^${name}$`] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}`;
+  // Named entry points
+  moduleNameMapper[`^${name}\/([^\/]+)$`] =
+    `<rootDir>/build/${NODE_MODULES_DIR}/${name}/$1`;
+});
+
+// Allow tests to import shared code (e.g. feature flags, getStackByFiberInDevAndProd)
+moduleNameMapper['^shared/([^/]+)$'] = '<rootDir>/packages/shared/$1';
+moduleNameMapper['^react-reconciler/([^/]+)$'] =
+  '<rootDir>/packages/react-reconciler/$1';
+
+module.exports = Object.assign({}, baseConfig, {
+  // Redirect imports to the compiled bundles
+  moduleNameMapper: {
+    ...devtoolsRegressionConfig.moduleNameMapper,
+    ...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/(?!(rbush|quickselect)/)',
+    '<rootDir>/build/',
+    '/__compiled__/',
+    '/__untransformed__/',
+  ],
+  testRegex: 'packages/react-devtools(-(.+))?/.+/__tests__/[^]+.test.js$',
+  snapshotSerializers: [
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/profilingSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/timelineDataSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js'
+    ),
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    ...devtoolsRegressionConfig.setupFiles,
+    require.resolve('./setupTests.build.js'),
+    require.resolve('./devtools/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
new file mode 100644
index 00000000000..d1bbeb5a8dd
--- /dev/null
+++ b/scripts/jest/config.build.js
@@ -0,0 +1,73 @@
+'use strict';
+
+const {readdirSync, statSync} = require('fs');
+const {join} = require('path');
+const baseConfig = require('./config.base');
+
+process.env.IS_BUILD = true;
+
+const NODE_MODULES_DIR =
+  process.env.RELEASE_CHANNEL === 'stable' ? 'oss-stable' : 'oss-experimental';
+
+// Find all folders in packages/* with package.json
+const packagesRoot = join(__dirname, '..', '..', 'packages');
+const packages = readdirSync(packagesRoot).filter(dir => {
+  if (dir === 'internal-test-utils') {
+    // This is an internal package used only for testing. It's OK to read
+    // from source.
+    // TODO: Maybe let's have some convention for this?
+    return false;
+  }
+  if (dir.charAt(0) === '.') {
+    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_DIR}/${name}`;
+  // Named entry points
+  moduleNameMapper[`^${name}\/([^\/]+)$`] =
+    `<rootDir>/build/${NODE_MODULES_DIR}/${name}/$1`;
+});
+
+moduleNameMapper['use-sync-external-store/shim/with-selector'] =
+  `<rootDir>/build/${NODE_MODULES_DIR}/use-sync-external-store/shim/with-selector`;
+moduleNameMapper['use-sync-external-store/shim/index.native'] =
+  `<rootDir>/build/${NODE_MODULES_DIR}/use-sync-external-store/shim/index.native`;
+
+module.exports = Object.assign({}, baseConfig, {
+  // Redirect imports to the compiled bundles
+  moduleNameMapper,
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
+    '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
+  transformIgnorePatterns: ['/node_modules/', '<rootDir>/build/'],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupTests.build.js'),
+  ],
+});
diff --git a/scripts/jest/config.source-persistent.js b/scripts/jest/config.source-persistent.js
new file mode 100644
index 00000000000..80bec669b64
--- /dev/null
+++ b/scripts/jest/config.source-persistent.js
@@ -0,0 +1,21 @@
+'use strict';
+
+const baseConfig = require('./config.base');
+
+module.exports = Object.assign({}, baseConfig, {
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
+    'packages/react-devtools-shared',
+    'ReactIncrementalPerf',
+    'ReactIncrementalUpdatesMinimalism',
+    'ReactIncrementalTriangle',
+    'ReactIncrementalReflection',
+    'forwardRef',
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupTests.persistent.js'),
+    require.resolve('./setupHostConfigs.js'),
+  ],
+});
diff --git a/scripts/jest/config.source-www.js b/scripts/jest/config.source-www.js
new file mode 100644
index 00000000000..31e8841ac36
--- /dev/null
+++ b/scripts/jest/config.source-www.js
@@ -0,0 +1,16 @@
+'use strict';
+
+const baseConfig = require('./config.base');
+
+module.exports = Object.assign({}, baseConfig, {
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
+    'packages/react-devtools-shared',
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupTests.www.js'),
+    require.resolve('./setupHostConfigs.js'),
+  ],
+});
diff --git a/scripts/jest/config.source-xplat.js b/scripts/jest/config.source-xplat.js
new file mode 100644
index 00000000000..760a584cc1e
--- /dev/null
+++ b/scripts/jest/config.source-xplat.js
@@ -0,0 +1,30 @@
+'use strict';
+
+const baseConfig = require('./config.base');
+
+module.exports = Object.assign({}, baseConfig, {
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
+    'packages/react-devtools-shared',
+    'ReactIncrementalPerf',
+    'ReactIncrementalUpdatesMinimalism',
+    'ReactIncrementalTriangle',
+    'ReactIncrementalReflection',
+    'forwardRef',
+  ],
+  // RN configs should not run react-dom tests.
+  // There are many other tests that use react-dom
+  // and for those we will use the www entrypoint,
+  // but those tests should be migrated to Noop renderer.
+  testPathIgnorePatterns: [
+    'node_modules',
+    'packages/react-dom',
+    'packages/react-server-dom-webpack',
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupTests.xplat.js'),
+    require.resolve('./setupHostConfigs.js'),
+  ],
+});
diff --git a/scripts/jest/config.source.js b/scripts/jest/config.source.js
new file mode 100644
index 00000000000..710df337b5a
--- /dev/null
+++ b/scripts/jest/config.source.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const baseConfig = require('./config.base');
+
+module.exports = Object.assign({}, baseConfig, {
+  modulePathIgnorePatterns: [
+    ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
+    'packages/react-devtools-shared',
+  ],
+  setupFiles: [
+    ...baseConfig.setupFiles,
+    require.resolve('./setupHostConfigs.js'),
+  ],
+});
diff --git a/scripts/jest/devtools/config.build-devtools-regression.js b/scripts/jest/devtools/config.build-devtools-regression.js
new file mode 100644
index 00000000000..bdebee84643
--- /dev/null
+++ b/scripts/jest/devtools/config.build-devtools-regression.js
@@ -0,0 +1,38 @@
+'use strict';
+
+const semver = require('semver');
+
+const NODE_MODULES_DIR =
+  process.env.RELEASE_CHANNEL === 'stable' ? 'oss-stable' : 'oss-experimental';
+
+const REACT_VERSION = process.env.REACT_VERSION;
+
+const moduleNameMapper = {};
+const setupFiles = [];
+
+// We only want to add these if we are in a regression test, IE if there
+// is a REACT_VERSION specified
+if (REACT_VERSION) {
+  // React version 16.5 has a schedule package instead of a scheduler
+  // package, so we need to rename them accordingly
+  if (semver.satisfies(REACT_VERSION, '16.5')) {
+    moduleNameMapper[`^schedule$`] =
+      `<rootDir>/build/${NODE_MODULES_DIR}/schedule`;
+    moduleNameMapper['^schedule/tracing$'] =
+      `<rootDir>/build/${NODE_MODULES_DIR}/schedule/tracing-profiling`;
+  }
+
+  // react-dom/client is only in v18.0.0 and up, so we
+  // map it to react-dom instead
+  if (semver.satisfies(REACT_VERSION, '<18.0')) {
+    moduleNameMapper['^react-dom/client$'] =
+      `<rootDir>/build/${NODE_MODULES_DIR}/react-dom`;
+  }
+
+  setupFiles.push(require.resolve('./setupTests.build-devtools-regression'));
+}
+
+module.exports = {
+  moduleNameMapper,
+  setupFiles,
+};
diff --git a/scripts/jest/devtools/setupEnv.js b/scripts/jest/devtools/setupEnv.js
new file mode 100644
index 00000000000..32bf13e686c
--- /dev/null
+++ b/scripts/jest/devtools/setupEnv.js
@@ -0,0 +1,44 @@
+'use strict';
+
+const semver = require('semver');
+const {ReactVersion} = require('../../../ReactVersions');
+
+// 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';
+global.__TEST__ = true;
+global.__IS_FIREFOX__ = false;
+global.__IS_CHROME__ = false;
+global.__IS_EDGE__ = false;
+global.__IS_NATIVE__ = false;
+global.__IS_INTERNAL_MCP_BUILD__ = false;
+
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
+
+global._test_react_version = (range, testName, callback) => {
+  const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
+
+  if (shouldPass) {
+    test(testName, callback);
+  } else {
+    test.skip(testName, callback);
+  }
+};
+
+global._test_react_version_focus = (range, testName, callback) => {
+  const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
+
+  if (shouldPass) {
+    test.only(testName, callback);
+  } else {
+    test.skip(testName, callback);
+  }
+};
+
+global._test_ignore_for_react_version = (testName, callback) => {
+  test.skip(testName, callback);
+};
diff --git a/scripts/jest/devtools/setupTests.build-devtools-regression.js b/scripts/jest/devtools/setupTests.build-devtools-regression.js
new file mode 100644
index 00000000000..a1221d53d2f
--- /dev/null
+++ b/scripts/jest/devtools/setupTests.build-devtools-regression.js
@@ -0,0 +1,7 @@
+'use strict';
+
+// Regression tests use a React DOM profiling, so we need
+// to replace these tests with scheduler/tracing-profiling
+jest.mock('scheduler/tracing', () => {
+  return jest.requireActual('scheduler/tracing-profiling');
+});
diff --git a/scripts/jest/dont-run-jest-directly.js b/scripts/jest/dont-run-jest-directly.js
new file mode 100644
index 00000000000..672d07caec5
--- /dev/null
+++ b/scripts/jest/dont-run-jest-directly.js
@@ -0,0 +1,3 @@
+'use strict';
+
+throw new Error("Don't run `jest` directly. Run `yarn test` instead.");
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
new file mode 100644
index 00000000000..c53f5bda5e5
--- /dev/null
+++ b/scripts/jest/jest-cli.js
@@ -0,0 +1,420 @@
+'use strict';
+
+const {spawn} = require('child_process');
+const chalk = require('chalk');
+const yargs = require('yargs');
+const fs = require('fs');
+const path = require('path');
+const semver = require('semver');
+
+const ossConfig = './scripts/jest/config.source.js';
+const wwwConfig = './scripts/jest/config.source-www.js';
+const xplatConfig = './scripts/jest/config.source-xplat.js';
+const devToolsConfig = './scripts/jest/config.build-devtools.js';
+
+// TODO: These configs are separate but should be rolled into the configs above
+// so that the CLI can provide them as options for any of the configs.
+const persistentConfig = './scripts/jest/config.source-persistent.js';
+const buildConfig = './scripts/jest/config.build.js';
+
+const argv = yargs
+  .parserConfiguration({
+    // Important: This option tells yargs to move all other options not
+    // specified here into the `_` key. We use this to send all of the
+    // Jest options that we don't use through to Jest (like --watch).
+    'unknown-options-as-args': true,
+  })
+  .wrap(yargs.terminalWidth())
+  .options({
+    debug: {
+      alias: 'd',
+      describe: 'Run with node debugger attached.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    project: {
+      alias: 'p',
+      describe: 'Run the given project.',
+      requiresArg: true,
+      type: 'string',
+      default: 'default',
+      choices: ['default', 'devtools'],
+    },
+    releaseChannel: {
+      alias: 'r',
+      describe: 'Run with the given release channel.',
+      requiresArg: true,
+      type: 'string',
+      default: 'experimental',
+      choices: ['experimental', 'stable', 'www-classic', 'www-modern', 'xplat'],
+    },
+    env: {
+      alias: 'e',
+      describe: 'Run with the given node environment.',
+      requiresArg: true,
+      type: 'string',
+      choices: ['development', 'production'],
+    },
+    prod: {
+      describe: 'Run with NODE_ENV=production.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    dev: {
+      describe: 'Run with NODE_ENV=development.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    variant: {
+      alias: 'v',
+      describe: 'Run with www variant set to true.',
+      requiresArg: false,
+      type: 'boolean',
+    },
+    build: {
+      alias: 'b',
+      describe: 'Run tests on builds.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    persistent: {
+      alias: 'n',
+      describe: 'Run with persistence.',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    ci: {
+      describe: 'Run tests in CI',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    compactConsole: {
+      alias: 'c',
+      describe: 'Compact console output (hide file locations).',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+    reactVersion: {
+      describe: 'DevTools testing for specific version of React',
+      requiresArg: true,
+      type: 'string',
+    },
+    sourceMaps: {
+      describe:
+        'Enable inline source maps when transforming source files with Jest. Useful for debugging, but makes it slower.',
+      type: 'boolean',
+      default: false,
+    },
+    silent: {
+      alias: 's',
+      describe: 'Use silent reporter with dot progress (minimal output).',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
+  }).argv;
+
+function logError(message) {
+  console.error(chalk.red(`\n${message}`));
+}
+function isWWWConfig() {
+  return (
+    (argv.releaseChannel === 'www-classic' ||
+      argv.releaseChannel === 'www-modern') &&
+    argv.project !== 'devtools'
+  );
+}
+
+function isXplatConfig() {
+  return argv.releaseChannel === 'xplat' && argv.project !== 'devtools';
+}
+
+function isOSSConfig() {
+  return (
+    argv.releaseChannel === 'stable' || argv.releaseChannel === 'experimental'
+  );
+}
+
+function validateOptions() {
+  let success = true;
+
+  if (argv.project === 'devtools') {
+    if (argv.prod) {
+      logError(
+        'DevTool tests do not support --prod. Remove this option to continue.'
+      );
+      success = false;
+    }
+
+    if (argv.dev) {
+      logError(
+        'DevTool tests do not support --dev. Remove this option to continue.'
+      );
+      success = false;
+    }
+
+    if (argv.env) {
+      logError(
+        'DevTool tests do not support --env. Remove this option to continue.'
+      );
+      success = false;
+    }
+
+    if (argv.persistent) {
+      logError(
+        'DevTool tests do not support --persistent. Remove this option to continue.'
+      );
+      success = false;
+    }
+
+    if (argv.variant) {
+      logError(
+        'DevTool tests do not support --variant. Remove this option to continue.'
+      );
+      success = false;
+    }
+
+    if (!argv.build) {
+      logError('DevTool tests require --build.');
+      success = false;
+    }
+
+    if (argv.reactVersion && !semver.validRange(argv.reactVersion)) {
+      success = false;
+      logError('please specify a valid version range for --reactVersion');
+    }
+  } else {
+    if (argv.compactConsole) {
+      logError('Only DevTool tests support compactConsole flag.');
+      success = false;
+    }
+    if (argv.reactVersion) {
+      logError('Only DevTools tests supports the --reactVersion flag.');
+      success = false;
+    }
+  }
+
+  if (isWWWConfig() || isXplatConfig()) {
+    if (argv.variant === undefined) {
+      // Turn internal experiments on by default
+      argv.variant = true;
+    }
+  } else {
+    if (argv.variant) {
+      logError(
+        'Variant is only supported for the www release channels. Update these options to continue.'
+      );
+      success = false;
+    }
+  }
+
+  if (argv.build && argv.persistent) {
+    logError(
+      'Persistence is not supported for build targets. Update these options to continue.'
+    );
+    success = false;
+  }
+
+  if (!isOSSConfig() && argv.persistent) {
+    logError(
+      'Persistence only supported for oss release channels. Update these options to continue.'
+    );
+    success = false;
+  }
+
+  if (argv.build && isWWWConfig()) {
+    logError(
+      'Build targets are only not supported for www release channels. Update these options to continue.'
+    );
+    success = false;
+  }
+
+  if (argv.build && isXplatConfig()) {
+    logError(
+      'Build targets are only not supported for xplat release channels. Update these options to continue.'
+    );
+    success = false;
+  }
+
+  if (argv.env && argv.env !== 'production' && argv.prod) {
+    logError(
+      'Build type does not match --prod. Update these options to continue.'
+    );
+    success = false;
+  }
+
+  if (argv.env && argv.env !== 'development' && argv.dev) {
+    logError(
+      'Build type does not match --dev. Update these options to continue.'
+    );
+    success = false;
+  }
+
+  if (argv.prod && argv.dev) {
+    logError(
+      'Cannot supply both --prod and --dev. Remove one of these options to continue.'
+    );
+    success = false;
+  }
+
+  if (argv.build) {
+    // TODO: We could build this if it hasn't been built yet.
+    const buildDir = path.resolve('./build');
+    if (!fs.existsSync(buildDir)) {
+      logError(
+        'Build directory does not exist, please run `yarn build` or remove the --build option.'
+      );
+      success = false;
+    } else if (Date.now() - fs.statSync(buildDir).mtimeMs > 1000 * 60 * 15) {
+      logError(
+        'Warning: Running a build test with a build directory older than 15 minutes.\nPlease remember to run `yarn build` when using --build.'
+      );
+    }
+  }
+
+  if (!success) {
+    console.log(''); // Extra newline.
+    process.exit(1);
+  }
+}
+
+function getCommandArgs() {
+  // Add the correct Jest config.
+  const args = ['./scripts/jest/jest.js', '--config'];
+  if (argv.project === 'devtools') {
+    args.push(devToolsConfig);
+  } else if (argv.build) {
+    args.push(buildConfig);
+  } else if (argv.persistent) {
+    args.push(persistentConfig);
+  } else if (isWWWConfig()) {
+    args.push(wwwConfig);
+  } else if (isXplatConfig()) {
+    args.push(xplatConfig);
+  } else if (isOSSConfig()) {
+    args.push(ossConfig);
+  } else {
+    // We should not get here.
+    logError('Unrecognized release channel');
+    process.exit(1);
+  }
+
+  // Set the debug options, if necessary.
+  if (argv.debug) {
+    args.unshift('--inspect-brk');
+    args.push('--runInBand');
+
+    // Prevent console logs from being hidden until test completes.
+    args.push('--useStderr');
+  }
+
+  if (argv.ci === true) {
+    args.push('--maxConcurrency=10');
+  }
+
+  // Use silent reporter if requested.
+  if (argv.silent) {
+    args.push('--reporters=jest-silent-reporter');
+    args.push('--testLocationInResults');
+  }
+
+  // Push the remaining args onto the command.
+  // This will send args like `--watch` to Jest.
+  args.push(...argv._);
+
+  return args;
+}
+
+function getEnvars() {
+  const envars = {
+    NODE_ENV: argv.env || 'development',
+    RELEASE_CHANNEL: argv.releaseChannel.match(/modern|experimental/)
+      ? 'experimental'
+      : 'stable',
+
+    // Pass this flag through to the config environment
+    // so the base config can conditionally load the console setup file.
+    compactConsole: argv.compactConsole,
+  };
+
+  if (argv.prod) {
+    envars.NODE_ENV = 'production';
+  }
+
+  if (argv.dev) {
+    envars.NODE_ENV = 'development';
+  }
+
+  if (argv.variant) {
+    envars.VARIANT = true;
+  }
+
+  if (argv.reactVersion) {
+    envars.REACT_VERSION = semver.coerce(argv.reactVersion);
+  }
+
+  if (argv.sourceMaps) {
+    // This is off by default because it slows down the test runner, but it's
+    // super useful when running the debugger.
+    envars.JEST_ENABLE_SOURCE_MAPS = 'inline';
+  }
+
+  if (argv.silent) {
+    // Enable dot output for jest-silent-reporter so that long test runs
+    // show progress and don't appear to be hung.
+    envars.JEST_SILENT_REPORTER_DOTS = true;
+  }
+
+  return envars;
+}
+
+function main() {
+  validateOptions();
+
+  const args = getCommandArgs();
+  const envars = getEnvars();
+  const env = Object.entries(envars).map(([k, v]) => `${k}=${v}`);
+
+  if (argv.ci !== true) {
+    // Print the full command we're actually running.
+    const command = `$ ${env.join(' ')} node ${args.join(' ')}`;
+    console.log(chalk.dim(command));
+
+    // Print the release channel and project we're running for quick confirmation.
+    console.log(
+      chalk.blue(
+        `\nRunning tests for ${argv.project} (${argv.releaseChannel})...`
+      )
+    );
+  }
+
+  // Print a message that the debugger is starting just
+  // for some extra feedback when running the debugger.
+  if (argv.debug) {
+    console.log(chalk.green('\nStarting debugger...'));
+    console.log(chalk.green('Open chrome://inspect and press "inspect"\n'));
+  }
+
+  // Run Jest.
+  const jest = spawn('node', args, {
+    stdio: 'inherit',
+    env: {...envars, ...process.env},
+  });
+
+  // Ensure we close our process when we get a failure case.
+  jest.on('close', code => {
+    // Forward the exit code from the Jest process.
+    if (code === 1) {
+      process.exit(1);
+    }
+  });
+}
+
+main();
diff --git a/scripts/jest/jest.js b/scripts/jest/jest.js
new file mode 100644
index 00000000000..67d56b3d4e4
--- /dev/null
+++ b/scripts/jest/jest.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+// --- Welcome to debugging React tests ---
+// The debugger pauses on this statement so that you can open the dev tools.
+// You can now set breakpoints and begin debugging.
+require('jest-cli/bin/jest');
diff --git a/scripts/jest/matchers/reactTestMatchers.js b/scripts/jest/matchers/reactTestMatchers.js
new file mode 100644
index 00000000000..fbe8d00cc23
--- /dev/null
+++ b/scripts/jest/matchers/reactTestMatchers.js
@@ -0,0 +1,48 @@
+'use strict';
+
+const JestReact = require('jest-react');
+const {assertConsoleLogsCleared} = require('internal-test-utils/consoleMock');
+// TODO: Move to ReactInternalTestUtils
+
+function captureAssertion(fn) {
+  // Trick to use a Jest matcher inside another Jest matcher. `fn` contains an
+  // assertion; if it throws, we capture the error and return it, so the stack
+  // trace presented to the user points to the original assertion in the
+  // test file.
+  try {
+    fn();
+  } catch (error) {
+    return {
+      pass: false,
+      message: () => error.message,
+    };
+  }
+  return {pass: true};
+}
+
+function assertYieldsWereCleared(Scheduler, caller) {
+  const actualYields = Scheduler.unstable_clearLog();
+  if (actualYields.length !== 0) {
+    const error = Error(
+      'The event log is not empty. Call assertLog(...) first.'
+    );
+    Error.captureStackTrace(error, caller);
+    throw error;
+  }
+  assertConsoleLogsCleared();
+}
+
+function toMatchRenderedOutput(ReactNoop, expectedJSX) {
+  if (typeof ReactNoop.getChildrenAsJSX === 'function') {
+    const Scheduler = ReactNoop._Scheduler;
+    assertYieldsWereCleared(Scheduler, toMatchRenderedOutput);
+    return captureAssertion(() => {
+      expect(ReactNoop.getChildrenAsJSX()).toEqual(expectedJSX);
+    });
+  }
+  return JestReact.unstable_toMatchRenderedOutput(ReactNoop, expectedJSX);
+}
+
+module.exports = {
+  toMatchRenderedOutput,
+};
diff --git a/scripts/jest/matchers/toThrow.js b/scripts/jest/matchers/toThrow.js
new file mode 100644
index 00000000000..204a2fc713c
--- /dev/null
+++ b/scripts/jest/matchers/toThrow.js
@@ -0,0 +1,50 @@
+'use strict';
+
+// V8 uses a different message format when reading properties of null or undefined.
+// Older versions use e.g. "Cannot read property 'world' of undefined"
+// Newer versions use e.g. "Cannot read properties of undefined (reading 'world')"
+// This file overrides the built-in toThrow() matches to handle both cases,
+// enabling the React project to support Node 12-16 without forking tests.
+
+const toThrowMatchers = require('expect/build/toThrowMatchers').default;
+const builtInToThrow = toThrowMatchers.toThrow;
+
+// Detect the newer stack format:
+let newErrorFormat = false;
+try {
+  null.test();
+} catch (error) {
+  if (error.message.includes('Cannot read properties of null')) {
+    newErrorFormat = true;
+  }
+}
+
+// Detect the message pattern we need to rename:
+const regex = /Cannot read property '([^']+)' of (.+)/;
+
+// Massage strings (written in the older format) to match the newer format
+// if tests are currently running on Node 16+
+function normalizeErrorMessage(message) {
+  if (newErrorFormat) {
+    const match = message.match(regex);
+    if (match) {
+      return `Cannot read properties of ${match[2]} (reading '${match[1]}')`;
+    }
+  }
+
+  return message;
+}
+
+function toThrow(value, expectedValue) {
+  if (typeof expectedValue === 'string') {
+    expectedValue = normalizeErrorMessage(expectedValue);
+  } else if (expectedValue instanceof Error) {
+    expectedValue.message = normalizeErrorMessage(expectedValue.message);
+  }
+
+  return builtInToThrow.call(this, value, expectedValue);
+}
+
+module.exports = {
+  toThrow,
+};
diff --git a/scripts/jest/patchMessageChannel.js b/scripts/jest/patchMessageChannel.js
new file mode 100644
index 00000000000..62716358a84
--- /dev/null
+++ b/scripts/jest/patchMessageChannel.js
@@ -0,0 +1,21 @@
+'use strict';
+
+export function patchMessageChannel() {
+  global.MessageChannel = class {
+    constructor() {
+      const port1 = {
+        onmesssage: () => {},
+      };
+
+      this.port1 = port1;
+
+      this.port2 = {
+        postMessage(msg) {
+          setTimeout(() => {
+            port1.onmessage(msg);
+          }, 0);
+        },
+      };
+    }
+  };
+}
diff --git a/scripts/jest/patchSetImmediate.js b/scripts/jest/patchSetImmediate.js
new file mode 100644
index 00000000000..b225f1caf62
--- /dev/null
+++ b/scripts/jest/patchSetImmediate.js
@@ -0,0 +1,7 @@
+'use strict';
+
+export function patchSetImmediate() {
+  global.setImmediate = cb => {
+    setTimeout(cb, 0);
+  };
+}
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
new file mode 100644
index 00000000000..3d7e98eab97
--- /dev/null
+++ b/scripts/jest/preprocessor.js
@@ -0,0 +1,145 @@
+'use strict';
+
+const path = require('path');
+
+const babel = require('@babel/core');
+const coffee = require('coffee-script');
+const hermesParser = require('hermes-parser');
+
+const tsPreprocessor = require('./typescript/preprocessor');
+const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
+const {ReactVersion} = require('../../ReactVersions');
+const semver = require('semver');
+
+const pathToBabel = path.join(
+  require.resolve('@babel/core'),
+  '../..',
+  'package.json'
+);
+const pathToTransformInfiniteLoops = require.resolve(
+  '../babel/transform-prevent-infinite-loops'
+);
+const pathToTransformTestGatePragma = require.resolve(
+  '../babel/transform-test-gate-pragma'
+);
+const pathToTransformReactVersionPragma = require.resolve(
+  '../babel/transform-react-version-pragma'
+);
+const pathToTransformLazyJSXImport = require.resolve(
+  '../babel/transform-lazy-jsx-import'
+);
+const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
+const pathToErrorCodes = require.resolve('../error-codes/codes.json');
+
+const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
+
+const babelOptions = {
+  plugins: [
+    // For Node environment only. For builds, Rollup takes care of ESM.
+    require.resolve('@babel/plugin-transform-modules-commonjs'),
+
+    pathToTransformInfiniteLoops,
+    pathToTransformTestGatePragma,
+
+    // 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,
+};
+
+module.exports = {
+  process: function (src, filePath) {
+    if (filePath.match(/\.css$/)) {
+      // Don't try to parse CSS modules; they aren't needed for tests anyway.
+      return {code: ''};
+    }
+    if (filePath.match(/\.coffee$/)) {
+      return {code: coffee.compile(src, {bare: true})};
+    }
+    if (filePath.match(/\.ts$/) && !filePath.match(/\.d\.ts$/)) {
+      return {code: tsPreprocessor.compile(src, filePath)};
+    }
+    if (filePath.match(/\.json$/)) {
+      return {code: 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 plugins = [].concat(babelOptions.plugins);
+      if (isTestFile && isInDevToolsPackages) {
+        plugins.push(pathToTransformReactVersionPragma);
+      }
+
+      // This is only for React DevTools tests with React 16.x
+      // `react/jsx-dev-runtime` and `react/jsx-runtime` are included in the package starting from v17
+      // Technically 16.14 and 15.7 have the new runtime but we're not testing those versions.
+      if (
+        semver.gte(ReactVersionTestingAgainst, '15.0.0') &&
+        semver.lt(ReactVersionTestingAgainst, '17.0.0')
+      ) {
+        plugins.push(
+          [
+            require.resolve('@babel/plugin-transform-react-jsx'),
+            {runtime: 'classic'},
+          ],
+          require.resolve('@babel/plugin-transform-react-jsx-source')
+        );
+      } else {
+        plugins.push([
+          process.env.NODE_ENV === 'development'
+            ? require.resolve('@babel/plugin-transform-react-jsx-development')
+            : require.resolve('@babel/plugin-transform-react-jsx'),
+          // The "automatic" runtime corresponds to react/jsx-runtime. "classic"
+          // would be React.createElement.
+          {runtime: 'automatic'},
+        ]);
+      }
+
+      plugins.push(pathToTransformLazyJSXImport);
+
+      let sourceAst = hermesParser.parse(src, {babel: true});
+      return {
+        code: babel.transformFromAstSync(
+          sourceAst,
+          src,
+          Object.assign(
+            {filename: path.relative(process.cwd(), filePath)},
+            babelOptions,
+            {
+              plugins,
+              sourceMaps: process.env.JEST_ENABLE_SOURCE_MAPS
+                ? process.env.JEST_ENABLE_SOURCE_MAPS
+                : false,
+            }
+          )
+        ).code,
+      };
+    }
+    return {code: src};
+  },
+
+  getCacheKey: createCacheKeyFunction(
+    [
+      __filename,
+      pathToBabel,
+      pathToBabelrc,
+      pathToTransformInfiniteLoops,
+      pathToTransformTestGatePragma,
+      pathToTransformReactVersionPragma,
+      pathToTransformLazyJSXImport,
+      pathToErrorCodes,
+    ],
+    [
+      (process.env.REACT_VERSION != null).toString(),
+      (process.env.NODE_ENV === 'development').toString(),
+    ]
+  ),
+};
diff --git a/scripts/jest/setupEnvironment.js b/scripts/jest/setupEnvironment.js
new file mode 100644
index 00000000000..44acb04f181
--- /dev/null
+++ b/scripts/jest/setupEnvironment.js
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+const NODE_ENV = process.env.NODE_ENV;
+if (NODE_ENV !== 'development' && NODE_ENV !== 'production') {
+  throw new Error('NODE_ENV must either be set to development or production.');
+}
+global.__DEV__ = NODE_ENV === 'development';
+global.__EXTENSION__ = false;
+global.__TEST__ = NODE_ENV === 'test';
+global.__PROFILE__ = NODE_ENV === 'development';
+
+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;
+
+global.__VARIANT__ = !!process.env.VARIANT;
+
+if (typeof window !== 'undefined') {
+} else {
+  global.AbortController =
+    require('abortcontroller-polyfill/dist/cjs-ponyfill').AbortController;
+}
diff --git a/scripts/jest/setupGlobal.js b/scripts/jest/setupGlobal.js
new file mode 100644
index 00000000000..f820078fea8
--- /dev/null
+++ b/scripts/jest/setupGlobal.js
@@ -0,0 +1,7 @@
+/* eslint-disable */
+
+module.exports = () => {
+  // can use beforeEach/afterEach or setupEnvironment.js in node >= 13: https://github.com/nodejs/node/pull/20026
+  // jest's `setupFiles` is too late: https://stackoverflow.com/a/56482581/3406963
+  process.env.TZ = 'UTC';
+};
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
new file mode 100644
index 00000000000..aacfaf116fc
--- /dev/null
+++ b/scripts/jest/setupHostConfigs.js
@@ -0,0 +1,250 @@
+'use strict';
+
+const fs = require('fs');
+const nodePath = require('path');
+const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
+
+function resolveEntryFork(resolvedEntry, isFBBundle) {
+  // Pick which entry point fork to use:
+  // .modern.fb.js
+  // .classic.fb.js
+  // .fb.js
+  // .stable.js
+  // .experimental.js
+  // .js
+  // or any of those plus .development.js
+
+  if (isFBBundle) {
+    // FB builds for react-dom need to alias both react-dom and react-dom/client to the same
+    // entrypoint since there is only a single build for them.
+    if (
+      resolvedEntry.endsWith('react-dom/index.js') ||
+      resolvedEntry.endsWith('react-dom/client.js') ||
+      resolvedEntry.endsWith('react-dom/unstable_testing.js')
+    ) {
+      let specifier;
+      let entrypoint;
+      if (resolvedEntry.endsWith('index.js')) {
+        specifier = 'react-dom';
+        entrypoint = __EXPERIMENTAL__
+          ? 'src/ReactDOMFB.modern.js'
+          : 'src/ReactDOMFB.js';
+      } else if (resolvedEntry.endsWith('client.js')) {
+        specifier = 'react-dom/client';
+        entrypoint = __EXPERIMENTAL__
+          ? 'src/ReactDOMFB.modern.js'
+          : 'src/ReactDOMFB.js';
+      } else {
+        // must be unstable_testing
+        specifier = 'react-dom/unstable_testing';
+        entrypoint = __EXPERIMENTAL__
+          ? 'src/ReactDOMTestingFB.modern.js'
+          : 'src/ReactDOMTestingFB.js';
+      }
+
+      resolvedEntry = nodePath.join(resolvedEntry, '..', entrypoint);
+      const devEntry = resolvedEntry.replace('.js', '.development.js');
+      if (__DEV__ && fs.existsSync(devEntry)) {
+        return devEntry;
+      }
+      if (fs.existsSync(resolvedEntry)) {
+        return resolvedEntry;
+      }
+      const fbReleaseChannel = __EXPERIMENTAL__ ? 'www-modern' : 'www-classic';
+      throw new Error(
+        `${fbReleaseChannel} tests are expected to alias ${specifier} to ${entrypoint} but this file was not found`
+      );
+    }
+    const resolvedFBEntry = resolvedEntry.replace(
+      '.js',
+      __EXPERIMENTAL__ ? '.modern.fb.js' : '.classic.fb.js'
+    );
+    const devFBEntry = resolvedFBEntry.replace('.js', '.development.js');
+    if (__DEV__ && fs.existsSync(devFBEntry)) {
+      return devFBEntry;
+    }
+    if (fs.existsSync(resolvedFBEntry)) {
+      return resolvedFBEntry;
+    }
+    const resolvedGenericFBEntry = resolvedEntry.replace('.js', '.fb.js');
+    const devGenericFBEntry = resolvedGenericFBEntry.replace(
+      '.js',
+      '.development.js'
+    );
+    if (__DEV__ && fs.existsSync(devGenericFBEntry)) {
+      return devGenericFBEntry;
+    }
+    if (fs.existsSync(resolvedGenericFBEntry)) {
+      return resolvedGenericFBEntry;
+    }
+    // Even if it's a FB bundle we fallthrough to pick stable or experimental if we don't have an FB fork.
+  }
+  const resolvedForkedEntry = resolvedEntry.replace(
+    '.js',
+    __EXPERIMENTAL__ ? '.experimental.js' : '.stable.js'
+  );
+  const devForkedEntry = resolvedForkedEntry.replace('.js', '.development.js');
+  if (__DEV__ && fs.existsSync(devForkedEntry)) {
+    return devForkedEntry;
+  }
+  if (fs.existsSync(resolvedForkedEntry)) {
+    return resolvedForkedEntry;
+  }
+  const plainDevEntry = resolvedEntry.replace('.js', '.development.js');
+  if (__DEV__ && fs.existsSync(plainDevEntry)) {
+    return plainDevEntry;
+  }
+  // Just use the plain .js one.
+  return resolvedEntry;
+}
+
+function mockReact() {
+  jest.mock('react', () => {
+    const resolvedEntryPoint = resolveEntryFork(
+      require.resolve('react'),
+      global.__WWW__ || global.__XPLAT__,
+      global.__DEV__
+    );
+    return jest.requireActual(resolvedEntryPoint);
+  });
+  // Make it possible to import this module inside
+  // the React package itself.
+  jest.mock('shared/ReactSharedInternals', () => {
+    return jest.requireActual('react/src/ReactSharedInternalsClient');
+  });
+}
+
+// When we want to unmock React we really need to mock it again.
+global.__unmockReact = mockReact;
+
+mockReact();
+
+jest.mock('react/react.react-server', () => {
+  // If we're requiring an RSC environment, use those internals instead.
+  jest.mock('shared/ReactSharedInternals', () => {
+    return jest.requireActual('react/src/ReactSharedInternalsServer');
+  });
+  const resolvedEntryPoint = resolveEntryFork(
+    require.resolve('react/src/ReactServer'),
+    global.__WWW__ || global.__XPLAT__,
+    global.__DEV__
+  );
+  return jest.requireActual(resolvedEntryPoint);
+});
+
+// When testing the custom renderer code path through `react-reconciler`,
+// turn the export into a function, and use the argument as host config.
+const shimHostConfigPath = 'react-reconciler/src/ReactFiberConfig';
+jest.mock('react-reconciler', () => {
+  return config => {
+    jest.mock(shimHostConfigPath, () => config);
+    return jest.requireActual('react-reconciler');
+  };
+});
+const shimServerStreamConfigPath = 'react-server/src/ReactServerStreamConfig';
+const shimServerConfigPath = 'react-server/src/ReactFizzConfig';
+const shimFlightServerConfigPath = 'react-server/src/ReactFlightServerConfig';
+jest.mock('react-server', () => {
+  return config => {
+    jest.mock(shimServerStreamConfigPath, () => config);
+    jest.mock(shimServerConfigPath, () => config);
+    return jest.requireActual('react-server');
+  };
+});
+jest.mock('react-server/flight', () => {
+  return config => {
+    jest.mock(shimServerStreamConfigPath, () => config);
+    jest.mock(shimServerConfigPath, () => config);
+    jest.mock('react-server/src/ReactFlightServerConfigBundlerCustom', () => ({
+      isClientReference: config.isClientReference,
+      isServerReference: config.isServerReference,
+      getClientReferenceKey: config.getClientReferenceKey,
+      resolveClientReferenceMetadata: config.resolveClientReferenceMetadata,
+    }));
+    jest.mock(shimFlightServerConfigPath, () =>
+      jest.requireActual(
+        'react-server/src/forks/ReactFlightServerConfig.custom'
+      )
+    );
+    return jest.requireActual('react-server/flight');
+  };
+});
+const shimFlightClientConfigPath = 'react-client/src/ReactFlightClientConfig';
+jest.mock('react-client/flight', () => {
+  return config => {
+    jest.mock(shimFlightClientConfigPath, () => config);
+    return jest.requireActual('react-client/flight');
+  };
+});
+
+const configPaths = [
+  'react-reconciler/src/ReactFiberConfig',
+  'react-client/src/ReactFlightClientConfig',
+  'react-server/src/ReactServerStreamConfig',
+  'react-server/src/ReactFizzConfig',
+  'react-server/src/ReactFlightServerConfig',
+];
+
+function mockAllConfigs(rendererInfo) {
+  configPaths.forEach(path => {
+    // We want the reconciler to pick up the host config for this renderer.
+    jest.mock(path, () => {
+      let idx = path.lastIndexOf('/');
+      let forkPath = path.slice(0, idx) + '/forks' + path.slice(idx);
+      let parts = rendererInfo.shortName.split('-');
+      while (parts.length) {
+        try {
+          const candidate = `${forkPath}.${parts.join('-')}.js`;
+          fs.statSync(nodePath.join(process.cwd(), 'packages', candidate));
+          return jest.requireActual(candidate);
+        } catch (error) {
+          if (error.code !== 'ENOENT') {
+            throw error;
+          }
+          // try without a part
+        }
+        parts.pop();
+      }
+      throw new Error(
+        `Expected to find a fork for ${path} but did not find one.`
+      );
+    });
+  });
+}
+
+// But for inlined host configs (such as React DOM, Native, etc), we
+// mock their named entry points to establish a host config mapping.
+inlinedHostConfigs.forEach(rendererInfo => {
+  if (rendererInfo.shortName === 'custom') {
+    // There is no inline entry point for the custom renderers.
+    // Instead, it's handled by the generic `react-reconciler` entry point above.
+    return;
+  }
+  rendererInfo.entryPoints.forEach(entryPoint => {
+    jest.mock(entryPoint, () => {
+      mockAllConfigs(rendererInfo);
+      const resolvedEntryPoint = resolveEntryFork(
+        require.resolve(entryPoint),
+        global.__WWW__ || global.__XPLAT__,
+        global.__DEV__
+      );
+      return jest.requireActual(resolvedEntryPoint);
+    });
+  });
+});
+
+jest.mock('react-server/src/ReactFlightServer', () => {
+  // If we're requiring an RSC environment, use those internals instead.
+  jest.mock('shared/ReactSharedInternals', () => {
+    return jest.requireActual('react/src/ReactSharedInternalsServer');
+  });
+  return jest.requireActual('react-server/src/ReactFlightServer');
+});
+
+// Make it possible to import this module inside
+// the ReactDOM package itself.
+jest.mock('shared/ReactDOMSharedInternals', () =>
+  jest.requireActual('react-dom/src/ReactDOMSharedInternals')
+);
+
+jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
diff --git a/scripts/jest/setupTests.build.js b/scripts/jest/setupTests.build.js
new file mode 100644
index 00000000000..2759ddae540
--- /dev/null
+++ b/scripts/jest/setupTests.build.js
@@ -0,0 +1,5 @@
+'use strict';
+
+jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
+
+global.__unmockReact = () => jest.unmock('react');
diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
new file mode 100644
index 00000000000..aadb2801782
--- /dev/null
+++ b/scripts/jest/setupTests.js
@@ -0,0 +1,332 @@
+'use strict';
+
+const {getTestFlags} = require('./TestFlags');
+const {
+  assertConsoleLogsCleared,
+  resetAllUnexpectedConsoleCalls,
+  patchConsoleMethods,
+} = require('internal-test-utils/consoleMock');
+const path = require('path');
+
+if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
+  // Inside the class equivalence tester, we have a custom environment, let's
+  // require that instead.
+  require('./spec-equivalence-reporter/setupTests.js');
+} else {
+  const errorMap = require('../error-codes/codes.json');
+
+  // By default, jest.spyOn also calls the spied method.
+  const spyOn = jest.spyOn;
+  const noop = jest.fn;
+
+  // Can be used to normalize paths in stackframes
+  global.__REACT_ROOT_PATH_TEST__ = path.resolve(__dirname, '../..');
+
+  // Spying on console methods in production builds can mask errors.
+  // This is why we added an explicit spyOnDev() helper.
+  // It's too easy to accidentally use the more familiar spyOn() helper though,
+  // So we disable it entirely.
+  // Spying on both dev and prod will require using both spyOnDev() and spyOnProd().
+  global.spyOn = function () {
+    throw new Error(
+      'Do not use spyOn(). ' +
+        'It can accidentally hide unexpected errors in production builds. ' +
+        'Use spyOnDev(), spyOnProd(), or spyOnDevAndProd() instead.'
+    );
+  };
+
+  if (process.env.NODE_ENV === 'production') {
+    global.spyOnDev = noop;
+    global.spyOnProd = spyOn;
+    global.spyOnDevAndProd = spyOn;
+  } else {
+    global.spyOnDev = spyOn;
+    global.spyOnProd = noop;
+    global.spyOnDevAndProd = spyOn;
+  }
+
+  expect.extend({
+    ...require('./matchers/reactTestMatchers'),
+    ...require('./matchers/toThrow'),
+  });
+
+  // We have a Babel transform that inserts guards against infinite loops.
+  // If a loop runs for too many iterations, we throw an error and set this
+  // global variable. The global lets us detect an infinite loop even if
+  // the actual error object ends up being caught and ignored. An infinite
+  // loop must always fail the test!
+  beforeEach(() => {
+    global.infiniteLoopError = null;
+  });
+  afterEach(() => {
+    const error = global.infiniteLoopError;
+    global.infiniteLoopError = null;
+    if (error) {
+      throw error;
+    }
+  });
+
+  // Patch the console to assert that all console error/warn/log calls assert.
+  patchConsoleMethods({includeLog: !!process.env.CI});
+  beforeEach(resetAllUnexpectedConsoleCalls);
+  afterEach(assertConsoleLogsCleared);
+
+  // TODO: enable this check so we don't forget to reset spyOnX mocks.
+  // afterEach(() => {
+  //   if (
+  //       console[methodName] !== mockMethod &&
+  //       !jest.isMockFunction(console[methodName])
+  //   ) {
+  //     throw new Error(
+  //       `Test did not tear down console.${methodName} mock properly.`
+  //     );
+  //   }
+  // });
+
+  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;
+      }
+      const re = /react.dev\/errors\/(\d+)?\??([^\s]*)/;
+      let matches = message.match(re);
+      if (!matches || matches.length !== 3) {
+        // Some tests use React 17, when the URL was different.
+        const re17 = /error-decoder.html\?invariant=(\d+)([^\s]*)/;
+        matches = message.match(re17);
+        if (!matches || matches.length !== 3) {
+          return message;
+        }
+      }
+      const code = parseInt(matches[1], 10);
+      const args = matches[2]
+        .split('&')
+        .filter(s => s.startsWith('args[]='))
+        .map(s => s.slice('args[]='.length))
+        .map(decodeURIComponent);
+      const format = errorMap[code];
+      let argIndex = 0;
+      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);
+        },
+        get(target, key, receiver) {
+          if (key === 'stack') {
+            // https://github.com/nodejs/node/issues/60862
+            return Reflect.get(target, key);
+          }
+          return Reflect.get(target, key, 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 proxyErrorInstance(error);
+      },
+      construct(target, argumentsList, newTarget) {
+        const error = Reflect.construct(target, argumentsList, newTarget);
+        error.message = decodeErrorMessage(error.message);
+        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 expectTestToFail = async (callback, errorToThrowIfTestSucceeds) => {
+    if (callback.length > 0) {
+      throw Error(
+        'Gated test helpers do not support the `done` callback. Return a ' +
+          'promise instead.'
+      );
+    }
+
+    // Install a global error event handler. We treat global error events as
+    // test failures, same as Jest's default behavior.
+    //
+    // Becaused we installed our own error event handler, Jest will not report a
+    // test failure. Conceptually it's as if we wrapped the entire test event in
+    // a try-catch.
+    let didError = false;
+    const errorEventHandler = () => {
+      didError = true;
+    };
+    // eslint-disable-next-line no-restricted-globals
+    if (typeof addEventListener === 'function') {
+      // eslint-disable-next-line no-restricted-globals
+      addEventListener('error', errorEventHandler);
+    }
+
+    try {
+      const maybePromise = callback();
+      if (
+        maybePromise !== undefined &&
+        maybePromise !== null &&
+        typeof maybePromise.then === 'function'
+      ) {
+        await maybePromise;
+      }
+      // Flush unexpected console calls inside the test itself, instead of in
+      // `afterEach` like we normally do. `afterEach` is too late because if it
+      // throws, we won't have captured it.
+      assertConsoleLogsCleared();
+    } catch (testError) {
+      didError = true;
+    }
+    resetAllUnexpectedConsoleCalls();
+    // eslint-disable-next-line no-restricted-globals
+    if (typeof removeEventListener === 'function') {
+      // eslint-disable-next-line no-restricted-globals
+      removeEventListener('error', errorEventHandler);
+    }
+
+    if (!didError) {
+      // The test did not error like we expected it to. Report this to Jest as
+      // a failure.
+      throw errorToThrowIfTestSucceeds;
+    }
+  };
+
+  const coerceGateConditionToFunction = gateFnOrString => {
+    return typeof gateFnOrString === 'string'
+      ? // `gate('foo')` is treated as equivalent to `gate(flags => flags.foo)`
+        flags => flags[gateFnOrString]
+      : // Assume this is already a function
+        gateFnOrString;
+  };
+
+  const gatedErrorMessage = 'Gated test was expected to fail, but it passed.';
+  global._test_gate = (gateFnOrString, testName, callback, timeoutMS) => {
+    const gateFn = coerceGateConditionToFunction(gateFnOrString);
+    let shouldPass;
+    try {
+      const flags = getTestFlags();
+      shouldPass = gateFn(flags);
+    } catch (e) {
+      test(
+        testName,
+        () => {
+          throw e;
+        },
+        timeoutMS
+      );
+      return;
+    }
+    if (shouldPass) {
+      test(testName, callback, timeoutMS);
+    } else {
+      const error = new Error(gatedErrorMessage);
+      Error.captureStackTrace(error, global._test_gate);
+      test(`[GATED, SHOULD FAIL] ${testName}`, () =>
+        expectTestToFail(callback, error, timeoutMS));
+    }
+  };
+  global._test_gate_focus = (gateFnOrString, testName, callback, timeoutMS) => {
+    const gateFn = coerceGateConditionToFunction(gateFnOrString);
+    let shouldPass;
+    try {
+      const flags = getTestFlags();
+      shouldPass = gateFn(flags);
+    } catch (e) {
+      test.only(
+        testName,
+        () => {
+          throw e;
+        },
+        timeoutMS
+      );
+      return;
+    }
+    if (shouldPass) {
+      test.only(testName, callback, timeoutMS);
+    } else {
+      const error = new Error(gatedErrorMessage);
+      Error.captureStackTrace(error, global._test_gate_focus);
+      test.only(
+        `[GATED, SHOULD FAIL] ${testName}`,
+        () => expectTestToFail(callback, error),
+        timeoutMS
+      );
+    }
+  };
+
+  // Dynamic version of @gate pragma
+  global.gate = gateFnOrString => {
+    const gateFn = coerceGateConditionToFunction(gateFnOrString);
+    const flags = getTestFlags();
+    return gateFn(flags);
+  };
+
+  // We augment JSDOM to produce a document that has a loading readyState by default
+  // and can be changed. We mock it here globally so we don't have to import our special
+  // mock in every file.
+  jest.mock('jsdom', () => {
+    return require('internal-test-utils/ReactJSDOM.js');
+  });
+}
+
+// We mock createHook so that we can automatically clean it up.
+let installedHook = null;
+jest.mock('async_hooks', () => {
+  const actual = jest.requireActual('async_hooks');
+  return {
+    ...actual,
+    createHook(config) {
+      if (installedHook) {
+        installedHook.disable();
+      }
+      return (installedHook = actual.createHook(config));
+    },
+  };
+});
+
+// Ensure async hooks are disabled after each test to prevent cross-test pollution.
+// This is needed because test files that load the Node server (with async debug hooks)
+// can pollute test files that load the Edge server (which doesn't create new hooks
+// to trigger the cleanup in the mock above).
+afterEach(() => {
+  if (installedHook) {
+    installedHook.disable();
+    installedHook = null;
+  }
+});
diff --git a/scripts/jest/setupTests.persistent.js b/scripts/jest/setupTests.persistent.js
new file mode 100644
index 00000000000..1d3f33a68e5
--- /dev/null
+++ b/scripts/jest/setupTests.persistent.js
@@ -0,0 +1,7 @@
+'use strict';
+
+jest.mock('react-noop-renderer', () =>
+  jest.requireActual('react-noop-renderer/persistent')
+);
+
+global.__PERSISTENT__ = true;
diff --git a/scripts/jest/setupTests.www.js b/scripts/jest/setupTests.www.js
new file mode 100644
index 00000000000..9628dc3e1fc
--- /dev/null
+++ b/scripts/jest/setupTests.www.js
@@ -0,0 +1,47 @@
+'use strict';
+
+jest.mock('shared/ReactFeatureFlags', () => {
+  jest.mock(
+    'ReactFeatureFlags',
+    () => jest.requireActual('shared/forks/ReactFeatureFlags.www-dynamic'),
+    {virtual: true}
+  );
+  const actual = jest.requireActual('shared/forks/ReactFeatureFlags.www');
+
+  // Flags that aren't currently used, but we still want to force variants to keep the
+  // code live.
+  actual.disableInputAttributeSyncing = __VARIANT__;
+
+  // These are hardcoded to true for the next release,
+  // but still run the tests against both variants until
+  // we remove the flag.
+  actual.disableClientCache = __VARIANT__;
+
+  // Some value that doesn't impact existing tests
+  actual.ownerStackLimit = __VARIANT__ ? 500 : 1e4;
+
+  return actual;
+});
+
+jest.mock('scheduler/src/SchedulerFeatureFlags', () => {
+  const schedulerSrcPath = process.cwd() + '/packages/scheduler';
+  jest.mock(
+    'SchedulerFeatureFlags',
+    () =>
+      jest.requireActual(
+        schedulerSrcPath + '/src/forks/SchedulerFeatureFlags.www-dynamic'
+      ),
+    {virtual: true}
+  );
+  const actual = jest.requireActual(
+    schedulerSrcPath + '/src/forks/SchedulerFeatureFlags.www'
+  );
+
+  // Add flags here that are not a dynamic on www,
+  // but we still want to run tests in both versions.
+  // <this list is empty>
+
+  return actual;
+});
+
+global.__WWW__ = true;
diff --git a/scripts/jest/setupTests.xplat.js b/scripts/jest/setupTests.xplat.js
new file mode 100644
index 00000000000..3b05a474a04
--- /dev/null
+++ b/scripts/jest/setupTests.xplat.js
@@ -0,0 +1,36 @@
+'use strict';
+
+jest.mock('shared/ReactFeatureFlags', () => {
+  jest.mock(
+    'ReactNativeInternalFeatureFlags',
+    () =>
+      jest.requireActual('shared/forks/ReactFeatureFlags.native-fb-dynamic.js'),
+    {virtual: true}
+  );
+  const actual = jest.requireActual(
+    'shared/forks/ReactFeatureFlags.native-fb.js'
+  );
+
+  // Lots of tests use these, but we don't want to expose it to RN.
+  // Ideally, tests for xplat wouldn't use react-dom, but many of our tests do.
+  // Since the xplat tests run with the www entry points, some of these flags
+  // need to be set to the www value for the entrypoint, otherwise gating would
+  // fail due to the tests passing. Ideally, the www entry points for these APIs
+  // would be gated, and then these would fail correctly.
+  actual.enableLegacyCache = true;
+  actual.enableLegacyHidden = true;
+  actual.enableScopeAPI = true;
+  actual.enableTaint = false;
+
+  // Some value that doesn't impact existing tests
+  actual.ownerStackLimit = __VARIANT__ ? 500 : 1e4;
+
+  return actual;
+});
+
+jest.mock('react-noop-renderer', () =>
+  jest.requireActual('react-noop-renderer/persistent')
+);
+
+global.__PERSISTENT__ = true;
+global.__XPLAT__ = true;
diff --git a/scripts/jest/sizeBalancedSequencer.js b/scripts/jest/sizeBalancedSequencer.js
new file mode 100644
index 00000000000..318cd136be4
--- /dev/null
+++ b/scripts/jest/sizeBalancedSequencer.js
@@ -0,0 +1,28 @@
+'use strict';
+
+const Sequencer = require('@jest/test-sequencer').default;
+const fs = require('fs');
+
+class SizeBalancedSequencer extends Sequencer {
+  shard(tests, {shardIndex, shardCount}) {
+    const shards = Array.from({length: shardCount}, () => ({
+      tests: [],
+      size: 0,
+    }));
+    const sorted = [...tests].sort(
+      (a, b) => fs.statSync(b.path).size - fs.statSync(a.path).size
+    );
+
+    for (let i = 0; i < sorted.length; i++) {
+      const test = sorted[i];
+      const size = fs.statSync(test.path).size;
+      const smallest = shards.reduce((min, s) => (s.size < min.size ? s : min));
+      smallest.tests.push(test);
+      smallest.size += size;
+    }
+
+    return shards[shardIndex - 1].tests;
+  }
+}
+
+module.exports = SizeBalancedSequencer;
diff --git a/scripts/jest/spec-equivalence-reporter/equivalenceReporter.js b/scripts/jest/spec-equivalence-reporter/equivalenceReporter.js
new file mode 100644
index 00000000000..63da3737d2b
--- /dev/null
+++ b/scripts/jest/spec-equivalence-reporter/equivalenceReporter.js
@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+class EquivalenceReporter {
+  onTestCaseResult(test, testCaseResult) {
+    console.log(
+      `EQUIVALENCE: ${testCaseResult.title}, ` +
+        `status: ${testCaseResult.status}, ` +
+        `numExpectations: ${testCaseResult.numPassingAsserts}`
+    );
+  }
+}
+
+module.exports = EquivalenceReporter;
diff --git a/scripts/jest/spec-equivalence-reporter/setupTests.js b/scripts/jest/spec-equivalence-reporter/setupTests.js
new file mode 100644
index 00000000000..a561fb4b4d1
--- /dev/null
+++ b/scripts/jest/spec-equivalence-reporter/setupTests.js
@@ -0,0 +1,64 @@
+/*!
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  patchConsoleMethods,
+  resetAllUnexpectedConsoleCalls,
+  assertConsoleLogsCleared,
+} = require('internal-test-utils/consoleMock');
+const spyOn = jest.spyOn;
+
+// Spying on console methods in production builds can mask errors.
+// This is why we added an explicit spyOnDev() helper.
+// It's too easy to accidentally use the more familiar spyOn() helper though,
+// So we disable it entirely.
+// Spying on both dev and prod will require using both spyOnDev() and spyOnProd().
+global.spyOn = function () {
+  throw new Error(
+    'Do not use spyOn(). ' +
+      'It can accidentally hide unexpected errors in production builds. ' +
+      'Use spyOnDev(), spyOnProd(), or spyOnDevAndProd() instead.'
+  );
+};
+
+global.spyOnDev = function (...args) {
+  if (__DEV__) {
+    return spyOn(...args);
+  }
+};
+
+global.spyOnDevAndProd = spyOn;
+
+global.spyOnProd = function (...args) {
+  if (!__DEV__) {
+    return spyOn(...args);
+  }
+};
+
+// Patch the console to assert that all console error/warn/log calls assert.
+patchConsoleMethods({includeLog: !!process.env.CI});
+beforeEach(resetAllUnexpectedConsoleCalls);
+afterEach(assertConsoleLogsCleared);
+
+// TODO: enable this check so we don't forget to reset spyOnX mocks.
+// afterEach(() => {
+//   if (
+//       console[methodName] !== mockMethod &&
+//       !jest.isMockFunction(console[methodName])
+//   ) {
+//     throw new Error(
+//       `Test did not tear down console.${methodName} mock properly.`
+//     );
+//   }
+// });
+
+expect.extend({
+  ...require('../matchers/reactTestMatchers'),
+  ...require('../matchers/toThrow'),
+});
diff --git a/scripts/jest/typescript/jest.d.ts b/scripts/jest/typescript/jest.d.ts
new file mode 100644
index 00000000000..ff450acf533
--- /dev/null
+++ b/scripts/jest/typescript/jest.d.ts
@@ -0,0 +1,72 @@
+declare const __DEV__: boolean;
+declare const __TEST__: boolean;
+declare const __EXTENSION__: boolean;
+
+declare function afterEach(fn: any): any;
+declare function beforeEach(fn: any): any;
+declare function describe(name: string, fn: any): void;
+declare const it: {
+  (name: string, fn: any): void;
+  only: (name: string, fn: any) => void;
+};
+declare function expect(val: any): Expect;
+declare const jest: Jest;
+declare function pit(name: string, fn: any): void;
+declare function spyOnDev(obj: any, key: string): any;
+declare function spyOnDevAndProd(obj: any, key: string): any;
+declare function spyOnProd(obj: any, key: string): any;
+declare function xdescribe(name: string, fn: any): void;
+declare function xit(name: string, fn: any): void;
+
+interface Expect {
+  not: Expect;
+  toThrow(message?: string): void;
+  toThrowError(message?: string): void;
+  toBe(value: any): void;
+  toEqual(value: any): void;
+  toBeFalsy(): void;
+  toBeTruthy(): void;
+  toBeNull(): void;
+  toBeUndefined(): void;
+  toBeDefined(): void;
+  toMatch(regexp: RegExp): void;
+  toContain(string: string): void;
+  toBeCloseTo(number: number, delta: number): void;
+  toBeGreaterThan(number: number): void;
+  toBeLessThan(number: number): void;
+  toBeCalled(): void;
+  toBeCalledWith(...arguments): void;
+  lastCalledWith(...arguments): void;
+}
+
+interface Jest {
+  autoMockOff(): void;
+  autoMockOn(): void;
+  clearAllTimers(): void;
+  dontMock(moduleName: string): void;
+  genMockFromModule(moduleObj: Object): Object;
+  genMockFunction(): MockFunction;
+  genMockFn(): MockFunction;
+  mock(moduleName: string): void;
+  runAllTicks(): void;
+  runAllTimers(): void;
+  runOnlyPendingTimers(): void;
+  setMock(moduleName: string, moduleExports: Object): void;
+}
+
+interface MockFunction {
+  (...arguments): any;
+  mock: {
+    calls: Array<Array<any>>;
+    instances: Array<Object>;
+  };
+  mockClear(): void;
+  mockImplementation(fn: Function): MockFunction;
+  mockImpl(fn: Function): MockFunction;
+  mockReturnThis(): MockFunction;
+  mockReturnValue(value: any): MockFunction;
+  mockReturnValueOnce(value: any): MockFunction;
+}
+
+declare const check: any;
+declare const gen: any;
diff --git a/scripts/jest/typescript/preprocessor.js b/scripts/jest/typescript/preprocessor.js
new file mode 100644
index 00000000000..0f33977a9de
--- /dev/null
+++ b/scripts/jest/typescript/preprocessor.js
@@ -0,0 +1,107 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const ts = require('typescript');
+
+const tsOptions = {
+  module: ts.ModuleKind.CommonJS,
+  jsx: ts.JsxEmit.React,
+};
+
+function formatErrorMessage(error) {
+  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|ReactDOMClient|ReactInternalAct|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.match(libRegex)) {
+        source = fs
+          .readFileSync(require.resolve('typescript/lib/' + filename))
+          .toString();
+      } else if (filename.match(jestRegex)) {
+        source = fs.readFileSync(path.join(__dirname, 'jest.d.ts')).toString();
+      } else if (filename === contentFilename) {
+        source = content;
+      } else if (reactRegex.test(filename)) {
+        // TypeScript will look for the .d.ts files in each ancestor directory,
+        // so there may not be a file at the referenced path as it climbs the
+        // hierarchy.
+        try {
+          source = fs.readFileSync(filename).toString();
+        } catch (e) {
+          if (e.code === 'ENOENT') {
+            return undefined;
+          }
+          throw e;
+        }
+      } else {
+        throw new Error('Unexpected filename ' + filename);
+      }
+      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;
+      } else {
+        throw new Error('Expected only one dependency.');
+      }
+    },
+  };
+  const program = ts.createProgram(
+    ['lib.d.ts', 'jest.d.ts', contentFilename],
+    tsOptions,
+    compilerHost
+  );
+  const emitResult = program.emit();
+  const errors = ts
+    .getPreEmitDiagnostics(program)
+    .concat(emitResult.diagnostics);
+  if (errors.length) {
+    throw new Error(errors.map(formatErrorMessage).join('\n'));
+  }
+  return output;
+}
+
+module.exports = {
+  compile: compile,
+};
diff --git a/scripts/prettier/index.js b/scripts/prettier/index.js
new file mode 100644
index 00000000000..81786aecc08
--- /dev/null
+++ b/scripts/prettier/index.js
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Based on similar script in Jest
+// https://github.com/facebook/jest/blob/a7acc5ae519613647ff2c253dd21933d6f94b47f/scripts/prettier.js
+
+const chalk = require('chalk');
+const glob = require('glob');
+const prettier = require('prettier');
+const fs = require('fs');
+const path = require('path');
+const listChangedFiles = require('../shared/listChangedFiles');
+const prettierConfigPath = require.resolve('../../.prettierrc');
+
+const mode = process.argv[2] || 'check';
+const shouldWrite = mode === 'write' || mode === 'write-changed';
+const onlyChanged = mode === 'check-changed' || mode === 'write-changed';
+
+const changedFiles = onlyChanged ? listChangedFiles() : null;
+
+const prettierIgnoreFilePath = path.join(
+  __dirname,
+  '..',
+  '..',
+  '.prettierignore'
+);
+const prettierIgnore = fs.readFileSync(prettierIgnoreFilePath, {
+  encoding: 'utf8',
+});
+const ignoredPathsListedInPrettierIgnore = prettierIgnore
+  .toString()
+  .replace(/\r\n/g, '\n')
+  .split('\n')
+  .filter(line => !!line && !line.startsWith('#'));
+
+const ignoredPathsListedInPrettierIgnoreInGlobFormat =
+  ignoredPathsListedInPrettierIgnore.map(ignoredPath => {
+    const existsAndDirectory =
+      fs.existsSync(ignoredPath) && fs.lstatSync(ignoredPath).isDirectory();
+
+    if (existsAndDirectory) {
+      return path.join(ignoredPath, '/**');
+    }
+
+    return ignoredPath;
+  });
+
+const files = glob
+  .sync('**/*.{js,jsx,ts,tsx}', {
+    ignore: [
+      '**/*.d.ts',
+      '**/node_modules/**',
+      '**/cjs/**',
+      '**/dist/**',
+      '**/__snapshots__/**',
+      'packages/**/*.ts', // runtime prettier uses Flow parser
+      ...ignoredPathsListedInPrettierIgnoreInGlobFormat,
+    ],
+  })
+  .filter(f => !onlyChanged || changedFiles.has(f));
+
+if (!files.length) {
+  process.exit(0);
+}
+
+async function main() {
+  let didWarn = false;
+  let didError = false;
+
+  await Promise.all(
+    files.map(async file => {
+      const options = await prettier.resolveConfig(file, {
+        config: prettierConfigPath,
+      });
+      try {
+        const input = fs.readFileSync(file, 'utf8');
+        if (shouldWrite) {
+          const output = await prettier.format(input, options);
+          if (output !== input) {
+            fs.writeFileSync(file, output, 'utf8');
+          }
+        } else {
+          const isFormatted = await prettier.check(input, options);
+          if (!isFormatted) {
+            if (!didWarn) {
+              console.log(
+                '\n' +
+                  chalk.red(
+                    `  This project uses prettier to format all JavaScript code.\n`
+                  ) +
+                  chalk.dim(`    Please run `) +
+                  chalk.reset('yarn prettier-all') +
+                  chalk.dim(
+                    ` and add changes to files listed below to your commit:`
+                  ) +
+                  `\n\n`
+              );
+              didWarn = true;
+            }
+            console.log(file);
+          }
+        }
+      } catch (error) {
+        didError = true;
+        console.log('\n\n' + error.message);
+        console.log(file);
+      }
+    })
+  );
+  if (didWarn || didError) {
+    process.exit(1);
+  }
+}
+
+main().catch(error => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/print-warnings/README.md b/scripts/print-warnings/README.md
new file mode 100644
index 00000000000..87cacefec4a
--- /dev/null
+++ b/scripts/print-warnings/README.md
@@ -0,0 +1 @@
+We use this script to extract all messages from `warning()` calls. They don't get substituted with anything in the source or the build. We only do this so we can have a copy of these messages in our internal repository and can spot accidental changes to them.
diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
new file mode 100644
index 00000000000..62f248d9987
--- /dev/null
+++ b/scripts/print-warnings/print-warnings.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  parse,
+  SimpleTraverser: {traverse},
+} = require('hermes-parser');
+const fs = require('fs');
+const through = require('through2');
+const gs = require('glob-stream');
+
+const {evalStringConcat} = require('../shared/evalToString');
+
+const warnings = new Set();
+
+function transform(file, enc, cb) {
+  fs.readFile(file.path, 'utf8', function (err, source) {
+    if (err) {
+      cb(err);
+      return;
+    }
+
+    let ast;
+    try {
+      ast = parse(source);
+    } catch (error) {
+      console.error('Failed to parse source file:', file.path);
+      throw error;
+    }
+
+    traverse(ast, {
+      enter() {},
+      leave(node) {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+        const callee = node.callee;
+        if (
+          callee.type === 'MemberExpression' &&
+          callee.object.type === 'Identifier' &&
+          callee.object.name === 'console' &&
+          callee.property.type === 'Identifier' &&
+          (callee.property.name === 'warn' || callee.property.name === 'error')
+        ) {
+          // warning messages can be concatenated (`+`) at runtime, so here's
+          // a trivial partial evaluator that interprets the literal value
+          try {
+            const warningMsgLiteral = evalStringConcat(node.arguments[0]);
+            warnings.add(warningMsgLiteral);
+          } catch {
+            // Silently skip over this call. We have a lint rule to enforce
+            // that all calls are extractable, so if this one fails, assume
+            // it's intentional.
+          }
+        }
+      },
+    });
+
+    cb(null);
+  });
+}
+
+gs([
+  'packages/**/*.js',
+  '!packages/*/npm/**/*.js',
+  '!packages/react-devtools*/**/*.js',
+  '!**/__tests__/**/*.js',
+  '!**/__mocks__/**/*.js',
+  '!**/node_modules/**/*.js',
+]).pipe(
+  through.obj(transform, cb => {
+    const warningsArray = Array.from(warnings);
+    warningsArray.sort();
+    process.stdout.write(
+      `/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ * @noformat
+ * @oncall react_core
+ */
+
+export default ${JSON.stringify(warningsArray, null, 2)};
+`
+    );
+    cb();
+  })
+);
diff --git a/scripts/react-compiler/build-compiler.sh b/scripts/react-compiler/build-compiler.sh
new file mode 100755
index 00000000000..f7325864626
--- /dev/null
+++ b/scripts/react-compiler/build-compiler.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+if [[ "$REACT_CLASS_EQUIVALENCE_TEST" == "true" ]]; then
+  exit 0
+fi
+
+echo "Building babel-plugin-react-compiler..."
+yarn --cwd compiler workspace babel-plugin-react-compiler build --dts
diff --git a/scripts/react-compiler/link-compiler.sh b/scripts/react-compiler/link-compiler.sh
new file mode 100755
index 00000000000..98720968878
--- /dev/null
+++ b/scripts/react-compiler/link-compiler.sh
@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+if [[ "$REACT_CLASS_EQUIVALENCE_TEST" == "true" ]]; then
+  exit 0
+fi
+
+HERE=$(pwd)
+
+cd compiler/packages/babel-plugin-react-compiler && yarn --silent link && cd "$HERE"
+
+yarn --silent link babel-plugin-react-compiler
diff --git a/scripts/release/.gitignore b/scripts/release/.gitignore
new file mode 100644
index 00000000000..c8d23da2ed4
--- /dev/null
+++ b/scripts/release/.gitignore
@@ -0,0 +1 @@
+.progress-estimator
\ No newline at end of file
diff --git a/scripts/release/README.md b/scripts/release/README.md
new file mode 100644
index 00000000000..77042a5dac8
--- /dev/null
+++ b/scripts/release/README.md
@@ -0,0 +1,188 @@
+# React Release Scripts
+
+This document describes how to prepare and publish a release manually, using the command line.
+
+However, most of our releases are actually *prereleases* that get continuously shipped via CI. Our automated prerelease channels are preferred whenever possible, because if they accidentally break, it won't affect production users.
+
+Before proceeding, consider your motivation:
+
+- **"I want to share experimental features with collaborators."** After your code lands in GitHub (behind an experimental feature flag), it will be automatically published via CI within the next weekday. So usually, all you have to do is wait.
+- **"But I want to publish it now!"** You can [trigger the CI job to run automatically](#trigger-an-automated-prerelease).
+- **"I want to publish a stable release with a real version number"** Refer to the ["Publishing a Stable Release"](#publishing-a-stable-release) section. If this is your first time running a stable release, consult with another team member before proceeding.
+- **"I have some special use case that's not explicitly mentioned here."** Read the rest of this document, and consult with another team member before proceeding.
+
+# Process
+
+If this is your first time running the release scripts, go to the `scripts/release` directory and run `yarn` to install the dependencies.
+
+The release process consists of several phases, each one represented by one of the scripts below.
+
+A typical release cycle goes like this:
+1. When a commit is pushed to the React repo, [GitHub Actions](https://github.com/facebook/react/actions) will build all release bundles and run unit tests against both the source code and the built bundles.
+2. Each weekday, an automated CI cron job publishes prereleases to the `next` and `experimental` channels, from tip of the main branch.
+   1. You can also [trigger an automated prerelease via the GitHub UI](#trigger-an-automated-prerelease), instead of waiting until the next time the cron job runs.
+   2. For advanced cases, you can [**manually prepare and publish to the `next` channel**](#publishing-release) using the [`prepare-release-from-ci`](#prepare-release-from-ci) and [`publish`](#publish) scripts; or to the [**`experimental` channel**](#publishing-an-experimental-release) using the same scripts (but different build artifacts).
+3. Finally, a "next" release can be [**promoted to stable**](#publishing-a-stable-release)<sup>1</sup> using the [`prepare-release-from-npm`](#prepare-release-from-npm) and [`publish`](#publish) scripts. (This process is always manual.)
+
+The high level process of creating releases is [documented below](#process). Individual scripts are documented as well:
+* [`build-release-locally`](#build-release-locally): Build a release locally from the checked out source code.
+* [`prepare-release-from-ci`](#prepare-release-from-ci): Download a pre-built release from CI.
+* [`prepare-release-from-npm`](#prepare-release-from-npm): Prepare an NPM "next" release to be published as a "stable" release.
+* [`publish`](#publish): Publish the downloaded (or prepared) release to NPM.
+
+<sup>1. [**Creating a patch release**](#creating-a-patch-release) has a slightly different process than a major/minor release.</sup>
+
+## Trigger an Automated Prerelease
+
+If your code lands in the main branch, it will be automatically published to the prerelease channels within the next weekday. However, if you want to immediately publish a prerelease, you can trigger the job to run immediately via the GitHub UI:
+
+1. Wait for the commit you want to release to finish its [(Runtime) Build and Test workflow](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml), as the prerelease script needs to download the build from that workflow.
+2. Copy the full git sha of whichever commit you are trying to release
+3. Go to https://github.com/facebook/react/actions/workflows/runtime_prereleases_manual.yml
+4. Paste the git sha into the "Run workflow" dropdown
+5. Let the job finish and it will be released on npm
+
+This will grab the specified revision on the main branch and publish it to the Next and Experimental channels.
+## Publishing Without Tags
+
+The sections below include meaningful `--tags` in the instructions. However, keep in mind that **the `--tags` arguments is optional**, and you can omit it if you don't want to tag the release on npm at all. This can be useful when preparing breaking changes.
+
+## Publishing Next
+
+"Next" builds are meant to be lightweight and published often. In most cases, they can be published using artifacts built by Circle CI.
+
+To prepare a build for a particular commit:
+1. Choose a commit from [the commit log](https://github.com/facebook/react/commits/main).
+2. Copy the SHA (by clicking the 📋 button)
+5. Run the [`prepare-release-from-ci`](#prepare-release-from-ci) script with the SHA <sup>1</sup> you found:
+```sh
+scripts/release/prepare-release-from-ci.js -r stable --commit=0e526bc
+```
+
+Once the build has been checked out and tested locally, you're ready to publish it:
+```sh
+scripts/release/publish.js --tags next
+```
+
+<sup>1: You can omit the `commit` param if you just want to release the latest commit as to "next".</sup>
+
+## Publishing an Experimental Release
+
+Experimental releases are special because they have additional features turned on.
+
+The steps for publishing an experimental release are almost the same as for publishing a "next" release except for the release channel (`-r`) flag.
+
+```sh
+scripts/release/prepare-release-from-ci.js -r experimental --commit=0e526bc
+```
+
+Once the build has been checked out and tested locally, you're ready to publish it. When publishing an experimental release, use the `experimental` tag:
+
+```sh
+scripts/release/publish.js --tags experimental
+```
+
+## Publishing a Stable Release
+
+Stable releases should always be created from the "next" channel. This encourages better testing of the actual release artifacts and reduces the chance of unintended changes accidentally being included in a stable release.
+
+To prepare a stable release, choose a "next" version and run the [`prepare-release-from-npm`](#prepare-release-from-npm) script <sup>1</sup>:
+
+```sh
+scripts/release/prepare-release-from-npm.js --version=0.0.0-241c4467e-20200129
+```
+
+This script will prompt you to select stable version numbers for each of the packages. It will update the package JSON versions (and dependencies) based on the numbers you select.
+
+Once this step is complete, you're ready to publish the release:
+
+```sh
+scripts/release/publish.js --tags latest
+
+# Or, if you want to bump "next" as well:
+scripts/release/publish.js --tags latest next
+```
+
+After successfully publishing the release, follow the on-screen instructions to ensure that all of the appropriate post-release steps are executed.
+
+<sup>1: You can omit the `version` param if you just want to promote the latest "next" candidate to stable.</sup>
+
+## Creating a Patch Release
+
+Patch releases should always be created by branching from a previous release. This reduces the likelihood of unstable changes being accidentally included in the release.
+
+Begin by creating a branch from the previous git tag<sup>1</sup>:
+
+```sh
+git checkout -b 16.8.3 v16.8.2
+```
+
+Next cherry pick any changes from main that you want to include in the release:
+
+```sh
+git cherry-pick <commit-hash>
+```
+
+Once you have cherry picked all of the commits you want to include in the release, push your feature branch and create a Pull Request (so that Circle CI will create a build):
+
+```sh
+git push origin 16.8.3
+```
+
+Once CI is complete, follow the regular [**next**](#publishing-release) and [**promote to stable**](#publishing-a-stable-release) processes.
+
+<sup>1: The `build-info.json` artifact can also be used to identify the appropriate commit (e.g. [unpkg.com/react@16.8.3/build-info.json](https://unpkg.com/react@16.8.3/build-info.json) shows us that react version 16.8.3 was created from commit [`29b7b775f`](https://github.com/facebook/react/commit/29b7b775f)).</sup>
+
+# Scripts
+
+## `build-release-locally`
+Creates a "next" build from the current (local) Git revision.
+
+**This script is an escape hatch.** It allows a release to be created without pushing a commit to be verified by Circle CI. **It does not run any automated unit tests.** Testing is solely the responsibility of the release engineer.
+
+Note that this script git-archives the React repo (at the current revision) to a temporary directory before building, so **uncommitted changes are not included in the build**.
+
+#### Example usage
+To create a build from the current branch and revision:
+```sh
+scripts/release/build-release-locally.js
+```
+
+## `prepare-release-from-ci`
+Downloads build artifacts from Circle CI in preparation to be published to NPM as either a "next" or "experimental" release.
+
+All artifacts built by Circle CI have already been unit-tested (both source and bundles) but these candidates should **always be manually tested** before being published. Upon completion, this script prints manual testing instructions.
+
+#### Example usage
+To prepare the artifacts created by Circle CI for commit [0e526bc](https://github.com/facebook/react/commit/0e526bc) you would run:
+```sh
+scripts/release/prepare-release-from-ci.js --commit=0e526bc -r stable
+```
+
+## `prepare-release-from-npm`
+Checks out a "next" release from NPM and prepares it to be published as a stable release.
+
+This script prompts for new (stable) release versions for each public package and updates the package contents (both `package.json` and inline version numbers) to match. It also updates inter-package dependencies to account for the new versions.
+
+"Next" releases have already been tested but it is still a good idea to **manually test and verify a release** before publishing to ensure that e.g. version numbers are correct. Upon completion, this script prints manual testing instructions.
+
+#### Example usage
+To promote the "next" release `0.0.0-241c4467e-20200129` (aka commit [241c4467e](https://github.com/facebook/react/commit/241c4467e)) to stable:
+```sh
+scripts/release/prepare-release-from-npm.js --version=0.0.0-241c4467e-20200129
+```
+
+## `publish`
+Publishes the current contents of `build/node_modules` to NPM.
+
+This script publishes each public package to NPM and updates the specified tag(s) to match. **It does not test or verify the local package contents before publishing**. This should be done by the release engineer prior to running the script.
+
+Upon completion, this script provides instructions for tagging the Git commit that the package was created from and updating the release CHANGELOG.
+
+**Specify a `--dry` flag when running this script if you want to skip the NPM-publish step.** In this event, the script will print the NPM commands but it will not actually run them.
+
+#### Example usage
+To publish a release to NPM as both `next` and `latest`:
+```sh
+scripts/release/publish.js --tags latest next
+```
diff --git a/scripts/release/build-release-locally-commands/add-build-info-json.js b/scripts/release/build-release-locally-commands/add-build-info-json.js
new file mode 100644
index 00000000000..5bae2919535
--- /dev/null
+++ b/scripts/release/build-release-locally-commands/add-build-info-json.js
@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+'use strict';
+
+// IMPORTANT:
+// Changes below should be mirrored in ../ci-add-build-info-json.js
+
+const {existsSync} = require('fs');
+const {writeJson, readJson} = require('fs-extra');
+const {join} = require('path');
+const {getPublicPackages, logPromise} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({branch, checksum, commit, reactVersion, tempDirectory}) => {
+  const isExperimental = reactVersion.includes('experimental');
+  const packages = getPublicPackages(isExperimental);
+  const packagesDir = join(tempDirectory, 'packages');
+
+  const buildInfoJSON = {
+    branch,
+    buildNumber: null,
+    checksum,
+    commit,
+    environment: 'local',
+    reactVersion,
+  };
+
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const packagePath = join(packagesDir, packageName);
+    const packageJSON = await readJson(join(packagePath, 'package.json'));
+
+    // Verify all public packages include "build-info.json" in the files array.
+    if (!packageJSON.files.includes('build-info.json')) {
+      console.error(
+        theme`{error ${packageName} must include "build-info.json" in files array.}`
+      );
+      process.exit(1);
+    }
+
+    // Add build info JSON to package.
+    if (existsSync(join(packagePath, 'npm'))) {
+      const buildInfoJSONPath = join(packagePath, 'npm', 'build-info.json');
+      await writeJson(buildInfoJSONPath, buildInfoJSON, {spaces: 2});
+    }
+  }
+};
+
+module.exports = async params => {
+  return logPromise(run(params), 'Adding build metadata to packages');
+};
diff --git a/scripts/release/build-release-locally-commands/build-artifacts.js b/scripts/release/build-release-locally-commands/build-artifacts.js
new file mode 100644
index 00000000000..0b458048220
--- /dev/null
+++ b/scripts/release/build-release-locally-commands/build-artifacts.js
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {join} = require('path');
+const {logPromise} = require('../utils');
+const shell = require('shelljs');
+
+const run = async ({cwd, dry, tempDirectory}) => {
+  const defaultOptions = {
+    cwd: tempDirectory,
+  };
+
+  await exec('yarn install', defaultOptions);
+  await exec('yarn build -- --extract-errors', defaultOptions);
+
+  const tempNodeModulesPath = join(tempDirectory, 'build', 'node_modules');
+  const buildPath = join(cwd, 'build');
+
+  shell.cp('-r', tempNodeModulesPath, buildPath);
+};
+
+module.exports = async params => {
+  return logPromise(run(params), 'Building artifacts', 600000);
+};
diff --git a/scripts/release/build-release-locally-commands/confirm-automated-testing.js b/scripts/release/build-release-locally-commands/confirm-automated-testing.js
new file mode 100644
index 00000000000..a409c9212aa
--- /dev/null
+++ b/scripts/release/build-release-locally-commands/confirm-automated-testing.js
@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {confirm} = require('../utils');
+const theme = require('../theme');
+
+const run = async () => {
+  clear();
+
+  console.log(
+    theme.caution(
+      'This script does not run any automated tests.' +
+        'You should run them manually before creating a "next" release.'
+    )
+  );
+
+  await confirm('Do you want to proceed?');
+
+  clear();
+};
+
+module.exports = run;
diff --git a/scripts/release/build-release-locally-commands/copy-repo-to-temp-directory.js b/scripts/release/build-release-locally-commands/copy-repo-to-temp-directory.js
new file mode 100644
index 00000000000..fe8ce357faf
--- /dev/null
+++ b/scripts/release/build-release-locally-commands/copy-repo-to-temp-directory.js
@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {join} = require('path');
+const {tmpdir} = require('os');
+const {logPromise} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({commit, cwd, tempDirectory}) => {
+  const directory = `react-${commit}`;
+  const temp = tmpdir();
+
+  if (tempDirectory !== join(tmpdir(), directory)) {
+    throw Error(`Unexpected temporary directory "${tempDirectory}"`);
+  }
+
+  await exec(`rm -rf ${directory}`, {cwd: temp});
+  await exec(`git archive --format=tar --output=${temp}/react.tgz ${commit}`, {
+    cwd,
+  });
+  await exec(`mkdir ${directory}`, {cwd: temp});
+  await exec(`tar -xf ./react.tgz -C ./${directory}`, {cwd: temp});
+};
+
+module.exports = async params => {
+  return logPromise(
+    run(params),
+    theme`Copying React repo to temporary directory ({path ${params.tempDirectory}})`
+  );
+};
diff --git a/scripts/release/build-release-locally-commands/npm-pack-and-unpack.js b/scripts/release/build-release-locally-commands/npm-pack-and-unpack.js
new file mode 100644
index 00000000000..3f79373ced6
--- /dev/null
+++ b/scripts/release/build-release-locally-commands/npm-pack-and-unpack.js
@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {join} = require('path');
+const {exec} = require('child-process-promise');
+const {readdirSync} = require('fs');
+const {readJsonSync} = require('fs-extra');
+const {logPromise} = require('../utils');
+
+const run = async ({cwd, dry, tempDirectory}) => {
+  // Cleanup from previous build.
+  await exec(`rm -rf ./build`, {cwd});
+
+  // NPM pack all built packages.
+  // We do this to ensure that the package.json files array is correct.
+  const builtPackages = readdirSync(join(tempDirectory, 'build/node_modules/'));
+  for (let i = 0; i < builtPackages.length; i++) {
+    await exec(`npm pack ./${builtPackages[i]}`, {
+      cwd: `${tempDirectory}/build/node_modules/`,
+    });
+  }
+
+  await exec('mkdir build', {cwd});
+  await exec('mkdir build/node_modules', {cwd});
+  await exec(
+    `cp -r ${tempDirectory}/build/node_modules/*.tgz ./build/node_modules/`,
+    {cwd}
+  );
+
+  // Unpack packages and prepare to publish.
+  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/`,
+      {cwd}
+    );
+    const packageJSON = readJsonSync(
+      join(cwd, `./build/node_modules/package/package.json`)
+    );
+    await exec(
+      `mv ./build/node_modules/package ./build/node_modules/${packageJSON.name}`,
+      {cwd}
+    );
+  }
+
+  // Cleanup.
+  await exec(`rm ./build/node_modules/*.tgz`, {cwd});
+};
+
+module.exports = async params => {
+  return logPromise(run(params), 'Packing artifacts');
+};
diff --git a/scripts/release/build-release-locally-commands/update-version-numbers.js b/scripts/release/build-release-locally-commands/update-version-numbers.js
new file mode 100644
index 00000000000..b2f3b5d3a92
--- /dev/null
+++ b/scripts/release/build-release-locally-commands/update-version-numbers.js
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {logPromise, updateVersionsForNext} = require('../utils');
+const theme = require('../theme');
+
+module.exports = async ({reactVersion, tempDirectory, version}) => {
+  return logPromise(
+    updateVersionsForNext(tempDirectory, reactVersion, version),
+    theme`Updating version numbers ({version ${version}})`
+  );
+};
diff --git a/scripts/release/build-release-locally.js b/scripts/release/build-release-locally.js
new file mode 100755
index 00000000000..7b0a9e6e6f1
--- /dev/null
+++ b/scripts/release/build-release-locally.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {tmpdir} = require('os');
+const {join} = require('path');
+const {getBuildInfo, handleError} = require('./utils');
+
+// This script is an escape hatch!
+// It exists for special case manual builds.
+// The typical suggested release process is to create a "next" build from a CI artifact.
+// This build script is optimized for speed and simplicity.
+// It doesn't run all of the tests that the CI environment runs.
+// You're expected to run those manually before publishing a release.
+
+const addBuildInfoJSON = require('./build-release-locally-commands/add-build-info-json');
+const buildArtifacts = require('./build-release-locally-commands/build-artifacts');
+const confirmAutomatedTesting = require('./build-release-locally-commands/confirm-automated-testing');
+const copyRepoToTempDirectory = require('./build-release-locally-commands/copy-repo-to-temp-directory');
+const npmPackAndUnpack = require('./build-release-locally-commands/npm-pack-and-unpack');
+const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
+const updateVersionNumbers = require('./build-release-locally-commands/update-version-numbers');
+
+const run = async () => {
+  try {
+    const cwd = join(__dirname, '..', '..');
+    const {branch, checksum, commit, reactVersion, version} =
+      await getBuildInfo();
+    const tempDirectory = join(tmpdir(), `react-${commit}`);
+    const params = {
+      branch,
+      checksum,
+      commit,
+      cwd,
+      reactVersion,
+      tempDirectory,
+      version,
+    };
+
+    await confirmAutomatedTesting(params);
+    await copyRepoToTempDirectory(params);
+    await updateVersionNumbers(params);
+    await addBuildInfoJSON(params);
+    await buildArtifacts(params);
+    await npmPackAndUnpack(params);
+    await printPrereleaseSummary(params, false);
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+run();
diff --git a/scripts/release/build-release.js b/scripts/release/build-release.js
new file mode 100644
index 00000000000..7b0a9e6e6f1
--- /dev/null
+++ b/scripts/release/build-release.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {tmpdir} = require('os');
+const {join} = require('path');
+const {getBuildInfo, handleError} = require('./utils');
+
+// This script is an escape hatch!
+// It exists for special case manual builds.
+// The typical suggested release process is to create a "next" build from a CI artifact.
+// This build script is optimized for speed and simplicity.
+// It doesn't run all of the tests that the CI environment runs.
+// You're expected to run those manually before publishing a release.
+
+const addBuildInfoJSON = require('./build-release-locally-commands/add-build-info-json');
+const buildArtifacts = require('./build-release-locally-commands/build-artifacts');
+const confirmAutomatedTesting = require('./build-release-locally-commands/confirm-automated-testing');
+const copyRepoToTempDirectory = require('./build-release-locally-commands/copy-repo-to-temp-directory');
+const npmPackAndUnpack = require('./build-release-locally-commands/npm-pack-and-unpack');
+const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
+const updateVersionNumbers = require('./build-release-locally-commands/update-version-numbers');
+
+const run = async () => {
+  try {
+    const cwd = join(__dirname, '..', '..');
+    const {branch, checksum, commit, reactVersion, version} =
+      await getBuildInfo();
+    const tempDirectory = join(tmpdir(), `react-${commit}`);
+    const params = {
+      branch,
+      checksum,
+      commit,
+      cwd,
+      reactVersion,
+      tempDirectory,
+      version,
+    };
+
+    await confirmAutomatedTesting(params);
+    await copyRepoToTempDirectory(params);
+    await updateVersionNumbers(params);
+    await addBuildInfoJSON(params);
+    await buildArtifacts(params);
+    await npmPackAndUnpack(params);
+    await printPrereleaseSummary(params, false);
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+run();
diff --git a/scripts/release/check-release-dependencies.js b/scripts/release/check-release-dependencies.js
new file mode 100644
index 00000000000..b009a53e1b0
--- /dev/null
+++ b/scripts/release/check-release-dependencies.js
@@ -0,0 +1,59 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const fs = require('fs');
+const semver = require('semver');
+
+const {stablePackages} = require('../../ReactVersions');
+
+function main() {
+  if (!fs.existsSync('./build/oss-stable-semver')) {
+    throw new Error('No build artifacts found');
+  }
+
+  const packages = new Map();
+  for (const packageName in stablePackages) {
+    if (!fs.existsSync(`build/oss-stable-semver/${packageName}/package.json`)) {
+      throw new Error(`${packageName}`);
+    } else {
+      const info = JSON.parse(
+        fs.readFileSync(`build/oss-stable-semver/${packageName}/package.json`)
+      );
+      packages.set(info.name, info);
+    }
+  }
+
+  for (const [packageName, info] of packages) {
+    if (info.dependencies) {
+      for (const [depName, depRange] of Object.entries(info.dependencies)) {
+        if (packages.has(depName)) {
+          const releaseVersion = packages.get(depName).version;
+          checkDependency(packageName, depName, releaseVersion, depRange);
+        }
+      }
+    }
+
+    if (info.peerDependencies) {
+      for (const [depName, depRange] of Object.entries(info.peerDependencies)) {
+        if (packages.has(depName)) {
+          const releaseVersion = packages.get(depName).version;
+          checkDependency(packageName, depName, releaseVersion, depRange);
+        }
+      }
+    }
+  }
+}
+
+function checkDependency(packageName, depName, version, range) {
+  if (!semver.satisfies(version, range)) {
+    throw new Error(
+      `${packageName} has an invalid dependency on ${depName}: ${range}` +
+        '\n\n' +
+        'Actual version is: ' +
+        version
+    );
+  }
+}
+
+main();
diff --git a/scripts/release/ci-npmrc b/scripts/release/ci-npmrc
new file mode 100644
index 00000000000..ae643592e76
--- /dev/null
+++ b/scripts/release/ci-npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
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 00000000000..6e7454a5a86
--- /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 = async ({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 00000000000..db1804e9c72
--- /dev/null
+++ b/scripts/release/download-experimental-build.js
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {join, relative} = require('path');
+const {handleError} = require('./utils');
+const yargs = require('yargs');
+const clear = require('clear');
+const theme = require('./theme');
+const {
+  downloadBuildArtifacts,
+} = require('./shared-commands/download-build-artifacts');
+
+const argv = yargs.wrap(yargs.terminalWidth()).options({
+  releaseChannel: {
+    alias: 'r',
+    describe: 'Download the given release channel.',
+    requiresArg: true,
+    type: 'string',
+    choices: ['experimental', 'stable'],
+    default: 'experimental',
+  },
+  commit: {
+    alias: 'c',
+    describe: 'Commit hash to download.',
+    requiresArg: true,
+    demandOption: true,
+    type: 'string',
+  },
+  noVerify: {
+    describe: 'Skip verification',
+    requiresArg: false,
+    type: 'boolean',
+    default: false,
+  },
+}).argv;
+
+function printSummary(commit) {
+  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}} --commit={commit ${commit}}
+  `;
+
+  console.log(message.replace(/\n +/g, '\n').trim());
+}
+
+const main = async () => {
+  const {commit, releaseChannel, noVerify} = argv;
+  try {
+    await downloadBuildArtifacts({
+      commit,
+      releaseChannel,
+      noVerify,
+    });
+    printSummary(argv.commit);
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+main();
diff --git a/scripts/release/package.json b/scripts/release/package.json
new file mode 100644
index 00000000000..e1a1fbd8bd1
--- /dev/null
+++ b/scripts/release/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-release-script",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {},
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^2.1.0",
+    "child-process-promise": "^2.2.1",
+    "clear": "^0.1.0",
+    "cli-spinners": "^1.1.0",
+    "command-line-args": "^4.0.7",
+    "command-line-usage": "^4.0.1",
+    "diff": "^3.5.0",
+    "folder-hash": "^2.1.2",
+    "fs-extra": "^4.0.2",
+    "log-update": "^2.1.0",
+    "progress-estimator": "^0.2.1",
+    "prompt-promise": "^1.0.3",
+    "puppeteer": "^1.11.0",
+    "pushstate-server": "^3.0.1",
+    "semver": "^5.4.1"
+  }
+}
diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
new file mode 100755
index 00000000000..19943e36d47
--- /dev/null
+++ b/scripts/release/prepare-release-from-ci.js
@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {join} = require('path');
+const {addDefaultParamValue, handleError} = require('./utils');
+
+const {
+  downloadBuildArtifacts,
+} = require('./shared-commands/download-build-artifacts');
+const parseParams = require('./shared-commands/parse-params');
+const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
+const testPackagingFixture = require('./shared-commands/test-packaging-fixture');
+
+const run = async () => {
+  try {
+    addDefaultParamValue(null, '--commit', 'main');
+
+    const params = await parseParams();
+    params.cwd = join(__dirname, '..', '..');
+
+    await downloadBuildArtifacts({
+      commit: params.commit,
+      releaseChannel: params.releaseChannel ?? process.env.RELEASE_CHANNEL,
+    });
+
+    if (!params.skipTests) {
+      await testPackagingFixture(params);
+    }
+
+    const isLatestRelease = params.releaseChannel === 'latest';
+    await printPrereleaseSummary(params, isLatestRelease);
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+run();
diff --git a/scripts/release/prepare-release-from-npm-commands/check-out-packages.js b/scripts/release/prepare-release-from-npm-commands/check-out-packages.js
new file mode 100644
index 00000000000..ea7d1252a06
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm-commands/check-out-packages.js
@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {existsSync} = require('fs');
+const {join} = require('path');
+const {execRead, logPromise} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({cwd, local, packages, version}) => {
+  if (local) {
+    // Sanity test
+    if (!existsSync(join(cwd, 'build', 'node_modules', 'react'))) {
+      console.error(theme.error`No local build exists.`);
+      process.exit(1);
+    }
+    return;
+  }
+
+  if (!existsSync(join(cwd, 'build'))) {
+    await exec(`mkdir ./build`, {cwd});
+  }
+
+  // Cleanup from previous builds
+  await exec(`rm -rf ./build/node_modules*`, {cwd});
+  await exec(`mkdir ./build/node_modules`, {cwd});
+
+  const nodeModulesPath = join(cwd, 'build/node_modules');
+
+  // Checkout "next" release from NPM for all local packages
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+
+    // We previously used `npm install` for this,
+    // but in addition to checking out a lot of transient dependencies that we don't care about–
+    // the NPM client also added a lot of registry metadata to the package JSONs,
+    // which we had to remove as a separate step before re-publishing.
+    // It's easier for us to just download and extract the tarball.
+    const url = await execRead(
+      `npm view ${packageName}@${version} dist.tarball`
+    );
+    const filePath = join(nodeModulesPath, `${packageName}.tgz`);
+    const packagePath = join(nodeModulesPath, `${packageName}`);
+    const tempPackagePath = join(nodeModulesPath, 'package');
+
+    // Download packages from NPM and extract them to the expected build locations.
+    await exec(`curl -L ${url} > ${filePath}`, {cwd});
+    await exec(`tar -xvzf ${filePath} -C ${nodeModulesPath}`, {cwd});
+    await exec(`mv ${tempPackagePath} ${packagePath}`, {cwd});
+    await exec(`rm ${filePath}`, {cwd});
+  }
+};
+
+module.exports = async params => {
+  return logPromise(
+    run(params),
+    theme`Checking out "next" from NPM {version ${params.version}}`
+  );
+};
diff --git a/scripts/release/prepare-release-from-npm-commands/confirm-stable-version-numbers.js b/scripts/release/prepare-release-from-npm-commands/confirm-stable-version-numbers.js
new file mode 100644
index 00000000000..6bf49132149
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm-commands/confirm-stable-version-numbers.js
@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const prompt = require('prompt-promise');
+const semver = require('semver');
+const theme = require('../theme');
+const {confirm} = require('../utils');
+
+const run = async ({ci, skipPackages}, versionsMap) => {
+  const groupedVersionsMap = new Map();
+
+  // Group packages with the same source versions.
+  // We want these to stay lock-synced anyway.
+  // This will require less redundant input from the user later,
+  // and reduce the likelihood of human error (entering the wrong version).
+  versionsMap.forEach((version, packageName) => {
+    if (!groupedVersionsMap.has(version)) {
+      groupedVersionsMap.set(version, [packageName]);
+    } else {
+      groupedVersionsMap.get(version).push(packageName);
+    }
+  });
+
+  if (ci !== true) {
+    // Prompt user to confirm or override each version group if not running in CI.
+    const entries = [...groupedVersionsMap.entries()];
+    for (let i = 0; i < entries.length; i++) {
+      const [bestGuessVersion, packages] = entries[i];
+      const packageNames = packages.map(name => theme.package(name)).join(', ');
+
+      let version = bestGuessVersion;
+      if (
+        skipPackages.some(skipPackageName => packages.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 {
+        semver(version);
+
+        packages.forEach(packageName => {
+          versionsMap.set(packageName, version);
+        });
+      } catch (error) {
+        console.log(
+          theme`{spinnerError ✘} Version {version ${version}} is invalid.`
+        );
+
+        // Prompt again
+        i--;
+      }
+    }
+  }
+};
+
+// Run this directly because it's fast,
+// and logPromise would interfere with console prompting.
+module.exports = run;
diff --git a/scripts/release/prepare-release-from-npm-commands/get-latest-next-version.js b/scripts/release/prepare-release-from-npm-commands/get-latest-next-version.js
new file mode 100644
index 00000000000..f40730d119a
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm-commands/get-latest-next-version.js
@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {execRead, logPromise} = require('../utils');
+
+const run = async () => {
+  const version = await execRead('npm info react@canary version');
+
+  return version;
+};
+
+module.exports = async params => {
+  return logPromise(run(params), 'Determining latest "canary" release version');
+};
diff --git a/scripts/release/prepare-release-from-npm-commands/guess-stable-version-numbers.js b/scripts/release/prepare-release-from-npm-commands/guess-stable-version-numbers.js
new file mode 100644
index 00000000000..c0072b66371
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm-commands/guess-stable-version-numbers.js
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const semver = require('semver');
+const {execRead, logPromise} = require('../utils');
+
+const run = async (
+  {cwd, packages, skipPackages, ci, publishVersion},
+  versionsMap
+) => {
+  const branch = await execRead('git branch | grep \\* | cut -d " " -f2', {
+    cwd,
+  });
+
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+
+    if (ci === true) {
+      if (publishVersion != null) {
+        versionsMap.set(packageName, publishVersion);
+      } else {
+        console.error(
+          'When running in CI mode, a publishVersion must be supplied'
+        );
+        process.exit(1);
+      }
+    } else {
+      try {
+        // 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`);
+
+        if (skipPackages.includes(packageName)) {
+          versionsMap.set(packageName, version);
+        } else {
+          const {major, minor, patch} = semver(version);
+
+          // Guess the next version by incrementing patch.
+          // The script will confirm this later.
+          // By default, new releases from mains should increment the minor version number,
+          // and patch releases should be done from branches.
+          if (branch === 'main') {
+            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,
+        // we'll require a version number to be entered later.
+        versionsMap.set(packageName, null);
+      }
+    }
+  }
+};
+
+module.exports = async (params, versionsMap) => {
+  return logPromise(
+    run(params, versionsMap),
+    'Guessing stable version numbers'
+  );
+};
diff --git a/scripts/release/prepare-release-from-npm-commands/parse-params.js b/scripts/release/prepare-release-from-npm-commands/parse-params.js
new file mode 100644
index 00000000000..10dbfb4e51f
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm-commands/parse-params.js
@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const commandLineArgs = require('command-line-args');
+const {splitCommaParams} = require('../utils');
+
+const paramDefinitions = [
+  {
+    name: 'local',
+    type: Boolean,
+    description:
+      'Skip NPM and use the build already present in "build/node_modules".',
+    defaultValue: false,
+  },
+  {
+    name: 'onlyPackages',
+    type: String,
+    multiple: true,
+    description: 'Packages to include in publishing',
+    defaultValue: [],
+  },
+  {
+    name: 'skipPackages',
+    type: String,
+    multiple: true,
+    description: 'Packages to exclude from publishing',
+    defaultValue: [],
+  },
+  {
+    name: 'skipTests',
+    type: Boolean,
+    description: 'Skip automated fixture tests.',
+    defaultValue: false,
+  },
+  {
+    name: 'version',
+    type: String,
+    description:
+      'Version of published "next" release (e.g. 0.0.0-0e526bcec-20210202)',
+  },
+  {
+    name: 'publishVersion',
+    type: String,
+    description: 'Version to publish',
+  },
+  {
+    name: 'ci',
+    type: Boolean,
+    description: 'Run in automated environment, without interactive prompts.',
+    defaultValue: false,
+  },
+];
+
+module.exports = () => {
+  const params = commandLineArgs(paramDefinitions);
+
+  splitCommaParams(params.skipPackages);
+  splitCommaParams(params.onlyPackages);
+
+  return params;
+};
diff --git a/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js b/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js
new file mode 100644
index 00000000000..eef68255e2b
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js
@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {readFileSync, writeFileSync} = require('fs');
+const {readJson, writeJson} = require('fs-extra');
+const {join, relative} = require('path');
+const {confirm, execRead, printDiff} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({cwd, packages, version, ci}, versionsMap) => {
+  const nodeModulesPath = join(cwd, 'build/node_modules');
+
+  // Cache all package JSONs for easy lookup below.
+  const sourcePackageJSONs = new Map();
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const sourcePackageJSON = await readJson(
+      join(cwd, 'packages', packageName, 'package.json')
+    );
+    sourcePackageJSONs.set(packageName, sourcePackageJSON);
+  }
+
+  const updateDependencies = async (targetPackageJSON, key) => {
+    const targetDependencies = targetPackageJSON[key];
+    if (targetDependencies) {
+      const sourceDependencies = sourcePackageJSONs.get(targetPackageJSON.name)[
+        key
+      ];
+
+      for (let i = 0; i < packages.length; i++) {
+        const dependencyName = packages[i];
+        const targetDependency = targetDependencies[dependencyName];
+
+        if (targetDependency) {
+          // For example, say we're updating react-dom's dependency on scheduler.
+          // We compare source packages to determine what the new scheduler dependency constraint should be.
+          // To do this, we look at both the local version of the scheduler (e.g. 0.11.0),
+          // and the dependency constraint in the local version of react-dom (e.g. scheduler@^0.11.0).
+          const sourceDependencyVersion =
+            sourcePackageJSONs.get(dependencyName).version;
+          const sourceDependencyConstraint = sourceDependencies[dependencyName];
+
+          // If the source dependency's version and the constraint match,
+          // we will need to update the constraint to point at the dependency's new release version,
+          // (e.g. scheduler@^0.11.0 becomes scheduler@^0.12.0 when we release scheduler 0.12.0).
+          // Otherwise we leave the constraint alone (e.g. react@^16.0.0 doesn't change between releases).
+          // Note that in both cases, we must update the target package JSON,
+          // since "next" releases are all locked to the version (e.g. 0.0.0-0e526bcec-20210202).
+          if (
+            sourceDependencyVersion ===
+            sourceDependencyConstraint.replace(/^[\^\~]/, '')
+          ) {
+            targetDependencies[dependencyName] =
+              sourceDependencyConstraint.replace(
+                sourceDependencyVersion,
+                versionsMap.get(dependencyName)
+              );
+          } else {
+            targetDependencies[dependencyName] = sourceDependencyConstraint;
+          }
+        }
+      }
+    }
+  };
+
+  // Update all package JSON versions and their dependencies/peerDependencies.
+  // This must be done in a way that respects semver constraints (e.g. 16.7.0, ^16.7.0, ^16.0.0).
+  // To do this, we use the dependencies defined in the source package JSONs,
+  // because the "next" dependencies have already been flattened to an exact match (e.g. 0.0.0-0e526bcec-20210202).
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const packageJSONPath = join(nodeModulesPath, packageName, 'package.json');
+    const packageJSON = await readJson(packageJSONPath);
+    packageJSON.version = versionsMap.get(packageName);
+
+    await updateDependencies(packageJSON, 'dependencies');
+    await updateDependencies(packageJSON, 'peerDependencies');
+
+    await writeJson(packageJSONPath, packageJSON, {spaces: 2});
+  }
+
+  clear();
+
+  // Print the map of versions and their dependencies for confirmation.
+  const printDependencies = (maybeDependency, label) => {
+    if (maybeDependency) {
+      for (let dependencyName in maybeDependency) {
+        if (packages.includes(dependencyName)) {
+          console.log(
+            theme`• {package ${dependencyName}} {version ${maybeDependency[dependencyName]}} {dimmed ${label}}`
+          );
+        }
+      }
+    }
+  };
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const packageJSONPath = join(nodeModulesPath, packageName, 'package.json');
+    const packageJSON = await readJson(packageJSONPath);
+    console.log(
+      theme`\n{package ${packageName}} {version ${versionsMap.get(
+        packageName
+      )}}`
+    );
+    printDependencies(packageJSON.dependencies, 'dependency');
+    printDependencies(packageJSON.peerDependencies, 'peer');
+  }
+  if (ci !== true) {
+    await confirm('Do the versions above look correct?');
+  }
+
+  clear();
+
+  if (packages.includes('react')) {
+    // We print the diff to the console for review,
+    // but it can be large so let's also write it to disk.
+    const diffPath = join(cwd, 'build', 'temp.diff');
+    let diff = '';
+    let numFilesModified = 0;
+
+    // Find-and-replace hardcoded version (in built JS) for renderers.
+    for (let i = 0; i < packages.length; i++) {
+      const packageName = packages[i];
+      const packagePath = join(nodeModulesPath, packageName);
+
+      let files = await execRead(
+        `find ${packagePath} -name '*.js' -exec echo {} \\;`,
+        {cwd}
+      );
+      files = files.split('\n');
+      files.forEach(path => {
+        const newStableVersion = versionsMap.get(packageName);
+        const beforeContents = readFileSync(path, 'utf8', {cwd});
+        let afterContents = beforeContents;
+        // Replace all "next" version numbers (e.g. header @license).
+        while (afterContents.indexOf(version) >= 0) {
+          afterContents = afterContents.replace(version, newStableVersion);
+        }
+        if (beforeContents !== afterContents) {
+          numFilesModified++;
+          // Using a relative path for diff helps with the snapshot test
+          diff += printDiff(relative(cwd, path), beforeContents, afterContents);
+          writeFileSync(path, afterContents, {cwd});
+        }
+      });
+    }
+    writeFileSync(diffPath, diff, {cwd});
+    console.log(theme.header(`\n${numFilesModified} files have been updated.`));
+    console.log(
+      theme`A full diff is available at {path ${relative(cwd, diffPath)}}.`
+    );
+    if (ci !== true) {
+      await confirm('Do the changes above look correct?');
+    }
+  } else {
+    console.log(
+      theme`Skipping React renderer version update because React is not included in the release.`
+    );
+  }
+
+  clear();
+};
+
+// Run this directly because logPromise would interfere with printing package dependencies.
+module.exports = run;
diff --git a/scripts/release/prepare-release-from-npm.js b/scripts/release/prepare-release-from-npm.js
new file mode 100755
index 00000000000..bb67fddd378
--- /dev/null
+++ b/scripts/release/prepare-release-from-npm.js
@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {join} = require('path');
+const {getPublicPackages, handleError} = require('./utils');
+
+const checkOutPackages = require('./prepare-release-from-npm-commands/check-out-packages');
+const confirmStableVersionNumbers = require('./prepare-release-from-npm-commands/confirm-stable-version-numbers');
+const getLatestNextVersion = require('./prepare-release-from-npm-commands/get-latest-next-version');
+const guessStableVersionNumbers = require('./prepare-release-from-npm-commands/guess-stable-version-numbers');
+const parseParams = require('./prepare-release-from-npm-commands/parse-params');
+const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
+const testPackagingFixture = require('./shared-commands/test-packaging-fixture');
+const updateStableVersionNumbers = require('./prepare-release-from-npm-commands/update-stable-version-numbers');
+const theme = require('./theme');
+
+const run = async () => {
+  try {
+    const params = parseParams();
+    params.cwd = join(__dirname, '..', '..');
+
+    const isExperimental = params.version.includes('experimental');
+
+    if (!params.version) {
+      params.version = await getLatestNextVersion();
+    }
+
+    if (params.onlyPackages.length > 0 && params.skipPackages.length > 0) {
+      console.error(
+        '--onlyPackages and --skipPackages cannot be used together'
+      );
+      process.exit(1);
+    }
+
+    params.packages = await getPublicPackages(isExperimental);
+    params.packages = params.packages.filter(packageName => {
+      if (params.onlyPackages.length > 0) {
+        return params.onlyPackages.includes(packageName);
+      }
+      return !params.skipPackages.includes(packageName);
+    });
+
+    // Map of package name to upcoming stable version.
+    // This Map is initially populated with guesses based on local versions.
+    // The developer running the release later confirms or overrides each version.
+    const versionsMap = new Map();
+
+    if (isExperimental) {
+      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);
+    await updateStableVersionNumbers(params, versionsMap);
+
+    if (!params.skipTests) {
+      await testPackagingFixture(params);
+    }
+
+    await printPrereleaseSummary(params, true);
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+run();
diff --git a/scripts/release/publish-commands/check-npm-permissions.js b/scripts/release/publish-commands/check-npm-permissions.js
new file mode 100644
index 00000000000..83405310057
--- /dev/null
+++ b/scripts/release/publish-commands/check-npm-permissions.js
@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {execRead, logPromise} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({cwd, packages, version}) => {
+  const currentUser = await execRead('npm whoami');
+  const failedProjects = [];
+
+  const checkProject = async project => {
+    const owners = (await execRead(`npm owner ls ${project}`))
+      .split('\n')
+      .filter(owner => owner)
+      .map(owner => owner.split(' ')[0]);
+
+    if (!owners.includes(currentUser)) {
+      failedProjects.push(project);
+    }
+  };
+
+  await logPromise(
+    Promise.all(packages.map(checkProject)),
+    theme`Checking NPM permissions for {underline ${currentUser}}.`
+  );
+
+  if (failedProjects.length) {
+    console.error(
+      theme`
+      {error Insufficient NPM permissions}
+      \nNPM user {underline ${currentUser}} is not an owner for: ${failedProjects
+        .map(name => theme.package(name))
+        .join(', ')}
+      \nPlease contact a React team member to be added to the above project(s).
+      `
+        .replace(/\n +/g, '\n')
+        .trim()
+    );
+    process.exit(1);
+  }
+};
+
+module.exports = run;
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 00000000000..3e7bc03d685
--- /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
new file mode 100644
index 00000000000..2c6fed58d19
--- /dev/null
+++ b/scripts/release/publish-commands/confirm-version-and-tags.js
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {readJson} = require('fs-extra');
+const {join} = require('path');
+const {confirm} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({cwd, packages, tags, ci}) => {
+  clear();
+
+  if (tags.length === 0) {
+    console.error('Expected at least one tag.');
+    process.exit(1);
+  } else if (tags.length === 1) {
+    console.log(
+      theme`{spinnerSuccess ✓} You are about the publish the following packages under the tag {tag ${tags}}:`
+    );
+  } else {
+    console.log(
+      theme`{spinnerSuccess ✓} You are about the publish the following packages under the tags {tag ${tags.join(
+        ', '
+      )}}:`
+    );
+  }
+
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const packageJSONPath = join(
+      cwd,
+      'build/node_modules',
+      packageName,
+      'package.json'
+    );
+    const packageJSON = await readJson(packageJSONPath);
+    console.log(
+      theme`• {package ${packageName}} {version ${packageJSON.version}}`
+    );
+    if (ci) {
+      console.log(packageJSON);
+    }
+  }
+
+  if (!ci) {
+    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/parse-params.js b/scripts/release/publish-commands/parse-params.js
new file mode 100644
index 00000000000..69a53737acc
--- /dev/null
+++ b/scripts/release/publish-commands/parse-params.js
@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const commandLineArgs = require('command-line-args');
+const {splitCommaParams} = require('../utils');
+
+const paramDefinitions = [
+  {
+    name: 'dry',
+    type: Boolean,
+    description: 'Dry run command without actually publishing to NPM.',
+    defaultValue: false,
+  },
+  {
+    name: 'tags',
+    type: String,
+    multiple: true,
+    description: 'NPM tags to point to the new release.',
+    defaultValue: ['untagged'],
+  },
+  {
+    name: 'onlyPackages',
+    type: String,
+    multiple: true,
+    description: 'Packages to include in publishing',
+    defaultValue: [],
+  },
+  {
+    name: 'skipPackages',
+    type: String,
+    multiple: true,
+    description: 'Packages to exclude from publishing',
+    defaultValue: [],
+  },
+  {
+    name: 'ci',
+    type: Boolean,
+    description: 'Run in automated environment, without interactive prompts.',
+    defaultValue: false,
+  },
+  {
+    name: 'publishVersion',
+    type: String,
+    description: 'Version to publish',
+  },
+];
+
+module.exports = () => {
+  const params = commandLineArgs(paramDefinitions);
+  splitCommaParams(params.skipPackages);
+  splitCommaParams(params.onlyPackages);
+  splitCommaParams(params.tags);
+  params.tags.forEach(tag => {
+    switch (tag) {
+      case 'latest':
+      case 'canary':
+      case 'next':
+      case 'experimental':
+      case 'alpha':
+      case 'beta':
+      case 'rc':
+      case 'untagged':
+        break;
+      default:
+        console.error('Unsupported tag: "' + tag + '"');
+        process.exit(1);
+        break;
+    }
+  });
+  return params;
+};
diff --git a/scripts/release/publish-commands/print-follow-up-instructions.js b/scripts/release/publish-commands/print-follow-up-instructions.js
new file mode 100644
index 00000000000..92eac820e26
--- /dev/null
+++ b/scripts/release/publish-commands/print-follow-up-instructions.js
@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {existsSync} = require('fs');
+const {readJsonSync} = require('fs-extra');
+const {join} = require('path');
+const theme = require('../theme');
+const {execRead} = require('../utils');
+
+const run = async ({cwd, packages, tags}) => {
+  // Tags are named after the react version.
+  const {version} = readJsonSync(
+    `${cwd}/build/node_modules/react/package.json`
+  );
+
+  clear();
+
+  if (tags.length === 1 && tags[0] === 'next') {
+    console.log(
+      theme`{header A "next" release} {version ${version}} {header has been published!}`
+    );
+  } else if (tags.length === 1 && tags[0] === 'experimental') {
+    console.log(
+      theme`{header An "experimental" release} {version ${version}} {header has been published!}`
+    );
+  } else {
+    const nodeModulesPath = join(cwd, 'build/node_modules');
+
+    console.log(
+      theme.caution`The release has been published but you're not done yet!`
+    );
+
+    if (tags.includes('latest')) {
+      // 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];
+      // FIXME: New build script does not output build-info.json. It's only used
+      // by this post-publish print job, and only for "latest" releases, so I've
+      // disabled it as a workaround so the publish script doesn't crash for
+      // "next" and "experimental" pre-releases.
+      const {commit} = readJsonSync(
+        join(
+          cwd,
+          'build',
+          'node_modules',
+          arbitraryPackageName,
+          'build-info.json'
+        )
+      );
+
+      console.log();
+      console.log(
+        theme.header`Please review and commit all local, staged changes.`
+      );
+
+      console.log();
+      console.log('Version numbers have been updated in the following files:');
+      for (let i = 0; i < packages.length; i++) {
+        const packageName = packages[i];
+        console.log(theme.path`• packages/%s/package.json`, packageName);
+      }
+      const status = await execRead(
+        'git diff packages/shared/ReactVersion.js',
+        {cwd}
+      );
+      if (status) {
+        console.log(theme.path`• packages/shared/ReactVersion.js`);
+      }
+
+      console.log();
+      console.log(
+        theme`{header Don't forget to also update and commit the }{path CHANGELOG}`
+      );
+
+      // Prompt the release engineer to tag the commit and update the CHANGELOG.
+      // (The script could automatically do this, but this seems safer.)
+      console.log();
+      console.log(
+        theme.header`Tag the source for this release in Git with the following command:`
+      );
+      console.log(
+        theme`  {command git tag -a v}{version %s} {command -m "v%s"} {version %s}`,
+        version,
+        version,
+        commit
+      );
+      console.log(theme.command`  git push origin --tags`);
+
+      console.log();
+      console.log(theme.header`Lastly, please fill in the release on GitHub.`);
+      console.log(
+        theme.link`https://github.com/facebook/react/releases/tag/v%s`,
+        version
+      );
+      console.log(
+        theme`\nThe GitHub release should also include links to the following artifacts:`
+      );
+      for (let i = 0; i < packages.length; i++) {
+        const packageName = packages[i];
+        if (existsSync(join(nodeModulesPath, packageName, 'umd'))) {
+          const {version: packageVersion} = readJsonSync(
+            join(nodeModulesPath, packageName, 'package.json')
+          );
+          console.log(
+            theme`{path • %s:} {link https://unpkg.com/%s@%s/umd/}`,
+            packageName,
+            packageName,
+            packageVersion
+          );
+        }
+      }
+
+      // Update reactjs.org so the React version shown in the header is up to date.
+      console.log();
+      console.log(
+        theme.header`Once you've pushed changes, update the docs site.`
+      );
+      console.log(
+        'This will ensure that any newly-added error codes can be decoded.'
+      );
+
+      console.log();
+    }
+  }
+};
+
+module.exports = run;
diff --git a/scripts/release/publish-commands/prompt-for-otp.js b/scripts/release/publish-commands/prompt-for-otp.js
new file mode 100644
index 00000000000..c89c2884630
--- /dev/null
+++ b/scripts/release/publish-commands/prompt-for-otp.js
@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const prompt = require('prompt-promise');
+const theme = require('../theme');
+
+const run = async () => {
+  while (true) {
+    const otp = await prompt('NPM 2-factor auth code: ');
+    prompt.done();
+
+    if (otp) {
+      return otp;
+    } else {
+      console.log();
+      console.log(theme.error`Two-factor auth is required to publish.`);
+      // (Ask again.)
+    }
+  }
+};
+
+module.exports = run;
diff --git a/scripts/release/publish-commands/publish-to-npm.js b/scripts/release/publish-commands/publish-to-npm.js
new file mode 100644
index 00000000000..f1e62657c0c
--- /dev/null
+++ b/scripts/release/publish-commands/publish-to-npm.js
@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {spawnSync} = require('child_process');
+const {exec} = require('child-process-promise');
+const {readJsonSync} = require('fs-extra');
+const {join} = require('path');
+const {confirm} = require('../utils');
+const theme = require('../theme');
+
+const run = async ({cwd, dry, tags, ci}, packageName, otp) => {
+  const packagePath = join(cwd, 'build/node_modules', packageName);
+  const {version} = readJsonSync(join(packagePath, 'package.json'));
+
+  // Check if this package version has already been published.
+  // If so we might be resuming from a previous run.
+  // We could infer this by comparing the build-info.json,
+  // But for now the easiest way is just to ask if this is expected.
+  const {status} = spawnSync('npm', ['view', `${packageName}@${version}`]);
+  const packageExists = status === 0;
+  if (packageExists) {
+    console.log(
+      theme`{package ${packageName}} {version ${version}} has already been published.`
+    );
+    if (!ci) {
+      await confirm('Is this expected?');
+    }
+  } else {
+    console.log(
+      theme`{spinnerSuccess ✓} Publishing {package ${packageName}}${dry ? ' (dry-run)' : ''}`
+    );
+
+    // Publish the package and tag it.
+    if (!dry) {
+      if (!ci) {
+        await exec(`npm publish --tag=${tags[0]} --otp=${otp}`, {
+          cwd: packagePath,
+        });
+        console.log(theme.command(`  cd ${packagePath}`));
+        console.log(
+          theme.command(`  npm publish --tag=${tags[0]} --otp=${otp}`)
+        );
+      } else {
+        await exec(`npm publish --tag=${tags[0]}`, {
+          cwd: packagePath,
+        });
+        console.log(theme.command(`  cd ${packagePath}`));
+        console.log(theme.command(`  npm publish --tag=${tags[0]}`));
+      }
+    }
+
+    for (let j = 1; j < tags.length; j++) {
+      if (!dry) {
+        if (!ci) {
+          await exec(
+            `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}`
+            )
+          );
+        } else {
+          await exec(`npm dist-tag add ${packageName}@${version} ${tags[j]}`, {
+            cwd: packagePath,
+          });
+          console.log(
+            theme.command(
+              `  npm dist-tag add ${packageName}@${version} ${tags[j]}`
+            )
+          );
+        }
+      }
+    }
+
+    if (tags.includes('untagged')) {
+      // npm doesn't let us publish without a tag at all,
+      // so for one-off publishes we clean it up ourselves.
+      if (!dry) {
+        if (!ci) {
+          await exec(`npm dist-tag rm ${packageName} untagged --otp=${otp}`);
+          console.log(
+            theme.command(
+              `  npm dist-tag rm ${packageName} untagged --otp=${otp}`
+            )
+          );
+        } else {
+          await exec(`npm dist-tag rm ${packageName} untagged`);
+          console.log(
+            theme.command(`  npm dist-tag rm ${packageName} untagged`)
+          );
+        }
+      }
+    }
+  }
+};
+
+module.exports = run;
diff --git a/scripts/release/publish-commands/update-stable-version-numbers.js b/scripts/release/publish-commands/update-stable-version-numbers.js
new file mode 100644
index 00000000000..76a6d6f1622
--- /dev/null
+++ b/scripts/release/publish-commands/update-stable-version-numbers.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {readFileSync, writeFileSync} = require('fs');
+const {readJson, writeJson} = require('fs-extra');
+const {join} = require('path');
+
+const run = async ({cwd, packages, skipPackages, tags}) => {
+  if (!tags.includes('latest')) {
+    // Don't update version numbers for alphas.
+    return;
+  }
+
+  const nodeModulesPath = join(cwd, 'build/node_modules');
+  const packagesPath = join(cwd, 'packages');
+
+  // Update package versions and dependencies (in source) to mirror what was published to NPM.
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const publishedPackageJSON = await readJson(
+      join(nodeModulesPath, packageName, 'package.json')
+    );
+    const sourcePackageJSONPath = join(
+      packagesPath,
+      packageName,
+      'package.json'
+    );
+    const sourcePackageJSON = await readJson(sourcePackageJSONPath);
+    sourcePackageJSON.version = publishedPackageJSON.version;
+    sourcePackageJSON.dependencies = publishedPackageJSON.dependencies;
+    sourcePackageJSON.peerDependencies = publishedPackageJSON.peerDependencies;
+
+    await writeJson(sourcePackageJSONPath, sourcePackageJSON, {spaces: 2});
+  }
+
+  // Update the shared React version source file.
+  // (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(/export default '[^']+';/, `export default '${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 00000000000..af7324fdf62
--- /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
new file mode 100644
index 00000000000..fbd58e9b376
--- /dev/null
+++ b/scripts/release/publish-commands/validate-tags.js
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {readJson} = require('fs-extra');
+const {join} = require('path');
+const theme = require('../theme');
+
+const run = async ({cwd, packages, tags}) => {
+  // Prevent a "next" 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',
+    arbitraryPackageName,
+    'package.json'
+  );
+  const {version} = await readJson(packageJSONPath);
+  const isExperimentalVersion = version.indexOf('experimental') !== -1;
+  if (version.indexOf('-') !== -1) {
+    if (tags.includes('latest')) {
+      if (isExperimentalVersion) {
+        console.log(
+          theme`{error Experimental release} {version ${version}} {error cannot be tagged as} {tag latest}`
+        );
+      } else {
+        console.log(
+          theme`{error Next release} {version ${version}} {error cannot be tagged as} {tag latest}`
+        );
+      }
+      process.exit(1);
+    }
+    if (tags.includes('next') && isExperimentalVersion) {
+      console.log(
+        theme`{error Experimental release} {version ${version}} {error cannot be tagged as} {tag next}`
+      );
+      process.exit(1);
+    }
+    if (tags.includes('experimental') && !isExperimentalVersion) {
+      console.log(
+        theme`{error Next release} {version ${version}} {error cannot be tagged as} {tag experimental}`
+      );
+      process.exit(1);
+    }
+  } else {
+    if (!tags.includes('latest')) {
+      console.log(
+        theme`{error Stable release} {version ${version}} {error must always be tagged as} {tag latest}`
+      );
+      process.exit(1);
+    }
+    if (tags.includes('experimental')) {
+      console.log(
+        theme`{error Stable release} {version ${version}} {error cannot be tagged as} {tag experimental}`
+      );
+      process.exit(1);
+    }
+  }
+};
+
+module.exports = run;
diff --git a/scripts/release/publish-using-ci-workflow.js b/scripts/release/publish-using-ci-workflow.js
new file mode 100644
index 00000000000..33ca8d3dad7
--- /dev/null
+++ b/scripts/release/publish-using-ci-workflow.js
@@ -0,0 +1,148 @@
+'use strict';
+
+const fetch = require('node-fetch');
+
+const {logPromise} = require('./utils');
+const theme = require('./theme');
+
+const CIRCLE_TOKEN = process.env.CIRCLE_CI_API_TOKEN;
+
+if (!CIRCLE_TOKEN) {
+  console.error(
+    theme.error(
+      'Missing required environment variable: CIRCLE_CI_API_TOKEN\n' +
+        'Grab it here: https://app.circleci.com/settings/user/tokens'
+    )
+  );
+  process.exit(1);
+}
+
+function sleep(ms) {
+  return new Promise(resolve => {
+    setTimeout(() => resolve(), ms);
+  });
+}
+
+async function getPublishWorkflowID(pipelineID) {
+  // Since we just created the pipeline in a POST request, the server may 404.
+  // Try a few times before giving up.
+  for (let i = 0; i < 20; i++) {
+    const pipelineWorkflowsResponse = await fetch(
+      `https://circleci.com/api/v2/pipeline/${pipelineID}/workflow`
+    );
+    if (pipelineWorkflowsResponse.ok) {
+      const pipelineWorkflowsJSON = await pipelineWorkflowsResponse.json();
+      const workflows = pipelineWorkflowsJSON.items;
+      if (workflows.length !== 0) {
+        return workflows[0].id;
+      }
+    }
+    // CircleCI server may be stale. Wait a sec and try again.
+    await sleep(1000);
+  }
+  return null;
+}
+
+async function pollUntilWorkflowFinishes(workflowID) {
+  while (true) {
+    const workflowResponse = await fetch(
+      `https://circleci.com/api/v2/workflow/${workflowID}`
+    );
+    const workflow = await workflowResponse.json();
+    switch (workflow.status) {
+      case 'running':
+        // Workflow still running. Wait a bit then check again.
+        await sleep(2000);
+        continue;
+      case 'success':
+        // Publish succeeded! Continue.
+        return;
+      case 'not_run':
+      case 'failed':
+      case 'error':
+      case 'failing':
+      case 'on_hold':
+      case 'canceled':
+      case 'unauthorized':
+      default:
+        console.error(
+          theme.error(
+            `Failed to publish. Workflow exited with status: ${workflow.status}`
+          )
+        );
+        console.error(
+          `Visit https://app.circleci.com/pipelines/workflows/${workflowID} for details.`
+        );
+        process.exit(1);
+        break;
+    }
+  }
+}
+
+async function main() {
+  const headCommitResponse = await fetch(
+    'https://api.github.com/repos/facebook/react/commits/main'
+  );
+  const headCommitJSON = await headCommitResponse.json();
+  const headCommitSha = headCommitJSON.sha;
+
+  const pipelineResponse = await fetch(
+    'https://circleci.com/api/v2/project/github/facebook/react/pipeline',
+    {
+      method: 'post',
+      body: JSON.stringify({
+        parameters: {
+          prerelease_commit_sha: headCommitSha,
+        },
+      }),
+      headers: {
+        'Circle-Token': CIRCLE_TOKEN,
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  if (!pipelineResponse.ok) {
+    console.error(
+      theme.error(
+        `Failed to access CircleCI. Responded with status: ${pipelineResponse.status}`
+      )
+    );
+    process.exit(1);
+  }
+
+  const pipelineJSON = await pipelineResponse.json();
+  const pipelineID = pipelineJSON.id;
+
+  const workflowID = await logPromise(
+    getPublishWorkflowID(pipelineID),
+    theme`{header Creating CI workflow}`,
+    2 * 1000 // Estimated time: 2 seconds,
+  );
+
+  if (workflowID === null) {
+    console.warn(
+      theme.yellow(
+        'Created a CI pipeline to publish the packages, but the script timed ' +
+          "out when requesting the associated workflow ID. It's still " +
+          'possible the workflow was created.\n\n' +
+          'Visit ' +
+          'https://app.circleci.com/pipelines/github/facebook/react?branch=main ' +
+          'for a list of the latest workflows.'
+      )
+    );
+    process.exit(1);
+  }
+
+  await logPromise(
+    pollUntilWorkflowFinishes(workflowID),
+    theme`{header Publishing in CI workflow}: https://app.circleci.com/pipelines/workflows/${workflowID}`,
+    2 * 60 * 1000 // Estimated time: 2 minutes,
+  );
+}
+
+main().catch(error => {
+  console.error(theme.error('Failed to trigger publish workflow.'));
+  console.error(error.message);
+  process.exit(1);
+});
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
new file mode 100755
index 00000000000..f9e450b5592
--- /dev/null
+++ b/scripts/release/publish.js
@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {join} = require('path');
+const {readJsonSync} = require('fs-extra');
+const clear = require('clear');
+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 parseParams = require('./publish-commands/parse-params');
+const printFollowUpInstructions = require('./publish-commands/print-follow-up-instructions');
+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 {
+    const params = parseParams();
+
+    const version =
+      params.publishVersion ??
+      readJsonSync('./build/node_modules/react/package.json').version;
+    const isExperimental = version.includes('experimental');
+
+    params.cwd = join(__dirname, '..', '..');
+    params.packages = await getPublicPackages(isExperimental);
+
+    if (params.onlyPackages.length > 0 && params.skipPackages.length > 0) {
+      console.error(
+        '--onlyPackages and --skipPackages cannot be used together'
+      );
+      process.exit(1);
+    }
+
+    if (params.onlyPackages.length > 0) {
+      params.packages = params.packages.filter(packageName => {
+        return params.onlyPackages.includes(packageName);
+      });
+    }
+
+    // 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 packageNames = params.packages;
+
+    if (params.ci) {
+      let failed = false;
+      for (let i = 0; i < packageNames.length; i++) {
+        try {
+          const packageName = packageNames[i];
+          await publishToNPM(params, packageName, null);
+        } catch (error) {
+          failed = true;
+          console.error(error.message);
+          console.log();
+          console.log(
+            theme.error`Publish failed. Will attempt to publish remaining packages.`
+          );
+        }
+      }
+      if (failed) {
+        console.log(theme.error`One or more packages failed to publish.`);
+        process.exit(1);
+      }
+    } else {
+      clear();
+      let otp = await promptForOTP(params);
+      for (let i = 0; i < packageNames.length; ) {
+        const packageName = packageNames[i];
+        try {
+          await publishToNPM(params, packageName, otp);
+          i++;
+        } catch (error) {
+          console.error(error.message);
+          console.log();
+          console.log(
+            theme.error`Publish failed. Enter a fresh otp code to retry.`
+          );
+          otp = await promptForOTP(params);
+          // Try publishing package again
+          continue;
+        }
+      }
+      await updateStableVersionNumbers(params);
+      await printFollowUpInstructions(params);
+    }
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+run();
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
new file mode 100644
index 00000000000..79d4ac6c6ee
--- /dev/null
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -0,0 +1,226 @@
+'use strict';
+
+const {join} = require('path');
+const theme = require('../theme');
+const {exec} = require('child-process-promise');
+const {existsSync, mkdtempSync, readFileSync} = require('fs');
+const {logPromise} = require('../utils');
+const os = require('os');
+
+if (process.env.GH_TOKEN == null) {
+  console.log(
+    theme`{error Expected GH_TOKEN to be provided as an env variable}`
+  );
+  process.exit(1);
+}
+
+const OWNER = 'facebook';
+const REPO = 'react';
+const WORKFLOW_ID = 'runtime_build_and_test.yml';
+const GITHUB_HEADERS = `
+  -H "Accept: application/vnd.github+json" \
+  -H "Authorization: Bearer ${process.env.GH_TOKEN}" \
+  -H "X-GitHub-Api-Version: 2022-11-28"`.trim();
+
+async function executableIsAvailable(name) {
+  try {
+    await exec(`which ${name}`);
+    return true;
+  } catch (_error) {
+    return false;
+  }
+}
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function getWorkflowId() {
+  if (
+    existsSync(join(__dirname, `../../../.github/workflows/${WORKFLOW_ID}`))
+  ) {
+    return WORKFLOW_ID;
+  } else {
+    throw new Error(
+      `Incorrect workflow ID: .github/workflows/${WORKFLOW_ID} does not exist. Please check the name of the workflow being downloaded from.`
+    );
+  }
+}
+
+async function getWorkflowRun(commit) {
+  const res = await exec(
+    `curl -L ${GITHUB_HEADERS} https://api.github.com/repos/${OWNER}/${REPO}/actions/workflows/${getWorkflowId()}/runs?head_sha=${commit}`
+  );
+
+  const json = JSON.parse(res.stdout);
+  const workflowRun = json.workflow_runs.find(run => run.head_sha === commit);
+
+  if (workflowRun == null || workflowRun.id == null) {
+    console.log(
+      theme`{error The workflow run for the specified commit (${commit}) could not be found.}`
+    );
+    process.exit(1);
+  }
+
+  return workflowRun;
+}
+
+async function getArtifact(workflowRunId, artifactName) {
+  const res = await exec(
+    `curl -L ${GITHUB_HEADERS} https://api.github.com/repos/${OWNER}/${REPO}/actions/runs/${workflowRunId}/artifacts?per_page=100&name=${artifactName}`
+  );
+
+  const json = JSON.parse(res.stdout);
+  const artifact = json.artifacts.find(
+    _artifact => _artifact.name === artifactName
+  );
+
+  if (artifact == null) {
+    console.log(
+      theme`{error The specified workflow run (${workflowRunId}) does not contain any build artifacts.}`
+    );
+    process.exit(1);
+  }
+
+  return artifact;
+}
+
+async function processArtifact(artifact, opts) {
+  // Download and extract artifact
+  const cwd = join(__dirname, '..', '..', '..');
+  const tmpDir = mkdtempSync(join(os.tmpdir(), 'react_'));
+  await exec(`rm -rf ./build`, {cwd});
+  await exec(
+    `curl -L ${GITHUB_HEADERS} ${artifact.archive_download_url} > artifacts_combined.zip`,
+    {
+      cwd: tmpDir,
+    }
+  );
+
+  if (opts.noVerify === true) {
+    console.log(theme`{caution Skipping verification of build artifact.}`);
+  } else {
+    // Use https://cli.github.com/manual/gh_attestation_verify to verify artifact
+    if (executableIsAvailable('gh')) {
+      await exec(
+        `gh attestation verify artifacts_combined.zip --repo=${OWNER}/${REPO}`,
+        {
+          cwd: tmpDir,
+        }
+      );
+    }
+  }
+
+  await exec(
+    `unzip ${tmpDir}/artifacts_combined.zip -d . && rm build2.tgz && tar -xvzf build.tgz && rm build.tgz`,
+    {
+      cwd,
+    }
+  );
+
+  // Copy to staging directory
+  // TODO: Consider staging the release in a different directory from the CI
+  // build artifacts: `./build/node_modules` -> `./staged-releases`
+  if (!existsSync(join(cwd, 'build'))) {
+    await exec(`mkdir ./build`, {cwd});
+  } else {
+    await exec(`rm -rf ./build/node_modules`, {cwd});
+  }
+  let sourceDir;
+  // TODO: Rename release channel to `next`
+  if (opts.releaseChannel === 'stable') {
+    sourceDir = 'oss-stable';
+  } else if (opts.releaseChannel === 'experimental') {
+    sourceDir = 'oss-experimental';
+  } else if (opts.releaseChannel === 'rc') {
+    sourceDir = 'oss-stable-rc';
+  } else if (opts.releaseChannel === 'latest') {
+    sourceDir = 'oss-stable-semver';
+  } else {
+    console.error(
+      'Internal error: Invalid release channel: ' + opts.releaseChannel
+    );
+    process.exit(opts.releaseChannel);
+  }
+  await exec(`cp -r ./build/${sourceDir} ./build/node_modules`, {
+    cwd,
+  });
+
+  // Validate artifact
+  const buildSha = readFileSync('./build/COMMIT_SHA', 'utf8').replace(
+    /[\u0000-\u001F\u007F-\u009F]/g,
+    ''
+  );
+  if (buildSha !== opts.commit) {
+    throw new Error(
+      `Requested commit sha does not match downloaded artifact. Expected: ${opts.commit}, got: ${buildSha}`
+    );
+  }
+}
+
+async function downloadArtifactsFromGitHub(opts) {
+  let workflowRun;
+  let retries = 0;
+  // wait up to 10 mins for build to finish: 10 * 60 * 1_000) / 30_000 = 20
+  while (retries < 20) {
+    workflowRun = await getWorkflowRun(opts.commit);
+    if (typeof workflowRun.status === 'string') {
+      switch (workflowRun.status) {
+        case 'queued':
+        case 'in_progress':
+        case 'waiting': {
+          retries++;
+          console.log(theme`Build still in progress, waiting 30s...`);
+          await sleep(30_000);
+          break;
+        }
+        case 'completed': {
+          if (workflowRun.conclusion === 'success') {
+            const artifact = await getArtifact(
+              workflowRun.id,
+              'artifacts_combined'
+            );
+            await processArtifact(artifact, opts);
+            return;
+          } else {
+            console.log(
+              theme`{error Could not download build as its conclusion was: ${workflowRun.conclusion}}`
+            );
+            process.exit(1);
+          }
+          break;
+        }
+        default: {
+          console.log(
+            theme`{error Unhandled workflow run status: ${workflowRun.status}}`
+          );
+          process.exit(1);
+        }
+      }
+    } else {
+      retries++;
+      console.log(
+        theme`{error Expected workflow run status to be a string, got: ${workflowRun.status}. Retrying...}`
+      );
+    }
+  }
+
+  console.log(
+    theme`{error Could not download build from GitHub. Last workflow run: }
+
+${workflowRun != null ? JSON.stringify(workflowRun, null, '\t') : workflowRun}`
+  );
+  process.exit(1);
+}
+
+async function downloadBuildArtifacts(opts) {
+  const label = theme`commit {commit ${opts.commit}})`;
+  return logPromise(
+    downloadArtifactsFromGitHub(opts),
+    theme`Downloading artifacts from GitHub for ${label}`
+  );
+}
+
+module.exports = {
+  downloadBuildArtifacts,
+};
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
new file mode 100644
index 00000000000..6f43ba074bd
--- /dev/null
+++ b/scripts/release/shared-commands/parse-params.js
@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const commandLineArgs = require('command-line-args');
+const theme = require('../theme');
+
+const paramDefinitions = [
+  {
+    name: 'build',
+    type: String,
+    description:
+      'CI build ID corresponding to the "process_artifacts_combined" task.',
+    defaultValue: null,
+  },
+  {
+    name: 'commit',
+    type: String,
+    description:
+      'GitHub commit SHA. When provided, automatically finds corresponding CI build.',
+    defaultValue: null,
+  },
+  {
+    name: 'skipTests',
+    type: Boolean,
+    description: 'Skip automated fixture tests.',
+    defaultValue: false,
+  },
+  {
+    name: 'releaseChannel',
+    alias: 'r',
+    type: String,
+    description: 'Release channel (stable, experimental, or latest)',
+  },
+  {
+    name: 'allowBrokenCI',
+    type: Boolean,
+    description:
+      'Continue even if CI is failing. Useful if you need to debug a broken build.',
+    defaultValue: false,
+  },
+];
+
+module.exports = async () => {
+  const params = commandLineArgs(paramDefinitions);
+
+  const channel = params.releaseChannel;
+  if (
+    channel !== 'experimental' &&
+    channel !== 'stable' &&
+    channel !== 'rc' &&
+    channel !== 'latest'
+  ) {
+    console.error(
+      theme.error`Invalid release channel (-r) "${channel}". Must be "stable", "experimental", "rc", or "latest".`
+    );
+    process.exit(1);
+  }
+
+  if (params.commit === null) {
+    console.error(theme.error`A --commit param must be specified.`);
+    process.exit(1);
+  }
+
+  return params;
+};
diff --git a/scripts/release/shared-commands/print-prerelease-summary.js b/scripts/release/shared-commands/print-prerelease-summary.js
new file mode 100644
index 00000000000..6492c50bd78
--- /dev/null
+++ b/scripts/release/shared-commands/print-prerelease-summary.js
@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const clear = require('clear');
+const {join, relative} = require('path');
+const theme = require('../theme');
+
+module.exports = ({cwd}, isStableRelease) => {
+  const publishPath = relative(
+    process.env.PWD,
+    join(__dirname, '../publish.js')
+  );
+
+  clear();
+
+  let message;
+  if (isStableRelease) {
+    message = theme`
+      {caution A stable release candidate has been prepared!}
+
+      You can review the contents of this release in {path build/node_modules/}
+
+      {header Before publishing, consider testing this release locally with create-react-app!}
+
+      You can publish this release by running:
+      {path   ${publishPath}}
+    `;
+  } else {
+    message = theme`
+      {caution A "next" release candidate has been prepared!}
+
+      You can review the contents of this release in {path build/node_modules/}
+
+      You can publish this release by running:
+      {path   ${publishPath}}
+    `;
+  }
+
+  console.log(message.replace(/\n +/g, '\n').trim());
+};
diff --git a/scripts/release/shared-commands/test-packaging-fixture.js b/scripts/release/shared-commands/test-packaging-fixture.js
new file mode 100644
index 00000000000..2186b14985c
--- /dev/null
+++ b/scripts/release/shared-commands/test-packaging-fixture.js
@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {join} = require('path');
+const puppeteer = require('puppeteer');
+const server = require('pushstate-server');
+const theme = require('../theme');
+const {logPromise} = require('../utils');
+
+const validate = async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  await page.goto('http://localhost:9000/fixtures/packaging');
+
+  try {
+    return await page.evaluate(() => {
+      const iframes = document.querySelectorAll('iframe');
+
+      if (iframes.length === 0) {
+        return 'No iframes were found.';
+      }
+
+      for (let i = 0; i < iframes.length; i++) {
+        const iframe = iframes[i];
+        // Don't include the <script> Babel tag
+        const container =
+          iframe.contentDocument.body.getElementsByTagName('div')[0];
+        if (container.textContent !== 'Hello World!') {
+          return `Unexpected fixture content, "${container.textContent}"`;
+        }
+      }
+
+      return null;
+    });
+  } finally {
+    await browser.close();
+  }
+};
+
+const run = async ({cwd}) => {
+  await logPromise(
+    exec('node build-all.js', {cwd: join(cwd, 'fixtures/packaging')}),
+    'Generating "packaging" fixture',
+    20000 // This takes roughly 20 seconds
+  );
+
+  let errorMessage;
+  let response;
+
+  try {
+    response = server.start({
+      port: 9000,
+      directory: cwd,
+    });
+
+    errorMessage = await logPromise(
+      validate(),
+      'Verifying "packaging" fixture'
+    );
+  } finally {
+    response.close();
+  }
+
+  if (errorMessage) {
+    console.error(
+      theme.error('✗'),
+      'Verifying "packaging" fixture\n ',
+      theme.error(errorMessage)
+    );
+    process.exit(1);
+  }
+};
+
+module.exports = run;
diff --git a/scripts/release/snapshot-test.js b/scripts/release/snapshot-test.js
new file mode 100755
index 00000000000..d199b51c7b9
--- /dev/null
+++ b/scripts/release/snapshot-test.js
@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {exec, spawn} = require('child-process-promise');
+const {join} = require('path');
+const {readFileSync} = require('fs');
+const theme = require('./theme');
+const {getDateStringForCommit, logPromise, printDiff} = require('./utils');
+
+const cwd = join(__dirname, '..', '..');
+
+const CIRCLE_CI_BUILD = 12707;
+const COMMIT = 'b3d1a81a9';
+const VERSION = '1.2.3';
+
+const run = async () => {
+  const defaultOptions = {
+    cwd,
+    env: process.env,
+  };
+
+  try {
+    // Start with a known build/revision:
+    // https://circleci.com/gh/facebook/react/12707
+    let promise = spawn(
+      'node',
+      [
+        './scripts/release/prepare-release-from-ci.js',
+        `--build=${CIRCLE_CI_BUILD}`,
+      ],
+      defaultOptions
+    );
+    logPromise(
+      promise,
+      theme`Checking out "next" build {version ${CIRCLE_CI_BUILD}}`
+    );
+    await promise;
+
+    const dateString = await getDateStringForCommit(COMMIT);
+
+    // Upgrade the above build top a known React version.
+    // Note that using the --local flag skips NPM checkout.
+    // This isn't totally necessary but is useful if we want to test an unpublished "next" build.
+    promise = spawn(
+      'node',
+      [
+        './scripts/release/prepare-release-from-npm.js',
+        `--version=0.0.0-${COMMIT}-${dateString}`,
+        '--local',
+      ],
+      defaultOptions
+    );
+    promise.childProcess.stdin.setEncoding('utf-8');
+    promise.childProcess.stdout.setEncoding('utf-8');
+    promise.childProcess.stdout.on('data', data => {
+      if (data.includes('✓ Version for')) {
+        // Update all packages to a stable version
+        promise.childProcess.stdin.write(VERSION);
+      } else if (data.includes('(y/N)')) {
+        // Accept all of the confirmation prompts
+        promise.childProcess.stdin.write('y');
+      }
+    });
+    logPromise(promise, theme`Preparing stable release {version ${VERSION}}`);
+    await promise;
+
+    const beforeContents = readFileSync(
+      join(cwd, 'scripts/release/snapshot-test.snapshot'),
+      'utf-8'
+    );
+    await exec('cp build/temp.diff scripts/release/snapshot-test.snapshot', {
+      cwd,
+    });
+    const afterContents = readFileSync(
+      join(cwd, 'scripts/release/snapshot-test.snapshot'),
+      'utf-8'
+    );
+
+    if (beforeContents === afterContents) {
+      console.log(theme.header`Snapshot test passed.`);
+    } else {
+      printDiff(
+        'scripts/release/snapshot-test.snapshot',
+        beforeContents,
+        afterContents
+      );
+      console.log();
+      console.error(theme.error('Snapshot test failed!'));
+      console.log();
+      console.log(
+        'If this failure was expected, please update the contents of the snapshot file:'
+      );
+      console.log(
+        theme`  {command git add} {path scripts/release/snapshot-test.snapshot}`
+      );
+      console.log(
+        theme`  {command git commit -m "Updating release script snapshot file."}`
+      );
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error(theme.error(error));
+    process.exit(1);
+  }
+};
+
+run();
diff --git a/scripts/release/snapshot-test.snapshot b/scripts/release/snapshot-test.snapshot
new file mode 100644
index 00000000000..a8482b39fc5
--- /dev/null
+++ b/scripts/release/snapshot-test.snapshot
@@ -0,0 +1,840 @@
+Index: build/node_modules/create-subscription/cjs/create-subscription.development.js
+===================================================================
+--- build/node_modules/create-subscription/cjs/create-subscription.development.js
++++ build/node_modules/create-subscription/cjs/create-subscription.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * create-subscription.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/create-subscription/cjs/create-subscription.production.min.js
+===================================================================
+--- build/node_modules/create-subscription/cjs/create-subscription.production.min.js
++++ build/node_modules/create-subscription/cjs/create-subscription.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * create-subscription.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/jest-react/cjs/jest-react.production.min.js
+===================================================================
+--- build/node_modules/jest-react/cjs/jest-react.production.min.js
++++ build/node_modules/jest-react/cjs/jest-react.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * jest-react.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/jest-react/cjs/jest-react.development.js
+===================================================================
+--- build/node_modules/jest-react/cjs/jest-react.development.js
++++ build/node_modules/jest-react/cjs/jest-react.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * jest-react.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react/umd/react.production.min.js
+===================================================================
+--- build/node_modules/react/umd/react.production.min.js
++++ build/node_modules/react/umd/react.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -27,5 +27,5 @@
+ k;return function(){var d=k,c=m;k=b;m=l();try{return a.apply(this,arguments)}finally{k=d,m=c,R()}}},unstable_getCurrentPriorityLevel:function(){return k}},SchedulerTracing:{__interactionsRef:null,__subscriberRef:null,unstable_clear:function(a){return a()},unstable_getCurrent:function(){return null},unstable_getThreadID:function(){return++Oa},unstable_subscribe:function(a){},unstable_trace:function(a,b,d){return d()},unstable_unsubscribe:function(a){},unstable_wrap:function(a){return a}}});var fa=
+ Object.prototype.hasOwnProperty,ha={key:!0,ref:!0,__self:!0,__source:!0},la=/\/+/g,I=[];r={Children:{map:function(a,b,d){if(null==a)return a;var c=[];X(a,c,null,b,d);return c},forEach:function(a,b,d){if(null==a)return a;b=ia(null,null,b,d);W(a,ya,b);ja(b)},count:function(a){return W(a,function(){return null},null)},toArray:function(a){var b=[];X(a,b,null,function(a){return a});return b},only:function(a){T(a)?void 0:p("143");return a}},createRef:function(){return{current:null}},Component:q,PureComponent:O,
+ createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:Ca,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:Ba,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:Ea,render:a}},lazy:function(a){return{$$typeof:Ha,_ctor:a,_status:-1,_result:null}},memo:function(a,b){return{$$typeof:Ga,type:a,compare:void 0===b?null:b}},Fragment:r,StrictMode:Aa,Suspense:Fa,createElement:ea,cloneElement:function(a,b,d){null===
+ a||void 0===a?p("267",a):void 0;var c=void 0,e=J({},a.props),g=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=S.current);void 0!==b.key&&(g=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)fa.call(b,c)&&!ha.hasOwnProperty(c)&&(e[c]=void 0===b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)e.children=d;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];e.children=l}return{$$typeof:x,type:a.type,key:g,ref:k,props:e,_owner:h}},
+-createFactory:function(a){var b=ea.bind(null,a);b.type=a;return b},isValidElement:T,version:"16.6.1-canary-b3d1a81a9",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:e};r.unstable_ConcurrentMode=Da;r.unstable_Profiler=t;t=(t={default:r},r)||t;return t.default||t});
++createFactory:function(a){var b=ea.bind(null,a);b.type=a;return b},isValidElement:T,version:"1.2.3",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:e};r.unstable_ConcurrentMode=Da;r.unstable_Profiler=t;t=(t={default:r},r)||t;return t.default||t});
+Index: build/node_modules/react/umd/react.development.js
+===================================================================
+--- build/node_modules/react/umd/react.development.js
++++ build/node_modules/react/umd/react.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -16,9 +16,9 @@
+ }(this, (function () { 'use strict';
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+ // nor polyfill, then a plain number is used for performance.
+ var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+Index: build/node_modules/react/umd/react.profiling.min.js
+===================================================================
+--- build/node_modules/react/umd/react.profiling.min.js
++++ build/node_modules/react/umd/react.profiling.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react.profiling.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -31,5 +31,5 @@
+ b,null!==e)e.onWorkStopped(d,c)}}return g}finally{f||(f=!0,d.forEach(function(a){a.__count--;if(null!==e&&0===a.__count)e.onInteractionScheduledWorkCompleted(a)}))}}var c=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,d=m.current,e=t.current;if(null!==e)e.onWorkScheduled(d,c);d.forEach(function(a){a.__count++});var f=!1;b.cancel=function(){e=t.current;try{if(null!==e)e.onWorkCanceled(d,c)}finally{d.forEach(function(a){a.__count--;if(e&&0===a.__count)e.onInteractionScheduledWorkCompleted(a)})}};
+ return b}}});var ja=Object.prototype.hasOwnProperty,ka={key:!0,ref:!0,__self:!0,__source:!0},oa=/\/+/g,L=[];v={Children:{map:function(a,b,c){if(null==a)return a;var d=[];aa(a,d,null,b,c);return d},forEach:function(a,b,c){if(null==a)return a;b=la(null,null,b,c);Z(a,Ha,b);ma(b)},count:function(a){return Z(a,function(){return null},null)},toArray:function(a){var b=[];aa(a,b,null,function(a){return a});return b},only:function(a){W(a)?void 0:r("143");return a}},createRef:function(){return{current:null}},
+ Component:u,PureComponent:R,createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:La,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:Ka,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:Na,render:a}},lazy:function(a){return{$$typeof:Qa,_ctor:a,_status:-1,_result:null}},memo:function(a,b){return{$$typeof:Pa,type:a,compare:void 0===b?null:b}},Fragment:v,StrictMode:Ja,Suspense:Oa,createElement:ia,cloneElement:function(a,
+ b,c){null===a||void 0===a?r("267",a):void 0;var d=void 0,e=M({},a.props),f=a.key,h=a.ref,k=a._owner;if(null!=b){void 0!==b.ref&&(h=b.ref,k=V.current);void 0!==b.key&&(f=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(d in b)ja.call(b,d)&&!ka.hasOwnProperty(d)&&(e[d]=void 0===b[d]&&void 0!==l?l[d]:b[d])}d=arguments.length-2;if(1===d)e.children=c;else if(1<d){l=Array(d);for(var m=0;m<d;m++)l[m]=arguments[m+2];e.children=l}return{$$typeof:A,type:a.type,key:f,ref:h,props:e,
+-_owner:k}},createFactory:function(a){var b=ia.bind(null,a);b.type=a;return b},isValidElement:W,version:"16.6.1-canary-b3d1a81a9",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h};v.unstable_ConcurrentMode=Ma;v.unstable_Profiler=w;w=(w={default:v},v)||w;return w.default||w});
++_owner:k}},createFactory:function(a){var b=ia.bind(null,a);b.type=a;return b},isValidElement:W,version:"1.2.3",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h};v.unstable_ConcurrentMode=Ma;v.unstable_Profiler=w;w=(w={default:v},v)||w;return w.default||w});
+Index: build/node_modules/react/cjs/react.production.min.js
+===================================================================
+--- build/node_modules/react/cjs/react.production.min.js
++++ build/node_modules/react/cjs/react.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -19,6 +19,6 @@
+ 0;!(d=a.next()).done;)d=d.value,f=b+U(d,h++),g+=T(d,f,e,c);else"object"===d&&(e=""+a,D("31","[object Object]"===e?"object with keys {"+Object.keys(a).join(", ")+"}":e,""));return g}function V(a,b,e){return null==a?0:T(a,"",b,e)}function U(a,b){return"object"===typeof a&&null!==a&&null!=a.key?escape(a.key):b.toString(36)}function ca(a,b){a.func.call(a.context,b,a.count++)}
+ function da(a,b,e){var c=a.result,d=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?W(a,c,e,function(a){return a}):null!=a&&(O(a)&&(a=ba(a,d+(!a.key||b&&b.key===a.key?"":(""+a.key).replace(P,"$&/")+"/")+e)),c.push(a))}function W(a,b,e,c,d){var g="";null!=e&&(g=(""+e).replace(P,"$&/")+"/");b=R(b,g,c,d);V(a,da,b);S(b)}
+ var X={Children:{map:function(a,b,e){if(null==a)return a;var c=[];W(a,c,null,b,e);return c},forEach:function(a,b,e){if(null==a)return a;b=R(null,null,b,e);V(a,ca,b);S(b)},count:function(a){return V(a,function(){return null},null)},toArray:function(a){var b=[];W(a,b,null,function(a){return a});return b},only:function(a){O(a)?void 0:D("143");return a}},createRef:function(){return{current:null}},Component:G,PureComponent:I,createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:w,_calculateChangedBits:b,
+ _currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:v,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:y,render:a}},lazy:function(a){return{$$typeof:B,_ctor:a,_status:-1,_result:null}},memo:function(a,b){return{$$typeof:A,type:a,compare:void 0===b?null:b}},Fragment:r,StrictMode:t,Suspense:z,createElement:N,cloneElement:function(a,b,e){null===a||void 0===a?D("267",a):void 0;var c=void 0,d=k({},a.props),g=a.key,h=a.ref,f=a._owner;
+-if(null!=b){void 0!==b.ref&&(h=b.ref,f=K.current);void 0!==b.key&&(g=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)L.call(b,c)&&!M.hasOwnProperty(c)&&(d[c]=void 0===b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)d.children=e;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];d.children=l}return{$$typeof:p,type:a.type,key:g,ref:h,props:d,_owner:f}},createFactory:function(a){var b=N.bind(null,a);b.type=a;return b},isValidElement:O,version:"16.6.1-canary-b3d1a81a9",
++if(null!=b){void 0!==b.ref&&(h=b.ref,f=K.current);void 0!==b.key&&(g=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)L.call(b,c)&&!M.hasOwnProperty(c)&&(d[c]=void 0===b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)d.children=e;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];d.children=l}return{$$typeof:p,type:a.type,key:g,ref:h,props:d,_owner:f}},createFactory:function(a){var b=N.bind(null,a);b.type=a;return b},isValidElement:O,version:"1.2.3",
+ __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:K,assign:k}};X.unstable_ConcurrentMode=x;X.unstable_Profiler=u;var Y={default:X},Z=Y&&X||Y;module.exports=Z.default||Z;
+Index: build/node_modules/react/cjs/react.development.js
+===================================================================
+--- build/node_modules/react/cjs/react.development.js
++++ build/node_modules/react/cjs/react.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -19,9 +19,9 @@
+ var checkPropTypes = require('prop-types/checkPropTypes');
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+ // nor polyfill, then a plain number is used for performance.
+ var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+Index: build/node_modules/react-art/umd/react-art.development.js
+===================================================================
+--- build/node_modules/react-art/umd/react-art.development.js
++++ build/node_modules/react-art/umd/react-art.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-art.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -20,9 +20,9 @@
+ var _assign = ReactInternals.assign;
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ /**
+  * Use invariant() to assert state which your program assumes to be true.
+  *
+Index: build/node_modules/react-art/umd/react-art.production.min.js
+===================================================================
+--- build/node_modules/react-art/umd/react-art.production.min.js
++++ build/node_modules/react-art/umd/react-art.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-art.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -184,5 +184,5 @@
+ this._args)};return a}(),Xe=function(){function a(b,c,d,e,f,g,h){ab(this,a);this._args=Cc.call(arguments)}a.prototype.applyFill=function(a){a.fillRadial.apply(a,this._args)};return a}(),Ye=function(){function a(b,c,d,e,f){ab(this,a);this._args=Cc.call(arguments)}a.prototype.applyFill=function(a){a.fillImage.apply(a,this._args)};return a}(),Ze=function(a){function b(){ab(this,b);return Rd(this,a.apply(this,arguments))}Sd(b,a);b.prototype.componentDidMount=function(){var a=this.props,b=this._surface=
+ ja.Surface(+a.width,+a.height,this._tagRef);a=P(3,null,null,0);b={current:a,containerInfo:b,pendingChildren:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:-1,context:null,pendingContext:null,hydrate:void 0,nextExpirationTimeToWorkOn:0,expirationTime:0,firstBatch:null,nextScheduledRoot:null};this._mountNode=a.stateNode=b;uc(this.props.children,this._mountNode,this)};
+ b.prototype.componentDidUpdate=function(a,b){b=this.props;b.height===a.height&&b.width===a.width||this._surface.resize(+b.width,+b.height);uc(this.props.children,this._mountNode,this);this._surface.render&&this._surface.render()};b.prototype.componentWillUnmount=function(){uc(null,this._mountNode,this)};b.prototype.render=function(){var a=this,b=this.props;return O.createElement(ja.Surface.tagName,{ref:function(b){return a._tagRef=b},accessKey:b.accessKey,className:b.className,draggable:b.draggable,
+ role:b.role,style:b.style,tabIndex:b.tabIndex,title:b.title})};return b}(O.Component),$e=function(a){function b(c){ab(this,b);var d=Rd(this,a.call(this,c));["height","width","x","y"].forEach(function(a){Object.defineProperty(d,a,{get:function(){return this._text?this._text[a]:void 0}})});return d}Sd(b,a);b.prototype.render=function(){var a=this;return O.createElement(ia.TEXT,Ve({},this.props,{ref:function(b){return a._text=b}}),Kc(this.props.children))};return b}(O.Component);(function(a){var b=a.findFiberByHostInstance;
+-return ie(ya({},a,{findHostInstanceByFiber:function(a){a=be(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:function(){return null},bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-art"});return{ClippingRectangle:ia.CLIPPING_RECTANGLE,Group:ia.GROUP,Shape:ia.SHAPE,Path:ja.Path,LinearGradient:We,Pattern:Ye,RadialGradient:Xe,Surface:Ze,Text:$e,Transform:C}});
++return ie(ya({},a,{findHostInstanceByFiber:function(a){a=be(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:function(){return null},bundleType:0,version:"1.2.3",rendererPackageName:"react-art"});return{ClippingRectangle:ia.CLIPPING_RECTANGLE,Group:ia.GROUP,Shape:ia.SHAPE,Path:ja.Path,LinearGradient:We,Pattern:Ye,RadialGradient:Xe,Surface:Ze,Text:$e,Transform:C}});
+Index: build/node_modules/react-art/cjs/react-art.development.js
+===================================================================
+--- build/node_modules/react-art/cjs/react-art.development.js
++++ build/node_modules/react-art/cjs/react-art.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-art.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -25,9 +25,9 @@
+ var FastNoSideEffects = require('art/modes/fast-noSideEffects');
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ /**
+  * Use invariant() to assert state which your program assumes to be true.
+  *
+Index: build/node_modules/react-art/cjs/react-art.production.min.js
+===================================================================
+--- build/node_modules/react-art/cjs/react-art.production.min.js
++++ build/node_modules/react-art/cjs/react-art.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-art.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -138,6 +138,6 @@
+ var Sd=Array.prototype.slice,Td=function(){function b(a,c,d,e,f){Rd(this,b);this._args=Sd.call(arguments)}b.prototype.applyFill=function(a){a.fillLinear.apply(a,this._args)};return b}(),Ud=function(){function b(a,c,d,e,f,g,k){Rd(this,b);this._args=Sd.call(arguments)}b.prototype.applyFill=function(a){a.fillRadial.apply(a,this._args)};return b}(),Vd=function(){function b(a,c,d,e,f){Rd(this,b);this._args=Sd.call(arguments)}b.prototype.applyFill=function(a){a.fillImage.apply(a,this._args)};return b}(),
+ Wd=function(b){function a(){Rd(this,a);return Pd(this,b.apply(this,arguments))}Qd(a,b);a.prototype.componentDidMount=function(){var a=this.props,b=this._surface=m.Surface(+a.width,+a.height,this._tagRef);a=L(3,null,null,0);b={current:a,containerInfo:b,pendingChildren:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:-1,context:null,pendingContext:null,hydrate:void 0,
+ nextExpirationTimeToWorkOn:0,expirationTime:0,firstBatch:null,nextScheduledRoot:null};this._mountNode=a.stateNode=b;Nd(this.props.children,this._mountNode,this)};a.prototype.componentDidUpdate=function(a){var b=this.props;b.height===a.height&&b.width===a.width||this._surface.resize(+b.width,+b.height);Nd(this.props.children,this._mountNode,this);this._surface.render&&this._surface.render()};a.prototype.componentWillUnmount=function(){Nd(null,this._mountNode,this)};a.prototype.render=function(){var a=
+ this,b=this.props;return ba.createElement(m.Surface.tagName,{ref:function(b){return a._tagRef=b},accessKey:b.accessKey,className:b.className,draggable:b.draggable,role:b.role,style:b.style,tabIndex:b.tabIndex,title:b.title})};return a}(ba.Component),Xd=function(b){function a(c){Rd(this,a);var d=Pd(this,b.call(this,c));["height","width","x","y"].forEach(function(a){Object.defineProperty(d,a,{get:function(){return this._text?this._text[a]:void 0}})});return d}Qd(a,b);a.prototype.render=function(){var a=
+-this;return ba.createElement(C.TEXT,Od({},this.props,{ref:function(b){return a._text=b}}),Aa(this.props.children))};return a}(ba.Component);(function(b){var a=b.findFiberByHostInstance;return cb(aa({},b,{findHostInstanceByFiber:function(a){a=ya(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(b){return a?a(b):null}}))})({findFiberByHostInstance:function(){return null},bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-art"});
++this;return ba.createElement(C.TEXT,Od({},this.props,{ref:function(b){return a._text=b}}),Aa(this.props.children))};return a}(ba.Component);(function(b){var a=b.findFiberByHostInstance;return cb(aa({},b,{findHostInstanceByFiber:function(a){a=ya(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(b){return a?a(b):null}}))})({findFiberByHostInstance:function(){return null},bundleType:0,version:"1.2.3",rendererPackageName:"react-art"});
+ module.exports={ClippingRectangle:C.CLIPPING_RECTANGLE,Group:C.GROUP,Shape:C.SHAPE,Path:m.Path,LinearGradient:Td,Pattern:Vd,RadialGradient:Ud,Surface:Wd,Text:Xd,Transform:da};
+Index: build/node_modules/react-dom/umd/react-dom-unstable-native-dependencies.production.min.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom-unstable-native-dependencies.production.min.js
++++ build/node_modules/react-dom/umd/react-dom-unstable-native-dependencies.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-unstable-native-dependencies.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/umd/react-dom-server.browser.development.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom-server.browser.development.js
++++ build/node_modules/react-dom/umd/react-dom-server.browser.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-server.browser.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -61,9 +61,9 @@
+ // preserve the format and params in the www builds.
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+ var _assign = ReactInternals.assign;
+Index: build/node_modules/react-dom/umd/react-dom.production.min.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom.production.min.js
++++ build/node_modules/react-dom/umd/react-dom.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -201,5 +201,5 @@
+ 0;b<a.length;b++){var c=a[b];"function"!==typeof c?p("191",c):void 0;c()}}};cb.prototype.render=function(a,b){var c=this._internalRoot,d=new bb;b=void 0===b?null:b;null!==b&&d.then(b);Sd(a,c,null,d._onCommit);return d};cb.prototype.unmount=function(a){var b=this._internalRoot,c=new bb;a=void 0===a?null:a;null!==a&&c.then(a);Sd(null,b,null,c._onCommit);return c};cb.prototype.legacy_renderSubtreeIntoContainer=function(a,b,c){var d=this._internalRoot,e=new bb;c=void 0===c?null:c;null!==c&&e.then(c);
+ Sd(b,d,a,e._onCommit);return e};cb.prototype.createBatch=function(){var a=new Eb(this),b=a._expirationTime,c=this._internalRoot,d=c.firstBatch;if(null===d)c.firstBatch=a,a._next=null;else{for(c=null;null!==d&&d._expirationTime>=b;)c=d,d=d._next;a._next=d;null!==c&&(c._next=a)}return a};(function(a,b,c){te=a;Ue=b;ue=c})(mg,og,function(){M||0===fa||(ha(fa,!1),fa=0)});var Cg={createPortal:qg,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===
+ b&&("function"===typeof a.render?p("188"):p("268",Object.keys(a)));a=Pe(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){return Cc(null,a,b,!0,c)},render:function(a,b,c){return Cc(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){null==a||void 0===a._reactInternalFiber?p("38"):void 0;return Cc(a,b,c,!1,d)},unmountComponentAtNode:function(a){Bc(a)?void 0:p("40");return a._reactRootContainer?(ng(function(){Cc(null,null,a,!1,function(){a._reactRootContainer=null})}),
+ !0):!1},unstable_createPortal:function(){return qg.apply(void 0,arguments)},unstable_batchedUpdates:mg,unstable_interactiveUpdates:og,flushSync:function(a,b){M?p("187"):void 0;var c=B;B=!0;try{return ig(a,b)}finally{B=c,ha(1073741823,!1)}},unstable_flushControlled:function(a){var b=B;B=!0;try{ig(a)}finally{(B=b)||M||ha(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[ee,va,Lc,Vd.injectEventPluginsByName,Gc,Ha,function(a){Ic(a,Lg)},qe,re,Yb,Kc]},unstable_createRoot:function(a,
+-b){Bc(a)?void 0:p("299","unstable_createRoot");return new cb(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return lh(G({},a,{findHostInstanceByFiber:function(a){a=Pe(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Nb,bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-dom"});var Dg={default:Cg},Eg=Dg&&Cg||Dg;return Eg.default||Eg});
++b){Bc(a)?void 0:p("299","unstable_createRoot");return new cb(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return lh(G({},a,{findHostInstanceByFiber:function(a){a=Pe(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Nb,bundleType:0,version:"1.2.3",rendererPackageName:"react-dom"});var Dg={default:Cg},Eg=Dg&&Cg||Dg;return Eg.default||Eg});
+Index: build/node_modules/react-dom/umd/react-dom.profiling.min.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom.profiling.min.js
++++ build/node_modules/react-dom/umd/react-dom.profiling.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom.profiling.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -205,6 +205,6 @@
+ (b=this._callbacks=[]);b.push(a)}};Za.prototype._onCommit=function(){if(!this._didCommit){this._didCommit=!0;var a=this._callbacks;if(null!==a)for(var b=0;b<a.length;b++){var c=a[b];"function"!==typeof c?n("191",c):void 0;c()}}};$a.prototype.render=function(a,b){var c=this._internalRoot,d=new Za;b=void 0===b?null:b;null!==b&&d.then(b);Pd(a,c,null,d._onCommit);return d};$a.prototype.unmount=function(a){var b=this._internalRoot,c=new Za;a=void 0===a?null:a;null!==a&&c.then(a);Pd(null,b,null,c._onCommit);
+ return c};$a.prototype.legacy_renderSubtreeIntoContainer=function(a,b,c){var d=this._internalRoot,e=new Za;c=void 0===c?null:c;null!==c&&e.then(c);Pd(b,d,a,e._onCommit);return e};$a.prototype.createBatch=function(){var a=new Ab(this),b=a._expirationTime,c=this._internalRoot,d=c.firstBatch;if(null===d)c.firstBatch=a,a._next=null;else{for(c=null;null!==d&&d._expirationTime>=b;)c=d,d=d._next;a._next=d;null!==c&&(c._next=a)}return a};(function(a,b,c){qe=a;Re=b;re=c})(lg,ng,function(){L||0===da||(ea(da,
+ !1),da=0)});var Bg={createPortal:pg,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===b&&("function"===typeof a.render?n("188"):n("268",Object.keys(a)));a=Me(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){return yc(null,a,b,!0,c)},render:function(a,b,c){return yc(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){null==a||void 0===a._reactInternalFiber?n("38"):void 0;return yc(a,b,c,!1,d)},unmountComponentAtNode:function(a){xc(a)?
+ void 0:n("40");return a._reactRootContainer?(mg(function(){yc(null,null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:function(){return pg.apply(void 0,arguments)},unstable_batchedUpdates:lg,unstable_interactiveUpdates:ng,flushSync:function(a,b){L?n("187"):void 0;var c=z;z=!0;try{return hg(a,b)}finally{z=c,ea(1073741823,!1)}},unstable_flushControlled:function(a){var b=z;z=!0;try{hg(a)}finally{(z=b)||L||ea(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[be,
+-ta,Ic,Sd.injectEventPluginsByName,Dc,Ha,function(a){Fc(a,Kg)},ne,oe,Ub,Hc]},unstable_createRoot:function(a,b){xc(a)?void 0:n("299","unstable_createRoot");return new $a(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return mh(A({},a,{findHostInstanceByFiber:function(a){a=Me(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Jb,bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-dom"});
++ta,Ic,Sd.injectEventPluginsByName,Dc,Ha,function(a){Fc(a,Kg)},ne,oe,Ub,Hc]},unstable_createRoot:function(a,b){xc(a)?void 0:n("299","unstable_createRoot");return new $a(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return mh(A({},a,{findHostInstanceByFiber:function(a){a=Me(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Jb,bundleType:0,version:"1.2.3",rendererPackageName:"react-dom"});
+ var Cg={default:Bg},Dg=Cg&&Bg||Cg;return Dg.default||Dg});
+Index: build/node_modules/react-dom/umd/react-dom-unstable-native-dependencies.development.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom-unstable-native-dependencies.development.js
++++ build/node_modules/react-dom/umd/react-dom-unstable-native-dependencies.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-unstable-native-dependencies.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js
++++ build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-test-utils.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/umd/react-dom.development.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom.development.js
++++ build/node_modules/react-dom/umd/react-dom.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -19471,9 +19471,9 @@
+ }
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ // TODO: This type is shared between the reconciler and ReactDOM, but will
+ // eventually be lifted out to the renderer.
+ var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+Index: build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js
++++ build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-server.browser.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -36,5 +36,5 @@
+ "__html"in h.dangerouslySetInnerHTML?void 0:v("61")),null!=h.style&&"object"!==typeof h.style?v("62",""):void 0;h=d;e=this.makeStaticMarkup;k=1===this.stack.length;q="<"+a.type;for(x in h)if(za.call(h,x)){var m=h[x];if(null!=m){if("style"===x){p=void 0;var l="",t="";for(p in m)if(m.hasOwnProperty(p)){var n=0===p.indexOf("--"),w=m[p];if(null!=w){var u=p;if(N.hasOwnProperty(u))u=N[u];else{var z=u.replace(va,"-$1").toLowerCase().replace(wa,"-ms-");u=N[u]=z}l+=t+u+":";t=p;n=null==w||"boolean"===typeof w||
+ ""===w?"":n||"number"!==typeof w||0===w||D.hasOwnProperty(t)&&D[t]?(""+w).trim():w+"px";l+=n;t=";"}}m=l||null}p=null;b:if(n=b,w=h,-1===n.indexOf("-"))n="string"===typeof w.is;else switch(n){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":n=!1;break b;default:n=!0}if(n)Aa.hasOwnProperty(x)||(p=x,p=X(p)&&null!=m?p+"="+('"'+B(m)+'"'):"");else{n=x;p=m;m=r.hasOwnProperty(n)?r[n]:null;
+ if(w="style"!==n)w=null!==m?0===m.type:!(2<n.length)||"o"!==n[0]&&"O"!==n[0]||"n"!==n[1]&&"N"!==n[1]?!1:!0;w||na(n,p,m,!1)?p="":null!==m?(n=m.attributeName,m=m.type,p=3===m||4===m&&!0===p?n+'=""':n+"="+('"'+B(p)+'"')):p=X(n)?n+"="+('"'+B(p)+'"'):""}p&&(q+=" "+p)}}e||k&&(q+=' data-reactroot=""');var x=q;h="";fa.hasOwnProperty(b)?x+="/>":(x+=">",h="</"+a.type+">");a:{e=d.dangerouslySetInnerHTML;if(null!=e){if(null!=e.__html){e=e.__html;break a}}else if(e=d.children,"string"===typeof e||"number"===typeof e){e=
+ B(e);break a}e=null}null!=e?(d=[],xa[b]&&"\n"===e.charAt(0)&&(x+="\n"),x+=e):d=A(d.children);a=a.type;c=null==c||"http://www.w3.org/1999/xhtml"===c?da(a):"http://www.w3.org/2000/svg"===c&&"foreignObject"===a?"http://www.w3.org/1999/xhtml":c;this.stack.push({domNamespace:c,type:b,children:d,childIndex:0,context:f,footer:h});this.previousWasTextNode=!1;return x};return a}();k={renderToString:function(a){a=new ia(a,!1);try{return a.read(Infinity)}finally{a.destroy()}},renderToStaticMarkup:function(a){a=
+-new ia(a,!0);try{return a.read(Infinity)}finally{a.destroy()}},renderToNodeStream:function(){v("207")},renderToStaticNodeStream:function(){v("208")},version:"16.6.1-canary-b3d1a81a9"};k=(z={default:k},k)||z;return k.default||k});
++new ia(a,!0);try{return a.read(Infinity)}finally{a.destroy()}},renderToNodeStream:function(){v("207")},renderToStaticNodeStream:function(){v("208")},version:"1.2.3"};k=(z={default:k},k)||z;return k.default||k});
+Index: build/node_modules/react-dom/umd/react-dom-test-utils.development.js
+===================================================================
+--- build/node_modules/react-dom/umd/react-dom-test-utils.development.js
++++ build/node_modules/react-dom/umd/react-dom-test-utils.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-test-utils.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.production.min.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.production.min.js
++++ build/node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-unstable-native-dependencies.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/cjs/react-dom-server.node.production.min.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-server.node.production.min.js
++++ build/node_modules/react-dom/cjs/react-dom-server.node.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-server.node.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -43,5 +43,5 @@
+ !1;break b;default:m=!0}if(m)Ea.hasOwnProperty(x)||(n=x,n=la(n)&&null!=l?n+"="+('"'+T(l)+'"'):"");else{m=x;n=l;l=Q.hasOwnProperty(m)?Q[m]:null;if(t="style"!==m)t=null!==l?0===l.type:!(2<m.length)||"o"!==m[0]&&"O"!==m[0]||"n"!==m[1]&&"N"!==m[1]?!1:!0;t||na(m,n,l,!1)?n="":null!==l?(m=l.attributeName,l=l.type,n=3===l||4===l&&!0===n?m+'=""':m+"="+('"'+T(n)+'"')):n=la(m)?m+"="+('"'+T(n)+'"'):""}n&&(A+=" "+n)}}g||B&&(A+=' data-reactroot=""');var x=A;h="";ua.hasOwnProperty(b)?x+="/>":(x+=">",h="</"+a.type+
+ ">");a:{g=d.dangerouslySetInnerHTML;if(null!=g){if(null!=g.__html){g=g.__html;break a}}else if(g=d.children,"string"===typeof g||"number"===typeof g){g=T(g);break a}g=null}null!=g?(d=[],za[b]&&"\n"===g.charAt(0)&&(x+="\n"),x+=g):d=W(d.children);a=a.type;c=null==c||"http://www.w3.org/1999/xhtml"===c?ta(a):"http://www.w3.org/2000/svg"===c&&"foreignObject"===a?"http://www.w3.org/1999/xhtml":c;this.stack.push({domNamespace:c,type:b,children:d,childIndex:0,context:f,footer:h});this.previousWasTextNode=
+ !1;return x};return a}();function Ha(a,b){if("function"!==typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function, not "+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}});b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}
+ var Ia=function(a){function b(f,c){if(!(this instanceof b))throw new TypeError("Cannot call a class as a function");var e=a.call(this,{});if(!this)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");e=!e||"object"!==typeof e&&"function"!==typeof e?this:e;e.partialRenderer=new Z(f,c);return e}Ha(b,a);b.prototype._destroy=function(){this.partialRenderer.destroy()};b.prototype._read=function(a){try{this.push(this.partialRenderer.read(a))}catch(c){this.destroy(c)}};return b}(aa.Readable),
+-Ja={renderToString:function(a){a=new Z(a,!1);try{return a.read(Infinity)}finally{a.destroy()}},renderToStaticMarkup:function(a){a=new Z(a,!0);try{return a.read(Infinity)}finally{a.destroy()}},renderToNodeStream:function(a){return new Ia(a,!1)},renderToStaticNodeStream:function(a){return new Ia(a,!0)},version:"16.6.1-canary-b3d1a81a9"},Ka={default:Ja},La=Ka&&Ja||Ka;module.exports=La.default||La;
++Ja={renderToString:function(a){a=new Z(a,!1);try{return a.read(Infinity)}finally{a.destroy()}},renderToStaticMarkup:function(a){a=new Z(a,!0);try{return a.read(Infinity)}finally{a.destroy()}},renderToNodeStream:function(a){return new Ia(a,!1)},renderToStaticNodeStream:function(a){return new Ia(a,!0)},version:"1.2.3"},Ka={default:Ja},La=Ka&&Ja||Ka;module.exports=La.default||La;
+Index: build/node_modules/react-dom/cjs/react-dom-server.browser.development.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-server.browser.development.js
++++ build/node_modules/react-dom/cjs/react-dom-server.browser.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-server.browser.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -65,9 +65,9 @@
+ // preserve the format and params in the www builds.
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ /**
+  * 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
+Index: build/node_modules/react-dom/cjs/react-dom.production.min.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom.production.min.js
++++ build/node_modules/react-dom/cjs/react-dom.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -244,6 +244,6 @@
+ function ai(a,b,c,d,e){Zh(c)?void 0:t("200");var f=c._reactRootContainer;if(f){if("function"===typeof e){var g=e;e=function(){var a=Th(f._internalRoot);g.call(a)}}null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)}else{f=c._reactRootContainer=$h(c,d);if("function"===typeof e){var h=e;e=function(){var a=Th(f._internalRoot);h.call(a)}}Ph(function(){null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)})}return Th(f._internalRoot)}
+ function bi(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;Zh(b)?void 0:t("200");return Vh(a,b,null,c)}
+ var ci={createPortal:bi,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===b&&("function"===typeof a.render?t("188"):t("268",Object.keys(a)));a=nd(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){return ai(null,a,b,!0,c)},render:function(a,b,c){return ai(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){null==a||void 0===a._reactInternalFiber?t("38"):void 0;return ai(a,b,c,!1,d)},unmountComponentAtNode:function(a){Zh(a)?
+ void 0:t("40");return a._reactRootContainer?(Ph(function(){ai(null,null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:function(){return bi.apply(void 0,arguments)},unstable_batchedUpdates:Oh,unstable_interactiveUpdates:Qh,flushSync:function(a,b){X?t("187"):void 0;var c=Z;Z=!0;try{return rh(a,b)}finally{Z=c,Lh(1073741823,!1)}},unstable_flushControlled:function(a){var b=Z;Z=!0;try{rh(a)}finally{(Z=b)||X||Lh(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[Ja,
+-Ka,La,Ca.injectEventPluginsByName,qa,Ra,function(a){za(a,Qa)},Ib,Jb,Jd,Ea]},unstable_createRoot:function(a,b){Zh(a)?void 0:t("299","unstable_createRoot");return new Yh(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return Ve(n({},a,{findHostInstanceByFiber:function(a){a=nd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Ia,bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-dom"});
++Ka,La,Ca.injectEventPluginsByName,qa,Ra,function(a){za(a,Qa)},Ib,Jb,Jd,Ea]},unstable_createRoot:function(a,b){Zh(a)?void 0:t("299","unstable_createRoot");return new Yh(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return Ve(n({},a,{findHostInstanceByFiber:function(a){a=nd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Ia,bundleType:0,version:"1.2.3",rendererPackageName:"react-dom"});
+ var fi={default:ci},gi=fi&&ci||fi;module.exports=gi.default||gi;
+Index: build/node_modules/react-dom/cjs/react-dom.profiling.min.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom.profiling.min.js
++++ build/node_modules/react-dom/cjs/react-dom.profiling.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom.profiling.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -255,6 +255,6 @@
+ function di(a,b,c,d,e){bi(c)?void 0:x("200");var f=c._reactRootContainer;if(f){if("function"===typeof e){var g=e;e=function(){var a=Xh(f._internalRoot);g.call(a)}}null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)}else{f=c._reactRootContainer=ci(c,d);if("function"===typeof e){var h=e;e=function(){var a=Xh(f._internalRoot);h.call(a)}}Th(function(){null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)})}return Xh(f._internalRoot)}
+ function ei(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;bi(b)?void 0:x("200");return Yh(a,b,null,c)}
+ var fi={createPortal:ei,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===b&&("function"===typeof a.render?x("188"):x("268",Object.keys(a)));a=jd(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){return di(null,a,b,!0,c)},render:function(a,b,c){return di(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){null==a||void 0===a._reactInternalFiber?x("38"):void 0;return di(a,b,c,!1,d)},unmountComponentAtNode:function(a){bi(a)?
+ void 0:x("40");return a._reactRootContainer?(Th(function(){di(null,null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:function(){return ei.apply(void 0,arguments)},unstable_batchedUpdates:Sh,unstable_interactiveUpdates:Uh,flushSync:function(a,b){V?x("187"):void 0;var c=Y;Y=!0;try{return Ah(a,b)}finally{Y=c,Ph(1073741823,!1)}},unstable_flushControlled:function(a){var b=Y;Y=!0;try{Ah(a)}finally{(Y=b)||V||Ph(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[Ja,
+-Ka,La,Ca.injectEventPluginsByName,pa,Ra,function(a){ya(a,Qa)},Gb,Hb,Fd,Ea]},unstable_createRoot:function(a,b){bi(a)?void 0:x("299","unstable_createRoot");return new ai(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return Ue(n({},a,{findHostInstanceByFiber:function(a){a=jd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Ia,bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-dom"});
++Ka,La,Ca.injectEventPluginsByName,pa,Ra,function(a){ya(a,Qa)},Gb,Hb,Fd,Ea]},unstable_createRoot:function(a,b){bi(a)?void 0:x("299","unstable_createRoot");return new ai(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return Ue(n({},a,{findHostInstanceByFiber:function(a){a=jd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Ia,bundleType:0,version:"1.2.3",rendererPackageName:"react-dom"});
+ var gi={default:fi},hi=gi&&fi||gi;module.exports=hi.default||hi;
+Index: build/node_modules/react-dom/cjs/react-dom-server.node.development.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-server.node.development.js
++++ build/node_modules/react-dom/cjs/react-dom-server.node.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-server.node.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -21,9 +21,9 @@
+ var stream = require('stream');
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ /**
+  * Use invariant() to assert state which your program assumes to be true.
+  *
+Index: build/node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.development.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.development.js
++++ build/node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-unstable-native-dependencies.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/cjs/react-dom-test-utils.production.min.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-test-utils.production.min.js
++++ build/node_modules/react-dom/cjs/react-dom-test-utils.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-test-utils.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-dom/cjs/react-dom.development.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom.development.js
++++ build/node_modules/react-dom/cjs/react-dom.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -19347,9 +19347,9 @@
+ }
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ // TODO: This type is shared between the reconciler and ReactDOM, but will
+ // eventually be lifted out to the renderer.
+ var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+Index: build/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js
++++ build/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-server.browser.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -41,5 +41,5 @@
+ p({selected:void 0,children:void 0},d,{selected:h,children:B})}}if(h=d)ta[b]&&(null!=h.children||null!=h.dangerouslySetInnerHTML?u("137",b,""):void 0),null!=h.dangerouslySetInnerHTML&&(null!=h.children?u("60"):void 0,"object"===typeof h.dangerouslySetInnerHTML&&"__html"in h.dangerouslySetInnerHTML?void 0:u("61")),null!=h.style&&"object"!==typeof h.style?u("62",""):void 0;h=d;f=this.makeStaticMarkup;B=1===this.stack.length;A="<"+a.type;for(x in h)if(Ba.call(h,x)){var l=h[x];if(null!=l){if("style"===
+ x){n=void 0;var k="",r="";for(n in l)if(l.hasOwnProperty(n)){var m=0===n.indexOf("--"),t=l[n];if(null!=t){var v=n;if(Z.hasOwnProperty(v))v=Z[v];else{var K=v.replace(va,"-$1").toLowerCase().replace(wa,"-ms-");v=Z[v]=K}k+=r+v+":";r=n;m=null==t||"boolean"===typeof t||""===t?"":m||"number"!==typeof t||0===t||W.hasOwnProperty(r)&&W[r]?(""+t).trim():t+"px";k+=m;r=";"}}l=k||null}n=null;b:if(m=b,t=h,-1===m.indexOf("-"))m="string"===typeof t.is;else switch(m){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":m=
+ !1;break b;default:m=!0}if(m)Ca.hasOwnProperty(x)||(n=x,n=ja(n)&&null!=l?n+"="+('"'+U(l)+'"'):"");else{m=x;n=l;l=R.hasOwnProperty(m)?R[m]:null;if(t="style"!==m)t=null!==l?0===l.type:!(2<m.length)||"o"!==m[0]&&"O"!==m[0]||"n"!==m[1]&&"N"!==m[1]?!1:!0;t||la(m,n,l,!1)?n="":null!==l?(m=l.attributeName,l=l.type,n=3===l||4===l&&!0===n?m+'=""':m+"="+('"'+U(n)+'"')):n=ja(m)?m+"="+('"'+U(n)+'"'):""}n&&(A+=" "+n)}}f||B&&(A+=' data-reactroot=""');var x=A;h="";sa.hasOwnProperty(b)?x+="/>":(x+=">",h="</"+a.type+
+ ">");a:{f=d.dangerouslySetInnerHTML;if(null!=f){if(null!=f.__html){f=f.__html;break a}}else if(f=d.children,"string"===typeof f||"number"===typeof f){f=U(f);break a}f=null}null!=f?(d=[],xa[b]&&"\n"===f.charAt(0)&&(x+="\n"),x+=f):d=X(d.children);a=a.type;c=null==c||"http://www.w3.org/1999/xhtml"===c?ra(a):"http://www.w3.org/2000/svg"===c&&"foreignObject"===a?"http://www.w3.org/1999/xhtml":c;this.stack.push({domNamespace:c,type:b,children:d,childIndex:0,context:e,footer:h});this.previousWasTextNode=
+-!1;return x};return a}(),Ga={renderToString:function(a){a=new Fa(a,!1);try{return a.read(Infinity)}finally{a.destroy()}},renderToStaticMarkup:function(a){a=new Fa(a,!0);try{return a.read(Infinity)}finally{a.destroy()}},renderToNodeStream:function(){u("207")},renderToStaticNodeStream:function(){u("208")},version:"16.6.1-canary-b3d1a81a9"},Ha={default:Ga},Ia=Ha&&Ga||Ha;module.exports=Ia.default||Ia;
++!1;return x};return a}(),Ga={renderToString:function(a){a=new Fa(a,!1);try{return a.read(Infinity)}finally{a.destroy()}},renderToStaticMarkup:function(a){a=new Fa(a,!0);try{return a.read(Infinity)}finally{a.destroy()}},renderToNodeStream:function(){u("207")},renderToStaticNodeStream:function(){u("208")},version:"1.2.3"},Ha={default:Ga},Ia=Ha&&Ga||Ha;module.exports=Ia.default||Ia;
+Index: build/node_modules/react-dom/cjs/react-dom-test-utils.development.js
+===================================================================
+--- build/node_modules/react-dom/cjs/react-dom-test-utils.development.js
++++ build/node_modules/react-dom/cjs/react-dom-test-utils.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-dom-test-utils.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-is/umd/react-is.development.js
+===================================================================
+--- build/node_modules/react-is/umd/react-is.development.js
++++ build/node_modules/react-is/umd/react-is.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-is.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-is/umd/react-is.production.min.js
+===================================================================
+--- build/node_modules/react-is/umd/react-is.production.min.js
++++ build/node_modules/react-is/umd/react-is.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-is.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-is/cjs/react-is.development.js
+===================================================================
+--- build/node_modules/react-is/cjs/react-is.development.js
++++ build/node_modules/react-is/cjs/react-is.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-is.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-is/cjs/react-is.production.min.js
+===================================================================
+--- build/node_modules/react-is/cjs/react-is.production.min.js
++++ build/node_modules/react-is/cjs/react-is.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-is.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-reconciler/cjs/react-reconciler.development.js
+===================================================================
+--- build/node_modules/react-reconciler/cjs/react-reconciler.development.js
++++ build/node_modules/react-reconciler/cjs/react-reconciler.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-reconciler.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-reconciler/cjs/react-reconciler.production.min.js
+===================================================================
+--- build/node_modules/react-reconciler/cjs/react-reconciler.production.min.js
++++ build/node_modules/react-reconciler/cjs/react-reconciler.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-reconciler.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-reconciler/cjs/react-reconciler-persistent.development.js
+===================================================================
+--- build/node_modules/react-reconciler/cjs/react-reconciler-persistent.development.js
++++ build/node_modules/react-reconciler/cjs/react-reconciler-persistent.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-reconciler-persistent.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-reconciler/cjs/react-reconciler-persistent.production.min.js
+===================================================================
+--- build/node_modules/react-reconciler/cjs/react-reconciler-persistent.production.min.js
++++ build/node_modules/react-reconciler/cjs/react-reconciler-persistent.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-reconciler-persistent.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-reconciler/cjs/react-reconciler-reflection.production.min.js
+===================================================================
+--- build/node_modules/react-reconciler/cjs/react-reconciler-reflection.production.min.js
++++ build/node_modules/react-reconciler/cjs/react-reconciler-reflection.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-reconciler-reflection.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-reconciler/cjs/react-reconciler-reflection.development.js
+===================================================================
+--- build/node_modules/react-reconciler/cjs/react-reconciler-reflection.development.js
++++ build/node_modules/react-reconciler/cjs/react-reconciler-reflection.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-reconciler-reflection.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-test-renderer/umd/react-test-renderer-shallow.development.js
+===================================================================
+--- build/node_modules/react-test-renderer/umd/react-test-renderer-shallow.development.js
++++ build/node_modules/react-test-renderer/umd/react-test-renderer-shallow.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer-shallow.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-test-renderer/umd/react-test-renderer-shallow.production.min.js
+===================================================================
+--- build/node_modules/react-test-renderer/umd/react-test-renderer-shallow.production.min.js
++++ build/node_modules/react-test-renderer/umd/react-test-renderer-shallow.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer-shallow.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-test-renderer/umd/react-test-renderer.development.js
+===================================================================
+--- build/node_modules/react-test-renderer/umd/react-test-renderer.development.js
++++ build/node_modules/react-test-renderer/umd/react-test-renderer.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -11622,9 +11622,9 @@
+ }
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+Index: build/node_modules/react-test-renderer/umd/react-test-renderer.production.min.js
+===================================================================
+--- build/node_modules/react-test-renderer/umd/react-test-renderer.production.min.js
++++ build/node_modules/react-test-renderer/umd/react-test-renderer.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -117,5 +117,5 @@
+ !0===b.unstable_isConcurrent&&(d=!0));var e={children:[],createNodeMock:c,tag:"CONTAINER"},g=Gd(e,d,!1);null==g?n("215"):void 0;ac(a,g,null,null);a={root:void 0,toJSON:function(){if(null==g||null==g.current||null==e||0===e.children.length)return null;if(1===e.children.length)return bc(e.children[0]);var a=null;if(e.children&&e.children.length)for(var b=0;b<e.children.length;b++){var c=bc(e.children[b]);null!==c&&(null===a?a=[c]:a.push(c))}return a},toTree:function(){return null==g||null==g.current?
+ null:sb(g.current)},update:function(a){null!=g&&null!=g.current&&ac(a,g,null,null)},unmount:function(){null!=g&&null!=g.current&&(ac(null,g,null,null),g=e=null)},getInstance:function(){if(null==g||null==g.current)return null;a:{var a=g.current;if(a.child)switch(a.child.tag){case 5:a=Ra(a.child.stateNode);break a;default:a=a.child.stateNode}else a=null}return a},unstable_flushAll:Ad,unstable_flushSync:function(a){Ab();a:{la?n("187"):void 0;var b=ob;ob=!0;try{b:{var c=Ia;Ia=1073741823;try{var d=a(void 0,
+ void 0,void 0,void 0);break b}finally{Ia=c}d=void 0}break a}finally{ob=b,mb(1073741823,!1)}d=void 0}return d},unstable_flushNumberOfYields:Bd,unstable_clearLog:Ab};Object.defineProperty(a,"root",{configurable:!0,enumerable:!0,get:function(){if(null===g)throw Error("Can't access .root on unmounted test renderer");var a=cc(g.current);if(0===a.length)throw Error("Can't access .root on unmounted test renderer");return 1===a.length?a[0]:ec(g.current)}});return a},unstable_yield:function(a){I.push(a)},
+ unstable_clearLog:Ab,unstable_batchedUpdates:function(a,b){if(jc)return a(b);jc=!0;try{return a(b)}finally{if(jc=!1,(null!==ub||null!==ic)&&ub&&(b=ub,a=ic,ic=ub=null,td(b),a))for(b=0;b<a.length;b++)td(a[b])}},unstable_setNowImplementation:function(a){jb=a}},gc=new WeakMap;(function(a){var b=a.findFiberByHostInstance;return Dd(V({},a,{findHostInstanceByFiber:function(a){a=zd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:function(){throw Error("TestRenderer does not support findFiberByHostInstance()");
+-},bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-test-renderer"});var xd={default:wd},yd=xd&&wd||xd;return yd.default||yd});
++},bundleType:0,version:"1.2.3",rendererPackageName:"react-test-renderer"});var xd={default:wd},yd=xd&&wd||xd;return yd.default||yd});
+Index: build/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js
+===================================================================
+--- build/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js
++++ build/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer-shallow.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.production.min.js
+===================================================================
+--- build/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.production.min.js
++++ build/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer-shallow.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/react-test-renderer/cjs/react-test-renderer.development.js
+===================================================================
+--- build/node_modules/react-test-renderer/cjs/react-test-renderer.development.js
++++ build/node_modules/react-test-renderer/cjs/react-test-renderer.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -11498,9 +11498,9 @@
+ }
+
+ // TODO: this is special because it gets imported during build.
+
+-var ReactVersion = '16.6.1-canary-b3d1a81a9';
++var ReactVersion = '1.2.3';
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+Index: build/node_modules/react-test-renderer/cjs/react-test-renderer.production.min.js
+===================================================================
+--- build/node_modules/react-test-renderer/cjs/react-test-renderer.production.min.js
++++ build/node_modules/react-test-renderer/cjs/react-test-renderer.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * react-test-renderer.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+@@ -140,5 +140,5 @@
+ var $d={create:function(a,b){var c=Nd.createNodeMock,d=!1;"object"===typeof b&&null!==b&&("function"===typeof b.createNodeMock&&(c=b.createNodeMock),!0===b.unstable_isConcurrent&&(d=!0));var e={children:[],createNodeMock:c,tag:"CONTAINER"},g=eb(e,d,!1);null==g?n("215"):void 0;Hd(a,g,null,null);a={root:void 0,toJSON:function(){if(null==g||null==g.current||null==e||0===e.children.length)return null;if(1===e.children.length)return Od(e.children[0]);var a=null;if(e.children&&e.children.length)for(var b=
+ 0;b<e.children.length;b++){var c=Od(e.children[b]);null!==c&&(null===a?a=[c]:a.push(c))}return a},toTree:function(){return null==g||null==g.current?null:Sd(g.current)},update:function(a){null!=g&&null!=g.current&&Hd(a,g,null,null)},unmount:function(){null!=g&&null!=g.current&&(Hd(null,g,null,null),g=e=null)},getInstance:function(){if(null==g||null==g.current)return null;a:{var a=g.current;if(a.child)switch(a.child.tag){case 5:a=Ea(a.child.stateNode);break a;default:a=a.child.stateNode}else a=null}return a},
+ unstable_flushAll:za,unstable_flushSync:function(a){Ba();a:{pd?n("187"):void 0;var b=sd;sd=!0;try{b:{var c=Vc;Vc=1073741823;try{var d=a(void 0,void 0,void 0,void 0);break b}finally{Vc=c}d=void 0}break a}finally{sd=b,Dd(1073741823,!1)}d=void 0}return d},unstable_flushNumberOfYields:Aa,unstable_clearLog:Ba};Object.defineProperty(a,"root",{configurable:!0,enumerable:!0,get:function(){if(null===g)throw Error("Can't access .root on unmounted test renderer");var a=Vd(g.current);if(0===a.length)throw Error("Can't access .root on unmounted test renderer");
+ return 1===a.length?a[0]:Wd(g.current)}});return a},unstable_yield:function(a){D.push(a)},unstable_clearLog:Ba,unstable_batchedUpdates:function(a,b){if(Ld)return a(b);Ld=!0;try{return a(b)}finally{if(Ld=!1,(null!==Id||null!==Jd)&&Id&&(b=Id,a=Jd,Jd=Id=null,Kd(b),a))for(b=0;b<a.length;b++)Kd(a[b])}},unstable_setNowImplementation:function(a){wa=a}},ae=new WeakMap;function Wd(a){var b=ae.get(a);void 0===b&&null!==a.alternate&&(b=ae.get(a.alternate));void 0===b&&(b=new Zd(a),ae.set(a,b));return b}
+-(function(a){var b=a.findFiberByHostInstance;return Wa(m({},a,{findHostInstanceByFiber:function(a){a=va(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:function(){throw Error("TestRenderer does not support findFiberByHostInstance()");},bundleType:0,version:"16.6.1-canary-b3d1a81a9",rendererPackageName:"react-test-renderer"});var be={default:$d},ce=be&&$d||be;module.exports=ce.default||ce;
++(function(a){var b=a.findFiberByHostInstance;return Wa(m({},a,{findHostInstanceByFiber:function(a){a=va(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:function(){throw Error("TestRenderer does not support findFiberByHostInstance()");},bundleType:0,version:"1.2.3",rendererPackageName:"react-test-renderer"});var be={default:$d},ce=be&&$d||be;module.exports=ce.default||ce;
+Index: build/node_modules/scheduler/cjs/scheduler.development.js
+===================================================================
+--- build/node_modules/scheduler/cjs/scheduler.development.js
++++ build/node_modules/scheduler/cjs/scheduler.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * scheduler.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/scheduler/cjs/scheduler.production.min.js
+===================================================================
+--- build/node_modules/scheduler/cjs/scheduler.production.min.js
++++ build/node_modules/scheduler/cjs/scheduler.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * scheduler.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/scheduler/cjs/scheduler-tracing.production.min.js
+===================================================================
+--- build/node_modules/scheduler/cjs/scheduler-tracing.production.min.js
++++ build/node_modules/scheduler/cjs/scheduler-tracing.production.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * scheduler-tracing.production.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/scheduler/cjs/scheduler-tracing.profiling.min.js
+===================================================================
+--- build/node_modules/scheduler/cjs/scheduler-tracing.profiling.min.js
++++ build/node_modules/scheduler/cjs/scheduler-tracing.profiling.min.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * scheduler-tracing.profiling.min.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
+Index: build/node_modules/scheduler/cjs/scheduler-tracing.development.js
+===================================================================
+--- build/node_modules/scheduler/cjs/scheduler-tracing.development.js
++++ build/node_modules/scheduler/cjs/scheduler-tracing.development.js
+@@ -1,5 +1,5 @@
+-/** @license React v0.0.0-b3d1a81a9
++/** @license React v1.2.3
+  * scheduler-tracing.development.js
+  *
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+  *
diff --git a/scripts/release/theme.js b/scripts/release/theme.js
new file mode 100644
index 00000000000..5e3ef374f96
--- /dev/null
+++ b/scripts/release/theme.js
@@ -0,0 +1,36 @@
+'use strict';
+
+const chalk = require('chalk');
+
+const colors = {
+  blue: '#0091ea',
+  gray: '#78909c',
+  green: '#00c853',
+  red: '#d50000',
+  yellow: '#ffd600',
+};
+
+const theme = chalk.constructor();
+theme.package = theme.hex(colors.green);
+theme.version = theme.hex(colors.yellow);
+theme.tag = theme.hex(colors.yellow);
+theme.build = theme.hex(colors.yellow);
+theme.commit = theme.hex(colors.yellow);
+theme.error = theme.hex(colors.red).bold;
+theme.dimmed = theme.hex(colors.gray);
+theme.caution = theme.hex(colors.red).bold;
+theme.link = theme.hex(colors.blue).underline.italic;
+theme.header = theme.hex(colors.green).bold;
+theme.path = theme.hex(colors.gray).italic;
+theme.command = theme.hex(colors.gray);
+theme.quote = theme.italic;
+
+theme.diffHeader = theme.hex(colors.gray);
+theme.diffAdded = theme.hex(colors.green);
+theme.diffRemoved = theme.hex(colors.red);
+
+theme.spinnerInProgress = theme.hex(colors.yellow);
+theme.spinnerError = theme.hex(colors.red);
+theme.spinnerSuccess = theme.hex(colors.green);
+
+module.exports = theme;
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
new file mode 100644
index 00000000000..10b3a9e91b5
--- /dev/null
+++ b/scripts/release/utils.js
@@ -0,0 +1,273 @@
+'use strict';
+
+const {exec} = require('child-process-promise');
+const {createPatch} = require('diff');
+const {hashElement} = require('folder-hash');
+const {existsSync, readFileSync, writeFileSync} = require('fs');
+const {readJson, writeJson} = require('fs-extra');
+const logUpdate = require('log-update');
+const {join} = require('path');
+const createLogger = require('progress-estimator');
+const prompt = require('prompt-promise');
+const theme = require('./theme');
+const {stablePackages, experimentalPackages} = require('../../ReactVersions');
+
+// https://www.npmjs.com/package/progress-estimator#configuration
+const logger = createLogger({
+  storagePath: join(__dirname, '.progress-estimator'),
+});
+
+const addDefaultParamValue = (optionalShortName, longName, defaultValue) => {
+  let found = false;
+  for (let i = 0; i < process.argv.length; i++) {
+    const current = process.argv[i];
+    if (current === optionalShortName || current.startsWith(`${longName}=`)) {
+      found = true;
+      break;
+    }
+  }
+
+  if (!found) {
+    process.argv.push(`${longName}=${defaultValue}`);
+  }
+};
+
+const confirm = async message => {
+  const confirmation = await prompt(theme`\n{caution ${message}} (y/N) `);
+  prompt.done();
+  if (confirmation !== 'y' && confirmation !== 'Y') {
+    console.log(theme`\n{caution Release cancelled.}`);
+    process.exit(0);
+  }
+};
+
+const execRead = async (command, options) => {
+  const {stdout} = await exec(command, options);
+
+  return stdout.trim();
+};
+
+const extractCommitFromVersionNumber = version => {
+  // Support stable version format e.g. "0.0.0-0e526bcec-20210202"
+  // and experimental version format e.g. "0.0.0-experimental-0e526bcec-20210202"
+  const match = version.match(/0\.0\.0\-([a-z]+\-){0,1}([^-]+).+/);
+  if (match === null) {
+    throw Error(`Could not extra commit from version "${version}"`);
+  }
+  return match[2];
+};
+
+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 --no-show-signature --format=%h', {
+    cwd,
+  });
+  const checksum = await getChecksumForCurrentRevision(cwd);
+  const dateString = await getDateStringForCommit(commit);
+  const version = isExperimental
+    ? `0.0.0-experimental-${commit}-${dateString}`
+    : `0.0.0-${commit}-${dateString}`;
+
+  // React version is stored explicitly, separately for DevTools support.
+  // See updateVersionsForNext() below for more info.
+  const packageJSON = await readJson(
+    join(cwd, 'packages', 'react', 'package.json')
+  );
+  const reactVersion = isExperimental
+    ? `${packageJSON.version}-experimental-${commit}-${dateString}`
+    : `${packageJSON.version}-${commit}-${dateString}`;
+
+  return {branch, checksum, commit, reactVersion, version};
+};
+
+const getChecksumForCurrentRevision = async cwd => {
+  const packagesDir = join(cwd, 'packages');
+  const hashedPackages = await hashElement(packagesDir, {
+    encoding: 'hex',
+    files: {exclude: ['.DS_Store']},
+  });
+  return hashedPackages.hash.slice(0, 7);
+};
+
+const getDateStringForCommit = async commit => {
+  let dateString = await execRead(
+    `git show -s --no-show-signature --format=%cd --date=format:%Y%m%d ${commit}`
+  );
+
+  // On CI environment, this string is wrapped with quotes '...'s
+  if (dateString.startsWith("'")) {
+    dateString = dateString.slice(1, 9);
+  }
+
+  return dateString;
+};
+
+const getCommitFromCurrentBuild = async () => {
+  const cwd = join(__dirname, '..', '..');
+
+  // If this build includes a build-info.json file, extract the commit from it.
+  // Otherwise fall back to parsing from the package version number.
+  // This is important to make the build reproducible (e.g. by Mozilla reviewers).
+  const buildInfoJSON = join(
+    cwd,
+    'build',
+    'oss-experimental',
+    'react',
+    'build-info.json'
+  );
+  if (existsSync(buildInfoJSON)) {
+    const buildInfo = await readJson(buildInfoJSON);
+    return buildInfo.commit;
+  } else {
+    const packageJSON = join(
+      cwd,
+      'build',
+      'oss-experimental',
+      'react',
+      'package.json'
+    );
+    const {version} = await readJson(packageJSON);
+    return extractCommitFromVersionNumber(version);
+  }
+};
+
+const getPublicPackages = isExperimental => {
+  const packageNames = Object.keys(stablePackages);
+  if (isExperimental) {
+    packageNames.push(...experimentalPackages);
+  }
+  return packageNames;
+};
+
+const handleError = error => {
+  logUpdate.clear();
+
+  const message = error.message.trim().replace(/\n +/g, '\n');
+  const stack = error.stack.replace(error.message, '');
+
+  console.log(theme`{error ${message}}\n\n{path ${stack}}`);
+  process.exit(1);
+};
+
+const logPromise = async (promise, text, estimate) =>
+  logger(promise, text, {estimate});
+
+const printDiff = (path, beforeContents, afterContents) => {
+  const patch = createPatch(path, beforeContents, afterContents);
+  const coloredLines = patch
+    .split('\n')
+    .slice(2) // Trim index file
+    .map((line, index) => {
+      if (index <= 1) {
+        return theme.diffHeader(line);
+      }
+      switch (line[0]) {
+        case '+':
+          return theme.diffAdded(line);
+        case '-':
+          return theme.diffRemoved(line);
+        case ' ':
+          return line;
+        case '@':
+          return null;
+        case '\\':
+          return null;
+      }
+    })
+    .filter(line => line);
+  console.log(coloredLines.join('\n'));
+  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".
+// Canaries version numbers use the format of 0.0.0-<sha>-<date> to be easily recognized (e.g. 0.0.0-01974a867-20200129).
+// A separate "React version" is used for the embedded renderer version to support DevTools,
+// since it needs to distinguish between different version ranges of React.
+// It is based on the version of React in the local package.json (e.g. 16.12.0-01974a867-20200129).
+// Both numbers will be replaced if the "next" release is promoted to a stable release.
+const updateVersionsForNext = async (cwd, reactVersion, version) => {
+  const isExperimental = reactVersion.includes('experimental');
+  const packages = getPublicPackages(isExperimental);
+  const packagesDir = join(cwd, 'packages');
+
+  // Update the shared React version source file.
+  // This is bundled into built renderers.
+  // The promote script will replace this with a final version later.
+  const sourceReactVersionPath = join(cwd, 'packages/shared/ReactVersion.js');
+  const sourceReactVersion = readFileSync(
+    sourceReactVersionPath,
+    'utf8'
+  ).replace(/export default '[^']+';/, `export default '${reactVersion}';`);
+  writeFileSync(sourceReactVersionPath, sourceReactVersion);
+
+  // Update the root package.json.
+  // This is required to pass a later version check script.
+  {
+    const packageJSONPath = join(cwd, 'package.json');
+    const packageJSON = await readJson(packageJSONPath);
+    packageJSON.version = version;
+    await writeJson(packageJSONPath, packageJSON, {spaces: 2});
+  }
+
+  for (let i = 0; i < packages.length; i++) {
+    const packageName = packages[i];
+    const packagePath = join(packagesDir, packageName);
+
+    // Update version numbers in package JSONs
+    const packageJSONPath = join(packagePath, 'package.json');
+    const packageJSON = await readJson(packageJSONPath);
+    packageJSON.version = version;
+
+    // Also update inter-package dependencies.
+    // Next releases always have exact version matches.
+    // The promote script may later relax these (e.g. "^x.x.x") based on source package JSONs.
+    const {dependencies, peerDependencies} = packageJSON;
+    for (let j = 0; j < packages.length; j++) {
+      const dependencyName = packages[j];
+      if (dependencies && dependencies[dependencyName]) {
+        dependencies[dependencyName] = version;
+      }
+      if (peerDependencies && peerDependencies[dependencyName]) {
+        peerDependencies[dependencyName] = version;
+      }
+    }
+
+    await writeJson(packageJSONPath, packageJSON, {spaces: 2});
+  }
+};
+
+module.exports = {
+  addDefaultParamValue,
+  confirm,
+  execRead,
+  getBuildInfo,
+  getChecksumForCurrentRevision,
+  getCommitFromCurrentBuild,
+  getDateStringForCommit,
+  getPublicPackages,
+  handleError,
+  logPromise,
+  printDiff,
+  splitCommaParams,
+  theme,
+  updateVersionsForNext,
+};
diff --git a/scripts/release/yarn.lock b/scripts/release/yarn.lock
new file mode 100644
index 00000000000..e5bdb7e5972
--- /dev/null
+++ b/scripts/release/yarn.lock
@@ -0,0 +1,928 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+accepts@^1.2.5, accepts@~1.3.3:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  integrity sha1-63d99gEXI6OxTopywIBcjoZ0a9I=
+  dependencies:
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+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"
+
+ansi-escape-sequences@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escape-sequences/-/ansi-escape-sequences-4.0.0.tgz#e0ecb042958b71e42942d35c1fcf1d9b00a0f67e"
+  dependencies:
+    array-back "^2.0.0"
+
+ansi-escapes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
+
+ansi-escapes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
+  integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
+ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.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"
+
+array-back@^1.0.3, array-back@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/array-back/-/array-back-1.0.4.tgz#644ba7f095f7ffcf7c43b5f0dc39d3c1f03c063b"
+  dependencies:
+    typical "^2.6.0"
+
+array-back@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/array-back/-/array-back-2.0.0.tgz#6877471d51ecc9c9bfa6136fb6c7d5fe69748022"
+  dependencies:
+    typical "^2.6.1"
+
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
+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=
+
+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"
+
+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==
+
+bytes@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.5.0.tgz#4c9423ea2d252c270c41b2bdefeff9bb6b62c06a"
+  integrity sha1-TJQj6i0lLCcMQbK97+/5u2tiwGo=
+
+chalk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chalk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+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"
+  dependencies:
+    cross-spawn "^4.0.2"
+    node-version "^1.0.0"
+    promise-polyfill "^6.0.1"
+
+clear@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/clear/-/clear-0.1.0.tgz#b81b1e03437a716984fd7ac97c87d73bdfe7048a"
+  integrity sha512-qMjRnoL+JDPJHeLePZJuao6+8orzHMGP04A8CdwCNsKhRbOnKRjefxONR7bwILT3MHecxKBjHkKL/tkZ8r4Uzw==
+
+cli-cursor@^2.0.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-spinners@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.1.0.tgz#f1847b168844d917a671eb9d147e3df497c90d06"
+
+cli-spinners@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
+  integrity sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==
+
+color-convert@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  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"
+
+command-line-args@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-4.0.7.tgz#f8d1916ecb90e9e121eda6428e41300bfb64cc46"
+  dependencies:
+    array-back "^2.0.0"
+    find-replace "^1.0.3"
+    typical "^2.6.1"
+
+command-line-usage@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/command-line-usage/-/command-line-usage-4.0.1.tgz#d89cf16c8ae71e8e8a6e6aabae1652af76ff644e"
+  dependencies:
+    ansi-escape-sequences "^4.0.0"
+    array-back "^2.0.0"
+    table-layout "^0.4.1"
+    typical "^2.6.1"
+
+compressible@~2.0.10:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.15.tgz#857a9ab0a7e5a07d8d837ed43fe2defff64fe212"
+  integrity sha512-4aE67DL33dSW9gw4CI2H/yTxqHLNcxp0yS6jB+4h+wr3e43+1z7vm0HU9qXOH8j+qjKuL8+UtkOxYQSMq60Ylw==
+  dependencies:
+    mime-db ">= 1.36.0 < 2"
+
+compression@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.0.tgz#030c9f198f1643a057d776a738e922da4373012d"
+  integrity sha1-AwyfGY8WQ6BX13anOOki2kNzAS0=
+  dependencies:
+    accepts "~1.3.3"
+    bytes "2.5.0"
+    compressible "~2.0.10"
+    debug "2.6.8"
+    on-headers "~1.0.1"
+    safe-buffer "5.1.1"
+    vary "~1.1.1"
+
+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:
+  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"
+
+connect-static-file@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/connect-static-file/-/connect-static-file-1.2.0.tgz#ad7c2ce423acf0808b15a18ad3268035098e3747"
+  integrity sha1-rXws5COs8ICLFaGK0yaANQmON0c=
+  dependencies:
+    accepts "^1.2.5"
+    mime "^1.3.4"
+    send "^0.15.3"
+
+connect@3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.2.tgz#694e8d20681bfe490282c8ab886be98f09f42fe7"
+  integrity sha1-aU6NIGgb/kkCgsiriGvpjwn0L+c=
+  dependencies:
+    debug "2.6.7"
+    finalhandler "1.0.3"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+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"
+
+cross-spawn@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+debug@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
+  integrity sha1-krrR9tBbu2u6Isyoi80OyJTChh4=
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  integrity sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=
+  dependencies:
+    ms "2.0.0"
+
+debug@2.6.9:
+  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:
+  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"
+
+debug@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
+  integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
+  dependencies:
+    ms "^2.1.1"
+
+deep-extend@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.0.tgz#6ef4a09b05f98b0e358d6d93d4ca3caec6672803"
+
+depd@~1.1.0, depd@~1.1.1, depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+
+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=
+
+encodeurl@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+es6-promise@^4.0.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+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-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:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+etag@~1.8.0, etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+extract-zip@^1.6.6:
+  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"
+
+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"
+
+finalhandler@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.3.tgz#ef47e77950e999780e86022a560e3217e0d0cc89"
+  integrity sha1-70fneVDpmXgOhgIqVg4yF+DQzIk=
+  dependencies:
+    debug "2.6.7"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+find-replace@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/find-replace/-/find-replace-1.0.3.tgz#b88e7364d2d9c959559f388c66670d6130441fa0"
+  dependencies:
+    array-back "^1.0.4"
+    test-value "^2.1.0"
+
+folder-hash@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/folder-hash/-/folder-hash-2.1.2.tgz#7109f9cd0cbca271936d1b5544b156d6571e6cfd"
+  integrity sha512-PmMwEZyNN96EMshf7sek4OIB7ADNsHOJ7VIw7pO0PBI0BNfEsi7U8U56TBjjqqwQ0WuBv8se0HEfmbw5b/Rk+w==
+  dependencies:
+    debug "^3.1.0"
+    graceful-fs "~4.1.11"
+    minimatch "~3.0.4"
+
+fresh@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+  integrity sha1-9HTKXmqSRtb9jglTz6m5yAWvp44=
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+fs-extra@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+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=
+
+glob@^7.0.5:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  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"
+
+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.11:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
+  integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
+
+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=
+
+http-errors@~1.6.1, 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"
+
+https-proxy-agent@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
+humanize-duration@^3.15.3:
+  version "3.15.3"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.15.3.tgz#600a939bd9d9a16b696e907b3fc08d1a4f15e8c9"
+  integrity sha512-BMz6w8p3NVa6QP9wDtqUkXfwgBqDaZ5z/np0EYdoWrLqL849Onp6JWMXMhbHtuvO9jUThLN5H1ThRQ8dUWnYkA==
+
+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.3, inherits@^2.0.3, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+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"
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+
+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"
+
+keypress@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/keypress/-/keypress-0.2.1.tgz#1e80454250018dbad4c3fe94497d6e67b6269c77"
+
+lodash.padend@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.padend/-/lodash.padend-4.6.1.tgz#53ccba047d06e158d311f45da625f4e49e6f166e"
+
+log-update@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.1.0.tgz#ea37258b5354edb02e73b29190016c87d1c87141"
+  dependencies:
+    ansi-escapes "^2.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^3.0.1"
+
+log-update@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
+  integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
+  dependencies:
+    ansi-escapes "^3.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^3.0.1"
+
+lru-cache@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+"mime-db@>= 1.36.0 < 2", mime-db@~1.37.0:
+  version "1.37.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
+  integrity sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==
+
+mime-types@~2.1.18:
+  version "2.1.21"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
+  integrity sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==
+  dependencies:
+    mime-db "~1.37.0"
+
+mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+  integrity sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM=
+
+mime@^1.3.4:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mime@^2.0.3:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.0.tgz#e051fd881358585f3279df333fe694da0bcffdd6"
+  integrity sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==
+
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
+minimatch@^3.0.4, 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=
+
+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"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+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==
+
+native-or-another@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/native-or-another/-/native-or-another-2.0.0.tgz#17a567f92beea9cd71acff96a7681a735eca3bff"
+  dependencies:
+    native-or-bluebird "^1.1.2"
+
+native-or-bluebird@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz#39c47bfd7825d1fb9ffad32210ae25daadf101c9"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+  integrity sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=
+
+node-version@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.1.0.tgz#f437d7ba407e65e2c4eaef8887b1718ba523d4f0"
+
+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.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+  integrity sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  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"
+
+parseurl@~1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+  integrity sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=
+
+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"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
+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==
+
+progress-estimator@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/progress-estimator/-/progress-estimator-0.2.1.tgz#deae08447fd858a0bf6a1067c4fbac1b4dad3cb0"
+  integrity sha512-KTwtucRIgJufTIf+eXjJzP8aLKs1PxuLtz/4SsGzTtvTA19+eG9uTG5XrpjK2o2mC9H63HLKg/TQsvdCN5JbEQ==
+  dependencies:
+    chalk "^2.4.1"
+    cli-spinners "^1.3.1"
+    humanize-duration "^3.15.3"
+    log-update "^2.3.0"
+
+progress@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.1.tgz#c9242169342b1c29d275889c95734621b1952e31"
+  integrity sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==
+
+promise-polyfill@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.0.2.tgz#d9c86d3dc4dc2df9016e88946defd69b49b41162"
+
+prompt-promise@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/prompt-promise/-/prompt-promise-1.0.3.tgz#78ce4fcb9a14a108c49174f2d808c440d1bde265"
+  dependencies:
+    keypress "~0.2.1"
+    native-or-another "~2.0.0"
+
+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=
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+puppeteer@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.11.0.tgz#63cdbe12b07275cd6e0b94bce41f3fcb20305770"
+  integrity sha512-iG4iMOHixc2EpzqRV+pv7o3GgmU2dNYEMkvKwSaQO/vMZURakwSOn/EYJ6OIRFYOque1qorzIBvrytPIQB3YzQ==
+  dependencies:
+    debug "^4.1.0"
+    extract-zip "^1.6.6"
+    https-proxy-agent "^2.2.1"
+    mime "^2.0.3"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^2.6.1"
+    ws "^6.1.0"
+
+pushstate-server@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/pushstate-server/-/pushstate-server-3.0.1.tgz#b108b867c9c069192e2fe5b47efdf6c76de7d6ad"
+  integrity sha1-sQi4Z8nAaRkuL+W0fv32x23n1q0=
+  dependencies:
+    compression "1.7.0"
+    connect "3.6.2"
+    connect-static-file "1.2.0"
+    serve-static "1.12.3"
+
+range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+  integrity sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=
+
+readable-stream@^2.2.2:
+  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"
+    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"
+
+reduce-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-1.0.1.tgz#258c78efd153ddf93cb561237f61184f3696e327"
+
+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"
+
+rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  integrity sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==
+  dependencies:
+    glob "^7.0.5"
+
+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.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==
+
+semver@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+send@0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.3.tgz#5013f9f99023df50d1bd9892c19e3defd1d53309"
+  integrity sha1-UBP5+ZAj31DRvZiSwZ4979HVMwk=
+  dependencies:
+    debug "2.6.7"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.0"
+    fresh "0.5.0"
+    http-errors "~1.6.1"
+    mime "1.3.4"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+send@^0.15.3:
+  version "0.15.6"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.6.tgz#20f23a9c925b762ab82705fe2f9db252ace47e34"
+  integrity sha1-IPI6nJJbdiq4JwX+L52yUqzkfjQ=
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.3.4"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+serve-static@1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.3.tgz#9f4ba19e2f3030c547f8af99107838ec38d5b1e2"
+  integrity sha1-n0uhni8wMMVH+K+ZEHg47DjVseI=
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.15.3"
+
+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==
+
+signal-exit@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+statuses@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+  integrity sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=
+
+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_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"
+
+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"
+
+supports-color@^4.0.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
+  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"
+
+table-layout@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-0.4.2.tgz#10e9043c142a1e2d155da7257e478f0ef4981786"
+  dependencies:
+    array-back "^2.0.0"
+    deep-extend "~0.5.0"
+    lodash.padend "^4.6.1"
+    typical "^2.6.1"
+    wordwrapjs "^3.0.0"
+
+test-value@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/test-value/-/test-value-2.1.0.tgz#11da6ff670f3471a73b625ca4f3fdcf7bb748291"
+  dependencies:
+    array-back "^1.0.3"
+    typical "^2.6.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+typical@^2.6.0, typical@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/typical/-/typical-2.6.1.tgz#5c080e5d661cbbe38259d2e70a3c7253e873881d"
+
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+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=
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+  integrity sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=
+
+vary@~1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+which@^1.2.9:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    isexe "^2.0.0"
+
+wordwrapjs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrapjs/-/wordwrapjs-3.0.0.tgz#c94c372894cadc6feb1a66bff64e1d9af92c5d1e"
+  dependencies:
+    reduce-flatten "^1.0.1"
+    typical "^2.6.1"
+
+wrap-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+ws@^6.1.0:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.3.tgz#ccc96e4add5fd6fedbc491903075c85c5a11d9ee"
+  integrity sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
+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"
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
new file mode 100644
index 00000000000..95aef66a4f7
--- /dev/null
+++ b/scripts/rollup/build-all-release-channels.js
@@ -0,0 +1,514 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const fs = require('fs');
+const fse = require('fs-extra');
+const {spawnSync} = require('child_process');
+const path = require('path');
+const tmp = require('tmp');
+const shell = require('shelljs');
+const {
+  ReactVersion,
+  stablePackages,
+  experimentalPackages,
+  canaryChannelLabel,
+  rcNumber,
+} = require('../../ReactVersions');
+const yargs = require('yargs');
+const Bundles = require('./bundles');
+
+// Runs the build script for both stable and experimental release channels,
+// by configuring an environment variable.
+
+const sha = String(spawnSync('git', ['rev-parse', 'HEAD']).stdout).slice(0, 8);
+
+let dateString = String(
+  spawnSync('git', [
+    'show',
+    '-s',
+    '--no-show-signature',
+    '--format=%cd',
+    '--date=format:%Y%m%d',
+    sha,
+  ]).stdout
+).trim();
+
+// On CI environment, this string is wrapped with quotes '...'s
+if (dateString.startsWith("'")) {
+  dateString = dateString.slice(1, 9);
+}
+
+// Build the artifacts using a placeholder React version. We'll then do a string
+// replace to swap it with the correct version per release channel.
+//
+// The placeholder version is the same format that the "next" channel uses
+const PLACEHOLDER_REACT_VERSION =
+  ReactVersion + '-' + canaryChannelLabel + '-' + sha + '-' + dateString;
+
+// TODO: We should inject the React version using a build-time parameter
+// instead of overwriting the source files.
+fs.writeFileSync(
+  './packages/shared/ReactVersion.js',
+  `export default '${PLACEHOLDER_REACT_VERSION}';\n`
+);
+
+const argv = yargs.wrap(yargs.terminalWidth()).options({
+  releaseChannel: {
+    alias: 'r',
+    describe: 'Build the given release channel.',
+    requiresArg: true,
+    type: 'string',
+    choices: ['experimental', 'stable'],
+  },
+  index: {
+    alias: 'i',
+    describe: 'Worker id.',
+    requiresArg: true,
+    type: 'number',
+  },
+  total: {
+    alias: 't',
+    describe: 'Total number of workers.',
+    requiresArg: true,
+    type: 'number',
+  },
+  ci: {
+    describe: 'Run tests in CI',
+    requiresArg: false,
+    type: 'boolean',
+    default: false,
+  },
+  type: {
+    describe: `Build the given bundle type. (${Object.values(
+      Bundles.bundleTypes
+    )})`,
+    requiresArg: false,
+    type: 'string',
+  },
+  pretty: {
+    describe: 'Force pretty output.',
+    requiresArg: false,
+    type: 'boolean',
+  },
+  'sync-fbsource': {
+    describe: 'Include to sync build to fbsource.',
+    requiresArg: false,
+    type: 'string',
+  },
+  'sync-www': {
+    describe: 'Include to sync build to www.',
+    requiresArg: false,
+    type: 'string',
+  },
+  'unsafe-partial': {
+    describe: 'Do not clean ./build first.',
+    requiresArg: false,
+    type: 'boolean',
+  },
+}).argv;
+
+async function main() {
+  if (argv.ci === true) {
+    buildForChannel(argv.releaseChannel, argv.total, argv.index);
+    switch (argv.releaseChannel) {
+      case 'stable': {
+        processStable('./build');
+        break;
+      }
+      case 'experimental': {
+        processExperimental('./build');
+        break;
+      }
+      default:
+        throw new Error(`Unknown release channel ${argv.releaseChannel}`);
+    }
+  } else {
+    const releaseChannel = argv.releaseChannel;
+    if (releaseChannel === 'stable') {
+      buildForChannel('stable', '', '');
+      processStable('./build');
+    } else if (releaseChannel === 'experimental') {
+      buildForChannel('experimental', '', '');
+      processExperimental('./build');
+    } else {
+      // Running locally, no concurrency. Move each channel's build artifacts into
+      // a temporary directory so that they don't conflict.
+      buildForChannel('stable', '', '');
+      const stableDir = tmp.dirSync().name;
+      crossDeviceRenameSync('./build', stableDir);
+      processStable(stableDir);
+      buildForChannel('experimental', '', '');
+      const experimentalDir = tmp.dirSync().name;
+      crossDeviceRenameSync('./build', experimentalDir);
+      processExperimental(experimentalDir);
+
+      // Then merge the experimental folder into the stable one. processExperimental
+      // will have already removed conflicting files.
+      //
+      // In CI, merging is handled by the GitHub Download Artifacts plugin.
+      mergeDirsSync(experimentalDir + '/', stableDir + '/');
+
+      // Now restore the combined directory back to its original name
+      crossDeviceRenameSync(stableDir, './build');
+    }
+  }
+}
+
+function buildForChannel(channel, total, index) {
+  const {status} = spawnSync(
+    'node',
+    ['./scripts/rollup/build.js', ...process.argv.slice(2)],
+    {
+      stdio: ['pipe', process.stdout, process.stderr],
+      env: {
+        ...process.env,
+        RELEASE_CHANNEL: channel,
+        CI_TOTAL: total,
+        CI_INDEX: index,
+      },
+    }
+  );
+
+  if (status !== 0) {
+    // Error of spawned process is already piped to this stderr
+    process.exit(status);
+  }
+}
+
+function processStable(buildDir) {
+  if (fs.existsSync(buildDir + '/node_modules')) {
+    // Identical to `oss-stable` but with real, semver versions. This is what
+    // will get published to @latest.
+    shell.cp('-r', buildDir + '/node_modules', buildDir + '/oss-stable-semver');
+    if (canaryChannelLabel === 'rc') {
+      // During the RC phase, we also generate an RC build that pins to exact
+      // versions but does not include a SHA, e.g. `19.0.0-rc.0`. This is purely
+      // for signaling purposes — aside from the version, it's no different from
+      // the corresponding canary.
+      shell.cp('-r', buildDir + '/node_modules', buildDir + '/oss-stable-rc');
+    }
+
+    const defaultVersionIfNotFound = '0.0.0' + '-' + sha + '-' + dateString;
+    const versionsMap = new Map();
+    for (const moduleName in stablePackages) {
+      const version = stablePackages[moduleName];
+      versionsMap.set(
+        moduleName,
+        version + '-' + canaryChannelLabel + '-' + sha + '-' + dateString,
+        defaultVersionIfNotFound
+      );
+    }
+    updatePackageVersions(
+      buildDir + '/node_modules',
+      versionsMap,
+      defaultVersionIfNotFound,
+      true
+    );
+    fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/oss-stable',
+      ReactVersion + '-' + canaryChannelLabel + '-' + sha + '-' + dateString
+    );
+
+    if (canaryChannelLabel === 'rc') {
+      const rcVersionsMap = new Map();
+      for (const moduleName in stablePackages) {
+        const version = stablePackages[moduleName];
+        rcVersionsMap.set(moduleName, version + `-rc.${rcNumber}`);
+      }
+      updatePackageVersions(
+        buildDir + '/oss-stable-rc',
+        rcVersionsMap,
+        defaultVersionIfNotFound,
+        // For RCs, we pin to exact versions, like we do for canaries.
+        true
+      );
+      updatePlaceholderReactVersionInCompiledArtifacts(
+        buildDir + '/oss-stable-rc',
+        ReactVersion
+      );
+    }
+
+    const rnVersionString =
+      ReactVersion + '-native-fb-' + sha + '-' + dateString;
+    if (fs.existsSync(buildDir + '/facebook-react-native')) {
+      updatePlaceholderReactVersionInCompiledArtifacts(
+        buildDir + '/facebook-react-native',
+        rnVersionString
+      );
+    }
+
+    if (fs.existsSync(buildDir + '/react-native')) {
+      updatePlaceholderReactVersionInCompiledArtifacts(
+        buildDir + '/react-native',
+        rnVersionString,
+        filename => filename.endsWith('.fb.js')
+      );
+
+      updatePlaceholderReactVersionInCompiledArtifacts(
+        buildDir + '/react-native',
+        ReactVersion,
+        filename => !filename.endsWith('.fb.js') && filename.endsWith('.js')
+      );
+    }
+
+    // Now do the semver ones
+    const semverVersionsMap = new Map();
+    for (const moduleName in stablePackages) {
+      const version = stablePackages[moduleName];
+      semverVersionsMap.set(moduleName, version);
+    }
+    updatePackageVersions(
+      buildDir + '/oss-stable-semver',
+      semverVersionsMap,
+      defaultVersionIfNotFound,
+      // Use ^ only for non-prerelease versions
+      false
+    );
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/oss-stable-semver',
+      ReactVersion
+    );
+  }
+
+  if (fs.existsSync(buildDir + '/facebook-www')) {
+    for (const fileName of fs.readdirSync(buildDir + '/facebook-www')) {
+      const filePath = buildDir + '/facebook-www/' + fileName;
+      const stats = fs.statSync(filePath);
+      if (!stats.isDirectory()) {
+        fs.renameSync(filePath, filePath.replace('.js', '.classic.js'));
+      }
+    }
+    const versionString =
+      ReactVersion + '-www-classic-' + sha + '-' + dateString;
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/facebook-www',
+      versionString
+    );
+    // Also save a file with the version number
+    fs.writeFileSync(buildDir + '/facebook-www/VERSION_CLASSIC', versionString);
+  }
+
+  if (fs.existsSync(buildDir + '/sizes')) {
+    fs.renameSync(buildDir + '/sizes', buildDir + '/sizes-stable');
+  }
+}
+
+function processExperimental(buildDir, version) {
+  if (fs.existsSync(buildDir + '/node_modules')) {
+    const defaultVersionIfNotFound =
+      '0.0.0' + '-experimental-' + sha + '-' + dateString;
+    const versionsMap = new Map();
+    for (const moduleName in stablePackages) {
+      versionsMap.set(moduleName, defaultVersionIfNotFound);
+    }
+    for (const moduleName of experimentalPackages) {
+      versionsMap.set(moduleName, defaultVersionIfNotFound);
+    }
+    updatePackageVersions(
+      buildDir + '/node_modules',
+      versionsMap,
+      defaultVersionIfNotFound,
+      true
+    );
+    fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-experimental');
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/oss-experimental',
+      // TODO: The npm version for experimental releases does not include the
+      // React version, but the runtime version does so that DevTools can do
+      // feature detection. Decide what to do about this later.
+      ReactVersion + '-experimental-' + sha + '-' + dateString
+    );
+  }
+
+  if (fs.existsSync(buildDir + '/facebook-www')) {
+    for (const fileName of fs.readdirSync(buildDir + '/facebook-www')) {
+      const filePath = buildDir + '/facebook-www/' + fileName;
+      const stats = fs.statSync(filePath);
+      if (!stats.isDirectory()) {
+        fs.renameSync(filePath, filePath.replace('.js', '.modern.js'));
+      }
+    }
+    const versionString =
+      ReactVersion + '-www-modern-' + sha + '-' + dateString;
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/facebook-www',
+      versionString
+    );
+
+    // Also save a file with the version number
+    fs.writeFileSync(buildDir + '/facebook-www/VERSION_MODERN', versionString);
+  }
+
+  const rnVersionString = ReactVersion + '-native-fb-' + sha + '-' + dateString;
+  if (fs.existsSync(buildDir + '/facebook-react-native')) {
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/facebook-react-native',
+      rnVersionString
+    );
+
+    // Also save a file with the version number
+    fs.writeFileSync(
+      buildDir + '/facebook-react-native/VERSION_NATIVE_FB',
+      rnVersionString
+    );
+  }
+
+  if (fs.existsSync(buildDir + '/react-native')) {
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/react-native',
+      rnVersionString,
+      filename => filename.endsWith('.fb.js')
+    );
+
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/react-native',
+      ReactVersion,
+      filename => !filename.endsWith('.fb.js') && filename.endsWith('.js')
+    );
+  }
+
+  if (fs.existsSync(buildDir + '/sizes')) {
+    fs.renameSync(buildDir + '/sizes', buildDir + '/sizes-experimental');
+  }
+
+  // Delete all other artifacts that weren't handled above. We assume they are
+  // duplicates of the corresponding artifacts in the stable channel. Ideally,
+  // the underlying build script should not have produced these files in the
+  // first place.
+  for (const pathName of fs.readdirSync(buildDir)) {
+    if (
+      pathName !== 'oss-experimental' &&
+      pathName !== 'facebook-www' &&
+      pathName !== 'sizes-experimental'
+    ) {
+      spawnSync('rm', ['-rm', buildDir + '/' + pathName]);
+    }
+  }
+}
+
+function crossDeviceRenameSync(source, destination) {
+  return fse.moveSync(source, destination, {overwrite: true});
+}
+
+/*
+ * Grabs the built packages in ${tmp_build_dir}/node_modules and updates the
+ * `version` key in their package.json to 0.0.0-${date}-${commitHash} for the commit
+ * you're building. Also updates the dependencies and peerDependencies
+ * to match this version for all of the 'React' packages
+ * (packages available in this repo).
+ */
+function updatePackageVersions(
+  modulesDir,
+  versionsMap,
+  defaultVersionIfNotFound,
+  pinToExactVersion
+) {
+  for (const moduleName of fs.readdirSync(modulesDir)) {
+    let version = versionsMap.get(moduleName);
+    if (version === undefined) {
+      // TODO: If the module is not in the version map, we should exclude it
+      // from the build artifacts.
+      version = defaultVersionIfNotFound;
+    }
+    const packageJSONPath = path.join(modulesDir, moduleName, 'package.json');
+    const stats = fs.statSync(packageJSONPath);
+    if (stats.isFile()) {
+      const packageInfo = JSON.parse(fs.readFileSync(packageJSONPath));
+
+      // Update version
+      packageInfo.version = version;
+
+      if (packageInfo.dependencies) {
+        for (const dep of Object.keys(packageInfo.dependencies)) {
+          const depVersion = versionsMap.get(dep);
+          if (depVersion !== undefined) {
+            packageInfo.dependencies[dep] = pinToExactVersion
+              ? depVersion
+              : '^' + depVersion;
+          }
+        }
+      }
+      if (packageInfo.peerDependencies) {
+        if (
+          !pinToExactVersion &&
+          (moduleName === 'use-sync-external-store' ||
+            moduleName === 'use-subscription')
+        ) {
+          // use-sync-external-store supports older versions of React, too, so
+          // we don't override to the latest version. We should figure out some
+          // better way to handle this.
+          // TODO: Remove this special case.
+        } else {
+          for (const dep of Object.keys(packageInfo.peerDependencies)) {
+            const depVersion = versionsMap.get(dep);
+            if (depVersion !== undefined) {
+              packageInfo.peerDependencies[dep] = pinToExactVersion
+                ? depVersion
+                : '^' + depVersion;
+            }
+          }
+        }
+      }
+
+      // Write out updated package.json
+      fs.writeFileSync(packageJSONPath, JSON.stringify(packageInfo, null, 2));
+    }
+  }
+}
+
+function updatePlaceholderReactVersionInCompiledArtifacts(
+  artifactsDirectory,
+  newVersion,
+  filteringClosure
+) {
+  // Update the version of React in the compiled artifacts by searching for
+  // the placeholder string and replacing it with a new one.
+  if (filteringClosure == null) {
+    filteringClosure = filename => filename.endsWith('.js');
+  }
+
+  const artifactFilenames = String(
+    spawnSync('grep', [
+      '-lr',
+      PLACEHOLDER_REACT_VERSION,
+      '--',
+      artifactsDirectory,
+    ]).stdout
+  )
+    .trim()
+    .split('\n')
+    .filter(filteringClosure);
+
+  for (const artifactFilename of artifactFilenames) {
+    const originalText = fs.readFileSync(artifactFilename, 'utf8');
+    const replacedText = originalText.replaceAll(
+      PLACEHOLDER_REACT_VERSION,
+      newVersion
+    );
+    fs.writeFileSync(artifactFilename, replacedText);
+  }
+}
+
+/**
+ * cross-platform alternative to `rsync -ar`
+ * @param {string} source
+ * @param {string} destination
+ */
+function mergeDirsSync(source, destination) {
+  for (const sourceFileBaseName of fs.readdirSync(source)) {
+    const sourceFileName = path.join(source, sourceFileBaseName);
+    const targetFileName = path.join(destination, sourceFileBaseName);
+
+    const sourceFile = fs.statSync(sourceFileName);
+    if (sourceFile.isDirectory()) {
+      fse.ensureDirSync(targetFileName);
+      mergeDirsSync(sourceFileName, targetFileName);
+    } else {
+      fs.copyFileSync(sourceFileName, targetFileName);
+    }
+  }
+}
+
+main();
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
new file mode 100644
index 00000000000..63039182280
--- /dev/null
+++ b/scripts/rollup/build.js
@@ -0,0 +1,896 @@
+'use strict';
+
+const rollup = require('rollup');
+const babel = require('@rollup/plugin-babel').babel;
+const closure = require('./plugins/closure-plugin');
+const flowRemoveTypes = require('flow-remove-types');
+const {dts} = require('rollup-plugin-dts');
+const prettier = require('rollup-plugin-prettier');
+const replace = require('@rollup/plugin-replace');
+const typescript = require('@rollup/plugin-typescript');
+const stripBanner = require('rollup-plugin-strip-banner');
+const chalk = require('chalk');
+const resolve = require('@rollup/plugin-node-resolve').nodeResolve;
+const fs = require('fs');
+const childProcess = require('child_process');
+const argv = require('minimist')(process.argv.slice(2));
+const Modules = require('./modules');
+const Bundles = require('./bundles');
+const Stats = require('./stats');
+const Sync = require('./sync');
+const sizes = require('./plugins/sizes-plugin');
+const useForks = require('./plugins/use-forks-plugin');
+const dynamicImports = require('./plugins/dynamic-imports');
+const externalRuntime = require('./plugins/external-runtime-plugin');
+const Packaging = require('./packaging');
+const {asyncRimRaf} = require('./utils');
+const codeFrame = require('@babel/code-frame').default;
+const Wrappers = require('./wrappers');
+const commonjs = require('@rollup/plugin-commonjs');
+
+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 => {
+  if (loggedErrors.has(err)) {
+    // No need to print it twice.
+    process.exit(1);
+  }
+  throw err;
+});
+
+const {
+  NODE_ES2015,
+  ESM_DEV,
+  ESM_PROD,
+  NODE_DEV,
+  NODE_PROD,
+  NODE_PROFILING,
+  BUN_DEV,
+  BUN_PROD,
+  FB_WWW_DEV,
+  FB_WWW_PROD,
+  FB_WWW_PROFILING,
+  RN_OSS_DEV,
+  RN_OSS_PROD,
+  RN_OSS_PROFILING,
+  RN_FB_DEV,
+  RN_FB_PROD,
+  RN_FB_PROFILING,
+  BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
+} = Bundles.bundleTypes;
+
+const {getFilename} = Bundles;
+
+function parseRequestedNames(names, toCase) {
+  let result = [];
+  for (let i = 0; i < names.length; i++) {
+    let splitNames = names[i].split(',');
+    for (let j = 0; j < splitNames.length; j++) {
+      let name = splitNames[j].trim();
+      if (!name) {
+        continue;
+      }
+      if (toCase === 'uppercase') {
+        name = name.toUpperCase();
+      } else if (toCase === 'lowercase') {
+        name = name.toLowerCase();
+      }
+      result.push(name);
+    }
+  }
+  return result;
+}
+const argvType = Array.isArray(argv.type) ? argv.type : [argv.type];
+const requestedBundleTypes = parseRequestedNames(
+  argv.type ? argvType : [],
+  'uppercase'
+);
+
+const names = argv._;
+const requestedBundleNames = parseRequestedNames(
+  names ? names : [],
+  'lowercase'
+);
+const forcePrettyOutput = argv.pretty;
+const isWatchMode = argv.watch;
+const syncFBSourcePath = argv['sync-fbsource'];
+const syncWWWPath = argv['sync-www'];
+
+// Non-ES2015 stuff applied before closure compiler.
+const babelPlugins = [
+  // These plugins filter out non-ES2015.
+  ['@babel/plugin-proposal-class-properties', {loose: true}],
+  'syntax-trailing-function-commas',
+  // These use loose mode which avoids embedding a runtime.
+  // TODO: Remove object spread from the source. Prefer Object.assign instead.
+  [
+    '@babel/plugin-proposal-object-rest-spread',
+    {loose: true, useBuiltIns: true},
+  ],
+  ['@babel/plugin-transform-template-literals', {loose: true}],
+  // TODO: Remove for...of from the source. It requires a runtime to be embedded.
+  '@babel/plugin-transform-for-of',
+  // TODO: Remove array spread from the source. Prefer .apply instead.
+  ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
+  '@babel/plugin-transform-parameters',
+  // TODO: Remove array destructuring from the source. Requires runtime.
+  ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
+  // Transform Object spread to shared/assign
+  require('../babel/transform-object-assign'),
+];
+
+const babelToES5Plugins = [
+  // These plugins transform DEV mode. Closure compiler deals with these in PROD.
+  '@babel/plugin-transform-literals',
+  '@babel/plugin-transform-arrow-functions',
+  '@babel/plugin-transform-block-scoped-functions',
+  '@babel/plugin-transform-shorthand-properties',
+  '@babel/plugin-transform-computed-properties',
+  ['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
+];
+
+function getBabelConfig(
+  updateBabelOptions,
+  bundleType,
+  packageName,
+  isDevelopment,
+  bundle
+) {
+  let options = {
+    exclude: '/**/node_modules/**',
+    babelrc: false,
+    configFile: false,
+    presets: [],
+    plugins: [...babelPlugins],
+    babelHelpers: 'bundled',
+    sourcemap: false,
+  };
+  if (isDevelopment) {
+    options.plugins.push(...babelToES5Plugins);
+  }
+  if (updateBabelOptions) {
+    options = updateBabelOptions(options);
+  }
+  // Controls whether to replace error messages with error codes in production.
+  // By default, error messages are replaced in production.
+  if (!isDevelopment && bundle.minifyWithProdErrorCodes !== false) {
+    options.plugins.push(require('../error-codes/transform-error-messages'));
+  }
+
+  return options;
+}
+
+let getRollupInteropValue = id => {
+  // We're setting Rollup to assume that imports are ES modules unless otherwise specified.
+  // However, we also compile ES import syntax to `require()` using Babel.
+  // This causes Rollup to turn uses of `import SomeDefaultImport from 'some-module' into
+  // references to `SomeDefaultImport.default` due to CJS/ESM interop.
+  // Some CJS modules don't have a `.default` export, and the rewritten import is incorrect.
+  // Specifying `interop: 'default'` instead will have Rollup use the imported variable as-is,
+  // without adding a `.default` to the reference.
+  const modulesWithCommonJsExports = [
+    'art/core/transform',
+    'art/modes/current',
+    'art/modes/fast-noSideEffects',
+    'art/modes/svg',
+    'JSResourceReferenceImpl',
+    'error-stack-parser',
+    'neo-async',
+    'webpack/lib/dependencies/ModuleDependency',
+    'webpack/lib/dependencies/NullDependency',
+    'webpack/lib/Template',
+  ];
+
+  if (modulesWithCommonJsExports.includes(id)) {
+    return 'default';
+  }
+
+  // For all other modules, handle imports without any import helper utils
+  return 'esModule';
+};
+
+function getRollupOutputOptions(
+  outputPath,
+  format,
+  globals,
+  globalName,
+  bundleType
+) {
+  const isProduction = isProductionBundleType(bundleType);
+
+  return {
+    file: outputPath,
+    format,
+    globals,
+    freeze: !isProduction,
+    interop: getRollupInteropValue,
+    name: globalName,
+    sourcemap: false,
+    esModule: false,
+    exports: 'auto',
+  };
+}
+
+function getFormat(bundleType) {
+  switch (bundleType) {
+    case NODE_ES2015:
+    case NODE_DEV:
+    case NODE_PROD:
+    case NODE_PROFILING:
+    case BUN_DEV:
+    case BUN_PROD:
+    case FB_WWW_DEV:
+    case FB_WWW_PROD:
+    case FB_WWW_PROFILING:
+    case RN_OSS_DEV:
+    case RN_OSS_PROD:
+    case RN_OSS_PROFILING:
+    case RN_FB_DEV:
+    case RN_FB_PROD:
+    case RN_FB_PROFILING:
+    case CJS_DTS:
+      return `cjs`;
+    case ESM_DEV:
+    case ESM_PROD:
+    case ESM_DTS:
+      return `es`;
+    case BROWSER_SCRIPT:
+      return `iife`;
+  }
+}
+
+function isProductionBundleType(bundleType) {
+  switch (bundleType) {
+    case NODE_ES2015:
+      return true;
+    case ESM_DEV:
+    case NODE_DEV:
+    case BUN_DEV:
+    case FB_WWW_DEV:
+    case RN_OSS_DEV:
+    case RN_FB_DEV:
+      return false;
+    case ESM_PROD:
+    case NODE_PROD:
+    case BUN_PROD:
+    case NODE_PROFILING:
+    case FB_WWW_PROD:
+    case FB_WWW_PROFILING:
+    case RN_OSS_PROD:
+    case RN_OSS_PROFILING:
+    case RN_FB_PROD:
+    case RN_FB_PROFILING:
+    case BROWSER_SCRIPT:
+    case CJS_DTS:
+    case ESM_DTS:
+      return true;
+    default:
+      throw new Error(`Unknown type: ${bundleType}`);
+  }
+}
+
+function isProfilingBundleType(bundleType) {
+  switch (bundleType) {
+    case NODE_ES2015:
+    case FB_WWW_DEV:
+    case FB_WWW_PROD:
+    case NODE_DEV:
+    case NODE_PROD:
+    case BUN_DEV:
+    case BUN_PROD:
+    case RN_FB_DEV:
+    case RN_FB_PROD:
+    case RN_OSS_DEV:
+    case RN_OSS_PROD:
+    case ESM_DEV:
+    case ESM_PROD:
+    case BROWSER_SCRIPT:
+    case CJS_DTS:
+    case ESM_DTS:
+      return false;
+    case FB_WWW_PROFILING:
+    case NODE_PROFILING:
+    case RN_FB_PROFILING:
+    case RN_OSS_PROFILING:
+      return true;
+    default:
+      throw new Error(`Unknown type: ${bundleType}`);
+  }
+}
+
+function getBundleTypeFlags(bundleType) {
+  const isFBWWWBundle =
+    bundleType === FB_WWW_DEV ||
+    bundleType === FB_WWW_PROD ||
+    bundleType === FB_WWW_PROFILING;
+  const isRNBundle =
+    bundleType === RN_OSS_DEV ||
+    bundleType === RN_OSS_PROD ||
+    bundleType === RN_OSS_PROFILING ||
+    bundleType === RN_FB_DEV ||
+    bundleType === RN_FB_PROD ||
+    bundleType === RN_FB_PROFILING;
+
+  const isFBRNBundle =
+    bundleType === RN_FB_DEV ||
+    bundleType === RN_FB_PROD ||
+    bundleType === RN_FB_PROFILING;
+
+  const shouldStayReadable = isFBWWWBundle || isRNBundle || forcePrettyOutput;
+
+  return {
+    isFBWWWBundle,
+    isRNBundle,
+    isFBRNBundle,
+    shouldStayReadable,
+  };
+}
+
+function forbidFBJSImports() {
+  return {
+    name: 'forbidFBJSImports',
+    resolveId(importee, importer) {
+      if (/^fbjs\//.test(importee)) {
+        throw new Error(
+          `Don't import ${importee} (found in ${importer}). ` +
+            `Use the utilities in packages/shared/ instead.`
+        );
+      }
+    },
+  };
+}
+
+function getPlugins(
+  entry,
+  updateBabelOptions,
+  filename,
+  packageName,
+  bundleType,
+  globalName,
+  moduleType,
+  pureExternalModules,
+  bundle
+) {
+  // Short-circuit if we're only building a .d.ts bundle
+  if (bundleType === CJS_DTS || bundleType === ESM_DTS) {
+    return [dts({tsconfig: bundle.tsconfig})];
+  }
+  try {
+    const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
+    const isProduction = isProductionBundleType(bundleType);
+    const isProfiling = isProfilingBundleType(bundleType);
+
+    const needsMinifiedByClosure =
+      bundleType !== ESM_PROD &&
+      bundleType !== ESM_DEV &&
+      // TODO(@poteto) figure out ICE in closure compiler for eslint-plugin-react-hooks (ts)
+      bundle.tsconfig == null;
+
+    return [
+      // Keep dynamic imports as externals
+      dynamicImports(),
+      bundle.tsconfig != null
+        ? typescript({tsconfig: bundle.tsconfig})
+        : {
+            name: 'rollup-plugin-flow-remove-types',
+            transform(code) {
+              const transformed = flowRemoveTypes(code);
+              return {
+                code: transformed.toString(),
+                map: null,
+              };
+            },
+          },
+      // See https://github.com/rollup/plugins/issues/1425
+      bundle.tsconfig != null ? commonjs({strictRequires: true}) : false,
+      // Shim any modules that need forking in this environment.
+      useForks(forks),
+      // Ensure we don't try to bundle any fbjs modules.
+      forbidFBJSImports(),
+      // Use Node resolution mechanism.
+      resolve({
+        // `external` rollup config takes care of marking builtins as externals
+        preferBuiltins: false,
+      }),
+      // Remove license headers from individual modules
+      stripBanner({
+        exclude: 'node_modules/**/*',
+      }),
+      // Compile to ES2015.
+      babel(
+        getBabelConfig(
+          updateBabelOptions,
+          bundleType,
+          packageName,
+          !isProduction,
+          bundle
+        )
+      ),
+      // Remove 'use strict' from individual source files. We skip eslint-plugin-react-hooks because
+      // it bundles compiler-type code that may examine "use strict" used outside of a directive
+      // context, e.g. as a StringLiteral.
+      bundle.name !== 'eslint-plugin-react-hooks'
+        ? {
+            name: "remove 'use strict'",
+            transform(source) {
+              return source.replace(/['"]use strict["']/g, '');
+            },
+          }
+        : false,
+      // Turn __DEV__ and process.env checks into constants.
+      replace({
+        preventAssignment: true,
+        values: {
+          __DEV__: isProduction ? 'false' : 'true',
+          __PROFILE__: isProfiling || !isProduction ? 'true' : 'false',
+          'process.env.NODE_ENV': isProduction
+            ? "'production'"
+            : "'development'",
+          __EXPERIMENTAL__,
+        },
+      }),
+      // For the external runtime we turn global identifiers into local.
+      entry.includes('server-external-runtime') && externalRuntime(),
+      {
+        name: 'top-level-definitions',
+        renderChunk(source) {
+          return Wrappers.wrapWithTopLevelDefinitions(
+            source,
+            bundleType,
+            globalName,
+            filename,
+            moduleType,
+            bundle.wrapWithModuleBoundaries
+          );
+        },
+      },
+      // For production builds, compile with Closure. We do this even for the
+      // "non-minified" production builds because Closure is much better at
+      // minification than what most applications use. During this step, we do
+      // preserve the original symbol names, though, so the resulting code is
+      // relatively readable.
+      //
+      // For the minified builds, the names will be mangled later.
+      //
+      // We don't bother with sourcemaps at this step. The sourcemaps we publish
+      // are only for whitespace and symbol renaming; they don't map back to
+      // before Closure was applied.
+      needsMinifiedByClosure &&
+        closure({
+          compilation_level: 'SIMPLE',
+          language_in: 'ECMASCRIPT_2020',
+          language_out:
+            bundleType === NODE_ES2015
+              ? 'ECMASCRIPT_2020'
+              : bundleType === BROWSER_SCRIPT
+                ? 'ECMASCRIPT5'
+                : 'ECMASCRIPT5_STRICT',
+          emit_use_strict:
+            bundleType !== BROWSER_SCRIPT &&
+            bundleType !== ESM_PROD &&
+            bundleType !== ESM_DEV,
+          env: 'CUSTOM',
+          warning_level: 'QUIET',
+          source_map_include_content: true,
+          use_types_for_optimization: false,
+          process_common_js_modules: false,
+          rewrite_polyfills: false,
+          inject_libraries: false,
+          allow_dynamic_import: true,
+
+          // Don't let it create global variables in the browser.
+          // https://github.com/facebook/react/issues/10909
+          assume_function_wrapper: true,
+
+          // Don't rename symbols (variable names, functions, etc). We leave
+          // this up to the application to handle, if they want. Otherwise gzip
+          // takes care of it.
+          renaming: false,
+        }),
+      needsMinifiedByClosure &&
+        // Add the whitespace back
+        prettier({
+          parser: 'flow',
+          singleQuote: false,
+          trailingComma: 'none',
+          bracketSpacing: true,
+        }),
+      {
+        name: 'license-and-signature-header',
+        renderChunk(source) {
+          return Wrappers.wrapWithLicenseHeader(
+            source,
+            bundleType,
+            globalName,
+            filename,
+            moduleType
+          );
+        },
+      },
+      // Record bundle size.
+      sizes({
+        getSize: (size, gzip) => {
+          const currentSizes = Stats.currentBuildResults.bundleSizes;
+          const recordIndex = currentSizes.findIndex(
+            record =>
+              record.filename === filename && record.bundleType === bundleType
+          );
+          const index = recordIndex !== -1 ? recordIndex : currentSizes.length;
+          currentSizes[index] = {
+            filename,
+            bundleType,
+            packageName,
+            size,
+            gzip,
+          };
+        },
+      }),
+    ].filter(Boolean);
+  } catch (error) {
+    console.error(
+      chalk.red(`There was an error preparing plugins for entry "${entry}"`)
+    );
+    throw error;
+  }
+}
+
+function shouldSkipBundle(bundle, bundleType) {
+  const shouldSkipBundleType = bundle.bundleTypes.indexOf(bundleType) === -1;
+  if (shouldSkipBundleType) {
+    return true;
+  }
+  if (requestedBundleTypes.length > 0) {
+    const hasRequestedBundleType = requestedBundleTypes.some(requestedType =>
+      bundleType.includes(requestedType)
+    );
+    if (!hasRequestedBundleType) {
+      return true;
+    }
+  }
+  if (requestedBundleNames.length > 0) {
+    // If the name ends with `something/index` we only match if the
+    // entry ends in something. Such as `react-dom/index` only matches
+    // `react-dom` but not `react-dom/server`. Everything else is fuzzy
+    // search.
+    const entryLowerCase = bundle.entry.toLowerCase() + '/index.js';
+    const isAskingForDifferentNames = requestedBundleNames.every(
+      requestedName => {
+        const matchEntry = entryLowerCase.indexOf(requestedName) !== -1;
+        if (!bundle.name) {
+          return !matchEntry;
+        }
+        const matchName =
+          bundle.name.toLowerCase().indexOf(requestedName) !== -1;
+        return !matchEntry && !matchName;
+      }
+    );
+    if (isAskingForDifferentNames) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function resolveEntryFork(resolvedEntry, isFBBundle, isDev) {
+  // Pick which entry point fork to use:
+  // .modern.fb.js
+  // .classic.fb.js
+  // .fb.js
+  // .stable.js
+  // .experimental.js
+  // .js
+  // or any of those plus .development.js
+
+  if (isFBBundle) {
+    const resolvedFBEntry = resolvedEntry.replace(
+      '.js',
+      __EXPERIMENTAL__ ? '.modern.fb.js' : '.classic.fb.js'
+    );
+    const devFBEntry = resolvedFBEntry.replace('.js', '.development.js');
+    if (isDev && fs.existsSync(devFBEntry)) {
+      return devFBEntry;
+    }
+    if (fs.existsSync(resolvedFBEntry)) {
+      return resolvedFBEntry;
+    }
+    const resolvedGenericFBEntry = resolvedEntry.replace('.js', '.fb.js');
+    const devGenericFBEntry = resolvedGenericFBEntry.replace(
+      '.js',
+      '.development.js'
+    );
+    if (isDev && fs.existsSync(devGenericFBEntry)) {
+      return devGenericFBEntry;
+    }
+    if (fs.existsSync(resolvedGenericFBEntry)) {
+      return resolvedGenericFBEntry;
+    }
+    // Even if it's a FB bundle we fallthrough to pick stable or experimental if we don't have an FB fork.
+  }
+  const resolvedForkedEntry = resolvedEntry.replace(
+    '.js',
+    __EXPERIMENTAL__ ? '.experimental.js' : '.stable.js'
+  );
+  const devForkedEntry = resolvedForkedEntry.replace('.js', '.development.js');
+  if (isDev && fs.existsSync(devForkedEntry)) {
+    return devForkedEntry;
+  }
+  if (fs.existsSync(resolvedForkedEntry)) {
+    return resolvedForkedEntry;
+  }
+  // Just use the plain .js one.
+  return resolvedEntry;
+}
+
+async function createBundle(bundle, bundleType) {
+  const filename = getFilename(bundle, bundleType);
+  const logKey =
+    chalk.white.bold(filename) + chalk.dim(` (${bundleType.toLowerCase()})`);
+  const format = getFormat(bundleType);
+  const packageName = Packaging.getPackageName(bundle.entry);
+
+  const {isFBWWWBundle, isFBRNBundle} = getBundleTypeFlags(bundleType);
+
+  const resolvedEntry = resolveEntryFork(
+    require.resolve(bundle.entry),
+    isFBWWWBundle || isFBRNBundle,
+    !isProductionBundleType(bundleType)
+  );
+
+  const peerGlobals = Modules.getPeerGlobals(bundle.externals, bundleType);
+  let externals = Object.keys(peerGlobals);
+
+  const deps = Modules.getDependencies(bundleType, bundle.entry);
+  externals = externals.concat(deps);
+
+  const importSideEffects = Modules.getImportSideEffects();
+  const pureExternalModules = Object.keys(importSideEffects).filter(
+    module => !importSideEffects[module]
+  );
+
+  const rollupConfig = {
+    input: resolvedEntry,
+    treeshake: {
+      moduleSideEffects: (id, external) =>
+        !(external && pureExternalModules.includes(id)),
+      propertyReadSideEffects: false,
+    },
+    external(id) {
+      const containsThisModule = pkg => id === pkg || id.startsWith(pkg + '/');
+      const isProvidedByDependency = externals.some(containsThisModule);
+      if (isProvidedByDependency) {
+        if (id.indexOf('/src/') !== -1) {
+          throw Error(
+            'You are trying to import ' +
+              id +
+              ' but ' +
+              externals.find(containsThisModule) +
+              ' is one of npm dependencies, ' +
+              'so it will not contain that source file. You probably want ' +
+              'to create a new bundle entry point for it instead.'
+          );
+        }
+        return true;
+      }
+      return !!peerGlobals[id];
+    },
+    onwarn: handleRollupWarning,
+    plugins: getPlugins(
+      bundle.entry,
+      bundle.babel,
+      filename,
+      packageName,
+      bundleType,
+      bundle.global,
+      bundle.moduleType,
+      pureExternalModules,
+      bundle
+    ),
+    output: {
+      externalLiveBindings: false,
+      freeze: false,
+      interop: getRollupInteropValue,
+      esModule: false,
+    },
+  };
+  const mainOutputPath = Packaging.getBundleOutputPath(
+    bundle,
+    bundleType,
+    filename,
+    packageName
+  );
+
+  const rollupOutputOptions = getRollupOutputOptions(
+    mainOutputPath,
+    format,
+    peerGlobals,
+    bundle.global,
+    bundleType
+  );
+
+  if (isWatchMode) {
+    rollupConfig.output = [rollupOutputOptions];
+    const watcher = rollup.watch(rollupConfig);
+    watcher.on('event', async event => {
+      switch (event.code) {
+        case 'BUNDLE_START':
+          console.log(`${chalk.bgYellow.black(' BUILDING ')} ${logKey}`);
+          break;
+        case 'BUNDLE_END':
+          console.log(`${chalk.bgGreen.black(' COMPLETE ')} ${logKey}\n`);
+          break;
+        case 'ERROR':
+        case 'FATAL':
+          console.log(`${chalk.bgRed.black(' OH NOES! ')} ${logKey}\n`);
+          handleRollupError(event.error);
+          break;
+      }
+    });
+  } else {
+    console.log(`${chalk.bgYellow.black(' BUILDING ')} ${logKey}`);
+    try {
+      const result = await rollup.rollup(rollupConfig);
+      await result.write(rollupOutputOptions);
+    } catch (error) {
+      console.log(`${chalk.bgRed.black(' OH NOES! ')} ${logKey}\n`);
+      handleRollupError(error);
+      throw error;
+    }
+    console.log(`${chalk.bgGreen.black(' COMPLETE ')} ${logKey}\n`);
+  }
+}
+
+function handleRollupWarning(warning) {
+  if (warning.code === 'UNUSED_EXTERNAL_IMPORT') {
+    const match = warning.message.match(/external module "([^"]+)"/);
+    if (!match || typeof match[1] !== 'string') {
+      throw new Error(
+        'Could not parse a Rollup warning. ' + 'Fix this method.'
+      );
+    }
+    const importSideEffects = Modules.getImportSideEffects();
+    const externalModule = match[1];
+    if (typeof importSideEffects[externalModule] !== 'boolean') {
+      throw new Error(
+        'An external module "' +
+          externalModule +
+          '" is used in a DEV-only code path ' +
+          'but we do not know if it is safe to omit an unused require() to it in production. ' +
+          'Please add it to the `importSideEffects` list in `scripts/rollup/modules.js`.'
+      );
+    }
+    // Don't warn. We will remove side effectless require() in a later pass.
+    return;
+  }
+
+  if (warning.code === 'CIRCULAR_DEPENDENCY') {
+    // Ignored
+  } else if (typeof warning.code === 'string') {
+    // This is a warning coming from Rollup itself.
+    // These tend to be important (e.g. clashes in namespaced exports)
+    // so we'll fail the build on any of them.
+    console.error();
+    console.error(warning.message || warning);
+    console.error();
+    process.exit(1);
+  } else {
+    // The warning is from one of the plugins.
+    // Maybe it's not important, so just print it.
+    console.warn(warning.message || warning);
+  }
+}
+
+function handleRollupError(error) {
+  loggedErrors.add(error);
+  if (!error.code) {
+    console.error(error);
+    return;
+  }
+  console.error(
+    `\x1b[31m-- ${error.code}${error.plugin ? ` (${error.plugin})` : ''} --`
+  );
+  console.error(error.stack);
+  if (error.loc && error.loc.file) {
+    const {file, line, column} = error.loc;
+    // This looks like an error from Rollup, e.g. missing export.
+    // We'll use the accurate line numbers provided by Rollup but
+    // use Babel code frame because it looks nicer.
+    const rawLines = fs.readFileSync(file, 'utf-8');
+    // column + 1 is required due to rollup counting column start position from 0
+    // whereas babel-code-frame counts from 1
+    const frame = codeFrame(rawLines, line, column + 1, {
+      highlightCode: true,
+    });
+    console.error(frame);
+  } else if (error.codeFrame) {
+    // This looks like an error from a plugin (e.g. Babel).
+    // In this case we'll resort to displaying the provided code frame
+    // because we can't be sure the reported location is accurate.
+    console.error(error.codeFrame);
+  }
+}
+
+function runShellCommand(command) {
+  console.log(chalk.dim('Running: ') + chalk.cyan(command));
+  childProcess.execSync(command, {stdio: 'inherit', shell: true});
+}
+
+async function buildEverything() {
+  if (!argv['unsafe-partial']) {
+    await asyncRimRaf('build');
+  }
+
+  // Run them serially for better console output
+  // and to avoid any potential race conditions.
+
+  let bundles = [];
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const bundle of Bundles.bundles) {
+    bundles.push(
+      [bundle, NODE_ES2015],
+      [bundle, ESM_DEV],
+      [bundle, ESM_PROD],
+      [bundle, NODE_DEV],
+      [bundle, NODE_PROD],
+      [bundle, NODE_PROFILING],
+      [bundle, BUN_DEV],
+      [bundle, BUN_PROD],
+      [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, BROWSER_SCRIPT],
+      [bundle, CJS_DTS],
+      [bundle, ESM_DTS]
+    );
+  }
+
+  bundles = bundles.filter(([bundle, bundleType]) => {
+    return !shouldSkipBundle(bundle, bundleType);
+  });
+
+  if (process.env.CI_TOTAL && process.env.CI_INDEX) {
+    const nodeTotal = parseInt(process.env.CI_TOTAL, 10);
+    const nodeIndex = parseInt(process.env.CI_INDEX, 10);
+    bundles = bundles.filter((_, i) => i % nodeTotal === nodeIndex);
+  }
+
+  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+  for (const [bundle, bundleType] of bundles) {
+    if (bundle.prebuild) {
+      runShellCommand(bundle.prebuild);
+    }
+    await createBundle(bundle, bundleType);
+  }
+
+  await Packaging.copyAllShims();
+  await Packaging.prepareNpmPackages();
+
+  if (syncFBSourcePath) {
+    await Sync.syncReactNative(syncFBSourcePath);
+  } else if (syncWWWPath) {
+    await Sync.syncReactDom('build/facebook-www', syncWWWPath);
+  }
+
+  console.log(Stats.printResults());
+  if (!forcePrettyOutput) {
+    Stats.saveResults();
+  }
+}
+
+buildEverything();
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
new file mode 100644
index 00000000000..8a551d2a154
--- /dev/null
+++ b/scripts/rollup/bundles.js
@@ -0,0 +1,1359 @@
+'use strict';
+
+const RELEASE_CHANNEL = process.env.RELEASE_CHANNEL;
+
+const __EXPERIMENTAL__ =
+  typeof RELEASE_CHANNEL === 'string'
+    ? RELEASE_CHANNEL === 'experimental'
+    : true;
+
+const bundleTypes = {
+  NODE_ES2015: 'NODE_ES2015',
+  ESM_DEV: 'ESM_DEV',
+  ESM_PROD: 'ESM_PROD',
+  NODE_DEV: 'NODE_DEV',
+  NODE_PROD: 'NODE_PROD',
+  NODE_PROFILING: 'NODE_PROFILING',
+  BUN_DEV: 'BUN_DEV',
+  BUN_PROD: 'BUN_PROD',
+  FB_WWW_DEV: 'FB_WWW_DEV',
+  FB_WWW_PROD: 'FB_WWW_PROD',
+  FB_WWW_PROFILING: 'FB_WWW_PROFILING',
+  RN_OSS_DEV: 'RN_OSS_DEV',
+  RN_OSS_PROD: 'RN_OSS_PROD',
+  RN_OSS_PROFILING: 'RN_OSS_PROFILING',
+  RN_FB_DEV: 'RN_FB_DEV',
+  RN_FB_PROD: 'RN_FB_PROD',
+  RN_FB_PROFILING: 'RN_FB_PROFILING',
+  BROWSER_SCRIPT: 'BROWSER_SCRIPT',
+  CJS_DTS: 'CJS_DTS',
+  ESM_DTS: 'ESM_DTS',
+};
+
+const {
+  NODE_ES2015,
+  ESM_DEV,
+  ESM_PROD,
+  NODE_DEV,
+  NODE_PROD,
+  NODE_PROFILING,
+  BUN_DEV,
+  BUN_PROD,
+  FB_WWW_DEV,
+  FB_WWW_PROD,
+  FB_WWW_PROFILING,
+  RN_OSS_DEV,
+  RN_OSS_PROD,
+  RN_OSS_PROFILING,
+  RN_FB_DEV,
+  RN_FB_PROD,
+  RN_FB_PROFILING,
+  BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
+} = bundleTypes;
+
+const moduleTypes = {
+  // React
+  ISOMORPHIC: 'ISOMORPHIC',
+  // Individual renderers. They bundle the reconciler. (e.g. ReactDOM)
+  RENDERER: 'RENDERER',
+  // Helper packages that access specific renderer's internals. (e.g. TestUtils)
+  RENDERER_UTILS: 'RENDERER_UTILS',
+  // Standalone reconciler for third-party renderers.
+  RECONCILER: 'RECONCILER',
+};
+
+const {ISOMORPHIC, RENDERER, RENDERER_UTILS, RECONCILER} = moduleTypes;
+
+const bundles = [
+  /******* Isomorphic *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      FB_WWW_PROFILING,
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'react',
+    global: 'React',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* Isomorphic Shared Subset *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react/src/ReactServer.js',
+    name: 'react.react-server',
+    condition: 'react-server',
+    global: 'React',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
+  /******* React JSX Runtime *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      NODE_PROFILING,
+      // TODO: use on WWW.
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'react/jsx-runtime',
+    global: 'JSXRuntime',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* Compiler Runtime *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, NODE_PROFILING],
+    moduleType: ISOMORPHIC,
+    entry: 'react/compiler-runtime',
+    global: 'CompilerRuntime',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React JSX Runtime React Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react/src/jsx/ReactJSXServer.js',
+    name: 'react-jsx-runtime.react-server',
+    condition: 'react-server',
+    global: 'JSXRuntime',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React JSX DEV Runtime *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      NODE_PROFILING,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      FB_WWW_PROFILING,
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'react/jsx-dev-runtime',
+    global: 'JSXDEVRuntime',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React JSX DEV Runtime React Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react/src/jsx/ReactJSXServer.js',
+    name: 'react-jsx-dev-runtime.react-server',
+    condition: 'react-server',
+    global: 'JSXDEVRuntime',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React DOM *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* React DOM Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/client',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React DOM Profiling (Client) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROFILING],
+    moduleType: RENDERER,
+    entry: 'react-dom/profiling',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React DOM (www) *******/
+  {
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/ReactDOMFB.js',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* React DOM (fbsource) *******/
+  {
+    bundleTypes: [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
+    moduleType: RENDERER,
+    entry: 'react-dom',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React DOM Client (fbsource) *******/
+  {
+    bundleTypes: [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
+    moduleType: RENDERER,
+    entry: 'react-dom/client',
+    global: 'ReactDOMClient',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React DOM Profiling (fbsource) *******/
+  {
+    bundleTypes: [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
+    moduleType: RENDERER,
+    entry: 'react-dom/profiling',
+    global: 'ReactDOMProfiling',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react', 'react-dom', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React DOM Test Utils (fbsource) *******/
+  {
+    moduleType: RENDERER_UTILS,
+    bundleTypes: [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
+    entry: 'react-dom/test-utils',
+    global: 'ReactDOMTestUtils',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React DOM React Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/ReactDOMReactServer.js',
+    name: 'react-dom.react-server',
+    condition: 'react-server',
+    global: 'ReactDOM',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* Test Utils *******/
+  {
+    moduleType: RENDERER_UTILS,
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    entry: 'react-dom/test-utils',
+    global: 'ReactTestUtils',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React DOM - Testing *******/
+  {
+    moduleType: RENDERER,
+    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    entry: 'react-dom/unstable_testing',
+    global: 'ReactDOMTesting',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React DOM - www - Testing *******/
+  {
+    moduleType: RENDERER,
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
+    entry: 'react-dom/src/ReactDOMTestingFB.js',
+    global: 'ReactDOMTesting',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React DOM Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser.js',
+    name: 'react-dom-server-legacy.browser',
+    global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/ReactDOMLegacyServerNode.js',
+    name: 'react-dom-server-legacy.node',
+    externals: ['react', 'stream', 'react-dom'],
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
+  },
+
+  /******* React DOM Fizz Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/react-dom-server.browser.js',
+    name: 'react-dom-server.browser',
+    global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/react-dom-server.node.js',
+    name: 'react-dom-server.node',
+    global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'react-dom',
+      'async_hooks',
+      'crypto',
+      'stream',
+      'util',
+    ],
+  },
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-fb/src/ReactDOMServerFB.js',
+    global: 'ReactDOMServerStreaming',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React DOM Fizz Server Edge *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/react-dom-server.edge.js',
+    name: 'react-dom-server.edge', // 'node_modules/react/*.js',
+
+    global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React DOM Fizz Server Bun *******/
+  {
+    bundleTypes: [BUN_DEV, BUN_PROD],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/react-dom-server.bun.js',
+    name: 'react-dom-server.bun', // 'node_modules/react/*.js',
+
+    global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'crypto', 'stream', 'util'],
+  },
+
+  /******* React DOM Fizz Server External Runtime *******/
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [BROWSER_SCRIPT] : [],
+    moduleType: RENDERER,
+    entry: 'react-dom/unstable_server-external-runtime',
+    outputPath: 'unstable_server-external-runtime.js',
+    global: 'ReactDOMServerExternalRuntime',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
+  /******* React HTML RSC *******/
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-markup/src/ReactMarkupServer.js',
+    name: 'react-markup.react-server',
+    condition: 'react-server',
+    global: 'ReactMarkup',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React HTML Client *******/
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-markup/src/ReactMarkupClient.js',
+    name: 'react-markup',
+    global: 'ReactMarkup',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Server DOM Webpack Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry:
+      'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
+    name: 'react-server-dom-webpack-server.browser',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-webpack-server.node',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'react-dom',
+      'async_hooks',
+      'crypto',
+      'stream',
+      'util',
+    ],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/src/server/react-flight-dom-server.edge',
+    name: 'react-server-dom-webpack-server.edge',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Server DOM Webpack Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry:
+      'react-server-dom-webpack/src/client/react-flight-dom-client.browser',
+    name: 'react-server-dom-webpack-client.browser',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/src/client/react-flight-dom-client.node',
+    name: 'react-server-dom-webpack-client.node',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'util', 'crypto'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/src/client/react-flight-dom-client.edge',
+    name: 'react-server-dom-webpack-client.edge',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React Server DOM Webpack Plugin *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-webpack/plugin',
+    global: 'ReactServerWebpackPlugin',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['fs', 'path', 'url', 'neo-async'],
+  },
+
+  /******* React Server DOM Webpack Node.js Loader *******/
+  {
+    bundleTypes: [ESM_PROD],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-webpack/node-loader',
+    condition: 'react-server',
+    global: 'ReactServerWebpackNodeLoader',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['acorn'],
+  },
+
+  /******* React Server DOM Webpack Node.js CommonJS Loader *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-webpack/src/ReactFlightWebpackNodeRegister',
+    name: 'react-server-dom-webpack-node-register',
+    condition: 'react-server',
+    global: 'ReactFlightWebpackNodeRegister',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['url', 'module', 'react-server-dom-webpack/server'],
+  },
+
+  /******* React Server DOM Turbopack Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry:
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.browser',
+    name: 'react-server-dom-turbopack-server.browser',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-turbopack/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-turbopack-server.node',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'react-dom',
+      'async_hooks',
+      'crypto',
+      'stream',
+      'util',
+    ],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-turbopack/src/server/react-flight-dom-server.edge',
+    name: 'react-server-dom-turbopack-server.edge',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Server DOM Turbopack Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry:
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.browser',
+    name: 'react-server-dom-turbopack-client.browser',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-turbopack/src/client/react-flight-dom-client.node',
+    name: 'react-server-dom-turbopack-client.node',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'util'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-turbopack/src/client/react-flight-dom-client.edge',
+    name: 'react-server-dom-turbopack-client.edge',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React Server DOM Parcel Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-parcel/src/server/react-flight-dom-server.browser',
+    name: 'react-server-dom-parcel-server.browser',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-parcel/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-parcel-server.node',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'react-dom',
+      'async_hooks',
+      'crypto',
+      'stream',
+      'util',
+    ],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-parcel/src/server/react-flight-dom-server.edge',
+    name: 'react-server-dom-parcel-server.edge',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React Server DOM Parcel Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-parcel/src/client/react-flight-dom-client.browser',
+    name: 'react-server-dom-parcel-client.browser',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-parcel/src/client/react-flight-dom-client.node',
+    name: 'react-server-dom-parcel-client.node',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'util'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-parcel/src/client/react-flight-dom-client.edge',
+    name: 'react-server-dom-parcel-client.edge',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+
+  /******* React Server DOM ESM Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-esm/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-esm-server.node',
+    condition: 'react-server',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'react-dom',
+      'async_hooks',
+      'crypto',
+      'stream',
+      'util',
+    ],
+  },
+
+  /******* React Server DOM ESM Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, ESM_DEV, ESM_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-esm/client.browser',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-esm/client.node',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'util'],
+  },
+
+  /******* React Server DOM ESM Node.js Loader *******/
+  {
+    bundleTypes: [ESM_PROD],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-esm/node-loader',
+    condition: 'react-server',
+    global: 'ReactServerESMNodeLoader',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['acorn'],
+  },
+
+  /******* React Server DOM Unbundled Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-unbundled/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-unbundled-server.node',
+    condition: 'react-server',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'react-dom',
+      'async_hooks',
+      'crypto',
+      'stream',
+      'util',
+    ],
+  },
+
+  /******* React Server DOM Unbundled Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-unbundled/src/client/react-flight-dom-client.node',
+    name: 'react-server-dom-unbundled-client.node',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'react-dom', 'util', 'crypto'],
+  },
+
+  /******* React Server DOM Unbundled Node.js Loader *******/
+  {
+    bundleTypes: [ESM_PROD],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-unbundled/node-loader',
+    condition: 'react-server',
+    global: 'ReactServerUnbundledNodeLoader',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['acorn'],
+  },
+
+  /******* React Server DOM Unbundled Node.js CommonJS Loader *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-server-dom-unbundled/src/ReactFlightUnbundledNodeRegister',
+    name: 'react-server-dom-unbundled-node-register',
+    condition: 'react-server',
+    global: 'ReactFlightUnbundledNodeRegister',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['url', 'module', 'react-server-dom-unbundled/server'],
+  },
+
+  /******* React Suspense Test Utils *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-suspense-test-utils',
+    global: 'ReactSuspenseTestUtils',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React ART *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: RENDERER,
+    entry: 'react-art',
+    global: 'ReactART',
+    externals: ['react'],
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    babel: opts =>
+      Object.assign({}, opts, {
+        // Include JSX
+        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}],
+        ]),
+      }),
+  },
+
+  /******* React Native Fabric *******/
+  {
+    bundleTypes: __EXPERIMENTAL__
+      ? []
+      : [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
+    moduleType: RENDERER,
+    entry: 'react-native-renderer/fabric',
+    global: 'ReactFabric',
+    externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    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],
+    moduleType: RENDERER,
+    entry: 'react-native-renderer/fabric',
+    global: 'ReactFabric',
+    // ReactNativeInternalFeatureFlags temporary until we land enableRemoveConsolePatches.
+    // Needs to be done before the next RN OSS release.
+    externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
+  },
+
+  /******* React Test Renderer *******/
+  {
+    bundleTypes: [
+      FB_WWW_DEV,
+      NODE_DEV,
+      NODE_PROD,
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
+    ],
+    moduleType: RENDERER,
+    entry: 'react-test-renderer',
+    global: 'ReactTestRenderer',
+    externals: [
+      'react',
+      'scheduler',
+      'scheduler/unstable_mock',
+      'ReactNativeInternalFeatureFlags',
+    ],
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    babel: opts =>
+      Object.assign({}, opts, {
+        plugins: opts.plugins.concat([
+          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
+        ]),
+      }),
+  },
+
+  /******* React Noop Renderer (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer',
+    global: 'ReactNoopRenderer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
+  },
+
+  /******* React Noop Persistent Renderer (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer/persistent',
+    global: 'ReactNoopRendererPersistent',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'scheduler', 'expect'],
+  },
+
+  /******* React Noop Server Renderer (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer/server',
+    global: 'ReactNoopRendererServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'scheduler', 'expect'],
+  },
+
+  /******* React Noop Flight Server (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer/flight-server',
+    condition: 'react-server',
+    global: 'ReactNoopFlightServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'scheduler',
+      'expect',
+      'react-noop-renderer/flight-modules',
+    ],
+  },
+
+  /******* React Noop Flight Client (used for tests) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-noop-renderer/flight-client',
+    global: 'ReactNoopFlightClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [
+      'react',
+      'scheduler',
+      'expect',
+      'react-noop-renderer/flight-modules',
+    ],
+  },
+
+  /******* React Reconciler *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, NODE_PROFILING, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: RECONCILER,
+    entry: 'react-reconciler',
+    global: 'ReactReconciler',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RECONCILER,
+    entry: 'react-server',
+    global: 'ReactServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Flight Server *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RECONCILER,
+    entry: 'react-server/flight',
+    condition: 'react-server',
+    global: 'ReactFlightServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* React Flight Client *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RECONCILER,
+    entry: 'react-client/flight',
+    global: 'ReactFlightClient',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+
+  /******* Reconciler Reflection *******/
+  {
+    moduleType: RENDERER_UTILS,
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    entry: 'react-reconciler/reflection',
+    global: 'ReactFiberTreeReflection',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
+  /******* Reconciler Constants *******/
+  {
+    moduleType: RENDERER_UTILS,
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    entry: 'react-reconciler/constants',
+    global: 'ReactReconcilerConstants',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
+  /******* React Is *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'react-is',
+    global: 'ReactIs',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React Debug Tools *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-debug-tools',
+    global: 'ReactDebugTools',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
+  /******* React Cache (experimental, old) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-cache',
+    global: 'ReactCacheOld',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'scheduler'],
+  },
+
+  /******* Hook for managing subscriptions safely *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-subscription',
+    global: 'useSubscription',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStore *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStore (shim) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/shim',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStore (shim, native) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/shim/index.native',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStoreWithSelector *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/with-selector',
+    global: 'useSyncExternalStoreWithSelector',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStoreWithSelector (shim) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/shim/with-selector',
+    global: 'useSyncExternalStoreWithSelector',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['react', 'use-sync-external-store/shim'],
+  },
+
+  /******* React Scheduler (experimental) *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      FB_WWW_PROFILING,
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'scheduler',
+    global: 'Scheduler',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
+    externals: ['ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React Scheduler Mock (experimental) *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      RN_FB_DEV,
+      RN_FB_PROD,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'scheduler/unstable_mock',
+    global: 'SchedulerMock',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React Scheduler Native *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'scheduler/index.native',
+    global: 'SchedulerNative',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['ReactNativeInternalFeatureFlags'],
+  },
+
+  /******* React Scheduler Post Task (experimental) *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      FB_WWW_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'scheduler/unstable_post_task',
+    global: 'SchedulerPostTask',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
+  /******* Jest React (experimental) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'jest-react',
+    global: 'JestReact',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
+  },
+
+  /******* ESLint Plugin for Hooks *******/
+  {
+    // TODO: we're building this from typescript source now, but there's really
+    // no reason to have both dev and prod for this package.  It's
+    // currently required in order for the package to be copied over correctly.
+    // So, it would be worth improving that flow.
+    name: 'eslint-plugin-react-hooks',
+    bundleTypes: [NODE_DEV, NODE_PROD, CJS_DTS],
+    moduleType: ISOMORPHIC,
+    entry: 'eslint-plugin-react-hooks/src/index.ts',
+    global: 'ESLintPluginReactHooks',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    preferBuiltins: true,
+    externals: [
+      '@babel/core',
+      'hermes-parser',
+      'zod',
+      'zod/v4',
+      'zod-validation-error',
+      'zod-validation-error/v4',
+      'crypto',
+      'util',
+    ],
+    tsconfig: './packages/eslint-plugin-react-hooks/tsconfig.json',
+    prebuild: `mkdir -p ./compiler/packages/babel-plugin-react-compiler/dist && echo "module.exports = require('../src/index.ts');" > ./compiler/packages/babel-plugin-react-compiler/dist/index.js`,
+  },
+
+  /******* React Fresh *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-refresh/babel',
+    global: 'ReactFreshBabelPlugin',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV],
+    moduleType: ISOMORPHIC,
+    entry: 'react-refresh/runtime',
+    global: 'ReactFreshRuntime',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+];
+
+// Based on deep-freeze by substack (public domain)
+function deepFreeze(o) {
+  Object.freeze(o);
+  Object.getOwnPropertyNames(o).forEach(function (prop) {
+    if (
+      o[prop] !== null &&
+      (typeof o[prop] === 'object' || typeof o[prop] === 'function') &&
+      !Object.isFrozen(o[prop])
+    ) {
+      deepFreeze(o[prop]);
+    }
+  });
+  return o;
+}
+
+// Don't accidentally mutate config as part of the build
+deepFreeze(bundles);
+deepFreeze(bundleTypes);
+deepFreeze(moduleTypes);
+
+function getFilename(bundle, bundleType) {
+  let name = bundle.name || bundle.entry;
+  const globalName = bundle.global;
+  // we do this to replace / to -, for react-dom/server
+  name = name.replace('/index.', '.').replace('/', '-');
+  switch (bundleType) {
+    case NODE_ES2015:
+      return `${name}.js`;
+    case BUN_DEV:
+      return `${name}.development.js`;
+    case BUN_PROD:
+      return `${name}.production.js`;
+    case ESM_DEV:
+      return `${name}.development.js`;
+    case ESM_PROD:
+      return `${name}.production.js`;
+    case NODE_DEV:
+      return `${name}.development.js`;
+    case NODE_PROD:
+      return `${name}.production.js`;
+    case NODE_PROFILING:
+      return `${name}.profiling.js`;
+    case FB_WWW_DEV:
+    case RN_OSS_DEV:
+    case RN_FB_DEV:
+      return `${globalName}-dev.js`;
+    case FB_WWW_PROD:
+    case RN_OSS_PROD:
+    case RN_FB_PROD:
+      return `${globalName}-prod.js`;
+    case FB_WWW_PROFILING:
+    case RN_FB_PROFILING:
+    case RN_OSS_PROFILING:
+      return `${globalName}-profiling.js`;
+    case BROWSER_SCRIPT:
+      return `${name}.js`;
+    case CJS_DTS:
+    case ESM_DTS:
+      return `${name}.d.ts`;
+  }
+}
+
+let activeBundles = bundles;
+if (process.env.BUNDLES_FILTER != null) {
+  activeBundles = activeBundles.filter(
+    bundle => bundle.name === process.env.BUNDLES_FILTER
+  );
+  if (activeBundles.length === 0) {
+    throw new Error(
+      `No bundles matched for BUNDLES_FILTER=${process.env.BUNDLES_FILTER}`
+    );
+  }
+}
+
+module.exports = {
+  bundleTypes,
+  moduleTypes,
+  bundles: activeBundles,
+  getFilename,
+};
diff --git a/scripts/rollup/externs/closure-externs.js b/scripts/rollup/externs/closure-externs.js
new file mode 100644
index 00000000000..f8eeb0e368e
--- /dev/null
+++ b/scripts/rollup/externs/closure-externs.js
@@ -0,0 +1,9 @@
+/**
+ * @externs
+ */
+/* eslint-disable */
+
+'use strict';
+
+/** @type {function} */
+var addEventListener;
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
new file mode 100644
index 00000000000..33c7c96abbc
--- /dev/null
+++ b/scripts/rollup/forks.js
@@ -0,0 +1,484 @@
+'use strict';
+
+const fs = require('node:fs');
+const {bundleTypes, moduleTypes} = require('./bundles');
+const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
+
+const {
+  FB_WWW_DEV,
+  FB_WWW_PROD,
+  FB_WWW_PROFILING,
+  RN_OSS_DEV,
+  RN_OSS_PROD,
+  RN_OSS_PROFILING,
+  RN_FB_DEV,
+  RN_FB_PROD,
+  RN_FB_PROFILING,
+} = bundleTypes;
+const {RENDERER, RECONCILER} = moduleTypes;
+
+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;
+
+function findNearestExistingForkFile(path, segmentedIdentifier, suffix) {
+  const segments = segmentedIdentifier.split('-');
+  while (segments.length) {
+    const candidate = segments.join('-');
+    const forkPath = path + candidate + suffix;
+    try {
+      fs.statSync(forkPath);
+      return forkPath;
+    } catch (error) {
+      // Try the next candidate.
+    }
+    segments.pop();
+  }
+  return null;
+}
+
+// If you need to replace a file with another file for a specific environment,
+// add it to this list with the logic for choosing the right replacement.
+
+// Fork paths are relative to the project root. They must include the full path,
+// including the extension. We intentionally don't use Node's module resolution
+// algorithm because 1) require.resolve doesn't work with ESM modules, and 2)
+// the behavior is easier to predict.
+const forks = Object.freeze({
+  // Without this fork, importing `shared/ReactSharedInternals` inside
+  // the `react` package itself would not work due to a cyclical dependency.
+  './packages/shared/ReactSharedInternals.js': (
+    bundleType,
+    entry,
+    dependencies,
+    _moduleType,
+    bundle
+  ) => {
+    if (entry === 'react') {
+      return './packages/react/src/ReactSharedInternalsClient.js';
+    }
+    if (entry === 'react/src/ReactServer.js') {
+      return './packages/react/src/ReactSharedInternalsServer.js';
+    }
+    if (entry === 'react-markup/src/ReactMarkupServer.js') {
+      // Inside the ReactMarkupServer render we don't refer to any shared internals
+      // but instead use our own internal copy of the state because you cannot use
+      // any of this state from a component anyway. E.g. you can't use a client hook.
+      return './packages/react/src/ReactSharedInternalsClient.js';
+    }
+    if (bundle.condition === 'react-server') {
+      return './packages/react-server/src/ReactSharedInternalsServer.js';
+    }
+    if (!entry.startsWith('react/') && dependencies.indexOf('react') === -1) {
+      // React internals are unavailable if we can't reference the package.
+      // We return an error because we only want to throw if this module gets used.
+      return new Error(
+        'Cannot use a module that depends on ReactSharedInternals ' +
+          'from "' +
+          entry +
+          '" because it does not declare "react" in the package ' +
+          'dependencies or peerDependencies.'
+      );
+    }
+    return null;
+  },
+
+  // Without this fork, importing `shared/ReactDOMSharedInternals` inside
+  // the `react-dom` package itself would not work due to a cyclical dependency.
+  './packages/shared/ReactDOMSharedInternals.js': (
+    bundleType,
+    entry,
+    dependencies
+  ) => {
+    if (
+      entry === 'react-dom' ||
+      entry === 'react-dom/src/ReactDOMFB.js' ||
+      entry === 'react-dom/src/ReactDOMTestingFB.js' ||
+      entry === 'react-dom/src/ReactDOMServer.js' ||
+      entry === 'react-markup/src/ReactMarkupClient.js' ||
+      entry === 'react-markup/src/ReactMarkupServer.js'
+    ) {
+      if (
+        bundleType === FB_WWW_DEV ||
+        bundleType === FB_WWW_PROD ||
+        bundleType === FB_WWW_PROFILING
+      ) {
+        return './packages/react-dom/src/ReactDOMSharedInternalsFB.js';
+      } else {
+        return './packages/react-dom/src/ReactDOMSharedInternals.js';
+      }
+    }
+    if (
+      !entry.startsWith('react-dom/') &&
+      dependencies.indexOf('react-dom') === -1
+    ) {
+      // React DOM internals are unavailable if we can't reference the package.
+      // We return an error because we only want to throw if this module gets used.
+      return new Error(
+        'Cannot use a module that depends on ReactDOMSharedInternals ' +
+          'from "' +
+          entry +
+          '" because it does not declare "react-dom" in the package ' +
+          'dependencies or peerDependencies.'
+      );
+    }
+    return null;
+  },
+
+  // We have a few forks for different environments.
+  './packages/shared/ReactFeatureFlags.js': (bundleType, entry) => {
+    switch (entry) {
+      case 'react-native-renderer':
+        switch (bundleType) {
+          case RN_FB_DEV:
+          case RN_FB_PROD:
+          case RN_FB_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.native-fb.js';
+          case RN_OSS_DEV:
+          case RN_OSS_PROD:
+          case RN_OSS_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.native-oss.js';
+          default:
+            throw Error(
+              `Unexpected entry (${entry}) and bundleType (${bundleType})`
+            );
+        }
+      case 'react-native-renderer/fabric':
+        switch (bundleType) {
+          case RN_FB_DEV:
+          case RN_FB_PROD:
+          case RN_FB_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.native-fb.js';
+          case RN_OSS_DEV:
+          case RN_OSS_PROD:
+          case RN_OSS_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.native-oss.js';
+          default:
+            throw Error(
+              `Unexpected entry (${entry}) and bundleType (${bundleType})`
+            );
+        }
+      case 'react-test-renderer':
+        switch (bundleType) {
+          case RN_FB_DEV:
+          case RN_FB_PROD:
+          case RN_FB_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js';
+          case FB_WWW_DEV:
+          case FB_WWW_PROD:
+          case FB_WWW_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.test-renderer.www.js';
+        }
+        return './packages/shared/forks/ReactFeatureFlags.test-renderer.js';
+      default:
+        switch (bundleType) {
+          case FB_WWW_DEV:
+          case FB_WWW_PROD:
+          case FB_WWW_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.www.js';
+          case RN_FB_DEV:
+          case RN_FB_PROD:
+          case RN_FB_PROFILING:
+            return './packages/shared/forks/ReactFeatureFlags.native-fb.js';
+        }
+    }
+    return null;
+  },
+
+  './packages/scheduler/src/SchedulerFeatureFlags.js': (
+    bundleType,
+    entry,
+    dependencies
+  ) => {
+    switch (bundleType) {
+      case FB_WWW_DEV:
+      case FB_WWW_PROD:
+      case FB_WWW_PROFILING:
+        return './packages/scheduler/src/forks/SchedulerFeatureFlags.www.js';
+      case RN_FB_DEV:
+      case RN_FB_PROD:
+      case RN_FB_PROFILING:
+        return './packages/scheduler/src/forks/SchedulerFeatureFlags.native-fb.js';
+      default:
+        return './packages/scheduler/src/SchedulerFeatureFlags.js';
+    }
+  },
+
+  './packages/shared/DefaultPrepareStackTrace.js': (
+    bundleType,
+    entry,
+    dependencies,
+    moduleType
+  ) => {
+    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;
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/shared/forks/DefaultPrepareStackTrace.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
+      }
+    }
+    return null;
+  },
+
+  './packages/react-reconciler/src/ReactFiberConfig.js': (
+    bundleType,
+    entry,
+    dependencies,
+    moduleType
+  ) => {
+    if (dependencies.indexOf('react-reconciler') !== -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) {
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-reconciler/src/forks/ReactFiberConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
+      }
+    }
+    throw new Error(
+      'Expected ReactFiberConfig 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?'
+    );
+  },
+
+  './packages/react-server/src/ReactServerStreamConfig.js': (
+    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;
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-server/src/forks/ReactServerStreamConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
+      }
+    }
+    throw new Error(
+      'Expected ReactServerStreamConfig 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?'
+    );
+  },
+
+  './packages/react-server/src/ReactFizzConfig.js': (
+    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;
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-server/src/forks/ReactFizzConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
+      }
+    }
+    throw new Error(
+      'Expected ReactFizzConfig 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?'
+    );
+  },
+
+  './packages/react-server/src/ReactFlightServerConfig.js': (
+    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;
+        }
+        if (rendererInfo.isFlightSupported === false) {
+          return new Error(
+            `Expected not to use ReactFlightServerConfig with "${entry}" entry point ` +
+              'in ./scripts/shared/inlinedHostConfigs.js. Update the renderer config to ' +
+              'activate flight suppport and add a matching fork implementation for ReactFlightServerConfig.'
+          );
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-server/src/forks/ReactFlightServerConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
+      }
+    }
+    throw new Error(
+      'Expected ReactFlightServerConfig 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?'
+    );
+  },
+
+  './packages/react-client/src/ReactFlightClientConfig.js': (
+    bundleType,
+    entry,
+    dependencies,
+    moduleType
+  ) => {
+    if (dependencies.indexOf('react-client') !== -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;
+        }
+        if (rendererInfo.isFlightSupported === false) {
+          return new Error(
+            `Expected not to use ReactFlightClientConfig with "${entry}" entry point ` +
+              'in ./scripts/shared/inlinedHostConfigs.js. Update the renderer config to ' +
+              'activate flight suppport and add a matching fork implementation for ReactFlightClientConfig.'
+          );
+        }
+        const foundFork = findNearestExistingForkFile(
+          './packages/react-client/src/forks/ReactFlightClientConfig.',
+          rendererInfo.shortName,
+          '.js'
+        );
+        if (foundFork) {
+          return foundFork;
+        }
+        // fall through to error
+        break;
+      }
+    }
+    throw new Error(
+      'Expected ReactFlightClientConfig 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?'
+    );
+  },
+
+  // We wrap top-level listeners into guards on www.
+  './packages/react-dom-bindings/src/events/EventListener.js': (
+    bundleType,
+    entry
+  ) => {
+    switch (bundleType) {
+      case FB_WWW_DEV:
+      case FB_WWW_PROD:
+      case FB_WWW_PROFILING:
+        if (__EXPERIMENTAL__) {
+          // In modern builds we don't use the indirection. We just use raw DOM.
+          return null;
+        } else {
+          // Use the www fork which is integrated with TimeSlice profiling.
+          return './packages/react-dom-bindings/src/events/forks/EventListener-www.js';
+        }
+      default:
+        return null;
+    }
+  },
+
+  './packages/use-sync-external-store/src/useSyncExternalStore.js': (
+    bundleType,
+    entry
+  ) => {
+    if (entry.startsWith('use-sync-external-store/shim')) {
+      return './packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js';
+    }
+    if (entry !== 'use-sync-external-store') {
+      // Internal modules that aren't shims should use the native API from the
+      // react package.
+      return './packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js';
+    }
+    return null;
+  },
+
+  './packages/use-sync-external-store/src/isServerEnvironment.js': (
+    bundleType,
+    entry
+  ) => {
+    if (entry.endsWith('.native')) {
+      return './packages/use-sync-external-store/src/forks/isServerEnvironment.native.js';
+    }
+  },
+});
+
+module.exports = forks;
diff --git a/scripts/rollup/generate-inline-fizz-runtime.js b/scripts/rollup/generate-inline-fizz-runtime.js
new file mode 100644
index 00000000000..c531240e0c5
--- /dev/null
+++ b/scripts/rollup/generate-inline-fizz-runtime.js
@@ -0,0 +1,106 @@
+'use strict';
+
+const fs = require('fs');
+const ClosureCompiler = require('google-closure-compiler').compiler;
+const prettier = require('prettier');
+
+const instructionDir =
+  './packages/react-dom-bindings/src/server/fizz-instruction-set';
+
+// This is the name of the generated file that exports the inline instruction
+// set as strings.
+const inlineCodeStringsFilename =
+  instructionDir + '/ReactDOMFizzInstructionSetInlineCodeStrings.js';
+
+const config = [
+  {
+    entry: 'ReactDOMFizzInlineShellTime.js',
+    exportName: 'markShellTime',
+  },
+  {
+    entry: 'ReactDOMFizzInlineClientRenderBoundary.js',
+    exportName: 'clientRenderBoundary',
+  },
+  {
+    entry: 'ReactDOMFizzInlineCompleteBoundary.js',
+    exportName: 'completeBoundary',
+  },
+  {
+    entry: 'ReactDOMFizzInlineCompleteBoundaryUpgradeToViewTransitions.js',
+    exportName: 'completeBoundaryUpgradeToViewTransitions',
+  },
+  {
+    entry: 'ReactDOMFizzInlineCompleteBoundaryWithStyles.js',
+    exportName: 'completeBoundaryWithStyles',
+  },
+  {
+    entry: 'ReactDOMFizzInlineCompleteSegment.js',
+    exportName: 'completeSegment',
+  },
+  {
+    entry: 'ReactDOMFizzInlineFormReplaying.js',
+    exportName: 'formReplaying',
+  },
+];
+
+const prettierConfig = require('../../.prettierrc.js');
+
+async function main() {
+  const exportStatements = await Promise.all(
+    config.map(async ({entry, exportName}) => {
+      const fullEntryPath = instructionDir + '/' + entry;
+      const compiler = new ClosureCompiler({
+        entry_point: fullEntryPath,
+        js: [
+          require.resolve('./externs/closure-externs.js'),
+          fullEntryPath,
+          instructionDir + '/ReactDOMFizzInstructionSetShared.js',
+        ],
+        compilation_level: 'ADVANCED',
+        language_in: 'ECMASCRIPT_2020',
+        language_out: 'ECMASCRIPT5_STRICT',
+        module_resolution: 'NODE',
+        // This is necessary to prevent Closure from inlining a Promise polyfill
+        rewrite_polyfills: false,
+      });
+
+      const code = await new Promise((resolve, reject) => {
+        compiler.run((exitCode, stdOut, stdErr) => {
+          if (exitCode !== 0) {
+            reject(new Error(stdErr));
+          } else {
+            resolve(stdOut);
+          }
+        });
+      });
+
+      return `export const ${exportName} = ${JSON.stringify(code.trim().replace('\n', ''))};`;
+    })
+  );
+
+  let outputCode = [
+    '// This is a generated file. The source files are in react-dom-bindings/src/server/fizz-instruction-set.',
+    '// The build script is at scripts/rollup/generate-inline-fizz-runtime.js.',
+    '// Run `yarn generate-inline-fizz-runtime` to generate.',
+    ...exportStatements,
+  ].join('\n');
+
+  // This replaces "window.$globalVar" with "$globalVar". There's probably a
+  // better way to do this with Closure, with externs or something, but I
+  // couldn't figure it out. Good enough for now. This only affects the inline
+  // Fizz runtime, and should break immediately if there were a mistake, so I'm
+  // not too worried about it.
+  outputCode = outputCode.replace(
+    /window\.(\$[A-z0-9_]*|matchMedia)/g,
+    (_, variableName) => variableName
+  );
+
+  const prettyOutputCode = await prettier.format(outputCode, prettierConfig);
+
+  fs.writeFileSync(inlineCodeStringsFilename, prettyOutputCode, 'utf8');
+}
+
+main().catch(err => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
new file mode 100644
index 00000000000..2afa0cc98b1
--- /dev/null
+++ b/scripts/rollup/modules.js
@@ -0,0 +1,92 @@
+'use strict';
+
+const forks = require('./forks');
+
+// For any external that is used in a DEV-only condition, explicitly
+// specify whether it has side effects during import or not. This lets
+// us know whether we can safely omit them when they are unused.
+const HAS_NO_SIDE_EFFECTS_ON_IMPORT = false;
+// const HAS_SIDE_EFFECTS_ON_IMPORT = true;
+const importSideEffects = Object.freeze({
+  fs: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'fs/promises': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  path: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  stream: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'prop-types/checkPropTypes': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface':
+    HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  scheduler: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  react: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'react-dom/server': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'react/jsx-dev-runtime': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'react-dom': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  url: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  ReactNativeInternalFeatureFlags: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'webpack-sources/lib/helpers/createMappingsSerializer.js':
+    HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  'webpack-sources/lib/helpers/readMappings.js': 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',
+  scheduler: 'Scheduler',
+  'scheduler/unstable_mock': 'SchedulerMock',
+  ReactNativeInternalFeatureFlags: 'ReactNativeInternalFeatureFlags',
+});
+
+// Given ['react'] in bundle externals, returns { 'react': 'React' }.
+function getPeerGlobals(externals, bundleType) {
+  const peerGlobals = {};
+  externals.forEach(name => {
+    peerGlobals[name] = knownGlobals[name];
+  });
+  return peerGlobals;
+}
+
+// Determines node_modules packages that are safe to assume will exist.
+function getDependencies(bundleType, entry) {
+  // Replaces any part of the entry that follow the package name (like
+  // "/server" in "react-dom/server") by the path to the package settings
+  const packageJson = require(entry.replace(/(\/.*)?$/, '/package.json'));
+  // Both deps and peerDeps are assumed as accessible.
+  return Array.from(
+    new Set([
+      ...Object.keys(packageJson.dependencies || {}),
+      ...Object.keys(packageJson.peerDependencies || {}),
+    ])
+  );
+}
+
+// Hijacks some modules for optimization and integration reasons.
+function getForks(bundleType, entry, moduleType, bundle) {
+  const forksForBundle = {};
+  Object.keys(forks).forEach(srcModule => {
+    const dependencies = getDependencies(bundleType, entry);
+    const targetModule = forks[srcModule](
+      bundleType,
+      entry,
+      dependencies,
+      moduleType,
+      bundle
+    );
+    if (targetModule === null) {
+      return;
+    }
+    forksForBundle[srcModule] = targetModule;
+  });
+  return forksForBundle;
+}
+
+function getImportSideEffects() {
+  return importSideEffects;
+}
+
+module.exports = {
+  getImportSideEffects,
+  getPeerGlobals,
+  getDependencies,
+  getForks,
+};
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
new file mode 100644
index 00000000000..564c40f71b9
--- /dev/null
+++ b/scripts/rollup/packaging.js
@@ -0,0 +1,291 @@
+'use strict';
+
+const {
+  existsSync,
+  readdirSync,
+  unlinkSync,
+  readFileSync,
+  writeFileSync,
+} = require('fs');
+const Bundles = require('./bundles');
+const {
+  asyncCopyTo,
+  asyncExecuteCommand,
+  asyncExtractTar,
+  asyncRimRaf,
+} = require('./utils');
+
+const {
+  NODE_ES2015,
+  ESM_DEV,
+  ESM_PROD,
+  NODE_DEV,
+  NODE_PROD,
+  NODE_PROFILING,
+  BUN_DEV,
+  BUN_PROD,
+  FB_WWW_DEV,
+  FB_WWW_PROD,
+  FB_WWW_PROFILING,
+  RN_OSS_DEV,
+  RN_OSS_PROD,
+  RN_OSS_PROFILING,
+  RN_FB_DEV,
+  RN_FB_PROD,
+  RN_FB_PROFILING,
+  BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
+} = Bundles.bundleTypes;
+
+function getPackageName(name) {
+  if (name.indexOf('/') !== -1) {
+    return name.split('/')[0];
+  }
+  return name;
+}
+
+function getBundleOutputPath(bundle, bundleType, filename, packageName) {
+  switch (bundleType) {
+    case NODE_ES2015:
+      return `build/node_modules/${packageName}/cjs/${filename}`;
+    case ESM_DEV:
+    case ESM_PROD:
+    case ESM_DTS:
+      return `build/node_modules/${packageName}/esm/${filename}`;
+    case BUN_DEV:
+    case BUN_PROD:
+      return `build/node_modules/${packageName}/cjs/${filename}`;
+    case NODE_DEV:
+    case NODE_PROD:
+    case NODE_PROFILING:
+    case CJS_DTS:
+      return `build/node_modules/${packageName}/cjs/${filename}`;
+    case FB_WWW_DEV:
+    case FB_WWW_PROD:
+    case FB_WWW_PROFILING:
+      return `build/facebook-www/${filename}`;
+    case RN_OSS_DEV:
+    case RN_OSS_PROD:
+    case RN_OSS_PROFILING:
+      switch (packageName) {
+        case 'react-native-renderer':
+          return `build/react-native/implementations/${filename}`;
+        default:
+          throw new Error('Unknown RN package.');
+      }
+    case RN_FB_DEV:
+    case RN_FB_PROD:
+    case RN_FB_PROFILING:
+      switch (packageName) {
+        case 'scheduler':
+        case 'react':
+        case 'react-dom':
+        case 'react-is':
+        case 'react-test-renderer':
+          return `build/facebook-react-native/${packageName}/cjs/${filename}`;
+        case 'react-native-renderer':
+          return `build/react-native/implementations/${filename.replace(
+            /\.js$/,
+            '.fb.js'
+          )}`;
+        default:
+          throw new Error('Unknown RN package.');
+      }
+    case BROWSER_SCRIPT: {
+      // Bundles that are served as browser scripts need to be able to be sent
+      // straight to the browser with any additional bundling. We shouldn't use
+      // a module to re-export. Depending on how they are served, they also may
+      // not go through package.json module resolution, so we shouldn't rely on
+      // that either. We should consider the output path as part of the public
+      // contract, and explicitly specify its location within the package's
+      // directory structure.
+      const outputPath = bundle.outputPath;
+      if (!outputPath) {
+        throw new Error(
+          'Bundles with type BROWSER_SCRIPT must specific an explicit ' +
+            'output path.'
+        );
+      }
+      return `build/node_modules/${packageName}/${outputPath}`;
+    }
+    default:
+      throw new Error('Unknown bundle type.');
+  }
+}
+
+async function copyWWWShims() {
+  await asyncCopyTo(
+    `${__dirname}/shims/facebook-www`,
+    'build/facebook-www/shims'
+  );
+}
+
+async function copyRNShims() {
+  await asyncCopyTo(
+    `${__dirname}/shims/react-native`,
+    'build/react-native/shims'
+  );
+  await asyncCopyTo(
+    require.resolve('react-native-renderer/src/ReactNativeTypes.js'),
+    'build/react-native/shims/ReactNativeTypes.js'
+  );
+}
+
+async function copyAllShims() {
+  await Promise.all([copyWWWShims(), copyRNShims()]);
+}
+
+function getTarOptions(tgzName, packageName) {
+  // Files inside the `npm pack`ed archive start
+  // with "package/" in their paths. We'll undo
+  // this during extraction.
+  const CONTENTS_FOLDER = 'package';
+  return {
+    src: tgzName,
+    dest: `build/node_modules/${packageName}`,
+    tar: {
+      entries: [CONTENTS_FOLDER],
+      map(header) {
+        if (header.name.indexOf(CONTENTS_FOLDER + '/') === 0) {
+          header.name = header.name.slice(CONTENTS_FOLDER.length + 1);
+        }
+      },
+    },
+  };
+}
+
+let entryPointsToHasBundle = new Map();
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for (const bundle of Bundles.bundles) {
+  let hasBundle = entryPointsToHasBundle.get(bundle.entry);
+  if (!hasBundle) {
+    const hasNonFBBundleTypes = bundle.bundleTypes.some(
+      type =>
+        type !== FB_WWW_DEV && type !== FB_WWW_PROD && type !== FB_WWW_PROFILING
+    );
+    entryPointsToHasBundle.set(bundle.entry, hasNonFBBundleTypes);
+  }
+}
+
+function filterOutEntrypoints(name) {
+  // Remove entry point files that are not built in this configuration.
+  let jsonPath = `build/node_modules/${name}/package.json`;
+  let packageJSON = JSON.parse(readFileSync(jsonPath));
+  let files = packageJSON.files;
+  let exportsJSON = packageJSON.exports;
+  let browserJSON = packageJSON.browser;
+  if (!Array.isArray(files)) {
+    throw new Error('expected all package.json files to contain a files field');
+  }
+  let changed = false;
+  for (let i = 0; i < files.length; i++) {
+    let filename = files[i];
+    let entry =
+      filename === 'index.js'
+        ? name
+        : name + '/' + filename.replace(/\.js$/, '');
+    let hasBundle = entryPointsToHasBundle.get(entry);
+    if (hasBundle === undefined) {
+      // This entry doesn't exist in the bundles. Check if something similar exists.
+      hasBundle =
+        entryPointsToHasBundle.get(entry + '.node') ||
+        entryPointsToHasBundle.get(entry + '.browser');
+
+      // The .react-server and .rsc suffixes may not have a bundle representation but
+      // should infer their bundle status from the non-suffixed entry point.
+      if (entry.endsWith('.react-server')) {
+        hasBundle = entryPointsToHasBundle.get(
+          entry.slice(0, '.react-server'.length * -1)
+        );
+      } else if (entry.endsWith('.rsc')) {
+        hasBundle = entryPointsToHasBundle.get(
+          entry.slice(0, '.rsc'.length * -1)
+        );
+      }
+    }
+    if (hasBundle === undefined) {
+      // This doesn't exist in the bundles. It's an extra file.
+    } else if (hasBundle === true) {
+      // This is built in this release channel.
+    } else {
+      // This doesn't have any bundleTypes in this release channel.
+      // Let's remove it.
+      files.splice(i, 1);
+      i--;
+      try {
+        unlinkSync(`build/node_modules/${name}/${filename}`);
+      } catch (err) {
+        // If the file doesn't exist we can just move on. Otherwise throw the halt the build
+        if (err.code !== 'ENOENT') {
+          throw err;
+        }
+      }
+      changed = true;
+      // Remove it from the exports field too if it exists.
+      if (exportsJSON) {
+        if (filename === 'index.js') {
+          delete exportsJSON['.'];
+        } else {
+          delete exportsJSON['./' + filename.replace(/\.js$/, '')];
+        }
+      }
+      if (browserJSON) {
+        delete browserJSON['./' + filename];
+      }
+    }
+
+    // We only export the source directory so Jest and Rollup can access them
+    // during local development and at build time. The files don't exist in the
+    // public builds, so we don't need the export entry, either.
+    const sourceWildcardExport = './src/*';
+    if (exportsJSON && exportsJSON[sourceWildcardExport]) {
+      delete exportsJSON[sourceWildcardExport];
+      changed = true;
+    }
+  }
+  if (changed) {
+    let newJSON = JSON.stringify(packageJSON, null, '  ');
+    writeFileSync(jsonPath, newJSON);
+  }
+}
+
+async function prepareNpmPackage(name) {
+  await Promise.all([
+    asyncCopyTo('LICENSE', `build/node_modules/${name}/LICENSE`),
+    asyncCopyTo(
+      `packages/${name}/package.json`,
+      `build/node_modules/${name}/package.json`
+    ),
+    asyncCopyTo(
+      `packages/${name}/README.md`,
+      `build/node_modules/${name}/README.md`
+    ),
+    asyncCopyTo(`packages/${name}/npm`, `build/node_modules/${name}`),
+  ]);
+  filterOutEntrypoints(name);
+  const tgzName = (
+    await asyncExecuteCommand(`npm pack build/node_modules/${name}`)
+  ).trim();
+  await asyncRimRaf(`build/node_modules/${name}`);
+  await asyncExtractTar(getTarOptions(tgzName, name));
+  unlinkSync(tgzName);
+}
+
+async function prepareNpmPackages() {
+  if (!existsSync('build/node_modules')) {
+    // We didn't build any npm packages.
+    return;
+  }
+  const builtPackageFolders = readdirSync('build/node_modules').filter(
+    dir => dir.charAt(0) !== '.'
+  );
+  await Promise.all(builtPackageFolders.map(prepareNpmPackage));
+}
+
+module.exports = {
+  copyAllShims,
+  getPackageName,
+  getBundleOutputPath,
+  prepareNpmPackages,
+};
diff --git a/scripts/rollup/plugins/closure-plugin.js b/scripts/rollup/plugins/closure-plugin.js
new file mode 100644
index 00000000000..43e2aa43156
--- /dev/null
+++ b/scripts/rollup/plugins/closure-plugin.js
@@ -0,0 +1,41 @@
+'use strict';
+
+const ClosureCompiler = require('google-closure-compiler').compiler;
+const {promisify} = require('util');
+const fs = require('fs');
+const tmp = require('tmp');
+const writeFileAsync = promisify(fs.writeFile);
+
+function compile(flags) {
+  return new Promise((resolve, reject) => {
+    const closureCompiler = new ClosureCompiler(flags);
+    closureCompiler.run(function (exitCode, stdOut, stdErr) {
+      if (!stdErr) {
+        resolve(stdOut);
+      } else {
+        reject(new Error(stdErr));
+      }
+    });
+  });
+}
+
+module.exports = function closure(flags = {}) {
+  return {
+    name: 'scripts/rollup/plugins/closure-plugin',
+    async renderChunk(code, chunk, options) {
+      const inputFile = tmp.fileSync();
+
+      // Tell Closure what JS source file to read, and optionally what sourcemap file to write
+      const finalFlags = {
+        ...flags,
+        js: inputFile.name,
+      };
+
+      await writeFileAsync(inputFile.name, code, 'utf8');
+      const compiledCode = await compile(finalFlags);
+
+      inputFile.removeCallback();
+      return {code: compiledCode};
+    },
+  };
+};
diff --git a/scripts/rollup/plugins/dynamic-imports.js b/scripts/rollup/plugins/dynamic-imports.js
new file mode 100644
index 00000000000..10bda3f05a4
--- /dev/null
+++ b/scripts/rollup/plugins/dynamic-imports.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 dynamicImports() {
+  return {
+    name: 'scripts/rollup/plugins/dynamic-imports',
+    renderDynamicImport({targetModuleId}) {
+      if (targetModuleId === null) {
+        return {left: 'import(', right: ')'};
+      }
+      return null;
+    },
+  };
+};
diff --git a/scripts/rollup/plugins/external-runtime-plugin.js b/scripts/rollup/plugins/external-runtime-plugin.js
new file mode 100644
index 00000000000..c2966844732
--- /dev/null
+++ b/scripts/rollup/plugins/external-runtime-plugin.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 externalRuntime() {
+  // When generating the source code for the Fizz runtime chunks we use global identifiers to refer
+  // to different parts of the implementation. When generating the external runtime we need to
+  // replace those with local identifiers instead.
+  return {
+    name: 'scripts/rollup/plugins/dynamic-imports',
+    renderChunk(source) {
+      // This replaces "window['$globalVar']" with "$globalVar".
+      const variables = new Set();
+      source = source.replace(
+        /window\[['"](\$[A-z0-9_]*)['"]\]/g,
+        (_, variableName) => {
+          variables.add(variableName);
+          return variableName;
+        }
+      );
+      const startOfFn = 'use strict';
+      let index = source.indexOf(startOfFn);
+      if (index === -1) {
+        return source;
+      }
+      index += startOfFn.length + 2;
+
+      // Insert the declarations in the beginning of the function closure
+      // to scope them to inside the runtime.
+      let declarations = 'let ';
+      variables.forEach(variable => {
+        if (declarations !== 'let ') {
+          declarations += ', ';
+        }
+        declarations += variable;
+      });
+      declarations += ';';
+      source = source.slice(0, index) + declarations + source.slice(index);
+      return source;
+    },
+  };
+};
diff --git a/scripts/rollup/plugins/sizes-plugin.js b/scripts/rollup/plugins/sizes-plugin.js
new file mode 100644
index 00000000000..148e105d3e2
--- /dev/null
+++ b/scripts/rollup/plugins/sizes-plugin.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 gzip = require('gzip-size');
+
+module.exports = function sizes(options) {
+  return {
+    name: 'scripts/rollup/plugins/sizes-plugin',
+    generateBundle(outputOptions, bundle, isWrite) {
+      Object.keys(bundle).forEach(id => {
+        const chunk = bundle[id];
+        if (chunk) {
+          const size = Buffer.byteLength(chunk.code);
+          const gzipSize = gzip.sync(chunk.code);
+          options.getSize(size, gzipSize);
+        }
+      });
+    },
+  };
+};
diff --git a/scripts/rollup/plugins/use-forks-plugin.js b/scripts/rollup/plugins/use-forks-plugin.js
new file mode 100644
index 00000000000..31b6912081f
--- /dev/null
+++ b/scripts/rollup/plugins/use-forks-plugin.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 path = require('path');
+const semver = require('semver');
+
+function resolveRelatively(importee, importer) {
+  if (semver.gte(process.version, '8.9.0')) {
+    return require.resolve(importee, {
+      paths: [path.dirname(importer)],
+    });
+  } else {
+    // `paths` argument is not available in older Node.
+    // This works though.
+    // https://github.com/nodejs/node/issues/5963
+    const Module = require('module');
+    return Module._findPath(importee, [
+      path.dirname(importer),
+      ...module.paths,
+    ]);
+  }
+}
+
+let resolveCache = new Map();
+function useForks(forks) {
+  let resolvedForks = new Map();
+  Object.keys(forks).forEach(srcModule => {
+    // Fork paths are relative to the project root. They must include the full
+    // path, including the extension. We intentionally don't use Node's module
+    // resolution algorithm because 1) require.resolve doesn't work with ESM
+    // modules, and 2) the behavior is easier to predict.
+    const targetModule = forks[srcModule];
+    resolvedForks.set(
+      path.resolve(process.cwd(), srcModule),
+      // targetModule could be a string (a file path),
+      // or an error (which we'd throw if it gets used).
+      // Don't try to "resolve" errors, but cache
+      // resolved file paths.
+      typeof targetModule === 'string'
+        ? path.resolve(process.cwd(), targetModule)
+        : targetModule
+    );
+  });
+  return {
+    name: 'scripts/rollup/plugins/use-forks-plugin',
+    resolveId(importee, importer) {
+      if (!importer || !importee) {
+        return null;
+      }
+      if (importee.startsWith('\u0000')) {
+        // Internal Rollup reference, ignore.
+        // Passing that to Node file functions can fatal.
+        return null;
+      }
+      let resolvedImportee = null;
+      let cacheKey = `${importer}:::${importee}`;
+      if (resolveCache.has(cacheKey)) {
+        // Avoid hitting file system if possible.
+        resolvedImportee = resolveCache.get(cacheKey);
+      } else {
+        try {
+          resolvedImportee = resolveRelatively(importee, importer);
+        } catch (err) {
+          // Not our fault, let Rollup fail later.
+        }
+        if (resolvedImportee) {
+          resolveCache.set(cacheKey, resolvedImportee);
+        }
+      }
+      if (resolvedImportee && resolvedForks.has(resolvedImportee)) {
+        // We found a fork!
+        const fork = resolvedForks.get(resolvedImportee);
+        if (fork instanceof Error) {
+          throw fork;
+        }
+        return fork;
+      }
+      return null;
+    },
+  };
+}
+
+module.exports = useForks;
diff --git a/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js b/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js
new file mode 100644
index 00000000000..38a1171bc29
--- /dev/null
+++ b/scripts/rollup/shims/facebook-www/ReactBrowserEventEmitter_DO_NOT_USE.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {
+  __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+} = require('ReactDOM');
+
+module.exports =
+  __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.ReactBrowserEventEmitter;
diff --git a/scripts/rollup/shims/react-native/ReactFabric.js b/scripts/rollup/shims/react-native/ReactFabric.js
new file mode 100644
index 00000000000..69fb77af69a
--- /dev/null
+++ b/scripts/rollup/shims/react-native/ReactFabric.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noformat
+ * @nolint
+ * @flow
+ */
+
+'use strict';
+
+import {BatchedBridge} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+import type {ReactFabricType} from './ReactNativeTypes';
+
+let ReactFabric: ReactFabricType;
+
+if (__DEV__) {
+  ReactFabric = require('../implementations/ReactFabric-dev');
+} else {
+  ReactFabric = require('../implementations/ReactFabric-prod');
+}
+
+global.RN$stopSurface = ReactFabric.stopSurface;
+
+if (global.RN$Bridgeless !== true) {
+  BatchedBridge.registerCallableModule('ReactFabric', ReactFabric);
+}
+
+export default ReactFabric;
diff --git a/scripts/rollup/shims/react-native/ReactFeatureFlags.js b/scripts/rollup/shims/react-native/ReactFeatureFlags.js
new file mode 100644
index 00000000000..3f8f278e972
--- /dev/null
+++ b/scripts/rollup/shims/react-native/ReactFeatureFlags.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noformat
+ * @nolint
+ * @flow strict-local
+ */
+
+'use strict';
+
+const ReactFeatureFlags = {
+  debugRenderPhaseSideEffects: false,
+};
+
+export default ReactFeatureFlags;
diff --git a/scripts/rollup/shims/react-native/ReactNative.js b/scripts/rollup/shims/react-native/ReactNative.js
new file mode 100644
index 00000000000..4e7ab19ae6e
--- /dev/null
+++ b/scripts/rollup/shims/react-native/ReactNative.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noformat
+ * @nolint
+ * @flow
+ */
+'use strict';
+
+import type {ReactNativeType} from './ReactNativeTypes';
+
+let ReactNative: ReactNativeType;
+
+// TODO: Delete the legacy renderer. Only ReactFabric is used now.
+if (__DEV__) {
+  ReactNative = require('../implementations/ReactNativeRenderer-dev');
+} else {
+  ReactNative = require('../implementations/ReactNativeRenderer-prod');
+}
+
+export default ReactNative;
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
new file mode 100644
index 00000000000..75e646e1b39
--- /dev/null
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noformat
+ * @nolint
+ * @flow strict-local
+ */
+
+'use strict';
+
+import {type ViewConfig} from './ReactNativeTypes';
+import invariant from 'invariant';
+
+// Event configs
+export const customBubblingEventTypes: {
+  [eventName: string]: $ReadOnly<{
+    phasedRegistrationNames: $ReadOnly<{
+      captured: string,
+      bubbled: string,
+      skipBubbling?: ?boolean,
+    }>,
+  }>,
+} = {};
+export const customDirectEventTypes: {
+  [eventName: string]: $ReadOnly<{
+    registrationName: string,
+  }>,
+} = {};
+
+const viewConfigCallbacks = new Map<string, ?() => ViewConfig>();
+const viewConfigs = new Map<string, ViewConfig>();
+
+function processEventTypes(viewConfig: ViewConfig): void {
+  const {bubblingEventTypes, directEventTypes} = viewConfig;
+
+  if (__DEV__) {
+    if (bubblingEventTypes != null && directEventTypes != null) {
+      for (const topLevelType in directEventTypes) {
+        invariant(
+          bubblingEventTypes[topLevelType] == null,
+          'Event cannot be both direct and bubbling: %s',
+          topLevelType,
+        );
+      }
+    }
+  }
+
+  if (bubblingEventTypes != null) {
+    for (const topLevelType in bubblingEventTypes) {
+      if (customBubblingEventTypes[topLevelType] == null) {
+        customBubblingEventTypes[topLevelType] =
+          bubblingEventTypes[topLevelType];
+      }
+    }
+  }
+
+  if (directEventTypes != null) {
+    for (const topLevelType in directEventTypes) {
+      if (customDirectEventTypes[topLevelType] == null) {
+        customDirectEventTypes[topLevelType] = directEventTypes[topLevelType];
+      }
+    }
+  }
+}
+
+/**
+ * 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.
+ */
+export function register(name: string, callback: () => ViewConfig): string {
+  invariant(
+    !viewConfigCallbacks.has(name),
+    '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,
+    /* $FlowFixMe[invalid-compare] Error discovered during Constant Condition
+     * roll out. See https://fburl.com/workplace/5whu3i34. */
+    callback === null ? 'null' : typeof callback,
+  );
+  viewConfigCallbacks.set(name, callback);
+  return name;
+}
+
+/**
+ * Retrieves a config for the specified view.
+ * If this is the first time the view has been used,
+ * This configuration will be lazy-loaded from UIManager.
+ */
+export function get(name: string): ViewConfig {
+  let viewConfig = viewConfigs.get(name);
+  if (viewConfig == null) {
+    const callback = viewConfigCallbacks.get(name);
+    if (typeof callback !== 'function') {
+      invariant(
+        false,
+        'View config getter callback for component `%s` must be a function (received `%s`).%s',
+        name,
+        callback === null ? 'null' : typeof callback,
+        // $FlowFixMe[recursive-definition]
+        typeof name[0] === 'string' && /[a-z]/.test(name[0])
+          ? ' Make sure to start component names with a capital letter.'
+          : '',
+      );
+    }
+    viewConfig = callback();
+    invariant(viewConfig, 'View config not found for component `%s`', name);
+
+    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);
+  }
+  return viewConfig;
+}
diff --git a/scripts/rollup/shims/react-native/createReactNativeComponentClass.js b/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
new file mode 100644
index 00000000000..42ea979daef
--- /dev/null
+++ b/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noformat
+ * @nolint
+ * @flow strict-local
+ */
+
+'use strict';
+
+import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {type ViewConfig} from './ReactNativeTypes';
+
+const {register} = ReactNativeViewConfigRegistry;
+
+/**
+ * Creates a renderable ReactNative host component.
+ * Use this method for view configs that are loaded from UIManager.
+ * Use createReactNativeComponentClass() for view configs defined within JavaScript.
+ *
+ * @param {string} config iOS View configuration.
+ * @private
+ */
+const createReactNativeComponentClass = function (
+  name: string,
+  callback: () => ViewConfig,
+): string {
+  return register(name, callback);
+};
+
+export default createReactNativeComponentClass;
diff --git a/scripts/rollup/stats.js b/scripts/rollup/stats.js
new file mode 100644
index 00000000000..d0fbce71089
--- /dev/null
+++ b/scripts/rollup/stats.js
@@ -0,0 +1,126 @@
+'use strict';
+
+const Table = require('cli-table');
+const filesize = require('filesize');
+const chalk = require('chalk');
+const join = require('path').join;
+const fs = require('fs');
+const mkdirp = require('mkdirp');
+
+const BUNDLE_SIZES_FILE_NAME = join(__dirname, '../../build/bundle-sizes.json');
+const prevBuildResults = fs.existsSync(BUNDLE_SIZES_FILE_NAME)
+  ? require(BUNDLE_SIZES_FILE_NAME)
+  : {bundleSizes: []};
+
+const currentBuildResults = {
+  // Mutated inside build.js during a build run.
+  bundleSizes: [],
+};
+
+function saveResults() {
+  if (process.env.CI === true) {
+    mkdirp.sync('build/sizes');
+    fs.writeFileSync(
+      join('build', 'sizes', `bundle-sizes-${process.env.NODE_INDEX}.json`),
+      JSON.stringify(currentBuildResults, null, 2)
+    );
+  } else {
+    // Write all the bundle sizes to a single JSON file.
+    fs.writeFileSync(
+      BUNDLE_SIZES_FILE_NAME,
+      JSON.stringify(currentBuildResults, null, 2)
+    );
+  }
+}
+
+function fractionalChange(prev, current) {
+  return (current - prev) / prev;
+}
+
+function percentChangeString(change) {
+  if (!isFinite(change)) {
+    // When a new package is created
+    return 'n/a';
+  }
+  const formatted = (change * 100).toFixed(1);
+  if (/^-|^0(?:\.0+)$/.test(formatted)) {
+    return `${formatted}%`;
+  } else {
+    return `+${formatted}%`;
+  }
+}
+
+const resultsHeaders = [
+  'Bundle',
+  'Prev Size',
+  'Current Size',
+  'Diff',
+  'Prev Gzip',
+  'Current Gzip',
+  'Diff',
+];
+
+function generateResultsArray(current, prevResults) {
+  return current.bundleSizes
+    .map(result => {
+      const prev = prevResults.bundleSizes.filter(
+        res =>
+          res.filename === result.filename &&
+          res.bundleType === result.bundleType
+      )[0];
+      if (result === prev) {
+        // We didn't rebuild this bundle.
+        return;
+      }
+
+      const size = result.size;
+      const gzip = result.gzip;
+      let prevSize = prev ? prev.size : 0;
+      let prevGzip = prev ? prev.gzip : 0;
+
+      return {
+        filename: result.filename,
+        bundleType: result.bundleType,
+        packageName: result.packageName,
+        prevSize: filesize(prevSize),
+        prevFileSize: filesize(size),
+        prevFileSizeChange: fractionalChange(prevSize, size),
+        prevFileSizeAbsoluteChange: size - prevSize,
+        prevGzip: filesize(prevGzip),
+        prevGzipSize: filesize(gzip),
+        prevGzipSizeChange: fractionalChange(prevGzip, gzip),
+        prevGzipSizeAbsoluteChange: gzip - prevGzip,
+      };
+      // Strip any nulls
+    })
+    .filter(f => f);
+}
+
+function printResults() {
+  const table = new Table({
+    head: resultsHeaders.map(label => chalk.gray.yellow(label)),
+  });
+
+  const results = generateResultsArray(currentBuildResults, prevBuildResults);
+  results.forEach(result => {
+    table.push([
+      chalk.white.bold(`${result.filename}  (${result.bundleType})`),
+      chalk.gray.bold(result.prevSize),
+      chalk.white.bold(result.prevFileSize),
+      percentChangeString(result.prevFileSizeChange),
+      chalk.gray.bold(result.prevGzip),
+      chalk.white.bold(result.prevGzipSize),
+      percentChangeString(result.prevGzipSizeChange),
+    ]);
+  });
+
+  return table.toString();
+}
+
+module.exports = {
+  currentBuildResults,
+  generateResultsArray,
+  printResults,
+  saveResults,
+  resultsHeaders,
+};
diff --git a/scripts/rollup/sync.js b/scripts/rollup/sync.js
new file mode 100644
index 00000000000..8b2d839b57a
--- /dev/null
+++ b/scripts/rollup/sync.js
@@ -0,0 +1,57 @@
+'use strict';
+
+const asyncCopyTo = require('./utils').asyncCopyTo;
+const chalk = require('chalk');
+const resolvePath = require('./utils').resolvePath;
+
+const DEFAULT_FB_SOURCE_PATH = '~/fbsource/';
+const DEFAULT_WWW_PATH = '~/www/';
+const RELATIVE_RN_OSS_PATH = 'xplat/js/react-native-github/Libraries/Renderer/';
+const RELATIVE_WWW_PATH = 'html/shared/react/';
+
+async function doSync(buildPath, destPath) {
+  console.log(`${chalk.bgYellow.black(' SYNCING ')} React to ${destPath}`);
+
+  await asyncCopyTo(buildPath, destPath);
+  console.log(`${chalk.bgGreen.black(' SYNCED ')} React to ${destPath}`);
+}
+
+async function syncReactDom(buildPath, wwwPath) {
+  wwwPath = typeof wwwPath === 'string' ? wwwPath : DEFAULT_WWW_PATH;
+
+  if (wwwPath.charAt(wwwPath.length - 1) !== '/') {
+    wwwPath += '/';
+  }
+
+  const destPath = resolvePath(wwwPath + RELATIVE_WWW_PATH);
+  await doSync(buildPath, destPath);
+}
+
+async function syncReactNativeHelper(
+  buildPath,
+  fbSourcePath,
+  relativeDestPath
+) {
+  fbSourcePath =
+    typeof fbSourcePath === 'string' ? fbSourcePath : DEFAULT_FB_SOURCE_PATH;
+
+  if (fbSourcePath.charAt(fbSourcePath.length - 1) !== '/') {
+    fbSourcePath += '/';
+  }
+
+  const destPath = resolvePath(fbSourcePath + relativeDestPath);
+  await doSync(buildPath, destPath);
+}
+
+async function syncReactNative(fbSourcePath) {
+  await syncReactNativeHelper(
+    'build/react-native',
+    fbSourcePath,
+    RELATIVE_RN_OSS_PATH
+  );
+}
+
+module.exports = {
+  syncReactDom,
+  syncReactNative,
+};
diff --git a/scripts/rollup/utils.js b/scripts/rollup/utils.js
new file mode 100644
index 00000000000..276e8d3c7f1
--- /dev/null
+++ b/scripts/rollup/utils.js
@@ -0,0 +1,92 @@
+'use strict';
+
+const ncp = require('ncp').ncp;
+const path = require('path');
+const mkdirp = require('mkdirp');
+const rimraf = require('rimraf');
+const exec = require('child_process').exec;
+const targz = require('targz');
+
+function asyncCopyTo(from, to) {
+  return asyncMkDirP(path.dirname(to)).then(
+    () =>
+      new Promise((resolve, reject) => {
+        ncp(from, to, error => {
+          if (error) {
+            // Wrap to have a useful stack trace.
+            reject(new Error(error));
+          } else {
+            // Wait for copied files to exist; ncp() sometimes completes prematurely.
+            // For more detail, see github.com/facebook/react/issues/22323
+            // Also github.com/AvianFlu/ncp/issues/127
+            setTimeout(resolve, 10);
+          }
+        });
+      })
+  );
+}
+
+function asyncExecuteCommand(command) {
+  return new Promise((resolve, reject) =>
+    exec(command, (error, stdout) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve(stdout);
+    })
+  );
+}
+
+function asyncExtractTar(options) {
+  return new Promise((resolve, reject) =>
+    targz.decompress(options, error => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    })
+  );
+}
+
+function asyncMkDirP(filepath) {
+  return new Promise((resolve, reject) =>
+    mkdirp(filepath, error => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    })
+  );
+}
+
+function asyncRimRaf(filepath) {
+  return new Promise((resolve, reject) =>
+    rimraf(filepath, error => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    })
+  );
+}
+
+function resolvePath(filepath) {
+  if (filepath[0] === '~') {
+    return path.join(process.env.HOME, filepath.slice(1));
+  } else {
+    return path.resolve(filepath);
+  }
+}
+
+module.exports = {
+  asyncCopyTo,
+  resolvePath,
+  asyncExecuteCommand,
+  asyncExtractTar,
+  asyncMkDirP,
+  asyncRimRaf,
+};
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
new file mode 100644
index 00000000000..57b9043c9bd
--- /dev/null
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -0,0 +1,111 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES 6
+    BigInt: 'readonly',
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    WeakRef: 'readonly',
+
+    Int8Array: 'readonly',
+    Uint8Array: 'readonly',
+    Uint8ClampedArray: 'readonly',
+    Int16Array: 'readonly',
+    Uint16Array: 'readonly',
+    Int32Array: 'readonly',
+    Uint32Array: 'readonly',
+    Float32Array: 'readonly',
+    Float64Array: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    DataView: 'readonly',
+    ArrayBuffer: 'readonly',
+
+    Reflect: 'readonly',
+    globalThis: 'readonly',
+
+    FinalizationRegistry: 'readonly',
+
+    ScrollTimeline: 'readonly',
+    navigation: 'readonly',
+
+    // Vendor specific
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
+    // CommonJS / Node
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
+    // Trusted Types
+    trustedTypes: 'readonly',
+
+    // Scheduler profiling
+    TaskController: 'readonly',
+    reportError: 'readonly',
+    AggregateError: 'readonly',
+
+    // Flight
+    Promise: 'readonly',
+
+    // Temp
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+
+    // Flight Webpack
+    __webpack_chunk_load__: 'readonly',
+    __webpack_get_script_filename__: 'readonly',
+    __webpack_require__: 'readonly',
+
+    // Flight Turbopack
+    __turbopack_load_by_url__: 'readonly',
+    __turbopack_require__: 'readonly',
+
+    // Flight Parcel
+    parcelRequire: 'readonly',
+
+    // jest
+    expect: 'readonly',
+    jest: 'readonly',
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    // Native Scheduler
+    nativeRuntimeScheduler: 'readonly',
+
+    Bun: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'script',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-restricted-syntax': [
+      'error',
+      // TODO: Can be removed once we upgrade GCC to a version without `optimizeArgumentsArray` optimization.
+      {
+        selector: 'Identifier[name=/^JSCompiler_OptimizeArgumentsArray_/]',
+        message:
+          'Google Closure Compiler optimized `arguments` access. ' +
+          'This affects function arity. ' +
+          'Create a reference to `arguments` to avoid this optimization',
+      },
+    ],
+  },
+
+  // 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: ['ft-flow', 'jest', 'no-for-of-loops', 'react', 'react-internal'],
+};
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
new file mode 100644
index 00000000000..c9757ecd870
--- /dev/null
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -0,0 +1,105 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES 6
+    BigInt: 'readonly',
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    WeakRef: 'readonly',
+
+    Int8Array: 'readonly',
+    Uint8Array: 'readonly',
+    Uint8ClampedArray: 'readonly',
+    Int16Array: 'readonly',
+    Uint16Array: 'readonly',
+    Int32Array: 'readonly',
+    Uint32Array: 'readonly',
+    Float32Array: 'readonly',
+    Float64Array: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    DataView: 'readonly',
+    ArrayBuffer: 'readonly',
+
+    Reflect: 'readonly',
+    globalThis: 'readonly',
+    FinalizationRegistry: 'readonly',
+    ScrollTimeline: 'readonly',
+    navigation: 'readonly',
+    // Vendor specific
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
+    // CommonJS / Node
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
+    // Trusted Types
+    trustedTypes: 'readonly',
+
+    // Scheduler profiling
+    TaskController: 'readonly',
+    reportError: 'readonly',
+    AggregateError: 'readonly',
+
+    // Flight
+    Promise: 'readonly',
+
+    // Temp
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+
+    // Flight Webpack
+    __webpack_chunk_load__: 'readonly',
+    __webpack_get_script_filename__: 'readonly',
+    __webpack_require__: 'readonly',
+
+    // Flight Turbopack
+    __turbopack_load_by_url__: 'readonly',
+    __turbopack_require__: 'readonly',
+
+    // Flight Parcel
+    parcelRequire: 'readonly',
+
+    // jest
+    expect: 'readonly',
+    jest: 'readonly',
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    Bun: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 2015,
+    sourceType: 'script',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-restricted-syntax': [
+      'error',
+      // TODO: Can be removed once we upgrade GCC to a version without `optimizeArgumentsArray` optimization.
+      {
+        selector: 'Identifier[name=/^JSCompiler_OptimizeArgumentsArray_/]',
+        message:
+          'Google Closure Compiler optimized `arguments` access. ' +
+          'This affects function arity. ' +
+          'Create a reference to `arguments` to avoid this optimization',
+      },
+    ],
+  },
+
+  // 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: ['ft-flow', 'jest', 'no-for-of-loops', 'react', 'react-internal'],
+};
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
new file mode 100644
index 00000000000..26592005311
--- /dev/null
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -0,0 +1,108 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES 6
+    BigInt: 'readonly',
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    WeakRef: 'readonly',
+
+    Int8Array: 'readonly',
+    Uint8Array: 'readonly',
+    Uint8ClampedArray: 'readonly',
+    Int16Array: 'readonly',
+    Uint16Array: 'readonly',
+    Int32Array: 'readonly',
+    Uint32Array: 'readonly',
+    Float32Array: 'readonly',
+    Float64Array: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    DataView: 'readonly',
+    ArrayBuffer: 'readonly',
+
+    Reflect: 'readonly',
+    globalThis: 'readonly',
+
+    FinalizationRegistry: 'readonly',
+
+    ScrollTimeline: 'readonly',
+    navigation: 'readonly',
+
+    // Vendor specific
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
+    // CommonJS / Node
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
+    // Trusted Types
+    trustedTypes: 'readonly',
+
+    // Scheduler profiling
+    TaskController: 'readonly',
+    reportError: 'readonly',
+    AggregateError: 'readonly',
+
+    // Flight
+    Promise: 'readonly',
+
+    // Temp
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+
+    // Flight Webpack
+    __webpack_chunk_load__: 'readonly',
+    __webpack_get_script_filename__: 'readonly',
+    __webpack_require__: 'readonly',
+
+    // Flight Turbopack
+    __turbopack_load_by_url__: 'readonly',
+    __turbopack_require__: 'readonly',
+
+    // Flight Parcel
+    parcelRequire: 'readonly',
+
+    // jest
+    expect: 'readonly',
+    jest: 'readonly',
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+
+    Bun: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-restricted-syntax': [
+      'error',
+      // TODO: Can be removed once we upgrade GCC to a version without `optimizeArgumentsArray` optimization.
+      {
+        selector: 'Identifier[name=/^JSCompiler_OptimizeArgumentsArray_/]',
+        message:
+          'Google Closure Compiler optimized `arguments` access. ' +
+          'This affects function arity. ' +
+          'Create a reference to `arguments` to avoid this optimization',
+      },
+    ],
+  },
+
+  // 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: ['ft-flow', 'jest', 'no-for-of-loops', 'react', 'react-internal'],
+};
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
new file mode 100644
index 00000000000..b8b556d8b7b
--- /dev/null
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -0,0 +1,95 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES6
+    BigInt: 'readonly',
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    WeakRef: 'readonly',
+
+    Int8Array: 'readonly',
+    Uint8Array: 'readonly',
+    Uint8ClampedArray: 'readonly',
+    Int16Array: 'readonly',
+    Uint16Array: 'readonly',
+    Int32Array: 'readonly',
+    Uint32Array: 'readonly',
+    Float32Array: 'readonly',
+    Float64Array: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    DataView: 'readonly',
+    ArrayBuffer: 'readonly',
+
+    Reflect: 'readonly',
+    globalThis: 'readonly',
+
+    FinalizationRegistry: 'readonly',
+
+    ScrollTimeline: 'readonly',
+    navigation: 'readonly',
+
+    // Vendor specific
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
+    // FB
+    __DEV__: 'readonly',
+    // Node.js Server Rendering
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
+    // Trusted Types
+    trustedTypes: 'readonly',
+
+    // Scheduler profiling
+    TaskController: 'readonly',
+    reportError: 'readonly',
+    AggregateError: 'readonly',
+
+    // Flight
+    Promise: 'readonly',
+
+    // Temp
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+
+    // jest
+    jest: 'readonly',
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 5,
+    sourceType: 'script',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-restricted-syntax': [
+      'error',
+      // TODO: Can be removed once we upgrade GCC to a version without `optimizeArgumentsArray` optimization.
+      {
+        selector: 'Identifier[name=/^JSCompiler_OptimizeArgumentsArray_/]',
+        message:
+          'Google Closure Compiler optimized `arguments` access. ' +
+          'This affects function arity. ' +
+          'Create a reference to `arguments` to avoid this optimization',
+      },
+    ],
+  },
+
+  // 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: ['ft-flow', 'jest', 'no-for-of-loops', 'react', 'react-internal'],
+};
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
new file mode 100644
index 00000000000..2ee825dd774
--- /dev/null
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -0,0 +1,97 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES6
+    BigInt: 'readonly',
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    WeakRef: 'readonly',
+
+    Int8Array: 'readonly',
+    Uint8Array: 'readonly',
+    Uint8ClampedArray: 'readonly',
+    Int16Array: 'readonly',
+    Uint16Array: 'readonly',
+    Int32Array: 'readonly',
+    Uint32Array: 'readonly',
+    Float32Array: 'readonly',
+    Float64Array: 'readonly',
+    BigInt64Array: 'readonly',
+    BigUint64Array: 'readonly',
+    DataView: 'readonly',
+    ArrayBuffer: 'readonly',
+
+    Reflect: 'readonly',
+    globalThis: 'readonly',
+
+    FinalizationRegistry: 'readonly',
+
+    ScrollTimeline: 'readonly',
+    navigation: 'readonly',
+
+    // Vendor specific
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
+    // FB
+    __DEV__: 'readonly',
+    // Fabric. See https://github.com/facebook/react/pull/15490
+    // for more information
+    nativeFabricUIManager: 'readonly',
+    // RN flag to enable microtasks
+    RN$enableMicrotasksInReact: 'readonly',
+    // Trusted Types
+    trustedTypes: 'readonly',
+    // RN supports this
+    setImmediate: 'readonly',
+    // Scheduler profiling
+    TaskController: 'readonly',
+    reportError: 'readonly',
+    AggregateError: 'readonly',
+
+    // Node Feature Detection
+    process: 'readonly',
+
+    // Temp
+    AsyncLocalStorage: 'readonly',
+    async_hooks: 'readonly',
+
+    // jest
+    jest: 'readonly',
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 5,
+    sourceType: 'script',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-restricted-syntax': [
+      'error',
+      // TODO: Can be removed once we upgrade GCC to a version without `optimizeArgumentsArray` optimization.
+      {
+        selector: 'Identifier[name=/^JSCompiler_OptimizeArgumentsArray_/]',
+        message:
+          'Google Closure Compiler optimized `arguments` access. ' +
+          'This affects function arity. ' +
+          'Create a reference to `arguments` to avoid this optimization',
+      },
+    ],
+  },
+
+  // 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: ['ft-flow', 'jest', 'no-for-of-loops', 'react', 'react-internal'],
+};
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
new file mode 100644
index 00000000000..08d356190aa
--- /dev/null
+++ b/scripts/rollup/validate/index.js
@@ -0,0 +1,105 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const path = require('path');
+const {promisify} = require('util');
+const glob = promisify(require('glob'));
+const {ESLint} = require('eslint');
+
+// Lint the final build artifacts. Helps catch bugs in our build pipeline.
+
+function getFormat(filepath) {
+  if (filepath.includes('facebook')) {
+    if (filepath.includes('shims')) {
+      // We don't currently lint these shims. We rely on the downstream Facebook
+      // repo to transform them.
+      // TODO: Should we lint them?
+      return null;
+    }
+    return 'fb';
+  }
+  if (filepath.includes('react-native')) {
+    if (filepath.includes('shims')) {
+      // We don't currently lint these shims. We rely on the downstream Facebook
+      // repo to transform them.
+      // TODO: Should we lint them?
+      return null;
+    }
+    return 'rn';
+  }
+  if (filepath.includes('cjs')) {
+    if (
+      filepath.includes('react-server-dom-webpack-plugin') ||
+      filepath.includes('react-server-dom-webpack-node-register') ||
+      filepath.includes('react-suspense-test-utils')
+    ) {
+      return 'cjs2015';
+    }
+    return 'cjs';
+  }
+  if (filepath.includes('esm')) {
+    return 'esm';
+  }
+  if (
+    filepath.includes('oss-experimental') ||
+    filepath.includes('oss-stable')
+  ) {
+    // If a file in one of the open source channels doesn't match an earlier,
+    // more specific rule, then assume it's CommonJS.
+    return 'cjs';
+  }
+  throw new Error('Could not find matching lint format for file: ' + filepath);
+}
+
+function getESLintInstance(format) {
+  return new ESLint({
+    useEslintrc: false,
+    overrideConfigFile: path.join(__dirname, `eslintrc.${format}.js`),
+    ignore: false,
+  });
+}
+
+async function lint(eslint, filepaths) {
+  const results = await eslint.lintFiles(filepaths);
+  if (
+    results.some(result => result.errorCount > 0 || result.warningCount > 0)
+  ) {
+    process.exitCode = 1;
+    console.log(`Lint failed`);
+    const formatter = await eslint.loadFormatter('stylish');
+    const resultText = formatter.format(results);
+    console.log(resultText);
+  }
+}
+
+async function lintEverything() {
+  console.log(`Linting build artifacts...`);
+
+  const allFilepaths = await glob('build/**/*.js');
+
+  const pathsByFormat = new Map();
+  for (const filepath of allFilepaths) {
+    const format = getFormat(filepath);
+    if (format !== null) {
+      const paths = pathsByFormat.get(format);
+      if (paths === undefined) {
+        pathsByFormat.set(format, [filepath]);
+      } else {
+        paths.push(filepath);
+      }
+    }
+  }
+
+  const promises = [];
+  for (const [format, filepaths] of pathsByFormat) {
+    const eslint = getESLintInstance(format);
+    promises.push(lint(eslint, filepaths));
+  }
+  await Promise.all(promises);
+}
+
+lintEverything().catch(error => {
+  process.exitCode = 1;
+  console.error(error);
+});
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
new file mode 100644
index 00000000000..1773253cc96
--- /dev/null
+++ b/scripts/rollup/wrappers.js
@@ -0,0 +1,590 @@
+'use strict';
+
+const {bundleTypes, moduleTypes} = require('./bundles');
+
+const {
+  NODE_ES2015,
+  ESM_DEV,
+  ESM_PROD,
+  NODE_DEV,
+  NODE_PROD,
+  NODE_PROFILING,
+  BUN_DEV,
+  BUN_PROD,
+  FB_WWW_DEV,
+  FB_WWW_PROD,
+  FB_WWW_PROFILING,
+  RN_OSS_DEV,
+  RN_OSS_PROD,
+  RN_OSS_PROFILING,
+  RN_FB_DEV,
+  RN_FB_PROD,
+  RN_FB_PROFILING,
+  BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
+} = bundleTypes;
+
+const {RECONCILER} = moduleTypes;
+
+const USE_STRICT_HEADER_REGEX = /'use strict';\n+/;
+
+function wrapWithRegisterInternalModule(source) {
+  return `\
+'use strict';
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+}
+${source}
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+}
+`;
+}
+
+const license = ` * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.`;
+
+const topLevelDefinitionWrappers = {
+  /***************** NODE_ES2015 *****************/
+  [NODE_ES2015](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+${source}`;
+  },
+
+  /***************** ESM_DEV *****************/
+  [ESM_DEV](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** ESM_PROD *****************/
+  [ESM_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** BUN_DEV *****************/
+  [BUN_DEV](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** BUN_PROD *****************/
+  [BUN_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** NODE_DEV *****************/
+  [NODE_DEV](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+${source}
+  })();
+}`;
+  },
+
+  /***************** NODE_PROD *****************/
+  [NODE_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** NODE_PROFILING *****************/
+  [NODE_PROFILING](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /****************** FB_WWW_DEV ******************/
+  [FB_WWW_DEV](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+if (__DEV__) {
+  (function() {
+${source}
+  })();
+}`;
+  },
+
+  /****************** FB_WWW_PROD ******************/
+  [FB_WWW_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /****************** FB_WWW_PROFILING ******************/
+  [FB_WWW_PROFILING](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /****************** RN_OSS_DEV ******************/
+  [RN_OSS_DEV](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+if (__DEV__) {
+  (function() {
+${source}
+  })();
+}`;
+  },
+
+  /****************** RN_OSS_PROD ******************/
+  [RN_OSS_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /****************** RN_OSS_PROFILING ******************/
+  [RN_OSS_PROFILING](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /****************** RN_FB_DEV ******************/
+  [RN_FB_DEV](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+if (__DEV__) {
+  (function() {
+${source}
+  })();
+}`;
+  },
+
+  /****************** RN_FB_PROD ******************/
+  [RN_FB_PROD](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /****************** RN_FB_PROFILING ******************/
+  [RN_FB_PROFILING](source, globalName, filename, moduleType) {
+    return source;
+  },
+};
+
+const reconcilerWrappers = {
+  /***************** NODE_DEV (reconciler only) *****************/
+  [NODE_DEV](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+if (process.env.NODE_ENV !== "production") {
+  module.exports = function $$$reconciler($$$config) {
+    var exports = {};
+${source}
+    return exports;
+  };
+  module.exports.default = module.exports;
+  Object.defineProperty(module.exports, "__esModule", { value: true });
+}
+`;
+  },
+
+  /***************** NODE_PROD (reconciler only) *****************/
+  [NODE_PROD](source, globalName, filename, moduleType) {
+    return `module.exports = function $$$reconciler($$$config) {
+
+    var exports = {};
+${source}
+    return exports;
+};
+module.exports.default = module.exports;
+Object.defineProperty(module.exports, "__esModule", { value: true });
+`;
+  },
+
+  /***************** NODE_PROFILING (reconciler only) *****************/
+  [NODE_PROFILING](source, globalName, filename, moduleType) {
+    return `module.exports = function $$$reconciler($$$config) {
+    var exports = {};
+${source}
+    return exports;
+};
+module.exports.default = module.exports;
+Object.defineProperty(module.exports, "__esModule", { value: true });
+`;
+  },
+
+  /***************** FB_WWW_DEV (reconciler only) *****************/
+  [FB_WWW_DEV](source, globalName, filename, moduleType) {
+    return `'use strict';
+
+if (__DEV__) {
+  module.exports = function $$$reconciler($$$config) {
+    var exports = {};
+${source}
+    return exports;
+  };
+  module.exports.default = module.exports;
+  Object.defineProperty(module.exports, "__esModule", { value: true });
+}
+`;
+  },
+
+  /***************** FB_WWW_PROD (reconciler only) *****************/
+  [FB_WWW_PROD](source, globalName, filename, moduleType) {
+    return `module.exports = function $$$reconciler($$$config) {
+
+      var exports = {};
+  ${source}
+      return exports;
+  };
+  module.exports.default = module.exports;
+  Object.defineProperty(module.exports, "__esModule", { value: true });
+  `;
+  },
+
+  /***************** FB_WWW_PROFILING (reconciler only) *****************/
+  [FB_WWW_PROFILING](source, globalName, filename, moduleType) {
+    return `module.exports = function $$$reconciler($$$config) {
+      var exports = {};
+  ${source}
+      return exports;
+  };
+  module.exports.default = module.exports;
+  Object.defineProperty(module.exports, "__esModule", { value: true });
+  `;
+  },
+
+  /***************** CJS_DTS *****************/
+  [CJS_DTS](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** ESM_DTS *****************/
+  [ESM_DTS](source, globalName, filename, moduleType) {
+    return source;
+  },
+};
+
+const licenseHeaderWrappers = {
+  /***************** NODE_ES2015 *****************/
+  [NODE_ES2015](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** ESM_DEV *****************/
+  [ESM_DEV](source, globalName, filename, moduleType) {
+    return `/**
+* @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** ESM_PROD *****************/
+  [ESM_PROD](source, globalName, filename, moduleType) {
+    return `/**
+* @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** BUN_DEV *****************/
+  [BUN_DEV](source, globalName, filename, moduleType) {
+    return `/**
+* @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** BUN_PROD *****************/
+  [BUN_PROD](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** NODE_DEV *****************/
+  [NODE_DEV](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** NODE_PROD *****************/
+  [NODE_PROD](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** NODE_PROFILING *****************/
+  [NODE_PROFILING](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /****************** FB_WWW_DEV ******************/
+  [FB_WWW_DEV](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+${source}`;
+  },
+
+  /****************** FB_WWW_PROD ******************/
+  [FB_WWW_PROD](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+${source}`;
+  },
+
+  /****************** FB_WWW_PROFILING ******************/
+  [FB_WWW_PROFILING](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */
+
+${source}`;
+  },
+
+  /****************** RN_OSS_DEV ******************/
+  [RN_OSS_DEV](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ */
+
+${source}`;
+  },
+
+  /****************** RN_OSS_PROD ******************/
+  [RN_OSS_PROD](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ */
+
+${source}`;
+  },
+
+  /****************** RN_OSS_PROFILING ******************/
+  [RN_OSS_PROFILING](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ */
+
+${source}`;
+  },
+
+  /****************** RN_FB_DEV ******************/
+  [RN_FB_DEV](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ */
+
+${source}`;
+  },
+
+  /****************** RN_FB_PROD ******************/
+  [RN_FB_PROD](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ */
+
+${source}`;
+  },
+
+  /****************** RN_FB_PROFILING ******************/
+  [RN_FB_PROFILING](source, globalName, filename, moduleType) {
+    return `/**
+${license}
+ *
+ * @noflow
+ * @nolint
+ * @preventMunge
+ */
+
+${source}`;
+  },
+
+  /***************** CJS_DTS *****************/
+  [CJS_DTS](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** ESM_DTS *****************/
+  [ESM_DTS](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+};
+
+function wrapWithTopLevelDefinitions(
+  source,
+  bundleType,
+  globalName,
+  filename,
+  moduleType,
+  wrapWithModuleBoundaries
+) {
+  if (wrapWithModuleBoundaries) {
+    switch (bundleType) {
+      case NODE_DEV:
+      case NODE_PROFILING:
+      case FB_WWW_DEV:
+      case FB_WWW_PROFILING:
+      case RN_OSS_DEV:
+      case RN_OSS_PROFILING:
+      case RN_FB_DEV:
+      case RN_FB_PROFILING:
+        // Remove the 'use strict' directive from source.
+        // The module start wrapper will add its own.
+        // This directive is only meaningful when it is the first statement in a file or function.
+        source = source.replace(USE_STRICT_HEADER_REGEX, '');
+
+        // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
+        // This allows the Timeline to de-emphasize (dim) internal stack frames.
+        source = wrapWithRegisterInternalModule(source);
+        break;
+    }
+  }
+
+  if (bundleType === BROWSER_SCRIPT) {
+    // Bundles of type BROWSER_SCRIPT get sent straight to the browser without
+    // additional processing. So we should exclude any extra wrapper comments.
+    return source;
+  }
+
+  if (moduleType === RECONCILER) {
+    // Standalone reconciler is only used by third-party renderers.
+    // It is handled separately.
+    const wrapper = reconcilerWrappers[bundleType];
+    if (typeof wrapper !== 'function') {
+      throw new Error(
+        `Unsupported build type for the reconciler package: ${bundleType}.`
+      );
+    }
+
+    return wrapper(source, globalName, filename, moduleType);
+  }
+
+  // All the other packages.
+  const wrapper = topLevelDefinitionWrappers[bundleType];
+  if (typeof wrapper !== 'function') {
+    throw new Error(`Unsupported build type: ${bundleType}.`);
+  }
+
+  return wrapper(source, globalName, filename, moduleType);
+}
+
+function wrapWithLicenseHeader(
+  source,
+  bundleType,
+  globalName,
+  filename,
+  moduleType
+) {
+  if (bundleType === BROWSER_SCRIPT) {
+    // Bundles of type BROWSER_SCRIPT get sent straight to the browser without
+    // additional processing. So we should exclude any extra wrapper comments.
+    return source;
+  }
+
+  // All the other packages.
+  const wrapper = licenseHeaderWrappers[bundleType];
+  if (typeof wrapper !== 'function') {
+    throw new Error(`Unsupported build type: ${bundleType}.`);
+  }
+
+  return wrapper(source, globalName, filename, moduleType);
+}
+
+module.exports = {
+  wrapWithTopLevelDefinitions,
+  wrapWithLicenseHeader,
+};
diff --git a/scripts/shared/__tests__/evalToString-test.js b/scripts/shared/__tests__/evalToString-test.js
new file mode 100644
index 00000000000..610468290ae
--- /dev/null
+++ b/scripts/shared/__tests__/evalToString-test.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {evalStringConcat} = require('../evalToString');
+const parser = require('@babel/parser');
+
+const parse = source => parser.parse(`(${source});`).program.body[0].expression; // quick way to get an exp node
+
+const parseAndEval = source => evalStringConcat(parse(source));
+
+describe('evalToString', () => {
+  it('should support StringLiteral', () => {
+    expect(parseAndEval(`'foobar'`)).toBe('foobar');
+    expect(parseAndEval(`'yowassup'`)).toBe('yowassup');
+  });
+
+  it('should support string concat (`+`)', () => {
+    expect(parseAndEval(`'foo ' + 'bar'`)).toBe('foo bar');
+  });
+
+  it('should throw when it finds other types', () => {
+    expect(() => parseAndEval(`'foo ' + true`)).toThrowError(
+      /Unsupported type/
+    );
+    expect(() => parseAndEval(`'foo ' + 3`)).toThrowError(/Unsupported type/);
+    expect(() => parseAndEval(`'foo ' + null`)).toThrowError(
+      /Unsupported type/
+    );
+    expect(() => parseAndEval(`'foo ' + undefined`)).toThrowError(
+      /Unsupported type/
+    );
+  });
+});
diff --git a/scripts/shared/evalToString.js b/scripts/shared/evalToString.js
new file mode 100644
index 00000000000..e2c9c1aed7f
--- /dev/null
+++ b/scripts/shared/evalToString.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+function evalStringConcat(ast) {
+  switch (ast.type) {
+    case 'StringLiteral':
+    case 'Literal': // ESLint
+      return ast.value;
+    case 'BinaryExpression': // `+`
+      if (ast.operator !== '+') {
+        throw new Error('Unsupported binary operator ' + ast.operator);
+      }
+      return evalStringConcat(ast.left) + evalStringConcat(ast.right);
+    default:
+      throw new Error('Unsupported type ' + ast.type);
+  }
+}
+exports.evalStringConcat = evalStringConcat;
+
+function evalStringAndTemplateConcat(ast, args) {
+  switch (ast.type) {
+    case 'StringLiteral':
+      return ast.value;
+    case 'BinaryExpression': // `+`
+      if (ast.operator !== '+') {
+        throw new Error('Unsupported binary operator ' + ast.operator);
+      }
+      return (
+        evalStringAndTemplateConcat(ast.left, args) +
+        evalStringAndTemplateConcat(ast.right, args)
+      );
+    case 'TemplateLiteral': {
+      let elements = [];
+      for (let i = 0; i < ast.quasis.length; i++) {
+        const elementNode = ast.quasis[i];
+        if (elementNode.type !== 'TemplateElement') {
+          throw new Error('Unsupported type ' + ast.type);
+        }
+        elements.push(elementNode.value.cooked);
+      }
+      args.push(...ast.expressions);
+      return elements.join('%s');
+    }
+    default:
+      // Anything that's not a string is interpreted as an argument.
+      args.push(ast);
+      return '%s';
+  }
+}
+exports.evalStringAndTemplateConcat = evalStringAndTemplateConcat;
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
new file mode 100644
index 00000000000..0bb9da231d9
--- /dev/null
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -0,0 +1,680 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 = [
+  {
+    shortName: 'dom-browser',
+    entryPoints: [
+      'react-dom',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.browser.js',
+      'react-dom/static.browser',
+      'react-dom/unstable_server-external-runtime',
+      'react-server-dom-webpack/src/client/react-flight-dom-client.browser',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server.browser',
+      'react-dom/static.browser',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.browser',
+      'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/client',
+      'react-server-dom-webpack/client.browser',
+      'react-server-dom-webpack/server.browser',
+      'react-server-dom-webpack/static.browser',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-webpack/client.browser
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js',
+      'react-server-dom-webpack/src/client/react-flight-dom-client.browser',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/src/server/react-flight-dom-server.browser
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-node',
+    entryPoints: [
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom/src/server/react-dom-server.node.js',
+      'react-dom/test-utils',
+      'react-dom/unstable_server-external-runtime',
+      'react-server-dom-webpack/src/client/react-flight-dom-client.node',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
+      'react-dom/test-utils',
+      'react-dom/src/server/react-dom-server.node',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/server',
+      'react-server-dom-webpack/static',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-webpack/client.node
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-webpack/client.node
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-webpack/src/server/react-flight-dom-server.node
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNode.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-node-webpack',
+    entryPoints: [
+      'react-server-dom-webpack/src/client/react-flight-dom-client.node',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/client.node',
+      'react-server-dom-webpack/server',
+      'react-server-dom-webpack/server.node',
+      'react-server-dom-webpack/static',
+      'react-server-dom-webpack/static.node',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-webpack/client.node
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-webpack/client.node
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/client/react-flight-dom-client.node',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-webpack/src/server/react-flight-dom-server.node
+      'react-server-dom-webpack/node-register',
+      'react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js',
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNode.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-node-turbopack',
+    entryPoints: [
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.node',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-turbopack',
+      'react-server-dom-turbopack/client.node',
+      'react-server-dom-turbopack/server',
+      'react-server-dom-turbopack/server.node',
+      'react-server-dom-turbopack/static',
+      'react-server-dom-turbopack/static.node',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-turbopack/client.node
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js',
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.node',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.node
+      'react-server-dom-turbopack/node-register',
+      'react-server-dom-turbopack/src/ReactFlightTurbopackNodeRegister.js',
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNode.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-node-parcel',
+    entryPoints: [
+      'react-server-dom-parcel/src/client/react-flight-dom-client.node',
+      'react-server-dom-parcel/src/server/react-flight-dom-server.node',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-parcel',
+      'react-server-dom-parcel/client.node',
+      'react-server-dom-parcel/server',
+      'react-server-dom-parcel/server.node',
+      'react-server-dom-parcel/static',
+      'react-server-dom-parcel/static.node',
+      'react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-parcel/client.node
+      'react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js', // react-server-dom-parcel/client.node
+      'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js',
+      'react-server-dom-parcel/src/client/react-flight-dom-client.node',
+      'react-server-dom-parcel/src/server/react-flight-dom-server.node',
+      'react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js', // react-server-dom-parcel/src/server/react-flight-dom-server.node
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNode.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-node-unbundled',
+    entryPoints: [
+      'react-server-dom-unbundled/src/client/react-flight-dom-client.node',
+      'react-server-dom-unbundled/src/server/react-flight-dom-server.node',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-unbundled',
+      'react-server-dom-unbundled/client',
+      'react-server-dom-unbundled/server',
+      'react-server-dom-unbundled/server.node',
+      'react-server-dom-unbundled/static',
+      'react-server-dom-unbundled/static.node',
+      'react-server-dom-unbundled/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-unbundled/client.node
+      'react-server-dom-unbundled/src/client/ReactFlightDOMClientNode.js', // react-server-dom-unbundled/client.node
+      'react-server-dom-unbundled/src/client/ReactFlightClientConfigBundlerNode.js',
+      'react-server-dom-unbundled/src/client/react-flight-dom-client.node',
+      'react-server-dom-unbundled/src/server/react-flight-dom-server.node',
+      'react-server-dom-unbundled/src/server/ReactFlightDOMServerNode.js', // react-server-dom-unbundled/src/server/react-flight-dom-server.node
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNode.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-bun',
+    entryPoints: ['react-dom/src/server/react-dom-server.bun.js'],
+    paths: [
+      'react-dom',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server.bun',
+      'react-dom/src/server/react-dom-server.bun',
+      'react-dom/src/server/ReactDOMFizzServerBun.js',
+      'react-dom/src/server/ReactDOMFizzServerNode.js',
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-browser-esm',
+    entryPoints: ['react-server-dom-esm/client.browser'],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom-bindings',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-esm',
+      'react-server-dom-esm/client',
+      'react-server-dom-esm/client.browser',
+      'react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-esm/client.browser
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-browser-turbopack',
+    entryPoints: [
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.browser',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.browser',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom-bindings',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-turbopack',
+      'react-server-dom-turbopack/client',
+      'react-server-dom-turbopack/client.browser',
+      'react-server-dom-turbopack/server.browser',
+      'react-server-dom-turbopack/static.browser',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-turbopack/client.browser
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js',
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.browser',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.browser',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.browser
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-browser-parcel',
+    entryPoints: [
+      'react-server-dom-parcel/src/client/react-flight-dom-client.browser',
+      'react-server-dom-parcel/src/server/react-flight-dom-server.browser',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom-bindings',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-parcel',
+      'react-server-dom-parcel/client',
+      'react-server-dom-parcel/client.browser',
+      'react-server-dom-parcel/server.browser',
+      'react-server-dom-parcel/static.browser',
+      'react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-parcel/client.browser
+      'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js',
+      'react-server-dom-parcel/src/client/react-flight-dom-client.browser',
+      'react-server-dom-parcel/src/server/react-flight-dom-server.browser',
+      'react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-parcel/src/server/react-flight-dom-server.browser
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-edge-webpack',
+    entryPoints: [
+      'react-dom/src/server/react-dom-server.edge.js',
+      'react-dom/static.edge',
+      'react-server-dom-webpack/src/client/react-flight-dom-client.edge',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.edge',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server.edge',
+      'react-dom/static.edge',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.edge',
+      'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
+      'react-dom/src/server/ReactDOMFizzStaticEdge.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/client.edge',
+      'react-server-dom-webpack/server.edge',
+      'react-server-dom-webpack/static.edge',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-webpack/client.edge
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/client/react-flight-dom-client.edge',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.edge',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js', // react-server-dom-webpack/src/server/react-flight-dom-server.edge
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-edge-turbopack',
+    entryPoints: [
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.edge',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.edge',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server.edge',
+      'react-dom/static.edge',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.edge',
+      'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
+      'react-dom/src/server/ReactDOMFizzStaticEdge.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-turbopack',
+      'react-server-dom-turbopack/client.edge',
+      'react-server-dom-turbopack/server.edge',
+      'react-server-dom-turbopack/static.edge',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-turbopack/client.edge
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js',
+      'react-server-dom-turbopack/src/client/react-flight-dom-client.edge',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.edge',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.edge
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-edge-parcel',
+    entryPoints: [
+      'react-server-dom-parcel/src/client/react-flight-dom-client.edge',
+      'react-server-dom-parcel/src/server/react-flight-dom-server.edge',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server.edge',
+      'react-dom/static.edge',
+      'react-dom/unstable_testing',
+      'react-dom/src/server/react-dom-server.edge',
+      'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
+      'react-dom/src/server/ReactDOMFizzStaticEdge.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-parcel',
+      'react-server-dom-parcel/client.edge',
+      'react-server-dom-parcel/server.edge',
+      'react-server-dom-parcel/static.edge',
+      'react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-parcel/client.edge
+      'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel.js',
+      'react-server-dom-parcel/src/client/react-flight-dom-client.edge',
+      'react-server-dom-parcel/src/server/react-flight-dom-server.edge',
+      'react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js', // react-server-dom-parcel/src/server/react-flight-dom-server.edge
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-node-esm',
+    entryPoints: [
+      'react-server-dom-esm/client.node',
+      'react-server-dom-esm/src/server/react-flight-dom-server.node',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/client',
+      'react-dom/profiling',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
+      'react-dom/src/server/react-dom-server.node',
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-esm',
+      'react-server-dom-esm/client.node',
+      'react-server-dom-esm/server',
+      'react-server-dom-esm/server.node',
+      'react-server-dom-esm/static',
+      'react-server-dom-esm/static.node',
+      'react-server-dom-esm/src/client/ReactFlightDOMClientNode.js', // react-server-dom-esm/client.node
+      'react-server-dom-esm/src/server/react-flight-dom-server.node',
+      'react-server-dom-esm/src/server/ReactFlightDOMServerNode.js', // react-server-dom-esm/src/server/react-flight-dom-server.node
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNode.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-legacy',
+    entryPoints: [
+      'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-dom/src/server/ReactDOMLegacyServerImpl.js', // not an entrypoint, but only usable in *Browser and *Node files
+      'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'markup',
+    entryPoints: [
+      'react-markup/src/ReactMarkupClient.js', // react-markup
+      'react-markup/src/ReactMarkupServer.js', // react-markup/react-markup.react-server
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-markup',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+  {
+    shortName: 'dom-fb',
+    entryPoints: [
+      'react-dom/src/ReactDOMFB.js',
+      'react-dom/src/ReactDOMTestingFB.js',
+      'react-server-dom-fb/src/ReactDOMServerFB.js',
+    ],
+    paths: [
+      'react-dom',
+      'react-dom/src/ReactDOMFB.js',
+      'react-dom/src/ReactDOMTestingFB.js',
+      'react-dom/src/ReactDOMReactServer.js',
+      'react-dom-bindings',
+      'react-server-dom-fb',
+      'shared/ReactDOMSharedInternals',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+    isFlightSupported: false,
+  },
+  {
+    shortName: 'native',
+    entryPoints: ['react-native-renderer'],
+    paths: [
+      'react-native-renderer',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: false,
+  },
+  {
+    shortName: 'fabric',
+    entryPoints: ['react-native-renderer/fabric'],
+    paths: [
+      'react-native-renderer',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: false,
+  },
+  {
+    shortName: 'test',
+    entryPoints: ['react-test-renderer'],
+    paths: [
+      'react-test-renderer',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: false,
+  },
+  {
+    shortName: 'art',
+    entryPoints: ['react-art'],
+    paths: [
+      'react-art',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: false, // TODO: type it.
+    isServerSupported: false,
+  },
+  {
+    shortName: 'custom',
+    entryPoints: [
+      'react-reconciler',
+      'react-client/flight',
+      'react-server',
+      'react-server/flight',
+    ],
+    paths: [
+      'react-client/flight',
+      'react-server/flight',
+      'react-server/src/ReactFlightServerConfigDebugNoop.js',
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
+];
diff --git a/scripts/shared/listChangedFiles.js b/scripts/shared/listChangedFiles.js
new file mode 100644
index 00000000000..b6449e5cc6e
--- /dev/null
+++ b/scripts/shared/listChangedFiles.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 execFileSync = require('child_process').execFileSync;
+
+const exec = (command, args) => {
+  console.log('> ' + [command].concat(args).join(' '));
+  const options = {
+    cwd: process.cwd(),
+    env: process.env,
+    stdio: 'pipe',
+    encoding: 'utf-8',
+  };
+  return execFileSync(command, args, options);
+};
+
+const isGit = () => {
+  try {
+    const wt = execGitCmd(['rev-parse', '--is-inside-work-tree']);
+    return wt.length > 0 && wt[0] === 'true';
+  } catch (_e) {
+    return false;
+  }
+};
+
+const isSl = () => {
+  try {
+    execSlCmd(['whereami']);
+    return true;
+  } catch (_e) {
+    return false;
+  }
+};
+
+const execGitCmd = args => exec('git', args).trim().toString().split('\n');
+const execSlCmd = args => exec('sl', args).trim().toString().split('\n');
+
+const listChangedFiles = () => {
+  if (isGit()) {
+    const mergeBase = execGitCmd(['merge-base', 'HEAD', 'main']);
+    return new Set([
+      ...execGitCmd([
+        'diff',
+        '--name-only',
+        '--diff-filter=ACMRTUB',
+        mergeBase,
+      ]),
+      ...execGitCmd(['ls-files', '--others', '--exclude-standard']),
+    ]);
+  } else if (isSl()) {
+    const mergeBase = execSlCmd(['log', '-r', 'last(public() & ::.)'])[0]
+      .trim()
+      .split(/\s+/)[1];
+    return new Set(execSlCmd(['status', '--no-status', '--rev', mergeBase]));
+  }
+  throw new Error('Not a git or sl repo');
+};
+
+module.exports = listChangedFiles;
diff --git a/scripts/shared/pathsByLanguageVersion.js b/scripts/shared/pathsByLanguageVersion.js
new file mode 100644
index 00000000000..4a754f3cd49
--- /dev/null
+++ b/scripts/shared/pathsByLanguageVersion.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+// Files that are transformed and can use ES6/Flow/JSX.
+const esNextPaths = [
+  // Internal forwarding modules
+  'packages/*/*.js',
+  'packages/*/esm/*.js',
+  'packages/use-sync-external-store/shim/**/*.js',
+  'packages/use-sync-external-store/with-selector/**/*.js',
+  // Source files
+  'packages/*/src/**/*.js',
+  'packages/dom-event-testing-library/**/*.js',
+  'packages/shared/**/*.js',
+  // Shims and Flow environment
+  'scripts/flow/*.js',
+  'scripts/rollup/shims/**/*.js',
+];
+
+// Files that we distribute on npm that should be ES5-only.
+const es5Paths = ['packages/*/npm/**/*.js'];
+
+module.exports = {
+  esNextPaths,
+  es5Paths,
+};
diff --git a/scripts/tasks/danger.js b/scripts/tasks/danger.js
new file mode 100644
index 00000000000..d5aab0be414
--- /dev/null
+++ b/scripts/tasks/danger.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 path = require('path');
+const spawn = require('child_process').spawn;
+
+const extension = process.platform === 'win32' ? '.cmd' : '';
+
+// sizebot public_repo token (this is publicly visible on purpose)
+const token = 'ghp_UfuUaoow8veN3ZV1' + 'sGquTDgiVjRDmL2qLY1D';
+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 {
+    console.log('Danger passed');
+  }
+
+  process.exit(code);
+});
diff --git a/scripts/tasks/eslint.js b/scripts/tasks/eslint.js
new file mode 100644
index 00000000000..ba7df75805e
--- /dev/null
+++ b/scripts/tasks/eslint.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 minimist = require('minimist');
+const runESLint = require('../eslint');
+
+async function main() {
+  console.log('Linting all files...');
+  if (!process.env.CI) {
+    console.log('Hint: run `yarn linc` to only lint changed files.');
+  }
+
+  const {_: paths, ...cliOptions} = minimist(process.argv.slice(2));
+
+  if (await runESLint({onlyChanged: false, ...cliOptions, paths})) {
+    console.log('Lint passed.');
+  } else {
+    console.log('Lint failed.');
+    process.exit(1);
+  }
+}
+
+main();
diff --git a/scripts/tasks/flow-ci.js b/scripts/tasks/flow-ci.js
new file mode 100644
index 00000000000..0f39d2f6fff
--- /dev/null
+++ b/scripts/tasks/flow-ci.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const runFlow = require('../flow/runFlow');
+const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
+
+async function check(shortName) {
+  if (shortName == null) {
+    throw new Error('Expected an inlinedHostConfig shortName');
+  }
+  const rendererInfo = inlinedHostConfigs.find(
+    config => config.shortName === shortName
+  );
+  if (rendererInfo == null) {
+    throw new Error(`Could not find inlinedHostConfig for ${shortName}`);
+  }
+  if (rendererInfo.isFlowTyped) {
+    await runFlow(rendererInfo.shortName, ['check']);
+  }
+}
+
+check(process.argv[2]);
diff --git a/scripts/tasks/flow.js b/scripts/tasks/flow.js
new file mode 100644
index 00000000000..78bfe87c386
--- /dev/null
+++ b/scripts/tasks/flow.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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';
+
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const chalk = require('chalk');
+const runFlow = require('../flow/runFlow');
+const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
+
+// This script is using `flow status` for a quick check with a server.
+// Use it for local development.
+
+const primaryRenderer = inlinedHostConfigs.find(
+  info => info.isFlowTyped && info.shortName === process.argv[2]
+);
+if (!primaryRenderer) {
+  console.log(
+    'The ' +
+      chalk.red('yarn flow') +
+      ' command now requires you to pick a primary renderer:'
+  );
+  console.log();
+  inlinedHostConfigs.forEach(rendererInfo => {
+    if (rendererInfo.isFlowTyped) {
+      console.log('  * ' + chalk.cyan('yarn flow ' + rendererInfo.shortName));
+    }
+  });
+  console.log();
+  console.log(
+    'If you are not sure, run ' + chalk.green('yarn flow dom-node') + '.'
+  );
+  console.log(
+    'This will still typecheck non-DOM packages, although less precisely.'
+  );
+  console.log();
+  console.log('Note that checks for all renderers will run on CI.');
+  console.log(
+    'You can also do this locally with ' +
+      chalk.cyan('yarn flow-ci') +
+      ' but it will be slow.'
+  );
+  console.log();
+  process.exit(1);
+}
+
+runFlow(primaryRenderer.shortName, ['status']);
diff --git a/scripts/tasks/generate-changelog/args.js b/scripts/tasks/generate-changelog/args.js
new file mode 100644
index 00000000000..cee42f24ecd
--- /dev/null
+++ b/scripts/tasks/generate-changelog/args.js
@@ -0,0 +1,128 @@
+'use strict';
+
+const semver = require('semver');
+const yargs = require('yargs/yargs');
+
+const {stablePackages} = require('../../../ReactVersions');
+const {isCommandAvailable} = require('./utils');
+
+function parseArgs(argv) {
+  const parser = yargs(argv)
+    .usage(
+      'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]'
+    )
+    .example(
+      '$0 --codex eslint-plugin-react-hooks@7.0.1',
+      'Generate changelog for a single package using Codex.'
+    )
+    .example(
+      '$0 --claude react@19.3 react-dom@19.3',
+      'Generate changelog entries for multiple packages using Claude.'
+    )
+    .example(
+      '$0 --codex',
+      'Generate changelog for all stable packages using recorded versions.'
+    )
+    .option('codex', {
+      type: 'boolean',
+      describe: 'Use Codex for commit summarization.',
+    })
+    .option('claude', {
+      type: 'boolean',
+      describe: 'Use Claude for commit summarization.',
+    })
+    .option('debug', {
+      type: 'boolean',
+      describe: 'Enable verbose debug logging.',
+      default: false,
+    })
+    .option('format', {
+      type: 'string',
+      describe: 'Output format for the generated changelog.',
+      choices: ['text', 'csv', 'json'],
+      default: 'text',
+    })
+    .help('help')
+    .alias('h', 'help')
+    .version(false)
+    .parserConfiguration({
+      'parse-numbers': false,
+      'parse-positional-numbers': false,
+    });
+
+  const args = parser.scriptName('generate-changelog').parse();
+  const packageSpecs = [];
+  const debug = !!args.debug;
+  const format = args.format || 'text';
+  let summarizer = null;
+
+  if (args.codex && args.claude) {
+    throw new Error('Choose either --codex or --claude, not both.');
+  }
+  if (args.codex) {
+    summarizer = 'codex';
+  } else if (args.claude) {
+    summarizer = 'claude';
+  }
+
+  const positionalArgs = Array.isArray(args._) ? args._ : [];
+  for (let i = 0; i < positionalArgs.length; i++) {
+    const token = String(positionalArgs[i]).trim();
+    if (!token) {
+      continue;
+    }
+
+    const atIndex = token.lastIndexOf('@');
+    if (atIndex <= 0 || atIndex === token.length - 1) {
+      throw new Error(`Invalid package specification: ${token}`);
+    }
+
+    const packageName = token.slice(0, atIndex);
+    const versionText = token.slice(atIndex + 1);
+    const validVersion =
+      semver.valid(versionText) || semver.valid(semver.coerce(versionText));
+    if (!validVersion) {
+      throw new Error(`Invalid version for ${packageName}: ${versionText}`);
+    }
+
+    packageSpecs.push({
+      name: packageName,
+      version: validVersion,
+      displayVersion: versionText,
+    });
+  }
+
+  if (packageSpecs.length === 0) {
+    Object.keys(stablePackages).forEach(pkgName => {
+      const versionText = stablePackages[pkgName];
+      const validVersion = semver.valid(versionText);
+      if (!validVersion) {
+        throw new Error(
+          `Invalid stable version configured for ${pkgName}: ${versionText}`
+        );
+      }
+      packageSpecs.push({
+        name: pkgName,
+        version: validVersion,
+        displayVersion: versionText,
+      });
+    });
+  }
+
+  if (summarizer && !isCommandAvailable(summarizer)) {
+    throw new Error(
+      `Requested summarizer "${summarizer}" is not available on the PATH.`
+    );
+  }
+
+  return {
+    debug,
+    format,
+    summarizer,
+    packageSpecs,
+  };
+}
+
+module.exports = {
+  parseArgs,
+};
diff --git a/scripts/tasks/generate-changelog/data.js b/scripts/tasks/generate-changelog/data.js
new file mode 100644
index 00000000000..17e25e0a763
--- /dev/null
+++ b/scripts/tasks/generate-changelog/data.js
@@ -0,0 +1,190 @@
+'use strict';
+
+const https = require('https');
+const path = require('path');
+
+const {execFileAsync, repoRoot} = require('./utils');
+
+async function fetchNpmInfo(packageName, {log}) {
+  const npmArgs = ['view', `${packageName}@latest`, '--json'];
+  const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024};
+  log(`Fetching npm info for ${packageName}...`);
+  const {stdout} = await execFileAsync('npm', npmArgs, options);
+
+  let data = stdout.trim();
+  if (!data) {
+    throw new Error(`npm view returned empty result for ${packageName}`);
+  }
+
+  let info = JSON.parse(data);
+  if (Array.isArray(info)) {
+    info = info[info.length - 1];
+  }
+
+  const version = info.version || info['dist-tags']?.latest;
+  let gitHead = info.gitHead || null;
+
+  if (!gitHead) {
+    const gitHeadResult = await execFileAsync(
+      'npm',
+      ['view', `${packageName}@${version}`, 'gitHead'],
+      {cwd: repoRoot, maxBuffer: 1024 * 1024}
+    );
+    const possibleGitHead = gitHeadResult.stdout.trim();
+    if (
+      possibleGitHead &&
+      possibleGitHead !== 'undefined' &&
+      possibleGitHead !== 'null'
+    ) {
+      log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`);
+      gitHead = possibleGitHead;
+    }
+  }
+
+  if (!version) {
+    throw new Error(
+      `Unable to determine latest published version for ${packageName}`
+    );
+  }
+  if (!gitHead) {
+    throw new Error(
+      `Unable to determine git commit for ${packageName}@${version}`
+    );
+  }
+
+  return {
+    publishedVersion: version,
+    gitHead,
+  };
+}
+
+async function collectCommitsSince(packageName, sinceGitSha, {log}) {
+  log(`Collecting commits for ${packageName} since ${sinceGitSha}...`);
+  await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], {
+    cwd: repoRoot,
+  });
+  const {stdout} = await execFileAsync(
+    'git',
+    [
+      'rev-list',
+      '--reverse',
+      `${sinceGitSha}..HEAD`,
+      '--',
+      path.posix.join('packages', packageName),
+    ],
+    {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}
+  );
+
+  return stdout
+    .trim()
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean);
+}
+
+async function loadCommitDetails(sha, {log}) {
+  log(`Loading commit details for ${sha}...`);
+  const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n');
+  const {stdout} = await execFileAsync(
+    'git',
+    ['show', '--quiet', `--format=${format}`, sha],
+    {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}
+  );
+
+  const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] =
+    stdout.split('\n');
+  const body = rest.join('\n').trim();
+
+  return {
+    sha: commitSha.trim(),
+    subject: subject.trim(),
+    authorName: authorName.trim(),
+    authorEmail: authorEmail.trim(),
+    timestamp: +timestamp.trim() || 0,
+    body,
+  };
+}
+
+function extractPrNumber(subject, body) {
+  const patterns = [
+    /\(#(\d+)\)/,
+    /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/,
+  ];
+
+  for (let i = 0; i < patterns.length; i++) {
+    const pattern = patterns[i];
+    const subjectMatch = subject && subject.match(pattern);
+    if (subjectMatch) {
+      return subjectMatch[1];
+    }
+    const bodyMatch = body && body.match(pattern);
+    if (bodyMatch) {
+      return bodyMatch[1];
+    }
+  }
+
+  return null;
+}
+
+async function fetchPullRequestMetadata(prNumber, {log}) {
+  log(`Fetching PR metadata for #${prNumber}...`);
+  const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null;
+  const requestOptions = {
+    hostname: 'api.github.com',
+    path: `/repos/facebook/react/pulls/${prNumber}`,
+    method: 'GET',
+    headers: {
+      'User-Agent': 'generate-changelog-script',
+      Accept: 'application/vnd.github+json',
+    },
+  };
+  if (token) {
+    requestOptions.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return new Promise(resolve => {
+    const req = https.request(requestOptions, res => {
+      let raw = '';
+      res.on('data', chunk => {
+        raw += chunk;
+      });
+      res.on('end', () => {
+        if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
+          try {
+            const json = JSON.parse(raw);
+            resolve({
+              authorLogin: json.user?.login || null,
+            });
+          } catch (error) {
+            process.stderr.write(
+              `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n`
+            );
+            resolve(null);
+          }
+        } else {
+          process.stderr.write(
+            `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n`
+          );
+          resolve(null);
+        }
+      });
+    });
+
+    req.on('error', error => {
+      process.stderr.write(
+        `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n`
+      );
+      resolve(null);
+    });
+
+    req.end();
+  });
+}
+
+module.exports = {
+  fetchNpmInfo,
+  collectCommitsSince,
+  loadCommitDetails,
+  extractPrNumber,
+  fetchPullRequestMetadata,
+};
diff --git a/scripts/tasks/generate-changelog/formatters.js b/scripts/tasks/generate-changelog/formatters.js
new file mode 100644
index 00000000000..49ed2a6a106
--- /dev/null
+++ b/scripts/tasks/generate-changelog/formatters.js
@@ -0,0 +1,228 @@
+'use strict';
+
+const {toCsvRow} = require('./utils');
+
+const NO_CHANGES_MESSAGE = 'No changes since the last release.';
+
+function buildChangelogEntries({
+  packageSpecs,
+  commitsByPackage,
+  summariesByPackage,
+  prMetadata,
+}) {
+  const entries = [];
+
+  for (let i = 0; i < packageSpecs.length; i++) {
+    const spec = packageSpecs[i];
+    const version = spec.displayVersion || spec.version;
+    const commitsForPackage = commitsByPackage.get(spec.name) || [];
+
+    if (commitsForPackage.length === 0) {
+      entries.push({
+        package: spec.name,
+        version,
+        hasChanges: false,
+        note: NO_CHANGES_MESSAGE,
+        commits: [],
+      });
+      continue;
+    }
+
+    const summaryMap = summariesByPackage.get(spec.name) || new Map();
+    const commitEntries = commitsForPackage.map(commit => {
+      let summary = summaryMap.get(commit.sha) || commit.subject;
+      if (commit.prNumber) {
+        const prPattern = new RegExp(`\\s*\\(#${commit.prNumber}\\)$`);
+        summary = summary.replace(prPattern, '').trim();
+      }
+
+      const commitSha = commit.sha;
+      const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`;
+      const prNumber = commit.prNumber || null;
+      const prUrl = prNumber
+        ? `https://github.com/facebook/react/pull/${prNumber}`
+        : null;
+      const prEntry = prNumber ? prMetadata.get(prNumber) : null;
+
+      const authorLogin = prEntry?.authorLogin || null;
+      const authorName = commit.authorName || null;
+      const authorEmail = commit.authorEmail || null;
+
+      let authorUrl = null;
+      let authorDisplay = authorName || 'unknown author';
+
+      if (authorLogin) {
+        authorUrl = `https://github.com/${authorLogin}`;
+        authorDisplay = `[@${authorLogin}](${authorUrl})`;
+      } else if (authorName && authorName.startsWith('@')) {
+        const username = authorName.slice(1);
+        authorUrl = `https://github.com/${username}`;
+        authorDisplay = `[@${username}](${authorUrl})`;
+      }
+
+      const referenceType = prNumber ? 'pr' : 'commit';
+      const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7);
+      const referenceUrl = prNumber ? prUrl : commitUrl;
+      const referenceLabel = prNumber
+        ? `[#${prNumber}](${prUrl})`
+        : `commit ${commitSha.slice(0, 7)}`;
+
+      return {
+        summary,
+        prNumber,
+        prUrl,
+        commitSha,
+        commitUrl,
+        author: {
+          login: authorLogin,
+          name: authorName,
+          email: authorEmail,
+          url: authorUrl,
+          display: authorDisplay,
+        },
+        reference: {
+          type: referenceType,
+          id: referenceId,
+          url: referenceUrl,
+          label: referenceLabel,
+        },
+      };
+    });
+
+    entries.push({
+      package: spec.name,
+      version,
+      hasChanges: true,
+      note: null,
+      commits: commitEntries,
+    });
+  }
+
+  return entries;
+}
+
+function renderChangelog(entries, format) {
+  if (format === 'text') {
+    const lines = [];
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      lines.push(`## ${entry.package}@${entry.version}`);
+      if (!entry.hasChanges) {
+        lines.push(`* ${entry.note}`);
+        lines.push('');
+        continue;
+      }
+
+      entry.commits.forEach(commit => {
+        lines.push(
+          `* ${commit.summary} (${commit.reference.label} by ${commit.author.display})`
+        );
+      });
+      lines.push('');
+    }
+
+    while (lines.length && lines[lines.length - 1] === '') {
+      lines.pop();
+    }
+
+    return lines.join('\n');
+  }
+
+  if (format === 'csv') {
+    const header = [
+      'package',
+      'version',
+      'summary',
+      'reference_type',
+      'reference_id',
+      'reference_url',
+      'author_name',
+      'author_login',
+      'author_url',
+      'author_email',
+      'commit_sha',
+      'commit_url',
+    ];
+    const rows = [header];
+
+    entries.forEach(entry => {
+      if (!entry.hasChanges) {
+        rows.push([
+          entry.package,
+          entry.version,
+          entry.note,
+          '',
+          '',
+          '',
+          '',
+          '',
+          '',
+          '',
+          '',
+          '',
+        ]);
+        return;
+      }
+
+      entry.commits.forEach(commit => {
+        const authorName =
+          commit.author.name ||
+          (commit.author.login ? `@${commit.author.login}` : 'unknown author');
+        rows.push([
+          entry.package,
+          entry.version,
+          commit.summary,
+          commit.reference.type,
+          commit.reference.id,
+          commit.reference.url,
+          authorName,
+          commit.author.login || '',
+          commit.author.url || '',
+          commit.author.email || '',
+          commit.commitSha,
+          commit.commitUrl,
+        ]);
+      });
+    });
+
+    return rows.map(toCsvRow).join('\n');
+  }
+
+  if (format === 'json') {
+    const payload = entries.map(entry => ({
+      package: entry.package,
+      version: entry.version,
+      hasChanges: entry.hasChanges,
+      note: entry.hasChanges ? undefined : entry.note,
+      commits: entry.commits.map(commit => ({
+        summary: commit.summary,
+        prNumber: commit.prNumber,
+        prUrl: commit.prUrl,
+        commitSha: commit.commitSha,
+        commitUrl: commit.commitUrl,
+        author: {
+          login: commit.author.login,
+          name: commit.author.name,
+          email: commit.author.email,
+          url: commit.author.url,
+          display: commit.author.display,
+        },
+        reference: {
+          type: commit.reference.type,
+          id: commit.reference.id,
+          url: commit.reference.url,
+          label: commit.reference.label,
+        },
+      })),
+    }));
+
+    return JSON.stringify(payload, null, 2);
+  }
+
+  throw new Error(`Unsupported format: ${format}`);
+}
+
+module.exports = {
+  buildChangelogEntries,
+  renderChangelog,
+};
diff --git a/scripts/tasks/generate-changelog/index.js b/scripts/tasks/generate-changelog/index.js
new file mode 100644
index 00000000000..816ad7959bf
--- /dev/null
+++ b/scripts/tasks/generate-changelog/index.js
@@ -0,0 +1,158 @@
+'use strict';
+
+const {stablePackages} = require('../../../ReactVersions');
+const {parseArgs} = require('./args');
+const {
+  fetchNpmInfo,
+  collectCommitsSince,
+  loadCommitDetails,
+  extractPrNumber,
+  fetchPullRequestMetadata,
+} = require('./data');
+const {summarizePackages} = require('./summaries');
+const {buildChangelogEntries, renderChangelog} = require('./formatters');
+const {noopLogger} = require('./utils');
+
+async function main() {
+  const {packageSpecs, summarizer, debug, format} = parseArgs(
+    process.argv.slice(2)
+  );
+  const log = debug
+    ? (...args) => console.log('[generate-changelog]', ...args)
+    : noopLogger;
+
+  const allStablePackages = Object.keys(stablePackages);
+  const packageTargets = new Map();
+  for (let i = 0; i < packageSpecs.length; i++) {
+    const spec = packageSpecs[i];
+    if (!allStablePackages.includes(spec.name)) {
+      throw new Error(
+        `Package "${spec.name}" is not listed in stablePackages.`
+      );
+    }
+    if (packageTargets.has(spec.name)) {
+      throw new Error(`Package "${spec.name}" was specified more than once.`);
+    }
+    packageTargets.set(spec.name, spec);
+  }
+
+  const targetPackages = packageSpecs.map(spec => spec.name);
+  log(
+    `Starting changelog generation for: ${packageSpecs
+      .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`)
+      .join(', ')}`
+  );
+
+  const packageInfoMap = new Map();
+  const packageInfoResults = await Promise.all(
+    targetPackages.map(async pkg => {
+      const info = await fetchNpmInfo(pkg, {log});
+      return {pkg, info};
+    })
+  );
+  for (let i = 0; i < packageInfoResults.length; i++) {
+    const entry = packageInfoResults[i];
+    packageInfoMap.set(entry.pkg, entry.info);
+  }
+
+  const commitPackagesMap = new Map();
+  const commitCollections = await Promise.all(
+    targetPackages.map(async pkg => {
+      const {gitHead} = packageInfoMap.get(pkg);
+      const commits = await collectCommitsSince(pkg, gitHead, {log});
+      log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`);
+      return {pkg, commits};
+    })
+  );
+  for (let i = 0; i < commitCollections.length; i++) {
+    const entry = commitCollections[i];
+    const pkg = entry.pkg;
+    const commits = entry.commits;
+    for (let j = 0; j < commits.length; j++) {
+      const sha = commits[j];
+      if (!commitPackagesMap.has(sha)) {
+        commitPackagesMap.set(sha, new Set());
+      }
+      commitPackagesMap.get(sha).add(pkg);
+    }
+  }
+  log(`Found ${commitPackagesMap.size} commits touching target packages.`);
+
+  if (commitPackagesMap.size === 0) {
+    console.log('No commits found for the selected packages.');
+    return;
+  }
+
+  const commitDetails = await Promise.all(
+    Array.from(commitPackagesMap.entries()).map(
+      async ([sha, packagesTouched]) => {
+        const detail = await loadCommitDetails(sha, {log});
+        detail.packages = packagesTouched;
+        detail.prNumber = extractPrNumber(detail.subject, detail.body);
+        return detail;
+      }
+    )
+  );
+
+  commitDetails.sort((a, b) => a.timestamp - b.timestamp);
+  log(`Ordered ${commitDetails.length} commit(s) chronologically.`);
+
+  const commitsByPackage = new Map();
+  commitDetails.forEach(commit => {
+    commit.packages.forEach(pkgName => {
+      if (!commitsByPackage.has(pkgName)) {
+        commitsByPackage.set(pkgName, []);
+      }
+      commitsByPackage.get(pkgName).push(commit);
+    });
+  });
+
+  const uniquePrNumbers = Array.from(
+    new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean))
+  );
+  log(`Identified ${uniquePrNumbers.length} unique PR number(s).`);
+
+  const prMetadata = new Map();
+  log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`);
+  const prMetadataResults = await Promise.all(
+    uniquePrNumbers.map(async prNumber => {
+      const meta = await fetchPullRequestMetadata(prNumber, {log});
+      return {prNumber, meta};
+    })
+  );
+  for (let i = 0; i < prMetadataResults.length; i++) {
+    const entry = prMetadataResults[i];
+    if (entry.meta) {
+      prMetadata.set(entry.prNumber, entry.meta);
+    }
+  }
+  log(`Fetched metadata for ${prMetadata.size} PR(s).`);
+
+  const summariesByPackage = await summarizePackages({
+    summarizer,
+    packageSpecs,
+    packageTargets,
+    commitsByPackage,
+    log,
+  });
+
+  const changelogEntries = buildChangelogEntries({
+    packageSpecs,
+    commitsByPackage,
+    summariesByPackage,
+    prMetadata,
+  });
+
+  log('Generated changelog sections.');
+  const output = renderChangelog(changelogEntries, format);
+  console.log(output);
+}
+
+if (require.main === module) {
+  main().catch(error => {
+    process.stderr.write(`${error.message}\n`);
+    process.exit(1);
+  });
+} else {
+  module.exports = main;
+}
diff --git a/scripts/tasks/generate-changelog/summaries.js b/scripts/tasks/generate-changelog/summaries.js
new file mode 100644
index 00000000000..d0b73851efd
--- /dev/null
+++ b/scripts/tasks/generate-changelog/summaries.js
@@ -0,0 +1,306 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const {execFileAsync, repoRoot, noopLogger} = require('./utils');
+
+function readChangelogSnippet(preferredPackage) {
+  const cacheKey =
+    preferredPackage === 'eslint-plugin-react-hooks'
+      ? preferredPackage
+      : 'root';
+  if (!readChangelogSnippet.cache) {
+    readChangelogSnippet.cache = new Map();
+  }
+  const cache = readChangelogSnippet.cache;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const targetPath =
+    preferredPackage === 'eslint-plugin-react-hooks'
+      ? path.join(
+          repoRoot,
+          'packages',
+          'eslint-plugin-react-hooks',
+          'CHANGELOG.md'
+        )
+      : path.join(repoRoot, 'CHANGELOG.md');
+
+  let content = '';
+  try {
+    content = fs.readFileSync(targetPath, 'utf8');
+  } catch {
+    content = '';
+  }
+
+  const snippet = content.slice(0, 4000);
+  cache.set(cacheKey, snippet);
+  return snippet;
+}
+
+function sanitizeSummary(text) {
+  if (!text) {
+    return '';
+  }
+
+  const trimmed = text.trim();
+  const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, '');
+
+  return withoutBullet.replace(/\s+/g, ' ').trim();
+}
+
+async function summarizePackages({
+  summarizer,
+  packageSpecs,
+  packageTargets,
+  commitsByPackage,
+  log,
+}) {
+  const summariesByPackage = new Map();
+  if (!summarizer) {
+    packageSpecs.forEach(spec => {
+      const commits = commitsByPackage.get(spec.name) || [];
+      const summaryMap = new Map();
+      for (let i = 0; i < commits.length; i++) {
+        const commit = commits[i];
+        summaryMap.set(commit.sha, commit.subject);
+      }
+      summariesByPackage.set(spec.name, summaryMap);
+    });
+    return summariesByPackage;
+  }
+
+  const tasks = packageSpecs.map(spec => {
+    const commits = commitsByPackage.get(spec.name) || [];
+    return summarizePackageCommits({
+      summarizer,
+      spec,
+      commits,
+      packageTargets,
+      allPackageSpecs: packageSpecs,
+      log,
+    });
+  });
+
+  const results = await Promise.all(tasks);
+  results.forEach(entry => {
+    summariesByPackage.set(entry.packageName, entry.summaries);
+  });
+  return summariesByPackage;
+}
+
+async function summarizePackageCommits({
+  summarizer,
+  spec,
+  commits,
+  packageTargets,
+  allPackageSpecs,
+  log,
+}) {
+  const summaries = new Map();
+  if (commits.length === 0) {
+    return {packageName: spec.name, summaries};
+  }
+
+  const rootStyle = readChangelogSnippet('root');
+  const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks');
+  const targetList = allPackageSpecs.map(
+    targetSpec =>
+      `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}`
+  );
+  const payload = commits.map(commit => {
+    const packages = Array.from(commit.packages || []).sort();
+    const usesHooksStyle = (commit.packages || new Set()).has(
+      'eslint-plugin-react-hooks'
+    );
+    const packagesWithVersions = packages.map(pkgName => {
+      const targetSpec = packageTargets.get(pkgName);
+      if (!targetSpec) {
+        return pkgName;
+      }
+      return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`;
+    });
+    return {
+      sha: commit.sha,
+      packages,
+      packagesWithVersions,
+      style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root',
+      subject: commit.subject,
+      body: commit.body || '',
+    };
+  });
+
+  const promptParts = [
+    `You are preparing changelog summaries for ${spec.name} ${
+      spec.displayVersion || spec.version
+    }.`,
+    'The broader release includes:',
+    ...targetList.map(line => `- ${line}`),
+    '',
+    'For each commit payload, write a single concise sentence without a leading bullet.',
+    'Match the tone and formatting of the provided style samples. Do not mention commit hashes.',
+    'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.',
+    'The JSON must contain one entry per commit in the same order they are provided.',
+    'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.',
+    '',
+    '--- STYLE: root ---',
+    rootStyle,
+    '--- END STYLE ---',
+    '',
+    '--- STYLE: eslint-plugin-react-hooks ---',
+    hooksStyle,
+    '--- END STYLE ---',
+    '',
+    `Commits affecting ${spec.name}:`,
+  ];
+
+  payload.forEach((item, index) => {
+    promptParts.push(
+      `Commit ${index + 1}:`,
+      `sha: ${item.sha}`,
+      `style: ${item.style}`,
+      `packages: ${item.packagesWithVersions.join(', ') || 'none'}`,
+      `subject: ${item.subject}`,
+      'body:',
+      item.body || '(empty)',
+      ''
+    );
+  });
+  promptParts.push('Return ONLY the JSON array.', '');
+
+  const prompt = promptParts.join('\n');
+  log(
+    `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.`
+  );
+  log(`Summarizer prompt length: ${prompt.length} characters.`);
+
+  try {
+    const raw = await runSummarizer(summarizer, prompt);
+    log(`Summarizer output length: ${raw.length}`);
+    const parsed = parseSummariesResponse(raw);
+    if (!parsed) {
+      throw new Error('Unable to parse summarizer output.');
+    }
+    parsed.forEach(entry => {
+      const summary = sanitizeSummary(entry.summary || '');
+      if (summary) {
+        summaries.set(entry.sha, summary);
+      }
+    });
+  } catch (error) {
+    if (log !== noopLogger) {
+      log(
+        `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}`
+      );
+      if (error && error.stack) {
+        log(error.stack);
+      }
+    }
+  }
+
+  for (let i = 0; i < commits.length; i++) {
+    const commit = commits[i];
+    if (!summaries.has(commit.sha)) {
+      summaries.set(commit.sha, commit.subject);
+    }
+  }
+
+  log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`);
+
+  return {packageName: spec.name, summaries};
+}
+
+async function runSummarizer(command, prompt) {
+  const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024};
+
+  if (command === 'codex') {
+    const {stdout} = await execFileAsync(
+      'codex',
+      ['exec', '--json', prompt],
+      options
+    );
+    return parseCodexSummary(stdout);
+  }
+
+  if (command === 'claude') {
+    const {stdout} = await execFileAsync('claude', ['-p', prompt], options);
+    return stripClaudeBanner(stdout);
+  }
+
+  throw new Error(`Unsupported summarizer command: ${command}`);
+}
+
+function parseCodexSummary(output) {
+  let last = '';
+  const lines = output.split('\n');
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    if (!trimmed) {
+      continue;
+    }
+    try {
+      const event = JSON.parse(trimmed);
+      if (
+        event.type === 'item.completed' &&
+        event.item?.type === 'agent_message'
+      ) {
+        last = event.item.text || '';
+      }
+    } catch {
+      last = trimmed;
+    }
+  }
+  return last || output;
+}
+
+function stripClaudeBanner(text) {
+  return text
+    .split('\n')
+    .filter(
+      line =>
+        line.trim() !==
+        'Claude Code at Meta (https://fburl.com/claude.code.users)'
+    )
+    .join('\n')
+    .trim();
+}
+
+function parseSummariesResponse(output) {
+  const trimmed = output.trim();
+  const candidates = trimmed
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean);
+
+  for (let i = candidates.length - 1; i >= 0; i--) {
+    const candidate = candidates[i];
+    if (!candidate) {
+      continue;
+    }
+    try {
+      const parsed = JSON.parse(candidate);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {
+      // Try the next candidate.
+    }
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch {
+    // Fall through.
+  }
+
+  return null;
+}
+
+module.exports = {
+  summarizePackages,
+};
diff --git a/scripts/tasks/generate-changelog/utils.js b/scripts/tasks/generate-changelog/utils.js
new file mode 100644
index 00000000000..fe4069eca02
--- /dev/null
+++ b/scripts/tasks/generate-changelog/utils.js
@@ -0,0 +1,62 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const {execFile} = require('child_process');
+const {promisify} = require('util');
+
+const execFileAsync = promisify(execFile);
+const repoRoot = path.resolve(__dirname, '..', '..', '..');
+
+function isCommandAvailable(command) {
+  const paths = (process.env.PATH || '').split(path.delimiter);
+  const extensions =
+    process.platform === 'win32' && process.env.PATHEXT
+      ? process.env.PATHEXT.split(';')
+      : [''];
+
+  for (let i = 0; i < paths.length; i++) {
+    const dir = paths[i];
+    if (!dir) {
+      continue;
+    }
+    for (let j = 0; j < extensions.length; j++) {
+      const ext = extensions[j];
+      const fullPath = path.join(dir, `${command}${ext}`);
+      try {
+        fs.accessSync(fullPath, fs.constants.X_OK);
+        return true;
+      } catch {
+        // Keep searching.
+      }
+    }
+  }
+  return false;
+}
+
+function noopLogger() {}
+
+function escapeCsvValue(value) {
+  if (value == null) {
+    return '';
+  }
+
+  const stringValue = String(value).replace(/\r?\n|\r/g, ' ');
+  if (stringValue.includes('"') || stringValue.includes(',')) {
+    return `"${stringValue.replace(/"/g, '""')}"`;
+  }
+  return stringValue;
+}
+
+function toCsvRow(values) {
+  return values.map(escapeCsvValue).join(',');
+}
+
+module.exports = {
+  execFileAsync,
+  repoRoot,
+  isCommandAvailable,
+  noopLogger,
+  escapeCsvValue,
+  toCsvRow,
+};
diff --git a/scripts/tasks/linc.js b/scripts/tasks/linc.js
new file mode 100644
index 00000000000..2ac9851d4de
--- /dev/null
+++ b/scripts/tasks/linc.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 minimist = require('minimist');
+const runESLint = require('../eslint');
+
+async function main() {
+  console.log('Linting changed files...');
+
+  const {_, ...cliOptions} = minimist(process.argv.slice(2));
+
+  if (await runESLint({onlyChanged: true, ...cliOptions})) {
+    console.log('Lint passed for changed files.');
+  } else {
+    console.log('Lint failed for changed files.');
+    process.exit(1);
+  }
+}
+
+main();
diff --git a/scripts/tasks/version-check.js b/scripts/tasks/version-check.js
new file mode 100644
index 00000000000..44e50753596
--- /dev/null
+++ b/scripts/tasks/version-check.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 fs = require('fs');
+const ReactVersionSrc = fs.readFileSync(
+  require.resolve('../../packages/shared/ReactVersion')
+);
+const reactVersion = /export default '([^']+)';/.exec(ReactVersionSrc)[1];
+
+const versions = {
+  'packages/react/package.json': require('../../packages/react/package.json')
+    .version,
+  'packages/react-dom/package.json':
+    require('../../packages/react-dom/package.json').version,
+  'packages/react-test-renderer/package.json':
+    require('../../packages/react-test-renderer/package.json').version,
+  'packages/shared/ReactVersion.js': reactVersion,
+};
+
+let allVersionsMatch = true;
+Object.keys(versions).forEach(function (name) {
+  const version = versions[name];
+  if (version !== reactVersion) {
+    allVersionsMatch = false;
+    console.log(
+      '%s version does not match package.json. Expected %s, saw %s.',
+      name,
+      reactVersion,
+      version
+    );
+  }
+});
+
+if (!allVersionsMatch) {
+  process.exit(1);
+}
diff --git a/scripts/worktree.sh b/scripts/worktree.sh
new file mode 100755
index 00000000000..ce5af504c7c
--- /dev/null
+++ b/scripts/worktree.sh
@@ -0,0 +1,154 @@
+#!/usr/bin/env bash
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+set -eo pipefail
+
+# --- Configuration ---
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+WORKTREE_CREATED=false
+WORKTREE_PATH=""
+
+# --- Usage ---
+usage() {
+  echo "Usage: $0 [name] [--claude] [--compiler]"
+  echo ""
+  echo "Creates a new git worktree with dependencies installed."
+  echo ""
+  echo "Arguments:"
+  echo "  [name]        Name for the worktree (auto-generated if not provided)"
+  echo ""
+  echo "Options:"
+  echo "  --claude      Launch Claude Code after setup"
+  echo "  --compiler    When used with --claude, launch Claude in the compiler directory"
+  exit 1
+}
+
+# --- Error handling ---
+error() {
+  echo "Error: $1" >&2
+  exit 1
+}
+
+# --- Cleanup on error ---
+cleanup() {
+  if [[ "$WORKTREE_CREATED" == "true" && -n "$WORKTREE_PATH" ]]; then
+    echo "Cleaning up: removing worktree at $WORKTREE_PATH..." >&2
+    git worktree remove "$WORKTREE_PATH" --force 2>/dev/null || true
+  fi
+}
+
+trap cleanup ERR
+
+# --- Argument parsing ---
+NAME=""
+USE_CLAUDE=false
+USE_COMPILER=false
+
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --claude)
+      USE_CLAUDE=true
+      shift
+      ;;
+    --compiler)
+      USE_COMPILER=true
+      shift
+      ;;
+    -h|--help)
+      usage
+      ;;
+    -*)
+      error "Unknown option: $1"
+      ;;
+    *)
+      if [[ -z "$NAME" ]]; then
+        NAME="$1"
+      else
+        error "Unexpected argument: $1"
+      fi
+      shift
+      ;;
+  esac
+done
+
+# Generate worktree name with timestamp prefix
+TIMESTAMP=$(date +%Y-%m-%d-%H-%M-%S)
+
+if [[ -z "$NAME" ]]; then
+  # Word lists for random name generation
+  ADJECTIVES=(
+    "quick" "bright" "calm" "dark" "eager" "fair" "gentle" "happy" "idle" "jolly"
+    "keen" "lively" "merry" "noble" "orange" "proud" "quiet" "rapid" "silent" "tall"
+    "unique" "vivid" "warm" "young" "zealous" "ancient" "bold" "clever" "daring" "elegant"
+    "fancy" "grand" "humble" "icy" "jagged" "kind" "loud" "magic" "narrow" "odd"
+    "plain" "quaint" "rough" "sharp" "tender" "ultra" "vast" "wild" "xeric" "youthful"
+    "zesty" "agile" "brave" "crisp" "deep"
+  )
+  NOUNS=(
+    "apple" "bear" "cloud" "dragon" "eagle" "flame" "garden" "hill" "island" "jungle"
+    "kettle" "lemon" "mountain" "night" "ocean" "panda" "quartz" "river" "storm" "tiger"
+    "umbrella" "valley" "whale" "xenon" "yarn" "zebra" "anchor" "bridge" "canyon" "desert"
+    "ember" "forest" "glacier" "harbor" "igloo" "jewel" "knight" "lantern" "meadow" "nebula"
+    "oasis" "phoenix" "quest" "rocket" "shadow" "thunder" "unity" "vortex" "willow" "xylophone"
+    "yonder" "zenith" "aurora" "beacon" "coral"
+  )
+
+  # Generate random name: worktree-yyyy-mm-dd-hh-mm-ss-<adjective>-<noun>
+  RANDOM_ADJ=${ADJECTIVES[$RANDOM % ${#ADJECTIVES[@]}]}
+  RANDOM_NOUN=${NOUNS[$RANDOM % ${#NOUNS[@]}]}
+  NAME="worktree-${TIMESTAMP}-${RANDOM_ADJ}-${RANDOM_NOUN}"
+  echo "Auto-generated worktree name: $NAME"
+else
+  # Use provided name: worktree-yyyy-mm-dd-hh-mm-ss-<name>
+  NAME="worktree-${TIMESTAMP}-${NAME}"
+  echo "Worktree name: $NAME"
+fi
+
+# --- Check .gitignore ---
+if ! grep -qE '^/?\.worktrees/?$' "$REPO_ROOT/.gitignore" 2>/dev/null; then
+  error "'.worktrees' is not in .gitignore. Add it before creating worktrees."
+fi
+
+# --- Check if worktree already exists ---
+if git worktree list | grep -q "\[$NAME\]"; then
+  error "Worktree with branch name '$NAME' already exists"
+fi
+
+# --- Set up worktree path ---
+WORKTREES_DIR="$REPO_ROOT/.worktrees"
+WORKTREE_PATH="$WORKTREES_DIR/$NAME"
+
+if [[ -d "$WORKTREE_PATH" ]]; then
+  error "Directory already exists at $WORKTREE_PATH"
+fi
+
+# --- Create worktree ---
+mkdir -p "$WORKTREES_DIR"
+echo "Creating worktree '$NAME' at $WORKTREE_PATH..."
+git worktree add "$WORKTREE_PATH" -b "$NAME"
+WORKTREE_CREATED=true
+
+# --- Install dependencies ---
+echo "Installing compiler dependencies..."
+(cd "$WORKTREE_PATH/compiler" && yarn install)
+
+echo "Installing root dependencies..."
+(cd "$WORKTREE_PATH" && yarn install)
+
+echo "Worktree '$NAME' created successfully at $WORKTREE_PATH"
+
+# --- Launch Claude (optional) ---
+if [[ "$USE_CLAUDE" == "true" ]]; then
+  if [[ "$USE_COMPILER" == "true" ]]; then
+    echo "Launching Claude in compiler directory..."
+    cd "$WORKTREE_PATH/compiler"
+  else
+    echo "Launching Claude in worktree root..."
+    cd "$WORKTREE_PATH"
+  fi
+  exec claude
+fi
diff --git a/src/.jshintrc b/src/.jshintrc
deleted file mode 100644
index c5dcf96f49d..00000000000
--- a/src/.jshintrc
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "browser": true,
-  "esnext": true,
-
-  "bitwise": true,
-  "boss": true,
-  "curly": true,
-  "devel": true,
-  "eqnull": true,
-  "expr": true,
-  "funcscope": true,
-  "globalstrict": true,
-  "loopfunc": true,
-  "newcap": false,
-  "noempty": true,
-  "nonstandard": true,
-  "maxlen": 80,
-  "onecase": true,
-  "regexdash": true,
-  "sub": false,
-  "trailing": true,
-  "undef": true,
-  "unused": "vars",
-
-  "globals": {
-    "__DEV__": false,
-    "exports": false,
-    "module": false,
-    "require": false,
-
-    "afterEach": false,
-    "beforeEach": false,
-    "describe": false,
-    "expect": false,
-    "it": false,
-    "spyOn": false
-  }
-}
diff --git a/src/addons/ReactComponentWithPureRenderMixin.js b/src/addons/ReactComponentWithPureRenderMixin.js
deleted file mode 100644
index cf85d9f5f8d..00000000000
--- a/src/addons/ReactComponentWithPureRenderMixin.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
-* @providesModule ReactComponentWithPureRenderMixin
-*/
-
-"use strict";
-
-var shallowEqual = require('shallowEqual');
-
-/**
- * If your React component's render function is "pure", e.g. it will render the
- * same result given the same props and state, provide this Mixin for a
- * considerable performance boost.
- *
- * Most React components have pure render functions.
- *
- * Example:
- *
- *   var ReactComponentWithPureRenderMixin =
- *     require('ReactComponentWithPureRenderMixin');
- *   React.createClass({
- *     mixins: [ReactComponentWithPureRenderMixin],
- *
- *     render: function() {
- *       return <div className={this.props.className}>foo</div>;
- *     }
- *   });
- *
- * Note: This only checks shallow equality for props and state. If these contain
- * complex data structures this mixin may have false-negatives for deeper
- * differences. Only mixin to components which have simple props and state, or
- * use `forceUpdate()` when you know deep data structures have changed.
- */
-var ReactComponentWithPureRenderMixin = {
-  shouldComponentUpdate: function(nextProps, nextState) {
-    return !shallowEqual(this.props, nextProps) ||
-           !shallowEqual(this.state, nextState);
-  }
-};
-
-module.exports = ReactComponentWithPureRenderMixin;
diff --git a/src/addons/ReactRAFBatchingStrategy.js b/src/addons/ReactRAFBatchingStrategy.js
deleted file mode 100644
index f1451ff0eaa..00000000000
--- a/src/addons/ReactRAFBatchingStrategy.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactRAFBatchingStrategy
- * @typechecks static-only
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-var ReactUpdates = require('ReactUpdates');
-
-var requestAnimationFrame = require('requestAnimationFrame');
-
-function tick() {
-  ReactUpdates.flushBatchedUpdates();
-  requestAnimationFrame(tick);
-}
-
-var ReactRAFBatchingStrategy = {
-  isBatchingUpdates: true,
-
-  /**
-   * Call the provided function in a context within which calls to `setState`
-   * and friends are batched such that components aren't updated unnecessarily.
-   */
-  batchedUpdates: function(callback, a, b) {
-    callback(a, b);
-  }
-};
-
-if (ExecutionEnvironment.canUseDOM) {
-  requestAnimationFrame(tick);
-}
-
-module.exports = ReactRAFBatchingStrategy;
diff --git a/src/addons/__tests__/update-test.js b/src/addons/__tests__/update-test.js
deleted file mode 100644
index ea054fd02c1..00000000000
--- a/src/addons/__tests__/update-test.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var update = require('update');
-
-describe('update', function() {
-  it('should support push', function() {
-    expect(update([1], {$push: [7]})).toEqual([1, 7]);
-    expect(update.bind(null, [], {$push: 7})).toThrow(
-      'Invariant Violation: update(): expected spec of $push to be an ' +
-      'array; got 7. Did you forget to wrap your parameter in an array?'
-    );
-    expect(update.bind(null, 1, {$push: 7})).toThrow(
-      'Invariant Violation: update(): expected target of $push to be an ' +
-      'array; got 1.'
-    );
-  });
-
-  it('should support unshift', function() {
-    expect(update([1], {$unshift: [7]})).toEqual([7, 1]);
-    expect(update.bind(null, [], {$unshift: 7})).toThrow(
-      'Invariant Violation: update(): expected spec of $unshift to be an ' +
-      'array; got 7. Did you forget to wrap your parameter in an array?'
-    );
-    expect(update.bind(null, 1, {$unshift: 7})).toThrow(
-      'Invariant Violation: update(): expected target of $unshift to be an ' +
-      'array; got 1.'
-    );
-  });
-
-  it('should support splice', function() {
-    expect(update([1, 4, 3], {$splice: [[1, 1, 2]]})).toEqual([1, 2, 3]);
-    expect(update.bind(null, [], {$splice: 1})).toThrow(
-      'Invariant Violation: update(): expected spec of $splice to be an ' +
-      'array of arrays; got 1. Did you forget to wrap your parameters in an '+
-      'array?'
-    );
-    expect(update.bind(null, [], {$splice: [1]})).toThrow(
-      'Invariant Violation: update(): expected spec of $splice to be an ' +
-      'array of arrays; got 1. Did you forget to wrap your parameters in an ' +
-      'array?'
-    );
-    expect(update.bind(null, 1, {$splice: 7})).toThrow(
-      'Invariant Violation: Expected $splice target to be an array; got 1'
-    );
-  });
-
-  it('should support merge', function() {
-    expect(update({a: 'b'}, {$merge: {c: 'd'}})).toEqual({a: 'b', c: 'd'});
-    expect(update.bind(null, {}, {$merge: 7})).toThrow(
-      'Invariant Violation: update(): $merge expects a spec of type ' +
-      '\'object\'; got 7'
-    );
-    expect(update.bind(null, 7, {$merge: {a: 'b'}})).toThrow(
-      'Invariant Violation: update(): $merge expects a target of type ' +
-      '\'object\'; got 7'
-    );
-  });
-
-  it('should support set', function() {
-    expect(update({a: 'b'}, {$set: {c: 'd'}})).toEqual({c: 'd'});
-  });
-
-  it('should support apply', function() {
-    expect(update(2, {$apply: function(x) { return x * 2; }})).toEqual(4);
-    expect(update.bind(null, 2, {$apply: 123})).toThrow(
-      'Invariant Violation: update(): expected spec of $apply to be a ' +
-      'function; got 123.'
-    );
-  });
-
-  it('should support deep updates', function() {
-    expect(update({a: 'b', c: {d: 'e'}}, {c: {d: {$set: 'f'}}})).toEqual({
-      a: 'b',
-      c: {d: 'f'}
-    });
-  });
-
-  it('should require a command', function() {
-    expect(update.bind(null, {a: 'b'}, {a: 'c'})).toThrow(
-      'Invariant Violation: update(): You provided a key path to update() ' +
-      'that did not contain one of $push, $unshift, $splice, $set, $merge, ' +
-      '$apply. Did you forget to include {$set: ...}?'
-    );
-  });
-});
diff --git a/src/addons/link/LinkedStateMixin.js b/src/addons/link/LinkedStateMixin.js
deleted file mode 100644
index d0f4b1b7e53..00000000000
--- a/src/addons/link/LinkedStateMixin.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule LinkedStateMixin
- * @typechecks static-only
- */
-
-"use strict";
-
-var ReactLink = require('ReactLink');
-var ReactStateSetters = require('ReactStateSetters');
-
-/**
- * A simple mixin around ReactLink.forState().
- */
-var LinkedStateMixin = {
-  /**
-   * Create a ReactLink that's linked to part of this component's state. The
-   * ReactLink will have the current value of this.state[key] and will call
-   * setState() when a change is requested.
-   *
-   * @param {string} key state key to update. Note: you may want to use keyOf()
-   * if you're using Google Closure Compiler advanced mode.
-   * @return {ReactLink} ReactLink instance linking to the state.
-   */
-  linkState: function(key) {
-    return new ReactLink(
-      this.state[key],
-      ReactStateSetters.createStateKeySetter(this, key)
-    );
-  }
-};
-
-module.exports = LinkedStateMixin;
diff --git a/src/addons/link/ReactLink.js b/src/addons/link/ReactLink.js
deleted file mode 100644
index 24b6d8cb9ed..00000000000
--- a/src/addons/link/ReactLink.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactLink
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * ReactLink encapsulates a common pattern in which a component wants to modify
- * a prop received from its parent. ReactLink allows the parent to pass down a
- * value coupled with a callback that, when invoked, expresses an intent to
- * modify that value. For example:
- *
- * React.createClass({
- *   getInitialState: function() {
- *     return {value: ''};
- *   },
- *   render: function() {
- *     var valueLink = new ReactLink(this.state.value, this._handleValueChange);
- *     return <input valueLink={valueLink} />;
- *   },
- *   this._handleValueChange: function(newValue) {
- *     this.setState({value: newValue});
- *   }
- * });
- *
- * We have provided some sugary mixins to make the creation and
- * consumption of ReactLink easier; see LinkedValueUtils and LinkedStateMixin.
- */
-
-var React = require('React');
-
-/**
- * @param {*} value current value of the link
- * @param {function} requestChange callback to request a change
- */
-function ReactLink(value, requestChange) {
-  this.value = value;
-  this.requestChange = requestChange;
-}
-
-/**
- * Creates a PropType that enforces the ReactLink API and optionally checks the
- * type of the value being passed inside the link. Example:
- *
- * MyComponent.propTypes = {
- *   tabIndexLink: ReactLink.PropTypes.link(React.PropTypes.number)
- * }
- */
-function createLinkTypeChecker(linkType) {
-  var shapes = {
-    value: typeof linkType === 'undefined' ?
-      React.PropTypes.any.isRequired :
-      linkType.isRequired,
-    requestChange: React.PropTypes.func.isRequired
-  };
-  return React.PropTypes.shape(shapes);
-}
-
-ReactLink.PropTypes = {
-  link: createLinkTypeChecker
-};
-
-module.exports = ReactLink;
diff --git a/src/addons/link/__tests__/LinkedStateMixin-test.js b/src/addons/link/__tests__/LinkedStateMixin-test.js
deleted file mode 100644
index 32f51ff6680..00000000000
--- a/src/addons/link/__tests__/LinkedStateMixin-test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-/*jshint evil:true */
-
-describe('LinkedStateMixin', function() {
-  var LinkedStateMixin;
-  var React;
-  var ReactLink;
-
-  beforeEach(function() {
-    LinkedStateMixin = require('LinkedStateMixin');
-    React = require('React');
-    ReactLink = require('ReactLink');
-  });
-
-  it('should create a ReactLink for state', function() {
-    var Component = React.createClass({
-      mixins: [LinkedStateMixin],
-
-      getInitialState: function() {
-        return {value: 'initial value'};
-      },
-
-      render: function() {
-        return <span>value is {this.state.value}</span>;
-      }
-    });
-    var container = document.createElement('div');
-    var component = React.renderComponent(<Component />, container);
-    var link = component.linkState('value');
-    expect(component.state.value).toBe('initial value');
-    expect(link.value).toBe('initial value');
-    link.requestChange('new value');
-    expect(component.state.value).toBe('new value');
-    expect(component.linkState('value').value).toBe('new value');
-  });
-});
diff --git a/src/addons/link/__tests__/ReactLinkPropTypes-test.js b/src/addons/link/__tests__/ReactLinkPropTypes-test.js
deleted file mode 100644
index cd5745168d4..00000000000
--- a/src/addons/link/__tests__/ReactLinkPropTypes-test.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var emptyFunction = require('emptyFunction');
-var LinkPropTypes = require('ReactLink').PropTypes;
-var React = require('React');
-var ReactPropTypeLocations = require('ReactPropTypeLocations');
-
-var invalidMessage = 'Invalid prop `testProp` supplied to `testComponent`.';
-var requiredMessage =
-  'Required prop `testProp` was not specified in `testComponent`.';
-
-function typeCheckFail(declaration, value, message) {
-  var props = {testProp: value};
-  var error = declaration(
-    props,
-    'testProp',
-    'testComponent',
-    ReactPropTypeLocations.prop
-  );
-  expect(error instanceof Error).toBe(true);
-  expect(error.message).toBe(message);
-}
-
-function typeCheckPass(declaration, value) {
-  var props = {testProp: value};
-  var error = declaration(
-    props,
-    'testProp',
-    'testComponent',
-    ReactPropTypeLocations.prop
-  );
-  expect(error).toBe(undefined);
-}
-
-describe('ReactLink', function() {
-  it('should fail if the argument does not implement the Link API', function() {
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.any),
-      {},
-      'Required prop `value` was not specified in `testComponent`.'
-    );
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.any),
-      {value: 123},
-      'Required prop `requestChange` was not specified in `testComponent`.'
-    );
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.any),
-      {requestChange: emptyFunction},
-      'Required prop `value` was not specified in `testComponent`.'
-    );
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.any),
-      {value: null, requestChange: null},
-      'Required prop `value` was not specified in `testComponent`.'
-    );
-  });
-
-  it('should allow valid links even if no type was specified', function() {
-    typeCheckPass(
-      LinkPropTypes.link(),
-      {value: 42, requestChange: emptyFunction}
-    );
-    typeCheckPass(
-      LinkPropTypes.link(),
-      {value: {}, requestChange: emptyFunction
-    });
-  });
-
-  it('should allow no link to be passed at all', function() {
-    typeCheckPass(
-      LinkPropTypes.link(React.PropTypes.string),
-      undefined
-    );
-  });
-
-  it('should allow valid links with correct value format', function() {
-    typeCheckPass(
-      LinkPropTypes.link(React.PropTypes.any),
-      {value: 42, requestChange: emptyFunction}
-    );
-    typeCheckPass(
-      LinkPropTypes.link(React.PropTypes.number),
-      {value: 42, requestChange: emptyFunction}
-    );
-    typeCheckPass(
-      LinkPropTypes.link(React.PropTypes.renderable),
-      {value: 42, requestChange: emptyFunction}
-    );
-  });
-
-  it('should fail if the link`s value type does not match', function() {
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.string),
-      {value: 123, requestChange: emptyFunction},
-      'Invalid prop `value` of type `number` supplied to `testComponent`,' +
-      ' expected `string`.'
-    );
-  });
-
-  it('should be implicitly optional and not warn without values', function() {
-    typeCheckPass(LinkPropTypes.link(), null);
-    typeCheckPass(LinkPropTypes.link(), undefined);
-    typeCheckPass(LinkPropTypes.link(React.PropTypes.string), null);
-    typeCheckPass(LinkPropTypes.link(React.PropTypes.string), undefined);
-  });
-
-  it('should warn for missing required values', function() {
-    typeCheckFail(LinkPropTypes.link().isRequired, null, requiredMessage);
-    typeCheckFail(LinkPropTypes.link().isRequired, undefined, requiredMessage);
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.string).isRequired,
-      null,
-      requiredMessage
-    );
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.string).isRequired,
-      undefined,
-      requiredMessage
-    );
-  });
-
-  it('should be compatible with React.PropTypes.oneOfType', function() {
-    typeCheckPass(
-      React.PropTypes.oneOfType([LinkPropTypes.link(React.PropTypes.number)]),
-      {value: 123, requestChange: emptyFunction}
-    );
-    typeCheckFail(
-      React.PropTypes.oneOfType([LinkPropTypes.link(React.PropTypes.number)]),
-      123,
-      invalidMessage
-    );
-    typeCheckPass(
-      LinkPropTypes.link(React.PropTypes.oneOfType([React.PropTypes.number])),
-      {value: 123, requestChange: emptyFunction}
-    );
-    typeCheckFail(
-      LinkPropTypes.link(React.PropTypes.oneOfType([React.PropTypes.number])),
-      {value: 'imastring', requestChange: emptyFunction},
-      'Invalid prop `value` supplied to `testComponent`.'
-    );
-  });
-});
diff --git a/src/addons/transitions/ReactCSSTransitionGroup.js b/src/addons/transitions/ReactCSSTransitionGroup.js
deleted file mode 100644
index 2a3301fd7ac..00000000000
--- a/src/addons/transitions/ReactCSSTransitionGroup.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @typechecks
- * @providesModule ReactCSSTransitionGroup
- */
-
-"use strict";
-
-var React = require('React');
-
-var ReactTransitionGroup = require('ReactTransitionGroup');
-var ReactCSSTransitionGroupChild = require('ReactCSSTransitionGroupChild');
-
-var merge = require('merge');
-
-var ReactCSSTransitionGroup = React.createClass({
-  displayName: 'ReactCSSTransitionGroup',
-
-  propTypes: {
-    transitionName: React.PropTypes.string.isRequired,
-    transitionEnter: React.PropTypes.bool,
-    transitionLeave: React.PropTypes.bool
-  },
-
-  getDefaultProps: function() {
-    return {
-      transitionEnter: true,
-      transitionLeave: true
-    };
-  },
-
-  _wrapChild: function(child) {
-    // We need to provide this childFactory so that
-    // ReactCSSTransitionGroupChild can receive updates to name, enter, and
-    // leave while it is leaving.
-    return ReactCSSTransitionGroupChild(
-      {
-        name: this.props.transitionName,
-        enter: this.props.transitionEnter,
-        leave: this.props.transitionLeave
-      },
-      child
-    );
-  },
-
-  render: function() {
-    return (
-      ReactTransitionGroup(
-        merge(this.props, {childFactory: this._wrapChild})
-      )
-    );
-  }
-});
-
-module.exports = ReactCSSTransitionGroup;
diff --git a/src/addons/transitions/ReactCSSTransitionGroupChild.js b/src/addons/transitions/ReactCSSTransitionGroupChild.js
deleted file mode 100644
index 2a60a29dda1..00000000000
--- a/src/addons/transitions/ReactCSSTransitionGroupChild.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @typechecks
- * @providesModule ReactCSSTransitionGroupChild
- */
-
-"use strict";
-
-var React = require('React');
-
-var CSSCore = require('CSSCore');
-var ReactTransitionEvents = require('ReactTransitionEvents');
-
-var onlyChild = require('onlyChild');
-
-// We don't remove the element from the DOM until we receive an animationend or
-// transitionend event. If the user screws up and forgets to add an animation
-// their node will be stuck in the DOM forever, so we detect if an animation
-// does not start and if it doesn't, we just call the end listener immediately.
-var TICK = 17;
-var NO_EVENT_TIMEOUT = 5000;
-
-var noEventListener = null;
-
-
-if (__DEV__) {
-  noEventListener = function() {
-    console.warn(
-      'transition(): tried to perform an animation without ' +
-      'an animationend or transitionend event after timeout (' +
-      NO_EVENT_TIMEOUT + 'ms). You should either disable this ' +
-      'transition in JS or add a CSS animation/transition.'
-    );
-  };
-}
-
-var ReactCSSTransitionGroupChild = React.createClass({
-  displayName: 'ReactCSSTransitionGroupChild',
-
-  transition: function(animationType, finishCallback) {
-    var node = this.getDOMNode();
-    var className = this.props.name + '-' + animationType;
-    var activeClassName = className + '-active';
-    var noEventTimeout = null;
-
-    var endListener = function() {
-      if (__DEV__) {
-        clearTimeout(noEventTimeout);
-      }
-
-      CSSCore.removeClass(node, className);
-      CSSCore.removeClass(node, activeClassName);
-
-      ReactTransitionEvents.removeEndEventListener(node, endListener);
-
-      // Usually this optional callback is used for informing an owner of
-      // a leave animation and telling it to remove the child.
-      finishCallback && finishCallback();
-    };
-
-    ReactTransitionEvents.addEndEventListener(node, endListener);
-
-    CSSCore.addClass(node, className);
-
-    // Need to do this to actually trigger a transition.
-    this.queueClass(activeClassName);
-
-    if (__DEV__) {
-      noEventTimeout = setTimeout(noEventListener, NO_EVENT_TIMEOUT);
-    }
-  },
-
-  queueClass: function(className) {
-    this.classNameQueue.push(className);
-
-    if (!this.timeout) {
-      this.timeout = setTimeout(this.flushClassNameQueue, TICK);
-    }
-  },
-
-  flushClassNameQueue: function() {
-    if (this.isMounted()) {
-      this.classNameQueue.forEach(
-        CSSCore.addClass.bind(CSSCore, this.getDOMNode())
-      );
-    }
-    this.classNameQueue.length = 0;
-    this.timeout = null;
-  },
-
-  componentWillMount: function() {
-    this.classNameQueue = [];
-  },
-
-  componentWillUnmount: function() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  },
-
-  componentWillEnter: function(done) {
-    if (this.props.enter) {
-      this.transition('enter', done);
-    } else {
-      done();
-    }
-  },
-
-  componentWillLeave: function(done) {
-    if (this.props.leave) {
-      this.transition('leave', done);
-    } else {
-      done();
-    }
-  },
-
-  render: function() {
-    return onlyChild(this.props.children);
-  }
-});
-
-module.exports = ReactCSSTransitionGroupChild;
diff --git a/src/addons/transitions/ReactTransitionChildMapping.js b/src/addons/transitions/ReactTransitionChildMapping.js
deleted file mode 100644
index 8278ccb51ce..00000000000
--- a/src/addons/transitions/ReactTransitionChildMapping.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @typechecks static-only
- * @providesModule ReactTransitionChildMapping
- */
-
-"use strict";
-
-var ReactChildren = require('ReactChildren');
-
-var ReactTransitionChildMapping = {
-  /**
-   * Given `this.props.children`, return an object mapping key to child. Just
-   * simple syntactic sugar around ReactChildren.map().
-   *
-   * @param {*} children `this.props.children`
-   * @return {object} Mapping of key to child
-   */
-  getChildMapping: function(children) {
-    return ReactChildren.map(children, function(child) {
-      return child;
-    });
-  },
-
-  /**
-   * When you're adding or removing children some may be added or removed in the
-   * same render pass. We want to show *both* since we want to simultaneously
-   * animate elements in and out. This function takes a previous set of keys
-   * and a new set of keys and merges them with its best guess of the correct
-   * ordering. In the future we may expose some of the utilities in
-   * ReactMultiChild to make this easy, but for now React itself does not
-   * directly have this concept of the union of prevChildren and nextChildren
-   * so we implement it here.
-   *
-   * @param {object} prev prev children as returned from
-   * `ReactTransitionChildMapping.getChildMapping()`.
-   * @param {object} next next children as returned from
-   * `ReactTransitionChildMapping.getChildMapping()`.
-   * @return {object} a key set that contains all keys in `prev` and all keys
-   * in `next` in a reasonable order.
-   */
-  mergeChildMappings: function(prev, next) {
-    prev = prev || {};
-    next = next || {};
-
-    function getValueForKey(key) {
-      if (next.hasOwnProperty(key)) {
-        return next[key];
-      } else {
-        return prev[key];
-      }
-    }
-
-    // For each key of `next`, the list of keys to insert before that key in
-    // the combined list
-    var nextKeysPending = {};
-
-    var pendingKeys = [];
-    for (var prevKey in prev) {
-      if (next.hasOwnProperty(prevKey)) {
-        if (pendingKeys.length) {
-          nextKeysPending[prevKey] = pendingKeys;
-          pendingKeys = [];
-        }
-      } else {
-        pendingKeys.push(prevKey);
-      }
-    }
-
-    var i;
-    var childMapping = {};
-    for (var nextKey in next) {
-      if (nextKeysPending.hasOwnProperty(nextKey)) {
-        for (i = 0; i < nextKeysPending[nextKey].length; i++) {
-          var pendingNextKey = nextKeysPending[nextKey][i];
-          childMapping[nextKeysPending[nextKey][i]] = getValueForKey(
-            pendingNextKey
-          );
-        }
-      }
-      childMapping[nextKey] = getValueForKey(nextKey);
-    }
-
-    // Finally, add the keys which didn't appear before any key in `next`
-    for (i = 0; i < pendingKeys.length; i++) {
-      childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
-    }
-
-    return childMapping;
-  }
-};
-
-module.exports = ReactTransitionChildMapping;
diff --git a/src/addons/transitions/ReactTransitionEvents.js b/src/addons/transitions/ReactTransitionEvents.js
deleted file mode 100644
index ac65be77193..00000000000
--- a/src/addons/transitions/ReactTransitionEvents.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactTransitionEvents
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-/**
- * EVENT_NAME_MAP is used to determine which event fired when a
- * transition/animation ends, based on the style property used to
- * define that event.
- */
-var EVENT_NAME_MAP = {
-  transitionend: {
-    'transition': 'transitionend',
-    'WebkitTransition': 'webkitTransitionEnd',
-    'MozTransition': 'mozTransitionEnd',
-    'OTransition': 'oTransitionEnd',
-    'msTransition': 'MSTransitionEnd'
-  },
-
-  animationend: {
-    'animation': 'animationend',
-    'WebkitAnimation': 'webkitAnimationEnd',
-    'MozAnimation': 'mozAnimationEnd',
-    'OAnimation': 'oAnimationEnd',
-    'msAnimation': 'MSAnimationEnd'
-  }
-};
-
-var endEvents = [];
-
-function detectEvents() {
-  var testEl = document.createElement('div');
-  var style = testEl.style;
-
-  // On some platforms, in particular some releases of Android 4.x,
-  // the un-prefixed "animation" and "transition" properties are defined on the
-  // style object but the events that fire will still be prefixed, so we need
-  // to check if the un-prefixed events are useable, and if not remove them
-  // from the map
-  if (!('AnimationEvent' in window)) {
-    delete EVENT_NAME_MAP.animationend.animation;
-  }
-
-  if (!('TransitionEvent' in window)) {
-    delete EVENT_NAME_MAP.transitionend.transition;
-  }
-
-  for (var baseEventName in EVENT_NAME_MAP) {
-    var baseEvents = EVENT_NAME_MAP[baseEventName];
-    for (var styleName in baseEvents) {
-      if (styleName in style) {
-        endEvents.push(baseEvents[styleName]);
-        break;
-      }
-    }
-  }
-}
-
-if (ExecutionEnvironment.canUseDOM) {
-  detectEvents();
-}
-
-// We use the raw {add|remove}EventListener() call because EventListener
-// does not know how to remove event listeners and we really should
-// clean up. Also, these events are not triggered in older browsers
-// so we should be A-OK here.
-
-function addEventListener(node, eventName, eventListener) {
-  node.addEventListener(eventName, eventListener, false);
-}
-
-function removeEventListener(node, eventName, eventListener) {
-  node.removeEventListener(eventName, eventListener, false);
-}
-
-var ReactTransitionEvents = {
-  addEndEventListener: function(node, eventListener) {
-    if (endEvents.length === 0) {
-      // If CSS transitions are not supported, trigger an "end animation"
-      // event immediately.
-      window.setTimeout(eventListener, 0);
-      return;
-    }
-    endEvents.forEach(function(endEvent) {
-      addEventListener(node, endEvent, eventListener);
-    });
-  },
-
-  removeEndEventListener: function(node, eventListener) {
-    if (endEvents.length === 0) {
-      return;
-    }
-    endEvents.forEach(function(endEvent) {
-      removeEventListener(node, endEvent, eventListener);
-    });
-  }
-};
-
-module.exports = ReactTransitionEvents;
diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js
deleted file mode 100644
index 9f4276c31d4..00000000000
--- a/src/addons/transitions/ReactTransitionGroup.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactTransitionGroup
- */
-
-"use strict";
-
-var React = require('React');
-var ReactTransitionChildMapping = require('ReactTransitionChildMapping');
-
-var cloneWithProps = require('cloneWithProps');
-var emptyFunction = require('emptyFunction');
-var merge = require('merge');
-
-var ReactTransitionGroup = React.createClass({
-  displayName: 'ReactTransitionGroup',
-
-  propTypes: {
-    component: React.PropTypes.func,
-    childFactory: React.PropTypes.func
-  },
-
-  getDefaultProps: function() {
-    return {
-      component: React.DOM.span,
-      childFactory: emptyFunction.thatReturnsArgument
-    };
-  },
-
-  getInitialState: function() {
-    return {
-      children: ReactTransitionChildMapping.getChildMapping(this.props.children)
-    };
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    var nextChildMapping = ReactTransitionChildMapping.getChildMapping(
-      nextProps.children
-    );
-    var prevChildMapping = this.state.children;
-
-    this.setState({
-      children: ReactTransitionChildMapping.mergeChildMappings(
-        prevChildMapping,
-        nextChildMapping
-      )
-    });
-
-    var key;
-
-    for (key in nextChildMapping) {
-      var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
-      if (nextChildMapping[key] && !hasPrev &&
-          !this.currentlyTransitioningKeys[key]) {
-        this.keysToEnter.push(key);
-      }
-    }
-
-    for (key in prevChildMapping) {
-      var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(key);
-      if (prevChildMapping[key] && !hasNext &&
-          !this.currentlyTransitioningKeys[key]) {
-        this.keysToLeave.push(key);
-      }
-    }
-
-    // If we want to someday check for reordering, we could do it here.
-  },
-
-  componentWillMount: function() {
-    this.currentlyTransitioningKeys = {};
-    this.keysToEnter = [];
-    this.keysToLeave = [];
-  },
-
-  componentDidUpdate: function() {
-    var keysToEnter = this.keysToEnter;
-    this.keysToEnter = [];
-    keysToEnter.forEach(this.performEnter);
-
-    var keysToLeave = this.keysToLeave;
-    this.keysToLeave = [];
-    keysToLeave.forEach(this.performLeave);
-  },
-
-  performEnter: function(key) {
-    this.currentlyTransitioningKeys[key] = true;
-
-    var component = this.refs[key];
-
-    if (component.componentWillEnter) {
-      component.componentWillEnter(
-        this._handleDoneEntering.bind(this, key)
-      );
-    } else {
-      this._handleDoneEntering(key);
-    }
-  },
-
-  _handleDoneEntering: function(key) {
-    var component = this.refs[key];
-    if (component.componentDidEnter) {
-      component.componentDidEnter();
-    }
-
-    delete this.currentlyTransitioningKeys[key];
-
-    var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
-      this.props.children
-    );
-
-    if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
-      // This was removed before it had fully entered. Remove it.
-      this.performLeave(key);
-    }
-  },
-
-  performLeave: function(key) {
-    this.currentlyTransitioningKeys[key] = true;
-
-    var component = this.refs[key];
-    if (component.componentWillLeave) {
-      component.componentWillLeave(this._handleDoneLeaving.bind(this, key));
-    } else {
-      // Note that this is somewhat dangerous b/c it calls setState()
-      // again, effectively mutating the component before all the work
-      // is done.
-      this._handleDoneLeaving(key);
-    }
-  },
-
-  _handleDoneLeaving: function(key) {
-    var component = this.refs[key];
-
-    if (component.componentDidLeave) {
-      component.componentDidLeave();
-    }
-
-    delete this.currentlyTransitioningKeys[key];
-
-    var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
-      this.props.children
-    );
-
-    if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) {
-      // This entered again before it fully left. Add it again.
-      this.performEnter(key);
-    } else {
-      var newChildren = merge(this.state.children);
-      delete newChildren[key];
-      this.setState({children: newChildren});
-    }
-  },
-
-  render: function() {
-    // TODO: we could get rid of the need for the wrapper node
-    // by cloning a single child
-    var childrenToRender = {};
-    for (var key in this.state.children) {
-      var child = this.state.children[key];
-      if (child) {
-        // You may need to apply reactive updates to a child as it is leaving.
-        // The normal React way to do it won't work since the child will have
-        // already been removed. In case you need this behavior you can provide
-        // a childFactory function to wrap every child, even the ones that are
-        // leaving.
-        childrenToRender[key] = cloneWithProps(
-          this.props.childFactory(child),
-          {ref: key}
-        );
-      }
-    }
-    return this.props.component(this.props, childrenToRender);
-  }
-});
-
-module.exports = ReactTransitionGroup;
diff --git a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
deleted file mode 100644
index 1508927bcb1..00000000000
--- a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+++ /dev/null
@@ -1,184 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactCSSTransitionGroup;
-var mocks;
-
-// Most of the real functionality is covered in other unit tests, this just
-// makes sure we're wired up correctly.
-describe('ReactCSSTransitionGroup', function() {
-  var container;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactCSSTransitionGroup = require('ReactCSSTransitionGroup');
-    mocks = require('mocks');
-
-    container = document.createElement('div');
-  });
-
-  it('should warn after time with no transitionend', function() {
-    var a = React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        <span key="one" id="one" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-
-    setTimeout.mock.calls.length = 0;
-
-    React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        <span key="two" id="two" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(2);
-    expect(a.getDOMNode().childNodes[0].id).toBe('two');
-    expect(a.getDOMNode().childNodes[1].id).toBe('one');
-
-    console.warn = mocks.getMockFunction();
-
-    // For some reason jst is adding extra setTimeout()s and grunt test isn't,
-    // so we need to do this disgusting hack.
-    for (var i = 0 ; i < setTimeout.mock.calls.length; i++) {
-      if (setTimeout.mock.calls[i][1] === 5000) {
-        setTimeout.mock.calls[i][0]();
-        break;
-      }
-    }
-
-    expect(a.getDOMNode().childNodes.length).toBe(2);
-    expect(console.warn.mock.calls.length).toBe(1);
-  });
-
-  it('should keep both sets of DOM nodes around', function() {
-    var a = React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        <span key="one" id="one" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-    React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        <span key="two" id="two" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(2);
-    expect(a.getDOMNode().childNodes[0].id).toBe('two');
-    expect(a.getDOMNode().childNodes[1].id).toBe('one');
-  });
-
-  it('should switch transitionLeave from false to true', function() {
-    var a = React.renderComponent(
-      <ReactCSSTransitionGroup
-          transitionName="yolo"
-          transitionEnter={false}
-          transitionLeave={false}>
-        <span key="one" id="one" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-    React.renderComponent(
-      <ReactCSSTransitionGroup
-          transitionName="yolo"
-          transitionEnter={false}
-          transitionLeave={false}>
-        <span key="two" id="two" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-    React.renderComponent(
-      <ReactCSSTransitionGroup
-          transitionName="yolo"
-          transitionEnter={false}
-          transitionLeave={true}>
-        <span key="three" id="three" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(2);
-    expect(a.getDOMNode().childNodes[0].id).toBe('three');
-    expect(a.getDOMNode().childNodes[1].id).toBe('two');
-  });
-
-  it('should work with no children', function() {
-    React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-      </ReactCSSTransitionGroup>,
-      container
-    );
-  });
-
-  it('should work with a null child', function() {
-    React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        {[null]}
-      </ReactCSSTransitionGroup>,
-      container
-    );
-  });
-
-  it('should transition from one to null', function() {
-    var a = React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        <span key="one" id="one" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-    React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        {null}
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    // (Here, we expect the original child to stick around but test that no
-    // exception is thrown)
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-    expect(a.getDOMNode().childNodes[0].id).toBe('one');
-  });
-
-  it('should transition from false to one', function() {
-    var a = React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        {false}
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(0);
-    React.renderComponent(
-      <ReactCSSTransitionGroup transitionName="yolo">
-        <span key="one" id="one" />
-      </ReactCSSTransitionGroup>,
-      container
-    );
-    expect(a.getDOMNode().childNodes.length).toBe(1);
-    expect(a.getDOMNode().childNodes[0].id).toBe('one');
-  });
-
-});
diff --git a/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js b/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js
deleted file mode 100644
index 4ca30010127..00000000000
--- a/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTransitionChildMapping;
-
-describe('ReactTransitionChildMapping', function() {
-  beforeEach(function() {
-    React = require('React');
-    ReactTransitionChildMapping = require('ReactTransitionChildMapping');
-  });
-
-  it('should support getChildMapping', function() {
-    var oneone = <div key="oneone" />;
-    var onetwo = <div key="onetwo" />;
-    var one = <div key="one">{oneone}{onetwo}</div>;
-    var two = <div key="two" />;
-    var component = <div>{one}{two}</div>;
-    expect(
-      ReactTransitionChildMapping.getChildMapping(component.props.children)
-    ).toEqual({
-      '.$one': one,
-      '.$two': two
-    });
-  });
-
-  it('should support mergeChildMappings for adding keys', function() {
-    var prev = {
-      one: true,
-      two: true
-    };
-    var next = {
-      one: true,
-      two: true,
-      three: true
-    };
-    expect(ReactTransitionChildMapping.mergeChildMappings(prev, next)).toEqual({
-      one: true,
-      two: true,
-      three: true
-    });
-  });
-
-  it('should support mergeChildMappings for removing keys', function() {
-    var prev = {
-      one: true,
-      two: true,
-      three: true
-    };
-    var next = {
-      one: true,
-      two: true
-    };
-    expect(ReactTransitionChildMapping.mergeChildMappings(prev, next)).toEqual({
-      one: true,
-      two: true,
-      three: true
-    });
-  });
-
-  it('should support mergeChildMappings for adding and removing', function() {
-    var prev = {
-      one: true,
-      two: true,
-      three: true
-    };
-    var next = {
-      one: true,
-      two: true,
-      four: true
-    };
-    expect(ReactTransitionChildMapping.mergeChildMappings(prev, next)).toEqual({
-      one: true,
-      two: true,
-      three: true,
-      four: true
-    });
-  });
-
-  it('should reconcile overlapping insertions and deletions', function() {
-    var prev = {
-      one: true,
-      two: true,
-      four: true,
-      five: true
-    };
-    var next = {
-      one: true,
-      two: true,
-      three: true,
-      five: true
-    };
-    expect(ReactTransitionChildMapping.mergeChildMappings(prev, next)).toEqual({
-      one: true,
-      two: true,
-      three: true,
-      four: true,
-      five: true
-    });
-  });
-
-  it('should support mergeChildMappings with undefined input', function() {
-    var prev = {
-      one: true,
-      two: true
-    };
-
-    var next = undefined;
-
-    expect(ReactTransitionChildMapping.mergeChildMappings(prev, next)).toEqual({
-      one: true,
-      two: true
-    });
-
-    prev = undefined;
-
-    next = {
-      three: true,
-      four: true
-    };
-
-    expect(ReactTransitionChildMapping.mergeChildMappings(prev, next)).toEqual({
-      three: true,
-      four: true
-    });
-  });
-});
diff --git a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
deleted file mode 100644
index ab42f35a64d..00000000000
--- a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTransitionGroup;
-var mocks;
-
-// Most of the real functionality is covered in other unit tests, this just
-// makes sure we're wired up correctly.
-describe('ReactTransitionGroup', function() {
-  var container;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTransitionGroup = require('ReactTransitionGroup');
-    mocks = require('mocks');
-
-    container = document.createElement('div');
-  });
-
-
-  it('should handle willEnter correctly', function() {
-    var log = [];
-
-    var Child = React.createClass({
-      componentDidMount: function() {
-        log.push('didMount');
-      },
-      componentWillEnter: function(cb) {
-        log.push('willEnter');
-        cb();
-      },
-      componentDidEnter: function() {
-        log.push('didEnter');
-      },
-      componentWillLeave: function(cb) {
-        log.push('willLeave');
-        cb();
-      },
-      componentDidLeave: function() {
-        log.push('didLeave');
-      },
-      componentWillUnmount: function() {
-        log.push('willUnmount');
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
-        var children = [];
-        for (var i = 0; i < this.state.count; i++) {
-          children.push(<Child key={i} />);
-        }
-        return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      }
-    });
-
-    var instance = React.renderComponent(<Component />, container);
-    expect(log).toEqual(['didMount']);
-
-    instance.setState({count: 2}, function() {
-      expect(log).toEqual(['didMount', 'didMount', 'willEnter', 'didEnter']);
-      instance.setState({count: 1}, function() {
-        expect(log).toEqual([
-          "didMount", "didMount", "willEnter", "didEnter",
-          "willLeave", "didLeave", "willUnmount"
-        ]);
-      });
-    });
-  });
-
-  it('should handle enter/leave/enter/leave correctly', function() {
-    var log = [];
-    var cb;
-
-    var Child = React.createClass({
-      componentDidMount: function() {
-        log.push('didMount');
-      },
-      componentWillEnter: function(_cb) {
-        log.push('willEnter');
-        cb = _cb;
-      },
-      componentDidEnter: function() {
-        log.push('didEnter');
-      },
-      componentWillLeave: function(cb) {
-        log.push('willLeave');
-        cb();
-      },
-      componentDidLeave: function() {
-        log.push('didLeave');
-      },
-      componentWillUnmount: function() {
-        log.push('willUnmount');
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
-        var children = [];
-        for (var i = 0; i < this.state.count; i++) {
-          children.push(<Child key={i} />);
-        }
-        return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      }
-    });
-
-    var instance = React.renderComponent(<Component />, container);
-    expect(log).toEqual(['didMount']);
-    instance.setState({count: 2});
-    expect(log).toEqual(['didMount', 'didMount', 'willEnter']);
-    for (var i = 0; i < 5; i++) {
-      instance.setState({count: 2});
-      expect(log).toEqual(['didMount', 'didMount', 'willEnter']);
-      instance.setState({count: 1});
-    }
-    cb();
-    expect(log).toEqual([
-      'didMount', 'didMount', 'willEnter',
-      'didEnter', 'willLeave', 'didLeave', 'willUnmount'
-    ]);
-  });
-
-  it('should handle enter/leave/enter correctly', function() {
-    var log = [];
-    var cb;
-
-    var Child = React.createClass({
-      componentDidMount: function() {
-        log.push('didMount');
-      },
-      componentWillEnter: function(_cb) {
-        log.push('willEnter');
-        cb = _cb;
-      },
-      componentDidEnter: function() {
-        log.push('didEnter');
-      },
-      componentWillLeave: function(cb) {
-        log.push('willLeave');
-        cb();
-      },
-      componentDidLeave: function() {
-        log.push('didLeave');
-      },
-      componentWillUnmount: function() {
-        log.push('willUnmount');
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
-        var children = [];
-        for (var i = 0; i < this.state.count; i++) {
-          children.push(<Child key={i} />);
-        }
-        return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      }
-    });
-
-    var instance = React.renderComponent(<Component />, container);
-    expect(log).toEqual(['didMount']);
-    instance.setState({count: 2});
-    expect(log).toEqual(['didMount', 'didMount', 'willEnter']);
-    for (var i = 0; i < 5; i++) {
-      instance.setState({count: 1});
-      expect(log).toEqual(['didMount', 'didMount', 'willEnter']);
-      instance.setState({count: 2});
-    }
-    cb();
-    expect(log).toEqual([
-      'didMount', 'didMount', 'willEnter', 'didEnter'
-    ]);
-  });
-});
diff --git a/src/addons/update.js b/src/addons/update.js
deleted file mode 100644
index 43ec8dd53f8..00000000000
--- a/src/addons/update.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule update
- */
-
-"use strict";
-
-var copyProperties = require('copyProperties');
-var keyOf = require('keyOf');
-var invariant = require('invariant');
-
-function shallowCopy(x) {
-  if (Array.isArray(x)) {
-    return x.concat();
-  } else if (x && typeof x === 'object') {
-    return copyProperties(new x.constructor(), x);
-  } else {
-    return x;
-  }
-}
-
-var COMMAND_PUSH = keyOf({$push: null});
-var COMMAND_UNSHIFT = keyOf({$unshift: null});
-var COMMAND_SPLICE = keyOf({$splice: null});
-var COMMAND_SET = keyOf({$set: null});
-var COMMAND_MERGE = keyOf({$merge: null});
-var COMMAND_APPLY = keyOf({$apply: null});
-
-var ALL_COMMANDS_LIST = [
-  COMMAND_PUSH,
-  COMMAND_UNSHIFT,
-  COMMAND_SPLICE,
-  COMMAND_SET,
-  COMMAND_MERGE,
-  COMMAND_APPLY
-];
-
-var ALL_COMMANDS_SET = {};
-
-ALL_COMMANDS_LIST.forEach(function(command) {
-  ALL_COMMANDS_SET[command] = true;
-});
-
-function invariantArrayCase(value, spec, command) {
-  invariant(
-    Array.isArray(value),
-    'update(): expected target of %s to be an array; got %s.',
-    command,
-    value
-  );
-  var specValue = spec[command];
-  invariant(
-    Array.isArray(specValue),
-    'update(): expected spec of %s to be an array; got %s. ' +
-    'Did you forget to wrap your parameter in an array?',
-    command,
-    specValue
-  );
-}
-
-function update(value, spec) {
-  invariant(
-    typeof spec === 'object',
-    'update(): You provided a key path to update() that did not contain one ' +
-    'of %s. Did you forget to include {%s: ...}?',
-    ALL_COMMANDS_LIST.join(', '),
-    COMMAND_SET
-  );
-
-  if (spec.hasOwnProperty(COMMAND_SET)) {
-    invariant(
-      Object.keys(spec).length === 1,
-      'Cannot have more than one key in an object with %s',
-      COMMAND_SET
-    );
-
-    return spec[COMMAND_SET];
-  }
-
-  var nextValue = shallowCopy(value);
-
-  if (spec.hasOwnProperty(COMMAND_MERGE)) {
-    var mergeObj = spec[COMMAND_MERGE];
-    invariant(
-      mergeObj && typeof mergeObj === 'object',
-      'update(): %s expects a spec of type \'object\'; got %s',
-      COMMAND_MERGE,
-      mergeObj
-    );
-    invariant(
-      nextValue && typeof nextValue === 'object',
-      'update(): %s expects a target of type \'object\'; got %s',
-      COMMAND_MERGE,
-      nextValue
-    );
-    copyProperties(nextValue, spec[COMMAND_MERGE]);
-  }
-
-  if (spec.hasOwnProperty(COMMAND_PUSH)) {
-    invariantArrayCase(value, spec, COMMAND_PUSH);
-    spec[COMMAND_PUSH].forEach(function(item) {
-      nextValue.push(item);
-    });
-  }
-
-  if (spec.hasOwnProperty(COMMAND_UNSHIFT)) {
-    invariantArrayCase(value, spec, COMMAND_UNSHIFT);
-    spec[COMMAND_UNSHIFT].forEach(function(item) {
-      nextValue.unshift(item);
-    });
-  }
-
-  if (spec.hasOwnProperty(COMMAND_SPLICE)) {
-    invariant(
-      Array.isArray(value),
-      'Expected %s target to be an array; got %s',
-      COMMAND_SPLICE,
-      value
-    );
-    invariant(
-      Array.isArray(spec[COMMAND_SPLICE]),
-      'update(): expected spec of %s to be an array of arrays; got %s. ' +
-      'Did you forget to wrap your parameters in an array?',
-      COMMAND_SPLICE,
-      spec[COMMAND_SPLICE]
-    );
-    spec[COMMAND_SPLICE].forEach(function(args) {
-      invariant(
-        Array.isArray(args),
-        'update(): expected spec of %s to be an array of arrays; got %s. ' +
-        'Did you forget to wrap your parameters in an array?',
-        COMMAND_SPLICE,
-        spec[COMMAND_SPLICE]
-      );
-      nextValue.splice.apply(nextValue, args);
-    });
-  }
-
-  if (spec.hasOwnProperty(COMMAND_APPLY)) {
-    invariant(
-      typeof spec[COMMAND_APPLY] === 'function',
-      'update(): expected spec of %s to be a function; got %s.',
-      COMMAND_APPLY,
-      spec[COMMAND_APPLY]
-    );
-    nextValue = spec[COMMAND_APPLY](nextValue);
-  }
-
-  for (var k in spec) {
-    if (!(ALL_COMMANDS_SET.hasOwnProperty(k) && ALL_COMMANDS_SET[k])) {
-      nextValue[k] = update(value[k], spec[k]);
-    }
-  }
-
-  return nextValue;
-}
-
-module.exports = update;
diff --git a/src/browser/ClientReactRootIndex.js b/src/browser/ClientReactRootIndex.js
deleted file mode 100644
index 9ae878b6b36..00000000000
--- a/src/browser/ClientReactRootIndex.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ClientReactRootIndex
- * @typechecks
- */
-
-"use strict";
-
-var nextReactRootIndex = 0;
-
-var ClientReactRootIndex = {
-  createReactRootIndex: function() {
-    return nextReactRootIndex++;
-  }
-};
-
-module.exports = ClientReactRootIndex;
diff --git a/src/browser/ReactBrowserEventEmitter.js b/src/browser/ReactBrowserEventEmitter.js
deleted file mode 100644
index 677b0769863..00000000000
--- a/src/browser/ReactBrowserEventEmitter.js
+++ /dev/null
@@ -1,360 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactBrowserEventEmitter
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginHub = require('EventPluginHub');
-var EventPluginRegistry = require('EventPluginRegistry');
-var ReactEventEmitterMixin = require('ReactEventEmitterMixin');
-var ViewportMetrics = require('ViewportMetrics');
-
-var isEventSupported = require('isEventSupported');
-var merge = require('merge');
-
-/**
- * Summary of `ReactBrowserEventEmitter` event handling:
- *
- *  - Top-level delegation is used to trap most native browser events. This
- *    may only occur in the main thread and is the responsibility of
- *    ReactEventListener, which is injected and can therefore support pluggable
- *    event sources. This is the only work that occurs in the main thread.
- *
- *  - We normalize and de-duplicate events to account for browser quirks. This
- *    may be done in the worker thread.
- *
- *  - Forward these native events (with the associated top-level type used to
- *    trap it) to `EventPluginHub`, which in turn will ask plugins if they want
- *    to extract any synthetic events.
- *
- *  - The `EventPluginHub` will then process each event by annotating them with
- *    "dispatches", a sequence of listeners and IDs that care about that event.
- *
- *  - The `EventPluginHub` then dispatches the events.
- *
- * Overview of React and the event system:
- *
- * +------------+    .
- * |    DOM     |    .
- * +------------+    .
- *       |           .
- *       v           .
- * +------------+    .
- * | ReactEvent |    .
- * |  Listener  |    .
- * +------------+    .                         +-----------+
- *       |           .               +--------+|SimpleEvent|
- *       |           .               |         |Plugin     |
- * +-----|------+    .               v         +-----------+
- * |     |      |    .    +--------------+                    +------------+
- * |     +-----------.--->|EventPluginHub|                    |    Event   |
- * |            |    .    |              |     +-----------+  | Propagators|
- * | ReactEvent |    .    |              |     |TapEvent   |  |------------|
- * |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
- * |            |    .    |              |     +-----------+  |  utilities |
- * |     +-----------.--->|              |                    +------------+
- * |     |      |    .    +--------------+
- * +-----|------+    .                ^        +-----------+
- *       |           .                |        |Enter/Leave|
- *       +           .                +-------+|Plugin     |
- * +-------------+   .                         +-----------+
- * | application |   .
- * |-------------|   .
- * |             |   .
- * |             |   .
- * +-------------+   .
- *                   .
- *    React Core     .  General Purpose Event Plugin System
- */
-
-var alreadyListeningTo = {};
-var isMonitoringScrollValue = false;
-var reactTopListenersCounter = 0;
-
-// For events like 'submit' which don't consistently bubble (which we trap at a
-// lower node than `document`), binding at `document` would cause duplicate
-// events so we don't include them here
-var topEventMapping = {
-  topBlur: 'blur',
-  topChange: 'change',
-  topClick: 'click',
-  topCompositionEnd: 'compositionend',
-  topCompositionStart: 'compositionstart',
-  topCompositionUpdate: 'compositionupdate',
-  topContextMenu: 'contextmenu',
-  topCopy: 'copy',
-  topCut: 'cut',
-  topDoubleClick: 'dblclick',
-  topDrag: 'drag',
-  topDragEnd: 'dragend',
-  topDragEnter: 'dragenter',
-  topDragExit: 'dragexit',
-  topDragLeave: 'dragleave',
-  topDragOver: 'dragover',
-  topDragStart: 'dragstart',
-  topDrop: 'drop',
-  topFocus: 'focus',
-  topInput: 'input',
-  topKeyDown: 'keydown',
-  topKeyPress: 'keypress',
-  topKeyUp: 'keyup',
-  topMouseDown: 'mousedown',
-  topMouseMove: 'mousemove',
-  topMouseOut: 'mouseout',
-  topMouseOver: 'mouseover',
-  topMouseUp: 'mouseup',
-  topPaste: 'paste',
-  topScroll: 'scroll',
-  topSelectionChange: 'selectionchange',
-  topTextInput: 'textInput',
-  topTouchCancel: 'touchcancel',
-  topTouchEnd: 'touchend',
-  topTouchMove: 'touchmove',
-  topTouchStart: 'touchstart',
-  topWheel: 'wheel'
-};
-
-/**
- * To ensure no conflicts with other potential React instances on the page
- */
-var topListenersIDKey = "_reactListenersID" + String(Math.random()).slice(2);
-
-function getListeningForDocument(mountAt) {
-  // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
-  // directly.
-  if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
-    mountAt[topListenersIDKey] = reactTopListenersCounter++;
-    alreadyListeningTo[mountAt[topListenersIDKey]] = {};
-  }
-  return alreadyListeningTo[mountAt[topListenersIDKey]];
-}
-
-/**
- * `ReactBrowserEventEmitter` is used to attach top-level event listeners. For
- * example:
- *
- *   ReactBrowserEventEmitter.putListener('myID', 'onClick', myFunction);
- *
- * This would allocate a "registration" of `('onClick', myFunction)` on 'myID'.
- *
- * @internal
- */
-var ReactBrowserEventEmitter = merge(ReactEventEmitterMixin, {
-
-  /**
-   * Injectable event backend
-   */
-  ReactEventListener: null,
-
-  injection: {
-    /**
-     * @param {object} ReactEventListener
-     */
-    injectReactEventListener: function(ReactEventListener) {
-      ReactEventListener.setHandleTopLevel(
-        ReactBrowserEventEmitter.handleTopLevel
-      );
-      ReactBrowserEventEmitter.ReactEventListener = ReactEventListener;
-    }
-  },
-
-  /**
-   * Sets whether or not any created callbacks should be enabled.
-   *
-   * @param {boolean} enabled True if callbacks should be enabled.
-   */
-  setEnabled: function(enabled) {
-    if (ReactBrowserEventEmitter.ReactEventListener) {
-      ReactBrowserEventEmitter.ReactEventListener.setEnabled(enabled);
-    }
-  },
-
-  /**
-   * @return {boolean} True if callbacks are enabled.
-   */
-  isEnabled: function() {
-    return !!(
-      ReactBrowserEventEmitter.ReactEventListener &&
-      ReactBrowserEventEmitter.ReactEventListener.isEnabled()
-    );
-  },
-
-  /**
-   * We listen for bubbled touch events on the document object.
-   *
-   * Firefox v8.01 (and possibly others) exhibited strange behavior when
-   * mounting `onmousemove` events at some node that was not the document
-   * element. The symptoms were that if your mouse is not moving over something
-   * contained within that mount point (for example on the background) the
-   * top-level listeners for `onmousemove` won't be called. However, if you
-   * register the `mousemove` on the document object, then it will of course
-   * catch all `mousemove`s. This along with iOS quirks, justifies restricting
-   * top-level listeners to the document object only, at least for these
-   * movement types of events and possibly all events.
-   *
-   * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
-   *
-   * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
-   * they bubble to document.
-   *
-   * @param {string} registrationName Name of listener (e.g. `onClick`).
-   * @param {object} contentDocumentHandle Document which owns the container
-   */
-  listenTo: function(registrationName, contentDocumentHandle) {
-    var mountAt = contentDocumentHandle;
-    var isListening = getListeningForDocument(mountAt);
-    var dependencies = EventPluginRegistry.
-      registrationNameDependencies[registrationName];
-
-    var topLevelTypes = EventConstants.topLevelTypes;
-    for (var i = 0, l = dependencies.length; i < l; i++) {
-      var dependency = dependencies[i];
-      if (!(
-            isListening.hasOwnProperty(dependency) &&
-            isListening[dependency]
-          )) {
-        if (dependency === topLevelTypes.topWheel) {
-          if (isEventSupported('wheel')) {
-            ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-              topLevelTypes.topWheel,
-              'wheel',
-              mountAt
-            );
-          } else if (isEventSupported('mousewheel')) {
-            ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-              topLevelTypes.topWheel,
-              'mousewheel',
-              mountAt
-            );
-          } else {
-            // Firefox needs to capture a different mouse scroll event.
-            // @see http://www.quirksmode.org/dom/events/tests/scroll.html
-            ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-              topLevelTypes.topWheel,
-              'DOMMouseScroll',
-              mountAt
-            );
-          }
-        } else if (dependency === topLevelTypes.topScroll) {
-
-          if (isEventSupported('scroll', true)) {
-            ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
-              topLevelTypes.topScroll,
-              'scroll',
-              mountAt
-            );
-          } else {
-            ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-              topLevelTypes.topScroll,
-              'scroll',
-              ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE
-            );
-          }
-        } else if (dependency === topLevelTypes.topFocus ||
-            dependency === topLevelTypes.topBlur) {
-
-          if (isEventSupported('focus', true)) {
-            ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
-              topLevelTypes.topFocus,
-              'focus',
-              mountAt
-            );
-            ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
-              topLevelTypes.topBlur,
-              'blur',
-              mountAt
-            );
-          } else if (isEventSupported('focusin')) {
-            // IE has `focusin` and `focusout` events which bubble.
-            // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
-            ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-              topLevelTypes.topFocus,
-              'focusin',
-              mountAt
-            );
-            ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-              topLevelTypes.topBlur,
-              'focusout',
-              mountAt
-            );
-          }
-
-          // to make sure blur and focus event listeners are only attached once
-          isListening[topLevelTypes.topBlur] = true;
-          isListening[topLevelTypes.topFocus] = true;
-        } else if (topEventMapping.hasOwnProperty(dependency)) {
-          ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-            dependency,
-            topEventMapping[dependency],
-            mountAt
-          );
-        }
-
-        isListening[dependency] = true;
-      }
-    }
-  },
-
-  trapBubbledEvent: function(topLevelType, handlerBaseName, handle) {
-    return ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
-      topLevelType,
-      handlerBaseName,
-      handle
-    );
-  },
-
-  trapCapturedEvent: function(topLevelType, handlerBaseName, handle) {
-    return ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
-      topLevelType,
-      handlerBaseName,
-      handle
-    );
-  },
-
-  /**
-   * Listens to window scroll and resize events. We cache scroll values so that
-   * application code can access them without triggering reflows.
-   *
-   * NOTE: Scroll events do not bubble.
-   *
-   * @see http://www.quirksmode.org/dom/events/scroll.html
-   */
-  ensureScrollValueMonitoring: function(){
-    if (!isMonitoringScrollValue) {
-      var refresh = ViewportMetrics.refreshScrollValues;
-      ReactBrowserEventEmitter.ReactEventListener.monitorScrollValue(refresh);
-      isMonitoringScrollValue = true;
-    }
-  },
-
-  eventNameDispatchConfigs: EventPluginHub.eventNameDispatchConfigs,
-
-  registrationNameModules: EventPluginHub.registrationNameModules,
-
-  putListener: EventPluginHub.putListener,
-
-  getListener: EventPluginHub.getListener,
-
-  deleteListener: EventPluginHub.deleteListener,
-
-  deleteAllListeners: EventPluginHub.deleteAllListeners
-
-});
-
-module.exports = ReactBrowserEventEmitter;
diff --git a/src/browser/ReactDOM.js b/src/browser/ReactDOM.js
deleted file mode 100644
index 306a6022548..00000000000
--- a/src/browser/ReactDOM.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOM
- * @typechecks static-only
- */
-
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-var ReactDescriptorValidator = require('ReactDescriptorValidator');
-var ReactLegacyDescriptor = require('ReactLegacyDescriptor');
-var ReactDOMComponent = require('ReactDOMComponent');
-
-var mergeInto = require('mergeInto');
-var mapObject = require('mapObject');
-
-/**
- * Creates a new React class that is idempotent and capable of containing other
- * React components. It accepts event listeners and DOM properties that are
- * valid according to `DOMProperty`.
- *
- *  - Event listeners: `onClick`, `onMouseDown`, etc.
- *  - DOM properties: `className`, `name`, `title`, etc.
- *
- * The `style` property functions differently from the DOM API. It accepts an
- * object mapping of style properties to values.
- *
- * @param {boolean} omitClose True if the close tag should be omitted.
- * @param {string} tag Tag name (e.g. `div`).
- * @private
- */
-function createDOMComponentClass(omitClose, tag) {
-  var Constructor = function(descriptor) {
-    this.construct(descriptor);
-  };
-  Constructor.prototype = new ReactDOMComponent(tag, omitClose);
-  Constructor.prototype.constructor = Constructor;
-  Constructor.displayName = tag;
-
-  if (__DEV__) {
-    return ReactLegacyDescriptor.wrapFactory(
-      ReactDescriptorValidator.createFactory(Constructor)
-    );
-  }
-  return ReactLegacyDescriptor.wrapFactory(
-    ReactDescriptor.createFactory(Constructor)
-  );
-}
-
-/**
- * Creates a mapping from supported HTML tags to `ReactDOMComponent` classes.
- * This is also accessible via `React.DOM`.
- *
- * @public
- */
-var ReactDOM = mapObject({
-  a: false,
-  abbr: false,
-  address: false,
-  area: true,
-  article: false,
-  aside: false,
-  audio: false,
-  b: false,
-  base: true,
-  bdi: false,
-  bdo: false,
-  big: false,
-  blockquote: false,
-  body: false,
-  br: true,
-  button: false,
-  canvas: false,
-  caption: false,
-  cite: false,
-  code: false,
-  col: true,
-  colgroup: false,
-  data: false,
-  datalist: false,
-  dd: false,
-  del: false,
-  details: false,
-  dfn: false,
-  div: false,
-  dl: false,
-  dt: false,
-  em: false,
-  embed: true,
-  fieldset: false,
-  figcaption: false,
-  figure: false,
-  footer: false,
-  form: false, // NOTE: Injected, see `ReactDOMForm`.
-  h1: false,
-  h2: false,
-  h3: false,
-  h4: false,
-  h5: false,
-  h6: false,
-  head: false,
-  header: false,
-  hr: true,
-  html: false,
-  i: false,
-  iframe: false,
-  img: true,
-  input: true,
-  ins: false,
-  kbd: false,
-  keygen: true,
-  label: false,
-  legend: false,
-  li: false,
-  link: true,
-  main: false,
-  map: false,
-  mark: false,
-  menu: false,
-  menuitem: false, // NOTE: Close tag should be omitted, but causes problems.
-  meta: true,
-  meter: false,
-  nav: false,
-  noscript: false,
-  object: false,
-  ol: false,
-  optgroup: false,
-  option: false,
-  output: false,
-  p: false,
-  param: true,
-  pre: false,
-  progress: false,
-  q: false,
-  rp: false,
-  rt: false,
-  ruby: false,
-  s: false,
-  samp: false,
-  script: false,
-  section: false,
-  select: false,
-  small: false,
-  source: true,
-  span: false,
-  strong: false,
-  style: false,
-  sub: false,
-  summary: false,
-  sup: false,
-  table: false,
-  tbody: false,
-  td: false,
-  textarea: false, // NOTE: Injected, see `ReactDOMTextarea`.
-  tfoot: false,
-  th: false,
-  thead: false,
-  time: false,
-  title: false,
-  tr: false,
-  track: true,
-  u: false,
-  ul: false,
-  'var': false,
-  video: false,
-  wbr: true,
-
-  // SVG
-  circle: false,
-  defs: false,
-  ellipse: false,
-  g: false,
-  line: false,
-  linearGradient: false,
-  mask: false,
-  path: false,
-  pattern: false,
-  polygon: false,
-  polyline: false,
-  radialGradient: false,
-  rect: false,
-  stop: false,
-  svg: false,
-  text: false,
-  tspan: false
-}, createDOMComponentClass);
-
-var injection = {
-  injectComponentClasses: function(componentClasses) {
-    mergeInto(ReactDOM, componentClasses);
-  }
-};
-
-ReactDOM.injection = injection;
-
-module.exports = ReactDOM;
diff --git a/src/browser/ReactPutListenerQueue.js b/src/browser/ReactPutListenerQueue.js
deleted file mode 100644
index 0e2500e4996..00000000000
--- a/src/browser/ReactPutListenerQueue.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactPutListenerQueue
- */
-
-"use strict";
-
-var PooledClass = require('PooledClass');
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-
-var mixInto = require('mixInto');
-
-function ReactPutListenerQueue() {
-  this.listenersToPut = [];
-}
-
-mixInto(ReactPutListenerQueue, {
-  enqueuePutListener: function(rootNodeID, propKey, propValue) {
-    this.listenersToPut.push({
-      rootNodeID: rootNodeID,
-      propKey: propKey,
-      propValue: propValue
-    });
-  },
-
-  putListeners: function() {
-    for (var i = 0; i < this.listenersToPut.length; i++) {
-      var listenerToPut = this.listenersToPut[i];
-      ReactBrowserEventEmitter.putListener(
-        listenerToPut.rootNodeID,
-        listenerToPut.propKey,
-        listenerToPut.propValue
-      );
-    }
-  },
-
-  reset: function() {
-    this.listenersToPut.length = 0;
-  },
-
-  destructor: function() {
-    this.reset();
-  }
-});
-
-PooledClass.addPoolingTo(ReactPutListenerQueue);
-
-module.exports = ReactPutListenerQueue;
diff --git a/src/browser/ReactReconcileTransaction.js b/src/browser/ReactReconcileTransaction.js
deleted file mode 100644
index e4ac1ffa020..00000000000
--- a/src/browser/ReactReconcileTransaction.js
+++ /dev/null
@@ -1,182 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactReconcileTransaction
- * @typechecks static-only
- */
-
-"use strict";
-
-var CallbackQueue = require('CallbackQueue');
-var PooledClass = require('PooledClass');
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-var ReactInputSelection = require('ReactInputSelection');
-var ReactPutListenerQueue = require('ReactPutListenerQueue');
-var Transaction = require('Transaction');
-
-var mixInto = require('mixInto');
-
-/**
- * Ensures that, when possible, the selection range (currently selected text
- * input) is not disturbed by performing the transaction.
- */
-var SELECTION_RESTORATION = {
-  /**
-   * @return {Selection} Selection information.
-   */
-  initialize: ReactInputSelection.getSelectionInformation,
-  /**
-   * @param {Selection} sel Selection information returned from `initialize`.
-   */
-  close: ReactInputSelection.restoreSelection
-};
-
-/**
- * Suppresses events (blur/focus) that could be inadvertently dispatched due to
- * high level DOM manipulations (like temporarily removing a text input from the
- * DOM).
- */
-var EVENT_SUPPRESSION = {
-  /**
-   * @return {boolean} The enabled status of `ReactBrowserEventEmitter` before
-   * the reconciliation.
-   */
-  initialize: function() {
-    var currentlyEnabled = ReactBrowserEventEmitter.isEnabled();
-    ReactBrowserEventEmitter.setEnabled(false);
-    return currentlyEnabled;
-  },
-
-  /**
-   * @param {boolean} previouslyEnabled Enabled status of
-   *   `ReactBrowserEventEmitter` before the reconciliation occured. `close`
-   *   restores the previous value.
-   */
-  close: function(previouslyEnabled) {
-    ReactBrowserEventEmitter.setEnabled(previouslyEnabled);
-  }
-};
-
-/**
- * Provides a queue for collecting `componentDidMount` and
- * `componentDidUpdate` callbacks during the the transaction.
- */
-var ON_DOM_READY_QUEUEING = {
-  /**
-   * Initializes the internal `onDOMReady` queue.
-   */
-  initialize: function() {
-    this.reactMountReady.reset();
-  },
-
-  /**
-   * After DOM is flushed, invoke all registered `onDOMReady` callbacks.
-   */
-  close: function() {
-    this.reactMountReady.notifyAll();
-  }
-};
-
-var PUT_LISTENER_QUEUEING = {
-  initialize: function() {
-    this.putListenerQueue.reset();
-  },
-
-  close: function() {
-    this.putListenerQueue.putListeners();
-  }
-};
-
-/**
- * Executed within the scope of the `Transaction` instance. Consider these as
- * being member methods, but with an implied ordering while being isolated from
- * each other.
- */
-var TRANSACTION_WRAPPERS = [
-  PUT_LISTENER_QUEUEING,
-  SELECTION_RESTORATION,
-  EVENT_SUPPRESSION,
-  ON_DOM_READY_QUEUEING
-];
-
-/**
- * Currently:
- * - The order that these are listed in the transaction is critical:
- * - Suppresses events.
- * - Restores selection range.
- *
- * Future:
- * - Restore document/overflow scroll positions that were unintentionally
- *   modified via DOM insertions above the top viewport boundary.
- * - Implement/integrate with customized constraint based layout system and keep
- *   track of which dimensions must be remeasured.
- *
- * @class ReactReconcileTransaction
- */
-function ReactReconcileTransaction() {
-  this.reinitializeTransaction();
-  // Only server-side rendering really needs this option (see
-  // `ReactServerRendering`), but server-side uses
-  // `ReactServerRenderingTransaction` instead. This option is here so that it's
-  // accessible and defaults to false when `ReactDOMComponent` and
-  // `ReactTextComponent` checks it in `mountComponent`.`
-  this.renderToStaticMarkup = false;
-  this.reactMountReady = CallbackQueue.getPooled(null);
-  this.putListenerQueue = ReactPutListenerQueue.getPooled();
-}
-
-var Mixin = {
-  /**
-   * @see Transaction
-   * @abstract
-   * @final
-   * @return {array<object>} List of operation wrap proceedures.
-   *   TODO: convert to array<TransactionWrapper>
-   */
-  getTransactionWrappers: function() {
-    return TRANSACTION_WRAPPERS;
-  },
-
-  /**
-   * @return {object} The queue to collect `onDOMReady` callbacks with.
-   */
-  getReactMountReady: function() {
-    return this.reactMountReady;
-  },
-
-  getPutListenerQueue: function() {
-    return this.putListenerQueue;
-  },
-
-  /**
-   * `PooledClass` looks for this, and will invoke this before allowing this
-   * instance to be resused.
-   */
-  destructor: function() {
-    CallbackQueue.release(this.reactMountReady);
-    this.reactMountReady = null;
-
-    ReactPutListenerQueue.release(this.putListenerQueue);
-    this.putListenerQueue = null;
-  }
-};
-
-
-mixInto(ReactReconcileTransaction, Transaction.Mixin);
-mixInto(ReactReconcileTransaction, Mixin);
-
-PooledClass.addPoolingTo(ReactReconcileTransaction);
-
-module.exports = ReactReconcileTransaction;
diff --git a/src/browser/ReactTextComponent.js b/src/browser/ReactTextComponent.js
deleted file mode 100644
index 24ea723729d..00000000000
--- a/src/browser/ReactTextComponent.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactTextComponent
- * @typechecks static-only
- */
-
-"use strict";
-
-var DOMPropertyOperations = require('DOMPropertyOperations');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactComponent = require('ReactComponent');
-var ReactDescriptor = require('ReactDescriptor');
-
-var escapeTextForBrowser = require('escapeTextForBrowser');
-var mixInto = require('mixInto');
-
-/**
- * Text nodes violate a couple assumptions that React makes about components:
- *
- *  - When mounting text into the DOM, adjacent text nodes are merged.
- *  - Text nodes cannot be assigned a React root ID.
- *
- * This component is used to wrap strings in elements so that they can undergo
- * the same reconciliation that is applied to elements.
- *
- * TODO: Investigate representing React components in the DOM with text nodes.
- *
- * @class ReactTextComponent
- * @extends ReactComponent
- * @internal
- */
-var ReactTextComponent = function(descriptor) {
-  this.construct(descriptor);
-};
-
-mixInto(ReactTextComponent, ReactComponent.Mixin);
-mixInto(ReactTextComponent, ReactBrowserComponentMixin);
-mixInto(ReactTextComponent, {
-
-  /**
-   * Creates the markup for this text node. This node is not intended to have
-   * any features besides containing text content.
-   *
-   * @param {string} rootID DOM ID of the root node.
-   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-   * @param {number} mountDepth number of components in the owner hierarchy
-   * @return {string} Markup for this text node.
-   * @internal
-   */
-  mountComponent: function(rootID, transaction, mountDepth) {
-    ReactComponent.Mixin.mountComponent.call(
-      this,
-      rootID,
-      transaction,
-      mountDepth
-    );
-
-    var escapedText = escapeTextForBrowser(this.props);
-
-    if (transaction.renderToStaticMarkup) {
-      // Normally we'd wrap this in a `span` for the reasons stated above, but
-      // since this is a situation where React won't take over (static pages),
-      // we can simply return the text as it is.
-      return escapedText;
-    }
-
-    return (
-      '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
-        escapedText +
-      '</span>'
-    );
-  },
-
-  /**
-   * Updates this component by updating the text content.
-   *
-   * @param {object} nextComponent Contains the next text content.
-   * @param {ReactReconcileTransaction} transaction
-   * @internal
-   */
-  receiveComponent: function(nextComponent, transaction) {
-    var nextProps = nextComponent.props;
-    if (nextProps !== this.props) {
-      this.props = nextProps;
-      ReactComponent.BackendIDOperations.updateTextContentByID(
-        this._rootNodeID,
-        nextProps
-      );
-    }
-  }
-
-});
-
-var ReactTextComponentFactory = function(text) {
-  // Bypass validation and configuration
-  return new ReactDescriptor(ReactTextComponent, null, null, null, null, text);
-};
-
-ReactTextComponentFactory.type = ReactTextComponent;
-
-module.exports = ReactTextComponentFactory;
diff --git a/src/browser/ReactWithAddons.js b/src/browser/ReactWithAddons.js
deleted file mode 100644
index 15f242ffee4..00000000000
--- a/src/browser/ReactWithAddons.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactWithAddons
- */
-
-/**
- * This module exists purely in the open source project, and is meant as a way
- * to create a separate standalone build of React. This build has "addons", or
- * functionality we've built and think might be useful but doesn't have a good
- * place to live inside React core.
- */
-
-"use strict";
-
-var LinkedStateMixin = require('LinkedStateMixin');
-var React = require('React');
-var ReactComponentWithPureRenderMixin =
-  require('ReactComponentWithPureRenderMixin');
-var ReactCSSTransitionGroup = require('ReactCSSTransitionGroup');
-var ReactTransitionGroup = require('ReactTransitionGroup');
-
-var cx = require('cx');
-var cloneWithProps = require('cloneWithProps');
-var update = require('update');
-
-React.addons = {
-  CSSTransitionGroup: ReactCSSTransitionGroup,
-  LinkedStateMixin: LinkedStateMixin,
-  PureRenderMixin: ReactComponentWithPureRenderMixin,
-  TransitionGroup: ReactTransitionGroup,
-
-  classSet: cx,
-  cloneWithProps: cloneWithProps,
-  update: update
-};
-
-if (__DEV__) {
-  React.addons.Perf = require('ReactDefaultPerf');
-  React.addons.TestUtils = require('ReactTestUtils');
-}
-
-module.exports = React;
-
diff --git a/src/browser/__tests__/ReactBrowserEventEmitter-test.js b/src/browser/__tests__/ReactBrowserEventEmitter-test.js
deleted file mode 100644
index 68e2ba0c9c7..00000000000
--- a/src/browser/__tests__/ReactBrowserEventEmitter-test.js
+++ /dev/null
@@ -1,447 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-require('mock-modules')
-    .dontMock('EventPluginHub')
-    .dontMock('ReactMount')
-    .dontMock('ReactBrowserEventEmitter')
-    .dontMock('ReactInstanceHandles')
-    .dontMock('EventPluginHub')
-    .dontMock('TapEventPlugin')
-    .dontMock('TouchEventUtils')
-    .dontMock('keyOf');
-
-
-var keyOf = require('keyOf');
-var mocks = require('mocks');
-
-var ReactMount = require('ReactMount');
-var idToNode = {};
-var getID = ReactMount.getID;
-var setID = function(el, id) {
-  ReactMount.setID(el, id);
-  idToNode[id] = el;
-};
-var oldGetNode = ReactMount.getNode;
-
-var EventPluginHub;
-var ReactBrowserEventEmitter;
-var ReactTestUtils;
-var TapEventPlugin;
-var EventListener;
-
-var tapMoveThreshold;
-var idCallOrder = [];
-var recordID = function(id) {
-  idCallOrder.push(id);
-};
-var recordIDAndStopPropagation = function(id, event) {
-  recordID(id);
-  event.stopPropagation();
-};
-var recordIDAndReturnFalse = function(id, event) {
-  recordID(id);
-  return false;
-};
-var LISTENER = mocks.getMockFunction();
-var ON_CLICK_KEY = keyOf({onClick: null});
-var ON_TOUCH_TAP_KEY = keyOf({onTouchTap: null});
-var ON_CHANGE_KEY = keyOf({onChange: null});
-
-
-/**
- * Since `ReactBrowserEventEmitter` is fairly well separated from the DOM, we
- * can test almost all of `ReactBrowserEventEmitter` without ever rendering
- * anything in the DOM. As long as we provide IDs that follow `React's`
- * conventional id namespace hierarchy. The only reason why we create these DOM
- * nodes is so that when we feed them into `ReactBrowserEventEmitter` (through
- * `ReactTestUtils`), the event handlers may receive a DOM node to inspect.
- */
-var CHILD = document.createElement('div');
-var PARENT = document.createElement('div');
-var GRANDPARENT = document.createElement('div');
-setID(CHILD, '.0.0.0.0');
-setID(PARENT, '.0.0.0');
-setID(GRANDPARENT, '.0.0');
-
-function registerSimpleTestHandler() {
-  ReactBrowserEventEmitter.putListener(getID(CHILD), ON_CLICK_KEY, LISTENER);
-  var listener =
-        ReactBrowserEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
-  expect(listener).toEqual(LISTENER);
-  return ReactBrowserEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
-}
-
-
-describe('ReactBrowserEventEmitter', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    LISTENER.mockClear();
-    EventPluginHub = require('EventPluginHub');
-    TapEventPlugin = require('TapEventPlugin');
-    ReactMount = require('ReactMount');
-    EventListener = require('EventListener');
-    ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-    ReactTestUtils = require('ReactTestUtils');
-    ReactMount.getNode = function(id) {
-      return idToNode[id];
-    };
-    idCallOrder = [];
-    tapMoveThreshold = TapEventPlugin.tapMoveThreshold;
-    EventPluginHub.injection.injectEventPluginsByName({
-      TapEventPlugin: TapEventPlugin
-    });
-  });
-
-  afterEach(function() {
-    ReactMount.getNode = oldGetNode;
-  });
-
-  it('should store a listener correctly', function() {
-    registerSimpleTestHandler();
-    var listener =
-          ReactBrowserEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
-    expect(listener).toBe(LISTENER);
-  });
-
-  it('should retrieve a listener correctly', function() {
-    registerSimpleTestHandler();
-    var listener =
-          ReactBrowserEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
-    expect(listener).toEqual(LISTENER);
-  });
-
-  it('should clear all handlers when asked to', function() {
-    registerSimpleTestHandler();
-    ReactBrowserEventEmitter.deleteAllListeners(getID(CHILD));
-    var listener =
-          ReactBrowserEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
-    expect(listener).toBe(undefined);
-  });
-
-  it('should invoke a simple handler registered on a node', function() {
-    registerSimpleTestHandler();
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(LISTENER.mock.calls.length).toBe(1);
-  });
-
-  it(
-    'should not invoke handlers if ReactBrowserEventEmitter is disabled',
-    function() {
-      registerSimpleTestHandler();
-      ReactBrowserEventEmitter.setEnabled(false);
-      ReactTestUtils.SimulateNative.click(CHILD);
-      expect(LISTENER.mock.calls.length).toBe(0);
-      ReactBrowserEventEmitter.setEnabled(true);
-      ReactTestUtils.SimulateNative.click(CHILD);
-      expect(LISTENER.mock.calls.length).toBe(1);
-    }
-  );
-
-  it('should bubble simply', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(CHILD))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(PARENT))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(GRANDPARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(GRANDPARENT))
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(idCallOrder.length).toBe(3);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-    expect(idCallOrder[1]).toBe(getID(PARENT));
-    expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
-  });
-
-  it('should set currentTarget', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      function(event) {
-        recordID(getID(CHILD));
-        expect(event.currentTarget).toBe(CHILD);
-      }
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_CLICK_KEY,
-      function(event) {
-        recordID(getID(PARENT));
-        expect(event.currentTarget).toBe(PARENT);
-      }
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(GRANDPARENT),
-      ON_CLICK_KEY,
-      function(event) {
-        recordID(getID(GRANDPARENT));
-        expect(event.currentTarget).toBe(GRANDPARENT);
-      }
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(idCallOrder.length).toBe(3);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-    expect(idCallOrder[1]).toBe(getID(PARENT));
-    expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
-  });
-
-  it('should support stopPropagation()', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(CHILD))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_CLICK_KEY,
-      recordIDAndStopPropagation.bind(null, getID(PARENT))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(GRANDPARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(GRANDPARENT))
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(idCallOrder.length).toBe(2);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-    expect(idCallOrder[1]).toBe(getID(PARENT));
-  });
-
-  it('should stop after first dispatch if stopPropagation', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      recordIDAndStopPropagation.bind(null, getID(CHILD))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(PARENT))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(GRANDPARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(GRANDPARENT))
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(idCallOrder.length).toBe(1);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-  });
-
-  it('should stopPropagation if false is returned', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      recordIDAndReturnFalse.bind(null, getID(CHILD))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(PARENT))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(GRANDPARENT),
-      ON_CLICK_KEY,
-      recordID.bind(null, getID(GRANDPARENT))
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(idCallOrder.length).toBe(1);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-  });
-
-  /**
-   * The entire event registration state of the world should be "locked-in" at
-   * the time the event occurs. This is to resolve many edge cases that come
-   * about from a listener on a lower-in-DOM node causing structural changes at
-   * places higher in the DOM. If this lower-in-DOM node causes new content to
-   * be rendered at a place higher-in-DOM, we need to be careful not to invoke
-   * these new listeners.
-   */
-
-  it('should invoke handlers that were removed while bubbling', function() {
-    var handleParentClick = mocks.getMockFunction();
-    var handleChildClick = function(event) {
-      ReactBrowserEventEmitter.deleteAllListeners(getID(PARENT));
-    };
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      handleChildClick
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_CLICK_KEY,
-      handleParentClick
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(handleParentClick.mock.calls.length).toBe(1);
-  });
-
-  it('should not invoke newly inserted handlers while bubbling', function() {
-    var handleParentClick = mocks.getMockFunction();
-    var handleChildClick = function(event) {
-      ReactBrowserEventEmitter.putListener(
-        getID(PARENT),
-        ON_CLICK_KEY,
-        handleParentClick
-      );
-    };
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_CLICK_KEY,
-      handleChildClick
-    );
-    ReactTestUtils.Simulate.click(CHILD);
-    expect(handleParentClick.mock.calls.length).toBe(0);
-  });
-
-  it('should infer onTouchTap from a touchStart/End', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_TOUCH_TAP_KEY,
-      recordID.bind(null, getID(CHILD))
-    );
-    ReactTestUtils.SimulateNative.touchStart(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, 0)
-    );
-    ReactTestUtils.SimulateNative.touchEnd(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, 0)
-    );
-    expect(idCallOrder.length).toBe(1);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-  });
-
-  it('should infer onTouchTap from when dragging below threshold', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_TOUCH_TAP_KEY,
-      recordID.bind(null, getID(CHILD))
-    );
-    ReactTestUtils.SimulateNative.touchStart(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, 0)
-    );
-    ReactTestUtils.SimulateNative.touchEnd(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, tapMoveThreshold - 1)
-    );
-    expect(idCallOrder.length).toBe(1);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-  });
-
-  it('should not onTouchTap from when dragging beyond threshold', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_TOUCH_TAP_KEY,
-      recordID.bind(null, getID(CHILD))
-    );
-    ReactTestUtils.SimulateNative.touchStart(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, 0)
-    );
-    ReactTestUtils.SimulateNative.touchEnd(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, tapMoveThreshold + 1)
-    );
-    expect(idCallOrder.length).toBe(0);
-  });
-
-  it('should listen to events only once', function() {
-    spyOn(EventListener, 'listen');
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
-    expect(EventListener.listen.callCount).toBe(1);
-  });
-
-  it('should work with event plugins without dependencies', function() {
-    spyOn(EventListener, 'listen');
-
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
-
-    expect(EventListener.listen.argsForCall[0][1]).toBe('click');
-  });
-
-  it('should work with event plugins with dependencies', function() {
-    spyOn(EventListener, 'listen');
-    spyOn(EventListener, 'capture');
-
-    ReactBrowserEventEmitter.listenTo(ON_CHANGE_KEY, document);
-
-    var setEventListeners = [];
-    var listenCalls = EventListener.listen.argsForCall;
-    var captureCalls = EventListener.capture.argsForCall;
-    for (var i = 0, l = listenCalls.length; i < l; i++) {
-      setEventListeners.push(listenCalls[i][1]);
-    }
-    for (i = 0, l = captureCalls.length; i < l; i++) {
-      setEventListeners.push(captureCalls[i][1]);
-    }
-
-    var module =
-          ReactBrowserEventEmitter.registrationNameModules[ON_CHANGE_KEY];
-    var dependencies = module.eventTypes.change.dependencies;
-    expect(setEventListeners.length).toEqual(dependencies.length);
-
-    for (i = 0, l = setEventListeners.length; i < l; i++) {
-      expect(dependencies.indexOf(setEventListeners[i])).toBeTruthy();
-    }
-  });
-
-  it('should bubble onTouchTap', function() {
-    ReactBrowserEventEmitter.putListener(
-      getID(CHILD),
-      ON_TOUCH_TAP_KEY,
-      recordID.bind(null, getID(CHILD))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(PARENT),
-      ON_TOUCH_TAP_KEY,
-      recordID.bind(null, getID(PARENT))
-    );
-    ReactBrowserEventEmitter.putListener(
-      getID(GRANDPARENT),
-      ON_TOUCH_TAP_KEY,
-      recordID.bind(null, getID(GRANDPARENT))
-    );
-    ReactTestUtils.SimulateNative.touchStart(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, 0)
-    );
-    ReactTestUtils.SimulateNative.touchEnd(
-      CHILD,
-      ReactTestUtils.nativeTouchData(0, 0)
-    );
-    expect(idCallOrder.length).toBe(3);
-    expect(idCallOrder[0]).toBe(getID(CHILD));
-    expect(idCallOrder[1]).toBe(getID(PARENT));
-    expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
-  });
-
-});
diff --git a/src/browser/__tests__/ReactDOM-test.js b/src/browser/__tests__/ReactDOM-test.js
deleted file mode 100644
index da0fadb6e20..00000000000
--- a/src/browser/__tests__/ReactDOM-test.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var React = require('React');
-var ReactDOM = require('ReactDOM');
-var ReactMount = require('ReactMount');
-var ReactTestUtils = require('ReactTestUtils');
-
-describe('ReactDOM', function() {
-  // TODO: uncomment this test once we can run in phantom, which
-  // supports real submit events.
-  /*
-  it('should bubble onSubmit', function() {
-    var count = 0;
-    var form;
-    var Parent = React.createClass({
-      handleSubmit: function() {
-        count++;
-        return false;
-      },
-      render: function() {
-        return <Child />;
-      }
-    });
-    var Child = React.createClass({
-      render: function() {
-        return <form><input type="submit" value="Submit" /></form>;
-      },
-      componentDidMount: function() {
-        form = this.getDOMNode();
-      }
-    });
-    var instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    form.submit();
-    expect(count).toEqual(1);
-  });
-  */
-
-  it("should allow children to be passed as an argument", function() {
-    var argDiv = ReactTestUtils.renderIntoDocument(
-      ReactDOM.div(null, 'child')
-    );
-    var argNode = ReactMount.getNode(argDiv._rootNodeID);
-    expect(argNode.innerHTML).toBe('child');
-  });
-
-  it("should overwrite props.children with children argument", function() {
-    var conflictDiv = ReactTestUtils.renderIntoDocument(
-      ReactDOM.div({children: 'fakechild'}, 'child')
-    );
-    var conflictNode = ReactMount.getNode(conflictDiv._rootNodeID);
-    expect(conflictNode.innerHTML).toBe('child');
-  });
-
-  /**
-   * We need to make sure that updates occur to the actual node that's in the
-   * DOM, instead of a stale cache.
-   */
-  it("should purge the DOM cache when removing nodes", function() {
-    var myDiv = ReactTestUtils.renderIntoDocument(
-      <div>{{
-        theDog: <div className="dog" />,
-        theBird: <div className="bird" />
-      }}</div>
-    );
-    // Warm the cache with theDog
-    myDiv.setProps({
-      children: {
-        theDog: <div className="dogbeforedelete" />,
-        theBird: <div className="bird" />
-      }
-    });
-    // Remove theDog - this should purge the cache
-    myDiv.setProps({
-      children: {
-        theBird: <div className="bird" />
-      }
-    });
-    // Now, put theDog back. It's now a different DOM node.
-    myDiv.setProps({
-      children: {
-        theDog: <div className="dog" />,
-        theBird: <div className="bird" />
-      }
-    });
-    // Change the className of theDog. It will use the same element
-    myDiv.setProps({
-      children: {
-        theDog: <div className="bigdog" />,
-        theBird: <div className="bird" />
-      }
-    });
-    var root = ReactMount.getNode(myDiv._rootNodeID);
-    var dog = root.childNodes[0];
-    expect(dog.className).toBe('bigdog');
-  });
-
-  it('should be a valid class', function() {
-    expect(React.isValidClass(ReactDOM.div)).toBe(true);
-  });
-});
diff --git a/src/browser/__tests__/ReactWebWorker-test.js b/src/browser/__tests__/ReactWebWorker-test.js
deleted file mode 100644
index 414fa1d58ee..00000000000
--- a/src/browser/__tests__/ReactWebWorker-test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-describe('ReactWebWorker', function() {
-  ;(typeof Worker == 'undefined' ? xit : it)('can run React in a web worker', function() {
-    var done = false;
-    var error;
-
-    var worker = new Worker(window.ReactWebWorker_URL || '/src/test/worker.js?_=' + Date.now().toString(36));
-    worker.addEventListener('message', function(e) {
-      var data = JSON.parse(e.data);
-      if (data.type == 'error') {
-        error = data.message + "\n" + data.stack;
-        done = true;
-      } else if (data.type == 'log') {
-        console.log(data.message);
-      } else {
-        expect(data.type).toBe('done');
-        done = true;
-      }
-    });
-
-    waitsFor(function() {
-      return done;
-    }, "the final message to arrive from the worker", 2e4);
-
-    runs(function() {
-      if (error) {
-        console.error(error);
-        throw new Error(error);
-      }
-    });
-  });
-});
diff --git a/src/browser/eventPlugins/AnalyticsEventPluginFactory.js b/src/browser/eventPlugins/AnalyticsEventPluginFactory.js
deleted file mode 100644
index 4528cb9462c..00000000000
--- a/src/browser/eventPlugins/AnalyticsEventPluginFactory.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule AnalyticsEventPluginFactory
- *
- * This module provides a factory method to create the AnalyticsEventPlugin that
- * can be used to track the usage of React components that are of interest to
- * the user.
- *
- * In order to enable a component for analytics tracking, you need to specify
- * two additional attributes to the component when you describe the structure of
- * your component in the render() method:
- *
- * 1. 'data-analytics-id': This represents a unique ID that the analytics module
- *     will use to identify this component in all the analytics data. Note that
- *     this is independent of the ref or the DOM id of the element. Over the
- *     lifetime of the product, even if the component id or ref needs to be
- *     changed, as long as you can ensure the analytics ID doesnt change, the
- *     historical data can be correlated. Also note that React does NOT do
- *     anything to guarantee or enforce uniqueness of this ID. If its not unique
- *     the analytics data reported will be incorrect.
- *
- * 2. 'data-analytics-events': This is a comma separated list of DOM events that
- *     you want analytics on. React currently supports tracking only on a
- *     distinct set of events (See topLevelTypesToAnalyticsEvent).
- *     If the list contains an event that React does not recognize for analytics
- *     tracking, in __DEV__, an error will be thrown. Note that it is case
- *     sensitive and space sensitive.
- *
- * By default the AnalyticsEventPlugin is NOT enabled in React. To use it, you
- * need to create the plugin using the factory method and add it to the list of
- * Plugins maintained in the EventPluginHub before your component is rendered.
- * As creation parameters you can specify two arguments:
- *
- * 1. callback: This is a required parameter. In __DEV__, an error will be
- *    thrown if this param is missing. The callback will be called with the
- *    analyticsData as an argument. The analyticsData will contain one property
- *    per every React component, identified by its data-analytics-id. The value
- *    of this property will be an object containing properties corresponding to
- *    each of the comma separated events specified in data-analytics-events.
- *
- *    For example, if you have:
- *    <Button ...
- *      data-analytics-id="createButton"
- *      data-analytics-events="click"
- *    />
- *    and
- *    <TextBox ...
- *      data-analytics-id="disclaimerBox"
- *      data-analytics-events="focus,scroll"
- *    />
- *    analyticsData will be something like:
- *    '{"createButton":{"click":50}, "disclaimerBox":{"focus":15, "scroll":5}}'
- *
- *    DO NOT mutate the data that you get in the callback. Mutating it will lead
- *    to errors and unstable behavior.
- *
- *    The React component will be included for analytics as long as some user
- *    interaction has happened with that component. If no user interaction has
- *    happened with any of the components tracked for analytics, the callback
- *    will not be called.
- *
- * 2. interval (in milliseconds): This is an optional parameter to specify the
- *    interval at which the callback needs to be called. It needs to be greater
- *    than the 2 minutes (which is the default value if this parameter is not
- *    specified or a value less than 2 minutes is specified)
- *
- * Please refer to the unit tests AnalyticsEventPlugin-test.js for details on
- * usage.
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var emptyFunction = require('emptyFunction');
-var invariant = require('invariant');
-var topLevelTypes = require('EventConstants').topLevelTypes;
-
-var ANALYTICS_ID = 'data-analytics-id';
-var ANALYTICS_EVENTS = 'data-analytics-events';
-var DEFAULT_INTERVAL_MS = 2 * 60 * 1000; // 2 minutes
-
-var analyticsData = {};
-
-// List of topLevel event types that React supports for analytics tracking
-var topLevelTypesToAnalyticsEvent = {
-  topClick:       'click',
-  topDoubleClick: 'doubleClick',
-  wheel:          'wheel',
-  topTouchStart:  'touchStart',
-  topTouchEnd:    'touchEnd',
-  topTouchMove:   'touchMove',
-  topTouchCancel: 'touchCancel',
-  topKeyUp:       'keyUp',
-  topKeyPress:    'keyPress',
-  topKeyDown:     'keyDown',
-  topFocus:       'focus',
-  topBlur:        'blur',
-  topScroll:      'scroll',
-  topChange:      'change'
-};
-
-if (__DEV__) {
-  var analyticsEventNameToTopLevelType = {
-    'click':        topLevelTypes.topClick,
-    'doubleClick':  topLevelTypes.topDoubleClick,
-    'wheel':        topLevelTypes.wheel,
-    'touchStart':   topLevelTypes.topTouchStart,
-    'touchEnd':     topLevelTypes.topTouchEnd,
-    'touchMove':    topLevelTypes.topTouchMove,
-    'touchCancel':  topLevelTypes.topTouchCancel,
-    'keyUp':        topLevelTypes.topKeyUp,
-    'keyPress':     topLevelTypes.topKeyPress,
-    'keyDown':      topLevelTypes.topKeyDown,
-    'focus':        topLevelTypes.topFocus,
-    'blur':         topLevelTypes.topBlur,
-    'scroll':       topLevelTypes.topScroll,
-    'change':       topLevelTypes.topChange
-  };
-}
-
-/**
- * This plugin does not really extract any synthetic events. Rather it just
- * looks at the top-level event and bumps up counters as appropriate
- *
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {DOMEventTarget} topLevelTarget The listening component root node.
- * @param {string} topLevelTargetID ID of `topLevelTarget`.
- * @param {object} nativeEvent Native browser event.
- * @return {*} An accumulation of synthetic events.
- * @see {EventPluginHub.extractEvents}
- */
-function extractEvents(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID,
-    nativeEvent) {
-  var currentEvent = topLevelTypesToAnalyticsEvent[topLevelType];
-  if (!currentEvent || !topLevelTarget || !topLevelTarget.attributes) {
-    return null;
-  }
-
-  var analyticsID = topLevelTarget.getAttribute(ANALYTICS_ID);
-  var analyticsEventsStr = topLevelTarget.getAttribute(ANALYTICS_EVENTS);
-  if (!analyticsID || !analyticsEventsStr) {
-    return null;
-  }
-
-  var analyticsEventsArr = analyticsEventsStr.split(",");
-  if (!analyticsData.hasOwnProperty(analyticsID)) {
-    initAnalyticsDataForID(analyticsID, analyticsEventsArr);
-  }
-
-  if (analyticsEventsArr.indexOf(currentEvent) !== -1) {
-    analyticsData[analyticsID][currentEvent]++;
-  }
-
-  return null;
-}
-
-/**
- * Initialize the analytics data for a specific element identified by the
- * analyticsID - Create an entry in the analyticsData object for the element and
- * initialize all counters for that element to 0.
- */
-function initAnalyticsDataForID(analyticsID, analyticsEventsArr) {
-  analyticsData[analyticsID] = {};
-  analyticsEventsArr.forEach(function(analyticsEvent) {
-    if (__DEV__) {
-      invariant(
-        analyticsEventNameToTopLevelType[analyticsEvent],
-        'Invalid analyticsEvent:%s for analyticsID:%s',
-        analyticsEvent,
-        analyticsID
-      );
-    }
-    analyticsData[analyticsID][analyticsEvent] = 0;
-  });
-}
-
-/**
- * Returns the analytics event plugin given the callback that needs to be
- * invoked for reporting analytics and the interval at which the callback needs
- * to be invoked. This interval has to be atleast DEFAULT_INTERVAL_MS.
- */
-var createAnalyticsPlugin = function(cb, interval) {
-  invariant(
-    ExecutionEnvironment.canUseDOM,
-    'createAnalyticsPlugin(...): The DOM is not supported in the execution ' +
-    'environment.'
-  );
-
-  if (__DEV__) {
-    invariant(cb, 'createAnalyticsPlugin(...): You must provide a callback.');
-  }
-  cb = cb || emptyFunction;
-
-  setInterval(
-    function() {
-      if (Object.keys(analyticsData).length) {
-        // Invoke the callback with a clone of analyticsData, otherwise our
-        // analyticsData will be dirtied by user changes
-        cb(analyticsData);
-      }
-    },
-    interval > DEFAULT_INTERVAL_MS ? interval : DEFAULT_INTERVAL_MS
-  );
-
-  return {extractEvents: extractEvents};
-};
-
-var AnalyticsEventPluginFactory = {
-  createAnalyticsPlugin: createAnalyticsPlugin
-};
-
-module.exports = AnalyticsEventPluginFactory;
diff --git a/src/browser/eventPlugins/BeforeInputEventPlugin.js b/src/browser/eventPlugins/BeforeInputEventPlugin.js
deleted file mode 100644
index d4248158ac3..00000000000
--- a/src/browser/eventPlugins/BeforeInputEventPlugin.js
+++ /dev/null
@@ -1,222 +0,0 @@
-/**
- * Copyright 2013 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule BeforeInputEventPlugin
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPropagators = require('EventPropagators');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-var SyntheticInputEvent = require('SyntheticInputEvent');
-
-var keyOf = require('keyOf');
-
-var canUseTextInputEvent = (
-  ExecutionEnvironment.canUseDOM &&
-  'TextEvent' in window &&
-  !('documentMode' in document || isPresto())
-);
-
-/**
- * Opera <= 12 includes TextEvent in window, but does not fire
- * text input events. Rely on keypress instead.
- */
-function isPresto() {
-  var opera = window.opera;
-  return (
-    typeof opera === 'object' &&
-    typeof opera.version === 'function' &&
-    parseInt(opera.version(), 10) <= 12
-  );
-}
-
-var SPACEBAR_CODE = 32;
-var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-// Events and their corresponding property names.
-var eventTypes = {
-  beforeInput: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onBeforeInput: null}),
-      captured: keyOf({onBeforeInputCapture: null})
-    },
-    dependencies: [
-      topLevelTypes.topCompositionEnd,
-      topLevelTypes.topKeyPress,
-      topLevelTypes.topTextInput,
-      topLevelTypes.topPaste
-    ]
-  }
-};
-
-// Track characters inserted via keypress and composition events.
-var fallbackChars = null;
-
-/**
- * Return whether a native keypress event is assumed to be a command.
- * This is required because Firefox fires `keypress` events for key commands
- * (cut, copy, select-all, etc.) even though no character is inserted.
- */
-function isKeypressCommand(nativeEvent) {
-  return (
-    (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
-    // ctrlKey && altKey is equivalent to AltGr, and is not a command.
-    !(nativeEvent.ctrlKey && nativeEvent.altKey)
-  );
-}
-
-/**
- * Create an `onBeforeInput` event to match
- * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
- *
- * This event plugin is based on the native `textInput` event
- * available in Chrome, Safari, Opera, and IE. This event fires after
- * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
- *
- * `beforeInput` is spec'd but not implemented in any browsers, and
- * the `input` event does not provide any useful information about what has
- * actually been added, contrary to the spec. Thus, `textInput` is the best
- * available event to identify the characters that have actually been inserted
- * into the target node.
- */
-var BeforeInputEventPlugin = {
-
-  eventTypes: eventTypes,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-
-    var chars;
-
-    if (canUseTextInputEvent) {
-      switch (topLevelType) {
-        case topLevelTypes.topKeyPress:
-          /**
-           * If native `textInput` events are available, our goal is to make
-           * use of them. However, there is a special case: the spacebar key.
-           * In Webkit, preventing default on a spacebar `textInput` event
-           * cancels character insertion, but it *also* causes the browser
-           * to fall back to its default spacebar behavior of scrolling the
-           * page.
-           *
-           * Tracking at:
-           * https://code.google.com/p/chromium/issues/detail?id=355103
-           *
-           * To avoid this issue, use the keypress event as if no `textInput`
-           * event is available.
-           */
-          var which = nativeEvent.which;
-          if (which !== SPACEBAR_CODE) {
-            return;
-          }
-
-          chars = String.fromCharCode(which);
-          break;
-
-        case topLevelTypes.topTextInput:
-          // Record the characters to be added to the DOM.
-          chars = nativeEvent.data;
-
-          // If it's a spacebar character, assume that we have already handled
-          // it at the keypress level and bail immediately.
-          if (chars === SPACEBAR_CHAR) {
-            return;
-          }
-
-          // Otherwise, carry on.
-          break;
-
-        default:
-          // For other native event types, do nothing.
-          return;
-      }
-    } else {
-      switch (topLevelType) {
-        case topLevelTypes.topPaste:
-          // If a paste event occurs after a keypress, throw out the input
-          // chars. Paste events should not lead to BeforeInput events.
-          fallbackChars = null;
-          break;
-        case topLevelTypes.topKeyPress:
-          /**
-           * As of v27, Firefox may fire keypress events even when no character
-           * will be inserted. A few possibilities:
-           *
-           * - `which` is `0`. Arrow keys, Esc key, etc.
-           *
-           * - `which` is the pressed key code, but no char is available.
-           *   Ex: 'AltGr + d` in Polish. There is no modified character for
-           *   this key combination and no character is inserted into the
-           *   document, but FF fires the keypress for char code `100` anyway.
-           *   No `input` event will occur.
-           *
-           * - `which` is the pressed key code, but a command combination is
-           *   being used. Ex: `Cmd+C`. No character is inserted, and no
-           *   `input` event will occur.
-           */
-          if (nativeEvent.which && !isKeypressCommand(nativeEvent)) {
-            fallbackChars = String.fromCharCode(nativeEvent.which);
-          }
-          break;
-        case topLevelTypes.topCompositionEnd:
-          fallbackChars = nativeEvent.data;
-          break;
-      }
-
-      // If no changes have occurred to the fallback string, no relevant
-      // event has fired and we're done.
-      if (fallbackChars === null) {
-        return;
-      }
-
-      chars = fallbackChars;
-    }
-
-    // If no characters are being inserted, no BeforeInput event should
-    // be fired.
-    if (!chars) {
-      return;
-    }
-
-    var event = SyntheticInputEvent.getPooled(
-      eventTypes.beforeInput,
-      topLevelTargetID,
-      nativeEvent
-    );
-
-    event.data = chars;
-    fallbackChars = null;
-    EventPropagators.accumulateTwoPhaseDispatches(event);
-    return event;
-  }
-};
-
-module.exports = BeforeInputEventPlugin;
diff --git a/src/browser/eventPlugins/ChangeEventPlugin.js b/src/browser/eventPlugins/ChangeEventPlugin.js
deleted file mode 100644
index 499a8828028..00000000000
--- a/src/browser/eventPlugins/ChangeEventPlugin.js
+++ /dev/null
@@ -1,387 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ChangeEventPlugin
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginHub = require('EventPluginHub');
-var EventPropagators = require('EventPropagators');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-var ReactUpdates = require('ReactUpdates');
-var SyntheticEvent = require('SyntheticEvent');
-
-var isEventSupported = require('isEventSupported');
-var isTextInputElement = require('isTextInputElement');
-var keyOf = require('keyOf');
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-var eventTypes = {
-  change: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onChange: null}),
-      captured: keyOf({onChangeCapture: null})
-    },
-    dependencies: [
-      topLevelTypes.topBlur,
-      topLevelTypes.topChange,
-      topLevelTypes.topClick,
-      topLevelTypes.topFocus,
-      topLevelTypes.topInput,
-      topLevelTypes.topKeyDown,
-      topLevelTypes.topKeyUp,
-      topLevelTypes.topSelectionChange
-    ]
-  }
-};
-
-/**
- * For IE shims
- */
-var activeElement = null;
-var activeElementID = null;
-var activeElementValue = null;
-var activeElementValueProp = null;
-
-/**
- * SECTION: handle `change` event
- */
-function shouldUseChangeEvent(elem) {
-  return (
-    elem.nodeName === 'SELECT' ||
-    (elem.nodeName === 'INPUT' && elem.type === 'file')
-  );
-}
-
-var doesChangeEventBubble = false;
-if (ExecutionEnvironment.canUseDOM) {
-  // See `handleChange` comment below
-  doesChangeEventBubble = isEventSupported('change') && (
-    !('documentMode' in document) || document.documentMode > 8
-  );
-}
-
-function manualDispatchChangeEvent(nativeEvent) {
-  var event = SyntheticEvent.getPooled(
-    eventTypes.change,
-    activeElementID,
-    nativeEvent
-  );
-  EventPropagators.accumulateTwoPhaseDispatches(event);
-
-  // If change and propertychange bubbled, we'd just bind to it like all the
-  // other events and have it go through ReactBrowserEventEmitter. Since it
-  // doesn't, we manually listen for the events and so we have to enqueue and
-  // process the abstract event manually.
-  //
-  // Batching is necessary here in order to ensure that all event handlers run
-  // before the next rerender (including event handlers attached to ancestor
-  // elements instead of directly on the input). Without this, controlled
-  // components don't work properly in conjunction with event bubbling because
-  // the component is rerendered and the value reverted before all the event
-  // handlers can run. See https://github.com/facebook/react/issues/708.
-  ReactUpdates.batchedUpdates(runEventInBatch, event);
-}
-
-function runEventInBatch(event) {
-  EventPluginHub.enqueueEvents(event);
-  EventPluginHub.processEventQueue();
-}
-
-function startWatchingForChangeEventIE8(target, targetID) {
-  activeElement = target;
-  activeElementID = targetID;
-  activeElement.attachEvent('onchange', manualDispatchChangeEvent);
-}
-
-function stopWatchingForChangeEventIE8() {
-  if (!activeElement) {
-    return;
-  }
-  activeElement.detachEvent('onchange', manualDispatchChangeEvent);
-  activeElement = null;
-  activeElementID = null;
-}
-
-function getTargetIDForChangeEvent(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID) {
-  if (topLevelType === topLevelTypes.topChange) {
-    return topLevelTargetID;
-  }
-}
-function handleEventsForChangeEventIE8(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID) {
-  if (topLevelType === topLevelTypes.topFocus) {
-    // stopWatching() should be a noop here but we call it just in case we
-    // missed a blur event somehow.
-    stopWatchingForChangeEventIE8();
-    startWatchingForChangeEventIE8(topLevelTarget, topLevelTargetID);
-  } else if (topLevelType === topLevelTypes.topBlur) {
-    stopWatchingForChangeEventIE8();
-  }
-}
-
-
-/**
- * SECTION: handle `input` event
- */
-var isInputEventSupported = false;
-if (ExecutionEnvironment.canUseDOM) {
-  // IE9 claims to support the input event but fails to trigger it when
-  // deleting text, so we ignore its input events
-  isInputEventSupported = isEventSupported('input') && (
-    !('documentMode' in document) || document.documentMode > 9
-  );
-}
-
-/**
- * (For old IE.) Replacement getter/setter for the `value` property that gets
- * set on the active element.
- */
-var newValueProp =  {
-  get: function() {
-    return activeElementValueProp.get.call(this);
-  },
-  set: function(val) {
-    // Cast to a string so we can do equality checks.
-    activeElementValue = '' + val;
-    activeElementValueProp.set.call(this, val);
-  }
-};
-
-/**
- * (For old IE.) Starts tracking propertychange events on the passed-in element
- * and override the value property so that we can distinguish user events from
- * value changes in JS.
- */
-function startWatchingForValueChange(target, targetID) {
-  activeElement = target;
-  activeElementID = targetID;
-  activeElementValue = target.value;
-  activeElementValueProp = Object.getOwnPropertyDescriptor(
-    target.constructor.prototype,
-    'value'
-  );
-
-  Object.defineProperty(activeElement, 'value', newValueProp);
-  activeElement.attachEvent('onpropertychange', handlePropertyChange);
-}
-
-/**
- * (For old IE.) Removes the event listeners from the currently-tracked element,
- * if any exists.
- */
-function stopWatchingForValueChange() {
-  if (!activeElement) {
-    return;
-  }
-
-  // delete restores the original property definition
-  delete activeElement.value;
-  activeElement.detachEvent('onpropertychange', handlePropertyChange);
-
-  activeElement = null;
-  activeElementID = null;
-  activeElementValue = null;
-  activeElementValueProp = null;
-}
-
-/**
- * (For old IE.) Handles a propertychange event, sending a `change` event if
- * the value of the active element has changed.
- */
-function handlePropertyChange(nativeEvent) {
-  if (nativeEvent.propertyName !== 'value') {
-    return;
-  }
-  var value = nativeEvent.srcElement.value;
-  if (value === activeElementValue) {
-    return;
-  }
-  activeElementValue = value;
-
-  manualDispatchChangeEvent(nativeEvent);
-}
-
-/**
- * If a `change` event should be fired, returns the target's ID.
- */
-function getTargetIDForInputEvent(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID) {
-  if (topLevelType === topLevelTypes.topInput) {
-    // In modern browsers (i.e., not IE8 or IE9), the input event is exactly
-    // what we want so fall through here and trigger an abstract event
-    return topLevelTargetID;
-  }
-}
-
-// For IE8 and IE9.
-function handleEventsForInputEventIE(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID) {
-  if (topLevelType === topLevelTypes.topFocus) {
-    // In IE8, we can capture almost all .value changes by adding a
-    // propertychange handler and looking for events with propertyName
-    // equal to 'value'
-    // In IE9, propertychange fires for most input events but is buggy and
-    // doesn't fire when text is deleted, but conveniently, selectionchange
-    // appears to fire in all of the remaining cases so we catch those and
-    // forward the event if the value has changed
-    // In either case, we don't want to call the event handler if the value
-    // is changed from JS so we redefine a setter for `.value` that updates
-    // our activeElementValue variable, allowing us to ignore those changes
-    //
-    // stopWatching() should be a noop here but we call it just in case we
-    // missed a blur event somehow.
-    stopWatchingForValueChange();
-    startWatchingForValueChange(topLevelTarget, topLevelTargetID);
-  } else if (topLevelType === topLevelTypes.topBlur) {
-    stopWatchingForValueChange();
-  }
-}
-
-// For IE8 and IE9.
-function getTargetIDForInputEventIE(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID) {
-  if (topLevelType === topLevelTypes.topSelectionChange ||
-      topLevelType === topLevelTypes.topKeyUp ||
-      topLevelType === topLevelTypes.topKeyDown) {
-    // On the selectionchange event, the target is just document which isn't
-    // helpful for us so just check activeElement instead.
-    //
-    // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
-    // propertychange on the first input event after setting `value` from a
-    // script and fires only keydown, keypress, keyup. Catching keyup usually
-    // gets it and catching keydown lets us fire an event for the first
-    // keystroke if user does a key repeat (it'll be a little delayed: right
-    // before the second keystroke). Other input methods (e.g., paste) seem to
-    // fire selectionchange normally.
-    if (activeElement && activeElement.value !== activeElementValue) {
-      activeElementValue = activeElement.value;
-      return activeElementID;
-    }
-  }
-}
-
-
-/**
- * SECTION: handle `click` event
- */
-function shouldUseClickEvent(elem) {
-  // Use the `click` event to detect changes to checkbox and radio inputs.
-  // This approach works across all browsers, whereas `change` does not fire
-  // until `blur` in IE8.
-  return (
-    elem.nodeName === 'INPUT' &&
-    (elem.type === 'checkbox' || elem.type === 'radio')
-  );
-}
-
-function getTargetIDForClickEvent(
-    topLevelType,
-    topLevelTarget,
-    topLevelTargetID) {
-  if (topLevelType === topLevelTypes.topClick) {
-    return topLevelTargetID;
-  }
-}
-
-/**
- * This plugin creates an `onChange` event that normalizes change events
- * across form elements. This event fires at a time when it's possible to
- * change the element's value without seeing a flicker.
- *
- * Supported elements are:
- * - input (see `isTextInputElement`)
- * - textarea
- * - select
- */
-var ChangeEventPlugin = {
-
-  eventTypes: eventTypes,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-
-    var getTargetIDFunc, handleEventFunc;
-    if (shouldUseChangeEvent(topLevelTarget)) {
-      if (doesChangeEventBubble) {
-        getTargetIDFunc = getTargetIDForChangeEvent;
-      } else {
-        handleEventFunc = handleEventsForChangeEventIE8;
-      }
-    } else if (isTextInputElement(topLevelTarget)) {
-      if (isInputEventSupported) {
-        getTargetIDFunc = getTargetIDForInputEvent;
-      } else {
-        getTargetIDFunc = getTargetIDForInputEventIE;
-        handleEventFunc = handleEventsForInputEventIE;
-      }
-    } else if (shouldUseClickEvent(topLevelTarget)) {
-      getTargetIDFunc = getTargetIDForClickEvent;
-    }
-
-    if (getTargetIDFunc) {
-      var targetID = getTargetIDFunc(
-        topLevelType,
-        topLevelTarget,
-        topLevelTargetID
-      );
-      if (targetID) {
-        var event = SyntheticEvent.getPooled(
-          eventTypes.change,
-          targetID,
-          nativeEvent
-        );
-        EventPropagators.accumulateTwoPhaseDispatches(event);
-        return event;
-      }
-    }
-
-    if (handleEventFunc) {
-      handleEventFunc(
-        topLevelType,
-        topLevelTarget,
-        topLevelTargetID
-      );
-    }
-  }
-
-};
-
-module.exports = ChangeEventPlugin;
diff --git a/src/browser/eventPlugins/CompositionEventPlugin.js b/src/browser/eventPlugins/CompositionEventPlugin.js
deleted file mode 100644
index babbdf95f21..00000000000
--- a/src/browser/eventPlugins/CompositionEventPlugin.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule CompositionEventPlugin
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPropagators = require('EventPropagators');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-var ReactInputSelection = require('ReactInputSelection');
-var SyntheticCompositionEvent = require('SyntheticCompositionEvent');
-
-var getTextContentAccessor = require('getTextContentAccessor');
-var keyOf = require('keyOf');
-
-var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
-var START_KEYCODE = 229;
-
-var useCompositionEvent = (
-  ExecutionEnvironment.canUseDOM &&
-  'CompositionEvent' in window
-);
-
-// In IE9+, we have access to composition events, but the data supplied
-// by the native compositionend event may be incorrect. In Korean, for example,
-// the compositionend event contains only one character regardless of
-// how many characters have been composed since compositionstart.
-// We therefore use the fallback data while still using the native
-// events as triggers.
-var useFallbackData = (
-  !useCompositionEvent ||
-  (
-    'documentMode' in document &&
-    document.documentMode > 8 &&
-    document.documentMode <= 11
-  )
-);
-
-var topLevelTypes = EventConstants.topLevelTypes;
-var currentComposition = null;
-
-// Events and their corresponding property names.
-var eventTypes = {
-  compositionEnd: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onCompositionEnd: null}),
-      captured: keyOf({onCompositionEndCapture: null})
-    },
-    dependencies: [
-      topLevelTypes.topBlur,
-      topLevelTypes.topCompositionEnd,
-      topLevelTypes.topKeyDown,
-      topLevelTypes.topKeyPress,
-      topLevelTypes.topKeyUp,
-      topLevelTypes.topMouseDown
-    ]
-  },
-  compositionStart: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onCompositionStart: null}),
-      captured: keyOf({onCompositionStartCapture: null})
-    },
-    dependencies: [
-      topLevelTypes.topBlur,
-      topLevelTypes.topCompositionStart,
-      topLevelTypes.topKeyDown,
-      topLevelTypes.topKeyPress,
-      topLevelTypes.topKeyUp,
-      topLevelTypes.topMouseDown
-    ]
-  },
-  compositionUpdate: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onCompositionUpdate: null}),
-      captured: keyOf({onCompositionUpdateCapture: null})
-    },
-    dependencies: [
-      topLevelTypes.topBlur,
-      topLevelTypes.topCompositionUpdate,
-      topLevelTypes.topKeyDown,
-      topLevelTypes.topKeyPress,
-      topLevelTypes.topKeyUp,
-      topLevelTypes.topMouseDown
-    ]
-  }
-};
-
-/**
- * Translate native top level events into event types.
- *
- * @param {string} topLevelType
- * @return {object}
- */
-function getCompositionEventType(topLevelType) {
-  switch (topLevelType) {
-    case topLevelTypes.topCompositionStart:
-      return eventTypes.compositionStart;
-    case topLevelTypes.topCompositionEnd:
-      return eventTypes.compositionEnd;
-    case topLevelTypes.topCompositionUpdate:
-      return eventTypes.compositionUpdate;
-  }
-}
-
-/**
- * Does our fallback best-guess model think this event signifies that
- * composition has begun?
- *
- * @param {string} topLevelType
- * @param {object} nativeEvent
- * @return {boolean}
- */
-function isFallbackStart(topLevelType, nativeEvent) {
-  return (
-    topLevelType === topLevelTypes.topKeyDown &&
-    nativeEvent.keyCode === START_KEYCODE
-  );
-}
-
-/**
- * Does our fallback mode think that this event is the end of composition?
- *
- * @param {string} topLevelType
- * @param {object} nativeEvent
- * @return {boolean}
- */
-function isFallbackEnd(topLevelType, nativeEvent) {
-  switch (topLevelType) {
-    case topLevelTypes.topKeyUp:
-      // Command keys insert or clear IME input.
-      return (END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1);
-    case topLevelTypes.topKeyDown:
-      // Expect IME keyCode on each keydown. If we get any other
-      // code we must have exited earlier.
-      return (nativeEvent.keyCode !== START_KEYCODE);
-    case topLevelTypes.topKeyPress:
-    case topLevelTypes.topMouseDown:
-    case topLevelTypes.topBlur:
-      // Events are not possible without cancelling IME.
-      return true;
-    default:
-      return false;
-  }
-}
-
-/**
- * Helper class stores information about selection and document state
- * so we can figure out what changed at a later date.
- *
- * @param {DOMEventTarget} root
- */
-function FallbackCompositionState(root) {
-  this.root = root;
-  this.startSelection = ReactInputSelection.getSelection(root);
-  this.startValue = this.getText();
-}
-
-/**
- * Get current text of input.
- *
- * @return {string}
- */
-FallbackCompositionState.prototype.getText = function() {
-  return this.root.value || this.root[getTextContentAccessor()];
-};
-
-/**
- * Text that has changed since the start of composition.
- *
- * @return {string}
- */
-FallbackCompositionState.prototype.getData = function() {
-  var endValue = this.getText();
-  var prefixLength = this.startSelection.start;
-  var suffixLength = this.startValue.length - this.startSelection.end;
-
-  return endValue.substr(
-    prefixLength,
-    endValue.length - suffixLength - prefixLength
-  );
-};
-
-/**
- * This plugin creates `onCompositionStart`, `onCompositionUpdate` and
- * `onCompositionEnd` events on inputs, textareas and contentEditable
- * nodes.
- */
-var CompositionEventPlugin = {
-
-  eventTypes: eventTypes,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-
-    var eventType;
-    var data;
-
-    if (useCompositionEvent) {
-      eventType = getCompositionEventType(topLevelType);
-    } else if (!currentComposition) {
-      if (isFallbackStart(topLevelType, nativeEvent)) {
-        eventType = eventTypes.compositionStart;
-      }
-    } else if (isFallbackEnd(topLevelType, nativeEvent)) {
-      eventType = eventTypes.compositionEnd;
-    }
-
-    if (useFallbackData) {
-      // The current composition is stored statically and must not be
-      // overwritten while composition continues.
-      if (!currentComposition && eventType === eventTypes.compositionStart) {
-        currentComposition = new FallbackCompositionState(topLevelTarget);
-      } else if (eventType === eventTypes.compositionEnd) {
-        if (currentComposition) {
-          data = currentComposition.getData();
-          currentComposition = null;
-        }
-      }
-    }
-
-    if (eventType) {
-      var event = SyntheticCompositionEvent.getPooled(
-        eventType,
-        topLevelTargetID,
-        nativeEvent
-      );
-      if (data) {
-        // Inject data generated from fallback path into the synthetic event.
-        // This matches the property of native CompositionEventInterface.
-        event.data = data;
-      }
-      EventPropagators.accumulateTwoPhaseDispatches(event);
-      return event;
-    }
-  }
-};
-
-module.exports = CompositionEventPlugin;
diff --git a/src/browser/eventPlugins/DefaultEventPluginOrder.js b/src/browser/eventPlugins/DefaultEventPluginOrder.js
deleted file mode 100644
index 7d300ee9075..00000000000
--- a/src/browser/eventPlugins/DefaultEventPluginOrder.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule DefaultEventPluginOrder
- */
-
-"use strict";
-
- var keyOf = require('keyOf');
-
-/**
- * Module that is injectable into `EventPluginHub`, that specifies a
- * deterministic ordering of `EventPlugin`s. A convenient way to reason about
- * plugins, without having to package every one of them. This is better than
- * having plugins be ordered in the same order that they are injected because
- * that ordering would be influenced by the packaging order.
- * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
- * preventing default on events is convenient in `SimpleEventPlugin` handlers.
- */
-var DefaultEventPluginOrder = [
-  keyOf({ResponderEventPlugin: null}),
-  keyOf({SimpleEventPlugin: null}),
-  keyOf({TapEventPlugin: null}),
-  keyOf({EnterLeaveEventPlugin: null}),
-  keyOf({ChangeEventPlugin: null}),
-  keyOf({SelectEventPlugin: null}),
-  keyOf({CompositionEventPlugin: null}),
-  keyOf({BeforeInputEventPlugin: null}),
-  keyOf({AnalyticsEventPlugin: null}),
-  keyOf({MobileSafariClickEventPlugin: null})
-];
-
-module.exports = DefaultEventPluginOrder;
diff --git a/src/browser/eventPlugins/EnterLeaveEventPlugin.js b/src/browser/eventPlugins/EnterLeaveEventPlugin.js
deleted file mode 100644
index 6dbfaa43995..00000000000
--- a/src/browser/eventPlugins/EnterLeaveEventPlugin.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule EnterLeaveEventPlugin
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPropagators = require('EventPropagators');
-var SyntheticMouseEvent = require('SyntheticMouseEvent');
-
-var ReactMount = require('ReactMount');
-var keyOf = require('keyOf');
-
-var topLevelTypes = EventConstants.topLevelTypes;
-var getFirstReactDOM = ReactMount.getFirstReactDOM;
-
-var eventTypes = {
-  mouseEnter: {
-    registrationName: keyOf({onMouseEnter: null}),
-    dependencies: [
-      topLevelTypes.topMouseOut,
-      topLevelTypes.topMouseOver
-    ]
-  },
-  mouseLeave: {
-    registrationName: keyOf({onMouseLeave: null}),
-    dependencies: [
-      topLevelTypes.topMouseOut,
-      topLevelTypes.topMouseOver
-    ]
-  }
-};
-
-var extractedEvents = [null, null];
-
-var EnterLeaveEventPlugin = {
-
-  eventTypes: eventTypes,
-
-  /**
-   * For almost every interaction we care about, there will be both a top-level
-   * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
-   * we do not extract duplicate events. However, moving the mouse into the
-   * browser from outside will not fire a `mouseout` event. In this case, we use
-   * the `mouseover` top-level event.
-   *
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    if (topLevelType === topLevelTypes.topMouseOver &&
-        (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
-      return null;
-    }
-    if (topLevelType !== topLevelTypes.topMouseOut &&
-        topLevelType !== topLevelTypes.topMouseOver) {
-      // Must not be a mouse in or mouse out - ignoring.
-      return null;
-    }
-
-    var win;
-    if (topLevelTarget.window === topLevelTarget) {
-      // `topLevelTarget` is probably a window object.
-      win = topLevelTarget;
-    } else {
-      // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
-      var doc = topLevelTarget.ownerDocument;
-      if (doc) {
-        win = doc.defaultView || doc.parentWindow;
-      } else {
-        win = window;
-      }
-    }
-
-    var from, to;
-    if (topLevelType === topLevelTypes.topMouseOut) {
-      from = topLevelTarget;
-      to =
-        getFirstReactDOM(nativeEvent.relatedTarget || nativeEvent.toElement) ||
-        win;
-    } else {
-      from = win;
-      to = topLevelTarget;
-    }
-
-    if (from === to) {
-      // Nothing pertains to our managed components.
-      return null;
-    }
-
-    var fromID = from ? ReactMount.getID(from) : '';
-    var toID = to ? ReactMount.getID(to) : '';
-
-    var leave = SyntheticMouseEvent.getPooled(
-      eventTypes.mouseLeave,
-      fromID,
-      nativeEvent
-    );
-    leave.type = 'mouseleave';
-    leave.target = from;
-    leave.relatedTarget = to;
-
-    var enter = SyntheticMouseEvent.getPooled(
-      eventTypes.mouseEnter,
-      toID,
-      nativeEvent
-    );
-    enter.type = 'mouseenter';
-    enter.target = to;
-    enter.relatedTarget = from;
-
-    EventPropagators.accumulateEnterLeaveDispatches(leave, enter, fromID, toID);
-
-    extractedEvents[0] = leave;
-    extractedEvents[1] = enter;
-
-    return extractedEvents;
-  }
-
-};
-
-module.exports = EnterLeaveEventPlugin;
diff --git a/src/browser/eventPlugins/MobileSafariClickEventPlugin.js b/src/browser/eventPlugins/MobileSafariClickEventPlugin.js
deleted file mode 100644
index ea0bb9793d1..00000000000
--- a/src/browser/eventPlugins/MobileSafariClickEventPlugin.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule MobileSafariClickEventPlugin
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-
-var emptyFunction = require('emptyFunction');
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-/**
- * Mobile Safari does not fire properly bubble click events on non-interactive
- * elements, which means delegated click listeners do not fire. The workaround
- * for this bug involves attaching an empty click listener on the target node.
- *
- * This particular plugin works around the bug by attaching an empty click
- * listener on `touchstart` (which does fire on every element).
- */
-var MobileSafariClickEventPlugin = {
-
-  eventTypes: null,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    if (topLevelType === topLevelTypes.topTouchStart) {
-      var target = nativeEvent.target;
-      if (target && !target.onclick) {
-        target.onclick = emptyFunction;
-      }
-    }
-  }
-
-};
-
-module.exports = MobileSafariClickEventPlugin;
diff --git a/src/browser/eventPlugins/ResponderEventPlugin.js b/src/browser/eventPlugins/ResponderEventPlugin.js
deleted file mode 100644
index 7cc99098187..00000000000
--- a/src/browser/eventPlugins/ResponderEventPlugin.js
+++ /dev/null
@@ -1,316 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ResponderEventPlugin
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginUtils = require('EventPluginUtils');
-var EventPropagators = require('EventPropagators');
-var SyntheticEvent = require('SyntheticEvent');
-
-var accumulate = require('accumulate');
-var keyOf = require('keyOf');
-
-var isStartish = EventPluginUtils.isStartish;
-var isMoveish = EventPluginUtils.isMoveish;
-var isEndish = EventPluginUtils.isEndish;
-var executeDirectDispatch = EventPluginUtils.executeDirectDispatch;
-var hasDispatches = EventPluginUtils.hasDispatches;
-var executeDispatchesInOrderStopAtTrue =
-  EventPluginUtils.executeDispatchesInOrderStopAtTrue;
-
-/**
- * ID of element that should respond to touch/move types of interactions, as
- * indicated explicitly by relevant callbacks.
- */
-var responderID = null;
-var isPressing = false;
-
-var eventTypes = {
-  /**
-   * On a `touchStart`/`mouseDown`, is it desired that this element become the
-   * responder?
-   */
-  startShouldSetResponder: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onStartShouldSetResponder: null}),
-      captured: keyOf({onStartShouldSetResponderCapture: null})
-    }
-  },
-
-  /**
-   * On a `scroll`, is it desired that this element become the responder? This
-   * is usually not needed, but should be used to retroactively infer that a
-   * `touchStart` had occured during momentum scroll. During a momentum scroll,
-   * a touch start will be immediately followed by a scroll event if the view is
-   * currently scrolling.
-   */
-  scrollShouldSetResponder: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onScrollShouldSetResponder: null}),
-      captured: keyOf({onScrollShouldSetResponderCapture: null})
-    }
-  },
-
-  /**
-   * On a `touchMove`/`mouseMove`, is it desired that this element become the
-   * responder?
-   */
-  moveShouldSetResponder: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onMoveShouldSetResponder: null}),
-      captured: keyOf({onMoveShouldSetResponderCapture: null})
-    }
-  },
-
-  /**
-   * Direct responder events dispatched directly to responder. Do not bubble.
-   */
-  responderMove: {registrationName: keyOf({onResponderMove: null})},
-  responderRelease: {registrationName: keyOf({onResponderRelease: null})},
-  responderTerminationRequest: {
-    registrationName: keyOf({onResponderTerminationRequest: null})
-  },
-  responderGrant: {registrationName: keyOf({onResponderGrant: null})},
-  responderReject: {registrationName: keyOf({onResponderReject: null})},
-  responderTerminate: {registrationName: keyOf({onResponderTerminate: null})}
-};
-
-/**
- * Performs negotiation between any existing/current responder, checks to see if
- * any new entity is interested in becoming responder, performs that handshake
- * and returns any events that must be emitted to notify the relevant parties.
- *
- * A note about event ordering in the `EventPluginHub`.
- *
- * Suppose plugins are injected in the following order:
- *
- * `[R, S, C]`
- *
- * To help illustrate the example, assume `S` is `SimpleEventPlugin` (for
- * `onClick` etc) and `R` is `ResponderEventPlugin`.
- *
- * "Deferred-Dispatched Events":
- *
- * - The current event plugin system will traverse the list of injected plugins,
- *   in order, and extract events by collecting the plugin's return value of
- *   `extractEvents()`.
- * - These events that are returned from `extractEvents` are "deferred
- *   dispatched events".
- * - When returned from `extractEvents`, deferred-dispatched events contain an
- *   "accumulation" of deferred dispatches.
- * - These deferred dispatches are accumulated/collected before they are
- *   returned, but processed at a later time by the `EventPluginHub` (hence the
- *   name deferred).
- *
- * In the process of returning their deferred-dispatched events, event plugins
- * themselves can dispatch events on-demand without returning them from
- * `extractEvents`. Plugins might want to do this, so that they can use event
- * dispatching as a tool that helps them decide which events should be extracted
- * in the first place.
- *
- * "On-Demand-Dispatched Events":
- *
- * - On-demand-dispatched events are not returned from `extractEvents`.
- * - On-demand-dispatched events are dispatched during the process of returning
- *   the deferred-dispatched events.
- * - They should not have side effects.
- * - They should be avoided, and/or eventually be replaced with another
- *   abstraction that allows event plugins to perform multiple "rounds" of event
- *   extraction.
- *
- * Therefore, the sequence of event dispatches becomes:
- *
- * - `R`s on-demand events (if any)   (dispatched by `R` on-demand)
- * - `S`s on-demand events (if any)   (dispatched by `S` on-demand)
- * - `C`s on-demand events (if any)   (dispatched by `C` on-demand)
- * - `R`s extracted events (if any)   (dispatched by `EventPluginHub`)
- * - `S`s extracted events (if any)   (dispatched by `EventPluginHub`)
- * - `C`s extracted events (if any)   (dispatched by `EventPluginHub`)
- *
- * In the case of `ResponderEventPlugin`: If the `startShouldSetResponder`
- * on-demand dispatch returns `true` (and some other details are satisfied) the
- * `onResponderGrant` deferred dispatched event is returned from
- * `extractEvents`. The sequence of dispatch executions in this case
- * will appear as follows:
- *
- * - `startShouldSetResponder` (`ResponderEventPlugin` dispatches on-demand)
- * - `touchStartCapture`       (`EventPluginHub` dispatches as usual)
- * - `touchStart`              (`EventPluginHub` dispatches as usual)
- * - `responderGrant/Reject`   (`EventPluginHub` dispatches as usual)
- *
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {string} topLevelTargetID ID of deepest React rendered element.
- * @param {object} nativeEvent Native browser event.
- * @return {*} An accumulation of synthetic events.
- */
-function setResponderAndExtractTransfer(
-    topLevelType,
-    topLevelTargetID,
-    nativeEvent) {
-  var shouldSetEventType =
-    isStartish(topLevelType) ? eventTypes.startShouldSetResponder :
-    isMoveish(topLevelType) ? eventTypes.moveShouldSetResponder :
-    eventTypes.scrollShouldSetResponder;
-
-  var bubbleShouldSetFrom = responderID || topLevelTargetID;
-  var shouldSetEvent = SyntheticEvent.getPooled(
-    shouldSetEventType,
-    bubbleShouldSetFrom,
-    nativeEvent
-  );
-  EventPropagators.accumulateTwoPhaseDispatches(shouldSetEvent);
-  var wantsResponderID = executeDispatchesInOrderStopAtTrue(shouldSetEvent);
-  if (!shouldSetEvent.isPersistent()) {
-    shouldSetEvent.constructor.release(shouldSetEvent);
-  }
-
-  if (!wantsResponderID || wantsResponderID === responderID) {
-    return null;
-  }
-  var extracted;
-  var grantEvent = SyntheticEvent.getPooled(
-    eventTypes.responderGrant,
-    wantsResponderID,
-    nativeEvent
-  );
-
-  EventPropagators.accumulateDirectDispatches(grantEvent);
-  if (responderID) {
-    var terminationRequestEvent = SyntheticEvent.getPooled(
-      eventTypes.responderTerminationRequest,
-      responderID,
-      nativeEvent
-    );
-    EventPropagators.accumulateDirectDispatches(terminationRequestEvent);
-    var shouldSwitch = !hasDispatches(terminationRequestEvent) ||
-      executeDirectDispatch(terminationRequestEvent);
-    if (!terminationRequestEvent.isPersistent()) {
-      terminationRequestEvent.constructor.release(terminationRequestEvent);
-    }
-
-    if (shouldSwitch) {
-      var terminateType = eventTypes.responderTerminate;
-      var terminateEvent = SyntheticEvent.getPooled(
-        terminateType,
-        responderID,
-        nativeEvent
-      );
-      EventPropagators.accumulateDirectDispatches(terminateEvent);
-      extracted = accumulate(extracted, [grantEvent, terminateEvent]);
-      responderID = wantsResponderID;
-    } else {
-      var rejectEvent = SyntheticEvent.getPooled(
-        eventTypes.responderReject,
-        wantsResponderID,
-        nativeEvent
-      );
-      EventPropagators.accumulateDirectDispatches(rejectEvent);
-      extracted = accumulate(extracted, rejectEvent);
-    }
-  } else {
-    extracted = accumulate(extracted, grantEvent);
-    responderID = wantsResponderID;
-  }
-  return extracted;
-}
-
-/**
- * A transfer is a negotiation between a currently set responder and the next
- * element to claim responder status. Any start event could trigger a transfer
- * of responderID. Any move event could trigger a transfer, so long as there is
- * currently a responder set (in other words as long as the user is pressing
- * down).
- *
- * @param {string} topLevelType Record from `EventConstants`.
- * @return {boolean} True if a transfer of responder could possibly occur.
- */
-function canTriggerTransfer(topLevelType) {
-  return topLevelType === EventConstants.topLevelTypes.topScroll ||
-         isStartish(topLevelType) ||
-         (isPressing && isMoveish(topLevelType));
-}
-
-/**
- * Event plugin for formalizing the negotiation between claiming locks on
- * receiving touches.
- */
-var ResponderEventPlugin = {
-
-  getResponderID: function() {
-    return responderID;
-  },
-
-  eventTypes: eventTypes,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    var extracted;
-    // Must have missed an end event - reset the state here.
-    if (responderID && isStartish(topLevelType)) {
-      responderID = null;
-    }
-    if (isStartish(topLevelType)) {
-      isPressing = true;
-    } else if (isEndish(topLevelType)) {
-      isPressing = false;
-    }
-    if (canTriggerTransfer(topLevelType)) {
-      var transfer = setResponderAndExtractTransfer(
-        topLevelType,
-        topLevelTargetID,
-        nativeEvent
-      );
-      if (transfer) {
-        extracted = accumulate(extracted, transfer);
-      }
-    }
-    // Now that we know the responder is set correctly, we can dispatch
-    // responder type events (directly to the responder).
-    var type = isMoveish(topLevelType) ? eventTypes.responderMove :
-      isEndish(topLevelType) ? eventTypes.responderRelease :
-      isStartish(topLevelType) ? eventTypes.responderStart : null;
-    if (type) {
-      var gesture = SyntheticEvent.getPooled(
-        type,
-        responderID || '',
-        nativeEvent
-      );
-      EventPropagators.accumulateDirectDispatches(gesture);
-      extracted = accumulate(extracted, gesture);
-    }
-    if (type === eventTypes.responderRelease) {
-      responderID = null;
-    }
-    return extracted;
-  }
-
-};
-
-module.exports = ResponderEventPlugin;
diff --git a/src/browser/eventPlugins/SelectEventPlugin.js b/src/browser/eventPlugins/SelectEventPlugin.js
deleted file mode 100644
index 542dbe5b392..00000000000
--- a/src/browser/eventPlugins/SelectEventPlugin.js
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SelectEventPlugin
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPropagators = require('EventPropagators');
-var ReactInputSelection = require('ReactInputSelection');
-var SyntheticEvent = require('SyntheticEvent');
-
-var getActiveElement = require('getActiveElement');
-var isTextInputElement = require('isTextInputElement');
-var keyOf = require('keyOf');
-var shallowEqual = require('shallowEqual');
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-var eventTypes = {
-  select: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onSelect: null}),
-      captured: keyOf({onSelectCapture: null})
-    },
-    dependencies: [
-      topLevelTypes.topBlur,
-      topLevelTypes.topContextMenu,
-      topLevelTypes.topFocus,
-      topLevelTypes.topKeyDown,
-      topLevelTypes.topMouseDown,
-      topLevelTypes.topMouseUp,
-      topLevelTypes.topSelectionChange
-    ]
-  }
-};
-
-var activeElement = null;
-var activeElementID = null;
-var lastSelection = null;
-var mouseDown = false;
-
-/**
- * Get an object which is a unique representation of the current selection.
- *
- * The return value will not be consistent across nodes or browsers, but
- * two identical selections on the same node will return identical objects.
- *
- * @param {DOMElement} node
- * @param {object}
- */
-function getSelection(node) {
-  if ('selectionStart' in node &&
-      ReactInputSelection.hasSelectionCapabilities(node)) {
-    return {
-      start: node.selectionStart,
-      end: node.selectionEnd
-    };
-  } else if (document.selection) {
-    var range = document.selection.createRange();
-    return {
-      parentElement: range.parentElement(),
-      text: range.text,
-      top: range.boundingTop,
-      left: range.boundingLeft
-    };
-  } else {
-    var selection = window.getSelection();
-    return {
-      anchorNode: selection.anchorNode,
-      anchorOffset: selection.anchorOffset,
-      focusNode: selection.focusNode,
-      focusOffset: selection.focusOffset
-    };
-  }
-}
-
-/**
- * Poll selection to see whether it's changed.
- *
- * @param {object} nativeEvent
- * @return {?SyntheticEvent}
- */
-function constructSelectEvent(nativeEvent) {
-  // Ensure we have the right element, and that the user is not dragging a
-  // selection (this matches native `select` event behavior). In HTML5, select
-  // fires only on input and textarea thus if there's no focused element we
-  // won't dispatch.
-  if (mouseDown ||
-      activeElement == null ||
-      activeElement != getActiveElement()) {
-    return;
-  }
-
-  // Only fire when selection has actually changed.
-  var currentSelection = getSelection(activeElement);
-  if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
-    lastSelection = currentSelection;
-
-    var syntheticEvent = SyntheticEvent.getPooled(
-      eventTypes.select,
-      activeElementID,
-      nativeEvent
-    );
-
-    syntheticEvent.type = 'select';
-    syntheticEvent.target = activeElement;
-
-    EventPropagators.accumulateTwoPhaseDispatches(syntheticEvent);
-
-    return syntheticEvent;
-  }
-}
-
-/**
- * This plugin creates an `onSelect` event that normalizes select events
- * across form elements.
- *
- * Supported elements are:
- * - input (see `isTextInputElement`)
- * - textarea
- * - contentEditable
- *
- * This differs from native browser implementations in the following ways:
- * - Fires on contentEditable fields as well as inputs.
- * - Fires for collapsed selection.
- * - Fires after user input.
- */
-var SelectEventPlugin = {
-
-  eventTypes: eventTypes,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-
-    switch (topLevelType) {
-      // Track the input node that has focus.
-      case topLevelTypes.topFocus:
-        if (isTextInputElement(topLevelTarget) ||
-            topLevelTarget.contentEditable === 'true') {
-          activeElement = topLevelTarget;
-          activeElementID = topLevelTargetID;
-          lastSelection = null;
-        }
-        break;
-      case topLevelTypes.topBlur:
-        activeElement = null;
-        activeElementID = null;
-        lastSelection = null;
-        break;
-
-      // Don't fire the event while the user is dragging. This matches the
-      // semantics of the native select event.
-      case topLevelTypes.topMouseDown:
-        mouseDown = true;
-        break;
-      case topLevelTypes.topContextMenu:
-      case topLevelTypes.topMouseUp:
-        mouseDown = false;
-        return constructSelectEvent(nativeEvent);
-
-      // Chrome and IE fire non-standard event when selection is changed (and
-      // sometimes when it hasn't).
-      // Firefox doesn't support selectionchange, so check selection status
-      // after each key entry. The selection changes after keydown and before
-      // keyup, but we check on keydown as well in the case of holding down a
-      // key, when multiple keydown events are fired but only one keyup is.
-      case topLevelTypes.topSelectionChange:
-      case topLevelTypes.topKeyDown:
-      case topLevelTypes.topKeyUp:
-        return constructSelectEvent(nativeEvent);
-    }
-  }
-};
-
-module.exports = SelectEventPlugin;
diff --git a/src/browser/eventPlugins/SimpleEventPlugin.js b/src/browser/eventPlugins/SimpleEventPlugin.js
deleted file mode 100644
index 311abbf8aca..00000000000
--- a/src/browser/eventPlugins/SimpleEventPlugin.js
+++ /dev/null
@@ -1,422 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SimpleEventPlugin
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginUtils = require('EventPluginUtils');
-var EventPropagators = require('EventPropagators');
-var SyntheticClipboardEvent = require('SyntheticClipboardEvent');
-var SyntheticEvent = require('SyntheticEvent');
-var SyntheticFocusEvent = require('SyntheticFocusEvent');
-var SyntheticKeyboardEvent = require('SyntheticKeyboardEvent');
-var SyntheticMouseEvent = require('SyntheticMouseEvent');
-var SyntheticDragEvent = require('SyntheticDragEvent');
-var SyntheticTouchEvent = require('SyntheticTouchEvent');
-var SyntheticUIEvent = require('SyntheticUIEvent');
-var SyntheticWheelEvent = require('SyntheticWheelEvent');
-
-var getEventCharCode = require('getEventCharCode');
-
-var invariant = require('invariant');
-var keyOf = require('keyOf');
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-var eventTypes = {
-  blur: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onBlur: true}),
-      captured: keyOf({onBlurCapture: true})
-    }
-  },
-  click: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onClick: true}),
-      captured: keyOf({onClickCapture: true})
-    }
-  },
-  contextMenu: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onContextMenu: true}),
-      captured: keyOf({onContextMenuCapture: true})
-    }
-  },
-  copy: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onCopy: true}),
-      captured: keyOf({onCopyCapture: true})
-    }
-  },
-  cut: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onCut: true}),
-      captured: keyOf({onCutCapture: true})
-    }
-  },
-  doubleClick: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDoubleClick: true}),
-      captured: keyOf({onDoubleClickCapture: true})
-    }
-  },
-  drag: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDrag: true}),
-      captured: keyOf({onDragCapture: true})
-    }
-  },
-  dragEnd: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDragEnd: true}),
-      captured: keyOf({onDragEndCapture: true})
-    }
-  },
-  dragEnter: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDragEnter: true}),
-      captured: keyOf({onDragEnterCapture: true})
-    }
-  },
-  dragExit: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDragExit: true}),
-      captured: keyOf({onDragExitCapture: true})
-    }
-  },
-  dragLeave: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDragLeave: true}),
-      captured: keyOf({onDragLeaveCapture: true})
-    }
-  },
-  dragOver: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDragOver: true}),
-      captured: keyOf({onDragOverCapture: true})
-    }
-  },
-  dragStart: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDragStart: true}),
-      captured: keyOf({onDragStartCapture: true})
-    }
-  },
-  drop: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onDrop: true}),
-      captured: keyOf({onDropCapture: true})
-    }
-  },
-  focus: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onFocus: true}),
-      captured: keyOf({onFocusCapture: true})
-    }
-  },
-  input: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onInput: true}),
-      captured: keyOf({onInputCapture: true})
-    }
-  },
-  keyDown: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onKeyDown: true}),
-      captured: keyOf({onKeyDownCapture: true})
-    }
-  },
-  keyPress: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onKeyPress: true}),
-      captured: keyOf({onKeyPressCapture: true})
-    }
-  },
-  keyUp: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onKeyUp: true}),
-      captured: keyOf({onKeyUpCapture: true})
-    }
-  },
-  load: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onLoad: true}),
-      captured: keyOf({onLoadCapture: true})
-    }
-  },
-  error: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onError: true}),
-      captured: keyOf({onErrorCapture: true})
-    }
-  },
-  // Note: We do not allow listening to mouseOver events. Instead, use the
-  // onMouseEnter/onMouseLeave created by `EnterLeaveEventPlugin`.
-  mouseDown: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onMouseDown: true}),
-      captured: keyOf({onMouseDownCapture: true})
-    }
-  },
-  mouseMove: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onMouseMove: true}),
-      captured: keyOf({onMouseMoveCapture: true})
-    }
-  },
-  mouseOut: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onMouseOut: true}),
-      captured: keyOf({onMouseOutCapture: true})
-    }
-  },
-  mouseOver: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onMouseOver: true}),
-      captured: keyOf({onMouseOverCapture: true})
-    }
-  },
-  mouseUp: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onMouseUp: true}),
-      captured: keyOf({onMouseUpCapture: true})
-    }
-  },
-  paste: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onPaste: true}),
-      captured: keyOf({onPasteCapture: true})
-    }
-  },
-  reset: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onReset: true}),
-      captured: keyOf({onResetCapture: true})
-    }
-  },
-  scroll: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onScroll: true}),
-      captured: keyOf({onScrollCapture: true})
-    }
-  },
-  submit: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onSubmit: true}),
-      captured: keyOf({onSubmitCapture: true})
-    }
-  },
-  touchCancel: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onTouchCancel: true}),
-      captured: keyOf({onTouchCancelCapture: true})
-    }
-  },
-  touchEnd: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onTouchEnd: true}),
-      captured: keyOf({onTouchEndCapture: true})
-    }
-  },
-  touchMove: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onTouchMove: true}),
-      captured: keyOf({onTouchMoveCapture: true})
-    }
-  },
-  touchStart: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onTouchStart: true}),
-      captured: keyOf({onTouchStartCapture: true})
-    }
-  },
-  wheel: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onWheel: true}),
-      captured: keyOf({onWheelCapture: true})
-    }
-  }
-};
-
-var topLevelEventsToDispatchConfig = {
-  topBlur:        eventTypes.blur,
-  topClick:       eventTypes.click,
-  topContextMenu: eventTypes.contextMenu,
-  topCopy:        eventTypes.copy,
-  topCut:         eventTypes.cut,
-  topDoubleClick: eventTypes.doubleClick,
-  topDrag:        eventTypes.drag,
-  topDragEnd:     eventTypes.dragEnd,
-  topDragEnter:   eventTypes.dragEnter,
-  topDragExit:    eventTypes.dragExit,
-  topDragLeave:   eventTypes.dragLeave,
-  topDragOver:    eventTypes.dragOver,
-  topDragStart:   eventTypes.dragStart,
-  topDrop:        eventTypes.drop,
-  topError:       eventTypes.error,
-  topFocus:       eventTypes.focus,
-  topInput:       eventTypes.input,
-  topKeyDown:     eventTypes.keyDown,
-  topKeyPress:    eventTypes.keyPress,
-  topKeyUp:       eventTypes.keyUp,
-  topLoad:        eventTypes.load,
-  topMouseDown:   eventTypes.mouseDown,
-  topMouseMove:   eventTypes.mouseMove,
-  topMouseOut:    eventTypes.mouseOut,
-  topMouseOver:   eventTypes.mouseOver,
-  topMouseUp:     eventTypes.mouseUp,
-  topPaste:       eventTypes.paste,
-  topReset:       eventTypes.reset,
-  topScroll:      eventTypes.scroll,
-  topSubmit:      eventTypes.submit,
-  topTouchCancel: eventTypes.touchCancel,
-  topTouchEnd:    eventTypes.touchEnd,
-  topTouchMove:   eventTypes.touchMove,
-  topTouchStart:  eventTypes.touchStart,
-  topWheel:       eventTypes.wheel
-};
-
-for (var topLevelType in topLevelEventsToDispatchConfig) {
-  topLevelEventsToDispatchConfig[topLevelType].dependencies = [topLevelType];
-}
-
-var SimpleEventPlugin = {
-
-  eventTypes: eventTypes,
-
-  /**
-   * Same as the default implementation, except cancels the event when return
-   * value is false.
-   *
-   * @param {object} Event to be dispatched.
-   * @param {function} Application-level callback.
-   * @param {string} domID DOM ID to pass to the callback.
-   */
-  executeDispatch: function(event, listener, domID) {
-    var returnValue = EventPluginUtils.executeDispatch(event, listener, domID);
-    if (returnValue === false) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  },
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
-    if (!dispatchConfig) {
-      return null;
-    }
-    var EventConstructor;
-    switch (topLevelType) {
-      case topLevelTypes.topInput:
-      case topLevelTypes.topLoad:
-      case topLevelTypes.topError:
-      case topLevelTypes.topReset:
-      case topLevelTypes.topSubmit:
-        // HTML Events
-        // @see http://www.w3.org/TR/html5/index.html#events-0
-        EventConstructor = SyntheticEvent;
-        break;
-      case topLevelTypes.topKeyPress:
-        // FireFox creates a keypress event for function keys too. This removes
-        // the unwanted keypress events. Enter is however both printable and
-        // non-printable. One would expect Tab to be as well (but it isn't).
-        if (getEventCharCode(nativeEvent) === 0) {
-          return null;
-        }
-        /* falls through */
-      case topLevelTypes.topKeyDown:
-      case topLevelTypes.topKeyUp:
-        EventConstructor = SyntheticKeyboardEvent;
-        break;
-      case topLevelTypes.topBlur:
-      case topLevelTypes.topFocus:
-        EventConstructor = SyntheticFocusEvent;
-        break;
-      case topLevelTypes.topClick:
-        // Firefox creates a click event on right mouse clicks. This removes the
-        // unwanted click events.
-        if (nativeEvent.button === 2) {
-          return null;
-        }
-        /* falls through */
-      case topLevelTypes.topContextMenu:
-      case topLevelTypes.topDoubleClick:
-      case topLevelTypes.topMouseDown:
-      case topLevelTypes.topMouseMove:
-      case topLevelTypes.topMouseOut:
-      case topLevelTypes.topMouseOver:
-      case topLevelTypes.topMouseUp:
-        EventConstructor = SyntheticMouseEvent;
-        break;
-      case topLevelTypes.topDrag:
-      case topLevelTypes.topDragEnd:
-      case topLevelTypes.topDragEnter:
-      case topLevelTypes.topDragExit:
-      case topLevelTypes.topDragLeave:
-      case topLevelTypes.topDragOver:
-      case topLevelTypes.topDragStart:
-      case topLevelTypes.topDrop:
-        EventConstructor = SyntheticDragEvent;
-        break;
-      case topLevelTypes.topTouchCancel:
-      case topLevelTypes.topTouchEnd:
-      case topLevelTypes.topTouchMove:
-      case topLevelTypes.topTouchStart:
-        EventConstructor = SyntheticTouchEvent;
-        break;
-      case topLevelTypes.topScroll:
-        EventConstructor = SyntheticUIEvent;
-        break;
-      case topLevelTypes.topWheel:
-        EventConstructor = SyntheticWheelEvent;
-        break;
-      case topLevelTypes.topCopy:
-      case topLevelTypes.topCut:
-      case topLevelTypes.topPaste:
-        EventConstructor = SyntheticClipboardEvent;
-        break;
-    }
-    invariant(
-      EventConstructor,
-      'SimpleEventPlugin: Unhandled event type, `%s`.',
-      topLevelType
-    );
-    var event = EventConstructor.getPooled(
-      dispatchConfig,
-      topLevelTargetID,
-      nativeEvent
-    );
-    EventPropagators.accumulateTwoPhaseDispatches(event);
-    return event;
-  }
-
-};
-
-module.exports = SimpleEventPlugin;
diff --git a/src/browser/eventPlugins/TapEventPlugin.js b/src/browser/eventPlugins/TapEventPlugin.js
deleted file mode 100644
index 6db72af8a96..00000000000
--- a/src/browser/eventPlugins/TapEventPlugin.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule TapEventPlugin
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginUtils = require('EventPluginUtils');
-var EventPropagators = require('EventPropagators');
-var SyntheticUIEvent = require('SyntheticUIEvent');
-var TouchEventUtils = require('TouchEventUtils');
-var ViewportMetrics = require('ViewportMetrics');
-
-var keyOf = require('keyOf');
-var topLevelTypes = EventConstants.topLevelTypes;
-
-var isStartish = EventPluginUtils.isStartish;
-var isEndish = EventPluginUtils.isEndish;
-
-/**
- * Number of pixels that are tolerated in between a `touchStart` and `touchEnd`
- * in order to still be considered a 'tap' event.
- */
-var tapMoveThreshold = 10;
-var startCoords = {x: null, y: null};
-
-var Axis = {
-  x: {page: 'pageX', client: 'clientX', envScroll: 'currentPageScrollLeft'},
-  y: {page: 'pageY', client: 'clientY', envScroll: 'currentPageScrollTop'}
-};
-
-function getAxisCoordOfEvent(axis, nativeEvent) {
-  var singleTouch = TouchEventUtils.extractSingleTouch(nativeEvent);
-  if (singleTouch) {
-    return singleTouch[axis.page];
-  }
-  return axis.page in nativeEvent ?
-    nativeEvent[axis.page] :
-    nativeEvent[axis.client] + ViewportMetrics[axis.envScroll];
-}
-
-function getDistance(coords, nativeEvent) {
-  var pageX = getAxisCoordOfEvent(Axis.x, nativeEvent);
-  var pageY = getAxisCoordOfEvent(Axis.y, nativeEvent);
-  return Math.pow(
-    Math.pow(pageX - coords.x, 2) + Math.pow(pageY - coords.y, 2),
-    0.5
-  );
-}
-
-var dependencies = [
-  topLevelTypes.topMouseDown,
-  topLevelTypes.topMouseMove,
-  topLevelTypes.topMouseUp
-];
-
-if (EventPluginUtils.useTouchEvents) {
-  dependencies.push(
-    topLevelTypes.topTouchCancel,
-    topLevelTypes.topTouchEnd,
-    topLevelTypes.topTouchStart,
-    topLevelTypes.topTouchMove
-  );
-}
-
-var eventTypes = {
-  touchTap: {
-    phasedRegistrationNames: {
-      bubbled: keyOf({onTouchTap: null}),
-      captured: keyOf({onTouchTapCapture: null})
-    },
-    dependencies: dependencies
-  }
-};
-
-var TapEventPlugin = {
-
-  tapMoveThreshold: tapMoveThreshold,
-
-  eventTypes: eventTypes,
-
-  /**
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @see {EventPluginHub.extractEvents}
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
-      return null;
-    }
-    var event = null;
-    var distance = getDistance(startCoords, nativeEvent);
-    if (isEndish(topLevelType) && distance < tapMoveThreshold) {
-      event = SyntheticUIEvent.getPooled(
-        eventTypes.touchTap,
-        topLevelTargetID,
-        nativeEvent
-      );
-    }
-    if (isStartish(topLevelType)) {
-      startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent);
-      startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent);
-    } else if (isEndish(topLevelType)) {
-      startCoords.x = 0;
-      startCoords.y = 0;
-    }
-    EventPropagators.accumulateTwoPhaseDispatches(event);
-    return event;
-  }
-
-};
-
-module.exports = TapEventPlugin;
diff --git a/src/browser/eventPlugins/__tests__/AnalyticsEventPlugin-test.js b/src/browser/eventPlugins/__tests__/AnalyticsEventPlugin-test.js
deleted file mode 100644
index 68fe7261f1f..00000000000
--- a/src/browser/eventPlugins/__tests__/AnalyticsEventPlugin-test.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var mocks = require('mocks');
-
-describe('AnalyticsEventPlugin', function() {
-  var AnalyticsEventPluginFactory;
-  var EventPluginHub;
-  var EventPluginRegistry;
-  var React;
-  var ReactBrowserEventEmitter;
-  var ReactTestUtils;
-
-  var DefaultEventPluginOrder;
-  var EnterLeaveEventPlugin;
-  var ChangeEventPlugin;
-  var ReactInstanceHandles;
-  var SimpleEventPlugin;
-
-  beforeEach(function() {
-    AnalyticsEventPluginFactory = require('AnalyticsEventPluginFactory');
-    EventPluginHub = require('EventPluginHub');
-    EventPluginRegistry = require('EventPluginRegistry');
-    React = require('React');
-    ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-    ReactTestUtils = require('ReactTestUtils');
-
-    EventPluginRegistry._resetEventPlugins();
-
-    // Re-inject default events system after resetting.
-    DefaultEventPluginOrder = require('DefaultEventPluginOrder');
-    EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
-    ChangeEventPlugin = require('ChangeEventPlugin');
-    ReactInstanceHandles = require('ReactInstanceHandles');
-    SimpleEventPlugin = require('SimpleEventPlugin');
-
-    EventPluginHub.injection.injectEventPluginOrder(DefaultEventPluginOrder);
-    EventPluginHub.injection.injectInstanceHandle(ReactInstanceHandles);
-
-    EventPluginHub.injection.injectEventPluginsByName({
-      'SimpleEventPlugin': SimpleEventPlugin,
-      'EnterLeaveEventPlugin': EnterLeaveEventPlugin,
-      'ChangeEventPlugin': ChangeEventPlugin
-    });
-
-  });
-
-  it('should count events correctly', function() {
-    var numClickEvents = 5;
-    var numDoubleClickEvents = 7;
-    var TEST_ANALYTICS_ID = 'test_analytics_id';
-    var TestValidEvents = React.createClass({
-      render: function() {
-        return (
-          <div ref="testDiv"
-            data-analytics-id={TEST_ANALYTICS_ID}
-            data-analytics-events='click,doubleClick'>
-            Test
-          </div>
-        );
-      }
-    });
-    var renderedComponent =
-      ReactTestUtils.renderIntoDocument(<TestValidEvents />);
-
-    var cb = mocks.getMockFunction().mockImplementation(
-      function(analyticsData) {
-        expect(Object.keys(analyticsData).length).toBe(1);
-        expect(Object.keys(analyticsData[TEST_ANALYTICS_ID]).length).toBe(2);
-        expect(analyticsData[TEST_ANALYTICS_ID].click).toBe(numClickEvents);
-        expect(analyticsData[TEST_ANALYTICS_ID].doubleClick).toBe(
-          numDoubleClickEvents
-        );
-      }
-    );
-
-    EventPluginHub.injection.injectEventPluginsByName({
-      AnalyticsEventPlugin:
-        AnalyticsEventPluginFactory.createAnalyticsPlugin(cb)
-    });
-
-    // Simulate some clicks
-    for (var i = 0; i < numClickEvents; i++) {
-      ReactTestUtils.SimulateNative.click(renderedComponent.refs.testDiv);
-    }
-    // Simulate some double clicks
-    for (i = 0; i < numDoubleClickEvents; i++) {
-      ReactTestUtils.SimulateNative.doubleClick(renderedComponent.refs.testDiv);
-    }
-    // Simulate some other events not being tracked for analytics
-    ReactTestUtils.SimulateNative.focus(renderedComponent.refs.testDiv);
-
-    window.mockRunTimersOnce();
-    expect(cb).toBeCalled();
-  });
-
-  it('error non no callback', function() {
-    expect(function() {
-      AnalyticsEventPluginFactory.createAnalyticsPlugin(null);
-    }).toThrow();
-  });
-
-  it('error on invalid analytics events', function() {
-    var TestInvalidEvents = React.createClass({
-      render: function() {
-        return (
-          <div ref="testDiv"
-            data-analytics-id='test_invalid_events'
-            data-analytics-events='click,123'>
-            Test
-          </div>
-        );
-      }
-    });
-    var renderedComponent =
-      ReactTestUtils.renderIntoDocument(<TestInvalidEvents />);
-
-    var cb = mocks.getMockFunction();
-
-    EventPluginHub.injection.injectEventPluginsByName({
-      AnalyticsEventPlugin: AnalyticsEventPluginFactory.createAnalyticsPlugin(
-        cb
-      )
-    });
-
-    var error = false;
-    try {
-      ReactTestUtils.SimulateNative.click(renderedComponent.refs.testDiv);
-    } catch(e) {
-      error = true;
-    }
-
-    expect(error).toBe(true);
-  });
-});
diff --git a/src/browser/eventPlugins/__tests__/EnterLeaveEventPlugin-test.js b/src/browser/eventPlugins/__tests__/EnterLeaveEventPlugin-test.js
deleted file mode 100644
index 24d64f8e1cf..00000000000
--- a/src/browser/eventPlugins/__tests__/EnterLeaveEventPlugin-test.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var EnterLeaveEventPlugin;
-var EventConstants;
-var React;
-var ReactMount;
-
-var topLevelTypes;
-
-describe('EnterLeaveEventPlugin', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-
-    EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
-    EventConstants = require('EventConstants');
-    React = require('React');
-    ReactMount = require('ReactMount');
-
-    topLevelTypes = EventConstants.topLevelTypes;
-  });
-
-  it('should set relatedTarget properly in iframe', function() {
-    var iframe = document.createElement('iframe');
-    document.body.appendChild(iframe);
-
-    var iframeDocument = iframe.contentDocument;
-
-    iframeDocument.write(
-      '<!DOCTYPE html><html><head></head><body></body></html>'
-    );
-    iframeDocument.close();
-
-    var component = React.renderComponent(<div />, iframeDocument.body);
-    var div = component.getDOMNode();
-
-    var extracted = EnterLeaveEventPlugin.extractEvents(
-      topLevelTypes.topMouseOver,
-      div,
-      ReactMount.getID(div),
-      {target: div}
-    );
-    expect(extracted.length).toBe(2);
-
-    var leave = extracted[0];
-    var enter = extracted[1];
-
-    expect(leave.target).toBe(iframe.contentWindow);
-    expect(leave.relatedTarget).toBe(div);
-    expect(enter.target).toBe(div);
-    expect(enter.relatedTarget).toBe(iframe.contentWindow);
-  });
-});
diff --git a/src/browser/eventPlugins/__tests__/ResponderEventPlugin-test.js b/src/browser/eventPlugins/__tests__/ResponderEventPlugin-test.js
deleted file mode 100644
index eb90923f7e7..00000000000
--- a/src/browser/eventPlugins/__tests__/ResponderEventPlugin-test.js
+++ /dev/null
@@ -1,501 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var EventPluginHub;
-var EventConstants;
-var EventPropagators;
-var ReactInstanceHandles;
-var ResponderEventPlugin;
-var SyntheticEvent;
-
-var GRANDPARENT_ID = '.0';
-var PARENT_ID = '.0.0';
-var CHILD_ID = '.0.0.0';
-
-var topLevelTypes;
-var responderEventTypes;
-var spies;
-
-var DUMMY_NATIVE_EVENT = {};
-var DUMMY_RENDERED_TARGET = {};
-
-var onStartShouldSetResponder = function(id, cb, capture) {
-  var registrationNames = responderEventTypes
-    .startShouldSetResponder
-    .phasedRegistrationNames;
-  EventPluginHub.putListener(
-    id,
-    capture ? registrationNames.captured : registrationNames.bubbled,
-    cb
-  );
-};
-
-var onScrollShouldSetResponder = function(id, cb, capture) {
-  var registrationNames = responderEventTypes
-    .scrollShouldSetResponder
-    .phasedRegistrationNames;
-  EventPluginHub.putListener(
-    id,
-    capture ? registrationNames.captured : registrationNames.bubbled,
-    cb
-  );
-};
-
-var onMoveShouldSetResponder = function(id, cb, capture) {
-  var registrationNames = responderEventTypes
-    .moveShouldSetResponder
-    .phasedRegistrationNames;
-  EventPluginHub.putListener(
-    id,
-    capture ? registrationNames.captured : registrationNames.bubbled,
-    cb
-  );
-};
-
-
-var onResponderGrant = function(id, cb) {
-  EventPluginHub.putListener(
-    id,
-    responderEventTypes.responderGrant.registrationName,
-    cb
-  );
-};
-
-var extractForTouchStart = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topTouchStart,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-var extractForTouchMove = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topTouchMove,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-var extractForTouchEnd = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topTouchEnd,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-var extractForMouseDown = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topMouseDown,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-var extractForMouseMove = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topMouseMove,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-
-var extractForMouseUp = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topMouseUp,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-var extractForScroll = function(renderedTargetID) {
-  return ResponderEventPlugin.extractEvents(
-    topLevelTypes.topScroll,
-    DUMMY_NATIVE_EVENT,
-    renderedTargetID,
-    DUMMY_RENDERED_TARGET
-  );
-};
-
-
-var onGrantChild;
-var onGrantParent;
-var onGrantGrandParent;
-
-
-var existsInExtraction = function(extracted, test) {
-  if (Array.isArray(extracted)) {
-    for (var i = 0; i < extracted.length; i++) {
-      if (test(extracted[i])) {
-        return true;
-      }
-    }
-  } else if (extracted) {
-    return test(extracted);
-  }
-  return false;
-};
-
-/**
- * Helper validators.
- */
-function assertGrantEvent(id, extracted) {
-  var test = function(event) {
-    return event instanceof SyntheticEvent &&
-      event.dispatchConfig === responderEventTypes.responderGrant &&
-      event.dispatchMarker === id;
-  };
-  expect(ResponderEventPlugin.getResponderID()).toBe(id);
-  expect(existsInExtraction(extracted, test)).toBe(true);
-}
-
-function assertResponderMoveEvent(id, extracted) {
-  var test = function(event) {
-    return event instanceof SyntheticEvent &&
-      event.dispatchConfig === responderEventTypes.responderMove &&
-      event.dispatchMarker === id;
-  };
-  expect(ResponderEventPlugin.getResponderID()).toBe(id);
-  expect(existsInExtraction(extracted, test)).toBe(true);
-}
-
-function assertTerminateEvent(id, extracted) {
-  var test = function(event) {
-    return event instanceof SyntheticEvent &&
-      event.dispatchConfig === responderEventTypes.responderTerminate &&
-      event.dispatchMarker === id;
-  };
-  expect(ResponderEventPlugin.getResponderID()).not.toBe(id);
-  expect(existsInExtraction(extracted, test)).toBe(true);
-}
-
-function assertRelease(id, extracted) {
-  var test = function(event) {
-    return event instanceof SyntheticEvent &&
-      event.dispatchConfig === responderEventTypes.responderRelease &&
-      event.dispatchMarker === id;
-  };
-  expect(ResponderEventPlugin.getResponderID()).toBe(null);
-  expect(existsInExtraction(extracted, test)).toBe(true);
-}
-
-
-function assertNothingExtracted(extracted) {
-  expect(Array.isArray(extracted)).toBe(false);  // No grant events.
-  expect(Array.isArray(extracted)).toBeFalsy();
-}
-
-
-/**
- * TODO:
- * - Test that returning false from `responderTerminationRequest` will never
- *   cause the responder to be lost.
- * - Automate some of this testing by providing config data - generalize.
- */
-
-describe('ResponderEventPlugin', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-
-    EventPluginHub = require('EventPluginHub');
-    EventConstants = require('EventConstants');
-    EventPropagators = require('EventPropagators');
-    ReactInstanceHandles = require('ReactInstanceHandles');
-    ResponderEventPlugin = require('ResponderEventPlugin');
-    SyntheticEvent = require('SyntheticEvent');
-    EventPluginHub.injection.injectInstanceHandle(ReactInstanceHandles);
-
-    // dumpCache, in open-source tests, only resets existing mocks. It does not
-    // reset module-state though -- so we need to do this explicitly in the test
-    // for now. Once that's no longer the case, we can delete this line.
-    EventPluginHub.__purge();
-
-    topLevelTypes = EventConstants.topLevelTypes;
-    responderEventTypes = ResponderEventPlugin.eventTypes;
-
-    spies = {
-      onStartShouldSetResponderChild: function() {},
-      onStartShouldSetResponderParent: function() {},
-      onStartShouldSetResponderParentCapture: function() {},
-      onStartShouldSetResponderGrandParent: function() {},
-      onMoveShouldSetResponderParent: function() {},
-      onScrollShouldSetResponderParent: function() {}
-    };
-
-    onGrantChild = function() {};
-    onGrantParent = function() {};
-    onGrantGrandParent = function() {};
-  });
-
-  it('should not auto-set responder on touch start', function() {
-    // Notice we're not registering the startShould* handler.
-    var extracted = extractForTouchStart(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-  });
-
-  it('should not auto-set responder on mouse down', function() {
-    // Notice we're not registering the startShould* handler.
-    var extracted = extractForMouseDown(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-    extractForMouseUp(CHILD_ID); // Let up!
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-
-    // Register `onMoveShould*` handler.
-    spyOn(spies, 'onMoveShouldSetResponderParent').andReturn(true);
-    onMoveShouldSetResponder(PARENT_ID, spies.onMoveShouldSetResponderParent);
-    onResponderGrant(PARENT_ID, onGrantParent);
-    // Move mouse while not pressing down
-    extracted = extractForMouseMove(CHILD_ID);
-    assertNothingExtracted(extracted);
-    // Not going to call `onMoveShould`* if not touching.
-    expect(spies.onMoveShouldSetResponderParent.callCount).toBe(0);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-
-    // Now try the move extraction again, this time while holding down, and not
-    // letting up.
-    extracted = extractForMouseDown(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-
-    // Now moving can set the responder, if pressing down, even if there is no
-    // current responder.
-    extracted = extractForMouseMove(CHILD_ID);
-    expect(spies.onMoveShouldSetResponderParent.callCount).toBe(1);
-    expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);
-    assertGrantEvent(PARENT_ID, extracted);
-
-    extractForMouseUp(CHILD_ID);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-  });
-
-  it('should not extract a grant/release event if double start', function() {
-    // Return true - we should become the responder.
-    var extracted;
-    spyOn(spies, 'onStartShouldSetResponderChild').andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    onResponderGrant(CHILD_ID, onGrantChild);
-
-    extracted = extractForTouchStart(CHILD_ID);
-    assertGrantEvent(CHILD_ID, extracted);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(1);
-
-    // Now we do *not* clear out the touch via a simulated touch end. This mocks
-    // out an environment that likely will never happen, but could in some odd
-    // error state so it's nice to make sure we recover gracefully.
-    // extractForTouchEnd(CHILD_ID); // Clear the responder
-    extracted = extractForTouchStart(CHILD_ID);
-    assertNothingExtracted();
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(2);
-  });
-
-  it('should bubble/capture responder on start', function() {
-    // Return true - we should become the responder.
-    var extracted;
-    spyOn(spies, 'onStartShouldSetResponderParent').andReturn(true);
-    spyOn(spies, 'onStartShouldSetResponderChild').andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    onStartShouldSetResponder(PARENT_ID, spies.onStartShouldSetResponderParent);
-    onResponderGrant(CHILD_ID, onGrantChild);
-    onResponderGrant(PARENT_ID, onGrantParent);
-
-    // Nothing extracted if no responder.
-    extracted = extractForTouchMove(GRANDPARENT_ID);
-    assertNothingExtracted(extracted);
-
-    extracted = extractForTouchStart(CHILD_ID);
-    assertGrantEvent(CHILD_ID, extracted);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(1);
-    expect(spies.onStartShouldSetResponderParent.callCount).toBe(0);
-
-    // Even if moving on the grandparent, the child will receive responder moves
-    // (This is even true for mouse interactions - which we should absolutely
-    // test)
-    extracted = extractForTouchMove(GRANDPARENT_ID);
-    assertResponderMoveEvent(CHILD_ID, extracted);
-    extracted = extractForTouchMove(CHILD_ID); // Test move on child node too.
-    assertResponderMoveEvent(CHILD_ID, extracted);
-
-    // Reset the responder - id passed here shouldn't matter:
-    // TODO: Test varying the id here.
-    extracted = extractForTouchEnd(GRANDPARENT_ID); // Clear the responder
-    assertRelease(CHILD_ID, extracted);
-
-    // Now make sure the parent requests responder on capture.
-    spyOn(spies, 'onStartShouldSetResponderParentCapture').andReturn(true);
-    onStartShouldSetResponder(
-      PARENT_ID,
-      spies.onStartShouldSetResponderParent,
-      true    // Capture
-    );
-    onResponderGrant(PARENT_ID, onGrantGrandParent);
-    extracted = extractForTouchStart(PARENT_ID);
-    expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);
-    assertGrantEvent(PARENT_ID, extracted);
-    // Now move on various nodes, ensuring that the responder move is emitted to
-    // the parent node.
-    extracted = extractForTouchMove(GRANDPARENT_ID);
-    assertResponderMoveEvent(PARENT_ID, extracted);
-    extracted = extractForTouchMove(CHILD_ID); // Test move on child node too.
-    assertResponderMoveEvent(PARENT_ID, extracted);
-
-    // Reset the responder - id passed here shouldn't matter:
-    // TODO: Test varying the id here.
-    extracted = extractForTouchEnd(GRANDPARENT_ID); // Clear the responder
-    assertRelease(PARENT_ID, extracted);
-
-  });
-
-  it('should invoke callback to ask if responder is desired', function() {
-    // Return true - we should become the responder.
-    spyOn(spies, 'onStartShouldSetResponderChild').andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-
-    var extracted = extractForTouchStart(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(1);
-    expect(ResponderEventPlugin.getResponderID()).toBe(CHILD_ID);
-    extractForTouchEnd(CHILD_ID); // Clear the responder
-
-    // Now try returning false - we should not become the responder.
-    spies.onStartShouldSetResponderChild.andReturn(false);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    extracted = extractForTouchStart(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(2);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-    extractForTouchEnd(CHILD_ID);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null); // Still null
-
-    // Same thing as before but return true from "shouldSet".
-    spies.onStartShouldSetResponderChild.andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    onResponderGrant(CHILD_ID, onGrantChild);
-    extracted = extractForTouchStart(CHILD_ID);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(3);
-    assertGrantEvent(CHILD_ID, extracted);
-    extracted = extractForTouchEnd(CHILD_ID); // Clear the responder
-    assertRelease(CHILD_ID, extracted);
-  });
-
-  it('should give up responder to parent on move iff allowed', function() {
-    // Return true - we should become the responder.
-    var extracted;
-    spyOn(spies, 'onStartShouldSetResponderChild').andReturn(true);
-    spyOn(spies, 'onMoveShouldSetResponderParent').andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    onMoveShouldSetResponder(PARENT_ID, spies.onMoveShouldSetResponderParent);
-    onResponderGrant(CHILD_ID, onGrantChild);
-    onResponderGrant(PARENT_ID, onGrantParent);
-
-    spies.onStartShouldSetResponderChild.andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    extracted = extractForTouchStart(CHILD_ID);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(1);
-    expect(spies.onMoveShouldSetResponderParent.callCount).toBe(0); // none yet
-    assertGrantEvent(CHILD_ID, extracted);    // Child is the current responder
-
-    extracted = extractForTouchMove(CHILD_ID);
-    expect(spies.onMoveShouldSetResponderParent.callCount).toBe(1);
-    assertGrantEvent(PARENT_ID, extracted);
-    assertTerminateEvent(CHILD_ID, extracted);
-
-    extracted = extractForTouchEnd(CHILD_ID); // Clear the responder
-    assertRelease(PARENT_ID, extracted);
-  });
-
-  it('should responder move only on direct responder', function() {
-    // Return true - we should become the responder.
-    spyOn(spies, 'onStartShouldSetResponderChild').andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-
-    var extracted = extractForTouchStart(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(1);
-    expect(ResponderEventPlugin.getResponderID()).toBe(CHILD_ID);
-    extractForTouchEnd(CHILD_ID); // Clear the responder
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-
-    // Now try returning false - we should not become the responder.
-    spies.onStartShouldSetResponderChild.andReturn(false);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    extracted = extractForTouchStart(CHILD_ID);
-    assertNothingExtracted(extracted);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(2);
-    expect(ResponderEventPlugin.getResponderID()).toBe(null);
-    extractForTouchEnd(CHILD_ID); // Clear the responder
-
-    // Same thing as before but return true from "shouldSet".
-    spies.onStartShouldSetResponderChild.andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    onResponderGrant(CHILD_ID, onGrantChild);
-    extracted = extractForTouchStart(CHILD_ID);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(3);
-    assertGrantEvent(CHILD_ID, extracted);
-    extracted = extractForTouchEnd(CHILD_ID); // Clear the responder
-    assertRelease(CHILD_ID, extracted);
-  });
-
-  it('should give up responder to parent on scroll iff allowed', function() {
-    // Return true - we should become the responder.
-    var extracted;
-    spyOn(spies, 'onStartShouldSetResponderChild').andReturn(true);
-    spyOn(spies, 'onMoveShouldSetResponderParent').andReturn(false);
-    spyOn(spies, 'onScrollShouldSetResponderParent').andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    onMoveShouldSetResponder(PARENT_ID, spies.onMoveShouldSetResponderParent);
-    onScrollShouldSetResponder(
-      PARENT_ID,
-      spies.onScrollShouldSetResponderParent
-    );
-    onResponderGrant(CHILD_ID, onGrantChild);
-    onResponderGrant(PARENT_ID, onGrantParent);
-
-    spies.onStartShouldSetResponderChild.andReturn(true);
-    onStartShouldSetResponder(CHILD_ID, spies.onStartShouldSetResponderChild);
-    extracted = extractForTouchStart(CHILD_ID);
-    expect(spies.onStartShouldSetResponderChild.callCount).toBe(1);
-    expect(spies.onMoveShouldSetResponderParent.callCount).toBe(0); // none yet
-    assertGrantEvent(CHILD_ID, extracted);    // Child is the current responder
-
-    extracted = extractForTouchMove(CHILD_ID);
-    expect(spies.onMoveShouldSetResponderParent.callCount).toBe(1);
-    assertNothingExtracted(extracted);
-
-    extracted = extractForScroll(CHILD_ID); // Could have been parent here too.
-    expect(spies.onScrollShouldSetResponderParent.callCount).toBe(1);
-    assertGrantEvent(PARENT_ID, extracted);
-    assertTerminateEvent(CHILD_ID, extracted);
-
-    extracted = extractForTouchEnd(CHILD_ID); // Clear the responder
-    assertRelease(PARENT_ID, extracted);
-  });
-
-
-});
diff --git a/src/browser/server/ReactMarkupChecksum.js b/src/browser/server/ReactMarkupChecksum.js
deleted file mode 100644
index 2198c276805..00000000000
--- a/src/browser/server/ReactMarkupChecksum.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactMarkupChecksum
- */
-
-"use strict";
-
-var adler32 = require('adler32');
-
-var ReactMarkupChecksum = {
-  CHECKSUM_ATTR_NAME: 'data-react-checksum',
-
-  /**
-   * @param {string} markup Markup string
-   * @return {string} Markup string with checksum attribute attached
-   */
-  addChecksumToMarkup: function(markup) {
-    var checksum = adler32(markup);
-    return markup.replace(
-      '>',
-      ' ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="' + checksum + '">'
-    );
-  },
-
-  /**
-   * @param {string} markup to use
-   * @param {DOMElement} element root React element
-   * @returns {boolean} whether or not the markup is the same
-   */
-  canReuseMarkup: function(markup, element) {
-    var existingChecksum = element.getAttribute(
-      ReactMarkupChecksum.CHECKSUM_ATTR_NAME
-    );
-    existingChecksum = existingChecksum && parseInt(existingChecksum, 10);
-    var markupChecksum = adler32(markup);
-    return markupChecksum === existingChecksum;
-  }
-};
-
-module.exports = ReactMarkupChecksum;
diff --git a/src/browser/server/ReactServerRendering.js b/src/browser/server/ReactServerRendering.js
deleted file mode 100644
index cf61cc4aaab..00000000000
--- a/src/browser/server/ReactServerRendering.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @typechecks static-only
- * @providesModule ReactServerRendering
- */
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactMarkupChecksum = require('ReactMarkupChecksum');
-var ReactServerRenderingTransaction =
-  require('ReactServerRenderingTransaction');
-
-var instantiateReactComponent = require('instantiateReactComponent');
-var invariant = require('invariant');
-
-/**
- * @param {ReactComponent} component
- * @return {string} the HTML markup
- */
-function renderComponentToString(component) {
-  invariant(
-    ReactDescriptor.isValidDescriptor(component),
-    'renderComponentToString(): You must pass a valid ReactComponent.'
-  );
-
-  invariant(
-    !(arguments.length === 2 && typeof arguments[1] === 'function'),
-    'renderComponentToString(): This function became synchronous and now ' +
-    'returns the generated markup. Please remove the second parameter.'
-  );
-
-  var transaction;
-  try {
-    var id = ReactInstanceHandles.createReactRootID();
-    transaction = ReactServerRenderingTransaction.getPooled(false);
-
-    return transaction.perform(function() {
-      var componentInstance = instantiateReactComponent(component);
-      var markup = componentInstance.mountComponent(id, transaction, 0);
-      return ReactMarkupChecksum.addChecksumToMarkup(markup);
-    }, null);
-  } finally {
-    ReactServerRenderingTransaction.release(transaction);
-  }
-}
-
-/**
- * @param {ReactComponent} component
- * @return {string} the HTML markup, without the extra React ID and checksum
-* (for generating static pages)
- */
-function renderComponentToStaticMarkup(component) {
-  invariant(
-    ReactDescriptor.isValidDescriptor(component),
-    'renderComponentToStaticMarkup(): You must pass a valid ReactComponent.'
-  );
-
-  var transaction;
-  try {
-    var id = ReactInstanceHandles.createReactRootID();
-    transaction = ReactServerRenderingTransaction.getPooled(true);
-
-    return transaction.perform(function() {
-      var componentInstance = instantiateReactComponent(component);
-      return componentInstance.mountComponent(id, transaction, 0);
-    }, null);
-  } finally {
-    ReactServerRenderingTransaction.release(transaction);
-  }
-}
-
-module.exports = {
-  renderComponentToString: renderComponentToString,
-  renderComponentToStaticMarkup: renderComponentToStaticMarkup
-};
diff --git a/src/browser/server/ReactServerRenderingTransaction.js b/src/browser/server/ReactServerRenderingTransaction.js
deleted file mode 100644
index 2251f82f96b..00000000000
--- a/src/browser/server/ReactServerRenderingTransaction.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactServerRenderingTransaction
- * @typechecks
- */
-
-"use strict";
-
-var PooledClass = require('PooledClass');
-var CallbackQueue = require('CallbackQueue');
-var ReactPutListenerQueue = require('ReactPutListenerQueue');
-var Transaction = require('Transaction');
-
-var emptyFunction = require('emptyFunction');
-var mixInto = require('mixInto');
-
-/**
- * Provides a `CallbackQueue` queue for collecting `onDOMReady` callbacks
- * during the performing of the transaction.
- */
-var ON_DOM_READY_QUEUEING = {
-  /**
-   * Initializes the internal `onDOMReady` queue.
-   */
-  initialize: function() {
-    this.reactMountReady.reset();
-  },
-
-  close: emptyFunction
-};
-
-var PUT_LISTENER_QUEUEING = {
-  initialize: function() {
-    this.putListenerQueue.reset();
-  },
-
-  close: emptyFunction
-};
-
-/**
- * Executed within the scope of the `Transaction` instance. Consider these as
- * being member methods, but with an implied ordering while being isolated from
- * each other.
- */
-var TRANSACTION_WRAPPERS = [
-  PUT_LISTENER_QUEUEING,
-  ON_DOM_READY_QUEUEING
-];
-
-/**
- * @class ReactServerRenderingTransaction
- * @param {boolean} renderToStaticMarkup
- */
-function ReactServerRenderingTransaction(renderToStaticMarkup) {
-  this.reinitializeTransaction();
-  this.renderToStaticMarkup = renderToStaticMarkup;
-  this.reactMountReady = CallbackQueue.getPooled(null);
-  this.putListenerQueue = ReactPutListenerQueue.getPooled();
-}
-
-var Mixin = {
-  /**
-   * @see Transaction
-   * @abstract
-   * @final
-   * @return {array} Empty list of operation wrap proceedures.
-   */
-  getTransactionWrappers: function() {
-    return TRANSACTION_WRAPPERS;
-  },
-
-  /**
-   * @return {object} The queue to collect `onDOMReady` callbacks with.
-   */
-  getReactMountReady: function() {
-    return this.reactMountReady;
-  },
-
-  getPutListenerQueue: function() {
-    return this.putListenerQueue;
-  },
-
-  /**
-   * `PooledClass` looks for this, and will invoke this before allowing this
-   * instance to be resused.
-   */
-  destructor: function() {
-    CallbackQueue.release(this.reactMountReady);
-    this.reactMountReady = null;
-
-    ReactPutListenerQueue.release(this.putListenerQueue);
-    this.putListenerQueue = null;
-  }
-};
-
-
-mixInto(ReactServerRenderingTransaction, Transaction.Mixin);
-mixInto(ReactServerRenderingTransaction, Mixin);
-
-PooledClass.addPoolingTo(ReactServerRenderingTransaction);
-
-module.exports = ReactServerRenderingTransaction;
diff --git a/src/browser/server/ServerReactRootIndex.js b/src/browser/server/ServerReactRootIndex.js
deleted file mode 100644
index ec5dd9151f2..00000000000
--- a/src/browser/server/ServerReactRootIndex.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ServerReactRootIndex
- * @typechecks
- */
-
-"use strict";
-
-/**
- * Size of the reactRoot ID space. We generate random numbers for React root
- * IDs and if there's a collision the events and DOM update system will
- * get confused. In the future we need a way to generate GUIDs but for
- * now this will work on a smaller scale.
- */
-var GLOBAL_MOUNT_POINT_MAX = Math.pow(2, 53);
-
-var ServerReactRootIndex = {
-  createReactRootIndex: function() {
-    return Math.ceil(Math.random() * GLOBAL_MOUNT_POINT_MAX);
-  }
-};
-
-module.exports = ServerReactRootIndex;
diff --git a/src/browser/server/__tests__/ReactServerRendering-test.js b/src/browser/server/__tests__/ReactServerRendering-test.js
deleted file mode 100644
index 6af97d25021..00000000000
--- a/src/browser/server/__tests__/ReactServerRendering-test.js
+++ /dev/null
@@ -1,400 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-require('mock-modules')
-  .dontMock('ExecutionEnvironment')
-  .dontMock('React')
-  .dontMock('ReactMount')
-  .dontMock('ReactServerRendering')
-  .dontMock('ReactTestUtils')
-  .dontMock('ReactMarkupChecksum');
-
-var mocks = require('mocks');
-
-var ExecutionEnvironment;
-var React;
-var ReactMarkupChecksum;
-var ReactMount;
-var ReactReconcileTransaction;
-var ReactTestUtils;
-var ReactServerRendering;
-
-var ID_ATTRIBUTE_NAME;
-
-describe('ReactServerRendering', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    React = require('React');
-    ReactMarkupChecksum = require('ReactMarkupChecksum');
-    ReactMount = require('ReactMount');
-    ReactTestUtils = require('ReactTestUtils');
-    ReactReconcileTransaction = require('ReactReconcileTransaction');
-
-    ExecutionEnvironment = require('ExecutionEnvironment');
-    ExecutionEnvironment.canUseDOM = false;
-    ReactServerRendering = require('ReactServerRendering');
-
-    var DOMProperty = require('DOMProperty');
-    ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
-  });
-
-  describe('renderComponentToString', function() {
-    it('should generate simple markup', function() {
-      var response = ReactServerRendering.renderComponentToString(
-        <span>hello world</span>
-      );
-      expect(response).toMatch(
-        '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
-          ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">hello world</span>'
-      );
-    });
-
-    it('should not register event listeners', function() {
-      var EventPluginHub = require('EventPluginHub');
-      var cb = mocks.getMockFunction();
-
-      ReactServerRendering.renderComponentToString(
-        <span onClick={cb}>hello world</span>
-      );
-      expect(EventPluginHub.__getListenerBank()).toEqual({});
-    });
-
-    it('should render composite components', function() {
-      var Parent = React.createClass({
-        render: function() {
-          return <div><Child name="child" /></div>;
-        }
-      });
-      var Child = React.createClass({
-        render: function() {
-          return <span>My name is {this.props.name}</span>;
-        }
-      });
-      var response = ReactServerRendering.renderComponentToString(
-        <Parent />
-      );
-      expect(response).toMatch(
-        '<div ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
-          ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
-          '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">My name is </span>' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">child</span>' +
-          '</span>' +
-        '</div>'
-      );
-    });
-
-    it('should only execute certain lifecycle methods', function() {
-      function runTest() {
-        var lifecycle = [];
-        var TestComponent = React.createClass({
-          componentWillMount: function() {
-            lifecycle.push('componentWillMount');
-          },
-          componentDidMount: function() {
-            lifecycle.push('componentDidMount');
-          },
-          getInitialState: function() {
-            lifecycle.push('getInitialState');
-            return {name: 'TestComponent'};
-          },
-          render: function() {
-            lifecycle.push('render');
-            return <span>Component name: {this.state.name}</span>;
-          },
-          componentWillUpdate: function() {
-            lifecycle.push('componentWillUpdate');
-          },
-          componentDidUpdate: function() {
-            lifecycle.push('componentDidUpdate');
-          },
-          shouldComponentUpdate: function() {
-            lifecycle.push('shouldComponentUpdate');
-          },
-          componentWillReceiveProps: function() {
-            lifecycle.push('componentWillReceiveProps');
-          },
-          componentWillUnmount: function() {
-            lifecycle.push('componentWillUnmount');
-          }
-        });
-
-        var response = ReactServerRendering.renderComponentToString(
-          <TestComponent />
-        );
-
-        expect(response).toMatch(
-          '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
-            ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">Component name: </span>' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">TestComponent</span>' +
-          '</span>'
-        );
-        expect(lifecycle).toEqual(
-          ['getInitialState', 'componentWillMount', 'render']
-        );
-      }
-
-      runTest();
-
-      // This should work the same regardless of whether you can use DOM or not.
-      ExecutionEnvironment.canUseDOM = true;
-      runTest();
-    });
-
-    it('should have the correct mounting behavior', function() {
-      // This test is testing client-side behavior.
-      ExecutionEnvironment.canUseDOM = true;
-
-      var mountCount = 0;
-      var numClicks = 0;
-
-      var TestComponent = React.createClass({
-        componentDidMount: function() {
-          mountCount++;
-        },
-        click: function() {
-          numClicks++;
-        },
-        render: function() {
-          return (
-            <span ref="span" onClick={this.click}>Name: {this.props.name}</span>
-          );
-        }
-      });
-
-      var element = document.createElement('div');
-      React.renderComponent(<TestComponent />, element);
-
-      var lastMarkup = element.innerHTML;
-
-      // Exercise the update path. Markup should not change,
-      // but some lifecycle methods should be run again.
-      React.renderComponent(<TestComponent name="x" />, element);
-      expect(mountCount).toEqual(1);
-
-      // Unmount and remount. We should get another mount event and
-      // we should get different markup, as the IDs are unique each time.
-      React.unmountComponentAtNode(element);
-      expect(element.innerHTML).toEqual('');
-      React.renderComponent(<TestComponent name="x" />, element);
-      expect(mountCount).toEqual(2);
-      expect(element.innerHTML).not.toEqual(lastMarkup);
-
-      // Now kill the node and render it on top of server-rendered markup, as if
-      // we used server rendering. We should mount again, but the markup should
-      // be unchanged. We will append a sentinel at the end of innerHTML to be
-      // sure that innerHTML was not changed.
-      React.unmountComponentAtNode(element);
-      expect(element.innerHTML).toEqual('');
-
-      ExecutionEnvironment.canUseDOM = false;
-      lastMarkup = ReactServerRendering.renderComponentToString(
-        <TestComponent name="x" />
-      );
-      ExecutionEnvironment.canUseDOM = true;
-      element.innerHTML = lastMarkup + ' __sentinel__';
-
-      React.renderComponent(<TestComponent name="x" />, element);
-      expect(mountCount).toEqual(3);
-      expect(element.innerHTML.indexOf('__sentinel__') > -1).toBe(true);
-      React.unmountComponentAtNode(element);
-      expect(element.innerHTML).toEqual('');
-
-      // Now simulate a situation where the app is not idempotent. React should
-      // warn but do the right thing.
-      var _warn = console.warn;
-      console.warn = mocks.getMockFunction();
-      element.innerHTML = lastMarkup;
-      var instance = React.renderComponent(<TestComponent name="y" />, element);
-      expect(mountCount).toEqual(4);
-      expect(console.warn.mock.calls.length).toBe(1);
-      expect(element.innerHTML.length > 0).toBe(true);
-      expect(element.innerHTML).not.toEqual(lastMarkup);
-      console.warn = _warn;
-
-      // Ensure the events system works
-      expect(numClicks).toEqual(0);
-      ReactTestUtils.Simulate.click(instance.refs.span.getDOMNode());
-      expect(numClicks).toEqual(1);
-    });
-
-    it('should throw with silly args', function() {
-      expect(
-        ReactServerRendering.renderComponentToString.bind(
-          ReactServerRendering,
-          'not a component'
-        )
-      ).toThrow(
-        'Invariant Violation: renderComponentToString(): You must pass ' +
-        'a valid ReactComponent.'
-      );
-    });
-
-    it('should provide guidance for breaking API changes', function() {
-      expect(
-        ReactServerRendering.renderComponentToString.bind(
-          ReactServerRendering,
-          <div />,
-          function(){}
-        )
-      ).toThrow(
-        'Invariant Violation: renderComponentToString(): This function ' +
-        'became synchronous and now returns the generated markup. Please ' +
-        'remove the second parameter.'
-      );
-    });
-  });
-
-  describe('renderComponentToStaticMarkup', function() {
-    it('should not put checksum and React ID on components', function() {
-      var lifecycle = [];
-      var NestedComponent = React.createClass({
-        render: function() {
-          return <div>inner text</div>;
-        }
-      });
-
-      var TestComponent = React.createClass({
-        render: function() {
-          lifecycle.push('render');
-          return <span><NestedComponent /></span>;
-        }
-      });
-
-      var response = ReactServerRendering.renderComponentToStaticMarkup(
-        <TestComponent />
-      );
-
-      expect(response).toBe('<span><div>inner text</div></span>');
-    });
-
-    it('should not put checksum and React ID on text components', function() {
-      var TestComponent = React.createClass({
-        render: function() {
-          return <span>{'hello'} {'world'}</span>;
-        }
-      });
-
-      var response = ReactServerRendering.renderComponentToStaticMarkup(
-        <TestComponent />
-      );
-
-      expect(response).toBe('<span>hello world</span>');
-    });
-
-    it('should not register event listeners', function() {
-      var EventPluginHub = require('EventPluginHub');
-      var cb = mocks.getMockFunction();
-
-      ReactServerRendering.renderComponentToString(
-        <span onClick={cb}>hello world</span>
-      );
-      expect(EventPluginHub.__getListenerBank()).toEqual({});
-    });
-
-    it('should only execute certain lifecycle methods', function() {
-      function runTest() {
-        var lifecycle = [];
-        var TestComponent = React.createClass({
-          componentWillMount: function() {
-            lifecycle.push('componentWillMount');
-          },
-          componentDidMount: function() {
-            lifecycle.push('componentDidMount');
-          },
-          getInitialState: function() {
-            lifecycle.push('getInitialState');
-            return {name: 'TestComponent'};
-          },
-          render: function() {
-            lifecycle.push('render');
-            return <span>Component name: {this.state.name}</span>;
-          },
-          componentWillUpdate: function() {
-            lifecycle.push('componentWillUpdate');
-          },
-          componentDidUpdate: function() {
-            lifecycle.push('componentDidUpdate');
-          },
-          shouldComponentUpdate: function() {
-            lifecycle.push('shouldComponentUpdate');
-          },
-          componentWillReceiveProps: function() {
-            lifecycle.push('componentWillReceiveProps');
-          },
-          componentWillUnmount: function() {
-            lifecycle.push('componentWillUnmount');
-          }
-        });
-
-        var response = ReactServerRendering.renderComponentToStaticMarkup(
-          <TestComponent />
-        );
-
-        expect(response).toBe('<span>Component name: TestComponent</span>');
-        expect(lifecycle).toEqual(
-          ['getInitialState', 'componentWillMount', 'render']
-        );
-      }
-
-      runTest();
-
-      // This should work the same regardless of whether you can use DOM or not.
-      ExecutionEnvironment.canUseDOM = true;
-      runTest();
-    });
-
-    it('should throw with silly args', function() {
-      expect(
-        ReactServerRendering.renderComponentToStaticMarkup.bind(
-          ReactServerRendering,
-          'not a component'
-        )
-      ).toThrow(
-        'Invariant Violation: renderComponentToStaticMarkup(): You must pass ' +
-        'a valid ReactComponent.'
-      );
-    });
-
-    it('allows setState in componentWillMount without using DOM', function() {
-      var Component = React.createClass({
-        componentWillMount: function() {
-          this.setState({text: 'hello, world'});
-        },
-        render: function() {
-          return <div>{this.state.text}</div>;
-        }
-      });
-
-      ReactReconcileTransaction.prototype.perform = function() {
-        // We shouldn't ever be calling this on the server
-        throw new Error('Browser reconcile transaction should not be used');
-      };
-      var markup = ReactServerRendering.renderComponentToString(
-        <Component />
-      );
-      expect(markup.indexOf('hello, world') >= 0).toBe(true);
-    });
-  });
-});
diff --git a/src/browser/syntheticEvents/SyntheticClipboardEvent.js b/src/browser/syntheticEvents/SyntheticClipboardEvent.js
deleted file mode 100644
index f7184f51a77..00000000000
--- a/src/browser/syntheticEvents/SyntheticClipboardEvent.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticClipboardEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticEvent = require('SyntheticEvent');
-
-/**
- * @interface Event
- * @see http://www.w3.org/TR/clipboard-apis/
- */
-var ClipboardEventInterface = {
-  clipboardData: function(event) {
-    return (
-      'clipboardData' in event ?
-        event.clipboardData :
-        window.clipboardData
-    );
-  }
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticClipboardEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticEvent.augmentClass(SyntheticClipboardEvent, ClipboardEventInterface);
-
-module.exports = SyntheticClipboardEvent;
-
diff --git a/src/browser/syntheticEvents/SyntheticCompositionEvent.js b/src/browser/syntheticEvents/SyntheticCompositionEvent.js
deleted file mode 100644
index d700d46d4cf..00000000000
--- a/src/browser/syntheticEvents/SyntheticCompositionEvent.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticCompositionEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticEvent = require('SyntheticEvent');
-
-/**
- * @interface Event
- * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
- */
-var CompositionEventInterface = {
-  data: null
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticCompositionEvent(
-  dispatchConfig,
-  dispatchMarker,
-  nativeEvent) {
-  SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticEvent.augmentClass(
-  SyntheticCompositionEvent,
-  CompositionEventInterface
-);
-
-module.exports = SyntheticCompositionEvent;
-
diff --git a/src/browser/syntheticEvents/SyntheticDragEvent.js b/src/browser/syntheticEvents/SyntheticDragEvent.js
deleted file mode 100644
index 2cb0362f1ac..00000000000
--- a/src/browser/syntheticEvents/SyntheticDragEvent.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticDragEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticMouseEvent = require('SyntheticMouseEvent');
-
-/**
- * @interface DragEvent
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var DragEventInterface = {
-  dataTransfer: null
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticDragEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticMouseEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticMouseEvent.augmentClass(SyntheticDragEvent, DragEventInterface);
-
-module.exports = SyntheticDragEvent;
diff --git a/src/browser/syntheticEvents/SyntheticEvent.js b/src/browser/syntheticEvents/SyntheticEvent.js
deleted file mode 100644
index f6012d59cf3..00000000000
--- a/src/browser/syntheticEvents/SyntheticEvent.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var PooledClass = require('PooledClass');
-
-var emptyFunction = require('emptyFunction');
-var getEventTarget = require('getEventTarget');
-var merge = require('merge');
-var mergeInto = require('mergeInto');
-
-/**
- * @interface Event
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var EventInterface = {
-  type: null,
-  target: getEventTarget,
-  // currentTarget is set when dispatching; no use in copying it here
-  currentTarget: emptyFunction.thatReturnsNull,
-  eventPhase: null,
-  bubbles: null,
-  cancelable: null,
-  timeStamp: function(event) {
-    return event.timeStamp || Date.now();
-  },
-  defaultPrevented: null,
-  isTrusted: null
-};
-
-/**
- * Synthetic events are dispatched by event plugins, typically in response to a
- * top-level event delegation handler.
- *
- * These systems should generally use pooling to reduce the frequency of garbage
- * collection. The system should check `isPersistent` to determine whether the
- * event should be released into the pool after being dispatched. Users that
- * need a persisted event should invoke `persist`.
- *
- * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
- * normalizing browser quirks. Subclasses do not necessarily have to implement a
- * DOM interface; custom application-specific events can also subclass this.
- *
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- */
-function SyntheticEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  this.dispatchConfig = dispatchConfig;
-  this.dispatchMarker = dispatchMarker;
-  this.nativeEvent = nativeEvent;
-
-  var Interface = this.constructor.Interface;
-  for (var propName in Interface) {
-    if (!Interface.hasOwnProperty(propName)) {
-      continue;
-    }
-    var normalize = Interface[propName];
-    if (normalize) {
-      this[propName] = normalize(nativeEvent);
-    } else {
-      this[propName] = nativeEvent[propName];
-    }
-  }
-
-  var defaultPrevented = nativeEvent.defaultPrevented != null ?
-    nativeEvent.defaultPrevented :
-    nativeEvent.returnValue === false;
-  if (defaultPrevented) {
-    this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
-  } else {
-    this.isDefaultPrevented = emptyFunction.thatReturnsFalse;
-  }
-  this.isPropagationStopped = emptyFunction.thatReturnsFalse;
-}
-
-mergeInto(SyntheticEvent.prototype, {
-
-  preventDefault: function() {
-    this.defaultPrevented = true;
-    var event = this.nativeEvent;
-    event.preventDefault ? event.preventDefault() : event.returnValue = false;
-    this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
-  },
-
-  stopPropagation: function() {
-    var event = this.nativeEvent;
-    event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
-    this.isPropagationStopped = emptyFunction.thatReturnsTrue;
-  },
-
-  /**
-   * We release all dispatched `SyntheticEvent`s after each event loop, adding
-   * them back into the pool. This allows a way to hold onto a reference that
-   * won't be added back into the pool.
-   */
-  persist: function() {
-    this.isPersistent = emptyFunction.thatReturnsTrue;
-  },
-
-  /**
-   * Checks if this event should be released back into the pool.
-   *
-   * @return {boolean} True if this should not be released, false otherwise.
-   */
-  isPersistent: emptyFunction.thatReturnsFalse,
-
-  /**
-   * `PooledClass` looks for `destructor` on each instance it releases.
-   */
-  destructor: function() {
-    var Interface = this.constructor.Interface;
-    for (var propName in Interface) {
-      this[propName] = null;
-    }
-    this.dispatchConfig = null;
-    this.dispatchMarker = null;
-    this.nativeEvent = null;
-  }
-
-});
-
-SyntheticEvent.Interface = EventInterface;
-
-/**
- * Helper to reduce boilerplate when creating subclasses.
- *
- * @param {function} Class
- * @param {?object} Interface
- */
-SyntheticEvent.augmentClass = function(Class, Interface) {
-  var Super = this;
-
-  var prototype = Object.create(Super.prototype);
-  mergeInto(prototype, Class.prototype);
-  Class.prototype = prototype;
-  Class.prototype.constructor = Class;
-
-  Class.Interface = merge(Super.Interface, Interface);
-  Class.augmentClass = Super.augmentClass;
-
-  PooledClass.addPoolingTo(Class, PooledClass.threeArgumentPooler);
-};
-
-PooledClass.addPoolingTo(SyntheticEvent, PooledClass.threeArgumentPooler);
-
-module.exports = SyntheticEvent;
diff --git a/src/browser/syntheticEvents/SyntheticFocusEvent.js b/src/browser/syntheticEvents/SyntheticFocusEvent.js
deleted file mode 100644
index 91ea53e5266..00000000000
--- a/src/browser/syntheticEvents/SyntheticFocusEvent.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticFocusEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticUIEvent = require('SyntheticUIEvent');
-
-/**
- * @interface FocusEvent
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var FocusEventInterface = {
-  relatedTarget: null
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticFocusEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticUIEvent.augmentClass(SyntheticFocusEvent, FocusEventInterface);
-
-module.exports = SyntheticFocusEvent;
diff --git a/src/browser/syntheticEvents/SyntheticInputEvent.js b/src/browser/syntheticEvents/SyntheticInputEvent.js
deleted file mode 100644
index 8ba33ed4fcd..00000000000
--- a/src/browser/syntheticEvents/SyntheticInputEvent.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2013 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticInputEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticEvent = require('SyntheticEvent');
-
-/**
- * @interface Event
- * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
- *      /#events-inputevents
- */
-var InputEventInterface = {
-  data: null
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticInputEvent(
-  dispatchConfig,
-  dispatchMarker,
-  nativeEvent) {
-  SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticEvent.augmentClass(
-  SyntheticInputEvent,
-  InputEventInterface
-);
-
-module.exports = SyntheticInputEvent;
-
diff --git a/src/browser/syntheticEvents/SyntheticKeyboardEvent.js b/src/browser/syntheticEvents/SyntheticKeyboardEvent.js
deleted file mode 100644
index 8f6f4bbd7c1..00000000000
--- a/src/browser/syntheticEvents/SyntheticKeyboardEvent.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticKeyboardEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticUIEvent = require('SyntheticUIEvent');
-
-var getEventCharCode = require('getEventCharCode');
-var getEventKey = require('getEventKey');
-var getEventModifierState = require('getEventModifierState');
-
-/**
- * @interface KeyboardEvent
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var KeyboardEventInterface = {
-  key: getEventKey,
-  location: null,
-  ctrlKey: null,
-  shiftKey: null,
-  altKey: null,
-  metaKey: null,
-  repeat: null,
-  locale: null,
-  getModifierState: getEventModifierState,
-  // Legacy Interface
-  charCode: function(event) {
-    // `charCode` is the result of a KeyPress event and represents the value of
-    // the actual printable character.
-
-    // KeyPress is deprecated, but its replacement is not yet final and not
-    // implemented in any major browser. Only KeyPress has charCode.
-    if (event.type === 'keypress') {
-      return getEventCharCode(event);
-    }
-    return 0;
-  },
-  keyCode: function(event) {
-    // `keyCode` is the result of a KeyDown/Up event and represents the value of
-    // physical keyboard key.
-
-    // The actual meaning of the value depends on the users' keyboard layout
-    // which cannot be detected. Assuming that it is a US keyboard layout
-    // provides a surprisingly accurate mapping for US and European users.
-    // Due to this, it is left to the user to implement at this time.
-    if (event.type === 'keydown' || event.type === 'keyup') {
-      return event.keyCode;
-    }
-    return 0;
-  },
-  which: function(event) {
-    // `which` is an alias for either `keyCode` or `charCode` depending on the
-    // type of the event.
-    if (event.type === 'keypress') {
-      return getEventCharCode(event);
-    }
-    if (event.type === 'keydown' || event.type === 'keyup') {
-      return event.keyCode;
-    }
-    return 0;
-  }
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticKeyboardEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticUIEvent.augmentClass(SyntheticKeyboardEvent, KeyboardEventInterface);
-
-module.exports = SyntheticKeyboardEvent;
diff --git a/src/browser/syntheticEvents/SyntheticMouseEvent.js b/src/browser/syntheticEvents/SyntheticMouseEvent.js
deleted file mode 100644
index 1376808065b..00000000000
--- a/src/browser/syntheticEvents/SyntheticMouseEvent.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticMouseEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticUIEvent = require('SyntheticUIEvent');
-var ViewportMetrics = require('ViewportMetrics');
-
-var getEventModifierState = require('getEventModifierState');
-
-/**
- * @interface MouseEvent
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var MouseEventInterface = {
-  screenX: null,
-  screenY: null,
-  clientX: null,
-  clientY: null,
-  ctrlKey: null,
-  shiftKey: null,
-  altKey: null,
-  metaKey: null,
-  getModifierState: getEventModifierState,
-  button: function(event) {
-    // Webkit, Firefox, IE9+
-    // which:  1 2 3
-    // button: 0 1 2 (standard)
-    var button = event.button;
-    if ('which' in event) {
-      return button;
-    }
-    // IE<9
-    // which:  undefined
-    // button: 0 0 0
-    // button: 1 4 2 (onmouseup)
-    return button === 2 ? 2 : button === 4 ? 1 : 0;
-  },
-  buttons: null,
-  relatedTarget: function(event) {
-    return event.relatedTarget || (
-      event.fromElement === event.srcElement ?
-        event.toElement :
-        event.fromElement
-    );
-  },
-  // "Proprietary" Interface.
-  pageX: function(event) {
-    return 'pageX' in event ?
-      event.pageX :
-      event.clientX + ViewportMetrics.currentScrollLeft;
-  },
-  pageY: function(event) {
-    return 'pageY' in event ?
-      event.pageY :
-      event.clientY + ViewportMetrics.currentScrollTop;
-  }
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticMouseEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticUIEvent.augmentClass(SyntheticMouseEvent, MouseEventInterface);
-
-module.exports = SyntheticMouseEvent;
diff --git a/src/browser/syntheticEvents/SyntheticTouchEvent.js b/src/browser/syntheticEvents/SyntheticTouchEvent.js
deleted file mode 100644
index b7ad992a51e..00000000000
--- a/src/browser/syntheticEvents/SyntheticTouchEvent.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticTouchEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticUIEvent = require('SyntheticUIEvent');
-
-var getEventModifierState = require('getEventModifierState');
-
-/**
- * @interface TouchEvent
- * @see http://www.w3.org/TR/touch-events/
- */
-var TouchEventInterface = {
-  touches: null,
-  targetTouches: null,
-  changedTouches: null,
-  altKey: null,
-  metaKey: null,
-  ctrlKey: null,
-  shiftKey: null,
-  getModifierState: getEventModifierState
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticUIEvent}
- */
-function SyntheticTouchEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticUIEvent.augmentClass(SyntheticTouchEvent, TouchEventInterface);
-
-module.exports = SyntheticTouchEvent;
diff --git a/src/browser/syntheticEvents/SyntheticUIEvent.js b/src/browser/syntheticEvents/SyntheticUIEvent.js
deleted file mode 100644
index 02537f3af3b..00000000000
--- a/src/browser/syntheticEvents/SyntheticUIEvent.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticUIEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticEvent = require('SyntheticEvent');
-
-var getEventTarget = require('getEventTarget');
-
-/**
- * @interface UIEvent
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var UIEventInterface = {
-  view: function(event) {
-    if (event.view) {
-      return event.view;
-    }
-
-    var target = getEventTarget(event);
-    if (target != null && target.window === target) {
-      // target is a window object
-      return target;
-    }
-
-    var doc = target.ownerDocument;
-    // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
-    if (doc) {
-      return doc.defaultView || doc.parentWindow;
-    } else {
-      return window;
-    }
-  },
-  detail: function(event) {
-    return event.detail || 0;
-  }
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticEvent}
- */
-function SyntheticUIEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticEvent.augmentClass(SyntheticUIEvent, UIEventInterface);
-
-module.exports = SyntheticUIEvent;
diff --git a/src/browser/syntheticEvents/SyntheticWheelEvent.js b/src/browser/syntheticEvents/SyntheticWheelEvent.js
deleted file mode 100644
index 8fb92fd34aa..00000000000
--- a/src/browser/syntheticEvents/SyntheticWheelEvent.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SyntheticWheelEvent
- * @typechecks static-only
- */
-
-"use strict";
-
-var SyntheticMouseEvent = require('SyntheticMouseEvent');
-
-/**
- * @interface WheelEvent
- * @see http://www.w3.org/TR/DOM-Level-3-Events/
- */
-var WheelEventInterface = {
-  deltaX: function(event) {
-    return (
-      'deltaX' in event ? event.deltaX :
-      // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
-      'wheelDeltaX' in event ? -event.wheelDeltaX : 0
-    );
-  },
-  deltaY: function(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
-    );
-  },
-  deltaZ: null,
-
-  // Browsers without "deltaMode" is reporting in raw wheel delta where one
-  // notch on the scroll is always +/- 120, roughly equivalent to pixels.
-  // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
-  // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
-  deltaMode: null
-};
-
-/**
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {string} dispatchMarker Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @extends {SyntheticMouseEvent}
- */
-function SyntheticWheelEvent(dispatchConfig, dispatchMarker, nativeEvent) {
-  SyntheticMouseEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
-}
-
-SyntheticMouseEvent.augmentClass(SyntheticWheelEvent, WheelEventInterface);
-
-module.exports = SyntheticWheelEvent;
diff --git a/src/browser/syntheticEvents/__tests__/SyntheticEvent-test.js b/src/browser/syntheticEvents/__tests__/SyntheticEvent-test.js
deleted file mode 100644
index 5a072728fa4..00000000000
--- a/src/browser/syntheticEvents/__tests__/SyntheticEvent-test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var SyntheticEvent;
-
-describe('SyntheticEvent', function() {
-  var createEvent;
-
-  beforeEach(function() {
-    SyntheticEvent = require('SyntheticEvent');
-
-    createEvent = function(nativeEvent) {
-      return SyntheticEvent.getPooled({}, '', nativeEvent);
-    };
-  });
-
-  it('should normalize `target` from the nativeEvent', function() {
-    var target = document.createElement('div');
-    var syntheticEvent = createEvent({srcElement: target});
-
-    expect(syntheticEvent.target).toBe(target);
-    expect(syntheticEvent.type).toBe(undefined);
-  });
-
-  it('should be able to `preventDefault`', function() {
-    var nativeEvent = {};
-    var syntheticEvent = createEvent(nativeEvent);
-
-    expect(syntheticEvent.isDefaultPrevented()).toBe(false);
-    syntheticEvent.preventDefault();
-    expect(syntheticEvent.isDefaultPrevented()).toBe(true);
-
-    expect(syntheticEvent.defaultPrevented).toBe(true);
-
-    expect(nativeEvent.returnValue).toBe(false);
-  });
-
-  it('should be prevented if nativeEvent is prevented', function() {
-    expect(
-      createEvent({defaultPrevented: true}).isDefaultPrevented()
-    ).toBe(true);
-    expect(createEvent({returnValue: false}).isDefaultPrevented()).toBe(true);
-  });
-
-  it('should be able to `stopPropagation`', function() {
-    var nativeEvent = {};
-    var syntheticEvent = createEvent(nativeEvent);
-
-    expect(syntheticEvent.isPropagationStopped()).toBe(false);
-    syntheticEvent.stopPropagation();
-    expect(syntheticEvent.isPropagationStopped()).toBe(true);
-
-    expect(nativeEvent.cancelBubble).toBe(true);
-  });
-
-  it('should be able to `persist`', function() {
-    var syntheticEvent = createEvent({});
-
-    expect(syntheticEvent.isPersistent()).toBe(false);
-    syntheticEvent.persist();
-    expect(syntheticEvent.isPersistent()).toBe(true);
-  });
-
-});
diff --git a/src/browser/syntheticEvents/__tests__/SyntheticWheelEvent-test.js b/src/browser/syntheticEvents/__tests__/SyntheticWheelEvent-test.js
deleted file mode 100644
index 4cf6ffd2b9c..00000000000
--- a/src/browser/syntheticEvents/__tests__/SyntheticWheelEvent-test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var SyntheticWheelEvent;
-
-describe('SyntheticWheelEvent', function() {
-  var createEvent;
-
-  beforeEach(function() {
-    SyntheticWheelEvent = require('SyntheticWheelEvent');
-
-    createEvent = function(nativeEvent) {
-      return SyntheticWheelEvent.getPooled({}, '', nativeEvent);
-    };
-  });
-
-  it('should normalize properties from the Event interface', function() {
-    var target = document.createElement('div');
-    var syntheticEvent = createEvent({srcElement: target});
-
-    expect(syntheticEvent.target).toBe(target);
-    expect(syntheticEvent.type).toBe(undefined);
-  });
-
-  it('should normalize properties from the MouseEvent interface', function() {
-    expect(createEvent({which: 2, button: 1}).button).toBe(1);
-  });
-
-  it('should normalize properties from the WheelEvent interface', function() {
-    var standardEvent = createEvent({deltaX: 10, deltaY: -50});
-    expect(standardEvent.deltaX).toBe(10);
-    expect(standardEvent.deltaY).toBe(-50);
-
-    var webkitEvent = createEvent({wheelDeltaX: -10, wheelDeltaY: 50});
-    expect(webkitEvent.deltaX).toBe(10);
-    expect(webkitEvent.deltaY).toBe(-50);
-  });
-
-  it('should be able to `preventDefault` and `stopPropagation`', function() {
-    var nativeEvent = {};
-    var syntheticEvent = createEvent(nativeEvent);
-
-    expect(syntheticEvent.isDefaultPrevented()).toBe(false);
-    syntheticEvent.preventDefault();
-    expect(syntheticEvent.isDefaultPrevented()).toBe(true);
-
-    expect(syntheticEvent.isPropagationStopped()).toBe(false);
-    syntheticEvent.stopPropagation();
-    expect(syntheticEvent.isPropagationStopped()).toBe(true);
-  });
-
-  it('should be able to `persist`', function() {
-    var syntheticEvent = createEvent({});
-
-    expect(syntheticEvent.isPersistent()).toBe(false);
-    syntheticEvent.persist();
-    expect(syntheticEvent.isPersistent()).toBe(true);
-  });
-
-});
diff --git a/src/browser/ui/React.js b/src/browser/ui/React.js
deleted file mode 100644
index 951502d92fc..00000000000
--- a/src/browser/ui/React.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule React
- */
-
-"use strict";
-
-// TODO: Move this elsewhere - it only exists in open source until a better
-// solution is found.
-require('Object.es6');
-
-var DOMPropertyOperations = require('DOMPropertyOperations');
-var EventPluginUtils = require('EventPluginUtils');
-var ReactChildren = require('ReactChildren');
-var ReactComponent = require('ReactComponent');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactContext = require('ReactContext');
-var ReactCurrentOwner = require('ReactCurrentOwner');
-var ReactDescriptor = require('ReactDescriptor');
-var ReactDescriptorValidator = require('ReactDescriptorValidator');
-var ReactDOM = require('ReactDOM');
-var ReactDOMComponent = require('ReactDOMComponent');
-var ReactDefaultInjection = require('ReactDefaultInjection');
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactMount = require('ReactMount');
-var ReactMultiChild = require('ReactMultiChild');
-var ReactPerf = require('ReactPerf');
-var ReactPropTypes = require('ReactPropTypes');
-var ReactServerRendering = require('ReactServerRendering');
-var ReactTextComponent = require('ReactTextComponent');
-
-var onlyChild = require('onlyChild');
-
-ReactDefaultInjection.inject();
-
-// TODO: Restore the real create descriptor
-// var createDescriptor = ReactDescriptor.createDescriptor;
-var createDescriptor = function(type, props, children) {
-  // Because of issues with mocks, we temporarily execute the factory function
-  var args = Array.prototype.slice.call(arguments, 1);
-  return type.apply(null, args);
-};
-var createFactory = ReactDescriptor.createFactory;
-
-if (__DEV__) {
-  // createDescriptor = ReactDescriptorValidator.createDescriptor;
-  createFactory = ReactDescriptorValidator.createFactory;
-}
-
-var React = {
-  Children: {
-    map: ReactChildren.map,
-    forEach: ReactChildren.forEach,
-    count: ReactChildren.count,
-    only: onlyChild
-  },
-  DOM: ReactDOM,
-  PropTypes: ReactPropTypes,
-  initializeTouchEvents: function(shouldUseTouch) {
-    EventPluginUtils.useTouchEvents = shouldUseTouch;
-  },
-  createClass: ReactCompositeComponent.createClass,
-  createDescriptor: createDescriptor,
-  createFactory: createFactory,
-  constructAndRenderComponent: ReactMount.constructAndRenderComponent,
-  constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID,
-  renderComponent: ReactPerf.measure(
-    'React',
-    'renderComponent',
-    ReactMount.renderComponent
-  ),
-  renderComponentToString: ReactServerRendering.renderComponentToString,
-  renderComponentToStaticMarkup:
-    ReactServerRendering.renderComponentToStaticMarkup,
-  unmountComponentAtNode: ReactMount.unmountComponentAtNode,
-  isValidClass: ReactDescriptor.isValidFactory,
-  isValidComponent: ReactDescriptor.isValidDescriptor,
-  withContext: ReactContext.withContext,
-  __internals: {
-    Component: ReactComponent,
-    CurrentOwner: ReactCurrentOwner,
-    DOMComponent: ReactDOMComponent,
-    DOMPropertyOperations: DOMPropertyOperations,
-    InstanceHandles: ReactInstanceHandles,
-    Mount: ReactMount,
-    MultiChild: ReactMultiChild,
-    TextComponent: ReactTextComponent
-  }
-};
-
-if (__DEV__) {
-  var ExecutionEnvironment = require('ExecutionEnvironment');
-  if (ExecutionEnvironment.canUseDOM &&
-      window.top === window.self &&
-      navigator.userAgent.indexOf('Chrome') > -1) {
-    console.debug(
-      'Download the React DevTools for a better development experience: ' +
-      'http://fb.me/react-devtools'
-    );
-
-    var expectedFeatures = [
-      // shims
-      Array.isArray,
-      Array.prototype.every,
-      Array.prototype.forEach,
-      Array.prototype.indexOf,
-      Array.prototype.map,
-      Date.now,
-      Function.prototype.bind,
-      Object.keys,
-      String.prototype.split,
-      String.prototype.trim,
-
-      // shams
-      Object.create,
-      Object.freeze
-    ];
-
-    for (var i in expectedFeatures) {
-      if (!expectedFeatures[i]) {
-        console.error(
-          'One or more ES5 shim/shams expected by React are not available: ' +
-          'http://fb.me/react-warning-polyfills'
-        );
-        break;
-      }
-    }
-  }
-}
-
-// Version exists only in the open-source version of React, not in Facebook's
-// internal version.
-React.version = '0.12.0-alpha';
-
-module.exports = React;
diff --git a/src/browser/ui/ReactBrowserComponentMixin.js b/src/browser/ui/ReactBrowserComponentMixin.js
deleted file mode 100644
index efb81599918..00000000000
--- a/src/browser/ui/ReactBrowserComponentMixin.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactBrowserComponentMixin
- */
-
-"use strict";
-
-var ReactEmptyComponent = require('ReactEmptyComponent');
-var ReactMount = require('ReactMount');
-
-var invariant = require('invariant');
-
-var ReactBrowserComponentMixin = {
-  /**
-   * Returns the DOM node rendered by this component.
-   *
-   * @return {DOMElement} The root node of this component.
-   * @final
-   * @protected
-   */
-  getDOMNode: function() {
-    invariant(
-      this.isMounted(),
-      'getDOMNode(): A component must be mounted to have a DOM node.'
-    );
-    if (ReactEmptyComponent.isNullComponentID(this._rootNodeID)) {
-      return null;
-    }
-    return ReactMount.getNode(this._rootNodeID);
-  }
-};
-
-module.exports = ReactBrowserComponentMixin;
diff --git a/src/browser/ui/ReactComponentBrowserEnvironment.js b/src/browser/ui/ReactComponentBrowserEnvironment.js
deleted file mode 100644
index 6529e8905cd..00000000000
--- a/src/browser/ui/ReactComponentBrowserEnvironment.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactComponentBrowserEnvironment
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var ReactDOMIDOperations = require('ReactDOMIDOperations');
-var ReactMarkupChecksum = require('ReactMarkupChecksum');
-var ReactMount = require('ReactMount');
-var ReactPerf = require('ReactPerf');
-var ReactReconcileTransaction = require('ReactReconcileTransaction');
-
-var getReactRootElementInContainer = require('getReactRootElementInContainer');
-var invariant = require('invariant');
-var setInnerHTML = require('setInnerHTML');
-
-
-var ELEMENT_NODE_TYPE = 1;
-var DOC_NODE_TYPE = 9;
-
-
-/**
- * Abstracts away all functionality of `ReactComponent` requires knowledge of
- * the browser context.
- */
-var ReactComponentBrowserEnvironment = {
-  ReactReconcileTransaction: ReactReconcileTransaction,
-
-  BackendIDOperations: ReactDOMIDOperations,
-
-  /**
-   * If a particular environment requires that some resources be cleaned up,
-   * specify this in the injected Mixin. In the DOM, we would likely want to
-   * purge any cached node ID lookups.
-   *
-   * @private
-   */
-  unmountIDFromEnvironment: function(rootNodeID) {
-    ReactMount.purgeID(rootNodeID);
-  },
-
-  /**
-   * @param {string} markup Markup string to place into the DOM Element.
-   * @param {DOMElement} container DOM Element to insert markup into.
-   * @param {boolean} shouldReuseMarkup Should reuse the existing markup in the
-   * container if possible.
-   */
-  mountImageIntoNode: ReactPerf.measure(
-    'ReactComponentBrowserEnvironment',
-    'mountImageIntoNode',
-    function(markup, container, shouldReuseMarkup) {
-      invariant(
-        container && (
-          container.nodeType === ELEMENT_NODE_TYPE ||
-            container.nodeType === DOC_NODE_TYPE
-        ),
-        'mountComponentIntoNode(...): Target container is not valid.'
-      );
-
-      if (shouldReuseMarkup) {
-        if (ReactMarkupChecksum.canReuseMarkup(
-          markup,
-          getReactRootElementInContainer(container))) {
-          return;
-        } else {
-          invariant(
-            container.nodeType !== DOC_NODE_TYPE,
-            'You\'re trying to render a component to the document using ' +
-            'server rendering but the checksum was invalid. This usually ' +
-            'means you rendered a different component type or props on ' +
-            'the client from the one on the server, or your render() ' +
-            'methods are impure. React cannot handle this case due to ' +
-            'cross-browser quirks by rendering at the document root. You ' +
-            'should look for environment dependent code in your components ' +
-            'and ensure the props are the same client and server side.'
-          );
-
-          if (__DEV__) {
-            console.warn(
-              'React attempted to use reuse markup in a container but the ' +
-              'checksum was invalid. This generally means that you are ' +
-              'using server rendering and the markup generated on the ' +
-              'server was not what the client was expecting. React injected ' +
-              'new markup to compensate which works but you have lost many ' +
-              'of the benefits of server rendering. Instead, figure out ' +
-              'why the markup being generated is different on the client ' +
-              'or server.'
-            );
-          }
-        }
-      }
-
-      invariant(
-        container.nodeType !== DOC_NODE_TYPE,
-        'You\'re trying to render a component to the document but ' +
-          'you didn\'t use server rendering. We can\'t do this ' +
-          'without using server rendering due to cross-browser quirks. ' +
-          'See renderComponentToString() for server rendering.'
-      );
-
-      setInnerHTML(container, markup);
-    }
-  )
-};
-
-module.exports = ReactComponentBrowserEnvironment;
diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js
deleted file mode 100644
index 70c0ceb9e0a..00000000000
--- a/src/browser/ui/ReactDOMComponent.js
+++ /dev/null
@@ -1,418 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMComponent
- * @typechecks static-only
- */
-
-"use strict";
-
-var CSSPropertyOperations = require('CSSPropertyOperations');
-var DOMProperty = require('DOMProperty');
-var DOMPropertyOperations = require('DOMPropertyOperations');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactComponent = require('ReactComponent');
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-var ReactMount = require('ReactMount');
-var ReactMultiChild = require('ReactMultiChild');
-var ReactPerf = require('ReactPerf');
-
-var escapeTextForBrowser = require('escapeTextForBrowser');
-var invariant = require('invariant');
-var keyOf = require('keyOf');
-var merge = require('merge');
-var mixInto = require('mixInto');
-
-var deleteListener = ReactBrowserEventEmitter.deleteListener;
-var listenTo = ReactBrowserEventEmitter.listenTo;
-var registrationNameModules = ReactBrowserEventEmitter.registrationNameModules;
-
-// For quickly matching children type, to test if can be treated as content.
-var CONTENT_TYPES = {'string': true, 'number': true};
-
-var STYLE = keyOf({style: null});
-
-var ELEMENT_NODE_TYPE = 1;
-
-/**
- * @param {?object} props
- */
-function assertValidProps(props) {
-  if (!props) {
-    return;
-  }
-  // Note the use of `==` which checks for null or undefined.
-  invariant(
-    props.children == null || props.dangerouslySetInnerHTML == null,
-    'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
-  );
-  invariant(
-    props.style == null || typeof props.style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-    'not a string.'
-  );
-}
-
-function putListener(id, registrationName, listener, transaction) {
-  var container = ReactMount.findReactContainerForID(id);
-  if (container) {
-    var doc = container.nodeType === ELEMENT_NODE_TYPE ?
-      container.ownerDocument :
-      container;
-    listenTo(registrationName, doc);
-  }
-  transaction.getPutListenerQueue().enqueuePutListener(
-    id,
-    registrationName,
-    listener
-  );
-}
-
-
-/**
- * @constructor ReactDOMComponent
- * @extends ReactComponent
- * @extends ReactMultiChild
- */
-function ReactDOMComponent(tag, omitClose) {
-  this._tagOpen = '<' + tag;
-  this._tagClose = omitClose ? '' : '</' + tag + '>';
-  this.tagName = tag.toUpperCase();
-}
-
-ReactDOMComponent.Mixin = {
-
-  /**
-   * Generates root tag markup then recurses. This method has side effects and
-   * is not idempotent.
-   *
-   * @internal
-   * @param {string} rootID The root DOM ID for this node.
-   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-   * @param {number} mountDepth number of components in the owner hierarchy
-   * @return {string} The computed markup.
-   */
-  mountComponent: ReactPerf.measure(
-    'ReactDOMComponent',
-    'mountComponent',
-    function(rootID, transaction, mountDepth) {
-      ReactComponent.Mixin.mountComponent.call(
-        this,
-        rootID,
-        transaction,
-        mountDepth
-      );
-      assertValidProps(this.props);
-      return (
-        this._createOpenTagMarkupAndPutListeners(transaction) +
-        this._createContentMarkup(transaction) +
-        this._tagClose
-      );
-    }
-  ),
-
-  /**
-   * Creates markup for the open tag and all attributes.
-   *
-   * This method has side effects because events get registered.
-   *
-   * Iterating over object properties is faster than iterating over arrays.
-   * @see http://jsperf.com/obj-vs-arr-iteration
-   *
-   * @private
-   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-   * @return {string} Markup of opening tag.
-   */
-  _createOpenTagMarkupAndPutListeners: function(transaction) {
-    var props = this.props;
-    var ret = this._tagOpen;
-
-    for (var propKey in props) {
-      if (!props.hasOwnProperty(propKey)) {
-        continue;
-      }
-      var propValue = props[propKey];
-      if (propValue == null) {
-        continue;
-      }
-      if (registrationNameModules.hasOwnProperty(propKey)) {
-        putListener(this._rootNodeID, propKey, propValue, transaction);
-      } else {
-        if (propKey === STYLE) {
-          if (propValue) {
-            propValue = props.style = merge(props.style);
-          }
-          propValue = CSSPropertyOperations.createMarkupForStyles(propValue);
-        }
-        var markup =
-          DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
-        if (markup) {
-          ret += ' ' + markup;
-        }
-      }
-    }
-
-    // For static pages, no need to put React ID and checksum. Saves lots of
-    // bytes.
-    if (transaction.renderToStaticMarkup) {
-      return ret + '>';
-    }
-
-    var markupForID = DOMPropertyOperations.createMarkupForID(this._rootNodeID);
-    return ret + ' ' + markupForID + '>';
-  },
-
-  /**
-   * Creates markup for the content between the tags.
-   *
-   * @private
-   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-   * @return {string} Content markup.
-   */
-  _createContentMarkup: function(transaction) {
-    // Intentional use of != to avoid catching zero/false.
-    var innerHTML = this.props.dangerouslySetInnerHTML;
-    if (innerHTML != null) {
-      if (innerHTML.__html != null) {
-        return innerHTML.__html;
-      }
-    } else {
-      var contentToUse =
-        CONTENT_TYPES[typeof this.props.children] ? this.props.children : null;
-      var childrenToUse = contentToUse != null ? null : this.props.children;
-      if (contentToUse != null) {
-        return escapeTextForBrowser(contentToUse);
-      } else if (childrenToUse != null) {
-        var mountImages = this.mountChildren(
-          childrenToUse,
-          transaction
-        );
-        return mountImages.join('');
-      }
-    }
-    return '';
-  },
-
-  receiveComponent: function(nextDescriptor, transaction) {
-    if (nextDescriptor === this._descriptor &&
-        nextDescriptor._owner != null) {
-      // Since descriptors are immutable after the owner is rendered,
-      // we can do a cheap identity compare here to determine if this is a
-      // superfluous reconcile. It's possible for state to be mutable but such
-      // change should trigger an update of the owner which would recreate
-      // the descriptor. We explicitly check for the existence of an owner since
-      // it's possible for a descriptor created outside a composite to be
-      // deeply mutated and reused.
-      return;
-    }
-
-    ReactComponent.Mixin.receiveComponent.call(
-      this,
-      nextDescriptor,
-      transaction
-    );
-  },
-
-  /**
-   * Updates a native DOM component after it has already been allocated and
-   * attached to the DOM. Reconciles the root DOM node, then recurses.
-   *
-   * @param {ReactReconcileTransaction} transaction
-   * @param {ReactDescriptor} prevDescriptor
-   * @internal
-   * @overridable
-   */
-  updateComponent: ReactPerf.measure(
-    'ReactDOMComponent',
-    'updateComponent',
-    function(transaction, prevDescriptor) {
-      assertValidProps(this._descriptor.props);
-      ReactComponent.Mixin.updateComponent.call(
-        this,
-        transaction,
-        prevDescriptor
-      );
-      this._updateDOMProperties(prevDescriptor.props, transaction);
-      this._updateDOMChildren(prevDescriptor.props, transaction);
-    }
-  ),
-
-  /**
-   * Reconciles the properties by detecting differences in property values and
-   * updating the DOM as necessary. This function is probably the single most
-   * critical path for performance optimization.
-   *
-   * TODO: Benchmark whether checking for changed values in memory actually
-   *       improves performance (especially statically positioned elements).
-   * TODO: Benchmark the effects of putting this at the top since 99% of props
-   *       do not change for a given reconciliation.
-   * TODO: Benchmark areas that can be improved with caching.
-   *
-   * @private
-   * @param {object} lastProps
-   * @param {ReactReconcileTransaction} transaction
-   */
-  _updateDOMProperties: function(lastProps, transaction) {
-    var nextProps = this.props;
-    var propKey;
-    var styleName;
-    var styleUpdates;
-    for (propKey in lastProps) {
-      if (nextProps.hasOwnProperty(propKey) ||
-         !lastProps.hasOwnProperty(propKey)) {
-        continue;
-      }
-      if (propKey === STYLE) {
-        var lastStyle = lastProps[propKey];
-        for (styleName in lastStyle) {
-          if (lastStyle.hasOwnProperty(styleName)) {
-            styleUpdates = styleUpdates || {};
-            styleUpdates[styleName] = '';
-          }
-        }
-      } else if (registrationNameModules.hasOwnProperty(propKey)) {
-        deleteListener(this._rootNodeID, propKey);
-      } else if (
-          DOMProperty.isStandardName[propKey] ||
-          DOMProperty.isCustomAttribute(propKey)) {
-        ReactComponent.BackendIDOperations.deletePropertyByID(
-          this._rootNodeID,
-          propKey
-        );
-      }
-    }
-    for (propKey in nextProps) {
-      var nextProp = nextProps[propKey];
-      var lastProp = lastProps[propKey];
-      if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp) {
-        continue;
-      }
-      if (propKey === STYLE) {
-        if (nextProp) {
-          nextProp = nextProps.style = merge(nextProp);
-        }
-        if (lastProp) {
-          // Unset styles on `lastProp` but not on `nextProp`.
-          for (styleName in lastProp) {
-            if (lastProp.hasOwnProperty(styleName) &&
-                (!nextProp || !nextProp.hasOwnProperty(styleName))) {
-              styleUpdates = styleUpdates || {};
-              styleUpdates[styleName] = '';
-            }
-          }
-          // Update styles that changed since `lastProp`.
-          for (styleName in nextProp) {
-            if (nextProp.hasOwnProperty(styleName) &&
-                lastProp[styleName] !== nextProp[styleName]) {
-              styleUpdates = styleUpdates || {};
-              styleUpdates[styleName] = nextProp[styleName];
-            }
-          }
-        } else {
-          // Relies on `updateStylesByID` not mutating `styleUpdates`.
-          styleUpdates = nextProp;
-        }
-      } else if (registrationNameModules.hasOwnProperty(propKey)) {
-        putListener(this._rootNodeID, propKey, nextProp, transaction);
-      } else if (
-          DOMProperty.isStandardName[propKey] ||
-          DOMProperty.isCustomAttribute(propKey)) {
-        ReactComponent.BackendIDOperations.updatePropertyByID(
-          this._rootNodeID,
-          propKey,
-          nextProp
-        );
-      }
-    }
-    if (styleUpdates) {
-      ReactComponent.BackendIDOperations.updateStylesByID(
-        this._rootNodeID,
-        styleUpdates
-      );
-    }
-  },
-
-  /**
-   * Reconciles the children with the various properties that affect the
-   * children content.
-   *
-   * @param {object} lastProps
-   * @param {ReactReconcileTransaction} transaction
-   */
-  _updateDOMChildren: function(lastProps, transaction) {
-    var nextProps = this.props;
-
-    var lastContent =
-      CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null;
-    var nextContent =
-      CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;
-
-    var lastHtml =
-      lastProps.dangerouslySetInnerHTML &&
-      lastProps.dangerouslySetInnerHTML.__html;
-    var nextHtml =
-      nextProps.dangerouslySetInnerHTML &&
-      nextProps.dangerouslySetInnerHTML.__html;
-
-    // Note the use of `!=` which checks for null or undefined.
-    var lastChildren = lastContent != null ? null : lastProps.children;
-    var nextChildren = nextContent != null ? null : nextProps.children;
-
-    // If we're switching from children to content/html or vice versa, remove
-    // the old content
-    var lastHasContentOrHtml = lastContent != null || lastHtml != null;
-    var nextHasContentOrHtml = nextContent != null || nextHtml != null;
-    if (lastChildren != null && nextChildren == null) {
-      this.updateChildren(null, transaction);
-    } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
-      this.updateTextContent('');
-    }
-
-    if (nextContent != null) {
-      if (lastContent !== nextContent) {
-        this.updateTextContent('' + nextContent);
-      }
-    } else if (nextHtml != null) {
-      if (lastHtml !== nextHtml) {
-        ReactComponent.BackendIDOperations.updateInnerHTMLByID(
-          this._rootNodeID,
-          nextHtml
-        );
-      }
-    } else if (nextChildren != null) {
-      this.updateChildren(nextChildren, transaction);
-    }
-  },
-
-  /**
-   * Destroys all event registrations for this instance. Does not remove from
-   * the DOM. That must be done by the parent.
-   *
-   * @internal
-   */
-  unmountComponent: function() {
-    this.unmountChildren();
-    ReactBrowserEventEmitter.deleteAllListeners(this._rootNodeID);
-    ReactComponent.Mixin.unmountComponent.call(this);
-  }
-
-};
-
-mixInto(ReactDOMComponent, ReactComponent.Mixin);
-mixInto(ReactDOMComponent, ReactDOMComponent.Mixin);
-mixInto(ReactDOMComponent, ReactMultiChild.Mixin);
-mixInto(ReactDOMComponent, ReactBrowserComponentMixin);
-
-module.exports = ReactDOMComponent;
diff --git a/src/browser/ui/ReactDOMIDOperations.js b/src/browser/ui/ReactDOMIDOperations.js
deleted file mode 100644
index ea206cd065b..00000000000
--- a/src/browser/ui/ReactDOMIDOperations.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMIDOperations
- * @typechecks static-only
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var CSSPropertyOperations = require('CSSPropertyOperations');
-var DOMChildrenOperations = require('DOMChildrenOperations');
-var DOMPropertyOperations = require('DOMPropertyOperations');
-var ReactMount = require('ReactMount');
-var ReactPerf = require('ReactPerf');
-
-var invariant = require('invariant');
-var setInnerHTML = require('setInnerHTML');
-
-/**
- * Errors for properties that should not be updated with `updatePropertyById()`.
- *
- * @type {object}
- * @private
- */
-var INVALID_PROPERTY_ERRORS = {
-  dangerouslySetInnerHTML:
-    '`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
-  style: '`style` must be set using `updateStylesByID()`.'
-};
-
-/**
- * Operations used to process updates to DOM nodes. This is made injectable via
- * `ReactComponent.BackendIDOperations`.
- */
-var ReactDOMIDOperations = {
-
-  /**
-   * Updates a DOM node with new property values. This should only be used to
-   * update DOM properties in `DOMProperty`.
-   *
-   * @param {string} id ID of the node to update.
-   * @param {string} name A valid property name, see `DOMProperty`.
-   * @param {*} value New value of the property.
-   * @internal
-   */
-  updatePropertyByID: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'updatePropertyByID',
-    function(id, name, value) {
-      var node = ReactMount.getNode(id);
-      invariant(
-        !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
-        'updatePropertyByID(...): %s',
-        INVALID_PROPERTY_ERRORS[name]
-      );
-
-      // If we're updating to null or undefined, we should remove the property
-      // from the DOM node instead of inadvertantly setting to a string. This
-      // brings us in line with the same behavior we have on initial render.
-      if (value != null) {
-        DOMPropertyOperations.setValueForProperty(node, name, value);
-      } else {
-        DOMPropertyOperations.deleteValueForProperty(node, name);
-      }
-    }
-  ),
-
-  /**
-   * Updates a DOM node to remove a property. This should only be used to remove
-   * DOM properties in `DOMProperty`.
-   *
-   * @param {string} id ID of the node to update.
-   * @param {string} name A property name to remove, see `DOMProperty`.
-   * @internal
-   */
-  deletePropertyByID: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'deletePropertyByID',
-    function(id, name, value) {
-      var node = ReactMount.getNode(id);
-      invariant(
-        !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
-        'updatePropertyByID(...): %s',
-        INVALID_PROPERTY_ERRORS[name]
-      );
-      DOMPropertyOperations.deleteValueForProperty(node, name, value);
-    }
-  ),
-
-  /**
-   * Updates a DOM node with new style values. If a value is specified as '',
-   * the corresponding style property will be unset.
-   *
-   * @param {string} id ID of the node to update.
-   * @param {object} styles Mapping from styles to values.
-   * @internal
-   */
-  updateStylesByID: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'updateStylesByID',
-    function(id, styles) {
-      var node = ReactMount.getNode(id);
-      CSSPropertyOperations.setValueForStyles(node, styles);
-    }
-  ),
-
-  /**
-   * Updates a DOM node's innerHTML.
-   *
-   * @param {string} id ID of the node to update.
-   * @param {string} html An HTML string.
-   * @internal
-   */
-  updateInnerHTMLByID: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'updateInnerHTMLByID',
-    function(id, html) {
-      var node = ReactMount.getNode(id);
-      setInnerHTML(node, html);
-    }
-  ),
-
-  /**
-   * Updates a DOM node's text content set by `props.content`.
-   *
-   * @param {string} id ID of the node to update.
-   * @param {string} content Text content.
-   * @internal
-   */
-  updateTextContentByID: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'updateTextContentByID',
-    function(id, content) {
-      var node = ReactMount.getNode(id);
-      DOMChildrenOperations.updateTextContent(node, content);
-    }
-  ),
-
-  /**
-   * Replaces a DOM node that exists in the document with markup.
-   *
-   * @param {string} id ID of child to be replaced.
-   * @param {string} markup Dangerous markup to inject in place of child.
-   * @internal
-   * @see {Danger.dangerouslyReplaceNodeWithMarkup}
-   */
-  dangerouslyReplaceNodeWithMarkupByID: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'dangerouslyReplaceNodeWithMarkupByID',
-    function(id, markup) {
-      var node = ReactMount.getNode(id);
-      DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
-    }
-  ),
-
-  /**
-   * Updates a component's children by processing a series of updates.
-   *
-   * @param {array<object>} updates List of update configurations.
-   * @param {array<string>} markup List of markup strings.
-   * @internal
-   */
-  dangerouslyProcessChildrenUpdates: ReactPerf.measure(
-    'ReactDOMIDOperations',
-    'dangerouslyProcessChildrenUpdates',
-    function(updates, markup) {
-      for (var i = 0; i < updates.length; i++) {
-        updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
-      }
-      DOMChildrenOperations.processUpdates(updates, markup);
-    }
-  )
-};
-
-module.exports = ReactDOMIDOperations;
diff --git a/src/browser/ui/ReactDOMSelection.js b/src/browser/ui/ReactDOMSelection.js
deleted file mode 100644
index 6771887fba8..00000000000
--- a/src/browser/ui/ReactDOMSelection.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMSelection
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var getNodeForCharacterOffset = require('getNodeForCharacterOffset');
-var getTextContentAccessor = require('getTextContentAccessor');
-
-/**
- * While `isCollapsed` is available on the Selection object and `collapsed`
- * is available on the Range object, IE11 sometimes gets them wrong.
- * If the anchor/focus nodes and offsets are the same, the range is collapsed.
- */
-function isCollapsed(anchorNode, anchorOffset, focusNode, focusOffset) {
-  return anchorNode === focusNode && anchorOffset === focusOffset;
-}
-
-/**
- * Get the appropriate anchor and focus node/offset pairs for IE.
- *
- * The catch here is that IE's selection API doesn't provide information
- * about whether the selection is forward or backward, so we have to
- * behave as though it's always forward.
- *
- * IE text differs from modern selection in that it behaves as though
- * block elements end with a new line. This means character offsets will
- * differ between the two APIs.
- *
- * @param {DOMElement} node
- * @return {object}
- */
-function getIEOffsets(node) {
-  var selection = document.selection;
-  var selectedRange = selection.createRange();
-  var selectedLength = selectedRange.text.length;
-
-  // Duplicate selection so we can move range without breaking user selection.
-  var fromStart = selectedRange.duplicate();
-  fromStart.moveToElementText(node);
-  fromStart.setEndPoint('EndToStart', selectedRange);
-
-  var startOffset = fromStart.text.length;
-  var endOffset = startOffset + selectedLength;
-
-  return {
-    start: startOffset,
-    end: endOffset
-  };
-}
-
-/**
- * @param {DOMElement} node
- * @return {?object}
- */
-function getModernOffsets(node) {
-  var selection = window.getSelection && window.getSelection();
-
-  if (!selection || selection.rangeCount === 0) {
-    return null;
-  }
-
-  var anchorNode = selection.anchorNode;
-  var anchorOffset = selection.anchorOffset;
-  var focusNode = selection.focusNode;
-  var focusOffset = selection.focusOffset;
-
-  var currentRange = selection.getRangeAt(0);
-
-  // If the node and offset values are the same, the selection is collapsed.
-  // `Selection.isCollapsed` is available natively, but IE sometimes gets
-  // this value wrong.
-  var isSelectionCollapsed = isCollapsed(
-    selection.anchorNode,
-    selection.anchorOffset,
-    selection.focusNode,
-    selection.focusOffset
-  );
-
-  var rangeLength = isSelectionCollapsed ? 0 : currentRange.toString().length;
-
-  var tempRange = currentRange.cloneRange();
-  tempRange.selectNodeContents(node);
-  tempRange.setEnd(currentRange.startContainer, currentRange.startOffset);
-
-  var isTempRangeCollapsed = isCollapsed(
-    tempRange.startContainer,
-    tempRange.startOffset,
-    tempRange.endContainer,
-    tempRange.endOffset
-  );
-
-  var start = isTempRangeCollapsed ? 0 : tempRange.toString().length;
-  var end = start + rangeLength;
-
-  // Detect whether the selection is backward.
-  var detectionRange = document.createRange();
-  detectionRange.setStart(anchorNode, anchorOffset);
-  detectionRange.setEnd(focusNode, focusOffset);
-  var isBackward = detectionRange.collapsed;
-  detectionRange.detach();
-
-  return {
-    start: isBackward ? end : start,
-    end: isBackward ? start : end
-  };
-}
-
-/**
- * @param {DOMElement|DOMTextNode} node
- * @param {object} offsets
- */
-function setIEOffsets(node, offsets) {
-  var range = document.selection.createRange().duplicate();
-  var start, end;
-
-  if (typeof offsets.end === 'undefined') {
-    start = offsets.start;
-    end = start;
-  } else if (offsets.start > offsets.end) {
-    start = offsets.end;
-    end = offsets.start;
-  } else {
-    start = offsets.start;
-    end = offsets.end;
-  }
-
-  range.moveToElementText(node);
-  range.moveStart('character', start);
-  range.setEndPoint('EndToStart', range);
-  range.moveEnd('character', end - start);
-  range.select();
-}
-
-/**
- * In modern non-IE browsers, we can support both forward and backward
- * selections.
- *
- * Note: IE10+ supports the Selection object, but it does not support
- * the `extend` method, which means that even in modern IE, it's not possible
- * to programatically create a backward selection. Thus, for all IE
- * versions, we use the old IE API to create our selections.
- *
- * @param {DOMElement|DOMTextNode} node
- * @param {object} offsets
- */
-function setModernOffsets(node, offsets) {
-  if (!window.getSelection) {
-    return;
-  }
-
-  var selection = window.getSelection();
-  var length = node[getTextContentAccessor()].length;
-  var start = Math.min(offsets.start, length);
-  var end = typeof offsets.end === 'undefined' ?
-            start : Math.min(offsets.end, length);
-
-  // IE 11 uses modern selection, but doesn't support the extend method.
-  // Flip backward selections, so we can set with a single range.
-  if (!selection.extend && start > end) {
-    var temp = end;
-    end = start;
-    start = temp;
-  }
-
-  var startMarker = getNodeForCharacterOffset(node, start);
-  var endMarker = getNodeForCharacterOffset(node, end);
-
-  if (startMarker && endMarker) {
-    var range = document.createRange();
-    range.setStart(startMarker.node, startMarker.offset);
-    selection.removeAllRanges();
-
-    if (start > end) {
-      selection.addRange(range);
-      selection.extend(endMarker.node, endMarker.offset);
-    } else {
-      range.setEnd(endMarker.node, endMarker.offset);
-      selection.addRange(range);
-    }
-
-    range.detach();
-  }
-}
-
-var useIEOffsets = ExecutionEnvironment.canUseDOM && document.selection;
-
-var ReactDOMSelection = {
-  /**
-   * @param {DOMElement} node
-   */
-  getOffsets: useIEOffsets ? getIEOffsets : getModernOffsets,
-
-  /**
-   * @param {DOMElement|DOMTextNode} node
-   * @param {object} offsets
-   */
-  setOffsets: useIEOffsets ? setIEOffsets : setModernOffsets
-};
-
-module.exports = ReactDOMSelection;
diff --git a/src/browser/ui/ReactDefaultInjection.js b/src/browser/ui/ReactDefaultInjection.js
deleted file mode 100644
index 2bac15de63e..00000000000
--- a/src/browser/ui/ReactDefaultInjection.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDefaultInjection
- */
-
-"use strict";
-
-var BeforeInputEventPlugin = require('BeforeInputEventPlugin');
-var ChangeEventPlugin = require('ChangeEventPlugin');
-var ClientReactRootIndex = require('ClientReactRootIndex');
-var CompositionEventPlugin = require('CompositionEventPlugin');
-var DefaultEventPluginOrder = require('DefaultEventPluginOrder');
-var EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-var HTMLDOMPropertyConfig = require('HTMLDOMPropertyConfig');
-var MobileSafariClickEventPlugin = require('MobileSafariClickEventPlugin');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactComponentBrowserEnvironment =
-  require('ReactComponentBrowserEnvironment');
-var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
-var ReactDOM = require('ReactDOM');
-var ReactDOMButton = require('ReactDOMButton');
-var ReactDOMForm = require('ReactDOMForm');
-var ReactDOMImg = require('ReactDOMImg');
-var ReactDOMInput = require('ReactDOMInput');
-var ReactDOMOption = require('ReactDOMOption');
-var ReactDOMSelect = require('ReactDOMSelect');
-var ReactDOMTextarea = require('ReactDOMTextarea');
-var ReactEventListener = require('ReactEventListener');
-var ReactInjection = require('ReactInjection');
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactMount = require('ReactMount');
-var SelectEventPlugin = require('SelectEventPlugin');
-var ServerReactRootIndex = require('ServerReactRootIndex');
-var SimpleEventPlugin = require('SimpleEventPlugin');
-var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig');
-
-var createFullPageComponent = require('createFullPageComponent');
-
-function inject() {
-  ReactInjection.EventEmitter.injectReactEventListener(
-    ReactEventListener
-  );
-
-  /**
-   * Inject modules for resolving DOM hierarchy and plugin ordering.
-   */
-  ReactInjection.EventPluginHub.injectEventPluginOrder(DefaultEventPluginOrder);
-  ReactInjection.EventPluginHub.injectInstanceHandle(ReactInstanceHandles);
-  ReactInjection.EventPluginHub.injectMount(ReactMount);
-
-  /**
-   * Some important event plugins included by default (without having to require
-   * them).
-   */
-  ReactInjection.EventPluginHub.injectEventPluginsByName({
-    SimpleEventPlugin: SimpleEventPlugin,
-    EnterLeaveEventPlugin: EnterLeaveEventPlugin,
-    ChangeEventPlugin: ChangeEventPlugin,
-    CompositionEventPlugin: CompositionEventPlugin,
-    MobileSafariClickEventPlugin: MobileSafariClickEventPlugin,
-    SelectEventPlugin: SelectEventPlugin,
-    BeforeInputEventPlugin: BeforeInputEventPlugin
-  });
-
-  ReactInjection.DOM.injectComponentClasses({
-    button: ReactDOMButton,
-    form: ReactDOMForm,
-    img: ReactDOMImg,
-    input: ReactDOMInput,
-    option: ReactDOMOption,
-    select: ReactDOMSelect,
-    textarea: ReactDOMTextarea,
-
-    html: createFullPageComponent(ReactDOM.html),
-    head: createFullPageComponent(ReactDOM.head),
-    body: createFullPageComponent(ReactDOM.body)
-  });
-
-  // This needs to happen after createFullPageComponent() otherwise the mixin
-  // gets double injected.
-  ReactInjection.CompositeComponent.injectMixin(ReactBrowserComponentMixin);
-
-  ReactInjection.DOMProperty.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
-  ReactInjection.DOMProperty.injectDOMPropertyConfig(SVGDOMPropertyConfig);
-
-  ReactInjection.EmptyComponent.injectEmptyComponent(ReactDOM.noscript);
-
-  ReactInjection.Updates.injectReconcileTransaction(
-    ReactComponentBrowserEnvironment.ReactReconcileTransaction
-  );
-  ReactInjection.Updates.injectBatchingStrategy(
-    ReactDefaultBatchingStrategy
-  );
-
-  ReactInjection.RootIndex.injectCreateReactRootIndex(
-    ExecutionEnvironment.canUseDOM ?
-      ClientReactRootIndex.createReactRootIndex :
-      ServerReactRootIndex.createReactRootIndex
-  );
-
-  ReactInjection.Component.injectEnvironment(ReactComponentBrowserEnvironment);
-
-  if (__DEV__) {
-    var url = (ExecutionEnvironment.canUseDOM && window.location.href) || '';
-    if ((/[?&]react_perf\b/).test(url)) {
-      var ReactDefaultPerf = require('ReactDefaultPerf');
-      ReactDefaultPerf.start();
-    }
-  }
-}
-
-module.exports = {
-  inject: inject
-};
diff --git a/src/browser/ui/ReactEventListener.js b/src/browser/ui/ReactEventListener.js
deleted file mode 100644
index 5dc6683bb72..00000000000
--- a/src/browser/ui/ReactEventListener.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactEventListener
- * @typechecks static-only
- */
-
-"use strict";
-
-var EventListener = require('EventListener');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-var PooledClass = require('PooledClass');
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactMount = require('ReactMount');
-var ReactUpdates = require('ReactUpdates');
-
-var getEventTarget = require('getEventTarget');
-var getUnboundedScrollPosition = require('getUnboundedScrollPosition');
-var mixInto = require('mixInto');
-
-/**
- * Finds the parent React component of `node`.
- *
- * @param {*} node
- * @return {?DOMEventTarget} Parent container, or `null` if the specified node
- *                           is not nested.
- */
-function findParent(node) {
-  // 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.
-  var nodeID = ReactMount.getID(node);
-  var rootID = ReactInstanceHandles.getReactRootIDFromNodeID(nodeID);
-  var container = ReactMount.findReactContainerForID(rootID);
-  var parent = ReactMount.getFirstReactDOM(container);
-  return parent;
-}
-
-// Used to store ancestor hierarchy in top level callback
-function TopLevelCallbackBookKeeping(topLevelType, nativeEvent) {
-  this.topLevelType = topLevelType;
-  this.nativeEvent = nativeEvent;
-  this.ancestors = [];
-}
-mixInto(TopLevelCallbackBookKeeping, {
-  destructor: function() {
-    this.topLevelType = null;
-    this.nativeEvent = null;
-    this.ancestors.length = 0;
-  }
-});
-PooledClass.addPoolingTo(
-  TopLevelCallbackBookKeeping,
-  PooledClass.twoArgumentPooler
-);
-
-function handleTopLevelImpl(bookKeeping) {
-  var topLevelTarget = ReactMount.getFirstReactDOM(
-    getEventTarget(bookKeeping.nativeEvent)
-  ) || window;
-
-  // Loop through the hierarchy, in case there's any nested components.
-  // It's important that we build the array of ancestors before calling any
-  // event handlers, because event handlers can modify the DOM, leading to
-  // inconsistencies with ReactMount's node cache. See #1105.
-  var ancestor = topLevelTarget;
-  while (ancestor) {
-    bookKeeping.ancestors.push(ancestor);
-    ancestor = findParent(ancestor);
-  }
-
-  for (var i = 0, l = bookKeeping.ancestors.length; i < l; i++) {
-    topLevelTarget = bookKeeping.ancestors[i];
-    var topLevelTargetID = ReactMount.getID(topLevelTarget) || '';
-    ReactEventListener._handleTopLevel(
-      bookKeeping.topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      bookKeeping.nativeEvent
-    );
-  }
-}
-
-function scrollValueMonitor(cb) {
-  var scrollPosition = getUnboundedScrollPosition(window);
-  cb(scrollPosition);
-}
-
-var ReactEventListener = {
-  _enabled: true,
-  _handleTopLevel: null,
-
-  WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,
-
-  setHandleTopLevel: function(handleTopLevel) {
-    ReactEventListener._handleTopLevel = handleTopLevel;
-  },
-
-  setEnabled: function(enabled) {
-    ReactEventListener._enabled = !!enabled;
-  },
-
-  isEnabled: function() {
-    return ReactEventListener._enabled;
-  },
-
-
-  /**
-   * Traps top-level events by using event bubbling.
-   *
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {string} handlerBaseName Event name (e.g. "click").
-   * @param {object} handle Element on which to attach listener.
-   * @return {object} An object with a remove function which will forcefully
-   *                  remove the listener.
-   * @internal
-   */
-  trapBubbledEvent: function(topLevelType, handlerBaseName, handle) {
-    var element = handle;
-    if (!element) {
-      return;
-    }
-    return EventListener.listen(
-      element,
-      handlerBaseName,
-      ReactEventListener.dispatchEvent.bind(null, topLevelType)
-    );
-  },
-
-  /**
-   * Traps a top-level event by using event capturing.
-   *
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {string} handlerBaseName Event name (e.g. "click").
-   * @param {object} handle Element on which to attach listener.
-   * @return {object} An object with a remove function which will forcefully
-   *                  remove the listener.
-   * @internal
-   */
-  trapCapturedEvent: function(topLevelType, handlerBaseName, handle) {
-    var element = handle;
-    if (!element) {
-      return;
-    }
-    return EventListener.capture(
-      element,
-      handlerBaseName,
-      ReactEventListener.dispatchEvent.bind(null, topLevelType)
-    );
-  },
-
-  monitorScrollValue: function(refresh) {
-    var callback = scrollValueMonitor.bind(null, refresh);
-    EventListener.listen(window, 'scroll', callback);
-    EventListener.listen(window, 'resize', callback);
-  },
-
-  dispatchEvent: function(topLevelType, nativeEvent) {
-    if (!ReactEventListener._enabled) {
-      return;
-    }
-
-    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
-      topLevelType,
-      nativeEvent
-    );
-    try {
-      // Event queue being processed in the same cycle allows
-      // `preventDefault`.
-      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
-    } finally {
-      TopLevelCallbackBookKeeping.release(bookKeeping);
-    }
-  }
-};
-
-module.exports = ReactEventListener;
diff --git a/src/browser/ui/ReactInjection.js b/src/browser/ui/ReactInjection.js
deleted file mode 100644
index b1132388dda..00000000000
--- a/src/browser/ui/ReactInjection.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactInjection
- */
-
-"use strict";
-
-var DOMProperty = require('DOMProperty');
-var EventPluginHub = require('EventPluginHub');
-var ReactComponent = require('ReactComponent');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-var ReactEmptyComponent = require('ReactEmptyComponent');
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-var ReactPerf = require('ReactPerf');
-var ReactRootIndex = require('ReactRootIndex');
-var ReactUpdates = require('ReactUpdates');
-
-var ReactInjection = {
-  Component: ReactComponent.injection,
-  CompositeComponent: ReactCompositeComponent.injection,
-  DOMProperty: DOMProperty.injection,
-  EmptyComponent: ReactEmptyComponent.injection,
-  EventPluginHub: EventPluginHub.injection,
-  DOM: ReactDOM.injection,
-  EventEmitter: ReactBrowserEventEmitter.injection,
-  Perf: ReactPerf.injection,
-  RootIndex: ReactRootIndex.injection,
-  Updates: ReactUpdates.injection
-};
-
-module.exports = ReactInjection;
diff --git a/src/browser/ui/ReactInputSelection.js b/src/browser/ui/ReactInputSelection.js
deleted file mode 100644
index 5a8b4f8196e..00000000000
--- a/src/browser/ui/ReactInputSelection.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactInputSelection
- */
-
-"use strict";
-
-var ReactDOMSelection = require('ReactDOMSelection');
-
-var containsNode = require('containsNode');
-var focusNode = require('focusNode');
-var getActiveElement = require('getActiveElement');
-
-function isInDocument(node) {
-  return containsNode(document.documentElement, node);
-}
-
-/**
- * @ReactInputSelection: React input selection module. Based on Selection.js,
- * but modified to be suitable for react and has a couple of bug fixes (doesn't
- * assume buttons have range selections allowed).
- * Input selection module for React.
- */
-var ReactInputSelection = {
-
-  hasSelectionCapabilities: function(elem) {
-    return elem && (
-      (elem.nodeName === 'INPUT' && elem.type === 'text') ||
-      elem.nodeName === 'TEXTAREA' ||
-      elem.contentEditable === 'true'
-    );
-  },
-
-  getSelectionInformation: function() {
-    var focusedElem = getActiveElement();
-    return {
-      focusedElem: focusedElem,
-      selectionRange:
-          ReactInputSelection.hasSelectionCapabilities(focusedElem) ?
-          ReactInputSelection.getSelection(focusedElem) :
-          null
-    };
-  },
-
-  /**
-   * @restoreSelection: If any selection information was potentially lost,
-   * restore it. This is useful when performing operations that could remove dom
-   * nodes and place them back in, resulting in focus being lost.
-   */
-  restoreSelection: function(priorSelectionInformation) {
-    var curFocusedElem = getActiveElement();
-    var priorFocusedElem = priorSelectionInformation.focusedElem;
-    var priorSelectionRange = priorSelectionInformation.selectionRange;
-    if (curFocusedElem !== priorFocusedElem &&
-        isInDocument(priorFocusedElem)) {
-      if (ReactInputSelection.hasSelectionCapabilities(priorFocusedElem)) {
-        ReactInputSelection.setSelection(
-          priorFocusedElem,
-          priorSelectionRange
-        );
-      }
-      focusNode(priorFocusedElem);
-    }
-  },
-
-  /**
-   * @getSelection: Gets the selection bounds of a focused textarea, input or
-   * contentEditable node.
-   * -@input: Look up selection bounds of this input
-   * -@return {start: selectionStart, end: selectionEnd}
-   */
-  getSelection: function(input) {
-    var selection;
-
-    if ('selectionStart' in input) {
-      // Modern browser with input or textarea.
-      selection = {
-        start: input.selectionStart,
-        end: input.selectionEnd
-      };
-    } else if (document.selection && input.nodeName === 'INPUT') {
-      // IE8 input.
-      var range = document.selection.createRange();
-      // There can only be one selection per document in IE, so it must
-      // be in our element.
-      if (range.parentElement() === input) {
-        selection = {
-          start: -range.moveStart('character', -input.value.length),
-          end: -range.moveEnd('character', -input.value.length)
-        };
-      }
-    } else {
-      // Content editable or old IE textarea.
-      selection = ReactDOMSelection.getOffsets(input);
-    }
-
-    return selection || {start: 0, end: 0};
-  },
-
-  /**
-   * @setSelection: Sets the selection bounds of a textarea or input and focuses
-   * the input.
-   * -@input     Set selection bounds of this input or textarea
-   * -@offsets   Object of same form that is returned from get*
-   */
-  setSelection: function(input, offsets) {
-    var start = offsets.start;
-    var end = offsets.end;
-    if (typeof end === 'undefined') {
-      end = start;
-    }
-
-    if ('selectionStart' in input) {
-      input.selectionStart = start;
-      input.selectionEnd = Math.min(end, input.value.length);
-    } else if (document.selection && input.nodeName === 'INPUT') {
-      var range = input.createTextRange();
-      range.collapse(true);
-      range.moveStart('character', start);
-      range.moveEnd('character', end - start);
-      range.select();
-    } else {
-      ReactDOMSelection.setOffsets(input, offsets);
-    }
-  }
-};
-
-module.exports = ReactInputSelection;
diff --git a/src/browser/ui/ReactMount.js b/src/browser/ui/ReactMount.js
deleted file mode 100644
index 581a904427d..00000000000
--- a/src/browser/ui/ReactMount.js
+++ /dev/null
@@ -1,677 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactMount
- */
-
-"use strict";
-
-var DOMProperty = require('DOMProperty');
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-var ReactCurrentOwner = require('ReactCurrentOwner');
-var ReactDescriptor = require('ReactDescriptor');
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactPerf = require('ReactPerf');
-
-var containsNode = require('containsNode');
-var getReactRootElementInContainer = require('getReactRootElementInContainer');
-var instantiateReactComponent = require('instantiateReactComponent');
-var invariant = require('invariant');
-var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
-var warning = require('warning');
-
-var SEPARATOR = ReactInstanceHandles.SEPARATOR;
-
-var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
-var nodeCache = {};
-
-var ELEMENT_NODE_TYPE = 1;
-var DOC_NODE_TYPE = 9;
-
-/** Mapping from reactRootID to React component instance. */
-var instancesByReactRootID = {};
-
-/** Mapping from reactRootID to `container` nodes. */
-var containersByReactRootID = {};
-
-if (__DEV__) {
-  /** __DEV__-only mapping from reactRootID to root elements. */
-  var rootElementsByReactRootID = {};
-}
-
-// Used to store breadth-first search state in findComponentRoot.
-var findComponentRootReusableArray = [];
-
-/**
- * @param {DOMElement} container DOM element that may contain a React component.
- * @return {?string} A "reactRoot" ID, if a React component is rendered.
- */
-function getReactRootID(container) {
-  var rootElement = getReactRootElementInContainer(container);
-  return rootElement && ReactMount.getID(rootElement);
-}
-
-/**
- * Accessing node[ATTR_NAME] or calling getAttribute(ATTR_NAME) on a form
- * element can return its control whose name or ID equals ATTR_NAME. All
- * DOM nodes support `getAttributeNode` but this can also get called on
- * other objects so just return '' if we're given something other than a
- * DOM node (such as window).
- *
- * @param {?DOMElement|DOMWindow|DOMDocument|DOMTextNode} node DOM node.
- * @return {string} ID of the supplied `domNode`.
- */
-function getID(node) {
-  var id = internalGetID(node);
-  if (id) {
-    if (nodeCache.hasOwnProperty(id)) {
-      var cached = nodeCache[id];
-      if (cached !== node) {
-        invariant(
-          !isValid(cached, id),
-          'ReactMount: Two valid but unequal nodes with the same `%s`: %s',
-          ATTR_NAME, id
-        );
-
-        nodeCache[id] = node;
-      }
-    } else {
-      nodeCache[id] = node;
-    }
-  }
-
-  return id;
-}
-
-function internalGetID(node) {
-  // If node is something like a window, document, or text node, none of
-  // which support attributes or a .getAttribute method, gracefully return
-  // the empty string, as if the attribute were missing.
-  return node && node.getAttribute && node.getAttribute(ATTR_NAME) || '';
-}
-
-/**
- * Sets the React-specific ID of the given node.
- *
- * @param {DOMElement} node The DOM node whose ID will be set.
- * @param {string} id The value of the ID attribute.
- */
-function setID(node, id) {
-  var oldID = internalGetID(node);
-  if (oldID !== id) {
-    delete nodeCache[oldID];
-  }
-  node.setAttribute(ATTR_NAME, id);
-  nodeCache[id] = node;
-}
-
-/**
- * Finds the node with the supplied React-generated DOM ID.
- *
- * @param {string} id A React-generated DOM ID.
- * @return {DOMElement} DOM node with the suppled `id`.
- * @internal
- */
-function getNode(id) {
-  if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) {
-    nodeCache[id] = ReactMount.findReactNodeByID(id);
-  }
-  return nodeCache[id];
-}
-
-/**
- * A node is "valid" if it is contained by a currently mounted container.
- *
- * This means that the node does not have to be contained by a document in
- * order to be considered valid.
- *
- * @param {?DOMElement} node The candidate DOM node.
- * @param {string} id The expected ID of the node.
- * @return {boolean} Whether the node is contained by a mounted container.
- */
-function isValid(node, id) {
-  if (node) {
-    invariant(
-      internalGetID(node) === id,
-      'ReactMount: Unexpected modification of `%s`',
-      ATTR_NAME
-    );
-
-    var container = ReactMount.findReactContainerForID(id);
-    if (container && containsNode(container, node)) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-/**
- * Causes the cache to forget about one React-specific ID.
- *
- * @param {string} id The ID to forget.
- */
-function purgeID(id) {
-  delete nodeCache[id];
-}
-
-var deepestNodeSoFar = null;
-function findDeepestCachedAncestorImpl(ancestorID) {
-  var ancestor = nodeCache[ancestorID];
-  if (ancestor && isValid(ancestor, ancestorID)) {
-    deepestNodeSoFar = ancestor;
-  } else {
-    // This node isn't populated in the cache, so presumably none of its
-    // descendants are. Break out of the loop.
-    return false;
-  }
-}
-
-/**
- * Return the deepest cached node whose ID is a prefix of `targetID`.
- */
-function findDeepestCachedAncestor(targetID) {
-  deepestNodeSoFar = null;
-  ReactInstanceHandles.traverseAncestors(
-    targetID,
-    findDeepestCachedAncestorImpl
-  );
-
-  var foundNode = deepestNodeSoFar;
-  deepestNodeSoFar = null;
-  return foundNode;
-}
-
-/**
- * Mounting is the process of initializing a React component by creatings its
- * representative DOM elements and inserting them into a supplied `container`.
- * Any prior content inside `container` is destroyed in the process.
- *
- *   ReactMount.renderComponent(
- *     component,
- *     document.getElementById('container')
- *   );
- *
- *   <div id="container">                   <-- Supplied `container`.
- *     <div data-reactid=".3">              <-- Rendered reactRoot of React
- *       // ...                                 component.
- *     </div>
- *   </div>
- *
- * Inside of `container`, the first element rendered is the "reactRoot".
- */
-var ReactMount = {
-  /** Exposed for debugging purposes **/
-  _instancesByReactRootID: instancesByReactRootID,
-
-  /**
-   * This is a hook provided to support rendering React components while
-   * ensuring that the apparent scroll position of its `container` does not
-   * change.
-   *
-   * @param {DOMElement} container The `container` being rendered into.
-   * @param {function} renderCallback This must be called once to do the render.
-   */
-  scrollMonitor: function(container, renderCallback) {
-    renderCallback();
-  },
-
-  /**
-   * Take a component that's already mounted into the DOM and replace its props
-   * @param {ReactComponent} prevComponent component instance already in the DOM
-   * @param {ReactComponent} nextComponent component instance to render
-   * @param {DOMElement} container container to render into
-   * @param {?function} callback function triggered on completion
-   */
-  _updateRootComponent: function(
-      prevComponent,
-      nextComponent,
-      container,
-      callback) {
-    var nextProps = nextComponent.props;
-    ReactMount.scrollMonitor(container, function() {
-      prevComponent.replaceProps(nextProps, callback);
-    });
-
-    if (__DEV__) {
-      // Record the root element in case it later gets transplanted.
-      rootElementsByReactRootID[getReactRootID(container)] =
-        getReactRootElementInContainer(container);
-    }
-
-    return prevComponent;
-  },
-
-  /**
-   * Register a component into the instance map and starts scroll value
-   * monitoring
-   * @param {ReactComponent} nextComponent component instance to render
-   * @param {DOMElement} container container to render into
-   * @return {string} reactRoot ID prefix
-   */
-  _registerComponent: function(nextComponent, container) {
-    invariant(
-      container && (
-        container.nodeType === ELEMENT_NODE_TYPE ||
-        container.nodeType === DOC_NODE_TYPE
-      ),
-      '_registerComponent(...): Target container is not a DOM element.'
-    );
-
-    ReactBrowserEventEmitter.ensureScrollValueMonitoring();
-
-    var reactRootID = ReactMount.registerContainer(container);
-    instancesByReactRootID[reactRootID] = nextComponent;
-    return reactRootID;
-  },
-
-  /**
-   * Render a new component into the DOM.
-   * @param {ReactComponent} nextComponent component instance to render
-   * @param {DOMElement} container container to render into
-   * @param {boolean} shouldReuseMarkup if we should skip the markup insertion
-   * @return {ReactComponent} nextComponent
-   */
-  _renderNewRootComponent: ReactPerf.measure(
-    'ReactMount',
-    '_renderNewRootComponent',
-    function(
-        nextComponent,
-        container,
-        shouldReuseMarkup) {
-      // Various parts of our code (such as ReactCompositeComponent's
-      // _renderValidatedComponent) assume that calls to render aren't nested;
-      // verify that that's the case.
-      warning(
-        ReactCurrentOwner.current == null,
-        '_renderNewRootComponent(): 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.'
-      );
-
-      var componentInstance = instantiateReactComponent(nextComponent);
-      var reactRootID = ReactMount._registerComponent(
-        componentInstance,
-        container
-      );
-      componentInstance.mountComponentIntoNode(
-        reactRootID,
-        container,
-        shouldReuseMarkup
-      );
-
-      if (__DEV__) {
-        // Record the root element in case it later gets transplanted.
-        rootElementsByReactRootID[reactRootID] =
-          getReactRootElementInContainer(container);
-      }
-
-      return componentInstance;
-    }
-  ),
-
-  /**
-   * Renders a React component into the DOM in the supplied `container`.
-   *
-   * If the React component was previously rendered into `container`, this will
-   * perform an update on it and only mutate the DOM as necessary to reflect the
-   * latest React component.
-   *
-   * @param {ReactDescriptor} nextDescriptor Component descriptor to render.
-   * @param {DOMElement} container DOM element to render into.
-   * @param {?function} callback function triggered on completion
-   * @return {ReactComponent} Component instance rendered in `container`.
-   */
-  renderComponent: function(nextDescriptor, container, callback) {
-    invariant(
-      ReactDescriptor.isValidDescriptor(nextDescriptor),
-      'renderComponent(): Invalid component descriptor.%s',
-      (
-        ReactDescriptor.isValidFactory(nextDescriptor) ?
-          ' Instead of passing a component class, make sure to instantiate ' +
-          'it first by calling it with props.' :
-        // Check if it quacks like a descriptor
-        typeof nextDescriptor.props !== "undefined" ?
-          ' This may be caused by unintentionally loading two independent ' +
-          'copies of React.' :
-          ''
-      )
-    );
-
-    var prevComponent = instancesByReactRootID[getReactRootID(container)];
-
-    if (prevComponent) {
-      var prevDescriptor = prevComponent._descriptor;
-      if (shouldUpdateReactComponent(prevDescriptor, nextDescriptor)) {
-        return ReactMount._updateRootComponent(
-          prevComponent,
-          nextDescriptor,
-          container,
-          callback
-        );
-      } else {
-        ReactMount.unmountComponentAtNode(container);
-      }
-    }
-
-    var reactRootElement = getReactRootElementInContainer(container);
-    var containerHasReactMarkup =
-      reactRootElement && ReactMount.isRenderedByReact(reactRootElement);
-
-    var shouldReuseMarkup = containerHasReactMarkup && !prevComponent;
-
-    var component = ReactMount._renderNewRootComponent(
-      nextDescriptor,
-      container,
-      shouldReuseMarkup
-    );
-    callback && callback.call(component);
-    return component;
-  },
-
-  /**
-   * Constructs a component instance of `constructor` with `initialProps` and
-   * renders it into the supplied `container`.
-   *
-   * @param {function} constructor React component constructor.
-   * @param {?object} props Initial props of the component instance.
-   * @param {DOMElement} container DOM element to render into.
-   * @return {ReactComponent} Component instance rendered in `container`.
-   */
-  constructAndRenderComponent: function(constructor, props, container) {
-    return ReactMount.renderComponent(constructor(props), container);
-  },
-
-  /**
-   * Constructs a component instance of `constructor` with `initialProps` and
-   * renders it into a container node identified by supplied `id`.
-   *
-   * @param {function} componentConstructor React component constructor
-   * @param {?object} props Initial props of the component instance.
-   * @param {string} id ID of the DOM element to render into.
-   * @return {ReactComponent} Component instance rendered in the container node.
-   */
-  constructAndRenderComponentByID: function(constructor, props, id) {
-    var domNode = document.getElementById(id);
-    invariant(
-      domNode,
-      'Tried to get element with id of "%s" but it is not present on the page.',
-      id
-    );
-    return ReactMount.constructAndRenderComponent(constructor, props, domNode);
-  },
-
-  /**
-   * Registers a container node into which React components will be rendered.
-   * This also creates the "reactRoot" ID that will be assigned to the element
-   * rendered within.
-   *
-   * @param {DOMElement} container DOM element to register as a container.
-   * @return {string} The "reactRoot" ID of elements rendered within.
-   */
-  registerContainer: function(container) {
-    var reactRootID = getReactRootID(container);
-    if (reactRootID) {
-      // If one exists, make sure it is a valid "reactRoot" ID.
-      reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID);
-    }
-    if (!reactRootID) {
-      // No valid "reactRoot" ID found, create one.
-      reactRootID = ReactInstanceHandles.createReactRootID();
-    }
-    containersByReactRootID[reactRootID] = container;
-    return reactRootID;
-  },
-
-  /**
-   * Unmounts and destroys the React component rendered in the `container`.
-   *
-   * @param {DOMElement} container DOM element containing a React component.
-   * @return {boolean} True if a component was found in and unmounted from
-   *                   `container`
-   */
-  unmountComponentAtNode: function(container) {
-    // Various parts of our code (such as ReactCompositeComponent's
-    // _renderValidatedComponent) assume that calls to render aren't nested;
-    // verify that that's the case. (Strictly speaking, unmounting won't cause a
-    // render but we still don't expect to be in a render call here.)
-    warning(
-      ReactCurrentOwner.current == null,
-      'unmountComponentAtNode(): 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.'
-    );
-
-    var reactRootID = getReactRootID(container);
-    var component = instancesByReactRootID[reactRootID];
-    if (!component) {
-      return false;
-    }
-    ReactMount.unmountComponentFromNode(component, container);
-    delete instancesByReactRootID[reactRootID];
-    delete containersByReactRootID[reactRootID];
-    if (__DEV__) {
-      delete rootElementsByReactRootID[reactRootID];
-    }
-    return true;
-  },
-
-  /**
-   * Unmounts a component and removes it from the DOM.
-   *
-   * @param {ReactComponent} instance React component instance.
-   * @param {DOMElement} container DOM element to unmount from.
-   * @final
-   * @internal
-   * @see {ReactMount.unmountComponentAtNode}
-   */
-  unmountComponentFromNode: function(instance, container) {
-    instance.unmountComponent();
-
-    if (container.nodeType === DOC_NODE_TYPE) {
-      container = container.documentElement;
-    }
-
-    // http://jsperf.com/emptying-a-node
-    while (container.lastChild) {
-      container.removeChild(container.lastChild);
-    }
-  },
-
-  /**
-   * Finds the container DOM element that contains React component to which the
-   * supplied DOM `id` belongs.
-   *
-   * @param {string} id The ID of an element rendered by a React component.
-   * @return {?DOMElement} DOM element that contains the `id`.
-   */
-  findReactContainerForID: function(id) {
-    var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);
-    var container = containersByReactRootID[reactRootID];
-
-    if (__DEV__) {
-      var rootElement = rootElementsByReactRootID[reactRootID];
-      if (rootElement && rootElement.parentNode !== container) {
-        invariant(
-          // Call internalGetID here because getID calls isValid which calls
-          // findReactContainerForID (this function).
-          internalGetID(rootElement) === reactRootID,
-          'ReactMount: Root element ID differed from reactRootID.'
-        );
-
-        var containerChild = container.firstChild;
-        if (containerChild &&
-            reactRootID === internalGetID(containerChild)) {
-          // If the container has a new child with the same ID as the old
-          // root element, then rootElementsByReactRootID[reactRootID] is
-          // just stale and needs to be updated. The case that deserves a
-          // warning is when the container is empty.
-          rootElementsByReactRootID[reactRootID] = containerChild;
-        } else {
-          console.warn(
-            'ReactMount: Root element has been removed from its original ' +
-            'container. New container:', rootElement.parentNode
-          );
-        }
-      }
-    }
-
-    return container;
-  },
-
-  /**
-   * Finds an element rendered by React with the supplied ID.
-   *
-   * @param {string} id ID of a DOM node in the React component.
-   * @return {DOMElement} Root DOM node of the React component.
-   */
-  findReactNodeByID: function(id) {
-    var reactRoot = ReactMount.findReactContainerForID(id);
-    return ReactMount.findComponentRoot(reactRoot, id);
-  },
-
-  /**
-   * True if the supplied `node` is rendered by React.
-   *
-   * @param {*} node DOM Element to check.
-   * @return {boolean} True if the DOM Element appears to be rendered by React.
-   * @internal
-   */
-  isRenderedByReact: function(node) {
-    if (node.nodeType !== 1) {
-      // Not a DOMElement, therefore not a React component
-      return false;
-    }
-    var id = ReactMount.getID(node);
-    return id ? id.charAt(0) === SEPARATOR : false;
-  },
-
-  /**
-   * Traverses up the ancestors of the supplied node to find a node that is a
-   * DOM representation of a React component.
-   *
-   * @param {*} node
-   * @return {?DOMEventTarget}
-   * @internal
-   */
-  getFirstReactDOM: function(node) {
-    var current = node;
-    while (current && current.parentNode !== current) {
-      if (ReactMount.isRenderedByReact(current)) {
-        return current;
-      }
-      current = current.parentNode;
-    }
-    return null;
-  },
-
-  /**
-   * Finds a node with the supplied `targetID` inside of the supplied
-   * `ancestorNode`.  Exploits the ID naming scheme to perform the search
-   * quickly.
-   *
-   * @param {DOMEventTarget} ancestorNode Search from this root.
-   * @pararm {string} targetID ID of the DOM representation of the component.
-   * @return {DOMEventTarget} DOM node with the supplied `targetID`.
-   * @internal
-   */
-  findComponentRoot: function(ancestorNode, targetID) {
-    var firstChildren = findComponentRootReusableArray;
-    var childIndex = 0;
-
-    var deepestAncestor = findDeepestCachedAncestor(targetID) || ancestorNode;
-
-    firstChildren[0] = deepestAncestor.firstChild;
-    firstChildren.length = 1;
-
-    while (childIndex < firstChildren.length) {
-      var child = firstChildren[childIndex++];
-      var targetChild;
-
-      while (child) {
-        var childID = ReactMount.getID(child);
-        if (childID) {
-          // Even if we find the node we're looking for, we finish looping
-          // through its siblings to ensure they're cached so that we don't have
-          // to revisit this node again. Otherwise, we make n^2 calls to getID
-          // when visiting the many children of a single node in order.
-
-          if (targetID === childID) {
-            targetChild = child;
-          } else if (ReactInstanceHandles.isAncestorIDOf(childID, targetID)) {
-            // If we find a child whose ID is an ancestor of the given ID,
-            // then we can be sure that we only want to search the subtree
-            // rooted at this child, so we can throw out the rest of the
-            // search state.
-            firstChildren.length = childIndex = 0;
-            firstChildren.push(child.firstChild);
-          }
-
-        } else {
-          // If this child had no ID, then there's a chance that it was
-          // injected automatically by the browser, as when a `<table>`
-          // element sprouts an extra `<tbody>` child as a side effect of
-          // `.innerHTML` parsing. Optimistically continue down this
-          // branch, but not before examining the other siblings.
-          firstChildren.push(child.firstChild);
-        }
-
-        child = child.nextSibling;
-      }
-
-      if (targetChild) {
-        // Emptying firstChildren/findComponentRootReusableArray is
-        // not necessary for correctness, but it helps the GC reclaim
-        // any nodes that were left at the end of the search.
-        firstChildren.length = 0;
-
-        return targetChild;
-      }
-    }
-
-    firstChildren.length = 0;
-
-    invariant(
-      false,
-      'findComponentRoot(..., %s): Unable to find element. This probably ' +
-      'means the DOM was unexpectedly mutated (e.g., by the browser), ' +
-      'usually due to forgetting a <tbody> when using tables, nesting tags ' +
-      'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' +
-      'parent. ' +
-      'Try inspecting the child nodes of the element with React ID `%s`.',
-      targetID,
-      ReactMount.getID(ancestorNode)
-    );
-  },
-
-
-  /**
-   * React ID utilities.
-   */
-
-  getReactRootID: getReactRootID,
-
-  getID: getID,
-
-  setID: setID,
-
-  getNode: getNode,
-
-  purgeID: purgeID
-};
-
-module.exports = ReactMount;
diff --git a/src/browser/ui/__tests__/ReactDOMComponent-test.js b/src/browser/ui/__tests__/ReactDOMComponent-test.js
deleted file mode 100644
index b283a004e9a..00000000000
--- a/src/browser/ui/__tests__/ReactDOMComponent-test.js
+++ /dev/null
@@ -1,421 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var mocks = require('mocks');
-
-describe('ReactDOMComponent', function() {
-
-  describe('updateDOM', function() {
-    var React;
-    var ReactTestUtils;
-    var transaction;
-
-    beforeEach(function() {
-      React = require('React');
-      ReactTestUtils = require('ReactTestUtils');
-
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
-      transaction = new ReactReconcileTransaction();
-    });
-
-    it("should handle className", function() {
-      var stub = ReactTestUtils.renderIntoDocument(<div style={{}} />);
-
-      stub.receiveComponent({props: { className: 'foo' }}, transaction);
-      expect(stub.getDOMNode().className).toEqual('foo');
-      stub.receiveComponent({props: { className: 'bar' }}, transaction);
-      expect(stub.getDOMNode().className).toEqual('bar');
-      stub.receiveComponent({props: { className: null }}, transaction);
-      expect(stub.getDOMNode().className).toEqual('');
-    });
-
-    it("should gracefully handle various style value types", function() {
-      var stub = ReactTestUtils.renderIntoDocument(<div style={{}} />);
-      var stubStyle = stub.getDOMNode().style;
-
-      // set initial style
-      var setup = { display: 'block', left: '1', top: 2, fontFamily: 'Arial' };
-      stub.receiveComponent({props: { style: setup }}, transaction);
-      expect(stubStyle.display).toEqual('block');
-      expect(stubStyle.left).toEqual('1px');
-      expect(stubStyle.fontFamily).toEqual('Arial');
-
-      // reset the style to their default state
-      var reset = { display: '', left: null, top: false, fontFamily: true };
-      stub.receiveComponent({props: { style: reset }}, transaction);
-      expect(stubStyle.display).toEqual('');
-      expect(stubStyle.left).toEqual('');
-      expect(stubStyle.top).toEqual('');
-      expect(stubStyle.fontFamily).toEqual('');
-    });
-
-    it("should update styles when mutating style object", function() {
-      var styles = { display: 'none', fontFamily: 'Arial', lineHeight: 1.2 };
-      var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);
-
-      var stubStyle = stub.getDOMNode().style;
-      stubStyle.display = styles.display;
-      stubStyle.fontFamily = styles.fontFamily;
-
-      styles.display = 'block';
-
-      stub.receiveComponent({props: { style: styles }}, transaction);
-      expect(stubStyle.display).toEqual('block');
-      expect(stubStyle.fontFamily).toEqual('Arial');
-      expect(stubStyle.lineHeight).toEqual('1.2');
-
-      styles.fontFamily = 'Helvetica';
-
-      stub.receiveComponent({props: { style: styles }}, transaction);
-      expect(stubStyle.display).toEqual('block');
-      expect(stubStyle.fontFamily).toEqual('Helvetica');
-      expect(stubStyle.lineHeight).toEqual('1.2');
-
-      styles.lineHeight = 0.5;
-
-      stub.receiveComponent({props: { style: styles }}, transaction);
-      expect(stubStyle.display).toEqual('block');
-      expect(stubStyle.fontFamily).toEqual('Helvetica');
-      expect(stubStyle.lineHeight).toEqual('0.5');
-
-      stub.receiveComponent({props: { style: undefined }}, transaction);
-      expect(stubStyle.display).toBe('');
-      expect(stubStyle.fontFamily).toBe('');
-      expect(stubStyle.lineHeight).toBe('');
-    });
-
-    it("should update styles if initially null", function() {
-      var styles = null;
-      var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);
-
-      var stubStyle = stub.getDOMNode().style;
-
-      styles = {display: 'block'};
-
-      stub.receiveComponent({props: { style: styles }}, transaction);
-      expect(stubStyle.display).toEqual('block');
-    });
-
-    it("should remove attributes", function() {
-      var stub = ReactTestUtils.renderIntoDocument(<img height='17' />);
-
-      expect(stub.getDOMNode().hasAttribute('height')).toBe(true);
-      stub.receiveComponent({props: {}}, transaction);
-      expect(stub.getDOMNode().hasAttribute('height')).toBe(false);
-    });
-
-    it("should remove properties", function() {
-      var stub = ReactTestUtils.renderIntoDocument(<div className='monkey' />);
-
-      expect(stub.getDOMNode().className).toEqual('monkey');
-      stub.receiveComponent({props: {}}, transaction);
-      expect(stub.getDOMNode().className).toEqual('');
-    });
-
-    it("should clear a single style prop when changing 'style'", function() {
-      var styles = {display: 'none', color: 'red'};
-      var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);
-
-      var stubStyle = stub.getDOMNode().style;
-
-      styles = {color: 'green'};
-      stub.receiveComponent({props: { style: styles }}, transaction);
-      expect(stubStyle.display).toEqual('');
-      expect(stubStyle.color).toEqual('green');
-    });
-
-    it("should clear all the styles when removing 'style'", function() {
-      var styles = {display: 'none', color: 'red'};
-      var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);
-
-      var stubStyle = stub.getDOMNode().style;
-
-      stub.receiveComponent({props: {}}, transaction);
-      expect(stubStyle.display).toEqual('');
-      expect(stubStyle.color).toEqual('');
-    });
-
-    it("should empty element when removing innerHTML", function() {
-      var stub = ReactTestUtils.renderIntoDocument(
-        <div dangerouslySetInnerHTML={{__html: ':)'}} />
-      );
-
-      expect(stub.getDOMNode().innerHTML).toEqual(':)');
-      stub.receiveComponent({props: {}}, transaction);
-      expect(stub.getDOMNode().innerHTML).toEqual('');
-    });
-
-    it("should transition from string content to innerHTML", function() {
-      var stub = ReactTestUtils.renderIntoDocument(
-        <div>hello</div>
-      );
-
-      expect(stub.getDOMNode().innerHTML).toEqual('hello');
-      stub.receiveComponent(
-        {props: {dangerouslySetInnerHTML: {__html: 'goodbye'}}},
-        transaction
-      );
-      expect(stub.getDOMNode().innerHTML).toEqual('goodbye');
-    });
-
-    it("should transition from innerHTML to string content", function() {
-      var stub = ReactTestUtils.renderIntoDocument(
-        <div dangerouslySetInnerHTML={{__html: 'bonjour'}} />
-      );
-
-      expect(stub.getDOMNode().innerHTML).toEqual('bonjour');
-      stub.receiveComponent({props: {children: 'adieu'}}, transaction);
-      expect(stub.getDOMNode().innerHTML).toEqual('adieu');
-    });
-
-    it("should not incur unnecessary DOM mutations", function() {
-      var stub = ReactTestUtils.renderIntoDocument(<div value="" />);
-
-      var node = stub.getDOMNode();
-      var nodeValue = ''; // node.value always returns undefined
-      var nodeValueSetter = mocks.getMockFunction();
-      Object.defineProperty(node, 'value', {
-        get: function() {
-          return nodeValue;
-        },
-        set: nodeValueSetter.mockImplementation(function(newValue) {
-          nodeValue = newValue;
-        })
-      });
-
-      stub.receiveComponent({props: {value: ''}}, transaction);
-      expect(nodeValueSetter.mock.calls.length).toBe(0);
-
-      stub.receiveComponent({props: {}}, transaction);
-      expect(nodeValueSetter.mock.calls.length).toBe(1);
-    });
-  });
-
-  describe('createOpenTagMarkup', function() {
-    var genMarkup;
-
-    function quoteRegexp(str) {
-      return (str+'').replace(/([.?*+\^$\[\]\\(){}|-])/g, "\\$1");
-    }
-
-    beforeEach(function() {
-      require('mock-modules').dumpCache();
-
-      var ReactDefaultInjection = require('ReactDefaultInjection');
-      ReactDefaultInjection.inject();
-
-      var mixInto = require('mixInto');
-      var ReactDOMComponent = require('ReactDOMComponent');
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
-
-      var NodeStub = function(initialProps) {
-        this.props = initialProps || {};
-        this._rootNodeID = 'test';
-      };
-      mixInto(NodeStub, ReactDOMComponent.Mixin);
-
-      genMarkup = function(props) {
-        var transaction = new ReactReconcileTransaction();
-        return (new NodeStub(props))._createOpenTagMarkupAndPutListeners(
-          transaction
-        );
-      };
-
-      this.addMatchers({
-        toHaveAttribute: function(attr, value) {
-          var expected = '(?:^|\\s)' + attr + '=[\\\'"]';
-          if (typeof value != 'undefined') {
-            expected += quoteRegexp(value) + '[\\\'"]';
-          }
-          return this.actual.match(new RegExp(expected));
-        }
-      });
-    });
-
-    it("should generate the correct markup with className", function() {
-      expect(genMarkup({ className: 'a' })).toHaveAttribute('class', 'a');
-      expect(genMarkup({ className: 'a b' })).toHaveAttribute('class', 'a b');
-      expect(genMarkup({ className: '' })).toHaveAttribute('class', '');
-    });
-
-    it("should escape style names and values", function() {
-      expect(genMarkup({
-        style: {'b&ckground': '<3'}
-      })).toHaveAttribute('style', 'b&amp;ckground:&lt;3;');
-    });
-  });
-
-  describe('createContentMarkup', function() {
-    var genMarkup;
-
-    function quoteRegexp(str) {
-      return (str+'').replace(/([.?*+\^$\[\]\\(){}|-])/g, "\\$1");
-    }
-
-    beforeEach(function() {
-      require('mock-modules').dumpCache();
-
-      var mixInto = require('mixInto');
-      var ReactDOMComponent = require('ReactDOMComponent');
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
-
-      var NodeStub = function(initialProps) {
-        this.props = initialProps || {};
-        this._rootNodeID = 'test';
-      };
-      mixInto(NodeStub, ReactDOMComponent.Mixin);
-
-      genMarkup = function(props) {
-        var transaction = new ReactReconcileTransaction();
-        return (new NodeStub(props))._createContentMarkup(transaction);
-      };
-
-      this.addMatchers({
-        toHaveInnerhtml: function(html) {
-          var expected = '^' + quoteRegexp(html) + '$';
-          return this.actual.match(new RegExp(expected));
-        }
-      });
-    });
-
-    it("should handle dangerouslySetInnerHTML", function() {
-      var innerHTML = {__html: 'testContent'};
-      expect(
-        genMarkup({ dangerouslySetInnerHTML: innerHTML })
-      ).toHaveInnerhtml('testContent');
-    });
-  });
-
-  describe('mountComponent', function() {
-    var mountComponent;
-
-    beforeEach(function() {
-      require('mock-modules').dumpCache();
-
-      var mixInto = require('mixInto');
-      var ReactComponent = require('ReactComponent');
-      var ReactMultiChild = require('ReactMultiChild');
-      var ReactDOMComponent = require('ReactDOMComponent');
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
-
-      var StubNativeComponent = function(descriptor) {
-        ReactComponent.Mixin.construct.call(this, descriptor);
-      };
-      mixInto(StubNativeComponent, ReactComponent.Mixin);
-      mixInto(StubNativeComponent, ReactDOMComponent.Mixin);
-      mixInto(StubNativeComponent, ReactMultiChild.Mixin);
-
-      mountComponent = function(props) {
-        var transaction = new ReactReconcileTransaction();
-        var stubComponent = new StubNativeComponent({
-          type: StubNativeComponent,
-          props: props,
-          _owner: null,
-          _context: null
-        });
-        return stubComponent.mountComponent('test', transaction, 0);
-      };
-    });
-
-    it("should validate against multiple children props", function() {
-      expect(function() {
-        mountComponent({ children: '', dangerouslySetInnerHTML: '' });
-      }).toThrow(
-        'Invariant Violation: Can only set one of `children` or ' +
-        '`props.dangerouslySetInnerHTML`.'
-      );
-    });
-
-    it("should validate against invalid styles", function() {
-      expect(function() {
-        mountComponent({ style: 'display: none' });
-      }).toThrow(
-        'Invariant Violation: The `style` prop expects a mapping from style ' +
-        'properties to values, not a string.'
-      );
-    });
-  });
-
-  describe('updateComponent', function() {
-    var React;
-    var container;
-
-    beforeEach(function() {
-      React = require('React');
-      container = document.createElement('div');
-    });
-
-    it("should validate against multiple children props", function() {
-      React.renderComponent(<div></div>, container);
-
-      expect(function() {
-        React.renderComponent(
-          <div children="" dangerouslySetInnerHTML={{__html: ''}}></div>,
-          container
-        );
-      }).toThrow(
-        'Invariant Violation: Can only set one of `children` or ' +
-        '`props.dangerouslySetInnerHTML`.'
-      );
-    });
-
-    it("should validate against invalid styles", function() {
-      React.renderComponent(<div></div>, container);
-
-      expect(function() {
-        React.renderComponent(<div style={1}></div>, container);
-      }).toThrow(
-        'Invariant Violation: The `style` prop expects a mapping from style ' +
-        'properties to values, not a string.'
-      );
-    });
-  });
-
-  describe('unmountComponent', function() {
-    it("should clean up listeners", function() {
-      var React = require('React');
-      var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-      var ReactMount = require('ReactMount');
-
-      var container = document.createElement('div');
-      document.documentElement.appendChild(container);
-
-      var callback = function() {};
-      var instance = <div onClick={callback} />;
-      instance = React.renderComponent(instance, container);
-
-      var rootNode = instance.getDOMNode();
-      var rootNodeID = ReactMount.getID(rootNode);
-      expect(
-        ReactBrowserEventEmitter.getListener(rootNodeID, 'onClick')
-      ).toBe(callback);
-
-      React.unmountComponentAtNode(container);
-
-      expect(
-        ReactBrowserEventEmitter.getListener(rootNodeID, 'onClick')
-      ).toBe(undefined);
-    });
-  });
-
-});
diff --git a/src/browser/ui/__tests__/ReactDOMIDOperations-test.js b/src/browser/ui/__tests__/ReactDOMIDOperations-test.js
deleted file mode 100644
index a1b93f04ec3..00000000000
--- a/src/browser/ui/__tests__/ReactDOMIDOperations-test.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-describe('ReactDOMIDOperations', function() {
-  var DOMPropertyOperations = require('DOMPropertyOperations');
-  var ReactDOMIDOperations = require('ReactDOMIDOperations');
-  var ReactMount = require('ReactMount');
-  var keyOf = require('keyOf');
-
-  it('should disallow updating special properties', function() {
-    spyOn(ReactMount, "getNode");
-    spyOn(DOMPropertyOperations, "setValueForProperty");
-
-    expect(function() {
-      ReactDOMIDOperations.updatePropertyByID(
-        'testID',
-        keyOf({dangerouslySetInnerHTML: null}),
-        {__html: 'testContent'}
-      );
-    }).toThrow();
-
-    expect(
-      ReactMount.getNode.argsForCall[0][0]
-    ).toBe('testID');
-
-    expect(
-      DOMPropertyOperations.setValueForProperty.callCount
-    ).toBe(0);
-  });
-
-  it('should update innerHTML and preserve whitespace', function() {
-    var stubNode = document.createElement('div');
-    spyOn(ReactMount, "getNode").andReturn(stubNode);
-
-    var html = '\n  \t  <span>  \n  testContent  \t  </span>  \n  \t';
-
-    ReactDOMIDOperations.updateInnerHTMLByID(
-      'testID',
-      html
-    );
-
-    expect(
-      ReactMount.getNode.argsForCall[0][0]
-    ).toBe('testID');
-
-    expect(stubNode.innerHTML).toBe(html);
-  });
-});
diff --git a/src/browser/ui/__tests__/ReactEventListener-test.js b/src/browser/ui/__tests__/ReactEventListener-test.js
deleted file mode 100644
index 300f93ecf50..00000000000
--- a/src/browser/ui/__tests__/ReactEventListener-test.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- * @jsx React.DOM
- */
-
-'use strict';
-
-var mocks = require('mocks');
-
-
-var EVENT_TARGET_PARAM = 1;
-
-describe('ReactEventListener', function() {
-  var React;
-
-  var ReactMount;
-  var ReactEventListener;
-  var handleTopLevel;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    React = require('React');
-
-    ReactMount = require('ReactMount');
-    ReactEventListener = require('ReactEventListener');
-
-    handleTopLevel = mocks.getMockFunction();
-    ReactEventListener._handleTopLevel = handleTopLevel;
-  });
-
-  describe('Propagation', function() {
-    it('should propagate events one level down', function() {
-      var childContainer = document.createElement('div');
-      var childControl = <div>Child</div>;
-      var parentContainer = document.createElement('div');
-      var parentControl = <div>Parent</div>;
-      childControl = ReactMount.renderComponent(childControl, childContainer);
-      parentControl =
-        ReactMount.renderComponent(parentControl, parentContainer);
-      parentControl.getDOMNode().appendChild(childContainer);
-
-      var callback = ReactEventListener.dispatchEvent.bind(null, 'test');
-      callback({
-        target: childControl.getDOMNode()
-      });
-
-      var calls = handleTopLevel.mock.calls;
-      expect(calls.length).toBe(2);
-      expect(calls[0][EVENT_TARGET_PARAM]).toBe(childControl.getDOMNode());
-      expect(calls[1][EVENT_TARGET_PARAM]).toBe(parentControl.getDOMNode());
-    });
-
-    it('should propagate events two levels down', function() {
-      var childContainer = document.createElement('div');
-      var childControl = <div>Child</div>;
-      var parentContainer = document.createElement('div');
-      var parentControl = <div>Parent</div>;
-      var grandParentContainer = document.createElement('div');
-      var grandParentControl = <div>Parent</div>;
-      childControl = ReactMount.renderComponent(childControl, childContainer);
-      parentControl =
-        ReactMount.renderComponent(parentControl, parentContainer);
-      grandParentControl =
-        ReactMount.renderComponent(grandParentControl, grandParentContainer);
-      parentControl.getDOMNode().appendChild(childContainer);
-      grandParentControl.getDOMNode().appendChild(parentContainer);
-
-      var callback = ReactEventListener.dispatchEvent.bind(null, 'test');
-      callback({
-        target: childControl.getDOMNode()
-      });
-
-      var calls = handleTopLevel.mock.calls;
-      expect(calls.length).toBe(3);
-      expect(calls[0][EVENT_TARGET_PARAM]).toBe(childControl.getDOMNode());
-      expect(calls[1][EVENT_TARGET_PARAM]).toBe(parentControl.getDOMNode());
-      expect(calls[2][EVENT_TARGET_PARAM])
-        .toBe(grandParentControl.getDOMNode());
-    });
-
-    it('should not get confused by disappearing elements', function() {
-      var childContainer = document.createElement('div');
-      var childControl = <div>Child</div>;
-      var parentContainer = document.createElement('div');
-      var parentControl = <div>Parent</div>;
-      childControl = ReactMount.renderComponent(childControl, childContainer);
-      parentControl =
-        ReactMount.renderComponent(parentControl, parentContainer);
-      parentControl.getDOMNode().appendChild(childContainer);
-
-      // ReactBrowserEventEmitter.handleTopLevel might remove the
-      // target from the DOM. Here, we have handleTopLevel remove the
-      // node when the first event handlers are called; we'll still
-      // expect to receive a second call for the parent control.
-      var childNode = childControl.getDOMNode();
-      handleTopLevel.mockImplementation(
-        function(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {
-          if (topLevelTarget === childNode) {
-            ReactMount.unmountComponentAtNode(childContainer);
-          }
-        }
-      );
-
-      var callback = ReactEventListener.dispatchEvent.bind(null, 'test');
-      callback({
-        target: childNode
-      });
-
-      var calls = handleTopLevel.mock.calls;
-      expect(calls.length).toBe(2);
-      expect(calls[0][EVENT_TARGET_PARAM]).toBe(childNode);
-      expect(calls[1][EVENT_TARGET_PARAM]).toBe(parentControl.getDOMNode());
-    });
-
-    it('should batch between handlers from different roots', function() {
-      var childContainer = document.createElement('div');
-      var parentContainer = document.createElement('div');
-      var childControl = ReactMount.renderComponent(
-        <div>Child</div>,
-        childContainer
-      );
-      var parentControl = ReactMount.renderComponent(
-        <div>Parent</div>,
-        parentContainer
-      );
-      parentControl.getDOMNode().appendChild(childContainer);
-
-      // Suppose an event handler in each root enqueues an update to the
-      // childControl element -- the two updates should get batched together.
-      var childNode = childControl.getDOMNode();
-      handleTopLevel.mockImplementation(
-        function(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {
-          ReactMount.renderComponent(
-            <div>{topLevelTarget === childNode ? '1' : '2'}</div>,
-            childContainer
-          );
-          // Since we're batching, neither update should yet have gone through.
-          expect(childNode.textContent).toBe('Child');
-        }
-      );
-
-      var callback =
-        ReactEventListener.dispatchEvent.bind(ReactEventListener, 'test');
-      callback({
-        target: childNode
-      });
-
-      var calls = handleTopLevel.mock.calls;
-      expect(calls.length).toBe(2);
-      expect(childNode.textContent).toBe('2');
-    });
-  });
-
-  it('should not fire duplicate events for a React DOM tree', function() {
-    var container = document.createElement('div');
-    var Wrapper = React.createClass({
-
-      getInner: function() {
-        return this.refs.inner;
-      },
-
-      render: function() {
-        var inner = <div ref="inner">Inner</div>;
-        return <div><div id="outer">{inner}</div></div>;
-      }
-
-    });
-
-    var instance = ReactMount.renderComponent(<Wrapper />, container);
-
-    var callback = ReactEventListener.dispatchEvent.bind(null, 'test');
-    callback({
-      target: instance.getInner().getDOMNode()
-    });
-
-    var calls = handleTopLevel.mock.calls;
-    expect(calls.length).toBe(1);
-    expect(calls[0][EVENT_TARGET_PARAM]).toBe(instance.getInner().getDOMNode());
-  });
-});
diff --git a/src/browser/ui/__tests__/ReactMount-test.js b/src/browser/ui/__tests__/ReactMount-test.js
deleted file mode 100644
index 4dd3448e672..00000000000
--- a/src/browser/ui/__tests__/ReactMount-test.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var mocks = require('mocks');
-
-describe('ReactMount', function() {
-  var React = require('React');
-  var ReactMount = require('ReactMount');
-  var ReactTestUtils = require('ReactTestUtils');
-
-  describe('constructAndRenderComponentByID', function() {
-    it('throws if given an id for a component that doesn\'t exist', function() {
-      expect(function() {
-        ReactMount.constructAndRenderComponentByID(
-          function dummyComponentConstructor() {},
-          {},
-          'SOME_ID_THAT_DOESNT_EXIST'
-        );
-      }).toThrow();
-    });
-  });
-
-  it('throws when given a factory', function() {
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(React.DOM.div);
-    }).toThrow(
-      'Invariant Violation: renderComponent(): Invalid component descriptor. ' +
-      'Instead of passing a component class, make sure to instantiate it ' +
-      'first by calling it with props.'
-    );
-
-    var Component = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(Component);
-    }).toThrow(
-      'Invariant Violation: renderComponent(): Invalid component descriptor. ' +
-      'Instead of passing a component class, make sure to instantiate it ' +
-      'first by calling it with props.'
-    );
-  });
-
-  it('should render different components in same root', function() {
-    var container = document.createElement('container');
-    document.documentElement.appendChild(container);
-
-    ReactMount.renderComponent(<div></div>, container);
-    expect(container.firstChild.nodeName).toBe('DIV');
-
-    ReactMount.renderComponent(<span></span>, container);
-    expect(container.firstChild.nodeName).toBe('SPAN');
-  });
-
-  it('should unmount and remount if the key changes', function() {
-    var container = document.createElement('container');
-
-    var mockMount = mocks.getMockFunction();
-    var mockUnmount = mocks.getMockFunction();
-
-    var Component = React.createClass({
-      componentDidMount: mockMount,
-      componentWillUnmount: mockUnmount,
-      render: function() {
-        return <span>{this.props.text}</span>;
-      }
-    });
-
-    expect(mockMount.mock.calls.length).toBe(0);
-    expect(mockUnmount.mock.calls.length).toBe(0);
-
-    ReactMount.renderComponent(<Component text="orange" key="A" />, container);
-    expect(container.firstChild.innerHTML).toBe('orange');
-    expect(mockMount.mock.calls.length).toBe(1);
-    expect(mockUnmount.mock.calls.length).toBe(0);
-
-    // If we change the key, the component is unmounted and remounted
-    ReactMount.renderComponent(<Component text="green" key="B" />, container);
-    expect(container.firstChild.innerHTML).toBe('green');
-    expect(mockMount.mock.calls.length).toBe(2);
-    expect(mockUnmount.mock.calls.length).toBe(1);
-
-    // But if we don't change the key, the component instance is reused
-    ReactMount.renderComponent(<Component text="blue" key="B" />, container);
-    expect(container.firstChild.innerHTML).toBe('blue');
-    expect(mockMount.mock.calls.length).toBe(2);
-    expect(mockUnmount.mock.calls.length).toBe(1);
-  });
-
-  it('should reuse markup if rendering to the same target twice', function() {
-    var container = document.createElement('container');
-    var instance1 = React.renderComponent(<div />, container);
-    var instance2 = React.renderComponent(<div />, container);
-
-    expect(instance1 === instance2).toBe(true);
-  });
-});
diff --git a/src/browser/ui/__tests__/ReactMountDestruction-test.js b/src/browser/ui/__tests__/ReactMountDestruction-test.js
deleted file mode 100644
index c73ddb461f6..00000000000
--- a/src/browser/ui/__tests__/ReactMountDestruction-test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React = require('React');
-
-describe('ReactMount', function() {
-  it("should destroy a react root upon request", function() {
-    var mainContainerDiv = document.createElement('div');
-    document.documentElement.appendChild(mainContainerDiv);
-
-    var instanceOne = (
-      <div className="firstReactDiv">
-      </div>
-    );
-    var firstRootDiv = document.createElement('div');
-    mainContainerDiv.appendChild(firstRootDiv);
-    React.renderComponent(instanceOne, firstRootDiv);
-
-    var instanceTwo = (
-      <div className="secondReactDiv">
-      </div>
-    );
-    var secondRootDiv = document.createElement('div');
-    mainContainerDiv.appendChild(secondRootDiv);
-    React.renderComponent(instanceTwo, secondRootDiv);
-
-    // Test that two react roots are rendered in isolation
-    expect(firstRootDiv.firstChild.className).toBe('firstReactDiv');
-    expect(secondRootDiv.firstChild.className).toBe('secondReactDiv');
-
-    // Test that after unmounting each, they are no longer in the document.
-    React.unmountComponentAtNode(firstRootDiv);
-    expect(firstRootDiv.firstChild).toBeNull();
-    React.unmountComponentAtNode(secondRootDiv);
-    expect(secondRootDiv.firstChild).toBeNull();
-  });
-});
diff --git a/src/browser/ui/__tests__/ReactRenderDocument-test.js b/src/browser/ui/__tests__/ReactRenderDocument-test.js
deleted file mode 100644
index 8a545252ede..00000000000
--- a/src/browser/ui/__tests__/ReactRenderDocument-test.js
+++ /dev/null
@@ -1,251 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var React;
-var ReactMount;
-
-var getTestDocument;
-
-var testDocument;
-
-var UNMOUNT_INVARIANT_MESSAGE =
-  'Invariant Violation: ReactFullPageComponenthtml tried to unmount. ' +
-  'Because of cross-browser quirks it is impossible to unmount some ' +
-  'top-level components (eg <html>, <head>, and <body>) reliably and ' +
-  'efficiently. To fix this, have a single top-level component that ' +
-  'never unmounts render these elements.';
-
-describe('rendering React components at document', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-
-    React = require('React');
-    ReactMount = require('ReactMount');
-    getTestDocument = require('getTestDocument');
-
-    testDocument = getTestDocument();
-  });
-
-  it('should be able to get root component id for document node', function() {
-    expect(testDocument).not.toBeUndefined();
-
-    var Root = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              Hello world
-            </body>
-          </html>
-        );
-      }
-    });
-
-    var markup = React.renderComponentToString(<Root />);
-    testDocument = getTestDocument(markup);
-    var component = React.renderComponent(<Root />, testDocument);
-    expect(testDocument.body.innerHTML).toBe('Hello world');
-
-    var componentID = ReactMount.getReactRootID(testDocument);
-    expect(componentID).toBe(component._rootNodeID);
-  });
-
-  it('should not be able to unmount component from document node', function() {
-    expect(testDocument).not.toBeUndefined();
-
-    var Root = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              Hello world
-            </body>
-          </html>
-        );
-      }
-    });
-
-    var markup = React.renderComponentToString(<Root />);
-    testDocument = getTestDocument(markup);
-    React.renderComponent(<Root />, testDocument);
-    expect(testDocument.body.innerHTML).toBe('Hello world');
-
-    expect(function() {
-      React.unmountComponentAtNode(testDocument);
-    }).toThrow(UNMOUNT_INVARIANT_MESSAGE);
-
-    expect(testDocument.body.innerHTML).toBe('Hello world');
-  });
-
-  it('should not be able to switch root constructors', function() {
-    expect(testDocument).not.toBeUndefined();
-
-    var Component = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              Hello world
-            </body>
-          </html>
-        );
-      }
-    });
-
-    var Component2 = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              Goodbye world
-            </body>
-          </html>
-        );
-      }
-    });
-
-    var markup = React.renderComponentToString(<Component />);
-    testDocument = getTestDocument(markup);
-
-    React.renderComponent(<Component />, testDocument);
-
-    expect(testDocument.body.innerHTML).toBe('Hello world');
-
-    // Reactive update
-    expect(function() {
-      React.renderComponent(<Component2 />, testDocument);
-    }).toThrow(UNMOUNT_INVARIANT_MESSAGE);
-
-    expect(testDocument.body.innerHTML).toBe('Hello world');
-  });
-
-  it('should be able to mount into document', function() {
-    expect(testDocument).not.toBeUndefined();
-
-    var Component = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              {this.props.text}
-            </body>
-          </html>
-        );
-      }
-    });
-
-    var markup = React.renderComponentToString(
-      <Component text="Hello world" />
-    );
-    testDocument = getTestDocument(markup);
-
-    React.renderComponent(<Component text="Hello world" />, testDocument);
-
-    expect(testDocument.body.innerHTML).toBe('Hello world');
-  });
-
-  it('should give helpful errors on state desync', function() {
-    expect(testDocument).not.toBeUndefined();
-
-    var Component = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              {this.props.text}
-            </body>
-          </html>
-        );
-      }
-    });
-
-    var markup = React.renderComponentToString(
-      <Component text="Goodbye world" />
-    );
-    testDocument = getTestDocument(markup);
-
-    expect(function() {
-      // Notice the text is different!
-      React.renderComponent(<Component text="Hello world" />, testDocument);
-    }).toThrow(
-      'Invariant Violation: ' +
-      'You\'re trying to render a component to the document using ' +
-      'server rendering but the checksum was invalid. This usually ' +
-      'means you rendered a different component type or props on ' +
-      'the client from the one on the server, or your render() methods ' +
-      'are impure. React cannot handle this case due to cross-browser ' +
-      'quirks by rendering at the document root. You should look for ' +
-      'environment dependent code in your components and ensure ' +
-      'the props are the same client and server side.'
-    );
-  });
-
-  it('should throw on full document render w/ no markup', function() {
-    expect(testDocument).not.toBeUndefined();
-
-    var container = testDocument;
-
-    var Component = React.createClass({
-      render: function() {
-        return (
-          <html>
-            <head>
-              <title>Hello World</title>
-            </head>
-            <body>
-              {this.props.text}
-            </body>
-          </html>
-        );
-      }
-    });
-
-    expect(function() {
-      React.renderComponent(<Component />, container);
-    }).toThrow(
-      'Invariant Violation: You\'re trying to render a component to the ' +
-      'document but you didn\'t use server rendering. We can\'t do this ' +
-      'without using server rendering due to cross-browser quirks. See ' +
-      'renderComponentToString() for server rendering.'
-    );
-  });
-
-});
diff --git a/src/browser/ui/dom/CSSProperty.js b/src/browser/ui/dom/CSSProperty.js
deleted file mode 100644
index dbf42b33603..00000000000
--- a/src/browser/ui/dom/CSSProperty.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule CSSProperty
- */
-
-"use strict";
-
-/**
- * CSS properties which accept numbers but are not in units of "px".
- */
-var isUnitlessNumber = {
-  columnCount: true,
-  fillOpacity: true,
-  flex: true,
-  flexGrow: true,
-  flexShrink: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  widows: true,
-  zIndex: true,
-  zoom: true
-};
-
-/**
- * @param {string} prefix vendor-specific prefix, eg: Webkit
- * @param {string} key style name, eg: transitionDuration
- * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
- * WebkitTransitionDuration
- */
-function prefixKey(prefix, key) {
-  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
-}
-
-/**
- * Support style names that may come passed in prefixed by adding permutations
- * of vendor prefixes.
- */
-var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
-
-// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
-// infinite loop, because it iterates over the newly added props too.
-Object.keys(isUnitlessNumber).forEach(function(prop) {
-  prefixes.forEach(function(prefix) {
-    isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
-  });
-});
-
-/**
- * Most style properties can be unset by doing .style[prop] = '' but IE8
- * doesn't like doing that with shorthand properties so for the properties that
- * IE8 breaks on, which are listed here, we instead unset each of the
- * individual properties. See http://bugs.jquery.com/ticket/12385.
- * The 4-value 'clock' properties like margin, padding, border-width seem to
- * behave without any problems. Curiously, list-style works too without any
- * special prodding.
- */
-var shorthandPropertyExpansions = {
-  background: {
-    backgroundImage: true,
-    backgroundPosition: true,
-    backgroundRepeat: true,
-    backgroundColor: true
-  },
-  border: {
-    borderWidth: true,
-    borderStyle: true,
-    borderColor: true
-  },
-  borderBottom: {
-    borderBottomWidth: true,
-    borderBottomStyle: true,
-    borderBottomColor: true
-  },
-  borderLeft: {
-    borderLeftWidth: true,
-    borderLeftStyle: true,
-    borderLeftColor: true
-  },
-  borderRight: {
-    borderRightWidth: true,
-    borderRightStyle: true,
-    borderRightColor: true
-  },
-  borderTop: {
-    borderTopWidth: true,
-    borderTopStyle: true,
-    borderTopColor: true
-  },
-  font: {
-    fontStyle: true,
-    fontVariant: true,
-    fontWeight: true,
-    fontSize: true,
-    lineHeight: true,
-    fontFamily: true
-  }
-};
-
-var CSSProperty = {
-  isUnitlessNumber: isUnitlessNumber,
-  shorthandPropertyExpansions: shorthandPropertyExpansions
-};
-
-module.exports = CSSProperty;
diff --git a/src/browser/ui/dom/CSSPropertyOperations.js b/src/browser/ui/dom/CSSPropertyOperations.js
deleted file mode 100644
index f3ec5915575..00000000000
--- a/src/browser/ui/dom/CSSPropertyOperations.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule CSSPropertyOperations
- * @typechecks static-only
- */
-
-"use strict";
-
-var CSSProperty = require('CSSProperty');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var dangerousStyleValue = require('dangerousStyleValue');
-var hyphenateStyleName = require('hyphenateStyleName');
-var memoizeStringOnly = require('memoizeStringOnly');
-
-var processStyleName = memoizeStringOnly(function(styleName) {
-  return hyphenateStyleName(styleName);
-});
-
-var styleFloatAccessor = 'cssFloat';
-if (ExecutionEnvironment.canUseDOM) {
-  // IE8 only supports accessing cssFloat (standard) as styleFloat
-  if (document.documentElement.style.cssFloat === undefined) {
-    styleFloatAccessor = 'styleFloat';
-  }
-}
-
-/**
- * Operations for dealing with CSS properties.
- */
-var CSSPropertyOperations = {
-
-  /**
-   * Serializes a mapping of style properties for use as inline styles:
-   *
-   *   > createMarkupForStyles({width: '200px', height: 0})
-   *   "width:200px;height:0;"
-   *
-   * Undefined values are ignored so that declarative programming is easier.
-   * The result should be HTML-escaped before insertion into the DOM.
-   *
-   * @param {object} styles
-   * @return {?string}
-   */
-  createMarkupForStyles: function(styles) {
-    var serialized = '';
-    for (var styleName in styles) {
-      if (!styles.hasOwnProperty(styleName)) {
-        continue;
-      }
-      var styleValue = styles[styleName];
-      if (styleValue != null) {
-        serialized += processStyleName(styleName) + ':';
-        serialized += dangerousStyleValue(styleName, styleValue) + ';';
-      }
-    }
-    return serialized || null;
-  },
-
-  /**
-   * Sets the value for multiple styles on a node.  If a value is specified as
-   * '' (empty string), the corresponding style property will be unset.
-   *
-   * @param {DOMElement} node
-   * @param {object} styles
-   */
-  setValueForStyles: function(node, styles) {
-    var style = node.style;
-    for (var styleName in styles) {
-      if (!styles.hasOwnProperty(styleName)) {
-        continue;
-      }
-      var styleValue = dangerousStyleValue(styleName, styles[styleName]);
-      if (styleName === 'float') {
-        styleName = styleFloatAccessor;
-      }
-      if (styleValue) {
-        style[styleName] = styleValue;
-      } else {
-        var expansion = CSSProperty.shorthandPropertyExpansions[styleName];
-        if (expansion) {
-          // Shorthand property that IE8 won't like unsetting, so unset each
-          // component to placate it
-          for (var individualStyleName in expansion) {
-            style[individualStyleName] = '';
-          }
-        } else {
-          style[styleName] = '';
-        }
-      }
-    }
-  }
-
-};
-
-module.exports = CSSPropertyOperations;
diff --git a/src/browser/ui/dom/DOMChildrenOperations.js b/src/browser/ui/dom/DOMChildrenOperations.js
deleted file mode 100644
index 437164653b7..00000000000
--- a/src/browser/ui/dom/DOMChildrenOperations.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule DOMChildrenOperations
- * @typechecks static-only
- */
-
-"use strict";
-
-var Danger = require('Danger');
-var ReactMultiChildUpdateTypes = require('ReactMultiChildUpdateTypes');
-
-var getTextContentAccessor = require('getTextContentAccessor');
-var invariant = require('invariant');
-
-/**
- * The DOM property to use when setting text content.
- *
- * @type {string}
- * @private
- */
-var textContentAccessor = getTextContentAccessor();
-
-/**
- * Inserts `childNode` as a child of `parentNode` at the `index`.
- *
- * @param {DOMElement} parentNode Parent node in which to insert.
- * @param {DOMElement} childNode Child node to insert.
- * @param {number} index Index at which to insert the child.
- * @internal
- */
-function insertChildAt(parentNode, childNode, index) {
-  // By exploiting arrays returning `undefined` for an undefined index, we can
-  // rely exclusively on `insertBefore(node, null)` instead of also using
-  // `appendChild(node)`. However, using `undefined` is not allowed by all
-  // browsers so we must replace it with `null`.
-  parentNode.insertBefore(
-    childNode,
-    parentNode.childNodes[index] || null
-  );
-}
-
-var updateTextContent;
-if (textContentAccessor === 'textContent') {
-  /**
-   * Sets the text content of `node` to `text`.
-   *
-   * @param {DOMElement} node Node to change
-   * @param {string} text New text content
-   */
-  updateTextContent = function(node, text) {
-    node.textContent = text;
-  };
-} else {
-  /**
-   * Sets the text content of `node` to `text`.
-   *
-   * @param {DOMElement} node Node to change
-   * @param {string} text New text content
-   */
-  updateTextContent = function(node, text) {
-    // In order to preserve newlines correctly, we can't use .innerText to set
-    // the contents (see #1080), so we empty the element then append a text node
-    while (node.firstChild) {
-      node.removeChild(node.firstChild);
-    }
-    if (text) {
-      var doc = node.ownerDocument || document;
-      node.appendChild(doc.createTextNode(text));
-    }
-  };
-}
-
-/**
- * Operations for updating with DOM children.
- */
-var DOMChildrenOperations = {
-
-  dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
-
-  updateTextContent: updateTextContent,
-
-  /**
-   * Updates a component's children by processing a series of updates. The
-   * update configurations are each expected to have a `parentNode` property.
-   *
-   * @param {array<object>} updates List of update configurations.
-   * @param {array<string>} markupList List of markup strings.
-   * @internal
-   */
-  processUpdates: function(updates, markupList) {
-    var update;
-    // Mapping from parent IDs to initial child orderings.
-    var initialChildren = null;
-    // List of children that will be moved or removed.
-    var updatedChildren = null;
-
-    for (var i = 0; update = updates[i]; i++) {
-      if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING ||
-          update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {
-        var updatedIndex = update.fromIndex;
-        var updatedChild = update.parentNode.childNodes[updatedIndex];
-        var parentID = update.parentID;
-
-        invariant(
-          updatedChild,
-          'processUpdates(): Unable to find child %s of element. This ' +
-          'probably means the DOM was unexpectedly mutated (e.g., by the ' +
-          'browser), usually due to forgetting a <tbody> when using tables, ' +
-          'nesting tags like <form>, <p>, or <a>, or using non-SVG elements '+
-          'in an <svg> parent. Try inspecting the child nodes of the element ' +
-          'with React ID `%s`.',
-          updatedIndex,
-          parentID
-        );
-
-        initialChildren = initialChildren || {};
-        initialChildren[parentID] = initialChildren[parentID] || [];
-        initialChildren[parentID][updatedIndex] = updatedChild;
-
-        updatedChildren = updatedChildren || [];
-        updatedChildren.push(updatedChild);
-      }
-    }
-
-    var renderedMarkup = Danger.dangerouslyRenderMarkup(markupList);
-
-    // Remove updated children first so that `toIndex` is consistent.
-    if (updatedChildren) {
-      for (var j = 0; j < updatedChildren.length; j++) {
-        updatedChildren[j].parentNode.removeChild(updatedChildren[j]);
-      }
-    }
-
-    for (var k = 0; update = updates[k]; k++) {
-      switch (update.type) {
-        case ReactMultiChildUpdateTypes.INSERT_MARKUP:
-          insertChildAt(
-            update.parentNode,
-            renderedMarkup[update.markupIndex],
-            update.toIndex
-          );
-          break;
-        case ReactMultiChildUpdateTypes.MOVE_EXISTING:
-          insertChildAt(
-            update.parentNode,
-            initialChildren[update.parentID][update.fromIndex],
-            update.toIndex
-          );
-          break;
-        case ReactMultiChildUpdateTypes.TEXT_CONTENT:
-          updateTextContent(
-            update.parentNode,
-            update.textContent
-          );
-          break;
-        case ReactMultiChildUpdateTypes.REMOVE_NODE:
-          // Already removed by the for-loop above.
-          break;
-      }
-    }
-  }
-
-};
-
-module.exports = DOMChildrenOperations;
diff --git a/src/browser/ui/dom/DOMProperty.js b/src/browser/ui/dom/DOMProperty.js
deleted file mode 100644
index 46d757c5970..00000000000
--- a/src/browser/ui/dom/DOMProperty.js
+++ /dev/null
@@ -1,294 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule DOMProperty
- * @typechecks static-only
- */
-
-/*jslint bitwise: true */
-
-"use strict";
-
-var invariant = require('invariant');
-
-var DOMPropertyInjection = {
-  /**
-   * Mapping from normalized, camelcased property names to a configuration that
-   * specifies how the associated DOM property should be accessed or rendered.
-   */
-  MUST_USE_ATTRIBUTE: 0x1,
-  MUST_USE_PROPERTY: 0x2,
-  HAS_SIDE_EFFECTS: 0x4,
-  HAS_BOOLEAN_VALUE: 0x8,
-  HAS_NUMERIC_VALUE: 0x10,
-  HAS_POSITIVE_NUMERIC_VALUE: 0x20 | 0x10,
-  HAS_OVERLOADED_BOOLEAN_VALUE: 0x40,
-
-  /**
-   * Inject some specialized knowledge about the DOM. This takes a config object
-   * with the following properties:
-   *
-   * isCustomAttribute: function that given an attribute name will return true
-   * if it can be inserted into the DOM verbatim. Useful for data-* or aria-*
-   * attributes where it's impossible to enumerate all of the possible
-   * attribute names,
-   *
-   * Properties: object mapping DOM property name to one of the
-   * DOMPropertyInjection constants or null. If your attribute isn't in here,
-   * it won't get written to the DOM.
-   *
-   * DOMAttributeNames: object mapping React attribute name to the DOM
-   * attribute name. Attribute names not specified use the **lowercase**
-   * normalized name.
-   *
-   * DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.
-   * Property names not specified use the normalized name.
-   *
-   * DOMMutationMethods: Properties that require special mutation methods. If
-   * `value` is undefined, the mutation method should unset the property.
-   *
-   * @param {object} domPropertyConfig the config as described above.
-   */
-  injectDOMPropertyConfig: function(domPropertyConfig) {
-    var Properties = domPropertyConfig.Properties || {};
-    var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
-    var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};
-    var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};
-
-    if (domPropertyConfig.isCustomAttribute) {
-      DOMProperty._isCustomAttributeFunctions.push(
-        domPropertyConfig.isCustomAttribute
-      );
-    }
-
-    for (var propName in Properties) {
-      invariant(
-        !DOMProperty.isStandardName.hasOwnProperty(propName),
-        'injectDOMPropertyConfig(...): You\'re trying to inject DOM property ' +
-        '\'%s\' which has already been injected. You may be accidentally ' +
-        'injecting the same DOM property config twice, or you may be ' +
-        'injecting two configs that have conflicting property names.',
-        propName
-      );
-
-      DOMProperty.isStandardName[propName] = true;
-
-      var lowerCased = propName.toLowerCase();
-      DOMProperty.getPossibleStandardName[lowerCased] = propName;
-
-      if (DOMAttributeNames.hasOwnProperty(propName)) {
-        var attributeName = DOMAttributeNames[propName];
-        DOMProperty.getPossibleStandardName[attributeName] = propName;
-        DOMProperty.getAttributeName[propName] = attributeName;
-      } else {
-        DOMProperty.getAttributeName[propName] = lowerCased;
-      }
-
-      DOMProperty.getPropertyName[propName] =
-        DOMPropertyNames.hasOwnProperty(propName) ?
-          DOMPropertyNames[propName] :
-          propName;
-
-      if (DOMMutationMethods.hasOwnProperty(propName)) {
-        DOMProperty.getMutationMethod[propName] = DOMMutationMethods[propName];
-      } else {
-        DOMProperty.getMutationMethod[propName] = null;
-      }
-
-      var propConfig = Properties[propName];
-      DOMProperty.mustUseAttribute[propName] =
-        propConfig & DOMPropertyInjection.MUST_USE_ATTRIBUTE;
-      DOMProperty.mustUseProperty[propName] =
-        propConfig & DOMPropertyInjection.MUST_USE_PROPERTY;
-      DOMProperty.hasSideEffects[propName] =
-        propConfig & DOMPropertyInjection.HAS_SIDE_EFFECTS;
-      DOMProperty.hasBooleanValue[propName] =
-        propConfig & DOMPropertyInjection.HAS_BOOLEAN_VALUE;
-      DOMProperty.hasNumericValue[propName] =
-        propConfig & DOMPropertyInjection.HAS_NUMERIC_VALUE;
-      DOMProperty.hasPositiveNumericValue[propName] =
-        propConfig & DOMPropertyInjection.HAS_POSITIVE_NUMERIC_VALUE;
-      DOMProperty.hasOverloadedBooleanValue[propName] =
-        propConfig & DOMPropertyInjection.HAS_OVERLOADED_BOOLEAN_VALUE;
-
-      invariant(
-        !DOMProperty.mustUseAttribute[propName] ||
-          !DOMProperty.mustUseProperty[propName],
-        'DOMProperty: Cannot require using both attribute and property: %s',
-        propName
-      );
-      invariant(
-        DOMProperty.mustUseProperty[propName] ||
-          !DOMProperty.hasSideEffects[propName],
-        'DOMProperty: Properties that have side effects must use property: %s',
-        propName
-      );
-      invariant(
-        !!DOMProperty.hasBooleanValue[propName] +
-          !!DOMProperty.hasNumericValue[propName] +
-          !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1,
-        'DOMProperty: Value can be one of boolean, overloaded boolean, or ' +
-        'numeric value, but not a combination: %s',
-        propName
-      );
-    }
-  }
-};
-var defaultValueCache = {};
-
-/**
- * DOMProperty exports lookup objects that can be used like functions:
- *
- *   > DOMProperty.isValid['id']
- *   true
- *   > DOMProperty.isValid['foobar']
- *   undefined
- *
- * Although this may be confusing, it performs better in general.
- *
- * @see http://jsperf.com/key-exists
- * @see http://jsperf.com/key-missing
- */
-var DOMProperty = {
-
-  ID_ATTRIBUTE_NAME: 'data-reactid',
-
-  /**
-   * Checks whether a property name is a standard property.
-   * @type {Object}
-   */
-  isStandardName: {},
-
-  /**
-   * Mapping from lowercase property names to the properly cased version, used
-   * to warn in the case of missing properties.
-   * @type {Object}
-   */
-  getPossibleStandardName: {},
-
-  /**
-   * Mapping from normalized names to attribute names that differ. Attribute
-   * names are used when rendering markup or with `*Attribute()`.
-   * @type {Object}
-   */
-  getAttributeName: {},
-
-  /**
-   * Mapping from normalized names to properties on DOM node instances.
-   * (This includes properties that mutate due to external factors.)
-   * @type {Object}
-   */
-  getPropertyName: {},
-
-  /**
-   * Mapping from normalized names to mutation methods. This will only exist if
-   * mutation cannot be set simply by the property or `setAttribute()`.
-   * @type {Object}
-   */
-  getMutationMethod: {},
-
-  /**
-   * Whether the property must be accessed and mutated as an object property.
-   * @type {Object}
-   */
-  mustUseAttribute: {},
-
-  /**
-   * Whether the property must be accessed and mutated using `*Attribute()`.
-   * (This includes anything that fails `<propName> in <element>`.)
-   * @type {Object}
-   */
-  mustUseProperty: {},
-
-  /**
-   * Whether or not setting a value causes side effects such as triggering
-   * resources to be loaded or text selection changes. We must ensure that
-   * the value is only set if it has changed.
-   * @type {Object}
-   */
-  hasSideEffects: {},
-
-  /**
-   * Whether the property should be removed when set to a falsey value.
-   * @type {Object}
-   */
-  hasBooleanValue: {},
-
-  /**
-   * Whether the property must be numeric or parse as a
-   * numeric and should be removed when set to a falsey value.
-   * @type {Object}
-   */
-  hasNumericValue: {},
-
-  /**
-   * Whether the property must be positive numeric or parse as a positive
-   * numeric and should be removed when set to a falsey value.
-   * @type {Object}
-   */
-  hasPositiveNumericValue: {},
-
-  /**
-   * Whether the property can be used as a flag as well as with a value. Removed
-   * when strictly equal to false; present without a value when strictly equal
-   * to true; present with a value otherwise.
-   * @type {Object}
-   */
-  hasOverloadedBooleanValue: {},
-
-  /**
-   * All of the isCustomAttribute() functions that have been injected.
-   */
-  _isCustomAttributeFunctions: [],
-
-  /**
-   * Checks whether a property name is a custom attribute.
-   * @method
-   */
-  isCustomAttribute: function(attributeName) {
-    for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) {
-      var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i];
-      if (isCustomAttributeFn(attributeName)) {
-        return true;
-      }
-    }
-    return false;
-  },
-
-  /**
-   * Returns the default property value for a DOM property (i.e., not an
-   * attribute). Most default values are '' or false, but not all. Worse yet,
-   * some (in particular, `type`) vary depending on the type of element.
-   *
-   * TODO: Is it better to grab all the possible properties when creating an
-   * element to avoid having to create the same element twice?
-   */
-  getDefaultValueForProperty: function(nodeName, prop) {
-    var nodeDefaults = defaultValueCache[nodeName];
-    var testElement;
-    if (!nodeDefaults) {
-      defaultValueCache[nodeName] = nodeDefaults = {};
-    }
-    if (!(prop in nodeDefaults)) {
-      testElement = document.createElement(nodeName);
-      nodeDefaults[prop] = testElement[prop];
-    }
-    return nodeDefaults[prop];
-  },
-
-  injection: DOMPropertyInjection
-};
-
-module.exports = DOMProperty;
diff --git a/src/browser/ui/dom/DOMPropertyOperations.js b/src/browser/ui/dom/DOMPropertyOperations.js
deleted file mode 100644
index e4d562af856..00000000000
--- a/src/browser/ui/dom/DOMPropertyOperations.js
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule DOMPropertyOperations
- * @typechecks static-only
- */
-
-"use strict";
-
-var DOMProperty = require('DOMProperty');
-
-var escapeTextForBrowser = require('escapeTextForBrowser');
-var memoizeStringOnly = require('memoizeStringOnly');
-var warning = require('warning');
-
-function shouldIgnoreValue(name, value) {
-  return value == null ||
-    (DOMProperty.hasBooleanValue[name] && !value) ||
-    (DOMProperty.hasNumericValue[name] && isNaN(value)) ||
-    (DOMProperty.hasPositiveNumericValue[name] && (value < 1)) ||
-    (DOMProperty.hasOverloadedBooleanValue[name] && value === false);
-}
-
-var processAttributeNameAndPrefix = memoizeStringOnly(function(name) {
-  return escapeTextForBrowser(name) + '="';
-});
-
-if (__DEV__) {
-  var reactProps = {
-    children: true,
-    dangerouslySetInnerHTML: true,
-    key: true,
-    ref: true
-  };
-  var warnedProperties = {};
-
-  var warnUnknownProperty = function(name) {
-    if (reactProps.hasOwnProperty(name) && reactProps[name] ||
-        warnedProperties.hasOwnProperty(name) && warnedProperties[name]) {
-      return;
-    }
-
-    warnedProperties[name] = true;
-    var lowerCasedName = name.toLowerCase();
-
-    // data-* attributes should be lowercase; suggest the lowercase version
-    var standardName = (
-      DOMProperty.isCustomAttribute(lowerCasedName) ?
-        lowerCasedName :
-      DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ?
-        DOMProperty.getPossibleStandardName[lowerCasedName] :
-        null
-    );
-
-    // For now, only warn when we have a suggested correction. This prevents
-    // logging too much when using transferPropsTo.
-    warning(
-      standardName == null,
-      'Unknown DOM property ' + name + '. Did you mean ' + standardName + '?'
-    );
-
-  };
-}
-
-/**
- * Operations for dealing with DOM properties.
- */
-var DOMPropertyOperations = {
-
-  /**
-   * Creates markup for the ID property.
-   *
-   * @param {string} id Unescaped ID.
-   * @return {string} Markup string.
-   */
-  createMarkupForID: function(id) {
-    return processAttributeNameAndPrefix(DOMProperty.ID_ATTRIBUTE_NAME) +
-      escapeTextForBrowser(id) + '"';
-  },
-
-  /**
-   * Creates markup for a property.
-   *
-   * @param {string} name
-   * @param {*} value
-   * @return {?string} Markup string, or null if the property was invalid.
-   */
-  createMarkupForProperty: function(name, value) {
-    if (DOMProperty.isStandardName.hasOwnProperty(name) &&
-        DOMProperty.isStandardName[name]) {
-      if (shouldIgnoreValue(name, value)) {
-        return '';
-      }
-      var attributeName = DOMProperty.getAttributeName[name];
-      if (DOMProperty.hasBooleanValue[name] ||
-          (DOMProperty.hasOverloadedBooleanValue[name] && value === true)) {
-        return escapeTextForBrowser(attributeName);
-      }
-      return processAttributeNameAndPrefix(attributeName) +
-        escapeTextForBrowser(value) + '"';
-    } else if (DOMProperty.isCustomAttribute(name)) {
-      if (value == null) {
-        return '';
-      }
-      return processAttributeNameAndPrefix(name) +
-        escapeTextForBrowser(value) + '"';
-    } else if (__DEV__) {
-      warnUnknownProperty(name);
-    }
-    return null;
-  },
-
-  /**
-   * Sets the value for a property on a node.
-   *
-   * @param {DOMElement} node
-   * @param {string} name
-   * @param {*} value
-   */
-  setValueForProperty: function(node, name, value) {
-    if (DOMProperty.isStandardName.hasOwnProperty(name) &&
-        DOMProperty.isStandardName[name]) {
-      var mutationMethod = DOMProperty.getMutationMethod[name];
-      if (mutationMethod) {
-        mutationMethod(node, value);
-      } else if (shouldIgnoreValue(name, value)) {
-        this.deleteValueForProperty(node, name);
-      } else if (DOMProperty.mustUseAttribute[name]) {
-        // `setAttribute` with objects becomes only `[object]` in IE8/9,
-        // ('' + value) makes it output the correct toString()-value.
-        node.setAttribute(DOMProperty.getAttributeName[name], '' + value);
-      } else {
-        var propName = DOMProperty.getPropertyName[name];
-        // Must explicitly cast values for HAS_SIDE_EFFECTS-properties to the
-        // property type before comparing; only `value` does and is string.
-        if (!DOMProperty.hasSideEffects[name] ||
-            ('' + node[propName]) !== ('' + value)) {
-          // Contrary to `setAttribute`, object properties are properly
-          // `toString`ed by IE8/9.
-          node[propName] = value;
-        }
-      }
-    } else if (DOMProperty.isCustomAttribute(name)) {
-      if (value == null) {
-        node.removeAttribute(name);
-      } else {
-        node.setAttribute(name, '' + value);
-      }
-    } else if (__DEV__) {
-      warnUnknownProperty(name);
-    }
-  },
-
-  /**
-   * Deletes the value for a property on a node.
-   *
-   * @param {DOMElement} node
-   * @param {string} name
-   */
-  deleteValueForProperty: function(node, name) {
-    if (DOMProperty.isStandardName.hasOwnProperty(name) &&
-        DOMProperty.isStandardName[name]) {
-      var mutationMethod = DOMProperty.getMutationMethod[name];
-      if (mutationMethod) {
-        mutationMethod(node, undefined);
-      } else if (DOMProperty.mustUseAttribute[name]) {
-        node.removeAttribute(DOMProperty.getAttributeName[name]);
-      } else {
-        var propName = DOMProperty.getPropertyName[name];
-        var defaultValue = DOMProperty.getDefaultValueForProperty(
-          node.nodeName,
-          propName
-        );
-        if (!DOMProperty.hasSideEffects[name] ||
-            ('' + node[propName]) !== defaultValue) {
-          node[propName] = defaultValue;
-        }
-      }
-    } else if (DOMProperty.isCustomAttribute(name)) {
-      node.removeAttribute(name);
-    } else if (__DEV__) {
-      warnUnknownProperty(name);
-    }
-  }
-
-};
-
-module.exports = DOMPropertyOperations;
diff --git a/src/browser/ui/dom/Danger.js b/src/browser/ui/dom/Danger.js
deleted file mode 100644
index 6e2dd071056..00000000000
--- a/src/browser/ui/dom/Danger.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule Danger
- * @typechecks static-only
- */
-
-/*jslint evil: true, sub: true */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var createNodesFromMarkup = require('createNodesFromMarkup');
-var emptyFunction = require('emptyFunction');
-var getMarkupWrap = require('getMarkupWrap');
-var invariant = require('invariant');
-
-var OPEN_TAG_NAME_EXP = /^(<[^ \/>]+)/;
-var RESULT_INDEX_ATTR = 'data-danger-index';
-
-/**
- * Extracts the `nodeName` from a string of markup.
- *
- * NOTE: Extracting the `nodeName` does not require a regular expression match
- * because we make assumptions about React-generated markup (i.e. there are no
- * spaces surrounding the opening tag and there is at least one attribute).
- *
- * @param {string} markup String of markup.
- * @return {string} Node name of the supplied markup.
- * @see http://jsperf.com/extract-nodename
- */
-function getNodeName(markup) {
-  return markup.substring(1, markup.indexOf(' '));
-}
-
-var Danger = {
-
-  /**
-   * Renders markup into an array of nodes. The markup is expected to render
-   * into a list of root nodes. Also, the length of `resultList` and
-   * `markupList` should be the same.
-   *
-   * @param {array<string>} markupList List of markup strings to render.
-   * @return {array<DOMElement>} List of rendered nodes.
-   * @internal
-   */
-  dangerouslyRenderMarkup: function(markupList) {
-    invariant(
-      ExecutionEnvironment.canUseDOM,
-      'dangerouslyRenderMarkup(...): Cannot render markup in a Worker ' +
-      'thread. This is likely a bug in the framework. Please report ' +
-      'immediately.'
-    );
-    var nodeName;
-    var markupByNodeName = {};
-    // Group markup by `nodeName` if a wrap is necessary, else by '*'.
-    for (var i = 0; i < markupList.length; i++) {
-      invariant(
-        markupList[i],
-        'dangerouslyRenderMarkup(...): Missing markup.'
-      );
-      nodeName = getNodeName(markupList[i]);
-      nodeName = getMarkupWrap(nodeName) ? nodeName : '*';
-      markupByNodeName[nodeName] = markupByNodeName[nodeName] || [];
-      markupByNodeName[nodeName][i] = markupList[i];
-    }
-    var resultList = [];
-    var resultListAssignmentCount = 0;
-    for (nodeName in markupByNodeName) {
-      if (!markupByNodeName.hasOwnProperty(nodeName)) {
-        continue;
-      }
-      var markupListByNodeName = markupByNodeName[nodeName];
-
-      // This for-in loop skips the holes of the sparse array. The order of
-      // iteration should follow the order of assignment, which happens to match
-      // numerical index order, but we don't rely on that.
-      for (var resultIndex in markupListByNodeName) {
-        if (markupListByNodeName.hasOwnProperty(resultIndex)) {
-          var markup = markupListByNodeName[resultIndex];
-
-          // Push the requested markup with an additional RESULT_INDEX_ATTR
-          // attribute.  If the markup does not start with a < character, it
-          // will be discarded below (with an appropriate console.error).
-          markupListByNodeName[resultIndex] = markup.replace(
-            OPEN_TAG_NAME_EXP,
-            // This index will be parsed back out below.
-            '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" '
-          );
-        }
-      }
-
-      // Render each group of markup with similar wrapping `nodeName`.
-      var renderNodes = createNodesFromMarkup(
-        markupListByNodeName.join(''),
-        emptyFunction // Do nothing special with <script> tags.
-      );
-
-      for (i = 0; i < renderNodes.length; ++i) {
-        var renderNode = renderNodes[i];
-        if (renderNode.hasAttribute &&
-            renderNode.hasAttribute(RESULT_INDEX_ATTR)) {
-
-          resultIndex = +renderNode.getAttribute(RESULT_INDEX_ATTR);
-          renderNode.removeAttribute(RESULT_INDEX_ATTR);
-
-          invariant(
-            !resultList.hasOwnProperty(resultIndex),
-            'Danger: Assigning to an already-occupied result index.'
-          );
-
-          resultList[resultIndex] = renderNode;
-
-          // This should match resultList.length and markupList.length when
-          // we're done.
-          resultListAssignmentCount += 1;
-
-        } else if (__DEV__) {
-          console.error(
-            "Danger: Discarding unexpected node:",
-            renderNode
-          );
-        }
-      }
-    }
-
-    // Although resultList was populated out of order, it should now be a dense
-    // array.
-    invariant(
-      resultListAssignmentCount === resultList.length,
-      'Danger: Did not assign to every index of resultList.'
-    );
-
-    invariant(
-      resultList.length === markupList.length,
-      'Danger: Expected markup to render %s nodes, but rendered %s.',
-      markupList.length,
-      resultList.length
-    );
-
-    return resultList;
-  },
-
-  /**
-   * Replaces a node with a string of markup at its current position within its
-   * parent. The markup must render into a single root node.
-   *
-   * @param {DOMElement} oldChild Child node to replace.
-   * @param {string} markup Markup to render in place of the child node.
-   * @internal
-   */
-  dangerouslyReplaceNodeWithMarkup: function(oldChild, markup) {
-    invariant(
-      ExecutionEnvironment.canUseDOM,
-      'dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a ' +
-      'worker thread. This is likely a bug in the framework. Please report ' +
-      'immediately.'
-    );
-    invariant(markup, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.');
-    invariant(
-      oldChild.tagName.toLowerCase() !== 'html',
-      'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the ' +
-      '<html> node. This is because browser quirks make this unreliable ' +
-      'and/or slow. If you want to render to the root you must use ' +
-      'server rendering. See renderComponentToString().'
-    );
-
-    var newChild = createNodesFromMarkup(markup, emptyFunction)[0];
-    oldChild.parentNode.replaceChild(newChild, oldChild);
-  }
-
-};
-
-module.exports = Danger;
diff --git a/src/browser/ui/dom/HTMLDOMPropertyConfig.js b/src/browser/ui/dom/HTMLDOMPropertyConfig.js
deleted file mode 100644
index 2c59d851a34..00000000000
--- a/src/browser/ui/dom/HTMLDOMPropertyConfig.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule HTMLDOMPropertyConfig
- */
-
-/*jslint bitwise: true*/
-
-"use strict";
-
-var DOMProperty = require('DOMProperty');
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
-var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
-var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;
-var HAS_SIDE_EFFECTS = DOMProperty.injection.HAS_SIDE_EFFECTS;
-var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE;
-var HAS_POSITIVE_NUMERIC_VALUE =
-  DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;
-var HAS_OVERLOADED_BOOLEAN_VALUE =
-  DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
-
-var hasSVG;
-if (ExecutionEnvironment.canUseDOM) {
-  var implementation = document.implementation;
-  hasSVG = (
-    implementation &&
-    implementation.hasFeature &&
-    implementation.hasFeature(
-      'http://www.w3.org/TR/SVG11/feature#BasicStructure',
-      '1.1'
-    )
-  );
-}
-
-
-var HTMLDOMPropertyConfig = {
-  isCustomAttribute: RegExp.prototype.test.bind(
-    /^(data|aria)-[a-z_][a-z\d_.\-]*$/
-  ),
-  Properties: {
-    /**
-     * Standard Properties
-     */
-    accept: null,
-    accessKey: null,
-    action: null,
-    allowFullScreen: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
-    allowTransparency: MUST_USE_ATTRIBUTE,
-    alt: null,
-    async: HAS_BOOLEAN_VALUE,
-    autoComplete: null,
-    // autoFocus is polyfilled/normalized by AutoFocusMixin
-    // autoFocus: HAS_BOOLEAN_VALUE,
-    autoPlay: HAS_BOOLEAN_VALUE,
-    cellPadding: null,
-    cellSpacing: null,
-    charSet: MUST_USE_ATTRIBUTE,
-    checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    // To set className on SVG elements, it's necessary to use .setAttribute;
-    // this works on HTML elements too in all browsers except IE8. Conveniently,
-    // IE8 doesn't support SVG and so we can simply use the attribute in
-    // browsers that support SVG and the property in browsers that don't,
-    // regardless of whether the element is HTML or SVG.
-    className: hasSVG ? MUST_USE_ATTRIBUTE : MUST_USE_PROPERTY,
-    cols: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
-    colSpan: null,
-    content: null,
-    contentEditable: null,
-    contextMenu: MUST_USE_ATTRIBUTE,
-    controls: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    coords: null,
-    crossOrigin: null,
-    data: null, // For `<object />` acts as `src`.
-    dateTime: MUST_USE_ATTRIBUTE,
-    defer: HAS_BOOLEAN_VALUE,
-    dir: null,
-    disabled: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
-    download: HAS_OVERLOADED_BOOLEAN_VALUE,
-    draggable: null,
-    encType: null,
-    form: MUST_USE_ATTRIBUTE,
-    formNoValidate: HAS_BOOLEAN_VALUE,
-    frameBorder: MUST_USE_ATTRIBUTE,
-    height: MUST_USE_ATTRIBUTE,
-    hidden: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
-    href: null,
-    hrefLang: null,
-    htmlFor: null,
-    httpEquiv: null,
-    icon: null,
-    id: MUST_USE_PROPERTY,
-    label: null,
-    lang: null,
-    list: null,
-    loop: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    max: null,
-    maxLength: MUST_USE_ATTRIBUTE,
-    mediaGroup: null,
-    method: null,
-    min: null,
-    multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    name: null,
-    noValidate: HAS_BOOLEAN_VALUE,
-    pattern: null,
-    placeholder: null,
-    poster: null,
-    preload: null,
-    radioGroup: null,
-    readOnly: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    rel: null,
-    required: HAS_BOOLEAN_VALUE,
-    role: MUST_USE_ATTRIBUTE,
-    rows: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
-    rowSpan: null,
-    sandbox: null,
-    scope: null,
-    scrollLeft: MUST_USE_PROPERTY,
-    scrolling: null,
-    scrollTop: MUST_USE_PROPERTY,
-    seamless: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
-    selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
-    shape: null,
-    size: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
-    span: HAS_POSITIVE_NUMERIC_VALUE,
-    spellCheck: null,
-    src: null,
-    srcDoc: MUST_USE_PROPERTY,
-    srcSet: null,
-    start: HAS_NUMERIC_VALUE,
-    step: null,
-    style: null,
-    tabIndex: null,
-    target: null,
-    title: null,
-    type: null,
-    useMap: null,
-    value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS,
-    width: MUST_USE_ATTRIBUTE,
-    wmode: MUST_USE_ATTRIBUTE,
-
-    /**
-     * Non-standard Properties
-     */
-    autoCapitalize: null, // Supported in Mobile Safari for keyboard hints
-    autoCorrect: null, // Supported in Mobile Safari for keyboard hints
-    itemProp: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
-    itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, // Microdata: http://schema.org/docs/gs.html
-    itemType: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
-    property: null // Supports OG in meta tags
-  },
-  DOMAttributeNames: {
-    className: 'class',
-    htmlFor: 'for',
-    httpEquiv: 'http-equiv'
-  },
-  DOMPropertyNames: {
-    autoCapitalize: 'autocapitalize',
-    autoComplete: 'autocomplete',
-    autoCorrect: 'autocorrect',
-    autoFocus: 'autofocus',
-    autoPlay: 'autoplay',
-    encType: 'enctype',
-    hrefLang: 'hreflang',
-    radioGroup: 'radiogroup',
-    spellCheck: 'spellcheck',
-    srcDoc: 'srcdoc',
-    srcSet: 'srcset'
-  }
-};
-
-module.exports = HTMLDOMPropertyConfig;
diff --git a/src/browser/ui/dom/SVGDOMPropertyConfig.js b/src/browser/ui/dom/SVGDOMPropertyConfig.js
deleted file mode 100644
index e9fbe129452..00000000000
--- a/src/browser/ui/dom/SVGDOMPropertyConfig.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule SVGDOMPropertyConfig
- */
-
-/*jslint bitwise: true*/
-
-"use strict";
-
-var DOMProperty = require('DOMProperty');
-
-var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
-
-var SVGDOMPropertyConfig = {
-  Properties: {
-    cx: MUST_USE_ATTRIBUTE,
-    cy: MUST_USE_ATTRIBUTE,
-    d: MUST_USE_ATTRIBUTE,
-    dx: MUST_USE_ATTRIBUTE,
-    dy: MUST_USE_ATTRIBUTE,
-    fill: MUST_USE_ATTRIBUTE,
-    fillOpacity: MUST_USE_ATTRIBUTE,
-    fontFamily: MUST_USE_ATTRIBUTE,
-    fontSize: MUST_USE_ATTRIBUTE,
-    fx: MUST_USE_ATTRIBUTE,
-    fy: MUST_USE_ATTRIBUTE,
-    gradientTransform: MUST_USE_ATTRIBUTE,
-    gradientUnits: MUST_USE_ATTRIBUTE,
-    markerEnd: MUST_USE_ATTRIBUTE,
-    markerMid: MUST_USE_ATTRIBUTE,
-    markerStart: MUST_USE_ATTRIBUTE,
-    offset: MUST_USE_ATTRIBUTE,
-    opacity: MUST_USE_ATTRIBUTE,
-    patternContentUnits: MUST_USE_ATTRIBUTE,
-    patternUnits: MUST_USE_ATTRIBUTE,
-    points: MUST_USE_ATTRIBUTE,
-    preserveAspectRatio: MUST_USE_ATTRIBUTE,
-    r: MUST_USE_ATTRIBUTE,
-    rx: MUST_USE_ATTRIBUTE,
-    ry: MUST_USE_ATTRIBUTE,
-    spreadMethod: MUST_USE_ATTRIBUTE,
-    stopColor: MUST_USE_ATTRIBUTE,
-    stopOpacity: MUST_USE_ATTRIBUTE,
-    stroke: MUST_USE_ATTRIBUTE,
-    strokeDasharray: MUST_USE_ATTRIBUTE,
-    strokeLinecap: MUST_USE_ATTRIBUTE,
-    strokeOpacity: MUST_USE_ATTRIBUTE,
-    strokeWidth: MUST_USE_ATTRIBUTE,
-    textAnchor: MUST_USE_ATTRIBUTE,
-    transform: MUST_USE_ATTRIBUTE,
-    version: MUST_USE_ATTRIBUTE,
-    viewBox: MUST_USE_ATTRIBUTE,
-    x1: MUST_USE_ATTRIBUTE,
-    x2: MUST_USE_ATTRIBUTE,
-    x: MUST_USE_ATTRIBUTE,
-    y1: MUST_USE_ATTRIBUTE,
-    y2: MUST_USE_ATTRIBUTE,
-    y: MUST_USE_ATTRIBUTE
-  },
-  DOMAttributeNames: {
-    fillOpacity: 'fill-opacity',
-    fontFamily: 'font-family',
-    fontSize: 'font-size',
-    gradientTransform: 'gradientTransform',
-    gradientUnits: 'gradientUnits',
-    markerEnd: 'marker-end',
-    markerMid: 'marker-mid',
-    markerStart: 'marker-start',
-    patternContentUnits: 'patternContentUnits',
-    patternUnits: 'patternUnits',
-    preserveAspectRatio: 'preserveAspectRatio',
-    spreadMethod: 'spreadMethod',
-    stopColor: 'stop-color',
-    stopOpacity: 'stop-opacity',
-    strokeDasharray: 'stroke-dasharray',
-    strokeLinecap: 'stroke-linecap',
-    strokeOpacity: 'stroke-opacity',
-    strokeWidth: 'stroke-width',
-    textAnchor: 'text-anchor',
-    viewBox: 'viewBox'
-  }
-};
-
-module.exports = SVGDOMPropertyConfig;
diff --git a/src/browser/ui/dom/ViewportMetrics.js b/src/browser/ui/dom/ViewportMetrics.js
deleted file mode 100644
index 621a517220b..00000000000
--- a/src/browser/ui/dom/ViewportMetrics.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ViewportMetrics
- */
-
-"use strict";
-
-var getUnboundedScrollPosition = require('getUnboundedScrollPosition');
-
-var ViewportMetrics = {
-
-  currentScrollLeft: 0,
-
-  currentScrollTop: 0,
-
-  refreshScrollValues: function() {
-    var scrollPosition = getUnboundedScrollPosition(window);
-    ViewportMetrics.currentScrollLeft = scrollPosition.x;
-    ViewportMetrics.currentScrollTop = scrollPosition.y;
-  }
-
-};
-
-module.exports = ViewportMetrics;
diff --git a/src/browser/ui/dom/__tests__/CSSProperty-test.js b/src/browser/ui/dom/__tests__/CSSProperty-test.js
deleted file mode 100644
index 82347570256..00000000000
--- a/src/browser/ui/dom/__tests__/CSSProperty-test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-describe('CSSProperty', function() {
-  var CSSProperty;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    CSSProperty = require('CSSProperty');
-  });
-
-  it('should generate browser prefixes for its `isUnitlessNumber`', function() {
-    expect(CSSProperty.isUnitlessNumber.lineClamp).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.WebkitLineClamp).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.msFlexGrow).toBeTruthy();
-    expect(CSSProperty.isUnitlessNumber.MozFlexGrow).toBeTruthy();
-  });
-
-});
diff --git a/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js b/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
deleted file mode 100644
index 77e9e5f6cfe..00000000000
--- a/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var React = require('React');
-
-describe('CSSPropertyOperations', function() {
-  var CSSPropertyOperations;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    CSSPropertyOperations = require('CSSPropertyOperations');
-  });
-
-  it('should create markup for simple styles', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      backgroundColor: '#3b5998',
-      display: 'none'
-    })).toBe('background-color:#3b5998;display:none;');
-  });
-
-  it('should ignore undefined styles', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      backgroundColor: undefined,
-      display: 'none'
-    })).toBe('display:none;');
-  });
-
-  it('should ignore null styles', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      backgroundColor: null,
-      display: 'none'
-    })).toBe('display:none;');
-  });
-
-  it('should return null for no styles', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      backgroundColor: null,
-      display: null
-    })).toBe(null);
-  });
-
-  it('should automatically append `px` to relevant styles', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      left: 0,
-      margin: 16,
-      opacity: 0.5,
-      padding: '4px'
-    })).toBe('left:0;margin:16px;opacity:0.5;padding:4px;');
-  });
-
-  it('should trim values so `px` will be appended correctly', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      margin: '16 ',
-      opacity: 0.5,
-      padding: ' 4 '
-    })).toBe('margin:16px;opacity:0.5;padding:4px;');
-  });
-
-  it('should not append `px` to styles that might need a number', function() {
-    var CSSProperty = require('CSSProperty');
-    var unitlessProperties = Object.keys(CSSProperty.isUnitlessNumber);
-    unitlessProperties.forEach(function(property) {
-      var styles = {};
-      styles[property] = 1;
-      expect(CSSPropertyOperations.createMarkupForStyles(styles))
-        .toMatch(/:1;$/);
-    });
-  });
-
-  it('should create vendor-prefixed markup correctly', function() {
-    expect(CSSPropertyOperations.createMarkupForStyles({
-      msTransition: 'none',
-      MozTransition: 'none'
-    })).toBe('-ms-transition:none;-moz-transition:none;');
-  });
-
-  it('should set style attribute when styles exist', function() {
-    var styles = {
-      backgroundColor: '#000',
-      display: 'none'
-    };
-    var div = <div style={styles} />;
-    var root = document.createElement('div');
-    div = React.renderComponent(div, root);
-    expect(/style=".*"/.test(root.innerHTML)).toBe(true);
-  });
-
-  it('should not set style attribute when no styles exist', function() {
-    var styles = {
-      backgroundColor: null,
-      display: null
-    };
-    var div = <div style={styles} />;
-    var root = document.createElement('div');
-    React.renderComponent(div, root);
-    expect(/style=".*"/.test(root.innerHTML)).toBe(false);
-  });
-
-});
diff --git a/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js b/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js
deleted file mode 100644
index 2475d33fcbd..00000000000
--- a/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js
+++ /dev/null
@@ -1,333 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-describe('DOMPropertyOperations', function() {
-  var DOMPropertyOperations;
-  var DOMProperty;
-
-  var mocks;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    var ReactDefaultInjection = require('ReactDefaultInjection');
-    ReactDefaultInjection.inject();
-
-    DOMPropertyOperations = require('DOMPropertyOperations');
-    DOMProperty = require('DOMProperty');
-
-    mocks = require('mocks');
-  });
-
-  describe('createMarkupForProperty', function() {
-
-    it('should create markup for simple properties', function() {
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'name',
-        'simple'
-      )).toBe('name="simple"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'name',
-        false
-      )).toBe('name="false"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'name',
-        null
-      )).toBe('');
-    });
-
-    it('should work with the id attribute', function() {
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'id',
-        'simple'
-      )).toBe('id="simple"');
-    });
-
-    it('should warn about incorrect casing', function() {
-      spyOn(console, 'warn');
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'tabindex',
-        '1'
-      )).toBe(null);
-      expect(console.warn.argsForCall.length).toBe(1);
-      expect(console.warn.argsForCall[0][0]).toContain('tabIndex');
-    });
-
-    it('should warn about class', function() {
-      spyOn(console, 'warn');
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'class',
-        'muffins'
-      )).toBe(null);
-      expect(console.warn.argsForCall.length).toBe(1);
-      expect(console.warn.argsForCall[0][0]).toContain('className');
-    });
-
-    it('should create markup for boolean properties', function() {
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'checked',
-        'simple'
-      )).toBe('checked');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'checked',
-        true
-      )).toBe('checked');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'checked',
-        false
-      )).toBe('');
-    });
-
-    it('should create markup for booleanish properties', function() {
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        'simple'
-      )).toBe('download="simple"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        true
-      )).toBe('download');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        'true'
-      )).toBe('download="true"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        false
-      )).toBe('');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        'false'
-      )).toBe('download="false"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        undefined
-      )).toBe('');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        null
-      )).toBe('');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'download',
-        0
-      )).toBe('download="0"');
-    });
-
-    it('should create markup for custom attributes', function() {
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'aria-label',
-        'simple'
-      )).toBe('aria-label="simple"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'aria-label',
-        false
-      )).toBe('aria-label="false"');
-
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'aria-label',
-        null
-      )).toBe('');
-    });
-
-  });
-
-  describe('setValueForProperty', function() {
-    var stubNode;
-
-    beforeEach(function() {
-      stubNode = document.createElement('div');
-    });
-
-    it('should set values as properties by default', function() {
-      DOMPropertyOperations.setValueForProperty(stubNode, 'title', 'Tip!');
-      expect(stubNode.title).toBe('Tip!');
-    });
-
-    it('should set values as attributes if necessary', function() {
-      DOMPropertyOperations.setValueForProperty(stubNode, 'role', '#');
-      expect(stubNode.getAttribute('role')).toBe('#');
-      expect(stubNode.role).toBeUndefined();
-    });
-
-    it('should convert attribute values to string first', function() {
-      // Browsers default to this behavior, but some test environments do not.
-      // This ensures that we have consistent behavior.
-      var obj = {toString: function() { return '<html>'; }};
-      DOMPropertyOperations.setValueForProperty(stubNode, 'role', obj);
-      expect(stubNode.getAttribute('role')).toBe('<html>');
-    });
-
-    it('should remove for falsey boolean properties', function() {
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'allowFullScreen',
-        false
-      );
-      expect(stubNode.hasAttribute('allowFullScreen')).toBe(false);
-    });
-
-    it('should remove when setting custom attr to null', function() {
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'data-foo',
-        'bar'
-      );
-      expect(stubNode.hasAttribute('data-foo')).toBe(true);
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'data-foo',
-        null
-      );
-      expect(stubNode.hasAttribute('data-foo')).toBe(false);
-    });
-
-    it('should use mutation method where applicable', function() {
-      var foobarSetter = mocks.getMockFunction();
-      // inject foobar DOM property
-      DOMProperty.injection.injectDOMPropertyConfig({
-        Properties: {foobar: null},
-        DOMMutationMethods: {
-          foobar: foobarSetter
-        }
-      });
-
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'foobar',
-        'cows say moo'
-      );
-
-      expect(foobarSetter.mock.calls.length).toBe(1);
-      expect(foobarSetter.mock.calls[0][0]).toBe(stubNode);
-      expect(foobarSetter.mock.calls[0][1]).toBe('cows say moo');
-    });
-
-    it('should set className to empty string instead of null', function() {
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'className',
-        'selected'
-      );
-      expect(stubNode.className).toBe('selected');
-
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'className',
-        null
-      );
-      // className should be '', not 'null' or null (which becomes 'null' in
-      // some browsers)
-      expect(stubNode.className).toBe('');
-    });
-
-    it('should remove property properly even with different name', function() {
-      // Suppose 'foobar' is a property that corresponds to the underlying
-      // 'className' property:
-      DOMProperty.injection.injectDOMPropertyConfig({
-        Properties: {foobar: DOMProperty.injection.MUST_USE_PROPERTY},
-        DOMPropertyNames: {
-          foobar: 'className'
-        }
-      });
-
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'foobar',
-        'selected'
-      );
-      expect(stubNode.className).toBe('selected');
-
-      DOMPropertyOperations.setValueForProperty(
-        stubNode,
-        'foobar',
-        null
-      );
-      // className should be '', not 'null' or null (which becomes 'null' in
-      // some browsers)
-      expect(stubNode.className).toBe('');
-    });
-
-  });
-
-  describe('injectDOMPropertyConfig', function() {
-    it('should support custom attributes', function() {
-      // foobar does not exist yet
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'foobar',
-        'simple'
-      )).toBe(null);
-
-      // foo-* does not exist yet
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'foo-xyz',
-        'simple'
-      )).toBe(null);
-
-      // inject foobar DOM property
-      DOMProperty.injection.injectDOMPropertyConfig({
-        isCustomAttribute: function(name) {
-          return name.indexOf('foo-') === 0;
-        },
-        Properties: {foobar: null}
-      });
-
-      // Ensure old attributes still work
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'name',
-        'simple'
-      )).toBe('name="simple"');
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'data-name',
-        'simple'
-      )).toBe('data-name="simple"');
-
-      // foobar should work
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'foobar',
-        'simple'
-      )).toBe('foobar="simple"');
-
-      // foo-* should work
-      expect(DOMPropertyOperations.createMarkupForProperty(
-        'foo-xyz',
-        'simple'
-      )).toBe('foo-xyz="simple"');
-
-      // It should complain about double injections.
-      expect(function() {
-        DOMProperty.injection.injectDOMPropertyConfig(
-          {Properties: {foobar: null}}
-        );
-      }).toThrow();
-    });
-  });
-});
diff --git a/src/browser/ui/dom/__tests__/Danger-test.js b/src/browser/ui/dom/__tests__/Danger-test.js
deleted file mode 100644
index 698eeb6dc8f..00000000000
--- a/src/browser/ui/dom/__tests__/Danger-test.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-/*jslint evil: true */
-
-"use strict";
-
-var React = require('React');
-var instantiateReactComponent = require('instantiateReactComponent');
-
-describe('Danger', function() {
-
-  describe('dangerouslyRenderMarkup', function() {
-    var Danger;
-    var transaction;
-
-    beforeEach(function() {
-      require('mock-modules').dumpCache();
-      Danger = require('Danger');
-
-      var ReactReconcileTransaction = require('ReactReconcileTransaction');
-      transaction = new ReactReconcileTransaction();
-    });
-
-    it('should render markup', function() {
-      var markup = instantiateReactComponent(
-        <div />
-      ).mountComponent('.rX', transaction, 0);
-      var output = Danger.dangerouslyRenderMarkup([markup])[0];
-
-      expect(output.nodeName).toBe('DIV');
-    });
-
-    it('should render markup with props', function() {
-      var markup = instantiateReactComponent(
-        <div className="foo" />
-      ).mountComponent(
-        '.rX',
-        transaction,
-        0
-      );
-      var output = Danger.dangerouslyRenderMarkup([markup])[0];
-
-      expect(output.nodeName).toBe('DIV');
-      expect(output.className).toBe('foo');
-    });
-
-    it('should render wrapped markup', function() {
-      var markup = instantiateReactComponent(
-        <th />
-      ).mountComponent('.rX', transaction, 0);
-      var output = Danger.dangerouslyRenderMarkup([markup])[0];
-
-      expect(output.nodeName).toBe('TH');
-    });
-
-    it('should render lists of markup with similar `nodeName`', function() {
-      var renderedMarkup = Danger.dangerouslyRenderMarkup(
-        ['<p id="A">1</p>', '<p id="B">2</p>', '<p id="C">3</p>']
-      );
-
-      expect(renderedMarkup.length).toBe(3);
-
-      expect(renderedMarkup[0].nodeName).toBe('P');
-      expect(renderedMarkup[1].nodeName).toBe('P');
-      expect(renderedMarkup[2].nodeName).toBe('P');
-
-      expect(renderedMarkup[0].innerHTML).toBe('1');
-      expect(renderedMarkup[1].innerHTML).toBe('2');
-      expect(renderedMarkup[2].innerHTML).toBe('3');
-    });
-
-    it('should render lists of markup with different `nodeName`', function() {
-      var renderedMarkup = Danger.dangerouslyRenderMarkup(
-        ['<p id="A">1</p>', '<td id="B">2</td>', '<p id="C">3</p>']
-      );
-
-      expect(renderedMarkup.length).toBe(3);
-
-      expect(renderedMarkup[0].nodeName).toBe('P');
-      expect(renderedMarkup[1].nodeName).toBe('TD');
-      expect(renderedMarkup[2].nodeName).toBe('P');
-
-      expect(renderedMarkup[0].innerHTML).toBe('1');
-      expect(renderedMarkup[1].innerHTML).toBe('2');
-      expect(renderedMarkup[2].innerHTML).toBe('3');
-    });
-
-    it('should throw when rendering invalid markup', function() {
-      expect(function() {
-        Danger.dangerouslyRenderMarkup(['']);
-      }).toThrow(
-        'Invariant Violation: dangerouslyRenderMarkup(...): Missing markup.'
-      );
-
-      spyOn(console, "error");
-
-      var renderedMarkup = Danger.dangerouslyRenderMarkup(['<p></p><p></p>']);
-      var args = console.error.argsForCall[0];
-
-      expect(renderedMarkup.length).toBe(1);
-      expect(renderedMarkup[0].nodeName).toBe('P');
-
-      expect(console.error.argsForCall.length).toBe(1);
-
-      expect(args.length).toBe(2);
-      expect(args[0]).toBe('Danger: Discarding unexpected node:');
-      expect(args[1].nodeName).toBe('P');
-    });
-  });
-
-});
diff --git a/src/browser/ui/dom/__tests__/getNodeForCharacterOffset-test.js b/src/browser/ui/dom/__tests__/getNodeForCharacterOffset-test.js
deleted file mode 100644
index c9dbfd5aabe..00000000000
--- a/src/browser/ui/dom/__tests__/getNodeForCharacterOffset-test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var getTestDocument = require('getTestDocument');
-
-var getNodeForCharacterOffset = require('getNodeForCharacterOffset');
-
-// Create node from HTML string
-function createNode(html) {
-  var node = (getTestDocument() || document).createElement('div');
-  node.innerHTML = html;
-  return node;
-}
-
-// Check getNodeForCharacterOffset return value matches expected result.
-function expectNodeOffset(result, textContent, nodeOffset) {
-  expect(result.node.textContent).toBe(textContent);
-  expect(result.offset).toBe(nodeOffset);
-}
-
-describe('getNodeForCharacterOffset', function() {
-  it('should handle siblings', function() {
-    var node = createNode('<i>123</i><i>456</i><i>789</i>');
-
-    expectNodeOffset(getNodeForCharacterOffset(node, 0), '123', 0);
-    expectNodeOffset(getNodeForCharacterOffset(node, 4), '456', 1);
-  });
-
-  it('should handle trailing chars', function() {
-    var node = createNode('<i>123</i><i>456</i><i>789</i>');
-
-    expectNodeOffset(getNodeForCharacterOffset(node, 3), '123', 3);
-    expectNodeOffset(getNodeForCharacterOffset(node, 9), '789', 3);
-  });
-
-  it('should handle trees', function() {
-    var node = createNode(
-      '<i>' +
-        '<i>1</i>' +
-        '<i>' +
-          '<i>' +
-            '<i>2</i>' +
-            '<i></i>' +
-          '</i>' +
-        '</i>' +
-        '<i>' +
-          '3' +
-          '<i>45</i>' +
-        '</i>' +
-      '</i>'
-    );
-
-    expectNodeOffset(getNodeForCharacterOffset(node, 3), '3', 1);
-    expectNodeOffset(getNodeForCharacterOffset(node, 5), '45', 2);
-    expect(getNodeForCharacterOffset(node, 10)).toBeUndefined();
-  });
-
-  it('should handle non-existent offset', function() {
-    var node = createNode('<i>123</i>');
-
-    expect(getNodeForCharacterOffset(node, -1)).toBeUndefined();
-    expect(getNodeForCharacterOffset(node, 4)).toBeUndefined();
-  });
-});
diff --git a/src/browser/ui/dom/components/AutoFocusMixin.js b/src/browser/ui/dom/components/AutoFocusMixin.js
deleted file mode 100644
index 130768be318..00000000000
--- a/src/browser/ui/dom/components/AutoFocusMixin.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule AutoFocusMixin
- * @typechecks static-only
- */
-
-"use strict";
-
-var focusNode = require('focusNode');
-
-var AutoFocusMixin = {
-  componentDidMount: function() {
-    if (this.props.autoFocus) {
-      focusNode(this.getDOMNode());
-    }
-  }
-};
-
-module.exports = AutoFocusMixin;
diff --git a/src/browser/ui/dom/components/LinkedValueUtils.js b/src/browser/ui/dom/components/LinkedValueUtils.js
deleted file mode 100644
index e2d1feef0f9..00000000000
--- a/src/browser/ui/dom/components/LinkedValueUtils.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule LinkedValueUtils
- * @typechecks static-only
- */
-
-"use strict";
-
-var ReactPropTypes = require('ReactPropTypes');
-
-var invariant = require('invariant');
-
-var hasReadOnlyValue = {
-  'button': true,
-  'checkbox': true,
-  'image': true,
-  'hidden': true,
-  'radio': true,
-  'reset': true,
-  'submit': true
-};
-
-function _assertSingleLink(input) {
-  invariant(
-    input.props.checkedLink == null || input.props.valueLink == null,
-    'Cannot provide a checkedLink and a valueLink. If you want to use ' +
-    'checkedLink, you probably don\'t want to use valueLink and vice versa.'
-  );
-}
-function _assertValueLink(input) {
-  _assertSingleLink(input);
-  invariant(
-    input.props.value == null && input.props.onChange == null,
-    'Cannot provide a valueLink and a value or onChange event. If you want ' +
-    'to use value or onChange, you probably don\'t want to use valueLink.'
-  );
-}
-
-function _assertCheckedLink(input) {
-  _assertSingleLink(input);
-  invariant(
-    input.props.checked == null && input.props.onChange == null,
-    'Cannot provide a checkedLink and a checked property or onChange event. ' +
-    'If you want to use checked or onChange, you probably don\'t want to ' +
-    'use checkedLink'
-  );
-}
-
-/**
- * @param {SyntheticEvent} e change event to handle
- */
-function _handleLinkedValueChange(e) {
-  /*jshint validthis:true */
-  this.props.valueLink.requestChange(e.target.value);
-}
-
-/**
-  * @param {SyntheticEvent} e change event to handle
-  */
-function _handleLinkedCheckChange(e) {
-  /*jshint validthis:true */
-  this.props.checkedLink.requestChange(e.target.checked);
-}
-
-/**
- * Provide a linked `value` attribute for controlled forms. You should not use
- * this outside of the ReactDOM controlled form components.
- */
-var LinkedValueUtils = {
-  Mixin: {
-    propTypes: {
-      value: function(props, propName, componentName) {
-        if (!props[propName] ||
-            hasReadOnlyValue[props.type] ||
-            props.onChange ||
-            props.readOnly ||
-            props.disabled) {
-          return;
-        }
-        return new Error(
-          '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`. Otherwise, ' +
-          'set either `onChange` or `readOnly`.'
-        );
-      },
-      checked: function(props, propName, componentName) {
-        if (!props[propName] ||
-            props.onChange ||
-            props.readOnly ||
-            props.disabled) {
-          return;
-        }
-        return new Error(
-          '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`.'
-        );
-      },
-      onChange: ReactPropTypes.func
-    }
-  },
-
-  /**
-   * @param {ReactComponent} input Form component
-   * @return {*} current value of the input either from value prop or link.
-   */
-  getValue: function(input) {
-    if (input.props.valueLink) {
-      _assertValueLink(input);
-      return input.props.valueLink.value;
-    }
-    return input.props.value;
-  },
-
-  /**
-   * @param {ReactComponent} input Form component
-   * @return {*} current checked status of the input either from checked prop
-   *             or link.
-   */
-  getChecked: function(input) {
-    if (input.props.checkedLink) {
-      _assertCheckedLink(input);
-      return input.props.checkedLink.value;
-    }
-    return input.props.checked;
-  },
-
-  /**
-   * @param {ReactComponent} input Form component
-   * @return {function} change callback either from onChange prop or link.
-   */
-  getOnChange: function(input) {
-    if (input.props.valueLink) {
-      _assertValueLink(input);
-      return _handleLinkedValueChange;
-    } else if (input.props.checkedLink) {
-      _assertCheckedLink(input);
-      return _handleLinkedCheckChange;
-    }
-    return input.props.onChange;
-  }
-};
-
-module.exports = LinkedValueUtils;
diff --git a/src/browser/ui/dom/components/LocalEventTrapMixin.js b/src/browser/ui/dom/components/LocalEventTrapMixin.js
deleted file mode 100644
index eee6f33a1da..00000000000
--- a/src/browser/ui/dom/components/LocalEventTrapMixin.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule LocalEventTrapMixin
- */
-
-"use strict";
-
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-
-var accumulate = require('accumulate');
-var forEachAccumulated = require('forEachAccumulated');
-var invariant = require('invariant');
-
-function remove(event) {
-  event.remove();
-}
-
-var LocalEventTrapMixin = {
-  trapBubbledEvent(topLevelType, handlerBaseName) {
-    invariant(this.isMounted(), 'Must be mounted to trap events');
-    var listener = ReactBrowserEventEmitter.trapBubbledEvent(
-      topLevelType,
-      handlerBaseName,
-      this.getDOMNode()
-    );
-    this._localEventListeners = accumulate(this._localEventListeners, listener);
-  },
-
-  // trapCapturedEvent would look nearly identical. We don't implement that
-  // method because it isn't currently needed.
-
-  componentWillUnmount() {
-    if (this._localEventListeners) {
-      forEachAccumulated(this._localEventListeners, remove);
-    }
-  }
-};
-
-module.exports = LocalEventTrapMixin;
diff --git a/src/browser/ui/dom/components/ReactDOMButton.js b/src/browser/ui/dom/components/ReactDOMButton.js
deleted file mode 100644
index 68734854ffe..00000000000
--- a/src/browser/ui/dom/components/ReactDOMButton.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMButton
- */
-
-"use strict";
-
-var AutoFocusMixin = require('AutoFocusMixin');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-
-var keyMirror = require('keyMirror');
-
-// Store a reference to the <button> `ReactDOMComponent`.
-var button = ReactDOM.button;
-
-var mouseListenerNames = keyMirror({
-  onClick: true,
-  onDoubleClick: true,
-  onMouseDown: true,
-  onMouseMove: true,
-  onMouseUp: true,
-  onClickCapture: true,
-  onDoubleClickCapture: true,
-  onMouseDownCapture: true,
-  onMouseMoveCapture: true,
-  onMouseUpCapture: true
-});
-
-/**
- * Implements a <button> native component that does not receive mouse events
- * when `disabled` is set.
- */
-var ReactDOMButton = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMButton',
-
-  mixins: [AutoFocusMixin, ReactBrowserComponentMixin],
-
-  render: function() {
-    var props = {};
-
-    // Copy the props; except the mouse listeners if we're disabled
-    for (var key in this.props) {
-      if (this.props.hasOwnProperty(key) &&
-          (!this.props.disabled || !mouseListenerNames[key])) {
-        props[key] = this.props[key];
-      }
-    }
-
-    return button(props, this.props.children);
-  }
-
-});
-
-module.exports = ReactDOMButton;
diff --git a/src/browser/ui/dom/components/ReactDOMForm.js b/src/browser/ui/dom/components/ReactDOMForm.js
deleted file mode 100644
index ffa8c26c837..00000000000
--- a/src/browser/ui/dom/components/ReactDOMForm.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMForm
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var LocalEventTrapMixin = require('LocalEventTrapMixin');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-
-// Store a reference to the <form> `ReactDOMComponent`.
-var form = ReactDOM.form;
-
-/**
- * Since onSubmit doesn't bubble OR capture on the top level in IE8, we need
- * to capture it on the <form> element itself. There are lots of hacks we could
- * do to accomplish this, but the most reliable is to make <form> a
- * composite component and use `componentDidMount` to attach the event handlers.
- */
-var ReactDOMForm = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMForm',
-
-  mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
-
-  render: function() {
-    // TODO: Instead of using `ReactDOM` directly, we should use JSX. However,
-    // `jshint` fails to parse JSX so in order for linting to work in the open
-    // source repo, we need to just use `ReactDOM.form`.
-    return form(this.props);
-  },
-
-  componentDidMount: function() {
-    this.trapBubbledEvent(EventConstants.topLevelTypes.topReset, 'reset');
-    this.trapBubbledEvent(EventConstants.topLevelTypes.topSubmit, 'submit');
-  }
-});
-
-module.exports = ReactDOMForm;
diff --git a/src/browser/ui/dom/components/ReactDOMImg.js b/src/browser/ui/dom/components/ReactDOMImg.js
deleted file mode 100644
index 5aac6789859..00000000000
--- a/src/browser/ui/dom/components/ReactDOMImg.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMImg
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var LocalEventTrapMixin = require('LocalEventTrapMixin');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-
-// Store a reference to the <img> `ReactDOMComponent`.
-var img = ReactDOM.img;
-
-/**
- * Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
- * capture it on the <img> element itself. There are lots of hacks we could do
- * to accomplish this, but the most reliable is to make <img> a composite
- * component and use `componentDidMount` to attach the event handlers.
- */
-var ReactDOMImg = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMImg',
-  tagName: 'IMG',
-
-  mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
-
-  render: function() {
-    return img(this.props);
-  },
-
-  componentDidMount: function() {
-    this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
-    this.trapBubbledEvent(EventConstants.topLevelTypes.topError, 'error');
-  }
-});
-
-module.exports = ReactDOMImg;
diff --git a/src/browser/ui/dom/components/ReactDOMInput.js b/src/browser/ui/dom/components/ReactDOMInput.js
deleted file mode 100644
index 1fd43512516..00000000000
--- a/src/browser/ui/dom/components/ReactDOMInput.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMInput
- */
-
-"use strict";
-
-var AutoFocusMixin = require('AutoFocusMixin');
-var DOMPropertyOperations = require('DOMPropertyOperations');
-var LinkedValueUtils = require('LinkedValueUtils');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-var ReactMount = require('ReactMount');
-var ReactUpdates = require('ReactUpdates');
-
-var invariant = require('invariant');
-var merge = require('merge');
-
-// Store a reference to the <input> `ReactDOMComponent`.
-var input = ReactDOM.input;
-
-var instancesByReactID = {};
-
-function forceUpdateIfMounted() {
-  /*jshint validthis:true */
-  if (this.isMounted()) {
-    this.forceUpdate();
-  }
-}
-
-/**
- * Implements an <input> native component that allows setting these optional
- * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
- *
- * If `checked` or `value` are not supplied (or null/undefined), user actions
- * that affect the checked state or value will trigger updates to the element.
- *
- * If they are supplied (and not null/undefined), the rendered element will not
- * trigger updates to the element. Instead, the props must change in order for
- * the rendered element to be updated.
- *
- * The rendered element will be initialized as unchecked (or `defaultChecked`)
- * with an empty value (or `defaultValue`).
- *
- * @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
- */
-var ReactDOMInput = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMInput',
-
-  mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
-
-  getInitialState: function() {
-    var defaultValue = this.props.defaultValue;
-    return {
-      initialChecked: this.props.defaultChecked || false,
-      initialValue: defaultValue != null ? defaultValue : null
-    };
-  },
-
-  render: function() {
-    // Clone `this.props` so we don't mutate the input.
-    var props = merge(this.props);
-
-    props.defaultChecked = null;
-    props.defaultValue = null;
-
-    var value = LinkedValueUtils.getValue(this);
-    props.value = value != null ? value : this.state.initialValue;
-
-    var checked = LinkedValueUtils.getChecked(this);
-    props.checked = checked != null ? checked : this.state.initialChecked;
-
-    props.onChange = this._handleChange;
-
-    return input(props, this.props.children);
-  },
-
-  componentDidMount: function() {
-    var id = ReactMount.getID(this.getDOMNode());
-    instancesByReactID[id] = this;
-  },
-
-  componentWillUnmount: function() {
-    var rootNode = this.getDOMNode();
-    var id = ReactMount.getID(rootNode);
-    delete instancesByReactID[id];
-  },
-
-  componentDidUpdate: function(prevProps, prevState, prevContext) {
-    var rootNode = this.getDOMNode();
-    if (this.props.checked != null) {
-      DOMPropertyOperations.setValueForProperty(
-        rootNode,
-        'checked',
-        this.props.checked || false
-      );
-    }
-
-    var value = LinkedValueUtils.getValue(this);
-    if (value != null) {
-      // Cast `value` to a string to ensure the value is set correctly. While
-      // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(rootNode, 'value', '' + value);
-    }
-  },
-
-  _handleChange: function(event) {
-    var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this);
-    if (onChange) {
-      returnValue = onChange.call(this, event);
-    }
-    // Here we use setImmediate to wait until all updates have propagated, which
-    // is important when using controlled components within layers:
-    // https://github.com/facebook/react/issues/1698
-    ReactUpdates.setImmediate(forceUpdateIfMounted, this);
-
-    var name = this.props.name;
-    if (this.props.type === 'radio' && name != null) {
-      var rootNode = this.getDOMNode();
-      var queryRoot = rootNode;
-
-      while (queryRoot.parentNode) {
-        queryRoot = queryRoot.parentNode;
-      }
-
-      // If `rootNode.form` was non-null, then we could try `form.elements`,
-      // but that sometimes behaves strangely in IE8. We could also try using
-      // `form.getElementsByName`, but that will only return direct children
-      // and won't include inputs that use the HTML5 `form=` attribute. Since
-      // the input might not even be in a form, let's just use the global
-      // `querySelectorAll` to ensure we don't miss anything.
-      var group = queryRoot.querySelectorAll(
-        'input[name=' + JSON.stringify('' + name) + '][type="radio"]');
-
-      for (var i = 0, groupLen = group.length; i < groupLen; i++) {
-        var otherNode = group[i];
-        if (otherNode === rootNode ||
-            otherNode.form !== rootNode.form) {
-          continue;
-        }
-        var otherID = ReactMount.getID(otherNode);
-        invariant(
-          otherID,
-          'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
-          'same `name` is not supported.'
-        );
-        var otherInstance = instancesByReactID[otherID];
-        invariant(
-          otherInstance,
-          'ReactDOMInput: Unknown radio button ID %s.',
-          otherID
-        );
-        // If this is a controlled radio button group, forcing the input that
-        // was previously checked to update will cause it to be come re-checked
-        // as appropriate.
-        ReactUpdates.setImmediate(forceUpdateIfMounted, otherInstance);
-      }
-    }
-
-    return returnValue;
-  }
-
-});
-
-module.exports = ReactDOMInput;
diff --git a/src/browser/ui/dom/components/ReactDOMOption.js b/src/browser/ui/dom/components/ReactDOMOption.js
deleted file mode 100644
index 784007b919c..00000000000
--- a/src/browser/ui/dom/components/ReactDOMOption.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMOption
- */
-
-"use strict";
-
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-
-var warning = require('warning');
-
-// Store a reference to the <option> `ReactDOMComponent`.
-var option = ReactDOM.option;
-
-/**
- * Implements an <option> native component that warns when `selected` is set.
- */
-var ReactDOMOption = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMOption',
-
-  mixins: [ReactBrowserComponentMixin],
-
-  componentWillMount: function() {
-    // TODO (yungsters): Remove support for `selected` in <option>.
-    if (__DEV__) {
-      warning(
-        this.props.selected == null,
-        'Use the `defaultValue` or `value` props on <select> instead of ' +
-        'setting `selected` on <option>.'
-      );
-    }
-  },
-
-  render: function() {
-    return option(this.props, this.props.children);
-  }
-
-});
-
-module.exports = ReactDOMOption;
diff --git a/src/browser/ui/dom/components/ReactDOMSelect.js b/src/browser/ui/dom/components/ReactDOMSelect.js
deleted file mode 100644
index 3b965c60bad..00000000000
--- a/src/browser/ui/dom/components/ReactDOMSelect.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMSelect
- */
-
-"use strict";
-
-var AutoFocusMixin = require('AutoFocusMixin');
-var LinkedValueUtils = require('LinkedValueUtils');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-var ReactUpdates = require('ReactUpdates');
-
-var merge = require('merge');
-
-// Store a reference to the <select> `ReactDOMComponent`.
-var select = ReactDOM.select;
-
-function updateWithPendingValueIfMounted() {
-  /*jshint validthis:true */
-  if (this.isMounted()) {
-    this.setState({value: this._pendingValue});
-    this._pendingValue = 0;
-  }
-}
-
-/**
- * Validation function for `value` and `defaultValue`.
- * @private
- */
-function selectValueType(props, propName, componentName) {
-  if (props[propName] == null) {
-    return;
-  }
-  if (props.multiple) {
-    if (!Array.isArray(props[propName])) {
-      return new Error(
-        `The \`${propName}\` prop supplied to <select> must be an array if ` +
-        `\`multiple\` is true.`
-      );
-    }
-  } else {
-    if (Array.isArray(props[propName])) {
-      return new Error(
-        `The \`${propName}\` prop supplied to <select> must be a scalar ` +
-        `value if \`multiple\` is false.`
-      );
-    }
-  }
-}
-
-/**
- * If `value` is supplied, updates <option> elements on mount and update.
- * @param {ReactComponent} component Instance of ReactDOMSelect
- * @param {?*} propValue For uncontrolled components, null/undefined. For
- * controlled components, a string (or with `multiple`, a list of strings).
- * @private
- */
-function updateOptions(component, propValue) {
-  var multiple = component.props.multiple;
-  var value = propValue != null ? propValue : component.state.value;
-  var options = component.getDOMNode().options;
-  var selectedValue, i, l;
-  if (multiple) {
-    selectedValue = {};
-    for (i = 0, l = value.length; i < l; ++i) {
-      selectedValue['' + value[i]] = true;
-    }
-  } else {
-    selectedValue = '' + value;
-  }
-  for (i = 0, l = options.length; i < l; i++) {
-    var selected = multiple ?
-      selectedValue.hasOwnProperty(options[i].value) :
-      options[i].value === selectedValue;
-
-    if (selected !== options[i].selected) {
-      options[i].selected = selected;
-    }
-  }
-}
-
-/**
- * Implements a <select> native component that allows optionally setting the
- * props `value` and `defaultValue`. If `multiple` is false, the prop must be a
- * string. If `multiple` is true, the prop must be an array of strings.
- *
- * If `value` is not supplied (or null/undefined), user actions that change the
- * selected option will trigger updates to the rendered options.
- *
- * If it is supplied (and not null/undefined), the rendered options will not
- * update in response to user actions. Instead, the `value` prop must change in
- * order for the rendered options to update.
- *
- * If `defaultValue` is provided, any options with the supplied values will be
- * selected.
- */
-var ReactDOMSelect = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMSelect',
-
-  mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
-
-  propTypes: {
-    defaultValue: selectValueType,
-    value: selectValueType
-  },
-
-  getInitialState: function() {
-    return {value: this.props.defaultValue || (this.props.multiple ? [] : '')};
-  },
-
-  componentWillMount: function() {
-    this._pendingValue = null;
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    if (!this.props.multiple && nextProps.multiple) {
-      this.setState({value: [this.state.value]});
-    } else if (this.props.multiple && !nextProps.multiple) {
-      this.setState({value: this.state.value[0]});
-    }
-  },
-
-  render: function() {
-    // Clone `this.props` so we don't mutate the input.
-    var props = merge(this.props);
-
-    props.onChange = this._handleChange;
-    props.value = null;
-
-    return select(props, this.props.children);
-  },
-
-  componentDidMount: function() {
-    updateOptions(this, LinkedValueUtils.getValue(this));
-  },
-
-  componentDidUpdate: function(prevProps) {
-    var value = LinkedValueUtils.getValue(this);
-    var prevMultiple = !!prevProps.multiple;
-    var multiple = !!this.props.multiple;
-    if (value != null || prevMultiple !== multiple) {
-      updateOptions(this, value);
-    }
-  },
-
-  _handleChange: function(event) {
-    var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this);
-    if (onChange) {
-      returnValue = onChange.call(this, event);
-    }
-
-    var selectedValue;
-    if (this.props.multiple) {
-      selectedValue = [];
-      var options = event.target.options;
-      for (var i = 0, l = options.length; i < l; i++) {
-        if (options[i].selected) {
-          selectedValue.push(options[i].value);
-        }
-      }
-    } else {
-      selectedValue = event.target.value;
-    }
-
-    this._pendingValue = selectedValue;
-    ReactUpdates.setImmediate(updateWithPendingValueIfMounted, this);
-    return returnValue;
-  }
-
-});
-
-module.exports = ReactDOMSelect;
diff --git a/src/browser/ui/dom/components/ReactDOMTextarea.js b/src/browser/ui/dom/components/ReactDOMTextarea.js
deleted file mode 100644
index 9cc4d644b61..00000000000
--- a/src/browser/ui/dom/components/ReactDOMTextarea.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMTextarea
- */
-
-"use strict";
-
-var AutoFocusMixin = require('AutoFocusMixin');
-var DOMPropertyOperations = require('DOMPropertyOperations');
-var LinkedValueUtils = require('LinkedValueUtils');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactCompositeComponent = require('ReactCompositeComponent');
-var ReactDOM = require('ReactDOM');
-var ReactUpdates = require('ReactUpdates');
-
-var invariant = require('invariant');
-var merge = require('merge');
-
-var warning = require('warning');
-
-// Store a reference to the <textarea> `ReactDOMComponent`.
-var textarea = ReactDOM.textarea;
-
-function forceUpdateIfMounted() {
-  /*jshint validthis:true */
-  if (this.isMounted()) {
-    this.forceUpdate();
-  }
-}
-
-/**
- * Implements a <textarea> native component that allows setting `value`, and
- * `defaultValue`. This differs from the traditional DOM API because value is
- * usually set as PCDATA children.
- *
- * If `value` is not supplied (or null/undefined), user actions that affect the
- * value will trigger updates to the element.
- *
- * If `value` is supplied (and not null/undefined), the rendered element will
- * not trigger updates to the element. Instead, the `value` prop must change in
- * order for the rendered element to be updated.
- *
- * The rendered element will be initialized with an empty value, the prop
- * `defaultValue` if specified, or the children content (deprecated).
- */
-var ReactDOMTextarea = ReactCompositeComponent.createClass({
-  displayName: 'ReactDOMTextarea',
-
-  mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
-
-  getInitialState: function() {
-    var defaultValue = this.props.defaultValue;
-    // TODO (yungsters): Remove support for children content in <textarea>.
-    var children = this.props.children;
-    if (children != null) {
-      if (__DEV__) {
-        warning(
-          false,
-          '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)) {
-        invariant(
-          children.length <= 1,
-          '<textarea> can only have at most one child.'
-        );
-        children = children[0];
-      }
-
-      defaultValue = '' + children;
-    }
-    if (defaultValue == null) {
-      defaultValue = '';
-    }
-    var value = LinkedValueUtils.getValue(this);
-    return {
-      // We save the initial value so that `ReactDOMComponent` doesn't update
-      // `textContent` (unnecessary since we update value).
-      // The initial value can be a boolean or object so that's why it's
-      // forced to be a string.
-      initialValue: '' + (value != null ? value : defaultValue)
-    };
-  },
-
-  render: function() {
-    // Clone `this.props` so we don't mutate the input.
-    var props = merge(this.props);
-
-    invariant(
-      props.dangerouslySetInnerHTML == null,
-      '`dangerouslySetInnerHTML` does not make sense on <textarea>.'
-    );
-
-    props.defaultValue = null;
-    props.value = null;
-    props.onChange = this._handleChange;
-
-    // Always set children to the same thing. In IE9, the selection range will
-    // get reset if `textContent` is mutated.
-    return textarea(props, this.state.initialValue);
-  },
-
-  componentDidUpdate: function(prevProps, prevState, prevContext) {
-    var value = LinkedValueUtils.getValue(this);
-    if (value != null) {
-      var rootNode = this.getDOMNode();
-      // Cast `value` to a string to ensure the value is set correctly. While
-      // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(rootNode, 'value', '' + value);
-    }
-  },
-
-  _handleChange: function(event) {
-    var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this);
-    if (onChange) {
-      returnValue = onChange.call(this, event);
-    }
-    ReactUpdates.setImmediate(forceUpdateIfMounted, this);
-    return returnValue;
-  }
-
-});
-
-module.exports = ReactDOMTextarea;
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMButton-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMButton-test.js
deleted file mode 100644
index e9dbf98dd05..00000000000
--- a/src/browser/ui/dom/components/__tests__/ReactDOMButton-test.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-/*jshint evil:true */
-
-var mocks = require('mocks');
-
-describe('ReactDOMButton', function() {
-  var React;
-  var ReactTestUtils;
-
-  var onClick = mocks.getMockFunction();
-
-  function expectClickThru(button) {
-    onClick.mockClear();
-    ReactTestUtils.Simulate.click(button.getDOMNode());
-    expect(onClick.mock.calls.length).toBe(1);
-  }
-
-  function expectNoClickThru(button) {
-    onClick.mockClear();
-    ReactTestUtils.Simulate.click(button.getDOMNode());
-    expect(onClick.mock.calls.length).toBe(0);
-  }
-
-  function mounted(button) {
-    button = ReactTestUtils.renderIntoDocument(button);
-    return button;
-  }
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-  });
-
-  it('should forward clicks when it starts out not disabled', function() {
-    expectClickThru(mounted(<button onClick={onClick} />));
-  });
-
-  it('should not forward clicks when it starts out disabled', function() {
-    expectNoClickThru(
-      mounted(<button disabled={true} onClick={onClick} />)
-    );
-  });
-
-  it('should forward clicks when it becomes not disabled', function() {
-    var btn = mounted(<button disabled={true} onClick={onClick} />);
-    btn.setProps({disabled: false});
-    expectClickThru(btn);
-  });
-
-  it('should not forward clicks when it becomes disabled', function() {
-    var btn = mounted(<button onClick={onClick} />);
-    btn.setProps({disabled: true});
-    expectNoClickThru(btn);
-  });
-
-  it('should work correctly if the listener is changed', function() {
-    var btn = mounted(
-      <button disabled={true} onClick={function() {}} />
-    );
-
-    btn.setProps({
-      disabled: false,
-      onClick: onClick
-    });
-
-    expectClickThru(btn);
-  });
-});
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js
deleted file mode 100644
index 379567a599d..00000000000
--- a/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js
+++ /dev/null
@@ -1,387 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-/*jshint evil:true */
-
-var emptyFunction = require('emptyFunction');
-var mocks = require('mocks');
-
-describe('ReactDOMInput', function() {
-  var React;
-  var ReactLink;
-  var ReactTestUtils;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactLink = require('ReactLink');
-    ReactTestUtils = require('ReactTestUtils');
-  });
-
-  it('should display `defaultValue` of number 0', function() {
-    var stub = <input type="text" defaultValue={0} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('0');
-  });
-
-  it('should display "true" for `defaultValue` of `true`', function() {
-    var stub = <input type="text" defaultValue={true} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('true');
-  });
-
-  it('should display "false" for `defaultValue` of `false`', function() {
-    var stub = <input type="text" defaultValue={false} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('false');
-  });
-
-  it('should display "foobar" for `defaultValue` of `objToString`', function() {
-    var objToString = {
-      toString: function() {
-        return "foobar";
-      }
-    };
-
-    var stub = <input type="text" defaultValue={objToString} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('foobar');
-  });
-
-  it('should display `value` of number 0', function() {
-    var stub = <input type="text" value={0} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('0');
-  });
-
-  it('should allow setting `value` to `true`', function() {
-    var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('yolo');
-
-    stub.replaceProps({value: true, onChange: emptyFunction});
-    expect(node.value).toEqual('true');
-  });
-
-  it("should allow setting `value` to `false`", function() {
-    var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('yolo');
-
-    stub.replaceProps({value: false});
-    expect(node.value).toEqual('false');
-  });
-
-  it('should allow setting `value` to `objToString`', function() {
-    var stub = <input type="text" value="foo" onChange={emptyFunction} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('foo');
-
-    var objToString = {
-      toString: function() {
-        return "foobar";
-      }
-    };
-
-    stub.replaceProps({value: objToString, onChange: emptyFunction});
-    expect(node.value).toEqual('foobar');
-  });
-
-  it('should properly control a value of number `0`', function() {
-    var stub = <input type="text" value={0} onChange={emptyFunction} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    node.value = 'giraffe';
-    ReactTestUtils.Simulate.change(node);
-    expect(node.value).toBe('0');
-  });
-
-  it('should not set a value for submit buttons unnecessarily', function() {
-    var stub = <input type="submit" />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    // The value shouldn't be '', or else the button will have no text; it
-    // should have the default "Submit" or "Submit Query" label. Most browsers
-    // report this as not having a `value` attribute at all; IE reports it as
-    // the actual label that the user sees.
-    expect(
-      !node.hasAttribute('value') || node.getAttribute('value').length > 0
-    ).toBe(true);
-  });
-
-  it('should control radio buttons', function() {
-    var RadioGroup = React.createClass({
-      render: function() {
-        return (
-          <div>
-            <input
-              ref="a"
-              type="radio"
-              name="fruit"
-              checked={true}
-              onChange={emptyFunction}
-            />A
-            <input
-              ref="b"
-              type="radio"
-              name="fruit"
-              onChange={emptyFunction}
-            />B
-
-            <form>
-              <input
-                ref="c"
-                type="radio"
-                name="fruit"
-                defaultChecked={true}
-                onChange={emptyFunction}
-              />
-            </form>
-          </div>
-        );
-      }
-    });
-
-    var stub = ReactTestUtils.renderIntoDocument(<RadioGroup />);
-    var aNode = stub.refs.a.getDOMNode();
-    var bNode = stub.refs.b.getDOMNode();
-    var cNode = stub.refs.c.getDOMNode();
-
-    expect(aNode.checked).toBe(true);
-    expect(bNode.checked).toBe(false);
-    // c is in a separate form and shouldn't be affected at all here
-    expect(cNode.checked).toBe(true);
-
-    bNode.checked = true;
-    // This next line isn't necessary in a proper browser environment, but
-    // jsdom doesn't uncheck the others in a group (which makes this whole test
-    // a little less effective)
-    aNode.checked = false;
-    expect(cNode.checked).toBe(true);
-
-    // Now let's run the actual ReactDOMInput change event handler
-    ReactTestUtils.Simulate.change(bNode);
-
-    // The original state should have been restored
-    expect(aNode.checked).toBe(true);
-    expect(cNode.checked).toBe(true);
-  });
-
-  it('should support ReactLink', function() {
-    var container = document.createElement('div');
-    var link = new ReactLink('yolo', mocks.getMockFunction());
-    var instance = <input type="text" valueLink={link} />;
-
-    instance = React.renderComponent(instance, container);
-
-    expect(instance.getDOMNode().value).toBe('yolo');
-    expect(link.value).toBe('yolo');
-    expect(link.requestChange.mock.calls.length).toBe(0);
-
-    instance.getDOMNode().value = 'test';
-    ReactTestUtils.Simulate.change(instance.getDOMNode());
-
-    expect(link.requestChange.mock.calls.length).toBe(1);
-    expect(link.requestChange.mock.calls[0][0]).toEqual('test');
-  });
-
-  it('should warn with value and no onChange handler', function() {
-    var oldWarn = console.warn;
-    try {
-      console.warn = mocks.getMockFunction();
-
-      var node = document.createElement('div');
-      var link = new ReactLink('yolo', mocks.getMockFunction());
-      React.renderComponent(<input type="text" valueLink={link} />, node);
-      expect(console.warn.mock.calls.length).toBe(0);
-
-      React.renderComponent(
-        <input type="text" value="zoink" onChange={mocks.getMockFunction()} />,
-        node
-      );
-      expect(console.warn.mock.calls.length).toBe(0);
-
-      React.renderComponent(
-        <input type="text" value="zoink" readOnly={true} />,
-        node
-      );
-      expect(console.warn.mock.calls.length).toBe(0);
-
-      React.renderComponent(<input type="text" value="zoink" />, node);
-      expect(console.warn.mock.calls.length).toBe(1);
-
-      React.renderComponent(
-        <input type="text" value="zoink" readOnly={false} />,
-        node
-      );
-      expect(console.warn.mock.calls.length).toBe(2);
-    } finally {
-      console.warn = oldWarn;
-    }
-  });
-
-  it('should throw if both value and valueLink are provided', function() {
-    // Silences console.error messages
-    // ReactErrorUtils.guard is applied to all methods of a React component
-    // and calls console.error in __DEV__ (true for test environment)
-    spyOn(console, 'error');
-
-    var node = document.createElement('div');
-    var link = new ReactLink('yolo', mocks.getMockFunction());
-    var instance = <input type="text" valueLink={link} />;
-
-    expect(React.renderComponent.bind(React, instance, node)).not.toThrow();
-
-    instance =
-      <input
-        type="text"
-        valueLink={link}
-        value="test"
-        onChange={emptyFunction}
-      />;
-    expect(React.renderComponent.bind(React, instance, node)).toThrow();
-
-    instance = <input type="text" valueLink={link} onChange={emptyFunction} />;
-    expect(React.renderComponent.bind(React, instance, node)).toThrow();
-
-  });
-
-  it('should support checkedLink', function() {
-    var container = document.createElement('div');
-    var link = new ReactLink(true, mocks.getMockFunction());
-    var instance = <input type="checkbox" checkedLink={link} />;
-
-    instance = React.renderComponent(instance, container);
-
-    expect(instance.getDOMNode().checked).toBe(true);
-    expect(link.value).toBe(true);
-    expect(link.requestChange.mock.calls.length).toBe(0);
-
-    instance.getDOMNode().checked = false;
-    ReactTestUtils.Simulate.change(instance.getDOMNode());
-
-    expect(link.requestChange.mock.calls.length).toBe(1);
-    expect(link.requestChange.mock.calls[0][0]).toEqual(false);
-  });
-
-  it('should warn with checked and no onChange handler', function() {
-    var oldWarn = console.warn;
-    try {
-      console.warn = mocks.getMockFunction();
-
-      var node = document.createElement('div');
-      var link = new ReactLink(true, mocks.getMockFunction());
-      React.renderComponent(<input type="checkbox" checkedLink={link} />, node);
-      expect(console.warn.mock.calls.length).toBe(0);
-
-      React.renderComponent(
-        <input
-          type="checkbox"
-          checked="false"
-          onChange={mocks.getMockFunction()}
-        />,
-        node
-      );
-      expect(console.warn.mock.calls.length).toBe(0);
-
-      React.renderComponent(
-        <input type="checkbox" checked="false" readOnly={true} />,
-        node
-      );
-      expect(console.warn.mock.calls.length).toBe(0);
-
-      React.renderComponent(<input type="checkbox" checked="false" />, node);
-      expect(console.warn.mock.calls.length).toBe(1);
-
-      React.renderComponent(
-        <input type="checkbox" checked="false" readOnly={false} />,
-        node
-      );
-      expect(console.warn.mock.calls.length).toBe(2);
-    } finally {
-      console.warn = oldWarn;
-    }
-  });
-
-  it('should throw if both checked and checkedLink are provided', function() {
-    // Silences console.error messages
-    // ReactErrorUtils.guard is applied to all methods of a React component
-    // and calls console.error in __DEV__ (true for test environment)
-    spyOn(console, 'error');
-
-    var node = document.createElement('div');
-    var link = new ReactLink(true, mocks.getMockFunction());
-    var instance = <input type="checkbox" checkedLink={link} />;
-
-    expect(React.renderComponent.bind(React, instance, node)).not.toThrow();
-
-    instance =
-      <input
-        type="checkbox"
-        checkedLink={link}
-        checked="false"
-        onChange={emptyFunction}
-      />;
-    expect(React.renderComponent.bind(React, instance, node)).toThrow();
-
-    instance =
-      <input type="checkbox" checkedLink={link} onChange={emptyFunction} />;
-    expect(React.renderComponent.bind(React, instance, node)).toThrow();
-
-  });
-
-  it('should throw if both checkedLink and valueLink are provided', function() {
-    // Silences console.error messages
-    // ReactErrorUtils.guard is applied to all methods of a React component
-    // and calls console.error in __DEV__ (true for test environment)
-    spyOn(console, 'error');
-
-    var node = document.createElement('div');
-    var link = new ReactLink(true, mocks.getMockFunction());
-    var instance = <input type="checkbox" checkedLink={link} />;
-
-    expect(React.renderComponent.bind(React, instance, node)).not.toThrow();
-
-    instance = <input type="checkbox" valueLink={link} />;
-    expect(React.renderComponent.bind(React, instance, node)).not.toThrow();
-
-    instance =
-      <input type="checkbox" checkedLink={link} valueLink={emptyFunction} />;
-    expect(React.renderComponent.bind(React, instance, node)).toThrow();
-  });
-});
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMSelect-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMSelect-test.js
deleted file mode 100644
index c3f4781c577..00000000000
--- a/src/browser/ui/dom/components/__tests__/ReactDOMSelect-test.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-/*jshint evil:true */
-
-var mocks = require('mocks');
-
-describe('ReactDOMSelect', function() {
-  var React;
-  var ReactLink;
-  var ReactTestUtils;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactLink = require('ReactLink');
-    ReactTestUtils = require('ReactTestUtils');
-  });
-
-  it('should allow setting `defaultValue`', function() {
-    var stub =
-      <select defaultValue="giraffe">
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    // Changing `defaultValue` should do nothing.
-    stub.setProps({defaultValue: 'gorilla'});
-    expect(node.value).toEqual('giraffe');
-  });
-
-  it('should not control when using `defaultValue`', function() {
-    var stub =
-      <select defaultValue="giraffe">
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    node.value = 'monkey';
-    stub.forceUpdate();
-    // Uncontrolled selects shouldn't change the value after first mounting
-    expect(node.value).toEqual('monkey');
-  });
-
-  it('should allow setting `defaultValue` with multiple', function() {
-    var stub =
-      <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(true);  // gorilla
-
-    // Changing `defaultValue` should do nothing.
-    stub.setProps({defaultValue: ['monkey']});
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(true);  // gorilla
-  });
-
-  it('should allow setting `value`', function() {
-    var stub =
-      <select value="giraffe">
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    // Changing the `value` prop should change the selected option.
-    stub.setProps({value: 'gorilla'});
-    expect(node.value).toEqual('gorilla');
-  });
-
-  it('should allow setting `value` with multiple', function() {
-    var stub =
-      <select multiple={true} value={['giraffe', 'gorilla']}>
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(true);  // gorilla
-
-    // Changing the `value` prop should change the selected options.
-    stub.setProps({value: ['monkey']});
-
-    expect(node.options[0].selected).toBe(true);  // monkey
-    expect(node.options[1].selected).toBe(false);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-  });
-
-  it('should not select other options automatically', function() {
-    var stub =
-      <select multiple={true} value={['12']}>
-        <option value="1">one</option>
-        <option value="2">two</option>
-        <option value="12">twelve</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // one
-    expect(node.options[1].selected).toBe(false);  // two
-    expect(node.options[2].selected).toBe(true);  // twelve
-  });
-
-  it('should allow setting `value` with `objectToString`', function() {
-    var objectToString = {
-      animal: "giraffe",
-      toString: function() {
-        return this.animal;
-      }
-    };
-
-    var stub =
-      <select multiple={true} value={[objectToString]}>
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-
-    // Changing the `value` prop should change the selected options.
-    objectToString.animal = "monkey";
-    stub.forceUpdate();
-
-    expect(node.options[0].selected).toBe(true);  // monkey
-    expect(node.options[1].selected).toBe(false);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-  });
-
-  it('should allow switching to multiple', function() {
-    var stub =
-      <select defaultValue="giraffe">
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-
-    // When making it multiple, giraffe should still be selected
-    stub.setProps({multiple: true, defaultValue: null});
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-  });
-
-  it('should allow switching from multiple', function() {
-    var stub =
-      <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(true);  // gorilla
-
-    // When removing multiple, giraffe should still be selected (but gorilla
-    // will no longer be)
-    stub.setProps({multiple: false, defaultValue: null});
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-  });
-
-  it('should support ReactLink', function() {
-    var link = new ReactLink('giraffe', mocks.getMockFunction());
-    var stub =
-      <select valueLink={link}>
-        <option value="monkey">A monkey!</option>
-        <option value="giraffe">A giraffe!</option>
-        <option value="gorilla">A gorilla!</option>
-      </select>;
-    stub = ReactTestUtils.renderIntoDocument(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.options[0].selected).toBe(false);  // monkey
-    expect(node.options[1].selected).toBe(true);  // giraffe
-    expect(node.options[2].selected).toBe(false);  // gorilla
-    expect(link.requestChange.mock.calls.length).toBe(0);
-
-    node.options[1].selected = false;
-    node.options[2].selected = true;
-    ReactTestUtils.Simulate.change(node);
-
-    expect(link.requestChange.mock.calls.length).toBe(1);
-    expect(link.requestChange.mock.calls[0][0]).toEqual('gorilla');
-
-  });
-});
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
deleted file mode 100644
index a9caab14280..00000000000
--- a/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var emptyFunction = require('emptyFunction');
-var mocks = require('mocks');
-
-describe('ReactDOMTextarea', function() {
-  var React;
-  var ReactLink;
-  var ReactTestUtils;
-
-  var renderTextarea;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactLink = require('ReactLink');
-    ReactTestUtils = require('ReactTestUtils');
-
-    renderTextarea = function(component) {
-      var stub = ReactTestUtils.renderIntoDocument(component);
-      var node = stub.getDOMNode();
-      // Polyfilling the browser's quirky behavior.
-      node.value = node.innerHTML;
-      return stub;
-    };
-  });
-
-  it('should allow setting `defaultValue`', function() {
-    var stub = <textarea defaultValue="giraffe" />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    // Changing `defaultValue` should do nothing.
-    stub.replaceProps({defaultValue: 'gorilla'});
-    expect(node.value).toEqual('giraffe');
-  });
-
-  it('should display `defaultValue` of number 0', function() {
-    var stub = <textarea defaultValue={0} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('0');
-  });
-
-  it('should display "false" for `defaultValue` of `false`', function() {
-    var stub = <textarea type="text" defaultValue={false} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('false');
-  });
-
-  it('should display "foobar" for `defaultValue` of `objToString`', function() {
-    var objToString = {
-      toString: function() {
-        return "foobar";
-      }
-    };
-
-    var stub = <textarea type="text" defaultValue={objToString} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('foobar');
-  });
-
-  it('should not render value as an attribute', function() {
-    var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.getAttribute('value')).toBe(null);
-  });
-
-  it('should display `value` of number 0', function() {
-    var stub = <textarea value={0} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('0');
-  });
-
-  it('should allow setting `value` to `giraffe`', function() {
-    var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    stub.replaceProps({value: 'gorilla', onChange: emptyFunction});
-    expect(node.value).toEqual('gorilla');
-  });
-
-  it('should allow setting `value` to `true`', function() {
-    var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    stub.replaceProps({value: true, onChange: emptyFunction});
-    expect(node.value).toEqual('true');
-  });
-
-  it('should allow setting `value` to `false`', function() {
-    var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    stub.replaceProps({value: false});
-    expect(node.value).toEqual('false');
-  });
-
-  it('should allow setting `value` to `objToString`', function() {
-    var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(node.value).toBe('giraffe');
-
-    var objToString = {
-      toString: function() {
-        return "foo";
-      }
-    };
-    stub.replaceProps({value: objToString, onChange: emptyFunction});
-    expect(node.value).toEqual('foo');
-  });
-
-  it('should properly control a value of number `0`', function() {
-    var stub = <textarea value={0} onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    node.value = 'giraffe';
-    ReactTestUtils.Simulate.change(node);
-    expect(node.value).toBe('0');
-  });
-
-  it('should treat children like `defaultValue`', function() {
-    spyOn(console, 'warn');
-
-    var stub = <textarea>giraffe</textarea>;
-    stub = renderTextarea(stub);
-    var node = stub.getDOMNode();
-
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(node.value).toBe('giraffe');
-
-    // Changing children should do nothing, it functions like `defaultValue`.
-    stub.replaceProps({children: 'gorilla'});
-    expect(node.value).toEqual('giraffe');
-  });
-
-  it('should allow numbers as children', function() {
-    spyOn(console, 'warn');
-    var node = renderTextarea(<textarea>{17}</textarea>).getDOMNode();
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(node.value).toBe('17');
-  });
-
-  it('should allow booleans as children', function() {
-    spyOn(console, 'warn');
-    var node = renderTextarea(<textarea>{false}</textarea>).getDOMNode();
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(node.value).toBe('false');
-  });
-
-  it('should allow objects as children', function() {
-    spyOn(console, 'warn');
-    var obj = {
-      toString: function() {
-        return "sharkswithlasers";
-      }
-    };
-    var node = renderTextarea(<textarea>{obj}</textarea>).getDOMNode();
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(node.value).toBe('sharkswithlasers');
-  });
-
-  it('should throw with multiple or invalid children', function() {
-    spyOn(console, 'warn');
-
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(
-        <textarea>{'hello'}{'there'}</textarea>
-      );
-    }).toThrow();
-
-    expect(console.warn.argsForCall.length).toBe(1);
-
-    var node;
-    expect(function() {
-      node = renderTextarea(<textarea><strong /></textarea>).getDOMNode();
-    }).not.toThrow();
-
-    expect(node.value).toBe('[object Object]');
-
-    expect(console.warn.argsForCall.length).toBe(2);
-  });
-
-  it('should support ReactLink', function() {
-    var container = document.createElement('div');
-    var link = new ReactLink('yolo', mocks.getMockFunction());
-    var instance = <textarea valueLink={link} />;
-
-    instance = React.renderComponent(instance, container);
-
-    expect(instance.getDOMNode().value).toBe('yolo');
-    expect(link.value).toBe('yolo');
-    expect(link.requestChange.mock.calls.length).toBe(0);
-
-    instance.getDOMNode().value = 'test';
-    ReactTestUtils.Simulate.change(instance.getDOMNode());
-
-    expect(link.requestChange.mock.calls.length).toBe(1);
-    expect(link.requestChange.mock.calls[0][0]).toEqual('test');
-  });
-});
diff --git a/src/browser/ui/dom/components/createFullPageComponent.js b/src/browser/ui/dom/components/createFullPageComponent.js
deleted file mode 100644
index afaf4aaec01..00000000000
--- a/src/browser/ui/dom/components/createFullPageComponent.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule createFullPageComponent
- * @typechecks
- */
-
-"use strict";
-
-// Defeat circular references by requiring this directly.
-var ReactCompositeComponent = require('ReactCompositeComponent');
-
-var invariant = require('invariant');
-
-/**
- * Create a component that will throw an exception when unmounted.
- *
- * Components like <html> <head> and <body> can't be removed or added
- * easily in a cross-browser way, however it's valuable to be able to
- * take advantage of React's reconciliation for styling and <title>
- * management. So we just document it and throw in dangerous cases.
- *
- * @param {function} componentClass convenience constructor to wrap
- * @return {function} convenience constructor of new component
- */
-function createFullPageComponent(componentClass) {
-  var FullPageComponent = ReactCompositeComponent.createClass({
-    displayName: 'ReactFullPageComponent' + (
-      componentClass.type.displayName || ''
-    ),
-
-    componentWillUnmount: function() {
-      invariant(
-        false,
-        '%s tried to unmount. Because of cross-browser quirks it is ' +
-        'impossible to unmount some top-level components (eg <html>, <head>, ' +
-        'and <body>) reliably and efficiently. To fix this, have a single ' +
-        'top-level component that never unmounts render these elements.',
-        this.constructor.displayName
-      );
-    },
-
-    render: function() {
-      return componentClass(this.props);
-    }
-  });
-
-  return FullPageComponent;
-}
-
-module.exports = createFullPageComponent;
diff --git a/src/browser/ui/dom/dangerousStyleValue.js b/src/browser/ui/dom/dangerousStyleValue.js
deleted file mode 100644
index c1108ce23e6..00000000000
--- a/src/browser/ui/dom/dangerousStyleValue.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule dangerousStyleValue
- * @typechecks static-only
- */
-
-"use strict";
-
-var CSSProperty = require('CSSProperty');
-
-var isUnitlessNumber = CSSProperty.isUnitlessNumber;
-
-/**
- * Convert a value into the proper css writable value. The style name `name`
- * should be logical (no hyphens), as specified
- * in `CSSProperty.isUnitlessNumber`.
- *
- * @param {string} name CSS property name such as `topMargin`.
- * @param {*} value CSS property value such as `10px`.
- * @return {string} Normalized style value with dimensions applied.
- */
-function dangerousStyleValue(name, value) {
-  // Note that we've removed escapeTextForBrowser() calls here since the
-  // whole string will be escaped when the attribute is injected into
-  // the markup. If you provide unsafe user data here they can inject
-  // arbitrary CSS which may be problematic (I couldn't repro this):
-  // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
-  // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
-  // This is not an XSS hole but instead a potential CSS injection issue
-  // which has lead to a greater discussion about how we're going to
-  // trust URLs moving forward. See #2115901
-
-  var isEmpty = value == null || typeof value === 'boolean' || value === '';
-  if (isEmpty) {
-    return '';
-  }
-
-  var isNonNumeric = isNaN(value);
-  if (isNonNumeric || value === 0 ||
-      isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
-    return '' + value; // cast to string
-  }
-
-  if (typeof value === 'string') {
-    value = value.trim();
-  }
-  return value + 'px';
-}
-
-module.exports = dangerousStyleValue;
diff --git a/src/browser/ui/dom/getEventCharCode.js b/src/browser/ui/dom/getEventCharCode.js
deleted file mode 100644
index 8a7c71078be..00000000000
--- a/src/browser/ui/dom/getEventCharCode.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getEventCharCode
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * `charCode` represents the actual "character code" and is safe to use with
- * `String.fromCharCode`. As such, only keys that correspond to printable
- * characters produce a valid `charCode`, the only exception to this is Enter.
- * The Tab-key is considered non-printable and does not have a `charCode`,
- * presumably because it does not produce a tab-character in browsers.
- *
- * @param {object} nativeEvent Native browser event.
- * @return {string} Normalized `charCode` property.
- */
-function getEventCharCode(nativeEvent) {
-  var charCode;
-  var keyCode = nativeEvent.keyCode;
-
-  if ('charCode' in nativeEvent) {
-    charCode = nativeEvent.charCode;
-
-    // FF does not set `charCode` for the Enter-key, check against `keyCode`.
-    if (charCode === 0 && keyCode === 13) {
-      charCode = 13;
-    }
-  } else {
-    // IE8 does not implement `charCode`, but `keyCode` has the correct value.
-    charCode = keyCode;
-  }
-
-  // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
-  // Must not discard the (non-)printable Enter-key.
-  if (charCode >= 32 || charCode === 13) {
-    return charCode;
-  }
-
-  return 0;
-}
-
-module.exports = getEventCharCode;
diff --git a/src/browser/ui/dom/getEventKey.js b/src/browser/ui/dom/getEventKey.js
deleted file mode 100644
index fafa315601e..00000000000
--- a/src/browser/ui/dom/getEventKey.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getEventKey
- * @typechecks static-only
- */
-
-"use strict";
-
-var getEventCharCode = require('getEventCharCode');
-
-/**
- * Normalization of deprecated HTML5 `key` values
- * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
- */
-var 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
- */
-var 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'
-};
-
-/**
- * @param {object} nativeEvent Native browser event.
- * @return {string} Normalized `key` property.
- */
-function getEventKey(nativeEvent) {
-  if (nativeEvent.key) {
-    // 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.
-    var key = normalizeKey[nativeEvent.key] || nativeEvent.key;
-    if (key !== 'Unidentified') {
-      return key;
-    }
-  }
-
-  // Browser does not implement `key`, polyfill as much of it as we can.
-  if (nativeEvent.type === 'keypress') {
-    var charCode = getEventCharCode(nativeEvent);
-
-    // The enter-key is technically both printable and non-printable and can
-    // thus be captured by `keypress`, no other non-printable key should.
-    return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
-  }
-  if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
-    // While user keyboard layout determines the actual meaning of each
-    // `keyCode` value, almost all function keys have a universal value.
-    return translateToKey[nativeEvent.keyCode] || 'Unidentified';
-  }
-  return '';
-}
-
-module.exports = getEventKey;
diff --git a/src/browser/ui/dom/getEventModifierState.js b/src/browser/ui/dom/getEventModifierState.js
deleted file mode 100644
index e51850c2cdb..00000000000
--- a/src/browser/ui/dom/getEventModifierState.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2013 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getEventModifierState
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * Translation from modifier key to the associated property in the event.
- * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
- */
-
-var modifierKeyToProp = {
-  'Alt': 'altKey',
-  'Control': 'ctrlKey',
-  'Meta': 'metaKey',
-  'Shift': 'shiftKey'
-};
-
-// IE8 does not implement getModifierState so we simply map it to the only
-// modifier keys exposed by the event itself, does not support Lock-keys.
-// Currently, all major browsers except Chrome seems to support Lock-keys.
-function modifierStateGetter(keyArg) {
-  /*jshint validthis:true */
-  var syntheticEvent = this;
-  var nativeEvent = syntheticEvent.nativeEvent;
-  if (nativeEvent.getModifierState) {
-    return nativeEvent.getModifierState(keyArg);
-  }
-  var keyProp = modifierKeyToProp[keyArg];
-  return keyProp ? !!nativeEvent[keyProp] : false;
-}
-
-function getEventModifierState(nativeEvent) {
-  return modifierStateGetter;
-}
-
-module.exports = getEventModifierState;
diff --git a/src/browser/ui/dom/getEventTarget.js b/src/browser/ui/dom/getEventTarget.js
deleted file mode 100644
index 37bc41b50f7..00000000000
--- a/src/browser/ui/dom/getEventTarget.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getEventTarget
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * Gets the target node from a native browser event by accounting for
- * inconsistencies in browser DOM APIs.
- *
- * @param {object} nativeEvent Native browser event.
- * @return {DOMEventTarget} Target node.
- */
-function getEventTarget(nativeEvent) {
-  var target = nativeEvent.target || nativeEvent.srcElement || window;
-  // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
-  // @see http://www.quirksmode.org/js/events_properties.html
-  return target.nodeType === 3 ? target.parentNode : target;
-}
-
-module.exports = getEventTarget;
diff --git a/src/browser/ui/dom/getNodeForCharacterOffset.js b/src/browser/ui/dom/getNodeForCharacterOffset.js
deleted file mode 100644
index c6a6c95ad88..00000000000
--- a/src/browser/ui/dom/getNodeForCharacterOffset.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getNodeForCharacterOffset
- */
-
-"use strict";
-
-/**
- * Given any node return the first leaf node without children.
- *
- * @param {DOMElement|DOMTextNode} node
- * @return {DOMElement|DOMTextNode}
- */
-function getLeafNode(node) {
-  while (node && node.firstChild) {
-    node = node.firstChild;
-  }
-  return node;
-}
-
-/**
- * Get the next sibling within a container. This will walk up the
- * DOM if a node's siblings have been exhausted.
- *
- * @param {DOMElement|DOMTextNode} node
- * @return {?DOMElement|DOMTextNode}
- */
-function getSiblingNode(node) {
-  while (node) {
-    if (node.nextSibling) {
-      return node.nextSibling;
-    }
-    node = node.parentNode;
-  }
-}
-
-/**
- * Get object describing the nodes which contain characters at offset.
- *
- * @param {DOMElement|DOMTextNode} root
- * @param {number} offset
- * @return {?object}
- */
-function getNodeForCharacterOffset(root, offset) {
-  var node = getLeafNode(root);
-  var nodeStart = 0;
-  var nodeEnd = 0;
-
-  while (node) {
-    if (node.nodeType == 3) {
-      nodeEnd = nodeStart + node.textContent.length;
-
-      if (nodeStart <= offset && nodeEnd >= offset) {
-        return {
-          node: node,
-          offset: offset - nodeStart
-        };
-      }
-
-      nodeStart = nodeEnd;
-    }
-
-    node = getLeafNode(getSiblingNode(node));
-  }
-}
-
-module.exports = getNodeForCharacterOffset;
diff --git a/src/browser/ui/dom/getTextContentAccessor.js b/src/browser/ui/dom/getTextContentAccessor.js
deleted file mode 100644
index ae352ffd834..00000000000
--- a/src/browser/ui/dom/getTextContentAccessor.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getTextContentAccessor
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var contentKey = null;
-
-/**
- * Gets the key used to access text content on a DOM node.
- *
- * @return {?string} Key used to access text content.
- * @internal
- */
-function getTextContentAccessor() {
-  if (!contentKey && ExecutionEnvironment.canUseDOM) {
-    // Prefer textContent to innerText because many browsers support both but
-    // SVG <text> elements don't support innerText even when <div> does.
-    contentKey = 'textContent' in document.documentElement ?
-      'textContent' :
-      'innerText';
-  }
-  return contentKey;
-}
-
-module.exports = getTextContentAccessor;
diff --git a/src/browser/ui/dom/isEventSupported.js b/src/browser/ui/dom/isEventSupported.js
deleted file mode 100644
index b2f600e429a..00000000000
--- a/src/browser/ui/dom/isEventSupported.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule isEventSupported
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var useHasFeature;
-if (ExecutionEnvironment.canUseDOM) {
-  useHasFeature =
-    document.implementation &&
-    document.implementation.hasFeature &&
-    // always returns true in newer browsers as per the standard.
-    // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
-    document.implementation.hasFeature('', '') !== true;
-}
-
-/**
- * Checks if an event is supported in the current execution environment.
- *
- * NOTE: This will not work correctly for non-generic events such as `change`,
- * `reset`, `load`, `error`, and `select`.
- *
- * Borrows from Modernizr.
- *
- * @param {string} eventNameSuffix Event name, e.g. "click".
- * @param {?boolean} capture Check if the capture phase is supported.
- * @return {boolean} True if the event is supported.
- * @internal
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-function isEventSupported(eventNameSuffix, capture) {
-  if (!ExecutionEnvironment.canUseDOM ||
-      capture && !('addEventListener' in document)) {
-    return false;
-  }
-
-  var eventName = 'on' + eventNameSuffix;
-  var isSupported = eventName in document;
-
-  if (!isSupported) {
-    var element = document.createElement('div');
-    element.setAttribute(eventName, 'return;');
-    isSupported = typeof element[eventName] === 'function';
-  }
-
-  if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
-    // This is the only way to test support for the `wheel` event in IE9+.
-    isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
-  }
-
-  return isSupported;
-}
-
-module.exports = isEventSupported;
diff --git a/src/browser/ui/dom/setInnerHTML.js b/src/browser/ui/dom/setInnerHTML.js
deleted file mode 100644
index e7c5888aaf9..00000000000
--- a/src/browser/ui/dom/setInnerHTML.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule setInnerHTML
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var WHITESPACE_TEST = /^[ \r\n\t\f]/;
-var NONVISIBLE_TEST = /<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/;
-
-/**
- * Set the innerHTML property of a node, ensuring that whitespace is preserved
- * even in IE8.
- *
- * @param {DOMElement} node
- * @param {string} html
- * @internal
- */
-var setInnerHTML = function(node, html) {
-  node.innerHTML = html;
-};
-
-if (ExecutionEnvironment.canUseDOM) {
-  // IE8: When updating a just created node with innerHTML only leading
-  // whitespace is removed. When updating an existing node with innerHTML
-  // whitespace in root TextNodes is also collapsed.
-  // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
-
-  // Feature detection; only IE8 is known to behave improperly like this.
-  var testElement = document.createElement('div');
-  testElement.innerHTML = ' ';
-  if (testElement.innerHTML === '') {
-    setInnerHTML = function(node, html) {
-      // Magic theory: IE8 supposedly differentiates between added and updated
-      // nodes when processing innerHTML, innerHTML on updated nodes suffers
-      // from worse whitespace behavior. Re-adding a node like this triggers
-      // the initial and more favorable whitespace behavior.
-      // TODO: What to do on a detached node?
-      if (node.parentNode) {
-        node.parentNode.replaceChild(node, node);
-      }
-
-      // We also implement a workaround for non-visible tags disappearing into
-      // thin air on IE8, this only happens if there is no visible text
-      // in-front of the non-visible tags. Piggyback on the whitespace fix
-      // and simply check if any non-visible tags appear in the source.
-      if (WHITESPACE_TEST.test(html) ||
-          html[0] === '<' && NONVISIBLE_TEST.test(html)) {
-        // Recover leading whitespace by temporarily prepending any character.
-        // \uFEFF has the potential advantage of being zero-width/invisible.
-        node.innerHTML = '\uFEFF' + html;
-
-        // deleteData leaves an empty `TextNode` which offsets the index of all
-        // children. Definitely want to avoid this.
-        var textNode = node.firstChild;
-        if (textNode.data.length === 1) {
-          node.removeChild(textNode);
-        } else {
-          textNode.deleteData(0, 1);
-        }
-      } else {
-        node.innerHTML = html;
-      }
-    };
-  }
-}
-
-module.exports = setInnerHTML;
diff --git a/src/browser/ui/getReactRootElementInContainer.js b/src/browser/ui/getReactRootElementInContainer.js
deleted file mode 100644
index 3ecf18194dc..00000000000
--- a/src/browser/ui/getReactRootElementInContainer.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getReactRootElementInContainer
- */
-
-"use strict";
-
-var DOC_NODE_TYPE = 9;
-
-/**
- * @param {DOMElement|DOMDocument} container DOM element that may contain
- *                                           a React component
- * @return {?*} DOM element that may have the reactRoot ID, or null.
- */
-function getReactRootElementInContainer(container) {
-  if (!container) {
-    return null;
-  }
-
-  if (container.nodeType === DOC_NODE_TYPE) {
-    return container.documentElement;
-  } else {
-    return container.firstChild;
-  }
-}
-
-module.exports = getReactRootElementInContainer;
diff --git a/src/core/ReactComponent.js b/src/core/ReactComponent.js
deleted file mode 100644
index 355e65f667f..00000000000
--- a/src/core/ReactComponent.js
+++ /dev/null
@@ -1,446 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactComponent
- */
-
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-var ReactOwner = require('ReactOwner');
-var ReactUpdates = require('ReactUpdates');
-
-var invariant = require('invariant');
-var keyMirror = require('keyMirror');
-var merge = require('merge');
-
-/**
- * Every React component is in one of these life cycles.
- */
-var ComponentLifeCycle = keyMirror({
-  /**
-   * Mounted components have a DOM node representation and are capable of
-   * receiving new props.
-   */
-  MOUNTED: null,
-  /**
-   * Unmounted components are inactive and cannot receive new props.
-   */
-  UNMOUNTED: null
-});
-
-var injected = false;
-
-/**
- * Optionally injectable environment dependent cleanup hook. (server vs.
- * browser etc). Example: A browser system caches DOM nodes based on component
- * ID and must remove that cache entry when this instance is unmounted.
- *
- * @private
- */
-var unmountIDFromEnvironment = null;
-
-/**
- * The "image" of a component tree, is the platform specific (typically
- * serialized) data that represents a tree of lower level UI building blocks.
- * On the web, this "image" is HTML markup which describes a construction of
- * low level `div` and `span` nodes. Other platforms may have different
- * encoding of this "image". This must be injected.
- *
- * @private
- */
-var mountImageIntoNode = null;
-
-/**
- * Components are the basic units of composition in React.
- *
- * Every component accepts a set of keyed input parameters known as "props" that
- * are initialized by the constructor. Once a component is mounted, the props
- * can be mutated using `setProps` or `replaceProps`.
- *
- * Every component is capable of the following operations:
- *
- *   `mountComponent`
- *     Initializes the component, renders markup, and registers event listeners.
- *
- *   `receiveComponent`
- *     Updates the rendered DOM nodes to match the given component.
- *
- *   `unmountComponent`
- *     Releases any resources allocated by this component.
- *
- * Components can also be "owned" by other components. Being owned by another
- * component means being constructed by that component. This is different from
- * being the child of a component, which means having a DOM representation that
- * is a child of the DOM representation of that component.
- *
- * @class ReactComponent
- */
-var ReactComponent = {
-
-  injection: {
-    injectEnvironment: function(ReactComponentEnvironment) {
-      invariant(
-        !injected,
-        'ReactComponent: injectEnvironment() can only be called once.'
-      );
-      mountImageIntoNode = ReactComponentEnvironment.mountImageIntoNode;
-      unmountIDFromEnvironment =
-        ReactComponentEnvironment.unmountIDFromEnvironment;
-      ReactComponent.BackendIDOperations =
-        ReactComponentEnvironment.BackendIDOperations;
-      injected = true;
-    }
-  },
-
-  /**
-   * @internal
-   */
-  LifeCycle: ComponentLifeCycle,
-
-  /**
-   * Injected module that provides ability to mutate individual properties.
-   * Injected into the base class because many different subclasses need access
-   * to this.
-   *
-   * @internal
-   */
-  BackendIDOperations: null,
-
-  /**
-   * Base functionality for every ReactComponent constructor. Mixed into the
-   * `ReactComponent` prototype, but exposed statically for easy access.
-   *
-   * @lends {ReactComponent.prototype}
-   */
-  Mixin: {
-
-    /**
-     * Checks whether or not this component is mounted.
-     *
-     * @return {boolean} True if mounted, false otherwise.
-     * @final
-     * @protected
-     */
-    isMounted: function() {
-      return this._lifeCycleState === ComponentLifeCycle.MOUNTED;
-    },
-
-    /**
-     * Sets a subset of the props.
-     *
-     * @param {object} partialProps Subset of the next props.
-     * @param {?function} callback Called after props are updated.
-     * @final
-     * @public
-     */
-    setProps: function(partialProps, callback) {
-      // Merge with the pending descriptor if it exists, otherwise with existing
-      // descriptor props.
-      var descriptor = this._pendingDescriptor || this._descriptor;
-      this.replaceProps(
-        merge(descriptor.props, partialProps),
-        callback
-      );
-    },
-
-    /**
-     * Replaces all of the props.
-     *
-     * @param {object} props New props.
-     * @param {?function} callback Called after props are updated.
-     * @final
-     * @public
-     */
-    replaceProps: function(props, callback) {
-      invariant(
-        this.isMounted(),
-        'replaceProps(...): Can only update a mounted component.'
-      );
-      invariant(
-        this._mountDepth === 0,
-        'replaceProps(...): You called `setProps` or `replaceProps` on a ' +
-        'component with a parent. This is an anti-pattern since props will ' +
-        'get reactively updated when rendered. Instead, change the owner\'s ' +
-        '`render` method to pass the correct value as props to the component ' +
-        'where it is created.'
-      );
-      // This is a deoptimized path. We optimize for always having a descriptor.
-      // This creates an extra internal descriptor.
-      this._pendingDescriptor = ReactDescriptor.cloneAndReplaceProps(
-        this._pendingDescriptor || this._descriptor,
-        props
-      );
-      ReactUpdates.enqueueUpdate(this, callback);
-    },
-
-    /**
-     * Schedule a partial update to the props. Only used for internal testing.
-     *
-     * @param {object} partialProps Subset of the next props.
-     * @param {?function} callback Called after props are updated.
-     * @final
-     * @internal
-     */
-    _setPropsInternal: function(partialProps, callback) {
-      // This is a deoptimized path. We optimize for always having a descriptor.
-      // This creates an extra internal descriptor.
-      var descriptor = this._pendingDescriptor || this._descriptor;
-      this._pendingDescriptor = ReactDescriptor.cloneAndReplaceProps(
-        descriptor,
-        merge(descriptor.props, partialProps)
-      );
-      ReactUpdates.enqueueUpdate(this, callback);
-    },
-
-    /**
-     * Base constructor for all React components.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.construct.call(this, ...)`.
-     *
-     * @param {ReactDescriptor} descriptor
-     * @internal
-     */
-    construct: function(descriptor) {
-      // This is the public exposed props object after it has been processed
-      // with default props. The descriptor's props represents the true internal
-      // state of the props.
-      this.props = descriptor.props;
-      // Record the component responsible for creating this component.
-      // This is accessible through the descriptor but we maintain an extra
-      // field for compatibility with devtools and as a way to make an
-      // incremental update. TODO: Consider deprecating this field.
-      this._owner = descriptor._owner;
-
-      // All components start unmounted.
-      this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
-
-      // See ReactUpdates.
-      this._pendingCallbacks = null;
-
-      // We keep the old descriptor and a reference to the pending descriptor
-      // to track updates.
-      this._descriptor = descriptor;
-      this._pendingDescriptor = null;
-    },
-
-    /**
-     * Initializes the component, renders markup, and registers event listeners.
-     *
-     * NOTE: This does not insert any nodes into the DOM.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.mountComponent.call(this, ...)`.
-     *
-     * @param {string} rootID DOM ID of the root node.
-     * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-     * @param {number} mountDepth number of components in the owner hierarchy.
-     * @return {?string} Rendered markup to be inserted into the DOM.
-     * @internal
-     */
-    mountComponent: function(rootID, transaction, mountDepth) {
-      invariant(
-        !this.isMounted(),
-        'mountComponent(%s, ...): Can only mount an unmounted component. ' +
-        'Make sure to avoid storing components between renders or reusing a ' +
-        'single component instance in multiple places.',
-        rootID
-      );
-      var ref = this._descriptor.ref;
-      if (ref != null) {
-        var owner = this._descriptor._owner;
-        ReactOwner.addComponentAsRefTo(this, ref, owner);
-      }
-      this._rootNodeID = rootID;
-      this._lifeCycleState = ComponentLifeCycle.MOUNTED;
-      this._mountDepth = mountDepth;
-      // Effectively: return '';
-    },
-
-    /**
-     * Releases any resources allocated by `mountComponent`.
-     *
-     * NOTE: This does not remove any nodes from the DOM.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.unmountComponent.call(this)`.
-     *
-     * @internal
-     */
-    unmountComponent: function() {
-      invariant(
-        this.isMounted(),
-        'unmountComponent(): Can only unmount a mounted component.'
-      );
-      var ref = this._descriptor.ref;
-      if (ref != null) {
-        ReactOwner.removeComponentAsRefFrom(this, ref, this._owner);
-      }
-      unmountIDFromEnvironment(this._rootNodeID);
-      this._rootNodeID = null;
-      this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
-    },
-
-    /**
-     * Given a new instance of this component, updates the rendered DOM nodes
-     * as if that instance was rendered instead.
-     *
-     * Subclasses that override this method should make sure to invoke
-     * `ReactComponent.Mixin.receiveComponent.call(this, ...)`.
-     *
-     * @param {object} nextComponent Next set of properties.
-     * @param {ReactReconcileTransaction} transaction
-     * @internal
-     */
-    receiveComponent: function(nextDescriptor, transaction) {
-      invariant(
-        this.isMounted(),
-        'receiveComponent(...): Can only update a mounted component.'
-      );
-      this._pendingDescriptor = nextDescriptor;
-      this.performUpdateIfNecessary(transaction);
-    },
-
-    /**
-     * If `_pendingDescriptor` is set, update the component.
-     *
-     * @param {ReactReconcileTransaction} transaction
-     * @internal
-     */
-    performUpdateIfNecessary: function(transaction) {
-      if (this._pendingDescriptor == null) {
-        return;
-      }
-      var prevDescriptor = this._descriptor;
-      var nextDescriptor = this._pendingDescriptor;
-      this._descriptor = nextDescriptor;
-      this.props = nextDescriptor.props;
-      this._owner = nextDescriptor._owner;
-      this._pendingDescriptor = null;
-      this.updateComponent(transaction, prevDescriptor);
-    },
-
-    /**
-     * Updates the component's currently mounted representation.
-     *
-     * @param {ReactReconcileTransaction} transaction
-     * @param {object} prevDescriptor
-     * @internal
-     */
-    updateComponent: function(transaction, prevDescriptor) {
-      var nextDescriptor = this._descriptor;
-
-      // If either the owner or a `ref` has changed, make sure the newest owner
-      // has stored a reference to `this`, and the previous owner (if different)
-      // has forgotten the reference to `this`. We use the descriptor instead
-      // of the public this.props because the post processing cannot determine
-      // a ref. The ref conceptually lives on the descriptor.
-
-      // TODO: Should this even be possible? The owner cannot change because
-      // it's forbidden by shouldUpdateReactComponent. The ref can change
-      // if you swap the keys of but not the refs. Reconsider where this check
-      // is made. It probably belongs where the key checking and
-      // instantiateReactComponent is done.
-
-      if (nextDescriptor._owner !== prevDescriptor._owner ||
-          nextDescriptor.ref !== prevDescriptor.ref) {
-        if (prevDescriptor.ref != null) {
-          ReactOwner.removeComponentAsRefFrom(
-            this, prevDescriptor.ref, prevDescriptor._owner
-          );
-        }
-        // Correct, even if the owner is the same, and only the ref has changed.
-        if (nextDescriptor.ref != null) {
-          ReactOwner.addComponentAsRefTo(
-            this,
-            nextDescriptor.ref,
-            nextDescriptor._owner
-          );
-        }
-      }
-    },
-
-    /**
-     * Mounts this component and inserts it into the DOM.
-     *
-     * @param {string} rootID DOM ID of the root node.
-     * @param {DOMElement} container DOM element to mount into.
-     * @param {boolean} shouldReuseMarkup If true, do not insert markup
-     * @final
-     * @internal
-     * @see {ReactMount.renderComponent}
-     */
-    mountComponentIntoNode: function(rootID, container, shouldReuseMarkup) {
-      var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
-      transaction.perform(
-        this._mountComponentIntoNode,
-        this,
-        rootID,
-        container,
-        transaction,
-        shouldReuseMarkup
-      );
-      ReactUpdates.ReactReconcileTransaction.release(transaction);
-    },
-
-    /**
-     * @param {string} rootID DOM ID of the root node.
-     * @param {DOMElement} container DOM element to mount into.
-     * @param {ReactReconcileTransaction} transaction
-     * @param {boolean} shouldReuseMarkup If true, do not insert markup
-     * @final
-     * @private
-     */
-    _mountComponentIntoNode: function(
-        rootID,
-        container,
-        transaction,
-        shouldReuseMarkup) {
-      var markup = this.mountComponent(rootID, transaction, 0);
-      mountImageIntoNode(markup, container, shouldReuseMarkup);
-    },
-
-    /**
-     * Checks if this component is owned by the supplied `owner` component.
-     *
-     * @param {ReactComponent} owner Component to check.
-     * @return {boolean} True if `owners` owns this component.
-     * @final
-     * @internal
-     */
-    isOwnedBy: function(owner) {
-      return this._owner === owner;
-    },
-
-    /**
-     * Gets another component, that shares the same owner as this one, by ref.
-     *
-     * @param {string} ref of a sibling Component.
-     * @return {?ReactComponent} the actual sibling Component.
-     * @final
-     * @internal
-     */
-    getSiblingByRef: function(ref) {
-      var owner = this._owner;
-      if (!owner || !owner.refs) {
-        return null;
-      }
-      return owner.refs[ref];
-    }
-  }
-};
-
-module.exports = ReactComponent;
diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js
deleted file mode 100644
index 42a1dcb45b5..00000000000
--- a/src/core/ReactCompositeComponent.js
+++ /dev/null
@@ -1,1394 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactCompositeComponent
- */
-
-"use strict";
-
-var ReactComponent = require('ReactComponent');
-var ReactContext = require('ReactContext');
-var ReactCurrentOwner = require('ReactCurrentOwner');
-var ReactDescriptor = require('ReactDescriptor');
-var ReactDescriptorValidator = require('ReactDescriptorValidator');
-var ReactEmptyComponent = require('ReactEmptyComponent');
-var ReactErrorUtils = require('ReactErrorUtils');
-var ReactLegacyDescriptor = require('ReactLegacyDescriptor');
-var ReactOwner = require('ReactOwner');
-var ReactPerf = require('ReactPerf');
-var ReactPropTransferer = require('ReactPropTransferer');
-var ReactPropTypeLocations = require('ReactPropTypeLocations');
-var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');
-var ReactUpdates = require('ReactUpdates');
-
-var instantiateReactComponent = require('instantiateReactComponent');
-var invariant = require('invariant');
-var keyMirror = require('keyMirror');
-var merge = require('merge');
-var mixInto = require('mixInto');
-var monitorCodeUse = require('monitorCodeUse');
-var mapObject = require('mapObject');
-var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
-var warning = require('warning');
-
-/**
- * Policies that describe methods in `ReactCompositeComponentInterface`.
- */
-var SpecPolicy = keyMirror({
-  /**
-   * These methods may be defined only once by the class specification or mixin.
-   */
-  DEFINE_ONCE: null,
-  /**
-   * These methods may be defined by both the class specification and mixins.
-   * Subsequent definitions will be chained. These methods must return void.
-   */
-  DEFINE_MANY: null,
-  /**
-   * These methods are overriding the base ReactCompositeComponent class.
-   */
-  OVERRIDE_BASE: null,
-  /**
-   * These methods are similar to DEFINE_MANY, except we assume they return
-   * objects. We try to merge the keys of the return values of all the mixed in
-   * functions. If there is a key conflict we throw.
-   */
-  DEFINE_MANY_MERGED: null
-});
-
-
-var injectedMixins = [];
-
-/**
- * Composite components are higher-level components that compose other composite
- * or native components.
- *
- * To create a new type of `ReactCompositeComponent`, pass a specification of
- * your new class to `React.createClass`. The only requirement of your class
- * specification is that you implement a `render` method.
- *
- *   var MyComponent = React.createClass({
- *     render: function() {
- *       return <div>Hello World</div>;
- *     }
- *   });
- *
- * The class specification supports a specific protocol of methods that have
- * special meaning (e.g. `render`). See `ReactCompositeComponentInterface` for
- * more the comprehensive protocol. Any other properties and methods in the
- * class specification will available on the prototype.
- *
- * @interface ReactCompositeComponentInterface
- * @internal
- */
-var ReactCompositeComponentInterface = {
-
-  /**
-   * An array of Mixin objects to include when defining your component.
-   *
-   * @type {array}
-   * @optional
-   */
-  mixins: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * An object containing properties and methods that should be defined on
-   * the component's constructor instead of its prototype (static methods).
-   *
-   * @type {object}
-   * @optional
-   */
-  statics: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Definition of prop types for this component.
-   *
-   * @type {object}
-   * @optional
-   */
-  propTypes: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Definition of context types for this component.
-   *
-   * @type {object}
-   * @optional
-   */
-  contextTypes: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Definition of context types this component sets for its children.
-   *
-   * @type {object}
-   * @optional
-   */
-  childContextTypes: SpecPolicy.DEFINE_MANY,
-
-  // ==== Definition methods ====
-
-  /**
-   * Invoked when the component is mounted. Values in the mapping will be set on
-   * `this.props` if that prop is not specified (i.e. using an `in` check).
-   *
-   * This method is invoked before `getInitialState` and therefore cannot rely
-   * on `this.state` or use `this.setState`.
-   *
-   * @return {object}
-   * @optional
-   */
-  getDefaultProps: SpecPolicy.DEFINE_MANY_MERGED,
-
-  /**
-   * Invoked once before the component is mounted. The return value will be used
-   * as the initial value of `this.state`.
-   *
-   *   getInitialState: function() {
-   *     return {
-   *       isOn: false,
-   *       fooBaz: new BazFoo()
-   *     }
-   *   }
-   *
-   * @return {object}
-   * @optional
-   */
-  getInitialState: SpecPolicy.DEFINE_MANY_MERGED,
-
-  /**
-   * @return {object}
-   * @optional
-   */
-  getChildContext: SpecPolicy.DEFINE_MANY_MERGED,
-
-  /**
-   * Uses props from `this.props` and state from `this.state` to render the
-   * structure of the component.
-   *
-   * No guarantees are made about when or how often this method is invoked, so
-   * it must not have side effects.
-   *
-   *   render: function() {
-   *     var name = this.props.name;
-   *     return <div>Hello, {name}!</div>;
-   *   }
-   *
-   * @return {ReactComponent}
-   * @nosideeffects
-   * @required
-   */
-  render: SpecPolicy.DEFINE_ONCE,
-
-
-
-  // ==== Delegate methods ====
-
-  /**
-   * Invoked when the component is initially created and about to be mounted.
-   * This may have side effects, but any external subscriptions or data created
-   * by this method must be cleaned up in `componentWillUnmount`.
-   *
-   * @optional
-   */
-  componentWillMount: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Invoked when the component has been mounted and has a DOM representation.
-   * However, there is no guarantee that the DOM node is in the document.
-   *
-   * Use this as an opportunity to operate on the DOM when the component has
-   * been mounted (initialized and rendered) for the first time.
-   *
-   * @param {DOMElement} rootNode DOM element representing the component.
-   * @optional
-   */
-  componentDidMount: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Invoked before the component receives new props.
-   *
-   * Use this as an opportunity to react to a prop transition by updating the
-   * state using `this.setState`. Current props are accessed via `this.props`.
-   *
-   *   componentWillReceiveProps: function(nextProps, nextContext) {
-   *     this.setState({
-   *       likesIncreasing: nextProps.likeCount > this.props.likeCount
-   *     });
-   *   }
-   *
-   * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
-   * transition may cause a state change, but the opposite is not true. If you
-   * need it, you are probably looking for `componentWillUpdate`.
-   *
-   * @param {object} nextProps
-   * @optional
-   */
-  componentWillReceiveProps: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Invoked while deciding if the component should be updated as a result of
-   * receiving new props, state and/or context.
-   *
-   * Use this as an opportunity to `return false` when you're certain that the
-   * transition to the new props/state/context will not require a component
-   * update.
-   *
-   *   shouldComponentUpdate: function(nextProps, nextState, nextContext) {
-   *     return !equal(nextProps, this.props) ||
-   *       !equal(nextState, this.state) ||
-   *       !equal(nextContext, this.context);
-   *   }
-   *
-   * @param {object} nextProps
-   * @param {?object} nextState
-   * @param {?object} nextContext
-   * @return {boolean} True if the component should update.
-   * @optional
-   */
-  shouldComponentUpdate: SpecPolicy.DEFINE_ONCE,
-
-  /**
-   * Invoked when the component is about to update due to a transition from
-   * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
-   * and `nextContext`.
-   *
-   * Use this as an opportunity to perform preparation before an update occurs.
-   *
-   * NOTE: You **cannot** use `this.setState()` in this method.
-   *
-   * @param {object} nextProps
-   * @param {?object} nextState
-   * @param {?object} nextContext
-   * @param {ReactReconcileTransaction} transaction
-   * @optional
-   */
-  componentWillUpdate: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Invoked when the component's DOM representation has been updated.
-   *
-   * Use this as an opportunity to operate on the DOM when the component has
-   * been updated.
-   *
-   * @param {object} prevProps
-   * @param {?object} prevState
-   * @param {?object} prevContext
-   * @param {DOMElement} rootNode DOM element representing the component.
-   * @optional
-   */
-  componentDidUpdate: SpecPolicy.DEFINE_MANY,
-
-  /**
-   * Invoked when the component is about to be removed from its parent and have
-   * its DOM representation destroyed.
-   *
-   * Use this as an opportunity to deallocate any external resources.
-   *
-   * NOTE: There is no `componentDidUnmount` since your component will have been
-   * destroyed by that point.
-   *
-   * @optional
-   */
-  componentWillUnmount: SpecPolicy.DEFINE_MANY,
-
-
-
-  // ==== Advanced methods ====
-
-  /**
-   * Updates the component's currently mounted DOM representation.
-   *
-   * By default, this implements React's rendering and reconciliation algorithm.
-   * Sophisticated clients may wish to override this.
-   *
-   * @param {ReactReconcileTransaction} transaction
-   * @internal
-   * @overridable
-   */
-  updateComponent: SpecPolicy.OVERRIDE_BASE
-
-};
-
-/**
- * Mapping from class specification keys to special processing functions.
- *
- * Although these are declared like instance properties in the specification
- * when defining classes using `React.createClass`, they are actually static
- * and are accessible on the constructor instead of the prototype. Despite
- * being static, they must be defined outside of the "statics" key under
- * which all other static methods are defined.
- */
-var RESERVED_SPEC_KEYS = {
-  displayName: function(Constructor, displayName) {
-    Constructor.displayName = displayName;
-  },
-  mixins: function(Constructor, mixins) {
-    if (mixins) {
-      for (var i = 0; i < mixins.length; i++) {
-        mixSpecIntoComponent(Constructor, mixins[i]);
-      }
-    }
-  },
-  childContextTypes: function(Constructor, childContextTypes) {
-    validateTypeDef(
-      Constructor,
-      childContextTypes,
-      ReactPropTypeLocations.childContext
-    );
-    Constructor.childContextTypes = merge(
-      Constructor.childContextTypes,
-      childContextTypes
-    );
-  },
-  contextTypes: function(Constructor, contextTypes) {
-    validateTypeDef(
-      Constructor,
-      contextTypes,
-      ReactPropTypeLocations.context
-    );
-    Constructor.contextTypes = merge(Constructor.contextTypes, contextTypes);
-  },
-  /**
-   * Special case getDefaultProps which should move into statics but requires
-   * automatic merging.
-   */
-  getDefaultProps: function(Constructor, getDefaultProps) {
-    if (Constructor.getDefaultProps) {
-      Constructor.getDefaultProps = createMergedResultFunction(
-        Constructor.getDefaultProps,
-        getDefaultProps
-      );
-    } else {
-      Constructor.getDefaultProps = getDefaultProps;
-    }
-  },
-  propTypes: function(Constructor, propTypes) {
-    validateTypeDef(
-      Constructor,
-      propTypes,
-      ReactPropTypeLocations.prop
-    );
-    Constructor.propTypes = merge(Constructor.propTypes, propTypes);
-  },
-  statics: function(Constructor, statics) {
-    mixStaticSpecIntoComponent(Constructor, statics);
-  }
-};
-
-function getDeclarationErrorAddendum(component) {
-  var owner = component._owner || null;
-  if (owner && owner.constructor && owner.constructor.displayName) {
-    return ' Check the render method of `' + owner.constructor.displayName +
-      '`.';
-  }
-  return '';
-}
-
-function validateTypeDef(Constructor, typeDef, location) {
-  for (var propName in typeDef) {
-    if (typeDef.hasOwnProperty(propName)) {
-      invariant(
-        typeof typeDef[propName] == 'function',
-        '%s: %s type `%s` is invalid; it must be a function, usually from ' +
-        'React.PropTypes.',
-        Constructor.displayName || 'ReactCompositeComponent',
-        ReactPropTypeLocationNames[location],
-        propName
-      );
-    }
-  }
-}
-
-function validateMethodOverride(proto, name) {
-  var specPolicy = ReactCompositeComponentInterface.hasOwnProperty(name) ?
-    ReactCompositeComponentInterface[name] :
-    null;
-
-  // Disallow overriding of base class methods unless explicitly allowed.
-  if (ReactCompositeComponentMixin.hasOwnProperty(name)) {
-    invariant(
-      specPolicy === SpecPolicy.OVERRIDE_BASE,
-      'ReactCompositeComponentInterface: You are attempting to override ' +
-      '`%s` from your class specification. Ensure that your method names ' +
-      'do not overlap with React methods.',
-      name
-    );
-  }
-
-  // Disallow defining methods more than once unless explicitly allowed.
-  if (proto.hasOwnProperty(name)) {
-    invariant(
-      specPolicy === SpecPolicy.DEFINE_MANY ||
-      specPolicy === SpecPolicy.DEFINE_MANY_MERGED,
-      'ReactCompositeComponentInterface: You are attempting to define ' +
-      '`%s` on your component more than once. This conflict may be due ' +
-      'to a mixin.',
-      name
-    );
-  }
-}
-
-function validateLifeCycleOnReplaceState(instance) {
-  var compositeLifeCycleState = instance._compositeLifeCycleState;
-  invariant(
-    instance.isMounted() ||
-      compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
-    'replaceState(...): Can only update a mounted or mounting component.'
-  );
-  invariant(
-    ReactCurrentOwner.current == null,
-    'replaceState(...): Cannot update during an existing state transition ' +
-    '(such as within `render`). Render methods should be a pure function ' +
-    'of props and state.'
-  );
-  invariant(compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING,
-    'replaceState(...): Cannot update while unmounting component. This ' +
-    'usually means you called setState() on an unmounted component.'
-  );
-}
-
-/**
- * Custom version of `mixInto` which handles policy validation and reserved
- * specification keys when building `ReactCompositeComponent` classses.
- */
-function mixSpecIntoComponent(Constructor, spec) {
-  invariant(
-    !ReactDescriptor.isValidFactory(spec),
-    'ReactCompositeComponent: You\'re attempting to ' +
-    'use a component class as a mixin. Instead, just use a regular object.'
-  );
-  invariant(
-    !ReactDescriptor.isValidDescriptor(spec),
-    'ReactCompositeComponent: You\'re attempting to ' +
-    'use a component as a mixin. Instead, just use a regular object.'
-  );
-
-  var proto = Constructor.prototype;
-  for (var name in spec) {
-    var property = spec[name];
-    if (!spec.hasOwnProperty(name)) {
-      continue;
-    }
-
-    validateMethodOverride(proto, name);
-
-    if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
-      RESERVED_SPEC_KEYS[name](Constructor, property);
-    } else {
-      // Setup methods on prototype:
-      // The following member methods should not be automatically bound:
-      // 1. Expected ReactCompositeComponent methods (in the "interface").
-      // 2. Overridden methods (that were mixed in).
-      var isCompositeComponentMethod =
-        ReactCompositeComponentInterface.hasOwnProperty(name);
-      var isAlreadyDefined = proto.hasOwnProperty(name);
-      var markedDontBind = property && property.__reactDontBind;
-      var isFunction = typeof property === 'function';
-      var shouldAutoBind =
-        isFunction &&
-        !isCompositeComponentMethod &&
-        !isAlreadyDefined &&
-        !markedDontBind;
-
-      if (shouldAutoBind) {
-        if (!proto.__reactAutoBindMap) {
-          proto.__reactAutoBindMap = {};
-        }
-        proto.__reactAutoBindMap[name] = property;
-        proto[name] = property;
-      } else {
-        if (isAlreadyDefined) {
-          var specPolicy = ReactCompositeComponentInterface[name];
-
-          // These cases should already be caught by validateMethodOverride
-          invariant(
-            isCompositeComponentMethod && (
-              specPolicy === SpecPolicy.DEFINE_MANY_MERGED ||
-              specPolicy === SpecPolicy.DEFINE_MANY
-            ),
-            'ReactCompositeComponent: Unexpected spec policy %s for key %s ' +
-            'when mixing in component specs.',
-            specPolicy,
-            name
-          );
-
-          // For methods which are defined more than once, call the existing
-          // methods before calling the new property, merging if appropriate.
-          if (specPolicy === SpecPolicy.DEFINE_MANY_MERGED) {
-            proto[name] = createMergedResultFunction(proto[name], property);
-          } else if (specPolicy === SpecPolicy.DEFINE_MANY) {
-            proto[name] = createChainedFunction(proto[name], property);
-          }
-        } else {
-          proto[name] = property;
-          if (__DEV__) {
-            // Add verbose displayName to the function, which helps when looking
-            // at profiling tools.
-            if (typeof property === 'function' && spec.displayName) {
-              proto[name].displayName = spec.displayName + '_' + name;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-function mixStaticSpecIntoComponent(Constructor, statics) {
-  if (!statics) {
-    return;
-  }
-  for (var name in statics) {
-    var property = statics[name];
-    if (!statics.hasOwnProperty(name)) {
-      continue;
-    }
-
-    var isInherited = name in Constructor;
-    var result = property;
-    if (isInherited) {
-      var existingProperty = Constructor[name];
-      var existingType = typeof existingProperty;
-      var propertyType = typeof property;
-      invariant(
-        existingType === 'function' && propertyType === 'function',
-        'ReactCompositeComponent: You are attempting to define ' +
-        '`%s` on your component more than once, but that is only supported ' +
-        'for functions, which are chained together. This conflict may be ' +
-        'due to a mixin.',
-        name
-      );
-      result = createChainedFunction(existingProperty, property);
-    }
-    Constructor[name] = result;
-  }
-}
-
-/**
- * Merge two objects, but throw if both contain the same key.
- *
- * @param {object} one The first object, which is mutated.
- * @param {object} two The second object
- * @return {object} one after it has been mutated to contain everything in two.
- */
-function mergeObjectsWithNoDuplicateKeys(one, two) {
-  invariant(
-    one && two && typeof one === 'object' && typeof two === 'object',
-    'mergeObjectsWithNoDuplicateKeys(): Cannot merge non-objects'
-  );
-
-  mapObject(two, function(value, key) {
-    invariant(
-      one[key] === undefined,
-      'mergeObjectsWithNoDuplicateKeys(): ' +
-      'Tried to merge two objects with the same key: %s',
-      key
-    );
-    one[key] = value;
-  });
-  return one;
-}
-
-/**
- * Creates a function that invokes two functions and merges their return values.
- *
- * @param {function} one Function to invoke first.
- * @param {function} two Function to invoke second.
- * @return {function} Function that invokes the two argument functions.
- * @private
- */
-function createMergedResultFunction(one, two) {
-  return function mergedResult() {
-    var a = one.apply(this, arguments);
-    var b = two.apply(this, arguments);
-    if (a == null) {
-      return b;
-    } else if (b == null) {
-      return a;
-    }
-    return mergeObjectsWithNoDuplicateKeys(a, b);
-  };
-}
-
-/**
- * Creates a function that invokes two functions and ignores their return vales.
- *
- * @param {function} one Function to invoke first.
- * @param {function} two Function to invoke second.
- * @return {function} Function that invokes the two argument functions.
- * @private
- */
-function createChainedFunction(one, two) {
-  return function chainedFunction() {
-    one.apply(this, arguments);
-    two.apply(this, arguments);
-  };
-}
-
-/**
- * `ReactCompositeComponent` maintains an auxiliary life cycle state in
- * `this._compositeLifeCycleState` (which can be null).
- *
- * This is different from the life cycle state maintained by `ReactComponent` in
- * `this._lifeCycleState`. The following diagram shows how the states overlap in
- * time. There are times when the CompositeLifeCycle is null - at those times it
- * is only meaningful to look at ComponentLifeCycle alone.
- *
- * Top Row: ReactComponent.ComponentLifeCycle
- * Low Row: ReactComponent.CompositeLifeCycle
- *
- * +-------+---------------------------------+--------+
- * |  UN   |             MOUNTED             |   UN   |
- * |MOUNTED|                                 | MOUNTED|
- * +-------+---------------------------------+--------+
- * |       ^--------+   +-------+   +--------^        |
- * |       |        |   |       |   |        |        |
- * |    0--|MOUNTING|-0-|RECEIVE|-0-|   UN   |--->0   |
- * |       |        |   |PROPS  |   |MOUNTING|        |
- * |       |        |   |       |   |        |        |
- * |       |        |   |       |   |        |        |
- * |       +--------+   +-------+   +--------+        |
- * |       |                                 |        |
- * +-------+---------------------------------+--------+
- */
-var CompositeLifeCycle = keyMirror({
-  /**
-   * Components in the process of being mounted respond to state changes
-   * differently.
-   */
-  MOUNTING: null,
-  /**
-   * Components in the process of being unmounted are guarded against state
-   * changes.
-   */
-  UNMOUNTING: null,
-  /**
-   * Components that are mounted and receiving new props respond to state
-   * changes differently.
-   */
-  RECEIVING_PROPS: null
-});
-
-/**
- * @lends {ReactCompositeComponent.prototype}
- */
-var ReactCompositeComponentMixin = {
-
-  /**
-   * Base constructor for all composite component.
-   *
-   * @param {ReactDescriptor} descriptor
-   * @final
-   * @internal
-   */
-  construct: function(descriptor) {
-    // Children can be either an array or more than one argument
-    ReactComponent.Mixin.construct.apply(this, arguments);
-    ReactOwner.Mixin.construct.apply(this, arguments);
-
-    this.state = null;
-    this._pendingState = null;
-
-    // This is the public post-processed context. The real context and pending
-    // context lives on the descriptor.
-    this.context = null;
-
-    this._compositeLifeCycleState = null;
-  },
-
-  /**
-   * Checks whether or not this composite component is mounted.
-   * @return {boolean} True if mounted, false otherwise.
-   * @protected
-   * @final
-   */
-  isMounted: function() {
-    return ReactComponent.Mixin.isMounted.call(this) &&
-      this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING;
-  },
-
-  /**
-   * Initializes the component, renders markup, and registers event listeners.
-   *
-   * @param {string} rootID DOM ID of the root node.
-   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
-   * @param {number} mountDepth number of components in the owner hierarchy
-   * @return {?string} Rendered markup to be inserted into the DOM.
-   * @final
-   * @internal
-   */
-  mountComponent: ReactPerf.measure(
-    'ReactCompositeComponent',
-    'mountComponent',
-    function(rootID, transaction, mountDepth) {
-      ReactComponent.Mixin.mountComponent.call(
-        this,
-        rootID,
-        transaction,
-        mountDepth
-      );
-      this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;
-
-      if (this.__reactAutoBindMap) {
-        this._bindAutoBindMethods();
-      }
-
-      this.context = this._processContext(this._descriptor._context);
-      this.props = this._processProps(this.props);
-
-      this.state = this.getInitialState ? this.getInitialState() : null;
-      invariant(
-        typeof this.state === 'object' && !Array.isArray(this.state),
-        '%s.getInitialState(): must return an object or null',
-        this.constructor.displayName || 'ReactCompositeComponent'
-      );
-
-      this._pendingState = null;
-      this._pendingForceUpdate = false;
-
-      if (this.componentWillMount) {
-        this.componentWillMount();
-        // When mounting, calls to `setState` by `componentWillMount` will set
-        // `this._pendingState` without triggering a re-render.
-        if (this._pendingState) {
-          this.state = this._pendingState;
-          this._pendingState = null;
-        }
-      }
-
-      this._renderedComponent = instantiateReactComponent(
-        this._renderValidatedComponent()
-      );
-
-      // Done with mounting, `setState` will now trigger UI changes.
-      this._compositeLifeCycleState = null;
-      var markup = this._renderedComponent.mountComponent(
-        rootID,
-        transaction,
-        mountDepth + 1
-      );
-      if (this.componentDidMount) {
-        transaction.getReactMountReady().enqueue(this.componentDidMount, this);
-      }
-      return markup;
-    }
-  ),
-
-  /**
-   * Releases any resources allocated by `mountComponent`.
-   *
-   * @final
-   * @internal
-   */
-  unmountComponent: function() {
-    this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING;
-    if (this.componentWillUnmount) {
-      this.componentWillUnmount();
-    }
-    this._compositeLifeCycleState = null;
-
-    this._renderedComponent.unmountComponent();
-    this._renderedComponent = null;
-
-    ReactComponent.Mixin.unmountComponent.call(this);
-
-    // Some existing components rely on this.props even after they've been
-    // destroyed (in event handlers).
-    // TODO: this.props = null;
-    // TODO: this.state = null;
-  },
-
-  /**
-   * Sets a subset of the state. Always use this or `replaceState` to mutate
-   * state. You should treat `this.state` as immutable.
-   *
-   * There is no guarantee that `this.state` will be immediately updated, so
-   * accessing `this.state` after calling this method may return the old value.
-   *
-   * There is no guarantee that calls to `setState` will run synchronously,
-   * as they may eventually be batched together.  You can provide an optional
-   * callback that will be executed when the call to setState is actually
-   * completed.
-   *
-   * @param {object} partialState Next partial state to be merged with state.
-   * @param {?function} callback Called after state is updated.
-   * @final
-   * @protected
-   */
-  setState: function(partialState, callback) {
-    invariant(
-      typeof partialState === 'object' || partialState == null,
-      'setState(...): takes an object of state variables to update.'
-    );
-    if (__DEV__){
-      warning(
-        partialState != null,
-        'setState(...): You passed an undefined or null state object; ' +
-        'instead, use forceUpdate().'
-      );
-    }
-    // Merge with `_pendingState` if it exists, otherwise with existing state.
-    this.replaceState(
-      merge(this._pendingState || this.state, partialState),
-      callback
-    );
-  },
-
-  /**
-   * Replaces all of the state. Always use this or `setState` to mutate state.
-   * You should treat `this.state` as immutable.
-   *
-   * There is no guarantee that `this.state` will be immediately updated, so
-   * accessing `this.state` after calling this method may return the old value.
-   *
-   * @param {object} completeState Next state.
-   * @param {?function} callback Called after state is updated.
-   * @final
-   * @protected
-   */
-  replaceState: function(completeState, callback) {
-    validateLifeCycleOnReplaceState(this);
-    this._pendingState = completeState;
-    if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) {
-      // If we're in a componentWillMount handler, don't enqueue a rerender
-      // because ReactUpdates assumes we're in a browser context (which is wrong
-      // for server rendering) and we're about to do a render anyway.
-      // TODO: The callback here is ignored when setState is called from
-      // componentWillMount. Either fix it or disallow doing so completely in
-      // favor of getInitialState.
-      ReactUpdates.enqueueUpdate(this, callback);
-    }
-  },
-
-  /**
-   * Filters the context object to only contain keys specified in
-   * `contextTypes`, and asserts that they are valid.
-   *
-   * @param {object} context
-   * @return {?object}
-   * @private
-   */
-  _processContext: function(context) {
-    var maskedContext = null;
-    var contextTypes = this.constructor.contextTypes;
-    if (contextTypes) {
-      maskedContext = {};
-      for (var contextName in contextTypes) {
-        maskedContext[contextName] = context[contextName];
-      }
-      if (__DEV__) {
-        this._checkPropTypes(
-          contextTypes,
-          maskedContext,
-          ReactPropTypeLocations.context
-        );
-      }
-    }
-    return maskedContext;
-  },
-
-  /**
-   * @param {object} currentContext
-   * @return {object}
-   * @private
-   */
-  _processChildContext: function(currentContext) {
-    var childContext = this.getChildContext && this.getChildContext();
-    var displayName = this.constructor.displayName || 'ReactCompositeComponent';
-    if (childContext) {
-      invariant(
-        typeof this.constructor.childContextTypes === 'object',
-        '%s.getChildContext(): childContextTypes must be defined in order to ' +
-        'use getChildContext().',
-        displayName
-      );
-      if (__DEV__) {
-        this._checkPropTypes(
-          this.constructor.childContextTypes,
-          childContext,
-          ReactPropTypeLocations.childContext
-        );
-      }
-      for (var name in childContext) {
-        invariant(
-          name in this.constructor.childContextTypes,
-          '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-          displayName,
-          name
-        );
-      }
-      return merge(currentContext, childContext);
-    }
-    return currentContext;
-  },
-
-  /**
-   * Processes props by setting default values for unspecified props and
-   * asserting that the props are valid. Does not mutate its argument; returns
-   * a new props object with defaults merged in.
-   *
-   * @param {object} newProps
-   * @return {object}
-   * @private
-   */
-  _processProps: function(newProps) {
-    if (__DEV__) {
-      var propTypes = this.constructor.propTypes;
-      if (propTypes) {
-        this._checkPropTypes(propTypes, newProps, ReactPropTypeLocations.prop);
-      }
-    }
-    return newProps;
-  },
-
-  /**
-   * Assert that the props are valid
-   *
-   * @param {object} propTypes Map of prop name to a ReactPropType
-   * @param {object} props
-   * @param {string} location e.g. "prop", "context", "child context"
-   * @private
-   */
-  _checkPropTypes: function(propTypes, props, location) {
-    // TODO: Stop validating prop types here and only use the descriptor
-    // validation.
-    var componentName = this.constructor.displayName;
-    for (var propName in propTypes) {
-      if (propTypes.hasOwnProperty(propName)) {
-        var error =
-          propTypes[propName](props, propName, componentName, location);
-        if (error instanceof Error) {
-          // We may want to extend this logic for similar errors in
-          // renderComponent calls, so I'm abstracting it away into
-          // a function to minimize refactoring in the future
-          var addendum = getDeclarationErrorAddendum(this);
-          warning(false, error.message + addendum);
-        }
-      }
-    }
-  },
-
-  /**
-   * If any of `_pendingDescriptor`, `_pendingState`, or `_pendingForceUpdate`
-   * is set, update the component.
-   *
-   * @param {ReactReconcileTransaction} transaction
-   * @internal
-   */
-  performUpdateIfNecessary: function(transaction) {
-    var compositeLifeCycleState = this._compositeLifeCycleState;
-    // Do not trigger a state transition if we are in the middle of mounting or
-    // receiving props because both of those will already be doing this.
-    if (compositeLifeCycleState === CompositeLifeCycle.MOUNTING ||
-        compositeLifeCycleState === CompositeLifeCycle.RECEIVING_PROPS) {
-      return;
-    }
-
-    if (this._pendingDescriptor == null &&
-        this._pendingState == null &&
-        !this._pendingForceUpdate) {
-      return;
-    }
-
-    var nextContext = this.context;
-    var nextProps = this.props;
-    var nextDescriptor = this._descriptor;
-    if (this._pendingDescriptor != null) {
-      nextDescriptor = this._pendingDescriptor;
-      nextContext = this._processContext(nextDescriptor._context);
-      nextProps = this._processProps(nextDescriptor.props);
-      this._pendingDescriptor = null;
-
-      this._compositeLifeCycleState = CompositeLifeCycle.RECEIVING_PROPS;
-      if (this.componentWillReceiveProps) {
-        this.componentWillReceiveProps(nextProps, nextContext);
-      }
-    }
-
-    this._compositeLifeCycleState = null;
-
-    var nextState = this._pendingState || this.state;
-    this._pendingState = null;
-
-    var shouldUpdate =
-      this._pendingForceUpdate ||
-      !this.shouldComponentUpdate ||
-      this.shouldComponentUpdate(nextProps, nextState, nextContext);
-
-    if (__DEV__) {
-      if (typeof shouldUpdate === "undefined") {
-        console.warn(
-          (this.constructor.displayName || 'ReactCompositeComponent') +
-          '.shouldComponentUpdate(): Returned undefined instead of a ' +
-          'boolean value. Make sure to return true or false.'
-        );
-      }
-    }
-
-    if (shouldUpdate) {
-      this._pendingForceUpdate = false;
-      // Will set `this.props`, `this.state` and `this.context`.
-      this._performComponentUpdate(
-        nextDescriptor,
-        nextProps,
-        nextState,
-        nextContext,
-        transaction
-      );
-    } else {
-      // If it's determined that a component should not update, we still want
-      // to set props and state.
-      this._descriptor = nextDescriptor;
-      this.props = nextProps;
-      this.state = nextState;
-      this.context = nextContext;
-
-      // Owner cannot change because shouldUpdateReactComponent doesn't allow
-      // it. TODO: Remove this._owner completely.
-      this._owner = nextDescriptor._owner;
-    }
-  },
-
-  /**
-   * Merges new props and state, notifies delegate methods of update and
-   * performs update.
-   *
-   * @param {ReactDescriptor} nextDescriptor Next descriptor
-   * @param {object} nextProps Next public object to set as properties.
-   * @param {?object} nextState Next object to set as state.
-   * @param {?object} nextContext Next public object to set as context.
-   * @param {ReactReconcileTransaction} transaction
-   * @private
-   */
-  _performComponentUpdate: function(
-    nextDescriptor,
-    nextProps,
-    nextState,
-    nextContext,
-    transaction
-  ) {
-    var prevDescriptor = this._descriptor;
-    var prevProps = this.props;
-    var prevState = this.state;
-    var prevContext = this.context;
-
-    if (this.componentWillUpdate) {
-      this.componentWillUpdate(nextProps, nextState, nextContext);
-    }
-
-    this._descriptor = nextDescriptor;
-    this.props = nextProps;
-    this.state = nextState;
-    this.context = nextContext;
-
-    // Owner cannot change because shouldUpdateReactComponent doesn't allow
-    // it. TODO: Remove this._owner completely.
-    this._owner = nextDescriptor._owner;
-
-    this.updateComponent(
-      transaction,
-      prevDescriptor
-    );
-
-    if (this.componentDidUpdate) {
-      transaction.getReactMountReady().enqueue(
-        this.componentDidUpdate.bind(this, prevProps, prevState, prevContext),
-        this
-      );
-    }
-  },
-
-  receiveComponent: function(nextDescriptor, transaction) {
-    if (nextDescriptor === this._descriptor &&
-        nextDescriptor._owner != null) {
-      // Since descriptors are immutable after the owner is rendered,
-      // we can do a cheap identity compare here to determine if this is a
-      // superfluous reconcile. It's possible for state to be mutable but such
-      // change should trigger an update of the owner which would recreate
-      // the descriptor. We explicitly check for the existence of an owner since
-      // it's possible for a descriptor created outside a composite to be
-      // deeply mutated and reused.
-      return;
-    }
-
-    ReactComponent.Mixin.receiveComponent.call(
-      this,
-      nextDescriptor,
-      transaction
-    );
-  },
-
-  /**
-   * Updates the component's currently mounted DOM representation.
-   *
-   * By default, this implements React's rendering and reconciliation algorithm.
-   * Sophisticated clients may wish to override this.
-   *
-   * @param {ReactReconcileTransaction} transaction
-   * @param {ReactDescriptor} prevDescriptor
-   * @internal
-   * @overridable
-   */
-  updateComponent: ReactPerf.measure(
-    'ReactCompositeComponent',
-    'updateComponent',
-    function(transaction, prevParentDescriptor) {
-      ReactComponent.Mixin.updateComponent.call(
-        this,
-        transaction,
-        prevParentDescriptor
-      );
-
-      var prevComponentInstance = this._renderedComponent;
-      var prevDescriptor = prevComponentInstance._descriptor;
-      var nextDescriptor = this._renderValidatedComponent();
-      if (shouldUpdateReactComponent(prevDescriptor, nextDescriptor)) {
-        prevComponentInstance.receiveComponent(nextDescriptor, transaction);
-      } else {
-        // These two IDs are actually the same! But nothing should rely on that.
-        var thisID = this._rootNodeID;
-        var prevComponentID = prevComponentInstance._rootNodeID;
-        prevComponentInstance.unmountComponent();
-        this._renderedComponent = instantiateReactComponent(nextDescriptor);
-        var nextMarkup = this._renderedComponent.mountComponent(
-          thisID,
-          transaction,
-          this._mountDepth + 1
-        );
-        ReactComponent.BackendIDOperations.dangerouslyReplaceNodeWithMarkupByID(
-          prevComponentID,
-          nextMarkup
-        );
-      }
-    }
-  ),
-
-  /**
-   * Forces an update. This should only be invoked when it is known with
-   * certainty that we are **not** in a DOM transaction.
-   *
-   * You may want to call this when you know that some deeper aspect of the
-   * component's state has changed but `setState` was not called.
-   *
-   * This will not invoke `shouldUpdateComponent`, but it will invoke
-   * `componentWillUpdate` and `componentDidUpdate`.
-   *
-   * @param {?function} callback Called after update is complete.
-   * @final
-   * @protected
-   */
-  forceUpdate: function(callback) {
-    var compositeLifeCycleState = this._compositeLifeCycleState;
-    invariant(
-      this.isMounted() ||
-        compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
-      'forceUpdate(...): Can only force an update on mounted or mounting ' +
-        'components.'
-    );
-    invariant(
-      compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING &&
-      ReactCurrentOwner.current == null,
-      'forceUpdate(...): Cannot force an update while unmounting component ' +
-      'or within a `render` function.'
-    );
-    this._pendingForceUpdate = true;
-    ReactUpdates.enqueueUpdate(this, callback);
-  },
-
-  /**
-   * @private
-   */
-  _renderValidatedComponent: ReactPerf.measure(
-    'ReactCompositeComponent',
-    '_renderValidatedComponent',
-    function() {
-      var renderedComponent;
-      var previousContext = ReactContext.current;
-      ReactContext.current = this._processChildContext(
-        this._descriptor._context
-      );
-      ReactCurrentOwner.current = this;
-      try {
-        renderedComponent = this.render();
-        if (renderedComponent === null || renderedComponent === false) {
-          renderedComponent = ReactEmptyComponent.getEmptyComponent();
-          ReactEmptyComponent.registerNullComponentID(this._rootNodeID);
-        } else {
-          ReactEmptyComponent.deregisterNullComponentID(this._rootNodeID);
-        }
-      } finally {
-        ReactContext.current = previousContext;
-        ReactCurrentOwner.current = null;
-      }
-      invariant(
-        ReactDescriptor.isValidDescriptor(renderedComponent),
-        '%s.render(): A valid ReactComponent must be returned. You may have ' +
-          'returned undefined, an array or some other invalid object.',
-        this.constructor.displayName || 'ReactCompositeComponent'
-      );
-      return renderedComponent;
-    }
-  ),
-
-  /**
-   * @private
-   */
-  _bindAutoBindMethods: function() {
-    for (var autoBindKey in this.__reactAutoBindMap) {
-      if (!this.__reactAutoBindMap.hasOwnProperty(autoBindKey)) {
-        continue;
-      }
-      var method = this.__reactAutoBindMap[autoBindKey];
-      this[autoBindKey] = this._bindAutoBindMethod(ReactErrorUtils.guard(
-        method,
-        this.constructor.displayName + '.' + autoBindKey
-      ));
-    }
-  },
-
-  /**
-   * Binds a method to the component.
-   *
-   * @param {function} method Method to be bound.
-   * @private
-   */
-  _bindAutoBindMethod: function(method) {
-    var component = this;
-    var boundMethod = method.bind(component);
-    if (__DEV__) {
-      boundMethod.__reactBoundContext = component;
-      boundMethod.__reactBoundMethod = method;
-      boundMethod.__reactBoundArguments = null;
-      var componentName = component.constructor.displayName;
-      var _bind = boundMethod.bind;
-      boundMethod.bind = function(newThis, ...args) {
-        // User is trying to bind() an autobound method; we effectively will
-        // ignore the value of "this" that the user is trying to use, so
-        // let's warn.
-        if (newThis !== component && newThis !== null) {
-          monitorCodeUse('react_bind_warning', { component: componentName });
-          console.warn(
-            'bind(): React component methods may only be bound to the ' +
-            'component instance. See ' + componentName
-          );
-        } else if (!args.length) {
-          monitorCodeUse('react_bind_warning', { component: componentName });
-          console.warn(
-            'bind(): You are binding a component method to the component. ' +
-            'React does this for you automatically in a high-performance ' +
-            'way, so you can safely remove this call. See ' + componentName
-          );
-          return boundMethod;
-        }
-        var reboundMethod = _bind.apply(boundMethod, arguments);
-        reboundMethod.__reactBoundContext = component;
-        reboundMethod.__reactBoundMethod = method;
-        reboundMethod.__reactBoundArguments = args;
-        return reboundMethod;
-      };
-    }
-    return boundMethod;
-  }
-};
-
-var ReactCompositeComponentBase = function() {};
-mixInto(ReactCompositeComponentBase, ReactComponent.Mixin);
-mixInto(ReactCompositeComponentBase, ReactOwner.Mixin);
-mixInto(ReactCompositeComponentBase, ReactPropTransferer.Mixin);
-mixInto(ReactCompositeComponentBase, ReactCompositeComponentMixin);
-
-/**
- * Module for creating composite components.
- *
- * @class ReactCompositeComponent
- * @extends ReactComponent
- * @extends ReactOwner
- * @extends ReactPropTransferer
- */
-var ReactCompositeComponent = {
-
-  LifeCycle: CompositeLifeCycle,
-
-  Base: ReactCompositeComponentBase,
-
-  /**
-   * Creates a composite component class given a class specification.
-   *
-   * @param {object} spec Class specification (which must define `render`).
-   * @return {function} Component constructor function.
-   * @public
-   */
-  createClass: function(spec) {
-    var Constructor = function(props, owner) {
-      this.construct(props, owner);
-    };
-    Constructor.prototype = new ReactCompositeComponentBase();
-    Constructor.prototype.constructor = Constructor;
-
-    injectedMixins.forEach(
-      mixSpecIntoComponent.bind(null, Constructor)
-    );
-
-    mixSpecIntoComponent(Constructor, spec);
-
-    // Initialize the defaultProps property after all mixins have been merged
-    if (Constructor.getDefaultProps) {
-      Constructor.defaultProps = Constructor.getDefaultProps();
-    }
-
-    invariant(
-      Constructor.prototype.render,
-      'createClass(...): Class specification must implement a `render` method.'
-    );
-
-    if (__DEV__) {
-      if (Constructor.prototype.componentShouldUpdate) {
-        monitorCodeUse(
-          'react_component_should_update_warning',
-          { component: spec.displayName }
-        );
-        console.warn(
-          (spec.displayName || '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.'
-         );
-      }
-    }
-
-    // Reduce time spent doing lookups by setting these on the prototype.
-    for (var methodName in ReactCompositeComponentInterface) {
-      if (!Constructor.prototype[methodName]) {
-        Constructor.prototype[methodName] = null;
-      }
-    }
-
-    if (__DEV__) {
-      return ReactLegacyDescriptor.wrapFactory(
-        ReactDescriptorValidator.createFactory(Constructor)
-      );
-    }
-    return ReactLegacyDescriptor.wrapFactory(
-      ReactDescriptor.createFactory(Constructor)
-    );
-  },
-
-  injection: {
-    injectMixin: function(mixin) {
-      injectedMixins.push(mixin);
-    }
-  }
-};
-
-module.exports = ReactCompositeComponent;
diff --git a/src/core/ReactContext.js b/src/core/ReactContext.js
deleted file mode 100644
index 18ce40fe3b5..00000000000
--- a/src/core/ReactContext.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactContext
- */
-
-"use strict";
-
-var merge = require('merge');
-
-/**
- * Keeps track of the current context.
- *
- * The context is automatically passed down the component ownership hierarchy
- * and is accessible via `this.context` on ReactCompositeComponents.
- */
-var ReactContext = {
-
-  /**
-   * @internal
-   * @type {object}
-   */
-  current: {},
-
-  /**
-   * Temporarily extends the current context while executing scopedCallback.
-   *
-   * A typical use case might look like
-   *
-   *  render: function() {
-   *    var children = ReactContext.withContext({foo: 'foo'}, () => (
-   *
-   *    ));
-   *    return <div>{children}</div>;
-   *  }
-   *
-   * @param {object} newContext New context to merge into the existing context
-   * @param {function} scopedCallback Callback to run with the new context
-   * @return {ReactComponent|array<ReactComponent>}
-   */
-  withContext: function(newContext, scopedCallback) {
-    var result;
-    var previousContext = ReactContext.current;
-    ReactContext.current = merge(previousContext, newContext);
-    try {
-      result = scopedCallback();
-    } finally {
-      ReactContext.current = previousContext;
-    }
-    return result;
-  }
-
-};
-
-module.exports = ReactContext;
diff --git a/src/core/ReactCurrentOwner.js b/src/core/ReactCurrentOwner.js
deleted file mode 100644
index b2da9d1c69f..00000000000
--- a/src/core/ReactCurrentOwner.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactCurrentOwner
- */
-
-"use strict";
-
-/**
- * Keeps track of the current owner.
- *
- * The current owner is the component who should own any components that are
- * currently being constructed.
- *
- * The depth indicate how many composite components are above this render level.
- */
-var ReactCurrentOwner = {
-
-  /**
-   * @internal
-   * @type {ReactComponent}
-   */
-  current: null
-
-};
-
-module.exports = ReactCurrentOwner;
diff --git a/src/core/ReactDefaultBatchingStrategy.js b/src/core/ReactDefaultBatchingStrategy.js
deleted file mode 100644
index f88e9e7732e..00000000000
--- a/src/core/ReactDefaultBatchingStrategy.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDefaultBatchingStrategy
- */
-
-"use strict";
-
-var ReactUpdates = require('ReactUpdates');
-var Transaction = require('Transaction');
-
-var emptyFunction = require('emptyFunction');
-var mixInto = require('mixInto');
-
-var RESET_BATCHED_UPDATES = {
-  initialize: emptyFunction,
-  close: function() {
-    ReactDefaultBatchingStrategy.isBatchingUpdates = false;
-  }
-};
-
-var FLUSH_BATCHED_UPDATES = {
-  initialize: emptyFunction,
-  close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates)
-};
-
-var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];
-
-function ReactDefaultBatchingStrategyTransaction() {
-  this.reinitializeTransaction();
-}
-
-mixInto(ReactDefaultBatchingStrategyTransaction, Transaction.Mixin);
-mixInto(ReactDefaultBatchingStrategyTransaction, {
-  getTransactionWrappers: function() {
-    return TRANSACTION_WRAPPERS;
-  }
-});
-
-var transaction = new ReactDefaultBatchingStrategyTransaction();
-
-var ReactDefaultBatchingStrategy = {
-  isBatchingUpdates: false,
-
-  /**
-   * Call the provided function in a context within which calls to `setState`
-   * and friends are batched such that components aren't updated unnecessarily.
-   */
-  batchedUpdates: function(callback, a, b) {
-    var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
-
-    ReactDefaultBatchingStrategy.isBatchingUpdates = true;
-
-    // The code is written this way to avoid extra allocations
-    if (alreadyBatchingUpdates) {
-      callback(a, b);
-    } else {
-      transaction.perform(callback, null, a, b);
-    }
-  }
-};
-
-module.exports = ReactDefaultBatchingStrategy;
diff --git a/src/core/ReactDescriptor.js b/src/core/ReactDescriptor.js
deleted file mode 100644
index e89daff9fdb..00000000000
--- a/src/core/ReactDescriptor.js
+++ /dev/null
@@ -1,270 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDescriptor
- */
-
-"use strict";
-
-var ReactContext = require('ReactContext');
-var ReactCurrentOwner = require('ReactCurrentOwner');
-
-var warning = require('warning');
-
-var RESERVED_PROPS = {
-  key: true,
-  ref: true
-};
-
-/**
- * Warn for mutations.
- *
- * @internal
- * @param {object} object
- * @param {string} key
- */
-function defineWarningProperty(object, key) {
-  Object.defineProperty(object, key, {
-
-    configurable: false,
-    enumerable: true,
-
-    get: function() {
-      if (!this._store) {
-        return null;
-      }
-      return this._store[key];
-    },
-
-    set: function(value) {
-      warning(
-        false,
-        'Don\'t set the ' + key + ' property of the component. ' +
-        'Mutate the existing props object instead.'
-      );
-      this._store[key] = value;
-    }
-
-  });
-}
-
-/**
- * This is updated to true if the membrane is successfully created.
- */
-var useMutationMembrane = false;
-
-/**
- * Warn for mutations.
- *
- * @internal
- * @param {object} descriptor
- */
-function defineMutationMembrane(prototype) {
-  try {
-    var pseudoFrozenProperties = {
-      props: true
-    };
-    for (var key in pseudoFrozenProperties) {
-      defineWarningProperty(prototype, key);
-    }
-    useMutationMembrane = true;
-  } catch (x) {
-    // IE will fail on defineProperty
-  }
-}
-
-/**
- * Base constructor for all React descriptors. This is only used to make this
- * work with a dynamic instanceof check. Nothing should live on this prototype.
- *
- * @param {*} type
- * @param {string|object} ref
- * @param {*} key
- * @params {*} props
- * @internal
- */
-var ReactDescriptor = function(type, key, ref, owner, context, props) {
-  // Built-in properties that belong on the descriptor
-  this.type = type;
-  this.key = key;
-  this.ref = ref;
-
-  // Record the component responsible for creating this descriptor.
-  this._owner = owner;
-
-  // TODO: Deprecate withContext, and then the context becomes accessible
-  // through the owner.
-  this._context = context;
-
-  if (__DEV__) {
-    // The validation flag and props are currently mutative. We put them on
-    // an external backing store so that we can freeze the whole object.
-    // This can be replaced with a WeakMap once they are implemented in
-    // commonly used development environments.
-    this._store = { validated: false, props: props };
-
-    // We're not allowed to set props directly on the object so we early
-    // return and rely on the prototype membrane to forward to the backing
-    // store.
-    if (useMutationMembrane) {
-      Object.freeze(this);
-      return;
-    }
-  }
-
-  this.props = props;
-};
-
-if (__DEV__) {
-  defineMutationMembrane(ReactDescriptor.prototype);
-}
-
-ReactDescriptor.createDescriptor = function(type, config, children) {
-  if (type.isReactLegacyFactory) {
-    // This is probably a legacy factory created by ReactCompositeComponent.
-    // We unwrap it to get to the underlying class.
-    // TODO: Drop this check when we drop ReactLegacyDescriptor.
-    type = type.type;
-  }
-
-  if (typeof type === 'function') {
-    var isReactClass =
-      typeof type.prototype.mountComponent === 'function' &&
-      typeof type.prototype.receiveComponent === 'function';
-    if (!isReactClass) {
-      // This is being called with a plain function we should invoke it
-      // immediately as if this was used with legacy JSX.
-      if (__DEV__) {
-        warning(
-          false,
-          'This JSX uses a plain function. Only React components are valid in' +
-          'JSX.'
-        );
-      }
-      var args = Array.prototype.slice.call(arguments, 1);
-      return type.apply(null, args);
-    }
-  }
-
-  var propName;
-
-  // Reserved names are extracted
-  var props = {};
-
-  var key = null;
-  var ref = null;
-
-  if (config != null) {
-    ref = config.ref === undefined ? null : config.ref;
-    key = config.key === undefined ? null : '' + config.key;
-    // Remaining properties are added to a new props object
-    for (propName in config) {
-      if (config.hasOwnProperty(propName) &&
-          !RESERVED_PROPS.hasOwnProperty(propName)) {
-        props[propName] = config[propName];
-      }
-    }
-  }
-
-  // Children can be more than one argument, and those are transferred onto
-  // the newly allocated props object.
-  var childrenLength = arguments.length - 2;
-  if (childrenLength === 1) {
-    props.children = children;
-  } else if (childrenLength > 1) {
-    var childArray = Array(childrenLength);
-    for (var i = 0; i < childrenLength; i++) {
-      childArray[i] = arguments[i + 2];
-    }
-    props.children = childArray;
-  }
-
-  // Resolve default props
-  if (type.defaultProps) {
-    var defaultProps = type.defaultProps;
-    for (propName in defaultProps) {
-      if (typeof props[propName] === 'undefined') {
-        props[propName] = defaultProps[propName];
-      }
-    }
-  }
-
-  return new ReactDescriptor(
-    type,
-    key,
-    ref,
-    ReactCurrentOwner.current,
-    ReactContext.current,
-    props
-  );
-};
-
-ReactDescriptor.createFactory = function(type) {
-  if (type.isReactLegacyFactory) {
-    // This is probably a legacy factory created by ReactCompositeComponent.
-    // We unwrap it to get to the underlying class.
-    // TODO: Drop this check when we drop ReactLegacyDescriptor.
-    type = type.type;
-  }
-  var factory = ReactDescriptor.createDescriptor.bind(null, type);
-  // Expose the type on the factory and the prototype so that it can be
-  // easily accessed on descriptors. E.g. <Foo />.type === Foo.type.
-  // This should not be named `constructor` since this may not be the function
-  // that created the descriptor, and it may not even be a constructor.
-  factory.type = type;
-  return factory;
-};
-
-ReactDescriptor.cloneAndReplaceProps = function(oldDescriptor, newProps) {
-  var newDescriptor = new ReactDescriptor(
-    oldDescriptor.type,
-    oldDescriptor.key,
-    oldDescriptor.ref,
-    oldDescriptor._owner,
-    oldDescriptor._context,
-    newProps
-  );
-
-  if (__DEV__) {
-    // If the key on the original is valid, then the clone is valid
-    newDescriptor._store.validated = oldDescriptor._store.validated;
-  }
-  return newDescriptor;
-};
-
-/**
- * Checks if a value is a valid descriptor constructor.
- *
- * @param {*}
- * @return {boolean}
- * @public
- */
-ReactDescriptor.isValidFactory = function(factory) {
-  return typeof factory === 'function'  &&
-         typeof factory.type === 'function' &&
-         typeof factory.type.prototype.mountComponent === 'function' &&
-         typeof factory.type.prototype.receiveComponent === 'function';
-};
-
-/**
- * @param {?object} object
- * @return {boolean} True if `object` is a valid component.
- * @final
- */
-ReactDescriptor.isValidDescriptor = function(object) {
-  return object instanceof ReactDescriptor;
-};
-
-module.exports = ReactDescriptor;
diff --git a/src/core/ReactDescriptorValidator.js b/src/core/ReactDescriptorValidator.js
deleted file mode 100644
index 83dae9b0a0e..00000000000
--- a/src/core/ReactDescriptorValidator.js
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDescriptorValidator
- */
-
-/**
- * ReactDescriptorValidator provides a wrapper around a descriptor factory
- * which validates the props passed to the descriptor. This is intended to be
- * used only in DEV and could be replaced by a static type checker for languages
- * that support it.
- */
-
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-var ReactPropTypeLocations = require('ReactPropTypeLocations');
-var ReactCurrentOwner = require('ReactCurrentOwner');
-
-var monitorCodeUse = require('monitorCodeUse');
-
-/**
- * Warn if there's no key explicitly set on dynamic arrays of children or
- * object keys are not valid. This allows us to keep track of children between
- * updates.
- */
-var ownerHasKeyUseWarning = {
-  'react_key_warning': {},
-  'react_numeric_key_warning': {}
-};
-var ownerHasMonitoredObjectMap = {};
-
-var loggedTypeFailures = {};
-
-var NUMERIC_PROPERTY_REGEX = /^\d+$/;
-
-/**
- * Gets the current owner's displayName for use in warnings.
- *
- * @internal
- * @return {?string} Display name or undefined
- */
-function getCurrentOwnerDisplayName() {
-  var current = ReactCurrentOwner.current;
-  return current && current.constructor.displayName || undefined;
-}
-
-/**
- * Warn if the component doesn't have an explicit key assigned to it.
- * This component is in an array. The array could grow and shrink or be
- * reordered. All children that haven't already been validated are required to
- * have a "key" property assigned to it.
- *
- * @internal
- * @param {ReactComponent} component Component that requires a key.
- * @param {*} parentType component's parent's type.
- */
-function validateExplicitKey(component, parentType) {
-  if (component._store.validated || component.key != null) {
-    return;
-  }
-  component._store.validated = true;
-
-  warnAndMonitorForKeyUse(
-    'react_key_warning',
-    'Each child in an array should have a unique "key" prop.',
-    component,
-    parentType
-  );
-}
-
-/**
- * Warn if the key is being defined as an object property but has an incorrect
- * value.
- *
- * @internal
- * @param {string} name Property name of the key.
- * @param {ReactComponent} component Component that requires a key.
- * @param {*} parentType component's parent's type.
- */
-function validatePropertyKey(name, component, parentType) {
-  if (!NUMERIC_PROPERTY_REGEX.test(name)) {
-    return;
-  }
-  warnAndMonitorForKeyUse(
-    'react_numeric_key_warning',
-    'Child objects should have non-numeric keys so ordering is preserved.',
-    component,
-    parentType
-  );
-}
-
-/**
- * Shared warning and monitoring code for the key warnings.
- *
- * @internal
- * @param {string} warningID The id used when logging.
- * @param {string} message The base warning that gets output.
- * @param {ReactComponent} component Component that requires a key.
- * @param {*} parentType component's parent's type.
- */
-function warnAndMonitorForKeyUse(warningID, message, component, parentType) {
-  var ownerName = getCurrentOwnerDisplayName();
-  var parentName = parentType.displayName;
-
-  var useName = ownerName || parentName;
-  var memoizer = ownerHasKeyUseWarning[warningID];
-  if (memoizer.hasOwnProperty(useName)) {
-    return;
-  }
-  memoizer[useName] = true;
-
-  message += ownerName ?
-    ` Check the render method of ${ownerName}.` :
-    ` Check the renderComponent call using <${parentName}>.`;
-
-  // Usually the current owner is the offender, but if it accepts children as a
-  // property, it may be the creator of the child that's responsible for
-  // assigning it a key.
-  var childOwnerName = null;
-  if (component._owner && component._owner !== ReactCurrentOwner.current) {
-    // Name of the component that originally created this child.
-    childOwnerName = component._owner.constructor.displayName;
-
-    message += ` It was passed a child from ${childOwnerName}.`;
-  }
-
-  message += ' See http://fb.me/react-warning-keys for more information.';
-  monitorCodeUse(warningID, {
-    component: useName,
-    componentOwner: childOwnerName
-  });
-  console.warn(message);
-}
-
-/**
- * Log that we're using an object map. We're considering deprecating this
- * feature and replace it with proper Map and ImmutableMap data structures.
- *
- * @internal
- */
-function monitorUseOfObjectMap() {
-  var currentName = getCurrentOwnerDisplayName() || '';
-  if (ownerHasMonitoredObjectMap.hasOwnProperty(currentName)) {
-    return;
-  }
-  ownerHasMonitoredObjectMap[currentName] = true;
-  monitorCodeUse('react_object_map_children');
-}
-
-/**
- * Ensure that every component either is passed in a static location, in an
- * array with an explicit keys property defined, or in an object literal
- * with valid key property.
- *
- * @internal
- * @param {*} component Statically passed child of any type.
- * @param {*} parentType component's parent's type.
- * @return {boolean}
- */
-function validateChildKeys(component, parentType) {
-  if (Array.isArray(component)) {
-    for (var i = 0; i < component.length; i++) {
-      var child = component[i];
-      if (ReactDescriptor.isValidDescriptor(child)) {
-        validateExplicitKey(child, parentType);
-      }
-    }
-  } else if (ReactDescriptor.isValidDescriptor(component)) {
-    // This component was passed in a valid location.
-    component._store.validated = true;
-  } else if (component && typeof component === 'object') {
-    monitorUseOfObjectMap();
-    for (var name in component) {
-      validatePropertyKey(name, component[name], parentType);
-    }
-  }
-}
-
-/**
- * Assert that the props are valid
- *
- * @param {string} componentName Name of the component for error messages.
- * @param {object} propTypes Map of prop name to a ReactPropType
- * @param {object} props
- * @param {string} location e.g. "prop", "context", "child context"
- * @private
- */
-function checkPropTypes(componentName, propTypes, props, location) {
-  for (var propName in propTypes) {
-    if (propTypes.hasOwnProperty(propName)) {
-      var error;
-      // Prop type validation may throw. In case they do, we don't want to
-      // fail the render phase where it didn't fail before. So we log it.
-      // After these have been cleaned up, we'll let them throw.
-      try {
-        error = propTypes[propName](props, propName, componentName, location);
-      } catch (ex) {
-        error = ex;
-      }
-      if (error instanceof Error && !(error.message in loggedTypeFailures)) {
-        // Only monitor this failure once because there tends to be a lot of the
-        // same error.
-        loggedTypeFailures[error.message] = true;
-        // This will soon use the warning module
-        monitorCodeUse(
-          'react_failed_descriptor_type_check',
-          { message: error.message }
-        );
-      }
-    }
-  }
-}
-
-var ReactDescriptorValidator = {
-
-  createDescriptor: function(type, props, children) {
-    var descriptor = ReactDescriptor.createDescriptor.apply(this, arguments);
-
-    // The result can be nullish if a mock or a custom function is used.
-    // TODO: Drop this when these are no longer allowed as the type argument.
-    if (descriptor == null) {
-      return descriptor;
-    }
-
-    for (var i = 2; i < arguments.length; i++) {
-      validateChildKeys(arguments[i], type);
-    }
-
-    var name = type.displayName;
-    if (type.propTypes) {
-      checkPropTypes(
-        name,
-        type.propTypes,
-        descriptor.props,
-        ReactPropTypeLocations.prop
-      );
-    }
-    if (type.contextTypes) {
-      checkPropTypes(
-        name,
-        type.contextTypes,
-        descriptor._context,
-        ReactPropTypeLocations.context
-      );
-    }
-    return descriptor;
-  },
-
-  createFactory: function(type) {
-    if (type.isReactLegacyFactory) {
-      // This is probably a legacy factory created by ReactCompositeComponent.
-      // We unwrap it to get to the underlying class.
-      // TODO: Drop this check when we drop ReactLegacyDescriptor.
-      type = type.type;
-    }
-    var validatedFactory = ReactDescriptorValidator.createDescriptor.bind(
-      null,
-      type
-    );
-    validatedFactory.type = type;
-    return validatedFactory;
-  }
-
-};
-
-module.exports = ReactDescriptorValidator;
diff --git a/src/core/ReactDoNotBindDeprecated.js b/src/core/ReactDoNotBindDeprecated.js
deleted file mode 100644
index d95ae5211ed..00000000000
--- a/src/core/ReactDoNotBindDeprecated.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDoNotBindDeprecated
- */
-
-"use strict";
-
-var ReactDoNotBindDeprecated = {
-  /**
-   * Marks the method for not being automatically bound on component mounting. A
-   * couple of reasons you might want to use this:
-   *
-   * - Automatically supporting the previous behavior in components that were
-   *   built with previous versions of React.
-   * - Tuning performance, by avoiding binding on initial render for methods
-   *   that are always invoked while being preceded by `this.`. Such binds are
-   *   unnecessary.
-   *
-   *   React.createClass({
-   *     handleClick: ReactDoNotBindDeprecated.doNotBind(function() {
-   *       alert(this.setState); // undefined!
-   *     }),
-   *     render: function() {
-   *       return <a onClick={this.handleClick}>Jump</a>;
-   *     }
-   *   });
-   *
-   * @param {function} method Method to avoid automatically binding.
-   * @public
-   */
-  doNotBind: function(method) {
-    method.__reactDontBind = true;   // Mutating
-    return method;
-  }
-};
-
-module.exports = ReactDoNotBindDeprecated;
diff --git a/src/core/ReactEmptyComponent.js b/src/core/ReactEmptyComponent.js
deleted file mode 100644
index a9d154bc5e8..00000000000
--- a/src/core/ReactEmptyComponent.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactEmptyComponent
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-var component;
-// This registry keeps track of the React IDs of the components that rendered to
-// `null` (in reality a placeholder such as `noscript`)
-var nullComponentIdsRegistry = {};
-
-var ReactEmptyComponentInjection = {
-  injectEmptyComponent: function(emptyComponent) {
-    component = emptyComponent;
-  }
-};
-
-/**
- * @return {ReactComponent} component The injected empty component.
- */
-function getEmptyComponent() {
-  invariant(
-    component,
-    'Trying to return null from a render, but no null placeholder component ' +
-    'was injected.'
-  );
-  return component();
-}
-
-/**
- * Mark the component as having rendered to null.
- * @param {string} id Component's `_rootNodeID`.
- */
-function registerNullComponentID(id) {
-  nullComponentIdsRegistry[id] = true;
-}
-
-/**
- * Unmark the component as having rendered to null: it renders to something now.
- * @param {string} id Component's `_rootNodeID`.
- */
-function deregisterNullComponentID(id) {
-  delete nullComponentIdsRegistry[id];
-}
-
-/**
- * @param {string} id Component's `_rootNodeID`.
- * @return {boolean} True if the component is rendered to null.
- */
-function isNullComponentID(id) {
-  return nullComponentIdsRegistry[id];
-}
-
-var ReactEmptyComponent = {
-  deregisterNullComponentID: deregisterNullComponentID,
-  getEmptyComponent: getEmptyComponent,
-  injection: ReactEmptyComponentInjection,
-  isNullComponentID: isNullComponentID,
-  registerNullComponentID: registerNullComponentID
-};
-
-module.exports = ReactEmptyComponent;
diff --git a/src/core/ReactEventEmitterMixin.js b/src/core/ReactEventEmitterMixin.js
deleted file mode 100644
index 4e6e15075bb..00000000000
--- a/src/core/ReactEventEmitterMixin.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactEventEmitterMixin
- */
-
-"use strict";
-
-var EventPluginHub = require('EventPluginHub');
-
-function runEventQueueInBatch(events) {
-  EventPluginHub.enqueueEvents(events);
-  EventPluginHub.processEventQueue();
-}
-
-var ReactEventEmitterMixin = {
-
-  /**
-   * Streams a fired top-level event to `EventPluginHub` where plugins have the
-   * opportunity to create `ReactEvent`s to be dispatched.
-   *
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {object} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native environment event.
-   */
-  handleTopLevel: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    var events = EventPluginHub.extractEvents(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent
-    );
-
-    runEventQueueInBatch(events);
-  }
-};
-
-module.exports = ReactEventEmitterMixin;
diff --git a/src/core/ReactInstanceHandles.js b/src/core/ReactInstanceHandles.js
deleted file mode 100644
index b1a07cf34ff..00000000000
--- a/src/core/ReactInstanceHandles.js
+++ /dev/null
@@ -1,338 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactInstanceHandles
- * @typechecks static-only
- */
-
-"use strict";
-
-var ReactRootIndex = require('ReactRootIndex');
-
-var invariant = require('invariant');
-
-var SEPARATOR = '.';
-var SEPARATOR_LENGTH = SEPARATOR.length;
-
-/**
- * Maximum depth of traversals before we consider the possibility of a bad ID.
- */
-var MAX_TREE_DEPTH = 100;
-
-/**
- * Creates a DOM ID prefix to use when mounting React components.
- *
- * @param {number} index A unique integer
- * @return {string} React root ID.
- * @internal
- */
-function getReactRootIDString(index) {
-  return SEPARATOR + index.toString(36);
-}
-
-/**
- * Checks if a character in the supplied ID is a separator or the end.
- *
- * @param {string} id A React DOM ID.
- * @param {number} index Index of the character to check.
- * @return {boolean} True if the character is a separator or end of the ID.
- * @private
- */
-function isBoundary(id, index) {
-  return id.charAt(index) === SEPARATOR || index === id.length;
-}
-
-/**
- * Checks if the supplied string is a valid React DOM ID.
- *
- * @param {string} id A React DOM ID, maybe.
- * @return {boolean} True if the string is a valid React DOM ID.
- * @private
- */
-function isValidID(id) {
-  return id === '' || (
-    id.charAt(0) === SEPARATOR && id.charAt(id.length - 1) !== SEPARATOR
-  );
-}
-
-/**
- * Checks if the first ID is an ancestor of or equal to the second ID.
- *
- * @param {string} ancestorID
- * @param {string} descendantID
- * @return {boolean} True if `ancestorID` is an ancestor of `descendantID`.
- * @internal
- */
-function isAncestorIDOf(ancestorID, descendantID) {
-  return (
-    descendantID.indexOf(ancestorID) === 0 &&
-    isBoundary(descendantID, ancestorID.length)
-  );
-}
-
-/**
- * Gets the parent ID of the supplied React DOM ID, `id`.
- *
- * @param {string} id ID of a component.
- * @return {string} ID of the parent, or an empty string.
- * @private
- */
-function getParentID(id) {
-  return id ? id.substr(0, id.lastIndexOf(SEPARATOR)) : '';
-}
-
-/**
- * Gets the next DOM ID on the tree path from the supplied `ancestorID` to the
- * supplied `destinationID`. If they are equal, the ID is returned.
- *
- * @param {string} ancestorID ID of an ancestor node of `destinationID`.
- * @param {string} destinationID ID of the destination node.
- * @return {string} Next ID on the path from `ancestorID` to `destinationID`.
- * @private
- */
-function getNextDescendantID(ancestorID, destinationID) {
-  invariant(
-    isValidID(ancestorID) && isValidID(destinationID),
-    'getNextDescendantID(%s, %s): Received an invalid React DOM ID.',
-    ancestorID,
-    destinationID
-  );
-  invariant(
-    isAncestorIDOf(ancestorID, destinationID),
-    'getNextDescendantID(...): React has made an invalid assumption about ' +
-    'the DOM hierarchy. Expected `%s` to be an ancestor of `%s`.',
-    ancestorID,
-    destinationID
-  );
-  if (ancestorID === destinationID) {
-    return ancestorID;
-  }
-  // Skip over the ancestor and the immediate separator. Traverse until we hit
-  // another separator or we reach the end of `destinationID`.
-  var start = ancestorID.length + SEPARATOR_LENGTH;
-  for (var i = start; i < destinationID.length; i++) {
-    if (isBoundary(destinationID, i)) {
-      break;
-    }
-  }
-  return destinationID.substr(0, i);
-}
-
-/**
- * Gets the nearest common ancestor ID of two IDs.
- *
- * Using this ID scheme, the nearest common ancestor ID is the longest common
- * prefix of the two IDs that immediately preceded a "marker" in both strings.
- *
- * @param {string} oneID
- * @param {string} twoID
- * @return {string} Nearest common ancestor ID, or the empty string if none.
- * @private
- */
-function getFirstCommonAncestorID(oneID, twoID) {
-  var minLength = Math.min(oneID.length, twoID.length);
-  if (minLength === 0) {
-    return '';
-  }
-  var lastCommonMarkerIndex = 0;
-  // Use `<=` to traverse until the "EOL" of the shorter string.
-  for (var i = 0; i <= minLength; i++) {
-    if (isBoundary(oneID, i) && isBoundary(twoID, i)) {
-      lastCommonMarkerIndex = i;
-    } else if (oneID.charAt(i) !== twoID.charAt(i)) {
-      break;
-    }
-  }
-  var longestCommonID = oneID.substr(0, lastCommonMarkerIndex);
-  invariant(
-    isValidID(longestCommonID),
-    'getFirstCommonAncestorID(%s, %s): Expected a valid React DOM ID: %s',
-    oneID,
-    twoID,
-    longestCommonID
-  );
-  return longestCommonID;
-}
-
-/**
- * Traverses the parent path between two IDs (either up or down). The IDs must
- * not be the same, and there must exist a parent path between them. If the
- * callback returns `false`, traversal is stopped.
- *
- * @param {?string} start ID at which to start traversal.
- * @param {?string} stop ID at which to end traversal.
- * @param {function} cb Callback to invoke each ID with.
- * @param {?boolean} skipFirst Whether or not to skip the first node.
- * @param {?boolean} skipLast Whether or not to skip the last node.
- * @private
- */
-function traverseParentPath(start, stop, cb, arg, skipFirst, skipLast) {
-  start = start || '';
-  stop = stop || '';
-  invariant(
-    start !== stop,
-    'traverseParentPath(...): Cannot traverse from and to the same ID, `%s`.',
-    start
-  );
-  var traverseUp = isAncestorIDOf(stop, start);
-  invariant(
-    traverseUp || isAncestorIDOf(start, stop),
-    'traverseParentPath(%s, %s, ...): Cannot traverse from two IDs that do ' +
-    'not have a parent path.',
-    start,
-    stop
-  );
-  // Traverse from `start` to `stop` one depth at a time.
-  var depth = 0;
-  var traverse = traverseUp ? getParentID : getNextDescendantID;
-  for (var id = start; /* until break */; id = traverse(id, stop)) {
-    var ret;
-    if ((!skipFirst || id !== start) && (!skipLast || id !== stop)) {
-      ret = cb(id, traverseUp, arg);
-    }
-    if (ret === false || id === stop) {
-      // Only break //after// visiting `stop`.
-      break;
-    }
-    invariant(
-      depth++ < MAX_TREE_DEPTH,
-      'traverseParentPath(%s, %s, ...): Detected an infinite loop while ' +
-      'traversing the React DOM ID tree. This may be due to malformed IDs: %s',
-      start, stop
-    );
-  }
-}
-
-/**
- * Manages the IDs assigned to DOM representations of React components. This
- * uses a specific scheme in order to traverse the DOM efficiently (e.g. in
- * order to simulate events).
- *
- * @internal
- */
-var ReactInstanceHandles = {
-
-  /**
-   * Constructs a React root ID
-   * @return {string} A React root ID.
-   */
-  createReactRootID: function() {
-    return getReactRootIDString(ReactRootIndex.createReactRootIndex());
-  },
-
-  /**
-   * Constructs a React ID by joining a root ID with a name.
-   *
-   * @param {string} rootID Root ID of a parent component.
-   * @param {string} name A component's name (as flattened children).
-   * @return {string} A React ID.
-   * @internal
-   */
-  createReactID: function(rootID, name) {
-    return rootID + name;
-  },
-
-  /**
-   * Gets the DOM ID of the React component that is the root of the tree that
-   * contains the React component with the supplied DOM ID.
-   *
-   * @param {string} id DOM ID of a React component.
-   * @return {?string} DOM ID of the React component that is the root.
-   * @internal
-   */
-  getReactRootIDFromNodeID: function(id) {
-    if (id && id.charAt(0) === SEPARATOR && id.length > 1) {
-      var index = id.indexOf(SEPARATOR, 1);
-      return index > -1 ? id.substr(0, index) : id;
-    }
-    return null;
-  },
-
-  /**
-   * Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
-   * should would receive a `mouseEnter` or `mouseLeave` event.
-   *
-   * NOTE: Does not invoke the callback on the nearest common ancestor because
-   * nothing "entered" or "left" that element.
-   *
-   * @param {string} leaveID ID being left.
-   * @param {string} enterID ID being entered.
-   * @param {function} cb Callback to invoke on each entered/left ID.
-   * @param {*} upArg Argument to invoke the callback with on left IDs.
-   * @param {*} downArg Argument to invoke the callback with on entered IDs.
-   * @internal
-   */
-  traverseEnterLeave: function(leaveID, enterID, cb, upArg, downArg) {
-    var ancestorID = getFirstCommonAncestorID(leaveID, enterID);
-    if (ancestorID !== leaveID) {
-      traverseParentPath(leaveID, ancestorID, cb, upArg, false, true);
-    }
-    if (ancestorID !== enterID) {
-      traverseParentPath(ancestorID, enterID, cb, downArg, true, false);
-    }
-  },
-
-  /**
-   * Simulates the traversal of a two-phase, capture/bubble event dispatch.
-   *
-   * NOTE: This traversal happens on IDs without touching the DOM.
-   *
-   * @param {string} targetID ID of the target node.
-   * @param {function} cb Callback to invoke.
-   * @param {*} arg Argument to invoke the callback with.
-   * @internal
-   */
-  traverseTwoPhase: function(targetID, cb, arg) {
-    if (targetID) {
-      traverseParentPath('', targetID, cb, arg, true, false);
-      traverseParentPath(targetID, '', cb, arg, false, true);
-    }
-  },
-
-  /**
-   * Traverse a node ID, calling the supplied `cb` for each ancestor ID. For
-   * example, passing `.0.$row-0.1` would result in `cb` getting called
-   * with `.0`, `.0.$row-0`, and `.0.$row-0.1`.
-   *
-   * NOTE: This traversal happens on IDs without touching the DOM.
-   *
-   * @param {string} targetID ID of the target node.
-   * @param {function} cb Callback to invoke.
-   * @param {*} arg Argument to invoke the callback with.
-   * @internal
-   */
-  traverseAncestors: function(targetID, cb, arg) {
-    traverseParentPath('', targetID, cb, arg, true, false);
-  },
-
-  /**
-   * Exposed for unit testing.
-   * @private
-   */
-  _getFirstCommonAncestorID: getFirstCommonAncestorID,
-
-  /**
-   * Exposed for unit testing.
-   * @private
-   */
-  _getNextDescendantID: getNextDescendantID,
-
-  isAncestorIDOf: isAncestorIDOf,
-
-  SEPARATOR: SEPARATOR
-
-};
-
-module.exports = ReactInstanceHandles;
diff --git a/src/core/ReactLegacyDescriptor.js b/src/core/ReactLegacyDescriptor.js
deleted file mode 100644
index e6ba9efa771..00000000000
--- a/src/core/ReactLegacyDescriptor.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactLegacyDescriptor
- */
-
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-
-var invariant = require('invariant');
-
-/**
- * Transfer static properties from the source to the target. Functions are
- * rebound to have this reflect the original source.
- */
-function proxyStaticMethods(target, source) {
-  if (typeof source !== 'function') {
-    return;
-  }
-  for (var key in source) {
-    if (source.hasOwnProperty(key)) {
-      var value = source[key];
-      if (typeof value === 'function') {
-        var bound = value.bind(source);
-        // Copy any properties defined on the function, such as `isRequired` on
-        // a PropTypes validator. (mergeInto refuses to work on functions.)
-        for (var k in value) {
-          if (value.hasOwnProperty(k)) {
-            bound[k] = value[k];
-          }
-        }
-        target[key] = bound;
-      } else {
-        target[key] = value;
-      }
-    }
-  }
-}
-
-var ReactLegacyDescriptorFactory = {};
-
-ReactLegacyDescriptorFactory.wrapFactory = function(factory) {
-  invariant(
-    ReactDescriptor.isValidFactory(factory),
-    'This is suppose to accept a descriptor factory'
-  );
-  var legacyDescriptorFactory = function(config, children) {
-    // This factory should not be called when the new JSX transform is in place.
-    // TODO: Warning - Use JSX instead of direct function calls.
-    return factory.apply(this, arguments);
-  };
-  proxyStaticMethods(legacyDescriptorFactory, factory.type);
-  legacyDescriptorFactory.isReactLegacyFactory = true;
-  legacyDescriptorFactory.type = factory.type;
-  return legacyDescriptorFactory;
-};
-
-module.exports = ReactLegacyDescriptorFactory;
diff --git a/src/core/ReactMultiChild.js b/src/core/ReactMultiChild.js
deleted file mode 100644
index 608fe62d846..00000000000
--- a/src/core/ReactMultiChild.js
+++ /dev/null
@@ -1,430 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactMultiChild
- * @typechecks static-only
- */
-
-"use strict";
-
-var ReactComponent = require('ReactComponent');
-var ReactMultiChildUpdateTypes = require('ReactMultiChildUpdateTypes');
-
-var flattenChildren = require('flattenChildren');
-var instantiateReactComponent = require('instantiateReactComponent');
-var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
-
-/**
- * Updating children of a component may trigger recursive updates. The depth is
- * used to batch recursive updates to render markup more efficiently.
- *
- * @type {number}
- * @private
- */
-var updateDepth = 0;
-
-/**
- * Queue of update configuration objects.
- *
- * Each object has a `type` property that is in `ReactMultiChildUpdateTypes`.
- *
- * @type {array<object>}
- * @private
- */
-var updateQueue = [];
-
-/**
- * Queue of markup to be rendered.
- *
- * @type {array<string>}
- * @private
- */
-var markupQueue = [];
-
-/**
- * Enqueues markup to be rendered and inserted at a supplied index.
- *
- * @param {string} parentID ID of the parent component.
- * @param {string} markup Markup that renders into an element.
- * @param {number} toIndex Destination index.
- * @private
- */
-function enqueueMarkup(parentID, markup, toIndex) {
-  // NOTE: Null values reduce hidden classes.
-  updateQueue.push({
-    parentID: parentID,
-    parentNode: null,
-    type: ReactMultiChildUpdateTypes.INSERT_MARKUP,
-    markupIndex: markupQueue.push(markup) - 1,
-    textContent: null,
-    fromIndex: null,
-    toIndex: toIndex
-  });
-}
-
-/**
- * Enqueues moving an existing element to another index.
- *
- * @param {string} parentID ID of the parent component.
- * @param {number} fromIndex Source index of the existing element.
- * @param {number} toIndex Destination index of the element.
- * @private
- */
-function enqueueMove(parentID, fromIndex, toIndex) {
-  // NOTE: Null values reduce hidden classes.
-  updateQueue.push({
-    parentID: parentID,
-    parentNode: null,
-    type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
-    markupIndex: null,
-    textContent: null,
-    fromIndex: fromIndex,
-    toIndex: toIndex
-  });
-}
-
-/**
- * Enqueues removing an element at an index.
- *
- * @param {string} parentID ID of the parent component.
- * @param {number} fromIndex Index of the element to remove.
- * @private
- */
-function enqueueRemove(parentID, fromIndex) {
-  // NOTE: Null values reduce hidden classes.
-  updateQueue.push({
-    parentID: parentID,
-    parentNode: null,
-    type: ReactMultiChildUpdateTypes.REMOVE_NODE,
-    markupIndex: null,
-    textContent: null,
-    fromIndex: fromIndex,
-    toIndex: null
-  });
-}
-
-/**
- * Enqueues setting the text content.
- *
- * @param {string} parentID ID of the parent component.
- * @param {string} textContent Text content to set.
- * @private
- */
-function enqueueTextContent(parentID, textContent) {
-  // NOTE: Null values reduce hidden classes.
-  updateQueue.push({
-    parentID: parentID,
-    parentNode: null,
-    type: ReactMultiChildUpdateTypes.TEXT_CONTENT,
-    markupIndex: null,
-    textContent: textContent,
-    fromIndex: null,
-    toIndex: null
-  });
-}
-
-/**
- * Processes any enqueued updates.
- *
- * @private
- */
-function processQueue() {
-  if (updateQueue.length) {
-    ReactComponent.BackendIDOperations.dangerouslyProcessChildrenUpdates(
-      updateQueue,
-      markupQueue
-    );
-    clearQueue();
-  }
-}
-
-/**
- * Clears any enqueued updates.
- *
- * @private
- */
-function clearQueue() {
-  updateQueue.length = 0;
-  markupQueue.length = 0;
-}
-
-/**
- * ReactMultiChild are capable of reconciling multiple children.
- *
- * @class ReactMultiChild
- * @internal
- */
-var ReactMultiChild = {
-
-  /**
-   * Provides common functionality for components that must reconcile multiple
-   * children. This is used by `ReactDOMComponent` to mount, update, and
-   * unmount child components.
-   *
-   * @lends {ReactMultiChild.prototype}
-   */
-  Mixin: {
-
-    /**
-     * Generates a "mount image" for each of the supplied children. In the case
-     * of `ReactDOMComponent`, a mount image is a string of markup.
-     *
-     * @param {?object} nestedChildren Nested child maps.
-     * @return {array} An array of mounted representations.
-     * @internal
-     */
-    mountChildren: function(nestedChildren, transaction) {
-      var children = flattenChildren(nestedChildren);
-      var mountImages = [];
-      var index = 0;
-      this._renderedChildren = children;
-      for (var name in children) {
-        var child = children[name];
-        if (children.hasOwnProperty(name)) {
-          // The rendered children must be turned into instances as they're
-          // mounted.
-          var childInstance = instantiateReactComponent(child);
-          children[name] = childInstance;
-          // Inlined for performance, see `ReactInstanceHandles.createReactID`.
-          var rootID = this._rootNodeID + name;
-          var mountImage = childInstance.mountComponent(
-            rootID,
-            transaction,
-            this._mountDepth + 1
-          );
-          childInstance._mountIndex = index;
-          mountImages.push(mountImage);
-          index++;
-        }
-      }
-      return mountImages;
-    },
-
-    /**
-     * Replaces any rendered children with a text content string.
-     *
-     * @param {string} nextContent String of content.
-     * @internal
-     */
-    updateTextContent: function(nextContent) {
-      updateDepth++;
-      var errorThrown = true;
-      try {
-        var prevChildren = this._renderedChildren;
-        // Remove any rendered children.
-        for (var name in prevChildren) {
-          if (prevChildren.hasOwnProperty(name)) {
-            this._unmountChildByName(prevChildren[name], name);
-          }
-        }
-        // Set new text content.
-        this.setTextContent(nextContent);
-        errorThrown = false;
-      } finally {
-        updateDepth--;
-        if (!updateDepth) {
-          errorThrown ? clearQueue() : processQueue();
-        }
-      }
-    },
-
-    /**
-     * Updates the rendered children with new children.
-     *
-     * @param {?object} nextNestedChildren Nested child maps.
-     * @param {ReactReconcileTransaction} transaction
-     * @internal
-     */
-    updateChildren: function(nextNestedChildren, transaction) {
-      updateDepth++;
-      var errorThrown = true;
-      try {
-        this._updateChildren(nextNestedChildren, transaction);
-        errorThrown = false;
-      } finally {
-        updateDepth--;
-        if (!updateDepth) {
-          errorThrown ? clearQueue() : processQueue();
-        }
-      }
-    },
-
-    /**
-     * Improve performance by isolating this hot code path from the try/catch
-     * block in `updateChildren`.
-     *
-     * @param {?object} nextNestedChildren Nested child maps.
-     * @param {ReactReconcileTransaction} transaction
-     * @final
-     * @protected
-     */
-    _updateChildren: function(nextNestedChildren, transaction) {
-      var nextChildren = flattenChildren(nextNestedChildren);
-      var prevChildren = this._renderedChildren;
-      if (!nextChildren && !prevChildren) {
-        return;
-      }
-      var name;
-      // `nextIndex` will increment for each child in `nextChildren`, but
-      // `lastIndex` will be the last index visited in `prevChildren`.
-      var lastIndex = 0;
-      var nextIndex = 0;
-      for (name in nextChildren) {
-        if (!nextChildren.hasOwnProperty(name)) {
-          continue;
-        }
-        var prevChild = prevChildren && prevChildren[name];
-        var prevDescriptor = prevChild && prevChild._descriptor;
-        var nextDescriptor = nextChildren[name];
-        if (shouldUpdateReactComponent(prevDescriptor, nextDescriptor)) {
-          this.moveChild(prevChild, nextIndex, lastIndex);
-          lastIndex = Math.max(prevChild._mountIndex, lastIndex);
-          prevChild.receiveComponent(nextDescriptor, transaction);
-          prevChild._mountIndex = nextIndex;
-        } else {
-          if (prevChild) {
-            // Update `lastIndex` before `_mountIndex` gets unset by unmounting.
-            lastIndex = Math.max(prevChild._mountIndex, lastIndex);
-            this._unmountChildByName(prevChild, name);
-          }
-          // The child must be instantiated before it's mounted.
-          var nextChildInstance = instantiateReactComponent(nextDescriptor);
-          this._mountChildByNameAtIndex(
-            nextChildInstance, name, nextIndex, transaction
-          );
-        }
-        nextIndex++;
-      }
-      // Remove children that are no longer present.
-      for (name in prevChildren) {
-        if (prevChildren.hasOwnProperty(name) &&
-            !(nextChildren && nextChildren[name])) {
-          this._unmountChildByName(prevChildren[name], name);
-        }
-      }
-    },
-
-    /**
-     * Unmounts all rendered children. This should be used to clean up children
-     * when this component is unmounted.
-     *
-     * @internal
-     */
-    unmountChildren: function() {
-      var renderedChildren = this._renderedChildren;
-      for (var name in renderedChildren) {
-        var renderedChild = renderedChildren[name];
-        // TODO: When is this not true?
-        if (renderedChild.unmountComponent) {
-          renderedChild.unmountComponent();
-        }
-      }
-      this._renderedChildren = null;
-    },
-
-    /**
-     * Moves a child component to the supplied index.
-     *
-     * @param {ReactComponent} child Component to move.
-     * @param {number} toIndex Destination index of the element.
-     * @param {number} lastIndex Last index visited of the siblings of `child`.
-     * @protected
-     */
-    moveChild: function(child, toIndex, lastIndex) {
-      // If the index of `child` is less than `lastIndex`, then it needs to
-      // be moved. Otherwise, we do not need to move it because a child will be
-      // inserted or moved before `child`.
-      if (child._mountIndex < lastIndex) {
-        enqueueMove(this._rootNodeID, child._mountIndex, toIndex);
-      }
-    },
-
-    /**
-     * Creates a child component.
-     *
-     * @param {ReactComponent} child Component to create.
-     * @param {string} mountImage Markup to insert.
-     * @protected
-     */
-    createChild: function(child, mountImage) {
-      enqueueMarkup(this._rootNodeID, mountImage, child._mountIndex);
-    },
-
-    /**
-     * Removes a child component.
-     *
-     * @param {ReactComponent} child Child to remove.
-     * @protected
-     */
-    removeChild: function(child) {
-      enqueueRemove(this._rootNodeID, child._mountIndex);
-    },
-
-    /**
-     * Sets this text content string.
-     *
-     * @param {string} textContent Text content to set.
-     * @protected
-     */
-    setTextContent: function(textContent) {
-      enqueueTextContent(this._rootNodeID, textContent);
-    },
-
-    /**
-     * Mounts a child with the supplied name.
-     *
-     * NOTE: This is part of `updateChildren` and is here for readability.
-     *
-     * @param {ReactComponent} child Component to mount.
-     * @param {string} name Name of the child.
-     * @param {number} index Index at which to insert the child.
-     * @param {ReactReconcileTransaction} transaction
-     * @private
-     */
-    _mountChildByNameAtIndex: function(child, name, index, transaction) {
-      // Inlined for performance, see `ReactInstanceHandles.createReactID`.
-      var rootID = this._rootNodeID + name;
-      var mountImage = child.mountComponent(
-        rootID,
-        transaction,
-        this._mountDepth + 1
-      );
-      child._mountIndex = index;
-      this.createChild(child, mountImage);
-      this._renderedChildren = this._renderedChildren || {};
-      this._renderedChildren[name] = child;
-    },
-
-    /**
-     * Unmounts a rendered child by name.
-     *
-     * NOTE: This is part of `updateChildren` and is here for readability.
-     *
-     * @param {ReactComponent} child Component to unmount.
-     * @param {string} name Name of the child in `this._renderedChildren`.
-     * @private
-     */
-    _unmountChildByName: function(child, name) {
-      this.removeChild(child);
-      child._mountIndex = null;
-      child.unmountComponent();
-      delete this._renderedChildren[name];
-    }
-
-  }
-
-};
-
-module.exports = ReactMultiChild;
diff --git a/src/core/ReactMultiChildUpdateTypes.js b/src/core/ReactMultiChildUpdateTypes.js
deleted file mode 100644
index 18cfd065e84..00000000000
--- a/src/core/ReactMultiChildUpdateTypes.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactMultiChildUpdateTypes
- */
-
-"use strict";
-
-var keyMirror = require('keyMirror');
-
-/**
- * When a component's children are updated, a series of update configuration
- * objects are created in order to batch and serialize the required changes.
- *
- * Enumerates all the possible types of update configurations.
- *
- * @internal
- */
-var ReactMultiChildUpdateTypes = keyMirror({
-  INSERT_MARKUP: null,
-  MOVE_EXISTING: null,
-  REMOVE_NODE: null,
-  TEXT_CONTENT: null
-});
-
-module.exports = ReactMultiChildUpdateTypes;
diff --git a/src/core/ReactOwner.js b/src/core/ReactOwner.js
deleted file mode 100644
index d690f65c9c8..00000000000
--- a/src/core/ReactOwner.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactOwner
- */
-
-"use strict";
-
-var emptyObject = require('emptyObject');
-var invariant = require('invariant');
-
-/**
- * ReactOwners are capable of storing references to owned components.
- *
- * All components are capable of //being// referenced by owner components, but
- * only ReactOwner components are capable of //referencing// owned components.
- * The named reference is known as a "ref".
- *
- * Refs are available when mounted and updated during reconciliation.
- *
- *   var MyComponent = React.createClass({
- *     render: function() {
- *       return (
- *         <div onClick={this.handleClick}>
- *           <CustomComponent ref="custom" />
- *         </div>
- *       );
- *     },
- *     handleClick: function() {
- *       this.refs.custom.handleClick();
- *     },
- *     componentDidMount: function() {
- *       this.refs.custom.initialize();
- *     }
- *   });
- *
- * Refs should rarely be used. When refs are used, they should only be done to
- * control data that is not handled by React's data flow.
- *
- * @class ReactOwner
- */
-var ReactOwner = {
-
-  /**
-   * @param {?object} object
-   * @return {boolean} True if `object` is a valid owner.
-   * @final
-   */
-  isValidOwner: function(object) {
-    return !!(
-      object &&
-      typeof object.attachRef === 'function' &&
-      typeof object.detachRef === 'function'
-    );
-  },
-
-  /**
-   * Adds a component by ref to an owner component.
-   *
-   * @param {ReactComponent} component Component to reference.
-   * @param {string} ref Name by which to refer to the component.
-   * @param {ReactOwner} owner Component on which to record the ref.
-   * @final
-   * @internal
-   */
-  addComponentAsRefTo: function(component, ref, owner) {
-    invariant(
-      ReactOwner.isValidOwner(owner),
-      'addComponentAsRefTo(...): Only a ReactOwner can have refs. This ' +
-      'usually means that you\'re trying to add a ref to a component that ' +
-      'doesn\'t have an owner (that is, was not created inside of another ' +
-      'component\'s `render` method). Try rendering this component inside of ' +
-      'a new top-level component which will hold the ref.'
-    );
-    owner.attachRef(ref, component);
-  },
-
-  /**
-   * Removes a component by ref from an owner component.
-   *
-   * @param {ReactComponent} component Component to dereference.
-   * @param {string} ref Name of the ref to remove.
-   * @param {ReactOwner} owner Component on which the ref is recorded.
-   * @final
-   * @internal
-   */
-  removeComponentAsRefFrom: function(component, ref, owner) {
-    invariant(
-      ReactOwner.isValidOwner(owner),
-      'removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This ' +
-      'usually means that you\'re trying to remove a ref to a component that ' +
-      'doesn\'t have an owner (that is, was not created inside of another ' +
-      'component\'s `render` method). Try rendering this component inside of ' +
-      'a new top-level component which will hold the ref.'
-    );
-    // Check that `component` is still the current ref because we do not want to
-    // detach the ref if another component stole it.
-    if (owner.refs[ref] === component) {
-      owner.detachRef(ref);
-    }
-  },
-
-  /**
-   * A ReactComponent must mix this in to have refs.
-   *
-   * @lends {ReactOwner.prototype}
-   */
-  Mixin: {
-
-    construct: function() {
-      this.refs = emptyObject;
-    },
-
-    /**
-     * Lazily allocates the refs object and stores `component` as `ref`.
-     *
-     * @param {string} ref Reference name.
-     * @param {component} component Component to store as `ref`.
-     * @final
-     * @private
-     */
-    attachRef: function(ref, component) {
-      invariant(
-        component.isOwnedBy(this),
-        'attachRef(%s, ...): Only a component\'s owner can store a ref to it.',
-        ref
-      );
-      var refs = this.refs === emptyObject ? (this.refs = {}) : this.refs;
-      refs[ref] = component;
-    },
-
-    /**
-     * Detaches a reference name.
-     *
-     * @param {string} ref Name to dereference.
-     * @final
-     * @private
-     */
-    detachRef: function(ref) {
-      delete this.refs[ref];
-    }
-
-  }
-
-};
-
-module.exports = ReactOwner;
diff --git a/src/core/ReactPropTransferer.js b/src/core/ReactPropTransferer.js
deleted file mode 100644
index a4f1ec5d94b..00000000000
--- a/src/core/ReactPropTransferer.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactPropTransferer
- */
-
-"use strict";
-
-var emptyFunction = require('emptyFunction');
-var invariant = require('invariant');
-var joinClasses = require('joinClasses');
-var merge = require('merge');
-var warning = require('warning');
-
-var didWarn = false;
-
-/**
- * Creates a transfer strategy that will merge prop values using the supplied
- * `mergeStrategy`. If a prop was previously unset, this just sets it.
- *
- * @param {function} mergeStrategy
- * @return {function}
- */
-function createTransferStrategy(mergeStrategy) {
-  return function(props, key, value) {
-    if (!props.hasOwnProperty(key)) {
-      props[key] = value;
-    } else {
-      props[key] = mergeStrategy(props[key], value);
-    }
-  };
-}
-
-var transferStrategyMerge = createTransferStrategy(function(a, b) {
-  // `merge` overrides the first object's (`props[key]` above) keys using the
-  // second object's (`value`) keys. An object's style's existing `propA` would
-  // get overridden. Flip the order here.
-  return merge(b, a);
-});
-
-/**
- * Transfer strategies dictate how props are transferred by `transferPropsTo`.
- * NOTE: if you add any more exceptions to this list you should be sure to
- * update `cloneWithProps()` accordingly.
- */
-var TransferStrategies = {
-  /**
-   * Never transfer `children`.
-   */
-  children: emptyFunction,
-  /**
-   * Transfer the `className` prop by merging them.
-   */
-  className: createTransferStrategy(joinClasses),
-  /**
-   * Transfer the `style` prop (which is an object) by merging them.
-   */
-  style: transferStrategyMerge
-};
-
-/**
- * Mutates the first argument by transferring the properties from the second
- * argument.
- *
- * @param {object} props
- * @param {object} newProps
- * @return {object}
- */
-function transferInto(props, newProps) {
-  for (var thisKey in newProps) {
-    if (!newProps.hasOwnProperty(thisKey)) {
-      continue;
-    }
-
-    var transferStrategy = TransferStrategies[thisKey];
-
-    if (transferStrategy && TransferStrategies.hasOwnProperty(thisKey)) {
-      transferStrategy(props, thisKey, newProps[thisKey]);
-    } else if (!props.hasOwnProperty(thisKey)) {
-      props[thisKey] = newProps[thisKey];
-    }
-  }
-  return props;
-}
-
-/**
- * ReactPropTransferer are capable of transferring props to another component
- * using a `transferPropsTo` method.
- *
- * @class ReactPropTransferer
- */
-var ReactPropTransferer = {
-
-  TransferStrategies: TransferStrategies,
-
-  /**
-   * Merge two props objects using TransferStrategies.
-   *
-   * @param {object} oldProps original props (they take precedence)
-   * @param {object} newProps new props to merge in
-   * @return {object} a new object containing both sets of props merged.
-   */
-  mergeProps: function(oldProps, newProps) {
-    return transferInto(merge(oldProps), newProps);
-  },
-
-  /**
-   * @lends {ReactPropTransferer.prototype}
-   */
-  Mixin: {
-
-    /**
-     * Transfer props from this component to a target component.
-     *
-     * Props that do not have an explicit transfer strategy will be transferred
-     * only if the target component does not already have the prop set.
-     *
-     * This is usually used to pass down props to a returned root component.
-     *
-     * @param {ReactDescriptor} descriptor Component receiving the properties.
-     * @return {ReactDescriptor} The supplied `component`.
-     * @final
-     * @protected
-     */
-    transferPropsTo: function(descriptor) {
-      invariant(
-        descriptor._owner === this,
-        '%s: You can\'t call transferPropsTo() on a component that you ' +
-        'don\'t own, %s. This usually means you are calling ' +
-        'transferPropsTo() on a component passed in as props or children.',
-        this.constructor.displayName,
-        descriptor.type.displayName
-      );
-
-      if (__DEV__) {
-        if (!didWarn) {
-          didWarn = true;
-          warning(
-            false,
-            'transferPropsTo is deprecated. ' +
-            'See http://fb.me/react-transferpropsto for more information.'
-          );
-        }
-      }
-
-      // Because descriptors are immutable we have to merge into the existing
-      // props object rather than clone it.
-      transferInto(descriptor.props, this.props);
-
-      return descriptor;
-    }
-
-  }
-};
-
-module.exports = ReactPropTransferer;
diff --git a/src/core/ReactPropTypeLocationNames.js b/src/core/ReactPropTypeLocationNames.js
deleted file mode 100644
index 5af6018be1d..00000000000
--- a/src/core/ReactPropTypeLocationNames.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactPropTypeLocationNames
- */
-
-"use strict";
-
-var ReactPropTypeLocationNames = {};
-
-if (__DEV__) {
-  ReactPropTypeLocationNames = {
-    prop: 'prop',
-    context: 'context',
-    childContext: 'child context'
-  };
-}
-
-module.exports = ReactPropTypeLocationNames;
diff --git a/src/core/ReactPropTypeLocations.js b/src/core/ReactPropTypeLocations.js
deleted file mode 100644
index 3ec99c2a1c3..00000000000
--- a/src/core/ReactPropTypeLocations.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactPropTypeLocations
- */
-
-"use strict";
-
-var keyMirror = require('keyMirror');
-
-var ReactPropTypeLocations = keyMirror({
-  prop: null,
-  context: null,
-  childContext: null
-});
-
-module.exports = ReactPropTypeLocations;
diff --git a/src/core/ReactPropTypes.js b/src/core/ReactPropTypes.js
deleted file mode 100644
index b7aa54b64f6..00000000000
--- a/src/core/ReactPropTypes.js
+++ /dev/null
@@ -1,343 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactPropTypes
- */
-
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');
-
-var emptyFunction = require('emptyFunction');
-
-/**
- * Collection of methods that allow declaration and validation of props that are
- * supplied to React components. Example usage:
- *
- *   var Props = require('ReactPropTypes');
- *   var MyArticle = React.createClass({
- *     propTypes: {
- *       // An optional string prop named "description".
- *       description: Props.string,
- *
- *       // A required enum prop named "category".
- *       category: Props.oneOf(['News','Photos']).isRequired,
- *
- *       // A prop named "dialog" that requires an instance of Dialog.
- *       dialog: Props.instanceOf(Dialog).isRequired
- *     },
- *     render: function() { ... }
- *   });
- *
- * A more formal specification of how these methods are used:
- *
- *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
- *   decl := ReactPropTypes.{type}(.isRequired)?
- *
- * Each and every declaration produces a function with the same signature. This
- * allows the creation of custom validation functions. For example:
- *
- *  var MyLink = React.createClass({
- *    propTypes: {
- *      // An optional string or URI prop named "href".
- *      href: function(props, propName, componentName) {
- *        var propValue = props[propName];
- *        if (propValue != null && typeof propValue !== 'string' &&
- *            !(propValue instanceof URI)) {
- *          return new Error(
- *            'Expected a string or an URI for ' + propName + ' in ' +
- *            componentName
- *          );
- *        }
- *      }
- *    },
- *    render: function() {...}
- *  });
- *
- * @internal
- */
-
-var ANONYMOUS = '<<anonymous>>';
-
-var ReactPropTypes = {
-  array: createPrimitiveTypeChecker('array'),
-  bool: createPrimitiveTypeChecker('boolean'),
-  func: createPrimitiveTypeChecker('function'),
-  number: createPrimitiveTypeChecker('number'),
-  object: createPrimitiveTypeChecker('object'),
-  string: createPrimitiveTypeChecker('string'),
-
-  any: createAnyTypeChecker(),
-  arrayOf: createArrayOfTypeChecker,
-  component: createComponentTypeChecker(),
-  instanceOf: createInstanceTypeChecker,
-  objectOf: createObjectOfTypeChecker,
-  oneOf: createEnumTypeChecker,
-  oneOfType: createUnionTypeChecker,
-  renderable: createRenderableTypeChecker(),
-  shape: createShapeTypeChecker
-};
-
-function createChainableTypeChecker(validate) {
-  function checkType(isRequired, props, propName, componentName, location) {
-    componentName = componentName || ANONYMOUS;
-    if (props[propName] == null) {
-      var locationName = ReactPropTypeLocationNames[location];
-      if (isRequired) {
-        return new Error(
-          `Required ${locationName} \`${propName}\` was not specified in `+
-          `\`${componentName}\`.`
-        );
-      }
-    } else {
-      return validate(props, propName, componentName, location);
-    }
-  }
-
-  var chainedCheckType = checkType.bind(null, false);
-  chainedCheckType.isRequired = checkType.bind(null, true);
-
-  return chainedCheckType;
-}
-
-function createPrimitiveTypeChecker(expectedType) {
-  function validate(props, propName, componentName, location) {
-    var propValue = props[propName];
-    var propType = getPropType(propValue);
-    if (propType !== expectedType) {
-      var locationName = ReactPropTypeLocationNames[location];
-      // `propValue` being instance of, say, date/regexp, pass the 'object'
-      // check, but we can offer a more precise error message here rather than
-      // 'of type `object`'.
-      var preciseType = getPreciseType(propValue);
-
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` of type \`${preciseType}\` ` +
-        `supplied to \`${componentName}\`, expected \`${expectedType}\`.`
-      );
-    }
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createAnyTypeChecker() {
-  return createChainableTypeChecker(emptyFunction.thatReturns());
-}
-
-function createArrayOfTypeChecker(typeChecker) {
-  function validate(props, propName, componentName, location) {
-    var propValue = props[propName];
-    if (!Array.isArray(propValue)) {
-      var locationName = ReactPropTypeLocationNames[location];
-      var propType = getPropType(propValue);
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` of type ` +
-        `\`${propType}\` supplied to \`${componentName}\`, expected an array.`
-      );
-    }
-    for (var i = 0; i < propValue.length; i++) {
-      var error = typeChecker(propValue, i, componentName, location);
-      if (error instanceof Error) {
-        return error;
-      }
-    }
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createComponentTypeChecker() {
-  function validate(props, propName, componentName, location) {
-    if (!ReactDescriptor.isValidDescriptor(props[propName])) {
-      var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` supplied to ` +
-        `\`${componentName}\`, expected a React component.`
-      );
-    }
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createInstanceTypeChecker(expectedClass) {
-  function validate(props, propName, componentName, location) {
-    if (!(props[propName] instanceof expectedClass)) {
-      var locationName = ReactPropTypeLocationNames[location];
-      var expectedClassName = expectedClass.name || ANONYMOUS;
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` supplied to ` +
-        `\`${componentName}\`, expected instance of \`${expectedClassName}\`.`
-      );
-    }
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createEnumTypeChecker(expectedValues) {
-  function validate(props, propName, componentName, location) {
-    var propValue = props[propName];
-    for (var i = 0; i < expectedValues.length; i++) {
-      if (propValue === expectedValues[i]) {
-        return;
-      }
-    }
-
-    var locationName = ReactPropTypeLocationNames[location];
-    var valuesString = JSON.stringify(expectedValues);
-    return new Error(
-      `Invalid ${locationName} \`${propName}\` of value \`${propValue}\` ` +
-      `supplied to \`${componentName}\`, expected one of ${valuesString}.`
-    );
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createObjectOfTypeChecker(typeChecker) {
-  function validate(props, propName, componentName, location) {
-    var propValue = props[propName];
-    var propType = getPropType(propValue);
-    if (propType !== 'object') {
-      var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` of type ` +
-        `\`${propType}\` supplied to \`${componentName}\`, expected an object.`
-      );
-    }
-    for (var key in propValue) {
-      if (propValue.hasOwnProperty(key)) {
-        var error = typeChecker(propValue, key, componentName, location);
-        if (error instanceof Error) {
-          return error;
-        }
-      }
-    }
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createUnionTypeChecker(arrayOfTypeCheckers) {
-  function validate(props, propName, componentName, location) {
-    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
-      var checker = arrayOfTypeCheckers[i];
-      if (checker(props, propName, componentName, location) == null) {
-        return;
-      }
-    }
-
-    var locationName = ReactPropTypeLocationNames[location];
-    return new Error(
-      `Invalid ${locationName} \`${propName}\` supplied to ` +
-      `\`${componentName}\`.`
-    );
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createRenderableTypeChecker() {
-  function validate(props, propName, componentName, location) {
-    if (!isRenderable(props[propName])) {
-      var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` supplied to ` +
-        `\`${componentName}\`, expected a renderable prop.`
-      );
-    }
-  }
-  return createChainableTypeChecker(validate);
-}
-
-function createShapeTypeChecker(shapeTypes) {
-  function validate(props, propName, componentName, location) {
-    var propValue = props[propName];
-    var propType = getPropType(propValue);
-    if (propType !== 'object') {
-      var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        `Invalid ${locationName} \`${propName}\` of type \`${propType}\` ` +
-        `supplied to \`${componentName}\`, expected \`object\`.`
-      );
-    }
-    for (var key in shapeTypes) {
-      var checker = shapeTypes[key];
-      if (!checker) {
-        continue;
-      }
-      var error = checker(propValue, key, componentName, location);
-      if (error) {
-        return error;
-      }
-    }
-  }
-  return createChainableTypeChecker(validate, 'expected `object`');
-}
-
-function isRenderable(propValue) {
-  switch(typeof propValue) {
-    // TODO: this was probably written with the assumption that we're not
-    // returning `this.props.component` directly from `render`. This is
-    // currently not supported but we should, to make it consistent.
-    case 'number':
-    case 'string':
-      return true;
-    case 'boolean':
-      return !propValue;
-    case 'object':
-      if (Array.isArray(propValue)) {
-        return propValue.every(isRenderable);
-      }
-      if (ReactDescriptor.isValidDescriptor(propValue)) {
-        return true;
-      }
-      for (var k in propValue) {
-        if (!isRenderable(propValue[k])) {
-          return false;
-        }
-      }
-      return true;
-    default:
-      return false;
-  }
-}
-
-// Equivalent of `typeof` but with special handling for array and regexp.
-function getPropType(propValue) {
-  var propType = typeof propValue;
-  if (Array.isArray(propValue)) {
-    return 'array';
-  }
-  if (propValue instanceof RegExp) {
-    // Old webkits (at least until Android 4.0) return 'function' rather than
-    // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
-    // passes PropTypes.object.
-    return 'object';
-  }
-  return propType;
-}
-
-// This handles more types than `getPropType`. Only used for error messages.
-// See `createPrimitiveTypeChecker`.
-function getPreciseType(propValue) {
-  var propType = getPropType(propValue);
-  if (propType === 'object') {
-    if (propValue instanceof Date) {
-      return 'date';
-    } else if (propValue instanceof RegExp) {
-      return 'regexp';
-    }
-  }
-  return propType;
-}
-
-module.exports = ReactPropTypes;
diff --git a/src/core/ReactRootIndex.js b/src/core/ReactRootIndex.js
deleted file mode 100644
index 0c5757fc436..00000000000
--- a/src/core/ReactRootIndex.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactRootIndex
- * @typechecks
- */
-
-"use strict";
-
-var ReactRootIndexInjection = {
-  /**
-   * @param {function} _createReactRootIndex
-   */
-  injectCreateReactRootIndex: function(_createReactRootIndex) {
-    ReactRootIndex.createReactRootIndex = _createReactRootIndex;
-  }
-};
-
-var ReactRootIndex = {
-  createReactRootIndex: null,
-  injection: ReactRootIndexInjection
-};
-
-module.exports = ReactRootIndex;
diff --git a/src/core/ReactStateSetters.js b/src/core/ReactStateSetters.js
deleted file mode 100644
index 45f7f7c563c..00000000000
--- a/src/core/ReactStateSetters.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactStateSetters
- */
-
-"use strict";
-
-var ReactStateSetters = {
-  /**
-   * Returns a function that calls the provided function, and uses the result
-   * of that to set the component's state.
-   *
-   * @param {ReactCompositeComponent} component
-   * @param {function} funcReturningState Returned callback uses this to
-   *                                      determine how to update state.
-   * @return {function} callback that when invoked uses funcReturningState to
-   *                    determined the object literal to setState.
-   */
-  createStateSetter: function(component, funcReturningState) {
-    return function(a, b, c, d, e, f) {
-      var partialState = funcReturningState.call(component, a, b, c, d, e, f);
-      if (partialState) {
-        component.setState(partialState);
-      }
-    };
-  },
-
-  /**
-   * Returns a single-argument callback that can be used to update a single
-   * key in the component's state.
-   *
-   * Note: this is memoized function, which makes it inexpensive to call.
-   *
-   * @param {ReactCompositeComponent} component
-   * @param {string} key The key in the state that you should update.
-   * @return {function} callback of 1 argument which calls setState() with
-   *                    the provided keyName and callback argument.
-   */
-  createStateKeySetter: function(component, key) {
-    // Memoize the setters.
-    var cache = component.__keySetters || (component.__keySetters = {});
-    return cache[key] || (cache[key] = createStateKeySetter(component, key));
-  }
-};
-
-function createStateKeySetter(component, key) {
-  // Partial state is allocated outside of the function closure so it can be
-  // reused with every call, avoiding memory allocation when this function
-  // is called.
-  var partialState = {};
-  return function stateKeySetter(value) {
-    partialState[key] = value;
-    component.setState(partialState);
-  };
-}
-
-ReactStateSetters.Mixin = {
-  /**
-   * Returns a function that calls the provided function, and uses the result
-   * of that to set the component's state.
-   *
-   * For example, these statements are equivalent:
-   *
-   *   this.setState({x: 1});
-   *   this.createStateSetter(function(xValue) {
-   *     return {x: xValue};
-   *   })(1);
-   *
-   * @param {function} funcReturningState Returned callback uses this to
-   *                                      determine how to update state.
-   * @return {function} callback that when invoked uses funcReturningState to
-   *                    determined the object literal to setState.
-   */
-  createStateSetter: function(funcReturningState) {
-    return ReactStateSetters.createStateSetter(this, funcReturningState);
-  },
-
-  /**
-   * Returns a single-argument callback that can be used to update a single
-   * key in the component's state.
-   *
-   * For example, these statements are equivalent:
-   *
-   *   this.setState({x: 1});
-   *   this.createStateKeySetter('x')(1);
-   *
-   * Note: this is memoized function, which makes it inexpensive to call.
-   *
-   * @param {string} key The key in the state that you should update.
-   * @return {function} callback of 1 argument which calls setState() with
-   *                    the provided keyName and callback argument.
-   */
-  createStateKeySetter: function(key) {
-    return ReactStateSetters.createStateKeySetter(this, key);
-  }
-};
-
-module.exports = ReactStateSetters;
diff --git a/src/core/ReactUpdates.js b/src/core/ReactUpdates.js
deleted file mode 100644
index 8bad4f43094..00000000000
--- a/src/core/ReactUpdates.js
+++ /dev/null
@@ -1,292 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactUpdates
- */
-
-"use strict";
-
-var CallbackQueue = require('CallbackQueue');
-var PooledClass = require('PooledClass');
-var ReactCurrentOwner = require('ReactCurrentOwner');
-var ReactPerf = require('ReactPerf');
-var Transaction = require('Transaction');
-
-var invariant = require('invariant');
-var mixInto = require('mixInto');
-var warning = require('warning');
-
-var dirtyComponents = [];
-var setImmediateCallbackQueue = CallbackQueue.getPooled();
-var setImmediateEnqueued = false;
-
-var batchingStrategy = null;
-
-function ensureInjected() {
-  invariant(
-    ReactUpdates.ReactReconcileTransaction && batchingStrategy,
-    'ReactUpdates: must inject a reconcile transaction class and batching ' +
-    'strategy'
-  );
-}
-
-var NESTED_UPDATES = {
-  initialize: function() {
-    this.dirtyComponentsLength = dirtyComponents.length;
-  },
-  close: function() {
-    if (this.dirtyComponentsLength !== dirtyComponents.length) {
-      // Additional updates were enqueued by componentDidUpdate handlers or
-      // similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
-      // these new updates so that if A's componentDidUpdate calls setState on
-      // B, B will update before the callback A's updater provided when calling
-      // setState.
-      dirtyComponents.splice(0, this.dirtyComponentsLength);
-      flushBatchedUpdates();
-    } else {
-      dirtyComponents.length = 0;
-    }
-  }
-};
-
-var UPDATE_QUEUEING = {
-  initialize: function() {
-    this.callbackQueue.reset();
-  },
-  close: function() {
-    this.callbackQueue.notifyAll();
-  }
-};
-
-var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];
-
-function ReactUpdatesFlushTransaction() {
-  this.reinitializeTransaction();
-  this.dirtyComponentsLength = null;
-  this.callbackQueue = CallbackQueue.getPooled();
-  this.reconcileTransaction =
-    ReactUpdates.ReactReconcileTransaction.getPooled();
-}
-
-mixInto(ReactUpdatesFlushTransaction, Transaction.Mixin);
-mixInto(ReactUpdatesFlushTransaction, {
-  getTransactionWrappers: function() {
-    return TRANSACTION_WRAPPERS;
-  },
-
-  destructor: function() {
-    this.dirtyComponentsLength = null;
-    CallbackQueue.release(this.callbackQueue);
-    this.callbackQueue = null;
-    ReactUpdates.ReactReconcileTransaction.release(this.reconcileTransaction);
-    this.reconcileTransaction = null;
-  },
-
-  perform: function(method, scope, a) {
-    // Essentially calls `this.reconcileTransaction.perform(method, scope, a)`
-    // with this transaction's wrappers around it.
-    return Transaction.Mixin.perform.call(
-      this,
-      this.reconcileTransaction.perform,
-      this.reconcileTransaction,
-      method,
-      scope,
-      a
-    );
-  }
-});
-
-PooledClass.addPoolingTo(ReactUpdatesFlushTransaction);
-
-function batchedUpdates(callback, a, b) {
-  ensureInjected();
-  batchingStrategy.batchedUpdates(callback, a, b);
-}
-
-/**
- * Array comparator for ReactComponents by owner depth
- *
- * @param {ReactComponent} c1 first component you're comparing
- * @param {ReactComponent} c2 second component you're comparing
- * @return {number} Return value usable by Array.prototype.sort().
- */
-function mountDepthComparator(c1, c2) {
-  return c1._mountDepth - c2._mountDepth;
-}
-
-function runBatchedUpdates(transaction) {
-  var len = transaction.dirtyComponentsLength;
-  invariant(
-    len === dirtyComponents.length,
-    'Expected flush transaction\'s stored dirty-components length (%s) to ' +
-    'match dirty-components array length (%s).',
-    len,
-    dirtyComponents.length
-  );
-
-  // Since reconciling a component higher in the owner hierarchy usually (not
-  // always -- see shouldComponentUpdate()) will reconcile children, reconcile
-  // them before their children by sorting the array.
-  dirtyComponents.sort(mountDepthComparator);
-
-  for (var i = 0; i < len; i++) {
-    // If a component is unmounted before pending changes apply, ignore them
-    // TODO: Queue unmounts in the same list to avoid this happening at all
-    var component = dirtyComponents[i];
-    if (component.isMounted()) {
-      // If performUpdateIfNecessary happens to enqueue any new updates, we
-      // shouldn't execute the callbacks until the next render happens, so
-      // stash the callbacks first
-      var callbacks = component._pendingCallbacks;
-      component._pendingCallbacks = null;
-      component.performUpdateIfNecessary(transaction.reconcileTransaction);
-
-      if (callbacks) {
-        for (var j = 0; j < callbacks.length; j++) {
-          transaction.callbackQueue.enqueue(
-            callbacks[j],
-            component
-          );
-        }
-      }
-    }
-  }
-}
-
-var flushBatchedUpdates = ReactPerf.measure(
-  'ReactUpdates',
-  'flushBatchedUpdates',
-  function() {
-    // ReactUpdatesFlushTransaction's wrappers will clear the dirtyComponents
-    // array and perform any updates enqueued by mount-ready handlers (i.e.,
-    // componentDidUpdate) but we need to check here too in order to catch
-    // updates enqueued by setState callbacks and setImmediate calls.
-    while (dirtyComponents.length || setImmediateEnqueued) {
-      if (dirtyComponents.length) {
-        var transaction = ReactUpdatesFlushTransaction.getPooled();
-        transaction.perform(runBatchedUpdates, null, transaction);
-        ReactUpdatesFlushTransaction.release(transaction);
-      }
-
-      if (setImmediateEnqueued) {
-        setImmediateEnqueued = false;
-        var queue = setImmediateCallbackQueue;
-        setImmediateCallbackQueue = CallbackQueue.getPooled();
-        queue.notifyAll();
-        CallbackQueue.release(queue);
-      }
-    }
-  }
-);
-
-/**
- * Mark a component as needing a rerender, adding an optional callback to a
- * list of functions which will be executed once the rerender occurs.
- */
-function enqueueUpdate(component, callback) {
-  invariant(
-    !callback || typeof callback === "function",
-    'enqueueUpdate(...): You called `setProps`, `replaceProps`, ' +
-    '`setState`, `replaceState`, or `forceUpdate` with a callback that ' +
-    'isn\'t callable.'
-  );
-  ensureInjected();
-
-  // Various parts of our code (such as ReactCompositeComponent's
-  // _renderValidatedComponent) assume that calls to render aren't nested;
-  // verify that that's the case. (This is called by each top-level update
-  // function, like setProps, setState, forceUpdate, etc.; creation and
-  // destruction of top-level components is guarded in ReactMount.)
-  warning(
-    ReactCurrentOwner.current == null,
-    'enqueueUpdate(): 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.'
-  );
-
-  if (!batchingStrategy.isBatchingUpdates) {
-    batchingStrategy.batchedUpdates(enqueueUpdate, component, callback);
-    return;
-  }
-
-  dirtyComponents.push(component);
-
-  if (callback) {
-    if (component._pendingCallbacks) {
-      component._pendingCallbacks.push(callback);
-    } else {
-      component._pendingCallbacks = [callback];
-    }
-  }
-}
-
-/**
- * Enqueue a callback to be run at the end of the current batching cycle. Throws
- * if no updates are currently being performed.
- */
-function setImmediate(callback, context) {
-  invariant(
-    batchingStrategy.isBatchingUpdates,
-    'ReactUpdates.setImmediate: Can\'t enqueue an immediate callback in a ' +
-    'context where updates are not being batched.'
-  );
-  setImmediateCallbackQueue.enqueue(callback, context);
-  setImmediateEnqueued = true;
-}
-
-var ReactUpdatesInjection = {
-  injectReconcileTransaction: function(ReconcileTransaction) {
-    invariant(
-      ReconcileTransaction,
-      'ReactUpdates: must provide a reconcile transaction class'
-    );
-    ReactUpdates.ReactReconcileTransaction = ReconcileTransaction;
-  },
-
-  injectBatchingStrategy: function(_batchingStrategy) {
-    invariant(
-      _batchingStrategy,
-      'ReactUpdates: must provide a batching strategy'
-    );
-    invariant(
-      typeof _batchingStrategy.batchedUpdates === 'function',
-      'ReactUpdates: must provide a batchedUpdates() function'
-    );
-    invariant(
-      typeof _batchingStrategy.isBatchingUpdates === 'boolean',
-      'ReactUpdates: must provide an isBatchingUpdates boolean attribute'
-    );
-    batchingStrategy = _batchingStrategy;
-  }
-};
-
-var ReactUpdates = {
-  /**
-   * React references `ReactReconcileTransaction` using this property in order
-   * to allow dependency injection.
-   *
-   * @internal
-   */
-  ReactReconcileTransaction: null,
-
-  batchedUpdates: batchedUpdates,
-  enqueueUpdate: enqueueUpdate,
-  flushBatchedUpdates: flushBatchedUpdates,
-  injection: ReactUpdatesInjection,
-  setImmediate: setImmediate
-};
-
-module.exports = ReactUpdates;
diff --git a/src/core/__tests__/ReactBind-test.js b/src/core/__tests__/ReactBind-test.js
deleted file mode 100644
index f82e01503dd..00000000000
--- a/src/core/__tests__/ReactBind-test.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-/*global global:true*/
-"use strict";
-
-var mocks = require('mocks');
-var React = require('React');
-var ReactDoNotBindDeprecated = require('ReactDoNotBindDeprecated');
-var ReactTestUtils = require('ReactTestUtils');
-var reactComponentExpect = require('reactComponentExpect');
-
-// TODO: Test render and all stock methods.
-describe('autobinding', function() {
-
-  it('Holds reference to instance', function() {
-
-    var mouseDidEnter = mocks.getMockFunction();
-    var mouseDidLeave = mocks.getMockFunction();
-    var mouseDidClick = mocks.getMockFunction();
-
-    var TestBindComponent = React.createClass({
-      getInitialState: function() {
-        return {something: 'hi'};
-      },
-      onMouseEnter: ReactDoNotBindDeprecated.doNotBind(mouseDidEnter),
-      onMouseLeave: ReactDoNotBindDeprecated.doNotBind(mouseDidLeave),
-      onClick: mouseDidClick,
-
-      // auto binding only occurs on top level functions in class defs.
-      badIdeas: {
-        badBind: function() {
-          this.state.something;
-        }
-      },
-
-      render: function() {
-        return (
-          <div
-            onMouseOver={this.onMouseEnter.bind(this)}
-            onMouseOut={this.onMouseLeave}
-            onClick={this.onClick}
-          />
-        );
-      }
-    });
-
-    var instance1 = <TestBindComponent />;
-    var mountedInstance1 = ReactTestUtils.renderIntoDocument(instance1);
-    var rendered1 = reactComponentExpect(mountedInstance1)
-      .expectRenderedChild()
-      .instance();
-
-    var instance2 = <TestBindComponent />;
-    var mountedInstance2 = ReactTestUtils.renderIntoDocument(instance2);
-    var rendered2 = reactComponentExpect(mountedInstance2)
-      .expectRenderedChild()
-      .instance();
-
-    expect(function() {
-      var badIdea = instance1.badIdeas.badBind;
-      badIdea();
-    }).toThrow();
-
-    expect(mountedInstance1.onMouseEnter).toBe(mountedInstance2.onMouseEnter);
-    expect(mountedInstance1.onMouseLeave).toBe(mountedInstance2.onMouseLeave);
-    expect(mountedInstance1.onClick).not.toBe(mountedInstance2.onClick);
-
-    ReactTestUtils.Simulate.click(rendered1);
-    expect(mouseDidClick.mock.instances.length).toBe(1);
-    expect(mouseDidClick.mock.instances[0]).toBe(mountedInstance1);
-
-    ReactTestUtils.Simulate.click(rendered2);
-    expect(mouseDidClick.mock.instances.length).toBe(2);
-    expect(mouseDidClick.mock.instances[1]).toBe(mountedInstance2);
-
-    ReactTestUtils.Simulate.mouseOver(rendered1);
-    expect(mouseDidEnter.mock.instances.length).toBe(1);
-    expect(mouseDidEnter.mock.instances[0]).toBe(mountedInstance1);
-
-    ReactTestUtils.Simulate.mouseOver(rendered2);
-    expect(mouseDidEnter.mock.instances.length).toBe(2);
-    expect(mouseDidEnter.mock.instances[1]).toBe(mountedInstance2);
-
-    ReactTestUtils.Simulate.mouseOut(rendered1);
-    expect(mouseDidLeave.mock.instances.length).toBe(1);
-    expect(mouseDidLeave.mock.instances[0]).toBe(global);
-
-    ReactTestUtils.Simulate.mouseOut(rendered2);
-    expect(mouseDidLeave.mock.instances.length).toBe(2);
-    expect(mouseDidLeave.mock.instances[1]).toBe(global);
-  });
-
-  it('works with mixins', function() {
-    var mouseDidClick = mocks.getMockFunction();
-
-    var TestMixin = {
-      onClick: mouseDidClick
-    };
-
-    var TestBindComponent = React.createClass({
-      mixins: [TestMixin],
-
-      render: function() {
-        return <div onClick={this.onClick} />;
-      }
-    });
-
-    var instance1 = <TestBindComponent />;
-    var mountedInstance1 = ReactTestUtils.renderIntoDocument(instance1);
-    var rendered1 = reactComponentExpect(mountedInstance1)
-      .expectRenderedChild()
-      .instance();
-
-    ReactTestUtils.Simulate.click(rendered1);
-    expect(mouseDidClick.mock.instances.length).toBe(1);
-    expect(mouseDidClick.mock.instances[0]).toBe(mountedInstance1);
-  });
-
-});
diff --git a/src/core/__tests__/ReactComponent-test.js b/src/core/__tests__/ReactComponent-test.js
deleted file mode 100644
index 71067e15eb4..00000000000
--- a/src/core/__tests__/ReactComponent-test.js
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTestUtils;
-
-var reactComponentExpect;
-
-describe('ReactComponent', function() {
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    reactComponentExpect = require('reactComponentExpect');
-  });
-
-  it('should throw on invalid render targets', function() {
-    var container = document.createElement('div');
-    // jQuery objects are basically arrays; people often pass them in by mistake
-    expect(function() {
-      React.renderComponent(<div></div>, [container]);
-    }).toThrow(
-      'Invariant Violation: _registerComponent(...): Target container ' +
-      'is not a DOM element.'
-    );
-
-    expect(function() {
-      React.renderComponent(<div></div>, null);
-    }).toThrow(
-      'Invariant Violation: _registerComponent(...): Target container ' +
-      'is not a DOM element.'
-    );
-  });
-
-  it('should throw when supplying a ref outside of render method', function() {
-    var instance = <div ref="badDiv" />;
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow();
-  });
-
-  it('should throw when attempting to hijack a ref', function() {
-    var Component = React.createClass({
-      render: function() {
-        var child = this.props.child;
-        this.attachRef('test', child);
-        return child;
-      }
-    });
-
-    var childInstance = ReactTestUtils.renderIntoDocument(<span />);
-    var instance = <Component child={childInstance} />;
-
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow(
-      'Invariant Violation: attachRef(test, ...): Only a component\'s owner ' +
-      'can store a ref to it.'
-    );
-  });
-
-  it('should support refs on owned components', function() {
-    var innerObj = {}, outerObj = {};
-
-    var Wrapper = React.createClass({
-
-      getObject: function() {
-        return this.props.object;
-      },
-
-      render: function() {
-        return <div>{this.props.children}</div>;
-      }
-
-    });
-
-    var Component = React.createClass({
-      render: function() {
-        var inner = <Wrapper object={innerObj} ref="inner" />;
-        var outer = <Wrapper object={outerObj} ref="outer">{inner}</Wrapper>;
-        return outer;
-      },
-      componentDidMount: function() {
-        expect(this.refs.inner.getObject()).toEqual(innerObj);
-        expect(this.refs.outer.getObject()).toEqual(outerObj);
-      }
-    });
-
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-  });
-
-  it('should not have refs on unmounted components', function() {
-    var Parent = React.createClass({
-      render: function() {
-        return <Child><div ref="test" /></Child>;
-      },
-      componentDidMount: function() {
-        expect(this.refs && this.refs.test).toEqual(undefined);
-      }
-    });
-    var Child = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = <Parent child={<span />} />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-  });
-
-  it('should correctly determine if a component is mounted', function() {
-    var Component = React.createClass({
-      componentWillMount: function() {
-        expect(this.isMounted()).toBeFalsy();
-      },
-      componentDidMount: function() {
-        expect(this.isMounted()).toBeTruthy();
-      },
-      render: function() {
-        return <div/>;
-      }
-    });
-
-    var descriptor = <Component />;
-
-    var instance = ReactTestUtils.renderIntoDocument(descriptor);
-    expect(instance.isMounted()).toBeTruthy();
-  });
-
-  it('should know its simple mount depth', function() {
-    var Owner = React.createClass({
-      render: function() {
-        return <Child ref="child" />;
-      }
-    });
-
-    var Child = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = <Owner />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance._mountDepth).toBe(0);
-    expect(instance.refs.child._mountDepth).toBe(1);
-  });
-
-  it('should know its (complicated) mount depth', function() {
-    var Box = React.createClass({
-      render: function() {
-        return <div ref="boxDiv">{this.props.children}</div>;
-      }
-    });
-
-    var Child = React.createClass({
-      render: function() {
-        return <span ref="span">child</span>;
-      }
-    });
-
-    var Switcher = React.createClass({
-      getInitialState: function() {
-        return {tabKey: 'hello'};
-      },
-
-      render: function() {
-        var child = this.props.children;
-
-        return (
-          <Box ref="box">
-            <div
-              ref="switcherDiv"
-              style={{
-                display: this.state.tabKey === child.key ? '' : 'none'
-            }}>
-              {child}
-            </div>
-          </Box>
-        );
-      }
-    });
-
-    var App = React.createClass({
-      render: function() {
-        return (
-          <Switcher ref="switcher">
-            <Child key="hello" ref="child" />
-          </Switcher>
-        );
-      }
-    });
-
-    var root = <App />;
-    root = ReactTestUtils.renderIntoDocument(root);
-
-    expect(root._mountDepth).toBe(0);
-    expect(root.refs.switcher._mountDepth).toBe(1);
-    expect(root.refs.switcher.refs.box._mountDepth).toBe(2);
-    expect(root.refs.switcher.refs.switcherDiv._mountDepth).toBe(4);
-    expect(root.refs.child._mountDepth).toBe(5);
-    expect(root.refs.switcher.refs.box.refs.boxDiv._mountDepth).toBe(3);
-    expect(root.refs.child.refs.span._mountDepth).toBe(6);
-  });
-});
diff --git a/src/core/__tests__/ReactComponentLifeCycle-test.js b/src/core/__tests__/ReactComponentLifeCycle-test.js
deleted file mode 100644
index 0aea7cdc3f4..00000000000
--- a/src/core/__tests__/ReactComponentLifeCycle-test.js
+++ /dev/null
@@ -1,530 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTestUtils;
-var ReactComponent;
-var ReactCompositeComponent;
-var ComponentLifeCycle;
-var CompositeComponentLifeCycle;
-
-var clone = function(o) {
-  return JSON.parse(JSON.stringify(o));
-};
-
-
-var GET_INIT_STATE_RETURN_VAL = {
-  hasWillMountCompleted: false,
-  hasRenderCompleted: false,
-  hasDidMountCompleted: false,
-  hasWillUnmountCompleted: false
-};
-
-var INIT_RENDER_STATE = {
-  hasWillMountCompleted: true,
-  hasRenderCompleted: false,
-  hasDidMountCompleted: false,
-  hasWillUnmountCompleted: false
-};
-
-var DID_MOUNT_STATE = {
-  hasWillMountCompleted: true,
-  hasRenderCompleted: true,
-  hasDidMountCompleted: false,
-  hasWillUnmountCompleted: false
-};
-
-var NEXT_RENDER_STATE = {
-  hasWillMountCompleted: true,
-  hasRenderCompleted: true,
-  hasDidMountCompleted: true,
-  hasWillUnmountCompleted: false
-};
-
-var WILL_UNMOUNT_STATE = {
-  hasWillMountCompleted: true,
-  hasDidMountCompleted: true,
-  hasRenderCompleted: true,
-  hasWillUnmountCompleted: false
-};
-
-var POST_WILL_UNMOUNT_STATE = {
-  hasWillMountCompleted: true,
-  hasDidMountCompleted: true,
-  hasRenderCompleted: true,
-  hasWillUnmountCompleted: true
-};
-
-/**
- * TODO: We should make any setState calls fail in
- * `getInitialState` and `componentWillMount`. They will usually fail
- * anyways because `this._renderedComponent` is empty, however, if a component
- * is *reused*, then that won't be the case and things will appear to work in
- * some cases. Better to just block all updates in initialization.
- */
-describe('ReactComponentLifeCycle', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    ReactComponent = require('ReactComponent');
-    ReactCompositeComponent = require('ReactCompositeComponent');
-    ComponentLifeCycle = ReactComponent.LifeCycle;
-    CompositeComponentLifeCycle = ReactCompositeComponent.LifeCycle;
-  });
-
-  it('should not reuse an instance when it has been unmounted', function() {
-    var container = document.createElement('div');
-    var StatefulComponent = React.createClass({
-      getInitialState: function() {
-        return { };
-      },
-      render: function() {
-        return (
-          <div></div>
-        );
-      }
-    });
-    var descriptor = <StatefulComponent />;
-    var firstInstance = React.renderComponent(descriptor, container);
-    React.unmountComponentAtNode(container);
-    var secondInstance = React.renderComponent(descriptor, container);
-    expect(firstInstance).not.toBe(secondInstance);
-  });
-
-  /**
-   * If a state update triggers rerendering that in turn fires an onDOMReady,
-   * that second onDOMReady should not fail.
-   */
-  it('it should fire onDOMReady when already in onDOMReady', function() {
-
-    var _testJournal = [];
-
-    var Child = React.createClass({
-      componentDidMount: function() {
-        _testJournal.push('Child:onDOMReady');
-      },
-      render: function() {
-        return <div></div>;
-      }
-    });
-
-    var SwitcherParent = React.createClass({
-      getInitialState: function() {
-        _testJournal.push('SwitcherParent:getInitialState');
-        return {showHasOnDOMReadyComponent: false};
-      },
-      componentDidMount: function() {
-        _testJournal.push('SwitcherParent:onDOMReady');
-        this.switchIt();
-      },
-      switchIt: function() {
-        this.setState({showHasOnDOMReadyComponent: true});
-      },
-      render: function() {
-        return (
-          <div>{
-            this.state.showHasOnDOMReadyComponent ?
-            <Child /> :
-            <div> </div>
-          }</div>
-        );
-      }
-    });
-
-    var instance = <SwitcherParent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(_testJournal).toEqual([
-      'SwitcherParent:getInitialState',
-      'SwitcherParent:onDOMReady',
-      'Child:onDOMReady'
-    ]);
-  });
-
-  // You could assign state here, but not access members of it, unless you
-  // had provided a getInitialState method.
-  it('throws when accessing state in componentWillMount', function() {
-    var StatefulComponent = React.createClass({
-      componentWillMount: function() {
-        this.state.yada;
-      },
-      render: function() {
-        return (
-          <div></div>
-        );
-      }
-    });
-    var instance = <StatefulComponent />;
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow();
-  });
-
-  it('should allow update state inside of componentWillMount', function() {
-    var StatefulComponent = React.createClass({
-      componentWillMount: function() {
-        this.setState({stateField: 'something'});
-      },
-      render: function() {
-        return (
-          <div></div>
-        );
-      }
-    });
-    var instance = <StatefulComponent />;
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).not.toThrow();
-  });
-
-  it('should allow update state inside of getInitialState', function() {
-    var StatefulComponent = React.createClass({
-      getInitialState: function() {
-        this.setState({stateField: 'something'});
-
-        return {stateField: 'somethingelse'};
-      },
-      render: function() {
-        return (
-          <div></div>
-        );
-      }
-    });
-    var instance = <StatefulComponent />;
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).not.toThrow();
-
-    // The return value of getInitialState overrides anything from setState
-    expect(instance.state.stateField).toEqual('somethingelse');
-  });
-
-
-  it('should carry through each of the phases of setup', function() {
-    var LifeCycleComponent = React.createClass({
-      getInitialState: function() {
-        this._testJournal = {};
-        var initState = {
-          hasWillMountCompleted: false,
-          hasDidMountCompleted: false,
-          hasRenderCompleted: false,
-          hasWillUnmountCompleted: false
-        };
-        this._testJournal.returnedFromGetInitialState = clone(initState);
-        this._testJournal.lifeCycleAtStartOfGetInitialState =
-          this._lifeCycleState;
-        this._testJournal.compositeLifeCycleAtStartOfGetInitialState =
-          this._compositeLifeCycleState;
-        return initState;
-      },
-
-      componentWillMount: function() {
-        this._testJournal.stateAtStartOfWillMount = clone(this.state);
-        this._testJournal.lifeCycleAtStartOfWillMount =
-          this._lifeCycleState;
-        this._testJournal.compositeLifeCycleAtStartOfWillMount =
-          this._compositeLifeCycleState;
-        this.state.hasWillMountCompleted = true;
-      },
-
-      componentDidMount: function() {
-        this._testJournal.stateAtStartOfDidMount = clone(this.state);
-        this._testJournal.lifeCycleAtStartOfDidMount =
-          this._lifeCycleState;
-        this.setState({hasDidMountCompleted: true});
-      },
-
-      render: function() {
-        var isInitialRender = !this.state.hasRenderCompleted;
-        if (isInitialRender) {
-          this._testJournal.stateInInitialRender = clone(this.state);
-          this._testJournal.lifeCycleInInitialRender = this._lifeCycleState;
-          this._testJournal.compositeLifeCycleInInitialRender =
-            this._compositeLifeCycleState;
-        } else {
-          this._testJournal.stateInLaterRender = clone(this.state);
-          this._testJournal.lifeCycleInLaterRender = this._lifeCycleState;
-        }
-        // you would *NEVER* do anything like this in real code!
-        this.state.hasRenderCompleted = true;
-        return (
-          <div ref="theDiv">
-            I am the inner DIV
-          </div>
-        );
-      },
-
-      componentWillUnmount: function() {
-        this._testJournal.stateAtStartOfWillUnmount = clone(this.state);
-        this._testJournal.lifeCycleAtStartOfWillUnmount =
-          this._lifeCycleState;
-        this.state.hasWillUnmountCompleted = true;
-      }
-    });
-
-    // A component that is merely "constructed" (as in "constructor") but not
-    // yet initialized, or rendered.
-    //
-    var instance = ReactTestUtils.renderIntoDocument(<LifeCycleComponent />);
-
-    // getInitialState
-    expect(instance._testJournal.returnedFromGetInitialState).toEqual(
-      GET_INIT_STATE_RETURN_VAL
-    );
-    expect(instance._testJournal.lifeCycleAtStartOfGetInitialState)
-      .toBe(ComponentLifeCycle.MOUNTED);
-    expect(instance._testJournal.compositeLifeCycleAtStartOfGetInitialState)
-      .toBe(CompositeComponentLifeCycle.MOUNTING);
-
-    // componentWillMount
-    expect(instance._testJournal.stateAtStartOfWillMount).toEqual(
-      instance._testJournal.returnedFromGetInitialState
-    );
-    expect(instance._testJournal.lifeCycleAtStartOfWillMount)
-      .toBe(ComponentLifeCycle.MOUNTED);
-    expect(instance._testJournal.compositeLifeCycleAtStartOfWillMount)
-      .toBe(CompositeComponentLifeCycle.MOUNTING);
-
-    // componentDidMount
-    expect(instance._testJournal.stateAtStartOfDidMount)
-      .toEqual(DID_MOUNT_STATE);
-    expect(instance._testJournal.lifeCycleAtStartOfDidMount).toBe(
-      ComponentLifeCycle.MOUNTED
-    );
-
-    // render
-    expect(instance._testJournal.stateInInitialRender)
-      .toEqual(INIT_RENDER_STATE);
-    expect(instance._testJournal.lifeCycleInInitialRender).toBe(
-      ComponentLifeCycle.MOUNTED
-    );
-    expect(instance._testJournal.compositeLifeCycleInInitialRender).toBe(
-      CompositeComponentLifeCycle.MOUNTING
-    );
-
-    expect(instance._lifeCycleState).toBe(ComponentLifeCycle.MOUNTED);
-
-    // Now *update the component*
-    instance.forceUpdate();
-
-    // render 2nd time
-    expect(instance._testJournal.stateInLaterRender)
-      .toEqual(NEXT_RENDER_STATE);
-    expect(instance._testJournal.lifeCycleInLaterRender).toBe(
-      ComponentLifeCycle.MOUNTED
-    );
-
-    expect(instance._lifeCycleState).toBe(ComponentLifeCycle.MOUNTED);
-
-    // Now *unmountComponent*
-    instance.unmountComponent();
-
-    expect(instance._testJournal.stateAtStartOfWillUnmount)
-      .toEqual(WILL_UNMOUNT_STATE);
-    // componentWillUnmount called right before unmount.
-    expect(instance._testJournal.lifeCycleAtStartOfWillUnmount).toBe(
-      ComponentLifeCycle.MOUNTED
-    );
-
-    // But the current lifecycle of the component is unmounted.
-    expect(instance._lifeCycleState).toBe(ComponentLifeCycle.UNMOUNTED);
-    expect(instance.state).toEqual(POST_WILL_UNMOUNT_STATE);
-  });
-
-  it('should throw when calling setProps() on an owned component', function() {
-    /**
-     * calls setProps in an componentDidMount.
-     */
-    var PropsUpdaterInOnDOMReady = React.createClass({
-      componentDidMount: function() {
-        this.refs.theSimpleComponent.setProps({
-          valueToUseInitially: this.props.valueToUseInOnDOMReady
-        });
-      },
-      render: function() {
-        return (
-          <div
-            className={this.props.valueToUseInitially}
-            ref="theSimpleComponent"
-          />
-        );
-      }
-    });
-    var instance =
-      <PropsUpdaterInOnDOMReady
-        valueToUseInitially="hello"
-        valueToUseInOnDOMReady="goodbye"
-      />;
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow(
-      'Invariant Violation: replaceProps(...): You called `setProps` or ' +
-      '`replaceProps` on a component with a parent. This is an anti-pattern ' +
-      'since props will get reactively updated when rendered. Instead, ' +
-      'change the owner\'s `render` method to pass the correct value as ' +
-      'props to the component where it is created.'
-    );
-  });
-
-  it('should not throw when updating an auxiliary component', function() {
-    var Tooltip = React.createClass({
-      render: function() {
-        return <div>{this.props.children}</div>;
-      },
-      componentDidMount: function() {
-        this.container = document.createElement('div');
-        this.updateTooltip();
-      },
-      componentDidUpdate: function() {
-        this.updateTooltip();
-      },
-      updateTooltip: function() {
-        // Even though this.props.tooltip has an owner, updating it shouldn't
-        // throw here because it's mounted as a root component
-        React.renderComponent(this.props.tooltip, this.container);
-      }
-    });
-    var Component = React.createClass({
-      render: function() {
-        return (
-          <Tooltip
-              ref="tooltip"
-              tooltip={<div>{this.props.tooltipText}</div>}>
-            {this.props.text}
-          </Tooltip>
-        );
-      }
-    });
-
-    var container = document.createElement('div');
-    var instance = React.renderComponent(
-      <Component text="uno" tooltipText="one" />,
-      container
-    );
-
-    // Since `instance` is a root component, we can set its props. This also
-    // makes Tooltip rerender the tooltip component, which shouldn't throw.
-    instance.setProps({text: "dos", tooltipText: "two"});
-  });
-
-  it('should not allow setProps() called on an unmounted descriptor',
-     function() {
-    var PropsToUpdate = React.createClass({
-      render: function() {
-        return <div className={this.props.value} ref="theSimpleComponent" />;
-      }
-    });
-    var instance = <PropsToUpdate value="hello" />;
-    expect(instance.setProps).not.toBeDefined();
-  });
-
-  it('should allow state updates in componentDidMount', function() {
-    /**
-     * calls setState in an componentDidMount.
-     */
-    var SetStateInComponentDidMount = React.createClass({
-      getInitialState: function() {
-        return {
-          stateField: this.props.valueToUseInitially
-        };
-      },
-      componentDidMount: function() {
-        this.setState({stateField: this.props.valueToUseInOnDOMReady});
-      },
-      render: function() {
-        return (<div></div>);
-      }
-    });
-    var instance =
-      <SetStateInComponentDidMount
-        valueToUseInitially="hello"
-        valueToUseInOnDOMReady="goodbye"
-      />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state.stateField).toBe('goodbye');
-  });
-
-  it('should call nested lifecycle methods in the right order', function() {
-    var log;
-    var logger = function(msg) {
-      return function() {
-        // return true for shouldComponentUpdate
-        log.push(msg);
-        return true;
-      };
-    };
-    var Outer = React.createClass({
-      render: function() {
-        return <div><Inner x={this.props.x} /></div>;
-      },
-      componentWillMount: logger('outer componentWillMount'),
-      componentDidMount: logger('outer componentDidMount'),
-      componentWillReceiveProps: logger('outer componentWillReceiveProps'),
-      shouldComponentUpdate: logger('outer shouldComponentUpdate'),
-      componentWillUpdate: logger('outer componentWillUpdate'),
-      componentDidUpdate: logger('outer componentDidUpdate'),
-      componentWillUnmount: logger('outer componentWillUnmount')
-    });
-    var Inner = React.createClass({
-      render: function() {
-        return <span>{this.props.x}</span>;
-      },
-      componentWillMount: logger('inner componentWillMount'),
-      componentDidMount: logger('inner componentDidMount'),
-      componentWillReceiveProps: logger('inner componentWillReceiveProps'),
-      shouldComponentUpdate: logger('inner shouldComponentUpdate'),
-      componentWillUpdate: logger('inner componentWillUpdate'),
-      componentDidUpdate: logger('inner componentDidUpdate'),
-      componentWillUnmount: logger('inner componentWillUnmount')
-    });
-    var instance;
-
-    log = [];
-    instance = ReactTestUtils.renderIntoDocument(<Outer x={17} />);
-    expect(log).toEqual([
-      'outer componentWillMount',
-      'inner componentWillMount',
-      'inner componentDidMount',
-      'outer componentDidMount'
-    ]);
-
-    log = [];
-    instance.setProps({x: 42});
-    expect(log).toEqual([
-      'outer componentWillReceiveProps',
-      'outer shouldComponentUpdate',
-      'outer componentWillUpdate',
-      'inner componentWillReceiveProps',
-      'inner shouldComponentUpdate',
-      'inner componentWillUpdate',
-      'inner componentDidUpdate',
-      'outer componentDidUpdate'
-    ]);
-
-    log = [];
-    instance.unmountComponent();
-    expect(log).toEqual([
-      'outer componentWillUnmount',
-      'inner componentWillUnmount'
-    ]);
-  });
-});
-
diff --git a/src/core/__tests__/ReactCompositeComponent-test.js b/src/core/__tests__/ReactCompositeComponent-test.js
deleted file mode 100644
index abfedc5dee7..00000000000
--- a/src/core/__tests__/ReactCompositeComponent-test.js
+++ /dev/null
@@ -1,1425 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var ChildUpdates;
-var MorphingComponent;
-var React;
-var ReactComponent;
-var ReactCurrentOwner;
-var ReactDoNotBindDeprecated;
-var ReactMount;
-var ReactPropTypes;
-var ReactServerRendering;
-var ReactTestUtils;
-var TogglingComponent;
-
-var cx;
-var reactComponentExpect;
-var mocks;
-var warn;
-
-
-describe('ReactCompositeComponent', function() {
-
-  beforeEach(function() {
-    cx = require('cx');
-    mocks = require('mocks');
-
-    reactComponentExpect = require('reactComponentExpect');
-    React = require('React');
-    ReactComponent = require('ReactComponent');
-    ReactCurrentOwner = require('ReactCurrentOwner');
-    ReactDoNotBindDeprecated = require('ReactDoNotBindDeprecated');
-    ReactPropTypes = require('ReactPropTypes');
-    ReactTestUtils = require('ReactTestUtils');
-    ReactMount = require('ReactMount');
-    ReactServerRendering = require('ReactServerRendering');
-
-    MorphingComponent = React.createClass({
-      getInitialState: function() {
-        return {activated: false};
-      },
-
-      _toggleActivatedState: function() {
-        this.setState({activated: !this.state.activated});
-      },
-
-      render: function() {
-        var toggleActivatedState = this._toggleActivatedState;
-        return !this.state.activated ?
-          <a ref="x" onClick={toggleActivatedState} /> :
-          <b ref="x" onClick={toggleActivatedState} />;
-      }
-    });
-
-    /**
-     * We'll use this to ensure that an old version is not cached when it is
-     * reallocated again.
-     */
-    ChildUpdates = React.createClass({
-      getAnchorID: function() {
-        return this.refs.anch._rootNodeID;
-      },
-      render: function() {
-        var className = cx({'anchorClass': this.props.anchorClassOn});
-        return this.props.renderAnchor ?
-          <a ref="anch" className={className}></a> :
-          <b></b>;
-      }
-    });
-
-    TogglingComponent = React.createClass({
-      getInitialState: function() {
-        return {component: this.props.firstComponent};
-      },
-      componentDidMount: function() {
-        console.log(this.getDOMNode());
-        this.setState({component: this.props.secondComponent});
-      },
-      componentDidUpdate: function() {
-        console.log(this.getDOMNode());
-      },
-      render: function() {
-        return this.state.component ? this.state.component() : null;
-      }
-    });
-
-    warn = console.warn;
-    console.warn = mocks.getMockFunction();
-  });
-
-  afterEach(function() {
-    console.warn = warn;
-  });
-
-  it('should give context for PropType errors in nested components.', () => {
-    // In this test, we're making sure that if a proptype error is found in a
-    // component, we give a small hint as to which parent instantiated that
-    // component as per warnings about key usage in ReactDescriptorValidator.
-    spyOn(console, 'warn');
-    var MyComp = React.createClass({
-      propTypes: {
-        color: ReactPropTypes.string
-      },
-      render: function() {
-        return <div>My color is {this.color}</div>;
-      }
-    });
-    var ParentComp = React.createClass({
-      render: function() {
-        return <MyComp color={123} />;
-      }
-    });
-    ReactTestUtils.renderIntoDocument(<ParentComp />);
-    expect(console.warn.calls[0].args[0]).toBe(
-      'Warning: Invalid prop `color` of type `number` supplied to `MyComp`, ' +
-      'expected `string`. Check the render method of `ParentComp`.'
-    );
-  });
-
-  it('should support rendering to different child types over time', function() {
-    var instance = <MorphingComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-      .toBeDOMComponentWithTag('a');
-
-    instance._toggleActivatedState();
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-      .toBeDOMComponentWithTag('b');
-
-    instance._toggleActivatedState();
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-      .toBeDOMComponentWithTag('a');
-  });
-
-  it('should render null and false as a noscript tag under the hood', () => {
-    var Component1 = React.createClass({
-      render: function() {
-        return null;
-      }
-    });
-    var Component2 = React.createClass({
-      render: function() {
-        return false;
-      }
-    });
-
-    var instance1 = ReactTestUtils.renderIntoDocument(<Component1 />);
-    var instance2 = ReactTestUtils.renderIntoDocument(<Component2 />);
-    reactComponentExpect(instance1)
-      .expectRenderedChild()
-      .toBeDOMComponentWithTag('noscript');
-    reactComponentExpect(instance2)
-      .expectRenderedChild()
-      .toBeDOMComponentWithTag('noscript');
-  });
-
-  it('should still throw when rendering to undefined', () => {
-    var Component = React.createClass({
-      render: function() {}
-    });
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(<Component />);
-    }).toThrow(
-      'Invariant Violation: Component.render(): A valid ReactComponent must ' +
-      'be returned. You may have returned undefined, an array or some other ' +
-      'invalid object.'
-    );
-  });
-
-  it('should be able to switch between rendering null and a normal tag', () => {
-    spyOn(console, 'log');
-
-    var instance1 =
-      <TogglingComponent
-        firstComponent={null}
-        secondComponent={React.DOM.div}
-      />;
-    var instance2 =
-      <TogglingComponent
-        firstComponent={React.DOM.div}
-        secondComponent={null}
-      />;
-
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(instance1);
-      ReactTestUtils.renderIntoDocument(instance2);
-    }).not.toThrow();
-
-    expect(console.log.argsForCall.length).toBe(4);
-    expect(console.log.argsForCall[0][0]).toBe(null);
-    expect(console.log.argsForCall[1][0].tagName).toBe('DIV');
-    expect(console.log.argsForCall[2][0].tagName).toBe('DIV');
-    expect(console.log.argsForCall[3][0]).toBe(null);
-  });
-
-  it('should distinguish between a script placeholder and an actual script tag',
-    () => {
-      spyOn(console, 'log');
-
-      var instance1 =
-        <TogglingComponent
-          firstComponent={null}
-          secondComponent={React.DOM.script}
-        />;
-      var instance2 =
-        <TogglingComponent
-          firstComponent={React.DOM.script}
-          secondComponent={null}
-        />;
-
-      expect(function() {
-        ReactTestUtils.renderIntoDocument(instance1);
-      }).not.toThrow();
-      expect(function() {
-        ReactTestUtils.renderIntoDocument(instance2);
-      }).not.toThrow();
-
-      expect(console.log.argsForCall.length).toBe(4);
-      expect(console.log.argsForCall[0][0]).toBe(null);
-      expect(console.log.argsForCall[1][0].tagName).toBe('SCRIPT');
-      expect(console.log.argsForCall[2][0].tagName).toBe('SCRIPT');
-      expect(console.log.argsForCall[3][0]).toBe(null);
-    }
-  );
-
-  it('should have getDOMNode return null when multiple layers of composite ' +
-    'components render to the same null placeholder', () => {
-      spyOn(console, 'log');
-
-      var GrandChild = React.createClass({
-        render: function() {
-          return null;
-        }
-      });
-
-      var Child = React.createClass({
-        render: function() {
-          return <GrandChild />;
-        }
-      });
-
-      var instance1 =
-        <TogglingComponent
-          firstComponent={React.DOM.div}
-          secondComponent={Child}
-        />;
-      var instance2 =
-        <TogglingComponent
-          firstComponent={Child}
-          secondComponent={React.DOM.div}
-        />;
-
-      expect(function() {
-        ReactTestUtils.renderIntoDocument(instance1);
-      }).not.toThrow();
-      expect(function() {
-        ReactTestUtils.renderIntoDocument(instance2);
-      }).not.toThrow();
-
-      expect(console.log.argsForCall.length).toBe(4);
-      expect(console.log.argsForCall[0][0].tagName).toBe('DIV');
-      expect(console.log.argsForCall[1][0]).toBe(null);
-      expect(console.log.argsForCall[2][0]).toBe(null);
-      expect(console.log.argsForCall[3][0].tagName).toBe('DIV');
-    }
-  );
-
-  it('should not thrash a server rendered layout with client side one', () => {
-    var Child = React.createClass({
-      render: function() {
-        return null;
-      }
-    });
-    var Parent = React.createClass({
-      render: function() {
-        return <div><Child /></div>;
-      }
-    });
-
-    var markup = ReactServerRendering.renderComponentToString(<Parent />);
-    var container = document.createElement('div');
-    container.innerHTML = markup;
-
-    spyOn(console, 'warn');
-    React.renderComponent(<Parent />, container);
-    expect(console.warn).not.toHaveBeenCalled();
-  });
-
-  it('should react to state changes from callbacks', function() {
-    var instance = <MorphingComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    var renderedChild = reactComponentExpect(instance)
-      .expectRenderedChild()
-      .instance();
-
-    ReactTestUtils.Simulate.click(renderedChild);
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-      .toBeDOMComponentWithTag('b');
-  });
-
-  it('should rewire refs when rendering to different child types', function() {
-    var instance = <MorphingComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    reactComponentExpect(instance.refs.x).toBeDOMComponentWithTag('a');
-    instance._toggleActivatedState();
-    reactComponentExpect(instance.refs.x).toBeDOMComponentWithTag('b');
-    instance._toggleActivatedState();
-    reactComponentExpect(instance.refs.x).toBeDOMComponentWithTag('a');
-  });
-
-  it('should not cache old DOM nodes when switching constructors', function() {
-    var instance = <ChildUpdates renderAnchor={true} anchorClassOn={false}/>;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    instance.setProps({anchorClassOn: true});  // Warm any cache
-    instance.setProps({renderAnchor: false});  // Clear out the anchor
-    // rerender
-    instance.setProps({renderAnchor: true, anchorClassOn: false});
-    var anchorID = instance.getAnchorID();
-    var actualDOMAnchorNode = ReactMount.getNode(anchorID);
-    expect(actualDOMAnchorNode.className).toBe('');
-  });
-
-  it('should auto bind methods and values correctly', function() {
-    spyOn(console, 'warn');
-
-    var ComponentClass = React.createClass({
-      getInitialState: function() {
-        return {valueToReturn: 'hi'};
-      },
-      methodToBeExplicitlyBound: function() {
-        return this;
-      },
-      methodAutoBound: function() {
-        return this;
-      },
-      methodExplicitlyNotBound: ReactDoNotBindDeprecated.doNotBind(function() {
-        return this;
-      }),
-      render: function() {
-        return <div></div>;
-      }
-    });
-    var instance = <ComponentClass />;
-
-    // Next, prove that once mounted, the scope is bound correctly to the actual
-    // component.
-    var mountedInstance = ReactTestUtils.renderIntoDocument(instance);
-
-    expect(function() {
-      mountedInstance.methodToBeExplicitlyBound.bind(instance)();
-    }).not.toThrow();
-    expect(function() {
-      mountedInstance.methodAutoBound();
-    }).not.toThrow();
-    expect(function() {
-      mountedInstance.methodExplicitlyNotBound();
-    }).not.toThrow();
-
-    expect(console.warn.argsForCall.length).toBe(1);
-    var explicitlyBound = mountedInstance.methodToBeExplicitlyBound.bind(
-      mountedInstance
-    );
-    expect(console.warn.argsForCall.length).toBe(2);
-    var autoBound = mountedInstance.methodAutoBound;
-    var explicitlyNotBound = mountedInstance.methodExplicitlyNotBound;
-
-    var context = {};
-    expect(explicitlyBound.call(context)).toBe(mountedInstance);
-    expect(autoBound.call(context)).toBe(mountedInstance);
-    expect(explicitlyNotBound.call(context)).toBe(context);
-
-    expect(explicitlyBound.call(mountedInstance)).toBe(mountedInstance);
-    expect(autoBound.call(mountedInstance)).toBe(mountedInstance);
-    // This one is the weird one
-    expect(explicitlyNotBound.call(mountedInstance)).toBe(mountedInstance);
-
-  });
-
-  it('should not pass this to getDefaultProps', function() {
-    var Component = React.createClass({
-      getDefaultProps: function() {
-        expect(this.render).not.toBeDefined();
-        return {};
-      },
-      render: function() {
-        return <div />;
-      }
-    });
-    ReactTestUtils.renderIntoDocument(<Component />);
-  });
-
-  it('should use default values for undefined props', function() {
-    var Component = React.createClass({
-      getDefaultProps: function() {
-        return {prop: 'testKey'};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-
-    var instance1 = <Component />;
-    instance1 = ReactTestUtils.renderIntoDocument(instance1);
-    reactComponentExpect(instance1).scalarPropsEqual({prop: 'testKey'});
-
-    var instance2 = <Component prop={undefined} />;
-    instance2 = ReactTestUtils.renderIntoDocument(instance2);
-    reactComponentExpect(instance2).scalarPropsEqual({prop: 'testKey'});
-
-    var instance3 = <Component prop={null} />;
-    instance3 = ReactTestUtils.renderIntoDocument(instance3);
-    reactComponentExpect(instance3).scalarPropsEqual({prop: null});
-  });
-
-  it('should not mutate passed-in props object', function() {
-    var Component = React.createClass({
-      getDefaultProps: function() {
-        return {prop: 'testKey'};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-
-    var inputProps = {};
-    var instance1 = Component(inputProps);
-    instance1 = ReactTestUtils.renderIntoDocument(instance1);
-    expect(instance1.props.prop).toBe('testKey');
-
-    // We don't mutate the input, just in case the caller wants to do something
-    // with it after using it to instantiate a component
-    expect(inputProps.prop).not.toBeDefined();
-  });
-
-  it('should use default prop value when removing a prop', function() {
-    var Component = React.createClass({
-      getDefaultProps: function() {
-        return {fruit: 'persimmon'};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-
-    var container = document.createElement('div');
-    var instance = React.renderComponent(
-      <Component fruit="mango" />,
-      container
-    );
-    expect(instance.props.fruit).toBe('mango');
-
-    React.renderComponent(<Component />, container);
-    expect(instance.props.fruit).toBe('persimmon');
-  });
-
-  it('should normalize props with default values', function() {
-    var Component = React.createClass({
-      propTypes: {prop: ReactPropTypes.string.isRequired},
-      getDefaultProps: function() {
-        return {prop: 'testKey'};
-      },
-      getInitialState: function() {
-        return {prop: this.props.prop + 'State'};
-      },
-      render: function() {
-        return <span>{this.props.prop}</span>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component />);
-    reactComponentExpect(instance).scalarPropsEqual({prop: 'testKey'});
-    reactComponentExpect(instance).scalarStateEqual({prop: 'testKeyState'});
-
-    ReactTestUtils.renderIntoDocument(<Component prop={null} />);
-
-    expect(console.warn.mock.calls.length).toBe(1);
-    expect(console.warn.mock.calls[0][0]).toBe(
-      'Warning: Required prop `prop` was not specified in `Component`.'
-    );
-  });
-
-  it('should check default prop values', function() {
-    var Component = React.createClass({
-      propTypes: {prop: ReactPropTypes.string.isRequired},
-      getDefaultProps: function() {
-        return {prop: null};
-      },
-      render: function() {
-        return <span>{this.props.prop}</span>;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Component />);
-
-    expect(console.warn.mock.calls.length).toBe(1);
-    expect(console.warn.mock.calls[0][0]).toBe(
-      'Warning: Required prop `prop` was not specified in `Component`.'
-    );
-  });
-
-  it('should check declared prop types', function() {
-    var Component = React.createClass({
-      propTypes: {
-        prop: ReactPropTypes.string.isRequired
-      },
-      render: function() {
-        return <span>{this.props.prop}</span>;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Component />);
-    ReactTestUtils.renderIntoDocument(<Component prop={42} />);
-
-    expect(console.warn.mock.calls.length).toBe(2);
-    expect(console.warn.mock.calls[0][0]).toBe(
-      'Warning: Required prop `prop` was not specified in `Component`.'
-    );
-
-    expect(console.warn.mock.calls[1][0]).toBe(
-      'Warning: Invalid prop `prop` of type `number` supplied to ' +
-      '`Component`, expected `string`.'
-    );
-
-    ReactTestUtils.renderIntoDocument(<Component prop="string" />);
-
-    // Should not error for strings
-    expect(console.warn.mock.calls.length).toBe(2);
-  });
-
-  it('should throw on invalid prop types', function() {
-    expect(function() {
-      React.createClass({
-        displayName: 'Component',
-        propTypes: {
-          prop: null
-        },
-        render: function() {
-          return <span>{this.props.prop}</span>;
-        }
-      });
-    }).toThrow(
-      'Invariant Violation: Component: prop type `prop` is invalid; ' +
-      'it must be a function, usually from React.PropTypes.'
-    );
-  });
-
-  it('should throw on invalid context types', function() {
-    expect(function() {
-      React.createClass({
-        displayName: 'Component',
-        contextTypes: {
-          prop: null
-        },
-        render: function() {
-          return <span>{this.props.prop}</span>;
-        }
-      });
-    }).toThrow(
-      'Invariant Violation: Component: context type `prop` is invalid; ' +
-      'it must be a function, usually from React.PropTypes.'
-    );
-  });
-
-  it('should throw on invalid child context types', function() {
-    expect(function() {
-      React.createClass({
-        displayName: 'Component',
-        childContextTypes: {
-          prop: null
-        },
-        render: function() {
-          return <span>{this.props.prop}</span>;
-        }
-      });
-    }).toThrow(
-      'Invariant Violation: Component: child context type `prop` is invalid; ' +
-      'it must be a function, usually from React.PropTypes.'
-    );
-  });
-
-  it('should not allow `forceUpdate` on unmounted components', function() {
-    var container = document.createElement('div');
-    document.documentElement.appendChild(container);
-
-    var Component = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = <Component />;
-    expect(instance.forceUpdate).not.toBeDefined();
-
-    instance = React.renderComponent(instance, container);
-    expect(function() {
-      instance.forceUpdate();
-    }).not.toThrow();
-
-    React.unmountComponentAtNode(container);
-    expect(function() {
-      instance.forceUpdate();
-    }).toThrow(
-      'Invariant Violation: forceUpdate(...): Can only force an update on ' +
-      'mounted or mounting components.'
-    );
-  });
-
-  it('should cleanup even if render() fatals', function() {
-    var BadComponent = React.createClass({
-      render: function() {
-        throw new Error();
-      }
-    });
-    var instance = <BadComponent />;
-
-    expect(ReactCurrentOwner.current).toBe(null);
-
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow();
-
-    expect(ReactCurrentOwner.current).toBe(null);
-  });
-
-  it('should support mixins with getInitialState()', function() {
-    var Mixin = {
-      getInitialState: function() {
-        return {mixin: true};
-      }
-    };
-    var Component = React.createClass({
-      mixins: [Mixin],
-      getInitialState: function() {
-        return {component: true};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state.component).toBe(true);
-    expect(instance.state.mixin).toBe(true);
-  });
-
-  it('should throw with conflicting getInitialState() methods', function() {
-    var Mixin = {
-      getInitialState: function() {
-        return {x: true};
-      }
-    };
-    var Component = React.createClass({
-      mixins: [Mixin],
-      getInitialState: function() {
-        return {x: true};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    expect(function() {
-      instance = ReactTestUtils.renderIntoDocument(instance);
-    }).toThrow(
-      'Invariant Violation: mergeObjectsWithNoDuplicateKeys(): ' +
-      'Tried to merge two objects with the same key: x'
-    );
-  });
-
-  it('should work with object getInitialState() return values', function() {
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {
-          occupation: 'clown'
-        };
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state.occupation).toEqual('clown');
-  });
-
-  it('should throw with non-object getInitialState() return values', function() {
-    [['an array'], 'a string', 1234].forEach(function(state) {
-      var Component = React.createClass({
-        getInitialState: function() {
-          return state;
-        },
-        render: function() {
-          return <span />;
-        }
-      });
-      var instance = <Component />;
-      expect(function() {
-        instance = ReactTestUtils.renderIntoDocument(instance);
-      }).toThrow(
-        'Invariant Violation: Component.getInitialState(): ' +
-        'must return an object or null'
-      );
-    });
-  });
-
-  it('should work with a null getInitialState() return value', function() {
-    var Component = React.createClass({
-      getInitialState: function() {
-        return null;
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    expect(
-      () => ReactTestUtils.renderIntoDocument(<Component />)
-    ).not.toThrow();
-  });
-
-  it('should work with a null getInitialState return value and a mixin', () => {
-    var Component;
-    var instance;
-
-    var Mixin = {
-      getInitialState: function() {
-        return {foo: 'bar'};
-      }
-    };
-    Component = React.createClass({
-      mixins: [Mixin],
-      getInitialState: function() {
-        return null;
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    expect(
-      () => ReactTestUtils.renderIntoDocument(<Component />)
-    ).not.toThrow();
-
-    instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'bar'});
-
-    // Also the other way round should work
-    var Mixin2 = {
-      getInitialState: function() {
-        return null;
-      }
-    };
-    Component = React.createClass({
-      mixins: [Mixin2],
-      getInitialState: function() {
-        return {foo: 'bar'};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    expect(
-      () => ReactTestUtils.renderIntoDocument(<Component />)
-    ).not.toThrow();
-
-    instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'bar'});
-
-    // Multiple mixins should be fine too
-    Component = React.createClass({
-      mixins: [Mixin, Mixin2],
-      getInitialState: function() {
-        return {x: true};
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    expect(
-      () => ReactTestUtils.renderIntoDocument(<Component />)
-    ).not.toThrow();
-
-    instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'bar', x: true});
-  });
-
-  it('should work with object getInitialState() return values', function() {
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {
-          occupation: 'clown'
-        };
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state.occupation).toEqual('clown');
-  });
-
-  it('should throw with non-object getInitialState() return values', function() {
-    [['an array'], 'a string', 1234].forEach(function(state) {
-      var Component = React.createClass({
-        getInitialState: function() {
-          return state;
-        },
-        render: function() {
-          return <span />;
-        }
-      });
-      var instance = <Component />;
-      expect(function() {
-        instance = ReactTestUtils.renderIntoDocument(instance);
-      }).toThrow(
-        'Invariant Violation: Component.getInitialState(): ' +
-        'must return an object or null'
-      );
-    });
-  });
-
-  it('should call componentWillUnmount before unmounting', function() {
-    var container = document.createElement('div');
-    var innerUnmounted = false;
-
-    spyOn(ReactMount, 'purgeID').andCallThrough();
-
-    var Component = React.createClass({
-      render: function() {
-        return <div>
-          <Inner />
-        </div>;
-      }
-    });
-    var Inner = React.createClass({
-      componentWillUnmount: function() {
-        // It's important that ReactMount.purgeID be called after any component
-        // lifecycle methods, because a componentWillMount implementation is
-        // likely call this.getDOMNode(), which will repopulate the node cache
-        // after it's been cleared, causing a memory leak.
-        expect(ReactMount.purgeID.callCount).toBe(0);
-        innerUnmounted = true;
-      },
-      render: function() {
-        return <div />;
-      }
-    });
-
-    React.renderComponent(<Component />, container);
-    React.unmountComponentAtNode(container);
-    expect(innerUnmounted).toBe(true);
-
-    // <Component />, <Inner />, and both <div /> elements each call
-    // unmountIDFromEnvironment which calls purgeID, for a total of 4.
-    expect(ReactMount.purgeID.callCount).toBe(4);
-  });
-
-  it('should detect valid CompositeComponent classes', function() {
-    var Component = React.createClass({
-      render: function() {
-        return <div/>;
-      }
-    });
-
-    expect(React.isValidClass(Component)).toBe(true);
-  });
-
-  it('should detect invalid CompositeComponent classes', function() {
-    var FnComponent = function() {
-      return false;
-    };
-
-    var NullComponent = null;
-
-    var TrickFnComponent = function() {
-      return true;
-    };
-    TrickFnComponent.componentConstructor = true;
-
-    expect(React.isValidClass(FnComponent)).toBe(false);
-    expect(React.isValidClass(NullComponent)).toBe(false);
-    expect(React.isValidClass(TrickFnComponent)).toBe(false);
-  });
-
-  it('should warn when shouldComponentUpdate() returns undefined', function() {
-    var warn = console.warn;
-    console.warn = mocks.getMockFunction();
-
-    try {
-      var Component = React.createClass({
-        getInitialState: function () {
-          return {bogus: false};
-        },
-
-        shouldComponentUpdate: function() {
-          return undefined;
-        },
-
-        render: function() {
-          return <div />;
-        }
-      });
-
-      var instance = ReactTestUtils.renderIntoDocument(<Component />);
-      instance.setState({bogus: true});
-
-      expect(console.warn.mock.calls.length).toBe(1);
-      expect(console.warn.mock.calls[0][0]).toBe(
-        'Component.shouldComponentUpdate(): Returned undefined instead of a ' +
-        'boolean value. Make sure to return true or false.'
-      );
-    } finally {
-      console.warn = warn;
-    }
-  });
-
-  it('should warn when mispelling shouldComponentUpdate', function() {
-    var warn = console.warn;
-    console.warn = mocks.getMockFunction();
-
-    try {
-      React.createClass({
-        componentShouldUpdate: function() {
-          return false;
-        },
-        render: function() {
-          return <div />;
-        }
-      });
-      expect(console.warn.mock.calls.length).toBe(1);
-      expect(console.warn.mock.calls[0][0]).toBe(
-        '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.'
-      );
-
-      var NamedComponent = React.createClass({
-        componentShouldUpdate: function() {
-          return false;
-        },
-        render: function() {
-          return <div />;
-        }
-      });
-      expect(console.warn.mock.calls.length).toBe(2);
-      expect(console.warn.mock.calls[1][0]).toBe(
-        '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.'
-      );
-
-      NamedComponent(); // Shut up lint
-    } finally {
-      console.warn = warn;
-    }
-  });
-
-  xit('should warn when using deprecated non-static spec keys', function() {
-    var warn = console.warn;
-    console.warn = mocks.getMockFunction();
-    try {
-      React.createClass({
-        mixins: [{}],
-        propTypes: {
-          foo: ReactPropTypes.string
-        },
-        contextTypes: {
-          foo: ReactPropTypes.string
-        },
-        childContextTypes: {
-          foo: ReactPropTypes.string
-        },
-        render: function() {
-          return <div />;
-        }
-      });
-      expect(console.warn.mock.calls.length).toBe(4);
-      expect(console.warn.mock.calls[0][0]).toBe(
-        'createClass(...): `mixins` is now a static property and should ' +
-        'be defined inside "statics".'
-      );
-      expect(console.warn.mock.calls[1][0]).toBe(
-        'createClass(...): `propTypes` is now a static property and should ' +
-        'be defined inside "statics".'
-      );
-      expect(console.warn.mock.calls[2][0]).toBe(
-        'createClass(...): `contextTypes` is now a static property and ' +
-        'should be defined inside "statics".'
-      );
-      expect(console.warn.mock.calls[3][0]).toBe(
-        'createClass(...): `childContextTypes` is now a static property and ' +
-        'should be defined inside "statics".'
-      );
-    } finally {
-      console.warn = warn;
-    }
-  });
-
-  it('should pass context', function() {
-    var childInstance = null;
-    var grandchildInstance = null;
-
-    var Parent = React.createClass({
-      childContextTypes: {
-        foo: ReactPropTypes.string,
-        depth: ReactPropTypes.number
-      },
-
-      getChildContext: function() {
-        return {
-          foo: 'bar',
-          depth: 0
-        };
-      },
-
-      render: function() {
-        return <Child />;
-      }
-    });
-
-    var Child = React.createClass({
-      contextTypes: {
-        foo: ReactPropTypes.string,
-        depth: ReactPropTypes.number
-      },
-
-      childContextTypes: {
-        depth: ReactPropTypes.number
-      },
-
-      getChildContext: function() {
-        return {
-          depth: this.context.depth + 1
-        };
-      },
-
-      render: function() {
-        childInstance = this;
-        return <Grandchild />;
-      }
-    });
-
-    var Grandchild = React.createClass({
-      contextTypes: {
-        foo: ReactPropTypes.string,
-        depth: ReactPropTypes.number
-      },
-
-      render: function() {
-        grandchildInstance = this;
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Parent />);
-    reactComponentExpect(childInstance).scalarContextEqual({foo: 'bar', depth: 0});
-    reactComponentExpect(grandchildInstance).scalarContextEqual({foo: 'bar', depth: 1});
-  });
-
-  it('should check context types', function() {
-    var Component = React.createClass({
-      contextTypes: {
-        foo: ReactPropTypes.string.isRequired
-      },
-
-      render: function() {
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Component />);
-
-    expect(console.warn.mock.calls.length).toBe(1);
-    expect(console.warn.mock.calls[0][0]).toBe(
-      'Warning: Required context `foo` was not specified in `Component`.'
-    );
-
-    React.withContext({foo: 'bar'}, function() {
-      ReactTestUtils.renderIntoDocument(<Component />);
-    });
-
-    // Previous call should not error
-    expect(console.warn.mock.calls.length).toBe(1);
-
-    React.withContext({foo: 123}, function() {
-      ReactTestUtils.renderIntoDocument(<Component />);
-    });
-
-    expect(console.warn.mock.calls.length).toBe(2);
-    expect(console.warn.mock.calls[1][0]).toBe(
-      'Warning: Invalid context `foo` of type `number` supplied ' +
-      'to `Component`, expected `string`.'
-    );
-  });
-
-  it('should check child context types', function() {
-    var Component = React.createClass({
-      childContextTypes: {
-        foo: ReactPropTypes.string.isRequired,
-        bar: ReactPropTypes.number
-      },
-
-      getChildContext: function() {
-        return this.props.testContext;
-      },
-
-      render: function() {
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Component testContext={{bar: 123}} />);
-
-    expect(console.warn.mock.calls.length).toBe(1);
-    expect(console.warn.mock.calls[0][0]).toBe(
-      'Warning: Required child context `foo` was not specified in `Component`.'
-    );
-
-    ReactTestUtils.renderIntoDocument(<Component testContext={{foo: 123}} />);
-
-    expect(console.warn.mock.calls.length).toBe(2);
-    expect(console.warn.mock.calls[1][0]).toBe(
-      'Warning: Invalid child context `foo` of type `number` ' +
-      'supplied to `Component`, expected `string`.'
-    );
-
-    ReactTestUtils.renderIntoDocument(
-      <Component testContext={{foo: 'foo', bar: 123}} />
-    );
-
-    ReactTestUtils.renderIntoDocument(
-      <Component testContext={{foo: 'foo'}} />
-    );
-
-    // Previous calls should not log errors
-    expect(console.warn.mock.calls.length).toBe(2);
-  });
-
-  it('should filter out context not in contextTypes', function() {
-    var Component = React.createClass({
-      contextTypes: {
-        foo: ReactPropTypes.string
-      },
-
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = React.withContext({foo: 'abc', bar: 123}, function() {
-      return <Component />;
-    });
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    reactComponentExpect(instance).scalarContextEqual({foo: 'abc'});
-  });
-
-  it('should filter context properly in callbacks', function() {
-    var actualComponentWillReceiveProps;
-    var actualShouldComponentUpdate;
-    var actualComponentWillUpdate;
-    var actualComponentDidUpdate;
-
-    var Parent = React.createClass({
-      childContextTypes: {
-        foo: ReactPropTypes.string.isRequired,
-        bar: ReactPropTypes.string.isRequired
-      },
-
-      getChildContext: function() {
-        return {
-          foo: this.props.foo,
-          bar: "bar"
-        };
-      },
-
-      render: function() {
-        return <Component />;
-      }
-    });
-
-    var Component = React.createClass({
-      contextTypes: {
-        foo: ReactPropTypes.string
-      },
-
-      componentWillReceiveProps: function(nextProps, nextContext) {
-        actualComponentWillReceiveProps = nextContext;
-        return true;
-      },
-
-      shouldComponentUpdate: function(nextProps, nextState, nextContext) {
-        actualShouldComponentUpdate = nextContext;
-        return true;
-      },
-
-      componentWillUpdate: function(nextProps, nextState, nextContext) {
-        actualComponentWillUpdate = nextContext;
-      },
-
-      componentDidUpdate: function(prevProps, prevState, prevContext) {
-        actualComponentDidUpdate = prevContext;
-      },
-
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = <Parent foo="abc" />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    instance.replaceProps({foo: "def"});
-    expect(actualComponentWillReceiveProps).toEqual({foo: 'def'});
-    expect(actualShouldComponentUpdate).toEqual({foo: 'def'});
-    expect(actualComponentWillUpdate).toEqual({foo: 'def'});
-    expect(actualComponentDidUpdate).toEqual({foo: 'abc'});
-  });
-
-  it('should support statics', function() {
-    var Component = React.createClass({
-      statics: {
-        abc: 'def',
-        def: 0,
-        ghi: null,
-        jkl: 'mno',
-        pqr: function() {
-          return this;
-        }
-      },
-
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.constructor.abc).toBe('def');
-    expect(Component.abc).toBe('def');
-    expect(instance.constructor.def).toBe(0);
-    expect(Component.def).toBe(0);
-    expect(instance.constructor.ghi).toBe(null);
-    expect(Component.ghi).toBe(null);
-    expect(instance.constructor.jkl).toBe('mno');
-    expect(Component.jkl).toBe('mno');
-    expect(instance.constructor.pqr()).toBe(Component.type);
-    expect(Component.pqr()).toBe(Component.type);
-  });
-
-  it('should support statics in mixins', function() {
-    var Mixin = {
-      statics: {
-        foo: 'bar'
-      }
-    };
-    var Component = React.createClass({
-      mixins: [Mixin],
-
-      statics: {
-        abc: 'def'
-      },
-
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.constructor.foo).toBe('bar');
-    expect(Component.foo).toBe('bar');
-    expect(instance.constructor.abc).toBe('def');
-    expect(Component.abc).toBe('def');
-  });
-
-  it("should throw if mixins override each others' statics", function() {
-    expect(function() {
-      var Mixin = {
-        statics: {
-          abc: 'foo'
-        }
-      };
-      React.createClass({
-        mixins: [Mixin],
-
-        statics: {
-          abc: 'bar'
-        },
-
-        render: function() {
-          return <span />;
-        }
-      });
-    }).toThrow(
-      'Invariant Violation: ReactCompositeComponent: You are attempting to ' +
-      'define `abc` on your component more than once, but that is only ' +
-      'supported for functions, which are chained together. This conflict ' +
-      'may be due to a mixin.'
-    );
-  });
-
-  it("should throw if the mixin is a React component", function() {
-    expect(function() {
-      React.createClass({
-        mixins: [<div />],
-
-        render: function() {
-          return <span />;
-        }
-      });
-    }).toThrow(
-      'Invariant Violation: ReactCompositeComponent: You\'re attempting to ' +
-      'use a component as a mixin. Instead, just use a regular object.'
-    );
-  });
-
-  it("should throw if the mixin is a React component class", function() {
-    expect(function() {
-      var Component = React.createClass({
-        render: function() {
-          return <span />;
-        }
-      });
-
-      React.createClass({
-        mixins: [Component],
-
-        render: function() {
-          return <span />;
-        }
-      });
-    }).toThrow(
-      'Invariant Violation: ReactCompositeComponent: You\'re attempting to ' +
-      'use a component class as a mixin. Instead, just use a regular object.'
-    );
-  });
-
-  it('should have bound the mixin methods to the component', function() {
-    var mixin = {
-      mixinFunc: function() {return this;}
-    };
-
-    var Component = React.createClass({
-      mixins: [mixin],
-      componentDidMount: function() {
-        expect(this.mixinFunc()).toBe(this);
-      },
-      render: function() {
-        return <span />;
-      }
-    });
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-  });
-
-  it('should include the mixin keys in even if their values are falsy',
-    function() {
-      var mixin = {
-        keyWithNullValue: null,
-        randomCounter: 0
-      };
-
-      var Component = React.createClass({
-        mixins: [mixin],
-        componentDidMount: function() {
-          expect(this.randomCounter).toBe(0);
-          expect(this.keyWithNullValue).toBeNull();
-        },
-        render: function() {
-          return <span />;
-        }
-      });
-      var instance = <Component />;
-      instance = ReactTestUtils.renderIntoDocument(instance);
-  });
-
-  it('should disallow nested render calls', function() {
-    spyOn(console, 'warn');
-    var Inner = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-    var Outer = React.createClass({
-      render: function() {
-        ReactTestUtils.renderIntoDocument(<Inner />);
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Outer />);
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(console.warn.argsForCall[0][0]).toBe(
-      'Warning: _renderNewRootComponent(): 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.'
-    );
-  });
-
-});
diff --git a/src/core/__tests__/ReactCompositeComponentDOMMinimalism-test.js b/src/core/__tests__/ReactCompositeComponentDOMMinimalism-test.js
deleted file mode 100644
index cd2c9f11e72..00000000000
--- a/src/core/__tests__/ReactCompositeComponentDOMMinimalism-test.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-// Requires
-var React;
-var ReactTestUtils;
-var reactComponentExpect;
-
-// Test components
-var LowerLevelComposite;
-var MyCompositeComponent;
-
-var expectSingleChildlessDiv;
-
-/**
- * Integration test, testing the combination of JSX with our unit of
- * abstraction, `ReactCompositeComponent` does not ever add superfluous DOM
- * nodes.
- */
-describe('ReactCompositeComponentDOMMinimalism', function() {
-
-  beforeEach(function() {
-    reactComponentExpect = require('reactComponentExpect');
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-
-    LowerLevelComposite = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {this.props.children}
-          </div>
-        );
-      }
-    });
-
-    MyCompositeComponent = React.createClass({
-      render: function() {
-        return (
-          <LowerLevelComposite>
-            {this.props.children}
-          </LowerLevelComposite>
-        );
-      }
-    });
-
-    expectSingleChildlessDiv = function(instance) {
-      reactComponentExpect(instance)
-        .expectRenderedChild()
-        .toBeCompositeComponentWithType(LowerLevelComposite)
-          .expectRenderedChild()
-          .toBeDOMComponentWithTag('div')
-          .toBeDOMComponentWithNoChildren();
-    };
-  });
-
-  it('should not render extra nodes for non-interpolated text', function() {
-    var instance = (
-      <MyCompositeComponent>
-        A string child
-      </MyCompositeComponent>
-    );
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expectSingleChildlessDiv(instance);
-  });
-
-  it('should not render extra nodes for non-interpolated text', function() {
-    var instance = (
-      <MyCompositeComponent>
-        {'Interpolated String Child'}
-      </MyCompositeComponent>
-    );
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expectSingleChildlessDiv(instance);
-  });
-
-  it('should not render extra nodes for non-interpolated text', function() {
-    var instance = (
-      <MyCompositeComponent>
-        <ul>
-          This text causes no children in ul, just innerHTML
-        </ul>
-      </MyCompositeComponent>
-    );
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-      .toBeCompositeComponentWithType(LowerLevelComposite)
-        .expectRenderedChild()
-        .toBeDOMComponentWithTag('div')
-        .toBeDOMComponentWithChildCount(1)
-        .expectRenderedChildAt(0)
-          .toBeDOMComponentWithTag('ul')
-          .toBeDOMComponentWithNoChildren();
-  });
-
-});
diff --git a/src/core/__tests__/ReactCompositeComponentError-test.js b/src/core/__tests__/ReactCompositeComponentError-test.js
deleted file mode 100644
index 049af8a37c5..00000000000
--- a/src/core/__tests__/ReactCompositeComponentError-test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React = require('React');
-var ReactTestUtils = require('ReactTestUtils');
-var ReactErrorUtils = require('ReactErrorUtils');
-
-describe('ReactCompositeComponent-error', function() {
-
-  it('should be passed the component and method name', function() {
-    spyOn(ReactErrorUtils, 'guard').andCallThrough();
-    var Component = React.createClass({
-      someHandler: function() {},
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = <Component />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(ReactErrorUtils.guard.mostRecentCall.args[1])
-      .toEqual('Component.someHandler');
-  });
-
-});
diff --git a/src/core/__tests__/ReactCompositeComponentMixin-test.js b/src/core/__tests__/ReactCompositeComponentMixin-test.js
deleted file mode 100644
index d77055f4ca1..00000000000
--- a/src/core/__tests__/ReactCompositeComponentMixin-test.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var mocks = require('mocks');
-
-var React;
-var ReactTestUtils;
-var reactComponentExpect;
-
-var TestComponent;
-var TestComponentWithPropTypes;
-var mixinPropValidator;
-var componentPropValidator;
-
-describe('ReactCompositeComponent-mixin', function() {
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    reactComponentExpect = require('reactComponentExpect');
-    mixinPropValidator = mocks.getMockFunction();
-    componentPropValidator = mocks.getMockFunction();
-
-    var MixinA = {
-      propTypes: {
-        propA: function() {}
-      },
-      componentDidMount: function() {
-        this.props.listener('MixinA didMount');
-      }
-    };
-
-    var MixinB = {
-      mixins: [MixinA],
-      propTypes: {
-        propB: function() {}
-      },
-      componentDidMount: function() {
-        this.props.listener('MixinB didMount');
-      }
-    };
-
-    var MixinC = {
-      statics: {
-        staticC: function() {}
-      },
-      componentDidMount: function() {
-        this.props.listener('MixinC didMount');
-      }
-    };
-
-    var MixinD = {
-      propTypes: {
-        value: mixinPropValidator
-      }
-    };
-
-    TestComponent = React.createClass({
-      mixins: [MixinB, MixinC, MixinD],
-      statics: {
-        staticComponent: function() {}
-      },
-      propTypes: {
-        propComponent: function() {}
-      },
-      componentDidMount: function() {
-        this.props.listener('Component didMount');
-      },
-      render: function() {
-        return <div />;
-      }
-    });
-
-    TestComponentWithPropTypes = React.createClass({
-      mixins: [MixinD],
-      propTypes: {
-        value: componentPropValidator
-      },
-      render: function() {
-        return <div />;
-      }
-    });
-  });
-
-  it('should support merging propTypes and statics', function() {
-    var listener = mocks.getMockFunction();
-    var instance = <TestComponent listener={listener} />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    var instancePropTypes = instance.constructor.propTypes;
-
-    expect('propA' in instancePropTypes).toBe(true);
-    expect('propB' in instancePropTypes).toBe(true);
-    expect('propComponent' in instancePropTypes).toBe(true);
-
-    expect('staticC' in TestComponent).toBe(true);
-    expect('staticComponent' in TestComponent).toBe(true);
-  });
-
-  it('should support chaining delegate functions', function() {
-    var listener = mocks.getMockFunction();
-    var instance = <TestComponent listener={listener} />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    expect(listener.mock.calls).toEqual([
-      ['MixinA didMount'],
-      ['MixinB didMount'],
-      ['MixinC didMount'],
-      ['Component didMount']
-    ]);
-  });
-
-  it('should validate prop types via mixins', function() {
-    expect(TestComponent.type.propTypes).toBeDefined();
-    expect(TestComponent.type.propTypes.value)
-      .toBe(mixinPropValidator);
-  });
-
-  it('should override mixin prop types with class prop types', function() {
-    // Sanity check...
-    expect(componentPropValidator).toNotBe(mixinPropValidator);
-    // Actually check...
-    expect(TestComponentWithPropTypes.type.propTypes)
-      .toBeDefined();
-    expect(TestComponentWithPropTypes.type.propTypes.value)
-      .toNotBe(mixinPropValidator);
-    expect(TestComponentWithPropTypes.type.propTypes.value)
-      .toBe(componentPropValidator);
-  });
-});
diff --git a/src/core/__tests__/ReactCompositeComponentSpec-test.js b/src/core/__tests__/ReactCompositeComponentSpec-test.js
deleted file mode 100644
index 25590275736..00000000000
--- a/src/core/__tests__/ReactCompositeComponentSpec-test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var mocks = require('mocks');
-
-var React;
-var ReactTestUtils;
-var reactComponentExpect;
-
-describe('ReactCompositeComponent-spec', function() {
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    reactComponentExpect = require('reactComponentExpect');
-  });
-
-  it('should throw when `render` is not specified', function() {
-    expect(function() {
-      React.createClass({});
-    }).toThrow(
-      'Invariant Violation: createClass(...): Class specification must ' +
-      'implement a `render` method.'
-    );
-  });
-
-  it('should copy `displayName` onto the Constructor', function() {
-    var TestComponent = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    expect(TestComponent.type.displayName)
-      .toBe('TestComponent');
-  });
-
-  it('should copy prop types onto the Constructor', function() {
-    var propValidator = mocks.getMockFunction();
-    var TestComponent = React.createClass({
-      propTypes: {
-        value: propValidator
-      },
-      render: function() {
-        return <div />;
-      }
-    });
-
-    expect(TestComponent.type.propTypes).toBeDefined();
-    expect(TestComponent.type.propTypes.value)
-      .toBe(propValidator);
-  });
-});
diff --git a/src/core/__tests__/ReactCompositeComponentState-test.js b/src/core/__tests__/ReactCompositeComponentState-test.js
deleted file mode 100644
index fe9c6bff7d6..00000000000
--- a/src/core/__tests__/ReactCompositeComponentState-test.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var mocks = require('mocks');
-
-var React;
-var ReactTestUtils;
-var reactComponentExpect;
-
-var TestComponent;
-
-describe('ReactCompositeComponent-state', function() {
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    reactComponentExpect = require('reactComponentExpect');
-
-    TestComponent = React.createClass({
-      peekAtState: function(from, state) {
-        if (state) {
-          this.props.stateListener(from, state && state.color);
-        } else {
-          this.props.stateListener(
-            from,
-            this.state && this.state.color,
-            this._pendingState && this._pendingState.color
-          );
-        }
-      },
-
-      setFavoriteColor: function(nextColor) {
-        this.setState({color: nextColor});
-      },
-
-      getInitialState: function() {
-        this.peekAtState('getInitialState');
-        return {color: 'red'};
-      },
-
-      render: function() {
-        this.peekAtState('render');
-        return <div>{this.state.color}</div>;
-      },
-
-      componentWillMount: function() {
-        this.peekAtState('componentWillMount-start');
-        this.setState({color: 'sunrise'});
-        this.peekAtState('componentWillMount-after-sunrise');
-        this.setState({color: 'orange'});
-        this.peekAtState('componentWillMount-end');
-      },
-
-      componentDidMount: function() {
-        this.peekAtState('componentDidMount-start');
-        this.setState({color: 'yellow'});
-        this.peekAtState('componentDidMount-end');
-      },
-
-      componentWillReceiveProps: function(newProps) {
-        this.peekAtState('componentWillReceiveProps-start');
-        if (newProps.nextColor) {
-          this.setState({color: newProps.nextColor});
-        }
-        this.peekAtState('componentWillReceiveProps-end');
-      },
-
-      shouldComponentUpdate: function(nextProps, nextState) {
-        this.peekAtState('shouldComponentUpdate-currentState');
-        this.peekAtState('shouldComponentUpdate-nextState', nextState);
-        return true;
-      },
-
-      componentWillUpdate: function(nextProps, nextState) {
-        this.peekAtState('componentWillUpdate-currentState');
-        this.peekAtState('componentWillUpdate-nextState', nextState);
-      },
-
-      componentDidUpdate: function(prevProps, prevState) {
-        this.peekAtState('componentDidUpdate-currentState');
-        this.peekAtState('componentDidUpdate-prevState', prevState);
-      },
-
-      componentWillUnmount: function() {
-        this.peekAtState('componentWillUnmount');
-      }
-    });
-
-  });
-
-  it('should support setting state', function() {
-    var stateListener = mocks.getMockFunction();
-    var instance = <TestComponent stateListener={stateListener} />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    instance.setProps({nextColor: 'green'});
-    instance.setFavoriteColor('blue');
-    instance.forceUpdate();
-    instance.unmountComponent();
-
-    expect(stateListener.mock.calls).toEqual([
-      // there is no state when getInitialState() is called
-      [ 'getInitialState', null, null ],
-      [ 'componentWillMount-start', 'red', null ],
-      // setState() only enqueues a pending state.
-      [ 'componentWillMount-after-sunrise', 'red', 'sunrise' ],
-      [ 'componentWillMount-end', 'red', 'orange' ],
-      // pending state has been applied
-      [ 'render', 'orange', null ],
-      [ 'componentDidMount-start', 'orange', null ],
-      // componentDidMount() called setState({color:'yellow'}), currently this
-      // occurs inline.
-      // In a future where setState() is async, this test result will change.
-      [ 'shouldComponentUpdate-currentState', 'orange', null ],
-      [ 'shouldComponentUpdate-nextState', 'yellow' ],
-      [ 'componentWillUpdate-currentState', 'orange', null ],
-      [ 'componentWillUpdate-nextState', 'yellow' ],
-      [ 'render', 'yellow', null ],
-      [ 'componentDidUpdate-currentState', 'yellow', null ],
-      [ 'componentDidUpdate-prevState', 'orange' ],
-      // componentDidMount() finally closes.
-      [ 'componentDidMount-end', 'yellow', null ],
-      [ 'componentWillReceiveProps-start', 'yellow', null ],
-      // setState({color:'green'}) only enqueues a pending state.
-      [ 'componentWillReceiveProps-end', 'yellow', 'green' ],
-      [ 'shouldComponentUpdate-currentState', 'yellow', null ],
-      [ 'shouldComponentUpdate-nextState', 'green' ],
-      [ 'componentWillUpdate-currentState', 'yellow', null ],
-      [ 'componentWillUpdate-nextState', 'green' ],
-      [ 'render', 'green', null ],
-      [ 'componentDidUpdate-currentState', 'green', null ],
-      [ 'componentDidUpdate-prevState', 'yellow' ],
-      // setFavoriteColor('blue')
-      [ 'shouldComponentUpdate-currentState', 'green', null ],
-      [ 'shouldComponentUpdate-nextState', 'blue' ],
-      [ 'componentWillUpdate-currentState', 'green', null ],
-      [ 'componentWillUpdate-nextState', 'blue' ],
-      [ 'render', 'blue', null ],
-      [ 'componentDidUpdate-currentState', 'blue', null ],
-      [ 'componentDidUpdate-prevState', 'green' ],
-      // forceUpdate()
-      [ 'componentWillUpdate-currentState', 'blue', null ],
-      [ 'componentWillUpdate-nextState', 'blue' ],
-      [ 'render', 'blue', null ],
-      [ 'componentDidUpdate-currentState', 'blue', null ],
-      [ 'componentDidUpdate-prevState', 'blue' ],
-      // unmountComponent()
-      // state is available within `componentWillUnmount()`
-      [ 'componentWillUnmount', 'blue', null ]
-    ]);
-  });
-});
diff --git a/src/core/__tests__/ReactDescriptor-test.js b/src/core/__tests__/ReactDescriptor-test.js
deleted file mode 100644
index 64d70070b61..00000000000
--- a/src/core/__tests__/ReactDescriptor-test.js
+++ /dev/null
@@ -1,276 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactDescriptor;
-var ReactTestUtils;
-
-describe('ReactDescriptor', function() {
-  var ComponentFactory;
-  var ComponentClass;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactDescriptor = require('ReactDescriptor');
-    ReactTestUtils = require('ReactTestUtils');
-    ComponentFactory = React.createClass({
-      render: function() { return <div />; }
-    });
-    ComponentClass = ComponentFactory.type;
-  });
-
-  it('returns a complete descriptor according to spec', function() {
-    var descriptor = React.createFactory(ComponentClass)();
-    expect(descriptor.type).toBe(ComponentClass);
-    expect(descriptor.key).toBe(null);
-    expect(descriptor.ref).toBe(null);
-    expect(descriptor.props).toEqual({});
-  });
-
-  it('allows a string to be passed as the type', function() {
-    var descriptor = React.createFactory('div')();
-    expect(descriptor.type).toBe('div');
-    expect(descriptor.key).toBe(null);
-    expect(descriptor.ref).toBe(null);
-    expect(descriptor.props).toEqual({});
-  });
-
-  it('returns an immutable descriptor', function() {
-    var descriptor = React.createFactory(ComponentClass)();
-    expect(() => descriptor.type = 'div').toThrow();
-  });
-
-  it('does not reuse the original config object', function() {
-    var config = { foo: 1 };
-    var descriptor = React.createFactory(ComponentClass)(config);
-    expect(descriptor.props.foo).toBe(1);
-    config.foo = 2;
-    expect(descriptor.props.foo).toBe(1);
-  });
-
-  it('extracts key and ref from the config', function() {
-    var descriptor = React.createFactory(ComponentClass)({
-      key: '12',
-      ref: '34',
-      foo: '56'
-    });
-    expect(descriptor.type).toBe(ComponentClass);
-    expect(descriptor.key).toBe('12');
-    expect(descriptor.ref).toBe('34');
-    expect(descriptor.props).toEqual({foo:'56'});
-  });
-
-  it('coerces the key to a string', function() {
-    var descriptor = React.createFactory(ComponentClass)({
-      key: 12,
-      foo: '56'
-    });
-    expect(descriptor.type).toBe(ComponentClass);
-    expect(descriptor.key).toBe('12');
-    expect(descriptor.ref).toBe(null);
-    expect(descriptor.props).toEqual({foo:'56'});
-  });
-
-  it('preserves the context on the descriptor', function() {
-    var Component = React.createFactory(ComponentClass);
-    var descriptor;
-
-    var Wrapper = React.createClass({
-      childContextTypes: {
-        foo: React.PropTypes.string
-      },
-      getChildContext: function() {
-        return { foo: 'bar' };
-      },
-      render: function() {
-        descriptor = Component();
-        return descriptor;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Wrapper />);
-
-    expect(descriptor._context).toEqual({ foo: 'bar' });
-  });
-
-  it('preserves the owner on the descriptor', function() {
-    var Component = React.createFactory(ComponentClass);
-    var descriptor;
-
-    var Wrapper = React.createClass({
-      childContextTypes: {
-        foo: React.PropTypes.string
-      },
-      getChildContext: function() {
-        return { foo: 'bar' };
-      },
-      render: function() {
-        descriptor = Component();
-        return descriptor;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
-
-    expect(descriptor._owner).toBe(instance);
-  });
-
-  it('merges an additional argument onto the children prop', function() {
-    spyOn(console, 'warn');
-    var a = 1;
-    var descriptor = React.createFactory(ComponentClass)({
-      children: 'text'
-    }, a);
-    expect(descriptor.props.children).toBe(a);
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('does not override children if no rest args are provided', function() {
-    spyOn(console, 'warn');
-    var descriptor = React.createFactory(ComponentClass)({
-      children: 'text'
-    });
-    expect(descriptor.props.children).toBe('text');
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('overrides children if null is provided as an argument', function() {
-    spyOn(console, 'warn');
-    var descriptor = React.createFactory(ComponentClass)({
-      children: 'text'
-    }, null);
-    expect(descriptor.props.children).toBe(null);
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('merges rest arguments onto the children prop in an array', function() {
-    spyOn(console, 'warn');
-    var a = 1, b = 2, c = 3;
-    var descriptor = React.createFactory(ComponentClass)(null, a, b, c);
-    expect(descriptor.props.children).toEqual([1, 2, 3]);
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('warns for keys for arrays of descriptors in rest args', function() {
-    spyOn(console, 'warn');
-    var Component = React.createFactory(ComponentClass);
-
-    Component(null, [ Component(), Component() ]);
-
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(console.warn.argsForCall[0][0]).toContain(
-      'Each child in an array should have a unique "key" prop'
-    );
-  });
-
-  it('does not warn when the descriptor is directly in rest args', function() {
-    spyOn(console, 'warn');
-    var Component = React.createFactory(ComponentClass);
-
-    Component(null, Component(), Component());
-
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('does not warn when the array contains a non-descriptor', function() {
-    spyOn(console, 'warn');
-    var Component = React.createFactory(ComponentClass);
-
-    Component(null, [ {}, {} ]);
-
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('allows static methods to be called using the type property', function() {
-    spyOn(console, 'warn');
-
-    var ComponentClass = React.createClass({
-      statics: {
-        someStaticMethod: function() {
-          return 'someReturnValue';
-        }
-      },
-      getInitialState: function() {
-        return {valueToReturn: 'hi'};
-      },
-      render: function() {
-        return <div></div>;
-      }
-    });
-
-    var descriptor = <ComponentClass />;
-    expect(descriptor.type.someStaticMethod()).toBe('someReturnValue');
-    expect(console.warn.argsForCall.length).toBe(0);
-  });
-
-  it('identifies valid descriptors', function() {
-    var Component = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    expect(ReactDescriptor.isValidDescriptor(<div />)).toEqual(true);
-    expect(ReactDescriptor.isValidDescriptor(<Component />)).toEqual(true);
-
-    expect(ReactDescriptor.isValidDescriptor(null)).toEqual(false);
-    expect(ReactDescriptor.isValidDescriptor(true)).toEqual(false);
-    expect(ReactDescriptor.isValidDescriptor({})).toEqual(false);
-    expect(ReactDescriptor.isValidDescriptor("string")).toEqual(false);
-    expect(ReactDescriptor.isValidDescriptor(React.DOM.div)).toEqual(false);
-    expect(ReactDescriptor.isValidDescriptor(Component)).toEqual(false);
-  });
-
-  it('warns but allow a plain function in a factory to be invoked', function() {
-    spyOn(console, 'warn');
-    // This is a temporary helper to allow JSX with plain functions.
-    // This allow you to track down these callers and replace them with regular
-    // function calls.
-    var factory = React.createFactory(function (x) {
-      return 21 + x;
-    });
-    expect(factory(21)).toBe(42);
-    expect(console.warn.argsForCall.length).toBe(1);
-    expect(console.warn.argsForCall[0][0]).toContain(
-      'This JSX uses a plain function.'
-    );
-  });
-
-  it('should expose the underlying class from a legacy factory', function() {
-    var Legacy = React.createClass({ render: function() { } });
-    var factory = React.createFactory(Legacy);
-    expect(factory.type).toBe(Legacy.type);
-    expect(factory().type).toBe(Legacy.type);
-  });
-
-  it('allows the use of PropTypes validators in statics', function() {
-    var Component = React.createClass({
-      render: () => null,
-      statics: {
-        specialType: React.PropTypes.shape({monkey: React.PropTypes.any})
-      }
-    });
-
-    expect(typeof Component.specialType).toBe("function");
-    expect(typeof Component.specialType.isRequired).toBe("function");
-  });
-
-});
diff --git a/src/core/__tests__/ReactIdentity-test.js b/src/core/__tests__/ReactIdentity-test.js
deleted file mode 100644
index b07b2adcac3..00000000000
--- a/src/core/__tests__/ReactIdentity-test.js
+++ /dev/null
@@ -1,320 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTestUtils;
-var reactComponentExpect;
-var ReactMount;
-
-describe('ReactIdentity', function() {
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    reactComponentExpect = require('reactComponentExpect');
-    ReactMount = require('ReactMount');
-  });
-
-  var idExp = /^\.[^.]+(.*)$/;
-  function checkId(child, expectedId) {
-    var actual = idExp.exec(ReactMount.getID(child));
-    var expected = idExp.exec(expectedId);
-    expect(actual).toBeTruthy();
-    expect(expected).toBeTruthy();
-    expect(actual[1]).toEqual(expected[1]);
-  }
-
-  it('should allow keyed objects to express identity', function() {
-    var instance =
-      <div>
-        {{
-          first: <div />,
-          second: <div />
-        }}
-      </div>;
-
-    instance = React.renderComponent(instance, document.createElement('div'));
-    var node = instance.getDOMNode();
-    reactComponentExpect(instance).toBeDOMComponentWithChildCount(2);
-    checkId(node.childNodes[0], '.0.$first:0');
-    checkId(node.childNodes[1], '.0.$second:0');
-  });
-
-  it('should allow key property to express identity', function() {
-    var instance =
-      <div>
-        <div key="apple" />
-        <div key="banana" />
-        <div key={0} />
-        <div key={123} />
-      </div>;
-
-    instance = React.renderComponent(instance, document.createElement('div'));
-    var node = instance.getDOMNode();
-    reactComponentExpect(instance).toBeDOMComponentWithChildCount(4);
-    checkId(node.childNodes[0], '.0.$apple');
-    checkId(node.childNodes[1], '.0.$banana');
-    checkId(node.childNodes[2], '.0.$0');
-    checkId(node.childNodes[3], '.0.$123');
-  });
-
-  it('should use instance identity', function() {
-
-    var Wrapper = React.createClass({
-      render: function() {
-        return <a key="i_get_overwritten">{this.props.children}</a>;
-      }
-    });
-
-    var instance =
-      <div>
-        <Wrapper key="wrap1"><span key="squirrel" /></Wrapper>
-        <Wrapper key="wrap2"><span key="bunny" /></Wrapper>
-        <Wrapper><span key="chipmunk" /></Wrapper>
-      </div>;
-
-    instance = React.renderComponent(instance, document.createElement('div'));
-    var node = instance.getDOMNode();
-    reactComponentExpect(instance).toBeDOMComponentWithChildCount(3);
-
-    checkId(node.childNodes[0], '.0.$wrap1');
-    checkId(node.childNodes[0].firstChild, '.0.$wrap1.$squirrel');
-    checkId(node.childNodes[1], '.0.$wrap2');
-    checkId(node.childNodes[1].firstChild, '.0.$wrap2.$bunny');
-    checkId(node.childNodes[2], '.0.2');
-    checkId(node.childNodes[2].firstChild, '.0.2.$chipmunk');
-  });
-
-  function renderAComponentWithKeyIntoContainer(key, container) {
-
-    var Wrapper = React.createClass({
-
-      render: function() {
-        var span1 = <span ref="span1" key={key} />;
-        var span2 = <span ref="span2" />;
-
-        var map = {};
-        map[key] = span2;
-        return <div>{[span1, map]}</div>;
-      }
-
-    });
-
-    var instance = React.renderComponent(<Wrapper />, container);
-    var span1 = instance.refs.span1;
-    var span2 = instance.refs.span2;
-
-    expect(span1.getDOMNode()).not.toBe(null);
-    expect(span2.getDOMNode()).not.toBe(null);
-
-    key = key.replace(/=/g, '=0');
-
-    checkId(span1.getDOMNode(), '.0.$' + key);
-    checkId(span2.getDOMNode(), '.0.1:$' + key + ':0');
-  }
-
-  it('should allow any character as a key, in a detached parent', function() {
-    var detachedContainer = document.createElement('div');
-    renderAComponentWithKeyIntoContainer("<'WEIRD/&\\key'>", detachedContainer);
-  });
-
-  it('should allow any character as a key, in an attached parent', function() {
-    // This test exists to protect against implementation details that
-    // incorrectly query escaped IDs using DOM tools like getElementById.
-    var attachedContainer = document.createElement('div');
-    document.body.appendChild(attachedContainer);
-
-    renderAComponentWithKeyIntoContainer("<'WEIRD/&\\key'>", attachedContainer);
-
-    document.body.removeChild(attachedContainer);
-  });
-
-  it('should not allow scripts in keys to execute', function() {
-    var h4x0rKey =
-      '"><script>window[\'YOUVEBEENH4X0RED\']=true;</script><div id="';
-
-    var attachedContainer = document.createElement('div');
-    document.body.appendChild(attachedContainer);
-
-    renderAComponentWithKeyIntoContainer(h4x0rKey, attachedContainer);
-
-    document.body.removeChild(attachedContainer);
-
-    // If we get this far, make sure we haven't executed the code
-    expect(window.YOUVEBEENH4X0RED).toBe(undefined);
-  });
-
-  it('should let restructured components retain their uniqueness', function() {
-    var instance0 = <span />;
-    var instance1 = <span />;
-    var instance2 = <span />;
-
-    var TestComponent = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {instance2}
-            {this.props.children[0]}
-            {this.props.children[1]}
-          </div>
-        );
-      }
-    });
-
-    var TestContainer = React.createClass({
-
-      render: function() {
-        return <TestComponent>{instance0}{instance1}</TestComponent>;
-      }
-
-    });
-
-    expect(function() {
-
-      React.renderComponent(<TestContainer />, document.createElement('div'));
-
-    }).not.toThrow();
-  });
-
-  it('should let nested restructures retain their uniqueness', function() {
-    var instance0 = <span />;
-    var instance1 = <span />;
-    var instance2 = <span />;
-
-    var TestComponent = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {instance2}
-            {this.props.children[0]}
-            {this.props.children[1]}
-          </div>
-        );
-      }
-    });
-
-    var TestContainer = React.createClass({
-
-      render: function() {
-        return (
-          <div>
-            <TestComponent>{instance0}{instance1}</TestComponent>
-          </div>
-        );
-      }
-
-    });
-
-    expect(function() {
-
-      React.renderComponent(<TestContainer />, document.createElement('div'));
-
-    }).not.toThrow();
-  });
-
-  it('should let text nodes retain their uniqueness', function() {
-    var TestComponent = React.createClass({
-      render: function() {
-        return <div>{this.props.children}<span /></div>;
-      }
-    });
-
-    var TestContainer = React.createClass({
-
-      render: function() {
-        return (
-          <TestComponent>
-            <div />
-            {'second'}
-          </TestComponent>
-        );
-      }
-
-    });
-
-    expect(function() {
-
-      React.renderComponent(<TestContainer />, document.createElement('div'));
-
-    }).not.toThrow();
-  });
-
-  it('should retain key during updates in composite components', function() {
-
-    var TestComponent = React.createClass({
-      render: function() {
-        return <div>{this.props.children}</div>;
-      }
-    });
-
-    var TestContainer = React.createClass({
-
-      getInitialState: function() {
-        return { swapped: false };
-      },
-
-      swap: function() {
-        this.setState({ swapped: true });
-      },
-
-      render: function() {
-        return (
-          <TestComponent>
-            {this.state.swapped ? this.props.second : this.props.first}
-            {this.state.swapped ? this.props.first : this.props.second}
-          </TestComponent>
-        );
-      }
-
-    });
-
-    var instance0 = <span key="A" />;
-    var instance1 = <span key="B" />;
-
-    var wrapped = <TestContainer first={instance0} second={instance1} />;
-
-    wrapped = React.renderComponent(wrapped, document.createElement('div'));
-
-    var beforeID = ReactMount.getID(wrapped.getDOMNode().firstChild);
-
-    wrapped.swap();
-
-    var afterID = ReactMount.getID(wrapped.getDOMNode().firstChild);
-
-    expect(beforeID).not.toEqual(afterID);
-
-  });
-
-  it('should not allow implicit and explicit keys to collide', function() {
-    var component =
-      <div>
-        <span />
-        <span key="0" />
-      </div>;
-
-    expect(function() {
-      React.renderComponent(component, document.createElement('div'));
-    }).not.toThrow();
-  });
-
-
-});
diff --git a/src/core/__tests__/ReactInstanceHandles-test.js b/src/core/__tests__/ReactInstanceHandles-test.js
deleted file mode 100644
index bd8a4ff6deb..00000000000
--- a/src/core/__tests__/ReactInstanceHandles-test.js
+++ /dev/null
@@ -1,420 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React = require('React');
-var ReactTestUtils = require('ReactTestUtils');
-var ReactMount = require('ReactMount');
-
-/**
- * Ensure that all callbacks are invoked, passing this unique argument.
- */
-var ARG = {arg: true};
-var ARG2 = {arg2: true};
-
-var ChildComponent = React.createClass({
-  render: function() {
-    return (
-      <div ref="DIV">
-        <div ref="DIV_1" />
-        <div ref="DIV_2" />
-      </div>
-    );
-  }
-});
-
-var ParentComponent = React.createClass({
-  render: function() {
-    return (
-      <div ref="P">
-        <div ref="P_P1">
-          <ChildComponent ref="P_P1_C1" />
-          <ChildComponent ref="P_P1_C2" />
-        </div>
-        <div ref="P_OneOff" />
-      </div>
-    );
-  }
-});
-
-function renderParentIntoDocument() {
-  return ReactTestUtils.renderIntoDocument(<ParentComponent />);
-}
-
-describe('ReactInstanceHandles', function() {
-  var ReactInstanceHandles;
-
-  var aggregatedArgs;
-  function argAggregator(id, isUp, arg) {
-    aggregatedArgs.push({
-      id: id,
-      isUp: isUp,
-      arg: arg
-    });
-  }
-
-  beforeEach(function() {
-    ReactInstanceHandles = require('ReactInstanceHandles');
-    aggregatedArgs = [];
-  });
-
-  describe('isRenderedByReact', function() {
-    it('should not crash on text nodes', function() {
-      expect(function() {
-        ReactMount.isRenderedByReact(document.createTextNode('yolo'));
-      }).not.toThrow();
-    });
-  });
-
-  describe('findComponentRoot', function() {
-    it('should find the correct node with prefix sibling IDs', function() {
-      var parentNode = document.createElement('div');
-      var childNodeA = document.createElement('div');
-      var childNodeB = document.createElement('div');
-      parentNode.appendChild(childNodeA);
-      parentNode.appendChild(childNodeB);
-
-      ReactMount.setID(parentNode, '.0');
-      ReactMount.setID(childNodeA, '.0.0');
-      ReactMount.setID(childNodeB, '.0.0:1');
-
-      expect(
-        ReactMount.findComponentRoot(
-          parentNode,
-          ReactMount.getID(childNodeB)
-        )
-      ).toBe(childNodeB);
-    });
-
-    it('should work around unidentified nodes', function() {
-      var parentNode = document.createElement('div');
-      var childNodeA = document.createElement('div');
-      var childNodeB = document.createElement('div');
-      parentNode.appendChild(childNodeA);
-      parentNode.appendChild(childNodeB);
-
-      ReactMount.setID(parentNode, '.0');
-      // No ID on `childNodeA`.
-      ReactMount.setID(childNodeB, '.0.0:1');
-
-      expect(
-        ReactMount.findComponentRoot(
-          parentNode,
-          ReactMount.getID(childNodeB)
-        )
-      ).toBe(childNodeB);
-    });
-
-    it('should throw if a rendered element cannot be found', function() {
-      var parentNode = document.createElement('table');
-      var childNodeA = document.createElement('tbody');
-      var childNodeB = document.createElement('tr');
-      parentNode.appendChild(childNodeA);
-      childNodeA.appendChild(childNodeB);
-
-      ReactMount.setID(parentNode, '.0');
-      // No ID on `childNodeA`, it was "rendered by the browser".
-      ReactMount.setID(childNodeB, '.0.1:0');
-
-      expect(ReactMount.findComponentRoot(
-        parentNode,
-        ReactMount.getID(childNodeB)
-      )).toBe(childNodeB);
-
-      expect(function() {
-        ReactMount.findComponentRoot(
-          parentNode,
-          ReactMount.getID(childNodeB) + ":junk"
-        );
-      }).toThrow(
-        'Invariant Violation: findComponentRoot(..., .0.1:0:junk): ' +
-        'Unable to find element. This probably means the DOM was ' +
-        'unexpectedly mutated (e.g., by the browser), usually due to ' +
-        'forgetting a <tbody> when using tables, nesting tags ' +
-        'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' +
-        'parent. ' +
-        'Try inspecting the child nodes of the element with React ID `.0`.'
-      );
-    });
-  });
-
-  describe('getReactRootIDFromNodeID', function() {
-    it('should support strings', function() {
-      var test = '.s_0_1.0..1';
-      var expected = '.s_0_1';
-      var actual = ReactInstanceHandles.getReactRootIDFromNodeID(test);
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  describe('getReactRootIDFromNodeID', function() {
-    it('should return null for invalid IDs', function() {
-      var getReactRootIDFromNodeID = (
-        ReactInstanceHandles.getReactRootIDFromNodeID
-      );
-
-      expect(getReactRootIDFromNodeID(null)).toEqual(null);
-      expect(getReactRootIDFromNodeID('.')).toEqual(null);
-      expect(getReactRootIDFromNodeID('#')).toEqual(null);
-    });
-  });
-
-  describe('traverseTwoPhase', function() {
-    it("should not traverse when traversing outside DOM", function() {
-      var targetID = '';
-      var expectedAggregation = [];
-      ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should traverse two phase across component boundary", function() {
-      var parent = renderParentIntoDocument();
-      var targetID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG},
-        {id: parent.refs.P_P1._rootNodeID, isUp: false, arg: ARG},
-        {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: false, arg: ARG},
-        {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: false, arg: ARG},
-
-        {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P_P1._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}
-      ];
-      ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should traverse two phase at shallowest node", function() {
-      var parent = renderParentIntoDocument();
-      var targetID = parent.refs.P._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG},
-        {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}
-      ];
-      ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-  });
-
-  describe('traverseEnterLeave', function() {
-    it("should not traverse when enter/leaving outside DOM", function() {
-      var targetID = '';
-      var expectedAggregation = [];
-      ReactInstanceHandles.traverseEnterLeave(
-        targetID, targetID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should not traverse if enter/leave the same node", function() {
-      var parent = renderParentIntoDocument();
-      var leaveID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;
-      var enterID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;
-      var expectedAggregation = [];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should traverse enter/leave to sibling - avoids parent", function() {
-      var parent = renderParentIntoDocument();
-      var leaveID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;
-      var enterID = parent.refs.P_P1_C1.refs.DIV_2._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: true, arg: ARG},
-        // enter/leave shouldn't fire antyhing on the parent
-        {id: parent.refs.P_P1_C1.refs.DIV_2._rootNodeID, isUp: false, arg: ARG2}
-      ];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should traverse enter/leave to parent - avoids parent", function() {
-      var parent = renderParentIntoDocument();
-      var leaveID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;
-      var enterID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: true, arg: ARG}
-      ];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should enter from the window", function() {
-      var parent = renderParentIntoDocument();
-      var leaveID = ''; // From the window or outside of the React sandbox.
-      var enterID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG2},
-        {id: parent.refs.P_P1._rootNodeID, isUp: false, arg: ARG2},
-        {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: false, arg: ARG2}
-      ];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should enter from the window to the shallowest", function() {
-      var parent = renderParentIntoDocument();
-      var leaveID = ''; // From the window or outside of the React sandbox.
-      var enterID = parent.refs.P._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG2}
-      ];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should leave to the window", function() {
-      var parent = renderParentIntoDocument();
-      var enterID = ''; // From the window or outside of the React sandbox.
-      var leaveID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P_P1._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}
-      ];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-
-    it("should leave to the window from the shallowest", function() {
-      var parent = renderParentIntoDocument();
-      var enterID = ''; // From the window or outside of the React sandbox.
-      var leaveID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;
-      var expectedAggregation = [
-        {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P_P1._rootNodeID, isUp: true, arg: ARG},
-        {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}
-      ];
-      ReactInstanceHandles.traverseEnterLeave(
-        leaveID, enterID, argAggregator, ARG, ARG2
-      );
-      expect(aggregatedArgs).toEqual(expectedAggregation);
-    });
-  });
-
-  describe('getNextDescendantID', function() {
-    it("should return next descendent from window", function() {
-      var parent = renderParentIntoDocument();
-      expect(
-        ReactInstanceHandles._getNextDescendantID(
-          '',
-          parent.refs.P_P1._rootNodeID
-        )
-      ).toBe(parent.refs.P._rootNodeID);
-    });
-
-    it("should return window for next descendent towards window", function() {
-      expect(ReactInstanceHandles._getNextDescendantID('', '')).toBe('');
-    });
-
-    it("should return self for next descendent towards self", function() {
-      var parent = renderParentIntoDocument();
-      expect(
-        ReactInstanceHandles._getNextDescendantID(
-          parent.refs.P_P1._rootNodeID,
-          parent.refs.P_P1._rootNodeID
-        )
-      ).toBe(parent.refs.P_P1._rootNodeID);
-    });
-  });
-
-  describe('getFirstCommonAncestorID', function() {
-    it("should determine the first common ancestor correctly", function() {
-      var parent = renderParentIntoDocument();
-      var ancestors = [
-        // Common ancestor from window to deep element is ''.
-        { one: {_rootNodeID: ''},
-          two: parent.refs.P_P1_C1.refs.DIV_1,
-          com: {_rootNodeID: ''}
-        },
-        // Same as previous - reversed direction.
-        { one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: {_rootNodeID: ''},
-          com: {_rootNodeID: ''}
-        },
-        // Common ancestor from window to shallow id is ''.
-        { one: parent.refs.P,
-          two: {_rootNodeID: ''},
-          com: {_rootNodeID: ''}
-        },
-        // Common ancestor with self is self.
-        { one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: parent.refs.P_P1_C1.refs.DIV_1,
-          com: parent.refs.P_P1_C1.refs.DIV_1
-        },
-        // Common ancestor with self is self - even if topmost DOM.
-        { one: parent.refs.P, two: parent.refs.P, com: parent.refs.P },
-        // Siblings
-        {
-          one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: parent.refs.P_P1_C1.refs.DIV_2,
-          com: parent.refs.P_P1_C1.refs.DIV
-        },
-        // Common ancestor with parent is the parent.
-        {
-          one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: parent.refs.P_P1_C1.refs.DIV,
-          com: parent.refs.P_P1_C1.refs.DIV
-        },
-        // Common ancestor with grandparent is the grandparent.
-        {
-          one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: parent.refs.P_P1_C1,
-          com: parent.refs.P_P1_C1
-        },
-        // Grantparent across subcomponent boundaries.
-        {
-          one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: parent.refs.P_P1_C2.refs.DIV_1,
-          com: parent.refs.P_P1
-        },
-        // Something deep with something one-off.
-        {
-          one: parent.refs.P_P1_C1.refs.DIV_1,
-          two: parent.refs.P_OneOff,
-          com: parent.refs.P
-        }
-      ];
-      var i;
-      for (i = 0; i < ancestors.length; i++) {
-        var plan = ancestors[i];
-        var firstCommon = ReactInstanceHandles._getFirstCommonAncestorID(
-          plan.one._rootNodeID,
-          plan.two._rootNodeID
-        );
-        expect(firstCommon).toBe(plan.com._rootNodeID);
-      }
-    });
-  });
-
-});
diff --git a/src/core/__tests__/ReactMultiChild-test.js b/src/core/__tests__/ReactMultiChild-test.js
deleted file mode 100644
index 8efb7153eb3..00000000000
--- a/src/core/__tests__/ReactMultiChild-test.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var mocks = require('mocks');
-
-describe('ReactMultiChild', function() {
-  var React;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    React = require('React');
-  });
-
-  describe('reconciliation', function() {
-    it('should update children when possible', function() {
-      var container = document.createElement('div');
-
-      var mockMount = mocks.getMockFunction();
-      var mockUpdate = mocks.getMockFunction();
-      var mockUnmount = mocks.getMockFunction();
-
-      var MockComponent = React.createClass({
-        componentDidMount: mockMount,
-        componentDidUpdate: mockUpdate,
-        componentWillUnmount: mockUnmount,
-        render: function() {
-          return <span />;
-        }
-      });
-
-      expect(mockMount.mock.calls.length).toBe(0);
-      expect(mockUpdate.mock.calls.length).toBe(0);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<div><MockComponent /></div>, container);
-
-      expect(mockMount.mock.calls.length).toBe(1);
-      expect(mockUpdate.mock.calls.length).toBe(0);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<div><MockComponent /></div>, container);
-
-      expect(mockMount.mock.calls.length).toBe(1);
-      expect(mockUpdate.mock.calls.length).toBe(1);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-    });
-
-    it('should replace children with different constructors', function() {
-      var container = document.createElement('div');
-
-      var mockMount = mocks.getMockFunction();
-      var mockUnmount = mocks.getMockFunction();
-
-      var MockComponent = React.createClass({
-        componentDidMount: mockMount,
-        componentWillUnmount: mockUnmount,
-        render: function() {
-          return <span />;
-        }
-      });
-
-      expect(mockMount.mock.calls.length).toBe(0);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<div><MockComponent /></div>, container);
-
-      expect(mockMount.mock.calls.length).toBe(1);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<div><span /></div>, container);
-
-      expect(mockMount.mock.calls.length).toBe(1);
-      expect(mockUnmount.mock.calls.length).toBe(1);
-    });
-
-    it('should replace children with different owners', function() {
-      var container = document.createElement('div');
-
-      var mockMount = mocks.getMockFunction();
-      var mockUnmount = mocks.getMockFunction();
-
-      var MockComponent = React.createClass({
-        componentDidMount: mockMount,
-        componentWillUnmount: mockUnmount,
-        render: function() {
-          return <span />;
-        }
-      });
-
-      var WrapperComponent = React.createClass({
-        render: function() {
-          return this.props.children || <MockComponent />;
-        }
-      });
-
-      expect(mockMount.mock.calls.length).toBe(0);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<WrapperComponent />, container);
-
-      expect(mockMount.mock.calls.length).toBe(1);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(
-        <WrapperComponent><MockComponent /></WrapperComponent>,
-        container
-      );
-
-      expect(mockMount.mock.calls.length).toBe(2);
-      expect(mockUnmount.mock.calls.length).toBe(1);
-    });
-
-    it('should replace children with different keys', function() {
-      var container = document.createElement('div');
-
-      var mockMount = mocks.getMockFunction();
-      var mockUnmount = mocks.getMockFunction();
-
-      var MockComponent = React.createClass({
-        componentDidMount: mockMount,
-        componentWillUnmount: mockUnmount,
-        render: function() {
-          return <span />;
-        }
-      });
-
-      expect(mockMount.mock.calls.length).toBe(0);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<div><MockComponent key="A" /></div>, container);
-
-      expect(mockMount.mock.calls.length).toBe(1);
-      expect(mockUnmount.mock.calls.length).toBe(0);
-
-      React.renderComponent(<div><MockComponent key="B" /></div>, container);
-
-      expect(mockMount.mock.calls.length).toBe(2);
-      expect(mockUnmount.mock.calls.length).toBe(1);
-    });
-  });
-
-  describe('innerHTML', function() {
-    var setInnerHTML;
-
-    // Only run this suite if `Element.prototype.innerHTML` can be spied on.
-    var innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
-      Element.prototype,
-      'innerHTML'
-    );
-    if (!innerHTMLDescriptor) {
-      return;
-    }
-
-    beforeEach(function() {
-      Object.defineProperty(Element.prototype, 'innerHTML', {
-        set: setInnerHTML = jasmine.createSpy().andCallFake(
-          innerHTMLDescriptor.set
-        )
-      });
-    });
-
-    it('should only set `innerHTML` once on update', function() {
-      var container = document.createElement('div');
-
-      React.renderComponent(
-        <div>
-          <p><span /></p>
-          <p><span /></p>
-          <p><span /></p>
-        </div>,
-        container
-      );
-      // Warm the cache used by `getMarkupWrap`.
-      React.renderComponent(
-        <div>
-          <p><span /><span /></p>
-          <p><span /><span /></p>
-          <p><span /><span /></p>
-        </div>,
-        container
-      );
-      expect(setInnerHTML).toHaveBeenCalled();
-      var callCountOnMount = setInnerHTML.callCount;
-
-      React.renderComponent(
-        <div>
-          <p><span /><span /><span /></p>
-          <p><span /><span /><span /></p>
-          <p><span /><span /><span /></p>
-        </div>,
-        container
-      );
-      expect(setInnerHTML.callCount).toBe(callCountOnMount + 1);
-    });
-  });
-});
diff --git a/src/core/__tests__/ReactMultiChildReconcile-test.js b/src/core/__tests__/ReactMultiChildReconcile-test.js
deleted file mode 100644
index a560ac13d27..00000000000
--- a/src/core/__tests__/ReactMultiChildReconcile-test.js
+++ /dev/null
@@ -1,771 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-require('mock-modules');
-
-var React = require('React');
-var ReactTestUtils = require('ReactTestUtils');
-var ReactMount = require('ReactMount');
-
-var mapObject = require('mapObject');
-
-var stripEmptyValues = function(obj) {
-  var ret = {};
-  var name;
-  for (name in obj) {
-    if (!obj.hasOwnProperty(name)) {
-      continue;
-    }
-    if (obj[name] !== null && obj[name] !== undefined) {
-      ret[name] = obj[name];
-    }
-  }
-  return ret;
-};
-
-/**
- * Child key names are wrapped like '.$key:0'. We strip the extra chars out
- * here. This relies on an implementation detail of the rendering system.
- */
-var getOriginalKey = function(childName) {
-  var match = childName.match(/^\.\$([^.]+)\:0$/);
-  expect(match).not.toBeNull();
-  return match[1];
-};
-
-/**
- * Contains internal static internal state in order to test that updates to
- * existing children won't reinitialize components, when moving children -
- * reusing existing DOM/memory resources.
- */
-var StatusDisplay = React.createClass({
-  getInitialState: function() {
-    return { internalState: Math.random() };
-  },
-
-  getStatus: function() {
-    return this.props.status;
-  },
-
-  getInternalState: function() {
-    return this.state.internalState;
-  },
-
-  render: function() {
-    return (
-      <div>
-        {this.state.internalState}
-      </div>
-    );
-  }
-});
-
-/**
- * Displays friends statuses.
- */
-var FriendsStatusDisplay = React.createClass({
-  /**
-   * Retrieves the rendered children in a nice format for comparing to the input
-   * `this.props.usernameToStatus`. Gets the order directly from each rendered
-   * child's `index` field. Refs are not maintained in the rendered order, and
-   * neither is `this._renderedChildren` (surprisingly).
-   */
-  getStatusDisplays: function() {
-    var name;
-    var orderOfUsernames = [];
-    var statusDisplays = this._renderedComponent._renderedChildren;
-    for (name in statusDisplays) {
-      var child = statusDisplays[name];
-      var isPresent = !!child;
-      if (isPresent) {
-        orderOfUsernames[child._mountIndex] = getOriginalKey(name);
-      }
-    }
-    var res = {};
-    var i;
-    for (i = 0; i < orderOfUsernames.length; i++) {
-      var key = orderOfUsernames[i];
-      res[key] = this.refs[key];
-    }
-    return res;
-  },
-  render: function() {
-    var children = null;
-    var key;
-    for (key in this.props.usernameToStatus) {
-      var status = this.props.usernameToStatus[key];
-      children = children || {};
-      children[key] = !status ? null :
-          <StatusDisplay ref={key} status={status} />;
-    }
-    return (
-      <div>
-        {children}
-      </div>
-    );
-  }
-});
-
-
-function getInteralStateByUserName(statusDisplays) {
-  return mapObject(statusDisplays, function(statusDisplay, key) {
-    return statusDisplay.getInternalState();
-  });
-}
-
-/**
- * Verifies that the rendered `StatusDisplay` instances match the `props` that
- * were responsible for allocating them. Checks the content of the user's status
- * message as well as the order of them.
- */
-function verifyStatuses(statusDisplays, props) {
-  var nonEmptyStatusDisplays = stripEmptyValues(statusDisplays);
-  var nonEmptyStatusProps = stripEmptyValues(props.usernameToStatus);
-  var username;
-  expect(Object.keys(nonEmptyStatusDisplays).length)
-    .toEqual(Object.keys(nonEmptyStatusProps).length);
-  for (username in nonEmptyStatusDisplays) {
-    if (!nonEmptyStatusDisplays.hasOwnProperty(username)) {
-      continue;
-    }
-    expect(nonEmptyStatusDisplays[username].getStatus())
-      .toEqual(nonEmptyStatusProps[username]);
-  }
-
-  // now go the other way to make sure we got them all.
-  for (username in nonEmptyStatusProps) {
-    if (!nonEmptyStatusProps.hasOwnProperty(username)) {
-      continue;
-    }
-    expect(nonEmptyStatusDisplays[username].getStatus())
-      .toEqual(nonEmptyStatusProps[username]);
-  }
-
-  expect(Object.keys(nonEmptyStatusDisplays))
-      .toEqual(Object.keys(nonEmptyStatusProps));
-}
-
-/**
- * For all statusDisplays that existed in the previous iteration of the
- * sequence, verify that the state has been preserved. `StatusDisplay` contains
- * a unique number that allows us to track internal state across ordering
- * movements.
- */
-function verifyStatesPreserved(lastInternalStates, statusDisplays) {
-  var key;
-  for (key in statusDisplays) {
-    if (!statusDisplays.hasOwnProperty(key)) {
-      continue;
-    }
-    if (lastInternalStates[key]) {
-      expect(lastInternalStates[key])
-        .toEqual(statusDisplays[key].getInternalState());
-    }
-  }
-}
-
-
-/**
- * Verifies that the internal representation of a set of `renderedChildren`
- * accurately reflects what is in the DOM.
- */
-function verifyDomOrderingAccurate(parentInstance, statusDisplays) {
-  var containerNode = parentInstance.getDOMNode();
-  var statusDisplayNodes = containerNode.childNodes;
-  var i;
-  var orderedDomIds = [];
-  for (i=0; i < statusDisplayNodes.length; i++) {
-    orderedDomIds.push(ReactMount.getID(statusDisplayNodes[i]));
-  }
-
-  var orderedLogicalIds = [];
-  var username;
-  for (username in statusDisplays) {
-    if (!statusDisplays.hasOwnProperty(username)) {
-      continue;
-    }
-    var statusDisplay = statusDisplays[username];
-    orderedLogicalIds.push(statusDisplay._rootNodeID);
-  }
-  expect(orderedDomIds).toEqual(orderedLogicalIds);
-}
-
-/**
- * Todo: Check that internal state is preserved across transitions
- */
-function testPropsSequence(sequence) {
-  var i;
-  var parentInstance =
-      ReactTestUtils.renderIntoDocument(FriendsStatusDisplay(sequence[0]));
-  var statusDisplays = parentInstance.getStatusDisplays();
-  var lastInternalStates = getInteralStateByUserName(statusDisplays);
-  verifyStatuses(statusDisplays, sequence[0]);
-
-  for (i = 1; i < sequence.length; i++) {
-    parentInstance.replaceProps(sequence[i]);
-    statusDisplays = parentInstance.getStatusDisplays();
-    verifyStatuses(statusDisplays, sequence[i]);
-    verifyStatesPreserved(lastInternalStates, statusDisplays);
-    verifyDomOrderingAccurate(parentInstance, statusDisplays);
-
-    lastInternalStates = getInteralStateByUserName(statusDisplays);
-  }
-}
-
-describe('ReactMultiChildReconcile', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-  });
-
-  it('should reset internal state if removed then readded', function() {
-    // Test basics.
-    var props = {
-      usernameToStatus: {
-        jcw: 'jcwStatus'
-      }
-    };
-
-    var parentInstance =
-        ReactTestUtils.renderIntoDocument(FriendsStatusDisplay(props));
-    var statusDisplays = parentInstance.getStatusDisplays();
-    var startingInternalState = statusDisplays.jcw.getInternalState();
-
-    // Now remove the child.
-    parentInstance.replaceProps({ usernameToStatus: {} });
-    statusDisplays = parentInstance.getStatusDisplays();
-    expect(statusDisplays.jcw).toBeFalsy();
-
-    // Now reset the props that cause there to be a child
-    parentInstance.replaceProps(props);
-    statusDisplays = parentInstance.getStatusDisplays();
-    expect(statusDisplays.jcw).toBeTruthy();
-    expect(statusDisplays.jcw.getInternalState())
-        .toNotBe(startingInternalState);
-  });
-
-  it('should create unique identity', function() {
-    // Test basics.
-    var usernameToStatus = {
-      jcw: 'jcwStatus',
-      awalke: 'awalkeStatus',
-      bob: 'bobStatus'
-    };
-
-    testPropsSequence([ { usernameToStatus: usernameToStatus } ]);
-  });
-
-  it('should preserve order if children order has not changed', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwstatus2',
-          jordanjcw: 'jordanjcwstatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should transition from zero to one children correctly', function() {
-    var PROPS_SEQUENCE = [
-      { usernameToStatus: {} },
-      {
-        usernameToStatus: {
-          first: 'firstStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should transition from one to zero children correctly', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          first: 'firstStatus'
-        }
-      },
-      { usernameToStatus: {} }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should transition from one child to null children', function() {
-    testPropsSequence([
-      {
-        usernameToStatus: {
-          first: 'firstStatus'
-        }
-      },
-      { }
-    ]);
-  });
-
-  it('should transition from null children to one child', function() {
-    testPropsSequence([
-      { },
-      {
-        usernameToStatus: {
-          first: 'firstStatus'
-        }
-      }
-    ]);
-  });
-
-  it('should transition from zero children to null children', function() {
-    testPropsSequence([
-      {
-        usernameToStatus: { }
-      },
-      { }
-    ]);
-  });
-
-  it('should transition from null children to zero children', function() {
-    testPropsSequence([
-      { },
-      {
-        usernameToStatus: { }
-      }
-    ]);
-  });
-
-
-
-  /**
-   * `FriendsStatusDisplay` renders nulls as empty children (it's a convention
-   * of `FriendsStatusDisplay`, nothing related to React or these test cases.
-   */
-  it('should remove nulled out children at the beginning', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: null,
-          jordanjcw: 'jordanjcwstatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should remove nulled out children at the end', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwstatus2',
-          jordanjcw: null
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should reverse the order of two children', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userTwo: 'userTwoStatus',
-          userOne: 'userOneStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should reverse the order of more than two children', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userThree: 'userThreeStatus',
-          userTwo: 'userTwoStatus',
-          userOne: 'userOneStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should cycle order correctly', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus',
-          userOne: 'userOneStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus',
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userFour: 'userFourStatus',
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus'
-        }
-      },
-      {
-        usernameToStatus: {               // Full circle!
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should cycle order correctly in the other direction', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userFour: 'userFourStatus',
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus',
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus',
-          userOne: 'userOneStatus'
-        }
-      },
-      {
-        usernameToStatus: {               // Full circle!
-          userOne: 'userOneStatus',
-          userTwo: 'userTwoStatus',
-          userThree: 'userThreeStatus',
-          userFour: 'userFourStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-
-  it('should remove nulled out children and ignore ' +
-     'new null children', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jordanjcw: 'jordanjcwstatus2',
-          jcw: null,
-          another: null
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should remove nulled out children and reorder remaining', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus',
-          john: 'johnStatus',  // john will go away
-          joe: 'joeStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jordanjcw: 'jordanjcwStatus',
-          joe: 'joeStatus',
-          jcw: 'jcwStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should append children to the end', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus',
-          jordanjcwnew: 'jordanjcwnewStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should append multiple children to the end', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus',
-          jordanjcwnew: 'jordanjcwnewStatus',
-          jordanjcwnew2: 'jordanjcwnewStatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should prepend children to the beginning', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          newUsername: 'newUsernameStatus',
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should prepend multiple children to the beginning', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          newNewUsername: 'newNewUsernameStatus',
-          newUsername: 'newUsernameStatus',
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should not prepend an empty child to the beginning', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          emptyUsername: null,
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should not append an empty child to the end', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus',
-          emptyUsername: null
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should not insert empty children in the middle', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwstatus2',
-          skipOverMe: null,
-          skipOverMeToo: null,
-          definitelySkipOverMe: null,
-          jordanjcw: 'jordanjcwstatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should insert one new child in the middle', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwstatus2',
-          insertThis: 'insertThisStatus',
-          jordanjcw: 'jordanjcwstatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should insert multiple new truthy children in the middle', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwstatus2',
-          insertThis: 'insertThisStatus',
-          insertThisToo: 'insertThisTooStatus',
-          definitelyInsertThisToo: 'definitelyInsertThisTooStatus',
-          jordanjcw: 'jordanjcwstatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-
-  it('should insert non-empty children in middle where nulls were', function() {
-    var PROPS_SEQUENCE = [
-      {
-        usernameToStatus: {
-          jcw: 'jcwStatus',
-          insertThis: null,
-          insertThisToo: null,
-          definitelyInsertThisToo: null,
-          jordanjcw: 'jordanjcwStatus'
-        }
-      },
-      {
-        usernameToStatus: {
-          jcw: 'jcwstatus2',
-          insertThis: 'insertThisStatus',
-          insertThisToo: 'insertThisTooStatus',
-          definitelyInsertThisToo: 'definitelyInsertThisTooStatus',
-          jordanjcw: 'jordanjcwstatus2'
-        }
-      }
-    ];
-    testPropsSequence(PROPS_SEQUENCE);
-  });
-});
diff --git a/src/core/__tests__/ReactMultiChildText-test.js b/src/core/__tests__/ReactMultiChildText-test.js
deleted file mode 100644
index 3ecef8ed782..00000000000
--- a/src/core/__tests__/ReactMultiChildText-test.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-require('mock-modules');
-
-var React = require('React');
-var ReactTestUtils = require('ReactTestUtils');
-
-var reactComponentExpect = require('reactComponentExpect');
-
-var assertNodeText = function(instance, text) {
-  expect(instance.getDOMNode().childNodes.length).toBe(1);
-  expect(instance.getDOMNode().innerHTML).toBe('' + text);
-};
-
-var assertEmptyNode = function(instance) {
-  expect(instance.getDOMNode().childNodes.length).toBe(0);
-};
-
-var assertMultiChild = function(instance, textOne, textTwo) {
-  expect(instance.getDOMNode().childNodes.length).toBe(2);
-  var firstTextDOMNode =
-    reactComponentExpect(instance)
-      .expectRenderedChildAt(0)
-      .toBeTextComponent()
-      .instance()
-      .getDOMNode();
-  expect(firstTextDOMNode.childNodes.length).toBe(textOne === '' ? 0 : 1);
-  expect(firstTextDOMNode.innerHTML).toBe('' + textOne);
-
-  var secondTextDOMNode =
-    reactComponentExpect(instance)
-      .expectRenderedChildAt(1)
-      .toBeTextComponent()
-      .instance()
-      .getDOMNode();
-  expect(secondTextDOMNode.childNodes.length).toBe(textTwo === '' ? 0 : 1);
-  expect(secondTextDOMNode.innerHTML).toBe('' + textTwo);
-};
-
-var assertSingleChild = function(instance, text) {
-  expect(instance.getDOMNode().childNodes.length).toBe(1);
-  var textDOMNode =
-    reactComponentExpect(instance)
-      .expectRenderedChildAt(0)
-      .toBeTextComponent()
-      .instance()
-      .getDOMNode();
-  expect(textDOMNode.childNodes.length).toBe(1);
-  expect(textDOMNode.innerHTML).toBe('' + text);
-};
-
-// Helpers
-var renderSingleTextChild = function(text) {
-  var d = ReactTestUtils.renderIntoDocument(<div>{text}</div>);
-  return d;
-};
-var renderMultipleTextChildren = function(textOne, textTwo) {
-  var d = ReactTestUtils.renderIntoDocument(<div>{textOne}{textTwo}</div>);
-  return d;
-};
-
-var TestCompositeComponent = React.createClass({
-  render: function() {
-    return (
-      <div></div>
-    );
-  }
-});
-
-/**
- * ReactMultiChild DOM integration test. In ReactDOM components, we make sure
- * that single children that are strings are treated as "content" which is much
- * faster to render and update.
- */
-describe('ReactMultiChildText', function() {
-  it('should render null as empty', function() {
-    var d = renderSingleTextChild(null);
-    // false should act exactly as a null child
-    assertEmptyNode(d);
-  });
-
-  it('should render undefined as empty', function() {
-    var d = renderSingleTextChild(undefined);
-    // false should act exactly as a null child
-    assertEmptyNode(d);
-  });
-
-  it('should render null as empty then switch to text node', function() {
-    var d = renderSingleTextChild(null);
-    // false should act exactly as a null child
-    assertEmptyNode(d);
-    d.replaceProps({children: 'hello'});
-    assertNodeText(d, 'hello');
-  });
-
-  it('should render undefined as empty then switch to text node', function() {
-    var d = renderSingleTextChild(undefined);
-    // false should act exactly as a null child
-    assertEmptyNode(d);
-    d.replaceProps({children: 'hello'});
-    assertNodeText(d, 'hello');
-  });
-
-  it('should render null as empty then switch to span children', function() {
-    var d = renderSingleTextChild(null);
-    // false should act exactly as a null child
-    assertEmptyNode(d);
-    d.replaceProps({children: ['hello', 'goodbye']});
-    assertMultiChild(d, 'hello', 'goodbye');
-  });
-
-  it('should render null as empty then switch to span children', function() {
-    var d = renderSingleTextChild(undefined);
-    // false should act exactly as a null child
-    assertEmptyNode(d);
-    d.replaceProps({children: ['hello', 'goodbye']});
-    assertMultiChild(d, 'hello', 'goodbye');
-  });
-
-  it('should render zero string as text node then switch to spans', function() {
-    var d = renderSingleTextChild('0');
-    // false should act exactly as a null child
-    assertNodeText(d, '0');
-    d.replaceProps({children: ['hello', 'goodbye']});
-    assertMultiChild(d, 'hello', 'goodbye');
-  });
-
-  it('should render zero number as text node then switch to spans', function() {
-    var d = renderSingleTextChild(0);
-    // false should act exactly as a null child
-    assertNodeText(d, '0');
-    d.replaceProps({children: ['hello', 'goodbye']});
-    assertMultiChild(d, 'hello', 'goodbye');
-  });
-
-  it('should render a single text child to a single text node', function() {
-    var d = renderSingleTextChild('hello');
-    assertNodeText(d, 'hello');
-  });
-
-  it('should render two string children to two spans', function() {
-    var d = renderMultipleTextChildren('hello', 'goodbye');
-    assertMultiChild(d, 'hello', 'goodbye');
-  });
-
-  it('should render false as a null child', function() {
-    var d = renderMultipleTextChildren(false, 234.2);
-    // false should act exactly as a null child
-    assertSingleChild(d, '234.2');
-  });
-
-  it('should render true as a null child', function() {
-    var d = renderMultipleTextChildren(true, 234.2);
-    // false should act exactly as a null child
-    assertSingleChild(d, '234.2');
-  });
-
-  it('should render true as a null child', function() {
-    var d = renderMultipleTextChildren(true, 234.2);
-    // false should act exactly as a null child
-    assertSingleChild(d, '234.2');
-  });
-
-  it('should render one true as no children', function() {
-    var d = renderSingleTextChild(true);
-    assertEmptyNode(d);
-  });
-
-  it('should render one false as no children', function() {
-    var d = renderSingleTextChild(false);
-    assertEmptyNode(d);
-  });
-
-  it('should render empty string as no children', function() {
-    var d = renderSingleTextChild('');
-    assertEmptyNode(d);
-  });
-
-  it('should render two empty strings as two empty spans', function() {
-    var d = renderMultipleTextChildren('', '');
-    assertMultiChild(d, '', '');
-  });
-
-  it('should render empty string and string as two spans', function() {
-    var d = renderMultipleTextChildren('', 'yo');
-    assertMultiChild(d, '', 'yo');
-  });
-
-  it('should render child string zero as text node', function() {
-    var d = renderSingleTextChild('0');
-    // false should act exactly as a null child
-    assertNodeText(d, '0');
-  });
-
-  it('should render child number zero as text node', function() {
-    var d = renderSingleTextChild(0);
-    // false should act exactly as a null child
-    assertNodeText(d, '0');
-  });
-
-  it('should render content string zero as text node', function() {
-    var d = renderSingleTextChild('0');
-    // false should act exactly as a null child
-    assertNodeText(d, '0');
-  });
-
-  it('should render zero string as string child', function() {
-    var d = renderMultipleTextChildren('0', 234.2);
-    // false should act exactly as a null child
-    assertMultiChild(d, '0', '234.2');
-  });
-
-  it('should render zero string as string child then text node', function() {
-    var d = renderMultipleTextChildren('0', 234.2);
-    // false should act exactly as a null child
-    assertMultiChild(d, '0', '234.2');
-    d.replaceProps({children: '0'});
-    assertNodeText(d, '0');
-  });
-
- it('should render zero number as string child then text node', function() {
-    var d = renderMultipleTextChildren(0, 234.2);
-    // false should act exactly as a null child
-    assertMultiChild(d, '0', '234.2');
-    d.replaceProps({children: 0});
-    // BELOW REVEALS A BUG IN JSDOM
-    // assertNodeText(d, '0');  // This works in the browser.
-  });
-
-  it('should render multiple children then switch to inline', function() {
-    var d = renderMultipleTextChildren('hello', 'goodbye');
-    assertMultiChild(d, 'hello', 'goodbye');
-    d.replaceProps({children: 'hello'});
-    assertNodeText(d, 'hello');
-  });
-
-  it('should render multiple children then switch to inline child', function() {
-    var d = renderMultipleTextChildren('hello', 'goodbye');
-    assertMultiChild(d, 'hello', 'goodbye');
-    // Even when switching from content to a single child, it should render
-    // that single child as inline content.
-    d.replaceProps({children: 'hello'});
-    assertNodeText(d, 'hello');
-  });
-
-  it('should render inline child, then switch to text components ', function() {
-    var d = renderSingleTextChild('hello');
-    assertNodeText(d, 'hello');
-    d.replaceProps({children: ['hello', 'goodbye']});
-    assertMultiChild(d, 'hello', 'goodbye');
-  });
-
-  it('should render inline child, then switch to composite', function() {
-    var d = renderSingleTextChild('hello');
-    assertNodeText(d, 'hello');
-    d.replaceProps({children: <TestCompositeComponent />});
-    reactComponentExpect(d)
-      .expectRenderedChildAt(0)
-      .toBeCompositeComponentWithType(TestCompositeComponent);
-  });
-
-  it('should throw if rendering both HTML and children', function() {
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(
-        <div dangerouslySetInnerHTML={{_html: 'abcdef'}}>ghjkl</div>
-      );
-    }).toThrow();
-  });
-
-  it('should render between nested components and inline children', function() {
-    var container = document.createElement('div');
-    React.renderComponent(<div><h1><span /><span /></h1></div>, container);
-
-    expect(function() {
-      React.renderComponent(<div><h1>A</h1></div>, container);
-    }).not.toThrow();
-
-    React.renderComponent(<div><h1><span /><span /></h1></div>, container);
-
-    expect(function() {
-      React.renderComponent(<div><h1>{['A']}</h1></div>, container);
-    }).not.toThrow();
-
-    React.renderComponent(<div><h1><span /><span /></h1></div>, container);
-
-    expect(function() {
-      React.renderComponent(<div><h1>{['A', 'B']}</h1></div>, container);
-    }).not.toThrow();
-  });
-});
diff --git a/src/core/__tests__/ReactPropTransferer-test.js b/src/core/__tests__/ReactPropTransferer-test.js
deleted file mode 100644
index 9373fa0ad2c..00000000000
--- a/src/core/__tests__/ReactPropTransferer-test.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTestUtils;
-var reactComponentExpect;
-
-var TestComponent;
-
-describe('ReactPropTransferer', function() {
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    reactComponentExpect = require('reactComponentExpect');
-
-    // We expect to get a warning from transferPropsTo since it's deprecated
-    spyOn(console, 'warn');
-
-    TestComponent = React.createClass({
-      render: function() {
-        var result = this.transferPropsTo(
-          <input
-            className="textinput"
-            style={{display: 'block', color: 'green'}}
-            type="text"
-            value=""
-          />
-        );
-        expect(console.warn).toHaveBeenCalled();
-        return result;
-      }
-    });
-  });
-
-  it('should leave explicitly specified properties intact', function() {
-    var instance = <TestComponent type="radio" />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-        .toBeComponentOfType(React.DOM.input)
-        .scalarPropsEqual({
-          className: 'textinput',
-          style: {display: 'block', color: 'green'},
-          type: 'text',
-          value: ''
-        });
-  });
-
-  it('should transfer unspecified properties', function() {
-    var instance = <TestComponent placeholder="Type here..." />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-        .toBeComponentOfType(React.DOM.input)
-        .scalarPropsEqual({placeholder: 'Type here...'});
-  });
-
-  it('should transfer using merge strategies', function() {
-    var instance =
-      <TestComponent
-        className="hidden_elem"
-        style={{width: '100%', display: 'none'}}
-      />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-        .toBeComponentOfType(React.DOM.input)
-        .scalarPropsEqual({
-          className: 'textinput hidden_elem',
-          style: {
-            color: 'green',
-            display: 'block',
-            width: '100%'
-          }
-        });
-  });
-
-  it('should not transfer children', function() {
-    var ChildrenTestComponent = React.createClass({
-      render: function() {
-        return this.transferPropsTo(<div />);
-      }
-    });
-
-    var instance =
-      <ChildrenTestComponent>
-        <span>Hello!</span>
-      </ChildrenTestComponent>;
-
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    reactComponentExpect(instance)
-      .expectRenderedChild()
-        .toBeDOMComponentWithTag('div')
-        .toBeDOMComponentWithNoChildren();
-  });
-
-  it('should not transfer ref or key', function() {
-    var TestComponent = React.createClass({
-      render: function() {
-        expect(this.props.ref).toBeUndefined();
-        expect(this.props.key).toBeUndefined();
-        return <div />;
-      }
-    });
-    var OuterTestComponent = React.createClass({
-      render: function() {
-        return this.transferPropsTo(<TestComponent />);
-      }
-    });
-    var OuterOuterTestComponent = React.createClass({
-      render: function() {
-        return <OuterTestComponent ref="testref" key="testkey" />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<OuterOuterTestComponent />);
-  });
-
-  it('should not transferPropsTo() a component you don\'t own', function() {
-    var Parent = React.createClass({
-      render: function() {
-        return <Child><span /></Child>;
-      }
-    });
-
-    var Child = React.createClass({
-      render: function() {
-        return this.transferPropsTo(this.props.children);
-      }
-    });
-
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(<Parent />);
-    }).toThrow(
-      'Invariant Violation: ' +
-      'Child: You can\'t call transferPropsTo() on a component that you ' +
-      'don\'t own, span. ' +
-      'This usually means you are calling transferPropsTo() on a component ' +
-      'passed in as props or children.'
-    );
-  });
-
-  it('uses the default instead of the transferred prop (regress)', function() {
-
-    var Child = React.createClass({
-
-      getDefaultProps: function() {
-        return {
-          x: 2
-        };
-      },
-
-      render: function() {
-        expect(this.props.x).toBe(2);
-        return <div />;
-      }
-
-    });
-
-    var Parent = React.createClass({
-
-      render: function() {
-        return this.transferPropsTo(<Child />);
-      }
-
-    });
-
-    ReactTestUtils.renderIntoDocument(<Parent x={5} />);
-
-  });
-
-});
diff --git a/src/core/__tests__/ReactPropTypes-test.js b/src/core/__tests__/ReactPropTypes-test.js
deleted file mode 100644
index af4c8b50497..00000000000
--- a/src/core/__tests__/ReactPropTypes-test.js
+++ /dev/null
@@ -1,787 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var PropTypes;
-var React;
-var ReactPropTypeLocations;
-var ReactTestUtils;
-
-var Component;
-var MyComponent;
-var requiredMessage =
-  'Required prop `testProp` was not specified in `testComponent`.';
-
-function typeCheckFail(declaration, value, message) {
-  var props = {testProp: value};
-  var error = declaration(
-    props,
-    'testProp',
-    'testComponent',
-    ReactPropTypeLocations.prop
-  );
-  expect(error instanceof Error).toBe(true);
-  expect(error.message).toBe(message);
-}
-
-function typeCheckPass(declaration, value) {
-  var props = {testProp: value};
-  var error = declaration(
-    props,
-    'testProp',
-    'testComponent',
-    ReactPropTypeLocations.prop
-  );
-  expect(error).toBe(undefined);
-}
-
-describe('ReactPropTypes', function() {
-  beforeEach(function() {
-    PropTypes = require('ReactPropTypes');
-    React = require('React');
-    ReactPropTypeLocations = require('ReactPropTypeLocations');
-    ReactTestUtils = require('ReactTestUtils');
-  });
-
-  describe('Primitive Types', function() {
-    it("should warn for invalid strings", function() {
-      typeCheckFail(
-        PropTypes.string,
-        [],
-        'Invalid prop `testProp` of type `array` supplied to ' +
-        '`testComponent`, expected `string`.'
-      );
-      typeCheckFail(
-        PropTypes.string,
-        false,
-        'Invalid prop `testProp` of type `boolean` supplied to ' +
-        '`testComponent`, expected `string`.'
-      );
-      typeCheckFail(
-        PropTypes.string,
-        0,
-        'Invalid prop `testProp` of type `number` supplied to ' +
-        '`testComponent`, expected `string`.'
-      );
-      typeCheckFail(
-        PropTypes.string,
-        {},
-        'Invalid prop `testProp` of type `object` supplied to ' +
-        '`testComponent`, expected `string`.'
-      );
-    });
-
-    it('should fail date and regexp correctly', function() {
-      typeCheckFail(
-        PropTypes.string,
-        new Date(),
-        'Invalid prop `testProp` of type `date` supplied to ' +
-        '`testComponent`, expected `string`.'
-      );
-      typeCheckFail(
-        PropTypes.string,
-        /please/,
-        'Invalid prop `testProp` of type `regexp` supplied to ' +
-        '`testComponent`, expected `string`.'
-      );
-    });
-
-    it("should not warn for valid values", function() {
-      typeCheckPass(PropTypes.array, []);
-      typeCheckPass(PropTypes.bool, false);
-      typeCheckPass(PropTypes.func, function() {});
-      typeCheckPass(PropTypes.number, 0);
-      typeCheckPass(PropTypes.string, '');
-      typeCheckPass(PropTypes.object, {});
-      typeCheckPass(PropTypes.object, new Date());
-      typeCheckPass(PropTypes.object, /please/);
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.string, null);
-      typeCheckPass(PropTypes.string, undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(PropTypes.string.isRequired, null, requiredMessage);
-      typeCheckFail(PropTypes.string.isRequired, undefined, requiredMessage);
-    });
-  });
-
-  describe('Any type', function() {
-    it('should should accept any value', function() {
-      typeCheckPass(PropTypes.any, 0);
-      typeCheckPass(PropTypes.any, 'str');
-      typeCheckPass(PropTypes.any, []);
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.any, null);
-      typeCheckPass(PropTypes.any, undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(PropTypes.any.isRequired, null, requiredMessage);
-      typeCheckFail(PropTypes.any.isRequired, undefined, requiredMessage);
-    });
-  });
-
-  describe('ArrayOf Type', function() {
-    it('should support the arrayOf propTypes', function() {
-      typeCheckPass(PropTypes.arrayOf(PropTypes.number), [1, 2, 3]);
-      typeCheckPass(PropTypes.arrayOf(PropTypes.string), ['a', 'b', 'c']);
-      typeCheckPass(PropTypes.arrayOf(PropTypes.oneOf(['a', 'b'])), ['a', 'b']);
-    });
-
-    it('should support arrayOf with complex types', function() {
-      typeCheckPass(
-        PropTypes.arrayOf(PropTypes.shape({a: PropTypes.number.isRequired})),
-        [{a: 1}, {a: 2}]
-      );
-
-      function Thing() {}
-      typeCheckPass(
-        PropTypes.arrayOf(PropTypes.instanceOf(Thing)),
-        [new Thing(), new Thing()]
-      );
-    });
-
-    it('should warn with invalid items in the array', function() {
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.number),
-        [1, 2, 'b'],
-        'Invalid prop `2` of type `string` supplied to `testComponent`, ' +
-        'expected `number`.'
-      );
-    });
-
-    it('should warn with invalid complex types', function() {
-      function Thing() {}
-      var name = Thing.name || '<<anonymous>>';
-
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.instanceOf(Thing)),
-        [new Thing(), 'xyz'],
-        'Invalid prop `1` supplied to `testComponent`, expected instance of `' +
-        name + '`.'
-      );
-    });
-
-    it('should warn when passed something other than an array', function() {
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.number),
-        {'0': 'maybe-array', length: 1},
-        'Invalid prop `testProp` of type `object` supplied to ' +
-        '`testComponent`, expected an array.'
-      );
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.number),
-        123,
-        'Invalid prop `testProp` of type `number` supplied to ' +
-        '`testComponent`, expected an array.'
-      );
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.number),
-        'string',
-        'Invalid prop `testProp` of type `string` supplied to ' +
-        '`testComponent`, expected an array.'
-      );
-    });
-
-    it('should not warn when passing an empty array', function() {
-      typeCheckPass(PropTypes.arrayOf(PropTypes.number), []);
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.arrayOf(PropTypes.number), null);
-      typeCheckPass(PropTypes.arrayOf(PropTypes.number), undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.number).isRequired,
-        null,
-        requiredMessage
-      );
-      typeCheckFail(
-        PropTypes.arrayOf(PropTypes.number).isRequired,
-        undefined,
-        requiredMessage
-      );
-    });
-  });
-
-  describe('Component Type', function() {
-    beforeEach(function() {
-      Component = React.createClass({
-        propTypes: {
-          label: PropTypes.component.isRequired
-        },
-
-        render: function() {
-          return <div>{this.props.label}</div>;
-        }
-      });
-      spyOn(console, 'warn');
-    });
-
-    it('should support components', () => {
-      typeCheckPass(PropTypes.component, <div />);
-    });
-
-    it('should not support multiple components or scalar values', () => {
-      var message = 'Invalid prop `testProp` supplied to `testComponent`, ' +
-        'expected a React component.';
-      typeCheckFail(PropTypes.component, [<div />, <div />], message);
-      typeCheckFail(PropTypes.component, 123, message);
-      typeCheckFail(PropTypes.component, 'foo', message);
-      typeCheckFail(PropTypes.component, false, message);
-    });
-
-    it('should be able to define a single child as label', () => {
-      var instance = <Component label={<div />} />;
-      instance = ReactTestUtils.renderIntoDocument(instance);
-
-      expect(console.warn.argsForCall.length).toBe(0);
-    });
-
-    it('should warn when passing no label and isRequired is set', () => {
-      var instance = <Component />;
-      instance = ReactTestUtils.renderIntoDocument(instance);
-
-      expect(console.warn.argsForCall.length).toBe(1);
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.component, null);
-      typeCheckPass(PropTypes.component, undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(PropTypes.component.isRequired, null, requiredMessage);
-      typeCheckFail(PropTypes.component.isRequired, undefined, requiredMessage);
-    });
-  });
-
-  describe('Instance Types', function() {
-    it("should warn for invalid instances", function() {
-      function Person() {}
-      var personName = Person.name || '<<anonymous>>';
-      var dateName = Date.name || '<<anonymous>>';
-      var regExpName = RegExp.name || '<<anonymous>>';
-
-      typeCheckFail(
-        PropTypes.instanceOf(Person),
-        false,
-        'Invalid prop `testProp` supplied to `testComponent`, expected ' +
-        'instance of `' + personName + '`.'
-      );
-      typeCheckFail(
-        PropTypes.instanceOf(Person),
-        {},
-        'Invalid prop `testProp` supplied to `testComponent`, expected ' +
-        'instance of `' + personName + '`.'
-      );
-      typeCheckFail(
-        PropTypes.instanceOf(Person),
-        '',
-        'Invalid prop `testProp` supplied to `testComponent`, expected ' +
-        'instance of `' + personName + '`.'
-      );
-      typeCheckFail(
-        PropTypes.instanceOf(Date),
-        {},
-        'Invalid prop `testProp` supplied to `testComponent`, expected ' +
-        'instance of `' + dateName + '`.'
-      );
-      typeCheckFail(
-        PropTypes.instanceOf(RegExp),
-        {},
-        'Invalid prop `testProp` supplied to `testComponent`, expected ' +
-        'instance of `' + regExpName + '`.'
-      );
-    });
-
-    it("should not warn for valid values", function() {
-      function Person() {}
-      function Engineer() {}
-      Engineer.prototype = new Person();
-
-      typeCheckPass(PropTypes.instanceOf(Person), new Person());
-      typeCheckPass(PropTypes.instanceOf(Person), new Engineer());
-
-      typeCheckPass(PropTypes.instanceOf(Date), new Date());
-      typeCheckPass(PropTypes.instanceOf(RegExp), /please/);
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.instanceOf(String), null);
-      typeCheckPass(PropTypes.instanceOf(String), undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(
-        PropTypes.instanceOf(String).isRequired, null, requiredMessage
-      );
-      typeCheckFail(
-        PropTypes.instanceOf(String).isRequired, undefined, requiredMessage
-      );
-    });
-  });
-
-  describe('React Component Types', function() {
-    beforeEach(function() {
-      MyComponent = React.createClass({
-        render: function() {
-          return <div />;
-        }
-      });
-    });
-
-    it('should warn for invalid values', function() {
-      var failMessage = 'Invalid prop `testProp` supplied to ' +
-        '`testComponent`, expected a renderable prop.';
-      typeCheckFail(PropTypes.renderable, true, failMessage);
-      typeCheckFail(PropTypes.renderable, function() {}, failMessage);
-      typeCheckFail(PropTypes.renderable, {key: function() {}}, failMessage);
-    });
-
-    it('should not warn for valid values', function() {
-      typeCheckPass(PropTypes.renderable, <div />);
-      typeCheckPass(PropTypes.renderable, false);
-      typeCheckPass(PropTypes.renderable, <MyComponent />);
-      typeCheckPass(PropTypes.renderable, 'Some string');
-      typeCheckPass(PropTypes.renderable, []);
-      typeCheckPass(PropTypes.renderable, {});
-      typeCheckPass(PropTypes.renderable, [
-        123,
-        'Some string',
-        <div />,
-        ['Another string', [456], <span />, <MyComponent />],
-        <MyComponent />
-      ]);
-
-      // Object of rendereable things
-      typeCheckPass(PropTypes.renderable, {
-        k0: 123,
-        k1: 'Some string',
-        k2: <div />,
-        k3: {
-          k30: <MyComponent />,
-          k31: {k310: <a />},
-          k32: 'Another string'
-        }
-      });
-    });
-
-    it('should not warn for null/undefined if not required', function() {
-      typeCheckPass(PropTypes.renderable, null);
-      typeCheckPass(PropTypes.renderable, undefined);
-    });
-
-    it('should warn for missing required values', function() {
-      typeCheckFail(
-        PropTypes.renderable.isRequired,
-        null,
-        'Required prop `testProp` was not specified in `testComponent`.'
-      );
-      typeCheckFail(
-        PropTypes.renderable.isRequired,
-        undefined,
-        'Required prop `testProp` was not specified in `testComponent`.'
-      );
-    });
-
-    it('should accept empty array & object for required props', function() {
-      typeCheckPass(PropTypes.renderable.isRequired, []);
-      typeCheckPass(PropTypes.renderable.isRequired, {});
-    });
-  });
-
-  describe('ObjectOf Type', function() {
-    it('should support the objectOf propTypes', function() {
-      typeCheckPass(PropTypes.objectOf(PropTypes.number), {a: 1, b: 2, c: 3});
-      typeCheckPass(
-        PropTypes.objectOf(PropTypes.string),
-        {a: 'a', b: 'b', c: 'c'}
-      );
-      typeCheckPass(
-        PropTypes.objectOf(PropTypes.oneOf(['a', 'b'])),
-        {a: 'a', b: 'b'}
-      );
-    });
-
-    it('should support objectOf with complex types', function() {
-      typeCheckPass(
-        PropTypes.objectOf(PropTypes.shape({a: PropTypes.number.isRequired})),
-        {a: {a: 1}, b: {a: 2}}
-      );
-
-      function Thing() {}
-      typeCheckPass(
-        PropTypes.objectOf(PropTypes.instanceOf(Thing)),
-        {a: new Thing(), b: new Thing()}
-      );
-    });
-
-    it('should warn with invalid items in the object', function() {
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.number),
-        {a: 1, b: 2, c: 'b'},
-        'Invalid prop `c` of type `string` supplied to `testComponent`, ' +
-        'expected `number`.'
-      );
-    });
-
-    it('should warn with invalid complex types', function() {
-      function Thing() {}
-      var name = Thing.name || '<<anonymous>>';
-
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.instanceOf(Thing)),
-        {a: new Thing(), b: 'xyz'},
-        'Invalid prop `b` supplied to `testComponent`, expected instance of `' +
-        name + '`.'
-      );
-    });
-
-    it('should warn when passed something other than an object', function() {
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.number),
-        [1, 2],
-        'Invalid prop `testProp` of type `array` supplied to ' +
-        '`testComponent`, expected an object.'
-      );
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.number),
-        123,
-        'Invalid prop `testProp` of type `number` supplied to ' +
-        '`testComponent`, expected an object.'
-      );
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.number),
-        'string',
-        'Invalid prop `testProp` of type `string` supplied to ' +
-        '`testComponent`, expected an object.'
-      );
-    });
-
-    it('should not warn when passing an empty object', function() {
-      typeCheckPass(PropTypes.objectOf(PropTypes.number), {});
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.objectOf(PropTypes.number), null);
-      typeCheckPass(PropTypes.objectOf(PropTypes.number), undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.number).isRequired,
-        null,
-        requiredMessage
-      );
-      typeCheckFail(
-        PropTypes.objectOf(PropTypes.number).isRequired,
-        undefined,
-        requiredMessage
-      );
-    });
-  });
-
-  describe('OneOf Types', function() {
-    it("should warn for invalid strings", function() {
-      typeCheckFail(
-        PropTypes.oneOf(['red', 'blue']),
-        true,
-        'Invalid prop `testProp` of value `true` supplied to ' +
-        '`testComponent`, expected one of ["red","blue"].'
-      );
-      typeCheckFail(
-        PropTypes.oneOf(['red', 'blue']),
-        [],
-        'Invalid prop `testProp` of value `` supplied to `testComponent`, ' +
-        'expected one of ["red","blue"].'
-      );
-      typeCheckFail(
-        PropTypes.oneOf(['red', 'blue']),
-        '',
-        'Invalid prop `testProp` of value `` supplied to `testComponent`, ' +
-        'expected one of ["red","blue"].'
-      );
-      typeCheckFail(
-        PropTypes.oneOf([0, 'false']),
-        false,
-        'Invalid prop `testProp` of value `false` supplied to ' +
-        '`testComponent`, expected one of [0,"false"].'
-      );
-    });
-
-    it("should not warn for valid values", function() {
-      typeCheckPass(PropTypes.oneOf(['red', 'blue']), 'red');
-      typeCheckPass(PropTypes.oneOf(['red', 'blue']), 'blue');
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(PropTypes.oneOf(['red', 'blue']), null);
-      typeCheckPass(PropTypes.oneOf(['red', 'blue']), undefined);
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(
-        PropTypes.oneOf(['red', 'blue']).isRequired,
-        null,
-        requiredMessage
-      );
-      typeCheckFail(
-        PropTypes.oneOf(['red', 'blue']).isRequired,
-        undefined,
-        requiredMessage
-      );
-    });
-  });
-
-  describe('Union Types', function() {
-    it('should warn if none of the types are valid', function() {
-      typeCheckFail(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        [],
-        'Invalid prop `testProp` supplied to `testComponent`.'
-      );
-
-      var checker = PropTypes.oneOfType([
-        PropTypes.shape({a: PropTypes.number.isRequired}),
-        PropTypes.shape({b: PropTypes.number.isRequired})
-      ]);
-      typeCheckFail(
-        checker,
-        {c: 1},
-        'Invalid prop `testProp` supplied to `testComponent`.'
-      );
-    });
-
-    it('should not warn if one of the types are valid', function() {
-      var checker = PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-      ]);
-      typeCheckPass(checker, null);
-      typeCheckPass(checker, 'foo');
-      typeCheckPass(checker, 123);
-
-      checker = PropTypes.oneOfType([
-        PropTypes.shape({a: PropTypes.number.isRequired}),
-        PropTypes.shape({b: PropTypes.number.isRequired})
-      ]);
-      typeCheckPass(checker, {a: 1});
-      typeCheckPass(checker, {b: 1});
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number]), null
-      );
-      typeCheckPass(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number]), undefined
-      );
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        null,
-        requiredMessage
-      );
-      typeCheckFail(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        undefined,
-        requiredMessage
-      );
-    });
-  });
-
-  describe('Shape Types', function() {
-    it("should warn for non objects", function() {
-      typeCheckFail(
-        PropTypes.shape({}),
-        'some string',
-        'Invalid prop `testProp` of type `string` supplied to ' +
-        '`testComponent`, expected `object`.'
-      );
-      typeCheckFail(
-        PropTypes.shape({}),
-        ['array'],
-        'Invalid prop `testProp` of type `array` supplied to ' +
-        '`testComponent`, expected `object`.'
-      );
-    });
-
-    it("should not warn for empty values", function() {
-      typeCheckPass(PropTypes.shape({}), undefined);
-      typeCheckPass(PropTypes.shape({}), null);
-      typeCheckPass(PropTypes.shape({}), {});
-    });
-
-    it("should not warn for an empty object", function() {
-      typeCheckPass(PropTypes.shape({}).isRequired, {});
-    });
-
-    it("should not warn for non specified types", function() {
-      typeCheckPass(PropTypes.shape({}), {key: 1});
-    });
-
-    it("should not warn for valid types", function() {
-      typeCheckPass(PropTypes.shape({key: PropTypes.number}), {key: 1});
-    });
-
-    it("should warn for required valid types", function() {
-      typeCheckFail(
-        PropTypes.shape({key: PropTypes.number.isRequired}),
-        {},
-        'Required prop `key` was not specified in `testComponent`.'
-      );
-    });
-
-    it("should warn for the first required type", function() {
-      typeCheckFail(
-        PropTypes.shape({
-          key: PropTypes.number.isRequired,
-          secondKey: PropTypes.number.isRequired
-        }),
-        {},
-        'Required prop `key` was not specified in `testComponent`.'
-      );
-    });
-
-    it("should warn for invalid key types", function() {
-      typeCheckFail(PropTypes.shape({key: PropTypes.number}),
-        {key: 'abc'},
-        'Invalid prop `key` of type `string` supplied to `testComponent`, ' +
-        'expected `number`.'
-      );
-    });
-
-    it("should be implicitly optional and not warn without values", function() {
-      typeCheckPass(
-        PropTypes.shape(PropTypes.shape({key: PropTypes.number})), null
-      );
-      typeCheckPass(
-        PropTypes.shape(PropTypes.shape({key: PropTypes.number})), undefined
-      );
-    });
-
-    it("should warn for missing required values", function() {
-      typeCheckFail(
-        PropTypes.shape({key: PropTypes.number}).isRequired,
-        null,
-        requiredMessage
-      );
-      typeCheckFail(
-        PropTypes.shape({key: PropTypes.number}).isRequired,
-        undefined,
-        requiredMessage
-      );
-    });
-  });
-
-  describe('Custom validator', function() {
-    beforeEach(function() {
-      require('mock-modules').dumpCache();
-      spyOn(console, 'warn');
-    });
-
-    it('should have been called with the right params', function() {
-      var spy = jasmine.createSpy();
-      var Component = React.createClass({
-        propTypes: {num: spy},
-
-        render: function() {
-          return <div />;
-        }
-      });
-
-      var instance = <Component num={5} />;
-      instance = ReactTestUtils.renderIntoDocument(instance);
-
-      expect(spy.argsForCall.length).toBe(2); // temp double validation
-      expect(spy.argsForCall[0][1]).toBe('num');
-      expect(spy.argsForCall[0][2]).toBe('Component');
-    });
-
-    it('should have been called even if the prop is not present', function() {
-      var spy = jasmine.createSpy();
-      var Component = React.createClass({
-        propTypes: {num: spy},
-
-        render: function() {
-          return <div />;
-        }
-      });
-
-      var instance = <Component bla={5} />;
-      instance = ReactTestUtils.renderIntoDocument(instance);
-
-      expect(spy.argsForCall.length).toBe(2); // temp double validation
-    });
-
-    it('should have received the validator\'s return value', function() {
-      var spy = jasmine.createSpy().andCallFake(
-        function(props, propName, componentName) {
-          if (props[propName] !== 5) {
-            return new Error('num must be 5!');
-          }
-        }
-      );
-      var Component = React.createClass({
-        propTypes: {num: spy},
-
-        render: function() {
-          return <div />;
-        }
-      });
-
-      var instance = <Component num={6} />;
-      instance = ReactTestUtils.renderIntoDocument(instance);
-      expect(console.warn.argsForCall.length).toBe(1);
-      expect(console.warn.argsForCall[0][0]).toBe('Warning: num must be 5!');
-    });
-
-    it('should not warn if the validator returned anything else than an error',
-      function() {
-        var spy = jasmine.createSpy().andCallFake(
-          function(props, propName, componentName) {
-            return 'This message will never reach anyone';
-          }
-        );
-        var Component = React.createClass({
-          propTypes: {num: spy},
-
-          render: function() {
-            return <div />;
-          }
-        });
-
-        var instance = <Component num={5} />;
-        instance = ReactTestUtils.renderIntoDocument(instance);
-        expect(console.warn.argsForCall.length).toBe(0);
-      }
-    );
-  });
-});
diff --git a/src/core/__tests__/ReactStateSetters-test.js b/src/core/__tests__/ReactStateSetters-test.js
deleted file mode 100644
index 9d5661175a8..00000000000
--- a/src/core/__tests__/ReactStateSetters-test.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React = require('React');
-var ReactStateSetters = require('ReactStateSetters');
-var ReactTestUtils = require('ReactTestUtils');
-
-var TestComponent;
-var TestComponentWithMixin;
-
-describe('ReactStateSetters', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-
-    TestComponent = React.createClass({
-      getInitialState: function() {
-        return {foo: 'foo'};
-      },
-
-      render: function() {
-        return <div />;
-      }
-    });
-
-    TestComponentWithMixin = React.createClass({
-      mixins: [ReactStateSetters.Mixin],
-
-      getInitialState: function() {
-        return {foo: 'foo'};
-      },
-
-      render: function() {
-        return <div />;
-      }
-    });
-  });
-
-  it('createStateSetter should update state', function() {
-    var instance = <TestComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    var setter = ReactStateSetters.createStateSetter(
-      instance,
-      function(a, b, c) {
-        return {
-          foo: a + b + c,
-          bar: a * b * c
-        };
-      }
-    );
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    setter(1, 2, 3);
-    expect(instance.state).toEqual({foo: 6, bar: 6});
-
-    setter(10, 11, 12);
-    expect(instance.state).toEqual({foo: 33, bar: 1320});
-  });
-
-  it('createStateKeySetter should update state', function() {
-    var instance = <TestComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    var setter = ReactStateSetters.createStateKeySetter(instance, 'foo');
-
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    setter('bar');
-    expect(instance.state).toEqual({foo: 'bar'});
-
-    setter('baz');
-    expect(instance.state).toEqual({foo: 'baz'});
-  });
-
-  it('createStateKeySetter is memoized', function() {
-    var instance = <TestComponent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    var foo1 = ReactStateSetters.createStateKeySetter(instance, 'foo');
-    var bar1 = ReactStateSetters.createStateKeySetter(instance, 'bar');
-
-    var foo2 = ReactStateSetters.createStateKeySetter(instance, 'foo');
-    var bar2 = ReactStateSetters.createStateKeySetter(instance, 'bar');
-
-    expect(foo2).toBe(foo1);
-    expect(bar2).toBe(bar1);
-  });
-
-  it('createStateSetter should update state from mixin', function() {
-    var instance = <TestComponentWithMixin />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    var setter = instance.createStateSetter(
-      function(a, b, c) {
-        return {
-          foo: a + b + c,
-          bar: a * b * c
-        };
-      }
-    );
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    setter(1, 2, 3);
-    expect(instance.state).toEqual({foo: 6, bar: 6});
-
-    setter(10, 11, 12);
-    expect(instance.state).toEqual({foo: 33, bar: 1320});
-  });
-
-  it('createStateKeySetter should update state with mixin', function() {
-    var instance = <TestComponentWithMixin />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    var setter = instance.createStateKeySetter('foo');
-
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    setter('bar');
-    expect(instance.state).toEqual({foo: 'bar'});
-
-    setter('baz');
-    expect(instance.state).toEqual({foo: 'baz'});
-  });
-
-  it('createStateKeySetter is memoized with mixin', function() {
-    var instance = <TestComponentWithMixin />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    expect(instance.state).toEqual({foo: 'foo'});
-
-    var foo1 = instance.createStateKeySetter('foo');
-    var bar1 = instance.createStateKeySetter('bar');
-
-    var foo2 = instance.createStateKeySetter('foo');
-    var bar2 = instance.createStateKeySetter('bar');
-
-    expect(foo2).toBe(foo1);
-    expect(bar2).toBe(bar1);
-  });
-});
diff --git a/src/core/__tests__/ReactTextComponent-test.js b/src/core/__tests__/ReactTextComponent-test.js
deleted file mode 100644
index 0eee800d596..00000000000
--- a/src/core/__tests__/ReactTextComponent-test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-
-describe('ReactTextComponent', function() {
-  beforeEach(function() {
-    React = require('React');
-  });
-
-  it('should escape the rootID', function(){
-    var ThisThingShouldBeEscaped = '">>> LULZ <<<"';
-    var ThisThingWasBeEscaped = '&quot;&gt;&gt;&gt; LULZ &lt;&lt;&lt;&quot;';
-    var thing = React.DOM.div(null, React.DOM.span({key:ThisThingShouldBeEscaped}, ["LULZ"]));
-    var html = React.renderComponentToString(thing);
-    expect(html).not.toContain(ThisThingShouldBeEscaped);
-    expect(html).toContain(ThisThingWasBeEscaped);
-  })
-});
diff --git a/src/core/__tests__/ReactUpdates-test.js b/src/core/__tests__/ReactUpdates-test.js
deleted file mode 100644
index f4093daa586..00000000000
--- a/src/core/__tests__/ReactUpdates-test.js
+++ /dev/null
@@ -1,826 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React;
-var ReactTestUtils;
-var ReactUpdates;
-
-describe('ReactUpdates', function() {
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    ReactUpdates = require('ReactUpdates');
-  });
-
-  it('should batch state when updating state twice', function() {
-    var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
-        updateCount++;
-      },
-      render: function() {
-        return <div>{this.state.x}</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component />);
-    expect(instance.state.x).toBe(0);
-
-    ReactUpdates.batchedUpdates(function() {
-      instance.setState({x: 1});
-      instance.setState({x: 2});
-      expect(instance.state.x).toBe(0);
-      expect(updateCount).toBe(0);
-    });
-
-    expect(instance.state.x).toBe(2);
-    expect(updateCount).toBe(1);
-  });
-
-  it('should batch state when updating two different state keys', function() {
-    var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0, y: 0};
-      },
-      componentDidUpdate: function() {
-        updateCount++;
-      },
-      render: function() {
-        return <div>({this.state.x}, {this.state.y})</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component />);
-    expect(instance.state.x).toBe(0);
-    expect(instance.state.y).toBe(0);
-
-    ReactUpdates.batchedUpdates(function() {
-      instance.setState({x: 1});
-      instance.setState({y: 2});
-      expect(instance.state.x).toBe(0);
-      expect(instance.state.y).toBe(0);
-      expect(updateCount).toBe(0);
-    });
-
-    expect(instance.state.x).toBe(1);
-    expect(instance.state.y).toBe(2);
-    expect(updateCount).toBe(1);
-  });
-
-  it('should batch state and props together', function() {
-    var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {y: 0};
-      },
-      componentDidUpdate: function() {
-        updateCount++;
-      },
-      render: function() {
-        return <div>({this.props.x}, {this.state.y})</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component x={0} />);
-    expect(instance.props.x).toBe(0);
-    expect(instance.state.y).toBe(0);
-
-    ReactUpdates.batchedUpdates(function() {
-      instance.setProps({x: 1});
-      instance.setState({y: 2});
-      expect(instance.props.x).toBe(0);
-      expect(instance.state.y).toBe(0);
-      expect(updateCount).toBe(0);
-    });
-
-    expect(instance.props.x).toBe(1);
-    expect(instance.state.y).toBe(2);
-    expect(updateCount).toBe(1);
-  });
-
-  it('should batch parent/child state updates together', function() {
-    var parentUpdateCount = 0;
-    var Parent = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
-        parentUpdateCount++;
-      },
-      render: function() {
-        return <div><Child ref="child" x={this.state.x} /></div>;
-      }
-    });
-    var childUpdateCount = 0;
-    var Child = React.createClass({
-      getInitialState: function() {
-        return {y: 0};
-      },
-      componentDidUpdate: function() {
-        childUpdateCount++;
-      },
-      render: function() {
-        return <div>{this.props.x + this.state.y}</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    var child = instance.refs.child;
-    expect(instance.state.x).toBe(0);
-    expect(child.state.y).toBe(0);
-
-    ReactUpdates.batchedUpdates(function() {
-      instance.setState({x: 1});
-      child.setState({y: 2});
-      expect(instance.state.x).toBe(0);
-      expect(child.state.y).toBe(0);
-      expect(parentUpdateCount).toBe(0);
-      expect(childUpdateCount).toBe(0);
-    });
-
-    expect(instance.state.x).toBe(1);
-    expect(child.state.y).toBe(2);
-    expect(parentUpdateCount).toBe(1);
-    expect(childUpdateCount).toBe(1);
-  });
-
-  it('should batch child/parent state updates together', function() {
-    var parentUpdateCount = 0;
-    var Parent = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
-        parentUpdateCount++;
-      },
-      render: function() {
-        return <div><Child ref="child" x={this.state.x} /></div>;
-      }
-    });
-    var childUpdateCount = 0;
-    var Child = React.createClass({
-      getInitialState: function() {
-        return {y: 0};
-      },
-      componentDidUpdate: function() {
-        childUpdateCount++;
-      },
-      render: function() {
-        return <div>{this.props.x + this.state.y}</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    var child = instance.refs.child;
-    expect(instance.state.x).toBe(0);
-    expect(child.state.y).toBe(0);
-
-    ReactUpdates.batchedUpdates(function() {
-      child.setState({y: 2});
-      instance.setState({x: 1});
-      expect(instance.state.x).toBe(0);
-      expect(child.state.y).toBe(0);
-      expect(parentUpdateCount).toBe(0);
-      expect(childUpdateCount).toBe(0);
-    });
-
-    expect(instance.state.x).toBe(1);
-    expect(child.state.y).toBe(2);
-    expect(parentUpdateCount).toBe(1);
-
-    // Batching reduces the number of updates here to 1.
-    expect(childUpdateCount).toBe(1);
-  });
-
-  it('should support chained state updates', function() {
-    var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
-        updateCount++;
-      },
-      render: function() {
-        return <div>{this.state.x}</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component />);
-    expect(instance.state.x).toBe(0);
-
-    var innerCallbackRun = false;
-    ReactUpdates.batchedUpdates(function() {
-      instance.setState({x: 1}, function() {
-        instance.setState({x: 2}, function() {
-          expect(this).toBe(instance);
-          innerCallbackRun = true;
-          expect(instance.state.x).toBe(2);
-          expect(updateCount).toBe(2);
-        });
-        expect(instance.state.x).toBe(1);
-        expect(updateCount).toBe(1);
-      });
-      expect(instance.state.x).toBe(0);
-      expect(updateCount).toBe(0);
-    });
-
-    expect(innerCallbackRun).toBeTruthy();
-    expect(instance.state.x).toBe(2);
-    expect(updateCount).toBe(2);
-  });
-
-  it('should batch forceUpdate together', function() {
-    var shouldUpdateCount = 0;
-    var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      shouldComponentUpdate: function() {
-        shouldUpdateCount++;
-      },
-      componentDidUpdate: function() {
-        updateCount++;
-      },
-      render: function() {
-        return <div>{this.state.x}</div>;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component />);
-    expect(instance.state.x).toBe(0);
-
-    var callbacksRun = 0;
-    ReactUpdates.batchedUpdates(function() {
-      instance.setState({x: 1}, function() {
-        callbacksRun++;
-      });
-      instance.forceUpdate(function() {
-        callbacksRun++;
-      });
-      expect(instance.state.x).toBe(0);
-      expect(updateCount).toBe(0);
-    });
-
-    expect(callbacksRun).toBe(2);
-    // shouldComponentUpdate shouldn't be called since we're forcing
-    expect(shouldUpdateCount).toBe(0);
-    expect(instance.state.x).toBe(1);
-    expect(updateCount).toBe(1);
-  });
-
-  it('should update children even if parent blocks updates', function() {
-    var parentRenderCount = 0;
-    var childRenderCount = 0;
-
-    var Parent = React.createClass({
-      shouldComponentUpdate: function() {
-        return false;
-      },
-
-      render: function() {
-        parentRenderCount++;
-        return <Child ref="child" />;
-      }
-    });
-
-    var Child = React.createClass({
-      render: function() {
-        childRenderCount++;
-        return <div />;
-      }
-    });
-
-    expect(parentRenderCount).toBe(0);
-    expect(childRenderCount).toBe(0);
-
-    var instance = <Parent />;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-
-    expect(parentRenderCount).toBe(1);
-    expect(childRenderCount).toBe(1);
-
-    ReactUpdates.batchedUpdates(function() {
-      instance.setState({x: 1});
-    });
-
-    expect(parentRenderCount).toBe(1);
-    expect(childRenderCount).toBe(1);
-
-    ReactUpdates.batchedUpdates(function() {
-      instance.refs.child.setState({x: 1});
-    });
-
-    expect(parentRenderCount).toBe(1);
-    expect(childRenderCount).toBe(2);
-  });
-
-  it('should not reconcile children passed via props', function() {
-    var numMiddleRenders = 0;
-    var numBottomRenders = 0;
-
-    var Top = React.createClass({
-      render: function() {
-        return <Middle><Bottom /></Middle>;
-      }
-    });
-
-    var Middle = React.createClass({
-      componentDidMount: function() {
-        this.forceUpdate();
-      },
-
-      render: function() {
-        numMiddleRenders++;
-        return <div>{this.props.children}</div>;
-      }
-    });
-
-    var Bottom = React.createClass({
-      render: function() {
-        numBottomRenders++;
-        return <span />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Top />);
-    expect(numMiddleRenders).toBe(2);
-    expect(numBottomRenders).toBe(1);
-  });
-
-  it('should flow updates correctly', function() {
-    var willUpdates = [];
-    var didUpdates = [];
-
-    var UpdateLoggingMixin = {
-      componentWillUpdate: function() {
-        willUpdates.push(this.constructor.displayName);
-      },
-      componentDidUpdate: function() {
-        didUpdates.push(this.constructor.displayName);
-      }
-    };
-
-    var Box = React.createClass({
-      mixins: [UpdateLoggingMixin],
-
-      render: function() {
-        return <div ref="boxDiv">{this.props.children}</div>;
-      }
-    });
-
-    var Child = React.createClass({
-      mixins: [UpdateLoggingMixin],
-
-      render: function() {
-        return <span ref="span">child</span>;
-      }
-    });
-
-    var Switcher = React.createClass({
-      mixins: [UpdateLoggingMixin],
-
-      getInitialState: function() {
-        return {tabKey: 'hello'};
-      },
-
-      render: function() {
-        var child = this.props.children;
-
-        return (
-          <Box ref="box">
-            <div
-              ref="switcherDiv"
-              style={{
-                display: this.state.tabKey === child.key ? '' : 'none'
-            }}>
-              {child}
-            </div>
-          </Box>
-        );
-      }
-    });
-
-    var App = React.createClass({
-      mixins: [UpdateLoggingMixin],
-
-      render: function() {
-        return (
-          <Switcher ref="switcher">
-            <Child key="hello" ref="child" />
-          </Switcher>
-        );
-      }
-    });
-
-    var root = <App />;
-    root = ReactTestUtils.renderIntoDocument(root);
-
-    function expectUpdates(desiredWillUpdates, desiredDidUpdates) {
-      expect(willUpdates).toEqual(desiredWillUpdates);
-      expect(didUpdates).toEqual(desiredDidUpdates);
-      willUpdates.length = 0;
-      didUpdates.length = 0;
-    }
-
-    function triggerUpdate(c) {
-      c.setState({x: 1});
-    }
-
-    function testUpdates(components, desiredWillUpdates, desiredDidUpdates) {
-      var i;
-
-      ReactUpdates.batchedUpdates(function() {
-        for (i = 0; i < components.length; i++) {
-          triggerUpdate(components[i]);
-        }
-      });
-
-      expectUpdates(desiredWillUpdates, desiredDidUpdates);
-
-      // Try them in reverse order
-
-      ReactUpdates.batchedUpdates(function() {
-        for (i = components.length - 1; i >= 0; i--) {
-          triggerUpdate(components[i]);
-        }
-      });
-
-      expectUpdates(desiredWillUpdates, desiredDidUpdates);
-    }
-
-    testUpdates(
-      [root.refs.switcher.refs.box, root.refs.switcher],
-      // Owner-child relationships have inverse will and did
-      ['Switcher', 'Box'],
-      ['Box', 'Switcher']
-    );
-
-    testUpdates(
-      [root.refs.child, root.refs.switcher.refs.box],
-      // Not owner-child so reconcile independently
-      ['Box', 'Child'],
-      ['Box', 'Child']
-    );
-
-    testUpdates(
-      [root.refs.child, root.refs.switcher],
-      // Switcher owns Box and Child, Box does not own Child
-      ['Switcher', 'Box', 'Child'],
-      ['Box', 'Switcher', 'Child']
-    );
-  });
-
-  it('should share reconcile transaction across different roots', function() {
-    var ReconcileTransaction = ReactUpdates.ReactReconcileTransaction;
-    spyOn(ReconcileTransaction, 'getPooled').andCallThrough();
-
-    var Component = React.createClass({
-      render: function() {
-        return <div>{this.props.text}</div>;
-      }
-    });
-
-    var containerA = document.createElement('div');
-    var containerB = document.createElement('div');
-
-    // Initial renders aren't batched together yet...
-    ReactUpdates.batchedUpdates(function() {
-      React.renderComponent(<Component text="A1" />, containerA);
-      React.renderComponent(<Component text="B1" />, containerB);
-    });
-    expect(ReconcileTransaction.getPooled.calls.length).toBe(2);
-
-    // ...but updates are! Here only one more transaction is used, which means
-    // we only have to initialize and close the wrappers once.
-    ReactUpdates.batchedUpdates(function() {
-      React.renderComponent(<Component text="A2" />, containerA);
-      React.renderComponent(<Component text="B2" />, containerB);
-    });
-    expect(ReconcileTransaction.getPooled.calls.length).toBe(3);
-  });
-
-  it('should queue mount-ready handlers across different roots', function() {
-    // We'll define two components A and B, then update both of them. When A's
-    // componentDidUpdate handlers is called, B's DOM should already have been
-    // updated.
-
-    var a;
-    var b;
-
-    var aUpdated = false;
-
-    var A = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
-        expect(b.getDOMNode().textContent).toBe("B1");
-        aUpdated = true;
-      },
-      render: function() {
-        return <div>A{this.state.x}</div>;
-      }
-    });
-
-    var B = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      render: function() {
-        return <div>B{this.state.x}</div>;
-      }
-    });
-
-    a = ReactTestUtils.renderIntoDocument(<A />);
-    b = ReactTestUtils.renderIntoDocument(<B />);
-
-    ReactUpdates.batchedUpdates(function() {
-      a.setState({x: 1});
-      b.setState({x: 1});
-    });
-
-    expect(aUpdated).toBe(true);
-  });
-
-  it('should flush updates in the correct order', function() {
-    var updates = [];
-    var Outer = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      render: function() {
-        updates.push('Outer-render-' + this.state.x);
-        return <div><Inner x={this.state.x} ref="inner" /></div>;
-      },
-      componentDidUpdate: function() {
-        var x = this.state.x;
-        updates.push('Outer-didUpdate-' + x);
-        updates.push('Inner-setState-' + x);
-        this.refs.inner.setState({x: x}, function() {
-          updates.push('Inner-callback-' + x);
-        });
-      }
-    });
-    var Inner = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      render: function() {
-        updates.push('Inner-render-' + this.props.x + '-' + this.state.x);
-        return <div />;
-      },
-      componentDidUpdate: function() {
-        updates.push('Inner-didUpdate-' + this.props.x + '-' + this.state.x);
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Outer />);
-
-    updates.push('Outer-setState-1');
-    instance.setState({x: 1}, function() {
-      updates.push('Outer-callback-1');
-      updates.push('Outer-setState-2');
-      instance.setState({x: 2}, function() {
-        updates.push('Outer-callback-2');
-      });
-    });
-
-    expect(updates).toEqual([
-      'Outer-render-0',
-        'Inner-render-0-0',
-
-      'Outer-setState-1',
-        'Outer-render-1',
-          'Inner-render-1-0',
-          'Inner-didUpdate-1-0',
-        'Outer-didUpdate-1',
-          'Inner-setState-1',
-            'Inner-render-1-1',
-            'Inner-didUpdate-1-1',
-          'Inner-callback-1',
-      'Outer-callback-1',
-
-      'Outer-setState-2',
-        'Outer-render-2',
-          'Inner-render-2-1',
-          'Inner-didUpdate-2-1',
-        'Outer-didUpdate-2',
-          'Inner-setState-2',
-            'Inner-render-2-2',
-            'Inner-didUpdate-2-2',
-          'Inner-callback-2',
-      'Outer-callback-2'
-    ]);
-  });
-
-  it('should queue nested updates', function() {
-    // See https://github.com/facebook/react/issues/1147
-
-    var X = React.createClass({
-      getInitialState: function() {
-        return {s: 0};
-      },
-      render: function() {
-        if (this.state.s === 0) {
-          return <div>
-            <span>0</span>
-          </div>;
-        } else {
-          return <div>1</div>;
-        }
-      },
-      go: function() {
-        this.setState({s: 1});
-        this.setState({s: 0});
-        this.setState({s: 1});
-      }
-    });
-
-    var Y = React.createClass({
-      render: function() {
-        return <div>
-          <Z />
-        </div>;
-      }
-    });
-
-    var Z = React.createClass({
-      render: function() { return <div />; },
-      componentWillUpdate: function() {
-        x.go();
-      }
-    });
-
-    var x;
-    var y;
-
-    x = ReactTestUtils.renderIntoDocument(<X />);
-    y = ReactTestUtils.renderIntoDocument(<Y />);
-    expect(x.getDOMNode().textContent).toBe('0');
-
-    y.forceUpdate();
-    expect(x.getDOMNode().textContent).toBe('1');
-  });
-
-  it('should queue updates from during mount', function() {
-    // See https://github.com/facebook/react/issues/1353
-    var a;
-
-    var A = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentWillMount: function() {
-        a = this;
-      },
-      render: function() {
-        return <div>A{this.state.x}</div>;
-      }
-    });
-
-    var B = React.createClass({
-      componentWillMount: function() {
-        a.setState({x: 1});
-      },
-      render: function() {
-        return <div />;
-      }
-    });
-
-    ReactUpdates.batchedUpdates(function() {
-      ReactTestUtils.renderIntoDocument(
-        <div>
-          <A />
-          <B />
-        </div>
-      );
-    });
-
-    expect(a.state.x).toBe(1);
-    expect(a.getDOMNode().textContent).toBe('A1');
-  });
-
-  it('calls componentWillReceiveProps setState callback properly', function() {
-    var callbackCount = 0;
-    var A = React.createClass({
-      getInitialState: function() {
-        return {x: this.props.x};
-      },
-      componentWillReceiveProps: function(nextProps) {
-        var newX = nextProps.x;
-        this.setState({x: newX}, function() {
-          // State should have updated by the time this callback gets called
-          expect(this.state.x).toBe(newX);
-          callbackCount++;
-        });
-      },
-      render: function() {
-        return <div>{this.state.x}</div>;
-      }
-    });
-
-    var container = document.createElement('div');
-    React.renderComponent(<A x={1} />, container);
-    React.renderComponent(<A x={2} />, container);
-    expect(callbackCount).toBe(1);
-  });
-
-  it('calls setImmediate callbacks properly', function() {
-    var callbackCount = 0;
-    var A = React.createClass({
-      render: function() {
-        return <div />;
-      },
-      componentDidUpdate: function() {
-        var component = this;
-        ReactUpdates.setImmediate(function() {
-          expect(this).toBe(component);
-          callbackCount++;
-          ReactUpdates.setImmediate(function() {
-            callbackCount++;
-          });
-          expect(callbackCount).toBe(1);
-        }, this);
-        expect(callbackCount).toBe(0);
-      }
-    });
-
-    var container = document.createElement('div');
-    var component = React.renderComponent(<A />, container);
-    component.forceUpdate();
-    expect(callbackCount).toBe(2);
-  });
-
-  it('calls setImmediate callbacks with queued updates', function() {
-    var log = [];
-    var A = React.createClass({
-      getInitialState: () => ({updates: 0}),
-      render: function() {
-        log.push('render-' + this.state.updates);
-        return <div />;
-      },
-      componentDidUpdate: function() {
-        if (this.state.updates === 1) {
-          ReactUpdates.setImmediate(function() {
-            this.setState({updates: 2}, function() {
-              ReactUpdates.setImmediate(function() {
-                log.push('setImmediate-1.2');
-              });
-              log.push('setState-cb');
-            });
-            log.push('setImmediate-1.1');
-          }, this);
-        } else if (this.state.updates === 2) {
-          ReactUpdates.setImmediate(function() {
-            log.push('setImmediate-2');
-          });
-        }
-        log.push('didUpdate-' + this.state.updates);
-      }
-    });
-
-    var container = document.createElement('div');
-    var component = React.renderComponent(<A />, container);
-    component.setState({updates: 1});
-    expect(log).toEqual([
-      'render-0',
-      // We do the first update...
-      'render-1',
-      'didUpdate-1',
-      // ...which calls a setImmediate and enqueues a second update...
-      'setImmediate-1.1',
-      // ...which runs and enqueues the setImmediate-2 log in its didUpdate...
-      'render-2',
-      'didUpdate-2',
-      // ...and runs the setState callback, which enqueues the log for
-      // setImmediate-1.2.
-      'setState-cb',
-      'setImmediate-2',
-      'setImmediate-1.2'
-    ]);
-  });
-});
diff --git a/src/core/__tests__/refs-destruction-test.js b/src/core/__tests__/refs-destruction-test.js
deleted file mode 100644
index 1f63d09ae68..00000000000
--- a/src/core/__tests__/refs-destruction-test.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React = require('React');
-var ReactTestUtils = require('ReactTestUtils');
-var reactComponentExpect= require('reactComponentExpect');
-
-var TestComponent = React.createClass({
-  render: function() {
-    return (
-      <div>
-        <div ref="theInnerDiv">
-          Lets try to destroy this.
-        </div>
-      </div>
-    );
-  }
-});
-
-describe('refs-destruction', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-  });
-
-  it("should remove refs when destroying the parent", function() {
-    var testInstance = ReactTestUtils.renderIntoDocument(<TestComponent />);
-    reactComponentExpect(testInstance.refs.theInnerDiv)
-        .toBeDOMComponentWithTag('div');
-    expect(Object.keys(testInstance.refs || {}).length).toEqual(1);
-    testInstance.unmountComponent();
-    expect(Object.keys(testInstance.refs || {}).length).toEqual(0);
-  });
-
-  it("should remove refs when destroying the child", function() {
-    var testInstance = ReactTestUtils.renderIntoDocument(<TestComponent />);
-    reactComponentExpect(testInstance.refs.theInnerDiv)
-        .toBeDOMComponentWithTag('div');
-    expect(Object.keys(testInstance.refs || {}).length).toEqual(1);
-    testInstance.refs.theInnerDiv.unmountComponent();
-    expect(Object.keys(testInstance.refs || {}).length).toEqual(0);
-  });
-});
diff --git a/src/core/__tests__/refs-test.js b/src/core/__tests__/refs-test.js
deleted file mode 100644
index ab52347a975..00000000000
--- a/src/core/__tests__/refs-test.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- * @emails react-core
- */
-
-"use strict";
-
-var React = require('React');
-var ReactTestUtils = require('ReactTestUtils');
-
-var reactComponentExpect= require('reactComponentExpect');
-
-
-/**
- * Counts clicks and has a renders an item for each click. Each item rendered
- * has a ref of the form "clickLogN".
- */
-var ClickCounter = React.createClass({
-  getInitialState: function() {
-    return {count: this.props.initialCount};
-  },
-  triggerReset: function() {
-    this.setState({count: this.props.initialCount});
-  },
-  handleClick: function() {
-    this.setState({count: this.state.count + 1});
-  },
-  render: function() {
-    var children = [];
-    var i;
-    for (i=0; i < this.state.count; i++) {
-      children.push(
-        <div
-          className="clickLogDiv"
-          key={"clickLog" + i}
-          ref={"clickLog" + i}
-        />
-      );
-    }
-    return (
-      <span className="clickIncrementer" onClick={this.handleClick}>
-        {children}
-      </span>
-    );
-  }
-});
-
-/**
- * Only purpose is to test that refs are tracked even when applied to a
- * component that is injected down several layers. Ref systems are difficult to
- * build in such a way that ownership is maintained in an airtight manner.
- */
-var GeneralContainerComponent = React.createClass({
-  render: function() {
-    return <div>{this.props.children}</div>;
-  }
-});
-
-/**
- * Notice how refs ownership is maintained even when injecting a component
- * into a different parent.
- */
-var TestRefsComponent = React.createClass({
-  doReset: function() {
-    this.refs.myCounter.triggerReset();
-  },
-  render: function() {
-    return (
-      <div>
-        <div ref="resetDiv" onClick={this.doReset}>
-          Reset Me By Clicking This.
-        </div>
-        <GeneralContainerComponent ref="myContainer">
-          <ClickCounter ref="myCounter" initialCount={1}/>
-        </GeneralContainerComponent>
-      </div>
-    );
-  }
-});
-
-/**
- * Render a TestRefsComponent and ensure that the main refs are wired up.
- */
-var renderTestRefsComponent = function() {
-  var testRefsComponent =
-      ReactTestUtils.renderIntoDocument(<TestRefsComponent />);
-
-  reactComponentExpect(testRefsComponent)
-      .toBeCompositeComponentWithType(TestRefsComponent);
-
-  var generalContainer = testRefsComponent.refs.myContainer;
-  var counter = testRefsComponent.refs.myCounter;
-
-  reactComponentExpect(generalContainer)
-      .toBeCompositeComponentWithType(GeneralContainerComponent);
-  reactComponentExpect(counter)
-      .toBeCompositeComponentWithType(ClickCounter);
-
-  return testRefsComponent;
-};
-
-
-var expectClickLogsLengthToBe = function(instance, length) {
-  var clickLogs =
-    ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'clickLogDiv');
-  expect(clickLogs.length).toBe(length);
-  expect(Object.keys(instance.refs.myCounter.refs).length).toBe(length);
-};
-
-describe('reactiverefs', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-  });
-
-  /**
-   * Ensure that for every click log there is a corresponding ref (from the
-   * perspective of the injected ClickCounter component.
-   */
-  it("Should increase refs with an increase in divs", function() {
-    var testRefsComponent = renderTestRefsComponent();
-    var clickIncrementer =
-      ReactTestUtils.findRenderedDOMComponentWithClass(
-        testRefsComponent,
-        'clickIncrementer'
-      );
-
-    expectClickLogsLengthToBe(testRefsComponent, 1);
-
-    // After clicking the reset, there should still only be one click log ref.
-    ReactTestUtils.Simulate.click(testRefsComponent.refs.resetDiv);
-    expectClickLogsLengthToBe(testRefsComponent, 1);
-
-    // Begin incrementing clicks (and therefore refs).
-    ReactTestUtils.Simulate.click(clickIncrementer);
-    expectClickLogsLengthToBe(testRefsComponent, 2);
-
-    ReactTestUtils.Simulate.click(clickIncrementer);
-    expectClickLogsLengthToBe(testRefsComponent, 3);
-
-    // Now reset again
-    ReactTestUtils.Simulate.click(testRefsComponent.refs.resetDiv);
-    expectClickLogsLengthToBe(testRefsComponent, 1);
-
-  });
-
-});
-
-
-
-/**
- * Tests that when a ref hops around children, we can track that correctly.
- */
-describe('ref swapping', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-  });
-
-  var RefHopsAround = React.createClass({
-    getInitialState: function() {
-      return {count: 0};
-    },
-    moveRef: function() {
-      this.setState({ count: this.state.count + 1 });
-    },
-    render: function() {
-      var count = this.state.count;
-      /**
-       * What we have here, is three divs with refs (div1/2/3), but a single
-       * moving cursor ref `hopRef` that "hops" around the three. We'll call the
-       * `moveRef()` function several times and make sure that the hop ref
-       * points to the correct divs.
-       */
-      return (
-        <div>
-          <div
-            className="first"
-            ref={count % 3 === 0 ? 'hopRef' : 'divOneRef'}
-          />
-          <div
-            className="second"
-            ref={count % 3 === 1 ? 'hopRef' : 'divTwoRef'}
-          />
-          <div
-            className="third"
-            ref={count % 3 === 2 ? 'hopRef' : 'divThreeRef'}
-          />
-        </div>
-      );
-    }
-  });
-
-  it("Allow refs to hop around children correctly", function() {
-    var refHopsAround = ReactTestUtils.renderIntoDocument(<RefHopsAround />);
-
-    var firstDiv =
-      ReactTestUtils.findRenderedDOMComponentWithClass(refHopsAround, 'first');
-    var secondDiv =
-      ReactTestUtils.findRenderedDOMComponentWithClass(refHopsAround, 'second');
-    var thirdDiv =
-      ReactTestUtils.findRenderedDOMComponentWithClass(refHopsAround, 'third');
-
-    expect(refHopsAround.refs.hopRef).toEqual(firstDiv);
-    expect(refHopsAround.refs.divTwoRef).toEqual(secondDiv);
-    expect(refHopsAround.refs.divThreeRef).toEqual(thirdDiv);
-
-    refHopsAround.moveRef();
-    expect(refHopsAround.refs.divOneRef).toEqual(firstDiv);
-    expect(refHopsAround.refs.hopRef).toEqual(secondDiv);
-    expect(refHopsAround.refs.divThreeRef).toEqual(thirdDiv);
-
-    refHopsAround.moveRef();
-    expect(refHopsAround.refs.divOneRef).toEqual(firstDiv);
-    expect(refHopsAround.refs.divTwoRef).toEqual(secondDiv);
-    expect(refHopsAround.refs.hopRef).toEqual(thirdDiv);
-
-    /**
-     * Make sure that after the third, we're back to where we started and the
-     * refs are completely restored.
-     */
-    refHopsAround.moveRef();
-    expect(refHopsAround.refs.hopRef).toEqual(firstDiv);
-    expect(refHopsAround.refs.divTwoRef).toEqual(secondDiv);
-    expect(refHopsAround.refs.divThreeRef).toEqual(thirdDiv);
-  });
-
-
-  it('always has a value for this.refs', function() {
-    var Component = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var instance = ReactTestUtils.renderIntoDocument(<Component />);
-    expect(!!instance.refs).toBe(true);
-  });
-});
-
diff --git a/src/core/instantiateReactComponent.js b/src/core/instantiateReactComponent.js
deleted file mode 100644
index 14efc470570..00000000000
--- a/src/core/instantiateReactComponent.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule instantiateReactComponent
- * @typechecks static-only
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * Validate a `componentDescriptor`. This should be exposed publicly in a follow
- * up diff.
- *
- * @param {object} descriptor
- * @return {boolean} Returns true if this is a valid descriptor of a Component.
- */
-function isValidComponentDescriptor(descriptor) {
-  return !!descriptor && (
-    (
-      typeof descriptor.type === 'function' &&
-      typeof descriptor.type.prototype.mountComponent === 'function' &&
-      typeof descriptor.type.prototype.receiveComponent === 'function'
-    ) || typeof descriptor.type === 'string'
-  );
-}
-
-/**
- * Given a `componentDescriptor` create an instance that will actually be
- * mounted. Currently it just extracts an existing clone from composite
- * components but this is an implementation detail which will change.
- *
- * @param {object} descriptor
- * @return {object} A new instance of componentDescriptor's constructor.
- * @protected
- */
-function instantiateReactComponent(descriptor) {
-
-  // TODO: Make warning
-  // if (__DEV__) {
-    invariant(
-      isValidComponentDescriptor(descriptor),
-      'Only React Components are valid for mounting.'
-    );
-  // }
-
-  return new descriptor.type(descriptor);
-}
-
-module.exports = instantiateReactComponent;
diff --git a/src/core/shouldUpdateReactComponent.js b/src/core/shouldUpdateReactComponent.js
deleted file mode 100644
index 7e8c4ce619a..00000000000
--- a/src/core/shouldUpdateReactComponent.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule shouldUpdateReactComponent
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * Given a `prevDescriptor` and `nextDescriptor`, determines if the existing
- * instance should be updated as opposed to being destroyed or replaced by a new
- * instance. Both arguments are descriptors. This ensures that this logic can
- * operate on stateless trees without any backing instance.
- *
- * @param {?object} prevDescriptor
- * @param {?object} nextDescriptor
- * @return {boolean} True if the existing instance should be updated.
- * @protected
- */
-function shouldUpdateReactComponent(prevDescriptor, nextDescriptor) {
-  if (prevDescriptor && nextDescriptor &&
-      prevDescriptor.type === nextDescriptor.type &&
-      prevDescriptor.key === nextDescriptor.key &&
-      prevDescriptor._owner === nextDescriptor._owner) {
-    return true;
-  }
-  return false;
-}
-
-module.exports = shouldUpdateReactComponent;
diff --git a/src/event/EventConstants.js b/src/event/EventConstants.js
deleted file mode 100644
index ee8508340f1..00000000000
--- a/src/event/EventConstants.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule EventConstants
- */
-
-"use strict";
-
-var keyMirror = require('keyMirror');
-
-var PropagationPhases = keyMirror({bubbled: null, captured: null});
-
-/**
- * Types of raw signals from the browser caught at the top level.
- */
-var topLevelTypes = keyMirror({
-  topBlur: null,
-  topChange: null,
-  topClick: null,
-  topCompositionEnd: null,
-  topCompositionStart: null,
-  topCompositionUpdate: null,
-  topContextMenu: null,
-  topCopy: null,
-  topCut: null,
-  topDoubleClick: null,
-  topDrag: null,
-  topDragEnd: null,
-  topDragEnter: null,
-  topDragExit: null,
-  topDragLeave: null,
-  topDragOver: null,
-  topDragStart: null,
-  topDrop: null,
-  topError: null,
-  topFocus: null,
-  topInput: null,
-  topKeyDown: null,
-  topKeyPress: null,
-  topKeyUp: null,
-  topLoad: null,
-  topMouseDown: null,
-  topMouseMove: null,
-  topMouseOut: null,
-  topMouseOver: null,
-  topMouseUp: null,
-  topPaste: null,
-  topReset: null,
-  topScroll: null,
-  topSelectionChange: null,
-  topSubmit: null,
-  topTextInput: null,
-  topTouchCancel: null,
-  topTouchEnd: null,
-  topTouchMove: null,
-  topTouchStart: null,
-  topWheel: null
-});
-
-var EventConstants = {
-  topLevelTypes: topLevelTypes,
-  PropagationPhases: PropagationPhases
-};
-
-module.exports = EventConstants;
diff --git a/src/event/EventPluginHub.js b/src/event/EventPluginHub.js
deleted file mode 100644
index 76dc8e1448a..00000000000
--- a/src/event/EventPluginHub.js
+++ /dev/null
@@ -1,290 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule EventPluginHub
- */
-
-"use strict";
-
-var EventPluginRegistry = require('EventPluginRegistry');
-var EventPluginUtils = require('EventPluginUtils');
-
-var accumulate = require('accumulate');
-var forEachAccumulated = require('forEachAccumulated');
-var invariant = require('invariant');
-var isEventSupported = require('isEventSupported');
-var monitorCodeUse = require('monitorCodeUse');
-
-/**
- * Internal store for event listeners
- */
-var listenerBank = {};
-
-/**
- * Internal queue of events that have accumulated their dispatches and are
- * waiting to have their dispatches executed.
- */
-var eventQueue = null;
-
-/**
- * Dispatches an event and releases it back into the pool, unless persistent.
- *
- * @param {?object} event Synthetic event to be dispatched.
- * @private
- */
-var executeDispatchesAndRelease = function(event) {
-  if (event) {
-    var executeDispatch = EventPluginUtils.executeDispatch;
-    // Plugins can provide custom behavior when dispatching events.
-    var PluginModule = EventPluginRegistry.getPluginModuleForEvent(event);
-    if (PluginModule && PluginModule.executeDispatch) {
-      executeDispatch = PluginModule.executeDispatch;
-    }
-    EventPluginUtils.executeDispatchesInOrder(event, executeDispatch);
-
-    if (!event.isPersistent()) {
-      event.constructor.release(event);
-    }
-  }
-};
-
-/**
- * - `InstanceHandle`: [required] Module that performs logical traversals of DOM
- *   hierarchy given ids of the logical DOM elements involved.
- */
-var InstanceHandle = null;
-
-function validateInstanceHandle() {
-  var invalid = !InstanceHandle||
-    !InstanceHandle.traverseTwoPhase ||
-    !InstanceHandle.traverseEnterLeave;
-  if (invalid) {
-    throw new Error('InstanceHandle not injected before use!');
-  }
-}
-
-/**
- * This is a unified interface for event plugins to be installed and configured.
- *
- * Event plugins can implement the following properties:
- *
- *   `extractEvents` {function(string, DOMEventTarget, string, object): *}
- *     Required. When a top-level event is fired, this method is expected to
- *     extract synthetic events that will in turn be queued and dispatched.
- *
- *   `eventTypes` {object}
- *     Optional, plugins that fire events must publish a mapping of registration
- *     names that are used to register listeners. Values of this mapping must
- *     be objects that contain `registrationName` or `phasedRegistrationNames`.
- *
- *   `executeDispatch` {function(object, function, string)}
- *     Optional, allows plugins to override how an event gets dispatched. By
- *     default, the listener is simply invoked.
- *
- * Each plugin that is injected into `EventsPluginHub` is immediately operable.
- *
- * @public
- */
-var EventPluginHub = {
-
-  /**
-   * Methods for injecting dependencies.
-   */
-  injection: {
-
-    /**
-     * @param {object} InjectedMount
-     * @public
-     */
-    injectMount: EventPluginUtils.injection.injectMount,
-
-    /**
-     * @param {object} InjectedInstanceHandle
-     * @public
-     */
-    injectInstanceHandle: function(InjectedInstanceHandle) {
-      InstanceHandle = InjectedInstanceHandle;
-      if (__DEV__) {
-        validateInstanceHandle();
-      }
-    },
-
-    getInstanceHandle: function() {
-      if (__DEV__) {
-        validateInstanceHandle();
-      }
-      return InstanceHandle;
-    },
-
-    /**
-     * @param {array} InjectedEventPluginOrder
-     * @public
-     */
-    injectEventPluginOrder: EventPluginRegistry.injectEventPluginOrder,
-
-    /**
-     * @param {object} injectedNamesToPlugins Map from names to plugin modules.
-     */
-    injectEventPluginsByName: EventPluginRegistry.injectEventPluginsByName
-
-  },
-
-  eventNameDispatchConfigs: EventPluginRegistry.eventNameDispatchConfigs,
-
-  registrationNameModules: EventPluginRegistry.registrationNameModules,
-
-  /**
-   * Stores `listener` at `listenerBank[registrationName][id]`. Is idempotent.
-   *
-   * @param {string} id ID of the DOM element.
-   * @param {string} registrationName Name of listener (e.g. `onClick`).
-   * @param {?function} listener The callback to store.
-   */
-  putListener: function(id, registrationName, listener) {
-    invariant(
-      !listener || typeof listener === 'function',
-      'Expected %s listener to be a function, instead got type %s',
-      registrationName, typeof listener
-    );
-
-    if (__DEV__) {
-      // IE8 has no API for event capturing and the `onScroll` event doesn't
-      // bubble.
-      if (registrationName === 'onScroll' &&
-          !isEventSupported('scroll', true)) {
-        monitorCodeUse('react_no_scroll_event');
-        console.warn('This browser doesn\'t support the `onScroll` event');
-      }
-    }
-    var bankForRegistrationName =
-      listenerBank[registrationName] || (listenerBank[registrationName] = {});
-    bankForRegistrationName[id] = listener;
-  },
-
-  /**
-   * @param {string} id ID of the DOM element.
-   * @param {string} registrationName Name of listener (e.g. `onClick`).
-   * @return {?function} The stored callback.
-   */
-  getListener: function(id, registrationName) {
-    var bankForRegistrationName = listenerBank[registrationName];
-    return bankForRegistrationName && bankForRegistrationName[id];
-  },
-
-  /**
-   * Deletes a listener from the registration bank.
-   *
-   * @param {string} id ID of the DOM element.
-   * @param {string} registrationName Name of listener (e.g. `onClick`).
-   */
-  deleteListener: function(id, registrationName) {
-    var bankForRegistrationName = listenerBank[registrationName];
-    if (bankForRegistrationName) {
-      delete bankForRegistrationName[id];
-    }
-  },
-
-  /**
-   * Deletes all listeners for the DOM element with the supplied ID.
-   *
-   * @param {string} id ID of the DOM element.
-   */
-  deleteAllListeners: function(id) {
-    for (var registrationName in listenerBank) {
-      delete listenerBank[registrationName][id];
-    }
-  },
-
-  /**
-   * Allows registered plugins an opportunity to extract events from top-level
-   * native browser events.
-   *
-   * @param {string} topLevelType Record from `EventConstants`.
-   * @param {DOMEventTarget} topLevelTarget The listening component root node.
-   * @param {string} topLevelTargetID ID of `topLevelTarget`.
-   * @param {object} nativeEvent Native browser event.
-   * @return {*} An accumulation of synthetic events.
-   * @internal
-   */
-  extractEvents: function(
-      topLevelType,
-      topLevelTarget,
-      topLevelTargetID,
-      nativeEvent) {
-    var events;
-    var plugins = EventPluginRegistry.plugins;
-    for (var i = 0, l = plugins.length; i < l; i++) {
-      // Not every plugin in the ordering may be loaded at runtime.
-      var possiblePlugin = plugins[i];
-      if (possiblePlugin) {
-        var extractedEvents = possiblePlugin.extractEvents(
-          topLevelType,
-          topLevelTarget,
-          topLevelTargetID,
-          nativeEvent
-        );
-        if (extractedEvents) {
-          events = accumulate(events, extractedEvents);
-        }
-      }
-    }
-    return events;
-  },
-
-  /**
-   * Enqueues a synthetic event that should be dispatched when
-   * `processEventQueue` is invoked.
-   *
-   * @param {*} events An accumulation of synthetic events.
-   * @internal
-   */
-  enqueueEvents: function(events) {
-    if (events) {
-      eventQueue = accumulate(eventQueue, events);
-    }
-  },
-
-  /**
-   * Dispatches all synthetic events on the event queue.
-   *
-   * @internal
-   */
-  processEventQueue: function() {
-    // Set `eventQueue` to null before processing it so that we can tell if more
-    // events get enqueued while processing.
-    var processingEventQueue = eventQueue;
-    eventQueue = null;
-    forEachAccumulated(processingEventQueue, executeDispatchesAndRelease);
-    invariant(
-      !eventQueue,
-      'processEventQueue(): Additional events were enqueued while processing ' +
-      'an event queue. Support for this has not yet been implemented.'
-    );
-  },
-
-  /**
-   * These are needed for tests only. Do not use!
-   */
-  __purge: function() {
-    listenerBank = {};
-  },
-
-  __getListenerBank: function() {
-    return listenerBank;
-  }
-
-};
-
-module.exports = EventPluginHub;
diff --git a/src/event/EventPluginRegistry.js b/src/event/EventPluginRegistry.js
deleted file mode 100644
index 2441bdace11..00000000000
--- a/src/event/EventPluginRegistry.js
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule EventPluginRegistry
- * @typechecks static-only
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * Injectable ordering of event plugins.
- */
-var EventPluginOrder = null;
-
-/**
- * Injectable mapping from names to event plugin modules.
- */
-var namesToPlugins = {};
-
-/**
- * Recomputes the plugin list using the injected plugins and plugin ordering.
- *
- * @private
- */
-function recomputePluginOrdering() {
-  if (!EventPluginOrder) {
-    // Wait until an `EventPluginOrder` is injected.
-    return;
-  }
-  for (var pluginName in namesToPlugins) {
-    var PluginModule = namesToPlugins[pluginName];
-    var pluginIndex = EventPluginOrder.indexOf(pluginName);
-    invariant(
-      pluginIndex > -1,
-      'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
-      'the plugin ordering, `%s`.',
-      pluginName
-    );
-    if (EventPluginRegistry.plugins[pluginIndex]) {
-      continue;
-    }
-    invariant(
-      PluginModule.extractEvents,
-      'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
-      'method, but `%s` does not.',
-      pluginName
-    );
-    EventPluginRegistry.plugins[pluginIndex] = PluginModule;
-    var publishedEvents = PluginModule.eventTypes;
-    for (var eventName in publishedEvents) {
-      invariant(
-        publishEventForPlugin(
-          publishedEvents[eventName],
-          PluginModule,
-          eventName
-        ),
-        'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',
-        eventName,
-        pluginName
-      );
-    }
-  }
-}
-
-/**
- * Publishes an event so that it can be dispatched by the supplied plugin.
- *
- * @param {object} dispatchConfig Dispatch configuration for the event.
- * @param {object} PluginModule Plugin publishing the event.
- * @return {boolean} True if the event was successfully published.
- * @private
- */
-function publishEventForPlugin(dispatchConfig, PluginModule, eventName) {
-  invariant(
-    !EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName),
-    'EventPluginHub: More than one plugin attempted to publish the same ' +
-    'event name, `%s`.',
-    eventName
-  );
-  EventPluginRegistry.eventNameDispatchConfigs[eventName] = dispatchConfig;
-
-  var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
-  if (phasedRegistrationNames) {
-    for (var phaseName in phasedRegistrationNames) {
-      if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
-        var phasedRegistrationName = phasedRegistrationNames[phaseName];
-        publishRegistrationName(
-          phasedRegistrationName,
-          PluginModule,
-          eventName
-        );
-      }
-    }
-    return true;
-  } else if (dispatchConfig.registrationName) {
-    publishRegistrationName(
-      dispatchConfig.registrationName,
-      PluginModule,
-      eventName
-    );
-    return true;
-  }
-  return false;
-}
-
-/**
- * Publishes a registration name that is used to identify dispatched events and
- * can be used with `EventPluginHub.putListener` to register listeners.
- *
- * @param {string} registrationName Registration name to add.
- * @param {object} PluginModule Plugin publishing the event.
- * @private
- */
-function publishRegistrationName(registrationName, PluginModule, eventName) {
-  invariant(
-    !EventPluginRegistry.registrationNameModules[registrationName],
-    'EventPluginHub: More than one plugin attempted to publish the same ' +
-    'registration name, `%s`.',
-    registrationName
-  );
-  EventPluginRegistry.registrationNameModules[registrationName] = PluginModule;
-  EventPluginRegistry.registrationNameDependencies[registrationName] =
-    PluginModule.eventTypes[eventName].dependencies;
-}
-
-/**
- * Registers plugins so that they can extract and dispatch events.
- *
- * @see {EventPluginHub}
- */
-var EventPluginRegistry = {
-
-  /**
-   * Ordered list of injected plugins.
-   */
-  plugins: [],
-
-  /**
-   * Mapping from event name to dispatch config
-   */
-  eventNameDispatchConfigs: {},
-
-  /**
-   * Mapping from registration name to plugin module
-   */
-  registrationNameModules: {},
-
-  /**
-   * Mapping from registration name to event name
-   */
-  registrationNameDependencies: {},
-
-  /**
-   * Injects an ordering of plugins (by plugin name). This allows the ordering
-   * to be decoupled from injection of the actual plugins so that ordering is
-   * always deterministic regardless of packaging, on-the-fly injection, etc.
-   *
-   * @param {array} InjectedEventPluginOrder
-   * @internal
-   * @see {EventPluginHub.injection.injectEventPluginOrder}
-   */
-  injectEventPluginOrder: function(InjectedEventPluginOrder) {
-    invariant(
-      !EventPluginOrder,
-      'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
-      'once. You are likely trying to load more than one copy of React.'
-    );
-    // Clone the ordering so it cannot be dynamically mutated.
-    EventPluginOrder = Array.prototype.slice.call(InjectedEventPluginOrder);
-    recomputePluginOrdering();
-  },
-
-  /**
-   * Injects plugins to be used by `EventPluginHub`. The plugin names must be
-   * in the ordering injected by `injectEventPluginOrder`.
-   *
-   * Plugins can be injected as part of page initialization or on-the-fly.
-   *
-   * @param {object} injectedNamesToPlugins Map from names to plugin modules.
-   * @internal
-   * @see {EventPluginHub.injection.injectEventPluginsByName}
-   */
-  injectEventPluginsByName: function(injectedNamesToPlugins) {
-    var isOrderingDirty = false;
-    for (var pluginName in injectedNamesToPlugins) {
-      if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
-        continue;
-      }
-      var PluginModule = injectedNamesToPlugins[pluginName];
-      if (!namesToPlugins.hasOwnProperty(pluginName) ||
-          namesToPlugins[pluginName] !== PluginModule) {
-        invariant(
-          !namesToPlugins[pluginName],
-          'EventPluginRegistry: Cannot inject two different event plugins ' +
-          'using the same name, `%s`.',
-          pluginName
-        );
-        namesToPlugins[pluginName] = PluginModule;
-        isOrderingDirty = true;
-      }
-    }
-    if (isOrderingDirty) {
-      recomputePluginOrdering();
-    }
-  },
-
-  /**
-   * Looks up the plugin for the supplied event.
-   *
-   * @param {object} event A synthetic event.
-   * @return {?object} The plugin that created the supplied event.
-   * @internal
-   */
-  getPluginModuleForEvent: function(event) {
-    var dispatchConfig = event.dispatchConfig;
-    if (dispatchConfig.registrationName) {
-      return EventPluginRegistry.registrationNameModules[
-        dispatchConfig.registrationName
-      ] || null;
-    }
-    for (var phase in dispatchConfig.phasedRegistrationNames) {
-      if (!dispatchConfig.phasedRegistrationNames.hasOwnProperty(phase)) {
-        continue;
-      }
-      var PluginModule = EventPluginRegistry.registrationNameModules[
-        dispatchConfig.phasedRegistrationNames[phase]
-      ];
-      if (PluginModule) {
-        return PluginModule;
-      }
-    }
-    return null;
-  },
-
-  /**
-   * Exposed for unit testing.
-   * @private
-   */
-  _resetEventPlugins: function() {
-    EventPluginOrder = null;
-    for (var pluginName in namesToPlugins) {
-      if (namesToPlugins.hasOwnProperty(pluginName)) {
-        delete namesToPlugins[pluginName];
-      }
-    }
-    EventPluginRegistry.plugins.length = 0;
-
-    var eventNameDispatchConfigs = EventPluginRegistry.eventNameDispatchConfigs;
-    for (var eventName in eventNameDispatchConfigs) {
-      if (eventNameDispatchConfigs.hasOwnProperty(eventName)) {
-        delete eventNameDispatchConfigs[eventName];
-      }
-    }
-
-    var registrationNameModules = EventPluginRegistry.registrationNameModules;
-    for (var registrationName in registrationNameModules) {
-      if (registrationNameModules.hasOwnProperty(registrationName)) {
-        delete registrationNameModules[registrationName];
-      }
-    }
-  }
-
-};
-
-module.exports = EventPluginRegistry;
diff --git a/src/event/EventPluginUtils.js b/src/event/EventPluginUtils.js
deleted file mode 100644
index bd7608034bb..00000000000
--- a/src/event/EventPluginUtils.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule EventPluginUtils
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-
-var invariant = require('invariant');
-
-/**
- * Injected dependencies:
- */
-
-/**
- * - `Mount`: [required] Module that can convert between React dom IDs and
- *   actual node references.
- */
-var injection = {
-  Mount: null,
-  injectMount: function(InjectedMount) {
-    injection.Mount = InjectedMount;
-    if (__DEV__) {
-      invariant(
-        InjectedMount && InjectedMount.getNode,
-        'EventPluginUtils.injection.injectMount(...): Injected Mount module ' +
-        'is missing getNode.'
-      );
-    }
-  }
-};
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-function isEndish(topLevelType) {
-  return topLevelType === topLevelTypes.topMouseUp ||
-         topLevelType === topLevelTypes.topTouchEnd ||
-         topLevelType === topLevelTypes.topTouchCancel;
-}
-
-function isMoveish(topLevelType) {
-  return topLevelType === topLevelTypes.topMouseMove ||
-         topLevelType === topLevelTypes.topTouchMove;
-}
-function isStartish(topLevelType) {
-  return topLevelType === topLevelTypes.topMouseDown ||
-         topLevelType === topLevelTypes.topTouchStart;
-}
-
-
-var validateEventDispatches;
-if (__DEV__) {
-  validateEventDispatches = function(event) {
-    var dispatchListeners = event._dispatchListeners;
-    var dispatchIDs = event._dispatchIDs;
-
-    var listenersIsArr = Array.isArray(dispatchListeners);
-    var idsIsArr = Array.isArray(dispatchIDs);
-    var IDsLen = idsIsArr ? dispatchIDs.length : dispatchIDs ? 1 : 0;
-    var listenersLen = listenersIsArr ?
-      dispatchListeners.length :
-      dispatchListeners ? 1 : 0;
-
-    invariant(
-      idsIsArr === listenersIsArr && IDsLen === listenersLen,
-      'EventPluginUtils: Invalid `event`.'
-    );
-  };
-}
-
-/**
- * Invokes `cb(event, listener, id)`. Avoids using call if no scope is
- * provided. The `(listener,id)` pair effectively forms the "dispatch" but are
- * kept separate to conserve memory.
- */
-function forEachEventDispatch(event, cb) {
-  var dispatchListeners = event._dispatchListeners;
-  var dispatchIDs = event._dispatchIDs;
-  if (__DEV__) {
-    validateEventDispatches(event);
-  }
-  if (Array.isArray(dispatchListeners)) {
-    for (var i = 0; i < dispatchListeners.length; i++) {
-      if (event.isPropagationStopped()) {
-        break;
-      }
-      // Listeners and IDs are two parallel arrays that are always in sync.
-      cb(event, dispatchListeners[i], dispatchIDs[i]);
-    }
-  } else if (dispatchListeners) {
-    cb(event, dispatchListeners, dispatchIDs);
-  }
-}
-
-/**
- * Default implementation of PluginModule.executeDispatch().
- * @param {SyntheticEvent} SyntheticEvent to handle
- * @param {function} Application-level callback
- * @param {string} domID DOM id to pass to the callback.
- */
-function executeDispatch(event, listener, domID) {
-  event.currentTarget = injection.Mount.getNode(domID);
-  var returnValue = listener(event, domID);
-  event.currentTarget = null;
-  return returnValue;
-}
-
-/**
- * Standard/simple iteration through an event's collected dispatches.
- */
-function executeDispatchesInOrder(event, executeDispatch) {
-  forEachEventDispatch(event, executeDispatch);
-  event._dispatchListeners = null;
-  event._dispatchIDs = null;
-}
-
-/**
- * Standard/simple iteration through an event's collected dispatches, but stops
- * at the first dispatch execution returning true, and returns that id.
- *
- * @return id of the first dispatch execution who's listener returns true, or
- * null if no listener returned true.
- */
-function executeDispatchesInOrderStopAtTrueImpl(event) {
-  var dispatchListeners = event._dispatchListeners;
-  var dispatchIDs = event._dispatchIDs;
-  if (__DEV__) {
-    validateEventDispatches(event);
-  }
-  if (Array.isArray(dispatchListeners)) {
-    for (var i = 0; i < dispatchListeners.length; i++) {
-      if (event.isPropagationStopped()) {
-        break;
-      }
-      // Listeners and IDs are two parallel arrays that are always in sync.
-      if (dispatchListeners[i](event, dispatchIDs[i])) {
-        return dispatchIDs[i];
-      }
-    }
-  } else if (dispatchListeners) {
-    if (dispatchListeners(event, dispatchIDs)) {
-      return dispatchIDs;
-    }
-  }
-  return null;
-}
-
-/**
- * @see executeDispatchesInOrderStopAtTrueImpl
- */
-function executeDispatchesInOrderStopAtTrue(event) {
-  var ret = executeDispatchesInOrderStopAtTrueImpl(event);
-  event._dispatchIDs = null;
-  event._dispatchListeners = null;
-  return ret;
-}
-
-/**
- * Execution of a "direct" dispatch - there must be at most one dispatch
- * accumulated on the event or it is considered an error. It doesn't really make
- * sense for an event with multiple dispatches (bubbled) to keep track of the
- * return values at each dispatch execution, but it does tend to make sense when
- * dealing with "direct" dispatches.
- *
- * @return The return value of executing the single dispatch.
- */
-function executeDirectDispatch(event) {
-  if (__DEV__) {
-    validateEventDispatches(event);
-  }
-  var dispatchListener = event._dispatchListeners;
-  var dispatchID = event._dispatchIDs;
-  invariant(
-    !Array.isArray(dispatchListener),
-    'executeDirectDispatch(...): Invalid `event`.'
-  );
-  var res = dispatchListener ?
-    dispatchListener(event, dispatchID) :
-    null;
-  event._dispatchListeners = null;
-  event._dispatchIDs = null;
-  return res;
-}
-
-/**
- * @param {SyntheticEvent} event
- * @return {bool} True iff number of dispatches accumulated is greater than 0.
- */
-function hasDispatches(event) {
-  return !!event._dispatchListeners;
-}
-
-/**
- * General utilities that are useful in creating custom Event Plugins.
- */
-var EventPluginUtils = {
-  isEndish: isEndish,
-  isMoveish: isMoveish,
-  isStartish: isStartish,
-
-  executeDirectDispatch: executeDirectDispatch,
-  executeDispatch: executeDispatch,
-  executeDispatchesInOrder: executeDispatchesInOrder,
-  executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,
-  hasDispatches: hasDispatches,
-  injection: injection,
-  useTouchEvents: false
-};
-
-module.exports = EventPluginUtils;
diff --git a/src/event/EventPropagators.js b/src/event/EventPropagators.js
deleted file mode 100644
index 5a739cb5769..00000000000
--- a/src/event/EventPropagators.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule EventPropagators
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginHub = require('EventPluginHub');
-
-var accumulate = require('accumulate');
-var forEachAccumulated = require('forEachAccumulated');
-
-var PropagationPhases = EventConstants.PropagationPhases;
-var getListener = EventPluginHub.getListener;
-
-/**
- * Some event types have a notion of different registration names for different
- * "phases" of propagation. This finds listeners by a given phase.
- */
-function listenerAtPhase(id, event, propagationPhase) {
-  var registrationName =
-    event.dispatchConfig.phasedRegistrationNames[propagationPhase];
-  return getListener(id, registrationName);
-}
-
-/**
- * Tags a `SyntheticEvent` with dispatched listeners. Creating this function
- * here, allows us to not have to bind or create functions for each event.
- * Mutating the event's members allows us to not have to create a wrapping
- * "dispatch" object that pairs the event with the listener.
- */
-function accumulateDirectionalDispatches(domID, upwards, event) {
-  if (__DEV__) {
-    if (!domID) {
-      throw new Error('Dispatching id must not be null');
-    }
-  }
-  var phase = upwards ? PropagationPhases.bubbled : PropagationPhases.captured;
-  var listener = listenerAtPhase(domID, event, phase);
-  if (listener) {
-    event._dispatchListeners = accumulate(event._dispatchListeners, listener);
-    event._dispatchIDs = accumulate(event._dispatchIDs, domID);
-  }
-}
-
-/**
- * Collect dispatches (must be entirely collected before dispatching - see unit
- * tests). Lazily allocate the array to conserve memory.  We must loop through
- * each event and perform the traversal for each one. We can not perform a
- * single traversal for the entire collection of events because each event may
- * have a different target.
- */
-function accumulateTwoPhaseDispatchesSingle(event) {
-  if (event && event.dispatchConfig.phasedRegistrationNames) {
-    EventPluginHub.injection.getInstanceHandle().traverseTwoPhase(
-      event.dispatchMarker,
-      accumulateDirectionalDispatches,
-      event
-    );
-  }
-}
-
-
-/**
- * Accumulates without regard to direction, does not look for phased
- * registration names. Same as `accumulateDirectDispatchesSingle` but without
- * requiring that the `dispatchMarker` be the same as the dispatched ID.
- */
-function accumulateDispatches(id, ignoredDirection, event) {
-  if (event && event.dispatchConfig.registrationName) {
-    var registrationName = event.dispatchConfig.registrationName;
-    var listener = getListener(id, registrationName);
-    if (listener) {
-      event._dispatchListeners = accumulate(event._dispatchListeners, listener);
-      event._dispatchIDs = accumulate(event._dispatchIDs, id);
-    }
-  }
-}
-
-/**
- * Accumulates dispatches on an `SyntheticEvent`, but only for the
- * `dispatchMarker`.
- * @param {SyntheticEvent} event
- */
-function accumulateDirectDispatchesSingle(event) {
-  if (event && event.dispatchConfig.registrationName) {
-    accumulateDispatches(event.dispatchMarker, null, event);
-  }
-}
-
-function accumulateTwoPhaseDispatches(events) {
-  forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
-}
-
-function accumulateEnterLeaveDispatches(leave, enter, fromID, toID) {
-  EventPluginHub.injection.getInstanceHandle().traverseEnterLeave(
-    fromID,
-    toID,
-    accumulateDispatches,
-    leave,
-    enter
-  );
-}
-
-
-function accumulateDirectDispatches(events) {
-  forEachAccumulated(events, accumulateDirectDispatchesSingle);
-}
-
-
-
-/**
- * A small set of propagation patterns, each of which will accept a small amount
- * of information, and generate a set of "dispatch ready event objects" - which
- * are sets of events that have already been annotated with a set of dispatched
- * listener functions/ids. The API is designed this way to discourage these
- * propagation strategies from actually executing the dispatches, since we
- * always want to collect the entire set of dispatches before executing event a
- * single one.
- *
- * @constructor EventPropagators
- */
-var EventPropagators = {
-  accumulateTwoPhaseDispatches: accumulateTwoPhaseDispatches,
-  accumulateDirectDispatches: accumulateDirectDispatches,
-  accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches
-};
-
-module.exports = EventPropagators;
diff --git a/src/event/__tests__/EventPluginHub-test.js b/src/event/__tests__/EventPluginHub-test.js
deleted file mode 100644
index 808be87d31f..00000000000
--- a/src/event/__tests__/EventPluginHub-test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-require('mock-modules')
-  .dontMock('EventPluginHub')
-  .mock('isEventSupported');
-
-describe('EventPluginHub', function() {
-  var EventPluginHub;
-  var isEventSupported;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    EventPluginHub = require('EventPluginHub');
-    isEventSupported = require('isEventSupported');
-    isEventSupported.mockReturnValueOnce(false);
-  });
-
-  it('should warn about the `onScroll` issue on IE8', function() {
-    spyOn(console, 'warn');
-    EventPluginHub.putListener(1, 'onScroll', function(){});
-    expect(console.warn.callCount).toBe(1);
-    expect(console.warn.mostRecentCall.args[0]).toBe(
-      'This browser doesn\'t support the `onScroll` event'
-    );
-  });
-
-  it("should prevent non-function listeners", function() {
-    expect(function() {
-      EventPluginHub.putListener(1, 'onClick', 'not a function');
-    }).toThrow(
-      'Invariant Violation: Expected onClick listener to be a function, ' +
-      'instead got type string'
-    );
-  });
-});
diff --git a/src/event/__tests__/EventPluginRegistry-test.js b/src/event/__tests__/EventPluginRegistry-test.js
deleted file mode 100644
index 43ed309f2e9..00000000000
--- a/src/event/__tests__/EventPluginRegistry-test.js
+++ /dev/null
@@ -1,273 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var merge = require('merge');
-
-describe('EventPluginRegistry', function() {
-  var EventPluginRegistry;
-  var createPlugin;
-
-  beforeEach(function() {
-    EventPluginRegistry = require('EventPluginRegistry');
-    EventPluginRegistry._resetEventPlugins();
-
-    createPlugin = function(properties) {
-      return merge({extractEvents: function() {}}, properties);
-    };
-  });
-
-  it('should be able to inject ordering before plugins', function() {
-    var OnePlugin = createPlugin();
-    var TwoPlugin = createPlugin();
-    var ThreePlugin = createPlugin();
-
-    EventPluginRegistry.injectEventPluginOrder(['one', 'two', 'three']);
-    EventPluginRegistry.injectEventPluginsByName({
-      one: OnePlugin,
-      two: TwoPlugin
-    });
-    EventPluginRegistry.injectEventPluginsByName({
-      three: ThreePlugin
-    });
-
-    expect(EventPluginRegistry.plugins.length).toBe(3);
-    expect(EventPluginRegistry.plugins[0]).toBe(OnePlugin);
-    expect(EventPluginRegistry.plugins[1]).toBe(TwoPlugin);
-    expect(EventPluginRegistry.plugins[2]).toBe(ThreePlugin);
-  });
-
-  it('should be able to inject plugins before and after ordering', function() {
-    var OnePlugin = createPlugin();
-    var TwoPlugin = createPlugin();
-    var ThreePlugin = createPlugin();
-
-    EventPluginRegistry.injectEventPluginsByName({
-      one: OnePlugin,
-      two: TwoPlugin
-    });
-    EventPluginRegistry.injectEventPluginOrder(['one', 'two', 'three']);
-    EventPluginRegistry.injectEventPluginsByName({
-      three: ThreePlugin
-    });
-
-    expect(EventPluginRegistry.plugins.length).toBe(3);
-    expect(EventPluginRegistry.plugins[0]).toBe(OnePlugin);
-    expect(EventPluginRegistry.plugins[1]).toBe(TwoPlugin);
-    expect(EventPluginRegistry.plugins[2]).toBe(ThreePlugin);
-  });
-
-  it('should be able to inject repeated plugins and out-of-order', function() {
-    var OnePlugin = createPlugin();
-    var TwoPlugin = createPlugin();
-    var ThreePlugin = createPlugin();
-
-    EventPluginRegistry.injectEventPluginsByName({
-      one: OnePlugin,
-      three: ThreePlugin
-    });
-    EventPluginRegistry.injectEventPluginOrder(['one', 'two', 'three']);
-    EventPluginRegistry.injectEventPluginsByName({
-      two: TwoPlugin,
-      three: ThreePlugin
-    });
-
-    expect(EventPluginRegistry.plugins.length).toBe(3);
-    expect(EventPluginRegistry.plugins[0]).toBe(OnePlugin);
-    expect(EventPluginRegistry.plugins[1]).toBe(TwoPlugin);
-    expect(EventPluginRegistry.plugins[2]).toBe(ThreePlugin);
-  });
-
-  it('should throw if plugin does not implement `extractEvents`', function() {
-    var BadPlugin = {};
-
-    EventPluginRegistry.injectEventPluginOrder(['bad']);
-
-    expect(function() {
-      EventPluginRegistry.injectEventPluginsByName({
-        bad: BadPlugin
-      });
-    }).toThrow(
-      'Invariant Violation: EventPluginRegistry: Event plugins must ' +
-      'implement an `extractEvents` method, but `bad` does not.'
-    );
-  });
-
-  it('should throw if plugin does not exist in ordering', function() {
-    var OnePlugin = createPlugin();
-    var RandomPlugin = createPlugin();
-
-    EventPluginRegistry.injectEventPluginOrder(['one']);
-
-    expect(function() {
-      EventPluginRegistry.injectEventPluginsByName({
-        one: OnePlugin,
-        random: RandomPlugin
-      });
-    }).toThrow(
-      'Invariant Violation: EventPluginRegistry: Cannot inject event plugins ' +
-      'that do not exist in the plugin ordering, `random`.'
-    );
-  });
-
-  it('should throw if ordering is injected more than once', function() {
-    var pluginOrdering = [];
-
-    EventPluginRegistry.injectEventPluginOrder(pluginOrdering);
-
-    expect(function() {
-      EventPluginRegistry.injectEventPluginOrder(pluginOrdering);
-    }).toThrow(
-      'Invariant Violation: EventPluginRegistry: Cannot inject event plugin ' +
-      'ordering more than once. You are likely trying to load more than one ' +
-      'copy of React.'
-    );
-  });
-
-  it('should throw if different plugins injected using same name', function() {
-    var OnePlugin = createPlugin();
-    var TwoPlugin = createPlugin();
-
-    EventPluginRegistry.injectEventPluginsByName({same: OnePlugin});
-
-    expect(function() {
-      EventPluginRegistry.injectEventPluginsByName({same: TwoPlugin});
-    }).toThrow(
-      'Invariant Violation: EventPluginRegistry: Cannot inject two different ' +
-      'event plugins using the same name, `same`.'
-    );
-  });
-
-  it('should publish registration names of injected plugins', function() {
-    var OnePlugin = createPlugin({
-      eventTypes: {
-        click: {registrationName: 'onClick'},
-        focus: {registrationName: 'onFocus'}
-      }
-    });
-    var TwoPlugin = createPlugin({
-      eventTypes: {
-        magic: {
-          phasedRegistrationNames: {
-            bubbled: 'onMagicBubble',
-            captured: 'onMagicCapture'
-          }
-        }
-      }
-    });
-
-    EventPluginRegistry.injectEventPluginsByName({one: OnePlugin});
-    EventPluginRegistry.injectEventPluginOrder(['one', 'two']);
-
-    expect(Object.keys(EventPluginRegistry.registrationNameModules).length).toBe(2);
-    expect(EventPluginRegistry.registrationNameModules.onClick).toBe(OnePlugin);
-    expect(EventPluginRegistry.registrationNameModules.onFocus).toBe(OnePlugin);
-
-    EventPluginRegistry.injectEventPluginsByName({two: TwoPlugin});
-
-    expect(Object.keys(EventPluginRegistry.registrationNameModules).length).toBe(4);
-    expect(EventPluginRegistry.registrationNameModules.onMagicBubble).toBe(TwoPlugin);
-    expect(
-      EventPluginRegistry.registrationNameModules.onMagicCapture
-    ).toBe(TwoPlugin);
-  });
-
-  it('should throw if multiple registration names collide', function() {
-    var OnePlugin = createPlugin({
-      eventTypes: {
-        photoCapture: {registrationName: 'onPhotoCapture'}
-      }
-    });
-    var TwoPlugin = createPlugin({
-      eventTypes: {
-        photo: {
-          phasedRegistrationNames: {
-            bubbled: 'onPhotoBubble',
-            captured: 'onPhotoCapture'
-          }
-        }
-      }
-    });
-
-    EventPluginRegistry.injectEventPluginsByName({
-      one: OnePlugin,
-      two: TwoPlugin
-    });
-
-    expect(function() {
-      EventPluginRegistry.injectEventPluginOrder(['one', 'two']);
-    }).toThrow(
-      'Invariant Violation: EventPluginHub: More than one plugin attempted ' +
-      'to publish the same registration name, `onPhotoCapture`.'
-    );
-  });
-
-  it('should throw if an invalid event is published', function() {
-    var OnePlugin = createPlugin({
-      eventTypes: {
-        badEvent: {/* missing configuration */}
-      }
-    });
-
-    EventPluginRegistry.injectEventPluginsByName({one: OnePlugin});
-
-    expect(function() {
-      EventPluginRegistry.injectEventPluginOrder(['one']);
-    }).toThrow(
-      'Invariant Violation: EventPluginRegistry: Failed to publish event ' +
-      '`badEvent` for plugin `one`.'
-    );
-  });
-
-  it('should be able to get the plugin from synthetic events', function() {
-    var clickDispatchConfig = {
-      registrationName: 'onClick'
-    };
-    var magicDispatchConfig = {
-      phasedRegistrationNames: {
-        bubbled: 'onMagicBubble',
-        captured: 'onMagicCapture'
-      }
-    };
-
-    var OnePlugin = createPlugin({
-      eventTypes: {
-        click: clickDispatchConfig,
-        magic: magicDispatchConfig
-      }
-    });
-
-    var clickEvent = {dispatchConfig: clickDispatchConfig};
-    var magicEvent = {dispatchConfig: magicDispatchConfig};
-
-    expect(EventPluginRegistry.getPluginModuleForEvent(clickEvent)).toBe(null);
-    expect(EventPluginRegistry.getPluginModuleForEvent(magicEvent)).toBe(null);
-
-    EventPluginRegistry.injectEventPluginsByName({one: OnePlugin});
-    EventPluginRegistry.injectEventPluginOrder(['one']);
-
-    expect(
-      EventPluginRegistry.getPluginModuleForEvent(clickEvent)
-    ).toBe(OnePlugin);
-    expect(
-      EventPluginRegistry.getPluginModuleForEvent(magicEvent)
-    ).toBe(OnePlugin);
-  });
-
-});
diff --git a/src/package.json b/src/package.json
deleted file mode 100644
index 16e69974f4d..00000000000
--- a/src/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "react",
-  "jstest": {
-    "useAutoMock": false
-  }
-}
diff --git a/src/test/ReactDefaultPerf.js b/src/test/ReactDefaultPerf.js
deleted file mode 100644
index e0a293c9cbf..00000000000
--- a/src/test/ReactDefaultPerf.js
+++ /dev/null
@@ -1,261 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDefaultPerf
- * @typechecks static-only
- */
-
-"use strict";
-
-var DOMProperty = require('DOMProperty');
-var ReactDefaultPerfAnalysis = require('ReactDefaultPerfAnalysis');
-var ReactMount = require('ReactMount');
-var ReactPerf = require('ReactPerf');
-
-var performanceNow = require('performanceNow');
-
-function roundFloat(val) {
-  return Math.floor(val * 100) / 100;
-}
-
-function addValue(obj, key, val) {
-  obj[key] = (obj[key] || 0) + val;
-}
-
-var ReactDefaultPerf = {
-  _allMeasurements: [], // last item in the list is the current one
-  _mountStack: [0],
-  _injected: false,
-
-  start: function() {
-    if (!ReactDefaultPerf._injected) {
-      ReactPerf.injection.injectMeasure(ReactDefaultPerf.measure);
-    }
-
-    ReactDefaultPerf._allMeasurements.length = 0;
-    ReactPerf.enableMeasure = true;
-  },
-
-  stop: function() {
-    ReactPerf.enableMeasure = false;
-  },
-
-  getLastMeasurements: function() {
-    return ReactDefaultPerf._allMeasurements;
-  },
-
-  printExclusive: function(measurements) {
-    measurements = measurements || ReactDefaultPerf._allMeasurements;
-    var summary = ReactDefaultPerfAnalysis.getExclusiveSummary(measurements);
-    console.table(summary.map(function(item) {
-      return {
-        'Component class name': item.componentName,
-        'Total inclusive time (ms)': roundFloat(item.inclusive),
-        'Exclusive mount time (ms)': roundFloat(item.exclusive),
-        'Exclusive render time (ms)': roundFloat(item.render),
-        'Mount time per instance (ms)': roundFloat(item.exclusive / item.count),
-        'Render time per instance (ms)': roundFloat(item.render / item.count),
-        'Instances': item.count
-      };
-    }));
-    // TODO: ReactDefaultPerfAnalysis.getTotalTime() does not return the correct
-    // number.
-  },
-
-  printInclusive: function(measurements) {
-    measurements = measurements || ReactDefaultPerf._allMeasurements;
-    var summary = ReactDefaultPerfAnalysis.getInclusiveSummary(measurements);
-    console.table(summary.map(function(item) {
-      return {
-        'Owner > component': item.componentName,
-        'Inclusive time (ms)': roundFloat(item.time),
-        'Instances': item.count
-      };
-    }));
-    console.log(
-      'Total time:',
-      ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms'
-    );
-  },
-
-  printWasted: function(measurements) {
-    measurements = measurements || ReactDefaultPerf._allMeasurements;
-    var summary = ReactDefaultPerfAnalysis.getInclusiveSummary(
-      measurements,
-      true
-    );
-    console.table(summary.map(function(item) {
-      return {
-        'Owner > component': item.componentName,
-        'Wasted time (ms)': item.time,
-        'Instances': item.count
-      };
-    }));
-    console.log(
-      'Total time:',
-      ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms'
-    );
-  },
-
-  printDOM: function(measurements) {
-    measurements = measurements || ReactDefaultPerf._allMeasurements;
-    var summary = ReactDefaultPerfAnalysis.getDOMSummary(measurements);
-    console.table(summary.map(function(item) {
-      var result = {};
-      result[DOMProperty.ID_ATTRIBUTE_NAME] = item.id;
-      result['type'] = item.type;
-      result['args'] = JSON.stringify(item.args);
-      return result;
-    }));
-    console.log(
-      'Total time:',
-      ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms'
-    );
-  },
-
-  _recordWrite: function(id, fnName, totalTime, args) {
-    // TODO: totalTime isn't that useful since it doesn't count paints/reflows
-    var writes =
-      ReactDefaultPerf
-        ._allMeasurements[ReactDefaultPerf._allMeasurements.length - 1]
-        .writes;
-    writes[id] = writes[id] || [];
-    writes[id].push({
-      type: fnName,
-      time: totalTime,
-      args: args
-    });
-  },
-
-  measure: function(moduleName, fnName, func) {
-    return function(...args) {
-      var totalTime;
-      var rv;
-      var start;
-
-      if (fnName === '_renderNewRootComponent' ||
-          fnName === 'flushBatchedUpdates') {
-        // A "measurement" is a set of metrics recorded for each flush. We want
-        // to group the metrics for a given flush together so we can look at the
-        // components that rendered and the DOM operations that actually
-        // happened to determine the amount of "wasted work" performed.
-        ReactDefaultPerf._allMeasurements.push({
-          exclusive: {},
-          inclusive: {},
-          render: {},
-          counts: {},
-          writes: {},
-          displayNames: {},
-          totalTime: 0
-        });
-        start = performanceNow();
-        rv = func.apply(this, args);
-        ReactDefaultPerf._allMeasurements[
-          ReactDefaultPerf._allMeasurements.length - 1
-        ].totalTime = performanceNow() - start;
-        return rv;
-      } else if (moduleName === 'ReactDOMIDOperations' ||
-        moduleName === 'ReactComponentBrowserEnvironment') {
-        start = performanceNow();
-        rv = func.apply(this, args);
-        totalTime = performanceNow() - start;
-
-        if (fnName === 'mountImageIntoNode') {
-          var mountID = ReactMount.getID(args[1]);
-          ReactDefaultPerf._recordWrite(mountID, fnName, totalTime, args[0]);
-        } else if (fnName === 'dangerouslyProcessChildrenUpdates') {
-          // special format
-          args[0].forEach(function(update) {
-            var writeArgs = {};
-            if (update.fromIndex !== null) {
-              writeArgs.fromIndex = update.fromIndex;
-            }
-            if (update.toIndex !== null) {
-              writeArgs.toIndex = update.toIndex;
-            }
-            if (update.textContent !== null) {
-              writeArgs.textContent = update.textContent;
-            }
-            if (update.markupIndex !== null) {
-              writeArgs.markup = args[1][update.markupIndex];
-            }
-            ReactDefaultPerf._recordWrite(
-              update.parentID,
-              update.type,
-              totalTime,
-              writeArgs
-            );
-          });
-        } else {
-          // basic format
-          ReactDefaultPerf._recordWrite(
-            args[0],
-            fnName,
-            totalTime,
-            Array.prototype.slice.call(args, 1)
-          );
-        }
-        return rv;
-      } else if (moduleName === 'ReactCompositeComponent' && (
-        fnName === 'mountComponent' ||
-        fnName === 'updateComponent' || // TODO: receiveComponent()?
-        fnName === '_renderValidatedComponent')) {
-
-        var rootNodeID = fnName === 'mountComponent' ?
-          args[0] :
-          this._rootNodeID;
-        var isRender = fnName === '_renderValidatedComponent';
-        var isMount = fnName === 'mountComponent';
-
-        var mountStack = ReactDefaultPerf._mountStack;
-        var entry = ReactDefaultPerf._allMeasurements[
-          ReactDefaultPerf._allMeasurements.length - 1
-        ];
-
-        if (isRender) {
-          addValue(entry.counts, rootNodeID, 1);
-        } else if (isMount) {
-          mountStack.push(0);
-        }
-
-        start = performanceNow();
-        rv = func.apply(this, args);
-        totalTime = performanceNow() - start;
-
-        if (isRender) {
-          addValue(entry.render, rootNodeID, totalTime);
-        } else if (isMount) {
-          var subMountTime = mountStack.pop();
-          mountStack[mountStack.length - 1] += totalTime;
-          addValue(entry.exclusive, rootNodeID, totalTime - subMountTime);
-          addValue(entry.inclusive, rootNodeID, totalTime);
-        } else {
-          addValue(entry.inclusive, rootNodeID, totalTime);
-        }
-
-        entry.displayNames[rootNodeID] = {
-          current: this.constructor.displayName,
-          owner: this._owner ? this._owner.constructor.displayName : '<root>'
-        };
-
-        return rv;
-      } else {
-        return func.apply(this, args);
-      }
-    };
-  }
-};
-
-module.exports = ReactDefaultPerf;
diff --git a/src/test/ReactDefaultPerfAnalysis.js b/src/test/ReactDefaultPerfAnalysis.js
deleted file mode 100644
index e497abc9908..00000000000
--- a/src/test/ReactDefaultPerfAnalysis.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDefaultPerfAnalysis
- */
-
-var merge = require('merge');
-
-// Don't try to save users less than 1.2ms (a number I made up)
-var DONT_CARE_THRESHOLD = 1.2;
-var DOM_OPERATION_TYPES = {
-  'mountImageIntoNode': 'set innerHTML',
-  INSERT_MARKUP: 'set innerHTML',
-  MOVE_EXISTING: 'move',
-  REMOVE_NODE: 'remove',
-  TEXT_CONTENT: 'set textContent',
-  'updatePropertyByID': 'update attribute',
-  'deletePropertyByID': 'delete attribute',
-  'updateStylesByID': 'update styles',
-  'updateInnerHTMLByID': 'set innerHTML',
-  'dangerouslyReplaceNodeWithMarkupByID': 'replace'
-};
-
-function getTotalTime(measurements) {
-  // TODO: return number of DOM ops? could be misleading.
-  // TODO: measure dropped frames after reconcile?
-  // TODO: log total time of each reconcile and the top-level component
-  // class that triggered it.
-  var totalTime = 0;
-  for (var i = 0; i < measurements.length; i++) {
-    var measurement = measurements[i];
-    totalTime += measurement.totalTime;
-  }
-  return totalTime;
-}
-
-function getDOMSummary(measurements) {
-  var items = [];
-  for (var i = 0; i < measurements.length; i++) {
-    var measurement = measurements[i];
-    var id;
-
-    for (id in measurement.writes) {
-      measurement.writes[id].forEach(function(write) {
-        items.push({
-          id: id,
-          type: DOM_OPERATION_TYPES[write.type] || write.type,
-          args: write.args
-        });
-      });
-    }
-  }
-  return items;
-}
-
-function getExclusiveSummary(measurements) {
-  var candidates = {};
-  var displayName;
-
-  for (var i = 0; i < measurements.length; i++) {
-    var measurement = measurements[i];
-    var allIDs = merge(measurement.exclusive, measurement.inclusive);
-
-    for (var id in allIDs) {
-      displayName = measurement.displayNames[id].current;
-
-      candidates[displayName] = candidates[displayName] || {
-        componentName: displayName,
-        inclusive: 0,
-        exclusive: 0,
-        render: 0,
-        count: 0
-      };
-      if (measurement.render[id]) {
-        candidates[displayName].render += measurement.render[id];
-      }
-      if (measurement.exclusive[id]) {
-        candidates[displayName].exclusive += measurement.exclusive[id];
-      }
-      if (measurement.inclusive[id]) {
-        candidates[displayName].inclusive += measurement.inclusive[id];
-      }
-      if (measurement.counts[id]) {
-        candidates[displayName].count += measurement.counts[id];
-      }
-    }
-  }
-
-  // Now make a sorted array with the results.
-  var arr = [];
-  for (displayName in candidates) {
-    if (candidates[displayName].exclusive >= DONT_CARE_THRESHOLD) {
-      arr.push(candidates[displayName]);
-    }
-  }
-
-  arr.sort(function(a, b) {
-    return b.exclusive - a.exclusive;
-  });
-
-  return arr;
-}
-
-function getInclusiveSummary(measurements, onlyClean) {
-  var candidates = {};
-  var inclusiveKey;
-
-  for (var i = 0; i < measurements.length; i++) {
-    var measurement = measurements[i];
-    var allIDs = merge(measurement.exclusive, measurement.inclusive);
-    var cleanComponents;
-
-    if (onlyClean) {
-      cleanComponents = getUnchangedComponents(measurement);
-    }
-
-    for (var id in allIDs) {
-      if (onlyClean && !cleanComponents[id]) {
-        continue;
-      }
-
-      var displayName = measurement.displayNames[id];
-
-      // Inclusive time is not useful for many components without knowing where
-      // they are instantiated. So we aggregate inclusive time with both the
-      // owner and current displayName as the key.
-      inclusiveKey = displayName.owner + ' > ' + displayName.current;
-
-      candidates[inclusiveKey] = candidates[inclusiveKey] || {
-        componentName: inclusiveKey,
-        time: 0,
-        count: 0
-      };
-
-      if (measurement.inclusive[id]) {
-        candidates[inclusiveKey].time += measurement.inclusive[id];
-      }
-      if (measurement.counts[id]) {
-        candidates[inclusiveKey].count += measurement.counts[id];
-      }
-    }
-  }
-
-  // Now make a sorted array with the results.
-  var arr = [];
-  for (inclusiveKey in candidates) {
-    if (candidates[inclusiveKey].time >= DONT_CARE_THRESHOLD) {
-      arr.push(candidates[inclusiveKey]);
-    }
-  }
-
-  arr.sort(function(a, b) {
-    return b.time - a.time;
-  });
-
-  return arr;
-}
-
-function getUnchangedComponents(measurement) {
-  // For a given reconcile, look at which components did not actually
-  // render anything to the DOM and return a mapping of their ID to
-  // the amount of time it took to render the entire subtree.
-  var cleanComponents = {};
-  var dirtyLeafIDs = Object.keys(measurement.writes);
-  var allIDs = merge(measurement.exclusive, measurement.inclusive);
-
-  for (var id in allIDs) {
-    var isDirty = false;
-    // For each component that rendered, see if a component that triggerd
-    // a DOM op is in its subtree.
-    for (var i = 0; i < dirtyLeafIDs.length; i++) {
-      if (dirtyLeafIDs[i].indexOf(id) === 0) {
-        isDirty = true;
-        break;
-      }
-    }
-    if (!isDirty && measurement.counts[id] > 0) {
-      cleanComponents[id] = true;
-    }
-  }
-  return cleanComponents;
-}
-
-var ReactDefaultPerfAnalysis = {
-  getExclusiveSummary: getExclusiveSummary,
-  getInclusiveSummary: getInclusiveSummary,
-  getDOMSummary: getDOMSummary,
-  getTotalTime: getTotalTime
-};
-
-module.exports = ReactDefaultPerfAnalysis;
diff --git a/src/test/ReactPerf.js b/src/test/ReactPerf.js
deleted file mode 100644
index e7fdfb30192..00000000000
--- a/src/test/ReactPerf.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactPerf
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * ReactPerf is a general AOP system designed to measure performance. This
- * module only has the hooks: see ReactDefaultPerf for the analysis tool.
- */
-var ReactPerf = {
-  /**
-   * Boolean to enable/disable measurement. Set to false by default to prevent
-   * accidental logging and perf loss.
-   */
-  enableMeasure: false,
-
-  /**
-   * Holds onto the measure function in use. By default, don't measure
-   * anything, but we'll override this if we inject a measure function.
-   */
-  storedMeasure: _noMeasure,
-
-  /**
-   * Use this to wrap methods you want to measure. Zero overhead in production.
-   *
-   * @param {string} objName
-   * @param {string} fnName
-   * @param {function} func
-   * @return {function}
-   */
-  measure: function(objName, fnName, func) {
-    if (__DEV__) {
-      var measuredFunc = null;
-      return function() {
-        if (ReactPerf.enableMeasure) {
-          if (!measuredFunc) {
-            measuredFunc = ReactPerf.storedMeasure(objName, fnName, func);
-          }
-          return measuredFunc.apply(this, arguments);
-        }
-        return func.apply(this, arguments);
-      };
-    }
-    return func;
-  },
-
-  injection: {
-    /**
-     * @param {function} measure
-     */
-    injectMeasure: function(measure) {
-      ReactPerf.storedMeasure = measure;
-    }
-  }
-};
-
-/**
- * Simply passes through the measured function, without measuring it.
- *
- * @param {string} objName
- * @param {string} fnName
- * @param {function} func
- * @return {function}
- */
-function _noMeasure(objName, fnName, func) {
-  return func;
-}
-
-module.exports = ReactPerf;
diff --git a/src/test/ReactTestUtils.js b/src/test/ReactTestUtils.js
deleted file mode 100644
index d56ad26b31f..00000000000
--- a/src/test/ReactTestUtils.js
+++ /dev/null
@@ -1,413 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactTestUtils
- */
-
-"use strict";
-
-var EventConstants = require('EventConstants');
-var EventPluginHub = require('EventPluginHub');
-var EventPropagators = require('EventPropagators');
-var React = require('React');
-var ReactDescriptor = require('ReactDescriptor');
-var ReactDOM = require('ReactDOM');
-var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
-var ReactMount = require('ReactMount');
-var ReactTextComponent = require('ReactTextComponent');
-var ReactUpdates = require('ReactUpdates');
-var SyntheticEvent = require('SyntheticEvent');
-
-var mergeInto = require('mergeInto');
-var copyProperties = require('copyProperties');
-
-var topLevelTypes = EventConstants.topLevelTypes;
-
-function Event(suffix) {}
-
-/**
- * @class ReactTestUtils
- */
-
-/**
- * Todo: Support the entire DOM.scry query syntax. For now, these simple
- * utilities will suffice for testing purposes.
- * @lends ReactTestUtils
- */
-var ReactTestUtils = {
-  renderIntoDocument: function(instance) {
-    var div = document.createElement('div');
-    // None of our tests actually require attaching the container to the
-    // DOM, and doing so creates a mess that we rely on test isolation to
-    // clean up, so we're going to stop honoring the name of this method
-    // (and probably rename it eventually) if no problems arise.
-    // document.documentElement.appendChild(div);
-    return React.renderComponent(instance, div);
-  },
-
-  isDescriptor: function(descriptor) {
-    return ReactDescriptor.isValidDescriptor(descriptor);
-  },
-
-  isDescriptorOfType: function(inst, convenienceConstructor) {
-    return (
-      ReactDescriptor.isValidDescriptor(inst) &&
-      inst.type === convenienceConstructor.type
-    );
-  },
-
-  isDOMComponent: function(inst) {
-    return !!(inst && inst.mountComponent && inst.tagName);
-  },
-
-  isDOMComponentDescriptor: function(inst) {
-    return !!(inst &&
-              ReactDescriptor.isValidDescriptor(inst) &&
-              !!inst.tagName);
-  },
-
-  isCompositeComponent: function(inst) {
-    return typeof inst.render === 'function' &&
-           typeof inst.setState === 'function';
-  },
-
-  isCompositeComponentWithType: function(inst, type) {
-    return !!(ReactTestUtils.isCompositeComponent(inst) &&
-             (inst.constructor === type.type));
-  },
-
-  isCompositeComponentDescriptor: function(inst) {
-    if (!ReactDescriptor.isValidDescriptor(inst)) {
-      return false;
-    }
-    // We check the prototype of the type that will get mounted, not the
-    // instance itself. This is a future proof way of duck typing.
-    var prototype = inst.type.prototype;
-    return (
-      typeof prototype.render === 'function' &&
-      typeof prototype.setState === 'function'
-    );
-  },
-
-  isCompositeComponentDescriptorWithType: function(inst, type) {
-    return !!(ReactTestUtils.isCompositeComponentDescriptor(inst) &&
-             (inst.constructor === type));
-  },
-
-  isTextComponent: function(inst) {
-    return inst instanceof ReactTextComponent.type;
-  },
-
-  findAllInRenderedTree: function(inst, test) {
-    if (!inst) {
-      return [];
-    }
-    var ret = test(inst) ? [inst] : [];
-    if (ReactTestUtils.isDOMComponent(inst)) {
-      var renderedChildren = inst._renderedChildren;
-      var key;
-      for (key in renderedChildren) {
-        if (!renderedChildren.hasOwnProperty(key)) {
-          continue;
-        }
-        ret = ret.concat(
-          ReactTestUtils.findAllInRenderedTree(renderedChildren[key], test)
-        );
-      }
-    } else if (ReactTestUtils.isCompositeComponent(inst)) {
-      ret = ret.concat(
-        ReactTestUtils.findAllInRenderedTree(inst._renderedComponent, test)
-      );
-    }
-    return ret;
-  },
-
-  /**
-   * Finds all instance of components in the rendered tree that are DOM
-   * components with the class name matching `className`.
-   * @return an array of all the matches.
-   */
-  scryRenderedDOMComponentsWithClass: function(root, className) {
-    return ReactTestUtils.findAllInRenderedTree(root, function(inst) {
-      var instClassName = inst.props.className;
-      return ReactTestUtils.isDOMComponent(inst) && (
-        instClassName &&
-        (' ' + instClassName + ' ').indexOf(' ' + className + ' ') !== -1
-      );
-    });
-  },
-
-  /**
-   * Like scryRenderedDOMComponentsWithClass but expects there to be one result,
-   * and returns that one result, or throws exception if there is any other
-   * number of matches besides one.
-   * @return {!ReactDOMComponent} The one match.
-   */
-  findRenderedDOMComponentWithClass: function(root, className) {
-    var all =
-      ReactTestUtils.scryRenderedDOMComponentsWithClass(root, className);
-    if (all.length !== 1) {
-      throw new Error('Did not find exactly one match for class:' + className);
-    }
-    return all[0];
-  },
-
-
-  /**
-   * Finds all instance of components in the rendered tree that are DOM
-   * components with the tag name matching `tagName`.
-   * @return an array of all the matches.
-   */
-  scryRenderedDOMComponentsWithTag: function(root, tagName) {
-    return ReactTestUtils.findAllInRenderedTree(root, function(inst) {
-      return ReactTestUtils.isDOMComponent(inst) &&
-            inst.tagName === tagName.toUpperCase();
-    });
-  },
-
-  /**
-   * Like scryRenderedDOMComponentsWithTag but expects there to be one result,
-   * and returns that one result, or throws exception if there is any other
-   * number of matches besides one.
-   * @return {!ReactDOMComponent} The one match.
-   */
-  findRenderedDOMComponentWithTag: function(root, tagName) {
-    var all = ReactTestUtils.scryRenderedDOMComponentsWithTag(root, tagName);
-    if (all.length !== 1) {
-      throw new Error('Did not find exactly one match for tag:' + tagName);
-    }
-    return all[0];
-  },
-
-
-  /**
-   * Finds all instances of components with type equal to `componentType`.
-   * @return an array of all the matches.
-   */
-  scryRenderedComponentsWithType: function(root, componentType) {
-    return ReactTestUtils.findAllInRenderedTree(root, function(inst) {
-      return ReactTestUtils.isCompositeComponentWithType(
-        inst,
-        componentType
-      );
-    });
-  },
-
-  /**
-   * Same as `scryRenderedComponentsWithType` but expects there to be one result
-   * and returns that one result, or throws exception if there is any other
-   * number of matches besides one.
-   * @return {!ReactComponent} The one match.
-   */
-  findRenderedComponentWithType: function(root, componentType) {
-    var all = ReactTestUtils.scryRenderedComponentsWithType(
-      root,
-      componentType
-    );
-    if (all.length !== 1) {
-      throw new Error(
-        'Did not find exactly one match for componentType:' + componentType
-      );
-    }
-    return all[0];
-  },
-
-  /**
-   * Pass a mocked component module to this method to augment it with
-   * useful methods that allow it to be used as a dummy React component.
-   * Instead of rendering as usual, the component will become a simple
-   * <div> containing any provided children.
-   *
-   * @param {object} module the mock function object exported from a
-   *                        module that defines the component to be mocked
-   * @param {?string} mockTagName optional dummy root tag name to return
-   *                              from render method (overrides
-   *                              module.mockTagName if provided)
-   * @return {object} the ReactTestUtils object (for chaining)
-   */
-  mockComponent: function(module, mockTagName) {
-    mockTagName = mockTagName || module.mockTagName || "div";
-
-    var ConvenienceConstructor = React.createClass({
-      render: function() {
-        return ReactDOM[mockTagName](null, this.props.children);
-      }
-    });
-
-    copyProperties(module, ConvenienceConstructor);
-    module.mockImplementation(ConvenienceConstructor);
-
-    return this;
-  },
-
-  /**
-   * Simulates a top level event being dispatched from a raw event that occured
-   * on an `Element` node.
-   * @param topLevelType {Object} A type from `EventConstants.topLevelTypes`
-   * @param {!Element} node The dom to simulate an event occurring on.
-   * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
-   */
-  simulateNativeEventOnNode: function(topLevelType, node, fakeNativeEvent) {
-    fakeNativeEvent.target = node;
-    ReactBrowserEventEmitter.ReactEventListener.dispatchEvent(
-      topLevelType,
-      fakeNativeEvent
-    );
-  },
-
-  /**
-   * Simulates a top level event being dispatched from a raw event that occured
-   * on the `ReactDOMComponent` `comp`.
-   * @param topLevelType {Object} A type from `EventConstants.topLevelTypes`.
-   * @param comp {!ReactDOMComponent}
-   * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
-   */
-  simulateNativeEventOnDOMComponent: function(
-      topLevelType,
-      comp,
-      fakeNativeEvent) {
-    ReactTestUtils.simulateNativeEventOnNode(
-      topLevelType,
-      comp.getDOMNode(),
-      fakeNativeEvent
-    );
-  },
-
-  nativeTouchData: function(x, y) {
-    return {
-      touches: [
-        {pageX: x, pageY: y}
-      ]
-    };
-  },
-
-  Simulate: null,
-  SimulateNative: {}
-};
-
-/**
- * Exports:
- *
- * - `ReactTestUtils.Simulate.click(Element/ReactDOMComponent)`
- * - `ReactTestUtils.Simulate.mouseMove(Element/ReactDOMComponent)`
- * - `ReactTestUtils.Simulate.change(Element/ReactDOMComponent)`
- * - ... (All keys from event plugin `eventTypes` objects)
- */
-function makeSimulator(eventType) {
-  return function(domComponentOrNode, eventData) {
-    var node;
-    if (ReactTestUtils.isDOMComponent(domComponentOrNode)) {
-      node = domComponentOrNode.getDOMNode();
-    } else if (domComponentOrNode.tagName) {
-      node = domComponentOrNode;
-    }
-
-    var fakeNativeEvent = new Event();
-    fakeNativeEvent.target = node;
-    // We don't use SyntheticEvent.getPooled in order to not have to worry about
-    // properly destroying any properties assigned from `eventData` upon release
-    var event = new SyntheticEvent(
-      ReactBrowserEventEmitter.eventNameDispatchConfigs[eventType],
-      ReactMount.getID(node),
-      fakeNativeEvent
-    );
-    mergeInto(event, eventData);
-    EventPropagators.accumulateTwoPhaseDispatches(event);
-
-    ReactUpdates.batchedUpdates(function() {
-      EventPluginHub.enqueueEvents(event);
-      EventPluginHub.processEventQueue();
-    });
-  };
-}
-
-function buildSimulators() {
-  ReactTestUtils.Simulate = {};
-
-  var eventType;
-  for (eventType in ReactBrowserEventEmitter.eventNameDispatchConfigs) {
-    /**
-     * @param {!Element || ReactDOMComponent} domComponentOrNode
-     * @param {?object} eventData Fake event data to use in SyntheticEvent.
-     */
-    ReactTestUtils.Simulate[eventType] = makeSimulator(eventType);
-  }
-}
-
-// Rebuild ReactTestUtils.Simulate whenever event plugins are injected
-var oldInjectEventPluginOrder = EventPluginHub.injection.injectEventPluginOrder;
-EventPluginHub.injection.injectEventPluginOrder = function() {
-  oldInjectEventPluginOrder.apply(this, arguments);
-  buildSimulators();
-};
-var oldInjectEventPlugins = EventPluginHub.injection.injectEventPluginsByName;
-EventPluginHub.injection.injectEventPluginsByName = function() {
-  oldInjectEventPlugins.apply(this, arguments);
-  buildSimulators();
-};
-
-buildSimulators();
-
-/**
- * Exports:
- *
- * - `ReactTestUtils.SimulateNative.click(Element/ReactDOMComponent)`
- * - `ReactTestUtils.SimulateNative.mouseMove(Element/ReactDOMComponent)`
- * - `ReactTestUtils.SimulateNative.mouseIn/ReactDOMComponent)`
- * - `ReactTestUtils.SimulateNative.mouseOut(Element/ReactDOMComponent)`
- * - ... (All keys from `EventConstants.topLevelTypes`)
- *
- * Note: Top level event types are a subset of the entire set of handler types
- * (which include a broader set of "synthetic" events). For example, onDragDone
- * is a synthetic event. Except when testing an event plugin or React's event
- * handling code specifically, you probably want to use ReactTestUtils.Simulate
- * to dispatch synthetic events.
- */
-
-function makeNativeSimulator(eventType) {
-  return function(domComponentOrNode, nativeEventData) {
-    var fakeNativeEvent = new Event(eventType);
-    mergeInto(fakeNativeEvent, nativeEventData);
-    if (ReactTestUtils.isDOMComponent(domComponentOrNode)) {
-      ReactTestUtils.simulateNativeEventOnDOMComponent(
-        eventType,
-        domComponentOrNode,
-        fakeNativeEvent
-      );
-    } else if (!!domComponentOrNode.tagName) {
-      // Will allow on actual dom nodes.
-      ReactTestUtils.simulateNativeEventOnNode(
-        eventType,
-        domComponentOrNode,
-        fakeNativeEvent
-      );
-    }
-  };
-}
-
-var eventType;
-for (eventType in topLevelTypes) {
-  // Event type is stored as 'topClick' - we transform that to 'click'
-  var convenienceName = eventType.indexOf('top') === 0 ?
-    eventType.charAt(3).toLowerCase() + eventType.substr(4) : eventType;
-  /**
-   * @param {!Element || ReactDOMComponent} domComponentOrNode
-   * @param {?Event} nativeEventData Fake native event to use in SyntheticEvent.
-   */
-  ReactTestUtils.SimulateNative[convenienceName] =
-    makeNativeSimulator(eventType);
-}
-
-module.exports = ReactTestUtils;
diff --git a/src/test/all.js b/src/test/all.js
deleted file mode 100644
index 1d0b9f5c286..00000000000
--- a/src/test/all.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// This file exists both to give a single entry point for all the utility
-// modules in src/test and to specify an ordering on those modules, since
-// some still have implicit dependencies on others.
-
-require("./phantomjs-shims");
-require("ReactTestUtils");
-require("reactComponentExpect");
-require("mocks");
-require("mock-modules");
-require("./mock-timers");
-
-exports.enableTest = function(testID) {
-  describe(testID, function() {
-    beforeEach(function() {
-      require("mock-modules").setMockMap(mockMap);
-    });
-
-    require("mock-modules").clearMockMap();
-    require("../" + testID);
-    var mockMap = require("mock-modules").getMockMap();
-  });
-};
-
-exports.removeNextSiblings = function(node) {
-  var parent = node && node.parentNode;
-  if (parent) {
-    while (node.nextSibling) {
-      parent.removeChild(node.nextSibling);
-    }
-  }
-};
diff --git a/src/test/createHierarchyRenderer.js b/src/test/createHierarchyRenderer.js
deleted file mode 100644
index bb89050d33f..00000000000
--- a/src/test/createHierarchyRenderer.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule createHierarchyRenderer
- */
-
-var React = require('React');
-
-/**
- * Creates a render method that makes it easier to create, render, and inspect a
- * hierarchy of mock React component classes.
- *
- * A component class is created for each of the supplied render methods. Each
- * render method is invoked with the classes created using the render methods
- * that come after it in the supplied list of render methods.
- *
- *   var renderHierarchy = createHierarchyRenderer(
- *     function ComponentA(ComponentB, ComponentC) {...},
- *     function ComponentB(ComponentC) {...},
- *     function ComponentC() {...}
- *   );
- *
- * When the hierarchy is invoked, a two-dimensional array is returned. Each
- * array corresponds to a supplied render method and contains the instances
- * returned by that render method in the order it was invoked.
- *
- *   var instances = renderHierarchy(
- *     function(ComponentA[, ComponentB, ComponentC]) {
- *       React.renderComponent(<ComponentA />, ...);
- *     })
- *   );
- *   instances[0][0]; // First return value of first render method.
- *   instances[1][0]; // First return value of second render method.
- *   instances[1][1]; // Second return value of second render method.
- *
- * Refs should be used to reference components that are not the return value of
- * render methods.
- *
- *   expect(instances[0][0].refs.X).toBe(...);
- *
- * NOTE: The component classes created for each render method are re-used for
- * each invocation of the hierarchy renderer. If new classes are needed, you
- * should re-execute `createHierarchyRenderer` with the same arguments.
- *
- * @param {array<function>} ...renderMethods
- * @return {function}
- */
-function createHierarchyRenderer(...renderMethods) {
-  var instances;
-  var Components = renderMethods.reduceRight(
-    function(Components, renderMethod, depth) {
-      var Component = React.createClass({
-        displayName: renderMethod.name,
-        render: function() {
-          instances[depth].push(this);
-          return renderMethod.apply(this, Components);
-        }
-      });
-      return [Component].concat(Components);
-    },
-    []
-  );
-  /**
-   * @param {function} renderComponent
-   * @return {array<array<*>>}
-   */
-  function renderHierarchy(renderComponent) {
-    instances = renderMethods.map(() => []);
-    renderComponent.apply(null, Components);
-    return instances;
-  }
-  return renderHierarchy;
-}
-
-module.exports = createHierarchyRenderer;
diff --git a/src/test/getTestDocument.js b/src/test/getTestDocument.js
deleted file mode 100644
index 51adc2f53bd..00000000000
--- a/src/test/getTestDocument.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getTestDocument
- */
-
-"use strict";
-
-function getTestDocument(markup) {
-  var iframe = document.createElement('iframe');
-  iframe.style.display = 'none';
-  document.body.appendChild(iframe);
-
-  var testDocument = iframe.contentDocument || iframe.contentWindow.document;
-  testDocument.open();
-  testDocument.write(
-    markup || '<!doctype html><html><meta charset=utf-8><title>test doc</title>'
-  );
-  testDocument.close();
-
-  iframe.parentNode.removeChild(iframe);
-  return testDocument;
-}
-
-module.exports = getTestDocument;
diff --git a/src/test/mock-modules.js b/src/test/mock-modules.js
deleted file mode 100644
index 7f5190aaff4..00000000000
--- a/src/test/mock-modules.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mock-modules
- */
-
-var mocks = require("mocks");
-var exportsRegistry = {};
-var hasOwn = exportsRegistry.hasOwnProperty;
-var explicitMockMap = {};
-
-function getMock(exports) {
-  try {
-    return mocks.generateFromMetadata(mocks.getMetadata(exports));
-  } catch (err) {
-    console.warn(err);
-    return exports;
-  }
-}
-
-// This function should be called at the bottom of any module that might
-// need to be mocked, after the final value of module.exports is known.
-exports.register = function(id, module) {
-  exportsRegistry[id] = {
-    module: module,
-    actual: module.exports,
-    mocked: null // Filled in lazily later.
-  };
-
-  // If doMock or doNotMock was called earlier, before the module was
-  // registered, then the choice should have been recorded in
-  // explicitMockMap. Now that the module is registered, we can finally
-  // fulfill the request.
-  if (hasOwn.call(explicitMockMap, id)) {
-    if (explicitMockMap[id]) {
-      doMock(id);
-    } else {
-      doNotMock(id);
-    }
-  }
-
-  return exports;
-};
-
-function resetEntry(id) {
-  if (hasOwn.call(exportsRegistry, id)) {
-    delete exportsRegistry[id].module.exports;
-    delete exportsRegistry[id];
-  }
-}
-
-exports.dumpCache = function() {
-  require("mocks").clear();
-
-  // Deleting module.exports will cause the module to be lazily
-  // reevaluated the next time it is required.
-  for (var id in exportsRegistry) {
-    resetEntry(id);
-  }
-
-  return exports;
-};
-
-exports.getMockMap = function() {
-  return explicitMockMap;
-};
-
-exports.clearMockMap = function() {
-  explicitMockMap = {};
-};
-
-exports.setMockMap = function(mockMap) {
-  exports.dumpCache();
-  exports.clearMockMap();
-  for (var id in mockMap) {
-    if (mockMap[id]) {
-      doMock(id);
-    } else {
-      doNotMock(id);
-    }
-  }
-
-  return exports;
-};
-
-// Call this function to ensure that require(id) returns the actual
-// exports object created by the module.
-function doNotMock(id) {
-  explicitMockMap[id] = false;
-
-  var entry = exportsRegistry[id];
-  if (entry && entry.module && entry.actual) {
-    entry.module.exports = entry.actual;
-  }
-
-  return exports;
-}
-
-// Call this function to ensure that require(id) returns a mock exports
-// object based on the actual exports object created by the module.
-function doMock(id) {
-  explicitMockMap[id] = true;
-
-  var entry = exportsRegistry[id];
-  if (entry && entry.module && entry.actual) {
-    // Because mocking can be expensive, create the mock exports object on
-    // demand, the first time doMock is called.
-    entry.mocked || (entry.mocked = getMock(entry.actual));
-    entry.module.exports = entry.mocked;
-  }
-
-  return exports;
-}
-
-var global = Function("return this")();
-require('test/mock-timers').installMockTimers(global);
-
-// Exported names are different for backwards compatibility.
-exports.dontMock = doNotMock;
-exports.mock = doMock;
diff --git a/src/test/mock-timers.js b/src/test/mock-timers.js
deleted file mode 100644
index 97abfb5fe54..00000000000
--- a/src/test/mock-timers.js
+++ /dev/null
@@ -1,226 +0,0 @@
-var mocks = require('mocks');
-
-var timers = {};
-// Keep a fake timestamp
-// move on the time when runTimersToTime() is called
-var now = 0;
-
-// add a timer of type either 'timeout' or 'interval'
-function _setTimer(type, callback, delay) {
-  var token = null;
-  do {
-    token = Math.floor(Math.random() * 4294967296) + 1;
-  } while (timers[token]);
-  timers[token] = {
-    type: type,
-    callback: callback,
-    // Add some random msecs to the delay to mimic code execution time.
-    time: now + delay + Math.floor(Math.random() * 5),
-    interval: (type == 'interval' ? delay : 0)
-  };
-  return token;
-}
-
-// clear a timer of type either 'timeout' or 'interval'
-function _clearTimer(type, token) {
-  if (timers[token] && timers[token].type == type) {
-    delete timers[token];
-  }
-}
-
-function _setTimeout(callback, delay) {
-  return _setTimer('timeout', callback, delay);
-}
-
-function _setInterval(callback, delay) {
-  return _setTimer('interval', callback, delay);
-}
-
-function _clearTimeout(token) {
-  _clearTimer('timeout', token);
-}
-
-function _clearInterval(token) {
-  _clearTimer('interval', token);
-}
-
-// Run timer of given token
-function _runTimer(token) {
-  // Skip non-existing token
-  if (timers[token]) {
-    if (timers[token].type == 'timeout') {
-      // for 'timeout', run callback and delete the timer
-      var callback = timers[token].callback;
-      delete timers[token];
-      callback();
-    } else if (timers[token].type == 'interval') {
-      // for 'interval', run callback and set the next invoke time
-      // Add some random msecs to the delay to mimic code execution time.
-      timers[token].time =
-        now + timers[token].interval + Math.floor(Math.random() * 5);
-      timers[token].callback();
-    }
-  }
-}
-
-function _runTimersOnce() {
-  // Invoke all timers once regardsless of the delay
-  for (var token in timers) {
-    _runTimer(token);
-  }
-}
-
-function _runTimersToTime(delay) {
-  var toRunToken = _getNextTimerToken();
-  if (!toRunToken) {
-    return;
-  }
-
-  var minTime = timers[toRunToken].time;
-  if (now + delay < minTime) {
-    // Termination when there's no more timers to invoke
-    now += delay;
-  } else {
-    // Recursively invoke the next to-run timer
-    delay -= (minTime - now);
-    now = minTime;
-    _runTimer(toRunToken);
-    _runTimersToTime(delay);
-  }
-}
-
-function _runTimersRepeatedly() {
-  // Only run a generous 1000 timers and then bail, since we may have entered
-  // a loop if we have more than that.
-  var max_timers = 1000;
-
-  var token;
-  for (var ii = 0; ii < max_timers; ii++) {
-    token = _getNextTimerToken();
-
-    if (!token) {
-      break;
-    }
-
-    _runTimer(token);
-  }
-
-  if (ii === max_timers) {
-    throw new Error("More timers still exist after " + max_timers + " timers!");
-  }
-}
-
-function _clearTimers() {
-  for (var token in timers) {
-    delete timers[token];
-  }
-}
-
-function _getNextTimerToken() {
-  var nextTimerToken = null;
-  var minTime = 31536000000; // One year
-  // Find the next to invoke timer
-  for (var token in timers) {
-    if (timers[token].time < minTime) {
-      nextTimerToken = token;
-      minTime = timers[token].time;
-    }
-  }
-  return nextTimerToken;
-}
-
-var mockTimers = {
-  setTimeout: _setTimeout,
-  clearTimeout: _clearTimeout,
-  setInterval: _setInterval,
-  clearInterval: _clearInterval,
-
-  /**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
-   * Iteratively run callbacks in time order during the time from now to
-   * now + delay.
-   * If one callback register another timer which should be run during now to
-   * now + delay, the new timer will also be run in the right order.
-   *
-   * @param delay
-   */
-  runTimersToTime: _runTimersToTime,
-
-  /**
-   * Run all registered timer once. Newly registered timers will not be run.
-   */
-  runTimersOnce: _runTimersOnce,
-
-  /**
-   * Iteratively run callbacks until there are no timers left to call. Will
-   * stop after a maximum number of iterations to avoid infinite loop.
-   *
-   * @param maximum iterations (optional)
-   */
-  runTimersRepeatedly: _runTimersRepeatedly,
-
-  /**
-   * Clear all timers
-   */
-  clearTimers: _clearTimers,
-
-  /**
-   * Get the number of remaining timers
-   */
-  getTimersCount: function() {
-    return Object.keys(timers).length;
-  }
-};
-
-module.exports.installMockTimers = function(window) {
-  window._originalTimeouts = {
-    setTimeout: window.setTimeout,
-    clearTimeout: window.clearTimeout,
-    setInterval: window.setInterval,
-    clearInterval: window.clearInterval
-  };
-  window.setTimeout =
-    mocks.getMockFunction().mockImplementation(mockTimers.setTimeout);
-  window.clearTimeout =
-    mocks.getMockFunction().mockImplementation(mockTimers.clearTimeout);
-  window.setInterval =
-    mocks.getMockFunction().mockImplementation(mockTimers.setInterval);
-  window.clearInterval =
-    mocks.getMockFunction().mockImplementation(mockTimers.clearInterval);
-  window.mockRunTimersOnce =
-    mocks.getMockFunction().mockImplementation(mockTimers.runTimersOnce);
-  window.mockRunTimersToTime =
-    mocks.getMockFunction().mockImplementation(mockTimers.runTimersToTime);
-  window.mockRunTimersRepeatedly =
-    mocks.getMockFunction().mockImplementation(mockTimers.runTimersRepeatedly);
-  window.mockClearTimers =
-    mocks.getMockFunction().mockImplementation(mockTimers.clearTimers);
-  window.mockGetTimersCount =
-    mocks.getMockFunction().mockImplementation(mockTimers.getTimersCount);
-};
-
-module.exports.uninstallMockTimers = function(window) {
-  window.setTimeout = window._originalTimeouts.setTimeout;
-  window.clearTimeout = window._originalTimeouts.clearTimeout;
-  window.setInterval = window._originalTimeouts.setInterval;
-  window.clearInterval = window._originalTimeouts.clearInterval;
-  window._originalTimeouts = undefined;
-  window.mockRunTimersOnce = undefined;
-  window.mockRunTimersToTime = undefined;
-  window.mockRunTimersRepeatedly = undefined;
-  window.mockClearTimers = undefined;
-  window.mockGetTimersCount = undefined;
-};
diff --git a/src/test/mocks.js b/src/test/mocks.js
deleted file mode 100644
index 238d29112a6..00000000000
--- a/src/test/mocks.js
+++ /dev/null
@@ -1,432 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mocks
- */
-
-function isA(typeName, value) {
-  return Object.prototype.toString.apply(value) === '[object ' + typeName + ']';
-}
-
-function getType(ref) {
-  if (isA('RegExp', ref)) {
-    return 'regexp';
-  }
-
-  if (isA('Array', ref)) {
-    return 'array';
-  }
-
-  if (isA('Function', ref)) {
-    return 'function';
-  }
-
-  if (isA('Object', ref)) {
-    return 'object';
-  }
-
-  // consider number and string fields to be constants that we want to
-  // pick up as they are
-  if (isA('Number', ref) || isA('String', ref)) {
-    return 'constant';
-  }
-
-  return null;
-}
-
-function makeComponent(metadata) {
-  switch (metadata.type) {
-    case 'object':
-      return {};
-
-    case 'array':
-      return [];
-
-    case 'regexp':
-      return new RegExp();
-
-    case 'constant':
-      return metadata.value;
-
-    case 'function':
-      var defaultReturnValue;
-      var specificReturnValues = [];
-      var mockImpl;
-      var isReturnValueLastSet = false;
-      var calls = [];
-      var instances = [];
-      var prototype =
-        (metadata.members && metadata.members.prototype &&
-          metadata.members.prototype.members) || {};
-
-      var f = function() {
-        global.dirtyMocks.push(f);
-
-        instances.push(this);
-        calls.push(Array.prototype.slice.call(arguments));
-        if (this instanceof arguments.callee) {
-          // This is probably being called as a constructor
-          for (var slot in prototype) {
-            // Copy prototype methods to the instance to make
-            // it easier to interact with mock instance call and
-            // return values
-            if (prototype[slot].type == 'function') {
-              var protoImpl = this[slot];
-              this[slot] = generateFromMetadata(prototype[slot]);
-              this[slot]._protoImpl = protoImpl;
-            }
-          }
-
-          // Run the mock constructor implementation
-          mockImpl && mockImpl.apply(this, arguments);
-          return;
-        }
-
-        var returnValue;
-        // If return value is last set, either specific or default, i.e.
-        // mockReturnValueOnce()/mockReturnValue() is called and no
-        // mockImplementation() is called after that.
-        // use the set return value.
-        if (isReturnValueLastSet) {
-          returnValue = specificReturnValues.shift();
-          if (returnValue === undefined) {
-            returnValue = defaultReturnValue;
-          }
-        }
-
-        // If mockImplementation() is last set, or specific return values
-        // are used up, use the mock implementation.
-        if (mockImpl && returnValue === undefined) {
-          return mockImpl.apply(this, arguments);
-        }
-
-        // Otherwise use prototype implementation
-        if (returnValue === undefined && arguments.callee._protoImpl) {
-          return arguments.callee._protoImpl.apply(this, arguments);
-        }
-
-        return returnValue;
-      };
-
-      f._isMockFunction = true;
-
-      f.mock = {
-        calls : calls,
-        instances : instances
-      };
-
-      f.mockClear = function() {
-        calls.length = 0;
-        instances.length = 0;
-      };
-
-      f.mockReturnValueOnce = function(value) {
-        // next function call will return this value or default return value
-        isReturnValueLastSet = true;
-        specificReturnValues.push(value);
-        return f;
-      };
-
-      f.mockReturnValue = function(value) {
-        // next function call will return specified return value or this one
-        isReturnValueLastSet = true;
-        defaultReturnValue = value;
-        return f;
-      };
-
-      f.mockImplementation = function(fn) {
-        // next function call will use mock implementation return value
-        isReturnValueLastSet = false;
-        mockImpl = fn;
-        return f;
-      };
-
-      f.mockReturnThis = function() {
-        return f.mockImplementation(function() {
-          return this;
-        });
-      };
-
-      f._getMockImplementation = function() {
-        return mockImpl;
-      };
-
-      if (metadata.mockImpl) {
-        f.mockImplementation(metadata.mockImpl);
-      }
-
-      return f;
-  }
-
-  throw new Error('Unrecognized type ' + metadata.type);
-}
-
-function generateFromMetadata(_metadata) {
-  var callbacks = [];
-  var refs = {};
-
-  function generateMock(metadata) {
-    var mock = makeComponent(metadata);
-    if (metadata.ref_id != null) {
-      refs[metadata.ref_id] = mock;
-    }
-
-    function getRefCallback(slot, ref) {
-      return function() {
-        mock[slot] = refs[ref];
-      };
-    }
-
-    for (var slot in metadata.members) {
-      var slotMetadata = metadata.members[slot];
-      if (slotMetadata.ref != null) {
-        callbacks.push(getRefCallback(slot, slotMetadata.ref));
-      } else {
-        mock[slot] = generateMock(slotMetadata);
-      }
-    }
-
-    return mock;
-  }
-
-  var mock = generateMock(_metadata);
-  callbacks.forEach(function(setter) {
-    setter();
-  });
-
-  return mock;
-}
-
-
-function _getMetadata(component, _refs) {
-  var refs = _refs || [];
-
-  // This is a potential performance drain, since the whole list is scanned
-  // for every component
-  var ref = refs.indexOf(component);
-  if (ref > -1) {
-    return {ref: ref};
-  }
-
-  var type = getType(component);
-  if (!type) {
-    return null;
-  }
-
-  var metadata = {type : type};
-  if (type == 'constant') {
-    metadata.value = component;
-    return metadata;
-  } else if (type == 'function') {
-    if (component._isMockFunction) {
-      metadata.mockImpl = component._getMockImplementation();
-    }
-  }
-
-  metadata.ref_id = refs.length;
-  refs.push(component);
-
-  var members = null;
-
-  function addMember(slot, data) {
-    if (!data) {
-      return;
-    }
-    if (!members) {
-      members = {};
-    }
-    members[slot] = data;
-  }
-
-  // Leave arrays alone
-  if (type != 'array') {
-    for (var slot in component) {
-      if (slot.charAt(0) == '_' ||
-          (type == 'function' && component._isMockFunction &&
-           slot.match(/^mock/))) {
-        continue;
-      }
-
-      if (component.hasOwnProperty(slot) ||
-          (type == 'object' && component[slot] != Object.prototype[slot])) {
-        addMember(slot, _getMetadata(component[slot], refs));
-      }
-    }
-
-    // If component is native code function, prototype might be undefined
-    if (type == 'function' && component.prototype) {
-      var prototype = _getMetadata(component.prototype, refs);
-      if (prototype && prototype.members) {
-        addMember('prototype', prototype);
-      }
-    }
-  }
-
-  if (members) {
-    metadata.members = members;
-  }
-
-  return metadata;
-}
-
-function removeUnusedRefs(metadata) {
-  function visit(md, f) {
-    f(md);
-    if (md.members) {
-      for (var slot in md.members) {
-        visit(md.members[slot], f);
-      }
-    }
-  }
-
-  var usedRefs = {};
-  visit(metadata, function(md) {
-    if (md.ref != null) {
-      usedRefs[md.ref] = true;
-    }
-  });
-
-  visit(metadata, function(md) {
-    if (!usedRefs[md.ref_id]) {
-      delete md.ref_id;
-    }
-  });
-}
-
-var global = Function("return this")();
-global.dirtyMocks = global.dirtyMocks || [];
-
-module.exports = {
-  /**
-   * Invokes the .mockClear method of all function mocks that have been
-   * called since the last time clear was called.
-   */
-  clear: function() {
-    var old = global.dirtyMocks;
-    global.dirtyMocks = [];
-    old.forEach(function(mock) {
-      mock.mockClear();
-    });
-  },
-
-  /**
-   * Generates a mock based on the given metadata. Mocks treat functions
-   * specially, and all mock functions have additional members, described in the
-   * documentation for getMockFunction in this module.
-   *
-   * One important note: function prototoypes are handled specially by this
-   * mocking framework. For functions with prototypes, when called as a
-   * constructor, the mock will install mocked function members on the instance.
-   * This allows different instances of the same constructor to have different
-   * values for its mocks member and its return values.
-   *
-   * @param metadata Metadata for the mock in the schema returned by the
-   * getMetadata method of this module.
-   *
-   */
-  generateFromMetadata: generateFromMetadata,
-
-  /**
-   * Inspects the argument and returns its schema in the following recursive
-   * format:
-   * {
-   *  type: ...
-   *  members : {}
-   * }
-   *
-   * Where type is one of 'array', 'object', 'function', or 'ref', and members
-   * is an optional dictionary where the keys are member names and the values
-   * are metadata objects. Function prototypes are defined simply by defining
-   * metadata for the member.prototype of the function. The type of a function
-   * prototype should always be "object". For instance, a simple class might be
-   * defined like this:
-   *
-   * {
-   *  type: 'function',
-   *  members: {
-   *    staticMethod: {type: 'function'},
-   *    prototype: {
-   *      type: 'object',
-   *      members: {
-   *        instanceMethod: {type: 'function'}
-   *      }
-   *    }
-   *  }
-   * }
-   *
-   * Metadata may also contain references to other objects defined within the
-   * same metadata object. The metadata for the referent must be marked with
-   * 'ref_id' key and an arbitrary value. The referer must be marked with a
-   * 'ref' key that has the same value as object with ref_id that it refers to.
-   * For instance, this metadata blob:
-   * {
-   *  type: 'object',
-   *  ref_id: 1,
-   *  members: {
-   *    self: {ref: 1}
-   *  }
-   * }
-   *
-   * defines an object with a slot named 'self' that refers back to the object.
-   *
-   * @param component The component for which to retrieve metadata.
-   */
-  getMetadata: function(component) {
-    var metadata = _getMetadata(component);
-    // to make it easier to work with mock metadata, only preserve references
-    // that are actually used
-    removeUnusedRefs(metadata);
-    return metadata;
-  },
-
-  /**
-   * Generates a stand-alone function with members that help drive unit tests or
-   * confirm expectations. Specifically, functions returned by this method have
-   * the following members:
-   *
-   * .mock:
-   * An object with two members, "calls", and "instances", which are both
-   * lists. The items in the "calls" list are the arguments with which the
-   * function was called. The "instances" list stores the value of 'this' for
-   * each call to the function. This is useful for retrieving instances from a
-   * constructor.
-   *
-   * .mockReturnValueOnce(value)
-   * Pushes the given value onto a FIFO queue of return values for the
-   * function.
-   *
-   * .mockReturnValue(value)
-   * Sets the default return value for the function.
-   *
-   * .mockImplementation(function)
-   * Sets a mock implementation for the function.
-   *
-   * .mockReturnThis()
-   * Syntactic sugar for .mockImplementation(function() {return this;})
-   *
-   * In case both mockImplementation() and
-   * mockReturnValueOnce()/mockReturnValue() are called. The priority of
-   * which to use is based on what is the last call:
-   * - if the last call is mockReturnValueOnce() or mockReturnValue(),
-   *   use the specific return specific return value or default return value.
-   *   If specific return values are used up or no default return value is set,
-   *   fall back to try mockImplementation();
-   * - if the last call is mockImplementation(), run the given implementation
-   *   and return the result.
-   */
-  getMockFunction: function() {
-    return makeComponent({type: 'function'});
-  }
-};
diff --git a/src/test/phantomjs-shims.js b/src/test/phantomjs-shims.js
deleted file mode 100644
index 12fe3bba9c0..00000000000
--- a/src/test/phantomjs-shims.js
+++ /dev/null
@@ -1,35 +0,0 @@
-(function() {
-
-var Ap = Array.prototype;
-var slice = Ap.slice;
-var Fp = Function.prototype;
-
-if (!Fp.bind) {
-  // PhantomJS doesn't support Function.prototype.bind natively, so
-  // polyfill it whenever this module is required.
-  Fp.bind = function(context) {
-    var func = this;
-    var args = slice.call(arguments, 1);
-
-    function bound() {
-      var invokedAsConstructor = func.prototype && (this instanceof func);
-      return func.apply(
-        // Ignore the context parameter when invoking the bound function
-        // as a constructor. Note that this includes not only constructor
-        // invocations using the new keyword but also calls to base class
-        // constructors such as BaseClass.call(this, ...) or super(...).
-        !invokedAsConstructor && context || this,
-        args.concat(slice.call(arguments))
-      );
-    }
-
-    // The bound function must share the .prototype of the unbound
-    // function so that any object created by one constructor will count
-    // as an instance of both constructors.
-    bound.prototype = func.prototype;
-
-    return bound;
-  };
-}
-
-})();
diff --git a/src/test/reactComponentExpect.js b/src/test/reactComponentExpect.js
deleted file mode 100644
index 89cc8178053..00000000000
--- a/src/test/reactComponentExpect.js
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule reactComponentExpect
- * @nolint
- */
-
-"use strict";
-
-var ReactTestUtils = require('ReactTestUtils');
-
-var mergeInto = require('mergeInto');
-
-function reactComponentExpect(instance) {
-  if (instance instanceof reactComponentExpect) {
-    return instance;
-  }
-
-  if (!(this instanceof reactComponentExpect)) {
-    return new reactComponentExpect(instance);
-  }
-
-  this._instance = instance;
-  expect(typeof instance).toBe('object');
-  expect(typeof instance.constructor).toBe('function');
-  expect(ReactTestUtils.isDescriptor(instance)).toBe(false);
-}
-
-mergeInto(reactComponentExpect.prototype, {
-  // Getters -------------------------------------------------------------------
-
-  /**
-   * @instance: Retrieves the backing instance.
-   */
-  instance: function() {
-    return this._instance;
-  },
-
-  /**
-   * There are two types of components in the world.
-   * - A component created via React.createClass() - Has a single child
-   *   subComponent - the return value from the .render() function. This
-   *   function @subComponent expects that this._instance is component created
-   *   with React.createClass().
-   * - A primitive DOM component - which has many renderedChildren, each of
-   *   which may have a name that is unique with respect to its siblings. This
-   *   method will fail if this._instance is a primitive component.
-   *
-   * TL;DR: An instance may have a subComponent (this._renderedComponent) or
-   * renderedChildren, but never both. Neither will actually show up until you
-   * render the component (simply instantiating is not enough).
-   */
-  expectRenderedChild: function() {
-    this.toBeCompositeComponent();
-    return new reactComponentExpect(this.instance()._renderedComponent);
-  },
-
-  /**
-   * The nth child of a DOMish component instance that is not falsy.
-   */
-  expectRenderedChildAt: function(childIndex) {
-    // Currently only dom components have arrays of children, but that will
-    // change soon.
-    this.toBeDOMComponent();
-    var renderedChildren = this.instance()._renderedChildren || {};
-    for (var name in renderedChildren) {
-      if (!renderedChildren.hasOwnProperty(name)) {
-        continue;
-      }
-      if (renderedChildren[name]) {
-        if (renderedChildren[name]._mountIndex === childIndex) {
-          return new reactComponentExpect(renderedChildren[name]);
-        }
-      }
-    }
-    throw new Error('Child:' + childIndex + ' is not found');
-  },
-
-  toBeDOMComponentWithChildCount: function(n) {
-    this.toBeDOMComponent();
-    expect(this.instance()._renderedChildren).toBeTruthy();
-    var len = Object.keys(this.instance()._renderedChildren).length;
-    expect(len).toBe(n);
-    return this;
-  },
-
-  toBeDOMComponentWithNoChildren: function() {
-    this.toBeDOMComponent();
-    expect(this.instance()._renderedChildren).toBeFalsy();
-    return this;
-  },
-
-  // Matchers ------------------------------------------------------------------
-
-  toBeComponentOfType: function(convenienceConstructor) {
-    expect(
-      this.instance().constructor === convenienceConstructor.type
-    ).toBe(true);
-    return this;
-  },
-
-  /**
-   * A component that is created with React.createClass. Just duck typing
-   * here.
-   */
-  toBeCompositeComponent: function() {
-    expect(
-      typeof this.instance().render === 'function' &&
-      typeof this.instance().setState === 'function'
-    ).toBe(true);
-    return this;
-  },
-
-  toBeCompositeComponentWithType: function(convenienceConstructor) {
-    this.toBeCompositeComponent();
-    expect(
-      this.instance().constructor === convenienceConstructor.type
-    ).toBe(true);
-    return this;
-  },
-
-  toBeTextComponent: function() {
-    expect(ReactTestUtils.isTextComponent(this.instance())).toBe(true);
-    return this;
-  },
-
-  toBePresent: function() {
-    expect(this.instance()).toBeTruthy();
-    return this;
-  },
-
-  /**
-   * A terminal type of component representing some virtual dom node. Just duck
-   * typing here.
-   */
-  toBeDOMComponent: function() {
-    expect(ReactTestUtils.isDOMComponent(this.instance())).toBe(true);
-    return this;
-  },
-
-  /**
-   * @deprecated
-   * @see toBeComponentOfType
-   */
-  toBeDOMComponentWithTag: function(tag) {
-    this.toBeDOMComponent();
-    expect(this.instance().tagName).toBe(tag.toUpperCase());
-    return this;
-  },
-
-  /**
-   * Check that internal state values are equal to a state of expected values.
-   */
-  scalarStateEqual: function(stateNameToExpectedValue) {
-    expect(this.instance()).toBeTruthy();
-    for (var stateName in stateNameToExpectedValue) {
-      if (!stateNameToExpectedValue.hasOwnProperty(stateName)) {
-        continue;
-      }
-      expect(this.instance().state[stateName])
-        .toEqual(stateNameToExpectedValue[stateName]);
-    }
-    return this;
-  },
-
-  /**
-   * Check a set of props are equal to a set of expected values - only works
-   * with scalars.
-   */
-  scalarPropsEqual: function(propNameToExpectedValue) {
-    expect(this.instance()).toBeTruthy();
-    for (var propName in propNameToExpectedValue) {
-      if (!propNameToExpectedValue.hasOwnProperty(propName)) {
-        continue;
-      }
-      expect(this.instance().props[propName])
-        .toEqual(propNameToExpectedValue[propName]);
-    }
-    return this;
-  },
-
-  /**
-   * Check a set of props are equal to a set of expected values - only works
-   * with scalars.
-   */
-  scalarContextEqual: function(contextNameToExpectedValue) {
-    expect(this.instance()).toBeTruthy();
-    for (var contextName in contextNameToExpectedValue) {
-      if (!contextNameToExpectedValue.hasOwnProperty(contextName)) {
-        continue;
-      }
-      expect(this.instance().context[contextName])
-        .toEqual(contextNameToExpectedValue[contextName]);
-    }
-    return this;
-  }
-});
-
-module.exports = reactComponentExpect;
diff --git a/src/test/worker.js b/src/test/worker.js
deleted file mode 100644
index 10691fda0bb..00000000000
--- a/src/test/worker.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* jshint worker: true */
-"use strict";
-
-if (typeof console == 'undefined') {
-  this.console = {
-    error: function(e){
-      postMessage(JSON.stringify({
-        type: 'error',
-        message: e.message,
-        stack: e.stack
-      }));
-    },
-    log: function(message){
-      postMessage(JSON.stringify({
-        type: 'log',
-        message: message
-      }));
-    }
-  }
-}
-
-console.log('worker BEGIN');
-
-// The UMD wrapper tries to store on `global` if `window` isn't available
-var global = {};
-importScripts("phantomjs-shims.js");
-
-try {
-  importScripts("../../build/react.js");
-} catch (e) {
-  console.error(e);
-}
-
-postMessage(JSON.stringify({
-  type: 'done'
-}));
-
-console.log('worker END');
diff --git a/src/utils/CallbackQueue.js b/src/utils/CallbackQueue.js
deleted file mode 100644
index 9d989b59ecf..00000000000
--- a/src/utils/CallbackQueue.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule CallbackQueue
- */
-
-"use strict";
-
-var PooledClass = require('PooledClass');
-
-var invariant = require('invariant');
-var mixInto = require('mixInto');
-
-/**
- * A specialized pseudo-event module to help keep track of components waiting to
- * be notified when their DOM representations are available for use.
- *
- * This implements `PooledClass`, so you should never need to instantiate this.
- * Instead, use `CallbackQueue.getPooled()`.
- *
- * @class ReactMountReady
- * @implements PooledClass
- * @internal
- */
-function CallbackQueue() {
-  this._callbacks = null;
-  this._contexts = null;
-}
-
-mixInto(CallbackQueue, {
-
-  /**
-   * Enqueues a callback to be invoked when `notifyAll` is invoked.
-   *
-   * @param {function} callback Invoked when `notifyAll` is invoked.
-   * @param {?object} context Context to call `callback` with.
-   * @internal
-   */
-  enqueue: function(callback, context) {
-    this._callbacks = this._callbacks || [];
-    this._contexts = this._contexts || [];
-    this._callbacks.push(callback);
-    this._contexts.push(context);
-  },
-
-  /**
-   * Invokes all enqueued callbacks and clears the queue. This is invoked after
-   * the DOM representation of a component has been created or updated.
-   *
-   * @internal
-   */
-  notifyAll: function() {
-    var callbacks = this._callbacks;
-    var contexts = this._contexts;
-    if (callbacks) {
-      invariant(
-        callbacks.length === contexts.length,
-        "Mismatched list of contexts in callback queue"
-      );
-      this._callbacks = null;
-      this._contexts = null;
-      for (var i = 0, l = callbacks.length; i < l; i++) {
-        callbacks[i].call(contexts[i]);
-      }
-      callbacks.length = 0;
-      contexts.length = 0;
-    }
-  },
-
-  /**
-   * Resets the internal queue.
-   *
-   * @internal
-   */
-  reset: function() {
-    this._callbacks = null;
-    this._contexts = null;
-  },
-
-  /**
-   * `PooledClass` looks for this.
-   */
-  destructor: function() {
-    this.reset();
-  }
-
-});
-
-PooledClass.addPoolingTo(CallbackQueue);
-
-module.exports = CallbackQueue;
diff --git a/src/utils/LegacyImmutableObject.js b/src/utils/LegacyImmutableObject.js
deleted file mode 100644
index 2862dd47ee5..00000000000
--- a/src/utils/LegacyImmutableObject.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule LegacyImmutableObject
- * @typechecks
- */
-
-"use strict";
-
-var invariant = require('invariant');
-var isNode = require('isNode');
-var merge = require('merge');
-var mergeInto = require('mergeInto');
-var mergeHelpers = require('mergeHelpers');
-
-var checkMergeObjectArgs = mergeHelpers.checkMergeObjectArgs;
-var isTerminal = mergeHelpers.isTerminal;
-
-/**
- * Wrapper around JavaScript objects that provide a guarantee of immutability at
- * developer time when strict mode is used. The extra computations required to
- * enforce immutability is stripped out in production for performance reasons.
- */
-var LegacyImmutableObject;
-
-function assertLegacyImmutableObject(immutableObject) {
-  invariant(
-    immutableObject instanceof LegacyImmutableObject,
-    'LegacyImmutableObject: Attempted to set fields on an object that is not ' +
-    'an instance of LegacyImmutableObject.'
-  );
-}
-
-if (__DEV__) {
-  /**
-   * Constructs an instance of `LegacyImmutableObject`.
-   *
-   * @param {?object} initialProperties The initial set of properties.
-   * @constructor
-   */
-  LegacyImmutableObject = function LegacyImmutableObject(initialProperties) {
-    mergeInto(this, initialProperties);
-    deepFreeze(this);
-  };
-
-  /**
-   * Checks if an object should be deep frozen. Instances of
-   * `LegacyImmutableObject` are assumed to have already been deep frozen.
-   *
-   * @param {*} object The object to check.
-   * @return {boolean} Whether or not deep freeze is needed.
-   */
-  var shouldRecurseFreeze = function(object) {
-    return (
-      typeof object === 'object' &&
-      !(object instanceof LegacyImmutableObject) &&
-      object !== null
-    );
-  };
-
-  /**
-   * Freezes the supplied object deeply.
-   *
-   * @param {*} object The object to freeze.
-   */
-  var deepFreeze = function(object) {
-    if (isNode(object)) {
-      return; // Don't try to freeze DOM nodes.
-    }
-    Object.freeze(object); // First freeze the object.
-    for (var prop in object) {
-      var field = object[prop];
-      if (object.hasOwnProperty(prop) && shouldRecurseFreeze(field)) {
-        deepFreeze(field);
-      }
-    }
-  };
-
-  /**
-   * Returns a new LegacyImmutableObject that is identical to the supplied
-   * object but with the supplied changes, `put`.
-   *
-   * @param {LegacyImmutableObject} immutableObject Starting object.
-   * @param {?object} put Fields to merge into the object.
-   * @return {LegacyImmutableObject} The result of merging in `put` fields.
-   */
-  LegacyImmutableObject.set = function(immutableObject, put) {
-    assertLegacyImmutableObject(immutableObject);
-    var totalNewFields = merge(immutableObject, put);
-    return new LegacyImmutableObject(totalNewFields);
-  };
-
-} else {
-  /**
-   * Constructs an instance of `LegacyImmutableObject`.
-   *
-   * @param {?object} initialProperties The initial set of properties.
-   * @constructor
-   */
-  LegacyImmutableObject = function LegacyImmutableObject(initialProperties) {
-    mergeInto(this, initialProperties);
-  };
-
-  /**
-   * Returns a new LegacyImmutableObject that is identical to the supplied
-   * object but with the supplied changes, `put`.
-   *
-   * @param {LegacyImmutableObject} immutableObject Starting object.
-   * @param {?object} put Fields to merge into the object.
-   * @return {LegacyImmutableObject} The result of merging in `put` fields.
-   */
-  LegacyImmutableObject.set = function(immutableObject, put) {
-    assertLegacyImmutableObject(immutableObject);
-    var newMap = new LegacyImmutableObject(immutableObject);
-    mergeInto(newMap, put);
-    return newMap;
-  };
-}
-
-/**
- * Sugar for:
- * `LegacyImmutableObject.set(LegacyImmutableObject, {fieldName: putField})`.
- *
- * @param {LegacyImmutableObject} immutableObject Object on which to set field.
- * @param {string} fieldName Name of the field to set.
- * @param {*} putField Value of the field to set.
- * @return {LegacyImmutableObject} [description]
- */
-LegacyImmutableObject.setField = function(immutableObject, fieldName, putField) {
-  var put = {};
-  put[fieldName] = putField;
-  return LegacyImmutableObject.set(immutableObject, put);
-};
-
-/**
- * Returns a new LegacyImmutableObject that is identical to the supplied object
- * but with the supplied changes recursively applied.
- *
- * @param {LegacyImmutableObject} immutableObject Object on which to set fields.
- * @param {object} put Fields to merge into the object.
- * @return {LegacyImmutableObject} The result of merging in `put` fields.
- */
-LegacyImmutableObject.setDeep = function(immutableObject, put) {
-  assertLegacyImmutableObject(immutableObject);
-  return _setDeep(immutableObject, put);
-};
-
-function _setDeep(object, put) {
-  checkMergeObjectArgs(object, put);
-  var totalNewFields = {};
-
-  // To maintain the order of the keys, copy the base object's entries first.
-  var keys = Object.keys(object);
-  for (var ii = 0; ii < keys.length; ii++) {
-    var key = keys[ii];
-    if (!put.hasOwnProperty(key)) {
-      totalNewFields[key] = object[key];
-    } else if (isTerminal(object[key]) || isTerminal(put[key])) {
-      totalNewFields[key] = put[key];
-    } else {
-      totalNewFields[key] = _setDeep(object[key], put[key]);
-    }
-  }
-
-  // Apply any new keys that the base object didn't have.
-  var newKeys = Object.keys(put);
-  for (ii = 0; ii < newKeys.length; ii++) {
-    var newKey = newKeys[ii];
-    if (object.hasOwnProperty(newKey)) {
-      continue;
-    }
-    totalNewFields[newKey] = put[newKey];
-  }
-
-  return (object instanceof LegacyImmutableObject ||
-          put instanceof LegacyImmutableObject) ?
-    new LegacyImmutableObject(totalNewFields) :
-    totalNewFields;
-}
-
-module.exports = LegacyImmutableObject;
diff --git a/src/utils/OrderedMap.js b/src/utils/OrderedMap.js
deleted file mode 100644
index 22af8f2aafe..00000000000
--- a/src/utils/OrderedMap.js
+++ /dev/null
@@ -1,514 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule OrderedMap
- */
-
-"use strict";
-
-var invariant = require('invariant');
-var mixInto = require('mixInto');
-
-var PREFIX = 'key:';
-
-/**
- * Utility to extract a backing object from an initialization `Array`, allowing
- * the caller to assist in resolving the unique ID for each entry via the
- * `keyExtractor` callback. The `keyExtractor` must extract non-empty strings or
- * numbers.
- * @param {Array<Object!>} arr Array of items.
- * @param {function} keyExtractor Extracts a unique key from each item.
- * @return {Object} Map from unique key to originating value that the key was
- * extracted from.
- * @throws Exception if the initialization array has duplicate extracted keys.
- */
-function extractObjectFromArray(arr, keyExtractor) {
-  var normalizedObj = {};
-  for (var i=0; i < arr.length; i++) {
-    var item = arr[i];
-    var key = keyExtractor(item);
-    assertValidPublicKey(key);
-    var normalizedKey = PREFIX + key;
-    invariant(
-      !(normalizedKey in normalizedObj),
-      'OrderedMap: IDs returned by the key extraction function must be unique.'
-    );
-    normalizedObj[normalizedKey] = item;
-  }
-  return normalizedObj;
-}
-
-/**
- * Utility class for mappings with ordering. This class is to be used in an
- * immutable manner. A `OrderedMap` is very much like the native JavaScript
- * object, where keys map to values via the `get()` function. Also, like the
- * native JavaScript object, there is an ordering associated with the mapping.
- * This class is helpful because it eliminates many of the pitfalls that come
- * with the native JavaScript ordered mappings. Specifically, there are
- * inconsistencies with numeric keys in some JavaScript implementations
- * (enumeration ordering). This class protects against those pitfalls and
- * provides functional utilities for dealing with these `OrderedMap`s.
- *
- * - TODO:
- * - orderedMergeExclusive: Merges mutually exclusive `OrderedMap`s.
- * - mapReverse().
- *
- * @class {OrderedMap}
- * @constructor {OrderedMap}
- * @param {Object} normalizedObj Object that is known to be a defensive copy of
- * caller supplied data. We require a defensive copy to guard against callers
- * mutating.  It is also assumed that the keys of `normalizedObj` have been
- * normalized and do not contain any numeric-appearing strings.
- * @param {number} computedLength The precomputed length of `_normalizedObj`
- * keys.
- * @private
- */
-function OrderedMapImpl(normalizedObj, computedLength) {
-  this._normalizedObj = normalizedObj;
-  this._computedPositions = null;
-  this.length = computedLength;
-}
-
-/**
- * Validates a "public" key - that is, one that the public facing API supplies.
- * The key is then normalized for internal storage. In order to be considered
- * valid, all keys must be non-empty, defined, non-null strings or numbers.
- *
- * @param {string?} key Validates that the key is suitable for use in a
- * `OrderedMap`.
- * @throws Error if key is not appropriate for use in `OrderedMap`.
- */
-function assertValidPublicKey(key) {
-  invariant(
-    key !== '' && (typeof key === 'string' || typeof key === 'number'),
-    'OrderedMap: Key must be non-empty, non-null string or number.'
-  );
-}
-
-/**
- * Validates that arguments to range operations are within the correct limits.
- *
- * @param {number} start Start of range.
- * @param {number} length Length of range.
- * @param {number} actualLen Actual length of range that should not be
- * exceeded.
- * @return {void} description
- */
-function assertValidRangeIndices(start, length, actualLen) {
-  invariant(
-    typeof start === 'number' &&
-    typeof length === 'number' &&
-    length >= 0 &&
-    start >= 0 &&
-    start + length <= actualLen,
-    'OrderedMap: `mapRange` and `forEachRange` expect non-negative start and ' +
-    'length arguments within the bounds of the instance.'
-  );
-}
-
-/**
- * Merges two "normalized" objects (objects who's key have been normalized) into
- * a `OrderedMap`.
- *
- * @param {Object} a Object of key value pairs.
- * @param {Object} b Object of key value pairs.
- * @return {OrderedMap} new `OrderedMap` that results in merging `a` and `b`.
- */
-function _fromNormalizedObjects(a, b) {
-  // Second optional, both must be plain JavaScript objects.
-  invariant(
-    a && a.constructor === Object && (!b || b.constructor === Object),
-    'OrderedMap: Corrupted instance of OrderedMap detected.'
-  );
-
-  var newSet = {};
-  var length = 0;
-  var key;
-  for (key in a) {
-    if (a.hasOwnProperty(key)) {
-      newSet[key] = a[key];
-      length++;
-    }
-  }
-
-  for (key in b) {
-    if (b.hasOwnProperty(key)) {
-      // Increment length if not already added via first object (a)
-      if (!(key in newSet)) {
-        length++;
-      }
-      newSet[key] = b[key];
-    }
-  }
-  return new OrderedMapImpl(newSet, length);
-}
-
-/**
- * Methods for `OrderedMap` instances.
- *
- * @lends OrderedMap.prototype
- * TODO: Make this data structure lazy, unify with LazyArray.
- * TODO: Unify this with ImmutableObject - it is to be used immutably.
- * TODO: If so, consider providing `fromObject` API.
- * TODO: Create faster implementation of merging/mapping from original Array,
- * without having to first create an object - simply for the sake of merging.
- */
-var OrderedMapMethods = {
-
-  /**
-   * Returns whether or not a given key is present in the map.
-   *
-   * @param {string} key Valid string key to lookup membership for.
-   * @return {boolean} Whether or not `key` is a member of the map.
-   * @throws Error if provided known invalid key.
-   */
-  has: function(key) {
-    assertValidPublicKey(key);
-    var normalizedKey = PREFIX + key;
-    return normalizedKey in this._normalizedObj;
-  },
-
-  /**
-   * Returns the object for a given key, or `undefined` if not present. To
-   * distinguish a undefined entry vs not being in the set, use `has()`.
-   *
-   * @param {string} key String key to lookup the value for.
-   * @return {Object?} Object at key `key`, or undefined if not in map.
-   * @throws Error if provided known invalid key.
-   */
-  get: function(key) {
-    assertValidPublicKey(key);
-    var normalizedKey = PREFIX + key;
-    return this.has(key) ? this._normalizedObj[normalizedKey] : undefined;
-  },
-
-  /**
-   * Merges, appending new keys to the end of the ordering. Keys in `orderedMap`
-   * that are redundant with `this`, maintain the same ordering index that they
-   * had in `this`.  This is how standard JavaScript object merging would work.
-   * If you wish to prepend a `OrderedMap` to the beginning of another
-   * `OrderedMap` then simply reverse the order of operation. This is the analog
-   * to `merge(x, y)`.
-   *
-   * @param {OrderedMap} orderedMap OrderedMap to merge onto the end.
-   * @return {OrderedMap} New OrderedMap that represents the result of the
-   * merge.
-   */
-  merge: function(orderedMap) {
-    invariant(
-      orderedMap instanceof OrderedMapImpl,
-      'OrderedMap.merge(...): Expected an OrderedMap instance.'
-    );
-    return _fromNormalizedObjects(
-      this._normalizedObj,
-      orderedMap._normalizedObj
-    );
-  },
-
-  /**
-   * Functional map API. Returns a new `OrderedMap`.
-   *
-   * @param {Function} cb Callback to invoke for each item.
-   * @param {Object?=} context Context to invoke callback from.
-   * @return {OrderedMap} OrderedMap that results from mapping.
-   */
-  map: function(cb, context) {
-    return this.mapRange(cb, 0, this.length, context);
-  },
-
-  /**
-   * The callback `cb` is invoked with the arguments (item, key,
-   * indexInOriginal).
-   *
-   * @param {Function} cb Determines result for each item.
-   * @param {number} start Start index of map range.
-   * @param {end} end End index of map range.
-   * @param {*!?} context Context of callback invocation.
-   * @return {OrderedMap} OrderedMap resulting from mapping the range.
-   */
-  mapRange: function(cb, start, length, context) {
-    var thisSet = this._normalizedObj;
-    var newSet = {};
-    var i = 0;
-    assertValidRangeIndices(start, length, this.length);
-    var end = start + length - 1;
-    for (var key in thisSet) {
-      if (thisSet.hasOwnProperty(key)) {
-        if (i >= start) {
-          if (i > end) {
-            break;
-          }
-          var item = thisSet[key];
-          newSet[key] = cb.call(context, item, key.substr(PREFIX.length), i);
-        }
-        i++;
-      }
-    }
-    return new OrderedMapImpl(newSet, length);
-  },
-
-  /**
-   * Function filter API. Returns new `OrderedMap`.
-   *
-   * @param {Function} cb Callback to invoke for each item.
-   * @param {Object?=} context Context to invoke callback from.
-   * @return {OrderedMap} OrderedMap that results from filtering.
-   */
-  filter: function(cb, context) {
-    return this.filterRange(cb, 0, this.length, context);
-  },
-
-  /**
-   * The callback `cb` is invoked with the arguments (item, key,
-   * indexInOriginal).
-   *
-   * @param {Function} cb Returns true if item should be in result.
-   * @param {number} start Start index of filter range.
-   * @param {number} end End index of map range.
-   * @param {*!?} context Context of callback invocation.
-   * @return {OrderedMap} OrderedMap resulting from filtering the range.
-   */
-  filterRange: function(cb, start, length, context) {
-    var newSet = {};
-    var newSetLength = 0;
-    this.forEachRange(function(item, key, originalIndex) {
-      if (cb.call(context, item, key, originalIndex)) {
-        var normalizedKey = PREFIX + key;
-        newSet[normalizedKey] = item;
-        newSetLength++;
-      }
-    }, start, length);
-    return new OrderedMapImpl(newSet, newSetLength);
-  },
-
-  forEach: function(cb, context) {
-    this.forEachRange(cb, 0, this.length, context);
-  },
-
-  forEachRange: function(cb, start, length, context) {
-    assertValidRangeIndices(start, length, this.length);
-    var thisSet = this._normalizedObj;
-    var i = 0;
-    var end = start + length - 1;
-    for (var key in thisSet) {
-      if (thisSet.hasOwnProperty(key)) {
-        if (i >= start) {
-          if (i > end) {
-            break;
-          }
-          var item = thisSet[key];
-          cb.call(context, item, key.substr(PREFIX.length), i);
-        }
-        i++;
-      }
-    }
-  },
-
-  /**
-   * Even though `mapRange`/`forEachKeyRange` allow zero length mappings, we'll
-   * impose an additional restriction here that the length of mapping be greater
-   * than zero - the only reason is that there are many ways to express length
-   * zero in terms of two keys and that is confusing.
-   */
-  mapKeyRange: function(cb, startKey, endKey, context) {
-    var startIndex = this.indexOfKey(startKey);
-    var endIndex = this.indexOfKey(endKey);
-    invariant(
-      startIndex !== undefined && endIndex !== undefined,
-      'mapKeyRange must be given keys that are present.'
-    );
-    invariant(
-      endIndex >= startIndex,
-      'OrderedMap.mapKeyRange(...): `endKey` must not come before `startIndex`.'
-    );
-    return this.mapRange(cb, startIndex, (endIndex - startIndex) + 1, context);
-  },
-
-  forEachKeyRange: function(cb, startKey, endKey, context) {
-    var startIndex = this.indexOfKey(startKey);
-    var endIndex = this.indexOfKey(endKey);
-    invariant(
-      startIndex !== undefined && endIndex !== undefined,
-      'forEachKeyRange must be given keys that are present.'
-    );
-    invariant(
-      endIndex >= startIndex,
-      'OrderedMap.forEachKeyRange(...): `endKey` must not come before ' +
-      '`startIndex`.'
-    );
-    this.forEachRange(cb, startIndex, (endIndex - startIndex) + 1, context);
-  },
-
-  /**
-   * @param {number} pos Index to search for key at.
-   * @return {string|undefined} Either the key at index `pos` or undefined if
-   * not in map.
-   */
-  keyAtIndex: function(pos) {
-    var computedPositions = this._getOrComputePositions();
-    var keyAtPos = computedPositions.keyByIndex[pos];
-    return keyAtPos ? keyAtPos.substr(PREFIX.length) : undefined;
-  },
-
-  /**
-   * @param {string} key String key from which to find the next key.
-   * @return {string|undefined} Either the next key, or undefined if there is no
-   * next key.
-   * @throws Error if `key` is not in this `OrderedMap`.
-   */
-  keyAfter: function(key) {
-    return this.nthKeyAfter(key, 1);
-  },
-
-  /**
-   * @param {string} key String key from which to find the preceding key.
-   * @return {string|undefined} Either the preceding key, or undefined if there
-   * is no preceding.key.
-   * @throws Error if `key` is not in this `OrderedMap`.
-   */
-  keyBefore: function(key) {
-    return this.nthKeyBefore(key, 1);
-  },
-
-  /**
-   * @param {string} key String key from which to find a following key.
-   * @param {number} n Distance to scan forward after `key`.
-   * @return {string|undefined} Either the nth key after `key`, or undefined if
-   * there is no next key.
-   * @throws Error if `key` is not in this `OrderedMap`.
-   */
-  nthKeyAfter: function(key, n) {
-    var curIndex = this.indexOfKey(key);
-    invariant(
-      curIndex !== undefined,
-      'OrderedMap.nthKeyAfter: The key `%s` does not exist in this instance.',
-      key
-    );
-    return this.keyAtIndex(curIndex + n);
-  },
-
-  /**
-   * @param {string} key String key from which to find a preceding key.
-   * @param {number} n Distance to scan backwards before `key`.
-   * @return {string|undefined} Either the nth key before `key`, or undefined if
-   * there is no previous key.
-   * @throws Error if `key` is not in this `OrderedMap`.
-   */
-  nthKeyBefore: function(key, n) {
-    return this.nthKeyAfter(key, -n);
-  },
-
-  /**
-   * @param {string} key Key to find the index of.
-   * @return {number|undefined} Index of the provided key, or `undefined` if the
-   * key is not found.
-   */
-  indexOfKey: function(key) {
-    assertValidPublicKey(key);
-    var normalizedKey = PREFIX + key;
-    var computedPositions = this._getOrComputePositions();
-    var computedPosition = computedPositions.indexByKey[normalizedKey];
-    // Just writing it this way to make it clear this is intentional.
-    return computedPosition === undefined ? undefined : computedPosition;
-  },
-
-  /**
-   * @return {Array} An ordered array of this object's values.
-   */
-  toArray: function() {
-    var result = [];
-    var thisSet = this._normalizedObj;
-    for (var key in thisSet) {
-      if (thisSet.hasOwnProperty(key)) {
-        result.push(thisSet[key]);
-      }
-    }
-    return result;
-  },
-
-  /**
-   * Finds the key at a given position, or indicates via `undefined` that that
-   * position does not exist in the `OrderedMap`. It is appropriate to return
-   * undefined, indicating that the key doesn't exist in the `OrderedMap`
-   * because `undefined` is not ever a valid `OrderedMap` key.
-   *
-   * @private
-   * @param {number} pos Position for which we're querying the name.
-   * @return {string?} Name of the item at position `pos`, or `undefined` if
-   * there is no item at that position.
-   */
-  _getOrComputePositions: function() {
-    // TODO: Entertain computing this at construction time in some less
-    // performance critical paths.
-    var computedPositions = this._computedPositions;
-    if (!computedPositions) {
-      this._computePositions();
-    }
-    return this._computedPositions;
-  },
-
-  /**
-   * Precomputes the index/key mapping for future lookup. Since `OrderedMap`s
-   * are immutable, there is only ever a need to perform this once.
-   * @private
-   */
-  _computePositions: function() {
-    this._computedPositions = {
-      keyByIndex: {},
-      indexByKey: {}
-    };
-    var keyByIndex = this._computedPositions.keyByIndex;
-    var indexByKey = this._computedPositions.indexByKey;
-    var index = 0;
-    var thisSet = this._normalizedObj;
-    for (var key in thisSet) {
-      if (thisSet.hasOwnProperty(key)) {
-        keyByIndex[index] = key;
-        indexByKey[key] = index;
-        index++;
-      }
-    }
-  }
-};
-
-mixInto(OrderedMapImpl, OrderedMapMethods);
-
-var OrderedMap = {
-  from: function(orderedMap) {
-    invariant(
-      orderedMap instanceof OrderedMapImpl,
-      'OrderedMap.from(...): Expected an OrderedMap instance.'
-    );
-    return _fromNormalizedObjects(orderedMap._normalizedObj, null);
-  },
-
-  fromArray: function(arr, keyExtractor) {
-    invariant(
-      Array.isArray(arr),
-      'OrderedMap.fromArray(...): First argument must be an array.'
-    );
-    invariant(
-      typeof keyExtractor === 'function',
-      'OrderedMap.fromArray(...): Second argument must be a function used ' +
-      'to determine the unique key for each entry.'
-    );
-    return new OrderedMapImpl(
-      extractObjectFromArray(arr, keyExtractor),
-      arr.length
-    );
-  }
-};
-
-module.exports = OrderedMap;
diff --git a/src/utils/PooledClass.js b/src/utils/PooledClass.js
deleted file mode 100644
index e1ed2b100c8..00000000000
--- a/src/utils/PooledClass.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule PooledClass
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * Static poolers. Several custom versions for each potential number of
- * arguments. A completely generic pooler is easy to implement, but would
- * require accessing the `arguments` object. In each of these, `this` refers to
- * the Class itself, not an instance. If any others are needed, simply add them
- * here, or in their own files.
- */
-var oneArgumentPooler = function(copyFieldsFrom) {
-  var Klass = this;
-  if (Klass.instancePool.length) {
-    var instance = Klass.instancePool.pop();
-    Klass.call(instance, copyFieldsFrom);
-    return instance;
-  } else {
-    return new Klass(copyFieldsFrom);
-  }
-};
-
-var twoArgumentPooler = function(a1, a2) {
-  var Klass = this;
-  if (Klass.instancePool.length) {
-    var instance = Klass.instancePool.pop();
-    Klass.call(instance, a1, a2);
-    return instance;
-  } else {
-    return new Klass(a1, a2);
-  }
-};
-
-var threeArgumentPooler = function(a1, a2, a3) {
-  var Klass = this;
-  if (Klass.instancePool.length) {
-    var instance = Klass.instancePool.pop();
-    Klass.call(instance, a1, a2, a3);
-    return instance;
-  } else {
-    return new Klass(a1, a2, a3);
-  }
-};
-
-var fiveArgumentPooler = function(a1, a2, a3, a4, a5) {
-  var Klass = this;
-  if (Klass.instancePool.length) {
-    var instance = Klass.instancePool.pop();
-    Klass.call(instance, a1, a2, a3, a4, a5);
-    return instance;
-  } else {
-    return new Klass(a1, a2, a3, a4, a5);
-  }
-};
-
-var standardReleaser = function(instance) {
-  var Klass = this;
-  invariant(
-    instance instanceof Klass,
-    'Trying to release an instance into a pool of a different type.'
-  );
-  if (instance.destructor) {
-    instance.destructor();
-  }
-  if (Klass.instancePool.length < Klass.poolSize) {
-    Klass.instancePool.push(instance);
-  }
-};
-
-var DEFAULT_POOL_SIZE = 10;
-var DEFAULT_POOLER = oneArgumentPooler;
-
-/**
- * Augments `CopyConstructor` to be a poolable class, augmenting only the class
- * itself (statically) not adding any prototypical fields. Any CopyConstructor
- * you give this may have a `poolSize` property, and will look for a
- * prototypical `destructor` on instances (optional).
- *
- * @param {Function} CopyConstructor Constructor that can be used to reset.
- * @param {Function} pooler Customizable pooler.
- */
-var addPoolingTo = function(CopyConstructor, pooler) {
-  var NewKlass = CopyConstructor;
-  NewKlass.instancePool = [];
-  NewKlass.getPooled = pooler || DEFAULT_POOLER;
-  if (!NewKlass.poolSize) {
-    NewKlass.poolSize = DEFAULT_POOL_SIZE;
-  }
-  NewKlass.release = standardReleaser;
-  return NewKlass;
-};
-
-var PooledClass = {
-  addPoolingTo: addPoolingTo,
-  oneArgumentPooler: oneArgumentPooler,
-  twoArgumentPooler: twoArgumentPooler,
-  threeArgumentPooler: threeArgumentPooler,
-  fiveArgumentPooler: fiveArgumentPooler
-};
-
-module.exports = PooledClass;
diff --git a/src/utils/ReactChildren.js b/src/utils/ReactChildren.js
deleted file mode 100644
index 154e1361591..00000000000
--- a/src/utils/ReactChildren.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactChildren
- */
-
-"use strict";
-
-var PooledClass = require('PooledClass');
-
-var traverseAllChildren = require('traverseAllChildren');
-var warning = require('warning');
-
-var twoArgumentPooler = PooledClass.twoArgumentPooler;
-var threeArgumentPooler = PooledClass.threeArgumentPooler;
-
-/**
- * PooledClass representing the bookkeeping associated with performing a child
- * traversal. Allows avoiding binding callbacks.
- *
- * @constructor ForEachBookKeeping
- * @param {!function} forEachFunction Function to perform traversal with.
- * @param {?*} forEachContext Context to perform context with.
- */
-function ForEachBookKeeping(forEachFunction, forEachContext) {
-  this.forEachFunction = forEachFunction;
-  this.forEachContext = forEachContext;
-}
-PooledClass.addPoolingTo(ForEachBookKeeping, twoArgumentPooler);
-
-function forEachSingleChild(traverseContext, child, name, i) {
-  var forEachBookKeeping = traverseContext;
-  forEachBookKeeping.forEachFunction.call(
-    forEachBookKeeping.forEachContext, child, i);
-}
-
-/**
- * Iterates through children that are typically specified as `props.children`.
- *
- * The provided forEachFunc(child, index) will be called for each
- * leaf child.
- *
- * @param {?*} children Children tree container.
- * @param {function(*, int)} forEachFunc.
- * @param {*} forEachContext Context for forEachContext.
- */
-function forEachChildren(children, forEachFunc, forEachContext) {
-  if (children == null) {
-    return children;
-  }
-
-  var traverseContext =
-    ForEachBookKeeping.getPooled(forEachFunc, forEachContext);
-  traverseAllChildren(children, forEachSingleChild, traverseContext);
-  ForEachBookKeeping.release(traverseContext);
-}
-
-/**
- * PooledClass representing the bookkeeping associated with performing a child
- * mapping. Allows avoiding binding callbacks.
- *
- * @constructor MapBookKeeping
- * @param {!*} mapResult Object containing the ordered map of results.
- * @param {!function} mapFunction Function to perform mapping with.
- * @param {?*} mapContext Context to perform mapping with.
- */
-function MapBookKeeping(mapResult, mapFunction, mapContext) {
-  this.mapResult = mapResult;
-  this.mapFunction = mapFunction;
-  this.mapContext = mapContext;
-}
-PooledClass.addPoolingTo(MapBookKeeping, threeArgumentPooler);
-
-function mapSingleChildIntoContext(traverseContext, child, name, i) {
-  var mapBookKeeping = traverseContext;
-  var mapResult = mapBookKeeping.mapResult;
-
-  var keyUnique = !mapResult.hasOwnProperty(name);
-  warning(
-    keyUnique,
-    'ReactChildren.map(...): Encountered two children with the same key, ' +
-    '`%s`. Child keys must be unique; when two children share a key, only ' +
-    'the first child will be used.',
-    name
-  );
-
-  if (keyUnique) {
-    var mappedChild =
-      mapBookKeeping.mapFunction.call(mapBookKeeping.mapContext, child, i);
-    mapResult[name] = mappedChild;
-  }
-}
-
-/**
- * Maps children that are typically specified as `props.children`.
- *
- * The provided mapFunction(child, key, index) will be called for each
- * leaf child.
- *
- * TODO: This may likely break any calls to `ReactChildren.map` that were
- * previously relying on the fact that we guarded against null children.
- *
- * @param {?*} children Children tree container.
- * @param {function(*, int)} mapFunction.
- * @param {*} mapContext Context for mapFunction.
- * @return {object} Object containing the ordered map of results.
- */
-function mapChildren(children, func, context) {
-  if (children == null) {
-    return children;
-  }
-
-  var mapResult = {};
-  var traverseContext = MapBookKeeping.getPooled(mapResult, func, context);
-  traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
-  MapBookKeeping.release(traverseContext);
-  return mapResult;
-}
-
-function forEachSingleChildDummy(traverseContext, child, name, i) {
-  return null;
-}
-
-/**
- * Count the number of children that are typically specified as
- * `props.children`.
- *
- * @param {?*} children Children tree container.
- * @return {number} The number of children.
- */
-function countChildren(children, context) {
-  return traverseAllChildren(children, forEachSingleChildDummy, null);
-}
-
-var ReactChildren = {
-  forEach: forEachChildren,
-  map: mapChildren,
-  count: countChildren
-};
-
-module.exports = ReactChildren;
diff --git a/src/utils/Transaction.js b/src/utils/Transaction.js
deleted file mode 100644
index ede94e0f2e2..00000000000
--- a/src/utils/Transaction.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule Transaction
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * `Transaction` creates a black box that is able to wrap any method such that
- * certain invariants are maintained before and after the method is invoked
- * (Even if an exception is thrown while invoking the wrapped method). Whoever
- * instantiates a transaction can provide enforcers of the invariants at
- * creation time. The `Transaction` class itself will supply one additional
- * automatic invariant for you - the invariant that any transaction instance
- * should not be run while it is already being run. You would typically create a
- * single instance of a `Transaction` for reuse multiple times, that potentially
- * is used to wrap several different methods. Wrappers are extremely simple -
- * they only require implementing two methods.
- *
- * <pre>
- *                       wrappers (injected at creation time)
- *                                      +        +
- *                                      |        |
- *                    +-----------------|--------|--------------+
- *                    |                 v        |              |
- *                    |      +---------------+   |              |
- *                    |   +--|    wrapper1   |---|----+         |
- *                    |   |  +---------------+   v    |         |
- *                    |   |          +-------------+  |         |
- *                    |   |     +----|   wrapper2  |--------+   |
- *                    |   |     |    +-------------+  |     |   |
- *                    |   |     |                     |     |   |
- *                    |   v     v                     v     v   | wrapper
- *                    | +---+ +---+   +---------+   +---+ +---+ | invariants
- * perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
- * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
- *                    | |   | |   |   |         |   |   | |   | |
- *                    | |   | |   |   |         |   |   | |   | |
- *                    | |   | |   |   |         |   |   | |   | |
- *                    | +---+ +---+   +---------+   +---+ +---+ |
- *                    |  initialize                    close    |
- *                    +-----------------------------------------+
- * </pre>
- *
- * Use cases:
- * - Preserving the input selection ranges before/after reconciliation.
- *   Restoring selection even in the event of an unexpected error.
- * - Deactivating events while rearranging the DOM, preventing blurs/focuses,
- *   while guaranteeing that afterwards, the event system is reactivated.
- * - Flushing a queue of collected DOM mutations to the main UI thread after a
- *   reconciliation takes place in a worker thread.
- * - Invoking any collected `componentDidUpdate` callbacks after rendering new
- *   content.
- * - (Future use case): Wrapping particular flushes of the `ReactWorker` queue
- *   to preserve the `scrollTop` (an automatic scroll aware DOM).
- * - (Future use case): Layout calculations before and after DOM upates.
- *
- * Transactional plugin API:
- * - A module that has an `initialize` method that returns any precomputation.
- * - and a `close` method that accepts the precomputation. `close` is invoked
- *   when the wrapped process is completed, or has failed.
- *
- * @param {Array<TransactionalWrapper>} transactionWrapper Wrapper modules
- * that implement `initialize` and `close`.
- * @return {Transaction} Single transaction for reuse in thread.
- *
- * @class Transaction
- */
-var Mixin = {
-  /**
-   * Sets up this instance so that it is prepared for collecting metrics. Does
-   * so such that this setup method may be used on an instance that is already
-   * initialized, in a way that does not consume additional memory upon reuse.
-   * That can be useful if you decide to make your subclass of this mixin a
-   * "PooledClass".
-   */
-  reinitializeTransaction: function() {
-    this.transactionWrappers = this.getTransactionWrappers();
-    if (!this.wrapperInitData) {
-      this.wrapperInitData = [];
-    } else {
-      this.wrapperInitData.length = 0;
-    }
-    this._isInTransaction = false;
-  },
-
-  _isInTransaction: false,
-
-  /**
-   * @abstract
-   * @return {Array<TransactionWrapper>} Array of transaction wrappers.
-   */
-  getTransactionWrappers: null,
-
-  isInTransaction: function() {
-    return !!this._isInTransaction;
-  },
-
-  /**
-   * Executes the function within a safety window. Use this for the top level
-   * methods that result in large amounts of computation/mutations that would
-   * need to be safety checked.
-   *
-   * @param {function} method Member of scope to call.
-   * @param {Object} scope Scope to invoke from.
-   * @param {Object?=} args... Arguments to pass to the method (optional).
-   *                           Helps prevent need to bind in many cases.
-   * @return Return value from `method`.
-   */
-  perform: function(method, scope, a, b, c, d, e, f) {
-    invariant(
-      !this.isInTransaction(),
-      'Transaction.perform(...): Cannot initialize a transaction when there ' +
-      'is already an outstanding transaction.'
-    );
-    var errorThrown;
-    var ret;
-    try {
-      this._isInTransaction = true;
-      // Catching errors makes debugging more difficult, so we start with
-      // errorThrown set to true before setting it to false after calling
-      // close -- if it's still set to true in the finally block, it means
-      // one of these calls threw.
-      errorThrown = true;
-      this.initializeAll(0);
-      ret = method.call(scope, a, b, c, d, e, f);
-      errorThrown = false;
-    } finally {
-      try {
-        if (errorThrown) {
-          // If `method` throws, prefer to show that stack trace over any thrown
-          // by invoking `closeAll`.
-          try {
-            this.closeAll(0);
-          } catch (err) {
-          }
-        } else {
-          // Since `method` didn't throw, we don't want to silence the exception
-          // here.
-          this.closeAll(0);
-        }
-      } finally {
-        this._isInTransaction = false;
-      }
-    }
-    return ret;
-  },
-
-  initializeAll: function(startIndex) {
-    var transactionWrappers = this.transactionWrappers;
-    for (var i = startIndex; i < transactionWrappers.length; i++) {
-      var wrapper = transactionWrappers[i];
-      try {
-        // Catching errors makes debugging more difficult, so we start with the
-        // OBSERVED_ERROR state before overwriting it with the real return value
-        // of initialize -- if it's still set to OBSERVED_ERROR in the finally
-        // block, it means wrapper.initialize threw.
-        this.wrapperInitData[i] = Transaction.OBSERVED_ERROR;
-        this.wrapperInitData[i] = wrapper.initialize ?
-          wrapper.initialize.call(this) :
-          null;
-      } finally {
-        if (this.wrapperInitData[i] === Transaction.OBSERVED_ERROR) {
-          // The initializer for wrapper i threw an error; initialize the
-          // remaining wrappers but silence any exceptions from them to ensure
-          // that the first error is the one to bubble up.
-          try {
-            this.initializeAll(i + 1);
-          } catch (err) {
-          }
-        }
-      }
-    }
-  },
-
-  /**
-   * Invokes each of `this.transactionWrappers.close[i]` functions, passing into
-   * them the respective return values of `this.transactionWrappers.init[i]`
-   * (`close`rs that correspond to initializers that failed will not be
-   * invoked).
-   */
-  closeAll: function(startIndex) {
-    invariant(
-      this.isInTransaction(),
-      'Transaction.closeAll(): Cannot close transaction when none are open.'
-    );
-    var transactionWrappers = this.transactionWrappers;
-    for (var i = startIndex; i < transactionWrappers.length; i++) {
-      var wrapper = transactionWrappers[i];
-      var initData = this.wrapperInitData[i];
-      var errorThrown;
-      try {
-        // Catching errors makes debugging more difficult, so we start with
-        // errorThrown set to true before setting it to false after calling
-        // close -- if it's still set to true in the finally block, it means
-        // wrapper.close threw.
-        errorThrown = true;
-        if (initData !== Transaction.OBSERVED_ERROR) {
-          wrapper.close && wrapper.close.call(this, initData);
-        }
-        errorThrown = false;
-      } finally {
-        if (errorThrown) {
-          // The closer for wrapper i threw an error; close the remaining
-          // wrappers but silence any exceptions from them to ensure that the
-          // first error is the one to bubble up.
-          try {
-            this.closeAll(i + 1);
-          } catch (e) {
-          }
-        }
-      }
-    }
-    this.wrapperInitData.length = 0;
-  }
-};
-
-var Transaction = {
-
-  Mixin: Mixin,
-
-  /**
-   * Token to look for to determine if an error occured.
-   */
-  OBSERVED_ERROR: {}
-
-};
-
-module.exports = Transaction;
diff --git a/src/utils/__tests__/LegacyImmutableObject-test.js b/src/utils/__tests__/LegacyImmutableObject-test.js
deleted file mode 100644
index bb93e9b1370..00000000000
--- a/src/utils/__tests__/LegacyImmutableObject-test.js
+++ /dev/null
@@ -1,300 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-require('mock-modules')
-    .dontMock('LegacyImmutableObject');
-
-var LegacyImmutableObject;
-
-/**
- * To perform performance testing of using `LegacyImmutableObject` vs. not using
- * `LegacyImmutableObject`, such testing must be done with __DEV__ set to false.
- */
-describe('LegacyImmutableObject', function() {
-  var message;
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    LegacyImmutableObject = require('LegacyImmutableObject');
-    this.addMatchers({
-      /**
-       * Equivalent with respect to serialization. Must stringify because
-       * constructors are different and other comparison methods will not
-       * consider them structurally equal. Probably not useful for use outside
-       * of this test module.
-       */
-      toBeSeriallyEqualTo: function(expected) {
-        var actual = this.actual;
-        var notText = this.isNot ? " not" : "";
-        this.message = function() {
-          return "Expected " + JSON.stringify(actual) + notText +
-              " to be serially equal to " + JSON.stringify(expected);
-        };
-
-        return JSON.stringify(actual) === JSON.stringify(expected);
-      }
-    });
-  });
-
-  /**
-   * We are in __DEV__ by default.
-   */
-  var testDev = function(message, testFunc) {
-    it(message, testFunc);
-  };
-
-  var testProd = function(message, testFunc) {
-    // Temporarily enter production mode
-    window.__DEV__ = false;
-    it(message, testFunc);
-    window.__DEV__ = true;
-  };
-
-  var testDevAndProd = function(message, testFunc) {
-    testDev(message + ':DEV', testFunc);
-    testProd(message + ':PROD', testFunc);
-  };
-
-  testDev('should be running in DEV', function() {
-    expect(window.__DEV__).toBe(true);
-  });
-
-  testDev('should not require initial map to be an object', function() {
-    // These won't throw because they're coerced
-
-    expect(function() {
-      new LegacyImmutableObject([1,2,3]);
-    }).not.toThrow();
-
-    expect(function() {
-      new LegacyImmutableObject('asdf');
-    }).not.toThrow();
-
-    expect(function() {
-      new LegacyImmutableObject({oldField: 'asdf', fieldTwo: null});
-    }).not.toThrow();
-  });
-
-  testDev('should not exceed maximum call stack size with nodes', function() {
-    var node = document.createElement('div');
-    var object = new LegacyImmutableObject({node: node});
-    expect(object.node).toBe(node);
-  });
-
-  testDevAndProd('should not throw when not mutating directly', function() {
-    var io = new LegacyImmutableObject({oldField: 'asdf'});
-    expect(function() {
-      LegacyImmutableObject.set(io, {newField: null}); // not a mutation!
-    }).not.toThrow();
-  });
-
-  testDev('should prevent shallow field addition when strict', function() {
-    expect(function() {
-      var io = new LegacyImmutableObject({oldField: 'asdf'});
-      io.newField = 'this will not work';
-    }).toThrow();
-  });
-
-  testDev('should prevent shallow field mutation when strict', function() {
-    expect(function() {
-      var io = new LegacyImmutableObject({oldField: 'asdf'});
-      io.oldField = 'this will not work!';
-    }).toThrow();
-  });
-
-  testDev('should prevent deep field addition when strict', function() {
-    expect(function() {
-      var io =
-        new LegacyImmutableObject(
-          {shallowField: {deepField: {oldField: null}}}
-        );
-      io.shallowField.deepField.oldField = 'this will not work!';
-    }).toThrow();
-  });
-
-  testDev('should prevent deep field mutation when strict', function() {
-    expect(function() {
-      var io =
-        new LegacyImmutableObject(
-          {shallowField: {deepField: {oldField: null}}}
-        );
-      io.shallowField.deepField.newField = 'this will not work!';
-    }).toThrow();
-  });
-
-  testDevAndProd(
-    'should create object with same structure when set with {}',
-    function() {
-      var beforeIO =
-        new LegacyImmutableObject(
-          {shallowField: {deepField: {oldField: null}}}
-        );
-      var afterIO = LegacyImmutableObject.set(beforeIO, {});
-      expect(afterIO).toBeSeriallyEqualTo(beforeIO);
-      expect(afterIO).not.toBe(beforeIO);
-    }
-  );
-
-  testDevAndProd(
-    'should create distinct object with shallow field insertion',
-    function() {
-      var beforeStructure = {
-        oldShallowField: {
-          deepField: {
-            oldField: null
-          }
-        }
-      };
-
-      var delta = {
-        newShallowField: 'newShallowFieldHere'
-      };
-
-      var expectedAfterStructure = {
-        oldShallowField: {
-          deepField: {
-            oldField: null
-          }
-        },
-        newShallowField: 'newShallowFieldHere'
-      };
-
-      var beforeIO = new LegacyImmutableObject(beforeStructure);
-      var afterIO = LegacyImmutableObject.set(beforeIO, delta);
-      expect(afterIO).toBeSeriallyEqualTo(expectedAfterStructure);
-      expect(afterIO).not.toBe(beforeIO);
-    }
-  );
-
-  testDevAndProd(
-    'should create distinct object with shallow field mutation',
-      function() {
-      var beforeStructure = {
-        oldShallowField: {
-          deepField: {
-            oldField: null
-          }
-        }
-      };
-
-      var delta = {
-        oldShallowField: 'this will clobber the old field'
-      };
-
-      var expectedAfterStructure = {
-        oldShallowField: 'this will clobber the old field'
-      };
-
-      var beforeIO = new LegacyImmutableObject(beforeStructure);
-      var afterIO = LegacyImmutableObject.set(beforeIO, delta);
-      expect(afterIO).toBeSeriallyEqualTo(expectedAfterStructure);
-      expect(afterIO).not.toBe(beforeIO);
-    }
-  );
-
-  message = 'should create distinct object with deep field insertion';
-  testDevAndProd(message, function() {
-    var beforeStructure = {
-      oldShallowField: {
-        deepField: {
-          oldField: null
-        }
-      }
-    };
-
-    var delta = {
-      oldShallowField: {newDeepField: 'hello'}
-    };
-
-    // LegacyImmutableObject does not yet support deep merging with
-    // LegacyImmutableObject.set().
-    var expectedAfterStructure = {
-      oldShallowField: {newDeepField: 'hello'}
-    };
-
-    var beforeIO = new LegacyImmutableObject(beforeStructure);
-    var afterIO = LegacyImmutableObject.set(beforeIO, delta);
-    expect(afterIO).toBeSeriallyEqualTo(expectedAfterStructure);
-    expect(afterIO).not.toBe(beforeIO);
-  });
-
-  message =
-    'should tolerate arrays at deeper levels and prevent mutation on them';
-  testDevAndProd(message, function() {
-    if (window.callPhantom) {
-      // PhantomJS has a bug with Object.freeze and Arrays.
-      // https://github.com/ariya/phantomjs/issues/10817
-      return;
-    }
-    var beforeStructure = {
-      shallowField: [1,'second field',3]
-    };
-    var io = new LegacyImmutableObject(beforeStructure);
-    expect(function() {
-      io.newField = 'nope!';
-    }).toThrow();
-    expect(function() {
-      io.shallowField[0] = 'nope!';
-    }).toThrow();
-    expect(io.shallowField[1]).toEqual('second field');
-  });
-
-  message = 'should provide a setField interface as sugar for set()';
-  testDevAndProd(message, function() {
-    var beforeIO = new LegacyImmutableObject({initialField: null});
-    var afterIO =
-      LegacyImmutableObject.setField(beforeIO, 'anotherField', 'anotherValue');
-    expect(afterIO).toBeSeriallyEqualTo({
-      initialField: null,
-      anotherField: 'anotherValue'
-    });
-    expect(afterIO).not.toBe(beforeIO);
-  });
-
-  message = 'should recursively create distinct objects when deep copying';
-  testDevAndProd(message, function() {
-    var beforeIO = new LegacyImmutableObject({
-      a: {b: 'b', c: {}, d: 'd', e: new LegacyImmutableObject({f: 'f'}) }
-    });
-    var afterIO = LegacyImmutableObject.setDeep(beforeIO, {
-      a: {b: {}, c: 'C', e: {f: 'F', g: 'G'}, h: 'H'}
-    });
-    expect(afterIO).toBeSeriallyEqualTo({
-      a: {b: {}, c: 'C', d: 'd', e: {f: 'F', g: 'G'}, h: 'H'}
-    });
-    expect(afterIO).not.toBe(beforeIO);
-    expect(afterIO.a).not.toBe(beforeIO.a);
-    expect(afterIO.a.e).not.toBe(beforeIO.a.e);
-  });
-
-  testDevAndProd('should deep copy member immutability', function() {
-    var beforeIO = new LegacyImmutableObject({
-      a: {b: new LegacyImmutableObject({c: 'c'}), e: {f: 'f'}}
-    });
-    var afterIO = LegacyImmutableObject.setDeep(beforeIO, {
-      a: {b: {d: 'D'}, e: new LegacyImmutableObject({g: 'G'})}
-    });
-    expect(afterIO).toBeSeriallyEqualTo({
-      a: {b: {c: 'c', d: 'D'}, e: {f: 'f', g: 'G'}}
-    });
-    expect(afterIO instanceof LegacyImmutableObject).toBe(true);
-    expect(afterIO.a.b instanceof LegacyImmutableObject).toBe(true);
-    expect(afterIO.a.e instanceof LegacyImmutableObject).toBe(true);
-  });
-});
diff --git a/src/utils/__tests__/OrderedMap-test.js b/src/utils/__tests__/OrderedMap-test.js
deleted file mode 100644
index cbb154cfb18..00000000000
--- a/src/utils/__tests__/OrderedMap-test.js
+++ /dev/null
@@ -1,950 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var OrderedMap;
-
-/**
- * Shared, reusable objects.
- */
-var hasEmptyStringKey = {
-  'thisKeyIsFine': {data: []},
-  '': {thisShouldCauseAFailure: []},
-  'thisKeyIsAlsoFine': {data: []}
-};
-
-/**
- * Used as map/forEach callback.
- */
-var duplicate = function(itm, key, count) {
-  return {
-    uniqueID: itm.uniqueID,
-    val: itm.val + key + count + this.justToTestScope
-  };
-};
-
-// Should not be allowed - because then null/'null' become impossible to
-// distinguish. Every key MUST be a string period!
-var hasNullAndUndefStringKey = [
-  {uniqueID: 'undefined', val: 'thisIsUndefined'},
-  {uniqueID: 'null', val: 'thisIsNull'}
-];
-var hasNullKey = [
-  {uniqueID: 'thisKeyIsFine', data: []},
-  {uniqueID: 'thisKeyIsAlsoFine', data: []},
-  {uniqueID: null, data: []}
-];
-
-var hasObjectKey = [
-  {uniqueID: 'thisKeyIsFine', data: []},
-  {uniqueID: 'thisKeyIsAlsoFine', data: []},
-  {uniqueID: {}, data: []}
-];
-
-var hasArrayKey = [
-  {uniqueID: 'thisKeyIsFine', data: []},
-  {uniqueID: 'thisKeyIsAlsoFine', data: []},
-  {uniqueID: [], data: []}
-];
-
-// This should be allowed
-var hasNullStringKey = [
-  {uniqueID: 'thisKeyIsFine', data: []},
-  {uniqueID: 'thisKeyIsAlsoFine', data: []},
-  {uniqueID: 'null', data: []}
-];
-
-var hasUndefinedKey = [
-  {uniqueID: 'thisKeyIsFine', data: []},
-  {uniqueID: 'thisKeyIsAlsoFine', data: []},
-  {uniqueID: undefined, data: []}
-];
-
-var hasUndefinedStringKey = [
-  {uniqueID: 'thisKeyIsFine', data: []},
-  {uniqueID: 'thisKeyIsAlsoFine', data: []},
-  {uniqueID: 'undefined', data: []}
-];
-
-var hasPositiveNumericKey = [
-  {uniqueID: 'notANumber', data: []},
-  {uniqueID: '5', data: []},
-  {uniqueID: 'notAnotherNumber',data: []}
-];
-
-var hasZeroStringKey = [
-  {uniqueID: 'greg', data: 'grego'},
-  {uniqueID: '0', data: '0o'},
-  {uniqueID: 'tom', data: 'tomo'}
-];
-
-var hasZeroNumberKey = [
-  {uniqueID: 'greg', data: 'grego'},
-  {uniqueID: 0, data: '0o'},
-  {uniqueID: 'tom', data: 'tomo'}
-];
-
-var hasAllNumericStringKeys = [
-  {uniqueID: '0', name: 'Gregory'},
-  {uniqueID: '2', name: 'James'},
-  {uniqueID: '1', name: 'Tom'}
-];
-
-var hasAllNumericKeys = [
-  {uniqueID: 0, name: 'Gregory'},
-  {uniqueID: 2, name: 'James'},
-  {uniqueID: 1, name: 'Tom'}
-];
-
-var hasAllValidKeys = [
-  {uniqueID: 'keyOne', value: 'valueOne'},
-  {uniqueID: 'keyTwo', value: 'valueTwo'}
-];
-
-var hasDuplicateKeys = [
-  {uniqueID: 'keyOne', value: 'valueOne'},
-  {uniqueID: 'keyTwo', value: 'valueTwo'},
-  {uniqueID: 'keyOne', value: 'valueThree'}
-];
-
-var idEntities = [
-  {uniqueID: 'greg', name: 'Gregory'},
-  {uniqueID: 'james', name: 'James'},
-  {uniqueID: 'tom', name: 'Tom'}
-];
-
-var hasEmptyKey = [
-  {uniqueID: 'greg', name: 'Gregory'},
-  {uniqueID: '', name: 'James'},
-  {uniqueID: 'tom', name: 'Tom'}
-];
-
-var extractUniqueID = function(entity) {
-  return entity.uniqueID;
-};
-
-describe('OrderedMap', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    OrderedMap = require('OrderedMap');
-  });
-
-  it('should create according to simple object with keys', function() {
-    OrderedMap.fromArray(hasAllValidKeys, extractUniqueID);
-    // Iterate over and ensure key order.
-  });
-
-  it('should create from array when providing an identity CB', function() {
-    expect(function() {
-      OrderedMap.fromArray(idEntities, extractUniqueID);
-    }).not.toThrow();
-  });
-
-  it('should throw if constructing from Array without identity CB', function() {
-    OrderedMap.fromArray(idEntities, extractUniqueID);
-    // Iterate and ensure key order
-  });
-
-  it('should not throw when fromArray extracts a numeric key', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasPositiveNumericKey, extractUniqueID);
-    }).not.toThrow();
-
-  });
-
-  it('should throw when any key is the empty string', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasEmptyKey, extractUniqueID);
-    }).toThrow();
-  });
-
-  it('should not throw when a key is the string "undefined" or "null"',
-    function() {
-      var om = OrderedMap.fromArray(hasNullAndUndefStringKey, extractUniqueID);
-      expect(om.length).toBe(2);
-      expect(om.indexOfKey('undefined')).toBe(0);
-      expect(om.indexOfKey('null')).toBe(1);
-      expect(om.keyAfter('undefined')).toBe('null');
-      expect(om.keyAfter('null')).toBe(undefined);
-      expect(om.keyBefore('undefined')).toBe(undefined);
-      expect(om.has('undefined')).toBe(true);
-      expect(om.has('null')).toBe(true);
-      expect(om.get('undefined').val).toBe('thisIsUndefined');
-      expect(om.get('null').val).toBe('thisIsNull');
-    });
-
-
-  /**
-   * Numeric keys are cast to strings.
-   */
-  it('should not throw when a key is the number zero', function() {
-    var om = OrderedMap.fromArray(hasZeroNumberKey, extractUniqueID);
-    expect(om.length).toBe(3);
-    expect(om.indexOfKey('0')).toBe(1);
-    expect(om.indexOfKey(0)).toBe(1);
-  });
-
-  it('should throw when any key is falsey', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasEmptyStringKey, extractUniqueID);
-    }).toThrow();
-
-    expect(function() {
-      OrderedMap.fromArray(hasNullKey, extractUniqueID);
-    }).toThrow();
-
-    expect(function() {
-      OrderedMap.fromArray(hasUndefinedKey, extractUniqueID);
-    }).toThrow();
-  });
-
-  it('should not throw on string keys "undefined/null"', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasNullStringKey, extractUniqueID);
-    }).not.toThrow();
-
-    expect(function() {
-      OrderedMap.fromArray(hasUndefinedStringKey, extractUniqueID);
-    }).not.toThrow();
-  });
-
-  it('should throw on extracting keys that are not strings/nums', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasObjectKey, extractUniqueID);
-    }).toThrow();
-
-    expect(function() {
-      OrderedMap.fromArray(hasArrayKey, extractUniqueID);
-    }).toThrow();
-  });
-
-  it('should throw if instantiating with duplicate key', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasDuplicateKeys, extractUniqueID);
-    }).toThrow();
-  });
-
-  it('should not throw when a key is the string "0"', function() {
-    var verifyOM = function(om) {
-      expect(om.length).toBe(3);
-      expect(om.indexOfKey('greg')).toBe(0);
-      expect(om.indexOfKey('0')).toBe(1);
-      expect(om.indexOfKey(0)).toBe(1); // Casts on writes and reads.
-      expect(om.indexOfKey('tom')).toBe(2);
-      expect(om.keyAfter('greg')).toBe('0');
-      expect(om.keyAfter('0')).toBe('tom');
-      expect(om.keyAfter(0)).toBe('tom');
-      expect(om.keyAfter('tom')).toBe(undefined);
-      expect(om.keyBefore('greg')).toBe(undefined);
-      expect(om.keyBefore(0)).toBe('greg');
-      expect(om.keyBefore('0')).toBe('greg');
-      expect(om.keyBefore('tom')).toBe('0');
-      expect(om.has('undefined')).toBe(false);
-      expect(om.has(0)).toBe(true);
-      expect(om.has('0')).toBe(true);
-    };
-    var om = OrderedMap.fromArray(hasZeroStringKey, extractUniqueID);
-    verifyOM(om);
-    om = OrderedMap.fromArray(hasZeroNumberKey, extractUniqueID);
-    verifyOM(om);
-  });
-
-  it('should throw when getting invalid public key', function() {
-    var om = OrderedMap.fromArray(hasAllValidKeys, extractUniqueID);
-    expect(function() {
-      om.has(undefined);
-    }).toThrow();
-    expect(function() {
-      om.get(undefined);
-    }).toThrow();
-    expect(function() {
-      om.has(null);
-    }).toThrow();
-    expect(function() {
-      om.get(null);
-    }).toThrow();
-    expect(function() {
-      om.has('');
-    }).toThrow();
-    expect(function() {
-      om.get('');
-    }).toThrow();
-  });
-
-  it('should throw when any key is falsey', function() {
-    expect(function() {
-      OrderedMap.fromArray(hasEmptyStringKey, extractUniqueID);
-    }).toThrow();
-
-    expect(function() {
-      OrderedMap.fromArray(hasNullKey, extractUniqueID);
-    }).toThrow();
-
-    expect(function() {
-      OrderedMap.fromArray(hasUndefinedKey, extractUniqueID);
-    }).toThrow();
-  });
-
-
-  it('should throw when fromArray is passed crazy args', function() {
-    // Test passing another OrderedMap (when it expects a plain object.)
-    // This is probably not what you meant to do! We should error.
-    var validOM = OrderedMap.fromArray(hasAllValidKeys, extractUniqueID);
-    expect(function() {
-      OrderedMap.fromArray({uniqueID: 'asdf'}, extractUniqueID);
-    }).toThrow();
-    expect(function() {
-      OrderedMap.fromArray(validOM, extractUniqueID);
-    }).toThrow();
-  });
-
-  it('should throw when fromArray is passed crazy things', function() {
-    expect(function() {
-      OrderedMap.fromArray(null, extractUniqueID);
-    }).toThrow();
-    expect(function() {
-      OrderedMap.fromArray('stringgg', extractUniqueID);
-    }).toThrow();
-    expect(function() {
-      OrderedMap.fromArray(undefined, extractUniqueID);
-    }).toThrow();
-    expect(function() {
-      OrderedMap.fromArray(new Date(), extractUniqueID);
-    }).toThrow();
-    expect(function() {
-      OrderedMap.fromArray({}, extractUniqueID);
-    }).toThrow();
-
-    // Test failure without extractor
-    expect(function() {
-      OrderedMap.fromArray(idEntities);
-    }).toThrow();
-    expect(function() {
-      OrderedMap.fromArray(idEntities, extractUniqueID);
-    }).not.toThrow();
-  });
-
-  // Testing methods that accept other `OrderedMap`s.
-  it('should throw when from/merge is passed an non-OrderedMap.', function() {
-    // Test passing an array to construction.
-    expect(function() {
-      OrderedMap.from(idEntities, extractUniqueID);
-    }).toThrow();
-
-    // Test passing an array to merge.
-    expect(function() {
-      OrderedMap.fromArray(idEntities, extractUniqueID)
-        .merge(idEntities, extractUniqueID);
-    }).toThrow();
-
-
-    // Test passing a plain object to merge.
-    expect(function() {
-      OrderedMap.fromArray(
-        idEntities,
-        extractUniqueID
-      ).merge({blah: 'willFail'});
-    }).toThrow();
-  });
-
-  it('should throw when accessing key before/after of non-key', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'first'},
-      {uniqueID: 'two'}], extractUniqueID
-    );
-    expect(function() {
-      om.keyBefore('dog');
-    }).toThrow();
-    expect(function() {
-      om.keyAfter('cat');
-    }).toThrow();
-    expect(function() {
-      om.keyAfter(null);
-    }).toThrow();
-    expect(function() {
-      om.keyAfter(undefined);
-    }).toThrow();
-  });
-
-  it('should throw passing invalid/not-present-keys to before/after',
-    function() {
-      var om = OrderedMap.fromArray([
-        {uniqueID: 'one', val: 'first'},
-        {uniqueID: 'two', val: 'second'},
-        {uniqueID: 'three', val: 'third'},
-        {uniqueID: 'four', val: 'fourth'}
-      ], extractUniqueID);
-
-      expect(function() {
-        om.keyBefore('');
-      }).toThrow();
-      expect(function() {
-        om.keyBefore(null);
-      }).toThrow();
-      expect(function() {
-        om.keyBefore(undefined);
-      }).toThrow();
-      expect(function() {
-        om.keyBefore('notInTheOrderedMap!');
-      }).toThrow();
-
-      expect(function() {
-        om.keyAfter('');
-      }).toThrow();
-      expect(function() {
-        om.keyAfter(null);
-      }).toThrow();
-      expect(function() {
-        om.keyAfter(undefined);
-      }).toThrow();
-      expect(function() {
-        om.keyAfter('notInTheOrderedMap!');
-      }).toThrow();
-
-      expect(function() {
-        om.nthKeyAfter('', 1);
-      }).toThrow();
-      expect(function() {
-        om.nthKeyAfter(null, 1);
-      }).toThrow();
-      expect(function() {
-        om.nthKeyAfter(undefined, 1);
-      }).toThrow();
-      expect(function() {
-        om.nthKeyAfter('notInTheOrderedMap!', 1);
-      }).toThrow();
-
-      expect(function() {
-        om.nthKeyBefore('', 1);
-      }).toThrow();
-      expect(function() {
-        om.nthKeyBefore(null, 1);
-      }).toThrow();
-      expect(function() {
-        om.nthKeyBefore(undefined, 1);
-      }).toThrow();
-      expect(function() {
-        om.nthKeyBefore('notInTheOrderedMap!', 1);
-      }).toThrow();
-    });
-
-  it('should correctly determine the nth key after before', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'one', val: 'first'},
-      {uniqueID: 'two', val: 'second'},
-      {uniqueID: 'three', val: 'third'},
-      {uniqueID: 'four', val: 'fourth'}
-    ], extractUniqueID);
-    expect(om.keyBefore('one')).toBe(undefined); // first key
-    expect(om.keyBefore('two')).toBe('one');
-    expect(om.keyBefore('three')).toBe('two');
-    expect(om.keyBefore('four')).toBe('three');
-
-    expect(om.keyAfter('one')).toBe('two'); // first key
-    expect(om.keyAfter('two')).toBe('three');
-    expect(om.keyAfter('three')).toBe('four');
-    expect(om.keyAfter('four')).toBe(undefined);
-
-    expect(om.nthKeyBefore('one', 0)).toBe('one'); // first key
-    expect(om.nthKeyBefore('one', 1)).toBe(undefined);
-    expect(om.nthKeyBefore('one', 2)).toBe(undefined);
-    expect(om.nthKeyBefore('two', 0)).toBe('two');
-    expect(om.nthKeyBefore('two', 1)).toBe('one');
-    expect(om.nthKeyBefore('four', 0)).toBe('four');
-    expect(om.nthKeyBefore('four', 1)).toBe('three');
-
-    expect(om.nthKeyAfter('one', 0)).toBe('one');
-    expect(om.nthKeyAfter('one', 1)).toBe('two');
-    expect(om.nthKeyAfter('one', 2)).toBe('three');
-    expect(om.nthKeyAfter('two', 0)).toBe('two');
-    expect(om.nthKeyAfter('two', 1)).toBe('three');
-    expect(om.nthKeyAfter('four', 0)).toBe('four');
-    expect(om.nthKeyAfter('four', 1)).toBe(undefined);
-  });
-
-  it('should compute key indices correctly', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'one', val: 'first'},
-      {uniqueID: 'two', val: 'second'}
-    ], extractUniqueID);
-    expect(om.keyAtIndex(0)).toBe('one');
-    expect(om.keyAtIndex(1)).toBe('two');
-    expect(om.keyAtIndex(2)).toBe(undefined);
-    expect(om.indexOfKey('one')).toBe(0);
-    expect(om.indexOfKey('two')).toBe(1);
-    expect(om.indexOfKey('nope')).toBe(undefined);
-    expect(function() {
-      om.indexOfKey(null);
-    }).toThrow();
-    expect(function() {
-      om.indexOfKey(undefined);
-    }).toThrow();
-    expect(function() {
-      om.indexOfKey(''); // Empty key is not allowed
-    }).toThrow();
-  });
-
-  it('should compute indices on array that extracted numeric ids', function() {
-    var om = OrderedMap.fromArray(hasZeroStringKey, extractUniqueID);
-    expect(om.keyAtIndex(0)).toBe('greg');
-    expect(om.keyAtIndex(1)).toBe('0');
-    expect(om.keyAtIndex(2)).toBe('tom');
-    expect(om.indexOfKey('greg')).toBe(0);
-    expect(om.indexOfKey('0')).toBe(1);
-    expect(om.indexOfKey('tom')).toBe(2);
-
-
-    var verifyNumericKeys = function(om) {
-      expect(om.keyAtIndex(0)).toBe('0');
-      expect(om.keyAtIndex(1)).toBe('2');
-      expect(om.keyAtIndex(2)).toBe('1');
-      expect(om.indexOfKey('0')).toBe(0);
-      expect(om.indexOfKey('2')).toBe(1); // Proove these are not ordered by
-      expect(om.indexOfKey('1')).toBe(2); // their keys
-    };
-    var omStringNumberKeys =
-      OrderedMap.fromArray(hasAllNumericStringKeys, extractUniqueID);
-    verifyNumericKeys(omStringNumberKeys);
-    var omNumericKeys =
-      OrderedMap.fromArray(hasAllNumericKeys, extractUniqueID);
-    verifyNumericKeys(omNumericKeys);
-  });
-
-  it('should compute indices on mutually exclusive merge', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'one', val: 'first'},
-      {uniqueID: 'two', val: 'second'}
-    ], extractUniqueID);
-    var om2 = OrderedMap.fromArray([
-      {uniqueID: 'three', val: 'third'}
-    ], extractUniqueID);
-    var res = om.merge(om2);
-
-    expect(res.length).toBe(3);
-
-    expect(res.keyAtIndex(0)).toBe('one');
-    expect(res.keyAtIndex(1)).toBe('two');
-    expect(res.keyAtIndex(2)).toBe('three');
-    expect(res.keyAtIndex(3)).toBe(undefined);
-
-    expect(res.indexOfKey('one')).toBe(0);
-    expect(res.indexOfKey('two')).toBe(1);
-    expect(res.indexOfKey('three')).toBe(2);
-    expect(res.indexOfKey('dog')).toBe(undefined);
-
-    expect(res.has('one')).toBe(true);
-    expect(res.has('two')).toBe(true);
-    expect(res.has('three')).toBe(true);
-    expect(res.has('dog')).toBe(false);
-
-    expect(res.get('one').val).toBe('first');
-    expect(res.get('two').val).toBe('second');
-    expect(res.get('three').val).toBe('third');
-    expect(res.get('dog')).toBe(undefined);
-  });
-
-  it('should compute indices on intersected merge', function() {
-    var oneTwo = OrderedMap.fromArray([
-      {uniqueID: 'one', val: 'first'},
-      {uniqueID: 'two', val: 'secondOM1'}
-    ], extractUniqueID);
-
-    var testOneTwoMergedWithTwoThree = function(res) {
-      expect(res.length).toBe(3);
-      expect(res.keyAtIndex(0)).toBe('one');
-      expect(res.keyAtIndex(1)).toBe('two');
-      expect(res.keyAtIndex(2)).toBe('three');
-      expect(res.keyAtIndex(3)).toBe(undefined);
-      expect(res.indexOfKey('one')).toBe(0);
-      expect(res.indexOfKey('two')).toBe(1);
-      expect(res.indexOfKey('three')).toBe(2);
-      expect(res.indexOfKey('dog')).toBe(undefined);
-      expect(res.has('one')).toBe(true);
-      expect(res.has('two')).toBe(true);
-      expect(res.has('three')).toBe(true);
-      expect(res.has('dog')).toBe(false);
-      expect(res.get('one').val).toBe('first');
-      expect(res.get('two').val).toBe('secondOM2');
-      expect(res.get('three').val).toBe('third');
-      expect(res.get('dog')).toBe(undefined);
-    };
-
-    var result =
-      oneTwo.merge(OrderedMap.fromArray([
-        {uniqueID: 'two', val: 'secondOM2'},
-        {uniqueID: 'three', val: 'third'}
-      ], extractUniqueID));
-    testOneTwoMergedWithTwoThree(result);
-
-    // Everything should be exactly as before, since the ordering of `two` was
-    // already determined by `om`.
-    result = oneTwo.merge(
-      OrderedMap.fromArray([
-        {uniqueID: 'three', val: 'third'},
-        {uniqueID: 'two', val:'secondOM2'}
-      ], extractUniqueID)
-    );
-    testOneTwoMergedWithTwoThree(result);
-
-
-    var testTwoThreeMergedWithOneTwo = function(res) {
-      expect(res.length).toBe(3);
-      expect(res.keyAtIndex(0)).toBe('two');
-      expect(res.keyAtIndex(1)).toBe('three');
-      expect(res.keyAtIndex(2)).toBe('one');
-      expect(res.keyAtIndex(3)).toBe(undefined);
-      expect(res.indexOfKey('two')).toBe(0);
-      expect(res.indexOfKey('three')).toBe(1);
-      expect(res.indexOfKey('one')).toBe(2);
-      expect(res.indexOfKey('cat')).toBe(undefined);
-      expect(res.has('two')).toBe(true);
-      expect(res.has('three')).toBe(true);
-      expect(res.has('one')).toBe(true);
-      expect(res.has('dog')).toBe(false);
-      expect(res.get('one').val).toBe('first');
-      expect(res.get('two').val).toBe('secondOM1');
-      expect(res.get('three').val).toBe('third');
-      expect(res.get('dog')).toBe(undefined);
-    };
-    result = OrderedMap.fromArray([
-        {uniqueID: 'two', val: 'secondOM2'},
-        {uniqueID: 'three', val: 'third'}
-      ], extractUniqueID).merge(oneTwo);
-    testTwoThreeMergedWithOneTwo(result);
-
-  });
-
-  it('should merge mutually exclusive keys to the end.', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'one', val: 'first'},
-      {uniqueID: 'two', val: 'second'}
-    ], extractUniqueID);
-    var om2 = OrderedMap.fromArray([
-      {uniqueID: 'three', val: 'first'},
-      {uniqueID: 'four', val: 'second'}
-    ], extractUniqueID);
-    var res = om.merge(om2);
-    expect(res.length).toBe(4);
-
-  });
-
-  it('should map correctly', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'x', val: 'xx'},
-      {uniqueID: 'y', val: 'yy'},
-      {uniqueID: 'z', val: 'zz'}
-    ], extractUniqueID);
-    var scope = {justToTestScope: 'justTestingScope'};
-    var verifyResult = function(omResult) {
-      expect(omResult.length).toBe(3);
-      expect(omResult.keyAtIndex(0)).toBe('x');
-      expect(omResult.keyAtIndex(1)).toBe('y');
-      expect(omResult.keyAtIndex(2)).toBe('z');
-      expect(omResult.get('x').val).toBe('xxx0justTestingScope');
-      expect(omResult.get('y').val).toBe('yyy1justTestingScope');
-      expect(omResult.get('z').val).toBe('zzz2justTestingScope');
-    };
-    var resultOM = om.map(function(itm, key, count) {
-      return {
-        uniqueID: itm.uniqueID,
-        val: itm.val + key + count + this.justToTestScope
-      };
-    }, scope);
-    verifyResult(resultOM);
-
-    var resArray = [];
-    om.forEach(function(itm, key, count) {
-      resArray.push({
-        uniqueID: itm.uniqueID,
-        val: itm.val + key + count + this.justToTestScope
-      });
-    }, scope);
-    resultOM = OrderedMap.fromArray(resArray, extractUniqueID);
-    verifyResult(resultOM);
-  });
-
-  it('should filter correctly', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'x', val: 'xx'},
-      {uniqueID: 'y', val: 'yy'},
-      {uniqueID: 'z', val: 'zz'}
-    ], extractUniqueID);
-    var scope = {justToTestScope: 'justTestingScope'};
-
-    var filteringCallback = function(item, key, indexInOriginal) {
-      expect(this).toBe(scope);
-      expect(key === 'x' || key === 'y' || key === 'z').toBe(true);
-      if (key === 'x') {
-        expect(item.val).toBe('xx');
-        expect(indexInOriginal).toBe(0);
-        return false;
-      } else if (key === 'y') {
-        expect(item.val).toBe('yy');
-        expect(indexInOriginal).toBe(1);
-        return true;
-      } else {
-        expect(item.val).toBe('zz');
-        expect(indexInOriginal).toBe(2);
-        return true;
-      }
-    };
-
-    var verifyResult = function(omResult) {
-      expect(omResult.length).toBe(2);
-      expect(omResult.keyAtIndex(0)).toBe('y');
-      expect(omResult.keyAtIndex(1)).toBe('z');
-      expect(omResult.has('x')).toBe(false);
-      expect(omResult.has('z')).toBe(true);
-      expect(omResult.get('z').val).toBe('zz');
-      expect(omResult.has('y')).toBe(true);
-      expect(omResult.get('y').val).toBe('yy');
-    };
-
-    var resultOM = om.filter(filteringCallback, scope);
-    verifyResult(resultOM);
-  });
-
-  it('should throw when providing invalid ranges to ranging', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'x', val: 'xx'},
-      {uniqueID: 'y', val: 'yy'},
-      {uniqueID: 'z', val: 'zz'}
-    ], extractUniqueID);
-    var scope = {justToTestScope: 'justTestingScope'};
-
-    expect(function() {
-      om.mapRange(duplicate, 0, 3, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.filterRange(duplicate, 0, 3, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, 0, 3, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, 'x' , 3, scope);
-    }).toThrow(
-      'Invariant Violation: mapKeyRange must be given keys ' +
-      'that are present.'
-    );
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'x', 3, scope);
-    }).toThrow(
-      'Invariant Violation: forEachKeyRange must be given keys ' +
-      'that are present.'
-    );
-
-    expect(function() {
-      om.mapRange(duplicate, 0, 4, scope);
-    }).toThrow();
-    expect(function() {
-      om.filterRange(duplicate, 0, 4, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, 0, 4, scope);
-    }).toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, 'x', null, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'x', null, scope);
-    }).toThrow();
-
-    expect(function() {
-      om.mapRange(duplicate, -1, 1, scope);
-    }).toThrow();
-    expect(function() {
-      om.filterRange(duplicate, -1, 1, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, -1, 1, scope);
-    }).toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, null, 'y', scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, null, 'y', scope);
-    }).toThrow();
-
-    expect(function() {
-      om.mapRange(duplicate, 0, 0, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.filterRange(duplicate, 0, 0, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, 0, 0, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, 'x', 'x', scope);
-    }).not.toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'x', 'x', scope);
-    }).not.toThrow();
-
-    expect(function() {
-      om.mapRange(duplicate, 0, -1, scope);
-    }).toThrow();
-    expect(function() {
-      om.filterRange(duplicate, 0, -1, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, 0, -1, scope);
-    }).toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, 'x', null, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'x', null, scope);
-    }).toThrow();
-
-    expect(function() {
-      om.mapRange(duplicate, 2, 1, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.filterRange(duplicate, 2, 1, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, 2, 1, scope);
-    }).not.toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, 'z', 'z', scope);
-    }).not.toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'z', 'z', scope);
-    }).not.toThrow();
-
-    expect(function() {
-      om.mapRange(duplicate, 2, 2, scope);
-    }).toThrow();
-    expect(function() {
-      om.filterRange(duplicate, 2, 2, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachRange(duplicate, 2, 2, scope);
-    }).toThrow();
-    expect(function() {
-      om.mapKeyRange(duplicate, 'z', null, scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'z', null, scope);
-    }).toThrow();
-
-    // Provide keys in reverse order - should throw.
-    expect(function() {
-      om.mapKeyRange(duplicate, 'y', 'x', scope);
-    }).toThrow();
-    expect(function() {
-      om.forEachKeyRange(duplicate, 'y', 'x', scope);
-    }).toThrow();
-  });
-
-  // TEST length zero map, or keyrange start===end
-
-  it('should map range correctly', function() {
-    var om = OrderedMap.fromArray([
-      {uniqueID: 'x', val: 'xx'},
-      {uniqueID: 'y', val: 'yy'},
-      {uniqueID: 'z', val: 'zz'}
-    ], extractUniqueID);
-    var scope = {justToTestScope: 'justTestingScope'};
-    var verifyThreeItems = function(omResult) {
-      expect(omResult.length).toBe(3);
-      expect(omResult.keyAtIndex(0)).toBe('x');
-      expect(omResult.keyAtIndex(1)).toBe('y');
-      expect(omResult.keyAtIndex(2)).toBe('z');
-      expect(omResult.get('x').val).toBe('xxx0justTestingScope');
-      expect(omResult.get('y').val).toBe('yyy1justTestingScope');
-      expect(omResult.get('z').val).toBe('zzz2justTestingScope');
-    };
-    var verifyFirstTwoItems = function(omResult) {
-      expect(omResult.length).toBe(2);
-      expect(omResult.keyAtIndex(0)).toBe('x');
-      expect(omResult.keyAtIndex(1)).toBe('y');
-      expect(omResult.get('x').val).toBe('xxx0justTestingScope');
-      expect(omResult.get('y').val).toBe('yyy1justTestingScope');
-    };
-
-    var verifyLastTwoItems = function(omResult) {
-      expect(omResult.length).toBe(2);
-      expect(omResult.keyAtIndex(0)).toBe('y');
-      expect(omResult.keyAtIndex(1)).toBe('z');
-      expect(omResult.get('y').val).toBe('yyy1justTestingScope');
-      expect(omResult.get('z').val).toBe('zzz2justTestingScope');
-    };
-
-    var verifyMiddleItem = function(omResult) {
-      expect(omResult.length).toBe(1);
-      expect(omResult.keyAtIndex(0)).toBe('y');
-      expect(omResult.get('y').val).toBe('yyy1justTestingScope');
-    };
-
-    var verifyEmpty = function(omResult) {
-      expect(omResult.length).toBe(0);
-    };
-
-    var omResultThree = om.mapRange(duplicate, 0, 3, scope);
-    verifyThreeItems(omResultThree);
-    var resArray = [];
-    var pushToResArray = function(itm, key, count) {
-      resArray.push({
-        uniqueID: itm.uniqueID,
-        val: itm.val + key + count + this.justToTestScope
-      });
-    };
-
-    om.forEachRange(pushToResArray, 0, 3, scope);
-    omResultThree = OrderedMap.fromArray(resArray, extractUniqueID);
-    verifyThreeItems(omResultThree);
-
-    var omResultFirstTwo = om.mapRange(duplicate, 0, 2, scope);
-    verifyFirstTwoItems(omResultFirstTwo);
-    resArray = [];
-    om.forEachRange(pushToResArray, 0, 2, scope);
-    omResultFirstTwo = OrderedMap.fromArray(resArray, extractUniqueID);
-    verifyFirstTwoItems(omResultFirstTwo);
-
-    var omResultLastTwo = om.mapRange(duplicate, 1, 2, scope);
-    verifyLastTwoItems(omResultLastTwo);
-    resArray = [];
-    om.forEachRange(pushToResArray, 1, 2, scope);
-    omResultLastTwo = OrderedMap.fromArray(resArray, extractUniqueID);
-    verifyLastTwoItems(omResultLastTwo);
-
-    var omResultMiddle = om.mapRange(duplicate, 1, 1, scope);
-    verifyMiddleItem(omResultMiddle);
-    resArray = [];
-    om.forEachRange(pushToResArray, 1, 1, scope);
-    omResultMiddle = OrderedMap.fromArray(resArray, extractUniqueID);
-    verifyMiddleItem(omResultMiddle);
-
-    var omResultNone = om.mapRange(duplicate, 1, 0, scope);
-    verifyEmpty(omResultNone);
-  });
-
-  it('should extract the original array correctly', function() {
-    var sourceArray = [
-      {uniqueID: 'x', val: 'xx'},
-      {uniqueID: 'y', val: 'yy'},
-      {uniqueID: 'z', val: 'zz'}
-    ];
-    var om = OrderedMap.fromArray(sourceArray, extractUniqueID);
-    expect(om.toArray()).toEqual(sourceArray);
-  });
-});
diff --git a/src/utils/__tests__/PooledClass-test.js b/src/utils/__tests__/PooledClass-test.js
deleted file mode 100644
index 6e6ebb2fc58..00000000000
--- a/src/utils/__tests__/PooledClass-test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var PooledClass;
-var PoolableClass;
-
-describe('Pooled class', function() {
-  beforeEach(function() {
-    PooledClass = require('PooledClass');
-    PoolableClass = function() {};
-    PooledClass.addPoolingTo(PoolableClass);
-  });
-
-  it('should initialize a pool correctly', function() {
-    expect(PoolableClass.instancePool).toBeDefined();
-  });
-
-  it('should return a new instance when the pool is empty', function() {
-    var instance = PoolableClass.getPooled();
-    expect(instance instanceof PoolableClass).toBe(true);
-  });
-
-  it('should return the instance back into the pool when it gets released',
-    function() {
-      var instance = PoolableClass.getPooled();
-      PoolableClass.release(instance);
-      expect(PoolableClass.instancePool.length).toBe(1);
-      expect(PoolableClass.instancePool[0]).toBe(instance);
-    }
-  );
-
-  it('should return an old instance if available in the pool', function() {
-    var instance = PoolableClass.getPooled();
-    PoolableClass.release(instance);
-    var instance2 = PoolableClass.getPooled();
-    expect(instance).toBe(instance2);
-  });
-
-  it('should call the destructor when instance gets released', function() {
-    var log = [];
-    var PoolableClassWithDestructor = function() {};
-    PoolableClassWithDestructor.prototype.destructor = function() {
-      log.push('released');
-    };
-    PooledClass.addPoolingTo(PoolableClassWithDestructor);
-    var instance = PoolableClassWithDestructor.getPooled();
-    PoolableClassWithDestructor.release(instance);
-    expect(log).toEqual(['released']);
-  });
-
-  it('should accept poolers with different arguments', function() {
-    var log = [];
-    var PoolableClassWithMultiArguments = function(a, b) {
-      log.push(a, b);
-    };
-    PooledClass.addPoolingTo(
-      PoolableClassWithMultiArguments,
-      PooledClass.twoArgumentPooler
-    );
-    PoolableClassWithMultiArguments.getPooled('a', 'b', 'c');
-    expect(log).toEqual(['a', 'b']);
-  });
-
-  it('should throw when the class releases an instance of a different type',
-    function() {
-      var RandomClass = function() {};
-      PooledClass.addPoolingTo(RandomClass);
-      var randomInstance = RandomClass.getPooled();
-      PoolableClass.getPooled();
-      expect(function() {
-        PoolableClass.release(randomInstance);
-      }).toThrow(
-        'Invariant Violation: Trying to release an instance into a pool ' +
-        'of a different type.'
-      );
-    }
-  );
-});
diff --git a/src/utils/__tests__/ReactChildren-test.js b/src/utils/__tests__/ReactChildren-test.js
deleted file mode 100644
index 18f472a7ba4..00000000000
--- a/src/utils/__tests__/ReactChildren-test.js
+++ /dev/null
@@ -1,401 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- * @jsx React.DOM
- */
-
-"use strict";
-
-describe('ReactChildren', function() {
-  var ReactChildren;
-  var React;
-
-  beforeEach(function() {
-    ReactChildren = require('ReactChildren');
-    React = require('React');
-  });
-
-
-  it('should support identity for simple', function() {
-    var callback = jasmine.createSpy().andCallFake(function(kid, index) {
-      return kid;
-    });
-
-    var simpleKid = <span key="simple" />;
-
-    // First pass children into a component to fully simulate what happens when
-    // using structures that arrive from transforms.
-
-    var instance = <div>{simpleKid}</div>;
-    ReactChildren.forEach(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
-    callback.reset();
-    var mappedChildren = ReactChildren.map(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
-    expect(mappedChildren[Object.keys(mappedChildren)[0]]).toBe(simpleKid);
-  });
-
-  it('should treat single arrayless child as being in array', function() {
-    var callback = jasmine.createSpy().andCallFake(function(kid, index) {
-      return kid;
-    });
-
-    var simpleKid = <span />;
-    var instance = <div>{simpleKid}</div>;
-    ReactChildren.forEach(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
-    callback.reset();
-    var mappedChildren = ReactChildren.map(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
-    expect(mappedChildren[Object.keys(mappedChildren)[0]]).toBe(simpleKid);
-  });
-
-  it('should treat single child in array as expected', function() {
-    var callback = jasmine.createSpy().andCallFake(function(kid, index) {
-      return kid;
-    });
-
-    var simpleKid = <span />;
-    var instance = <div>{[simpleKid]}</div>;
-    ReactChildren.forEach(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
-    callback.reset();
-    var mappedChildren = ReactChildren.map(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(simpleKid, 0);
-    expect(mappedChildren[Object.keys(mappedChildren)[0]]).toBe(simpleKid);
-  });
-
-  it('should pass key to returned component', function() {
-    var mapFn = function(kid, index) {
-      return <div>{kid}</div>;
-    };
-
-    var simpleKid = <span key="simple" />;
-
-    var instance = <div>{simpleKid}</div>;
-    var mappedChildren = ReactChildren.map(instance.props.children, mapFn);
-
-    var mappedKeys = Object.keys(mappedChildren);
-    expect(mappedKeys.length).toBe(1);
-    expect(mappedChildren[mappedKeys[0]]).not.toBe(simpleKid);
-    expect(mappedChildren[mappedKeys[0]].props.children).toBe(simpleKid);
-    expect(mappedKeys[0]).toBe('.$simple');
-  });
-
-  it('should invoke callback with the right context', function() {
-    var lastContext;
-    var callback = function(kid, index) {
-      lastContext = this;
-      return this;
-    };
-
-    var scopeTester = {};
-
-    var simpleKid = <span key="simple" />;
-    var instance = <div>{simpleKid}</div>;
-    ReactChildren.forEach(instance.props.children, callback, scopeTester);
-    expect(lastContext).toBe(scopeTester);
-
-    var mappedChildren =
-      ReactChildren.map(instance.props.children, callback, scopeTester);
-
-    var mappedKeys = Object.keys(mappedChildren);
-    expect(mappedKeys.length).toBe(1);
-    expect(mappedChildren[mappedKeys[0]]).toBe(scopeTester);
-  });
-
-  it('should be called for each child', function() {
-    var zero = <div key="keyZero" />;
-    var one = null;
-    var two = <div key="keyTwo" />;
-    var three = null;
-    var four = <div key="keyFour" />;
-
-    var zeroMapped = <div key="giraffe" />;  // Key should be joined to obj key
-    var oneMapped = null;  // Key should be added even if we don't supply it!
-    var twoMapped = <div />;  // Key should be added even if not supplied!
-    var threeMapped = <span />; // Map from null to something.
-    var fourMapped = <div key="keyFour" />;
-
-    var callback = jasmine.createSpy().andCallFake(function(kid, index) {
-      return index === 0 ? zeroMapped :
-        index === 1 ? oneMapped :
-        index === 2 ? twoMapped :
-        index === 3 ? threeMapped : fourMapped;
-    });
-
-    var instance = (
-      <div>
-        {zero}
-        {one}
-        {two}
-        {three}
-        {four}
-      </div>
-    );
-
-    ReactChildren.forEach(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(zero, 0);
-    expect(callback).toHaveBeenCalledWith(one, 1);
-    expect(callback).toHaveBeenCalledWith(two, 2);
-    expect(callback).toHaveBeenCalledWith(three, 3);
-    expect(callback).toHaveBeenCalledWith(four, 4);
-    callback.reset();
-
-    var mappedChildren =
-      ReactChildren.map(instance.props.children, callback);
-    var mappedKeys = Object.keys(mappedChildren);
-    expect(callback.calls.length).toBe(5);
-    expect(mappedKeys.length).toBe(5);
-    // Keys default to indices.
-    expect(mappedKeys).toEqual(
-      ['.$keyZero', '.1', '.$keyTwo', '.3', '.$keyFour']
-    );
-
-    expect(callback).toHaveBeenCalledWith(zero, 0);
-    expect(mappedChildren[mappedKeys[0]]).toBe(zeroMapped);
-
-    expect(callback).toHaveBeenCalledWith(one, 1);
-    expect(mappedChildren[mappedKeys[1]]).toBe(oneMapped);
-
-    expect(callback).toHaveBeenCalledWith(two, 2);
-    expect(mappedChildren[mappedKeys[2]]).toBe(twoMapped);
-
-    expect(callback).toHaveBeenCalledWith(three, 3);
-    expect(mappedChildren[mappedKeys[3]]).toBe(threeMapped);
-
-    expect(callback).toHaveBeenCalledWith(four, 4);
-    expect(mappedChildren[mappedKeys[4]]).toBe(fourMapped);
-  });
-
-
-  it('should be called for each child in nested structure', function() {
-    var zero = <div key="keyZero" />;
-    var one = null;
-    var two = <div key="keyTwo" />;
-    var three = null;
-    var four = <div key="keyFour" />;
-    var five = <div key="keyFiveInner" />;
-    // five is placed into a JS object with a key that is joined to the
-    // component key attribute.
-    // Precedence is as follows:
-    // 1. If grouped in an Object, the object key combined with `key` prop
-    // 2. If grouped in an Array, the `key` prop, falling back to array index
-
-    var zeroMapped = <div key="giraffe" />;  // Key should be overridden
-    var oneMapped = null;  // Key should be added even if we don't supply it!
-    var twoMapped = <div />;  // Key should be added even if not supplied!
-    var threeMapped = <span />; // Map from null to something.
-    var fourMapped = <div key="keyFour" />;
-    var fiveMapped = <div />;
-
-    var callback = jasmine.createSpy().andCallFake(function(kid, index) {
-      return index === 0 ? zeroMapped :
-        index === 1 ? oneMapped :
-        index === 2 ? twoMapped :
-        index === 3 ? threeMapped :
-        index === 4 ? fourMapped : fiveMapped;
-    });
-
-    var instance = (
-      <div>{
-        [{
-          firstHalfKey: [zero, one, two],
-          secondHalfKey: [three, four],
-          keyFive: five
-        }]
-      }</div>
-    );
-
-    ReactChildren.forEach(instance.props.children, callback);
-    expect(callback).toHaveBeenCalledWith(zero, 0);
-    expect(callback).toHaveBeenCalledWith(one, 1);
-    expect(callback).toHaveBeenCalledWith(two, 2);
-    expect(callback).toHaveBeenCalledWith(three, 3);
-    expect(callback).toHaveBeenCalledWith(four, 4);
-    expect(callback).toHaveBeenCalledWith(five, 5);
-    callback.reset();
-
-    var mappedChildren = ReactChildren.map(instance.props.children, callback);
-    var mappedKeys = Object.keys(mappedChildren);
-    expect(callback.calls.length).toBe(6);
-    expect(mappedKeys.length).toBe(6);
-    // Keys default to indices.
-    expect(mappedKeys).toEqual([
-      '.0:$firstHalfKey:0:$keyZero',
-      '.0:$firstHalfKey:0:1',
-      '.0:$firstHalfKey:0:$keyTwo',
-      '.0:$secondHalfKey:0:0',
-      '.0:$secondHalfKey:0:$keyFour',
-      '.0:$keyFive:$keyFiveInner'
-    ]);
-
-    expect(callback).toHaveBeenCalledWith(zero, 0);
-    expect(mappedChildren[mappedKeys[0]]).toBe(zeroMapped);
-
-    expect(callback).toHaveBeenCalledWith(one, 1);
-    expect(mappedChildren[mappedKeys[1]]).toBe(oneMapped);
-
-    expect(callback).toHaveBeenCalledWith(two, 2);
-    expect(mappedChildren[mappedKeys[2]]).toBe(twoMapped);
-
-    expect(callback).toHaveBeenCalledWith(three, 3);
-    expect(mappedChildren[mappedKeys[3]]).toBe(threeMapped);
-
-    expect(callback).toHaveBeenCalledWith(four, 4);
-    expect(mappedChildren[mappedKeys[4]]).toBe(fourMapped);
-
-    expect(callback).toHaveBeenCalledWith(five, 5);
-    expect(mappedChildren[mappedKeys[5]]).toBe(fiveMapped);
-  });
-
-  it('should retain key across two mappings', function() {
-    var zeroForceKey = <div key="keyZero" />;
-    var oneForceKey = <div key="keyOne" />;
-
-    // Key should be joined to object key
-    var zeroForceKeyMapped = <div key="giraffe" />;
-    // Key should be added even if we don't supply it!
-    var oneForceKeyMapped = <div />;
-
-    var mapFn = function(kid, index) {
-      return index === 0 ? zeroForceKeyMapped : oneForceKeyMapped;
-    };
-
-    var forcedKeys = (
-      <div>
-        {zeroForceKey}
-        {oneForceKey}
-      </div>
-    );
-
-    var expectedForcedKeys = ['.$keyZero', '.$keyOne'];
-    var mappedChildrenForcedKeys =
-      ReactChildren.map(forcedKeys.props.children, mapFn);
-    var mappedForcedKeys = Object.keys(mappedChildrenForcedKeys);
-    expect(mappedForcedKeys).toEqual(expectedForcedKeys);
-
-    var expectedRemappedForcedKeys = [
-      '.$=1$keyZero:$giraffe',
-      '.$=1$keyOne:0'
-    ];
-    var remappedChildrenForcedKeys =
-      ReactChildren.map(mappedChildrenForcedKeys, mapFn);
-    expect(
-      Object.keys(remappedChildrenForcedKeys)
-    ).toEqual(expectedRemappedForcedKeys);
-
-  });
-
-  it('should not throw if key provided is a dupe with array key', function() {
-    var zero = <div />;
-    var one = <div key="0" />;
-
-    var mapFn = function() {
-      return null;
-    };
-
-    var instance = (
-      <div>
-        {zero}
-        {one}
-      </div>
-    );
-
-    expect(function() {
-      ReactChildren.map(instance.props.children, mapFn);
-    }).not.toThrow();
-  });
-
-  it('should warn if key provided is a dupe with explicit key', function() {
-    var zero = <div key="something"/>;
-    var one = <span key="something" />;
-
-    var mapFn = function(component) { return component; };
-    var instance = (
-      <div>{zero}{one}</div>
-    );
-
-    spyOn(console, 'warn');
-    var mapped = ReactChildren.map(instance.props.children, mapFn);
-
-    expect(console.warn.calls.length).toEqual(1);
-    expect(mapped).toEqual({'.$something': zero});
-  });
-
-  it('should return 0 for null children', function() {
-    var numberOfChildren = ReactChildren.count(null);
-    expect(numberOfChildren).toBe(0);
-  });
-
-  it('should return 0 for undefined children', function() {
-    var numberOfChildren = ReactChildren.count(undefined);
-    expect(numberOfChildren).toBe(0);
-  });
-
-  it('should return 1 for single child', function() {
-    var simpleKid = <span key="simple" />;
-    var instance = <div>{simpleKid}</div>;
-    var numberOfChildren = ReactChildren.count(instance.props.children);
-    expect(numberOfChildren).toBe(1);
-  });
-
-  it('should count the number of children in flat structure', function() {
-    var zero = <div key="keyZero" />;
-    var one = null;
-    var two = <div key="keyTwo" />;
-    var three = null;
-    var four = <div key="keyFour" />;
-
-    var instance = (
-      <div>
-        {zero}
-        {one}
-        {two}
-        {three}
-        {four}
-      </div>
-    );
-    var numberOfChildren = ReactChildren.count(instance.props.children);
-    expect(numberOfChildren).toBe(5);
-  });
-
-  it('should count the number of children in nested structure', function() {
-    var zero = <div key="keyZero" />;
-    var one = null;
-    var two = <div key="keyTwo" />;
-    var three = null;
-    var four = <div key="keyFour" />;
-    var five = <div key="keyFiveInner" />;
-    // five is placed into a JS object with a key that is joined to the
-    // component key attribute.
-    // Precedence is as follows:
-    // 1. If grouped in an Object, the object key combined with `key` prop
-    // 2. If grouped in an Array, the `key` prop, falling back to array index
-
-    var instance = (
-      <div>{
-        [{
-          firstHalfKey: [zero, one, two],
-          secondHalfKey: [three, four],
-          keyFive: five
-        }]
-      }</div>
-    );
-    var numberOfChildren = ReactChildren.count(instance.props.children);
-    expect(numberOfChildren).toBe(6);
-  });
-});
diff --git a/src/utils/__tests__/Transaction-test.js b/src/utils/__tests__/Transaction-test.js
deleted file mode 100644
index 39115cd242a..00000000000
--- a/src/utils/__tests__/Transaction-test.js
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-var Transaction;
-var mixInto;
-
-var INIT_ERRORED = 'initErrored';     // Just a dummy value to check for.
-describe('Transaction', function() {
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    Transaction = require('Transaction');
-    mixInto = require('mixInto');
-  });
-
-  /**
-   * We should not invoke closers for inits that failed. We should pass init
-   * return values to closers when those inits are successful. We should not
-   * invoke the actual method when any of the initializers fail.
-   */
-  it('should invoke closers with/only-with init returns', function() {
-    var throwInInit = function() {
-      throw new Error('close[0] should receive Transaction.OBSERVED_ERROR');
-    };
-
-    var performSideEffect;
-    var dontPerformThis = function() {
-      performSideEffect = 'This should never be set to this';
-    };
-
-    /**
-     * New test Transaction subclass.
-     */
-    var TestTransaction = function() {
-      this.reinitializeTransaction();
-      this.firstCloseParam = INIT_ERRORED;   // WON'T be set to something else
-      this.secondCloseParam = INIT_ERRORED;  // WILL be set to something else
-      this.lastCloseParam = INIT_ERRORED;    // WON'T be set to something else
-    };
-    mixInto(TestTransaction, Transaction.Mixin);
-    TestTransaction.prototype.getTransactionWrappers = function() {
-      return [
-        {
-          initialize: throwInInit,
-          close: function(initResult) {
-            this.firstCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() { return 'asdf'; },
-          close: function(initResult) {
-            this.secondCloseParam = initResult;
-          }
-        },
-        {
-          initialize: throwInInit,
-          close: function(initResult) {
-            this.lastCloseParam = initResult;
-          }
-        }
-      ];
-    };
-
-    var transaction = new TestTransaction();
-
-    expect(function() {
-      transaction.perform(dontPerformThis);
-    }).toThrow();
-
-    expect(performSideEffect).toBe(undefined);
-    expect(transaction.firstCloseParam).toBe(INIT_ERRORED);
-    expect(transaction.secondCloseParam).toBe('asdf');
-    expect(transaction.lastCloseParam).toBe(INIT_ERRORED);
-    expect(transaction.isInTransaction()).toBe(false);
-  });
-
-  it('should invoke closers and wrapped method when inits success', function() {
-
-    var performSideEffect;
-    /**
-     * New test Transaction subclass.
-     */
-    var TestTransaction = function() {
-      this.reinitializeTransaction();
-      this.firstCloseParam = INIT_ERRORED;   // WILL be set to something else
-      this.secondCloseParam = INIT_ERRORED;  // WILL be set to something else
-      this.lastCloseParam = INIT_ERRORED;    // WILL be set to something else
-    };
-    mixInto(TestTransaction, Transaction.Mixin);
-    TestTransaction.prototype.getTransactionWrappers = function() {
-      return [
-        {
-          initialize: function() {
-            return 'firstResult';
-          },
-          close: function(initResult) {
-            this.firstCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() {
-            return 'secondResult';
-          },
-          close: function(initResult) {
-            this.secondCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() {
-            return 'thirdResult';
-          },
-          close: function(initResult) {
-            this.lastCloseParam = initResult;
-          }
-        }
-      ];
-    };
-
-    var transaction = new TestTransaction();
-
-    transaction.perform(function() {
-      performSideEffect = 'SIDE_EFFECT';
-    });
-
-    expect(performSideEffect).toBe('SIDE_EFFECT');
-    expect(transaction.firstCloseParam).toBe('firstResult');
-    expect(transaction.secondCloseParam).toBe('secondResult');
-    expect(transaction.lastCloseParam).toBe('thirdResult');
-    expect(transaction.isInTransaction()).toBe(false);
-  });
-
-  /**
-   * When the operation throws, the transaction should throw, but all of the
-   * error-free closers should execute gracefully without issue. If a closer
-   * throws an error, the transaction should prefer to throw the error
-   * encountered earlier in the operation.
-   */
-  it('should throw when wrapped operation throws', function() {
-
-    var performSideEffect;
-    /**
-     * New test Transaction subclass.
-     */
-    var TestTransaction = function() {
-      this.reinitializeTransaction();
-      this.firstCloseParam = INIT_ERRORED;   // WILL be set to something else
-      this.secondCloseParam = INIT_ERRORED;  // WILL be set to something else
-      this.lastCloseParam = INIT_ERRORED;    // WILL be set to something else
-    };
-    mixInto(TestTransaction, Transaction.Mixin);
-    // Now, none of the close/inits throw, but the operation we wrap will throw.
-    TestTransaction.prototype.getTransactionWrappers = function() {
-      return [
-        {
-          initialize: function() {
-            return 'firstResult';
-          },
-          close: function(initResult) {
-            this.firstCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() {
-            return 'secondResult';
-          },
-          close: function(initResult) {
-            this.secondCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() {
-            return 'thirdResult';
-          },
-          close: function(initResult) {
-            this.lastCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() {
-            return 'fourthResult';
-          },
-          close: function(initResult) {
-            throw new Error('The transaction should throw a TypeError.');
-          }
-        }
-      ];
-    };
-
-    var transaction = new TestTransaction();
-
-    expect(function() {
-      var isTypeError = false;
-      try {
-        transaction.perform(function() {
-          throw new TypeError("Thrown in main wrapped operation");
-        });
-      } catch (err) {
-        isTypeError = (err instanceof TypeError);
-      }
-      return isTypeError;
-    }()).toBe(true);
-
-    expect(performSideEffect).toBe(undefined);
-    expect(transaction.firstCloseParam).toBe('firstResult');
-    expect(transaction.secondCloseParam).toBe('secondResult');
-    expect(transaction.lastCloseParam).toBe('thirdResult');
-    expect(transaction.isInTransaction()).toBe(false);
-  });
-
-  it('should throw errors in transaction close', function() {
-    var TestTransaction = function() {
-      this.reinitializeTransaction();
-    };
-    mixInto(TestTransaction, Transaction.Mixin);
-    var exceptionMsg = 'This exception should throw.';
-    TestTransaction.prototype.getTransactionWrappers = function() {
-      return [
-        {
-          close: function(initResult) {
-            throw new Error(exceptionMsg);
-          }
-        }
-      ];
-    };
-
-    var transaction = new TestTransaction();
-    expect(function() {
-      transaction.perform(function() {});
-    }).toThrow(exceptionMsg);
-    expect(transaction.isInTransaction()).toBe(false);
-  });
-
-  it('should allow nesting of transactions', function() {
-    var performSideEffect;
-    var nestedPerformSideEffect;
-    /**
-     * New test Transaction subclass.
-     */
-    var TestTransaction = function() {
-      this.reinitializeTransaction();
-      this.firstCloseParam = INIT_ERRORED; // WILL be set to something else
-    };
-    mixInto(TestTransaction, Transaction.Mixin);
-    TestTransaction.prototype.getTransactionWrappers = function() {
-      return [
-        {
-          initialize: function() {
-            return 'firstResult';
-          },
-          close: function(initResult) {
-            this.firstCloseParam = initResult;
-          }
-        },
-        {
-          initialize: function() {
-            this.nestedTransaction = new NestedTransaction();
-          },
-          close: function() {
-            // Test performing a transaction in another transaction's close()
-            this.nestedTransaction.perform(function() {
-              nestedPerformSideEffect = 'NESTED_SIDE_EFFECT';
-            });
-          }
-        }
-      ];
-    };
-
-    var NestedTransaction = function() {
-      this.reinitializeTransaction();
-    };
-    mixInto(NestedTransaction, Transaction.Mixin);
-    NestedTransaction.prototype.getTransactionWrappers = function() {
-      return [{
-        initialize: function() {
-          this.hasInitializedNested = true;
-        },
-        close: function() {
-          this.hasClosedNested = true;
-        }
-      }];
-    };
-
-    var transaction = new TestTransaction();
-
-    transaction.perform(function() {
-      performSideEffect = 'SIDE_EFFECT';
-    });
-
-    expect(performSideEffect).toBe('SIDE_EFFECT');
-    expect(nestedPerformSideEffect).toBe('NESTED_SIDE_EFFECT');
-    expect(transaction.firstCloseParam).toBe('firstResult');
-    expect(transaction.isInTransaction()).toBe(false);
-    expect(transaction.nestedTransaction.hasClosedNested).toBe(true);
-    expect(transaction.nestedTransaction.hasInitializedNested).toBe(true);
-    expect(transaction.nestedTransaction.isInTransaction()).toBe(false);
-  });
-});
diff --git a/src/utils/__tests__/cloneWithProps-test.js b/src/utils/__tests__/cloneWithProps-test.js
deleted file mode 100644
index 20fa8720d99..00000000000
--- a/src/utils/__tests__/cloneWithProps-test.js
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- * @jsx React.DOM
- */
-
-"use strict";
-
-require('mock-modules')
-  .dontMock('cloneWithProps')
-  .dontMock('emptyObject');
-
-var mocks = require('mocks');
-
-var React;
-var ReactTestUtils;
-
-var onlyChild;
-var cloneWithProps;
-var emptyObject;
-
-describe('cloneWithProps', function() {
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-    onlyChild = require('onlyChild');
-    cloneWithProps = require('cloneWithProps');
-    emptyObject = require('emptyObject');
-  });
-
-  it('should clone a DOM component with new props', function() {
-    var Grandparent = React.createClass({
-      render: function() {
-        return <Parent><div className="child" /></Parent>;
-      }
-    });
-    var Parent = React.createClass({
-      render: function() {
-        return (
-          <div className="parent">
-            {cloneWithProps(onlyChild(this.props.children), {className: 'xyz'})}
-          </div>
-        );
-      }
-    });
-    var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
-    expect(component.getDOMNode().childNodes[0].className)
-      .toBe('xyz child');
-  });
-
-  it('should clone a composite component with new props', function() {
-
-    var Child = React.createClass({
-      render: function() {
-        return <div className={this.props.className} />;
-      }
-    });
-
-    var Grandparent = React.createClass({
-      render: function() {
-        return <Parent><Child className="child" /></Parent>;
-      }
-    });
-    var Parent = React.createClass({
-      render: function() {
-        return (
-          <div className="parent">
-            {cloneWithProps(onlyChild(this.props.children), {className: 'xyz'})}
-          </div>
-        );
-      }
-    });
-    var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
-    expect(component.getDOMNode().childNodes[0].className)
-      .toBe('xyz child');
-  });
-
-  it('should warn when cloning with refs', function() {
-    var Grandparent = React.createClass({
-      render: function() {
-        return <Parent><div ref="yolo" /></Parent>;
-      }
-    });
-    var Parent = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {cloneWithProps(onlyChild(this.props.children), {className: 'xyz'})}
-          </div>
-        );
-      }
-    });
-
-    var _warn = console.warn;
-
-    try {
-      console.warn = mocks.getMockFunction();
-
-      var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
-      expect(component.refs).toBe(emptyObject);
-      expect(console.warn.mock.calls.length).toBe(1);
-    } finally {
-      console.warn = _warn;
-    }
-  });
-
-  it('should transfer the key property', function() {
-    var Component = React.createClass({
-      render: function() {
-        return null;
-      }
-    });
-    var clone = cloneWithProps(<Component />, {key: 'xyz'});
-    expect(clone.key).toBe('xyz');
-  });
-
-  it('should transfer children', function() {
-    var Component = React.createClass({
-      render: function() {
-        expect(this.props.children).toBe('xyz');
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(
-      cloneWithProps(<Component />, {children: 'xyz'})
-    );
-  });
-
-  it('should shallow clone children', function() {
-    var Component = React.createClass({
-      render: function() {
-        expect(this.props.children).toBe('xyz');
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(
-      cloneWithProps(<Component>xyz</Component>, {})
-    );
-  });
-
-  it('should support keys and refs', function() {
-    var Component = React.createClass({
-      render: function() {
-        return <div />;
-      }
-    });
-
-    var Parent = React.createClass({
-      render: function() {
-        var clone =
-          cloneWithProps(this.props.children, {key: 'xyz', ref: 'xyz'});
-        expect(clone.key).toBe('xyz');
-        expect(clone.ref).toBe('xyz');
-        return <div>{clone}</div>;
-      }
-    });
-
-    var Grandparent = React.createClass({
-      render: function() {
-        return <Parent><Component key="abc" /></Parent>;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(<Grandparent />);
-  });
-
-  it('should overwrite props', function() {
-    var Component = React.createClass({
-      render: function() {
-        expect(this.props.myprop).toBe('xyz');
-        return <div />;
-      }
-    });
-
-    ReactTestUtils.renderIntoDocument(
-      cloneWithProps(<Component myprop="abc" />, {myprop: 'xyz'})
-    );
-  });
-});
diff --git a/src/utils/__tests__/escapeTextForBrowser-test.js b/src/utils/__tests__/escapeTextForBrowser-test.js
deleted file mode 100644
index 6fe011af768..00000000000
--- a/src/utils/__tests__/escapeTextForBrowser-test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-describe('escapeTextForBrowser', function() {
-
-  var escapeTextForBrowser = require('escapeTextForBrowser');
-
-  it('should escape boolean to string', function() {
-    expect(escapeTextForBrowser(true)).toBe('true');
-    expect(escapeTextForBrowser(false)).toBe('false');
-  });
-
-  it('should escape object to string', function() {
-    var escaped = escapeTextForBrowser({
-      toString: function() {
-        return 'ponys';
-      }
-    });
-
-    expect(escaped).toBe('ponys');
-  });
-
-  it('should escape number to string', function() {
-    expect(escapeTextForBrowser(42)).toBe('42');
-  });
-
-  it('should escape string', function() {
-    var escaped = escapeTextForBrowser('<script type=\'\' src=""></script>');
-    expect(escaped).not.toContain('<');
-    expect(escaped).not.toContain('>');
-    expect(escaped).not.toContain('\'');
-    expect(escaped).not.toContain('\"');
-
-    escaped = escapeTextForBrowser('&');
-    expect(escaped).toBe('&amp;');
-  });
-
-});
diff --git a/src/utils/__tests__/joinClasses-test.js b/src/utils/__tests__/joinClasses-test.js
deleted file mode 100644
index a5e29d931c9..00000000000
--- a/src/utils/__tests__/joinClasses-test.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-require('mock-modules').dontMock('joinClasses');
-
-var joinClasses = require('joinClasses');
-
-describe('joinClasses', function() {
-
-  it('should return a single className', function() {
-    expect(joinClasses('aaa')).toEqual('aaa');
-  });
-
-  it('should join two classes together', function() {
-    var aaa = 'aaa';
-    var bbb = 'bbb';
-    expect(joinClasses(aaa, bbb)).toEqual('aaa bbb');
-  });
-
-  it('should join many classes together', function() {
-    var aaa = 'aaa';
-    var bbb = 'bbb';
-    var ccc = 'ccc';
-    var ddd = 'ddd';
-    var eee = 'eee';
-    expect(joinClasses(aaa, bbb, ccc, ddd, eee)).toEqual('aaa bbb ccc ddd eee');
-  });
-
-  it('should omit undefined and empty classes', function() {
-    var aaa = 'aaa';
-    var bbb;
-    var ccc = null;
-    var ddd = '';
-    var eee = 'eee';
-    expect(joinClasses(bbb)).toEqual('');
-    expect(joinClasses(bbb, bbb, bbb)).toEqual('');
-    expect(joinClasses(aaa, bbb, ccc, ddd, eee)).toEqual('aaa eee');
-  });
-
-});
diff --git a/src/utils/__tests__/keyMirror-test.js b/src/utils/__tests__/keyMirror-test.js
deleted file mode 100644
index 4b7f04571b4..00000000000
--- a/src/utils/__tests__/keyMirror-test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-require('mock-modules').dontMock('keyMirror');
-
-var keyMirror = require('keyMirror');
-
-describe('keyMirror', function() {
-  it('should create an object with values matching keys provided', function() {
-    var mirror = keyMirror({
-      foo: null,
-      bar: true,
-      "baz": { some: "object" },
-      qux: undefined
-    });
-    expect('foo' in mirror).toBe(true);
-    expect(mirror.foo).toBe('foo');
-    expect('bar' in mirror).toBe(true);
-    expect(mirror.bar).toBe('bar');
-    expect('baz' in mirror).toBe(true);
-    expect(mirror.baz).toBe('baz');
-    expect('qux' in mirror).toBe(true);
-    expect(mirror.qux).toBe('qux');
-  });
-
-  it('should not use properties from prototypes', function() {
-    function Klass() {
-      this.useMeToo = true;
-    }
-    Klass.prototype.doNotUse = true;
-    var instance = new Klass();
-    instance.useMe = true;
-
-    var mirror = keyMirror(instance);
-
-    expect('doNotUse' in mirror).toBe(false);
-    expect('useMe' in mirror).toBe(true);
-    expect('useMeToo' in mirror).toBe(true);
-  });
-
-  it('should throw when a non-object argument is used', function() {
-    [null, undefined, 0, 7, ['uno'], true, "string"].forEach(function(testVal) {
-      expect(keyMirror.bind(null, testVal)).toThrow();
-    });
-  });
-
-  it('should work when "constructor" is a key', function() {
-    var obj = { constructor: true };
-    expect(keyMirror.bind(null, obj)).not.toThrow();
-    var mirror = keyMirror(obj);
-    expect('constructor' in mirror).toBe(true);
-  });
-});
-
diff --git a/src/utils/__tests__/memoizeStringOnly-test.js b/src/utils/__tests__/memoizeStringOnly-test.js
deleted file mode 100644
index 23cc4741bde..00000000000
--- a/src/utils/__tests__/memoizeStringOnly-test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- */
-
-"use strict";
-
-describe('memoizeStringOnly', function() {
-  var memoizeStringOnly;
-
-  beforeEach(function() {
-    require('mock-modules').dumpCache();
-    memoizeStringOnly = require('memoizeStringOnly');
-  });
-
-  it('should be transparent to callers', function() {
-    var callback = function(string) {
-      return string;
-    };
-    var memoized = memoizeStringOnly(callback);
-
-    expect(memoized('foo'), callback('foo'));
-  });
-});
diff --git a/src/utils/__tests__/onlyChild-test.js b/src/utils/__tests__/onlyChild-test.js
deleted file mode 100644
index 503173fd89c..00000000000
--- a/src/utils/__tests__/onlyChild-test.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- * @jsx React.DOM
- */
-
-"use strict";
-
-describe('onlyChild', function() {
-
-  var React;
-  var onlyChild;
-  var WrapComponent;
-
-  beforeEach(function() {
-    React = require('React');
-    onlyChild = require('onlyChild');
-    WrapComponent = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {onlyChild(this.props.children, this.props.mapFn, this)}
-          </div>
-        );
-      }
-    });
-  });
-
-  it('should fail when passed two children', function() {
-    expect(function() {
-      var instance =
-        <WrapComponent>
-          <div />
-          <span />
-        </WrapComponent>;
-      onlyChild(instance.props.children);
-    }).toThrow();
-  });
-
-  it('should fail when passed nully values', function() {
-    expect(function() {
-      var instance =
-        <WrapComponent>
-          {null}
-        </WrapComponent>;
-      onlyChild(instance.props.children);
-    }).toThrow();
-
-    expect(function() {
-      var instance =
-        <WrapComponent>
-          {undefined}
-        </WrapComponent>;
-      onlyChild(instance.props.children);
-    }).toThrow();
-  });
-
-  it('should fail when key/value objects', function() {
-    expect(function() {
-      var instance =
-        <WrapComponent>
-          {{oneThing: <span />}}
-        </WrapComponent>;
-      onlyChild(instance.props.children);
-    }).toThrow();
-  });
-
-
-  it('should not fail when passed interpolated single child', function() {
-    expect(function() {
-      var instance =
-        <WrapComponent>
-          {<span />}
-        </WrapComponent>;
-      onlyChild(instance.props.children);
-    }).not.toThrow();
-  });
-
-
-  it('should return the only child', function() {
-    expect(function() {
-      var instance =
-        <WrapComponent>
-          <span />
-        </WrapComponent>;
-      onlyChild(instance.props.children);
-    }).not.toThrow();
-  });
-
-});
diff --git a/src/utils/__tests__/sliceChildren-test.js b/src/utils/__tests__/sliceChildren-test.js
deleted file mode 100644
index 195bcd4e6e9..00000000000
--- a/src/utils/__tests__/sliceChildren-test.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- * @jsx React.DOM
- */
-
-"use strict";
-
-describe('sliceChildren', function() {
-
-  var React;
-  var ReactTestUtils;
-
-  var sliceChildren;
-  var reactComponentExpect;
-
-  var Partial;
-
-  beforeEach(function() {
-    React = require('React');
-    ReactTestUtils = require('ReactTestUtils');
-
-    sliceChildren = require('sliceChildren');
-    reactComponentExpect = require('reactComponentExpect');
-
-    Partial = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {sliceChildren(
-              this.props.children,
-              this.props.start,
-              this.props.end
-            )}
-          </div>
-        );
-      }
-    });
-  });
-
-  function renderAndSlice(set, start, end) {
-    var instance = <Partial start={start} end={end}>{set}</Partial>;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    var rendered = reactComponentExpect(instance)
-      .expectRenderedChild()
-      .instance();
-    return rendered.props.children;
-  }
-
-  it('should render the whole set if start zero is supplied', function() {
-    var fullSet = [
-      <div key="A" />,
-      <div key="B" />,
-      <div key="C" />
-    ];
-    var children = renderAndSlice(fullSet, 0);
-    expect(children).toEqual({
-      '.$A': fullSet[0],
-      '.$B': fullSet[1],
-      '.$C': fullSet[2]
-    });
-  });
-
-  it('should render the remaining set if no end index is supplied', function() {
-    var fullSet = [
-      <div key="A" />,
-      <div key="B" />,
-      <div key="C" />
-    ];
-    var children = renderAndSlice(fullSet, 1);
-    expect(children).toEqual({
-      '.$B': fullSet[1],
-      '.$C': fullSet[2]
-    });
-  });
-
-  it('should exclude everything at or after the end index', function() {
-    var fullSet = [
-      <div key="A" />,
-      <div key="B" />,
-      <div key="C" />,
-      <div key="D" />
-    ];
-    var children = renderAndSlice(fullSet, 1, 2);
-    expect(children).toEqual({
-      '.$B': fullSet[1]
-    });
-  });
-
-  it('should allow static children to be sliced', function() {
-    var a = <div />;
-    var b = <div />;
-    var c = <div />;
-
-    var instance = <Partial start={1} end={2}>{a}{b}{c}</Partial>;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    var rendered = reactComponentExpect(instance)
-      .expectRenderedChild()
-      .instance();
-
-    expect(rendered.props.children).toEqual({
-      '.1': b
-    });
-  });
-
-});
diff --git a/src/utils/__tests__/traverseAllChildren-test.js b/src/utils/__tests__/traverseAllChildren-test.js
deleted file mode 100644
index 1868cf3f5dd..00000000000
--- a/src/utils/__tests__/traverseAllChildren-test.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails react-core
- * @jsx React.DOM
- */
-
-"use strict";
-
-describe('traverseAllChildren', function() {
-  var traverseAllChildren;
-  var React;
-  beforeEach(function() {
-    traverseAllChildren = require('traverseAllChildren');
-    React = require('React');
-  });
-
-
-  it('should support identity for simple', function() {
-    var traverseContext = [];
-    var traverseFn =
-      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
-        context.push(true);
-      });
-
-    var simpleKid = <span key="simple" />;
-
-    // Jasmine doesn't provide a way to test that the fn was invoked with scope.
-    var instance = <div>{simpleKid}</div>;
-    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      simpleKid,
-      '.$simple',
-      0
-    );
-    expect(traverseContext.length).toEqual(1);
-  });
-
-  it('should treat single arrayless child as being in array', function() {
-    var traverseContext = [];
-    var traverseFn =
-      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
-        context.push(true);
-      });
-
-    var simpleKid = <span />;
-    var instance = <div>{simpleKid}</div>;
-    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      simpleKid,
-      '.0',
-      0
-    );
-    expect(traverseContext.length).toEqual(1);
-  });
-
-  it('should treat single child in array as expected', function() {
-    var traverseContext = [];
-    var traverseFn =
-      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
-        context.push(true);
-      });
-
-    var simpleKid = <span />;
-    var instance = <div>{[simpleKid]}</div>;
-    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      simpleKid,
-      '.0',
-      0
-    );
-    expect(traverseContext.length).toEqual(1);
-  });
-
-  it('should be called for each child', function() {
-    var zero = <div key="keyZero" />;
-    var one = null;
-    var two = <div key="keyTwo" />;
-    var three = null;
-    var four = <div key="keyFour" />;
-
-    var traverseContext = [];
-    var traverseFn =
-      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
-        context.push(true);
-      });
-
-    var instance = (
-      <div>
-        {zero}
-        {one}
-        {two}
-        {three}
-        {four}
-      </div>
-    );
-
-    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      zero,
-      '.$keyZero',
-      0
-    );
-    expect(traverseFn).toHaveBeenCalledWith(traverseContext, one, '.1', 1);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      two,
-      '.$keyTwo',
-      2
-    );
-    expect(traverseFn).toHaveBeenCalledWith(traverseContext, three, '.3', 3);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      four,
-      '.$keyFour',
-      4
-    );
-  });
-
-  // Todo: test that nums/strings are converted to ReactComponents.
-
-  it('should be called for each child in nested structure', function() {
-    var zero = <div key="keyZero" />;
-    var one = null;
-    var two = <div key="keyTwo" />;
-    var three = null;
-    var four = <div key="keyFour" />;
-    var five = <div key="keyFiveInner" />;
-    // five is placed into a JS object with a key that is joined to the
-    // component key attribute.
-    // Precedence is as follows:
-    // 1. If grouped in an Object, the object key combined with `key` prop
-    // 2. If grouped in an Array, the `key` prop, falling back to array index
-
-
-    var traverseContext = [];
-    var traverseFn =
-      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
-        context.push(true);
-      });
-
-    var instance = (
-      <div>{
-        [{
-          firstHalfKey: [zero, one, two],
-          secondHalfKey: [three, four],
-          keyFive: five
-        }]
-      }</div>
-    );
-
-    traverseAllChildren(instance.props.children, traverseFn, traverseContext);
-    expect(traverseFn.calls.length).toBe(6);
-    expect(traverseContext.length).toEqual(6);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      zero,
-      '.0:$firstHalfKey:0:$keyZero',
-      0
-    );
-
-    expect(traverseFn)
-      .toHaveBeenCalledWith(traverseContext, one, '.0:$firstHalfKey:0:1', 1);
-
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      two,
-      '.0:$firstHalfKey:0:$keyTwo',
-      2
-    );
-
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      three,
-      '.0:$secondHalfKey:0:0',
-      3
-    );
-
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      four,
-      '.0:$secondHalfKey:0:$keyFour',
-      4
-    );
-
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      five,
-      '.0:$keyFive:$keyFiveInner',
-      5
-    );
-  });
-
-  it('should retain key across two mappings', function() {
-    var zeroForceKey = <div key="keyZero" />;
-    var oneForceKey = <div key="keyOne" />;
-    var traverseContext = [];
-    var traverseFn =
-      jasmine.createSpy().andCallFake(function(context, kid, key, index) {
-        context.push(true);
-      });
-
-    var forcedKeys = (
-      <div>
-        {zeroForceKey}
-        {oneForceKey}
-      </div>
-    );
-
-    traverseAllChildren(forcedKeys.props.children, traverseFn, traverseContext);
-    expect(traverseContext.length).toEqual(2);
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      zeroForceKey,
-      '.$keyZero',
-      0
-    );
-    expect(traverseFn).toHaveBeenCalledWith(
-      traverseContext,
-      oneForceKey,
-      '.$keyOne',
-      1
-    );
-  });
-
-});
diff --git a/src/utils/accumulate.js b/src/utils/accumulate.js
deleted file mode 100644
index 38a896a5d61..00000000000
--- a/src/utils/accumulate.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule accumulate
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * Accumulates items that must not be null or undefined.
- *
- * This is used to conserve memory by avoiding array allocations.
- *
- * @return {*|array<*>} An accumulation of items.
- */
-function accumulate(current, next) {
-  invariant(
-    next != null,
-    'accumulate(...): Accumulated items must be not be null or undefined.'
-  );
-  if (current == null) {
-    return next;
-  } else {
-    // Both are not empty. Warning: Never call x.concat(y) when you are not
-    // certain that x is an Array (x could be a string with concat method).
-    var currentIsArray = Array.isArray(current);
-    var nextIsArray = Array.isArray(next);
-    if (currentIsArray) {
-      return current.concat(next);
-    } else {
-      if (nextIsArray) {
-        return [current].concat(next);
-      } else {
-        return [current, next];
-      }
-    }
-  }
-}
-
-module.exports = accumulate;
diff --git a/src/utils/adler32.js b/src/utils/adler32.js
deleted file mode 100644
index 59f9f21d38f..00000000000
--- a/src/utils/adler32.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule adler32
- */
-
-/* jslint bitwise:true */
-
-"use strict";
-
-var MOD = 65521;
-
-// This is a clean-room implementation of adler32 designed for detecting
-// if markup is not what we expect it to be. It does not need to be
-// cryptographically strong, only reasonable good at detecting if markup
-// generated on the server is different than that on the client.
-function adler32(data) {
-  var a = 1;
-  var b = 0;
-  for (var i = 0; i < data.length; i++) {
-    a = (a + data.charCodeAt(i)) % MOD;
-    b = (b + a) % MOD;
-  }
-  return a | (b << 16);
-}
-
-module.exports = adler32;
diff --git a/src/utils/cloneWithProps.js b/src/utils/cloneWithProps.js
deleted file mode 100644
index 9e82184cc9d..00000000000
--- a/src/utils/cloneWithProps.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @typechecks
- * @providesModule cloneWithProps
- */
-
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-var ReactPropTransferer = require('ReactPropTransferer');
-
-var keyOf = require('keyOf');
-var warning = require('warning');
-
-var CHILDREN_PROP = keyOf({children: null});
-
-/**
- * Sometimes you want to change the props of a child passed to you. Usually
- * this is to add a CSS class.
- *
- * @param {object} child child component you'd like to clone
- * @param {object} props props you'd like to modify. They will be merged
- * as if you used `transferPropsTo()`.
- * @return {object} a clone of child with props merged in.
- */
-function cloneWithProps(child, props) {
-  if (__DEV__) {
-    warning(
-      !child.ref,
-      'You are calling cloneWithProps() on a child with a ref. This is ' +
-      'dangerous because you\'re creating a new child which will not be ' +
-      'added as a ref to its parent.'
-    );
-  }
-
-  var newProps = ReactPropTransferer.mergeProps(props, child.props);
-
-  // Use `child.props.children` if it is provided.
-  if (!newProps.hasOwnProperty(CHILDREN_PROP) &&
-      child.props.hasOwnProperty(CHILDREN_PROP)) {
-    newProps.children = child.props.children;
-  }
-
-  // The current API doesn't retain _owner and _context, which is why this
-  // doesn't use ReactDescriptor.cloneAndReplaceProps.
-  return ReactDescriptor.createDescriptor(child.type, newProps);
-}
-
-module.exports = cloneWithProps;
diff --git a/src/utils/escapeTextForBrowser.js b/src/utils/escapeTextForBrowser.js
deleted file mode 100644
index 0eceb093a77..00000000000
--- a/src/utils/escapeTextForBrowser.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule escapeTextForBrowser
- * @typechecks static-only
- */
-
-"use strict";
-
-var ESCAPE_LOOKUP = {
-  "&": "&amp;",
-  ">": "&gt;",
-  "<": "&lt;",
-  "\"": "&quot;",
-  "'": "&#x27;"
-};
-
-var ESCAPE_REGEX = /[&><"']/g;
-
-function escaper(match) {
-  return ESCAPE_LOOKUP[match];
-}
-
-/**
- * Escapes text to prevent scripting attacks.
- *
- * @param {*} text Text value to escape.
- * @return {string} An escaped string.
- */
-function escapeTextForBrowser(text) {
-  return ('' + text).replace(ESCAPE_REGEX, escaper);
-}
-
-module.exports = escapeTextForBrowser;
diff --git a/src/utils/flattenChildren.js b/src/utils/flattenChildren.js
deleted file mode 100644
index fe1a68cd6e0..00000000000
--- a/src/utils/flattenChildren.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule flattenChildren
- */
-
-"use strict";
-
-var traverseAllChildren = require('traverseAllChildren');
-var warning = require('warning');
-
-/**
- * @param {function} traverseContext Context passed through traversal.
- * @param {?ReactComponent} child React child component.
- * @param {!string} name String name of key path to child.
- */
-function flattenSingleChildIntoContext(traverseContext, child, name) {
-  // We found a component instance.
-  var result = traverseContext;
-  var keyUnique = !result.hasOwnProperty(name);
-  warning(
-    keyUnique,
-    'flattenChildren(...): Encountered two children with the same key, ' +
-    '`%s`. Child keys must be unique; when two children share a key, only ' +
-    'the first child will be used.',
-    name
-  );
-  if (keyUnique && child != null) {
-    result[name] = child;
-  }
-}
-
-/**
- * Flattens children that are typically specified as `props.children`. Any null
- * children will not be included in the resulting object.
- * @return {!object} flattened children keyed by name.
- */
-function flattenChildren(children) {
-  if (children == null) {
-    return children;
-  }
-  var result = {};
-  traverseAllChildren(children, flattenSingleChildIntoContext, result);
-  return result;
-}
-
-module.exports = flattenChildren;
diff --git a/src/utils/forEachAccumulated.js b/src/utils/forEachAccumulated.js
deleted file mode 100644
index e1494cf5f7a..00000000000
--- a/src/utils/forEachAccumulated.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule forEachAccumulated
- */
-
-"use strict";
-
-/**
- * @param {array} an "accumulation" of items which is either an Array or
- * a single item. Useful when paired with the `accumulate` module. This is a
- * simple utility that allows us to reason about a collection of items, but
- * handling the case when there is exactly one item (and we do not need to
- * allocate an array).
- */
-var forEachAccumulated = function(arr, cb, scope) {
-  if (Array.isArray(arr)) {
-    arr.forEach(cb, scope);
-  } else if (arr) {
-    cb.call(scope, arr);
-  }
-};
-
-module.exports = forEachAccumulated;
diff --git a/src/utils/isTextInputElement.js b/src/utils/isTextInputElement.js
deleted file mode 100644
index 857019af41f..00000000000
--- a/src/utils/isTextInputElement.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule isTextInputElement
- */
-
-"use strict";
-
-/**
- * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
- */
-var supportedInputTypes = {
-  'color': true,
-  'date': true,
-  'datetime': true,
-  'datetime-local': true,
-  'email': true,
-  'month': true,
-  'number': true,
-  'password': true,
-  'range': true,
-  'search': true,
-  'tel': true,
-  'text': true,
-  'time': true,
-  'url': true,
-  'week': true
-};
-
-function isTextInputElement(elem) {
-  return elem && (
-    (elem.nodeName === 'INPUT' && supportedInputTypes[elem.type]) ||
-    elem.nodeName === 'TEXTAREA'
-  );
-}
-
-module.exports = isTextInputElement;
diff --git a/src/utils/joinClasses.js b/src/utils/joinClasses.js
deleted file mode 100644
index 5e610cf933b..00000000000
--- a/src/utils/joinClasses.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule joinClasses
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * Combines multiple className strings into one.
- * http://jsperf.com/joinclasses-args-vs-array
- *
- * @param {...?string} classes
- * @return {string}
- */
-function joinClasses(className/*, ... */) {
-  if (!className) {
-    className = '';
-  }
-  var nextClass;
-  var argLength = arguments.length;
-  if (argLength > 1) {
-    for (var ii = 1; ii < argLength; ii++) {
-      nextClass = arguments[ii];
-      if (nextClass) {
-        className = (className ? className + ' ' : '') + nextClass;
-      }
-    }
-  }
-  return className;
-}
-
-module.exports = joinClasses;
diff --git a/src/utils/keyMirror.js b/src/utils/keyMirror.js
deleted file mode 100644
index 73098a1bc1e..00000000000
--- a/src/utils/keyMirror.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule keyMirror
- * @typechecks static-only
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * Constructs an enumeration with keys equal to their value.
- *
- * For example:
- *
- *   var COLORS = keyMirror({blue: null, red: null});
- *   var myColor = COLORS.blue;
- *   var isColorValid = !!COLORS[myColor];
- *
- * The last line could not be performed if the values of the generated enum were
- * not equal to their keys.
- *
- *   Input:  {key1: val1, key2: val2}
- *   Output: {key1: key1, key2: key2}
- *
- * @param {object} obj
- * @return {object}
- */
-var keyMirror = function(obj) {
-  var ret = {};
-  var key;
-  invariant(
-    obj instanceof Object && !Array.isArray(obj),
-    'keyMirror(...): Argument must be an object.'
-  );
-  for (key in obj) {
-    if (!obj.hasOwnProperty(key)) {
-      continue;
-    }
-    ret[key] = key;
-  }
-  return ret;
-};
-
-module.exports = keyMirror;
diff --git a/src/utils/memoizeStringOnly.js b/src/utils/memoizeStringOnly.js
deleted file mode 100644
index 8386ba13df8..00000000000
--- a/src/utils/memoizeStringOnly.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule memoizeStringOnly
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * Memoizes the return value of a function that accepts one string argument.
- *
- * @param {function} callback
- * @return {function}
- */
-function memoizeStringOnly(callback) {
-  var cache = {};
-  return function(string) {
-    if (cache.hasOwnProperty(string)) {
-      return cache[string];
-    } else {
-      return cache[string] = callback.call(this, string);
-    }
-  };
-}
-
-module.exports = memoizeStringOnly;
diff --git a/src/utils/mixInto.js b/src/utils/mixInto.js
deleted file mode 100644
index b582d1ed1c0..00000000000
--- a/src/utils/mixInto.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mixInto
- */
-
-"use strict";
-
-/**
- * Simply copies properties to the prototype.
- */
-var mixInto = function(constructor, methodBag) {
-  var methodName;
-  for (methodName in methodBag) {
-    if (!methodBag.hasOwnProperty(methodName)) {
-      continue;
-    }
-    constructor.prototype[methodName] = methodBag[methodName];
-  }
-};
-
-module.exports = mixInto;
diff --git a/src/utils/onlyChild.js b/src/utils/onlyChild.js
deleted file mode 100644
index 5c15af4cb18..00000000000
--- a/src/utils/onlyChild.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule onlyChild
- */
-"use strict";
-
-var ReactDescriptor = require('ReactDescriptor');
-
-var invariant = require('invariant');
-
-/**
- * Returns the first child in a collection of children and verifies that there
- * is only one child in the collection. The current implementation of this
- * function assumes that a single child gets passed without a wrapper, but the
- * purpose of this helper function is to abstract away the particular structure
- * of children.
- *
- * @param {?object} children Child collection structure.
- * @return {ReactComponent} The first and only `ReactComponent` contained in the
- * structure.
- */
-function onlyChild(children) {
-  invariant(
-    ReactDescriptor.isValidDescriptor(children),
-    'onlyChild must be passed a children with exactly one child.'
-  );
-  return children;
-}
-
-module.exports = onlyChild;
diff --git a/src/utils/shallowEqual.js b/src/utils/shallowEqual.js
deleted file mode 100644
index be0aca12efa..00000000000
--- a/src/utils/shallowEqual.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule shallowEqual
- */
-
-"use strict";
-
-/**
- * Performs equality by iterating through keys on an object and returning
- * false when any key has values which are not strictly equal between
- * objA and objB. Returns true when the values of all keys are strictly equal.
- *
- * @return {boolean}
- */
-function shallowEqual(objA, objB) {
-  if (objA === objB) {
-    return true;
-  }
-  var key;
-  // Test for A's keys different from B.
-  for (key in objA) {
-    if (objA.hasOwnProperty(key) &&
-        (!objB.hasOwnProperty(key) || objA[key] !== objB[key])) {
-      return false;
-    }
-  }
-  // Test for B'a keys missing from A.
-  for (key in objB) {
-    if (objB.hasOwnProperty(key) && !objA.hasOwnProperty(key)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-module.exports = shallowEqual;
diff --git a/src/utils/sliceChildren.js b/src/utils/sliceChildren.js
deleted file mode 100644
index 32729a4a449..00000000000
--- a/src/utils/sliceChildren.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule sliceChildren
- */
-
-"use strict";
-
-var flattenChildren = require('flattenChildren');
-
-/**
- * Slice children that are typically specified as `props.children`. This version
- * of slice children ignores empty child components.
- *
- * @param {*} children The children set to filter.
- * @param {number} start The first zero-based index to include in the subset.
- * @param {?number} end The non-inclusive last index of the subset.
- * @return {object} mirrored array with mapped children
- */
-function sliceChildren(children, start, end) {
-  if (children == null) {
-    return children;
-  }
-
-  var slicedChildren = {};
-  var flattenedMap = flattenChildren(children);
-  var ii = 0;
-  for (var key in flattenedMap) {
-    if (!flattenedMap.hasOwnProperty(key)) {
-      continue;
-    }
-    var child = flattenedMap[key];
-    if (ii >= start) {
-      slicedChildren[key] = child;
-    }
-    ii++;
-    if (end != null && ii >= end) {
-      break;
-    }
-  }
-  return slicedChildren;
-}
-
-module.exports = sliceChildren;
diff --git a/src/utils/traverseAllChildren.js b/src/utils/traverseAllChildren.js
deleted file mode 100644
index 3127c74fdd4..00000000000
--- a/src/utils/traverseAllChildren.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule traverseAllChildren
- */
-
-"use strict";
-
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactTextComponent = require('ReactTextComponent');
-
-var invariant = require('invariant');
-
-var SEPARATOR = ReactInstanceHandles.SEPARATOR;
-var SUBSEPARATOR = ':';
-
-/**
- * TODO: Test that:
- * 1. `mapChildren` transforms strings and numbers into `ReactTextComponent`.
- * 2. it('should fail when supplied duplicate key', function() {
- * 3. That a single child and an array with one item have the same key pattern.
- * });
- */
-
-var userProvidedKeyEscaperLookup = {
-  '=': '=0',
-  '.': '=1',
-  ':': '=2'
-};
-
-var userProvidedKeyEscapeRegex = /[=.:]/g;
-
-function userProvidedKeyEscaper(match) {
-  return userProvidedKeyEscaperLookup[match];
-}
-
-/**
- * Generate a key string that identifies a component within a set.
- *
- * @param {*} component A component that could contain a manual key.
- * @param {number} index Index that is used if a manual key is not provided.
- * @return {string}
- */
-function getComponentKey(component, index) {
-  if (component && component.key != null) {
-    // Explicit key
-    return wrapUserProvidedKey(component.key);
-  }
-  // Implicit key determined by the index in the set
-  return index.toString(36);
-}
-
-/**
- * Escape a component key so that it is safe to use in a reactid.
- *
- * @param {*} key Component key to be escaped.
- * @return {string} An escaped string.
- */
-function escapeUserProvidedKey(text) {
-  return ('' + text).replace(
-    userProvidedKeyEscapeRegex,
-    userProvidedKeyEscaper
-  );
-}
-
-/**
- * Wrap a `key` value explicitly provided by the user to distinguish it from
- * implicitly-generated keys generated by a component's index in its parent.
- *
- * @param {string} key Value of a user-provided `key` attribute
- * @return {string}
- */
-function wrapUserProvidedKey(key) {
-  return '$' + escapeUserProvidedKey(key);
-}
-
-/**
- * @param {?*} children Children tree container.
- * @param {!string} nameSoFar Name of the key path so far.
- * @param {!number} indexSoFar Number of children encountered until this point.
- * @param {!function} callback Callback to invoke with each child found.
- * @param {?*} traverseContext Used to pass information throughout the traversal
- * process.
- * @return {!number} The number of children in this subtree.
- */
-var traverseAllChildrenImpl =
-  function(children, nameSoFar, indexSoFar, callback, traverseContext) {
-    var subtreeCount = 0;  // Count of children found in the current subtree.
-    if (Array.isArray(children)) {
-      for (var i = 0; i < children.length; i++) {
-        var child = children[i];
-        var nextName = (
-          nameSoFar +
-          (nameSoFar ? SUBSEPARATOR : SEPARATOR) +
-          getComponentKey(child, i)
-        );
-        var nextIndex = indexSoFar + subtreeCount;
-        subtreeCount += traverseAllChildrenImpl(
-          child,
-          nextName,
-          nextIndex,
-          callback,
-          traverseContext
-        );
-      }
-    } else {
-      var type = typeof children;
-      var isOnlyChild = nameSoFar === '';
-      // If it's the only child, treat the name as if it was wrapped in an array
-      // so that it's consistent if the number of children grows
-      var storageName =
-        isOnlyChild ? SEPARATOR + getComponentKey(children, 0) : nameSoFar;
-      if (children == null || type === 'boolean') {
-        // All of the above are perceived as null.
-        callback(traverseContext, null, storageName, indexSoFar);
-        subtreeCount = 1;
-      } else if (children.type && children.type.prototype &&
-                 children.type.prototype.mountComponentIntoNode) {
-        callback(traverseContext, children, storageName, indexSoFar);
-        subtreeCount = 1;
-      } else {
-        if (type === 'object') {
-          invariant(
-            !children || children.nodeType !== 1,
-            'traverseAllChildren(...): Encountered an invalid child; DOM ' +
-            'elements are not valid children of React components.'
-          );
-          for (var key in children) {
-            if (children.hasOwnProperty(key)) {
-              subtreeCount += traverseAllChildrenImpl(
-                children[key],
-                (
-                  nameSoFar + (nameSoFar ? SUBSEPARATOR : SEPARATOR) +
-                  wrapUserProvidedKey(key) + SUBSEPARATOR +
-                  getComponentKey(children[key], 0)
-                ),
-                indexSoFar + subtreeCount,
-                callback,
-                traverseContext
-              );
-            }
-          }
-        } else if (type === 'string') {
-          var normalizedText = ReactTextComponent(children);
-          callback(traverseContext, normalizedText, storageName, indexSoFar);
-          subtreeCount += 1;
-        } else if (type === 'number') {
-          var normalizedNumber = ReactTextComponent('' + children);
-          callback(traverseContext, normalizedNumber, storageName, indexSoFar);
-          subtreeCount += 1;
-        }
-      }
-    }
-    return subtreeCount;
-  };
-
-/**
- * Traverses children that are typically specified as `props.children`, but
- * might also be specified through attributes:
- *
- * - `traverseAllChildren(this.props.children, ...)`
- * - `traverseAllChildren(this.props.leftPanelChildren, ...)`
- *
- * The `traverseContext` is an optional argument that is passed through the
- * entire traversal. It can be used to store accumulations or anything else that
- * the callback might find relevant.
- *
- * @param {?*} children Children tree object.
- * @param {!function} callback To invoke upon traversing each child.
- * @param {?*} traverseContext Context for traversal.
- * @return {!number} The number of children in this subtree.
- */
-function traverseAllChildren(children, callback, traverseContext) {
-  if (children == null) {
-    return 0;
-  }
-
-  return traverseAllChildrenImpl(children, '', 0, callback, traverseContext);
-}
-
-module.exports = traverseAllChildren;
diff --git a/src/vendor/core/CSSCore.js b/src/vendor/core/CSSCore.js
deleted file mode 100644
index a17cb269563..00000000000
--- a/src/vendor/core/CSSCore.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule CSSCore
- * @typechecks
- */
-
-var invariant = require('invariant');
-
-/**
- * The CSSCore module specifies the API (and implements most of the methods)
- * that should be used when dealing with the display of elements (via their
- * CSS classes and visibility on screen. It is an API focused on mutating the
- * display and not reading it as no logical state should be encoded in the
- * display of elements.
- */
-
-var CSSCore = {
-
-  /**
-   * Adds the class passed in to the element if it doesn't already have it.
-   *
-   * @param {DOMElement} element the element to set the class on
-   * @param {string} className the CSS className
-   * @return {DOMElement} the element passed in
-   */
-  addClass: function(element, className) {
-    invariant(
-      !/\s/.test(className),
-      'CSSCore.addClass takes only a single class name. "%s" contains ' +
-      'multiple classes.', className
-    );
-
-    if (className) {
-      if (element.classList) {
-        element.classList.add(className);
-      } else if (!CSSCore.hasClass(element, className)) {
-        element.className = element.className + ' ' + className;
-      }
-    }
-    return element;
-  },
-
-  /**
-   * Removes the class passed in from the element
-   *
-   * @param {DOMElement} element the element to set the class on
-   * @param {string} className the CSS className
-   * @return {DOMElement} the element passed in
-   */
-  removeClass: function(element, className) {
-    invariant(
-      !/\s/.test(className),
-      'CSSCore.removeClass takes only a single class name. "%s" contains ' +
-      'multiple classes.', className
-    );
-
-    if (className) {
-      if (element.classList) {
-        element.classList.remove(className);
-      } else if (CSSCore.hasClass(element, className)) {
-        element.className = element.className
-          .replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), '$1')
-          .replace(/\s+/g, ' ') // multiple spaces to one
-          .replace(/^\s*|\s*$/g, ''); // trim the ends
-      }
-    }
-    return element;
-  },
-
-  /**
-   * Helper to add or remove a class from an element based on a condition.
-   *
-   * @param {DOMElement} element the element to set the class on
-   * @param {string} className the CSS className
-   * @param {*} bool condition to whether to add or remove the class
-   * @return {DOMElement} the element passed in
-   */
-  conditionClass: function(element, className, bool) {
-    return (bool ? CSSCore.addClass : CSSCore.removeClass)(element, className);
-  },
-
-  /**
-   * Tests whether the element has the class specified.
-   *
-   * @param {DOMNode|DOMWindow} element the element to set the class on
-   * @param {string} className the CSS className
-   * @returns {boolean} true if the element has the class, false if not
-   */
-  hasClass: function(element, className) {
-    invariant(
-      !/\s/.test(className),
-      'CSS.hasClass takes only a single class name.'
-    );
-    if (element.classList) {
-      return !!className && element.classList.contains(className);
-    }
-    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
-  }
-
-};
-
-module.exports = CSSCore;
diff --git a/src/vendor/core/ExecutionEnvironment.js b/src/vendor/core/ExecutionEnvironment.js
deleted file mode 100644
index 0a376fba5ca..00000000000
--- a/src/vendor/core/ExecutionEnvironment.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ExecutionEnvironment
- */
-
-/*jslint evil: true */
-
-"use strict";
-
-var canUseDOM = !!(
-  typeof window !== 'undefined' &&
-  window.document &&
-  window.document.createElement
-);
-
-/**
- * Simple, lightweight module assisting with the detection and context of
- * Worker. Helps avoid circular dependencies and allows code to reason about
- * whether or not they are in a Worker, even if they never include the main
- * `ReactWorker` dependency.
- */
-var ExecutionEnvironment = {
-
-  canUseDOM: canUseDOM,
-
-  canUseWorkers: typeof Worker !== 'undefined',
-
-  canUseEventListeners:
-    canUseDOM && !!(window.addEventListener || window.attachEvent),
-
-  canUseViewport: canUseDOM && !!window.screen,
-
-  isInWorker: !canUseDOM // For now, this is true - might change in the future.
-
-};
-
-module.exports = ExecutionEnvironment;
diff --git a/src/vendor/core/TouchEventUtils.js b/src/vendor/core/TouchEventUtils.js
deleted file mode 100644
index b5c61bdeeb2..00000000000
--- a/src/vendor/core/TouchEventUtils.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule TouchEventUtils
- */
-
-var TouchEventUtils = {
-  /**
-   * Utility function for common case of extracting out the primary touch from a
-   * touch event.
-   * - `touchEnd` events usually do not have the `touches` property.
-   *   http://stackoverflow.com/questions/3666929/
-   *   mobile-sarai-touchend-event-not-firing-when-last-touch-is-removed
-   *
-   * @param {Event} nativeEvent Native event that may or may not be a touch.
-   * @return {TouchesObject?} an object with pageX and pageY or null.
-   */
-  extractSingleTouch: function(nativeEvent) {
-    var touches = nativeEvent.touches;
-    var changedTouches = nativeEvent.changedTouches;
-    var hasTouches = touches && touches.length > 0;
-    var hasChangedTouches = changedTouches && changedTouches.length > 0;
-
-    return !hasTouches && hasChangedTouches ? changedTouches[0] :
-           hasTouches ? touches[0] :
-           nativeEvent;
-  }
-};
-
-module.exports = TouchEventUtils;
diff --git a/src/vendor/core/camelize.js b/src/vendor/core/camelize.js
deleted file mode 100644
index e894ebf80f5..00000000000
--- a/src/vendor/core/camelize.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule camelize
- * @typechecks
- */
-
-var _hyphenPattern = /-(.)/g;
-
-/**
- * Camelcases a hyphenated string, for example:
- *
- *   > camelize('background-color')
- *   < "backgroundColor"
- *
- * @param {string} string
- * @return {string}
- */
-function camelize(string) {
-  return string.replace(_hyphenPattern, function(_, character) {
-    return character.toUpperCase();
-  });
-}
-
-module.exports = camelize;
diff --git a/src/vendor/core/copyProperties.js b/src/vendor/core/copyProperties.js
deleted file mode 100644
index c08d986b8fd..00000000000
--- a/src/vendor/core/copyProperties.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule copyProperties
- */
-
-/**
- * Copy properties from one or more objects (up to 5) into the first object.
- * This is a shallow copy. It mutates the first object and also returns it.
- *
- * NOTE: `arguments` has a very significant performance penalty, which is why
- * we don't support unlimited arguments.
- */
-function copyProperties(obj, a, b, c, d, e, f) {
-  obj = obj || {};
-
-  if (__DEV__) {
-    if (f) {
-      throw new Error('Too many arguments passed to copyProperties');
-    }
-  }
-
-  var args = [a, b, c, d, e];
-  var ii = 0, v;
-  while (args[ii]) {
-    v = args[ii++];
-    for (var k in v) {
-      obj[k] = v[k];
-    }
-
-    // IE ignores toString in object iteration.. See:
-    // webreflection.blogspot.com/2007/07/quick-fix-internet-explorer-and.html
-    if (v.hasOwnProperty && v.hasOwnProperty('toString') &&
-        (typeof v.toString != 'undefined') && (obj.toString !== v.toString)) {
-      obj.toString = v.toString;
-    }
-  }
-
-  return obj;
-}
-
-module.exports = copyProperties;
diff --git a/src/vendor/core/createArrayFrom.js b/src/vendor/core/createArrayFrom.js
deleted file mode 100644
index 5f63d88915d..00000000000
--- a/src/vendor/core/createArrayFrom.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule createArrayFrom
- * @typechecks
- */
-
-var toArray = require('toArray');
-
-/**
- * Perform a heuristic test to determine if an object is "array-like".
- *
- *   A monk asked Joshu, a Zen master, "Has a dog Buddha nature?"
- *   Joshu replied: "Mu."
- *
- * This function determines if its argument has "array nature": it returns
- * true if the argument is an actual array, an `arguments' object, or an
- * HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()).
- *
- * It will return false for other array-like objects like Filelist.
- *
- * @param {*} obj
- * @return {boolean}
- */
-function hasArrayNature(obj) {
-  return (
-    // not null/false
-    !!obj &&
-    // arrays are objects, NodeLists are functions in Safari
-    (typeof obj == 'object' || typeof obj == 'function') &&
-    // quacks like an array
-    ('length' in obj) &&
-    // not window
-    !('setInterval' in obj) &&
-    // no DOM node should be considered an array-like
-    // a 'select' element has 'length' and 'item' properties on IE8
-    (typeof obj.nodeType != 'number') &&
-    (
-      // a real array
-      Array.isArray(obj) ||
-      // arguments
-      ('callee' in obj) ||
-      // HTMLCollection/NodeList
-      ('item' in obj)
-    )
-  );
-}
-
-/**
- * Ensure that the argument is an array by wrapping it in an array if it is not.
- * Creates a copy of the argument if it is already an array.
- *
- * This is mostly useful idiomatically:
- *
- *   var createArrayFrom = require('createArrayFrom');
- *
- *   function takesOneOrMoreThings(things) {
- *     things = createArrayFrom(things);
- *     ...
- *   }
- *
- * This allows you to treat `things' as an array, but accept scalars in the API.
- *
- * If you need to convert an array-like object, like `arguments`, into an array
- * use toArray instead.
- *
- * @param {*} obj
- * @return {array}
- */
-function createArrayFrom(obj) {
-  if (!hasArrayNature(obj)) {
-    return [obj];
-  } else if (Array.isArray(obj)) {
-    return obj.slice();
-  } else {
-    return toArray(obj);
-  }
-}
-
-module.exports = createArrayFrom;
diff --git a/src/vendor/core/createNodesFromMarkup.js b/src/vendor/core/createNodesFromMarkup.js
deleted file mode 100644
index e337a620ac9..00000000000
--- a/src/vendor/core/createNodesFromMarkup.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule createNodesFromMarkup
- * @typechecks
- */
-
-/*jslint evil: true, sub: true */
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var createArrayFrom = require('createArrayFrom');
-var getMarkupWrap = require('getMarkupWrap');
-var invariant = require('invariant');
-
-/**
- * Dummy container used to render all markup.
- */
-var dummyNode =
-  ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
-
-/**
- * Pattern used by `getNodeName`.
- */
-var nodeNamePattern = /^\s*<(\w+)/;
-
-/**
- * Extracts the `nodeName` of the first element in a string of markup.
- *
- * @param {string} markup String of markup.
- * @return {?string} Node name of the supplied markup.
- */
-function getNodeName(markup) {
-  var nodeNameMatch = markup.match(nodeNamePattern);
-  return nodeNameMatch && nodeNameMatch[1].toLowerCase();
-}
-
-/**
- * Creates an array containing the nodes rendered from the supplied markup. The
- * optionally supplied `handleScript` function will be invoked once for each
- * <script> element that is rendered. If no `handleScript` function is supplied,
- * an exception is thrown if any <script> elements are rendered.
- *
- * @param {string} markup A string of valid HTML markup.
- * @param {?function} handleScript Invoked once for each rendered <script>.
- * @return {array<DOMElement|DOMTextNode>} An array of rendered nodes.
- */
-function createNodesFromMarkup(markup, handleScript) {
-  var node = dummyNode;
-  invariant(!!dummyNode, 'createNodesFromMarkup dummy not initialized');
-  var nodeName = getNodeName(markup);
-
-  var wrap = nodeName && getMarkupWrap(nodeName);
-  if (wrap) {
-    node.innerHTML = wrap[1] + markup + wrap[2];
-
-    var wrapDepth = wrap[0];
-    while (wrapDepth--) {
-      node = node.lastChild;
-    }
-  } else {
-    node.innerHTML = markup;
-  }
-
-  var scripts = node.getElementsByTagName('script');
-  if (scripts.length) {
-    invariant(
-      handleScript,
-      'createNodesFromMarkup(...): Unexpected <script> element rendered.'
-    );
-    createArrayFrom(scripts).forEach(handleScript);
-  }
-
-  var nodes = createArrayFrom(node.childNodes);
-  while (node.lastChild) {
-    node.removeChild(node.lastChild);
-  }
-  return nodes;
-}
-
-module.exports = createNodesFromMarkup;
diff --git a/src/vendor/core/dom/containsNode.js b/src/vendor/core/dom/containsNode.js
deleted file mode 100644
index 0dc2378ef3a..00000000000
--- a/src/vendor/core/dom/containsNode.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule containsNode
- * @typechecks
- */
-
-var isTextNode = require('isTextNode');
-
-/*jslint bitwise:true */
-
-/**
- * Checks if a given DOM node contains or is another DOM node.
- *
- * @param {?DOMNode} outerNode Outer DOM node.
- * @param {?DOMNode} innerNode Inner DOM node.
- * @return {boolean} True if `outerNode` contains or is `innerNode`.
- */
-function containsNode(outerNode, innerNode) {
-  if (!outerNode || !innerNode) {
-    return false;
-  } else if (outerNode === innerNode) {
-    return true;
-  } else if (isTextNode(outerNode)) {
-    return false;
-  } else if (isTextNode(innerNode)) {
-    return containsNode(outerNode, innerNode.parentNode);
-  } else if (outerNode.contains) {
-    return outerNode.contains(innerNode);
-  } else if (outerNode.compareDocumentPosition) {
-    return !!(outerNode.compareDocumentPosition(innerNode) & 16);
-  } else {
-    return false;
-  }
-}
-
-module.exports = containsNode;
diff --git a/src/vendor/core/dom/focusNode.js b/src/vendor/core/dom/focusNode.js
deleted file mode 100644
index 0c0ae601568..00000000000
--- a/src/vendor/core/dom/focusNode.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule focusNode
- */
-
-"use strict";
-
-/**
- * @param {DOMElement} node input/textarea to focus
- */
-function focusNode(node) {
-  // IE8 can throw "Can't move focus to the control because it is invisible,
-  // not enabled, or of a type that does not accept the focus." for all kinds of
-  // reasons that are too expensive and fragile to test.
-  try {
-    node.focus();
-  } catch(e) {
-  }
-}
-
-module.exports = focusNode;
diff --git a/src/vendor/core/dom/getActiveElement.js b/src/vendor/core/dom/getActiveElement.js
deleted file mode 100644
index 163d75a2ccb..00000000000
--- a/src/vendor/core/dom/getActiveElement.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getActiveElement
- * @typechecks
- */
-
-/**
- * Same as document.activeElement but wraps in a try-catch block. In IE it is
- * not safe to call document.activeElement if there is nothing focused.
- *
- * The activeElement will be null only if the document body is not yet defined.
- */
-function getActiveElement() /*?DOMElement*/ {
-  try {
-    return document.activeElement || document.body;
-  } catch (e) {
-    return document.body;
-  }
-}
-
-module.exports = getActiveElement;
diff --git a/src/vendor/core/dom/getUnboundedScrollPosition.js b/src/vendor/core/dom/getUnboundedScrollPosition.js
deleted file mode 100644
index 93b261bd546..00000000000
--- a/src/vendor/core/dom/getUnboundedScrollPosition.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getUnboundedScrollPosition
- * @typechecks
- */
-
-"use strict";
-
-/**
- * Gets the scroll position of the supplied element or window.
- *
- * The return values are unbounded, unlike `getScrollPosition`. This means they
- * may be negative or exceed the element boundaries (which is possible using
- * inertial scrolling).
- *
- * @param {DOMWindow|DOMElement} scrollable
- * @return {object} Map with `x` and `y` keys.
- */
-function getUnboundedScrollPosition(scrollable) {
-  if (scrollable === window) {
-    return {
-      x: window.pageXOffset || document.documentElement.scrollLeft,
-      y: window.pageYOffset || document.documentElement.scrollTop
-    };
-  }
-  return {
-    x: scrollable.scrollLeft,
-    y: scrollable.scrollTop
-  };
-}
-
-module.exports = getUnboundedScrollPosition;
diff --git a/src/vendor/core/dom/isNode.js b/src/vendor/core/dom/isNode.js
deleted file mode 100644
index d47727701e0..00000000000
--- a/src/vendor/core/dom/isNode.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule isNode
- * @typechecks
- */
-
-/**
- * @param {*} object The object to check.
- * @return {boolean} Whether or not the object is a DOM node.
- */
-function isNode(object) {
-  return !!(object && (
-    typeof Node === 'function' ? object instanceof Node :
-      typeof object === 'object' &&
-      typeof object.nodeType === 'number' &&
-      typeof object.nodeName === 'string'
-  ));
-}
-
-module.exports = isNode;
diff --git a/src/vendor/core/dom/isTextNode.js b/src/vendor/core/dom/isTextNode.js
deleted file mode 100644
index 3484b426f8e..00000000000
--- a/src/vendor/core/dom/isTextNode.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule isTextNode
- * @typechecks
- */
-
-var isNode = require('isNode');
-
-/**
- * @param {*} object The object to check.
- * @return {boolean} Whether or not the object is a DOM text node.
- */
-function isTextNode(object) {
-  return isNode(object) && object.nodeType == 3;
-}
-
-module.exports = isTextNode;
diff --git a/src/vendor/core/emptyFunction.js b/src/vendor/core/emptyFunction.js
deleted file mode 100644
index c9d89f22151..00000000000
--- a/src/vendor/core/emptyFunction.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule emptyFunction
- */
-
-var copyProperties = require('copyProperties');
-
-function makeEmptyFunction(arg) {
-  return function() {
-    return arg;
-  };
-}
-
-/**
- * This function accepts and discards inputs; it has no side effects. This is
- * primarily useful idiomatically for overridable function endpoints which
- * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
- */
-function emptyFunction() {}
-
-copyProperties(emptyFunction, {
-  thatReturns: makeEmptyFunction,
-  thatReturnsFalse: makeEmptyFunction(false),
-  thatReturnsTrue: makeEmptyFunction(true),
-  thatReturnsNull: makeEmptyFunction(null),
-  thatReturnsThis: function() { return this; },
-  thatReturnsArgument: function(arg) { return arg; }
-});
-
-module.exports = emptyFunction;
diff --git a/src/vendor/core/emptyObject.js b/src/vendor/core/emptyObject.js
deleted file mode 100644
index 204bd3b1b8b..00000000000
--- a/src/vendor/core/emptyObject.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule emptyObject
- */
-
-"use strict";
-
-var emptyObject = {};
-
-if (__DEV__) {
-  Object.freeze(emptyObject);
-}
-
-module.exports = emptyObject;
diff --git a/src/vendor/core/getMarkupWrap.js b/src/vendor/core/getMarkupWrap.js
deleted file mode 100644
index 9b522417a4d..00000000000
--- a/src/vendor/core/getMarkupWrap.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule getMarkupWrap
- */
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var invariant = require('invariant');
-
-/**
- * Dummy container used to detect which wraps are necessary.
- */
-var dummyNode =
-  ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
-
-/**
- * Some browsers cannot use `innerHTML` to render certain elements standalone,
- * so we wrap them, render the wrapped nodes, then extract the desired node.
- *
- * In IE8, certain elements cannot render alone, so wrap all elements ('*').
- */
-var shouldWrap = {
-  // Force wrapping for SVG elements because if they get created inside a <div>,
-  // they will be initialized in the wrong namespace (and will not display).
-  'circle': true,
-  'defs': true,
-  'ellipse': true,
-  'g': true,
-  'line': true,
-  'linearGradient': true,
-  'path': true,
-  'polygon': true,
-  'polyline': true,
-  'radialGradient': true,
-  'rect': true,
-  'stop': true,
-  'text': true
-};
-
-var selectWrap = [1, '<select multiple="true">', '</select>'];
-var tableWrap = [1, '<table>', '</table>'];
-var trWrap = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
-
-var svgWrap = [1, '<svg>', '</svg>'];
-
-var markupWrap = {
-  '*': [1, '?<div>', '</div>'],
-
-  'area': [1, '<map>', '</map>'],
-  'col': [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
-  'legend': [1, '<fieldset>', '</fieldset>'],
-  'param': [1, '<object>', '</object>'],
-  'tr': [2, '<table><tbody>', '</tbody></table>'],
-
-  'optgroup': selectWrap,
-  'option': selectWrap,
-
-  'caption': tableWrap,
-  'colgroup': tableWrap,
-  'tbody': tableWrap,
-  'tfoot': tableWrap,
-  'thead': tableWrap,
-
-  'td': trWrap,
-  'th': trWrap,
-
-  'circle': svgWrap,
-  'defs': svgWrap,
-  'ellipse': svgWrap,
-  'g': svgWrap,
-  'line': svgWrap,
-  'linearGradient': svgWrap,
-  'path': svgWrap,
-  'polygon': svgWrap,
-  'polyline': svgWrap,
-  'radialGradient': svgWrap,
-  'rect': svgWrap,
-  'stop': svgWrap,
-  'text': svgWrap
-};
-
-/**
- * Gets the markup wrap configuration for the supplied `nodeName`.
- *
- * NOTE: This lazily detects which wraps are necessary for the current browser.
- *
- * @param {string} nodeName Lowercase `nodeName`.
- * @return {?array} Markup wrap configuration, if applicable.
- */
-function getMarkupWrap(nodeName) {
-  invariant(!!dummyNode, 'Markup wrapping node not initialized');
-  if (!markupWrap.hasOwnProperty(nodeName)) {
-    nodeName = '*';
-  }
-  if (!shouldWrap.hasOwnProperty(nodeName)) {
-    if (nodeName === '*') {
-      dummyNode.innerHTML = '<link />';
-    } else {
-      dummyNode.innerHTML = '<' + nodeName + '></' + nodeName + '>';
-    }
-    shouldWrap[nodeName] = !dummyNode.firstChild;
-  }
-  return shouldWrap[nodeName] ? markupWrap[nodeName] : null;
-}
-
-
-module.exports = getMarkupWrap;
diff --git a/src/vendor/core/hyphenate.js b/src/vendor/core/hyphenate.js
deleted file mode 100644
index 935fb215d5c..00000000000
--- a/src/vendor/core/hyphenate.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule hyphenate
- * @typechecks
- */
-
-var _uppercasePattern = /([A-Z])/g;
-
-/**
- * Hyphenates a camelcased string, for example:
- *
- *   > hyphenate('backgroundColor')
- *   < "background-color"
- *
- * For CSS style names, use `hyphenateStyleName` instead which works properly
- * with all vendor prefixes, including `ms`.
- *
- * @param {string} string
- * @return {string}
- */
-function hyphenate(string) {
-  return string.replace(_uppercasePattern, '-$1').toLowerCase();
-}
-
-module.exports = hyphenate;
diff --git a/src/vendor/core/hyphenateStyleName.js b/src/vendor/core/hyphenateStyleName.js
deleted file mode 100644
index 6586378a2b8..00000000000
--- a/src/vendor/core/hyphenateStyleName.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule hyphenateStyleName
- * @typechecks
- */
-
-"use strict";
-
-var hyphenate = require('hyphenate');
-
-var msPattern = /^ms-/;
-
-/**
- * Hyphenates a camelcased CSS property name, for example:
- *
- *   > hyphenate('backgroundColor')
- *   < "background-color"
- *   > hyphenate('MozTransition')
- *   < "-moz-transition"
- *   > hyphenate('msTransition')
- *   < "-ms-transition"
- *
- * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
- * is converted to `-ms-`.
- *
- * @param {string} string
- * @return {string}
- */
-function hyphenateStyleName(string) {
-  return hyphenate(string).replace(msPattern, '-ms-');
-}
-
-module.exports = hyphenateStyleName;
diff --git a/src/vendor/core/invariant.js b/src/vendor/core/invariant.js
deleted file mode 100644
index d99f3615c98..00000000000
--- a/src/vendor/core/invariant.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule invariant
- */
-
-"use strict";
-
-/**
- * Use invariant() to assert state which your program assumes to be true.
- *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
- *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */
-
-var invariant = function(condition, format, a, b, c, d, e, f) {
-  if (__DEV__) {
-    if (format === undefined) {
-      throw new Error('invariant requires an error message argument');
-    }
-  }
-
-  if (!condition) {
-    var error;
-    if (format === undefined) {
-      error = new Error(
-        'Minified exception occurred; use the non-minified dev environment ' +
-        'for the full error message and additional helpful warnings.'
-      );
-    } else {
-      var args = [a, b, c, d, e, f];
-      var argIndex = 0;
-      error = new Error(
-        'Invariant Violation: ' +
-        format.replace(/%s/g, function() { return args[argIndex++]; })
-      );
-    }
-
-    error.framesToPop = 1; // we don't care about invariant's own frame
-    throw error;
-  }
-};
-
-module.exports = invariant;
diff --git a/src/vendor/core/keyOf.js b/src/vendor/core/keyOf.js
deleted file mode 100644
index e6768344a79..00000000000
--- a/src/vendor/core/keyOf.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule keyOf
- */
-
-/**
- * Allows extraction of a minified key. Let's the build system minify keys
- * without loosing the ability to dynamically use key strings as values
- * themselves. Pass in an object with a single key/val pair and it will return
- * you the string key of that single record. Suppose you want to grab the
- * value for a key 'className' inside of an object. Key/val minification may
- * have aliased that key to be 'xa12'. keyOf({className: null}) will return
- * 'xa12' in that case. Resolve keys you want to use once at startup time, then
- * reuse those resolutions.
- */
-var keyOf = function(oneKeyObj) {
-  var key;
-  for (key in oneKeyObj) {
-    if (!oneKeyObj.hasOwnProperty(key)) {
-      continue;
-    }
-    return key;
-  }
-  return null;
-};
-
-
-module.exports = keyOf;
diff --git a/src/vendor/core/mapObject.js b/src/vendor/core/mapObject.js
deleted file mode 100644
index 44600978cc5..00000000000
--- a/src/vendor/core/mapObject.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mapObject
- */
-
-"use strict";
-
-/**
- * For each key/value pair, invokes callback func and constructs a resulting
- * object which contains, for every key in obj, values that are the result of
- * of invoking the function:
- *
- *   func(value, key, iteration)
- *
- * Grepable names:
- *
- *   function objectMap()
- *   function objMap()
- *
- * @param {?object} obj Object to map keys over
- * @param {function} func Invoked for each key/val pair.
- * @param {?*} context
- * @return {?object} Result of mapping or null if obj is falsey
- */
-function mapObject(obj, func, context) {
-  if (!obj) {
-    return null;
-  }
-  var i = 0;
-  var ret = {};
-  for (var key in obj) {
-    if (obj.hasOwnProperty(key)) {
-      ret[key] = func.call(context, obj[key], key, i++);
-    }
-  }
-  return ret;
-}
-
-module.exports = mapObject;
diff --git a/src/vendor/core/merge.js b/src/vendor/core/merge.js
deleted file mode 100644
index 00020813886..00000000000
--- a/src/vendor/core/merge.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule merge
- */
-
-"use strict";
-
-/**
- * Shallow merges two structures into a return value, without mutating either.
- *
- * @param {?object} one Optional object with properties to merge from.
- * @param {?object} two Optional object with properties to merge from.
- * @return {object} The shallow extension of one by two.
- */
-var merge = function(one, two) {
-  var result = {};
-  if (one != null) {
-    Object.assign(result, one);
-  }
-  if (two != null) {
-    Object.assign(result, two);
-  }
-  return result;
-};
-
-module.exports = merge;
diff --git a/src/vendor/core/mergeDeep.js b/src/vendor/core/mergeDeep.js
deleted file mode 100644
index 62db69a0826..00000000000
--- a/src/vendor/core/mergeDeep.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mergeDeep
- */
-
-"use strict";
-
-var mergeHelpers = require('mergeHelpers');
-var mergeDeepInto = require('mergeDeepInto');
-
-var checkArrayStrategy = mergeHelpers.checkArrayStrategy;
-var checkMergeObjectArgs = mergeHelpers.checkMergeObjectArgs;
-var normalizeMergeArg = mergeHelpers.normalizeMergeArg;
-
-/**
- * @see mergeDeepImpl comments.
- *
- * @param {!Object} one returned will be an structural extension of this.
- * @param {!Object} two values from two take precedence over values in one.
- * @param {?Enum=} arrayStrategy One of `arrayStrategies`.
- * @return {!Object} the extension of one by two.
- */
-var mergeDeep = function(oneParam, twoParam, arrayStrategy) {
-  var one = normalizeMergeArg(oneParam);
-  var two = normalizeMergeArg(twoParam);
-  checkMergeObjectArgs(one, two);
-  checkArrayStrategy(arrayStrategy);
-  var newObj = {};
-  // TODO: This is horribly inefficient. Even when some deep object in `one`
-  // will be clobbered by another entity in `two`, we perform a clone of that
-  // entire structure. To make this code more efficient, we'll need to either
-  // enhance `mergeDeepInto` to accept multiple arguments or mirror that code
-  // here.
-  mergeDeepInto(newObj, one, arrayStrategy);
-  mergeDeepInto(newObj, two, arrayStrategy);
-  return newObj;
-};
-
-
-module.exports = mergeDeep;
diff --git a/src/vendor/core/mergeDeepInto.js b/src/vendor/core/mergeDeepInto.js
deleted file mode 100644
index 2d7990b884f..00000000000
--- a/src/vendor/core/mergeDeepInto.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mergeDeepInto
- */
-
-// Empty blocks improve readability so disable that warning
-// jshint -W035
-
-"use strict";
-
-var invariant = require('invariant');
-var mergeHelpers = require('mergeHelpers');
-
-var ArrayStrategies = mergeHelpers.ArrayStrategies;
-var checkArrayStrategy = mergeHelpers.checkArrayStrategy;
-var checkMergeArrayArgs = mergeHelpers.checkMergeArrayArgs;
-var checkMergeLevel = mergeHelpers.checkMergeLevel;
-var checkMergeObjectArgs = mergeHelpers.checkMergeObjectArgs;
-var isTerminal = mergeHelpers.isTerminal;
-var normalizeMergeArg = mergeHelpers.normalizeMergeArg;
-
-/**
- * Every deep merge function must handle merging in each of the following cases
- * at every level. We may refer to letters below in implementations. For each
- * case listed, the "Result" listed describes the *value* of the result, but
- * does not specify anything about the memory graph of the result. In other
- * words the Results listed below will be the same for `merge` and `mergeInto`
- * but `merge` may have different guarantees about mutation/cloning. In the
- * table, "Object" refers to a non- Array, non-terminal object. One result is
- * undefined and requires that the caller specify the resolution policy (only
- * when trying to merge two arrays).
- *
- * Scenario                     Result
- * --------------------------------------------------------------
- * [A]: (terminal, terminal)    right terminal
- * [B]: (terminal, Array)       right Array
- * [C]: (terminal, Object)      right Object
- * [D]: (terminal, not present) left terminal
- * [E]: (Array, terminal)       right terminal
- * [F]: (Array, Array)          UNDEFINED - MUST SPECIFY POLICY
- * [G]: (Array, Object)         right Object
- * [H]: (Array, not present)    left Array
- * [I]: (Object, terminal)      right terminal
- * [J]: (Object, Array)         right Array
- * [K]: (Object, Object)        merge of left and right Objects
- * [L]: (Object, not present)   left Object
- * [M]: (not present, terminal) right terminal
- * [N]: (not present, Array)    right Array
- * [O]: (not present, Object)   right Object
- *
- * All merge functions are only expected to reason about "own" properties and,
- * any prototypical properties should have no effect on the result. At the first
- * level of recursion in deep merges, we may choose to normalize arguments
- * (convert undefined to empty objects etc.) The above chart does not describe
- * the result of those top level operations which behave specially due to the
- * normalization.
- */
-
-/**
- * Deep merge implementation for non-Array, non-terminal Objects.
- *
- * @param {!Object} one non-Array, non-terminal Object to be mutated deeply.
- * @param {!Object} two non-Array, non-terminal taking precedence over `one`.
- * @param {?Enum=} arrayStrategy one of `arrayStrategies`.
- * @param {!number} level The level of recursion.
- */
-var mergeDeepIntoObjects = function(one, two, arrayStrategy, level) {
-  checkMergeObjectArgs(one, two);
-  checkMergeLevel(level);
-  var twoKeys = two ? Object.keys(two) : [];
-  for (var i = 0; i < twoKeys.length; i++) {
-    var twoKey = twoKeys[i];
-    mergeSingleFieldDeep(one, two, twoKey, arrayStrategy, level);
-  }
-};
-
-/**
- * Deep merge implementation for Arrays.
- *
- * @param {!Array} one Array to deep merge.
- * @param {!Array} two Array to deep merge "into" `one`.
- * @param {?Enum=} arrayStrategy one of `arrayStrategies`.
- * @param {!number} level Level of recursion.
- */
-var mergeDeepIntoArrays = function(one, two, arrayStrategy, level) {
-  checkMergeArrayArgs(one, two);
-  checkMergeLevel(level);
-
-  var maxLen = Math.max(one.length, two.length);
-  for (var i = 0; i < maxLen; i++) {
-    mergeSingleFieldDeep(one, two, i, arrayStrategy, level);
-  }
-};
-
-/**
- * Given two truthy containers `one` and `two`, and a `key`, performs a deep
- * merge on a logical field.
- *
- * @param {!Array|Object} one Container to merge into.
- * @param {!Array|Object} two Container to merge from.
- * @param {!string} key Key of field that should be merged.
- * @param {lEnum=} arrayStrategy One of `arrayStrategies`.
- * @param {!number} level Current level of recursion.
- */
-var mergeSingleFieldDeep = function(one, two, key, arrayStrategy, level) {
-  var twoVal = two[key];
-  var twoValIsPresent = two.hasOwnProperty(key);
-  var twoValIsTerminal = twoValIsPresent && isTerminal(twoVal);
-  var twoValIsArray = twoValIsPresent && Array.isArray(twoVal);
-  var twoValIsProperObject =
-      twoValIsPresent && !twoValIsArray && !twoValIsArray;
-
-  var oneVal = one[key];
-  var oneValIsPresent = one.hasOwnProperty(key);
-  var oneValIsTerminal = oneValIsPresent && isTerminal(oneVal);
-  var oneValIsArray = oneValIsPresent && Array.isArray(oneVal);
-  var oneValIsProperObject =
-    oneValIsPresent && !oneValIsArray && !oneValIsArray;
-
-  if (oneValIsTerminal) {
-    if (twoValIsTerminal) {             // [A]
-      one[key] = twoVal;
-    } else if (twoValIsArray) {         // [B]
-      one[key] = [];
-      mergeDeepIntoArrays(one[key], twoVal, arrayStrategy, level + 1);
-    } else if (twoValIsProperObject) {  // [C]
-      one[key] = {};
-      mergeDeepIntoObjects(one[key], twoVal, arrayStrategy, level + 1);
-    } else if (!twoValIsPresent) {      // [D]
-      one[key] = oneVal;
-    }
-  } else if (oneValIsArray) {
-    if (twoValIsTerminal) {             // [E]
-      one[key] = twoVal;
-    } else if (twoValIsArray) {         // [F]
-      invariant(
-        ArrayStrategies[arrayStrategy],
-        'mergeDeepInto(...): Attempted to merge two arrays, but a valid ' +
-        'ArrayStrategy was not specified.'
-      );
-      // Else: At this point, the only other valid option is `IndexByIndex`
-      if (arrayStrategy === ArrayStrategies.Clobber) {
-        oneVal.length = 0;
-      }
-      mergeDeepIntoArrays(oneVal, twoVal, arrayStrategy, level + 1);
-    } else if (twoValIsProperObject) {  // [G]
-      one[key] = {};
-      mergeDeepIntoObjects(one[key], twoVal, arrayStrategy, level + 1);
-    } else if (!twoValIsPresent) {      // [H]
-      // Leave the left Array alone
-    }
-  } else if (oneValIsProperObject) {
-    if (twoValIsTerminal) {             // [I]
-      one[key] = twoVal;
-    } else if (twoValIsArray) {         // [J]
-      one[key] = [];
-      mergeDeepIntoArrays(one[key], twoVal, arrayStrategy, level + 1);
-    } else if (twoValIsProperObject) {  // [K]
-      mergeDeepIntoObjects(oneVal, twoVal, arrayStrategy, level + 1);
-    } else if (!twoValIsPresent) {      // [L]
-      // Leave the left Object alone
-    }
-  } else if (!oneValIsPresent) {
-    if (twoValIsTerminal) {             // [M]
-      one[key] = twoVal;
-    } else if (twoValIsArray) {         // [N]
-      one[key] = [];
-      mergeDeepIntoArrays(one[key], twoVal, arrayStrategy, level + 1);
-    } else if (twoValIsProperObject) {  // [O]
-      one[key] = {};
-      mergeDeepIntoObjects(one[key], twoVal, arrayStrategy, level + 1);
-    } else if (!twoValIsPresent) {
-      // Could/should never happen
-    }
-  }
-};
-
-
-
-/**
- * Provides same functionality as mergeInto, but merges by mutating the first
- * argument. Will never mutate the second argument.
- *
- * mergeDeepInto provides two guarantees:
- * 1. In the process of mutating one, will not mutate two.
- * 2. Will not cause any nonTerminal memory to be shared between one and two.
- * This means that no further mutations to one will effect two (unless some
- * other part of your application forms shared memory between one and two).
- *
- * mergeDeepInto does not guarantee that it will *preserve* any shared memory
- * between two and one that existed before invocation. After calling
- * mergeDeepInto, there will be less (or equal) amount of shared memory between
- * one and two.
- *
- * Will tolerate a circular structure as the first parameter, but not the
- * second.
- *
- * Requires that first parameter be a non-Array, non-terminal `Object`, and the
- * second argument either be an `Object` or `null/undefined`. Arrays may exist
- * in the depths of either `Object` as long as an `arrayStrategy` is supplied.
- *
- * The third parameter indicates how merging two `Array`s should be performed.
- *
- * @param {!Object} one Object to be mutated deeply.
- * @param {?Object} two Values from two take precedence over values in one.
- * @param {?Enum=} arrayStrategy One of arrayStrategy
- */
-var mergeDeepInto = function(one, twoParam, arrayStrategy) {
-  var two = normalizeMergeArg(twoParam);
-  checkArrayStrategy(arrayStrategy); // Will be checked twice, for now.
-  mergeDeepIntoObjects(one, two, arrayStrategy, 0);
-};
-
-module.exports = mergeDeepInto;
diff --git a/src/vendor/core/mergeHelpers.js b/src/vendor/core/mergeHelpers.js
deleted file mode 100644
index 4768a9a6856..00000000000
--- a/src/vendor/core/mergeHelpers.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mergeHelpers
- *
- * requiresPolyfills: Array.isArray
- */
-
-"use strict";
-
-var invariant = require('invariant');
-var keyMirror = require('keyMirror');
-
-/**
- * Maximum number of levels to traverse. Will catch circular structures.
- * @const
- */
-var MAX_MERGE_DEPTH = 36;
-
-/**
- * We won't worry about edge cases like new String('x') or new Boolean(true).
- * Functions are considered terminals, and arrays are not.
- * @param {*} o The item/object/value to test.
- * @return {boolean} true iff the argument is a terminal.
- */
-var isTerminal = function(o) {
-  return typeof o !== 'object' || o === null;
-};
-
-var mergeHelpers = {
-
-  MAX_MERGE_DEPTH: MAX_MERGE_DEPTH,
-
-  isTerminal: isTerminal,
-
-  /**
-   * Converts null/undefined values into empty object.
-   *
-   * @param {?Object=} arg Argument to be normalized (nullable optional)
-   * @return {!Object}
-   */
-  normalizeMergeArg: function(arg) {
-    return arg === undefined || arg === null ? {} : arg;
-  },
-
-  /**
-   * If merging Arrays, a merge strategy *must* be supplied. If not, it is
-   * likely the caller's fault. If this function is ever called with anything
-   * but `one` and `two` being `Array`s, it is the fault of the merge utilities.
-   *
-   * @param {*} one Array to merge into.
-   * @param {*} two Array to merge from.
-   */
-  checkMergeArrayArgs: function(one, two) {
-    invariant(
-      Array.isArray(one) && Array.isArray(two),
-      'Tried to merge arrays, instead got %s and %s.',
-      one,
-      two
-    );
-  },
-
-  /**
-   * @param {*} one Object to merge into.
-   * @param {*} two Object to merge from.
-   */
-  checkMergeObjectArgs: function(one, two) {
-    mergeHelpers.checkMergeObjectArg(one);
-    mergeHelpers.checkMergeObjectArg(two);
-  },
-
-  /**
-   * @param {*} arg
-   */
-  checkMergeObjectArg: function(arg) {
-    invariant(
-      !isTerminal(arg) && !Array.isArray(arg),
-      'Tried to merge an object, instead got %s.',
-      arg
-    );
-  },
-
-  /**
-   * @param {*} arg
-   */
-  checkMergeIntoObjectArg: function(arg) {
-    invariant(
-      (!isTerminal(arg) || typeof arg === 'function') && !Array.isArray(arg),
-      'Tried to merge into an object, instead got %s.',
-      arg
-    );
-  },
-
-  /**
-   * Checks that a merge was not given a circular object or an object that had
-   * too great of depth.
-   *
-   * @param {number} Level of recursion to validate against maximum.
-   */
-  checkMergeLevel: function(level) {
-    invariant(
-      level < MAX_MERGE_DEPTH,
-      'Maximum deep merge depth exceeded. You may be attempting to merge ' +
-      'circular structures in an unsupported way.'
-    );
-  },
-
-  /**
-   * Checks that the supplied merge strategy is valid.
-   *
-   * @param {string} Array merge strategy.
-   */
-  checkArrayStrategy: function(strategy) {
-    invariant(
-      strategy === undefined || strategy in mergeHelpers.ArrayStrategies,
-      'You must provide an array strategy to deep merge functions to ' +
-      'instruct the deep merge how to resolve merging two arrays.'
-    );
-  },
-
-  /**
-   * Set of possible behaviors of merge algorithms when encountering two Arrays
-   * that must be merged together.
-   * - `clobber`: The left `Array` is ignored.
-   * - `indexByIndex`: The result is achieved by recursively deep merging at
-   *   each index. (not yet supported.)
-   */
-  ArrayStrategies: keyMirror({
-    Clobber: true,
-    IndexByIndex: true
-  })
-
-};
-
-module.exports = mergeHelpers;
diff --git a/src/vendor/core/mergeInto.js b/src/vendor/core/mergeInto.js
deleted file mode 100644
index de5e435021d..00000000000
--- a/src/vendor/core/mergeInto.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule mergeInto
- * @typechecks static-only
- */
-
-"use strict";
-
-/**
- * Shallow merges two structures by mutating the first parameter.
- *
- * @param {object|function} one Object to be merged into.
- * @param {?object} two Optional object with properties to merge from.
- * @return {object|function} The first argument coerced into an object.
- */
-function mergeInto(one, two) {
-  if (two != null) {
-    return Object.assign(one, two);
-  } else {
-    // This ensures that we throw the right error if one is of the wrong type
-    return Object.assign(one);
-  }
-}
-
-module.exports = mergeInto;
diff --git a/src/vendor/core/monitorCodeUse.js b/src/vendor/core/monitorCodeUse.js
deleted file mode 100644
index 2943630c266..00000000000
--- a/src/vendor/core/monitorCodeUse.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule monitorCodeUse
- */
-
-"use strict";
-
-var invariant = require('invariant');
-
-/**
- * Provides open-source compatible instrumentation for monitoring certain API
- * uses before we're ready to issue a warning or refactor. It accepts an event
- * name which may only contain the characters [a-z0-9_] and an optional data
- * object with further information.
- */
-
-function monitorCodeUse(eventName, data) {
-  invariant(
-    eventName && !/[^a-z0-9_]/.test(eventName),
-    'You must provide an eventName using only the characters [a-z0-9_]'
-  );
-}
-
-module.exports = monitorCodeUse;
diff --git a/src/vendor/core/nativeRequestAnimationFrame.js b/src/vendor/core/nativeRequestAnimationFrame.js
deleted file mode 100644
index 0218838974e..00000000000
--- a/src/vendor/core/nativeRequestAnimationFrame.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule nativeRequestAnimationFrame
- */
-
-var nativeRequestAnimationFrame =
-  global.requestAnimationFrame       ||
-  global.webkitRequestAnimationFrame ||
-  global.mozRequestAnimationFrame    ||
-  global.oRequestAnimationFrame      ||
-  global.msRequestAnimationFrame;
-
-module.exports = nativeRequestAnimationFrame;
diff --git a/src/vendor/core/requestAnimationFrame.js b/src/vendor/core/requestAnimationFrame.js
deleted file mode 100644
index acdd1c9d4a4..00000000000
--- a/src/vendor/core/requestAnimationFrame.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule requestAnimationFrame
- */
-
-var emptyFunction = require('emptyFunction');
-var nativeRequestAnimationFrame = require('nativeRequestAnimationFrame');
-
-var lastTime = 0;
-
-var requestAnimationFrame =
-  nativeRequestAnimationFrame ||
-  function(callback) {
-    var currTime = Date.now();
-    var timeDelay = Math.max(0, 16 - (currTime - lastTime));
-    lastTime = currTime + timeDelay;
-    return global.setTimeout(function() {
-      callback(Date.now());
-    }, timeDelay);
-  };
-
-// Works around a rare bug in Safari 6 where the first request is never invoked.
-requestAnimationFrame(emptyFunction);
-
-module.exports = requestAnimationFrame;
diff --git a/src/vendor/core/toArray.js b/src/vendor/core/toArray.js
deleted file mode 100644
index 8b32dc0b317..00000000000
--- a/src/vendor/core/toArray.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule toArray
- * @typechecks
- */
-
-var invariant = require('invariant');
-
-/**
- * Convert array-like objects to arrays.
- *
- * This API assumes the caller knows the contents of the data type. For less
- * well defined inputs use createArrayFrom.
- *
- * @param {object|function|filelist} obj
- * @return {array}
- */
-function toArray(obj) {
-  var length = obj.length;
-
-  // Some browse builtin objects can report typeof 'function' (e.g. NodeList in
-  // old versions of Safari).
-  invariant(
-    !Array.isArray(obj) &&
-    (typeof obj === 'object' || typeof obj === 'function'),
-    'toArray: Array-like object expected'
-  );
-
-  invariant(
-    typeof length === 'number',
-    'toArray: Object needs a length property'
-  );
-
-  invariant(
-    length === 0 ||
-    (length - 1) in obj,
-    'toArray: Object should have keys for indices'
-  );
-
-  // Old IE doesn't give collections access to hasOwnProperty. Assume inputs
-  // without method will throw during the slice call and skip straight to the
-  // fallback.
-  if (obj.hasOwnProperty) {
-    try {
-      return Array.prototype.slice.call(obj);
-    } catch (e) {
-      // IE < 9 does not support Array#slice on collections objects
-    }
-  }
-
-  // Fall back to copying key by key. This assumes all keys have a value,
-  // so will not preserve sparsely populated inputs.
-  var ret = Array(length);
-  for (var ii = 0; ii < length; ii++) {
-    ret[ii] = obj[ii];
-  }
-  return ret;
-}
-
-module.exports = toArray;
diff --git a/src/vendor/core/warning.js b/src/vendor/core/warning.js
deleted file mode 100644
index c969d5e6bc2..00000000000
--- a/src/vendor/core/warning.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule warning
- */
-
-"use strict";
-
-var emptyFunction = require('emptyFunction');
-
-/**
- * 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.
- */
-
-var warning = emptyFunction;
-
-if (__DEV__) {
-  warning = function(condition, format, ...args) {
-    if (format === undefined) {
-      throw new Error(
-        '`warning(condition, format, ...args)` requires a warning ' +
-        'message argument'
-      );
-    }
-
-    if (!condition) {
-      var argIndex = 0;
-      console.warn('Warning: ' + format.replace(/%s/g, () => args[argIndex++]));
-    }
-  };
-}
-
-module.exports = warning;
diff --git a/src/vendor/immutable/Immutable.js b/src/vendor/immutable/Immutable.js
deleted file mode 100644
index 7c7559a6b5e..00000000000
--- a/src/vendor/immutable/Immutable.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule Immutable
- */
-
-var invariant = require('invariant');
-var isNode = require('isNode');
-var keyOf = require('keyOf');
-var mergeInto = require('mergeInto');
-
-var SECRET_KEY = keyOf({_DONT_EVER_TYPE_THIS_SECRET_KEY: null});
-
-/**
- * `Immutable` provides a guarantee of immutability at developer time when
- * strict mode is used. The extra computations required to enforce immutability
- * are stripped out in production for performance reasons. `Immutable`
- * guarantees to enforce immutability for enumerable, own properties. This
- * allows easy wrapping of `Immutable` with the ability to store non-enumerable
- * properties on the instance that only your static methods reason about. In
- * order to achieve IE8 compatibility (which doesn't have the ability to define
- * non-enumerable properties), modules that want to build their own reasoning
- * of `Immutable`s and store computations can define their non-enumerable
- * properties under the name `toString`, and in IE8 only define a standard
- * property called `toString` which will mistakenly be considered not
- * enumerable due to its name (but only in IE8). The only limitation is that no
- * one can store their own `toString` property.
- * https://developer.mozilla.org/en-US/docs/ECMAScript_DontEnum_attribute#JScript_DontEnum_Bug
- */
-class Immutable {
-  /**
-   * An instance of `Immutable` appears to be a plain JavaScript object, except
-   * `instanceof Immutable` evaluates to `true`, and it is deeply frozen in
-   * development mode.
-   *
-   * @param {number} secret Ensures this isn't accidentally constructed outside
-   * of convenience constructors. If created outside of a convenience
-   * constructor, may not be frozen. Forbidding that use case for now until we
-   * have a better API.
-   */
-  constructor(secret) {
-    invariant(
-      secret === Immutable[SECRET_KEY],
-      'Only certain classes should create instances of `Immutable`.' +
-      'You probably want something like ImmutableObject.create.'
-    );
-  }
-
-  /**
-   * Helper method for classes that make use of `Immutable`.
-   * @param {Immutable} immutable Object to merge properties into.
-   * @param {array<object>} propertyObjects List of objects to merge into
-   * `destination`.
-   */
-  static mergeAllPropertiesInto(destination, propertyObjects) {
-    var argLength = propertyObjects.length;
-    for (var i = 0; i < argLength; i++) {
-      mergeInto(destination, propertyObjects[i]);
-    }
-  }
-
-
-  /**
-   * Freezes the supplied object deeply. Other classes may implement their own
-   * version based on this.
-   *
-   * @param {*} object The object to freeze.
-   */
-  static deepFreezeRootNode(object) {
-    if (isNode(object)) {
-      return; // Don't try to freeze DOM nodes.
-    }
-    Object.freeze(object); // First freeze the object.
-    for (var prop in object) {
-      if (object.hasOwnProperty(prop)) {
-        Immutable.recurseDeepFreeze(object[prop]);
-      }
-    }
-    Object.seal(object);
-  }
-
-  /**
-   * Differs from `deepFreezeRootNode`, in that we first check if this is a
-   * necessary recursion. If the object is already an `Immutable`, then the
-   * recursion is unnecessary as it is already frozen. That check obviously
-   * wouldn't work for the root node version `deepFreezeRootNode`!
-   */
-  static recurseDeepFreeze(object) {
-    if (isNode(object) || !Immutable.shouldRecurseFreeze(object)) {
-      return; // Don't try to freeze DOM nodes.
-    }
-    Object.freeze(object); // First freeze the object.
-    for (var prop in object) {
-      if (object.hasOwnProperty(prop)) {
-        Immutable.recurseDeepFreeze(object[prop]);
-      }
-    }
-    Object.seal(object);
-  }
-
-  /**
-   * Checks if an object should be deep frozen. Instances of `Immutable` are
-   * assumed to have already been deep frozen, so we can have large `__DEV__`
-   * time savings by skipping freezing of them.
-   *
-   * @param {*} object The object to check.
-   * @return {boolean} Whether or not deep freeze is needed.
-   */
-  static shouldRecurseFreeze(object) {
-    return (
-      typeof object === 'object' &&
-      !(object instanceof Immutable) &&
-      object !== null
-    );
-  }
-}
-
-Immutable._DONT_EVER_TYPE_THIS_SECRET_KEY = Math.random();
-
-module.exports = Immutable;
diff --git a/src/vendor/immutable/ImmutableObject.js b/src/vendor/immutable/ImmutableObject.js
deleted file mode 100644
index 957f2c44ac3..00000000000
--- a/src/vendor/immutable/ImmutableObject.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ImmutableObject
- */
-
-"use strict";
-
-var Immutable = require('Immutable');
-
-var invariant = require('invariant');
-var keyOf = require('keyOf');
-var mergeHelpers = require('mergeHelpers');
-
-var checkMergeObjectArgs = mergeHelpers.checkMergeObjectArgs;
-var isTerminal = mergeHelpers.isTerminal;
-
-var SECRET_KEY = keyOf({_DONT_EVER_TYPE_THIS_SECRET_KEY: null});
-
-/**
- * Static methods creating and operating on instances of `Immutable`.
- */
-function assertImmutable(immutable) {
-  invariant(
-    immutable instanceof Immutable,
-    'ImmutableObject: Attempted to set fields on an object that is not an ' +
-    'instance of Immutable.'
-  );
-}
-
-/**
- * Static methods for reasoning about instances of `ImmutableObject`. Execute
- * the freeze commands in `__DEV__` mode to alert the programmer that something
- * is attempting to mutate. Since freezing is very expensive, we avoid doing it
- * at all in production.
- */
-class ImmutableObject extends Immutable {
-  /**
-   * @arguments {array<object>} The arguments is an array of objects that, when
-   * merged together, will form the immutable objects.
-   */
-  constructor() {
-    super(Immutable[SECRET_KEY]);
-    Immutable.mergeAllPropertiesInto(this, arguments);
-    if (__DEV__) {
-      Immutable.deepFreezeRootNode(this);
-    }
-  }
-
-  /**
-   * DEPRECATED - prefer to instantiate with new ImmutableObject().
-   *
-   * @arguments {array<object>} The arguments is an array of objects that, when
-   * merged together, will form the immutable objects.
-   */
-  static create() {
-    var obj = Object.create(ImmutableObject.prototype);
-    ImmutableObject.apply(obj, arguments);
-    return obj;
-  }
-
-  /**
-   * Returns a new `Immutable` that is identical to the supplied `Immutable`
-   * but with the specified changes, `put`. Any keys that are in the
-   * intersection of `immutable` and `put` retain the ordering of `immutable.
-   * New keys are placed after keys that exist in `immutable`.
-   *
-   * @param {Immutable} immutable Starting object.
-   * @param {?object} put Fields to merge into the object.
-   * @return {Immutable} The result of merging in `put` fields.
-   */
-  static set(immutable, put) {
-    assertImmutable(immutable);
-    invariant(
-      typeof put === 'object' && put !== undefined && !Array.isArray(put),
-      'Invalid ImmutableMap.set argument `put`'
-    );
-    return new ImmutableObject(immutable, put);
-  }
-
-  /**
-   * Sugar for `ImmutableObject.set(ImmutableObject, {fieldName: putField})`.
-   * Look out for key crushing: Use `keyOf()` to guard against it.
-   *
-   * @param {Immutable} immutable Object on which to set properties.
-   * @param {string} fieldName Name of the field to set.
-   * @param {*} putField Value of the field to set.
-   * @return {Immutable} new Immutable as described in `set`.
-   */
-  static setProperty(immutableObject, fieldName, putField) {
-    var put = {};
-    put[fieldName] = putField;
-    return ImmutableObject.set(immutableObject, put);
-  }
-
-  /**
-   * Returns a new `Immutable` that is identical to the supplied object but
-   * with the supplied changes recursively applied.
-   *
-   * Experimental. Likely does not handle `Arrays` correctly.
-   *
-   * @param {Immutable} immutable Object on which to set fields.
-   * @param {object} put Fields to merge into the object.
-   * @return {Immutable} The result of merging in `put` fields.
-   */
-  static setDeep(immutable, put) {
-    assertImmutable(immutable);
-    return _setDeep(immutable, put);
-  }
-}
-
-function _setDeep(obj, put) {
-  checkMergeObjectArgs(obj, put);
-  var totalNewFields = {};
-
-  // To maintain the order of the keys, copy the base object's entries first.
-  var keys = Object.keys(obj);
-  for (var ii = 0; ii < keys.length; ii++) {
-    var key = keys[ii];
-    if (!put.hasOwnProperty(key)) {
-      totalNewFields[key] = obj[key];
-    } else if (isTerminal(obj[key]) || isTerminal(put[key])) {
-      totalNewFields[key] = put[key];
-    } else {
-      totalNewFields[key] = _setDeep(obj[key], put[key]);
-    }
-  }
-
-  // Apply any new keys that the base obj didn't have.
-  var newKeys = Object.keys(put);
-  for (ii = 0; ii < newKeys.length; ii++) {
-    var newKey = newKeys[ii];
-    if (obj.hasOwnProperty(newKey)) {
-      continue;
-    }
-    totalNewFields[newKey] = put[newKey];
-  }
-
-  return (
-    obj instanceof Immutable ? new ImmutableObject(totalNewFields) :
-    put instanceof Immutable ? new ImmutableObject(totalNewFields) :
-    totalNewFields
-  );
-}
-
-module.exports = ImmutableObject;
diff --git a/src/vendor/performance/performance.js b/src/vendor/performance/performance.js
deleted file mode 100644
index ace74d170b8..00000000000
--- a/src/vendor/performance/performance.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule performance
- * @typechecks
- */
-
-"use strict";
-
-var ExecutionEnvironment = require('ExecutionEnvironment');
-
-var performance;
-
-if (ExecutionEnvironment.canUseDOM) {
-  performance =
-    window.performance ||
-    window.msPerformance ||
-    window.webkitPerformance;
-}
-
-module.exports = performance || {};
diff --git a/src/vendor/performance/performanceNow.js b/src/vendor/performance/performanceNow.js
deleted file mode 100644
index b6c0e70452e..00000000000
--- a/src/vendor/performance/performanceNow.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule performanceNow
- * @typechecks
- */
-
-var performance = require('performance');
-
-/**
- * Detect if we can use `window.performance.now()` and gracefully fallback to
- * `Date.now()` if it doesn't exist. We need to support Firefox < 15 for now
- * because of Facebook's testing infrastructure.
- */
-if (!performance || !performance.now) {
-  performance = Date;
-}
-
-var performanceNow = performance.now.bind(performance);
-
-module.exports = performanceNow;
diff --git a/src/vendor/polyfill/Object.es6.js b/src/vendor/polyfill/Object.es6.js
deleted file mode 100644
index a5a6ac128a4..00000000000
--- a/src/vendor/polyfill/Object.es6.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule Object.es6
- * @polyfill
- */
-
-// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign
-
-if (!Object.assign) {
-  Object.assign = function(target, sources) {
-    if (target == null) {
-      throw new TypeError('Object.assign target cannot be null or undefined');
-    }
-    var to = Object(target);
-
-    var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-    for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
-      var nextSource = arguments[nextIndex];
-      if (nextSource == null) {
-        throw new TypeError('Object.assign source cannot be null or undefined');
-      }
-
-      var from = Object(nextSource);
-
-      // We don't currently support accessors nor proxies. Therefore this copy
-      // cannot throw. If we ever supported this then we must handle
-      // exceptions and side-effects.
-
-      for (var key in from) {
-        if (hasOwnProperty.call(from, key)) {
-          to[key] = from[key];
-        }
-      }
-    }
-
-    return to;
-  };
-}
-
diff --git a/src/vendor/stubs/EventListener.js b/src/vendor/stubs/EventListener.js
deleted file mode 100644
index c3ddd3186ea..00000000000
--- a/src/vendor/stubs/EventListener.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * @providesModule EventListener
- * @typechecks
- */
-
-var emptyFunction = require('emptyFunction');
-
-/**
- * Upstream version of event listener. Does not take into account specific
- * nature of platform.
- */
-var EventListener = {
-  /**
-   * Listen to DOM events during the bubble phase.
-   *
-   * @param {DOMEventTarget} target DOM element to register listener on.
-   * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
-   * @param {function} callback Callback function.
-   * @return {object} Object with a `remove` method.
-   */
-  listen: function(target, eventType, callback) {
-    if (target.addEventListener) {
-      target.addEventListener(eventType, callback, false);
-      return {
-        remove: function() {
-          target.removeEventListener(eventType, callback, false);
-        }
-      };
-    } else if (target.attachEvent) {
-      target.attachEvent('on' + eventType, callback);
-      return {
-        remove: function() {
-          target.detachEvent('on' + eventType, callback);
-        }
-      };
-    }
-  },
-
-  /**
-   * Listen to DOM events during the capture phase.
-   *
-   * @param {DOMEventTarget} target DOM element to register listener on.
-   * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
-   * @param {function} callback Callback function.
-   * @return {object} Object with a `remove` method.
-   */
-  capture: function(target, eventType, callback) {
-    if (!target.addEventListener) {
-      if (__DEV__) {
-        console.error(
-          'Attempted to listen to events during the capture phase on a ' +
-          'browser that does not support the capture phase. Your application ' +
-          'will not receive some events.'
-        );
-      }
-      return {
-        remove: emptyFunction
-      };
-    } else {
-      target.addEventListener(eventType, callback, true);
-      return {
-        remove: function() {
-          target.removeEventListener(eventType, callback, true);
-        }
-      };
-    }
-  },
-
-  registerDefault: function() {}
-};
-
-module.exports = EventListener;
diff --git a/src/vendor/stubs/ReactErrorUtils.js b/src/vendor/stubs/ReactErrorUtils.js
deleted file mode 100644
index c0d6bdbb269..00000000000
--- a/src/vendor/stubs/ReactErrorUtils.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactErrorUtils
- * @typechecks
- */
-
-"use strict";
-
-var ReactErrorUtils = {
-  /**
-   * Creates a guarded version of a function. This is supposed to make debugging
-   * of event handlers easier. To aid debugging with the browser's debugger,
-   * this currently simply returns the original function.
-   *
-   * @param {function} func Function to be executed
-   * @param {string} name The name of the guard
-   * @return {function}
-   */
-  guard: function(func, name) {
-    return func;
-  }
-};
-
-module.exports = ReactErrorUtils;
diff --git a/src/vendor/stubs/cx.js b/src/vendor/stubs/cx.js
deleted file mode 100644
index df4d1af4561..00000000000
--- a/src/vendor/stubs/cx.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule cx
- */
-
-/**
- * This function is used to mark string literals representing CSS class names
- * so that they can be transformed statically. This allows for modularization
- * and minification of CSS class names.
- *
- * In static_upstream, this function is actually implemented, but it should
- * eventually be replaced with something more descriptive, and the transform
- * that is used in the main stack should be ported for use elsewhere.
- *
- * @param string|object className to modularize, or an object of key/values.
- *                      In the object case, the values are conditions that
- *                      determine if the className keys should be included.
- * @param [string ...]  Variable list of classNames in the string case.
- * @return string       Renderable space-separated CSS className.
- */
-function cx(classNames) {
-  if (typeof classNames == 'object') {
-    return Object.keys(classNames).filter(function(className) {
-      return classNames[className];
-    }).join(' ');
-  } else {
-    return Array.prototype.join.call(arguments, ' ');
-  }
-}
-
-module.exports = cx;
diff --git a/starter/README.md b/starter/README.md
deleted file mode 100644
index 0c2734f6664..00000000000
--- a/starter/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Welcome to React!
-
-You've just downloaded the React starter kit; congratulations!
-
-To begin, check out the `examples/` directory for a bunch of examples, or check out [Getting Started](http://facebook.github.io/react/docs/getting-started.html) for more information.
-
-In some browsers our examples won't work from the local file system; run `python -m SimpleHTTPServer` and visit `http://localhost:8000/` to view them.
-
-Want to start your own app? Just copy `examples/basic-jsx-external` and start hacking! Remember: before launching you'll want to precompile your JSX code as we do in `examples/basic-jsx-precompiled`; this requires doing `npm install -g react-tools` and then running our `jsx` tool. See [Getting Started](http://facebook.github.io/react/docs/getting-started.html) for more information.
-
-Happy hacking!
diff --git a/test/index.html b/test/index.html
deleted file mode 100644
index 31621b1903e..00000000000
--- a/test/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<body>
-<script>
-;(function(){
-
-  var urls = [
-    '../vendor/jasmine/jasmine.js',
-    '../vendor/jasmine/jasmine-support.js',
-    '../vendor/jasmine/jasmine-html.js',
-    '../node_modules/jasmine-tapreporter/src/tapreporter.js',
-    '../vendor/jasmine-jsreporter/jasmine-jsreporter.js',
-
-    'lib/postDataToURL.browser.js',
-    'lib/reportTestResults.browser.js',
-
-    '../build/react.js',
-    '../build/react-test.js',
-    'the-files-to-test.generated.js',
-    'lib/jasmine-execute.js'
-  ];
-  
-  if (typeof Function.prototype.bind == 'undefined') {
-    urls.unshift('../node_modules/es5-shim/es5-sham.js');
-    urls.unshift('../node_modules/es5-shim/es5-shim.js');
-  }
-
-  var cacheBust = '?_=' + (+new Date).toString(36);
-
-  for (var urls_index = -1, urls_length = urls.length; ++urls_index < urls_length;) {
-    document.write('<script src="' + urls[urls_index] + cacheBust + '"><\/script>');
-  }
-
-  var base = location.protocol + '//' + location.hostname + ':' + location.port + location.pathname.replace(/^\/?/,'/').split('/').reverse().slice(1).reverse().join('/');
-  window.ReactWebWorker_URL = base + '/../src/test/worker.js' + cacheBust;
-
-}());
-</script>
diff --git a/test/lib/jasmine-execute.js b/test/lib/jasmine-execute.js
deleted file mode 100644
index cb3404faa6a..00000000000
--- a/test/lib/jasmine-execute.js
+++ /dev/null
@@ -1,19 +0,0 @@
-document.write('<style> @import "../vendor/jasmine/jasmine.css?_=' + (+new Date).toString(36) + '"; </style>');
-
-;(function(env){
-  var htmlReporter = new jasmine.HtmlReporter();
-  env.addReporter(htmlReporter);
-  env.specFilter = function(spec) {
-    return htmlReporter.specFilter(spec);
-  };
-
-  // Clean up any nodes the previous test might have added.
-  env.afterEach(function() {
-    harness.removeNextSiblings(document.body);
-    harness.removeNextSiblings(document.getElementById("HTMLReporter"));
-  });
-
-  window.onload = function(){
-    env.execute();
-  }
-})(jasmine.getEnv());
diff --git a/test/lib/postDataToURL.browser.js b/test/lib/postDataToURL.browser.js
deleted file mode 100644
index 5b543459213..00000000000
--- a/test/lib/postDataToURL.browser.js
+++ /dev/null
@@ -1,34 +0,0 @@
-function createXMLHttpRequest(){
-  try{return new XMLHttpRequest();}
-  catch(e){}
-  try {return new ActiveXObject("Msxml2.XMLHTTP");}
-  catch (e) {}
-  try {return new ActiveXObject("Microsoft.XMLHTTP");}
-  catch (e) {}
-}
-
-function getURLSync(url){
-  var request = createXMLHttpRequest();
-  request.open('GET', url, /*asynchronous?*/false);
-  return request.responseText;
-}
-
-function postDataToURL(data, url, callback) {
-  if (!callback) callback = postDataToURL.defaultCallback;
-  var request = createXMLHttpRequest();
-  if (!request) return callback(Error('XMLHttpRequest is unsupported'));
-  postDataToURL.running = (postDataToURL.running||0) + 1;
-  request.onreadystatechange = function(){
-    if (request.readyState != 4) return;
-    request.onreadystatechange = null;
-    postDataToURL.running = (postDataToURL.running||0) - 1;
-    callback(request.status == 200 ? null : request.status, request.responseText);
-  };
-  request.open('POST', url);
-  request.setRequestHeader('Content-Type', 'application/json');
-  request.send(JSON.stringify(data));
-}
-
-postDataToURL.defaultCallback = function(error){
-  // console.log('postDataToURL.defaultCallback', arguments)
-}
diff --git a/test/lib/reportTestResults.browser.js b/test/lib/reportTestResults.browser.js
deleted file mode 100644
index 983a427270e..00000000000
--- a/test/lib/reportTestResults.browser.js
+++ /dev/null
@@ -1,50 +0,0 @@
-var __DEBUG__ = location.search.substring(1).indexOf('debug') != -1;
-
-if (typeof console == 'undefined') console = {
-  log: function(){},
-  warn: function(){},
-  error: function(){}
-};
-
-var __consoleReport__ = [];
-
-console._log = console.log;
-console.log = function(message){
-  console._log(message);
-  if (__DEBUG__) postDataToURL({type:'log', message:message}, '/reportTestResults');
-  else __consoleReport__.push({type:'log', message:message});
-}
-
-console._error = console.error;
-console.error = function(message){
-  console._error(message);
-  if (__DEBUG__) postDataToURL({type:'error', message:message}, '/reportTestResults');
-  else __consoleReport__.push({type:'error', message:message});
-}
-
-console._flush = function(){
-  postDataToURL(__consoleReport__, '/console');
-  __consoleReport__.length = 0;
-}
-
-;(function(env){
-  env.addReporter(new jasmine.JSReporter());
-  env.addReporter(new TAPReporter(console.log.bind(console)));
-
-  function report(){
-    if (typeof jasmine.getJSReport != 'function') {
-      return setTimeout(report, 100);
-    }
-    if (!__DEBUG__) {
-      console.log('DONE\t' + navigator.userAgent);
-      console._flush();
-    }
-  }
-
-  var oldCallback = env.currentRunner().finishCallback;
-  env.currentRunner().finishCallback = function(){
-    if (oldCallback) oldCallback.apply(this, arguments);
-    report();
-  };
-
-}(window.jasmine.getEnv()));
diff --git a/vendor/browser-transforms.js b/vendor/browser-transforms.js
deleted file mode 100644
index f1de89e4141..00000000000
--- a/vendor/browser-transforms.js
+++ /dev/null
@@ -1,324 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/* jshint browser: true */
-/* jslint evil: true */
-
-'use strict';
-
-var buffer = require('buffer');
-var docblock = require('jstransform/src/docblock');
-var transform = require('jstransform').transform;
-var visitors = require('./fbtransform/visitors');
-
-var headEl;
-var dummyAnchor;
-var inlineScriptCount = 0;
-
-// The source-map library relies on Object.defineProperty, but IE8 doesn't
-// support it fully even with es5-sham. Indeed, es5-sham's defineProperty
-// throws when Object.prototype.__defineGetter__ is missing, so we skip building
-// the source map in that case.
-var supportsAccessors = Object.prototype.hasOwnProperty('__defineGetter__');
-
-/**
- * Run provided code through jstransform.
- *
- * @param {string} source Original source code
- * @param {object?} options Options to pass to jstransform
- * @return {object} object as returned from jstransform
- */
-function transformReact(source, options) {
-  // TODO: just use react-tools
-  var visitorList;
-  if (options && options.harmony) {
-    visitorList = visitors.getAllVisitors();
-  } else {
-    visitorList = visitors.transformVisitors.react;
-  }
-
-  return transform(visitorList, source, {
-    sourceMap: supportsAccessors
-  });
-}
-
-/**
- * Eval provided source after transforming it.
- *
- * @param {string} source Original source code
- * @param {object?} options Options to pass to jstransform
- */
-function exec(source, options) {
-  return eval(transformReact(source, options).code);
-}
-
-/**
- * This method returns a nicely formated line of code pointing to the exact
- * location of the error `e`. The line is limited in size so big lines of code
- * are also shown in a readable way.
- *
- * Example:
- * ... x', overflow:'scroll'}} id={} onScroll={this.scroll} class=" ...
- * ^
- *
- * @param {string} code The full string of code
- * @param {Error} e The error being thrown
- * @return {string} formatted message
- * @internal
- */
-function createSourceCodeErrorMessage(code, e) {
-  var sourceLines = code.split('\n');
-  var erroneousLine = sourceLines[e.lineNumber - 1];
-
-  // Removes any leading indenting spaces and gets the number of
-  // chars indenting the `erroneousLine`
-  var indentation = 0;
-  erroneousLine = erroneousLine.replace(/^\s+/, function(leadingSpaces) {
-    indentation = leadingSpaces.length;
-    return '';
-  });
-
-  // Defines the number of characters that are going to show
-  // before and after the erroneous code
-  var LIMIT = 30;
-  var errorColumn = e.column - indentation;
-
-  if (errorColumn > LIMIT) {
-    erroneousLine = '... ' + erroneousLine.slice(errorColumn - LIMIT);
-    errorColumn = 4 + LIMIT;
-  }
-  if (erroneousLine.length - errorColumn > LIMIT) {
-    erroneousLine = erroneousLine.slice(0, errorColumn + LIMIT) + ' ...';
-  }
-  var message = '\n\n' + erroneousLine + '\n';
-  message += new Array(errorColumn - 1).join(' ') + '^';
-  return message;
-}
-
-/**
- * Actually transform the code.
- *
- * @param {string} code
- * @param {string?} url
- * @param {object?} options
- * @return {string} The transformed code.
- * @internal
- */
-function transformCode(code, url, options) {
-  var jsx = docblock.parseAsObject(docblock.extract(code)).jsx;
-
-  if (jsx) {
-    try {
-      var transformed = transformReact(code, options);
-    } catch(e) {
-      e.message += '\n    at ';
-      if (url) {
-        if ('fileName' in e) {
-          // We set `fileName` if it's supported by this error object and
-          // a `url` was provided.
-          // The error will correctly point to `url` in Firefox.
-          e.fileName = url;
-        }
-        e.message += url + ':' + e.lineNumber + ':' + e.column;
-      } else {
-        e.message += location.href;
-      }
-      e.message += createSourceCodeErrorMessage(code, e);
-      throw e;
-    }
-
-    if (!transformed.sourceMap) {
-      return transformed.code;
-    }
-
-    var map = transformed.sourceMap.toJSON();
-    var source;
-    if (url == null) {
-      source = "Inline JSX script";
-      inlineScriptCount++;
-      if (inlineScriptCount > 1) {
-        source += ' (' + inlineScriptCount + ')';
-      }
-    } else if (dummyAnchor) {
-      // Firefox has problems when the sourcemap source is a proper URL with a
-      // protocol and hostname, so use the pathname. We could use just the
-      // filename, but hopefully using the full path will prevent potential
-      // issues where the same filename exists in multiple directories.
-      dummyAnchor.href = url;
-      source = dummyAnchor.pathname.substr(1);
-    }
-    map.sources = [source];
-    map.sourcesContent = [code];
-
-    return (
-      transformed.code +
-      '\n//# sourceMappingURL=data:application/json;base64,' +
-      buffer.Buffer(JSON.stringify(map)).toString('base64')
-    );
-  } else {
-    // TODO: warn that we found a script tag missing the docblock?
-    //       or warn and proceed anyway?
-    //       or warn, add it ourselves, and proceed anyway?
-    return code;
-  }
-}
-
-
-/**
- * Appends a script element at the end of the <head> with the content of code,
- * after transforming it.
- *
- * @param {string} code The original source code
- * @param {string?} url Where the code came from. null if inline
- * @param {object?} options Options to pass to jstransform
- * @internal
- */
-function run(code, url, options) {
-  var scriptEl = document.createElement('script');
-  scriptEl.text = transformCode(code, url, options);
-  headEl.appendChild(scriptEl);
-}
-
-/**
- * Load script from the provided url and pass the content to the callback.
- *
- * @param {string} url The location of the script src
- * @param {function} callback Function to call with the content of url
- * @internal
- */
-function load(url, callback) {
-  var xhr;
-  xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP')
-                             : new XMLHttpRequest();
-
-  // async, however scripts will be executed in the order they are in the
-  // DOM to mirror normal script loading.
-  xhr.open('GET', url, true);
-  if ('overrideMimeType' in xhr) {
-    xhr.overrideMimeType('text/plain');
-  }
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4) {
-      if (xhr.status === 0 || xhr.status === 200) {
-        callback(xhr.responseText, url);
-      } else {
-        throw new Error("Could not load " + url);
-      }
-    }
-  };
-  return xhr.send(null);
-}
-
-/**
- * Loop over provided script tags and get the content, via innerHTML if an
- * inline script, or by using XHR. Transforms are applied if needed. The scripts
- * are executed in the order they are found on the page.
- *
- * @param {array} scripts The <script> elements to load and run.
- * @internal
- */
-function loadScripts(scripts) {
-  var result = scripts.map(function() {
-    return false;
-  });
-  var count = result.length;
-
-  function check() {
-    var script, i;
-
-    for (i = 0; i < count; i++) {
-      script = result[i];
-
-      if (script && !script.executed) {
-        run(script.content, script.url, script.options);
-        script.executed = true;
-      } else if (!script) {
-        break;
-      }
-    }
-  }
-
-  scripts.forEach(function(script, i) {
-    var options;
-    if (/;harmony=true(;|$)/.test(script.type)) {
-      options = {
-        harmony: true
-      };
-    }
-
-    if (script.src) {
-      load(script.src, function(content, url) {
-        result[i] = {
-          executed: false,
-          content: content,
-          url: url,
-          options: options
-        };
-        check();
-      });
-    } else {
-      result[i] = {
-        executed: false,
-        content: script.innerHTML,
-        url: null,
-        options: options
-      };
-      check();
-    }
-  });
-}
-
-/**
- * Find and run all script tags with type="text/jsx".
- *
- * @internal
- */
-function runScripts() {
-  var scripts = document.getElementsByTagName('script');
-
-  // Array.prototype.slice cannot be used on NodeList on IE8
-  var jsxScripts = [];
-  for (var i = 0; i < scripts.length; i++) {
-    if (/^text\/jsx(;|$)/.test(scripts.item(i).type)) {
-      jsxScripts.push(scripts.item(i));
-    }
-  }
-
-  console.warn(
-    'You are using the in-browser JSX transformer. Be sure to precompile ' +
-    'your JSX for production - ' +
-    'http://facebook.github.io/react/docs/tooling-integration.html#jsx'
-  );
-
-  loadScripts(jsxScripts);
-}
-
-// Listen for load event if we're in a browser and then kick off finding and
-// running of scripts.
-if (typeof window !== "undefined" && window !== null) {
-  headEl = document.getElementsByTagName('head')[0];
-  dummyAnchor = document.createElement('a');
-
-  if (window.addEventListener) {
-    window.addEventListener('DOMContentLoaded', runScripts, false);
-  } else {
-    window.attachEvent('onload', runScripts);
-  }
-}
-
-module.exports = {
-  transform: transformReact,
-  exec: exec
-};
diff --git a/vendor/constants.js b/vendor/constants.js
deleted file mode 100644
index 3eba587d67e..00000000000
--- a/vendor/constants.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-'use strict';
-
-var recast = require('recast');
-var types = recast.types;
-var namedTypes = types.namedTypes;
-var builders = types.builders;
-var hasOwn = Object.prototype.hasOwnProperty;
-
-function propagate(constants, source) {
-  return recast.print(transform(recast.parse(source), constants)).code;
-}
-
-var DEV_EXPRESSION = builders.binaryExpression(
-  '!==',
-  builders.literal('production'),
-  builders.memberExpression(
-    builders.memberExpression(
-      builders.identifier('process'),
-      builders.identifier('env'),
-      false
-    ),
-    builders.identifier('NODE_ENV'),
-    false
-  )
-);
-
-function transform(ast, constants) {
-  constants = constants || {};
-
-  return types.traverse(ast, function(node, traverse) {
-    if (namedTypes.Identifier.check(node)) {
-      // If the identifier is the property of a member expression
-      // (e.g. object.property), then it definitely is not a constant
-      // expression that we want to replace.
-      if (namedTypes.MemberExpression.check(this.parent.node) &&
-          this.name === 'property' &&
-          !this.parent.node.computed) {
-        return false;
-      }
-
-      // There could in principle be a constant called "hasOwnProperty",
-      // so be careful always to use Object.prototype.hasOwnProperty.
-      if (node.name === '__DEV__') {
-        // replace __DEV__ with process.env.NODE_ENV !== 'production'
-        this.replace(DEV_EXPRESSION);
-        return false;
-      } else if (hasOwn.call(constants, node.name)) {
-        this.replace(builders.literal(constants[node.name]));
-        return false;
-      }
-
-    } else if (namedTypes.CallExpression.check(node)) {
-      if (namedTypes.Identifier.check(node.callee) &&
-          node.callee.name === 'invariant') {
-        // Truncate the arguments of invariant(condition, ...)
-        // statements to just the condition based on NODE_ENV
-        // (dead code removal will remove the extra bytes).
-        this.replace(
-          builders.conditionalExpression(
-            DEV_EXPRESSION,
-            node,
-            builders.callExpression(
-              node.callee,
-              [node.arguments[0]]
-            )
-          )
-        );
-        return false;
-      } else if (namedTypes.Identifier.check(node.callee) &&
-          node.callee.name === 'warning') {
-        // Eliminate warning(condition, ...) statements based on NODE_ENV
-        // (dead code removal will remove the extra bytes).
-        this.replace(
-          builders.conditionalExpression(
-            DEV_EXPRESSION,
-            node,
-            builders.literal(null)
-          )
-        );
-      }
-    }
-  });
-}
-
-if (!module.parent) {
-  var constants = JSON.parse(process.argv[3]);
-  recast.run(function(ast, callback) {
-    callback(transform(ast, constants));
-  });
-}
-
-exports.propagate = propagate;
-exports.transform = transform;
diff --git a/vendor/fbtransform/syntax.js b/vendor/fbtransform/syntax.js
deleted file mode 100644
index 4c39ca0ac8e..00000000000
--- a/vendor/fbtransform/syntax.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*global process:false*/
-/*global module:true*/
-/*global exports:true*/
-"use strict";
-
-var transform = require('jstransform').transform;
-var visitors = require('./visitors');
-
-/**
- * @typechecks
- * @param {string} source
- * @param {object?} options
- * @param {array?} excludes
- * @return {string}
- */
-function transformAll(source, options, excludes) {
-  excludes = excludes || [];
-
-  // The typechecker transform must run in a second pass in order to operate on
-  // the entire source code -- so exclude it from the first pass
-  var visitorsList = visitors.getVisitorsList(excludes.concat('typechecker'));
-  source = transform(visitorsList, source, options);
-  if (excludes.indexOf('typechecks') == -1 && /@typechecks/.test(source.code)) {
-    source = transform(
-      visitors.transformVisitors.typechecker,
-      source.code,
-      options
-    );
-  }
-  return source;
-}
-
-function runCli(argv) {
-  var options = {};
-  for (var optName in argv) {
-    if (optName === '_' || optName === '$0') {
-      continue;
-    }
-    options[optName] = optimist.argv[optName];
-  }
-
-  if (options.help) {
-    optimist.showHelp();
-    process.exit(0);
-  }
-
-  var excludes = options.excludes;
-  delete options.excludes;
-
-  var source = '';
-  process.stdin.resume();
-  process.stdin.setEncoding('utf8');
-  process.stdin.on('data', function (chunk) {
-    source += chunk;
-  });
-  process.stdin.on('end', function () {
-    try {
-      source = transformAll(source, options, excludes);
-    } catch (e) {
-      console.error(e.stack);
-      process.exit(1);
-    }
-    process.stdout.write(source.code);
-  });
-}
-
-if (require.main === module) {
-  var optimist = require('optimist');
-
-  optimist = optimist
-    .usage('Usage: $0 [options]')
-    .default('exclude', [])
-    .boolean('help').alias('h', 'help')
-    .boolean('minify')
-    .describe(
-      'minify',
-      'Best-effort minification of the output source (when possible)'
-    )
-    .describe(
-      'exclude',
-      'A list of transformNames to exclude'
-    );
-
-  runCli(optimist.argv);
-} else {
-  exports.transformAll = transformAll;
-}
diff --git a/vendor/fbtransform/transforms/__tests__/react-displayName-test.js b/vendor/fbtransform/transforms/__tests__/react-displayName-test.js
deleted file mode 100644
index 648e41f59ee..00000000000
--- a/vendor/fbtransform/transforms/__tests__/react-displayName-test.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails jeffmo@fb.com
- */
-"use strict";
-
-require('mock-modules').autoMockOff();
-
-var transformAll = require('../../syntax.js').transformAll;
-
-function transform(source) {
-  return transformAll(source, {}, ['allocate']);
-}
-
-describe('react displayName jsx', function() {
-
-  it('should only inject displayName if missing', function() {
-    var code = [
-      '/** @jsx React.DOM */',
-      '"use strict";',
-      'var Whateva = React.createClass({',
-      '  displayName: \'Whateva\',',
-      '  render: function() {',
-      '    return <div className=\'whateva\'>...whateva.</div>;',
-      '  }',
-      '});'
-    ].join('\n');
-
-    var result = [
-      '/** @jsx React.DOM */',
-      '"use strict";',
-      'var Whateva = React.createClass({',
-      '  displayName: \'Whateva\',',
-      '  render: function() {',
-      '    return React.DOM.div({className: "whateva"}, "...whateva.");',
-      '  }',
-      '});'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should inject displayName in simple assignment', () => {
-    var code = [
-      '/** @jsx React.DOM */',
-      'var Component = React.createClass({',
-      '  render: function() {',
-      '    return <div/>;',
-      '  }',
-      '});'
-    ].join('\n');
-
-    var result = [
-      '/** @jsx React.DOM */',
-      'var Component = React.createClass({displayName: \'Component\',',
-      '  render: function() {',
-      '    return React.DOM.div(null);',
-      '  }',
-      '});'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should inject displayName in simple assignment without var', () => {
-    var code = [
-      '/** @jsx React.DOM */',
-      'var Component;',
-      'Component = React.createClass({',
-      '  render: function() {',
-      '    return <div/>;',
-      '  }',
-      '});'
-    ].join('\n');
-
-    var result = [
-      '/** @jsx React.DOM */',
-      'var Component;',
-      'Component = React.createClass({displayName: \'Component\',',
-      '  render: function() {',
-      '    return React.DOM.div(null);',
-      '  }',
-      '});'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should inject displayName in property assignment', () => {
-    var code = [
-      '/** @jsx React.DOM */',
-      'exports.Component = React.createClass({',
-      '  render: function() {',
-      '    return <div/>;',
-      '  }',
-      '});'
-    ].join('\n');
-
-    var result = [
-      '/** @jsx React.DOM */',
-      'exports.Component = React.createClass({displayName: \'Component\',',
-      '  render: function() {',
-      '    return React.DOM.div(null);',
-      '  }',
-      '});'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should inject displayName in object declaration', () => {
-    var code = [
-      '/** @jsx React.DOM */',
-      'exports = {',
-      '  Component: React.createClass({',
-      '    render: function() {',
-      '      return <div/>;',
-      '    }',
-      '  })',
-      '};'
-    ].join('\n');
-
-    var result = [
-      '/** @jsx React.DOM */',
-      'exports = {',
-      '  Component: React.createClass({displayName: \'Component\',',
-      '    render: function() {',
-      '      return React.DOM.div(null);',
-      '    }',
-      '  })',
-      '};'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-});
diff --git a/vendor/fbtransform/transforms/__tests__/react-test.js b/vendor/fbtransform/transforms/__tests__/react-test.js
deleted file mode 100644
index 005c9a73e1d..00000000000
--- a/vendor/fbtransform/transforms/__tests__/react-test.js
+++ /dev/null
@@ -1,482 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @emails jeffmo@fb.com
- */
-"use strict";
-
-require('mock-modules').autoMockOff();
-
-describe('react jsx', function() {
-  var transformAll = require('../../syntax.js').transformAll;
-  var xjs = require('../xjs.js');
-
-  // Add <font-face> to list of known tags to ensure that when we test support
-  // for hyphentated known tags, it's there.
-  // TODO: remove this when/if <font-face> is supported out of the box.
-  xjs.knownTags['font-face'] = true;
-
-  var transform = function(code, options, excludes) {
-    return transformAll(
-      code,
-      options,
-      (excludes || []).concat(['sourcemeta', 'allocate'])
-    );
-  };
-
-  // These are placeholder variables in scope that we can use to assert that a
-  // specific variable reference was passed, rather than an object clone of it.
-  var x = 123456;
-  var y = 789012;
-  var z = 345678;
-
-  var HEADER =
-    '/**\n' +
-    ' * @jsx React.DOM\n' +
-    ' */\n';
-
-  var expectObjectAssign = function(code) {
-    var Component = jest.genMockFunction();
-    var Child = jest.genMockFunction();
-    var objectAssignMock = jest.genMockFunction();
-    Object.assign = objectAssignMock;
-    eval(transform(HEADER + code).code);
-    return expect(objectAssignMock);
-  }
-
-  it('should convert simple tags', function() {
-    var code = [
-      '/**@jsx React.DOM*/',
-      'var x = <div></div>;'
-    ].join('\n');
-    var result = [
-      '/**@jsx React.DOM*/',
-      'var x = React.DOM.div(null);'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should convert simple text', function() {
-    var code = [
-      '/**@jsx React.DOM*/\n' +
-      'var x = <div>text</div>;'
-    ].join('\n');
-    var result = [
-      '/**@jsx React.DOM*/',
-      'var x = React.DOM.div(null, "text");'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should have correct comma in nested children', function() {
-    var code = [
-      '/**@jsx React.DOM*/',
-      'var x = <div>',
-      '  <div><br /></div>',
-      '  <Component>{foo}<br />{bar}</Component>',
-      '  <br />',
-      '</div>;'
-    ].join('\n');
-    var result = [
-      '/**@jsx React.DOM*/',
-      'var x = React.DOM.div(null, ',
-      '  React.DOM.div(null, React.DOM.br(null)), ',
-      '  Component(null, foo, React.DOM.br(null), bar), ',
-      '  React.DOM.br(null)',
-      ');'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should avoid wrapping in extra parens if not needed', function() {
-    // Try with a single composite child, wrapped in a div.
-    var code = [
-      '/**@jsx React.DOM*/',
-      'var x = <div>',
-      '  <Component />',
-      '</div>;'
-    ].join('\n');
-    var result = [
-      '/**@jsx React.DOM*/',
-      'var x = React.DOM.div(null, ',
-      '  Component(null)',
-      ');'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-
-    // Try with a single interpolated child, wrapped in a div.
-    code = [
-      '/**@jsx React.DOM*/',
-      'var x = <div>',
-      '  {this.props.children}',
-      '</div>;'
-    ].join('\n');
-    result = [
-      '/**@jsx React.DOM*/',
-      'var x = React.DOM.div(null, ',
-      '  this.props.children',
-      ');'
-    ].join('\n');
-    expect(transform(code).code).toEqual(result);
-
-    // Try with a single interpolated child, wrapped in a composite.
-    code = [
-      '/**@jsx React.DOM*/',
-      'var x = <Composite>',
-      '  {this.props.children}',
-      '</Composite>;'
-    ].join('\n');
-    result = [
-      '/**@jsx React.DOM*/',
-      'var x = Composite(null, ',
-      '  this.props.children',
-      ');'
-    ].join('\n');
-    expect(transform(code).code).toEqual(result);
-
-    // Try with a single composite child, wrapped in a composite.
-    code = [
-      '/**@jsx React.DOM*/',
-      'var x = <Composite>',
-      '  <Composite2 />',
-      '</Composite>;'
-    ].join('\n');
-    result = [
-      '/**@jsx React.DOM*/',
-      'var x = Composite(null, ',
-      '  Composite2(null)',
-      ');'
-    ].join('\n');
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should insert commas after expressions before whitespace', function() {
-    var code = [
-      '/**@jsx React.DOM*/',
-      'var x =',
-      '  <div',
-      '    attr1={',
-      '      "foo" + "bar"',
-      '    }',
-      '    attr2={',
-      '      "foo" + "bar" +',
-      '      ',
-      '      "baz" + "bug"',
-      '    }',
-      '    attr3={',
-      '      "foo" + "bar" +',
-      '      "baz" + "bug"',
-      '      // Extra line here.',
-      '    }',
-      '    attr4="baz">',
-      '  </div>;'
-    ].join('\n');
-    var result = [
-      '/**@jsx React.DOM*/',
-      'var x =',
-      '  React.DOM.div({',
-      '    attr1: ',
-      '      "foo" + "bar", ',
-      '    ',
-      '    attr2: ',
-      '      "foo" + "bar" +',
-      '      ',
-      '      "baz" + "bug", ',
-      '    ',
-      '    attr3: ',
-      '      "foo" + "bar" +',
-      '      "baz" + "bug", ',
-      '      // Extra line here.',
-      '    ',
-      '    attr4: "baz"}',
-      '  );'
-    ].join('\n');
-
-    expect(transform(code).code).toEqual(result);
-  });
-
-  it('should properly handle comments adjacent to children', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '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>',
-      ');'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'var x = (',
-      '  React.DOM.div(null, ',
-      '    /* A comment at the beginning */',
-      '    /* A second comment at the beginning */',
-      '    React.DOM.span(null',
-      '      /* A nested comment */',
-      '    ), ',
-      '    /* A sandwiched comment */',
-      '    React.DOM.br(null)',
-      '    /* A comment at the end */',
-      '    /* A second comment at the end */',
-      '  )',
-      ');'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should properly handle comments between props', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'var x = (',
-      '  <div',
-      '    /* a multi-line',
-      '       comment */',
-      '    attr1="foo">',
-      '    <span // a double-slash comment',
-      '      attr2="bar"',
-      '    />',
-      '  </div>',
-      ');'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'var x = (',
-      '  React.DOM.div({',
-      '    /* a multi-line',
-      '       comment */',
-      '    attr1: "foo"}, ',
-      '    React.DOM.span({// a double-slash comment',
-      '      attr2: "bar"}',
-      '    )',
-      '  )',
-      ');'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should not strip tags with a single child of &nbsp;', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<div>&nbsp;</div>;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'React.DOM.div(null, "\u00A0");'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should not strip &nbsp; even coupled with other whitespace', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<div>&nbsp; </div>;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'React.DOM.div(null, "\u00A0 ");'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should handle hasOwnProperty correctly', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<hasOwnProperty>testing</hasOwnProperty>;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'hasOwnProperty(null, "testing");'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should allow constructor as prop', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<Component constructor="foo" />;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'Component({constructor: "foo"});'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should allow JS namespacing', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<Namespace.Component />;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'Namespace.Component(null);'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should allow deeper JS namespacing', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<Namespace.DeepNamespace.Component />;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'Namespace.DeepNamespace.Component(null);'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should disallow XML namespacing', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<Namespace:Component />;'
-    ].join('\n');
-
-    expect(() => transform(code)).toThrow();
-  });
-
-  it('wraps props in Object.assign for spread attributes', function() {
-    var code = HEADER +
-      '<Component { ... x } y\n={2 } z />';
-    var result = HEADER +
-      'Component(Object.assign({},   x , {y: \n2, z: true}))';
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('should transform known hyphenated tags', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<font-face />;'
-    ].join('\n');
-    var result = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      'React.DOM[\'font-face\'](null);'
-    ].join('\n');
-
-    expect(transform(code).code).toBe(result);
-  });
-
-  it('does not call Object.assign when there are no spreads', function() {
-    expectObjectAssign(
-      '<Component x={y} />'
-    ).not.toBeCalled();
-  });
-
-  it('should throw for unknown hyphenated tags', function() {
-    var code = [
-      '/**',
-      ' * @jsx React.DOM',
-      ' */',
-      '<x-component />;'
-    ].join('\n');
-
-    expect(() => transform(code)).toThrow();
-  });
-
-  it('calls assign with a new target object for spreads', function() {
-    expectObjectAssign(
-      '<Component {...x} />'
-    ).toBeCalledWith({}, x);
-  });
-
-  it('calls assign with an empty object when the spread is first', function() {
-    expectObjectAssign(
-      '<Component { ...x } y={2} />'
-    ).toBeCalledWith({}, x, { y: 2 });
-  });
-
-  it('coalesces consecutive properties into a single object', function() {
-    expectObjectAssign(
-      '<Component { ... x } y={2} z />'
-    ).toBeCalledWith({}, x, { y: 2, z: true });
-  });
-
-  it('avoids an unnecessary empty object when spread is not first', function() {
-    expectObjectAssign(
-      '<Component x={1} {...y} />'
-    ).toBeCalledWith({x: 1}, y);
-  });
-
-  it('passes the same value multiple times to Object.assign', function() {
-    expectObjectAssign(
-      '<Component x={1} y="2" {...z} {...z}><Child /></Component>'
-    ).toBeCalledWith({x: 1, y: "2"}, z, z);
-  });
-
-  it('evaluates sequences before passing them to Object.assign', function() {
-    expectObjectAssign(
-      '<Component x="1" {...(z = { y: 2 }, z)} z={3}>Text</Component>'
-    ).toBeCalledWith({x: "1"}, { y: 2 }, {z: 3});
-  });
-
-});
diff --git a/vendor/fbtransform/transforms/react.js b/vendor/fbtransform/transforms/react.js
deleted file mode 100644
index 12aaa002f7e..00000000000
--- a/vendor/fbtransform/transforms/react.js
+++ /dev/null
@@ -1,288 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/*global exports:true*/
-"use strict";
-
-var Syntax = require('esprima-fb').Syntax;
-var utils = require('jstransform/src/utils');
-
-var FALLBACK_TAGS = require('./xjs').knownTags;
-var renderXJSExpressionContainer =
-  require('./xjs').renderXJSExpressionContainer;
-var renderXJSLiteral = require('./xjs').renderXJSLiteral;
-var quoteAttrName = require('./xjs').quoteAttrName;
-
-var trimLeft = require('./xjs').trimLeft;
-
-/**
- * Customized desugar processor.
- *
- * Currently: (Somewhat tailored to React)
- * <X> </X> => X(null, null)
- * <X prop="1" /> => X({prop: '1'}, null)
- * <X prop="2"><Y /></X> => X({prop:'2'}, Y(null, null))
- * <X prop="2"><Y /><Z /></X> => X({prop:'2'}, [Y(null, null), Z(null, null)])
- *
- * Exceptions to the simple rules above:
- * if a property is named "class" it will be changed to "className" in the
- * javascript since "class" is not a valid object key in javascript.
- */
-
-var JSX_ATTRIBUTE_TRANSFORMS = {
-  cxName: function(attr) {
-    throw new Error(
-      "cxName is no longer supported, use className={cx(...)} instead"
-    );
-  }
-};
-
-/**
- * Removes all non-whitespace/parenthesis characters
- */
-var reNonWhiteParen = /([^\s\(\)])/g;
-function stripNonWhiteParen(value) {
-  return value.replace(reNonWhiteParen, '');
-}
-
-function visitReactTag(traverse, object, path, state) {
-  var jsxObjIdent = utils.getDocblock(state).jsx;
-  var openingElement = object.openingElement;
-  var nameObject = openingElement.name;
-  var attributesObject = openingElement.attributes;
-
-  utils.catchup(openingElement.range[0], state, trimLeft);
-
-  if (nameObject.type === Syntax.XJSNamespacedName && nameObject.namespace) {
-    throw new Error('Namespace tags are not supported. ReactJSX is not XML.');
-  }
-
-  // Only identifiers can be fallback tags or need quoting. We don't need to
-  // handle quoting for other types.
-  var didAddTag = false;
-
-  // Only identifiers can be fallback tags. XJSMemberExpressions are not.
-  if (nameObject.type === Syntax.XJSIdentifier) {
-    var tagName = nameObject.name;
-    var quotedTagName = quoteAttrName(tagName);
-
-    if (FALLBACK_TAGS.hasOwnProperty(tagName)) {
-      // "Properly" handle invalid identifiers, like <font-face>, which needs to
-      // be enclosed in quotes.
-      var predicate =
-        tagName === quotedTagName ?
-          ('.' + tagName) :
-          ('[' + quotedTagName + ']');
-      utils.append(jsxObjIdent + predicate, state);
-      utils.move(nameObject.range[1], state);
-      didAddTag = true;
-    } else if (tagName !== quotedTagName) {
-      // If we're in the case where we need to quote and but don't recognize the
-      // tag, throw.
-      throw new Error(
-        'Tags must be valid JS identifiers or a recognized special case. `<' +
-        tagName + '>` is not one of them.'
-      );
-    }
-  }
-
-  // Use utils.catchup in this case so we can easily handle XJSMemberExpressions
-  // which look like Foo.Bar.Baz. This also handles unhyphenated XJSIdentifiers
-  // that aren't fallback tags.
-  if (!didAddTag) {
-    utils.move(nameObject.range[0], state);
-    utils.catchup(nameObject.range[1], state);
-  }
-
-  utils.append('(', state);
-
-  var hasAttributes = attributesObject.length;
-
-  var hasAtLeastOneSpreadProperty = attributesObject.some(function(attr) {
-    return attr.type === Syntax.XJSSpreadAttribute;
-  });
-
-  // if we don't have any attributes, pass in null
-  if (hasAtLeastOneSpreadProperty) {
-    utils.append('Object.assign({', state);
-  } else if (hasAttributes) {
-    utils.append('{', state);
-  } else {
-    utils.append('null', state);
-  }
-
-  // keep track of if the previous attribute was a spread attribute
-  var previousWasSpread = false;
-
-  // write attributes
-  attributesObject.forEach(function(attr, index) {
-    var isLast = index === attributesObject.length - 1;
-
-    if (attr.type === Syntax.XJSSpreadAttribute) {
-      // Plus 1 to skip `{`.
-      utils.move(attr.range[0] + 1, state);
-
-      // Close the previous object or initial object
-      if (!previousWasSpread) {
-        utils.append('}, ', state);
-      }
-
-      // Move to the expression start, ignoring everything except parenthesis
-      // and whitespace.
-      utils.catchup(attr.argument.range[0], state, stripNonWhiteParen);
-
-      traverse(attr.argument, path, state);
-
-      utils.catchup(attr.argument.range[1], state);
-
-      // Move to the end, ignoring parenthesis and the closing `}`
-      utils.catchup(attr.range[1] - 1, state, stripNonWhiteParen);
-
-      if (!isLast) {
-        utils.append(', ', state);
-      }
-
-      utils.move(attr.range[1], state);
-
-      previousWasSpread = true;
-
-      return;
-    }
-
-    // If the next attribute is a spread, we're effective last in this object
-    if (!isLast) {
-      isLast = attributesObject[index + 1].type === Syntax.XJSSpreadAttribute;
-    }
-
-    if (attr.name.namespace) {
-      throw new Error(
-         'Namespace attributes are not supported. ReactJSX is not XML.');
-    }
-    var name = attr.name.name;
-
-    utils.catchup(attr.range[0], state, trimLeft);
-
-    if (previousWasSpread) {
-      utils.append('{', state);
-    }
-
-    utils.append(quoteAttrName(name), state);
-    utils.append(': ', state);
-
-    if (!attr.value) {
-      state.g.buffer += 'true';
-      state.g.position = attr.name.range[1];
-      if (!isLast) {
-        utils.append(', ', state);
-      }
-    } else {
-      utils.move(attr.name.range[1], state);
-      // Use catchupNewlines to skip over the '=' in the attribute
-      utils.catchupNewlines(attr.value.range[0], state);
-      if (JSX_ATTRIBUTE_TRANSFORMS.hasOwnProperty(attr.name.name)) {
-        utils.append(JSX_ATTRIBUTE_TRANSFORMS[attr.name.name](attr), state);
-        utils.move(attr.value.range[1], state);
-        if (!isLast) {
-          utils.append(', ', state);
-        }
-      } else if (attr.value.type === Syntax.Literal) {
-        renderXJSLiteral(attr.value, isLast, state);
-      } else {
-        renderXJSExpressionContainer(traverse, attr.value, isLast, path, state);
-      }
-    }
-
-    utils.catchup(attr.range[1], state, trimLeft);
-
-    previousWasSpread = false;
-
-  });
-
-  if (!openingElement.selfClosing) {
-    utils.catchup(openingElement.range[1] - 1, state, trimLeft);
-    utils.move(openingElement.range[1], state);
-  }
-
-  if (hasAttributes && !previousWasSpread) {
-    utils.append('}', state);
-  }
-
-  if (hasAtLeastOneSpreadProperty) {
-    utils.append(')', state);
-  }
-
-  // filter out whitespace
-  var childrenToRender = object.children.filter(function(child) {
-    return !(child.type === Syntax.Literal
-             && typeof child.value === 'string'
-             && child.value.match(/^[ \t]*[\r\n][ \t\r\n]*$/));
-  });
-  if (childrenToRender.length > 0) {
-    var lastRenderableIndex;
-
-    childrenToRender.forEach(function(child, index) {
-      if (child.type !== Syntax.XJSExpressionContainer ||
-          child.expression.type !== Syntax.XJSEmptyExpression) {
-        lastRenderableIndex = index;
-      }
-    });
-
-    if (lastRenderableIndex !== undefined) {
-      utils.append(', ', state);
-    }
-
-    childrenToRender.forEach(function(child, index) {
-      utils.catchup(child.range[0], state, trimLeft);
-
-      var isLast = index >= lastRenderableIndex;
-
-      if (child.type === Syntax.Literal) {
-        renderXJSLiteral(child, isLast, state);
-      } else if (child.type === Syntax.XJSExpressionContainer) {
-        renderXJSExpressionContainer(traverse, child, isLast, path, state);
-      } else {
-        traverse(child, path, state);
-        if (!isLast) {
-          utils.append(', ', state);
-        }
-      }
-
-      utils.catchup(child.range[1], state, trimLeft);
-    });
-  }
-
-  if (openingElement.selfClosing) {
-    // everything up to />
-    utils.catchup(openingElement.range[1] - 2, state, trimLeft);
-    utils.move(openingElement.range[1], state);
-  } else {
-    // everything up to </ sdflksjfd>
-    utils.catchup(object.closingElement.range[0], state, trimLeft);
-    utils.move(object.closingElement.range[1], state);
-  }
-
-  utils.append(')', state);
-  return false;
-}
-
-visitReactTag.test = function(object, path, state) {
-  // only run react when react @jsx namespace is specified in docblock
-  var jsx = utils.getDocblock(state).jsx;
-  return object.type === Syntax.XJSElement && jsx && jsx.length;
-};
-
-exports.visitorList = [
-  visitReactTag
-];
diff --git a/vendor/fbtransform/transforms/reactDisplayName.js b/vendor/fbtransform/transforms/reactDisplayName.js
deleted file mode 100644
index 6bc784c6e0b..00000000000
--- a/vendor/fbtransform/transforms/reactDisplayName.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/*global exports:true*/
-"use strict";
-
-var Syntax = require('esprima-fb').Syntax;
-var utils = require('jstransform/src/utils');
-
-function addDisplayName(displayName, object, state) {
-  if (object &&
-      object.type === Syntax.CallExpression &&
-      object.callee.type === Syntax.MemberExpression &&
-      object.callee.object.type === Syntax.Identifier &&
-      object.callee.object.name === 'React' &&
-      object.callee.property.type === Syntax.Identifier &&
-      object.callee.property.name === 'createClass' &&
-      object['arguments'].length === 1 &&
-      object['arguments'][0].type === Syntax.ObjectExpression) {
-    // Verify that the displayName property isn't already set
-    var properties = object['arguments'][0].properties;
-    var safe = properties.every(function(property) {
-      var value = property.key.type === Syntax.Identifier ?
-        property.key.name :
-        property.key.value;
-      return value !== 'displayName';
-    });
-
-    if (safe) {
-      utils.catchup(object['arguments'][0].range[0] + 1, state);
-      utils.append("displayName: '" + displayName + "',", state);
-    }
-  }
-}
-
-/**
- * Transforms the following:
- *
- * var MyComponent = React.createClass({
- *    render: ...
- * });
- *
- * into:
- *
- * var MyComponent = React.createClass({
- *    displayName: 'MyComponent',
- *    render: ...
- * });
- *
- * Also catches:
- *
- * MyComponent = React.createClass(...);
- * exports.MyComponent = React.createClass(...);
- * module.exports = {MyComponent: React.createClass(...)};
- */
-function visitReactDisplayName(traverse, object, path, state) {
-  var left, right;
-
-  if (object.type === Syntax.AssignmentExpression) {
-    left = object.left;
-    right = object.right;
-  } else if (object.type === Syntax.Property) {
-    left = object.key;
-    right = object.value;
-  } else if (object.type === Syntax.VariableDeclarator) {
-    left = object.id;
-    right = object.init;
-  }
-
-  if (left && left.type === Syntax.MemberExpression) {
-    left = left.property;
-  }
-  if (left && left.type === Syntax.Identifier) {
-    addDisplayName(left.name, right, state);
-  }
-}
-
-/**
- * Will only run on @jsx files for now.
- */
-visitReactDisplayName.test = function(object, path, state) {
-  if (utils.getDocblock(state).jsx) {
-    return (
-      object.type === Syntax.AssignmentExpression ||
-      object.type === Syntax.Property ||
-      object.type === Syntax.VariableDeclarator
-    );
-  } else {
-    return false;
-  }
-};
-
-exports.visitorList = [
-  visitReactDisplayName
-];
diff --git a/vendor/fbtransform/transforms/xjs.js b/vendor/fbtransform/transforms/xjs.js
deleted file mode 100644
index 66a8fb13cb2..00000000000
--- a/vendor/fbtransform/transforms/xjs.js
+++ /dev/null
@@ -1,253 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/*global exports:true*/
-"use strict";
-var Syntax = require('esprima-fb').Syntax;
-var utils = require('jstransform/src/utils');
-
-var knownTags = {
-  a: true,
-  abbr: true,
-  address: true,
-  applet: true,
-  area: true,
-  article: true,
-  aside: true,
-  audio: true,
-  b: true,
-  base: true,
-  bdi: true,
-  bdo: true,
-  big: true,
-  blockquote: true,
-  body: true,
-  br: true,
-  button: true,
-  canvas: true,
-  caption: true,
-  circle: true,
-  cite: true,
-  code: true,
-  col: true,
-  colgroup: true,
-  command: true,
-  data: true,
-  datalist: true,
-  dd: true,
-  defs: true,
-  del: true,
-  details: true,
-  dfn: true,
-  dialog: true,
-  div: true,
-  dl: true,
-  dt: true,
-  ellipse: true,
-  em: true,
-  embed: true,
-  fieldset: true,
-  figcaption: true,
-  figure: true,
-  footer: true,
-  form: true,
-  g: true,
-  h1: true,
-  h2: true,
-  h3: true,
-  h4: true,
-  h5: true,
-  h6: true,
-  head: true,
-  header: true,
-  hgroup: true,
-  hr: true,
-  html: true,
-  i: true,
-  iframe: true,
-  img: true,
-  input: true,
-  ins: true,
-  kbd: true,
-  keygen: true,
-  label: true,
-  legend: true,
-  li: true,
-  line: true,
-  linearGradient: true,
-  link: true,
-  main: true,
-  map: true,
-  mark: true,
-  marquee: true,
-  mask: false,
-  menu: true,
-  menuitem: true,
-  meta: true,
-  meter: true,
-  nav: true,
-  noscript: true,
-  object: true,
-  ol: true,
-  optgroup: true,
-  option: true,
-  output: true,
-  p: true,
-  param: true,
-  path: true,
-  pattern: false,
-  polygon: true,
-  polyline: true,
-  pre: true,
-  progress: true,
-  q: true,
-  radialGradient: true,
-  rect: true,
-  rp: true,
-  rt: true,
-  ruby: true,
-  s: true,
-  samp: true,
-  script: true,
-  section: true,
-  select: true,
-  small: true,
-  source: true,
-  span: true,
-  stop: true,
-  strong: true,
-  style: true,
-  sub: true,
-  summary: true,
-  sup: true,
-  svg: true,
-  table: true,
-  tbody: true,
-  td: true,
-  text: true,
-  textarea: true,
-  tfoot: true,
-  th: true,
-  thead: true,
-  time: true,
-  title: true,
-  tr: true,
-  track: true,
-  tspan: true,
-  u: true,
-  ul: true,
-  'var': true,
-  video: true,
-  wbr: true
-};
-
-function renderXJSLiteral(object, isLast, state, start, end) {
-  var lines = object.value.split(/\r\n|\n|\r/);
-
-  if (start) {
-    utils.append(start, state);
-  }
-
-  var lastNonEmptyLine = 0;
-
-  lines.forEach(function (line, index) {
-    if (line.match(/[^ \t]/)) {
-      lastNonEmptyLine = index;
-    }
-  });
-
-  lines.forEach(function (line, index) {
-    var isFirstLine = index === 0;
-    var isLastLine = index === lines.length - 1;
-    var isLastNonEmptyLine = index === lastNonEmptyLine;
-
-    // replace rendered whitespace tabs with spaces
-    var trimmedLine = line.replace(/\t/g, ' ');
-
-    // trim whitespace touching a newline
-    if (!isFirstLine) {
-      trimmedLine = trimmedLine.replace(/^[ ]+/, '');
-    }
-    if (!isLastLine) {
-      trimmedLine = trimmedLine.replace(/[ ]+$/, '');
-    }
-
-    if (!isFirstLine) {
-      utils.append(line.match(/^[ \t]*/)[0], state);
-    }
-
-    if (trimmedLine || isLastNonEmptyLine) {
-      utils.append(
-        JSON.stringify(trimmedLine) +
-        (!isLastNonEmptyLine ? " + ' ' +" : ''),
-        state);
-
-      if (isLastNonEmptyLine) {
-        if (end) {
-          utils.append(end, state);
-        }
-        if (!isLast) {
-          utils.append(', ', state);
-        }
-      }
-
-      // only restore tail whitespace if line had literals
-      if (trimmedLine && !isLastLine) {
-        utils.append(line.match(/[ \t]*$/)[0], state);
-      }
-    }
-
-    if (!isLastLine) {
-      utils.append('\n', state);
-    }
-  });
-
-  utils.move(object.range[1], state);
-}
-
-function renderXJSExpressionContainer(traverse, object, isLast, path, state) {
-  // Plus 1 to skip `{`.
-  utils.move(object.range[0] + 1, state);
-  traverse(object.expression, path, state);
-
-  if (!isLast && object.expression.type !== Syntax.XJSEmptyExpression) {
-    // If we need to append a comma, make sure to do so after the expression.
-    utils.catchup(object.expression.range[1], state, trimLeft);
-    utils.append(', ', state);
-  }
-
-  // Minus 1 to skip `}`.
-  utils.catchup(object.range[1] - 1, state, trimLeft);
-  utils.move(object.range[1], state);
-  return false;
-}
-
-function quoteAttrName(attr) {
-  // Quote invalid JS identifiers.
-  if (!/^[a-z_$][a-z\d_$]*$/i.test(attr)) {
-    return "'" + attr + "'";
-  }
-  return attr;
-}
-
-function trimLeft(value) {
-  return value.replace(/^[ ]+/, '');
-}
-
-exports.knownTags = knownTags;
-exports.renderXJSExpressionContainer = renderXJSExpressionContainer;
-exports.renderXJSLiteral = renderXJSLiteral;
-exports.quoteAttrName = quoteAttrName;
-exports.trimLeft = trimLeft;
diff --git a/vendor/fbtransform/visitors.js b/vendor/fbtransform/visitors.js
deleted file mode 100644
index e3e0b795598..00000000000
--- a/vendor/fbtransform/visitors.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*global exports:true*/
-var es6ArrowFunctions = require('jstransform/visitors/es6-arrow-function-visitors');
-var es6Classes = require('jstransform/visitors/es6-class-visitors');
-var es6Destructuring = require('jstransform/visitors/es6-destructuring-visitors');
-var es6ObjectConciseMethod = require('jstransform/visitors/es6-object-concise-method-visitors');
-var es6ObjectShortNotation = require('jstransform/visitors/es6-object-short-notation-visitors');
-var es6RestParameters = require('jstransform/visitors/es6-rest-param-visitors');
-var es6Templates = require('jstransform/visitors/es6-template-visitors');
-var react = require('./transforms/react');
-var reactDisplayName = require('./transforms/reactDisplayName');
-
-/**
- * Map from transformName => orderedListOfVisitors.
- */
-var transformVisitors = {
-  'es6-arrow-functions': es6ArrowFunctions.visitorList,
-  'es6-classes': es6Classes.visitorList,
-  'es6-destructuring': es6Destructuring.visitorList,
-  'es6-object-concise-method': es6ObjectConciseMethod.visitorList,
-  'es6-object-short-notation': es6ObjectShortNotation.visitorList,
-  'es6-rest-params': es6RestParameters.visitorList,
-  'es6-templates': es6Templates.visitorList,
-  'react': react.visitorList.concat(reactDisplayName.visitorList)
-};
-
-/**
- * Specifies the order in which each transform should run.
- */
-var transformRunOrder = [
-  'es6-arrow-functions',
-  'es6-object-concise-method',
-  'es6-object-short-notation',
-  'es6-classes',
-  'es6-rest-params',
-  'es6-templates',
-  'es6-destructuring',
-  'react'
-];
-
-/**
- * Given a list of transform names, return the ordered list of visitors to be
- * passed to the transform() function.
- *
- * @param {array?} excludes
- * @return {array}
- */
-function getAllVisitors(excludes) {
-  var ret = [];
-  for (var i = 0, il = transformRunOrder.length; i < il; i++) {
-    if (!excludes || excludes.indexOf(transformRunOrder[i]) === -1) {
-      ret = ret.concat(transformVisitors[transformRunOrder[i]]);
-    }
-  }
-  return ret;
-}
-
-exports.getAllVisitors = getAllVisitors;
-exports.transformVisitors = transformVisitors;
diff --git a/vendor/jasmine-jsreporter/jasmine-jsreporter.js b/vendor/jasmine-jsreporter/jasmine-jsreporter.js
deleted file mode 100755
index 28f654ccf67..00000000000
--- a/vendor/jasmine-jsreporter/jasmine-jsreporter.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/*
-  This file is part of the Jasmine JSReporter project from Ivan De Marino.
-
-  Copyright (C) 2011 Ivan De Marino (aka detro, aka detronizator), http://blog.ivandemarino.me, ivan.de.marino@gmail.com
-
-  Redistribution and use in source and binary forms, with or without
-  modification, are permitted provided that the following conditions are met:
-
-    * Redistributions of source code must retain the above copyright
-      notice, this list of conditions and the following disclaimer.
-    * Redistributions in binary form must reproduce the above copyright
-      notice, this list of conditions and the following disclaimer in the
-      documentation and/or other materials provided with the distribution.
-    * Neither the name of the <organization> nor the
-      names of its contributors may be used to endorse or promote products
-      derived from this software without specific prior written permission.
-
-  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-  ARE DISCLAIMED. IN NO EVENT SHALL IVAN DE MARINO BE LIABLE FOR ANY
-  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
-  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
-  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-*/
-
-(function () {
-    // Ensure that Jasmine library is loaded first
-    if (typeof jasmine === "undefined") {
-        throw new Error("[Jasmine JSReporter] 'Jasmine' library not found");
-    }
-
-    /**
-     * Calculate elapsed time, in Seconds.
-     * @param startMs Start time in Milliseconds
-     * @param finishMs Finish time in Milliseconds
-     * @return Elapsed time in Seconds */
-    function elapsedSec (startMs, finishMs) {
-        return (finishMs - startMs) / 1000;
-    }
-
-    /**
-     * Round an amount to the given number of Digits.
-     * If no number of digits is given, than '2' is assumed.
-     * @param amount Amount to round
-     * @param numOfDecDigits Number of Digits to round to. Default value is '2'.
-     * @return Rounded amount */
-    function round (amount, numOfDecDigits) {
-        numOfDecDigits = numOfDecDigits || 2;
-        return Math.round(amount * Math.pow(10, numOfDecDigits)) / Math.pow(10, numOfDecDigits);
-    }
-
-    /**
-     * Collect information about a Suite, recursively, and return a JSON result.
-     * @param suite The Jasmine Suite to get data from
-     */
-    function getSuiteData (suite) {
-        var suiteData = {
-                description : suite.description,
-                durationSec : 0,
-                specs: [],
-                suites: [],
-                passed: true
-            },
-            specs = suite.specs(),
-            suites = suite.suites(),
-            i, ilen;
-
-        // Loop over all the Suite's Specs
-        for (i = 0, ilen = specs.length; i < ilen; ++i) {
-            suiteData.specs[i] = {
-                description : specs[i].description,
-                durationSec : specs[i].durationSec,
-                passed : specs[i].results().passedCount === specs[i].results().totalCount,
-                skipped : specs[i].results().skipped,
-                passedCount : specs[i].results().passedCount,
-                failedCount : specs[i].results().failedCount,
-                totalCount : specs[i].results().totalCount
-            };
-            suiteData.passed = !suiteData.specs[i].passed ? false : suiteData.passed;
-            suiteData.durationSec += suiteData.specs[i].durationSec;
-        }
-
-        // Loop over all the Suite's sub-Suites
-        for (i = 0, ilen = suites.length; i < ilen; ++i) {
-            suiteData.suites[i] = getSuiteData(suites[i]); //< recursive population
-            suiteData.passed = !suiteData.suites[i].passed ? false : suiteData.passed;
-            suiteData.durationSec += suiteData.suites[i].durationSec;
-        }
-
-        // Rounding duration numbers to 3 decimal digits
-        suiteData.durationSec = round(suiteData.durationSec, 4);
-
-        return suiteData;
-    }
-
-    var JSReporter =  function () {
-    };
-
-    JSReporter.prototype = {
-        reportRunnerStarting: function (runner) {
-            // Nothing to do
-        },
-
-        reportSpecStarting: function (spec) {
-            // Start timing this spec
-            spec.startedAt = new Date();
-        },
-
-        reportSpecResults: function (spec) {
-            // Finish timing this spec and calculate duration/delta (in sec)
-            spec.finishedAt = new Date();
-            // If the spec was skipped, reportSpecStarting is never called and spec.startedAt is undefined
-            spec.durationSec = spec.startedAt ? elapsedSec(spec.startedAt.getTime(), spec.finishedAt.getTime()) : 0;
-        },
-
-        reportSuiteResults: function (suite) {
-            // Nothing to do
-        },
-
-        reportRunnerResults: function (runner) {
-            var suites = runner.suites(),
-                i, ilen;
-
-            // Attach results to the "jasmine" object to make those results easy to scrap/find
-            jasmine.runnerResults = {
-                suites: [],
-                durationSec : 0,
-                passed : true
-            };
-
-            // Loop over all the Suites
-            for (i = 0, ilen = suites.length; i < ilen; ++i) {
-                if (suites[i].parentSuite === null) {
-                    jasmine.runnerResults.suites[i] = getSuiteData(suites[i]);
-                    // If 1 suite fails, the whole runner fails
-                    jasmine.runnerResults.passed = !jasmine.runnerResults.suites[i].passed ? false : jasmine.runnerResults.passed;
-                    // Add up all the durations
-                    jasmine.runnerResults.durationSec += jasmine.runnerResults.suites[i].durationSec;
-                }
-            }
-
-            // Decorate the 'jasmine' object with getters
-            jasmine.getJSReport = function () {
-                if (jasmine.runnerResults) {
-                    return jasmine.runnerResults;
-                }
-                return null;
-            };
-            jasmine.getJSReportAsString = function () {
-                return JSON.stringify(jasmine.getJSReport());
-            };
-        }
-    };
-
-    // export public
-    jasmine.JSReporter = JSReporter;
-})();
-
diff --git a/vendor/jasmine/HtmlReporter.js b/vendor/jasmine/HtmlReporter.js
deleted file mode 100644
index 8ed3d3742d7..00000000000
--- a/vendor/jasmine/HtmlReporter.js
+++ /dev/null
@@ -1,168 +0,0 @@
-var jasmine = require("./jasmine");
-
-exports.HtmlReporter =
-jasmine.HtmlReporter = function(_doc) {
-  var self = this;
-  var doc = _doc || window.document;
-
-  var reporterView;
-
-  var dom = {};
-
-  // Jasmine Reporter Public Interface
-  self.logRunningSpecs = false;
-
-  self.reportRunnerStarting = function(runner) {
-    var specs = runner.specs() || [];
-
-    if (specs.length == 0) {
-      return;
-    }
-
-    createReporterDom(runner.env.versionString());
-    doc.body.appendChild(dom.reporter);
-    setExceptionHandling();
-
-    reporterView = new jasmine.HtmlReporter.ReporterView(dom);
-    reporterView.addSpecs(specs, self.specFilter);
-  };
-
-  self.reportRunnerResults = function(runner) {
-    reporterView && reporterView.complete();
-  };
-
-  self.reportSuiteResults = function(suite) {
-    reporterView.suiteComplete(suite);
-  };
-
-  self.reportSpecStarting = function(spec) {
-    if (self.logRunningSpecs) {
-      self.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
-    }
-  };
-
-  self.reportSpecResults = function(spec) {
-    reporterView.specComplete(spec);
-  };
-
-  self.log = function() {
-    var console = jasmine.getGlobal().console;
-    if (console && console.log) {
-      if (console.log.apply) {
-        console.log.apply(console, arguments);
-      } else {
-        console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
-      }
-    }
-  };
-
-  self.specFilter = function(spec) {
-    if (!focusedSpecName()) {
-      return true;
-    }
-
-    return spec.getFullName().indexOf(focusedSpecName()) === 0;
-  };
-
-  return self;
-
-  function focusedSpecName() {
-    var specName;
-
-    (function memoizeFocusedSpec() {
-      if (specName) {
-        return;
-      }
-
-      var paramMap = [];
-      var params = jasmine.HtmlReporter.parameters(doc);
-
-      for (var i = 0; i < params.length; i++) {
-        var p = params[i].split('=');
-        paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
-      }
-
-      specName = paramMap.spec;
-    })();
-
-    return specName;
-  }
-
-  function createReporterDom(version) {
-    dom.reporter = self.createDom('div', { id: 'HTMLReporter', className: 'jasmine_reporter' },
-      dom.banner = self.createDom('div', { className: 'banner' },
-        self.createDom('span', { className: 'title' }, "Jasmine "),
-        self.createDom('span', { className: 'version' }, version)),
-
-      dom.symbolSummary = self.createDom('ul', {className: 'symbolSummary'}),
-      dom.alert = self.createDom('div', {className: 'alert'},
-        self.createDom('span', { className: 'exceptions' },
-          self.createDom('label', { className: 'label', 'for': 'no_try_catch' }, 'No try/catch'),
-          self.createDom('input', { id: 'no_try_catch', type: 'checkbox' }))),
-      dom.results = self.createDom('div', {className: 'results'},
-        dom.summary = self.createDom('div', { className: 'summary' }),
-        dom.details = self.createDom('div', { id: 'details' }))
-    );
-  }
-
-  function noTryCatch() {
-    return window.location.search.match(/catch=false/);
-  }
-
-  function searchWithCatch() {
-    var params = jasmine.HtmlReporter.parameters(window.document);
-    var removed = false;
-    var i = 0;
-
-    while (!removed && i < params.length) {
-      if (params[i].match(/catch=/)) {
-        params.splice(i, 1);
-        removed = true;
-      }
-      i++;
-    }
-    if (jasmine.CATCH_EXCEPTIONS) {
-      params.push("catch=false");
-    }
-
-    return params.join("&");
-  }
-
-  function setExceptionHandling() {
-    var chxCatch = document.getElementById('no_try_catch');
-
-    if (noTryCatch()) {
-      chxCatch.setAttribute('checked', true);
-      jasmine.CATCH_EXCEPTIONS = false;
-    }
-    chxCatch.onclick = function() {
-      window.location.search = searchWithCatch();
-    };
-  }
-};
-jasmine.HtmlReporter.parameters = function(doc) {
-  var paramStr = doc.location.search.substring(1);
-  var params = [];
-
-  if (paramStr.length > 0) {
-    params = paramStr.split('&');
-  }
-  return params;
-}
-jasmine.HtmlReporter.sectionLink = function(sectionName) {
-  var link = '?';
-  var params = [];
-
-  if (sectionName) {
-    params.push('spec=' + encodeURIComponent(sectionName));
-  }
-  if (!jasmine.CATCH_EXCEPTIONS) {
-    params.push("catch=false");
-  }
-  if (params.length > 0) {
-    link += params.join("&");
-  }
-
-  return link;
-};
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter);
diff --git a/vendor/jasmine/PrintReporter.js b/vendor/jasmine/PrintReporter.js
deleted file mode 100644
index 9ffd94a1dc5..00000000000
--- a/vendor/jasmine/PrintReporter.js
+++ /dev/null
@@ -1,128 +0,0 @@
-var jasmine = require("./jasmine");
-var diff = require('./diff');
-
-var red = '\u001b[1;41m';
-var reset = '\u001b[0m';
-
-function highlightDifferences(a, b) {
-  var changes = diff.diffChars(a, b);
-
-  var ret = {a: '', b: ''};
-  var change;
-  for (var i = 0, il = changes.length; i < il; i++) {
-    change = changes[i];
-    if (change.added) {
-      ret.b += red + change.value + reset;
-    } else if (change.removed) {
-      ret.a += red + change.value + reset;
-    } else {
-      ret.a += change.value;
-      ret.b += change.value;
-    }
-  }
-  return ret;
-}
-
-function PrintReporter(name, root_directory) {
-  this.skipCount = 0;
-  this.failCount = 0;
-  this.expectCount = 0;
-  this.specCount = 0;
-  this.name = name;
-  this.rootDirectory = root_directory;
-}
-exports.PrintReporter =
-jasmine.PrintReporter = PrintReporter;
-
-PrintReporter.prototype = new jasmine.Reporter();
-// Set verbose=true on the test instance to enable additional logging
-PrintReporter.prototype.verbose = false;
-PrintReporter.prototype._didSpecName = false;
-
-PrintReporter.prototype.reportSpecStarting = function(spec) {
-  this._didSpecName = false;
-  this._spec = spec;
-};
-
-PrintReporter.prototype.reportRunnerResults = function(runner) {
-  // Don't print out the spec name at the end
-  this._didSpecName = true;
-
-  this.log([
-    this.specCount + " spec",
-    this.expectCount + " expect",
-    this.skipCount + " skip",
-    this.failCount + " fail"
-  ].join("  "));
-
-  require("./phantom").exit(this.failCount);
-};
-
-
-PrintReporter.prototype.reportSuiteResults = function(suite) {
-  var results = suite.results();
-  if (this.verbose) {
-    this.log('Suite "' + suite.description + '": ' +
-      results.passedCount + '/' + results.totalCount + ' passed.');
-  }
-
-  // If suite is nested, only count the root suite
-  if (!suite.parentSuite) {
-    this.failCount += results.totalCount - results.passedCount;
-    this.expectCount += results.totalCount;
-  }
-};
-
-PrintReporter.prototype.reportSpecResults = function(spec) {
-  if (this.verbose) {
-    this.log('it... ' +
-      spec.description + ': ' + (spec.results().passed() ? 'pass' : 'fail'));
-  }
-
-  var self = this;
-  var results = spec.results();
-
-  this.specCount += 1;
-
-  if (results.skipped)
-    this.skipCount += 1;
-
-  results.getItems().forEach(function(result) {
-    if (result.type == 'log') {
-      self.log(result.toString());
-    } else if (result.type == 'expect' && result.passed && !result.passed()) {
-      var ppActual = jasmine.pp(result.actual);
-      var ppExpected = jasmine.pp(result.expected);
-
-      var colorDiff = highlightDifferences(ppActual, ppExpected);
-
-      var message = result.message;
-      message = message.replace(ppActual, colorDiff.a);
-      message = message.replace(ppExpected, colorDiff.b);
-
-      self.log(message);
-      if (result.trace.stack) {
-        self.log();
-        result.trace.stack.split('\n').forEach(function(stackFrame) {
-          if (stackFrame.indexOf('/jasmine/lib/jasmine-core') > -1) {
-            return;
-          }
-          if (this.rootDirectory) {
-            stackFrame = stackFrame.replace(this.rootDirectory + '/', '');
-          }
-          self.log('  ' + stackFrame);
-        }.bind(this));
-      }
-    }
-  });
-};
-
-PrintReporter.prototype.log = function(str) {
-  if (!this._didSpecName) {
-    console.log('');
-    console.log(
-      this._spec.suite.description + ': it ' + this._spec.description);
-    this._didSpecName = true;
-  }
-  console.log(str || '');
-};
diff --git a/vendor/jasmine/ReporterView.js b/vendor/jasmine/ReporterView.js
deleted file mode 100644
index 21790dfd5a4..00000000000
--- a/vendor/jasmine/ReporterView.js
+++ /dev/null
@@ -1,166 +0,0 @@
-var jasmine = require("jasmine");
-
-jasmine.HtmlReporter.ReporterView = function(dom) {
-  this.startedAt = new Date();
-  this.runningSpecCount = 0;
-  this.completeSpecCount = 0;
-  this.passedCount = 0;
-  this.failedCount = 0;
-  this.skippedCount = 0;
-
-  this.createResultsMenu = function() {
-    this.resultsMenu = this.createDom('span', {className: 'resultsMenu bar'},
-      this.summaryMenuItem = this.createDom('a', {className: 'summaryMenuItem', href: "#"}, '0 specs'),
-      ' | ',
-      this.detailsMenuItem = this.createDom('a', {className: 'detailsMenuItem', href: "#"}, '0 failing'));
-
-    this.summaryMenuItem.onclick = function() {
-      dom.reporter.className = dom.reporter.className.replace(/ showDetails/g, '');
-    };
-
-    this.detailsMenuItem.onclick = function() {
-      showDetails();
-    };
-  };
-
-  this.addSpecs = function(specs, specFilter) {
-    this.totalSpecCount = specs.length;
-
-    this.views = {
-      specs: {},
-      suites: {}
-    };
-
-    for (var i = 0; i < specs.length; i++) {
-      var spec = specs[i];
-      this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom, this.views);
-      if (specFilter(spec)) {
-        this.runningSpecCount++;
-      }
-    }
-  };
-
-  this.specComplete = function(spec) {
-    this.completeSpecCount++;
-
-    if (isUndefined(this.views.specs[spec.id])) {
-      this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom);
-    }
-
-    var specView = this.views.specs[spec.id];
-
-    switch (specView.status()) {
-      case 'passed':
-        this.passedCount++;
-        break;
-
-      case 'failed':
-        this.failedCount++;
-        break;
-
-      case 'skipped':
-        this.skippedCount++;
-        break;
-    }
-
-    specView.refresh();
-    this.refresh();
-  };
-
-  this.suiteComplete = function(suite) {
-    var suiteView = this.views.suites[suite.id];
-    if (isUndefined(suiteView)) {
-      return;
-    }
-    suiteView.refresh();
-  };
-
-  this.refresh = function() {
-
-    if (isUndefined(this.resultsMenu)) {
-      this.createResultsMenu();
-    }
-
-    // currently running UI
-    if (isUndefined(this.runningAlert)) {
-      this.runningAlert = this.createDom('a', { href: jasmine.HtmlReporter.sectionLink(), className: "runningAlert bar" });
-      dom.alert.appendChild(this.runningAlert);
-    }
-    this.runningAlert.innerHTML = "Running " + this.completeSpecCount + " of " + specPluralizedFor(this.totalSpecCount);
-
-    // skipped specs UI
-    if (isUndefined(this.skippedAlert)) {
-      this.skippedAlert = this.createDom('a', { href: jasmine.HtmlReporter.sectionLink(), className: "skippedAlert bar" });
-    }
-
-    this.skippedAlert.innerHTML = "Skipping " + this.skippedCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all";
-
-    if (this.skippedCount === 1 && isDefined(dom.alert)) {
-      dom.alert.appendChild(this.skippedAlert);
-    }
-
-    // passing specs UI
-    if (isUndefined(this.passedAlert)) {
-      this.passedAlert = this.createDom('span', { href: jasmine.HtmlReporter.sectionLink(), className: "passingAlert bar" });
-    }
-    this.passedAlert.innerHTML = "Passing " + specPluralizedFor(this.passedCount);
-
-    // failing specs UI
-    if (isUndefined(this.failedAlert)) {
-      this.failedAlert = this.createDom('span', {href: "?", className: "failingAlert bar"});
-    }
-    this.failedAlert.innerHTML = "Failing " + specPluralizedFor(this.failedCount);
-
-    if (this.failedCount === 1 && isDefined(dom.alert)) {
-      dom.alert.appendChild(this.failedAlert);
-      dom.alert.appendChild(this.resultsMenu);
-    }
-
-    // summary info
-    this.summaryMenuItem.innerHTML = "" + specPluralizedFor(this.runningSpecCount);
-    this.detailsMenuItem.innerHTML = "" + this.failedCount + " failing";
-  };
-
-  this.complete = function() {
-    dom.alert.removeChild(this.runningAlert);
-
-    this.skippedAlert.innerHTML = "Ran " + this.runningSpecCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all";
-
-    if (this.failedCount === 0) {
-      dom.alert.appendChild(this.createDom('span', {className: 'passingAlert bar'}, "Passing " + specPluralizedFor(this.passedCount)));
-    } else {
-      showDetails();
-    }
-
-    dom.banner.appendChild(this.createDom('span', {className: 'duration'}, "finished in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s"));
-  };
-
-  return this;
-
-  function showDetails() {
-    if (dom.reporter.className.search(/showDetails/) === -1) {
-      dom.reporter.className += " showDetails";
-    }
-  }
-
-  function isUndefined(obj) {
-    return typeof obj === 'undefined';
-  }
-
-  function isDefined(obj) {
-    return !isUndefined(obj);
-  }
-
-  function specPluralizedFor(count) {
-    var str = count + " spec";
-    if (count > 1) {
-      str += "s"
-    }
-    return str;
-  }
-
-};
-
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.ReporterView);
-
-
diff --git a/vendor/jasmine/SpecView.js b/vendor/jasmine/SpecView.js
deleted file mode 100644
index 8580bd2a59e..00000000000
--- a/vendor/jasmine/SpecView.js
+++ /dev/null
@@ -1,81 +0,0 @@
-var jasmine = require("./jasmine");
-
-jasmine.HtmlReporter.SpecView = function(spec, dom, views) {
-  this.spec = spec;
-  this.dom = dom;
-  this.views = views;
-
-  this.symbol = this.createDom('li', { className: 'pending' });
-  this.dom.symbolSummary.appendChild(this.symbol);
-
-  this.summary = this.createDom('div', { className: 'specSummary' },
-    this.createDom('a', {
-      className: 'description',
-      href: jasmine.HtmlReporter.sectionLink(this.spec.getFullName()),
-      title: this.spec.getFullName()
-    }, this.spec.description)
-  );
-
-  this.detail = this.createDom('div', { className: 'specDetail' },
-      this.createDom('a', {
-        className: 'description',
-        href: '?spec=' + encodeURIComponent(this.spec.getFullName()),
-        title: this.spec.getFullName()
-      }, this.spec.getFullName())
-  );
-};
-
-jasmine.HtmlReporter.SpecView.prototype.status = function() {
-  return this.getSpecStatus(this.spec);
-};
-
-jasmine.HtmlReporter.SpecView.prototype.refresh = function() {
-  this.symbol.className = this.status();
-
-  switch (this.status()) {
-    case 'skipped':
-      break;
-
-    case 'passed':
-      this.appendSummaryToSuiteDiv();
-      break;
-
-    case 'failed':
-      this.appendSummaryToSuiteDiv();
-      this.appendFailureDetail();
-      break;
-  }
-};
-
-jasmine.HtmlReporter.SpecView.prototype.appendSummaryToSuiteDiv = function() {
-  this.summary.className += ' ' + this.status();
-  this.appendToSummary(this.spec, this.summary);
-};
-
-jasmine.HtmlReporter.SpecView.prototype.appendFailureDetail = function() {
-  this.detail.className += ' ' + this.status();
-
-  var resultItems = this.spec.results().getItems();
-  var messagesDiv = this.createDom('div', { className: 'messages' });
-
-  for (var i = 0; i < resultItems.length; i++) {
-    var result = resultItems[i];
-
-    if (result.type == 'log') {
-      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
-    } else if (result.type == 'expect' && result.passed && !result.passed()) {
-      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
-
-      if (result.trace.stack) {
-        messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
-      }
-    }
-  }
-
-  if (messagesDiv.childNodes.length > 0) {
-    this.detail.appendChild(messagesDiv);
-    this.dom.details.appendChild(this.detail);
-  }
-};
-
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SpecView);
\ No newline at end of file
diff --git a/vendor/jasmine/SuiteView.js b/vendor/jasmine/SuiteView.js
deleted file mode 100644
index 917609e5f56..00000000000
--- a/vendor/jasmine/SuiteView.js
+++ /dev/null
@@ -1,24 +0,0 @@
-var jasmine = require("./jasmine");
-
-jasmine.HtmlReporter.SuiteView = function(suite, dom, views) {
-  this.suite = suite;
-  this.dom = dom;
-  this.views = views;
-
-  this.element = this.createDom('div', { className: 'suite' },
-    this.createDom('a', { className: 'description', href: jasmine.HtmlReporter.sectionLink(this.suite.getFullName()) }, this.suite.description)
-  );
-
-  this.appendToSummary(this.suite, this.element);
-};
-
-jasmine.HtmlReporter.SuiteView.prototype.status = function() {
-  return this.getSpecStatus(this.suite);
-};
-
-jasmine.HtmlReporter.SuiteView.prototype.refresh = function() {
-  this.element.className += " " + this.status();
-};
-
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SuiteView);
-
diff --git a/vendor/jasmine/all.js b/vendor/jasmine/all.js
deleted file mode 100644
index 2efe39c5143..00000000000
--- a/vendor/jasmine/all.js
+++ /dev/null
@@ -1,38 +0,0 @@
-require("./phantom");
-require("./console");
-
-// TODO Also bundle jasmine.css here.
-var jasmine = require("./jasmine");
-require("./jasmine-html");
-require("./jasmine-support");
-
-require("./HtmlReporter");
-require("./PrintReporter");
-require("./ReporterView");
-require("./SpecView");
-require("./SuiteView");
-
-var env = jasmine.getEnv();
-env.addReporter(new jasmine.HtmlReporter);
-env.addReporter(new jasmine.PrintReporter);
-
-function exposeFrom(obj) {
-  obj.spyOn = jasmine.spyOn;
-  obj.it = jasmine.it;
-  obj.xit = jasmine.xit;
-  obj.expect = jasmine.expect;
-  obj.runs = jasmine.runs;
-  obj.waits = jasmine.waits;
-  obj.waitsFor = jasmine.waitsFor;
-  obj.beforeEach = jasmine.beforeEach;
-  obj.afterEach = jasmine.afterEach;
-  obj.describe = jasmine.describe;
-  obj.xdescribe = jasmine.xdescribe;
-  obj.jasmine = jasmine;
-  return obj;
-}
-jasmine.exposeFrom = exposeFrom;
-var global = Function("return this")();
-exposeFrom(global);
-
-module.exports = jasmine;
diff --git a/vendor/jasmine/console.js b/vendor/jasmine/console.js
deleted file mode 100644
index 9053e8d90e8..00000000000
--- a/vendor/jasmine/console.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This module allows interception of console.* method calls, so that
- * listeners other than the native console object can consume logged
- * messages.
- */
-
-var global = Function("return this")();
-var Ap = Array.prototype;
-var slice = Ap.slice;
-
-var nativeConsole;
-if ("console" in global) {
-    var gc = global.console;
-    try { delete global.console } catch (ignored) {}
-    nativeConsole = global.console || gc;
-    global.console = gc;
-}
-
-// Provide a reliable console interface in all browsers.
-global.console = exports;
-
-function makeLogger(method) {
-    var logger = exports[method] = function() {
-        var args = slice.call(arguments);
-        listeners.forEach(function(listener) {
-            listener(method, args, logger);
-        });
-    };
-}
-
-makeLogger("info");
-makeLogger("log");
-makeLogger("debug");
-makeLogger("warn");
-makeLogger("error");
-makeLogger("dir");
-makeLogger("dirxml");
-makeLogger("trace");
-makeLogger("assert");
-makeLogger("count");
-makeLogger("markTimeline");
-makeLogger("profile");
-makeLogger("profileEnd");
-makeLogger("time");
-makeLogger("timeEnd");
-makeLogger("timeStamp");
-makeLogger("group");
-makeLogger("groupCollapsed");
-makeLogger("groupEnd");
-makeLogger("clear");
-
-var listeners = [];
-function addListener(listener) {
-    listeners.push(listener);
-}
-exports.addListener = addListener
-
-function clean(arg) {
-    if (typeof arg === "string") {
-        // Remove any xterm-color escape sequences.
-        // TODO Display colors in console if possible.
-        arg = arg.replace(/\033\[\d+m/g, "");
-    }
-    return arg;
-}
-
-if (nativeConsole) {
-    // If present, the native console object becomes a listener just like
-    // any other.
-    addListener(function(method, args) {
-        var method = nativeConsole[method];
-        if (method) {
-            method.apply(nativeConsole, args.map(clean));
-        } else {
-            // Ignore this call.
-        }
-    });
-}
diff --git a/vendor/jasmine/diff.js b/vendor/jasmine/diff.js
deleted file mode 100644
index 8cab52c2a68..00000000000
--- a/vendor/jasmine/diff.js
+++ /dev/null
@@ -1,349 +0,0 @@
-/* See LICENSE file for terms of use */
-
-/*
- * Text diff implementation.
- * 
- * This library supports the following APIS:
- * JsDiff.diffChars: Character by character diff
- * JsDiff.diffWords: Word (as defined by \b regex) diff which ignores whitespace
- * JsDiff.diffLines: Line based diff
- * 
- * JsDiff.diffCss: Diff targeted at CSS content
- * 
- * These methods are based on the implementation proposed in
- * "An O(ND) Difference Algorithm and its Variations" (Myers, 1986).
- * http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927
- */
-var JsDiff = (function() {
-  function clonePath(path) {
-    return { newPos: path.newPos, components: path.components.slice(0) };
-  }
-  function removeEmpty(array) {
-    var ret = [];
-    for (var i = 0; i < array.length; i++) {
-      if (array[i]) {
-        ret.push(array[i]);
-      }
-    }
-    return ret;
-  }
-  function escapeHTML(s) {
-    var n = s;
-    n = n.replace(/&/g, "&amp;");
-    n = n.replace(/</g, "&lt;");
-    n = n.replace(/>/g, "&gt;");
-    n = n.replace(/"/g, "&quot;");
-
-    return n;
-  }
-
-  var fbDiff = function(ignoreWhitespace) {
-    this.ignoreWhitespace = ignoreWhitespace;
-  };
-  fbDiff.prototype = {
-      diff: function(oldString, newString) {
-        // Handle the identity case (this is due to unrolling editLength == 0
-        if (newString == oldString) {
-          return [{ value: newString }];
-        }
-        if (!newString) {
-          return [{ value: oldString, removed: true }];
-        }
-        if (!oldString) {
-          return [{ value: newString, added: true }];
-        }
-
-        newString = this.tokenize(newString);
-        oldString = this.tokenize(oldString);
-
-        var newLen = newString.length, oldLen = oldString.length;
-        var maxEditLength = newLen + oldLen;
-        var bestPath = [{ newPos: -1, components: [] }];
-
-        // Seed editLength = 0
-        var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);
-        if (bestPath[0].newPos+1 >= newLen && oldPos+1 >= oldLen) {
-          return bestPath[0].components;
-        }
-
-        for (var editLength = 1; editLength <= maxEditLength; editLength++) {
-          for (var diagonalPath = -1*editLength; diagonalPath <= editLength; diagonalPath+=2) {
-            var basePath;
-            var addPath = bestPath[diagonalPath-1],
-                removePath = bestPath[diagonalPath+1];
-            oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
-            if (addPath) {
-              // No one else is going to attempt to use this value, clear it
-              bestPath[diagonalPath-1] = undefined;
-            }
-
-            var canAdd = addPath && addPath.newPos+1 < newLen;
-            var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;
-            if (!canAdd && !canRemove) {
-              bestPath[diagonalPath] = undefined;
-              continue;
-            }
-
-            // Select the diagonal that we want to branch from. We select the prior
-            // path whose position in the new string is the farthest from the origin
-            // and does not pass the bounds of the diff graph
-            if (!canAdd || (canRemove && addPath.newPos < removePath.newPos)) {
-              basePath = clonePath(removePath);
-              this.pushComponent(basePath.components, oldString[oldPos], undefined, true);
-            } else {
-              basePath = clonePath(addPath);
-              basePath.newPos++;
-              this.pushComponent(basePath.components, newString[basePath.newPos], true, undefined);
-            }
-
-            var oldPos = this.extractCommon(basePath, newString, oldString, diagonalPath);
-
-            if (basePath.newPos+1 >= newLen && oldPos+1 >= oldLen) {
-              return basePath.components;
-            } else {
-              bestPath[diagonalPath] = basePath;
-            }
-          }
-        }
-      },
-
-      pushComponent: function(components, value, added, removed) {
-        var last = components[components.length-1];
-        if (last && last.added === added && last.removed === removed) {
-          // We need to clone here as the component clone operation is just
-          // as shallow array clone
-          components[components.length-1] =
-            {value: this.join(last.value, value), added: added, removed: removed };
-        } else {
-          components.push({value: value, added: added, removed: removed });
-        }
-      },
-      extractCommon: function(basePath, newString, oldString, diagonalPath) {
-        var newLen = newString.length,
-            oldLen = oldString.length,
-            newPos = basePath.newPos,
-            oldPos = newPos - diagonalPath;
-        while (newPos+1 < newLen && oldPos+1 < oldLen && this.equals(newString[newPos+1], oldString[oldPos+1])) {
-          newPos++;
-          oldPos++;
-
-          this.pushComponent(basePath.components, newString[newPos], undefined, undefined);
-        }
-        basePath.newPos = newPos;
-        return oldPos;
-      },
-
-      equals: function(left, right) {
-        var reWhitespace = /\S/;
-        if (this.ignoreWhitespace && !reWhitespace.test(left) && !reWhitespace.test(right)) {
-          return true;
-        } else {
-          return left == right;
-        }
-      },
-      join: function(left, right) {
-        return left + right;
-      },
-      tokenize: function(value) {
-        return value;
-      }
-  };
-
-  var CharDiff = new fbDiff();
-
-  var WordDiff = new fbDiff(true);
-  WordDiff.tokenize = function(value) {
-    return removeEmpty(value.split(/(\s+|\b)/));
-  };
-
-  var CssDiff = new fbDiff(true);
-  CssDiff.tokenize = function(value) {
-    return removeEmpty(value.split(/([{}:;,]|\s+)/));
-  };
-
-  var LineDiff = new fbDiff();
-  LineDiff.tokenize = function(value) {
-    return value.split(/^/m);
-  };
-
-  return {
-    diffChars: function(oldStr, newStr) { return CharDiff.diff(oldStr, newStr); },
-    diffWords: function(oldStr, newStr) { return WordDiff.diff(oldStr, newStr); },
-    diffLines: function(oldStr, newStr) { return LineDiff.diff(oldStr, newStr); },
-
-    diffCss: function(oldStr, newStr) { return CssDiff.diff(oldStr, newStr); },
-
-    createPatch: function(fileName, oldStr, newStr, oldHeader, newHeader) {
-      var ret = [];
-
-      ret.push("Index: " + fileName);
-      ret.push("===================================================================");
-      ret.push("--- " + fileName + (typeof oldHeader === "undefined" ? "" : "\t" + oldHeader));
-      ret.push("+++ " + fileName + (typeof newHeader === "undefined" ? "" : "\t" + newHeader));
-
-      var diff = LineDiff.diff(oldStr, newStr);
-      if (!diff[diff.length-1].value) {
-        diff.pop();   // Remove trailing newline add
-      }
-      diff.push({value: "", lines: []});   // Append an empty value to make cleanup easier
-
-      function contextLines(lines) {
-        return lines.map(function(entry) { return ' ' + entry; });
-      }
-      function eofNL(curRange, i, current) {
-        var last = diff[diff.length-2],
-            isLast = i === diff.length-2,
-            isLastOfType = i === diff.length-3 && (current.added !== last.added || current.removed !== last.removed);
-
-        // Figure out if this is the last line for the given file and missing NL
-        if (!/\n$/.test(current.value) && (isLast || isLastOfType)) {
-          curRange.push('\\ No newline at end of file');
-        }
-      }
-
-      var oldRangeStart = 0, newRangeStart = 0, curRange = [],
-          oldLine = 1, newLine = 1;
-      for (var i = 0; i < diff.length; i++) {
-        var current = diff[i],
-            lines = current.lines || current.value.replace(/\n$/, "").split("\n");
-        current.lines = lines;
-
-        if (current.added || current.removed) {
-          if (!oldRangeStart) {
-            var prev = diff[i-1];
-            oldRangeStart = oldLine;
-            newRangeStart = newLine;
-
-            if (prev) {
-              curRange = contextLines(prev.lines.slice(-4));
-              oldRangeStart -= curRange.length;
-              newRangeStart -= curRange.length;
-            }
-          }
-          curRange.push.apply(curRange, lines.map(function(entry) { return (current.added?"+":"-") + entry; }));
-          eofNL(curRange, i, current);
-
-          if (current.added) {
-            newLine += lines.length;
-          } else {
-            oldLine += lines.length;
-          }
-        } else {
-          if (oldRangeStart) {
-            // Close out any changes that have been output (or join overlapping)
-            if (lines.length <= 8 && i < diff.length-2) {
-              // Overlapping
-              curRange.push.apply(curRange, contextLines(lines));
-            } else {
-              // end the range and output
-              var contextSize = Math.min(lines.length, 4);
-              ret.push(
-                  "@@ -" + oldRangeStart + "," + (oldLine-oldRangeStart+contextSize)
-                  + " +" + newRangeStart + "," + (newLine-newRangeStart+contextSize)
-                  + " @@");
-              ret.push.apply(ret, curRange);
-              ret.push.apply(ret, contextLines(lines.slice(0, contextSize)));
-              if (lines.length <= 4) {
-                eofNL(ret, i, current);
-              }
-
-              oldRangeStart = 0;  newRangeStart = 0; curRange = [];
-            }
-          }
-          oldLine += lines.length;
-          newLine += lines.length;
-        }
-      }
-
-      return ret.join('\n') + '\n';
-    },
-
-    applyPatch: function(oldStr, uniDiff) {
-      var diffstr = uniDiff.split("\n");
-      var diff = [];
-      var remEOFNL = false,
-          addEOFNL = false;
-
-      for (var i = (diffstr[0][0]=="I"?4:0); i < diffstr.length; i++) {
-        if(diffstr[i][0] == "@") {
-          var meh = diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);
-          diff.unshift({
-            start:meh[3],
-            oldlength:meh[2],
-            oldlines:[],
-            newlength:meh[4],
-            newlines:[]
-          });
-        } else if(diffstr[i][0] == '+') {
-          diff[0].newlines.push(diffstr[i].substr(1));
-        } else if(diffstr[i][0] == '-') {
-          diff[0].oldlines.push(diffstr[i].substr(1));
-        } else if(diffstr[i][0] == ' ') {
-          diff[0].newlines.push(diffstr[i].substr(1));
-          diff[0].oldlines.push(diffstr[i].substr(1));
-        } else if(diffstr[i][0] == '\\') {
-          if (diffstr[i-1][0] == '+') {
-            remEOFNL = true;
-          } else if(diffstr[i-1][0] == '-') {
-            addEOFNL = true;
-          }
-        }
-      }
-
-      var str = oldStr.split("\n");
-      for (var i = diff.length - 1; i >= 0; i--) {
-        var d = diff[i];
-        for (var j = 0; j < d.oldlength; j++) {
-          if(str[d.start-1+j] != d.oldlines[j]) {
-            return false;
-          }
-        }
-        Array.prototype.splice.apply(str,[d.start-1,+d.oldlength].concat(d.newlines));
-      }
-
-      if (remEOFNL) {
-        while (!str[str.length-1]) {
-          str.pop();
-        }
-      } else if (addEOFNL) {
-        str.push('');
-      }
-      return str.join('\n');
-    },
-
-    convertChangesToXML: function(changes){
-      var ret = [];
-      for ( var i = 0; i < changes.length; i++) {
-        var change = changes[i];
-        if (change.added) {
-          ret.push("<ins>");
-        } else if (change.removed) {
-          ret.push("<del>");
-        }
-
-        ret.push(escapeHTML(change.value));
-
-        if (change.added) {
-          ret.push("</ins>");
-        } else if (change.removed) {
-          ret.push("</del>");
-        }
-      }
-      return ret.join("");
-    },
-
-    // See: http://code.google.com/p/google-diff-match-patch/wiki/API
-    convertChangesToDMP: function(changes){
-      var ret = [], change;
-      for ( var i = 0; i < changes.length; i++) {
-        change = changes[i];
-        ret.push([(change.added ? 1 : change.removed ? -1 : 0), change.value]);
-      }
-      return ret;
-    }
-  };
-})();
-
-if (typeof module !== "undefined") {
-    module.exports = JsDiff;
-}
diff --git a/vendor/jasmine/jasmine-html.js b/vendor/jasmine/jasmine-html.js
deleted file mode 100644
index 543d56963eb..00000000000
--- a/vendor/jasmine/jasmine-html.js
+++ /dev/null
@@ -1,681 +0,0 @@
-jasmine.HtmlReporterHelpers = {};
-
-jasmine.HtmlReporterHelpers.createDom = function(type, attrs, childrenVarArgs) {
-  var el = document.createElement(type);
-
-  for (var i = 2; i < arguments.length; i++) {
-    var child = arguments[i];
-
-    if (typeof child === 'string') {
-      el.appendChild(document.createTextNode(child));
-    } else {
-      if (child) {
-        el.appendChild(child);
-      }
-    }
-  }
-
-  for (var attr in attrs) {
-    if (attr == "className") {
-      el[attr] = attrs[attr];
-    } else {
-      el.setAttribute(attr, attrs[attr]);
-    }
-  }
-
-  return el;
-};
-
-jasmine.HtmlReporterHelpers.getSpecStatus = function(child) {
-  var results = child.results();
-  var status = results.passed() ? 'passed' : 'failed';
-  if (results.skipped) {
-    status = 'skipped';
-  }
-
-  return status;
-};
-
-jasmine.HtmlReporterHelpers.appendToSummary = function(child, childElement) {
-  var parentDiv = this.dom.summary;
-  var parentSuite = (typeof child.parentSuite == 'undefined') ? 'suite' : 'parentSuite';
-  var parent = child[parentSuite];
-
-  if (parent) {
-    if (typeof this.views.suites[parent.id] == 'undefined') {
-      this.views.suites[parent.id] = new jasmine.HtmlReporter.SuiteView(parent, this.dom, this.views);
-    }
-    parentDiv = this.views.suites[parent.id].element;
-  }
-
-  parentDiv.appendChild(childElement);
-};
-
-
-jasmine.HtmlReporterHelpers.addHelpers = function(ctor) {
-  for(var fn in jasmine.HtmlReporterHelpers) {
-    ctor.prototype[fn] = jasmine.HtmlReporterHelpers[fn];
-  }
-};
-
-jasmine.HtmlReporter = function(_doc) {
-  var self = this;
-  var doc = _doc || window.document;
-
-  var reporterView;
-
-  var dom = {};
-
-  // Jasmine Reporter Public Interface
-  self.logRunningSpecs = false;
-
-  self.reportRunnerStarting = function(runner) {
-    var specs = runner.specs() || [];
-
-    if (specs.length == 0) {
-      return;
-    }
-
-    createReporterDom(runner.env.versionString());
-    doc.body.appendChild(dom.reporter);
-    setExceptionHandling();
-
-    reporterView = new jasmine.HtmlReporter.ReporterView(dom);
-    reporterView.addSpecs(specs, self.specFilter);
-  };
-
-  self.reportRunnerResults = function(runner) {
-    reporterView && reporterView.complete();
-  };
-
-  self.reportSuiteResults = function(suite) {
-    reporterView.suiteComplete(suite);
-  };
-
-  self.reportSpecStarting = function(spec) {
-    if (self.logRunningSpecs) {
-      self.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
-    }
-  };
-
-  self.reportSpecResults = function(spec) {
-    reporterView.specComplete(spec);
-  };
-
-  self.log = function() {
-    var console = jasmine.getGlobal().console;
-    if (console && console.log) {
-      if (console.log.apply) {
-        console.log.apply(console, arguments);
-      } else {
-        console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
-      }
-    }
-  };
-
-  self.specFilter = function(spec) {
-    if (!focusedSpecName()) {
-      return true;
-    }
-
-    return spec.getFullName().indexOf(focusedSpecName()) === 0;
-  };
-
-  return self;
-
-  function focusedSpecName() {
-    var specName;
-
-    (function memoizeFocusedSpec() {
-      if (specName) {
-        return;
-      }
-
-      var paramMap = [];
-      var params = jasmine.HtmlReporter.parameters(doc);
-
-      for (var i = 0; i < params.length; i++) {
-        var p = params[i].split('=');
-        paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
-      }
-
-      specName = paramMap.spec;
-    })();
-
-    return specName;
-  }
-
-  function createReporterDom(version) {
-    dom.reporter = self.createDom('div', { id: 'HTMLReporter', className: 'jasmine_reporter' },
-      dom.banner = self.createDom('div', { className: 'banner' },
-        self.createDom('span', { className: 'title' }, "Jasmine "),
-        self.createDom('span', { className: 'version' }, version)),
-
-      dom.symbolSummary = self.createDom('ul', {className: 'symbolSummary'}),
-      dom.alert = self.createDom('div', {className: 'alert'},
-        self.createDom('span', { className: 'exceptions' },
-          self.createDom('label', { className: 'label', 'for': 'no_try_catch' }, 'No try/catch'),
-          self.createDom('input', { id: 'no_try_catch', type: 'checkbox' }))),
-      dom.results = self.createDom('div', {className: 'results'},
-        dom.summary = self.createDom('div', { className: 'summary' }),
-        dom.details = self.createDom('div', { id: 'details' }))
-    );
-  }
-
-  function noTryCatch() {
-    return window.location.search.match(/catch=false/);
-  }
-
-  function searchWithCatch() {
-    var params = jasmine.HtmlReporter.parameters(window.document);
-    var removed = false;
-    var i = 0;
-
-    while (!removed && i < params.length) {
-      if (params[i].match(/catch=/)) {
-        params.splice(i, 1);
-        removed = true;
-      }
-      i++;
-    }
-    if (jasmine.CATCH_EXCEPTIONS) {
-      params.push("catch=false");
-    }
-
-    return params.join("&");
-  }
-
-  function setExceptionHandling() {
-    var chxCatch = document.getElementById('no_try_catch');
-
-    if (noTryCatch()) {
-      chxCatch.setAttribute('checked', true);
-      jasmine.CATCH_EXCEPTIONS = false;
-    }
-    chxCatch.onclick = function() {
-      window.location.search = searchWithCatch();
-    };
-  }
-};
-jasmine.HtmlReporter.parameters = function(doc) {
-  var paramStr = doc.location.search.substring(1);
-  var params = [];
-
-  if (paramStr.length > 0) {
-    params = paramStr.split('&');
-  }
-  return params;
-}
-jasmine.HtmlReporter.sectionLink = function(sectionName) {
-  var link = '?';
-  var params = [];
-
-  if (sectionName) {
-    params.push('spec=' + encodeURIComponent(sectionName));
-  }
-  if (!jasmine.CATCH_EXCEPTIONS) {
-    params.push("catch=false");
-  }
-  if (params.length > 0) {
-    link += params.join("&");
-  }
-
-  return link;
-};
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter);
-jasmine.HtmlReporter.ReporterView = function(dom) {
-  this.startedAt = new Date();
-  this.runningSpecCount = 0;
-  this.completeSpecCount = 0;
-  this.passedCount = 0;
-  this.failedCount = 0;
-  this.skippedCount = 0;
-
-  this.createResultsMenu = function() {
-    this.resultsMenu = this.createDom('span', {className: 'resultsMenu bar'},
-      this.summaryMenuItem = this.createDom('a', {className: 'summaryMenuItem', href: "#"}, '0 specs'),
-      ' | ',
-      this.detailsMenuItem = this.createDom('a', {className: 'detailsMenuItem', href: "#"}, '0 failing'));
-
-    this.summaryMenuItem.onclick = function() {
-      dom.reporter.className = dom.reporter.className.replace(/ showDetails/g, '');
-    };
-
-    this.detailsMenuItem.onclick = function() {
-      showDetails();
-    };
-  };
-
-  this.addSpecs = function(specs, specFilter) {
-    this.totalSpecCount = specs.length;
-
-    this.views = {
-      specs: {},
-      suites: {}
-    };
-
-    for (var i = 0; i < specs.length; i++) {
-      var spec = specs[i];
-      this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom, this.views);
-      if (specFilter(spec)) {
-        this.runningSpecCount++;
-      }
-    }
-  };
-
-  this.specComplete = function(spec) {
-    this.completeSpecCount++;
-
-    if (isUndefined(this.views.specs[spec.id])) {
-      this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom);
-    }
-
-    var specView = this.views.specs[spec.id];
-
-    switch (specView.status()) {
-      case 'passed':
-        this.passedCount++;
-        break;
-
-      case 'failed':
-        this.failedCount++;
-        break;
-
-      case 'skipped':
-        this.skippedCount++;
-        break;
-    }
-
-    specView.refresh();
-    this.refresh();
-  };
-
-  this.suiteComplete = function(suite) {
-    var suiteView = this.views.suites[suite.id];
-    if (isUndefined(suiteView)) {
-      return;
-    }
-    suiteView.refresh();
-  };
-
-  this.refresh = function() {
-
-    if (isUndefined(this.resultsMenu)) {
-      this.createResultsMenu();
-    }
-
-    // currently running UI
-    if (isUndefined(this.runningAlert)) {
-      this.runningAlert = this.createDom('a', { href: jasmine.HtmlReporter.sectionLink(), className: "runningAlert bar" });
-      dom.alert.appendChild(this.runningAlert);
-    }
-    this.runningAlert.innerHTML = "Running " + this.completeSpecCount + " of " + specPluralizedFor(this.totalSpecCount);
-
-    // skipped specs UI
-    if (isUndefined(this.skippedAlert)) {
-      this.skippedAlert = this.createDom('a', { href: jasmine.HtmlReporter.sectionLink(), className: "skippedAlert bar" });
-    }
-
-    this.skippedAlert.innerHTML = "Skipping " + this.skippedCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all";
-
-    if (this.skippedCount === 1 && isDefined(dom.alert)) {
-      dom.alert.appendChild(this.skippedAlert);
-    }
-
-    // passing specs UI
-    if (isUndefined(this.passedAlert)) {
-      this.passedAlert = this.createDom('span', { href: jasmine.HtmlReporter.sectionLink(), className: "passingAlert bar" });
-    }
-    this.passedAlert.innerHTML = "Passing " + specPluralizedFor(this.passedCount);
-
-    // failing specs UI
-    if (isUndefined(this.failedAlert)) {
-      this.failedAlert = this.createDom('span', {href: "?", className: "failingAlert bar"});
-    }
-    this.failedAlert.innerHTML = "Failing " + specPluralizedFor(this.failedCount);
-
-    if (this.failedCount === 1 && isDefined(dom.alert)) {
-      dom.alert.appendChild(this.failedAlert);
-      dom.alert.appendChild(this.resultsMenu);
-    }
-
-    // summary info
-    this.summaryMenuItem.innerHTML = "" + specPluralizedFor(this.runningSpecCount);
-    this.detailsMenuItem.innerHTML = "" + this.failedCount + " failing";
-  };
-
-  this.complete = function() {
-    dom.alert.removeChild(this.runningAlert);
-
-    this.skippedAlert.innerHTML = "Ran " + this.runningSpecCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all";
-
-    if (this.failedCount === 0) {
-      dom.alert.appendChild(this.createDom('span', {className: 'passingAlert bar'}, "Passing " + specPluralizedFor(this.passedCount)));
-    } else {
-      showDetails();
-    }
-
-    dom.banner.appendChild(this.createDom('span', {className: 'duration'}, "finished in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s"));
-  };
-
-  return this;
-
-  function showDetails() {
-    if (dom.reporter.className.search(/showDetails/) === -1) {
-      dom.reporter.className += " showDetails";
-    }
-  }
-
-  function isUndefined(obj) {
-    return typeof obj === 'undefined';
-  }
-
-  function isDefined(obj) {
-    return !isUndefined(obj);
-  }
-
-  function specPluralizedFor(count) {
-    var str = count + " spec";
-    if (count > 1) {
-      str += "s"
-    }
-    return str;
-  }
-
-};
-
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.ReporterView);
-
-
-jasmine.HtmlReporter.SpecView = function(spec, dom, views) {
-  this.spec = spec;
-  this.dom = dom;
-  this.views = views;
-
-  this.symbol = this.createDom('li', { className: 'pending' });
-  this.dom.symbolSummary.appendChild(this.symbol);
-
-  this.summary = this.createDom('div', { className: 'specSummary' },
-    this.createDom('a', {
-      className: 'description',
-      href: jasmine.HtmlReporter.sectionLink(this.spec.getFullName()),
-      title: this.spec.getFullName()
-    }, this.spec.description)
-  );
-
-  this.detail = this.createDom('div', { className: 'specDetail' },
-      this.createDom('a', {
-        className: 'description',
-        href: '?spec=' + encodeURIComponent(this.spec.getFullName()),
-        title: this.spec.getFullName()
-      }, this.spec.getFullName())
-  );
-};
-
-jasmine.HtmlReporter.SpecView.prototype.status = function() {
-  return this.getSpecStatus(this.spec);
-};
-
-jasmine.HtmlReporter.SpecView.prototype.refresh = function() {
-  this.symbol.className = this.status();
-
-  switch (this.status()) {
-    case 'skipped':
-      break;
-
-    case 'passed':
-      this.appendSummaryToSuiteDiv();
-      break;
-
-    case 'failed':
-      this.appendSummaryToSuiteDiv();
-      this.appendFailureDetail();
-      break;
-  }
-};
-
-jasmine.HtmlReporter.SpecView.prototype.appendSummaryToSuiteDiv = function() {
-  this.summary.className += ' ' + this.status();
-  this.appendToSummary(this.spec, this.summary);
-};
-
-jasmine.HtmlReporter.SpecView.prototype.appendFailureDetail = function() {
-  this.detail.className += ' ' + this.status();
-
-  var resultItems = this.spec.results().getItems();
-  var messagesDiv = this.createDom('div', { className: 'messages' });
-
-  for (var i = 0; i < resultItems.length; i++) {
-    var result = resultItems[i];
-
-    if (result.type == 'log') {
-      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
-    } else if (result.type == 'expect' && result.passed && !result.passed()) {
-      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
-
-      if (result.trace.stack) {
-        messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
-      }
-    }
-  }
-
-  if (messagesDiv.childNodes.length > 0) {
-    this.detail.appendChild(messagesDiv);
-    this.dom.details.appendChild(this.detail);
-  }
-};
-
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SpecView);jasmine.HtmlReporter.SuiteView = function(suite, dom, views) {
-  this.suite = suite;
-  this.dom = dom;
-  this.views = views;
-
-  this.element = this.createDom('div', { className: 'suite' },
-    this.createDom('a', { className: 'description', href: jasmine.HtmlReporter.sectionLink(this.suite.getFullName()) }, this.suite.description)
-  );
-
-  this.appendToSummary(this.suite, this.element);
-};
-
-jasmine.HtmlReporter.SuiteView.prototype.status = function() {
-  return this.getSpecStatus(this.suite);
-};
-
-jasmine.HtmlReporter.SuiteView.prototype.refresh = function() {
-  this.element.className += " " + this.status();
-};
-
-jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SuiteView);
-
-/* @deprecated Use jasmine.HtmlReporter instead
- */
-jasmine.TrivialReporter = function(doc) {
-  this.document = doc || document;
-  this.suiteDivs = {};
-  this.logRunningSpecs = false;
-};
-
-jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) {
-  var el = document.createElement(type);
-
-  for (var i = 2; i < arguments.length; i++) {
-    var child = arguments[i];
-
-    if (typeof child === 'string') {
-      el.appendChild(document.createTextNode(child));
-    } else {
-      if (child) { el.appendChild(child); }
-    }
-  }
-
-  for (var attr in attrs) {
-    if (attr == "className") {
-      el[attr] = attrs[attr];
-    } else {
-      el.setAttribute(attr, attrs[attr]);
-    }
-  }
-
-  return el;
-};
-
-jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) {
-  var showPassed, showSkipped;
-
-  this.outerDiv = this.createDom('div', { id: 'TrivialReporter', className: 'jasmine_reporter' },
-      this.createDom('div', { className: 'banner' },
-        this.createDom('div', { className: 'logo' },
-            this.createDom('span', { className: 'title' }, "Jasmine"),
-            this.createDom('span', { className: 'version' }, runner.env.versionString())),
-        this.createDom('div', { className: 'options' },
-            "Show ",
-            showPassed = this.createDom('input', { id: "__jasmine_TrivialReporter_showPassed__", type: 'checkbox' }),
-            this.createDom('label', { "for": "__jasmine_TrivialReporter_showPassed__" }, " passed "),
-            showSkipped = this.createDom('input', { id: "__jasmine_TrivialReporter_showSkipped__", type: 'checkbox' }),
-            this.createDom('label', { "for": "__jasmine_TrivialReporter_showSkipped__" }, " skipped")
-            )
-          ),
-
-      this.runnerDiv = this.createDom('div', { className: 'runner running' },
-          this.createDom('a', { className: 'run_spec', href: '?' }, "run all"),
-          this.runnerMessageSpan = this.createDom('span', {}, "Running..."),
-          this.finishedAtSpan = this.createDom('span', { className: 'finished-at' }, ""))
-      );
-
-  this.document.body.appendChild(this.outerDiv);
-
-  var suites = runner.suites();
-  for (var i = 0; i < suites.length; i++) {
-    var suite = suites[i];
-    var suiteDiv = this.createDom('div', { className: 'suite' },
-        this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, "run"),
-        this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, suite.description));
-    this.suiteDivs[suite.id] = suiteDiv;
-    var parentDiv = this.outerDiv;
-    if (suite.parentSuite) {
-      parentDiv = this.suiteDivs[suite.parentSuite.id];
-    }
-    parentDiv.appendChild(suiteDiv);
-  }
-
-  this.startedAt = new Date();
-
-  var self = this;
-  showPassed.onclick = function(evt) {
-    if (showPassed.checked) {
-      self.outerDiv.className += ' show-passed';
-    } else {
-      self.outerDiv.className = self.outerDiv.className.replace(/ show-passed/, '');
-    }
-  };
-
-  showSkipped.onclick = function(evt) {
-    if (showSkipped.checked) {
-      self.outerDiv.className += ' show-skipped';
-    } else {
-      self.outerDiv.className = self.outerDiv.className.replace(/ show-skipped/, '');
-    }
-  };
-};
-
-jasmine.TrivialReporter.prototype.reportRunnerResults = function(runner) {
-  var results = runner.results();
-  var className = (results.failedCount > 0) ? "runner failed" : "runner passed";
-  this.runnerDiv.setAttribute("class", className);
-  //do it twice for IE
-  this.runnerDiv.setAttribute("className", className);
-  var specs = runner.specs();
-  var specCount = 0;
-  for (var i = 0; i < specs.length; i++) {
-    if (this.specFilter(specs[i])) {
-      specCount++;
-    }
-  }
-  var message = "" + specCount + " spec" + (specCount == 1 ? "" : "s" ) + ", " + results.failedCount + " failure" + ((results.failedCount == 1) ? "" : "s");
-  message += " in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s";
-  this.runnerMessageSpan.replaceChild(this.createDom('a', { className: 'description', href: '?'}, message), this.runnerMessageSpan.firstChild);
-
-  this.finishedAtSpan.appendChild(document.createTextNode("Finished at " + new Date().toString()));
-};
-
-jasmine.TrivialReporter.prototype.reportSuiteResults = function(suite) {
-  var results = suite.results();
-  var status = results.passed() ? 'passed' : 'failed';
-  if (results.totalCount === 0) { // todo: change this to check results.skipped
-    status = 'skipped';
-  }
-  this.suiteDivs[suite.id].className += " " + status;
-};
-
-jasmine.TrivialReporter.prototype.reportSpecStarting = function(spec) {
-  if (this.logRunningSpecs) {
-    this.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
-  }
-};
-
-jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) {
-  var results = spec.results();
-  var status = results.passed() ? 'passed' : 'failed';
-  if (results.skipped) {
-    status = 'skipped';
-  }
-  var specDiv = this.createDom('div', { className: 'spec '  + status },
-      this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"),
-      this.createDom('a', {
-        className: 'description',
-        href: '?spec=' + encodeURIComponent(spec.getFullName()),
-        title: spec.getFullName()
-      }, spec.description));
-
-
-  var resultItems = results.getItems();
-  var messagesDiv = this.createDom('div', { className: 'messages' });
-  for (var i = 0; i < resultItems.length; i++) {
-    var result = resultItems[i];
-
-    if (result.type == 'log') {
-      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
-    } else if (result.type == 'expect' && result.passed && !result.passed()) {
-      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
-
-      if (result.trace.stack) {
-        messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
-      }
-    }
-  }
-
-  if (messagesDiv.childNodes.length > 0) {
-    specDiv.appendChild(messagesDiv);
-  }
-
-  this.suiteDivs[spec.suite.id].appendChild(specDiv);
-};
-
-jasmine.TrivialReporter.prototype.log = function() {
-  var console = jasmine.getGlobal().console;
-  if (console && console.log) {
-    if (console.log.apply) {
-      console.log.apply(console, arguments);
-    } else {
-      console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
-    }
-  }
-};
-
-jasmine.TrivialReporter.prototype.getLocation = function() {
-  return this.document.location;
-};
-
-jasmine.TrivialReporter.prototype.specFilter = function(spec) {
-  var paramMap = {};
-  var params = this.getLocation().search.substring(1).split('&');
-  for (var i = 0; i < params.length; i++) {
-    var p = params[i].split('=');
-    paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
-  }
-
-  if (!paramMap.spec) {
-    return true;
-  }
-  return spec.getFullName().indexOf(paramMap.spec) === 0;
-};
diff --git a/vendor/jasmine/jasmine-support.js b/vendor/jasmine/jasmine-support.js
deleted file mode 100644
index 6ac80695741..00000000000
--- a/vendor/jasmine/jasmine-support.js
+++ /dev/null
@@ -1,127 +0,0 @@
-if (typeof jasmine == 'undefined') jasmine = require("./jasmine");
-var spec = false; // TODO
-
-// Add some matcher for mock functions
-jasmine.getEnv().beforeEach(function() {
-  this.addMatchers({
-    toBeCalled: function() {
-      if (this.actual.mock === undefined) {
-        throw Error('toBeCalled() should be used on a mock function');
-      }
-      return this.actual.mock.calls.length !== 0;
-    },
-
-    lastCalledWith: function() {
-      if (this.actual.mock === undefined) {
-        throw Error('lastCalledWith() should be used on a mock function');
-      }
-      var calls = this.actual.mock.calls;
-      var args = Array.prototype.slice.call(arguments);
-      return this.env.equals_(calls[calls.length - 1], args);
-    },
-
-    toBeCalledWith: function() {
-      if (this.actual.mock === undefined) {
-        throw Error('toBeCalledWith() should be used on a mock function');
-      }
-      var args = Array.prototype.slice.call(arguments);
-      return this.actual.mock.calls.some(function(call) {
-        return this.env.equals_(call, args);
-      }.bind(this));
-    }
-  });
-});
-
-var _it = jasmine.Env.prototype.it;
-var _xit = jasmine.Env.prototype.xit;
-jasmine.Env.prototype.it = function(desc, func) {
-  // If spec is provided, only run matching specs
-  if (!spec || desc.match(new RegExp(spec, 'i'))) {
-    return _it.call(this, desc, func);
-  } else {
-    return this.xit(desc, func);
-  }
-};
-jasmine.Env.prototype.xit = function(desc, func) {
-  if (typeof func == 'function') {
-    var matches = func.toString().match(/.*\W?expect\(/g);
-    if (matches) {
-      this.reporter.subReporters_[0].skipCount += matches.length;
-      this.reporter.subReporters_[0].totalCount += matches.length;
-    }
-  }
-  return _xit.call(this, desc, func);
-}
-
-// Mainline Jasmine sets __Jasmine_been_here_before__ on each object to detect
-// cycles, but that doesn't work on frozen objects so we use a WeakMap instead.
-// We can only do this if if WeakMap is available, but if WeakMap is
-// unavailable, then objects probably can't be frozen anyway.
-
-if (typeof WeakMap !== "undefined") {
-  var _comparedObjects = new WeakMap;
-
-  jasmine.Env.prototype.compareObjects_ =
-  function(a, b, mismatchKeys, mismatchValues) {
-    if (_comparedObjects.get(a) === b && _comparedObjects.get(b) === a) {
-      return true;
-    }
-    var areArrays = jasmine.isArray_(a) && jasmine.isArray_(b);
-
-    _comparedObjects.set(a, b);
-    _comparedObjects.set(b, a);
-
-    var hasKey = function(obj, keyName) {
-      return obj != null && obj[keyName] !== jasmine.undefined;
-    };
-
-    for (var property in b) {
-      if (areArrays && typeof b[property] == 'function') {
-        continue;
-      }
-      if (!hasKey(a, property) && hasKey(b, property)) {
-        mismatchKeys.push(
-          "expected has key '" + property + "', but missing from actual."
-        );
-      }
-    }
-    for (property in a) {
-      if (areArrays && typeof a[property] == 'function') {
-        continue;
-      }
-      if (!hasKey(b, property) && hasKey(a, property)) {
-        mismatchKeys.push(
-          "expected missing key '" + property + "', but present in actual."
-        );
-      }
-    }
-    for (property in b) {
-      // The only different implementation from the original jasmine
-      if (areArrays &&
-          (typeof a[property] == 'function' ||
-           typeof b[property] == 'function')) {
-        continue;
-      }
-      if (!this.equals_(a[property], b[property], mismatchKeys, mismatchValues))
-      {
-        mismatchValues.push(
-          "'" + property + "' was '" + (b[property] ?
-            jasmine.util.htmlEscape(b[property].toString()) :
-            b[property]) +
-          "' in expected, but was '" + (a[property] ?
-            jasmine.util.htmlEscape(a[property].toString()) :
-            a[property]) + "' in actual."
-        );
-      }
-    }
-
-    if (areArrays &&
-        a.length != b.length) {
-      mismatchValues.push("arrays were not the same length");
-    }
-
-    _comparedObjects["delete"](a);
-    _comparedObjects["delete"](b);
-    return (mismatchKeys.length == 0 && mismatchValues.length == 0);
-  };
-}
diff --git a/vendor/jasmine/jasmine.css b/vendor/jasmine/jasmine.css
deleted file mode 100644
index 8c008dc7221..00000000000
--- a/vendor/jasmine/jasmine.css
+++ /dev/null
@@ -1,82 +0,0 @@
-body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; }
-
-#HTMLReporter { font-size: 11px; font-family: Monaco, "Lucida Console", monospace; line-height: 14px; color: #333333; }
-#HTMLReporter a { text-decoration: none; }
-#HTMLReporter a:hover { text-decoration: underline; }
-#HTMLReporter p, #HTMLReporter h1, #HTMLReporter h2, #HTMLReporter h3, #HTMLReporter h4, #HTMLReporter h5, #HTMLReporter h6 { margin: 0; line-height: 14px; }
-#HTMLReporter .banner, #HTMLReporter .symbolSummary, #HTMLReporter .summary, #HTMLReporter .resultMessage, #HTMLReporter .specDetail .description, #HTMLReporter .alert .bar, #HTMLReporter .stackTrace { padding-left: 9px; padding-right: 9px; }
-#HTMLReporter #jasmine_content { position: fixed; right: 100%; }
-#HTMLReporter .version { color: #aaaaaa; }
-#HTMLReporter .banner { margin-top: 14px; }
-#HTMLReporter .duration { color: #aaaaaa; float: right; }
-#HTMLReporter .symbolSummary { overflow: hidden; *zoom: 1; margin: 14px 0; }
-#HTMLReporter .symbolSummary li { display: block; float: left; height: 7px; width: 14px; margin-bottom: 7px; font-size: 16px; }
-#HTMLReporter .symbolSummary li.passed { font-size: 14px; }
-#HTMLReporter .symbolSummary li.passed:before { color: #5e7d00; content: "\02022"; }
-#HTMLReporter .symbolSummary li.failed { line-height: 9px; }
-#HTMLReporter .symbolSummary li.failed:before { color: #b03911; content: "x"; font-weight: bold; margin-left: -1px; }
-#HTMLReporter .symbolSummary li.skipped { font-size: 14px; }
-#HTMLReporter .symbolSummary li.skipped:before { color: #bababa; content: "\02022"; }
-#HTMLReporter .symbolSummary li.pending { line-height: 11px; }
-#HTMLReporter .symbolSummary li.pending:before { color: #aaaaaa; content: "-"; }
-#HTMLReporter .exceptions { color: #fff; float: right; margin-top: 5px; margin-right: 5px; }
-#HTMLReporter .bar { line-height: 28px; font-size: 14px; display: block; color: #eee; }
-#HTMLReporter .runningAlert { background-color: #666666; }
-#HTMLReporter .skippedAlert { background-color: #aaaaaa; }
-#HTMLReporter .skippedAlert:first-child { background-color: #333333; }
-#HTMLReporter .skippedAlert:hover { text-decoration: none; color: white; text-decoration: underline; }
-#HTMLReporter .passingAlert { background-color: #a6b779; }
-#HTMLReporter .passingAlert:first-child { background-color: #5e7d00; }
-#HTMLReporter .failingAlert { background-color: #cf867e; }
-#HTMLReporter .failingAlert:first-child { background-color: #b03911; }
-#HTMLReporter .results { margin-top: 14px; }
-#HTMLReporter #details { display: none; }
-#HTMLReporter .resultsMenu, #HTMLReporter .resultsMenu a { background-color: #fff; color: #333333; }
-#HTMLReporter.showDetails .summaryMenuItem { font-weight: normal; text-decoration: inherit; }
-#HTMLReporter.showDetails .summaryMenuItem:hover { text-decoration: underline; }
-#HTMLReporter.showDetails .detailsMenuItem { font-weight: bold; text-decoration: underline; }
-#HTMLReporter.showDetails .summary { display: none; }
-#HTMLReporter.showDetails #details { display: block; }
-#HTMLReporter .summaryMenuItem { font-weight: bold; text-decoration: underline; }
-#HTMLReporter .summary { margin-top: 14px; }
-#HTMLReporter .summary .suite .suite, #HTMLReporter .summary .specSummary { margin-left: 14px; }
-#HTMLReporter .summary .specSummary.passed a { color: #5e7d00; }
-#HTMLReporter .summary .specSummary.failed a { color: #b03911; }
-#HTMLReporter .description + .suite { margin-top: 0; }
-#HTMLReporter .suite { margin-top: 14px; }
-#HTMLReporter .suite a { color: #333333; }
-#HTMLReporter #details .specDetail { margin-bottom: 28px; }
-#HTMLReporter #details .specDetail .description { display: block; color: white; background-color: #b03911; }
-#HTMLReporter .resultMessage { padding-top: 14px; color: #333333; }
-#HTMLReporter .resultMessage span.result { display: block; }
-#HTMLReporter .stackTrace { margin: 5px 0 0 0; max-height: 224px; overflow: auto; line-height: 18px; color: #666666; border: 1px solid #ddd; background: white; white-space: pre; }
-
-#TrivialReporter { padding: 8px 13px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; background-color: white; font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; /*.resultMessage {*/ /*white-space: pre;*/ /*}*/ }
-#TrivialReporter a:visited, #TrivialReporter a { color: #303; }
-#TrivialReporter a:hover, #TrivialReporter a:active { color: blue; }
-#TrivialReporter .run_spec { float: right; padding-right: 5px; font-size: .8em; text-decoration: none; }
-#TrivialReporter .banner { color: #303; background-color: #fef; padding: 5px; }
-#TrivialReporter .logo { float: left; font-size: 1.1em; padding-left: 5px; }
-#TrivialReporter .logo .version { font-size: .6em; padding-left: 1em; }
-#TrivialReporter .runner.running { background-color: yellow; }
-#TrivialReporter .options { text-align: right; font-size: .8em; }
-#TrivialReporter .suite { border: 1px outset gray; margin: 5px 0; padding-left: 1em; }
-#TrivialReporter .suite .suite { margin: 5px; }
-#TrivialReporter .suite.passed { background-color: #dfd; }
-#TrivialReporter .suite.failed { background-color: #fdd; }
-#TrivialReporter .spec { margin: 5px; padding-left: 1em; clear: both; }
-#TrivialReporter .spec.failed, #TrivialReporter .spec.passed, #TrivialReporter .spec.skipped { padding-bottom: 5px; border: 1px solid gray; }
-#TrivialReporter .spec.failed { background-color: #fbb; border-color: red; }
-#TrivialReporter .spec.passed { background-color: #bfb; border-color: green; }
-#TrivialReporter .spec.skipped { background-color: #bbb; }
-#TrivialReporter .messages { border-left: 1px dashed gray; padding-left: 1em; padding-right: 1em; }
-#TrivialReporter .passed { background-color: #cfc; display: none; }
-#TrivialReporter .failed { background-color: #fbb; }
-#TrivialReporter .skipped { color: #777; background-color: #eee; display: none; }
-#TrivialReporter .resultMessage span.result { display: block; line-height: 2em; color: black; }
-#TrivialReporter .resultMessage .mismatch { color: black; }
-#TrivialReporter .stackTrace { white-space: pre; font-size: .8em; margin-left: 10px; max-height: 5em; overflow: auto; border: 1px inset red; padding: 1em; background: #eef; }
-#TrivialReporter .finished-at { padding-left: 1em; font-size: .6em; }
-#TrivialReporter.show-passed .passed, #TrivialReporter.show-skipped .skipped { display: block; }
-#TrivialReporter #jasmine_content { position: fixed; right: 100%; }
-#TrivialReporter .runner { border: 1px solid gray; display: block; margin: 5px 0; padding: 2px 0 2px 10px; }
diff --git a/vendor/jasmine/jasmine.js b/vendor/jasmine/jasmine.js
deleted file mode 100644
index 596411280c3..00000000000
--- a/vendor/jasmine/jasmine.js
+++ /dev/null
@@ -1,2600 +0,0 @@
-var isCommonJS = typeof window == "undefined" && typeof exports == "object";
-
-/**
- * Top level namespace for Jasmine, a lightweight JavaScript BDD/spec/testing framework.
- *
- * @namespace
- */
-var jasmine = {};
-if (isCommonJS) exports.jasmine = jasmine;
-/**
- * @private
- */
-jasmine.unimplementedMethod_ = function() {
-  throw new Error("unimplemented method");
-};
-
-/**
- * Use <code>jasmine.undefined</code> instead of <code>undefined</code>, since <code>undefined</code> is just
- * a plain old variable and may be redefined by somebody else.
- *
- * @private
- */
-jasmine.undefined = jasmine.___undefined___;
-
-/**
- * Show diagnostic messages in the console if set to true
- *
- */
-jasmine.VERBOSE = false;
-
-/**
- * Default interval in milliseconds for event loop yields (e.g. to allow network activity or to refresh the screen with the HTML-based runner). Small values here may result in slow test running. Zero means no updates until all tests have completed.
- *
- */
-jasmine.DEFAULT_UPDATE_INTERVAL = 250;
-
-/**
- * Maximum levels of nesting that will be included when an object is pretty-printed
- */
-jasmine.MAX_PRETTY_PRINT_DEPTH = 40;
-
-/**
- * Default timeout interval in milliseconds for waitsFor() blocks.
- */
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000;
-
-/**
- * By default exceptions thrown in the context of a test are caught by jasmine so that it can run the remaining tests in the suite.
- * Set to false to let the exception bubble up in the browser.
- *
- */
-jasmine.CATCH_EXCEPTIONS = true;
-
-jasmine.getGlobal = function() {
-  function getGlobal() {
-    return this;
-  }
-
-  return getGlobal();
-};
-
-/**
- * Allows for bound functions to be compared.  Internal use only.
- *
- * @ignore
- * @private
- * @param base {Object} bound 'this' for the function
- * @param name {Function} function to find
- */
-jasmine.bindOriginal_ = function(base, name) {
-  var original = base[name];
-  if (original.apply) {
-    return function() {
-      return original.apply(base, arguments);
-    };
-  } else {
-    // IE support
-    return jasmine.getGlobal()[name];
-  }
-};
-
-jasmine.setTimeout = jasmine.bindOriginal_(jasmine.getGlobal(), 'setTimeout');
-jasmine.clearTimeout = jasmine.bindOriginal_(jasmine.getGlobal(), 'clearTimeout');
-jasmine.setInterval = jasmine.bindOriginal_(jasmine.getGlobal(), 'setInterval');
-jasmine.clearInterval = jasmine.bindOriginal_(jasmine.getGlobal(), 'clearInterval');
-
-jasmine.MessageResult = function(values) {
-  this.type = 'log';
-  this.values = values;
-  this.trace = new Error(); // todo: test better
-};
-
-jasmine.MessageResult.prototype.toString = function() {
-  var text = "";
-  for (var i = 0; i < this.values.length; i++) {
-    if (i > 0) text += " ";
-    if (jasmine.isString_(this.values[i])) {
-      text += this.values[i];
-    } else {
-      text += jasmine.pp(this.values[i]);
-    }
-  }
-  return text;
-};
-
-jasmine.ExpectationResult = function(params) {
-  this.type = 'expect';
-  this.matcherName = params.matcherName;
-  this.passed_ = params.passed;
-  this.expected = params.expected;
-  this.actual = params.actual;
-  this.message = this.passed_ ? 'Passed.' : params.message;
-
-  var trace = (params.trace || new Error(this.message));
-  this.trace = this.passed_ ? '' : trace;
-};
-
-jasmine.ExpectationResult.prototype.toString = function () {
-  return this.message;
-};
-
-jasmine.ExpectationResult.prototype.passed = function () {
-  return this.passed_;
-};
-
-/**
- * Getter for the Jasmine environment. Ensures one gets created
- */
-jasmine.getEnv = function() {
-  var env = jasmine.currentEnv_ = jasmine.currentEnv_ || new jasmine.Env();
-  return env;
-};
-
-/**
- * @ignore
- * @private
- * @param value
- * @returns {Boolean}
- */
-jasmine.isArray_ = function(value) {
-  return jasmine.isA_("Array", value);
-};
-
-/**
- * @ignore
- * @private
- * @param value
- * @returns {Boolean}
- */
-jasmine.isString_ = function(value) {
-  return jasmine.isA_("String", value);
-};
-
-/**
- * @ignore
- * @private
- * @param value
- * @returns {Boolean}
- */
-jasmine.isNumber_ = function(value) {
-  return jasmine.isA_("Number", value);
-};
-
-/**
- * @ignore
- * @private
- * @param {String} typeName
- * @param value
- * @returns {Boolean}
- */
-jasmine.isA_ = function(typeName, value) {
-  return Object.prototype.toString.apply(value) === '[object ' + typeName + ']';
-};
-
-/**
- * Pretty printer for expecations.  Takes any object and turns it into a human-readable string.
- *
- * @param value {Object} an object to be outputted
- * @returns {String}
- */
-jasmine.pp = function(value) {
-  var stringPrettyPrinter = new jasmine.StringPrettyPrinter();
-  stringPrettyPrinter.format(value);
-  return stringPrettyPrinter.string;
-};
-
-/**
- * Returns true if the object is a DOM Node.
- *
- * @param {Object} obj object to check
- * @returns {Boolean}
- */
-jasmine.isDomNode = function(obj) {
-  return obj.nodeType > 0;
-};
-
-/**
- * Returns a matchable 'generic' object of the class type.  For use in expecations of type when values don't matter.
- *
- * @example
- * // don't care about which function is passed in, as long as it's a function
- * expect(mySpy).toHaveBeenCalledWith(jasmine.any(Function));
- *
- * @param {Class} clazz
- * @returns matchable object of the type clazz
- */
-jasmine.any = function(clazz) {
-  return new jasmine.Matchers.Any(clazz);
-};
-
-/**
- * Returns a matchable subset of a JSON object. For use in expectations when you don't care about all of the
- * attributes on the object.
- *
- * @example
- * // don't care about any other attributes than foo.
- * expect(mySpy).toHaveBeenCalledWith(jasmine.objectContaining({foo: "bar"});
- *
- * @param sample {Object} sample
- * @returns matchable object for the sample
- */
-jasmine.objectContaining = function (sample) {
-    return new jasmine.Matchers.ObjectContaining(sample);
-};
-
-/**
- * Jasmine Spies are test doubles that can act as stubs, spies, fakes or when used in an expecation, mocks.
- *
- * Spies should be created in test setup, before expectations.  They can then be checked, using the standard Jasmine
- * expectation syntax. Spies can be checked if they were called or not and what the calling params were.
- *
- * A Spy has the following fields: wasCalled, callCount, mostRecentCall, and argsForCall (see docs).
- *
- * Spies are torn down at the end of every spec.
- *
- * Note: Do <b>not</b> call new jasmine.Spy() directly - a spy must be created using spyOn, jasmine.createSpy or jasmine.createSpyObj.
- *
- * @example
- * // a stub
- * var myStub = jasmine.createSpy('myStub');  // can be used anywhere
- *
- * // spy example
- * var foo = {
- *   not: function(bool) { return !bool; }
- * }
- *
- * // actual foo.not will not be called, execution stops
- * spyOn(foo, 'not');
-
- // foo.not spied upon, execution will continue to implementation
- * spyOn(foo, 'not').andCallThrough();
- *
- * // fake example
- * var foo = {
- *   not: function(bool) { return !bool; }
- * }
- *
- * // foo.not(val) will return val
- * spyOn(foo, 'not').andCallFake(function(value) {return value;});
- *
- * // mock example
- * foo.not(7 == 7);
- * expect(foo.not).toHaveBeenCalled();
- * expect(foo.not).toHaveBeenCalledWith(true);
- *
- * @constructor
- * @see spyOn, jasmine.createSpy, jasmine.createSpyObj
- * @param {String} name
- */
-jasmine.Spy = function(name) {
-  /**
-   * The name of the spy, if provided.
-   */
-  this.identity = name || 'unknown';
-  /**
-   *  Is this Object a spy?
-   */
-  this.isSpy = true;
-  /**
-   * The actual function this spy stubs.
-   */
-  this.plan = function() {
-  };
-  /**
-   * Tracking of the most recent call to the spy.
-   * @example
-   * var mySpy = jasmine.createSpy('foo');
-   * mySpy(1, 2);
-   * mySpy.mostRecentCall.args = [1, 2];
-   */
-  this.mostRecentCall = {};
-
-  /**
-   * Holds arguments for each call to the spy, indexed by call count
-   * @example
-   * var mySpy = jasmine.createSpy('foo');
-   * mySpy(1, 2);
-   * mySpy(7, 8);
-   * mySpy.mostRecentCall.args = [7, 8];
-   * mySpy.argsForCall[0] = [1, 2];
-   * mySpy.argsForCall[1] = [7, 8];
-   */
-  this.argsForCall = [];
-  this.calls = [];
-};
-
-/**
- * Tells a spy to call through to the actual implemenatation.
- *
- * @example
- * var foo = {
- *   bar: function() { // do some stuff }
- * }
- *
- * // defining a spy on an existing property: foo.bar
- * spyOn(foo, 'bar').andCallThrough();
- */
-jasmine.Spy.prototype.andCallThrough = function() {
-  this.plan = this.originalValue;
-  return this;
-};
-
-/**
- * For setting the return value of a spy.
- *
- * @example
- * // defining a spy from scratch: foo() returns 'baz'
- * var foo = jasmine.createSpy('spy on foo').andReturn('baz');
- *
- * // defining a spy on an existing property: foo.bar() returns 'baz'
- * spyOn(foo, 'bar').andReturn('baz');
- *
- * @param {Object} value
- */
-jasmine.Spy.prototype.andReturn = function(value) {
-  this.plan = function() {
-    return value;
-  };
-  return this;
-};
-
-/**
- * For throwing an exception when a spy is called.
- *
- * @example
- * // defining a spy from scratch: foo() throws an exception w/ message 'ouch'
- * var foo = jasmine.createSpy('spy on foo').andThrow('baz');
- *
- * // defining a spy on an existing property: foo.bar() throws an exception w/ message 'ouch'
- * spyOn(foo, 'bar').andThrow('baz');
- *
- * @param {String} exceptionMsg
- */
-jasmine.Spy.prototype.andThrow = function(exceptionMsg) {
-  this.plan = function() {
-    throw exceptionMsg;
-  };
-  return this;
-};
-
-/**
- * Calls an alternate implementation when a spy is called.
- *
- * @example
- * var baz = function() {
- *   // do some stuff, return something
- * }
- * // defining a spy from scratch: foo() calls the function baz
- * var foo = jasmine.createSpy('spy on foo').andCall(baz);
- *
- * // defining a spy on an existing property: foo.bar() calls an anonymnous function
- * spyOn(foo, 'bar').andCall(function() { return 'baz';} );
- *
- * @param {Function} fakeFunc
- */
-jasmine.Spy.prototype.andCallFake = function(fakeFunc) {
-  this.plan = fakeFunc;
-  return this;
-};
-
-/**
- * Resets all of a spy's the tracking variables so that it can be used again.
- *
- * @example
- * spyOn(foo, 'bar');
- *
- * foo.bar();
- *
- * expect(foo.bar.callCount).toEqual(1);
- *
- * foo.bar.reset();
- *
- * expect(foo.bar.callCount).toEqual(0);
- */
-jasmine.Spy.prototype.reset = function() {
-  this.wasCalled = false;
-  this.callCount = 0;
-  this.argsForCall = [];
-  this.calls = [];
-  this.mostRecentCall = {};
-};
-
-jasmine.createSpy = function(name) {
-
-  var spyObj = function() {
-    spyObj.wasCalled = true;
-    spyObj.callCount++;
-    var args = jasmine.util.argsToArray(arguments);
-    spyObj.mostRecentCall.object = this;
-    spyObj.mostRecentCall.args = args;
-    spyObj.argsForCall.push(args);
-    spyObj.calls.push({object: this, args: args});
-    return spyObj.plan.apply(this, arguments);
-  };
-
-  var spy = new jasmine.Spy(name);
-
-  for (var prop in spy) {
-    spyObj[prop] = spy[prop];
-  }
-
-  spyObj.reset();
-
-  return spyObj;
-};
-
-/**
- * Determines whether an object is a spy.
- *
- * @param {jasmine.Spy|Object} putativeSpy
- * @returns {Boolean}
- */
-jasmine.isSpy = function(putativeSpy) {
-  return putativeSpy && putativeSpy.isSpy;
-};
-
-/**
- * Creates a more complicated spy: an Object that has every property a function that is a spy.  Used for stubbing something
- * large in one call.
- *
- * @param {String} baseName name of spy class
- * @param {Array} methodNames array of names of methods to make spies
- */
-jasmine.createSpyObj = function(baseName, methodNames) {
-  if (!jasmine.isArray_(methodNames) || methodNames.length === 0) {
-    throw new Error('createSpyObj requires a non-empty array of method names to create spies for');
-  }
-  var obj = {};
-  for (var i = 0; i < methodNames.length; i++) {
-    obj[methodNames[i]] = jasmine.createSpy(baseName + '.' + methodNames[i]);
-  }
-  return obj;
-};
-
-/**
- * All parameters are pretty-printed and concatenated together, then written to the current spec's output.
- *
- * Be careful not to leave calls to <code>jasmine.log</code> in production code.
- */
-jasmine.log = function() {
-  var spec = jasmine.getEnv().currentSpec;
-  spec.log.apply(spec, arguments);
-};
-
-/**
- * Function that installs a spy on an existing object's method name.  Used within a Spec to create a spy.
- *
- * @example
- * // spy example
- * var foo = {
- *   not: function(bool) { return !bool; }
- * }
- * spyOn(foo, 'not'); // actual foo.not will not be called, execution stops
- *
- * @see jasmine.createSpy
- * @param obj
- * @param methodName
- * @return {jasmine.Spy} a Jasmine spy that can be chained with all spy methods
- */
-var spyOn = function(obj, methodName) {
-  return jasmine.getEnv().currentSpec.spyOn(obj, methodName);
-};
-if (isCommonJS) exports.spyOn = spyOn;
-
-/**
- * Creates a Jasmine spec that will be added to the current suite.
- *
- * // TODO: pending tests
- *
- * @example
- * it('should be true', function() {
- *   expect(true).toEqual(true);
- * });
- *
- * @param {String} desc description of this specification
- * @param {Function} func defines the preconditions and expectations of the spec
- */
-var it = function(desc, func) {
-  return jasmine.getEnv().it(desc, func);
-};
-if (isCommonJS) exports.it = it;
-
-/**
- * Creates a <em>disabled</em> Jasmine spec.
- *
- * A convenience method that allows existing specs to be disabled temporarily during development.
- *
- * @param {String} desc description of this specification
- * @param {Function} func defines the preconditions and expectations of the spec
- */
-var xit = function(desc, func) {
-  return jasmine.getEnv().xit(desc, func);
-};
-if (isCommonJS) exports.xit = xit;
-
-/**
- * Starts a chain for a Jasmine expectation.
- *
- * It is passed an Object that is the actual value and should chain to one of the many
- * jasmine.Matchers functions.
- *
- * @param {Object} actual Actual value to test against and expected value
- * @return {jasmine.Matchers}
- */
-var expect = function(actual) {
-  return jasmine.getEnv().currentSpec.expect(actual);
-};
-if (isCommonJS) exports.expect = expect;
-
-/**
- * Defines part of a jasmine spec.  Used in cominbination with waits or waitsFor in asynchrnous specs.
- *
- * @param {Function} func Function that defines part of a jasmine spec.
- */
-var runs = function(func) {
-  jasmine.getEnv().currentSpec.runs(func);
-};
-if (isCommonJS) exports.runs = runs;
-
-/**
- * Waits a fixed time period before moving to the next block.
- *
- * @deprecated Use waitsFor() instead
- * @param {Number} timeout milliseconds to wait
- */
-var waits = function(timeout) {
-  jasmine.getEnv().currentSpec.waits(timeout);
-};
-if (isCommonJS) exports.waits = waits;
-
-/**
- * Waits for the latchFunction to return true before proceeding to the next block.
- *
- * @param {Function} latchFunction
- * @param {String} optional_timeoutMessage
- * @param {Number} optional_timeout
- */
-var waitsFor = function(latchFunction, optional_timeoutMessage, optional_timeout) {
-  jasmine.getEnv().currentSpec.waitsFor.apply(jasmine.getEnv().currentSpec, arguments);
-};
-if (isCommonJS) exports.waitsFor = waitsFor;
-
-/**
- * A function that is called before each spec in a suite.
- *
- * Used for spec setup, including validating assumptions.
- *
- * @param {Function} beforeEachFunction
- */
-var beforeEach = function(beforeEachFunction) {
-  jasmine.getEnv().beforeEach(beforeEachFunction);
-};
-if (isCommonJS) exports.beforeEach = beforeEach;
-
-/**
- * A function that is called after each spec in a suite.
- *
- * Used for restoring any state that is hijacked during spec execution.
- *
- * @param {Function} afterEachFunction
- */
-var afterEach = function(afterEachFunction) {
-  jasmine.getEnv().afterEach(afterEachFunction);
-};
-if (isCommonJS) exports.afterEach = afterEach;
-
-/**
- * Defines a suite of specifications.
- *
- * Stores the description and all defined specs in the Jasmine environment as one suite of specs. Variables declared
- * are accessible by calls to beforeEach, it, and afterEach. Describe blocks can be nested, allowing for specialization
- * of setup in some tests.
- *
- * @example
- * // TODO: a simple suite
- *
- * // TODO: a simple suite with a nested describe block
- *
- * @param {String} description A string, usually the class under test.
- * @param {Function} specDefinitions function that defines several specs.
- */
-var describe = function(description, specDefinitions) {
-  return jasmine.getEnv().describe(description, specDefinitions);
-};
-if (isCommonJS) exports.describe = describe;
-
-/**
- * Disables a suite of specifications.  Used to disable some suites in a file, or files, temporarily during development.
- *
- * @param {String} description A string, usually the class under test.
- * @param {Function} specDefinitions function that defines several specs.
- */
-var xdescribe = function(description, specDefinitions) {
-  return jasmine.getEnv().xdescribe(description, specDefinitions);
-};
-if (isCommonJS) exports.xdescribe = xdescribe;
-
-
-// Provide the XMLHttpRequest class for IE 5.x-6.x:
-jasmine.XmlHttpRequest = (typeof XMLHttpRequest == "undefined") ? function() {
-  function tryIt(f) {
-    try {
-      return f();
-    } catch(e) {
-    }
-    return null;
-  }
-
-  var xhr = tryIt(function() {
-    return new ActiveXObject("Msxml2.XMLHTTP.6.0");
-  }) ||
-    tryIt(function() {
-      return new ActiveXObject("Msxml2.XMLHTTP.3.0");
-    }) ||
-    tryIt(function() {
-      return new ActiveXObject("Msxml2.XMLHTTP");
-    }) ||
-    tryIt(function() {
-      return new ActiveXObject("Microsoft.XMLHTTP");
-    });
-
-  if (!xhr) throw new Error("This browser does not support XMLHttpRequest.");
-
-  return xhr;
-} : XMLHttpRequest;
-/**
- * @namespace
- */
-jasmine.util = {};
-
-/**
- * Declare that a child class inherit it's prototype from the parent class.
- *
- * @private
- * @param {Function} childClass
- * @param {Function} parentClass
- */
-jasmine.util.inherit = function(childClass, parentClass) {
-  /**
-   * @private
-   */
-  var subclass = function() {
-  };
-  subclass.prototype = parentClass.prototype;
-  childClass.prototype = new subclass();
-};
-
-jasmine.util.formatException = function(e) {
-  var lineNumber;
-  if (e.line) {
-    lineNumber = e.line;
-  }
-  else if (e.lineNumber) {
-    lineNumber = e.lineNumber;
-  }
-
-  var file;
-
-  if (e.sourceURL) {
-    file = e.sourceURL;
-  }
-  else if (e.fileName) {
-    file = e.fileName;
-  }
-
-  var message = (e.name && e.message) ? (e.name + ': ' + e.message) : e.toString();
-
-  if (file && lineNumber) {
-    message += ' in ' + file + ' (line ' + lineNumber + ')';
-  }
-
-  return message;
-};
-
-jasmine.util.htmlEscape = function(str) {
-  if (!str) return str;
-  return str.replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-};
-
-jasmine.util.argsToArray = function(args) {
-  var arrayOfArgs = [];
-  for (var i = 0; i < args.length; i++) arrayOfArgs.push(args[i]);
-  return arrayOfArgs;
-};
-
-jasmine.util.extend = function(destination, source) {
-  for (var property in source) destination[property] = source[property];
-  return destination;
-};
-
-/**
- * Environment for Jasmine
- *
- * @constructor
- */
-jasmine.Env = function() {
-  this.currentSpec = null;
-  this.currentSuite = null;
-  this.currentRunner_ = new jasmine.Runner(this);
-
-  this.reporter = new jasmine.MultiReporter();
-
-  this.updateInterval = jasmine.DEFAULT_UPDATE_INTERVAL;
-  this.defaultTimeoutInterval = jasmine.DEFAULT_TIMEOUT_INTERVAL;
-  this.lastUpdate = 0;
-  this.specFilter = function() {
-    return true;
-  };
-
-  this.nextSpecId_ = 0;
-  this.nextSuiteId_ = 0;
-  this.equalityTesters_ = [];
-
-  // wrap matchers
-  this.matchersClass = function() {
-    jasmine.Matchers.apply(this, arguments);
-  };
-  jasmine.util.inherit(this.matchersClass, jasmine.Matchers);
-
-  jasmine.Matchers.wrapInto_(jasmine.Matchers.prototype, this.matchersClass);
-};
-
-
-jasmine.Env.prototype.setTimeout = jasmine.setTimeout;
-jasmine.Env.prototype.clearTimeout = jasmine.clearTimeout;
-jasmine.Env.prototype.setInterval = jasmine.setInterval;
-jasmine.Env.prototype.clearInterval = jasmine.clearInterval;
-
-/**
- * @returns an object containing jasmine version build info, if set.
- */
-jasmine.Env.prototype.version = function () {
-  if (jasmine.version_) {
-    return jasmine.version_;
-  } else {
-    throw new Error('Version not set');
-  }
-};
-
-/**
- * @returns string containing jasmine version build info, if set.
- */
-jasmine.Env.prototype.versionString = function() {
-  if (!jasmine.version_) {
-    return "version unknown";
-  }
-
-  var version = this.version();
-  var versionString = version.major + "." + version.minor + "." + version.build;
-  if (version.release_candidate) {
-    versionString += ".rc" + version.release_candidate;
-  }
-  versionString += " revision " + version.revision;
-  return versionString;
-};
-
-/**
- * @returns a sequential integer starting at 0
- */
-jasmine.Env.prototype.nextSpecId = function () {
-  return this.nextSpecId_++;
-};
-
-/**
- * @returns a sequential integer starting at 0
- */
-jasmine.Env.prototype.nextSuiteId = function () {
-  return this.nextSuiteId_++;
-};
-
-/**
- * Register a reporter to receive status updates from Jasmine.
- * @param {jasmine.Reporter} reporter An object which will receive status updates.
- */
-jasmine.Env.prototype.addReporter = function(reporter) {
-  this.reporter.addReporter(reporter);
-};
-
-jasmine.Env.prototype.execute = function() {
-  this.currentRunner_.execute();
-};
-
-jasmine.Env.prototype.describe = function(description, specDefinitions) {
-  var suite = new jasmine.Suite(this, description, specDefinitions, this.currentSuite);
-
-  var parentSuite = this.currentSuite;
-  if (parentSuite) {
-    parentSuite.add(suite);
-  } else {
-    this.currentRunner_.add(suite);
-  }
-
-  this.currentSuite = suite;
-
-  var declarationError = null;
-  try {
-    specDefinitions.call(suite);
-  } catch(e) {
-    declarationError = e;
-  }
-
-  if (declarationError) {
-    this.it("encountered a declaration exception", function() {
-      throw declarationError;
-    });
-  }
-
-  this.currentSuite = parentSuite;
-
-  return suite;
-};
-
-jasmine.Env.prototype.beforeEach = function(beforeEachFunction) {
-  if (this.currentSuite) {
-    this.currentSuite.beforeEach(beforeEachFunction);
-  } else {
-    this.currentRunner_.beforeEach(beforeEachFunction);
-  }
-};
-
-jasmine.Env.prototype.currentRunner = function () {
-  return this.currentRunner_;
-};
-
-jasmine.Env.prototype.afterEach = function(afterEachFunction) {
-  if (this.currentSuite) {
-    this.currentSuite.afterEach(afterEachFunction);
-  } else {
-    this.currentRunner_.afterEach(afterEachFunction);
-  }
-
-};
-
-jasmine.Env.prototype.xdescribe = function(desc, specDefinitions) {
-  return {
-    execute: function() {
-    }
-  };
-};
-
-jasmine.Env.prototype.it = function(description, func) {
-  var spec = new jasmine.Spec(this, this.currentSuite, description);
-  this.currentSuite.add(spec);
-  this.currentSpec = spec;
-
-  if (func) {
-    spec.runs(func);
-  }
-
-  return spec;
-};
-
-jasmine.Env.prototype.xit = function(desc, func) {
-  return {
-    id: this.nextSpecId(),
-    runs: function() {
-    }
-  };
-};
-
-jasmine.Env.prototype.compareRegExps_ = function(a, b, mismatchKeys, mismatchValues) {
-  if (a.source != b.source)
-    mismatchValues.push("expected pattern /" + b.source + "/ is not equal to the pattern /" + a.source + "/");
-
-  if (a.ignoreCase != b.ignoreCase)
-    mismatchValues.push("expected modifier i was" + (b.ignoreCase ? " " : " not ") + "set and does not equal the origin modifier");
-
-  if (a.global != b.global)
-    mismatchValues.push("expected modifier g was" + (b.global ? " " : " not ") + "set and does not equal the origin modifier");
-
-  if (a.multiline != b.multiline)
-    mismatchValues.push("expected modifier m was" + (b.multiline ? " " : " not ") + "set and does not equal the origin modifier");
-
-  if (a.sticky != b.sticky)
-    mismatchValues.push("expected modifier y was" + (b.sticky ? " " : " not ") + "set and does not equal the origin modifier");
-
-  return (mismatchValues.length === 0);
-};
-
-jasmine.Env.prototype.compareObjects_ = function(a, b, mismatchKeys, mismatchValues) {
-  if (a.__Jasmine_been_here_before__ === b && b.__Jasmine_been_here_before__ === a) {
-    return true;
-  }
-
-  a.__Jasmine_been_here_before__ = b;
-  b.__Jasmine_been_here_before__ = a;
-
-  var hasKey = function(obj, keyName) {
-    return obj !== null && obj[keyName] !== jasmine.undefined;
-  };
-
-  for (var property in b) {
-    if (!hasKey(a, property) && hasKey(b, property)) {
-      mismatchKeys.push("expected has key '" + property + "', but missing from actual.");
-    }
-  }
-  for (property in a) {
-    if (!hasKey(b, property) && hasKey(a, property)) {
-      mismatchKeys.push("expected missing key '" + property + "', but present in actual.");
-    }
-  }
-  for (property in b) {
-    if (property == '__Jasmine_been_here_before__') continue;
-    if (!this.equals_(a[property], b[property], mismatchKeys, mismatchValues)) {
-      mismatchValues.push("'" + property + "' was '" + (b[property] ? jasmine.util.htmlEscape(b[property].toString()) : b[property]) + "' in expected, but was '" + (a[property] ? jasmine.util.htmlEscape(a[property].toString()) : a[property]) + "' in actual.");
-    }
-  }
-
-  if (jasmine.isArray_(a) && jasmine.isArray_(b) && a.length != b.length) {
-    mismatchValues.push("arrays were not the same length");
-  }
-
-  delete a.__Jasmine_been_here_before__;
-  delete b.__Jasmine_been_here_before__;
-  return (mismatchKeys.length === 0 && mismatchValues.length === 0);
-};
-
-jasmine.Env.prototype.equals_ = function(a, b, mismatchKeys, mismatchValues) {
-  mismatchKeys = mismatchKeys || [];
-  mismatchValues = mismatchValues || [];
-
-  for (var i = 0; i < this.equalityTesters_.length; i++) {
-    var equalityTester = this.equalityTesters_[i];
-    var result = equalityTester(a, b, this, mismatchKeys, mismatchValues);
-    if (result !== jasmine.undefined) return result;
-  }
-
-  if (a === b) return true;
-
-  if (a === jasmine.undefined || a === null || b === jasmine.undefined || b === null) {
-    return (a == jasmine.undefined && b == jasmine.undefined);
-  }
-
-  if (jasmine.isDomNode(a) && jasmine.isDomNode(b)) {
-    return a === b;
-  }
-
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() == b.getTime();
-  }
-
-  if (a.jasmineMatches) {
-    return a.jasmineMatches(b);
-  }
-
-  if (b.jasmineMatches) {
-    return b.jasmineMatches(a);
-  }
-
-  if (a instanceof jasmine.Matchers.ObjectContaining) {
-    return a.matches(b);
-  }
-
-  if (b instanceof jasmine.Matchers.ObjectContaining) {
-    return b.matches(a);
-  }
-
-  if (jasmine.isString_(a) && jasmine.isString_(b)) {
-    return (a == b);
-  }
-
-  if (jasmine.isNumber_(a) && jasmine.isNumber_(b)) {
-    return (a == b);
-  }
-
-  if (a instanceof RegExp && b instanceof RegExp) {
-    return this.compareRegExps_(a, b, mismatchKeys, mismatchValues);
-  }
-
-  if (typeof a === "object" && typeof b === "object") {
-    return this.compareObjects_(a, b, mismatchKeys, mismatchValues);
-  }
-
-  //Straight check
-  return (a === b);
-};
-
-jasmine.Env.prototype.contains_ = function(haystack, needle) {
-  if (jasmine.isArray_(haystack)) {
-    for (var i = 0; i < haystack.length; i++) {
-      if (this.equals_(haystack[i], needle)) return true;
-    }
-    return false;
-  }
-  return haystack.indexOf(needle) >= 0;
-};
-
-jasmine.Env.prototype.addEqualityTester = function(equalityTester) {
-  this.equalityTesters_.push(equalityTester);
-};
-/** No-op base class for Jasmine reporters.
- *
- * @constructor
- */
-jasmine.Reporter = function() {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.Reporter.prototype.reportRunnerStarting = function(runner) {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.Reporter.prototype.reportRunnerResults = function(runner) {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.Reporter.prototype.reportSuiteResults = function(suite) {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.Reporter.prototype.reportSpecStarting = function(spec) {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.Reporter.prototype.reportSpecResults = function(spec) {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.Reporter.prototype.log = function(str) {
-};
-
-/**
- * Blocks are functions with executable code that make up a spec.
- *
- * @constructor
- * @param {jasmine.Env} env
- * @param {Function} func
- * @param {jasmine.Spec} spec
- */
-jasmine.Block = function(env, func, spec) {
-  this.env = env;
-  this.func = func;
-  this.spec = spec;
-};
-
-jasmine.Block.prototype.execute = function(onComplete) {
-  if (!jasmine.CATCH_EXCEPTIONS) {
-    this.func.apply(this.spec);
-  }
-  else {
-    try {
-      this.func.apply(this.spec);
-    } catch (e) {
-      this.spec.fail(e);
-    }
-  }
-  onComplete();
-};
-/** JavaScript API reporter.
- *
- * @constructor
- */
-jasmine.JsApiReporter = function() {
-  this.started = false;
-  this.finished = false;
-  this.suites_ = [];
-  this.results_ = {};
-};
-
-jasmine.JsApiReporter.prototype.reportRunnerStarting = function(runner) {
-  this.started = true;
-  var suites = runner.topLevelSuites();
-  for (var i = 0; i < suites.length; i++) {
-    var suite = suites[i];
-    this.suites_.push(this.summarize_(suite));
-  }
-};
-
-jasmine.JsApiReporter.prototype.suites = function() {
-  return this.suites_;
-};
-
-jasmine.JsApiReporter.prototype.summarize_ = function(suiteOrSpec) {
-  var isSuite = suiteOrSpec instanceof jasmine.Suite;
-  var summary = {
-    id: suiteOrSpec.id,
-    name: suiteOrSpec.description,
-    type: isSuite ? 'suite' : 'spec',
-    children: []
-  };
-  
-  if (isSuite) {
-    var children = suiteOrSpec.children();
-    for (var i = 0; i < children.length; i++) {
-      summary.children.push(this.summarize_(children[i]));
-    }
-  }
-  return summary;
-};
-
-jasmine.JsApiReporter.prototype.results = function() {
-  return this.results_;
-};
-
-jasmine.JsApiReporter.prototype.resultsForSpec = function(specId) {
-  return this.results_[specId];
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.JsApiReporter.prototype.reportRunnerResults = function(runner) {
-  this.finished = true;
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.JsApiReporter.prototype.reportSuiteResults = function(suite) {
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.JsApiReporter.prototype.reportSpecResults = function(spec) {
-  this.results_[spec.id] = {
-    messages: spec.results().getItems(),
-    result: spec.results().failedCount > 0 ? "failed" : "passed"
-  };
-};
-
-//noinspection JSUnusedLocalSymbols
-jasmine.JsApiReporter.prototype.log = function(str) {
-};
-
-jasmine.JsApiReporter.prototype.resultsForSpecs = function(specIds){
-  var results = {};
-  for (var i = 0; i < specIds.length; i++) {
-    var specId = specIds[i];
-    results[specId] = this.summarizeResult_(this.results_[specId]);
-  }
-  return results;
-};
-
-jasmine.JsApiReporter.prototype.summarizeResult_ = function(result){
-  var summaryMessages = [];
-  var messagesLength = result.messages.length;
-  for (var messageIndex = 0; messageIndex < messagesLength; messageIndex++) {
-    var resultMessage = result.messages[messageIndex];
-    summaryMessages.push({
-      text: resultMessage.type == 'log' ? resultMessage.toString() : jasmine.undefined,
-      passed: resultMessage.passed ? resultMessage.passed() : true,
-      type: resultMessage.type,
-      message: resultMessage.message,
-      trace: {
-        stack: resultMessage.passed && !resultMessage.passed() ? resultMessage.trace.stack : jasmine.undefined
-      }
-    });
-  }
-
-  return {
-    result : result.result,
-    messages : summaryMessages
-  };
-};
-
-/**
- * @constructor
- * @param {jasmine.Env} env
- * @param actual
- * @param {jasmine.Spec} spec
- */
-jasmine.Matchers = function(env, actual, spec, opt_isNot) {
-  this.env = env;
-  this.actual = actual;
-  this.spec = spec;
-  this.isNot = opt_isNot || false;
-  this.reportWasCalled_ = false;
-};
-
-// todo: @deprecated as of Jasmine 0.11, remove soon [xw]
-jasmine.Matchers.pp = function(str) {
-  throw new Error("jasmine.Matchers.pp() is no longer supported, please use jasmine.pp() instead!");
-};
-
-// todo: @deprecated Deprecated as of Jasmine 0.10. Rewrite your custom matchers to return true or false. [xw]
-jasmine.Matchers.prototype.report = function(result, failing_message, details) {
-  throw new Error("As of jasmine 0.11, custom matchers must be implemented differently -- please see jasmine docs");
-};
-
-jasmine.Matchers.wrapInto_ = function(prototype, matchersClass) {
-  for (var methodName in prototype) {
-    if (methodName == 'report') continue;
-    var orig = prototype[methodName];
-    matchersClass.prototype[methodName] = jasmine.Matchers.matcherFn_(methodName, orig);
-  }
-};
-
-jasmine.Matchers.matcherFn_ = function(matcherName, matcherFunction) {
-  return function() {
-    var matcherArgs = jasmine.util.argsToArray(arguments);
-    var result = matcherFunction.apply(this, arguments);
-
-    if (this.isNot) {
-      result = !result;
-    }
-
-    if (this.reportWasCalled_) return result;
-
-    var message;
-    if (!result) {
-      if (this.message) {
-        message = this.message.apply(this, arguments);
-        if (jasmine.isArray_(message)) {
-          message = message[this.isNot ? 1 : 0];
-        }
-      } else {
-        var englishyPredicate = matcherName.replace(/[A-Z]/g, function(s) { return ' ' + s.toLowerCase(); });
-        message = "Expected " + jasmine.pp(this.actual) + (this.isNot ? " not " : " ") + englishyPredicate;
-        if (matcherArgs.length > 0) {
-          for (var i = 0; i < matcherArgs.length; i++) {
-            if (i > 0) message += ",";
-            message += " " + jasmine.pp(matcherArgs[i]);
-          }
-        }
-        message += ".";
-      }
-    }
-    var expectationResult = new jasmine.ExpectationResult({
-      matcherName: matcherName,
-      passed: result,
-      expected: matcherArgs.length > 1 ? matcherArgs : matcherArgs[0],
-      actual: this.actual,
-      message: message
-    });
-    this.spec.addMatcherResult(expectationResult);
-    return jasmine.undefined;
-  };
-};
-
-
-
-
-/**
- * toBe: compares the actual to the expected using ===
- * @param expected
- */
-jasmine.Matchers.prototype.toBe = function(expected) {
-  return this.actual === expected;
-};
-
-/**
- * toNotBe: compares the actual to the expected using !==
- * @param expected
- * @deprecated as of 1.0. Use not.toBe() instead.
- */
-jasmine.Matchers.prototype.toNotBe = function(expected) {
-  return this.actual !== expected;
-};
-
-/**
- * toEqual: compares the actual to the expected using common sense equality. Handles Objects, Arrays, etc.
- *
- * @param expected
- */
-jasmine.Matchers.prototype.toEqual = function(expected) {
-  return this.env.equals_(this.actual, expected);
-};
-
-/**
- * toNotEqual: compares the actual to the expected using the ! of jasmine.Matchers.toEqual
- * @param expected
- * @deprecated as of 1.0. Use not.toEqual() instead.
- */
-jasmine.Matchers.prototype.toNotEqual = function(expected) {
-  return !this.env.equals_(this.actual, expected);
-};
-
-/**
- * Matcher that compares the actual to the expected using a regular expression.  Constructs a RegExp, so takes
- * a pattern or a String.
- *
- * @param expected
- */
-jasmine.Matchers.prototype.toMatch = function(expected) {
-  return new RegExp(expected).test(this.actual);
-};
-
-/**
- * Matcher that compares the actual to the expected using the boolean inverse of jasmine.Matchers.toMatch
- * @param expected
- * @deprecated as of 1.0. Use not.toMatch() instead.
- */
-jasmine.Matchers.prototype.toNotMatch = function(expected) {
-  return !(new RegExp(expected).test(this.actual));
-};
-
-/**
- * Matcher that compares the actual to jasmine.undefined.
- */
-jasmine.Matchers.prototype.toBeDefined = function() {
-  return (this.actual !== jasmine.undefined);
-};
-
-/**
- * Matcher that compares the actual to jasmine.undefined.
- */
-jasmine.Matchers.prototype.toBeUndefined = function() {
-  return (this.actual === jasmine.undefined);
-};
-
-/**
- * Matcher that compares the actual to null.
- */
-jasmine.Matchers.prototype.toBeNull = function() {
-  return (this.actual === null);
-};
-
-/**
- * Matcher that compares the actual to NaN.
- */
-jasmine.Matchers.prototype.toBeNaN = function() {
-	this.message = function() {
-		return [ "Expected " + jasmine.pp(this.actual) + " to be NaN." ];
-	};
-
-	return (this.actual !== this.actual);
-};
-
-/**
- * Matcher that boolean not-nots the actual.
- */
-jasmine.Matchers.prototype.toBeTruthy = function() {
-  return !!this.actual;
-};
-
-
-/**
- * Matcher that boolean nots the actual.
- */
-jasmine.Matchers.prototype.toBeFalsy = function() {
-  return !this.actual;
-};
-
-
-/**
- * Matcher that checks to see if the actual, a Jasmine spy, was called.
- */
-jasmine.Matchers.prototype.toHaveBeenCalled = function() {
-  if (arguments.length > 0) {
-    throw new Error('toHaveBeenCalled does not take arguments, use toHaveBeenCalledWith');
-  }
-
-  if (!jasmine.isSpy(this.actual)) {
-    throw new Error('Expected a spy, but got ' + jasmine.pp(this.actual) + '.');
-  }
-
-  this.message = function() {
-    return [
-      "Expected spy " + this.actual.identity + " to have been called.",
-      "Expected spy " + this.actual.identity + " not to have been called."
-    ];
-  };
-
-  return this.actual.wasCalled;
-};
-
-/** @deprecated Use expect(xxx).toHaveBeenCalled() instead */
-jasmine.Matchers.prototype.wasCalled = jasmine.Matchers.prototype.toHaveBeenCalled;
-
-/**
- * Matcher that checks to see if the actual, a Jasmine spy, was not called.
- *
- * @deprecated Use expect(xxx).not.toHaveBeenCalled() instead
- */
-jasmine.Matchers.prototype.wasNotCalled = function() {
-  if (arguments.length > 0) {
-    throw new Error('wasNotCalled does not take arguments');
-  }
-
-  if (!jasmine.isSpy(this.actual)) {
-    throw new Error('Expected a spy, but got ' + jasmine.pp(this.actual) + '.');
-  }
-
-  this.message = function() {
-    return [
-      "Expected spy " + this.actual.identity + " to not have been called.",
-      "Expected spy " + this.actual.identity + " to have been called."
-    ];
-  };
-
-  return !this.actual.wasCalled;
-};
-
-/**
- * Matcher that checks to see if the actual, a Jasmine spy, was called with a set of parameters.
- *
- * @example
- *
- */
-jasmine.Matchers.prototype.toHaveBeenCalledWith = function() {
-  var expectedArgs = jasmine.util.argsToArray(arguments);
-  if (!jasmine.isSpy(this.actual)) {
-    throw new Error('Expected a spy, but got ' + jasmine.pp(this.actual) + '.');
-  }
-  this.message = function() {
-    var invertedMessage = "Expected spy " + this.actual.identity + " not to have been called with " + jasmine.pp(expectedArgs) + " but it was.";
-    var positiveMessage = "";
-    if (this.actual.callCount === 0) {
-      positiveMessage = "Expected spy " + this.actual.identity + " to have been called with " + jasmine.pp(expectedArgs) + " but it was never called.";
-    } else {
-      positiveMessage = "Expected spy " + this.actual.identity + " to have been called with " + jasmine.pp(expectedArgs) + " but actual calls were " + jasmine.pp(this.actual.argsForCall).replace(/^\[ | \]$/g, '')
-    }
-    return [positiveMessage, invertedMessage];
-  };
-
-  return this.env.contains_(this.actual.argsForCall, expectedArgs);
-};
-
-/** @deprecated Use expect(xxx).toHaveBeenCalledWith() instead */
-jasmine.Matchers.prototype.wasCalledWith = jasmine.Matchers.prototype.toHaveBeenCalledWith;
-
-/** @deprecated Use expect(xxx).not.toHaveBeenCalledWith() instead */
-jasmine.Matchers.prototype.wasNotCalledWith = function() {
-  var expectedArgs = jasmine.util.argsToArray(arguments);
-  if (!jasmine.isSpy(this.actual)) {
-    throw new Error('Expected a spy, but got ' + jasmine.pp(this.actual) + '.');
-  }
-
-  this.message = function() {
-    return [
-      "Expected spy not to have been called with " + jasmine.pp(expectedArgs) + " but it was",
-      "Expected spy to have been called with " + jasmine.pp(expectedArgs) + " but it was"
-    ];
-  };
-
-  return !this.env.contains_(this.actual.argsForCall, expectedArgs);
-};
-
-/**
- * Matcher that checks that the expected item is an element in the actual Array.
- *
- * @param {Object} expected
- */
-jasmine.Matchers.prototype.toContain = function(expected) {
-  return this.env.contains_(this.actual, expected);
-};
-
-/**
- * Matcher that checks that the expected item is NOT an element in the actual Array.
- *
- * @param {Object} expected
- * @deprecated as of 1.0. Use not.toContain() instead.
- */
-jasmine.Matchers.prototype.toNotContain = function(expected) {
-  return !this.env.contains_(this.actual, expected);
-};
-
-jasmine.Matchers.prototype.toBeLessThan = function(expected) {
-  return this.actual < expected;
-};
-
-jasmine.Matchers.prototype.toBeGreaterThan = function(expected) {
-  return this.actual > expected;
-};
-
-/**
- * Matcher that checks that the expected item is equal to the actual item
- * up to a given level of decimal precision (default 2).
- *
- * @param {Number} expected
- * @param {Number} precision, as number of decimal places
- */
-jasmine.Matchers.prototype.toBeCloseTo = function(expected, precision) {
-  if (!(precision === 0)) {
-    precision = precision || 2;
-  }
-  return Math.abs(expected - this.actual) < (Math.pow(10, -precision) / 2);
-};
-
-/**
- * Matcher that checks that the expected exception was thrown by the actual.
- *
- * @param {String} [expected]
- */
-jasmine.Matchers.prototype.toThrow = function(expected) {
-  var result = false;
-  var exception;
-  if (typeof this.actual != 'function') {
-    throw new Error('Actual is not a function');
-  }
-  try {
-    this.actual();
-  } catch (e) {
-    exception = e;
-  }
-  if (exception) {
-    result = (expected === jasmine.undefined || this.env.equals_(exception.message || exception, expected.message || expected));
-  }
-
-  var not = this.isNot ? "not " : "";
-
-  this.message = function() {
-    if (exception && (expected === jasmine.undefined || !this.env.equals_(exception.message || exception, expected.message || expected))) {
-      return ["Expected function " + not + "to throw", expected ? expected.message || expected : "an exception", ", but it threw", exception.message || exception].join(' ');
-    } else {
-      return "Expected function to throw an exception.";
-    }
-  };
-
-  return result;
-};
-
-jasmine.Matchers.Any = function(expectedClass) {
-  this.expectedClass = expectedClass;
-};
-
-jasmine.Matchers.Any.prototype.jasmineMatches = function(other) {
-  if (this.expectedClass == String) {
-    return typeof other == 'string' || other instanceof String;
-  }
-
-  if (this.expectedClass == Number) {
-    return typeof other == 'number' || other instanceof Number;
-  }
-
-  if (this.expectedClass == Function) {
-    return typeof other == 'function' || other instanceof Function;
-  }
-
-  if (this.expectedClass == Object) {
-    return typeof other == 'object';
-  }
-
-  return other instanceof this.expectedClass;
-};
-
-jasmine.Matchers.Any.prototype.jasmineToString = function() {
-  return '<jasmine.any(' + this.expectedClass + ')>';
-};
-
-jasmine.Matchers.ObjectContaining = function (sample) {
-  this.sample = sample;
-};
-
-jasmine.Matchers.ObjectContaining.prototype.jasmineMatches = function(other, mismatchKeys, mismatchValues) {
-  mismatchKeys = mismatchKeys || [];
-  mismatchValues = mismatchValues || [];
-
-  var env = jasmine.getEnv();
-
-  var hasKey = function(obj, keyName) {
-    return obj != null && obj[keyName] !== jasmine.undefined;
-  };
-
-  for (var property in this.sample) {
-    if (!hasKey(other, property) && hasKey(this.sample, property)) {
-      mismatchKeys.push("expected has key '" + property + "', but missing from actual.");
-    }
-    else if (!env.equals_(this.sample[property], other[property], mismatchKeys, mismatchValues)) {
-      mismatchValues.push("'" + property + "' was '" + (other[property] ? jasmine.util.htmlEscape(other[property].toString()) : other[property]) + "' in expected, but was '" + (this.sample[property] ? jasmine.util.htmlEscape(this.sample[property].toString()) : this.sample[property]) + "' in actual.");
-    }
-  }
-
-  return (mismatchKeys.length === 0 && mismatchValues.length === 0);
-};
-
-jasmine.Matchers.ObjectContaining.prototype.jasmineToString = function () {
-  return "<jasmine.objectContaining(" + jasmine.pp(this.sample) + ")>";
-};
-// Mock setTimeout, clearTimeout
-// Contributed by Pivotal Computer Systems, www.pivotalsf.com
-
-jasmine.FakeTimer = function() {
-  this.reset();
-
-  var self = this;
-  self.setTimeout = function(funcToCall, millis) {
-    self.timeoutsMade++;
-    self.scheduleFunction(self.timeoutsMade, funcToCall, millis, false);
-    return self.timeoutsMade;
-  };
-
-  self.setInterval = function(funcToCall, millis) {
-    self.timeoutsMade++;
-    self.scheduleFunction(self.timeoutsMade, funcToCall, millis, true);
-    return self.timeoutsMade;
-  };
-
-  self.clearTimeout = function(timeoutKey) {
-    self.scheduledFunctions[timeoutKey] = jasmine.undefined;
-  };
-
-  self.clearInterval = function(timeoutKey) {
-    self.scheduledFunctions[timeoutKey] = jasmine.undefined;
-  };
-
-};
-
-jasmine.FakeTimer.prototype.reset = function() {
-  this.timeoutsMade = 0;
-  this.scheduledFunctions = {};
-  this.nowMillis = 0;
-};
-
-jasmine.FakeTimer.prototype.tick = function(millis) {
-  var oldMillis = this.nowMillis;
-  var newMillis = oldMillis + millis;
-  this.runFunctionsWithinRange(oldMillis, newMillis);
-  this.nowMillis = newMillis;
-};
-
-jasmine.FakeTimer.prototype.runFunctionsWithinRange = function(oldMillis, nowMillis) {
-  var scheduledFunc;
-  var funcsToRun = [];
-  for (var timeoutKey in this.scheduledFunctions) {
-    scheduledFunc = this.scheduledFunctions[timeoutKey];
-    if (scheduledFunc != jasmine.undefined &&
-        scheduledFunc.runAtMillis >= oldMillis &&
-        scheduledFunc.runAtMillis <= nowMillis) {
-      funcsToRun.push(scheduledFunc);
-      this.scheduledFunctions[timeoutKey] = jasmine.undefined;
-    }
-  }
-
-  if (funcsToRun.length > 0) {
-    funcsToRun.sort(function(a, b) {
-      return a.runAtMillis - b.runAtMillis;
-    });
-    for (var i = 0; i < funcsToRun.length; ++i) {
-      try {
-        var funcToRun = funcsToRun[i];
-        this.nowMillis = funcToRun.runAtMillis;
-        funcToRun.funcToCall();
-        if (funcToRun.recurring) {
-          this.scheduleFunction(funcToRun.timeoutKey,
-              funcToRun.funcToCall,
-              funcToRun.millis,
-              true);
-        }
-      } catch(e) {
-      }
-    }
-    this.runFunctionsWithinRange(oldMillis, nowMillis);
-  }
-};
-
-jasmine.FakeTimer.prototype.scheduleFunction = function(timeoutKey, funcToCall, millis, recurring) {
-  this.scheduledFunctions[timeoutKey] = {
-    runAtMillis: this.nowMillis + millis,
-    funcToCall: funcToCall,
-    recurring: recurring,
-    timeoutKey: timeoutKey,
-    millis: millis
-  };
-};
-
-/**
- * @namespace
- */
-jasmine.Clock = {
-  defaultFakeTimer: new jasmine.FakeTimer(),
-
-  reset: function() {
-    jasmine.Clock.assertInstalled();
-    jasmine.Clock.defaultFakeTimer.reset();
-  },
-
-  tick: function(millis) {
-    jasmine.Clock.assertInstalled();
-    jasmine.Clock.defaultFakeTimer.tick(millis);
-  },
-
-  runFunctionsWithinRange: function(oldMillis, nowMillis) {
-    jasmine.Clock.defaultFakeTimer.runFunctionsWithinRange(oldMillis, nowMillis);
-  },
-
-  scheduleFunction: function(timeoutKey, funcToCall, millis, recurring) {
-    jasmine.Clock.defaultFakeTimer.scheduleFunction(timeoutKey, funcToCall, millis, recurring);
-  },
-
-  useMock: function() {
-    if (!jasmine.Clock.isInstalled()) {
-      var spec = jasmine.getEnv().currentSpec;
-      spec.after(jasmine.Clock.uninstallMock);
-
-      jasmine.Clock.installMock();
-    }
-  },
-
-  installMock: function() {
-    jasmine.Clock.installed = jasmine.Clock.defaultFakeTimer;
-  },
-
-  uninstallMock: function() {
-    jasmine.Clock.assertInstalled();
-    jasmine.Clock.installed = jasmine.Clock.real;
-  },
-
-  real: {
-    setTimeout: jasmine.getGlobal().setTimeout,
-    clearTimeout: jasmine.getGlobal().clearTimeout,
-    setInterval: jasmine.getGlobal().setInterval,
-    clearInterval: jasmine.getGlobal().clearInterval
-  },
-
-  assertInstalled: function() {
-    if (!jasmine.Clock.isInstalled()) {
-      throw new Error("Mock clock is not installed, use jasmine.Clock.useMock()");
-    }
-  },
-
-  isInstalled: function() {
-    return jasmine.Clock.installed == jasmine.Clock.defaultFakeTimer;
-  },
-
-  installed: null
-};
-jasmine.Clock.installed = jasmine.Clock.real;
-
-//else for IE support
-jasmine.getGlobal().setTimeout = function(funcToCall, millis) {
-  if (jasmine.Clock.installed.setTimeout.apply) {
-    return jasmine.Clock.installed.setTimeout.apply(this, arguments);
-  } else {
-    return jasmine.Clock.installed.setTimeout(funcToCall, millis);
-  }
-};
-
-jasmine.getGlobal().setInterval = function(funcToCall, millis) {
-  if (jasmine.Clock.installed.setInterval.apply) {
-    return jasmine.Clock.installed.setInterval.apply(this, arguments);
-  } else {
-    return jasmine.Clock.installed.setInterval(funcToCall, millis);
-  }
-};
-
-jasmine.getGlobal().clearTimeout = function(timeoutKey) {
-  if (jasmine.Clock.installed.clearTimeout.apply) {
-    return jasmine.Clock.installed.clearTimeout.apply(this, arguments);
-  } else {
-    return jasmine.Clock.installed.clearTimeout(timeoutKey);
-  }
-};
-
-jasmine.getGlobal().clearInterval = function(timeoutKey) {
-  if (jasmine.Clock.installed.clearTimeout.apply) {
-    return jasmine.Clock.installed.clearInterval.apply(this, arguments);
-  } else {
-    return jasmine.Clock.installed.clearInterval(timeoutKey);
-  }
-};
-
-/**
- * @constructor
- */
-jasmine.MultiReporter = function() {
-  this.subReporters_ = [];
-};
-jasmine.util.inherit(jasmine.MultiReporter, jasmine.Reporter);
-
-jasmine.MultiReporter.prototype.addReporter = function(reporter) {
-  this.subReporters_.push(reporter);
-};
-
-(function() {
-  var functionNames = [
-    "reportRunnerStarting",
-    "reportRunnerResults",
-    "reportSuiteResults",
-    "reportSpecStarting",
-    "reportSpecResults",
-    "log"
-  ];
-  for (var i = 0; i < functionNames.length; i++) {
-    var functionName = functionNames[i];
-    jasmine.MultiReporter.prototype[functionName] = (function(functionName) {
-      return function() {
-        for (var j = 0; j < this.subReporters_.length; j++) {
-          var subReporter = this.subReporters_[j];
-          if (subReporter[functionName]) {
-            subReporter[functionName].apply(subReporter, arguments);
-          }
-        }
-      };
-    })(functionName);
-  }
-})();
-/**
- * Holds results for a set of Jasmine spec. Allows for the results array to hold another jasmine.NestedResults
- *
- * @constructor
- */
-jasmine.NestedResults = function() {
-  /**
-   * The total count of results
-   */
-  this.totalCount = 0;
-  /**
-   * Number of passed results
-   */
-  this.passedCount = 0;
-  /**
-   * Number of failed results
-   */
-  this.failedCount = 0;
-  /**
-   * Was this suite/spec skipped?
-   */
-  this.skipped = false;
-  /**
-   * @ignore
-   */
-  this.items_ = [];
-};
-
-/**
- * Roll up the result counts.
- *
- * @param result
- */
-jasmine.NestedResults.prototype.rollupCounts = function(result) {
-  this.totalCount += result.totalCount;
-  this.passedCount += result.passedCount;
-  this.failedCount += result.failedCount;
-};
-
-/**
- * Adds a log message.
- * @param values Array of message parts which will be concatenated later.
- */
-jasmine.NestedResults.prototype.log = function(values) {
-  this.items_.push(new jasmine.MessageResult(values));
-};
-
-/**
- * Getter for the results: message & results.
- */
-jasmine.NestedResults.prototype.getItems = function() {
-  return this.items_;
-};
-
-/**
- * Adds a result, tracking counts (total, passed, & failed)
- * @param {jasmine.ExpectationResult|jasmine.NestedResults} result
- */
-jasmine.NestedResults.prototype.addResult = function(result) {
-  if (result.type != 'log') {
-    if (result.items_) {
-      this.rollupCounts(result);
-    } else {
-      this.totalCount++;
-      if (result.passed()) {
-        this.passedCount++;
-      } else {
-        this.failedCount++;
-      }
-    }
-  }
-  this.items_.push(result);
-};
-
-/**
- * @returns {Boolean} True if <b>everything</b> below passed
- */
-jasmine.NestedResults.prototype.passed = function() {
-  return this.passedCount === this.totalCount;
-};
-/**
- * Base class for pretty printing for expectation results.
- */
-jasmine.PrettyPrinter = function() {
-  this.ppNestLevel_ = 0;
-};
-
-/**
- * Formats a value in a nice, human-readable string.
- *
- * @param value
- */
-jasmine.PrettyPrinter.prototype.format = function(value) {
-  this.ppNestLevel_++;
-  try {
-    if (value === jasmine.undefined) {
-      this.emitScalar('undefined');
-    } else if (value === null) {
-      this.emitScalar('null');
-    } else if (value === jasmine.getGlobal()) {
-      this.emitScalar('<global>');
-    } else if (value.jasmineToString) {
-      this.emitScalar(value.jasmineToString());
-    } else if (typeof value === 'string') {
-      this.emitString(value);
-    } else if (jasmine.isSpy(value)) {
-      this.emitScalar("spy on " + value.identity);
-    } else if (value instanceof RegExp) {
-      this.emitScalar(value.toString());
-    } else if (typeof value === 'function') {
-      this.emitScalar('Function');
-    } else if (typeof value.nodeType === 'number') {
-      this.emitScalar('HTMLNode');
-    } else if (value instanceof Date) {
-      this.emitScalar('Date(' + value + ')');
-    } else if (value.__Jasmine_been_here_before__) {
-      this.emitScalar('<circular reference: ' + (jasmine.isArray_(value) ? 'Array' : 'Object') + '>');
-    } else if (jasmine.isArray_(value) || typeof value == 'object') {
-      value.__Jasmine_been_here_before__ = true;
-      if (jasmine.isArray_(value)) {
-        this.emitArray(value);
-      } else {
-        this.emitObject(value);
-      }
-      delete value.__Jasmine_been_here_before__;
-    } else {
-      this.emitScalar(value.toString());
-    }
-  } finally {
-    this.ppNestLevel_--;
-  }
-};
-
-jasmine.PrettyPrinter.prototype.iterateObject = function(obj, fn) {
-  for (var property in obj) {
-    if (!obj.hasOwnProperty(property)) continue;
-    if (property == '__Jasmine_been_here_before__') continue;
-    fn(property, obj.__lookupGetter__ ? (obj.__lookupGetter__(property) !== jasmine.undefined && 
-                                         obj.__lookupGetter__(property) !== null) : false);
-  }
-};
-
-jasmine.PrettyPrinter.prototype.emitArray = jasmine.unimplementedMethod_;
-jasmine.PrettyPrinter.prototype.emitObject = jasmine.unimplementedMethod_;
-jasmine.PrettyPrinter.prototype.emitScalar = jasmine.unimplementedMethod_;
-jasmine.PrettyPrinter.prototype.emitString = jasmine.unimplementedMethod_;
-
-jasmine.StringPrettyPrinter = function() {
-  jasmine.PrettyPrinter.call(this);
-
-  this.string = '';
-};
-jasmine.util.inherit(jasmine.StringPrettyPrinter, jasmine.PrettyPrinter);
-
-jasmine.StringPrettyPrinter.prototype.emitScalar = function(value) {
-  this.append(value);
-};
-
-jasmine.StringPrettyPrinter.prototype.emitString = function(value) {
-  this.append("'" + value + "'");
-};
-
-jasmine.StringPrettyPrinter.prototype.emitArray = function(array) {
-  if (this.ppNestLevel_ > jasmine.MAX_PRETTY_PRINT_DEPTH) {
-    this.append("Array");
-    return;
-  }
-
-  this.append('[ ');
-  for (var i = 0; i < array.length; i++) {
-    if (i > 0) {
-      this.append(', ');
-    }
-    this.format(array[i]);
-  }
-  this.append(' ]');
-};
-
-jasmine.StringPrettyPrinter.prototype.emitObject = function(obj) {
-  if (this.ppNestLevel_ > jasmine.MAX_PRETTY_PRINT_DEPTH) {
-    this.append("Object");
-    return;
-  }
-
-  var self = this;
-  this.append('{ ');
-  var first = true;
-
-  this.iterateObject(obj, function(property, isGetter) {
-    if (first) {
-      first = false;
-    } else {
-      self.append(', ');
-    }
-
-    self.append(property);
-    self.append(' : ');
-    if (isGetter) {
-      self.append('<getter>');
-    } else {
-      self.format(obj[property]);
-    }
-  });
-
-  this.append(' }');
-};
-
-jasmine.StringPrettyPrinter.prototype.append = function(value) {
-  this.string += value;
-};
-jasmine.Queue = function(env) {
-  this.env = env;
-
-  // parallel to blocks. each true value in this array means the block will
-  // get executed even if we abort
-  this.ensured = [];
-  this.blocks = [];
-  this.running = false;
-  this.index = 0;
-  this.offset = 0;
-  this.abort = false;
-};
-
-jasmine.Queue.prototype.addBefore = function(block, ensure) {
-  if (ensure === jasmine.undefined) {
-    ensure = false;
-  }
-
-  this.blocks.unshift(block);
-  this.ensured.unshift(ensure);
-};
-
-jasmine.Queue.prototype.add = function(block, ensure) {
-  if (ensure === jasmine.undefined) {
-    ensure = false;
-  }
-
-  this.blocks.push(block);
-  this.ensured.push(ensure);
-};
-
-jasmine.Queue.prototype.insertNext = function(block, ensure) {
-  if (ensure === jasmine.undefined) {
-    ensure = false;
-  }
-
-  this.ensured.splice((this.index + this.offset + 1), 0, ensure);
-  this.blocks.splice((this.index + this.offset + 1), 0, block);
-  this.offset++;
-};
-
-jasmine.Queue.prototype.start = function(onComplete) {
-  this.running = true;
-  this.onComplete = onComplete;
-  this.next_();
-};
-
-jasmine.Queue.prototype.isRunning = function() {
-  return this.running;
-};
-
-jasmine.Queue.LOOP_DONT_RECURSE = true;
-
-jasmine.Queue.prototype.next_ = function() {
-  var self = this;
-  var goAgain = true;
-
-  while (goAgain) {
-    goAgain = false;
-    
-    if (self.index < self.blocks.length && !(this.abort && !this.ensured[self.index])) {
-      var calledSynchronously = true;
-      var completedSynchronously = false;
-
-      var onComplete = function () {
-        if (jasmine.Queue.LOOP_DONT_RECURSE && calledSynchronously) {
-          completedSynchronously = true;
-          return;
-        }
-
-        if (self.blocks[self.index].abort) {
-          self.abort = true;
-        }
-
-        self.offset = 0;
-        self.index++;
-
-        var now = new Date().getTime();
-        if (self.env.updateInterval && now - self.env.lastUpdate > self.env.updateInterval) {
-          self.env.lastUpdate = now;
-          self.env.setTimeout(function() {
-            self.next_();
-          }, 0);
-        } else {
-          if (jasmine.Queue.LOOP_DONT_RECURSE && completedSynchronously) {
-            goAgain = true;
-          } else {
-            self.next_();
-          }
-        }
-      };
-      self.blocks[self.index].execute(onComplete);
-
-      calledSynchronously = false;
-      if (completedSynchronously) {
-        onComplete();
-      }
-      
-    } else {
-      self.running = false;
-      if (self.onComplete) {
-        self.onComplete();
-      }
-    }
-  }
-};
-
-jasmine.Queue.prototype.results = function() {
-  var results = new jasmine.NestedResults();
-  for (var i = 0; i < this.blocks.length; i++) {
-    if (this.blocks[i].results) {
-      results.addResult(this.blocks[i].results());
-    }
-  }
-  return results;
-};
-
-
-/**
- * Runner
- *
- * @constructor
- * @param {jasmine.Env} env
- */
-jasmine.Runner = function(env) {
-  var self = this;
-  self.env = env;
-  self.queue = new jasmine.Queue(env);
-  self.before_ = [];
-  self.after_ = [];
-  self.suites_ = [];
-};
-
-jasmine.Runner.prototype.execute = function() {
-  var self = this;
-  if (self.env.reporter.reportRunnerStarting) {
-    self.env.reporter.reportRunnerStarting(this);
-  }
-  self.queue.start(function () {
-    self.finishCallback();
-  });
-};
-
-jasmine.Runner.prototype.beforeEach = function(beforeEachFunction) {
-  beforeEachFunction.typeName = 'beforeEach';
-  this.before_.splice(0,0,beforeEachFunction);
-};
-
-jasmine.Runner.prototype.afterEach = function(afterEachFunction) {
-  afterEachFunction.typeName = 'afterEach';
-  this.after_.splice(0,0,afterEachFunction);
-};
-
-
-jasmine.Runner.prototype.finishCallback = function() {
-  this.env.reporter.reportRunnerResults(this);
-};
-
-jasmine.Runner.prototype.addSuite = function(suite) {
-  this.suites_.push(suite);
-};
-
-jasmine.Runner.prototype.add = function(block) {
-  if (block instanceof jasmine.Suite) {
-    this.addSuite(block);
-  }
-  this.queue.add(block);
-};
-
-jasmine.Runner.prototype.specs = function () {
-  var suites = this.suites();
-  var specs = [];
-  for (var i = 0; i < suites.length; i++) {
-    specs = specs.concat(suites[i].specs());
-  }
-  return specs;
-};
-
-jasmine.Runner.prototype.suites = function() {
-  return this.suites_;
-};
-
-jasmine.Runner.prototype.topLevelSuites = function() {
-  var topLevelSuites = [];
-  for (var i = 0; i < this.suites_.length; i++) {
-    if (!this.suites_[i].parentSuite) {
-      topLevelSuites.push(this.suites_[i]);
-    }
-  }
-  return topLevelSuites;
-};
-
-jasmine.Runner.prototype.results = function() {
-  return this.queue.results();
-};
-/**
- * Internal representation of a Jasmine specification, or test.
- *
- * @constructor
- * @param {jasmine.Env} env
- * @param {jasmine.Suite} suite
- * @param {String} description
- */
-jasmine.Spec = function(env, suite, description) {
-  if (!env) {
-    throw new Error('jasmine.Env() required');
-  }
-  if (!suite) {
-    throw new Error('jasmine.Suite() required');
-  }
-  var spec = this;
-  spec.id = env.nextSpecId ? env.nextSpecId() : null;
-  spec.env = env;
-  spec.suite = suite;
-  spec.description = description;
-  spec.queue = new jasmine.Queue(env);
-
-  spec.afterCallbacks = [];
-  spec.spies_ = [];
-
-  spec.results_ = new jasmine.NestedResults();
-  spec.results_.description = description;
-  spec.matchersClass = null;
-};
-
-jasmine.Spec.prototype.getFullName = function() {
-  return this.suite.getFullName() + ' ' + this.description + '.';
-};
-
-
-jasmine.Spec.prototype.results = function() {
-  return this.results_;
-};
-
-/**
- * All parameters are pretty-printed and concatenated together, then written to the spec's output.
- *
- * Be careful not to leave calls to <code>jasmine.log</code> in production code.
- */
-jasmine.Spec.prototype.log = function() {
-  return this.results_.log(arguments);
-};
-
-jasmine.Spec.prototype.runs = function (func) {
-  var block = new jasmine.Block(this.env, func, this);
-  this.addToQueue(block);
-  return this;
-};
-
-jasmine.Spec.prototype.addToQueue = function (block) {
-  if (this.queue.isRunning()) {
-    this.queue.insertNext(block);
-  } else {
-    this.queue.add(block);
-  }
-};
-
-/**
- * @param {jasmine.ExpectationResult} result
- */
-jasmine.Spec.prototype.addMatcherResult = function(result) {
-  this.results_.addResult(result);
-};
-
-jasmine.Spec.prototype.expect = function(actual) {
-  var positive = new (this.getMatchersClass_())(this.env, actual, this);
-  positive.not = new (this.getMatchersClass_())(this.env, actual, this, true);
-  return positive;
-};
-
-/**
- * Waits a fixed time period before moving to the next block.
- *
- * @deprecated Use waitsFor() instead
- * @param {Number} timeout milliseconds to wait
- */
-jasmine.Spec.prototype.waits = function(timeout) {
-  var waitsFunc = new jasmine.WaitsBlock(this.env, timeout, this);
-  this.addToQueue(waitsFunc);
-  return this;
-};
-
-/**
- * Waits for the latchFunction to return true before proceeding to the next block.
- *
- * @param {Function} latchFunction
- * @param {String} optional_timeoutMessage
- * @param {Number} optional_timeout
- */
-jasmine.Spec.prototype.waitsFor = function(latchFunction, optional_timeoutMessage, optional_timeout) {
-  var latchFunction_ = null;
-  var optional_timeoutMessage_ = null;
-  var optional_timeout_ = null;
-
-  for (var i = 0; i < arguments.length; i++) {
-    var arg = arguments[i];
-    switch (typeof arg) {
-      case 'function':
-        latchFunction_ = arg;
-        break;
-      case 'string':
-        optional_timeoutMessage_ = arg;
-        break;
-      case 'number':
-        optional_timeout_ = arg;
-        break;
-    }
-  }
-
-  var waitsForFunc = new jasmine.WaitsForBlock(this.env, optional_timeout_, latchFunction_, optional_timeoutMessage_, this);
-  this.addToQueue(waitsForFunc);
-  return this;
-};
-
-jasmine.Spec.prototype.fail = function (e) {
-  var expectationResult = new jasmine.ExpectationResult({
-    passed: false,
-    message: e ? jasmine.util.formatException(e) : 'Exception',
-    trace: { stack: e.stack }
-  });
-  this.results_.addResult(expectationResult);
-};
-
-jasmine.Spec.prototype.getMatchersClass_ = function() {
-  return this.matchersClass || this.env.matchersClass;
-};
-
-jasmine.Spec.prototype.addMatchers = function(matchersPrototype) {
-  var parent = this.getMatchersClass_();
-  var newMatchersClass = function() {
-    parent.apply(this, arguments);
-  };
-  jasmine.util.inherit(newMatchersClass, parent);
-  jasmine.Matchers.wrapInto_(matchersPrototype, newMatchersClass);
-  this.matchersClass = newMatchersClass;
-};
-
-jasmine.Spec.prototype.finishCallback = function() {
-  this.env.reporter.reportSpecResults(this);
-};
-
-jasmine.Spec.prototype.finish = function(onComplete) {
-  this.removeAllSpies();
-  this.finishCallback();
-  if (onComplete) {
-    onComplete();
-  }
-};
-
-jasmine.Spec.prototype.after = function(doAfter) {
-  if (this.queue.isRunning()) {
-    this.queue.add(new jasmine.Block(this.env, doAfter, this), true);
-  } else {
-    this.afterCallbacks.unshift(doAfter);
-  }
-};
-
-jasmine.Spec.prototype.execute = function(onComplete) {
-  var spec = this;
-  if (!spec.env.specFilter(spec)) {
-    spec.results_.skipped = true;
-    spec.finish(onComplete);
-    return;
-  }
-
-  this.env.reporter.reportSpecStarting(this);
-
-  spec.env.currentSpec = spec;
-
-  spec.addBeforesAndAftersToQueue();
-
-  spec.queue.start(function () {
-    spec.finish(onComplete);
-  });
-};
-
-jasmine.Spec.prototype.addBeforesAndAftersToQueue = function() {
-  var runner = this.env.currentRunner();
-  var i;
-
-  for (var suite = this.suite; suite; suite = suite.parentSuite) {
-    for (i = 0; i < suite.before_.length; i++) {
-      this.queue.addBefore(new jasmine.Block(this.env, suite.before_[i], this));
-    }
-  }
-  for (i = 0; i < runner.before_.length; i++) {
-    this.queue.addBefore(new jasmine.Block(this.env, runner.before_[i], this));
-  }
-  for (i = 0; i < this.afterCallbacks.length; i++) {
-    this.queue.add(new jasmine.Block(this.env, this.afterCallbacks[i], this), true);
-  }
-  for (suite = this.suite; suite; suite = suite.parentSuite) {
-    for (i = 0; i < suite.after_.length; i++) {
-      this.queue.add(new jasmine.Block(this.env, suite.after_[i], this), true);
-    }
-  }
-  for (i = 0; i < runner.after_.length; i++) {
-    this.queue.add(new jasmine.Block(this.env, runner.after_[i], this), true);
-  }
-};
-
-jasmine.Spec.prototype.explodes = function() {
-  throw 'explodes function should not have been called';
-};
-
-jasmine.Spec.prototype.spyOn = function(obj, methodName, ignoreMethodDoesntExist) {
-  if (obj == jasmine.undefined) {
-    throw "spyOn could not find an object to spy upon for " + methodName + "()";
-  }
-
-  if (!ignoreMethodDoesntExist && obj[methodName] === jasmine.undefined) {
-    throw methodName + '() method does not exist';
-  }
-
-  if (!ignoreMethodDoesntExist && obj[methodName] && obj[methodName].isSpy) {
-    throw new Error(methodName + ' has already been spied upon');
-  }
-
-  var spyObj = jasmine.createSpy(methodName);
-
-  this.spies_.push(spyObj);
-  spyObj.baseObj = obj;
-  spyObj.methodName = methodName;
-  spyObj.originalValue = obj[methodName];
-
-  obj[methodName] = spyObj;
-
-  return spyObj;
-};
-
-jasmine.Spec.prototype.removeAllSpies = function() {
-  for (var i = 0; i < this.spies_.length; i++) {
-    var spy = this.spies_[i];
-    spy.baseObj[spy.methodName] = spy.originalValue;
-  }
-  this.spies_ = [];
-};
-
-/**
- * Internal representation of a Jasmine suite.
- *
- * @constructor
- * @param {jasmine.Env} env
- * @param {String} description
- * @param {Function} specDefinitions
- * @param {jasmine.Suite} parentSuite
- */
-jasmine.Suite = function(env, description, specDefinitions, parentSuite) {
-  var self = this;
-  self.id = env.nextSuiteId ? env.nextSuiteId() : null;
-  self.description = description;
-  self.queue = new jasmine.Queue(env);
-  self.parentSuite = parentSuite;
-  self.env = env;
-  self.before_ = [];
-  self.after_ = [];
-  self.children_ = [];
-  self.suites_ = [];
-  self.specs_ = [];
-};
-
-jasmine.Suite.prototype.getFullName = function() {
-  var fullName = this.description;
-  for (var parentSuite = this.parentSuite; parentSuite; parentSuite = parentSuite.parentSuite) {
-    fullName = parentSuite.description + ' ' + fullName;
-  }
-  return fullName;
-};
-
-jasmine.Suite.prototype.finish = function(onComplete) {
-  this.env.reporter.reportSuiteResults(this);
-  this.finished = true;
-  if (typeof(onComplete) == 'function') {
-    onComplete();
-  }
-};
-
-jasmine.Suite.prototype.beforeEach = function(beforeEachFunction) {
-  beforeEachFunction.typeName = 'beforeEach';
-  this.before_.unshift(beforeEachFunction);
-};
-
-jasmine.Suite.prototype.afterEach = function(afterEachFunction) {
-  afterEachFunction.typeName = 'afterEach';
-  this.after_.unshift(afterEachFunction);
-};
-
-jasmine.Suite.prototype.results = function() {
-  return this.queue.results();
-};
-
-jasmine.Suite.prototype.add = function(suiteOrSpec) {
-  this.children_.push(suiteOrSpec);
-  if (suiteOrSpec instanceof jasmine.Suite) {
-    this.suites_.push(suiteOrSpec);
-    this.env.currentRunner().addSuite(suiteOrSpec);
-  } else {
-    this.specs_.push(suiteOrSpec);
-  }
-  this.queue.add(suiteOrSpec);
-};
-
-jasmine.Suite.prototype.specs = function() {
-  return this.specs_;
-};
-
-jasmine.Suite.prototype.suites = function() {
-  return this.suites_;
-};
-
-jasmine.Suite.prototype.children = function() {
-  return this.children_;
-};
-
-jasmine.Suite.prototype.execute = function(onComplete) {
-  var self = this;
-  this.queue.start(function () {
-    self.finish(onComplete);
-  });
-};
-jasmine.WaitsBlock = function(env, timeout, spec) {
-  this.timeout = timeout;
-  jasmine.Block.call(this, env, null, spec);
-};
-
-jasmine.util.inherit(jasmine.WaitsBlock, jasmine.Block);
-
-jasmine.WaitsBlock.prototype.execute = function (onComplete) {
-  if (jasmine.VERBOSE) {
-    this.env.reporter.log('>> Jasmine waiting for ' + this.timeout + ' ms...');
-  }
-  this.env.setTimeout(function () {
-    onComplete();
-  }, this.timeout);
-};
-/**
- * A block which waits for some condition to become true, with timeout.
- *
- * @constructor
- * @extends jasmine.Block
- * @param {jasmine.Env} env The Jasmine environment.
- * @param {Number} timeout The maximum time in milliseconds to wait for the condition to become true.
- * @param {Function} latchFunction A function which returns true when the desired condition has been met.
- * @param {String} message The message to display if the desired condition hasn't been met within the given time period.
- * @param {jasmine.Spec} spec The Jasmine spec.
- */
-jasmine.WaitsForBlock = function(env, timeout, latchFunction, message, spec) {
-  this.timeout = timeout || env.defaultTimeoutInterval;
-  this.latchFunction = latchFunction;
-  this.message = message;
-  this.totalTimeSpentWaitingForLatch = 0;
-  jasmine.Block.call(this, env, null, spec);
-};
-jasmine.util.inherit(jasmine.WaitsForBlock, jasmine.Block);
-
-jasmine.WaitsForBlock.TIMEOUT_INCREMENT = 10;
-
-jasmine.WaitsForBlock.prototype.execute = function(onComplete) {
-  if (jasmine.VERBOSE) {
-    this.env.reporter.log('>> Jasmine waiting for ' + (this.message || 'something to happen'));
-  }
-  var latchFunctionResult;
-  try {
-    latchFunctionResult = this.latchFunction.apply(this.spec);
-  } catch (e) {
-    this.spec.fail(e);
-    onComplete();
-    return;
-  }
-
-  if (latchFunctionResult) {
-    onComplete();
-  } else if (this.totalTimeSpentWaitingForLatch >= this.timeout) {
-    var message = 'timed out after ' + this.timeout + ' msec waiting for ' + (this.message || 'something to happen');
-    this.spec.fail({
-      name: 'timeout',
-      message: message
-    });
-
-    this.abort = true;
-    onComplete();
-  } else {
-    this.totalTimeSpentWaitingForLatch += jasmine.WaitsForBlock.TIMEOUT_INCREMENT;
-    var self = this;
-    this.env.setTimeout(function() {
-      self.execute(onComplete);
-    }, jasmine.WaitsForBlock.TIMEOUT_INCREMENT);
-  }
-};
-
-jasmine.version_= {
-  "major": 1,
-  "minor": 3,
-  "build": 0,
-  "revision": 1354052693
-};
diff --git a/vendor/jasmine/phantom.js b/vendor/jasmine/phantom.js
deleted file mode 100644
index 468c11b2508..00000000000
--- a/vendor/jasmine/phantom.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This module provides a bridge from content-land to phantom-land via the
- * window.callPhantom interface.
- */
-
-var console = require("./console");
-var global = Function("return this")();
-
-if (global.callPhantom) {
-    // Phantom's onConsoleMessage support is lacking (only one argument
-    // supported, and it must be a string), so we use callPhantom to
-    // forward console messages instead.
-    console.addListener(function(method, args) {
-        global.callPhantom({
-            type: "console",
-            method: method,
-            args: args
-        });
-    });
-
-    exports.exit = function(code) {
-        global.callPhantom({
-            type: "exit",
-            code: code
-        });
-    };
-
-} else {
-    exports.exit = function() {};
-}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000000..c7f9e850145
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,18110 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
+"@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@babel/cli@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.10.5.tgz#57df2987c8cf89d0fc7d4b157ec59d7619f1b77a"
+  integrity sha512-j9H9qSf3kLdM0Ao3aGPbGZ73mEA9XazuupcS6cDGWuiyAcANoguhP0r2Lx32H5JGw4sSSoHG3x/mxVnHgvOoyA==
+  dependencies:
+    commander "^4.0.1"
+    convert-source-map "^1.1.0"
+    fs-readdir-recursive "^1.1.0"
+    glob "^7.0.0"
+    lodash "^4.17.19"
+    make-dir "^2.1.0"
+    slash "^2.0.0"
+    source-map "^0.5.0"
+  optionalDependencies:
+    chokidar "^2.1.8"
+
+"@babel/code-frame@7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
+  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.23.5", "@babel/code-frame@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
+  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
+  dependencies:
+    "@babel/highlight" "^7.24.2"
+    picocolors "^1.0.0"
+
+"@babel/code-frame@^7.10.4":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
+  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
+  dependencies:
+    "@babel/highlight" "^7.12.13"
+
+"@babel/code-frame@^7.16.7", "@babel/code-frame@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be"
+  integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.27.1"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
+"@babel/code-frame@^7.21.4":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
+  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+  dependencies:
+    "@babel/highlight" "^7.24.7"
+    picocolors "^1.0.0"
+
+"@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/code-frame@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
+  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
+  dependencies:
+    "@babel/highlight" "^7.8.3"
+
+"@babel/compat-data@^7.10.4", "@babel/compat-data@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.11.0.tgz#e9f73efe09af1355b723a7f39b11bad637d7c99c"
+  integrity sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==
+  dependencies:
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
+"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.23.5":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
+  integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
+
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.26.5", "@babel/compat-data@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367"
+  integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==
+
+"@babel/core@^7.0.0":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
+  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.7"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helpers" "^7.20.7"
+    "@babel/parser" "^7.20.7"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.12"
+    "@babel/types" "^7.20.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
+"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.23.9", "@babel/core@^7.24.4":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.5.tgz#15ab5b98e101972d171aeef92ac70d8d6718f06a"
+  integrity sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.2"
+    "@babel/generator" "^7.24.5"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-module-transforms" "^7.24.5"
+    "@babel/helpers" "^7.24.5"
+    "@babel/parser" "^7.24.5"
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.5"
+    "@babel/types" "^7.24.5"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/eslint-parser@^7.11.4":
+  version "7.11.4"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.11.4.tgz#f79bac69088097a8418f5c67fc462c89a72c2f48"
+  integrity sha512-syIzsqEUvmc6WEYbLqrvBODCM1wMo3SQ4h4G9gtCcQctv1VUlA5davRAWHFm7ncQlxcJs4I7kaflsnAP8iA8Aw==
+  dependencies:
+    eslint-scope "5.1.0"
+    eslint-visitor-keys "^1.3.0"
+    semver "^6.3.0"
+
+"@babel/generator@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.0.tgz#4b90c78d8c12825024568cbe83ee6c9af193585c"
+  integrity sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==
+  dependencies:
+    "@babel/types" "^7.11.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.20.7", "@babel/generator@^7.24.5", "@babel/generator@^7.7.2":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.5.tgz#e5afc068f932f05616b66713e28d0f04e99daeb3"
+  integrity sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==
+  dependencies:
+    "@babel/types" "^7.24.5"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
+"@babel/generator@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7"
+  integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang==
+  dependencies:
+    "@babel/parser" "^7.26.10"
+    "@babel/types" "^7.26.10"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/generator@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.9.tgz#75a9482ad3d0cc7188a537aa4910bc59db67cbca"
+  integrity sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==
+  dependencies:
+    "@babel/parser" "^7.26.9"
+    "@babel/types" "^7.26.9"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/generator@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.28.3.tgz#9626c1741c650cbac39121694a0f2d7451b8ef3e"
+  integrity sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==
+  dependencies:
+    "@babel/parser" "^7.28.3"
+    "@babel/types" "^7.28.2"
+    "@jridgewell/gen-mapping" "^0.3.12"
+    "@jridgewell/trace-mapping" "^0.3.28"
+    jsesc "^3.0.2"
+
+"@babel/generator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.3.tgz#0e22c005b0a94c1c74eafe19ef78ce53a4d45c03"
+  integrity sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==
+  dependencies:
+    "@babel/types" "^7.8.3"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-annotate-as-pure@^7.27.3":
+  version "7.27.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5"
+  integrity sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==
+  dependencies:
+    "@babel/types" "^7.27.3"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
+  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-builder-react-jsx-experimental@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.5.tgz#f35e956a19955ff08c1258e44a515a6d6248646b"
+  integrity sha512-Buewnx6M4ttG+NLkKyt7baQn7ScC/Td+e99G914fRU8fGIUivDDgVIQeDHFa5e4CRSJQt58WpNHhsAZgtzVhsg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.10.5"
+
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-compilation-targets@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
+  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
+  dependencies:
+    "@babel/compat-data" "^7.10.4"
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/helper-compilation-targets@^7.18.9":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
+  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
+"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
+  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
+  dependencies:
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    browserslist "^4.22.2"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9", "@babel/helper-compilation-targets@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+  integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
+  dependencies:
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
+  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-member-expression-to-functions" "^7.10.5"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+
+"@babel/helper-create-class-features-plugin@^7.18.6":
+  version "7.20.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz#4349b928e79be05ed2d1643b20b99bb87c503819"
+  integrity sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
+"@babel/helper-create-class-features-plugin@^7.25.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71"
+  integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.26.9"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.27.1":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.3.tgz#3e747434ea007910c320c4d39a6b46f20f371d46"
+  integrity sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.27.3"
+    "@babel/helper-member-expression-to-functions" "^7.27.1"
+    "@babel/helper-optimise-call-expression" "^7.27.1"
+    "@babel/helper-replace-supers" "^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1"
+    "@babel/traverse" "^7.28.3"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz#fdd60d88524659a0b6959c0579925e425714f3b8"
+  integrity sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+    regexpu-core "^4.7.0"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+  integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    regexpu-core "^6.2.0"
+    semver "^6.3.1"
+
+"@babel/helper-define-map@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.18.6.tgz#8dca645a768d0a5007b0bb90078c1d623e99e614"
+  integrity sha512-XSOjXUDG7KODvtURN1p29hGHa4RFgqBQELuBowUOBt3alf2Ny/oNFJygS4yCXwM0vMoqLDjE1O7wSmocUmQ3Kg==
+  dependencies:
+    "@babel/helper-function-name" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-define-polyfill-provider@^0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21"
+  integrity sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+
+"@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
+"@babel/helper-explode-assignable-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz#40a1cd917bff1288f699a94a75b37a1a2dbd8c7c"
+  integrity sha512-4K71RyRQNPRrR85sr5QY4X3VwG4wtVoXZB9+L3r1Gp38DhELyHCtovqydRi7c1Ovb17eRGiQ/FD5s8JdU0Uy5A==
+  dependencies:
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.18.6":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz#75f1e1725742f39ac6584ee0b16d94513da38dd2"
+  integrity sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==
+  dependencies:
+    "@babel/template" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-function-name@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-function-name@^7.19.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
+"@babel/helper-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
+  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
+  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-globals@^7.28.0":
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz#b9430df2aa4e17bc28665eadeae8aa1d985e6674"
+  integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==
+
+"@babel/helper-hoist-variables@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
+  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
+  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-member-expression-to-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz#a6f26e919582275a93c3aa6594756d71b0bb7f05"
+  integrity sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-member-expression-to-functions@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz#ea1211276be93e798ce19037da6f06fbb994fa44"
+  integrity sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.24.3":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
+  integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
+  dependencies:
+    "@babel/types" "^7.24.0"
+
+"@babel/helper-module-imports@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
+"@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
+  integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.11.0"
+    lodash "^4.17.19"
+
+"@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz#ea6c5e33f7b262a0ae762fd5986355c45f54a545"
+  integrity sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.24.3"
+    "@babel/helper-simple-access" "^7.24.5"
+    "@babel/helper-split-export-declaration" "^7.24.5"
+    "@babel/helper-validator-identifier" "^7.24.5"
+
+"@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz#c65221b61a643f3e62705e5dd2b5f115e35f9200"
+  integrity sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==
+  dependencies:
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.24.0", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz#a924607dd254a65695e5bd209b98b902b3b2f11a"
+  integrity sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==
+
+"@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
+"@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
+
+"@babel/helper-plugin-utils@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz#ddb2f876534ff8013e6c2b299bf4d39b3c51d44c"
+  integrity sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==
+
+"@babel/helper-plugin-utils@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+
+"@babel/helper-regex@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
+  integrity sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==
+  dependencies:
+    lodash "^4.17.19"
+
+"@babel/helper-remap-async-to-generator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz#fce8bea4e9690bbe923056ded21e54b4e8b68ed5"
+  integrity sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-wrap-function" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-remap-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
+  integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-wrap-function" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
+  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/helper-replace-supers@^7.25.9", "@babel/helper-replace-supers@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
+
+"@babel/helper-replace-supers@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz#b1ed2d634ce3bdb730e4b52de30f8cccfd692bc0"
+  integrity sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.27.1"
+    "@babel/helper-optimise-call-expression" "^7.27.1"
+    "@babel/traverse" "^7.27.1"
+
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-simple-access@^7.20.2", "@babel/helper-simple-access@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz#50da5b72f58c16b07fbd992810be6049478e85ba"
+  integrity sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==
+  dependencies:
+    "@babel/types" "^7.24.5"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
+  integrity sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
+  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
+  dependencies:
+    "@babel/types" "^7.20.0"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz#62bb91b3abba8c7f1fec0252d9dbea11b3ee7a56"
+  integrity sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.18.6", "@babel/helper-split-export-declaration@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz#b9a67f06a46b0b339323617c8c6213b9055a78b6"
+  integrity sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==
+  dependencies:
+    "@babel/types" "^7.24.5"
+
+"@babel/helper-split-export-declaration@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
+  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
+"@babel/helper-validator-identifier@^7.14.0", "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz#918b1a7fa23056603506370089bd990d8720db62"
+  integrity sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==
+
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
+  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helper-wrap-function@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
+  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-wrap-function@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
+  integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
+  dependencies:
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helpers@^7.20.7", "@babel/helpers@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.5.tgz#fedeb87eeafa62b621160402181ad8585a22a40a"
+  integrity sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==
+  dependencies:
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.5"
+    "@babel/types" "^7.24.5"
+
+"@babel/highlight@^7.10.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.12.13", "@babel/highlight@^7.24.2":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.5.tgz#bc0613f98e1dd0720e99b2a9ee3760194a704b6e"
+  integrity sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.5"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/highlight@^7.16.7":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.9.tgz#8141ce68fc73757946f983b343f1231f4691acc6"
+  integrity sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/highlight@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
+  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/highlight@^7.8.3":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.0.tgz#3197e375711ef6bf834e67d0daec88e4f46113cf"
+  integrity sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.0"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/node@^7.14.7":
+  version "7.14.7"
+  resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.14.7.tgz#0090e83e726027ea682240718ca39e4b625b15ad"
+  integrity sha512-QghINtVgOUCrSpE7z4IXPTGJfRYyjoY7ny5Qz0cuUlsThQv6WSn1xJk217WlEDucPLP2o5HwGXPSkxD4LWOZxQ==
+  dependencies:
+    "@babel/register" "^7.14.5"
+    commander "^4.0.1"
+    core-js "^3.15.0"
+    node-environment-flags "^1.0.5"
+    regenerator-runtime "^0.13.4"
+    v8flags "^3.1.1"
+
+"@babel/parser@^7.0.0", "@babel/parser@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.3.tgz#790874091d2001c9be6ec426c2eed47bc7679081"
+  integrity sha512-/V72F4Yp/qmHaTALizEm9Gf2eQHV3QyTL3K0cNfijwnMnb1L+LDlAubb/ZnSdGAVzVSWakujHYs1I26x66sMeQ==
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.5":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.5.tgz#4a4d5ab4315579e5398a82dcf636ca80c3392790"
+  integrity sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==
+
+"@babel/parser@^7.11.0", "@babel/parser@^7.11.3", "@babel/parser@^7.12.13":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
+  integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
+
+"@babel/parser@^7.14.8":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
+  integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==
+
+"@babel/parser@^7.24.4", "@babel/parser@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.9.tgz#d9e78bee6dc80f9efd8f2349dcfbbcdace280fd5"
+  integrity sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==
+  dependencies:
+    "@babel/types" "^7.26.9"
+
+"@babel/parser@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749"
+  integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==
+  dependencies:
+    "@babel/types" "^7.26.10"
+
+"@babel/parser@^7.27.2", "@babel/parser@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.3.tgz#d2d25b814621bca5fe9d172bc93792547e7a2a71"
+  integrity sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==
+  dependencies:
+    "@babel/types" "^7.28.2"
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
+  integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
+  integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
+  integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
+  integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
+  integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-external-helpers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.10.4.tgz#40d38e8e48a1fa3766ab43496253266ca26783ce"
+  integrity sha512-5mASqSthmRNYVXOphYzlqmR3Y8yp5SZMZhtKDh2DGV3R2PWGLEmP7qOahw66//6m4hjhlpV1bVM7xIJHt1F77Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-async-generator-functions@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
+  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+
+"@babel/plugin-proposal-class-properties@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
+  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-dynamic-import@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
+  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+
+"@babel/plugin-proposal-export-namespace-from@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
+  integrity sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
+  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
+  integrity sha512-/f8p4z+Auz0Uaf+i8Ekf1iM7wUNLcViFUGiPxKeXvxTSl63B875YPiVdUDdem7hREcI0E0kSpEhS8tF5RphK7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
+  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
+  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.0.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
+  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.20.7"
+
+"@babel/plugin-proposal-object-rest-spread@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz#bd81f95a1f746760ea43b6c2d3d62b11790ad0af"
+  integrity sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
+  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076"
+  integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-private-methods@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
+  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
+  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.0.0", "@babel/plugin-syntax-class-properties@^7.10.4", "@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz#774d825256f2379d06139be0c723c4dd444f3ca1"
+  integrity sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-flow@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.4.tgz#53351dd7ae01995e567d04ce42af1a6e0ba846a6"
+  integrity sha512-yxQsX1dJixF4qEEdzVbst3SZQ58Nrooz8NV9Z9GL4byTE25BvJgl5lf0RECUf0fh28rZBb/RYTWn/eeKwCMrZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-import-assertions@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
+  integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-attributes@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
+  integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-jsx@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
+  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-jsx@^7.7.2":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz#3f6ca04b8c841811dbc3c5c5f837934e0d626c10"
+  integrity sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.10.4":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz#c5f0fa6e249f5b739727f923540cf7a806130178"
+  integrity sha512-A81F9pDwyS7yM//KwbCSDqy3Uj4NMIurtplxphWxoYtNPov7cJsDkAFNNyVlIZ3jwGycVsurZ+LtOA8gZ376iQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz#b3bcc51f396d15f3591683f90239de143c076844"
+  integrity sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-arrow-functions@^7.0.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
+  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-arrow-functions@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
+  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-arrow-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
+  integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-async-generator-functions@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz#5e3991135e3b9c6eaaf5eff56d1ae5a11df45ff8"
+  integrity sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+    "@babel/traverse" "^7.26.8"
+
+"@babel/plugin-transform-async-to-generator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
+  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+
+"@babel/plugin-transform-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
+  integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+
+"@babel/plugin-transform-block-scoped-functions@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-block-scoped-functions@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
+  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-block-scoped-functions@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz#3dc4405d31ad1cbe45293aa57205a6e3b009d53e"
+  integrity sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-block-scoping@^7.0.0":
+  version "7.20.14"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.14.tgz#2f5025f01713ba739daf737997308e0d29d1dd75"
+  integrity sha512-sMPepQtsOs5fM1bwNvuJJHvaCfOEQfmc01FGw0ELlTpTJj5Ql/zuNRRldYhAPys4ghXdBIQJbRVYi44/7QflQQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-block-scoping@^7.10.4", "@babel/plugin-transform-block-scoping@^7.11.1":
+  version "7.11.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.11.1.tgz#5b7efe98852bef8d652c0b28144cd93a9e4b5215"
+  integrity sha512-00dYeDE0EVEHuuM+26+0w/SCL0BH2Qy7LwHuI4Hi4MH5gkC8/AqMN5uWFJIsoXZrAphiMm1iXzBw6L2T+eA0ew==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-block-scoping@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
+  integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
+  integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-class-static-block@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
+  integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.10.4", "@babel/plugin-transform-classes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
+  integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.0.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
+  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/template" "^7.20.7"
+
+"@babel/plugin-transform-computed-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
+  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-computed-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
+  integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/template" "^7.25.9"
+
+"@babel/plugin-transform-destructuring@^7.0.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz#8bda578f71620c7de7c93af590154ba331415454"
+  integrity sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-destructuring@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5"
+  integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-destructuring@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
+  integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
+  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-dotall-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
+  integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-keys@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
+  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-duplicate-keys@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
+  integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
+  integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-dynamic-import@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
+  integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-exponentiation-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
+  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-exponentiation-operator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+  integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-export-namespace-from@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
+  integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-flow-strip-types@^7.0.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz#e9e8606633287488216028719638cbbb2f2dde8f"
+  integrity sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/plugin-syntax-flow" "^7.18.6"
+
+"@babel/plugin-transform-flow-strip-types@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.10.4.tgz#c497957f09e86e3df7296271e9eb642876bf7788"
+  integrity sha512-XTadyuqNst88UWBTdLjM+wEY7BFnY2sYtPyAidfC7M/QaZnSuIZpMvLxqGT7phAcnGyWh/XQFLKcGf04CnvxSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.10.4"
+
+"@babel/plugin-transform-for-of@^7.0.0":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
+  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-for-of@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
+  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-for-of@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz#27231f79d5170ef33b5111f07fe5cafeb2c96a56"
+  integrity sha512-Hry8AusVm8LW5BVFgiyUReuoGzPUpdHQQqJY5bZnbbf+ngOHWuCuYFKw/BqaaWlvEUrF91HMhDtEaI1hZzNbLg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-function-name@^7.0.0":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
+  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-function-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
+  integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-json-strings@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
+  integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-literals@^7.0.0":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
+  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
+  integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-logical-assignment-operators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
+  integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-member-expression-literals@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-member-expression-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
+  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-member-expression-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
+  integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-amd@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
+  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-amd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
+  integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-commonjs@^7.0.0":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.11.tgz#8cb23010869bf7669fd4b3098598b6b2be6dc607"
+  integrity sha512-S8e1f7WQ7cimJQ51JkAaDrEtohVEitXjgCGAS2N8S31Y42E+kWwfSz83LYz57QdBm7q9diARVqanIaH2oVgQnw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-simple-access" "^7.20.2"
+
+"@babel/plugin-transform-modules-commonjs@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
+  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.25.9", "@babel/plugin-transform-modules-commonjs@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-modules-systemjs@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
+  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
+  integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-transform-modules-umd@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
+  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-modules-umd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
+  integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
+  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
+  integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-new-target@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
+  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-new-target@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
+  integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-nullish-coalescing-operator@^7.26.6":
+  version "7.26.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz#fbf6b3c92cb509e7b319ee46e3da89c5bedd31fe"
+  integrity sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-numeric-separator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
+  integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-object-rest-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
+  integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+
+"@babel/plugin-transform-object-super@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+
+"@babel/plugin-transform-object-super@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
+  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+
+"@babel/plugin-transform-object-super@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
+  integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+
+"@babel/plugin-transform-optional-catch-binding@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
+  integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
+  integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz#0ee349e9d1bc96e78e3b37a7af423a4078a7083f"
+  integrity sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-parameters@^7.10.4", "@babel/plugin-transform-parameters@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
+  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-parameters@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
+  integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-methods@^7.10.4":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.27.1.tgz#fdacbab1c5ed81ec70dfdbb8b213d65da148b6af"
+  integrity sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.27.1"
+    "@babel/helper-plugin-utils" "^7.27.1"
+
+"@babel/plugin-transform-private-methods@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
+  integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-private-property-in-object@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
+  integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-property-literals@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-property-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
+  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-property-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
+  integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-react-display-name@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-react-display-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
+  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-display-name@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz#70529f034dd1e561045ad3c8152a267f0d7b6200"
+  integrity sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-react-jsx-development@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.4.tgz#6ec90f244394604623880e15ebc3c34c356258ba"
+  integrity sha512-RM3ZAd1sU1iQ7rI2dhrZRZGv0aqzNQMbkIUCS1txYpi9wHQ2ZHNjo5TwX+UD6pvFW4AbWqLVYvKy5qJSAyRGjQ==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-development@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz#e716b6edbef972a92165cd69d92f1255f7e73e87"
+  integrity sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.22.5"
+
+"@babel/plugin-transform-react-jsx-self@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-source@^7.10.4", "@babel/plugin-transform-react-jsx-source@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
+  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx@^7.0.0":
+  version "7.20.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.20.13.tgz#f950f0b0c36377503d29a712f16287cedf886cbb"
+  integrity sha512-MmTZx/bkUrfJhhYAYt3Urjm+h8DQGrPrnKQ94jLo7NLuOU+T89a7IByhKmrb8SKhrIYIQ0FN0CHMbnFRen4qNw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/types" "^7.20.7"
+
+"@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5", "@babel/plugin-transform-react-jsx@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz#393f99185110cea87184ea47bcb4a7b0c2e39312"
+  integrity sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.23.3"
+    "@babel/types" "^7.23.4"
+
+"@babel/plugin-transform-react-pure-annotations@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
+  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-pure-annotations@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz#fabedbdb8ee40edf5da96f3ecfc6958e3783b93c"
+  integrity sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-regenerator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
+  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
+"@babel/plugin-transform-regenerator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
+  integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-regexp-modifiers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
+  integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-reserved-words@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
+  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-reserved-words@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
+  integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-shorthand-properties@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-shorthand-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
+  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-shorthand-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
+  integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-spread@^7.0.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+
+"@babel/plugin-transform-spread@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.11.0.tgz#fa84d300f5e4f57752fe41a6d1b3c554f13f17cc"
+  integrity sha512-UwQYGOqIdQJe4aWNyS7noqAnN2VbaczPLiEtln+zPowRNlD+79w3oi2TWfYe0eZgd+gjZCbsydN7lzWysDt+gw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+
+"@babel/plugin-transform-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
+  integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-sticky-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
+  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+
+"@babel/plugin-transform-sticky-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
+  integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-template-literals@^7.0.0":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-template-literals@^7.10.4", "@babel/plugin-transform-template-literals@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
+  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-template-literals@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz#966b15d153a991172a540a69ad5e1845ced990b5"
+  integrity sha512-OmGDL5/J0CJPJZTHZbi2XpO0tyT2Ia7fzpW5GURwdtp2X3fMmN8au/ej6peC/T33/+CRiIpA8Krse8hFGVmT5Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-typeof-symbol@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
+  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-typeof-symbol@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.26.7.tgz#d0e33acd9223744c1e857dbd6fa17bd0a3786937"
+  integrity sha512-jfoTXXZTgGg36BmhqT3cAYK5qkmqvJpvNrPhaK/52Vgjhw4Rq29s9UqpWWV0D6yuRmgiFH/BUVlkl96zJWqnaw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-typescript@^7.25.9":
+  version "7.26.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.8.tgz#2e9caa870aa102f50d7125240d9dbf91334b0950"
+  integrity sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-syntax-typescript" "^7.25.9"
+
+"@babel/plugin-transform-unicode-escapes@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
+  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-escapes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
+  integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-property-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
+  integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
+  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
+  integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
+  integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/preset-env@7.26.9", "@babel/preset-env@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.9.tgz#2ec64e903d0efe743699f77a10bdf7955c2123c3"
+  integrity sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==
+  dependencies:
+    "@babel/compat-data" "^7.26.8"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.9"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.9"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.9"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions" "^7.26.0"
+    "@babel/plugin-syntax-import-attributes" "^7.26.0"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.26.8"
+    "@babel/plugin-transform-async-to-generator" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.26.5"
+    "@babel/plugin-transform-block-scoping" "^7.25.9"
+    "@babel/plugin-transform-class-properties" "^7.25.9"
+    "@babel/plugin-transform-class-static-block" "^7.26.0"
+    "@babel/plugin-transform-classes" "^7.25.9"
+    "@babel/plugin-transform-computed-properties" "^7.25.9"
+    "@babel/plugin-transform-destructuring" "^7.25.9"
+    "@babel/plugin-transform-dotall-regex" "^7.25.9"
+    "@babel/plugin-transform-duplicate-keys" "^7.25.9"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-dynamic-import" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
+    "@babel/plugin-transform-export-namespace-from" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.26.9"
+    "@babel/plugin-transform-function-name" "^7.25.9"
+    "@babel/plugin-transform-json-strings" "^7.25.9"
+    "@babel/plugin-transform-literals" "^7.25.9"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.25.9"
+    "@babel/plugin-transform-modules-amd" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.9"
+    "@babel/plugin-transform-modules-umd" "^7.25.9"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-new-target" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.26.6"
+    "@babel/plugin-transform-numeric-separator" "^7.25.9"
+    "@babel/plugin-transform-object-rest-spread" "^7.25.9"
+    "@babel/plugin-transform-object-super" "^7.25.9"
+    "@babel/plugin-transform-optional-catch-binding" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+    "@babel/plugin-transform-private-methods" "^7.25.9"
+    "@babel/plugin-transform-private-property-in-object" "^7.25.9"
+    "@babel/plugin-transform-property-literals" "^7.25.9"
+    "@babel/plugin-transform-regenerator" "^7.25.9"
+    "@babel/plugin-transform-regexp-modifiers" "^7.26.0"
+    "@babel/plugin-transform-reserved-words" "^7.25.9"
+    "@babel/plugin-transform-shorthand-properties" "^7.25.9"
+    "@babel/plugin-transform-spread" "^7.25.9"
+    "@babel/plugin-transform-sticky-regex" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.26.8"
+    "@babel/plugin-transform-typeof-symbol" "^7.26.7"
+    "@babel/plugin-transform-unicode-escapes" "^7.25.9"
+    "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.11.0"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.40.0"
+    semver "^6.3.1"
+
+"@babel/preset-env@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.0.tgz#860ee38f2ce17ad60480c2021ba9689393efb796"
+  integrity sha512-2u1/k7rG/gTh02dylX2kL3S0IJNF+J6bfDSp4DI2Ma8QN6Y9x9pmAax59fsCk6QUQG0yqH47yJWA+u1I1LccAg==
+  dependencies:
+    "@babel/compat-data" "^7.11.0"
+    "@babel/helper-compilation-targets" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
+    "@babel/plugin-proposal-class-properties" "^7.10.4"
+    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
+    "@babel/plugin-proposal-export-namespace-from" "^7.10.4"
+    "@babel/plugin-proposal-json-strings" "^7.10.4"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.11.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
+    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.11.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
+    "@babel/plugin-proposal-optional-chaining" "^7.11.0"
+    "@babel/plugin-proposal-private-methods" "^7.10.4"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.10.4"
+    "@babel/plugin-transform-arrow-functions" "^7.10.4"
+    "@babel/plugin-transform-async-to-generator" "^7.10.4"
+    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
+    "@babel/plugin-transform-block-scoping" "^7.10.4"
+    "@babel/plugin-transform-classes" "^7.10.4"
+    "@babel/plugin-transform-computed-properties" "^7.10.4"
+    "@babel/plugin-transform-destructuring" "^7.10.4"
+    "@babel/plugin-transform-dotall-regex" "^7.10.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
+    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
+    "@babel/plugin-transform-for-of" "^7.10.4"
+    "@babel/plugin-transform-function-name" "^7.10.4"
+    "@babel/plugin-transform-literals" "^7.10.4"
+    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
+    "@babel/plugin-transform-modules-amd" "^7.10.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
+    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
+    "@babel/plugin-transform-modules-umd" "^7.10.4"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
+    "@babel/plugin-transform-new-target" "^7.10.4"
+    "@babel/plugin-transform-object-super" "^7.10.4"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+    "@babel/plugin-transform-property-literals" "^7.10.4"
+    "@babel/plugin-transform-regenerator" "^7.10.4"
+    "@babel/plugin-transform-reserved-words" "^7.10.4"
+    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
+    "@babel/plugin-transform-spread" "^7.11.0"
+    "@babel/plugin-transform-sticky-regex" "^7.10.4"
+    "@babel/plugin-transform-template-literals" "^7.10.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
+    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
+    "@babel/plugin-transform-unicode-regex" "^7.10.4"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.11.0"
+    browserslist "^4.12.0"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/preset-flow@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.10.4.tgz#e0d9c72f8cb02d1633f6a5b7b16763aa2edf659f"
+  integrity sha512-XI6l1CptQCOBv+ZKYwynyswhtOKwpZZp5n0LG1QKCo8erRhqjoQV6nvx61Eg30JHpysWQSBwA2AWRU3pBbSY5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-flow-strip-types" "^7.10.4"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
+  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
+  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
+
+"@babel/preset-react@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.23.3.tgz#f73ca07e7590f977db07eb54dbe46538cc015709"
+  integrity sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
+    "@babel/plugin-transform-react-display-name" "^7.23.3"
+    "@babel/plugin-transform-react-jsx" "^7.22.15"
+    "@babel/plugin-transform-react-jsx-development" "^7.22.5"
+    "@babel/plugin-transform-react-pure-annotations" "^7.23.3"
+
+"@babel/preset-typescript@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
+  integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-typescript" "^7.25.9"
+
+"@babel/register@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.14.5.tgz#d0eac615065d9c2f1995842f85d6e56c345f3233"
+  integrity sha512-TjJpGz/aDjFGWsItRBQMOFTrmTI9tr79CHOK+KIvLeCkbxuOAk2M5QHjvruIMGoo9OuccMh5euplPzc5FjAKGg==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.0"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.0.0":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
+  integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/parser" "^7.12.13"
+    "@babel/types" "^7.12.13"
+
+"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.15", "@babel/template@^7.24.0", "@babel/template@^7.3.3":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
+  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.24.0"
+    "@babel/types" "^7.24.0"
+
+"@babel/template@^7.24.7", "@babel/template@^7.25.9", "@babel/template@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2"
+  integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/parser" "^7.26.9"
+    "@babel/types" "^7.26.9"
+
+"@babel/template@^7.27.2":
+  version "7.27.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
+  integrity sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/parser" "^7.27.2"
+    "@babel/types" "^7.27.1"
+
+"@babel/template@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
+  integrity sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/traverse@^7.0.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.3.tgz#a826215b011c9b4f73f3a893afbc05151358bf9a"
+  integrity sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.8.3"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.8.3"
+    "@babel/types" "^7.8.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.0.tgz#9b996ce1b98f53f7c3e4175115605d56ed07dd24"
+  integrity sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.0"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.0"
+    "@babel/types" "^7.11.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/traverse@^7.20.12", "@babel/traverse@^7.20.7", "@babel/traverse@^7.24.5", "@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.9.tgz#4398f2394ba66d05d988b2ad13c219a2c857461a"
+  integrity sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.9"
+    "@babel/parser" "^7.26.9"
+    "@babel/template" "^7.26.9"
+    "@babel/types" "^7.26.9"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.26.8":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380"
+  integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.10"
+    "@babel/parser" "^7.26.10"
+    "@babel/template" "^7.26.9"
+    "@babel/types" "^7.26.10"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.27.1", "@babel/traverse@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.28.3.tgz#6911a10795d2cce43ec6a28cffc440cca2593434"
+  integrity sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.28.3"
+    "@babel/helper-globals" "^7.28.0"
+    "@babel/parser" "^7.28.3"
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.2"
+    debug "^4.3.1"
+
+"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.13", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.25.9", "@babel/types@^7.26.9", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.8.3":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.9.tgz#08b43dec79ee8e682c2ac631c010bdcac54a21ce"
+  integrity sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@babel/types@^7.24.7", "@babel/types@^7.26.10":
+  version "7.26.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259"
+  integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2":
+  version "7.28.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.2.tgz#da9db0856a9a88e0a13b019881d7513588cf712b"
+  integrity sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
+"@devicefarmer/adbkit-logcat@^2.1.2":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit-logcat/-/adbkit-logcat-2.1.3.tgz#c7a1fb58e500f5799711f32906a2210c0d1ac5ac"
+  integrity sha512-yeaGFjNBc/6+svbDeul1tNHtNChw6h8pSHAt5D+JsedUrMTN7tla7B15WLDyekxsuS2XlZHRxpuC6m92wiwCNw==
+
+"@devicefarmer/adbkit-monkey@~1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit-monkey/-/adbkit-monkey-1.2.1.tgz#28cd6a121c5d572588081dd1c53454c604eef241"
+  integrity sha512-ZzZY/b66W2Jd6NHbAhLyDWOEIBWC11VizGFk7Wx7M61JZRz7HR9Cq5P+65RKWUU7u6wgsE8Lmh9nE4Mz+U2eTg==
+
+"@devicefarmer/adbkit@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit/-/adbkit-3.2.6.tgz#9839cac53a3cfe0d80a9e89675664755f7a100c6"
+  integrity sha512-8lO1hSeTgtxcOHhp4tTWq/JaOysp5KNbbyFoxNEBnwkCDZu/Bji3ZfOaG++Riv9jN6c9bgdLBOZqJTC5VJPRKQ==
+  dependencies:
+    "@devicefarmer/adbkit-logcat" "^2.1.2"
+    "@devicefarmer/adbkit-monkey" "~1.2.1"
+    bluebird "~3.7"
+    commander "^9.1.0"
+    debug "~4.3.1"
+    node-forge "^1.3.1"
+    split "~1.0.1"
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
+"@electron/get@^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@electron/get/-/get-2.0.2.tgz#ae2a967b22075e9c25aaf00d5941cd79c21efd7e"
+  integrity sha512-eFZVFoRXb3GFGd7Ak7W4+6jBl9wBtiZ4AaYOse97ej6mKj5tkyO0dUnUChs1IhJZtx1BENo4/p4WUTXpi6vT+g==
+  dependencies:
+    debug "^4.1.1"
+    env-paths "^2.2.0"
+    fs-extra "^8.1.0"
+    got "^11.8.5"
+    progress "^2.0.3"
+    semver "^6.2.0"
+    sumchecker "^3.0.1"
+  optionalDependencies:
+    global-agent "^3.0.0"
+
+"@elg/speedscope@1.9.0-a6f84db":
+  version "1.9.0-a6f84db"
+  resolved "https://registry.yarnpkg.com/@elg/speedscope/-/speedscope-1.9.0-a6f84db.tgz#36079096390b9b396dfec5aeac12e971feb46084"
+  integrity sha512-AoGBS1H5s8jrqIh51P8tZnO9i02w7jBJsd0W6+nrF2tLce502zb2rOyot4iv4fnvhmjnM6VFPBLjE2DfElg8Dw==
+  dependencies:
+    opn "5.3.0"
+    react "^16.13.1"
+
+"@esbuild/aix-ppc64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz#c33cf6bbee34975626b01b80451cbb72b4c6c91d"
+  integrity sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==
+
+"@esbuild/android-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz#ea766015c7d2655164f22100d33d7f0308a28d6d"
+  integrity sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==
+
+"@esbuild/android-arm@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.1.tgz#e84d2bf2fe2e6177a0facda3a575b2139fd3cb9c"
+  integrity sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==
+
+"@esbuild/android-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.1.tgz#58337bee3bc6d78d10425e5500bd11370cfdfbed"
+  integrity sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==
+
+"@esbuild/darwin-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz#a46805c1c585d451aa83be72500bd6e8495dd591"
+  integrity sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==
+
+"@esbuild/darwin-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz#0643e003bb238c63fc93ddbee7d26a003be3cd98"
+  integrity sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==
+
+"@esbuild/freebsd-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz#cff18da5469c09986b93e87979de5d6872fe8f8e"
+  integrity sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==
+
+"@esbuild/freebsd-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz#362fc09c2de14987621c1878af19203c46365dde"
+  integrity sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==
+
+"@esbuild/linux-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz#aa90d5b02efc97a271e124e6d1cea490634f7498"
+  integrity sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==
+
+"@esbuild/linux-arm@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz#dfcefcbac60a20918b19569b4b657844d39db35a"
+  integrity sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==
+
+"@esbuild/linux-ia32@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz#6f9527077ccb7953ed2af02e013d4bac69f13754"
+  integrity sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==
+
+"@esbuild/linux-loong64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz#287d2412a5456e5860c2839d42a4b51284d1697c"
+  integrity sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==
+
+"@esbuild/linux-mips64el@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz#530574b9e1bc5d20f7a4f44c5f045e26f3783d57"
+  integrity sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==
+
+"@esbuild/linux-ppc64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz#5d7e6b283a0b321ea42c6bc0abeb9eb99c1f5589"
+  integrity sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==
+
+"@esbuild/linux-riscv64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz#14fa0cd073c26b4ee2465d18cd1e18eea7859fa8"
+  integrity sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==
+
+"@esbuild/linux-s390x@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz#e677b4b9d1b384098752266ccaa0d52a420dc1aa"
+  integrity sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==
+
+"@esbuild/linux-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz#f1c796b78fff5ce393658313e8c58613198d9954"
+  integrity sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==
+
+"@esbuild/netbsd-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz#0d280b7dfe3973f111b02d5fe9f3063b92796d29"
+  integrity sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==
+
+"@esbuild/netbsd-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz#be663893931a4bb3f3a009c5cc24fa9681cc71c0"
+  integrity sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==
+
+"@esbuild/openbsd-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz#d9021b884233673a05dc1cc26de0bf325d824217"
+  integrity sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==
+
+"@esbuild/openbsd-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz#9f1dc1786ed2e2938c404b06bcc48be9a13250de"
+  integrity sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==
+
+"@esbuild/sunos-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz#89aac24a4b4115959b3f790192cf130396696c27"
+  integrity sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==
+
+"@esbuild/win32-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz#354358647a6ea98ea6d243bf48bdd7a434999582"
+  integrity sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==
+
+"@esbuild/win32-ia32@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz#8cea7340f2647eba951a041dc95651e3908cd4cb"
+  integrity sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==
+
+"@esbuild/win32-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz#7d79922cb2d88f9048f06393dbf62d2e4accb584"
+  integrity sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==
+
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.5.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/eslintrc@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.0.2.tgz#36180f8e85bf34d2fe3ccc2261e8e204a411ab4e"
+  integrity sha512-wV19ZEGEMAC1eHgrS7UQPqsdEiCIbTKTasEfcXAigzoXICcqZSjBZEHlZwNVvKg6UBCjSlos84XiLqsRJnIcIg==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^10.0.1"
+    globals "^14.0.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
+
+"@eslint/js@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.0.0.tgz#1a9e4b4c96d8c7886e0110ed310a0135144a1691"
+  integrity sha512-RThY/MnKrhubF6+s1JflwUjPEsnCEmYCWwqa/aRISKWNXGZ9epUwft4bUMM35SdKF9xvBrLydAM1RDHd1Z//ZQ==
+
+"@fastify/busboy@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
+  integrity sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==
+
+"@fluent/syntax@0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@fluent/syntax/-/syntax-0.19.0.tgz#43f882faba6908b0f1013f6a94e009d0dfbdcb77"
+  integrity sha512-5D2qVpZrgpjtqU4eNOcWGp1gnUCgjfM+vKGE2y03kKN6z5EBhtx0qdRFbg8QuNNj8wXNoX93KJoYb+NqoxswmQ==
+
+"@gitbeaker/core@^21.7.0":
+  version "21.7.0"
+  resolved "https://registry.yarnpkg.com/@gitbeaker/core/-/core-21.7.0.tgz#fcf7a12915d39f416e3f316d0a447a814179b8e5"
+  integrity sha512-cw72rE7tA27wc6JJe1WqeAj9v/6w0S7XJcEji+bRNjTlUfE1zgfW0Gf1mbGUi7F37SOABGCosQLfg9Qe63aIqA==
+  dependencies:
+    "@gitbeaker/requester-utils" "^21.7.0"
+    form-data "^3.0.0"
+    li "^1.3.0"
+    xcase "^2.0.1"
+
+"@gitbeaker/node@^21.3.0":
+  version "21.7.0"
+  resolved "https://registry.yarnpkg.com/@gitbeaker/node/-/node-21.7.0.tgz#2c19613f44ee497a8808c555abec614ebd2dfcad"
+  integrity sha512-OdM3VcTKYYqboOsnbiPcO0XimXXpYK4gTjARBZ6BWc+1LQXKmqo+OH6oUbyxOoaFu9hHECafIt3WZU3NM4sZTg==
+  dependencies:
+    "@gitbeaker/core" "^21.7.0"
+    "@gitbeaker/requester-utils" "^21.7.0"
+    form-data "^3.0.0"
+    got "^11.1.4"
+    xcase "^2.0.1"
+
+"@gitbeaker/requester-utils@^21.7.0":
+  version "21.7.0"
+  resolved "https://registry.yarnpkg.com/@gitbeaker/requester-utils/-/requester-utils-21.7.0.tgz#e9a9cfaf268d2a99eb7bbdc930943240a5f88878"
+  integrity sha512-eLTaVXlBnh8Qimj6QuMMA06mu/mLcJm3dy8nqhhn/Vm/D25sPrvpGwmbfFyvzj6QujPqtHvFfsCHtyZddL01qA==
+  dependencies:
+    form-data "^3.0.0"
+    query-string "^6.12.1"
+    xcase "^2.0.1"
+
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/config-array@^0.12.3":
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.12.3.tgz#a6216d90f81a30bedd1d4b5d799b47241f318072"
+  integrity sha512-jsNnTBlMWuTpDkeE3on7+dWJi0D6fdDfeANj/w7MpS8ztROCoLvIO2nG0CcFj+E4k8j4QrSTh4Oryi3i2G669g==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@humanwhocodes/object-schema@^2.0.2", "@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.7.0.tgz#cd4822dbdb84529265c5a2bdb529a3c9cc950ffc"
+  integrity sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    slash "^3.0.0"
+
+"@jest/core@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.7.0.tgz#b6cccc239f30ff36609658c5a5e2291757ce448f"
+  integrity sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/reporters" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.7.0"
+    jest-config "^29.7.0"
+    jest-haste-map "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-resolve-dependencies "^29.7.0"
+    jest-runner "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    jest-watcher "^29.7.0"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.7.0.tgz#24d61f54ff1f786f3cd4073b4b94416383baf2a7"
+  integrity sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==
+  dependencies:
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
+
+"@jest/expect-utils@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
+  integrity sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==
+  dependencies:
+    jest-get-type "^29.6.3"
+
+"@jest/expect@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.7.0.tgz#76a3edb0cb753b70dfbfe23283510d3d45432bf2"
+  integrity sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==
+  dependencies:
+    expect "^29.7.0"
+    jest-snapshot "^29.7.0"
+
+"@jest/fake-timers@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.7.0.tgz#fd91bf1fffb16d7d0d24a426ab1a47a49881a565"
+  integrity sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.7.0"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
+
+"@jest/globals@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.7.0.tgz#8d9290f9ec47ff772607fa864ca1d5a2efae1d4d"
+  integrity sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/expect" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    jest-mock "^29.7.0"
+
+"@jest/reporters@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.7.0.tgz#04b262ecb3b8faa83b0b3d321623972393e8f4c7"
+  integrity sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^6.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    jest-worker "^29.7.0"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/schemas@^29.4.0":
+  version "29.4.0"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.0.tgz#0d6ad358f295cc1deca0b643e6b4c86ebd539f17"
+  integrity sha512-0E01f/gOZeNTG76i5eWWSupvSHaIINrTie7vCyjiYFKgzNdyEGd12BUv4oNBFHOqlHDbtoJi3HrQ38KCC90NsQ==
+  dependencies:
+    "@sinclair/typebox" "^0.25.16"
+
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
+"@jest/source-map@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.3.tgz#d90ba772095cf37a34a5eb9413f1b562a08554c4"
+  integrity sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/test-result@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.7.0.tgz#8db9a80aa1a097bb2262572686734baed9b1657c"
+  integrity sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz#6cef977ce1d39834a3aea887a1726628a6f072ce"
+  integrity sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==
+  dependencies:
+    "@jest/test-result" "^29.7.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    slash "^3.0.0"
+
+"@jest/transform@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.7.0.tgz#df2dd9c346c7d7768b8a06639994640c642e284c"
+  integrity sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.6.3"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-util "^29.7.0"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.2"
+
+"@jest/types@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
+  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
+"@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/gen-mapping@^0.3.12":
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
+  integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.0.1", "@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.2":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.3.tgz#8108265659d4c33e72ffe14e33d6cc5eb59f2fda"
+  integrity sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.13":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/sourcemap-codec@1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.28":
+  version "0.3.30"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz#4a76c4daeee5df09f5d3940e087442fb36ce2b99"
+  integrity sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@kwsites/file-exists@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@kwsites/file-exists/-/file-exists-1.1.1.tgz#ad1efcac13e1987d8dbaf235ef3be5b0d96faa99"
+  integrity sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==
+  dependencies:
+    debug "^4.1.1"
+
+"@kwsites/promise-deferred@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz#8ace5259254426ccef57f3175bc64ed7095ed919"
+  integrity sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==
+
+"@leichtgewicht/ip-codec@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
+  integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
+
+"@mdn/browser-compat-data@5.5.34":
+  version "5.5.34"
+  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.5.34.tgz#ce64a095da3d216bfa55c6332f59e30ae57d634f"
+  integrity sha512-e8k7+8r3jiJuP7FMH6AL1OnmfQqLyABhTM+NmRDvFeAbMgtFcNQLHpmT7uza5cBnxI01+CAU3aSsIgcKGRdEBQ==
+
+"@nodelib/fs.scandir@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
+  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.3"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
+  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
+
+"@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
+  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.3"
+    fastq "^1.6.0"
+
+"@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@octokit/auth-token@^2.4.4":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.5.0.tgz#27c37ea26c205f28443402477ffd261311f21e36"
+  integrity sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+
+"@octokit/core@^3.5.1":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.6.0.tgz#3376cb9f3008d9b3d110370d90e0a1fcd5fe6085"
+  integrity sha512-7RKRKuA4xTjMhY+eG3jthb3hlZCsOwg3rztWh75Xc+ShDWOfDDATWbeZpAHBNRpm4Tv9WgBMOy1zEJYXG6NJ7Q==
+  dependencies:
+    "@octokit/auth-token" "^2.4.4"
+    "@octokit/graphql" "^4.5.8"
+    "@octokit/request" "^5.6.3"
+    "@octokit/request-error" "^2.0.5"
+    "@octokit/types" "^6.0.3"
+    before-after-hook "^2.2.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/endpoint@^6.0.1":
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.12.tgz#3b4d47a4b0e79b1027fb8d75d4221928b2d05658"
+  integrity sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    is-plain-object "^5.0.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/graphql@^4.5.8":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.8.0.tgz#664d9b11c0e12112cbf78e10f49a05959aa22cc3"
+  integrity sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==
+  dependencies:
+    "@octokit/request" "^5.6.0"
+    "@octokit/types" "^6.0.3"
+    universal-user-agent "^6.0.0"
+
+"@octokit/openapi-types@^12.11.0":
+  version "12.11.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-12.11.0.tgz#da5638d64f2b919bca89ce6602d059f1b52d3ef0"
+  integrity sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==
+
+"@octokit/plugin-paginate-rest@^2.16.8":
+  version "2.21.3"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz#7f12532797775640dbb8224da577da7dc210c87e"
+  integrity sha512-aCZTEf0y2h3OLbrgKkrfFdjRL6eSOo8komneVQJnYecAxIej7Bafor2xhuDJOIFau4pk0i/P28/XgtbyPF0ZHw==
+  dependencies:
+    "@octokit/types" "^6.40.0"
+
+"@octokit/plugin-request-log@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85"
+  integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
+
+"@octokit/plugin-rest-endpoint-methods@^5.12.0":
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.16.2.tgz#7ee8bf586df97dd6868cf68f641354e908c25342"
+  integrity sha512-8QFz29Fg5jDuTPXVtey05BLm7OB+M8fnvE64RNegzX7U+5NUXcOcnpTIK0YfSHBg8gYd0oxIq3IZTe9SfPZiRw==
+  dependencies:
+    "@octokit/types" "^6.39.0"
+    deprecation "^2.3.1"
+
+"@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.1.0.tgz#9e150357831bfc788d13a4fd4b1913d60c74d677"
+  integrity sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    deprecation "^2.0.0"
+    once "^1.4.0"
+
+"@octokit/request@^5.6.0", "@octokit/request@^5.6.3":
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.6.3.tgz#19a022515a5bba965ac06c9d1334514eb50c48b0"
+  integrity sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==
+  dependencies:
+    "@octokit/endpoint" "^6.0.1"
+    "@octokit/request-error" "^2.1.0"
+    "@octokit/types" "^6.16.1"
+    is-plain-object "^5.0.0"
+    node-fetch "^2.6.7"
+    universal-user-agent "^6.0.0"
+
+"@octokit/rest@^16.43.0 || ^17.11.0 || ^18.12.0", "@octokit/rest@^18.12.0":
+  version "18.12.0"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.12.0.tgz#f06bc4952fc87130308d810ca9d00e79f6988881"
+  integrity sha512-gDPiOHlyGavxr72y0guQEhLsemgVjwRePayJ+FcKc2SJqKUbxbkvf5kAZEWA/MKvsfYlQAMVzNJE3ezQcxMJ2Q==
+  dependencies:
+    "@octokit/core" "^3.5.1"
+    "@octokit/plugin-paginate-rest" "^2.16.8"
+    "@octokit/plugin-request-log" "^1.0.4"
+    "@octokit/plugin-rest-endpoint-methods" "^5.12.0"
+
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.39.0", "@octokit/types@^6.40.0":
+  version "6.41.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.41.0.tgz#e58ef78d78596d2fb7df9c6259802464b5f84a04"
+  integrity sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==
+  dependencies:
+    "@octokit/openapi-types" "^12.11.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@playwright/test@^1.51.1":
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e"
+  integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==
+  dependencies:
+    playwright "1.51.1"
+
+"@pmmmwh/react-refresh-webpack-plugin@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.1.tgz#a4db0ed8e58c2f8566161c9a8cdf1d095c9a891b"
+  integrity sha512-MzM87WdX2r2KRFfhEho7oGyK1XRE/J9WwjB3v6oLQHN0dzBypBZxSWjnoYx+RWneRCsg8Sin1myf+EjX1fqIbQ==
+  dependencies:
+    ansi-html "^0.0.7"
+    error-stack-parser "^2.0.6"
+    html-entities "^1.2.1"
+    native-url "^0.2.6"
+    schema-utils "^2.6.5"
+    source-map "^0.7.3"
+
+"@pnpm/config.env-replace@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz#ab29da53df41e8948a00f2433f085f54de8b3a4c"
+  integrity sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==
+
+"@pnpm/network.ca-file@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz#2ab05e09c1af0cdf2fcf5035bea1484e222f7983"
+  integrity sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==
+  dependencies:
+    graceful-fs "4.2.10"
+
+"@pnpm/npm-conf@^2.1.0":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz#0058baf1c26cbb63a828f0193795401684ac86f0"
+  integrity sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==
+  dependencies:
+    "@pnpm/config.env-replace" "^1.1.0"
+    "@pnpm/network.ca-file" "^1.0.1"
+    config-chain "^1.1.11"
+
+"@reach/auto-id@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
+  integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
+"@reach/descendants@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
+  integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
+"@reach/dropdown@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@reach/dropdown/-/dropdown-0.16.1.tgz#0af4fd17e590ca852f6bb27f34d525f07510a326"
+  integrity sha512-56ITaEAWYFvEYSJz0RqFndrHIDhSuhmobmgB4Wy1q6Aj/3F20Bns1mGu61/ny5Ld8spgP1mJTJViacHsn7x/Dg==
+  dependencies:
+    "@reach/auto-id" "0.16.0"
+    "@reach/descendants" "0.16.1"
+    "@reach/popover" "0.16.0"
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
+"@reach/menu-button@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.16.1.tgz#a81ab9d2ee21874bf8d957b29a388b8daa2b7cfd"
+  integrity sha512-0Oh/Oq+GupS48LuBdIu8VyMJFLlWReRAGgT24SrcAAxmlyO/qUP9KJS9D1CEvl2KUoSk2wO0Fu885E4eaBYucA==
+  dependencies:
+    "@reach/dropdown" "0.16.1"
+    "@reach/popover" "0.16.0"
+    "@reach/utils" "0.16.0"
+    prop-types "^15.7.2"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/observe-rect@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
+  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
+
+"@reach/popover@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623"
+  integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA==
+  dependencies:
+    "@reach/portal" "0.16.0"
+    "@reach/rect" "0.16.0"
+    "@reach/utils" "0.16.0"
+    tabbable "^4.0.0"
+    tslib "^2.3.0"
+
+"@reach/portal@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3"
+  integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
+"@reach/rect@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
+  integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q==
+  dependencies:
+    "@reach/observe-rect" "1.2.0"
+    "@reach/utils" "0.16.0"
+    prop-types "^15.7.2"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/tooltip@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.16.0.tgz#364179853d37432796ec242d987e28bde1037e19"
+  integrity sha512-kZr/OqfmmBQVBxJh+OQRCq++T5f6iQaWinpLnwD5FlG5HRKPwNzTnsy+hpyY9pR2mabk+96POp/TsT4Dv3K/qQ==
+  dependencies:
+    "@reach/auto-id" "0.16.0"
+    "@reach/portal" "0.16.0"
+    "@reach/rect" "0.16.0"
+    "@reach/utils" "0.16.0"
+    "@reach/visually-hidden" "0.16.0"
+    prop-types "^15.7.2"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/utils@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
+  integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/visually-hidden@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.16.0.tgz#2a5e834af9e93c554065ff8cbb0907fbeb26ad02"
+  integrity sha512-IIayZ3jzJtI5KfcfRVtOMFkw2ef/1dMT8D9BUuFcU2ORZAWLNvnzj1oXNoIfABKl5wtsLjY6SGmkYQ+tMPN8TA==
+  dependencies:
+    prop-types "^15.7.2"
+    tslib "^2.3.0"
+
+"@rollup/plugin-babel@^6.0.3":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-6.0.3.tgz#07ccde15de278c581673034ad6accdb4a153dfeb"
+  integrity sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@rollup/pluginutils" "^5.0.1"
+
+"@rollup/plugin-commonjs@^24.0.1":
+  version "24.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz#d54ba26a3e3c495dc332bd27a81f7e9e2df46f90"
+  integrity sha512-15LsiWRZk4eOGqvrJyu3z3DaBu5BhXIMeWnijSRvd8irrrg9SHpQ1pH+BUK4H6Z9wL9yOxZJMTLU+Au86XHxow==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    commondir "^1.0.1"
+    estree-walker "^2.0.2"
+    glob "^8.0.3"
+    is-reference "1.2.1"
+    magic-string "^0.27.0"
+
+"@rollup/plugin-node-resolve@^15.0.1":
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz#72be449b8e06f6367168d5b3cd5e2802e0248971"
+  integrity sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    "@types/resolve" "1.20.2"
+    deepmerge "^4.2.2"
+    is-builtin-module "^3.2.0"
+    is-module "^1.0.0"
+    resolve "^1.22.1"
+
+"@rollup/plugin-replace@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-5.0.2.tgz#45f53501b16311feded2485e98419acb8448c61d"
+  integrity sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    magic-string "^0.27.0"
+
+"@rollup/plugin-typescript@^12.1.2":
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-12.1.2.tgz#ebaeec2e7376faa889030ccd7cb485a649e63118"
+  integrity sha512-cdtSp154H5sv637uMr1a8OTWB0L1SWDSm1rDGiyfcGcvQ6cuTs4MDk2BVEBGysUWago4OJN4EQZqOTl/QY3Jgg==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.0"
+    resolve "^1.22.1"
+
+"@rollup/pluginutils@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
+"@rollup/pluginutils@^5.1.0":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz#bb94f1f9eaaac944da237767cdfee6c5b2262d4a"
+  integrity sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^4.0.2"
+
+"@rollup/rollup-android-arm-eabi@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz#e1d7700735f7e8de561ef7d1fa0362082a180c43"
+  integrity sha512-uYQ2WfPaqz5QtVgMxfN6NpLD+no0MYHDBywl7itPYd3K5TjjSghNKmX8ic9S8NU8w81NVhJv/XojcHptRly7qQ==
+
+"@rollup/rollup-android-arm64@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.35.0.tgz#fa6cdfb1fc9e2c8e227a7f35d524d8f7f90cf4db"
+  integrity sha512-FtKddj9XZudurLhdJnBl9fl6BwCJ3ky8riCXjEw3/UIbjmIY58ppWwPEvU3fNu+W7FUsAsB1CdH+7EQE6CXAPA==
+
+"@rollup/rollup-darwin-arm64@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.35.0.tgz#6da5a1ddc4f11d4a7ae85ab443824cb6bf614e30"
+  integrity sha512-Uk+GjOJR6CY844/q6r5DR/6lkPFOw0hjfOIzVx22THJXMxktXG6CbejseJFznU8vHcEBLpiXKY3/6xc+cBm65Q==
+
+"@rollup/rollup-darwin-x64@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.35.0.tgz#25b74ce2d8d3f9ea8e119b01384d44a1c0a0d3ae"
+  integrity sha512-3IrHjfAS6Vkp+5bISNQnPogRAW5GAV1n+bNCrDwXmfMHbPl5EhTmWtfmwlJxFRUCBZ+tZ/OxDyU08aF6NI/N5Q==
+
+"@rollup/rollup-freebsd-arm64@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.35.0.tgz#be3d39e3441df5d6e187c83d158c60656c82e203"
+  integrity sha512-sxjoD/6F9cDLSELuLNnY0fOrM9WA0KrM0vWm57XhrIMf5FGiN8D0l7fn+bpUeBSU7dCgPV2oX4zHAsAXyHFGcQ==
+
+"@rollup/rollup-freebsd-x64@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.35.0.tgz#cd932d3ec679711efd65ca25821fb318e25b7ce4"
+  integrity sha512-2mpHCeRuD1u/2kruUiHSsnjWtHjqVbzhBkNVQ1aVD63CcexKVcQGwJ2g5VphOd84GvxfSvnnlEyBtQCE5hxVVw==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.35.0.tgz#d300b74c6f805474225632f185daaeae760ac2bb"
+  integrity sha512-mrA0v3QMy6ZSvEuLs0dMxcO2LnaCONs1Z73GUDBHWbY8tFFocM6yl7YyMu7rz4zS81NDSqhrUuolyZXGi8TEqg==
+
+"@rollup/rollup-linux-arm-musleabihf@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.35.0.tgz#2caac622380f314c41934ed1e68ceaf6cc380cc3"
+  integrity sha512-DnYhhzcvTAKNexIql8pFajr0PiDGrIsBYPRvCKlA5ixSS3uwo/CWNZxB09jhIapEIg945KOzcYEAGGSmTSpk7A==
+
+"@rollup/rollup-linux-arm64-gnu@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.35.0.tgz#1ec841650b038cc15c194c26326483fd7ebff3e3"
+  integrity sha512-uagpnH2M2g2b5iLsCTZ35CL1FgyuzzJQ8L9VtlJ+FckBXroTwNOaD0z0/UF+k5K3aNQjbm8LIVpxykUOQt1m/A==
+
+"@rollup/rollup-linux-arm64-musl@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.35.0.tgz#2fc70a446d986e27f6101ea74e81746987f69150"
+  integrity sha512-XQxVOCd6VJeHQA/7YcqyV0/88N6ysSVzRjJ9I9UA/xXpEsjvAgDTgH3wQYz5bmr7SPtVK2TsP2fQ2N9L4ukoUg==
+
+"@rollup/rollup-linux-loongarch64-gnu@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.35.0.tgz#561bd045cd9ce9e08c95f42e7a8688af8c93d764"
+  integrity sha512-5pMT5PzfgwcXEwOaSrqVsz/LvjDZt+vQ8RT/70yhPU06PTuq8WaHhfT1LW+cdD7mW6i/J5/XIkX/1tCAkh1W6g==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.35.0.tgz#45d849a0b33813f33fe5eba9f99e0ff15ab5caad"
+  integrity sha512-c+zkcvbhbXF98f4CtEIP1EBA/lCic5xB0lToneZYvMeKu5Kamq3O8gqrxiYYLzlZH6E3Aq+TSW86E4ay8iD8EA==
+
+"@rollup/rollup-linux-riscv64-gnu@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.35.0.tgz#78dde3e6fcf5b5733a97d0a67482d768aa1e83a5"
+  integrity sha512-s91fuAHdOwH/Tad2tzTtPX7UZyytHIRR6V4+2IGlV0Cej5rkG0R61SX4l4y9sh0JBibMiploZx3oHKPnQBKe4g==
+
+"@rollup/rollup-linux-s390x-gnu@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.35.0.tgz#2e34835020f9e03dfb411473a5c2a0e8a9c5037b"
+  integrity sha512-hQRkPQPLYJZYGP+Hj4fR9dDBMIM7zrzJDWFEMPdTnTy95Ljnv0/4w/ixFw3pTBMEuuEuoqtBINYND4M7ujcuQw==
+
+"@rollup/rollup-linux-x64-gnu@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.35.0.tgz#4f9774beddc6f4274df57ac99862eb23040de461"
+  integrity sha512-Pim1T8rXOri+0HmV4CdKSGrqcBWX0d1HoPnQ0uw0bdp1aP5SdQVNBy8LjYncvnLgu3fnnCt17xjWGd4cqh8/hA==
+
+"@rollup/rollup-linux-x64-musl@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.35.0.tgz#dfcff2c1aed518b3d23ccffb49afb349d74fb608"
+  integrity sha512-QysqXzYiDvQWfUiTm8XmJNO2zm9yC9P/2Gkrwg2dH9cxotQzunBHYr6jk4SujCTqnfGxduOmQcI7c2ryuW8XVg==
+
+"@rollup/rollup-win32-arm64-msvc@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.35.0.tgz#b0b37e2d77041e3aa772f519291309abf4c03a84"
+  integrity sha512-OUOlGqPkVJCdJETKOCEf1mw848ZyJ5w50/rZ/3IBQVdLfR5jk/6Sr5m3iO2tdPgwo0x7VcncYuOvMhBWZq8ayg==
+
+"@rollup/rollup-win32-ia32-msvc@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.35.0.tgz#5b5a40e44a743ddc0e06b8e1b3982f856dc9ce0a"
+  integrity sha512-2/lsgejMrtwQe44glq7AFFHLfJBPafpsTa6JvP2NGef/ifOa4KBoglVf7AKN7EV9o32evBPRqfg96fEHzWo5kw==
+
+"@rollup/rollup-win32-x64-msvc@4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.35.0.tgz#05f25dbc9981bee1ae6e713daab10397044a46ca"
+  integrity sha512-PIQeY5XDkrOysbQblSW7v3l1MDZzkTEzAfTPkj5VAu3FW8fS4ynyLg2sINp0fp3SjZ8xkRYpLqoKcYqAkhU1dw==
+
+"@sinclair/typebox@^0.25.16":
+  version "0.25.24"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
+  integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
+
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
+
+"@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==
+
+"@sindresorhus/is@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
+  integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
+
+"@sindresorhus/is@^4.0.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
+  integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
+
+"@sindresorhus/is@^5.2.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-5.6.0.tgz#41dd6093d34652cddb5d5bdeee04eafc33826668"
+  integrity sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==
+
+"@sinonjs/commons@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-3.0.1.tgz#1029357e44ca901a615585f6d27738dbc89084cd"
+  integrity sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^10.0.2":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz#55fdff1ecab9f354019129daf4df0dd4d923ea66"
+  integrity sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==
+  dependencies:
+    "@sinonjs/commons" "^3.0.0"
+
+"@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"
+
+"@szmarczak/http-timer@^4.0.5":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
+  integrity sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==
+  dependencies:
+    defer-to-connect "^2.0.0"
+
+"@szmarczak/http-timer@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
+  integrity sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==
+  dependencies:
+    defer-to-connect "^2.0.1"
+
+"@tokenizer/token@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.1.1.tgz#f0d92c12f87079ddfd1b29f614758b9696bc29e3"
+  integrity sha512-XO6INPbZCxdprl+9qa/AAbFFOMzzwqYxpjPgLICrMD6C2FCw6qfJOPcBk6JqqPLSaZ/Qx87qn4rpPmPMwaAK6w==
+
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+
+"@tsconfig/strictest@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@tsconfig/strictest/-/strictest-2.0.5.tgz#2cbc67f207ba87fdec2a84ad79b1708cf4edd93b"
+  integrity sha512-ec4tjL2Rr0pkZ5hww65c+EEPYwxOi4Ryv+0MtjeaSQRJyq322Q27eOQiFbuNgw2hpL4hB1/W/HBGk3VKS43osg==
+
+"@types/babel__core@^7.1.14":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.8"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
+  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
+  integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.5.tgz#7b7502be0aa80cc4ef22978846b983edaafcd4dd"
+  integrity sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
+"@types/body-parser@*":
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
+  integrity sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/bonjour@^3.5.9":
+  version "3.5.10"
+  resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.10.tgz#0f6aadfe00ea414edc86f5d106357cda9701e275"
+  integrity sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/cacheable-request@^6.0.1":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.3.tgz#a430b3260466ca7b5ca5bfd735693b36e7a9d183"
+  integrity sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==
+  dependencies:
+    "@types/http-cache-semantics" "*"
+    "@types/keyv" "^3.1.4"
+    "@types/node" "*"
+    "@types/responselike" "^1.0.0"
+
+"@types/connect-history-api-fallback@^1.3.5":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"
+  integrity sha512-4x5FkPpLipqwthjPsF7ZRbOv3uoLUFkTA9G9v583qi4pACvq0uTELrB8OLUzPWUI4IJIyvM85vzkV1nyiI2Lig==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/node" "*"
+
+"@types/connect@*":
+  version "3.4.35"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
+  integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/eslint-scope@^3.7.3":
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
+  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
+
+"@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"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
+
+"@types/eslint@*":
+  version "8.37.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.37.0.tgz#29cebc6c2a3ac7fea7113207bf5a828fdf4d7ef1"
+  integrity sha512-Piet7dG2JBuDIfohBngQ3rCt7MgO9xCO4xIMKxBThCq5PNRB91IjlJ10eJVwfoNtvTErmxLzwBZ7rHZtbOMmFQ==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/eslint@^9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/estree-jsx@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.5.tgz#858a88ea20f34fe65111f005a689fa1ebf70dc18"
+  integrity sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/estree@*", "@types/estree@1.0.6", "@types/estree@^1.0.0", "@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.33":
+  version "4.17.35"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz#c95dd4424f0d32e525d23812aa8ab8e4d3906c4f"
+  integrity sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
+
+"@types/express@*", "@types/express@^4.17.13":
+  version "4.17.17"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4"
+  integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^4.17.33"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/graceful-fs@^4.1.3":
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz#2a06bc0f68a20ab37b3e36aa238be6abdf49e8b4"
+  integrity sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/http-cache-semantics@*":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
+  integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
+
+"@types/http-cache-semantics@^4.0.2":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz#b979ebad3919799c979b17c72621c0bc0a31c6c4"
+  integrity sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==
+
+"@types/http-proxy@^1.17.8":
+  version "1.17.11"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.11.tgz#0ca21949a5588d55ac2b659b69035c84bd5da293"
+  integrity sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==
+  dependencies:
+    "@types/node" "*"
+
+"@types/invariant@^2.2.35":
+  version "2.2.37"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.37.tgz#1709741e534364d653c87dff22fc76fa94aa7bc0"
+  integrity sha512-IwpIMieE55oGWiXkQPSBY1nw1nFs6bsKXTFskNY8sdS17K24vyEBRQZEwlRS7ZmXCWnJcQtbxWzly+cODWGs2A==
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
+  integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz#53047614ae72e19fc0401d872de3ae2b4ce350bf"
+  integrity sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz#0f03e3d2f670fbdac586e34b433783070cc16f54"
+  integrity sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jsdom@^20.0.0":
+  version "20.0.1"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-20.0.1.tgz#07c14bc19bd2f918c1929541cdaacae894744808"
+  integrity sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==
+  dependencies:
+    "@types/node" "*"
+    "@types/tough-cookie" "*"
+    parse5 "^7.0.0"
+
+"@types/json-schema@*", "@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json-schema@^7.0.12":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@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/json-schema@^7.0.4":
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
+  integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+
+"@types/json-schema@^7.0.8":
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
+  integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
+
+"@types/keyv@^3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-3.1.4.tgz#3ccdb1c6751b0c7e52300bcdacd5bcbf8faa75b6"
+  integrity sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/mime@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
+  integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==
+
+"@types/mime@^1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
+  integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
+
+"@types/minimatch@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
+"@types/node@*":
+  version "20.12.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.11.tgz#c4ef00d3507000d17690643278a60dc55a9dc9be"
+  integrity sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@types/node@^16.11.26":
+  version "16.18.14"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.14.tgz#5465ce598486a703caddbefe8603f8a2cffa3461"
+  integrity sha512-wvzClDGQXOCVNU4APPopC2KtMYukaF1MN/W3xAmslx22Z4/IF1/izDMekuyoUlwfnDHYCIZGaj7jMwnJKBTxKw==
+
+"@types/node@^20.2.5":
+  version "20.17.16"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.17.16.tgz#b33b0edc1bf925b27349e494b871ca4451fabab4"
+  integrity sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==
+  dependencies:
+    undici-types "~6.19.2"
+
+"@types/prettier@^1.0.0 || ^2.0.0 || ^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-3.0.0.tgz#e9bc8160230d3a461dab5c5b41cceef1ef723057"
+  integrity sha512-mFMBfMOz8QxhYVbuINtswBp9VL2b4Y0QqYHwqLz3YbgtfAcat2Dl6Y1o4e22S/OVE6Ebl9m7wWiMT2lSbAs1wA==
+  dependencies:
+    prettier "*"
+
+"@types/q@^1.5.1":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
+  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
+
+"@types/qs@*":
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+
+"@types/range-parser@*":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
+  integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
+
+"@types/resolve@1.20.2":
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
+  integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
+
+"@types/responselike@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"
+  integrity sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==
+  dependencies:
+    "@types/node" "*"
+
+"@types/retry@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+
+"@types/semver@^7.5.0":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
+"@types/send@*":
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.1.tgz#ed4932b8a2a805f1fe362a70f4e62d0ac994e301"
+  integrity sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==
+  dependencies:
+    "@types/mime" "^1"
+    "@types/node" "*"
+
+"@types/serve-index@^1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
+  integrity sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==
+  dependencies:
+    "@types/express" "*"
+
+"@types/serve-static@*", "@types/serve-static@^1.13.10":
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.1.tgz#86b1753f0be4f9a1bee68d459fcda5be4ea52b5d"
+  integrity sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==
+  dependencies:
+    "@types/mime" "*"
+    "@types/node" "*"
+
+"@types/sockjs@^0.3.33":
+  version "0.3.33"
+  resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
+  integrity sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/stack-utils@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
+  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+
+"@types/tough-cookie@*":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
+  integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
+
+"@types/ws@^8.5.1":
+  version "8.5.4"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
+  integrity sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/yargs-parser@*":
+  version "21.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
+  integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
+
+"@types/yargs@^15.0.0":
+  version "15.0.20"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.20.tgz#6d00a124c9f757427d4ca3cbc87daea778053c68"
+  integrity sha512-KIkX+/GgfFitlASYCGoSF+T4XRXhOubJLhkLVtSfsRTe9jWMmuM2g28zQ41BtPTG7TRBb2xHW+LCNVE9QR/vsg==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^17.0.8":
+  version "17.0.32"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.32.tgz#030774723a2f7faafebf645f4e5a48371dca6229"
+  integrity sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yauzl@2.10.3":
+  version "2.10.3"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.3.tgz#e9b2808b4f109504a03cda958259876f61017999"
+  integrity sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==
+  dependencies:
+    "@types/node" "*"
+
+"@types/yauzl@^2.9.1":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
+  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
+  dependencies:
+    "@types/node" "*"
+
+"@typescript-eslint/eslint-plugin@^6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
+  integrity sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/type-utils" "6.21.0"
+    "@typescript-eslint/utils" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/experimental-utils@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
+  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.34.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/experimental-utils@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686"
+  integrity sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/parser-v2@npm:@typescript-eslint/parser@^2.26.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8"
+  integrity sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "2.34.0"
+    "@typescript-eslint/typescript-estree" "2.34.0"
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/parser-v3@npm:@typescript-eslint/parser@^3.10.0":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.10.1.tgz#1883858e83e8b442627e1ac6f408925211155467"
+  integrity sha512-Ug1RcWcrJP02hmtaXVS3axPPTTPnZjupqhgj+NnZ6BCkwSImWk/283347+x9wN+lqOdK9Eo3vsyiyDHgsmiEJw==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "3.10.1"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/parser-v4@npm:@typescript-eslint/parser@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.1.0.tgz#9b0409411725f14cd7faa81a664e5051225961db"
+  integrity sha512-hM/WNCQTzDHgS0Ke3cR9zPndL3OTKr9OoN9CL3UqulsAjYDrglSwIIgswSmHBcSbOzLmgaMARwrQEbIumIglvQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.1.0"
+    "@typescript-eslint/types" "4.1.0"
+    "@typescript-eslint/typescript-estree" "4.1.0"
+    debug "^4.1.1"
+
+"@typescript-eslint/parser-v5@npm:@typescript-eslint/parser@^5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
+  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/parser@^6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+  integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.1.0.tgz#9e389745ee9cfe12252ed1e9958808abd6b3a683"
+  integrity sha512-HD1/u8vFNnxwiHqlWKC/Pigdn0Mvxi84Y6GzbZ5f5sbLrFKu0al02573Er+D63Sw67IffVUXR0uR8rpdfdk+vA==
+  dependencies:
+    "@typescript-eslint/types" "4.1.0"
+    "@typescript-eslint/visitor-keys" "4.1.0"
+
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
+"@typescript-eslint/scope-manager@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+
+"@typescript-eslint/type-utils@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz#6473281cfed4dacabe8004e8521cee0bd9d4c01e"
+  integrity sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/utils" "6.21.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/types@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
+  integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
+
+"@typescript-eslint/types@4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.1.0.tgz#edbd3fec346f34e13ce7aa176b03b497a32c496a"
+  integrity sha512-rkBqWsO7m01XckP9R2YHVN8mySOKKY2cophGM8K5uDK89ArCgahItQYdbg/3n8xMxzu2elss+an1TphlUpDuJw==
+
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
+"@typescript-eslint/types@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
+"@typescript-eslint/typescript-estree@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
+  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
+  dependencies:
+    debug "^4.1.1"
+    eslint-visitor-keys "^1.1.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/typescript-estree@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853"
+  integrity sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==
+  dependencies:
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/visitor-keys" "3.10.1"
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/typescript-estree@4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.1.0.tgz#394046ead25164494218c0e3d6b960695ea967f6"
+  integrity sha512-r6et57qqKAWU173nWyw31x7OfgmKfMEcjJl9vlJEzS+kf9uKNRr4AVTRXfTCwebr7bdiVEkfRY5xGnpPaNPe4Q==
+  dependencies:
+    "@typescript-eslint/types" "4.1.0"
+    "@typescript-eslint/visitor-keys" "4.1.0"
+    debug "^4.1.1"
+    globby "^11.0.1"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/typescript-estree@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/utils@6.21.0", "@typescript-eslint/utils@^6.0.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
+  integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    semver "^7.5.4"
+
+"@typescript-eslint/visitor-keys@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931"
+  integrity sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/visitor-keys@4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.1.0.tgz#b2d528c9484e7eda1aa4f86ccf0432fb16e4d545"
+  integrity sha512-+taO0IZGCtCEsuNTTF2Q/5o8+fHrlml8i9YsZt2AiDCdYEJzYlsmRY991l/6f3jNXFyAWepdQj7n8Na6URiDRQ==
+  dependencies:
+    "@typescript-eslint/types" "4.1.0"
+    eslint-visitor-keys "^2.0.0"
+
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@typescript-eslint/visitor-keys@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
+"@vercel/build-utils@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@vercel/build-utils/-/build-utils-2.5.1.tgz#2f687c2d82464dd85e0ed8130bc01e5dac9b11a4"
+  integrity sha512-689ov8fGrgVnLwPbJUvgUKdSTseZiOMobR4XoZjmSmeF8+gaOpycsdGuVFzNtdFneUiQWO/k5AkY5diZj8fNgg==
+
+"@vercel/go@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@vercel/go/-/go-1.1.6.tgz#45ac3a6bd98a15b8bf1028b8c141a51fd971ac15"
+  integrity sha512-swA2crS08fkPmw4UkR9yjmoL8FOCzuNHLFDqj8oM1V9ni610ibJ7Xk57jI8uyS7bTecQVh8VUxihb+SF0GT+aw==
+
+"@vercel/node@1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@vercel/node/-/node-1.8.1.tgz#aa0a04f425638874d19be64f7905018ef6f9b1c5"
+  integrity sha512-vQsYMrulghMaHEKbqxJCQPfHrGEBmYmQMLYrx+m8kolKDq1LQDWFx2MRh4DyMnGfYSoYoW5PI2HP7NAfbEjzmg==
+  dependencies:
+    "@types/node" "*"
+    ts-node "8.9.1"
+    typescript "3.9.3"
+
+"@vercel/python@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@vercel/python/-/python-1.2.3.tgz#23ebb71c753fe1cc75fe186c89fc0af04c950191"
+  integrity sha512-DJRvL6bmt4m0xrkzSKUbP8mK57YSDdTBWoo0JYyXq/o2golQrv/wQTalbNchd4P8NhVL3mZuk/1JNYuv5u1rKQ==
+
+"@vercel/ruby@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@vercel/ruby/-/ruby-1.2.4.tgz#60e0a91d7a1a730a7ecdbc6e095acb95f28f24be"
+  integrity sha512-g19vrrmJ4MTJCRB/bvx8DahIsml1iPn7wsdHf5k3QVN6lT0dlDILSBwpERC4hqzndimaApsmWOfjYtY9/L6+tQ==
+
+"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
+  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
+  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
+"@webassemblyjs/helper-wasm-section@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
+  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
+  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-opt" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+    "@webassemblyjs/wast-printer" "1.11.6"
+
+"@webassemblyjs/wasm-gen@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
+  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
+  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+
+"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
+  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
+  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.1.0.tgz#b59b33377b1b896a9a7357cfc643b39c1524b1e6"
+  integrity sha512-K/vuv72vpfSEZoo5KIU0a2FsEoYdW0DUMtMpB5X3LlUwshetMZRZRxB7sCsVji/lFaSxtQQ3aM9O4eMolXkU9w==
+
+"@webpack-cli/info@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.1.tgz#eed745799c910d20081e06e5177c2b2569f166c0"
+  integrity sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==
+
+"@webpack-cli/serve@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.4.tgz#3982ee6f8b42845437fc4d391e93ac5d9da52f0f"
+  integrity sha512-0xRgjgDLdz6G7+vvDLlaRpFatJaJ69uTalZLRSMX5B3VUrDmXcrVA3+6fXXQgmYz7bY9AAgs348XQdmtLsK41A==
+
+"@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==
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+  integrity sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg=
+
+abab@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+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"
+
+abortcontroller-polyfill@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
+  integrity sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==
+
+accepts@~1.3.4, accepts@~1.3.5:
+  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"
+
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-import-assertions@^1.7.6:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
+  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+
+acorn-jsx@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
+  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
+
+acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-loose@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/acorn-loose/-/acorn-loose-8.3.0.tgz#0cd62461d21dce4f069785f8d3de136d5525029a"
+  integrity sha512-75lAs9H19ldmW+fAbyqHdjgdCrz0pWGXKmnqFoh8PyVd1L2RIb4RzYrSjmopeqv3E1G3/Pimu6GgLlrGbrkF7w==
+  dependencies:
+    acorn "^8.5.0"
+
+acorn@^7.4.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.11.3:
+  version "8.11.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+
+acorn@^8.5.0, acorn@^8.7.1:
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+
+acorn@^8.9.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+addons-linter@6.31.1:
+  version "6.31.1"
+  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-6.31.1.tgz#d502fd1bbad7674540c9dc4828459a001fee04c6"
+  integrity sha512-R9FCyVzqU/h5A2aB1t+jD8t4QKLuLxYqc1FjmjJ0nZrn1qNCna1jFOajt5R1T8pwt0H4WXgT+uwWSD2BdkBzqQ==
+  dependencies:
+    "@fluent/syntax" "0.19.0"
+    "@mdn/browser-compat-data" "5.5.34"
+    addons-moz-compare "1.3.0"
+    addons-scanner-utils "9.11.0"
+    ajv "8.16.0"
+    chalk "4.1.2"
+    cheerio "1.0.0-rc.12"
+    columnify "1.6.0"
+    common-tags "1.8.2"
+    deepmerge "4.3.1"
+    eslint "8.57.0"
+    eslint-plugin-no-unsanitized "4.0.2"
+    eslint-visitor-keys "4.0.0"
+    espree "10.0.1"
+    esprima "4.0.1"
+    fast-json-patch "3.1.1"
+    glob "10.4.2"
+    image-size "1.1.1"
+    is-mergeable-object "1.1.1"
+    jed "1.1.1"
+    json-merge-patch "1.0.2"
+    os-locale "5.0.0"
+    pino "8.20.0"
+    relaxed-json "1.0.3"
+    semver "7.6.2"
+    sha.js "2.4.11"
+    source-map-support "0.5.21"
+    tosource "1.0.0"
+    upath "2.0.1"
+    yargs "17.7.2"
+    yauzl "2.10.0"
+
+addons-moz-compare@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/addons-moz-compare/-/addons-moz-compare-1.3.0.tgz#9074dce00291cef998c2fba6b462d041cc6b3e36"
+  integrity sha512-/rXpQeaY0nOKhNx00pmZXdk5Mu+KhVlL3/pSBuAYwrxRrNiTvI/9xfQI8Lmm7DMMl+PDhtfAHY/0ibTpdeoQQQ==
+
+addons-scanner-utils@9.11.0:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/addons-scanner-utils/-/addons-scanner-utils-9.11.0.tgz#65ff9aa8a387828db68cbdf7b13a0c6eadf65cec"
+  integrity sha512-X95V8ymnue9EHmOLz3zJTGHvHDFlWKiavlH+kJKOlv2sJDWFvD3TWeJMHJgxS9GKOqT/545mOXvX3vuuGGum+g==
+  dependencies:
+    "@types/yauzl" "2.10.3"
+    common-tags "1.8.2"
+    first-chunk-stream "3.0.0"
+    strip-bom-stream "4.0.0"
+    upath "2.0.1"
+    yauzl "2.10.0"
+
+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==
+
+adm-zip@~0.5.x:
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.5.14.tgz#2c557c0bf12af4311cf6d32970f4060cf8133b2a"
+  integrity sha512-DnyqqifT4Jrcvb8USYjp6FHtBpEIz1mnXu6pTRHZ0RL69LbQYiO+0lDFg5+OKA7U29oWSs3a/i8fhn8ZcceIWg==
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+agent-base@^7.0.2:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
+  dependencies:
+    debug "^4.3.4"
+
+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-formats@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
+  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
+  dependencies:
+    ajv "^8.0.0"
+
+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-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv-keywords@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
+ajv@8.16.0:
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.16.0.tgz#22e2a92b94f005f7e0f9c9d39652ef0b8f6f0cb4"
+  integrity sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.4.1"
+
+ajv@^6.1.0:
+  version "6.12.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
+  integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
+  dependencies:
+    fast-deep-equal "^3.1.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.12.2:
+  version "6.12.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234"
+  integrity sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^6.12.4, ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.0, ajv@^8.9.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+ajv@^8.0.1:
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.2.tgz#aecb20b50607acf2569b6382167b65a96008bb78"
+  integrity sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+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-align@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.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@^4.1.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+
+ansi-cyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
+  integrity sha512-eCjan3AVo/SxZ0/MyIYRtkpxIu/H3xZN7URr1vXVrISxeyz8fUFz0FJziamK4sS8I+t35y4rHg1b2PklyBe/7A==
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-gray@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  integrity sha512-HrgGIZUl8h2EHuZaU9hTR/cU5nhKxpVE1V6kdGsQ8e4zirElJ5fvtfc8N7Q1oq1aatO275i8pUFUCpNWCAnVWw==
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-html-community@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
+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 sha512-ewaIr5y+9CUTGFwZfpECUbFlGcC0GCw1oqR9RI6h1gQCd9Aj2GxSckCnPsVJnmfMZbwFYE+leZGASgkWl06Jow==
+  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@^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-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+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.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@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+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 sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==
+
+any-promise@^1.0.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"
+
+anymatch@^3.0.3, anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arch@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
+  integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
+
+archive-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/archive-type/-/archive-type-4.0.0.tgz#f92e72233056dfc6969472749c267bdb046b1d70"
+  integrity sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=
+  dependencies:
+    file-type "^4.2.0"
+
+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"
+
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+arr-diff@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
+  integrity sha512-OQwDZUqYaQwyyhDJHThmzId8daf4/RFNLaeh3AevmSeZ5Y7ug4Ga/yKc6l6kTZOBW781rCj103ZuTh8GAsB3+Q==
+  dependencies:
+    arr-flatten "^1.0.1"
+    array-slice "^0.2.3"
+
+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 sha512-t5db90jq+qdgk8aFnxEkjqta0B/GHrM1pxzuuZz2zWsOXc5nKu3t+76s/PQBA8FTcM/ipspIH9jWG4OxCBc2eA==
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-4.0.0.tgz#aa3c891c653523290c880022f45b06a42051b026"
+  integrity sha512-Q6VPTLMsmXZ47ENG3V+wQyZS1ZxXMxFyYzA+Z/GMrJ6yIutAIEf9wTyroTzmGjNfox9/h3GdGBCVh43GVFx4Uw==
+
+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.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+  integrity sha512-rlVfZW/1Ph2SNySXwR9QYkChp8EkOEiTMO5Vwx60usw04i4nWemkm9RXmQqgkQFaLHsqLuADvjp6IfgL9l2M8Q==
+
+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-union@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-3.0.1.tgz#da52630d327f8b88cfbfb57728e2af5cd9b6b975"
+  integrity sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==
+
+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.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.3"
+    es-abstract "^1.13.0"
+
+art@0.10.1, 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.4:
+  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@^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=
+
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
+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-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@^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.14"
+
+async@^3.2.0:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
+  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
+
+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"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+atomic-sleep@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
+  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
+
+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@^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"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-scope "3.7.1"
+    eslint-visitor-keys "^1.0.0"
+
+babel-helper-evaluate-path@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-evaluate-path/-/babel-helper-evaluate-path-0.5.0.tgz#a62fa9c4e64ff7ea5cea9353174ef023a900a67c"
+  integrity sha512-mUh0UhS607bGh5wUMAQfOpt2JX2ThXMtppHRdRU1kL7ZLRWIXxoV2UIV1r2cAeeNeU1M5SB5/RSUgUxrK8yOkA==
+
+babel-helper-flip-expressions@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-flip-expressions/-/babel-helper-flip-expressions-0.4.3.tgz#3696736a128ac18bc25254b5f40a22ceb3c1d3fd"
+  integrity sha1-NpZzahKKwYvCUlS19AoizrPB0/0=
+
+babel-helper-is-nodes-equiv@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-is-nodes-equiv/-/babel-helper-is-nodes-equiv-0.0.1.tgz#34e9b300b1479ddd98ec77ea0bbe9342dfe39684"
+  integrity sha1-NOmzALFHnd2Y7HfqC76TQt/jloQ=
+
+babel-helper-is-void-0@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-is-void-0/-/babel-helper-is-void-0-0.4.3.tgz#7d9c01b4561e7b95dbda0f6eee48f5b60e67313e"
+  integrity sha1-fZwBtFYee5Xb2g9u7kj1tg5nMT4=
+
+babel-helper-mark-eval-scopes@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-mark-eval-scopes/-/babel-helper-mark-eval-scopes-0.4.3.tgz#d244a3bef9844872603ffb46e22ce8acdf551562"
+  integrity sha1-0kSjvvmESHJgP/tG4izorN9VFWI=
+
+babel-helper-remove-or-void@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-remove-or-void/-/babel-helper-remove-or-void-0.4.3.tgz#a4f03b40077a0ffe88e45d07010dee241ff5ae60"
+  integrity sha1-pPA7QAd6D/6I5F0HAQ3uJB/1rmA=
+
+babel-helper-to-multiple-sequence-expressions@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
+  integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
+
+babel-jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.7.0.tgz#f4369919225b684c56085998ac63dbd05be020d5"
+  integrity sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==
+  dependencies:
+    "@jest/transform" "^29.7.0"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.6.3"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.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-loader@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz#aadbe943464182a8922c3c927c3067ff40d24626"
+  integrity sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-minify-builtins@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-builtins/-/babel-plugin-minify-builtins-0.5.0.tgz#31eb82ed1a0d0efdc31312f93b6e4741ce82c36b"
+  integrity sha512-wpqbN7Ov5hsNwGdzuzvFcjgRlzbIeVv1gMIlICbPj0xkexnfoIDe7q+AZHMkQmAE/F9R5jkrB6TLfTegImlXag==
+
+babel-plugin-minify-constant-folding@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-constant-folding/-/babel-plugin-minify-constant-folding-0.5.0.tgz#f84bc8dbf6a561e5e350ff95ae216b0ad5515b6e"
+  integrity sha512-Vj97CTn/lE9hR1D+jKUeHfNy+m1baNiJ1wJvoGyOBUx7F7kJqDZxr9nCHjO/Ad+irbR3HzR6jABpSSA29QsrXQ==
+  dependencies:
+    babel-helper-evaluate-path "^0.5.0"
+
+babel-plugin-minify-dead-code-elimination@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-dead-code-elimination/-/babel-plugin-minify-dead-code-elimination-0.5.1.tgz#1a0c68e44be30de4976ca69ffc535e08be13683f"
+  integrity sha512-x8OJOZIrRmQBcSqxBcLbMIK8uPmTvNWPXH2bh5MDCW1latEqYiRMuUkPImKcfpo59pTUB2FT7HfcgtG8ZlR5Qg==
+  dependencies:
+    babel-helper-evaluate-path "^0.5.0"
+    babel-helper-mark-eval-scopes "^0.4.3"
+    babel-helper-remove-or-void "^0.4.3"
+    lodash "^4.17.11"
+
+babel-plugin-minify-flip-comparisons@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-flip-comparisons/-/babel-plugin-minify-flip-comparisons-0.4.3.tgz#00ca870cb8f13b45c038b3c1ebc0f227293c965a"
+  integrity sha1-AMqHDLjxO0XAOLPB68DyJyk8llo=
+  dependencies:
+    babel-helper-is-void-0 "^0.4.3"
+
+babel-plugin-minify-guarded-expressions@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-guarded-expressions/-/babel-plugin-minify-guarded-expressions-0.4.4.tgz#818960f64cc08aee9d6c75bec6da974c4d621135"
+  integrity sha512-RMv0tM72YuPPfLT9QLr3ix9nwUIq+sHT6z8Iu3sLbqldzC1Dls8DPCywzUIzkTx9Zh1hWX4q/m9BPoPed9GOfA==
+  dependencies:
+    babel-helper-evaluate-path "^0.5.0"
+    babel-helper-flip-expressions "^0.4.3"
+
+babel-plugin-minify-infinity@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-infinity/-/babel-plugin-minify-infinity-0.4.3.tgz#dfb876a1b08a06576384ef3f92e653ba607b39ca"
+  integrity sha1-37h2obCKBldjhO8/kuZTumB7Oco=
+
+babel-plugin-minify-mangle-names@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-mangle-names/-/babel-plugin-minify-mangle-names-0.5.0.tgz#bcddb507c91d2c99e138bd6b17a19c3c271e3fd3"
+  integrity sha512-3jdNv6hCAw6fsX1p2wBGPfWuK69sfOjfd3zjUXkbq8McbohWy23tpXfy5RnToYWggvqzuMOwlId1PhyHOfgnGw==
+  dependencies:
+    babel-helper-mark-eval-scopes "^0.4.3"
+
+babel-plugin-minify-numeric-literals@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-numeric-literals/-/babel-plugin-minify-numeric-literals-0.4.3.tgz#8e4fd561c79f7801286ff60e8c5fd9deee93c0bc"
+  integrity sha1-jk/VYcefeAEob/YOjF/Z3u6TwLw=
+
+babel-plugin-minify-replace@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-replace/-/babel-plugin-minify-replace-0.5.0.tgz#d3e2c9946c9096c070efc96761ce288ec5c3f71c"
+  integrity sha512-aXZiaqWDNUbyNNNpWs/8NyST+oU7QTpK7J9zFEFSA0eOmtUNMU3fczlTTTlnCxHmq/jYNFEmkkSG3DDBtW3Y4Q==
+
+babel-plugin-minify-simplify@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-simplify/-/babel-plugin-minify-simplify-0.5.1.tgz#f21613c8b95af3450a2ca71502fdbd91793c8d6a"
+  integrity sha512-OSYDSnoCxP2cYDMk9gxNAed6uJDiDz65zgL6h8d3tm8qXIagWGMLWhqysT6DY3Vs7Fgq7YUDcjOomhVUb+xX6A==
+  dependencies:
+    babel-helper-evaluate-path "^0.5.0"
+    babel-helper-flip-expressions "^0.4.3"
+    babel-helper-is-nodes-equiv "^0.0.1"
+    babel-helper-to-multiple-sequence-expressions "^0.5.0"
+
+babel-plugin-minify-type-constructors@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-minify-type-constructors/-/babel-plugin-minify-type-constructors-0.4.3.tgz#1bc6f15b87f7ab1085d42b330b717657a2156500"
+  integrity sha1-G8bxW4f3qxCF1CszC3F2V6IVZQA=
+  dependencies:
+    babel-helper-is-void-0 "^0.4.3"
+
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9"
+  integrity sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==
+  dependencies:
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    semver "^6.3.1"
+
+babel-plugin-polyfill-corejs3@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz#4e4e182f1bb37c7ba62e2af81d8dd09df31344f6"
+  integrity sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    core-js-compat "^3.40.0"
+
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz#abeb1f3f1c762eace37587f42548b08b57789bc8"
+  integrity sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+
+babel-plugin-syntax-hermes-parser@^0.32.0:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.32.0.tgz#06f7452bf91adf6cafd7c98e7467404d4eb65cec"
+  integrity sha512-m5HthL++AbyeEA2FcdwOLfVFvWYECOBObLHNqdR8ceY4TsEdn4LdX2oTvbB2QJSSElE2AWA/b2MXZ/PF/CqLZg==
+  dependencies:
+    hermes-parser "0.32.0"
+
+babel-plugin-syntax-trailing-function-commas@^6.5.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"
+  integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
+
+babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
+  version "7.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
+  integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==
+
+babel-plugin-transform-inline-consecutive-adds@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-inline-consecutive-adds/-/babel-plugin-transform-inline-consecutive-adds-0.4.3.tgz#323d47a3ea63a83a7ac3c811ae8e6941faf2b0d1"
+  integrity sha1-Mj1Ho+pjqDp6w8gRro5pQfrysNE=
+
+babel-plugin-transform-member-expression-literals@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.4.tgz#37039c9a0c3313a39495faac2ff3a6b5b9d038bf"
+  integrity sha1-NwOcmgwzE6OUlfqsL/OmtbnQOL8=
+
+babel-plugin-transform-merge-sibling-variables@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.9.4.tgz#85b422fc3377b449c9d1cde44087203532401dae"
+  integrity sha1-hbQi/DN3tEnJ0c3kQIcgNTJAHa4=
+
+babel-plugin-transform-minify-booleans@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.9.4.tgz#acbb3e56a3555dd23928e4b582d285162dd2b198"
+  integrity sha1-rLs+VqNVXdI5KOS1gtKFFi3SsZg=
+
+babel-plugin-transform-property-literals@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.9.4.tgz#98c1d21e255736573f93ece54459f6ce24985d39"
+  integrity sha1-mMHSHiVXNlc/k+zlRFn2ziSYXTk=
+  dependencies:
+    esutils "^2.0.2"
+
+babel-plugin-transform-regexp-constructors@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regexp-constructors/-/babel-plugin-transform-regexp-constructors-0.4.3.tgz#58b7775b63afcf33328fae9a5f88fbd4fb0b4965"
+  integrity sha1-WLd3W2OvzzMyj66aX4j71PsLSWU=
+
+babel-plugin-transform-remove-console@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz#b980360c067384e24b357a588d807d3c83527780"
+  integrity sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=
+
+babel-plugin-transform-remove-debugger@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.9.4.tgz#42b727631c97978e1eb2d199a7aec84a18339ef2"
+  integrity sha1-QrcnYxyXl44estGZp67IShgznvI=
+
+babel-plugin-transform-remove-undefined@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-undefined/-/babel-plugin-transform-remove-undefined-0.5.0.tgz#80208b31225766c630c97fa2d288952056ea22dd"
+  integrity sha512-+M7fJYFaEE/M9CXa0/IRkDbiV3wRELzA1kKQFCJ4ifhrzLKn/9VCCgj9OFmYWwBd8IB48YdgPkHYtbYq+4vtHQ==
+  dependencies:
+    babel-helper-evaluate-path "^0.5.0"
+
+babel-plugin-transform-simplify-comparison-operators@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.9.4.tgz#f62afe096cab0e1f68a2d753fdf283888471ceb9"
+  integrity sha1-9ir+CWyrDh9ootdT/fKDiIRxzrk=
+
+babel-plugin-transform-undefined-to-void@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280"
+  integrity sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA=
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-fbjs@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-3.4.0.tgz#38a14e5a7a3b285a3f3a86552d650dca5cf6111c"
+  integrity sha512-9ywCsCvo1ojrw0b+XYk7aFvTH6D9064t0RIL1rtMf3nsa02Xw41MS7sZw216Im35xj/UY0PDBQsa1brUDDF1Ow==
+  dependencies:
+    "@babel/plugin-proposal-class-properties" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-syntax-class-properties" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^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-flow-strip-types" "^7.0.0"
+    "@babel/plugin-transform-for-of" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.0.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-member-expression-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-property-literals" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^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-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"
+
+babel-preset-jest@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz#fa05fa510e7d493896d7b0dd2033601c840f171c"
+  integrity sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==
+  dependencies:
+    babel-plugin-jest-hoist "^29.6.3"
+    babel-preset-current-node-syntax "^1.0.0"
+
+babel-preset-minify@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.5.1.tgz#25f5d0bce36ec818be80338d0e594106e21eaa9f"
+  integrity sha512-1IajDumYOAPYImkHbrKeiN5AKKP9iOmRoO2IPbIuVp0j2iuCcj0n7P260z38siKMZZ+85d3mJZdtW8IgOv+Tzg==
+  dependencies:
+    babel-plugin-minify-builtins "^0.5.0"
+    babel-plugin-minify-constant-folding "^0.5.0"
+    babel-plugin-minify-dead-code-elimination "^0.5.1"
+    babel-plugin-minify-flip-comparisons "^0.4.3"
+    babel-plugin-minify-guarded-expressions "^0.4.4"
+    babel-plugin-minify-infinity "^0.4.3"
+    babel-plugin-minify-mangle-names "^0.5.0"
+    babel-plugin-minify-numeric-literals "^0.4.3"
+    babel-plugin-minify-replace "^0.5.0"
+    babel-plugin-minify-simplify "^0.5.1"
+    babel-plugin-minify-type-constructors "^0.4.3"
+    babel-plugin-transform-inline-consecutive-adds "^0.4.3"
+    babel-plugin-transform-member-expression-literals "^6.9.4"
+    babel-plugin-transform-merge-sibling-variables "^6.9.4"
+    babel-plugin-transform-minify-booleans "^6.9.4"
+    babel-plugin-transform-property-literals "^6.9.4"
+    babel-plugin-transform-regexp-constructors "^0.4.3"
+    babel-plugin-transform-remove-console "^6.9.4"
+    babel-plugin-transform-remove-debugger "^6.9.4"
+    babel-plugin-transform-remove-undefined "^0.5.0"
+    babel-plugin-transform-simplify-comparison-operators "^6.9.4"
+    babel-plugin-transform-undefined-to-void "^6.9.4"
+    lodash "^4.17.11"
+
+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==
+
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+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"
+    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"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
+before-after-hook@^2.2.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c"
+  integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==
+
+big-integer@^1.6.44:
+  version "1.6.52"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
+  integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==
+
+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==
+
+bin-build@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bin-build/-/bin-build-3.0.0.tgz#c5780a25a8a9f966d8244217e6c1f5082a143861"
+  integrity sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==
+  dependencies:
+    decompress "^4.0.0"
+    download "^6.2.2"
+    execa "^0.7.0"
+    p-map-series "^1.0.0"
+    tempfile "^2.0.0"
+
+bin-check@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bin-check/-/bin-check-4.1.0.tgz#fc495970bdc88bb1d5a35fc17e65c4a149fc4a49"
+  integrity sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==
+  dependencies:
+    execa "^0.7.0"
+    executable "^4.1.0"
+
+bin-version-check@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bin-version-check/-/bin-version-check-4.0.0.tgz#7d819c62496991f80d893e6e02a3032361608f71"
+  integrity sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==
+  dependencies:
+    bin-version "^3.0.0"
+    semver "^5.6.0"
+    semver-truncate "^1.1.2"
+
+bin-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bin-version/-/bin-version-3.1.0.tgz#5b09eb280752b1bd28f0c9db3f96f2f43b6c0839"
+  integrity sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==
+  dependencies:
+    execa "^1.0.0"
+    find-versions "^3.0.0"
+
+bin-wrapper@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bin-wrapper/-/bin-wrapper-4.1.0.tgz#99348f2cf85031e3ef7efce7e5300aeaae960605"
+  integrity sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==
+  dependencies:
+    bin-check "^4.1.0"
+    bin-version-check "^4.0.0"
+    download "^7.1.0"
+    import-lazy "^3.1.0"
+    os-filter-obj "^2.0.0"
+    pify "^4.0.1"
+
+binary-extensions@^1.0.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+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.7:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+bonjour-service@^1.0.11:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.1.1.tgz#960948fa0e0153f5d26743ab15baf8e33752c135"
+  integrity sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==
+  dependencies:
+    array-flatten "^2.1.2"
+    dns-equal "^1.0.0"
+    fast-deep-equal "^3.1.3"
+    multicast-dns "^7.2.5"
+
+boolbase@^1.0.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=
+
+boolean@^3.0.0, boolean@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.1.tgz#35ecf2b4a2ee191b0b44986f14eb5f052a5cbb4f"
+  integrity sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==
+
+boxen@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64"
+  integrity sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^5.3.1"
+    chalk "^3.0.0"
+    cli-boxes "^2.2.0"
+    string-width "^4.1.0"
+    term-size "^2.1.0"
+    type-fest "^0.8.1"
+    widest-line "^3.1.0"
+
+boxen@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
+  integrity sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^6.2.0"
+    chalk "^4.1.0"
+    cli-boxes "^2.2.1"
+    string-width "^4.2.2"
+    type-fest "^0.20.2"
+    widest-line "^3.1.0"
+    wrap-ansi "^7.0.0"
+
+boxen@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-7.1.1.tgz#f9ba525413c2fec9cdb88987d835c4f7cad9c8f4"
+  integrity sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==
+  dependencies:
+    ansi-align "^3.0.1"
+    camelcase "^7.0.1"
+    chalk "^5.2.0"
+    cli-boxes "^3.0.0"
+    string-width "^5.1.2"
+    type-fest "^2.13.0"
+    widest-line "^4.0.1"
+    wrap-ansi "^8.1.0"
+
+bplist-parser@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
+  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
+  dependencies:
+    big-integer "^1.6.44"
+
+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"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.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"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  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"
+
+braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+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.12.0:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.0.tgz#2908951abfe4ec98737b72f34c3bcedc8d43b000"
+  integrity sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==
+  dependencies:
+    caniuse-lite "^1.0.30001111"
+    electron-to-chromium "^1.3.523"
+    escalade "^3.0.2"
+    node-releases "^1.1.60"
+
+browserslist@^4.14.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+  dependencies:
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
+
+browserslist@^4.21.3, browserslist@^4.22.2:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+  dependencies:
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
+browserslist@^4.24.0, browserslist@^4.24.4:
+  version "4.24.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
+  integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
+  dependencies:
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
+
+browserslist@^4.8.3:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.5.tgz#691af4e327ac877b25e7a3f7ee869c4ef36cdea3"
+  integrity sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==
+  dependencies:
+    caniuse-lite "^1.0.30001022"
+    electron-to-chromium "^1.3.338"
+    node-releases "^1.1.46"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  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"
+
+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.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+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@^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"
+
+buffer@^5.2.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
+builtin-modules@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
+  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
+
+bundle-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
+  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
+  dependencies:
+    run-applescript "^5.0.0"
+
+bundle-require@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-5.1.0.tgz#8db66f41950da3d77af1ef3322f4c3e04009faee"
+  integrity sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==
+  dependencies:
+    load-tsconfig "^0.2.3"
+
+bunyan@1.8.15:
+  version "1.8.15"
+  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.15.tgz#8ce34ca908a17d0776576ca1b2f6cbd916e93b46"
+  integrity sha512-0tECWShh6wUysgucJcBAoYegf3JJoZWibxdqhTm7OHPeT42qdjkZ29QCMcKwbgU1kiH+auSIasNRXMLWXafXig==
+  optionalDependencies:
+    dtrace-provider "~0.8"
+    moment "^2.19.3"
+    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.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+cac@^6.7.14:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
+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"
+    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"
+
+cacheable-lookup@^5.0.3:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz#5a6b865b2c44357be3d5ebc2a467b032719a7005"
+  integrity sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==
+
+cacheable-lookup@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz#3476a8215d046e5a3202a9209dd13fec1f933a27"
+  integrity sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==
+
+cacheable-request@^10.2.8:
+  version "10.2.14"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-10.2.14.tgz#eb915b665fda41b79652782df3f553449c406b9d"
+  integrity sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==
+  dependencies:
+    "@types/http-cache-semantics" "^4.0.2"
+    get-stream "^6.0.1"
+    http-cache-semantics "^4.1.1"
+    keyv "^4.5.3"
+    mimic-response "^4.0.0"
+    normalize-url "^8.0.0"
+    responselike "^3.0.0"
+
+cacheable-request@^2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
+  integrity sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=
+  dependencies:
+    clone-response "1.0.2"
+    get-stream "3.0.0"
+    http-cache-semantics "3.8.1"
+    keyv "3.0.0"
+    lowercase-keys "1.0.0"
+    normalize-url "2.0.1"
+    responselike "1.0.2"
+
+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"
+
+cacheable-request@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-7.0.2.tgz#ea0d0b889364a25854757301ca12b2da77f91d27"
+  integrity sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==
+  dependencies:
+    clone-response "^1.0.2"
+    get-stream "^5.1.0"
+    http-cache-semantics "^4.0.0"
+    keyv "^4.0.0"
+    lowercase-keys "^2.0.0"
+    normalize-url "^6.0.1"
+    responselike "^2.0.0"
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+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-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@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-8.0.0.tgz#c0d36d418753fb6ad9c5e0437579745c1c14a534"
+  integrity sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
+
+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@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
+  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
+
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+camelcase@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
+  integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
+
+caniuse-lite@^1.0.30001022:
+  version "1.0.30001022"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001022.tgz#9eeffe580c3a8f110b7b1742dcf06a395885e4c6"
+  integrity sha512-FjwPPtt/I07KyLPkBQ0g7/XuZg6oUkYBVnPHNj3VHJbOjmmJ/GdSo/GUY6MwINEQvjhP6WZVbX8Tvms8xh0D5A==
+
+caniuse-lite@^1.0.30001111:
+  version "1.0.30001114"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001114.tgz#2e88119afb332ead5eaa330e332e951b1c4bfea9"
+  integrity sha512-ml/zTsfNBM+T1+mjglWRPgVsu2L76GAaADKX5f4t0pbhttEp0WMawJsHDYlFkVZkoA+89uvBRrVrEE4oqenzXQ==
+
+caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001587:
+  version "1.0.30001616"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz#4342712750d35f71ebba9fcac65e2cf8870013c3"
+  integrity sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==
+
+caniuse-lite@^1.0.30001688:
+  version "1.0.30001703"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001703.tgz#977cb4920598c158f491ecf4f4f2cfed9e354718"
+  integrity sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ==
+
+caw@^2.0.0, caw@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/caw/-/caw-2.0.1.tgz#6c3ca071fc194720883c2dc5da9b074bfc7e9e95"
+  integrity sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==
+  dependencies:
+    get-proxy "^2.0.0"
+    isurl "^1.0.0-alpha5"
+    tunnel-agent "^0.6.0"
+    url-to-options "^1.0.1"
+
+chalk@4.1.2, chalk@4.x, chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^1.0.0, 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"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.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:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
+  integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^5.0.1, chalk@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
+  integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
+charenc@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
+cheerio-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
+  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
+  dependencies:
+    boolbase "^1.0.0"
+    css-select "^5.1.0"
+    css-what "^6.1.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+
+cheerio@1.0.0-rc.12:
+  version "1.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
+  integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
+  dependencies:
+    cheerio-select "^2.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    htmlparser2 "^8.0.1"
+    parse5 "^7.0.0"
+    parse5-htmlparser2-tree-adapter "^7.0.0"
+
+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:
+    cross-spawn "^4.0.2"
+    node-version "^1.0.0"
+    promise-polyfill "^6.0.1"
+
+chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  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"
+
+chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chokidar@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30"
+  integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
+  dependencies:
+    readdirp "^4.0.1"
+
+chownr@^1.0.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+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-launcher@0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.1.tgz#0a0208037063641e2b3613b7e42b0fcb3fa2d399"
+  integrity sha512-UugC8u59/w2AyX5sHLZUHoxBAiSiunUhZa3zZwMH6zPVis0C3dDKiRWyUGIo14tTbZHGVviWxv3PQWZ7taZ4fg==
+  dependencies:
+    "@types/node" "*"
+    escape-string-regexp "^4.0.0"
+    is-wsl "^2.2.0"
+    lighthouse-logger "^1.0.0"
+
+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@^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==
+
+ci-info@^3.2.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+
+cjs-module-lexer@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz#c485341ae8fd999ca4ee5af2d7a1c9ae01e0099c"
+  integrity sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==
+
+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-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-boxes@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+
+cli-boxes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
+  integrity sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==
+
+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"
+
+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@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.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@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+clone-response@1.0.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.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
+cloneable-readable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.3.tgz#120a00cb053bfb63a222e709f9683ea2e11d8cec"
+  integrity sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^2.0.0"
+    readable-stream "^2.3.5"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
+coffee-script@^1.12.7:
+  version "1.12.7"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
+  integrity sha512-fLeEhqwymYat/MpTPUjSKHVYYl0ec2mOyALEMLmzr5i1isuG+6jfI2j2d5oBO3VIzgUXgBVIcOT9uH1TFxBckw==
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
+  integrity sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==
+
+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"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+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==
+
+colorette@^2.0.10, colorette@^2.0.14:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+  integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
+
+colors@1.4.0, colors@^1.1.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
+  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
+
+columnify@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.6.0.tgz#6989531713c9008bb29735e61e37acf5bd553cf3"
+  integrity sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==
+  dependencies:
+    strip-ansi "^6.0.1"
+    wcwidth "^1.0.0"
+
+combined-stream@^1.0.8:
+  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@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^2.18.0, commander@^2.20.0, commander@^2.6.0, commander@^2.8.1:
+  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==
+
+commander@^4.0.0, commander@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+commander@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
+commander@^9.1.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
+common-tags@1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+compare-versions@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-5.0.3.tgz#a9b34fea217472650ef4a2651d905f42c28ebfd7"
+  integrity sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==
+
+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.4.7:
+  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"
+
+config-chain@^1.1.11:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
+  integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
+configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
+  dependencies:
+    dot-prop "^5.2.0"
+    graceful-fs "^4.1.2"
+    make-dir "^3.0.0"
+    unique-string "^2.0.0"
+    write-file-atomic "^3.0.0"
+    xdg-basedir "^4.0.0"
+
+configstore@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-6.0.0.tgz#49eca2ebc80983f77e09394a1a56e0aca8235566"
+  integrity sha512-cD31W1v3GqUlQvbBCGcXmd2Nj9SvLDOP1oQ0YFuLETufzSPaKp11rYBsSOm7rCsW3OnIRAFM3OxRhceaXNYHkA==
+  dependencies:
+    dot-prop "^6.0.1"
+    graceful-fs "^4.2.6"
+    unique-string "^3.0.0"
+    write-file-atomic "^3.0.3"
+    xdg-basedir "^5.0.1"
+
+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"
+  integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==
+
+connect-history-api-fallback@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
+  integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
+
+consola@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-3.4.0.tgz#4cfc9348fd85ed16a17940b3032765e31061ab88"
+  integrity sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+console-stream@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/console-stream/-/console-stream-0.1.1.tgz#a095fe07b20465955f2fafd28b5d72bccd949d44"
+  integrity sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=
+
+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=
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-disposition@^0.5.2:
+  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==
+
+content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+convert-source-map@^1.1.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+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=
+
+cookie@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+
+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-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.40.0:
+  version "3.41.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.41.0.tgz#4cdfce95f39a8f27759b667cf693d96e5dda3d17"
+  integrity sha512-RFsU9LySVue9RTwdDVX/T0e2Y6jRYWXERKElIjpuEOEnxaXffI0X7RUwVzfYLfzuLXSNJDYoRYUAmRUcyln20A==
+  dependencies:
+    browserslist "^4.24.4"
+
+core-js-compat@^3.6.2:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
+  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
+  dependencies:
+    browserslist "^4.8.3"
+    semver "7.0.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.4.1:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
+
+core-js@^3.15.0:
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.0.tgz#1d46fb33720bc1fa7f90d20431f36a5540858986"
+  integrity sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==
+
+core-js@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
+  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
+
+core-js@^3.8.2:
+  version "3.27.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.27.2.tgz#85b35453a424abdcacb97474797815f4d62ebbf7"
+  integrity sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==
+
+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=
+
+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-jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/create-jest/-/create-jest-29.7.0.tgz#a355c5b3cb1e1af02ba177fe7afd7feee49a5320"
+  integrity sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-config "^29.7.0"
+    jest-util "^29.7.0"
+    prompts "^2.0.1"
+
+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@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-fetch@^3.0.4:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
+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"
+
+cross-spawn@^6.0.0:
+  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@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
+  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+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"
+
+crypt@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
+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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+crypto-random-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-4.0.0.tgz#5a3cc53d7dd86183df5da0312816ceeeb5bb1fc2"
+  integrity sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==
+  dependencies:
+    type-fest "^1.0.1"
+
+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-loader@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.2.1.tgz#9f48fd7eae1219d629a3f085ba9a9102ca1141a7"
+  integrity sha512-MoqmF1if7Z0pZIEXA4ZF9PgtCXxWbfzfJM+3p+OYfhcrwcqhaCRb74DSnfzRl7e024xEiCRn5hCvfUbTf2sgFA==
+  dependencies:
+    camelcase "^6.0.0"
+    cssesc "^3.0.0"
+    icss-utils "^4.1.1"
+    loader-utils "^2.0.0"
+    normalize-path "^3.0.0"
+    postcss "^7.0.32"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^3.0.3"
+    postcss-modules-scope "^2.2.0"
+    postcss-modules-values "^3.0.0"
+    postcss-value-parser "^4.1.0"
+    schema-utils "^2.7.0"
+    semver "^7.3.2"
+
+css-loader@^6.9.1:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.10.0.tgz#7c172b270ec7b833951b52c348861206b184a4b7"
+  integrity sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.33"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.4"
+    postcss-modules-scope "^3.1.1"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.5.4"
+
+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"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
+
+css-select@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.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-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"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
+  dependencies:
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
+
+css-tree@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+  integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csso@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
+cssstyle@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a"
+  integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==
+  dependencies:
+    rrweb-cssom "^0.6.0"
+
+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:
+    array-find-index "^1.0.1"
+
+danger@^11.2.3:
+  version "11.2.3"
+  resolved "https://registry.yarnpkg.com/danger/-/danger-11.2.3.tgz#2a0a6d3581478005d0f2abf5b3995a8409165067"
+  integrity sha512-NNDOUDZWCi1fqEicSWbnk8lOOoqY+vwekB8twUiknEyyvDDKypWEcUolq6SNg9Kd6HMqnX80K8U8nqzmDRC1QQ==
+  dependencies:
+    "@gitbeaker/node" "^21.3.0"
+    "@octokit/rest" "^18.12.0"
+    async-retry "1.2.3"
+    chalk "^2.3.0"
+    commander "^2.18.0"
+    core-js "^3.8.2"
+    debug "^4.1.1"
+    fast-json-patch "^3.0.0-1"
+    get-stdin "^6.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    hyperlinker "^1.0.0"
+    json5 "^2.1.0"
+    jsonpointer "^5.0.0"
+    jsonwebtoken "^9.0.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.2.1"
+    micromatch "^4.0.4"
+    node-cleanup "^2.1.2"
+    node-fetch "^2.6.7"
+    override-require "^1.1.1"
+    p-limit "^2.1.0"
+    parse-diff "^0.7.0"
+    parse-git-config "^2.0.3"
+    parse-github-url "^1.0.2"
+    parse-link-header "^2.0.0"
+    pinpoint "^1.1.0"
+    prettyjson "^1.2.1"
+    readline-sync "^1.4.9"
+    regenerator-runtime "^0.13.9"
+    require-from-string "^2.0.2"
+    supports-hyperlinks "^1.0.1"
+
+data-uri-to-buffer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
+  integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
+
+data-urls@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
+  integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==
+  dependencies:
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^12.0.0"
+
+debounce@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
+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.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
+  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@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.0.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@^4.3.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.3.4, debug@~4.3.1:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
+  integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+decamelize@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
+  integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
+
+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=
+
+decimal.js@^10.4.3:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
+decode-uri-component@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
+decompress-response@^3.2.0, 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"
+
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
+decompress-tar@^4.0.0, decompress-tar@^4.1.0, decompress-tar@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/decompress-tar/-/decompress-tar-4.1.1.tgz#718cbd3fcb16209716e70a26b84e7ba4592e5af1"
+  integrity sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==
+  dependencies:
+    file-type "^5.2.0"
+    is-stream "^1.1.0"
+    tar-stream "^1.5.2"
+
+decompress-tarbz2@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz#3082a5b880ea4043816349f378b56c516be1a39b"
+  integrity sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==
+  dependencies:
+    decompress-tar "^4.1.0"
+    file-type "^6.1.0"
+    is-stream "^1.1.0"
+    seek-bzip "^1.0.5"
+    unbzip2-stream "^1.0.9"
+
+decompress-targz@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/decompress-targz/-/decompress-targz-4.1.1.tgz#c09bc35c4d11f3de09f2d2da53e9de23e7ce1eee"
+  integrity sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==
+  dependencies:
+    decompress-tar "^4.1.1"
+    file-type "^5.2.0"
+    is-stream "^1.1.0"
+
+decompress-unzip@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/decompress-unzip/-/decompress-unzip-4.0.1.tgz#deaaccdfd14aeaf85578f733ae8210f9b4848f69"
+  integrity sha1-3qrM39FK6vhVePczroIQ+bSEj2k=
+  dependencies:
+    file-type "^3.8.0"
+    get-stream "^2.2.0"
+    pify "^2.3.0"
+    yauzl "^2.4.2"
+
+decompress@^4.0.0, decompress@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/decompress/-/decompress-4.2.1.tgz#007f55cc6a62c055afa37c07eb6a4ee1b773f118"
+  integrity sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==
+  dependencies:
+    decompress-tar "^4.0.0"
+    decompress-tarbz2 "^4.0.0"
+    decompress-targz "^4.0.0"
+    decompress-unzip "^4.0.1"
+    graceful-fs "^4.1.10"
+    make-dir "^1.0.0"
+    pify "^2.3.0"
+    strip-dirs "^2.0.0"
+
+dedent@^1.0.0:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.3.tgz#99aee19eb9bae55a67327717b6e848d0bf777e5a"
+  integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==
+
+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-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=
+
+deepmerge@4.3.1, deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+default-browser-id@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
+  integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
+  dependencies:
+    bplist-parser "^0.2.0"
+    untildify "^4.0.0"
+
+default-browser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
+  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+  dependencies:
+    bundle-name "^3.0.0"
+    default-browser-id "^3.0.0"
+    execa "^7.1.1"
+    titleize "^3.0.0"
+
+default-gateway@^6.0.0, default-gateway@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
+  integrity sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==
+  dependencies:
+    execa "^5.0.0"
+
+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:
+    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==
+
+defer-to-connect@^2.0.0, defer-to-connect@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
+  integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
+
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-lazy-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
+
+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"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+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, deprecation@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
+  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
+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@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
+  integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
+
+diff@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.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"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
+
+dns-packet@^5.2.2:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.0.tgz#2202c947845c7a63c23ece58f2f70ff6ab4c2f7d"
+  integrity sha512-rza3UH1LwdHh9qyPXp8lkwpjSNk/AMD3dPytUoRoqnypDUhY0xvbdmVhWOfxO68frEfV9BU8V12Ez7ZsHGZpCQ==
+  dependencies:
+    "@leichtgewicht/ip-codec" "^2.0.1"
+
+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@^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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+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:
+  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==
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domexception@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
+  integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
+  dependencies:
+    webidl-conversions "^7.0.0"
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^1.7.0:
+  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"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
+dot-prop@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
+  integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
+  dependencies:
+    is-obj "^2.0.0"
+
+dot-prop@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-6.0.1.tgz#fc26b3cf142b9e59b74dbd39ed66ce620c681083"
+  integrity sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==
+  dependencies:
+    is-obj "^2.0.0"
+
+download@^6.2.2:
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/download/-/download-6.2.5.tgz#acd6a542e4cd0bb42ca70cfc98c9e43b07039714"
+  integrity sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==
+  dependencies:
+    caw "^2.0.0"
+    content-disposition "^0.5.2"
+    decompress "^4.0.0"
+    ext-name "^5.0.0"
+    file-type "5.2.0"
+    filenamify "^2.0.0"
+    get-stream "^3.0.0"
+    got "^7.0.0"
+    make-dir "^1.0.0"
+    p-event "^1.0.0"
+    pify "^3.0.0"
+
+download@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/download/-/download-7.1.0.tgz#9059aa9d70b503ee76a132897be6dec8e5587233"
+  integrity sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==
+  dependencies:
+    archive-type "^4.0.0"
+    caw "^2.0.1"
+    content-disposition "^0.5.2"
+    decompress "^4.2.0"
+    ext-name "^5.0.0"
+    file-type "^8.1.0"
+    filenamify "^2.0.0"
+    get-stream "^3.0.0"
+    got "^8.3.1"
+    make-dir "^1.2.0"
+    p-event "^2.1.0"
+    pify "^3.0.0"
+
+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.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"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+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-to-chromium@^1.3.338:
+  version "1.3.340"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.340.tgz#5d4fe78e984d4211194cf5a52e08069543da146f"
+  integrity sha512-hRFBAglhcj5iVYH+o8QU0+XId1WGoc0VGowJB1cuJAt3exHGrivZvWeAO5BRgBZqwZtwxjm8a5MQeGoT/Su3ww==
+
+electron-to-chromium@^1.3.523:
+  version "1.3.538"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.538.tgz#15226638ee9db5d8e74f4c860cef6078d8e1e871"
+  integrity sha512-rlyYXLlOoZkJuvY4AJXUpP7CHRVtwZz311HPVoEO1UHo/kqDCsP1pNas0A9paZuPEiYGdLwrjllF2hs69NEaTw==
+
+electron-to-chromium@^1.4.284, electron-to-chromium@^1.4.668:
+  version "1.4.758"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.758.tgz#f39e530cae2ca4329a0f0e1840629d8d1da73156"
+  integrity sha512-/o9x6TCdrYZBMdGeTifAP3wlF/gVT+TtWJe3BSmtNh92Mw81U9hrYwW9OAGUh+sEOX/yz5e34sksqRruZbjYrw==
+
+electron-to-chromium@^1.5.73:
+  version "1.5.114"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.114.tgz#f2bb4fda80a7db4ea273565e75b0ebbe19af0ac3"
+  integrity sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA==
+
+electron@^23.1.2:
+  version "23.1.2"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-23.1.2.tgz#f03e361c94f8dd2407963b5461d19aadea335316"
+  integrity sha512-ajE6xzIwH7swf8TlTU5WklDqpI3mPj4Am6690YrpCXzcp+E+dmMBXIajUUNt4joDrFhJC/lC6ZqDS2Q1BApKgQ==
+  dependencies:
+    "@electron/get" "^2.0.0"
+    "@types/node" "^16.11.26"
+    extract-zip "^2.0.1"
+
+emittery@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
+  integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
+
+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==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+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=
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+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, end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.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"
+
+enhanced-resolve@^5.14.0:
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz#0b6c676c8a3266c99fa281e4433a706f5c0c61c4"
+  integrity sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
+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==
+
+entities@^4.2.0, entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+env-paths@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
+  integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==
+
+envinfo@^7.7.3:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
+  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+
+error-ex@^1.2.0, error-ex@^1.3.1, error-ex@^1.3.2:
+  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.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
+  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
+  dependencies:
+    stackframe "^1.1.1"
+
+error-stack-parser@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
+es-abstract@^1.13.0:
+  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.2.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-keys "^1.0.12"
+
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.17.2, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
+  integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    is-callable "^1.2.3"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.3"
+    is-string "^1.0.6"
+    object-inspect "^1.10.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-module-lexer@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.2.1.tgz#ba303831f63e6a394983fde2f97ad77b22324527"
+  integrity sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==
+
+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:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es6-error@4.1.1, 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==
+
+esbuild@^0.25.0:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.25.1.tgz#a16b8d070b6ad4871935277bda6ccfe852e3fa2f"
+  integrity sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.25.1"
+    "@esbuild/android-arm" "0.25.1"
+    "@esbuild/android-arm64" "0.25.1"
+    "@esbuild/android-x64" "0.25.1"
+    "@esbuild/darwin-arm64" "0.25.1"
+    "@esbuild/darwin-x64" "0.25.1"
+    "@esbuild/freebsd-arm64" "0.25.1"
+    "@esbuild/freebsd-x64" "0.25.1"
+    "@esbuild/linux-arm" "0.25.1"
+    "@esbuild/linux-arm64" "0.25.1"
+    "@esbuild/linux-ia32" "0.25.1"
+    "@esbuild/linux-loong64" "0.25.1"
+    "@esbuild/linux-mips64el" "0.25.1"
+    "@esbuild/linux-ppc64" "0.25.1"
+    "@esbuild/linux-riscv64" "0.25.1"
+    "@esbuild/linux-s390x" "0.25.1"
+    "@esbuild/linux-x64" "0.25.1"
+    "@esbuild/netbsd-arm64" "0.25.1"
+    "@esbuild/netbsd-x64" "0.25.1"
+    "@esbuild/openbsd-arm64" "0.25.1"
+    "@esbuild/openbsd-x64" "0.25.1"
+    "@esbuild/sunos-x64" "0.25.1"
+    "@esbuild/win32-arm64" "0.25.1"
+    "@esbuild/win32-ia32" "0.25.1"
+    "@esbuild/win32-x64" "0.25.1"
+
+escalade@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
+  integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
+
+escalade@^3.1.1, escalade@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
+escape-goat@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081"
+  integrity sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==
+
+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.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 sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+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-es@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz#f0822f0c18a535a97c3e714e89f88586a7641ec9"
+  integrity sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==
+  dependencies:
+    eslint-utils "^2.0.0"
+    regexpp "^3.0.0"
+
+eslint-plugin-eslint-plugin@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-plugin/-/eslint-plugin-eslint-plugin-3.5.3.tgz#6cac958e944b820962a4cf9e65cc32a2e0415eaf"
+  integrity sha512-8LnYyjIOLS0gqh3QFVBkahYzkFd5UaMZkkeEvqReSjIBgajYyZaMElU8szHhqDrqr0rWkkZk33j9e4qnFN3x2A==
+  dependencies:
+    eslint-utils "^2.1.0"
+
+eslint-plugin-ft-flow@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-ft-flow/-/eslint-plugin-ft-flow-2.0.3.tgz#3b3c113c41902bcbacf0e22b536debcfc3c819e8"
+  integrity sha512-Vbsd/b+LYA99jUbsL6viEUWShFaYQt2YQs3QN3f+aeszOhh2sgdcU0mjzDyD4yyBvMc8qy2uwvBBWfMzEX06tg==
+  dependencies:
+    lodash "^4.17.21"
+    string-natural-compare "^3.0.1"
+
+eslint-plugin-jest@28.4.0:
+  version "28.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-28.4.0.tgz#213be88f799a35ca9d63ce1a30081bb32b8da765"
+  integrity sha512-ORVHiFPC8RQxHLyQJ37MxNilK9k+cPzjHz65T8gAbpYZunGutXvKqwfM3WXBCvFDF1QBeYJJu9LB/i5cuXBs+g==
+  dependencies:
+    "@typescript-eslint/utils" "^6.0.0"
+
+eslint-plugin-no-for-of-loops@^1.0.0:
+  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-function-declare-after-return@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-no-function-declare-after-return/-/eslint-plugin-no-function-declare-after-return-1.0.0.tgz#ddf01d71d27b37ced61ccb295c6ac0708d87b209"
+  integrity sha512-/w6tuSK4kYSwHSlPtf36u/rQOG8YVPgl8a0bh4rV/ElZNaUGYOquY/hp4jaCnEmPta0aTpAkFEmSi6ZTd7wCEQ==
+
+eslint-plugin-no-unsanitized@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.0.2.tgz#e872b302cdfb5fe1262db989ba29cfcc334b499b"
+  integrity sha512-Pry0S9YmHoz8NCEMRQh7N0Yexh2MYCNPIlrV52hTmS7qXnTghWsjXouF08bgsrrZqaW9tt1ZiK3j5NEmPE+EjQ==
+
+"eslint-plugin-react-hooks-published@npm:eslint-plugin-react-hooks@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz#1be0080901e6ac31ce7971beed3d3ec0a423d9e3"
+  integrity sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==
+
+"eslint-plugin-react-internal@link:./scripts/eslint-rules":
+  version "0.0.0"
+  uid ""
+
+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"
+    has "^1.0.1"
+    jsx-ast-utils "^1.3.4"
+    object.assign "^4.0.4"
+
+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@5.1.0, eslint-scope@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
+  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@5.1.1, eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-scope@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.1.tgz#a9601e4b81a0b9171657c343fb13111688963cfc"
+  integrity sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-utils@^2.0.0, eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+"eslint-v7@npm:eslint@^7.7.0":
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+"eslint-v8@npm:eslint@^8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+"eslint-v9@npm:eslint@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.0.0.tgz#6270548758e390343f78c8afd030566d86927d40"
+  integrity sha512-IMryZ5SudxzQvuod6rUdIUz29qFItWx281VhtFVc2Psy/ZhlCeD/5DT6lBIJ4H3G+iamGJoTln1v+QSuPw0p7Q==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^3.0.2"
+    "@eslint/js" "9.0.0"
+    "@humanwhocodes/config-array" "^0.12.3"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^8.0.1"
+    eslint-visitor-keys "^4.0.0"
+    espree "^10.0.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^8.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+eslint-visitor-keys@4.0.0, eslint-visitor-keys@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
+  integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
+
+eslint-visitor-keys@^1.0.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-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint-visitor-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
+  integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@8.57.0:
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+eslint@^7.7.0:
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@10.0.1, espree@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.0.1.tgz#600e60404157412751ba4a6f3a2ee1a42433139f"
+  integrity sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==
+  dependencies:
+    acorn "^8.11.3"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.0.0"
+
+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+  dependencies:
+    estraverse "^5.1.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"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.0, estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+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==
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+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-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==
+
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+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.2.0, events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+exec-buffer@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/exec-buffer/-/exec-buffer-3.2.0.tgz#b1686dbd904c7cf982e652c1f5a79b1e5573082b"
+  integrity sha512-wsiD+2Tp6BWHoVv3B+5Dcx6E7u5zky+hUwOHjuH2hKSLR3dvRmX8fk8UD8uqQixHs4Wk6eDmiegVrMPjKj7wpA==
+  dependencies:
+    execa "^0.7.0"
+    p-finally "^1.0.0"
+    pify "^3.0.0"
+    rimraf "^2.5.4"
+    tempfile "^2.0.0"
+
+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"
+    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"
+  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"
+
+execa@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
+  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+execa@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
+  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^4.3.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
+executable@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
+  integrity sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==
+  dependencies:
+    pify "^2.2.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
+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"
+    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"
+
+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@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.7.0.tgz#578874590dcb3214514084c08115d8aee61e11bc"
+  integrity sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==
+  dependencies:
+    "@jest/expect-utils" "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+
+express@^4.17.3:
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
+  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.3"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.6.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.3.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.3"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.10"
+    proxy-addr "~2.0.7"
+    qs "6.13.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.19.0"
+    serve-static "1.16.2"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+ext-list@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/ext-list/-/ext-list-2.2.2.tgz#0b98e64ed82f5acf0f2931babf69212ef52ddd37"
+  integrity sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==
+  dependencies:
+    mime-db "^1.28.0"
+
+ext-name@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ext-name/-/ext-name-5.0.0.tgz#70781981d183ee15d13993c8822045c506c8f0a6"
+  integrity sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==
+  dependencies:
+    ext-list "^2.0.0"
+    sort-keys-length "^1.0.0"
+
+extend-shallow@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
+  integrity sha512-L7AGmkO6jhDkEBBGWlLtftA80Xq8DipnrRPr0pyi7GQLXkaq9JYA4xF4z6qnadIC6euiTDKco0cGSU9muw+WTw==
+  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:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+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"
+    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"
+
+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@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
+fancy-log@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7"
+  integrity sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==
+  dependencies:
+    ansi-gray "^0.1.1"
+    color-support "^1.1.3"
+    parse-node-version "^1.0.0"
+    time-stamp "^1.0.0"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.1.1:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
+  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
+fast-glob@^3.2.9:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-patch@3.1.1, fast-json-patch@^3.0.0-1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-3.1.1.tgz#85064ea1b1ebf97a3f7ad01e23f9337e72c66947"
+  integrity sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ==
+
+fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+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@^3.1.1:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.5.0.tgz#e9ea02f7e57d0cd8438180083e93077e496285e4"
+  integrity sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==
+
+fast-xml-parser@^3.19.0:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-3.19.0.tgz#cb637ec3f3999f51406dd8ff0e6fc4d83e520d01"
+  integrity sha512-4pXwmBplsCPv8FOY1WRakF970TjNGnGnfbOnLqjlYvMiF1SR3yOHyxMR/YCXpPTOspNF5gwudqktIP4VsWkvBg==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
+fastparse@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
+fastq@^1.6.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481"
+  integrity sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==
+  dependencies:
+    reusify "^1.0.4"
+
+faye-websocket@^0.11.3:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"
+  integrity sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==
+  dependencies:
+    bser "2.1.1"
+
+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@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-3.0.1.tgz#5265699e158700b453786e4892aa9730c0cb0f75"
+  integrity sha512-UHsf5lk5G33mSZIviQqulKvyV/kPIMwODH3tpkuoXbsBewFaWwT9KTfEvkoPj+WSGMGI6n+bRsc8VVdSa9Jh+w==
+  dependencies:
+    "@babel/core" "^7.0.0"
+    ansi-colors "^1.0.1"
+    babel-preset-fbjs "^3.2.0"
+    cross-spawn "^5.1.0"
+    fancy-log "^1.3.2"
+    object-assign "^4.0.1"
+    plugin-error "^0.1.2"
+    semver "^5.1.0"
+    through2 "^2.0.0"
+
+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"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+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.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"
+
+fdir@^6.4.3:
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.3.tgz#011cdacf837eca9b811c89dbb902df714273db72"
+  integrity sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==
+
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
+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"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
+  dependencies:
+    flat-cache "^4.0.0"
+
+file-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
+file-loader@^6.1.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+file-type@5.2.0, file-type@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-5.2.0.tgz#2ddbea7c73ffe36368dfae49dc338c058c2b8ad6"
+  integrity sha1-LdvqfHP/42No365J3DOMBYwritY=
+
+file-type@^10.4.0:
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-10.11.0.tgz#2961d09e4675b9fb9a3ee6b69e9cd23f43fd1890"
+  integrity sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==
+
+file-type@^14.6.0:
+  version "14.7.1"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-14.7.1.tgz#f748732b3e70478bff530e1cf0ec2fe33608b1bb"
+  integrity sha512-sXAMgFk67fQLcetXustxfKX+PZgHIUFn96Xld9uH8aXPdX3xOp0/jg9OdouVTvQrf7mrn+wAa4jN/y9fUOOiRA==
+  dependencies:
+    readable-web-to-node-stream "^2.0.0"
+    strtok3 "^6.0.3"
+    token-types "^2.0.0"
+    typedarray-to-buffer "^3.1.5"
+
+file-type@^3.8.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
+  integrity sha1-JXoHg4TR24CHvESdEH1SpSZyuek=
+
+file-type@^4.2.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-4.4.0.tgz#1b600e5fca1fbdc6e80c0a70c71c8dba5f7906c5"
+  integrity sha1-G2AOX8ofvcboDApwxxyNul95BsU=
+
+file-type@^6.1.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-6.2.0.tgz#e50cd75d356ffed4e306dc4f5bcf52a79903a919"
+  integrity sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==
+
+file-type@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-8.1.0.tgz#244f3b7ef641bbe0cca196c7276e4b332399f68c"
+  integrity sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==
+
+file-uri-to-path@1.0.0:
+  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-reserved-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz#abf73dfab735d045440abfea2d91f389ebbfa229"
+  integrity sha1-q/c9+rc10EVECr/qLZHzieu/oik=
+
+filenamify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-2.1.0.tgz#88faf495fb1b47abfd612300002a16228c677ee9"
+  integrity sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==
+  dependencies:
+    filename-reserved-regex "^2.0.0"
+    strip-outer "^1.0.0"
+    trim-repeated "^1.0.0"
+
+filesize@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.0.1.tgz#f850b509909c7c86f7e450ea19006c31c2ed3d2f"
+  integrity sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==
+
+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"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
+
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    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"
+
+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"
+
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+find-versions@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-3.2.0.tgz#10297f98030a786829681690545ef659ed1d254e"
+  integrity sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==
+  dependencies:
+    semver-regex "^2.0.0"
+
+find@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find/-/find-0.3.0.tgz#4082e8fc8d8320f1a382b5e4f521b9bc50775cb8"
+  integrity sha512-iSd+O4OEYV/I36Zl8MdYJO0xD82wH528SaCieTVHhclgiYNe9y+yPKSwK+A7/WsmHL1EZ+pYUJBXWTL5qofksw==
+  dependencies:
+    traverse-chain "~0.1.0"
+
+firefox-profile@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/firefox-profile/-/firefox-profile-4.6.0.tgz#e819b2f75a05b4d215d0c30a74d5b9d2d9ba8ae1"
+  integrity sha512-I9rAm1w8U3CdhgO4EzTJsCvgcbvynZn9lOySkZf78wUdUIQH2w9QOKf3pAX+THt2XMSSR3kJSuM8P7bYux9j8g==
+  dependencies:
+    adm-zip "~0.5.x"
+    fs-extra "~9.0.1"
+    ini "~2.0.0"
+    minimist "^1.2.5"
+    xml2js "^0.5.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@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.4"
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+flatted@^3.2.9:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
+
+flow-bin@^0.279.0:
+  version "0.279.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.279.0.tgz#06e502a51d735083d715ef769f43bdcb0fc2bb61"
+  integrity sha512-Xf0T82atOcEf5auHvJfUF+wWIxieBuUJZBu2hlAizdhAzwqSJic74ZLaL6N5SsE0SY9PxPf3Z/lBU7iRpRa9Lw==
+
+flow-remove-types@^2.279.0:
+  version "2.279.0"
+  resolved "https://registry.yarnpkg.com/flow-remove-types/-/flow-remove-types-2.279.0.tgz#3a3388d9158eba0f82c40d80d31d9640b883a3f5"
+  integrity sha512-bPFloMR/A2b/r/sIsf7Ix0LaMicCJNjwhXc4xEEQVzJCIz5u7C7XDaEOXOiqveKlCYK7DcBNn6R01Cbbc9gsYA==
+  dependencies:
+    hermes-parser "0.29.1"
+    pirates "^3.0.2"
+    vlq "^0.2.1"
+
+flow-typed@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/flow-typed/-/flow-typed-4.1.1.tgz#e4ff8ea37edcb8fb463b72b70787147bf52a1e08"
+  integrity sha512-S1NSkTm81UkoSiuDp9vUAY+jYSB8r/Bec1RFqjK3o+XagFu+OQtm1nh3ZyoshHtg1oPKfrSnslXHlqWiP76BSw==
+  dependencies:
+    "@octokit/rest" "^18.12.0"
+    colors "1.4.0"
+    flowgen "^1.10.0"
+    fs-extra "^8.1.0"
+    glob "^7.1.6"
+    got "^11.8.5"
+    js-yaml "^4.1.0"
+    md5 "^2.2.1"
+    mkdirp "^1.0.3"
+    node-stream-zip "^1.15.0"
+    prettier "^1.19.1"
+    rimraf "^3.0.2"
+    semver "^7.6.3"
+    simple-git "^3.10.0"
+    table "^6.7.3"
+    which "^2.0.2"
+    yargs "^15.1.0"
+
+flowgen@^1.10.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/flowgen/-/flowgen-1.21.0.tgz#f7ecb693892c4bd069492dbf77db561bbb451aa9"
+  integrity sha512-pFNFFyMLRmW6njhOIm5TrbGUDTv64aujmys2KrkRE2NYD8sXwJUyicQRwU5SPRBRJnFSD/FNlnHo2NnHI5eJSw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/highlight" "^7.16.7"
+    commander "^6.1.0"
+    lodash "^4.17.20"
+    prettier "^2.5.1"
+    shelljs "^0.8.4"
+    typescript "~4.4.4"
+    typescript-compiler "^1.4.1-2"
+
+follow-redirects@^1.0.0:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+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=
+
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+form-data-encoder@^2.1.2:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-2.1.4.tgz#261ea35d2a70d48d30ec7a9603130fa5515e9cd5"
+  integrity sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==
+
+form-data@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+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.1:
+  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@11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
+  integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-extra@^4.0.2, 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-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@~9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
+fs-monkey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
+  integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
+
+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.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@^2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+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.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.4.0.tgz#7a3f0374cc78c6c689ef75937b7b0cd75428c509"
+  integrity sha512-rci1g6U0rdTg6bAaBboP7XdRu01dzTAaKXxFf+PUqGuCv6Xu7o8NZdY1D5MvKGIjb6EdS1g3VlXOgksir1uGkg==
+  dependencies:
+    commander "2.9.0"
+    shell-quote "1.7.3"
+    spawn-sync "1.0.15"
+    when "3.7.7"
+    which "1.2.4"
+    winreg "0.0.12"
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+  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-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-proxy@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/get-proxy/-/get-proxy-2.1.0.tgz#349f2b4d91d44c4d4d4e9cba2ad90143fac5ef93"
+  integrity sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==
+  dependencies:
+    npm-conf "^1.1.0"
+
+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, 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@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
+  integrity sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+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.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-stream@^6.0.0, get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+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=
+
+gifsicle@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.2.0.tgz#b06b25ed7530f033f6ed2c545d6f9b546cc182fb"
+  integrity sha512-vOIS3j0XoTCxq9pkGj43gEix82RkI5FveNgaFZutjbaui/HH+4fR8Y56dwXDuxYo8hR4xOo6/j2h1WHoQW6XLw==
+  dependencies:
+    bin-build "^3.0.0"
+    bin-wrapper "^4.0.0"
+    execa "^5.0.0"
+    logalot "^2.0.0"
+
+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"
+
+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.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+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"
+    glob-parent "^3.1.0"
+    is-negated-glob "^1.0.0"
+    ordered-read-streams "^1.0.0"
+    pumpify "^1.3.5"
+    readable-stream "^2.1.5"
+    remove-trailing-separator "^1.0.1"
+    to-absolute-glob "^2.0.0"
+    unique-stream "^2.0.2"
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+glob@10.4.2:
+  version "10.4.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.2.tgz#bed6b95dade5c1f80b4434daced233aee76160e5"
+  integrity sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^10.2.5:
+  version "10.2.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.2.7.tgz#9dd2828cd5bc7bd861e7738d91e7113dda41d7d8"
+  integrity sha512-jTKehsravOJo8IJxUGfZILnkvVJM/MOfHRs8QcXolVef2zNI9Tqyy5+SeuOAZd3upViEZQLyFpQhYiHLrMUNmA==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.0.3"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2"
+    path-scurry "^1.7.0"
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.1.1, glob@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  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.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
+global-agent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-agent/-/global-agent-3.0.0.tgz#ae7cd31bd3583b93c5a16437a1afe27cc33a1ab6"
+  integrity sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==
+  dependencies:
+    boolean "^3.0.1"
+    es6-error "^4.1.1"
+    matcher "^3.0.0"
+    roarr "^2.15.3"
+    semver "^7.3.2"
+    serialize-error "^7.0.1"
+
+global-dirs@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.0.1.tgz#acdf3bb6685bcd55cb35e8a052266569e9469201"
+  integrity sha512-5HqUqdhkEovj2Of/ms3IeS/EekcO54ytHRLV4PEY2rhRwrHXLQjeVEES0Lhka0xwNDtGYn58wyC4s5+MHsOO6A==
+  dependencies:
+    ini "^1.3.5"
+
+global-dirs@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.1.tgz#0c488971f066baceda21447aecb1a8b911d22485"
+  integrity sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==
+  dependencies:
+    ini "2.0.0"
+
+globals@^11.1.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@^13.19.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globals@^13.6.0, globals@^13.9.0:
+  version "13.19.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.19.0.tgz#7a42de8e6ad4f7242fbcca27ea5b23aca367b5c8"
+  integrity sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
+
+globalthis@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
+  integrity sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==
+  dependencies:
+    define-properties "^1.1.3"
+
+globby@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
+  integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
+globby@^11.0.3:
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
+  integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+google-closure-compiler-java@^20230206.0.0:
+  version "20230206.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-java/-/google-closure-compiler-java-20230206.0.0.tgz#e615c1f17901b7f7906d891f132e2867e8a21019"
+  integrity sha512-OcnDf29yx4JNU13HpptADI2ckl9hEchktSHs2XSLQ/xStUAJQGQOl96to5IYh2VuFgn3Ssaw6M3c6At2pJr7wQ==
+
+google-closure-compiler-linux@^20230206.0.0:
+  version "20230206.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-linux/-/google-closure-compiler-linux-20230206.0.0.tgz#085f3782e6640f38aeb10512ff8e8f226c61dbc3"
+  integrity sha512-06N6w2elsnZMMA4Gf/vN2A3XzWvu+gUTrBczaw0KQL48GgdLq6OgAXrcopbGdi/K8Gz1WAcG0qf2ccG8dSqYNg==
+
+google-closure-compiler-osx@^20230206.0.0:
+  version "20230206.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-osx/-/google-closure-compiler-osx-20230206.0.0.tgz#62536d49652567c86efb44bbacc1c29111dd3442"
+  integrity sha512-lJ/Y4HTk+KdL6PhLmmalP/3DdzGK0mS0+htuFP6y4t9+QXiUKnpHWx/VDQ3Fwm2fWEzqDxfhX3R+wC9lBvFiAg==
+
+google-closure-compiler-windows@^20230206.0.0:
+  version "20230206.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-windows/-/google-closure-compiler-windows-20230206.0.0.tgz#7c3458f03ea940321a7c1a008da14f20b68ef4ef"
+  integrity sha512-4KPr7XPiOs8g4Ao3T+70egf14avCEne26XF4Mur4Fg5511ym1uEN+NlEyjBOAmfUFfaA7BYDsA8iBzDIetKrnw==
+
+google-closure-compiler@^20230206.0.0:
+  version "20230206.0.0"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler/-/google-closure-compiler-20230206.0.0.tgz#8de9fdf36f33edb96d48473167aa18098ed49845"
+  integrity sha512-gGscQOcO/75AlHyw78v87u0nGKJHWqOrQ224Ks91HH1iISgF+xZ8GYosU/8s5VD66x3VD0tJKXM2rIoGOA1ycA==
+  dependencies:
+    chalk "4.x"
+    google-closure-compiler-java "^20230206.0.0"
+    minimist "1.x"
+    vinyl "2.x"
+    vinyl-sourcemaps-apply "^0.2.0"
+  optionalDependencies:
+    google-closure-compiler-linux "^20230206.0.0"
+    google-closure-compiler-osx "^20230206.0.0"
+    google-closure-compiler-windows "^20230206.0.0"
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+got@^11.1.4, got@^11.8.5:
+  version "11.8.6"
+  resolved "https://registry.yarnpkg.com/got/-/got-11.8.6.tgz#276e827ead8772eddbcfc97170590b841823233a"
+  integrity sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==
+  dependencies:
+    "@sindresorhus/is" "^4.0.0"
+    "@szmarczak/http-timer" "^4.0.5"
+    "@types/cacheable-request" "^6.0.1"
+    "@types/responselike" "^1.0.0"
+    cacheable-lookup "^5.0.3"
+    cacheable-request "^7.0.2"
+    decompress-response "^6.0.0"
+    http2-wrapper "^1.0.0-beta.5.2"
+    lowercase-keys "^2.0.0"
+    p-cancelable "^2.0.0"
+    responselike "^2.0.0"
+
+got@^12.1.0:
+  version "12.6.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-12.6.1.tgz#8869560d1383353204b5a9435f782df9c091f549"
+  integrity sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==
+  dependencies:
+    "@sindresorhus/is" "^5.2.0"
+    "@szmarczak/http-timer" "^5.0.1"
+    cacheable-lookup "^7.0.0"
+    cacheable-request "^10.2.8"
+    decompress-response "^6.0.0"
+    form-data-encoder "^2.1.2"
+    get-stream "^6.0.1"
+    http2-wrapper "^2.1.10"
+    lowercase-keys "^3.0.0"
+    p-cancelable "^3.0.0"
+    responselike "^3.0.0"
+
+got@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
+  integrity sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==
+  dependencies:
+    decompress-response "^3.2.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-plain-obj "^1.1.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    p-cancelable "^0.3.0"
+    p-timeout "^1.1.1"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    url-parse-lax "^1.0.0"
+    url-to-options "^1.0.1"
+
+got@^8.3.1:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937"
+  integrity sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==
+  dependencies:
+    "@sindresorhus/is" "^0.7.0"
+    cacheable-request "^2.1.1"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    into-stream "^3.1.0"
+    is-retry-allowed "^1.1.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    mimic-response "^1.0.0"
+    p-cancelable "^0.4.0"
+    p-timeout "^2.0.1"
+    pify "^3.0.0"
+    safe-buffer "^5.1.1"
+    timed-out "^4.0.1"
+    url-parse-lax "^3.0.0"
+    url-to-options "^1.0.1"
+
+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.2.10:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+graceful-fs@^4.1.0, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+
+graceful-fs@^4.1.10, graceful-fs@^4.2.6:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+"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=
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
+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@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  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"
+  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
+
+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-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
+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 sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbol-support-x@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
+  integrity sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==
+
+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-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+
+has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-to-string-tag-x@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
+  integrity sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==
+  dependencies:
+    has-symbol-support-x "^1.4.1"
+
+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"
+    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"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  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"
+  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-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-yarn@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-3.0.0.tgz#c3c21e559730d1d3b57e28af1f30d06fac38147d"
+  integrity sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==
+
+has@^1.0.1:
+  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"
+
+has@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
+  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
+
+hasown@^2.0.0, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+hermes-eslint@^0.32.0:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.32.0.tgz#a23bcaece522f356cb1b8e990e57117dca13852d"
+  integrity sha512-f/gnFD3Nl7QNrclG6otkHnHsUbwYrJGO76AMtoDeIYs2+i7fFgqJgSg7DKwejTtAKBoXQg51hAQuo9cgcp1R1w==
+  dependencies:
+    esrecurse "^4.3.0"
+    hermes-estree "0.32.0"
+    hermes-parser "0.32.0"
+
+hermes-estree@0.25.1:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480"
+  integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==
+
+hermes-estree@0.29.1:
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.29.1.tgz#043c7db076e0e8ef8c5f6ed23828d1ba463ebcc5"
+  integrity sha512-jl+x31n4/w+wEqm0I2r4CMimukLbLQEYpisys5oCre611CI5fc9TxhqkBBCJ1edDG4Kza0f7CgNz8xVMLZQOmQ==
+
+hermes-estree@0.32.0:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.32.0.tgz#bb7da6613ab8e67e334a1854ea1e209f487d307b"
+  integrity sha512-KWn3BqnlDOl97Xe1Yviur6NbgIZ+IP+UVSpshlZWkq+EtoHg6/cwiDj/osP9PCEgFE15KBm1O55JRwbMEm5ejQ==
+
+hermes-parser@0.29.1:
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.29.1.tgz#436b24bcd7bb1e71f92a04c396ccc0716c288d56"
+  integrity sha512-xBHWmUtRC5e/UL0tI7Ivt2riA/YBq9+SiYFU7C1oBa/j2jYGlIF9043oak1F47ihuDIxQ5nbsKueYJDRY02UgA==
+  dependencies:
+    hermes-estree "0.29.1"
+
+hermes-parser@0.32.0, hermes-parser@^0.32.0:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.32.0.tgz#7916984ef6fdce62e7415d354cf35392061cd303"
+  integrity sha512-g4nBOWFpuiTqjR3LZdRxKUkij9iyveWeuks7INEsMX741f3r9xxrOe8TeQfUxtda0eXmiIFiMQzoeSQEno33Hw==
+  dependencies:
+    hermes-estree "0.32.0"
+
+hermes-parser@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1"
+  integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==
+  dependencies:
+    hermes-estree "0.25.1"
+
+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.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+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@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
+  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
+  dependencies:
+    whatwg-encoding "^2.0.0"
+
+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=
+
+html-entities@^2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
+  integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+htmlparser2@^8.0.1:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
+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-cache-semantics@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
+  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
+
+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@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+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-parser-js@>=0.5.1:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
+  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
+
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+  dependencies:
+    "@tootallnate/once" "2"
+    agent-base "6"
+    debug "4"
+
+http-proxy-middleware@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
+  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
+  dependencies:
+    "@types/http-proxy" "^1.17.8"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.1"
+    is-plain-obj "^3.0.0"
+    micromatch "^4.0.2"
+
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http2-wrapper@^1.0.0-beta.5.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-1.0.3.tgz#b8f55e0c1f25d4ebd08b3b0c2c079f9590800b3d"
+  integrity sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==
+  dependencies:
+    quick-lru "^5.1.1"
+    resolve-alpn "^1.0.0"
+
+http2-wrapper@^2.1.10:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-2.2.1.tgz#310968153dcdedb160d8b72114363ef5fce1f64a"
+  integrity sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==
+  dependencies:
+    quick-lru "^5.1.1"
+    resolve-alpn "^1.2.0"
+
+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-proxy-agent@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+https-proxy-agent@^7.0.0:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
+  integrity sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "4"
+
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+human-signals@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
+  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
+
+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==
+
+hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.3:
+  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.24, 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.2 < 3"
+
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+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=
+
+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:
+    postcss "^6.0.1"
+
+icss-utils@^4.0.0, icss-utils@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
+  dependencies:
+    postcss "^7.0.14"
+
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
+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==
+
+ieee754@^1.1.13, ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+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==
+
+ignore@^5.1.4:
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
+  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+
+ignore@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+
+ignore@^5.2.4:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+image-size@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.1.1.tgz#ddd67d4dc340e52ac29ce5f546a09f4e29e840ac"
+  integrity sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==
+  dependencies:
+    queue "6.0.2"
+
+imagemin-gifsicle@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
+  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
+  dependencies:
+    execa "^1.0.0"
+    gifsicle "^5.0.0"
+    is-gif "^3.0.0"
+
+imagemin-jpegtran@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/imagemin-jpegtran/-/imagemin-jpegtran-6.0.0.tgz#c8d3bcfb6ec9c561c20a987142854be70d90b04f"
+  integrity sha512-Ih+NgThzqYfEWv9t58EItncaaXIHR0u9RuhKa8CtVBlMBvY0dCIxgQJQCfwImA4AV1PMfmUKlkyIHJjb7V4z1g==
+  dependencies:
+    exec-buffer "^3.0.0"
+    is-jpg "^2.0.0"
+    jpegtran-bin "^4.0.0"
+
+imagemin-optipng@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/imagemin-optipng/-/imagemin-optipng-7.1.0.tgz#2225c82c35e5c29b7fa98d4f9ecee1161a68e888"
+  integrity sha512-JNORTZ6j6untH7e5gF4aWdhDCxe3ODsSLKs/f7Grewy3ebZpl1ZsU+VUTPY4rzeHgaFA8GSWOoA8V2M3OixWZQ==
+  dependencies:
+    exec-buffer "^3.0.0"
+    is-png "^2.0.0"
+    optipng-bin "^6.0.0"
+
+imagemin-svgo@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/imagemin-svgo/-/imagemin-svgo-7.1.0.tgz#528a42fd3d55eff5d4af8fd1113f25fb61ad6d9a"
+  integrity sha512-0JlIZNWP0Luasn1HT82uB9nU9aa+vUj6kpT+MjPW11LbprXC+iC4HDwn1r4Q2/91qj4iy9tRZNsFySMlEpLdpg==
+  dependencies:
+    is-svg "^4.2.1"
+    svgo "^1.3.2"
+
+imagemin@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/imagemin/-/imagemin-8.0.0.tgz#d707920d6c7a7f8b329d2e02d8c78d5dcc826356"
+  integrity sha512-z/SoCabSI9nYbCefdu1xgCJJ+KMjsu17dlaL7sGXAdaljIg7K32TUuj9Vt9jMjBZJd/qyWXJ+FvjChkvc2mXOw==
+  dependencies:
+    file-type "^14.6.0"
+    globby "^11.0.3"
+    graceful-fs "^4.2.6"
+    junk "^3.1.0"
+    p-pipe "^4.0.0"
+    replace-ext "^2.0.0"
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
+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.2.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  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-lazy@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-3.1.0.tgz#891279202c8a2280fdbd6674dbd8da1a1dfc67cc"
+  integrity sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==
+
+import-lazy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
+
+import-local@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+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"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+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@2.0.0, ini@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
+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.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz#e5a5a3515e25600e016b71e39138971228486c33"
+  integrity sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
+internal-ip@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-6.2.0.tgz#d5541e79716e406b74ac6b07b856ef18dc1621c1"
+  integrity sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==
+  dependencies:
+    default-gateway "^6.0.0"
+    ipaddr.js "^1.9.1"
+    is-ip "^3.1.0"
+    p-event "^4.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==
+
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
+into-stream@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
+  integrity sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=
+  dependencies:
+    from2 "^2.1.1"
+    p-is-promise "^1.1.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"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-3.0.1.tgz#a93c7a3d4386a1dc8325b97da9bb1620c0282523"
+  integrity sha512-CYdFeFexxhv/Bcny+Q0BfOV+ltRlJcd4BBZBYFX/O0u4npJrgZtIcjokegtiSMAvlMTJ+Koq0GBCc//3bueQxw==
+
+ip-regex@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
+  integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==
+
+ipaddr.js@1.9.1, ipaddr.js@^1.9.1:
+  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==
+
+ipaddr.js@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
+  integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
+
+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"
+
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  integrity sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
+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 sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-bigint@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
+  integrity sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==
+
+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-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.1.tgz#3c0878f035cb821228d350d2e1e36719716a3de8"
+  integrity sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-buffer@^1.1.5, is-buffer@~1.1.6:
+  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@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz#f03271717d8654cfcaf07ab0463faa3571581169"
+  integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==
+  dependencies:
+    builtin-modules "^3.3.0"
+
+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-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+
+is-callable@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
+  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
+
+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-ci@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
+  dependencies:
+    ci-info "^3.2.0"
+
+is-core-module@^2.13.0, is-core-module@^2.9.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
+is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+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"
+    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"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-docker@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b"
+  integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==
+
+is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-docker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
+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@^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.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
+
+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-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-gif@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-gif/-/is-gif-3.0.0.tgz#c4be60b26a301d695bb833b20d9b5d66c6cf83b1"
+  integrity sha512-IqJ/jlbw5WJSNfwQ/lHEDXF8rxhRgF6ythk2oiEvhpG29F704eX9NO6TvPfMiq9DrbwgcEDnETYNcZDPewQoVw==
+  dependencies:
+    file-type "^10.4.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-glob@^4.0.0, is-glob@^4.0.1, 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-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-inside-container@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+  dependencies:
+    is-docker "^3.0.0"
+
+is-installed-globally@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
+  dependencies:
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"
+
+is-installed-globally@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
+  integrity sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==
+  dependencies:
+    global-dirs "^3.0.0"
+    is-path-inside "^3.0.2"
+
+is-ip@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-ip/-/is-ip-3.1.0.tgz#2ae5ddfafaf05cb8008a62093cf29734f657c5d8"
+  integrity sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==
+  dependencies:
+    ip-regex "^4.0.0"
+
+is-jpg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-jpg/-/is-jpg-2.0.0.tgz#2e1997fa6e9166eaac0242daae443403e4ef1d97"
+  integrity sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=
+
+is-mergeable-object@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz#faaa3ed1cfce87d6f7d2f5885e92cc30af3e2ebf"
+  integrity sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
+
+is-natural-number@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
+  integrity sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=
+
+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-negative-zero@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+
+is-npm@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
+  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
+
+is-npm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
+  integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
+
+is-npm@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-6.0.0.tgz#b59e75e8915543ca5d881ecff864077cba095261"
+  integrity sha512-JEjxbSmtPSt1c8XTkVrlujcXdKV1/tvuQ7GwKcAlyiVLeYFQ2VHat8xfrDJsIkhCdF/tZ7CiIR3sy141c6+gPQ==
+
+is-number-object@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.5.tgz#6edfaeed7950cff19afedce9fbfca9ee6dd289eb"
+  integrity sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==
+
+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@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+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-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-object@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
+  integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
+
+is-path-inside@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
+  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
+
+is-path-inside@^3.0.2, is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-obj@^1.0.0, 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-obj@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
+  integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
+
+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@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
+is-png@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-png/-/is-png-2.0.0.tgz#ee8cbc9e9b050425cedeeb4a6fb74a649b0a4a8d"
+  integrity sha512-4KPGizaVGj2LK7xwJIz8o5B2ubu1D/vcQsgOGFEDlpcvgZHto4gBnyd0ig7Ws+67ixmwKoNmu0hYnpo6AaKb5g==
+
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-reference@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
+  dependencies:
+    "@types/estree" "*"
+
+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-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-regex@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
+  integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    has-symbols "^1.0.2"
+
+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-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
+  dependencies:
+    is-unc-path "^1.0.0"
+
+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-retry-allowed@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
+  integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
+
+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-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
+is-string@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
+  integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
+
+is-svg@^4.2.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-4.3.1.tgz#8c63ec8c67c8c7f0a8de0a71c8c7d58eccf4406b"
+  integrity sha512-h2CGs+yPUyvkgTJQS9cJzo9lYK06WgRiXUqBBHtglSzVKAuH4/oWsqk7LGfbSa1hGk9QcZ0SyQtVggvBA8LZXA==
+  dependencies:
+    fast-xml-parser "^3.19.0"
+
+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-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+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-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  integrity sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==
+  dependencies:
+    unc-path-regex "^0.1.2"
+
+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.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-wsl@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
+  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+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==
+
+is-yarn-global@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.4.1.tgz#b312d902b313f81e4eaf98b6361ba2b45cd694bb"
+  integrity sha512-/kppl+R+LO5VmhYSEWARUFjodS25D68gvj8W7z0I7OWhUla5xWu8KL6CtB2V0R6yqhnRgbcaREMr4EEM6htLPQ==
+
+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 sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+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=
+
+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"
+
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
+  integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
+
+istanbul-lib-instrument@^5.0.4:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-instrument@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.2.tgz#91655936cf7380e4e473383081e38478b69993b1"
+  integrity sha512-1WUsZ9R1lA0HtBSohTkm39WTPlNKSJ5iFk7UwqXkBLoHQT+hfqPsfsTDVuZdKGaBwn7din9bS7SsnoAr943hvw==
+  dependencies:
+    "@babel/core" "^7.23.9"
+    "@babel/parser" "^7.23.9"
+    "@istanbuljs/schema" "^0.1.3"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^7.5.4"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d"
+  integrity sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^4.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
+  integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+isurl@^1.0.0-alpha5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
+  integrity sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==
+  dependencies:
+    has-to-string-tag-x "^1.2.0"
+    is-object "^1.0.1"
+
+jackspeak@^2.0.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.2.1.tgz#655e8cf025d872c9c03d3eb63e8f0c024fef16a6"
+  integrity sha512-MXbxovZ/Pm42f6cDIDkl3xpwv1AGwObKwfmjs2nQePiy85tP3fatofl3FC1aBsOtP/6fq5SbtgHwWcMsLP+bDw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+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@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"
+  integrity sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==
+  dependencies:
+    execa "^5.0.0"
+    jest-util "^29.7.0"
+    p-limit "^3.1.0"
+
+jest-circus@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.7.0.tgz#b6817a45fcc835d8b16d5962d0c026473ee3668a"
+  integrity sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/expect" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^1.0.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.7.0"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    p-limit "^3.1.0"
+    pretty-format "^29.7.0"
+    pure-rand "^6.0.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-cli@^29.4.2, jest-cli@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.7.0.tgz#5592c940798e0cae677eec169264f2d839a37995"
+  integrity sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==
+  dependencies:
+    "@jest/core" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    create-jest "^29.7.0"
+    exit "^0.1.2"
+    import-local "^3.0.2"
+    jest-config "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    yargs "^17.3.1"
+
+jest-config@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.7.0.tgz#bcbda8806dbcc01b1e316a46bb74085a84b0245f"
+  integrity sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    babel-jest "^29.7.0"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.7.0"
+    jest-environment-node "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-runner "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^29.4.2, jest-diff@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
+  integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.6.3"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-docblock@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.7.0.tgz#8fddb6adc3cdc955c93e2a87f61cfd350d5d119a"
+  integrity sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.7.0.tgz#162a9b3f2328bdd991beaabffbb74745e56577d1"
+  integrity sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    jest-get-type "^29.6.3"
+    jest-util "^29.7.0"
+    pretty-format "^29.7.0"
+
+jest-environment-jsdom@^29.4.2:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz#d206fa3551933c3fd519e5dfdb58a0f5139a837f"
+  integrity sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/jsdom" "^20.0.0"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
+    jsdom "^20.0.0"
+
+jest-environment-node@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.7.0.tgz#0b93e111dda8ec120bc8300e6d1fb9576e164376"
+  integrity sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
+
+jest-fetch-mock@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz#31749c456ae27b8919d69824f1c2bd85fe0a1f3b"
+  integrity sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==
+  dependencies:
+    cross-fetch "^3.0.4"
+    promise-polyfill "^8.1.3"
+
+jest-get-type@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
+  integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
+
+jest-haste-map@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.7.0.tgz#3c2396524482f5a0506376e6c858c3bbcc17b104"
+  integrity sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.6.3"
+    jest-util "^29.7.0"
+    jest-worker "^29.7.0"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-leak-detector@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz#5b7ec0dadfdfec0ca383dc9aa016d36b5ea4c728"
+  integrity sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==
+  dependencies:
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-matcher-utils@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
+  integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
+jest-message-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.7.0.tgz#8bc392e204e95dfe7564abbe72a404e28e51f7f3"
+  integrity sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.6.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.7.0.tgz#4e836cf60e99c6fcfabe9f99d017f3fdd50a6347"
+  integrity sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-util "^29.7.0"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
+
+jest-regex-util@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.6.3.tgz#4a556d9c776af68e1c5f48194f4d0327d24e8a52"
+  integrity sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==
+
+jest-resolve-dependencies@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.7.0.tgz#1b04f2c095f37fc776ff40803dc92921b1e88428"
+  integrity sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==
+  dependencies:
+    jest-regex-util "^29.6.3"
+    jest-snapshot "^29.7.0"
+
+jest-resolve@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.7.0.tgz#64d6a8992dd26f635ab0c01e5eef4399c6bcbc30"
+  integrity sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
+
+jest-runner@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.7.0.tgz#809af072d408a53dcfd2e849a4c976d3132f718e"
+  integrity sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/environment" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.7.0"
+    jest-environment-node "^29.7.0"
+    jest-haste-map "^29.7.0"
+    jest-leak-detector "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-resolve "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-util "^29.7.0"
+    jest-watcher "^29.7.0"
+    jest-worker "^29.7.0"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runtime@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.7.0.tgz#efecb3141cf7d3767a3a0cc8f7c9990587d3d817"
+  integrity sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/globals" "^29.7.0"
+    "@jest/source-map" "^29.6.3"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-mock "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-silent-reporter@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/jest-silent-reporter/-/jest-silent-reporter-0.6.0.tgz#e9c63a3b1e3c80571d690d998faf842f576b6a60"
+  integrity sha512-4nmS+5o7ycVlvbQOTx7CnGdbBtP2646hnDgQpQLaVhjHcQNHD+gqBAetyjRDlgpZ8+8N82MWI59K+EX2LsVk7g==
+  dependencies:
+    chalk "^4.0.0"
+    jest-util "^26.0.0"
+
+jest-snapshot-serializer-raw@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot-serializer-raw/-/jest-snapshot-serializer-raw-1.2.0.tgz#cd67afb5e5cc39d88d518b45e7320dd01ce55148"
+  integrity sha512-Cnp2u7GkaXBVOOelhU94x6Kb/10WJjQtgKDvqynnYGNGQlKBj06x8QZmRkL8XWWVLQ5DKA2fT5rY9kRd512JcA==
+
+jest-snapshot@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.7.0.tgz#c2c574c3f51865da1bb329036778a69bf88a6be5"
+  integrity sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.7.0"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    natural-compare "^1.4.0"
+    pretty-format "^29.7.0"
+    semver "^7.5.3"
+
+jest-util@^26.0.0:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
+  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
+
+jest-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
+  integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
+  integrity sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.6.3"
+    leven "^3.1.0"
+    pretty-format "^29.7.0"
+
+jest-watcher@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.7.0.tgz#7810d30d619c3a62093223ce6bb359ca1b28a2f2"
+  integrity sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==
+  dependencies:
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.7.0"
+    string-length "^4.0.1"
+
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest-worker@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.7.0.tgz#acad073acbbaeb7262bd5389e1bcf43e10058d4a"
+  integrity sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==
+  dependencies:
+    "@types/node" "*"
+    jest-util "^29.7.0"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^29.4.2, jest@^29.5.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.7.0.tgz#994676fc24177f088f1c5e3737f5697204ff2613"
+  integrity sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==
+  dependencies:
+    "@jest/core" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    import-local "^3.0.2"
+    jest-cli "^29.7.0"
+
+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=
+
+jose@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-5.4.1.tgz#b471ee3963920ba5452fd1b1398c8ba72a7b2fcf"
+  integrity sha512-U6QajmpV/nhL9SyfAewo000fkiRQ+Yd2H0lBxJJ9apjpOgkOcBQJWOrMo917lxLptdS/n/o/xPzMkXhF46K8hQ==
+
+joycon@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
+  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
+
+jpegtran-bin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jpegtran-bin/-/jpegtran-bin-4.0.0.tgz#d00aed809fba7aa6f30817e59eee4ddf198f8f10"
+  integrity sha512-2cRl1ism+wJUoYAYFt6O/rLBfpXNWG2dUWbgcEkTt5WGMnqI46eEro8T4C5zGROxKRqyKpCBSdHPvt5UYCtxaQ==
+  dependencies:
+    bin-build "^3.0.0"
+    bin-wrapper "^4.0.0"
+    logalot "^2.0.0"
+
+"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.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsc-safe-url@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz#141c14fbb43791e88d5dc64e85a374575a83477a"
+  integrity sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==
+
+jsdom@22.1.0, jsdom@^20.0.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-22.1.0.tgz#0fca6d1a37fbeb7f4aac93d1090d782c56b611c8"
+  integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==
+  dependencies:
+    abab "^2.0.6"
+    cssstyle "^3.0.0"
+    data-urls "^4.0.0"
+    decimal.js "^10.4.3"
+    domexception "^4.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.4"
+    parse5 "^7.1.2"
+    rrweb-cssom "^0.6.0"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^12.0.1"
+    ws "^8.13.0"
+    xml-name-validator "^4.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+
+jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
+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-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+json-merge-patch@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-merge-patch/-/json-merge-patch-1.0.2.tgz#c4626811943b2f362f8607ae8f03d528875465b0"
+  integrity sha512-M6Vp2GN9L7cfuMXiWOmHj9bEFbeC250iVtcKQbqVgEsDVYnIsrNsbU+h/Y/PkbBQCtEa4Bez+Ebv0zfbC8ObLg==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
+json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-parse-even-better-errors@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz#b43d35e89c0f3be6b5fbbe9dc6c82467b30c28da"
+  integrity sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==
+
+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-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+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:
+  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:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
+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"
+
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
+
+json5@^2.2.2, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+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"
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  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=
+
+jsonpointer@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
+  integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
+
+jsonwebtoken@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.0.tgz#d0faf9ba1cc3a56255fe49c0961a67e520c1926d"
+  integrity sha512-tuGfYXxkQGDPnLJ7SibiQgVgeDgfbPq2k2ICcbgqW8WxWLBAxKQM/ZCu/IT8SOSwmaYl4dpTFCW5xZv7YbbWUw==
+  dependencies:
+    jws "^3.2.2"
+    lodash "^4.17.21"
+    ms "^2.1.1"
+    semver "^7.3.8"
+
+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@3.10.1, jszip@^3.2.2:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
+junk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
+  integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
+
+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.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.0.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
+  integrity sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==
+  dependencies:
+    json-buffer "3.0.0"
+
+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"
+
+keyv@^4.0.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.2.tgz#0e310ce73bf7851ec702f2eaf46ec4e3805cce56"
+  integrity sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==
+  dependencies:
+    json-buffer "3.0.1"
+
+keyv@^4.5.3, keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+kind-of@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
+  integrity sha512-aUH6ElPnMGon2/YkxRIigV32MOpTVcoXQ1Oo8aYn40s+sJ3j+0gFZsT8HKDcxNy7Fi9zuquWtGaGAahOdv5p/g==
+
+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"
+  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.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+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==
+
+latest-version@^5.0.0, latest-version@^5.1.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"
+
+latest-version@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-7.0.0.tgz#843201591ea81a4d404932eeb61240fe04e9e5da"
+  integrity sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==
+  dependencies:
+    package-json "^8.1.0"
+
+launch-editor@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.6.0.tgz#4c0c1a6ac126c572bd9ff9a30da1d2cae66defd7"
+  integrity sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.7.3"
+
+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@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-3.1.1.tgz#9030ec479a058fc36b5e8243ebaac8b6ac582fd0"
+  integrity sha512-M6T051+5QCGLBQb8id3hdvIW8+zeFV2FyBGFS9IEK5H9Wt4MueD4bW1eWikpHgZp+5xR3l5c8pZUkQsIA0BFZg==
+  dependencies:
+    invert-kv "^3.0.0"
+
+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==
+
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+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"
+
+lighthouse-logger@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/lighthouse-logger/-/lighthouse-logger-1.2.0.tgz#b76d56935e9c137e86a04741f6bb9b2776e886ca"
+  integrity sha512-wzUvdIeJZhRsG6gpZfmSCfysaxNEr43i+QT+Hie94wvHDKFLi4n7C2GqZ4sTC+PH5b5iktmXJvU87rWvhP3lHw==
+  dependencies:
+    debug "^2.6.8"
+    marky "^1.2.0"
+
+lilconfig@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+lines-and-columns@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.4.tgz#d00318855905d2660d8c0822e3f5a4715855fc42"
+  integrity sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==
+
+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"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+load-tsconfig@^0.2.3:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
+  integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+loader-utils@^1.0.2, loader-utils@^1.1.0:
+  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"
+
+loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+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@^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"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+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.hasin@4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.hasin/-/lodash.hasin-4.5.2.tgz#f91e352378d21ef7090b9e7687c2ca35c5b4d52a"
+  integrity sha1-+R41I3jSHvcJC552h8LKNcW01So=
+
+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.isempty@4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+  integrity sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=
+
+lodash.isnil@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/lodash.isnil/-/lodash.isnil-4.0.0.tgz#49e28cd559013458c814c5479d3c663a21bfaa6c"
+  integrity sha1-SeKM1VkBNFjIFMVHnTxmOiG/qmw=
+
+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.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.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.omitby@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.omitby/-/lodash.omitby-4.6.0.tgz#5c15ff4754ad555016b53c041311e8f079204791"
+  integrity sha1-XBX/R1StVVAWtTwEExHo8HkgR5E=
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+
+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@^4.14.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.8.0, lodash@~4.17.2:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+logalot@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/logalot/-/logalot-2.1.0.tgz#5f8e8c90d304edf12530951a5554abb8c5e3f552"
+  integrity sha1-X46MkNME7fElMJUaVVSruMXj9VI=
+  dependencies:
+    figures "^1.3.5"
+    squeak "^1.0.0"
+
+longest@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
+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"
+
+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:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+  integrity sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=
+
+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==
+
+lowercase-keys@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
+  integrity sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==
+
+lpad-align@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/lpad-align/-/lpad-align-1.1.2.tgz#21f600ac1c3095c3c6e497ee67271ee08481fe9e"
+  integrity sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=
+  dependencies:
+    get-stdin "^4.0.1"
+    indent-string "^2.1.0"
+    longest "^1.0.0"
+    meow "^3.3.0"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+lru-cache@^4.0.1:
+  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"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+lru-cache@^9.1.1:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-9.1.2.tgz#255fdbc14b75589d6d0e73644ca167a8db506835"
+  integrity sha512-ERJq3FOzJTxBbFjZ7iDs+NiK4VI9Wz+RdrrAB8dio1oV+YvdPzUEE4QNiT2VD51DkIbCYRUUzCRkssXCHqSnKQ==
+
+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.26.7:
+  version "0.26.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.7.tgz#caf7daf61b34e9982f8228c4527474dac8981d6f"
+  integrity sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+magic-string@0.30.5:
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
+magic-string@^0.30.10:
+  version "0.30.17"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
+  integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
+make-dir@^1.0.0, make-dir@^1.2.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-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
+  integrity sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==
+  dependencies:
+    semver "^7.5.3"
+
+make-error@^1.1.1, make-error@^1.3.2:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+map-age-cleaner@^0.1.3:
+  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.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"
+
+marky@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.1.tgz#a3fcf82ffd357756b8b8affec9fdbf3a30dc1b02"
+  integrity sha512-md9k+Gxa3qLH6sUKpeC2CNkJK/Ld+bEz5X96nYwloqphQE0CKCVEKco/6jxEZixinqNdz5RFi/KaCyfbMDMAXQ==
+
+matcher@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"
+  integrity sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==
+  dependencies:
+    escape-string-regexp "^4.0.0"
+
+md5@^2.2.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
+  dependencies:
+    charenc "0.0.2"
+    crypt "0.0.2"
+    is-buffer "~1.1.6"
+
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
+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@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-5.1.1.tgz#7059b67bf9ac2c924c9f1cff7155a064394adfb3"
+  integrity sha512-qvwipnozMohxLXG1pOqoLiZKNkC4r4qqRucSoDwXowsNGDSULiqFTRUF05vcZWnwJSG22qTsynQhxbaMtnX9gw==
+  dependencies:
+    map-age-cleaner "^0.1.3"
+    mimic-fn "^2.1.0"
+    p-is-promise "^2.1.0"
+
+memfs-or-file-map-to-github-branch@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.2.1.tgz#fdb9a85408262316a9bd5567409bf89be7d72f96"
+  integrity sha512-I/hQzJ2a/pCGR8fkSQ9l5Yx+FQ4e7X6blNHyWBm2ojeFLT3GVzGkTj7xnyWpdclrr7Nq4dmx3xrvu70m3ypzAQ==
+  dependencies:
+    "@octokit/rest" "^16.43.0 || ^17.11.0 || ^18.12.0"
+
+memfs@^3.4.3:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.5.1.tgz#f0cd1e2bfaef58f6fe09bfb9c2288f07fea099ec"
+  integrity sha512-UWbFJKvj5k+nETdteFndTpYxdeTMox/ULeqX5k/dpaQJCCFmj5EeKv3dBcyO2xmkRAx2vppRu5dVG7SOtsGOzA==
+  dependencies:
+    fs-monkey "^1.0.3"
+
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
+memoize-one@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
+meow@^3.3.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.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+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==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+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@^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"
+    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"
+
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.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-db@1.44.0:
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-db@^1.28.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
+  integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
+
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime-types@^2.1.26:
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+  dependencies:
+    mime-db "1.44.0"
+
+mime-types@~2.1.17, 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.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+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-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
+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==
+
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
+mimic-response@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-4.0.0.tgz#35468b19e7c75d10f5165ea25e75a5ceea7cf70f"
+  integrity sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==
+
+mini-css-extract-plugin@^2.7.7:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz#75245f3f30ce3a56dbdd478084df6fe475f02dc7"
+  integrity sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==
+  dependencies:
+    schema-utils "^4.0.0"
+    tapable "^2.2.1"
+
+minimalistic-assert@^1.0.0:
+  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==
+
+"minimatch@2 || 3", 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"
+
+minimatch@9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@1.x, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+minimist@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.3.tgz#3db5c0765545ab8637be71f333a104a965a9ca3f"
+  integrity sha512-+bMdgqjMN/Z77a6NlY/I3U5LlRDbnmaAk6lDveAPKwSpcPM4tKAuYsvYF8xjhOPXhOYGe/73vVLVez5PW+jqhw==
+
+"minipass@^5.0.0 || ^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-6.0.2.tgz#542844b6c4ce95b202c0995b0a471f1229de4c81"
+  integrity sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mixin-deep@^1.2.0:
+  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@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
+  integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
+
+mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
+moment@^2.19.3:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multicast-dns@^7.2.5:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
+  integrity sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==
+  dependencies:
+    dns-packet "^5.2.2"
+    thunky "^1.0.2"
+
+multimatch@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-6.0.0.tgz#c72a9bddbc94baa4727efd613b5d22a1fe4d6ee3"
+  integrity sha512-I7tSVxHGPlmPN/enE3mS1aOSo6bWBfls+3HmuEeCUBCE7gWnm3cBXCBkpurzFjVRwC6Kld8lLaZ1Iv5vOcjvcQ==
+  dependencies:
+    "@types/minimatch" "^3.0.5"
+    array-differ "^4.0.0"
+    array-union "^3.0.1"
+    minimatch "^3.0.4"
+
+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.7.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:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
+  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
+
+nan@^2.12.1:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
+  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
+
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+nanomatch@^1.2.9:
+  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-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"
+
+native-url@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae"
+  integrity sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==
+  dependencies:
+    querystring "^0.2.0"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+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=
+
+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==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+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==
+
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+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-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-environment-flags@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.6.tgz#a30ac13621f6f7d674260a54dede048c3982c088"
+  integrity sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==
+  dependencies:
+    object.getownpropertydescriptors "^2.0.3"
+    semver "^5.7.0"
+
+node-fetch@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-fetch@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b"
+  integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
+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.6.7:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.8.tgz#a68d30b162bc1d8fd71a367e81b997e1f4d4937e"
+  integrity sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-forge@^1, node-forge@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+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-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@10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-10.0.1.tgz#0e82014a15a8456c4cfcdb25858750399ae5f1c7"
+  integrity sha512-YX7TSyDukOZ0g+gmzjB6abKu+hTGvO8+8+gIFDsRCU2t8fLV/P2unmt+LGFaIa4y64aX98Qksa97rgz4vMNeLQ==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.5"
+    shellwords "^0.1.1"
+    uuid "^8.3.2"
+    which "^2.0.2"
+
+node-releases@^1.1.46:
+  version "1.1.47"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.47.tgz#c59ef739a1fd7ecbd9f0b7cf5b7871e8a8b591e4"
+  integrity sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==
+  dependencies:
+    semver "^6.3.0"
+
+node-releases@^1.1.60:
+  version "1.1.60"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
+  integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
+
+node-releases@^2.0.14, node-releases@^2.0.8:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
+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-stream-zip@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.15.0.tgz#158adb88ed8004c6c49a396b50a6a5de3bca33ea"
+  integrity sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==
+
+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==
+
+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:
+  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"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.0.0, 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, 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@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6"
+  integrity sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==
+  dependencies:
+    prepend-http "^2.0.0"
+    query-string "^5.0.1"
+    sort-keys "^2.0.0"
+
+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==
+
+normalize-url@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+
+normalize-url@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-8.0.1.tgz#9b7d96af9836577c58f5883e939365fa15623a4a"
+  integrity sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==
+
+npm-conf@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
+  integrity sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==
+  dependencies:
+    config-chain "^1.1.11"
+    pify "^3.0.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"
+
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+npm-run-path@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.3.0.tgz#e23353d0ebb9317f174e93417e4a4d82d0249e9f"
+  integrity sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
+  dependencies:
+    path-key "^4.0.0"
+
+nth-check@^1.0.2:
+  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"
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+nullthrows@^1.0.0, nullthrows@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
+  integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
+
+nwsapi@^2.2.4:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.10.tgz#0b77a68e21a0b483db70b11fad055906e867cda8"
+  integrity sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==
+
+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-inspect@^1.10.3:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
+  integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
+
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+object-inspect@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+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, 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.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
+  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+object.getownpropertydescriptors@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
+  integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.2"
+
+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"
+
+object.values@^1.1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
+  integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.2"
+
+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==
+
+on-exit-leak-free@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz#fed195c9ebddb7d9e4c3842f93f281ac8dadd3b8"
+  integrity sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  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 sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.0, onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
+open@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
+  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
+  dependencies:
+    default-browser "^4.0.0"
+    define-lazy-prop "^3.0.0"
+    is-inside-container "^1.0.0"
+    is-wsl "^2.2.0"
+
+open@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.2.tgz#fb3681f11f157f2361d2392307548ca1792960e8"
+  integrity sha512-70E/pFTPr7nZ9nLDPNTcj3IVqnNvKuP4VsBmoKV9YGTnChe0mlS3C4qM7qKarhZ8rGaHKLfo+vBTHXDp6ZSyLQ==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
+open@^8.0.9:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+opn@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
+  integrity sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==
+  dependencies:
+    is-wsl "^1.1.0"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+
+optipng-bin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/optipng-bin/-/optipng-bin-6.0.0.tgz#376120fa79d5e71eee2f524176efdd3a5eabd316"
+  integrity sha512-95bB4y8IaTsa/8x6QH4bLUuyvyOoGBCLDA7wOgDL8UFqJpSUh1Hob8JRJhit+wC1ZLN3tQ7mFt7KuBj0x8F2Wg==
+  dependencies:
+    bin-build "^3.0.0"
+    bin-wrapper "^4.0.0"
+    logalot "^2.0.0"
+
+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"
+
+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-filter-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/os-filter-obj/-/os-filter-obj-2.0.0.tgz#1c0b62d5f3a2442749a2d139e6dddee6e81d8d16"
+  integrity sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==
+  dependencies:
+    arch "^2.1.0"
+
+os-locale@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-5.0.0.tgz#6d26c1d95b6597c5d5317bf5fba37eccec3672e0"
+  integrity sha512-tqZcNEDAIZKBEPnHPlVDvKrp7NzgLi7jRmhKiUoa2NUmhl13FtkAGLUVR+ZsYvApBQdBfYm43A4tXXQ4IrYLBA==
+  dependencies:
+    execa "^4.0.0"
+    lcid "^3.0.0"
+    mem "^5.0.0"
+
+os-name@^3.1.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=
+
+osenv@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.0.3.tgz#cd6ad8ddb290915ad9e22765576025d411f29cb6"
+  integrity sha1-zWrY3bKQkVrZ4idlV2Al1BHynLY=
+
+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@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
+  integrity sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==
+
+p-cancelable@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.4.1.tgz#35f363d67d52081c8d9585e37bcceb7e0bbcb2a0"
+  integrity sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==
+
+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-cancelable@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.1.1.tgz#aab7fbd416582fa32a3db49859c122487c5ed2cf"
+  integrity sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==
+
+p-cancelable@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-3.0.0.tgz#63826694b54d61ca1c20ebcb6d3ecf5e14cd8050"
+  integrity sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==
+
+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-event@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-event/-/p-event-1.3.0.tgz#8e6b4f4f65c72bc5b6fe28b75eda874f96a4a085"
+  integrity sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=
+  dependencies:
+    p-timeout "^1.1.1"
+
+p-event@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/p-event/-/p-event-2.3.1.tgz#596279ef169ab2c3e0cae88c1cfbb08079993ef6"
+  integrity sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==
+  dependencies:
+    p-timeout "^2.0.1"
+
+p-event@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/p-event/-/p-event-4.2.0.tgz#af4b049c8acd91ae81083ebd1e6f5cae2044c1b5"
+  integrity sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==
+  dependencies:
+    p-timeout "^3.1.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@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+  integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=
+
+p-is-promise@^2.1.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@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
+  integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2, p-limit@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.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-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-map-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-map-series/-/p-map-series-1.0.0.tgz#bf98fe575705658a9e1351befb85ae4c1f07bdca"
+  integrity sha1-v5j+V1cFZYqeE1G++4WuTB8Hvco=
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-pipe@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-pipe/-/p-pipe-4.0.0.tgz#7e5424569351b2ab452a47826acb93ce09ad6a2c"
+  integrity sha512-HkPfFklpZQPUKBFXzKFB6ihLriIHxnmuQdK9WmLDwe4hf2PdhhfWT/FJa+pc3bA1ywvKXtedxIRmd4Y7BTXE4w==
+
+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@^4.5.0:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
+  integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==
+  dependencies:
+    "@types/retry" "0.12.0"
+    retry "^0.13.1"
+
+p-timeout@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.2.1.tgz#5eb3b353b7fce99f101a1038880bb054ebbea386"
+  integrity sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=
+  dependencies:
+    p-finally "^1.0.0"
+
+p-timeout@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
+  integrity sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==
+  dependencies:
+    p-finally "^1.0.0"
+
+p-timeout@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
+  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
+  dependencies:
+    p-finally "^1.0.0"
+
+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==
+
+package-json-from-dist@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz#e501cd3094b278495eb4258d4c9f6d5ac3019f00"
+  integrity sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==
+
+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@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-8.1.1.tgz#3e9948e43df40d1e8e78a85485f1070bf8f03dc8"
+  integrity sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA==
+  dependencies:
+    got "^12.1.0"
+    registry-auth-token "^5.0.1"
+    registry-url "^6.0.0"
+    semver "^7.3.7"
+
+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:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+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-diff@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.7.1.tgz#9b7a2451c3725baf2c87c831ba192d40ee2237d4"
+  integrity sha512-1j3l8IKcy4yRK2W4o9EYvJLSzpAVwz4DXqCewYyx2vEwk2gcf3DBPqc8Fj4XV3K33OYJ08A8fWwyu/ykD/HUSg==
+
+parse-filepath@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"
+  integrity sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=
+  dependencies:
+    is-absolute "^1.0.0"
+    map-cache "^0.2.0"
+    path-root "^0.1.1"
+
+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.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-json@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-7.1.1.tgz#68f7e6f0edf88c54ab14c00eb700b753b14e2120"
+  integrity sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    error-ex "^1.3.2"
+    json-parse-even-better-errors "^3.0.0"
+    lines-and-columns "^2.0.3"
+    type-fest "^3.8.0"
+
+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-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-link-header@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-link-header/-/parse-link-header-2.0.0.tgz#949353e284f8aa01f2ac857a98f692b57733f6b7"
+  integrity sha512-xjU87V0VyHZybn2RrCX5TIFGxTVZE6zqqZWMPlIKiSKuWh/X5WZdt+w1Ki1nXB+8L/KtL+nZ4iq+sfI6MrhhMw==
+  dependencies:
+    xtend "~4.0.1"
+
+parse-ms@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
+  integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
+
+parse-node-version@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
+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=
+
+parse5-htmlparser2-tree-adapter@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
+  integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
+  dependencies:
+    domhandler "^5.0.2"
+    parse5 "^7.0.0"
+
+parse5@^7.0.0, parse5@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
+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-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-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+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"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+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-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
+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-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-root-regex@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/path-root-regex/-/path-root-regex-0.1.2.tgz#bfccdc8df5b12dc52c8b43ec38d18d72c04ba96d"
+  integrity sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=
+
+path-root@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/path-root/-/path-root-0.1.1.tgz#9a4a6814cac1c0cd73360a95f32083c8ea4745b7"
+  integrity sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=
+  dependencies:
+    path-root-regex "^0.1.0"
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-scurry@^1.7.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.9.2.tgz#90f9d296ac5e37e608028e28a447b11d385b3f63"
+  integrity sha512-qSDLy2aGFPm8i4rsbHd4MNyTcrzHFsLQykrtbuGRknZZCBBVXSv2tSCDN2Cg6Rt/GFRw8GoW9y9Ecw5rIPG1sg==
+  dependencies:
+    lru-cache "^9.1.1"
+    minipass "^5.0.0 || ^6.0.2"
+
+path-to-regexp@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
+  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+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=
+
+peek-readable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-4.0.0.tgz#b024ef391c86136eba0ae9df3ff4f966a09e9a7e"
+  integrity sha512-kLbU4cz6h86poGVBKgAVMpFmD47nX04fPPQNKnv9fuj+IJZYkEBjsYAVu5nDbZWx0ZsWwWlMzeG90zQa5KLBaA==
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+picomatch@^2.0.5:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
+  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
+
+picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
+pify@^2.0.0, pify@^2.2.0, pify@^2.3.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-abstract-transport@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pino-abstract-transport/-/pino-abstract-transport-1.2.0.tgz#97f9f2631931e242da531b5c66d3079c12c9d1b5"
+  integrity sha512-Guhh8EZfPCfH+PMXAb6rKOjGQEoy0xlAIn+irODG5kgfYV+BQ0rGYYWTIel3P5mmyXqkYkPmdIkywsn6QKUR1Q==
+  dependencies:
+    readable-stream "^4.0.0"
+    split2 "^4.0.0"
+
+pino-std-serializers@^6.0.0:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-6.2.2.tgz#d9a9b5f2b9a402486a5fc4db0a737570a860aab3"
+  integrity sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==
+
+pino@8.20.0:
+  version "8.20.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-8.20.0.tgz#ccfc6fef37b165e006b923834131632a8c4f036b"
+  integrity sha512-uhIfMj5TVp+WynVASaVEJFTncTUe4dHBq6CWplu/vBgvGHhvBvQfxz+vcOrnnBQdORH3izaGEurLfNlq3YxdFQ==
+  dependencies:
+    atomic-sleep "^1.0.0"
+    fast-redact "^3.1.1"
+    on-exit-leak-free "^2.1.0"
+    pino-abstract-transport "^1.1.0"
+    pino-std-serializers "^6.0.0"
+    process-warning "^3.0.0"
+    quick-format-unescaped "^4.0.3"
+    real-require "^0.2.0"
+    safe-stable-stringify "^2.3.1"
+    sonic-boom "^3.7.0"
+    thread-stream "^2.0.0"
+
+pinpoint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pinpoint/-/pinpoint-1.1.0.tgz#0cf7757a6977f1bf7f6a32207b709e377388e874"
+  integrity sha1-DPd1eml38b9/ajIge3CeN3OI6HQ=
+
+pirates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-3.0.2.tgz#7e6f85413fd9161ab4e12b539b06010d85954bb9"
+  integrity sha512-c5CgUJq6H2k6MJz72Ak1F5sN9n9wlSlJyEnwvpm9/y3WB4E3pHBDT2c6PEiS1vyJvq2bUxUAIu0EGf8Cx4Ic7Q==
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
+pirates@^4.0.0, 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:
+    node-modules-regexp "^1.0.0"
+
+pirates@^4.0.4:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+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"
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+playwright-core@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1"
+  integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==
+
+playwright@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f"
+  integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==
+  dependencies:
+    playwright-core "1.51.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+plugin-error@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
+  integrity sha512-WzZHcm4+GO34sjFMxQMqZbsz3xiNEgonCskQ9v+IroMmYgk/tas8dG+Hr2D6IbRPybZ12oWpzE/w3cGJ6FJzOw==
+  dependencies:
+    ansi-cyan "^0.1.1"
+    ansi-red "^0.1.1"
+    arr-diff "^1.0.1"
+    arr-union "^2.0.1"
+    extend-shallow "^1.1.2"
+
+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-load-config@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-6.0.1.tgz#6fd7dcd8ae89badcf1b2d644489cbabf83aa8096"
+  integrity sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==
+  dependencies:
+    lilconfig "^3.1.1"
+
+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-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"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
+  dependencies:
+    postcss "^7.0.5"
+
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+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-local-by-default@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
+  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
+  dependencies:
+    icss-utils "^4.1.1"
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-local-by-default@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6"
+  integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+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-scope@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
+
+postcss-modules-scope@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz#32cfab55e84887c079a19bbb215e721d683ef134"
+  integrity sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+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-modules-values@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
+  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
+  dependencies:
+    icss-utils "^4.0.0"
+    postcss "^7.0.6"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^6.0.4:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+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-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+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"
+
+postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
+  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^8.4.33:
+  version "8.4.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+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=
+
+"prettier-2@npm:prettier@^2":
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
+prettier@*, prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
+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@^2.5.1:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
+pretty-format@^29.4.1:
+  version "29.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.4.1.tgz#0da99b532559097b8254298da7c75a0785b1751c"
+  integrity sha512-dt/Z761JUVsrIKaY215o1xQJBGlSmTx/h4cSqXqjHLnU1+Kt+mavVE7UgqJJO5ukx5HjSswHfmXz4LjS2oIJfg==
+  dependencies:
+    "@jest/schemas" "^29.4.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-ms@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.0.tgz#45781273110caf35f55cab21a8a9bd403a233dc0"
+  integrity sha512-J3aPWiC5e9ZeZFuSeBraGxSkGMOvulSWsxDByOcbD1Pr75YL3LSNIKIb52WXbCLE1sS5s4inBBbryjF4Y05Ceg==
+  dependencies:
+    parse-ms "^2.1.0"
+
+prettyjson@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prettyjson/-/prettyjson-1.2.1.tgz#fcffab41d19cab4dfae5e575e64246619b12d289"
+  integrity sha1-/P+rQdGcq0365eV15kJGYZsS0ok=
+  dependencies:
+    colors "^1.1.2"
+    minimist "^1.2.0"
+
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process-warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-3.0.0.tgz#96e5b88884187a1dce6f5c3166d611132058710b"
+  integrity sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ==
+
+process@0.11.10, 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@^2.0.0, progress@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+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-polyfill@^8.1.3:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.0.tgz#367394726da7561457aba2133c9ceefbd6267da0"
+  integrity sha512-k/TC0mIcPVF6yHhUvwAp7cvL6I2fFV7TzF1DuGPI8mBh4QQazf36xCKEHKTZKRysEoTQoQdKyP25J8MPJp7j5g==
+
+promise-toolbox@0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/promise-toolbox/-/promise-toolbox-0.21.0.tgz#6919876f9dea375f01b4ddaec4206db83cb0aa55"
+  integrity sha512-NV8aTmpwrZv+Iys54sSFOBx3tuVaOBvvrft5PNppnxy9xpU/akHbaWIril22AB22zaPgrgwKdD0KsrM0ptUtpg==
+  dependencies:
+    make-error "^1.3.2"
+
+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"
+
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+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"
+
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
+
+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==
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+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.33:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
+
+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.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  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"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+punycode@^2.1.1, punycode@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+pupa@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.0.1.tgz#dbdc9ff48ffbea4a26a069b6f9f7abb051008726"
+  integrity sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==
+  dependencies:
+    escape-goat "^2.0.0"
+
+pupa@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+  dependencies:
+    escape-goat "^2.0.0"
+
+pupa@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-3.1.0.tgz#f15610274376bbcc70c9a3aa8b505ea23f41c579"
+  integrity sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==
+  dependencies:
+    escape-goat "^4.0.0"
+
+pure-rand@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.1.0.tgz#d173cf23258231976ccbdb05247c9787957604f2"
+  integrity sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+query-string@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
+  integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+query-string@^6.12.1:
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
+  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.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"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+
+querystring@0.2.0, 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.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
+  integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
+  dependencies:
+    inherits "~2.0.3"
+
+quick-format-unescaped@^4.0.3:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
+  integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
+
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
+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"
+
+quickselect@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603"
+  integrity sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==
+
+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"
+
+randombytes@^2.1.0:
+  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"
+
+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.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    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:
+    loader-utils "^1.1.0"
+    schema-utils "^2.0.1"
+
+rbush@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/rbush/-/rbush-4.0.1.tgz#1f55afa64a978f71bf9e9a99bc14ff84f3cb0d6d"
+  integrity sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==
+  dependencies:
+    quickselect "^3.0.0"
+
+rc@1.2.8, 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-16-8@npm:react@16.8.0":
+  version "16.8.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0.tgz#8533f0e4af818f448a276eae71681d09e8dd970a"
+  integrity sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.0"
+
+"react-17@npm:react@^17":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+"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-dom-16-8@npm:react-dom@16.8.0":
+  version "16.8.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0.tgz#18f28d4be3571ed206672a267c66dd083145a9c4"
+  integrity sha512-dBzoAGYZpW9Yggp+CzBPC7q1HmWSeRc93DWrwbskmG1eHJWznZB/p0l/Sm+69leIGUS91AXPB/qB3WcPnKx8Sw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.0"
+
+"react-dom-17@npm:react-dom@^17":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
+react-is@^16.8.1, react-is@^18.0.0, "react-is@npm:react-is":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-native-web@0.0.0-26873b469:
+  version "0.0.0-26873b469"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.0.0-26873b469.tgz#90b9cfa0dea3868e23a2bd25665a6b637d93f513"
+  integrity sha512-iJTqj7gxBJNlDwCRM3j6O8uG6qb1AFTuAtvI3sqlkXNfwWVUBDdZ4dh6whOW4RkKTT+nCmkM9vkKgZTW7EFPmg==
+  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.3"
+    inline-style-prefixer "^5.1.0"
+    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.23:
+  version "1.0.23"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.23.tgz#ddb18f775a00f672577f1ec01306a94ca26161b8"
+  integrity sha512-5id3UTx+fG7b7SIOKL9/7aR1vP8+MtIT84cJCf09F6pYalB/nvHlx5EQvsSk27SwHUKjgPamG/nS8ynI0uSfKA==
+
+react-window@^1.8.10:
+  version "1.8.10"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.10.tgz#9e6b08548316814b443f7002b1cf8fd3a1bdde03"
+  integrity sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
+react@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+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@^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 || 3":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.5.0.tgz#465d70e6d1087f6162d079cd0b5db7fbebfd1606"
+  integrity sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^1.0.27-1, readable-stream@^1.1.13:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  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@^2.0.5, readable-stream@^2.3.0:
+  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"
+    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@^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"
+
+readable-stream@^4.0.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
+  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
+  dependencies:
+    abort-controller "^3.0.0"
+    buffer "^6.0.3"
+    events "^3.3.0"
+    process "^0.11.10"
+    string_decoder "^1.3.0"
+
+readable-web-to-node-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/readable-web-to-node-stream/-/readable-web-to-node-stream-2.0.0.tgz#751e632f466552ac0d5c440cc01470352f93c4b7"
+  integrity sha512-+oZJurc4hXpaaqsN68GoZGQAQIA3qr09Or4fqEsargABnbe5Aau8hFn6ISVleT3cpY/0n/8drn7huyyEvTbghA==
+
+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"
+
+readdirp@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.1.2.tgz#eb85801435fbf2a7ee58f19e0921b068fc69948d"
+  integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+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==
+
+real-require@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.2.0.tgz#209632dea1810be2ae063a6ac084fee7e33fba78"
+  integrity sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==
+
+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"
+
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+  dependencies:
+    resolve "^1.20.0"
+
+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@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+  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==
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+
+regenerator-runtime@^0.13.7:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
+regenerator-runtime@^0.13.9:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+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"
+
+regexpp@^3.0.0, regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+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.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
+  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.2.0"
+
+regexpu-core@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
+  integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.12.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+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-auth-token@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-5.0.2.tgz#8b026cc507c8552ebbe06724136267e63302f756"
+  integrity sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==
+  dependencies:
+    "@pnpm/npm-conf" "^2.1.0"
+
+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"
+
+registry-url@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-6.0.1.tgz#056d9343680f2f64400032b1e199faa692286c58"
+  integrity sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==
+  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.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+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.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.12.0.tgz#0e846df6c6530586429377de56e0475583b088dc"
+  integrity sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==
+  dependencies:
+    jsesc "~3.0.2"
+
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
+  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.3"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
+
+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=
+
+replace-ext@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-2.0.0.tgz#9471c213d22e1bcc26717cd6e50881d88f812b06"
+  integrity sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+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@^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==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
+resolve-alpn@^1.0.0, resolve-alpn@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
+  integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+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-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+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.exports@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
+  integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
+
+resolve@^1.1.6, resolve@^1.10.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"
+
+resolve@^1.12.0, resolve@^1.20.0:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^1.14.2:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+responselike@1.0.2, 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"
+
+responselike@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-2.0.1.tgz#9a0bc8fdc252f3fb1cca68b016591059ba1422bc"
+  integrity sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==
+  dependencies:
+    lowercase-keys "^2.0.0"
+
+responselike@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-3.0.0.tgz#20decb6c298aff0dbee1c355ca95461d42823626"
+  integrity sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==
+  dependencies:
+    lowercase-keys "^3.0.0"
+
+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==
+
+retry@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
+retry@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
+  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^2.2.8, rimraf@^2.5.4, 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.1.3"
+
+rimraf@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.0.tgz#614176d4b3010b75e5c390eb0ee96f6dc0cebb9b"
+  integrity sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.1.tgz#0881323ab94ad45fec7c0221f27ea1a142f3f0d0"
+  integrity sha512-OfFZdwtd3lZ+XZzYP/6gTACubwFcHdLRqS9UX3UwpU2dnGQYkPFISRwvM3w9IiB2w7bW5qGo/uAwE4SmXXSKvg==
+  dependencies:
+    glob "^10.2.5"
+
+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=
+
+roarr@^2.15.3:
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/roarr/-/roarr-2.15.3.tgz#65248a291a15af3ebfd767cbf7e44cb402d1d836"
+  integrity sha512-AEjYvmAhlyxOeB9OqPUzQCo3kuAkNfuDk/HqWbZdFsqDFpapkTjiw+p4svNEoRLvuqNTxqfL+s+gtD4eDgZ+CA==
+  dependencies:
+    boolean "^3.0.0"
+    detect-node "^2.0.4"
+    globalthis "^1.0.1"
+    json-stringify-safe "^5.0.1"
+    semver-compare "^1.0.0"
+    sprintf-js "^1.1.2"
+
+rollup-plugin-dts@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-dts/-/rollup-plugin-dts-6.1.1.tgz#46b33f4d1d7f4e66f1171ced9b282ac11a15a254"
+  integrity sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==
+  dependencies:
+    magic-string "^0.30.10"
+  optionalDependencies:
+    "@babel/code-frame" "^7.24.2"
+
+rollup-plugin-prettier@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-prettier/-/rollup-plugin-prettier-4.1.1.tgz#eb74bd47c3cc3ba68bdf34b5323d0d7a47be8cec"
+  integrity sha512-ugpi/EqW12yJa4NO3o4f/wt/YHwiQovVGC2jxZgxuKO9osjt4lVxVA427+itl87XmQc6089ZkpDc6OpaOZKWgQ==
+  dependencies:
+    "@types/prettier" "^1.0.0 || ^2.0.0 || ^3.0.0"
+    diff "5.1.0"
+    lodash.hasin "4.5.2"
+    lodash.isempty "4.4.0"
+    lodash.isnil "4.0.0"
+    lodash.omitby "4.6.0"
+    magic-string "0.30.5"
+
+rollup-plugin-strip-banner@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-strip-banner/-/rollup-plugin-strip-banner-3.0.0.tgz#c4694c3622d15c7ad2b02d5181ce40152e1127ac"
+  integrity sha512-LjIOLM29PAPEzGE6UBZhGNgkXEEMDpaUvl0nmeIG1u514pQQwTtXMzpxzFgUf1dx7B+N+CNSd5Pm7B7W3jl72w==
+  dependencies:
+    extract-banner "0.1.2"
+    magic-string "0.26.7"
+    rollup-pluginutils "2.8.2"
+
+rollup-pluginutils@2.8.2:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
+rollup@^3.29.5:
+  version "3.29.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.5.tgz#8a2e477a758b520fb78daf04bca4c522c1da8a54"
+  integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+rollup@^4.34.8:
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.35.0.tgz#76c95dba17a579df4c00c3955aed32aa5d4dc66d"
+  integrity sha512-kg6oI4g+vc41vePJyO6dHt/yl0Rz3Thv0kJeVQ3D1kS3E5XSuKbPc29G4IpT/Kv1KQwgHVcN+HtyS+HYLNSvQg==
+  dependencies:
+    "@types/estree" "1.0.6"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.35.0"
+    "@rollup/rollup-android-arm64" "4.35.0"
+    "@rollup/rollup-darwin-arm64" "4.35.0"
+    "@rollup/rollup-darwin-x64" "4.35.0"
+    "@rollup/rollup-freebsd-arm64" "4.35.0"
+    "@rollup/rollup-freebsd-x64" "4.35.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.35.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.35.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.35.0"
+    "@rollup/rollup-linux-arm64-musl" "4.35.0"
+    "@rollup/rollup-linux-loongarch64-gnu" "4.35.0"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.35.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.35.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.35.0"
+    "@rollup/rollup-linux-x64-gnu" "4.35.0"
+    "@rollup/rollup-linux-x64-musl" "4.35.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.35.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.35.0"
+    "@rollup/rollup-win32-x64-msvc" "4.35.0"
+    fsevents "~2.3.2"
+
+rrweb-cssom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
+  integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
+
+run-applescript@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
+  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
+  dependencies:
+    execa "^5.0.0"
+
+run-parallel@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
+  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
+
+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.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.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, 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"
+
+safe-stable-stringify@^2.3.1:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
+  integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==
+
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", 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==
+
+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==
+
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
+  dependencies:
+    xmlchars "^2.2.0"
+
+"scheduler-0-13@npm:scheduler@0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0.tgz#e701f62e1b3e78d2bbb264046d4e7260f12184dd"
+  integrity sha512-w7aJnV30jc7OsiZQNPVmBc+HooZuvQZIZIShKutC3tnMFMkcwVN9CZRRSSNw03OnSCKmEkK8usmwcw6dqBaLzw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+scheduler@^0.13.0:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.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"
+  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"
+
+schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
+schema-utils@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.1.1, schema-utils@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.1.tgz#eb2d042df8b01f4b5c276a2dfd41ba0faab72e8d"
+  integrity sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.9.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^5.1.0"
+
+seek-bzip@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4"
+  integrity sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ==
+  dependencies:
+    commander "^2.8.1"
+
+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@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.1.1.tgz#18a7613d714c0cd3385c48af0075abf3f266af61"
+  integrity sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==
+  dependencies:
+    node-forge "^1"
+
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
+semver-diff@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
+  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+  dependencies:
+    semver "^6.3.0"
+
+semver-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-4.0.0.tgz#3afcf5ed6d62259f5c72d0d5d50dffbdc9680df5"
+  integrity sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==
+  dependencies:
+    semver "^7.3.5"
+
+semver-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
+  integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
+
+semver-truncate@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/semver-truncate/-/semver-truncate-1.1.2.tgz#57f41de69707a62709a7e0104ba2117109ea47e8"
+  integrity sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=
+  dependencies:
+    semver "^5.3.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@7.6.2:
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
+  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
+semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.1.tgz#29104598a197d6cbe4733eeecbe968f7b43a9667"
+  integrity sha512-WfuG+fl6eh3eZ2qAf6goB7nhiCd7NPXhmyFxigB/TOkQyeLP8w8GsVehvtGNtnNmyboz4TgeK40B1Kbql/8c5A==
+
+semver@^7.2.1, semver@^7.3.8:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
+semver@^7.3.4, semver@^7.3.7:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+semver@^7.3.5, semver@^7.5.3:
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.1.tgz#60bfe090bf907a25aa8119a72b9f90ef7ca281b2"
+  integrity sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==
+
+semver@^7.5.4:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.6.3:
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
+  integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serialize-error@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-7.0.1.tgz#f1360b0447f61ffb483ec4157c737fab7d778e18"
+  integrity sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==
+  dependencies:
+    type-fest "^0.13.1"
+
+serialize-javascript@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
+  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
+  dependencies:
+    randombytes "^2.1.0"
+
+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.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.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-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+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:
+  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.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+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.11:
+  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@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+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-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.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=
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+shell-quote@1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
+  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
+
+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==
+
+shell-quote@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
+shelljs@^0.8.4, shelljs@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
+  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==
+
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+signal-exit@^3.0.3, signal-exit@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+signal-exit@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.0.2.tgz#ff55bb1d9ff2114c13b400688fa544ac63c36967"
+  integrity sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==
+
+signedsource@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/signedsource/-/signedsource-2.0.0.tgz#f72dc0f98f5bca2763b464a555511a84a4da8eee"
+  integrity sha512-MscTxXbMij5JVgrW1xDiMIc+vFa0+H0+HP+rRrFjwa7ef2VAxIP/4L/E75I5H4xvyb4l1X+a9ch+6Zy5uFu7Fg==
+
+simple-git@^3.10.0:
+  version "3.28.0"
+  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-3.28.0.tgz#c6345b2e387880f8450788a1e388573366ae48ac"
+  integrity sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==
+  dependencies:
+    "@kwsites/file-exists" "^1.1.1"
+    "@kwsites/promise-deferred" "^1.1.1"
+    debug "^4.4.0"
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.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"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  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"
+  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"
+    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@^0.3.24:
+  version "0.3.24"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
+  integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
+  dependencies:
+    faye-websocket "^0.11.3"
+    uuid "^8.3.2"
+    websocket-driver "^0.7.4"
+
+sonic-boom@^3.7.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-3.8.1.tgz#d5ba8c4e26d6176c9a1d14d549d9ff579a163422"
+  integrity sha512-y4Z8LCDBuum+PBP3lSV7RHrXscqksve/bi0as7mhwVnBW+/wUqKT/2Kb7um8yqcFy0duYbbPxzt89Zy2nOCaxg==
+  dependencies:
+    atomic-sleep "^1.0.0"
+
+sort-keys-length@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sort-keys-length/-/sort-keys-length-1.0.1.tgz#9cb6f4f4e9e48155a6aa0671edd336ff1479a188"
+  integrity sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=
+  dependencies:
+    sort-keys "^1.0.0"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+sort-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
+  integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+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-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+source-map-resolve@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    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.13:
+  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"
+
+source-map-support@0.5.21, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  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"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
+
+source-map@0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
+source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6:
+  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:
+  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.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+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.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
+  integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
+
+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.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
+  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-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"
+
+split2@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
+  integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
+
+split@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
+  dependencies:
+    through "2"
+
+sprintf-js@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
+  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+squeak@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/squeak/-/squeak-1.3.0.tgz#33045037b64388b567674b84322a6521073916c3"
+  integrity sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=
+  dependencies:
+    chalk "^1.0.0"
+    console-stream "^0.1.1"
+    lpad-align "^1.0.1"
+
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.1.1.tgz#ffef0a3318b1b60c3b58564989aca5660729ec71"
+  integrity sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ==
+
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
+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"
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+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-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
+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"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
+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@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-natural-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
+  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^3.0.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.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.trimend@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
+  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string.prototype.trimstart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
+  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string_decoder@^1.1.1, string_decoder@^1.3.0:
+  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"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^3.0.0:
+  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@^5.1.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@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+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"
+  integrity sha1-nG5yCjE7qYNliVGEBcz7iKX0G5w=
+
+strip-bom@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-5.0.0.tgz#88d2e135d154dca7a5e06b4a4ba9653b6bdc0dd2"
+  integrity sha512-p+byADHF7SzEcVnLvc/r3uognM1hUhObuHXxJcgLCfD194XAkaLbjq3Wzb0N5G2tgIjH0dgT708Z51QxMeu60A==
+
+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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-dirs@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/strip-dirs/-/strip-dirs-2.1.0.tgz#4987736264fc344cf20f6c34aca9d13d1d4ed6c5"
+  integrity sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==
+  dependencies:
+    is-natural-number "^4.0.1"
+
+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-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
+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@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-5.0.1.tgz#0d8b7d01b23848ed7dbdf4baaaa31a8250d8cfa0"
+  integrity sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+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-outer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
+  integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
+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=
+
+strtok3@^6.0.3:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/strtok3/-/strtok3-6.2.2.tgz#aad1da5fc28bf10d603c367c2a7f9f47a6c1d2d9"
+  integrity sha512-iUzLl3UhF2RfqQah80JngnfltQFLEidGyTX8+hHFMQFjzUj3UpIpOx824FtFmRI9bwyywReENpdHGDkFJwJlGQ==
+  dependencies:
+    peek-readable "^4.0.0"
+
+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"
+
+style-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
+  integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
+
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+sumchecker@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
+  integrity sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==
+  dependencies:
+    debug "^4.1.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@^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-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@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.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"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svgo@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
+  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-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.4:
+  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==
+
+tabbable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
+  integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
+
+table@^6.0.9:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
+  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
+table@^6.7.3:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.9.0.tgz#50040afa6264141c7566b3b81d4d82c47a8668f5"
+  integrity sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
+tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+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, tar-stream@^1.5.0, tar-stream@^1.5.2:
+  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"
+    fs-constants "^1.0.0"
+    readable-stream "^2.3.0"
+    to-buffer "^1.1.1"
+    xtend "^4.0.0"
+
+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:
+    bl "^3.0.0"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
+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"
+
+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:
+    temp-dir "^1.0.0"
+    uuid "^3.0.1"
+
+term-size@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
+  integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
+
+terser-webpack-plugin@^5.3.7:
+  version "5.3.8"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz#415e03d2508f7de63d59eca85c5d102838f06610"
+  integrity sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.8"
+
+terser@^5.16.8:
+  version "5.17.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.3.tgz#7f908f16b3cdf3f6c0f8338e6c1c674837f90d25"
+  integrity sha512-AudpAZKmZHkG9jueayypz4duuCFJMMNGRMwaPvQKWfxKedh8Z2x3OCoDqIIi1xx5+iwx1u6Au8XQcc9Lke65Yg==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+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=
+
+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"
+
+thread-stream@^2.0.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-2.7.0.tgz#d8a8e1b3fd538a6cca8ce69dbe5d3d097b601e11"
+  integrity sha512-qQiRWsU/wvNolI6tbbCKd9iKaTnCXsTwVxhhKM6nctPdujTyztjlbUkUTUymidWcMnZ5pWR0ej4a0tjsW021vw==
+  dependencies:
+    real-require "^0.2.0"
+
+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"
+
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+through2@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
+  integrity sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==
+  dependencies:
+    readable-stream "2 || 3"
+
+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, through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+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.1.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
+  integrity sha512-gLCeArryy2yNTRzTGKbZbloctj64jkZ57hj5zdraXue6aFgd6PmvVtEyiUU+hvU0v7q08oVv8r8ev0tRo6bvgw==
+
+timed-out@^4.0.0, timed-out@^4.0.1:
+  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"
+
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
+tinyexec@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
+  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
+
+tinyglobby@^0.2.11:
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.12.tgz#ac941a42e0c5773bd0b5d08f32de82e74a1a61b5"
+  integrity sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==
+  dependencies:
+    fdir "^6.4.3"
+    picomatch "^4.0.2"
+
+titleize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
+  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+
+tmp@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
+  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
+
+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.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+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-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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
+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"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.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"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+token-types@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/token-types/-/token-types-2.1.1.tgz#bd585d64902aaf720b8979d257b4b850b4d45c45"
+  integrity sha512-wnQcqlreS6VjthyHO3Y/kpK/emflxDBNhlNUPfh7wE39KnuDdOituXomIbyI79vBtF0Ninpkh72mcuRHo+RG3Q==
+  dependencies:
+    "@tokenizer/token" "^0.1.1"
+    ieee754 "^1.2.1"
+
+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@^4.1.2:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469"
+  integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==
+  dependencies:
+    punycode "^2.3.0"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
+traverse-chain@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"
+  integrity sha1-YdvC1Ttp/2CRoSoWj9fUMxB+QPE=
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+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-repeated@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
+  integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
+ts-api-utils@^1.0.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+ts-node@8.9.1:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.9.1.tgz#2f857f46c47e91dcd28a14e052482eb14cfd65a5"
+  integrity sha512-yrq6ODsxEFTLz0R3BX2myf0WBCSQh9A+py8PBo1dCzWIOcvisbyH6akNKqDHMgXePF2kir5mm5JXJTH3OUJYOQ==
+  dependencies:
+    arg "^4.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
+
+tslib@^1.8.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
+tslib@^1.9.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
+  integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
+
+tslib@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
+tsup@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-8.4.0.tgz#2fdf537e7abc8f1ccbbbfe4228f16831457d4395"
+  integrity sha512-b+eZbPCjz10fRryaAA7C8xlIHnf8VnsaRqydheLIqwG/Mcpfk8Z5zp3HayX7GaTygkigHl5cBUs+IhcySiIexQ==
+  dependencies:
+    bundle-require "^5.1.0"
+    cac "^6.7.14"
+    chokidar "^4.0.3"
+    consola "^3.4.0"
+    debug "^4.4.0"
+    esbuild "^0.25.0"
+    joycon "^3.1.1"
+    picocolors "^1.1.1"
+    postcss-load-config "^6.0.1"
+    resolve-from "^5.0.0"
+    rollup "^4.34.8"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.35.0"
+    tinyexec "^0.3.2"
+    tinyglobby "^0.2.11"
+    tree-kill "^1.2.2"
+
+tsutils@^3.17.1:
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
+  integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==
+  dependencies:
+    tslib "^1.8.1"
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  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"
+  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"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+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-fest@^1.0.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
+  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
+
+type-fest@^2.13.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
+type-fest@^3.8.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
+  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+
+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"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+typescript-compiler@^1.4.1-2:
+  version "1.4.1-2"
+  resolved "https://registry.yarnpkg.com/typescript-compiler/-/typescript-compiler-1.4.1-2.tgz#ba4f7db22d91534a1929d90009dce161eb72fd3f"
+  integrity sha512-EMopKmoAEJqA4XXRFGOb7eSBhmQMbBahW6P1Koayeatp0b4AW2q/bBqYWkpG7QVQc9HGQUiS4trx2ZHcnAaZUg==
+
+typescript@3.9.3:
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.3.tgz#d3ac8883a97c26139e42df5e93eeece33d610b8a"
+  integrity sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==
+
+typescript@^5.4.3:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.3.tgz#919b44a7dbb8583a9b856d162be24a54bf80073e"
+  integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
+
+typescript@~4.4.4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
+  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
+
+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==
+
+unbox-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
+
+unbzip2-stream@^1.0.9:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
+  integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
+  dependencies:
+    buffer "^5.2.1"
+    through "^2.3.8"
+
+unc-path-regex@^0.1.0, unc-path-regex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
+undici@^5.28.4:
+  version "5.28.4"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.28.4.tgz#6b280408edb6a1a604a9b20340f45b422e373068"
+  integrity sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==
+  dependencies:
+    "@fastify/busboy" "^2.0.0"
+
+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-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
+  integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
+
+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-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
+  integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
+
+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==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+union-value@^1.0.0:
+  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 "^2.0.1"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+unique-string@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-3.0.0.tgz#84a1c377aff5fd7a8bc6b55d8244b2bd90d75b9a"
+  integrity sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==
+  dependencies:
+    crypto-random-string "^4.0.0"
+
+universal-user-agent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
+  integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
+
+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==
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
+universalify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
+  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+
+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=
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
+
+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"
+
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
+upath@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
+  integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-browserslist-db@^1.0.10, update-browserslist-db@^1.0.13:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.15.tgz#60ed9f8cba4a728b7ecf7356f641a31e3a691d97"
+  integrity sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.0"
+
+update-browserslist-db@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420"
+  integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+update-notifier@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.0.tgz#4866b98c3bc5b5473c020b1250583628f9a328f3"
+  integrity sha512-w3doE1qtI0/ZmgeoDoARmI5fjDoT93IfKgEGqm26dGUOh8oNpaSTsGNdYRN/SjOuo10jcJGwkEL3mroKzktkew==
+  dependencies:
+    boxen "^4.2.0"
+    chalk "^3.0.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.1"
+    is-npm "^4.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.0.0"
+    pupa "^2.0.1"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
+
+update-notifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-6.0.2.tgz#a6990253dfe6d5a02bd04fbb6a61543f55026b60"
+  integrity sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==
+  dependencies:
+    boxen "^7.0.0"
+    chalk "^5.0.1"
+    configstore "^6.0.0"
+    has-yarn "^3.0.0"
+    import-lazy "^4.0.0"
+    is-ci "^3.0.1"
+    is-installed-globally "^0.4.0"
+    is-npm "^6.0.0"
+    is-yarn-global "^0.4.0"
+    latest-version "^7.0.0"
+    pupa "^3.1.0"
+    semver "^7.3.7"
+    semver-diff "^4.0.0"
+    xdg-basedir "^5.1.0"
+
+update-notifier@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
+  integrity sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==
+  dependencies:
+    boxen "^5.0.0"
+    chalk "^4.1.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.4.0"
+    is-npm "^5.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.1.0"
+    pupa "^2.1.1"
+    semver "^7.3.4"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.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"
+
+uri-js@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  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-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.0.tgz#c7d6b0d6b0fccd51ab3ffc58a78d32b8d89a7be2"
+  integrity sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.26"
+    schema-utils "^2.6.5"
+
+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.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+url-to-options@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
+  integrity sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=
+
+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.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+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.2, 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.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
+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"
+
+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:
+    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:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
+v8-to-istanbul@^9.0.1:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz#2ed7644a245cddd83d4e087b9b33b3e62dfd10ad"
+  integrity sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^2.0.0"
+
+v8flags@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.2.0.tgz#b243e3b4dfd731fa774e7492128109a0fe66d656"
+  integrity sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+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"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  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"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vercel@^20.1.0:
+  version "20.1.0"
+  resolved "https://registry.yarnpkg.com/vercel/-/vercel-20.1.0.tgz#366c39892455f5fff9b1d31db6e6ac1dff436453"
+  integrity sha512-fOYq2X6o157hOBbyxU9VcM2pCHa6cAxvkA731N9FEw8MyMnPC7zJRgFQ/kYJ0oisjlKsmm2A1ryrLEz3KLIDFw==
+  dependencies:
+    "@vercel/build-utils" "2.5.1"
+    "@vercel/go" "1.1.6"
+    "@vercel/node" "1.8.1"
+    "@vercel/python" "1.2.3"
+    "@vercel/ruby" "1.2.4"
+    update-notifier "4.1.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.x:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.0.tgz#d85b07da96e458d25b2ffe19fece9f2caa13ed86"
+  integrity sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
+vlq@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
+  integrity sha1-4xbVJXtAuGu0PLjV/qXX9U1rDKE=
+
+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"
+
+w3c-xmlserializer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
+  integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==
+  dependencies:
+    xml-name-validator "^4.0.0"
+
+walker@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+watchpack@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff"
+  integrity sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+watchpack@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+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@^8:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-8.2.0.tgz#876534050bfacaa9e89cdf86ff16ef859cc3161b"
+  integrity sha512-krU7rmxaG96b3Q9Enbry9/pmE/5FUGkvajCGfJCD+J79rt7JFjhVpw1Dszz4BqQkTd3y8cG5wJ3p1uC6uyAwcA==
+  dependencies:
+    "@babel/runtime" "7.24.7"
+    "@devicefarmer/adbkit" "3.2.6"
+    addons-linter "6.31.1"
+    bunyan "1.8.15"
+    camelcase "8.0.0"
+    chrome-launcher "0.15.1"
+    debounce "1.2.1"
+    decamelize "6.0.0"
+    es6-error "4.1.1"
+    firefox-profile "4.6.0"
+    fs-extra "11.2.0"
+    fx-runner "1.4.0"
+    https-proxy-agent "^7.0.0"
+    jose "5.4.1"
+    jszip "3.10.1"
+    mkdirp "3.0.1"
+    multimatch "6.0.0"
+    mz "2.7.0"
+    node-fetch "3.3.2"
+    node-notifier "10.0.1"
+    open "9.1.0"
+    parse-json "7.1.1"
+    promise-toolbox "0.21.0"
+    source-map-support "0.5.21"
+    strip-bom "5.0.0"
+    strip-json-comments "5.0.1"
+    tmp "0.2.3"
+    update-notifier "6.0.2"
+    watchpack "2.4.1"
+    ws "8.17.1"
+    yargs "17.7.2"
+    zip-dir "2.0.0"
+
+web-streams-polyfill@^3.0.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b"
+  integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==
+
+web-streams-polyfill@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.1.1.tgz#1516f2d4ea8f1bdbfed15eb65cb2df87098c8364"
+  integrity sha512-Czi3fG883e96T4DLEPRvufrF2ydhOOW1+1a6c3gNjH2aIh50DNFBdfwh2AKoOf1rXvpvavAoA11Qdq9+BKjE0Q==
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
+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==
+
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
+webpack-cli@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.1.1.tgz#c211ac6d911e77c512978f7132f0d735d4a97ace"
+  integrity sha512-OLJwVMoXnXYH2ncNGU8gxVpUtm3ybvdioiTvHgUyBuyMLKiVvWy+QObzBsMtp5pH7qQoEuWgeEUQ/sU3ZJFzAw==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^2.1.0"
+    "@webpack-cli/info" "^2.0.1"
+    "@webpack-cli/serve" "^2.0.4"
+    colorette "^2.0.14"
+    commander "^10.0.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
+    webpack-merge "^5.7.3"
+
+webpack-dev-middleware@^5.3.1:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
+  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
+  dependencies:
+    colorette "^2.0.10"
+    memfs "^3.4.3"
+    mime-types "^2.1.31"
+    range-parser "^1.2.1"
+    schema-utils "^4.0.0"
+
+webpack-dev-server@^4.15.0:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.15.0.tgz#87ba9006eca53c551607ea0d663f4ae88be7af21"
+  integrity sha512-HmNB5QeSl1KpulTBQ8UT4FPrByYyaLxpJoQ0+s7EvUrMc16m0ZS1sgb1XGqzmgCPk0c9y+aaXxn11tbLzuM7NQ==
+  dependencies:
+    "@types/bonjour" "^3.5.9"
+    "@types/connect-history-api-fallback" "^1.3.5"
+    "@types/express" "^4.17.13"
+    "@types/serve-index" "^1.9.1"
+    "@types/serve-static" "^1.13.10"
+    "@types/sockjs" "^0.3.33"
+    "@types/ws" "^8.5.1"
+    ansi-html-community "^0.0.8"
+    bonjour-service "^1.0.11"
+    chokidar "^3.5.3"
+    colorette "^2.0.10"
+    compression "^1.7.4"
+    connect-history-api-fallback "^2.0.0"
+    default-gateway "^6.0.3"
+    express "^4.17.3"
+    graceful-fs "^4.2.6"
+    html-entities "^2.3.2"
+    http-proxy-middleware "^2.0.3"
+    ipaddr.js "^2.0.1"
+    launch-editor "^2.6.0"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.1.1"
+    serve-index "^1.9.1"
+    sockjs "^0.3.24"
+    spdy "^4.0.2"
+    webpack-dev-middleware "^5.3.1"
+    ws "^8.13.0"
+
+webpack-merge@^5.7.3:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
+  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  dependencies:
+    clone-deep "^4.0.1"
+    wildcard "^2.0.0"
+
+webpack-sources@^3.2.0, webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack-stats-plugin@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-1.1.3.tgz#ebcc36c8b468074ad737882e2043c1ce4b55d928"
+  integrity sha512-yUKYyy+e0iF/w31QdfioRKY+h3jDBRpthexBOWGKda99iu2l/wxYsI/XqdlP5IU58/0KB9CsJZgWNAl+/MPkRw==
+
+webpack@^5.82.1:
+  version "5.82.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.82.1.tgz#8f38c78e53467556e8a89054ebd3ef6e9f67dbab"
+  integrity sha512-C6uiGQJ+Gt4RyHXXYt+v9f+SN1v83x68URwgxNQ98cvH8kxiuywWGP4XeNZ1paOzZ63aY3cTciCEQJNFUljlLw==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^1.0.0"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.14.0"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.2"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.7"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
+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-driver@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    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@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
+  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
+  dependencies:
+    iconv-lite "0.6.3"
+
+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@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
+whatwg-url@^12.0.0, whatwg-url@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-12.0.1.tgz#fd7bcc71192e7c3a2a97b9a8d6b094853ed8773c"
+  integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==
+  dependencies:
+    tr46 "^4.1.1"
+    webidl-conversions "^7.0.0"
+
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+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-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+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.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.4.tgz#1557f96080604e5b11b3599eb9f45b50a9efd722"
+  integrity sha1-FVf5YIBgTlsRs1meufRbUKnv1yI=
+  dependencies:
+    is-absolute "^0.1.7"
+    isexe "^1.1.1"
+
+which@^1.0.5, which@^1.2.9:
+  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"
+
+which@^2.0.1, which@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
+widest-line@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-4.0.1.tgz#a0fc673aaba1ea6f0a0d35b3c2795c9a9cc2ebf2"
+  integrity sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==
+  dependencies:
+    string-width "^5.0.1"
+
+wildcard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
+  integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
+
+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==
+
+workerize-loader@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/workerize-loader/-/workerize-loader-2.0.2.tgz#2f39c3e6eb6c41fac8d28d5b9fa20b4035e3db7a"
+  integrity sha512-HoZ6XY4sHWxA2w0WpzgBwUiR3dv1oo7bS+oCwIpb6n54MclQ/7KXdXsVIChTCygyuHtVuGBO1+i3HzTt699UJQ==
+  dependencies:
+    loader-utils "^2.0.0"
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+write-file-atomic@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.1.tgz#558328352e673b5bb192cf86500d60b230667d4b"
+  integrity sha512-JPStrIyyVJ6oCSz/691fAjFtefZ6q+fP6tm+OS4Qw6o+TGQxNp1ziY2PgS+X/m0V8OWhZiO/m4xSj+Pr4RrZvw==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+write-file-atomic@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+write-file-atomic@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
+  integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
+ws@8.17.1, ws@^8.13.0:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
+
+ws@^7:
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
+xcase@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xcase/-/xcase-2.0.1.tgz#c7fa72caa0f440db78fd5673432038ac984450b9"
+  integrity sha512-UmFXIPU+9Eg3E9m/728Bii0lAIuoc+6nbrNUKaRPJOFp91ih44qqGlWtxMB6kXFrRD6po+86ksHM5XHCfk6iPw==
+
+xdg-basedir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
+  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+
+xdg-basedir@^5.0.1, xdg-basedir@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-5.1.0.tgz#1efba19425e73be1bc6f2a6ceb52a3d2c884c0c9"
+  integrity sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==
+
+xml-name-validator@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
+  integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
+
+xml2js@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.5.0.tgz#d9440631fbb2ed800203fad106f2724f62c493b7"
+  integrity sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~11.0.0"
+
+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@~11.0.0:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
+  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
+
+xmlbuilder@~9.0.1:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
+  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+xtend@^4.0.0, 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==
+
+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==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+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.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yargs-parser@^18.1.1:
+  version "18.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.2.tgz#2f482bea2136dbde0861683abea7756d30b504f1"
+  integrity sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@17.7.2, yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
+yargs@^15.1.0:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.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 "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
+yargs@^15.3.1:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
+  integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.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 "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.1"
+
+yauzl@2.10.0, yauzl@^2.10.0, yauzl@^2.4.2:
+  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"
+
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zip-dir@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/zip-dir/-/zip-dir-2.0.0.tgz#c5df6e15c8f9efeb4e320377028c9f5c8277c932"
+  integrity sha512-uhlsJZWz26FLYXOD6WVuq+fIcZ3aBPGo/cFdiLlv3KNwpa52IF3ISV8fLhQLiqVu5No3VhlqlgthN6gehil1Dg==
+  dependencies:
+    async "^3.2.0"
+    jszip "^3.2.2"
+
+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:
+    archiver-utils "^2.1.0"
+    compress-commons "^2.1.1"
+    readable-stream "^3.4.0"
+
+"zod-validation-error@^3.5.0 || ^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918"
+  integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==
+
+"zod@^3.25.0 || ^4.0.0":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0"
+  integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==